@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap');

/* ============================================================================================
	variables
============================================================================================= */
*{
	--main-fonts:'Noto Sans JP' ,sans-serif;
	--serif-fonts:'Noto Serif JP' ,serif;
	--title-fonts:var(--main-fonts);
}
html[lang='ja'] * {
	--title-fonts:'Mochiy Pop One' ,var(--main-fonts);
}
html[lang='zh-CN'] *{
	--main-fonts:'Noto Sans SC' ,sans-serif;
	--title-fonts:var(--main-fonts);
}

html[lang='zh-TW'] *{
	--main-fonts:'Noto Sans TC' ,sans-serif;
	--title-fonts:var(--main-fonts);
}


/* =============================================================================================
	CSS reset
============================================================================================= */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
.bx-wrapper * {
}
html ,body ,div ,p ,iframe ,a ,img ,
span ,small ,i ,strong ,em ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ul ,ol ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	line-height:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	padding:0.3em;
	line-height:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	text-decoration:inherit;
}
input[type="submit"] {
	padding:0.5em 2em;
}

html ,body {
	min-height:100%;
	height:100%;
}
a ,a:before ,a:after {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
}

a.linkText {
	padding:0 0.1em;
	color:#f00;
	background:linear-gradient( 0deg ,#f00 10% ,transparent 15% );
}
a.linkText:hover {
	color:#00f;
	background:linear-gradient( 0deg ,#00f 10% ,transparent 15% );
}

@media screen and (max-width:799px) {
	a.telLink {
		color:#f00;
		text-decoration:underline;
	}
}

img ,video {
	vertical-align:top;
	max-width:100%;
	max-height:100%;
}
img.w1000 {
	width:1000px;
}

.modal-video-movie-wrap iframe {
	outline:3px solid #fff;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

ul ,ol ,li {
	margin:0;
}
ul:not(.noReset) ,ol:not(.noReset) ,:not(.noReset) > li {
	list-style:none;
}

ul.noReset ,ol.noReset {
	padding-left:2em;
}

small {
	font-size:90%;
}

/* =============================================================================================
	common
============================================================================================= */
.off {
	opacity:0;
}

/* ==============================================
	no display
=============================================== */
@media screen and (min-width:800px) {
	.dispSP {
		display:none !important;
	}
}
@media screen and (max-width:799px) {
	.dispPC {
		display:none !important;
	}
}

/*
html[lang='en'] br {
	display:none !important;
}
*/

.noDisp {
	display:none !important;
}


/* ==============================================
	position
=============================================== */
.center {
	text-align:center;
}
.t-left {
	text-align:left;
}
.t-right {
	text-align:right;
}



/* =============================================================================================
	block layout
============================================================================================= */

/* ==============================================
	instagram
=============================================== */
.instaImages {
	padding:0 1em 2em;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.instaImages > div {
	width:calc(100% / 3);
	padding:3px;
}
.instaImages > div:nth-child(n + 10) {
	display:none;
}
.instaImages > div > a {
	position:relative;
	display:block;
}
.instaImages > div > a > * {
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.instaImages > div.video > a:after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25%;
	aspect-ratio:1/1;
	background:url(images/icons/instagram_reel_w.png) 50% 50% no-repeat;
	background-size:contain;
	filter:drop-shadow(0 0 3px #666);
	z-index:10;
}
.instaImages > div > a > span {
	display:none;
}
.instaImages > div.noData {
	width:100%;
	text-align:center;
	padding:3em 0;
	font-size:90%;
	color:#666;
}

@media screen and (min-width:800px) {
	.instaImages > div {
		width:calc(100% / 4);
	}
	.instaImages > div:nth-child(n + 9) {
		display:none;
	}
	.instaImages > div > a:hover {
		opacity:0.8;
	}

}


/* ==============================================
	title
=============================================== */
.titleBar {
	text-align:center;
	padding-bottom:3em;
}
.titleBar .flex {
	line-height:1.2;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family:var(--title-fonts);
}
.titleBar .flex > span {
	padding:0 0.5em 0.1em;
	font-size:320%;
}

.titleBar .flex:before,
.titleBar .flex:after {
	content:"";
	display:block;
	width:180px;
	height:90px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
}
@media screen and (max-width:799px) {
	.titleBar {
		padding-bottom:1.5em;
	}
	.titleBar .flex > span {
		font-size:180%;
	}
	html[lang='ja'] .titleBar .flex > span {
		white-space:nowrap;
	}

	.titleBar .flex:before,
	.titleBar .flex:after {
		width:90px;
		height:45px;
	}
}

.titleBar.y {
	color:#ff6;
}
.titleBar.y .flex:before,
.titleBar.y .flex:after {
	background-image:url(images/common/title/side_wave_y.png);
}

.titleBar.b {
	color:#06c;
}
.titleBar.b .flex:before,
.titleBar.b .flex:after {
	background-image:url(images/common/title/side_wave_b.png);
}

.titleBar.lb {
	color:#6cf;
}
.titleBar.lb .flex:before,
.titleBar.lb .flex:after {
	background-image:url(images/common/title/side_wave_lb.png);
}

.titleBar.o {
	color:#f80;
}
.titleBar.o .flex:before,
.titleBar.o .flex:after {
	background-image:url(images/common/title/side_wave_o.png);
}

.titleBar.w {
	color:#fff;
}
.titleBar.w .flex:before,
.titleBar.w .flex:after {
	background-image:url(images/common/title/side_wave_w.png);
}

.titleBar.br {
	color:#930;
}
.titleBar.br .flex:before,
.titleBar.br .flex:after {
	background-image:url(images/common/title/side_wave_br.png);
}


.titleImage {
	padding-bottom:3em;
	text-align:center;
}


/* ==============================================
	title (jet)
=============================================== */
.bg_jet_cover {
	padding-bottom:2em;
}
.bg_jet {
	width:1080px;
	max-width:100%;
	margin:0 auto;
	padding-bottom:2em;
	padding-right:10%;
	background:url(images/common/title/recommended_subtitle_bg.png) 50% 50% no-repeat;
	background-size:contain;
}
.bg_jet > * {
	height:140px;
	font-size:300%;
	color:#fff;
	text-shadow:0.05em 0.05em 0 #000;
	font-weight:900;
}

.bg_wave_cover {
	padding-bottom:4em;
}
.bg_wave {
	background:url(images/common/title/bg_wave.png) 50% 0 no-repeat;
}
.bg_wave > * {
	font-size:300%;
	color:#063;
	text-shadow:0.05em 0.05em 0 #fff;
	font-weight:900;
}

@media screen and (max-width:799px) {
	.bg_jet {
		padding-right:17%;
		background-position:50% 50%;
	}
	.bg_jet > * {
		height:60px;
		line-height:1.3;
		font-size:160%;
	}
	.bg_jet > .flex.bottom {
		text-align:center;
		align-items:center;
	}

	.bg_wave_cover {
		padding-bottom:2em;
	}
	.bg_wave {
		background-size:480px;
	}
	.bg_wave > * {
		font-size:160%;
	}
}



/* ==============================================
	title (decoration)
=============================================== */
.deco_title_cover {
	padding-bottom:3em;
}
.deco_title {
	position:relative;
	padding:0 180px;
}
.deco_title:before ,
.deco_title:after {
	content:"";
	display:block;
	width:180px;
	min-height:100%;
	background:url(images/common/title/deco_title_l.png) 50% 50% no-repeat;
	background-size:100% 100%;
}
.deco_title:before {
	margin-right:-1px;
}
.deco_title:after {
	margin-left:-1px;
	background-image:url(images/common/title/deco_title_r.png);
}

.deco_title > .flex {
	color:#fff;
	min-height:120px;
	padding:0 3em;
	background:url(images/common/title/deco_title_c.png) 50% 50% no-repeat;
	background-size:100% 100%;
}
.deco_title > .flex > * {
	padding:0.3em 0;
	line-height:1.3;
	letter-spacing:0.05em;
	text-indent:0.05em;
	font-size:300%;
	font-family:var(--title-fonts);
}
html[lang='en'] .deco_title > .flex > * {
	font-size:250%;
	letter-spacing:0;
	text-indent:0;
}

@media screen and (max-width:799px) {
	.deco_title_cover {
		padding-bottom:2em;
	}
	.deco_title {
		padding:0 0.5em;
	}
	.deco_title:before ,
	.deco_title:after {
		width:60px;
	}
	.deco_title > .flex {
		flex-grow:1;
		padding:0 0.5em 0.1em;
		min-height:100px;
	}
	.deco_title > .flex > * {
		font-size:150%;
		text-align:center;
	}
	html[lang='en'] .deco_title > .flex > * {
		font-size:130%;
	}
}




/* ====================================================================
	flex
==================================================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}


.flex.base {
	align-items:baseline;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col1 > * {
	width:calc(100% / 1);
}
.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}
.flex.col4 > * {
	width:calc(100% / 4);
}

.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}


/* ==============================================
	snsLink
=============================================== */
.snsLink {
	display:flex;
	justify-content:center;
	align-items:center;
}
.snsLink > * {
	padding:0 0.5em
}
.snsLink img {
	height:3em;
}


/* ==============================================
	bottom buttons
=============================================== */
#bottom-button-fixed {
	--padding:0.2em;
	--height:3em;
}
#bottom-button-fixed {
	display:none;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	padding:var(--padding);
	background:rgba(255,255,255,0.9);
	border-top:1px solid #06f;
}

.bottom-buttons.flex > * {
	padding:var(--padding);
}
.bottom-buttons.flex > * > * {
	height:var(--height);
	padding:0.3em;
}
.bottom-button-wrapper {
	width:450px;
	max-width:calc(100% - var(--padding) * 2 - var(--height));
}
.bottom-button-wrapper.icon {
	width:150px;
    margin:-60px 0 -20px;
	padding:0;
}
.bottom-button-wrapper.icon > img {
	height:auto;
}

.bottom-button-wrapper .button {
	color:#fff;
	border-radius:0.3em;
	font-weight:900;
}
.bottom-button-wrapper.tel .button {
	background:#0c6;
}
.bottom-button-wrapper.contact .button {
	background:#f90;
}

.bottom-button-wrapper .button span {
	line-height:1;
	font-size:150%;
	padding-left:0.5em;
	padding-bottom:0.1em;
	text-align:center;
}
.bottom-button-wrapper.tel .button span {
	font-size:180%;
}


#pagetopButton > .anchorLink {
	aspect-ratio:1/1;
	color:#fff;
	background:rgba(0,102,255,0.8);
	border-radius:0.3em;
	cursor:pointer;
}
#pagetopButton > .anchorLink span {
	font-size:180%;
}


@media screen and (min-width:800px) {
	.bottom-buttons.flex > *:not(.icon) > * {
		filter:grayscale(0.2);
		box-shadow:3px 3px 0 #333;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	.bottom-buttons.flex > *:not(.icon) > *:hover {
		filter:grayscale(0);
		box-shadow:0 0 0 #333;
		transform:translate(3px,3px);
	}
}
@media screen and (max-width:799px) {
	#bottom-button-fixed {
		border-bottom:1px solid #cff;
	}
	#bottom-button-fixed .bottom-buttons.innerFrame{
		padding:0;
	}
	#bottom-button-fixed .bottom-button-wrapper {
		width:160px;
	}

	#bottom-button-fixed .bottom-button-wrapper .button span {
		padding-left:0;
		line-height:1.2;
		font-size:160%;
		letter-spacing:-1px;
		font-weight:normal;
	}
	#bottom-button-fixed .bottom-button-wrapper.contact .button span {
		font-size:150%;
	}

	#bottom-button-fixed .bottom-button-wrapper.icon {
		width:130px;
	    margin:-50px 0px -20px -20px;
	}
	#bottom-button-fixed .bottom-button-wrapper.icon img {
		padding:0;
	}
}




