/* ========================================
   台湾祭 in 奈良橿原 2026
   style.css
   ----------------------------------------
   カラー変数を変えるだけで別会場に転用可能
======================================== */

/* ========================================
   Meyer Reset
======================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, abbr, address, blockquote, cite, code,
del, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, b, u, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, menu, nav, output, section, summary, time, audio, video {
    margin: 0; padding: 0; border: 0;
    font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, menu, nav, section { display: block; }
body        { line-height: 1; }
ol, ul      { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a   { text-decoration: none; }
img { max-width: 100%; display: block; }

/* ========================================
   CSS変数
   ※ 別会場転用時はここだけ変更する
======================================== */
:root {
    /* メインカラー */
    --color-primary:       #0091d5;
    --color-primary-dark:  #006fa3;
    --color-primary-light: #33b3e8;

    /* アクセントカラー（黄） */
    --color-accent:       #f5c200;
    --color-accent-light: #ffd740;
    --color-accent-dark:  #d4a600;

    /* テキスト・背景 */
    --color-white:      #ffffff;
    --color-dark:       #1a2e3d;
    --color-text:       #1e3a4f;
    --color-text-light: #4a6a7a;
    --color-bg-sns:     #f0f4f8;

    /* ナビ */
    --nav-height:    70px;
    --nav-height-sp: 60px;

    /* 角丸 */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 40px;

    /* 影 */
    --shadow-sm: 0 2px 8px  rgba(0,145,213,0.12);
    --shadow-md: 0 4px 20px rgba(0,145,213,0.20);
    --shadow-lg: 0 8px 40px rgba(0,145,213,0.25);

    --transition: 0.3s ease;
}

/* ========================================
   ベース・フォント
======================================== */
html { scroll-behavior: smooth; }

html, body {
    background-color: #ffffff;
    background-image: url("../img/back.png");
    background-size: 200px auto;
    background-repeat: repeat;
    color: var(--color-text);
}

/* 日本語見出し */
body h1,
body h2 {
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.35;
}

/* 英語ラベル・サブタイトル */
body h3 {
    font-family: "fot-tsukuardgothic-std", futura-pt, "Century Gothic", sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
}

body h4, body h5, body h6,
body p, body table, body a {
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 2;
}

/* ========================================
   フェードイン
======================================== */
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}
.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/* ========================================
   ボタン
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all var(--transition);
    border: none;
    cursor: pointer;
}
.btn::after {
    content: "›";
    font-size: 18px;
    line-height: 1;
}

/* 黄色ボタン（メイン）*/
.btn-accent {
    background: var(--color-accent-light);
    color: var(--color-dark);
    border: 2px solid var(--color-accent-light);
    box-shadow: 0 2px 8px rgba(245,194,0,0.25);
}
.btn-accent:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(245,194,0,0.32);
}

/* 白アウトラインボタン（青背景上） */
.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 2.5px solid var(--color-white);
}
.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* テキストカラーユーティリティ */
.t-primary { color: var(--color-primary) !important; }

/* ========================================
   グローバルナビゲーション
======================================== */
#global-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 1000;
    background: var(--color-primary);
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
#global-nav.scrolled {
    background: rgba(0,145,213,0.70);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}

.nav-inner {
    max-width: 1200px;
    width: 94%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.nav-logo img { height: 44px; width: auto; }
.nav-logo-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    line-height: 1;
    letter-spacing: 0.04em;
    font-family: "source-han-sans-japanese", sans-serif;
    white-space: nowrap;
    padding-bottom: 3px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-menu a {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.90);
    letter-spacing: 0.08em;
    border-radius: var(--radius-xl);
    transition: color var(--transition);
    position: relative;
}
.nav-menu a::after {
    content: "";
    position: absolute;
    bottom: 4px; left: 16px; right: 16px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
    border-radius: 2px;
}
.nav-menu a:hover { color: #ffffff; }
.nav-menu a:hover::after { transform: scaleX(1); }

.nav-menu .nav-contact {
    background: var(--color-accent-light);
    color: var(--color-dark);
    font-weight: 700;
    padding: 8px 20px;
    border: 2px solid var(--color-accent-light);
    transition: background var(--transition), border-color var(--transition);
}
.nav-menu .nav-contact::after { display: none; }
.nav-menu .nav-contact:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none; border: none;
    cursor: pointer; padding: 4px;
    border-radius: var(--radius-sm);
}
.nav-hamburger span {
    display: block;
    width: 100%; height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}
