@charset "utf-8";
/* =========================================================
   plan/css/style.css
   下層ページ「プラン＆区画図（PLAN & FREE PLAN）」固有スタイル

   下層MV / リード / 区画図/
   区画特徴/ プラン（タブ切り替え）/ ページアップ

   ※ bgxx.png は背景画像（CSS background）として配置
   ※ PC はカンプ幅 1280px を基準に .inner（1280px）内へ絶対配置
     SP（〜768px）は縦積みのフロー組みに切り替え
   ========================================================= */

:root{
  /* 本文用（カンプ準拠：角ゴシック系） */
  --font-txt: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic,
              'Noto Sans JP', sans-serif;
  --sumi:   #42210B;   /* 本文・見出しの茶（カンプ実測） */
  --c-nat:  #64BEA6;   /* NATURE キャッチ */
  --c-edu:  #F2A398;   /* EDUCATION キャッチ */
  --c-fut:  #77CAEB;   /* FUTURE キャッチ */

  /* カンプ幅1280pxの1pxに相当する可変単位。
     1280px未満＝1px（等倍）／1280px超＝画面幅に比例／1920px以上＝1.5倍で上限 */
  --u: clamp(1px, 0.078125vw, 1.5px);
}

/* =========================================================
   共通ラッパ
   ========================================================= */
/* ヘッダー（h84px・sticky）にMVを潜り込ませる */
.page{
  position:relative;
  margin-top:calc(var(--u) * -84);
  background:#fff;
  overflow-x:clip;   /* 装飾のはみ出しで横スクロールさせない */
}

/* アンカーリンク（カテゴリーナビ）：sticky ヘッダー分の余白を確保 */
html{ scroll-behavior:smooth; }
.loc__block{ scroll-margin-top:calc(var(--u) * 100); }

/* 本文ラッパ（幅100%）
   ※カンプ幅1280pxを基準に、中央から calc() でオフセットして配置し、
     端で切れている画像・装飾はその端（left:0 / right:0）に寄せる */
.inner{
  position:relative;
  z-index:3;
  width:100%;
  margin:0 auto;
}

/* 背景装飾（bgxx.png／CSS背景・本文の背面／波より前面）
   ※画像サイズは原寸のまま。位置のみカンプ比率に合わせて可変 */
