@charset "UTF-8";

/*
SP対応（768px未満）
----------------------------------------------------------- */
@media screen and (max-width: 767px) {

/* ---------- 共通 ---------- */
:root {
    --space-section: 60px;
}
body {
    overflow-x: hidden; /* 左の隙間や横揺れを完全に防ぐ */
}
.wrapper {
    width: 100%;
    padding: 0 16px;
}
.sec-ttl {
    font-size: var(--fz-xl-m);
    padding-top: 60px;
}
.lead {
    font-size: var(--fz-base);
    line-height: 1.7;
    padding-bottom: 30px;
    text-align: left;
}
.pc-only {
    display: none;
}
.sp-only {
    display: block;
}
.sp-fixed-banner {
    display: block;
    position: fixed;
/* ★ポイント1：下から少し浮かせて、横幅を90%くらいに絞る */
    bottom: 15px;
    left: 5%;
    width: 90%; 
    z-index: 500; /* 固定要素の中で中間層 */
    line-height: 0;
/* ★ポイント2：角を少し丸めて、影を強くすると「浮いている」感が出ます */
    border-radius: 15px;
    overflow: hidden; /* 画像の角も丸める */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}
.sp-fixed-banner img {
    width: 100%;
    height: auto;
    display: block;
}
/* --- スマホ版プライマリーボタンの見た目を固定 --- */
.btn-primary {
    background: #231815;      /* 最初から黒背景 */
    color: var(--color-white); /* 文字を白に */
    border: none;
    max-width: 100%; 
    width:100%; 
    padding: 15px 0px;
    height: 52px; 
    font-size: var(--fz-base); /* 16px */
    margin: 0 auto; /* 中央寄せ */
    }

/* 右側の矢印アイコンの色も白にする */
.btn-primary::after {
    color: var(--color-white);
}

/*
header
----------------------------------------------------------- */
.header {
    height: 70px;
/* ヘッダーの背景もグリッドにする */
    background-color: var(--color-white);
    background-image:none;
}
.header .wrapper {
    padding: 0 16px;
}
.logo img {
    width: 150px;
}
.header-btns {
    display: flex;
    gap: 15px; /* ボタン同士の隙間 */
    flex-direction: column;
    width: 100%;
    margin-top: 40px;
}
.btn-header {
    width: 100%;
}
/* ハンバーガー表示 */
.menu {
    display: block;
    position: relative;
    z-index: 1100; /* グロナビより上 */
    width: 30px; height: 25px;
    background: none; border: none;
}
.menu span {
    position: absolute; left: 0; width: 100%; height: 3px;
    background: var(--color-text); transition: 0.3s;
}
.menu span:nth-child(1) { top: 0; }
.menu span:nth-child(2) { top: 10px; }
.menu span:nth-child(3) { top: 20px; }
/* ×印のアニメーション */
.menu.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu.active span:nth-child(2) { opacity: 0; }
.menu.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.nav {
    position: fixed;
    top: 0;
    right: 0; /* ★右端に配置 */
    width: 70%; /* スマホは70% */
    height: 100vh;
    background-color: var(--color-white);
    z-index: 1000; /* オーバーレイより上 */
    padding: 100px 40px; /* 上はロゴを避ける、左右は余白 */
        
/* ★スライドのアニメーション（初期状態：右に隠しておく） */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: block !important; /* JSで消さず、transformで制御します */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}
/* メニューが開いた（openクラスが付いた）時 */
.nav.open {
    transform: translateX(0); /* 元の位置に戻る（スチャッ！） */
}
/* メニューリスト（左揃え・下線） */
.nav-list {
    flex-direction: column;
    align-items: flex-start; /* ★左揃え */
    gap: 0;
}
.nav-list li {
    width: 100%;
/* ★下線を引く */
    border-bottom: 1px solid #eee; 
}
.nav-link {
    display: block;
    padding: 20px 0; /* タップしやすい高さに */
    font-size: var(--fz-mb);
    color: var(--color-text);
    text-align: left;
}
/* 背景を暗くする「幕」の演出（グロナビ以外の部分） */
body.noscroll::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 50; /* 全ての固定要素より下 */
    pointer-events: auto; /* クリック可能にする */
}

