@charset "utf-8";
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css);
@import url(https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap);
@import url(https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css);
@import url(slide.css);
@import url(inview.css);

*,
*::before,
*::after {
	box-sizing: border-box
}

:root {
	--primary-color: #343434;
	--primary-inverse-color: #fff;
	--primary-color-rgb: 52, 52, 52;
	--global-space: 3vw
}

@keyframes animation1 {
	0% {
		left: -200px
	}

	100% {
		left: 0
	}
}

@keyframes opa1 {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

body * {
	box-sizing: border-box
}

html,
body {
	font-size: 13px
}

@media screen and (min-width:900px) {

	html,
	body {
		font-size: 16px
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: "M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	color: #333;
	line-height: 2;
	animation: opa1 0.2s 0.5s both
}

figure {
	margin: 0
}

dd {
	margin: 0
}

nav,
ul,
li,
ol {
	margin: 0;
	padding: 0
}

nav ul {
	list-style: none
}

input {
	font-size: 1rem
}

ul,
ol {
	margin-left: 1.5rem;
	margin-bottom: 1rem
}

table {
	border-collapse: collapse
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle
}

iframe {
	width: 100%
}

section+section {
	margin-top: 8vw
}

a {
	color: #333;
	transition: 0.3s
}

a:hover {
	color: var(--primary-color);
	filter: brightness(1.2)
}

.bg1 {
	background: url(../images/bgpt1.png) repeat center top / 150px, linear-gradient(180deg, #672436, #3e1621)
}

.bg1f {
	background: url(../images/bgpt1f.png) repeat center top / 150px, linear-gradient(180deg, #f3dc8e, #a28130)
}

.bg2 {
	background: url(../images/bgpt2.png) repeat center top / 150px, linear-gradient(180deg, #672436, #3e1621)
}

.bg2f {
	background: url(../images/bgpt2f.png) repeat center top / 150px, linear-gradient(180deg, #f3dc8e, #a28130)
}

.bg5 {
	background: url(../images/bgpt3.png) repeat center top / 150px, linear-gradient(180deg, #ffffff, #ffffff)
}

.bg3f {
	background: url(../images/bgpt3f.png) repeat center top / 150px, linear-gradient(180deg, #f3dc8e, #a28130)
}

.bg4 {
	background: #6e2b62 url(../images/bgpt4.png) repeat center top / 150px
}

.bg4f {
	background: #f5db91 url(../images/bgpt4f.png) repeat center top / 150px
}

.bgc {
	background: #fefcf3
}

#container {
	overflow-x: hidden
}

.contents {
	padding: 6vw var(--global-space)
}
header h1 {
	font-weight: 400;
	margin: 0;
	padding: 0;
	font-size: .8rem;
	letter-spacing: .1em
}

@media screen and (max-width:700px) {
	header h1 {
		display: none
	}
}

.header-inner {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff
}

.home .header-inner {
	display: block
}

#logo img {
	display: block
}

#logo {
	margin: 0;
	padding: 0;
	width: 200px
}

.home #logo {
	width: 300px;
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 0;
	transform: translateX(-50%)
}

@media screen and (max-width:900px) {
	.home #logo {
		min-width: 120px;
		width: 20vw
	}
}

#menubar {
	display: none
}

#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.large-screen #menubar {
	display: block
}

.small-screen #menubar.display-block {
	display: block
}

#menubar_hdr.display-none {
	display: none
}

.ddmenu_parent ul {
	display: none
}

a.ddmenu::before {
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: 700;
	font-size: .7rem;
	padding-right: .5rem
}

#menubar a {
	display: block;
	text-decoration: none
}

#menubar span {
	display: block;
	font-size: .7em;
	letter-spacing: .1em;
	opacity: .6
}

.large-screen #menubar {
	flex: 1
}

.large-screen #menubar>nav>ul>li:nth-of-type(1) {
	display: none
}

.large-screen #menubar>nav>ul {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.large-screen #menubar li {
	flex: 1;
	position: relative;
	text-align: center
}

.large-screen #menubar li.current>a {
	border-bottom: 2px solid var(--primary-color)
}

.home.large-screen #menubar>nav>ul>li:nth-of-type(3) {
	margin-right: 150px
}

.home.large-screen #menubar>nav>ul>li:nth-of-type(4) {
	margin-left: 150px
}

.large-screen #menubar li a {
	padding: .8rem 0
}

.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both
}

.large-screen #menubar ul ul {
	position: absolute;
	z-index: 2;
	width: 100%;
	top: 100%;
	left: 0
}

.large-screen #menubar ul ul a {
	padding: .6rem 1rem !important;
	background: #fff;
	margin: 3px 3px 0;
	border-radius: 5px;
	border: 1px solid #ccc
}

.large-screen #menubar ul ul a:hover {
	background: var(--primary-color);
	color: var(--primary-inverse-color)
}

