@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

a {
    color: #019ac6;
}

h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1vw;
    color: #019ac6;
    font-family: "Shippori Mincho", serif;
}

h2 {
    font-size: 2vw;
    font-weight: 600;
    font-family: monospace;
    color: #303030;
}

h3 {
    font-size: 1.5vw;
}

#page-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    font-size: 14px;
    line-height: 1;
    z-index: 1000;
}

#page-top a {
    text-decoration: none;
    color: #fff;
    width: 60px;
    height: 60px;
    text-align: center;
    display: block;
    transition: all .4s ease;
    opacity: 0.7;
}

#page-top a img {
    width: 100%;
    transform: rotate(-180deg);
}

#page-top a:hover {
    text-decoration: none;
    opacity: 1;
    transition: 1s;
}

/* 点滅 */
#page-top{
	-webkit-animation:blink 3s ease-in-out infinite alternate;
    -moz-animation:blink 3s ease-in-out infinite alternate;
    animation:blink 3s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.6;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.6;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.6;}
    100% {opacity:1;}
}


/*ナビメニューのスタイルを指定*/
nav.NavMenu{
	position: fixed; /*表示位置を固定*/
	z-index: 9998; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	right: 0; /*表示位置を指定*/
	background: #fff;/*背景を白にする*/
	color: #000; /*文字色を黒にする*/
  font-size: 1.2vw;
	text-align: center; /*テキストを中央揃え*/
	width: 60%; /*全幅表示*/
	transform: translateY(-100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
}

nav.NavMenu ul{
	background: #019ac6; /*背景をグレーにする*/
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

nav.NavMenu ul li{
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px solid #fff;
}

nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a {
	display: block; /*クリックできる領域を広げる*/
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
	transform: translateY(0%);/*上から出したい場合は、transform: translateYを使う。*/
}

/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;/* bodyに対しての絶対位置指定 */
	right: 28px;
	top: 28px;
	width: 42px;
	height: 42px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 9999;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle span {
	display: block;
	position: absolute;
	left: 6px;
	width: 30px;
	border-bottom: solid 3px #000000;
	transition: .35s ease-in-out;/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
	top: 9px;
}

.Toggle span:nth-child(2) {
	top: 18px;
}

.Toggle span:nth-child(3) {
	top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
  display: block;
	top: 18px;
  margin-left: -57vw;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
  margin-left: -57vw;
	transform: rotate(45deg);
}

/* ハンバーガーメニュー内 */
.navmenu-top {
    width: 100%;
    display: flex;
}

.navmenu-top-1 {
    width: 35%;
    display: flex;
}

.navmenu-top-1 ul li a {
    display: block;
    padding: 2vw;
    font-size: 1.4vw;
    color: #fff;
}

.navmenu-top-1 ul li a:hover {
    display: block;
    padding: 2vw;
    font-size: 1.4vw;
    color: #fff;
    background-color: #00c559;
    transition: 0.5s;
}


.nav-menu-box {
    padding: 10vw;
}

.navmenu-top-flex {
    width: 65%;
}

.navmenu-top-2 {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.menu-item1 {
    width: 100%;
    margin: 3vw 0;
    display: flex;
    justify-content: space-around;
}

.menu-item1 p a {
    width: 50%;
    padding: 1vw 2vw;
    font-size: 1.5vw;
    font-weight: bolder;
    background-color: gray;
    color: #fff;
    border-radius: 5px;
}

.menu-item1 p a:hover {
    background-color: #000;
    transition: 0.5s;
}

.menu-item2 {
    width: 100%;
    margin-top: 2vw;
    display: flex;
    justify-content: space-between;
}

.menu-item2-1,
.menu-item2-2,
.menu-item2-3 {
    width: 20%;
    padding: 1vw;
    border: 1px solid gray;
}

.menu-item2-1 a p,
.menu-item2-2 a p,
.menu-item2-3 a p  {
    color: #000;
}

.menu-item2-1 {
    margin-left: 1vw;
}

.menu-item2-3 {
    margin-right: 1vw;
}

.menu-item2 a img {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

.navmenu-top-3 {
    width: 80%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    line-height: 1.6;
}

.navmenu-top-3 div p {
  padding-left: 1vw;
  margin-bottom: 2vw;
  background-color: #019bc63f;
}

.navmenu-top-3 ul li a {
  width: 100%;
    display: block;
    padding: 1.2vw 0 1.2vw 1vw;
    line-height: 0.4;
    background-color: #ffffff;
}

.menu-li1 a span,
.menu-li2 a span,
.menu-li3 a span {
  display: block;
  width: 10%;
  margin-left: auto;
  color: #019ac6;
}

.header1 {
    display: flex;
    margin-top: 1vw;
}

.header1-title a {
    display: flex;
}

.logo-img {
    width: 60px;
    height: 45px;
    margin-top: 0.5vw;
    margin-left: 2vw;
}

.airport-box {
    margin-left: auto;
    margin-right: 2vw;
    opacity: 0;
}

.airport {
	display: none;
}
.Label {		/*タイトル*/
    position: relative;
	padding-top: 1em;
    padding-left: 0.7em;
    padding-right: 1.5em;
	display: block;
    height: 65px;
    margin-left: -128px;
	background-color: #ffffff;
    color: #019ac6;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
    
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #019ac6;
	border-right: 2px solid #019ac6;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 5px );
	right: 10px;
	transform: rotate(135deg);
}
.Label,
.content {
    margin-left: -128px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
    border:1px solid #019ac6;
    position: absolute;
    z-index: 200;
}
.content {		/*本文*/
    width: 90px;
    margin-top: 64px;
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
    border-top: none;
    background-color: #fff;
}
.airport:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding: 20px ;
	transition: all .3s;
}
.airport:checked + .Label::before {
    margin-top: 3px;
	transform: rotate(-45deg) !important;
    transition: 0.2s;
}

.content ul {
    margin-top: -15px;
}

.content ul li {
    padding-top: 5px;
}

.content ul li a{
    color: #019ac6;
}

.rogin {
    display: flex;
    width: 100px;
    height: 67px;
    margin-right: 10vw;
    background-color: #019ac6;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.rogin a {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
}


.plan {
    display: flex;
    width: 100%;
    margin-top: 2vw;
    margin-bottom: 1vw;
    font-size: 1.2vw;
}

.plan a {
    position: relative;
    color: #000;
}

.plan a::after {
    background-color: #019ac6;
    bottom: -8px;
    content: "";
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: all .3s;
    width: 100%;
}

.plan a:hover::after {
    bottom: -4px;
    opacity: 1;
}

.country1 img {
    width: 3vw;
}



/* main */
.main_imgBox {
    height: 40vw;
    overflow: hidden;
    position: relative; 
}
  
.main_img {
    z-index: 5;
    opacity: 0;
    width: 100%;
    height: 40vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 24s 0s infinite;
    animation: anime 24s 0s infinite; }

.main_img:nth-of-type(2) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s; }

  .main_img:nth-of-type(3) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s; }

  .main_img:nth-of-type(4) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s; }

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
     17% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    35% {
        opacity: 0;
        transform: scale(1.2) ;
        z-index: 9;
    }
    100% { opacity: 0 }
}
 
