/* =========================================================
   背景画像(調整の必要あり！)
   ========================================================= */
.cover-home {
    background-image: url(../images/tesuri_back_1.png),
        url(../images/tesuri_back_2.png), url(../images/tesuri_back_3.png),
        url(../images/tesuri_back_4.png), url(../images/tesuri_back_5.png);
    background-size: 100% 27%, 100% 100%, 100% 40%, 100% 20%, 100% 20%;
    background-position: 0 0%, 0 29%, 0 60%, 0 90%, 0 100%;
    overflow-x: hidden;
}

/* =========================================================
   mainのcss
   ========================================================= */
.mobile {
    display: none;
}

.gitop {
    position: relative;
    margin-bottom: 300px;
}

.tesuri-title {
    padding-top: 15%;
    letter-spacing: 10px;
}

.tesuri-txt {
    font-size: 48px;
    margin-left: auto;
    text-align: right;
}

.gitop img {
    position: absolute;
    top: 15%;
    width: 85%;
    margin: 0 auto;
    margin-left: 20%;
    display: flex;
}

/* =========================================================
   middleのcss（中央寄せ＋重なり回避）
   ========================================================= */
.middle {
    display: flex;
    justify-content: center;
    margin-top: 750px;
}

.middle-txt {
    width: min(900px, 90%);
    margin-left: 0;
}

/* ※ middle img を使っていないなら消してOK（残すなら relative が必要） */
.middle img {
    position: absolute;
    left: -10%;
    width: 40%;
    height: auto;
}

.center-sentence {
    text-align: center;
}

/* =========================================================
   purposeのcss（★ここが置き換え：左画像 / 右テキストに分割）
   ========================================================= */
.usecase-head {
    max-width: 1100px;
    margin: 120px auto 5px;
}

.usecase-head h1 {
    margin: 0 0 12px;
    color: #606060;
}

.usecase-head p {
    margin: 0;
    color: #606060;
}

.purpose-flex,
.second-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    text-align: left;
    flex-wrap: nowrap;
}

/* 左：画像 */
.purpose-photo {
    position: static;
    flex: 0 0 40%;
    text-align: left;
}

.purpose-photo img {
    width: 100%;
    /* 枠いっぱい */
    height: auto;
    display: block;
}

/* 右：テキスト */
.purpose-txt {
    width: auto;
    /* ★ 120% をやめる */
    flex: 1;
    /* 残り幅全部 */
    color: #606060;
}

.purpose-txt h2 {
    color: #606060;
}

.purpose-txt p {
    color: #606060;
}

/* 説明文（右寄せなら right / 読みやすさ優先なら left） */
.purpose-sentence {
    text-align: left;
    /* ★ ここを right にすると右寄せ */
    line-height: 1.8;
}

/* 2個目 */
/* 右：画像 */
.second-photo {
    flex: 0 0 35%;
    /* ここは好みでOK */
    max-width: 35%;
}

.second-photo img {
    width: 120%;
    height: auto;
    display: block;
}

/* 説明文 */
.second-sentence {
    text-align: left;
    /* ★ ここを right にすると右寄せ */
    line-height: 1.8;
}


/* 3個目 */
.third-photo {
    position: static;
    flex: 0 0 30%;
    text-align: right;
}

.third-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* sp-only系（既存） */
.sp-only {
    display: none;
}

.sp-only1 {
    display: none;
}

/* ボタン/装飾（既存） */
.btn1 {
    order: -1;
    margin-top: 20px;
    margin-bottom: 40px;
}

.more {
    display: inline-block;
    background-color: #d3af2f;
    padding: 10px 20px;
    text-align: center;
    width: 50%;
    color: #fff;
    border-radius: 30px;
    margin-bottom: 50px;
}

/* =========================================================
   GALLERYのcss（以下は元のまま）
   ========================================================= */
.gallery {
    margin-top: 100px;
}

.gallery h1 {
    margin: 0 0 12px;
    color: #606060;
}

.gallery p {
    color: #606060;
}


/* ===== slider base ===== */
.slider {
    position: relative;
    max-width: 900px;
    /* 好きな幅に */
    margin: 0 auto;
    margin-top: 5%;
}

/* 1枚分だけ表示する窓 */
.slider-viewport {
    overflow: hidden;
    border-radius: 16px;
    /* 角丸が必要なら */
}

/* ここが横並びの本体 */
.slides {
    display: flex;
    /* ★横並び */
    width: 100%;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* 1枚 = 100%幅 */
.slide {
    flex: 0 0 100%;
    /* ★必須：1枚分の幅固定 */
}

/* 画像を枠にフィット */
.slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ドット */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 5%;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: #d3af2f;
    /* 黄色っぽいドット */
    opacity: 0.35;
    cursor: pointer;
}