.small-screen #menubar.display-block {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding-top: 100px;
	background: var(--primary-color) url(../images/bg_small_screen.png) no-repeat left bottom / 100vw;
	animation: animation1 0.2s both;
	color: var(--primary-inverse-color)
}

.small-screen #menubar li {
	border: 1px solid #fff;
	margin: 1rem;
	border-radius: 5px
}

.small-screen #menubar a {
	color: inherit;
	padding: 1rem 3rem
}

.small-screen #menubar li li a {
	background: var(--primary-inverse-color);
	color: var(--primary-color)
}

#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	top: 50px;
	right: 2vw;
	width: 50px;
	height: 50px;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0, 0, 0, .6)
}

#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
	transition: all 0.5s ease-in-out;
	position: absolute
}

#menubar_hdr div span:nth-child(1) {
	top: 0
}

#menubar_hdr div span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%)
}

#menubar_hdr div span:nth-child(3) {
	bottom: 0
}

#menubar_hdr.ham div span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg)
}

#menubar_hdr.ham div span:nth-child(2) {
	opacity: 0
}

#menubar_hdr.ham div span:nth-child(3) {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg)
}

main {
	position: relative;
	max-width: 1400px;
	margin: auto;
}

main h2 {
	position: relative;
	text-align: center;
	margin: 0 0 2rem;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: .1em
}

main h2 .small {
	display: block;
	font-size: .5em;
	font-weight: 300
}

main h3 {
	font-size: 1.4rem;
	letter-spacing: .1em;
	font-weight: 400
}

.bg1 h2,
.bg2 h2,
.bg3 h2,
.bg4 h2,
#spot h2,
#info h2,
#eve h2{
	color: #fff
}

.aboutd p {
	color: #fff;
	line-height: 1.4;
	max-width: 900px;
	margin: auto
}

.aboutd .col2f {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
	margin: 50px auto;
	position: relative;
	padding-bottom: 100px;
	max-width: 1000px
}

.aboutd .col2f img.amap {
	position: absolute;
	bottom: 0;
	right: 0
}

@media screen and (max-width:767px) {
	.aboutd .col2f img.amap {
		position: relative
	}

	.aboutd .col2f {
		padding-bottom: 0
	}
}

#footer-contents {
	padding: 2rem var(--global-space)
}

#footer-contents .contents main {
	max-width: 800px;
	margin: auto;
}

#footer-contents {
	background: rgba(var(--primary-color-rgb), .8) url(../images/bg_footer.png) no-repeat left bottom / auto 80%;
	color: var(--primary-inverse-color)
}

#footer-contents a {
	color: inherit
}

#footer-contents .btn a {
	border: 2px solid var(--primary-inverse-color)
}

small {
	font-size: 100%
}

footer {
	font-size: .7rem;
	background: #1d1b1b;
	color: #fff;
	text-align: center;
	padding: 1rem
}

footer a {
	color: inherit;
	text-decoration: none
}

footer .pr {
	display: block
}

ul.icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem
}

.icons i {
	font-size: 40px
}

.faq dt {
	border-radius: 3px;
	margin-bottom: 1rem;
	background: #fff;
	border: 1px solid #ccc;
	text-indent: -2rem;
	padding: .5rem 1em .5rem 3em
}

.faq dt::before {
	font-family: "Font Awesome 6 Free";
	content: "\f059";
	padding-right: 1rem;
	color: var(--primary-color)
}

.faq dd {
	padding: 0 1rem 1rem 3rem
}

.openclose {
	cursor: pointer
}

.list-normal * {
	margin: 0;
	padding: 0
}

.list-normal .list {
	display: flex;
	gap: 2vw;
	margin-bottom: 3vw
}

.list-normal .list.reverse {
	flex-direction: row-reverse
}

.list-normal .text {
	flex: 1
}

.list-normal .image {
	width: 40%
}

.list-normal h4 {
	font-weight: 500;
	font-size: 1.3rem;
	color: var(--primary-color);
	margin-bottom: .5em
}

.list-normal h4 a {
	color: inherit
}

.list-half {
	display: flex;
	flex-direction: column
}

.list-half+.list-half {
	margin-top: 5vw
}

.list-half h3 {
	margin: 0;
	padding: 0;
	text-align: center
}

.list-half h4 {
	font-weight: 400;
	margin: 0;
	font-size: 1.5rem;
	color: #343434;
	position: relative;
	padding-right: 100px
}

.list-half h4 .kazari {
	position: absolute;
	right: 0;
	top: -3rem;
	width: 100px
}

.list-half h3::before,
.list-half h3::after {
	content: "|";
	display: inline-block
}

.list-half h3::before {
	transform: rotate(-30deg);
	margin-right: .5rem
}

.list-half h3::after {
	transform: rotate(30deg);
	margin-left: .5rem
}

.list-half h3 i {
	margin-left: .5rem;
	font-size: 2rem;
	color: var(--primary-color);
	opacity: .6
}

