@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@500;900&display=swap');

#contents {
  max-width: 4000px;
}

#gojyoin{
  font-family: "Zen Kaku Gothic New",'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', '游ゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.53846;
  /* overflow: hidden; */
  color: #333;
  position: relative;
}

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

:root {
	--text-color: #333;
  --sub-text-color: #555;
  --primaly-color: #826DA3;
  --accent-color: #000758;
  --sub-color: #B2A372;
  --cpn-color: #4266AD;
  --red-color: #AA3A21;
  --zen-old-mincho: "Zen Old Mincho", serif;
}

.fc-red{color: var(--red-color);}
.txt-link{
	color: var(--cpn-color);
	text-decoration: underline!important;
	font-weight:900;
}
.txt-note,.note__list li{
  font-size: 1.2rem;
  color: var(--sub-text-color);
}

.center{text-align: center;}
.mgbS{margin-bottom: 8px;}
.mgbM{margin-bottom: 16px;}
.mgbL{margin-bottom: 24px;}

@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  #gojyoin {font-size: 1.6rem;}
  .txt-note,.note__list li{font-size: 1.4rem;}
  .pc-center{text-align: center;}
}
@media screen and (min-width: 1000px) {
	/* 1000px以上に適用されるCSS */
}

/* ----基本設定の上書き---- */
h2{
  margin: 0;
  font-weight: normal;
}
section h2 {margin: 0;}
@media screen and (max-width: 999px) {
  #breadcrumbs_sp {
      padding-top: 8px;
  }
}

/* テンプレのトップに戻るボタンの位置調整 */
@media screen and (max-width: 999px) {
  .pagetop {
    margin-bottom: 130px;
    z-index: 1000;
  }
  .pagetop_fix {
    margin-bottom: 10px;
    bottom:40px!important;
  }
	/* #gojyoin{margin-bottom: 12px;} */
}
@media screen and (min-width: 1000px) {
  .pagetop {margin-bottom: 130px;}
  .pagetop_fix {margin-bottom: 10px;}
}
/* ----common.cssの上書き---- */


/*------------------------------------------------------------------
--------------------------------------------------------------------
　　　　　　　　　　　ページ専用css
--------------------------------------------------------------------
------------------------------------------------------------------*/
.bg__wrap{
  padding-bottom: 150px;/* CTAボタン追従用 */
  background-image: url(/plan/tokushu/ex/gojyoin/images/bg01.webp);
}
/*------------------------------------------------------------------
--------------------------------------------------------------------
キャンペーン
--------------------------------------------------------------------
------------------------------------------------------------------*/
.campain__wrap{
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 0 32px;
}
.campain__block{
  background-color: #fff;
  border: 5px solid var(--cpn-color);
  padding: 24px 12px;
  background-image: url(/plan/tokushu/ex/gojyoin/images/obj01.webp),url(/plan/tokushu/ex/gojyoin/images/obj02.webp);
  background-repeat: no-repeat,no-repeat;
  background-position: top left,bottom right;
  background-size: 45%,45%;
}
.campain__head{
  position: relative;
  width: fit-content;
  margin: 0 auto 16px;
}
.campain__head--balloon{
  position: absolute;
  width: 25%;
  left: -27px;
  top: -12px;
}
.campain__head .txt01{
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.3;
  display: inline-block;
}
.campain__head .txt02{
  font-size: 2.4rem;
  font-family: var(--zen-old-mincho);
  font-weight: bold;
  color: var(--cpn-color);
}
.campain__lead--block{
  margin-bottom: 16px;
}
.campain__lead{
  font-weight: bold;
  text-align: center;
}
.campain__lead>span{
  font-size: 0.7em;
}
.campain__lead--block .txt-note{
  line-height: 1.2;
}
.coupon__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.coupon__list--item{
  display: flex;
  width: 100%;
}
.coupon__list--left{
  background-color: #E3E8F3;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--cpn-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: var(--cpn-color);
  font-weight: bold;
  width: 25%;
}
.coupon__list--right{
  border: 1px solid var(--cpn-color);
  border-left: none;
  border-radius: 0 6px 6px 0;
  width: 75%;
  padding: 4px 8px;
  font-weight: bold;
  line-height: 1.3;
}
.coupon__list--right .strong{
  font-size: 1.2em;
  color: var(--red-color);
}
.campain__peirod{
  margin: 24px 0;
}
.campain__peirod dt{
  background-color: var(--cpn-color);
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 4px;
}
.campain__peirod dd{
  text-align: center;
}
.campain__peirod dd .txt01{
  padding-top: 4px;
}
.campain__peirod dd .txt02{
  font-weight: bold;
  font-size: 1.5rem;
}
.campain__peirod dd .txt02 span{
  font-size: 1.5em;
}
.link-btn{
  background-color: var(--red-color);
  border: 2px solid var(--red-color);
  border-radius: 8px;
  max-width: 230px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all .5s;
}
.link-btn::after{
  content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    right: 16px;
    top: 50%;
}
.note-head{
  font-size: 1.2rem;
  font-weight: bold;
}
@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .campain__wrap{ padding: 64px 0;}
  .campain__block{
    border: 10px solid var(--cpn-color);
    padding: 32px;
    background-size: 30%,30%;
  }
  .campain__head {margin: 0x auto 24px;}
  .campain__head--balloon{
    width: 90px;
    top: -22px;
    left: -90px;
  }
  .campain__head .txt01{font-size: 1.8rem;}
  .campain__head .txt02{font-size: 3.2rem;}
  .coupon__list {
    gap: 12px;
}
  .coupon__list--left {
    font-size: 1.6rem;
  }
  .coupon__list--right {
    padding: 8px 16px;
    font-size: 1.8rem;
    text-align: center;
  }
  .campain__peirod{
    margin-top: 32px;
  }
  .campain__peirod dd .txt02 { font-size: 1.8rem;}
  .note-head{font-size: 1.4rem;}
  .link-btn{
    max-width: 300px;
    padding: 10px;
  }
  .link-btn:hover{
    background-color: #fff;
    color: var(--red-color);
  }
  .link-btn:hover::after{
      border-top: 2px solid var(--red-color);
      border-right: 2px solid var(--red-color);
  }
}


