@charset "UTF-8";

/* ========================================================
   1. 変数定義 (:root)
======================================================== */
:root {
    --color-main: #1A365D;
    --color-accent: #FFB746;
    --color-bg-base: #FFFBF9;
    --color-text: #333333;
    --font-ja: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-en: 'Source Sans Pro', sans-serif;
    --content-width: 1024px;
    --header-height: 80px;
    --header-height-sp: 200px;
}

/* ========================================================
   2. リセットCSS
======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
button { background: transparent; border: none; cursor: pointer; padding: 0; appearance: none; }

/* ========================================================
   3. ベーススタイル
======================================================== */
html { 
    scroll-behavior: smooth; 
    overflow-x: hidden; /* 追加：htmlタグレベルでも横スクロールを完全にブロック */
}
body {
    font-family: var(--font-ja);
    font-weight: 400; 
    color: var(--color-text);
    background-color: var(--color-bg-base);
    line-height: 1.6;
    font-size: 16px; 
    letter-spacing: 0.05em;
    overflow-x: hidden; 
}

/* 追加：mainタグ全体を囲い込み、はみ出した120%の背景をここでスパーンと切り落とす */
main {
    overflow: hidden;
    width: 100%;
}

h1, h3, h4, h5, h6 { font-weight: 700; }

h2 {
    color: #1A365D;
    font-size: 30px;
    font-weight: 700;
}

@media screen and (max-width: 600px) {
    h2 {
        font-size: clamp(20px, 5.5vw, 26px);
    }
}

body.is-drawer-open { overflow: hidden; }

/* ========================================================
   4. 共通パーツ・ユーティリティ
======================================================== */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.3s;
    text-align: center;
}
.c-btn:hover { opacity: 0.8; }

.c-btn--line {
    background-color: #1A365D;
    color: #fff;
}
.c-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 10px;
}
.c-btn__icon-inner {
    color: #1A365D;
    font-size: 10px;
    font-family: Arial, sans-serif;
}
.c-btnplus {
    font-weight:bold;
    color: var(--color-main);
    margin-top:10px;
    display:block;
}
.font-en {
    font-family: var(--font-en);
    font-weight: 900;
}

.l-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 40px;
}

@media screen and (max-width: 768px) {
    .l-container { padding: 0 20px; }
    body { font-size: 15px; }
}

/* ========================================================
   5. ヘッダー (Header) & ドロワーメニュー
======================================================== */
.header {
    width: 100%;
    height: var(--header-height);
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 100;
}

.header__logo {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    z-index: 102;
}
.header__logo img { height: 60px; width: auto; }

.header__inner { height: 100%; width: 100%; }
.header__right {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 100px;
}

