@charset "utf-8";
:root{
	--default-color-black: #2c2a29;
	--content-width-sp: 90vw;
	--bg-color-blue: #89e9ff;
	--bg-color-gray: #f5f7fa;
	--content-color-pink: #ee549e;
	--content-color-pink-d: #e91e8c;
	--content-color-blue: #007cdd;
	--content-color-orange: #f56a00;
	--content-color-yellow: #ffec60;
	--content-color-red: #e8144a;
	--content-color-line: #06c755;
	--content-border_yellow: linear-gradient(transparent 70%, #ffec60 70%);	
}

.contents {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 3.6vw;
	line-height: 1.5;
	color: var(--default-color-black);
	background: var(--bg-color-blue) url("../images/body-bg-sp.png") no-repeat top center / 100%;
	a {
		text-decoration: none;
	}
	img {
        width: 100%;
		height: auto;
    }
	.inner {
        width: var(--content-width-sp);
		max-width: 100%;
        margin: 0 auto;
	}
}
.nosp {
	display: none!important;
}

/*----------------------------------------------
メインビジュアル
------------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 113.33vw;
    background: url("../images/main-bg-sp.png") no-repeat top center;
    background-size: 100%;
	position: relative;
	.title {
		width: 93vw;
		margin: 0 auto;
		padding-top: 10vw;
	}
	.kikan {
		width: 88vw;
		margin: 0 auto;
	}
	.oojiro {
		position: absolute;
		left: 1vw;
		bottom: 2vw;
		width: 20vw;
	}
}

/*-----------------------------------------
キャンペーン内容
-------------------------------------------*/
#campaign {
	width: 100%;
	padding-bottom: 8vw;
	h2 {
		margin-bottom: 5vw;
	}
	.cpn-box {
		width: 100%;
		padding-bottom: 13vw;
		border-radius: 16px;
		border-style: solid;
		border-width: 4px;
		text-align: center;
		position: relative;
		&:not(:last-of-type) {
			margin-bottom: 24px;
		}
		&.no1 {
			border-color: var(--content-color-pink);
			background: #fff url("../images/cpn1-bg-sp.png") no-repeat bottom center / 100%;
		}
		&.no2 {
			border-color: var(--content-color-blue);
			background: #fff url("../images/cpn2-bg-sp.png") no-repeat bottom center / 100%;
		}
		&.no3 {
			border-color: var(--content-color-orange);
			background: #fff url("../images/cpn3-bg-sp.png") no-repeat bottom center / 100%;
		}
	}
	.no {
		width: 11vw;
		position: absolute;
		left: 3vw;
		top: -5px;
	}
	h3 {
		margin-bottom: 32px;
		img {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
	}
	.conts {
		width: 78vw;
		margin: 0 auto;
		margin-bottom: 32px;
	}
	.text {
		width: 78vw;
		margin: 0 auto;
		background-color: #F5F5F5;
		font-size: 3.0vw;
		text-align: left;
		padding: 3vw 5vw;
		margin-bottom: 40px;
		position: relative;
		&::before {
			content: "";
			display: inline-block;
			width: 11vw;
			height: 16vw;
			background: url("../images/cpn1-gakusei-caren.png") no-repeat;
			position: absolute;
			left: -4vw;
			bottom: -10vw;
			background-size: contain;
		}
		&::after {
			content: "";
			display: inline-block;
			width: 10vw;
			height: 16vw;
			background: url("../images/cpn1-gakusei-oojiro.png") no-repeat;
			position: absolute;
			right: -4vw;
			bottom: -10vw;
			background-size: contain;
		}
	}
	.btn {
		width: 70vw;
		margin: 0 auto;
		text-align: center;
		a {
			display: block;
			color: #fff;
			font-size: 3.6vw;
			padding: 3vw;
			border-radius: 7vw;
			position: relative;
			&::after {
				font-family: "Material Symbols Rounded";
				font-weight: 400;
				font-size: 4.5vw;
				position: absolute;
				right: 2vw;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.no1 & a {
			background-color: var(--default-color-black);
			&::after {
				content: "\e313";
			}
		}
		.no2 & a {
			background-color: var(--content-color-blue);
			&::after {
				content: "\e315";
			}
		}
		.no3 & a {
			background-color: var(--content-color-orange);
			&::after {
				content: "\e315";
			}
		}
		&.insta {
			margin-top: 3vw;
			a {
				background-color: #9C27B0;
				&::before {
					content: "";
					width: 4vw;
					height: 4vw;
					display: inline-block;
					background: url("../images/icon-insta-white.svg") no-repeat center center / contain;
					margin-right: 1vw;
					transform: translateY(0.5vw);
				}
			}
		}
	}
	.note {
		width: 78vw;
		margin: 32px auto 0;
		font-size: 3.0vw;
		text-align: left;
	}
	.oojiro {
		width: 23vw;
		position: absolute;
		right: -3vw;
		top: 12vw;
	}

}
/*-----------------------------------------
バナー
-----------------------------------------*/
#bnrarea {
	padding: 0 0 10vw;
	text-align: center;
	.text {
		font-size: 4.8vw;
		line-height: 1.3;
		font-weight: 700;
		margin-bottom: 1vw;
		span {
			display: inline-block;
			position: relative;
		}
		&::before {
			content: "＼";
			font-size: 7.0vw;
		}
		&::after {
			content: "／";
			font-size: 7.0vw;
		}
	}
	.bnr {
		width: 90vw;
		margin: 0 auto;
	}
}
/*------------------------------------------------
応募方法
--------------------------------------------------*/
#oubo {
    width: 100%;
	background-color: var(--bg-color-gray);
    padding: 10vw 0;
	.oubo-box {
		border-radius: 5vw;
		background-color: #fff;
		.title-box {
			background-color: var(--content-color-yellow);
			border-top-left-radius: 5vw;
			border-top-right-radius: 5vw;
			padding: 3vw 0;
			text-align: center;
			position: relative;
			h2 {
				text-align: center;
				margin-bottom: 2vw;
				font-size: 5.4vw;
				line-height: 1.3;
				font-weight: 900;
				span {
					display: inline-block;
					color: var(--content-color-red);
				}
			}		
			.note {
				font-size: 2.8vw;
				font-weight: 500;
			}
			.oojiro {
				width: 12vw;
				position: absolute;
				right: 2vw;
				bottom: 0;
			}
		}
	}
	.flex-box {
		width: 100%;
		padding: 8vw;
		gap: 8vw;
		display: flex;
		flex-direction: column;
		li {
			background-color: #fff;
			border-radius: 3vw;
			padding-bottom: 5vw;
			border: solid 1px #D7D7D7;
			position: relative;
			&::after {
				content: "▼";
				text-align: center;
				font-size: 6vw;
				position: absolute;
				bottom: -8vw;
				right: 0;
				left: 0;
				color: var(--content-color-line);
			}
			&:last-child {
				&::after {
					content: none;
				}
			}
			&:nth-child(1) {
				display: flex;
				flex-wrap: wrap;
				align-items: center;    
			}
		}	
		h3 {
			width: 100%;
			background-color: var(--content-color-line);
			color: #fff;
			font-size: 4.0vw;
			letter-spacing: 0.1em;
			line-height: 1.8;
			border-top-left-radius: 3vw;
			border-top-right-radius: 3vw;
			text-align: center;
			margin-bottom: 5vw;
		}
		.icon {
			width: 30%;
			padding-left: 5vw;
			img {
				width: 15vw;
			}
		}
		.text {
			font-size: 3.6vw;
			padding: 0 5vw;
		}
		li:nth-child(1) .text {
			width: 70%;
			padding: 0 5vw 0 0;
			
		}	
		.btn {
			width: 62vw;
			margin: 5vw auto 0;
			a {
				display: block;
				background-color: var(--content-color-line);
				color: #fff;
				font-size: 3.4vw;
				font-weight: 600;
				text-align: center;
				padding: 3vw;
				border-radius: 7vw;
				position: relative;
				&::after {
					font-family: "Material Symbols Rounded";
					font-weight: 400;
					content: "\e5cc";
					position: absolute;
					right: 3vw;
					top: 50%;
					transform: translateY(-50%);
					font-size: 6vw;
				}
			}
		}
		.capture {
			width: 60vw;
			margin: 3vw auto 0;
		}
	}
}

#cpninfo {
	background-color: var(--bg-color-gray);
	padding: 0 0 10vw;
	h2 {
		text-align: center;
		font-size: 4.5vw;
		font-weight: 700;
		line-height: 1.8;
		border-bottom: solid 1vw var(--default-color-black);
		margin-bottom: 5vw;
		&:not(:first-of-type) {
			padding-top: 5vw;
		}
	}
	h3 {
		font-size: 3.6vw;
		font-weight: bold;
		border-left: solid 1.3vw var(--default-color-black);
		padding-left: 1vw;
		margin: 5vw 0 2vw;
		&:first-child {
			margin: 0 0 1vw;
		}
	}
	.h3sub {
		display: inline-block;
		background-color: #F5F5F5;
		font-size: 3.6vw;
		font-weight: 700;
		padding: 1vw;
		margin: 2vw 0;
	} 
	h4 {
		margin-top: 1.4vw;
		font-weight: 600;
	}
	.h4sub {
		margin-bottom: 2vw;
	} 
	.type1 li {
		position: relative;
		padding-left: 2vw;
		&::before {
			font-family: "Material Symbols Rounded";
			font-weight: 400;
			content: "\e5df";
			position: absolute;
			top: -1.5vw;
			left: -2.5vw;
			font-size: 6vw;
		}
	}
	.bold {
		font-weight: 700;
	}
	.small {
		font-size: 0.9em;
	}
	.scroll {
		height: 110vw;
		overflow-y: scroll;
		background-color: #fff;
		font-size: 3.3vw;
		padding: 5vw 3vw;
		-webkit-overflow-scrolling: touch;
	}
}

/*-----------------------------------------
検索ボックス 調整
-------------------------------------------*/
#searchArea {
	background-color: #fff;
	padding: 0 0 3vw 0;
}

@media screen and (orientation: landscape) {
	#searchArea {
		padding: 50px 0 0;
	}
}

/*------------------------------------------------
	円バナー
--------------------------------------------------*/
/*.fix-bnr {
    display: none;
    position: fixed;
    right: 5px;
	bottom: 70px;
    z-index: 100;
	a {
		display: block;
		img {
			width: 100px;
			height: 100px;
		}
	}
	p.close {
		position: absolute;
		right: 5px;
		top: 5px;
		a {
		  display: block;
			span {
				font-size: 14px;
				color: #333;
				background-color: #fff;
				border-radius: 50%;
				padding: 3px;
			}
		}
	}
}*/
/*------------------------------------------------
	クローズ
--------------------------------------------------*/
#close {
	background-color: var(--bg-color-gray);
    padding: 20vw 0;
    text-align: center;
    font-size: 4.0vw;
    line-height: 1.8;
	a {
		color: #3064D5;
	}
}