@charset "utf-8";


/* =========================================================
   改行位置調整
========================================================= */
/* 中間サイズ */
@media (min-width:768px) and (max-width:1550px){
  .pc-br{ display:none; }
  .sp-br{ display:none; }
  .tb-br{ display:block; }
}
/* スマホサイズ */
@media (max-width: 768px){
  .pc-br{ display:none; }
  .sp-br{ display:block; }
  .tb-br{ display:none; }
}

/* =========================================================
   PC / SP 出し分け
   - 通常版：display を切り替える
   - 不可視版：display は触らず、視覚・操作だけ無効化
   - 必要に応じて追加
========================================================= */
/* ===============================
   WIDE（1200px基準）
=============================== */
/* 通常版：display 切替 */
@media (min-width:1201px){ .sp_only_wide{ display:none; } }   /* PC：SPワイド非表示 */
@media (max-width:1200px){ .pc_only_wide{ display:none; } }   /* SP：PCワイド非表示 */
/* 不可視版：レイアウトを保ったまま非表示 */
@media (min-width:1201px){ .sp_only_wide{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } }
@media (max-width:1200px){ .pc_only_wide{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } }
/* ===============================
   PC / SP（768px基準）
=============================== */
/* 通常版：display 切替 */
@media (min-width:769px){ .pc_only-block{ display:block; } .sp_only-block{ display:none; } }  /* PC表示 */
@media (max-width:768px){ .pc_only-block{ display:none; } .sp_only-block{ display:block; } }  /* SP表示 */
/* 不可視版：displayを触らず非表示 */
@media (min-width:769px){ .sp_only{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } } /* PC：SP要素を不可視 */
@media (max-width:768px){ .pc_only{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } } /* SP：PC要素を不可視 */
/* ===============================
   Checklist専用（768px基準）
=============================== */
/* 通常版：display 切替 */
@media (min-width:769px){ .pc_only-block-checklist{ display:block; } .sp_only-block-checklist{ display:none; } } /* PC表示 */
@media (max-width:768px){ .pc_only-block-checklist{ display:none; } .sp_only-block-checklist{ display:block; } } /* SP表示 */
/* 不可視版：displayを触らず非表示 */
@media (min-width:769px){ .sp_only-checklist{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } } /* PC：SP不可視 */
@media (max-width:768px){ .pc_only-checklist{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } } /* SP：PC不可視 */
/* ===============================
   Reserve専用（500px基準）
=============================== */
/* 通常版：display 切替 */
@media (min-width:501px){ .reserve-section .pc_only-block-reserve{ display:block; } .reserve-section .sp_only-block-reserve{ display:none; } } /* PC表示 */
@media (max-width:500px){ .reserve-section .pc_only-block-reserve{ display:none; } .reserve-section .sp_only-block-reserve{ display:block; } } /* SP表示 */
/* 不可視版：displayを触らず非表示 */
@media (min-width:501px){ .reserve-section .sp_only-reserve{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } } /* PC：SP不可視 */
@media (max-width:500px){ .reserve-section .pc_only-reserve{ visibility:hidden; position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } } /* SP：PC不可視 */




/* 以下、画面幅ごとの表示調整 */