.header__line-btn {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}
.header__line-btn:hover {
    opacity: 0.8;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.header__line-icon { margin-right: 10px; flex-shrink: 0; }
.header__line-text {
    color: #006837;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.header__line-text small { font-size: 11px; font-weight: 400; }

.header__hamburger {
    position: fixed; 
    top: 30px; 
    right: 40px;
    width: 30px;
    height: 20px;
    z-index: 101;
    background: transparent !important;
    border: none !important;
}
.header__hamburger:hover { opacity: 0.8; }
.header__hamburger-bar {
    display: block;
    width: 100%;
    height: 3px; 
    background-color: var(--color-main);
    position: absolute;
    left: 0;
    transition: all 0.3s;
}
.header__hamburger-bar:nth-of-type(1) { top: 0; }
.header__hamburger-bar:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
.header__hamburger-bar:nth-of-type(3) { bottom: 0; }

.header__hamburger.is-open .header__hamburger-bar:nth-of-type(1) {
    top: 50%; transform: translateY(-50%) rotate(45deg);
}
.header__hamburger.is-open .header__hamburger-bar:nth-of-type(2) { opacity: 0; }
.header__hamburger.is-open .header__hamburger-bar:nth-of-type(3) {
    bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

.drawer-menu {
    width: 100%;
    height: 100vh;
    background-color: #FFF289;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 99;
    transition: right 0.4s;
    overflow-y: auto;
}
.drawer-menu.is-open { right: 0; }
.drawer-menu__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: calc(var(--header-height) + 40px) 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.drawer-menu__list { margin-bottom: 10px; }
.drawer-menu__item { margin-bottom: 25px; text-align: center; }
.drawer-menu__item .menu-logo {display:none;}
.drawer-menu__link {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-main);
    transition: opacity 0.3s;
}
.drawer-menu__link:hover { opacity: 0.7; }
.drawer-menu__btn-wrap { width: 100%; display: flex; justify-content: center; }
.drawer-menu__btn {
    padding: 15px 30px;
    border-radius: 50px;
    width: 100%;
    max-width: 300px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.header__links {
    margin-bottom:30px;
    color: var(--color-main);
    font-size:15px;
}
.header__links li {
    margin-bottom: 3px;
    text-align: center;
}

/* --- ヘッダーのメディアクエリ --- */
@media screen and (max-width: 768px) {
    .header { 
        height: var(--header-height-sp); 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1;
    }
    .header__logo { 
        position: static; 
        transform: none; 
        margin-bottom: 25px; 
    }
    .header__logo img { width: 260px; height: auto; display: block; } 
    
    .header__inner { height: auto; width: 100%; }
    .header__right { padding-right: 0; justify-content: center; } 
    .header__line-btn { padding: 5px 15px; margin-right: 0; }
    .header__line-text { font-size: 12px; }
    .header__line-icon { width: 18px; height: 18px; margin-right: 5px; }

    .header__hamburger {
        top: 40px;
        transform: translateY(-50%);
        right: 20px;
    }
    .drawer-menu__inner {
        padding: calc(var(--header-height) + -30px) 40px 0;
    }
    .drawer-menu__item .menu-logo {display:block;}
    .drawer-menu__link { font-size: 16px; }
}

/* ========================================================
   6. 第1セクション：ファーストビュー (FV)
======================================================== */
.fv {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fv__img-block {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
@media screen and (min-width:769px) {
    .fv__img-block {text-align: right;}
    .fv__img-block picture {
        display: inline-block;
        width: 918px;
        height: 100%;
    }
}

@media screen and (min-width:1024px) {
    .fv__img-block {text-align: right;}
    .fv__img-block picture {
        display: inline-block;
        width: 1024px;
        height: 100%;
    }
}

@media screen and (min-width:1400px) {
    .fv__img-block {text-align: right;}
    .fv__img-block picture {
        display: inline-block;
        width: 1024px;
        height: 100%;
    }
}


/* イラストの上に星を表示させるためのCSS */
.fv__star {
    position: absolute;
    z-index: 0; /* 修正：テキストより背面に回す */
    pointer-events: none; /* 追加：星がボタンのクリック判定の邪魔をしないようにする */
    height: auto;
    opacity: 0.8; 
    animation: sparkling 3s infinite alternate ease-in-out; 
}

/* キラキラアニメーションの定義（拡大縮小） */
@keyframes sparkling {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 0.9; }
}

.fv__img { 
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    object-position: right top; 
    display: block; /* 修正：none から block に変更 */
}

.fv__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 60px;
    min-height: 600px;
}

.fv__text-block { width: 100%; }

.fv__lead { 
    font-size: 18px; 
    color: var(--color-main); 
    line-height: 1.5; 
    margin-bottom: 30px; 
    font-weight: 900; 
}

.fv__main-copy { 
    font-size: 40px; 
    color: var(--color-main); 
    line-height: 1.3; 
    margin-bottom: 30px; 
    font-weight: 900; 
}

.fv__sub-copy { 
    font-size: 14px; 
    line-height: 1.8; 
    margin-bottom: 40px; 
}

.fv__btn { padding: 15px 30px; border-radius: 50px; }

/* --- FVのメディアクエリ --- */
@media screen and (max-width: 768px) {
    .fv__img-block { position: relative; width: 100%; height: auto; }
    .fv__img { height: auto; }

    .fv__inner {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%; 
        flex-direction: column;
        justify-content: flex-start;
        padding-top: calc(var(--header-height-sp) + 30px);
        padding-bottom: 20px;
        min-height: auto;
    }

    .fv__text-block { width: 100%; margin-bottom: 40px; text-align: center; }
    .fv__lead { font-size: 16px; margin-bottom: 20px; }
    .fv__main-copy { font-size: 28px; margin-bottom: 20px; }
    .fv__sub-copy { margin-bottom: 30px; }
    .fv__btn-wrap { display: flex; justify-content: center;flex-wrap: wrap; }
}

@media screen and (max-width: 600px) {
    .fv__lead { font-size: clamp(13px, 3.5vw, 16px); margin-bottom: 15px; }
    .fv__main-copy { font-size: clamp(20px, 5.5vw, 28px); margin-bottom: 15px; }
    .fv__sub-copy { font-size: clamp(12px, 3vw, 14px); margin-bottom: 25px; }
    .fv__btn { padding: 12px 24px; font-size: 14px; }
}

@media screen and (max-width: 500px) {
    .fv__img-block {padding-top: 300px;background: linear-gradient(0deg, #FFFBF9 0%, #FFFBF9 50%, #fff190 50%, #fff190 100%);}
}
/* ========================================================
   7. 第2セクション：共感 (Empathy)
======================================================== */
.empathy {
    width: 100%;
    padding: 20px 0;
}

.empathy__bg {
    width: 100%;
    background: linear-gradient(to bottom, #FFF7C6, #FFF397);
    border-radius: 50px;
    padding: 80px 0;
}

.empathy__header { text-align: center; margin-bottom: 40px; }
.empathy__icon { margin-bottom: 20px; }
.empathy__title { text-align: center; line-height: 1.4; }
.empathy__lead { text-align: center; margin-bottom: 80px; }

/* ========================================================
   第2セクション：Empathy（修正版）
======================================================== */
.empathy__cases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 80px;
    align-items: start; /* ★追加・修正：カードが一番高いものに合わせて伸びるのを防ぎます */
    align-items: stretch;
}

.empathy__case {
    background-color: #fff;
    border-radius: 20px;
    padding: 50px 25px 30px;
    position: relative; 
    margin-top: 45px; 
    text-align: left;
    display: flex;
    flex-direction: column;
    height: auto; /* ★修正：100%をやめ、中身の長さにぴったり合わせます */
}

.empathy__case::before {
    content: "";
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 0;
}

.empathy__case-head {
    position: relative;
    z-index: 1; 
    display: flex; flex-direction: column; align-items: center;
    margin-top: -85px; margin-bottom: 20px;
}

.empathy__case-sub { font-size: 16px; font-weight: 900; line-height: 1; margin-bottom: 5px; }
.empathy__case-num { font-size: 38px; font-weight: 900; line-height: 1; }

.empathy__case-text { 
    margin-bottom: 24px;
    position: relative; 
    z-index: 1; 
    line-height: 1.6; 
}

/* --- おすすめプランボックス --- */
.empathy__recommend {
    margin-top: auto;
    height: 90px;
    display: flex;
    align-items: center;     
    justify-content: center; 
    padding: 10px;
    border-radius: 15px; 
    text-align: center;
    font-weight: 700; 
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
}

/* --- 各ボックスの個別カラー設定 --- */
/* CASE 01 */
.empathy__recommend--01 { background-color: #FFF5E6; color: #FF8B00; }
/* CASE 02 */
.empathy__recommend--02 { background-color: #FFE7C2; color: #FF8B00; }
/* CASE 03 */
.empathy__recommend--03 { background-color: #F1F2F5; color: #1A365D; }
/* CASE 04 */
.empathy__recommend--04 { background-color: #E5E8ED; color: #1A365D; }

.empathy__conclusion {
    background-color: #fff;
    border-radius: 50px;
    display: flex; align-items: center; justify-content: center;
    padding: 30px 40px;
    max-width: 900px; margin: 0 auto;
}

.empathy__star { flex-shrink: 0; width: 30px; height: auto; }
.empathy__conclusion-text {
    color: var(--color-main);
    font-size: 20px; font-weight: 700; text-align: center;
    margin: 0 40px; line-height: 1.5;
}

/* --- 共感セクションのメディアクエリ --- */
@media screen and (max-width: 768px) {
    .empathy__bg { border-radius: 30px; padding: 50px 0; }
    .empathy__lead { text-align: left; margin-bottom: 50px; }
    
    .empathy__cases {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; row-gap: 60px; 
        margin-bottom: 50px;
    }
    .empathy__case { padding: 40px 15px 20px; }
    
    .empathy__conclusion { padding: 20px 15px; border-radius: 20px; }
    .empathy__star { width: 20px; }
    .empathy__conclusion-text { font-size: 14px; margin: 0 15px; }
}
/* ========================================================
   8. 第3セクション：解決策の提示 (About)
======================================================== */
.about {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden; /* 1024px以下の時はみ出た背景を隠すための必須指定 */
}

/* 透過背景画像の設定 */
.about__bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 常に中央に配置 */
    width: 100%;
    min-width: 1024px; /* 画面幅が1024px以下になっても画像を縮めない（＝両端が隠れる） */
    height: 100%;
    background-image: url(../img/starback.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    z-index: 0;
}

.about__inner {
    position: relative;
    z-index: 1; /* 背景画像より手前に出す */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 左側：画像ブロック */
.about__img-block {
    width: 30%; /* ご指示通りの幅 */
}

.about__img {
    width: 100%;
    height: auto;
}

/* 右側：テキストブロック */
.about__text-block {
    width: 62%; /* 画像(30%)との間に8%の余白を持たせる計算 */
}

.about__title {
    text-align: left; /* イレギュラー設定：左揃え */
    margin-bottom: 40px;
    line-height: 1.5;
}

.about__text {
    margin-bottom: 10px; /* ご指示通りの10px余白 */
    line-height: 1.8;
}

.about__text:last-of-type {
    margin-bottom: 0; /* 最後の段落だけ下の余白を消す（レイアウト崩れ防止） */
}


/* --- 第3セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .about {
        padding: 60px 0;
    }

    .about__inner {
        flex-direction: column; /* スマホ時は縦並びに変更 */
    }

    .about__img-block {
        width: 50%; /* スマホ時は画像を少し大きくして見せます */
        margin-bottom: 40px;
    }

    .about__text-block {
        width: 100%; /* テキストエリアを横幅いっぱいに */
    }

    .about__title {
        margin-bottom: 30px;
    }
}
/* ========================================================
   9. 第4セクション：選ばれる理由 (Features)
======================================================== */
.features {
    position: relative;
    width: 100%;
    padding: 100px 0;
    margin: 60px 0; /* 上下の膨らみ分のスペースを確保 */
    z-index: 1; /* 背景が重なったときに文字が手前に来るように */
}

/* 膨らむ背景（本体と上下の疑似要素で作成） */
.features__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFE7C2;
    z-index: -1;
}

.features__bg::before,
.features__bg::after {
    content: "";
    position: absolute;
    left: -10%; /* 左右にはみ出させて綺麗な弧を作る */
    width: 120%;
    height: 120px; /* 膨らみの高さ */
    background-color: #FFE7C2;
    border-radius: 50%; /* 楕円にする */
}

.features__bg::before {
    top: -60px; /* 上に半分はみ出す */
}

.features__bg::after {
    bottom: -60px; /* 下に半分はみ出す */
}

.features__inner {
    position: relative;
}

/* ヘッダー部分（第2セクションと共通） */
.features__header {
    text-align: center;
    margin-bottom: 60px;
}

.features__icon {
    margin-bottom: 20px;
}

.features__title {
    text-align: center;
    line-height: 1.4;
}

/* 項目リスト */
.features__list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* 項目間の余白 */
    max-width: 860px;
    margin: 0 auto;
}

/* 各項目カード */
.features__item {
    background-color: #fff;
    border-radius: 40px;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    gap: 40px; /* 画像とテキストの隙間 */
}

.features__item-img {
    flex-shrink: 0; /* テキストが多くなっても画像を縮めない */
    width: 120px; /* アイコンの基本サイズ */
}

.features__item-img img {
    width: 100%;
    height: auto;
}

.features__item-title {
    color: #FFB746;
    font-size: 22px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.features__item-desc {
    line-height: 1.8;
}

/* --- 第4セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .features {
        padding: 60px 0;
        margin: 40px 0;
    }

    .features__bg::before,
    .features__bg::after {
        height: 80px; /* スマホ時は膨らみを少し小さく */
    }
    .features__bg::before { top: -40px; }
    .features__bg::after { bottom: -40px; }

    .features__header {
        margin-bottom: 40px;
    }

    .features__item {
        flex-direction: column; /* スマホ時は縦並びに変更 */
        text-align: center;
        padding: 40px 20px 30px;
        border-radius: 30px;
        gap: 20px;
    }

    .features__item-img {
        width: 100px;
    }

    .features__item-title {
        font-size: 18px;
    }
}
/* ========================================================
   10. 第5セクション：料金プラン・オプション (Plans)
======================================================== */
.plans {
    position: relative;
    width: 100%;
    margin-top: -60px; 
    padding-bottom: 100px;
    z-index: 2; 
}

.plans__bg-extend {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 35%; 
    background-color: #FFE7C2;
    border-radius: 0 0 50% 50% / 0 0 100px 100px;
    z-index: -1; 
}

.plans__inner {
    position: relative;
    z-index: 1;
}

.plans__box {
    background: linear-gradient(to bottom, #FFF7C6, #FFF397);
    border-radius: 50px;
    padding: 80px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

.plans__header {
    text-align: center;
    margin-bottom: 50px;
}
.plans__icon { margin-bottom: 20px; }
.plans__title { line-height: 1.4; text-align: center; }

.plans__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.plans__card {
    background-color: #fff;
    border-radius: 30px;
    border: 2px solid #FFB746; /* 修正：枠線を追加 */
    padding: 40px 30px;
    text-align: center;
    position: relative;
}

.plans__card-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #FFB746;
    border: 2px solid #FFB746;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 20px;
}

.plans__card-title {
    color: #1A365D;
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.plans__card-price {
    color: #FF8B00;
    margin-bottom: 15px;
}
.plans__card-price-num { font-size: 30px; font-weight: 900; line-height: 1; }
.plans__card-price-unit { font-size: 16px; font-weight: 700; margin-left: 5px; }

.plans__card-target {
    padding: 12px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px; /* 下の説明文との余白 */
    text-align: center;
}

.plans__card-target--01 {
    background-color: #FFF5E6;
    color: #FF8B00;
}

.plans__card-target--02,
.plans__card-target--03 {
    background-color: #F1F2F5;
    color: #1A365D;
}

.plans__card-desc {
    font-size: 14px;
    text-align: left;
    margin-bottom: 25px;
    min-height: 80px; 
}

.plans__card-features {
    background-color: #FFEACB;
    border-radius: 15px;
    padding: 25px 20px;
}
.plans__card-list li {
    display: flex;
    align-items: flex-start;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
}
.plans__card-list li:last-child { margin-bottom: 0; }
.plans__check { width: 18px; height: auto; margin-right: 10px; margin-top: 2px; flex-shrink: 0; }

.plans__card-note {
    font-size: 12px;
    color: #666;
    margin-top: 15px;
    text-align: left;
}

/* オプションエリア */
.plans__options-header {
    text-align: center;
    margin-bottom: 50px;
}
.plans__sub-title { line-height: 1.4; text-align: center; }

.plans__options {
    background-color: #fff;
    border-radius: 30px;
    padding: 50px 60px;
    max-width: 900px;
    margin: 0 auto 50px;
}

.plans__options-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

/* 修正：線の太さを2pxに変更し、最後の行にも線を適用するためlast-childの記述を削除しました */
.plans__options-table th,
.plans__options-table td {
    padding: 20px 10px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #FF8B00; 
}

.plans__options-table th { text-align: left; }
.plans__options-table td { 
    text-align: left; 
    width: 160px;     
}

.plans__options-bottom {
    text-align: center;
    color: #1A365D;
    font-weight: 700;
    font-size: 18px;
}

.plans__btn-wrap {
    display: flex;
    justify-content: center;
}

/* 修正：ボタンに角丸(border-radius: 50px;)を追加 */
.plans__btn { 
    padding: 20px 60px; 
    font-size: 18px; 
    border-radius: 50px;
}


/* --- 第5セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .plans { margin-top: -40px; }
    
    .plans__bg-extend { height: 25%; }

    .plans__box {
        padding: 40px 20px;
        border-radius: 30px;
    }

    .plans__cards {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 60px;
    }

    .plans__card { padding: 40px 20px; }
    .plans__card-desc { min-height: auto; }

    .plans__options { padding: 30px 20px; }
    
    .plans__options-table th,
    .plans__options-table td {
        padding: 15px 5px;
        font-size: 13px;
    }
    .plans__options-table td { width: 100px; } 

    .plans__options-bottom { font-size: 15px; margin-top: 10px; }
    .plans__btn { width: 100%; padding: 15px 20px; font-size: 16px; }
}
/* ---  料金プラン：注釈ボックス（ワンポイント修正等） --- */
.plans__notes {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 25px 30px;
    margin-bottom: 50px;
    text-align: left;
}

.plans__notes-title {
    color: #1A365D;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}

.plans__notes-text {
    font-size: 13px;
    color: #333333;
    line-height: 1.6;
    padding-left: 13px;
    text-indent: -13px;
}
.plans__notes-text ul {
    padding-left: 16px;
    text-indent: -16px;
}
@media screen and (max-width: 768px) {
    .plans__notes {
        padding: 20px;
        margin-bottom: 40px;
    }
    .plans__notes-title {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .plans__notes-text {
        font-size: 12px;
    }
}
/* =========================================================
   プラン組み合わせ例 (.plans__examples)
========================================================= */
.plans__examples {
    margin-top: 60px;
    margin-bottom: 40px;
}

.plans__examples-header {
    text-align: center;
    margin-bottom: 30px;
}

/* リストコンテナ：PC時は2列、SP時は1列 */
.plans__examples-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media screen and (min-width: 769px) {
    .plans__examples-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* 各アイテム（カード） */
.plans__examples-item {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 2px solid transparent;
}

/* イラスト画像エリア */
.plans__examples-img {
    text-align: center;
    margin: 0;
}
.plans__examples-img img {
    width: 140px;
    height: 167px;
    object-fit: contain;
}

/* コンテンツエリア */
.plans__examples-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plans__examples-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #1A365D;
    margin: 0;
    text-align:center;
}


/* プラン詳細（グレーの枠線ボックス） */
.plans__examples-detail {
    background: #FFE7C2;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    text-align: center;
}

.plans__examples-row {
    margin: 0 0 8px 0;
    line-height: 1.5;
}
.planrei {
    color:#1A365D;
    font-weight:bold;
}
.plans__examples-row:last-child {
    margin-bottom: 0;
}

.plans__examples-row--price strong {
    font-size: 16px;
    color:#C62828;
}

/* 説明文 */
.plans__examples-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin: 0;
}
.plans__examples-desc strong {
    color: #1A365D;
}
/* ========================================================
   11. 第6セクション：CTA (ご相談誘導)
======================================================== */
.cta {
    width: 100%;
    padding: 100px 0;
    /* 背景色は設定なし（ベースの#FFFBF9が適用されます） */
}

.cta__header {
    text-align: center;
    margin-bottom: 40px;
}
.cta__icon { margin-bottom: 20px; }
.cta__title { line-height: 1.4; text-align: center; }

.cta__text {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
    line-height: 1.8;
}

/* 補足ボックス */
.cta__box {
    background-color: #fff;
    border: 2px solid #FFB746; /* 画像に合わせて全体を囲うように修正しています */
    border-radius: 40px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    gap: 40px; /* 画像とテキストの隙間 */
    max-width: 900px;
    margin: 0 auto 60px;
}

.cta__box-img {
    flex-shrink: 0;
    width: 100px;
}
.cta__box-img img {
    width: 100%;
    height: auto;
}

.cta__box-text {
    line-height: 1.8;
}

/* LINEリンクボタン */
.cta__btn-wrap {
    display: flex;
    justify-content: center;
}

.cta__btn {
    padding: 20px 60px; 
    font-size: 18px; 
    border-radius: 50px;
}

/* --- 第6セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .cta {
        padding: 60px 0;
    }

    .cta__text {
        text-align: left; /* スマホ時は長文を読みやすく左揃えに */
        margin-bottom: 40px;
    }

    .cta__box {
        flex-direction: column; /* スマホ時は縦並びに */
        text-align: center;
        padding: 30px 20px;
        border-radius: 30px;
        gap: 20px;
        margin-bottom: 40px;
    }

    .cta__box-img {
        width: 80px; /* 画像を少し小さく */
    }

    .cta__box-text {
        text-align: left; /* 補足ボックス内のテキストも左揃え */
    }

    .cta__btn {
        width: 100%;
        padding: 15px 20px;
        font-size: 16px;
    }
}
/* ========================================================
   12. 第7セクション：ご依頼の流れ (Flow)
======================================================== */
.flow {
    position: relative;
    width: 100%;
    padding: 100px 0;
}

/* 左側に余白を持たせ、右に密着させる背景 */
.flow__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 92%; /* 画面幅の92%に設定することで、左側に8%の余白を生み出す */
    height: 100%;
    background: linear-gradient(to bottom, #FFEACB, #FFD99D);
    border-radius: 80px 0 0 80px; /* 左上と左下だけ角丸 */
    z-index: 0;
}

.flow__inner {
    position: relative;
    z-index: 1;
}

/* ヘッダー */
.flow__header {
    text-align: center;
    margin-bottom: 50px;
}
.flow__icon { margin-bottom: 20px; }
.flow__title { line-height: 1.4; text-align: center; }

/* フローボックス */
.flow__box {
    background-color: #fff;
    border-radius: 30px;
    /* 右下のオレンジ色のズレた背景をbox-shadowでスマートに実装 */
    box-shadow: 15px 15px 0 0 #FFB746;
    padding: 60px 80px;
    max-width: 800px;
    margin: 0 auto;
}

/* リスト全体のコンテナ（縦線の基準点） */
.flow__list {
    position: relative;
}

/* 番号を繋ぐオレンジ色の縦線 */
.flow__list::before {
    content: "";
    position: absolute;
    top: 20px;    /* 最初の円の中央付近からスタート */
    bottom: 20px; /* 最後の円の中央付近でストップ */
    left: 24px;   /* 円の中心を通るように位置調整（円の半径25pxの近似値） */
    width: 3px;
    background-color: #FFB746;
    z-index: 1;   /* 円の背面に回す */
}

/* 各項目 */
.flow__item {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2; /* 縦線より手前に配置 */
    margin-bottom: 40px;
}
.flow__item:last-child {
    margin-bottom: 0;
}

/* 番号の円 */
.flow__num {
    width: 50px;
    height: 50px;
    background-color: #FFB746;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    flex-shrink: 0; /* テキストが多くても円が縮まないようにする */
    margin-right: 30px;
}

.flow__item-title {
    color: #1A365D;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.flow__item-desc {
    color: #333;
    font-size: 15px;
}

/* --- 第7セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .flow {
        padding: 60px 0;
    }

    .flow__bg {
        width: 100%;
        border-radius: 40px 0 0 40px;
    }

    .flow__header {
        margin-bottom: 40px;
    }

    .flow__box {
        padding: 40px 20px;
        box-shadow: 10px 10px 0 0 #FFB746; /* スマホ時は影のズレを少し小さく */
        border-radius: 20px;
    }

    .flow__list::before {
        left: 19px; /* スマホ時の円のサイズ変更に合わせて線の位置を再調整 */
    }

    .flow__item {
        margin-bottom: 30px;
    }

    .flow__num {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-right: 20px;
    }

    .flow__item-title {
        font-size: 18px;
    }

    .flow__item-desc {
        font-size: 13px;
    }
}
/* ========================================================
   13. 第8セクション：よくあるご質問 (FAQ)
======================================================== */
.faq {
    position: relative;
    width: 100%;
    padding: 100px 0;
    margin-top: 80px; 
}

.faq__bg {
    position: absolute;
    top: 0;
    left: 0; 
    width: 92%; 
    height: 100%;
    background: linear-gradient(to bottom, #FFF9E3, #FFEDB1);
    border-radius: 0 80px 80px 0; 
    z-index: 0;
}

.faq__inner {
    position: relative;
    z-index: 1;
}

.faq__header {
    text-align: center;
    margin-bottom: 50px;
}
.faq__icon { margin-bottom: 20px; }
.faq__title { line-height: 1.4; text-align: center; }

.faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.faq__item {
    margin-bottom: 20px;
}
.faq__item:last-child {
    margin-bottom: 0;
}

.faq__q {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 40px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.3s;
}
.faq__q:hover { opacity: 0.8; }

.faq__q-icon {
    color: #FFB746;
    font-size: 36px;
    font-weight: 900;
    margin-right: 25px;
    flex-shrink: 0;
    line-height: 1;
}

.faq__q-text {
    color: #1A365D;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    flex-grow: 1;
    padding-right: 40px; 
}

/* FAQのカテゴリー見出し */
.faq__category-title {
    color: #1A365D;
    font-size: 20px;
    font-weight: 700;
    margin: 60px 0 20px;
    padding-left: 15px;
    border-left: 5px solid #FF8B00;
}
/* 一番最初の見出しだけ上の余白を詰める */
.faq__category-title:first-of-type {
    margin-top: 20px;
}

/* プラスマイナスアイコン */
.faq__icon-cross {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}
.faq__icon-cross::before {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 3px;
    background-color: #FFB746;
    transform: translateY(-50%);
    transition: transform 0.6s ease; /* ゆっくり回るように変更 */
}
.faq__icon-cross::after {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 3px; height: 100%;
    background-color: #FFB746;
    transform: translateX(-50%);
    transition: transform 0.6s ease, opacity 0.6s ease; /* ゆっくり回るように変更 */
}

/* JSで is-open クラスが付与された時のアイコン変化 */
.faq__item.is-open .faq__icon-cross::before {
    transform: translateY(-50%) rotate(180deg);
}
.faq__item.is-open .faq__icon-cross::after {
    transform: translateX(-50%) rotate(180deg);
    opacity: 0; 
}

/* 回答部分（上下にするっと開閉するアニメーション） */
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out; /* ここでゆっくり上下に開閉 */
}
.faq__item.is-open .faq__a {
    max-height: 300px; /* 回答が十分に収まる高さを指定 */
}

.faq__a-inner {
    display: flex;
    align-items: flex-start;
    padding: 30px 40px;
}

.faq__a-icon {
    color: #FF8B00;
    font-size: 36px;
    font-weight: 900;
    margin-right: 25px;
    flex-shrink: 0;
    line-height: 1;
}

.faq__a-text {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    margin-top: 5px; 
}


/* --- 第8セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .faq {
        padding: 60px 0;
        margin-top: 40px; 
    }

    .faq__bg {
        width: 100%;
        border-radius: 0 40px 40px 0;
    }

    .faq__header {
        margin-bottom: 40px;
    }

    .faq__q {
        padding: 20px 20px 20px 15px; 
        border-radius: 15px;
    }

    .faq__q-icon {
        font-size: 28px;
        margin-right: 15px;
    }

    .faq__q-text {
        font-size: 15px;
        padding-right: 30px;
    }

    .faq__icon-cross {
        right: 15px;
        width: 18px;
        height: 18px;
    }

    .faq__a-inner {
        padding: 20px 15px 10px 15px;
    }

    .faq__a-icon {
        font-size: 28px;
        margin-right: 15px;
    }

    .faq__a-text {
        font-size: 14px;
        margin-top: 2px;
    }
}
/* ========================================================
   14. 第9セクション：最後のメッセージ (Message)
======================================================== */
.message {
    width: 100%;
    padding: 120px 0;
    overflow: hidden;
    position: relative;
}

.message__title {
    position: relative;
    z-index: 2; /* 画像の上に文字が来るように設定 */
    width: 65%; /* 画像と重なるように幅を調整 */
    text-align: left;
    line-height: 1.6;
    margin-bottom: 50px;
}

/* イラスト画像の配置 */
.message__img-block {
    position: absolute;
    right: 0;
    bottom: 0; /* ←追加：これでセクションの一番下（右下）にぴったりくっつきます */
    top:0;
    width: 100%;
    max-width: 700px;
    z-index: 1;
}

.message__img {
    width: 100%;
    height: auto;
}

/* イラストの上に星を表示させるためのCSS */
.message__star {
    position: absolute;
    z-index: -1;
    pointer-events: none; /* クリックの邪魔をしない */
    height: auto;
    opacity: 0.8; 
    /* FVで定義した sparkling アニメーションを使い回します */
    animation: sparkling 3s infinite alternate ease-in-out; 
    will-change: transform, opacity;
}

.message__img--sp {
    display:none;
}

/* ボタンエリア */
.message__btn-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start; /* 画像に合わせて左寄せにしています */
    width: 65%;
}

.message__btn {
    padding: 20px 60px;
    font-size: 18px;
    border-radius: 50px;
}

/* --- 第9セクションのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .message {
        padding: 80px 0;
    }

    .message__title {
        width: 100%;
        margin-bottom: 0; /* 画像との余白調整のため一旦ゼロに */
    }

    /* スマホ時は画像を絶対配置から通常配置に戻し、タイトルの下に配置 */
    .message__img-block {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 70%;
        margin:auto;
    }
    
    .message__img--pc {
        display:none;
    }
    
    .message__img--sp {
        display:block;
    }
    .message__btn-wrap {
        width: 100%;
        justify-content: center; /* FVと同じくスマホ時は中央揃え */
    }

    .message__btn {
        padding: 15px 30px; /* FVと同じパディングに調整 */
        font-size: 16px;
    }
}
/* ========================================================
   15. フッター (Footer)
======================================================== */
.footer {
    background-color: var(--color-main); /* 全体の背景色（#1A365D） */
    color: #fff;
    padding: 80px 0 40px;
}

/* --- 上部：ロゴとメニュー --- */
.footer__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 60px;
}

