/* CSS Document */

@import url('//fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap');
/*
font-family: 'Kiwi Maru', serif;
*/

:root{
	--base-color: #221714;
	--base-color-rgb: 24, 23, 20;
	--primary-color: #f00;
	--primary-color-rgb: 255, 0, 0;
	--base-font: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo, sans-serif;
	--decoration-font: 'Kiwi Maru';
	--wrap: min(calc(100% - 2em), 1000px);
	}

main{
	all: initial;
	color: var(--base-color);
	fill: var(--base-color);
	font-family: var(--base-font);
	font-feature-settings: "palt" 1;
	}
	main #pageTop{
		position: -webkit-sticky;
		position: sticky;
		display: block;
		bottom: 0;
		width: min(calc(100% - 2em), 1160px);
		height: 0;
		margin: auto;
		padding: 0;
		transform: translateY(-1em);
		z-index: 10;
		}
		main #pageTop:before,
		main #pageTop:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 1em;
			height: 1em;
			font-size: min(10vw, 60px);
			}
		main #pageTop:before{
			background: var(--primary-color);
			border-radius: 100%;
			}
		main #pageTop:after{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.38 17.1"><path d="M30.39,17.1c-.25,0-.51-.1-.7-.29L15.69,2.81,1.69,16.81c-.39,.39-1.02,.39-1.4,0-.39-.39-.39-1.02,0-1.4L15.69,0l15.4,15.4c.39,.39,.39,1.02,0,1.4-.19,.19-.45,.29-.7,.29Z"/></svg>');
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: 50%;
			background: #fff;
			}
	main .wrap{
		width: var(--wrap);
		max-width: var(--wrap);
		}

#wrapper{
	overflow: visible;
	}

:where(#application,#terms){}
	:where(#application,#terms) h2{
		font-size: min(6vw, 2.25em);
		font-family: var(--decoration-font), var(--base-font);
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.125em;
		}
		:where(#application,#terms) h2:before{
			content: "〈";
			margin-right: 0.05em;
			}
		:where(#application,#terms) h2:after{
			content: "〉";
			margin-left: 0.05em;
			}

:is(#application h3,#inquiry h2){
	position: relative;
	padding-bottom: 0.1em;
	color: #fff;
	font-size: min(5vw, 1.5em);
	font-family: var(--decoration-font), var(--base-font);
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	}
	:is(#application h3,#inquiry h2):before,
	:is(#application h3,#inquiry h2):after{
		content: "";
		position: absolute;
		z-index: -1;
		}
	:is(#application h3,#inquiry h2):before{
		top: 50%;
		left: 0;
		width: 100%;
		height: 0;
		border-top: 4px dotted var(--primary-color);
		transform: translateY(-2px);
		}
	:is(#application h3,#inquiry h2):after{
		top: 0;
		left: 50%;
		width: min(70%, 310px);
		height: 100%;
		background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 301 34"><polygon fill="%23ff0000" points="301 34 0 34 15 17 0 0 301 0 286 17 301 34"/></svg>');
		background-size: cover;
		border: 0 solid #fff;
		border-width: 0 20px;
		transform: translateX(-50%);
		}

#campaignEnd{
	padding: 1em;
	color:  var(--primary-color);
	font-size: min(6vw, 2.25em);
    font-family: var(--decoration-font), var(--base-font);
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.125em;
	}

#hero{
	position: relative;
	padding: var(--space) 0;
	overflow: hidden;
	}
	#hero:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1452 691"><path d="M656.6,691h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm281.4,0h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm-187.6,0H50V0H0V691Zm93.8,0h45V0h-45V691ZM1407,0V691h45V0h-45Zm-187.6,691h45V0h-45V691Zm-93.8,0h45V0h-45V691Zm187.6,0h45V0h-45V691Zm-469,0h45V0h-45V691Zm-93.8,0h45V0h-45V691Zm281.4,0h45V0h-45V691Zm-93.8,0h45V0h-45V691Z"/></svg>');
		-webkit-mask-repeat: repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% auto;
		background: #fff8ca;
		z-index: -1;
		}
	#hero h1{
		display: none;
		}
	#hero .wrap{
		display: grid;
		justify-content: center;
		}

