﻿@import url("/kokunai/___common/css/fonts.css");
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round|Material+Symbols+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&family=Monoton:wght@400;700;900&display=swap');

/*  リセットCSS
============================================================================= */
html { -webkit-text-size-adjust: 100%; font-size: 62.5%; scroll-behavior: smooth; }
body { font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: #432c02; font-feature-settings: "palt"; line-height: 1.5; letter-spacing: .1em; }
body * { box-sizing: border-box; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure { margin: 0; padding: 0; }
ol, ul, li { list-style: none; }
img { width: 100%; height: auto; }
em { font-style: normal; }
@media screen and (min-width: 768px) {
	body { font-size: 1.6rem; }
}
@media screen and (max-width: 767px) {
	body { font-size: 1.3rem; }
}

/*  ぱんくず
============================================================================= */
@media screen and (min-width: 768px) {
    .breadcrumb-upper { margin: 0 auto 25px; max-width: 1230px; padding: 0 .5em; text-align: left; }
	.breadcrumb-upper__fix, .breadcrumb-upper__scroll, .breadcrumb-upper__item { display: inline-block; font-size: 10px; }
	.breadcrumb-upper__item { line-height: 2.1; margin-left: 1.5em; padding-left: .2em; position: relative; }
	.breadcrumb-upper__item::before { color: #999; content: ">"; left: -1.1em; line-height: 2.1; position: absolute; top: 0; }
}
@media screen and (max-width:767px){
	.breadcrumb-upper { position: relative; display: flex; flex-wrap: nowrap; overflow: hidden; background-color: #fff; border-top: 1px solid #d7d7d7; font-size: 10px; line-height: 3rem; }
	.breadcrumb-upper__fix { position: relative; width: 7em; transition: box-shadow .4s; box-shadow: 6px 0 10px 0 rgba(0, 0, 0, .3); z-index: 3; }
	.breadcrumb-upper__fix a { padding-left: .5rem; }
	.breadcrumb-upper__fix a, .breadcrumb-upper__item a { position: relative; display: block; background-color: #fff; text-align: center; }
	.breadcrumb-upper__fix a::before, .breadcrumb-upper__item a::before, .breadcrumb-upper__fix a:after, .breadcrumb-upper__item a:after { position: absolute; content: ""; border-style: solid; border-width: 2rem 0 2rem 1rem; top: -.5rem; }
	.breadcrumb-upper__fix a::before, .breadcrumb-upper__item a::before { border-color: transparent transparent transparent #fff; right: -.9rem; z-index: 2; }
	.breadcrumb-upper__fix a::after, .breadcrumb-upper__item a::after { border-color: transparent transparent transparent #d7d7d7; right: -1rem; z-index: 1; }
	.breadcrumb-upper__item a { padding: 0 .5rem 0 1.8rem; }
	.breadcrumb-upper__item:last-child { padding: 0 1.2rem 0 1.8rem; }
	.breadcrumb-upper__scroll { flex: 1; overflow: hidden; }
	.breadcrumb-upper__list { display: flex; flex-wrap: nowrap; height: 3rem; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; }
}

/*  共通
============================================================================= */
.in-wrapper { position: relative; margin: 0 auto; width: 100%; }
.l-page h1 { font-weight: bold; }
h3 { font-weight: bold; }
a, a:link, a:visited { color: #432c02; text-decoration: none; }
.m-ico { display: inline-flex; align-items: center; vertical-align: middle; font-style: normal; font-weight: 400; }
.m-ico::before { position: relative; font-family: 'Material Icons Round'; content: attr(data-icon); top: -1px; }
@media screen and (min-width: 768px) {
	.pc-none { display: none; }
	.in-wrapper { padding: 0 5px; min-width: 970px; max-width: 1246px; }
	.sect { padding: 50px 0; }
	.l-page h1 { font-size: 1.8rem; margin: 0 auto 5px; max-width: 1236px; }
	.l-page a, .l-page a img { transition: all .4s ease; }
	.l-page a:hover { opacity: .8; color: #432c02; }
	.l-page p, .l-page span { font-size: 1.3rem; }
}
@media screen and (max-width:767px){
	.sp-none { display: none; }
	.in-wrapper { padding: 0 24px; }
	.sect { padding: 30px 0; }
	.l-page h1 { font-size: 1.8rem; margin: 16px 0 8px 5px; }
}

/*  MV
============================================================================= */
@keyframes kvSliderAnimation {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}
.mv-wrapper { position: relative; width: 100%; height: auto; overflow: hidden; }
.mvtop-img { display: flex; width: 100%; background-color: #E86FA4; height: auto; }
.topSlideWrap { display: flex; background-color: #E86FA4; }
.topSlideWrap.movPlay { animation: 80s infinite linear 0.5s both kvSliderAnimation; }
.mvtop-img_item { height: 100%; padding: 0 4px; }
.mvtop-img_item img { width: 100%; height: 100%; object-fit: cover; overflow: hidden; object-position: 50% 50%; border: 1px solid #646464; }
.mv_txt-img { position: absolute; top: 0px; width: auto !important; height: 100% !important; z-index: 10; }
@media screen and (min-width: 768px) {
	.topSlideWrap { width: 100%; padding: 60px 0 16px; }
	.mvtop-img { height: 415px; }
	.mvtop-img_item { width: 230px; margin: 0 8px; }
	.mvtop-img_item:before, .mvtop-img_item img { border-radius: 7vw; }
	.mv_txt-img { left: 165px; }
}
@media screen and (max-width: 767px) {
	.topSlideWrap { width: auto; padding: 40px 0 16px; }
	.mvtop-img { height: 280px; }
	.mvtop-img_item { width: 110px; }
	.mvtop-img_item:before, .mvtop-img_item img { border-radius: 12vw; }
	.mv_txt-img { left: 16px; }
}


/*  ページ内アンカー
============================================================================= */
.pagenav{ position: relative; width: 100%; background:#e86fa4; box-shadow: 0px 12px 10px 0 rgb(106 106 106 / 5%); }
.pagenav_list{ display: flex; justify-content: center; }
.pagenav_list li { position: relative; width: 100%; }
.pagenav_list li:after { position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ""; display: inline-block; width: 1px; height: calc(100% - 10px); background:#f5f5f5; }
.pagenav_list li a { position: relative; display: block; color: #fff; line-height: 1.3; text-align: center; text-decoration: none; font-weight: 700; }
.pagenav_list li a:after { position: absolute; left: 50%; z-index: 4; transform: translateX(-50%); font-family: 'Material Icons Round'; content: "\e5cf"; font-size: 1.5rem; transition: all .4s ease; }
.pagenav.is-fixed { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
@media screen and (min-width: 768px) {
	.pagenav_list li:first-child:before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; display: inline-block; width: 1px; height: calc(100% - 10px); background:#f5f5f5; }
	.pagenav_list li a { overflow: hidden; padding: 15px 25px 35px; font-size: 1.8rem; outline: none; }
	.pagenav_list li span { position: relative; z-index: 3; }
	.pagenav_list li a:before { position: absolute; top:0; left: 0; content: ''; z-index: 2; width: 100%; height: 0; transition: .4s cubic-bezier(0.8, 0, 0.2, 1) 0s; }
	.pagenav_list li a:after { bottom: .55em; }
	.pagenav_list li a:hover { height: 100%; opacity: 1; color: #fff; }
	.pagenav_list li a:hover:after { bottom: -.15em; }
}
@media screen and (max-width: 767px) {
	.pagenav .in-wrapper { padding: 0; }
	.pagenav_list li:last-child:after { display: none; } 
	.pagenav_list li a { font-size: 1.2rem; padding: 10px 6px 20px; }
	.pagenav_list li a:after { bottom: -.15em; }
}

/*  タイトル
============================================================================= */
.sect-ttl { text-align: center; font-weight: bold; margin-top: 30px; margin-bottom: 1em; }
.sect-ttl::before { background: url(../_images/irast/ashirai.webp) center / 100% auto no-repeat; display: block; content: ""; width: 100px; height: 70px; margin: 0 auto; }
@media screen and (min-width: 768px) {
	.sect-ttl { font-size: 2em; }
	.sect-txt{ text-align: center; margin-top: 24px; }
}
@media screen and (max-width: 767px) {
	.sect-ttl { font-size: 1.55em; }
	.sect-txt { text-align: center; margin-top: 16px; font-size: 1.25rem; }
}

/*  エリア
============================================================================= */
.c-tab__list { display: flex; width: 100%; }
.c-tab__list li { width: calc(100% / 4); }
.c-tab label { display: flex; justify-content: center; align-items: center; height: 4.5em; border: solid 2px #432c02; }
.c-tab span { font-weight: bold; }
.c-tab.is-selected label { position: relative; color: #fff; background-color: #e86fa4; border: solid 2px #e86fa4; }
.c-tab.is-selected label::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #e86fa4 transparent transparent transparent; display: block; position: absolute; top: 100%; }
.sec-season input[name="season-radio"] { display: none; }
.panel-spring, .panel-summer, .panel-autumn { display: none; }
.panel-winter { display: block; }
.area-cassette { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.area-cassette_item { display: flex; flex-direction: column; }
.area-cassette_item img { object-fit: cover; vertical-align: bottom; }
.area-cassette_name { display: flex; align-items: center; }
.area-cassette_name:before { content: "\e55f"; font-family: 'Material Icons Round'; font-size: 2.4rem; line-height: 1; }
.area-cassette_body { padding: 12px 8px 16px; }
.c-panel__wrap { padding: 16px 8px; }
.area-img { position: relative; }
.area-img span { position: absolute; bottom: -16px; left: -4px; bottom: -24px; left: -8px; font-family: monoton; font-size: 3.2rem; font-weight: 400; color: #fff; filter: drop-shadow(0px 4px 4px #DA5D40); }
.area-cassette_bt { display: flex; justify-content: space-between; }
.area-cassette_bt li { width: calc(50% - 4px); border: 2px solid #432c02; text-align: center; }
.area-cassette_bt li span { font-weight: bold; line-height: 2; }
@media screen and (min-width: 768px) {
	.c-tab__list { column-gap: 24px; margin: 24px 0; }
	.c-tab label { height: 4.5em; cursor: pointer; }
	.c-tab span { font-size: 24px; }
	.area-cassette_item { width: calc(100% / 3 - 24px); }
	.area-cassette_item img { height: 16.5em; }
	.area-cassette_body h3 { height: 3.2vw; }
	.seasonselect_link { padding-top: 28px; text-align: center; }
}
@media screen and (max-width: 767px) {
	.c-tab__list { column-gap: 8px; margin: 16px 0; }
	.c-tab label { height: 4em; }
	.c-tab span { font-size: 20px; }
	#area .area-cassette_item { width: 100%; }
	.area-cassette_item img { height: 18.5em; }
	.area-cassette_body h3 { font-size: 1.3em; height: 10.5vw; line-height: 1.3; }
	.c-tab__list.is-fixed-secondary { left: 0; margin: 0; padding: 0 24px; column-gap: 0; }
	.c-tab__list.is-fixed-secondary li { background-color: #ffffff99; }
	.c-tab__list.is-fixed-secondary label { border: solid 1px #432c02; }
	.c-tab__list.is-fixed-secondary .c-tab.is-selected label { border: solid 2px #e86fa4; }
}

/*  ホテル
============================================================================= */
.hotel-cassette_body { padding: 12px 8px 16px; }
.hotel-cassette_mesh { display: flex; align-items: center; font-size: 1.1rem; padding: 8px 0; }
.hotel-cassette_mesh:before { content: "\e55f"; font-family: 'Material Icons Round'; font-size: 2.0rem; line-height: 1; }
.hotel-img { position: relative; overflow: hidden; padding-top: calc(260 / 400 * 100%); }
.hotel-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2); object-fit: cover; object-position: 50% 50%; }
.hotel-cassette_bt { padding: 0 10px; margin-top: auto; }
.hotel-cassette_bt-item { margin-bottom: 4px; }
.hotel-cassette_bt-item a { position: relative; display: flex; justify-content: center; align-items: center; padding: 4px 8px; min-height: 40px; text-align: center; letter-spacing: 0; border-radius: 5px; color: #fff; background: #432c02; }
.hotel-cassette_bt-item a:before { margin-right: 5px; font-family: 'Material Icons Round'; font-size: 2.0rem; line-height: 1; }
.hotel-cassette_bt-item.-hotel a:before { content: "\ea40"; }
.hotel-cassette_bt-item.-jr a:before { content: "\e570"; }
.hotel-cassette_bt-item.-air a:before {	content: "\e539"; }
@media screen and (min-width: 768px) {
	.hotel-cassette_body h3 { height: 1.5vw; }
	.hotel-cassette_bt-item a:hover { color: #fff !important; }
}
@media screen and (max-width: 767px) {
	.hotel-cassette_body h3 { font-size: 1.3em; height: 5.5vw; line-height: 1.3; }
}

/*  Swiper
============================================================================= */
.slider-container { position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; }
.swiper-wrapper { display: flex; transition: transform 0.4s ease; touch-action: pan-y; }
.swiper-item { flex-shrink: 0; min-width: 0; border: 6px solid #cabea8; }
.navigation { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; z-index: 10; }
.nav-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; pointer-events: auto; z-index: 11; }
.nav-btn.prev,.nav-btn.next { background-color: #432c02; color: #fff; }
.nav-btn:hover { opacity: 0.8; }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dots { display: flex; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: none; background-color: #ddd; cursor: pointer; pointer-events: auto; }
.dot.active { background-color: #e86fa4; }
@media screen and (min-width: 768px){
	.swiper-wrapper { gap: 24px; }
	.slider-container { padding: 20px; }
}
@media screen and (max-width: 767px){
	.swiper-item { width: calc(80% - 8px); margin-right: 8px; }
	.slider-container { padding: 20px 12px 0; }
}

/*  キーワード
============================================================================= */
.kw-list { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1em; border-radius: .375em; }
.kw-word { display: inline-flex; justify-content: center; align-items: center; height: 2.25em; margin: 0.5em;  padding: 0 1em; border-radius: .375em; border: 2px solid #cabea8; }
.kw-word span::before { content: "＃"; padding-right: 0.25em; }
@media screen and (min-width: 768px){
	.kw-list a:hover{ background-color: #e86fa4; border-color: #e86fa4; color: #FFF !important; opacity: 1 !important; }
	.kwall_link { padding-top: 28px; text-align: center; }
}
@media screen and (max-width: 767px){
	.kwall_link { padding: 8px 0px; text-align: right; }
}

/*  記事
============================================================================= */
.news-sect .news-cassette { margin-top: 1.5em; }
.news-sect .newswp { background: #fff; border-radius: .375em; box-shadow: 0 0 6px rgb(0 0 0 / 20%); }
.news-sect .news_img img { object-fit: cover; }
.news-sect .news_text { display: flex; flex-direction: column; }
.news-sect .area::before { content: "\e938"; font-family: 'jtb-dom'; padding-right: 2px; font-size: 1.6rem; }
.news_areadate { margin-top: auto; }
@media screen and (min-width: 768px){
  .news-cassette { display: flex; justify-content: center; width: 90%; margin: 0 auto; }
  .news-sect .newswp { width: calc(100% / 4 - 24px); border: solid 1.8px #873535; }
  .newswp + .newswp { margin-left: 24px; }
  .news-sect .news_img { padding: 4px; }
  .news-sect .news_img img { width: 100%; height: 10em; border-radius: 4px; }
  .news-sect .news_text { padding: 4px 8px; }
  .news-sect .news_title { font-size: 1.6rem; height: 4em; }
  .news-sect .news_areadate { padding-top: 12px; text-align: right; font-size: 1.4rem; }
  .news-sect .newsall_link { padding-top: 28px; text-align: center; }
}
@media screen and (max-width: 767px){
  .news-sect .newswp { border: solid 2.8px #873535; }
  .newswp + .newswp { margin-top: 8px; }
  .news-sect .news_item { display: flex; justify-content: space-between; padding: 8px; }
  .news-sect .news_img { width: 45%; }
  .news-sect .news_img img { height: 7.5em; }
  .news-sect .news_title { font-size: 1.4rem; text-align: left; }
  .news-sect .news_text { width: calc(55% - 8px); text-align: left; padding-left: 4px; }
  .news-sect .newsall_link { padding: 8px 0px; text-align: right; }
}

/*  FAQ
============================================================================= */
.faq__item--q, .faq__item--a { position: relative; }
.faq__item--q { font-weight: bold; padding-bottom: 2em; padding-top: 2em; }
.faq__item--q::before { position: absolute; left: 0; color: #e86fa4; content: "Q." }
.faq__item--q.is-open::after { transform: rotate(-180deg); }
.faq__item--q::after { position: absolute; color: #e86fa4; content: "\e5cf"; display: inline-block; font-family: "Material Icons Round"; }
.faq__item--a { display: none; padding-bottom: 2em; }
.faq__item--a::before { position: absolute; left: 0; color: #da0a1b; content: "A." }
.faq__item--a ul { margin-top: 1em; }
.faq__item--a li::before { content: "\e801"; display: inline-block; font-family: "icon"; padding-right: 1em; }
.faq__item--a a:link, a:visited {text-decoration: underline; }
.faq__item { border-bottom: 1px solid #d7d7d7; }
@media screen and (min-width: 768px){
	.bottom__box { padding: 40px; }
	.faq__item--q, .faq__item--a { padding-left: 3em; }
	.faq__item--q { padding-bottom: 2em; }
	.faq__item--q::after { right: 2em; }
	.faq__item { padding: 0 2em; }
}
@media screen and (max-width: 767px){
	.faq__item--q, .faq__item--a { padding-left: 2em; }
	.faq__item--q { padding-bottom: 1.5em; }
	.faq__item--q::after { right: 0; }
	.faq__item { padding: 0 5%; }
}

/*  キャンペーン・特集
============================================================================= */
.feature-cassette{ display: flex; flex-wrap: wrap; justify-content: center; }
.feature-cassette_txt{ text-align: center; line-height: 2; }
@media screen and (min-width: 768px){
	.feature-cassette{ gap: 16px 24px; }
	.feature-cassette_item { width: calc(100% / 4 - 50px); }
}
@media screen and (max-width: 767px){
	.feature-cassette{ gap: 8px 24px; }
	.feature-cassette_item { width: calc(100% / 2 - 24px); }
	.feature-cassette_txt{ font-size: 1rem; }
}


/*  フッター サイトマップ
============================================================================= */
@media screen and (min-width: 768px) {
    .htl-sitemap { padding: 3.125em 0; text-align: left; }
	.htl-sitemap_dl { display: flex; flex-wrap: wrap; min-width: 970px; max-width: 1246px; padding: 0 .375em; }
	.htl-sitemap_dl dt { width: 12rem; }
	.htl-sitemap_dl dt:not(:first-of-type), .htl-sitemap_dl dd:not(:first-of-type) { margin-top: 2rem; }
	.htl-sitemap_dl dd { width: calc(100% - 12rem); }
	.htl-sitemap_list { margin: -1rem 0 0 0; }
	.htl-sitemap_list li { margin: 1rem 0 0 1rem; padding-left: 1rem; border-left: dotted 1px #ccc; }
}
@media screen and (max-width: 767px){
	.js-accordion-sp { position: relative; }
	.js-accordion-sp:after { position: absolute; right: 1.5rem; top: 1rem; content: "\e5cf"; display: inline-block; font-family: "Material Icons Round"; font-size: 1.8rem; }
	.js-accordion-sp.is-open:after { transform: rotateZ(-180deg); }
	.htl-sitemap_dl dt { padding: 1em 2em 1em 1em; text-align: left; }
	.htl-sitemap_dl dd { display: none; }
	.htl-sitemap_list { margin-right: .3rem; }
	.htl-sitemap_list li { margin: .3rem 0 0 .3rem; width: calc(100% / 2 - .3rem); }
	.htl-sitemap_list li a { display: flex; align-items: center; padding: .5rem 1rem; min-height: 50px; height: 100%; line-height: 1.3; border-radius: .3rem; background: #fff; text-align: left; }
	#JTBGF-ly_footer.JTBGF-ly_footer { margin-top: 0px !important; }
}
