@charset "UTF-8";
/* loading */
.loading {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: #fff000;
}
.loading.hide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms;
}
.loading .loadingImg {
	display: block;
	width: 30%;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 639px) {
	.loading .loadingImg {
		width: 60%;
	}
}
.loading .circle {
	display: block;
	width: 40px;
	height: 40px;
	margin: 10% auto 0;
	border: 3px solid #fff;
	border-top: 2px solid #cc0000;
	border-radius: 100px;
	animation: loading 700ms linear 0ms infinite normal both;
}
@keyframes loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* icon check */
.iconCheck::before {
	font-family: 'Material Symbols Outlined';
	content: "\e52d";
	vertical-align: -10%;
	margin-right: 0.2em;
}
/* icon tel */
.iconTel::before {
	font-family: 'Material Symbols Outlined';
	content: "\e0b0";
	vertical-align: -7%;
	margin-right: 0.2em;
}
/* icon */
.icon01::before {
	font-family: 'Material Symbols Outlined';
	content: "\e887";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.icon02::before {
	font-family: 'Material Symbols Outlined';
	content: "\eaaa";
	vertical-align: -10%;
	margin-right: 0.2em;
}
/* icon mail */
.icon03::before {
	font-family: 'Material Symbols Outlined';
	content: "\e158";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
/* icon man */
.icon04::before {
	font-family: 'Material Symbols Outlined';
	content: "\e87c";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
.icon05::before {
	font-family: 'Material Symbols Outlined';
	content: "\f8db";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
/* icon answer */
.icon06::before {
	font-family: 'Material Symbols Outlined';
	content: "\e94c";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
/* icon question */
.icon07::before {
	font-family: 'Material Symbols Outlined';
	content: "\f0e2";
	vertical-align: -2px;
	margin-right: 0.2em;
	font-weight: 300;
}
.icon08::before {
	content: "◼︎";
	vertical-align: 0;
	margin-right: 0.2em;
}
.icon09::before {
	font-family: 'Material Symbols Outlined';
	content: "\e834";
	vertical-align: -2px;
	margin-right: 0.6em;
	font-weight: 300;
}
.icon10::before {
	content: "※";
	vertical-align: 0;
	margin-right: 0.2em;
}
/* icon 1-5 */
.no01::before {
	font-family: 'Material Symbols Outlined';
	content: "\f784";
	vertical-align: -27%;
	margin-right: 0.2em;
}
.no02::before {
	font-family: 'Material Symbols Outlined';
	content: "\f783";
	vertical-align: -27%;
	margin-right: 0.2em;
}
.no03::before {
	font-family: 'Material Symbols Outlined';
	content: "\f782";
	vertical-align: -27%;
	margin-right: 0.2em;
}
.no04::before {
	font-family: 'Material Symbols Outlined';
	content: "\f781";
	vertical-align: -27%;
	margin-right: 0.2em;
}
.no05::before {
	font-family: 'Material Symbols Outlined';
	content: "\f780";
	vertical-align: -27%;
	margin-right: 0.2em;
}
/* wrapper
================================================== */
#wrapper {
	overflow: hidden;
}
/* mainArea
================================================== */
#mainArea {
	position: relative;
	padding-bottom: 60px;
	overflow: hidden;
}
@media screen and (max-width: 639px) {
	#mainArea {
		padding-bottom: 40px;
	}
}
#mainBg {
	position: absolute;
	z-index: 0;
	width: 50%;
	top: 0;
	left: 0;
}
@media screen and (max-width: 639px) {
	#mainBg {
		width: 80%;
		top: 22%;
	}
}
#main {
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 0;
	left: 0;
}
@media screen and (max-width: 639px) {
	#main {
		width: 80%;
		top: 12%;
		left: inherit;
		right: 0;
	}
}
#mainTxt {
	position: absolute;
	z-index: 2;
	width: 5.7%;
	top: 7%;
	right: 6%;
}
@media screen and (max-width: 639px) {
	#mainTxt {
		width: 20%;
		top: 8%;
		right: inherit;
		left: 5%;
	}
}
#mainLogo {
	position: relative;
	z-index: 3;
	width: 70%;
	padding-top: 36%;
	margin: 0 auto;
}
@media screen and (max-width: 639px) {
	#mainLogo {
		width: 90%;
		padding-top: 65%;
	}
}
#mainLogo p {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 120%;
	font-weight: 500;
	line-height: 160%;
	padding-top: 5%;
}
@media screen and (max-width: 880px) {
	.area1Block h2 {
		font-size: 4.0vw;
		width: 100%;
		text-align: center;
	}
}
@media screen and (max-width: 639px) {
	#mainLogo p {
		font-size: 100%;
	}
}
#mainLogo p span {
	background:linear-gradient(transparent 70%, #FFFF00 0%);
}
#logo {
	position: absolute;
	z-index: 4;
	width: 13%;
	top: 15px;
	left: 5%;
}
@media screen and (max-width: 639px) {
	#logo {
		width: 20%;
		top: 10px;
		left: 5%;
	}
}
#copy {
	position: absolute;
	z-index: 3;
	top: 1%;
	right: 2%;
}
#copy p {
	font-size: 60%;
	text-align: right;
	line-height: 130%;
}
/* area1
================================================== */
#area1 {
	padding: 0;
}
.area1Tit {
	background-color: #000;
}
.area1Block {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
}
.area1Block h2 {
	font-size: 230%;
	font-weight: 700;
	line-height: 160%;
	padding: 30px 0;
	color: #ffff54;
	position: relative;
	width: 60%;
}
@media screen and (max-width: 1400px) {
	.area1Block h2 {
		font-size: 2.6vw;
	}
}
@media screen and (max-width: 880px) {
	.area1Block h2 {
		font-size: 4.0vw;
		width: 100%;
		text-align: center;
	}
}
@media screen and (max-width: 639px) {
	.area1Block h2 {
		font-size: 4.7vw;
	}
}
#area1Img {
	position: absolute;
	right: 5%;
	top: 30px;
	width: 38%;
}
@media screen and (max-width: 880px) {
	#area1Img {
		position: relative;
		right: inherit;
		top: inherit;
		width: 100%;
		padding-bottom: 30px;
	}
}
#area1Txt {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
}
#area1Txt p {
	width: 52%;
	font-size: 120%;
	font-weight: 500;
	line-height: 160%;
	padding: 30px 0 40px;
}
@media screen and (max-width: 1100px) {
	#area1Txt p {
		font-size: 120%;
	}
}
@media screen and (max-width: 880px) {
	#area1Txt p {
		width: 100%;
		padding: 30px 0 40px;
	}
}
@media screen and (max-width: 639px) {
	#area1Txt p {
		font-size: 100%;
	}
}
/* area2
================================================== */
#area2 {
	padding: 0 0 120px;
}
@media screen and (max-width: 639px) {
	#area2 {
		padding: 0 0 90px;
	}
}
.area2Block {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
}
.area2Box {
	padding: 0 0 0 30%;
}
@media screen and (max-width: 880px) {
	.area2Box {
		padding: 0;
	}
}
#area2Img05 {
	padding-bottom: 30px;
	display: none;
}
@media screen and (max-width: 880px) {
	#area2Img05 {
		display: block;
	}
}
#area2Img01 {
	position: absolute;
	top: 0;
	left: 5%;
	width: 22%;
}
@media screen and (max-width: 880px) {
	#area2Img01 {
		display: none;
	}
}
.area2Block h2 {
	font-size: 230%;
	font-weight: 700;
	line-height: 140%;
	padding: 15px 0 40px;
	display: flex;
	align-items: center;
}
.area2Block h2:after {
	border-top: 4px solid;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}
