/* ===================================================
   kerama-charm.css
   ケラマ諸島の魅力ページ（SP ベース + PC メディアクエリ）
   =================================================== */


/* ===== ページ共通 ===== */
.kc-page {
    overflow-x: clip;
}


/* =====================================================
   Hero
   SP: h=450px (y=0 からヘッダー含む) / テキスト top:103px
   PC: h=710px (80px ヘッダー + 630px 画像)  / テキスト top:168px
   ===================================================== */
.kc-hero {
    position: relative;
    height: min(120vw, 450px);
    overflow: hidden;
}

.kc-hero picture {
    position: absolute;
    inset: 0;
    display: block;
}

.kc-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kc-hero__content {
    position: absolute;
    top: 103px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* SP_h2 + グラデーションテキスト */
.kc-hero__title {
    font-family: var(--sub-font);
    font-size: var(--fs-22);
    font-weight: 700;
    line-height: 33px;
    background: var(--bg_gd-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kc-hero__desc {
    font-family: var(--sub-font);
    font-size: var(--fs-18);
    font-weight: 700;
    line-height: 38px;
    color: #fff;
    text-shadow: 0 0 4px rgba(8, 60, 101, 1);
}


/* =====================================================
   Islands（島々の紹介）
   .kc-islands は Hero の直後から開始
   .kc-islands__bg は section 内に絶対配置
   SP: BG top=136px（= y586 - y450）
   ===================================================== */
.kc-islands {
    position: relative;
    overflow: visible;
}

/* セクション境界のウェーブ（ヒーローと重ねる） */
.kc-islands__wave {
    position: relative;
    z-index: 2;
    line-height: 0;
}

.kc-islands__wave--top {
    margin-top: min(-15vw, -56px);
}

.kc-islands__wave-img {
    display: block;
    width: 100%;
    height: min(19.2vw, 72px);
    object-fit: fill;
}

.kc-islands__wave--bottom {
    margin-bottom: -1px;
}

.kc-islands__bg {
    position: absolute;
    top: 136px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.kc-islands__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kc-islands__overlay {
    position: absolute;
    inset: 0;
    background: rgba(228, 252, 255, 0.88);
}

/* 水中のカースティクス風（キャプチャのうっすら白い揺らぎ） */
.kc-islands__texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: soft-light;
    background:
        radial-gradient(ellipse 100% 70% at 18% 22%, rgba(255, 255, 255, 0.55) 0%, transparent 45%),
        radial-gradient(ellipse 80% 55% at 88% 58%, rgba(255, 255, 255, 0.4) 0%, transparent 42%),
        radial-gradient(ellipse 60% 45% at 52% 88%, rgba(255, 255, 255, 0.28) 0%, transparent 38%);
}

/* ---- SP: island-bg-sp.png を全面背景（ウェーブ形状は画像内・透過部は下にヒーロー等） ---- */
@media (max-width: 767px) {

    /* 仮SVGウェーブは PNG と二重になるため非表示 */
    .kc-islands__wave {
        display: none;
    }

    .kc-islands__bg {
        top: 0;
        /* 画像より下に広がる領域を単色で埋めない（透過で直下＝ボディ色へ。水色の帯を防ぐ） */
        background-color: transparent;
        background-image: url('../images/kerama-charm/island-bg-sp.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
    }

    .kc-islands__bg-picture,
    .kc-islands__bg-img {
        display: none;
    }

    /* PNG にトーン・カースティクスが含まれるためオーバーレイ・追加テクスチャはオフ */
    .kc-islands__overlay,
    .kc-islands__texture {
        display: none;
    }
}

.kc-islands__inner {
    position: relative;
    z-index: 1;
}

/* パンくず（contact.html と同クラス・同見た目） */
.contact-breadcrumb-wrap {
    padding: min(4.2666666667vw, 16px) 0 min(6.4vw, 24px);
}

.contact-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-12);
    line-height: 1;
}

.contact-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-color);
    text-decoration: none;
}

