@charset "utf-8";
/* =========================================================
   せきそうの家族葬 SOUEL LP
========================================================= */

/* ---------- リセット・基本設定 ---------- */
html {
  font-size: 10px;
  -webkit-text-size-adjust: none;
  font-feature-settings: "palt";
}
body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', serif;
  font-weight: 500;
  color: var(--foreground);
  background: var(--background);
}
blockquote, body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6,
input, li, ol, p, textarea, ul {
  margin: 0;
  padding: 0;
}
div, a, p, input, textarea, select {
  box-sizing: border-box;
}
ul li {list-style: none;}
figure {margin: 0; position: relative;}
img {
  width: 100%;
  height: auto;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}
h1, h2, h3, h4, h5 {font-weight: inherit; margin: 0;}
a {text-decoration: none; display: block; color: inherit;}
a:focus, *:focus {outline: none;}
.none {display: none !important;}
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
iframe {display: block; border: none;}

/* ---------- CSS変数（ブランドカラー） ---------- */
:root {
  --color-brand-orange: #f9c061;
  --color-brand-orange-deep: #f0a845;
  --color-brand-teal: #75c8d6;
  --color-grad-mid: #fae1b8;
  --background: #fbfaf3;
  --foreground: #4d4d4d;
  --white: #fff;
  --cnt-l-max: 1240px;
  --cnt-l-inset: calc((100% - min(90%, var(--cnt-l-max))) / 2);
}

/* =========================================================
   タイポグラフィ
========================================================= */

/* --- 日本語：見出し --- */
.ja_t_l,.ja_catch {font-size: clamp(2.2rem, 2.489vw, 3.4rem);}
.ja_t {font-size: clamp(2rem, 1.903vw, 2.6rem);}
.ja_t_s  {font-size: clamp(1.8rem, 1.610vw, 2.1rem);}

.ja_t,.ja_t_s {letter-spacing: .14em;}
.ja_t_l {letter-spacing: .1em;}
.ja_catch {letter-spacing: .3em;}

/* --- 日本語：本文 --- */
.ja_p_l,.footer_company__link a,.flow_card__tel a
{font-size: clamp(1.5rem, 1.245vw, 1.7rem);}
.ja_p,.includes_list p,.cmn_btn a,.access_info__link a,.footer_pagetop a
{font-size: clamp(1.4rem, 1.098vw, 1.5rem);}
.v_navi a
{font-size: clamp(1.3rem, 1.025vw, 1.4rem);}
.ja_p_s,.cta_member,.cta_tel__note,.includes_list p span,.includes_list p .note,.footer_copy
{font-size: clamp(1.2rem,.952vw, 1.3rem);}
.c_num
{font-size: .85em;}

.ja_p_l
{line-height: 2.2;}
.ja_t,.ja_p,.ja_p_m,.includes_list p
{line-height: 2;}
.ja_t_l,.ja_t_s,.ja_catch
{line-height: 1.85;}
.ja_p_s,.includes_list p .note,.totalcost_card__head h4,.header_bar,.contact_note
{line-height: 1.65;}
.cta_tel__note,.v_navi a
{line-height: 1.4;}

.footer_pagetop a,.en_p,.en_t_l
{letter-spacing: .12em;}
.cmn_btn a,.access_info__link a,.footer_company__link a
{letter-spacing: .14em;}
.v_navi a,.ja_p_l,.ja_p_m,.includes_list p,.c_num,.cta_member,.cta_tel__note,.footer_copy,.flow_card__tel a,.mv_copy__lead,.ja_p,.ja_p_s,.num_l,.num_m
{letter-spacing: .06em;}
.contact_note,.header_bar
{letter-spacing: .1em;}

/* --- 英字・数字 --- */
.en_p,.en_t_l
{font-family: 'Marcellus', 'Shippori Mincho', serif;}
.en_t_l
{font-weight: 400;}

/* CONTACT */
.en_p{font-size: clamp(1.2rem,.952vw, 1.3rem);}

.en_t_l{font-size: clamp(2.8rem, 3.660vw, 5rem);}
.num_l{font-size: clamp(3.2rem, 3.367vw, 4.6rem);}
.num_m{font-size: clamp(2.6rem, 2.635vw, 3.6rem);}

.num_l,.num_m,.facility_ctrl__arrows{line-height: 1;}

.white {color: var(--white);}

