@charset "UTF-8";

/* --------------------------------------------
COMPANY
--------------------------------------------- */
#company{
	position : relative;
	z-index : 0;
}
#company::before , #company::after{
	position : absolute;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green03 );
}
#company::before{
	top : 0;
}
@media screen and ( width <= 750px ){
	#company{
		padding-bottom : calc( 358 var( --remBase ) );
	}
	#company::before{
		left : calc( 208 var( --viewportBase ) );
		width : calc( 336 var( --viewportBase ) );
		height : calc( 168 var( --remBase ) );
	}
	#company::after{
		bottom : calc( 160 var( --remBase ) );
		left : 0;
		width : calc( 272 var( --viewportBase ) );
		height : calc( 272 var( --remBase ) );
	}
	#company p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 2;
	}
	#company .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#company > picture{
		position : absolute;
		bottom : calc( 80 var( --remBase ) );
		right : 0;
		width : auto;
	}
	#company > picture img{
		height : calc( 238 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#company{
		display : grid;
		grid-template-rows : auto auto 1fr;
		grid-template-columns : calc( 920 var( --percentBase ) ) calc( 760 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 46 var( --percentBase ) );
		justify-content : start;
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 160 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#company::before{
		left : calc( 1690 var( --viewportBase ) );
		width : calc( 711 var( --viewportBase ) );
		height : calc( 363 var( --remBase ) );
	}
	#company::after{
		top : calc( 440 var( --remBase ) );
		left : calc( 770 var( --viewportBase ) );
		width : calc( 710 var( --viewportBase ) );
		height : calc( 363 var( --remBase ) );
	}
	#company > picture{
		grid-row : 1/-1;
		grid-column : 1;
	}
	#company > picture img{
		height : calc( 684 var( --remBase ) );
	}
	#company .title01{
		grid-row : 1;
		grid-column : 2;
		margin-top : calc( 173 var( --remBase ) );
	}
	#company p{
		grid-row : 2;
		grid-column : 2;
		font-size : 1.8rem;
		line-height : 2;
	}
	#company .link01{
		grid-row : 3;
		grid-column : 2;
	}
}

/* --------------------------------------------
SERVICE
--------------------------------------------- */
#service{
	position : relative;
	z-index : 0;
}
#service::before , #service::after{
	position : absolute;
	top : 0;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green03 );
}
#service a{
	width : 100%;
	background-repeat : no-repeat;
}
@media screen and ( width <= 750px ){
	#service{
		padding-top : calc( 22 var( --remBase ) );
		padding-bottom : calc( 614 var( --remBase ) );
	}
	#service::before{
		left : 0;
		width : calc( 272 var( --percentBase ) );
		height : calc( 544 var( --remBase ) );
	}
	#service p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service ul{
		position : absolute;
		bottom : calc( 80 var( --remBase ) );
		right : 0;
		width : calc( 384 var( --viewportBase ) );
	}
	#service li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service a{
		position : relative;
		display : block;
		height : calc( 236 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 384 );
		padding-top : calc( 24 var( --remBase ) );
		font-size : 2.6rem;
		font-weight : 500;
		line-height : 1.3;
		background-position : right bottom;
		background-size : auto calc( 128.5 var( --remBase ) );
	}
	#service a::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		height : calc( 178 var( --remBase ) );
		content : "";
	}
	#service .link02{
		margin-top : calc( 8 var( --remBase ) );
		margin-left : auto;
	}
	#service li:nth-child( 1 ) a{
		background-image : url( "../images/home/service/link01_sp.webp" );
	}
	#service li:nth-child( 1 ) a::before{
		background-color : #86edf9;
	}
	#service li:nth-child( 2 ) a{
		background-image : url( "../images/home/service/link02_sp.webp" );
	}
	#service li:nth-child( 2 ) a::before{
		background-color : #fcd96a;
	}
}
@media screen and ( width > 750px ) , print{
	#service{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 598 var( --percentBase ) ) calc( 63 var( --percentBase ) ) calc( 1016 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : start;
		padding-top : calc( 84 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#service::before{
		left : calc( 160 var( --percentBase ) );
		width : calc( 960 var( --percentBase ) );
		height : calc( 515 var( --remBase ) );
	}
	#service .title02{
		grid-row : 1;
		grid-column : 2;
	}
	#service p{
		grid-row : 2;
		grid-column : 2;
	}
	#service ul{
		grid-row : 1/-1;
		grid-column : 4;
		padding-top : calc( 85 var( --remBase ) );
	}
	#service li{
		width : calc( 960 * 100% / 1016 );
		height : calc( 191 var( --remBase ) );
	}
	#service li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service a{
		display : grid;
		grid-template-columns : auto auto;
		align-items : end;
		justify-content : start;
		height : 100%;
		padding-inline : calc( 24 * 100% / 960 );
		padding-bottom : calc( 24 var( --remBase ) );
		font-size : 4rem;
		letter-spacing : .05em;
		background-position : 0 0;
		background-size : contain;
	}
	#service li:nth-child( 1 ){
		margin-left : auto;
	}
	#service li:nth-child( 1 ) a{
		background-image : url( "../images/home/service/link01_pc.webp" );
	}
	#service li:nth-child( 2 ) a{
		background-image : url( "../images/home/service/link02_pc.webp" );
	}
}

