/* ========== Modern CSS Reset (lightweight) ========== */
/* Box sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margin */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/* Lists reset */
ul[role='list'], ol[role='list'] { list-style: none; }

/* Set core body defaults */
html { scrollbar-gutter: stable; }
html:focus-within { scroll-behavior: smooth; }
body { 
    min-height: 100%;
}

/* Media defaults */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* Form elements */
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; -webkit-appearance: none; appearance: none; }

/* Anchor reset */
a { 
    color: #0230fc; 
    text-decoration: none; 
}

a:hover {
    color: #24357e;
    text-decoration: underline;
}

/* 電話番号リンクのスタイル */
a[href^="tel:"] {
    color: #000000;
    text-decoration: none; /* 下線を削除 */
}

a[href^="tel:"]:hover {
    color: #24357e;
    text-decoration: none; /* 下線を削除 */
}

/* Improve text rendering */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Focus styles */
:focus-visible { outline: 2px solid #839ec9; outline-offset: 2px; }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; }

/* ========== End Reset ========== */
/* テーブル: line-table */
table.line-table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: auto;
    margin: 20px 0;
}

table.line-table th,
table.line-table td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
}

table.line-table tr:nth-child(odd) {
    background-color: #f8f8f8;
}

table.line-table tr:nth-child(even) {
    background-color: white;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Jost', 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    line-height: 1.6;
    color: #000;
    overflow-x: hidden;
    width: 100%;
}

/* p の禁則胥吏 */
p, li {
    word-wrap: break-word;
    letter-spacing: 0.05em;
    line-break: strict;
    hanging-punctuation: allow-end; /* または 'force-end' など */
  }

/* ロゴ */
.component-logo-container {
    position: fixed;
    top: 20px;
    left: clamp(20px, 8vw, 175px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    opacity: 1;
    transform: translateY(0);
}

.component-logo-container.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.component-text-junior-sports {
    color: white;
    font-size: clamp(0.7rem, 1.1rem, 1.4rem);
    font-weight: 600;
    font-family: 'IBM Plex Sans JP', sans-serif;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
    line-height: 1;
    margin-left: -5px;
}

.component-logo {
    width: 110px;
    height: auto;
    border-radius: 12px;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

/* メニューボタン */
.menu-button {
    position: fixed;
    top: 35px; /* ロゴ画像の高さに合わせて少し下げる */
    right: clamp(20px, 8vw, 175px); /* content-hero-rightの右位置に合わせる */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.menu-button img {
    width: 26px; /* PC・タブレットで26pxに固定 */
    height: auto;
    filter: brightness(0) invert(1); /* ロゴと同じく白色に */
    transition: all 0.3s ease;
    cursor: pointer;
}

.menu-button:hover img {
    opacity: 0.7;
}

/* メニュー閉じるボタン（menu-buttonと同じスタイル） */
.menu-close-btn {
    position: relative; /* fixedを解除してスクロールに追従 */
    cursor: pointer;
    width: 26px;
    height: auto;
    filter: none;
    align-self: flex-start; /* 上端に配置（padding-top: 20pxの位置） */
    margin-top: 15px; /* padding-top: 20px + margin-top: 15px = 35px（元のtop: 35px相当） */
    flex-shrink: 0; /* 縮小しない */
}

.menu-close-btn:hover {
    opacity: 0.7;
}

/* メニューボタン（他のページ用） */
.page-menu-button {
    position: relative; /* スクロールに追従 */
    cursor: pointer;
    width: 26px;
    height: auto;
    filter: brightness(0); /* 黒色 */
    align-self: flex-start; /* 上端に配置（padding-top: 20pxの位置） */
    margin-top: 15px; /* padding-top: 20px + margin-top: 15px = 35px（元のtop: 35px相当） */
    flex-shrink: 0; /* 縮小しない */
    transition: opacity 0.3s ease;
}

.page-menu-button:hover {
    opacity: 0.7;
}

/* メニューオーバーレイ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* スクロールバーの幅を含まない幅を使用してレイアウトシフトを防ぐ */
    height: 100%;
    background-color: #ffffff;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* menu-overlay内のhead-headerを通常のページと同じ位置に配置 */
.menu-overlay .head-header {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px; /* PC・スマホ共通で20pxに設定 */
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    top: 0;
}

/* スマホ画面でmenu.htmlのヘッダーの下マージンを20pxに */
@media (max-width: 480px) {
    .menu-overlay .head-header {
        margin-bottom: 20px; /* PCと同じ20pxに統一 */
    }
}

.menu-overlay-content {
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    background-color: #fff;
    margin: auto;
    padding: 2rem;
    overflow-y: auto;
    position: relative;
}


/* ヒーローセクション */
.section-hero {
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    z-index: 0;
    background-color: transparent; /* 動画の背景を透過させる */
    pointer-events: none; /* セクション自体はクリックを受け取らない */
}

/* video */

/* 通常の動画（上位レイヤー） */
.video-box-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none; /* 動画はクリックイベントを受け取らない */
    /* z-indexのtransitionを削除して即座に変更 */
  }

.video-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 縦いっぱい、左右は中央からトリミング */
    object-position: center center;
    opacity: 0;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
    z-index: 0;
    visibility: hidden;
    pointer-events: none; /* 動画はクリックイベントを受け取らない */
  }

.video-main.fade-in {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out, visibility 0s;
}

/* ヒーローコンテンツ */
.content-hero {
    position: fixed;
    top: 120px;
    left: clamp(20px, 8vw, 175px);
    z-index: 1000;
    max-width: 800px;
    padding: 0;
    text-align: left;
    opacity: 0;
    transition: all 1s ease-out;
    pointer-events: auto;
}

.content-hero.fade-in {
    opacity: 1;
}

.content-hero h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    opacity: 1;
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}


.content-hero h1 u {
    background-color: #ffffff;
    padding: 0.6rem 1.3rem 0.3rem 1.3rem;
    margin-bottom: 5px;
    display: inline-block;
    width: fit-content;
    text-decoration: none;
    letter-spacing: 0.2rem;
    position: relative;
    opacity: 0.7;
}

.content-hero h1 u.pink {
    background-color: #fce4ec;
    letter-spacing: 0;
}


.content-hero h1 u.letter-spacing{
    letter-spacing: -0.1rem;
}
.quote-underline {
    padding-right: 10px;
}

/* ヒーロー右側コンテナ */
.content-hero-right {
    position: fixed;
    bottom: 50px;
    right: clamp(20px, 8vw, 175px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    opacity: 0;
    transition: all 0.8s ease-out;
    z-index: 1000;
    pointer-events: auto;
}

.content-hero-right.fade-in {
    opacity: 1;
}

/* Eye Catch画像 */
.component-eye-catch {
    position: static;
    width: 250px;
    height: auto;
    z-index: 3;
    align-self: flex-end;
    margin-bottom: 8px;
    opacity: 0.7;
    transition: transform 0.1s ease;
}

/* ランダムカタカタエフェクト用クラス */
.random-katakata {
    animation: katakata 0.3s ease-in-out;
}


/* ヒーロー右側コンテナ内のテキスト */
.content-hero-right p {
    color: #000;
    background-color: #fff;
    padding: 0.3rem 0.7rem 0.06rem 0.7rem;
    margin: 0 0 10px 0;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
    font-weight: 500;
    text-align: right;
    opacity: 0.9;
}


/* ヒーロー右側コンテナ内の直接リンク（体験・見学はこちら） */
.content-hero-right > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 500;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.content-hero-right > a:hover {
    opacity: 0.7;
    text-decoration: none;
}

.content-hero-right > a img {
    width: 1.2em;
    height: 1.2em;
    display: block;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

/* 体験・見学申込ボタン */
.component-button-trial {
    position: static;
    background: none;
    color: #fff;
    padding: 0.8rem 0;
    border:none;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'IBM Plex Sans JP', sans-serif;
    text-transform: none;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
    text-decoration: none; /* リンクの下線を削除 */
}

.component-button-trial:hover {
    text-decoration: none; /* ホバー時も下線を削除 */
    color: #fff; /* ホバー時も白色を維持 */
}

/* trial-button 内のアイコン */
.component-button-trial img {
    display: block;
    width: 1.3em;
    height: 1.3em;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}


/* aa-content部分 */
.section-contact {
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-color: #b8cce0; /* section-footerより薄い同系色（より薄く） */
}

.section-contact .content-contact {
    position: relative;
    z-index: 1;
}

.section-contact .content-contact .layout-flex-studio-item h3 {
    background: none;
    padding: 0;
}

/* TEL:を含むp要素を中央揃え */
.section-contact .layout-flex-studio-item p:has(a[href^="tel:"]) {
    text-align: center;
}

/* 電話番号リンクのフォントサイズを大きく */
.section-contact .layout-flex-studio-item p a[href^="tel:"] {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 600;
}

/* section-contact内のtableの上マージンを1remに設定 */
.section-contact .layout-flex-studio-item table {
    margin-top: 1rem !important;
    width: 100% !important;
}

/* 「お電話またはお問合せフォームでお問合せください。」のp要素の上下マージンを1remに設定 */
.section-contact .content-contact > p:first-of-type {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* お問合せフォームと体験申込みボタンを横並びに */
.layout-contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* ボタン間の間隔を1remに設定 */
    margin-top: 2rem; /* 上のtableとの間隔を広げる */
}

/* layout-contact-buttons内のボタンのmarginをリセット */
.layout-contact-buttons .component-link-member {
    margin-top: 0;
    margin-bottom: 0;
}

@media (min-width: 821px) {
    .layout-contact-buttons {
        flex-direction: row;
        gap: 1.5rem;
    }
    
    .layout-contact-buttons .component-button-white {
        flex: 1; /* ボタンを均等に配置 */
    }
}

.section-footer {
    margin: 0 auto;
    margin-top: -0.5px; /* 隙間を完全に埋める */
    padding-top: 5rem; /* 波型分を削除 */
    padding-bottom: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    z-index: 3;
    overflow: hidden; /* 隙間を防ぐためにhiddenに変更 */
}


.section-footer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-color: #839ec9;
    transform: translateX(-50%);
    z-index: -1;
}

/* Footerレイアウト */
.section-footer .footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}