/* ---------- レイアウト ---------- */
.cnt_l {width: 90%; max-width: var(--cnt-l-max); margin: 0 auto;}
.cnt_m {width: 82%; max-width: 1100px; margin: 0 auto;}

.grid_list_4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sec_wrap {padding: 10rem 0 0;}
.wrap {
  overflow-x: clip;
  isolation: isolate;
}

/* ---------- 絶対配置ユーティリティ ---------- */
.trans_center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* ---------- 表示切替 ---------- */
.pc_disp {display: block;}
.sp_disp {display: none !important;}
.pc_br {display: block;}
.sp_br {display: none;}

/* ---------- 視覚的非表示 ---------- */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 画像アスペクト比固定 ---------- */
.c_pic {
  position: relative;
  overflow: hidden;
  display: block;
}
.c_pic:before {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding: 0 0 66.666%;
}
.c_pic.h:before {padding: 0 0 150%;}
.c_pic img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  object-fit: cover;
  transition-duration: .4s;
}

/* ---------- 共通ラベル（括弧付き英字） ---------- */
.c_label {
  color: var(--foreground);
}
.c_label:before,
.c_label:after,
.c_label_plain:before,
.c_label_plain:after {
  content: '';
  display: inline-block;
  width: .416em;
  height: 1.027em;
  vertical-align: -.152em;
  background-color: currentColor;
  -webkit-mask: url('img/label_bracket.svg') center / contain no-repeat;
  mask: url('img/label_bracket.svg') center / contain no-repeat;
}
.c_label:before,
.c_label_plain:before { margin-right: .5em; }
.c_label:after,
.c_label_plain:after  { margin-left: .5em; transform: scaleX(-1); }
.c_label_plain:before,
.c_label_plain:after  { display: none; }
.c_label.white {color: var(--white);}

/* ---------- 連番 ---------- */
.c_num {
  font-family: 'Marcellus', serif;
  color: var(--color-brand-orange-deep);
  margin-right: 1.6rem;
}
.c_num:before,
.c_num:after {
  content: '';
  display: inline-block;
  vertical-align: -.2em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.c_num:before {
  width: .66em; height: 1.1em;
  margin-right: .4em;
  -webkit-mask-image: url('img/num_bracket_l.svg');
  mask-image: url('img/num_bracket_l.svg');
}
.c_num:after {
  width: .69em; height: 1.3em;
  margin-left: .4em;
  -webkit-mask-image: url('img/num_bracket_r.svg');
  mask-image: url('img/num_bracket_r.svg');
}

/* ---------- セクション見出し（英ラベル＋日本語） ---------- */
.title_sec {margin-bottom: 6rem;}
.title_sec.center {text-align: center;}
.title_sec__en {margin-bottom: 1.6rem;}
.title_sec.white .c_label {color: var(--white);}
.title_sec.white .title_sec__ja {color: var(--white);}

.title_side {margin-bottom: 5rem;}
.title_side .c_label {display: block; margin-bottom: 1.4rem;}

/* ---------- 共通ボタン ---------- */
.cmn_btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 700;
  padding: 1rem 2.4rem;
  border-radius: 100px;
  transition: opacity .4s;
}
.cmn_btn.fill a {
  background: var(--color-brand-orange);
  color: var(--white);
}
.cmn_btn.fill.l a {
  padding: 1.6rem 3.6rem;
}
.cmn_btn a:hover {opacity: .7;}

/* ---------- 丸囲み矢印 ---------- */
.c_circle_arrow {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}
.c_circle_arrow:before {
  content: '';
  position: absolute;
  top: 50%;
  right: .5rem;
  width: .4rem;
  height: .4rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.c_circle_arrow:after {
  content: '';
  position: absolute;
  top: 50%;
  left: .36rem;
  right: .44rem;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}
.access_info__link .c_circle_arrow,
.footer_company__link .c_circle_arrow {top: .18em;}
.c_circle_arrow.up  {transform: rotate(-90deg);}
.c_circle_arrow.back {transform: rotate(180deg);}
.c_circle_arrow.ext {transform: rotate(-45deg);}
.c_circle_arrow.line {color: var(--foreground);}
.c_circle_arrow.line.white {color: var(--white);}
.c_circle_arrow {transition: background-color .3s, border-color .3s, color .3s;}
.cmn_btn a:hover .c_circle_arrow,
.mv_group__btn a:hover .c_circle_arrow,
.footer_pagetop a:hover .c_circle_arrow,
.footer_company__link a:hover .c_circle_arrow {
  background: var(--white);
  border-color: var(--white);
  color: var(--color-brand-orange);
}
a:hover .c_circle_arrow.line:not(.white),
.c_arrow_btn:hover .c_circle_arrow.line:not(.white) {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--white);
}
.mv_group__btn a:hover .c_circle_arrow,
.footer_company__link a:hover .c_circle_arrow {color: var(--color-brand-teal);}