#global-nav.open .nav-hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#global-nav.open .nav-hamburger span:nth-child(2) { opacity: 0; }
#global-nav.open .nav-hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-drawer {
    display: none;
    position: fixed;
    top: var(--nav-height-sp); left: 0;
    width: 100%;
    background: var(--color-primary);
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#global-nav.open .nav-drawer {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}
.nav-drawer ul { padding: 16px 0 8px; }
.nav-drawer ul li a {
    display: block;
    padding: 14px 24px;
    font-size: 15px; font-weight: 700;
    color: rgba(255,255,255,0.90);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: color var(--transition), background var(--transition);
}
.nav-drawer ul li:last-child a { border-bottom: none; }
.nav-drawer ul li a:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
}
.drawer-contact {
    display: block;
    margin: 16px 24px 24px;
    padding: 14px;
    text-align: center;
    background: var(--color-accent);
    color: var(--color-dark);
    border-radius: var(--radius-xl);
    font-weight: 700; font-size: 14px;
}

/* ========================================
   ヒーロー
======================================== */
#hero {
    width: 100%;
    padding-top: var(--nav-height);
}
#hero img { width: 100%; display: block; }

/* ========================================
   セクション共通
   padding の大きめの値は青背景の skewY はみ出し吸収のため
======================================== */
.section-base {
    width: 100%;
    padding: 140px 0 200px;
    position: relative;
    z-index: 0;
}

.container {
    max-width: 1000px;
    width: 94%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* 白背景：html/body の back.png をそのまま継承 */
.section-white { /* 追加スタイルなし */ }

/* 青背景：skewY で斜め切り */
.section-blue::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    z-index: -1;
    width: 100%; height: 100%;
    background: var(--color-primary);
    transform: skewY(-4deg);
    transform-origin: top left;
}

/* SNS：薄グレー背景・斜めなし・padding を短く */
.section-sns {
    background-color: var(--color-bg-sns);
    background-image: none;
    padding: 60px 0;
}

/* コンタクト：青背景・斜めなし・padding を短く */
.section-contact {
    background-color: var(--color-primary);
    background-image: none;
    padding: 60px 0;
}
.section-contact > .container { position: relative; z-index: 1; }

/* ========================================
   見出し共通
   基準サイズ：CONTACT（h3=13px / h2=34px）
======================================== */

/* 英語ラベル（fot-tsukuardgothic） */
.section-label {
    display: inline-block;
    font-family: "fot-tsukuardgothic-std", futura-pt, "Century Gothic", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 10px;
}

/* SCHEDULE DETAIL のみ丸枠あり */
.schedule-card-label {
    display: inline-block;
    font-family: "fot-tsukuardgothic-std", futura-pt, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    background: rgba(0,145,213,0.07);
    padding: 6px 18px;
    border-radius: var(--radius-xl);
    border: 2px solid rgba(0,145,213,0.22);
    margin-bottom: 24px;
}

/* 日本語タイトル（全セクション共通） */
.section-title {
    font-size: 34px;
    color: var(--color-dark);
    line-height: 1.35;
    margin-bottom: 20px;
}
.section-title.white  { color: var(--color-white); }

/* サブタイトル（fot-tsukuard） */
.section-subtitle {
    font-family: "fot-tsukuardgothic-std", futura-pt, "Century Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.8;
    letter-spacing: 0.08em;
}
.section-subtitle.white { color: rgba(255,255,255,0.92); }

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

/* ========================================
   #schedule セクション
======================================== */
.schedule-card-wrap { position: relative; }

.schedule-card {
    background: #dceef9;
    border: 2.5px solid #8dc8e8;
    border-radius: var(--radius-lg);
    padding: 50px 8%;
    box-shadow: var(--shadow-md);
    position: relative;
}
.schedule-card p {
    font-size: 15px;
    line-height: 2.1;
    color: var(--color-text);
}