.list-half .text {
	background: #fff;
	padding: 1rem 2rem;
	margin-bottom: 30px;
}

@media screen and (max-width:599px) {
	.list-half h3 {
		order: 1
	}

	.list-half .image {
		order: 2
	}

	.list-half .text {
		order: 3
	}
}

@media screen and (min-width:600px) {
	.list-half {
		flex-direction: row;
		justify-content: space-between;
		margin-right: calc(-1 * var(--global-space));
		margin-left: calc(-1 * var(--global-space))
	}

	.list-half.reverse {
		flex-direction: row-reverse;
		margin-left: calc(-1 * var(--global-space))
	}

	.list-half h3 {
		writing-mode: vertical-rl;
		text-orientation: upright;
		font-size: .85rem;
		margin-top: 10vw
	}

	.list-half h3::before {
		transform: rotate(-60deg);
		margin-bottom: .5rem
	}

	.list-half.reverse h3::before {
		transform: rotate(60deg)
	}

	.list-half h3::after {
		transform: rotate(60deg);
		margin-top: .5rem
	}

	.list-half.reverse h3::after {
		transform: rotate(-60deg)
	}

	.list-half h3 i {
		margin: 0;
		margin-top: .5rem
	}

	.list-half .text {
		margin-bottom: 0;
		flex: 1;
		align-self: flex-start;
		margin-top: 8vw;
		position: relative;
		z-index: 1;
		margin-right: -10vw;
		box-shadow: 2vw 2vw rgba(var(--primary-color-rgb), .1)
	}

	.list-half.reverse .text {
		margin-right: 0;
		margin-left: -10vw;
		box-shadow: -2vw 2vw rgba(var(--primary-color-rgb), .1)
	}

	.list-half .image {
		padding: 0;
		width: 50vw;
		overflow: hidden
	}
}

.list-grid1 .list * {
	margin: 0;
	padding: 0
}

.list-grid1 .list {
	display: grid;
	margin-bottom: 1rem
}

.list-grid1 .list p {
	font-size: .85rem;
	line-height: 1.5;
	margin: 10px 0;
}

.list-grid1 .list {
	padding: 2rem;
	background: #fff;
	grid-template-rows: auto 1fr auto;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, .1)
}

.list-grid1 .list figure {
	margin: 0;
	margin-bottom: .5rem
}

.list-grid1 .list figure {
	max-height: 400px;
	overflow: hidden
}

.list-grid1 .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

@media screen and (min-width:800px) {
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem
	}

	.list-grid1 .list {
		margin-bottom: 0
	}
}

.list-free * {
	margin: 0;
	padding: 0
}

.list-free {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 10vw;
	gap: 5vw
}

.bg3 .list-free {
	margin-bottom: 0
}

.list-free .text {
	align-self: flex-start;
	flex: 1
}

.list-free h3 {
	letter-spacing: .1em;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--primary-color);
	position: relative;
	padding: 0 1rem;
	margin: 0 auto
}

.list-free h3::before,
.list-free h3::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 50px;
	border: 1px solid var(--primary-color)
}

.list-free h3::before {
	top: -15px;
	left: -15px;
	border-right: none;
	border-bottom: none
}

.list-free h3::after {
	bottom: -15px;
	right: -15px;
	border-left: none;
	border-top: none
}

.list-free h4 {
	font-weight: 500;
	font-size: 1.3rem;
	color: var(--primary-color);
	margin-bottom: .5em
}

.list-free .image {
	box-shadow: 0 0 30px rgba(var(--primary-color-rgb), .3)
}

.list-free .image>div {
	background: #fff;
	font-size: .7rem;
	padding: 1rem 2rem
}

@media screen and (min-width:600px) {
	.list-free {
		flex-direction: row
	}

	.list-free h3 {
		writing-mode: vertical-rl;
		text-orientation: upright;
		padding: 1rem .5rem
	}

	.list-free .w1 {
		width: 30%
	}

	.list-free .w2 {
		width: 50%
	}

	.list-free .order1 {
		order: 1
	}

	.list-free .order2 {
		order: 2
	}

	.list-free .order3 {
		order: 3
	}

	.list-free .mt1 {
		margin-top: 10vw
	}

	.list-free .mt2 {
		margin-top: 20vw
	}
}

.btn a {
	display: block;
	text-decoration: none;
	font-size: 1rem;
	text-align: center;
	background: #009688;
	color: var(--primary-inverse-color);
	padding: 0.8rem !important;
	margin-top: 1rem !important;
	border-radius: 100px;
	position: relative;
}
.btn a:before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.bg3,
.bg3::before {
	background: url(../images/bg3.svg) repeat-x center top / auto 50px
}

.bg3 {
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space))
}

.bg3::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 50px;
	left: 0;
	bottom: 0;
	transform: scaleY(-1)
}

.bg3>div {
	padding: 1px;
	background: #caecf9;
	padding-left: var(--global-space);
	padding-right: var(--global-space);
	padding-top: 5vw;
	padding-bottom: 5vw
}

