@charset "UTF-8";

/*---------------------------------------------------------------- 著作 -*/
/* 制作者:Tomomi Koki */
/* システム:Evolution CMS */
/* 作成日:2026年02月01日 */
/* 更新日:2026年02月25日 */

/*--------------------------------------------------------- CSSリセット -*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/*----------------------------------------------------- iOS CSSリセット -*/
input[type="submit"],input[type="button"] {border-radius: 0;-webkit-box-sizing: content-box;-webkit-appearance: button;appearance: button;border: none;box-sizing: border-box;cursor: pointer;}input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration {display: none;}input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}

/*--------------------------------------------------- flatpickr.min.css -*/
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;border:solid 1px #ccc;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

/*------------------------------------------------------------ 初期設定 -*/
*, ::before, ::after {
	box-sizing: border-box
}
html {
	overflow-x: hidden
}
body {
	color: #002e4d;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 29px;
	margin: 0;
	overflow: visible;
	padding: 0;
	width: 100%
}
h1 {
	background: url(../images/template/logo.webp) no-repeat;
	float: left;
	height: 56px;
	margin: 13px 0 0 0;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 164px
}
h1 a {
	display: block;
	height: 56px;
	width: 164px
}
h2 {
	font-size: 45px;
	font-weight: normal;
	line-height: 58px;
	margin: 0 0 50px 0;
	text-align: center
}
h2 a:hover {
	text-decoration: none
}
.slide-menu h2 {
	color: #fff
}
#explanation h2 {
	font-size: 34px;
	font-weight: normal;
	line-height: 1.3em;
	margin: 0 0 25px 0;
	text-align: left
}
.visual02 h2 {
	margin: 0 0 35px 0
}
h3 {
	font-size: 30px;
	font-weight: normal;
	line-height: 44px;
	margin: 0 0 1.3em 0
}
#play h3 {
	margin: 70px 0 1em 0
}
#shop h3 {
	font-size: 26px;
	margin: 0 0 16px 0
}
footer h3 {
	background: url(../images/template/logo.webp) no-repeat;
	float: left;
	height: 56px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 164px
}
footer h3 a {
	display: block;
	height: 56px;
	width: 164px
}
h4 {
	border-bottom: solid 3px #999;
	font-size: 24px;
	font-weight: normal;
	margin: 0 0 1em 0;
	position: relative
}
.reservations_info h4 {
	font-weight: bold
}
h5 {
	font-size: 21px;
	font-weight: normal;
	margin: 0 0 0.5em 0
}
img {
	border-radius: 5px;
	max-width: 100%
}
ol {
	list-style-position: inside
}
li {
	list-style-type: none
}
section ol {
	list-style-position: outside;
	padding: 0 0 0 1.5em
}
section ol li {
	list-style-type: decimal;
	margin: 0 0 1.5em 0
}
section ul {
	padding: 0 0 0 1.5em
}
section ul li {
	list-style-type: disc;
	margin: 0 0 1.5em 0
}
a {
	color: #002e4d;
	text-decoration: none
}
a:hover {
	color: #002e4d;
	text-decoration: underline
}
a[href*=".pdf"]:after {
	background-image: url(../images/template/pdf.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 49px auto;
	content: "";
	display: inline-block;
	height: 16px;
	margin: 5px 0 0 10px;
	vertical-align: top;
	width: 49px
}
button,
textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	color: inherit;
	font: inherit;
	margin: 0;
	outline: none;
	padding: 4px 6px
}
button {
	cursor: pointer;
	display:block;
	margin: 0 auto 55px auto;
	padding: 5px 30px
}
input {
	border: 1px solid #ccc;
	border-radius: 3px;
	color: inherit;
	font: inherit;
	margin: 0;
	outline: none;
	padding: 0 6px
}
.content p {
	padding: 0 0 1em 0
}
@media only screen and (max-width: 1250px) {
	body {
		padding-top: 0
	}
	h1 {
		background-size: cover;
		height: 40px;
		margin: 15px 0 0 0;
		width: 117px
	}
	h2 {
		font-size: 38px;
		margin: 0 0 57px 0
	}
	#explanation h2 {
		font-size: 28px;
		margin: 0 0 15px 0
	}
	footer h3 {
		float: none;
		margin: 0 auto 25px auto
	}
	#play h3 {
		font-size: 24px;
		line-height: 1.2em;
		margin: 10px 0 25px 0
	}
}
@media only screen and (max-width: 736px) {
	body {
		line-height: 24px
	}
	h2 {
		font-size: 27px;
		line-height: 29px;
		margin: 0 0 30px 0;
		text-align: center
	}
	#explanation h2 {
		font-size: 28px;
		margin: 15px 0
	}
	#play h2 {
		margin-top: 30px
	}
	h3 {
		font-size: 20px;
		line-height: 22px
	}
	footer h3 {
		float: none;
		background-size: 90%;
		background-position: center;
		margin: 0 auto 10px auto
	}
	footer h3 a {
		display: block;
		width: 100%
	}
	#play h3 {
		font-size: 22px;
		margin: 20px 0
	}
	#shop h3 {
		font-size: 20px
	}
	h4 {
		font-size: 20px;
		line-height: 1.2em;
		padding: 0 0 5px 0
	}
	h5 {
		font-size: 18px
	}
}
@media only screen and (max-width: 375px) {
	body {
		font-size: 13px
	}
	h2,
	#explanation h2 {
		font-size: 20px
	}
	h3 {
		font-size: 18px;
		text-align: center
	}
	h4 {
		font-size: 10px
	}
	#play h3 {
		font-size: 17px;
		line-height: 22px
	}
}

/*---------------------------------------------------------------- 汎用 -*/
.spbr {
	display: inline
}
.tbbr {
	display: inline
}
.pcbr {
	display: block
}
.justify {
	overflow: hidden
}
.justifyleft {
	float: left;
	margin: 0 30px 0 0
}
.justifyright {
	float: right;
	margin: 0 0 0 30px
}
.delay03 {
	animation-delay: 0.3s
}
.delay05 {
	animation-delay: 0.5s
}
.delay10 {
	animation-delay: 1s
}
.delay20 {
	animation-delay: 2s
}
.animate__delay-05s {
	animation-delay: calc(var(--animate-delay) * 0.5)
}

.marker {
	background:linear-gradient(transparent 50%, rgba(255, 220, 123) 50%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	padding: 0 10px;
	transition:background-size 1.5s;
}
.marker.on {
	background-size: 100% 100%
}
@media only screen and (max-width: 1250px) {
	.tbbr {
		display: block
	}
}
@media only screen and (max-width: 736px) {
	.justifyleft,
	.justifyright {
		float: none;
		margin: 15px auto
	}
	.pctb {
		display: none !important
	}
	.sp {
		display: none !important
	}
	.pcbr {
		display: inline
	}
	.spbr,
	.spbr2 {
		display: block
	}
	.spnone {
		display: none
	}
}

/*------------------------------------------------------------ ヘッダー -*/
#secondary header {
	animation: bggradient 20s ease infinite;
	background: linear-gradient(25deg, #42b3e7, #42b3e7, #42b3e7);
	background-size: 200% 100%;
	box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
	left: 0;
	position: relative;
	top: 0;
	width: 100%;
	z-index: 2
}
header {
	background: none;
	height: 80px;
	left: 0;
	position: relative;
	top: 0;
	width: 100%;
	z-index: 2
}
@keyframes bggradient{
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
header .container {
	margin-right: auto;
	margin-left: auto;
	min-width: 1020px;
	max-width: 1220px;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%
}
header .container:before,
header .container:after {
	content: " ";
	display: table
}
header .container:after {
	clear: both
}
header .container .h-left {
	float: left;
	padding: 20px 0 19px 0
}
.global-navigation {
	float: right;
	padding: 24px 0 0 0
}
@media only screen and (max-width: 1250px) {
	header {
		height: 68px;
		left: 0;
		position: relative;
		top: 0;
		transition: 0.5s;
		width: 100%;
		-webkit-transition: 0.5s
	}
	header .container {
		height: 68px;
		min-width: 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		width: auto
	}
	.open header {
		background: none
	}
	header .container .h-left {
		padding: 15px 0
	}
	.global-navigation {
		padding: 0
	}
}
@media only screen and (max-width: 736px) {
	header,
	header .container {
		height: 69px
	}
	header .container {
		padding-left: 15px;
		padding-right: 15px
	}
}

/*----------------------------------------------------------------- SNS -*/
#sns .content {
	margin: 0 auto;
	padding: 50px 0;
	width: 1220px
}
#sns h3 {
	text-align: center
}
#sns #bnr {
	height: auto;
	margin: 10px 0 0 0;
	width: 100%
}
#sns #bnr ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-around;
	margin: 0;
	padding: 0;
	width: 100%
}
#sns #bnr li {
	border: 1px solid;
	border-image: linear-gradient(to right, #555, #ccc, #999) 1;
	display: flex;
	flex-direction: column;
	font-size: 18px;
	height: auto;
	line-height: 1.6em;
	margin-right: 2%;
	overflow: hidden;
	padding: 0.5em 0;
	text-align: center;
	width: 23%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
#sns #bnr li:nth-of-type(n+4) {
	margin-right: 0
}
#sns #bnr li a {
	color: #000
}
#sns #bnr li a:hover {
	text-decoration: none
}
@media only screen and (max-width: 1250px) {
	#sns .content {
		margin: 0 auto;
		width: 90%
	}
}
@media only screen and (max-width: 736px) {
	#sns #bnr li {
		line-height: 1.2em;
		margin-right: 0;
		overflow: hidden;
		width: 47%
	}
	#sns #bnr li:nth-of-type(n+1) {
		margin-right: 0;
		margin-bottom: 11px
	}
}