@media screen and (max-width: 1400px) {
	.area2Block h2 {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 880px) {
	.area2Block h2 {
		padding: 15px 0 30px;
	}
}
@media screen and (max-width: 639px) {
	.area2Block h2 {
		font-size: 4.7vw;
	}
}
.area2TitS {
	border-left: solid #fec628 20px;
	padding-left: 1em;
}
@media screen and (max-width: 639px) {
	.area2TitS {
		border-left: solid #fec628 10px;
	}
}
.area2TitS h4 {
	font-size: 120%;
	font-weight: 700;
	padding: 0 0 10px;
	line-height: 100%;
}
.area2TitS h3 {
	font-size: 180%;
	font-weight: 700;
	line-height: 100%;
	padding-bottom: 1%;
}
@media screen and (max-width: 639px) {
	.area2TitS h4 {
		font-size: 100%;
		padding: 0 0 3px;
		line-height: 130%;
	}
	.area2TitS h3 {
		font-size: 120%;
		line-height: 130%;
	}
}
.area2Block p {
	padding: 1em 0 2em;
	font-weight: 400;
	font-size: 120%;
	line-height: 160%;
}
@media screen and (max-width: 1100px) {
	.area2Block p{
		font-size: 120%;
	}
}
@media screen and (max-width: 639px) {
	.area2Block p {
		font-size: 100%;
	}
}
/* area3
================================================== */
#area3 {
	padding: 0 0 15%;
	background: url("../images/area3Bg.jpg") no-repeat 0 bottom #fec628;
	background-size: contain;
}
@media screen and (max-width: 880px) {
	#area3 {
		background-image: none;
		background-size: auto;
		background-color: #fec628;
	}
}
@media screen and (max-width: 639px) {
	#area3 {
		padding: 0 0 40px;
	}
}
.area3ImgBlock {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
#area3Img02 {
	position: absolute;
	top: -150px;
	left: -5%;
	width: 60%;
}
#area3Img03 {
	position: absolute;
	top: -100px;
	right: -5%;
	width: 60%;
}
@media screen and (max-width: 880px) {
	#area3Img02 {
		top: -100px;
	}
	#area3Img03 {
		top: -60px;
	}
}
.area3Block {
	max-width: 980px;
	margin: 0 auto;
	padding: 450px 5% 0;
	position: relative;
}
@media screen and (max-width: 1200px) {
	.area3Block {
		padding: 35% 5% 0;
	}
}
.area3Block h2 {
	font-size: 230%;
	font-weight: 700;
	line-height: 140%;
	padding: 0;
	display: flex;
	align-items: center;
}
.area3Block h2:after {
	border-top: 4px solid;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}
