@charset "utf-8";

/* ================ Reset ================= */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var,b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;box-sizing: border-box;font-weight: normal;font-style: normal;}
body {
	height: 100%;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-optical-sizing: auto;
	font-size: 17px;
	color: #000;
	letter-spacing: 0;
}

html{
	overflow-x: hidden;
	overflow-y: scroll;
}
body{
	padding-right: 0!important;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;
}
nav ul, ul, nav ol, ol {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	-webkit-tap-highlight-color:transparent;
	-webkit-tap-highlight-color:rgba( 100, 100, 100, 0.5 );
	text-decoration: none;
	color: #000;
}
a, a:before, a:after{
	-webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}
a:hover {
	transform: scale(1.04);
}

button {
	-webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}
img{
	vertical-align: bottom;
	border: 0;
	max-width: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
input, select {
	vertical-align:middle;
}

/* =================== */
.wrapper .pc_l,
.wrapper .pc_bg{
	display: none;
}

.view_area{
	background: #620000;
	overflow-x: hidden;
	position: relative;
}
.btn_menu{
	width: calc((138/828)*100%);
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 5;
}

.nav_sp{
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100vh;
	background: url("../img/bg_nav02.png") top center no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav_sp .inner{
	aspect-ratio: 700/1428;
	width: calc((700/828)*100%);
	margin: 0 auto;
	background: url("../img/bg_nav01.png") top center no-repeat;
	background-size: 100% auto;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
}
.nav_sp .inner ul li{
	text-align: center;
	margin: 0 auto calc((70/828)*100%);
}
.nav_sp .inner ul li p{
	padding: 3% 0 0 0;
}

.nav_sp .inner ul li a{
	display: block;
}
.nav_sp .inner ul li:nth-child(1) a{
	width: calc((430/828)*100%);
	margin: 0 auto;
}
.nav_sp .inner ul li:nth-child(2) a{
	width: calc((432/828)*100%);
	margin: 0 auto;
}
.nav_sp .inner ul li:nth-child(3) a{
	width: calc((276/828)*100%);
	margin: 0 auto;
}
.nav_sp .inner ul li:nth-child(3) p{
	width: calc((522/828)*100%);
	margin: 0 auto;
}

.nav_sp .inner ul li:nth-child(4) a{
	width: calc((275/828)*100%);
	margin: 0 auto;
}
.nav_sp .inner ul li:nth-child(4) p{
	width: calc((476/828)*100%);
	margin: 0 auto;
}

.nav_sp .inner ul li:nth-child(5) a{
	width: calc((277/828)*100%);
	margin: 0 auto;
}
.nav_sp .inner ul li:nth-child(5) p{
	width: calc((406/828)*100%);
	margin: 0 auto;
}
.nav_sp .inner ul li:nth-child(6) a{
	width: calc((437/828)*100%);
	margin: 0 auto;
}

.nav_sp .inner .btn_close{
	display: block;
	width: calc((415/828)*100%);
	margin: 0 auto;
}



/* ここから */
.kv {
	background: url("../img/bg_kv.png") top center repeat-y;
	background-size: 100% auto;
	padding: calc(50/828*100%) 0 0 0;
	position: relative;
}
.kv .logo{
	width: calc(120/828*100%);
	margin: 0 auto calc(37/828*100%);
}
.kv .bg01{
	position: absolute;
	top: -8%;
	left: -5%;
	width: calc(205/828*100%);
}
.kv .bg02{
	position: absolute;
	top: 0;
	right: -7%;
	width: calc(311/828*100%);
}

.kv h1{
	width: calc(828/828*100%);
}

.kv .bg03{
	position: absolute;
	bottom: -8%;
	width: calc(407/828*100%);
}


.intro{
	padding: calc(128/828*100%) 0 0 0;
	background: url("../img/bg_kv.png") top center repeat-y;
	background-size: 100% auto;
}
.intro p:nth-of-type(1){
	margin: 0 auto calc(70/828*100%);
	width: calc(410/828*100%);
}

.intro p:nth-of-type(2){
	margin: 0 auto calc(130/828*100%);
	width: calc(576/828*100%);
}

.intro .line{
	margin: 0 auto calc(70/828*100%);
	width: calc(678/828*100%);
}

.intro p:nth-of-type(3){
	margin: 0 auto calc(94/828*100%);
	width: calc(660/828*100%);
}

.intro a:nth-of-type(1){
	width: calc(828/828*100%);
	display: block;
	margin: 0 auto calc(60/828*100%);
}

.intro a:nth-of-type(2){
	width: calc(828/828*100%);
	display: block;
}

.content .head{
	padding: calc(147/828*100%) 0 calc(87/828*100%) 0;
	background: url("../img/bg_kv.png") top center repeat-y;
	background-size: 100% auto;
	position: relative;
}
.content h2{
	width: calc(245/828*100%);
	margin: 0 auto;
}
.content .bg01{
	width: calc(60/828*100%);
	position: absolute;
    top: 56%;
    left: 55%;
}
.content .bg02{
	width: calc(136/828*100%);
	position: absolute;
    top: 63%;
    left: 52%;
}


.content h3{
	font-family: "Noto Serif JP", serif;
	text-align: center;
	margin: 0 auto calc(40/828*100%);
}
.content p{
	font-family: "Noto Serif JP", serif;
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
	padding: calc(40/828*100%);
}


.content .object{
	padding: calc(120/828*100%) 0;
	background:url("../img/bg_contents01.png") top center no-repeat;
	background-size: 100% 100%;
	position: relative;
}
.content .object h3{
	font-size: 44px;
}
.content .object .img{
	width: calc(660/828*100%);
	margin: 0 auto;
}
.content .panel{
	padding: calc(120/828*100%) 0;
	background:url("../img/bg_contents02.png") top center no-repeat;
	background-size: 100% 100%;
	position: relative;
	margin: 0 0 calc(150/828*100%);
}
.content .panel .bg03{
	width: calc(112/828*100%);
	position: absolute;
	top: -12%;
	right: 5%;
}

.content .panel h3{
	font-size: 32px;
}
.content .panel h3 span{
	font-size: 26px;
	display: block;
}
.content .panel .img{
	width: calc(660/828*100%);
	margin: 0 auto;
}
.content .test{
	padding: calc(120/828*100%) 0;
	background:url("../img/bg_contents03.png") top center no-repeat;
	background-size: 100% 100%;
	position: relative;
	margin: 0 0 calc(150/828*100%);
}
.content .test .bg04{
	width: calc(231/828*100%);
	position: absolute;
	top: -12%;
	left: 5%;
}
.content .test .bg05{
	width: calc(97/828*100%);
	position: absolute;
	bottom: -18%;
	left: 26%;
}
.content .test .bg06{
	width: calc(121/828*100%);
	position: absolute;
	bottom: -9%;
	left: 45%;
}
.content .test .bg07{
	width: calc(129/828*100%);
	position: absolute;
	bottom: -12%;
	right: 5%;
}

.content .test h3{
	font-size: 32px;
}
.content .test .img{
	width: calc(736/828*100%);
	margin: 0 auto;
}
.content .bg08{
	width: calc(250/828*100%);
}



.challenge {
	background: url("../img/bg_challenge.png") top center no-repeat;
	background-size: cover;
	padding: calc(100/828*100%) calc(40/828*100%);
}
.challenge .inner{
	background: #fff;
	padding: 0 0 calc(120/828*100%) 0;
}

.challenge .inner .head{
	width: calc(252/748*100%);
	margin: 0 auto;
	padding: calc(40/828*100%) 0;
}
.challenge .inner .echo{
	color: #a50000;
	font-weight: 700;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	margin: 0 0 calc(30/828*100%);
}
.challenge .inner .echo::before,
.challenge .inner .echo::after{
	content: "";
	display: block;
	width: 2px;
	height: 1.4em;
	background: currentColor;
	flex-shrink: 0;
}
.challenge .inner .echo::before{
	transform: rotate(-25deg);
}
.challenge .inner .echo::after{
	transform: rotate(25deg);
}
.challenge .inner h2{
	font-size: 44px;
	font-family: "Noto Serif JP", serif;
	text-align: center;
	line-height: 1.2;
	margin: 0 0 calc(60/828*100%);
}
.challenge .inner h2 span{
	display: block;
	font-size: 32px;
}
.challenge .inner .txt{
	font-size: 14px;
	font-family: "Noto Serif JP", serif;
	text-align: center;
	margin: 0 0 calc(50/828*100%);
}



.challenge .inner .img{
	width: calc(748/748*100%);
	margin: 0 0 calc(100/828*100%);
}


.challenge .inner .detail{
	width: calc(600/828*100%);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.challenge .inner .detail p{
	font-weight: 700;
}

.challenge .inner .prize01{
	position: relative;
	padding: calc(100/828*100%) 0 0 0;
	margin: 0 0 calc(80/828*100%);
}
.challenge .inner .prize01 h3{
	width: calc(220/748*100%);
	position: absolute;
	top: 0;
	left: 10%;
}

.challenge .inner .prize01 .prize{
	width: 100%;
	margin: 0 0 calc(40/828*100%);
}

.challenge .inner .prize01 .detail p:nth-of-type(2){
	width: calc(187/600*100%);
}

.challenge .inner .prize02{
	position: relative;
	padding: calc(100/828*100%) 0 0 0;
	margin: 0 0 calc(80/828*100%);
}

.challenge .inner .prize02 h3{
	width: calc(220/748*100%);
	position: absolute;
	top: 0;
	left: 10%;
}
.challenge .inner .prize02 .prize{
	width: 100%;
	margin: 0 0 calc(40/828*100%);
}

.challenge .inner .prize02 .detail p:nth-of-type(2){
	width: calc(227/600*100%);
}

.challenge .inner .prize03{
	position: relative;
	padding: calc(100/828*100%) 0 0 0;
}
.challenge .inner .prize03 h3{
	width: calc(220/748*100%);
	position: absolute;
	top: 0;
	left: 10%;
}
.challenge .inner .prize03 .prize{
	width: 100%;
	margin: 0 0 calc(40/828*100%);
	position: relative;
}
.challenge .inner .prize03 .prize p{
	position: absolute;
	top: 0;
	left: 0;
}

.challenge .inner .prize03 .detail p:nth-of-type(2){
	width: calc(300/600*100%);
}


.present{
	background-color: #990900;
}

.present h2{
	width: calc(255/828*100%);
	margin: 0 auto  calc(50/828*100%);
}
.present .present01{
	padding: calc(80/828*100%) 0 10px 0;
	background: url("../img/bg_present01.png") top center no-repeat;
	background-size: 100% 100%;
}
.present .present01 h3{
	width: calc(218/828*100%);
	margin: 0 auto calc(40/828*100%);
}
.present .present01 .txt{
	text-align: center;
	color: #fff;
	font-family: "Noto Serif JP", serif;
	margin: 0 0 calc(40/828*100%);
}
.present .present01 .txt strong{
	color: #efd382;
	display: block;
	font-size: 25px;
	font-weight: 700;
	margin: 0 0 calc(20/828*100%);
}
.present .present01 .img{
	width: calc(750/828*100%);
	margin: 0 auto calc(20/828*100%);
}
.present .present01 h4{
	font-family: "Noto Serif JP", serif;
	font-size: 30px;
	color: #fff;
	text-align: center;
	margin: 0 0 calc(0/828*100%);
}
.present .notice{
	color: #fff;
	font-size: 12px;
}
.present .present01 .notice{
	text-align: center;
}


.present .present02{
	padding: calc(500/828*100%) 0 calc(250/828*100%);
	background: url("../img/bg_present02.png") top center no-repeat;
	background-size: 100% 100%;
}
.present .present02 h3{
	width: calc(228/828*100%);
	margin: 0 auto calc(50/828*100%);
}
.present .present02 .detail{
	display: flex;
}
.present .present02 .detail p{
	color: #fff;
}
.present .present02 .head{
	padding: 0 calc(60/828*100%);
	margin: 0 0 calc(100/828*100%);
}
.present .present02 .head .detail{
	margin: 0 0 calc(40/828*100%);
}

.present .present02 .head .detail p{
	font-family: "Noto Serif JP", serif;
	font-size: 14px;
	line-height: 1.8;
}
.present .present02 .head .detail p strong{
	color: #efd382;
	padding: 0 10px 0 0 ;
}
.present .present02 .head .detail .img{
	width: calc(204/688*100%);
}
.present .present02 .head .notice{
	margin-left: 0.8rem;
	text-indent: -0.8rem;
}


/* Present A */
.present .present02 .present-a{
	position: relative;
	padding: calc(100/828*100%) 0 0 0;
	margin: 0 0 calc(100/828*100%);
}
.present .present02 .present-a h4{
	width: calc(236/828*100%);
	position: absolute;
	top: 0;
	left: 10%;
	z-index: 1;
}
.present .present02 .present-a .img{
	width: 100%;
	margin: 0 0 calc(40/828*100%);
	position: relative;
}
.present .present02 .present-a .img p{
	width: calc(214/828*100%);
	position: absolute;
	top: -30%;
	right: 10%;
}

.present .present02 .present-a .detail{
	margin: 0 calc(100/828*100%) calc(30/828*100%);
	justify-content: space-between;
	align-items: center;
}
.present .present02 .present-a .detail p{
	font-weight: 700;
}
.present .present02 .present-a .detail p:nth-of-type(2){
	width: calc(227/628*100%);
}
.present .present02 .present-a .notice{
	margin: 0 calc(100/828*100%);
}


/* Present B */
.present .present02 .present-b{
	position: relative;
	padding: calc(100/828*100%) 0 0 0;
	margin: 0 0 calc(100/828*100%);
}
.present .present02 .present-b h4{
	width: calc(236/828*100%);
	position: absolute;
	top: 0;
	left: 10%;
	z-index: 1;
}
.present .present02 .present-b .img{
	width: 100%;
	margin: 0 0 calc(40/828*100%);
	position: relative;
}
.present .present02 .present-b .img p{
	width: calc(213/828*100%);
	position: absolute;
	top: -30%;
	right: 10%;
}

.present .present02 .present-b .detail{
	margin: 0 calc(100/828*100%) calc(30/828*100%);
	justify-content: space-between;
	align-items: center;
}
.present .present02 .present-b .detail p{
	font-weight: 700;
}
.present .present02 .present-b .detail p:nth-of-type(2){
	width: calc(232/628*100%);
}
.present .present02 .present-b .notice{
	margin: 0 calc(100/828*100%);
}


/* Present C */
.present .present02 .present-c{
	position: relative;
	margin: 0 0 calc(100/828*100%);
}

.present .present02 .present-c h4{
	width: calc(236/828*100%);
	position: absolute;
	top: 0;
	left: 10%;
}
.present .present02 .present-c .img{
	width: 100%;
	margin: 0 0 calc(40/828*100%);
}

.present .present02 .present-c .detail{
	margin: 0 calc(100/828*100%) calc(30/828*100%);
	justify-content: space-between;
	align-items: center;
}
.present .present02 .present-c .detail p{
	font-weight: 700;
}
.present .present02 .present-c .detail p:nth-of-type(2){
	width: calc(329/628*100%);
}
.present .present02 .present-c .notice{
	margin: 0 calc(100/828*100%);
}



.present .present02 .present-c h5{
	width: calc(730/828*100%);
	margin: 0 auto calc(40/828*100%);
}

.present .present02 .present-c .sticker{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	row-gap: 2em;
	margin: 0 calc(40/828*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(1){
	width: calc(225/276*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(2){
	width: calc(230/276*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(3){
	width: calc(244/276*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(4){
	width: calc(214/276*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(5){
	width: calc(243/276*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(6){
	width: calc(219/276*100%);
}

.present .present02 .present-c .sticker div:nth-of-type(7){
	width: calc(207/276*100%);
}
.present .present02 .present-c .sticker .notice{
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 calc(40/828*100%) 0 0;
}

.info{
	background:url("../img/bg_info.png") top center no-repeat;
	background-size: 100% 100%;
	padding: calc(160/828*100%) 0;
}
.info h2{
	font-size: 29px;
	font-family: "Noto Serif JP", serif;
	text-align: center;
	margin: 0 0 calc(60/828*100%);
}
.info ul{
	margin: 0 calc(120/828*100%);
}
.info ul li{
	display: flex;
	margin: 0 0 calc(40/828*100%);
}
.info ul li p{
	font-size: 15px;
	font-weight: 700;
}


.view_area footer{
	text-align: center;
	position: relative;
	z-index: 1;
	padding: 10% 0 0 0;
	background: #ededed;
	color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

}
.view_area footer .txt{
	font-size: 12px;
	line-height: 1.8;
	margin: 0 0 5%
}

.view_area footer .notice{
	font-size: 14px;
	font-weight: 600;
	color: #e94f03;
	line-height: 1.8;
	margin: 0 0 10%
}
.view_area footer .logo{
	margin: 0 8%;
	padding: 10% 0;
	border-top:1px solid #8e8e8e;
}
.view_area footer nav ul{
	display: flex;
	flex-wrap: wrap;
	margin: 0 8% 10%;
	justify-content: space-between;
}
.view_area footer nav ul li{
	flex-basis: 60%;
	text-align: left;
	margin: 0 0 6%;
}
.view_area footer nav ul li:nth-child(even){
	flex-basis: 40%;
}
.view_area footer nav ul li a{
	font-weight: 600;
	display: block;
}

.view_area footer .social{
	display: flex;
	margin: 0 30% 5%;
	justify-content: space-between;
}
.view_area footer .social li{
	flex-basis: 40%;
}
.view_area footer .social li a{
	display: block;
}

.view_area footer small{
	display: block;
	margin: 0 0 5%;
}

.view_area footer .foot{
	background: #000;
	text-align: center;
	padding: 5% 0;
}
.view_area footer .foot img{
	width: calc((200/828)*100%);
	display: block;
	margin: 0 auto;
}


.pc_img{
	display: none;
}


/* ======================================== */
@media print, screen and (min-width: 829px){
/* =======1199px～829PC======== */
.pc{display: inline-block;}
.sp{display: none;}

.wrapper{
	position: relative;
	background-size: cover;
}
.wrapper:before {
	content: "";
	display: block;
	width: 100vw;
	height: 100vh;
	background: url("../img/bg_pc.png") top center no-repeat;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}
.wrapper .pc_bg{
	display: block;
}
.wrapper .pc_bg .logo{
	position: fixed;
	top: 20px;
	left: 20px;
}
.wrapper .pc_bg .pc_bg01{
	position: fixed;
	bottom: 20px;
	left: 20px;
}
.wrapper .pc_bg .pc_bg02{
	position: fixed;
	top: 20px;
	right: 20px;
}
.wrapper .pc_bg .pc_bg03{
	position: fixed;
	bottom: 20px;
	right: 20px;
}

.view_area{
	position: relative;
	--view-area-width: 430px;
	width: var(--view-area-width);
	z-index: 2;
	margin: 0 0 0 15%;
}
.view_area:before{
	content: "";
	width: 32px;
	height: 100vh;
	background:url("../img/pc_line-l.png");
	position: fixed;
	left: auto;
	top: 0;
	margin-left: -32px;
}
.view_area:after{
	content: "";
	width: 32px;
	height: 100vh;
	background:url("../img/pc_line-r.png");
	position: fixed;
	left: auto;
	right: auto;
	top: 0;
	margin-left: var(--view-area-width);
}
.btn_menu{
	display: none;
}
.nav_sp{
	display: none;
}
.wrapper .pc_l{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: calc(100vw - (500px + 10%));
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
}
.wrapper .pc_l h1{
	text-align: center;
	width: 100%;
	margin: 0 auto 60px;
}


.wrapper .pc_l nav{
	margin: 0 auto;
}


.wrapper .pc_l nav ul li{
	padding: 0 0 0 40px; 
	margin: 0 0 20px;
 	background:url("../img/ico_diamond.png") left center no-repeat;
}

.wrapper .pc_l nav ul li a{
	display: block;
	text-align: left;
	font-family: "Noto Serif JP", serif;
	font-size: 26px;
	transition: -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
}
.wrapper .pc_l nav ul li a span{
	font-size: 20px;
}

.wrapper .pc_l nav ul li a:hover{
	transform: scale(1.04);
}

.footer-info-data{
	font-size: 15px;
}
.footer--txt{
	font-size: 15px;
}
.footer--copyright{
	font-size: 14px;
}

}


@media print, screen and (min-width: 1199px){
/* =======1200px～PC======== */
.pc{display: inline-block;}
.sp{display: none;}

.wrapper .pc_l{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: calc(100vw - (500px + 30%));
	height: 100%;
	position: fixed;
	top: 0;
	right: 10%;
	z-index: 2;
}

.view_area{
	--view-area-width: 500px;
	width: var(--view-area-width);
	margin: 0 0 0 20%;
}

.content p{
	font-size: 16px;
}


/* ======PC=======*/}





/* ここまで */