@charset "UTF-8";

/* --------------------------------------------
CONCEPT
--------------------------------------------- */
#concept{
	position : relative;
	overflow-x : clip;
}
#concept .trapezoid{
	z-index : 0;
	background-color : color-mix( in srgb , #d5d9e1 40% , transparent );
	filter : drop-shadow( 0 calc( 4 var( --remBase ) ) calc( 4 var( --remBase ) ) rgb( 0 0 0 / .25 ) );
}
#concept .img{
	position : absolute;
	z-index : 3;
}
#concept h2{
	position : relative;
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#concept{
		padding-bottom : calc( 317 var( --remBase ) );
		margin-top : calc( 39 var( --remBase ) );
	}
	#concept h2{
		font-size : 12rem;
	}
	#concept .title01{
		margin-top : calc( 7 var( --remBase ) );
	}
	#concept .text{
		margin-top : calc( 16 var( --remBase ) );
	}
	#concept .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#concept .trapezoid{
		bottom : 0;
		left : calc( 34 var( --viewportBase ) );
		z-index : 0;
		width : calc( 533 var( --viewportBase ) );
		height : calc( 284 var( --remBase ) );
		clip-path : polygon( calc( 64.4918 * 100% / 533 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#concept .parallelogram01{
		bottom : calc( 95 var( --remBase ) );
		left : calc( -2 var( --viewportBase ) );
		z-index : 1;
	}
	#concept .parallelogram01 img{
		height : calc( 171 var( --remBase ) );
	}
	#concept .parallelogram02{
		bottom : calc( 50 var( --remBase ) );
		left : calc( 10 var( --viewportBase ) );
		z-index : 2;
	}
	#concept .parallelogram02 img{
		height : calc( 198 var( --remBase ) );
	}
	#concept .img{
		bottom : calc( 16 var( --remBase ) );
		left : calc( 18 var( --viewportBase ) );
		z-index : 3;
	}
	#concept .img img{
		height : calc( 284 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#concept{
		min-height : calc( 573 var( --remBase ) );
		padding-top : calc( 174 var( --remBase ) );
		margin-top : calc( 85 var( --remBase ) );
	}
	#concept .trapezoid{
		top : calc( 37 var( --remBase ) );
		height : calc( 536 var( --remBase ) );
	}
	#concept .parallelogram02{
		top : calc( 235 var( --remBase ) );
		z-index : 1;
	}
	#concept .parallelogram02 img{
		height : calc( 242 var( --remBase ) );
	}
	#concept .parallelogram01{
		top : calc( 276 var( --remBase ) );
		z-index : 2;
	}
	#concept .parallelogram01 img{
		height : calc( 283 var( --remBase ) );
	}
	#concept .img{
		top : 0;
	}
	#concept .img img{
		height : calc( 536 var( --remBase ) );
	}
	#concept h2{
		position : absolute;
		top : calc( -81 var( --remBase ) );
		font-size : 18rem;
		line-height : 1.6;
	}
	#concept :is( p , .link01 ){
		margin-left : calc( 840 var( --percentBase ) );
	}
	#concept .text , #concept .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#concept .trapezoid{
		left : calc( -288 var( --viewportBase ) );
		width : calc( 1044 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 922.247 * 100% / 1044 ) 100% , 0% 100% );
	}
	#concept .parallelogram02{
		left : calc( 468 var( --viewportBase ) );
	}
	#concept .parallelogram01{
		left : calc( 372 var( --viewportBase ) );
	}
	#concept .img{
		left : calc( -83 var( --viewportBase ) );
	}
	#concept h2{
		margin-left : calc( 800 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#concept .trapezoid{
		left : 0;
		width : calc( 50% + 44px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 1044px - 922.247px ) ) 100% , 0% 100% );
	}
	#concept .parallelogram02{
		left : calc( 50% - 252px );
	}
	#concept .parallelogram01{
		left : calc( 50% - 348px );
	}
	#concept .img{
		left : calc( 50% - 793px );
	}
	#concept h2{
		left : calc( 50% + 80px );
	}
}
#service{
	position : relative;
	overflow-x : clip;
}
#service h2{
	font-weight : 400;
}
#service .img01 , #service .img02{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#service{
		padding-bottom : calc( 434 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#service .title01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#service .text{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service .trapezoid{
		bottom : 0;
		left : calc( -336 var( --viewportBase ) );
		z-index : 0;
		width : calc( 739 var( --viewportBase ) );
		height : calc( 380 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 652.817 * 100% / 739 ) 100% , 0% 100% );
		background-color : color-mix( in srgb , #d5d9e1 40% , transparent );
	}
	#service .img02{
		bottom : calc( 15.83 var( --remBase ) );
		left : 0;
		z-index : 1;
	}
	#service .img02 img{
		height : calc( 375.17 var( --remBase ) );
	}
	#service .img01{
		bottom : calc( 215.15 var( --remBase ) );
		left : calc( 115.58 var( --viewportBase ) );
		z-index : 4;
	}
	#service .img01 img{
		height : calc( 296.07 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#service{
		min-height : calc( 642 var( --remBase ) );
		padding-top : calc( 216 var( --remBase ) );
	}
	#service h2{
		position : absolute;
		top : 0;
		z-index : 1;
		font-size : 16rem;
		line-height : 1.8;
	}
	#service .title01{
		position : relative;
		z-index : 1;
	}
	#service .text{
		position : relative;
		z-index : 1;
		width : calc( 602 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#service .link01{
		position : relative;
		z-index : 1;
		margin-top : calc( 24 var( --remBase ) );
	}
	#service .trapezoid{
		top : calc( 127 var( --remBase ) );
		z-index : 0;
		height : calc( 497 var( --remBase ) );
		background-color : white;
	}
	#service .img02{
		top : calc( 114 var( --remBase ) );
		z-index : 1;
	}
	#service .img02 img{
		height : calc( 497 var( --remBase ) );
	}
	#service .parallelogram01{
		top : calc( 308 var( --remBase ) );
		z-index : 2;
	}
	#service .parallelogram01 img{
		height : calc( 283 var( --remBase ) );
	}
	#service .parallelogram02{
		top : calc( 400 var( --remBase ) );
		z-index : 3;
	}
	#service .parallelogram02 img{
		height : calc( 242 var( --remBase ) );
	}
	#service .img01{
		top : calc( 44 var( --remBase ) );
		z-index : 4;
	}
	#service .img01 img{
		height : calc( 546.74 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#service h2{
		left : calc( 12 var( --viewportBase ) );
	}
	#service .trapezoid{
		left : calc( -288 var( --viewportBase ) );
		width : calc( 1238 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 1125.14 * 100% / 1238 ) 100% , 0% 100% );
	}
	#service .img02{
		left : calc( 874 var( --viewportBase ) );
		width : calc( 1489 var( --viewportBase ) );
	}
	#service .parallelogram01{
		left : calc( 614 var( --viewportBase ) );
	}
	#service .parallelogram02{
		left : calc( 672 var( --viewportBase ) );
	}
	#service .img01{
		left : calc( 380.76 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#service h2{
		left : calc( 50% - 708px );
	}
	#service .trapezoid{
		left : 0;
		width : calc( 50% + 238px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 1238px - 1125.14px ) ) 100% , 0% 100% );
	}
	#service .img02{
		left : calc( 50% + 154px );
		width : 1489px;
	}
	#service .parallelogram01{
		left : calc( 50% - 106px );
	}
	#service .parallelogram02{
		left : calc( 50% - 48px );
	}
	#service .img01{
		left : calc( 50% - 339.24px );
	}
}
@media screen and ( width <= 750px ){
	#service h2{
		font-size : 12rem;
	}
}

