@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------------
--------------------------------------------------------------------
　　　　　　　　　　　ページ専用css
--------------------------------------------------------------------
------------------------------------------------------------------*/

img {
  display: block;
	max-width: 100%;
  width: 100%;
	height: auto;
}

.pc {display: none;}
.sp {display: block;}

#contents {
  max-width: 4000px;
}

#main{
  /* padding-bottom: 100px; *//* CTAボタン追従用 */
  padding-bottom: 24px;
}

#gosyuin {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #FAF6EF;
    font-size: 1.4rem;
}

#breadcrumbs {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto 20px;
    clear: both;
}

.zen_maru {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.auto_center {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.relative_wrap {position: relative;}
.ib {display: inline-block;}

.mgt4 {margin-top: 4px;}
.mgt8 {margin-top: 8px;}
.mgt16 {margin-top: 16px;}
.mgt24 {margin-top: 24px;}
.mgt32 {margin-top: 32px;}
.mgt48 {margin-top: 48px;}
.mgbM {margin-bottom: 16px;}

.larger {font-size: 1.5em;}
.smaller {font-size: 0.6em;}
.minimum {font-size: 1rem;}
.txt-note,.note__list li{font-size: 1.2rem;}


.sec__wrap {padding: 32px 0 0;}

.bold {
  font-weight: 700;
}

.fcRed {color: #CF010F !important;}
.fcBR {color: #956625 !important;}

/* ------------------------------------------------------------
アコーディオン
------------------------------------------------------------ */
.acc__body {
  display: none;
	color: #333;
  font-size: 1.2rem;
  border: 1px solid var(--primaly-color);
  padding: 12px 0px;
}
.acc__btn {
	font-weight: bold;
  width: 100%;
  margin: 0 auto;
  color: #fff;
	background-color: var(--primaly-color);
  position: relative;
  padding: 8px;
	cursor: pointer;
	transition: all 0.3s;
  text-align: center;
  line-height: 1.2;
}
.acc__btn span {
	position: absolute;
	background-color: #5D9B75;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
.acc__btn span::before, 
.acc__btn span::after {
    content: "";
    background-color: #fff;
    position: absolute;
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transition: transform 0.3s;
}
.acc__btn span::before {transform: translate(-50%,-50%) rotate(90deg);}
.acc__btn.open span::before {transform: translate(-50%,-50%);}

@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .acc__body {
    font-size: 1.4rem;
    padding: 32px 64px;
  }
  .sec__wrap {
    padding: 64px 0 0;
}
  
}

/*------------------------------------------------------------------
--------------------------------------------------------------------
　　　　　　　ページ専用css  pc用 
--------------------------------------------------------------------
------------------------------------------------------------------*/
@media screen and (min-width: 750px) {
.sp {display: none;}
.pc {display: block;}

#main{
    /* padding-bottom: 120px; *//* CTA追従ボタン用 */
    padding-bottom: 32px;
  }

  #gosyuin {
    font-size: 1.6rem;
}

}


/* ============================================================
    mv
   ============================================================ */

/* ============================================================
    基本設定 (SPファースト)
   ============================================================ */

#gosyuin .mv__inner {margin: 0 auto;}

.mv__wrap {
    /* 親のmax-widthを無視して全幅にする魔法のコード */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    
    overflow: hidden;
}
.mv__inner {
    width: 100%;
    line-height: 0; /* 画像下の隙間排除 */
}

.mv__inner img {
    width: 100%;
    height: auto;
}

.h1_wrap {background-color: #fff;}

#gosyuin h1 {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 0 14px .67em;
}

@media screen and (min-width: 750px) {
    
    /* 背景パターンの設定 (100vw) */
    .mv__wrap {
        background-image: url(/plan/tokushu/ex/gosyuin/images/list_bg.webp);
        background-repeat: repeat;
        background-size: 4%; /* パターンの大きさに合わせて調整してください */
    }

    /* コンテンツ幅の制限 (max-width 1200px) */
    .mv__inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    #gosyuin h1 {
    padding: 0 0px .67em;
}
}


/* ============================================================
   intro
   ============================================================ */

   .intro__heading {
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

   .intro__heading::before, 
   .intro__heading::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 64px;
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec_h3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.intro__heading::before {
  margin-left: -270px;
}
.intro__heading::after {
  margin-right: -270px;
}

.menu__list--block {
    padding-top: 32px;
}

.link-btn {
    display: block;
    position: relative;
    padding: 4px 50px 4px 40px;
    background-color: #E8453C;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px #E8453C;
    transition: all 0.2s;
    font-size: 1.8rem;
}

.link-btn:hover {
    opacity: 0.8;
}

/* 外部リンクアイコンの設定 */
.menu__list .link-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px; /* 右から18px */
    transform: translateY(-50%); /* 天地中央合わせ */
    
    width: 16px;  /* アイコンの幅に合わせて調整してください */
    height: 16px; /* アイコンの高さに合わせて調整してください */
    
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec_link.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.menu__list--block .txt01 {
    display: block;
    font-size: 1.2rem;
}
.menu__list--block .txt02 {
    display: block;
    font-size: 1rem;
    font-weight: 400;
}
#intro .page-wrap,
#benefit .page-wrap,
#step .page-wrap {
  max-width: 600px;
}


@media screen and (min-width: 750px) {
  .intro__heading {
    font-size: 2.2rem;
  }
  .intro__lead {
    font-size: 1.8rem;
    line-height: 2;
}
.intro__heading::before, 
.intro__heading::after {
    width: 100px;
    height: 90px;
    top: -10px;
}

.intro__heading::before {
  margin-left: -360px;
}
.intro__heading::after {
  margin-right: -360px;
}
}


/* ============================================================
   benefit
   ============================================================ */
.acc__btn.link-btn {
  color: #5D9B75;
  border: 2px solid #5D9B75;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px #ffffff;
} 

#gosyuin .sec-ttl {
    color: #867D6D;
    font-size: 2.4rem;
    margin: 0;
    position: relative;
    padding: 40px 0 16px;
    margin-top: 10px;
    text-align: center;
}
.benefit__head img {
    width: fit-content;
}