/*------------------------------------------------------------ フッター -*/
footer {
	animation: bggradient 20s ease infinite;
	background: linear-gradient(25deg, #00a0dd, #4cb5e8, #00a0dd);
	background-size: 200% 100%;
	color: #fff
}
footer .content {
	margin: 0 auto;
	padding: 40px 0 0 0;
	width: 1220px
}
footer .top {
	border-bottom: solid 1px #fff;
	margin: 0 0 25px 0;
	overflow: hidden;
	padding: 0 0 15px 0;
	width: 100%
}
footer #callme {
	float: right;
	width: 48.7%
}
footer #callme a {
	background: #fff;
	color: #42b3e7;
	display: block;
	float: left;
	font-weight: bold;
	font-size: 23px;
	margin: 0 24px 0 0;
	padding: 7px;
	text-align: center;
	width: 47%
}
footer #callme a:nth-child(2) {
	font-size: 21px;
	font-weight: normal;
	margin: 0
}
footer .contact {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 20px;
	justify-content: space-around
	margin: 0 0 30px 0
}
footer .contact .box {
	display: flex;
	flex-direction: column;
	height: auto;
	line-height: 1.6em;
	overflow: hidden;
	width: 50%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
footer .contact .box:nth-child(2) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0;
	overflow: auto;
	padding: 0
}
footer .contact .box p {
	padding: 0 0 10px 0
}
footer .contact .box p span {
	font-size: 15px
}
footer .contact .box p i {
	margin: 0 5px 0 0
}
.fa-message::before {
	display: inline-block;
	margin: 0 10px 0 0;
	transform: scaleX(-1)
}
footer .box ul {
	float: left;
	width: 50%
}
footer .box ul:nth-child(2) {
	float: right;
	width: 50%
}
footer .box li {
	color: #fff;
	font-size: 16px;
	margin: 0;
	padding: 0;
	text-align: left
}
footer .box li a {
	color: #fff;
	line-height: 1em
}
#copyright {
	clear: both;
	line-height: 3em;
	margin: 50px 0 0 0;
	text-align: center
}
@media only screen and (max-width: 1250px) {
	footer .content {
		width: 100%
	}
	footer .top {
		border-bottom: none;
		margin: 0;
		padding: 0
	}
	footer .contact {
		display: block;
		font-size: 18px;
		line-height: 1.6em;
		margin: 0;
		text-align: center;
		width: 100%
	}
	footer .contact .box {
		display: block;
		width: 100%
	}
	footer #callme {
		display: none
	}
	footer #callme a {
		float: none;
		margin: 0 0 14px 0;
		padding: 15px;
		width: 100%
	}
	footer #callme a:nth-child(2) {
		float: none
	}
	#copyright {
		padding: 0 0 15px 0
	}
}
@media only screen and (max-width: 736px) {
	footer .content {
		padding: 25px 0 0 0
	}
	footer .contact {
		display: block;
		margin: 0 auto;
		width: 90%
	}
	footer .contact .box:nth-child(2) {
		border-top: solid 1px #fff;
		margin: 10px 0 0 0;
		padding: 20px 0 10px 0
	}
	footer .box li {
		line-height: 1em;
		margin: 0 0 15px 0;
		padding: 0
	}
	footer .box li a {
		font-size: 14px
	}
	footer .contact .box p {
		font-size: 15px;
		line-height: 1.5em
	}
	footer .contact .box p span {
		font-size: 11px
	}
	#copyright {
		background: #fff;
		color: #2cace3;
		margin: 0;
		padding: 0
	}
}

/*-------------------------------------------------- ページトップボタン -*/
.page-top {
	align-items: center;
	border: solid 2px #eee;
	border-radius: 50%;
	bottom: 2%;
	color: #eee;
	display: flex;
	height: 50px;
	justify-content: center;
	opacity: 0;
	position: fixed;
	right: 3%;
	transition: .5s;
	visibility: hidden;
	width: 50px
}
.page-top::before {
	content: "\f106";
	font-family: "Font Awesome 6 Free";
	font-size: 30px;
	font-weight: 900
}
.page-top:hover {
	cursor: pointer
}
.page-top span {
	overflow: hidden;
	text-indent: -9999px
}
.is-active {
	opacity: 1;
	visibility: visible
}
@media only screen and (max-width: 736px) {
	.page-top {
		bottom: 0;
		height: 30px;
		right: 5%;
		width: 30px
	}
	.page-top::before {
		font-size: 15px
	}
}