/* =============================================================================================
	base layout
============================================================================================= */
.alert li {
	list-style:disc;
}
.alert li + li {
	padding-top:0.5em;
}
@media screen and (max-width:799px) {
	.alert {
		padding-left:2.5em;
		padding-right:1em;
	}
}


/* ==============================================
	base
=============================================== */
body {
	font-size:16px;
	line-height:1.8;
	color:#000;
	background:#fff;
	font-family:var(--main-fonts);
}

#bgLayer {
	width:100%;
	margin:0 auto;
}
@media screen and (min-width:800px) {
	#bgLayer ,
	bottom-buttons.innerFrame {
		max-width:1920px;
		min-width:1200px;
	}
}
@media screen and (max-width:799px) {
	#bgLayer ,
	bottom-buttons.innerFrame {
		width:480px;
	}
}

section {
	padding-top:4em;
}
@media screen and (max-width:799px) {
	section {
		padding-top:2em;
	}
}

.innerFrame {
	width:1400px;
	max-width:100%;
	margin:0 auto;
	padding:0 2em;
}
.innerFrame .innerFrame {
	padding:0;
}
.innerFrame.w1600 {
	width:1600px;
}
.innerFrame.w1200 {
	width:1200px;
}
.innerFrame.w1000 {
	width:1000px;
}
.innerFrame.w900 {
	width:900px;
}
.innerFrame.w800 {
	width:800px;
}
@media screen and (max-width:799px) {
	.innerFrame {
		padding:0 0.5em;
	}
}

/* ==============================================
	header
=============================================== */
.header-h1 {
	height:2em;
	overflow:hidden;
}


@media screen and (min-width:800px) {
	.header-h1 h1 {
		margin-right:auto;
	}

	#h1 h1 {
		font-size:90%;
	}
	#h1 .logo img {
		height:6em;
	}

	#h1 .info {
		height:6em;
		flex-direction:column;
	}
	#h1 .contact {
		padding:0 1em;
		color:#fff;
		background:#f60;
		border-radius:0.5em;
	}
	#h1 .contact span {
		font-size:120%;
	}
	#h1 .tel img {
		height:2.4em;
	}
	#h1 .tel span {
		padding-left:0.3em;
		font-size:180%;
		font-weight:bold;
	}

	#headerFixedMenu {
		position:sticky;
		top:0;
		left:0;
		right:0;
		display:block;
		width:100%;
		color:#fff;
		background:#006dbc;
		z-index:1001;
	}

	.navList {
		padding: 0.2em 1em;
		display:flex;
		justify-content:space-between;
		align-items:streatch;
		text-align:center;
	}
	.navList > li {
		flex-grow:1;
		padding:0 0.1em;
	}
	.navList > li.spIcon {
		display:none;
	}
	.navList a {
		height: 100%;
		padding:0.5em;
		line-height:1.2;
		white-space:nowrap;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
	}
	.navList a:hover {
		color:#006dbc;
		background:rgba(255,255,255,0.9);
	}
	.navList .active a {
		color:#006dbc;
		background:#fff;
	}
}