.deco{
  position:absolute;
  z-index:2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
/* 波形の区切り（全幅） */
.wave{
  position:absolute;
  left:0;
  z-index:1;
  width:100%;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
}
/* 円形写真の背面に敷く白帯（全幅） */
.band{
  position:absolute;
  left:0;
  z-index:2;
  width:100%;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
}

/* =========================================================
   ① 下層ページMV
   ========================================================= */
.sub-mv{
  position:relative;
  z-index:0;
  line-height:0;
}
.sub-mv > img{ width:100%; }
/* ページタイトル：MV内 上から54.3%（カンプ y≈247 / MV高さ455）・幅421px（1280基準） */
.sub-mv__tit{
  position:absolute;
  left:50%;
  top:54.3%;
  width:32.9%;
  max-width:calc(var(--u) * 421);
  transform:translate(-50%,-50%);
  margin:0;
  line-height:0;
}
.sub-mv__tit img{ width:100%; }

/* =========================================================
   ② リード（白地）
   ========================================================= */
.access,
.intro{ position:relative; background:#fff; }

.intro{ padding:calc(var(--u) * 73) 0 calc(var(--u) * 161); }
.intro__tit{ text-align:center; line-height:0; }
.intro__tit img{ display:inline-block; }
.intro__text{
  margin-top:calc(var(--u) * 42);
  font-family:var(--font-txt);
  font-weight:600;
  font-size:calc(var(--u) * 17);
  line-height:calc(var(--u) * 42.5);
  letter-spacing:.13em;
  text-indent:.13em;
  text-align:center;
  color:var(--sumi);
}
/* 装飾（カンプ：ピンクのブロブ＋ドット／ベージュのブロブ＋ピンク斜線） */
.d-in1{ top:calc(var(--u) * -39); left:0;  width:272px; aspect-ratio:272/407; background-image:url(../img/bg01.png); }
.d-in2{ top:calc(var(--u) * 752); right:0;  width:216px; aspect-ratio:216/492; background-image:url(../img/bg04.png); }

/* =========================================================
   ③ 3つの魅力（NATURE / EDUCATION / FUTURE）
   カンプ：ベージュ地 y955〜2816（上下に波）
   ========================================================= */
.charm{
  position:relative;
  background:var(--beige);
  padding:calc(var(--u) * 23) 0 calc(var(--u) * 70);
}
.wave--charm-top{
top:calc(var(--u) * -108);
height:calc(var(--u) * 109);
background-image:url(../img/bg03.png);
background-size:contain;
background-position:top 5px center;
}
.wave--charm-btm{
bottom:calc(var(--u) * -118);
height:calc(var(--u) * 118);
background-image:url(../img/bg10.png);
background-size:contain;
background-position:bottom 10px center;
}

/*浮遊飾り一覧*/
.d-ch1{ top:calc(var(--u) * 390);  left:calc(50% - (var(--u) * 469));  width:239px; aspect-ratio:239/236; background-image:url(../img/bg04.png); }
.d-ch2{ top:calc(var(--u) * 280);  right:calc(var(--u) * 9); width:186px; aspect-ratio:186/186; background-image:url(../img/bg05.png); }
.d-ch3{ top:calc(var(--u) * 990); left:calc(var(--u) * 249);   width:240px; aspect-ratio:240/240; background-image:url(../img/bg09.png); }
.d-ch4{ top:calc(var(--u) * 1310); left:calc(var(--u) * 0); width:401px; aspect-ratio:401/419; background-image:url(../img/bg35.png); }
.d-ch5{ top:calc(var(--u) * 1680); right:calc(var(--u) * 240);  width:240px; aspect-ratio:240/240; background-image:url(../img/bg06.png); }
.d-ch6{ top:calc(var(--u) * 120); left:calc(var(--u) * 190); width:239px; aspect-ratio:239/236; background-image:url(../img/bg07.png); }
.d-ch7{ top:calc(var(--u) * 490); right:calc(var(--u) * 190); width:204px; aspect-ratio:204/204; background-image:url(../img/bg14.png); }
.d-ch8{ top:calc(var(--u) * 674); left:calc(var(--u) * 90); width:240px; aspect-ratio:240/240; background-image:url(../img/bg27.png); }
.d-ch9{ top:calc(var(--u) * 974); right:calc(var(--u) * 90); width:186px; aspect-ratio:186/186; background-image:url(../img/bg06.png); }
.d-ch10{ top:calc(var(--u) * 1250); left:calc(var(--u) * 90); width:240px; aspect-ratio:240/240; background-image:url(../img/bg07.png); }

.charm__item{ position:relative; }
.charm__item--nature{    height:calc(var(--u) * 521); }
.charm__item--education{ height:calc(var(--u) * 530); margin-top:calc(var(--u) * 104); }
.charm__item--future{    height:calc(var(--u) * 526); margin-top:calc(var(--u) * 90); }

/* 英字（白ヌキの大きな装飾文字）：カンプ同様に写真より前面 */
.charm__en{
  position:absolute;
  z-index:2;
  line-height:0;
}
.charm__en img{ width:100%; }
.charm__item--nature    .charm__en{ top:calc(var(--u) * 15); right:0; width:calc(var(--u) * 682); }
.charm__item--education .charm__en{ top:calc(var(--u) * 13); left:0;  width:calc(var(--u) * 1038); }
.charm__item--future    .charm__en{ top:calc(var(--u) * 18); right:0; width:calc(var(--u) * 634); }

/* 写真（ブロブ型・切り抜き済PNG） */
.charm__img{
  position:absolute;
  z-index:1;
  top:0;
  line-height:0;
}
.charm__img img{ width:100%; }
.charm__item--nature    .charm__img{ left:0;  width:calc(var(--u) * 579); }
.charm__item--education .charm__img{ right:0; width:calc(var(--u) * 579); }
.charm__item--future    .charm__img{ left:0;  width:calc(var(--u) * 577); }

/* テキストカラム（幅470px）：英字より前面 */
.charm__body{
  position:absolute;
  z-index:3;
  top:calc(var(--u) * 114);
  width:calc(var(--u) * 480);
}
.charm__item--nature    .charm__body,
.charm__item--future    .charm__body{ left:calc(50% - (var(--u) * 23)); }
.charm__item--education .charm__body{ left:calc(50% - (var(--u) * 440)); }

.charm__catch{
  font-family:var(--font-jp);
  font-weight:700;
  font-size:calc(var(--u) * 32);
  line-height:1;
  letter-spacing:.06em;
  white-space:nowrap;
}
.charm__item--nature    .charm__catch{ color:var(--c-nat); }
.charm__item--education .charm__catch{ color:var(--c-edu); }
.charm__item--future    .charm__catch{ color:var(--c-fut); letter-spacing:.027em; }

.charm__text{
  margin-top:calc(var(--u) * 38);
  font-family:var(--font-txt);
  font-weight:600;
  font-size:calc(var(--u) * 17);
  line-height:calc(var(--u) * 42);
  letter-spacing:.05em;
  color:var(--sumi);
}
/* 字送りはカンプの実測値に合わせてブロックごとに調整 */
.charm__item--nature    .charm__text{ letter-spacing:.097em; }
.charm__item--education .charm__text{ letter-spacing:.014em; }
.charm__btns{ margin-top:calc(var(--u) * 27); line-height:0; }
.charm__item--education .charm__btns{ margin-top:calc(var(--u) * 32); }
.charm__item--future    .charm__btns{ margin-top:calc(var(--u) * 33); }

/* =========================================================
   ④ ACCESS（白地／カンプ y2816〜4592）
   ========================================================= */
.access{ padding:calc(var(--u) * 239) 0 calc(var(--u) * 193); }

.d-ac1{ top:calc(var(--u) * 66);   left:0;   width:283px; aspect-ratio:283/376; background-image:url(../img/bg12.png); }
.d-ac2{ top:calc(var(--u) * 138);  right:calc(var(--u) * 168);  width:195px; aspect-ratio:195/144; background-image:url(../img/bg11.png); }
.d-ac3{ top:calc(var(--u) * 1500); right:calc(var(--u) * 2);  width:191px; aspect-ratio:191/203; background-image:url(../img/bg14.png); }
.d-ac4{ top:calc(var(--u) * 285);  right:0; width:179px; aspect-ratio:179/495; background-image:url(../img/bg13.png); }
.d-ac5{ top:calc(var(--u) * 1384); left:0;   width:389px; aspect-ratio:389/370; background-image:url(../img/bg15.png); }
.d-ac6{ top:calc(var(--u) * 30); left:0;   width:240px; aspect-ratio:240/240; background-image:url(../img/bg07.png); }

.access__tit{ text-align:center; line-height:0; }
.access__tit img{ display:inline-block; }

/* 路線図＋2wayアクセス */
.access__route{
  position:relative;
  height:calc(var(--u) * 308);
  margin-top:calc(var(--u) * 85);
}
.access__map img{ width:calc(var(--u) * 523); }
.access__info img{ width:calc(var(--u) * 399); }
.access__map{ position:absolute; top:0;    left:calc(50% - (var(--u) * 513)); line-height:0; }
.access__info{ position:absolute; top:calc(var(--u) * 24); left:calc(50% + (var(--u) * 42)); line-height:0; }

/* 主要駅写真（全幅・3分割） */
.access__photos{
  position:relative;
  z-index:2;
  display:flex;
  margin-top:calc(var(--u) * 58);
  line-height:0;
}
.access__photos img{ width:33.3333%; height:auto; }

/* 所要時間 */
.access__times{
  display:flex;
  justify-content:center;
  gap:calc(var(--u) * 73);
  margin-top:calc(var(--u) * 63);
  line-height:0;
}
.access__note{
  width:calc(var(--u) * 850);
  max-width:94%;
  margin:calc(var(--u) * 38) auto 0;
  font-family:var(--font-txt);
  font-weight:600;
  font-size:calc(var(--u) * 13);
  line-height:calc(var(--u) * 17);
  letter-spacing:0;
  color:var(--sumi);
}

/* =========================================================
   ⑤ LOCATION（ベージュ地／カンプ y4592〜10518）
   ========================================================= */
.loc{
  position:relative;
  background:var(--beige);
  padding:calc(var(--u) * 119) 0 0;
}
.wave--loc-top{
top:calc(var(--u) * -110);
height:calc(var(--u) * 111);
background-image:url(../img/bg18.png);
background-size:contain;
background-position:top center;
}
.wave--loc-btm{
bottom:calc(var(--u) * -102);
height:calc(var(--u) * 102);
background-image:url(../img/bg33.png);
background-size:contain;
background-position:bottom 10px center;
}

/* 円形写真の背面の白帯 */
.band--shop{
top:calc(var(--u) * 1758);
top:29.2%;
height:calc(var(--u) * 173);
background-image:url(../img/bg22.png);
}
.band--edu{
top:calc(var(--u) * 2866);
top:48.55%;
height:calc(var(--u) * 256);
background-image:url(../img/bg25.png);
}
.band--med{
top:calc(var(--u) * 4061);
top:69.4%;
height:calc(var(--u) * 165);
background-image:url(../img/bg29.png);
}
.band--pub{
top:calc(var(--u) * 5291);
top:90.85%;
height:calc(var(--u) * 168);
background-image:url(../img/bg32.png);
}
@media (max-width:1200px){
.band--shop{
background-image:none;
}
.band--edu{
background-image:none;
}
.band--med{
background-image:none;
}
.band--pub{
background-image:none;
}


}


.d-pl1{ top:calc(var(--u) * 270); right:calc(var(--u) * 100); width:227px; aspect-ratio:227/226; background-image:url(../img/bg02.png); }


.d-lo1{ top:calc(var(--u) * 37);  left:0;   width:188px; aspect-ratio:188/237; background-image:url(../img/bg16.png); }
.d-lo2{ top:calc(var(--u) * 164); right:calc(var(--u) * 24); width:186px; aspect-ratio:186/186; background-image:url(../img/bg06.png); }
.d-lo3{ top:calc(var(--u) * 888); right:calc(var(--u) * 28); width:187px; aspect-ratio:187/186; background-image:url(../img/bg19.png); }

.loc__tit{ text-align:center; line-height:0; }
.loc__tit img{ display:inline-block; }


/* 区画図 */
.pl_plan_plotmap {
  max-width: 1013px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 60px;
}

.pl_plan_plotmap img {
  width: 100%;
}

.pl_plan_plotmap::before{
  position: absolute;
    content: '';
    top:40%;
    left: -50%;
    width: 100%;
    height: 30%;
    background: #F5F2E9;
    z-index: -1;
}

.pl_plan_plotmap::after{
  position: absolute;
    content: '';
    top:40%;
    right: -50%;
    width: 100%;
    height: 30%;
    background: #F5F2E9;
    z-index: -1;
}


/* 区画図 6つの特徴*/

.plan_6_detail {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 880px;
  width: 100%;
  margin: 100px auto 100px;
}

.plan_6_detail li {
  width: 32%;
  max-width: 273px;
  flex-shrink: 0;
  border: solid 3px #F7B86A;
  background-color: #fff;
  border-radius: 16px;
  position: relative;
  padding-top: 100px;/*icon高さと余白*/
  text-align: center;
}

.plan_6_detail li:nth-child(-n+3){
  margin-bottom:120px;
}

.plan_6_detail_icon {
  width: 100%;
  max-width: 144px;
  position: absolute;
  top:-70px;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.plan_6_detail_h3 {
  color: #F7B86A;
  font-size: 168%;
  /*font-family: var(--font-txt);*/
  font-family: var(--font-jp);
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  margin-bottom: 20px;
}

.plan_6_detail_h3::after {
  content: '';
  width: 31px;
  height: 2px;
  display: inline-block;
  background-color: #F7B86A;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 15px)
}

.plan_6_detail_read {
  /*font-family: var(--font-txt);*/
  font-family: var(--font-jp);
  font-weight: 600;
  padding: 0 19px 30px;
}


/* タブ */
.tab-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 0 20px;
    max-width: 100%;
    margin-top: 60px;
}

.tab-2 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    max-width: 194px;
    padding: .6em 1em;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    border-top: solid 2px #64BEA6;
    border-right: solid 2px #64BEA6;
    border-left: solid 2px #64BEA6;
    color: #64BEA6;
    font-size: 140%;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
}

.tab-2 > label:hover {
    background-color: #fff;
    border-top: solid 2px #64BEA6;
    border-right: solid 2px #64BEA6;
    border-left: solid 2px #64BEA6;
}

.tab-2 input {
    display: none;
}

.tab-2 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
    border-top: solid 2px #64BEA6;
}

