@charset "UTF-8";

:root{
	--body : #000;
	--link : #000;
	--primary : #000;
}

/*--------------------------------------------
LOADER
---------------------------------------------*/

#loader{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 20;
	background-color : #f2f1ee;
	width : 100vw;
	height : 100vh;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	animation : logo03 1s linear 5s alternate forwards;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : opacity;
}

#loader svg{
	width : auto;
}

#loader svg #m , #loader svg #i , #loader svg #c{
	fill : #f2f1ee;
	stroke-dasharray : 1000;
	stroke-dashoffset : 1000;
	stroke : #9e937d;
	animation : logo01 5s linear alternate forwards;
	stroke-width : 1;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : fill , stroke-dashoffset , stroke;
}

#loader svg #texts{
	opacity : 0;
	animation : logo02 5s linear alternate forwards;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : opacity;
}

#loader svg #texts path{
	fill : #9e937d;
}

@media screen and (max-width: 750px){
	#loader svg{
		height : calc( 198 * 100vh / 650 );
	}
}

@media print,screen and (min-width: 751px){
	#loader svg{
		height : calc( 300 * 100vh / 900 );
	}
}

@keyframes logo01{
	0{
		stroke-dashoffset : 1700;
		fill : #f2f1ee;
		stroke : #9e937d;
	}
	80%{
		stroke-dashoffset : 0;
		fill : #f2f1ee;
		stroke : #9e937d;
	}
	100%{
		stroke-dashoffset : 0;
		fill : #9d937c;
		stroke : #f2f1ee;
	}
}

@keyframes logo02{
	0{
		opacity : 0;
	}
	80%{
		opacity : 0;
	}
	100%{
		opacity : 1;
	}
}

@keyframes logo03{
	0{
		opacity : 1;
	}
	100%{
		opacity : 0;
	}
}

@media (-ms-high-contrast:none){
	#loader #m , #loader #i , #loader #c{
		animation : none!important;
		stroke-dashoffset : 0!important;
		stroke-width : 0!important;
		stroke : #f2f1ee!important;
		fill : #9d937c!important;
	}
}

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

html{
	height : -webkit-fill-available;
}

@media screen and (max-width: 750px){
	html{
		font-size : calc( 10 * 100vw / 375 );
		scroll-padding-top : calc( 60 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	html{
		font-size : 10px;
		scroll-padding-top : 160px;
	}
}

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

body{
	min-height : 100vh;
	min-height : -webkit-fill-available;
}

@media screen and (max-width: 750px){
	body{
		background-color : #f2f1ee;
		font-size : 1.2rem;
		min-height : 100vh;
		padding-top : calc( 60 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	body{
		background-color : #f1f0ed;
		padding-top : 160px;
		font-size : 1.6rem;
		min-width : 1200px;
	}
}

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

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

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

@media print,screen and (min-width: 751px){
	.wrap{
		padding-left : calc( ( 100% - 1160px ) / 2 );
		padding-right : calc( ( 100% - 1160px ) / 2 );
	}
}

@media print,screen and (min-width: 751px) and (-ms-high-contrast:none){
	.wrap{
		padding-left : calc( ( 100% - 1160.01px ) / 2 );
		padding-right : calc( ( 100% - 1160.01px ) / 2 );
	}
}

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

@media screen and (max-width: 750px){
	.wrap02{
		padding-left : calc( 20 * 100% / 375 );
		padding-right : calc( 20 * 100% / 375 );
	}
}

@media print,screen and (min-width: 751px){
	.wrap02{
		padding-left : calc( ( 100% - 1166px ) / 2 );
		padding-right : calc( ( 100% - 1166px ) / 2 );
	}
}

@media print,screen and (min-width: 751px) and (-ms-high-contrast:none){
	.wrap02{
		padding-left : calc( ( 100% - 1166.01px ) / 2 );
		padding-right : calc( ( 100% - 1166.01px ) / 2 );
	}
}

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

#header{
	background-color : #fff;
}

@media screen and (max-width: 750px){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
		height : calc( 60 * 100vw / 375 );
		padding-left : calc( 16 * 100% / 375 );
		padding-right : calc( 16 * 100% / 375 );
	}
	#header .logo{
		display : block;
		height : 100%;
		padding-top : calc( 20 * 100vw / 375 );
	}
	#header .logo img{
		height : calc( 22 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#header{
		transition : transform .5s ease-in;
		width : 100%;
		z-index : 5;
		position : absolute;
		top : 0;
		left : 0;
		display : flex;
		align-items : flex-start;
		height : 160px;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : none;
	}
	#header .logo{
		display : block;
		height : 100%;
		padding-top : 37px;
	}
	#header .logo img{
		height : 89px;
	}
}