@media screen and (max-width:799px) {
	.header-h1.flex.between {
		height:auto;
		justify-content:flex-start;
		flex-wrap:wrap;
	}
	.header-h1.flex.between > h1 {
		order:3;
		width:100%;
		padding-top:0.8em;
		line-height:1.4;
		padding-right:1em;
		font-size:90%;
		text-align:center;
	}
	.header-main.flex.between {
		justify-content:center;
	}
	.header-main .logo img {
		height:6.5em;
		padding-bottom:0.5em;
	}

	#headerFixedMenu li.logo {
		position:fixed;
		top:10px;
		left:10px;
		display:block;
		width:120px;
		z-index:100;
	}

	#headerFixedMenu .spTel {
		position:fixed;
		top:10px;
		right:70px;
		display:block;
		width:50px;
		height:50px;
		border-radius:50%;
		overflow:hidden;
		z-index:100;
		cursor:pointer;
	}
	#headerFixedMenu .spTel a {
		position:relative;
		display:block;
		border-radius:50%;
		overflow:hidden;
	}
	#headerFixedMenu .spTel a:before {
		content:"";
		position:absolute;
		top:2px;
		bottom:2px;
		left:2px;
		right:2px;
		display:block;
		border-radius:50%;
		background:#fff;
	}
	#headerFixedMenu .spTel img {
		filter:brightness(0.25);
	}

	#spMenu {
		position:fixed;
		top:0.5em;
		right:0.5em;
		display:block;
		width:3.5em;
		height:3.5em;
		background:#06c;
		border:2px solid #fff;
		border-radius:50%;
		z-index:100;
		cursor:pointer;
	}
	#spMenu span ,
	#spMenu:before ,
	#spMenu:after {
		position:absolute;
		top:calc(50% - 1px);
		left:20%;
		right:20%;
		display:block;
		height:2px;
		background:#fff;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	#spMenu:before ,
	#spMenu:after {
		content:"";
	}
	#spMenu span {
	}
	#spMenu:before {
		transform:translateY(-10px);
	}
	#spMenu:after {
		transform:translateY(10px);
	}

	.menuOn #spMenu span {
		opacity:0;
	}
	.menuOn #spMenu:before {
		transform:rotate(45deg);
	}
	.menuOn #spMenu:after {
		transform:rotate(-45deg);
	}


	body.menuOn {
		overflow:hidden;
    }

	#headerFixedMenu {
		position:fixed;
		top:0;
		bottom:0;
		right:-110%;
		display:block;
		width:100%;
		height:100%;
		padding:0 2em;
		z-index:99;
		background:rgba(192,255,255,0.9);
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	.menuOn #headerFixedMenu {
		right:0%;
		overflow-y:auto;
	}

	#headerFixedMenu .navCell {
		border-bottom:1px solid #006;
	}
	#headerFixedMenu .navCell a {
		padding:0.8em 1.5em;
		display:flex;
		align-items:baseline;
	}
	#headerFixedMenu .navCell a > span {
		font-size:130%;
	}

	#headerFixedMenu .navCell a:after {
		content:"";
		align-self:center;
		margin-left:auto;
		width:2em;
		height:2em;
		background:url(images/icons/arrow.png) 50% 50% no-repeat;
	}

	#headerFixedMenu .nav-logo {
		text-align:center;
		padding-bottom:1em;
		border-bottom:1px solid #006;
	}
	#headerFixedMenu .nav-logo img {
		width: 15em;
	}

	#headerFixedMenu .bottom-buttons > * {
		--padding:0 0.5em 1em;
		--height:3em;
	}
	#headerFixedMenu .bottom-button-wrapper {
		max-width:90%;
	}
	#headerFixedMenu .bottom-button-wrapper .button span {
		font-size:120%;
	}
	#headerFixedMenu .bottom-button-wrapper.tel .button span {
		font-size:130%;
		padding-right:1em;
	}
}

/* ==============================================
	main
=============================================== */


/* ==============================================
	footer
=============================================== */
.map iframe {
	width:100% !important;
}

footer {
	padding:0 0 5em;
	background:#8cd2f4;
	text-align:center;
}

.shopInfo {
	padding-top:1em;
	font-size:120%;
}
.shopInfo > div {
	padding-top:1em;
}

.shopInfo .logo img {
	width:20em;
}

#copyright {
	line-height:1.4;
}

@media screen and (max-width:799px) {
	.map iframe {
		height:300px !important;
	}

	.shopInfo .logo img {
		width:15em;
	}
	#copyright {
		font-size:85%;
	}
}



/* =============================================================================================
	contents layout
============================================================================================= */
@media screen and (min-width:800px) {
	* {
		scroll-margin-top:100px;
	}
}

/* =============================================================================================
	contents layout
============================================================================================= */
section {
	position:relative;
}


.bg2 {
	position:relative;
	background:url(images/common/bg/bg2.jpg) 50% 0 repeat #f39801;
}

.bottom-bg2 {
	padding-bottom:calc(100px + 3em);
}
.bottom-bg2 + .bg2:before {
	content:"";
	position:absolute;
	top:-99px;
	left:0;
	right:0;
	width:100%;
	height:100px;
	background:url(images/common/bg/bg2.jpg) 50% 0 repeat #f39801;
	-webkit-mask:url(images/common/bg/bg4_top.png) 50% 100% no-repeat;
	mask:url(images/common/bg/bg4_top.png) 50% 0 no-repeat;
}

.bg3 {
	position:relative;
	background:url(images/common/bg/bg3.jpg) 50% 0 repeat-y #81cff5;
}
.bg3.b {
	background:url(images/common/bg/bg3b.jpg) 50% 0 repeat-y #81cff5;
}

.bottom-bg3 {
	padding-bottom:calc(100px + 3em);
}
.bottom-bg3 + .bg3:before {
	content:"";
	position:absolute;
	top:-99px;
	left:0;
	right:0;
	width:100%;
	height:100px;
	background:url(images/common/bg/bg3.jpg) 50% 100% repeat-y #81cff5;
	-webkit-mask:url(images/common/bg/bg3_top.png) 50% 100% no-repeat;
	mask:url(images/common/bg/bg3_top.png) 50% 0 no-repeat;
}
.bottom-bg3 + .bg3.b:before {
	background-image:url(images/common/bg/bg3b.jpg);
}

.bg4 {
	position:relative;
	background:url(images/common/bg/bg4.jpg) 50% 0 repeat #fef102;
}

.bottom-bg4 {
	padding-bottom:calc(100px + 3em);
}
.bottom-bg4 + .bg4:before {
	content:"";
	position:absolute;
	top:-99px;
	left:0;
	right:0;
	width:100%;
	height:100px;
	background:url(images/common/bg/bg4.jpg) 50% 100% repeat #fef102;
	-webkit-mask:url(images/common/bg/bg4_top.png) 50% 100% no-repeat;
	mask:url(images/common/bg/bg4_top.png) 50% 0 no-repeat;
}

.bg5 {
	position:relative;
	background:#fff;
}
.bg5.bg-onepoint {
	background:url(images/common/bg/bg5_point.png) calc(50% - 700px ) calc(100% - 50px) no-repeat #fff;
}

.bg6 {
	position:relative;
	background:url(images/common/bg/bg6.jpg) 50% 0 repeat #f5e6ae;
}
.bg7 {
	position:relative;
	background:url(images/common/bg/bg7.webp) 50% 0 repeat #efcc8a;
}

.bottom-bg5 {
	padding-bottom:calc(170px + 3em);
}
.bottom-bg5 + .bg5:before {
	content:"";
	position:absolute;
	top:-169px;
	left:0;
	right:0;
	width:100%;
	height:170px;
	background:url(images/common/bg/bg5_top.png) 50% 100% no-repeat;
}

.bottom-bg7 {
	padding-bottom:calc(170px + 3em);
}
.bottom-bg7 + .bg7:before {
	content:"";
	position:absolute;
	top:-169px;
	left:0;
	right:0;
	width:100%;
	height:170px;
	background:url(images/common/bg/bg7_top.png) 50% 100% no-repeat;
}



.obi:before {
	content:"";
	display:block;
	width:100%;
	height:90px;
	margin:2em 0 3em;
	background:url(images/common/bg/border.png) 50% 50% repeat-x #1a274c;
}
.obi.obi40:before {
	margin-top:0;
	height:40px;
	background-size:auto 40px;
}

@media screen and (max-width:799px) {

	.bg2 {
		background-size:160px;
	}
	.bottom-bg2 {
		padding-bottom:50px;
	}
	.bottom-bg2 + .bg2:before {
		top:-49px;
		height:50px;
		-webkit-mask-size:960px;
		mask-size:960px;
	}

	.bg3 ,
	.bg3.b {
		background-size:600px;
	}
	.bottom-bg3 {
		padding-bottom:50px;
	}
	.bottom-bg3 + .bg3:before {
		top:-49px;
		height:50px;
		background: url(images/common/bg/bg3_top.png) 50% 100% no-repeat;
		background-size: 120% 100%;
	}

	.bg4 {
		background-size:100px;
	}
	.bottom-bg4 {
		padding-bottom:calc(50px + 2em);
	}
	.bottom-bg4 + .bg4:before {
		top:-49px;
		height:50px;
		background-size:100px;
		-webkit-mask-size:960px;
		mask-size:960px;
	}

	.bottom-bg5 {
		padding-bottom:calc(70px + 2em);
	}
	.bottom-bg5 + .bg5:before {
		top:-69px;
		height:70px;
		background-size:720px;
	}

	.bg6 {
		background-size:100px;
	}

	.bg7 {
		background-size:720px;
	}

	.bottom-bg7 {
		padding-bottom:calc(70px + 2em);
	}
	.bottom-bg7 + .bg7:before {
		top:-69px;
		height:70px;
		background-size:720px;
	}
	.obi:before {
		height:60px;
		background-size:auto 60px;
	}

}