.tab-2 label:has(:checked) {
    background-color: #64BEA6;
    color: #fff;
}

.tab-2 label:has(:checked) + div {
    display: block;
    background: var(--beige);
    position: relative;/*浮遊物のため*/
}


.tokushu_more {
    writing-mode: vertical-rl;/*縦書き*/
    font-size: 45%;
    margin-bottom: -2px;
}

.tokushu_number {
  font-size: 1.3em;
}


/*プラン説明*/

.plan_read01 {
  width: 100%;
}

.plan_read01 img {
  width: 100%;
}

/*各プランの詳細　タブ部分*/
.plan_each_wrap {
  max-width: 752px;
  margin: 6% auto 0;
  text-align: center;
  position: relative;/*浮遊飾り*/
  z-index: 10;
}

.plan_zumen {
  text-align: center;
  margin: 0 auto;
  padding: 3% 0;
  max-width: 650px;
  position: relative;/*浮遊飾り調整*/
  z-index: 9;
}

.plan_each_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  position: relative;/*浮遊飾り*/
  z-index: 10;
}

.plan_each_flex li {
  width: 49%;
  max-width: 365px;
  flex-shrink: 0;
  border: solid 2px #4eb197;
  background-color: #fff;
  margin-bottom: 37px;
}

.plan_each_read {
  margin: 30px;
}