@media print,screen and (min-width: 751px){
	body:not(.is-scroll) #header{
		transform : translateY(0);
	}
	body.is-scroll #header{
		position : fixed;
		transform : translateY(-100%);
		opacity : 0;
	}
	body.is-scroll.is-open #header{
		transform : translateY(0);
		height : 130px;
		opacity : 1;
	}
	body.is-scroll.is-open #header .logo picture{
		background : url("../images/logo.svg") 0 0 / contain no-repeat;
		width : 90px;
		height : 31px;
	}
	body.is-scroll.is-open #header .logo img{
		display : none;
	}
}

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

body.is-open{
	overflow : hidden;
}

body.is-open #nav{
	max-height : 100vh;
}

body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
	transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
}

body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
	transform : rotate(-45deg);
}

body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
	transform : rotate(45deg);
}

body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
	transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
}

body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
	transform : translateY( 10px ) scale(0);
	opacity : 0;
}

body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
	transform : translateY( -10px ) scale(0);
	opacity : 0;
}

#menuBtn{
	top : 0;
	right : 0;
	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{
	position : fixed;
}

#menuBtn span span{
	background-color : #9e937d;
}

@media screen and (max-width: 750px){
	#menuBtn{
		width : calc( 60 * 100% / 375 );
		height : calc( 60 * 100vw / 375 );
		padding-left : calc( 20 * 100% / 375 );
		padding-right : calc( 20 * 100% / 375 );
		padding-top : calc( 19 * 100vw / 375 );
		padding-bottom : calc( 19 * 100vw / 375 );
	}
	#menuBtn span span{
		height : calc( 2 * 100vw / 375 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 10 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#menuBtn{
		transition : transform .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : transform;
		background-color : #fff;
		width : 55px;
		height : 55px;
		padding-left : 14.5px;
		padding-right : 14.5px;
		padding-top : 15.5px;
		padding-bottom : 15.5px;
	}
	#menuBtn span span{
		height : 2px;
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : 11px;
	}
}

@media print,screen and (min-width: 751px){
	body:not(.is-scroll) #menuBtn{
		transform : translateY(-100%);
	}
	body.is-scroll #menuBtn{
		transform : translateY(0);
	}
}

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

@media screen and (max-width: 750px){
	#nav{
		position : fixed;
		transform : translateX( 0 );
		z-index : 11;
		transition : transform .5s ease-in;
		overflow-y : auto;
		max-height : 100vh;
		top : 0;
		left : 100%;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	body.is-open #nav{
		transform : translateX( -100% );
	}
}

@media screen and (max-width: 750px){
	#nav{
		width : 100%;
		background-color : #fff;
	}
	#nav .scroll{
		height : 100vh;
		padding-top : calc( 70 * 100vw / 375 );
		padding-bottom : calc( 48 * 100vw / 375 );
		padding-left : calc( 52.5 * 100% / 375 );
		padding-right : calc( 52.5 * 100% / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#nav{
		width : 615px;
		margin-left : 202px;
	}
}

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

#navGlobal > li > a > span:nth-of-type(1){
	font-family : "Jost", sans-serif;
}

