@charset "utf-8";

:root {
  --text-color: #3C3D47;/*　ページ全体の文字色のデフォルト色　*/
  --accent-color_blue: #2D3160;/*　ナビ背景/h2文字色　*/
  --btn-color_orange: #F29A16;/*　オレンジボタン色　*/
  --box-shadow_grey: #DDD;/*　ボックスの影色　*/
}

/*PCSP共通設定*/
html {scroll-behavior: smooth;}/*smooth scroll*/
#wrapper {line-height: 1.4;}
main {
	font-family: "Noto Sans JP", "Helvetica Neue", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
#dirPathBlock {
	overflow-x: scroll;
	overflow-y: hidden;
}
#dirPathBlock,
#anchorLinkBlock {margin: 2%;}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
#dirPathBlock p {width: max-content;}
.inner{
	width: 94%;
	color: var(--text-color);
	font-size: 16px;
	margin: 0 3%;
	padding: 15px 0;
	box-sizing: border-box;
}
main article img {
	width: 100%;
	height: auto
}
h1 {
	font-size: 12px;
	margin: 0 1% 1%;
}
/*title*/
#title_MV img {
	width: 100%;
}
#title_MV picture {
	width: 100%;
	height: 129px;
}


/*navi*/
nav#nav {
	background: var(--accent-color_blue);
}
nav#nav ul {
	display: flex;
	justify-content: center;
}
nav#nav li {
	width: 100%;
	border-right: 1px solid #FFF;
	align-content: center;
}
nav#nav li:last-child {border-right: none;}
nav#nav li a {
	font-size: 11px;
	color: #FFF !important;
	display: block;
	padding: 10px 0;
	text-align: center;
	font-weight: 300;
}
h2 {
	font-size: 20px;
	color: var(--accent-color_blue);
	font-weight: bold;
	text-align: center;
	margin: 0 auto 8%;
}
h2 small {
	width: 100%;
	display: inline-block;
	color: var(--text-color);
	font-size: 14px;
	font-weight: normal;
}

/*pickup-hotel*/
dl.pickup-hotel {
	background: #F9F6F4;
	padding: 10px;
	box-shadow: 3px 4px 10px 2px rgba(0,0,0,7%);
	border-radius: 5px;
}
dl.pickup-hotel h3 {
	text-align: center;
	margin: 5% 0 8%;
	font-size: 18px;
	font-weight: bold;
}
dl.pickup-hotel p {
	font-size: 14px;
	line-height: 30px;
	margin: 16px 0;
}
.orange-btn {
	/*width: 240px;*/
	margin: 0 auto 8%;
}
.orange-btn a {
	width: 100%;
	height: 52px;
	background-color: var(--btn-color_orange);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 500;
	font-size: 18px;
	border-radius: 33px;
}

/*hotel-list*/
.banner-list li {margin-bottom: 5%;}

/*pickup-hotel*/
.hotel-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}
.hotel-list li {
	width: 48%;
	margin-bottom: 5%;
	border-radius: 5px;
	box-shadow: 3px 4px 10px 2px rgba(0,0,0,7%);
	overflow: clip;
}
.hotel-list li a {color: var(--text-color);}
.hotel-list li dd {
	font-size: 14px;
	padding: 10px;
}
.hotel-list li p {line-height: 25px;}

/*keyword-search*/
.keyword-search {
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
	text-align: center;
}
/*.keyword-search li {
	display: inline-block;
	margin: 0 2.5px 12px;
}*/
.keyword-search li a {
    display: block;
    font-size: 14px;
    padding: 10px 25px;
    border-radius: 100vh;
    border: solid 1px #D9D9D9;
	color: var(--text-color);
}

/*scrollbox*/
.scrollbox_wraper .scrollbox > ul > li {
	margin-bottom: 5%;
	border-radius: 5px;
	box-shadow: 3px 4px 10px 2px rgba(0,0,0,7%);
	overflow: clip;
}
.scrollbox_wraper .scrollbox > ul > li a {color: var(--text-color);}
.scrollbox_wraper .scrollbox > ul > li h3 {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	margin: 12px 0;
}
.scrollbox_wraper .scrollbox > ul > li dd {padding: 15px 0;}
.scrollbox_wraper .scrollbox > ul > li p {
	font-size: 14px;
	line-height: 25px;
}