/* =========================================================
   〜1200px（タブレットサイズ）
========================================================= */
@media (max-width: 1200px){
  /* service */
  .service-section{
    margin-bottom:80px;
    padding: 0 20px;
  }
  .service-section .section-title{
    font-size: 34px;
  }
  .service-lead{
    font-size: clamp(20px, 2vw, 22px);
    white-space: nowrap;
    line-height: 1.3;
    margin:30px -10px 30px;
  }
  /* service cards */
  .service-section .section-inner{ padding:0 30px; }
  .service-cards{
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
  .service-card{
    width:100%;
    max-width:420px;
    padding:17px 20px 20px;
  }
  .service-card__title{ font-size:20px; height:90px; }
  .service-card__text{ font-size:16px; line-height:1.2; }
  /* video */
  .video-lead{
    font-size: clamp(20px, 2vw, 22px);
  }
  /* creator */
  .creator-inner{ padding:20px 0 30px; }
  .creator-section .section-inner{
    padding:30px 20px;
    margin:0 auto;
    max-width:400px;
    box-sizing:border-box;
  }
  .creator-heading{
    padding:16px 10px;
    font-size:32px;
  }
  .creator-profile{
    width:100%;
    max-width:400px;
    margin:0 auto;
  }
  .creator-text{ display:flex; flex-direction:column; }
  .creator-name{ margin:0 0 16px; font-size:20px; order:1; }
  .creator-name span{ font-size:20px; }
  .creator-photo{ order:2; flex:none; width:100%; margin:0 auto;}
  .creator-photo_img{ width: 95%;}
  .creator-body{ font-size:14px; order:3; margin-top:16px; margin-bottom:0; }
  .creator-body p{ margin-bottom:20px; }
  .creator-social{ order:4; margin-top:0; }
}

/* =========================================================
   ～1199px
========================================================= */
@media (min-width: 900px) and (min-width: 1199px){
.creator-heading{
    font-size: clamp(26px, 3vw, 43px);
    line-height: 3;
  }
}
@media (max-width: 899px){
  .creator-heading{
    line-height: 2;
    /* font-size:23px; */
    font-size: clamp(22px, 3vw, 33px);
  }
}

/* =========================================================
   944px～
========================================================= */
@media (min-width: 944px){
  .features-section{ --fit-base: 1120px; } /* まずこれでOK（必要なら調整） */
  .features-fit{
    width: var(--fit-base);
    max-width: none;
    --scale: min(1, calc((100vw - 164px) / var(--fit-base)));
    position: relative;
    left: 50%;
    transform: translateX(-50%) scale(var(--scale));
    transform-origin: top center;
  }
  /* h2：折り返し禁止（アイコン込みで縮む） */
  .features-section .section-title{
    white-space: nowrap;
  }
  /* カード：2+1防止で折り返し禁止 */
  .features-box{
    flex-wrap: nowrap;
  }
  .feature-item{ min-width: 0; }
  .features-box img{ max-width: 100%; height: auto; }
}

/* =========================================================
   ～943px
========================================================= */
@media  (min-width: 768px) and (max-width: 943px){
  .features-section{
    padding: 70px 20px;
  }
  .features-section h2{
    font-size:25px;
  }
  .features-section .section-title::before{
    left:-20px;
    width:50px;
  }
  .features-section .section-title::after{
    right:-20px;
    width:50px;
  }

  .service-section .section-title{
    font-size: 33px;
  }
}
@media (max-width: 943px){
  .features-text{
    margin-top:50px;
    line-height:1.3;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    text-align: center;
    left: auto;
    transform: none;
    white-space: normal;
  }
  .features-text > div{
    display: inline-block;
    white-space: nowrap;
  }
  .features-text_sub{ 
    font-size: clamp(12px, 3.5vw, 20px);
  }
}

/* =========================================================
   SP（〜768px）
========================================================= */
@media (max-width: 768px){
  html, body{ font-size:14px; }
  body{ background: linear-gradient(to bottom, #e9e6d7 0%, #faede9 50%, #fef4cb 100%); }

  .header_inner,
  .content_inner,
  .main,
  .main_gallery{
    max-width:none;
    width:100%;
    margin:0;
  }
  .content_inner{
    box-shadow:none;
    padding:0;
  }

  /* --------------------------
     Header（SP）
  -------------------------- */
  header{ height:auto; }
  .header_inner{ padding:10px 16px; gap:12px; }
  .header_logo_flex{ flex:1; }

  /* --------------------------
     HERO（SP）
  -------------------------- */
  /* キャッチ画像の位置定義 */
  .hero-section{
    --main-x: 50%;
    --main-y: 4%;
    --sub-x:  33%;
    --sub-y:  20%;
  }

  /* 画像サイズ */
  .hero-main-copy-wrap img{ width:85vw; }
  .hero-sub-copy-wrap  img{ width:45vw; }

  /* --------------------------
     Features（SP）
  -------------------------- */
  .features-section{ padding:50px 45px 30px; }
  .features-section h2{ margin-bottom:25px; font-size:22px; }
  .features-section .section-title{ padding:0 10px; }
  .features-section .section-title::before{ left:-20px; width:26px; height:26px; }
  .features-section .section-title::after { right:-20px; width:26px; height:26px; }
  .features-box{
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
  .feature-item{
    width:100%;
    max-width:420px;
    min-width:auto;
  }
  .feature-item p{ margin-top:40px; font-size:20px; }
  .feature-item .small{ margin-top:19px; font-size:18px; letter-spacing:-.05em; line-height:1.3; }
  .features-text{
    font-size: clamp(18px, 4.5vw, 25px);
  }
  .features-text_sub{ 
    margin-top:20px;
    color:var(--base-brown); 
    line-height:1.5;
    white-space: nowrap;
    margin-left: 0px;
  }
  .sp_only .line{ margin-bottom:20px; line-height:1.3; }
  .sp_only .line:last-child{ margin-bottom:0; }

  /* /* --------------------------
     Video（SP）
  -------------------------- */
  .video-section{
    padding: 60px 20px;
  }

  .video-lead{
    line-height: 1.3;
    margin-bottom: 30px;
  }

  .video-bg{
    background: transparent;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  /* SP：見出しより左右20px内側 */
  .video-frame{
    width: calc(100% - 40px);
    margin: 0 auto;
    border-radius: 8px;
  }

  .video-sound-toggle{
    right: 10px;
    bottom: 10px;

    min-height: 40px;
    padding: 0 12px;

    border: 2px solid #fff;
    border-radius: 999px;
    gap: 6px;

    font-size: 12px;
  }

  .video-sound-toggle i{
    font-size: 15px;
  }


  /* --------------------------
     Creator（SP）
  -------------------------- */
  .sns_logo_icon{
    width: 50px;
  }
  .creator-body{ font-size:15px; font-weight: 400; letter-spacing: -0.05em; order:3; margin-top:16px; margin-bottom:0; }

  /* --------------------------
     Plan（SP）
  -------------------------- */
  .plan-section .section-inner{
    display:flex;
    flex-direction:column;
    padding:70px 20px;
  }
  .plan-section .section-title{ 
    order:1;
   }
  .plan-steps{
    gap:20px;
    margin:10px auto;
    max-width:80%;
  }
  .plan-step{
    width:180px;
    height:150px;
    padding:10px 10px;
  }
  .step-icon img{ 
    margin-top:20px; 
    width:70px; 
    height:auto; 
  }
  .step-icon.last_step-icon img{
    margin: 16px 0 0;
    width:90px;
    height:auto;
    object-fit:contain;
  }
  .step-badge{
    top:-14px; left:-14px;
    width:40px; height:40px;
    font-size:20px;
  }
  .plan-section .plan-steps{ order:4; margin-top:20px;padding: 0; }
  .plan-section .plan-cards{
    order:2;
    padding:0 30px; 
    margin-top:10px;
    flex-direction:column;
    gap:30px;
  }
  .step-text{ font-size:18px; }
  .plan-card{ width:100%; padding:35px 20px  ; min-height:340px; }
  .plan-card__title{ font-size:20px; margin-bottom:30px; }
  /* .plan-card__catch{ font-size:16px; font-weight: 500; letter-spacing: -0.07em; line-height:1.4; margin-bottom:30px;white-space:nowrap; } */
  .plan-card__catch{
    font-size:16px;
    font-weight:500;
    letter-spacing:-0.07em;
    line-height:1.4;
    margin-bottom:30px;
    white-space:nowrap;

    /* ▼ 追加 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;   /* 中身の幅で表示 */
    max-width: none;      /* 親幅に縛られない */
  }
  .plan-card__detail{ font-size:16px; font-weight: 500; line-height:1.3; }

  /* --------------------------
     Checklist（SP）
     ・PCで使用していた吹き出しは未使用
  -------------------------- */
  .checklist-section .section-title{
    padding:0;
    font-size:18px;
    width:90vw;
  }
  .checklist-section .section-title::before,
  .checklist-section .section-title::after{ content:none; }
  .checklist-section .section-inner{ padding:0 20px 80px; }

  /* checklist の中の row だけ縦積みにする */
  .checklist__grid .row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    background:#fff;
    border-radius:10px;
    padding:20px 16px;
  }
  .checklist__grid{ gap:30px; }
  /* 吹き出し（チェックリスト内だけ） */
  .checklist__grid .speech{ width:100%; display:block; }
  .checklist__grid .speech__img{ display:none; }
  .checklist__grid .speech__text{ padding:0; text-align:center; }
  .checklist__grid .speech__hd{ margin-bottom:8px; text-align:center; }
  .checklist__grid .speech__tx{ text-align:center; line-height:1.3; letter-spacing: 0; margin-top: 20px; margin-bottom: 10px;}
  /* アイコン（チェックリスト内だけ） */
  .checklist__grid .media{ margin:0; justify-content:center; }
  .checklist__grid .media__img1{ width:202px; }
  .checklist__grid .media__img2{ width:132px; }
  .checklist__grid .media__img3{ width:87px; }
  /* 表示順統一（チェックリスト内だけ） */
  .checklist__grid .row .speech{ order:1; }
  .checklist__grid .row .media{ order:2; }
  /* row--illust-first も checklist 内だけ無効化 */
  .checklist__grid .row--illust-first{ grid-template-columns:initial; }

  /* --------------------------
     Footer（SP）
  -------------------------- */
  footer{
    height:auto;
    padding:24px 0 12px;
    text-align:left;
    justify-content:left;
  }
  .footer_info{
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
    margin-left:17px;
    gap:12px;
  }
  .footer_link{ margin-bottom:6px; }
}







/* =========================================================
  HERO　まとめてこちらで
========================================================= */

/* ---------- SP（〜768px） ---------- */
/* ---------- SP（〜768px） ---------- */
@media (max-width: 768px){

  /* SP：ヒーロー画像のリセット（土台） */
  .hero-main-photo{
    width:100%;
    height:auto;
    max-width:none;
  }

  /* SP：バーの見え方（土台） */
  .hero-bar{ height:0; overflow:visible; }
  .hero-bar-bg{ display:none; }

  /* --- PC用ボタン・PCバーは消す --- */
  .hero-btn--pc{ display:none; }
  .hero-bar.bottom-bar.pc_only-block{ display:none; }

  /* --- サブコピーは“写真の上”に表示 --- */
  .hero-sub-copy-wrap{
    position:absolute;
    left:20px;
    top:30%;
    transform: translateY(-50%);
    z-index:30;
    opacity:1;
  }
  .hero-sub-copy{
    display:block;
    height:auto;
    opacity:1;
    filter:none;
  }

  /* SP：コピー画像サイズ */
  .hero-main-copy-wrap img{ width:85vw; }
  .hero-sub-copy-wrap  img{ width:45vw; }

  /* --- SPボタン（位置・サイズ・左寄せ土台） --- */
  .hero-btn--sp{
    position:absolute;
    left:0;
    bottom:25px;
    width:80vw;
    height:65px;
    z-index:40;
    margin:0;

    /* ★左余白はここで維持（今の表示のキモ） */
    padding-left:18px;
    text-align:left;
  }

  /* SPボタン画像：高さ固定 */
  .hero-btn--sp .hero-btn__img{
    height:65px;
    width:100%;
    display:block;
    object-fit:cover;
  }

  /* ★SP：テキストをボタン画像に対して上下中央（左余白維持） */
  .hero-btn--sp .hero-btn__text{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;          /* 上下中央 */
    justify-content:flex-start;

    box-sizing:border-box;

    /* ★左余白は 18px で統一（親と合わせる） */
    padding-left:18px;

    /* ★右は矢印分の逃げ */
    padding-right:40px;

    font-size:20px;
    line-height:1.2;
    margin:0;

    /* 上に寄る原因を無効化 */
    padding-top:0;
    transform:none;
  }

  /* 右矢印：右端へ */
  .hero-btn--sp .hero-btn__text i{
    margin-left:auto;
    font-size:20px;
  }

  /* --- ロゴ（ボタン上に固定） --- */
  .site-logo{
    position:absolute;
    left:20px;
    bottom:225px;
    transform: translateY(calc(-65px - 14px));
    z-index:999999;

    font-size:22px;
    line-height:1.05;
    letter-spacing:.05em;
    margin:0;
  }
}


/* ---------- SP小（〜450px） ---------- */
@media (max-width: 450px){

  .hero-btn--sp{
    left:0;
    bottom:20px;
    width:85vw;
    max-width:none;
    height:58px;
    padding-left:16px;
  }

  .hero-btn--sp .hero-btn__text{
    font-size:18px;
    padding-left:16px;
  }

  /* 元の「450pxで微調整」をここへ統合 */
  .hero-btn__text{
    padding-top:16px;
    left:18px;
  }

  .site-logo{
    left:20px;
    bottom:95px;
    font-size:17px;
  }
}


/* ---------- SP極小 ---------- */
@media (max-width: 343px){
  .site-logo{ bottom:75px; }
}
@media (max-width: 280px){
  .hero-btn--sp{ bottom:0; }
  .hero-btn--sp .hero-btn__text{ font-size:12px; }
  .site-logo{ bottom:65px; }
}


/* ---------- PC中間：ボタン微調整 ---------- */
@media (min-width: 821px) and (max-width: 1069px){
  .hero-btn--pc{ bottom:160px; width:400px; }
  .hero-btn--pc .hero-btn__text{ font-size:28px; line-height:1.3; padding-bottom:5px; }
}
@media (min-width: 769px) and (max-width: 820px){
  .hero-btn--pc{ bottom:140px; width:400px; }
  .hero-btn--pc .hero-btn__text{ font-size:28px; line-height:1.3; }
}


/* ---------- PC中間：画像サイズ ---------- */
@media (min-width: 769px) and (max-width: 1400px){
  .hero-main-copy-wrap img{ width:42vw; }
  .hero-sub-copy-wrap  img{ width: clamp(700px, 80vw, 1100px); }
}


/* ---------- HEROボタン：共通インタラクション ---------- */
.hero-btn{ transition: filter .25s ease; }
.hero-btn:hover{ filter: brightness(1.1); }
.hero-btn:focus-visible{ opacity:.5; outline:none; }





@media (max-width: 768px){
  
  .hero-btn--sp{ width:82vw; max-width:560px; }

  .hero-btn--sp .hero-btn__img{
    width:100%;
    height:65px;
    object-fit: fill;
    display:block;
  }

  /* SPボタン画像：高さが決まってるならOK */
  .hero-btn--sp .hero-btn__img{
    width:100%;
    height:65px;
    object-fit: fill;
    display:block;
  }

  /* テキストをボタン画像に対して上下中央に */
  .hero-btn--sp .hero-btn__text{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;   /* ←上下中央 */
    justify-content:flex-start;
    box-sizing:border-box;
    padding:0 30px 0 40px; /* 左余白 / 右は矢印の右余白 */
    line-height:1.2;
    margin:0;

    /* 上に寄る原因を無効化 */
    padding-top:0;
    transform:none;
  }

  /* 右矢印：右端へ */
  .hero-btn--sp .hero-btn__text i{
    margin-left:auto;
    font-size:20px;
  }
}




/* =========================================================
  予約パネル
  キャッチ〜ボタンは画像の上 / SNSは画像の下（別ブロック）
========================================================= */
@media (max-width:500px){
  .reserve-panel{
    justify-content: flex-end;
  }
  .reserve-panel-inner{
    max-width: 520px;
    margin: 0 auto;
  }
  /* --- SP キャッチ配置（2枚のズレを維持しつつ中央基準） --- */
  .reserve-catch{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 0 50px -25px;
  }
  /* 各行を中央基準に */
  .reserve-catch p{
    margin:0;
    width:100%;
    display:flex;
    justify-content:center;
  }
  /* キャッチ画像サイズ */
  .reserve-catch__img{
    width:min(70%, 220px);
    height:auto;
    display:block;
  }
  /* 2枚のズレ（transform衝突を避けるため translate を使用） */
  .reserve-catch__img.item1{
    translate: clamp(10px, 4vw, 24px) 0;
  }
  .reserve-catch__img.item2{
    margin-top:10px;
    translate: clamp(40px, 10vw, 120px) 0;
  }
  /* SP：予約ボタン（画像差し替え） */
  .reserve-btn{
    background-image:url("../img/btn_reserve_sp.png");
    height:70px;
    font-size:22px;
  }
  /* SP：リード文（※HTML側で表示制御） */
  .reserve-lead{
    margin:0 0 10px;
    font-size:14px;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
    font-weight:700;
    line-height:1.7;
  }
  /* ----  SP：SNSブロックを画像外に配置 ---- */
  .reserve-sns-block{
    padding:0 18px 15px;
    text-align:center;
  }
  .reserve-sns-block .reserve-sns-lead{
    margin:0 0 15px;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
    color:#3e1906;
    text-shadow:none;
    opacity:1;
  }
  .reserve-sns-block .reserve-sns{
    gap:30px;
    justify-content:center;
  }
  .reserve-sns-block .sns-btn{
    width:62px;
    height:62px;
    border-radius:16px;
    background:#e27954;
  }
  .reserve-sns-block .sns-btn img{
    width:65%;
    height:auto;
  }
  /* SP：ヘッダロゴ位置 */
  .header_logo_text{
    font-size: 25px;
    bottom: 20vw;
  }
}
/* SP：予約パネル下余白の微調整（画面幅別）
  ・キャッチ〜ボタンが下にはみ出さないための調整 */
@media (min-width:471px) and (max-width:500px){
  .reserve-panel{ padding-bottom: 100px; }
}
@media (min-width:451px) and (max-width:470px){
  .reserve-panel{ padding-bottom: 90px; }
}
@media (min-width:431px) and (max-width:450px){
  .reserve-panel{ padding-bottom: 75px; }
}
@media (min-width:391px) and (max-width:430px){
  .reserve-panel{ padding-bottom: clamp(48px, 14vw, 74px); }
}
@media (min-width:301px) and (max-width:390px){
  .reserve-panel{ padding-bottom: 48px; }
}
@media (max-width:300px){
  .reserve-panel{ padding-bottom: 35px; }
}
/* 501px～
   PCレイアウト：右側パネル表示 */
@media (min-width:501px){
  /* PC：リード（PCのみ表示） */
  .reserve-lead{
    margin:80px 0 7px;
    font-size:20px;
    font-weight:700;
    line-height:1.7;
  }
  /* PC：SNSリード */
  .reserve-sns-lead{
    margin:10px 0 15px;
    font-size:20px;
    font-weight:700;
    line-height:1.4;
    opacity:.9;
  }
  /* PC：SNSボタンサイズ固定（崩れ防止） */
  .reserve-sns .sns-btn{ width:64px; height:64px; }
  /* パネルを右側に配置 */
  .reserve-panel{
    top:0; bottom:0;
    left:auto; right:0;
    width:40%;
  }
}
/* 501〜1180：右パネルは維持しつつ中身を縮小
   ・scale と translate で位置と大きさを制御 */
@media (min-width:501px) and (max-width:1180px){
  .reserve-panel{
    padding:0 20px;
    right: clamp(-15vw, -10vw, -8vw);
  }

  .reserve-panel-inner{
    --s: .90;
    --y: 20px;
    position:relative;
    left:30%;
    transform:translate(-50%, var(--y)) scale(var(--s));
    width:calc(100% / var(--s));
  }
  .reserve-btn{
    font-size:22px;
    height:100px;
  }
}
/* 501〜900：さらに縮小（中身の比率調整） */
@media (min-width:501px) and (max-width:900px){
  .reserve-panel-inner{ --s:.70; --y:55px; }
  .reserve-panel{ right: -15vw; }
}
/* 601〜700：高さ・余白・SNSサイズの微調整 */
@media (min-width:601px) and (max-width:700px){
  .reserve-panel{ padding:0; right: -16.5vw; }
  .reserve-lead{ margin-top:0; }
  .reserve-btn{ font-size:20px; height:85px;}
  .reserve-sns{ gap:30px; }
  .reserve-sns .sns-btn{ width:45px; height:45px; }
  .reserve-panel-inner{ --y:60px; }
}
/* 561〜600：PC構造のまま縮小
   ★重複：下（501〜560）と同じ「scale＋translateによる位置制御」*/
@media (min-width:561px) and (max-width:600px){
  .reserve-panel{ right:0; padding:0 16px; }

  .reserve-panel-inner{
    --s: .58;      /* サイズを少し大きく */
    --y: 78px;
    --x: -200px;   /* 右寄せ方向へ（戻し量を弱める） */

    margin-left:auto;
    transform-origin:right top;
    transform: translate(var(--x), var(--y)) scale(var(--s));
    width: calc(100% / var(--s));
  }
}
/* 501〜560：PC構造のまま大幅縮小
   ★重複：右寄せ＋scale調整の考え方は下の 561〜600 と同系統 */
@media (min-width:501px) and (max-width:560px){
  .reserve-panel{ right:0; padding:0 16px; }

  .reserve-panel-inner{
    --s: .52;
    --y: 83px;
    --x: -220px;
    margin-left:auto;
    transform-origin:right top;
    transform: translate(var(--x), var(--y)) scale(var(--s));
    width: calc(100% / var(--s));
  }
}



/* --------------------------
  Plan
-------------------------- */
/* ステップ前キャッチ　※完全にスマホのみの要素 */
.plan-section .step__catch{ order:3; margin-top:40px;margin-bottom:20px; }
.plan-section .step__catch{
  width:100%;
  padding:0;
  text-align:center;
}
.plan-section .step__catch .sp-title__bg{
  display:inline-block;
  margin:0 auto;
}

@media (min-width:895px) and (max-width:1380px){
  .plan-section .plan-cards{
    padding: 0 30px;
    gap:30px;
  }  
}
@media (min-width:769px) and (max-width:1380px){
  .plan-section .plan-cards{
    padding: 0 10px;
    gap:20px;
  }  
}

/* =========================================================
   400〜700px：ステップ文言の途中改行対策
========================================================= */
@media (min-width:401px) and (max-width:700px){
  .plan-steps{
    max-width:100%; /* ★size: (追加) */
  }
  .plan-step{
    width: clamp(180px, 42vw, 210px);
  }
  .step-text{
    font-size: clamp(14px, 2.8vw, 18px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
}
@media (max-width: 400px){
  .plan-steps{ margin:10px auto; max-width:100%; }
  .plan-step{ width:140px; height:120px; padding:25px 0; }
  .step-icon img{ margin:0 0 7.5px; width:50px; }
  .step-icon.last_step-icon img{
    margin: 0;
    width:70px;
    height:auto;
    object-fit:contain;
  }
  .step-text{ font-size:13px; }
}

/* =========================================================
   768〜1025px：吹き出し内テキストのはみ出る対策
========================================================= */
@media (min-width:768px) and (max-width:1025px){
  .speech__text{
    padding: 15px 5px 20px 37px;
  }
  .speech__hd{
    font-size: clamp(18px, 2.1vw, 22px);
    line-height: 1.2;
  }
  .speech__tx{
    font-size: clamp(14px, 1.7vw, 18px);
    line-height: 1.5;
    letter-spacing: -0.04em;
  }
  /* ★ 2つめ（自己PR）のみ調整 */
  .row.row--illust-first .speech__text{
    padding-left: 55px;
  }
}








/* 以下、アニメーション関連 */
@media (max-width: 768px){
  /* =========================================================
    SP用 h2（アニメ背景帯）
  ========================================================= */
  .sp-title{
    display:flex;
    justify-content:center;
    margin-bottom:40px;
  }
  .sp-title__bg{
    display:block;
    width:100%;
    margin:0 auto;
    text-align:center;
    padding:14px 0;
    border-radius:12px;
    background: linear-gradient(to left, #ff887c 0%, #b6325f 100%);
    color:#fff;
    font-size:24px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.08em;

    transform:scaleX(0);
    transform-origin:left center;
    opacity:0;
  }
  .plan-section .sp-title__bg,
  .checklist-section .sp-title__bg{
    background: linear-gradient(to right, #df8f3c 0%, #e44b36 100%);
    font-size:clamp(18px, 4vw, 23px);
  }
  .checklist-section .section-title{ margin:0 20px 40px; }
}


/* 臨時修正 */
@media (min-width: 1201px){
  .checklist-section .section-inner{ 
    padding-top: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1200px){
  /* Video：1200pxで38px → 最小28pxまで縮小 */
  .video-section .section-title{ 
    font-size: clamp(30px, 3.2vw, 38px);
  }
  /* Service：1200pxで38px → 最小28pxまで縮小 */
  .service-section .section-title{ 
    font-size: clamp(32px, 3.2vw, 38px);
  }
  /* Plan：最小28pxまで縮小（最大38px） */
  .plan-section .section-title{ 
    font-size: clamp(32px, 3.2vw, 38px);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: keep-all;
  }
  /* Checklist：最小24pxまで縮小 */
  .checklist-section .section-title{ 
    font-size: clamp(28px, 3.2vw, 38px);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  .service-section{ 
    margin-top: 80px;
  }
  .plan-section { 
    margin-top: 80px;
  }
  .checklist-section .section-inner{ 
    padding-top: 0;
  }
}