@charset "utf-8";

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

:root{
	--color-main:#1295C9;
	--color-main-rgb:18,149,201;
	--color-black:#444;
	--color-blue:#4083C4;
	--color-blue-light:#1295C9;
	--color-blue-pale:#DAF1F2;
	--color-gray:#E4E9EA;
	
	--bs-body-color:var(--color-black);

	--border-radius:80px;
	--bs-border-radius:10px;

	--h-header:100px;
	
	--py:100px;
	--px:40px;
}

/* Layout
----------------------------------------------- */
html{font-size:16px; scroll-padding-top: var(--h-header);}
body, html {
	color:var(--color-black);
	line-height:2;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight:400;
	font-style:normal;
/* 	letter-spacing:.05em; */
}
body.menu-opened{width:100%; overflow:hidden;}

#container{padding-top:var(--h-header);}

.container-fluid,
.container{padding-left:var(--px); padding-right:var(--px);}
.row:not([class*="g-"]){margin-left:calc(var(--px) * -1); margin-right:calc(var(--px) * -1);}
.row:not([class*="g-"])>[class*="col"]{padding-left:var(--px); padding-right:var(--px);}

.py-content{padding-top:var(--py); padding-bottom:var(--py);}
.py-content-sm{padding-top:calc(var(--py) / 2) !important; padding-bottom:calc(var(--py) / 2) !important;}
.px-content{padding-left:var(--px) !important; padding-right:var(--px) !important;}
.p-content{padding:var(--py) var(--px);}

.my-content{margin-top:var(--py) !important; margin-bottom:var(--py) !important;}
.my-content-sm{margin-top:calc(var(--py) / 2); margin-bottom:calc(var(--py) / 2);}
.mb-content{margin-bottom:var(--py);}
.mb-content-sm{margin-bottom:calc(var(--py) / 2) !important;}
.mt-content-sm{margin-top:calc(var(--py) / 2) !important;}
.mt-content{margin-top:var(--py);}

.gap-y-1{row-gap:1rem;}
.gap-y-2{row-gap:2rem;}

@media (min-width:374px){
/* 	.container{max-width:960px; padding-right:20px; padding-left:20px;} */
}
@media (max-width:991px){
	:root{
		--h-header:60px;
		--px:30px;
	}
	.container{max-width:100%;}
}
@media (max-width:767px){
	:root{
		--border-radius:50px;
		--py:50px;
		--px:20px;
	}
}
@media (max-width:575px){
	:root{
		--border-radius:40px;
	}
}

/* common
----------------------------------------------- */
img{max-width:100%; height:auto;}
.child-flex>*{display:flex;}
.child-flex>*>*{width:100%;}

.radius{border-radius:var(--border-radius);}
.radius-top{border-radius:var(--border-radius) var(--border-radius) 0 0;}
.radius-btm{border-radius:0 0 var(--border-radius) var(--border-radius);}

.round-rb{border-radius:10px 10px var(--border-radius) 10px;}
.round-lb{border-radius:10px 10px 10px var(--border-radius);}

.bg-white{color:var(--color-black);}
.bg-blue{background-color:var(--color-blue); color:white;}
.bg-blue-light{background-color:var(--color-blue-light); color:white;}
.bg-blue-pale{background-color:var(--color-blue-pale);}
.bg-gray{background-color:var(--color-gray);}

ul.rounds li,
.round{padding:1em; border-radius:10px;}

dl.d-flex{flex-wrap:wrap; align-items:flex-start; margin:0;}

/*
h1{font-size:2.3vh; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
.h1{font-size:37px; text-align:center; font-family:serif; line-height:1.8; margin:0; padding:4em 0;}
h2{font-size:60px; color:#bcaa93; margin-bottom:1.5em;}
h3{font-size:1rem;}
.h3{font-size:1.35rem;}
h4{font-size:1.5rem; color:#bcaa93; margin-bottom:2em;}
*/

h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-weight:500; margin-bottom:0; line-height:1.4;}
h1,.h1,h2,.h2{
	font-family:"Zen Old Mincho", serif;
	font-weight:500;
	font-style:normal;
}

