/**
 * トップページ（front-page.php）専用CSS
 */

.section.topics {
    background: #edf6f9;
    border-bottom: 1px solid #b6ceda;
}

.front-page .section-head {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--teal);
}

.front-page .hero {
    padding: 36px 0;
    background: linear-gradient(180deg, #eef8fb 0%, #fff 86%);
}

.front-page h1 {
    margin-bottom: 14px;
}

.front-page h1 span {
    color: var(--teal);
}

.front-page .front-lead {
    font-weight: bold;
}

.front-page .front-lead span {
    color: var(--teal);
}

/* ---- ヒーロー: 右上の装飾グロー（カンプv15の premium polish） ---- */
.front-page .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.front-page .hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 143, 163, .12) 0%, rgba(0, 143, 163, .04) 46%, rgba(0, 143, 163, 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.front-page .hero .container {
    position: relative;
    z-index: 1;
}

.front-page .hero .eyebrow::before {
    animation: clEyebrowPulse 2.8s ease-in-out infinite;
}

@keyframes clEyebrowPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 143, 163, .32);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(0, 143, 163, 0);
    }
}

.front-page .cl-badge {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* ---- ヒーロー: フロントページに設定した固定ページのアイキャッチ画像 ---- */
.front-page .cl-hero-visual {
    position: relative;
    height: 210px;
    overflow: hidden;
    border: 2px solid var(--line-strong);
    border-radius: 20px;
    background: linear-gradient(145deg, #e7f5fb, #f7fbfd);
    box-shadow: 0 22px 46px rgba(18, 48, 91, .16), 0 4px 10px rgba(18, 48, 91, .08);
    animation: clHeroFloat 8s ease-in-out infinite;
}

@keyframes clHeroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-page .hero .eyebrow::before {
        animation: none;
    }

    .front-page .cl-hero-visual {
        animation: none;
    }
}

.front-page .cl-hero-visual-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front-page .cl-hero-visual-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 16px;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.front-page .cl-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.front-page .cl-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #36556e;
    font-size: 11px;
    font-weight: 800;
}

/* ---- KAKARTEとは ----
   本文段落は「リード文」ではないので.lead（ヒーロー用）は使わず、
   カンプの.text-section pに相当する専用スタイルを充てる。 */
.front-page .cl-about-text p {
    margin: 0 0 12px;
    color: #29445d;
    font-size: 14.5px;
    line-height: 1.9;
}

.front-page .cl-about-text p:last-child {
    margin-bottom: 0;
}

.front-page .cl-about-brand {
    margin: 26px 0;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--soft) 0%, #fff 100%);
}

.front-page .cl-about-brand-lead {
    max-width: none;
    margin: 0 auto 20px;
    color: #29445d;
    font-size: 12.5px;
    line-height: 1.75;
    text-align: center;
}

.front-page .cl-brand-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 220px));
    justify-content: center;
    gap: 14px;
}

.front-page .cl-brand-value {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 18px 16px 16px;
    border: 2px solid #bfd6df;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #f2f9fb 100%);
    box-shadow: 0 10px 20px rgba(18, 48, 91, .08), inset 0 0 0 8px rgba(255, 255, 255, .75);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.front-page .cl-brand-value::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid #dce9ef;
    border-radius: 50%;
    height: 6px;
    opacity: .35;
}

.front-page .cl-brand-value::after {
    content: "";
    position: absolute;
    inset: auto -16px -20px auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 143, 163, .16) 0%, rgba(0, 143, 163, .06) 48%, rgba(0, 143, 163, 0) 72%);
}

.front-page .cl-brand-index {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 24px;
    margin: 0 0 10px;
    padding: 0 8px;
    border: 1px solid #d8e6ed;
    border-radius: 999px;
    background: #fff;
    color: #728c9c;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
}

.front-page .cl-brand-value strong {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 0 8px;
    color: #102f59;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: .04em;
}

.front-page .cl-brand-value b {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef7fa;
    color: #006f7d;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.4;
}

.front-page .cl-brand-desc {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 20ch;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dfe8ed;
    color: #4f697c;
    font-size: 11px;
    line-height: 1.62;
}

