@charset "UTF-8";
/* CSS Document */

/* 新時代リセットCSS */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

*{
	line-height: 1;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a{
	cursor: pointer;
}

.atag{
	cursor: pointer;
	text-decoration: none;
}

#sm_header_outside{
	width:100%;
	position: fixed;
	z-index: 100;
}

#sm_header{
	width:100%;
	margin: 0 auto;
	height: 70px;
}

h1{
	display: flex;
	justify-content: center;
	text-align: center;
	padding: 10px 0;
	opacity: 0.8;
}

h1 img{
	height: 50px;
}

/* 画面最下段に固定 */
#sm_header_undernav{
	width:100%;
	height: 60px;
	position: fixed;
	bottom:0;
	left:0;
	display: flex;
	align-items: center;
}

.undernav_item{
	width:25%;
	text-align: center;
	border:1px solid #fff;
	padding:5px 0;
}

.item_1{
	background-color:#E1D7C6;
}

.item_2{
	background-color:#40B7F8;
}

.item_3{
	background-color: #0156bb;
}

.item_4{
	background-color: #ff7af0
}

.item_1 a p{
	color:#665A48;
}

.undernav_item a{
	display: block;
	text-decoration: none;
}

.undernav_item img{
	display: inline-flex;
	justify-content: center;
}

.undernav_item p{
	color:#fff;
	font-weight: 600;
	margin-top: 3px;
}

.empty_box{
	width:100%;
	height: 70px;
}

/* fixedの下ナビの、コンテンツ隠れ防止 */
.empty_box_footer{
	width: 100%;
	height: 65px;
}

/* ========================================
	ハンバーガーメニュー
========================================= */



.slide-menu{
  background-color: #eee;
  position: fixed;
  bottom: 60px;
  width: 100%;
  height: auto;
  left: 0;
  transform: translateX(100%);
  z-index: 11;
  transition: .5s ease-in;
	display: inline-block;
	padding: .5rem;
	border-top: 10px solid #ff7af0;
}



.slide-menu li{
	list-style-type: none;
  　text-align: center;
	width: 98%;
	height: 3rem;
	margin: 0 auto;
	
	
}

.slide-menu li a{
	text-decoration: none;
	line-height: 3rem;
	
}

.side_menu_top{
	display: flex;
	margin-bottom: .5rem;
}



.side_menu_top li {
	width: 48%;
	font-weight: 600;
	margin: 0 auto;
	border-radius: 5px;
}

.kengaku{
	background-color: #40B7F8;
	color:#fff;
	border: none;
	transition: .2s;
}

.kengaku:hover{
	background-color: #f5fadb;
	color: #40B7F8;
	border: 2px solid #40B7F8;
	transition: .2s;
}

.web{
	background-color: #0156bb;
	color:#fff;
	border: none;
	transition: .2s;
}

.web:hover{
	background-color: #f5fadb;
	color: #0156bb;
	border: 2px solid #0156bb;
	transition: .2s;
}

.side_menu_bottom li{
	border: 1px solid #ff7af0;
	background-color: #fff;
	color: #ff7af0;
	margin-bottom: 3px;
	transition: .2s;
}

.side_menu_bottom li:hover{
	background-color: rgba(255,122,240,1);
	color: #fff;
	font-weight: 700;
	transition: .2s;
}


.slide-menu.active{
  transform: translateX(0); 
}

/* ========================================
	コンテンツ
========================================= */

@media screen and (min-width:960px){
	.title{
		animation: clip-path linear both;
		animation-timeline:view(block);
		animation-range: cover 20% cover 60%;
	}
}
@keyframes clip-path{
	0%{
		clip-path: inset(0 100% 0 0);
		transform: scale(1.15);
	}
	
	80%{
		clip-path: inset(0);
		transform: scale(1.15);
	}
	100%{
		clip-path: inset(0);
		transform: scale(1);
	}
}


h3{
	/* フォントのレスポンシブ */
	font-size:clamp(1.3rem, 1.067rem + 0.78vw, 2rem);
	font-weight: 700;
	text-align: center;
	margin-top: 1.5rem;
}