/*useful-information*/
.scrollbox_wraper .scrollbox > ul.useful-information dt {margin-bottom: 5px}
.scrollbox_wraper .scrollbox > ul.useful-information h3 {
	font-size: 18px;
	text-align: left
}
.scrollbox_wraper .scrollbox > ul.useful-information > li dd {padding: 0;}


/*760px以上*/
@media screen and (min-width: 760px),print {
#wrapper {line-height: 1.231;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: 12px auto;
	display: block;
	font-size: 12px;
}
#dirPathBlock {overflow-x: auto;}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
.inner{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: 0 auto;
	padding: 35px 0;
	font-size: 18px;
}

h1 {
	max-width:1080px;
	min-width:760px;
    margin: 0 auto 5px;
}

/*title*/
#title_MV {
	height: 267px;
	background:url(../images/bg_mv.jpg) no-repeat 50%;
	background-size: cover;
}
#title_MV picture img {
	display: block;
	width: 701px;
	margin: 0 auto;
}

/*navi*/
nav#nav {margin-bottom: 2%;}
nav#nav ul {max-width: 1080px; margin: auto;}
nav#nav li {border-right: none;}
nav#nav li a {
	font-size: 18px;
	margin: 18px 0;
	padding: 0;
	border-right: 2px solid #FFF;
}
nav#nav li:last-child a {border-right: none;}
h2 {
	font-size: 26px;
	line-height: 35px;
	margin: 0 auto 30px;
}
h2 small {font-size: 16px;}

/*pickup-hotel*/
dl.pickup-hotel {
	display: flex;
	gap: 5%;
	position: relative;
	padding: 60px 60px 10px;
	box-shadow: 3px 4px 10px 2px rgba(0,0,0,7%);
	/*box-shadow: 0 4px 4px 0 rgba(0,0,0,25%) ,3px 4px 10px 2px rgba(0,0,0,7%);*/
}
dl.pickup-hotel dt {
	width: 38%;
	box-sizing: border-box;
}
dl.pickup-hotel dd {
	width: 62%;
	box-sizing: border-box;
}
dl.pickup-hotel h3 {
	width: 270px;
	position: absolute;
	left: calc((130% - 270px) / 2);
	font-size: 24px;
	margin: 0;
}
dl.pickup-hotel p {
	font-size: 16px;
	margin: 50px 0 30px;
	line-height: 30px;
}

/*banner-list*/
.banner-list {
	display: flex;
	gap: 2.5%;
	justify-content: center;
}

/*btn*/
.orange-btn a {height: 66px;}

/*hotel-list*/
.hotel-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5%;
}
.hotel-list li {
	width: calc(95% / 4);
	margin-bottom: 1.5%;
}
.hotel-list li dd {padding: 18px 10px;}
.hotel-list li dd p {
	 font-size: 14px;
	 line-height: 25px;
}

/*keyword-search*/
.keyword-search li a {
	font-size: 16px;
	padding: 10px 25px;
}

/*useful-information*/
.scrollbox_wraper .scrollbox > ul.useful-information dt {margin-bottom: 15px}

/*scrollbox*/
.scrollbox_wraper .scrollbox > ul > li p {
	font-size: 14px;
	line-height: 25px;
}

}

