@charset "utf-8";

/*PCSP共通設定*/
html {
  scroll-behavior: smooth;
}

/*smooth scroll*/

@font-face {font-family: "Tahoma";}
.inner {
  font-family: "Tahoma","DIN Alternate", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-feature-settings: "palt";
  color: var(--c_gray_dark);
}

/* =========================
   root
========================= */
:root {
  --c_white: #FFFFFF;
  --c_gray_dark: #323232;
  --c_gray: #A6A6A6;
  --c_gray_light: #F0F0F0;
  --c_yellow: #FFFF00;
  --c_blue: #305FB3;
  --c_red: #D7232D;

  --c_green_lime: #ACCA34;
  --c_green: #4CAA5D;
  --c_cyan_light: #3EBBB7;
  --c_cyan: #0AA8C3;
  --c_blue_light: #487FBA;
  --c_pink: #EC6C91;
  --c_brown: #9D764D;
  --c_gold: #CFAC4E;
  --c_gold_strong: #F0B905;
  --c_orange: #F29600;
  --c_orange_red: #D84B3E;
  --c_purple: #9E73B9;

}

.inner {
  font-feature-settings: "palt";
}

.txt_red {
  color: var(--c_red);
}

.txt_blue {
  color: var(--c_blue);
}

/*759px以下*/
@media screen and (max-width: 759.9px) {
  #wrapper {
    line-height: 1.4;
  }

  .spnone {
    display: none;
  }

  /* CSS */
  #dirPathBlock,
  #anchorLinkBlock {
    font-size: 10px;
    margin: 1% 1% 0 1%;
  }

  #dirPathBlock p,
  #anchorLinkBlock a {
    font-size: 12px;
  }

  h1 {
    font-size: 12px;
    margin: 0 1%;
  }
  h2 {
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs_5xl);
    font-weight: bold;
	line-height: 1.2;
	letter-spacing: 2px;
  }
	
    .h2_sub {
        display: block;
        font-size: var(--fs_md);
        color: var(--c_gray);
        letter-spacing: 2px;
        margin-bottom: 7px;
        font-weight: bold;
    }
  .inner {
    width: 92%;
    margin: 0 auto;
    padding: 4rem 0;
    box-sizing: border-box;
  }

  /* =========================
   root
========================= */
  :root {
    /* ===== 文字サイズ ===== */
    --fs_body: 1rem;
    --fs_caption: 0.9rem;
    --fs_sm: 1.1rem;
    --fs_md: 1.2rem;
    --fs_lg: 1.35rem;
    --fs_xl: 1.5rem;
    --fs_xxl: 1.7rem;
    --fs_3xl: 2rem;
    --fs_4xl: 2.2rem;
	--fs_4xl: 2.4rem;
	--fs_5xl: 2.6rem;
  }


  /* =========================
  title
========================= */
  div#title img {
    width: 100%;
  }

/* =========================
  nav
========================= */
#nav {
  width: 100%;
  background: var(--c_gray_dark);
  font-size: var(--fs_lg);
  font-weight: bold;
}

    #nav .nav_inner {
        max-width: 1080px;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;
    }
.gnav_item {
    display: inline-block;
    width: 100%;
    text-align: center;
}
a.gnav_link {
  transition: color 0.2s ease;
  padding: 10px;
  display: block;
  color: var(--c_white);
  text-decoration: none;
}

a.gnav_link:hover {
  color: var(--c_yellow);
  opacity: 1;
}

details {
  position: relative;
}

details summary {
  list-style: none;
  cursor: pointer;
  color: var(--c_white);
  padding: 10px;
  display: block;
  transition: color 0.2s ease;
  font-size: var(--fs_lg);
  font-weight: bold;
}

/* すべてのブラウザのマーカーを消す */
details summary::-webkit-details-marker,details summary::marker {
  display: none;
}

details summary:hover,
details[open] summary {
  color: var(--c_yellow);
}

/* ドロップダウン */
.gnav_dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 300px;
  z-index: 100;
  background: var(--c_white);
	width: 100%;
	   display: grid;
        grid-template-columns: repeat(3, 2fr);
	box-shadow: 0px 12px 10px -10px var(--c_gray);
}

.gnav_dropdown li {
  display: block;
  padding: 6px 10px 6px;
  background: var(--c_white);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  border-bottom: 1px solid var(--c_gray_dark);
	border-right: 1px solid var(--c_gray_dark);
	font-size: var(--fs_lg);
	text-align: center;
	 
}

	.gnav_dropdown li:nth-child(3n){
		border-right:none;
	}

.gnav_dropdown li:hover {
  background: var(--c_gray_dark);
  color: var(--c_yellow);
}
.gnav_item.gnav_has_dropdown {
    border-top: 1px solid var(--c_white);
    display: inline-block;
    width: 100%;
    text-align: center;
}

	

a.gnav_link:visited {
  color: var(--c_white);
}
a.gnav_link:visited:hover {
  color: var(--c_yellow);
}


details summary {
  -webkit-tap-highlight-color: transparent;
}	
  /* =========================
  about
========================= */
  #about {
    background: var(--c_white);
    margin: 0 auto;
    text-align: center;

  }

  #about p {
    line-height: 1.5;
    margin: 30px auto;
    font-size: var(--fs_md);
    font-weight: bold;
    letter-spacing: 1px;
  }

    img.plan_img {
        width: 100%;
        margin: 0 auto 1rem;
    }


  #about_rc {
    background-color: var(--c_gray_light);
    background-image: url(../images/bg6g.png?update=20260522);
    background-repeat: repeat;
    background-size: 45px;
    margin: 2.5rem auto 1rem;
    text-align: center;
    font-size: var(--fs_lg);
    font-weight: bold;
    position: relative;
  }

  #about_rc h2 {
    position: absolute;
    top: -16%;
    margin: 0 auto;
    font-weight: bold;
    font-size: var(--fs_3xl);
	  width: 100%;
	  line-height: 1.2;
  }

  #about_rc .inner {
    padding: 50px 0 40px;
  }