.bg3 a {
	color: inherit
}

.kazari3-wrap {
	position: relative;
	display: inline-block
}

.kazari3-wrap::before,
.kazari3-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50px;
	height: 50px;
	background-image: url(../images/kazari3.svg);
	background-repeat: no-repeat;
	background-size: cover
}

.kazari3-wrap::before {
	left: -100px
}

.kazari3-wrap::after {
	right: -100px;
	transform: scaleX(-1)
}

.new {
	background: rgba(0, 0, 0, .02);
	overflow: hidden;
	margin-bottom: 4rem
}

.new dt:nth-of-type(odd),
.new dd:nth-of-type(odd) {
	background: rgba(0, 0, 0, .04)
}

.new dt {
	padding: 1rem
}

.new dd {
	padding: 0 1rem 1rem
}

.new dt span {
	display: inline-block;
	margin-right: -1rem;
	text-align: center;
	line-height: 1.8;
	border-radius: 3px;
	padding: 0 .5rem;
	width: 8rem;
	transform: scale(.8);
	background: #fff;
	color: #777;
	border: 1px solid #999
}

.new .icon-bg1 {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	border-color: transparent
}

.new .icon-bg2 {
	background: red;
	color: #fff;
	border-color: transparent
}

@media screen and (min-width:700px) {
	.new {
		display: grid;
		grid-template-columns: auto 1fr
	}

	.new dd {
		padding: 1rem
	}
}

.main-contents {
	margin-bottom: 2vw
}

.sub-contents h3 {
	margin: 0;
	font-size: 1rem;
	margin-bottom: .5rem
}

.sub-contents h3::first-letter {
	border-left: 3px solid var(--primary-color);
	padding-left: 10px
}

@media screen and (min-width:900px) {
	main.column {
		display: flex;
		justify-content: space-between;
		gap: 3vw
	}

	.main-contents {
		margin-bottom: 0;
		order: 2;
		flex: 1
	}

	.sub-contents {
		width: 210px
	}

	.sub-contents:nth-child(2) {
		order: 1
	}

	.sub-contents:nth-child(3) {
		order: 3
	}
}

.submenu * {
	margin: 0;
	padding: 0
}

.submenu {
	padding: 0;
	margin: 0 0 1rem;
	border-top: 1px solid #ccc
}

.submenu a {
	display: block;
	text-decoration: none;
	padding: .2rem 1rem;
	background: #fff
}

.submenu>li {
	border: 1px solid #ccc;
	border-top: none
}

.submenu li li a {
	padding-left: 2rem
}

.box1 {
	padding: 1rem;
	margin-bottom: 1rem;
	background: rgba(0, 0, 0, .05);
	border: solid 1px #ccc;
	box-shadow: 0 0 1px 1px #fff inset
}

.box1 .submenu {
	margin-bottom: 0
}

.thumbnail-view-parts {
	max-width: 1000px;
	margin: 0 auto 1rem;
	text-align: center
}

.thumbnail-parts {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem
}

.thumbnail-parts img {
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s
}

.thumbnail-parts img:hover {
	opacity: .8
}

.animation-text {
	position: absolute;
	z-index: -1;
	width: 100vw;
	right: -50vw;
	top: 25vw
}

.spin {
	animation: spin 150s linear infinite
}

.ta1 caption {
	font-weight: 700;
	padding: .5rem 1rem;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	margin-bottom: 1rem;
	border-radius: 5px
}

.ta1 {
	table-layout: fixed;
	border-top: 1px solid #999;
	width: 100%;
	margin-bottom: 1rem
}

.ta1 tr {
	border-bottom: 1px solid #999
}

.ta1 th,
.ta1 td {
	padding: 1rem;
	word-break: break-all
}

.ta1 th {
	width: 30%;
	text-align: left
}

@media screen and (min-width:900px) {
	.ta1 th {
		width: 20%
	}
}

.ta2 caption {
	text-align: center;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-weight: 700;
	padding: 10px
}

.ta2 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;
	text-align: center;
	background: #fff;
	color: #333
}

.ta2,
.ta2 td,
.ta2 th {
	word-break: break-all;
	border: 1px solid #ccc
}

.ta2 th {
	background: #fffbe3
}

.ta-box {
	overflow-x: auto;
	margin-bottom: 1rem
}

.ta-box .ta2 {
	min-width: 600px
}

.pagetop-show {
	display: block
}

.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 99;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0, 0, 0, .2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%
}

.marker {
	display: inline-block;
	background: linear-gradient(transparent 80%, yellow 80%)
}

.clearfix::after {
	content: "";
	display: block;
	clear: both
}

.color-check,
.color-check a {
	color: #ff0000 !important
}

.l {
	text-align: left !important
}

.c {
	text-align: center !important
}

.r {
	text-align: right !important
}

.ws {
	width: 95%;
	display: block
}

