@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
@font-face {
  font-family: "tng";
  src: url("font/tsng.eot?") format('eot'),
       url("font/tsng.woff2") format('woff2'),
       url("font/tsng.woff") format('woff');
}
html{
	font-size:clamp(1rem, 0.893rem + 0.536vw, 1.375rem);
}
body{
	font-family: 'Noto Sans JP', sans-serif;
}
.top{
	opacity: 0;
	animation: fadeIn .5s linear 1 forwards;
}
#header{
	width:100%;
	display: -webkit-box;
	display: flex;
	 position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
	justify-content: space-between;
	padding:20px 30px;
}
@media screen and (min-width:1441px){
	#header{
		width:1440px;
		left:50%;
		transform: translateX(-50%);
	}
}
#logo{
	width:300px;
}
@media screen and (min-width:600px) and (max-width:1331px){
	#logo{
		width:25%;
	}
}
@media screen and (max-width:599px){
	#logo{
		width:30%;
	}
	#header{
	padding:10px;	
	}
}
#nav li a {
  display: block;
  color: #0080B1;
  position: relative;
	font-family: "tng";
	font-size:1rem
}

.blueFilter{
	filter: invert(43%) sepia(69%) saturate(6441%) hue-rotate(176deg) brightness(91%) contrast(101%);
}

#nav .menu-item-has-children > a:after,#nav .menu-item-has-children > a:before {
  display: block;
  content: "";
  position: absolute;
  top: 0; 
  right: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 10px;
  height: 1px;
  background: #fff;
  transition: .2s;
}
#nav .menu-item-has-children > a:after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
#nav .menu-item-has-children > a.open:before{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#nav .menu-item-has-children > a.open:after{
  background: transparent;
}
#nav .menu-item-has-children .sub-menu {
  display: none;
}
@media only screen and ( max-width : 899px ) {
  .overlay {
    width: 0;
    height: 0;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
    background: rgba(255,255,255,.7);
  }
  .overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #main {
    transition: all .5s;
    min-height: 100vh;
  }
  #main.open {
    position: fixed;
    width: 100%;
  }
  #menu_btn {
    top: 0px;
    right: 0px;
    transition: .3s;
    cursor: pointer;
    position: fixed;
    z-index: 9999;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
	  background:#0080B1;
  }
  .menu-trigger {
    width: 30px;
    height: 24px;
    position: relative;
  }
  .menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    transition: all .5s;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    width: 70%;
    top: 11px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(1) {
    transform: translateY(11px) rotate(-45deg);
  }
  #menu_btn.active .menu-trigger span:nth-of-type(2) {
    opacity: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(3) {
    transform: translateY(-11px) rotate(45deg);
  }
  #nav {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 90px 10%;
    background: #0080B1;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12;
    transform: translate(100%);
    transition: all .5s;
	  opacity: 0;
	 animation: fadeIn .5s linear 1 forwards;
  }
  #nav.open {
    transform: translateZ(0);
  }
	#nav h2{
		width:35%;
	}
  #nav li {
    padding: 0 20px;
	  text-align: center;
  }
  #nav li a {
    position: relative;
	  display: inline-block;
    padding: 20px 5px 5px;
    color: #fff;
	  border-bottom:solid 2px #fff;
	  font-size:1.2rem
  }
	#nav li:last-child a{
	background:#fff;
	color:#0080B1;
		display: block;
		padding: 1em 5px 0.8em;
		margin-top:40px;
	}
  #nav .menu-item-has-children .sub-menu {
    padding: 20px;
  }
  #nav .menu-item-has-children > a:first-of-type {
    position: relative;
    padding-right: 2em;
  }
  #nav .menu-item-has-children > a.open:first-of-type {
    color: #dad4ec;
  }
  #nav .menu-item-has-children .sub-menu li {
    padding: 0;
    margin-bottom: 20px;
  }
  #nav .menu-item-has-children .sub-menu li:last-child {
    margin-bottom: 0;
  }
  #nav .menu-item-has-children .sub-menu li a {
    padding: 0;
  }
}