.dot.is-active {
    opacity: 1;
}

/* ボタン */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #d3af2f;
    /* ← 黄色 */
    color: #fff;
    /* 文字色（白） */
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.slider-btn:hover {
    filter: brightness(1.05);
}

.slider-btn.prev {
    left: -100px;
}

.slider-btn.next {
    right: -100px;
}

/* ====== レスポンシブ ====== */
@media (max-width: 768px) {
    .gallery-section {
        padding: 60px 0 60px;
    }

    .slider {
        position: relative;
        width: min(600px, 90%);
        margin: 0 auto;
    }

    .slide img {
        width: 80%;
        margin: 0 auto;
        border-radius: 12px;
    }

    .slider-btn {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .slider-btn.prev {
        left: -3%;
    }

    /* ★画面内に */
    .slider-btn.next {
        right: -3%;
    }

    /* ★画面内に */
    .slider-btn {
        z-index: 50;
        /* ★前面に */
    }

}

/* =========================================================
   equipmentのcss
   ========================================================= */
.equipment {
    margin-top: 100px;
    color: #3a3a3a;
}

.equipment-head {
    text-align: right;
    margin-bottom: 5%;
}

/* ===== 機材・設備セクション全体 ===== */
.equipment {
    margin: 0 auto;
    padding: 60px 0 40px;
}

/* ===== 上の白いカード ===== */
.equipment-card {
    width: min(1100px, 92%);
    margin: 0 auto 120px;
    background: #fff;
    border-radius: 22px;
    padding: 40px 56px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.equipment-lead {
    margin-bottom: 20px;
}

.equipment-block {
    margin-top: 26px;
}

.equipment-title {
    margin: 0 0 5px;
    color: #3a3a3a;
}

/* 1行の並び（左：説明 / 右：×2） */
.equipment-row {
    width: min(1100px, 92%);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
}

.equipment h5 {
    color: #3a3a3a;
    font-weight: normal;
}

/* ===== 下のアイコン列 ===== */
/* 全体（1つのグリッドに統一） */
.studio-icons {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px 22px;
    /* row-gap / col-gap */
    justify-items: center;
}

/* row用の箱を消して、子要素を親gridに直で参加させる */
.studio-icons-row {
    display: contents;
}

/* アイコン自体を縦並び・中央揃えに固定 */
.studio-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 画像の箱を完全に統一 */
.studio-icon img {
    width: 180px;
    height: 180px;
    /* ★追加：高さも固定 */
    object-fit: contain;
    /* ★中身を潰さず箱に収める */
    display: block;
}

.studio-icon p {
    margin-top: 10px;
    color: #3a3a3a;
}

/* 下段の2つを「2行目の1列目・2列目」に固定 */
.studio-icons-row.bottom .studio-icon:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
}

.studio-icons-row.bottom .studio-icon:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
}

.studio-icon p {
    white-space: nowrap;
    width: auto;
    text-align: center;
    letter-spacing: 0.05em;
    /* ★ common.css より弱く */
}

.reservation-head h1 {
    color: #3a3a3a;
    text-align: right;
}


/* =========================================================
   faqのcss
   ========================================================= */
.faq {
    margin-top: 100px;
}

.faq-head h1,
.faq-head p {
    text-align: right;
    color: #606060;
}

.faq-head {
    margin-bottom: 5%;
}

.question-label {
    display: flex;
    background-color: #fff;
    color: #606060;
    height: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 20px;
}

.question-label h3 {
    color: #d4802d;
    margin: 15px;
}

.question-label p {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 30px;
    color: #606060;
}

.answer {
    display: none;
    background-color: #d4802d;
    color: #fff;
    height: auto;
    margin-top: 10px;
    padding: 0;
    border-radius: 20px;
}

input[type="checkbox"]:checked+.question-label+.answer {
    display: block;
}

.answer h3 {
    margin-left: 20px;
    padding-top: 15px;
}

.answer p {
    margin-left: 110px;
    margin-bottom: 0;
    margin-top: -75px;
    padding-bottom: 35px;
}



/* =========================================================
   acsessのcss
   ========================================================= */
.access-head {
    margin: 120px auto 5px;
    color: #606060;
}

.access-head h1,
.access-head p {
    text-align: left;
    color: #606060;
}

.map-embed {
    width: min(1100px, 92%);
    margin: 0 auto 120px;
}



/* =========================================================
   reservationのcss
   ========================================================= */
.reservation {
    margin-top: 150px;
}

