@charset "UTF-8";

/* --------------------------------------------
CONCEPT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#concept01{
		margin-top : calc( 37 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#concept01{
		margin-top : calc( 71 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#concept02{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#concept02{
		margin-top : calc( 80 var( --remBase ) );
	}
}
#concept03{
	position : relative;
	overflow-x : clip;
}
#concept03 h3 span{
	display : block;
}
@media screen and ( width <= 750px ){
	#concept03{
		margin-block : calc( 68 var( --remBase ) );
	}
	#concept03 h2 img{
		height : calc( 82 var( --remBase ) );
	}
	#concept03 h3{
		margin-block : calc( 16 var( --remBase ) );
	}
	#concept03 .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#concept03 > picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	#concept03 > picture img{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	#concept03{
		min-height : calc( 563 var( --remBase ) );
		margin-top : calc( 76 var( --remBase ) );
		margin-bottom : calc( 50 var( --remBase ) );
	}
	#concept03 :where( h2 , h3 , .text , .link01 ){
		margin-left : calc( 120 var( --percentBase ) );
	}
	#concept03 h2 img{
		height : calc( 123 var( --remBase ) );
	}
	#concept03 h3{
		margin-block : calc( 16 var( --remBase ) );
	}
	#concept03 .text{
		width : calc( 600 var( --percentBase ) );
	}
	#concept03 .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#concept03 > picture{
		position : absolute;
		top : 0;
	}
	#concept03 > picture img{
		height : calc( 563 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#concept03 > picture{
		left : calc( 703 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#concept03 > picture{
		left : calc( 50% - 17px );
	}
}

/* --------------------------------------------
SERVICE
--------------------------------------------- */
#service01{
	position : relative;
	overflow-x : clip;
}
@media print , screen and ( width > 750px ){
	#service01{
		min-height : calc( 624 var( --remBase ) );
		padding-top : calc( 135 var( --remBase ) );
		margin-top : calc( 17 var( --remBase ) );
	}
	#service01 :where( .title01 , h3 , .text , .link01 ){
		margin-left : calc( 120 var( --percentBase ) );
	}
	#service01 h3{
		margin-top : calc( 20 var( --remBase ) );
	}
	#service01 h3 img{
		height : calc( 101 var( --remBase ) );
	}
	#service01 .text{
		width : calc( 632 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#service01 .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#service01 .trapezoid{
		top : calc( 46 var( --remBase ) );
		z-index : 0;
		height : calc( 497 var( --remBase ) );
		background-color : #e7eaed;
	}
	#service01 .img{
		position : absolute;
		top : 0;
		z-index : 1;
	}
	#service01 .img img{
		height : calc( 624 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#service01{
		margin-top : calc( 34 var( --remBase ) );
	}
	#service01 h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service01 h3 img{
		height : calc( 107 var( --remBase ) );
	}
	#service01 .text{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service01 .img{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service01 .img img{
		width : 100%;
		height : auto;
	}
	#service01 .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#service01 .trapezoid{
		left : calc( 676 var( --viewportBase ) );
		width : calc( 1044 var( --viewportBase ) );
		clip-path : polygon( calc( 112.859 * 100% / 1044 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#service01 .img{
		left : calc( 642.69 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#service01 .trapezoid{
		right : 0;
		width : calc( 50% + 44px );
		clip-path : polygon( 112.859px 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#service01 .img{
		left : calc( 50% - 77.31px );
	}
}
#service02{
	position : relative;
	overflow-x : clip;
}
#service02 h3{
	font-size : 0;
}
#service02 .trapezoid{
	background-color : #e7eaed;
}
@media screen and ( width <= 750px ){
	#service02{
		margin-top : calc( 80 var( --remBase ) );
	}
	#service02 h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service02 h3 img{
		height : calc( 168 var( --remBase ) );
	}
	#service02 h4{
		margin-block : calc( 16 var( --remBase ) );
	}
	#service02 .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% );
	}
	#service02 .img{
		margin-top : calc( 16 var( --remBase ) );
	}
	#service02 .img img{
		width : 100%;
		height : auto;
	}
	#service02 .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#service02{
		min-height : calc( 637 var( --remBase ) );
		margin-top : calc( 41 var( --remBase ) );
	}
	#service02 :where( .title01 , h3 , h4 , .text , .link01 ){
		position : relative;
		z-index : 4;
		margin-left : calc( 722 var( --percentBase ) );
	}
	#service02 h3{
		margin-top : calc( 24 var( --remBase ) );
	}
	#service02 h3 img{
		height : calc( 123 var( --remBase ) );
	}
	#service02 h4{
		margin-block : calc( 16 var( --remBase ) );
	}
	#service02 .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#service02 .trapezoid{
		top : calc( 81 var( --remBase ) );
		z-index : 0;
		height : calc( 497 var( --remBase ) );
	}
	#service02 .parallelogram01{
		top : calc( 35 var( --remBase ) );
		z-index : 1;
	}
	#service02 .parallelogram01 img{
		height : calc( 283 var( --remBase ) );
	}
	#service02 .parallelogram02{
		top : calc( 248 var( --remBase ) );
		z-index : 2;
	}
	#service02 .parallelogram02 img{
		height : calc( 242 var( --remBase ) );
	}
	#service02 .img{
		position : absolute;
		top : calc( 74 var( --remBase ) );
		z-index : 3;
	}
	#service02 .img img{
		height : calc( 563 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#service02 .trapezoid{
		left : calc( -280 var( --viewportBase ) );
		width : calc( 1044 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 931.141 * 100% / 1044 ) 100% , 0% 100% );
	}
	#service02 .parallelogram01{
		left : calc( -81 var( --viewportBase ) );
	}
	#service02 .parallelogram02{
		left : calc( 61 var( --viewportBase ) );
	}
	#service02 .img{
		left : calc( -9 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#service02 .trapezoid{
		left : 0;
		width : calc( 50% + 44px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 1044px - 931.141px ) ) 100% , 0% 100% );
	}
	#service02 .parallelogram01{
		left : calc( 50% - 801px );
	}
	#service02 .parallelogram02{
		left : calc( 50% - 659px );
	}
	#service02 .img{
		left : calc( 50% - 729px );
	}
}
@media print , screen and ( width > 750px ){
	#sectionOnline{
		margin-top : calc( 84 var( --remBase ) );
	}
}
#services{
	position : relative;
	overflow-x : clip;
}
@media screen and ( width <= 750px ){
	#services{
		margin-top : calc( 80 var( --remBase ) );
		margin-bottom : calc( 120 var( --remBase ) );
	}
	#services .title01{
		margin-block : calc( 24 var( --remBase ) );
	}
	#services .title01 section + section{
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#services{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 39 var( --remBase ) );
		margin-top : calc( 122 var( --remBase ) );
		margin-bottom : calc( 34 var( --remBase ) );
	}
	#services section{
		position : relative;
		z-index : 1;
	}
	#services .title01{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 24 var( --remBase ) );
	}
	#services .trapezoid{
		top : calc( 197 var( --remBase ) );
		z-index : 0;
		height : calc( 497 var( --remBase ) );
		background-color : #e7eaed;
	}
}
@media screen and ( 750px < width < 1440px ){
	#services .trapezoid{
		left : calc( -280 var( --viewportBase ) );
		width : calc( 1521 var( --viewportBase ) );
		clip-path : polygon( 0 0 , calc( 1408.14 * 100% / 1521 ) 0 , 100% 100% , 0% 100% );
	}
}
@media print , screen and ( width >= 1440px ){
	#services .trapezoid{
		left : 0;
		width : calc( 50% + 521px );
		clip-path : polygon( 0 0 , calc( 100% - ( 1521px - 1408.14px ) ) 0 , 100% 100% , 0% 100% );
	}
}
#service04 ul{
	display : flex;
	flex-wrap : wrap;
}
@media screen and ( width <= 750px ){
	#service04 ul{
		column-gap : calc( 32 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#service04 ul{
		column-gap : calc( 32 * 100% / 680 );
	}
}
#service05 .link01{
	margin-top : calc( 24 var( --remBase ) );
}