h1{font-size:55px;}
.h1{font-size:40px;}
h1,.h1{margin-bottom:.5em; line-height:1.5;}

h2,.h2{font-size:37px; margin-bottom:1.5em;}
h2{text-align:center;}
h2 .en{
	display:block;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight:400;
	font-style:normal;
	font-size:1rem;
	color:var(--color-main);
	margin-bottom:1em;
}
h3,.h3{font-size:26px; margin-bottom:1.5em;}
h4,.h4{font-size:20px; margin-bottom:1em;}

.lead{font-size:18px; font-weight:400; margin-bottom:0;}

p{margin-bottom:1.2em;}
.space-lg,
.space-lg *{margin-bottom:2em !important; line-height:2.2;}

h3.lead{font-weight:500; margin-bottom:1.5em;}

strong,
.bold{font-weight:500 !important;}
.badge{border-radius:3px;}

.mincho{
	font-family:"Zen Old Mincho", serif;
	font-weight:500 !important;
	font-style:normal;
}

.btn{font-size:20px; font-weight:500;}

[class*="btn-ol"]{display:inline-flex; align-items:center; gap:2em; padding:1.5em 2em; border-radius:10em;}
.btn-prev::before,
.btn-next::after{
	content: '';
	width:.8rem;
	aspect-ratio:1/1;
	border-style:solid;
	border-width:2px 2px 0 0;
	border-color:inherit;
	transform:rotate(45deg);
}
.btn-prev::before{border-width:0 0 2px 2px;}
.btn-prev:hover::before,
.btn-next:hover::after{border-color:white;}

.btn-ol-blue{font-size:18px; color:var(--color-blue); border-color:var(--color-blue) !important;}
.btn-ol-blue:hover{color:white; background-color:var(--color-blue);}

.btn-ol-gray,
.btn-ol-gray:active{font-size:18px; color:#6c757d; border-color:#6c757d !important;}
.btn-ol-gray:hover{color:white; background-color:#6c757d;}

.c-main{color:var(--color-main);}
.c-blue{color:var(--color-blue);}

@media (max-width:1199px){
	.h1{font-size:35px;}
}
@media (max-width:992px){
	.h1{font-size:30px;}
}
@media (max-width:767px){
	h1{font-size:40px;}
	.h1{font-size:24px;}
	.lead{font-size:16px;}
}
@media (max-width:575px){
	.home h1{text-indent:-.5em;}
	h2,.h2{font-size:26px;}
	h3,.h3{font-size:20px;}
	h4,.h4{font-size:18px;}
}

/* scroll fadein
----------------------------------------------- */
.fadein{
	opacity:0;
	transform:translateY(40px);
	transition:opacity .8s, transform .8s;
	will-change:opacity, transform;
}
.fadein.is-show{
	opacity:1;
	transform:none;
}

/* header
----------------------------------------------- */
#header{display:flex; align-items:center; justify-content:space-between; width:100%; height:var(--h-header); background-color:white; position:fixed; top:0; left:0; z-index:900;}

a.brand{color:var(--color-black); text-decoration:none; position:relative;}
a.brand>span{display:block; font-size:14px;}
body.menu-opened a.brand{z-index:1000;}

#header nav.nav{display:flex; justify-content:center; width:100%; height:100vh; height:100dvh; background-color:rgba(255,255,255,.9); position:fixed; top:0; left:0; overflow-y:scroll;}
ul#gnavi{width:calc((25em * 2 + 2em) + 20px * 2); gap:2em; padding:calc(var(--h-header) / 2) 20px;}
ul#gnavi li{width:25em;}
ul#gnavi a{font-size:1rem; color:var(--color-main); line-height:1.6;}
ul#gnavi a span{font-size:1.4rem; color:var(--color-black); display:block;}

#header nav.nav{
	opacity:0;
	visibility:collapse;
}

body.menu-opened #header nav.nav{
	visibility:visible;
	opacity:1;
	transition:all .4s;
}

@media (max-width:991px){
	ul#gnavi{width:auto; flex-direction:column; gap:1.5em; padding:var(--h-header) 20px;}
	ul#gnavi li{width:auto;}
	ul#gnavi a{text-align:center; font-size:1rem;}
	ul#gnavi a span{font-size:1.4rem; color:var(--color-black); display:block;}
	
	a.brand{display:flex; gap:1rem; align-items:center;}
	a.brand img{width:80px;}
}

