@charset "utf-8";

/* ==========================================================
   スターズリンク LP
   ----------------------------------------------------------
   ・デザイン幅は750px（body の max-width）
   ・サイズは clamp(最小, vw, 最大) で指定
     最大値 = カンプ上のpx、vw = px ÷ 7.5、最小 = 最大の半分
     例）30px → clamp(15px,4vw,30px)
   ・背景画像（.bg）の上に文字を重ねるセクションは、
     文字の位置を % で指定している（背景画像の高さが基準）
   ・主な色
     濃い茶 #391800（本文）
     オレンジ #ff7909（強調文字・ラベル・ボタン類）
     グレー #585656（吹き出し等）、#757474（FV下部）
     薄い黄 #fff4aa（マーカー・背景）、#fff7c6、#fffcea
   ========================================================== */


/* ===== 共通 ===== */
html,body,*{
    box-sizing: border-box;
}

html,body{
    background-color: #fff;
    font-family: "noto-sans-cjk-jp", sans-serif;
    color: #391800;
}

*, *::before, *::after {
    box-sizing: inherit;
}

img{
    width: 100%;
}

body{
    max-width: 750px;
    margin: 0 auto;
}

header{
    padding: clamp(13.5px,3.6vw,27px) 0;
    background-color: #ddc210;
}

.header-copy{
    display: block;
    width: 80%;
    margin: 0 auto;
}

section{
    position: relative;
}

.bg{
    display: block;
    width: 100%;
    height: auto;
}