/*
Main Visual
----------------------------------------------------------- */
.mv-content {
    position: relative;
    height: 75vh; /* 縦にしっかり高さを出す */
    min-height: 600px;
    display: flex;
    flex-direction: column;
/* ★ポイント1：文字を「下」に寄せる */
    justify-content: flex-end; 
    align-items: flex-start;
/* ★ポイント2：下端に少し余白を作る（バナーと被らない程度に） */
    padding: 0 20px 80px; 
/* ★ポイント3：画像はずらさず中央(center)で固定、すかしも無し */
    background-image: url(../img/mv.webp)
linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 75% center; 
    overflow: hidden;
}
/* 文字エリアの微調整：少しだけ影を強くして、手元のロボットと重なっても読めるように */
.mv-bg {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* キャッチエリアの余白リセット */
.mv-ttl, .mv-subttl {
    padding: 0;
    margin: 0;
    background: transparent;
}
/* 画像キャッチのサイズ */
.mv-catch-01 {
    height: 40px;
    width: auto;
    margin-bottom: 8px;
}
.mv-catch-02 {
    height: 40px;
    width: auto;
    margin-bottom: 30px;
}
/* 年長・小学生向け */
.mv-grade {
    font-size: 1rem;
    margin-bottom: 12px;
    background: linear-gradient(transparent 65%, var(--color-accent) 65%);
    padding: 0 0.2em;
}
/* ロボットプログラミング教室 */
.mv-class {
    font-size: 1.15rem;
    padding: 0.3em 0.8em;
    letter-spacing: 0.05em;
}
/* ステッカーは非表示 */
.btn-mv-trial {
    display: none;
}

/*
sec01 About
----------------------------------------------------------- */
.catch {
    font-size: var(--fz-mb);
    line-height: 1.6;
}
.gear-large {
    width: 300px;
    left: auto;
    right: -100px;
    top: -80px;
}
.gear-small {
    width: 200px;
    left: -120px;
}

/*
Video Area (Fukidashi & Tablet Video)
----------------------------------------------------------- */
.video-area {
    text-align: center;
    margin-top: 40px; /* 余白を少し詰めました */
    padding-bottom: var(--space-section);
}
/* ＼ はじめてでも大丈夫 ／ のスタイル */
.fukidashi {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
/* ★サイズを小さく (24px相当から20pxへ) */
    font-size: 1.25rem; 
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
}
/* 左右の線の長さを調整 */
.fukidashi::before,
.fukidashi::after {
    content: "";
    width: 25px; /* 40pxから短くしました */
    height: 1.5px;
    background-color: var(--color-text);
}
/* タブレット枠の設定 */
.tablet-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
/* ★修正：50pxから20px〜30px程度に下げる */
    border-radius: 30px; 
}
/* 先生の「枠が上」手法の微調整 */
.tablet-img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
    pointer-events: none; /* クリックを透過 */
    border-radius: 30px;
}
/* ★動画のサイズと位置の「黄金比」微調整 */
.tablet-video {
    position: absolute;
/* 上下左右の中央に配置 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
/* 画像の「穴」のサイズに合わせて微調整 */
/* スクリーンショットを見る限り、もう少し小さくするとピッタリはまります */
    width: 93%;  /* 95%から86%に絞る */
    height: auto; /* 高さを調整して黒い縁を見せる */
    
    object-fit: cover;
    z-index: 1; /* 枠の下 */
    border-radius: 20px; /* 角を丸めて枠になじませる */
}
/* 再生ボタンも少し小さく */
.play-guide {
    width: 60px;  /* 80pxから変更 */
    height: 60px; /* 80pxから変更 */
    z-index: 20;
}
.play-guide i {
    font-size: 20px; /* アイコンも小さく */
}

