@charset "utf-8";
/* CSS Document */

/*html {
  scroll-behavior: smooth;
}*/
#container{
	font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    margin: 0;
	font-size: 14px;
	color: #444444;
	line-height: 1.7;	
}

* { box-sizing: border-box; }
#container a{
	text-decoration: none;
/*	color: #333;*/
}
#container a:hover{
/*	color: #333;*/
/*	opacity: .6;*/
}

.w1000{
	width: 1300px;
	margin: 0 auto;
}

.pc{display: block;}
.sp{display: none;}

ul {
  list-style: none;
}
dd{text-align: justify;}
/*-- 画像位置 --*/
#container img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
	max-width: 100%;
}


/*-- flex --*/
.flex_box {
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
/*	align-items: flex-end;*/
}
/*-- font --*/
.kiwi{	font-family: 'Kiwi Maru', serif;}
.kos{	font-family: 'Kosugi Maru', sans-serif;}
.s-font{font-size: 0.9em;}
.noto-serif-jp {	font-family: "Noto Serif JP", serif;}
.shippori-mincho {  font-family: "Shippori Mincho B1", serif;}
.dancing-script {	font-family: "Dancing Script", cursive;}

/*--------------------page-top */
#page-top{
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
}
#page-top a{
	font-size: 4vw;
    color:  rgba(255,0,223,0.50);
	text-decoration: none;
}
#page-top a:hover{
    color:  rgba(255,0,223,1.00);
}
/*--------------------パンくず */
#pankuzu{
	margin: 15px auto;
	width: 1000px;
	font-size: .85em;
}

#pankuzu ul{
    padding: 0 0 5px;
    _zoom: 1;
}
#pankuzu li{
    float: left;
    list-style: none;
}
#pankuzu li + li:before{
    margin: 0 8px;
    content: '>';
}


/*------------------------------common*/
.marker{
background:linear-gradient(transparent 65%, #fff799 65%);
font-weight:bold; 
}
.image{position: relative;}
.cre{
	text-align: right;
	font-size: .8em;
	line-height: 1;
	position: absolute;
	bottom:0;
	right: 0;
	background: rgba(0,0,0,0.70);
	padding: 1px 3px;
	color: #fff;
}

/*------------------------------------------------------title_box*/
.title_box{
	position: relative;
	height: 499px;
}
h1 {
    position: absolute;
	top:0;
	left:0;
	right: 0;
	max-width: 483px;
	margin:auto;
	z-index: 99;
/*	padding: 30% 0;*/
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    background: url("../img/title.png") no-repeat center center / contain;	
}
/*#title h1{
    max-width: 600px;
    margin: 0 auto;
    padding: 30% 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    background: url("../img/title_main.png") no-repeat center center;
    background-size: 90%;
}*/

.scroll-image {
    overflow: hidden;
}
.scroll-image ul {
    list-style: none;
    display: flex;
    width: max-content;
    animation: scrollAnimation 50s linear infinite;
}
@keyframes scrollAnimation {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}
.scroll-image ul li {
/*    width: calc(210vw / 1);*/
	height: 499px;
	background: #07003E;
}
.scroll-image ul li img {
    display: block;
/*    width: 400vw;*/
}


/***	★min770px－max999px  ***/
@media screen /*and (min-width: 770px) */and (max-width: 1300px){

#container, .w1000 {
	min-width: 100%;  
	width: 100%;
	margin: 0;
	overflow: hidden;
}
.w1000 {	padding: 0 5px;}
}

/***	★タブレット対応  ***/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

img{
    width /***/: auto;
    max-width: 100%;
    height: auto;
}
/* 非表示指定 */
.pc {display: none;}
.sp{display: block;}
#breadcrumbs,#pankuzu,#breadcrumb {display: none;}
	