@media screen and (max-width: 750px){
	#navGlobal a{
		color : #9e937d;
		display : block;
	}
	#navGlobal > li{
		border-bottom : 1px solid #9e937d;
		padding-bottom : calc( 22 * 100vw / 375 );
	}
	#navGlobal > li + li{
		margin-top : calc( 22 * 100vw / 375 );
	}
	#navGlobal > li > a > span:nth-of-type(1){
		font-weight : 700;
		font-size : 2rem;
		letter-spacing : .12em;
		margin-right : calc( 14 * 100% / 270 );
	}
	#navGlobal > li > a > span:nth-of-type(2){
		font-size : 500px;
		letter-spacing : .15em;
		font-size : 1.2rem;
	}
	#navGlobal ul{
		margin-top : calc( 12 * 100vw / 375 );
	}
	#navGlobal li li + li{
		margin-top : calc( 17 * 100vw / 375 );
	}
	#navGlobal li li a{
		display : flex;
		align-items : flex-start;
		font-size : 1.45rem;
		font-weight : 500;
		letter-spacing : .15em;
	}
	#navGlobal li li a:before{
		content : "";
		display : block;
		background : url("../images/ui/parts/triangle_right_blue.svg") 0 0 / contain no-repeat;
		width : calc( 7 * 100% / 270 );
		height : calc( 6 * 100vw / 375 );
		margin-right : calc( 6 * 100% / 270 );
		flex-shrink : 0;
		margin-top : calc( 4.25 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#navGlobal{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		position : relative;
	}
	#navGlobal > li > a{
		display : block;
		transition : color .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : color;
		position : relative;
	}
	#navGlobal > li > a > span{
		transition : opacity .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : opacity;
		position : relative;
		letter-spacing : .015em;
		padding-top : 52px;
		padding-bottom : 25px;
		display : block;
	}
	#navGlobal > li > a > span:nth-of-type(1){
		font-size : 1.6rem;
		font-weight : 500;
		color : #9e937d;
	}
	#navGlobal > li > a > span:nth-of-type(2){
		opacity : 0;
		position : absolute;
		top : 0;
		font-size : 1.4rem;
		white-space : nowrap;
		left : 50%;
		transform : translateX(-50%);
		color : #36bbcc;
	}
	#navGlobal > li > a:hover > span:nth-of-type(1){
		opacity : 0;
	}
	#navGlobal > li > a:hover > span:nth-of-type(2){
		opacity : 1;
	}
	#navGlobal > li > a.is-active > span:nth-of-type(1) , #navGlobal > li > a:hover > span:nth-of-type(1){
		color : #36bbcc;
	}
	#navGlobal > li > a:not(.is-active) + ul{
		display : none;
	}
	#navGlobal > li > a.is-active + ul{
		display : flex;
		align-items : flex-start;
		position : absolute;
		width : 100%;
		left : 0;
		top : 100%;
		border-top : 1px solid #9e937d;
		padding-top : 20px;
	}
	#navGlobal > li > a.is-active + ul li a{
		font-size : 1.3rem;
		letter-spacing : .015em;
		transition : color .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : color;
		color : #9e937d;
		font-weight : 500;
	}
	#navGlobal > li > a.is-active + ul li a.is-active , #navGlobal > li > a.is-active + ul li a:hover{
		color : #36bbcc;
	}
	#navGlobal > li:nth-child(1) ul{
		justify-content : space-between;
	}
	#navGlobal > li:nth-child(2) ul{
		justify-content : space-around;
	}
}

@media print,screen and (min-width: 751px){
	body.is-scroll.is-open #navGlobal ul{
		display : none;
	}
}

/*--------------------------------------------
MAIN
---------------------------------------------*/

#main{
	overflow-x : hidden;
}

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

#title01{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : #f2f1ee;
}

#title01 span{
	display : block;
	font-weight : 500;
	color : #9e937d;
}

#title01 span:nth-of-type(1){
	font-family : "Jost", sans-serif;
	text-align : center;
	letter-spacing : .16em;
	text-indent : .16em;
}

#title01 span:nth-of-type(2){
	text-align : center;
	letter-spacing : .15em;
	text-indent : .15em;
}

@media screen and (max-width: 750px){
	#title01{
		height : calc( 130 * 100vw / 375 );
	}
	#title01 span:nth-of-type(1){
		font-size : 2.8rem;
	}
	#title01 span:nth-of-type(2){
		font-size : 1.2rem;
		margin-top : calc( ( -5 + 6.5 + 3 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#title01{
		height : 180px;
	}
	#title01 span:nth-of-type(1){
		font-size : 3rem;
	}
	#title01 span:nth-of-type(2){
		font-size : 1.2rem;
		margin-top : calc( 6.5px + 3px );
	}
}

#hgroup01{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : #f2f1ee;
}

#hgroup01 p{
	color : #36bbcc;
	border-bottom : 1px solid currentColor;
	text-align : center;
	letter-spacing : .06em;
	text-indent : .06em;
}

#hgroup01 p span{
	line-height : 1;
	text-align : center;
	letter-spacing : .06em;
	text-indent : .06em;
}

#hgroup01 h1{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	text-align : center;
}

#hgroup01 h1 span{
	text-align : center;
	color : #736357;
}

#hgroup01 h1 span:nth-of-type(1){
	font-weight : 500;
	text-align : center;
	letter-spacing : .16em;
	text-indent : .16em;
}