/*
sec02 Course
----------------------------------------------------------- */
.card-container {
    display: flex;
    flex-direction: column; /* 縦に積む */
    gap: 20px;
}
.card {
    width: 100%; /* ★重要：スマホでは横幅をいっぱいまで使う */
}
/* コースカード内のテキストエリア */
.card > div {
    padding: 20px 25px 30px; /* 30px 35px 45px から大幅に削減 */
}
.card-ttl {
    font-size: var(--fz-ms); /* 20px相当に */
    margin-bottom: 10px;
}
.card-txt {
    font-size: var(--fz-xs); /* 14px相当に：少し小さい方が「詰まっている感」が出ます */
    line-height: 1.6;
}

/*
sec03 出張授業
----------------------------------------------------------- */
.box-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.box {
    padding: 25px 20px; /* 40pxから25pxへ：上下を詰めると圧迫感が減ります */
    box-shadow: 4px 4px 0 var(--color-primary); /* 影を8pxから4pxへ：スマホでは細い方が綺麗です */
}
.box-point {
    font-size: 1.5rem; /* Point 01などの文字を少し小さく */
    margin-bottom: 10px;
}
.box-icon {
    width: 70px; /* アイコンも一回り小さく */
    height: 70px;
    margin-bottom: 10px;
}
.box-ttl {
    font-size: var(--fz-base); /* 20px相当に */
}

/*
sec04 QA
----------------------------------------------------------- */
.sec04 {
    position: relative; 
    background-image: none; 
    background-attachment: scroll; 
    clip-path: inset(0);
}

.sec04::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)), 
    url(../img/sec04-01.webp);
    background-position: center; 
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1; 
}

.accordion-a-content-wrapper {
    padding: 20px 20px 20px;
}

.news-container {
    padding: 20px;
}

.news-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 0;
}

.news-meta {
    width: 100%;
    margin-bottom: 10px;
}

.news-date {
    font-size: 1rem;
    margin-right: 15px;
}

.news-category {
    padding: 2px 15px;
    min-width: 80px;
    font-size: 0.8rem;
}

.news-link {
    font-size: 0.95rem;
}


/*
sec05 Access
----------------------------------------------------------- */
.access-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.access-img-wrapper {
    width: 100%;
}

/*
footer
----------------------------------------------------------- */
.footer-main {
    flex-direction: column;
    gap: 40px; 
    text-align: center;
    padding-bottom: 50px; 
}
.footer-nav .nav-link {
    padding: 0;
}
.footer-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; 
}



/* ---------- ABT-MV (ここから添削なし) ---------- */
.abt-mv {
    min-height: 320px; 
    margin-top: 70px
    }
.abt-mv .sec-ttl {
    font-size: var(--fz-xl-m); 
}
.abt-mv .sub-ttl {
    font-size: var(--fz-s);
    z-index: 10;
}

.abt-mv-circles {
    display: none;
}

/* ---------- ABT-SEC01 (3つのポイント) ---------- */
.abt-ttl{
    font-size: var(--fz-ms);
    margin-bottom: 30px;
}
.abt-point-item {
    flex-direction: column; /* 縦並び */
    gap: 30px;
}
.abt-point-img {
    flex: 0 0 100%; /* 横幅いっぱい */
}
.abt-point-num {
    font-size: 2rem; /* 数字を少し小さく */
}
.abt-point-content .card-ttl {
    font-size: var(--fz-mb); /* 18px */
}
.abt-point-separator {
    margin-top: 30px;
}

/* ---------- ABT-SEC02 (身に付く3つの力) ---------- */
    /* 1. リストのレイアウト調整 */
.abt-sec02-list {
    flex-direction: column;
    align-items: center;
    gap: 80px; 
    margin-top: 30px;
}

