@charset "UTF-8";


/* reset ---------------------------------------*/

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q::before,q::after{content:'';}
abbr{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font-size:inherit;font-family:inherit;box-sizing: border-box;}
pre,code,kbd,samp{font-family:monospace;font-size:108%;line-height:100%;}
figure{padding:0;margin:0;}
input[type="submit"],
input[type="button"],
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,
button::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,
input[type="button"]::focus,
button::focus {outline-offset: -2px;}


/* base ---------------------------------------*/
/* フォントサイズカスタム調整 */
:root {--base: max(calc(390 / 700 * 100dvh / 390), 1px);}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 400;
	font-feature-settings: "palt" 1;
	-webkit-font-feature-settings: "palt" 1;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--text);
	background: var(--bg);
}

a, button {
	text-decoration: none;
	color:inherit;
	transition: all 0.25s ease;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

a:hover{opacity: 0.7;}

img{
	vertical-align: bottom;
	line-height: 1;
	max-width:100%;
	height:auto;
}


/* common item ---------------------------------------*/

.clearfix::after,
.inner::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.ov-h{overflow: hidden;}
.font-en {font-family: var(--font-en);}
.fc-accent {color: var(--accent);}

.wrapper {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100dvh;
	background: url('../img/common/bg.png') no-repeat;
	background-size: contain;
	background-position: 0 0;
	overflow: hidden;
}

.inner {
	max-width: calc(330 * var(--base));
	width: 100%;
	margin: 0 auto 0 calc(35 * var(--base));
}


/* swipecontainer ---------------------------------------*/
.swipecontainer { 
	position: relative;
	max-width: max(calc(390 / 700 * 100dvh), 390px);
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.swipecontainer-slider { 
	width: 100%;
	height: 100%;
}

.swipecontainer-slider-list > li {
	width: 100%;
	height: 100%;
}

.swipecontainer-slider-list > li > section {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.swiper-slide {
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	visibility: visible;
}

.swiper-slide.slide-hidden {
	visibility: hidden;
}


/* swiper-pagination ---------------------------------------*/
.swiper-pagination {

}

.swiper-pagination .swiper-pagination-bullet{
	margin: calc(10 * var(--base)) auto!important;
	width: calc(8 * var(--base));
	height: calc(8 * var(--base));
	background: var(--pagination);
	border-radius: calc(8 * var(--base));
	opacity: 1;
	transition: all 0.3s ease;
}

.swiper-pagination .swiper-pagination-bullet-active {
	background: var(--accent);
	width: calc(4 * var(--base));
	height: calc(16 * var(--base));
}


/* swipefixedlogo ---------------------------------------*/
.swipefixedlogo { 
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
	max-width: max(calc(390 / 700 * 100dvh), 390px);
	width: 100%;
}

.swipefixedlogo > a {
	position: absolute;
	top: calc(16 * var(--base));
	left: calc(16 * var(--base));
	display: block;
	width: calc(120 * var(--base));
}

.swipefixedlogo > a img {
	width: 100%;
}


/* swipefixedcontact ---------------------------------------*/
.swipefixedcontact { 
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
	max-width: max(calc(390 / 700 * 100dvh), 390px);
	width: 100%;
}

.swipefixedcontact > a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: calc(2 * var(--base));
	position: absolute;
	top: calc(12 * var(--base));
	right: calc(12 * var(--base));
	width: calc(58 * var(--base));
	height: calc(58 * var(--base));
	background: var(--bg-fixedcontact);
	border-radius: calc(60 * var(--base)) 0 calc(60 * var(--base)) calc(60 * var(--base));
}

.swipefixedcontact > a img {
	width: calc(18 * var(--base));
}

.swipefixedcontact > a span {
	font-size: calc(12 * var(--base));
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 0 calc(18 * var(--base)) var(--shadow);
}


/* swipefixedbtn ---------------------------------------*/
.swipefixedbtn {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
}

.swipefixedbtn-tab {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
	width: max(calc(390 / 700 * 100dvh), 390px);
	height: min(calc(40 / 390 * 100vw), 40px);
	transition: all 0.25s ease;
	cursor: pointer;
}

.swipefixedbtn.is-open .swipefixedbtn-tab {
	bottom: max(calc(-36 / 390 * 100vw), -36px);
}

.swipefixedbtn-tab::before {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	background: var(--accent);
	clip-path: polygon(0 min(calc(22 / 390 * 100vw), 22px), calc(50% - 36px) min(calc(22 / 390 * 100vw), 22px), calc(50% - 26px) min(calc(10 / 390 * 100vw), 10px), calc(50% + 26px) min(calc(10 / 390 * 100vw), 10px), calc(50% + 36px) min(calc(22 / 390 * 100vw), 22px), 100% min(calc(22 / 390 * 100vw), 22px), 100% 100%, 0 100%);
	content: '';
}

.swipefixedbtn-tab::after {
	position: absolute;
	top: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 13px;
	height: 7px;
	background: #fff;
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
	content: '';
	animation: move-up 1.5s ease-out infinite;
}

@keyframes move-up {
	0% {
		opacity: 0;
		transform: translate(-50%, 3px);
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -3px);
	}
}

.swipefixedbtn-tab-line::before,
.swipefixedbtn-tab-line::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 30px;
	height: 1px;
	background: #fff;
	content: '';
}