#hgroup01 h1 span:nth-of-type(2){
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
}

@media screen and (max-width: 750px){
	#hgroup01{
		height : calc( 130 * 100vw / 375 );
	}
	#hgroup01 p{
		font-size : 1.3rem;
		line-height : 1.4615;
	}
	#hgroup01 h1{
		margin-top : calc( ( 14 + 5.5 ) * 100vw / 375 );
	}
	#hgroup01 h1 span:nth-of-type(1){
		font-size : 2.3rem;
	}
	#hgroup01 h1 span:nth-of-type(2){
		font-size : 1.3rem;
		margin-top : calc( ( 5.5 + 3 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#hgroup01{
		height : 180px;
	}
	#hgroup01 p{
		font-size : 1.4rem;
		line-height : 1.9286;
	}
	#hgroup01 p span{
		font-size : 1.8rem;
	}
	#hgroup01 h1{
		margin-top : calc( 9px + 5.5px );
	}
	#hgroup01 h1 span:nth-of-type(1){
		font-size : 2.5rem;
	}
	#hgroup01 h1 span:nth-of-type(2){
		font-size : 1.5rem;
		margin-top : calc( 4px + 5.5px + 3.5px );
	}
}

/*--------------------------------------------
WORKS
---------------------------------------------*/

#works01 a{
	background-color : #fff;
}

#works01 p:nth-of-type(1){
	display : inline-flex;
	align-items : flex-end;
	font-weight : 500;
	letter-spacing : .06em;
	color : #36bbcc;
	border-bottom : 1px solid currentColor;
}

#works01 h2{
	font-weight : 500;
	letter-spacing : .1em;
	color : #9e937d;
}

@media screen and (max-width: 750px){
	#works01 picture{
		width : 100%;
	}
	#works01 a{
		display : block;
		padding-top : calc( ( 36 + 4.75 ) * 100vw / 375 );
		padding-bottom : calc( ( 40 - 5 ) * 100vw / 375 );
		padding-left : calc( 32 * 100% / 375 );
		padding-right : calc( 32 * 100% / 375 );
	}
	#works01 > li:nth-child(odd) a{
		right : 0;
	}
	#works01 p:nth-of-type(1){
		font-size : 1.4rem;
		padding-bottom : calc( 6.75 * 100vw / 375 );
	}
	#works01 p:nth-of-type(1) > span{
		font-size : 1.8rem;
		margin-left : calc( 4 * 100vw / 375 );
	}
	#works01 h2{
		margin-top : calc( ( 13.4 + 4.5 ) * 100vw / 375 );
		font-size : 1.8rem;
	}
	#works01 p:nth-of-type(2){
		font-size : 1.35rem;
		line-height : 1.9259;
		margin-top : calc( ( 17 + 4.5 - 6.25 ) * 100vw / 375 );
	}
	#works01 a > span{
		margin-top : calc( ( 34.5 - 6.25 - 5 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#works01{
		padding-bottom : 114px;
	}
	#works01 > li{
		position : relative;
	}
	#works01 > li + li{
		margin-top : 114px;
	}
	#works01 picture{
		width : calc( 100% - 300px );
		flex-shrink : 0;
	}
	#works01 a{
		flex-shrink : 0;
		width : 470px;
		height : 430px;
		position : absolute;
		bottom : -45px;
		padding-top : calc( 40px + 4.5px );
		padding-left : 70px;
		padding-right : 70px;
	}
	#works01 > li:nth-child(odd) a{
		right : 0;
	}
	#works01 > li:nth-child(even) picture{
		margin-left : auto;
	}
	#works01 > li:nth-child(even) a{
		left : 0;
	}
	#works01 p:nth-of-type(1){
		font-size : 1.4rem;
		padding-bottom : 6.75px;
	}
	#works01 p:nth-of-type(1) > span{
		font-size : 1.8rem;
		margin-left : 4px;
	}
	#works01 h2{
		margin-top : calc( 9px + 4.5px + 4.5px );
		font-size : 2rem;
	}
	#works01 p:nth-of-type(2){
		font-size : 1.4rem;
		line-height : 2;
		margin-top : calc( 28px - 7px );
		width : 330px;
	}
	#works01 a > span{
		margin-top : calc( 19px - 7px );
		margin-right : 14px;
	}
}