.plan_each_flex li img {
  width: 100%;
}

.plan_green_arrow {
  max-width: 15px;
  margin: 0 auto;
}



/* Googleマップ（全幅） */
.loc__map{
  position:relative;
  z-index:2;
  width:100%;
  margin-top:calc(var(--u) * 69);
  aspect-ratio:1280/545;
  line-height:0;
  background:#e9e6dd;
}
.loc__map iframe{ display:block; width:100%; height:100%; border:0; }

/* カテゴリーナビ */
.loc__nav{
  display:flex;
  justify-content:center;
  margin-top:calc(var(--u) * 65);
}
.loc__nav li{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:calc(var(--u) * 119);
  padding:0 calc(var(--u) * 41) calc(var(--u) * 5);
  border-left:calc(var(--u) * 1) solid var(--sumi);
}
.loc__nav li:last-child{ border-right:calc(var(--u) * 1) solid var(--sumi); }
.loc__nav a{ display:block; line-height:0; }

/* ---------- 各カテゴリーブロック ---------- */
.loc__block{ position:relative; }
.loc__block--shop{ margin-top:calc(var(--u) * 115); height:calc(var(--u) * 1041); }
.loc__block--edu{  margin-top:calc(var(--u) * 132); height:calc(var(--u) * 956); }
.loc__block--med{  margin-top:calc(var(--u) * 170); height:calc(var(--u) * 1050); }
.loc__block--pub{  margin-top:calc(var(--u) * 165); height:calc(var(--u) * 1052); }

