/* --- 1. 変数の設定（よく使う色やフォントを定義） --- */
:root {
    --color-primary: #ff6a49;      /* ボタンなどのオレンジ色 */
    --color-text-main: #333333;    /* 基本の文字色（濃いグレー） */
    --color-bg-base: #fffbf7;      /* 全体の背景色（温かい薄いベージュ） */
    --color-footer: #1a332b;       /* フッターの濃い緑色 */
    --font-main: "Noto Sans JP",'Zen Maru Gothic', sans-serif; /* 丸ゴシックフォント */
}

/* --- 2. 基本のリセット（余計な余白を消す） --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 要素のサイズ計算を分かりやすくする */
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-main);
    color: var(--color-text-main);
    line-height: 1.6; /* 行間を少し広げて読みやすく */
}

a {
    text-decoration: none; /* リンクの下線を消す */
    color: inherit;
}

ul {
    list-style: none; /* リストの「・」を消す */
}
/* -------------------------------------
   PC・スマホの表示切り替えユーティリティ
------------------------------------- */

/* ▼ PCでは非表示（スマホでのみ表示させたい要素） */
.sp_style {
    display: none;
}

/* ▼ スマホでは非表示（PCでのみ表示させたい要素） */
.pc_style {
    display: block;
}

/* --- レスポンシブ (768px以下のスマホ画面) --- */
@media (max-width: 768px) {
    
    .sp_style {
        display: block; /* スマホの時は表示する */
    }
    
    .pc_style {
        display: none;  /* スマホの時は隠す */
    }
    
}
/* --- 3. ヘッダー / メインビジュアル --- */
.hero {
    /* 画像へのパスは、お手元のファイル名（例：main-bg.jpg など）に変更してください */
    /* linear-gradient で画像を少し暗くして、白い文字を読みやすくしています */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('../img/hero.png'); 
    background-size: cover;
    background-position: center;
    min-height: 80vh; /* 画面の高さの80%を最小の高さにする */
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

/* --- ナビゲーションバー --- */
.navbar {
    display: flex;
    justify-content: space-between; /* 両端に配置 */
    align-items: center; /* 縦の真ん中で揃える */
    padding: 20px 5%;
}

.nav-links {
    display: flex;
    gap: 30px; /* リンク同士の隙間 */
}

/* スマホサイズの時はメニューを一旦隠す（レスポンシブの基本） */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
}

/* --- 中央のコンテンツ --- */
.hero-content {
    flex-grow: 1; /* 余ったスペースを埋める */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦の真ん中 */
    align-items: center; /* 横の真ん中 */
    text-align: center;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em; /* 文字の間隔を少し開ける */
}
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* --- ボタンのデザイン --- */
.main-button, .cta-button {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 15px 40px;
    border-radius: 30px; /* 角を丸くする */
    font-weight: bold;
    transition: opacity 0.3s; /* ホバー時のアニメーション */
}

.main-button:hover, .cta-button:hover {
    opacity: 0.8; /* マウスを乗せた時に少し透けさせる */
}

/* ナビゲーション用のボタンは少し小さめに */
.cta-button {
    padding: 10px 25px;
}
/* --- 4. 紹介セクション --- */
.intro-section {
    padding: 80px 5%; /* 上下80px、左右は画面の5%の余白を開ける */
}

.intro-container {
    display: flex; /* 横並びにする魔法のコード */
    align-items: center; /* 縦方向の真ん中で揃える */
    justify-content: space-between; /* 左右に良い感じに間隔を開ける */
    max-width: 1000px; /* 広がりすぎないように最大幅を設定 */
    margin: 0 auto; /* 画面の中央に配置 */
    gap: 40px; /* 左のテキストと右の画像の間の隙間 */
}

/* --- 左側のテキスト部分 --- */
.intro-text {
    flex: 1; /* 左右で均等にスペースを分ける */
}