/*------------------------------------------------------------------
--------------------------------------------------------------------
お城をさがす
--------------------------------------------------------------------
------------------------------------------------------------------*/
.map__wrap{
  padding: 0 0 32px;
}
.map__head{
  position: relative;
  padding-top: 30px;
}
.map__head::before{
  content: "";
  width: 136px;
  height: 28px;
  background-image: url(/plan/tokushu/ex/gojyoin/images/obj-head01.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.map__head h2{
  text-align: center;
  font-family: var(--zen-old-mincho);
  font-weight: 900;
  font-size: 2.0rem;
  position: relative;
  width: fit-content;
  margin: 0 auto 16px;
  padding-left: 1.2em;
}
.map__head h2::before{
  content: "";
  width: 1em;
  height: 1em;
  background-image: url(/plan/tokushu/ex/gojyoin/images/icon-search.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
/*------ map ------*/
.map__block {
  position: relative; 
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto 30px; 
    padding-bottom: 53.333%; 
    overflow: hidden;
}
@media (min-width: 800px) {
    .map__block {
        padding-bottom: 0;
        height: 426.67px; 
    }
}
.map__block img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
}

/* === ポイントボタン=== */
.map-point {
    position: absolute;
    width: fit-content; 
    border-radius: 32px;
    padding: 1% 3%;
    font-size: 3.8vw;
    font-weight: bold;
    color: #fff;
    background-color: var(--primaly-color);
    border: 2px solid var(--primaly-color);
    cursor: pointer;
    z-index: 2;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    transition: all .5s;
}

#point-1 {
  top: 6.5%;
  right: 4%;
}
#point-2 {
  top: 60.5%;
  left: 73.5%;
}
#point-3 {
  top: 39%;
  left: 51%;
}
#point-4 {
  top: 22%;
  left: 33%;
}
#point-5 {
  top: 68.5%;
  left: 20%;
}
#point-6 {
  top: 26%;
  left: 8.5%;
}