/*------------------------------
scroll item
------------------------------*/
/*759px以下*/
@media screen and (max-width: 759.9px) {
.scrollbox_wraper {
	margin-bottom: 25px;
	position: relative;
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
	width: 32px;
	height: 32px;
	position: absolute;
	top: calc(50% - 32px);
	display: block;
	z-index: 1;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0px 0px 5px var(--box-shadow_grey);
}
.scrollbox_wraper .scroll_left_btn {left: 0;}
.scrollbox_wraper .scroll_right_btn {right: 0;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
}
.scrollbox_wraper .scroll_left_btn:after {
	position: absolute;
	top: 16px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_right_btn:after {
	position: absolute;
	top: 16px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_left_btn:before {
	position: absolute;
	top: 7px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_right_btn:before {
	position: absolute;
	top: 7px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display:none!important;
}
.scrollbox_wraper .scrollbox {
	padding: 5px 0;
	overflow-x: scroll!important;
}
.scrollbox_wraper .scrollbox > ul {
	width: fit-content !important;
	display: flex !important;
	margin: 0 auto 15px !important;
	/*padding: 0 calc(calc(100% - calc(1040px / 4)) / 2);*/
}
.scrollbox_wraper .scrollbox > ul > li {
	width: calc(1038px / 4) !important;
	margin: 0 5px !important;
	padding: 10px;
	box-sizing: border-box;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #D9D9D9!important;
	border-radius: 5px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #3C3D47!important;
}
}
/*760px以上*/
@media screen and (min-width: 760px),print {
.scrollbox_wraper {
	width: calc(100% - 80px);
	max-width: 1000px;
	margin: 0 auto 50px;
	position: relative;
}
.scrollbox_wraper .scroll_left_btn,
.scrollbox_wraper .scroll_right_btn {
	width: 32px;
	height: 32px;
	position: absolute;
	top: calc(50% - 32px);
	display: block;
	z-index: 1;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0px 0px 5px var(--box-shadow_grey);
}
.scrollbox_wraper .scroll_left_btn {left: -30px;}
.scrollbox_wraper .scroll_right_btn {right: -30px;}
.scrollbox_wraper .scroll_left_btn:after,
.scrollbox_wraper .scroll_right_btn:after,
.scrollbox_wraper .scroll_left_btn:before,
.scrollbox_wraper .scroll_right_btn:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
}
.scrollbox_wraper .scroll_left_btn:after {
	position: absolute;
	top: 16px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_right_btn:after {
	position: absolute;
	top: 16px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: top;
	transform-origin: top;
}
.scrollbox_wraper .scroll_left_btn:before {
	position: absolute;
	top: 7px;
	left: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_right_btn:before {
	position: absolute;
	top: 7px;
	right: 11px;
	border-left: 2px solid;
	border-top: 10px solid;
	transform: rotate(-45deg);
	-webkit-transform-origin-y: bottom;
	transform-origin: bottom;
}
.scrollbox_wraper .scroll_left_btn.non_scloll,
.scrollbox_wraper .scroll_right_btn.non_scloll {
	transition: 0.1s;
	display:none!important;
}
.scrollbox_wraper .scrollbox {
	padding: 5px 0;
	overflow-x: scroll!important;
}
.scrollbox_wraper .scrollbox > ul {
	width: fit-content !important;
	display: flex !important;
	margin: 0 auto 15px !important;
}
.scrollbox_wraper .scrollbox > ul > li {
	width: calc(958px / 4) !important;
	margin: 0 5px !important;
	padding: 8px;
	box-sizing: border-box;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
	margin: 0 5px !important;
	background: #D9D9D9!important;
	border-radius: 5px !important;
}
.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
	border-radius: 5px !important;
	background: #3C3D47!important;
}

/*1077px以下*/
@media screen and (max-width: 1077.9px),print {
.scrollbox_wraper.pc_no_slider .scrollbox > ul li{
	width: 24%!important;
	margin: 0 0.5%!important;
}
}
@media (min-width: 760px) and (max-width: 900px){
	/*------------------------------
	for Tablet
	------------------------------*/
	.scrollbox_wraper .scrollbox {
		overflow-x: scroll!important;
		padding: 0;
	}
	.scrollbox_wraper .scrollbox > ul > li {
		/*width: 270px !important;*/
		margin: 0 1%;
		background: #fff;
	}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar {height: 5px!important;}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar-track {
		margin: 0 5px!important;
		background: #D9D9D9!important;
		border-radius: 5px!important;
	}
	.scrollbox_wraper .scrollbox::-webkit-scrollbar-thumb {
		border-radius: 5px!important;
		background: #3C3D47!important;
	}
}

/*スクロールなし*/
.scrollbox_wraper.pc_no_slider {
	margin-bottom: 15px;
	position: relative;
}
.scrollbox_wraper.pc_no_slider .scroll_left_btn,
.scrollbox_wraper.pc_no_slider .scroll_right_btn,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar-track,
.scrollbox_wraper.pc_no_slider .scrollbox::-webkit-scrollbar-thumb {display:none!important;}
.scrollbox_wraper.pc_no_slider .scrollbox > ul{flex-wrap: wrap;}
.scrollbox_wraper.pc_no_slider .scrollbox > ul li{margin-bottom: 10px !important;}
}