/* For Rescue ページ（モック）。余白は幅ごとに下の変数だけで決める */
#service-page.rescue-page{
  --side:40px; --page-y:100px; --title-b:60px;
  --sec:110px; --head-b:36px; --item-y:48px; --col:44px; --stack:20px;
  --box-y:24px; --box-x:28px; --tri:28px; --row-y:30px;
  --fs:.92rem; --fs-s:.82rem; --lh:2.1;
}
@media (max-width:1024px){#service-page.rescue-page{
  --side:40px; --page-y:80px; --title-b:48px;
  --sec:88px; --head-b:30px; --item-y:40px; --col:32px; --stack:18px;
  --box-y:20px; --box-x:24px; --tri:20px; --row-y:26px;
  --fs:.9rem; --fs-s:.8rem; --lh:2.05;
}}
@media (max-width:767px){#service-page.rescue-page{
  --side:32px; --page-y:64px; --title-b:40px;
  --sec:72px; --head-b:26px; --item-y:34px; --col:24px; --stack:16px;
  --box-y:16px; --box-x:20px; --tri:16px; --row-y:22px;
  --fs:.85rem; --fs-s:.76rem; --lh:2;
}}
@media (max-width:599px){#service-page.rescue-page{
  --side:20px; --page-y:48px; --title-b:28px;
  --sec:64px; --head-b:22px; --item-y:32px; --col:20px; --stack:16px;
  --box-y:18px; --box-x:20px; --tri:28px; --row-y:20px;
  --fs:.84rem; --fs-s:.76rem; --lh:2;
}}

/* 枠：ヘッダーと本文の左右をそろえる */
#service-page.rescue-page .works-header{padding:10px var(--side)}
#service-page.rescue-page .section{padding:var(--page-y) var(--side)}
#service-page.rescue-page .wrapper{max-width:1000px;padding:0;margin:0 auto}
#service-page.rescue-page .section .section-title{margin-bottom:var(--title-b)}
#service-page.rescue-page .section .section-title .main-title{font-size:1.8rem}
@media (max-width:767px){
  #service-page.rescue-page .section .section-title .main-title{font-size:1.5rem}
}
@media (max-width:599px){
  #service-page.rescue-page .section .section-title .main-title{font-size:1.25rem}
}

