/* CSS Document */

@charset 'utf-8';
/* CSS Document */
/* Tablet */
@media only screen and (max-width: 1000px){	
.tb{
	display: block;
}
/*-------------------- pankuzu */
#pankuzu {
    margin: 15px auto;
    width: 95%;
}
/*-------------------- frame */
#container {
	font-size: 1.4rem;
}
.wrapper {
	max-width: 1000px;
	width: 90%;
}
.sec{
	padding: 3em 0;
}
.content_title{
	text-align: center;
	margin-bottom: 2em;
}
/*-------------------- main visual */
#main_visual img {
	aspect-ratio: 4 / 1;
	object-fit: cover;
}
/*-------------------- title */
h1.sitetitle {
	font-size: 4rem;
}
h1.sitetitle span {
	font-size: 2rem;
	margin-bottom: .5em;
}
h2{
	font-size: 2rem;
}
h3{
	font-size: 2rem;
}
h4{
	margin-bottom: .5em;
	font-size: 1.8rem;
}
h5{
	font-size: 1.6rem;
}
h6{
	font-size: 1.6rem;
}
h7{
	font-size: 1.4rem;
}
.line_decoration{
	width: 100%;
	margin: 0 auto;
}
/*-------------------- intro */
#intro {
	background: url("../img/intro_background_tb.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.summary {
	max-width: 880px;
	margin: 2.5em auto 0 auto;
	font-size: 1.6rem;
}
.summary span {
	font-size: 2.4rem;
}
/*-------------------- info */
#info .sightseeing{
	margin-top: 1em;
}
#info .sightseeing .serif_medium{
	margin-top: 1em;
}
#info .sightseeing ul{
	flex-wrap: wrap;
	grid-row-gap: 1.5em;
}
#info .sightseeing ul li{
	width: calc((100% - 3em) / 2);
}
#info .sightseeing ul img{
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/*-------------------- hotel */
.hotel li{
	font-size: 1.6rem;
}
/*-------------------- tz_link */
.link_btn{
	font-size: 1.6rem;
}
#tz_link {
	padding: 6em 0 4em;
}
.link_area h3{
	font-size: 1.6rem;
	margin: 2em 0 .5em 0;
}
#tz_link p{
	font-size: 1.6rem;
	margin-bottom: 1em;
}
/*-------------------- grad */
.grad{
	padding: 2em 0 1em;
}
/*-------------------- area_intro */
#area_intro h7{
   font-size: 1.6rem;
}
#area_intro p{
   font-size: 1.4rem;
}
.type_B li{
	width: 100%;
	margin-bottom: .5em;
}
.type_B_flex{
	column-gap: 1em;
}
.area_img{
	flex-basis: 15%;
	line-height: 0;
}
.area_item_info{
	flex-basis: 75%;
}
.arrow{
	flex-basis: 10%;
}
/*-------------------- area_intro */
#airline h3{
	margin-bottom: .5em;
	font-size: 1.6rem;
}
#airline p{
   font-size: 1.4rem;	
}
.type_C{
	grid-row-gap: 2em;
}
/*-------------------- Call Center */
#callcenter h2, #callcenter h3 {
	font-size: 2rem;
}
#callcenter li ,#callcenter p{
	font-size: 1.4rem;
}
}

