@charset "utf-8";
:root{
	--default-color-black: #2c2a29;
    --content-width-pc: 1104px;
	--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%);	
}
.main {
	-webkit-text-size-adjust: none;
}
.contents {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--default-color-black);
	background: var(--bg-color-blue) url("../images/body-bg-pc.png") no-repeat top center;
	a {
		text-decoration: none;
		&:hover {
			opacity: 0.8;
			transition: all 0.6s ease;
		}
	}
	img {
        max-width: 100%;
		height: auto;
    }
	.inner {
        width: var(--content-width-pc);
		max-width: 100%;
        margin: 0 auto;
	}
}
.nopc {
	display: none!important;
}

/*-----------------------------------------
メインビジュアル
-------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 740px;
    background: url("../images/main-bg-pc.png") no-repeat top center;
	text-align: center;
	.inner {
		position: relative;
	}
	.title {
		padding-top: 26px;
	}
	.kikan {
	}
	.oojiro {
		position: absolute;
		left: 70px;
		bottom: 15px;
	}
}

/*-----------------------------------------
キャンペーン内容
-------------------------------------------*/
#campaign {
	width: 100%;
	padding-bottom: 40px;
	h2 {
		text-align: center;
	}
	.cpn-box {
		width: 100%;
		padding-bottom: 96px;
		border-radius: 24px;
		border-style: solid;
		border-width: 5px;
		text-align: center;
		position: relative;
		&:not(:last-of-type) {
			margin-bottom: 40px;
		}
		&.no1 {
			border-color: var(--content-color-pink);
			background: #fff url("../images/cpn1-bg-pc.png") no-repeat bottom center;
		}
		&.no2 {
			border-color: var(--content-color-blue);
			background: #fff url("../images/cpn2-bg-pc.png") no-repeat bottom center;
		}
		&.no3 {
			border-color: var(--content-color-orange);
			background: #fff url("../images/cpn3-bg-pc.png") no-repeat bottom center;
		}
	}
	.no {
		position: absolute;
		left: 16px;
		top: -5px;
	}
	h3 {
		margin-bottom: 56px;
		img {
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
		}
		/*ipadの隙間対策*/
		&.no1 {
			border-color: var(--content-color-pink);
		}
		&.no2 {
			border-color: var(--content-color-blue);
		}
		&.no3 {
			border-color: var(--content-color-orange);
		}
	}
	.conts {
		margin-bottom: 40px;
	}
	.text {
		width: 800px;
		margin: 0 auto;
		background-color: #F5F5F5;
		font-size: 14px;
		text-align: left;
		padding: 16px 80px;
		margin-bottom: 64px;
		position: relative;
		&::before {
			content: "";
			display: inline-block;
			width: 80px;
			height: 117px;
			background: url("../images/cpn1-gakusei-caren.png") no-repeat;
			position: absolute;
			left: -20px;
			top: -10px;
		}
		&::after {
			content: "";
			display: inline-block;
			width: 76px;
			height: 120px;
			background: url("../images/cpn1-gakusei-oojiro.png") no-repeat;
			position: absolute;
			right: -20px;
			top: -10px;
		}
	}
	.btn {
		width: 500px;
		margin: 0 auto;
		text-align: center;
		a {
			display: block;
			color: #fff;
			font-size: 20px;
			padding: 16px;
			border-radius: 30px;
			position: relative;
			&::after {
				font-family: "Material Symbols Rounded";
				font-weight: 400;
				font-size: 28px;
				position: absolute;
				right: 16px;
				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: 24px;
			a {
				background-color: #9C27B0;
				&::before {
					content: "";
					width: 24px;
					height: 24px;
					display: inline-block;
					background: url("../images/icon-insta-white.svg") no-repeat center center / contain;
					margin-right: 8px;
					transform: translateY(4px);
				}
			}
		}
	}
	.note {
		margin-top: 40px;
		font-size: 14px;
	}
	.oojiro {
		position: absolute;
		right: -20px;
		top: 30px;
	}
}
/*-----------------------------------------
バナー
-----------------------------------------*/
#bnrarea {
	padding: 0 0 96px;
	text-align: center;
	.text {
		font-size: 32px;
		line-height: 1.3;
		font-weight: 700;
		margin-bottom: 8px;
		span {
			display: inline-block;
			position: relative;
		}
		&::before {
			content: "＼";
			font-size: 48px;
		}
		&::after {
			content: "／";
			font-size: 48px;
		}
	}
}
/*------------------------------------------------
応募方法
--------------------------------------------------*/
#oubo {
    width: 100%;
	background-color: var(--bg-color-gray);
	padding: 96px 0;
	.oubo-box {
		border-radius: 24px;
		background-color: #fff;
		.title-box {
			background-color: var(--content-color-yellow);
			border-top-left-radius: 24px;
			border-top-right-radius: 24px;
			padding: 24px;
			text-align: center;
			position: relative;
			h2 {
				text-align: center;
				margin-bottom: 16px;
				font-size: 36px;
				line-height: 1.3;
				font-weight: 900;
				span {
					display: inline-block;
					color: var(--content-color-red);
				}
			}
			.note {
				font-size: 14px;
				font-weight: 500;
			}
			.oojiro {
				position: absolute;
				right: 64px;
				bottom: 0;
			}
		}
	}	
	.flex-box {
		width: 100%;
		padding: 64px 80px;
		gap: 40px;
		display: flex;
		flex-wrap: wrap;
		li {
			width: calc((100% - 80px) / 3);
			background-color: #fff;
			border-radius: 16px;
			padding-bottom: 32px;
			border: solid 1px #D7D7D7;
			position: relative;
			&::after {
				content: "▶";
				font-size: 24px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: -32px;
				color: var(--content-color-line);
			}
			&:nth-child(3n),&:last-child {
				margin-right: 0;
				&::after {
					content: none;
				}
			}
		}
		h3 {
			background-color: var(--content-color-line);
			color: #fff;
			font-size: 18px;
			letter-spacing: 0.1em;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			padding: 4px 0;
			text-align: center;
			margin-bottom: 32px;
		}
		.icon {
			width: 100px;
			height: 100px;
			margin: 0 auto 32px;
		}
		.text {
			font-size: 16px;
			padding: 0 24px;
		}
		.btn {
			width: 230px;
			margin: 24px auto 0;
			a {
				display: block;
				background-color: var(--content-color-line);
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
				padding: 8px 0;
				border-radius: 24px;
				position: relative;
				&::after {
					font-family: "Material Symbols Rounded";
					font-weight: 400;
					content: "\e5cc";
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
					font-size: 20px;
				}
			}
		}
		.capture {
			width: 220px;
			margin: 16px auto 0;
		}
	}
}