/* =============================================================================================
	contents banner
============================================================================================= */
.contents-banner {
	padding-bottom:5em;
}
.contents-banner .cell {
	padding:1em;
}
.contents-banner .cell a {
	position:relative;
	display:block;
	border-radius:10px;
	box-shadow:3px 5px 0 #999;
}
.contents-banner .cell a img {
}
.contents-banner .cell a span {
	position:absolute;
	top:10%;
	bottom:10%;
	left:45%;
	right:3%;
	line-height:1.1;
	text-align: center;
	font-size:200%;
	font-family: var(--title-fonts);
}

@media screen and (min-width:800px) {
	.contents-banner .cell a:hover {
		box-shadow:0 0 5px #666;
		transform:translate(3px,5px);
		filter:brightness(1.1);
	}
}

@media screen and (max-width:799px) {
	.contents-banner {
		padding-bottom:3em;
	}
	.contents-banner .cell {
		width:70%;
		padding:0.3em;
	}
	.contents-banner .cell a {
		border-radius:3px;
		box-shadow:3px 3px 0 #ccc;
	}
	.contents-banner .cell a span {
		font-size:130%;
	}
}


/* =============================================================================================
	top
============================================================================================= */
.sub-text {
	padding-top:2em;
}
.sub-image {
	padding-top:3em;
}
.sub-image2 {
	padding-bottom:3em;
}
.sub-contents {
	padding:3em 0;
}
.sub-contents2 {
	padding-bottom:2em;
}

.belt-image {
	padding-bottom:6em;
}

.sub-image.belt-image {
	padding-bottom:0;
}

.big-text {
	padding-bottom:3em;
	color:#039;
	text-align:center;
}
.big-text p {
	font-size:250%;
	font-weight:bold;
}
.big-text.semi {
}
.big-text.semi p {
	font-size:180%;
}

.frame-shadow {
    border:5px solid #fff;
    box-shadow:0 0 5px #999;
}

@media screen and (max-width:799px) {
	.sub-text {
		padding-top:1em;
	}
	.sub-image {
		padding-top:1.5em;
	}
	.sub-contents {
		padding:2em 0;
	}
	.sub-contents2 {
		padding-bottom:1em;
	}

	.belt-image {
		padding-bottom:3em;
	}

	.belt-image img {
		aspect-ratio: 480/220;
		object-fit: cover;
	}

	.big-text p {
		font-size:140%;
	}

	.big-text.semi {
		padding-bottom:2em;
	}
	.big-text.semi p {
		font-size:120%;
	}
}


/* ==============================================
	fv
=============================================== */
section#fv {
}
.fv-slider {
	max-width:100%;
	margin:0 auto;
}

.fv-slider .fv-slider-img img {
	height:720px;
	object-fit:cover;
}

.fv-slider .slick-dots {
	position:relative;
	bottom:initial;
}

@media screen and (max-width:799px) {
	.fv-slider .fv-slider-img img {
		height:270px;
	}
}


/* ==============================================
	concept
=============================================== */
.concept-text {
	padding-bottom:3em;
	text-shadow:0.05em 0.05em 0 #fff;
	text-align:center;
	font-family:var(--title-fonts);
}
.concept-text p {
	font-size:180%;
}

.concept-image {
	text-align:center;
	padding-bottom:3em;
}
.concept-image .logo {
	width:400px;
	max-width:50%;
}

@media screen and (max-width:799px) {
	.concept-text {
		padding-bottom:2em;
	}
	.concept-text p {
		font-size:110%;
	}
	.concept-image {
		padding-bottom:2em;
	}

}



/* ==============================================
	jet activity
=============================================== */
.jet_activity {
	padding-bottom:6em;
	text-align:center;
}
.jet_activity > .image {
	padding-bottom:2em;
}
.jet_activity > .image a {
	border:2px solid #fff;
	box-shadow:5px 5px 0 #99c;
}

.jet_activity .sub {
	padding-bottom:0.3em;
	color:#039;
	text-shadow:1px 1px 0 #fff;
	font-size:240%;
	font-weight:bold;
}
.jet_activity .text {
	color:#003;
	text-shadow:1px 1px 0 #fff;
	font-size:150%;
	font-weight:bold;
}
.jet_activity .text.c2 {
	color:#039;
	text-shadow:1px 1px 0 #fff;
}
.jet_activity .activity-reserve {
	padding-top:2em;
}

@media screen and (min-width:800px) {
	.jet_activity .image a:hover {
		box-shadow:0 0 5px #06f;
		transform:translate(5px,5px);
		filter:brightness(1.1);
	}
}

@media screen and (max-width:799px) {
	.jet_activity {
		padding-bottom:3em;
	}
	.jet_activity .image {
/*
		padding-bottom:2em;
*/
	}

	.jet_activity .sub {
		font-size:150%;
	}
	.jet_activity .text {
		font-size:110%;
	}
}


/* ==============================================
	marine pack
=============================================== */
.pack_list {
	padding:0 0.5em 3em;
}
.pack_cell {
	padding:0.5em;
}

.pack_list .a-frame {
	display:block;
	padding:0.3em;
	text-align:center;
	background:#00a0e9;
	border-radius:0.4em;
	box-shadow:5px 5px 0 #f90;
}
.pack_list .a-frame .details {
	padding:0.3em;
	background:#e4f4fd;
	border-radius:0.3em;
}

.pack_list .course .label {
	color:#fff;
	font-size:120%;
	font-weight:900;
	background:#172a88;
	border-radius:1em;
}
.pack_list .course .type {
	line-height:1.2;
	color:#172a88;
	font-size:300%;
	font-weight:900;
}

.pack_list .price {
	color:#172a88;
	font-size:150%;
	font-weight:bold;
}
.pack_list .price small {
	font-size:80%;
}
.pack_list .price small:before {
	content:" / ";
}

.pack_list .activities li + li {
	padding-top:0.3em;
}
.pack_list .activities .label {
	color:#fff;
	font-size:110%;
	background:#f39800;
	border-radius:1em;
}
.pack_list .activities .plus {
	line-height:1.2;
	font-size:120%;
	font-weight:bold;
}
.pack_list .activities .none {
	opacity:0;
}

.pack_list .image img {
	padding:0.3em 0;
}
.pack_list .image img {
	aspect-ratio:600/300;
	object-fit:cover;
}

.pack_list .more {
	padding:0.2em;
}
.pack_list .more .button {
	color:#fff;
	font-size:110%;
	background:#83c31f;
	border:3px solid #fff;
	border-radius:0.3em;
}

@media screen and (min-width:800px) {
	.pack_list a:hover {
		box-shadow:0 0 5px #06f;
		transform:translate(2px,2px);
		filter:brightness(1.1);
	}
}

@media screen and (max-width:799px) {
	.pack_list.flex.col3 {
		flex-wrap:wrap;
		padding-bottom:1em;
	}
	.pack_list.flex.col3 > * {
		width:90%;
	}

	.pack_list .activities .none {
		display:none;
	}

}


/* ==============================================
	marine pack wide
=============================================== */
.pack_list_wide {
	padding:0 0.5em 1em;
}
.pack_cell_wide {
	padding:0.5em 0.5em 2em;
}

.pack_cell_wide .details {
	position:relative;
	display:block;
	height:100%;
	padding:0.5em 0;
	background:rgba(255,255,255,0.8);
	border:0.3em solid #172a88;
	border-radius:0.4em;
	box-shadow:0 0 5px #999
}

.pack_cell_wide .course.flex {
	text-align:center;
}
.pack_cell_wide .course .label {
	margin-left:-8px;
	padding:0 2em;
	color:#fff;
	font-size:150%;
	font-weight:700;
	background:#172a88;
	border-radius:0 2em 2em 0;
	box-shadow:-1px 0 5px #999
}
.pack_cell_wide .course .type {
	padding-left:0.3em;
	line-height:1.2;
	font-size:150%;
	font-weight:900;
}
.pack_cell_wide .course .label-en {
	padding-right:0.5em;
	line-height:1.3;
	color:#06c;
	font-size:200%;
	font-family:var(--serif-fonts);
}
.pack_cell_wide .course .label-en .type {
	padding-left:0.1em;
	line-height:0.7;
	font-size:200%;
}