.point_list {
	width: 95%;
	display: flex;
	gap: 15px;
	justify-content: space-between;
	list-style: none;
	margin: auto;
	flex-direction: column;
    }
  .point_list li {
    flex: 1;
    background: var(--c_white);
    border: 2px solid var(--c_blue);
    text-align: center;
    border-radius: 8px;
  }

  .point_list li .card_head {
    background: var(--c_blue);
    color: var(--c_white);
    font-size: var(--fs_md);
    font-weight: bold;
    padding: 3px;
    border-radius: 4px 4px 0 0;
  }

  .point_list li .card_body {
    font-size: var(--fs_md);
    font-weight: bold;
    padding: 4px;
    line-height: 1.5;
  }


  /* =========================
  campaign
========================= */
  #campaign {
    background: var(--c_white);
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs_lg);
    font-weight: bold;
  }

    a.plan_btn {
        display: block;
        text-align: center;
        color: var(--c_white);
        font-size: var(--fs_sm);
        font-weight: bold;
        padding: 10px 25px;
        border-radius: 3px;
        text-decoration: none;
        position: relative;
        margin: 10px 0;
        transition: opacity 0.2s, transform .1s;
    }
    a.plan_btn::after {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 3px solid var(--c_white);
        border-right: 3px solid var(--c_white);
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 46%;
        right: 15px;
        border-radius: 1px;
        transition: 0.3s ease-in-out;
    }

    .btnarea_txt {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        font-weight: bold;
        margin: 2rem auto 0;
        font-size: var(--fs_md);
        line-height: 1.2;
        letter-spacing: 3px;
        gap: 25px;
    }

    .btnarea_txt::before {transform: rotate(-35deg);}
    .btnarea_txt::after {transform: rotate(35deg);}
    .btnarea_txt::before, .btnarea_txt::after {
        width: 3px;
        height: 20px;
        background-color: var(--c_gray_dark);
        content: '';
        flex-shrink: 0;
    }
	.btn_area {
    display: flex;
    justify-content: space-between;
    gap:15px;
}
	.btn_area a {
    display: block;
    flex: 1;
}

  .cp_txtcp {
    padding: 10px;
    font-size: var(--fs_sm);
    background: var(--c_gray_light);
    margin: 1rem auto 0;
  }


  .cp_box {
    background: var(--c_white);
    border-top: 4px solid var(--c_blue);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
	align-items: center;
    padding: 15px 0;
    margin: 6rem auto 1rem;
    position: relative;
  }

    .cp_box:last-of-type {
        background: var(--c_white);
        border-top: 2px dashed var(--c_gray_dark);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 0 0;
        margin: 2rem auto 0;
        position: relative;
    }

	.no0{
    padding: 1rem 0 0!important;
    margin: 1rem auto 0!important;
	border-top: none!important;
	}	
	.no1{
		    margin: 5rem auto 1rem!important;
	}

  .txt_box {
    flex: 1;
    text-align: left;
	width: 100%;
  }

    .txt_box img {
        position: absolute;
        width: 90px;
        top: -6.5%;
        margin: auto;
        vertical-align: middle;
        left: 50%;
        transform: translate(-50%, 5%);
    }
	.txt_box img.no2{
		top: -5%;
	}
	.txt_box img.no3{
		top: -7.5%;
	}

    .cp_limited {
        background: var(--c_red);
        border-radius: 5px;
        font-size: var(--fs_md);
        padding: 1px 20px;
        color: var(--c_white);
        display: block;
    }
  .txt_box>span.cp_limited {
    text-align: center;
  }
    .cp_limited_sub {
        background: var(--c_red);
        border-radius: 5px;
        font-size: var(--fs_sm);
        padding: 2px 10px;
        color: var(--c_white);
        margin: 0 0 5px 0;
        display: inline-block;
    }
    .txt_box h3 {
        font-size: var(--fs_5xl);
        font-weight: bold;
    }
    .cp_box.no0 .txt_box h3 {
        font-size: var(--fs_xxl);
        font-weight: bold;
    }
  .txt_box>img,
  .txt_box>h3 {
    display: inline-block;
  }
  .cp_box.no0 .txt_box>img,
  .cp_box.no0 .txt_box>h3 {
    display: block;
  }

.txt_box>h3 {
        margin: 2.5rem auto 1.5rem;
        display: flex;
        justify-content: center;
		text-align: center;
		line-height: 1.1;
    }
.cp_box.no0 .txt_box>h3 {
        margin: 0.5rem auto 0;
        text-align: center;
        line-height: 1.1;
    }

  .rac_dl {
    display: grid;
    grid-template-columns: 1fr 8fr!important;
    gap:15px;
    align-items: stretch;
    margin-bottom: 16px;
    margin-top: 15px;
  }

  .rac_dl dt {
        color: var(--c_white);
        font-size: var(--fs_lg);
        letter-spacing: 0;
        writing-mode: vertical-rl!important;
        font-weight: bold;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
	    padding: 10px 0!important;
  }

  .rac_dl dt.tag_green_lime {
    background: var(--c_green_lime);
  }
	
	  .rac_dl dt.tag_orange {
    background: var(--c_orange);
  }

  .rac_dl dt.tag_purple {
    background: var(--c_purple);
  }

    .rac_dl dd {
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
	
	p.cp_rc_txt {
    line-height: 1.1;
    margin: 1rem auto;
	text-align: center;
}
	
	
  .sub_title {
        font-size: var(--fs_lg);
        font-weight: bold;
        line-height: 1.25;
  }

  .sub_title_red {
    color: var(--c_red);
    font-size: var(--fs_lg);
    font-weight: bold;
  }

  .sub_title_caption {
    font-size: var(--fs_caption);
    display: block;
    margin-top: 2px;
	  font-weight: normal;
  }




  /* Plan text */
  .rac_plantxt {
    font-size: var(--fs_sm);
    font-weight: bold;
    border: 1px solid var(--c_gray_dark);
    padding: 12px 12px 9px;
    text-align: center;
    margin-bottom: 10px;
    display: block;
  }

  /* Caption */
  .rac_plancption {
    font-size: var(--fs_caption);
    line-height: 1.4;
	 padding: 0 0 30px;
	  font-weight: normal;
	  text-align: left;
  }

    .rac_imgbox {
        width: 90%!important;
        display: flex;
        flex-direction: column!important;
        box-sizing: border-box;
        justify-content: center;
    }

  .rac_logo,
  .rac_mainimg {
    width: 100%;
    object-fit: contain;
  }

	
  /* =========================
 area_tab
========================= */
  #area_tab {
    background-color: var(--c_gray_light);
    background-image: url(../images/bg1g.png?update=20260522);
    background-repeat: repeat;
    background-size: 45px;
    text-align: center;
    font-size: var(--fs_lg);
  }

  .tabs input[type="radio"] {
    display: none;
  }



  /*  タブボタングリッド  */
  .tab-strip {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    margin-bottom: 0;
    gap: 10px;
  }

   #area_tab h2 {
        font-size: var(--fs_3xl);
	   	   padding: 0 0 20px;
  }

  .tab-strip label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: var(--fs_xl);
    font-weight: bold;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform .1s;
    letter-spacing: 2px;
	color: #ffffffcf;
  }

  .tab-strip label:hover {
    opacity: 0.8;
    transform: translateY(-3px);
  }

  /* 各タブの色 */
  .l01 {
    background: var(--c_green_lime);
  }

  .l02 {
    background: var(--c_green);
  }

  .l03 {
    background: var(--c_cyan_light);
  }

  .l04 {
    background: var(--c_cyan);
  }

  .l05 {
    background: var(--c_blue_light);
  }

  .l06 {
    background: var(--c_pink);
  }

  .l07 {
    background: var(--c_brown);
  }

  .l08 {
    background: var(--c_gold);
  }

  .l09 {
    background: var(--c_gold_strong);
  }

  .l10 {
    background: var(--c_orange);
  }

  .l11 {
    background: var(--c_orange_red);
  }

  .l12 {
    background: var(--c_purple);
  }

  /*  アクティブ状態  */
  #t01:checked~.card .l01,
  #t02:checked~.card .l02,
  #t03:checked~.card .l03,
  #t04:checked~.card .l04,
  #t05:checked~.card .l05,
  #t06:checked~.card .l06,
  #t07:checked~.card .l07,
  #t08:checked~.card .l08,
  #t09:checked~.card .l09,
  #t10:checked~.card .l10,
  #t11:checked~.card .l11,
  #t12:checked~.card .l12 {
    opacity: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    transform: translateY(-3px);
	color: var(--c_white);
  }