.footer__logo {
    padding-right: 60px;
    /* 右側に白い縦線（半透明にして馴染ませています） */
    border-right: 1px solid rgba(255, 255, 255, 0.4); 
}

.footer__logo img {
    height: 60px;
    width: auto;
}

.footer__nav {
    display: flex;
    gap: 60px;
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__nav-item a {
    font-weight: 700;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
}
.footer__nav-item a:hover {
    opacity: 0.7;
}

.footer__line-icon {
    width: 16px;
    height: 16px;
    margin-left: 8px; /* テキストと画像の間の余白 */
}

/* --- 下部：リンク集 --- */
.footer__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 画面が狭くなったら折り返す設定 */
    gap: 30px;
    margin-bottom: 40px;
    font-size: 14px;
}

.footer__links a {
    transition: opacity 0.3s;
}
.footer__links a:hover {
    opacity: 0.7;
}

.footer__copyright, .footer__trademark {
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
}

/* --- TOPへ戻るボタン --- */
.pagetop {
    position: fixed;
    bottom: 0;
    right: 40px;
    background-color: var(--color-accent); /* #FFB746 */
    color: #fff;
    padding: 10px 15px;
    border-radius: 15px 15px 0 0; /* 上部のみ角丸 */
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.4s ease; /* ふわっと出現させるためのトランジション */
    opacity: 0; /* 初期状態は見えない */
    visibility: hidden;
    transform: translateY(20px); /* 少し下にずらしておく */
}