.pack_cell_wide .comment {
	padding:0.5em 0 0.3em;
	line-height:1.4;
	width:100%;
	color:#f60;
	font-size:180%;
	font-weight:900;
	text-align:center;
}

.pack_cell_wide .info.flex {
	padding:0 1em;
}
.pack_cell_wide .info.flex > .info-left {
	width:60%;
	padding:0.5em;
}
.pack_cell_wide .info.flex > .image {
	width:40%;
	padding:0.5em;
}


.pack_cell_wide .price {
	line-height:1.3;
	color:#172a88;
	font-size:130%;
	text-align:center;
	font-weight:bold;
}
.pack_cell_wide .price em {
	font-size:150%;
	font-weight:900;
}
.pack_cell_wide .activities {
	padding-top:0.5em;
	color:#06c;
}

.pack_cell_wide .image img {
	aspect-ratio:600/400;
	object-fit:cover;
	border-radius:0.5em;
}

.pack_cell_wide .more {
	padding:0.5em;
}
.pack_cell_wide .more .button {
	width:60%;
	color:#fff;
	font-weight:bold;
	font-size:130%;
	background:#83c31f;
	border:3px solid #fff;
	border-radius:0.5em;
	text-align:center;
	box-shadow:3px 3px 0 #999;
}

.pack_cell_wide .more .button:hover {
		box-shadow:0 0 5px #ccc;
		transform:translate(3px,3px);
		filter:brightness(1.1);
}


.one-off .pack_cell_wide .course.flex {
	justify-content:flex-start;
	padding-bottom:0.5em;
}
.one-off .pack_cell_wide .course .label {
	background:#44b036;
	font-size:180%;
}
.one-off .pack_cell_wide .course .label-en {
	padding-left:0.5em;
	padding-bottom:0.1em;
	line-height:1.2;
	color:#44b036;
	font-size:280%;
	font-weight:bold;
	display:none;
}

.one-off .pack_cell_wide .info.flex > .info-left {
	padding-top:1.2em;
}

.one-off .pack_cell_wide .time {
	padding:0.2em 0;
	line-height:1.2;
	color:#fff;
	background:#f90;
	font-size:140%;
	text-align:center;
	font-weight:bold;
}
.one-off .pack_cell_wide .time em{
	font-size:150%;
	font-weight:900;
}

.one-off .pack_cell_wide .price{
	padding:0.3em 0 0.5em;
}


@media screen and (max-width:799px) {
	.pack_list_wide {
		padding-bottom:2em;
	}
	.pack_list_wide.flex.col2 > * {
		width:100%;
		font-size:80%;
	}

	.pack_cell_wide {
		padding-bottom:1.5em;
	}

	.pack_list_wide:not(.one-off) > .pack_cell_wide .course .label {
		padding:0 0.5em;
		font-size:120%;
	}
	.pack_list_wide:not(.one-off) > .pack_cell_wide .course .label-en {
		font-size:150%;
	}
	.pack_list_wide:not(.one-off) > .pack_cell_wide .comment {
		font-size:140%;
	}

	.pack_list_wide:not(.one-off) > .pack_cell_wide .info.flex {
		flex-direction:column;
	}
	.pack_list_wide:not(.one-off) > .pack_cell_wide .info.flex > .info-left {
		width:100%;
	}
	.pack_list_wide:not(.one-off) > .pack_cell_wide .info.flex > .image {
		width:70%;
		margin:0 auto;
	}
	.pack_list_wide:not(.one-off) > .pack_cell_wide .image img {
		aspect-ratio:600/300;
	}

	.pack_cell_list:not(.one-off) > .pack_cell_wide .price {
		font-size:150%;
	}

/*
	.one-off .pack_cell_wide .time {
		font-size:130%;
	}
	.one-off .pack_cell_wide .price {
		min-height:auto;
		padding-top:0.3em;
	}
	.one-off .pack_cell_wide .course .label {
		padding:0 0.8em;
	}
	.one-off .pack_cell_wide .course .label-en {
		padding-right:0;
		font-size:160%;
	}
*/
}


/* ==============================================
	video
=============================================== */
.movie-message {
	text-align:center;
	padding-bottom:3em;
}
.movie-message p {
	font-size:200%;
	font-weight:bold;
}


.main-movie {
	max-width: 900px;
	margin:auto;
	padding-bottom:3em;
	text-align:center;
}
.main-movie .js-modal-video img {
	aspect-ratio: 2/1;
}

.sub-movies.flex {
	padding:0 0.5em 3em;
}

.sub-movies.flex > * {
	padding:0.5em;
}
.sub-movies.flex .js-modal-video img {
	aspect-ratio: 3/2;
}