/* === アコーディオンエリア (変更なし) === */
.castle__list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* .castle__list--item {
    overflow: hidden;
} */
.castle__list--head {
    background-color: var(--primaly-color);
    color: #fff;
    font-family:var(--zen-old-mincho);
    font-weight: 900;
    padding: 8px 16px;
    cursor: pointer;
    position: relative;
    font-size: 1.6rem;
}
.castle__list--head span{font-size: 0.8em;}

.castle__list--cont {
    padding: 16px;
    background-color: #fff;
    display: none; 
    box-shadow: 0 2.5rem 2rem -2rem rgb(0 0 0 / 15%);
}

/* 「くの字」型の矢印のスタイル */
.castle__list--head::after {
    content: ''; 
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    
    /* 閉じた状態: 下向きの矢印 (135度回転) */
    transform: rotate(135deg); 
    transition: transform 0.2s ease-out;
    
    /* 縦位置の調整 */
    position: absolute;
    top: 40%; 
    right: 16px;
}
.castle__list--head.active::after {
    /* 開いた状態: 上向きの矢印 (-45度回転) */
    transform: rotate(-45deg);
}
/* 「くの字」型の矢印のスタイルここまで */
.castle__list--flex{
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.img-castle{
  width: 66.7%;
}
.castle-icon__list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.link-btn.btnB{
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .map__wrap{
    padding: 0 0 64px;
  }
  .map__head{padding-top: 45px;}
  .map__head::before{
    width: 200px;
    height: 42px;
  }
  .map__head h2{
    font-size: 3.0rem;
    margin: 0 auto 24px;
  }
  .map-point {
    font-size: 1.6rem;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
  }
  .map-point:hover{
    background-color: #fff;
    color: var(--primaly-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  }

#point-1 {top: 10.5%; right: 5%;}
#point-3 {top: 44%; left: 55%;}
#point-4 {top: 26%; left: 36%;}
#point-5 {top: 68.5%; left: 27%;}
#point-6 {top: 31%; left: 13.5%;}
.castle__list--block.page-wrap{
  max-width: 600px;
}
.castle__list--head {
  padding: 8px 16px;
  font-size: 1.8rem;
}
.castle__list--cont {padding: 24px;}
.castle__list--flex {gap: 16px;}
.img-castle { width: 70%;}
.castle-icon__list {gap: 10px;}
.link-btn.btnB:hover{
  background-color: #fff;
  color: var(--accent-color);
}
.link-btn.btnB:hover::after{
  border-top: 2px solid var(--accent-color);
  border-right: 2px solid var(--accent-color);
}
}

/*------------------------------------------------------------------
--------------------------------------------------------------------
こちらから商品をチェック！　固定
--------------------------------------------------------------------
------------------------------------------------------------------*/
.cta-btn__wrap{
  background-image: url(/plan/tokushu/ex/gojyoin/images/bg04.webp);
  padding: 24px 0;
  background-size: 80px;
}
.cta-btn__wrap h3{
  text-align: center;
  font-family:var(--zen-old-mincho);
  font-weight: 900;
  font-size: 1.6rem;
  margin-bottom: 8px;
  position: relative;
}
.cta-btn__wrap h3:before,
.cta-btn__wrap h3:after {
  position: relative;
  display: inline-block;
  content: "";
  background: var(--text-color);
  width: 2px;
  height: 1.5em;
  margin: 0 0.7em;
  margin-top: -.2em;
  vertical-align: middle;
}
 
.cta-btn__wrap h3:before {
  transform: rotate(-35deg);
}
 
.cta-btn__wrap h3:after {
  transform: rotate(35deg);
}

.cta-btn__list {
  display: flex;
  gap: 15px;
  max-width: 400px;
  margin: 0 auto;
}
.cta-btn__list li{
  background-color: #000;
  border-radius: 10px;
}
.cta-btn{
  display: block; 
  overflow: hidden; 
  border-radius: 10px
}
.cta-btn__list li img{
  display: block;
  border-radius: 10px;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .cta-btn__wrap h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }
  .cta-btn__list li img{
   transition: all .5s;
  }
  .cta-btn__list li:hover img{
    opacity: .5;
  }
}


/*------------------------------------------------------------------
--------------------------------------------------------------------
オリジナル御城印ギャラリー
--------------------------------------------------------------------
------------------------------------------------------------------*/
.gallery__wrap{
  background-image: url(/plan/tokushu/ex/gojyoin/images/bg03.webp);
  background-size: 90px;
  padding: 32px 0;
  color: #fff;
}
.gallery__wrap h2{
  text-align: center;
  font-family: var(--zen-old-mincho);
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 16px;
}
.gallery__lead{
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}
.gallery__lead .txt-note{
  color: #fff;
}

/* スライダー */
/* スライダーコンテナの幅と位置 */
.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;
  }
  .gallery__wrap h2{
    font-size: 3rem;
  }
  .gallery__lead{
    margin-bottom: 24px;
  }
  #gallery-slide .splide__list .splide__slide{
    transition: all .5s;
  }
  #gallery-slide .splide__list .splide__slide:hover{
    opacity: 0.5;
  }
}
/*------------------------------------------------------------------
--------------------------------------------------------------------
おすすめ
--------------------------------------------------------------------
------------------------------------------------------------------*/
.recommend__wrap{
  padding: 32px 0;
  max-width: 800px;
  margin: 0 auto;
}
.recommend__block{
  background-color: #B2A372;
  border-radius: 4px;
  padding: 8px;
}
.recommend__block--inner{
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 0 64px;
  text-align: center;
  background-image: url(/plan/tokushu/ex/gojyoin/images/ill-left.webp),url(/plan/tokushu/ex/gojyoin/images/ill-right.webp);
  background-repeat: no-repeat,no-repeat;
  background-position: bottom left,bottom right;
  background-size: 118px, 213px;
}
.recommend__head{
  margin-bottom: 16px;
  position: relative;
  padding-top: 32px;
}
.recommend__head::before{
  content: "";
  width: 136px;
  height: 28px;
  background-image: url(/plan/tokushu/ex/gojyoin/images/obj-head02.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.recommend__head h2{
  font-size: 1.2rem;
  font-weight: bold;
}
.recommend__head h2 span{
  font-family: var(--zen-old-mincho);
  font-weight: 900;
  font-size: 2rem;
}
@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .recommend__wrap {
    padding: 64px 0 32px;
}
  .recommend__block {
    border-radius: 8px;
    padding: 12px;
}
.recommend__block--inner{
  border-radius: 8px;
  padding: 24px 0 64px;
  background-size: 165px, 280px;
}
.recommend__head{
  margin-bottom: 16px;
  padding-top: 50px;
}
.recommend__head::before{
  width: 200px;
  height: 42px;
}
.recommend__head h2{
  font-size: 1.8rem;
}
.recommend__head h2 span{
  font-size: 3rem;
}
  
}

/*------------------------------------------------------------------
--------------------------------------------------------------------
bottom
--------------------------------------------------------------------
------------------------------------------------------------------*/
.bnr__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 32px;
}
.bnr__list li{
  width: calc( ( 100% - 8px ) / 2 );
  background-color: #000;
}