.tainan-logo     { width: 120px; margin-top: 24px; }
.tainan-logo img { width: 100%; }

.schedule-photo {
    position: absolute;
    right: -4%;
    bottom: -90px;
    width: 280px;
    z-index: 3;
}
.schedule-photo img {
    width: 100%;
    border-radius: var(--radius-md);
    border: 5px solid #f0f0f0;
    box-shadow: var(--shadow-md);
}

.btn-box {
    text-align: center;
    margin-top: 110px;
}

/* ========================================
   #food セクション
======================================== */

/* ランタン装飾（セクション端からはみ出す） */
.food-deco {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
.food-deco-tl { top: -50px;    left: 3%;  width: 240px; }
.food-deco-br { bottom: -50px; right: 4%; width: 240px; }
.food-deco img { width: 100%; }

/* メイン画像 */
.food-main-img {
    margin: 40px auto 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 4px solid rgba(255,255,255,0.30);
}
.food-main-img img { width: 100%; }

/* キャプション */
.food-caption {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    text-align: right;
    margin-top: 6px;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* コラボレーション：grid 2列（写真 44% / タイトル+カード 56%） */
.collabo-wrap {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 44% 56%;
    grid-template-rows: auto auto;
    align-items: start;
}

.collabo-img {
    grid-column: 1;
    grid-row: 1 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 5px solid rgba(255,255,255,0.30);
    position: relative; z-index: 1;
}
.collabo-img img { width: 100%; display: block; }

.collabo-header {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 20px 40px;
}
.collabo-header h3 {
    font-family: "fot-tsukuardgothic-std", futura-pt, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent-light);
    margin-bottom: 10px;
}
.collabo-header h2 {
    font-size: 34px;
    color: var(--color-white);
    line-height: 1.35;
}

/* テキストカード（写真に重なる・半透明青） */
.collabo-text-card {
    grid-column: 2;
    grid-row: 2;
    margin-left: -15%;
    position: relative; z-index: 2;
    background: rgba(0,120,200,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: var(--radius-lg);
    padding: 36px 8%;
    box-shadow: var(--shadow-md);
}
.collabo-text-card .drink-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-accent-light);
    margin-bottom: 16px;
    line-height: 1.35;
}
.collabo-text-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    line-height: 1.9;
}

/* ========================================
   #what セクション
   grid 2列（写真 44% / ロゴ+カード 56%）
   ※ collabo-wrap と同じグリッド構成
======================================== */
.what-wrap {
    display: grid;
    grid-template-columns: 44% 56%;
    grid-template-rows: auto auto;
    align-items: start;
    margin-bottom: 60px;
}

.what-left {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative; z-index: 1;
}
.what-img-main {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 5px solid #f0f0f0;
}
.what-img-main img { width: 100%; }

.what-right-header {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 20px 40px;
}
.what-header-logo     { max-width: 260px; }
.what-header-logo img { width: 100%; }

/* テキストカード（collabo-text-card と同スタイル） */
.what-text-card {
    grid-column: 2;
    grid-row: 2;
    margin-left: -15%;
    position: relative; z-index: 2;
    background: rgba(0,120,200,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: var(--radius-lg);
    padding: 36px 8%;
    box-shadow: var(--shadow-sm);
}
.what-text-card h2 {
    font-size: 26px;
    color: var(--color-white);
    margin-bottom: 22px;
}
.what-text-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    line-height: 2.05;
}

/* YouTube */
.movie-wrap { margin-top: 40px; margin-bottom: -40px; }
.youtube-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.youtube-container iframe {
    position: absolute;
    top: -2px; left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: none;
    display: block;
}

/* ========================================
   SNS セクション
======================================== */
.sns-inner { text-align: center; }
.sns-inner .section-label { color: var(--color-accent); }
.sns-title {
    font-size: 34px;
    color: var(--color-primary);
    line-height: 1.35;
    margin-bottom: 0;
}
.sns-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}
.sns-links a img {
    width: 64px; height: 64px;
    transition: transform var(--transition);
}
.sns-links a:hover img { transform: scale(1.1); }