/* 文章は箱の幅いっぱいに流す */
#service-page.rescue-page p,#service-page.rescue-page li{font-size:var(--fs);line-height:var(--lh)}
#service-page.rescue-page .sv-lead{max-width:none;font-size:1rem;line-height:2.4;text-align:center}
#service-page.rescue-page .pc-br{display:inline}
@media (max-width:1024px){
  #service-page.rescue-page .sv-lead{font-size:var(--fs);line-height:2.3;text-align:justify}
  #service-page.rescue-page .pc-br{display:none}
}
#service-page.rescue-page .sv-block{margin-top:var(--sec)}
#service-page.rescue-page .sv-h{margin-bottom:var(--head-b);gap:18px}
#service-page.rescue-page .sv-h .ja{font-size:1.3rem}
@media (max-width:1024px){#service-page.rescue-page .sv-h .ja{font-size:1.2rem}}
@media (max-width:767px){#service-page.rescue-page .sv-h .ja{font-size:1.1rem}#service-page.rescue-page .sv-h{gap:14px}}
@media (max-width:599px){#service-page.rescue-page .sv-h .ja{font-size:1.02rem}#service-page.rescue-page .sv-h{gap:12px}}

/* 画像と文章の2列（PC・タブレット・小型タブレット共通。スマホだけ縦） */
.rs-two{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,51.6fr);gap:var(--col);align-items:start}
.rs-two p{text-align:justify}
.rs-fig{display:grid;gap:var(--stack)}
.rs-fig figure{margin:0}
.rs-fig img,.rs-type img{display:block;width:100%;height:auto;border:1px solid #e3ded7;background:#fff}
.rs-fig figcaption{margin-top:8px;font-size:var(--fs-s);letter-spacing:.06em;color:var(--sub-color);line-height:1.6}
.rs-link{display:inline-block;margin-top:var(--stack);font-size:var(--fs);letter-spacing:.1em;color:var(--sub-color);text-decoration:none;border-bottom:1px solid var(--sub-color);padding-bottom:4px}
@media (max-width:599px){.rs-two{grid-template-columns:minmax(0,1fr)}}

/* セクションの作り */
.rs-items{list-style:none;border-top:1px solid var(--main-color)}
.rs-item{padding:var(--item-y) 0;border-bottom:1px solid var(--main-color)}
.rs-hd{display:flex;align-items:baseline;gap:18px;margin-bottom:var(--stack)}
#service-page.rescue-page .rs-hd .sv-no{font-size:1.7rem;line-height:1.2}
.rs-name{font-size:1.18rem;letter-spacing:.08em;line-height:1.7}
.rs-intro{margin-bottom:var(--head-b);text-align:justify}
.rs-box{margin-top:var(--stack);padding:var(--box-y) var(--box-x);background:rgba(255,255,255,.6);border:1px solid #e3ded7}
.rs-box h5{font-size:var(--fs-s);letter-spacing:.12em;color:var(--sub-color);margin-bottom:6px;font-weight:500}
.rs-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tri)}
.rs-type h5{margin-top:14px;font-size:var(--fs);letter-spacing:.08em}
.rs-type h5 span{font-family:var(--font-en);font-size:var(--fs-s);letter-spacing:.14em;color:var(--sub-color);margin-right:10px}
#service-page.rescue-page .rs-type p{margin-top:4px;font-size:var(--fs-s);line-height:1.95;text-align:justify}
@media (max-width:1024px){#service-page.rescue-page .rs-hd .sv-no{font-size:1.5rem}.rs-name{font-size:1.1rem}.rs-hd{gap:16px}}
@media (max-width:767px){#service-page.rescue-page .rs-hd .sv-no{font-size:1.3rem}.rs-name{font-size:1.02rem}.rs-hd{gap:14px}.rs-type h5{margin-top:10px}}
@media (max-width:599px){.rs-types{grid-template-columns:minmax(0,1fr)}#service-page.rescue-page .rs-hd .sv-no{font-size:1.2rem}.rs-name{font-size:1rem}.rs-hd{gap:12px}.rs-type h5{margin-top:12px}}

/* 料金 */
.rs-price-lead{margin-bottom:var(--head-b);text-align:justify}
.rs-rows{list-style:none;border-top:1px solid var(--main-color)}
.rs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px var(--col);align-items:baseline;padding:var(--row-y) 8px;border-bottom:1px solid var(--main-color)}
.rs-row h4{font-size:1.08rem;letter-spacing:.08em;line-height:1.7}
#service-page.rescue-page .rs-row .note{margin-top:4px;font-size:var(--fs-s);line-height:1.9;color:var(--sub-color)}
.rs-row .amt{white-space:nowrap;text-align:right}
.rs-row .amt b{font-family:var(--font-en);font-weight:400;font-size:1.75rem;letter-spacing:.04em}
.rs-row .amt span{font-size:.86rem;margin-left:4px}
.rs-row .amt.ask{font-size:var(--fs);letter-spacing:.08em;color:var(--sub-color)}
@media (max-width:1024px){.rs-row h4{font-size:1.02rem}.rs-row .amt b{font-size:1.55rem}}
@media (max-width:767px){.rs-row{padding-left:4px;padding-right:4px}.rs-row h4{font-size:.96rem}.rs-row .amt b{font-size:1.35rem}.rs-row .amt span{font-size:.8rem}}
@media (max-width:599px){.rs-row{grid-template-columns:minmax(0,1fr);padding-left:2px;padding-right:2px}.rs-row .amt{text-align:left}.rs-row h4{font-size:.95rem}}

#service-page.rescue-page .sv-notes{max-width:none}
#service-page.rescue-page .sv-notes li{font-size:var(--fs-s);line-height:2.1}
#service-page.rescue-page .rs-after{margin-top:var(--head-b);text-align:justify}
#service-page.rescue-page .sv-cta{margin-top:var(--sec)}
#service-page.rescue-page .sv-cta p{margin-bottom:var(--head-b);font-size:var(--fs);line-height:2.2}
#service-page.rescue-page .rs-hd .sv-no{flex:none}
.rs-type img{aspect-ratio:1920/1059;object-fit:cover;object-position:top}
#service-page.rescue-page .sv-h .en{white-space:nowrap}
#service-page.rescue-page .sv-cta p{text-wrap:balance}
@media (max-width:599px){
  #service-page.rescue-page .sv-h{flex-wrap:wrap;gap:4px 12px}
  #service-page.rescue-page .sv-h .en{flex-basis:100%}
  #service-page.rescue-page .sv-h .ja{white-space:nowrap}
}


/* ============ 02〜08 の並べ方 ============
   どの幅でも、左の画像の枠は右の列の高さに合わせて伸び縮みする（左右の下端がそろう）
   PC：見出しは上に全幅。その下に 画像｜文章＋箱
   タブレット・小型タブレット：左＝見出し＋画像／右＝文章＋箱（見出しと文章の頭をそろえる）
   スマホ：見出し→画像→文章→箱 */
#service-page.rescue-page{--shift:0px;--half:calc(var(--fs) * (var(--lh) - 1) / 2)}
.rs-item.rs-two{row-gap:var(--stack)}
.rs-item.rs-two .rs-left{display:contents}
.rs-item.rs-two .rs-hd{grid-column:1 / -1;margin-bottom:0}
.rs-item.rs-two .rs-fig{grid-column:1;grid-row:2;position:relative;display:block}
.rs-item.rs-two .rs-right{grid-column:2;grid-row:2;margin-top:calc(var(--half) * -1)}
.rs-figin{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--stack)}
.rs-figin figure{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.rs-frame{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #e3ded7;background:linear-gradient(var(--t) 50%,var(--b) 50%)}
.rs-figin .rs-frame img{flex:none;width:100%;height:auto;margin:auto 0;border:0;background:none}
.rs-figin .is-contain .rs-frame img{flex:1 1 0;min-height:0;height:0;margin:0;object-fit:contain}
.rs-figin figcaption{flex:none}
.rs-right .rs-box{margin-top:var(--stack)}
@media (max-width:1024px){
  #service-page.rescue-page{--shift:-1.6px}
  .rs-item.rs-two{row-gap:0}
  .rs-item.rs-two .rs-left{display:flex;flex-direction:column;grid-column:1;grid-row:1}
  .rs-item.rs-two .rs-hd{margin-bottom:var(--stack)}
  .rs-item.rs-two .rs-fig{flex:1}
  .rs-item.rs-two .rs-right{grid-row:1;margin-top:var(--shift)}
}
@media (min-width:600px) and (max-width:767px){
  .rs-item.rs-two .rs-name{font-size:.98rem;letter-spacing:.04em}
  #service-page.rescue-page .rs-item.rs-two .rs-hd .sv-no{font-size:1.2rem}
  .rs-item.rs-two .rs-hd{gap:10px}
  #service-page.rescue-page{--shift:-1.9px}
}
@media (max-width:599px){
  .rs-item.rs-two .rs-left{display:block}
  .rs-item.rs-two .rs-left,.rs-item.rs-two .rs-right{grid-column:1;grid-row:auto}
  .rs-item.rs-two .rs-right{margin-top:var(--stack)}
  .rs-figin{position:static}
  .rs-frame{flex:none;max-height:300px}
  .rs-figin .is-contain .rs-frame img{flex:none;height:auto}
}

/* 制作見本：画像の上端と文章の頭、画像の下端とリンクの下端をそろえる */
.rs-sample{align-items:stretch}
.rs-sample-txt{display:flex;flex-direction:column;align-items:flex-start;margin-top:calc(var(--half) * -1)}
.rs-sample-txt .rs-link{margin-top:auto}
@media (max-width:599px){.rs-sample-txt{margin-top:0}.rs-sample-txt .rs-link{margin-top:var(--stack)}}

/* 01：どの型でも変えられるところ */
.rs-free{margin-top:var(--head-b);padding:var(--box-y) var(--box-x);background:rgba(255,255,255,.6);border:1px solid #e3ded7}
.rs-free h5{font-size:var(--fs-s);letter-spacing:.12em;color:var(--sub-color);font-weight:500;margin-bottom:8px}
.rs-free dl>div{display:grid;grid-template-columns:13em minmax(0,1fr);gap:0 var(--tri);padding:10px 0;border-top:1px solid #e3ded7;align-items:baseline}
.rs-free dl>div:first-child{border-top:0}
.rs-free dl>div:last-child{padding-bottom:0}
.rs-free dt{font-size:var(--fs);letter-spacing:.08em;font-weight:600;line-height:var(--lh)}
.rs-free dd{margin:0;font-size:var(--fs);line-height:var(--lh)}
@media (max-width:599px){.rs-free dl>div{grid-template-columns:minmax(0,1fr)}.rs-free dd{font-size:var(--fs-s);line-height:1.95}}
.rs-item.rs-two{align-items:stretch}
.rs-sample .rs-fig{display:block}
.rs-sample .rs-fig figure{height:100%}
.rs-sample .rs-fig img{height:100%;object-fit:cover;object-position:top}
@media (max-width:599px){.rs-sample .rs-fig img{height:auto}}

/* 公開したあとのこと：見出しの下に文章（どの幅でも同じ並び） */
.rs-talk .rs-row{grid-template-columns:minmax(0,1fr);gap:6px}
#service-page.rescue-page .rs-talk .rs-row p{text-align:justify}

/* 料金の税の表記 */
#service-page.rescue-page .rs-row .amt{line-height:1.25}
.rs-row .amt small{display:block;margin-top:6px;line-height:1.4;font-size:.72rem;letter-spacing:.08em;color:var(--sub-color)}
@media (max-width:599px){.rs-row .amt small{display:inline;margin-left:8px}}

/* アクセントカラー（見本と同じ黄色） */
#service-page.rescue-page{--accent:#e3a61f}
#service-page.rescue-page .rs-hd .sv-no{color:var(--accent)}
#service-page.rescue-page .sv-h .en{color:var(--accent)}
.rs-link{color:var(--text-color);border-bottom:2px solid var(--accent)}
.rs-box{border-left:3px solid var(--accent)}
.rs-free{border-top:3px solid var(--accent)}
.rs-type h5 span{color:var(--accent)}
.rs-row .amt b{box-shadow:inset 0 -0.38em 0 rgba(227,166,31,.33)}
#service-page.rescue-page .sv-cta .works-more-btn{background:var(--accent);border-color:var(--accent);color:#33302c}

/* ============ 制作の進め方：段階｜団体さま（白い箱）｜制作（色つきの箱） ============ */
.rs-steps{list-style:none}
.rs-step{display:grid;grid-template-columns:minmax(0,24fr) minmax(0,36fr) minmax(0,36fr);gap:0 12px;align-items:stretch;padding:6px 0}
.rs-step-hd{display:flex;align-items:baseline;gap:14px;padding:18px 0 0 8px}
#service-page.rescue-page .rs-step .sv-no{flex:none;font-size:1.3rem;line-height:1.2;color:var(--accent)}
.rs-step h4{font-size:1.02rem;letter-spacing:.06em;line-height:1.7}
.rs-cell{padding:16px 20px 16px;border:1px solid #e3ded7}
.rs-cell.rs-you{background:#fff}
.rs-cell.rs-me{background:#e8ecea;border-color:#dfe4e2}
.rs-cell b{display:block;font-size:var(--fs);font-weight:600;letter-spacing:.06em;line-height:1.7}
#service-page.rescue-page .rs-cell p{margin-top:2px;font-size:var(--fs-s);line-height:1.9}
.rs-who{display:none}
.rs-step-th{padding:0 0 4px}
#service-page.rescue-page .rs-step-th p{font-size:var(--fs-s);font-weight:600;letter-spacing:.1em;line-height:1.6;text-align:center;padding:9px 6px;color:var(--text-color)}
.rs-step-th .th-you{background:#fff;border:1px solid #e3ded7}
.rs-step-th .th-me{background:#d5dcda;border:1px solid #d5dcda}
.rs-span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:10px 0 6px;padding:14px 16px;border-left:3px solid var(--accent);background:rgba(227,166,31,.14)}
.rs-span span{font-size:var(--fs-s);letter-spacing:.08em}
.rs-span b{font-size:1.12rem;font-weight:600;letter-spacing:.08em}
.rs-span small{font-size:.72rem;letter-spacing:.06em;color:var(--sub-color)}
.rs-step.in .rs-step-hd{border-left:3px solid var(--accent);padding-left:13px;margin:0}
@media (max-width:1024px){
  .rs-step-hd{flex-direction:column;align-items:flex-start;gap:2px;padding-top:14px}
  #service-page.rescue-page .rs-step .sv-no{font-size:1.15rem;line-height:1.4}
  .rs-step h4{font-size:.98rem;letter-spacing:.04em}
  .rs-cell{padding:14px 16px}
}
@media (max-width:767px){
  /* 小さなタブレット：段階の名前を上に、その下に2つの箱を並べる */
  .rs-step{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;padding:10px 0 6px}
  .rs-step-hd{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:10px;padding:0 0 0 2px}
  .rs-step.in .rs-step-hd{padding-left:10px}
  .rs-step-th>div{display:none}
  .rs-step h4{font-size:.98rem;letter-spacing:.06em}
  .rs-cell{padding:12px 14px}
}
@media (max-width:599px){
  .rs-step{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0 10px;border-top:1px solid var(--main-color)}
  .rs-step-th{display:none}
  .rs-step-hd{flex-direction:row;align-items:baseline;gap:10px;padding:0 0 4px 2px}
  .rs-step.in .rs-step-hd{padding-left:10px}
  .rs-step h4{font-size:.98rem;letter-spacing:.06em}
  .rs-cell{padding:12px 14px 12px}
  .rs-who{display:inline-block;margin-bottom:4px;font-size:.66rem;line-height:1.5;letter-spacing:.1em;color:var(--sub-color);border:1px solid #c9d1d2;border-radius:999px;padding:1px 10px;background:rgba(255,255,255,.7)}
  .rs-span{margin:4px 0 10px}
}

/* 2つ並びの小さな箱 */
.rs-cards{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tri);margin-top:var(--head-b)}
.rs-cards li{padding:var(--box-y) var(--box-x);background:rgba(255,255,255,.6);border:1px solid #e3ded7}
.rs-cards h4{font-size:var(--fs);letter-spacing:.08em;line-height:1.7;margin-bottom:6px}
#service-page.rescue-page .rs-cards p{font-size:var(--fs-s);line-height:2;text-align:justify}
@media (max-width:599px){.rs-cards{grid-template-columns:minmax(0,1fr);gap:12px}}

/* 公開したあとのこと：期間ごとの表 */
.rs-after-table{border-top:1px solid var(--main-color)}
.rs-after-table .r{display:grid;grid-template-columns:minmax(0,28fr) repeat(3,minmax(0,24fr));gap:6px;align-items:stretch;padding:10px 8px;border-bottom:1px solid var(--main-color)}
.rs-after-table .r>span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:6px 8px;font-size:var(--fs-s);line-height:1.6;letter-spacing:.06em}
.rs-after-table .r>span:first-child{justify-content:flex-start;text-align:left;padding-left:0;font-size:var(--fs);font-weight:600;letter-spacing:.06em}
.rs-after-table .th>span{min-height:0;color:var(--sub-color);font-size:var(--fs-s)}
.rs-after-table .free{background:rgba(227,166,31,.22)}
.rs-after-table .ask{background:rgba(255,255,255,.6);border:1px solid #e3ded7;color:var(--sub-color)}
.rs-after-table .wide{grid-column:span 2}
.rs-after-table .wide3{grid-column:span 3}
@media (max-width:767px){.rs-after-table .r{padding-left:4px;padding-right:4px;grid-template-columns:minmax(0,32fr) repeat(3,minmax(0,22fr))}.rs-after-table .r>span:first-child{font-size:var(--fs-s);letter-spacing:0}}
@media (max-width:599px){.rs-after-table .r{grid-template-columns:minmax(0,26fr) repeat(3,minmax(0,25fr));gap:4px;padding:8px 2px}.rs-after-table .r>span{padding:5px 3px;font-size:.72rem;letter-spacing:0}.rs-after-table .r>span:first-child{font-size:.76rem;letter-spacing:0}}

/* About への入口 */
.rs-about{text-align:center;margin-top:var(--stack)}
@media (max-width:1024px){.rs-about{text-align:left}}

/* ===== 動き（Service・About とそろえる） ===== */
/* 順番に現れるときの、ずらす時間は --d で渡す（マウスを乗せたときの反応は遅らせない） */
.js .rescue-page .reveal{transition:opacity .9s ease-out var(--d,0s),transform .9s ease-out var(--d,0s)}

/* 見本を見る：ボタン */
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:230px;padding:17px 30px;background:var(--accent);border:1px solid var(--accent);color:#33302c;text-decoration:none;font-size:var(--fs);letter-spacing:.16em;transition:background-color .3s,color .3s,border-color .3s}
.rs-btn .ar,.rs-link .ar{display:inline-block;margin-left:.5em;transition:transform .3s}
.rs-btn .ar{margin-left:0}
.rs-btn:hover,.rs-btn:focus-visible{background:#33302c;border-color:#33302c;color:#fff}
.rs-btn:hover .ar,.rs-btn:focus-visible .ar,.rs-link:hover .ar,.rs-link:focus-visible .ar{transform:translateX(8px)}
.rs-sample-txt .rs-btn{margin-top:auto}
@media (max-width:599px){.rs-sample-txt .rs-btn{margin-top:var(--stack);width:100%}}

/* 見本の画像：押せる。乗せると少し大きくなる */
.rs-sample .rs-fig figure{overflow:hidden;border:1px solid #e3ded7}
.rs-sample .rs-fig a{display:block;height:100%}
.rs-sample .rs-fig img{border:0;transition:transform .6s ease}
.rs-sample .rs-fig a:hover img,.rs-sample:has(.rs-btn:hover) .rs-fig img{transform:scale(1.03)}

/* 文字のリンク */
.rs-link{transition:color .3s,border-color .3s}
.rs-link:hover,.rs-link:focus-visible{border-bottom-color:#33302c}

/* CONTACT：黄色のボタンにも、乗せたときの変化を */
#service-page.rescue-page .sv-cta .works-more-btn:hover,#service-page.rescue-page .sv-cta .works-more-btn:focus-visible{background:#33302c;border-color:#33302c;color:#fff}

/* 料金の行：Service の行と同じ動き（背景が明るくなり、左の線が伸びる） */
.js .rescue-page .rs-row.reveal,.rescue-page .rs-row{position:relative;transition:background-color .5s,opacity .9s ease-out var(--d,0s),transform .9s ease-out var(--d,0s)}
.rs-row::before{content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent);transition:height .6s ease}
.rs-row:hover{background-color:rgba(255,255,255,.55)}
.rs-row:hover::before{height:100%}

/* 箱：乗せると明るくなる */
.js .rescue-page .rs-cards li.reveal,.rescue-page .rs-cards li{transition:background-color .45s,opacity .9s ease-out var(--d,0s),transform .9s ease-out var(--d,0s)}
.rs-cards li:hover{background-color:rgba(255,255,255,.9)}

/* 3つの型：乗せると少し浮く（About のカードと同じ動き） */
.rs-type img{transition:transform .45s cubic-bezier(.25,.46,.45,.94),box-shadow .45s}
.rs-type:hover img{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.06)}

@media (prefers-reduced-motion: reduce){
  .rs-btn,.rs-btn .ar,.rs-link,.rs-link .ar,.rs-sample .rs-fig img,.rs-row,.rs-row::before,.rs-cards li,.rs-type img{transition:none}
  .rs-sample .rs-fig a:hover img,.rs-sample:has(.rs-btn:hover) .rs-fig img,.rs-type:hover img{transform:none}
}