@charset "utf-8";

/*----------------------------
	common
------------------------------*/
* {
	box-sizing: border-box;
}
body {
	line-height: 1.7;
}
a {
	color: #333;
	text-decoration: none;
}
a img {
	transition: opacity 0.3s ease-out;
}
a img:hover {
	opacity: 0.7;
}

.sp {
	display: none;
}

/* container */
#container {
	width: 1200px;
	margin: 0 auto;
	background-color: #F6E4B9;
	-webkit-font-feature: "palt";
	font-feature-settings: "palt";
}

.bgRed {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 47px;
	width: 280px;
	color: #fff;
	background-color: #FF0000;
	font-size: 22px;
	font-weight: bold;
	border-radius: 24px;
}

h1 {
	position: relative;
	margin-bottom: 65px;
	padding: 20px 100px 40px 140px;
	color: #fff;
	background-color: #AF7B1B;
	font-size: 53px;
	font-weight: bold;
	line-height: 1.4;
}

h1::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: -65px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 65px 600px 0 600px;
	border-color: #AF7B1B transparent transparent transparent;
}

h1 .bgRed {
	margin-left: 1em;
	margin-bottom: 20px;
	width: 230px;
	font-size: 23px;
}

h1 .emp {
	padding-left: .5em;
	color: #FFFF00;
	font-weight: bold;
}

.body {
	padding-top: 35px;
	text-align: center;
}

.body .period {
	margin-bottom: 15px;
	font-size: 43px;
	font-weight: bold;
}

.body .period > span {
	font-size: 36px;
	font-weight: bold;
}

.body .period .bgRed {
	margin-bottom: 10px;
}

.body .detail {
	position: relative;
	margin-top: 30px;
	padding: 40px 0;
	background-color: #F8E32D;
}

.body .detail::before {
	content: "";
	display: block;
	position: absolute;
	left: 46px;
	bottom: 0;
	width: 1218px;
	height: 289px;
	background: url(../img/illust_pc.png) no-repeat;
}

.body .detail > * {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
}

.body .detail strong {
	color: #FF0000;
	font-size: 30px;
}

.body .detail strong > span {
	font-size: 25px;
}

.body .detail strong.sS {
	font-size: 29px;
}
.body .detail strong.sS.underline {
	text-decoration: underline;
}

.body .detail .note {
	display: block;
	margin-bottom: 15px;
	font-size: 20px;
}

.body .detail .arrow {
	display: block;
	margin: 20px auto 15px;
	width: 34px;
	height: 0;
	border-style: solid;
	border-width: 18px 17px 0 17px;
	border-color: #FF0000 transparent transparent transparent;
}

.body .notice {
	padding: 50px 90px;
	padding-left: calc(90px + 1em);
	background-color: #fff;
	font-size: 15px;
	text-align: left;
	line-height: 1.6;
	text-indent: -1em;
}

