/* アトリエパティオ デザイン・システム */

/* 1. リセット & ベース */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    color: #0F172A;
    background-color: #F8FAFC;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 2. 余白の定義 - セクション間 */
.section-gap {
    margin-top: 80px;
    margin-bottom: 80px;
}

@media (min-width: 1024px) {
    .section-gap {
        margin-top: 120px;
        margin-bottom: 120px;
    }
}

/* 3. セクション見出し (master_4-1.jpg) */
.section-title-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

@media (max-width: 640px) {
    .section-title-wrap {
        width: 80%;
        height: 80px;
    }
}



.section-title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 4. パララックス効果 (iOS Safari対応版) */
.parallax-container {
    position: relative;
    clip-path: inset(0); /* 子要素をこの範囲に切り抜く */
}

.parallax-bg {
    position: fixed; /* 常に画面に対して固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* 5. インタラクション & 装飾 */
.scroll-line {
    animation: scroll-anim 2s infinite cubic-bezier(0.8, 0, 0.2, 1);
}

@keyframes scroll-anim {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* Scroll Top Button Visibility */
#scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-10px);
}

/* Mobile Menu Transition */
#mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}



/* 6. 画像の扱い共通 */
img {
    vertical-align: bottom;
    object-fit: cover;
}

/* 7. ボタン類 */
.cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* 8. Utility: Vertical Margin fix for seamless join */
.vertical-bottom {
    vertical-align: bottom;
}

/* 9. Service Section Background (Dynamic Aurora Gradient & Moving Lines) */
.bg-service-gradient {
    position: relative;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 35%, #BFDBFE 65%, #EFF6FF 100%);
    background-size: 300% 300%;
    animation: serviceAurora 15s ease-in-out infinite alternate;
    overflow: hidden;
}

.bg-service-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(29, 78, 216, 0.05) 0px,
        rgba(29, 78, 216, 0.05) 2px,
        transparent 2px,
        transparent 80px
    );
    background-size: 200% 200%;
    animation: serviceLines 20s linear infinite;
    pointer-events: none;
}

@keyframes serviceAurora {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}

@keyframes serviceLines {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 160px 160px;
    }
}

/* 10. Menu Section Background (Brown Check) */
.bg-menu-check {
    background-color: #fcf9f5;
    background-image: 
        linear-gradient(90deg, rgba(139, 69, 19, 0.04) 50%, transparent 50%),
        linear-gradient(rgba(139, 69, 19, 0.04) 50%, transparent 50%);
    background-size: 60px 60px;
}

/* 11. Signature Drawing Title (Common - 武道・毛筆スタイルへ強化) */
.signature-title {
    font-family: 'Yuji Syuku', 'Zen Maru Gothic', serif !important; /* 本格的な毛筆フォントを適用 */
    font-size: 2.75rem;
    font-weight: 700;
    font-style: normal;
    color: #0F172A; /* より引き締まった墨汁・濃紺のようなダークカラー */
    display: inline-block;
    line-height: 1.4;
    letter-spacing: 0.15em;
    padding: 0.25em 0.5em;
    position: relative;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    white-space: nowrap;
    text-shadow: 1px 1px 0px rgba(29, 78, 216, 0.12); /* ほのかな青い立体シャドウ */
}

/* タイトル下の武道帯（黒帯・青帯）をイメージした太いアンダーライン */
.signature-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #1D4ED8 30%, /* 道場の青帯 */
        #0F172A 50%, /* 黒帯を模した墨色 */
        #1D4ED8 70%, 
        transparent 100%
    );
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}

/* スクロールして表示された時にアニメーション開始 */
.signature-title.is-visible {
    animation: reveal-signature 1.5s ease-in-out forwards;
}

.signature-title.is-visible::after {
    transform: scaleX(1);
}

@media (max-width: 1024px) {
    .signature-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 640px) {
    .signature-title {
        font-size: 1.85rem;
        letter-spacing: 0.1em;
        padding: 0.2em 0.4em;
    }
}

