/* 全体設定 */
body { 
    font-family: 'Noto Sans JP', sans-serif; 
    color: #4a3f35; 
    background-color: #fffaf7; 
    overflow-x: hidden; 
    scroll-behavior: smooth; 
}

.font-brand { 
    font-family: 'Zen Maru Gothic', sans-serif; 
}

.bg-sun { background-color: #ff9d00; }
.text-sun { color: #ff9d00; }

/* スクロール追従ヘッダー */
.sticky-nav {
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #ffedd5;
}

/* パララックス効果 */
.parallax-bg {
    background-image: url('https://images.unsplash.com/photo-1576091160550-2173dad99901?auto=format&fit=crop&q=80&w=2000');
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    height: 450px; 
    position: relative;
}

.parallax-overlay {
    position: absolute; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.3);
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* アコーディオン修正 */
details summary { 
    list-style: none; 
    cursor: pointer; 
}

details summary::-webkit-details-marker { 
    display: none; 
}

.faq-answer { 
    color: #4a3f35 !important; 
    background-color: #fff; 
}

details[open] summary { 
    border-bottom: 1px solid #ffedd5; 
    color: #ff9d00; 
}

/* カードのホバー効果 */
.hover-lift { 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.hover-lift:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.05); 
}

/* 前のセクションと重ねて隙間を消す */
.wave-top { margin-top: -59px; } 
.wave-bottom { margin-bottom: -1px; }

/* サンサンプラン用の装飾 */
.plan-card {
    background: linear-gradient(135deg, #fff4e6 0%, #ffffff 100%);
    border: 2px solid #ffd8a8;
}

/* --- セクション背景を交互にする（白・クリーム） --- */
section:nth-of-type(odd) { 
    background-color: #ffffff !important; 
}
section:nth-of-type(even) { 
    background-color: #fffaf7 !important; 
}

/* --- 波線の色設定 --- */
.to-white path { fill: #ffffff !important; }
.to-cream path { fill: #fffaf7 !important; }

/* セクション背景 */
section:nth-of-type(odd) { background-color: #ffffff !important; }
section:nth-of-type(even) { background-color: #fffaf7 !important; }

/* --- 波の箱：背景を強制的に白にする --- */
.wave-spacer {
    position: relative;
    width: 100%;
    height: 60px;
    z-index: 10;
    line-height: 0;
    margin-top: -1px; /* 隙間を消す */
    background-color: #ffffff !important; /* ★ここ！波の土台を白で塗りつぶす */
}

/* 波自体の色はクリーム色にする */
.to-cream path { 
    fill: #fffaf7 !important; 
}

.wave-spacer svg {
    display: block;
    width: 100%;
    height: 60px;
}

.wave-flip {
    transform: scaleY(-1); /* 上下反転 */
    margin-top: -60px;     /* 上のセクションに食い込ませる */
}


/* 料金プラン全体の空気感 */
.price-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 洗練されたカード：背景を白にして、影を極限まで薄く広げる */
.premium-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 4rem 3rem;
    border-radius: 3rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.06);
    border-color: #ff9d00;
}

/* 数字を強調する */
.price-number {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
    color: #1e293b;
}

/* 箇条書きを「点」ではなく「細い線」で区切る */
.feature-item {
    padding: 1rem 0;
    border-bottom: 1px solid #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b;
}

.feature-item i {
    color: #ff9d00;
    font-size: 1.1rem;
}

/* 料金プランカード：常にオレンジの点線で固定 */
.premium-card {
    background: #ffffff;
    border: 2px dashed #ff9d00; /* 常時オレンジの点線 */
    padding: 3rem 2.5rem;
    border-radius: 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ホバー時の挙動を最小限（浮くだけ）に */
.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(255, 157, 0, 0.1);
}

.price-number {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
    color: #1e293b;
}

/* 箇条書きリスト：左寄せの設定 */
.feature-item {
    padding: 1.2rem 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: flex-start; /* アイコンを上に合わせる */
    gap: 12px;
}

.feature-icon {
    color: #ff9d00;
    font-size: 1.2rem;
    padding-top: 2px; /* テキストの1行目と高さを合わせる */
}

.feature-content {
    text-align: left;
}

.feature-title {
    font-weight: bold;
    color: #1e293b;
    display: block;
    margin-bottom: 4px;
}

.feature-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.6;
}


/* --- 公開までの流れ (STEP) --- */
.step-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* ステップをつなぐ縦線 */
.step-container::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #ffedd5; /* 薄いオレンジの線 */
    z-index: 1;
}

.step-item {
    position: relative;
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
    z-index: 2;
}

/* ステップの数字丸 */
.step-number {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 2px solid #ff9d00;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.step-number .label {
    font-size: 0.7rem;
    font-weight: bold;
    color: #ff9d00;
}

.step-number .num {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #ff9d00;
    line-height: 1;
}

/* ステップのカード部分 */
.step-content {
    background: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 2rem;
    flex-grow: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
}

.step-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-text {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.7;
}

/* スマホ用の調整 */
@media (max-width: 640px) {
    .step-container::before { left: 30px; }
    .step-number { width: 60px; height: 60px; }
    .step-number .num { font-size: 1.4rem; }
    .step-content { padding: 1.2rem; }
}


/* --- New Concept Message Section --- */

/* ストーリーを「解決」として見せるカード */
.story-grid {
    display: grid;
    gap: 2rem;
}

.story-card {
    background: #ffffff;
    border-radius: 3rem;
    padding: 2.5rem;
    border: 1px solid #fef3c7;
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.05);
    transition: all 0.3s ease;
}

.story-card:hover {
    box-shadow: 0 20px 40px rgba(251, 191, 36, 0.1);
}

.story-icon-circle {
    width: 60px;
    height: 60px;
    background: #fff7ed;
    color: #f59e0b;
    border-radius: 20px;
    display: flex;
    items-center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.story-label {
    display: inline-block;
    padding: 2px 10px;
    background: #ffedd5;
    color: #9a3412;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* 事業所情報テーブルのスタイル */
.info-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.info-table th {
    width: 30%;
    text-align: left;
    padding: 10px 0;
    color: #94a3b8; /* 薄いグレー */
    font-weight: bold;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.info-table td {
    padding: 10px 0 10px 10px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.5;
}

/* マップの高さ調整（情報が入る分、少し低くしてバランスをとる） */
.map-container {
    height: 300px;
    border-radius: 2rem;
    overflow: hidden;
}


/* --- Story Section (左右2段レイアウト) --- */
.story-flex-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .story-flex-container {
        flex-direction: row;
        align-items: flex-start;
    }
}

.story-left-content {
    flex: 1;
    position: sticky;
    top: 120px; /* スクロール時に文字がついてくるように固定 */
}

.story-right-cards {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* カードのデザイン */
.story-card {
    background: #ffffff;
    border-radius: 3rem;
    padding: 2.5rem;
    border: 1px solid #fef3c7;
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.05);
}

.story-icon-circle {
    width: 60px;
    height: 60px;
    background: #fff7ed;
    color: #f59e0b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* 左側のテキストをカードより上の位置から始める設定 */
.story-left-content {
    flex: 1;
    position: sticky;
    top: 100px; /* スクロール時の固定位置 */
    padding-top: 0; /* 必要に応じて調整 */
}

@media (min-width: 1024px) {
    .story-left-content {
        margin-top: -40px; /* ★ここ！カードより少し上にせり出させる */
    }
    
    .story-right-cards {
        flex: 1.4;
        margin-top: 60px; /* ★ここ！カード側を少し下げることで、左側が相対的に「上」に見える */
    }
}


/* --- 結論セクションの演出 --- */

/* 1. 下向きの動く矢印 */
.conclusion-flow-arrow {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
    color: #ff9d00;
    font-size: 3.5rem;
    /* ふわふわと下に促すアニメーション */
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); }
    60% { transform: translateY(-6px); }
}

/* 2. 結論ボックス（濃紺で引き締める） */
.message-conclusion-box {
    background: #1e293b; /* 深みのある紺色 */
    color: #ffffff;
    padding: 3.5rem 2.5rem;
    border-radius: 3.5rem; /* カードの丸みに合わせる */
    text-align: center;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 157, 0, 0.2); /* 隠し味のオレンジ枠 */
}

/* 結論ボックスの見出し */
.message-conclusion-box h4 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

/* 3. ボックス下の三角形（ポインター） */
.message-conclusion-box::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 20px solid #1e293b; /* ボックスと同じ色 */
}