.benefit__list--item {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 10px;
    box-shadow: 0 2.5rem 2rem -2rem rgb(0 0 0 / 10%);
}
.benefit__number {
    color: #E8453C;
    position: absolute;
    padding-bottom: 4px;
}
.sec-ttl::before {
  content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    
    width: 93px;  /* アイコンの幅に合わせて調整してください */
    height: 44px; /* アイコンの高さに合わせて調整してください */
    
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.benefit__head_sub {
    color: #E8453C;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.benefit__head_sub::before,
.benefit__head_sub::after {
    width: 2px;
    height: 22px;
    background-color: #E8453C;
    content: '';
}

.benefit__head_sub::before {
    transform: rotate(-35deg);
    margin-right: 16px;
}

.benefit__head_sub::after {
    transform: rotate(35deg);
    margin-left: 16px;
}

.benefit__name {
    font-weight: 700;
    color: #956625;
    font-size: 1.4rem;
}
.benefit__txt01 {
    font-size: 1.3rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.benefit__txt02 {
    font-size: 1.3rem;
    color: #956625;
    background-color: #F7EBDA;
    border-radius: 12px;
    padding: 6px 8px;
    margin-top: 8px;
}
.benefit__txt02_C {
    background-color: #f5f5f5;
    color: #333;
}
.benefit_info {
    font-size: 1.2rem;
    line-height: 1.3;
    background-color: #fff;
    border-radius: 4px;
    padding: 2px 4px;
    margin-top: 4px;
}
.benefit__txt02_C .benefit_info {
    color: #333;
}
.benefit__head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    z-index: 0;
}
.benefit__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.benefit__note--block {
    margin-top: 8px;
}
.benefit__note--list p {font-size: 1.4rem;}

/* 親要素：基準点の設定 */
.benefit__list--txt.relative_wrap {
    position: relative;
    padding: 0px 24px;
    z-index: 0;
}

/* 共通設定 */
.benefit__list--txt.relative_wrap::before,
.benefit__list--txt.relative_wrap::after {
    content: "";
    position: absolute;
    width: 12px;  /* svgのサイズに合わせて調整 */
    height: 100%; /* svgのサイズに合わせて調整 */
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec02.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* 左側・上寄せ */
.benefit__list--txt.relative_wrap::before {
    top: 0;
    left: 0;
}

/* 右側・下寄せ ＋ 反転 */
.benefit__list--txt.relative_wrap::after {
    bottom: 0;
    right: 0;
    /* 180度回転させて「右下用の角装飾」にする */
    transform: rotate(180deg);
}

.benefit__head::before,
.benefit__head::after {
  content: "";
    position: absolute;
    width: 18px;  /* svgのサイズに合わせて調整 */
    height: 18px; /* svgのサイズに合わせて調整 */
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec03.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.benefit__head::before {
    top: 14px;
    margin-left: -224px;
}
.benefit__head::after {
    top: 0;
    margin-right: -224px;
}

.benefit__note--list .heading {
    font-weight: bold;
}

#benefit .txt-note {font-size: 0.9rem;}

.benefit__note--list .txt_link {
    text-decoration: underline;
    color: #559971;
    font-weight: bold;
}

@media screen and (min-width: 750px) {
  .benefit__list--txt.relative_wrap {
    position: relative;
    padding: 0px 40px;
    z-index: 0;
}
.benefit__name {
    font-size: 1.7rem;
    margin-bottom: 4px;
}
}





   /* ============================================================
   step
   ============================================================ */

   .step__list--head__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #E8453C;
    margin-bottom: 4px;
}
.step__list--head {
    position: absolute;
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
}
.step__list--head__wrap img {
    width: fit-content;
}
/* 2番目以降の li 要素にのみ 16px のマージンを適用 */
.step__list--item + .step__list--item {
    margin-top: 16px;
}
.step__list--txt {
  font-size: 1.4rem;
}


@media screen and (min-width: 750px) {
  .acc__btn.link-btn {
    padding: 8px 50px 8px 40px;
}
#gosyuin .sec-ttl {
    font-size: 3.2rem;
}
#benefit.sec__wrap,
#step.sec__wrap {
    padding-top: 30px;
}
.step__list--txt {
    font-size: 1.7rem;
}
.step__list--item + .step__list--item {
    margin-top: 24px;
}
}


   /* ============================================================
   gallery
   ============================================================ */
  .gallery__wrap {
    position: relative;
    background-color: #559971; /* ベースの色 */
    overflow: hidden;         /* 画像のはみ出し防止 */
    z-index: 0;
    
    /* コンテンツを読みやすくするための余白 */
    padding: 32px 0px 44px;
    color: #fff;
    margin-top: 32px;
}

/* 画像レイヤー */
.gallery__wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* テキストの下、背景色の上の階層 */
    
    /* 画像の設定 */
    background-image: url("/plan/tokushu/ex/gosyuin/images/gallery_bg.webp");
    background-size: cover;
    background-position: center;
    
    /* ここで不透明度を50%に調整 */
    opacity: 0.5;
    
    /* 背景色と馴染ませる（multiply なら重厚、overlay なら鮮やか） */
    mix-blend-mode: multiply; 
}
#gallery .splide__list a:hover {
    opacity: 0.8;
}