/* ========================================
   コンタクト セクション
======================================== */
.contact-inner {
    text-align: center;
    position: relative; z-index: 1;
}
.contact-inner h3 {
    font-family: "fot-tsukuardgothic-std", futura-pt, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent-light);
    margin-bottom: 10px;
}
.contact-inner h2 {
    font-size: 34px;
    color: var(--color-white);
    margin-bottom: 14px;
}
.contact-inner p {
    font-size: 15px;
    color: rgba(255,255,255,0.88);
    margin-bottom: 28px;
}

/* ========================================
   フッター
======================================== */
footer { background: var(--color-dark); }

.footer-nav {
    max-width: 900px; width: 90%;
    margin: 0 auto;
    padding: 28px 0 20px;
    text-align: center;
}
.footer-nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
.footer-nav ul li a {
    display: inline-block;
    padding: 8px 18px;
    font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,0.70);
    letter-spacing: 0.1em;
    transition: color var(--transition);
}
.footer-nav ul li a:hover { color: var(--color-accent-light); }

.footer-copy { background: rgba(0,0,0,0.30); text-align: center; padding: 14px; }
.footer-copy p { font-size: 12px; color: rgba(255,255,255,0.50); letter-spacing: 0.1em; }

/* ========================================
   ページトップボタン
======================================== */
#page-top {
    position: fixed;
    bottom: 32px; right: 28px;
    width: 52px; height: 52px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(245,194,0,0.50);
    z-index: 900;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#page-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
#page-top:hover   { background: var(--color-accent-dark); transform: translateY(-2px); }
#page-top svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: var(--color-dark);
    stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ========================================
   SP 改行制御
======================================== */
@media screen and (min-width: 769px) { .br-sp { display: none; } }

/* ========================================
   レスポンシブ（SP: ≤768px）
======================================== */
@media screen and (max-width: 768px) {

    html, body { background-size: 50px auto; }

    /* ナビ */
    .nav-menu      { display: none; }
    .nav-hamburger { display: flex; }
    .nav-drawer    { display: block; }
    .nav-logo img  { height: 36px; }
    .nav-logo-text { font-size: 12px; }
    #hero          { padding-top: var(--nav-height-sp); }

    /* セクション共通 */
    .section-base    { padding: 80px 0 100px; }
    .section-sns     { padding: 40px 0; }
    .section-contact { padding: 40px 0; }

    /* schedule のみ上余白を詰める */
    #schedule.section-base      { padding-top: 50px; }
    #schedule .section-header   { margin-bottom: 24px; }
    #food .section-header       { margin-bottom: 20px; }

    /* 見出し */
    .section-title    { font-size: 24px; }
    .section-subtitle { font-size: 15px; }
    .sns-title        { font-size: 24px; }

    /* schedule */
    .schedule-card   { padding: 30px 6%; }
    .schedule-card p { font-size: 13px; }
    .schedule-photo  {
        position: absolute;
        right: -2%; bottom: -60px;
        width: 160px;
    }
    .schedule-photo img { border-width: 3px; }
    .btn-box         { margin-top: 80px; }

    /* food */
    .food-deco-tl { width: 140px; top: -30px; }
    .food-deco-br { width: 140px; bottom: -30px; }
    .food-main-img { margin-top: 20px; }

    /* コラボ */
    .collabo-wrap  { display: block; }
    .collabo-img   { width: 100%; max-width: 340px; margin: 0 auto; }
    .collabo-header { padding: 20px 0 0; text-align: center; }
    .collabo-header h2 { font-size: 24px; }
    .collabo-text-card { margin-left: 0; margin-top: 20px; }
    .collabo-text-card .drink-title { font-size: 20px; }
    .collabo-text-card p { font-size: 13px; }

    /* 台湾祭とは */
    .what-wrap     { display: block; margin-bottom: 40px; }
    .what-left     { width: 100%; max-width: 340px; margin: 0 auto; }
    .what-right-header { padding: 20px 0 0; text-align: center; }
    .what-header-logo  { max-width: 180px; margin: 0 auto; }
    .what-text-card    { margin-left: 0; margin-top: 20px; padding: 36px 8%; }
    .what-text-card h2 { font-size: 20px; }
    .what-text-card p  { font-size: 13px; }

    /* SNS */
    .sns-links a img { width: 50px; height: 50px; }

    /* コンタクト */
    .contact-inner h2 { font-size: 24px; }
    .contact-inner p  { font-size: 13px; }

    /* フッター */
    .footer-nav { padding: 20px 0 14px; }
    .footer-nav ul { flex-direction: column; align-items: center; }
    .footer-nav ul li { border-top: 1px solid rgba(255,255,255,0.08); width: 100%; }
    .footer-nav ul li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .footer-nav ul li a { display: block; padding: 14px 20px; text-align: left; width: 100%; }

    #page-top { bottom: 20px; right: 16px; width: 46px; height: 46px; }
}