@media print, screen and ( min-width : 900px ) {
  #menu_btn,.overlay {
    display: none;
  }
  #nav ul {
    display: flex;
    flex-wrap: wrap;
  }
  #nav li {
    position: relative;
  }
  #nav li a {
    padding: 15px;
  }
	#nav li:last-child a{
	background:#0080B1;
	color:#fff;
	padding:15px 60px;
	margin-left:40px;
}
  #nav .menu-item-has-children > a {
    padding-right: 40px;
  }
 
  #nav li ul.sub-menu {
    flex-direction: column;
    background: #fff;
    position: absolute;
    width: 200px;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 10px 0;
  }
  #nav li ul.sub-menu li {
    width: 100%;
  }
  #nav li ul.sub-menu li a {
    line-height: 1.6em;
    color: #83759a;
    padding: 10px 20px;
  }
  #nav li ul.sub-menu li a:hover {
    color: #dad4ec;
  }
}

.container{
	width:100%;
	position:relative;
	margin:0;
}
@media screen and (min-width:1441px){
	.container{
	width:1440px;
		margin:0 auto;
	}
}
.fv{
	display: -webkit-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position:relative;
}
@media screen and (min-width:600px){
.fv{
	aspect-ratio:1/0.655;
	background:url("img/webp/fvbg.webp") no-repeat center center / contain;
	padding:0 3%;
}
	.scroll{
		display: none;
	}
	}
.filter{
	filter: invert(34%) sepia(72%) saturate(1993%) hue-rotate(172deg) brightness(85%) contrast(101%);
}
.bl{
	mix-blend-mode: multiply;
}
.mysauna{
	width:10%;
	position:absolute;
	right:3%;
	bottom:3%;
}
@media screen and (max-width:599px){
	.fv{
		width:100%;
		height: 100svh;
		background:url("img/webp/fvbg.webp") no-repeat right 30% center / cover;
		padding:0 10%;
	}
	.mysauna{
		display: none;
	}
	.scroll{
		color:#fff;
		position:absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
		height:18vh;
		text-align: center;
	}
	.scroll span{
		width:2px;
		height:12vh;
		background:#fff;
		display: inline-block;
		bottom:0;
		position:absolute;
		animation: shinshuku 2s cubic-bezier(.02,.36,1,.31) infinite;
	}
}
@keyframes shinshuku{
	0%{
		transform:scale(1,1);transform-origin: bottom;
	}
	20%{
		transform:scale(1,1);transform-origin: bottom;
	}
	40%{
		transform: scale(1,0); transform-origin: bottom;
	}
	80%{
		transform: scale(1,0); transform-origin: top;
	}
	100%{
		transform: scale(1,1); transform-origin: top;
	}
}
.fadeIn{
	opacity: 0;
	animation: fadeIn 0.7s cubic-bezier(.54,.35,.72,.89) 1s 1 forwards;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


.btn1{
	text-align: center;
	font-size:0.85rem
}
.btn1 a{
	width:29%;
	background:#AB000A;
	color:#fff;
	font-weight: bold;
	aspect-ratio:1/0.22;
	display: -webkit-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:100px;
	position:relative;
	border:solid 2px #AB000A;
}
.btn1 a::after{
	content:'\f061';
	 font-family: 'Font Awesome 5 Free';
  font-weight: 900;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	right:18%;
}
.btn1 a:hover{
	background:#fff;
	color: #AB000A;
}

.sec1 .btn1 a{
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:5%;
}



@media screen and (max-width:599px){
	.sec1 {
		padding-bottom:10vw
	}
	.btn1{
	font-size:1.1rem
}
	.sec1 .btn1 a{
	position:relative;
	left:50%;
	transform: translateX(-50%);
	width:90%;
}
}

.mainTitle{
	 font-family: "tng";
	color:#00719D;
	text-align: center;
	font-size:3.8rem;
}

.movieBlock{
	padding:40px 0;
	position:relative;
	width:100%;
}
.movieBlock video{
	width:80%;
	margin:0 auto;
	display: block;
}
.movieBlock::before{
	content:'';
	display: block;
	width:100vw;
	background:#0080B1;
	aspect-ratio:1/0.185;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
	z-index: -1;
}
.promotion{
	width:28%;
	margin:0 auto;
}
#sec3{
	padding:80px 0;
}
.inout{
	position:relative;
}
.inout .btn1 a{
	position:absolute;
	bottom:0;
	right:5%;
}