/* Tablet */
@media only screen and (max-width: 728px){	
/*-------------------- frame */
.pc,.tb{
	display: none;
	}
.sp{
	display: block;
}
#container {
	font-size: 1.4rem;
}
.sec{
	padding: 3em 0;
}
.content_title{
	margin-bottom: 2em;
}
/*-------------------- main visual */
#main_visual img {
	aspect-ratio: 3 / 1;
	object-fit: cover;
}
/*-------------------- title */
h1.sitetitle {
	font-size: 3.2rem;
}
h1.sitetitle span {
	font-size: 1.8rem;
}
h2{
	font-size: 1.8rem;
	margin-bottom: 0;
}
h3{
	font-size: 1.6rem;
}
h4{
	font-size: 1.6rem;
}
h5{
	font-size: 1.4rem;
}
h6{
	font-size: 1.4rem;
	margin-bottom: .3em;
}
h7{
	font-size: 1.4rem;
}
/*-------------------- intro */
#intro {
	background: url("../img/intro_background_tb.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.summary {
	font-size: 1.4rem;
}
.summary span {
	font-size: 2rem;
}
/*-------------------- info */
#info .info_map{
	display: block;
	margin-bottom: 3em;
}
.map_title{
	margin-bottom: 2em;
	text-align: center;
}
#info .info_map p{
	margin-bottom: 2em;
}
#info .info_map h2{
	border-bottom: dotted 2px #E27DBD;
	padding-bottom: .3em;
}
.map_img{
	max-width: 400px;
	margin: 0 auto;
}
#info .sightseeing h2{
	display: inline-block;
	border-bottom: dotted 2px #FFB433;
}
#info .sightseeing .serif_medium{
	font-size: 1.6rem;
}
#info .sightseeing ul{
	display: block;
	margin: 3em 0 2em 0;
}
#info .sightseeing ul li{
	width: 100%;
	margin-bottom: 2em;
}
/*-------------------- hotel */
.hotel .content_title h2{
	border-bottom: dotted 2px #80CBC4;
}
.hotel_name{
	margin: 3em 0 2em 0;
}
.en{
	margin: .3em 0 0 0;
}
.hotel .top img{
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 10%;
	width: 100%;
}
.hotel h5{
	padding: .3em 1em;
}
.hotel li{
	font-size: 1.4rem;
}
/*-------------------- hotel01 */
.type_D_ul{
	display: flex;
	column-gap: .5em;
}
.flex_first{
	width: 100%;
	margin-bottom: .5em;
}
.type_D_ul li{
	width: calc((100% - .5em) / 2);
}
.type_D li img{
	width: 100%;
	vertical-align: bottom;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 0;
}
#hotel02{
	padding-top: 1em;
}
/*-------------------- tz_link */
.link_btn{
	padding: 1em 2em;
	border-radius: 10px;
	font-size: 1.4rem;
}
#tz_link{
	padding: 3em 0 4em;
}
.reaf{
	position: absolute;
	top: -80px;
	left: 0;
	right: 0;
	width: 200px;
}
.tz_link_area h3{
	margin-top: 1em;
}
.link_area h3{
	font-size: 1.6rem;
	margin: 2em 0 .5em 0;
}
#tz_link p{
	font-size: 1.4rem;
	margin-bottom: 1em;
}
.tz_link_area{
	margin-top: 4em;
	padding: 3em 1.5em 2em;
}
#tz_link .link_area{
	padding: 0 2em;
}
/*-------------------- breaktime */
#breaktime img{
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
/*-------------------- grad */
.grad{
	padding: 1em 0 1em;
}
/*-------------------- area_intro */
#area_intro h2{
	border-bottom: dotted 2px #E27DBD;
}
#area_intro h7{
   font-size: 1.4rem;
}
#area_intro p{
   font-size: 1.4rem;
   margin-top: 1em;
}
.type_B{
	display: block;
	margin: 4em 0 2em 0;
}
.type_B li{
	width: 100%;
	padding: .5em;
	margin-bottom: 1em;
	border: solid 2px #ABA5A5;
}
.type_B_flex{
	column-gap: 1em;
}
.area_img{
	flex-basis: 25%;
	line-height: 0;
}
.area_item_info{
	flex-basis: 66%;
}
#area_intro .area_p_margin{
	margin-top: .5em;
}
.arrow{
	padding: 0 0 0 16px;
	font-size: 15px;
	flex-basis: 9%;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.arrow::before{
	width: 35px;
	height: 35px;
}
.arrow::after{
	left: 10px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
/*-------------------- area_intro */
#airline h2.blockttl {
	margin-bottom: 2em;
}
#airline h3{
	margin-bottom: .5em;
	font-size: 1.4rem;
}
#airline p{
   font-size: 1.4rem;	
}
.type_C{
	display: block;
	margin: 2em 0 4em;
}
.type_C li{
	width: 100%;
	margin-bottom: 2em;
}
/*-------------------- Call Center */
#callcenter h2, #callcenter h3 {
	font-size: 1.8rem;
}
#callcenter li ,#callcenter p{
	font-size: 1.4rem;
	margin-bottom: .3em;
}
#callcenter p{
	margin: 1em 0 1.5em;
}
}