.swipefixedbtn-tab-line::before {top: 14px;}
.swipefixedbtn-tab-line::after {top: 18px;}

.swipefixedbtn-list { 
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(20 / 390 * 100%);
	position: absolute;
	bottom: max(calc(-90 / 390 * 100vw), -90px);
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
	width: max(calc(390 / 700 * 100dvh * 358 / 390), 358px);
	height: min(calc(80 / 390 * 100vw), 80px);
	background: var(--bg-fixedbtn);
	border: var(--border-fixedbtn);
	border-radius: min(calc(24 / 390 * 100vw), 24px);
	transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	backdrop-filter: saturate(130%) blur(6px);
	-webkit-backdrop-filter: saturate(130%) blur(6px);
}

.swipefixedbtn.is-open .swipefixedbtn-list { 
	bottom: 10px;
}

.swipefixedbtn-list > li { 
	width: min(calc(54 / 390 * 100%), 54px);

}


/* swipefixedtab ---------------------------------------*/
.swipefixedtab {
	position: absolute;
	top: calc(55 * var(--base));
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
	max-width: max(calc(390 / 700 * 100dvh), 390px);
	width: 100%;
	z-index: 10;
}

.swipefixedtab-list {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate3d(-110%, 0, 0);
	transition: all 0.25s ease;
}

.swipefixedtab.is-open .swipefixedtab-list {
	transform: translate3d(0, 0, 0);
}

.swipefixedtab-list > li {
	display: flex;
	flex-direction: column;
	padding: calc(10 * var(--base)) calc(3 * var(--base)) calc(10 * var(--base)) 0;
	width: fit-content;
	min-height: calc(134 * var(--base));
	background: rgba(255, 255, 255, 0.78);
	border-radius: 0 calc(6 * var(--base)) calc(6 * var(--base)) 0;
	border: calc(1 * var(--base)) solid rgba(64, 81, 59, 0.22);
	border-left: none;
	transition: all 0.25s ease;
	cursor: pointer;
}

.swipefixedtab-list > li.is-active {
	border-color: var(--accent);
	padding: calc(10 * var(--base)) calc(3 * var(--base)) calc(10 * var(--base)) calc(5 * var(--base));
	background:rgba(255, 255, 255, 0.86);
}

.swipefixedtab-list > li b,
.swipefixedtab-list > li strong {
	display: block;
	margin-left: calc(-3 * var(--base));
	width: fit-content;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.035em;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	text-orientation: sideways;
	color: rgba(64, 81, 59, 0.45);
	transition: all 0.25s ease;
}

.swipefixedtab-list > li b {
	font-size: calc(17 * var(--base));
	height: calc(28 * var(--base));
}

.swipefixedtab-list > li strong {
	flex: 1;
	font-size: calc(22 * var(--base));
	text-align: center;
}

.swipefixedtab-list > li.is-active b,
.swipefixedtab-list > li.is-active strong {
	color: var(--accent);
}


/* animation ---------------------------------------*/
.animation {
	transition: all 1.2s ease 0.5s;
	transform:translate(0, calc(20 * var(--base)));
	opacity:0;
}

.animation-delay-01 {transition-delay: 1s!important;}
.animation-delay-02 {transition-delay: 1.2s!important;}
.animation-delay-03 {transition-delay: 1.4s!important;}
.animation-delay-04 {transition-delay: 1.6s!important;}

.animation.animation-first {
	transition-delay: 0.8s;
}

.animation-first-delay-01 {transition-delay: 1.3s!important;}
.animation-first-delay-02 {transition-delay: 1.6s!important;}

.swiper-slide.on .animation {
	transform:translate(0, 0);
	opacity:1;
}

.animation.animation-split {
	width: fit-content;
	transform:translate(0, 0);
	opacity:1;
	overflow: hidden;
}

.animation.animation-split .split-left,
.animation.animation-split .split-right {
	display: inline-block;
	transition: all 1.5s ease 0.5s;
}
.animation.animation-first.animation-split .split-left,
.animation.animation-first.animation-split .split-right {
	transition-delay: 0.8s;
}