#otherWorks h2{
	border-bottom : 1px solid currentColor;
	color : #36bbcc;
	font-weight : 500;
	letter-spacing : .06em;
	font-family : "Jost", sans-serif;
}

#otherWorks .posts{
	display : flex;
	flex-wrap : wrap;
}

#otherWorks .posts .is-hide{
	display : none;
}

#otherWorks picture{
	overflow : hidden;
}

#otherWorks picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#otherWorks picture{
	width : 100%;
}

#otherWorks h3{
	font-weight : 500;
	letter-spacing : .1em;
	color : #9e937d;
}

@media screen and (max-width: 750px){
	#otherWorks{
		background-color : #f2f1ee;
		padding-top : calc( 41 * 100vw / 375 );
		padding-bottom : calc( ( 92 - 5.625 ) * 100vw / 375 );
		padding-left : calc( 22.5 * 100% / 375 );
		padding-right : calc( 22.5 * 100% / 375 );
	}
	#otherWorks .box h2{
		font-size : 1.9rem;
		line-height : 1.2632;
		display : table;
		margin-left : auto;
		margin-right : auto;
	}
	#otherWorks .posts{
		justify-content : space-between;
		margin-left : calc( -5 * 100% / 330 );
		margin-right : calc( -5 * 100% / 330 );
	}
	#otherWorks .posts > li{
		width : calc( 160 * 100% / 340 );
		margin-top : calc( ( 18.5 - 1 ) * 100vw / 375 );
	}
	#otherWorks h3{
		margin-top : calc( ( 4.5 - 1 ) * 100vw / 375 );
		font-size : 1.3rem;
		line-height : 1.1538;
		min-height : calc( 30 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#otherWorks{
		padding-top : calc( 100px - 3.25px );
		padding-bottom : calc( 92px - 6.125px );
	}
	#otherWorks .box{
		display : flex;
		align-items : flex-start;
	}
	#otherWorks .box h2{
		display : inline-block;
		font-size : 2.5rem;
		line-height : 1.26;
	}
	#otherWorks .posts{
		margin-left : -20px;
		margin-right : -20px;
	}
	#otherWorks .posts > li{
		width : 360px;
		margin-left : 20px;
		margin-right : 20px;
		margin-top : calc( 69px - 6.125px );
	}
	#otherWorks h3{
		margin-top : calc( 15px - 6.125px );
		font-size : 1.4rem;
		line-height : 1.875;
	}
}

/*--------------------------------------------
LAYOUT
---------------------------------------------*/

.layout01 h3 , .layout01 h4{
	letter-spacing : .04em;
	font-weight : 500;
}

.layout01 .box + .box{
	border-top : 1px dashed #9e937d;
}

