@charset "UTF-8";

/* --------------------------------------------
CONTRACT
--------------------------------------------- */
#contract :where( .fieldsets > * > label , .fieldset > label ){
	display : block;
	margin-bottom : calc( 32 var( --remBase ) );
	font-size : 2rem;
	font-weight : 700;
}
#contract .buttons{
	display : grid;
	grid-auto-flow : column;
	justify-content : center;
}
#contract .buttons button{
	display : grid;
	place-items : center;
	height : calc( 49 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	border-style : solid;
	border-width : 1px;
	border-radius : calc( 8 var( --remBase ) );
}
#contract .buttons button.next[disabled] , #contract .buttons button[type="submit"][disabled]{
	color : var( --base );
	background-color : #b3b3b3;
	border-color : #b3b3b3;
}
#contract .buttons button.next:not( [disabled] ) , #contract .buttons button[type="submit"]:not( [disabled] ){
	color : white;
	background-color : var( --blue );
	border-color : #b3b3b3;
}
#contract .buttons button.prev{
	color : var( --blue02 );
	background-color : var( --base );
	border-color : var( --base );
}
@media screen and ( width <= 750px ){
	#contract .splide__slide{
		padding-top : calc( 70 var( --remBase ) );
	}
	#contract :where( .fieldset , .fieldsets ){
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract .buttons{
		grid-auto-columns : calc( 64 var( --percentBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contract .splide__slide{
		padding-top : calc( 88 var( --remBase ) );
	}
	#contract :where( .fieldset , .fieldsets ){
		margin-top : calc( 64 var( --remBase ) );
	}
	#contract .buttons{
		grid-auto-columns : calc( 64 * 100% / 972 );
		column-gap : calc( 40 * 100% / 972 );
		margin-top : calc( 64 var( --remBase ) );
	}
}
:is( #contract-slide01 , #contract-slide02 ) .wpcf7-form-control-wrap{
	display : grid;
}
:is( #contract-slide01 , #contract-slide02 ) .wpcf7-form-control-wrap:has( .wpcf7-not-valid-tip ){
	display : grid;
	grid-auto-flow : row;
}
:is( #contract-slide01 , #contract-slide02 ) .wpcf7-form-control-wrap:has( .wpcf7-not-valid-tip ) .wpcf7-not-valid-tip{
	grid-row : -1;
	margin-bottom : calc( 8 var( --remBase ) );
}
:is( #contract-slide01 , #contract-slide02 ) :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="url"] , input[type="password"] , select , textarea ){
	padding-inline : 1em;
	font-size : 1.6rem;
	line-height : 1.5;
	color : var( --blue );
	background-color : var( --base );
	border-radius : calc( 8 var( --remBase ) );
}
:is( #contract-slide01 , #contract-slide02 ).is-active :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="url"] , input[type="password"] , select , textarea ){
	border-color : #b3b3b3;
	border-style : solid;
	border-width : 1px;
}
:is( #contract-slide01 , #contract-slide02 ) :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="url"] , input[type="password"] , select ){
	height : calc( 38 var( --remBase ) );
}
:is( #contract-slide01 , #contract-slide02 ) input[type="number"]{
	-moz-appearance : textfield;
}
:is( #contract-slide01 , #contract-slide02 ) input[type="number"]::-webkit-outer-spin-button ,
:is( #contract-slide01 , #contract-slide02 ) input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance : none;
	margin : 0;
}
:is( #contract-slide01 , #contract-slide02 ) input[type="number"]{
	text-align : right;
}
:is( #contract-slide01 , #contract-slide02 ) textarea{
	width : 100%;
	height : calc( 120 var( --remBase ) );
	padding-block : .75em;
}
:is( #contract-slide01 , #contract-slide02 ) select{
	background-image : url( "../images/contract/bg_select.svg" );
	background-repeat : no-repeat;
	background-position-x : calc( 100% - 15.4 var( --remBase ) );
	background-position-y : 50%;
	background-size : auto calc( 7 var( --remBase ) );
}
:is( #contract-slide01 , #contract-slide02 ) .wpcf7-list-item{
	margin-left : 0;
}
:is( #contract-slide01 , #contract-slide02 ) .wpcf7-list-item{
	display : block;
}
:is( #contract-slide01 , #contract-slide02 ) .wpcf7-not-valid-tip{
	display : block;
	font-size : 1.6rem;
	color : var( --red );
}
#contract-slide01 .names div label{
	display : block;
	margin-bottom : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
}
#contract-slide01 .names input{
	width : 100%;
}
#contract-slide01 .contents input{
	position : relative;
	align-self : center;
	border-style : solid;
	border-width : 1px;
	border-radius : 50%;
	appearance : none;
}
#contract-slide01 .contents input::after{
	position : absolute;
	inset : 0;
	display : block;
	margin : auto;
	font-size : 0;
	content : "";
	border-radius : 50%;
	opacity : 0;
}
#contract-slide01 .contents input:checked::after{
	opacity : 1;
}
#contract-slide01 .contents li label{
	position : relative;
}
#contract-slide01 .contents li:not( :last-child ) label{
	display : grid;
	grid-template-rows : 1fr auto auto 1fr;
	align-content : center;
	height : calc( 100 var( --remBase ) );
	background-color : var( --base );
	border-radius : calc( 8 var( --remBase ) );
	outline-width : 1px;
	outline-style : solid;
	outline-color : var( --blue );
	outline-offset : -1px;
}
#contract-slide01 .contents li:not( :last-child ) input{
	grid-row : 1/-1;
	grid-column : 1;
	border-color : var( --blue );
}
#contract-slide01 .contents li:not( :last-child ) input::after{
	background-color : var( --blue );
}
#contract-slide01 .contents li:not( :last-child ) span{
	grid-column : 2;
}
#contract-slide01 .contents li:not( :last-child ) span:nth-of-type( 1 ){
	grid-row : 2;
	font-size : 1.6rem;
	line-height : 1.7;
	color : var( --blue );
	letter-spacing : .04em;
}
#contract-slide01 .contents li:not( :last-child ) span:nth-of-type( 2 ){
	grid-row : 3;
	font-size : 1.2rem;
	line-height : 1.7;
	color : #666;
	letter-spacing : .02em;
}
#contract-slide01 .contents li:last-child label{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	justify-content : start;
}
#contract-slide01 .contents li:last-child input{
	grid-row : 1;
	grid-column : 1;
	border-color : var( --base );
}
#contract-slide01 .contents li:last-child input::after{
	background-color : var( --base );
}
#contract-slide01 .contents li:last-child span{
	grid-row : 1;
	grid-column : 2;
	font-size : 1.6rem;
	line-height : 1.7;
}
#contract-slide01 .contents textarea{
	margin-top : calc( 8 var( --remBase ) );
}
#contract-slide01 :where( .periods , .delay , .limits ) span:not( [class] ){
	font-size : 1.4rem;
	font-weight : 500;
	line-height : 1.75;
	letter-spacing : .04em;
}
#contract-slide01 :where( .periods , .delay , .limits ) :where( input[type="text"] , input[type="number"] , input[type="email"] , input[type="url"] , input[type="password"] ){
	width : 100%;
}
#contract-slide01 .periods > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#contract-slide01 .rewards li{
	counter-increment : no;
}
#contract-slide01 .rewards li{
	display : grid;
	align-items : center;
	justify-content : start;
}
#contract-slide01 .rewards li::before{
	font-size : 1.6rem;
	font-weight : 700;
	content : counter( no ) ")";
}
#contract-slide01 .rewards li span{
	font-size : 1.4rem;
}
#contract-slide01 .rewards li :where( input[type="text"] , input[type="number"] , input[type="email"] , input[type="url"] , input[type="password"] ){
	width : 100%;
}
#contract-slide01 .delay > div > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#contract-slide01 .delay > div > .wpcf7-form-control-wrap label{
	display : grid;
	align-items : center;
	justify-content : start;
}
#contract-slide01 .delay > div > .wpcf7-form-control-wrap label input{
	accent-color : var( --base );
	height : calc( 17 var( --remBase ) );
}
#contract-slide01 .delay :where( input[type="text"] , input[type="number"] , input[type="email"] , input[type="url"] , input[type="password"] ){
	width : 100%;
}
#contract-slide01 .limits > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	#contract-slide01 .names li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract-slide01 .names li > div > label:nth-of-type( n+2 ){
		margin-top : calc( 24 var( --remBase ) );
	}
	#contract-slide01 .contents li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contract-slide01 .contents li:not( :last-child ) label{
		grid-template-columns : calc( 19 * 100% / 292.5 ) 1fr;
		column-gap : calc( 18.5 * 100% / 292.5 );
		padding-left : calc( 18.5 var( --percentBase ) );
		padding-right : calc( 16 var( --percentBase ) );
	}
	#contract-slide01 .contents li:not( :last-child ) input{
		height : calc( 19 var( --remBase ) );
	}
	#contract-slide01 .contents li:not( :last-child ) input::after{
		width : calc( 9 * 100% / 17 );
		height : calc( 9 var( --remBase ) );
	}
	#contract-slide01 .contents li:last-child label{
		grid-template-columns : calc( 19 * 100% / 324.5 ) 1fr;
		column-gap : calc( 18.5 * 100% / 324.5 );
		padding-inline : calc( 2.5 var( --percentBase ) );
	}
	#contract-slide01 .contents li:last-child input{
		height : calc( 19 var( --remBase ) );
	}
	#contract-slide01 .contents li:last-child input::after{
		width : calc( 9 * 100% / 17 );
		height : calc( 9 var( --remBase ) );
	}
	#contract-slide01 .periods > div{
		grid-template-columns : calc( 95 var( --percentBase ) ) auto calc( 52 var( --percentBase ) ) auto calc( 52 var( --percentBase ) ) auto auto;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
	}
	#contract-slide01 .rewards li{
		grid-template-columns : calc( 175 var( --percentBase ) ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
	}
	#contract-slide01 .rewards li::before{
		grid-row : 1;
		grid-column : 1/-1;
	}
	#contract-slide01 .rewards li:last-child span:nth-of-type( 1 ){
		grid-row : 2;
		grid-column : 1/-1;
	}
	#contract-slide01 .rewards li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#contract-slide01 .payments > div + div{
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract-slide01 .payment select{
		width : 100%;
	}
	#contract-slide01 .delay > div > div{
		grid-template-columns : auto calc( 52 var( --percentBase ) ) auto auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#contract-slide01 .delay > div > .wpcf7-form-control-wrap{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contract-slide01 .delay > div > .wpcf7-form-control-wrap label{
		grid-template-columns : calc( 17 var( --percentBase ) ) auto;
		column-gap : calc( 11.5 var( --percentBase ) );
	}
	#contract-slide01 .limits > div{
		grid-template-columns : calc( 52 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contract-slide01 .names{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 456 * 100% / 972 ) );
		align-items : start;
		justify-content : space-between;
	}
	#contract-slide01 .names li > div > label:nth-of-type( n+2 ){
		margin-top : calc( 32 var( --remBase ) );
	}
	#contract-slide01 .contents ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 310 * 100% / 972 ) );
		row-gap : calc( 32 var( --remBase ) );
		justify-content : space-between;
	}
	#contract-slide01 .contents li:not( :last-child ) label{
		grid-template-columns : calc( 19 * 100% / 275.5 ) 1fr;
		column-gap : calc( 18.5 * 100% / 275.5 );
		padding-left : calc( 18.5 * 100% / 310 );
		padding-right : calc( 16 * 100% / 310 );
	}
	#contract-slide01 .contents li:not( :last-child ) input{
		height : calc( 19 var( --remBase ) );
	}
	#contract-slide01 .contents li:not( :last-child ) input::after{
		width : calc( 9 * 100% / 17 );
		height : calc( 9 var( --remBase ) );
	}
	#contract-slide01 .contents li:last-child{
		grid-column : 1/-1;
	}
	#contract-slide01 .contents li:last-child label{
		grid-template-columns : calc( 19 * 100% / 967 ) 1fr;
		column-gap : calc( 18.5 * 100% / 967 );
		padding-inline : calc( 2.5 * 100% / 972 );
	}
	#contract-slide01 .contents li:last-child input{
		height : calc( 19 var( --remBase ) );
	}
	#contract-slide01 .contents li:last-child input::after{
		width : calc( 9 * 100% / 17 );
		height : calc( 9 var( --remBase ) );
	}
	#contract-slide01 .periods > div{
		grid-template-columns : repeat( 2 , calc( 95 * 100% / 972 ) auto calc( 52 * 100% / 972 ) auto calc( 52 * 100% / 972 ) auto auto );
		column-gap : calc( 15 * 100% / 972 );
	}
	#contract-slide01 .periods > div > span:nth-of-type( 7n ){
		margin-left : calc( -9 var( --remBase ) );
	}
	#contract-slide01 .rewards li{
		grid-template-columns : auto calc( 547 * 100% / 972 ) auto calc( 175 * 100% / 972 ) auto;
		column-gap : calc( 20 * 100% / 972 );
	}
	#contract-slide01 .rewards li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contract-slide01 .rewards li:last-child::before{
		grid-column : 1;
	}
	#contract-slide01 .rewards li:last-child span:nth-of-type( 1 ){
		grid-column : 3;
	}
	#contract-slide01 .rewards li:last-child span:nth-of-type( 2 ){
		grid-column : 4;
	}
	#contract-slide01 .rewards li:last-child span:nth-of-type( 3 ){
		grid-column : 5;
	}
	#contract-slide01 .payments{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 20 * 100% / 972 );
	}
	#contract-slide01 .payment select{
		width : calc( 310 * 100% / 476 );
	}
	#contract-slide01 .delay > div > div{
		grid-template-columns : auto calc( 52 * 100% / 476 ) auto auto;
		column-gap : calc( 20 * 100% / 476 );
	}
	#contract-slide01 .delay > div > .wpcf7-form-control-wrap{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contract-slide01 .delay > div > .wpcf7-form-control-wrap label{
		grid-template-columns : calc( 17 * 100% / 476 ) auto;
		column-gap : calc( 11.5 * 100% / 476 );
	}
	#contract-slide01 .delay > div > .wpcf7-form-control-wrap label input{
		height : calc( 17 var( --remBase ) );
	}
	#contract-slide01 .limits > div{
		grid-template-columns : calc( 52 * 100% / 972 ) auto;
		column-gap : calc( 20 * 100% / 972 );
	}
}
#contract-slide02 .fieldsets > label{
	display : block;
	font-size : 2rem;
	font-weight : 700;
}
#contract-slide02 :where( .addresses , .headCounts , .managers ) li label{
	display : block;
	margin-bottom : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
}
#contract-slide02 :where( .addresses , .headCounts , .managers ) :where( input[type="text"] , input[type="number"] , input[type="email"] , input[type="url"] , input[type="password"] ){
	width : 100%;
}
#contract-slide02 .tels div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#contract-slide02 .tels div span:not( [class] ){
	font-size : 1.4rem;
	line-height : 1.75;
	letter-spacing : .04em;
}
#contract-slide02 .tels :where( input[type="text"] , input[type="number"] , input[type="email"] , input[type="url"] , input[type="password"] ){
	width : 100%;
}
@media screen and ( width <= 750px ){
	#contract-slide02 .fieldsets{
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract-slide02 .fieldsets > label{
		margin-bottom : calc( 24 var( --remBase ) );
	}
	#contract-slide02 :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="url"] , input[type="password"] , select , textarea ){
		width : 100%;
	}
	#contract-slide02 :where( .addresses , .headCounts , .managers ) li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#contract-slide02 :where( #contract_companyZip , #contract_companyAddress01 ){
		width : calc( 164 var( --percentBase ) );
	}
	#contract-slide02 .tels > div{
		grid-template-columns : repeat( 2 , calc( 80 var( --percentBase ) ) auto ) calc( 80 var( --percentBase ) );
		column-gap : calc( 15 var( --percentBase ) );
	}
	#contract-slide02 .representativs span + label{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contract-slide02 .fieldsets{
		margin-top : calc( 64 var( --remBase ) );
	}
	#contract-slide02 .fieldsets > label{
		margin-bottom : calc( 32 var( --remBase ) );
	}
	#contract-slide02 :where( #contract_companyName , #contract_companyAddress02 , #contract_companyAddress03 , #contract_site ){
		width : calc( 456 * 100% / 972 );
	}
	#contract-slide02 .addresses li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract-slide02 :where( #contract_companyZip , #contract_companyAddress01 ){
		width : calc( 164 * 100% / 972 );
	}
	#contract-slide02 .tels > div{
		grid-template-columns : repeat( 2 , calc( 80 * 100% / 972 ) auto ) calc( 80 * 100% / 972 );
		column-gap : calc( 15 * 100% / 972 );
	}
	#contract-slide02 .representativs{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 60 * 100% / 972 );
	}
	#contract-slide02 .representativs > label{
		grid-row : 1;
	}
	#contract-slide02 .representativs > span{
		grid-row : 2;
	}
	#contract-slide02 :where( .headCounts , .managers ) ul{
		display : grid;
		column-gap : calc( 40 * 100% / 972 );
		justify-content : start;
	}
	#contract-slide02 :where( .headCounts , .managers ) label{
		grid-row : 1;
	}
	#contract-slide02 :where( .headCounts , .managers ) input{
		grid-row : 2;
	}
	#contract-slide02 .headCounts ul{
		grid-template-columns : repeat( 3 , calc( 272 * 100% / 972 ) );
	}
	#contract-slide02 .managers ul{
		grid-template-columns : repeat( 2 , calc( 272 * 100% / 972 ) );
		row-gap : calc( 32 var( --remBase ) );
	}
}
#contract-slide03 dl + dl{
	border-top : solid 1px var( --base );
}
#contract-slide03 dt{
	font-size : 2rem;
	font-weight : 700;
}
#contract-slide03 dd{
	font-size : 1.6rem;
	font-weight : 500;
	line-height : 1.5;
}
@media print , screen and ( width > 750px ){
	#contract-slide03 .title02{
		margin-bottom : calc( 64 var( --remBase ) );
	}
	#contract-slide03 dl + dl{
		padding-top : calc( 40 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract-slide03 dl > div{
		display : grid;
		grid-template-columns : calc( 204 * 100% / 972 ) 1fr;
		column-gap : calc( 32 * 100% / 972 );
		align-items : start;
		justify-content : start;
	}
	#contract-slide03 dl > div + div{
		margin-top : calc( 40 var( --remBase ) );
	}
	#contract-slide03 dd li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