/* ---------- 矢印（スライダー用） ---------- */
.cmn_arrow {
  position: relative;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
}
.cmn_arrow:before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem;
  height: 1rem;
  border-top: 1px solid var(--foreground);
  border-right: 1px solid var(--foreground);
  transform: translate(-70%, -50%) rotate(45deg);
}
.cmn_arrow.back {transform: rotate(180deg);}
.c_arrow_btn {padding: .6rem;}

/* ---------- 下向き矢印 ---------- */
.c_down_arrow {
  display: inline-block;
  position: relative;
  width: 4rem;
  height: 5rem;
}
.c_down_arrow:before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 2rem;
  height: 2rem;
  border-right: 2px solid var(--color-brand-orange);
  border-bottom: 2px solid var(--color-brand-orange);
  transform: translateX(-50%) rotate(45deg);
}
.c_down_arrow:after {
  content: '';
  position: absolute;
  top: .9rem;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-brand-orange);
  transform: translateX(-50%);
}

/* ---------- フラクション（01／05） ---------- */
.c_fraction {
  color: var(--foreground);
}

/* ---------- 追従する鳥モチーフ線画（画面中央固定） ---------- */
.fix_mark {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.fix_mark.is-show {opacity: 1; transition-duration: .6s;}
.fix_mark__svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 91vw;
  max-width: 1244px;
  height: auto;
}
.fix_mark__svg {display: block;}
.fix_mark__svg.sp {display: none;}
.fix_mark {
  --fm-ease: cubic-bezier(.65, .02, .23, 1);
  --fm-d-so: 2.4s;  --fm-t-so: 0s;
  --fm-d-u:  2s;    --fm-t-u:  2s;
}
.fix_mark__svg path {
  fill: none;
  stroke: #f0ba61;
  stroke-width: .6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.001;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0s linear 2s;
}
.fix_mark.is-show .fix_mark__svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--fm-d-so) var(--fm-ease) var(--fm-t-so);
}
.fix_mark.is-show .fix_mark__svg path:nth-of-type(2) {
  transition: stroke-dashoffset var(--fm-d-u) var(--fm-ease) var(--fm-t-u);
}

/* =========================================================
   LOADING
========================================================= */
.loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-orange);
  pointer-events: none;
}
.loading_txt {
  color: var(--background);
  text-align: center;
  white-space: nowrap;
}
.loading_txt span { display: inline-block; }

