@charset "UTF-8";
/* variable
-------------------------------------------------------------------------------------------------------------------- */
/* mixin
-------------------------------------------------------------------------------------------------------------------- */
/* function
-------------------------------------------------------------------------------------------------------------------- */
/* HTML
テキスト
*/
/* HTML
テキスト
*/
/* loading
-------------------------------------------------------------------------------------------------------------------- */
#loading {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: center top #fff;
background-size: 1800px auto;
z-index: 999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loading > .container {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
#loading > .container > .logo {
flex: 0 0 auto;
}
#loading > .container > .progress {
flex: 0 0 auto;
margin-top: 23px;
width: 240px;
height: 4px;
background: linear-gradient(to right, #f76a84 50%, rgba(247, 106, 132, 0) 50%) 100% 0% no-repeat;
background-size: 200% 100%;
transition: background-position 0.1s;
}
/* common override
-------------------------------------------------------------------------------------------------------------------- */
/* Main Visual
-------------------------------------------------------------------------------------------------------------------- */
#mainVisual > .container {
width: calc(100% - 100px);
height: 852px;
margin: 0 auto 63px;
position: relative;
z-index: 1;
}
#mainVisual > .container > .title {
width: 1390px;
height: 100%;
margin: 0 auto;
position: absolute;
z-index: 2;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#mainVisual > .container > .title > .txtLarge {
font-size: 7.8125rem;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
position: absolute;
right: 66px;
top: 311px;
line-height: 0.96;
letter-spacing: 1.4px;
display: block;
}
#mainVisual > .container > .title > .txtLarge > span {
display: block;
overflow: hidden;
}
#mainVisual > .container > .title > .txtLarge > span > span {
display: block;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: translateY(150%);
}
#mainVisual > .container > .title > .txtSmall {
font-size: 0.75rem;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
position: absolute;
right: 194px;
top: 191px;
line-height: 1.75;
letter-spacing: 2.2px;
display: block;
overflow: hidden;
}
#mainVisual > .container > .title > .txtSmall > span {
display: block;
transform: translateY(200%);
}
#mainVisual > .container > .title > .ja {
display: block;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.9375rem;
position: absolute;
right: 74px;
top: 132px;
letter-spacing: 1.3px;
line-height: 1.5;
overflow: hidden;
}
_:-ms-input-placeholder,
:root #mainVisual > .container > .title > .ja {
top: 124px;
}
#mainVisual > .container > .title > .ja > span {
display: block;
transform: translateY(200%);
}
_:-ms-input-placeholder,
:root #mainVisual > .container > .title > .ja > span {
padding-top: 8px;
}
#mainVisual > .container > .pic {
width: 1000px;
height: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
#mainVisual > .container > .pic > .slide {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: 0;
left: 0;
}
#mainVisual > .container > .pic > .slide > li {
position: absolute;
z-index: 8;
overflow: hidden;
height: 0;
display: block;
}
#mainVisual > .container > .pic > .slide > li > picture {
display: block;
filter: blur(2px);
transition: filter 10s cubic-bezier(0.075, 0.82, 0.165, 1);
position: absolute;
overflow: hidden;
transform: rotate(30deg);
z-index: 9;
}
#mainVisual > .container > .pic > .slide > li > picture.blur {
filter: blur(0);
}
#mainVisual > .container > .pic > .slide.slidemv > li > picture {
transform-origin: top left;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(1) {
left: -758px;
top: 109px;
width: 502px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(1) > picture {
left: 159px;
top: -98px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(2) {
left: -109px;
top: 4px;
width: 600px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(2) > picture {
left: 189px;
top: -109px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(3) {
left: 929px;
top: 390px;
width: 502px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(3) > picture {
left: 80px;
top: -135px;
}
#mainVisual > .container > .pic > .slide.show > li > picture {
transform-origin: right bottom;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(1) {
right: 1256px;
bottom: 249px;
width: 502px;
top: auto;
left: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(1) > picture {
right: 81px;
bottom: -138px;
top: auto;
left: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(2) {
right: 511px;
bottom: 97px;
top: auto;
left: auto;
width: 600px;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(2) > picture {
right: 149px;
bottom: -261px;
left: auto;
top: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(3) {
right: -432px;
bottom: -43px;
top: auto;
width: 502px;
left: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(3) > picture {
right: 161px;
bottom: -90px;
top: auto;
left: auto;
}
#mainVisual > .container > .deco {
width: 1260px;
height: 100%;
margin: 0 auto;
position: absolute;
z-index: 2;
top: 0;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
#mainVisual > .container > .deco > span {
display: block;
position: absolute;
z-index: 9;
}
#mainVisual > .container > .deco > span:nth-child(1) {
top: 107px;
left: -89px;
}
#mainVisual > .container > .deco > span:nth-child(2) {
top: 8px;
left: 21px;
}
#mainVisual > .container > .deco > span:nth-child(3) {
top: 358px;
left: -37px;
}
#mainVisual > .container > .deco > span:nth-child(4) {
bottom: 68px;
left: calc(46% - 7px);
}
#mainVisual > .container > .deco > span:nth-child(5) {
bottom: 153px;
right: calc(38% - 7px);
transform: scaleX(-1);
}
#mainVisual > .container > .deco > span:nth-child(6) {
bottom: 105px;
right: 131px;
}
#mainVisual > .container > .decoAnima {
width: 1260px;
height: 100%;
margin: 0 auto;
position: absolute;
z-index: 2;
top: 0;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
#mainVisual > .container > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
display: block;
line-height: 1;
}
#mainVisual > .container > .decoAnima > span > picture {
display: flex;
}
#mainVisual > .container > .decoAnima > span:nth-child(1) {
bottom: 204px;
left: -130px;
}
#mainVisual > .container > .decoAnima > span:nth-child(2) {
bottom: 242px;
left: -111px;
}
#mainVisual > .container > .decoAnima > span:nth-child(3) {
bottom: 234px;
left: -151px;
}
#mainVisual > .container > .decoAnima > span:nth-child(4) {
top: 211px;
right: 587px;
}
#mainVisual > .container > .decoAnima > span:nth-child(5) {
top: 234px;
right: 565px;
}
#mainVisual > .container > .decoAnima > span:nth-child(6) {
top: 218px;
right: -7px;
}
#mainVisual > .container > .decoAnima > span:nth-child(7) {
top: 255px;
right: 13px;
}
#mainVisual > .container > .decoAnima > span:nth-child(8) {
top: 247px;
right: -27px;
}
#mainVisual > .container > .decoAnima > span:nth-child(9) {
bottom: 231px;
right: 386px;
}
#mainVisual > .container > .decoAnima > span:nth-child(10) {
bottom: 255px;
right: 383px;
}
#mainVisual > .container > .decoAnima > span:nth-child(11) {
bottom: 241px;
right: 372px;
}
#mainVisual > .container > .bg {
position: absolute;
left: 50%;
top: -138px;
width: 100%;
background-color: #fff;
border-radius: 40px;
transform: translateX(-50%);
z-index: -1;
height: calc(100% + 138px);
pointer-events: none;
}
/* greet
-------------------------------------------------------------------------------------------------------------------- */
#greet {
margin-top: 70px;
}
#greet > .container {
width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
#greet > .container > .anim_bound > h1 > p {
text-align: center;
margin: 0 auto 15px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#greet > .container > .anim_bound > h1 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
/* time
-------------------------------------------------------------------------------------------------------------------- */
#time {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
display: block;
margin-top: 97px;
}
#time > .container {
width: 950px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#time > h2 {
text-align: center;
margin: 0 auto 15px;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#time > h2 > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
#time > .container > .access {
width: 50%;
}
#time > .container > .access > .title {
margin-left: -23px;
margin-bottom: 24px;
}
#time > .container > .access > .address {
line-height: 1.86666;
font-size: 0.9375rem;
}
#time > .container > .access > .schedule > table {
width: 502px;
border-collapse: separate;
margin: 20px 0 11px;
z-index: 5;
}
#time > .container > .access > .schedule > table th,
#time > .container > .access > .schedule > table td {
line-height: 1;
vertical-align: middle;
text-align: center;
font-size: 15px;
font-weight: normal;
white-space: nowrap;
z-index: 5;
}
#time > .container > .access > .schedule > table th {
text-align: left;
padding-left: 19px;
letter-spacing: 2px;
}
#time > .container > .access > .schedule > table td {
width: 47px;
}
#time > .container > .access > .schedule > table td.wide {
width: 87px;
}
#time > .container > .access > .schedule > table td:last-child {
width: 61px;
padding-right: 21px;
}
#time > .container > .access > .schedule > table thead th,
#time > .container > .access > .schedule > table thead td {
height: 59px;
background-color: #77b5d9;
color: #ffffff;
font-weight: 600;
}
#time > .container > .access > .schedule > table thead th,
#time > .container > .access > .schedule > table thead td {
height: 30px;
color: #fff;
}
#time > .container > .access > .schedule > table tbody th,
#time > .container > .access > .schedule > table tbody td {
height: 47px;
border-bottom: 1px solid #1e3b5c;
font-family: europa, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.1875rem;
letter-spacing: 0.5px;
}
#time > .container > .access > .schedule > table tbody td {
font-size: 1.1875rem;
color: #1e3b5c;
}
#time > .container > .access > .schedule > p {
line-height: 1.4667;
font-size: 0.875rem;
}
.holiday-info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 15px 0 8px;
}
.holiday-badge {
background: #f08080;
color: white;
padding: 3px 12px;
border-radius: 20px;
font-weight: bold;
font-size: 0.9rem;
}
.holiday-text {
font-size: 0.95rem;
font-weight: bold;
}
#time > .container > .access > .tel-container > .tel-link {
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #707070;
text-decoration: none;
transition: color 0.3s ease;
}
#time > .container > .access > .tel-container > .tel-link:hover {
color: #ff717b;
}
#time > .container > .access > .tel-container > .tel-label {
font-size: 0.8em;
margin-right: 2px;
}
#time > .container > .link > p {
color: #707070;
text-align: center;
}
#time > .container > .link > p:first-of-type {
font-weight: bold;
}
#time > .container > .link > p:last-of-type {
font-size: 0.8em;
}
#time > .container > .link > iframe {
height: 250px;
width: 400px ;
display: block;
margin: auto;
z-index: 5;
}
/* menu-slider-section
-------------------------------------------------------------------------------------------------------------------- */
/* おすすめの治療 */
#menu-slider-section > .container > h2 > p {
text-align: center;
margin: 0 auto 15px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
z-index: 100 !important;
}
#menu-slider-section > .container > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
/* セクション全体 */
#menu-slider-section {
padding: 60px 0;
z-index: 1;
}
#menu-slider-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* セクションタイトル */
/* #menu-slider-section > .container > .anim_bound > .section-title {
text-align: center;
margin-bottom: 40px;
}
#menu-slider-section > .container > .anim_bound > .section-title > h2 {
text-align: center;
margin: 0 auto ;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#menu-slider-section > .container > .anim_bound > .section-title > h2 > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
} */
/* #menu-slider-section > .container > .anim_bound > .section-title > .main {
font-size: 28px;
font-weight: bold;
color: #ff717b;
position: relative;
display: inline-block;
padding-bottom: 15px;
} */
/* #menu-slider-section > .container > .anim_bound > .section-title > .main::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #ff717b;
} */
/* スライダーコンテナ */
.menu-slider-container {
position: relative;
max-width: 1100px;
margin: 0 auto;
z-index: 100 !important;
}
/* スライダートラック */
.menu-slider-track {
overflow: hidden;
}
/* スライダーラッパー */
.menu-slider-wrapper {
display: flex;
gap: 20px;
justify-content: center;
}
/* 各スライド */
.menu-slide {
flex: 0 0 calc(33.333% - 14px);
max-width: calc(33.333% - 14px);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #fff;
}
.menu-slide:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.menu-slide a {
display: block;
text-decoration: none;
}
.menu-slide img {
width: 100%;
height: auto;
display: block;
}
/* ナビボタン（PC非表示） */
.menu-nav-button {
display: none;
}
/* インジケーター（PC非表示） */
.menu-indicators {
display: none;
}
/* 遷移ボタン */
.seni-btn{
display: flex;
justify-content: center;
align-items: center;
}
.seni-btn img{
width:15%;
margin: 0 1rem;
}
/* 保険診療・初診料・自費診療の各目安 */
#price-guide-section {
padding: 60px 0;
}
#price-guide-section .container {
max-width: 1000px;
margin: 0 auto;
border: #ffbec2 3px solid;
border-radius: 5px;
}
#price-guide-section > .container > .price-guide-inner > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#price-guide-section > .container > .price-guide-inner > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
/* 内側ボックス */
.price-guide-inner {
background: #fff;
border-radius: 8px;
padding: 50px 60px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* 料金タイトル */
#price-guide-section .section-title {
text-align: center;
margin-bottom: 35px;
}
#price-guide-section .section-title .sub {
display: block;
font-size: 14px;
color: #666;
font-weight: bold;
margin-bottom: 8px;
}
#price-guide-section .section-title .main {
font-size: 26px;
font-weight: bold;
color: #ff717b;
position: relative;
display: inline-block;
padding-bottom: 15px;
line-height: 28px;
}
#price-guide-section .section-title .main::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #ff717b;
}
/* コンテンツエリア */
.price-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin: 0 auto 35px;
max-width: 750px;
}
/* 左側：説明文 */
.price-description {
flex: 0 0 45%;
}
.price-description p {
font-size: 15px;
line-height: 1.9;
color: #333;
margin: 0;
}
.price-description .highlight {
color: #ff717b;
font-weight: bold;
font-size: 17px;
border-bottom: 2px solid #ff717b;
}
.price-description .note {
font-size: 13px;
color: #888;
margin-top: 10px;
}
/* 右側：診療タイプ別 */
.price-types {
flex: 0 0 50%;
display: flex;
flex-direction: column;
gap: 20px;
}
.price-type-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
/* ラベル */
.type-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 85px;
padding: 6px 14px;
border-radius: 30px;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.type-label.insurance , .type-label.self-pay{
background: #ffebec;
color:#ff717b ;
}
.type-text p {
font-size: 16px;
line-height: 1.8;
color: #333;
margin: 0;
}
/* ボタン */
.price-button-wrap {
text-align: center;
}
.price-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #ff717b;
color: #fff;
font-size: 22px;
font-weight: bold;
padding: 14px 40px;
border-radius: 30px;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
}
.price-button:hover {
background: #ff717b;
transform: translateY(-2px);
}
.price-button .arrow {
font-size: 30px;
line-height: 1;
}
/* symptoms subject 症状から探す
------------------------------------------------------*/
.subject {
width: 100%;
margin: auto;
padding: 50px 10px 0;
}
.subject > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
z-index: 100 !important;
}
.subject > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
.subject .subject__list {
width: 100%;
max-width: 1000px;
margin: auto;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
list-style: none;
}
.subject .subject__list::after {
content: "";
display: block;
width: 24%;
height: 0;
}
.subject .subject__list::before {
content: "";
display: block;
width: 24%;
height: 0;
order: 1;
}
.subject .subject__list li {
-webkit-flex-basis: 24%;
flex-basis: 24%;
max-width: 24%;
margin-bottom: 20px;
background: url("/img/btn_subject_01_off.png") no-repeat center right 12px, #ffffff;
border: 3px solid #ff717b;
border-radius: 3px;
transition: 0.5s;
}
.subject .subject__list li a{
color:#757474;
text-decoration: none;
font-weight: 200;
}
.col3 {
-webkit-flex-basis: 32% !important;
flex-basis: 32% !important;
max-width: 32% !important;
}
.subject .subject__list li a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
padding: 15px 30px 15px 25px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
font-weight: bold;
}
.irregular_teeth {
display: inline-block !important;
text-align: center !important;
}
.subject .subject__list li a span {
width: 100%;
font-size: 16px;
}
.subject .subject__list li:hover {
background: url("/img/btn_subject_01_on.png") no-repeat center right 12px, #ff717b;
}
.subject .subject__list li:hover a {
color: #ffffff;
text-decoration: none;
}
.subject .subject__list .current {
background: url("/img/btn_subject_01_on.png") no-repeat center right 12px, #ff717b;
}
.subject .subject__list li.current a {
color: #ffffff;
text-decoration: none;
}
.subject .subject__list li.outside {
background: url("/img/btn_subject_02_off.png") no-repeat center right 12px, #ffffff;
border: 3px solid #ff717b;
}
.subject .subject__list li.outside:hover {
background: url("/img/btn_subject_02_on.png") no-repeat center right 12px, #ff717b;
}
.subject .subject__bnr {
margin-top: 30px;
text-align: center;
}
.subject .subject__bnr a:hover img {
opacity: 0.7;
transition: 0.5s;
}
.subject .subject__bnr img {
width: 100%;
max-width: 775px;
}
.subject .subject__bnr .pc {
display: inline-block !important;
}
/* feature
-------------------------------------------------------------------------------------------------------------------- */
#feature {
margin-top: 93px;
}
#feature > .container {
max-width: 1740px;
min-width: 1180px;
padding: 0 40px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* きらり大森歯科９つの特徴 該当部分
#feature > .container > .title {
text-align: center;
margin-bottom: 99px;
}
#feature > .container > .title > .deco {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
#feature > .container > .title > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .title > .deco > span:nth-child(1) {
top: -25px;
left: 262px;
}
#feature > .container > .title > .deco > span:nth-child(2) {
bottom: -38px;
left: -60px;
}
#feature > .container > .title > .decoAnima {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
#feature > .container > .title > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .title > .decoAnima > span:nth-child(1) {
top: -26px;
left: 355px;
}
#feature > .container > .title > .decoAnima > span:nth-child(2) {
top: -43px;
left: 367px;
}
#feature > .container > .title > .decoAnima > span:nth-child(3) {
top: -26px;
left: 382px;
} */
#feature > .container > .anim_bound > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 88px;
position: relative;
}
#feature > .container > .anim_bound > .tit > p {
font-size: 1.5rem;
}
#feature > .container > .anim_bound > .tit > .ja {
font-size: 4rem;
line-height: 1;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
}
_:-ms-input-placeholder,
:root #feature > .container > .anim_bound > .tit > .ja {
padding-top: 30px;
}
#feature > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 2.25rem;
color: #000;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
justify-content: center;
margin-top: 7px;
padding-left: 7px;
text-align: center;
}
_:-ms-input-placeholder,
:root #feature > .container > .anim_bound > .tit > .en {
margin-top: -22px;
}
#feature > .container > .anim_bound > .tit > .decoAnima {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
pointer-events: none;
}
#feature > .container > .anim_bound > .tit > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
/* きらきら左３つ */
#feature > .container > .anim_bound > .tit > .decoAnima > span:nth-child(1) {
top: -35px;
left: 390px;
}
#feature > .container > .anim_bound > .tit > .decoAnima > span:nth-child(2) {
top: 2px;
left: 370px;
}
#feature > .container > .anim_bound > .tit > .decoAnima > span:nth-child(3) {
top: -6px;
left: 410px;
}
/* きらきら右３つ */
#feature > .container > .anim_bound > .tit > .decoAnima > span:nth-child(4) {
top: 20px;
right: 410px;
}
#feature > .container > .anim_bound > .tit > .decoAnima > span:nth-child(5) {
top: 4px;
right: 400px;
}
#feature > .container > .anim_bound > .tit > .decoAnima > span:nth-child(6) {
top: 22px;
right: 390px;
}
#feature > .container > .list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
position: relative;
z-index: 1;
}
#feature > .container > .list > li > .decoAnima,
#feature > .container > .list > li > .deco {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
pointer-events: none;
}
#feature > .container > .list > li:nth-child(1),
#feature > .container > .list > li:nth-child(5),
#feature > .container > .list > li:nth-child(9) {
min-height: 394px;
width: 1260px;
margin: 0 auto 58px;
display: flex;
position: relative;
}
#feature > .container > .list > li:nth-child(1)::before,
#feature > .container > .list > li:nth-child(5)::before,
#feature > .container > .list > li:nth-child(9)::before {
position: absolute;
content: '';
width: 922px;
height: 100%;
background-color: #fff;
right: 0;
top: 0;
z-index: -1;
}
#feature > .container > .list > li:nth-child(1) > .pic,
#feature > .container > .list > li:nth-child(5) > .pic,
#feature > .container > .list > li:nth-child(9) > .pic {
width: 50%;
position: relative;
}
#feature > .container > .list > li:nth-child(1) > .pic > .num,
#feature > .container > .list > li:nth-child(5) > .pic > .num,
#feature > .container > .list > li:nth-child(9) > .pic > .num {
position: absolute;
right: 37px;
top: 32px;
font-size: 6.25rem;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1;
z-index: 1;
letter-spacing: 5px;
}
#feature > .container > .list > li:nth-child(1) > .pic > picture,
#feature > .container > .list > li:nth-child(5) > .pic > picture,
#feature > .container > .list > li:nth-child(9) > .pic > picture {
display: block;
position: absolute;
right: 120px;
top: 0;
}
#feature > .container > .list > li:nth-child(1) > .txt,
#feature > .container > .list > li:nth-child(5) > .txt,
#feature > .container > .list > li:nth-child(9) > .txt {
width: 50%;
padding: 68px 79px 60px 0;
}
#feature > .container > .list > li:nth-child(1) > .txt > .tit,
#feature > .container > .list > li:nth-child(5) > .txt > .tit,
#feature > .container > .list > li:nth-child(9) > .txt > .tit {
font-weight: 400;
font-size: 1.5rem;
line-height: 1.5;
letter-spacing: 1.7px;
margin-bottom: 29px;
}
#feature > .container > .list > li:nth-child(1) > .txt > p,
#feature > .container > .list > li:nth-child(5) > .txt > p,
#feature > .container > .list > li:nth-child(9) > .txt > p {
color: #222222;
font-weight: 300;
font-size: 1rem;
line-height: 2;
}
#feature > .container > .list > li:nth-child(2),
#feature > .container > .list > li:nth-child(3),
#feature > .container > .list > li:nth-child(4),
#feature > .container > .list > li:nth-child(6),
#feature > .container > .list > li:nth-child(7),
#feature > .container > .list > li:nth-child(8) {
width: 29.518%;
margin-right: 3.6747%;
margin-bottom: 62px;
display: flex;
flex-direction: column;
position: relative;
}
#feature > .container > .list > li:nth-child(2)::before,
#feature > .container > .list > li:nth-child(3)::before,
#feature > .container > .list > li:nth-child(4)::before,
#feature > .container > .list > li:nth-child(6)::before,
#feature > .container > .list > li:nth-child(7)::before,
#feature > .container > .list > li:nth-child(8)::before {
position: absolute;
content: '';
width: 100%;
height: calc(100% - 132px);
background-color: #fff;
left: 0px;
top: 132px;
z-index: -1;
}
#feature > .container > .list > li:nth-child(2) > .pic,
#feature > .container > .list > li:nth-child(3) > .pic,
#feature > .container > .list > li:nth-child(4) > .pic,
#feature > .container > .list > li:nth-child(6) > .pic,
#feature > .container > .list > li:nth-child(7) > .pic,
#feature > .container > .list > li:nth-child(8) > .pic {
width: 100%;
position: relative;
height: 325px;
}
#feature > .container > .list > li:nth-child(2) > .pic > .num,
#feature > .container > .list > li:nth-child(3) > .pic > .num,
#feature > .container > .list > li:nth-child(4) > .pic > .num,
#feature > .container > .list > li:nth-child(6) > .pic > .num,
#feature > .container > .list > li:nth-child(7) > .pic > .num,
#feature > .container > .list > li:nth-child(8) > .pic > .num {
position: absolute;
right: 37px;
top: 32px;
font-size: 6.25rem;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1;
z-index: 1;
letter-spacing: 5px;
}
#feature > .container > .list > li:nth-child(2) > .pic > picture,
#feature > .container > .list > li:nth-child(3) > .pic > picture,
#feature > .container > .list > li:nth-child(4) > .pic > picture,
#feature > .container > .list > li:nth-child(6) > .pic > picture,
#feature > .container > .list > li:nth-child(7) > .pic > picture,
#feature > .container > .list > li:nth-child(8) > .pic > picture {
display: block;
}
#feature > .container > .list > li:nth-child(2) > .txt,
#feature > .container > .list > li:nth-child(3) > .txt,
#feature > .container > .list > li:nth-child(4) > .txt,
#feature > .container > .list > li:nth-child(6) > .txt,
#feature > .container > .list > li:nth-child(7) > .txt,
#feature > .container > .list > li:nth-child(8) > .txt {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 42px 30px;
margin-top: 38px;
}
#feature > .container > .list > li:nth-child(2) > .txt > .tit,
#feature > .container > .list > li:nth-child(3) > .txt > .tit,
#feature > .container > .list > li:nth-child(4) > .txt > .tit,
#feature > .container > .list > li:nth-child(6) > .txt > .tit,
#feature > .container > .list > li:nth-child(7) > .txt > .tit,
#feature > .container > .list > li:nth-child(8) > .txt > .tit {
font-weight: 400;
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
letter-spacing: 1px;
padding-right: 8px;
margin-bottom: 19px;
}
#feature > .container > .list > li:nth-child(2) > .txt > p,
#feature > .container > .list > li:nth-child(3) > .txt > p,
#feature > .container > .list > li:nth-child(4) > .txt > p,
#feature > .container > .list > li:nth-child(6) > .txt > p,
#feature > .container > .list > li:nth-child(7) > .txt > p,
#feature > .container > .list > li:nth-child(8) > .txt > p {
color: #222222;
font-weight: 300;
font-size: 1rem;
line-height: 1.9375;
padding-right: 6px;
}
#feature > .container > .list > li:nth-child(2),
#feature > .container > .list > li:nth-child(6) {
margin-left: 2.0482%;
}
#feature > .container > .list > li:nth-child(2) > .pic > .num,
#feature > .container > .list > li:nth-child(6) > .pic > .num {
right: auto;
top: auto;
bottom: -2px;
left: -28px;
}
#feature > .container > .list > li:nth-child(6) > .pic > .num {
letter-spacing: 11px;
left: -32px;
}
#feature > .container > .list > li:nth-child(3)::before,
#feature > .container > .list > li:nth-child(7)::before {
top: auto;
bottom: 132px;
}
#feature > .container > .list > li:nth-child(3) > .pic,
#feature > .container > .list > li:nth-child(7) > .pic {
order: 2;
}
#feature > .container > .list > li:nth-child(3) > .pic > .num,
#feature > .container > .list > li:nth-child(7) > .pic > .num {
right: auto;
top: -19px;
left: -28px;
}
#feature > .container > .list > li:nth-child(3) > .txt,
#feature > .container > .list > li:nth-child(7) > .txt {
order: 1;
margin-top: 44px;
margin-bottom: 36px;
}
#feature > .container > .list > li:nth-child(4),
#feature > .container > .list > li:nth-child(8) {
margin-right: 2.0482%;
}
#feature > .container > .list > li:nth-child(4) > .pic > .num,
#feature > .container > .list > li:nth-child(8) > .pic > .num {
right: auto;
top: auto;
bottom: -2px;
left: -31px;
}
#feature > .container > .list > li:nth-child(5) {
margin-bottom: 64px;
}
#feature > .container > .list > li:nth-child(5)::before {
left: 0;
right: auto;
top: 0;
}
#feature > .container > .list > li:nth-child(5) > .pic {
order: 2;
}
#feature > .container > .list > li:nth-child(5) > .pic > .num {
right: auto;
top: 31px;
left: 37px;
}
#feature > .container > .list > li:nth-child(5) > .pic > picture {
left: 120px;
right: auto;
top: 0;
z-index: -1;
}
#feature > .container > .list > li:nth-child(5) > .txt {
order: 1;
padding: 68px 0 68px 79px;
}
#feature > .container > .list > li:nth-child(5) > .txt > p {
line-height: 1.9375;
}
#feature > .container > .list > li:nth-child(9) > .pic > .num {
right: 31px;
top: 34px;
}
#feature > .container > .list > li:nth-child(1) > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(1) > .deco > span:nth-child(1) {
top: -14px;
left: -293px;
}
#feature > .container > .list > li:nth-child(1) > .deco > span:nth-child(2) {
top: 213px;
left: -219px;
}
#feature > .container > .list > li:nth-child(1) > .deco > span:nth-child(3) {
top: 169px;
right: -269px;
}
#feature > .container > .list > li:nth-child(1) > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(1) > .decoAnima > span:nth-child(1) {
top: 10px;
left: 538px;
}
#feature > .container > .list > li:nth-child(1) > .decoAnima > span:nth-child(2) {
top: -14px;
left: 515px;
}
#feature > .container > .list > li:nth-child(1) > .decoAnima > span:nth-child(3) {
top: 47px;
right: -90px;
}
#feature > .container > .list > li:nth-child(1) > .decoAnima > span:nth-child(4) {
top: 85px;
right: -71px;
}
#feature > .container > .list > li:nth-child(1) > .decoAnima > span:nth-child(5) {
top: 77px;
right: -110px;
}
#feature > .container > .list > li:nth-child(2) > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(2) > .decoAnima > span:nth-child(1) {
top: -8px;
left: 245px;
}
#feature > .container > .list > li:nth-child(2) > .decoAnima > span:nth-child(2) {
top: -44px;
left: 263px;
}
#feature > .container > .list > li:nth-child(2) > .decoAnima > span:nth-child(3) {
top: -31px;
left: 223px;
}
#feature > .container > .list > li:nth-child(3) > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(3) > .deco > span:nth-child(1) {
top: -19px;
right: 335px;
}
#feature > .container > .list > li:nth-child(4) > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(4) > .deco > span:nth-child(1) {
bottom: 93px;
right: 112px;
}
#feature > .container > .list > li:nth-child(4) > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(4) > .decoAnima > span:nth-child(1) {
top: 277px;
right: 255px;
}
#feature > .container > .list > li:nth-child(4) > .decoAnima > span:nth-child(2) {
top: 259px;
right: 250px;
}
#feature > .container > .list > li:nth-child(4) > .decoAnima > span:nth-child(3) {
top: 277px;
right: 240px;
}
#feature > .container > .list > li:nth-child(5) > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(5) > .deco > span:nth-child(1) {
top: -12px;
right: -293px;
}
#feature > .container > .list > li:nth-child(5) > .deco > span:nth-child(2) {
top: 214px;
right: -221px;
transform: scaleX(-1);
}
#feature > .container > .list > li:nth-child(5) > .deco > span:nth-child(3) {
top: 167px;
left: -272px;
transform: scaleX(-1);
}
#feature > .container > .list > li:nth-child(5) > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(5) > .decoAnima > span:nth-child(1) {
top: 11px;
left: 545px;
}
#feature > .container > .list > li:nth-child(5) > .decoAnima > span:nth-child(2) {
top: -13px;
left: 566px;
}
#feature > .container > .list > li:nth-child(5) > .decoAnima > span:nth-child(3) {
top: 47px;
left: -90px;
}
#feature > .container > .list > li:nth-child(5) > .decoAnima > span:nth-child(4) {
top: 85px;
left: -71px;
}
#feature > .container > .list > li:nth-child(5) > .decoAnima > span:nth-child(5) {
top: 77px;
left: -110px;
}
#feature > .container > .list > li:nth-child(6) > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(6) > .deco > span:nth-child(1) {
bottom: 98px;
left: 79px;
transform: scaleX(-1);
}
#feature > .container > .list > li:nth-child(6) > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(6) > .decoAnima > span:nth-child(1) {
top: 271px;
left: 222px;
}
#feature > .container > .list > li:nth-child(6) > .decoAnima > span:nth-child(2) {
top: 254px;
left: 218px;
}
#feature > .container > .list > li:nth-child(6) > .decoAnima > span:nth-child(3) {
top: 272px;
left: 207px;
}
#feature > .container > .list > li:nth-child(7) > .deco > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(7) > .deco > span:nth-child(1) {
top: -24px;
left: 302px;
transform: scaleX(-1);
}
#feature > .container > .list > li:nth-child(8) > .decoAnima > span {
position: absolute;
z-index: 9;
}
#feature > .container > .list > li:nth-child(8) > .decoAnima > span:nth-child(1) {
top: -13px;
right: 278px;
}
#feature > .container > .list > li:nth-child(8) > .decoAnima > span:nth-child(2) {
top: -49px;
right: 296px;
}
#feature > .container > .list > li:nth-child(8) > .decoAnima > span:nth-child(3) {
top: -36px;
right: 257px;
}
#feature > .container > .list > li:nth-child(3n + 1) > .pic > .num {
color: #f76a84;
}
#feature > .container > .list > li:nth-child(3n + 2) > .pic > .num {
color: #ffdc00;
}
#feature > .container > .list > li:nth-child(3n) > .pic > .num {
color: #77b5d9;
}
/* pay_menu
-------------------------------------------------------------------------------------------------------------------- */
.pay_menu{
margin: 73px auto;
}
.pay_menu > .container {
max-width: 1200px;
min-width: 800px;
padding: 0 40px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.pay_menu > .container > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
.pay_menu > .container > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
.pay_menu > .container > .section-title {
text-align: center;
margin-bottom: 35px;
}
.pay_menu > .container > .section-title .sub {
display: block;
font-size: 30px;
color: #666;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 8px;
}
.pay_menu > .container > .section-title .main {
font-size: 26px;
font-weight: bold;
color: #ff717b;
position: relative;
display: inline-block;
padding-bottom: 15px;
line-height: 28px;
}
.subject > .container > .section-title .main::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #ff717b;
}
.pay_menu > .container > img {
width: 60%;
display: block;
margin: auto;
}
/* messagge
-------------------------------------------------------------------------------------------------------------------- */
#message {
margin-top: 113px;
}
#message > .container {
width: 1100px;
margin: 0 auto;
position: relative;
z-index: 1;
}
#message > .container > .tit > p {
font-size: 1.5rem;
}
#message > .container > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 88px;
position: relative;
}
#message > .container > .tit > .ja {
font-size: 4rem;
line-height: 1;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
}
_:-ms-input-placeholder,
:root #message > .container > .tit > .ja {
padding-top: 30px;
}
#message > .container > .tit > .en {
letter-spacing: 3px;
font-size: 2.25rem;
color: #000;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
justify-content: center;
margin-top: 7px;
padding-left: 7px;
}
_:-ms-input-placeholder,
:root #message > .container > .tit > .en {
margin-top: -22px;
}
#message > .container > .tit > .decoAnima {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
pointer-events: none;
}
#message > .container > .tit > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
#message > .container > .tit > .decoAnima > span:nth-child(1) {
top: -35px;
left: 173px;
}
#message > .container > .tit > .decoAnima > span:nth-child(2) {
top: 2px;
left: 157px;
}
#message > .container > .tit > .decoAnima > span:nth-child(3) {
top: -6px;
left: 200px;
}
#message > .container > .tit > .decoAnima > span:nth-child(4) {
top: 55px;
right: 196px;
}
#message > .container > .tit > .decoAnima > span:nth-child(5) {
top: 39px;
right: 192px;
}
#message > .container > .tit > .decoAnima > span:nth-child(6) {
top: 57px;
right: 182px;
}
#message > .container > .content {
display: flex;
justify-content: space-between;
}
#message > .container > .content > .txt {
width: 885px;
padding-bottom: 100px;
}
#message > .container > .content > .txt > p {
font-weight: 300;
line-height: 2;
font-size: 1rem;
color: #222;
}
#message > .container > .content > .txt > p > span.name {
display: block;
text-align: right;
font-size: 1.1875rem;
}
#message > .container > .content > .pic {
width: calc(100% - 699px);
position: relative;
}
#message > .container > .content > .pic > picture {
bottom: 0;
left: 80px;
z-index: -1;
display: block;
position: absolute;
}
/* map クリニック概要
-------------------------------------------------------------------------------------------------------------------- */
#map {
padding-top: 0;
margin-top: 0;
}
#map > .container {
width: 1100px;
margin: 0px auto 40px;
position: relative;
z-index: 1;
}
#map > .container > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#map > .container > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
#map .section-title {
text-align: center;
margin-bottom: 35px;
}
#map .section-title .sub {
display: block;
font-size: 14px;
color: #666;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 8px;
}
#map .section-title .main {
font-size: 26px;
font-weight: bold;
color: #ff717b;
position: relative;
display: inline-block;
padding-bottom: 15px;
line-height: 28px;
}
#map .section-title .main::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #ff717b;
}
#map .map iframe{
width:90% ;
max-width: 750px;
height: 200px;
}
.table01 {
width: 70%;
max-width: 800px;
border-collapse: collapse;
background: #fff;
margin: auto;
}
.table01 th,
.table01 td {
padding: 18px 25px;
border: 1px solid #f5c4c4;
text-align: left;
vertical-align: middle;
}
.table01 th {
background-color: #f8a5a5;
color: #fff;
font-weight: bold;
width: 130px;
text-align: center;
white-space: nowrap;
}
.table01 td {
background-color: #fff;
}
#map > .container p{
color: #666;
}
#message_info {
text-align: center;
}
#message_info .txtleft p {
text-align: left;
}
/* topic
----------------------------------------------------------------------------- */
#topic {
position: relative;
width: calc(100% - 100px);
margin: 0 auto 80px;
z-index: 2;
}
#topic .container {
padding: 71px 5.235% 6.335%;
position: relative;
background-color: #fff;
border-radius: 40px;
}
#topic .container > .tit {
width: 898px;
font-size: 2.75rem;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
position: relative;
margin: 30px auto 127px;
color: #000;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0;
}
#topic .container > .tit > .en {
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
color: #f76a84;
font-size: 1.125rem;
position: relative;
display: flex;
margin-top: 13px;
margin-left: 0;
letter-spacing: 3.3px;
width: 302px;
justify-content: center;
padding: 3px 0;
}
/* #topic .container > .tit > .en::before,
#topic .container > .tit > .en::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #f76a84;
top: 0px;
left: 0;
}
#topic .container > .tit > .en::after {
top: auto;
bottom: 0px;
}
#topic .container > .tit > .deco {
display: block;
}
#topic .container > .tit > .deco > span {
position: absolute;
z-index: 8;
pointer-events: none;
display: block;
}
#topic .container > .tit > .deco > span:nth-child(1) {
top: 37px;
right: -139px;
}
#topic .container > .tit > .deco > span:nth-child(2) {
top: 17px;
right: 53px;
}
#topic .container > .tit > .deco > span:nth-child(3) {
top: 22px;
left: 100px;
}
#topic .container > .tit > .deco > span:nth-child(4) {
top: -37px;
right: 198px;
transform: scaleX(-1);
}
#topic .container > .tit > .decoAnima {
display: block;
}
#topic .container > .tit > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
#topic .container > .tit > .decoAnima > span:nth-child(1) {
top: -5px;
left: -50px;
}
#topic .container > .tit > .decoAnima > span:nth-child(2) {
top: 33px;
left: -30px;
}
#topic .container > .tit > .decoAnima > span:nth-child(3) {
top: 25px;
left: -71px;
}
#topic .container > .tit > .decoAnima > span:nth-child(4) {
top: -1px;
left: 242px;
}
#topic .container > .tit > .decoAnima > span:nth-child(5) {
top: 13px;
left: 267px;
}
#topic .container > .tit > .decoAnima > span:nth-child(6) {
top: 25px;
left: 253px;
} */
#topic > .container > .anim_bound > .tit > p {
font-size: 1.5rem;
}
#topic > .container > .anim_bound > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 88px;
position: relative;
}
#topic > .container > .anim_bound > .tit > .ja {
font-size: 4rem;
line-height: 1;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
}
_:-ms-input-placeholder,
:root #topic > .container > .anim_bound > .tit > .ja {
padding-top: 30px;
}
#topic > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 2.25rem;
color: #000;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
justify-content: center;
margin-top: 7px;
padding-left: 7px;
text-align: center;
}
_:-ms-input-placeholder,
:root #topic > .container > .anim_bound > .tit > .en {
margin-top: -22px;
}
#topic > .container > .anim_bound > .tit > .decoAnima {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
pointer-events: none;
}
#topic > .container > .anim_bound > .tit > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
/* きらきら左３つ */
#topic > .container > .anim_bound > .tit > .decoAnima > span:nth-child(1) {
top: -35px;
left: 390px;
}
#topic > .container > .anim_bound > .tit > .decoAnima > span:nth-child(2) {
top: 2px;
left: 370px;
}
#topic > .container > .anim_bound > .tit > .decoAnima > span:nth-child(3) {
top: -6px;
left: 410px;
}
/* きらきら右３つ */
#topic > .container > .anim_bound > .tit > .decoAnima > span:nth-child(4) {
top: 20px;
right: 410px;
}
#topic > .container > .anim_bound > .tit > .decoAnima > span:nth-child(5) {
top: 4px;
right: 400px;
}
#topic > .container > .anim_bound > .tit > .decoAnima > span:nth-child(6) {
top: 22px;
right: 390px;
}
#topic .container > .boxIn {
position: relative;
max-width: 1422px;
margin: 0 auto;
}
#topic .container > .boxIn > .indicator {
position: absolute;
top: -4px;
bottom: 0;
left: 11px;
width: 25px;
}
#topic .container > .boxIn > .indicator > ul > li {
position: relative;
}
#topic .container > .boxIn > .indicator > ul > li > a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #ccc;
color: #000;
text-decoration: none;
transition: 0.3s;
transition-property: background-color, color;
}
#topic .container > .boxIn > .indicator > ul > li > a.current {
background-color: #f76a84;
color: #fff;
}
#topic .container > .boxIn > .indicator > ul > li > .line {
display: block;
width: 2px;
height: 64px;
margin: -1px auto;
background: linear-gradient(to bottom, #a5a5a5 50%, #dddddd 50%) 0% 100% no-repeat;
background-size: 100% 200%;
}
#topic .container > .boxIn > .indicator > ul > li > .numb {
position: absolute;
white-space: nowrap;
top: -2px;
left: 40px;
font-size: 0.8125rem;
color: #000000;
font-weight: 400;
transition: 0.3s;
}
_:-ms-input-placeholder,
:root #topic .container > .boxIn > .indicator > ul > li > .numb {
top: -2px;
}
#topic .container > .boxIn > .indicator > ul > li > .numb.current {
color: #f76a84;
}
#topic .container > .boxIn > .indicator > ul > li:last-child > .line {
display: none;
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(2) > a.current {
background-color: #ffdc00;
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(2) > .numb.current {
color: #ffdc00;
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(3) > a.current {
background-color: #77b5d9;
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(3) > .numb.current {
color: #77b5d9;
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(4) > a.current {
background-color: #f76a84;
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(4) > .numb.current {
color: #f76a84;
}
#topic .container > .boxIn > .list > .listTopic {
list-style-type: none;
margin: 30px 0;
margin-left: 211px;
}
#topic .container > .boxIn > .list > .listTopic > li {
display: flex;
align-items: flex-start;
position: relative;
margin-bottom: 140px;
}
#topic .container > .boxIn > .list > .listTopic > li:last-child {
margin-bottom: 0px;
}
#topic .container > .boxIn > .list > .listTopic > li > .text {
width: 615px;
padding: 18px 53px 0px 21px;
}
#topic .container > .boxIn > .list > .listTopic > li > .text > .tit {
font-weight: 400;
font-size: 1.6875rem;
line-height: 1.5;
margin-bottom: 28px;
}
#topic .container > .boxIn > .list > .listTopic > li > .text p a {
text-decoration: none;
}
#topic .container > .boxIn > .list > .listTopic > li > .text p a:hover {
text-decoration: underline;
}
#topic .container > .boxIn > .list > .listTopic > li > .pic {
position: relative;
padding-left: 38px;
padding-top: 32px;
}
#topic .container > .boxIn > .list > .listTopic > li > .pic > .num {
font-size: 10.625rem;
color: #ececec;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1;
position: absolute;
left: -39px;
top: -57px;
font-weight: 400;
display: flex;
align-items: center;
letter-spacing: 4px;
}
#topic .container > .boxIn > .list > .listTopic > li > .pic > .num > span {
color: #f76a84;
font-size: 3.875rem;
font-weight: 500;
display: flex;
margin-left: 25px;
margin-top: 18px;
}
#topic .container > .boxIn > .ui_list_pic {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 596px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img {
margin-top: 0;
margin-bottom: 30px;
list-style-type: none;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li {
position: absolute;
width: 100%;
visibility: hidden;
opacity: 0;
transition: visibility 0.6s cubic-bezier(0.52, 0.08, 0.18, 1), opacity 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li.current {
visibility: visible;
opacity: 1;
transition: visibility 0.8s cubic-bezier(0.52, 0.08, 0.18, 1), opacity 0.8s cubic-bezier(0.52, 0.08, 0.18, 1);
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li.current > .pic {
visibility: visible;
opacity: 1;
transform: scale(1);
transition: visibility 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s, opacity 0.3s cubic-bezier(0.37, 0.16, 0.12, 1) 0.4s, transform 0.8s cubic-bezier(0.16, 1.39, 0.55, 1) 0.4s;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic {
position: relative;
width: calc(100% - 615px);
padding-left: 38px;
padding-top: 32px;
visibility: hidden;
opacity: 0;
transform: scale(0.9);
transition: visibility 0.6s cubic-bezier(0.52, 0.08, 0.18, 1), opacity 0.6s cubic-bezier(0.52, 0.08, 0.18, 1), transform 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic > .num {
font-size: 10.625rem;
color: #ececec;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1;
position: absolute;
left: -39px;
top: -57px;
font-weight: 400;
display: flex;
align-items: center;
letter-spacing: 4px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic > .num > span {
color: #f76a84;
font-size: 3.875rem;
font-weight: 500;
display: flex;
margin-left: 25px;
margin-top: 18px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li:nth-child(2) > .pic > .num > span {
color: #ffdc00;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li:nth-child(3) > .pic > .num > span {
color: #77b5d9;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li:nth-child(4) > .pic > .num > span {
color: #f76a84;
}
/* menu
-------------------------------------------------------------------------------------------------------------------- */
#menu > .container {
width: 1100px;
margin: 100px auto 0;
position: relative;
display: flex;
justify-content: space-between;
}
#menu > .container > .title {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 124px;
margin-left: -57px;
position: relative;
}
#menu > .container > .title > p {
font-size: 1.5rem;
}
#menu > .container > .title > .en {
font-size: 2.25rem;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1.5;
margin-top: 1px;
}
_:-ms-input-placeholder,
:root #menu > .container > .title > .en {
margin-top: -24px;
}
#menu > .container > .title > .ja {
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 4rem;
display: flex;
line-height: 1.5;
}
_:-ms-input-placeholder,
:root #menu > .container > .title > .ja {
padding-top: 20px;
}
#menu > .container > .title > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
#menu > .container > .title > .decoAnima > span:nth-child(1) {
top: -19px;
left: -71px;
}
#menu > .container > .title > .decoAnima > span:nth-child(2) {
top: 19px;
left: -87px;
}
#menu > .container > .title > .decoAnima > span:nth-child(3) {
top: 11px;
left: -43px;
}
#menu > .container > .title > .decoAnima > span:nth-child(4) {
top: 72px;
right: -35px;
}
#menu > .container > .title > .decoAnima > span:nth-child(5) {
top: 55px;
right: -40px;
}
#menu > .container > .title > .decoAnima > span:nth-child(6) {
top: 72px;
right: -51px;
}
#menu > .container > .list {
width: 656px;
display: flex;
flex-wrap: wrap;
}
#menu > .container > .list > li {
width: 140px;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 30px;
margin-bottom: 42px;
}
_:-ms-input-placeholder,
:root #menu > .container > .list > li {
margin-bottom: 30px;
}
#menu > .container > .list > li:nth-child(4),
#menu > .container > .list > li:nth-child(8) {
margin-right: 0px;
}
#menu > .container > .list > li:nth-child(4) > figure {
margin-left: 6px;
}
#menu > .container > .list > li > a {
text-decoration: none;
color: #000;
text-align: center;
}
#menu > .container > .list > li > a > figure {
text-align: center;
width: 115px;
height: 115px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 7px;
position: relative;
z-index: 1;
}
#menu > .container > .list > li > a > figure::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
top: 0;
left: 0;
z-index: -1;
transition: 0.3s;
}
#menu > .container > .list > li > a > figure > picture {
transition: 0.3s;
}
#menu > .container > .list > li > a > figure > .on {
position: absolute;
display: flex;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#menu > .container > .list > li > a:hover > figure::before {
transform: scale(1.2);
background-color: #f76a84;
}
#menu > .container > .list > li > a:hover > figure > picture:nth-child(1) {
opacity: 0;
}
#menu > .container > .list > li > a:hover > figure > .on {
opacity: 1;
}
#menu > .container > .list > li > a:hover > h4 {
color: #f76a84;
}
#menu > .container > .list > li > a > h4 {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.33333;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: 0.3s;
}
_:-ms-input-placeholder,
:root #menu > .container > .list > li > a > h4 {
margin-top: 15px;
}
/* Setsubi
-------------------------------------------------------------------------------------------------------------------- */
#Setsubi {
position: relative;
z-index: 2;
}
#Setsubi .container {
position: relative;
margin: auto;
}
#Setsubi .container > .tit {
width: 898px;
font-size: 2.75rem;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
position: relative;
margin: 0 auto 127px;
color: #000;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0;
}
#Setsubi .container > .tit > .en {
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
color: #f76a84;
font-size: 1.125rem;
position: relative;
display: flex;
margin-top: 13px;
margin-left: 0;
letter-spacing: 3.3px;
width: 302px;
justify-content: center;
padding: 3px 0;
}
#Setsubi > .container > .anim_bound > .tit > p {
font-size: 1.5rem;
}
#Setsubi > .container > .anim_bound > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
position: relative;
}
#Setsubi > .container > .anim_bound > .tit > .ja {
font-size: 4rem;
line-height: 1;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
}
_:-ms-input-placeholder,
:root #Setsubi > .container > .anim_bound > .tit > .ja {
padding-top: 30px;
}
#Setsubi > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 2.25rem;
color: #000;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
justify-content: center;
margin-top: 7px;
padding-left: 7px;
text-align: center;
}
_:-ms-input-placeholder,
:root #Setsubi > .container > .anim_bound > .tit > .en {
margin-top: -22px;
}
#Setsubi > .container > .anim_bound > .tit > .decoAnima {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
pointer-events: none;
}
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
/* きらきら左３つ */
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span:nth-child(1) {
top: -35px;
left: 390px;
}
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span:nth-child(2) {
top: 2px;
left: 370px;
}
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span:nth-child(3) {
top: -6px;
left: 410px;
}
/* きらきら右３つ */
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span:nth-child(4) {
top: 20px;
right: 410px;
}
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span:nth-child(5) {
top: 4px;
right: 400px;
}
#Setsubi > .container > .anim_bound > .tit > .decoAnima > span:nth-child(6) {
top: 22px;
right: 390px;
}
.facility-slider-container {
position: relative;
width: 100%;
overflow: visible;
margin: auto;
}
.facility-slider-track {
overflow: hidden;
padding: 10px 0;
}
.facility-slider-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}
.facility-slide {
flex: 0 0 450px;
padding: 0 5px;
opacity: 0.5;
transform: scale(0.95);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.facility-slide.active {
opacity: 1;
transform: scale(1);
}
.facility-slide-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(50, 50, 50, 0.05);
height: 100%;
}
.facility-slide-image {
width: 100%;
height: 280px;
object-fit: cover;
background-color: #f0f0f0;
}
.facility-slide-content {
padding: 20px;
font-size: 14px;
line-height: 1.8;
color: #333;
}
.facility-nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff717b ;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(240, 107, 126, 0.4);
transition: all 0.3s ease;
z-index: 10;
}
.facility-nav-button:hover {
background-color: #ff717b;
transform: translateY(-50%) scale(1.1);
}
.facility-nav-button.prev {
left: 90px;
top: 190px;
}
.facility-nav-button.next {
right: 90px;
top: 190px;
}
.facility-nav-button svg {
width: 40px !important;
height: 40px !important;
fill: white;
}
.facility-indicators {
display: flex;
justify-content: center;
gap: 12px;
padding: 15px 0;
}
.facility-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #D9D9D9;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.facility-indicator:hover {
background-color: #bbb;
}
.facility-indicator.active {
background-color: #ff717b;
transform: scale(1.2);
}
/* flow
-------------------------------------------------------------------------------------------------------------------- */
#flow {
position: relative;
z-index: 2;
}
#flow .container {
position: relative;
}
#flow .container > .anim_bound > .tit {
width: 898px;
font-size: 2.75rem;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.5;
position: relative;
margin: 70px auto 50px;
color: #000;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0;
}
#flow .container > .tit > .en {
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
color: #f76a84;
font-size: 1.125rem;
position: relative;
display: flex;
margin-top: 13px;
margin-left: 0;
letter-spacing: 3.3px;
width: 302px;
justify-content: center;
padding: 3px 0;
}
#flow > .container > .anim_bound > .tit > p {
font-size: 1.5rem;
}
#flow > .container > .anim_bound > .tit > .ja {
font-size: 4rem;
line-height: 1;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
}
_:-ms-input-placeholder,
:root #flow > .container > .anim_bound > .tit > .ja {
padding-top: 30px;
}
#flow > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 2.25rem;
color: #000;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
justify-content: center;
margin-top: 7px;
padding-left: 7px;
text-align: center;
}
_:-ms-input-placeholder,
:root #flow > .container > .anim_bound > .tit > .en {
margin-top: -22px;
}
#flow > .container > .anim_bound > .tit > .decoAnima {
width: 1100px;
height: 100%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
pointer-events: none;
}
#flow > .container > .anim_bound > .tit > .decoAnima > span {
position: absolute;
pointer-events: none;
z-index: 9;
}
/* きらきら左３つ */
#flow > .container > .anim_bound > .tit > .decoAnima > span:nth-child(1) {
top: -35px;
left: 390px;
}
#flow > .container > .anim_bound > .tit > .decoAnima > span:nth-child(2) {
top: 2px;
left: 370px;
}
#flow > .container > .anim_bound > .tit > .decoAnima > span:nth-child(3) {
top: -6px;
left: 410px;
}
#flow > .container > .anim_bound > .flow__list {
display: flex;
justify-content: space-between;
align-items: flex-start; /* 上揃えに固定 */
list-style: none;
width: 100%;
max-width: 1000px;
margin: 0 auto 20px;
padding: 0;
}
/* 各項目（li）の設定 */
#flow > .container > .anim_bound > .flow__list > li {
flex-basis: 17.5%; /* 17%から少し広げて余白を調整 */
max-width: 17.5%;
position: relative;
box-sizing: border-box;
}
/* 画像エリアの設定 */
#flow > .container > .anim_bound > .flow__list > li > .flow__list--img {
position: relative;
width: 100%;
/* max-width: 176px; を削除するか、liの幅に合わせる */
margin: 0 auto 15px;
}
/* 数字のピンク枠（前回のFlexbox中央揃えを適用） */
#flow > .container > .anim_bound > .flow__list > li > .flow__list--img > span {
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: #f76a84;
z-index: 1;
}
/* フロー矢印（PC）- CSSボーダーで三角を作成 */
@media screen and (min-width: 768px) {
#flow > .container > .anim_bound > .flow__list > li:not(:last-child)::after {
content: "";
display: block;
position: absolute;
top: 70px;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 14px;
border-color: transparent transparent transparent #ffaab1;
z-index: 2;
}
}
/* 数字画像自体のサイズ微調整 */
#flow > .container > .anim_bound > .flow__list > li > .flow__list--img > span > img {
width: 30% !important; /* 枠に対しての数字の大きさ */
height: auto;
}
#flow > .container > .anim_bound > .flow__list > li:first-child > .flow__list--img > span > img {
width: 20% !important;
}
/* 追記 */
#flow > .container > .anim_bound > .flow__list > li .flow__list--img img {
width: 100%;
height: auto;
display: block;
}
/* メイン画像追記 */
#flow > .container > .anim_bound > .flow__list > li .flow__list--img img:not(span img) {
width: 100%;
height: auto;
display: block;
}
/* テキスト類の中央揃え */
#flow > .container > .anim_bound > .flow__list > li > .flow__list--title {
font-size: 18px;
font-weight: bold;
text-align: center;
color: #444444;
margin-bottom: 10px;
}
#flow > .container > .anim_bound > .flow__list > li > .flow__list--text {
font-size: 14px;
text-align: left;
line-height: 1.6;
color: #444444;
}
/* first 初めての方へ
-------------------------------------------------------------------------------------------------------------------- */
#first {
margin-top: 70px;
}
#first > .container {
width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
#first > .container > .anim_bound > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#first > .container > .anim_bound > h2 > p > span {
text-align: center;
margin: 0 auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
@media (min-width: 750px) {
.first-flex{
display: flex;
justify-content: space-between;
}
.first-flex p{
width: 65%;
}
.first-flex img{
width: 30%;
}
}
/* ボタン */
.first-button-wrap {
text-align: center;
margin: 20px auto 0;
}
.first-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #ff717b;
color: #fff;
font-size: 28px;
font-weight: bold;
padding: 14px 40px;
border-radius: 30px;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
}
.first-button:hover {
background: #ff717b;
transform: translateY(-2px);
}
.first-button .arrow {
font-size: 30px;
line-height: 1;
}
/* 質問
--------------------------------------- */
#qa > .faq-section{
margin: 90px auto 60px;
}
#qa > .faq-section > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#qa > .faq-section > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
#qa .faq-question {
width: 100%;
padding: 20px !important;
background: #fff !important;
border: none !important;
outline: none !important;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
font-weight: 600;
color: #666 !important;
transition: background-color 0.3s ease;
box-shadow: none !important;
}
#qa .faq-item{
max-width: 700px;
margin: 0 auto 15px;
}
/* テーマ特有の “focusで青枠” を無効化 */
#qa .faq-question:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
#qa .faq-question:hover {
background-color: #f8f8f8;
}
/* Qアイコン */
#qa .faq-item .faq-question {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 45px;
padding-left: 75px !important;
padding-right: 20px !important;
font-size: 30px;
background: url("/img/icon_qa_q.png") no-repeat left 20px center !important;
background-size: 40px auto !important;
height: 90px;
}
#qa .faq-item .faq-question dt {
flex: 1;
display: flex;
align-items: center;
}
#qa .faq-item .faq-question dt span {
margin-left: 0;
font-size: 0.667em;
/* display: block; */
}
#qa .faq-item .faq-icon {
font-size: 30px;
color: #666;
transition: transform 0.3s ease;
flex-shrink: 0 !important;
margin-left: 15px !important;
}
#qa .faq-item.active .faq-icon {
transform: rotate(180deg);
}
/* 回答 */
#qa .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 20px;
background: #fafafa !important;
}
#qa .faq-item.active .faq-answer {
max-height: 500px;
padding: 20px;
}
/* Aアイコン */
#qa .faq-answer dd {
min-height: 41px;
padding-left: 50px !important;
margin: 0 30px 0px;
background: url("/img/icon_qa_a.png") no-repeat left top !important;
background-size: 36px auto !important;
}
#qa .faq-answer p {
margin: 0;
color: #666 !important;
line-height: 1.6;
}
#qa .faq-answer {
font-size: 17ssspx;
}
/* ➕→➖に */
.faq-answer { display: none; }
.faq-item.active .faq-answer { display: block; }
/* ========= SP調整 ========= */
@media screen and (max-width:640px) {
#qa .faq-section {
padding: 0px 15px;
}
/* #qa .faq-question {
padding: 18px !important;
} */
#qa .faq-question dt {
font-size: 15px !important;
padding-left: 0 !important;
}
#qa .faq-answer dd {
padding-left: 40px !important;
margin: 0 15px;
}
}
/* FAQ質問文の下線を削除 */
#qa .faq-question,
#qa .faq-question dt,
#qa .faq-question dt span {
text-decoration: none !important;
}
/* FAQ質問文の下線を削除 */
#qa .faq-question,
#qa .faq-question dt,
#qa .faq-question dt span {
text-decoration: none !important;
}
/* FAQアイコンの重複記号を完全に無効化 */
#qa .faq-icon::before,
#qa .faq-icon::after,
#qa .faq-question::before,
#qa .faq-question::after {
content: none !important;
background: none !important;
display: none !important;
}
/* FAQのアイコンで「－」を出している疑似要素を消す（暫定） */
.faq-question::before,
.faq-question::after,
.faq-icon::before,
.faq-icon::after {
content: none !important;
display: none !important;
}
/* ===== Bootstrapのアコーディオン矢印を完全無効化 ===== */
/* ボタンに自動生成される矢印（これが残ってる「ー」の正体） */
#qa .faq-question::after {
content: none !important;
background: none !important;
border: none !important;
display: none !important;
}
/* Bootstrap / Theme が使う可能性のあるパターンをまとめて潰す */
#qa .faq-question:not(.collapsed)::after,
#qa .faq-question.collapsed::after,
#qa .faq-item .faq-question::after,
#qa button.faq-question::after {
content: none !important;
background: none !important;
border: none !important;
display: none !important;
}
/* さらに、before も保険で無効化 */
#qa .faq-question::before {
content: none !important;
display: none !important;
}
/* よくある質問２ */
.faq-section {
padding: 0px 20px;
}
.faq-section .section-title {
text-align: center;
margin-bottom: 40px;
}
.faq-section .section-title .sub {
font-size: 16px;
color: #666;
font-weight: bold;
font-size: 1.2rem;
display: block;
margin-bottom: 8px;
}
.faq-section .section-title .main {
font-size: 32px;
color: #ff717b;
font-weight: bold;
}
.faq-section .section-title .main::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: #ff717b;
margin: 15px auto 0;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.faq-question {
display: flex;
align-items: center;
padding: 20px 25px;
cursor: pointer;
position: relative;
}
.faq-question .icon-q {
width: 36px;
height: 36px;
background-color: #ff717b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 18px;
flex-shrink: 0;
margin-right: 15px;
}
.faq-question .question-text {
flex: 1;
font-size: 16px;
color: #333;
font-weight: 500;
line-height: 1.6;
}
.faq-question .toggle-icon {
width: 20px;
height: 20px;
position: relative;
flex-shrink: 0;
margin-left: 15px;
}
.faq-question .toggle-icon::before,
.faq-question .toggle-icon::after {
content: '';
position: absolute;
background-color: #999;
transition: transform 0.3s ease;
}
.faq-question .toggle-icon::before {
width: 20px;
height: 2px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-question .toggle-icon::after {
width: 2px;
height: 20px;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.faq-item.active .faq-question .toggle-icon::after {
transform: translateX(-50%) rotate(90deg);
opacity: 0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
}
.faq-answer-inner {
display: flex;
padding: 0 25px 25px;
align-items: flex-start;
}
.faq-answer .icon-a {
width: 30px;
height: 30px;
border: 2px solid #ff717b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ff717b;
font-weight: bold;
font-size: 14px;
flex-shrink: 0;
margin-right: 15px;
margin-top: 2px;
}
.faq-answer .answer-text {
flex: 1;
font-size: 15px;
color: #555;
line-height: 1.8;
}
/* 権威性 拠点数・歯科医師数のレイアウト authority */
#authority {
padding-top: 10px;
}
#authority > .container{
margin-bottom: 40px;
}
#authority > h2 > p {
text-align: center;
margin: 0 auto 30px;
font-size: 1.2rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
color: #666;
}
#authority > h2 > p > span {
text-align: center;
margin:auto;
font-size: 2.0rem;
color: #ff717b ;
line-height: 1.2;
padding-top: 10px;
}
.section-achievement {
padding: 80px 20px;
}
.section-achievement .container {
max-width: 1100px;
margin: 0 auto 40px;
}
/* コンテンツエリア */
.achievement-content {
display: flex;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: auto;
}
.achievement-left {
flex: 3;
}
.achievement-right {
flex: 2;
display: flex;
}
.achievement-right img {
max-width: 100%;
height: auto;
margin: auto;
}
/* 小見出し */
.achievement-heading {
font-family: 'Noto Serif JP', serif;
font-size: 28px;
font-weight: 700;
color: #474747;
border-bottom: 4px solid #f08080;
width: 240px;
margin-bottom: 20px;
}
/* 説明文 */
.achievement-text {
font-size: 16px;
line-height: 2;
margin-bottom: 30px;
}
/* 総来院数 */
.achievement-stats {
margin-bottom: 40px;
max-width: 400px;
margin: 30px auto 0;
padding: 0 20px;
text-align: center;
}
.stats-label {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
text-align: left;
color:#474747;
}
.stats-number {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
.stats-number .prefix {
font-size: 18px;
font-weight: 500;
}
.stats-number .num {
/* font-family: 'Noto Serif JP', serif; */
font-size: 40px;
font-weight: 700;
color: #f08080;
line-height: 1;
}
.stats-number .unit {
font-size: 28px;
font-weight: 700;
color: #f08080;
}
.stats-number .suffix {
font-size: 18px;
font-weight: 500;
color:#474747;
}
.stats-note {
font-size: 14px;
color: #666;
margin-top: 10px;
text-align: right;
}
#authority > .container .achievement-info{
max-width: 700px;
gap: 30px;
margin: 30px auto 40px;
display: flex;
justify-content: space-between;
/* align-items: center; */
}
.info-item {
display: flex;
align-items: center;
gap: 15px;
}
.info-icon {
width: 118px;
height: 118px;
flex-shrink: 0;
}
.info-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.info-detail .info-label {
font-size: 14px;
font-weight: 500;
}
.info-detail .info-num {
/* font-family: 'Noto Serif JP', serif; */
font-size: 36px;
font-weight: 700;
color: #f08080;
line-height: 1.2;
}
.info-detail .info-num span {
font-size: 36px;
}
.info-detail .info-note {
font-size: 12px;
color: #666;
}
/* 法人実績 -----------------------------------------*/
#authority > .container
.statistics-accordion {
max-width: 800px;
margin: 0 auto 15px;
}
.statistics-card {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
background: #fff;
}
/* ボタン */
.statistics-button {
width: 100%;
text-align: center;
color: white;
font-size: 28px;
font-weight: bold;
letter-spacing: 2px;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
background: #f08080;
border: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
.statistics-button:hover {
opacity: 0.85;
}
/* トグルアイコン - 閉じている時: ＋ */
.statistics-button .toggle-icon::before {
content: '＋';
font-size: 32px;
}
/* 開いている時: － */
.statistics-button.is-open .toggle-icon::before {
content: '－';
}
/* コンテンツ - 初期は閉じている */
.statistics-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
/* 開いている時 */
.statistics-card.is-open .statistics-content {
max-height: 2000px;
}
/* テーブル */
.statistics-table {
width: 100%;
}
/* 各行 */
.statistics-row {
display: grid;
grid-template-columns: 200px 150px 1fr;
align-items: center;
padding: 25px 40px;
border-bottom: 1px solid rgba(255, 113, 123, 0.2);
gap: 40px;
font-size: 30px;
color: #333;
}
.statistics-row:last-child {
border-bottom: none;
}
.treatment-name {
font-size: 30px;
font-weight: 600;
}
.stat-label {
font-size: 30px;
font-weight: 500;
}
.stat-value {
color: #f08080;
font-size: 28px;
font-weight: bold;
letter-spacing: 2px;
}
/* info
-------------------------------------------------------------------------------------------------------------------- */
#info {
margin-top: 121px;
}
#info > .container {
width: 1100px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-bottom: 52px;
}
#info > .container > .main {
width: 720px;
}
#info > .container > .main > .box {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
background-color: #fff;
border-radius: 10px;
padding: 21px 35px 30px;
}
#info > .container > .main > .box > p:first-child {
font-weight: bold;
}
#info > .container > .main > .box > .tit {
display: flex;
line-height: 1.5;
padding-bottom: 16px;
margin-bottom: 32px;
border-bottom: 1px solid #bbdaec;
}
#info > .container > .main > .box > .tit > .ja {
font-size: 1.875rem;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
}
_:-ms-input-placeholder,
:root #info > .container > .main > .box > .tit > .ja {
margin-top: 18px;
line-height: 1;
display: flex;
}
#info > .container > .main > .box > .tit > .en {
font-size: 0.9375rem;
color: #77b5d9;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
margin-top: 13px;
margin-left: 22px;
letter-spacing: 2px;
}
#info > .container > .main > .box > .feed {
flex: 0 0 auto;
width: 100%;
padding-right: 52px;
max-height: 229px;
overflow-y: scroll;
}
_:-ms-input-placeholder,
:root #info > .container > .main > .box > .feed {
height: 229px;
}
#info > .container > .main > .box > .feed dl {
padding-left: 0;
display: flex;
flex-wrap: wrap;
}
#info > .container > .main > .box > .feed dl dt {
width: 170px;
padding: 0 10px 21px 15px;
font-weight: 300;
color: #222;
}
#info > .container > .main > .box > .feed dl dd {
width: calc(100% - 170px);
letter-spacing: 0.1px;
padding: 0 11px 16px 30px;
font-weight: 300;
line-height: 1.9375;
}
#info > .container > .main > .box > .feed dl dd a {
color: #000;
text-decoration: none;
}
#info > .container > .main > .box > .feed dl dd a:hover {
text-decoration: underline;
}
#info > .container > .main > .box > .feed .os-scrollbar {
padding: 0;
}
#info > .container > .main > .box > .feed .os-scrollbar-vertical {
width: 8px;
right: 5px;
top: 6px;
bottom: 6px;
}
#info > .container > .main > .box > .feed .os-scrollbar-track,
#info > .container > .main > .box > .feed .os-scrollbar-handle {
border-radius: 40px;
}
#info > .container > .main > .box.information > .feed .os-scrollbar-handle,
#info > .container > .main > .box.blog > .feed .os-scrollbar-handle {
background-color: #cecece;
}
#info > .container > .main > .box.blog {
margin-top: 37px;
}
#info > .container > .main > .box.blog > .title {
position: relative;
}
#info > .container > .main > .box.blog > .title > .tit {
display: flex;
line-height: 1.5;
padding-bottom: 16px;
margin-bottom: 32px;
border-bottom: 1px solid #f76a84;
}
#info > .container > .main > .box.blog > .title > .tit > .ja {
font-size: 1.875rem;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
}
_:-ms-input-placeholder,
:root #info > .container > .main > .box.blog > .title > .tit > .ja {
margin-top: 18px;
line-height: 1;
display: flex;
}
#info > .container > .main > .box.blog > .title > .tit > .en {
font-size: 0.9375rem;
color: #f76a84;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
margin-top: 15px;
margin-left: 18px;
letter-spacing: 2px;
}
#info > .container > .main > .box.blog > .title > p {
position: absolute;
right: 47px;
top: 9px;
}
#info > .container > .main > .box.blog > .title > p > a {
color: #000;
font-size: 1rem;
font-weight: 400;
position: relative;
transition: 0.3s;
}
#info > .container > .main > .box.blog > .title > p > a > picture {
position: absolute;
right: -33px;
top: -10px;
}
#info > .container > .main > .box.blog > .title > p > a:hover {
opacity: 0.7;
}
#info > .container > .main > .box.blog > .feed {
max-height: 159px;
}
_:-ms-input-placeholder,
:root #info > .container > .main > .box.blog > .feed {
height: 159px;
}
#info > .container > .sub {
flex: 0 0 auto;
width: 300px;
margin-left: 69px;
}
#info > .container > .sub > p:first-child {
font-size: 1.2rem;
font-weight: bold;
}
#info > .container > .sub > .tit {
display: flex;
line-height: 1.5;
padding-bottom: 12px;
padding-left: 3px;
margin-top: -4px;
}
#info > .container > .sub > .tit > .ja {
font-size: 1.5625rem;
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;
color: #222;
}
_:-ms-input-placeholder,
:root #info > .container > .sub > .tit > .ja {
margin-top: 18px;
line-height: 1;
display: flex;
}
#info > .container > .sub > .tit > .en {
font-size: 0.9375rem;
color: #ffdc00;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
margin-top: 9px;
margin-left: 14px;
letter-spacing: 2px;
}
#info > .container > .sub > .calendar {
background-color: #ffffff;
border-radius: 10px 10px 0px 0px;
overflow: hidden;
}
#info > .container > .sub > .calendar .listTab {
display: flex;
}
#info > .container > .sub > .calendar .listTab li {
flex: 0 1 50%;
}
#info > .container > .sub > .calendar .listTab li a {
display: block;
height: 45px;
line-height: 45px;
font-size: 1.8125rem;
font-family: urw-din, sans-serif;
font-weight: 500;
font-style: normal;
text-decoration: none;
text-align: center;
background-color: #fff;
color: #d1d1d1;
position: relative;
transition: background-color 0.3s, color 0.3s;
}
#info > .container > .sub > .calendar .listTab li a > span {
font-size: 0.875rem;
font-weight: bold;
}
#info > .container > .sub > .calendar .listTab li a::before {
content: '';
position: absolute;
width: 60px;
border-bottom: 1px dashed #fff;
left: 50%;
transform: translateX(-50%);
bottom: 0;
opacity: 0.8;
}
#info > .container > .sub > .calendar .listTab li a[aria-selected='true'] {
background-color: #ffdc00;
color: #000;
pointer-events: none;
}
#info > .container > .sub > .calendar .calendarIn {
position: relative;
padding: 0 22px 26px;
}
#info > .container > .sub > .calendar .calendarIn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #ffdc00;
}
#info > .container > .sub > .calendar .calendarIn::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: calc(100% - 44px);
height: 1px;
background-color: #cecece;
transform: translateX(-50%);
}
#info > .container > .sub > .calendar .calendarIn .boxContents {
display: none;
transition: opacity 0.3s;
}
#info > .container > .sub > .calendar .calendarIn .boxContents[aria-hidden='false'] {
display: block;
opacity: 1;
}
#info > .container > .sub > .calendar .calendarIn .boxContents.leave,
#info > .container > .sub > .calendar .calendarIn .boxContents.enter {
opacity: 0;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table {
width: 100%;
border-collapse: separate;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table th,
#info > .container > .sub > .calendar .calendarIn .boxContents table td {
text-align: center;
vertical-align: middle;
font-weight: 400;
width: 14.286%;
width: calc(100% / 7);
line-height: 1;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table thead th {
color: #000;
font-size: 0.9375rem;
position: relative;
height: 58px;
padding-bottom: 5px;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody td {
font-size: 0.9375rem;
height: 38px;
font-family: din-2014, sans-serif;
font-weight: 400;
font-style: normal;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .close {
position: relative;
z-index: 1;
color: #ffffff;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .close::before {
position: absolute;
content: '';
width: 30px;
height: 30px;
background-color: #f76a84;
top: 3px;
left: 3px;
z-index: -1;
border-radius: 50%;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .crd {
position: relative;
z-index: 1;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .crd::before {
position: absolute;
content: '';
width: 30px;
height: 30px;
background-color: #77b5d9;
top: 3px;
left: 3px;
z-index: -1;
border-radius: 50%;
}
#info > .container > .sub > .calendar ~ p {
padding-left: 50px;
font-size: 0.875rem;
font-weight: 300;
position: relative;
background-color: #fff;
border-radius: 0 0 10px 10px;
padding: 16px 55px;
}
#info > .container > .sub > .calendar ~ p span.close {
position: absolute;
width: 17px;
height: 17px;
background-color: #f76a84;
top: 21px;
left: 31px;
z-index: 1;
border-radius: 50%;
content: '';
}
@media (max-width: 750px) {
#loading {
background-size: 750px auto;
}
#loading > .container > .logo img {
width: 500px;
height: auto;
}
#loading > .container > .progress {
margin-top: 40px;
width: 450px;
height: 8px;
}
#mainVisual > .container {
width: calc(100% - 80px);
height: 1085px;
margin: 0 auto 63px;
}
#mainVisual > .container > .title {
width: 100%;
height: 100%;
}
#mainVisual > .container > .title > .txtLarge {
font-size: 96px;
right: 37px;
top: 369px;
line-height: 1;
letter-spacing: 1.4px;
}
#mainVisual > .container > .title > .txtLarge > span:nth-child(1) {
margin-left: 19px;
}
#mainVisual > .container > .title > .txtSmall {
font-size: 16px;
right: 96px;
top: 700px;
line-height: 1.5;
letter-spacing: 1.9px;
text-align: center;
}
#mainVisual > .container > .title > .ja {
font-size: 46px;
right: 96px;
top: 581px;
letter-spacing: 2.3px;
line-height: 1.217391304347826;
text-align: center;
}
#mainVisual > .container > .pic {
width: 670px;
height: 100%;
}
#mainVisual > .container > .pic > .slide {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: 0;
left: 0;
}
#mainVisual > .container > .pic > .slide > li {
position: absolute;
z-index: 8;
overflow: hidden;
height: 0;
display: block;
}
#mainVisual > .container > .pic > .slide > li > picture {
display: block;
filter: blur(2px);
transition: filter 10s cubic-bezier(0.075, 0.82, 0.165, 1);
position: absolute;
overflow: hidden;
transform: rotate(30deg);
z-index: 9;
}
#mainVisual > .container > .pic > .slide > li > picture.blur {
filter: blur(0);
}
#mainVisual > .container > .pic > .slide.slidemv > li > picture {
transform-origin: top left;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(1) {
left: -164px;
top: 721px;
width: 325px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(1) > picture {
left: 100px;
top: -68px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(2) {
left: 196px;
top: 53px;
width: 425px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(2) > picture {
left: 134px;
top: -89px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(3) {
left: 356px;
top: 784px;
width: 401px;
}
#mainVisual > .container > .pic > .slide.slidemv > li:nth-child(3) > picture {
left: 73px;
top: -122px;
}
#mainVisual > .container > .pic > .slide.show > li > picture {
transform-origin: right bottom;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(1) {
right: 509px;
bottom: 40px;
width: 325px;
top: auto;
left: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(1) > picture {
right: 53px;
bottom: -92px;
top: auto;
left: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(2) {
right: 46px;
bottom: 525px;
top: auto;
left: auto;
width: 425px;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(2) > picture {
right: 108px;
bottom: -185px;
left: auto;
top: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(3) {
right: -87px;
bottom: -105px;
top: auto;
width: 401px;
left: auto;
}
#mainVisual > .container > .pic > .slide.show > li:nth-child(3) > picture {
right: 119px;
bottom: -89px;
top: auto;
left: auto;
}
#mainVisual > .container > .deco {
width: 100%;
height: 100%;
}
#mainVisual > .container > .deco > span {
display: block;
position: absolute;
z-index: 9;
}
#mainVisual > .container > .deco > span:nth-child(1) {
top: 152px;
left: 46px;
}
#mainVisual > .container > .deco > span:nth-child(2) {
top: 64px;
left: 127px;
}
#mainVisual > .container > .deco > span:nth-child(3) {
top: 208px;
left: 86px;
}
#mainVisual > .container > .deco > span:nth-child(4) {
top: 45px;
left: auto;
right: 64px;
bottom: auto;
}
#mainVisual > .container > .deco > span:nth-child(5) {
bottom: 454px;
right: 576px;
transform: scaleX(1);
}
#mainVisual > .container > .deco > span:nth-child(6) {
bottom: 246px;
right: 422px;
}
#mainVisual > .container > .deco > span:nth-child(7) {
bottom: 132px;
right: 260px;
}
#mainVisual > .container > .deco > span:nth-child(8) {
bottom: 321px;
right: 21px;
}
#mainVisual > .container > .deco > span:nth-child(9) {
bottom: 16px;
right: 439px;
}
#mainVisual > .container > .deco > span:nth-child(10) {
bottom: 505px;
right: 27px;
}
#mainVisual > .container > .bg {
position: absolute;
left: 50%;
top: -138px;
width: 100%;
background-color: #fff;
border-radius: 40px;
transform: translateX(-50%);
z-index: -1;
height: calc(100% + 138px);
pointer-events: none;
}
#greet {
margin-top: 89px;
margin-bottom: 80px;
}
#greet > .container {
margin: 0 auto;
padding: 0 40px;
display: block;
max-width: 730px ;
}
#greet > .container > .anim_bound > h1 > p {
margin-top: 30px;
margin-bottom: 15px;
font-size: 30px;
line-height: 45px;
}
#greet > .container > .anim_bound > h1 > p > span {
font-size: 50px;
line-height: 50px;
}
#time > h2 {
margin-top: 30px;
font-size: 30px;
line-height: 45px;
}
#time > h2 > span {
font-size: 50px;
line-height: 50px;
}
#time > .container {
margin: 0 auto;
padding: 0 40px;
display: block;
max-width: 730px ;
}
#time > .container > .access {
width: 100%;
}
#time > .container > .access > .title {
margin-left: 0;
margin-bottom: 41px;
}
#time > .container > .access > .address {
line-height: 1.533333333333333;
font-size: 0.9375rem;
text-align: center;
}
#time > .container > .access > .schedule {
position: relative;
}
#time > .container > .access > .schedule::before {
content: '';
position: absolute;
background-color: #77b5d9;
width: 100%;
height: 59px;
top: 0;
left: 0;
z-index: -1;
}
#time > .container > .access > .schedule > table {
width: 100%;
border-collapse: separate;
margin: 36px 0 21px;
}
#time > .container > .access > .schedule > table th,
#time > .container > .access > .schedule > table td {
line-height: 1;
vertical-align: middle;
text-align: center;
font-size: 30px;
font-weight: normal;
white-space: nowrap;
}
#time > .container > .access > .schedule > table th {
text-align: left;
padding-left: 19px;
letter-spacing: 3px;
}
#time > .container > .access > .schedule > table td {
width: 64px;
}
#time > .container > .access > .schedule > table td.wide {
width: 87px;
}
#time > .container > .access > .schedule > table td:last-child {
width: 61px;
padding-right: 21px;
}
#time > .container > .access > .schedule > table thead th,
#time > .container > .access > .schedule > table thead td {
height: 59px;
background-color: #77b5d9;
color: #ffffff;
font-weight: 600;
}
#time > .container > .access > .schedule > table tbody th,
#time > .container > .access > .schedule > table tbody td {
height: 95px;
border-bottom: 2px solid #1e3b5c;
font-size: 32px;
letter-spacing: 0.5px;
}
#time > .container > .access > .schedule > table tbody td {
font-size: 1.1875rem;
color: #1e3b5c;
}
#time > .container > .access > .schedule > p {
line-height: 1.4667;
font-size: 0.875rem;
padding-left: 20px;
}
#time > .container > .access > .copyright {
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.875rem;
font-weight: 400;
margin-top: 44px;
letter-spacing: 2.2px;
}
#time > .container > .access > .tel-container {
text-align: center;
}
#time > .container > .access > .tel-container > .tel-link {
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.3s ease;
margin: auto;
}
#time > .container > .access > .tel-container > .tel-label {
font-size: 0.8em;
margin:auto;
display: inline-block;
text-align: center;
}
#time > .container > .link > iframe {
height: 250px;
width: 100%;
display: block;
margin: auto;
}
#time > .container > .link > p {
text-align: center;
margin: 2px 0;
line-height: 1.3;
}
#time > .container > .link > p:first-of-type {
font-weight: 600;
margin-top: 8px;
}
#time > .container > .link > p:last-of-type {
font-size: 0.925em;
}
/* 休診日・託児情報 */
.holiday-info {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin: 15px 0 8px;
}
.holiday-badge {
background: #f08080;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 21px;
}
.holiday-text {
font-size: 24px;
font-weight: bold;
}
.nursery-note {
width: 100%;
font-size: 19.5px;
margin-top: 5px;
}
.nursery-note .highlight {
font-weight: bold;
text-decoration: underline;
}
/* recommend おすすめの治療 */
#menu-slider-section {
padding: 40px 0;
}
#menu-slider-section .container {
padding: 0 15px;
z-index: 1;
}
#menu-slider-section > .container > h2 > p {
margin-top: 30px;
font-size: 30px;
line-height: 45px;
margin-bottom:20px;
}
#menu-slider-section > .container > h2 > p > span {
font-size: 50px;
line-height: 50px;
}
#menu-slider-section .section-title .main {
font-size: 22px;
}
.menu-slider-container {
position: relative;
padding: 0 50px;
z-index: 100 !important;
}
.menu-slider-wrapper {
display: flex;
gap: 0;
justify-content: flex-start;
transition: transform 0.4s ease;
}
/* 各スライド - SP用 */
.menu-slide {
flex: 0 0 100%;
max-width: 100%;
border-radius: 12px;
}
.menu-slide:hover {
transform: none;
}
/* ナビボタン表示 */
.menu-nav-button {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(calc(-50% - 20px));
width: 60px;
height: 60px;
border-radius: 50%;
background: #ff717b;
border: none;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease, opacity 0.3s ease;
padding: 0;
}
.menu-nav-button:hover {
background: #ff5a65;
}
.menu-nav-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.menu-nav-button svg {
width: 24px;
height: 24px;
fill: #fff;
}
.menu-nav-button.prev {
left: 0;
}
.menu-nav-button.next {
right: 0;
}
/* インジケーター表示 */
.menu-indicators {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.menu-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: #ddd;
cursor: pointer;
padding: 0;
transition: background 0.3s ease, transform 0.3s ease;
}
.menu-indicator:hover {
background: #bbb;
}
.menu-indicator.active {
background: #ff717b;
transform: scale(1.1);
}
/* 遷移ボタン */
.seni-btn img{
width:30%;
margin: 0 3px;
}
/* 保険診療・初診料・自費診療の各目安 */
#price-guide-section {
background: #ffffff;
width: 90%;
margin: auto;
padding: 0;
}
#price-guide-section > .container > .price-guide-inner > h2 > p {
font-size: 0.9rem;
color: #666;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN", sans-serif;
margin-top: 10px;
}
#price-guide-section > .container > .price-guide-inner > h2 > p > span {
text-align: center;
margin:auto;
font-size: 1.2rem;
color: #ff717b ;
line-height: 1;
}
/* コンテンツエリア - 縦並び */
.price-content {
flex-direction: column;
gap: 25px;
margin-bottom: 35px;
}
/* 説明文 */
.price-description {
flex: none;
width: 100%;
}
.price-description p , .price-description .note{
font-size: 26px;
line-height: 1.4;
}
.price-description .highlight {
font-size: 26px;
}
/* 区切り線 */
.price-types {
flex: none;
width: 100%;
gap: 20px;
padding-top: 25px;
border-top: 1px solid #ddd;
}
/* 診療タイプ - 縦並び */
.price-type-item {
flex-direction: column;
gap: 10px;
}
.type-label {
min-width: auto;
padding: 5px 16px;
font-size: 26px;
}
.type-text p {
font-size: 26px;
line-height: 1.7;
}
/* ボタン */
.price-button {
font-size: 28px;
padding: 12px 30px;
}
/*
symptoms subject お悩みの症状から探す
---------------------------------------*/
.subject {
width: 100%;
margin: auto;
padding: 10vw 3vw 0;
}
.subject > h2 > p {
margin-top: 30px;
margin-bottom: 30px;
font-size: 30px;
line-height: 45px;
}
.subject > h2 > p > span {
font-size: 50px;
line-height: 47px;
}
#symptoms > h2 > p > span {
font-size: 43px;
line-height: 45px;
}
.subject .subject__list {
width: 100%;
max-width: 1000px;
margin: auto;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
list-style: none;
}
.subject .subject__list::after {
content: none;
}
.subject .subject__list::before {
content: none;
}
.subject .subject__list li {
-webkit-flex-basis: 48%;
height: 115px;
font-size:20px;
flex-basis: 48%;
max-width: 48%;
margin-bottom: 20px;
background: url("/img/btn_subject_01_off.png") no-repeat center right 20px, #ffffff;
background-size: 27px auto;
border-radius: 2px;
border: 4px solid #ff717b;
}
.subject .subject__list li a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
min-height: 70px;
padding: 10px 3vw 10px 3vw;
font-size: 27px;
line-height: 36px;
font-weight: bold;
}
.subject .subject__list li a img {
max-width: 85%;
}
.irregular_teeth {
display: inline-block !important;
text-align: center !important;
font-size: 3vw !important;
}
.subject .subject__list li a span {
width: 100%;
font-size: 3.5vw;
}
.subject .subject__list li:hover {
background: url("/img/btn_subject_01_on.png") no-repeat center right 12px, #ff717b;
}
.subject .subject__list li:hover a {
color: #ffffff;
text-decoration: none;
}
.subject .subject__list .current {
background: url("/img/btn_subject_01_on.png") no-repeat center right 12px, #ff717b;
}
.subject .subject__list li.current a {
color: #ffffff;
text-decoration: none;
}
.subject .subject__list li.outside {
background: url("/img/btn_subject_02_off.png") no-repeat center right 12px, #ffffff;
border: 3px solid #ff717b;
}
.subject .subject__list li.outside:hover {
background: url("/img/ ") no-repeat center right 12px, #ff717b;
}
.subject .subject__bnr {
margin-top: 5vw;
text-align: center;
}
.subject .subject__bnr a:hover img {
opacity: 0.7;
transition: 0.5s;
}
.subject .subject__bnr img {
width: auto;
max-width: 100%;
}
/* ９つの特徴
-----------------------------------------------*/
#feature {
margin-top: 109px;
}
#feature > .container {
width: 100%;
min-width: auto;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 40px;
}
/*
きらり大森歯科９つの特徴 css
#feature > .container > .title {
text-align: center;
margin-bottom: 68px;
padding-right: 28px;
} */
#feature > .container > .anim_bound > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32px;
position: relative;
}
#feature > .container > .anim_bound > .tit > p {
font-size: 40px;
}
#feature > .container > .anim_bound > .tit > .ja {
letter-spacing: 2px;
font-size: 72px;
line-height: 1.25;
}
#feature > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 40px;
justify-content: center;
margin-top: 5px;
padding-left: 7px;
}
#feature > .container > .list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
position: relative;
z-index: 1;
}
#feature > .container > .list > li:nth-child(1),
#feature > .container > .list > li:nth-child(5),
#feature > .container > .list > li:nth-child(9) {
width: 100%;
margin: 0 auto 78px;
min-height: auto;
display: flex;
position: relative;
flex-direction: column;
}
#feature > .container > .list > li:nth-child(1)::before,
#feature > .container > .list > li:nth-child(5)::before,
#feature > .container > .list > li:nth-child(9)::before {
width: 100%;
height: calc(100% - 194px);
right: 0;
top: 194px;
}
#feature > .container > .list > li:nth-child(1) > .pic,
#feature > .container > .list > li:nth-child(5) > .pic,
#feature > .container > .list > li:nth-child(9) > .pic {
width: 100%;
position: relative;
}
#feature > .container > .list > li:nth-child(1) > .pic > .num,
#feature > .container > .list > li:nth-child(5) > .pic > .num,
#feature > .container > .list > li:nth-child(9) > .pic > .num {
position: absolute;
right: 50%;
top: auto;
bottom: -57px;
transform: translateX(50%);
font-size: 160px;
line-height: 1;
z-index: 1;
letter-spacing: 5px;
}
#feature > .container > .list > li:nth-child(1) > .pic > picture,
#feature > .container > .list > li:nth-child(5) > .pic > picture,
#feature > .container > .list > li:nth-child(9) > .pic > picture {
display: block;
position: relative;
right: 0;
top: 0;
}
#feature > .container > .list > li:nth-child(1) > .txt,
#feature > .container > .list > li:nth-child(5) > .txt,
#feature > .container > .list > li:nth-child(9) > .txt {
width: 100%;
padding: 48px 41px 60px;
}
#feature > .container > .list > li:nth-child(1) > .txt > .tit,
#feature > .container > .list > li:nth-child(5) > .txt > .tit,
#feature > .container > .list > li:nth-child(9) > .txt > .tit {
font-weight: 400;
font-size: 38px;
line-height: 1.631578947368421;
letter-spacing: 1.7px;
margin-bottom: 29px;
text-align: center;
padding-right: 10px;
}
#feature > .container > .list > li:nth-child(2),
#feature > .container > .list > li:nth-child(3),
#feature > .container > .list > li:nth-child(4),
#feature > .container > .list > li:nth-child(6),
#feature > .container > .list > li:nth-child(7),
#feature > .container > .list > li:nth-child(8) {
width: 100%;
margin-right: 0;
margin-bottom: 79px;
display: flex;
flex-direction: column;
position: relative;
}
#feature > .container > .list > li:nth-child(2)::before,
#feature > .container > .list > li:nth-child(3)::before,
#feature > .container > .list > li:nth-child(4)::before,
#feature > .container > .list > li:nth-child(6)::before,
#feature > .container > .list > li:nth-child(7)::before,
#feature > .container > .list > li:nth-child(8)::before {
width: 100%;
height: calc(100% - 191px);
background-color: #fff;
left: 0px;
top: 191px;
z-index: -1;
}
#feature > .container > .list > li:nth-child(2) > .pic,
#feature > .container > .list > li:nth-child(3) > .pic,
#feature > .container > .list > li:nth-child(4) > .pic,
#feature > .container > .list > li:nth-child(6) > .pic,
#feature > .container > .list > li:nth-child(7) > .pic,
#feature > .container > .list > li:nth-child(8) > .pic {
width: 100%;
position: relative;
height: auto;
text-align: right;
}
#feature > .container > .list > li:nth-child(2) > .pic > .num,
#feature > .container > .list > li:nth-child(3) > .pic > .num,
#feature > .container > .list > li:nth-child(4) > .pic > .num,
#feature > .container > .list > li:nth-child(6) > .pic > .num,
#feature > .container > .list > li:nth-child(7) > .pic > .num,
#feature > .container > .list > li:nth-child(8) > .pic > .num {
position: absolute;
right: 50%;
top: auto;
bottom: -57px;
transform: translateX(50%);
font-size: 160px;
line-height: 1;
z-index: 1;
letter-spacing: 5px;
}
#feature > .container > .list > li:nth-child(2) > .pic > picture,
#feature > .container > .list > li:nth-child(3) > .pic > picture,
#feature > .container > .list > li:nth-child(4) > .pic > picture,
#feature > .container > .list > li:nth-child(6) > .pic > picture,
#feature > .container > .list > li:nth-child(7) > .pic > picture,
#feature > .container > .list > li:nth-child(8) > .pic > picture {
display: block;
}
#feature > .container > .list > li:nth-child(2) > .txt,
#feature > .container > .list > li:nth-child(3) > .txt,
#feature > .container > .list > li:nth-child(4) > .txt,
#feature > .container > .list > li:nth-child(6) > .txt,
#feature > .container > .list > li:nth-child(7) > .txt,
#feature > .container > .list > li:nth-child(8) > .txt {
width: 100%;
padding: 9px 41px 60px;
}
#feature > .container > .list > li:nth-child(2) > .txt > .tit,
#feature > .container > .list > li:nth-child(3) > .txt > .tit,
#feature > .container > .list > li:nth-child(4) > .txt > .tit,
#feature > .container > .list > li:nth-child(6) > .txt > .tit,
#feature > .container > .list > li:nth-child(7) > .txt > .tit,
#feature > .container > .list > li:nth-child(8) > .txt > .tit {
font-weight: 400;
font-size: 38px;
line-height: 1.631578947368421;
letter-spacing: 1.7px;
margin-bottom: 28px;
text-align: center;
padding-right: 10px;
}
#feature > .container > .list > li:nth-child(2) > .txt > p,
#feature > .container > .list > li:nth-child(3) > .txt > p,
#feature > .container > .list > li:nth-child(4) > .txt > p,
#feature > .container > .list > li:nth-child(6) > .txt > p,
#feature > .container > .list > li:nth-child(7) > .txt > p,
#feature > .container > .list > li:nth-child(8) > .txt > p {
color: #222222;
font-weight: 300;
font-size: 1rem;
line-height: 2;
padding-right: 0;
}
#feature > .container > .list > li:nth-child(2),
#feature > .container > .list > li:nth-child(6) {
margin-left: 0;
}
#feature > .container > .list > li:nth-child(2) > .pic > .num,
#feature > .container > .list > li:nth-child(6) > .pic > .num {
left: auto;
}
#feature > .container > .list > li:nth-child(6) > .pic > .num {
letter-spacing: 13px;
left: auto;
}
#feature > .container > .list > li:nth-child(3)::before,
#feature > .container > .list > li:nth-child(7)::before {
top: 187px;
bottom: auto;
height: calc(100% - 187px);
}
#feature > .container > .list > li:nth-child(3) > .pic,
#feature > .container > .list > li:nth-child(7) > .pic {
order: 1;
text-align: left;
}
#feature > .container > .list > li:nth-child(3) > .pic > .num,
#feature > .container > .list > li:nth-child(7) > .pic > .num {
bottom: -34px;
left: auto;
}
#feature > .container > .list > li:nth-child(3) > .txt,
#feature > .container > .list > li:nth-child(7) > .txt {
order: 2;
margin-top: 38px;
margin-bottom: -3px;
}
#feature > .container > .list > li:nth-child(4),
#feature > .container > .list > li:nth-child(8) {
margin-right: 0%;
}
#feature > .container > .list > li:nth-child(4)::before,
#feature > .container > .list > li:nth-child(8)::before {
top: 187px;
bottom: auto;
height: calc(100% - 187px);
}
#feature > .container > .list > li:nth-child(4) > .pic > .num,
#feature > .container > .list > li:nth-child(8) > .pic > .num {
bottom: -36px;
left: auto;
}
#feature > .container > .list > li:nth-child(8) > .pic > .num {
bottom: -54px;
left: auto;
letter-spacing: 13px;
padding-left: 3px;
}
#feature > .container > .list > li:nth-child(5) {
margin-bottom: 79px;
}
#feature > .container > .list > li:nth-child(5)::before {
left: 0;
right: auto;
top: 194px;
}
#feature > .container > .list > li:nth-child(5) > .pic {
order: 1;
}
#feature > .container > .list > li:nth-child(5) > .pic > .num {
left: auto;
bottom: -32px;
}
#feature > .container > .list > li:nth-child(5) > .pic > picture {
left: 0;
right: auto;
top: 0;
z-index: -1;
}
#feature > .container > .list > li:nth-child(5) > .txt {
order: 2;
padding: 44px 41px 63px;
}
#feature > .container > .list > li:nth-child(5) > .txt > p {
line-height: 2;
}
#feature > .container > .list > li:nth-child(9) {
margin-bottom: 0;
}
#feature > .container > .list > li:nth-child(9) > .pic > .num {
bottom: -33px;
letter-spacing: 15px;
padding-left: 8px;
}
#feature > .container > .list > li:nth-child(9) > .txt {
padding: 45px 41px 60px;
}
/* 追加 */
/* #feature リスト部分のSP対応 */
/* #feature > .container > .list > li {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#feature > .container > .list > li > .pic {
width: 100%;
text-align: center;
}
#feature > .container > .list > li > .pic > picture {
display: block;
position: relative;
right: auto;
left: auto;
margin: 0 auto;
}
#feature > .container > .list > li > .pic > picture img {
width: 100%;
height: auto;
}
#feature > .container > .list > li > .txt {
width: 100%;
padding: 48px 41px 60px;
text-align: center;
}
#feature > .container > .list > li > .txt > .tit {
text-align: center;
} */
/* 追加 */
/* pay_menu
--------------------------------------------------------------------------------*/
.pay_menu{
width: 100%;
}
.pay_menu > .container {
width: 100%;
min-width: 0;
padding: 0;
margin: 0 auto;
z-index: 1;
}
.pay_menu > .container > img{
max-width: 650px;
width: 100%;
display: block;
margin: auto;
}
.pay_menu > .container > h2 > p {
margin-top: 30px;
font-size: 30px;
line-height: 45px;
}
.pay_menu > .container > h2 > p > span {
font-size: 50px;
line-height: 50px;
}
/* #greet > .container > .anim_bound > h2 > p {
font-size: 30px;
line-height: 50px;
} */
/* message
--------------------------------------------------------------------------------*/
#message {
margin-top: 80px;
}
#message > .container {
width: 100%;
padding: 0 40px;
}
#message > .container > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32px;
position: relative;
}
#message > .container > .tit > p {
font-size: 40px;
}
#message > .container > .tit > .ja {
letter-spacing: 2px;
font-size: 72px;
line-height: 1.25;
}
#message > .container > .tit > .en {
letter-spacing: 3px;
font-size: 40px;
justify-content: center;
margin-top: 5px;
padding-left: 7px;
}
#message > .container > .content {
display: flex;
justify-content: center;
flex-direction: column;
}
#message > .container > .content > .txt {
width: 100%;
padding-bottom: 36px;
}
#message > .container > .content > .txt > p {
letter-spacing: 0.3px;
padding-right: 3px;
}
#message > .container > .content > .pic {
width: 100%;
position: relative;
text-align: center;
}
#message > .container > .content > .pic > picture {
bottom: 0;
left: 0;
z-index: -1;
display: block;
position: relative;
}
/* map
--------------------------------------------------------------------------------*/
#map {
margin-top: 80px;
}
#map > .container {
width: 100%;
padding: 0 40px;
}
#map > .container > h2 > p {
margin-top: 30px;
font-size: 30px;
line-height: 45px;
}
#map > .container > h2 > p > span {
font-size: 50px;
line-height: 50px;
}
#map > .container > .tit > .ja {
letter-spacing: 2px;
font-size: 72px;
line-height: 1.25;
}
#map > .container > .tit > .en {
letter-spacing: 3px;
font-size: 40px;
justify-content: center;
margin-top: 5px;
padding-left: 7px;
}
#map .map iframe{
width:90% ;
height: 200px;
}
.table01,
.table01 tbody,
.table01 tr,
.table01 th,
.table01 td {
display: block;
width: 100%;
}
.table01 tr {
margin-bottom: 0;
}
.table01 th {
width: 100%;
padding: 12px 15px;
border-bottom: none;
}
.table01 td {
padding: 12px 15px;
border-top: none;
}
.inner_table {
padding: 15px;
}
.inner_table p {
font-size: 14px;
}
/* 歯科保存専門医------------------------------------------------------------- */
#message_info > .container {
width: 90%;
position: relative;
left: 45%;
transform: translateX(-50%);
}
/* topic----------------------------------------------------------- */
#topic {
width: calc(100% - 80px);
margin: -17px auto 100px;
}
#topic .container {
padding: 24px 38px 6.335%;
position: relative;
background-color: #fff;
border-radius: 40px;
}
#topic .container > .tit {
width: 100%;
font-size: 62px;
line-height: 1.5;
margin: 30px auto 102px;
padding-left: 0;
}
#topic .container > .tit > .en {
font-size: 32px;
margin-top: 8px;
margin-left: 0;
letter-spacing: 6.3px;
width: 414px;
justify-content: center;
padding: 6px 0;
}
#topic .container > .tit > .en::before,
#topic .container > .tit > .en::after {
width: 0%;
height: 2px;
top: 0;
left: 0;
}
#topic .container > .tit > .en::after {
top: auto;
bottom: 0px;
}
#topic > .container > .anim_bound > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
margin-bottom: 32px;
position: relative;
}
#topic > .container > .anim_bound > .tit > p {
font-size: 40px;
}
#topic > .container > .anim_bound > .tit > .ja {
letter-spacing: 2px;
font-size: 72px;
line-height: 1.25;
}
#topic > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 40px;
justify-content: center;
margin-top: 5px;
padding-left: 7px;
}
#topic .container > .boxIn {
position: relative;
max-width: 100%;
margin: 0 auto;
}
#topic .container > .boxIn > .indicator {
top: 38px;
bottom: 0;
left: -6px;
width: 35px;
z-index: 994;
}
#topic .container > .boxIn > .indicator > ul > li {
position: relative;
}
#topic .container > .boxIn > .indicator > ul > li > a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #ccc;
color: #000;
text-decoration: none;
transition: 0.3s;
transition-property: background-color, color;
}
#topic .container > .boxIn > .indicator > ul > li > a.current {
background-color: #f76a84;
color: #fff;
}
#topic .container > .boxIn > .indicator > ul > li > .line {
display: block;
width: 2px;
height: 203px;
margin: -1px auto;
background-size: 100% 200%;
}
#topic .container > .boxIn > .indicator > ul > li > .numb {
top: -50px;
left: 40px;
font-size: 24px;
font-weight: 400;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#topic .container > .boxIn > .indicator > ul > li > .numb .combine {
-webkit-text-combine: horizontal;
-moz-text-combine-upright: all;
-ms-text-combine-horizontal: all;
text-combine-upright: all;
}
@-moz-document url-prefix() {
#topic .container > .boxIn > .indicator > ul > li > .numb {
top: -28px;
}
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(2) > .numb {
top: -72px;
}
@-moz-document url-prefix() {
#topic .container > .boxIn > .indicator > ul > li:nth-child(2) > .numb {
top: -57px;
}
}
@-moz-document url-prefix() {
#topic .container > .boxIn > .indicator > ul > li:nth-child(3) > .numb {
top: -28px;
}
}
#topic .container > .boxIn > .indicator > ul > li:nth-child(4) > .numb {
top: -80px;
}
@-moz-document url-prefix() {
#topic .container > .boxIn > .indicator > ul > li:nth-child(4) > .numb {
top: -70px;
}
}
#topic .container > .boxIn > .list > .listTopic {
margin: 30px 0 30px 110px;
}
#topic .container > .boxIn > .list > .listTopic > li {
flex-direction: column !important;
position: relative;
margin-bottom: 140px;
visibility: visible;
opacity: 1;
}
#topic .container > .boxIn > .list > .listTopic > li:last-child {
margin-bottom: 0;
}
#topic .container > .boxIn > .list > .listTopic > li > .text {
width: 100%;
padding: 29px 0px 0px 0;
order: 2;
visibility: visible;
opacity: 1;
transform: scale(1);
}
#topic .container > .boxIn > .list > .listTopic > li > .text > .tit {
font-size: 40px;
letter-spacing: 3px;
margin-bottom: 12px;
text-align: center;
}
#topic .container > .boxIn > .list > .listTopic > li > .text > p {
color: #222;
font-size: 32px;
line-height: 1.9375;
}
#topic .container > .boxIn > .list > .listTopic > li > .pic {
position: relative;
width: 100%;
padding-left: 0;
padding-top: 0;
order: 1;
}
#topic .container > .boxIn > .list > .listTopic > li > .pic > .num {
font-size: 120px;
line-height: 1;
left: 5px;
top: -60px;
letter-spacing: 5px;
}
#topic .container > .boxIn > .list > .listTopic > li > .pic > .num > span {
font-size: 50px;
margin-left: 7px;
margin-top: 10px;
letter-spacing: 3px;
}
#topic .container > .boxIn > .ui_list_pic {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 596px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img {
margin-top: 0;
margin-bottom: 30px;
list-style-type: none;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li {
position: absolute;
width: 100%;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic {
position: relative;
width: calc(100% - 615px);
padding-left: 38px;
padding-top: 32px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic > .num {
font-size: 10.625rem;
color: #ececec;
font-family: comma-base, sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1;
position: absolute;
left: -39px;
top: -57px;
font-weight: 400;
display: flex;
align-items: center;
letter-spacing: 4px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic > .num > span {
color: #f76a84;
font-size: 3.875rem;
font-weight: 500;
display: flex;
margin-left: 25px;
margin-top: 18px;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li:nth-child(2) > .pic > .num > span {
color: #ffdc00;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li:nth-child(3) > .pic > .num > span {
color: #77b5d9;
}
#topic .container > .boxIn > .ui_list_pic .ui_list_step01_img > li:nth-child(4) > .pic > .num > span {
color: #f76a84;
}
#menu > .container {
width: 100%;
margin: 0 auto 40px;
justify-content: center;
flex-direction: column;
padding: 80px 0 40px 0;
}
#menu > .container > .title {
margin: -23px 0 50px;
position: relative;
justify-content: center;
text-align: center;
}
#menu > .container > .title > p {
font-size: 0.9rem;
}
#menu > .container > .title > .en {
font-size: 40px;
line-height: 1.5;
margin-top: 1px;
letter-spacing: 1px;
}
#menu > .container > .title > .ja {
font-size: 72px;
display: flex;
}
#menu > .container > .list {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#menu > .container > .list > li {
width: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 0;
margin-bottom: 42px;
}
#menu > .container > .list > li:nth-child(4),
#menu > .container > .list > li:nth-child(8) {
margin-right: 0px;
}
#menu > .container > .list > li:nth-child(4) > figure {
margin-left: 6px;
}
#menu > .container > .list > li > a {
text-decoration: none;
color: #000;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
#menu > .container > .list > li > a > figure {
text-align: center;
width: 170px;
height: 170px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
#menu > .container > .list > li > a > figure::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
top: 0;
left: 0;
z-index: -1;
transition: 0.3s;
}
#menu > .container > .list > li > a > figure > picture {
transition: 0.3s;
}
#menu > .container > .list > li > a > figure > .on {
position: absolute;
display: flex;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#menu > .container > .list > li > a:hover > figure::before {
transform: scale(1);
background-color: transparent;
}
#menu > .container > .list > li > a:hover > figure > picture:nth-child(1) {
opacity: 1;
}
#menu > .container > .list > li > a:hover > figure > .on {
opacity: 0;
}
#menu > .container > .list > li > a:hover > h4 {
color: #000;
}
#menu > .container > .list > li > a > h4 {
font-size: 34px;
line-height: 1.470588235294118;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: 0.3s;
}
#menu > .container > .list > li:nth-child(odd) > a {
padding-right: 44px;
}
#menu > .container > .list > li:nth-child(even) > a {
padding-left: 7px;
}
#menu > .container > .list > li:nth-child(3) > a > h4,
#menu > .container > .list > li:nth-child(7) > a > h4 {
height: 100px;
}
#Setsubi .container {
position: relative;
margin-bottom:40px;
}
#Setsubi > .container > .anim_bound > .tit {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
margin-bottom: 32px;
position: relative;
}
#Setsubi > .container > .anim_bound > .tit > p {
font-size: 40px;
}
#Setsubi > .container > .anim_bound > .tit > .ja {
letter-spacing: 2px;
font-size: 72px;
line-height: 1.25;
}
#Setsubi > .container > .anim_bound > .tit > .en {
letter-spacing: 3px;
font-size: 40px;
justify-content: center;
margin-top: 5px;
padding-left: 7px;
}
/* 院内・設備スライダー SP */
.facility-slide {
flex: 0 0 605px;
}
.facility-nav-button {
width: 70px;
height: 70px;
top: 260px;
}
.facility-nav-button.prev {
left: 7px;
top: 260px;
}
.facility-nav-button.next {
right: 7px;
top: 260px;
}
.facility-nav-button svg {
width: 16px;
height: 16px;
}
.facility-slide-image {
height: 384px;
}
.facility-slide-content {
padding: 16px;
font-size: 23px;
}
.facility-slider-wrapper {
display: flex !important;
}
/* flow */
#flow {
width: 100%;
margin: auto;
padding: 10vw 0 0;
}
#flow .container {
position: relative;
}
#flow > .container > .anim_bound > .tit {
margin: -23px 0 50px;
position: relative;
justify-content: center;
text-align: center;
max-width: 100%;
}
#flow > .container > .anim_bound > .tit > p {
font-size: 30px;
}
#flow > .container > .anim_bound > .tit > .en {
font-size: 50px;
line-height: 1.5;
margin-top: 1px;
letter-spacing: 1px;
}
#flow > .container > .anim_bound > .tit > .ja {
font-size: 72px;
display: flex;
}
#flow > .container > .anim_bound > .flow__title {
margin-bottom: 30px;
text-align: center;
}
#flow > .container > .anim_bound > .flow__title > img {
width: 80%;
}
#flow > .container > .anim_bound > .flow__list {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
list-style: none;
width: 100%;
max-width: 700px;
margin: 0 auto 20px;
padding: 0;
}
#flow > .container > .anim_bound > .flow__list > li {
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
position: relative;
}
#flow > .container > .anim_bound > .flow__list > li > h3 {
font-size: 35px !important;
padding: 3px 0;
}
#flow > .container > .anim_bound > .flow__list > li > p {
font-size: 30px !important;
}
#flow > .container > .anim_bound > .flow__list > li:not(:first-child) {
padding-bottom: 50px;
}
/* PC用の横矢印を消す */
#flow > .container > .anim_bound > .flow__list > li:not(:last-child)::after {
content: "";
display: block;
width: 100px;
height: 50px;
position: absolute;
bottom: -20px; /* 項目の下に配置 */
left: 50%;
transform: translateX(-50%);
/* 下向き矢印の画像があればそのパスを指定、なければ背景色等で作成 */
background: url("/img/pic_flow_arrow_sp.png") no-repeat center/contain;
}
/* liの幅をSP用に調整（100%にする） */
#flow > .container > .anim_bound > .flow__list > li {
flex-basis: 100%;
max-width: 100%;
margin-bottom: 40px; /* 矢印が入るスペースを空ける */
}
#flow > .container > .anim_bound > .flow__list > li > .flow__list--img {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto 0px;
padding: 0 3vw;
}
#flow > .container > .anim_bound > .flow__list > li > .flow__list--img > span {
position: absolute;
left: 0;
top: 0 ;
display : block;
text-align: center;
width: 70px;
height: 70px;
background: #f76a84;
display: flex; /* Flexboxに変更 */
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
padding-bottom: 0;
}
#flow > .container > .anim_bound > .flow__list > li > .flow__list--img > span > img {
width: 35% !important; /* または 60% などお好みのサイズ感に */
height: auto;
max-width: 100%; /* 枠からはみ出さないように制限 */
max-height: 100%; /* 枠からはみ出さないように制限 */
object-fit: contain; /* 比率を保ったまま収める */
margin: 0; /* 余計な余白を削除 */
}
#flow > .container > .anim_bound > .flow__list > li:first-child > .flow__list--img > span > img {
width: 25% !important;
}
#flow > .container > .anim_bound > .flow__list > li > .flow__list--title {
font-size: 27px;
font-weight: bold;
text-align: center;
padding: 0 3vw;
margin-top: 10px;
}
#flow > .container > .anim_bound > .flow__list > li > .flow__list--text {
font-size: 26px;
padding: 0 3vw;
}
#flow > .container > .anim_bound > .flow__btn {
text-align: center;
}
/* first */
#first {
margin-bottom: 135px;
}
#first > .container {
margin: 0 auto;
padding: 0 40px;
display: block;
max-width: 730px ;
}
#first > .container > .anim_bound > h2 > p {
font-size: 30px;
line-height: 45px;
}
#first > .container > .anim_bound > h2 > p > span {
font-size: 50px;
line-height: 50px;
}
.first-flex {
display: flex;
flex-direction: column;
}
.first-flex p {
width: 100%;
}
.first-flex img {
width: 100%;
margin-top: 20px;
}
/* ボタン */
#first > .container > .anim_bound > .first-button-wrap {
width:500px;
font-size: 30px;
padding: 12px 30px;
}
/* #fq 質問
----------------------------------------------------------- */
#qa > .faq-section > h2 > p {
/* margin-top: 30px; */
font-size: 30px;
line-height: 45px;
}
#qa > .faq-section > h2 > p > span {
font-size: 50px;
line-height: 50px;
}
.faq-section {
padding: 40px 15px;
}
.faq-item{
width: 88%;
}
/* Qアイコン */
#qa .faq-question {
display: flex !important;
align-items: center !important; /* 上下中央揃え */
min-height: 130px !important; /* 2行時の高さに統一 */
height: auto !important; /* 2行になっても伸びる */
padding-top: 20px !important;
padding-bottom: 20px !important;
padding-left: 90px !important; /* Qアイコン分 */
padding-right: 20px !important;
box-sizing: border-box !important;
font-size: 30px;
background: url("/img/icon_qa_q.png") no-repeat left 25px center !important;
background-size: 45px auto !important;
}
/* dt・spanが縦に伸びないよう */
#qa .faq-question dt {
display: flex !important;
align-items: center !important;
flex: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
#qa .faq-section .faq-item .faq-question dt span{
display: inline-block;
font-size: 27px;
padding: 0;
}
#qa .faq-icon{
font-size: 30px;;
margin-left: 15px;
}
.faq-question .icon-q {
width: 32px;
height: 32px;
font-size: 16px;
margin-right: 12px;
}
.faq-question .question-text {
font-size: 27px;
}
/* Aアイコン */
#qa .faq-answer dd {
padding-left: 60px !important;
margin: 0 30px 0px;
background: url("/img/icon_qa_a.png") no-repeat left 0 top 10px !important;
background-size: 40px auto !important;
font-size: 30px;
}
.faq-answer-inner {
padding: 0 20px 20px;
}
.faq-answer .icon-a {
width: 26px;
height: 26px;
font-size: 12px;
margin-right: 12px;
}
.faq-answer .answer-text {
font-size: 14px;
}
/*--------------------
.reservation
--------------------*/
.reservation {
width: 100%;
margin: auto;
padding: 0px 10px 40px 10px;
}
.reservation .reservation__inner {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
max-width: 1000px;
margin: auto;
}
.reservation .reservation__btn {
width: 49%;
max-width: 485px;
}
.reservation .reservation__btn:hover {
opacity: 0.7;
transition: 0.5s;
}
.reservation .reservation__btn a {
display: block;
padding: 20px;
font-size: 22px;
font-weight: bold;
text-align: center;
}
.reservation .reservation__btn a:hover {
text-decoration: none;
opacity: 0.7;
transition: 0.5s;
}
.reservation .reservation__btn a img {
width: auto;
max-width: 100%;
}
/* 権威性
------------------------- */
#authority > h2 > p {
/* margin-top: 30px; */
font-size: 30px;
line-height: 45px;
}
#authority > h2 > p > span {
font-size: 50px;
line-height: 50px;
}
#authority {
padding: 20px;
}
#authority > .container {
width: 86%;
margin: auto;
}
#authority > .container > .achievement-content {
display: block;
}
.achievement-left{
display: block;
width: 100%;
}
/* 小見出し */
.achievement-heading {
font-family: 'Noto Serif JP', serif;
font-size: 40px;
font-weight: 600;
border-bottom: 4px solid #f08080;
width: fit-content;
margin-bottom: 20px;
}
.achievement-text{
font-size:25px;
}
.achievement-stats{
padding: 0;
margin:0 auto;
width:90% ;
max-width: 600px;
}
.achievement-stats .stats-note{
text-align: right;
}
/* 縦並びに */
.achievement-content {
flex-direction: column;
gap: 30px;
}
/* グラフを表示 */
.achievement-right {
display: block;
text-align: center;
margin-top: 20px;
}
.achievement-right img {
transform: scale(1.1);
}
.achievement-heading {
font-size: 38px;
padding-left: 12px;
border-left-width: 3px;
margin-bottom: 15px;
}
.achievement-text {
font-size: 28px;
line-height: 1.9;
margin-bottom: 25px;
}
.stats-label {
font-size: 23px;
}
.stats-number {
justify-content: center;
gap: 2px;
line-height: 1.1;
}
.stats-number .prefix {
font-size: 27px;
}
.stats-number .num {
font-size: 58px;
}
.stats-number .unit {
font-size: 38px;
}
.stats-number .suffix {
font-size: 27px;
}
.stats-note {
text-align: center;
font-size: 22px;
}
/* 拠点・スタッフ縦並び */
.achievement-info {
flex-direction: column;
gap: 25px;
margin-bottom: 20px;
}
/* kyoutuu */
.info-item {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
height: 170px;
padding-left: 60px;
}
.info-icon ,
.info-detail{
flex:1;
height: 170px;
}
.info-detail{
padding-top: 40px;
}
.info-icon img {
width: 100%;
height: 100%;
}
.info-detail .info-label {
font-size: 25px !important;
font-weight: 500;
line-height: 1.0;
}
.info-detail .info-num {
font-size: 60px !important;
font-weight: 600;
color: #f08080;
line-height: 1.2;
}
.info-detail .info-num span {
font-size: 40px !important;
}
.info-detail .info-note {
font-size: 22px !important;
color: #666;
}
/* kyoutuu */
/* .info-item {
justify-content: center;
gap: 20px;
}
.info-icon {
width: 80px;
height: 80px;
}
.info-detail {
text-align: left;
}
.info-detail .info-num {
font-size: 32px;
}
.info-detail .info-num span {
font-size: 18px;
} */
/* 法人実績 */
.statistics-accordion {
margin: 20px 15px 15px;
}
.statistics-card {
border-radius: 12px;
}
.statistics-button {
font-size: 35px !important;
padding: 15px 20px;
gap: 10px;
}
.statistics-button .toggle-icon::before {
font-size: 30px !important;
}
.statistics-row {
grid-template-columns: 1fr;
font-size: 28px !important;
gap: 5px;
padding: 20px;
}
.treatment-name {
font-size: 32px !important;
font-weight: bold;
}
.stat-label {
font-size: 28px !important;
color: #666;
}
.stat-value {
font-size: 38px !important;
}
/* info */
#info {
margin-top: 0;
}
#info > .container {
width: 100%;
display: flex;
flex-direction: column;
padding: 0 40px 31px;
}
#info > .container > .main {
width: 100%;
}
#info > .container > .main > .box {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
padding: 45px 35px 30px;
border-radius: 21px;
}
#info > .container > .main > .box > .tit {
display: flex;
line-height: 1.5;
padding-bottom: 27px;
border-bottom: 2px solid #bbdaec;
flex-direction: column;
text-align: center;
margin: 0px 4px 36px;
}
#info > .container > .main > .box > p:first-child {
font-size: 0.9rem;
text-align: center;
}
#info > .container > .main > .box > .tit > .ja {
font-size: 50px;
}
#info > .container > .main > .box > .tit > .en {
font-size: 28px;
display: flex;
margin-top: -10px;
margin-left: 3px;
letter-spacing: 4px;
justify-content: center;
}
#info > .container > .main > .box > .feed {
flex: 0 0 auto;
width: 100%;
padding-right: 28px;
max-height: 712px;
overflow-y: scroll;
}
#info > .container > .main > .box > .feed dl {
padding-left: 0;
display: flex;
flex-wrap: wrap;
}
#info > .container > .main > .box > .feed dl dt {
width: 100%;
padding: 0 10px 8px 25px;
letter-spacing: 1px;
}
#info > .container > .main > .box > .feed dl dd {
width: 100%;
padding: 0 2px 32px 27px;
line-height: 2;
}
#info > .container > .main > .box > .feed dl dd a {
color: #000;
text-decoration: none;
}
#info > .container > .main > .box > .feed dl dd a:hover {
text-decoration: underline;
}
#info > .container > .main > .box > .feed .os-scrollbar {
padding: 0;
}
#info > .container > .main > .box > .feed .os-scrollbar-vertical {
width: 19px;
right: 5px;
top: 0;
bottom: 6px;
}
#info > .container > .main > .box > .feed .os-scrollbar-track,
#info > .container > .main > .box > .feed .os-scrollbar-handle {
border-radius: 40px;
}
#info > .container > .main > .box.blog {
margin-top: 80px;
}
#info > .container > .main > .box.blog > .title {
position: relative;
}
#info > .container > .main > .box.blog > .title > .tit {
border-bottom: 2px solid #f76a84;
line-height: 1.5;
margin-bottom: 36px;
flex-direction: column;
text-align: center;
padding-bottom: 32px;
margin: 0px 4px 36px;
}
#info > .container > .main > .box.blog > .title > .tit > .ja {
font-size: 50px;
}
#info > .container > .main > .box.blog > .title > .tit > .en {
font-size: 28px;
display: flex;
margin-top: -10px;
margin-left: 3px;
letter-spacing: 4px;
justify-content: center;
}
#info > .container > .main > .box.blog > .feed {
max-height: 712px;
}
#info > .container > .main > .box.blog > a {
display: block;
text-decoration: none;
text-align: center;
padding-top: 23px;
padding-bottom: 38px;
}
#info > .container > .sub {
flex: 0 0 auto;
width: 100%;
margin-left: 0;
margin-top: 63px;
}
#info > .container > .sub > p:first-child {
font-size: 0.9rem;
}
#info > .container > .sub > .tit {
line-height: 1.5;
padding-bottom: 27px;
margin-bottom: 0px;
padding-left: 67px;
margin-top: 0px;
}
#info > .container > .sub > .tit > .ja {
font-size: 50px;
color: #222;
}
#info > .container > .sub > .tit > .en {
font-size: 28px;
display: flex;
margin-top: 17px;
margin-left: 30px;
letter-spacing: 4px;
color: #ffdc00;
}
#info > .container > .sub > .calendar {
background-color: #ffffff;
border-radius: 20px 20px 0px 0px;
overflow: hidden;
}
#info > .container > .sub > .calendar .listTab {
display: flex;
}
#info > .container > .sub > .calendar .listTab li {
flex: 0 1 50%;
}
#info > .container > .sub > .calendar .listTab li a {
display: block;
height: 90px;
line-height: 85px;
font-size: 1.8125rem;
}
#info > .container > .sub > .calendar .listTab li a > span {
font-size: 0.875rem;
font-weight: bold;
}
#info > .container > .sub > .calendar .listTab li a::before {
width: 120px;
border-bottom: 2px dashed #fff;
}
#info > .container > .sub > .calendar .listTab li a[aria-selected='true'] {
background-color: #ffdc00;
color: #000;
pointer-events: none;
}
#info > .container > .sub > .calendar .calendarIn {
position: relative;
padding: 0 82px 53px 76px;
}
#info > .container > .sub > .calendar .calendarIn::before {
height: 99px;
}
#info > .container > .sub > .calendar .calendarIn::after {
width: calc(100% - 166px);
height: 2px;
}
#info > .container > .sub > .calendar .calendarIn .boxContents {
display: none;
transition: opacity 0.3s;
}
#info > .container > .sub > .calendar .calendarIn .boxContents[aria-hidden='false'] {
display: block;
opacity: 1;
}
#info > .container > .sub > .calendar .calendarIn .boxContents.leave,
#info > .container > .sub > .calendar .calendarIn .boxContents.enter {
opacity: 0;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table {
width: 100%;
border-collapse: separate;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table thead th {
color: #000;
font-size: 0.9375rem;
position: relative;
height: 114px;
padding-bottom: 12px;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody td {
font-size: 0.9375rem;
height: 76px;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .close::before {
width: 60px;
height: 60px;
top: 7px;
left: 7px;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .crd {
color: #fff;
}
#info > .container > .sub > .calendar .calendarIn .boxContents table tbody .crd::before {
width: 60px;
height: 60px;
top: 7px;
left: 7px;
}
#info > .container > .sub > .calendar ~ p {
padding-left: 50px;
font-size: 0.875rem;
border-radius: 0 0 20px 20px;
padding: 32px 55px 32px 144px;
}
#info > .container > .sub > .calendar ~ p span.close {
width: 34px;
height: 34px;
background-color: #f76a84;
top: 41px;
left: 99px;
}
}
@media (min-width: 751px) and (max-width: 1490px) {
#mainVisual > .container > .title {
width: 100%;
}
}
@media (min-width: 751px) and (max-width: 1399px) {
#mainVisual > .container > .deco,
#mainVisual > .container > .decoAnima {
width: 100%;
}
#mainVisual > .container > .deco > span:nth-child(4),
#mainVisual > .container > .decoAnima > span:nth-child(4) {
right: 634px;
}
#mainVisual > .container > .deco > span:nth-child(5),
#mainVisual > .container > .decoAnima > span:nth-child(5) {
right: 611px;
}
#topic > .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic > .num {
top: -59px;
left: -14px;
top: -20px;
font-size: 5.625rem;
}
#topic > .container > .boxIn > .ui_list_pic .ui_list_step01_img > li > .pic > .num > span {
margin-left: 7px;
font-size: 3.2rem;
}
}
@media (min-width: 751px) and (max-width: 1627px) {
#feature > .container {
width: 100%;
}
#feature > .container > .list > li:nth-child(2) > .pic,
#feature > .container > .list > li:nth-child(3) > .pic,
#feature > .container > .list > li:nth-child(4) > .pic,
#feature > .container > .list > li:nth-child(6) > .pic,
#feature > .container > .list > li:nth-child(7) > .pic,
#feature > .container > .list > li:nth-child(8) > .pic {
height: auto;
}
#feature > .container > .list > li:nth-child(2) > .pic > picture,
#feature > .container > .list > li:nth-child(3) > .pic > picture,
#feature > .container > .list > li:nth-child(4) > .pic > picture,
#feature > .container > .list > li:nth-child(6) > .pic > picture,
#feature > .container > .list > li:nth-child(7) > .pic > picture,
#feature > .container > .list > li:nth-child(8) > .pic > picture {
width: 90%;
}
#feature > .container > .list > li:nth-child(2) > .pic img,
#feature > .container > .list > li:nth-child(3) > .pic img,
#feature > .container > .list > li:nth-child(4) > .pic img,
#feature > .container > .list > li:nth-child(6) > .pic img,
#feature > .container > .list > li:nth-child(7) > .pic img,
#feature > .container > .list > li:nth-child(8) > .pic img {
width: 100%;
}
#feature > .container > .list > li:nth-child(2) > .txt,
#feature > .container > .list > li:nth-child(3) > .txt,
#feature > .container > .list > li:nth-child(4) > .txt,
#feature > .container > .list > li:nth-child(6) > .txt,
#feature > .container > .list > li:nth-child(7) > .txt,
#feature > .container > .list > li:nth-child(8) > .txt {
padding: 0 8.57142857142857% 30px;
}
#feature > .container > .list > li:nth-child(2) > .txt > .tit,
#feature > .container > .list > li:nth-child(3) > .txt > .tit,
#feature > .container > .list > li:nth-child(4) > .txt > .tit,
#feature > .container > .list > li:nth-child(6) > .txt > .tit,
#feature > .container > .list > li:nth-child(7) > .txt > .tit,
#feature > .container > .list > li:nth-child(8) > .txt > .tit {
padding-right: 0;
}
}
@media (min-width: 751px) and (max-width: 1259px) {
#feature > .container > .list > li:nth-child(1),
#feature > .container > .list > li:nth-child(9) {
width: 100%;
}
#feature > .container > .list > li:nth-child(1) > .txt,
#feature > .container > .list > li:nth-child(9) > .txt {
padding-right: 6.26984126984127%;
}
#feature > .container > .list > li:nth-child(1) > .pic > picture,
#feature > .container > .list > li:nth-child(9) > .pic > picture {
width: 88.57142857142857%;
right: 19.04761904761905%;
}
#feature > .container > .list > li:nth-child(1) > .pic img,
#feature > .container > .list > li:nth-child(9) > .pic img {
width: 100%;
}
#feature > .container > .list > li:nth-child(5) {
width: 100%;
}
#feature > .container > .list > li:nth-child(5) > .txt {
padding-left: 6.26984126984127%;
}
#feature > .container > .list > li:nth-child(5) > .pic > picture {
width: 88.57142857142857%;
left: 19.04761904761905%;
}
#feature > .container > .list > li:nth-child(5) > .pic img {
width: 100%;
}
}
@media (min-width: 751px) and (max-width: 1205px) {
#feature > .container > .list > li:nth-child(2) > .txt > .tit,
#feature > .container > .list > li:nth-child(3) > .txt > .tit,
#feature > .container > .list > li:nth-child(4) > .txt > .tit,
#feature > .container > .list > li:nth-child(6) > .txt > .tit,
#feature > .container > .list > li:nth-child(7) > .txt > .tit,
#feature > .container > .list > li:nth-child(8) > .txt > .tit {
font-size: 1.3rem;
}
}
@media (min-width: 751px) and (max-width: 1689px) {
#topic > .container > .boxIn {
width: 100%;
}
#topic > .container > .boxIn > .list > .listTopic {
margin-left: 14.83825597749648%;
}
#topic > .container > .boxIn > .list > .listTopic > li {
width: 50.849%;
}
#topic > .container > .boxIn > .list > .listTopic > li > .text {
width: 100%;
padding-right: 30px;
}
#topic > .container > .boxIn > .ui_list_pic {
width: 41.91279887482419%;
}
#topic > .container > .boxIn > .ui_list_pic > .ui_list_step01_img > li > .pic {
width: 100%;
}
#topic > .container > .boxIn > .ui_list_pic > .ui_list_step01_img > li > .pic img {
width: 100%;
}
}
@media (min-width: 751px) and (max-width: 1199px) {
#topic > .container > .boxIn > .indicator {
left: -19px;
}
}
@media (min-width: 751px) and (max-width: 1220px) {
#menu > .container > .title {
margin-left: 0px;
}
}
/* 社会貢献活動ニュース欄のスタイル */
#info {
background: #f8f9fa;
padding: 80px 0;
position: relative;
}
.news-header {
text-align: center;
margin-bottom: 60px;
}
.news-main-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.news-card {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.news-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.news-grid {
grid-template-columns: 1fr;
gap: 25px;
}
}
/* レスポンシブ対応 */
@media (max-width: 480px) {
.statistics-button {
font-size: 35px !important;
padding: 15px 20px;
}
.statistics-row {
grid-template-columns: 1fr;
padding: 20px;
font-size: 28px !important;
gap: 10px;
}
.stat-value {
font-size: 38px !important;
}
.treatment-name {
font-size: 32px !important;
}
.stat-label {
font-size: 28px !important;
}
/* h2見出し pタグ内テキスト（「きらり大森歯科」等）SP用 */
/* .tit > p {
font-size: 40px;
}
#time > .title {
font-size: 40px;
} */
}