/* footer
----------------------------------------------- */
#footer{padding:2rem 0;}
#copylight{display:block; font-size:1rem; text-align:center;}


/* button effect
----------------------------------------------- */
:root{
	--menubtn-w:36px;
	--menubtn-h:26px;
	--menubtn-rgb:var(--color-main-rgb);
	--menubtn-open-rgb:var(--color-main-rgb);
	--menubtn-border-w:2px;
}

#btn-menu-wrap{line-height:1;}

#btn-menu,
#header .nav .close{padding:0;border:none;outline:0;cursor:pointer}
#btn-menu{width:var(--menubtn-w);height:var(--menubtn-h);background-color:transparent;position:relative;z-index:1000;}
#btn-menu span,
#btn-menu::after,
#btn-menu::before{
	content:'';
	background:rgb(var(--menubtn-rgb));
	position:absolute;
	left:0;
	height:var(--menubtn-border-w);
	-webkit-transition:width .2s cubic-bezier(.25,.46,.45,.94);
	transition:width .2s cubic-bezier(.25,.46,.45,.94);
	-webkit-transform-origin:left center;
	-ms-transform-origin:left center;
	transform-origin:left center;
}
#btn-menu span{display:block;width:100%;text-indent:100%;overflow:hidden;top:calc(50% - var(--menubtn-border-w) / 2);}
#btn-menu::before{width:100%;top:0;}
#btn-menu::after{width:100%;bottom:0;}