.section-footer .footer > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width:70%;
}

.section-footer .footer > ul li {
    margin: 0;
}

.section-footer .footer > ul li a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    transition: opacity 0.3s ease;
}

.section-footer .footer > ul li a:hover {
    opacity: 0.7;
}

.section-footer .footer-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 40%;
    text-align: right;
}

.section-footer .footer-right > div:first-child {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.section-footer .footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}

.flex-icon .icon {
    width: clamp(24px, 4vw, 32px);
    margin-left: clamp(8px, 2vw, 15px);
}

.flex-icon .icon:first-child {
    margin-left: 0;
}

.flex-icon .icon img {
    width: 100%;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.flex-icon .icon img:hover {
    opacity: 1;
}

.section-footer .footer-logo img {
    height: auto;
    width: 90%;
    display: block;
    margin-left: auto;
}

.section-footer .footer-right p {
    color: #fff;
    font-size: 12px;
    margin: 0;
}

.section-footer .footer > p {
    color: #fff;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    text-align: center;
    margin: 2rem 0 0 0;
}

.section-footer .footer-copyright {
    color: #fff;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    text-align: center;
    margin: 2rem 0 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 821px) {
    .section-footer .footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .section-footer .footer > ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
        width: auto;
        justify-content: center;
    }
    
    .section-footer .footer-right {
        width: auto;
        align-items: center;
        text-align: center;
    }
    
    .section-footer .footer-right > div:first-child {
        justify-content: center;
    }
    
    .section-footer .flex-icon {
        justify-content: center;
    }
    
    .section-footer .footer-logo {
        justify-content: center;
    }
    
    .section-footer .footer-logo img {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* メインセクション */
.section-main, .section-main2, .section-main3, .section-main4 {
    padding-top: calc(5rem + 60px); /* 波型分（60px）を追加 */
    padding-bottom: 5rem;
    position: relative;
    z-index: 1;
    margin-top: 100vh;
    margin-bottom: -0.5px; /* 隙間を完全に埋める */
    transform: translateZ(0);
    overflow: visible; /* 波型が見えるようにvisibleに変更 */
    background: #b9def6;
}

/* section-mainのみmargin-topとpadding-topを調整（波型がhero-sectionに入らないように） */
.section-main {
    margin-top: calc(100vh + 60px); /* 波型分（60px）を追加してhero-sectionに入らないように */
    padding-top: 4rem; /* 波型が上側（top: -60px）に配置されているため、少し小さく調整 */
}

/* 波型装飾（section-main用 - 前のセクション（section-hero）の背景色で描画） */
.section-main::before {
    content: "";
    position: absolute;
    top: -60px; /* section-heroの背景色で描画するために-60pxに配置 */
    left: 0;
    width: 100%;
    height: 60px; /* 他セクションと同じ60pxに変更 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1440,60 L1440,20 Q1200,40 960,20 Q720,0 480,20 Q240,40 0,20 L0,60 Z' fill='%23b9def6'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 2;
    pointer-events: none;
}

.section-main2 {
    background: #ffffff;
    margin-top: -0.5px; /* 隙間を完全に埋める */
    margin-bottom: -0.5px; /* 隙間を完全に埋める */
    overflow: hidden; /* 隙間を防ぐためにhiddenに変更 */
    padding-top: 5rem; /* 波型分（60px）を追加、padding-topをさらに小さく調整 */
}

/* taiken/index.html用のsection-second-main */
.section-second-main {
    background: #ffffff;
    padding-top: 0;
    padding-bottom: 5rem; /* ちょうどいい感じのpadding-bottom */
    overflow: hidden;
}

/* menu.htmlのsection-second-mainのpadding-bottomを調整（layout-flex-studioの下の間隔を確保） */
.menu-overlay .section-second-main {
    padding-bottom: 0; /* layout-flex-studioのmargin-bottomで間隔を確保するため、padding-bottomを0に */
}

/* flex-menu レイアウト（PC・タブレット：横並び、スマホ：縦並び） */
.flex-menu {
    display: flex;
    flex-direction: row; /* デフォルトは横並び */
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 5rem;
}

.flex-menu-item1 {
    width: 60%;
}

/* menu-smile-imgとmenu-listを横並びに配置 */
.flex-menu-item1 .menu-smile-img {
    display: inline-block;
    vertical-align: top;
    width: 30%;
}

/* 横並び時：smile1.pngを表示、smile2.pngを非表示 */
.menu-smile-horizontal {
    display: block;
}

.menu-smile-vertical {
    display: none;
}

/* 縦並び時：smile2.pngのwidthを100%に */
.menu-smile-vertical img {
    width: 100%;
    height: auto;
}

/* menu.htmlのsmile画像にカタカタエフェクトを適用 */
.menu-smile-img a:hover img {
    animation: katakata 0.3s ease-in-out infinite;
}

.flex-menu-item1 .menu-list {
    display: inline-block;
    vertical-align: top;
    width: calc(70% - 20px);
    margin-left: 20px;
}

.flex-menu-item2 {
    width: 39%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* ボタン間の間隔を狭く */
}

.flex-menu-item2 .component-button-white {
    width: 100%;
}

.flex-menu-item2 .component-link-member {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* menu.htmlの会員様ページリンクのスタイル */
.component-link-member-page {
    margin-top: 0;
    padding: 1rem 3rem 1rem 1.5rem; /* 右側に矢印のスペースを確保 */
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    overflow: hidden;
    background-image: url('/images/formembers2.png');
    background-color: #4991ee;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 6em 6em; /* 矢印のサイズを調整 */
}

.component-link-member-page:hover {
    animation: katakata 0.3s ease-in-out infinite;
    text-decoration: none;
    color: #ffffff;
}

/* お問合せフォームリンクのスタイル */
.component-link-contact {
    padding: 1rem 3rem 1rem 1.5rem; 
    font-size: clamp(1rem, 2vw, 1.2rem);
    background-color: #76c581;
    overflow: hidden;
    background-image: url('/images/contact.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 6em 6em; /* 矢印のサイズを調整 */
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.component-link-contact:hover {
    animation: katakata 0.3s ease-in-out infinite;
    text-decoration: none;
    color: #ffffff;
}

/* 体験・見学申込みリンクのスタイル */
.component-link-taiken {
    padding: 1rem 3rem 1rem 1.5rem; 
    font-size: clamp(1rem, 2vw, 1.2rem);
    background-color: #e39392;
    overflow: hidden;
    background-image: url('/images/trial.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 6em 6em; /* 矢印のサイズを調整 */
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.component-link-taiken:hover {
    animation: katakata 0.3s ease-in-out infinite;
    text-decoration: none;
    color: #ffffff;
}

/* タブレット・スマホ：画像のwidthを40%に */
@media (max-width: 820px) {
    .flex-menu-item1 .menu-smile-img {
        width: 40%;
    }
    
    .flex-menu-item1 .menu-list {
        width: calc(60% - 20px);
    }
}

/* 1200px以下：menu-smile-imgとmenu-listを縦並びに（flex-menuとflex-menu-item2は横並びのまま） */
@media (max-width: 1200px) {
    .flex-menu-item1 .menu-smile-img {
        display: block;
        width: 100%; /* 100%に変更 */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px; /* liの縦並びの間隔と同じ */
    }
    
    /* 縦並び時：smile1.pngを非表示、smile2.pngを表示 */
    .menu-smile-horizontal {
        display: none;
    }
    
    .menu-smile-vertical {
        display: block;
    }
    
    .flex-menu-item1 .menu-list {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0 !important; /* 上の間隔を削除（デフォルトのmargin-top: 1.5remを上書き） */
    }
}

/* スマホ：縦並び */
@media (max-width: 835px) {
    .flex-menu {
        flex-direction: column;
        gap: 1rem; /* flex-menu-item2のgapと同じ間隔に */
    }
    
    .flex-menu-item1,
    .flex-menu-item2 {
        width: 100%;
    }
    
    /* スマホ：画像とulを縦並びに */
    .flex-menu-item1 .menu-smile-img {
        display: block;
        width: 100%; /* 100%に変更 */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px; /* liの縦並びの間隔と同じ */
    }
    
    /* 縦並び時：smile1.pngを非表示、smile2.pngを表示 */
    .menu-smile-horizontal {
        display: none;
    }
    
    .menu-smile-vertical {
        display: block;
    }
    
    .flex-menu-item1 .menu-list {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0 !important; /* 上の間隔を削除（デフォルトのmargin-top: 1.5remを上書き） */
    }
    
    /* スマホ：liをblockで縦並びに */
    .menu-list li {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

/* menu-list スタイル */
.menu-list,
.section-second-main .content-main .menu-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
    margin-top: 1.5rem;
    text-align: center; /* li要素の列を中央揃え */
    font-size: 0; /* inline-block要素間の空白を削除 */
}

.menu-list li {
    display: inline-block;
    padding: 0;
    border: none; /* ボーダーを削除 */
    margin-bottom: 10px; /* 行の間隔を広げる */
    margin-right: 10px; /* 15pxから10pxに縮小 */
    border-radius: 0; /* 角丸を削除 */
    overflow: hidden; /* 角丸を適用するために必要 */
    background-color: #ffffff; /* 背景色を白に */
    box-sizing: border-box;
    vertical-align: top; /* 上揃え */
    font-size: 1rem; /* フォントサイズを復元 */
}

/* 「体験と入会手続き」以外のliの横幅を2列になるように設定（PC・スマホ共通） */
.menu-list li:not(:last-child) {
    width: calc(50% - 5px) !important; /* 50% - liの間隔（10pxの半分） */
}

/* 2列目の要素（偶数番目）のmargin-rightを0にする */
.menu-list li:not(:last-child):nth-child(even) {
    margin-right: 0 !important;
}

/* 最後の2つのli要素（「体験と入会手続き」と「Information」）の横幅を100%に（PC・スマホ共通） */
.menu-list li:nth-last-child(-n+2) {
    width: 100% !important;
    margin-right: 0 !important;
}

.menu-list li:last-child {
    margin-bottom: 0;
    margin-right: 0;
    width: 100% !important;
}

.menu-link {
    display: block;
    padding: 7px 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.menu-link:hover {
    opacity: 0.9;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* PC画面でmenu-list liのフォントサイズを大きく */
@media (min-width: 821px) {
    .menu-list li .menu-link {
        font-size: 1.1rem; /* PC画面で少し大きく */
    }
}

/* スマホ画面でmenu-list liのpaddingを小さく */
@media (max-width: 480px) {
    .menu-list li .menu-link {
        padding: 5px 15px; /* 7px 20pxから少し小さく */
    }
}

/* 狭い画面（文字列が1行で収まらない場合）で、すべてのliを100%に */
@media (max-width: 380px) {
    /* 領域からはみ出る画面サイズより小さい場合、すべてのliを100%に */
    .menu-list li {
        width: 100% !important;
        margin-right: 0 !important;
        display: block; /* blockにして確実に縦並びに */
    }
    
    /* すべてのliのスタイルを上書き */
    .menu-list li:not(:last-child) {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    .menu-list li:last-child {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* taiken/index.html用のテーブルのthとtdのフォントサイズを本文と同じに */
.section-second-main .content-main table th,
.section-second-main .content-main table td {
    font-size: clamp(1rem, 2.2vw, 1.25rem); /* 本文と同じフォントサイズ */
}

/* taiken/index.html用のテーブルのtdのフォントウェイトを通常に */
.section-second-main .content-main table td {
    font-weight: normal;
}

/* taiken/index.html用のテーブル内のunderline-dekita */
.section-second-main .content-main table td .underline-dekita {
    text-decoration: none !important;
    display: inline;
    position: relative;
    background-image: linear-gradient(#90caf9, #90caf9);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 5px;
    padding-bottom: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* taiken/index.html用の電話番号セクション */
.section-second-main .content-main .taiken-phone-title {
    font-size: clamp(1.3rem, 3.2vw, 1.8rem); /* 少し小さく */
}

.section-second-main .content-main .taiken-phone-content {
    text-align: center; /* センター揃え */
    margin: 3rem;
}

.section-second-main .content-main .taiken-phone-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.section-second-main .content-main .taiken-phone-content h3:first-child {
    margin-top: 0;
}

.section-second-main .content-main .taiken-phone-content p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* taiken/index.html用の電話番号リンクのフォントサイズを大きく */
.section-second-main .content-main .taiken-phone-content a[href^="tel:"] {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 600;
}

/* taiken/index.html用のlayout-flex-studio-item内の電話番号リンクのフォントサイズを大きく */
.section-second-main .content-main .layout-flex-studio-item p a[href^="tel:"] {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 600;
}

/* taiken/index.html用のh2のフォントサイズをh3と同程度に */
.section-second-main .content-main h2 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    opacity: 1 !important; /* フェードイン効果を無効化したため、常に表示 */
}

/* section-second-main内のh1のマージン */
.section-second-main .content-main h1 {
    margin-bottom: 2rem;
}

/* section-second-main内のh3のフォントサイズを小さく */
.section-second-main .content-main h3 {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 600;
    color: #000;
    margin: 1rem 0 0.5rem 0;
}

/* section-second-main内のテキスト要素をベースフォントサイズ（16px）に統一 */
.section-second-main .content-main p,
.section-second-main .content-main li,
.section-second-main .content-main dt,
.section-second-main .content-main dd {
    font-size: 1rem; /* 16px */
    line-height: 1.8;
    color: #000;
}

/* section-second-main内のulとolのlist-styleがpadding領域内に収まるようにする */
.section-second-main .content-main ul,
.section-second-main .content-main ol {
    margin: 0 0 16px 0;
    padding-left: 1.5em; /* リストマーカーがpadding領域内に収まるように */
    list-style-position: inside; /* リストマーカーをpadding領域内に配置 */
}

.section-second-main .content-main ul {
    list-style: disc;
}

.section-second-main .content-main ol {
    list-style: decimal;
}

.section-second-main .content-main ul li,
.section-second-main .content-main ol li {
    line-height: 1.8;
    font-size: 1rem; /* 16px */
}

/* section-second-main内のcomponent-info-listのdtとddも統一 */
.section-second-main .content-main .component-info-list dt,
.section-second-main .content-main .component-info-list dd {
    font-size: 1rem; /* 16px */
}

/* section-second-main内のcomponent-info-listのdd内のpも統一 */
.section-second-main .content-main .component-info-list dd p {
    font-size: 1rem; /* 16px */
}

/* section-second-main内のcomponent-info-listのdd内の最初のp（見出し）も統一 */
.section-second-main .content-main .component-info-list dd p:first-child {
    font-size: 1rem; /* 16px */
}

/* taiken/index.html用のp要素のフォントウェイトを通常に（bodyのfont-weight: 500を上書き） */
.content-main p {
    font-weight: 500;
}


/* PC画面でのtaiken/index.html用のh2のフォントサイズをh3と同程度に */
@media (min-width: 821px) {
    .section-second-main .content-main h2 {
        font-size: clamp(1.25rem, 3vw, 1.4rem);
    }
}

/* 波型装飾（section-main2用 - 前のセクション（section-main）の背景色で描画） 
.section-main2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 Q1200,20 960,40 Q720,60 480,40 Q240,20 0,40 L0,0 Z' fill='%23b9def6'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
    pointer-events: none;
}
*/
.section-main3 {
    background: #eeeeee;
    margin-top: -0.5px; /* 隙間を完全に埋める */
    margin-bottom: -0.5px; /* 隙間を完全に埋める */
    overflow: hidden; /* 隙間を防ぐためにhiddenに変更 */
    padding-bottom: 5rem;
}

/* 波型装飾（section-main3用 - 前のセクション（section-main2）の背景色で描画） */
.section-main3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 Q1200,20 960,40 Q720,60 480,40 Q240,20 0,40 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
    pointer-events: none;
}


.section-main4 {
    background: #ffffff;
    margin-top: -0.5px; /* 隙間を完全に埋める */
    margin-bottom: -0.5px; /* 隙間を完全に埋める */
    overflow: hidden; /* 隙間を防ぐためにhiddenに変更 */
}

/* 波型装飾（section-main4用 - 前のセクション（section-main2）の背景色で描画） */
.section-main4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 Q1200,20 960,40 Q720,60 480,40 Q240,20 0,40 L0,0 Z' fill='%23eeeeee'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
    pointer-events: none;
}


.section-info {
    background: #eeeeee;
    margin-top: -0.5px; /* 隙間を完全に埋める */
    margin-bottom: -0.5px; /* 隙間を完全に埋める */
    overflow: hidden; /* 隙間を防ぐためにhiddenに変更 */
    position: relative;
    z-index: 1;
    padding-top: calc(3rem + 60px); /* 波型分（60px）を追加、5remから3remに変更 */
    padding-bottom: 5rem;
}

.section-info .content-info h2:first-of-type {
    margin-top: 0; /* 上のスペースを狭く */
}

/* section-slide */
.section-slide,
.section-slide2 {
    margin: 0;
    padding: 0;
    background-color: #b9def6;
    position: relative;
    z-index: 1;
    overflow: hidden; /* 背景が確実に表示されるように */
}

.section-slide .wrap,
.section-slide2 .wrap {
    background-color: #b9def6;
    position: relative;
    z-index: 1;
}

.section-slide .slideshow,
.section-slide2 .slideshow {
    background-color: #b9def6;
    position: relative;
    z-index: 1;
}

/* 波型装飾（section-info用 - 前のセクション（section-main4）の背景色で描画） */
.section-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 Q1200,20 960,40 Q720,60 480,40 Q240,20 0,40 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
    pointer-events: none;
}

/* メインセクションロゴ */
.component-logo-section-main {
    position: relative;
    display: block;
    margin: 0 auto;
    width: clamp(250px, 320px, 400px);
    aspect-ratio: 265 / 100;
    background-image: url('../images/logo-tangle.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 2rem;
    z-index: 3;
    opacity: 0;
}

@media (max-width: 820px) {
    .component-logo-section-main {
        top: 8px;
        width: clamp(200px, 250px, 300px);
    }
}


/* メインセクション：リード文エリア */
.content-main-top {
    text-align: left;
}

.content-main-top h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #000;
    word-break: keep-all; /* CJKでも任意改行を抑制し、<wbr>を優先 */
    overflow-wrap: normal;
    margin-bottom: 1rem;
    /* 本文全体の text-align に依存しない中央配置 */
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* 子要素は左揃えのまま */
}

/* スマホで「スポーツ＆ダンス・スタジオ」を1行に収める調整 */
@media (max-width: 480px) {
    .content-main-top h2 { font-size: clamp(1.2rem, 4.8vw, 1.6rem); }
    .content-main-top h2 .utility-no-wrap {
        white-space: nowrap;
        font-size: 0.95em;
        letter-spacing: -0.01em;
    }
}
/* 共通座布団の基本スタイル */
.utility-zabuton {
    display: inline;
    background: #ffffff;
    padding: 6px 10px 2px 10px;
    line-height: 1.9;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* セクションごとの色指定（最小限） */
.content-main-top .utility-zabuton {
    background: #fce4ec; /* ピンク */
    line-height: 2.1;
}

.taiken .utility-zabuton,
.bushcraft .utility-zabuton,
.member-page .utility-zabuton,
.flow h2 .utility-zabuton {
    background: #f4dbdb; /* 薄いピンク */
    line-height: 2.1;
}

.flex-flow-item h3 .utility-zabuton,
.content-main-top h3:has(+ .flex-add) .utility-zabuton {
    background: #ffffff; /* 白 */
    line-height: 2.1;
}

.flow + h2 .utility-zabuton,
.message h2 .utility-zabuton {
    background: #e3f2fd; /* ライトブルー */
}

/* menu.html内のh3.utility-zabuton内のリンクに座布団を適用 */
h3.utility-zabuton a,
.section-second-main h3.utility-zabuton a {
    display: inline;
    background: #fce4ec; /* ピンク */
    padding: 6px 10px 2px 10px;
    line-height: 1.9;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: none;
    color: inherit;
}

/* 任意箇所以外での改行を防ぐためのユーティリティ */
.utility-no-wrap { white-space: nowrap; }

/* スマホ画面でのみ表示するユーティリティ（PCでは非表示） */
.utility-break-mobile {
    display: none; /* PCでは非表示 */
}

@media (max-width: 480px) {
    .utility-break-mobile {
        display: block; /* スマホ画面で表示（改行） */
    }
}

/* 下線ユーティリティ（見出し用・太さ10px、テキストに少し被せる） */
.utility-underline-strong {
    display: block;
    background-image: linear-gradient(#ffffff, #ffffff);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 7px; /* 線の太さ */
    padding-bottom: -50px; /* テキストと下線の重なり具合を微調整 */
    margin-bottom: -4px; /* 下要素と重なり気味に */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 下線ユーティリティ（本文用・太さ5px、テキストに少し被せる） */
.utility-underline-soft {
    display: inline-block;
    background-image: linear-gradient(#ffffff, #ffffff);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 3px; /* 線の太さ */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.content-main-top p {
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.9;
    color: #000;
    word-break: normal;
    margin: 0 auto;
    text-align: left;
}

.content-main-top h3:has(+ .flex-add) {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
}

/* Studio GAYA の特長 見出しとリストのレイアウト調整 */
.content-main-top h3 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 600;
    color: #000;
    margin-top: 50px;  /* 上のテキストとの間隔（少し広げる） */
    margin-bottom: 8px; /* リストとの間隔 */
    width: -moz-fit-content;
    width: fit-content;
    margin-left: 0;     /* 本文は左揃え */
    margin-right: auto;
}

.content-main-top ul,
.content-main-top ol {
    margin: 0 0 16px 0; /* 下に少し余白 */
    padding-left: 1.5em; /* リストマーカーがpadding領域内に収まるように */
    list-style-position: inside; /* リストマーカーをpadding領域内に配置 */
}

.content-main-top ul {
    list-style: disc;
}

.content-main-top ol {
    list-style: decimal;
}

.content-main-top ul li,
.content-main-top ol li {
    margin: 15px 0;      /* 各項目の間隔 */
    line-height: 1.8;   /* 読みやすい行間 */
    font-size: clamp(1rem, 2vw, 1.1rem); /* 本文と同サイズ */
}
.utility-srg {
    font-weight: 600;
}

/* 白地の角丸ボタン（再利用可能） */
.component-button-white {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'IBM Plex Sans JP', sans-serif;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #ddd;
    justify-content: center;
}

.component-button-white img {
    width: 1.3em;
    height: 1.3em;
    display: block;
    flex-shrink: 0;
}

.component-button-white:hover {
    opacity: 0.9;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none; /* ホバー時もアンダーラインを削除 */
}

/* 中央揃え用クラス（再利用可能） */
.utility-text-center {
    text-align: center;
}

/* 右揃え用クラス（再利用可能） */
.utility-text-right {
    text-align: right;
}

/* 会員様ページリンク（.layout-features-wrapの下に配置） */
.component-link-member {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* スマホ画面（480px以下）でボタンを100%幅にするクラス */
@media (max-width: 480px) {
    .utility-btn-full-mobile {
        width: 100%;
    }
}

/* flex-addとadd-itemのスタイル */
.flex-add {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.flex-add .add-item {
    width: 100%;
}

.flex-add .add-item img {
    width: 100%;
    height: auto;
    display: block;
    /* border: 1px solid #fff; */
    box-sizing: border-box;
    transition: transform 0.1s ease;
}

.flex-add .add-item img:hover {
    animation: katakata 0.3s ease-in-out infinite;
}

@media (min-width: 821px) {
    .flex-add {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

@media (max-width: 820px) {
    .flex-add {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 0;
    }
}


/* 特長＋バナー横並びレイアウト */
.content-main-top .layout-features-wrap {
    display: flex;
}

.content-main-top .layout-features-text,
.content-main-top .layout-features-banner {
    width: 50%;
}

.content-main-top .layout-features-banner {
    margin-top: 20px;
}

.content-main-top .layout-features-banner img {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 20px;
    transition: transform 0.1s ease;
}

.content-main-top .layout-features-banner a {
    display: inline-block;
    text-decoration: none;
}

.content-main-top .layout-features-banner img {
    width: 100%;
    height: auto;
}

/* 縦並びになる時点からスマホ画面サイズより大きいサイズ：70%、中央揃え */
@media (min-width: 481px) and (max-width: 835px) {
    .content-main-top .layout-features-banner {
        text-align: center;
    }
    
    .content-main-top .layout-features-banner a {
        display: block;
        text-align: center;
    }
    
    .content-main-top .layout-features-banner img {
        width: 70%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

/* スマホ画面：100% */
@media (max-width: 480px) {
    .content-main-top .layout-features-banner img {
        width: 100%;
        height: auto;
    }
}

/* カタカタエフェクト */
.content-main-top .layout-features-banner a:hover img {
    animation: katakata 0.3s ease-in-out infinite;
}

@keyframes katakata {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(-2px) translateY(-1px) rotate(-1deg);
    }
    50% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    75% {
        transform: translateX(2px) translateY(1px) rotate(1deg);
    }
}

/* カクカクエフェクト（ランダムに1秒間動作） */
@keyframes kakukaku {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    10% {
        transform: translateX(-3px) translateY(-2px) rotate(-2deg);
    }
    20% {
        transform: translateX(3px) translateY(2px) rotate(2deg);
    }
    30% {
        transform: translateX(-2px) translateY(-3px) rotate(-1deg);
    }
    40% {
        transform: translateX(2px) translateY(3px) rotate(1deg);
    }
    50% {
        transform: translateX(-3px) translateY(-1px) rotate(-2deg);
    }
    60% {
        transform: translateX(3px) translateY(1px) rotate(2deg);
    }
    70% {
        transform: translateX(-1px) translateY(-2px) rotate(-1deg);
    }
    80% {
        transform: translateX(1px) translateY(2px) rotate(1deg);
    }
    90% {
        transform: translateX(-2px) translateY(-1px) rotate(-1deg);
    }
}

.random-kakukaku {
    animation: kakukaku 1s ease-in-out;
}

/* layout-features-text内の下線を座布団スタイルに変更 */
.layout-features-text ul li .utility-underline-soft {
    display: inline;
    background: #d4e6f3; /* ごく薄いブルー */
    padding: 3px 6px 2px 6px;
    line-height: 1.9;
    background-image: none; /* 下線を削除 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media (max-width: 820px) {
    .content-main-top .layout-features-wrap {
        flex-direction: column;
    }
    .content-main-top .layout-features-text,
    .content-main-top .layout-features-banner {
        width: 100%;
    }
}


/* コンテンツコンテナ（汎用的に他のセクションでも利用可能） */
.content-main {
    background: #ffffff;
    position: relative;
    z-index: 0;
}

/* 体験・見学申込み */
.taiken {
    margin-top: 40px;
    padding: 60px; /* PC画面 */
    background-color: #f49393;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.8;
    color: #000;
    opacity: 0; /* 初期状態で非表示 */
}

.taiken h2 {
    font-size: clamp(1.6rem, 3.8vw, 2.4rem);
    margin-bottom: 1rem;
}

.font-weight-small {
    font-weight: 400;
}

/* bushcraft: member-pageと同じ構造、背景色は白 */
.bushcraft {
    margin-top: 40px;
    padding: 60px; /* PC画面 */
    background-color: #ffffff; /* 白 */
    border: 1px solid #ddd; /* 枠線を追加 */
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.8;
    color: #000;
    opacity: 1; /* 初期状態で非表示 */
}

.bushcraft h2 {
    font-size: clamp(1rem, 2.2vw, 1.4rem) !important; /* 通常のh2よりかなり小さく、!importantで確実に適用 */
    margin-bottom: 1rem;
}

/* bushcraft内のロゴとテキストのレイアウト */
.bushcraft-logo-text {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 1rem;
}

.bushcraft-logo {
    width: auto;
    height: auto;
    max-width: 150px;
    flex-shrink: 0;
}

.bushcraft-logo-text p {
    margin: 0;
    flex: 1;
}

/* レスポンシブ：スマホ画面では縦並び、ロゴを中央配置 */
@media (max-width: 480px) {
    .bushcraft-logo-text {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .bushcraft-logo {
        max-width: 200px;
    }
    
    .bushcraft-logo-text p {
        text-align: left;
    }
}

/* layout-flex-bushcraft: PC画面で横並び、レスポンシブで縦並び */
.layout-flex-bushcraft {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
}

.layout-bushcraft-item1,
.layout-bushcraft-item2 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* PC画面（横並び）の時、layout-bushcraft-item2の画像を天地中央に配置 */
@media (min-width: 821px) {
    .layout-bushcraft-item2 {
        justify-content: center;
    }
}

.layout-bushcraft-item2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.1s ease;
    opacity: 0; /* 初期状態で非表示 */
}

.layout-bushcraft-item2 a {
    display: inline-block;
    text-decoration: none;
}

/* カタカタエフェクト（体験バナーと同じ） */
.layout-bushcraft-item2 a:hover img {
    animation: katakata 0.3s ease-in-out infinite;
}

/* タブレット画面（縦並び） */
@media (max-width: 820px) {
    .bushcraft {
        padding: 40px; /* タブレット画面 */
    }
    
    .layout-flex-bushcraft {
        flex-direction: column;
        gap: 0;
    }
    
    .layout-bushcraft-item1,
    .layout-bushcraft-item2 {
        width: 100%;
    }
}

/* スマホ画面 */
@media (max-width: 480px) {
    .bushcraft {
        padding: 20px; /* スマホ画面 */
    }
    
    .layout-flex-bushcraft {
        flex-direction: column;
        gap: 0;
    }
    
    .layout-bushcraft-item1,
    .layout-bushcraft-item2 {
        width: 100%;
    }
}

/* member-page: taikenと同じ構造、背景色は白、枠線を追加 */
.member-page {
    margin-top: 40px;
    padding: 60px; /* PC画面 */
    background-color: #dddddd; /* 白 */
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.8;
    color: #000;
    opacity: 1; /* 初期状態で非表示 */
}

.member-page h2 {
    font-size: clamp(1rem, 2.2vw, 1.4rem) !important; /* 通常のh2よりかなり小さく、!importantで確実に適用 */
    margin-bottom: 1rem;
}

/* member-page-image: pの右にfloatで配置 */
.member-page-image {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.member-page-image img {
    width: 200px; /* 右に配置の場合のwidthを300pxに */
    height: auto;
    max-width: 100%;
    display: block;
}

/* タブレット画面からpの上中央に配置 */
@media (max-width: 820px) {
    .member-page-image {        margin-left: auto;
        width: 150px; 
    }
    
    .member-page-image img {
        margin: 0 auto;
        width: 100%; /* 中央配置の場合のwidthを100%に */
    }
}

@media (max-width: 480px) {
    .member-page-image {        margin-left: auto;
        width: 100px; 
    }
}

/* message-page-image: pの左にfloatで配置（member-page-imageと同じスタイル） */
.message-page-image {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.message-page-image img {
    width: 200px; /* 左に配置の場合のwidthを200pxに */
    height: auto;
    max-width: 100%;
    display: block;
}

/* タブレット画面からpの上中央に配置 */
@media (max-width: 820px) {
    .message-page-image {
        margin-left: auto;
        width: 150px; 
    }
    
    .message-page-image img {
        margin: 0 auto;
        width: 100%; /* 中央配置の場合のwidthを100%に */
    }
}

@media (max-width: 480px) {
    .message-page-image {
        margin-left: auto;
        width: 130px; 
    }
}


/* layout-flex-member-page: PC画面で横並び、レスポンシブで縦並び */
.layout-flex-member-page {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
}

.layout-member-page-item1,
.layout-member-page-item2 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* PC画面（横並び）の時、layout-member-page-item2の画像を天地中央に配置 */
@media (min-width: 821px) {
    .layout-member-page-item2 {
        justify-content: center;
    }
}

.layout-member-page-item2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.1s ease;
    opacity: 0; /* 初期状態で非表示 */
}

.layout-member-page-item2 a {
    display: inline-block;
    text-decoration: none;
}

/* カタカタエフェクト（体験バナーと同じ） */
.layout-member-page-item2 a:hover img {
    animation: katakata 0.3s ease-in-out infinite;
}

/* タブレット画面（縦並び） */
@media (max-width: 820px) {
    .member-page {
        padding: 40px; /* タブレット画面 */
    }
    
    .layout-flex-member-page {
        flex-direction: column;
        gap: 0;
    }
    
    .layout-member-page-item1,
    .layout-member-page-item2 {
        width: 100%;
    }
}

/* スマホ画面 */
@media (max-width: 480px) {
    .member-page {
        padding: 20px; /* スマホ画面 */
    }
    
    .layout-flex-member-page {
        flex-direction: column;
        gap: 0;
    }
    
    .layout-member-page-item1,
    .layout-member-page-item2 {
        width: 100%;
    }
}
.flow {
    margin-top: 40px;
    padding: 60px; /* PC画面 */
    background-color: #f7b7b7; /* taikenより少し薄いピンク */
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.8;
    color: #000;
    opacity: 0; /* 初期状態で非表示 */
}

.flow h2 {
    font-size: clamp(1.6rem, 3.8vw, 2.4rem);
    margin-bottom: 0.5rem;
}

/* flex-flow: PC画面で横並び、レスポンシブで縦並び */
.flex-flow {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    gap: 40px; /* アイテム間の間隔 */
}

.flex-flow-item {
    width: calc((100% - 40px) / 2);
    margin-right: 0;
    margin-bottom: 1px;
    padding: 20px 0 30px 0; /* 左右のpaddingを0に */
    background-color: #f7b7b7; /* flowと同じ背景色 */
}

.flex-flow-item p {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* layout-flex-taiken: PC画面で横並び、レスポンシブで縦並び */
.layout-flex-taiken {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
}

.layout-taiken-item1,
.layout-taiken-item2 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* PC画面（横並び）の時、layout-taiken-item2の画像を天地中央に配置 */
@media (min-width: 821px) {
    .layout-taiken-item2 {
        justify-content: center;
    }
}

.layout-taiken-item2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.1s ease;
    opacity: 0; /* 初期状態で非表示 */
}

.layout-taiken-item2 a {
    display: inline-block;
    text-decoration: none;
}

/* 縦並びになる時点からスマホ画面サイズより大きいサイズ：70%、中央揃え */
@media (min-width: 481px) and (max-width: 835px) {
    .layout-taiken-item2 {
        text-align: center;
    }
    
    .layout-taiken-item2 a {
        display: block;
        text-align: center;
    }
    
    .layout-taiken-item2 img {
        width: 70%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

/* スマホ画面：100% */
@media (max-width: 480px) {
    .layout-taiken-item2 img {
        width: 100%;
        height: auto;
    }
}

/* カタカタエフェクト（体験バナーと同じ） */
.layout-taiken-item2 a:hover img {
    animation: katakata 0.3s ease-in-out infinite;
}

@media (max-width: 820px) {
    .taiken {
        padding: 40px; /* タブレット画面 */
    }
    
    .flow {
        padding: 40px; /* タブレット画面 */
    }
    
    /* レスポンシブで縦並びにする */
    .layout-flex-taiken {
        flex-direction: column;
    }
    
    .layout-taiken-item1,
    .layout-taiken-item2 {
        width: 100%;
    }
    
    /* flex-flow-itemを縦並びにする */
    .flex-flow {
        flex-direction: column;
        gap: 0;
    }
    
    .flex-flow-item {
        width: 100%;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .taiken {
        padding: 20px; /* スマホ画面 */
    }
    
    .flow {
        padding: 20px; /* スマホ画面 */
    }
    
    /* レスポンシブで縦並びにする */
    .layout-flex-taiken {
        flex-direction: column;
    }
    
    .layout-taiken-item1,
    .layout-taiken-item2 {
        width: 100%;
    }
    
    /* flex-flow-itemを縦並びにする */
    .flex-flow-item {
        width: 100%;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}
.layout-flex-course, .layout-flex-studio, .layout-flex-member-voice, .layout-flex-price {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

/* menu.htmlのflex-menuとlayout-flex-studioの間隔を20pxに */
.menu-overlay .flex-menu {
    margin-bottom: 20px;
}

.menu-overlay .layout-flex-studio {
    margin-top: 0; /* flex-menuのmargin-bottomで間隔を確保 */
    margin-bottom: 50px !important; /* 下の間隔を50pxに（デフォルトのmargin-bottom: 0を上書き） */
}

.layout-flex-course {
    margin-bottom: 1rem; /* timetableとの間隔を狭く */
}
.layout-flex-studio, .layout-flex-price{
    margin-bottom: 0;
}

.layout-flex-member-voice {
    margin-top: 1rem;
    margin-bottom: 0;
    opacity: 0; /* 初期状態で非表示 */
}

.layout-flex-course-item, .layout-flex-studio-item, .layout-flex-member-voice-item {
    width: calc(50% - 1px);
    margin-right: 1px;
    margin-bottom: 1px;
    padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(30px, 4vw, 50px) clamp(20px, 3vw, 40px);
}

.layout-flex-price-item {
    width: calc(33.333% - 1px);
    margin-right: 1px;
    margin-bottom: 1px;
    padding: 20px 20px 30px 20px;
    background-color: #eeeeee;
}

/* 3つのlayout-flex-price-itemにそれぞれ異なる背景色を設定 */
.layout-flex-price-item:nth-child(1) {
    background-color: #e0e0e0; /* 濃いグレー */
}

.layout-flex-price-item:nth-child(2) {
    background-color: #eeeeee; /* 中間のグレー */
}

.layout-flex-price-item:nth-child(3) {
    background-color: #f7f7f7; /* 薄いグレー */
}

.layout-flex-studio-item {
    padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(30px, 4vw, 50px) clamp(20px, 3vw, 40px);
    background-color: #eee;
}

.layout-flex-studio-item h3 {
    background: #ffffff;
    margin-top: 3px;
    margin-bottom: 1rem;
    padding: 6px 30px 2px 10px;
    display: inline-block;
    width: fit-content;
}

/* layout-flex-studio-item内のp要素のスタイル */
.layout-flex-studio-item p {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* tableの直前のp要素（開催コース・クラス）の下マージンを狭く */
.layout-flex-studio-item p:has(+ table),
.layout-flex-studio-item p:nth-of-type(2) {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

/* layout-flex-studio-item内のtableのスタイル */
.layout-flex-studio-item table {
    width: 100% !important;
    border-collapse: collapse;
    margin-top: 0 !important;
    margin-bottom: 0;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem) !important;
    border: 1px solid #cccccc;
    display: table !important; /* 確実に表示されるように */
    visibility: visible !important; /* 確実に表示されるように */
    opacity: 1 !important; /* 確実に表示されるように */
}

.layout-flex-studio-item table td {
    padding: 0.3rem 0.5rem;
    border: 1px solid #cccccc;
    vertical-align: top;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem) !important;
}

/* 1番目のtd（コース名）の背景色 */
.layout-flex-studio-item table td:first-child {
    font-weight: 600;
    width: auto;
    white-space: nowrap;
    padding-right: 1rem;
    background-color: #f5f5f5;
}

/* 2番目のtd（クラス名）の背景色 */
.layout-flex-studio-item table td:nth-child(2) {
    background-color: #ffffff;
}

/* 最初のp要素はmargin-topを0に */
.layout-flex-studio-item p:first-of-type {
    margin-top: 0;
}

/* 2番目と3番目のp要素にborder-topを追加 */
.layout-flex-studio-item p:nth-of-type(2),
.layout-flex-studio-item p:nth-of-type(3) {
    border-top: 1px solid #cccccc;
    padding-top: 1rem;
    margin-top: 1rem;
}

/* 最後のp要素にもborder-topを追加 */
.layout-flex-studio-item p:last-of-type {
    border-top: 1px solid #cccccc;
    padding-top: 1rem;
    margin-top: 1rem;
}

/* 開催クラスの部分（2番目のp）のフォントサイズを小さく */
.layout-flex-studio-item p:nth-of-type(2) {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
}

/* 3番目のp要素（住所・電話番号の部分）のフォントサイズを小さく */
.layout-flex-studio-item p:nth-of-type(3) {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
}

/* 最後のp要素のフォントサイズを小さく */
.layout-flex-studio-item p:last-of-type {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
}

/* TEL部分のスタイル */
.layout-flex-studio-item .tel-text {
    white-space: nowrap;
}

.layout-flex-member-voice-item {
    padding: clamp(20px, 3vw, 40px);
    background-color: #f8cbcb;
    overflow: hidden;
    box-sizing: border-box;
}

/*
.layout-flex-member-voice-item:nth-child(1) {
    background-color: #b5e7f9; 
}

.layout-flex-member-voice-item:nth-child(2) {
    background-color: #d6f0f9; 
}

.layout-flex-member-voice-item:nth-child(3) {
    background-color: #fae8e8; 
}

.layout-flex-member-voice-item:nth-child(4) {
    background-color: #f9dcdc; 
}
*/

.layout-flex-course-item p {
    margin-top: 1rem;
    padding-right: 20px;
    color: #000;
    font-weight: 500;
    color: #000;
    word-break: keep-all;
    overflow-wrap: break-word;
    /* 長いテキストがはみ出さないように */
}

/* 句点と中黒の後の改行を防ぐユーティリティクラス */
.utility-no-break-after-period {
    word-break: normal;
    overflow-wrap: normal;
}

.layout-flex-member-voice-item p {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    padding-right: 0;
    color: #000;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: break-word;
    margin: 0;
}

.layout-flex-member-voice-item p:not(:last-child) {
    margin-bottom: 1rem;
}

/* 開始の鉤括弧を大きくする */
.layout-flex-member-voice-item .voice-text p span.quote-start,
.layout-flex-member-voice .voice-text p span.quote-start {
    font-size: 1.5em;
    font-weight: 600;
}

/* 最初の1文字を大きくする */
.layout-flex-member-voice-item .voice-text p span.first-char,
.layout-flex-member-voice .voice-text p span.first-char {
    font-size: 1.5em;
    font-weight: 600;
}

/* voice-text内の最初のp要素に座布団を適用 */
.layout-flex-member-voice-item .voice-text p:first-child,
.layout-flex-member-voice .voice-text p:first-child {
    display: inline-block;
    background: #ffffff;
    padding: 6px 10px 2px 10px;
    line-height: 1.9;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    margin-bottom: 1rem;
    width: 100%;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 600;
}

/* voice-text内の最初のp要素のunderline-dekitaに下線を適用 */
.layout-flex-member-voice-item .voice-text p:first-child .underline-dekita,
.layout-flex-member-voice .voice-text p:first-child .underline-dekita {
    text-decoration: none !important;
    display: inline;
    position: relative;
    background-image: linear-gradient(#90caf9, #90caf9);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 5px;
    padding-bottom: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* voice-text内の最初のp要素のbrの後の行頭を1文字開ける */
.layout-flex-member-voice-item .voice-text p:first-child .indent-line,
.layout-flex-member-voice .voice-text p:first-child .indent-line {
    padding-left: 1em;
    display: inline-block;
}

/* voice-photo と voice-text のスタイル */
.layout-flex-member-voice-item .voice-photo,
.layout-flex-member-voice .voice-photo {
    float: left;
    width: 120px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.layout-flex-member-voice-item .voice-photo img,
.layout-flex-member-voice .voice-photo img {
    width: 100%;
    height: auto;
    border: 2px solid white;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* voice-textのスタイル */
.layout-flex-member-voice-item .voice-text,
.layout-flex-member-voice .voice-text {
    overflow-wrap: break-word;
    word-break: break-word;
    /* overflow: hiddenを削除してテキストが画像の周りを回り込むようにする */
}

/* スマホ幅の調整も更新 */
@media (max-width: 480px) {
    .layout-flex-member-voice-item .voice-photo,
    .layout-flex-member-voice .voice-photo {
        width: 100px; /* スマホでは少し小さく */
        margin-right: 15px; /* 間隔を少し狭く */
    }
}
/* .layout-flex-course-item内の.utility-no-wrapクラスも領域内に収める */
.layout-flex-course-item p.utility-no-wrap {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

p.utility-color-white {
    color: #fff;
}

.layout-flex-course-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border:10px solid #fff;
}
.layout-flex-studio-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border:10px solid #fff;
}

/* スライドショーコンテナ */
.slideshow-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.slideshow-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 10px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slideshow-image.active {
    opacity: 0.7;
    z-index: 1;
    position: relative;
}

/* スマホ用画像（デフォルトは非表示） */
.slideshow-mobile-image {
    display: none;
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 10px solid #fff;
    opacity: 0.7;
}

/* スマホ画面（820px以下）ではスライドショー画像を非表示、スマホ用画像を表示 */
@media (max-width: 820px) {
    .slideshow-image {
        display: none !important;
    }
    
    .slideshow-mobile-image {
        display: block;
    }
    
    .layout-flex-course-item, .layout-flex-studio-item, .layout-flex-member-voice-item, .layout-flex-price-item {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .layout-flex-course-item, .layout-flex-studio-item, .layout-flex-member-voice-item, .layout-flex-price-item {
        padding-left: clamp(15px, 4vw, 20px);
        padding-right: clamp(15px, 4vw, 20px);
    }
    
    /* スマホ画面でTEL部分で改行を許可 */
    .layout-flex-studio-item .tel-text {
        white-space: normal;
        display: block;
    }
}

/* timetable */
.timetable {
    background-color: #eeeeee;
    padding: 20px;
    margin-top: 1rem; /* layout-flex-courseとの間隔を狭く */
    margin-bottom: 3rem; /* 下の間隔を開ける */
    overflow: hidden; /* floatのはみ出しを防ぐ */
}

.timetable p {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.8;
    color: #000;
}

.timetable a.component-button-white {
    float: right; /* 右揃え */
    margin-left: 1rem; /* 左側に少し間隔 */
    clear: right; /* 右側のfloatをクリア */
}

/* PC画面でtimetable内のp要素をボタンと縦中央揃え */
@media (min-width: 821px) {
    .timetable p {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .timetable a.component-button-white {
        float: none; /* floatを解除 */
        margin-left: 1rem; /* 左側に少し間隔 */
        clear: none; /* clearを解除 */
    }
}

/* 背景色ユーティリティ（汎用的にどの要素にも追加可能） */
.blue-bg {
    background: #b5e7f9; 
}

.red-bg {
    background: #f9dcdc; 
}

.pink-bg {
    background: #f8d2ef; 
}

.green-bg {
    background: #beefe0; 
}

.layout-flex-course-item h3 {
    background: #ffffff;
    margin-top: 3px;
    padding: 6px 30px 2px 10px;
    display: inline-block;
    width: fit-content;
}

.layout-flex-price-item h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 600;
    color: #000;
    border-bottom: 3px solid #999999;
    padding-bottom: 0.8rem;
}

.layout-flex-price-item p {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.8;
    color: #000;
}

/* 料金をセンター揃えにするクラス */
.price-center {
    text-align: center;
}

/* p要素の上下間隔を調整するユーティリティクラス */
.utility-margin-top-wide {
    margin-top: 2rem !important;
}

.utility-margin-top-narrow {
    margin-top: 0.5rem !important;
}

/* 上部にボーダーを設定するユーティリティクラス */
.utility-border-top {
    border-top: 1px solid #999999;
    padding-top: 0.8rem;
}

/* 料金の数字部分のフォントサイズを大きく */
.layout-flex-price-item p span.price-number {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    font-weight: 600;
}

/* 会員ページのテキストエリア内のリストスタイル */
.member-page-text ul,
.member-page-text ol {
    margin: 0 0 16px 0;
    padding-left: 1.5em; /* リストマーカーがpadding領域内に収まるように */
    list-style-position: inside; /* リストマーカーをpadding領域内に配置 */
}

.member-page-text ul {
    list-style: disc;
}

.member-page-text ol {
    list-style: decimal;
}

.member-page-text ul li,
.member-page-text ol li {
    line-height: 1.8;
    font-size: clamp(1rem, 2vw, 1.1rem);
}

/* company-info-listのスタイル（PC画面で横並び、スマホ画面で縦並び） */
.company-info-list {
    margin: 2rem 0 1rem 0;
    padding: 0;
    list-style: none;
    font-size: 0; /* 改行スペースを削除 */
    border-top: 1px solid #ddd; /* 最初の項目の上にボーダー */
    border-bottom: 1px solid #ddd; /* 最後の項目の下にボーダー */
}

.company-info-list dt {
    display: inline-block;
    width: 10ch; /* 10文字分の幅 */
    padding: 1.5rem 1rem 1.5rem 0; /* 行間を十分確保 */
    vertical-align: top;
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: #000;
    white-space: nowrap; /* 改行を防ぐ */
    border-top: 1px solid #ddd; /* 行の上にボーダー（PC画面で横並びの場合） */
}

.company-info-list dt::before {
    content: "■";
    margin-right: 0.3em;
}

.company-info-list dt:first-child {
    border-top: none; /* 最初のdtの上ボーダーは削除（親要素のborder-topで表示） */
}

.company-info-list dd {
    display: inline-block;
    width: calc(100% - 10ch - 1rem); /* dtの幅とpaddingを引く */
    margin: 0;
    padding: 1.5rem 0 1.5rem 1rem; /* 行間を十分確保 */
    vertical-align: top;
    border-top: 1px solid #ddd; /* 行の上にボーダー（PC画面で横並びの場合） */
    font-size: 1rem; /* 16px */
    line-height: 1.8; /* 行間を十分確保 */
    color: #000;
}

/* 最初の行のddの上ボーダーは重複しないように削除 */
.company-info-list dt:first-child + dd {
    border-top: none; /* 最初の行のddの上ボーダーは削除（親要素のborder-topで表示） */
}

/* スマホ画面では縦並びに変更 */
@media (max-width: 820px) {
    .company-info-list dt {
        display: block;
        width: 100%;
        padding: 1.5rem 0 0.5rem 0; /* 行間を十分確保 */
        white-space: normal; /* 改行を許可 */
        border-top: 1px solid #ddd; /* 行の上にボーダー */
    }
    
    .company-info-list dt:first-child {
        border-top: none; /* 最初のdtの上ボーダーは削除（親要素のborder-topで表示） */
    }
    
    .company-info-list dd {
        display: block;
        width: 100%;
        padding: 0 0 1.5rem 0; /* 行間を十分確保 */
        border-top: none; /* スマホではdtのボーダーで表示 */
        border-bottom: none; /* スマホではdlのborder-bottomで表示 */
    }
}

/* コンテンツ幅のユーティリティクラス */
.utility-content-width {
    max-width:1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* 余白調整：画面幅に応じて左右パディングを増やす */
@media (max-width: 1200px) {
    .utility-content-width {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (max-width: 820px) {
    .utility-content-width {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 480px) {
    .utility-content-width {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* スマホ表示時に.utility-no-wrapクラスを無効化して領域内に表示 */
    .layout-flex-course-item p.utility-no-wrap {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* スマホ表示時にp要素のpadding-rightを調整して領域内に表示 */
    .layout-flex-course-item p {
        padding-right: 0;
    }
}

.content-main h2, .content-second h2, .content-info h2 {
    font-size: clamp(1.6rem, 3.8vw, 2.4rem);
    line-height: 1.3;
    text-align: left;
    color: #000;
}

.content-main h2 {
    opacity: 0; /* 初期状態で非表示 */
}

.content-main table.price,
.content-main .layout-flex-price {
    opacity: 0; /* 初期状態で非表示 */
}

.content-second h2 {
    opacity: 0; /* 初期状態で非表示 */
}

.content-info h2 {
    opacity: 1; /* 最初から表示 */
}

.content-second, .content-info {
    position: relative;
    z-index: 1;
    text-align: left; /* 左揃え */
}

.content-second .component-faq-list,
.content-second .component-info-list {
    opacity: 0; /* 初期状態で非表示 */
}

.content-info .component-faq-list,
.content-info .component-info-list {
    opacity: 1; /* 最初から表示 */
}

/* .flowの後に来るh2（「今日の"できた！"が、未来を変える。」）のスタイル */
.flow + h2 {
    margin-top: 4rem; /* 上に十分なマージン */
    margin-bottom: 1rem; /* h2とpの間を1remに */
}

.flow + h2 .underline-dekita {
    text-decoration: underline;
    text-decoration-color: #90caf9; /* 座布団色より濃い青 */
    text-decoration-thickness: 5px;
    text-underline-offset: -2px; /* 文字にかかる位置に配置 */
}

/* messageセクション */
.message {
    margin-top: 4rem; /* 上に十分なマージン（6remから4remに変更） */
    opacity: 0; /* 初期状態で非表示 */
}

.message h2 {
    margin-bottom: 1rem; /* h2とpの間を1remに */
}

.message h2 .underline-dekita {
    text-decoration: underline;
    text-decoration-color: #90caf9 !important; /* 座布団色より濃い青（元のブルー） */
    text-decoration-thickness: 5px;
    text-underline-offset: -2px; /* 文字にかかる位置に配置 */
}

/* 「会員様の声」のh2に上マージンを追加 */
.content-second h2:nth-of-type(2), .content-info h2:nth-of-type(2) {
    margin-top: 3rem;
}

.content-main h2 .number, .content-second h2 .number, .content-info h2 .number {
    font-size: 1.6em; /* 数字を20%大きく */
}

/* content-mainとcontent-second内のp要素のfont-sizeを統一 */
.content-main p, .content-second p, .content-info p {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
}

/* content-mainとcontent-second内のh3要素のfont-sizeを統一 */
.content-main h3, .content-second h3, .content-info h3 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
}

/* 料金プランテーブルのスタイル */
/* デフォルトでテーブルの幅をautoに */
.content-main table {
    width: auto;
    border-collapse: collapse;
    margin: 1.5rem 0;
    table-layout: auto;
}

/* 100%表示が必要なテーブル */
.content-main table.price {
    width: 100%;
}

/* kids-tableのスタイル */
.kids-table {
    width: 800px; /* テーブル全体の幅を統一 */
    border-collapse: collapse;
    margin: 0 0 1.5rem 0; /* 上のマージンを0に */
    table-layout: fixed; /* 固定レイアウトで統一された幅に */
}

.kids-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    vertical-align: top;
    font-size: 1rem !important; /* 16px - section-second-main内の他の要素と統一 */
    color: #000;
    line-height: 1.8; /* section-second-main内の他の要素と統一 */
}

/* 1つ目のtdの幅を大きく設定（2列の場合、両方のテーブルで統一） */
.kids-table tr > td:first-child {
    width: 280px; /* 1つ目のtdの幅を大きくして統一 */
}

/* 2つ目のtdは残りの幅を使用 */
.kids-table tr > td:last-child {
    width: 520px; /* 残りの幅（800px - 280px = 520px） */
}

/* 中央揃え用クラス */
.kids-table td.center {
    text-align: center;
}

.content-main table th {
    background-color: #eeeeee; /* ごく薄いライトブルー */
    border: 1px solid #dddddd;
    padding: 12px 15px 12px 20px; /* 右パディングを小さく */
    text-align: left;
    font-weight: 600;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: #000;
    width: auto;
    white-space: nowrap;
}

.content-main table td {
    background-color: #ffffff; /* 白 */
    border: 1px solid #dddddd;
    padding: 12px 20px; /* 上下より左右の方が大きく */
    text-align: left;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: #000;
}

/* PC画面でのtableのフォントサイズを大きく */
@media (min-width: 821px) {
    .content-main table {
        table-layout: fixed;
    }
    
    .content-main table th {
        font-size: clamp(1.1rem, 2.3vw, 1.3rem);
        padding-left: 50px;
        padding-right: 50px;
        width: 25%; /* 「事務手数料」5文字分を考慮した幅 */
    }
    
    .content-main table td {
        font-size: clamp(1.2rem, 2.5vw, 1.5rem);
        padding-left: 50px;
        padding-right: 50px;
        width: 75%; /* 残りの幅 */
    }
    
    /* layout-flex-studio-item内のtableは除外（PC画面でのフォントサイズとパディング調整） */
    .layout-flex-studio-item table td {
        font-size: clamp(0.75rem, 1.5vw, 0.9rem) !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* 背景色は既に全画面で設定されているため、PC画面での上書きは不要 */
}

/* PC画面での一般的なフォントサイズを小さく（特別に大きくしている箇所は除外） */
@media (min-width: 821px) {
    /* h2要素（ヒーローh1とcontent-main-top h2は除外） */
    .content-main h2, .content-second h2, .content-info h2,
    .flow h2, .taiken h2, .message h2 {
        font-size: clamp(1.6rem, 3.8vw, 2rem); /* 最大値を2.4remから2remに */
    }
    
    /* h3要素（content-main-top h3は除外） */
    .content-main h3, .content-second h3, .content-info h3 {
        font-size: clamp(1.25rem, 3vw, 1.4rem); /* 最大値を1.6remから1.4remに */
    }
    
    /* p要素（content-main-top pは除外） */
    .content-main p, .content-second p, .content-info p,
    .flow p, .taiken p, .message p,
    .layout-flex-course-item p,
    .layout-flex-member-voice-item p {
        font-size: clamp(1rem, 1.8vw, 1rem); /* 最小値を1remに統一 */
    }
    
    /* voice-text内の最初のp要素は大きくする */
    .layout-flex-member-voice-item .voice-text p:first-child,
    .layout-flex-member-voice .voice-text p:first-child {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
        font-weight: 600;
    }
    
    /* その他のテキスト要素（content-main-top ul liは除外） */
    .timetable p,
    .layout-flex-studio-item p:nth-of-type(2),
    .layout-flex-studio-item p:nth-of-type(3),
    .layout-flex-studio-item p:last-of-type {
        font-size: clamp(0.85rem, 1.8vw, 0.95rem); /* 最大値を1remから0.95remに */
    }
    
    /* table th, td（PC画面で特別に大きくしている箇所は除外、table.priceも除外） */
    /* table th, td（通常のtable、PC画面で特別に大きくしている箇所は除外） */
    .content-main table:not(.price) th,
    .content-main table:not(.price) td {
        font-size: clamp(1rem, 2.2vw, 1.1rem); /* 最大値を1.25remから1.1remに */
    }
    
    /* 料金プランのh3 */
    .layout-flex-price-item h3 {
        font-size: clamp(1.25rem, 3vw, 1.4rem); /* 最大値を1.6remから1.4remに */
    }
    
    /* 料金プランのp */
    .layout-flex-price-item p {
        font-size: clamp(1rem, 2.2vw, 1.1rem); /* 最大値を1.25remから1.1remに */
    }
    
    /* component-info-listのdt, dd */
    .component-info-list dt,
    .component-info-list dd {
        font-size: clamp(0.9rem, 2vw, 1rem); /* 最大値を1.1remから1remに */
    }
    
    /* component-faq-listのdt, dd */
    .component-faq-question {
        font-size: clamp(0.9rem, 1.8vw, 1rem);
    }
    
    .component-faq-answer {
        font-size: clamp(0.85rem, 1.6vw, 0.95rem);
    }
}

/* スマホ画面では100%表示が必要なテーブルを100%幅にする */
@media (max-width: 480px) {
    .content-main table.price,
    .layout-flex-studio-item table {
        width: 100%;
    }
}

/* second-section */
.section-second {
    position: relative;
    z-index: 2; /* section-mainより上に配置 */
    background: #eeeeee;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
}

/* section-info内のinfo-listスタイル */
.component-info-list {
    margin: 2rem 0 1rem 0;
    padding: 0;
    list-style: none;
    font-size: 0; /* 改行スペースを削除 */
    border-top: 1px solid #ddd; /* 最初の項目の上に線 */
    border-bottom: 1px solid #ddd; /* 最後の項目の下に線 */
}

.component-info-list dt {
    display: inline-block;
    width: 10ch; /* 10文字分の幅 */
    padding: 1rem 1rem 1rem 0;
    vertical-align: top;
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* font-sizeを再設定 */
    font-weight: 600;
    color: #000;
    white-space: nowrap; /* 改行を防ぐ */
}

.component-info-list dd {
    display: inline-block;
    width: calc(100% - 10ch - 1rem); /* dtの幅とpaddingを引く */
    margin: 0;
    padding: 1rem 0 1rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* font-sizeを再設定 */
}

.component-info-list dd:last-child {
    border-bottom: none; /* 最後のddの下部ボーダーは削除（親要素のborder-bottomで表示） */
}

.component-info-list dd p:first-child {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 600;
    color: #000;
}

.component-info-list dd p {
    margin: 0 0 0.5rem 0;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    line-height: 1.8;
    color: #000;
}

.component-info-list dd a {
    color: #0230fc;
    text-decoration: underline;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.component-info-list dd a:hover {
    color: #24357e;
}

/* スマホ画面では縦並びに変更 */
@media (max-width: 820px) {
    .component-info-list dt {
        display: block;
        width: 100%;
        padding: 1rem 0 0.5rem 0;
        white-space: normal; /* 改行を許可 */
    }
    
    .component-info-list dd {
        display: block;
        width: 100%;
        padding: 0 0 1rem 0;
        border-bottom: 1px solid #ddd;
    }
    
    .component-info-list dd:last-child {
        border-bottom: none;
    }
}

/* FAQスタイル */
.component-faq-list {
    margin: 2rem 0 1rem 0;
    padding: 0;
    text-align: left; /* 左揃え */
}

/* more-faqを最初は非表示 */
.more-faq {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* more-faqが表示されている状態 */
.more-faq.is-visible {
    display: block;
    opacity: 1;
}

/* more-faq-toggleのスタイル */
.more-faq-toggle,
.close-faq-toggle {
    cursor: pointer;
    color: #000000; /* 黒色に変更 */
    text-decoration: none;
    margin: 1rem 0;
    text-align: right;
}

.more-faq-toggle:hover,
.close-faq-toggle:hover {
    color: #000000; /* ホバー時も黒色 */
    text-decoration: none;
}

.component-faq-question {
    padding: 1.2rem 1.5rem;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 0; /* 角丸を削除 */
    cursor: pointer;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: flex-start; /* 左揃え */
    align-items: center;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    text-align: left; /* 左揃え */
}

.component-faq-question:hover {
    background: #f5f5f5;
}

.component-faq-question[aria-expanded="true"] {
    background: #f5f5f5;
    border-color: #999;
}

.component-faq-question[aria-expanded="true"] .component-faq-icon {
    transform: rotate(45deg);
}

.component-faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: auto; /* 右端に配置 */
}

.component-faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    margin: 0 0 0.5rem 0;
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    line-height: 1.8;
    color: #000;
    font-weight: 600;
    text-align: left; /* 左揃え */
}

.component-faq-answer.is-open {
    padding: 1.2rem 1.5rem;
    max-height: 1000px;
}

.component-faq-q {
    color: #ff0000; /* 赤 */
    font-weight: 600;
    font-size: 1.5em; /* Qのフォントサイズを大きく */
    margin-right: 0.5em; /* Qの後にスペース */
}

.component-faq-a {
    color: #0000ff; /* 青 */
    font-weight: 600;
    font-size: 1.5em; /* Aのフォントサイズを大きく */
    margin-right: 0.5em; /* Aの後にスペース */
}

@media (max-width: 480px) {
    .component-faq-question {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .component-faq-answer.is-open {
        padding: 1rem;
    }
}

/* トップに戻るボタン */
.component-button-back-to-top {
    position: fixed;
    bottom: 30px;
    right: clamp(20px, 8vw, 175px);
    width: 45px;
    height: 45px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(131, 158, 201, 0.3);
    touch-action: manipulation;
}

.component-button-back-to-top.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}


.component-button-back-to-top img {
    width: 100%;
    display: block;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    /* .menu-close-btnは.head-logo-container内に配置されているため、自動的に右端に配置される */
}

@media (max-width: 820px) {
    .component-logo-container {
        top: 30px;
        left: 20px;
        gap: 10px;
    }
    
    .menu-button {
        top: 30px; /* タブレット画面ではロゴと同じ高さに */
        right: clamp(20px, 8vw, 175px);
    }
    
    .menu-button img {
        width: 26px; /* タブレット画面では26pxで固定 */
    }
    
    .menu-close-btn {
        margin-top: 10px; /* padding-top: 20px + margin-top: 10px = 30px（元のtop: 30px相当） */
        width: 26px; /* menu-buttonと同じサイズ */
    }
    
    .component-text-junior-sports {
        font-size: clamp(0.9rem, 1.8vw, 1.2rem);
        margin-left: -3px;
    }
    
    .component-logo {
        width: 110px;
    }
    
    
    .section-hero {
        padding: 0;
    }
    
    .content-hero {
        top: 110px;
        left: 20px;
    }

    .content-hero h1 {
        font-size: clamp(2.3rem, 4vw, 3.5rem);
    }

    .content-hero h1 u {
        padding: 0.7rem 1.5rem 0.4rem 1.5rem;
    }
    
    .component-eye-catch {
        width: 280px;
    }

    .content-hero-right p {
        font-size: clamp(0.9rem, 1.6vw, 1.1rem);
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
    }

    .component-button-trial {
        font-size: clamp(1.3rem, 2.2vw, 1.5rem);
    }
    

    
    
    .body-section {
        padding: 2rem 20px;
    }
    
    .section-contact {
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .section-footer {
        padding-top: 3rem; /* 波型分を削除 */
        padding-bottom: 3rem;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .section-main, .section-main2, .section-main3, .section-main4 {
        padding-top: calc(3rem + 60px); /* 波型分（60px）を追加 */
        padding-bottom: 3rem;
    }
    
    /* section-mainのみpadding-topを調整（波型がtop: -60pxのため） */
    .section-main {
        padding-top: 2.5rem; /* 波型が上側に配置されているため、少し小さく調整 */
    }
    
    .component-button-back-to-top {
        width: 40px;
        height: 40px;
        bottom: 30px;
        right: clamp(20px, 8vw, 175px);
    }
}

@media (max-width: 480px) {
    .component-logo-container {
        top: 30px;
        left: 15px;
        gap: 8px;
    }
    
    .menu-button {
        top: 45px; /* ロゴと同じ高さに合わせて少し下げる */
        right: 15px; /* content-hero-rightと同じ右位置に */
    }
    
    .menu-button img {
        width: 20px; /* スマホでは小さめ */
    }
    
    .menu-close-btn {
        margin-top: 25px; /* padding-top: 20px + margin-top: 25px = 45px（元のtop: 45px相当） */
        width: 20px; /* menu-buttonと同じサイズ */
    }
    
    .component-text-junior-sports {
        font-size: clamp(0.8rem, 1.6vw, 1rem);
        margin-left: 0;
    }
    
    .component-logo {
        width: 100px;
    }
    
    
    .section-hero {
        padding: 0;
    }
    
    
    .content-hero {
        top: 100px;
        left: 15px;
    }

    .content-hero h1 {
        font-size: clamp(1.7rem, 2.7vw, 3.2rem);
    }

    .content-hero p {
        font-size: clamp(0.7rem, 1.5vw, 1rem);
    }
    
    .content-hero-right {
        bottom: 40px;
        right: 15px;
    }
    
    .component-eye-catch {
        width: 210px;
    }
    
    .content-hero-right p {
        font-size: clamp(0.7rem, 1vw, 0.9rem);
        padding: 0.4rem 0.8rem;
        margin: 0 0 6px 0;
    }
    

    
    .section-contact {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .section-footer {
        padding-top: 2rem; /* 波型分を削除 */
        padding-bottom: 2rem;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .section-main, .section-main2, .section-main3, .section-main4 {
        padding-top: calc(2rem + 60px); /* 波型分（60px）を追加 */
        padding-bottom: 2rem;
    }
    
    /* section-mainのみpadding-topを調整（波型がtop: -60pxのため） */
    .section-main {
        padding-top: 1.5rem; /* 波型が上側に配置されているため、少し小さく調整 */
    }
    
    .component-button-back-to-top {
        width: 35px;
        height: 35px;
        bottom: 20px;
        right: 15px;
    }
}

/* taiken/index.html用のヘッダースタイル */
/* taiken/index.htmlのbodyの背景色を白に 
body:has(.head-header) {
    background-color: #ffffff;
}
*/
.head-header {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-bottom: 0;
}

.menu-header {
    margin-bottom: 1rem;
}

.head-logo-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between; /* ロゴグループと閉じるボタンを左右に配置 */
    gap: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1200px;
    margin-left: auto; /* 左右のマージンをautoに */
    margin-right: auto; /* 左右のマージンをautoに */
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.head-logo-group {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.section-title {
    padding: 0;
}
.content-title {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.content-title-inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 20px;
    padding-right: 20px;
}

/* 余白調整：画面幅に応じて左右パディングを増やす */
@media (max-width: 1200px) {
    .content-title-inner {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (max-width: 820px) {
    .content-title-inner {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 480px) {
    .content-title-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.content-title h1 {
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #000;
    word-break: keep-all;
    margin-bottom: 1rem;
}

/* content-title内のul（会員様ページのナビゲーション） */
.content-title ul {
    list-style: disc;
    list-style-position: inside;
    margin: 1rem 0;
    margin-top: 2rem; /* h1との間隔を広げる */
    padding-left: 1.5em; /* list-styleが領域内に入るようにパディングを設定 */
}

.content-title ul li {
    margin: 0.8rem 0; /* 間隔を広げる（0.5remから0.8remに） */
    color: #ffffff; /* リストマーカーを白に */
}

.content-title ul li::marker {
    color: #ffffff; /* リストマーカーを明示的に白に */
}

.content-title ul li a {
    color: #ffffff;
    text-decoration: none;
}

/* 余白調整：画面幅に応じて左右パディングを増やす（.section-main2と同じ） */
@media (max-width: 1200px) {
    .head-logo-container {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (max-width: 820px) {
    .head-logo-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 480px) {
    .head-logo-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.head-logo-container .component-logo {
    width: 100px; /* 少し大きく */
    height: auto;
    border-radius: 12px;
    filter: brightness(0); /* 黒色にする */
    transition: all 0.3s ease;
}

.head-logo-container .component-text-junior-sports {
    color: #000; /* 黒色にする */
    font-size: clamp(0.6rem, 0.9rem, 1.1rem); /* もっと小さく */
    font-weight: 600;
    font-family: 'IBM Plex Sans JP', sans-serif;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
    line-height: 1;
    margin-left: -5px;
}