.panels {
    margin: 1rem auto 0;
}
  .panel {
    display: none;
  }

  #t01:checked~.card .p01,
  #t02:checked~.card .p02,
  #t03:checked~.card .p03,
  #t04:checked~.card .p04,
  #t05:checked~.card .p05,
  #t06:checked~.card .p06,
  #t07:checked~.card .p07,
  #t08:checked~.card .p08,
  #t09:checked~.card .p09,
  #t10:checked~.card .p010,
  #t11:checked~.card .p011,
  #t12:checked~.card .p012 {
    display: block;
  }

#area_tab h3 {
font-weight: bold;
        font-size: var(--fs_5xl);
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin: 3rem auto 0;
}

#area_tab .p01 h3::before,
#area_tab .p01 h3::after {
  content: '';
  flex: 1;
  height: 5px;
  background-color: var(--c_green_lime);
}

#area_tab .p010 h3::before,
#area_tab .p010 h3::after {
  content: '';
  flex: 1;
  height: 5px;
  background-color: var(--c_orange);
}

#area_tab .p012 h3::before,
#area_tab .p012 h3::after {
  content: '';
  flex: 1;
  height: 5px;
  background-color: var(--c_purple);
}

#area_tab h4 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-weight: bold;
  margin: 2rem auto 0.5rem;
  font-size: var(--fs_xl);
  line-height: 1.2;
  letter-spacing: 1px;
  gap: 15px; 
}

#area_tab h4::before,
#area_tab h4::after {
  width: 3px;
  height: 30px;
  background-color: var(--c_gray_dark);
  content: '';
  flex-shrink: 0; 
}

#area_tab h4::before {
  transform: rotate(-35deg);
}

#area_tab h4::after {
  transform: rotate(35deg);
}
	
	

/* ===== メイン画像スライダー ===== */
.main_slider {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.main_slider .main_img_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}

.main_slider .main_img_wrap.active {
  opacity: 1;
  pointer-events: auto;
}

.tab_main_img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.main_img_wrap .img_label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c_white);
  font-size: var(--fs_5xl);
  font-weight: bold;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 01);
  white-space: nowrap;
}
	
.main_img_wrap .area_name {
        position: absolute;
        bottom: 4px;
        right: 0px;
        color: var(--c_white);
        font-size: var(--fs_caption);
        font-weight: bold;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
        display: flex;
        align-items: center;
        gap: 8px;
    }

.main_img_wrap .area_name::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 2px;
        background-color: var(--c_white);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
    }
    .planarea_txt {
      font-size: var(--fs_lg);
      padding: 15px 0;
      font-weight: bold;
      letter-spacing: 2px;
      text-align: center;
      position: relative;
      display: inline-block;
      width: 100%;
    }

    .planarea_txt span {
      background: linear-gradient(transparent 60%, var(--c_yellow) 60%);
      padding: 0 2px;
    }

	.planarea_txt02{
      font-size: var(--fs_sm);
		line-height: 1.7;
		letter-spacing: 2px;
	}

 /* ===== エリア説明 ===== */
    .area_tabplan_group {
              margin: 0rem auto 4rem;
    }

    .area_tabplan_box {
      background: var(--c_white);
      border-radius: 4px;
      overflow: hidden;
     box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
	  margin: 1.5rem auto;	
    }

    .area_tabplan_box img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }
	
    .area_tabplan_box h5 {
        font-size: var(--fs_xxl);
        letter-spacing: 5px;
        font-weight: bold;
        text-align: center;
        padding: 14px 0;
        color: var(--c_blue_light);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .area_tabplan_box h5::before,
    .area_tabplan_box h5::after {
      content: '';
      flex: 1;
      height: 2px;
      background-color: var(--c_blue_light);
    }

	.area_tabplan_box_txtgp{
		        padding: 0 15px 15px;
	}
	
.area_tabplan_box_txtgp dl {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
}
    .area_tabplan_box dl div {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-direction: column;
    }

    .area_tabplan_box dl div:last-child {
      border-bottom: none;
    }

    .area_tabplan_box dt {
        font-size: var(--fs_sm);
        white-space: nowrap;
        display: flex;
        gap: 10px;
        background: var(--c_gray_light);
        padding: 3px 0;
        border-radius: 5px;
        align-items: center;
        width: 100%;
        justify-content: center;
    }

    .area_tabplan_box dt .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
span.icon img {
    width: 30px;
    height: 30px;
}
    .area_tabplan_box dd {
        font-size: var(--fs_sm);
        line-height: 1.5;
    }
	

/* ===== リンクボタン ===== */
  .area_tab_linkbox {
    margin: 0.5rem auto;
  }

    a.area_tab_link {
        color: var(--c_white);
        font-size: var(--fs_lg);
        font-weight: bold;
        padding: 45px 5px 14px;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s, transform .1s;
        box-sizing: border-box;
        position: relative;
    }
	
a.area_tab_blue{background: var(--c_blue);}
a.area_tab_red{background: var(--c_red);}	
	
  a.area_tab_link::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/search.svg?update=20260522);
	background-repeat: no-repeat;
	    position: absolute;
        top: 10px;
  }

  a.area_tab_link:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
  }

	