/* --------------------------------------------
SECTIONS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#sections{
		padding-bottom : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#sections{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 900 var( --percentBase ) ) calc( 880 var( --percentBase ) );
		row-gap : calc( 54 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 156 var( --remBase ) );
	}
}
#case{
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : 100% auto;
}
#case a{
	display : block;
	background-color : white;
}
#case h2{
	font-weight : 500;
	line-height : 1.3;
}
#case p{
	margin-top : calc( 16 var( --remBase ) );
	line-height : 2;
}
#case .link03{
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#case{
		padding-top : calc( 165 var( --remBase ) );
		padding-bottom : calc( 103 var( --remBase ) );
		background-image : url( "../images/home/case/bg_sp.webp" );
	}
	#case a{
		width : calc( 352 var( --viewportBase ) );
		padding-inline : calc( 16 var( --viewportBase ) );
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 23 var( --remBase ) );
	}
	#case h2{
		font-size : 2.6rem;
	}
	#case p{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#case{
		grid-row : 1;
		grid-column : 2;
		row-gap : calc( 55 var( --remBase ) );
		padding-top : calc( 190 var( --remBase ) );
		margin-top : calc( 166 var( --remBase ) );
		background-image : url( "../images/home/case/bg_pc.webp" );
	}
	#case a{
		width : calc( 505 * 100% / 880 );
		padding-block : calc( 16 var( --remBase ) );
		padding-left : calc( 10 * 100% / 880 );
	}
	#case h2{
		font-size : 3.4rem;
	}
	#case p{
		font-size : 1.6rem;
	}
}
#news li{
	border-bottom : solid 1px #d9d9d9;
}
#news li a{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
	align-items : start;
	justify-content : start;
}
#news time{
	grid-row : 1;
	grid-column : 1;
	font-family : "Afacad Flux";
	line-height : 1;
}
#news .category{
	display : grid;
	grid-row : 1;
	grid-column : 2;
	place-items : center;
	color : white;
}
#news h3{
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	#news{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#news ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#news li{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#news li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#news li a{
		grid-template-columns : calc( 100 var( --percentBase ) ) auto 1fr;
	}
	#news time{
		font-size : 1.8rem;
		line-height : 1.3;
	}
	#news .category{
		height : calc( 26 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#news h3{
		grid-row : 2;
		grid-column : 1/-1;
		font-size : 2rem;
	}
	#news .excerpt{
		grid-row : 3;
		grid-column : 1/-1;
	}
	#news .more01{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#news{
		grid-row : 1/-1;
		grid-column : 1;
	}
	#news ul{
		margin-top : calc( 32 var( --remBase ) );
	}
	#news li{
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#news li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#news li a{
		grid-template-columns : repeat( 2 , calc( 120 * 100% / 900 ) ) 1fr;
		column-gap : calc( 16 * 100% / 900 );
	}
	#news time{
		margin-top : .15lh;
		font-size : 2.4rem;
	}
	#news .category{
		height : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
	}
	#news h3{
		grid-row : 1;
		grid-column : 3;
		font-size : 2.4rem;
	}
	#news .excerpt{
		grid-row : 2;
		grid-column : 1/-1;
	}
	#news .more01{
		margin-top : calc( 32 var( --remBase ) );
	}
}
#blog li + li{
	margin-top : calc( 16 var( --remBase ) );
}
#blog li a{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
}
#blog picture{
	grid-row : 1/-1;
	grid-column : 1;
	width : 100%;
}
#blog picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#blog time{
	grid-row : 2;
	font-family : "Afacad Flux";
}
#blog .category{
	display : grid;
	grid-row : 2;
	place-items : center;
	height : 100%;
	color : white;
}
#blog h3{
	grid-row : 3;
	font-size : 2rem;
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	#blog ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#blog li:not( :last-child ){
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#blog li a{
		grid-template-rows : 1fr calc( 26 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 112 var( --percentBase ) ) calc( 8 var( --percentBase ) ) calc( 100 var( --percentBase ) ) auto 1fr;
	}
	#blog picture{
		height : calc( 112 var( --remBase ) );
	}
	#blog time{
		grid-column : 3;
		margin-top : calc( 1.3 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.3;
	}
	#blog .category{
		grid-column : 4;
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#blog h3{
		grid-column : 3/-1;
	}
	#blog .more01{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#blog{
		grid-row : 2;
		grid-column : 2;
	}
	#blog ul{
		margin-top : calc( 18 var( --remBase ) );
	}
	#blog li{
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#blog li a{
		grid-template-rows : 1fr calc( 32 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 180 * 100% / 880 ) repeat( 2 , calc( 120 * 100% / 880 ) ) 1fr;
		column-gap : calc( 16 * 100% / 880 );
	}
	#blog picture{
		height : calc( 138 var( --remBase ) );
	}
	#blog time{
		grid-column : 2;
		font-size : 2.4rem;
	}
	#blog .category{
		grid-column : 3;
		width : 100%;
		font-size : 1.6rem;
	}
	#blog h3{
		grid-column : 2/-1;
	}
	#blog .more01{
		margin-top : calc( 16 var( --remBase ) );
	}
}