/* 追従CTA */
#CTA {
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 影を付けて境界をわかりやすく */
  transition: all 0.3s ease-in-out; /* スタイル変更時のアニメーション */
}
#CTA.cta-btn__wrap {
  padding: 16px 0;
}
#CTA .cta-btn__list{
  max-width: 350px;
  max-height: 110px;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
	/* 750px以上に適用されるCSS */
  .bottom__wrap{
    padding: 32px 0;
  }
  .bnr__list{
    gap: 16px;
    margin: 0 auto 32px;
  }
  .bnr__list li{
    width: calc( ( 100% - 48px ) / 4 );
  }
  .bnr__list li img{
    transition: all .5s;
  }
  .bnr__list li:hover img{
    opacity: 0.5;
  }
  #CTA{
    padding-bottom: 10px;
  }
  /* #CTA.cta-btn__wrap{
    max-width: 600px;
    border-radius: 8px;
    left: 50%;
    transform: translateX(-50%);
  } */
  #CTA.cta-btn__wrap h3 {
    font-size: 1.6rem;
    margin-bottom: 8px;
  }
}

/*------------------------------------------------------------------
--------------------------------------------------------------------
　　　　　　　ページ専用css  スマホ用 
--------------------------------------------------------------------
------------------------------------------------------------------*/
@media screen and (max-width: 999px) {


}