/* ===== スライダー ===== */
.scrollbox {
  max-width: 1080px;
  margin: 0 auto 5rem;
}
.slick-list.draggable {
    padding: 0 0 15px 0;
}

.recommend {
  margin: 0.5rem auto 0;
}

.recommend.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots {
  position: static;
  margin-top: 16px;
}

.recommend li.slick-slide {
  margin: 0 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  background: var(--c_white);
  overflow: hidden;
}

.recommend > li {
  flex: 0 0 calc(30% - 20px);
  scroll-snap-align: start;
  min-width: 200px;
  padding: 8px 10px 12px;
}

.recommend .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  gap: 6px;
}

.recommend .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0;
  transition: width 0.3s ease;
}

.recommend .slick-dots li button {
  width: 100%;
  height: 10px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.recommend .slick-dots li button:before {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  background: var(--c_gray);
  opacity: 1;
  font-size: 0;
  line-height: 1;
}

.recommend .slick-dots li.slick-active button:before {
  background: var(--c_blue);
}

#area_tab li {

  text-decoration: none;
  color: inherit;
  background: var(--c_white);
  transition: box-shadow 0.2s, transform 0.2s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
}

.recommend dl dt {
  position: relative;
  line-height: 0;
  color: var(--c_gray_dark) !important;
}

.recommend dl dt img {
  width: 100%;
  height: 225px;
  object-fit: cover;
  display: block;
  background: var(--c_white);
}

.recommend dl dt h5 {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--c_white);
  font-size: var(--fs_caption);
  font-weight: normal;
  padding: 3px 8px;
  line-height: 1.6;
  width: 100%;
  text-align: left;
}

/* ===== dd — ホテル名 ===== */
.recommend dl dd:first-of-type {
  font-size: var(--fs_md);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 10px;
}

/* ===== dd.price ===== */
.recommend dl dd.price {
  text-align: center;
  line-height: 1.5;
  padding: 0 10px 5px;
}

.recommend dl dd.price p:nth-child(1) {
  font-size: var(--fs_sm);
  font-weight: bold;
}

.recommend dl dd.price p:nth-child(2) {
  font-size: var(--fs_md);
  font-weight: bold;
  color: var(--c_red);
}

.recommend dl dd.price p:nth-child(3) {
  font-size: var(--fs_caption);
}

.recommend .slick-next{
  right: -16px !important;
  width: 25px;
  height: 25px;
}
.recommend .slick-prev{
  left: -14px !important;
  width: 25px;
  height: 25px;
}

a.scr_btn {
  display: block;
  text-align: center;
  background: var(--c_blue);
  color: var(--c_white);
  font-size: var(--fs_sm);
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 3px;
  text-decoration: none;
  position: relative;
  margin: 10px;
  transition: opacity 0.2s, transform .1s;
}

a.scr_btn::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--c_white);
  border-right: 3px solid var(--c_white);
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 46%;
  right: 15px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}
  /* =========================
faq
========================= */
  .faq {
    margin: 1rem auto 0;
  }

  .faq_box {
    margin: 1.5rem auto;
    border: solid 1px var(--c_gray_dark);
    padding: 1rem;
  }

  .faq_q,
  .faq_a {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: var(--fs_md);
    line-height: 1.5;
  }

  .faq_q {
    margin-bottom: 20px;
  }

  .faq_a {
    padding-top: 20px;
    background-image: repeating-linear-gradient(90deg, var(--c_gray), var(--c_gray) 14px, transparent 14px, transparent 20px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 100% 1px;
  }

  .faq_label {
    font-size: var(--fs_3xl);
    font-weight: bold;
  }


  .faq_q .faq_label {
    color: var(--c_blue_light);
  }

  .faq_a .faq_label {
    color: var(--c_red);
  }

  .divider {
    border: none;
    border-top: 1px dashed var(--c_gray);
    margin: 10px 0;
  } 

	
  /* =========================
floating_nav
========================= */
#floating_nav {
  position: fixed;
  bottom: 50px;
  right: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  text-align: center;
}
#floating_nav.is_visible {
  opacity: 1;
  pointer-events: auto;
}
#floating_nav .area_floating_link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10vw;
        box-sizing: border-box;
        padding: 10px;
        background: var(--c_blue);
        border-radius: 4px;
        font-size: var(--fs_caption);
        font-weight: bold;
        color: var(--c_white);
        flex-direction: column;
	    transition: opacity 0.2s, transform .1s;
	        writing-mode: vertical-rl;
    }
  #jump_linkbox {
    scroll-margin-top: 200px;
	          padding: 1rem 0;
  }