/*-------------------------------------------- グローバルナビゲーション -*/
body.open {
	overflow: auto
}
body.open .slide-menu {
	opacity: 1;
	z-index: 1
}
.slide-menu .content {
	margin: 0 3%;
	padding: 20px 0 0 0;
	width: 94%
}
.slide-menu {
	background: linear-gradient(0deg, rgba(38, 171, 227, 0.8), rgba(38, 171, 227, 0.7), rgba(38, 171, 227, 0.9));
	backdrop-filter: blur(20px) saturate(0.8);
	-webkit-backdrop-filter: blur(20px) saturate(0.8);
	height: 100%;
	right: 0;
	overflow: hidden;
	opacity: 0;
	padding-bottom: 26px;
	padding-top: 72px;
	position: fixed;
	text-align: left;
	top: 0;
	transition: .3s;
	-webkit-transition: .3s;
	width: 100%;
	z-index: -1
}
.slide-menu p {
	color: #fff;
	font-size: 18px;
	padding: 0 0 0.8em 0
}
.slide-menu ul {
	height: auto;
	margin: 0 0 30px 0;
	overflow: auto
}
.slide-menu ul a::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	float: right;
	font-weight: 900
}
.slide-menu ul li {
	border: 1px solid;
	border-image: linear-gradient(to right, #ccc, #fff, #d9d9d9) 1;
	border-radius: 5px;
	float: right;
	margin-bottom: 10px;
	padding: 0 12px;
	width: 49%
}
.slide-menu ul li:nth-child(odd) {
	float: left
}
.slide-menu ul li a {
	color: #fff;
	display: inline-block;
	font-size: 16px;
	overflow: hidden;
	padding: 10px 0;
	text-overflow: ellipsis;
	text-decoration: none;
	white-space: nowrap;
	width: 100%
}
.nav-group {
	border-top: solid 1px #eee;
	color: #fff;
	padding: 18px 0 !important;
	position: relative
}
.nav-group:last-of-type {
	border-top: solid 1px #eee
}
.nav-group::before {
	content: '\2b';
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 20px;
	transition: 0.3s
}
.nav-group.open::before {
	content: '\f068';
	transform: rotate(180deg)
}
.nav-group2 {
	border-top: solid 1px #eee;
	color: #fff;
	padding: 18px 0 !important;
	text-decoration: none
}
.nav-group2:last-of-type {
	border-bottom: solid 1px #eee
}
.nav-group2 a {
	color: #fff;
	display: block
}
.nav-group2 a:hover {
	text-decoration: none
}
.nav-group2 a::before {
	color: #fff;
	content: '\f105';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	padding-top: 0 !important;
	position: absolute;
	right: 35px
}
.nav-list {
	display: none;
	padding: 0
}
nav ul {
	margin-right: -15px
}
nav ul:before,
nav ul:after {
	content: " ";
	display: table
}
nav ul:after {
	clear: both
}
nav ul>li {
	float: left
}
nav ul>li>span,
nav ul>li>a {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 18px;
	font-weight: 500;
	padding: 0 15px;
	position: relative;
	text-decoration: none
}
nav ul>li>span:before,
nav ul>li>span:after,
nav ul>li>a:before,
nav ul>li>a:after {
	background: #fff;
	content: "";
	height: 1px;
	left: 0;
	margin: 0 auto;
	max-width: 0;
	position: absolute;
	right: 0;
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	width: 100%
}
nav ul>li>span:before,
nav ul>li>a:before {
	top: 0
}
nav ul>li>span:after,
nav ul>li>a:after {
	bottom: 0
}
.sub-nav {
	background: linear-gradient(90deg, rgba(239,239,239, 0.8) 2%, rgba(239,239,239, 0.9) 30%, rgba(239,239,239, 1) 70%, rgba(239,239,239, 0.9) 98%, rgba(239,239,239, 0.8));
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%
}
#roop .sub-nav {
	background: linear-gradient(90deg, rgba(250,250,250, 0) 2%, rgba(250,250,250, 0.1) 30%, rgba(250,250,250, 0.2) 70%, rgba(250,250,250, 0.1) 80%, rgba(250,250,250, 0))
}
.sub-nav .content {
	display: none;
	padding: 0
}
.sub-nav .content.active {
	display: block
}
.sub-nav ul:before,
.sub-nav ul:after {
	content: " ";
	display: table
}
.sub-nav ul:after {
	clear: both
}
.sub-nav ul>li {
	float: left;
	width: 25%
}
.sub-nav ul>li a {
	background: #fff;
	border: 1px solid #f6f6f6;
	color: #002e4d;
	display: inline-block;
	padding: 7px 10px;
	text-align: center;
	text-decoration: none;
	text-wrap: nowrap;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	width: 100%
}
#roop .sub-nav ul>li a {
	background: rgba(255,255,255,0.85);
	border: 1px solid #3864a1
}
.sub-nav ul>li a:hover,
#roop .sub-nav ul>li a:hover {
	background: #60c4dc;
	color: #fff
}
.slidemenu-btn {
	cursor: pointer;
	height: 69px;
	padding: 0 7px;
	position: absolute;
	right: 15px;
	top: 10px
}
.slidemenu-btn>span {
	background: #fff;
	display: block;
	height: 1px;
	margin: 11px auto;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	width: 30px
}
.slidemenu-btn.active>span:nth-child(1) {
	-webkit-transform: translate(0, 12px) rotate(45deg);
	transform: translate(0, 12px) rotate(45deg)
}
.slidemenu-btn.active>span:nth-child(2) {
	opacity: 0
}
.slidemenu-btn.active>span:nth-child(3) {
	-webkit-transform: translate(0, -12px) rotate(-45deg);
	transform: translate(0, -12px) rotate(-45deg)
}
.sub-nav .container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%
}
.sub-nav .container:before,
.sub-nav .container:after {
	content: " ";
	display: table
}
.sub-nav .container:after {
	clear: both
}
nav li {
	color: #ee2d7b;
	display: inline-block;
	font-size: 20px;
	position: relative;
	text-decoration: none;
	transition: .3s
}
html[lang="en"] nav li {
	color: #ee2d7b;
	display: inline-block;
	font-size: 20px;
	line-height: 1em;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: .3s;
	max-width: 140px
}
nav li a:hover {
	text-decoration: none
}
nav li::before,
nav li::after {
	background-color: #fff;
	content: '';
	height: 1px;
	position: absolute;
	transition: .3s;
	width: 0
}
nav li::before {
	left: 0;
	top: 0
}
nav li::after {
	bottom: 0;
	right: 0
}
nav li:hover::before,
nav li:hover::after {
	width: 100%
}
nav li a:hover {
	color: #fff
}
@media only screen and (max-width: 1250px) {
	.computer {
		display: none !important
	}
}
@media only screen and (min-width: 1250px) {
	.slidemenu-btn {
		display: none
	}
	.sub-nav .container {
		padding-left: 15px;
		padding-right: 15px
	}
	body:not(.top) .slidemenu-btn {
		position: absolute;
		right: 20px;
		top: 10px
	}
}

/*------------------------------------------------------ コンテンツナビ -*/
#content-nav {
	background: url(../images/template/content-nav.webp) no-repeat center 25% / cover
}
#content-nav .content {
	padding: 50px 0 65px 0
}
#content-nav-list {
	height: auto;
	overflow: hidden;
	position: relative
}
#content-nav-list ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0
}
#content-nav-list li {
	display: block;
	margin: 9px 8px;
	width: calc(24% - 9px)
}
#content-nav-list li:first-child {
	animation-delay: 0.4s
}
#content-nav-list li:nth-child(2) {
	animation-delay: 0.5s
}
#content-nav-list li:nth-child(3) {
	animation-delay: 0.6s
}
#content-nav-list li:nth-child(4) {
	animation-delay: 0.7s
}
#content-nav-list li:nth-child(5) {
	animation-delay: 0.8s
}
#content-nav-list li:nth-child(6) {
	animation-delay: 0.9s
}
#content-nav-list li:nth-child(7) {
	animation-delay: 1.0s
}
#content-nav-list li:nth-child(8) {
	animation-delay: 1.1s
}
#content-nav-list li:nth-child(9) {
	animation-delay: 1.2s
}
#content-nav-list li:nth-child(10) {
	animation-delay: 1.3s
}
#content-nav-list li:nth-child(11) {
	animation-delay: 1.4s
}
#content-nav-list li:nth-child(12) {
	animation-delay: 1.5s
}
#content-nav-list li a {
	background: rgba(255,255,255,0.2);
	border: solid 1px #999;
	border-radius: 27px;
	cursor: pointer;
	display: block;
	line-height: 54px;
	overflow: hidden;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-wrap: nowrap;
	width: 100%
}
#content-nav-list li a::before {
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	float: right;
	font-weight: 900;
	line-height: 54px;
	margin: 0 20px 0 0
}
#content-nav-list li a:hover {
	background: linear-gradient(280deg, rgba(0,154,177,0.8), rgba(0,154,177,0.7), rgba(0,154,177,0.8));
	color: #fff
}
#content-nav-list li a:hover::before {
	color: #fff;
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	float: right;
	font-weight: 900;
	line-height: 54px;
	margin: 0 20px 0 0
}
#content-nav-list a i {
	padding: 0 15px 0 0
}
@media only screen and (max-width: 1250px) {
	#content-nav-list {
		background: none;
		border: none;
		padding: 0 0 50px 0
	}
	#researchers .content p {
		text-align: left
	}
	#content-nav-list ul {
		justify-content: space-evenly;
		overflow: hidden
	}
	#content-nav-list li {
		width: calc(49% - 10px)
	}
	#content-nav-list li a {
		border-radius: 5px;
		font-size: 18px;
		padding: 0 20px;
		text-align: left
	}
	#content-nav-list li a::before {
		margin: 0
	}
	#content-nav-list li a:hover::before {
		margin: 0
	}
}
@media only screen and (max-width: 736px) {
	#content-nav {
		background: linear-gradient(180deg, #fcfcfc, #f8f8f8, #fff);
		box-shadow: 0 -15px 16px -16px rgba(53, 47, 47, 0.1)
	}
	#content-nav .content {
		padding: 50px 0 0 0
	}
	#content-nav-list ul {
		display: block
	}
	#content-nav-list li {
		float: none;
		margin: 0 0 10px 0;
		width: 100%
	}
	#content-nav-list li a {
		padding: 0 20px
	}
	#content-nav-list li::before {
		margin: 10px 25px 0 0
	}
	#content-nav-list li:hover::before {
		line-height: 16px
	}
}