#heroTitle{}
	#heroTitle svg{
		font-size: min(38vw, 330px);
		}

#heroLogo{
	margin: 0 0 -2em 0;
	text-align: center;
	order: -1;
	}
	#heroLogo:before{
		content: "";
		position: absolute;
		top: 2em;
		left: 50%;
		width: min(100%, 1080px);
		height: 100%;
		background: url("../images/heroLogoBg.svg") top center no-repeat;
		transform: translateX(-50%);
		z-index: -1;
		}
	#heroLogo svg{
		font-size: min(30vw, 250px);
		}

#lead{
	padding: var(--space) 0;
	}
	#lead p{
		font-size: min(4vw, 1.4375em);
		font-family: var(--decoration-font), var(--base-font);
		font-weight: bold;
		text-align: center;
		line-height: 1.5em;
		letter-spacing: 0.035em;
		}

#application{
	padding: 0 0 var(--space) 0;
	}
	#application section{
		padding: var(--space) 0;
		overflow: hidden;
		}

#applicationPeriod{}
	#applicationPeriod h3+div{
		margin-top: 1em;
		}
	#applicationPeriod p{
		color: var(--primary-color);
		font-size: min(5.6vw, 2.4em);
		font-family: var(--decoration-font), var(--base-font);
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.025em;
		}
		#applicationPeriod p span{
			font-size: 1.4em;
			}
	#applicationPeriod figure{
		margin-top: var(--space);
		}
		#applicationPeriod figure ul{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 1.5em;
			list-style: none;
			}
		#applicationPeriod figure li{
			position: relative;
			padding-top: 96%;
			}
		#applicationPeriod figure img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}

#applicationProduct{
	display: grid;
	}
	#applicationProduct h3{
		letter-spacing: 1.5em;
		text-indent: 1.5em;
		order: -2;
		}
	#applicationProduct h3+div{
		display: grid;
		margin-top: var(--space);
		}
	#applicationProduct h3+div+div{
		display: flex;
		justify-content: center;
		}
	#applicationProduct dl{
		display: grid;
		grid-gap: 1em;
		align-content: flex-start;
		}
	#applicationProduct dt{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: calc(1.5em * 2);
		font-size: min(3.5vw, 1.53125em);
		letter-spacing: 0.08em;
		font-weight: bold;
		text-align: center;
		line-height: 1.5em;
		}
	#applicationProduct dd{}
		#applicationProduct dd:nth-of-type(1){
			padding: 0.3em;
			background: #29abe2;
			border-radius: 3em;
			color: #fff;
			font-size: min(3.8vw, 1.3125em);
			letter-spacing: 0.08em;
			font-weight: bold;
			text-align: center;
			order: -1;
			}
		#applicationProduct dd:nth-of-type(2){
			text-align: center;
			}
		#applicationProduct dd img{
			width: 100%;
			height: auto;
			}
	#applicationProduct figure{
		margin-top: var(--space);
		text-align: center;
		order: -1;
		}
		#applicationProduct figure svg{
			fill: var(--base-color);
			font-size: min(30vw, 215.97px);
			}
	#applicationProduct ul{
		display: grid;
		grid-gap: 1em;
		list-style: none;
		}
	#applicationProduct li{
		padding-left: 1.4em;
		text-indent: -1.4em;
		font-size: 0.9em;
		letter-spacing: 0.04em;
		line-height: 1.5em;
		}

#applicationEntry{}
	#applicationEntry h3+div{
		margin-top: var(--space);
		text-align: center;
		}
	#applicationEntry a{
		fill: transparent;
		}
	#applicationEntry svg{
		width: min(100%, 936px);
		height: auto;
		}

