@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/*
font-family: 'Noto Serif JP', serif;
*/

/*------------------------------------base*/

body{
font-family: 'Noto Sans JP', sans-serif;
font-size:100%;
background: #fff;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img{width:100%;height:auto;}
/*ie*/
img { -ms-interpolation-mode: bicubic; }
a{transition: 0.3s;color:#007bc7;}
a:hover{opacity:0.5;}
.inner{position:relative;padding: 0 1em;	margin: 0 auto;z-index: 2;position: relative;}
.item{position:relative;margin:0 0 2em 0;}
.center{text-align: center;}
.red{color:#b90015}
.sfont{font-size:80%;}
.flex{display:flex; justify-content: space-between; flex-flow:row wrap;}
#totop {z-index: 100;    position: fixed;    bottom:5em;    right: 1em;}
#totop a {    width: 62px;    display: block;}


@media screen and (max-width: 320px) {
.notice{font-size:75%;}
}

/* アスタリスク　注釈用 */
ul.ast {	list-style: none;margin: 0;text-align: left;}
ul.ast li {	margin: 0;	padding-left: 1em;	text-indent: -1em;}
ul.ast li:before {	content: "\203b";	color: #000;}
ul.ast li.red:before {	content: "\203b";	color: #f00;}

/* ドット　 */
ul.dot {	list-style: none;margin: 0;text-align: left;}
ul.dot li {	margin: 0;	padding-left: 1em;	text-indent: -1em;}
ul.dot li:before {	content: "\30FB";	color: #000;}
ul.dot ul.ast li:before {	content: "\203b";	color: #000;}


/*まる数字のスタイル*/
ol.num {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em 0;
}
ol.num li {
font-size:100%;
  line-height: 1.5;
  padding-left: 1.25em;
  position: relative;
}
ol.num li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  border: 1px solid #000; 
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15px;
  width: 15px;
  font-size: 65%;
	font-weight:500;
  line-height: 1;
  position: absolute;
  top: 0.45em;
  left: 0;
}


@keyframes delay {
0% { opacity: 0; }   
50% { opacity: 0; }
100% { opacity: 1; }
}
.delay {
  animation-name: delay;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;
}

/*メニュー要素の出現アニメ*/
.fadein { opacity: 0;  transition: 1s;}
.fadein.is-show {  opacity: 1;}

/*右から*/
.fadein_right {  opacity: 0;  transform: translate(0, 20%);  transition: 1s;}
.fadein_right.is-show {  transform: translate(0, 0);  opacity: 1;}

/*左から*/
.fadein_left {  opacity: 0;  transform: translate(-100%, 0);  transition: 3s;
  animation-name: delay;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;
}
.fadein_left.is-show {  transform: translate(0, 0);  opacity: 1;}
/*下から*/
.fadein_up {  opacity: 0;  transform: translate(0, 10%);  transition: 1s;}
.fadein_up.is-show {  transform: translate(0, 0);  opacity: 1;}
/*上から*/
.fadein_down {  opacity: 0;  transform: translate(0, -80%);  transition: 1.5s;}
.fadein_down.is-show {  transform: translate(0, 0);  opacity: 1;}

/*ヘッダー*/
header{ display:block;position: relative; margin:0; }

/*upper*/
#header_upper{position: absolute;top:0.5%;left:0;right:0;margin:auto;max-width:1440px;}
#header_upper .flex{ align-items: center; justify-content: flex-start;}
#header_upper ul{display:flex;justify-content: flex-end; align-items: center; line-height: 0.5;}
#header_upper li.logo{flex-basis:8%;margin:0 0 0 2%}
#header_upper li.headline{width:24%;margin:0 0 0 0.75%;}
#header_upper li.icon {width:2%;margin:0 0 0 0.55%}

/*タイトル*/
#header_kv{}
#header_kv .kv_bg{}
#header_kv .kv_title_fr{position: absolute;width:16%;top:3%;left:0;right:0;margin:auto;
animation-delay: 0.5s;
animation-name: kv_title_fr;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;
}
#header_kv h1.kv_title_jp{position: absolute; width:26.5%;top:8.5%;left:0;right:0;margin:auto;
animation-delay: 1s;
animation-name: kv_title_jp;
animation-duration: 3.5s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;
}
#header_kv .kv_copy{position: absolute;width:4.5%;top:1.5%;right:20%;
animation-delay: 2s;
animation-name: kv_copy;
animation-duration: 4s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;
}
#header_kv .kv_ataru{position: absolute;width:19%;top:38%;left:16%;
animation-delay:4s;
animation-name: kv_ataru;
animation-duration: 0.3s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;
}

@keyframes kv_title_fr {
  0% {    opacity: 0;  transform: translateY(-5%); }
  100% {    opacity: 1; transform: translateY(0); }
}

@keyframes kv_title_jp {
  0% {    opacity: 0;  transform: translateY(-2%); }
  100% {    opacity: 1; transform: translateY(0); }
}

@keyframes kv_copy {
  0% {    opacity: 0;  transform: translateY(-10%); }
  100% {    opacity: 1; transform: translateY(0); }
}

@keyframes kv_ataru {
  0% {    opacity: 0;  transform: scale(5); }
  100% {    opacity: 1; transform: scale(1); }
}

/*navi*/
#navi{position: absolute;left:0;right:0;margin:auto; bottom:7.5%;}
#navi .inner{flex-flow:row nowrap;justify-content: center; align-items: center;}
#navi .item{ margin:0 1vw 0 0;
animation-name: navi_item;
animation-duration: 0.75s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;
}
#navi .item:nth-child(1){animation-delay: 3.3s;}
#navi .item:nth-child(2){animation-delay: 3.2s;}
#navi .item:nth-child(3){animation-delay: 3.1s;}
#navi .item:nth-child(4){animation-delay: 3s;}
#navi .item img{width:auto!important; height:3.5vw;}
#navi .item a{position:relative;}

@keyframes navi_item {
  0% {    opacity: 0;  transform: translateX(-40%); }
  100% {    opacity: 1; transform: translateX(0); }
}

/*lead*/
#lead{position:relative;}
#lead .entry{position: absolute;width:36%; left:0;right:0;margin:auto; top:15%;}
#lead .lead_copy{position: absolute;width:54%; left:0;right:0;margin:auto; top:32%;}

.wrap{position: relative;overflow: hidden;}

/*
.wrap .bg01{position: absolute;width:80%; left:-29%; top:89vw;}
.wrap .bg02{position: absolute;width:164%; right:0; top:140vw;}
.wrap .bg03{position: absolute;width:100%; left:-10%; top:249vw;}
.wrap .bg04{position: absolute;width:108%; right:0; top:367vw;}
.wrap .bg05{position: absolute;width:164%; left:-41%; top:472vw;}
.wrap .bg06{position: absolute;width:100%; left:0;right:0; bottom:0;}
*/

.wrap .bg01{position: absolute;width:68%; left:-3%; top:87vw;}
.wrap .bg02{position: absolute;width:164%; right:0; top:140vw;}
.wrap .bg03{position: absolute;width:89%; left:-1%; top:244vw;}
.wrap .bg04{position: absolute;width:101%; right:0; top:362vw;}
.wrap .bg05{position: absolute;width:93%; left:5%; top:468vw;}
.wrap .bg05_2{position: absolute;width:70%; right:0; top:512vw;}
.wrap .bg06{position: absolute;width:100%; left:0;right:0; bottom:0;}

.wrap .bg{position: absolute;width:100%; left:0;right:0;margin:auto; top:0;mix-blend-mode: multiply;}
.content_wrap{position:relative;width:62%; left:0;right:0;top:-26vw;margin:0 auto -25vw auto;height:100%;}

section{position: relative;margin:0 0 6.5vw 0;}
h2{width:28%;margin:0 auto 1em auto;}

.btnbox{position:absolute;}

#sec01 { }

/*ボタンひとつ*/
/*
#sec01 .btnbox {bottom:10%; margin:0 8%;justify-content: center;}
#sec01 .btnbox a{flex-basis:55%;}
*/

/*ボタンふたつ*/

#sec01 .btnbox {bottom:10%; margin:0 8%;}
#sec01 .btnbox a{flex-basis:49%;}



#sec01 a.eigyojyoho{position: absolute;top:51.5%;left:67.5%; width:3.7vw;background:#142878;height:19px;opacity:0;}
#sec01 a.eigyojyoho:hover{ opacity:0.7;}


#sec02{}
#sec02 .btnbox {bottom:7%; margin:0 15%;}

#sec03{}
#sec03 .btnbox.vote {bottom:34%; margin:0 22%;}
#sec03 .btnbox.entry {bottom:8%; margin:0 22%;}
#sec03 a.here{position: absolute;top:45%;left:13.3%; width:2.1vw;background:#fff;height:20px;opacity:0;}
#sec03 a.here:hover{ opacity:0.7;}
#sec03 a.login{position: absolute;top:52%;left:14%; width:9vw;background:#fff;height:35px;opacity:0;}
#sec03 a.login:hover{ opacity:0.7;}

#sec04 {}
/*応募規約 */
.kiyaku_text_wrap{position: absolute;top:37%; background: #f5f5f5;padding:2em;margin:0 8%;}
.kiyaku_text_wrap .kiyaku_inner{height:30vw;overflow-y: scroll;padding:0 1em 0 0;font-size:85%;}


@media screen and (max-width: 1440px) {
    .kiyaku_text_wrap .kiyaku_inner{height:28vw;}
}
@media screen and (max-width: 1000px) {
    .kiyaku_text_wrap .kiyaku_inner{height:27vw;}
}
.kiyaku_text_wrap .kiyaku_inner p{margin:0 0 1em 0;}
.kiyaku_text_wrap .kiyaku_inner h3{margin:1.5em 0 0.5em 0;font-family: 'Noto Serif JP', serif;font-weight:700;font-size:111%;color:#142878;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar{   width: 10px;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-track{   background-color: #fff;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-thumb{   background-color: #ccc;}

#sec05{}
#sec05 .btnbox {bottom:6%; margin:0 15%;}
#sec06{}
#sec06 .sec06_upper{}
#sec06 .sec06_bottom{margin:0 0 4em 0;}
#sec06 .qawrap{padding:2em 0 3em 0; background: url( "../img/sec06_bg.png") no-repeat; background-size: cover;}
/* Q&A */
.qa_section{background: #fff;margin:0 8%;}
.qa_section dl{margin:0;border-bottom:2px solid #fff;}
.qa_section dt{  align-items: center;font-family: 'Noto Serif JP', serif;font-weight:700;color:#142878;
background: linear-gradient(to right,  #d7b91e 0%,#f0dc4b 50%,#d7b91e 100%);padding:0.75em 0.5em;}
.qa_section dt:hover{cursor:pointer;}
.qa_section dt .icon{flex-basis: 5%;padding:1%;margin:0 0 0 1%}
.qa_section dt .text{flex-basis: 85%;text-align: left;}
.qa_section dt .mk_open,.qa_section dt .mk_close{flex-basis: 3%;margin:0 2% 0 0;}
.qa_section dt.active{}
.qa_section dt .mk_close{display:none;}
.qa_section dt.active .mk_open{display:none;}
.qa_section dt.active .mk_close{display: block;}
.qa_section dd{display:none;margin:0;font-size:90%;text-align: left;padding:1em 0;font-family: 'Noto Sans JP', sans-serif; background: #f5f5f5;line-height: 177%;}
.qa_section dt.active + dd{display:block;}
.qa_section dd .icon{width: 5%;padding:1%;margin:0 1% 0 1%;display:inline-block;vertical-align: top;position: relative;top:-0.25em;}
.qa_section dd .text{width: 80%;text-align: left;display:inline-block;vertical-align: top}
.qa_section dd p + p{margin:1em 0 0 0;}
.qa_section dd ul{margin:0.5em 0 1.5em 0}
.qa_section dd ul li{font-size:100%;}
.qa_section dd p.howtomailmaga{margin:2em 0 1em 0;}
.qa_section dd a{color:#aa140f;text-decoration: underline;display:inline;}
.qa_section .notice{font-size:90%;margin:0 auto 1em auto;text-align: center;}
#sec06 .entry{position: relative;width:60%;margin:auto; }


/*フッター*/
footer{background:#000;}
footer .footer_upper{position:relative;}
footer .footer_parts{position: absolute;width:61%; left:0;right:0;margin:auto; top:23%;}
footer .footer_x{position: absolute;width:28%; left:0;right:0;margin:auto; top:67%;}
footer .footer_bottom{padding:1em 2% 2em 2%;}
footer .footer_link{font-size:90%;margin:0 auto 2.5em auto;}
footer .footer_link ul{ justify-content:center;align-items: center;}
footer .footer_link a{text-decoration:none;color:#fff;}
footer .footer_link ul li.bar{font-size:122%;color:#fff;margin:0 1%;}
footer .logo_copyright{ width:70%;margin:auto; justify-content: space-between;align-items: center;}
footer .jralogo a{width:100px;display:inline-block;}
footer .copyright{ background: #000; font-size:80%; color:#fff;text-align: center;padding:1%;}