/* =========================================================
   header
========================================================= */
.header {position: relative;}
.header_bar {
  background: var(--color-brand-orange);
  color: var(--white);
  font-weight: 600;
  text-align: center;
  padding: .7rem 0 1rem;
}
.header_inner {position: relative;margin-top: 2rem;}
.header_btns {
  position: absolute;
  top: 0;
  left: 2.4rem;
  display: flex;
  gap: 1.2rem;
  z-index: 3;
}
.header_title,.footer_logo {
  width: 8vw;
  max-width: 150px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.header_title {
  padding: 2.2vh 0 4vh;
}
.footer_logo {
  padding: 9vh 0 0;
}
.header_navi {
  position: absolute;
  top: 1rem;
  right: 3rem;
  z-index: 3;
}

/* 縦書きナビ */
.v_navi {
  display: flex;
  flex-direction: row-reverse;
}
.v_navi li + li { margin-right: 2.4rem; }
.v_navi a {
  color: var(--foreground);
  writing-mode: vertical-rl;
  width: 1.4em;
  transition: opacity .4s;
}
.v_navi a:hover {opacity: .6;}
.v_navi.white a {color: var(--white);}
/* 縦ナビ末尾の Instagram アイコン（row-reverse なので左端に出る） */
.v_navi__sns a {writing-mode: horizontal-tb; width: auto; display: block;}
.i_insta {width: 2.2rem; height: 2.2rem; display: block;}

/* SPメニューボタン */
.menu_btn_wrap {
  position: fixed;
  top: 1.6rem;
  right: 1.6rem;
  width: 4.8rem;
  height: 4.8rem;
  background: var(--color-brand-orange);
  border-radius: 50%;
  z-index: 100;
  cursor: pointer;
}
.menu_btn_wrap span {
  position: absolute;
  left: 50%;
  width: 2rem;
  height: 1px;
  background: var(--white);
  transform: translateX(-50%);
  transition: all .4s;
}
.menu_btn_wrap span:nth-of-type(1) {top: 1.6rem;}
.menu_btn_wrap span:nth-of-type(2) {top: 2.35rem;}
.menu_btn_wrap span:nth-of-type(3) {top: 3.1rem;}
.menu_on .menu_btn_wrap span:nth-of-type(1) {top: 2.35rem; transform: translateX(-50%) rotate(30deg);}
.menu_on .menu_btn_wrap span:nth-of-type(2) {opacity: 0;}
.menu_on .menu_btn_wrap span:nth-of-type(3) {top: 2.35rem; transform: translateX(-50%) rotate(-30deg);}

/* SPオーバーレイメニュー */
.menu {
  position: fixed;
  inset: 0;
  background: var(--color-brand-orange);
  z-index: 90;
  overflow-y: auto;
}
.menu_inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: .8rem 16px 0;
}
.header_btns .cmn_btn a {transition: opacity .4s, background-color .5s, color .5s, box-shadow .5s;}
.menu_on .header_btns {position: fixed; z-index: 100;}
.menu_on .header_btns .cmn_btn a {
  background-color: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--white);
}
.menu_list .c_label {order: -1;}
.menu_list {margin: 13.3rem 0 0;}
.menu_list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: 1.6rem 0;
  color: var(--white);
  text-align: center;
}
.menu_group {
  margin: auto -16px 0 auto;
  padding-top: 4rem;
}
.menu_group .c_label {display: block; margin: 0 0 1.2rem .6rem;}

/* =========================================================
   MV
========================================================= */
#home_mv {
  position: relative;
  --mv-overhang: 10vh;
}
.mv_pic {
  clip-path: ellipse(78% 160% at 50% 160%);
  overflow: hidden;
}
/* FVスライダー */
.mv_slider {
  position: relative;
  height: calc(100vh - var(--header-h, 27.8rem) + var(--mv-overhang));
  height: calc(100svh - var(--header-h, 27.8rem) + var(--mv-overhang));
  min-height: 42rem; /* スマホ横向きなど画面が低い時の下限 */
  overflow: hidden;
}
.mv_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 1;
}
.mv_slide.slide_on  {z-index: 3;}
.mv_slide.slide_off {z-index: 2; opacity: 1;}
.mv_slide picture {display: contents;} /* SP 用画像の出し分け。img を .mv_slide 直下と同じ扱いにする */
.mv_slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
}
.mv_copy {
  position: absolute;
  left: 3.2vw;
  bottom: calc(var(--mv-overhang) + 7rem);
  color: var(--white);
}
.mv_copy__lead {
  color: var(--color-brand-orange);
  margin-bottom: 2rem;
}
.mv_group {
  position: absolute;
  right: 0;
  bottom: calc(var(--mv-overhang) + 0rem);
  color: var(--white);
}
.mv_group .c_label {color: var(--white); display: block; margin-bottom: 1.2rem;}
.mv_group__btn a {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: var(--color-brand-teal);
  color: var(--white);
  padding: 1.5rem 2.8rem;
  transition: opacity .4s;
}
.mv_group__btn a:hover {opacity: .8;}
.mv_group__btn img {width: 13rem;}

/* =========================================================
   CONCEPT
========================================================= */
#home_concept {padding-top: 2rem;}
.concept_box {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  border-radius: 24px;
  padding: 7vh 5rem 16vh;
}
.concept_box:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: url('img/sky_concept_poster.webp') center / cover no-repeat;
}
.c_bg_video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
.concept_box .title_sec {margin-bottom: 2rem;}
.concept_body {text-align: center;}
.concept_body__catch {
  color: var(--color-brand-orange);
  margin: 4rem 0 8rem;
}
.concept_body__text {color: var(--white);}
.concept_body__text p + p {margin-top: 3rem;}