@keyframes reveal-signature {
    0% { 
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateY(15px);
    }
    10% {
        opacity: 1;
    }
    100% { 
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(0);
    }
}

/* 12. Button Style 21 (Square with Shadow) */
.button-21 {
    display: block;
}

.button-21 a {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #666;
    font-weight: 700;
    outline: 1px solid #d1d1d1;
    display: block;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center; 
    padding: 16px 10px;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s;
    background: #fff;
}

.button-21 a::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    z-index: -1;
    transition: all 0.3s ease;
}

.button-21 a:hover::before {
    top: 0;
    left: 0;
}

/* 個別カラー（白に近い極めて淡いトーン） */
.button-21:nth-child(1) a::before { background: #FAF3E0; } /* 非常に淡いアイボリー */
.button-21:nth-child(2) a::before { background: #EBF4F5; } /* 非常に淡いミストブルー */
.button-21:nth-child(3) a::before { background: #F5EBEB; } /* 非常に淡いシェルピンク */
.button-21:nth-child(4) a::before { background: #EDF5EB; } /* 非常に淡いペールグリーン */

/* 13. Service Section Fukidashi Style */
.fukidashi-10 {
    position: relative;
    display: inline-block;
    padding: 10px 32px;
    border: solid 1px #FACC15; /* アクセントカラー：エナジーイエロー */
    transform: skewX(-25deg);
    background-color: #FACC15; /* アクセントカラー：エナジーイエロー */
    color: #0F172A;
    margin-bottom: 40px;
    width: fit-content;
    font-family: 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.1em;
}

/* 傾きを打ち消して文字を直立させる */
.fukidashi-10 span {
    display: inline-block;
    transform: skewX(25deg);
}

.fukidashi-10::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 20%;
    height: 25px;
    width: 25px;
    border-right: 2px solid #FACC15; /* アクセントカラー：エナジーイエロー */
    transform: rotate(40deg);
}

/* 数字強調用 */
.fukidashi-digit {
    font-size: 1.8em;
    font-weight: 700;
    margin-left: 8px;
    line-height: 1;
    vertical-align: baseline;
}

/* 14. FV Section (Static Style) */
.fv-section-static {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    margin-top: 80px;
    overflow: hidden;
    z-index: 50;
    background-color: #F8FAFC;
}

.fv-section-static .fv-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1024px) {
    .fv-section-static {
        height: 70vh;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .fv-section-static {
        height: auto;
        aspect-ratio: 16/9;
        margin-top: 80px;
    }
}
/* 15. Gallery Flowing Animation Fix */
.gallery-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* 16. インラインから移行したタイトル・フォント設定 */
/* グローバルな和文タイトル設定 */
h1,
h2,
h3,
h4,
.section-title {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    color: #1D4ED8 !important;
    font-weight: 700 !important;
}

/* 英字タイトル用の優先設定 */
.en-title,
.en-font,
.about-title-drawn,
.section-title.en-font {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700;
}

/* 17. 指導員アバターの浮遊・インタラクションアニメーション */
.staff-avatar {
    animation: staff-float 3.5s ease-in-out infinite alternate;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.staff-avatar:nth-child(1) { animation-delay: 0s; }
.staff-avatar:nth-child(2) { animation-delay: 0.4s; }
.staff-avatar:nth-child(3) { animation-delay: 0.8s; }
.staff-avatar:nth-child(4) { animation-delay: 1.2s; }
.staff-avatar:nth-child(5) { animation-delay: 1.6s; }

@keyframes staff-float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

.staff-avatar img {
    transition: all 0.4s ease;
    border: 3px solid #1D4ED8; /* メインカラーの枠線 */
    object-position: center 20%; /* 顔が中央〜上部に見えるようにトリミング位置を調整 */
}

.staff-avatar:hover {
    transform: scale(1.15) rotate(4deg) translateY(-8px);
    z-index: 30;
}

.staff-avatar:hover img {
    border-color: #FACC15; /* ホバーでエナジーイエローに切り替え */
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.2);
}

/* 18. 指導員正方形無限横スライダー（PC・SP共通カルーセル・画像サイズ拡大） */
:root {
    --staff-img-size: 200px;
    --staff-gap: 16px;
}

@media (max-width: 768px) {
    :root {
        --staff-img-size: 140px;
        --staff-gap: 12px;
    }
}

.staff-sp-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 15px 0;
}

.staff-sp-track {
    display: flex;
    /* 10枚の要素幅＋ギャップ */
    width: calc(var(--staff-img-size) * 10 + var(--staff-gap) * 10);
    animation: staff-sp-loop 22s linear infinite;
    gap: var(--staff-gap);
}

/* ホバー時にスライダーをピタッと一時停止させる（PC等のホバー環境用） */
.staff-sp-slider-container:hover .staff-sp-track {
    animation-play-state: paused;
}

.staff-sp-slide {
    width: var(--staff-img-size);
    height: var(--staff-img-size);
    flex-shrink: 0;
}

.staff-sp-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* 顔トリミング */
    border-radius: 8px; /* 角を少し丸めた正方形 */
    border: 3px solid #1D4ED8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 画像ホバー時のインタラクティブ演出 */
.staff-sp-slide img:hover {
    transform: scale(1.08) translateY(-4px); /* 少し大きく浮き上がる */
    border-color: #FACC15; /* ホバーでイエローの枠線に切り替え */
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.15);
}

@keyframes staff-sp-loop {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 5枚分（全体の半分）進んだらループ */
        transform: translateX(calc(-1 * (var(--staff-img-size) * 5 + var(--staff-gap) * 5)));
    }
}

