@charset "UTF-8";
/* ============================================================
   沖縄Fun 追加スタイル
   ・既存CSS(fun.css / fun_2024-modi.css 等)は変更せず、この1枚に追記する
   ・既存クラスを単体で再定義しないよう、すべて追加した修飾クラスの配下に限定している
   ============================================================ */

/* ------------------------------------------------------------
   関連サイトバナー(おきなわ物語 / 沖縄しまさんぽ)
   ------------------------------------------------------------ */
.p-fun-section--bnr.p-fun-section--bnr-logos {
    margin-top: 0;             /* 既存の .p-fun-section--bnr { margin-top: 7rem } を打ち消す(前セクションの margin-bottom で足りるため) */
}
.p-fun-bnr-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
    padding: 16px 16px 48px;
}
.p-fun-bnr-logos__item {
    display: block;
    width: 380px;              /* 2つとも同じ幅に揃える */
    line-height: 0;
}
.p-fun-bnr-logos__item img {
    width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .p-fun-bnr-logos {
        flex-direction: column;
        gap: 32px;
        padding: 8px 16px 32px;
    }
    .p-fun-bnr-logos__item {
        width: 80%;            /* 画面幅に応じて縮む(375px の端末で約 300px) */
        max-width: 380px;      /* PC と同じ幅を上限にして、段落ち直後に急に小さくならないようにする */
    }
}

/* ------------------------------------------------------------
   「沖縄Funとは」ダイアログ
   ------------------------------------------------------------ */

/* 開くボタン */
.p-fun-about-btn-wrap {
    display: flex;
    justify-content: center;
    padding: 0 16px 24px;
}

/* このダイアログは .p-fun-content の外(body直下)に置くため、
   既存CSSが参照している変数をここで定義する(タイトルバーの背景色・×印の色) */
.c-fun-modal-about {
    --c-blue: #216DBA;
}

/* ヘッダー(タイトルバー・×ボタン)は固定し、本文だけスクロールさせる
   dialog は閉じている間 display:none なので、必ず [open] 付きで指定する */
.c-fun-modal-about[open] {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}
.c-fun-modal-about .c-fun-modal-emotion__innr {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.c-fun-modal-about .c-fun-modal-emotion-close,
.c-fun-modal-about .c-fun-modal-emotion__ttl {
    flex: 0 0 auto;                 /* ヘッダーは縮まない・スクロールしない */
}
/* ×ボタンを少し小さくし、右端に余白をとる */
.c-fun-modal-about .c-fun-modal-emotion-close__btn {
    top: 6px;
    right: 12px;
    width: 28px;
    height: 28px;
}
/* タイトルが×ボタンに重ならないよう右側を空ける */
.c-fun-modal-about .c-fun-modal-emotion__ttl {
    padding-right: 52px;
}
.c-fun-modal-about .c-fun-modal-emotion__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 端まで来ても背景にスクロールを伝播させない */
    background-color: #f4f8fb;      /* 地色を薄く敷き、白いカードでセクションを区切る */
    text-align: left;
}
.c-fun-modal-about .c-fun-modal-emotion__body p {
    margin-bottom: 12px;
    line-height: 1.8;
}
/* ダイアログ表示中は背景をスクロールさせない
   既存スクリプトが body を触っていても衝突しないよう html 側に付ける */
html.is-fun-about-open {
    overflow: hidden;
}

/* リード文 */
.c-fun-modal-about .c-fun-about__lead {
    margin-bottom: 8px;
    font-size: 1.5rem;
    line-height: 1.8;
}

/* セクションはカードで囲んで区切りを明確にする */
.c-fun-modal-about .c-fun-about-sec {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #dbe6ef;
    border-radius: 12px;
    background-color: #fff;
}

/* 見出し。ボタンと紛らわしくならないよう丸ボタン風にはせず、アイコンを添えて区別する */
.c-fun-modal-about .c-fun-about__ttl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #dbe6ef;
    color: #333;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
}
.c-fun-modal-about .c-fun-about__ttl-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}
/* SVGごとに余白の取り方が違うため、枠いっぱいに収めて大きさを揃える */
.c-fun-modal-about .c-fun-about__ttl-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 虫めがねは線が細いので少しだけ小さくして、カメラと見た目の重さを揃える */
.c-fun-modal-about .c-fun-about__ttl-icon--search img {
    width: 82%;
    height: 82%;
}
.c-fun-modal-about .c-fun-about__catch {
    margin-bottom: 16px;
    padding-left: 38px;             /* 見出しのアイコン幅に合わせる */
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--c-blue);
}
.c-fun-modal-about .c-fun-about__sub {
    margin: 16px 0 8px;
    font-weight: bold;
}

/* 投稿はかんたん！3ステップ */
.c-fun-modal-about .c-fun-about-steps {
    counter-reset: fun-step;
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.c-fun-modal-about .c-fun-about-steps__item {
    position: relative;
    margin-bottom: 8px;
    padding-left: 34px;
    line-height: 1.6;
}
.c-fun-modal-about .c-fun-about-steps__item::before {
    counter-increment: fun-step;
    content: counter(fun-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #006dba;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
}

/* 何を投稿しよう？ */
.c-fun-modal-about .c-fun-about-list {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #f4f8fb;
}
.c-fun-modal-about .c-fun-about-list__item {
    position: relative;
    padding-left: 16px;
    line-height: 1.9;
}
.c-fun-modal-about .c-fun-about-list__item::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #006dba;
}

/* CTAボタン(sticky nav の見た目を流用)
   sticky nav は横幅いっぱい前提なので、ダイアログ内では中身に合わせた幅にする */
.c-fun-modal-about .c-fun-about-cta {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.c-fun-modal-about .c-fun-sticky-nav-anch {
    width: auto;
    min-width: 240px;
    max-width: 100%;
    padding: 4px 20px 4px 12px;
    column-gap: 10px;
}
.c-fun-modal-about .c-fun-sticky-nav-anch__icon {
    width: 28px;
}
.c-fun-modal-about .c-fun-sticky-nav-anch-txt {
    margin: 0;
    font-size: 1.8rem;
    row-gap: 2px;
}
/* 狭い画面でも「あなたのおすすめを」と矢印を出す(sticky nav では非表示になる) */
.c-fun-modal-about .c-fun-sticky-nav-anch-txt__catch,
.c-fun-modal-about .c-fun-sticky-nav-anch__arrow {
    display: block;
}
.c-fun-modal-about .c-fun-sticky-nav-anch__arrow {
    width: 14px;
    margin-left: 4px;
}

/* 投稿を見る */
.c-fun-modal-about .c-fun-about-feat {
    margin: 0;
}
.c-fun-modal-about .c-fun-about-feat__term {
    margin-top: 12px;
    font-weight: bold;
}
.c-fun-modal-about .c-fun-about-feat__data {
    margin: 0 0 4px;
    padding-left: 12px;
    line-height: 1.8;
}
.c-fun-modal-about .c-fun-about-feat__data b {
    color: #006dba;
}

/* QRコード */
.c-fun-about-qr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #dbe6ef;
    border-radius: 12px;
    background-color: #fff;
}
.c-fun-about-qr__img {
    flex: 0 0 auto;
    line-height: 0;
}
.c-fun-about-qr__img img {
    width: 100px;
    height: auto;
}
.c-fun-about-qr__cap {
    font-size: 1.4rem;
}