.js-modal-video {
	position:relative;
	display:block;
	overflow:hidden;
	cursor:pointer;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.js-modal-video img {
	width:100%;
	object-fit:cover;
	object-position:bottom;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.js-modal-video:after {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	display:block;
	width:15%;
	min-width:5em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_video.png) 50% 50% no-repeat;
	background-size:contain;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}


.modal-video .modal-video-body {
	max-width:1200px;
	padding:1em 0.5em;
}

.modal-video .modal-video-movie-wrap {
	height:calc(100% - 6em) !important;
}


@media screen and (min-width:800px) {
	.js-modal-video:hover {
		box-shadow: 0 0 8px #06f;
	}
	.js-modal-video:hover img {
		transform:scale(1.1);
	}
	.js-modal-video:after {
		filter:grayscale(0.8) drop-shadow(0 0 0 #fff);
	}
	.js-modal-video:hover:after {
		filter:grayscale(0) drop-shadow(0 0 0.5em #fff);
	}
}
@media screen and (max-width:799px) {
	.movie-message {
		padding-bottom:2em;
	}
	.movie-message p {
		font-size:130%;
	}

	.sub-movies.flex.col4 > * {
		width:50%;
		padding:0.3em;
	}
	.js-modal-video:after {
		min-width:4em;
	}
}


/* =============================================================================================
	activity
============================================================================================= */
.activity {
	color:#000;
	text-shadow:1px 1px 0 #fff;
}
.activity.innerFrame > div + div{
	padding-top:3em;
}

.activity-h3 > * {
	padding:0.5em;
	line-height:1.3;
	font-size:180%;
	font-weight:bold;
	color:#fff;
	text-shadow:1px 1px 0 #000;
	background:#039;
	border-radius:2em;
    box-shadow:0 0 5px #999;
	text-align:center;
}

.activity-h3.o > * {
	background:#f70;
}

.activity-h3.b2 > * {
	background:#06f;
	box-shadow: 0 0 5px #fff;
}

.activity-h3 + .pt2 {
	padding-top:2em;
}

@media screen and (max-width:799px) {
	.activity.innerFrame > div + div{
		padding-top:2em;
	}

	.activity-h3 > * {
		font-size:150%;
	}
}


/* ==============================================
	activity explanation
=============================================== */
.activity-catchtext {
	color:#006;
	font-size:200%;
	text-align:center;
}

.activity-image.flex {
	padding:2em 1em;
}
.activity-image.flex > div {
	padding:0 1em;
}
.activity-image.flex img {
	aspect-ratio:16/9;
	object-fit:cover;
}
.activity-image.flex p {
	padding:0.5em 0 2em;
	color:#006;
	font-size:110%;
	text-align:center;
}

.activity-message {
	color:#006;
	text-align:center;
}
.activity-message p {
	font-size:150%;
}

.activity-message.bold {
	padding:1em 0;
	font-weight:bold;
	background:rgba(255,255,255,0.8);
}
.activity-message.bold a.linkText {
	font-size: 115%;
}

.activity-message.p2_0 {
	padding:2em 0 1em;
}

.activity-message.t2 p {
	padding-bottom:0.2em;
}
.activity-message.t3 {
	padding-top:0.5em;
}
.activity-message.t3 li {
	padding-top:0.8em;
	font-size:120%;
	line-height:1.6;
}

@media screen and (max-width:799px) {
	.activity-catchtext {
		font-size:120%;
	}

	.activity-image.flex {
		padding:1em 0em 1.5em;
	}
	.activity-image.flex > div {
		padding:0 0.3em;
	}

	.activity-image.flex p {
		padding:0.5em 0 1em;
		line-height:1.4;
		font-size:90%;
	}

	.activity-message p {
		font-size:110%;
	}

	.activity-message.t2 p {
		font-size:120%;
		padding-bottom:1em;
		line-height:1.4;
	}
	.activity-message.t2.p2_0 p {
		padding-bottom:0.5em;
	}
	.activity-message.t3 {
		padding-top:0.3em;
	}
	.activity-message.t3 li {
		font-size:90%;
	}
}


/* ==============================================
	activity price
=============================================== */
.activity-price {
	max-width:100%;
	margin:0 auto;
	color:#006;
}

.square {
	width:100% !important;
	aspect-ratio:1/1;
	height:auto !important;
}

.activity-table-memo {
	padding:0 1em;
	color:#336;
	text-align:right;
}


@media screen and (max-width:799px) {
	.activity-flex.flex.col2 {
		flex-direction:column;
	}
	.activity-flex.flex.col2 > * {
		width:100%;
		padding:0 1em;
	}

	.activity-flex.flex.col2 > .sp-order-1 {
		order:1;
	}
	.activity-flex.flex.col2 > .sp-order-2 {
		order:2;
	}
	.activity-flex.flex.col2 > .sp-order-3 {
		order:3;
	}
	.activity-flex.flex.col2 > .sp-order-4 {
		order:4;
	}

}


/* ==============================================
	activity table
=============================================== */
.activity-table-cover {
	padding-top:3em;
}
.activity-table {
	width:100%;
	margin:0 auto;
	border-collapse:separate;
	border-spacing:0.3em;
}
.activity-table th ,
.activity-table td {
	padding:0.5em 1em;
	line-height:1.4;
	text-align:center;
}
.activity-table th {
	font-size:120%;
	font-weight:bold;
	color:#fff;
	text-shadow:1px 1px 0 #000;
	background:rgba(0,102,204,0.8);
	border:1px solid #0cf;
	white-space:nowrap;
}
.activity-table tr.head {
	height:4.5em;
}
.activity-table tr.head th {
	background: rgba(0,0,255,0.8);
	border: 3px solid #cff
}
.activity-table tr.hidden {
	height:2em;
	visibility: hidden;
}

html[lang='en'] .activity-table th {
	white-space:break-spaces;
}
.activity-table td {
	background:rgba(0,204,255,0.8);
	border:1px solid #0cf;
}
.activity-table em {
	font-size:200%;
	font-weight:bold;
}

.activity-table.o th {
	background:rgba(255,153,0,0.8);
	border:1px solid #f90;
}
.activity-table.o td {
	color:#f30;
	background:rgba(255,255,255,0.8);
	border:1px solid #f90;
}

@media screen and (max-width:799px) {
	.activity-table-cover {
		padding-top:2em;
	}
	.activity-table th {
		width:50%;
		padding:0.3em;
		font-size:110%;
	}
	.activity-table td {
		width:50%;
		padding:0.3em;
	}
	.activity-table em {
		font-size:150%;
	}

	.activity-table.o th {
		width:40%;
	}

	.activity-table.o td {
		width:60%;
	}
}


/* ==============================================
	activity condition
=============================================== */
.activity-condition {
	padding:0 0.3em;
}
.activity-condition li {
	padding-top:0.3em;
	text-align:center;
}
.activity-condition li div{
	padding:0.3em;
	font-size:110%;
	background:rgba(0,204,255,0.8);
	border:1px solid #0cf;
}
.activity-condition li div.card {
	font-size:130%;
	font-weight:bold;
	background:rgba(255,255,255,0.8);
	border:1px solid #0cf;
}
.activity-condition li div.card iframe {
	display:block;
	width:100% !important;
	height:auto !important;
	aspect-ratio:1/1;
}

.activity-condition li div.time {
	font-size:130%;
	font-weight:bold;
	background:rgba(255,255,255,0.8);
	border:1px solid #0cf;
}


@media screen and (min-width:800px) {
	.activity-condition li.map {
		height:calc(100% - 50px);
	}
	.activity-condition li.map div.card {
		height:100%;
	}
	.activity-condition li.map div.card iframe {
		height:100% !important;
		aspect-ratio:none;
	}
}

.activity-condition li div.card.info {
	font-size:100%;
	line-height:1.5;
	font-weight:normal;
}
.activity-condition li div.card.info p + p {
	padding-top:1em;
}
.activity-condition li div.card.info em {
	line-height:1.2;
	font-size:150%;
	font-weight:bold;
}
.activity-condition li div.card.info small {
	font-size:80%;
}

.activity-condition li .label {
	font-size:150%;
	font-weight:bold;
	color:#fff;
	text-shadow:1px 1px 0 #000;
	background:rgba(51,153,0,0.8);
	border:1px solid #6c0;
}

.activity-condition.o li div{
	background:rgba(255,204,0,0.8);
	border:1px solid #f90;
}
.activity-condition.o li div.card {
	color:#f30;
	text-shadow:1px 1px 0 #fff;
	background:rgba(255,255,255,0.8);
	border:1px solid #f90;
}



.activity-condition.location li div{
	color:#03c;
	border-radius:0.8em;
	border:3px solid #06f;
}
.activity-condition.location li div.time{
	color:#f30;
	border-color:#f60;
}
@media screen and (max-width:799px) {
	.activity-condition.location li div{
		font-size:100%;
	}
}


/* ==============================================
	activity notice
=============================================== */
.activity-notice > .flex {
	padding:0 1em;
}
.activity-notice .left-cell {
	padding:0 1em;
}

.activity-notice .notes {
	padding:2em 0.5em 0;
	font-size:90%;
}

.activity-notice .notes > div {
	padding-left:1em;
}
.activity-notice .notes > div + h4 {
	padding-top:0.5em;
}


/* ==============================================
	activity time table
=============================================== */
.activity-schedule {
}
.activity-schedule li {
	position:relative;
	padding-top:3em;
	text-align:center;
}

.activity-schedule li .inner-cell {
	padding:1em 2em;
	background:rgba(0,153,255,0.3);
	border:3px solid #fff;
	border-radius:0.5em;
	box-shadow:0 0 5px #999;
}

.activity-schedule h4 {
	line-height:1.6;
	padding-bottom:0.8em;
	font-size:180%;
	color:#fff;
	text-shadow:1px 1px 0 #000 ,0 0 0.1em #00f;
}
.activity-schedule h4 small {
	font-size:70%;
}

.activity-schedule p {
	font-size:120%;
}

.activity-schedule li + li {
	padding-top:4em
}
.activity-schedule li + li:before {
	content:"";
	position:absolute;
	top:1em;
	left:50%;
	display:block;
	width:8em;
	height:2em;
	margin-left:-4em;
	background:#06c;
	clip-path:polygon( 0 0 ,100% 0 ,50% 100% );
}

@media screen and (max-width:799px) {
	.activity-schedule li .inner-cell {
		padding:0.6em 1em;
	}
	.activity-schedule h4 {
		font-size:150%;
	}
	.activity-schedule p {
		font-size:100%;
	}
}



/* ==============================================
	activity time table
=============================================== */
.activity.innerFrame > div + div.activity-reserve {
	padding:4em 0;
}

.activity-reserve-button {
	display:block;
	min-width:600px;
	max-width:90%;
	margin:0 auto;
	padding:0.5em 1.5em;
	line-height:1.3;
	font-size:200%;
	color:#fff;
	text-shadow:1px 1px 0 #000;
	background:#09f;
	border:3px solid #fff;
	border-radius:0.5em;
	text-align:center;
	box-shadow:3px 3px 0 #333;
}
.activity-reserve-button.o {
	background:#f90;
}

.reserve-link-text {
	padding-bottom:0.5em;
	font-size:130%;
}



.button-flex {
	display:flex;
	justify-contents:center;
	align-items:center;
	padding-left:1.5em;
	padding-right:0.5em;
}
.button-flex > .b-text {
	flex-grow:1;
}

@media screen and (min-width:800px) {
	.activity-reserve-button:hover {
		box-shadow:0 0 0 #333;
		transform:translate(3px,3px);
		background:#03f;
	}
	.activity-reserve-button.o:hover {
		background:#f60;
	}
}

@media screen and (max-width:799px) {
	.activity.innerFrame > div + div.activity-reserve {
		padding:3em 0 2em;
	}
	.activity-reserve-button {
		min-width:320px;
		padding:0.5em;
		font-size:120%;
	}
	.reserve-link-text {
		padding-bottom:0.5em;
		font-size:100%;
		line-height:1.6;
	}
}



/* ==============================================
	rental
=============================================== */
.rental-notice {
	color:#444;
	text-shadow:none;
	font-size:90%;
}
.rental-notice .titleBar {
	padding-bottom:0;
}
.rental-notice .titleBar span {
	font-size:120%;
}
.rental-notice .activity {
	color:inherit;
	text-shadow:inherit;
	line-height:1.6;
	font-size:90%;
}
@media screen and (min-width:800px) {
	.rental-notice .activity-notice.innerFrame.w800 {
		padding-left:120px;
	}
}
@media screen and (max-width:799px) {
	.rental-notice .activity-notice .notes {
		padding-top:1em;
	}
}





/* =============================================================================================
	faq
============================================================================================= */
.faq-list {
	padding-bottom:6em;
}
.faq-list li {
	position:relative;
}
.faq-list li + li {
	padding-top:3em;
}

.faq-list .wrapper {
	position:relative;
}
.faq-list .q {
	z-index:2;
	padding-right:6em;
	padding-bottom:2em;
}
.faq-list .a {
	z-index:1;
	padding-left:6em;
}


.faq-list .a:before ,
.faq-list .a:after {
	--triangle-size:1.2em;
	--triangle-width:3px;
	--w:(var(--triangle-width) + 1px);
	content:"";
	position:absolute;
	z-index:3;
	left:10em;
	top:calc(var(--triangle-size) * -1);
	display:block;
	width:calc(var(--triangle-size) * 2);
	height:var(--triangle-size);
	background:#06c;
	clip-path:polygon( 0 100% ,100% 100% ,50% 0 );
	transform:translate(-50% ,var(--triangle-width));
}
.faq-list .a:before {
	z-index:2;
	top:calc(var(--triangle-size) * -1 - var(--w));
	width:calc(var(--triangle-size) * 2 + var(--w) * 2);
	height:calc(var(--triangle-size) + var(--w));
	background:#fff;
}
.faq-list .a:after {
	transform:translate(-50% ,calc(var(--w)));
}

.faq-list .wrapper > .frame {
	min-height:3.5em;
	padding:0.5em 1.5em;
	line-height:1.4;
	color:#fff;
	font-size:120%;
	border:3px solid #fff;
	border-radius:1em;
	box-shadow:3px 3px 0 #999;
}
.faq-list .q > .frame {
	background:#f69;
}
.faq-list .a > .frame {
	background:#06c;
}

.faq-list .q > .frame > .flex > * {
	font-size:110%;
}

@media screen and (max-width:799px) {
	.faq-list {
		padding-bottom:3em;
	}

	.faq-list li + li {
		padding-top:2em;
	}

	.faq-list .q {
		padding-right:2em;
		padding-bottom:1.8em;
	}
	.faq-list .a {
		padding-left:2em;
	}

	.faq-list .a:before ,
	.faq-list .a:after {
		left:6em;
	}

	.faq-list .wrapper > .frame {
		padding:0.5em 1em;
		font-size:110%;
	}
	.faq-list .wrapper.a > .frame {
	}
}


/* ======================================================================================================
	form
====================================================================================================== */
#page-contact .bottom-button-wrapper.tel{
	margin:0 auto;
}


.form-frame {
	padding:3em 0;
}

.form-frame .titleBar {
    padding-bottom:1em;
}
.form-frame .titleBar .flex > span {
	font-size:280%;
}
.form-block .activity-reserve-button {
	min-width:400px;
	font-size:160%;
}
@media screen and (max-width:799px){
	.form-frame .titleBar {
	    padding-bottom:0;
	}
	.form-frame .titleBar .flex > span {
		font-size:180%;
	}
	.form-block .activity-reserve-button {
		min-width:320px;
		padding:0.3em 0.5em 0.4em;
		font-size:130%;
	}
}

.form-wrapper {
	width:800px;
	max-width:100%;
	margin:0 auto;
	font-size:130%;
}
.form-wrapper dl{
	width:100%;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.form-wrapper dl > * {
	min-height:100%;
}
.form-wrapper dl > * > * {
	height:100%;
}

.form-wrapper dt{
	width:40%;
	padding:1em;
	border-bottom:1px solid #f90;
}

.form-wrapper dd{
	width:60%;
	padding:1em;
	border-bottom:1px solid #f90;
}


@media screen and (max-width:799px){
	.form-wrapper dl {
		padding:0 1em 1em;
	}
	.form-wrapper dt {
		width:100%;
		padding-bottom:0;
		border-bottom:0 none;
	}
	.form-wrapper dd {
		width:100%;
		padding-top:0.5em;
	}

	.form-wrapper .status2 dd{
		padding-left:2em;
	}

}




/* ====================================================================
	form - optional / required
==================================================================== */
.optional,
.required{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.type-label{
	display:inline-block;
	line-height:1.3;
	margin-right:0.5em;
	padding:0.1em 0.5em 0.2em;
	background-color:#f00;
	border-radius:0.3em;
	color:#ffffff;
	font-size:80%;
	white-space:nowrap;
}
.optional .type-label{
	background-color:#06f;
}

html:not([lang='ja']) .optional .type-label{
	display:none;
}
html[lang='en'] .required {
	flex-direction:column;
	align-items:flex-start;
}

@media screen and (max-width:799px){
	.optional,
	.required{
		justify-content:flex-start;
	}

	.type-label{
		margin-right:0.3em;
		padding:0.1em 0.3em 0.2em;
	}
	span.check > label {
		font-size:85%;
	}
}



/* ====================================================================
	form - field
==================================================================== */
input ,textarea,select{
	border-radius:0.5em;
	font-size:90%;
}
input:not([type='date']) ,textarea {
	width:100%;
	-webkit-appearance:none; 
	appearance:none;
}
input[type='radio'] ,input[type='checkbox']{
	width:1em;
	height:1em;
	-webkit-appearance:auto; 
	appearance:auto;
}

input:not([type="submit"]),select{
	border:2px solid #999;
	padding:0.3em 0.5em;
}

.textarea-text{
	padding:2.5em 5em !important;
}

textarea{
	resize:none;
	height:8em;
	padding:0.5em;
	border:2px solid #999;
}

span.check {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
span.check > label {
	padding-left:0.3em;
}


@media screen and (max-width:799px){
	input[type="submit"]{
		width:auto;
		padding:0.5em 1em;
	}

	input:focus ,textarea:focus{
		border:solid 2px #000000;
		outline:none;
		background-color:#99e5ff;
	}

}



/* ====================================================================
	form - button
==================================================================== */
.formButton{
	padding-top:2em;
	padding-left:1em;
	display:flex;
	justify-content:center;
	text-align:center;
}

input[type="submit"] ,
.formButton a {
	position:relative;
	z-index:2;
	width:auto;
	padding:0.5em 2em 0.6em;
	font-size:110%;
	line-height:1;
	text-indent:0.3em;
	letter-spacing:0.3em;
	color:#fff;
	background-color:#06f;
	border:2px solid #06f;
	border-radius:0.3em;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	cursor:pointer;
}
.formButton a{
	font-size:100%;
	text-indent:0.1em;
	letter-spacing:0.1em;
	border-radius:0.5em;
}

@media screen and (min-width:800px){
	.formButtonFrame {
		position:relative;
		display:inline-block;
		color:#06f;
		background:#fff;
		border:2px solid #06f;
		border-radius:0.3em;
		cursor:pointer;
		transition:background 0.3s ease;
		-webkit-transition:background 0.3s ease;
	}
	.formButtonFrame:hover {
		color:#fff;
		background:#06f;
	}

	input[type="submit"] ,
	.formButton a {
		color:inherit;
		background:transparent;
		border:0 none;
	}

}
@media screen and (max-width:799px){
}


/* ====================================================================
	form - error
==================================================================== */
.error {
	display:block;
	width:100%;
	margin:0.3em auto 0.5em;
	padding:0.2em 2em;
	color:#f00;
	border:1px solid #f00;
	background:rgba(255,255,255,0.6);
	border-radius:0.2em;
	font-size:90%;
}


/* ====================================================================
	form - confirm
==================================================================== */
.status2 #form-table {
	line-height:1.4;
}

@media screen and (max-width:799px){
	.status2 dd.form-5 {
		font-size:90%;
	}
}


/* ====================================================================
	form - customize
==================================================================== */
.field-group.flex {
	display:flex;
	justify-content:flex-start;
}
.field-group.flex > .flex {
	padding-right:2em;
}

.datePicker {
	position:relative;
}
.datePicker > input {
	width:14em;
}
.datePicker:after {
	content:"";
	position:absolute;
	top:50%;
	right:0.5em;
	display:block;
	width:1.6em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_calendar.png) 50% 50% no-repeat;
	background-size:100%;
	transform:translateY(-50%);
	opacity:0.6;
}

.appendDatepicker {
  position: relative;
}
.appendDatepicker .ui-datepicker {
  top: 0 !important;
  left: 0 !important;
}





#privacyBox {
	width:90%;
	height:10em;
	margin:0 auto;
	padding:0.5em;
	font-size:65%;
	line-height:1.4;
	color:#444;
	background:rgba(255,255,255,0.9);
	border:2px solid #999;
	border-radius:0.5em 0 0 0.5em;
	overflow:auto;
}
#privacyBox > h2{
	font-weight:bold;
}
#privacyBox > div{
	padding-left:1em;
	padding-bottom:0.5em;
}
#privacyBox dt{
}