/* 写真＋見出し＋リード */
.loc__hero{ position:relative; }
.loc__block--shop .loc__hero{ height:calc(var(--u) * 482); }
.loc__block--edu  .loc__hero{ height:calc(var(--u) * 501); }
.loc__block--med  .loc__hero{ height:calc(var(--u) * 486); }
.loc__block--pub  .loc__hero{ height:calc(var(--u) * 501); }

.loc__photo{ position:absolute; z-index:1; line-height:0; }
.loc__photo img{ width:100%; }
.loc__block--shop .loc__photo{ top:calc(var(--u) * -4); right:0; width:calc(var(--u) * 671); }
.loc__block--edu  .loc__photo{ top:0;   left:0;  width:calc(var(--u) * 672); }
.loc__block--med  .loc__photo{ top:0;   right:0; width:calc(var(--u) * 671); }
.loc__block--pub  .loc__photo{ top:0;   left:0;  width:calc(var(--u) * 672); }

.loc__label,
.loc__en,
.loc__text{ position:absolute; z-index:2; }

.loc__label{
  font-family:var(--font-txt);
  font-weight:600;
  font-size:calc(var(--u) * 18);
  line-height:1;
  letter-spacing:.08em;
  color:var(--sumi);
}
.loc__en{ line-height:0; }
.loc__block--shop .loc__en img{ width:calc(var(--u) * 421); }
.loc__block--edu  .loc__en img{ width:calc(var(--u) * 632); }
.loc__block--med  .loc__en img{ width:calc(var(--u) * 757); }
.loc__block--pub  .loc__en img{ width:calc(var(--u) * 728); }
.loc__text{
  width:calc(var(--u) * 400);
  font-family:var(--font-txt);
  font-weight:600;
  font-size:calc(var(--u) * 16);
  line-height:calc(var(--u) * 42);
  letter-spacing:0;
  color:var(--sumi);
}
/* 買物施設（左組み） */
.loc__block--shop .loc__label{ top:calc(var(--u) * 44);  left:calc(50% - (var(--u) * 440)); }
.loc__block--shop .loc__en{    top:calc(var(--u) * 90);  left:calc(50% - (var(--u) * 439)); }
.loc__block--shop .loc__text{  top:calc(var(--u) * 196); left:calc(50% - (var(--u) * 440)); }
/* 教育施設（右組み） */
.loc__block--edu .loc__label{ top:calc(var(--u) * 51);  right:calc(50% - (var(--u) * 437)); }
.loc__block--edu .loc__en{    top:calc(var(--u) * 80);  left:calc(50% - (var(--u) * 175)); }
.loc__block--edu .loc__text{  top:calc(var(--u) * 203); left:calc(50% + (var(--u) * 73)); letter-spacing:.046em; }
/* 医療機関・金融機関（左組み） */
.loc__block--med .loc__label{ top:calc(var(--u) * 48);  left:calc(50% - (var(--u) * 440)); }
.loc__block--med .loc__en{    top:calc(var(--u) * 77);  left:calc(50% - (var(--u) * 458)); }
.loc__block--med .loc__text{  top:calc(var(--u) * 200); left:calc(50% - (var(--u) * 440)); letter-spacing:.038em; }
/* 公共機関・その他（右組み） */
.loc__block--pub .loc__label{ top:calc(var(--u) * 50);  right:calc(50% - (var(--u) * 433)); }
.loc__block--pub .loc__en{    top:calc(var(--u) * 80);  left:calc(50% - (var(--u) * 271)); }
.loc__block--pub .loc__text{  top:calc(var(--u) * 198); left:calc(50% + (var(--u) * 73)); letter-spacing:.04em; }

/* ヒーロー内のイラスト装飾 */
.d-sh2{ top:calc(var(--u) * 307); left:calc(50% - (var(--u) * 504)); width:434px; aspect-ratio:434/193; background-image:url(../img/bg21.png); }
.d-ed2{ top:calc(var(--u) * 279); left:calc(50% + (var(--u) * 7)); width:442px; aspect-ratio:442/161; background-image:url(../img/bg24.png); }
.d-me2{ top:calc(var(--u) * 297); left:calc(50% - (var(--u) * 464)); width:400px; aspect-ratio:400/187; background-image:url(../img/bg28.png); }
.d-pu2{ top:calc(var(--u) * 326); left:calc(50% + (var(--u) * 56)); width:472px; aspect-ratio:472/158; background-image:url(../img/bg31.png); }
/* ブロック脇のドット装飾 */
.d-sh1{ top:calc(var(--u) * 75);  left:calc(var(--u) * 36);   width:239px; aspect-ratio:239/236; background-image:url(../img/bg20.png); }
.d-ed1{ top:calc(var(--u) * 76);  right:calc(var(--u) * 21); width:239px; aspect-ratio:239/236; background-image:url(../img/bg23.png); }
.d-me1{ top:calc(var(--u) * 67);  left:calc(var(--u) * 39);   width:239px; aspect-ratio:239/237; background-image:url(../img/bg27.png); }
.d-pu1{ top:calc(var(--u) * 112); right:calc(var(--u) * 22); width:239px; aspect-ratio:239/224; background-image:url(../img/bg30.png); }