.wl {
	width: 95%;
	display: block
}

.mb0 {
	margin-bottom: 0px !important
}

.mb30 {
	margin-bottom: 30px !important
}

.mb5vw {
	margin-bottom: 5vw !important
}

.look {
	display: inline-block;
	padding: 0 10px;
	background: #fff;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all
}

.small {
	font-size: .75em
}

.large {
	font-size: 2em;
	letter-spacing: .1em
}

.pc {
	display: none
}

.dn {
	display: none !important
}

.block {
	display: block !important
}

@media screen and (min-width:900px) {
	.ws {
		width: 48%;
		display: inline
	}

	.sh {
		display: none
	}

	.pc {
		display: block
	}
}

.emirates {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding-top: 30px
}

.emirates .eslide {
	width: 40%
}

.emirates .rightb {
	width: calc(60% - 30px)
}

.sliderArea {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px
}

.sliderArea.w300 {
	max-width: 300px
}

.slick-slide {
	margin: 0 5px;
	position: relative
}

.slick-slide img {
	width: 100%;
	height: auto;
}

.slick-slide p {
	position: absolute;
	z-index: 99;
	bottom: 1em;
	margin: 0 0 0 1em;
	font-size: .8em;
	background: rgba(0, 0, 0, .6);
	padding: .5em;
	border-radius: 5px
}

.slick-prev,
.slick-next {
	z-index: 1
}

.slick-prev:before,
.slick-next:before {
	color: #000
}

.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2
}

.slick-active {
	opacity: 1
}

.slick-current {
	opacity: 1
}

.thumb {
	margin: 20px 0 0
}

.thumb .slick-slide {
	cursor: pointer
}

.thumb .slick-slide:hover {
	opacity: .7
}

.flight-table-wrapper {
	overflow-x: auto;
	margin: 1em 0
}

table.flight-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 800px;
	background-color: #fff;
	font-family: 'Segoe UI', sans-serif;
	border: 1px solid #ccc
}

.flight-table th,
.flight-table td {
	border: 1px solid #ccc;
	padding: .5em;
	text-align: center;
	white-space: nowrap
}

.flight-table thead {
	background: linear-gradient(180deg, #c32478, #500096);
	color: #fff
}

.flight-table tbody tr:nth-child(even) {
	background-color: #f6f6f6
}

.flight-table th[colspan="5"] {
	background: linear-gradient(180deg, #f3dc8e, #a28130);
	font-size: 1.1em
}

main .emirates h2 {
	text-align: left;
	line-height: 1.5
}

ul,
li {
	list-style: none
}

@media screen and (max-width:767px) {
	.emirates {
		flex-direction: column-reverse
	}

	.emirates .eslide,
	.emirates .rightb {
		width: 100%
	}
}

#hotel .slick-slide img {
	border-radius: 0
}

.pickup {
	background: #fff;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, .1);
	padding: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 1rem;
	position: relative
}

.pickup:before {
	content: "PICK UP";
	position: absolute;
	right: 18px;
	z-index: 999;
	color: #fff;
	top: 30px;
	transform: rotate(40deg);
	font-size: 1.2em;
	font-weight: 600
}

.pickup:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 180px;
	aspect-ratio: 1;
	clip-path: polygon(0 0, 100% 0, 100% 80%);
	background: linear-gradient(45deg, #c2247899, #6b088f99)
}

.htlinfo {
	width: calc(50% - 30px)
}

.list .htlinfo {
	width: 100%
}

.pickup .htlslide {
	width: 50%
}

.htlinfo h4 {
	border-bottom: 1px solid #c3c3c3;
	padding: 0 0 14px;
	margin: 0 0 14px;
	font-size: 1.6rem
}

.htlinfo h4 span {
	font-size: .8rem;
	color: #6e2b62;
	font-weight: 300;
	margin-left: 20px
}

.list .htlinfo h4 {
	font-size: 1.2rem;
	line-height: 1.8;
}

.list .htlinfo h4 span {
	display: block;
}

.htlinfo p {
	line-height: 1.5
}

.list .htlinfo ul {
	gap: 0.5em;
}

.list .htlinfo ul li {
	width: 100%;
}

.list-grid1 .list .htlinfo ul li dl dt,
.list-grid1 .list .htlinfo ul li dl dd {
	padding: 0.5em
}

.htlinfo p span {
	font-size: 1.2rem;
	font-weight: 600;
	display: block
}

.htlslide .sliderArea {
	padding: 0
}

.htlslide .slick-prev {
	position: absolute;
	left: 0;
	top: 50%;
	width: 30px;
	height: 80px;
	background: url(../images/slider_prev.png) no-repeat center center;
	background-size: cover;
	text-indent: -99999px
}

.htlslide .slick-next {
	position: absolute;
	right: 0;
	top: 50%;
	width: 30px;
	height: 80px;
	background: url(../images/slider_next.png) no-repeat center center;
	background-size: cover;
	text-indent: -99999px
}

.htlinfo ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0
}