/* --- Our Story (Message) セクションの余白リセット --- */
#message {
    padding-top: 0 !important;   /* セクション上部の余白をゼロに */
    margin-top: -2rem !important; /* 前の波線パーツとの隙間を無理やり詰める */
    padding-bottom: 6rem;
}

/* 左右2段コンテナの調整 */
.story-flex-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 0; /* コンテナ内の上部余白もゼロに */
}

@media (min-width: 1024px) {
    .story-flex-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
    }

    .story-left-content {
        flex: 1;
        padding-top: 1rem; /* テキストの位置を微調整 */
    }

    .story-right-cards {
        flex: 1.4;
        padding-top: 1rem; /* カードの位置も合わせる */
    }
}


/* --- Our Story Section 最終解決版（重なり絶対回避） --- */

#message {
    padding-top: 0 !important;
    margin-top: -2rem !important; /* 上の隙間を詰める */
}

/* メッセージ（左側だったテキスト）を中央寄せの独立ブロックに */
.story-header-message {
    max-width: 800px;
    margin: 0 auto 4rem auto;
    text-align: center;
}

/* カードエリアを「重ならない」グリッドに */
.story-cards-container {
    display: grid;
    grid-template-columns: 1fr; /* 基本は1列 */
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* PCサイズでも「重なり」を避けるため、無理に横に並べず、中央に寄せる */
@media (min-width: 1024px) {
    .story-cards-container {
        gap: 3rem;
    }
}

/* カード自体のスタイル */
.story-card {
    background: #ffffff;
    border-radius: 3rem;
    padding: 2.5rem;
    border: 1px solid #fef3c7;
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.05);
    width: 100%;
}