.menu-opened #btn-menu span{opacity:0}
.menu-opened #btn-menu::before{-webkit-animation:menu-icon-1 .6s alternate forwards; animation:menu-icon-1 .6s alternate forwards}
.menu-opened #btn-menu::after{-webkit-animation:menu-icon-2 .6s alternate forwards; animation:menu-icon-2 .6s alternate forwards}
@-webkit-keyframes menu-icon-1{
	40%{top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
	100%{top:50%;-webkit-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}
@keyframes menu-icon-1{
	40%{top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
	100%{top:50%;-webkit-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}
@-webkit-keyframes menu-icon-2{
	40%{bottom:50%;-webkit-transform:translate(0,50%);transform:translate(0,50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
	100%{bottom:50%;-webkit-transform:translate(0,50%) rotate(-135deg);transform:translate(0,50%) rotate(-135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}
@keyframes menu-icon-2{
	40%{bottom:50%;-webkit-transform:translate(0,50%);transform:translate(0,50%);-webkit-transform-origin:center center;transform-origin:center center;background:rgb(var(--menubtn-rgb))}
	100%{bottom:50%;-webkit-transform:translate(0,50%) rotate(-135deg);transform:translate(0,50%) rotate(-135deg);-webkit-transform-origin:center top;transform-origin:center top;background:rgb(var(--menubtn-open-rgb))}
}


/* Loop
----------------------------------------------- */
.loop-slider{
	overflow:hidden;
	width:100%;
}
.loop-track{
	display:flex;
	width:max-content;
}
.loop-track .item{
	white-space:nowrap;
	
}
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* aside
----------------------------------------------- */
.btn-contact,
.btn-line{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
	gap:1em;
	font-size:26px;
	font-weight:500;
	padding:1em;
}

.btn-contact{
	color:white !important;
	background-color:var(--color-blue) !important;
	text-align:left;
}
.btn-contact span.txt{padding:.25em 3.8em 0 0; position:relative;}
.btn-contact span.txt::after{
	content:'';
	height:100%;
	aspect-ratio:90/113;
	background:url(../img/contact.svg) no-repeat right center/contain;
	position:absolute;
	top:0;
	right:0;
}
.btn-contact .round{font-size:20px; color:var(--color-blue); width:100%; position:relative;}
.btn-contact .round::after{
	content: '';
	width:.8rem;
	aspect-ratio:1/1;
	border:2px solid var(--color-blue);
	border-width:2px 2px 0 0;
	position:absolute;
	top:50%;
	right:1em;
	transform:translateY(-50%) rotate(45deg);
}

.btn-line{
	color:#06C755 !important;
	background-color:#E7F9DC !important;
	border:15px solid #06C755 !important;
}

@media (max-width:1200px){
	.btn-contact,
	.btn-line{font-size:23px;}
}
@media (max-width:992px){
	.btn-contact,
	.btn-line{font-size:18px;}
}
@media (max-width:767px){
	.btn-line{border-width:10px !important;}
}


/* home
----------------------------------------------- */
@media (max-width:575px){
	img#cover{aspect-ratio:4/3; object-fit:cover;}
}

/* #problem
----------------------------------------------- */
#problem ul.rounds{
	flex-direction:column;
	align-items:center;
	gap:2em;
	font-weight:500;
	line-height:1.6;
}
#problem ul.rounds li{
	display:flex;
	justify-content:center;
	align-items:center;
	height:5em;
	padding:0 1em;
	background-color:white;
	color:var(--color-black);
	width:230px;
	max-width:calc(100% - 2em);
}
#problem h3.lead{
	padding:.5em 0 .5em 5em;
	background:url(../img/gear.svg) no-repeat left center/contain;
}
#problem h3.lead span{
	display:inline-block;
	font-size:1.65em;
	font-weight:500;
	padding:0 .1em;
}

#problem .bg-white section{max-width:30em; margin:0 auto 2em;}
#problem dl>*{border-top:1px solid var(--color-black); padding:1em .5em;}
#problem dl dt{width:6em;}
#problem dl dd{width:calc(100% - 6em);}

@media (max-width:575px){
	#problem dl>*{padding:1em 0;}
	#problem dl dt{width:5em;}
	#problem dl dd{width:calc(100% - 5em);}
}

/* #solution
----------------------------------------------- */
#solution img.border-bottom{border-color:var(--color-main) !important;}
#solution strong{display:inline-block; color:white; padding:1em; position:relative; overflow:hidden; z-index:1;}
#solution strong::before,
#solution strong::after{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	background-image:linear-gradient(-45deg, #55A8C9 20%, #00D6CD, #55A8C9 80%);
}
#solution strong::before{
	left:calc(-100% + 2px);
}
#solution strong::before,
#solution strong::after{animation:scroll_grad 5s linear infinite;}
@keyframes scroll_grad {
	0% { transform: translateX(0); }
	100% { transform: translateX(100%); }
}

@media (max-width:991px){
	#solution h2{line-height:1;}
}

@media (max-width:575px){
	#solution strong{padding:1em .5em;}
	#solution .row p{margin-bottom:.5em;}
	#solution .row img{max-width:70%;}
}

/* #logic
----------------------------------------------- */
#logic{background-image:linear-gradient(white, rgba(83, 200, 238, .5));}

/* #three-steps
----------------------------------------------- */
#three-steps h3{color:var(--color-main); padding-bottom:15px; position:relative; overflow-x:hidden;}
#three-steps h3 span{font-size:1.5em; line-height:1; margin-right:.25em;}
#three-steps h3::after{
	content:'';
	width:100%;
	height:10px;
	border-bottom:1px solid var(--color-main);
	border-right:2px solid var(--color-main);
	position:absolute;
	bottom:0;
	left:0;
	transform-origin:bottom right;
	transform:translateX(-100%) skew(45deg);
	transition:1s;
}
#three-steps h3.is-show::after{
	transform:translateX(0) skew(45deg);
}
#three-steps .col:nth-child(2) h3::after{transition-delay:1s;}
#three-steps .col:nth-child(3) h3::after{transition-delay:2s;}

#three-steps .loop-slider .loop-track{gap:5vw;}
#three-steps .loop-slider .item{font-size:12vw; font-weight:100; line-height:1.4; opacity:.5;}
#three-steps .loop-slider .item.im{width:15vw;}
.anime-txt{animation:scroll 80s linear infinite;}

#three-steps strong{font-size:1.4em;}