.h2{
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

h2{
	/* フォントのレスポンシブ */
	font-size: clamp(1.4rem, 1.067rem + 1.11vw, 2.4rem);
	font-weight: 700;
	text-align: center;
	line-height: 1.25;
}

h2 span{
	color:#ff7af0;
	font-weight: 700;
}

/* ========================================
	エアロビクス
========================================= */

.aero{
	background-color: rgba(234,255,0,0.3);
	width:100%;
}

.photo{
	animation: scroll-scale linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 50%;
}

@keyframes scroll-scale{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	80%{
		opacity: 0.8;
		transform: scale(1.05);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

.photo img{
	width:100%;
}

.comment{
	width:100%;
}
/* .comment 481px以上で起動 */
@keyframes clip-path2{
	/*0%{
		clip-path: inset(0 100% 0 0);
	}
	60%{
		clip-path: inset(0 40% 0 0);
		transform: translateX(0px);
	}
	80%{
		clip-path: inset(0 20% 0 0);
		transform: translateX(10px);
	}
	100%{
		clip-path: inset(0);
		transform: translateX(0px);
	}*/
	0%{
		opacity:0;
		
	}
	80%{
		opacity: 0;
		
	}
	100%{
		opacity: 1;
		
	}
}

h4{
	width:50%;
	margin: 1rem auto;
}

.comment p{
	width:80%;
	margin: 0 auto 1rem auto;
	line-height: 1.75;
	letter-spacing: .07rem;
	/* フォントのレスポンシブ */
	font-size: clamp(1rem, 0.667rem + 1.11vw, 1.2rem);
}


.button_blue{
	width:80%;
	max-width:400px;
	height: 40px;
	border-radius: 20px;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 40px;
	color:#fff;
	font-weight: 700;
	letter-spacing: .07rem; 
	margin:0 auto;
	background-color: #0156bb;
}

.button_blue:hover{
	background-color: #fff;
	border: 2px solid #0156bb;
	color:#0156bb;
	line-height: 36px;
	transition: .1s;
}

.button_blue a{
	text-decoration: none;
	cursor: pointer;
}

/*== ボタン共通設定 */
.btn {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: block;
    width:80%;
    max-width: 400px;
    height: 40px;
    /*line-height: 40px;*/
    text-align: center;
	margin:0 auto;
    
}

/*ボタン内側の設定*/
.btn span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #0156bb;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.5);
	border-radius: 20px;
	line-height: 40px;
	font-weight: 700;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転（手前に） */

/* 回転前 */
.rotatefront span:nth-child(1) {
    background-color: #0156bb;
    color: #fff;
    transform: rotateX(0deg);/*はじめは回転なし*/
    transform-origin: 0 50%  -20px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
    transform: rotateX(-90deg);/* X軸に-90度回転 */
}

/* 回転後 */
.rotatefront span:nth-child(2) {
    background: #fff;
    color: #0156bb;
    transform: rotateX(90deg);/*はじめはX軸に90度回転*/
    transform-origin: 0 50%  -20px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}

.btn:active{
	transform: translate(-5px,5px);
	transition: .1s ease-in;
}

.btn:active span{
	box-shadow: 0 0 0 0 transparent;
	transition: .1s ease-in;
}

.btn:active span:nth-child(1){
	opacity: 0;
}	



.customer{
	width:100%;
	margin: 2rem 0 0 0;
}

.customer_title{
	display: flex;
	width:90%;
	margin: 0 auto;
}

.customer_title img{
	height: 8vh;
	margin-right: 1.5rem;
	
}

.customer_title h5{
	font-size:clamp(1.5rem, 0.6rem + 1vw, 1.8rem);
	line-height: 8vh;
}

.customer_comment{
	width:94%;
	margin: 1rem auto 0 auto;
}

.customer_comment li{
	line-height: 1.5;
	border-bottom: 1px solid rgba(0,0,0,0.3);
	padding: 0 0.5rem;
	margin-bottom: 1rem;
	letter-spacing: .07rem;
	font-size:clamp(0.8rem, 0.467rem + 1.11vw, 1rem);
}

.customer_comment li:last-child{
	margin-bottom: 0;
}

.yoga{
	width:100%;
	padding: 0 0 5rem 0;
	background-color: rgba(0,255,135,0.15);
	
}


.footer_wave{
	width:100%;
	height: 8em;
	background-color: rgba(0,255,135,0.15);

	
}
.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: 8em;
    max-height: 100vh;
    margin: 0;
  bottom: -1px;
  opacity:0.7;
}

@media (max-width: 50em) {
    .editorial {
        height: 10vw;
    }
}






.aqua45{
	width:100%;
	padding:2rem 0 2rem 0;
	background: linear-gradient(to bottom, rgba(80,247,255,0.75) 0%, rgba(202,253,255,1) 30%, rgba(202,253,255,0.45) 70%);
	 /*safariで発生するズレ対策 */
	box-shadow: 0 -1px 1px rgba(80,247,255,0.5);
}



#aqua45_bottom{
	width:100%;
	height: 5vh;
	background: linear-gradient(to bottom, rgba(202,253,255,0.45) 0%, rgba(255,255,255,0) 100%);
	
}

footer img{
	margin: 0 auto;
}

#footer_text{
	margin: 1rem 0;
}

footer p{
	font-size:1.2rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.button_aqua{
	width:80%;
	max-width:400px;
	height: 40px;
	border-radius: 20px;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 40px;
	color:#fff;
	font-weight: 700;
	letter-spacing: .07rem; 
	margin:1rem auto 0 auto;
	background-color: #40B7F8;
}

.button_aqua:hover{
	background-color: #fff;
	border: 2px solid #40B7F8;
	color:#40B7F8;
	line-height: 36px;
	transition: .1s;
}

.button_aqua:active,
.button_blue:active{
	transform: translate(-5px,5px);
	box-shadow: 0 0 0 0 transparent;
}

.copyright{
	font-size:0.5rem;
	font-weight: 400;
	margin:1.5rem 0 1rem 0;
}

/* 481px以上対応 */
@media screen and (min-width:481px){
	h2,h3{
		letter-spacing: .07rem;
	}
	.comment{
		animation: clip-path2 linear both;
		animation-timeline:view(block);
		animation-range: cover 0% cover 40%;
	}
}

/* 1025px以上対応 */
@media screen and (min-width:1025px){
	.topics{
		padding:5%;
		margin: 0 auto;
	}
	.photo_zone{
		display: flex;
	}
	.yoga_right{
		order: 2;
	}
	.yoga_left{
		order:1;
	}
	.photo,
	.comment{
		width:50%;
	}
	.h2{
		display: flex;
		justify-content: center;
	}
	h3{
		margin-top: 3rem;
	}
	.h2{
	margin-top: 1rem;
	margin-bottom: 3rem;
	}
	.button_blue{
		width:60%
	}
}