@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: linear-gradient(to right,  #891a10 0%,#d33730 30%,#d33730 70%,#891a10 100%);

}
* {
-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;}

div{position:relative;}

.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;font-size: 90%;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;font-size: 90%;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: 17px;
  width: 17px;
  font-size: 70%;
	font-weight:500;
  line-height: 1;
  position: absolute;
  top: 0.45em;
  left: 0;
}





/*メニュー要素の出現アニメ*/
.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; height:50vw;
background:#eee url('../img/bg_kv.jpg') no-repeat;
background-size: cover;
}

/*upper*/
#header_upper{padding:1.25em;position: absolute;top:0;left:0;right:0;margin:auto;opacity: 0;z-index:100;
animation-delay: 5s;
animation-name: header_upper;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}

#header_upper ul{ margin:0;display:flex;justify-content: flex-start; align-items: center; line-height: 0.5;}
#header_upper li.logo{width:8%;margin:0 0.75em 0 }
#header_upper li.kaiingentei{width:20%;margin:0 0.5em 0 0}
#header_upper li.icon {width:2.5%;margin:0 0 0 0.5em}

#header_kv_title{height:100%;display:flex;align-items: center;justify-content: center;opacity: 0;
animation-delay: 3s;
animation-name: header_kv_main;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;}

#header_kv_title h1{width:84vw;position: relative;top:2vw;}


#header_kv_danondecile{
position: absolute;top:23%;left:-9%;right:0;width:41%;opacity: 0;margin:auto;
animation-delay: 4s;
animation-name: header_kv_danondecile;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;    
}


/*タイトル*/
#header_kv_ani{height:100%;width:100%;position: absolute;}

#header_kv_ani .header_kv_one{position: absolute;top:5%;left:-2.8vw;right:0;width:16%;opacity: 0;margin:auto;
animation-delay: 1s;
animation-name: header_kv_one;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}

#header_kv_ani .header_kv_copy{position: absolute;top:8%;right:29%;width:9%;opacity: 0;
animation-delay:2s;
animation-name: header_kv_copy;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
	
}


#header_kv_ani .header_kv_7950{position: absolute;top:67%;right:25%;width:20%;opacity: 0;
animation-delay:1.5s;
animation-name: header_kv_7950;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
}



@media screen and (max-width: 740px) {

#header_kv_ani .header_kv_one{;top:5%;left:-2.8vw;right:0;width:14%;opacity: 0;margin:auto;}
#header_kv_ani .header_kv_copy{;top:8%;right:29%;width:8%;opacity: 0;}
#header_kv_ani .header_kv_7950{;top:58%;right:25%;width:20%;opacity: 0;}    
#header_kv_title h1{width:80vw;position: relative;top:0;}
#header_kv_danondecile{top:16%;left:-9%;right:0;width:41%;opacity: 0;margin:auto;}


}



.delay {
  animation-name: delay;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode:  forwards;
}

@keyframes delay {
0% { opacity: 0; }   
50% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes header_kv_one {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1; 
  }
}


@keyframes header_kv_copy {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    
  }
}

@keyframes header_kv_7950 {
  0% {
    opacity: 0;
    transform: translate(50px,-30px);  
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}

@keyframes header_upper {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    
  }
}

@keyframes header_kv_danondecile {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    
  }
}





@keyframes header_kv_main {
  0% {
    opacity: 0;
     transform: translate(-50px,0);    
  }
  100% {
    opacity: 1;
    transform: translate(0,0);  
    
  }
}


/*navi*/
#navi{position: relative;padding:2vw 0 0 0; top:-50px; margin:0 0 -50px 0;
background:url("../img/bg_menu.png") top left no-repeat;background-size: cover;
display: flex;align-items: center;
    height:9vw;
    border-bottom:4px solid #000;
}

#navi .inner{width:75%;margin:auto;}
#navi ul{flex-flow:row nowrap;justify-content: center; align-items: center;}
#navi li.txt{ border-left:2px solid #fff;padding:5px 1.25vw;line-height: 100%}
#navi li.txt:nth-child(3){ border-right:2px solid #fff;margin:0 1.25vw 0 0;}

#navi li.txt img{max-width:auto;max-height:2vw;idth:100%;height:100%;}

#navi li.btn{ margin:0 1vw 0 0;}
#navi li.btn img{max-width:auto;max-height:5vw;idth:100%;height:100%;}