#applicationQualification{
	font-feature-settings: normal;
	}
	#applicationQualification h3+div{
		margin-top: var(--space);
		}
	#applicationQualification h3+div+div{
		display: flex;
		justify-content: center;
		margin-top: 1em;
		}
	#applicationQualification p{
		font-size: min(5vw, 1.43745em);
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.02em;
		line-height: 1.5em;
		}
	#applicationQualification ul{
		display: grid;
		grid-gap: 1em;
		list-style: none;
		}
	#applicationQualification li{
		padding-left: 1.4em;
		text-indent: -1.4em;
		font-size: 0.9em;
		letter-spacing: 0.04em;
		line-height: 1.5em;
		}

#terms{
	padding: 0 0 var(--space) 0;
	}
	#terms header{
		padding: 0;
		}
	#terms section{
		padding: var(--space) 0 0 0;
		}
		#terms section div+div{
			margin-top: 1em;
			}
		#terms section p{
			font-size: 0.93em;
			letter-spacing: 0.06em;
			line-height: 1.65em;
			}
		#terms section ul{
			display: grid;
			grid-gap: 0.5em;
			list-style: none;
			}
			#terms section ul li{
				padding-left: 1.15em;
				text-indent: -1.15em;
				}
				#terms section ul li:before{
					content: "●";
					margin-right: 0.1em;
					}
		#terms section ol{
			display: grid;
			grid-gap: 0.5em;
			list-style: none;
			}
			#terms section ol li{
				padding-left: 1.75em;
				text-indent: -1.75em;
				}
		#terms section li{
			font-size: 0.93em;
			letter-spacing: 0.06em;
			line-height: 1.5em;
			}
	#terms h2+div{
		position: relative;
		margin-top: 1em;
		padding-top: var(--space);
		}
		#terms h2+div:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: currentColor;
			border-radius: 2px;
			}
		#terms h2+div p{
			font-size: 0.93em;
			letter-spacing: 0.11em;
			line-height: 1.7em;
			}
	#terms h3{
		position: relative;
		padding: 0.8em;
		font-size: min(4vw, 1.28em);
		font-weight: bold;
		background: #e8e8e8;
		border-radius: 9px;
		letter-spacing: 0.02em;
		cursor: pointer;
		}
		#terms h3:before{
			content: "";
			position: absolute;
			top: 50%;
			right: 0.5em;
			width: 1.6em;
			height: 1.6em;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.38 16.69"><path d="M15.69,16.69c-.25,0-.51-.1-.7-.29L.29,1.69C-.1,1.31-.1,.68,.29,.29,.68-.1,1.31-.1,1.69,.29L15.69,14.29,29.69,.29c.39-.39,1.02-.39,1.4,0,.39,.39,.39,1.02,0,1.4l-14.7,14.7c-.19,.19-.45,.29-.7,.29Z" /></svg>');
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			background: currentColor;
			transform: translateY(-50%);
			}
	#terms h3+div{
		display: block;
		margin-top: 2em;
		transform-origin: center top;
		}

#inquiry{}
	#inquiry h2+div{
		margin: min(3em, var(--space)) 0;
		}
	#inquiry h2+div+div{
		display: flex;
		justify-content: center;
		}
	#inquiry p{
		font-size: 1.125em;
		line-height: 1.6em;
		letter-spacing: 0.05em;
		text-align: center;
		}
	#inquiry a{
		display: block;
		width: min(100%, 18em);
		padding: 0.6em 1em;
		border: 3px solid currentColor;
		border-radius: 2em;
		color: var(--primary-color);
		font-size: 1.25em;
		font-weight: bold;
		letter-spacing: 0.13em;
		text-decoration: none;
		text-align: center;
		}
		#inquiry a:hover{
			background: var(--primary-color);
			border-color: var(--primary-color);
			color: #fff;
			}

#information{
	padding: var(--space) 0;
	}
	#information header{
		display: grid;
		justify-items: center; 
		padding: 0;
		}
		#information header p{
			font-weight: bold;
			line-height: 1.75em;
			letter-spacing: 0.04em;
			}
		#information header figure{
			margin-bottom: var(--space);
			order: -1;
			}
		#information header svg{
			font-size: min(7vw, 40px);
			}
	#information h2{
		display: none;
		}
	#information h3{
		color: var(--primary-color);
		font-size: clamp(1.5em, 1.4vw + 1em, 2.5em);
		font-family: var(--decoration-font), var(--base-font);
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.065em;
		line-height: 1.55em;
		}
	#information h3+div{
		margin-top: var(--space);
		}