.intro-text h2 {
    font-size: 2.2rem;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* 赤字（オレンジ）で強調する部分 */
.highlight {
    color: var(--color-primary);
}

/* --- 数字が並ぶ部分 --- */
.stats-row {
    display: flex; /* 数字も横並びにする */
    gap: 30px; /* 数字同士の隙間 */
}

.stat-item {
    text-align: center; /* 文字を中央揃え */
}

.stat-number {
    color: var(--color-primary); /* オレンジ色 */
    font-size: 2.5rem; /* 数字を大きく */
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-unit {
    font-size: 1rem; /* 「ヶ月」「分」「%」は少し小さく */
    margin-left: 2px;
}

.stat-desc {
    font-size: 0.8rem;
    color: #666666; /* 説明文は少し薄いグレーにしてメリハリをつける */
}

/* --- 右側の画像部分 --- */
.intro-image {
    flex: 1; /* 左右で均等にスペースを分ける */
}

.intro-image img {
    width: 100%; /* 枠いっぱいに広げる */
    border-radius: 20px; /* 角を優しく丸くする */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* 少しだけ影をつけて浮き上がらせる */
}

/* --- スマホ対応（画面幅が768px以下の時のデザイン） --- */
@media (max-width: 768px) {
    .intro-container {
        flex-direction: column; /* 横並びから「縦並び」に変更 */
    }
    
    .intro-text h2 {
        font-size: 1.8rem;
        text-align: center; /* スマホではタイトルを中央寄せ */
    }
    
    .stats-row {
        justify-content: center; /* 数字も中央寄せ */
        margin-bottom: 30px; /* 画像との間に余白を作る */
    }
}
/* --- 5. 特徴カードセクション --- */
.features-section {
    padding: 60px 0; /* 画面端までスクロールできるように、左右の余白は0にします */
    background-color: var(--color-bg-base);
    text-align: center;
}

.features-header {
    margin-bottom: 40px;
    padding: 0 5%; /* タイトル部分だけは左右に余白を持たせます */
}

.features-header h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.section-desc {
    color: #666666;
    font-size: 0.9rem;
}

/* --- 横スクロールの魔法 --- */
.cards-container {
    display: flex;
    gap: 20px; /* カード同士の隙間 */
    padding: 20px 5%; /* 最初と最後のカードの両端に余白を作る */
    overflow-x: auto; /* 横にスクロールできるようにする */
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
}

/* スクロールバーを見えなくする（デザインをスッキリさせるため） */
.cards-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari用 */
}
.cards-container {
    scrollbar-width: none; /* Firefox用 */
}

/* --- 個別のカードデザイン --- */
.feature-card {
    background-color: #ffffff;
    border-radius: 15px; /* カードの角を丸くする */
    width: 280px; /* カードの幅を固定する */
    flex-shrink: 0; /* ★重要：画面が狭くてもカードが縮まないようにする！ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 優しい影をつける */
    overflow: hidden; /* 画像が角丸からはみ出ないようにする */
    text-align: left; /* カードの中の文字は左揃え */
}

.feature-card img {
    width: 100%;
    height: 280px;
    object-fit: cover; /* 画像の比率を保ちながら枠を綺麗に埋める */
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-content p {
    font-size: 0.85rem;
    color: #555555;
    line-height: 1.6;
}
/* --- 6. 料金プランセクション --- */
.pricing-section {
    padding: 80px 5%;
    background-color: #ffffff; /* 背景を真っ白にして、カードを際立たせる */
    text-align: center; /* 全体を中央揃え */
}

.pricing-header {
    margin-bottom: 40px;
}

.pricing-header h2 {
    font-size: 2rem;
    line-height: 1.5;
}

/* --- プランカード全体のデザイン --- */
.pricing-card {
    max-width: 500px; /* カードが広がりすぎないように最大幅を設定 */
    margin: 0 auto; /* 画面のド真ん中に配置 */
    background-color: #ffffff;
    border: 3px solid var(--color-primary); /* オレンジ色の太めの枠線 */
    border-radius: 20px; /* 角を丸くする */
    overflow: hidden; /* 角丸からはみ出た画像を隠す */
    box-shadow: 0 15px 30px rgba(255, 106, 73, 0.15); /* オレンジ色の優しい影をつけて浮かせます */
}

/* --- 画像とバッジ（ラベル） --- */
.card-image-wrapper {
    position: relative; /* バッジの基準位置にするための重要なおまじない */
}

.card-image-wrapper img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block; /* 画像の下にできる謎の隙間を消す */
}

.badge {
    position: absolute; /* 画像の上に重ねる */
    top: 15px; /* 上からの位置 */
    right: 15px; /* 右からの位置 */
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* --- カード内のテキストと価格 --- */
.pricing-body {
    padding: 40px 30px; /* 内側にしっかり余白をとる */
}

.pricing-body h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.plan-desc {
    font-size: 0.9rem;
    color: #666666;
    margin-bottom: 25px;
}

.price {
    font-size: 3.5rem; /* 数字を特大に */
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 30px;
    line-height: 1;
}

.currency {
    font-size: 1.5rem; /* 「¥」マークは少し小さく */
    margin-right: 5px;
}

.tax {
    font-size: 0.9rem; /* 「税込」などは小さく */
    font-weight: normal;
    color: #888888;
    margin-left: 5px;
}

/* --- チェックリスト --- */
.feature-list {
    text-align: left; /* リストは左揃えに戻す */
    margin-bottom: 35px;
    display: inline-block; /* リスト全体を中央に寄せるためのテクニック */
}

.feature-list li {
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex; /* チェックマークとテキストを横並びに */
    align-items: center;
    gap: 10px;
}

.check-mark {
    color: var(--color-primary); /* チェックマークをオレンジ色に */
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- お申し込みボタンの調整 --- */
.full-width-btn {
    display: block; /* aタグをブロック要素にして幅を広げる */
    width: 100%; /* カード幅いっぱいに広げる */
    padding: 20px 0; /* 上下を分厚くして押しやすく */
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(255, 106, 73, 0.3); /* ボタンにも少し影をつける */
}
/* --- 6.5 お試し便（Trial Box）セクション --- */
.trial-section {
    padding: 80px 5%;
    background-color: var(--color-bg-base); /* 全体の背景は薄いベージュ */
}

.trial-container {
    display: flex; /* 左右に分割する */
    max-width: 1000px; /* カードの最大幅 */
    margin: 0 auto;
    background-color: #ffffff; /* カード本体は白色 */
    border-radius: 20px; /* カードの角を丸くする */
    overflow: hidden; /* 左側の画像の角も丸みに合わせるための魔法 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 優しい影 */
}

/* --- 左側：画像エリア --- */
.trial-image-area {
    flex: 1; /* 左右で均等に半分のスペースを取る */
    position: relative; /* 文字を上に重ねるための基準にする */
}

.trial-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったままエリアを埋める */
    display: block;
}

/* 画像の下部にだけ、文字を読みやすくするための暗い影（グラデーション）を敷く */
.trial-image-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* 下半分だけ */
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.trial-image-text {
    position: absolute; /* 画像の上に配置 */
    bottom: 40px; /* 下からの位置 */
    left: 40px; /* 左からの位置 */
    color: #ffffff;
    z-index: 1; /* グラデーションの影よりも手前（上）に表示させる */
}

.trial-label {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.trial-image-text h2 {
    font-size: 1.8rem;
    line-height: 1.4;
}

/* --- 右側：コンテンツエリア --- */
.trial-content-area {
    flex: 1; /* 左右で均等に半分のスペースを取る */
    padding: 60px 50px; /* 内側に広めの余白を取る */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 中身を縦の真ん中に寄せる */
}

.trial-content-area h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.trial-desc {
    font-size: 0.9rem;
    color: #555555;
    margin-bottom: 30px;
    line-height: 1.7;
}

/* --- アイコン付きリスト --- */
.trial-features {
    margin-bottom: 40px;
}

.trial-features li {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    background-color: #fff0eb; /* とても薄いオレンジ色 */
    color: var(--color-primary);
    border-radius: 50%; /* まん丸にする */
    display: flex;
    justify-content: center; /* 中のアイコン（絵文字）をド真ん中に */
    align-items: center;
    font-size: 1.5rem;
    flex-shrink: 0; /* テキストが長くても丸が潰れないようにする */
}

.feature-text h4 {
    font-size: 1rem;
    margin-bottom: 3px;
}

.feature-text p {
    font-size: 0.8rem;
    color: #777777;
}

/* --- ボタンと注釈 --- */
.trial-button {
    background-color: #3b2818; /* 濃い茶色 */
    color: #ffffff;
    text-align: center; /* 文字を真ん中に */
    padding: 20px;
    border-radius: 30px; /* 丸いボタン */
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 15px;
    transition: opacity 0.3s;
    display: block; /* 幅いっぱいに広げる */
}

.trial-button:hover {
    opacity: 0.8; /* マウスを乗せると少し透ける */
}

.trial-note {
    text-align: center;
    font-size: 0.75rem;
    color: #888888;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .trial-container {
        flex-direction: column; /* 横並びのカードを縦並びに変更 */
    }
    
    .trial-image-area {
        height: 350px; /* スマホの時は画像の高さを固定する */
    }
    
    .trial-image-text {
        bottom: 20px;
        left: 20px;
    }
    
    .trial-content-area {
        padding: 40px 20px; /* スマホの時は余白を少し狭める */
    }
}
/* --- 7. お客様の声セクション --- */
.voices-section {
    padding: 80px 5%;
    background-color: var(--color-bg-base); /* 再び薄いベージュの背景に戻す */
}

.voices-header {
    text-align: center;
    margin-bottom: 50px;
}

.voices-header h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* --- CSS Gridを使った賢いカード配置 --- */
.voices-grid {
    display: grid;
    /* ↓ここが魔法のコード。300px以上のカードを、入るだけ横に並べる設定です */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* カード同士の隙間 */
    max-width: 1100px;
    margin: 0 auto;
}

/* --- 個別のレビューカード --- */
.voice-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* ほんのり優しい影 */
    display: flex;
    flex-direction: column; /* カードの中身を縦並びにする */
}

.stars {
    color: var(--color-primary); /* 星をオレンジ色に */
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.voice-card h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.voice-card p {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.7;
    flex-grow: 1; /* ★重要：テキストが短くても、この部分を伸ばして下のユーザー情報を下に押しやる */
    margin-bottom: 25px;
}

/* --- ユーザー情報（アイコンと名前） --- */
.user-info {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 縦の真ん中で揃える */
    gap: 15px;
}

.user-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 画像を綺麗な丸にする */
    object-fit: cover;
}

.user-details {
    display: flex;
    flex-direction: column; /* 名前と年齢を縦並びに */
}

.user-name {
    font-weight: bold;
    font-size: 0.95rem;
}

.user-child {
    font-size: 0.8rem;
    color: #888888;
}
/* --- 8. FAQ（よくある質問）セクション --- */
.faq-section {
    padding: 80px 5%;
    background-color: #ffffff; /* 白背景 */
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.faq-container {
    max-width: 800px; /* 読みやすい幅に制限 */
    margin: 0 auto;
}

/* --- アコーディオン本体 --- */
.faq-item {
    background-color: var(--color-bg-base); /* 薄いベージュ */
    margin-bottom: 15px;
    border-radius: 10px;
}

/* --- 質問部分（クリックできる場所） --- */
.faq-question {
    padding: 20px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer; /* マウスカーソルを指のマークにする */
    display: flex;
    justify-content: space-between; /* テキストとアイコンを両端に離す */
    align-items: center;
    list-style: none; /* デフォルトの黒い矢印を消す */
}

/* Safariブラウザ用のデフォルト矢印消し */
.faq-question::-webkit-details-marker {
    display: none; 
}

/* --- 右側のオレンジ色アイコン（＋と－） --- */
.faq-icon {
    width: 30px;
    height: 30px;
    background-color: var(--color-primary); /* オレンジ色 */
    border-radius: 50%;
    position: relative;
    flex-shrink: 0; /* テキストが長くてもアイコンを潰さない */
}

/* アイコンの中の白い線（横線と縦線を組み合わせて＋を作る） */
.faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中に配置 */
}

/* 横線 */
.faq-icon::before {
    width: 14px;
    height: 2px;
}

/* 縦線 */
.faq-icon::after {
    width: 2px;
    height: 14px;
    transition: transform 0.3s; /* 回転を滑らかにする */
}

/* 開いた時（details[open]）は、縦線を消して「－」にする */
details[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg); /* 縦線を横に倒す */
    opacity: 0; /* 透明にして見えなくする */
}