.front-page .cl-brand-value:nth-child(1) {
    border-color: #b9dce4;
    background: linear-gradient(180deg, #fff 0%, #eef9fc 100%);
}

.front-page .cl-brand-value:nth-child(2) {
    border-color: #c8d6ee;
    background: linear-gradient(180deg, #fff 0%, #f3f6ff 100%);
}

.front-page .cl-brand-value:nth-child(3) {
    border-color: #c4dfcf;
    background: linear-gradient(180deg, #fff 0%, #f1faf5 100%);
}

.front-page .cl-brand-value:nth-child(4) {
    border-color: #ecd4c2;
    background: linear-gradient(180deg, #fff 0%, #fff6ef 100%);
}

.front-page .cl-brand-value:nth-child(1)::before {
    border-color: #d7eaef;
}

.front-page .cl-brand-value:nth-child(2)::before {
    border-color: #dbe3f2;
}

.front-page .cl-brand-value:nth-child(3)::before {
    border-color: #d7e9dc;
}

.front-page .cl-brand-value:nth-child(4)::before {
    border-color: #f0dfd3;
}

.front-page .cl-brand-value:nth-child(2)::after {
    background: radial-gradient(circle at center, rgba(68, 111, 190, .16) 0%, rgba(68, 111, 190, .06) 48%, rgba(68, 111, 190, 0) 72%);
}

.front-page .cl-brand-value:nth-child(3)::after {
    background: radial-gradient(circle at center, rgba(43, 133, 95, .16) 0%, rgba(43, 133, 95, .06) 48%, rgba(43, 133, 95, 0) 72%);
}

.front-page .cl-brand-value:nth-child(4)::after {
    background: radial-gradient(circle at center, rgba(236, 127, 40, .16) 0%, rgba(236, 127, 40, .06) 48%, rgba(236, 127, 40, 0) 72%);
}

.front-page .cl-brand-value:nth-child(2) b {
    background: #eff3ff;
    color: #385b95;
}

.front-page .cl-brand-value:nth-child(3) b {
    background: #eef8f1;
    color: #2b855f;
}

.front-page .cl-brand-value:nth-child(4) b {
    background: #fff3eb;
    color: #d97727;
}

.front-page .cl-about-cta {
    display: flex;
    width: max-content;
    margin: 22px auto 0;
    font-size: 12px;
}

@media (max-width: 1000px) {
    .front-page .cl-brand-values {
        grid-template-columns: repeat(2, minmax(0, 210px));
    }
}

@media (max-width: 640px) {
    .front-page .cl-about-brand {
        padding: 20px 16px;
    }

    .front-page .cl-brand-values {
        grid-template-columns: minmax(0, 250px);
    }
}

/* ---- KAKARTEが提供すること（4つの提供内容） ---- */
.front-page .cl-provision-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    padding: 30px 30px 34px;
    border: 1.5px solid var(--line-strong);
    border-radius: 14px;
    background: #f7fbfc;
}

.front-page .cl-provision-item {
    position: relative;
    min-width: 0;
    text-align: center;
}

.front-page .cl-provision-number {
    position: absolute;
    top: -5px;
    left: 4px;
    z-index: 2;
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.04em;
    transition: color .2s ease;
}

.front-page .cl-provision-icon {
    display: grid;
    width: 138px;
    height: 138px;
    margin: 18px auto 20px;
    place-items: center;
    border: 1.5px solid #d4e5ec;
    border-radius: 50%;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.front-page .cl-provision-icon svg {
    width: 62px;
    height: 62px;
    fill: none;
    stroke: var(--navy);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.front-page .cl-provision-copy h3 {
    min-height: 2.9em;
    margin: 0 0 9px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: .01em;
}

.front-page .cl-provision-copy p {
    max-width: 220px;
    margin: 0 auto;
    color: #405b72;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
}

@media (max-width: 950px) {
    .front-page .cl-provision-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }

    .front-page .cl-provision-copy h3 {
        min-height: auto;
    }
}

@media (max-width: 600px) {
    .front-page .cl-provision-list {
        grid-template-columns: 1fr;
        padding: 26px 20px 30px;
    }

    .front-page .cl-provision-item {
        max-width: 360px;
        margin: 0 auto;
    }

    .front-page .cl-provision-icon {
        width: 132px;
        height: 132px;
    }

    .front-page .cl-provision-copy p {
        max-width: 300px;
    }
}

/* ---- 受診前に読んでおきたい医療コラム（無限ループカルーセル） ---- */
/* overflow-xを効かせるとoverflow-yも暗黙的にautoへ計算され、ホバー時の
   translateY(-4px)とbox-shadowがカードの上下で見切れてしまう。
   paddingで内側にクリップ用の余白を確保し、同量のmarginで打ち消すことで
   周囲のレイアウト（前後の余白）は変えずに見切れだけを解消している。 */
.front-page .cl-column-carousel {
    position: relative;
    overflow-x: hidden;
    padding: 16px 12px 40px;
    margin: -16px -12px -40px;
}

.front-page .cl-column-track {
    display: flex;
    gap: 14px;
    will-change: transform;
    transition: transform .55s ease;
}

.front-page .cl-column-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 28px) / 3);
    min-width: 0;
    overflow: hidden;
    border: 1.5px solid var(--line-strong);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(18, 48, 91, .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.front-page .cl-column-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    box-shadow: 0 16px 30px rgba(18, 48, 91, .16);
}

.front-page .cl-column-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 845 / 494;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #eaf8fa, #f8fcfd);
}

.front-page .cl-column-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.front-page .cl-column-body {
    padding: 15px;
    flex: 1;
}

.front-page .cl-column-cat {
    display: inline-flex;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-dark);
    font-size: 10px;
    font-weight: 900;
}