/* 19. 本文テキストのグローバル調整（左揃え & SP時のサイズ14px化） */
p, 
ul li, 
ol li {
    text-align: left !important;
}

/* SPサイズ（スマホ）時の本文フォントサイズを14pxにする設定 */
@media (max-width: 768px) {
    p, 
    ul li, 
    ol li, 
    .text-base {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }
}

/* 20. 追加微調整 */
/* 口コミ注記：SPでは左寄せ、PC（769px〜）では中央寄せ */
.review-note {
    text-align: left !important;
}
@media (min-width: 769px) {
    .review-note {
        text-align: center !important;
    }
}

/* 会費セクションのテキスト文字色を黒に変更 */
#menu-recommend p,
#menu-recommend h3 {
    color: #0F172A !important;
}

/* 21. スマホ固定CTAボタンの配色保障（白飛び防止） */
.sp-fixed-tel-btn {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
    border: 1px solid #1D4ED8 !important;
}
.sp-fixed-contact-btn {
    background-color: #FACC15 !important;
    color: #0F172A !important;
}

/* 22. アクセス・フッター・こんな方におすすめの文字色を黒に指定 */
#problems h3,
#problems p {
    color: #0F172A !important;
}

#contact,
#contact h3,
#contact span,
#contact a,
#contact div {
    color: #0F172A !important;
}

footer,
footer a,
footer p,
footer span {
    color: #0F172A !important;
}

/* 23. スマホサイズ（1024px以下）時の会費セクション・表示整合（固定背景の適用・背景画像切り替え） */
@media (max-width: 1024px) {
    #menu-recommend {
        height: auto !important;
        min-height: 0 !important;
    }
    #menu-recommend .parallax-bg {
        position: fixed !important;
        height: 100% !important;
        top: 0 !important;
        background-image: url('../img/bg1.jpg') !important;
    }
}

/* 24. スマホサイズ（768px以下）時の道場について背景画像切り替え */
@media (max-width: 768px) {
    #about {
        background-image: url('../img/aboutbgsp.jpg') !important;
    }
}

