@charset "UTF-8";

:root{
	--body : #333;
	--link : #333;
	--primary : #100454;
}

/*--------------------------------------------
HTML
---------------------------------------------*/

@media screen and (max-width: 999px){
	html{
		font-size : calc( 10 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	html{
		font-size : 10px;
	}
}

/*--------------------------------------------
BODY
---------------------------------------------*/

@media screen and (max-width: 999px){
	body{
		font-size : 2.4rem;
		min-height : 100vh;
	}
}

@media print,screen and (min-width: 1000px){
	body{
		font-size : 1.6rem;
	}
}

/*--------------------------------------------
WRAPPER
---------------------------------------------*/

.wrap{
	margin-left : auto;
	margin-right : auto;
}

@media screen and (max-width: 999px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.wrap{
		min-width : 1000px;
		max-width : 1440px;
	}
}

@media screen and (max-width: 999px){
	.sp-wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

/*--------------------------------------------
GRID SYSTEM
---------------------------------------------*/

@media print,screen and (min-width: 1000px){
	.row{
		display : flex;
	}
	.row.center > *{
		margin-left : auto;
		margin-right : auto;
	}
	.row.align-center{
		align-items : center;
	}
	.row.right > *{
		margin-left : auto;
	}
	.row.reverse{
		flex-direction : row-reverse;
		justify-content : flex-end;
	}
	.row.flex-wrap{
		flex-wrap : wrap;
	}
	.row .col-1{
		width : calc( 1 / 12 * 100% );
	}
	.row .col-2{
		width : calc( 2 / 12 * 100% );
	}
	.row .col-3{
		width : calc( 3 / 12 * 100% );
	}
	.row .col-4{
		width : calc( 4 / 12 * 100% );
	}
	.row .col-5{
		width : calc( 5 / 12 * 100% );
	}
	.row .col-6{
		width : calc( 6 / 12 * 100% );
	}
	.row .col-7{
		width : calc( 7 / 12 * 100% );
	}
	.row .col-9{
		width : calc( 9 / 12 * 100% );
	}
	.row .col-10{
		width : calc( 10 / 12 * 100% );
	}
	.row .col-11{
		width : calc( 11 / 12 * 100% );
	}
	.row .col-8{
		width : calc( 8 / 12 * 100% );
	}
	.row .col-12{
		width : calc( 12 / 12 * 100% );
	}
	.offset-1{
		margin-left : calc( 1 / 12 * 100% );
	}
	.offset-2{
		margin-left : calc( 2 / 12 * 100% );
	}
	.offset-3{
		margin-left : calc( 3 / 12 * 100% );
	}
	.offset-4{
		margin-left : calc( 4 / 12 * 100% );
	}
	.offset-5{
		margin-left : calc( 5 / 12 * 100% );
	}
	.offset-6{
		margin-left : calc( 6 / 12 * 100% );
	}
	.offset-7{
		margin-left : calc( 7 / 12 * 100% );
	}
	.offset-8{
		margin-left : calc( 8 / 12 * 100% );
	}
	.offset-9{
		margin-left : calc( 9 / 12 * 100% );
	}
	.offset-10{
		margin-left : calc( 10 / 12 * 100% );
	}
	.offset-11{
		margin-left : calc( 11 / 12 * 100% );
	}
	.pl-15{
		padding-left : 15px;
	}
	.pl-20{
		padding-left : 20px;
	}
	.pl-25{
		padding-left : 25px;
	}
	.pl-30{
		padding-left : 30px;
	}
	.pl-35{
		padding-left : 35px;
	}
	.pl-45{
		padding-left : 45px;
	}
	.pl-50{
		padding-left : 50px;
	}
	.pl-55{
		padding-left : 55px;
	}
	.pl-60{
		padding-left : 60px;
	}
	.pl-70{
		padding-left : 70px;
	}
	.pl-80{
		padding-left : 80px;
	}
	.pr-10{
		padding-right : 10px;
	}
	.pr-15{
		padding-right : 15px;
	}
	.pr-25{
		padding-right : 25px;
	}
	.pr-30{
		padding-right : 30px;
	}
	.pr-40{
		padding-right : 40px;
	}
	.pr-45{
		padding-right : 45px;
	}
	.pr-50{
		padding-right : 50px;
	}
	.pr-60{
		padding-right : 60px;
	}
	.pr-90{
		padding-right : 90px;
	}
	.mr-15{
		margin-right : 15px;
	}
	.mr-30{
		margin-right : 30px;
	}
	.mr-60{
		margin-right : 60px;
	}
	.ml-15{
		margin-left : 15px;
	}
	.ml-30{
		margin-left : 30px;
	}
	.ml-60{
		margin-left : 60px;
	}
	.ml-80{
		margin-left : 60px;
	}
	.mr-30{
		margin-right : 30px;
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
	display : flex;
    background-color: #fff;
    font-family: 'Spectral', serif;
}

#header .logo{
	display : block;
}

#header .recruit{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
background: rgb(132,204,198);
background: linear-gradient(60deg, rgba(132,204,198,1) 16%, rgba(44,143,161,1) 77%);
	color : #fff;
	font-weight : 400;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
}

@media screen and (max-width: 999px){
	#header{
		height : calc( 120 * 100vw / 768 );
	}
	#header .logo{
		margin-left : calc( 6 * 100% / 768 );
		margin-top : calc( 18 * 100vw / 768 );
	}
	#header .logo img{
		height : calc( 86 * 100vw / 768 );
	}
	#header .recruit{
		margin-top : calc( 18 * 100vw / 768 );
		margin-left : calc( 48 * 100% / 768 );
		width : calc( 142 * 100% / 768 );
		height : calc( 90 * 100vw / 768 );
		font-size : 2.6rem;
	}
}