/* JSで is-show クラスが付いたら出現する */
.pagetop.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* 元の位置にスライドアップ */
}

.pagetop:hover {
    opacity: 0.8;
}

/* 上向きの三角矢印をCSSで作成 */
.pagetop__arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    margin-right: 8px;
    margin-top: 4px; /* 矢印の位置微調整 */
}

/* --- フッターのメディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .footer {
        padding: 60px 0 30px;
    }

    .footer__top {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 50px;
    }

    .footer__logo {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* スマホ時は下線に変更 */
        padding-bottom: 40px;
        text-align: center;
    }

    /* メニューはスマホ時でも2列横並びを維持する */
    .footer__nav {
        width: 100%;
        justify-content: center;
        gap: 30px;
    }
    
    .footer__nav-list {
        gap: 25px;
    }

    .footer__nav-item a {
        font-size: 14px;
    }

    .footer__links {
        gap: 15px 20px;
        font-size: 12px;
    }

    .pagetop {
        right: 20px;
        padding: 12px 20px;
        font-size: 16px;
    }
}
/* ========================================================
   16. スクロールアニメーション
======================================================== */
/* --- 1. 初期状態（透明＆ずらしておく） --- */
.js-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js-fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* --- 2. 発火時の状態（不透明＆元の位置へ） --- */
/* JSで .is-active クラスが付与されると発動します */
.js-fade-up.is-active,
.js-fade-left.is-active,
.js-fade-right.is-active {
    opacity: 1;
    transform: translate(0, 0);
}