/* 2. アイテム全体（ここに矢印の基準を作る） */
.abt-sec02-item {
    width: 100%;
    max-width: 320px;
    position: relative; 
    text-align: center;
    }

/* 3. PC版の「円の横の矢印」を非表示にする */
.abt-sec02-circle::after {
    display: none ;
}

/* 4. スマホ版の「下向き矢印」の設定 */
.abt-sec02-item::after {
    content: "\f04b"; /* playアイコン */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    bottom: -55px; 
    transform: translateX(-50%) rotate(90deg);
    font-size: 1.2rem;
    color: #333;
    z-index: 2;
    display: block;
}

/* 5. 最後の要素の下には矢印を出さない */
.abt-sec02-item:last-child::after {
    display: none;
}

.abt-sec02-item-ttl {
    font-size: var(--fz-m);

}

/* 6. その他の微調整 */
.abt-sec02-circle img {
    width: 90%; /* 円の幅に合わせる */
    margin-bottom: 15px;
}

.abt-sec02-txt {
    max-width: 100%;
    text-align: left;
}

/* ---------- ABT-SEC03 (講師紹介) ---------- */
.abt-sec03-decor{
    display: none;
}

.abt-founder-container {
    flex-direction: column-reverse; /* 写真を上に、テキストを下に */
    gap: 30px;
}
.abt-founder-img {
    flex: 0 0 auto;
    width: 100%;
}
.abt-founder-heading {
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-align: center;
}
.abt-founder-name {
    text-align: center; /* 名前を中央に */
}

/* ---------- ABT-SEC04 (チェックリスト) ---------- */
.abt-sec04 {
    padding-bottom: 120px; /* V字の深さを浅くする分調整 */
    /* スマホ用にV字を浅くする */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
}
.abt-ttl span {
    font-size: var(--fz-ms);
}
.abt-notebook-box {
    padding: 2.5em 1.2em 1.5em; /* 余白を削る */
}
.abt-check-list li {
    font-size: 0.9375rem; /* 15px */
    align-items: flex-start; /* 長文になってもいいように上揃え */
}
.abt-check-list li i {
    margin-top: 4px; /* チェックアイコンの位置微調整 */
}

/* ---------- ABT-SEC05 (CTA・スライダー) ---------- */
.abt-sec05 {
    margin-top: -120px; /* 上のV字と合わせる */
    padding: 140px 0 60px;
}
/* スマホではギアを隠してスッキリさせる */
.abt-sec05 .gear-box {
    display: none;
}
/* スライダーの画像サイズ調整 */
.slide-contents li {
    width: 260px; /* スマホサイズ */
}
.slide-contents li img {
    height: 180px;
}
.btn-yellow::after {
    color: var(--color-btn-text);
}

/* ---------- CRS-SEC02 ---------- */
.sec-ttl-sub {
    font-size: var(--fz-ms);
}

.course-list {
    gap: 20px; /* カード同士の間隔を詰める */
}

.course-item {
    flex-direction: column; /* 縦並びにする */
    padding: 30px 20px; /* 内側の余白を削減して圧迫感をなくす */
    gap: 25px; /* テキストと画像の間隔 */
    align-items: flex-start;
    scroll-margin-top: 80px; 
}

.course-body {
    width: 100%;
    order: 2; /* テキストを下に */
}

.course-img {
    width: 100%;
    flex: none;
    order: 1; /* 画像を上に */
}

.course-img img {
    width: 100%;
    /* ★重要：画像のアスペクト比を固定（例：16:9） */
    /* これで画像が読み込まれる前でも高さが確保されます */
    aspect-ratio: 16 / 9; 
    object-fit: cover;
    background-color: #eee; /* 読み込み前の下地 */
}

.course-title {
    font-size: var(--fz-base); 
    margin-bottom: 15px;
}

.course-meta {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap;     
    gap: 15px;           
    margin-bottom: 15px;
}

.meta-tag {
    font-size: var(--fz-xs); 
}