/*------------------------------------------------------ パンくずリスト -*/
#breadcrumb {
	animation: bggradient 20s ease infinite;
	background: linear-gradient(25deg, #fffbe8, #fffbe8, #fffbe8);
	background-size: 200% 100%
}
#breadcrumb2 {
	background: linear-gradient(25deg, #e4cb74, #f7eec1, #e4cb74)
}
#breadcrumb .content,
#breadcrumb2 .content {
	overflow: hidden;
	padding: 8px 20px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap
}
@media only screen and (max-width: 1250px) {
	#breadcrumb .content,
	#breadcrumb2 .content {
		line-height: 1.3em;
		width: 100%
	}
}

/*---------------------------------------------------------- ページング -*/
#prevnex {
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	margin: 100px auto 50px auto;
	overflow: hidden;
	padding: 10px 0;
	width: 100%
}
#prevnex ul {
	list-style: none;
	margin: 0;
	padding: 0
}
#prevnex li.prev,
#prevnex li.next {
	float: left;
	height: 57px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 40px;
	position: relative;
	text-overflow: ellipsis;
	width: 48%
}
#prevnex li.next {
	float: right;
	padding: 0 40px 0 0
}
#prevnex li.prev::before {
	bottom: 0;
	color: #eee;
	content: "\f053";
	font-family: "Font Awesome 6 Free";
	font-size: 30px;
	font-weight: 900;
	left: 0;
	position: absolute;
	top: 14px
}
#prevnex li.prev span {
	display: block;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%
}
#prevnex li.next {
	padding: 0 40px 0 0;
	text-align: right
}
#prevnex li.next::before {
	bottom: 0;
	color: #eee;
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-size: 30px;
	font-weight: 900;
	position: absolute;
	right: 0;
	top: 14px
}
#prevnex li.next span {
	display: block;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%
}
.page_navi *,
.page_navi *:after,
.page_navi *:before {
	box-sizing: border-box;
	-webkit-box-sizing: border-box
}
.page_navi {
	margin: 50px auto 0 auto;
	text-align: center;
	width: 100%
}
.page_navi a {
	color: #60c4dc;
	text-decoration: none
}
.page_navi .pageing {
	display: inline-block;
	margin: 11px 0 0 0;
	padding: 0 0.5em
}
.page_navi a,
.page_navi span.current {
	background: #fff;
	border-radius: 20px;
	color: #60c4dc;
	display: block;
	float: left;
	font-size: 1em;
	line-height: 38px;
	letter-spacing: 0.1em;
	margin: 0 5px;
	padding: 0 13px;
	transition: 400ms ease
}
.page_navi a:hover,
.page_navi span.current {
	background-color: #60c4dc;
	color: #fff;
	padding: 0 14px
}
.page_navi a.prev:hover,
.page_navi a.next:hover {
	background-color: transparent;
	color: #C5E1A5
}
@media only screen and (max-width: 1250px) {
	.page_navi .pageing {
		padding: 0 10px 5px 5px
	}
	.page_navi a,
	.page_navi span.current {
		line-height: 40px;
		padding: 0 15px
	}
	.page_navi a.prev,
	.page_navi a.next {
		padding: 0 10px
	}
}
@media only screen and (max-width: 736px) {
	#prevnex li.prev,
	#prevnex li.next {
		height: 25px;
		padding: 0 0 0 25px
	}
	#prevnex li.next {
		padding: 0 25px 0 0
	}
	#prevnex li.prev::before,
	#prevnex li.next::before {
		color: #ccc;
		font-size: 20px;
		top: 0
	}
	#prevnex li.prev span,
	#prevnex li.next span {
		display: none
	}
	.page_navi {
		margin: 20px auto
	}
	.page_navi a {
		display: none;
		padding: 0 21px
	}
	.page_navi a:nth-of-type(2) {
		padding-right: 50px;
		position: relative
	}
	.page_navi a:nth-of-type(2)::after {
		content: '...';
		font-size: 1.2em;
		left: 45px;
		position: absolute;
		top: 0
	}
	.page_navi a:nth-child(-n+3),
	.page_navi a:nth-last-child(-n+3) {
		display: block
	}
	.page_navi a:nth-last-child(-n+4) {
		padding-right: 14px
	}
	.page_navi a:nth-last-child(-n+4)::after {
		content: none
	}
	.page_navi a.prev,
	.page_navi a.next {
		padding: 0 10px
	}
}

/*---------------------------------------------------------- コンテンツ -*/
article {
	margin-bottom: 0;
	width: 100%
}
.content {
	margin: 0 auto;
	padding: 100px 0;
	width: 1220px
}
@media only screen and (max-width: 1250px) {
	.content {
		overflow: hidden;
		padding: 50px 0;
		width: 94%
	}
}
@media only screen and (max-width: 736px) {
	#play .content {
		margin-top: -120px;
		padding: 0 0 25px 0
	}
}

/*---------------------------------- トップページ（メインヴィジュアル） -*/
.visual01 {
	height: 100dvh;
	position: relative;
	width: 100%
}
#roop {
	animation-duration: 2.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: imageBlur;
	animation-name: imageBlur;
	background: url("../images/template/okinawa-ocean.webp") no-repeat center center / cover;
	background-attachment: fixed;
	height: 100vh;
	-moz-transition: -moz-transform 1.5s linear;
	-webkit-transition: -webkit-transform 1.5s linear;
	-o-transition: -o-transform 1.5s linear;
	-ms-transition: -ms-transform 1.5s linear;
	transition: transform 2.5s linear;
	-webkit-animation-duration: 2.5s;
	transition: 0.8s;
	width: 100%
}
@-webkit-keyframes imageBlur {
	from {
		 opacity: 0;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		-o-filter: blur(15px);
		filter: blur(15px)
	}
	to {
		opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px)
	}
}
#firstview {
	clear: both;
	height: 75vh;
	margin: 0;
	position: relative; 
	width: 100vw;
	white-space: nowrap
}
#catch {
	animation-delay: 1.5s;
	animation-duration: 3.5s;
	color: #fff;
	font-family: "M PLUS 1", sans-serif;
	font-feature-settings: "palt";
	font-optical-sizing: auto;
	font-weight: 900;
	font-size: 45px;
	font-style: normal;
	left: 50%;
	line-height: 70px;
	position: relative; 
	top: 45%;
	text-align: center;
	transform: translate(-50%,-50%)
}
#next_btn {
	height: 100vh;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%
}
#scroll {
	animation-delay: 3s;
	border: 2px solid #fff;
	border-radius: 50%;
	bottom: 40px;
	display: block;
	height: 50px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	transition: .5s;
	width: 50px
}
#scroll a {
	display: block;
	height: 50px;
	width: 50px
}
#scroll span {
	height: 50px;
	left: 0;
	margin: auto;
	padding: 8px 0 0 12px;
	position: absolute;
	right: 0;
	top: 0;
	width: 50px
}
#scroll span:before {
	content: "\f107";
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-size: 26px;
	font-weight: 900
}
#scroll::before {
	animation: scroll 2s infinite;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
	content: "";
	height: 50px;
	left: 0;
	margin: auto;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 50px
}
#scroll.hide {
	display: none
}
@keyframes scroll {
	0% {
		opacity: 0
	}
	30% {
		opacity: 1
	}
	60% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, .2);
		opacity: 0
	}
	100% {
		opacity: 0
	}
}
@media only screen and (max-width: 1250px) {
	.visual01 {
		height: 100dvh
	}
	#roop {
		background: url("../images/template/okinawa-ocean_tb.webp") no-repeat center center / cover
	}
	#catch {
		font-size: 44px;
		line-height: 1.6em;
		text-align: left;
		transform: translate(-50%, -50%);
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl
	}
	#next_btn {
		height: 100dvh
	}
}
@media only screen and (max-width: 736px) {
	#roop {
		background: url("../images/template/okinawa-ocean_sp.webp") no-repeat center center / cover
	}
	#catch {
		font-size: 38px;
		top: 50%
	}
}
@media only screen and (max-width: 375px) {
	#catch {
		font-size: 26px;
		line-height: 1.4em
	}
	#scroll {
		bottom: 20px;
		height: 30px;
		width: 30px
	}
	#scroll a {
		height: 30px;
		width: 30px
	}
	#scroll span {
		height: 30px;
		padding: 0 0 0 4px;
		width: 30px
	}
	#scroll span:before {
		font-size: 20px
	}
	#scroll::before {
		height: 30px;
		width: 30px
	}
}