#gallery h2 {
    font-size: 2rem;
    margin-bottom: 16px;
}
.gallery__lead {
    margin-bottom: 10px;
}



/* スライダー */
/* スライダーコンテナの幅と位置 */
.splide {
  max-width: 100%; 
  margin: 0 auto;
  position: relative;
  padding-bottom: 20px; 
}

/* スライドの基本的なスタイル */
.splide__slide {
  /* height: 200px;  */
  background-color: #fff; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  border-radius: 8px; 
  padding: 10px;
}


/* 矢印とカウンターの配置CSS (下部中央に修正) */
.custom-arrows-container {
  position: absolute;
  bottom: -16px; /* ⬅️ ユーザーによる下部への修正を適用 */
  left: 50%;
  transform: translateX(-50%); 
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  gap: 20px;
}

/* カスタム矢印のボタンのスタイル */
.custom-arrows-container button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: opacity 0.2s;
}
.custom-arrows-container button:hover {
  opacity: 0.7;
}
/* SVGアイコンのサイズ調整 */
.custom-arrows-container button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
/* カウンターのスタイル */
.custom-counter {
  font-size: 1.1em;
  color: #fff;
  margin: 0; 
  font-weight: bold;
}
@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .gallery__wrap {
        padding: 64px 0;
        margin-top: 64px;
    }
  .gallery__lead{
    margin-bottom: 24px;
  }
  
  #gallery h2 {
    font-size: 3.2rem;
}
}

   /* ============================================================
   spot__list
   ============================================================ */