/* ========================================
   メールフォーム（info.php / confirm.php / send.php）
======================================== */

/* ナビ */
.info-page-nav {
    position: sticky;
    top: 0; width: 100%;
    height: var(--nav-height);
    background: var(--color-primary);
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    z-index: 100;
    display: flex; align-items: center;
    padding: 0 5%;
}
.info-page-nav a {
    display: flex; align-items: flex-end;
    gap: 10px; text-decoration: none;
}
.info-page-nav img { height: 44px; width: auto; }

/* フォームセクション */
.form-section {
    padding: 80px 0 60px;
    min-height: 60vh;
}

/* タイトル */
.form-header {
    text-align: center;
    margin-bottom: 50px;
}
.form-header .section-label { display: block; margin-bottom: 10px; }
.form-title-ja {
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
    font-size: 42px; font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.1em; line-height: 1.2;
}

/* 注意書き */
.form-notes {
    margin-bottom: 48px;
    background: #e8f4fb;
    border-left: 4px solid var(--color-primary-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 20px 24px;
}
.form-notes p { font-size: 14px; line-height: 2; color: var(--color-text); }

/* フォームカード */
.form-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 56px 8%;
    box-shadow: 0 8px 48px rgba(0,145,213,0.12);
    border: 1px solid #c8dff0;
}

/* フォームグループ */
.form-group { margin-bottom: 32px; }

.form-label {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 10px;
}
.badge-required {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 10px;
    background: var(--color-primary-light);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 20px; letter-spacing: 0.06em;
    flex-shrink: 0;
}
.label-text {
    font-size: 15px; font-weight: 700;
    color: var(--color-text); letter-spacing: 0.05em;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-input,
.form-textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
    color: var(--color-text);
    background: #f0f7fc;
    border: 1.5px solid #b8d5ea;
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
    -webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: #90b0c8; }
.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0,145,213,0.12);
}
.form-textarea { min-height: 200px; resize: vertical; line-height: 1.8; }

.form-submit { text-align: center; margin-top: 48px; }

/* 送信ボタン */
.btn-submit {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 16px 72px;
    font-size: 16px; font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
    background: var(--color-primary);
    border: none; border-radius: var(--radius-xl);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(0,145,213,0.35);
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
}
.btn-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,145,213,0.45);
}

/* 修正するボタン */
.btn-back-form {
    display: inline-flex; align-items: center;
    gap: 6px;
    padding: 15px 40px;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text);
    background: #e8f4fb;
    border: 1.5px solid #b8d5ea;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
}
.btn-back-form:hover { background: #cce5f5; transform: translateY(-2px); }

/* 確認テーブル */
.confirm-lead {
    text-align: center;
    font-size: 15px; color: var(--color-text);
    line-height: 2; margin-bottom: 40px;
    padding-bottom: 36px;
    border-bottom: 1.5px solid #c8dff0;
}
.confirm-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }
.confirm-table th,
.confirm-table td {
    padding: 18px 20px;
    font-size: 14px; line-height: 1.9;
    border-bottom: 1px solid #d8eaf5;
    text-align: left; vertical-align: top;
}
.confirm-table th {
    width: 32%; font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
}
.confirm-table td { color: var(--color-text); }
.confirm-table tr:last-child th,
.confirm-table tr:last-child td { border-bottom: none; }