@media screen and (max-width: 750px){
	.layout01{
		padding-left : 0;
		padding-right : 0;
	}
	.layout01 .bg-white{
		padding-left : calc( 31.5 * 100% / 375 );
		padding-right : calc( 31.5 * 100% / 375 );
		padding-top : calc( ( 30 + 4.5 ) * 100vw / 375 );
		padding-bottom : calc( 32 * 100vw / 375 );
	}
	.layout01 .box{
		margin-top : calc( ( 30 + 3 ) * 100vw / 375 );
	}
	.layout01 .box > div:not(.pics){
		margin-top : calc( ( 20 + 4 ) * 100vw / 375 );
	}
	.layout01 h3 , .layout01 h4{
		font-size : 1.6rem;
	}
	.layout01 h3 + p , .layout01 h4 + p{
		margin-top : calc( ( 6 + 4 ) * 100vw / 375 );
	}
	.layout01 .box + .box{
		margin-top : calc( ( 35 ) * 100vw / 375 );
		padding-top : calc( 30 * 100vw / 375 );
	}
	.layout01 picture + p:not(.text01) , .layout01 ul + p{
		text-align : right;
		font-size : 1.2rem;
		margin-top : calc( ( 4 + 3 ) * 100vw / 375 );
	}
	.layout01 .pics03 li + li{
		margin-top : calc( 10 * 100vw / 375 );
	}
	.layout01 .pics04 li + li{
		margin-top : calc( ( 7 + 3 ) * 100vw / 375 );
	}
	.layout01 .pics02 li + li{
		margin-top : calc( 5 * 100vw / 375 );
	}
	.layout01 .box > p{
		margin-top : calc( 21 * 100vw / 375 );
	}
	.layout01 .text01 + h3{
		margin-top : calc( ( 20 + 4 - 6.25 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	.layout01 .bg-white{
		padding-top : calc( 50px + 4.5px );
		padding-bottom : 60px;
	}
	.layout01 .box{
		margin-top : calc( 38px + 3.5px );
		display : flex;
		justify-content : space-between;
		width : 1040px;
		margin-left : auto;
		margin-right : auto;
	}
	.layout01 .box.pc-ac{
		align-items : center;
	}
	.layout01 .box:not(.pc-ac) > div:not(.pics){
		padding-top : 4px;
	}
	.layout01 .box > picture{
		width : 560px;
		text-align : center;
		flex-shrink : 0;
	}
	.layout01 .pics{
		width : 560px;
		flex-shrink : 0;
	}
	.layout01 .box > div:not(.pics) , .layout01 .box > p{
		width : 434px;
	}
	.layout01 h3 , .layout01 h4{
		font-size : 1.6rem;
	}
	.layout01 h3 + p , .layout01 h4 + p{
		margin-top : calc( 17px + 4px - 7px );
	}
	.layout01 .box + .box{
		margin-top : 52px;
		padding-top : 60px;
	}
	.layout01 picture + p:not(.text01) , .layout01 ul + p{
		font-size : 1.2rem;
		margin-top : calc( 2px + 3px );
	}
	.layout01 .box > p{
		padding-top : 29px;
	}
	.layout01 .text01 + h3{
		margin-top : calc( 23px + 4px - 7px );
	}
	.layout01 .pics03 ul{
		display : flex;
		justify-content : space-between;
		flex-wrap : wrap;
	}
	.layout01 .pics03 ul li:first-child{
		width : 100%;
		margin-bottom : 14px;
	}
	.layout01 .pics03 ul li:nth-child(2){
		width : 274px;
	}
	.layout01 .pics03 ul li:nth-child(3){
		width : 273px;
	}
	.layout01 .pics04 ul{
		display : flex;
		flex-wrap : wrap;
		justify-content : space-between;
	}
	.layout01 .pics04 li{
		width : 274px;
	}
	.layout01 .pics04 li:nth-child(n+3){
		margin-top : calc( 5px + 3px );
	}
	.layout01 .pics02 li + li{
		margin-top : 3px;
	}
}

/*--------------------------------------------
LINK WORKS
---------------------------------------------*/

#link-works a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}

@media screen and (max-width: 750px){
	#link-works a{
		width : 100%;
		height : calc( 50 * 100vw / 375 );
		text-align : center;
		letter-spacing : .16em;
		text-indent : .16em;
		font-weight : 700;
		font-size : 1.4rem;
		color : #fff;
		background : url("../images/ui/parts/arrow02_white.svg") right calc( 25 * 100vw / 375 ) top 50% / auto calc( 17 * 100vw / 375 ) no-repeat #36bbcc;
	}
	#link-works li + li{
		margin-top : calc( 5 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#link-works{
		background-color : #9adde5;
		padding-top : 53px;
		padding-bottom : 53px;
	}
	#link-works a{
		color : #36bbcc;
		font-weight : 700;
		text-align : center;
		letter-spacing : .31em;
		text-indent : .31em;
		font-size : 1.6rem;
		height : 64px;
		border-radius : 31px;
		background : url("../images/ui/parts/arrow01_gray.svg") right 29px top 24px / auto 9px no-repeat #fff;
	}
	#link-works > a{
		width : 300px;
		margin-left : auto;
		margin-right : auto;
	}
	#link-works ul{
		display : flex;
		justify-content : center;
	}
	#link-works ul li + li{
		margin-left : 20px;
	}
	#link-works ul a{
		width : 380px;
	}
}

/*--------------------------------------------
LINK CONTACT
---------------------------------------------*/

#link-contact a{
	color : #fff;
}

#link-contact h3{
	font-weight : 700;
	text-align : center;
	letter-spacing : .31em;
	text-indent : .31em;
}

#link-contact p{
	text-align : center;
	letter-spacing : .14em;
	text-indent : .14em;
	font-weight : 500;
}