.htlinfo ul li {
	width: calc(50% - 0.5rem)
}

.htlinfo ul li dl {
	display: flex;
	flex-wrap: wrap
}

.htlinfo ul li dl dt {
	border: 1px solid #ccc;
	padding: .5em;
	text-align: center;
	width: 40%;
	background: linear-gradient(180deg, #c32478, #500096);
	color: #fff
}

.htlinfo ul li dl dd {
	border: 1px solid #ccc;
	padding: .5em;
	background-color: #fff;
	width: 60%;
	border-left: none
}

dd.rate {
	color: #FFC107
}

dd.rate span {
	color: #dedede
}

#info p {
	line-height: 1.5;
	color: #ffffff;
}

#info section {
	max-width: 1200px;
	margin: auto;
}

#info dl {
	display: flex;
	flex-wrap: wrap;
	border-top: 2px solid #cccccc
}

#info dl dt {
	border-bottom: 1px solid #ccc;
	padding: .5em;
	text-align: center;
	width: 200px;
	background: #800f8a30;
	color: #fff
}

#info dl dd {
	width: calc(100% - 200px);
	border-bottom: 1px solid #ccc;
	padding: .5em 1em;
	background-color: #00000030;
	line-height: 1.6;
	color: #fff;
	font-weight: 300;
}

#info dl dd th,
#info dl dd td {
	border: 1px solid #ccc;
	padding: .5em
}

#info dl dd th {
	background: #a28130;
	color: #fff;
	white-space: nowrap;
	font-size: .9em;
	font-weight: 400;
	min-width: 150px
}

#info dl dd tr {
	background-color: #00000060;
}

/*
#info dl dd tr:nth-child(odd) {
	background-color: #f6f6f6
}
*/

#info a {
	color: #ffffff;
}



.sliderArea {
	padding: 0 !important
}

.slick-slide {
	margin: 0 !important;
	padding: 0 !important
}

.parallax-bg {
	background-image: url(../images/parallax-bg.jpg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
.scrollbox {}
*/

/*タブ*/
#spot {
	background: url(../images/spot_bg.jpg);
}

.tabs {
	margin-top: 50px;
	background-color: #fff;
	margin: 0 auto;
}

.tab_item {
	width: calc(100%/3);
	background: #ffffff;
	font-size: 16px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: 600;
	transition: all 0.2s ease;
	line-height: 1.5;
	padding: 10px;
}

.tab_item span {
	display: block;
	font-size: 0.8em;
	font-weight: 300;
	color: #500096;
}

.tab_item:hover {
	opacity: 0.75;
}

input[name="tab_item"] {
	display: none;
}

.tab_content {
	display: none;
	padding: 40px;
	clear: both;
	overflow: hidden;
	border: 3px solid #500096;
}

#marina:checked~#marina_content,
#beach:checked~#beach_content,
#desert:checked~#desert_content,
#olddubai:checked~#olddubai_content,
#downtown:checked~#downtown_content,
#creekharbour:checked~#creekharbour_content {
	display: block;
}

.tabs input:checked+.tab_item {
	background: linear-gradient(180deg, #c32478, #500096);
	color: #fff;
}

.tabs input:checked+.tab_item span {
	color: #fff;
}

#spot .slick-slide {
	margin: 5px !important;
	padding: 5px !important;
}

.regular_3 {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.regular_3.slick-initialized {
	visibility: visible;
	opacity: 1;
}

.regular_3 dl {
	margin: 0.5em 0;
}

.regular_3 dl dt {
	font-weight: 600;
}

.regular_3 dl dd {
	font-size: 0.9rem;
	line-height: 1.4;
}

@media screen and (max-width:767px) {
	#info dl {
		display: block;
	}

	#info dl dt,
	#info dl dd {
		width: 100%;
	}

	#info dl dd th {
		min-width: 100px;
	}

	#info dl dt {
		background: #800f8a80;
	}

	.pickup {
		flex-direction: column-reverse;
	}

	.htlinfo,
	.pickup .htlslide {
		width: 100%;
	}

	.htlinfo ul li {
		width: 100%;
	}

	.htlinfo ul li dl {
		margin: 0;
	}

	.tab_item {
		font-size: 12px;
	}

	.pickup {
		padding: 2rem;
	}

	.pickup:after {
		width: 150px;
	}
}

/* hotel
**********************************/
#htlp .pickup {
	display: block;
}

#htlp .pickup .htlslide,
#htlp .pickup .htlinfo {
	width: 100%;
}

#htlp .htlinfo ul {
	margin: 0 0 14px;
}

.htlinfo ul li {
	width: auto;
	border: 1px solid #ccc;
	border-radius: 100px;
	padding: 10px 30px;
	line-height: 1;
}

.htlinfo ul li dl {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0;
}