THANKS
--------------------------------------------- */
#thanks p:has( strong ){
	font-weight : 700;
	text-align : center;
}
#thanks p:has( strong ) + p{
	font-size : 1.6rem;
	font-weight : 500;
	line-height : 1.5;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#thanks p:has( strong ){
		margin-top : calc( 40 var( --remBase ) );
		font-size : 4.8rem;
	}
	#thanks p:has( strong ) + p{
		margin-top : calc( 40 var( --remBase ) );
	}
	#thanks .blue{
		margin-top : calc( 40 var( --remBase ) );
	}
	#thanks .base{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#thanks p:has( strong ){
		margin-top : calc( 64 var( --remBase ) );
		font-size : 5.6rem;
	}
	#thanks p:has( strong ) + p{
		margin-top : calc( 64 var( --remBase ) );
	}
	#thanks .blue{
		margin-top : calc( 64 var( --remBase ) );
	}
	#thanks .base{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
PRIVACY
--------------------------------------------- */
#privacy h1{
	margin-bottom : 2lh;
}
#privacy h2{
	font-size : 2rem;
	font-weight : 700;
}
#privacy :where( p , li , span , dt , dd ){
	font-size : 1.6rem;
	font-weight : 500;
	line-height : 1.5;
}
#privacy *[data-before]{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	justify-content : start;
}
#privacy > ul > li > ul > li > ul{
	padding-left : 1.5em;
}
#privacy > ul > li > ul > li > ul > li > ul{
	padding-left : 1.5em;
}
#privacy address{
	font-style : normal;
}
#privacy address dl > div{
	font-size : 0;
}
#privacy address dl dt , #privacy address dl dd{
	display : inline;
}
#privacy address a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
@media screen and ( width <= 750px ){
	#privacy{
		padding-bottom : calc( ( 180 - 13 ) var( --remBase ) );
	}
	#privacy #privacy > ul{
		margin-top : calc( 100 var( --remBase ) );
	}
	#privacy #privacy > ul > li + li{
		margin-top : calc( 100 var( --remBase ) );
	}
	#privacy #privacy h2 + :where( p , ul ){
		margin-top : calc( 50 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#privacy{
		padding-bottom : calc( ( 125 - 8 ) var( --remBase ) );
	}
	#privacy > ul{
		margin-top : calc( 60 var( --remBase ) );
	}
	#privacy > ul > li + li{
		margin-top : calc( 60 var( --remBase ) );
	}
	#privacy h2 + :where( p , ul ){
		margin-top : calc( 10 var( --remBase ) );
	}
}