/* --------------------------------------------
HOPPE DX
--------------------------------------------- */
#hoppedx{
	position : relative;
	overflow-x : clip;
}
#hoppedx h3{
	font-size : 0;
}
#hoppedx .trapezoid{
	background-color : #e7eaed;
}
#hoppedx .img{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#hoppedx{
		padding-bottom : calc( 292 var( --remBase ) );
		margin-top : calc( 101 var( --remBase ) );
	}
	#hoppedx h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx h3 img{
		height : calc( 69 var( --remBase ) );
	}
	#hoppedx h4{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 19 var( --remBase ) );
	}
	#hoppedx .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx .trapezoid{
		bottom : 0;
		left : calc( 16 var( --viewportBase ) );
		z-index : 0;
		width : calc( 520 var( --viewportBase ) );
		height : calc( 248 var( --remBase ) );
		clip-path : polygon( calc( 56.2132 * 100% / 520 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#hoppedx .img{
		bottom : calc( 23 var( --remBase ) );
		left : calc( 16 var( --percentBase ) );
		z-index : 1;
	}
	#hoppedx .img img{
		height : calc( 255 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx{
		min-height : calc( 685 var( --remBase ) );
		padding-top : calc( 61 var( --remBase ) );
		margin-top : calc( 53 var( --remBase ) );
	}
	#hoppedx :is( .title01 , h3 , h4 , .text , .link01 ){
		position : relative;
		z-index : 4;
		margin-left : calc( 720 var( --percentBase ) );
	}
	#hoppedx h3{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx h3 img{
		height : calc( 123 var( --remBase ) );
	}
	#hoppedx h4{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 19 var( --remBase ) );
	}
	#hoppedx .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx .trapezoid{
		top : calc( 66 var( --remBase ) );
		z-index : 0;
		height : calc( 497 var( --remBase ) );
	}
	#hoppedx .parallelogram01{
		top : calc( 254 var( --remBase ) );
		z-index : 1;
	}
	#hoppedx .parallelogram01 img{
		height : calc( 283 var( --remBase ) );
	}
	#hoppedx .parallelogram02{
		top : calc( 351 var( --remBase ) );
		z-index : 2;
	}
	#hoppedx .parallelogram02 img{
		height : calc( 242 var( --remBase ) );
	}
	#hoppedx .img{
		top : 0;
		z-index : 3;
	}
	#hoppedx .img img{
		height : calc( 563 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#hoppedx .trapezoid{
		left : calc( -288 var( --viewportBase ) );
		width : calc( 1044 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 931.141 * 100% / 1044 ) 100% , 0% 100% );
	}
	#hoppedx .parallelogram01{
		left : calc( 47 var( --viewportBase ) );
	}
	#hoppedx .parallelogram02{
		left : calc( 189 var( --viewportBase ) );
	}
	#hoppedx .img{
		left : calc( -14 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#hoppedx .trapezoid{
		left : 0;
		width : calc( 50% + 36px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 1044px - 931.141px ) ) 100% , 0% 100% );
	}
	#hoppedx .parallelogram01{
		left : calc( 50% - 673px );
	}
	#hoppedx .parallelogram02{
		left : calc( 50% - 531px );
	}
	#hoppedx .img{
		left : calc( 50% - 734px );
	}
}