.htlinfo ul li dl dt {
	border: none;
	padding: 0;
	text-align: left;
	width: auto;
	background: none;
	color: #c32478;
	font-size: 0.8em;
}

.htlinfo ul li dl dd {
	border: none;
	padding: 0 0 0 20px;
	background-color: #fff;
	width: auto;
}

#htlp .pickup .list-grid1 .list {
	padding: 1rem;
}

.pickup .bottom {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.addressskyview {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.map-wrap {
	width: calc(50% - 30px);
}

.gmap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75%;
	filter: sepia(40%);
}

.gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mrightb {
	width: 50%;
}

.mrightb h2 {
	font-size: 1.6em;
	line-height: 1.4;
	text-align: left;
}

.pickup .bottom ul {
	background: linear-gradient(-45deg, #c2247830, #6b088f30);
	margin: 0;
	padding: 10px 10px 10px 20px;
	border-radius: 5px;
}

.bottom .mrightb h2 {
	margin-bottom: 20px;
	color: #FFC107;
}

.bottom .mrightb h2 span {
	color: #343434;
}

.pickup .bottom ul li {
	color: #ffffff;
}

.pickup .bottom ul li span {
	color: #343434;
	margin-left: 10px;
}

.list .htlinfo ul li {
	padding: 5px 10px;
	line-height: 1;
	font-size: 0.8em;
}

.list .htlinfo ul li dl dd {
	padding: 0 0 0 5px;
}


#htlp .list .htlinfo h4 {
	font-size: 1.2rem;
	line-height: 1.4;
	padding-bottom: 1rem;
}

.sepmap {
	filter: sepia(40%);
}

#htlp .parallax-bg main {
	max-width: 800px;
}

#htlp .parallax-bg h2,
#htlp .parallax-bg p {
	color: #ffffff;
}
.kv {
    position: relative;
}
.kv img {
    height: 400px;
    object-fit: cover;
    width: 100%;
}
.kv h2 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translatex(-50%);
    color: #ffffff;
    font-size:min(4.0vw,60px);
    text-shadow: 2px 2px 4px #000000;
}
.kv p {
    position: absolute;
    top: calc(20% + 7vw);
    left: 50%;
    transform: translatex(-50%);
    font-weight: 600;
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    background: #00000090;
    padding: 10px 20px;
    border-radius: 5px;
}
@media screen and (max-width:787px) {

	.map-wrap,
	.mrightb {
		width: 100%;
	}
	.kv h2 {
    font-size: 6vw;
    width: 100%;
    text-align: center;
    top: 20%;
}
.kv p {
    top: calc(30% + 7vw);
    font-size: 4vw;
    width: 80%;
}

}

/**フォーム***************/

.dubaiform p {
    color: #FFFFFF;
    max-width: 1000px;
    margin: auto;
}
p.text-center {
    text-align: center;
}
.dubaiform p.btn {
    margin-bottom: 30px;
}
.dubaiform .inner {
    max-width: 1200px;
    margin: auto;
    background: #ffffff;
    padding: 50px;
    border-radius: 10px;
    width: 90%;
}
.dubaiform .inner h3 {
    margin: 0;
    text-align: center;
    background: #a28130;
    color: #ffffff;
}
.dubaiform .inner dl {
    display: flex;
    flex-wrap: wrap;
}
.dubaiform .inner dt {
    width: 25%;
    font-weight: bold;
    color: #888;
    text-align: left;
    vertical-align: top;
    padding: 15px 15px;
    border-bottom: solid 1px #ddd;
    display: inline;
    gap: 10px;
}
.dubaiform .inner dd {
    vertical-align: top;
    padding: 15px 15px;
    width: 75%;
    border-bottom: solid 1px #ddd;
}
.dubaiform input{
    /*background-color: #fff;*/
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    height: 40px;
}
.dubaiform textarea{
    background-color: #fff;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
}
.dubaiform select {
    background-color: #fff;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    height: 40px;
}
.dubaiform input.half {
    width: 50%;
}
.dubaiform input[type="radio"] {
    height: auto;
    width: auto;
}
.dubaiform dt:after {
    content: "必須";
    color: #fff;
    font-size: 0.7em;
    font-weight: 300;
    background-color:#500096;
    padding: 2px 5px;
    border-radius: 5px;
    margin-left: 10px;
}
.dubaiform dt.ninni:after {
    content: none;
}
.dubaiform input[type="submit"] {
    display: block;
    margin: auto;
    background-color: #F49F00;
    border: none;
    color: #ffffff;
    padding: 12px 30px 10px;
    border-radius: 3px;
}
.dubaiform .inner dd ul {
    margin: 0;
    display: flex;
    gap: 10px;
	flex-wrap:wrap;
}
.dubaiform .inner dd ul li {
    display: flex;
    align-items: center;
		gap:10px;
}
.dubaiform .inner dd ul li input {
    max-width: 150px;
}
.dubaiform .inner dd ul.room li input {
    max-width: 70px;
}
.dubaiform .inner dd ul li.flight {
    width: 100%;
}