@media (max-width: 1200px) {
	/* container */
	#container {
		width: 100%;
		margin: 0 auto;
		background-color: #F6E4B9;
		-webkit-font-feature: "palt";
		font-feature-settings: "palt";
	}

	.bgRed {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 3.917vw;
		width: 23.333vw;
		color: #fff;
		background-color: #FF0000;
		font-size: 1.833vw;
		font-weight: bold;
		border-radius: 2vw;
	}

	h1 {
		position: relative;
		margin-bottom: 5.417vw;
		padding: 1.667vw 8.333vw 3.333vw;
		color: #fff;
		background-color: #AF7B1B;
		font-size: 4.583vw;
		font-weight: bold;
		line-height: 1.4;
	}

	h1::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: -5.317vw;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5.417vw 50vw 0 50vw;
		border-color: #AF7B1B transparent transparent transparent;
	}

	h1 .bgRed {
		margin-left: 1em;
		margin-bottom: 1.667vw;
		width: 19.167vw;
		font-size: 1.917vw;
	}

	h1 .emp {
		padding-left: .5em;
		color: #FFFF00;
		font-weight: bold;
	}

	.body {
		padding-top: 2.917vw;
		text-align: center;
	}

	.body .period {
		margin-top: 1.25vw;
		font-size: 3.583vw;
		font-weight: bold;
	}

	.body .period > span {
		font-size: 3vw;
		font-weight: bold;
	}

	.body .period .bgRed {
		margin-bottom: 0.833vw;
	}

	.body .detail {
		position: relative;
		margin-top: 2.5vw;
		padding: 3.333vw 0;
		background-color: #F8E32D;
	}

	.body .detail::before {
		content: "";
		display: block;
		position: absolute;
		left: 4.667vw;
		bottom: 0;
		width: 101.5vw;
		height: 24.083vw;
		background: url(../img/illust_pc.png) no-repeat;
		background-size: contain;
	}

	.body .detail > * {
		font-size: 1.917vw;
		font-weight: bold;
		line-height: 1.4;
	}

	.body .detail strong {
		color: #FF0000;
		font-size: 2.5vw;
	}

	.body .detail strong > span {
		font-size: 2.083vw;
	}

	.body .detail strong.sS {
		font-size: 2.417vw;
	}

	.body .detail .note {
		display: block;
		margin-bottom: 1.25vw;
		font-size: 1.667vw;
	}

	.body .detail .arrow {
		display: block;
		margin: 1.667vw auto 1.25vw;
		width: 2.833vw;
		height: 0;
		border-style: solid;
		border-width: 1.5vw 1.417vw 0 1.417vw;
		border-color: #FF0000 transparent transparent transparent;
	}

	.body .notice {
		padding: 4.167vw 8.333vw;
		padding-left: calc(8.333vw + 1em);
		background-color: #fff;
		font-size: 1.25vw;
		text-align: left;
		line-height: 1.6;
		text-indent: -1em;
	}
}

@media (max-width: 768px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}

	/* container */
	h1 {
		margin-bottom: 8.667vw;
		padding: 4vw 7.333vw 5.333vw;
		font-size: 5.333vw;
	}

	h1::before {
		bottom: -8.367vw;
		border-width: 8.667vw 50vw 0 50vw;
	}

	h1 .bgRed {
		width: 25.733vw;
		height: 5.067vw;
		font-size: 2.667vw;
		border-radius: 2.533vw;
	}

	.bgRed {
		height: 7.467vw;
		width: 44.667vw;
		font-size: 3.467vw;
		border-radius: 3.733vw;
	}

	.body {
		padding-top: 5.333vw;
	}

	.body .period {
		margin-top: 4vw;
		margin-bottom: 6.667vw;
		font-size: 5.2vw;
	}

	.body .period > span {
		font-size: 4.4vw;
	}

	.body .detail {
		padding: 6.667vw 0 40.667vw;
	}

	.body .detail::before {
		left: 10.667vw;
		width: 82.733vw;
		height: 36.933vw;
		background: url(../img/illust_sp.png) no-repeat;
		background-size: contain;
	}

	.body .detail > * {
		font-size: 3.6vw;
	}

	.body .detail .txt {
		margin-top: 6.667vw;
	}

	.body .detail strong {
		font-size: 4.8vw;
	}

	.body .detail strong > span {
		font-size: 4vw;
	}

	.body .detail strong.sS {
		font-size: 4.533vw;
	}

	.body .detail .note {
		margin-top: 1.333vw;
		margin-bottom: 2vw;
		font-size: 3.333vw;
	}

	.body .detail .arrow {
    margin: 2.667vw auto 1.6vw;
    width: 4.533vw;
    border-width: 2.4vw 2.267vw 0 2.267vw;
	}

	.body .notice {
		padding-top: 8vw;
		padding-bottom: 8vw;
		font-size: 3.067vw;
	}
}

/* pagetop */
.page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 75px;
	z-index: 200;
}
@media (max-width: 768px) {
	.page-top {
		width: 55px;
	}
}