@media print,screen and (min-width: 1000px){
	#header{
		height : 90px;
		align-items : flex-start;
	}
	#header .logo{
		margin-top : 14px;
        margin-left: 10px;
	}
	#header .logo img{
		height : 66px;
	}
	#header .recruit{
		font-size : 1.8rem;
		margin-left : 12px;
		height : 100%;
		width : 142px;
	}
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 999px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #nav{
		max-height : 100vh;
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
}

@media screen and (max-width: 999px){
	#menuBtn{
		background-color : #00C5CD;
		width : calc( 120 * 100% / 768 );
		height : 100%;
		right : 0;
		top : 0;
		padding-left : calc( 20 * 100% / 768 );
		padding-right : calc( 20 * 100% / 768 );
		padding-top : calc( 36 * 100vw / 768 );
		padding-bottom : calc( 36 * 100vw / 768 );
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
	#menuBtn{
		z-index : 12;
	}
	#menuBtn span span{
		background-color : #fff;
		height : calc( 8 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
}

@media screen and (max-width: 999px){
	body.is-open #menuBtn span span{
		background-color : #fff;
	}
}

/*--------------------------------------------
NAV
---------------------------------------------*/

@media screen and (max-width: 999px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : calc( 120 * 100vw / 768 );
		height : calc( 100vh - ( 120 * 100vw / 768 ) );
		background-color : #00C5CD;
	}
	#nav .scroll{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		padding-top : calc( 78 * 100vw / 768 );
		padding-bottom : calc( 109 * 100vw / 768 );
	}
	#nav button{
		display : block;
		width : calc( 62 * 100% / 720 );
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 106 * 100vw / 768 );
	}
	#nav button img{
		width : 100%;
		height : auto;
	}
}

@media print,screen and (min-width: 1000px){
	#nav{
		margin-left : auto;
		height : 100%;
	}
	#nav .scroll{
		height : 100%;
	}
}

/*--------------------------------------------
NAVS
---------------------------------------------*/

#navGlobal a{
	letter-spacing : .1em;
	font-weight : 300;
	display : block;
    font-family: 'Spectral', serif;
}

@media screen and (max-width: 999px){
	#navGlobal li + li:not(.is-sp){
		margin-top : calc( 52 * 100vw / 768 );
	}
	#navGlobal li:not(.is-sp) a{
		border-bottom : calc( 3 * 100vw / 768 ) solid #fff;
		padding-bottom : calc( 8 * 100vw / 768 );
		font-size : 3.2rem;
		color : #fff;
	}
	#navGlobal li.is-sp{
		margin-top : calc( 56 * 100vw / 768 );
	}
	#navGlobal li.is-sp a{
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		background-color : #ff0;
		color : #00C5CD;
		width : 100%;
		text-indent : .1em;
		height : calc( 135 * 100vw / 768 );
		font-size : 3.2rem;
	}
}

@media print,screen and (min-width: 1000px){
	#navGlobal{
		display : flex;
		align-items : center;
		height : 100%;
	}
	#navGlobal a{
		font-size : 1.8rem;
		padding-left : 10px;
		padding-right : 10px;
	}
}

@media screen and (max-width: 999px){
	#navSub{
		padding-top : calc( 68 * 100vw / 768 );
	}
	#navSub .tel , #navSub .email{
		display : block;
		text-align : center;
		letter-spacing : .1em;
		text-indent : .1em;
		font-size : 4rem;
		color : #fff;
		font-weight : 900;
		font-style : italic;
	}
	#navSub .email{
		margin-top : calc( 47 * 100vw / 768 );
	}
	#navSub .instagram{
		background-color : rgba(0,0,0,.8);
		padding-top : calc( 24 * 100vw / 768 );
		height : calc( 224 * 100vw / 768 );
		margin-top : calc( 61 * 100vw / 768 );
		display : block;
	}
	#navSub .instagram span:nth-of-type(1){
		display : block;
		text-align : center;
	}
	#navSub .instagram span:nth-of-type(1) img{
		height : calc( 176 * 100vw / 768 );
	}
	#navSub .instagram span:nth-of-type(2){
		color : #fff;
		font-size : 2rem;
		line-height : 1.1;
		display : block;
		margin-left : calc( 57 * 100% / 720 );
		margin-top : calc( ( -41 + 1 ) * 100vw / 768 );
	}
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