/* 円形写真（3カラム／ピッチ268px・中央寄せ） */
.loc__items{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,calc(var(--u) * 268));
  justify-content:center;
  justify-items:center;
  align-items:start;
  line-height:0;
}
.loc__items img{ max-width:none; }

/* 施設リスト（上下に破線） */
.loc__lists{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:calc(var(--u) * 36);
  padding-bottom:calc(var(--u) * 36);
  line-height:0;
}
.loc__lists::before,
.loc__lists::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:calc(var(--u) * 812);
  max-width:100%;
  height:calc(var(--u) * 4);
  background:url(../img/bg26.png) no-repeat center/100% 100%;
}
.loc__lists picture{ display:block; line-height:0; }
.loc__lists::before{ top:0; }
.loc__lists::after{ bottom:0; }

.loc__block--shop .loc__items{ margin-top:0; }
.loc__block--shop .loc__lists{
margin-top:calc(var(--u) * 69);
/*height:calc(var(--u) * 191);*/
gap:calc(var(--u) * 47);
}
.loc__block--edu .loc__lists{
margin-top:calc(var(--u) * 69);
/*height:calc(var(--u) * 87);*/
gap:calc(var(--u) * 118);
}
.loc__block--med .loc__lists{
margin-top:calc(var(--u) * 74);
/*height:calc(var(--u) * 191);*/
gap:calc(var(--u) * 63);
}
.loc__block--pub .loc__lists{
margin-top:calc(var(--u) * 51);
/*height:calc(var(--u) * 136);*/
gap:calc(var(--u) * 59);
}

.loc__note{
  position:relative;
  z-index:2;
  margin-top:calc(var(--u) * 34);
  text-align:center;
  line-height:0;
}
.loc__note img{ display:inline-block; }

/* =========================================================
   ⑥ ページアップ
   ========================================================= */
.pageup{
  position:relative;
  background:#fff;
  padding:calc(var(--u) * 213) 0 calc(var(--u) * 103);
  text-align:center;
  line-height:0;
}
.pageup a{ display:inline-block; transition:transform .2s; }
.pageup a:hover{ transform:translateY(calc(var(--u) * -4)); }
.pageup img{ width:calc(var(--u) * 121); margin:0 auto; }