.meta-tag .label {
    padding: 4px 12px;
    margin-right: 6px;
}

.course-desc {
    line-height: 1.6;
}

/* ---------- 4. 料金表（横スクロール対応） ---------- */

.price-table-wrapper {
    overflow-x: auto; /* ★重要：画面からはみ出る表を横スクロール可能に */
    margin: 0 -20px;  /* 画面端まで表を広げる */
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

.price-table {
    min-width: 600px; /* 表が潰れないように最小幅を固定 */
}

.price-table th, .price-table td {
    padding: 15px 10px;
    font-size: 0.875rem;
}

.price-table td.t-name {
    font-size: 0.8rem;   /* デフォルトの0.9remから少し小さく */
    padding: 10px 4px;   /* 左右の余白を詰めて文字が入るスペースを確保 */
    line-height: 1.3;    /* 改行された時に重なりすぎないように調整 */
    word-break: break-all; /* 枠内で強制的に折り返す設定 */
}

.t-name {
    font-size: var(--fz-xs);
}

.crs-sec04{
    margin-top: 0;
    padding: 0;
}

/* ---------- OUTREACH---------- */
/* ---------- 1. 全体設定 ---------- */
.out-sec01, .out-sec02, .out-sec03, .out-sec04 {
    padding-bottom: 30px; 
}

.scene-list {
    flex-direction: column; 
    align-items: center;
    gap: 60px; 
    margin-top: 30px;
}

.scene-item {
    width: 100%;
    max-width: 300px; 
}

.scene-img {
    width: 80%; 
    margin: 0 auto ;
}

.scene-item h4 {
    font-size: var(--fz-mb); 
    margin-bottom: 10px;
}

/* ---------- 3. 授業の流れ (重要：縦型へ変更) ---------- */
.flow-list {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.flow-item {
    width: 100%;
    max-width: 400px;
    padding: 30px 20px 45px;
    /* スマホ用：下に向かうシェイプに変更 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%, 0% 0%);
}

.flow-item:first-child {
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
}

/* ---------- 4. Contactエリア (青い部分) ---------- */
.out-sec05 {
    margin-top: 0;
    padding: 0;
}
.out-contact .abt-cta-box {
    clip-path: polygon(0 80px, 50% 0, 100% 80px, 100% 100%, 0 100%);
    margin-top: -80px;
    padding-top: 130px;
}

.contact-container {
    flex-direction: column; /* 縦並び */
    gap: 20px;
    margin-top: 30px;
}

.contact-card {
    width: 100%;
    padding: 25px 15px;
}

.contact-info-inner {
    gap: 15px; /* アイコンと文字の隙間を詰める */
}

.contact-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
}

.contact-main-text {
    font-size: 1.375rem; /* 22px相当：スマホの幅に合わせて調整 */
}

.contact-sub-text {
    font-size: var(--fz-base); /* 16px */
}

/* 文字グループの点線幅を再調整 */
.contact-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せにして文字と線の開始位置を揃える */
    width: fit-content;      /* ★重要：これがないと線が右に突き抜けます */
    margin: 0;               /* 中央寄せマージンなどをリセット */
}

/* 点線パーツの幅を「文字の幅」に対して100%にする */
.contact-text-group .abt-point-separator {
    width: 100% ; /* 親の文字幅に対して100%にする */
    margin: 5px 0 ; /* 上下の隙間を調整（左右は0にする） */
    height: 12px;            /* 点線の上下の厚み */
    background-size: 12px 100%; /* ドットの間隔をスマホ用に少し詰める */
    background-position: left center; /* 左端からドットを開始 */
    }

.contact-main-text {
    font-size: 1.375rem; /* スマホで見やすいサイズ（約22px） */
    line-height: 1.2;
    margin: 0;
}

/* ============================================================
お知らせページ (trial.html) スマホ対応
   ============================================================ */
.detail-container {
    padding: 30px 20px;
    margin: 0 15px 60px;
}

.detail-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.detail-body {
    font-size: 0.95rem;
}
.news-detail-content{
    padding-top: 30px ;
}
/* ============================================================
無料体験会ページ (trial.html) スマホ対応
   ============================================================ */

.abt-mv.trial-page-mv {
    min-height: auto;
    padding-top: var(--space-section) ;
    padding-bottom: 0 ;
}

.trial-page-mv .trial-mv-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0px;
}