/* =========================================================
   IMPORTANT
========================================================= */
.important_wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.important_pics {position: relative; min-height: 62rem;}
.important_pics__main {
  position: absolute;
  top: 0;
  left: 44%;
  width: 41%;
  z-index: 2;
}
.important_pics__sub1 {
  position: absolute;
  top: 34%;
  left: -12%;
  width: 50%;
  z-index: 1;
}
.important_pics__sub2 {
  position: absolute;
  top: 75%;
  left: 21%;
  width: 42%;
  z-index: 2;
}
.important_text {position: relative; z-index: 2;width: 70%;}
.important_text__ttl {margin-bottom: 3.6rem;}
.important_text p + p {margin-top: 2.4rem;}

/* =========================================================
   FEATURES（グラデーション背景帯）
========================================================= */
.features_bg {
  position: relative;
  margin-top: 10rem;
}
.features_bg:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg,
    var(--background) 0%,
    var(--color-grad-mid) 30%,
    var(--color-brand-orange) 62%,
    #f9c56d 82%,
    var(--background) 100%);
}
#home_feature {padding-top: 6rem;}

.facility_slide > * {min-width: 0;}
/* 下の 6rem は絶対配置の矢印・カウンター分（長文でも重ならない）。上 2rem との組み合わせで、見た目の中心は従来の margin-top:-4rem と同じ */
.facility_slide__body {margin-top: 2rem; padding-bottom: 6rem;}
.swiper {max-width: 100%;}

.feature_scroll {
  display: grid;
  grid-template-columns: 1fr 50%;
  align-items: start;
}
.feature_scroll > * {min-width: 0;}
.feature_scroll__body {
  padding-left: 5vw;
  padding-right: 6rem;
}
.feature_block {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature_block > p+p {margin-top: 1.6rem;}
.feature_block > p+p.ja_p_s {margin-top: 2rem;}
.feature_block .c_label_plain {margin-bottom: 2.8rem;}
.feature_block__ttl {margin-bottom: 3.2rem;}
.feature_scroll__pics {height: 100%;}
.feature_scroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}
.feature_img {
  position: absolute;
  inset: 1rem;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}
.feature_img.is-show {opacity: 1;}
.feature_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature_scroll__sticky .c_fraction {
  position: absolute;
  right: 3rem;
  top: 2.6rem;
  color: var(--white);
  z-index: 2;
}

#home_facility {padding-bottom: 12rem;}
.facility_slider {position: relative;}
.facility_slide {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 6rem;
  align-items: center;
}
.facility_slide__pic:before {content: none;}
.facility_slide__pic {aspect-ratio: 3 / 2;}
.facility_slide__body .c_label_plain {margin-bottom: 2.4rem;}
.facility_slide__body h3 {margin-bottom: 3.4rem;}
.facility_ctrl {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: calc((100% - 7rem) / 2.3);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.facility_ctrl__arrows {
  display: flex;
  gap: 0.4rem;
  margin-bottom: -.3rem;
}
.facility_ctrl .c_arrow_btn {
  padding: .6rem .6rem 0;
  display: block;
}

/* =========================================================
   PRICE
========================================================= */
.price_wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 6rem;
  align-items: center;
}
.price_text__ttl {margin-bottom: 3.2rem;}