/* scrollbox */
.scrollbox_wraper {
	margin: 25px 0;
	position: relative;
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
	width: 32px;
	height: 32px;
	position: absolute;
	top: calc(50% - 32px);
	display: block;
	z-index: 2;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0px 0px 6px #888;
}
.scrollbox_wraper .scroll_left_btn {left: 0;}
.scrollbox_wraper .scroll_right_btn {right: 0;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
}
.scrollbox_wraper .scroll_left_btn:after {
	position: absolute;
	top: 16px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_right_btn:after {
	position: absolute;
	top: 16px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_left_btn:before {
	position: absolute;
	top: 7px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_right_btn:before {
	position: absolute;
	top: 7px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display: none !important;
}
.scrollbox_wraper .scrollbox {overflow-x: scroll !important;}
.scrollbox_wraper .scrollbox > ul {
	width: fit-content !important;
	display: flex !important;
	margin: 0 auto 15px !important;
	padding: 0 calc(calc(100% - calc(1040px / 4)) / 2);
}
.scrollbox_wraper .scrollbox > ul > li.sliderBox {
	width: calc(1038px / 4) !important;
	margin: 0 5px !important;
	padding: 15px;
	box-sizing: border-box;
}
.scrollbox_wraper .scrollbox > ul > li h3 {
	display: grid;
	flex-direction: column;
	text-align: center;
	line-height: 1.2;
	padding: 10px 0;
	align-items: center;
	font-weight: bold;
	font-size: 18px;
}
.scrollbox_wraper .scrollbox > ul > li .txt {font-size: 14px;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px !important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #eee !important;
	border-radius: 5px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #999 !important;
}

}



/*760px以上*/
@media screen and (min-width: 760px),
print {

  /* CSS */
  #wrapper {
    line-height: 1.231;
  }

  #dirPathBlock,
  h1,
  .iframe_end-content_gadget,
  #anchorLinkBlock {
    width: 100%;
    max-width: 1080px;
    min-width: 760px;
    margin: auto;
  }

  /*panlist&back*/
  #dirPathBlock,
  #anchorLinkBlock {
    width: 100%;
    margin: 0 auto;
    display: block;
    font-size: 12px;
  }

  #dirPathBlock p,
  #anchorLinkBlock a {
    font-size: 12px;
  }

  h1 {
    font-size: 14px;
    width: auto;
    max-width: 1080px;
    min-width: 760px;
    margin: 0 auto 5px;
  }

  h2 {
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs_5xl);
    font-weight: bold;
    letter-spacing: 4px;
  }
    .h2_sub {
        display: block;
        font-size: var(--fs_md);
        color: var(--c_gray);
        letter-spacing: 2px;
        margin-bottom: 7px;
        font-weight: bold;
    }
  .inner {
    width: 96%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 70px 0;
    display: block;
  }

  /* =========================
   root
========================= */
  :root {
    /* ===== 文字サイズ ===== */
    --fs_body: 16px;
    --fs_caption: 14px;
    --fs_sm: 18px;
    --fs_md: 20px;
    --fs_lg: 24px;
    --fs_xl: 28px;
    --fs_xxl: 32px;
    --fs_3xl: 34px;
    --fs_4xl: 38px;
	--fs_5xl: 42px;
  }

  /* =========================
  title
========================= */
  #title {
    width: 100%;
    background: var(--c_gray_light) url(../images/bgimg.jpg?update=20260522) no-repeat 50% 50%;
    background-size: cover;
    text-align: center;
  }

/* =========================
  nav
========================= */
#nav {
  width: 100%;
  margin: 0 auto 20px;
  background: var(--c_gray_dark);
  font-size: var(--fs_lg);
  font-weight: bold;
}

#nav .nav_inner {
  max-width: 1080px;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  gap: 50px;
}

a.gnav_link {
  transition: color 0.2s ease;
  padding: 20px;
  display: block;
  color: var(--c_white);
  text-decoration: none;
}

a.gnav_link:hover {
  color: var(--c_yellow);
  opacity: 1;
}

details {
  position: relative;
}

details summary {
  list-style: none;
  cursor: pointer;
  color: var(--c_white);
  padding: 20px;
  display: block;
  transition: color 0.2s ease;
  font-size: var(--fs_lg);
  font-weight: bold;
}

/* すべてのブラウザのマーカーを消す */
details summary::-webkit-details-marker,details summary::marker {
  display: none;
}

details summary:hover,
details[open] summary {
  color: var(--c_yellow);
}

/* ドロップダウン */
.gnav_dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 300px;
  z-index: 100;
  border: 1px solid var(--c_gray_dark);
  background: var(--c_white);
}

.gnav_dropdown li {
  display: block;
  padding: 15px 10px 11px;
  background: var(--c_white);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  border-bottom: 1px solid var(--c_gray_dark);
　font-size: var(--fs_lg);
	text-align: center;
	box-shadow: 0px 12px 10px -10px var(--c_gray);
}

.gnav_dropdown li:last-child {
  border-bottom: none;
}

.gnav_dropdown li:hover {
  background: var(--c_gray_dark);
  color: var(--c_yellow);
}

  /* =========================
  about
========================= */
  #about {
    background: var(--c_white);
    margin: 0 auto;
    text-align: center;

  }

  #about p {
    line-height: 1.5;
    margin: 30px auto;
    font-size: var(--fs_md);
    font-weight: bold;
    letter-spacing: 4px;
  }

  img.plan_img {
    width: 60%;
  }


  #about_rc {
    background-color: var(--c_gray_light);
    background-image: url(../images/bg6g.png?update=20260522);
    background-repeat: repeat;
    background-size: 45px;
    margin: 40px auto 70px;
    text-align: center;
    font-size: var(--fs_lg);
    font-weight: bold;
    position: relative;
  }

  #about_rc h2 {
    position: absolute;
    top: -10%;
    width: 100%;
    margin: 0 auto;
    font-weight: bold;
    font-size: var(--fs_xxl);
  }

  #about_rc .inner {
    padding: 50px 0 40px;
  }

  .point_list {
    width: 80%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    list-style: none;
    margin: auto;
  }

  .point_list li {
    flex: 1;
    background: var(--c_white);
    border: 2px solid var(--c_blue);
    text-align: center;
    border-radius: 8px;
  }

  .point_list li .card_head {
    background: var(--c_blue);
    color: var(--c_white);
    font-size: var(--fs_md);
    font-weight: bold;
    padding: 6px 0;
    border-radius: 4px 4px 0 0;
  }

  .point_list li .card_body {
    font-size: var(--fs_md);
    font-weight: bold;
    padding: 5px;
    line-height: 1.5;
  }


  /* =========================
  campaign
========================= */
  #campaign {
    background: var(--c_white);
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs_lg);
    font-weight: bold;
  }
	
    a.plan_btn {
        display: block;
        text-align: center;
        color: var(--c_white);
        font-size: var(--fs_sm);
        font-weight: bold;
        padding: 10px 25px;
        border-radius: 3px;
        text-decoration: none;
        position: relative;
        margin: 10px 0;
        transition: opacity 0.2s, transform .1s;
    }
    a.plan_btn::after {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 3px solid var(--c_white);
        border-right: 3px solid var(--c_white);
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 46%;
        right: 15px;
        border-radius: 1px;
        transition: 0.3s ease-in-out;
    }

    .btnarea_txt {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        font-weight: bold;
        margin: 2rem auto 0;
        font-size: var(--fs_md);
        line-height: 1.2;
        letter-spacing: 3px;
        gap: 25px;
    }

    .btnarea_txt::before {transform: rotate(-35deg);}
    .btnarea_txt::after {transform: rotate(35deg);}
    .btnarea_txt::before, .btnarea_txt::after {
        width: 3px;
        height: 20px;
        background-color: var(--c_gray_dark);
        content: '';
        flex-shrink: 0;
    }
	.btn_area {
    display: flex;
    justify-content: space-between;
		gap:20px;
}
	.btn_area a {
    display: block;
    flex: 1;
}

  .cp_txtcp {
    padding: 10px;
    font-size: var(--fs_md);
    background: var(--c_gray_light);
    margin: 1rem auto;
  }

  .cp_box {
    background: var(--c_white);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 2rem 0 0;
    margin: 3rem auto 0;
    position: relative;
	gap:30px;
	max-width: 1080px;
  }
	

	