@media screen and (max-width:599px){
	.movie{
		padding:0;
		background:#0080B1;
	}
	.movieBlock{
	padding:0;
	}
	.movieBlock video{
	width:100%;
	}
	.inout .btn1 a{
	position:relative;
	left:50%;
	transform: translateX(-50%);
	width:90%;
}
	#sec3{
	padding:10vw 0;
}
}
.boom{
	clip-path: inset(0 100% 0 0);
	transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
	margin-bottom:60px;
}
@media screen and (max-width:599px){
	.boom{
	clip-path: inset(0 100% 100% 0);
		margin-bottom:10vw;
	}
	.boom img{
		width:90%;
		margin:0 auto
	}
}
.boom.is-animated {
  clip-path: inset(0);
}

.qa{
	aspect-ratio:1/0.356;
	background:url("img/webp/qabg.webp") no-repeat center center / contain;
	padding:90px 0;
	text-align: center;
	color:#fff;
	position:relative;
}
.qanda{
	width:18%;
	margin:0 auto 40px;
}
.qa p.ask{
	font-family: "tng";
	font-size:1.4rem;
}
.qa .btn1 a{
	margin: 40px auto 0;
}
@media screen and (max-width:599px){
	.qa{
	aspect-ratio:1/0.907;
		background:url("img/webp/qabg.webp") no-repeat center center / cover;
		padding:12vw 0;
	}
	.qanda{
	width:40%;
	margin:0 auto 8vw;
}
	.qa .btn1 a{
	width:90%;
}
}
.footer{
	padding:30px;
}
@media screen and (min-width:900px){
.footLogo{
	width:370px;
}
}
@media screen and (min-width:600px) and (max-width:899px){
	.footLogo{
	width:20%;
}
}

@media screen and (min-width:600px){
	.footNav li a{
	color:#0080b1;
	display: inline-block;
	font-size:0.8rem;
	padding:0 2em;
	line-height: 1;
}
	.footNav li:first-child a,.footNav li:nth-child(2) a,.footNav li:nth-child(3) a{
	border-right:solid 1px #0080b1;
}
	.footNav li:last-child a{
	background:#0080b1;
	color:#fff;
	font-family: "tng";
	padding:0.9em 2em;
}
}
@media screen and (max-width:599px){
	.footLogo{
	width:60%;
		margin:0 auto 10vw;
}
	.footNav li{
		text-align: center;
		width:100%;
	}
	.footNav li a{
		font-family: "tng";
		border-bottom:solid 1px #0080b1;
		color:#0080b1;
		font-size:1.3rem;
		padding:1em 0.1em 0.2em;
		display: inline-block;
	}
	.footNav li:last-child a{
		width:80%;
		margin:10vw auto 0;
		background:#0080b1;
	color:#fff;
		padding:1em;
	}
}