/* ========================================================
   17. 下層ページ共通スタイル（特商法・利用規約）
======================================================== */
.page-doc {
    padding: 120px 0;
    background-color: var(--color-bg-base); /* #FFFBF9 */
}

.page-doc__title {
    text-align: center;
    color: #1A365D;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
}

.page-doc__content {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    padding: 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* --- 特商法向けのテーブルデザイン --- */
.doc-table {
    width: 100%;
    border-collapse: collapse;
}

.doc-table th,
.doc-table td {
    border: 1px solid #eee;
    padding: 25px 20px;
    line-height: 1.6;
}

.doc-table th {
    background-color: #FFF9E3; /* LPの薄い黄色を踏襲 */
    color: #1A365D;
    font-weight: 700;
    text-align: left;
    width: 30%;
}

.doc-table td {
    color: #333;
    width: 70%;
}

/* --- 利用規約向けのテキストデザイン --- */
.doc-section {
    margin-bottom: 40px;
}
.doc-section:last-child {
    margin-bottom: 0;
}

.doc-section__title {
    color: #1A365D;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid #FFB746;
    padding-bottom: 10px;
    display: inline-block;
}

.doc-text {
    color: #333;
    line-height: 1.8;
    font-size: 15px;
}

.doc-text ol {
    padding-left: 1.5em;
    margin-top: 10px;
}

.doc-text li {
    margin-bottom: 10px;
}

/* TOPへ戻るボタン（下層ページ用） */
.page-doc__back {
    text-align: center;
    margin-top: 60px;
}
.page-doc__back-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: #1A365D;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    transition: opacity 0.3s;
}
.page-doc__back-btn:hover {
    opacity: 0.8;
}