.status2 #privacyBox {
	display:none;
}


.reserve-cover {
	padding:2em 0;
}
.reserve-text {
	font-weight: bold;
	font-size: 190%;
	font-family:'Noto Serif JP',serif;
}
.reserve-button-cover {
	padding-top:2em;
}

.reserve-button-cover > * {
	width:360px;
	padding:0.2em 0.3em 0.6em;
	text-align:center;
	font-size: 120%;
	line-height:1.2;
	background:rgba(255,255,255,0.9);
	border:1px solid #999;
	border-radius:0.5em;
}
.reserve-cover .text-cover {
	padding-bottom:0.3em;
}
.reserve-cover .text-cover small {
	font-size:80%;
}

.reserve-cover .img-cover{
	width: 50px;
	margin: 0;
	padding: 0 0.3em;
}
.reserve-cover .tel-number {
	font-size: 160%;
	font-weight: bold;
}

@media screen and (max-width:799px){
	.reserve-text {
		font-size:120%;
	}
	.reserve-button-cover {
		padding:0.5em 0 1em;
	}
	.reserve-button-cover > * {
		width:48%;
		font-size:90%;
	}
	.reserve-cover .img-cover {
		width:40px;
	}
}



/* ============================================================================================
	staff
============================================================================================= */
.staff-list.flex {
	padding:0 1em;
}
.staff-cell {
	padding:2em 1em 0;
}
.staff-cell:after {
	content:"";
	display:block;
	clear: both;
}
.staff-cell > * {
	height:100%;
	padding:1em;
	background: rgba(255,255,255,0.8);
	border:0.3em solid #172a88;
	border-radius:0.4em;
	box-shadow:0 0 5px #999;
}