/* --- 答えの部分 --- */
.faq-answer {
    padding: 0 25px 25px; /* 上は0、左右と下に余白 */
    color: #555555;
    line-height: 1.7;
}

/* --- FAQ下部のお問い合わせリンク --- */
.faq-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
    color: #666666;
}

.text-link {
    color: var(--color-primary);
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
    transition: opacity 0.3s;
}

.text-link:hover {
    opacity: 0.7; /* マウスを乗せると少し透ける */
}
/* --- 9. フッター --- */
.site-footer {
    background-color: var(--color-footer); /* 最初に設定した濃い緑色（#1a332b） */
    color: #ffffff; /* 文字はすべて白 */
    padding: 60px 5% 20px; /* 上に60px、左右に5%、下に20pxの余白 */
}

.footer-container {
    display: flex;
    justify-content: space-between; /* 左と右に離して配置 */
    max-width: 1100px; /* 広がりすぎないように制限 */
    margin: 0 auto; /* 中央揃え */
    gap: 40px; /* 左右のブロックの隙間 */
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 薄く半透明の白い線を引く */
}

/* --- 左側のブランド情報 --- */
.footer-brand {
    flex: 1; /* スペースを確保 */
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-primary); /* ロゴ部分だけオレンジ色でアクセント */
}

.footer-message {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.8; /* 文字を少しだけ透明にして、落ち着いた印象にする */
}

/* --- 右側のリンク集 --- */
.footer-links {
    display: flex;
    gap: 60px; /* 列と列の間の隙間 */
}

.link-column h4 {
    font-size: 1rem;
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 0.05em; /* 文字の間隔を少し開ける */
}

.link-column li {
    margin-bottom: 12px; /* リンク同士の縦の隙間 */
}

.link-column a {
    font-size: 0.85rem;
    color: #ffffff;
    opacity: 0.6; /* 通常時は少し薄くしておく */
    transition: opacity 0.3s; /* ふわっと色が変わるアニメーション */
}

.link-column a:hover {
    opacity: 1; /* マウスを乗せたら、透明度をなくして真っ白（100%）にする */
}

/* --- コピーライト --- */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-size: 0.8rem;
    opacity: 0.5; /* 目立ちすぎないように薄く */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* 全体を縦並びに変更 */
        gap: 40px;
    }
    
    .footer-links {
        flex-direction: column; /* リンク集の列も縦並びに変更 */
        gap: 30px;
    }
}