/* --- メディアクエリ（スマホ対応） --- */
@media screen and (max-width: 768px) {
    .page-doc { padding: 250px 0; }
    .page-doc__title { font-size: 24px; margin-bottom: 40px; }
    .page-doc__content { padding: 30px 20px; border-radius: 20px; }
    
    /* テーブルを縦積みに変更 */
    .doc-table th, .doc-table td {
        display: block;
        width: 100%;
    }
    .doc-table th { border-bottom: none; padding: 15px 20px 10px; }
    .doc-table td { padding: 10px 20px 20px; }
    
    .doc-section__title { font-size: 18px; }
    .doc-text { font-size: 14px; }
}
/* ========================================================
   クッキーバナー (Cookie Banner) 
   ======================================================== */
.c-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(33, 33, 33, 0.9); /* 高級感のある黒系半透明 */
    color: #ffffff;
    padding: 12px 24px;
    z-index: 9999;
    font-size: 11px; /* 文字は小さめに */
    line-height: 1.6;
    transform: translateY(100%); /* 初期状態は画面の下に隠す */
    transition: transform 0.4s ease;
}

/* JavaScriptで表示フラグが立ったら画面内に出現 */
.c-cookie-banner.is-show {
    transform: translateY(0);
}

.c-cookie-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.c-cookie-banner__text {
    margin: 0;
}

.c-cookie-banner__link {
    color: #FF8B00; /* リンクはアクセントカラーのオレンジ */
    text-decoration: underline;
}

.c-cookie-banner__link:hover {
    text-decoration: none;
}

.c-cookie-banner__btn {
    background-color: #FF8B00; /* 同意ボタン（オレンジ） */
    color: #333333;
    border: none;
    padding: 6px 24px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.c-cookie-banner__btn:hover {
    background-color: #C66A00; /* ホバーで少し暗く */
}

/* スマホ対応（画面幅768px以下は縦並びに切り替え） */
@media (max-width: 768px) {
    .c-cookie-banner {
        padding: 16px;
    }
    .c-cookie-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .c-cookie-banner__btn {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
}

/* ========================================================
   18. 共通のメディアクエリ
======================================================== */

.spNone {display:block;}
.pcNone {display:none;}

@media screen and (max-width: 768px) {
    .spNone {display:none;}
    .pcNone {display:block;}
    .spLeft {text-align:left;}
}