/* --------------------------------------------
HOPPE DX
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#hoppedx01{
		margin-top : calc( 57 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx01{
		margin-top : calc( 80 var( --remBase ) );
	}
}
#hoppedx02 dt{
	display : grid;
	place-items : center;
	height : calc( 114 var( --remBase ) );
	font-size : 2.4rem;
	font-weight : 700;
	line-height : 1.5;
	color : white;
	background-color : var( --color01 );
}
#hoppedx02 dd{
	padding-top : calc( 8 var( --remBase ) );
	padding-bottom : calc( 16 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.7;
	background-color : white;
}
@media screen and ( width <= 750px ){
	#hoppedx02{
		margin-top : calc( 56 var( --remBase ) );
	}
	#hoppedx02 dl{
		margin-top : calc( 32 var( --remBase ) );
	}
	#hoppedx02 dl > div + div{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx02 dd{
		padding-inline : calc( 16 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx02{
		margin-top : calc( 80 var( --remBase ) );
	}
	#hoppedx02 dl{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 42 var( --remBase ) );
	}
	#hoppedx02 dd{
		padding-inline : calc( 16.5 * 100% / 440 );
	}
}
#hoppedx03{
	position : relative;
	overflow-x : clip;
}
@media screen and ( width <= 750px ){
	#hoppedx03{
		margin-top : calc( 33 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx03{
		margin-top : calc( 48 var( --remBase ) );
	}
}
#hoppedx031{
	position : relative;
	border-image-source : linear-gradient( var( --color0102 ) , var( --color0102 ) );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
}
#hoppedx031 li{
	position : relative;
	background-color : white;
}
#hoppedx031 li::after{
	position : absolute;
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#hoppedx031 h4{
	font-size : 2.4rem;
	font-weight : 700;
	line-height : 1.5;
	color : var( --color01 );
}
#hoppedx031 li p{
	font-size : 1.6rem;
	line-height : 1.7;
}
#hoppedx031 > p{
	font-weight : 500;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
#hoppedx031 > p em{
	color : #ad1313;
}
@media screen and ( width <= 750px ){
	#hoppedx031{
		padding-top : calc( 44 var( --remBase ) );
		padding-bottom : calc( 54 var( --remBase ) );
	}
	#hoppedx031 ul{
		margin-top : calc( 33 var( --remBase ) );
	}
	#hoppedx031 li{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
		border-radius : calc( 16 var( --remBase ) );
	}
	#hoppedx031 li::after{
		top : calc( -25 var( --remBase ) );
		right : calc( 4 var( --percentBase ) );
		width : calc( 77 var( --percentBase ) );
		height : calc( 77 var( --remBase ) );
	}
	#hoppedx031 li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx031 li p{
		margin-top : calc( 8 var( --remBase ) );
	}
	#hoppedx031 li:nth-child( 1 )::after{
		background-image : url( "../images/service/hoppedx/char0301.svg" );
	}
	#hoppedx031 li:nth-child( 2 )::after{
		background-image : url( "../images/service/hoppedx/char0301.svg" );
	}
	#hoppedx031 li:nth-child( 3 )::after{
		background-image : url( "../images/service/hoppedx/char0301.svg" );
	}
	#hoppedx031 > p{
		margin-top : calc( 21 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx031{
		padding-top : calc( 75 var( --remBase ) );
		padding-bottom : calc( 45 var( --remBase ) );
	}
	#hoppedx031 ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 60 var( --remBase ) );
	}
	#hoppedx031 li{
		padding-inline : calc( 16 * 100% / 440 );
		padding-top : calc( 19 var( --remBase ) );
		padding-bottom : calc( 26 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) );
	}
	#hoppedx031 li p{
		width : calc( 256 * 100% / 408 );
		margin-top : calc( 9 var( --remBase ) );
	}
	#hoppedx031 li::after{
		top : calc( 12 var( --remBase ) );
		left : calc( 249 * 100% / 440 );
		width : calc( 215 * 100% / 440 );
		height : calc( 215 var( --remBase ) );
	}
	#hoppedx031 li:nth-child( 1 )::after{
		background-image : url( "../images/service/hoppedx/char0301.svg" );
	}
	#hoppedx031 li:nth-child( 2 )::after{
		background-image : url( "../images/service/hoppedx/char0302.svg" );
	}
	#hoppedx031 li:nth-child( 3 )::after{
		background-image : url( "../images/service/hoppedx/char0303.svg" );
	}
	#hoppedx031 > p{
		margin-top : calc( 105 var( --remBase ) );
		font-size : 4rem;
		line-height : calc( 57 / 40 );
	}
}
#hoppedx0302{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	color : white;
	border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
}
#hoppedx0302 strong{
	font-weight : 400;
}
#hoppedx0302::before{
	position : absolute;
	top : -1px;
	display : block;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	font-size : 0;
	content : "";
	background-color : var( --color0102 );
}
@media screen and ( width <= 750px ){
	#hoppedx0302{
		height : calc( 211 var( --remBase ) );
		font-size : 4.5rem;
		line-height : 1.3;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
	}
	#hoppedx0302::before{
		left : calc( -16 var( --percentBase ) );
		width : calc( 400 var( --percentBase ) );
		height : calc( 31 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx0302{
		height : calc( 240 var( --remBase ) );
	}
	#hoppedx0302::before{
		left : 50%;
		height : calc( 52 var( --remBase ) );
		translate : -50% 0;
	}
}
@media screen and ( 750px < width < 1440px ){
	#hoppedx0302::before{
		width : calc( 1399 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#hoppedx0302::before{
		width : 1399px;
	}
}
#hoppedx0303 h3{
	display : grid;
	place-items : center;
}
#hoppedx0303 > p{
	line-height : 1.7;
}
#hoppedx0303 dl > div{
	background-color : var( --color0103 );
}
#hoppedx0303 dt{
	display : grid;
	place-items : center;
	color : white;
}
#hoppedx0303 dl > div:not( :last-of-type ) dt{
	background-color : var( --color01 );
}
#hoppedx0303 dl > div:last-of-type dt{
	background-color : var( --color02 );
}
@media screen and ( width <= 750px ){
	#hoppedx0303 h3{
		height : calc( 114 var( --remBase ) );
		border-image-source : linear-gradient( var( --color0102 ) , var( --color0102 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#hoppedx0303 > p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6em;
	}
	#hoppedx0303 dl{
		margin-top : calc( 23 var( --remBase ) );
	}
	#hoppedx0303 dl > div{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
	}
	#hoppedx0303 dl > div + div{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx0303 dt{
		height : calc( 38 var( --remBase ) );
		font-size : 1.6rem;
		font-weight : 700;
		line-height : calc( 22 / 16 );
	}
	#hoppedx0303 dd{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx0303 h4{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx0303 dd p{
		margin-top : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx0303{
		margin-top : calc( 27 var( --remBase ) );
	}
	#hoppedx0303 h3{
		height : calc( 137 var( --remBase ) );
		background-color : var( --color0102 );
	}
	#hoppedx0303 > p{
		margin-top : calc( 23 var( --remBase ) );
		font-size : 2em;
		font-weight : 500;
		text-align : center;
	}
	#hoppedx0303 dl{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 34 var( --remBase ) );
	}
	#hoppedx0303 dl > div{
		padding-inline : calc( 24 * 100% / 440 );
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
	}
	#hoppedx0303 dt{
		height : calc( 60 var( --remBase ) );
	}
	#hoppedx0303 dd{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx0303 h4{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx0303 dd p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
#hoppedx04 h2{
	display : grid;
	place-items : center;
	font-weight : 400;
	color : white;
	border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
}
#hoppedx04 > ul > li{
	background-color : white;
}
#hoppedx04 h5{
	display : grid;
	align-items : center;
	justify-content : start;
	font-size : 2.4rem;
	font-weight : 700;
	line-height : 1.5;
	color : white;
	background-color : var( --color01 );
}
#hoppedx04 li p , #hoppedx04 li li{
	font-size : 1.6rem;
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#hoppedx04{
		margin-top : calc( 80 var( --remBase ) );
	}
	#hoppedx04 h2{
		height : calc( 100 var( --remBase ) );
	}
	#hoppedx04 .box{
		margin-top : calc( 7 var( --remBase ) );
	}
	#hoppedx04 .box picture img{
		height : calc( 596 var( --remBase ) );
	}
	#hoppedx04 > ul{
		margin-top : calc( 32 var( --remBase ) );
	}
	#hoppedx04 > ul > li{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#hoppedx04 > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx04 h5{
		height : calc( 114 var( --remBase ) );
		padding-inline : calc( 16  var( --percentBase ) );
		margin-bottom : calc( 8 var( --remBase ) );
	}
	#hoppedx04 ul ul , #hoppedx04 li p{
		padding-inline : calc( 16  var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx04{
		margin-top : calc( 56 var( --remBase ) );
	}
	#hoppedx04 h2{
		height : calc( 200 var( --remBase ) );
	}
	#hoppedx04 .box{
		display : grid;
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto calc( 8 var( --remBase ) ) auto 1fr;
		grid-template-columns : 1fr calc( 800 var( --percentBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : center;
		margin-top : calc( 56 var( --remBase ) );
	}
	#hoppedx04 .box h3{
		grid-row : 2;
		grid-column : 1;
	}
	#hoppedx04 .box h4{
		grid-row : 4;
		grid-column : 1;
	}
	#hoppedx04 .box > p{
		grid-row : 6;
		grid-column : 1;
	}
	#hoppedx04 .box .photoBox{
		grid-row : 1 / -1;
		grid-column : 2;
	}
	#hoppedx04 .box .photoBox img{
		width : 100%;
		height : auto;
	}
	#hoppedx04 > ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 40 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		justify-content : center;
		margin-top : calc( 72 var( --remBase ) );
	}
	#hoppedx04 > ul > li{
		width : calc( 440 var( --percentBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#hoppedx04 h5{
		height : calc( 114 var( --remBase ) );
		padding-inline : calc( 16  * 100% / 440 );
		margin-bottom : calc( 8 var( --remBase ) );
	}
	#hoppedx04 ul ul , #hoppedx04 li p{
		padding-inline : calc( 16  * 100% / 440 );
	}
}
#hoppedx05{
	background-color : var( --color01 );
}
#hoppedx05 > :where( h2 , p ){
	color : white;
}
#hoppedx05 .splide__slide{
	padding-bottom : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1.5;
	color : var( --color01 );
	text-align : center;
	background-color : white;
}
#hoppedx05 .splide__slide::before{
	display : block;
	width : 100%;
	height : calc( 150 var( --remBase ) );
	margin-bottom : calc( 8 var( --remBase ) );
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#hoppedx05 li:nth-child( 1 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0501.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0501.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 2 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0502.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0502.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 3 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0503.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0503.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 4 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0504.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0504.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 5 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0505.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0505.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 6 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0506.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0506.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 7 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0507.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0507.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 8 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0508.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0508.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 9 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0509.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0509.webp" ) type( "image/webp" ) );
}
#hoppedx05 li:nth-child( 10 )::before{
	background-image : image-set( url( "../images/service/hoppedx/icon0510.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/icon0510.webp" ) type( "image/webp" ) );
}
@media screen and ( width <= 750px ){
	#hoppedx05{
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 56 var( --remBase ) );
	}
	#hoppedx05 > p{
		margin-top : calc( 18 var( --remBase ) );
	}
	#hoppedx05 .splide__track{
		margin-top : calc( 28 var( --remBase ) );
	}
	#hoppedx05 .splide__slide{
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#hoppedx05 .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx05{
		padding-top : calc( 104 var( --remBase ) );
		padding-bottom : calc( 72 var( --remBase ) );
		margin-top : calc( 56 var( --remBase ) );
	}
	#hoppedx05 > p{
		margin-top : calc( 29 var( --remBase ) );
	}
	#hoppedx05 .splide__track{
		margin-top : calc( 45 var( --remBase ) );
	}
	#hoppedx05 .splide__list{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 64 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		justify-content : center;
	}
	#hoppedx05 .splide__slide{
		width : calc( 200 var( --percentBase ) );
	}
	#hoppedx05 .link01{
		margin-top : calc( 64 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx06{
		position : relative;
		display : grid;
		grid-template-columns : calc( 677 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		align-content : center;
		align-items : center;
		justify-content : start;
		min-height : calc( 471 var( --remBase ) );
		overflow-x : clip;
	}
	#hoppedx06 > picture{
		position : absolute;
		top : 0;
	}
	#hoppedx06 > picture img{
		height : calc( 471 var( --remBase ) );
	}
	#hoppedx06 h3{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : start;
	}
	#hoppedx06 h3 .catchcopy01{
		color : var( --color02 );
	}
}
@media screen and ( 750px < width < 1440px ){
	#hoppedx06 > picture{
		left : calc( 439 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#hoppedx06 > picture{
		left : calc( 50% + 22px );
	}
}
@media screen and ( width <= 750px ){
	#hoppedx07{
		margin-top : calc( 32 var( --remBase ) );
	}
	#hoppedx07 .photoBox{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx07 .photoBox picture img{
		height : calc( 550 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx07{
		padding-block : calc( 70 var( --remBase ) );
		background-color : white;
	}
	#hoppedx07 .text{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx07 .lede01{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx07 .title01{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppedx07 picture{
		width : calc( 906 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 18 var( --remBase ) );
	}
	#hoppedx07 picture img{
		width : 100%;
		height : auto;
	}
}
@media screen and ( width <= 750px ){
	#hoppedx08{
		margin-top : calc( 80 var( --remBase ) );
	}
	#hoppedx08 .title01{
		margin-bottom : calc( ( 50 - 16 ) var( --remBase ) );
	}
	#hoppedx08 .link01{
		margin-top : calc( 50 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx08{
		margin-top : calc( 124 var( --remBase ) );
	}
	#hoppedx08 .title01{
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#hoppedx08 .link01{
		margin-top : calc( 40 var( --remBase ) );
	}
}
#hoppedx09 li{
	background-color : white;
}
#hoppedx09 h3{
	position : relative;
	display : grid;
	place-items : center;
	color : white;
	background-color : var( --color01 );
}
#hoppedx09 h3::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/service/hoppedx/arrow.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#hoppedx09{
		margin-top : calc( 72 var( --remBase ) );
	}
	#hoppedx09 li{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
	}
	#hoppedx09 li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx09 h3{
		padding-block : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 22 / 16 );
	}
	#hoppedx09 h3::after{
		bottom : calc( -17.49 var( --remBase ) );
		left : calc( 19 * 100% / 320 );
		width : calc( 22.87 * 100% / 320 );
		height : calc( 34 var( --remBase ) );
	}
	#hoppedx09 picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx09 p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx09{
		margin-top : calc( 115 var( --remBase ) );
	}
	#hoppedx09 ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 34 var( --remBase ) );
	}
	#hoppedx09 li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		padding-inline : calc( 24 * 100% / 440 );
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 29 var( --remBase ) );
	}
	#hoppedx09 h3{
		padding-block : calc( 14.5 var( --remBase ) );
	}
	#hoppedx09 h3::after{
		bottom : calc( -26 var( --remBase ) );
		left : calc( 56.57 * 100% / 392 );
		width : calc( 23 * 100% / 392 );
		height : calc( 34 var( --remBase ) );
	}
	#hoppedx09 picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppedx09 p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
#hoppedx10 .splide__slide{
	background-color : white;
}
#hoppedx10 picture{
	width : 100%;
}
#hoppedx10 picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#hoppedx10 p{
	margin-top : calc( 16 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
}
#hoppedx10 h4{
	margin-top : calc( 8 var( --remBase ) );
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#hoppedx10{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 48 var( --remBase ) );
		margin-top : calc( 64 var( --remBase ) );
	}
	#hoppedx10 .splide__track{
		margin-top : calc( 20 var( --remBase ) );
	}
	#hoppedx10 .splide__slide{
		padding-bottom : calc( 16 var( --remBase ) );
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#hoppedx10 picture{
		height : calc( 200 var( --remBase ) );
	}
	#hoppedx10 :where( p , h4 ){
		padding-inline : calc( 16 * 100% / 304 );
	}
	#hoppedx10 .link01{
		margin-top : calc( 56 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedx10{
		padding-top : calc( 86 var( --remBase ) );
		padding-bottom : calc( 76 var( --remBase ) );
		margin-top : calc( 90 var( --remBase ) );
	}
	#hoppedx10 h2{
		font-size : 4rem;
		font-weight : 500;
		line-height : calc( 57 / 40 );
	}
	#hoppedx10 .splide__track{
		margin-top : calc( 32 var( --remBase ) );
	}
	#hoppedx10 .splide__list{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		justify-content : space-between;
	}
	#hoppedx10 .splide__slide{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#hoppedx10 picture{
		height : calc( 212 var( --remBase ) );
	}
	#hoppedx10 :where( p , h4 ){
		padding-inline : calc( 16 * 100% / 320 );
	}
	#hoppedx10 p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#hoppedx10 h4{
		margin-top : calc( 8 var( --remBase ) );
	}
	#hoppedx10 .link01{
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#hoppedx10 + #servicesContact{
		margin-top : calc( 38 var( --remBase ) );
	}
}
#hoppedxService{
	margin-top : calc( 16 var( --remBase ) );
}
#hoppedxService nav a{
	display : grid;
	grid-auto-flow : column;
	place-items : center;
	padding-inline : calc( 8 var( --remBase ) );
	font-weight : 500;
	line-height : 1.5;
	background-color : var( --color0102 );
}
#hoppedxService nav a::before{
	content : "▼";
}
#hoppedxService h3{
	display : grid;
	align-items : end;
	justify-content : start;
	border-bottom : solid var( --color01 ) calc( 2 var( --remBase ) );
}
#hoppedxService h3::before{
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#hoppedxService > section:nth-of-type( 1 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon01.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon01.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 2 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon02.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon02.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 3 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon03.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon03.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 4 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon04.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon04.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 5 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon05.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon05.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 6 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon06.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon06.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 7 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon07.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon07.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 8 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon08.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon08.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 9 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon09.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon09.webp" ) type( "image/webp" ) );
}
#hoppedxService > section:nth-of-type( 10 ) h3::before{
	background-image : image-set( url( "../images/service/hoppedx/service/icon10.avif" ) type( "image/avif" ) , url( "../images/service/hoppedx/service/icon10.webp" ) type( "image/webp" ) );
}
#hoppedxService > section p em{
	font-weight : 700;
	color : #eb5757;
}
@media screen and ( width <= 750px ){
	#hoppedxService{
		padding-bottom : calc( 52 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	#hoppedxService > p{
		margin-top : calc( 32 var( --remBase ) );
	}
	#hoppedxService nav{
		margin-top : calc( 48 var( --remBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
		overflow-x : auto;
	}
	#hoppedxService nav ul{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#hoppedxService nav a{
		height : calc( 37 var( --remBase ) );
		font-size : 1.4rem;
		white-space : nowrap;
	}
	#hoppedxService section + section{
		margin-top : calc( 68 var( --remBase ) );
	}
	#hoppedxService h3{
		grid-template-columns : calc( 78.22 var( --percentBase ) ) 1fr;
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#hoppedxService h3::before{
		height : calc( 60 var( --remBase ) );
	}
	#hoppedxService p{
		margin-top : calc( 8 var( --remBase ) );
	}
	#hoppedxService picture{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppedxService{
		padding-bottom : calc( 152 var( --remBase ) );
		background-color : white;
	}
	#hoppedxService h2{
		display : grid;
		place-items : center;
		height : calc( 240 var( --remBase ) );
		border-image-source : linear-gradient( var( --color0103 ) , var( --color0103 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#hoppedxService > p{
		padding-top : calc( 48 var( --remBase ) );
	}
	#hoppedxService nav{
		margin-block : calc( 48 var( --remBase ) );
	}
	#hoppedxService nav ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
	}
	#hoppedxService nav a{
		height : calc( 43 var( --remBase ) );
		font-size : 1.8rem;
	}
	#hoppedxService section{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 800 var( --percentBase ) ) calc( 560 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#hoppedxService section + section{
		margin-top : calc( 42 var( --remBase ) );
	}
	#hoppedxService h3{
		grid-template-columns : calc( 110 * 100% / 800 ) 1fr;
		grid-row : 1;
		grid-column : 1;
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#hoppedxService p{
		grid-row : 2;
		grid-column : 1;
	}
	#hoppedxService picture{
		grid-row : 1/3;
		grid-column : 2;
	}
	#hoppedxService section:not(:nth-of-type( 1 ), :nth-of-type( 8 )) h3::before{
		height : calc( 82.5 var( --remBase ) );
	}
	#hoppedxService section:nth-of-type( 1 ) h3::before{
		height : calc( 82 var( --remBase ) );
	}
	#hoppedxService section:nth-of-type( 8 ) h3::before{
		height : calc( 83 var( --remBase ) );
	}
}

/* --------------------------------------------
DOCUMENT
--------------------------------------------- */
#document hgroup{
	padding-block : calc( 8 var( --remBase ) );
	color : white;
	text-align : center;
}
#document hgroup h2 , #document hgroup p{
	font-size : 2rem;
	font-weight : 500;
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#document{
		margin-bottom : calc( 116 var( --remBase ) );
	}
	#document > p{
		margin-top : calc( 32 var( --remBase ) );
	}
	#document ul{
		margin-top : calc( 44 var( --remBase ) );
	}
	#document li{
		width : calc( 324 var( --percentBase ) );
		margin-inline : auto;
	}
	#document li + li{
		margin-top : calc( 52 var( --remBase ) );
	}
	#document picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	#document a{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#document{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
	}
	#document > p{
		margin-top : calc( 48 var( --remBase ) );
	}
	#document ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 80 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 48 var( --remBase ) );
	}
	#document li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : calc( 16 var( --remBase ) );
	}
	#document hgroup{
		grid-row : 1;
	}
	#document picture{
		grid-row : 2;
	}
	#document a{
		grid-row : 3;
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow01 > dl div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#flow01 > dl div > dt{
	display : grid;
	place-items : center;
	color : white;
	background-color : var( --color01 );
}
#flow01 > dl div > dd{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	letter-spacing : .05em;
}
#flow01 > dl div > dd span{
	letter-spacing : .05em;
}
#flow01 > p{
	position : relative;
}
#flow01 > p > span:nth-of-type( 1 ){
	position : absolute;
}
#flow01 > p > span:nth-of-type( 2 ) span{
	font-weight : 400;
	letter-spacing : .05em;
}
#flow01 > p > span:nth-of-type( 2 ) > span:nth-of-type( 1 ){
	color : var( --color01 );
}
#flow01 > p > span:nth-of-type( 2 ) > span:nth-of-type( 3 ){
	color : #eb5757;
}
@media screen and ( width <= 750px ){
	#flow01{
		padding-bottom : calc( 56 var( --remBase ) );
	}
	#flow01 > dl{
		margin-top : calc( 38 var( --remBase ) );
	}
	#flow01 > dl > div{
		grid-template-columns : calc( 88 var( --percentBase ) ) 1fr;
		column-gap : calc( 11 var( --percentBase ) );
	}
	#flow01 > dl > div + div{
		margin-top : calc( 8 var( --remBase ) );
	}
	#flow01 > dl > div > dt{
		height : calc( 48 var( --remBase ) );
		font-size : 1.6rem;
	}
	#flow01 > dl > div > dd{
		font-size : 1.8rem;
	}
	#flow01 > dl > div > dd span{
		font-size : 3.6rem;
	}
	#flow01 > p{
		margin-top : calc( 72 var( --remBase ) );
		text-align : right;
	}
	#flow01 > p > span:nth-of-type( 1 ){
		top : calc( -77.73 var( --remBase ) );
		left : calc( -12.68 var( --percentBase ) );
	}
	#flow01 > p > span:nth-of-type( 1 ) img{
		height : calc( 106.97 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#flow01{
		padding-top : calc( 59 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#flow01 > dl{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 40 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 72 var( --remBase ) );
	}
	#flow01 > dl > div{
		grid-template-columns : calc( 120 var( --remBase ) ) auto;
		column-gap : calc( 11 var( --remBase ) );
	}
	#flow01 > dl > div > dt{
		height : calc( 56 var( --remBase ) );
		font-size : 2.4rem;
	}
	#flow01 > dl > div > dd{
		font-size : 2.4rem;
	}
	#flow01 > dl > div > dd span{
		font-size : 5.6rem;
	}
	#flow01 > p{
		margin-top : calc( 42.19 var( --remBase ) );
		text-align : center;
	}
	#flow01 > p > span:nth-of-type( 1 ){
		top : calc( -83.19 var( --remBase ) );
		left : calc( 76.54 var( --percentBase ) );
	}
	#flow01 > p > span:nth-of-type( 1 ) img{
		height : calc( 138.26 var( --remBase ) );
	}
	#flow01 > p > span:nth-of-type( 2 ) > span{
		text-indent : .05em;
	}
	#flow01 > p > span:nth-of-type( 2 ) > span:nth-of-type( 1 ){
		font-size : 4.8rem;
		line-height : calc( 69 / 48 );
	}
	#flow01 > p > span:nth-of-type( 2 ) > span:nth-of-type( 2 ){
		font-size : 4rem;
		line-height : calc( 57 / 40 );
	}
	#flow01 > p > span:nth-of-type( 2 ) > span:nth-of-type( 3 ){
		font-size : 4.8rem;
		line-height : calc( 69 / 48 );
	}
}
#flow01 .box h4{
	color : white;
	background-color : var( --color01 );
}
#flow01 .box h4 span:nth-of-type( 1 ){
	display : grid;
	place-items : center;
	font-weight : 500;
	background-color : var( --color02 );
}
#flow01 .box h4 span:nth-of-type( 2 ){
	font-weight : 400;
}
#flow01 .box h4 span:nth-of-type( 3 ){
	font-weight : 600;
	letter-spacing : .05em;
}
@media screen and ( width <= 750px ){
	#flow01 .box{
		margin-top : calc( 55 var( --remBase ) );
	}
	#flow01 .box h4{
		padding-block : calc( 11 var( --remBase ) );
		padding-top : calc( 16 var( --remBase ) );
	}
	#flow01 .box h4 span:nth-of-type( 1 ){
		width : calc( 322 var( --percentBase ) );
		height : calc( 42 var( --remBase ) );
		margin-inline : auto;
	}
	#flow01 .box h4 span:nth-of-type( 2 ){
		display : block;
		margin-top : calc( 1 var( --remBase ) );
		text-align : center;
	}
	#flow01 .box h4 span:nth-of-type( 3 ){
		display : block;
		color : white;
		text-align : center;
		text-indent : .05em;
	}
	#flow01 .box .sub{
		margin-top : calc( 19 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#flow01 .box{
		padding-bottom : calc( 60 var( --remBase ) );
		margin-top : calc( 56 var( --remBase ) );
		background-color : white;
		outline : 1px solid var( --color01 );
		outline-offset : -1px;
	}
	#flow01 .box h4{
		display : grid;
		grid-template-columns : calc( 322 var( --percentBase ) ) auto;
		column-gap : calc( 16 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		height : calc( 135 var( --remBase ) );
	}
	#flow01 .box h4 span:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 1;
		align-self : end;
		height : calc( 46 var( --remBase ) );
		font-size : 3rem;
	}
	#flow01 .box h4 span:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 1;
		align-self : start;
	}
	#flow01 .box h4 span:nth-of-type( 3 ){
		grid-row : 1/3;
		grid-column : 2;
		font-size : 4.5rem;
		line-height : calc( 65 / 45 );
	}
	#flow01 .box .sub{
		padding-inline : calc( 120 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#flow01 .box .sub li{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : start;
	}
}
#flow01 .infoGraphic > dl > dt dd{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	letter-spacing : .05em;
}
#flow01 .infoGraphic > dl > dt dd span{
	font-weight : 700;
	letter-spacing : .05em;
}
#flow01 .infoGraphic > dl > dd{
	position : relative;
}
#flow01 .infoGraphic > dl > dd dl{
	color : white;
}
#flow01 .infoGraphic > dl > dd dl:nth-of-type( 1 ){
	background-color : var( --color04 );
}
#flow01 .infoGraphic > dl > dd dl:nth-of-type( 2 ){
	background-color : color-mix( in srgb , #223d70 80% , transparent );
}
#flow01 .infoGraphic > dl > dd dd{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	letter-spacing : .05em;
}
#flow01 .infoGraphic > dl > dd dd span{
	font-weight : 700;
	letter-spacing : .05em;
}
#flow01 .infoGraphic > dl > dd > span{
	position : absolute;
	left : 50%;
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	line-height : 1;
	color : white;
	letter-spacing : 0;
	translate : -50% 0;
}
#flow01 .infoGraphic > p{
	font-weight : 600;
	letter-spacing : .05em;
}
#flow01 .infoGraphic .result{
	position : relative;
}
#flow01 .infoGraphic .result > p:nth-of-type( 1 ){
	position : absolute;
	font-weight : 600;
	color : #000;
	background : url( "../images/service/hoppedx/flow/bg_comment.svg" ) center / contain no-repeat;
}
#flow01 .infoGraphic .result dt{
	font-weight : 400;
	color : var( --color02 );
	border-top : dotted 1px var( --color02 );
	border-left : dotted 1px var( --color02 );
	border-right : dotted 1px var( --color02 );
}
#flow01 .infoGraphic .result dd{
	display : grid;
	grid-auto-flow : column;
	align-content : center;
	align-items : baseline;
	justify-content : start;
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	color : white;
	letter-spacing : .05em;
	background-color : var( --color02 );
}
#flow01 .infoGraphic .result dd span{
	letter-spacing : .05em;
}
#flow01 .infoGraphic .result > p:nth-of-type( 2 ) > span{
	color : var( --color02 );
}
@media screen and ( width <= 750px ){
	#flow01 .infoGraphic{
		margin-top : calc( 14 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl{
		grid-row : 1;
		grid-column : 1;
	}
	#flow01 .infoGraphic > dl > dt{
		padding-left : calc( 16 var( --percentBase ) );
	}
	#flow01 .infoGraphic > dl > dt dd{
		font-size : 2.4rem;
	}
	#flow01 .infoGraphic > dl > dt dd span{
		font-size : 4rem;
	}
	#flow01 .infoGraphic > dl > dd{
		margin-top : calc( 10 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl > dd dl{
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#flow01 .infoGraphic > dl > dd dl:nth-of-type( 1 ){
		padding-top : calc( 23 var( --remBase ) );
		padding-bottom : calc( 33 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl > dd dl:nth-of-type( 2 ){
		padding-top : calc( 55 var( --remBase ) );
		padding-bottom : calc( 42 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl > dd dd{
		font-size : 2.4rem;
	}
	#flow01 .infoGraphic > dl > dd dd span{
		font-size : 4rem;
	}
	#flow01 .infoGraphic > dl > dd > span{
		top : calc( ( 101 + 7 ) var( --remBase ) );
		margin-top : calc( -3 var( --remBase ) );
		font-size : 5.6rem;
	}
	#flow01 .infoGraphic > p{
		display : grid;
		grid-template-columns : calc( 110 var( --percentBase ) ) auto;
		column-gap : calc( 2 var( --percentBase ) );
		align-items : end;
		justify-content : center;
		margin-top : calc( 10 var( --remBase ) );
		font-size : 3rem;
		line-height : 1.2;
		color : var( --color01 );
		text-align : center;
		text-indent : .05em;
	}
	#flow01 .infoGraphic > p::before{
		display : block;
		height : calc( 84.08 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/service/hoppedx/flow/bg_next_sp.svg" ) center / contain no-repeat;
	}
	#flow01 .infoGraphic .result{
		margin-top : calc( 21 var( --remBase ) );
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 1 ){
		top : calc( 71 var( --remBase ) );
		left : calc( 266 var( --percentBase ) );
		width : calc( 113 var( --percentBase ) );
		height : calc( 113.02 var( --remBase ) );
		padding-top : calc( 25 var( --remBase ) );
		padding-left : calc( 24 var( --percentBase ) );
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 1 ) span{
		font-size : 1.8rem;
	}
	#flow01 .infoGraphic .result dt{
		height : calc( 237 var( --remBase ) );
		padding-top : calc( 187 var( --remBase ) );
		padding-left : calc( 16 var( --percentBase ) );
	}
	#flow01 .infoGraphic .result dd{
		height : calc( 71 var( --remBase ) );
		padding-left : calc( 16 var( --percentBase ) );
		font-size : 2.4rem;
	}
	#flow01 .infoGraphic .result dd span{
		font-size : 4rem;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 2 ){
		font-size : 2rem;
		line-height : 1.5;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 2 ) span span{
		font-size : 3.5rem;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	#flow01 .infoGraphic{
		display : grid;
		grid-template-columns : calc( 440 * 100% / 1280 ) calc( 21 * 100% / 1280 ) calc( 235.5 * 100% / 1280 ) calc( 21.5 * 100% / 1280 ) 1fr;
		align-items : end;
		justify-content : start;
		padding-top : calc( 40 var( --remBase ) );
		padding-left : calc( 120 var( --percentBase ) );
	}
	#flow01 .infoGraphic > dl{
		grid-row : 1;
		grid-column : 1;
	}
	#flow01 .infoGraphic > dl > dt{
		padding-left : calc( 11 * 100% / 440 );
	}
	#flow01 .infoGraphic > dl > dt dd{
		font-size : 2.4rem;
	}
	#flow01 .infoGraphic > dl > dt dd span{
		font-size : 5.6rem;
	}
	#flow01 .infoGraphic > dl > dd{
		margin-top : calc( 17 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl > dd dl{
		padding-inline : calc( 20 * 100% / 440 );
	}
	#flow01 .infoGraphic > dl > dd dl:nth-of-type( 1 ){
		padding-top : calc( 13 var( --remBase ) );
		padding-bottom : calc( 27 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl > dd dl:nth-of-type( 2 ){
		padding-top : calc( 37 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
	}
	#flow01 .infoGraphic > dl > dd dd{
		font-size : 2.4rem;
	}
	#flow01 .infoGraphic > dl > dd dd span{
		font-size : 5.6rem;
	}
	#flow01 .infoGraphic > dl > dd > span{
		top : calc( ( 101 + 4 ) var( --remBase ) );
		font-size : 5.6rem;
	}
	#flow01 .infoGraphic > p{
		grid-row : 1;
		grid-column : 3;
		height : calc( 180 var( --remBase ) );
		padding-top : calc( 54 var( --remBase ) );
		padding-left : calc( 20 * 100% / 235.5 );
		font-size : 3rem;
		line-height : 1.2;
		color : white;
		background : url( "../images/service/hoppedx/flow/bg_next_pc.svg" ) 0 0 / contain no-repeat;
	}
	#flow01 .infoGraphic .result{
		grid-row : 1;
		grid-column : 5;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 1 ){
		top : calc( 111 var( --remBase ) );
		left : calc( 367 * 100% / 562 );
		width : calc( 113 * 100% / 562 );
		height : calc( 113.02 var( --remBase ) );
		padding-top : calc( 25 var( --remBase ) );
		padding-left : calc( 24 * 100% / 562 );
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 1 ) span{
		font-size : 1.8rem;
	}
	#flow01 .infoGraphic .result dl{
		width : calc( 440 * 100% / 562 );
	}
	#flow01 .infoGraphic .result dt{
		height : calc( 237 var( --remBase ) );
		padding-top : calc( 187 var( --remBase ) );
		padding-left : calc( 16 * 100% / 440 );
	}
	#flow01 .infoGraphic .result dd{
		height : calc( 71 var( --remBase ) );
		padding-left : calc( 54 * 100% / 440 );
		font-size : 2.4rem;
	}
	#flow01 .infoGraphic .result dd span{
		font-size : 5.6rem;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 2 ){
		position : absolute;
		top : 100%;
		left : 0;
		font-size : 1.6rem;
		line-height : 2;
	}
	#flow01 .infoGraphic .result > p:nth-of-type( 2 ) span span{
		font-size : 3rem;
		line-height : 2;
	}
}
#flow02 li + li{
	margin-top : calc( 24 var( --remBase ) );
}
#flow02 li{
	background-color : white;
}
#flow02 li > :where( h3 , hgroup ){
	display : grid;
	grid-auto-flow : row;
	align-content : center;
	align-items : center;
	justify-content : start;
	color : white;
	background-color : var( --color01 );
}
#flow02 caption{
	text-align : left;
}
#flow02 tbody{
	color : var( --color01 );
}
#flow02 li > p{
	color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#flow02{
		padding-block : calc( 80 var( --remBase ) );
	}
	#flow02 ul{
		margin-top : calc( 32 var( --remBase ) );
	}
	#flow02 li{
		padding-bottom : calc( 32 var( --remBase ) );
	}
	#flow02 li > :where( h3 , hgroup ){
		padding-block : calc( 32 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 520 );
	}
	#flow02 hgroup{
		row-gap : calc( 7 var( --remBase ) );
	}
	#flow02 table{
		width : 100%;
		margin-top : calc( 24 var( --remBase ) );
	}
	#flow02 caption{
		padding-bottom : calc( 8 var( --remBase ) );
		padding-left : calc( 254 var( --percentBase ) );
	}
	#flow02 th , #flow02 td{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#flow02 th{
		width : calc( 196 var( --percentBase ) );
		padding-left : calc( 16 var( --percentBase ) );
	}
	#flow02 li > p{
		padding-inline : calc( 16 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#flow02{
		padding-top : calc( 105 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#flow02 ul{
		width : calc( 1160 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 67 var( --remBase ) );
	}
	#flow02 li{
		display : grid;
		grid-template-columns : calc( 520 * 100% / 1160 ) 1fr;
		height : calc( 152.75 var( --remBase ) );
	}
	#flow02 li > :where( h3 , hgroup ){
		padding-inline : calc( 24 * 100% / 520 );
	}
	#flow02 hgroup{
		row-gap : calc( 9 var( --remBase ) );
	}
	#flow02 table{
		align-self : start;
		width : 100%;
	}
	#flow02 caption{
		padding-top : calc( 8 var( --remBase ) );
		padding-bottom : calc( 5 var( --remBase ) );
		padding-left : calc( 427 * 100% / 640 );
	}
	#flow02 th , #flow02 td{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#flow02 th{
		width : calc( 352 * 100% / 640 );
		padding-left : calc( 114 * 100% / 640 );
	}
	#flow02 li > p{
		align-self : center;
		padding-left : calc( 114 * 100% / 640 );
	}
}
#flow03 th , #flow03 td{
	padding-block : calc( 13.5 var( --remBase ) );
	font-weight : 400;
	border : solid 1px #b3b3b3;
}
#flow03 thead th{
	color : white;
	background-color : var( --color01 );
}
#flow03 tbody th{
	text-align : left;
	background-color : var( --color0103 );
}
#flow03 tbody th span[aria-hidden]{
	color : var( --color02 );
}
#flow03 tbody th em{
	color : var( --color02 );
}
#flow03 tbody td{
	text-align : center;
	background-color : white;
}
#flow03 :is( thead tr th:nth-of-type( 2 ) , tbody tr td:nth-of-type( 1 ) ){
	border-left : solid calc( 2 var( --remBase ) ) var( --color02 );
	border-right : solid calc( 2 var( --remBase ) ) var( --color02 );
}
#flow03 thead tr:first-of-type th:nth-of-type( 2 ){
	border-top : solid calc( 2 var( --remBase ) ) var( --color02 );
}
#flow03 tbody tr:last-of-type td:nth-of-type( 1 ){
	border-bottom : solid calc( 2 var( --remBase ) ) var( --color02 );
}
@media screen and ( width <= 750px ){
	#flow03{
		margin-top : calc( 80 var( --remBase ) );
	}
	#flow03 h2{
		color : var( --color01 );
	}
	#flow03 .tableBox{
		margin-top : calc( 38 var( --remBase ) );
	}
	#flow03 table{
		width : calc( ( 240 + ( 105 * 4 ) ) var( --percentBase ) );
	}
	#flow03 tbody th{
		width : calc( 240 * 100% / 660 );
		padding-left : calc( 12.5 * 100% / 660 );
	}
	#flow03 tbody td{
		width : calc( 105 * 100% / 660 );
	}
}
@media print , screen and ( width > 750px ){
	#flow03{
		margin-top : calc( 78 var( --remBase ) );
	}
	#flow03 h2{
		color : var( --base );
	}
	#flow03 .tableBox{
		width : calc( 1160 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 53 var( --remBase ) );
	}
	#flow03 table{
		width : 100%;
	}
	#flow03 tbody th{
		width : calc( 280 * 100% / 1160 );
		padding-left : calc( 12.5 * 100% / 1160 );
	}
}
#flow04{
	padding-block : calc( 80 var( --remBase ) );
}
#flow04 li{
	display : grid;
	align-items : center;
	justify-content : start;
	counter-increment : no;
	background-color : white;
}
#flow04 li::before , #flow04 li::after{
	line-height : 1;
	text-align : center;
}
#flow04 li::before{
	font-family : Abel , sans-serif;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	content : counter( no , decimal-leading-zero );
	background-color : var( --color01 );
	border-radius : 100vmax;
}
#flow04 li::after{
	font-family : ABeeZee , sans-serif;
	color : white;
	content : "STEP";
}
@media screen and ( width <= 750px ){
	#flow04{
		margin-top : calc( 80 var( --remBase ) );
	}
	#flow04 ol{
		margin-top : calc( 40 var( --remBase ) );
	}
	#flow04 li{
		grid-template-rows : auto auto;
		grid-template-columns : calc( 64 * 100% / 336 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 * 100% / 336 );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#flow04 li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#flow04 li::before{
		grid-row : 1;
		grid-column : 1;
		height : calc( 64 var( --remBase ) );
		padding-top : calc( 27.48 var( --remBase ) );
		font-size : 3rem;
	}
	#flow04 li::after{
		grid-row : 1;
		grid-column : 1;
		height : calc( 64 var( --remBase ) );
		padding-top : calc( 9.48 var( --remBase ) );
		font-size : 1.4rem;
	}
	#flow04 h3{
		grid-row : 1;
		grid-column : 2;
	}
	#flow04 p{
		grid-row : 2;
		grid-column : 1/3;
	}
}
@media print , screen and ( width > 750px ){
	#flow04{
		margin-top : calc( 82 var( --remBase ) );
	}
	#flow04 ol{
		width : calc( 1116 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 var( --remBase ) );
	}
	#flow04 li{
		grid-template-rows : 1fr auto auto 1fr;
		grid-template-columns : calc( 120 * 100% / 1068 ) 1fr;
		column-gap : calc( 34 * 100% / 1068 );
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 1116 );
	}
	#flow04 li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#flow04 li::before{
		grid-row : 1/5;
		grid-column : 1;
		height : calc( 120 var( --remBase ) );
		padding-top : calc( 31 var( --remBase ) );
		font-size : 7rem;
	}
	#flow04 li::after{
		grid-row : 1/5;
		grid-column : 1;
		height : calc( 120 var( --remBase ) );
		padding-top : calc( 13 var( --remBase ) );
		font-size : 1.4rem;
		line-height : calc( 24 / 14 );
	}
	#flow04 h3{
		grid-row : 2;
		grid-column : 2;
		align-items : end;
	}
	#flow04 p{
		grid-row : 3;
		grid-column : 2;
		align-items : start;
	}
}