.reservation-head h1,
.reservation-head p {
    text-align: right;
    color: #606060;
}

.sp-img {
    display: none;
}

.calendar-embed {
    width: min(1100px, 92%);
    margin: 0 auto 120px;

    background: #fff;
    /* ★白カード */
    border-radius: 24px;
    padding: 12px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
    margin-top: 5%;
}

.calendar-embed iframe {
    width: 100%;
    height: 735px;
    border: 0;
    border-radius: 24px;
    background: #fff;
}

@media screen and (max-width: 768px) {
    .cover-home {
        background-image: url(../images/mobile_back_tesuri.png);
        background-size: 100% 100%;
        background-position: 0px 0px;
    }

    .pc {
        display: none;
    }

    .mobile {
        display: block;
    }

    .gitop {
        margin-bottom: 0;
        padding-bottom: 0;
        height: auto;
        min-height: 0;
        text-align: center;
    }

    .gitop img {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
        width: 92%;
        max-width: 520px;
        height: auto;
        transform: translate(0, -10%);
        position: relative;
        /* ★z-index適用のため */
        z-index: 1;
    }

    .mobile-title {
        transform: translateY(200%);
        position: relative;
        z-index: 10;
    }

    /* 次の文章セクションが勝手に下がらないように */
    .middle {
        margin-top: 0;
    }


    .sp-only {
        display: block;
    }

    .sp-only1 {
        display: block;
        margin: 0 auto;
        width: 40%;
        padding-top: 0px;
    }

    .tesuri-txt {
        text-align: center;
        position: static;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 40px;
    }

    .sp-only1 {
        width: 80%;
        height: auto;
    }

    .middle {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .middle img {
        display: none;
    }

    .mobile img {
        width: 80%;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        margin-bottom: 3%;
    }

    .middle-txt {
        margin-top: 0;
        /* ← これで空白消える */
        padding-top: 12px;
        /* 余白が欲しければこのくらい */
    }


    /* 以下はUSECESE------------------------ */
    /* ★目的：スマホは縦並び */
    .purpose,
    .gallery,
    .equipment,
    .faq,
    .access,
    .reservation {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        text-align: center;
        margin: 0 auto;
    }

    .usecase-head h1,
    .equipment-head h1,
    .equipment-head p,
    .equipment-card p,
    .faq-head h1,
    .faq-head p,
    .access h1,
    .access p,
    .reservation h1,
    .reservation p {
        color: #606060;
        text-align: center;
    }

    .usecase-head h2 {
        margin-top: 5%;
        color: #fff;
    }

    .mobile h2 {
        color: #fff;
        margin-top: 10%;
    }

    /* スマホでは上の画像は隠して sp-only に任せるならこれ */
    .purpose-photo {
        display: none;
    }

    .purpose-txt {
        display: flex;
        flex-direction: column;
        text-align: center;
        position: static;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .purpose-sentence {
        font-size: 12px;
        text-align: center;
        /* スマホは中央に寄せる */
    }

    .purpose-sentence1 {
        font-size: 12px;
        color: #606060;
    }

    .more {
        position: relative;
        order: -1;
        margin: 0 auto;
    }

    .sp-img {
        display: block;
        text-align: center;
        margin: 20px 0;
    }

    .sp-img img {
        width: 80%;
    }

    /* =========================================================
   equipmentのcss
   ========================================================= */

    /* equipment-row が p1個のときは中央寄せ */
    .equipment-row {
        display: flex;
        justify-content: center;
        /* ← space-between をやめる */
    }


    /* 親：アイコン全体 */
    .studio-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 1段目は4列 */
        gap: 26px 22px;
        justify-items: center;
    }

    /* rowの箱は“中身だけ”にする（rowで改行させない） */
    .studio-icons-row {
        display: contents;
    }

    /* 5個目〜7個目を2段目に回す（=4列目以降を次行へ） */
    .studio-icons-row.top .studio-icon:nth-child(n+5) {
        grid-row: 2;
        /* 2段目 */
    }

    /* 下段を3つにしたいので、2段目は1〜3列に置く */
    .studio-icons-row.top .studio-icon:nth-child(5) {
        grid-column: 1;
    }

    .studio-icons-row.top .studio-icon:nth-child(6) {
        grid-column: 2;
    }

    .studio-icons-row.top .studio-icon:nth-child(7) {
        grid-column: 3;
    }

    /* 4列の中で絶対に溢れないようにする */
    .studio-icons {
        width: min(1000px, 92%);
        margin: 0 auto;
        overflow: hidden;
    }

    /* 画像サイズを固定→可変に変更 */
    .studio-icon img {
        width: min(160px, 100%);
        height: auto;
        display: block;
        object-fit: contain;
    }


    /* =========================================================
   faqのcss
   ========================================================= */
    .question-label {
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 10px;
    }

    .question-label p {
        margin-left: -5px;
    }

    .answer {
        text-align: left;
        border-radius: 0px;
        display: none;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 10px;
    }

    .answer p {
        margin-left: 45px;
        /* 左の余白を適切に調整 */
        margin-bottom: 0;
        /* 下の余白をなくす */
        margin-top: -35px;
        padding-bottom: 10px;
    }

    .answer h3 {
        margin-left: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* =========================================================
   acsessのcss
   ========================================================= */
    .map-embed iframe {
        width: 100%;
        height: 400px;
    }

    .calendar-embed iframe {
        height: 735px;
    }

    /* 以下：元のモバイルCSS（必要ならこのまま続けてOK） */
    .service {
        position: relative;
        text-align: center;
        margin: 0 auto;
        white-space: nowrap;
        margin-top: 50px;
    }

    .black {
        margin-right: 10%;
    }

    .service-back {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .service-back img {
        width: 100%;
        margin-top: 20%;
    }

    .service-photo3 img {
        margin-top: 20%;
    }

    .education {
        text-align: center;
        margin-top: 10%;
        padding-right: 75%;
        font-size: 9px;
    }

    .student {
        text-align: center;
        margin-right: 100%;
        width: 26%;
        font-size: 9px;
        left: 70%;
        margin-top: 10%;
    }

    .student-txt {
        text-align: center;
        left: 67%;
        width: 32%;
        font-size: 9px;
    }

    .work {
        display: none;
        font-size: 9px;
        left: 0%;
        margin-right: 60%;
        margin-top: 6px;
    }

    .work-sponly {
        display: block;
        color: #d4802d;
        font-size: 9px;
        left: 0%;
        margin-right: 60%;
        margin-top: -10%;
    }

    .offer,
    .client {
        text-align: center;
        margin: 20px 0;
        font-size: 9px;
    }

    .check {
        font-size: 9px;
        left: 15%;
        margin-top: -20%;
    }

    .offer {
        display: flex;
        margin-top: 15%;
    }

    .client {
        font-size: 9px;
        left: 0;
        margin-top: 5%;
        margin-right: 55%;
        margin-bottom: 0%;
    }

    .client-txt {
        text-align: center;
        font-size: 9px;
    }

    .achievement,
    .flow,
    .price,
    .faq {
        position: relative;
        text-align: center;
        margin-top: 20%;
    }

    .price h2 {
        color: #606060;
    }

    .faq-item {
        padding-top: 0%;
    }

    .about {
        margin-top: 10px;
        font-size: 9px;
        color: #606060;
    }

    .photo3 {
        display: grid;
        grid-template-columns: 50% 50%;
        justify-items: center;
        gap: 5px;
        margin-top: 5%;
    }

    .block {
        height: 97%;
        width: 70%;
    }

    .photo3 img {
        height: 60%;
        width: 60%;
        margin-top: 0px;
    }

    .block-title {
        font-size: 10px;
        color: #000;
    }

    .txt {
        font-size: 10px;
        color: #000;
    }

    .block-title-date {
        font-size: 11px;
    }

    .left {
        width: 55px;
        height: 55px;
        margin: 0px;
    }

    .right {
        border-left: 2px dashed #fff;
        margin-left: -20px;
        padding-left: 50px;
        z-index: 10;
        margin-top: auto;
        width: 90%;
    }

    .right1 {
        margin-left: -35px;
        padding-left: 120px;
        z-index: 10;
        margin-top: -60px;
        width: 90%;
    }

    .orange {
        background-color: #d4802d;
        color: #fff;
        border-radius: 30px;
        width: 40%;
        text-align: center;
        margin: 10px 0px 0px 0px;
        font-size: 12px;
    }

    .contact {
        margin-top: 30px;
    }

    .contact-txt {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .contact-pc {
        text-align: center;
    }

    /* ===== スマホ：アイコンを横に並べる ===== */
    @media (max-width: 600px) {

        .studio-icons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 28px 22px;
            margin: 20px auto 30px;
            max-width: 600px;
        }

        /* row 概念を無効化して1列にまとめる */
        .studio-icons-row {
            display: contents;
        }

        .studio-icon {
            width: calc(25% - 22px);
            text-align: center;
        }

        .studio-icon img {
            width: 80px;
            height: auto;
            display: block;
            margin: 0 auto 10px;
        }

        .studio-icon p {
            margin: 0;
            font-size: 14px;
            line-height: 1.3;
        }

    }
}