.contact-breadcrumb__link:hover {
    text-decoration: underline;
}

.contact-breadcrumb__home-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.contact-breadcrumb__sep {
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1px solid var(--text-color);
    border-top: 1px solid var(--text-color);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.contact-breadcrumb__current {
    color: var(--text-color);
}

/* 島セクション内のパンくず位置調整（pages.css の .breadcrumb 上書きを置き換え） */
.kc-islands .contact-breadcrumb-wrap {
    padding-top: 24px;
    margin-bottom: 0;
}

/* 島カードリスト */
.kc-islands__list {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding-top: 96px;
    padding-bottom: 100px;
}

/* ---- 島カード（SP: 縦積み） ---- */
.kc-island-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kc-island-card__img-wrap {
    width: 100%;
    height: 253px;
    overflow: hidden;
    border-radius: 92px 0 0 0;
}

/* SP キャプチャ: 2枚目は右上を大きく丸める */
.kc-island-card--2 .kc-island-card__img-wrap {
    border-radius: 0 92px 0 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.kc-island-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kc-island-card__body {
    position: relative;
}

/* キャプチャ: テキスト左＋下の L字ライン（1px メイン系ブルー） */
.kc-island-card__text-wrap {
    position: relative;
    z-index: 1;
    padding: 0 16px 16px;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
}

/* Figma SP Frame456: 見出し〜本文 gap 16px */
.kc-island-card--2 .kc-island-card__text-wrap {
    gap: 16px;
}

/* SP_h2 グラデーション（Figma fill_3M40UU） */
.kc-island-card__title {
    font-family: var(--sub-font);
    font-size: var(--fs-22);
    font-weight: 700;
    line-height: 33px;
    background: linear-gradient(90deg, #02487f 3%, #32acc7 58%, #016fb8 91%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kc-island-card__text {
    font-family: var(--main-font);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 32px;
    color: var(--text-color);
}


/* =====================================================
   年間イベント ヘッダー
   SP: h=40px, bg=#EDF6FF, 左4px ボーダー メインカラー
   PC: h=48px
   ===================================================== */
.kc-events-header {
    margin-top: 120px;
    height: 40px;
    background: #EDF6FF;
    border-left: 4px solid var(--main-color);
    padding: 0 16px;
    display: flex;
    align-items: center;
}

.kc-events-header__title {
    font-family: var(--sub-font);
    font-size: var(--fs-22);
    font-weight: 700;
    line-height: 33px;
    background: var(--bg_gd-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* SP: island-bg-sp より下の水色埋めを防ぎ、年間イベント前の白隙間を抑える（ベース定義より後で上書き） */
@media (max-width: 767px) {
    .kc-islands__list {
        padding-bottom: 48px;
    }

    .kc-events-header {
        margin-top: 40px;
    }
}


/* =====================================================
   年間イベント リスト
   ===================================================== */
.kc-events__list {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding-top: 32px;
    padding-bottom: 80px;
}

/* ---- 各イベントエントリー ---- */

/* 月バッジ + テキスト の行（バッジ高さ＝右列の高さに揃える） */
.kc-event__row {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

/* 月バッジ */
.kc-event__badge {
    width: 85px;
    flex-shrink: 0;
    background: #EDF6FF;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 2px;
    align-self: stretch;
}

/* 1月ブロック：2行構成＋左の水色帯を縦に連続 */
.kc-event__multi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kc-event__multi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 85px;
    background: #EDF6FF;
    z-index: 0;
    pointer-events: none;
}

.kc-event__multi .kc-event__row {
    position: relative;
    z-index: 1;
}

/* ストライプ上のバッジ（二重背景を避ける） */
.kc-event__badge--on-stripe {
    background: transparent;
}

/* 下段：左ストライプを成人式ブロックの高さまで伸ばす（日付ラベルは上寄せのまま） */
.kc-event__row--multi-sub {
    align-items: stretch;
}

.kc-event__badge--subdate {
    padding: 5px 6px 12px 6px;
    justify-content: flex-start;
}

.kc-event__badge--subdate .kc-event__detail {
    margin: 0;
    line-height: 30px;
}

.kc-event__month-row {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.kc-event__num {
    font-family: var(--sub-font);
    font-size: var(--fs-30);
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
}

.kc-event__unit {
    font-family: var(--sub-font);
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
}

.kc-event__timing {
    font-family: var(--sub-font);
    font-size: var(--fs-14);
    font-weight: 400;
    color: var(--main-color);
    line-height: 1.4;
}

.kc-event__detail {
    font-family: var(--sub-font);
    font-size: var(--fs-14);
    font-weight: 400;
    color: var(--main-color);
    line-height: 1.4;
}

/* イベント内容（高さは本文に合わせ、水色バッジ側と見た目で揃える） */
.kc-event__content {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
}

.kc-event__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 同一月内の複数イベント同士の間隔 */
.kc-event__items--stack {
    gap: 32px;
}

.kc-event__items--stack > .kc-event__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 単月1ブロック内の見出し＋複数段落の縦方向の間隔 */
.kc-event__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 見出し直下が1段落だけの月（Figmaの4月など：タイトルと本文の間を詰める） */
.kc-event__item--tight-lead {
    gap: 4px;
}

.kc-event__title {
    font-family: var(--sub-font);
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 30px;
    color: var(--main-color);
}

.kc-event__desc {
    font-family: var(--main-font);
    font-size: var(--fs-14);
    font-weight: 400;
    line-height: 26px;
    color: var(--text-color);
    margin: 0;
}

/* イベント写真（バッジ+テキスト行の下）
   1枚でも2枚横並び時の各カラム幅と同じ（gap 分を引いた半分） */
.kc-event__photos {
    --kc-event-photo-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-event-photo-gap);
    margin-top: 24px;
}

.kc-event__photo {
    flex: 0 0 calc((100% - var(--kc-event-photo-gap)) / 2);
    width: calc((100% - var(--kc-event-photo-gap)) / 2);
    max-width: calc((100% - var(--kc-event-photo-gap)) / 2);
    aspect-ratio: 155 / 106;
    object-fit: cover;
    display: block;
}


/* =====================================================
   ケラマでしかできない体験（Initiatives）
   SP: position:relative, min-height:1169px
       散乱写真・円形フォト → absolute 配置
   ===================================================== */
.kc-initiatives {
    position: relative;
    min-height: 1169px;
    overflow: hidden;
    background: linear-gradient(180deg, #F5FBFF 0%, #EDFCFF 100%);
}

/* ---- 散乱ギャラリー写真（デコレーション） ---- */
.kc-initiatives__gallery {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.kc-initiatives__gal-img {
    position: absolute;
    object-fit: cover;
    display: block;
}

/* SP positions (Figma 座標) */
.kc-initiatives__gal-img--02 { top: 45px;  left: -52px; width: 120px; height: 61px; }
.kc-initiatives__gal-img--09 { top: 20px;  left: 277px; width: 124px; height: 57px; }
.kc-initiatives__gal-img--04 { top: 858px; left: 10px;  width: 90px;  height: 65px; }
.kc-initiatives__gal-img--03 { top: 813px; left: 314px; width: 87px;  height: 52px; }
.kc-initiatives__gal-img--08 { top: 998px; left: 171px; width: 145px; height: 128px; }
.kc-initiatives__gal-img--05 { top: 981px; left: 30px;  width: 151px; height: 119px; }
.kc-initiatives__gal-img--01 { top: 1069px; left: -28px; width: 116px; height: 114px; }
.kc-initiatives__gal-img--06 { top: 1101px; left: 79px;  width: 52px;  height: 69px; }
.kc-initiatives__gal-img--07 { top: 1131px; left: 126px; width: 36px;  height: 40px; }

/* ---- テキスト ---- */
.kc-initiatives__text {
    position: relative;
    z-index: 1;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* SP_h2 グラデーション */
.kc-initiatives__title {
    font-family: var(--sub-font);
    font-size: var(--fs-22);
    font-weight: 700;
    line-height: 33px;
    background: var(--bg_gd-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kc-initiatives__desc {
    font-family: var(--main-font);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 32px;
    color: var(--text-color);
}

/* ---- 円形フォト ---- */
.kc-initiatives__circles {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

/* SP: Ellipse 1 at x=20, y=594 / Ellipse 2 at x=181, y=843 */
.kc-initiatives__circle {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}

.kc-initiatives__circle--01 {
    top: 594px;
    left: 20px;
    width: 250px;
    height: 250px;
}

.kc-initiatives__circle--02 {
    top: 843px;
    left: 181px;
    width: 155px;
    height: 155px;
}

.kc-initiatives__circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- 鳥アイコン ---- */
.kc-initiatives__bird {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 28px;
    z-index: 1;
    pointer-events: none;
}


/* =====================================================
   PC メディアクエリ（min-width: 768px）
   ===================================================== */
@media (min-width: 768px) {

    /* ---- Hero ---- */
    /* PC: 80px ヘッダーエリア + 630px 画像 = 710px */
    .kc-hero {
        height: min(51.98vw, 710px);
    }

    .kc-hero__content {
        top: 168px;
        gap: 32px;
    }

    .kc-hero__title {
        font-size: clamp(1.375rem, 1.1rem + 0.4vw, 2rem);
        line-height: 1.5;
    }

    .kc-hero__desc {
        font-size: clamp(1.125rem, 0.9rem + 0.3vw, 1.5rem);
    }


    /* ---- Islands ---- */
    /* PC: BG top = 870 - 710 = 160px */
    .kc-islands__bg {
        top: 160px;
    }

    .kc-islands__inner {
        /* PC: パンくず y=1004 → section start(710) = 294px */
        padding-top: 294px;
    }

    .kc-islands .contact-breadcrumb-wrap {
        padding-top: 0;
        padding-bottom: min(1.46vw, 20px);
    }

    /* PC: 島カードリスト → フルwidth */
    .kc-islands__list {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
        gap: 0;
    }

    /* ---- 島カード（PC: 横並び） ---- */
    .kc-island-card {
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 60px 0;
    }

    /* Card 1: テキスト左 / 画像右 → row-reverse */
    .kc-island-card--1 {
        flex-direction: row-reverse;
    }

    .kc-island-card__img-wrap {
        width: min(38.8vw, 530px);
        height: min(29.3vw, 400px);
        flex-shrink: 0;
    }

    /* PC Figma: 2枚とも左上丸・ドロップシャドウなし */
    .kc-island-card--2 .kc-island-card__img-wrap {
        border-radius: 92px 0 0 0;
        box-shadow: none;
    }

    .kc-islands__wave--top {
        margin-top: min(-5.85vw, -80px);
    }

    .kc-islands__wave-img {
        height: min(5.27vw, 72px);
    }

    /* Card 1 body: 左側 */
    .kc-island-card--1 .kc-island-card__body {
        flex: 1;
        padding-left: min(18.9vw, 258px);
        padding-right: min(9.5vw, 130px);
        min-height: 0;
    }

    /* Card 2 body: 右側 */
    .kc-island-card--2 .kc-island-card__body {
        flex: 1;
        padding-left: min(9.5vw, 130px);
        padding-right: min(18.9vw, 258px);
        min-height: 0;
    }

    .kc-island-card__text-wrap {
        gap: 16px;
    }

    /* PC_h2: 24px / 36px */
    .kc-island-card__title {
        font-size: var(--fs-24);
        line-height: 36px;
        background: linear-gradient(90deg, #02487f 3%, #32acc7 58%, #016fb8 91%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .kc-island-card__text {
        font-size: var(--fs-16);
        line-height: 32px;
    }


    /* ---- 年間イベント ヘッダー ---- */
    .kc-events-header {
        margin-top: 161px;
        height: 48px;
    }

    .kc-events-header__title {
        font-size: clamp(1.375rem, 1.1rem + 0.4vw, 1.75rem);
    }


    /* ---- 年間イベント リスト ---- */
    .kc-events__list {
        padding-top: 56px;
        padding-bottom: 120px;
    }

    .kc-event__row {
        align-items: stretch;
    }

    .kc-event__badge {
        width: 100px;
        padding: 16px 0;
    }

    .kc-event__multi::before {
        width: 100px;
    }

    .kc-event__num {
        font-size: clamp(1.875rem, 1.5rem + 0.55vw, 2.5rem);
    }

    .kc-event__unit {
        font-size: clamp(1.25rem, 1.0rem + 0.3vw, 1.5rem);
    }

    .kc-event__title {
        font-size: clamp(1.25rem, 1.0rem + 0.3vw, 1.5rem);
    }

    .kc-event__desc {
        font-size: var(--fs-14);
    }

    .kc-event__photos {
        --kc-event-photo-gap: 32px;
        gap: 32px;
        margin-top: 32px;
    }

    .kc-event__photo {
        aspect-ratio: 155 / 106;
    }


    /* ---- Initiatives（PC） ---- */
    /* PC: section h=974px, text at x=183(section_space), circles at right */
    .kc-initiatives {
        min-height: 974px;
    }

    /* SP の散乱写真位置は PC で全て上書き */
    .kc-initiatives__gal-img--02 { top: 45px;  left: -52px;  width: 164px; height: 84px; }
    .kc-initiatives__gal-img--09 { top: 20px;  right: -70px; width: 170px; height: 78px; left: auto; }
    .kc-initiatives__gal-img--04 { top: 620px; left: -40px;  width: 130px; height: 93px; }
    .kc-initiatives__gal-img--03 { top: 590px; right: -30px; width: 120px; height: 71px; left: auto; }
    .kc-initiatives__gal-img--08 { top: 720px; left: 300px;  width: 200px; height: 176px; }
    .kc-initiatives__gal-img--05 { top: 700px; left: 60px;   width: 207px; height: 163px; }
    .kc-initiatives__gal-img--01 { top: 800px; left: -40px;  width: 160px; height: 157px; }
    .kc-initiatives__gal-img--06 { top: 830px; left: 115px;  width: 71px;  height: 95px; }
    .kc-initiatives__gal-img--07 { top: 860px; left: 173px;  width: 49px;  height: 55px; }

    /* テキスト: section_space（PC: x=183, w=413） */
    .kc-initiatives__text {
        padding-top: 205px;
        max-width: 413px;
    }

    .kc-initiatives__title {
        font-size: clamp(1.375rem, 1.1rem + 0.4vw, 1.75rem);
    }

    .kc-initiatives__desc {
        font-size: clamp(0.875rem, 0.7rem + 0.25vw, 1rem);
    }

    /* 円形フォト（PC）: circle-01 at page x=664, y=197 / circle-02 at x=939, y=392 */
    .kc-initiatives__circle--01 {
        top: 197px;
        left: min(48.6vw, 664px);
        width: min(28.7vw, 392px);
        height: min(28.7vw, 392px);
    }

    .kc-initiatives__circle--02 {
        top: 392px;
        left: min(68.7vw, 939px);
        width: min(17.9vw, 244px);
        height: min(17.9vw, 244px);
    }

    /* 鳥アイコン */
    .kc-initiatives__bird {
        bottom: 30px;
        width: 32px;
        height: 37px;
    }

}