.trial-page-mv .trial-mv-text {
    padding-bottom: 10px;
}

.trial-badge {
    font-size: var(--fz-base);
}

.trial-page-mv .trial-main-copy {
    font-size: 1.8rem; /* 文字サイズをスマホ用に縮小 */
    white-space: normal;
}

.trial-page-mv .trial-mv-img {
    width: 100%;
    max-width: 400px;
}

/* --- SEC01: キャンペーンボックス --- */
.trial-sec01 {
    padding: 60px 0;
}

.campaign-box {
    padding-top: 70px ; /* 以前より多めに空けて、タイトルを下げます */
}

/* 2. ステッカーの位置とサイズを微調整 */
.campaign-sticker {
    width: 100px;  /* 少しサイズを抑える */
    top: -50px;    /* 枠線の外側（上）へもっと逃がす */
    right: 0px;    /* 端に寄せる */
    z-index: 20;   /* 重なり順を一番上にする */
}

.campaign-ttl img {
    max-width: 100%; /* タイトル画像がはみ出さないように */
}

.benefit-container {
    flex-direction: column; /* 特典を縦並びにする */
    align-items: center;
    gap: 15px;
}

.benefit-card {
    width: 100%;
    max-width: 100%;
}


/* --- SEC02: できること (ボックス) --- */
.trial-sec02 .box-list {
    flex-direction: column;
    align-items: center;
    gap: 40px; /* 影が被らないように広めの隙間 */
}

.trial-sec02 .box {
    width: 100%;
    max-width: 320px; /* 横幅を制限して中央に */
    padding: 30px 15px;
}

.trial-sec02 .box::after {
    top: 6px; /* 影のズレを少し控えめに */
    left: 6px;
}

.flow-list {
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
}

.flow-item {
    padding: 70px 20px 60px; /* 鋭角にする分、上下余白を少し増やして文字を保護 */
    
    /* --- 鋭角にカスタマイズ --- */
    /* 上の凹みを「15%」、下の凸を「100%」まで尖らせる設定 */
    clip-path: polygon(0% 0%, 50% 15%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
    
    /* 食い込みも深くして、隙間を絶妙に残す */
    margin-top: -25px; 
}

/* 1つ目：上をフラットに */
.flow-item:first-child {
    margin-top: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
}

/* 3つ目：下をフラットに */
.flow-item:last-child {
    clip-path: polygon(0% 0%, 50% 15%, 100% 0%, 100% 100%, 0% 100%);
}

/* 数字丸の位置調整（凹みが深くなった分、少し下げる） */
.flow-num {
    margin-top: 15px;
}


.flow-body {
    text-align: center; /* スマホでは中央寄せが見やすい */
}

/* --- SEC04: FAQ (アコーディオン) --- */
.accordion-q button {
        padding: 20px 50px 20px 20px; /* 右側のアイコン位置を調整 */
}

.accordion-q-prefix, .accordion-a-prefix {
    font-size: 1.2rem;
    margin-right: 15px;
}

.accordion-q-content {
    font-size: 0.95rem;
}

/* --- SEC05: フォーム --- */
.trial-sec05 {
    padding: 50px 0;
}

.form-intro {
    text-align: left; /* 長い文は左寄せの方が読みやすい */
    font-size: 0.9rem;
}

.form-container {
    padding: 0;
}

.form-label {
    font-size: 1rem;
}

.btn-submit {
    width: 100%; /* 送信ボタンを横幅いっぱいに */
    max-width: 300px;
    }
}