/* Smart */
@media only screen and (max-width: 550px){	
h1.sitetitle{
	font-size: 2.5rem;
}
h1.sitetitle span{
	font-size: 1.6rem;
}
/*-------------------- main visual */
#main_visual img {
	aspect-ratio: 5 / 2;
	object-fit: cover;
}
/*-------------------- intro */
#intro {
	background: url("../img/intro_background_sp.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.summary {
	font-size: 1.4rem;
}
.summary span {
	font-size: 2rem;
}
/*-------------------- info */
#info .info_map{
	display: block;
	margin-bottom: 3em;
}
.map_title{
	margin-bottom: 2em;
	text-align: center;
}
#info .info_map p{
	margin-bottom: 2em;
}
#info .info_map h2{
	border-bottom: dotted 2px #E27DBD;
	padding-bottom: .3em;
}
#info .sightseeing {
	margin-top: 3em;
}
#info .sightseeing h2{
	display: inline-block;
	border-bottom: dotted 2px #FFB433;
}
#info .sightseeing h7{
	margin-top: .5em;
}
#info .sightseeing ul{
	display: block;
	margin: 3em 0 2em 0;
}
#info .sightseeing ul li{
	width: 100%;
}
/*-------------------- hotel */
.hotel .content_title h2{
	border-bottom: dotted 2px #80CBC4;
}
.hotel_name{
	margin: 3em 0 2em 0;
}
.hotel .top img{
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 10%;
	width: 100%;
}
.hotel h5{
	padding: .3em 1em;
}
.hotel li{
	font-size: 1.4rem;
}
/*-------------------- hotel01 */
.type_D_ul{
	display: flex;
	column-gap: .5em;
}
.flex_first{
	width: 100%;
	margin-bottom: .5em;
}
.type_D_ul li{
	width: calc((100% - .5em) / 2);
}
.type_D li img{
	width: 100%;
	vertical-align: bottom;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 0;
}
#hotel02{
	padding-top: 1em;
}
/*-------------------- tz_link */
.link_btn{
	padding: 1em 2em;
	border-radius: 10px;
	font-size: 1.4rem;
}
#tz_link{
	padding: 3em 0 4em;
}
.reaf{
	position: absolute;
	top: -80px;
	left: 0;
	right: 0;
	width: 200px;
}
.tz_link_area h3{
	margin-top: 1em;
}
.link_area h3{
	margin: 2em 0 .5em 0;
}
#tz_link p{
	font-size: 1.4rem;
	margin-bottom: 1em;
}
.tz_link_area{
	margin-top: 4em;
	padding: 3em 1.5em 2em;
}
#tz_link .link_area{
	padding: 0 2em;
}
/*-------------------- breaktime */
#breaktime img{
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
/*-------------------- grad */
.grad{
	padding: 1em 0 1em;
}
/*-------------------- area_intro */
#area_intro h2{
	border-bottom: dotted 2px #E27DBD;
}
#area_intro h7{
   font-size: 1.4rem;
}
#area_intro p{
   font-size: 1.4rem;
   margin-top: 1em;
}
.type_B{
	display: block;
	margin: 4em 0 2em 0;
}
.type_B li{
	width: 100%;
	padding: .5em;
	margin-bottom: 1em;
	border: solid 2px #ABA5A5;
}
.type_B_flex{
	column-gap: 1em;
}
.area_img{
	flex-basis: 35%;
	line-height: 0;
}
.area_item_info{
	flex-basis: 56%;
}
#area_intro .area_p_margin{
	margin-top: .5em;
}
.arrow{
	padding: 0 0 0 16px;
	font-size: 15px;
	flex-basis: 9%;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.arrow::before{
	width: 25px;
	height: 25px;
}
.arrow::after{
	left: 7px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
/*-------------------- area_intro */
#airline h2.blockttl {
	margin-bottom: 2em;
}
#airline h3{
	margin-bottom: .5em;
	font-size: 1.4rem;
}
#airline p{
   font-size: 1.4rem;	
}
.type_C{
	display: block;
	margin: 2em 0 4em;
}
.type_C li{
	width: 100%;
	margin-bottom: 1.5em;
}
/*-------------------- Call Center */
#callcenter h2, #callcenter h3 {
	font-size: 1.8rem;
}
#callcenter li ,#callcenter p{
	font-size: 1.4rem;
	margin-bottom: .3em;
}
#callcenter p{
	margin: 1em 0 1.5em;
}
}