/*------------------------------------- トップページ（CHOOSE YOUR FUN） -*/
#plan {
	background-image: url("../images/template/play_bg.webp");
	background-position: right top;
	background-size: cover
}
#plan .content {
	padding: 50px 0 80px 0
}
#plan #guide {
	display: flex;
	justify-content: space-evenly
}
#plan #guide a {
	position: relative;
	width: 47%
}
#plan #guide a:hover {
	text-decoration: none
}
#plan #guide .box img {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	display: block;
	width: 100%
}
#plan p {
	margin-bottom: 1em;
	text-align: center
}
#plan #guide .box p {
	background: #f7a83f;
	border-radius: 5px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3em;
	margin: -60px 3%;
	padding: 10px;
	position: absolute;
	width: 94%
}
@media only screen and (max-width: 1250px) {
	#plan .content {
		padding: 50px 0 65px 0
	}
	#plan #guide .box p {
		color: #fff;
		font-weight: normal
	}
}
@media only screen and (max-width: 850px) {
	#plan .content {
		padding: 50px 0 25px 0
	}
	#plan #guide {
		display: block
	}
	#plan #guide a {
		display: block;
		margin: 0 0 15px 0;
		overflow: hidden;
		width: 100%
	}
	#plan #guide .box {
		display: block;
		margin: 0 0 14px 0;
	}
	#plan #guide .box img {
		width: 100%
	}
	#plan #guide .box p {
		padding: 10px 0
	}
}
@media only screen and (max-width: 375px) {

	#plan #guide .box p {
		font-size: 17px
	}
}

/*-------------------------- トップページ（こんな海遊びが楽しめます！） -*/
.footer_wave {
	width: 100%
}
.parallax > use {
	animation: move-forever 12s linear infinite
}
.parallax > use:nth-child(1) {
	animation-delay: -2s
}
.parallax > use:nth-child(2) {
	animation-delay: -2s;
	animation-duration: 5s
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 3s
}
@keyframes move-forever {
	0% {
		transform: translate(-90px, 0%)
	}
	100% {
		transform: translate(85px, 0%)
	}
}
.editorial {
	display: block;
	width: 100%;
	height: 3em;
	max-height: 100vh;
	margin: 0;
	bottom: 0
}
@media (max-width: 736px) {
	.editorial {
		height: 10vw;
		margin-bottom: 120px
	}
}
.wrapper {
	animation: floating-x 7.2s ease-in-out infinite alternate-reverse
}
.wrapper2 {
	animation: floating-x 8.2s ease-in-out infinite alternate-reverse
}
.wrapper3 {
	animation: floating-x 9.2s ease-in-out infinite alternate-reverse
}
.target {
	animation: floating-y 2.8s ease-in-out infinite alternate-reverse
}
@keyframes floating-x {
	0% {
		transform: translateX(-1%);
	}
	100% {
		transform: translateX(1%);
	}
}
@keyframes floating-y {
	0% {
		transform: translateY(-1%);
	}
	100% {
		transform: translateY(1%);
	}
}
#play {
	background: #ecf9fd;
}
#play .box {
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0 20px;
	width: 100%
}
#play .box img {
	border: solid 14px #fff;
	border-radius: 50%;
	float: left;
	height: 330px;
	margin: 0 40px;
	width: 330px
}
#play .box:nth-of-type(even) img {
	float: right;
	margin: 0 0 0 80px
}
@media only screen and (max-width: 1250px) {
	.wrapper,
	.wrapper2,
	.wrapper3,
	.target {
		animation: none
	}
	#play .box {
		padding: 0 0 30px 0;
	}
	#play .box img {
		border: solid 8px #fff;
		height: 240px;
		margin: 0 20px 0 0;
		width: 240px
	}
	#play .box:nth-of-type(even) img {
		float: right;
		margin: 0 0 0 20px
	}
}
@media only screen and (max-width: 736px) {
	#play .box img,
	#play .box:nth-of-type(even) img {
		border: none;
		border-radius: 5px;
		display: block;
		float: none;
		height: auto;
		margin: 0 auto;
		width: 100%
	}
	#play .box p {
		margin: 0 0 2em 0
	}
}


/*-------------------------------- トップページ（ようこそ、X-TRIPへ！） -*/
.visual02 {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	height: auto;
	padding: 100px 0;
	position: relative;
	width: 100%
}
.visual02.lazyloaded {
	background-image: url("../images/template/welcome.webp")
}
.visual02 #patients {
	animation-delay: 0.1s;
	background: #fff;
	border-radius: 10px;
	margin: 0 auto;
	padding: 30px 50px;
	width: 1220px
}
.visual02 .content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 25px 0 0 0;
	padding: 0;
	width: 100%
}
.visual02 .box {
	float: right;
	margin: 0;
	width: 53%
}
.visual02 img {
	float: left;
	margin: 0
}
.visual02 .box p {
	padding: 0 0 0.5em 0
}
.visual02 .box p:first-child {
	padding: 0 0 1em 0
}
.visual02 .box ul {
	margin: 0 0 0.3em 0;
	padding: 0
}
.visual02 .box li {
	line-height: 1.6em;
	list-style: none;
	margin: 0;
	padding: 0 0 0.7em 0;
	white-space: nowrap
}
@media only screen and (max-width: 1250px) {
	.visual02 {
		background: #fff;
		padding: 0
	}
	.visual02.lazyloaded {
		background-image: none
	}
	.visual02 #patients {
		padding: 50px 0 45px 0;
		width: 94%
	}
	.visual02 .content {
		display: block
	}
	.visual02 img {
		float: none;
		margin: 0 auto;
		width: 100%
	}
	.visual02 .box {
		background: #fff;
		float: none;
		margin: 0;
		padding: 20px 0;
		width: 100%
	}
}

/*----------------------------------------- トップページ（NEWS & BLOG） -*/
#universal_article2 {
	background: linear-gradient(0deg, rgba(38, 171, 227, 0), rgba(236, 249, 253, 0.7), rgba(236, 249, 253, 1));

}
#newslist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	width: 100%
}
#newslist::after {
	content:"";
	display: block;
	width: 48%
}
#newslist a {
	background: #fff;
	border-radius: 5px;
	display: block;
	height: auto;
	margin: 0 0 28px 0;
	padding: 15px 15px 10px 15px;
	overflow: hidden;
	position: relative;
	text-align: left;
	transition: .5s;
	width: 49%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
#newslist a:hover {
	text-decoration: none
}
#newslist a::before,
#newslist a::after {
	content: "";
	display: block;
	left: 0;
	margin: auto;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 0.1)
}
#newslist a::before {
	background: rgba(76,181,232,.1);
	height: 100%;
	width: 100%
}
#newslist a::after {
	align-items: center;
	bottom: 0;
	color: #fff;
	content: "Read More";
	display: flex;
	font-size: 30px;
	font-weight: bold;
	justify-content: center;
	right: 0;
	text-align: center
}
#newslist a:hover::before,
#newslist a:hover::after {
	opacity: 1
}
#newslist .box:nth-of-type(n+3) {
	margin-top: 48px
}
#newslist .img {
	float: left;
	margin: 0;
	padding: 0 20px 0 0;
	width: 50%
}
#newslist .box p {
	margin: 0;
	padding: 0
}
#newslist .box span {
	color: #2cace3;
	display: block;
	font-weight: bold;
	margin-bottom: 5px
}
#newslist .box span::before {
	content: "\f017";
	font-family: "Font Awesome 6 Free";
	margin: 0 10px 0 0
}
@media only screen and (max-width: 736px) {
	#newslist a {
		margin: 0 0 18px 0;
		width: 100%
	}
}