.tab-wrap {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 2vw 0;
    margin-left: 4.7vw;
    font-size: 1.2vw;
    z-index: 100;
}

.tab-wrap:after {
    content: '';
    width: 100%;
    height: 2px;
    background: rgb(236, 47, 47);
    display: block;
    order: -1;
}

.tab-label {
    color: White;
    background: rgba(59, 59, 59, 0.795);
    font-weight: 600;
    text-align: center;
    padding: 10px;
    order: -1;
    position: relative;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    flex: 1;
    z-index: 100;
}

.tab-label:not(:last-of-type) {
    margin-right: 5px;
}

.tab-content {
    width: 90vw;
    height: 0;
    overflow: hidden;
    opacity: 0;
    background: rgb(207, 207, 207);
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
    background: rgb(207, 207, 207);
    color: #383838;
}

.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    overflow: auto;
    padding: 15px;
    opacity: 1;
    transition: .5s opacity;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}

/* ラジオボタン非表示 */
.tab-switch {
     display: none;
}

.stay-box {
    display: flex;
    font-size: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.stay-box:first-child {
    margin-bottom: 2vw;
}

.stay-box p {
    margin-right: 1vw;
}

/* タブ　ホテル */

.tab-container {
    position: relative;
    margin-right: 2vw;
}

.tab-container::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 14px;
    width: 5px;
    height: 5px;
    border-top: 2px solid skyblue;
    border-left: 2px solid skyblue;
    pointer-events: none;
    transform: translateY(-50%) rotate(-135deg);
}

.mt-2:nth-last-of-type(1) {
    margin-left: 2vw;
}

.box-p {
    width: 8vw;
    font-weight: 600;
}

/* ステッパー */
#count {
    width: 100%;
    font-size: 1.3vw;
}

#count  tr {
    margin-right: auto; 
}

#count  tr th {
    display: inline-block;
    margin-top: 0.5vw;
    margin-right: 2vw;
    background-color: #019bc61a;
}