.confirm-message-text {
    white-space: pre-wrap;
    font-family: "source-han-sans-japanese", "Noto Sans JP", sans-serif;
}

.form-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; margin-top: 48px; flex-wrap: wrap;
}

/* エラーボックス */
.error-box {
    background: #fff0f0;
    border: 1.5px solid #f5b8b8;
    border-radius: var(--radius-sm);
    padding: 20px 24px; margin-bottom: 36px;
}
.error-box p { font-size: 14px; color: #c0392b; line-height: 2; }

/* WEBページへ戻るセクション */
.back-to-web { background: var(--color-primary); padding: 80px 0; text-align: center; }
.back-to-web-inner {
    display: inline-flex; flex-direction: column;
    align-items: center; gap: 32px;
}
.back-to-web p {
    font-size: 16px; font-weight: 500;
    color: rgba(255,255,255,0.92);
    line-height: 1.9; letter-spacing: 0.06em;
}
.btn-back-to-web {
    display: inline-flex; align-items: center;
    gap: 10px; padding: 16px 56px;
    font-size: 15px; font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    background: #ffffff;
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.btn-back-to-web span { font-size: 20px; line-height: 1; }
.btn-back-to-web:hover {
    background: var(--color-accent-light);
    color: var(--color-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* サンクスページ */
.thanks-card {
    max-width: 680px; width: 94%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 70px 10%;
    box-shadow: 0 8px 48px rgba(0,145,213,0.12);
    border: 1px solid #c8dff0;
    text-align: center;
}
.thanks-icon {
    width: 72px; height: 72px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 28px;
}
.thanks-icon svg,
.error-icon svg {
    width: 36px; height: 36px;
    fill: none; stroke: #fff;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.error-icon {
    width: 72px; height: 72px;
    background: #e74c3c;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 28px;
}
.thanks-label {
    font-family: "fot-tsukuardgothic-std", futura-pt, "Century Gothic", sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 12px;
}
.thanks-card h1 {
    font-size: 32px; font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.08em; margin-bottom: 28px;
}
.thanks-divider {
    width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
    margin: 0 auto 28px;
}
.thanks-card p {
    font-size: 15px; line-height: 2.1;
    color: var(--color-text); margin-bottom: 14px;
}
.thanks-note {
    margin-top: 32px; padding: 18px 20px;
    background: #e8f4fb;
    border-left: 4px solid var(--color-primary-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px; color: var(--color-text-light);
    line-height: 2; text-align: left;
}
.thanks-btn-wrap { margin-top: 44px; }
.btn-home {
    display: inline-flex; align-items: center;
    gap: 8px; padding: 15px 52px;
    font-size: 15px; font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(0,145,213,0.30);
}
.btn-home:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,145,213,0.40);
}

/* ========================================
   SP（フォームページ）
======================================== */
@media screen and (max-width: 768px) {
    .info-page-nav     { height: var(--nav-height-sp); }
    .info-page-nav img { height: 36px; }

    .form-section  { padding: 50px 0 40px; }
    .form-title-ja { font-size: 30px; }
    .form-card     { padding: 36px 6%; }
    .form-row      { grid-template-columns: 1fr; gap: 12px; }
    .btn-submit    { padding: 15px 50px; font-size: 15px; }

    .back-to-web   { padding: 60px 0; }
    .back-to-web p { font-size: 14px; }
    .btn-back-to-web { padding: 14px 40px; font-size: 14px; }

    .thanks-card   { padding: 50px 7%; }
    .thanks-card h1 { font-size: 24px; }
    .thanks-card p  { font-size: 14px; }

    .confirm-table th { width: 38%; font-size: 13px; }
    .confirm-table td { font-size: 13px; }
    .btn-submit       { padding: 15px 44px; font-size: 14px; }
    .btn-back-form    { padding: 14px 28px; font-size: 13px; }
    .form-actions     { gap: 16px; }
}