.content{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

h1{
    font-weight: 500;
    font-size: clamp(16px,4.2vw,32px);
    text-align: center;
    margin-top: clamp(10px,2.6vw,20px);
    line-height: 1.9em;
}

h3{
    font-size: clamp(15px,4vw,30px);
    font-weight: 500;
    margin-bottom: clamp(15px,4vw,30px);
}

.decor{
    position: absolute;
}

.orange{
    color: #ff7909;
}

.underline{
    background: linear-gradient(transparent 60%, #fef7c5 60%);
    background-repeat: no-repeat;
    background-size: 92% 100%;
    background-position: center;
}

/* セクション見出し（開催情報・声・講師紹介・フロー 共通） */
.section-heading{
    margin: 0 auto;
    text-align: center;
}

.instructor-head,.info-head,.message-head{
    width: 85%;
}


/* ===== FV ===== */

/* ヘッダー：背景画像上部のオレンジ帯に重ねる */
.header-fv{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
}

.header-fv .header-copy{
    width: 85%;
}

.fv{
    position: relative;
}

/* .contentの高さをセクション全体に揃える（%指定の基準になる） */
.fv .content{
    bottom: 0;
}

/* 都心まで通わなくても本格的に学べる！ */
.fv-toshin{
    position: absolute;
    top: 26.5%;
    left: 0;
    width: 40%;
}

.fv-main{
    position: absolute;
    top: 49.7%;
    right: 0;
    left: 0;
    text-align: center;
}

/* 江戸川区の */
.fv-edogawa{
    display: block;
    width: 32.4%;
    margin-left: 2%;
}

.fv-main h1{
    margin: clamp(4px,1.5vw,11px) 0 0;
    padding: 0;
    line-height: 1;
}

/* 子ども向け芸能スクール */
.fv-maincopy{
    display: block;
    position: relative;
    top: clamp(-5px,-0.67vw,-2px);
    width: 86%;
    margin: 0 auto;
}

/* スターズリンク ロゴ */
.fv-logo{
    display: block;
    width: 61%;
    margin: 0 auto;
}

/* 芸能の基礎 [演技・ダンス・殺陣] を一度に学べる */
.fv-sub{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px,0.8vw,6px);
    margin-top: clamp(4px,1.3vw,10px);
    font-size: clamp(14px,3.8vw,28px);
    font-weight: 500;
    line-height: 1.2;
    color: #757474;
    white-space: nowrap;
}

.fv-tate{
    flex-shrink: 0;
    width: 38%;
    height: auto;
}

/* テレビ・CM・舞台などの〜 */
.fv-note{
    margin-top: clamp(7px,1.9vw,14px);
    font-size: clamp(12px,3.3vw,25px);
    line-height: 1.85;
    color: #757474;
}


/* ===== 申込2ステップ・CTA ===== */

/* 申込2ステップ(CTA直上) */
.apply-steps{
    width: 94%;
    margin: clamp(13px,3.4vw,26px) auto 0;
    padding: clamp(16px,4.2vw,32px) clamp(14px,4vw,30px) clamp(18px,4.8vw,36px);
    background-color: #fff4aa;
    text-align: center;
}

/* FV直下：FVとの余白0・左右いっぱい */
.apply .apply-steps{
    width: 100%;
    margin: 0;
    padding-right: clamp(20px,7vw,52.5px);
    padding-left: clamp(20px,7vw,52.5px);
}

.apply-steps-title{
    font-size: clamp(20px,5.6vw,42px);
    font-weight: bold;
    line-height: 1.4;
    color: #391800;
    margin-bottom: clamp(10px,2.6vw,20px);
}

.apply-steps-flow{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(8px,2.2vw,16px);
}

.apply-step{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: clamp(2px,0.5vw,4px) solid #ff7909;
    padding: clamp(10px,2.6vw,20px) 0.5em clamp(12px,3.2vw,24px);
}

.apply-step-label{
    display: inline-block;
    padding: 0.35em 1.2em;
    margin-bottom: clamp(6px,1.6vw,12px);
    border-radius: 999px;
    background-color: #ff7909;
    color: #fff;
    font-size: clamp(11px,2.9vw,22px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}

.apply-step-text{
    font-size: clamp(15px,4vw,30px);
    font-weight: 500;
    line-height: 1.5;
    color: #391800;
}

.apply-step-text.small{
    font-size: clamp(12px,3.2vw,24px);
    line-height: 1.6;
}

/* 矢印(三角) */
.apply-steps-arrow{
    flex-shrink: 0;
    align-self: center;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(9px,2.4vw,18px) 0 clamp(9px,2.4vw,18px) clamp(14px,3.7vw,28px);
    border-color: transparent transparent transparent #ff7909;
}

.cta{
    width: 94%;
    margin: clamp(7px,1.8vw,14px) auto clamp(13px,3.4vw,26px);
}

.cta img{
    animation: squash 1.2s ease-in-out infinite;
}

@keyframes squash {
    0% {transform: scale(0.95);}
    50% {transform: scale(1);}
    100% {transform: scale(0.95);}
}


/* ===== 開催情報 ===== */
.information{
    position: relative;
}

.event-list{
    display: flex;
    flex-direction: column;
    gap: clamp(27.5px,7.3vw,55px);

    border: solid 2px #ff7909;
    border-radius: 26px;

    margin: clamp(36.5px,9.7vw,73px) clamp(16px,4.2vw,32px) clamp(49px,13vw,98px);
    padding: clamp(39.5px,1.05vw,79px) clamp(30px,8vw,60px) clamp(39px,10.4vw,78px);
}

.event-note {
    display: inline-block;
    margin-left: -0.5em;
    font-size: 0.75em;
    white-space: nowrap;
}

.event-item{
    display: flex;
    gap: clamp(13.5px,3.6vw,27px);
    font-size: clamp(15px,4vw,30px);
}

.event-term{
    width: clamp(81px,21.6vw,162px);
    height: clamp(23px,6.1vw,46px);
    background-color: #ff7909;

    color: #fff;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;
}

.event-desc{
    line-height: 1.5em;
}

.join{
    width: 32.4%;
    bottom: 2.5%;
    right: 7%;
}


/* ===== スターズリンクとは ===== */
.about{
    padding-bottom: clamp(57px,15.2vw,114px);
}

/* 見出し画像（画像自体に上の余白あり） */
.about-head{
    margin: clamp(-17.5px,-2.3vw,-8.5px) 0 0;
    padding-top: 0;
}

/* --- 写真＋リード文 --- */
.about-lead{
    position: relative;
}

.about-lead-bg{
    display: block;
    width: 100%;
    height: auto;
}

.about-lead-txt{
    position: absolute;
    top: 23.5%;
    left: 6.3%;
    font-size: clamp(18px,4.8vw,36px);
    font-weight: 500;
    line-height: 2.04em;
    color: #391800;
}

.about-lead-em{
    font-size: clamp(23px,6.1vw,45.75px);
    font-weight: bold;
    color: #ff7909;
}

/* --- お悩み（水色背景） --- */
/* margin-top と clip-path は、写真と水色背景の間の白い線を消すためのもの */
.about-worry{
    position: relative;
    margin-top: -3px;
}

.about-worry .content{
    bottom: 0;
}

.about-worry-bg{
    clip-path: inset(1px 0 0 0);
}

.about-box{
    position: absolute;
    left: 13.07%;
    width: 73.2%;
    font-size: clamp(23px,6.1vw,46px);
    font-weight: 500;
    line-height: clamp(35px,9.33vw,70px);
    text-align: center;
    color: #ff7909;
    background: linear-gradient(transparent 32%, #eef8f6 32%);
}

.about-box1{
    top: 5.9%;
}

.about-box2{
    top: 22.2%;
}

.about-dakedo{
    position: absolute;
    top: 38.4%;
    right: 0;
    left: 0;
    font-size: clamp(20.5px,5.5vw,41.25px);
    font-weight: bold;
    line-height: 1.45;
    text-align: center;
    color: #585656;
}

.about-bubble{
    position: absolute;
    display: flex;
    align-items: center;
    height: 13.6%;
    font-size: clamp(15.75px,4.2vw,31.5px);
    font-weight: 500;
    line-height: 1.7;
    color: #585656;
}

.about-bubble1{
    top: 46.8%;
    left: 6.4%;
}

.about-bubble2{
    top: 59.8%;
    left: 50%;
}

.about-bubble3{
    top: 70.2%;
    left: 5.9%;
}

/* 「でも」の丸：水色背景の下端にまたがる */
.about-demo{
    right: 0;
    left: 0;
    bottom: clamp(-66px,-8.8vw,-33px);
    width: 17.3%;
    margin: 0 auto;
    z-index: 2;
}

/* --- 子どもの「やってみたい」を応援したい！ --- */
.about-oen{
    width: fit-content;
    margin: clamp(31px,8.3vw,62px) auto 0;
    font-weight: 500;
    color: #391800;
}

.about-oen-s{
    display: block;
    font-size: clamp(17.5px,4.6vw,35px);
    line-height: 1.5;
    text-align: left;
}

.about-oen-l{
    display: block;
    font-size: clamp(30px,7.8vw,58.5px);
    line-height: 1.3;
    text-align: center;
}

.about-oen-wo{
    font-size: clamp(17.5px,4.6vw,35px);
}

.about-family{
    display: block;
    width: 100%;
    height: auto;
    margin-top: clamp(11.5px,3.1vw,23px);
}

/* --- そんなパパ・ママへ --- */
.about-mincho{
    margin-top: clamp(19px,5.2vw,38.7px);
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(15.75px,4.2vw,31.5px);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    color: #391800;
}

.about-tag{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51.3%;
    height: clamp(47.5px,12.7vw,95px);
    margin: clamp(15px,4vw,30px) auto 0;
    background-color: #f07539;
    font-size: clamp(21.5px,5.75vw,43px);
    font-weight: bold;
    color: #fff;
}

.about-intro-txt{
    margin-top: clamp(20px,5.3vw,39.6px);
    font-size: clamp(17.5px,4.6vw,35px);
    font-weight: 500;
    line-height: 2em;
    text-align: center;
    color: #391800;
}

/* 黄色いマーカー */
.about-mark{
    padding: 0 0.25em;
    background: linear-gradient(transparent 57%, #fff4aa 57%);
}

/* --- 演技・ダンス・殺陣（黄色いドーム＋雲の背景） --- */
.about-skill{
    position: relative;
    margin-top: clamp(18.7px,5vw,37.4px);
    padding-top: clamp(40px,10.7vw,80px);
    background: url("../img/dounyu-bg.webp") no-repeat center top / 100% auto;
}

.about-skill-txt{
    position: relative;
    z-index: 1;
    font-size: clamp(17.5px,4.6vw,35px);
    font-weight: 500;
    line-height: 2em;
    text-align: center;
    color: #391800;
}

.about-skill-chips{
    position: relative;
    z-index: 1;
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto clamp(-8px,-1.1vw,-4px);
}

.about-skill-kids{
    position: relative;
    z-index: 1;
    display: block;
    width: 69.2%;
    height: auto;
    margin: clamp(3.5px,0.9vw,7px) 0 0 14.8%;
}

/* --- オーディション・案件 --- */
.about-offer-txt{
    margin-top: clamp(8px,2.1vw,16px);
    font-size: clamp(17.5px,4.6vw,35px);
    font-weight: 500;
    line-height: 2em;
    text-align: center;
    color: #391800;
}

.about-offer-txt2{
    margin-top: clamp(20px,5.3vw,40px);
}

/* --- 下の写真（3人まとめて1枚） --- */
.about-photos{
    display: block;
    width: 100%;
    height: auto;
    margin-top: clamp(14px,3.7vw,28px);
}


/* ===== 導入（ないがしろ・少人数制） ===== */
.dounyu-middle{
    margin-top: clamp(-93px,-12.4vw,-46.5px);
    z-index: 1;
    position: relative;
}

.negative{
    position: relative;
}

.negative-txt{
    position: absolute;
    text-align: right;
    right: 0;
    top: 35%;
    letter-spacing: 0.03em;
}

.negative-txt-upper{
    font-size: clamp(16.5px,4.4vw,33px);
    font-weight: 500;
    line-height: clamp(25px,6.6vw,50px);
    margin-bottom: clamp(31.5px,4.8vw,63px);
}

.negative-txt-lower{
    font-size: clamp(15px,4vw,30px);
}

.dounyu-bottom{
    position: relative;
    margin-top: -4%;
    z-index: 1;
}

.dounyu-bottom p{
    font-size: clamp(17.5px,4.6vw,35px);
    text-align: center;
    font-weight: 500;
    line-height: 2em;
}

.dounyu-bottom .small{
    font-size: clamp(15px,4vw,30px);
    font-weight: 500;
}

.dounyu-bottom .orange{
    font-size: clamp(23px,6.1vw,46px);
    background: linear-gradient(transparent 60%, #fff4aa 60%);
}

.syouninzu{
    display: block;
    margin: clamp(22.5px,6vw,45px) auto;
    width: 49%;
}

.syouninzu-decor{
    width: 88%;
    position: absolute;
    top: 24%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.dounyu-bottom .middle{
    font-size: clamp(16.5px,4.4vw,33px);
}

.dounyu-bottom-img{
    position: relative;
    z-index: -1;
    margin-top: clamp(-95px,-12.6vw,-47.5px);
}


/* ===== スターズリンクの強み ===== */
.content-inner{
    width: 70%;
    margin: 0 auto;
}

.tsuyomi{
    width: 103%;
    margin: clamp(70px,18.6vw,140px) 0 clamp(45px,12vw,90px);
}

.benefit h2{
    text-align: center;
    font-size: clamp(27.5px,7.3vw,55px);
    line-height: 1.4em;
    font-weight: 500;
    margin-bottom: clamp(17.5px,4.6vw,35px);
}

.san{
    font-size: clamp(32px,8.5vw,64px);
    letter-spacing: -0.17em;
}

.size-m{
    font-size: clamp(23px,6.1vw,46px);
}

.size-s{
    font-size: clamp(20.5px,5.4vw,41px);
}

.three-skils p{
    font-size: clamp(14px,3.7vw,28px);
    font-weight: 500;
    line-height: 1.7em;
}

.three-skils .underline{
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ffdcbf 60%);
}

.speed{
    position: relative;
}

.speed .content{
    top: 4%;
}

.speed .obi{
    background-color: #fff;
    display: inline-block;
    box-shadow: 3px 3px 0 rgba(232, 229, 210, 1);
    margin-bottom: 7px;
    line-height: 1.2em;
    padding: 0 0.3em;
}

.speed p,.syoukai p,.happyoukai p{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.5em;
}

.speed p{
    letter-spacing: 0.02em;
}

.speed .underline,.syoukai .underline,.happyoukai .underline{
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ffdcbf 60%);
    background-size: 96% 100%;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.happyoukai{
    position: relative;
}

.happyoukai .content{
    top: 6%;
}

.happyoukai-photo{
    display: block;
    width: 92%;
    margin: clamp(30px,8vw,60px) auto 0;
}

.syoukai{
    position: relative;
}

.syoukai .content{
    top: 5%;
}

.syoukai .anken{
    margin-bottom: clamp(27.5px, 7.3vw, 55px);
}


/* ===== 生徒・保護者の声 ===== */
.voice{
    margin: clamp(35px,9.3vw,70px) 0;
}

.voice .section-heading h3{
    margin-bottom: 0;
}

/* VOICE画像は上下に余白があるので、マイナスマージンで詰める */
.voice-head{
    display: block;
    width: 70%;
    margin: clamp(3px, 0.8vw, 6px) auto clamp(-20px,-2.5vw,-10px);
}

.voice-box{
    position: relative;
    z-index: 1; /* VOICE画像の下余白に重ねるため */
    width: 90%;
    margin: 0 auto;
    padding: clamp(27px,7.3vw,55px) 0 clamp(43px,11.5vw,86px);
    background-color: #fff7c6;

    display: flex;
    flex-direction: column;
    gap: clamp(24px,6.5vw,49px);
}

.voice-card{
    width: 86%;
    margin: 0 auto;
    padding: clamp(26px,6.5vw,49px) 0 clamp(22px,6vw,45px);
    background-color: #fff;
}

.voice-title{
    margin: 0;
    padding: 0 3% 0 13%; /* 左は吹き出しの左端にそろえる */
    font-size: clamp(15px,4.4vw,33px);
    font-weight: bold;
    line-height: 1.9em;
    color: #ff7909;
}

.voice-title.large{
    font-size: clamp(24px,6.6vw,50px);
    line-height: 1.4em;
}

.voice-meta{
    padding-left: 13%;
    margin: clamp(10px,2.6vw,20px) 0 clamp(14px,3.8vw,28px);
    font-size: clamp(12px,3.2vw,24px);
    font-weight: 500;
    color: #391800;
}

.voice-shot{
    display: block;
    width: 100%;
    height: auto;
}

.voice-note{
    margin: clamp(10px,2.6vw,20px) 0 0;
    padding-left: 13%;
    font-size: clamp(11px,2.9vw,22px);
    line-height: 1.7em;
    color: #6b3914;
}


/* ===== 講師紹介 ===== */
.instructor-message{
    position: relative;

    width: 92%;
    background-color: #fff7c6;
    border-radius: 26px;
    padding: 64px 20px 45px;
    margin: clamp(60px,16vw,120px) auto 0;
}

.photo-instructor{
    position: absolute;

    width: 42.7%;
    right: clamp(30px,8vw,60px);
    top: clamp(-88px,-11.7vw,-44px);
}

.name-block{
    margin-left: clamp(36px,9.6vw,72px);
}

.role{
    display: inline-block;
    margin-left: clamp(9px,2.4vw,18px);
    margin-bottom: clamp(11px,2.9vw,22px);
    font-size: clamp(15.5px,4.1vw,31px);
}

.name{
    font-size: clamp(24.5px,6.5vw,49px);
    font-weight: bold;
}

.furigana{
    font-size: clamp(13px,3.4vw,26px);
    margin-top: 8px;
    margin-left: -0.6em;
}

.title{
    font-size: clamp(15px,4vw,30px);
    font-weight: 500;
    margin-top: clamp(8px,2.1vw,16px);
}

.message-txt{
    margin: clamp(45px,12vw,90px) 0 clamp(25px,6.6vw,50px);
    padding: 0 clamp(17px,4.5vw,34px);
    font-size: clamp(15px,4vw,30px);
    line-height: 1.7em;
}

.message-txt .highlight{
    font-weight: bold;
}

/* 講師の想い（黄色いカード内追加分） */
.voice-heading{
    font-size: clamp(19px,5vw,38px);
    font-weight: bold;
    line-height: 1.5em;
    margin: clamp(35px,9.3vw,70px) 0 clamp(15px,4vw,30px);
    padding: 0 clamp(17px,4.5vw,34px);
}

.voice-txt{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.8em;
    padding: 0 clamp(17px,4.5vw,34px);
    margin-bottom: clamp(20px,5.3vw,40px);
}

/* 見出し（枠の外・共通） */
.achievement-heading,.kids-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px,2.6vw,20px);
}

.achievement-heading{
    margin: clamp(60px,16vw,120px) auto 0;
}

.kids-heading{
    margin: clamp(45px,12vw,90px) auto 0;
}

.achievement-heading h2,.kids-heading h2{
    font-size: clamp(19px,5vw,38px);
    font-weight: bold;
}

.star-icon{
    width: clamp(40px,10.6vw,80px);
}

.star-icon.flip{
    transform: scaleX(-1);
}

/* 主な出演・活動実績 */
.achievement{
    position: relative;
    background-color: #fffcea;
    border-radius: 26px;
    width: 92%;
    margin: clamp(20px,5.3vw,40px) auto 0;
    padding: clamp(35px,9.3vw,70px) clamp(25px,6.6vw,50px) clamp(40px,10.6vw,80px);
}

.achievement-list p{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.9em;
}

.achievement-list .gap{
    margin-top: clamp(20px,5.3vw,40px);
}

/* キッズへの指導実績 */
.kids-achievement{
    position: relative;
    background-color: #fff7c6;
    border-radius: 26px;
    width: 92%;
    margin: clamp(20px,5.3vw,40px) auto 0;
    padding: clamp(35px,9.3vw,70px) clamp(25px,6.6vw,50px) clamp(40px,10.6vw,80px);
}

.kids-achievement-list p{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.9em;
}

/* 講師からのメッセージ */
.message-heading{
    text-align: center;
    margin: clamp(45px,12vw,90px) auto 0;
}

.message-wrap{
    position: relative;
    background-color: #fffcea;
    border-radius: 26px;
    width: 92%;
    margin: clamp(20px,5.3vw,40px) auto 0;
    padding: clamp(35px,9.3vw,70px) clamp(25px,6.6vw,50px) clamp(40px,10.6vw,80px);
}

.message-wrap p{
    font-family: "Klee One", "noto-sans-cjk-jp", sans-serif;
    font-size: clamp(15px,4vw,30px);
    line-height: 1.9em;
    margin-bottom: clamp(20px,5.3vw,40px);
}

.message-sign{
    font-family: "Klee One", "noto-sans-cjk-jp", sans-serif;
    font-size: clamp(11px,2.9vw,22px);
}


/* ===== フロー ===== */
.flow{
    margin-top: clamp(45px,12vw,90px);
}

.dot {
    position: relative;
    padding-top: clamp(35px, 9.3vw, 70px);

    background-color: #fffcea;
    background-image: radial-gradient(circle, #fff3d0 10px, transparent 10px), radial-gradient(circle, #fff3d0 10px, transparent 10px);
    background-position: 0 0, 27.5px 35px;
    background-size: 55px 70px;
}

.flow-head{
    width: 43%;
}

.step{
    display: flex;
    flex-direction: column;
    gap: clamp(25px,6.6vw,50px);

    margin-top: clamp(30px,8vw,60px);
}

/* カード：縦並び（上に写真＋タイトル、下に説明文） */
.step-item{
    position: relative;
    width: 92%;
    margin: 0 auto;
    border-radius: 26px;

    background-color: #fff;
    padding: clamp(11.5px,2.9vw,23px) 0 clamp(13px,3.4vw,26px);

    display: flex;
    flex-direction: column;
    gap: clamp(15px,4vw,30px);
}

/* 写真＋STEP番号・タイトルの横並び部分 */
.step-head{
    display: flex;
    gap: clamp(15px,4vw,30px);
}

.step-photo{
    width: 35.5%;
    height: auto;
    align-self: flex-start;
    object-fit: cover;
}

.step-label,.step-num{
    color: #ff7909;
    font-weight: bold;
}

.step-label{
    font-size: clamp(16.5px,4.4vw,33px);
}

.step-num{
    display: inline-block;
    font-size: clamp(22px,5.8vw,44px);
    margin-bottom: clamp(16px,4.2vw,32px);
}

.step-title{
    font-size: clamp(20px,5.3vw,40px);
    font-weight: 500;
}

.step3 .step-title,.step4 .step-title{
    font-size: clamp(17.5px,4.6vw,35px);
}

/* 説明文（背景なし、白いカードの中に文字だけ） */
.step-desc{
    padding: clamp(20px,5.3vw,40px) clamp(15px,4vw,30px) clamp(18px,4.8vw,36px);

    font-size: clamp(11px,2.9vw,22px);
    color: #6b3914;
    line-height: 1.8em;
    letter-spacing: 0.04em;
}

.arrow {
    position: absolute;
    bottom: clamp(-38px, -5.07vw,-19px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 10.67vw, 80px);
    height: clamp(40px, 10.67vw, 80px);
    background: #ff7909;
    border-radius: 50%;
    border: clamp(7.5px, 2vw, 15px) solid #fff;
}

.arrow::after {
    content: '';
    position: absolute;
    top: 9%;
    bottom: 0;
    right: 26%;
    width: 0;
    height: 0;
    margin: auto;
    border-top: clamp(9.5px, 2.53vw, 19px) solid #fff;
    border-right: clamp(6.5px, 1.73vw, 13px) solid transparent;
    border-left: clamp(6.5px, 1.73vw, 13px) solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateY(1px);
    box-sizing: border-box;
}

.flow-note{
    margin-left: clamp(26px,6.9vw,52px);
    margin-bottom: clamp(49px,13vw,98px);
}

.flow-note p{
    font-size: clamp(13px,3.4vw,26px);
    line-height: 1.7em;
    letter-spacing: 0.04em;
}

.hoshi-top-left{
    width: 13.4%;
    left: 7.7%;
    top: 6.2%;
}

.hoshi-top-right{
    width: 8.9%;
    right: 11.3%;
    top: 4.6%;
}

.hoshi-bottom-right{
    width: 15.4%;
    right: 8.8%;
    bottom: -2.2%;
}


/* ===== 写真・キャッチ（芸能の世界は、もう） ===== */
.photo-koyaku{
    margin-top: clamp(45px,12vw,90px);
}

.photo-wrap{
    display: flex;
    flex-direction: column;
    gap: clamp(4.5px,1.2vw,9px);
}

.photo-upper{
    display: flex;
    justify-content: space-between;
}

.photo-upper img{
    width: 49.5%;
}

.photo-txt{
    position: absolute;
    bottom: 10%;
}

.photo-txt p{
    font-size: clamp(20.5px,5.4vw,41px);
    font-weight: 500;
}

.photo-txt .highlight{
    font-size: clamp(23.5px,6.2vw,47px);
    color: #ff7909;
}

.photo-txt .obi{
    background-color: #fff;
    display: inline-block;
    line-height: 1.9em;
    margin-bottom: 0.42em;
}

.photo-txt .upper{
    padding: 0 0.75em;
    line-height: 2.18em;
}


/* ===== クロージング ===== */
.closing-message{
    margin: clamp(30px,8vw,60px) auto clamp(25px,6.6vw,50px);
    text-align: center;
}

.closing-message p{
    font-size: clamp(15px,4vw,30px);
    line-height: 1.7em;
}

.closing-message .highlight{
    font-size: clamp(16px,4.2vw,32px);
    font-weight: bold;
}

.machinami-wrap{
    position: relative;
    z-index: 1;
}

.closing-catch{
    position: absolute;
    right: 0;
    left: 0;
    top: 30%;
    font-size: clamp(26px,6.9vw,52px);
    text-align: center;
    font-weight: 500;
    line-height: 1.65em;
}

.closing-catch .underline{
    background: linear-gradient(transparent 60%, #fff 60%);
    background-repeat: no-repeat;
}

.closing-catch .upper-line{
    background-size: 91%;
    background-position: left;
}

.closing-catch .lower-line{
    background-size: 97%;
    padding-left: 0.25em;
}

.closing-catch .kanji{
    font-size: clamp(28px,7.4vw,56px);
}

.closing-catch .size-s{
    font-size: clamp(25.5px,6.8vw,51px);
}

.closing-bottom{
    background-color: #fff4aa;
    margin-top: -31.5%;
}

.closing-group-photo{
    margin-bottom: clamp(5px,1.3vw,10px);
}

.closing-cta{
    margin: clamp(23.5px, 6.2vw, 47px) auto clamp(30px, 8vw, 60px);
}


/* ===== プライバシーポリシー ===== */
.privacy-policy ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 15px 0;
}

.privacy-policy li {
    margin-bottom: 8px;
}

.privacy-policy p {
    margin-bottom: 20px;
}

.privacy-policy h2 {
    margin-top: 40px;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
    .privacy-policy {
        padding: 40px 20px !important;
    }

    .privacy-policy h1 {
        font-size: 28px;
        margin-bottom: 35px !important;
    }

    .privacy-policy h2 {
        font-size: 20px;
        margin-top: 35px;
    }

    .privacy-policy p,
    .privacy-policy li {
        font-size: 15px;
        line-height: 1.9;
    }
}

/* プライバシーポリシーの背景色 */
body:has(.privacy-policy) {
    background-color: #fff7c6;
}


/* ===== フッター ===== */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    background-color: #f18722;
}

.site-footer a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: underline;
}

.site-footer p {
    margin: 12px 0 0;
    color: #ffffff;
    font-size: 12px;
}

.site-footer a:hover {
    opacity: 0.7;
}