.dubaiform .inner dl.note {
    display: block;
    background: #ff000010;
    font-size: 0.8em;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #c2000080;
}
.dubaiform .inner dl.note dt {
    width: 100%;
    color: #c20000;
    border: none;
    padding: 5px;
}

.dubaiform .inner dl.note dt:after{
    content:none;
}
.dubaiform .inner dl.note dd {
    padding: 5px;
    width: 100%;
    border: none;
}
.dubaiform input[type="file"] {
    display: inline-block;
    border: none;
}
dd.flexdd {
    display: flex;
    gap: 10px;
}
.accordion {
  margin: 2em 0;
}
.accordion__summary {
    display: block;
    background: #643b34;
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 0px 38px 0px 0px;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: .1em;
    font-weight: 400;
    text-align: center;
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
.accordion__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.accordion[open] .accordion__summary::after {
  content: "−";
}
.accordion__detail {
  padding: 4px 10px;
  margin: 10px 0;
}
.accordion__text {
  margin: 0;
}
.dubaiform .privacy p {
    color: #111111;
}
.remarks{
	width:100%;
}
.privacy label {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accordion__detail dl:nth-child(even) {
    background: #fcfaf7;
}
@media screen and (max-width:767px) {
.dubaiform .inner {
    padding: 20px;
    width: 100%;
}
.dubaiform .inner dt,
.dubaiform .inner dd {
    width: 100%;
}
dd.flexdd {
    display: block;
}
dd.flexdd select {
    margin-bottom: 10px;
}
.dubaiform input {
    width: 100%;
}
.dubaiform .inner dd ul li input {
    max-width: 80px;
}
.dubaiform .inner dd ul.flight li input {
    max-width: 110px;
}
.accordion__detail {
    padding: 0;
    margin: 10px 0;
}
.dubaiform input[type="checkbox"] {
    width: auto;
}
.dubaiform input.half {
    width: 100%;
}
.dubaiform .inner dt {
    padding: 15px 15px 0 15px;
    border-bottom: none;
}
	.dubaiform .inner dd {
    padding: 5px 15px 15px;
}
}

.aboutd .btn a{
	min-width:200px;
	/*background: #9c27b0;*/
}

/* パソコンで見た時はclass名pc-onlyだけ表示 */
.pc-only{
    display: block;
}
.sp-only{
    display: none;
}

/* スマホで見た時はclass名sp-onlyだけ表示 */
@media screen and (max-width: 768px){
    .pc-only{
        display: none;
    }
    .sp-only{
        display: block;
    } 
}  
@media screen and (max-width: 768px){
#mainimg h2 {
    font-size: 7vw;
}
	#mainimg h2 span {
    font-size: 4vw;
}
	}

img.spotmap {
    margin-bottom: 50px;
}

#eve.parallax-bg {
    background-image: url(https://ontra.jp/wp/wp-content/uploads/2025/05/belly-dance.jpg);
}

#eve .timeline {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  font-family: "Helvetica Neue", sans-serif;
    position: relative;
}

#eve .timeline-section {
  border-left: 3px solid #6c9a8b;
  padding: 12px 20px 12px 24px;
  margin-bottom: 20px;
  position: relative;
  background-color: #f9f9f9;
  border-radius: 0 6px 6px 0;
}
#eve .timeline:after {
    content: "";
    position: absolute;
    background-color: #6c9a8b;
    width: 3px;
    top: 40px;
    bottom: 0;
    height: calc(100% - 100px);
}
#eve .timeline-section::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #6c9a8b;
  border-radius: 50%;
  position: absolute;
  left: -9px;
  top: 20px;
}

#eve .time {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

#eve .content {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}


@media (max-width: 600px) {
#eve .timeline {
    padding: 20px 12px;
  }

  #eve .timeline-section {
    padding: 10px 16px 10px 20px;
  }

  #eve .timeline-section::before {
    width: 12px;
    height: 12px;
    left: -8px;
    top: 18px;
  }

  #eve .time {
    font-size: 13px;
  }

  #eve .content {
    font-size: 14px;
  }
}
#eve .htlinfo h4 {
    line-height: 1.4;
}
#eve dl.price {
    display: flex;
    gap: 30px;
    font-size: 1.2em;
align-items: center;
}
#eve dl.price dd {
    color: #ff0000;
    font-weight: 600;
    font-size: 1.4em;
}

.list-half h4 span {
    color: #ffffff;
    background: #ff0000;
    padding: 0 5px 2px;
    margin-right: 5px;
}
.list-half h4 {
    line-height: 1.4;
    padding-top: 5px;
}

p.coution {
    background: #ffffff;
    padding: 20px;
    width: fit-content;
    margin: 0 auto 2rem;
    border: 5px solid #ff0000;
    /* border-radius: 0.5rem; */
}

p.coution span {
    font-weight: 600;
    display: block;
    text-align: center;
}