.copyright{
	text-align: center;
	color:#0080b1;
	font-size:0.8rem;
	padding:1em 0;
}
@media screen and (min-width:600px){
.hero{
	position:relative;
	aspect-ratio:1/0.55;
	margin-top:105px;
	display: -webkit-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
}

.hero h1{
	width:80%;
	opacity: 0;
	animation: fadeIn 0.7s cubic-bezier(.54,.35,.72,.89) .5s 1 forwards;
	text-align: center;
}
.life{
	background:url("img/webp/lifetop.webp") no-repeat center center / cover;
}
.product{
	background:url("img/webp/producttop.webp") no-repeat center center / cover;
}
.qa{
	background: url("img/webp/faq.webp") no-repeat center center /cover;
}
.pp{
	background: url("img/webp/pp-top.webp") no-repeat center center /cover;
}
.contact{
	background: url("img/webp/contact-top.webp") no-repeat center center /cover;
}
.buy{
	background: url("img/webp/buytop.webp") no-repeat center center /cover;
}


@media screen and (max-width:599px){
	.hero{
		width:100%;
		margin-top:0;
		height:100svh;
		position:relative;
		display: -webkit-box;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.life{
	background:url("img/webp/lifetop.webp") no-repeat center center / cover;
}
	.product{
	background:url("img/webp/producttop-sp.webp") no-repeat center center / cover;
}
	.contact{
	background: url("img/webp/contact-top.webp") no-repeat left center /cover;
}
	.buy{
	background: url("img/webp/buy-sp.webp") no-repeat center center /cover;
}
	.hero h1{
		color:#fff;
		font-family: "tng";
		font-size:3.2rem;
		letter-spacing: 0.05em;
	}
}

.arista{
	width:65%;
	margin:80px auto;
}
@media screen and (min-width:600px){
.productLead{
	position:relative;
	aspect-ratio:1/0.426;
	background:url("img/webp/productslead.webp") no-repeat center center / contain;
	margin-bottom:90px;
}

.productLead .btn1 a{
	position:absolute;
	bottom:1%;
	right:3%;
}
	}
@media screen and (max-width:599px){

	.productLead .btn1 a{
		width:90%;
		margin:0 auto 10vw;
	}
}
.galleryTitle{
	width:25%;
	margin:0 auto 30px;
}
.thumbnail{
	width:60%;
	margin:20px auto;
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
}
.thumbnail li{
	width:80%!important;
	margin:0 auto!important;
}
.thumbnail-img{
	opacity: 0.3;
  transition: opacity .3s linear;
	aspect-ratio:1;
}
.slick-current .thumbnail-img {
  opacity: 1!important;
	
}
.thumbnail-img img{
	width:100%;
	height:100%;
	object-fit: cover;
}

@media screen and (max-width:599px){
	.galleryTitle{
	width:70%;
	}
	.thumbnail{
	width:100%;
	}
}
@media screen and (min-width:600px){
.lifelead{
	aspect-ratio:1/0.612;
	background:url("img/webp/lifelead.webp") no-repeat center center / contain;
	position:relative;
}
	.lifelead .btn1 a{
	position:absolute;
	right:5%;
	bottom:16%;
}
}


@media screen and (max-width:599px){
	.lifelead .btn1 a{
	width:90%;
	margin:0 auto 12vw;
}
}


.loading{
	width:100%;
	height:100vh;
	background:url("img/webp/loading-bg.webp") no-repeat center center/ cover;
	display: -webkit-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position:fixed;
	top:0;
	left:0;
	z-index: 100;
	animation:fadeOut 2s linear 6s forwards;
}
@media screen and (max-width:599px){
	.loading{
		width:100%;
		height:100svh;
		background:url("img/webp/loading-sp.webp") no-repeat center center / cover;
	}
}
.lt{
	width:70%;
	animation: fadeInBlur 3s linear forwards,fadeOut 2s linear 5s forwards;
	
}
@keyframes fadeInBlur{
	0%{
		filter:blur(100px);
	}
	1000%{
		filter:blur(0);
	}
}
@keyframes fadeOut{
	0%{
		opacity: 1;
		z-index: 100;
	}
	100%{
		opacity: 0;
		z-index: -1;
	}
}

.privacyBox{
	width:90%;
	margin:0 auto;
	padding:80px 0;
	color:#0080b1;
}
.privacyBox h2{
	font-size:1.3rem;
	margin-bottom:1em;
}
.privacyBox p{
	margin-bottom:1.5em;
}
.privacyBox ul{
	margin-left:1.5em;
	margin-bottom:1.5em;
	
}
.privacyBox ul li{
	list-style-type: disc;
}
.privacyBox p a{
	color:#0080b1;
	text-decoration: underline;
}
@media screen and (max-width:599px){
	.privacyBox h2{
	font-size:1.1rem;
	}
}

.contactBox{
	width:90%;
	margin:0 auto;
	padding:80px 0;
}
.contactBox h2{
	font-family: "tng";
		color:#0080b1;
	font-size:4.5rem;
	text-align: center;
}

.formList{
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	color:#0080b1;
	font-weight: 500;
	margin:80px 0;
}
.formList dt{
	width:30%;
}
.formList dt span{
	font-size:0.8rem;
	padding:0.1em 0.4em;
	background:#f621c6;
	color:#fff;
	margin-left:1em;
}
.formList dd{
	width:70%;
	margin-bottom:30px;
}
.formList dd input[type="checkbox"] {
       display: none; 
    } 
.checkLabel{
	width:50%;
	position:relative;
	padding-left:30px;
	transition: .3s;
}
.checkLabel:hover{
	cursor: pointer;
}
.checkLabel::after{
	content:'';
	display: inline-block;
	width:20px;
	aspect-ratio:1;
	border:solid 1px #0080b1;
	position:absolute;
	left:0;
	top:7px;
}
.checkLabel::before{
	content:'';
	display: inline-block;
	width:20px;
	aspect-ratio:1;
	background:#f621c6;
	position:absolute;
	left:1px;
	top:8px;
	opacity: 0;
}
.formList dd input[type="checkbox"]:checked + .checkLabel::before {
	opacity: 1;
}

.formList dd input[type="text"],.formList dd input[type="tel"],.formList dd input[type="email"]{
	-webkit-appearance:none;
	width:100%;
	border:solid 1px #0080b1;
	font-size:1.2rem;
	padding:0.6em;
	color:#0080b1;
}
.formList dt:last-of-type{
	width:100%;
	margin-bottom:30px;
}
.formList dd:last-of-type{
	width:100%;
}
.formList dd textarea{
	-webkit-appearance:none;
	width:100%;
	border:solid 1px #0080b1;
	font-size:1.2rem;
	padding:0.6em;
	color:#0080b1;
}
.confirm{
	text-align: center;
}
.confirm input[type="checkbox"]{
	transform: scale(2,2)
}
.confirm a{
	text-decoration: underline;
}
.sendBox{
	text-align: center;
	padding:60px 0 0;
}
.sendBox input[type="submit"]{
	-webkit-appearance:none;
	background:#0080b1;
	width:60%;
	font-size:1.3rem;
	font-weight: bold;
	color:#fff;
	border:none;
	padding:1em 0;
	display: inline-block;
}

@media screen and (max-width:599px){
	.formList{
		margin:10vw 0 0;
	}
	.formList dt{
	width:100%;
		margin-bottom:2vw;
}
	.formList dd{
	width:100%;
}
	.checkLabel{
	width:100%;
	position:relative;
	padding-left:30px;
		margin-bottom:8vw;
	transition: .3s;
}
	.checkLabel::after{
		top:0;
	}
	.checkLabel::before{
		top:1px;
	}
	.formList dt:last-of-type{
	margin-bottom:2vw;
}
	.sendBox input[type="submit"]{
		width:100%;
	}
}
.telcontact{
	width:90%;
	margin:0 auto;
	padding:80px 0;
	border-bottom:solid 1px #0080b1;
	text-align: center;
	color: #0080b1;
}
.telcontact a{
	color: #0080b1;
}

.telcontact p{
	font-size:1.5rem;
	font-weight: bold;
}
.telcontact p.telNum{
	font-size:4.5rem;
}
.company{
	width:90%;
	margin:0 auto;
	padding:80px 0;
	text-align: center;
	color: #0080b1;
}
.company h3{
	font-family: "tng";
	font-size:2rem;
}
.company p{
	font-weight: bold;
	font-size:1.3rem;
}
@media screen and (max-width:599px){
	.telcontact{
	padding:5vw 0;
}
	.telcontact p{
	font-size:1.3rem;
}
.telcontact p.telNum{
	font-size:2rem;
}
	.company{
	padding:5vw 0;
	}
	.company h3{
	font-size:2rem;
}
.company p{
	font-size:1.2rem;
}
}
@media screen and (min-width:600px){
	.howto{
		aspect-ratio:1/0.847;
		position:relative;
		background:url("img/webp/how-pc.webp") no-repeat center center / contain;
	}
	.howto .btn1 a{
		position:absolute;
		right:3%;
		bottom:0;
	}
}
@media screen and (max-width:599px){
	.howto{
		aspect-ratio:1/1.57;
		position:relative;
		background:url("img/webp/how-sp.webp") no-repeat center center / contain;
	}
	.howto .btn1 a{
		width:90%;
		position:absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:5vw;
	}
}