/*.title_box{
	height: 71vw;
	border-bottom: #000239 10px solid;
}
.scroll-image ul li {
	height: 70vw;
	background: #07003E;
}
.scroll-image ul li img {
    display: block;
    width: 218vw;
}*/
}
/*** スマホ対応 ***/
@media screen and (max-width:678px)  {
/*h1 {	margin:-15% auto 0;}*/
}
/*** スマホ対応 ***/
@media screen and (max-width:599px)  {
br{display: none;}
.title_box{	
	height: 99vw;

}	
.scroll-image ul li {
	height: 99vw;
/*	height: 25%;*/
	display: block;
	background: #07003E;
}
.scroll-image ul li img {
    display: block;
    width: 170vw;
}
	
}	
/*-----------------------------------------------------------------intro*/
#intro{
	padding: 2em 0;
	text-align: center;
}
#intro h2{
	font-size: min(4vw,25px);
	font-family: "Noto Serif JP", serif;
}
#intro h2 ruby{
	font-size: 1.4em;
	color: #003a7a;
}
#intro h2 ruby.pk{color: #eb3781;}
rt{font-size: .45em;}
#intro h2 + p{
	font-family: "Noto Serif JP", serif;
	font-size: min(4vw,18px);
	font-weight: 700;
}
#intro div{	
	margin-top: 2em;
	background: #E39FFF;
	background: linear-gradient(112deg,rgba(227, 159, 255, 1) 0%, rgba(30, 156, 215, 1) 52%, rgba(0, 117, 190, 1) 80%);
	color: #fff;
	padding: 2em 0;
}

/***	★min770px－max999px  ***/
@media screen /*and (min-width: 770px) */and (max-width: 1300px){


}

/***	★タブレット対応  ***/
@media screen /*and (min-width:600px) */and (max-width:769px)  {
#intro div{text-align: left;}	
#intro div br{display: none;}
	
}
/*** スマホ対応 ***/
@media screen and (max-width:599px)  {
#intro h2 + p{text-align: left;}	
}

/*---------------------------------------------------point*/
#point{
    padding: 5vw 0;
}
#point h2{
	text-align: center;
	font-family: "Noto Serif JP", serif;
	font-size: min(5.3vw,1.8em);
	margin-bottom: 5vw;
	position: relative;
}
#point h2 small{
	display: block;
	width: 20em;
	margin: auto;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 600;
	
	position: relative;
    padding-bottom: 0.1em;
    border-bottom: 2px solid #0071bc;
    font-size: .7em;
	margin-bottom: .7em;
}
#point h2 small::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) skew(-25deg);
    height: 13px;
    width: 10px;
    border-right: 3px solid #0071bc;
    background-color: white;
    content: "";
}
#point .flex_box{
	flex-wrap: wrap;
	justify-content: center;
}
.point_box{
	width: calc(100%/3 - 3vw);
	margin: 2.5em 1.5vw;
    border: 2px solid #0071bc;
	position: relative;
	background: #fff0f6;
	padding: 1em 1.5em 1.5em;
}
.point_box:nth-of-type(2){	background: #fefdee;}
.point_box:nth-of-type(3){	background: #ebf6fb;}
.point_box:nth-of-type(4){	background: #f0fff9;}
.point_box:nth-of-type(5){	background: #eeedfc;}
.point_box .icon{
	position: absolute;
	top:-2em;
	left: 3px;
}
.point_box dt{
	font-size: min(1.3vw,1.3em);
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	border-bottom:  2px solid #0071bc;
	margin-left: 3em;
	margin-bottom: .5em;
	padding: 0 .5em;
}

/***	★タブレット対応  ***/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

#point .flex_box{	display: block;}
.point_box{
	width: 95%;
	margin: 2.5em auto;
}
.point_box dt{	font-size: min(4.4vw,1.5em);}
	
}

/*---------------------------------------------------tour*/
#tour{
	background: url("../img/tour_bg.jpg") repeat-y ;
	background-size: 100%;
	
	padding: 5em 0;
}
#tour h2{
	font-family: "Noto Serif JP", serif;
	font-weight: 800;
	text-align: center;
	font-size: min(5.3vw,2.3em);
	color: #d4145a;
	margin-bottom: 2em;
}
#tour h2 small{
	display: block;
	font-family: "Dancing Script", cursive;
}
#tour h2 + p{
	font-family: "Noto Serif JP", serif;
	font-size: min(1.9vw,1.2em);
	font-weight: 700;
	text-align: center;
	padding: 1em;
	backdrop-filter: blur(30px);
}
#tour h2 + p strong{
	font-size: 1.3em;
	color: #003a7a;
}
#tour h2 + p strong.pk{color: #eb3781;}