.animation.animation-split .split-left {transform: translate(100%, 0);}
.animation.animation-split .split-left.split-middle {transform: translate(120%, 0);}
.animation.animation-split .split-left.split-large {transform: translate(150%, 0);}
.animation.animation-split .split-right {transform: translate(-100%, 0);}
.animation.animation-split .split-right.split-middle {transform: translate(-120%, 0);}
.animation.animation-split .split-right.split-large {transform: translate(-150%, 0);}
.swiper-slide.on .animation.animation-split .split-left,
.swiper-slide.on .animation.animation-split .split-right {
	transform: translate(0, 0);
}

.animation.animation-left {transform:translate(calc(50 * var(--base)),0);}
.animation.animation-right {transform:translate(calc(-50 * var(--base)),0);}
.swiper-slide.on .animation.animation-left,
.swiper-slide.on .animation.animation-right {transform:translate(0, 0);}

.animation.animation-marker {
	background-size: 0 calc(6 * var(--base));
	transform:translate(0);
	opacity:1;
}

.swiper-slide.on .animation.animation-marker {
	background-size: 100% calc(6 * var(--base));
	transition: all .8s ease;
}

.animation-float {
	animation: floating 2.2s infinite alternate ease-in-out;
}

@keyframes floating {
	0% {transform: translate(0, 8%);}
	100% {transform: translate(0, -8%);}
}


/* animation done */
.swiper-slide.on.done .animation,
.swiper-slide.on.done .animation.animation-split .split-left,
.swiper-slide.on.done .animation.animation-split .split-right,
.swiper-slide.on.done .animation.animation-left,
.swiper-slide.on.done .animation.animation-right {
	transform: translate(0, 0) !important;
	opacity: 1 !important;
	transition: none !important;
}

.swiper-slide.on.done .animation.animation-marker {
	background-size: 100% calc(6 * var(--base));
	transition: none !important;
}

.animation-gradation {
	width: fit-content;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* icon ---------------------------------------*/
.icon-mail {
	display: inline-block;
	width: calc(36 * var(--base));
	height: calc(25 * var(--base));
	mask: url('../img/common/icon_mail_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_mail_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-line {
	display: inline-block;
	width: calc(36 * var(--base));
	height: calc(34 * var(--base));
	mask: url('../img/common/icon_line_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_line_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-facebook {
	display: inline-block;
	width: calc(15 * var(--base));
	height: calc(32 * var(--base));
	mask: url('../img/common/icon_facebook_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_facebook_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-instagram {
	display: inline-block;
	width: calc(32 * var(--base));
	height: calc(32 * var(--base));
	mask: url('../img/common/icon_instagram_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_instagram_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-calendar {
	display: inline-block;
	width: calc(32 * var(--base));
	height: calc(33 * var(--base));
	mask: url('../img/common/icon_calendar_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_calendar_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-youtube {
	display: inline-block;
	width: calc(32 * var(--base));
	height: calc(23 * var(--base));
	mask: url('../img/common/icon_youtube_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_youtube_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-other {
	display: inline-block;
	width: calc(32 * var(--base));
	height: calc(32 * var(--base));
	mask: url('../img/common/icon_other_white.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_other_white.svg') no-repeat center center / 100%;
	background: #fff;
}

.icon-arrow-right {
	display: inline-block;
	width: calc(22 * var(--base));
	height: calc(7 * var(--base));
	mask: url('../img/common/icon_arrow_right.svg') no-repeat center center / 100%;
	-webkit-mask: url('../img/common/icon_arrow_right.svg') no-repeat center center / 100%;
	background: #fff;
}


.icon-triangle {
	display: inline-block;
	margin: 0 0 calc(4 * var(--base)) calc(12 * var(--base));
	transform: translateY(-50%);
	z-index: 1;
	width: calc(12 * var(--base));
	height: calc(8 * var(--base));
	background: var(--text);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	content: '';
	animation: contact-move-down 1.5s ease-out infinite;
}


/* recaptcha ---------------------------------------*/
.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-note {
	margin-top: calc(16 * var(--base));
	padding-bottom: calc(10 * var(--base));
	font-size: calc(10 * var(--base));
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-align: center;
	color: rgba(64, 81, 59, 0.45);
}

.recaptcha-note a {
	color: var(--accent);
	text-decoration: none;
}

.recaptcha-note a:hover {
	opacity: 1;
	text-decoration: underline;
}



/* sp only */
@media screen and (max-width: 767px) and (max-aspect-ratio: 390 / 650){
	:root {--base: min(calc(100vw / 390), calc(500px / 390));}

	.swipecontainer { 
		max-width: 500px;
	}

	.swipefixedlogo { 
		max-width: 500px;
	}

	.swipefixedbtn-tab {
		width: min(100vw, 500px);
	}

	.swipefixedtab {
		max-width: 500px;
	}

	.swipefixedbtn-list { 
		width: min(calc(468 / 500 * 100vw), 468px);
	}
}