.cp_box::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50px;
    right: 0;
    border-top: 4px solid var(--c_blue);
}
	
.no0::before{left: 0;}
	
.cp_box:last-of-type::before {
    border-top: 2px dashed var(--c_gray_dark);
	left: 0;
}

  .txt_box {
    flex: 1;
    text-align: left;
  }

    .txt_box img {
        position: absolute;
        width: 115px;
        height: auto;
        top: -3px;
        left: -15px;
        vertical-align: middle;
    }

  .txt_box h3 {
    font-size: var(--fs_4xl);
    font-weight: bold;
    vertical-align: middle;
    padding: 0 0 0 115px;
  }
	
.txt_box h3.h3_limited{padding: 0;}
	
.cp_limited {
    background: var(--c_red);
    border-radius: 10px;
    font-size: var(--fs_lg);
    padding: 2px 20px;
    color: var(--c_white);
}
	
    .cp_limited_sub {
        background: var(--c_red);
        border-radius: 5px;
        font-size: var(--fs_sm);
        padding: 2px 10px;
        color: var(--c_white);
    }


  .txt_box>img,
  .txt_box>h3 {
    display: inline-block;
  }

  .txt_box>h3 {
    margin: 10px 0 30px;
  }

  .rac_dl {
    display: grid;
    grid-template-columns: 1fr 7fr;
    gap: 15px 15px;
    align-items: stretch;
    margin: 15px 0 15px;
  }

  .rac_dl dt {
    color: var(--c_white);
    font-size: var(--fs_lg);
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rac_dl dt.tag_green_lime {
    background: var(--c_green_lime);
  }
  .rac_dl dt.tag_orange {
    background: var(--c_orange);
  }
  .rac_dl dt.tag_purple {
    background: var(--c_purple);
  }

  .rac_dl dd {
    text-align: left;
	  display: block;
  }
	
	p.cp_rc_txt {
    line-height: 1.1;
    margin: 0 auto 1rem;
}
	

  .sub_title {
    font-size: var(--fs_lg);
    font-weight: bold;
    line-height: 1.4;
  }

  .sub_title_red {
    color: var(--c_red);
    font-size: var(--fs_xl);
    font-weight: bold;
  }

  .sub_title_caption {
    font-size: var(--fs_caption);
	display: block;
	  font-weight: normal;
  }



  /* Plan text */
  .rac_plantxt {
    font-size: var(--fs_sm);
    font-weight: bold;
    border: 1px solid var(--c_gray_dark);
    padding: 12px 12px 9px;
    text-align: center;
    margin-bottom: 10px;
    display: block;
  }

  /* Caption */
  .rac_plancption {
    font-size: var(--fs_caption);
    line-height: 1.4;
	  font-weight: normal;
	  text-align: left;
  }

  .rac_imgbox {
    width: 28%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }



  /* =========================
 area_tab
========================= */
  #area_tab {
    background-color: var(--c_gray_light);
    background-image: url(../images/bg1g.png?update=20260522);
    background-repeat: repeat;
    background-size: 45px;
    text-align: center;
    font-size: var(--fs_lg);
  }

  .tabs input[type="radio"] {
    display: none;
  }

  .tabs {
    margin: 2rem auto 0;
  }

  /*  タブボタングリッド  */
  .tab-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0;
    gap: 20px;
    max-width: 1080px;
	padding: 20px 0;
  }

   #area_tab h2 {
        letter-spacing: 2px;
  }

  .tab-strip label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: var(--fs_xl);
    padding: 3px 0;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform .1s;
    letter-spacing: 2px;
	color: #ffffffcf;
  }

  .tab-strip label:hover {
    opacity: 0.8;
    transform: translateY(-3px);
  }

  /* 各タブの色 */
  .l01 {
    background: var(--c_green_lime);
  }

  .l02 {
    background: var(--c_green);
  }

  .l03 {
    background: var(--c_cyan_light);
  }

  .l04 {
    background: var(--c_cyan);
  }

  .l05 {
    background: var(--c_blue_light);
  }

  .l06 {
    background: var(--c_pink);
  }

  .l07 {
    background: var(--c_brown);
  }

  .l08 {
    background: var(--c_gold);
  }

  .l09 {
    background: var(--c_gold_strong);
  }

  .l10 {
    background: var(--c_orange);
  }

  .l11 {
    background: var(--c_orange_red);
  }

  .l12 {
    background: var(--c_purple);
  }

  /*  アクティブ状態  */
  #t01:checked~.card .l01,
  #t02:checked~.card .l02,
  #t03:checked~.card .l03,
  #t04:checked~.card .l04,
  #t05:checked~.card .l05,
  #t06:checked~.card .l06,
  #t07:checked~.card .l07,
  #t08:checked~.card .l08,
  #t09:checked~.card .l09,
  #t10:checked~.card .l10,
  #t11:checked~.card .l11,
  #t12:checked~.card .l12 {
    opacity: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    transform: translateY(-3px);
	color: var(--c_white);
  }



  .panel {
    display: none;
  }

  #t01:checked~.card .p01,
  #t02:checked~.card .p02,
  #t03:checked~.card .p03,
  #t04:checked~.card .p04,
  #t05:checked~.card .p05,
  #t06:checked~.card .p06,
  #t07:checked~.card .p07,
  #t08:checked~.card .p08,
  #t09:checked~.card .p09,
  #t10:checked~.card .p010,
  #t11:checked~.card .p011,
  #t12:checked~.card .p012 {
    display: block;
  }