#title{
	overflow : hidden;
	position : relative;
}

#title:before , #title:after{
	content : "";
	display : block;
	position : absolute;
	left : 0;
	width : 0;
	height : 0;
	border-style : solid;
	z-index : -1;
}

#title:before{
	border-color : #c5e837 transparent transparent transparent;
}

#title:after{
	bottom : 0;
	border-color : transparent #eaf3c7 transparent transparent;
}

#title h1{
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	font-style : italic;
	line-height : 1.2;
}

#title h1[data-en]:before{
	content : attr(data-en);
	display : block;
	color : #259b3a;
	font-weight : 900;
	line-height : 1;
}

@media screen and (max-width: 999px){
	#title{
		padding-bottom : calc( 102 * 100vw / 768 );
	}
	#title:before{
		border-width : calc( 70 * 100vw / 768 ) calc( 704 * 100vw / 768 ) 0 0;
		bottom : calc( 34 * 100vw / 768 );
	}
	#title:after{
		border-width : 0 100vw calc( 102 * 100vw / 768 ) 0;
	}
	#title h1{
		background-color : #eaf3c7;
		padding-top : calc( 42 * 100vw / 768 );
		padding-bottom : calc( ( 8 - 2.6 ) * 100vw / 768 );
		font-size : 2.6rem;
	}
	#title h1[data-en]:before{
		margin-bottom : calc( ( 35 - 2.6 ) + 100vw / 768 );
		font-size : 7rem;
	}
	#title h1:after{
		content : "";
		display : block;
		position : absolute;
		top : calc( 38 * 100vw / 768 );
		right : 0;
		background : url("../images/ui/bg/title_sp.png") 0 0 / contain no-repeat;
		width : calc( 320 * 100% / 768 );
		height : calc( 319 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#title{
		border-top-style : solid;
		border-top-color : #eaf3c7;
		border-top-width : 100px;
		padding-bottom : calc( 56px - 2.5px );
	}
	#title:after{
		border-width : 0 100vw 176px 0;
	}
	#title h1{
		padding-top : 21px;
		font-size : 2.5rem;
	}
	#title h1[data-en]:before{
		margin-bottom : calc( 24px - 2.5px );
		font-size : 5rem;
	}
}

@media screen and (min-width: 1000px) and (max-width:1439px){
	#title:before{
		padding-top : calc( 54 * 100vw / 1440 );
		border-width : calc( 126 * 100vw / 1440 ) calc( 1332 * 100vw / 1440 ) 0 0;
	}
}

@media print,screen and (min-width: 1440px){
	#title:before{
		bottom : 54px;
		border-width : 126px 1332px 0 0;
	}
}

/*--------------------------------------------
COLUMN
---------------------------------------------*/

@media screen and (max-width: 999px){
	#column{
		padding-bottom : calc( 91 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#column{
		padding-bottom : 84px;
	}
}

/*--------------------------------------------
FOOTER
---------------------------------------------*/

#footer{
	background-color : #EEE;
	color : #959595;
}

#footer a{
	color : #959595;
}

@media screen and (max-width: 999px){
	#footer{
		position : relative;
	}
	#footer #toTop{
		position : absolute;
		top : 0;
		right : 0;
		display : block;
	}
	#footer #toTop img{
		height : calc( 80 * 100vw / 768 );
	}
	#footer .wrap{
		padding-top : calc( ( 37 - 2.6 ) * 100vw / 768 );
		padding-bottom : calc( ( 90 - 2.6 ) * 100vw / 768 );
	}
	#footer p{
		font-weight : 500;
		font-size : 2.6rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 1000px){
	#footer .wrap{
		padding-top : 65px;
		padding-bottom : calc( 64px - 4px );
	}
	#footer ul{
		display : flex;
		justify-content : center;
	}
	#footer ul li{
		display : flex;
		align-items : baseline;
	}
	#footer ul li + li:before{
		content : "　｜　";
	}
	#footer ul a{
		letter-spacing : .15em;
		font-size : 1.6rem;
		white-space : nowrap;
	}
	#footer p{
		text-align : center;
		letter-spacing : .15em;
		text-indent : .15em;
		margin-top : calc( 95px - 4px );
		font-size : 1.6rem;
		line-height : 1.5;
	}
}