#informationFlow{}
	#informationFlow h3+div{
		display: flex;
		justify-content: center;
		}
	#informationFlow dl{
		position: relative;
		}
		#informationFlow dl:nth-of-type(-n+2){}
			#informationFlow dl:nth-of-type(-n+2):before{
				content: "";
				position: absolute;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.42 47.67"><polygon points="17.59 0 15.47 2.12 35.68 22.33 0 22.33 0 25.33 35.68 25.33 15.47 45.55 17.59 47.67 41.42 23.83 17.59 0"/></svg>');
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-position: center;
				-webkit-mask-size: contain;
				background: var(--primary-color);
				}
	#informationFlow dt{
		display: none;
		}
	#informationFlow svg{
		width: 100%;
		height: auto;
		}

#logo{
	position: relative;
	padding: var(--space) 0;
	text-align: center;
	overflow: hidden;
	}
	#logo:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1452 691"><path d="M656.6,691h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm281.4,0h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm-187.6,0h45V0h-45V691Zm-187.6,0H50V0H0V691Zm93.8,0h45V0h-45V691ZM1407,0V691h45V0h-45Zm-187.6,691h45V0h-45V691Zm-93.8,0h45V0h-45V691Zm187.6,0h45V0h-45V691Zm-469,0h45V0h-45V691Zm-93.8,0h45V0h-45V691Zm281.4,0h45V0h-45V691Zm-93.8,0h45V0h-45V691Z"/></svg>');
		-webkit-mask-repeat: repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% auto;
		background: #fff8ca;
		z-index: -1;
		}
	#logo svg{
		font-size: min(30vw, 216px);
		}




/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
}
@media (max-width: 991px) {
/*991px以下*/
#applicationPeriod{}
	#applicationPeriod p{
		padding-left: 3em;
		text-indent: -6em;
		}
#applicationProduct{}
	#applicationProduct h3+div{
		grid-template-columns: repeat(2, 1fr);
		}
}


/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
:root{
	--space: 2em;
	}
#applicationPeriod{}
	#applicationPeriod figure{}
		#applicationPeriod figure ul{
			grid-gap: 1em;
			}
#applicationProduct{}
	#applicationProduct h3+div{
		grid-gap: 2em 1em;
		}
#informationFlow{}
	#informationFlow h3+div{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		}
	#informationFlow dl{
		text-align: center;
		}
		#informationFlow dl:nth-of-type(-n+2){
			width: min(60%, 198px);
			margin-bottom: 4em;
			}
			#informationFlow dl:nth-of-type(-n+2):before{
				top: 100%;
				left: 50%;
				width: 2em;
				height: 2em;
				transform: translate(-50%, 1em) rotate(90deg);
				}
		#informationFlow dl:nth-of-type(3){
			width: min(100%, 390px);
			}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#applicationPeriod{}
	#applicationPeriod figure{}
		#applicationPeriod figure ul{
			grid-gap: 1.5em;
			}
#applicationProduct{}
	#applicationProduct h3+div{
		grid-gap: var(--space) 2em;
		order: 1;
		}
	#applicationProduct h3+div+div{
		margin-top: 1em;
		}
#informationFlow{}
	#informationFlow dl{}
		#informationFlow dl:nth-of-type(-n+2){
			width: min(25%, 198px);
			margin-right: 4em;
			}
			#informationFlow dl:nth-of-type(-n+2):before{
				top: 50%;
				right: -0.75em;
				width: 2.5em;
				height: 2.5em;
				transform: translate(100%, -50%)
				}
		#informationFlow dl:nth-of-type(3){
			width: min(50%, 390px);
			}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
:root{
	--space: 3em;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
:root{
	--space: 4em;
	}
#applicationProduct{}
	#applicationProduct h3+div{
		grid-template-columns: repeat(3, 1fr);
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}