#tour ul{
    padding: 7em 0 4em;
	flex-wrap: wrap;
/*	justify-content: center;*/
}
.tour_box{
	background: #FFF;
	width : calc(100% / 3 - 1.4em ) ;
	padding-bottom: 2.5em;
	position: relative;
	margin: 0 .7em 2em;
}
.tour_box:not(.commingsoon)::after{
	content: "詳細はこちら";
	color: #0A077D;
	font-size: .9em;
	font-weight: 700;
	position: absolute;
	right: .5em;
	bottom: .2em;		
}
/*.tour_box.commingsoon{
	background: rgba(0,0,0,0.29);
}*/
.tour_box.commingsoon::after{
	content: "Comming Soon";
	color: rgba(0,26,54,0.70);
	font-size: 1.8em;
	font-weight: 700;
	position: absolute;
	margin: auto;
	right:2em;
	bottom: 1em;		
}
.tour_box dl{
	padding: 1em;
}
.area{
	background: rgba(0,32,94,0.70);
	color: #FFF;
	line-height: 2.2em;
	
	position: absolute;
	top:0;
	left:0;
	
	font-size: min(2vw,1.4em);
	padding: 0 .7em;
	font-weight: 600;	
}
.td::before{
	content: "時差";
	color: #fa4848;
	border: #fa4848 1px solid;
	padding: 0 .3em;
	margin-right: .5em;
	font-weight: 700;
}
.ft {
	margin: .5em 0 .8em;
	border: 1px solid #61A6D3;
	padding: 3px;
	font-weight: 600;
}
.ft span{
	display: block;
	background: #C9E4ED;
	color: #0071bc;
	padding: 0 .3em;
	margin-bottom: 3px;
}
.tour_box dd.link_url a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.tour_box.commingsoon dd.link_url a{
	background: rgba(0,0,0,0.29);
	cursor: none;
}
.tour_box:not(.commingsoon) dd.link_url a:hover{ 
	background: rgba(255,153,207,0.20);
	box-shadow: 0 0 15px 0 #fff;
}
.tour_box img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}


/***	★タブレット対応  ***/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

.tour_box{
	width : calc(100% / 2 - 1.4em ) ;
	margin: 0 .7em 2em;
}
#tour h2 + p br{display: none;}
#tour h2 + p{
	font-size: 3vw;
	text-align: left;
}

}
/*** スマホ対応 ***/
@media screen and (max-width:599px)  {

#tour ul{
	display:block;
    padding: 5vw 0 ;
}
.tour_box{
	width : 97%;
	padding-bottom: 0;
	margin: 0 auto 2em;
	display: flex;
}
.tour_box dl{
	padding: 1em 1em 1.8em;
	font-size: 0.85em;
	flex: 2;
}
.tour_box dd{	line-height: 1.4;}
.area{	font-size: 2.5vw;}
.tour_box .image {
  width: 30%; 
  height: auto;
}

.tour_box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}	
	
}



/*--------------------btn */
.btn{
	text-align: center;
	margin-top: 2em;
}
.btn a{
	color:#fff;
	border:#FFFFFF solid 5px;
	border-radius: 20px;
	padding: 1em 2em;
	text-align: center;
	transition: all 0.2s ease;
	cursor: pointer;
	font-weight: 600;
	width: 100%;
	max-width: 20em;
	margin: auto;
	font-size: 1.4em;
	
	background: rgba(169,229,244,0.40);
	text-shadow: 0 0 10px #FE00FF; 
	box-shadow: 0 0 22px #FE00FF,
    inset 0 0 22px #FE00FF;
}