/* --------------------------------------------
ONLINE
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#online01{
		margin-top : calc( 54 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#online01{
		margin-top : calc( 35 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#online02{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#online02{
		margin-top : calc( 16 var( --remBase ) );
	}
}
#online03{
	position : relative;
	overflow-x : clip;
	overflow-y : hidden;
	background-color : white;
}
#online03 h2{
	color : #25292e;
}
#online03 a{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-size : 2rem;
	font-weight : 700;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : var( --color04 );
	border : solid 1px var( --color04 );
}
@media screen and ( width <= 750px ){
	#online03{
		padding-top : calc( 39 var( --remBase ) );
		margin-bottom : calc( 99 var( --remBase ) );
	}
	#online03 a{
		width : calc( 254 var( --percentBase ) );
		height : calc( 58 var( --remBase ) );
		margin-top : calc( 31 var( --remBase ) );
	}
	#online03 picture{
		margin-top : calc( 39 var( --remBase ) );
	}
	#online03 picture img{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	#online03{
		min-height : calc( 391 var( --remBase ) );
		padding-top : calc( 126.5 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
	}
	#online03 picture{
		position : absolute;
		top : calc( -41 var( --remBase ) );
		z-index : 0;
	}
	#online03 picture img{
		height : calc( 552 var( --remBase ) );
	}
	#online03 a{
		width : calc( 251 var( --percentBase ) );
		height : calc( 69 var( --remBase ) );
		margin-top : calc( 37 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#online03 picture{
		left : calc( 909 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#online03 picture{
		left : calc( 50% + 189px );
	}
}
@media ( hover : hover ){
	#online03 a:hover{
		color : var( --color04 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#online03 a{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
CORPORATE
--------------------------------------------- */
#corporate01 dl{
	display : grid;
}
#corporate01 dl > dt , #corporate01 dl dd{
	padding-block : calc( 8 var( --remBase ) );
	border-top : solid 1px #d9d9d9;
}
#corporate01 dl > dt{
	color : var( --color01 );
}
#corporate01 li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
}
#corporate01 li::before{
	content : "・";
}
@media screen and ( width <= 750px ){
	#corporate01{
		margin-top : calc( 46 var( --remBase ) );
	}
	#corporate01 dl{
		grid-template-columns : calc( 137 var( --percentBase ) ) 1fr;
		margin-top : calc( 25 var( --remBase ) );
		font-family : "Noto Sans JP" , sans-serif;
	}
}
@media print , screen and ( width > 750px ){
	#corporate01{
		position : relative;
		min-height : calc( 633 var( --remBase ) );
		margin-top : calc( 73 var( --remBase ) );
		overflow-x : clip;
	}
	#corporate01 picture{
		position : absolute;
		top : calc( 63 var( --remBase ) );
	}
	#corporate01 picture img{
		height : calc( 497 var( --remBase ) );
	}
	#corporate01 dl{
		grid-template-columns : calc( 240 * 100% / 920 ) 1fr;
		width : calc( 920 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#corporate01 picture{
		left : calc( 975 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#corporate01 picture{
		left : calc( 50% + 255px );
	}
}
#corporate02 > ol > li > time{
	color : var( --color01 );
}
#corporate02 > ol > li > time::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --color01 );
}
#corporate02 li li{
	display : grid;
	align-items : start;
	justify-content : start;
	border-bottom : solid 1px color-mix( in srgb , #d9d9d9 50% , transparent );
}
#corporate02 li li time{
	text-align : right;
}
@media screen and ( width <= 750px ){
	#corporate02{
		padding-block : calc( 80 var( --remBase ) );
		margin-top : calc( 48 var( --remBase ) );
		margin-bottom : calc( 130 var( --remBase ) );
	}
	#corporate02 > ol{
		position : relative;
		margin-top : calc( 25 var( --remBase ) );
	}
	#corporate02 > ol::before{
		position : absolute;
		top : calc( 11.7 var( --remBase ) );
		left : 0;
		width : 1px;
		height : calc( 100% - ( 11.7 * 2 ) var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color01 );
	}
	#corporate02 > ol > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#corporate02 > ol > li > time{
		position : relative;
		display : block;
		padding-left : calc( 16 var( --percentBase ) );
		font-size : 1.8rem;
		line-height : 1.3;
	}
	#corporate02 > ol > li > time::before{
		position : absolute;
		top : calc( 8.2 var( --remBase ) );
		left : 0;
		width : calc( 7 var( --percentBase ) );
		height : calc( 7 var( --remBase ) );
		border-radius : 50%;
		translate : calc( -50% + .5px ) 0;
	}
	#corporate02 ol ol{
		padding-left : calc( 16 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#corporate02 li li{
		grid-template-columns : calc( 56 * 100% / 352 ) 1fr;
		padding-bottom : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#corporate02 li li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#corporate02 li li time{
		padding-right : calc( 8 * 100% / 56 );
	}
}
@media print , screen and ( width > 750px ){
	#corporate02{
		padding-block : calc( 80 var( --remBase ) );
	}
	#corporate02 > ol{
		width : calc( 920 var( --percentBase ) );
		margin-top : calc( 25 var( --remBase ) );
		border-left : solid 1px var( --color01 );
	}
	#corporate02 > ol > li + li{
		margin-top : calc( 18 var( --remBase ) );
	}
	#corporate02 > ol > li > time{
		display : grid;
		grid-template-columns : calc( 8 * 100% / 919 ) auto;
		column-gap : calc( 14 * 100% / 919 );
		align-items : center;
		justify-content : start;
		font-size : 2.2rem;
		line-height : 1.7;
	}
	#corporate02 > ol > li > time::before{
		width : 100%;
		height : 1px;
	}
	#corporate02 ol ol{
		padding-left : calc( 20 * 100% / 919 );
		margin-top : calc( 18 var( --remBase ) );
	}
	#corporate02 li li{
		grid-template-columns : calc( 93 * 100% / 900 ) 1fr;
		padding-bottom : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.7;
	}
	#corporate02 li li + li{
		margin-top : calc( 18 var( --remBase ) );
	}
	#corporate02 li li time{
		padding-right : calc( 41 * 100% / 93 );
	}
}