/* お悩み解決アンサー用 */
.solution-box {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed #ffedd5;
}
.solution-tag {
    display: inline-block;
    padding: 2px 14px;
    background: #ff9d00;
    color: white;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
}
.solution-text {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 700;
}

/* --- Caseカードのアイコン・ラベル中央配置 --- */

.story-card {
    text-align: center;
    padding: 3.5rem 2.5rem !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身をすべて中央に */
}

.story-icon-circle {
    width: 90px;
    height: 90px;
    background: #fff7ed;
    color: #ff9d00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1rem auto; /* 下のCaseラベルとの間隔を調整 */
    border: 2px solid #ffedd5;
    position: relative;
    box-shadow: 0 10px 25px rgba(255, 157, 0, 0.08);
}

/* アイコン下のCaseラベル */
.story-label {
    display: inline-block;
    padding: 2px 14px;
    background: #ff9d00;
    color: white;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 900;
    margin-bottom: 1.5rem; /* タイトルとの間隔 */
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(255, 157, 0, 0.2);
}

.story-card h4 {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    color: #1e293b;
    font-weight: 900;
}

/* --- 公開・運用カードの位置調整 --- */

@media (max-width: 767px) {
    /* 最後のカードを右にずらす（④のカードのズレに合わせる） */
    .text-center.pl-14 {
        padding-left: 3.5rem !important; /* 左側の縦線と数字を避けるためのマージン */
        padding-right: 1.25rem !important; /* 右側の遊び */
        text-align: left; /* 中央寄せだと不自然な場合、左寄りにするとカードと揃います */
    }

    .text-center.pl-14 .inline-block {
        text-align: center; /* カードの中身は中央寄せを維持 */
        margin-left: 0;     /* 左に強制固定して右にずらす */
    }
}