.staff-cell .name {
	font-size:110%;
	padding:0 1em;
}
.staff-cell .name > .disp-ja {
	padding-right:1em;
}

.staff-cell .data.flex {
	flex-direction:row-reverse;
	padding:0.5em 1em 1em;
}
.staff-cell .image {
	float:right;
	width:40%;
	margin-left:1em;
}
.staff-cell .info {
	padding:1em 1em 0.5em;
}
.staff-cell .info > div + div {
	padding-top:0.5em;
	font-size:95%;
}


.staff-cell .title > span {
	padding:0 1em 0.2em;
	font-size:95%;
	color:#fff;
	background:#06c;
	border-radius:2em;
}
.staff-cell .title + .body {
	padding-left:1em;
}

@media screen and (max-width:799px){
	.staff-list.flex {
		padding:0;
	}
	.staff-list.flex.col2 > * {
		width:100%;
	}
	.staff-cell > * {
		padding-left:0.6em;
		padding-right:1.2em;
	}
	.staff-cell .image {
		width:42%;
		margin-top:1.5em;
		margin-left:0;
	}
	.staff-cell .info {
		padding-left:0.5em;
	}
}


/* ============================================================================================
	image ratio
============================================================================================= */
@media screen and (max-width:799px){
	.page-catch img {
		aspect-ratio: 480/180;
		object-fit: cover;
	}

	#page-parlor .page-catch {
		aspect-ratio: 480/180;
		align-items: flex-start;
		overflow:hidden;
	}
	#page-parlor .page-catch img {
		aspect-ratio: 480/200;
		object-position:top;
		max-height: none;
	}

	.asobiba-ratio img {
		aspect-ratio: 480/160;
		object-fit:cover;
		object-position:95%;
	}
}




/* ============================================================================================
	google_translate
============================================================================================= */
.skiptranslate ,
#google_translate_element {
	display:none;
}
body {
	top:0 !important;
}


.trans_title {
	padding-right:0.3em;
}
.trans_title .lang_label {
	display:block;
	height:1.4em;
	background:#0470bb;
	border-radius:0.4em;
}
.trans_list {
	align-self:flex-start;
}
.trans_list select {
	font-size:70%;
	border-width:1px;
	padding:0.1em 0.5em;
}

@media screen and (max-width:799px) {
	.trans_list select {
		font-size:80%;
	}
}


html[lang="ja"] .disp-en ,
html[lang="ja"] .disp-cn-ZH ,
html[lang="ja"] .disp-cn-TW {
	display:none;
}
html:not([lang="ja"]) .disp-ja {
	display:none;
}



/* ============================================================================================
	2024.11.1
============================================================================================= */
.details-notes {
	line-height:1.4;
	padding:0 2em 0.5em 3em;
	font-size:80%;
	color:#333;
}
.menu2-wrapper.innerFrame {
	padding:0 1em 2em;
}
.menu2 {
	position:relative;
	display:block;
	height:100%;
	padding:0.5em 0;
	background:rgba(255,255,255,0.8);
	border:0.3em solid #172a88;
	border-radius:0.4em;
	box-shadow:0 0 5px #999;
	text-align:center;
}
.menu2-title {
	padding-bottom:0.5em;
}
.menu2-title .label {
    margin-left: -8px;
    padding: 0 2em;
    color: #fff;
	font-size:180%;
    font-weight: 700;
	background:#44b036;
    border-radius: 0 2em 2em 0;
    box-shadow: -1px 0 5px #999;
}
.menu2-price {
	padding-bottom:0.2em;
}
.menu2-price .label {
	padding:0.2em 3em;
	line-height: 1.2;
	color:#fff;
	background:#f90;
	font-size:140%;
	font-weight:bold;
}
.menu2-price .value {
	padding-left:1em;
	color:#172a88;
	font-size:130%;
	text-align:center;
	font-weight:bold;
}
.menu2-price .value em {
	font-size:150%;
	font-weight:900;
}
.menu2-imagelist {
	padding:1em 0.5em 1em;
}
.menu2-imagecell {
	padding:1em 0.5em 0;
}
.menu2-image {
	line-height:1.4;
}
.menu2-image img {
	border-radius:0.3em;
}
.menu2-image-num {
	font-size:80%;
	color:#333;
}

.menu2-wrapper + .activity-reserve {
	padding-top:2em;
}

@media screen and (max-width:799px){
	.details-notes {
		font-size: 90%;
		padding:0 1em 0.5em 1.5em;
	}

	.menu2-wrapper.innerFrame {
		font-size: 80%;
	}
	.menu2-price.flex {
		flex-directio:column;
	}
	.menu2-imagelist.flex {
		padding-top:0;
		flex-wrap:wrap;
	}
	.menu2-imagelist.flex > * {
		width:calc(100% / 3);
	}
}



.add-bbq {
	max-width:1000px;
	margin:2em auto 0;
	padding:2em;
	background:rgba(255,255,255,0.8);
	border: 5px solid #f60;
	border-radius: 0.5em;
}
.add-bbq ul {
	max-width:800px;
	margin:0 auto;
	padding:1em 1em 0;
}
.add-bbq .activity-condition li div.card {
	font-size:150%;
}

@media screen and (max-width:799px){
	.add-bbq {
		padding:1.5em 1em;
	}
	.add-bbq .activity-h3 > * {
		font-size:140%;
	}
	.add-bbq .activity-condition li div.card {
		font-size:120%;
	}
}