/* 25. 道場についてセクション背景オーバーレイの左右グラデーションアニメーション */
.about-overlay-gradient {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(224, 242, 254, 0.9) 50%, 
        rgba(255, 255, 255, 0.95) 100%
    );
    background-size: 200% 100%;
    animation: aboutGradientMove 12s ease-in-out infinite;
}

@keyframes aboutGradientMove {
    0% {
        background-position: 0% 50%;
        opacity: 0.95; /* 背景画像を薄く見せる（オーバーレイを濃くする） */
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.45; /* 背景画像をはっきり見せる（オーバーレイを薄くする） */
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.95; /* 背景画像を薄く見せる（オーバーレイを濃くする） */
    }
}

/* 26. スクロールふわっと表示アニメーション (クラス紹介セクション用) */
.reveal-item {
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 左から右へスライドイン */
.reveal-left {
    transform: translateX(-80px);
}

/* 右から左へスライドイン */
.reveal-right {
    transform: translateX(80px);
}

/* モバイル表示時も左右から斜め上へ交差スライドするかっこいい動きを適用 */
@media (max-width: 1024px) {
    .reveal-left {
        transform: translateX(-45px) translateY(20px);
    }
    .reveal-right {
        transform: translateX(45px) translateY(20px);
    }
    .reveal-item {
        transition-duration: 1.1s;
    }
}

/* アクティブ（表示状態）のスタイル */
.reveal-item.is-revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* 27. 体験者の声（Voice）セクション：静止したかっこいい武道スリット背景 */
.bg-voice-animated {
    position: relative;
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%); /* 清潔感のある明るいミストグレー */
    overflow: hidden;
    z-index: 1;
}

/* タイトルの色は明るい背景に合わせて元の渋い墨色に戻す */
.bg-voice-animated .signature-title {
    color: #0F172A !important;
    text-shadow: 1px 1px 0px rgba(29, 78, 216, 0.12);
}
.bg-voice-animated .signature-title::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #1D4ED8 30%, /* 道場の青帯 */
        #0F172A 50%, /* 黒帯 */
        #1D4ED8 70%, 
        transparent 100%
    );
}

/* 注記テキスト（Googleマップ体験口コミより抜粋）の文字色も元のグレーに戻す */
.bg-voice-animated .review-note {
    color: #94A3B8 !important;
}

/* 静止グラフィカルライン共通設定（アニメーションなし） */
.bg-voice-animated::before,
.bg-voice-animated::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 25px; /* 太いグラフィカルライン */
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
}

/* 左上を飾る静止イエローのスラッシュ */
.bg-voice-animated::before {
    top: 5%;
    left: -20%;
    transform: rotate(-25deg);
    background: linear-gradient(90deg, 
        #FDE047 0%, /* 明るいイエロー */
        #FACC15 60%, /* ゴールドイエロー */
        #EAB308 80%, /* 深みのあるゴールド */
        transparent 100%
    );
    filter: drop-shadow(0 4px 8px rgba(234, 179, 8, 0.25));
}

/* 右下を飾る静止イエローのスラッシュ */
.bg-voice-animated::after {
    bottom: 8%;
    right: -25%;
    transform: rotate(-25deg); /* 同じ平行角度で美しくレイアウト */
    background: linear-gradient(270deg, 
        #FDE047 0%, 
        #FACC15 60%, 
        #EAB308 80%, 
        transparent 100%
    );
    filter: drop-shadow(0 4px 8px rgba(234, 179, 8, 0.25));
}