@media screen and (max-width: 1200px) {
#navi .inner{width:95%;margin:auto;}
}

@media screen and (max-width: 830px) {
#navi li.txt{ border-left:2px solid #fff;padding:0 1.5vw;}
#navi .inner{width:100%;margin:auto;}    
}

section{position: relative;}
.content{margin:0 0 4em 0;}

/*見出し*/
.cap{display:flex;justify-content: center;align-items: center; z-index:10;position: relative;padding:2.5em 0 1.5em 0;}
.cap .bg_cap {position: absolute;width:100%;}
.cap h2 {z-index:1;}
.cap h2 img{width:auto;height:3.5vw;}

#prize.cap{position:relative;top:-40px;margin:0 0 -40px 0;}


.entry_area{
background: linear-gradient(to right,  #960000 0%,#e61e23 30%,#e61e23 70%,#960000 100%);    
  margin:0 calc(50% - 50vw);  
  padding:1.75em 2%;
  border-bottom: 4px solid #000;
}

.entry_area .entry_area_inner{max-width:880px;margin:auto;}
.entry_area .entryarea_kikan{margin:0 0 1.75em 0;}
.entry_area a{display: block;width:360px;margin:auto;}

#sec01 {background:url("../img/bg_red_danon.jpg") top center no-repeat;background-size: cover;}
#sec01 .inner{padding:6% 2% 15% 2%;}
#sec01 .sec01_content{max-width:1000px;margin:auto; }

#sec02{z-index:1;}
#sec02 .inner{ padding:9% 2% 2% 2%;max-width:1000px;margin:auto;}
#sec02 .inner .content.chance{margin:-55px 7px 20px 0;}


.quo_wrap{position: absolute;width:85%;top:55%;left:0;right:0;margin:auto;}
.quo_wrap .item{flex-basis:19%;}

#prize_b{position: absolute;height:10px;width:100%;top:41%; }


#oubokiyaku{background: linear-gradient(to right,  #520b06 0%,#7e201c 30%,#7e201c 70%,#520b06 100%);}

#sec03{z-index:1; background: linear-gradient(to right,  #520b06 0%,#7e201c 30%,#7e201c 70%,#520b06 100%);}
#sec03 .inner{padding:7% 2% 5% 2%;max-width:1000px;margin:auto;}
#sec03 .inner.narrow{padding:0 2% 8% 2% ;max-width:880px;margin:auto;}

#sec03 .sec03_content{margin:0 0 2em 0;}
#sec03 .sec03_content .sec03_step_login{width:26%;position: absolute;top:88%;left:3%;}


#sec03 .textlink{position: absolute;width: 7.5%;top: 77%; left: 5.5%; height: 4%; }
#sec03 .textlink:hover{ background: rgba(230,30,35,0.9) }
#sec03 .sec03_step_contacthere{max-width:660px;margin:0 auto 3em auto;}


#sec03 .sec03_clubjranet_detailhere{position: absolute; bottom:6%;left:0;right:0;max-width:640px;margin:auto;padding:0 4%;}
#sec03 .sec03_sokupat_imasugu{position: absolute; bottom:10%;left:0;right:0;max-width:640px;margin:auto;padding:0 4%;}


/*応募規約 */
.kiyaku.format{}
.kiyaku.format .inner{padding:8% 2% 6% 2%;max-width: 1000px;}
.kiyaku h3{color:#e61e23;text-align: center;font-size:144%;margin:0 0 1em 0;}
.kiyaku_text_wrap{background: #fff;padding:2em;margin:2em 0 5em 0}
.kiyaku_text_wrap .kiyaku_inner{height:400px;overflow-y: scroll;padding:0 1em 0 0}

.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar{   width: 10px;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-track{   background-color: #ccc;}
.kiyaku_text_wrap .kiyaku_inner::-webkit-scrollbar-thumb{   background-color: #000;}

.kiyaku_text_wrap .kiyaku_inner a{color:#e61e23;text-decoration: underline;display:inline;}
.kiyaku_text_wrap .kiyaku_inner p{margin:0 0 0.5em 0}
.kiyaku_text_wrap .kiyaku_inner ul{margin:0 0 0.5em 0}

.kiyaku .kiyaku_text_wrap .kiyaku_inner h4{text-align: left;font-size:111%;margin:1em 0 0.5em 0;color:#e61e23;}
.kiyaku .qa_section{background: #333;padding:0;margin:0 0 2em 0}
.kiyaku dl{margin:0 0 0.5em 0;padding:0 0 0 0;border-bottom:1px solid #fff;}
.kiyaku dl:last-child{border-bottom:none;}
.kiyaku dt{  align-items: center;font-weight:700;padding:5px 0;}
.kiyaku dt:hover{cursor:pointer;}
.kiyaku dt .icon{flex-basis: 5%;padding:1%;margin:0 3% 0 2%}
.kiyaku dt .text{flex-basis: 85%;text-align: left;color:#fff;}
.kiyaku dt .mk_open,.kiyaku dt .mk_close{flex-basis: 2.5%;margin:0 2% 0 0;}
.kiyaku dt.active{color:#801528}
.kiyaku dt .mk_close{display:none;}
.kiyaku dt.active .mk_open{display:none;}
.kiyaku dt.active .mk_close{display: block;}
.kiyaku dd{display:none;margin:0;font-size:90%;text-align: left;padding:1.5em 1.25%;font-weight:500;}
.kiyaku dt.active + dd{display:block; background: #fff;}
.kiyaku dd .icon{width: 5%;padding:1%;margin:0 3% 0 1%;display:inline-block;vertical-align: top;position: relative;top:-0.25em;}
.kiyaku dd .text{width: 88%;text-align: left;display:inline-block;vertical-align: top}
.kiyaku dd p + p{margin:1em 0 0 0;}
.kiyaku dd ul{margin:0.5em 0 1.5em 0}
.kiyaku dd ul li{font-size:111%;}
.kiyaku dd p.howtomailmaga{margin:3em 0 0 0;}
.kiyaku dd a{color:#e61e23;text-decoration: underline;display:inline;}
.kiyaku .notice{font-size:90%;margin:0 auto 1em auto;text-align: center;}

#sec05{z-index:1; background: linear-gradient(to right,  #520b06 0%,#7e201c 30%,#7e201c 70%,#520b06 100%);}
.kiyaku .kiyakubottom{text-align:center;font-size:80%;color:#fff;}

#sec06{z-index:1; background: linear-gradient(to right,  #1b1b1b 0%,#4d4d4d 15%,#4d4d4d 15%,#4d4d4d 35%,#4d4d4d 55%,#1a1a1a 100%);}
#sec06 .inner{padding:7% 2% 7% 2%;max-width:1000px;margin:auto;}
#sec06 .content.narrow{margin-left:3%;margin-right:3%;}
#sec06 p.howto_oubo{text-align:center;font-size:111%;color:#fff;margin:0 0 2em 0;}
#sec06 p.howto_oubo a{color:#fae600;}
#sec06 .sec_x_eraberupay_text a.textlink{position: absolute;width: 13.7%; top: 56.5%; left: 54.5%; height: 13%;}
#sec06 .sec_x_eraberupay_text a.textlink:hover{ background: rgba(0,0,0,0.9) }
#sec06 .sec_x_step a.textlink{position: absolute;width: 25%;top: 76.5%;left: 4.5%;height: 8%; }
#sec06 .sec_x_step a.textlink:hover{ background: rgba(255,255,255,0.9) }
#sec06 .sec_x_official_account_btn{max-width:600px;margin:auto;}


#sec07{background: url(../img/bg_red_danon.jpg) top center no-repeat;  background-size: cover;}
#sec07 .inner{padding:4% 2% 1% 2%;}
#sec07 .footer_title{max-width:1100px;margin:0 auto;}



#sec07 .bottom_entry_area{margin:1em 0 4em 0;}

#sec07 .bottom_entry_area a{display: block;width:360px;margin:0 auto 2em auto;}
#sec07 .bottom_entry_area .entryarea_kikan{max-width:880px;margin:auto;}


#sec07 .footer_notice{max-width:500px;margin:auto;}


/*フッター*/
footer{background: #000;}
footer .inner{padding:1% 2% 2% 2%;}

footer .footer_link{font-size:88%;margin:0 auto 2em auto;font-weight:500;}
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 0.5em;}

footer .footer_logo_copyright{max-width:1000px;margin:0 auto 1em auto;}

footer .footer_logo_copyright a{flex-basis:100px; }


footer .footer_logo_copyright .copyright{font-size:77%; color:#fff;text-align: center;padding:1%;}