.front-page .cl-column-card h3 {
    margin: 6px 0;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.55;
}

.front-page .cl-column-card p {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.65;
}

.front-page .cl-column-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 13px;
}

/* 表示件数以下しかカードがない場合（medical-column-carousel.js側でis-staticを付与）は
   スライドさせないため、件数表示・矢印ボタンごと隠す。
   .cl-column-controlsは.cl-column-carouselの子ではなく直後の兄弟要素なので
   隣接兄弟結合子（+）で参照する（子孫セレクタでは一致しない）。 */
.front-page .cl-column-carousel.is-static+.cl-column-controls {
    display: none;
}

.front-page .cl-carousel-status {
    margin-right: auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.front-page .cl-carousel-btn {
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--teal-dark);
    display: grid;
    place-items: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.front-page .cl-carousel-btn .cl-arrow {
    width: 8px;
    height: 8px;
}

.front-page .cl-carousel-btn .cl-arrow-left {
    transform: rotate(-135deg) translate(-1px, 1px);
}

.front-page .cl-carousel-btn .cl-arrow-right {
    transform: rotate(45deg) translate(-1px, 1px);
}

.front-page .cl-carousel-btn:hover {
    background: var(--teal-soft);
    border-color: var(--teal);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 143, 163, .18);
}

@media (max-width: 900px) {
    .front-page .cl-column-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}

@media (max-width: 760px) {
    .front-page .cl-column-card {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-page .cl-column-track {
        transition: none !important;
    }
}

/* ---- お問い合わせ ---- */
.front-page .cl-contact {
    padding-bottom: 44px;
}

.front-page .cl-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.front-page .cl-contact-card {
    position: relative;
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(18, 48, 91, .07);
    transition: transform .22s ease, box-shadow .22s ease;
}

.front-page .cl-contact-card-business {
    border-top: 5px solid var(--teal);
    background: linear-gradient(145deg, #f0fafc, #fff 55%);
}

.front-page .cl-contact-card-user {
    border-top: 5px solid var(--navy);
}

.front-page .cl-contact-label {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e9f1f5;
    color: var(--navy);
    font-size: 10.5px;
    font-weight: 900;
}

.front-page .cl-contact-card-business .cl-contact-label {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

.front-page .cl-contact-icon {
    position: absolute;
    top: 20px;
    right: 22px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 9px;
    background: #edf3f7;
    font-size: 19px;
    font-weight: 900;
    transition: transform .22s ease;
}

.front-page .cl-contact-icon::before {
    content: "";
    display: block;
    width: 45%;
    aspect-ratio: 1 / 1;
}

.front-page .cl-contact-card-user .cl-contact-icon::before {
    background: url(../img/icon-question.png) center center / contain no-repeat;
}

.front-page .cl-contact-card-business .cl-contact-icon::before {
    background: url(../img/icon-article.png) center center / contain no-repeat;

}

.front-page .cl-contact-card h3 {
    margin: 18px 0 8px;
    color: var(--navy);
    font-size: 18px;
}

.front-page .cl-contact-card p {
    margin: 0 0 20px;
    color: #405b72;
    font-size: 12.5px;
    line-height: 1.8;
}

.front-page .cl-contact-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    gap: 8px;
    margin-top: auto;
    padding: 0 16px;
    border: 1.5px solid var(--teal);
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.front-page .cl-contact-btn:hover {
    background: #eef3f7;
    border-color: var(--navy);
    color: var(--navy);
    box-shadow: var(--shadow-xs);
}

.front-page .cl-contact-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateX(-140%);
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 65%);
}

.front-page .cl-contact-btn:hover::after {
    transform: translateX(140%);
    background: linear-gradient(115deg, rgba(0, 143, 163, 0) 35%, rgba(0, 143, 163, .18) 50%, rgba(0, 143, 163, 0) 65%);

}


@media (max-width: 760px) {
    .front-page .cl-contact-grid {
        grid-template-columns: 1fr;
    }

    .front-page .cl-contact-card {
        min-height: 0;
    }

    .front-page .cl-contact-btn {
        width: 100%;
    }
}