/* 27.5. Q&Aアコーディオンのスタイル */
#qa {
    background-color: #F8FAFC !important; /* 明るい薄グレー背景 */
}
.qa-item {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}
.qa-item summary::-webkit-details-marker {
    display: none; /* デフォルトの三角矢印を削除 */
}
.qa-item summary {
    outline: none;
    user-select: none;
    color: #0F172A !important; /* 質問テキストを濃いネイビーに強制 */
}
.qa-item summary span {
    color: #0F172A !important;
}
/* QとAのマークの色 */
.qa-item summary .rounded-full {
    border-color: #0F172A !important;
    color: #0F172A !important;
}
/* プラス・マイナスのトグルアイコン表示 */
.qa-item .qa-toggle-icon::before {
    content: "+";
    display: inline-block;
    transition: transform 0.2s ease;
    color: #475569 !important; /* グレー */
}
.qa-item[open] .qa-toggle-icon::before {
    content: "−"; /* マイナス記号 */
    color: #0F172A !important;
}
/* 回答エリアの背景とテキスト */
.qa-item .bg-slate-100 {
    background-color: #F1F5F9 !important; /* 薄グレー背景 */
    border-top-color: #E2E8F0 !important;
}
.qa-item .bg-slate-100 p,
.qa-item .bg-slate-100 span {
    color: #334155 !important; /* 回答テキストを濃いグレーに強制 */
}
.qa-item .bg-slate-100 a {
    color: #1D4ED8 !important; /* リンクを青に強制 */
    text-decoration: underline !important;
}

/* 28. 流れるマーキーバナー（Marquee）アニメーション */
.marquee-banner {
    position: relative;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.15); /* 少し影をつけて浮かび上がらせる */
}

.marquee-track {
    animation: marqueePlay 28s linear infinite;
}

/* ホバー時に一時停止させて可読性を上げる演出 */
.marquee-banner:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marqueePlay {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 29. 指導員セクション（Staff）武道テイスト対角ラインアニメーション */
#staff {
    position: relative;
    background-color: #FFFFFF;
    overflow: hidden;
}

/* 左上の青い帯（道場の帯や突きの軌道をイメージした鋭い斜めライン） */
#staff::before {
    content: "";
    position: absolute;
    width: 180%;
    height: 120px; /* 太さを大幅アップ */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(29, 78, 216, 0.25) 30%, 
        rgba(29, 78, 216, 0.5) 50%, 
        rgba(29, 78, 216, 0.25) 70%, 
        transparent 100%
    );
    top: 5%; /* 位置を画面内側に寄せる */
    left: -40%;
    transform: rotate(-35deg); /* 左上から右下へ並行する角度 */
    z-index: 1; /* 白背景の上、文字コンテンツの下に確実に配置 */
    pointer-events: none;
    animation: martialSlash1 8s ease-in-out infinite alternate;
}

/* 右下の黄色の帯（力強さを表すアクセントカラーの斜めライン） */
#staff::after {
    content: "";
    position: absolute;
    width: 180%;
    height: 140px; /* 太さを大幅アップ */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(250, 204, 21, 0.22) 30%, 
        rgba(250, 204, 21, 0.45) 50%, 
        rgba(250, 204, 21, 0.22) 70%, 
        transparent 100%
    );
    bottom: 5%; /* 位置を画面内側に寄せる */
    right: -40%;
    transform: rotate(-35deg); /* 右下から左上へ並行する角度 */
    z-index: 1; /* 白背景の上、文字コンテンツの下に確実に配置 */
    pointer-events: none;
    animation: martialSlash2 10s ease-in-out infinite alternate;
}

@keyframes martialSlash1 {
    0% {
        transform: rotate(-35deg) translateY(-25px) scaleX(0.85);
        opacity: 0.5;
    }
    100% {
        transform: rotate(-35deg) translateY(25px) scaleX(1.1);
        opacity: 1;
    }
}

@keyframes martialSlash2 {
    0% {
        transform: rotate(-35deg) translateY(35px) scaleX(1.1);
        opacity: 1;
    }
    100% {
        transform: rotate(-35deg) translateY(-35px) scaleX(0.85);
        opacity: 0.4;
    }
}

/* 特徴バッジ吹き出し用 常に走るラインアニメーション (実線が流れる仕様) */
@keyframes stroke-dash-move {
    to {
        stroke-dashoffset: -370;
    }
}
.animate-stroke-move {
    stroke-dasharray: 80 290;
    animation: stroke-dash-move 2.5s linear infinite;
}