@media screen and (max-width: 1400px) {
	.area3Block h2 {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 639px) {
	.area3Block h2 {
		font-size: 120%;
	}
}
.area3Box {
	background: rgba(255,255,255,0.9);
	border: solid 15px #000;
	padding: 30px 5%;
	margin-top: 30px;
}
@media screen and (max-width: 880px) {
	.area3Box {
		background-color: #fff;
	}
}
.area3Box dl {
	float: left;
	width: 70%;
}
.area3Box dt {
	font-size: 120%;
	font-weight: 700;
	padding: 0 0 10px;
	line-height: 140%;
}
@media screen and (max-width: 639px) {
	.area3Box dl {
		float: none;
		width: 100%;
	}
	.area3Box dt {
		font-size: 100%;
	}
}
.area3Box dd .day {
	float: left;
}
.area3Box dd .title {
	padding-left: 7em;
}

#plate {
	float: right;
	width: 25%;
}
@media screen and (max-width: 639px) {
	#plate {
		float: none;
		width: 60%;
		margin: 0 auto;
		padding-top: 1em;
	}
}
.support {
	text-align: right;
	width: 100%;
	height: 30px;
	border-top: solid 2px #b7251e;
	margin-top: 15px;
	padding-top: 5px;
}
.support figure {
	float: right;
}
.support figure img {
	height: 30px!important;
	width: auto!important;
}
@media screen and (max-width: 639px) {
	.support {
		height: 20px;
	}
	.support figure img {
		height: 20px!important;
	}
}