@media (max-width:767px){
	#three-steps .col:nth-child(2) h3::after{transition-delay:0s;}
	#three-steps .col:nth-child(3) h3::after{transition-delay:0s;}
	#three-steps .space-lg{text-align:left;}
	#three-steps strong{font-size:1.2em;}

	#three-steps .loop-slider .item{font-size:15vw;}
	#three-steps .loop-slider .item.im{width:20vw;}
	.anime-txt{animation:scroll 40s linear infinite;}
}

@media (max-width:575px){
	#three-steps .steps img{max-width:60%;}
}

/* #training-program
----------------------------------------------- */
[class*="ic-tp"]{
	display:flex;
	flex-direction:column;
	gap:.5rem;
}
[class*="ic-tp"]::before{
	content:'';
	width:100%;
	height:80px;
	background:no-repeat center center/contain;
}
.btn[class*="ic-tp"]::before{height:60px;}

.ic-tp01::before{background-image:url(../img/tp01.svg) !important;}
.ic-tp02::before{background-image:url(../img/tp02.svg) !important;}
.ic-tp03::before{background-image:url(../img/tp03.svg) !important;}
.ic-tp04::before{background-image:url(../img/tp04.svg) !important;}
.ic-tp05::before{background-image:url(../img/tp05.svg) !important;}

#training-program .round-rb{
	background-color:white;
	color:var(--color-black);
}

ul.nav-program{
	justify-content:center;
	gap:3em;
}
ul.nav-program .btn{
	justify-content:center;
	align-items:center;
	padding:2em 1em 1em;
	width:280px;
	border:none;
	position:relative;
}
ul.nav-program .btn span{
	display:block;
	color:white;
	font-size:1rem;
	white-space:nowrap;
	padding:.2em 1em;
	background-color:var(--color-blue);
	border-radius:5px;
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%,-50%);
}
ul.nav-program .btn::after{
	content:'';
	width:.8rem;
	aspect-ratio:1/1;
	border:2px solid var(--color-blue);
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}

#training-program .bg-blue-pale{background-image:linear-gradient(var(--color-blue-pale) 90%, white 90%);}

#training-program section h3,
#training-program section h3 + .h4.mb-content-sm{text-align:center; margin-bottom:0;}
#training-program section h4.border-bottom{border-color:var(--color-blue) !important; padding-bottom:.5em;}
#training-program section h4.check{padding-left:2em;}
#training-program section h4.check + ul{padding-left:3em;}
#training-program section h4.check{background:url(../img/ic-check.svg) no-repeat left center/auto 70%;}

#training-program section h4.border-bottom.en{
	margin:2em 0 .5rem;
}
#training-program section h4.border-bottom.en span{
	display:inline-block;
	padding-right:1em;
	font-size:1.5em;
	color:var(--color-blue);
}

#training-program .lead.round.c-blue{border:1px solid var(--color-blue); text-align:center; line-height:1.6;}

#training-program section h3::after{
	content:'';
	width:50px;
	height:3px;
	background-color:var(--color-blue);
	margin:.5rem auto 1em;
}

#training-program section{position:relative;}
#training-program section .inner{width:820px; max-width:calc(100% - 60px * 2); margin:0 auto;}
#training-program section>.round{
	padding:1em .5em;
	border-radius:0 5px 5px 0;
	font-size:20px;
	white-space:nowrap;
	writing-mode:vertical-rl;
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}

#training-program dl dt{width:20em; font-weight:500; display:flex; align-items:center; justify-content:space-between; color:var(--color-blue);}
#training-program dl dd{width:calc(100% - 20em); margin:0; padding-left:1em;}
#training-program dl dt::after{
	content:'\30FB\30FB\30FB\30FB\30FB';
	letter-spacing:-.25em;
}

@media (max-width:991px){
	#training-program dl{flex-direction:column;}
	#training-program dl dt{width:auto;}
	#training-program dl dd{width:auto; padding-left:0;}
	#training-program dl dt::after{content:none;}
}
@media (max-width:767px){
	#training-program section .inner{width:100%; max-width:inherit; margin:2rem auto;}
	#training-program section>.round{
		padding:0 2em .5em;
		border-radius:0 0 5px 5px;
		font-size:16px;
		writing-mode:inherit;
		top:0;
		left:50%;
		transform:translateX(-50%);
	}
}
@media (max-width:575px){
	img#tp-cover{aspect-ratio:16/9 !important; object-fit:cover;}
	#training-program section h3 + .h4.mb-content-sm{text-align:left;}
	#training-program section h4.border-bottom.en span{
		display:block;
		padding-right:0;
		font-size:1.2em;
	}
	#training-program section h4.check + ul{padding-left:1em;}
}