/* --------------------------------------------
PHILOSOPHY
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#philosophy01{
		margin-top : calc( 68 var( --remBase ) );
	}
	#philosophy01 hgroup p{
		margin-top : calc( 32 var( --remBase ) );
	}
	#philosophy01 > p{
		padding-inline : calc( 26 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#philosophy01 > p + hgroup{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#philosophy01{
		margin-top : calc( ( 75 - ( 26 * 2 / 3 ) ) var( --remBase ) );
	}
	#philosophy01 hgroup p{
		margin-top : calc( var( --remBase ) );
		margin-top : calc( ( 40 - ( 26 * 1 / 3 ) ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 37 / 26 );
	}
	#philosophy01 > p{
		width : calc( 920 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
	}
	#philosophy01 > p + hgroup{
		margin-top : calc( ( 80 - ( 26 * 1 / 3 ) ) var( --remBase ) );
	}
}
#philosophy02 h3{
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#philosophy02{
		padding-block : calc( 80 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#philosophy02 li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#philosophy02 p{
		padding-inline : calc( 26 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#philosophy02{
		padding-top : calc( ( 120 - ( 26 * 2 / 3 ) ) var( --remBase ) );
		padding-bottom : calc( 70 var( --remBase ) );
		margin-top : calc( 90 var( --remBase ) );
	}
	#philosophy02 ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 40 var( --remBase ) );
		column-gap : calc( 40 * 100% / 1028 );
		width : calc( 1028 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( ( 40 - ( 26 * 1 / 3 ) ) var( --remBase ) );
	}
	#philosophy02 li{
		display : flex;
		flex-direction : column;
		row-gap : calc( 8 var( --remBase ) );
		width : calc( 316 * 100% / 1028 );
	}
	#philosophy02 h3{
		display : grid;
		flex-grow : 1;
		align-items : center;
		justify-content : center;
		font-size : 2.6rem;
		line-height : calc( 37 / 26 );
	}
	#philosophy02 p{
		font-size : 1.6rem;
		line-height : 2;
	}
}
#philosophy03 .column01 p + p{
	margin-top : 1em;
}
@media screen and ( width <= 750px ){
	#philosophy03{
		margin-top : calc( 124 var( --remBase ) );
		margin-bottom : calc( 120 var( --remBase ) );
	}
	#philosophy03 p{
		font-family : "Noto Sans JP" , sans-serif;
		font-size : 1.6rem;
		line-height : 2;
	}
	#philosophy03 .column01{
		margin-top : calc( 40 var( --remBase ) );
	}
	#philosophy03 .column02{
		margin-top : calc( 16 var( --remBase ) );
	}
	#philosophy03 .column02 hgroup{
		margin-top : calc( 8 var( --remBase ) );
	}
	#philosophy03 .column02 hgroup h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 4rem;
	}
	#philosophy03 .column02 > p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#philosophy03{
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		row-gap : calc( ( 68 - ( 26 * 1 / 3 ) ) var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( ( 160 - ( 26 * 2 / 3 ) ) var( --remBase ) );
		margin-bottom : calc( 182 var( --remBase ) );
	}
	#philosophy03 h2{
		grid-row : 1;
		grid-column : 1/3;
	}
	#philosophy03 .column02{
		padding-top : calc( 12 var( --remBase ) );
	}
	#philosophy03 .column02 hgroup{
		margin-top : calc( 8 var( --remBase ) );
	}
	#philosophy03 .column02 hgroup h3{
		margin-top : calc( 13 var( --remBase ) );
	}
	#philosophy03 .column02 > p{
		margin-top : calc( 10 var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact dt label{
	display : grid;
	justify-content : start;
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.3;
	background-color : var( --color0102 );
}
#contact dd{
	font-family : "Noto Sans JP" , sans-serif;
}
#contact :where( input[type="text"] , input[type="email"] , textarea ){
	padding-inline : calc( 8 var( --remBase ) - 1px );
	font-size : 1.6rem;
	font-weight : 300;
	line-height : 1.6;
	background-color : white;
	border : solid 1px #a1a1a1;
	border-radius : calc( 4 var( --remBase ) );
}
#contact :where( input[type="text"] , input[type="email"] , textarea )::placeholder{
	color : #a1a1a1;
}
#contact :where( input[type="text"] , input[type="email"] ){
	height : calc( 40 var( --remBase ) );
}
#contact .mails p{
	margin-top : calc( 9 var( --remBase ) );
	margin-bottom : calc( 10 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.7;
}
#contact .checkboxies input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#contact .checkboxies label{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	font-size : 1.6rem;
	line-height : 1.7;
}
#contact .checkboxies label::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	border : solid 1px #a1a1a1;
	border-radius : calc( 3 var( --remBase ) );
}
#contact .checkboxies label:has( input:checked )::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check01.svg" ) center / contain no-repeat;
}
#contact h4{
	font-weight : 700;
}
#contact .privacies{
	overflow-y : auto;
	background-color : white;
	border : solid 1px #a1a1a1;
	border-radius : calc( 4 var( --remBase ) );
}
#contact .privacies .scroll{
	padding-block : calc( 4 var( --remBase ) );
}
#contact .privacies .scroll *{
	font-size : 1.6rem;
	line-height : 1.7;
	color : #aaa;
}
@media screen and ( width <= 750px ){
	#contact{
		padding-top : calc( 45 var( --remBase ) );
		padding-bottom : calc( 193 var( --remBase ) );
	}
	#contact dl{
		margin-top : calc( 45 var( --remBase ) );
	}
	#contact dl > div + div{
		margin-top : calc( 46 var( --remBase ) );
	}
	#contact dt label{
		align-items : center;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#contact dd{
		margin-top : calc( 6 var( --remBase ) );
	}
	#contact :where( input[type="text"] , input[type="email"] , textarea ){
		width : 100%;
	}
	#contact .names input + input{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contact .checkboxies{
		padding-top : calc( 16 var( --remBase ) );
	}
	#contact .checkboxies li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contact .checkboxies label{
		grid-template-columns : calc( 28 var( --percentBase ) ) auto;
		column-gap : calc( 3 var( --percentBase ) );
	}
	#contact .checkboxies label::before{
		height : calc( 25 var( --remBase ) );
	}
	#contact .checkboxies label:has( input:checked )::after{
		top : calc( 50% - ( 19.77 / 2 ) var( --remBase ) );
		left : calc( 1.87 var( --percentBase ) );
		width : calc( 23.91 var( --percentBase ) );
		height : calc( 19.77 var( --remBase ) );
	}
	#contact textarea{
		height : calc( 195 var( --remBase ) );
		margin-top : calc( 4 var( --remBase ) );
	}
	#contact h4{
		margin-top : calc( 36 var( --remBase ) );
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.3;
		text-align : center;
	}
	#contact .privacies{
		height : calc( 175 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#contact .privacies .scroll{
		padding-inline : calc( 8 * 100% / 368 - 1px );
	}
	#contact .link02{
		margin-top : calc( 45 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contact{
		padding-top : calc( 35 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#contact dl{
		padding-inline : calc( 120 var( --percentBase ) );
		margin-top : calc( 47 var( --remBase ) );
	}
	#contact dl > div{
		display : grid;
		grid-template-columns : calc( 320 * 100% / 1160 ) 1fr;
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #aaa;
	}
	#contact dl > div + div{
		padding-top : calc( 16 var( --remBase ) );
	}
	#contact dt label{
		align-items : center;
		height : 100%;
		padding-block : calc( 22 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 320 );
	}
	#contact dd{
		padding-block : calc( 14 var( --remBase ) );
		padding-inline : calc( 40 * 100% / 840 );
	}
	#contact #contact_company{
		width : calc( 489 * 100% / 760 );
	}
	#contact .names{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 238 * 100% / 760 ) );
		column-gap : calc( 15 * 100% / 760 );
		align-items : center;
		justify-content : start;
	}
	#contact .mails input{
		width : calc( 489 * 100% / 760 );
	}
	#contact .checkboxies ul{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 16 * 100% / 760 );
	}
	#contact .checkboxies label{
		grid-template-columns : calc( 28 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#contact .checkboxies label::before{
		height : calc( 28 var( --remBase ) );
	}
	#contact .checkboxies label:has( input:checked )::after{
		top : calc( 50% - ( 28 - 19.68 + 7.94 ) / 2 var( --remBase ) );
		left : calc( 1.5 var( --remBase ) );
		width : calc( 27.12 var( --remBase ) );
		height : calc( 19.68 var( --remBase ) );
	}
	#contact textarea{
		width : calc( 489 * 100% / 760 );
		height : calc( 123 var( --remBase ) );
	}
	#contact h4{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#contact .privacies{
		width : calc( 924 var( --percentBase ) );
		height : calc( 175 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#contact .privacies .scroll{
		padding-inline : calc( 8 * 100% / 538 - 1px );
	}
	#contact .link02{
		margin-top : calc( 40 var( --remBase ) );
	}
}