#area_tab h3 {
  font-weight: bold;
  font-size: 55px;
	letter-spacing: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin: 4rem auto 0;
}

#area_tab .p01 h3::before,
#area_tab .p01 h3::after {
  content: '';
  flex: 1;
  height: 5px;
  background-color: var(--c_green_lime);
}

#area_tab .p010 h3::before,
#area_tab .p010 h3::after {
  content: '';
  flex: 1;
  height: 5px;
  background-color: var(--c_orange);
}

#area_tab .p012 h3::before,
#area_tab .p012 h3::after {
  content: '';
  flex: 1;
  height: 5px;
  background-color: var(--c_purple);
}



#area_tab h4 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-weight: bold;
     margin: 4rem auto 1rem;
  font-size: var(--fs_xl);
  line-height: 1.2;
  letter-spacing: 3px;
  gap: 25px; 
}

#area_tab h4::before,
#area_tab h4::after {
  width: 3px;
  height: 30px;
  background-color: var(--c_gray_dark);
  content: '';
  flex-shrink: 0; 
}

#area_tab h4::before {
  transform: rotate(-35deg);
}

#area_tab h4::after {
  transform: rotate(35deg);
}
	
/* ===== メイン画像スライダー ===== */
.main_slider {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.main_slider .main_img_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}

.main_slider .main_img_wrap.active {
  opacity: 1;
  pointer-events: auto;
}

.tab_main_img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.main_img_wrap .img_label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c_white);
  font-size: 60px;
  font-weight: bold;
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 1);
  white-space: nowrap;
}
.main_img_wrap .area_name {
        position: absolute;
        bottom: 10px;
        right: 0px;
        color: var(--c_white);
        font-size: var(--fs_md);
        font-weight: bold;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
        display: flex;
        align-items: center;
        gap: 8px;
    }

.main_img_wrap .area_name::after {
        content: "";
        display: inline-block;
        width: 35px;
        height: 2px;
        background-color: var(--c_white);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
    }
    .planarea_txt {
      font-size: var(--fs_lg);
      padding: 30px 0;
      font-weight: bold;
      letter-spacing: 2px;
      text-align: center;
      position: relative;
      display: inline-block;
      width: 100%;
    }

    .planarea_txt span {
      background: linear-gradient(transparent 60%, var(--c_yellow) 60%);
      padding: 0 2px;
    }

	.planarea_txt02{
      font-size: var(--fs_sm);
		line-height: 1.7;
		letter-spacing: 2px;
	}

 /* ===== エリア説明 ===== */
    .area_tabplan_group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-top: 2rem;
    }

    .area_tabplan_box {
      background: var(--c_white);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
    }

    .area_tabplan_box img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
    }
	
.area_tabplan_box h5 {
        font-size: var(--fs_xl);
        font-weight: bold;
        text-align: center;
        padding: 14px 0;
        color: var(--c_blue_light);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .area_tabplan_box h5::before,
    .area_tabplan_box h5::after {
      content: '';
      flex: 1;
      height: 2px;
      background-color: var(--c_blue_light);
    }

	.area_tabplan_box_txtgp{
		        padding: 0 20px 20px;
	}
	
.area_tabplan_box_txtgp dl {
    display: flex;
    flex-direction: column;
    min-height: 110px;
    gap: 10px;
    justify-content: space-between;
}
    .area_tabplan_box dl div {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .area_tabplan_box dl div:last-child {
      border-bottom: none;
    }

    .area_tabplan_box dt {
        font-size: var(--fs_sm);
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--c_gray_light);
        padding: 5px 10px;
        border-radius: 5px;
		        min-width: 150px;
    }

    .area_tabplan_box dt .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
span.icon img {
    width: 30px;
    height: 30px;
}
    .area_tabplan_box dd {
        font-size: var(--fs_sm);
        line-height: 1.6;
        text-align: left;
    }
	

/* ===== リンクボタン ===== */
  .area_tab_linkbox {
    margin: 0.5rem auto;
  }

  a.area_tab_link {
    color: var(--c_white);
    font-size: var(--fs_xl);
    font-weight: bold;
    background: var(--c_blue);
    padding: 25px 22px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform .1s;
	box-sizing: border-box;
  }
	
a.area_tab_blue{background: var(--c_blue);}
a.area_tab_red{background: var(--c_red);}	

  a.area_tab_link::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/search.svg?update=20260522);
	background-repeat: no-repeat;
  }

  a.area_tab_link:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
  }

	
/* ===== スライダー ===== */
.scrollbox {
  max-width: 1080px;
  margin: 0 auto 5rem;
}
.slick-list.draggable {
    padding: 0 0 15px 0;
}

.recommend {
  margin: 0.5rem auto 0;
}

.recommend.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots {
  position: static;
  margin-top: 16px;
}

.recommend li.slick-slide {
  margin: 0 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  background: var(--c_white);
  overflow: hidden;
}

.recommend > li {
  flex: 0 0 calc(30% - 20px);
  scroll-snap-align: start;
  min-width: 200px;
  padding: 8px 10px 12px;
}

.recommend .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  gap: 6px;
}

.recommend .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0;
  transition: width 0.3s ease;
}

.recommend .slick-dots li button {
  width: 100%;
  height: 10px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.recommend .slick-dots li button:before {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  background: var(--c_gray);
  opacity: 1;
  font-size: 0;
  line-height: 1;
}

.recommend .slick-dots li.slick-active button:before {
  background: var(--c_blue);
}

.recommend .slick-next{
  right: -30px !important;
}
.recommend .slick-prev{
  left: -30px !important;
}

#area_tab li {
        display: flex;
        color: inherit;
        background: var(--c_white);
        transition: box-shadow 0.2s, transform 0.2s;
        flex-direction: column;
        justify-content: space-between;
}
	#area_tab li:hover{
        transition: opacity 0.2s, transform .1s;}

.recommend dl dt {
  position: relative;
  line-height: 0;
  color: var(--c_gray_dark) !important;
}

.recommend dl dt img {
  width: 100%;
  height: 225px;
  object-fit: cover;
  display: block;
  background: var(--c_white);
}