/* --------------------------------------------
ONLINE
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#sectionOnline{
		margin-top : calc( 72 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#sectionOnline{
		margin-top : calc( 44 var( --remBase ) );
	}
}
#sectionOnline .img{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#sectionOnline{
		padding-block : 0;
		padding-bottom : calc( 200 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#sectionOnline .img{
		bottom : -30px;
		right : 0;
		width : 256px;
		height : auto;
	}
		#sectionOnline .img img{
			width : 256px;
			height : auto;
		}
}
@media screen and ( 750px < width < 1440px ){
	#sectionOnline .img{
		top : 10px;
		left : calc( 50% + 10px );
		width : 700px;
		height : auto;
	}
}
@media print , screen and ( width >= 1440px ){
	#sectionOnline .img{
		top : 50px;
		left : calc( 50% + 10px );
		width : 910px;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	#online03{
		background-image : url( "../images/service/bg_sectionContact_pc.webp" );
		background-repeat : no-repeat;
		background-position : right -140px top;
		background-size : auto 140%;
	}
}

/* --------------------------------------------
SECTIONS
--------------------------------------------- */
#sections{
	position : relative;
	overflow-x : clip;
}
@media screen and ( width <= 750px ){
	#sections{
		margin-top : calc( 64 var( --remBase ) );
	}
	#sections section + section{
		margin-top : calc( 47 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#sections{
		display : grid;
		grid-template-columns : calc( 920 var( --percentBase ) ) calc( 440 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( ( 75 - ( 160 * .7 / 2 ) ) var( --remBase ) );
		margin-top : calc( 99 var( --remBase ) );
		margin-bottom : calc( 84 var( --remBase ) );
	}
	#sections .trapezoid{
		top : calc( 186 var( --remBase ) );
		z-index : 0;
		height : calc( 497 var( --remBase ) );
		background-color : white;
	}
	#sections .parallelogram01{
		top : 0;
		z-index : 0;
	}
	#sections .parallelogram01 img{
		height : calc( 283 var( --remBase ) );
	}
	#sections .parallelogram02{
		top : calc( 45 var( --remBase ) );
		z-index : 1;
	}
	#sections .parallelogram02 img{
		height : calc( 407 var( --remBase ) );
	}
	#sections section{
		position : relative;
		z-index : 2;
	}
}
@media screen and ( 750px < width < 1440px ){
	#sections .trapezoid{
		left : calc( 194 var( --viewportBase ) );
		width : calc( 1588 var( --viewportBase ) );
		clip-path : polygon( calc( 112.859 * 100% / 1044 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#sections .parallelogram01{
		left : calc( -280 var( --viewportBase ) );
	}
	#sections .parallelogram02{
		left : calc( -273 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#sections .trapezoid{
		right : 0;
		width : calc( 50% + 526px );
		clip-path : polygon( 112.859px 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#sections .parallelogram01{
		left : calc( 50% - 1000px );
	}
	#sections .parallelogram02{
		left : calc( 50% - 993px );
	}
}
:is( #news , #column ) h2{
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	:is( #news , #column ) h2{
		font-size : 12rem;
	}
}
@media print , screen and ( width > 750px ){
	:is( #news , #column ) h2{
		font-size : 16rem;
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news ul{
	border-top : solid 1px #cfd2d9;
}
#news li{
	border-bottom : solid 1px #cfd2d9;
}
#news li a{
	display : grid;
	align-items : start;
}
#news time{
	font-family : Lato , system-ui;
	font-size : 1.6rem;
	line-height : 1.5;
}
#news .category{
	display : grid;
	place-items : center;
	font-size : 1.4rem;
	color : white;
}
#news h3{
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#news li a{
		grid-template-columns : calc( 96 var( --percentBase ) ) auto 1fr;
		row-gap : calc( 7 var( --remBase ) );
		padding-block : calc( 18 var( --remBase ) );
	}
	#news time{
		grid-row : 1;
		grid-column : 1;
		padding-top : calc( 1 var( --remBase ) );
	}
	#news .category{
		height : calc( 26 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		line-height : 1.3;
	}
	#news h3{
		grid-row : 2;
		grid-column : 1 / -1;
	}
	#news .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#news ul{
		margin-top : calc( 15 var( --remBase ) );
	}
	#news li a{
		grid-template-columns : repeat( 2 , calc( 120 * 100% / 920 ) ) 1fr;
		padding-block : calc( 24 var( --remBase ) );
	}
	#news time{
		padding-top : calc( 6.5 var( --remBase ) );
	}
	#news .category{
		height : calc( 37 var( --remBase ) );
		line-height : 1.5;
	}
	#news h3{
		padding-inline : calc( 16 * 100% / 680 );
		padding-top : calc( 6.5 var( --remBase ) );
	}
	#news .link01{
		margin-top : calc( 29 var( --remBase ) );
	}
}
#news ul.newslist li h3{
	font-weight : 400;
}
#news ul.newslist li:nth-of-type( n + 6 ){
	display : none;
}
@media screen and ( width <= 750px ){
	#news{
		padding-bottom : calc( 40 var( --percentBase ) );
	}
	#news ul.newslist li h3{
		grid-row : 2;
		grid-column : 1 / -1;
		font-size : 1.4rem;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	#news ul.newslist li h3{
		padding-inline : calc( 16 * 100% / 680 );
		padding-top : calc( 6.5 var( --remBase ) );
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
#column .splide__slide a{
	display : grid;
	align-items : start;
	justify-content : start;
}
#column picture{
	width : 100%;
}
#column picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#column .category{
	display : grid;
	place-items : center;
	padding-inline : calc( 8 var( --remBase ) );
	line-height : 1.3;
	color : white;
}
#column time{
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#column{
		margin-bottom : calc( 141 var( --remBase ) );
	}
	#column h2{
		margin-inline : calc( 16 var( --viewportBase ) );
	}
	#column .splide__track{
		margin-top : calc( 19 var( --remBase ) );
	}
	#column .splide__slide{
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#column .splide__slide a{
		grid-template-rows : calc( 171 var( --remBase ) ) calc( 8 var( --remBase ) ) auto calc( 6 var( --remBase ) ) auto calc( 8 var( --remBase ) ) auto;
		grid-template-columns : auto 1fr;
		column-gap : calc( 8 * 100% / 304 );
	}
	#column picture{
		grid-row : 1;
		grid-column : 1 / -1;
		height : calc( 171 var( --remBase ) );
	}
	#column h3{
		grid-row : 3;
		grid-column : 1 / -1;
		margin-top : calc( 8 var( --remBase ) );
	}
	#column .category{
		grid-row : 5;
		grid-column : 1;
		height : calc( 24 var( --remBase ) );
		font-size : 1.2rem;
	}
	#column time{
		grid-row : 5;
		grid-column : 2;
		padding-top : calc( 3 var( --remBase ) );
		font-size : 1.2rem;
	}
	#column .tags{
		display : flex;
		flex-wrap : wrap;
		grid-row : 7;
		grid-column : 1 / -1;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 * 100% / 304 );
		padding-top : calc( 8 var( --remBase ) );
		border-top : solid 1px #cfd2d9;
	}
	#column .tags li{
		display : grid;
		place-items : center;
		height : calc( 21 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1rem;
		line-height : 1.3;
		background-color : var( --bg01 );
		border-radius : calc( 6 var( --remBase ) );
	}
	#column .link01{
		margin-top : calc( 30 var( --remBase ) );
		margin-left : calc( 16 var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column .splide__track{
		margin-top : calc( 15 var( --remBase ) );
	}
	#column .splide__list > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#column .splide__slide a{
		grid-template-rows : auto calc( 8 var( --remBase ) ) auto 1fr ;
		grid-template-columns : calc( 160 * 100% / 440 ) calc( 16 * 100% / 440 ) auto calc( 8 * 100% / 440 ) 1fr;
		align-items : start;
		justify-content : start;
	}
	#column picture{
		grid-row : 1/5;
		grid-column : 1;
		height : calc( 112 var( --remBase ) );
	}
	#column h3{
		grid-row : 1;
		grid-column : 3/6;
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#column .category{
		grid-row : 3;
		grid-column : 3;
		height : calc( 26 var( --remBase ) );
		font-size : 1.4rem;
	}
	#column time{
		grid-row : 3;
		grid-column : 5;
		padding-top : calc( 1 var( --remBase ) );
		font-size : 1.6rem;
	}
	#column .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
}