/*---------------- トップページ（当店までの移動方法を選択してください） -*/
#map_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin:  0  0 -8px 0 !important;
	overflow: auto;
	padding: 0;
	width: 100%
}
#map_container .box {
	margin: 0 !important;
	padding: 0 !important;
}
.mapbox {
	position: relative;
	width: 100%
}
.mapbox .content {
	background: #fff;
	border: solid 1px #ccc;
	padding: 15px;
	position: absolute;
	height: 190px;
	left: 8px;
	top: 8px;
	width: 302px
}
#map_container .box {
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-align: left;
	width: 50%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2
}
#map_container .box h3 {
	background: #2cace3;
	color: #fff;
	font-size: 20px;
	line-height: 1.8em;
	margin: 0 0 10px 0;
	padding: 0;
	text-align: center
}
#map_container .box p {
	font-size: 15px;
	margin: 0 0 10px 0;
	padding: 0;
	text-align: center
}
#selectarea2,
#selectarea3 {
	animation-delay: 0.3s
}
#selectarea2 .selectbox,
#selectarea3 .selectbox {
	align-items: center;
	display: inline-flex;
	margin: 0 auto;
	position: relative
}
#selectarea2 .selectbox::after,
#selectarea3 .selectbox::after {
	background-color: #553533;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	height: 7px;
	pointer-events: none;
	position: absolute;
	right: 15px;
	width: 10px
}
#selectarea2 .selectbox select,
#selectarea3 .selectbox select {
	appearance: none;
	background: #fff;
	border: 1px solid #dbdbdb;
	border-radius: 20px;
	color: #616161;
	cursor: pointer;
	font-size: 1em;
	line-height: 40px;
	padding: 0 calc(.8em + 20px) 0 1.8em
}
#selectarea2 .selectbox select:focus,
#selectarea3 .selectbox select:focus {
	outline: none
}
#map {
	pointer-events: none
}
@media only screen and (max-width: 1250px) {
	#transportation_facilities {
		width: 100%
	}
	#map_navi {
		padding: 0 0 0 15%
	}
	#selectarea2 {
		padding: 0 15% 0 0
	}
}
@media only screen and (max-width: 736px) {
#map_container {
	display: block
}
#map_container .box {
	width: 100%
}
	#map_navi {
		align-items: center;
		display: -webkit-flex;
		display: -moz-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 0 15px 0;
		padding: 0
	}
	#selectarea2 {
		float: none;
		padding: 0;
		text-align: center;
		width: 100%
	}
}

/*-------------------------------------------------------- プラン＆料金 -*/
#plandetail {
	animation-name: fadeUpAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	background-color: rgba(255,255,255,1);
	background-blend-mode: overlay;
	opacity: 0;
	transition: 1s
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(25px)
	}
	to {
		opacity: 1;
		transform: translateY(0)
	}
}
#plandetail .content {
	clear: both;
	overflow: auto;
	padding: 50px 0
}
#plandetail .btn a {
	border: solid 1px #555;
	border-radius: 10px;
	clear: both;
	display: block;
	font-size: 22px;
	margin: 50px auto 0 auto;
	padding: 10px;
	text-align: center;
	transition: .3s;
	width: 280px
}
#plandetail .btn a:hover {
	background: #e78200;
	border: solid 1px #e78200;
	color: #fff;
	text-decoration: none
}
#sliderArea {
	float: left;
	width: 49%
}
.slick-slide {
	margin: 0 5px;
	opacity: .2;
	transition: all ease-in-out .3s
}
.slick-slide img {
	height: auto;
	width: 100%
}
.slick-active {
	opacity: 1
}
.slick-current {
	opacity: 1
}
.thumb {
	margin: 8px 0 0
}
.thumb .slick-slide {
	cursor: pointer
}
.thumb .slick-slide:hover {
	opacity: .7
}
#explanation,
#service_price {
	float: right;
	width: 49%
}
#service_price .price_other {
	margin:0 0 15px 0
}
#service_price .price_other p:first-child {
	border-bottom: solid 1px #333;
	font-weight: bold;
	padding: 0
}
#service_details dl {
	align-items: stretch;
	border-top: 1px solid #42b3e7;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-wrap: wrap;
	margin: 17px 0 25px 0;
	width: 100%
}
#service_details dt {
	background: #ecf9fd;
	border-bottom: 1px solid #42b3e7;
	padding: 5px 10px;
	width: 150px
}
#service_details dd {
	background: #fff;
	border-bottom: 1px solid #42b3e7;
	padding: 5px 10px;
	width: calc(100% - 150px)
}
#reservations_box {
	background: #fffbe8;
	margin: 0 0 35px 0;
	padding: 25px
}
#reservations_box p {
	font-size: 20px;
	padding: 0 0 15px 0;
	text-align: center
}
#reservations_box #price {
	font-size: 32px;
	font-weight: bold;
	margin: 0 0 15px 0
}
#reservations_box #price span {
	font-size: 22px;
	font-weight: normal;
	margin: 0 1em 0 0
}
#reservations_box #price span.junior {
	display: block;
	float: right;
	font-size: 15px;
	padding: 0 50px 0 0
}
#reservations_btn {
	background: #f7a83f;
	color: #fff;
	display: block;
	font-size: 20px;
	margin: 30px auto 0 auto;
	max-width: 260px;
	padding: 10px;
	text-align: center;
	transition: .3s;
	width: 100%
}
#reservations_btn:hover {
	background: #e78200;
	color: #fff;
	text-decoration: none
}
#other .content {
	height: auto;
	overflow: hidden;
	padding: 100px 0
}
#other #guide {
	display: flex;
	justify-content: space-between;
	margin: 0 0 50px 0
}
#other #guide a {
	margin: 0 1%;
	width: 23.5%
}
#other #guide a:first-of-type {
	margin: 0 1% 0 0
}
#other #guide a:last-of-type {
	margin: 0 0 0 1%
}
#other #guide a:hover {
	text-decoration: none
}
#other #guide .box img {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	border-radius: 5px;
	display: block;
	width: 100%
}
#other #guide .box p {
	color: #000;
	font-size: 16px;
	line-height: 1.4em;
	margin: 0;
	padding: 10px 5px;
	text-align: center;
	width: 100%
}
#other .btn a {
	border: solid 1px #555;
	border-radius: 10px;
	clear: both;
	display: block;
	font-size: 22px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	transition: .3s;
	width: 280px
}
#other .btn a:hover {
	background: #e78200;
	border: solid 1px #e78200;
	color: #fff;
	text-decoration: none
}
@media only screen and (max-width: 1250px) {
	#plandetail .content {
		padding: 30px 0
	}
	#service_details dt { 
		border-right: none;
		border-bottom: 0;
		width: 100%
	}
	#service_details dd {
		width: 100%
	}
	#service_price {
		clear: both;
		width: 100%
	}
	#reservations_box #price span.junior {
		float: none;
		margin: 0 auto;
		padding: 0
	}
	#reservations_btn {
		margin: 0 auto
	}
	#other #guide {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#other #guide a,
	#other #guide a:first-of-type,
	#other #guide a:last-of-type {
		margin: 0 0 3% 0;
		width: 48%
	}
	#other #guide .box p {
		text-align: left
	}
}
@media only screen and (max-width: 736px) {
	#sliderArea {
		float: none;
		margin: 0 auto;
		padding: 0;
		width: 100%
	}
	#explanation {
		float: none;
		width: 100%
	}
	#service_details dl {
		margin: 15px 0 35px 0
	}
	#reservations_box #price {
		font-size: 22px
	}
	#reservations_box #price span {
		font-size: 16px;
		margin: 0 0.5em 0 0
	}
}
@media only screen and (max-width: 375px) {
	#reservations_box p {
		font-size: 16px
	}
	#reservations_box #price {
		font-size: 16px
	}
	#reservations_box #price span {
		font-size: 14px
	}
	.service_list li {
		font-size: 13px;
		padding: 0 5px
	}
	#reservations_btn {
		font-size: 16px;
		padding: 5px;
		width: 100%
	}
	#other .btn a {
		border-radius: 5px;
		font-size: 16px;
		padding: 10px;
		width: 65%
	}
	#plandetail .btn a {
		border-radius: 5px;
		font-size: 16px;
		padding: 10px;
		width: 65%
	}
}

