@charset "utf-8";



.fv {
    /* border: 2px solid red; */
    position: relative;
    padding: 180px 80px 100px;
}


/* 上部のキャッチコピーと画像のエリア */
.fv-inner {
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* 左側：キャッチコピー */
.fv-catch {
    flex: 1;
    padding-top: 20px;
    padding-left: 40px;
}

.fv-catch h1 {
    line-height: 2;
    font-weight: normal;
    letter-spacing: 0.10em;
    font-size: 32px;
}


.fv-flower-icon {
    /* border: 2px solid red; */
    width: 250px;
    height: 200px;
    margin-top: 40px;


}


/* ★花のあしらい全体のスタイル */
.flower-deco-right {
    position: absolute;
    right: -40px;
    /* 右側へのはみ出し具合（数値を大きくするとさらに右へ） */
    bottom: 0px;
    /* 下側へのはみ出し具合（数値を大きくするとさらに下へ） */
    z-index: 10;
    /* 写真やコンテンツより手前に重ねる */
    pointer-events: none;
    /* 万が一リンクやボタンに重なってもクリックを邪魔しない設定 */
}

/* 花の画像サイズ調整 */
.flower-deco-right img {
    width: 350px;
    /* 画像の大きさ（見栄えに合わせて調整してください） */
    height: auto;
    display: block;
    transform: rotate(-20deg);
}



/* 右側：メイン画像（角丸と左下の切り欠き） */
.fv-image {
    flex: 2;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.fv-image img {

    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 下部：診療時間カレンダーの配置 */

.fv-calendar {
    /* border: 2px solid red; */
    max-width: 1400px;
    margin: 0 auto;

}

.calendar-inner {
    /* border: 2px solid red; */
    margin-top: -170px;
    bottom: 50px;
    left: 150px;
    background-color: #FFFDF6;
    border-radius: 20px;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 20px;
    z-index: 999;

}

/* カレンダーのテーブル風レイアウト（Grid） */
.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.calendar-grid dl {
    display: grid;
    grid-template-columns: 140px repeat(7, 40px);
    /* 時間軸と各曜日の幅 */
    align-items: center;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #dcd1c4;
    /* 区切り線 */
}

/* 一番上の行は上線なし、2行目以降に線を引くための調整 */
.calendar-grid dl:first-child {
    border-bottom: 1px solid #dcd1c4;
}

.calendar-grid dl:last-child {
    border-bottom: none;
}

.calendar-grid dt,
.calendar-grid dd {
    /* border: 2px solid red; */
    margin: 0;
    text-align: center;
    font-size: 15px;
}

/* 曜日の行のテキスト装飾 */
.calendar-grid dl:first-child dt,
.calendar-grid dl:first-child dd {
    font-size: 14px;
}

/* 時間のテキスト */
.calendar-grid dt.time {
    font-size: 15px;
    letter-spacing: 0.05em;
}

.calendar-grid dd.icon-maru {
    color: #84B9CB;
    font-size: 16px;
}

.calendar-grid dd.icon-batu {
    font-size: 14px;
}






.sec-news {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 100px;
}

.left {
    /* border: 2px solid red; */
    padding-right: 50px;
    padding-top: 10px;
}

.news-title p {
    padding-bottom: 20px;

}

.news-inner {
    display: flex;
}

.news-text {
    display: flex;
}

.news-text p {
    padding-right: 20px;
    padding-left: 20px;
}

.right-textbox {
    display: flex;
    border-radius: 40px;
    display: block;
    width: 750px;
    padding: 15px;
    box-sizing: border-box;
    border: 2px solid #84B9CB;
    background: #FFFDF6;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
}





.service-icon {
    /* border: 2px solid red; */
    text-align: center;
    margin-top: 100px;
    margin-bottom: -260px;

}

.service-icon img {
    /* border: 2px solid red; */
    width: 112px;
    height: 131px;
    /* 画像の表示サイズをお好みで調整 */
    height: auto;
}



.sec-service {
    /* border: 2px solid red; */
    max-width: 100%;
    /* margin: 300px auto 150px; */
    padding-top: 200px;
    margin-top: 200px;

    /* 上から下へ向かうグラデーション */
    background: linear-gradient(to bottom,
            rgba(132, 185, 203, 0.15) 0%,
            /* 0%の位置：透過度15% */
            rgba(132, 185, 203, 0.10) 12%,
            /* 12%の位置：透過度10% */
            rgba(132, 185, 203, 0) 100%
            /* 100%の位置：透過度0%（完全に透明） */
        );


    padding-bottom: 100px;
    clip-path: ellipse(120% 100% at 50% 100%);
}







.service-title {
    text-align: center;
    padding-bottom: 80px;
}



.service-con {
    /* border: 2px solid red; */
    max-width: 1200px;
    margin: 100px auto;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;

}

.service-con-rev {
    /* border: 2px solid red; */
    max-width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.service-text {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 10px 50px;
    width: 30%;

}

.sec-feature {
    max-width: 1200px;
    margin: 0 auto;
}

.service-visual01 img {
    /* border: 2px solid red; */
    border-radius: 20px;
    width: 400px;
    height: 300px;
}




.sec-feature {
    /* border: 2px solid red; */
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-title {
    text-align: center;
    padding-bottom: 50px;
}

.feature-con {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 50px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;

}


.feature-card img {
    border-radius: 20px;
}

.feature-num {
    margin-bottom: -40px;
    z-index: 100;
}

.feature-text {
    padding-top: 10px;
    text-align: center;
}

.feature-text p {
    line-height: 1.15;
}


.sec-greeting {
    /* border: 2px solid red; */
    max-width: 100%;
    margin: 50px auto;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;

}


.greeting-con {
    /* border: 2px solid red; */
    max-width: 1200px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}



.greeting-title {
    text-align: center;
    padding-bottom: 80px;

}

.greeting-con h3 {
    /* border: 2px solid red; */
    line-height: 1.8;
    padding-bottom: 40px;
}

.greeting-con p {
    /* border: 2px solid red; */
    line-height: 1.6;
    padding-bottom: 40px;
}



.greeting-visual01 img {
    /* border: 2px solid red; */
    width: 400px;
    height: 440px;
    border-radius: 20px;
}





.sec-contact {
    /* border: 2px solid red; */
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 200px;
    margin-top: 200px;

    /* 上から下へ向かうグラデーション */
    background: linear-gradient(to bottom,
            rgba(132, 185, 203, 0.15) 0%,
            /* 0%の位置：透過度15% */
            rgba(132, 185, 203, 0.10) 12%,
            /* 12%の位置：透過度10% */
            rgba(132, 185, 203, 0) 100%
            /* 100%の位置：透過度0%（完全に透明） */
        );


    padding-bottom: 100px;
    clip-path: ellipse(120% 100% at 50% 100%);
}


.flower-icon {
    /* border: 2px solid red; */
    text-align: center;
    margin-top: 100px;
    margin-bottom: -260px;

}

.flower-icon img {
    /* border: 2px solid red; */
    width: 150px;
    height: 120px;
    /* 画像の表示サイズをお好みで調整 */
    height: auto;
}





.contact-title {
    text-align: center;
    padding-bottom: 100px;
}


.contact-con {
    width: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;

}


.contact-card {
    width: 250px;
    height: 250px;
    box-sizing: border-box;
    background: #FFFDF6;
    border: 8px solid #84B9CB;
    border-radius: 40px;
    overflow: hidden;
    transition: transform 0.4s ease;
}


.contact-card a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 縦方向の中央寄せ */
    align-items: center;
    /* 横方向の中央寄せ */
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 丸いアイコンエリア */
.contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    background: #E5EFED;
    border-radius: 50%;
    margin-bottom: 15px;
}

.contact-icon img {
    width: 45px;
}


.contact-text {
    font-size: 16px;
    padding-top: 10px;
    line-height: 1.4;
    text-align: center;
}


.phone-number {
    font-size: 28px;
    color: #84B9CB;
    margin: 0;
}

.contact-con :hover {
    transform: scale(1.02);
}


.map {
    /* border: 2px solid red; */
    width: 1100px;
    max-width: 90%;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;


}


.map .map-box {
    position: relative;
    width: 100%;
    padding-top: 34.4%;
    height: 0;


}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;

}