/* =========================================================
   PLAN
========================================================= */
.plan_list {position: relative;}
.plan_item {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 6rem;
  align-items: stretch;
  border-top: 1px solid var(--color-brand-orange);
  padding: 0;
}
.plan_item:last-of-type {border-bottom: 1px solid var(--color-brand-orange);}
.plan_item__body {display: flex; flex-direction: column; padding: 4rem 0;}
.plan_item__ttl {margin-bottom: 2.4rem;}
/* プラン写真：枠（3:2）はそのまま、画像だけ四方 1.2rem 内側に（SP は余白なし） */
.plan_item__pic img {
  top: 1.2rem; left: 1.2rem;
  width: calc(100% - 2.4rem); height: calc(100% - 2.4rem);
  transform: none;
}
.plan_item__body p+p.ja_p_s {margin-top:.8rem;}
.plan_price {
  margin-top: auto;
  padding-top: 3.2rem;
  text-align: right;
}
.plan_price img {
  width: 30rem;
  max-width: 100%;
  height: auto;
  display: inline-block;
}
/* 会員入会の吹き出し */
.cta_member {
  position: absolute;
  left: 7.5%;
  top: -1.6rem;
  transform: translateY(-100%);
  background: var(--color-brand-orange);
  color: var(--foreground);
  border-radius: 100px;
  padding: 1rem 2.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.cta_member:after {
  content: '';
  position: absolute;
  left: 3.6rem;
  bottom: -.8rem;
  border-style: solid;
  border-width: .9rem .7rem 0 .7rem;
  border-color: var(--color-brand-orange) transparent transparent transparent;
}
.cta_band.is-member-show .cta_member {opacity: 1;}

/* =========================================================
   CTA帯
========================================================= */
.cta_band {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--white);
  text-align: center;
  padding: 1vh 0 1.6vh;
  box-shadow: 0 -2px 14px rgba(77, 77, 77,.08);
  transform: translateY(110%);
  transition: transform .5s ease;
}
.cta_band.is-fixed-show {transform: translateY(0);}
.cta_band__lead {margin-bottom: .8vh;}
.cta_band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.cta_tel {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.cta_tel .c_label {color: var(--color-brand-orange-deep);}
.cta_tel__num {
  color: var(--color-brand-orange-deep);
  margin-top: -5px;
}
.c_hyphen {
  display: inline-block;
  transform: translateY(-.14em);
  padding: 0 2px;
}
.cta_tel__num a {color: inherit; display: inline;}
.cta_tel__note {
  color: var(--color-brand-orange-deep);
  text-align: left;
}
.cta_btns {display: flex; gap: 1.2rem;}

/* =========================================================
   PLAN INCLUDES
========================================================= */
.includes_wrap {
  border-top: 1px solid var(--color-brand-orange);
  padding-top: 6rem;
}
.includes_list {
  gap: 2rem;
  width: 92%;
  margin: 0 auto;
}
.includes_list li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.includes_list figure {
  width: 10rem;
  flex: 0 0 auto;
}
.includes_list p span {
  display: block;
}
.includes_list p .note {
  margin-top: .4rem;
}
.includes_note {
  border-top: 1px solid var(--color-brand-orange);
  margin-top: 6rem;
  padding-top: 2.4rem;
}

/* =========================================================
   TOTAL COST
========================================================= */
.totalcost_wrap {
  border-top: 1px solid var(--color-brand-orange);
  padding-top: 6rem;
}
.totalcost_intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: start;
  margin-bottom: 6rem;
}
.totalcost_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.6rem;
  position: relative;
}
.totalcost_card {
  background: var(--white);
  padding: 2.8rem 2.4rem 2.2rem;
  position: relative;
}
.totalcost_card,.totalcost_sum,.flow_card {
  border-radius: 1rem;
}
.totalcost_card:not(:last-child):after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3.1rem;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--white), var(--white)) center / 1.7rem 2px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 2px 1.7rem no-repeat,
    var(--color-brand-orange);
  z-index: 2;
}
.c_num_label {margin-bottom: 1.6rem;line-height: 1;}
.c_num_label .c_num {margin-right: 0;}
.totalcost_card__head {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.2rem;
}
.totalcost_card__head figure {
  width: 4rem;
  flex: 0 0 auto;
  padding-left: 5px;
}
.totalcost_card__head h4 .pc_br {display: block;}
.totalcost_arrow {
  text-align: center;
  margin: 2.8rem 0;
}
.totalcost_sum {
  background: var(--color-brand-orange);
  color: var(--foreground);
  text-align: center;
  width: 62%;
  margin: 0 auto;
  padding: 4rem 3rem;
}
.totalcost_sum h4 {margin-bottom: 2rem;}
.totalcost_sum p+p {margin-top: 1.6rem;}
.totalcost_sum__icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.totalcost_sum__icons li {
  width: 4.5rem;
}
.totalcost_close {
  text-align: center;
  border-bottom: 1px solid var(--color-brand-orange);
  margin-top: 3rem;
  padding-bottom: 8rem;
}

/* =========================================================
   FLOW
========================================================= */
.flow_slider {
  width: 100%;
}
/* ネイティブ横スクロール */
.flow_track {
  display: flex;
  gap: 1.6rem;
  align-items: stretch;
  overflow-x: auto;
  padding: 0 var(--cnt-l-inset);
  scrollbar-width: none;
  cursor: grab;
}
.flow_track::-webkit-scrollbar {display: none;}
.flow_track.is-dragging {cursor: grabbing; user-select: none;}