/*---------------------------------------------------------- プラン一覧 -*/
.plan_list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0 0 50px 0;
	overflow: auto;
	padding: 0;
	width: 100%
}
.plan_list h2 {
	text-align: center
}
.plan_list::after {
	content:"";
	display: block;
	width: 48%
}
.plan_list .box {
	border: solid 1px #ccc;
	border-radius: 5px;
	height: auto;
	overflow: hidden;
	padding: 20px;
	text-align: left;
	width: 48%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
.plan_list .box:nth-of-type(n+3) {
	margin-top: 48px
}
.plan_list .box h4 {
	border: none;
	font-size: 18px;
	height: 70px;
	line-height: 1.6em;
	margin: 0 0 10px 0;
	position: static;
	text-decoration: underline
}
.plan_list .price {
	color: #000;
	font-size: 21px;
	font-weight: bold;
	margin: 0 0 25px 0;
	text-align: center
}
.plan_list .price span {
	font-size: 15px;
	font-weight: normal
}
.plan_list .box p {
	margin: 0;
	padding: 0
}
.plan_img {
	position: relative;
	width: 40%
}
.plan_img p {
	background: #ff4d6e;
	top: 5px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	left: -5px;
	text-align: center;
	min-width: 100px
}
.plan_img img {
	aspect-ratio: 4 / 3;
	border-radius: 5px;
	display: block;
	float: left;
	margin: 0 0 15px 0;
	object-fit: cover;
	object-position: 0% 0%;
	vertical-align: top;
	width: 100%
}
.reservations_info {
	float: right;
	width: 55%
}
.plan_list .detail_btn {
	background: #f7a83f;
	border-radius: 5px;
	color: #fff;
	display: block;
	margin-top: 10px;
	padding: 5px 10px;
	text-align: center;
	width: 100%
}
.plan_list .detail_btn:hover {
	background: #e78200;
	color: #fff;
	text-decoration: none
}
.service_list {
	background: #eee;
	border-radius: 5px;
	clear: both;
	overflow: auto;
	padding: 0 10px 10px 0
}
.service_list ul {
	margin: 0;
	padding: 0
}
.service_list li {
	background: #fff;
	display: block;
	float: left;
	font-size: 14px;
	list-style: none;
	margin: 10px 0 0 10px;
	padding: 0;
	text-align: center;
	width: 23%
}
@media only screen and (max-width: 1250px) {
	.plan_list {
		display: block
	}
	.plan_list .box {
		margin: 0 0 20px 0;
		width: 100%
	}
	.plan_list .box:nth-of-type(n+3) {
		margin-top: 0
	}
	.plan_list .box h4 {
		margin: 0 0 15px 0
	}
}
@media only screen and (max-width: 736px) {
	.plan_img {
		width: 100%
	}
	.reservations_info {
		float: none;
		width: 100%
	}
	.plan_list .box h4 {
		font-size: 20px;
		height: auto
	}
	.plan_list .price {
		font-size: 20px
	}
	.plan_list .detail_btn {
		font-size: 20px;
		margin: 25px 0;
		padding: 10px
	}
	.service_list li {
		font-size: 13px;
		width: 46%
	}
	.service_list li:nth-of-type(even) {
		float: right;
		font-size: 13px;
		width: 46%
	}
}
@media only screen and (max-width: 375px) {
	.plan_list .box h4 {
		font-size: 16px
	}
	.plan_list .price {
		font-size: 16px
	}
	.plan_list .detail_btn {
		font-size: 16px;
		margin: 15px 0;
		padding: 5px
	}
}

/*-------------------------------------------------------- 予約フォーム -*/
#reservation-form {
	display: flex;
	height: auto;
	justify-content: space-between;
	margin: 0 0 50px 0;
	overflow: auto;
	padding: 0;
	width: 100%
}
#reservation-form .box {
	height: auto;
	overflow: hidden;
	margin: 0 50px 0 0;
	width: 35%
}
#reservation-form .box:nth-child(2) {
	margin: 0;
	width: 65%
}
#reservation-form #explanation {
	float: none;
	width: 100%
}
#reservation-form #reservations_box {
	background: #fffbe8;
	margin: 0 0 35px 0;
	padding: 15px 0 0 0
}
#reservation-form #reservations_box p {
	padding: 0 0 15px 0
}
#reservation-form .box #service_price {
	float: none;
	width: 100%
}
#reservation-form .box #price {
	font-size: 22px;
	font-weight: bold;
	margin: 0 0 15px 0
}
#reservation-form .box #price span {
	font-size: 16px;
	font-weight: normal;
	margin: 0 1em 0 0
}
#reservation-form .box #service_price .price_other {
	margin:0 0 15px 0
}
#reservation-form .box #service_price .price_other p:first-child {
	border-bottom: solid 1px #333;
	font-weight: bold;
	padding: 0
}
#reservation-form .box fieldset {
	background: #f5f5f5;
	border-radius: 5px;
	margin: 0 0 25px 0;
	padding: 50px
}
#reservation-form .box dd {
	margin: 0 0 15px 0
}
form {
	border-radius: 10px;
	padding: 0
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="textarea"] {
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 5px;
	width: 100%
}
textarea {
	height: 220px;
	width: 100%
}
input:focus,
textarea:focus,
.selectbox-3 select:focus {
	border-color: #007BFF;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	outline: none
}
legend {
	background: #42b3e7;
	border-radius: 5px 5px 0 0;
	color: #fff;
	margin: 0 0 0 -50px;
	padding: 5px 10px
}
.selectbox-3 {
	align-items: center;
	display: inline-flex;
	position: relative;
	width: 100%
}
.selectbox-3::after {
	position: absolute;
	right: 15px;
	width: 10px;
	height: 7px;
	background-color: #535353;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	pointer-events: none;
}
.selectbox-3 select {
	appearance: none;
	width: 100%;
	height: 2.8em;
	padding: .4em calc(.8em + 30px) .4em .8em;
	border: 1px solid #d0d0d0;
	border-radius: 5px;
	background-color: #fff;
	color: #333;
	font-size: 1em;
	cursor: pointer;
}
.flame {
	border-radius: 3px;
	border: solid 1px #ccc;
	height: 200px;
	margin: 0 auto;
	overflow: auto;
	padding: 10px;
	text-align: left;
	width: 100%
}
#mailform dt span {
	background:#f7e800;
	border-radius:5px;
	color:#000;
	font-size:14px;
	margin-left:15px;
	padding: 0 10px
}
.table {
	box-sizing: border-box;
	border-bottom: 1px solid #42b3e7;
	margin: 0 0 10px 0;
	padding: 0;
	width: 100%
}
.table li {
	background: #ecf9fd;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding:0
}
.table-1 {
	box-sizing: border-box;
	border-top: 1px solid #42b3e7;
	clear: both;
	float: left;
	margin: 0;
	padding: 10px;
	width: 130px
}
.table-2 {
	background: #fff;
	box-sizing: border-box;
	border-top: 1px solid #42b3e7;
	margin: 0;
	margin-left: 130px;
	padding: 10px
}
.spinnerarea {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0;
	overflow: auto;
	padding: 0;
	width: 100%
}
.spinner-container {
	display: flex;
	justify-content: space-between;
	height: auto;
	margin: 10px 0 10px 7%;
	overflow: hidden;
	user-select: none;
	width: 43%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none
}
.spinner-container:nth-of-type(n+1) {
	margin: 10px 0
}
.spinner {
	background: #fff;
	border: none;
	outline: none;
	padding: 0;
	pointer-events: none;
	text-align: center;
	width: 70px
}
.spinner::-webkit-inner-spin-button,
.spinner::-webkit-outer-spin-button {
	-webkit-appearance: none
}
.spinner-sub,
.spinner-add {
	background: #8b8b8b;
	border: 1px solid #ccc;
	border-radius: 10%;
	cursor: pointer;
	color: #fff;
	display: block;
	line-height: 35px;
	height: 35px;
	text-align: center;
	width: 35px
}
.spinner-sub:hover,
.spinner-add:hover {
	background: #f7a83f
}
.disabled {
	cursor: inherit;
	opacity: 0.4
}
.accordion-check {
	display: none
}
.accordion {
	border: 1px solid #ddd;
	margin-bottom: 10px;
	border-radius: 4px;
	overflow: hidden;
}
.accordion-label {
	background: #8b8b8b;
	display: flex;
	align-items: center;
	padding: 5px 20px;
	color: #fff;
	user-select: none;
	transition: background-color 0.3s ease;
	position: relative;
	padding-left: 40px;
}
.accordion-label:hover {
	background-color: #f7a83f
}
.accordion-check:checked + .accordion-label {
	background-color: #f7a83f;
	color: #fff;
}
.accordion-label::before {
	content: '▶';
	position: absolute;
	left: 15px;
	font-size: 12px;
	transition: transform 0.4s ease;
}
.accordion-check:checked + .accordion-label::before {
	transform: rotate(90deg);
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.accordion-check:checked + .accordion-label + .accordion-content {
	max-height: 450px
}
.accordion-body {
	padding: 15px 20px;
	background-color: #fafafa;
	border-top: 1px solid #ddd;
}
.accordion-body p {
	margin: 0;
	line-height: 1.6;
}
.accordion-body input[type="text"] {
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 5px;
	width: 80%
}
.accordion-body select {
	display: inline-flex;
	align-items: center;
	margin-bottom: 15px;
	position: relative;
}
.accordion-body select {
	appearance: none;
	min-width: 100px;
	height: 2.8em;
	padding: .4em calc(.8em + 30px) .4em .8em;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	background-color: #fff;
	color: #333333;
	font-size: 1em;
	cursor: pointer;
}
@media only screen and (max-width: 1250px) {
	#reservation-form {
		display: block
	}
	#reservation-form .box,
	#reservation-form .box:nth-child(2) {
		margin: 0;
		width: 100%
	}
	#reservation-form #imgArea {
		float: left;
		width: 49%
	}
	#reservation-form #explanation {
		float: right;
		width: 49%
	}
	.table {
		float: right;
		width: 49%
	}
	.spinner-container {
		margin: 10px 0 10px 2%;
		width: 48%;
	}
}
@media only screen and (max-width: 736px) {
	#reservation-form #imgArea,
	#reservation-form #explanation {
		float: none;
		width: 100%
	}
	#reservation-form .box:nth-child(2) {
		margin: 25px 0 0 0
	}
	#reservation-form .box fieldset {
		background: #f5f5f5;
		border-radius: 5px;
		margin: 0 0 25px 0;
		padding: 15px
	}
	legend {
		background: #42b3e7;
		border-radius: 5px 5px 0 0;
		color: #fff;
		margin: 0 0 0 -15px;
		padding: 5px 10px
	}
	.table {
		clear: both;
		float: none;
		width: 100%
	}
	.spinner-container {
		margin: 10px 0;
		width: 100%;
	}
	.spinner-container:nth-of-type(n+1) {
		margin: 10px 0
	}
	.accordion-label {
		padding: 7px 40px
	}
}