#cpninfo {
	background-color: var(--bg-color-gray);
	padding: 0 0 96px;
	h2 {
		text-align: center;
		font-size: 32px;
		font-weight: 700;
		line-height: 1.8;
		border-bottom: solid 3px var(--default-color-black);
		margin-bottom: 24px;
		&:not(:first-of-type) {
			padding-top: 40px;
		}
	}
	h3 {
		font-weight: 700;
		border-left: solid 5px var(--default-color-black);
		padding-left: 8px;
		margin: 24px 0 8px;
		&:first-child {
			margin: 0 0 8px;
		}
	}
	.h3sub {
		display: inline-block;
		background-color: #F5F5F5;
		font-size: 16px;
		font-weight: 700;
		padding: 8px;
		margin: 8px 0;
	} 
	h4 {
		margin-top: 8px;
		font-weight: 600;
	}
	.h4sub {
		margin-bottom: 16px;
	} 
	.type1 li {
		position: relative;
		padding-left: 16px;
		&::before {
			font-family: "Material Symbols Rounded";
			font-weight: 400;
			content: "\e5df";
			position: absolute;
			top: -4px;
			left: -3px;
			font-size: 20px;
		}
	}
	.bold {
		font-weight: 700;
	}
	.small {
		font-size: 0.9em;
	}
	.scroll {
		height: 500px;
		overflow-y: scroll;
		background-color: #fff;
		font-size: 14px;
		padding: 24px;
	}
}


/*-----------------------------------------
検索BOX
-----------------------------------------*/
#searchArea {
	padding: 64px 0;
	background: url(/gakusei/assets/common/images/search_photo_2026_pc.webp) no-repeat center top / max(100%, 1920px);
}

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