@charset "Shift_JIS";
@import url(icon.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Roboto&display=swap');
@font-face {
  font-family: 'jtb-dom';
  src: url("/kokunai/_common/fonts/jtb-dom.ttf") format("truetype"), url("/kokunai/_common/fonts/jtb-dom.woff") format("woff"), url("/kokunai/_common/fonts/jtb-dom.svg#jtb-dom") format("svg");
  font-weight: normal;
  font-style: normal;
}
@keyframes mv-loop {
  0% { left: 40%; opacity: 0; top: 45%; }
  3% { opacity: 1; }
  95% { opacity: 1; }
  98% { left: 65%; opacity: 0; top: -35%; }
  100% { left: 65%; opacity: 0; top: -35%; }
}
@keyframes fade-in {
  0% { opacity: 0; transform: translate3d(0,-20px,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}

html {font-size: 62.5%;}
.mv {
	position: relative;
	background: url(/myjtb/campaign/coupon/pref_plan/images/img-main_bg.png) repeat-x;
	text-align: center;
}
.baseW { padding :30px 0 25px 0 }
.jtb-nav-breadcrumb { margin-bottom: 25px; }
.l-page { /*font-family: 'Roboto', 'Noto Sans JP', sans-serif;*/ line-height: 1.6; min-width: 1120px; width: 100%; }
.l-page * { box-sizing: border-box; }
.l-page a:hover { color: #479eff; }
.l-page a, .l-page a img { transition: all .5s ease; transform: rotate(0.0001deg); }
.l-page img { display: block; margin: 0 auto; }
.l-page h1 { font-size: 18px; font-weight: bold; line-height: 1; margin: 0 auto 25px; width: 1120px; }
.l-page .l-section { padding-top: 30px; }
.l-page .btn { align-items: center; background-color: #70a91e; border-radius: 6px; color: #fff; display: flex; font-size: 18px; justify-content: center; line-height: 1.2; position: relative; }
.l-page .btn:hover { background-color: #4a7c03; color: #fff; }
.l-page .btn::after { content: '\e804'; display: inline-block; font-family: 'icon'; font-size: 14px; position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); transition: all .5s ease; }
.l-page .btn:hover::after { right: 1.2em; }
.l-page .btn__red { background-color: #d6311b; }
.l-page .btn__red:hover { background-color: #b10000; }
.l-page .btn__prev::after { content: '\e80c'; left: 1.5em; right: inherit; }
.l-page .btn__prev:hover::after { left: 1.2em; right: inherit; }
.l-page .cap { font-size: 12px; }
.l-page .disc { list-style: disc; list-style-position: outside; margin-left: 1.5em; }
.l-page .arrow li::before { content: '\e801'; display: inline-block; font-size: 14px; font-family: 'icon'; padding-right: .5em; }
.l-page .arrow li .cap { margin-left: 1.5em; }
.l-page .fade-in { animation: fade-in .4s linear; }
.l-page .is-hide { display: none; }
.l-flex { display: flex; justify-content: space-between; }
.l-box {/* background-color: #fff; border: 1px solid #c19c75; border-radius: 6px; */}
.l-button { padding-top: 36px; }
.l-button ul { display: inline-flex; justify-content: center; }
.l-button li + li { padding-left: 20px; }
.l-button .btn { height: 76px; width: 400px; }
.l-container { /*background: url(../images/l-container__bg.png) no-repeat 102% -50px / 880px auto; width: 100%; */}
.l-inner { margin: 0 auto; position: relative; text-align: center; width: 1120px; }
.js-btn-page-top { bottom: 50px; cursor: pointer; display: none; position: fixed; right: 50px; z-index: 100; }
.js-btn-page-top a { display: block; height: 17px; position: relative; width: 35px; }
.js-btn-page-top a::before { color: #000; content: '\e802'; display: inline-block; font-family: 'icon'; font-size: 17px; height: 17px; width: 35px; }
/*.js-btn-page-top a:hover { opacity: .8; } */
.l-mv { height: 380px; overflow: hidden; padding-top: 15px; position: relative; text-align: center; width: 100%; }
.l-mv img { height: auto; width: 305px; }
.l-mv__bg { animation: mv-loop 18s linear infinite; background-color: #fff; left: 50%; position: absolute; top: 50%; transform: translate(-40%,-45%) rotate(45deg); z-index: -1; }
.l-mv__row { display: -ms-inline-flexbox; display: flex; }
.l-mv__row .tile { border-radius: .6vw; display: block; height: 360px; margin: 4px; overflow: hidden; position: relative; transform: rotateY(0deg); transition: all .5s ease; width: 360px; }
.l-mv__row .tile .pic-01 { background: url(../images/mv-1.jpg); }
.l-mv__row .tile .pic-02 { background: url(../images/mv-2.jpg); }
.l-mv__row .tile .pic-03 { background: url(../images/mv-3.jpg); }
.l-mv__row .tile .pic-04 { background: url(../images/mv-4.jpg); }
.l-mv__row .tile .pic-05 { background: url(../images/mv-5.jpg); }
.l-mv__row .tile .pic-06 { background: url(../images/mv-6.jpg); }
.l-mv__row .tile .pic-07 { background: url(../images/mv-7.jpg); }
.l-mv__row .tile .pic { background-size: cover; height: 140%; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 140%; }
.l-nav { height: 70px; width: 100%; }
.l-nav__float { background: #f2d8bf; text-align: center; width: 100%; }
/*.l-nav__float { background: #acb130 url(../images/l-nav__bg.png) repeat-x 50% / 200px; text-align: center; width: 100%; }*/
.l-nav__float ul { letter-spacing: -.4em; }
.l-nav__float li { display: inline-block; letter-spacing: normal; padding: 5px; vertical-align: middle; }
.l-nav__float li a { background: /* rgba(97,51,3,.5)*/ #c19c75; color: #fff; display: block; border-radius: 10px; font-size: 18px; line-height: 60px; height: 60px; overflow: hidden; position: relative; transition: none; width: 340px; letter-spacing: 1.6px;/* font-weight: bold;*/ /*text-shadow: 3px 3px 3px #999;*/ /*box-shadow: 0 2px 6px 0 rgba(119, 113, 99, 0.3);*/ }
.l-nav__float li a span:first-child::before { left: -7px; top: -7px; }
.l-nav__float li a span:first-child::after { bottom: -7px; left: -7px; }
.l-nav__float li a span:last-child::before { right: -7px; top: -7px; }
.l-nav__float li a span:last-child::after { bottom: -7px; right: -7px; }
.l-nav__float li a:hover { color: #fff; opacity: .6;}
.l-nav__float li a::after { content: '\e80a'; display: inline-block; font-size: 16px; font-family: 'icon'; padding-left: 1.8em; }
.l-nav__float li a:hover::after { color: #fff; }
.l-nav__float .page-title { display: none; }
.l-nav__float .page-title img { width: 254px; }
.l-nav__float.is-fixed { position: fixed; z-index: 10; }
.l-nav__float.is-fixed .l-inner { align-items: center; display: inline-flex; justify-content: space-between; }
.l-nav__float.is-fixed .page-title { display: inline-block; }
.l-nav__float.is-fixed .page-title a { font-size: 1.4em;  font-weight: bold; color: #9d7f5f; /*letter-spacing: 1.6px; text-shadow: 3px 3px 3px #999;*/ }

.l-nav__float.is-fixed li { padding: 5px 0; }
.l-nav__float.is-fixed li + li { padding-left: 4px; }
.l-nav__float.is-fixed li a { font-size: 15px; width: 237px; }

.header-title { margin-bottom: 30px; }
.header-title img { width: 696px; }
.c-about__col li { padding: 30px 24px 18px; width: 356px; }
.c-about__col .pic { margin-bottom: 24px; }
.c-about__col .pic img { width: 116px; }
.c-about__col h3 { color: #6b4012; font-size: 18px; font-weight: bold; margin-bottom: .8em; }
.c-about__col p { font-size: 14px; text-align: left; }
.c-about__col p .cap { display: block; }
.c-flow__list { padding: 60px 0; }
.c-flow__list .copy { position: relative; width: 100%; }
.c-flow__list .copy::after { background-color: #ac9884; content: ""; display: inline-block; height: 1px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%); width: calc(100% - 120px); }
.c-flow__list .copy::after { right: 0; }
.c-flow__list .copy span { background-color: #fff; display: inline-block; padding: 0 6%; position: relative; z-index: 3;  }
.c-flow__list .copy span img { width: 460px; }
.c-flow__item { align-items: flex-start; background: url(../images/flow-pic__bg.png) no-repeat 97% 44px / 120px auto; padding: 100px 60px 0; position: relative; }
.c-flow__item::after { bottom: -74px; color: #c1a587; content: '\e80a'; display: inline-block; font-size: 36px; font-family: 'icon'; left: 50%; position: absolute; transform: translateX(-50%); }
.c-flow__item:last-child::after { content: none; }
.c-flow__item .txt { padding-left: 100px; position: relative; text-align: left; width: 515px; }
.c-flow__item .txt .label { background-color: #70a91e; border-radius: 50%; color: #fff; display: block; font-size: 18px; height: 108px; left: -22px; line-height: 1; padding-top: 18px; position: absolute; text-align: center; top: -40px; width: 108px; }
.c-flow__item .txt .label em { display: block; font-size: 48px; }
.c-flow__item .txt h3 { color: #6b4012; font-size: 22px; font-weight: bold; line-height: 1.4; margin-bottom: 1em; padding-left: 1.5em; position: relative; }
.c-flow__item .txt h3::before { background-color: #70a91e; content: ""; height: 6px; left: 0; margin-top: -3px; position: absolute; top: .66em; width: 1em; }
.c-flow__item .txt p, .c-flow__item .txt ul { font-size: 16px; }
.c-flow__item .txt p + p, .c-flow__item .txt ul + p, .c-flow__item .txt .arrow { margin-top: 1.5em; }
.c-flow__item .txt .btn { font-size: 16px; height: 56px; width: 300px; }
.c-flow__item .pic { background-color: #fff; box-shadow:1px 1px 3px 1px #dedede; width: 440px; }
.c-flow__item .pic img { width: 100%; }
.c-notice__txt { font-size: 16px; padding:10px 70px; text-align: center; }
.c-notice__txt h3, .c-notice__txt ul + p, .c-notice__txt p + .disc { margin-top: 1.5em; }
.c-notice__txt h3 { border-bottom: 1px dashed #333; margin-bottom: .5em; }
.c-notice__txt .disc > li { padding-bottom: 4px; }
.c-area__filter li { background-color: #fff; border: 1px solid #c19c75; border-radius: 18px; cursor: pointer; display: block; line-height: 36px; transition: all .5s ease; width: 120px; }
.c-area__filter li:hover { background-color: #ffeebc; }
.c-area__filter li.is-active { background-color: #70a91e; border-color: #70a91e; color: #fff; position: relative; }
.c-area__filter li.is-active::after { border-style: solid; border-color: #70a91e transparent transparent transparent; border-width: 8px 8px 0 8px; bottom: -8px; content: ""; height: 0; left: 0; margin: auto; position: absolute; right: 0; width: 0; }
.c-area__list { padding-bottom: 30px; }
.c-area__item { padding-top: 60px; }
.c-area__title { border-top: 1px solid #acb130; margin-bottom: 20px; text-align: left; }
.c-area__title h3 { background: #acb130 url(../images/l-nav__bg.png) repeat-x 50% / 200px; color: #fff; display: inline-block; font-size: 18px; font-weight: bold; line-height: 2em; padding: 0 2em 0 1em; position: relative; text-align: center; width: 200px; }
.c-area__title h3::after { border-color: transparent #f5f5f5 transparent transparent; border-style: solid; border-width: 36px 28px 0 0; content: ""; height:0; position:absolute; right:0; top:0; width:0; }
.c-area__data { align-items: center; display: flex; font-size: 16px; padding: 4px 30px; width: 100%; }
.c-area__name { position: relative; text-align: left; width: 360px; }
.c-area__name span { background-color: #f5f5f5; display: inline-block; font-weight: bold; padding-right: 2em; }
.c-area__name::before { border-top: 1px dotted #000; content: ""; display: block; height: 1px; left: 0; position: absolute; top: 50%; width: 100%; z-index: -1; }
.c-area__link { padding-left: 2em; position: relative; width: 700px; }
.c-area__link ul { display: flex; }
.c-area__link li { display: inline-block; }
.c-area__link li + li { padding-left: .6em; }
.c-area__link li a { background-color: #fff; border-radius: 3px; display: block; line-height: 36px; padding: 0 1.6em; }
.c-area__link li a::before { margin-left: 0; padding-right: .4em; }

/* 追加 */
.header-title h2 { position: relative; display: inline-block; font-size: 2.6rem; font-weight: bold; padding: 0 60px; }
.header-title h2:before, .header-title h2:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: black; }
.header-title h2:before { left:0; }
.header-title h2:after { right: 0; }

.header-title h3 { position: relative; display: inline-block; font-size: 2.2rem; font-weight: bold; padding: 0 60px; margin-top:60px; }
.header-title h3:before, .header-title h3:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: black; }
.header-title h3:before { left:0; }
.header-title h3:after { right: 0; }




.l-mv .lead { display: inline-block; position: relative; height: 60px; line-height: 60px; text-align: center; padding: 7px 0; font-size: 18px; background: #c19c75; color: #fff; letter-spacing: 1.5px; box-sizing: border-box; margin-bottom: 3px;  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); }
.l-mv .lead p { margin: 0; padding: 0 30px; border-top: dashed 1px #FFF; border-bottom: dashed 1px #FFF; line-height: 46px;/* font-weight: bold; */ text-shadow: 3px 3px 3px #999; }
.l-mv .lead:before, .l-mv .lead:after { position: absolute; content: ''; width: 0px; height: 0px; z-index: 1; }
.l-mv .lead:before { top: 0; left: -15px; border-width: 30px 0px 30px 15px; border-color: #c19c75 #c19c75 #c19c75 transparent; border-style: solid; }
.l-mv .lead:after { top: 0; right: -15px; border-width: 30px 15px 30px 0px; border-color: #c19c75 transparent #c19c75 #c19c75; border-style: solid; }

.catch { width:400px; display: inline-block; position: relative; padding: 10px 20px; font-size: 18px; font-weight: bold; color: #9d7f5f; letter-spacing: 1.5px; background: #f2d8bf; margin-top: 30px; }
.catch:before { position: absolute; content: ''; top: 100%; left: 0; border: none; border-bottom: solid 15px transparent; border-right: solid 20px rgb(149, 158, 155); }
.catch:after  { position: absolute; content: ''; top: 100%; right: 0; border: none; border-bottom: solid 15px transparent; border-left: solid 20px rgb(149, 158, 155); }
.caution {/*  color:#cb0800;*/ font-size: 1.1em;  }


/* ==================================================
   クーポン
================================================== */
.coupon-outer{
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0 -20px;
  justify-content: left; 
}
.coupon-outer > li{
  width: calc((100% - 60px) / 3);
  margin: 20px 0 0 20px;

}
.coupon-outer > li a, 
.coupon-outer > li .disable{
  position: relative;
  display: block;
  height: 100%;
  padding: 20px 0;
  color: #333;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(119, 113, 99, 0.3);
  box-sizing: border-box;
  border: solid 2px #4bb6e8;
  border-radius: 11px;
}
.coupon-outer > li .disable .disable-txt {
  position: absolute;
  display: block;
  background-color: rgba(102, 102, 102, 0.7);
  width:6em;
  height:3em;
  line-height:3em;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  color: #fff;
  font-size:2.5em;
  z-index:6;
  transform: rotate(-10deg);
  -moz-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
}
.coupon-outer > li a:link, .coupon-outer > li a:visited, .coupon-outer > li a:hover, .coupon-outer > li a:active {
  color: #333;
  text-decoration: none;
}
.coupon-outer > li a:hover {
  opacity: .6;
  text-decoration: none !important;
  transition: all 0.4s ease;
}
.coupon-outer > li .coupon-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 85px;
  height: 85px;
  overflow: hidden;
}
.coupon-outer > li .coupon-box {
  display: inline-block;
  position: absolute;
  padding: 5px 0;
  left: -24px;
  top: 20px;
  width: 160px;
  text-align: center;
  font-size: 1em;
  line-height: 16px;
  background: /*#39c3d4*/ /*#a6658d */ #cbb586;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px /*rgb(57, 195, 212)*/ /*#a6658d */ #cbb586;
  border-top: dashed 1px rgba(255, 255, 255, 0.65);
  border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}
.coupon_area { font-size:2.5em; position: relative; padding: 0; text-align: center; font-weight: bold; }

.coupon-btn { 
width:80%; margin:1em auto 0; background: #4bb6e8; color: #fff; box-shadow: 0 2px 6px 0px rgba(119, 113, 99, 0.3); 
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;

  font-size: 1.2em; 
  min-height: 43px;
  padding: 5px 20px 5px 5px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
/* border: dotted 1px #333; */
/* border: dotted 1px #ebcc00; */
}
.coupon-btn:after{
  font-family: "icon";
  content: '\e803';
  font-style: normal;
  font-weight: normal;
  speak: none;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -o-transform: translate(0,-50%);
  transform: translate(0,-50%);
  font-size: 1.8rem;
  color: #fff;
}
.coupon-btn .show_pc { display:inline !important; }
.coupon-btn .show_sp { display:none !important; }

/* h4:before  { content: "\e973"; } 県 */
/* h4:before  { content: "\e92f"; } 旗 */
/* h4:before  { content: "\e910"; } 鞄 */
/* h4:before  { content: "\e911"; } 鞄 */
/* h4:before  { content: "\e934"; } 宿 */
/* h4:before  { content: "\e904"; } 次へ */
/* h4:before  { content: "\e908"; } 次へ */
/* h4:before  { content: "\e906"; } 下へ */




/* リスト - 横並びリンク */
.note-list-type {
  font-size: 0;
}
.note-list-type > li {
  display: inline-block;
  position: relative;
  padding-right: .8em;
  margin-right: .8em;
  font-size: 1.8rem;
  color: #777;
}
.note-list-type > li:after {
  content: "";
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background-color: #d7d7d7;
}
.note-list-type > li a {
  display: inline-block;
  color: #125687;
}
.note-list-type > li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.note-list-type > li:last-child:after {
  display: none;
}
.note-list-type__label + li {
  margin-left: 0;
}
.note-list-type__label + li:after {
  display: none;
}
p.detail { font-size: 1.8rem; margin-top: 1.2em;}