/*---------------------------------------------------------- プラン一覧 -*/
.plan_list2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0 0 50px 0;
	overflow: auto;
	padding: 0;
	width: 100%
}
.plan_list2 h2 {
	text-align: center
}
.plan_list2::after {
	content:"";
	display: block;
	width: 23%
}
.plan_list2 .box {
	border: solid 1px #ccc;
	border-radius: 5px;
	height: auto;
	overflow: hidden;
	padding: 20px 20px 10px 20px;
	text-align: left;
	width: 24%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
.plan_list2 .box:nth-of-type(n+5) {
	margin-top: 48px
}
.plan_list2 .plan_img {
	width: 100%
}
.plan_list2 .reservations_info {
	width: 100%
}
.plan_list2 .service_list {
	background: #fff;
	border-radius: 0;
	padding: 0
}
.plan_list2 .detail_btn {
	background: #f7a83f;
	border-radius: 5px;
	color: #fff;
	display: block;
	margin-top: 10px;
	padding: 0;
	text-align: center;
	width: 100%
}
.plan_list2 .service_list ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 15px 0 0 0;
	padding: 0
}
.plan_list2 .service_list li {
	border: solid 1px #888;
	border-radius: 3px;
	display: block;
	float: left;
	font-size: 11px;
	line-height: 2em;
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0 10px;
	text-align: center;
	width: 48.5%
}
.plan_list2 .box h4 {
	border: none;
	font-size: 15px;
	height: 60px;
	line-height: 1.6em;
	margin: 0;
	position: static
}
.plan_list2 .price {
	color: #000;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 15px 0;
	text-align: center
}
.plan_list2 .box .price span {
	font-size: 12px;
	font-weight: normal;
	margin: 0 0.5em 0 0
}
.plan_list2 .box p {
	margin: 0;
	padding: 0
}
@media only screen and (max-width: 1250px) {
	.plan_list2 {
		display: block
	}
	.plan_list2 .box {
		margin: 0 0 20px 0;
		width: 100%
	}
	.plan_list2 .box:nth-of-type(n+3) {
		margin-top: 0
	}
	.plan_list2 .box h4 {
		margin: 0 0 15px 0
	}
}
@media only screen and (max-width: 736px) {
	.plan_list2 .box h4 {
		font-size: 20px;
		height: auto
	}
	.plan_list2 .price {
		font-size: 20px
	}
	.plan_list2 .price span {
		font-size: 16px
	}
	.plan_list2 .detail_btn {
		padding: 8px 0
	}
}
@media only screen and (max-width: 375px) {
	.plan_list2 .box h4 {
		font-size: 16px
	}
	.plan_list2 .price {
		font-size: 16px
	}
	.plan_list2 .price span {
		font-size: 12px
	}
}

/*-------------------------------------------------------- よくある質問 -*/
#faq_list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0 0 50px 0;
	overflow: auto;
	padding: 0;
	width: 100%
}
#faq_list .box {
	height: auto;
	overflow: hidden;
	padding: 20px 0 10px 0;
	text-align: left;
	width: 47%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
#faq_list .box h3 {
	border-bottom: solid 1px #000;
	font-size: 27px
}
#faq_list .box li a{
	border-bottom: solid 1px #000;
	margin: 0 0 1em 0

}
#faq_list .box li a::after {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-size: 18px;
	font-weight: 600;
	padding: 0 0 0 10px
}
#faq .box h3 {
	border-bottom: solid 1px #000;
	font-size: 27px;
	margin: 0 0 10px 0
}
#faq .box .btn a {
	border: solid 1px #555;
	border-radius: 10px;
	clear: both;
	display: block;
	font-size: 22px;
	margin: 50px auto;
	padding: 10px;
	text-align: center;
	transition: .3s;
	width: 280px
}
#faq .box .btn a:hover {
	background: #e78200;
	border: solid 1px #e78200;
	color: #fff;
	text-decoration: none
}
@media only screen and (max-width: 1250px) {
	#faq_list {
		display: block
	}
	#faq_list .box {
		width: 100%
	}
	#faq_list .box h3,
	#faq .box h3 {
		font-size: 20px;
		line-height: 2em
	}
}

/*---------------------------------------------------------- お問い合せ -*/
#contact {
	background: #f5f5f5;
	margin: 50px 0;
	padding: 80px
}
#contact dd {
	margin: 0 0 15px 0
}

@media only screen and (max-width: 736px) {
	#contact {
		padding: 20px
	}
}

/*-------------------------------------------------------- ショップ紹介 -*/
#shop {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: space-between;
	margin: 0 0 50px 0;
	overflow: auto;
	padding: 0;
	width: 100%
}
.shop_l {
	height: auto;
	overflow: hidden;
	padding: 20px 0 10px 0;
	text-align: left;
	width: 66%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
.shop_r {
	height: auto;
	overflow: hidden;
	padding: 20px 0 10px 0;
	text-align: left;
	width: 30%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}
.shop_r img {
	border-radius: 0
}
.shop_l dl {
	align-items: stretch;
	border-top: 1px solid #42b3e7;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 25px 0;
	width: 100%
}
.shop_l dt {
	background: #ecf9fd;
	border-bottom: 1px solid #42b3e7;
	padding: 5px 10px;
	width: 150px
}
.shop_l dd {
	background: #fff;
	border-bottom: 1px solid #42b3e7;
	padding: 5px 10px;
	width: calc(100% - 150px)
}
@media only screen and (max-width: 736px) {
	.shop_l,
	.shop_r {
		padding: 20px 0 10px 0;
		width: 100%
	}
	.shop_l dt {
		width: 110px
	}
	.shop_l dd {
		width: calc(100% - 110px)
	}
}