/* --- 上に戻るボタン --- */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #ff9d00; /* サンイエロー */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 157, 0, 0.3);
    z-index: 2000;
    opacity: 0;           /* 最初は隠す */
    visibility: hidden;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

/* スクロールした時に表示されるクラス */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    transform: translateY(-5px);
    background-color: #e68a00;
}

@media (max-width: 767px) {
    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}



/* メインのラベルを光らせるアニメーション（任意） */
.bg-sun.shadow-md {
    position: relative;
    overflow: hidden;
}
.bg-sun.shadow-md::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}
@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}


/* --- マスキングテープ風のデザイン --- */
/* --- マスキングテープ風（視認性向上Ver） --- */
.tape-style {
    position: relative;
    display: inline-block;
    padding: 0.7em 2.5em; /* 縦横の余白を少し広げてゆとりを */
    color: #ffffff;
    font-weight: 900;     /* 文字を一番太くして読みやすく */
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    
    /* 1. オレンジを濃く、不透明度をMAXに（読みやすさの土台） */
    background-color: #e68a00; 
    
    /* 2. ストライプの白をさらに薄くして、オレンジを邪魔しないように調整 */
    background-image: linear-gradient(-45deg, 
        rgba(255, 255, 255, 0.07) 25%, transparent 25%, 
        transparent 50%, rgba(255, 255, 255, 0.07) 50%, 
        rgba(255, 255, 255, 0.07) 75%, transparent 75%, 
        transparent 100%);
    background-size: 20px 20px;

    /* 3. 文字の可読性を上げるための「隠し味」の影（これが効きます） */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    border-left: 2px dotted rgba(0, 0, 0, 0.15);
    border-right: 2px dotted rgba(0, 0, 0, 0.15);
    
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: rotate(-1.5deg); /* 斜め度を少しだけ緩めて可読性アップ */
    
    z-index: 10;
}

/* 背景を白くぼかしていた擬似要素を削除、または透過をなくす */
.tape-style::after {
    display: none; /* 一旦オフにして色をダイレクトに出します */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .tape-style {
        font-size: 1.2rem;
        padding: 0.6em 1.5em;
        transform: rotate(-1deg);
    }
}



/* --- FAQアコーディオン --- */
details summary::-webkit-details-marker {
    display: none;
}
details summary {
    outline: none;
}
details.group[open] {
    box-shadow: 0 10px 25px rgba(255, 157, 0, 0.1);
}


/* お客様の声セクションの枠線アニメーション（準備中用） */
.border-dashed {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='48' ry='48' stroke='%23FF9D00FF' stroke-width='2' stroke-dasharray='10%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border: none;
}

/* 写真が順番に乗るアニメーション */
.photo-stack {
    opacity: 0;
    /* transform-box を使って各要素の transform 設定を維持します */
    animation: stackIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes stackIn {
    0% {
        opacity: 0;
        /* 少し拡大して上から降ろす */
        margin-top: -30px;
        scale: 1.1;
    }
    100% {
        opacity: 1;
        margin-top: 0;
        scale: 1;
    }
}

/* 以前の外枠設定を完全に無効化 */
.relative.aos-init.aos-animate > .rounded-\[4rem\] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Heroセクション（トップ部分）の背景をリッチに */
section.pt-20 {
    position: relative;
    overflow: hidden;
    /* 1. 全体の背景色をアイボリーに固定 */
    background-color: #fffaf7 !important;
    /* 2. 薄いオレンジのグリッド（方眼）を敷いて精密さを演出 */
    background-image: 
        linear-gradient(rgba(255, 157, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 157, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* 3. 右側に「太陽の光」のような柔らかなグラデーションを配置 */
section.pt-20::before {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 157, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none; /* クリック操作を邪魔しない */
}

/* 写真エリアが背景の光より前に来るように調整 */
#photo-area {
    position: relative;
    z-index: 10;
}