@charset "UTF-8";

/* ABOUT */
.about-container1 {
    display: inline-flex;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.about-title{
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
}

.about-txt{
    line-height: 1.8;
}

.about-container2{
    display: flex;
    padding-top: 90px;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url(../img/about.JPG);
    background-size: cover;      /* 画像を枠いっぱいに広げる */
    background-position: center; /* 中央を表示 */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
}

.gradient-white{
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: linear-gradient(359deg, rgba(255, 252, 248, 0.90) 0.98%, rgba(255, 255, 255, 0.90) 39.2%, rgba(255, 255, 255, 0.72) 84.01%, rgba(255, 255, 255, 0.00) 99.11%);
    border-radius: 4px;
    gap: 15px;
    padding: 60px 0 60px 28px;
}
.about-subtitle{
    color: var(--primary-orange);
    font-size: 1.8rem;
    font-weight: 600;
}

.line{
    width: 68px;
    height: 1px;
    background-color: var(--primary-orange);
}

.about-list{
    display: flex;
    padding-bottom: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.about-item{
    position: relative;
    /* 背景色を白にする */
    background-color: var(--primary-white);
    /* レイアウト設定 */
    display: flex;
    align-items: center;
    /* 重要：左側にアイコン＋余白分のスペースを確保 */
    padding: 6px 6px 6px 40px; 
    border-radius: 2px; /* 少し角を丸くすると上品です */
}

.about-item::before {
    content: "";
    position: absolute;
    /* 箱の左端から12pxの位置に配置（背景色の上に乗る） */
    left: 12px; 
    top: 50%;
    transform: translateY(-50%);
    /* 画像の設定 */
    width: 15px;
    height: 15px;
    background-image: url("../img/check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.about-btn{
    display: inline-block;
    padding: 20px;
    background: var(--btn-color);
    color: var(--primary-white);
    text-decoration: none;
    border-radius: 4px;
    font-size: 1.6rem;
    position: relative;
    transition: background-color 0.3s ease;
    width: 333px;
}

.about-btn::after {
content: "";
    position: absolute;
    top: 50%;            /* 上下中央へ */
    right: 15px;         /* 右端から15pxの位置 */
    transform: translateY(-50%); /* 正確に中央寄せ */
    width: 15px;         /* 矢印の幅 */
    height: 15px;        /* 矢印の高さ */
    
    /* 修正ポイント：セミコロンを追加し、サイズを調整 */
    background-image: url("../img/arrow.svg"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* 最初から表示させたい場合は 1 に、ホバー時なら 0 のまま */
    opacity: 1;
}

@media screen and (min-width: 768px) {
    .about-container1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .about-title{
        text-align: center;
        font-size: 2.4rem;
    }

    .spBr{
        display: none;
    }

    .about-txt{
        text-align: center;
    }

    .about-container2 {
        display: flex;
        /* 横並びにして、中身を右端（flex-end）に寄せる */
        flex-direction: row;
        justify-content: flex-end; 
        align-items: center; /* 上下中央に配置 */   
        padding: 0; /* スマホ用の上下パディングをリセット */
        background-image: url(../img/about.JPG);
        background-size: 100%;
        background-position: top;
        background-repeat: no-repeat; /* 繰り返しを防ぐ */
    }

    .gradient-white {
        /* 横幅を制限して、右側だけに箱がある状態にする */
        width: 45%; 
        max-width: 550px;
        /* スマホ用の左パディングなどをPC用に調整 */
        padding: 80px 60px;
        box-sizing: border-box; /* パディングを含めた幅計算 */
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.90) 0.02%, rgba(255, 255, 255, 0.90) 39.55%, rgba(255, 255, 255, 0.90) 72%, rgba(255, 255, 255, 0.00) 99.98%);
    }
}

/* LESSON */
.lesson{
    display: flex;
    padding: 48px 15px 60px 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background: var(--gradient-blue);
}

.lesson-txt{
    font-size: 2rem;
    font-weight: 700;
}

.lesson-list{
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.lesson-item{
    display: flex;
    width: 105px;
    height: 105px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    aspect-ratio: 1/1;
    border-radius: 100px;
    border: 1px solid var(--primary-skyblue);
    background: var(--primary-white);
}

.lesson-title{
    color: var(--primary-skyblue);
    font-weight: 500;
}

.lesson-point{
    color: var(--primary-skyblue);
    font-size: 2.4rem;
    font-weight: 700;
}
.lesson-menu {
    table-layout: fixed;    /* これを入れると、指定した幅が守られます */
    border-collapse: collapse;
    word-break: break-all;  /* 長い文字が来てもはみ出さないようにガード */
    border-collapse: collapse; /* 枠線を1本にまとめる（重要！） */
    margin: 30px 0;
    font-family: var(--font-serif);
    background-color: #fff;
}

/* 1列目（コース名） */
.lesson-menu th:nth-child(1){
    width: 30%;             /* 30%に固定 */
}

/* 2列目（料金） */
.lesson-menu th:nth-child(2){
    width: 28%;             /* 25%に固定 */
}

/* 3列目（おすすめ） */
.lesson-menu th:nth-child(3){
    width: 42%;             /* 残りの40%を割り振る */
    text-align: left;       /* おすすめ理由は左寄せが読みやすいです */
    font-size: 1.2rem;      /* 指示通り、3列目だけ少し小さく */
}

/* レッスンメニュー */
/* ヘッダー部分（コース・料金など） */
.t-head {
    background-color: var(--primary-skyblue); /* 先ほどの青系変数 */
    color: var(--primary-white);
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

/* データ部分 */
.t-body {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 1.3rem;
    color: var(--primary-gray);
    vertical-align: middle;
}

.t-body:nth-child(3) {
    font-size: 1.2rem;
    line-height: 1.2;
}

/* 料金の数字を目立たせる */
.price {
    font-size: 1.2rem;
    margin-left: 2px;
}

/* 有効期限（3ヶ月有効など）の注釈 */
.limit {
    display: block;
    font-size: 1rem;
    color: var(--primary-orange);
    margin-top: 4px;
}

/* 1行おきに背景色を変えると読みやすくなります（シマシマ） */
.lesson-menu tr:nth-child(even) {
    background-color: var(--primary-white);
}

/* lesson PC */
@media screen and (min-width: 768px) {
    .lesson-txt{
        font-size: 2.8rem;
    }

    .lesson-list{
        gap: 55px;
    }
    .lesson-item{
        width: 150px;
        height: 150px;
    }

    .lesson-title{
        font-size: 1.8rem;
    }  

    .lesson-point{
        font-size: 3.2rem;
    }

    .t-head{
        font-size: 2.4rem;
    }

    .t-body{
        font-size: 2.4rem;
    }

    .t-body:nth-child(3) {
    font-size: 2rem;
    line-height: 1.2;
}

    .price{
        font-size: 1.6rem;
    }

    .limit{
        font-size: 1.4rem;
        margin-top: 6px;
    }

    .lesson-menu th:nth-child(3){
    font-size: 2.4rem;      /* 指示通り、3列目だけ少し小さく */
}
}

.campaign-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.campaign-title1{
    display: flex;
    height: 29px;
    padding: 0 20px 8px 20px;
    align-items: flex-end;
    gap: 12px;
    background: var(--primary-pink);
    color: var(--primary-white);
    border-radius: 15px;
    font-size: 2.6rem;
    letter-spacing: 2.8px;
    -webkit-text-stroke: 3px var(--primary-pink);
    paint-order: stroke;

}

.camp-price1{
    font-size: 1.3rem;
    padding-left: 11px;    
}

.campaign-title2{
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2.8px;
    /* 親の指示を打ち消す設定を追加 */
    -webkit-text-stroke: 0;         /* 縁取りを消す */
}

.campaign-container2{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.campaign-title3{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 4px;
}

.decoration{
    font-size: 1.2rem;
    color: var(--primary-orange);
    padding-right: 88px;
}

.campaign-subtitle{
    font-size: 1rem;
    color: var(--primary-gray);
}

.campaign-list{
    display: flex;
    padding-bottom: 10px;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    position: relative;
}

/* 2番目以降のアイテムの「前」に擬似要素を追加 */
.campaign-item:nth-child(n+2)::before {
    content: ""; /* ここに好きな記号や画像を入れる */
    position: absolute;
    right: 155px;   /* gapの半分くらいの数値で中央に寄せる */
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-image: url("../img/plus.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.campaign-item{
    display: flex;
    padding: 17px 10px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--primary-white);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.campaign-txt1{
    color: var(--primary-pink);
    font-size: 2rem;
    font-weight: 700;
}

.campaign-txt2{
    color: var(--primary-pink);
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-left: 36px;
}

.campaign-txt2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); 
    width: 34px;
    height: 3px;
    background-image: url("../img/campaign-arrow.svg"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.camp-price2{
    font-size: 1.4rem;
    color: var(--primary-pink)  ;
}

/* campaign PC */
@media screen and (min-width: 768px) {

    .campaign-container{
        gap: 30px;
    }

    .campaign-list{
        gap: 60px;
        position: relative;
    }

    /* 2番目以降のアイテムの「前」に擬似要素を追加 */
    .campaign-item:nth-child(n+2)::before {
    right: 235px;   /* gapの半分くらいの数値で中央に寄せる */
    width: 27px;
    height: 27px;
}


    .campaign-title1{
        font-size: 3.2rem;
        letter-spacing: 9.6px;
    }

    .campaign-title2{
        font-size: 2rem;
        letter-spacing: 6px;
    }

    .decoration, .campaign-subtitle{
        font-size: 1.6rem;
    }

    .campaign-title{
        font-size: 1.8rem;
        padding: 0 20px;
    }

    .campaign-txt1{
        font-size: 2.8rem;
    }

    .camp-price1{
        font-size: 1.6rem;
        padding-right: 8px;
    }

    .campaign-txt2{
        font-size: 2.8rem;
    }

    .camp-price2{
        font-size: 1.8rem;
    }

    .decoration{
    padding-right: 143px;
}

}

    .btn-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-txt{
    display: inline-block;
    position: relative;
    z-index: 2;          /* ボタンより上に表示させる */
    padding: 5px 20px;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--primary-orange);
    background: var(--primary-white);
    color: var(--primary-orange);
    font-size: 1.6rem;
}

.btn-link {
    display: flex;
    justify-content: center; /* これで中のテキストは常に中央に寄ります */
    align-items: center;
    /* 左右のパディングを【同じ値】にする */
    /* これにより、テキストの長さに関わらず「箱の中央」が「文字の中央」になります */
    padding: 20px 40px; 
    /* 最小幅を決めておくと、短いテキストでもボタンが小さくなりすぎません */
    min-width: 333px; 
    width: fit-content;
    margin-top: -13px;
    z-index: 1;
    border-radius: 50px;
    background: var(--btn-color);
    color: var(--primary-white);
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    text-decoration: none; /* リンクの下線を消す */
}

.btn-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px; /* 右端からの距離を固定 */
    /* translateY は -50% が正確な中央です */
    transform: translateY(-50%); 
    width: 12px;
    height: 12px;
    background-image: url("../img/arrow.svg"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 矢印が文字と重なるのが心配なら、ここには flex-shrink はいりません（絶対配置なので） */
}

/* studio */
.studio {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* 全体の幅を100%に */
    max-width: 1200px; /* ★PCでのコンテンツ最大幅（お好みで） */
    margin: 0 auto;
    padding: 0 20px; /* 画面端にピッタリくっつかないよう余白 */
    box-sizing: border-box;
}

.studio-top {
    display: flex; /* inline-flexから変更して幅を使いやすく */
    width: 100%;   /* 親要素に対して100% */
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* ★タイトルと画像を左右に振り分ける */
    gap: 18px;
    position: relative;
    z-index: 2;
    margin-top: 48px;
}

.studio-img {
    width: 50%;           /* 親要素（studio-top）に対する横幅 */
    aspect-ratio: 4 / 3; /* ★重要：横16:縦9の比率で固定（3/2などお好みで） */
    object-fit: cover;    /* ★重要：枠に合わせて画像を切り抜く */
    object-position: center; /* 中央を基準にトリミング（上を見せたいなら center top） */
    /* 既存の制限をリセット・調整 */
    height: auto;         
    max-width: none;      
    max-height: none;     

}

.studio-container {
    display: flex;
    flex-direction: column;
    width: 80%;       /* ★スマホ〜タブレットでしっかり広がるように */
    max-width: 700px; /* ★PCでも寂しくない幅まで広げる */
    padding: 60px 40px 40px 60px; /* 少しゆったりさせる */
    background: var(--gradient-orange);
    margin-top: -60px; /* 重なりを少し深く */
    margin-left: 0;    /* 中央寄せにするためにリセット */
    margin-right: auto; /* 左側に寄せるならこれ、中央なら margin: -60px auto 0; */
    z-index: 1;
    box-sizing: border-box;
    gap: 20px;
}
.studio-title{
    color: var(--primary-orange);
    font-size: 1.6rem;
    font-weight: 600;
}

.studio-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.studio-item{
    font-size: 1.6rem;
    position: relative;
}

.studio-item::before {
    content: "";
    position: absolute;
    /* 箱の左端から12pxの位置に配置（背景色の上に乗る） */
    left: -24px; 
    top: 50%;
    transform: translateY(-50%);
    /* 画像の設定 */
    width: 12px;
    height: 12px;
    background-image: url("../img/check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.studio-txt{
    font-size: 1.2rem;
    line-height: 1.8rem;
}

/* studio PC */
@media (min-width: 768px) {
.studio-container {
    display: flex;
    padding: 48px 131px 80px 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-top: -80px;
    }

.studio-img {
    width: 60%;
    aspect-ratio: 4 / 3; /* ★重要：横16:縦9の比率で固定（3/2などお好みで） */
    object-fit: cover;    /* ★重要：枠に合わせて画像を切り抜く */
    object-position: center; /* 中央を基準にトリミング（上を見せたいなら center top） */
}

.studio-title{
    font-size: 2.4rem;
    padding-left: 80px;
}
.studio-item, .studio-txt{
    font-size: 2rem;
    line-height: 1.8;
}

}

/* question */
.question{
    display: flex;
    padding: 48px 0 90px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.question-list {
    width: 90%;
}

.question-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* 質問部分（クリックエリア） */
.q-txt {
    display: flex;
    align-items: center;
    padding: 20px;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
    background-color: var(--primary-white);
    transition: background-color 0.3s;
}

.q-txt::-webkit-details-marker {
    display: none; /* Safari用の三角消し */
}

/* 質問の頭に「Q」をつける */
.q-txt::before {
    content: "";
    display: inline-block; /* ブロック化してサイズを持てるようにする */
    width: 24px;           /* アイコンの幅（適宜調整してください） */
    height: 24px;          /* アイコンの高さ（適宜調整してください） */
    margin-right: 15px;
    flex-shrink: 0;        /* 画面が狭くなってもアイコンが潰れないように固定 */
    background-image: url("../img/Q.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /* 中央に配置 */
}
/* 通常時（閉じている時） */
.q-txt::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 12px;
    height: 12px;
    /* 【修正】一度 rotate(0) を明示し、translateYで中央固定する */
    transform: translateY(-50%) rotate(0deg); 
    transition: transform 0.3s ease; /* transitionもここに入れる */
    background-image: url("../img/Q-arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* 1. detailsタグ全体に背景を設定する */
.question-item details {
    overflow: hidden;   /* 背景が角からはみ出さないように */
    transition: background-color 0.3s;
}

/* 2. 開いている時だけdetails全体の背景を変える */
details[open] {
    background: var(--gradient-blue);
}

/* 3. 個別に設定していた背景を削除（透明にする） */
details[open] .q-txt {
    background: transparent; /* 個別の背景は消す */
}

/* detailsが開いている時、その中にある .q-txt::after を回転させる */
details[open] .q-txt::after {
    /* translateY(-50%) を書かないと、回転した瞬間に矢印が下にズレるので注意！ */
    transform: translateY(-50%) rotate(180deg);
}

.a-txt {
    /* --- レイアウトの修正 --- */
    display: flex;          /* 横並びにする */
    align-items: flex-start; /* アイコンを1行目の高さに合わせる */
    /* --- 余白の調整 --- */
    /* アイコンをflexで並べるので、左padding（75px）は不要になります */
    padding: 10px 40px 30px 20px; 
    line-height: 1.8;
    color: var(--primary-gray);
    background: transparent;
    margin: 0;
}

.a-txt::before {
    content: "";
    display: block; /* inline-blockよりblockが安定します */
    width: 24px;
    height: 24px;
    margin-right: 15px;
    margin-top: 4px; /* 【微調整】文字の1行目と高さをピタッと合わせる */
    flex-shrink: 0;  /* 画面が狭くなってもアイコンが潰れないように固定 */
    
    background-image: url("../img/A.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* question PC */
@media screen and (min-width: 768px) {
    .question-list {
        width: 80%;
        max-width: 800px;
    }

    .q-txt {
        font-size: 1.8rem;
    }

    .a-txt {
        font-size: 1.8rem;
    }
}


/* access */
.access{
    display: flex;
    padding: 0 15px 60px 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

/* --- 親コンテナの調整 --- */
.access-container {
    display: flex;
    flex-direction: column; /* スマホでは縦並び、PCでは横並びにしたい場合はあとで調整 */
    align-items: center;
    gap: 30px;
    width: 100%;           /* コンテナを横いっぱいに */
    max-width: 1000px;     /* マップが広がりすぎないように上限を決める */
    box-sizing: border-box;
}

/* --- マップを囲むdivの調整 --- */
.map {
    width: 100%;           /* 画面幅に合わせて100%広がるようにする */
}

.map iframe {
    width: 100%;           /* iframe自体も親のdivに合わせる */
    height: 350px;
    border-radius: 12px;   /* 角を丸くすると柔らかい印象になります */
    display: inline-block;
}

.access-info img {
    width: 235px;
    height: auto;
}

.access-address{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    font-style: normal;
}

.access-txt{
    font-size: 1.4rem;
    line-height: 1.4;
}

/* access PC */
@media screen and (min-width: 768px) {
    .access-container {
        flex-direction: row;
        gap: 40px;
    }

    .map {
        width: 60%;
    }

    .access-info {
        width: 40%;
    }

    .access-txt {
        font-size: 1.8rem;
    }
}

/* contact */
.contact{
    display: flex;
    padding: 48px 0 65px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    background-image: url(../img/contact.JPG);
    background-color: rgba(255, 255, 255, 0.7); /* 白の90%透過 */
    /* 画像と色を「ブレンド」させる魔法の1行 */
    background-blend-mode: lighten; /* これで画像の上に色が乗ります */
    background-size: 120% auto;      /* 画像を枠いっぱいに広げる */
    background-position: -20px -20px; /* 画像の表示位置を微調整（必要に応じて調整してください） */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
}

.contact-txt{
    font-size: 1.8rem;
}

/* contact PC */
@media screen and (min-width: 1100px) {
    .contact{
    background-size: 100% auto;      /* 画像を枠いっぱいに広げる */
    background-position: 0 -500px; /* 画像の表示位置を微調整（必要に応じて調整してください） */
}
    .contact-txt {
        font-size: 2rem;
    }
}