.recommend dl dt h5 {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--c_white);
  font-size: var(--fs_caption);
  font-weight: normal;
  padding: 3px 8px;
  line-height: 1.6;
  width: 100%;
  text-align: left;
}

/* ===== dd — ホテル名 ===== */
.recommend dl dd:first-of-type {
  font-size: var(--fs_md);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 10px;
}

/* ===== dd.price ===== */
.recommend dl dd.price {
  text-align: center;
  line-height: 1.5;
  padding: 0 10px 5px;
}

.recommend dl dd.price p:nth-child(1) {
  font-size: var(--fs_sm);
  font-weight: bold;
}

.recommend dl dd.price p:nth-child(2) {
  font-size: var(--fs_md);
  font-weight: bold;
  color: var(--c_red);
}

.recommend dl dd.price p:nth-child(3) {
  font-size: var(--fs_caption);
}

a.scr_btn {
  display: block;
  text-align: center;
  background: var(--c_blue);
  color: var(--c_white);
  font-size: var(--fs_sm);
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 3px;
  text-decoration: none;
  position: relative;
  margin: 10px;
  transition: opacity 0.2s, transform .1s;
}

a.scr_btn::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--c_white);
  border-right: 3px solid var(--c_white);
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 46%;
  right: 15px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

  /* =========================
faq
========================= */
  .faq {
    margin: 3rem auto 0;
  }

  .faq_box {
    margin: 2rem auto;
    border: solid 1px var(--c_gray_dark);
    padding: 1rem;
  }

  .faq_q,
  .faq_a {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: var(--fs_md);
    line-height: 1.5;
  }

  .faq_q {
    margin-bottom: 20px;
  }

  .faq_a {
    padding-top: 20px;
    background-image: repeating-linear-gradient(90deg, var(--c_gray), var(--c_gray) 14px, transparent 14px, transparent 20px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 100% 1px;
  }

  .faq_label {
    font-size: var(--fs_3xl);
    font-weight: bold;
  }


  .faq_q .faq_label {
    color: var(--c_blue_light);
  }

  .faq_a .faq_label {
    color: var(--c_red);
  }

  .divider {
    border: none;
    border-top: 1px dashed var(--c_gray);
    margin: 10px 0;
  } 
	
  /* =========================
floating_nav
========================= */
#floating_nav {
  position: fixed;
  bottom: 150px;
  right: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  text-align: center;
}
#floating_nav.is_visible {
  opacity: 1;
  pointer-events: auto;

}
#floating_nav .area_floating_link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 210px;
        box-sizing: border-box;
        padding: 15px 18px;
        background: var(--c_blue);
        border-radius: 4px;
        font-weight: bold;
        color: var(--c_white);
        flex-direction: column;
	    transition: opacity 0.2s, transform .1s;
        font-size: var(--fs_sm);
	line-height: 1.5;
    }
    #floating_nav .area_floating_link:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        transform: translateY(-2px);
    }
a.area_floating_link span img {
    width: 20px;
	padding: 0 5px 5px 0;
}
	
#jump_linkbox {
  scroll-margin-top: 200px; 
	        padding: 1rem 0;
}


/* scrollbox */
.scrollbox_wraper {
	margin: 50px 0;
	position: relative;
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
	width: 32px;
	height: 32px;
	position: absolute;
	top: calc(50% - 32px);
	display: block;
	z-index: 2;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0px 0px 6px #888;
}
.scrollbox_wraper .scroll_left_btn {left: -40px;}
.scrollbox_wraper .scroll_right_btn {right: -40px;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
}
.scrollbox_wraper .scroll_left_btn:after {
	position: absolute;
	top: 16px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_right_btn:after {
	position: absolute;
	top: 16px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_left_btn:before {
	position: absolute;
	top: 7px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_right_btn:before {
	position: absolute;
	top: 7px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display: none !important;
}
.scrollbox_wraper .scrollbox {overflow-x: scroll !important;}
.scrollbox_wraper .scrollbox > ul {
	width: fit-content !important;
	display: flex !important;
	margin: 0 auto 15px !important;
}
.scrollbox_wraper .scrollbox > ul > li.sliderBox {
	width: calc(1040px / 4) !important; /* 930px */
	margin: 0 5px !important;
	padding: 15px;
	box-sizing: border-box;
}
.scrollbox_wraper .scrollbox > ul > li h3 {
	display: grid;
	flex-direction: column;
	text-align: center;
	line-height: 1.2;
	padding: 10px 0;
	align-items: center;
	font-weight: bold;
	font-size: 18px;
}
.scrollbox_wraper .scrollbox > ul > li .txt {font-size: 14px;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px !important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #eee !important;
	border-radius: 5px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #999 !important;
}

/*スクロールなし*/
.scrollbox_wraper.pc_no_slider {
	margin-bottom: 15px;
	position: relative;
}
.scrollbox_wraper.pc_no_slider .scroll_left_btn,
.scrollbox_wraper.pc_no_slider .scroll_right_btn,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar-track,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar-thumb {display: none !important;}
.scrollbox_wraper.pc_no_slider .scrollbox > ul {
    width: 100%!important;
	flex-wrap: wrap;
}
.scrollbox_wraper.pc_no_slider .scrollbox > ul li {
	margin-bottom: 10px !important;
    border: 1px solid #eee;
}

}


/*1200px以下 おトクなレンタカープラン*/
@media screen and (max-width: 970px) {
.cp_box {
    display: flex;
    flex-direction: column;
	align-items: center;
	 box-sizing: border-box;        
}
	.txt_box{width: 100%;}
	
	.none_1200 {display: none;}
	
	.rac_dl dt {padding: 4px;
	writing-mode: horizontal-tb;}
	
    .rac_imgbox {
        width: 57%;
        gap: 10px;
    }
	.area_tabplan_box_txtgp dl {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
}
    .area_tabplan_box dl div {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-direction: column;
    }
	
	    .area_tabplan_box dt {
        font-size: var(--fs_sm);
        white-space: nowrap;
        display: flex;
        gap: 10px;
        background: var(--c_gray_light);
        padding: 3px 0;
        border-radius: 5px;
        align-items: center;
        width: 100%;
        justify-content: center;
    }

    .area_tabplan_box dd {
        font-size: var(--fs_sm);
        line-height: 1.5;
        text-align: center;
    }


}


.pb15 img{ width: 100%;}
.scrollbox_wraper a {color: #333;}