.anchor-heading {
    padding: 20px 0 0;
}

   /* エリアのアンカー */
   /* 元のアンカー表示 */
.spot__list--ank {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 0;
    flex-wrap: wrap;
}
.spot__list--ank li {
    width: calc((100% - 10px) / 2);
}

/* 下部固定ナビのスタイル */
.fixed-nav {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    bottom: -100px; /* ← 画面外に下げる */
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: bottom 0.3s ease, opacity 0.3s ease;
}

.fixed-nav.is-visible {
    opacity: 1;
    visibility: visible;
    bottom: 0; /* ← スライド表示 */
}

.fixed-nav__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 6px;
    max-width: 740px;
    margin: 0 auto;
    gap: 3px;
}

.fixed-nav img {
    width: 100%;
    height: auto;
}

.spot__list--area--header {
    font-size: 1.8rem;
    border-radius: 8px;
    padding: 4px;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 24px;
}

.nav_heading {
    font-size: 1.5rem;
    padding-top: 8px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav_heading::before,
.nav_heading::after {
    width: 2px;
    height: 24px;
    background-color: #333;
    content: '';
}

.nav_heading::before {
    transform: rotate(-35deg);
    margin-right: 16px;
}

.nav_heading::after {
    transform: rotate(35deg);
    margin-left: 16px;
}




/* カセットCSS */
.spot__list--item {
    background-color: #fff;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    box-shadow: 0 2.5rem 2rem -2rem rgb(0 0 0 / 10%);
    flex-direction: column;
}
.spot__list--item--head {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    align-items: center;
}
.label {
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    width: fit-content;
    border-radius: 10px;
    padding: 2px 8px 4px;
    line-height: 1.1;
    height: fit-content;
}
.shutoken { background-color: #D557AB; }
.shizuoka { background-color: #3895D1; }
.aichi { background-color: #DE853A; }
.kansai { background-color: #6FB52C; }
.label.benefit-label { 
  background-color: #D62121;
  font-size: 1rem; 
}
.label.event-title    { 
    background-color: #867D6D;
    font-size: 1rem;
}

.spot__list--item h3 {font-size: 1.6rem;}

.benefit-section {
    position: relative;     /* 背景を配置する基準 */
    padding: 10px 8px;          /* パディング16px */
    border-radius: 8px;     /* 角丸8px */
    overflow: hidden;       /* 角丸からはみ出る背景をカット */
    z-index: 0;
}

/* 背景画像専用のレイヤー */
.benefit-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;            /* テキストの下に配置 */
    
    /* 背景画像の設定 */
    background-image: url("/plan/tokushu/ex/gosyuin/images/list_bg.webp");
    background-size: 10%;
    background-position: center;
    
    /* 透明度60% */
    opacity: 0.6;
}

/* .benefit-img {
    margin: 0 auto;
    display: block;
    height: 184px;
    margin-bottom: 4px;
    width: fit-content;
} */
.benefit-img {
    margin: 0 auto;
    display: block;
    object-fit: contain; /* 比率を維持して枠に収める */
    margin-bottom: 4px;
}
.benefit-img.typeA {
    height: auto;
    width: 182px; /* fit-contentからautoに変更 */
    aspect-ratio: 1 / 1;
}
.benefit-img.typeB {
    height: auto;
    width: 130px; /* fit-contentからautoに変更 */
    aspect-ratio: 5 / 7;
}
.benefit-text {
    font-size: 1.2rem;
}
.event-text {
    font-size: 1rem;
}


.intro-section {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.intro-text {font-size: 1.1rem;}
/* .intro-section .main-img {
    width: 36%;
    height: fit-content;
} */
.intro-section .main-img {
    width: 36%;
    height: auto;
    object-fit: cover;
    
}

.event-box {
    position: relative;  
    background-color: #F5F1E9;
    border-radius: 6px;
    padding: 6px 4px 4px;
    z-index: 0;
    overflow: hidden;
}
.event-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 72px;
    z-index: -1;
    background-image: url(/plan/tokushu/ex/gosyuin/images/event_dec.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.event-inner {
  display: flex;
  gap: 4px;
}
.event-inner .event-img {
    width: 24%;
    aspect-ratio: 75 / 52;
}
.event-inner .event-img.btype {
    width: 14%;
    aspect-ratio: 5 / 7;
}
.spot__list--item .btn-container {
    padding-top: 14px;
    text-align: center;
    margin-top: auto;
    margin-bottom: 6px;
}
.spot__list--item .link-btn {
    display: inline-block;
    position: relative;
    padding: 6px 50px 6px 40px;
    background-color: #E8453C;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px #E8453C, 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    font-size: 1.4rem;
}
.spot__list--item .link-btn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    right: 8px;
}

.spot__list--item .link-btn:hover {
    opacity: 0.8;
}
.spot__btn--block {
    text-align: center;
    padding: 32px 0 20px;
}
.plan_all-btn {
    display: inline-block;
    position: relative;
    padding: 16px 50px 16px 40px;
    background-color: #5D9B75;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px #5D9B75, 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    font-size: 1.4rem;
}
.plan_all-btn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    right: 8px;
}
.main-img{margin: 0;}

.spot__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.event-heading {font-size: 1.2rem;}

.comingsoon {
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    z-index: 9;
}
.inactive {pointer-events: none;}

@media screen and (min-width: 750px) {
    .spot__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    .spot__list--item {
        width: calc((100% - 16px) / 2);
    }
    .spot__list--item h3 {
    font-size: 1.8rem;
}

.spot__list--ank {
    gap: 24px;
}
.spot__list--ank li {
    width: calc((100% - 72px) / 4);
}
.anchor-heading {
    padding: 64px 0 10px;
    font-size: 1.8rem;
}
.spot__list--ank {
    padding: 10px 0 10px;
}
.spot__list--area--header {
        font-size: 2.2rem;
        padding: 8px 4px;
        margin-bottom: 20px;
        margin-top: 48px;
    }
  }

 .spot__list--ank a:hover,
 .fixed-nav__inner a:hover {
    opacity: 0.8;
 } 

@media screen and (min-width: 1000px) {
    .spot__list--item {
        width: calc((100% - 32px) / 3);
    }
    .intro-section .main-img {
    width: 28%;
    height: auto;
    align-self: flex-start;
}
.intro-text {
    line-height: 1.4;
}
}

/* ============================================================
   recommend__wrap
   ============================================================ */
.recommend__wrap {
    padding: 32px 0;
    max-width: 750px;
    margin: 0 auto;
}
.recommend__block {
    background-color: #E38BA5;
    border-radius: 4px;
    padding: 8px;
}
.recommend__block--inner {
    background-color: #fff;
    border-radius: 4px;
    padding: 16px 8px;
    text-align: center;
}
.recommend__head img {
    width: fit-content;
    margin: 0 auto;
}
.recommend__wrap .sub_txt {
    font-size: 1.2rem;
    margin-top: 8px;
    display: block;
}
.recommend__wrap .main_txt {
    font-size: 2rem;
    border-bottom: 1px solid;
    display: block;
}
.plan-btn__block {
    padding-top: 10px;
}
.category__heading {
    color: #E38BA5;
    font-size: 1.8rem;
    font-weight: 700;
}

/* 親要素のベース設定 */
.recommend__head {
    text-align: center;
}

/* 共通の疑似要素設定 */
.recommend__head::before,
.recommend__head::after {
    content: "";
    position: absolute;
    top: 0;
    width: 34px;  /* svgのサイズに合わせて調整してください */
    height: 34px; /* svgのサイズに合わせて調整してください */
    background-image: url("/plan/tokushu/ex/gosyuin/images/dec_ichimatsu.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* 左上の装飾 */
.recommend__head::before {
    left: 0;
}

/* 右上の装飾（左右反転） */
.recommend__head::after {
    right: 0;
    transform: scaleX(-1); /* 左右反転 */
}

.recommend__head .main_txt::after {
    content: "";
    position: absolute;
    top: -14px;
    right: -14px;
    width: 80px;
    height: 60px;
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec_fukidashi.webp);
    background-repeat: no-repeat;
    background-size: contain;
}

/* 親要素：Flexboxの設定 */
.plan-btn__flex {
    display: flex;
    justify-content: center; /* 中央寄せ（左寄せなら flex-start） */
    gap: 6px;               /* ボタン間の隙間 */
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.plan-btn__flex li {
    flex: 1;                 /* ボタンの幅を均等にする場合 */
    max-width: 200px;        /* 広がりすぎないよう制限 */
}


/* ボタンの共通形状（修正版） */
.plan-btn {
    display: flex;
    flex-direction: column;  /* 子要素を縦に並べる */
    align-items: center;     /* 左右中央揃え */
    justify-content: center; /* 上下中央揃え */
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 4px;
    border-radius: 4px;      
    position: relative;
    min-height: 42px;        /* 2行になるので少し高さを確保 */
    line-height: 1.2;        /* 行間を少し詰める */
    transition: opacity 0.3s;
}

.plan-btn:hover {
    opacity: 0.8;
}

/* 疑似要素：右向きピクト（＞） */
.plan-btn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 8px;
}

/* 中部エリアなどの小文字設定 */
.minimum {
    display: block;
}

/* エリアカラー（変更なし） */
.plan-btn.shutoken { background-color: #D557AB; }
.plan-btn.aichi    { background-color: #DE853A; }
.plan-btn.kansai   { background-color: #6FB52C; }


@media screen and (min-width: 750px) {
  .recommend__wrap {
    padding: 64px 0;
}
.recommend__block--inner {
    padding: 30px 40px;
}
.recommend__wrap .sub_txt {
    font-size: 1.4rem;
}
.recommend__wrap .main_txt {
    font-size: 2.4rem;
}
.category__heading {
    font-size: 2rem;
}
.plan-btn {
    font-size: 1.5rem;
    padding: 6px 4px;
    min-height: 48px;
}
.recommend__head .main_txt::after {
    top: -48px;
    right: 14px;
    width: 100px;
    height: 76px;
}
#lineup {
    margin-top: 0;
}
}










/* ============================================================
   note-acc__group
   ============================================================ */
   .note-acc__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto 8px;
}

.note-acc__group .acc__btn {
    font-weight: bold;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    background-color: #867D6D;
    position: relative;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    line-height: 1.2;
}
.note-acc__group .acc__btn span {
    position: absolute;
    background-color: #fff;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.note-acc__group .acc__btn span::before, 
.note-acc__group .acc__btn span::after {
    content: "";
    background-color: #867D6D;
    position: absolute;
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transition: transform 0.3s;
}
.note-acc__group .acc__btn span::before {transform: translate(-50%,-50%) rotate(90deg);}
.note-acc__group .acc__btn.open span::before {transform: translate(-50%,-50%);}


.note-acc__group .acc__body {
    display: none;
    color: #333;
    font-size: 1.2rem;
    border: 1px solid #867D6D;
    padding: 12px;
    background: #fff;
}

.attention__block:not(:last-child){
  margin-bottom: 16px;
}
.attention__block h5{
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.attention__info--list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attention__info--item dt{font-weight: bold;}
.attention__info--item>dd>ul>li:not(:last-child){margin-bottom: 4px;}
.attention__group:not(:last-child){margin-bottom: 16px;}
.attention__group--head{
  text-align: center;
  font-weight: bold;
}
.attention__list li:not(:last-child){margin-bottom: 4px;}
.attention__group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attention__group>div>dt{font-weight: bold;}

.inquiry__head{
  border: 2px solid #99CEB2;
  padding: 8px;
  margin-bottom: 8px;
  text-align: center;
  background-color: #fff;
}
.inquiry__head p{
  font-weight: bold;
  color: #99CEB2;
  font-size: 1.6rem;
}
.mail-link{
  font-weight: bold;
  color: #99CEB2;
  font-size: 1.6rem;
  border-bottom: 1px solid #99CEB2;
}
.inquiry__note:not(:last-child){margin-bottom: 8px;}
.inquiry__note--head{font-weight: bold;}



.banner__block {
    max-width: 400px;
    margin: 0 auto 16px;
    background-color: #000;
}
#gosyuin .credit {font-size: 1.2rem;}

@media screen and (min-width: 750px) {
  .attention__block:not(:last-child){margin-bottom: 40px;}
.attention__box h5{
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.attention__group {gap: 16px;}
.attention__group--head {font-size: 1.6rem;}
.inquiry__head {margin-bottom: 16px;}
.inquiry__head p {font-size: 1.8rem;}
.mail-link{font-size: 1.8rem;}
.inquiry__note:not(:last-child){margin-bottom: 16px;}

.note-acc__group .acc__body {
        font-size: 1.4rem;
        padding: 32px 64px;
    }
    .note-acc__group {
        gap: 24px;
        margin: 0 auto 24px;
    }

}


/* ============================================================
   おすすめ記事
   ============================================================ */

.article__block {
    /* 全体設定 */
    max-width: 750px;
    width: 95%; /* 左右に少し余裕を持たせるため微調整 */
    margin: 32px auto;
    background-color: #ffffff;
    border-radius: 10px;
    border: 2px solid #007bff; /* 青い罫線 */
    box-shadow: 0 0 0 6px #ffffff; /* 外側の白い罫線 */
    padding: 25px; /* 内側の余白を少し広めに */
    box-sizing: border-box;
}

/* H2見出し：アイコン挿入 */
.article__block h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #1973d3;
    margin: 0 0 20px 0;
    
    /* 中央寄せの設定 */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: flex-end;    /* 上下中央 */
    text-align: center;

    /* アイコンの設定 */
    gap: 8px; /* アイコンと文字の間の余白 */
}

/* アイコンを擬似要素(before)で表示（背景画像より位置調整がしやすいため） */
.article__block h2::before {
    content: "";
    display: inline-block;
    width: 24px;  /* アイコンの横幅 */
    height: 24px; /* アイコンの縦幅 */
    background-image: url("/plan/tokushu/ex/gosyuin/images/dec_article.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* リストのスタイル調整 */
.article__list {
    list-style: none;
    padding: 0;
}


/* リンクの通常時 */
.article__link {
    color: #333;
    text-decoration: underline; /* 下線を消す */
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
}

/* リンクのホバー時 */
.article__link:hover {
    color: #E8453C;
    text-decoration: underline; /* ホバーで下線を出す */
}

/* リストの間隔調整 */
.article__list li {
    margin-bottom: 12px;
}
.article__list li:last-child {
    margin-bottom: 0;
}


@media screen and (min-width: 750px) {
    .article__block h2 {
    font-size: 2.6rem;
}
.article__block h2::before {
    width: 30px;
    height: 30px;
}
}



/* ============================================================
   フローティングボタン
   ============================================================ */

.float__btn {
    position: fixed;
    right: 2px;
    bottom: 20px; /* デフォルト位置 */
    z-index: 1000;
    width: 78px;
    
    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    
    /* bottom(位置)とopacity(透明度)の両方を滑らかにする */
    transition: bottom 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out;
}

/* 表示フラグ（intro〜lineupの間） */
.float__btn.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ナビ連動フラグ（ナビが下部固定された時） */
.float__btn.is-nav-visible {
    bottom: 108px !important;
}

@media screen and (min-width: 750px) {
    .float__btn {
            right: 10px;
        bottom: 24px;
        z-index: 1000;
        width: 100px;
    }

    .float__btn.is-nav-visible {
    bottom: 68px !important;
}


    .float__btn a:hover {
        opacity: 0.8;
    }
}


#footer .pagetop {
        display: none !important;
    }

.btn_pageTop {
        line-height: 44px;
        position: fixed;
        right: 14px;
        bottom: 14px;
        display: block;
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
        margin-left: auto;
        padding-top: 4px;
        text-align: center;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .2);
         /* 初期状態は非表示 */
        opacity: 0;
        visibility: hidden;
    
        /* bottom(位置)とopacity(透明度)の両方を滑らかにする */
        transition: bottom 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out;
    }
.btn_pageTop .icon {
        font-size: 1.9rem;
        color: #fff;
    }

    /* 表示フラグ（intro〜lineupの間） */
.btn_pageTop.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.btn_pageTop {
    bottom: 80px !important;
}


/* ナビ連動フラグ（ナビが下部固定された時） */
.btn_pageTop.is-nav-visible {
    bottom: 170px !important;
}
.btn_pageTop.is-lineup {
    bottom: 0px !important;
}


@media screen and (min-width: 750px) {
    .btn_pageTop {
    bottom: 108px !important;
}
.btn_pageTop.is-nav-visible {
    bottom: 150px !important;
}
}









/* ============================================================
   teaser
   ============================================================ */

   .teaser__wrap .txt01 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

   .teaser__wrap .txt01::before, 
   .teaser__wrap .txt01::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 64px;
    background-image: url(/plan/tokushu/ex/gosyuin/images/dec_h3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.teaser__wrap .txt01::before {
  margin-left: -300px;
}
.teaser__wrap .txt01::after {
  margin-right: -300px;
}
#intro.teaser__wrap .page-wrap {
    max-width: 1040px;
}
.teaser__wrap__period {
    padding: 20px 0px 10px;
}
.teaser__wrap__period .heading {
    background-color: #d1030e;
    border-radius: 24px;
    width: fit-content;
    margin: 0 auto;
    padding: 2px 24px;
    color: #fff;
}




@media screen and (min-width: 750px) {
    .teaser__wrap .txt01 {
        font-size: 2.2rem;
        line-height: 1.6;
    }
    .teaser__wrap .txt01::before {
  margin-left: -540px;
}
.teaser__wrap .txt01::after {
  margin-right: -540px;
}
.teaser__wrap .txt01::before, 
   .teaser__wrap .txt01::after {
    width: 100px;
    height: 90px;
}
.teaser__wrap__period {
    font-size: 1.8rem;
}
.teaser__wrap__period {
        font-size: 1.8rem;
        padding: 20px 0px 32px;
    }
}