/* ---------- フッター（カンプ準拠の微調整） ---------- */
.footer__addr{ line-height:1.25; }
.footer__copy{ color:#497889; }
.nb{ white-space:nowrap; }
/* カンプの改行を再現するための br（SPでは解除） */
br.pc{ display:inline; }

/* =========================================================
   スマートフォン（〜768px）
   ・PCの絶対配置を解除し、縦積みのフロー組みへ
   ・横幅は % / vw を基本とする
   ========================================================= */
@media (max-width:768px){

  /* ---- ベース ---- */
  .page{ margin-top:0; }
  .inner{ width:100%; }
  .loc__block{ scroll-margin-top:74px; }
  br.pc{ display:none; }
  /* 背景装飾・白帯はカンプSP同様に非表示 */
  .deco{ display:none; }
  .band{ display:none; }

  /* ---- ① MV ---- */
  .sub-mv__tit{
    top:53.3%;
    width:46.4%;   /* カンプSP：幅297/640 */
    max-width:421px;
  }

  /* ---- ② リード ---- */
  /* カンプSP（幅640）比率：MV下68px → 見出し / 本文下148px → ベージュ */
  .intro{ padding:10.6vw 0 10vw; }
  .intro__tit img{ width:85.5%; }
  .intro__text{
    margin-top:6.5vw;
    padding:0 6%;
    font-size:15px;
    line-height:2.4;
    letter-spacing:.08em;
    text-indent:.08em;
  }

  /* ---- ③ 3つの魅力 ---- */
  .charm{ padding:11.4vw 0 9vw; }
  .wave--charm-top{ top:-8.5vw; }
  .wave--charm-btm{ bottom:-9.2vw; }

  .charm__item,
  .charm__item--nature,
  .charm__item--education,
  .charm__item--future{ height:auto; padding-top:1.7vw; }
  .charm__item--education,
  .charm__item--future{ margin-top:25.5vw; }

  /* 英字装飾：写真の背面に全幅で敷く */
  .charm__en,
  .charm__item--nature .charm__en,
  .charm__item--education .charm__en,
  .charm__item--future .charm__en{
    position:absolute;
    top:0;
    left:-6%;
    right:auto;
    width:112%;
    max-width:none;
  }
  .charm__en img{ width:100%; }

  /* 写真：全幅 */
  .charm__img,
  .charm__item--nature .charm__img,
  .charm__item--education .charm__img,
  .charm__item--future .charm__img{
    position:relative;
    top:auto; left:auto; right:auto;
    width:100%;
  }
  .charm__img img{ width:100%; }

  .charm__body,
  .charm__item--nature .charm__body,
  .charm__item--education .charm__body,
  .charm__item--future .charm__body{
    position:static;
    top:auto; left:auto;
    width:100%;
    padding:0 6.25%;
    margin-top:20vw;
  }
  .charm__catch,
  .charm__item--future .charm__catch{
    padding-left:6%;
    font-size:min(5.2vw,33px);
    letter-spacing:.03em;
  }
  .charm__text,
  .charm__item--nature .charm__text,
  .charm__item--education .charm__text{
    padding-left:6%;
    margin-top:6.4vw;
    font-size:15px;
    line-height:2.4;
    letter-spacing:.06em;
  }
  .charm__btns,
  .charm__item--education .charm__btns,
  .charm__item--future .charm__btns{
    margin-top:9vw;
    text-align:center;
  }
  .charm__btns img{ width:100%; }

  /* ---- ④ ACCESS ---- */
  .access{ padding:14vw 0 12vw; }

  .access__tit img{ width:88%; }

  .access__route{
    position:static;
    height:auto;
    margin-top:8vw;
    padding:0 5%;
  }
  .access__map,
  .access__info{ position:static; top:auto; left:auto; }
  .access__map img{ width:100%; }
  .access__info{ margin-top:5vw; }
  .access__info img{ width:100%; }

  .access__photos{ margin-top:8vw; }

  .access__times{
    flex-direction:column;
    align-items:center;
    gap:5vw;
    margin-top:8vw;
    padding:0 11%;
  }
  /* 2点は元画像の縦寸が同じ（249px）ため、幅比を保つと文字サイズが揃う */
  .access__times img{ width:100%; max-width:419px; }
  /*.access__times img:first-child{ width:85.4%; max-width:358px; }*/

  .access__note{
    width:auto;
    max-width:none;
    margin-top:6vw;
    padding:0 6%;
    font-size:11px;
    line-height:1.8;
  }

  /* ---- ⑤ LOCATION ---- */
  .loc{ padding:0vw 0 10vw; }/*12vw 0 10vw*/
  .wave--loc-top{ top:-8.7vw; }
  .wave--loc-btm{ bottom:-8vw; }
  .loc__tit img{ width:90%; }

  .loc__map{ margin-top:7vw; aspect-ratio:4/3; }

  /* カテゴリーナビ：2列×2段 */
  .loc__nav{ flex-wrap:wrap; margin-top:8vw; }
  .loc__nav li{
    width:50%;
    height:auto;
    padding:18px 4%;
    border-left:0;
    border-bottom:1px dotted var(--sumi);
  }
  .loc__nav li:nth-child(odd){ border-right:1px dotted var(--sumi); }
  .loc__nav li:last-child{ border-right:0; }
  .loc__nav li:nth-child(-n+2){ border-top:1px dotted var(--sumi); }
  .loc__nav img{ max-height:60px; width:auto; }

  /* ブロック：縦積み */
  .loc__block,
  .loc__block--shop,
  .loc__block--edu,
  .loc__block--med,
  .loc__block--pub{ height:auto; margin-top:16vw; }

  /* SPは「ラベル → 英字 → 写真 → リード」の自然な縦積み（HTMLの記述順） */
  .loc__hero,
  .loc__block--shop .loc__hero,
  .loc__block--edu  .loc__hero,
  .loc__block--med  .loc__hero,
  .loc__block--pub  .loc__hero{ height:auto; }

  .loc__label,
  .loc__en,
  .loc__text,
  .loc__block--shop .loc__label,.loc__block--shop .loc__en,.loc__block--shop .loc__text,
  .loc__block--edu  .loc__label,.loc__block--edu  .loc__en,.loc__block--edu  .loc__text,
  .loc__block--med  .loc__label,.loc__block--med  .loc__en,.loc__block--med  .loc__text,
  .loc__block--pub  .loc__label,.loc__block--pub  .loc__en,.loc__block--pub  .loc__text{
    position:static;
    top:auto; left:auto; right:auto;
    width:auto;
    letter-spacing:.04em;
  }
  .loc__label{ padding:0 6%; font-size:14px; }
  .loc__en{ margin-top:2vw; padding:0 6%; }
  /* 各英字の字面高さが揃うように個別に調整 */
  .loc__en img{ width:82%; max-width:none; }
  .loc__block--shop .loc__en img{ width:76%; }
  .loc__block--edu  .loc__en img{ width:82%; }
  .loc__block--med  .loc__en img{ width:99%; }
  .loc__block--pub  .loc__en img{ width:95%; }
  .loc__photo,
  .loc__block--shop .loc__photo,
  .loc__block--edu  .loc__photo,
  .loc__block--med  .loc__photo,
  .loc__block--pub  .loc__photo{
    position:static;
    top:auto; left:auto; right:auto;
    width:100%;
    margin-top:5vw;
  }
  .loc__photo img{ width:100%; }
  .loc__text{
    margin-top:6vw;
    padding:0 6%;
    font-size:15px;
    line-height:2.2;
  }

  /* 円形写真：2列（3件目は中央） */
  .loc__items{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6vw 4%;
    margin-top:9vw;
    padding:0 4%;
  }
  .loc__items img{ width:46%; max-width:229px; }

  /* 施設リスト */
  .loc__lists,
  .loc__block--shop .loc__lists,
  .loc__block--edu  .loc__lists,
  .loc__block--med  .loc__lists,
  .loc__block--pub  .loc__lists{
    flex-direction:column;
    align-items:center;
    height:auto;
    gap:14px;
    margin-top:9vw;
    padding:24px 6%;
  }
  .loc__lists img{ width:100%; max-width:413px; }
  .loc__lists::before,
  .loc__lists::after{ width:88%; }

  .loc__note{ margin-top:5vw; padding:0 6%; }
  .loc__note img{ width:100%; max-width:583px; }



/* ---- add 区画図---- */

.plan_6_detail {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 90%;
  width: 90%;
  margin: 70px auto 0;
}

.plan_6_detail li {
  width: 48%;
  max-width: 50;
  flex-shrink: 0;
  border: solid 3px #F7B86A;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  padding-top: 50px;/*icon高さと余白*/
  text-align: center;
  margin-bottom:80px;
}

.plan_6_detail li:nth-child(-n+3){
  margin-bottom:80px;
}

.plan_6_detail_h3 {
  font-size: 110%;
}


.plan_6_detail_read {
  font-family: var(--font-txt);
  font-weight: 300;
  padding: 0 10px 30px;
}


/* 区画図 */
.pl_plan_plotmap {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding:20px 10px 0;
}

.plan_6_detail_icon {
  width: 60%;
  max-width: 100px;
  position: absolute;
  top:-50px;
  right: 0;
  left: 0;
  margin: 0 auto;
}



/* タブ */
.tab-2 {
    /*display: flex;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列均等に配置 */
    flex-wrap: wrap;
    /*justify-content:center;*/
    justify-content: space-between;
    gap: 0 10px;
    /*max-width: 90%;*/
    margin: 0px auto 0;
    /* 左右の白余白を打ち消して画面端まで広げる設定 */
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        
        /* 背景色と、内側の余白（コンテンツが画面端にくっつかないよう保護） */
        background-color: #f7f5f0; /* ベージュ */
        padding: 10px 3% 0;          /* 上下と左右に内側余白をつける */
        box-sizing: border-box;

}







.tab-2 > label {
    /*flex: 1 1;*/
    /*width: 45%;*/
    flex-shrink: 0;
    order: -1;
    /*min-width: 70px;
    max-width: 194px;*/
    margin-bottom: 20px;
    padding: .6em .6em;
    border-radius: 10px 10px 10px 10px;
    background-color: #fff;
    border-top: solid 2px #64BEA6;
    border-right: solid 2px #64BEA6;
    border-left: solid 2px #64BEA6;
    border-bottom: solid 2px #64BEA6;/*add*/
    color: #64BEA6;
    font-size: 110%;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
}

.tab-2 > label:hover {
    background-color: #fff;
    border-top: solid 2px #64BEA6;
    border-right: solid 2px #64BEA6;
    border-left: solid 2px #64BEA6;
    border-bottom: solid 2px #64BEA6;/*add*/
}

.tab-2 input {
    display: none;
}

.tab-2 > div {
    display: none;
    width: 100%;
    grid-column: 1 / -1;/* 中身のコンテンツは全幅（1列目から最後）で表示 */
    padding: 1.5em 1em;
    background-color: #fff;
    border-top: none;
}


.tab-2 label:has(:checked) {
    background-color: #64BEA6;
    color: #fff;
}

.tab-2 label:has(:checked) + div {
    display: block;
}


.plan_each_read {
  margin: 10px;
}

.plan_each_flex {
  margin: 5% auto 0;
}

.plan_green_arrow {
  max-width: 15px;
  margin: 0 auto 3%;
}

  /* ---- ⑥ ページアップ ---- */
  .pageup{ padding:16vw 0 10vw; }
  .pageup img{ width:88px; }
}