.flow_bar {
  position: relative;
  width: min(90%, var(--cnt-l-max));
  margin: 3.2rem auto 0;
  height: .6rem;
  background: var(--color-grad-mid);
  border-radius: 100px;
  cursor: pointer;
}
.flow_bar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-brand-orange);
  border-radius: 100px;
  cursor: grab;
}
.flow_bar__thumb:active {cursor: grabbing;}
.flow_card {
  flex: 0 0 30rem;
  background: var(--white);
  padding: 3rem 2.8rem 4rem;
}
.flow_card__ttl {margin-bottom: 2rem;}
.flow_card__tel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  color: var(--color-brand-orange-deep);
}
.flow_card__tel .c_label {color: var(--color-brand-orange-deep);}
.flow_card__tel a {display: inline; color: inherit;}

/* =========================================================
   ACCESS
========================================================= */
.access_map iframe {
  width: 100%;
  height: 55rem;
}
.access_wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: center;
  padding: 8rem 0 10rem;
}
.access_info__logo {
  width: 34rem;
  margin-bottom: 3.6rem;
}
.access_info .ja_p_l {margin-bottom: 2rem;}
.access_info__link {margin-top: 2.4rem;}
.access_info__link a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
  transition: opacity .4s;
}
.access_info__link a:hover {opacity: .6;}

/* =========================================================
   CONTACT
========================================================= */
#home_contact {
  position: relative;
  padding: 10rem 0 12rem;
}
#home_contact:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--white);
}
.contact_ttl {
  text-align: center;
  color: var(--color-brand-orange);
  margin-bottom: 5rem;
}
.contact_ttl .en:before,
.contact_ttl .en:after {
  content: '';
  display: inline-block;
  width: .45em;
  height: 1.18em;
  vertical-align: -.24em;
  background-color: currentColor;
  -webkit-mask: url('img/contact_bracket.svg') center / contain no-repeat;
  mask: url('img/contact_bracket.svg') center / contain no-repeat;
}
.contact_ttl .en:before { margin-right: .4em; }
.contact_ttl .en:after  { margin-left: .4em; transform: scaleX(-1); }
.contact_lead {
  text-align: center;
  margin-bottom: 7rem;
}
.contact_cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  margin: 0 auto;
}
.contact_col {
  border-left: 1px solid var(--color-brand-orange);
  padding: 1rem 4rem 2rem;
}
.contact_cols > .contact_col+.contact_col {
  border-right: 1px solid var(--color-brand-orange);
}
.contact_col .c_label_plain {
  color: var(--color-brand-orange-deep);
  margin-bottom: 3rem;
}
.contact_col__body {text-align: center;}
.contact_col__body .ja_p_l {margin-bottom: 1.2rem;}
.contact_tel {color: var(--color-brand-orange-deep);}
.contact_tel a {color: inherit; display: inline;}
.contact_note {
  color: var(--color-brand-orange-deep);
  margin-top: 1.6rem;
}

/* =========================================================
   footer
========================================================= */
#footer {
  background: var(--color-brand-orange);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.footer_inner {position: relative;}
.footer_head {
  position: relative;
  padding: 4rem 3rem 0;
  z-index: 2;
}
.footer_head__left {position: absolute; top: 4rem; left: 3rem;}
.footer_head .ja_p_l {color: var(--foreground);margin-left: 3.2rem;}
.footer_pagetop {margin-bottom: 3rem;}
.footer_pagetop a {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--white);
  transition: opacity .4s;
}
.footer_pagetop a:hover {opacity: .7;}
.footer_navi {
  position: absolute;
  top: 4rem;
  right: 3rem;
}
.footer_company {
  position: relative;
  isolation: isolate;
  margin-top: 11vh;
  padding: 6vh 0 0;
  text-align: center;
  background: url('img/sky_concept_poster.webp') center / cover no-repeat;
  clip-path: ellipse(90% 100% at 50% 100%);
}
.footer_company .ja_p {width: 38%;margin: 0 auto 3rem;text-align: left;}
.footer_company .c_label {display: block; margin-bottom: 4rem;}
.footer_company__logo {margin-bottom: 4rem;margin-left: -2rem;}
.footer_company__logo img {width:24rem;}
.footer_company__link a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .6em;
  transition: opacity .4s;
  margin-right: -3rem;
}
.footer_company__link a:hover {opacity: .7;}
.footer_copy {
  text-align: right;
  padding: 12rem 3rem 3vh 0;
}
.footer_privacy {
  display: inline;
  color: inherit;
  margin-right: 2.4rem;
  transition: opacity .4s;
}
.footer_privacy:hover {opacity: .7;}