#count input {
	width: 3vw;
	height: 3vw;
	box-sizing: border-box;
	text-align: center;
}

#count .minus, 
#count .plus {
	width: 3vw;
	height: 3vw;
    font-size: 1.2vw;
}


.send {
    display: block;
    width: 150px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: serif;
    background-color: #00c559;
    border: 1px solid #101010;
    cursor: pointer;
    transition: 1s;
    border-radius: 10px;
}

.send:hover {
    background-color: #00fd72;
    transition: 0.3s;
}

/* セレクトボックス */
select{
    position: relative;
    width: 150px;
    height: 30px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
}


.calendar {
    margin-right: 1vw;
}

.date-title {
    margin-right: 1vw;
}

.input-box {
    font-size: 1.3vw;
}
/*  */

main {
  background-image: url(../images/redirect_yadotokushu_onsen_thumb.jpg);
  background-size: 100% 100%;
  background-color: rgba(255, 255, 255, 0.2);
  background-blend-mode: lighten;
}

h2 {
  margin: 2vw 0;
  padding: 1vw 0 1vw 2vw;
  background-color: #b6cacf;
}

.section-flex {
  display: flex;
  width: 100%;
  padding: 2vw 0;
}

.hotel-box1 {
  width: 45vw;
  padding: 1vw;
  margin-left: 1.75vw;
  background-color: #ebebebab;
}

.hotel-box1 select {
    width: 40%;
}

.hotel-box1 p {
    font-size: 1.3vw;
  }

.hotel-box2 {
  width: 45vw;
  height: 24vw;
  padding: 1vw;
  margin-left: 1vw;
  background-color: #ebebebab;
  background-image: url(../images/japan02.png);
  background-size: 100% 100%;
}

.hotel-box3 {
  width: 45vw;
  padding: 1vw;
  margin-top: 1vw;
  margin-left: 1vw;
  background-color: #ebebebab;
}

.hotel-box3 div span {
  display: inline-block;
  flex-wrap: wrap;
  padding: 1px 4px;
  margin: 0.2vw;
  background-color: #ffffff;
  border: 1px solid gray;
  border-radius: 10px;
  font-size: 1.1vw;
}


#prefecture {
  margin-top: 1vw;
}

#prefecture:nth-last-of-type(2) {
    font-size: 1.3vw;
}
  
#city:nth-last-of-type(1) {
    font-size: 1.3vw;
}

.flexbox {
    display: flex;
    margin-right: 3vw;
}

.flexbox input {
  margin-top: 1vw;
}

.flexbox label {
  margin-top: 1vw;
}

input[type="radio"] , input[type="checkbox"]{
    -webkit-transform: scale(5);
    transform: scale(0.8);
}

.human {
  margin-top: 1vw;
}

.container {
  margin-top: 1vw;
}

.container2 {
  margin-top: 1vw;
}

.send {
  margin-top: 1vw;
}

.absolute-item {
    position: relative;
}

.absolute-item a {
  color: #e4e4e4;
}

.absolute-item div:nth-child(1) {
  position: absolute;
  margin-top: 1vw;
  margin-left: 19vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(2) {
  position: absolute;
  margin-top: 6vw;
  margin-left: 30vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(3) {
  position: absolute;
  margin-top: 5vw;
  margin-left: 14vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(4) {
  position: absolute;
  margin-top: 10vw;
  margin-left: 30vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(5) {
  position: absolute;
  margin-top: 16vw;
  margin-left: 26vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(6) {
  position: absolute;
  margin-top: 5vw;
  margin-left: 18vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(7) {
  position: absolute;
  margin-top: 7.8vw;
  margin-left: 14vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(8) {
  position: absolute;
  margin-top: 18vw;
  margin-left: 19vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(9) {
  position: absolute;
  margin-top: 18.5vw;
  margin-left: 13vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(10) {
  position: absolute;
  margin-top: 11vw;
  margin-left: 6vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(11) {
  position: absolute;
  margin-top: 20vw;
  margin-left: 3vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}

.absolute-item div:nth-child(12) {
  position: absolute;
  margin-top: 19vw;
  margin-left: 39vw;
  padding: 0.1vw 0.5vw;
  background-color: #443d3dc2;
  border-radius: 5px;
  font-size: 1.4vw;
}


footer {
    width: 100%;
    text-align: center;
    font-size: 1.4vw;
}
  
.footer-flex {
    display: flex;
    width: 80%;
    margin: 2vw auto;
    padding: 1vw 0;
    justify-content: space-around;
    background-color: #019bc61a;
}
  /* z-index
      nav 9998-9999
      Label 200
      heroimg 5-9
      tab 100 */
  
  /* メインカラー#019ac6 */