@charset "UTF-8";

/* --------------------------------------------
CAMPAIGN
--------------------------------------------- */
#campaign{
	position : relative;
	overflow-x : clip;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	p{
		justify-content : start;
		font-weight : 900;
		color : var( --red );
		text-shadow : 0 calc( 1 * var( --rem ) ) calc( 2 * var( --rem ) ) rgb( 0 0 0 / .3 ) , 0 calc( 1 * var( --rem ) ) calc( 3 * var( --rem ) ) rgb( 0 0 0 / .15 );
		> span{
			&:nth-of-type( 2 ){
				display : flex;
				align-items : baseline;
				justify-content : start;
				> span{
					&:nth-of-type( 3 ){
						span{
							position : relative;
							&::after{
								position : absolute;
								left : 50%;
								display : block;
								aspect-ratio : 1;
								font-size : 0;
								content : "";
								background-color : black;
								border-radius : 50%;
								translate : -50% 0;
							}
						}
					}
				}
			}
		}
	}
	h3{
		font-weight : 900;
		text-shadow : 0 calc( 1 * var( --rem ) ) calc( 2 * var( --rem ) ) rgb( 0 0 0 / .3 ) , 0 calc( 1 * var( --rem ) ) calc( 3 * var( --rem ) ) rgb( 0 0 0 / .15 );
		> span{
			display : flex;
			align-items : baseline;
			justify-content : start;
			&:nth-of-type( 2 ){
				> span{
					&:nth-of-type( 1 ){
						color : var( --red );
					}
					&:nth-of-type( 2 ){
						padding-left : .25em;
					}
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 69 * var( --rem ) );
		padding-bottom : calc( 98 * var( --rem ) );
		background-image : url( "../images/top/campaign/bg_sp.svg" );
		.box-sp{
			width : calc( 728 * var( --viewport ) );
			height : calc( 489 * var( --rem ) );
			padding-top : calc( 58 * var( --rem ) );
			margin-left : calc( 8 * var( --viewport ) );
			background : url( "../images/top/campaign/bg_box_sp.svg" ) center / contain no-repeat;
		}
		p{
			> span{
				&:nth-of-type( 1 ){
					display : block;
					margin-left : calc( 153 * 100% / 728 );
					font-size : calc( 70 * var( --rem ) );
					line-height : calc( 84 / 70 );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( -15 * var( --rem ) );
					margin-left : calc( 243 * var( --rem ) );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 70 * var( --rem ) );
							line-height : calc( 84 / 70 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 60 * var( --rem ) );
							line-height : calc( 72 / 60 );
						}
						&:nth-of-type( 3 ){
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
							> span{
								&::after{
									bottom : calc( -5 * var( --rem ) );
									height : calc( 15 * var( --rem ) );
								}
							}
						}
						&:nth-of-type( 4 ){
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
					}
				}
			}
		}
		h3{
			margin-top : calc( -6 * var( --rem ) );
			> span{
				&:nth-of-type( 1 ){
					margin-left : calc( 77 * 100% / 728 );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
						&:nth-of-type( 3 ){
							font-size : calc( 40 * var( --rem ) );
							line-height : calc( 48 / 40 );
						}
					}
				}
				&:nth-of-type( 2 ){
					margin-top : calc( -3 * var( --rem ) );
					margin-left : calc( 169 * 100% / 728 );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 70 * var( --rem ) );
							line-height : calc( 84 / 70 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 50 * var( --rem ) );
							line-height : calc( 60 / 50 );
						}
					}
				}
			}
		}
		.btn01{
			margin-top : calc( 77 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 82 * var( --rem ) );
		padding-bottom : calc( 66 * var( --rem ) );
		background-image : url( "../images/top/campaign/bg_pc.svg" );
		.box-pc{
			width : min( 1101px , calc( 1101 * var( --viewport ) ) );
			height : calc( 527 * var( --rem ) );
			padding-top : calc( 28 * var( --rem ) );
			margin-inline : auto;
			background : url( "../images/top/campaign/bg_box_pc.svg" ) center / contain no-repeat;
		}
		p{
			display : flex;
			align-items : baseline;
			margin-left : calc( 172 * 100% / 1101 );
			> span{
				&:nth-of-type( 1 ){
					margin-right : calc( 22 * var( --rem ) );
					font-size : calc( 54 * var( --rem ) );
					line-height : calc( 65 / 54 );
				}
				&:nth-of-type( 2 ){
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 120 * var( --rem ) );
							line-height : calc( 144 / 120 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 60 * var( --rem ) );
							line-height : calc( 72 / 60 );
						}
						&:nth-of-type( 3 ){
							font-size : calc( 100 * var( --rem ) );
							line-height : calc( 120 / 100 );
							> span::after{
								bottom : calc( -5 * var( --rem ) );
								height : calc( 15 * var( --rem ) );
							}
						}
						&:nth-of-type( 4 ){
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
					}
				}
			}
		}
		h3{
			display : flex;
			align-items : baseline;
			justify-content : start;
			margin-top : calc( 19 * var( --rem ) );
			margin-left : calc( 96 * 100% / 1101 );
			> span{
				&:nth-of-type( 1 ){
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 72 * var( --rem ) );
							line-height : calc( 86 / 72 );
						}
						&:nth-of-type( 3 ){
							margin-right : calc( 15 * var( --rem ) );
							font-size : calc( 40 * var( --rem ) );
							line-height : calc( 48 / 40 );
						}
					}
				}
				&:nth-of-type( 2 ){
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 70 * var( --rem ) );
							line-height : calc( 84 / 70 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 50 * var( --rem ) );
							line-height : calc( 60 / 50 );
						}
					}
				}
			}
		}
		a{
			margin-top : calc( 29 * var( --rem ) );
		}
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	color : white;
	background-color : var( --red );
	a{
		color : white;
	}
	.logo , .tel{
		width : fit-content;
	}
	.logo{
		display : block;
	}
	.tel{
		display : flex;
		align-items : center;
		span{
			font-weight : 900;
			color : white;
			text-box : trim-both cap alphabetic;
		}
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 78 * var( --rem ) );
		padding-bottom : calc( 120 * var( --rem ) );
		.logo{
			margin-left : calc( 131 * var( --rem ) );
			img{
				height : calc( 90 * var( --rem ) );
			}
		}
		.tel{
			column-gap : calc( 25.92 * var( --rem ) );
			margin-top : calc( 54.3 * var( --rem ) );
			margin-bottom : calc( 98.3 * var( --rem ) );
			margin-left : calc( 135 * var( --rem ) );
			img{
				height : calc( 32.35 * var( --rem ) );
			}
			span{
				font-size : calc( 45 * var( --rem ) );
				line-height : calc( 65 / 45 );
			}
		}
		.links , .policies{
			width : 50%;
			li + li{
				margin-top : calc( 39 * var( --rem ) );
			}
			a{
				font-size : calc( 30 * var( --rem ) );
				line-height : calc( 43 / 30 );
			}
		}
		.links{
			li{
				padding-left : calc( 60 * 100% / 350 );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		flex-direction : column;
		padding-top : calc( 52 * var( --rem ) );
		padding-bottom : calc( 28 * var( --rem ) );
		#toTop{
			position : fixed;
			bottom : 0;
			right : calc( 40 * var( --viewport ) );
			width : auto;
			aspect-ratio : 1;
			img{
				height : calc( 52 * var( --rem ) );
			}
		}
		.links{
			display : flex;
			column-gap : calc( 37 * var( --rem ) );
			align-items : center;
			justify-content : center;
			order : 1;
			a{
				font-size : calc( 18 * var( --rem ) );
				line-height : calc( 23 / 18 );
			}
		}
		.logo , .tel{
			margin-inline : auto;
		}
		.logo{
			order : 2;
			margin-top : calc( 42 * var( --rem ) );
			img{
				height : calc( 65 * var( --rem ) );
			}
		}
		.tel{
			column-gap : calc( 15.44 * var( --rem ) );
			order : 3;
			margin-top : calc( 24.22 * var( --rem ) );
			img{
				height : calc( 24.26 * var( --rem ) );
			}
			span{
				font-size : calc( 30 * var( --rem ) );
				line-height : calc( 43 / 30 );
			}
		}
		.policies{
			display : flex;
			column-gap : calc( 30 * var( --rem ) );
			align-items : center;
			justify-content : start;
			order : 4;
			margin-top : calc( 58 * var( --rem ) );
			a{
				font-size : calc( 16 * var( --rem ) );
				line-height : calc( 23 / 16 );
			}
		}
	}
}