/* #voice
----------------------------------------------- */
#voice section{background-color:white;}
#voice section h3{margin-bottom:.5em;}
#voice section h3 + p{
	color:var(--color-main);
	padding-bottom:.5em;
	border-color:var(--color-main) !important;
	font-weight:500;
}
#voice section h3 + p span{
	display:inline-block;
	padding-left:1.75em;
	background:url(../img/star.svg) no-repeat .5em center/auto 40%;
}
#voice section>*:last-child{margin-bottom:0;}

@media (max-width:767px){
	#voice img{aspect-ratio:16/9;}
}

/* #ceo
----------------------------------------------- */
#ceo .thin{max-width:690px; margin:0 auto;}
#ceo .thin strong{font-size:1.4em;}

img[class*="fit-cover"]{width:100%; height:100%; object-fit:cover;/*  position:absolute; */}
img.fit-cover-lt{object-position:left top;}
img.fit-cover-lc{object-position:left center;}
img.fit-cover-ct{object-position:center top;}

.history{position:relative;}
.history img{object-fit:cover;}
.history strong{font-size:1.4em;}

@media (min-width:992px){
	#profile img,
	.history:last-child img{object-position:15% top;}
	.history img{width:45vw; height:100%; object-fit:cover; position:absolute; top:0;}
	.history:nth-child(odd) img{left:0;}
	.history:nth-child(even) img{right:0;}
}
@media (max-width:991px){
	#profile img.round-rb{object-position:15% top; aspect-ratio:16/8;}
	.history img{width:100%; aspect-ratio:16/8;}
}
@media (max-width:767px){
	#message img{aspect-ratio:4/3; object-fit:cover; object-position:center top;}
	#ceo .thin strong{font-size:1.2em;}
	.history strong{font-size:1.2em;}
}

/* #company
----------------------------------------------- */
.table{max-width:840px; margin:0 auto;}
.table tr>*{padding:1.5em 1em; border-color:var(--color-black);}
.table tr th{font-weight:500;}

@media (max-width:767px){
	.table tr>*{display:block; padding:1.5em 0;}
	.table tr th{padding-bottom:0; border:none;}
	.table tr td{padding-top:0;}
}

/* #member
----------------------------------------------- */
#member .loop-slider .loop-track{gap:30px;}
#member .loop-slider .item{width:25vw;}
#member .loop-slider img{width:100%;}
.anime-photo{animation:scroll 80s linear infinite;}

@media (max-width:991px){
	#member img.round-rb{aspect-ratio:16/8;}
}
@media (max-width:767px){
	#member .loop-slider .item{width:40vw;}
	#member .loop-slider img{aspect-ratio:4/3; object-fit:cover;}
}

/* about
----------------------------------------------- */

/* mask
----------------------------------------------- */
/*
img.mask{
	mask-image:url(../img/mask02.svg);
	-webkit-mask-image:url(../img/mask02.svg);
	mask-size:0% 0%;
	-webkit-mask-size:0% 0%;
	mask-repeat:no-repeat;
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
}
.mask-box.lazyloaded img.mask{
	transform:translate3d(0,0,0);
	transform:translateZ(0);
	backface-visibility:hidden;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	transition: -webkit-mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1);
	animation: floating 13000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes floating{
	0%{transform:translate3d(0, 0, 0)}
	50%{transform:translate3d(0, -7.5%, 0)}
	100%{transform:translate3d(0, 0, 0)}
}
.mask-box-1{transform-origin:top right;}
img.mask-1{
	mask-image:url(../img/mask01.svg);
	-webkit-mask-image:url(../img/mask01.svg);
}
img.mask-2{
	mask-image:url(../img/mask02.svg);
	-webkit-mask-image:url(../img/mask02.svg);
}

*/