@media screen and (max-width: 750px){
	#link-contact{
		margin-top : calc( 5 * 100vw / 375 );
	}
	#link-contact a{
		display : block;
		height : calc( 150 * 100vw / 375 );
		background : url("../images/ui/parts/arrow02_white.svg") right calc( 25 * 100vw / 375 ) top 50% / auto calc( 17 * 100vw / 375 ) no-repeat #9e937d;
		padding-top : calc( 39 * 100vw / 375 );
	}
	#link-contact h3{
		font-size : 1.4rem;
	}
	#link-contact p{
		margin-top : calc( ( 16 - 5.75 ) * 100vw / 375 );
		font-size : 1.4rem;
		line-height : 1.8214;
	}
}

@media print,screen and (min-width: 1080px){
	#link-contact{
		background-color : #d8d4cb;
		padding-top : 54px;
		padding-bottom : 54px;
	}
	#link-contact a{
		display : block;
		width : 560px;
		height : 192px;
		margin-left : auto;
		margin-right : auto;
		background : url("../images/ui/parts/arrow01_white.svg") right 159px top 50px / auto 9px no-repeat #9e937d;
		padding-top : 51px;
	}
	#link-contact h3{
		font-size : 1.6rem;
	}
	#link-contact p{
		margin-top : calc( 32px - 5.75px );
		font-size : 1.4rem;
		line-height : 1.8214;
	}
}

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

#footer .logo{
	display : block;
}

#footer a{
	color : #9e937d;
	display : block;
}

#footer .links > li > ul > li > a{
	font-weight : 700;
	letter-spacing : .15em;
	font-family : "Jost", sans-serif;
}

#footer li li li a{
	font-weight : 500;
	letter-spacing : .15em;
}

#footer p{
	font-weight : 500;
	letter-spacing : .15em;
	color : #9e937d;
}

@media screen and (max-width: 750px){
	#footer{
		padding-top : calc( 40 * 100vw / 375 );
		padding-bottom : calc( ( 17 + 3 - 1.2 ) * 100vw / 375 );
	}
	#footer .logo{
		text-align : center;
	}
	#footer .logo img{
		height : calc( 133 * 100vw / 375 );
	}
	#footer .links{
		margin-top : calc( ( 40 + 3.5 ) * 100vw / 375 );
		display : flex;
		flex-wrap : wrap;
	}
	#footer .links > li:nth-child(1){
		width : 100%;
	}
	#footer .links > li:nth-child(2){
		width : calc( 150 * 100% / 312 );
	}
	#footer .links > li:nth-child(3){
		width : calc( 162 * 100% / 312 );
	}
	#footer .links > li:nth-child(3) a{
		white-space : nowrap;
	}
	#footer .links > li + li{
		margin-top : calc( ( 40 + 3.25 + 3.5 ) * 100vw / 375 );
	}
	#footer .links > li > ul > li + li{
		margin-top : calc( ( 45 + 3.5 + 3.5 ) * 100vw / 375 );
	}
	#footer .links ul ul{
		margin-top : calc( ( 9 + 3.5 + 3.25 ) * 100vw / 375 );
	}
	#footer .links > li > ul > li > a{
		font-size : 1.6rem;
	}
	#footer .links li li li + li{
		margin-top : calc( ( 14 + 3.25 + 3.25 ) * 100vw / 375 );
	}
	#footer .links li li li a{
		font-size : 1.35rem;
	}
	#footer p{
		font-size : 1.2rem;
		line-height : 1.2;
		text-align : center;
		text-indent : .15em;
		margin-top : calc( ( 31 + 3.5 + 3 - 1.2 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#footer{
		padding-top : 56px;
		padding-bottom : calc( 56px - 1.2px );
	}
	#footer .box{
		display : flex;
		align-items : flex-start;
	}
	#footer .logo{
		flex-shrink : 0;
		margin-right : 141px;
	}
	#footer .logo img{
		height : 118px;
	}
	#footer .links{
		display : flex;
		align-items : flex-start;
	}
	#footer .links > li + li{
		margin-left : 110px;
	}
	#footer .links > li > ul > li + li{
		margin-top : calc( 20px + 3.5px + 3.5px );
	}
	#footer .links ul ul{
		margin-top : calc( 20px + 3.5px + 3px );
	}
	#footer .links > li > ul > li > a{
		font-size : 1.6rem;
	}
	#footer .links li li li + li{
		margin-top : calc( 10px + 3px + 3px );
	}
	#footer .links li li li a{
		font-size : 1.4rem;
	}
	#footer p{
		font-size : 1.2rem;
		line-height : 1.2;
		margin-top : calc( 23px + 3px + 3px - 1.2px );
	}
}