@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900');
/*------------------------------------base*/
body{
font-family: 'Noto Sans JP', sans-serif;
font-size:100%
-webkit-text-size-adjust: none;
background: #fff;

}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner{position:relative;width:1000px;	padding: 0;	margin: 0 auto;z-index: 2}
.item{position:relative;margin:0 0 2em 0;z-index: 2}

.center{text-align: center;}
.red{color:#b90015}
.sfont{font-size:80%;}
.flex{display:flex; justify-content: space-between; flex-flow:row wrap;}


img{width:100%;height:auto;}
a{transition: 0.3s;color:#0071ba;}
a:hover{opacity:0.5;}




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


/* アスタリスク　注釈用 */
ul.ast {	list-style: none;font-size: 80%;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;}


/*まる数字のスタイル*/
ol.num {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em 0;
}
ol.num li {
font-size:111%;
  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;
}


@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;}



#wrap{max-width:1280px;margin:auto;  background: #fff;}


header{ display:block;position: relative; margin:0 0 1em 0;}



/*upper*/
#header_upper{padding:0.75em;position: absolute;margin:auto;left:0;right:0;top:0;z-index: 1; justify-content: flex-start; align-items: center;}
#header_upper #logo{flex-basis:7%;}
#header_upper ul{flex-basis:88%; margin:0 0 0 1em;justify-content: flex-start; align-items: center;position: relative;z-index:1;}
#header_upper li.icon {flex-basis:2%;margin:0 0.25em 0 0}
#header_upper li.headline{flex-basis:22%;margin:0 0.5em 0 0}


/*header_main*/
#header_main{margin:0; padding:0; position: relative;}
#header_main h1{position: absolute;width:55%;top:2.5%;left:0;right:0;margin:auto;}
#header_main .kv_entrybtn{ position: absolute;bottom:1em;right:1.25em;width:31.25%;box-shadow: 5px 5px 5px #333;border-radius:0.5em;overflow: hidden;  background: #fff;}


/*タブメニュー*/
.tabBox .tabArea {width: 95%;margin:0 2.5%;	flex-wrap: nowrap;align-items: flex-end;}
.tabBox .tabArea .one_tab { flex-basis:22%;}
.tabBox .tabArea .one_tab.small { flex-basis:14%;}
.tabBox .tabArea .one_tab a {  display: block;  text-decoration: none;  transition-duration: 0.3s;}
.tabBox .tabArea .one_tab a:hover { opacity: 0.6;  text-decoration: none;}
.tabBox .tabArea .one_tab a span.normal{display:block;}
.tabBox .tabArea .one_tab a span.active{display:none;}
.tabBox .tabArea .one_tab a.select span.normal{display:none;}
.tabBox .tabArea .one_tab a.select span.active{display:block;}

/*
.tabBox .tabArea .one_tab .tab_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.3s;
	background-color: #e8a48b;
}
.tabBox .tabArea .one_tab:nth-child(1) .tab_inner {}
.tabBox .tabArea .one_tab:nth-child(2) .tab_inner {}
.tabBox .tabArea .one_tab:nth-child(3) .tab_inner {}

.tabBox .tabArea .one_tab a.select .tab_inner { height: 80px;}*/


.contents .tab_main {
  display: none;
  text-align: center;
  min-height: 280px;
  transition-duration: 0.3s;
position: relative;
}
.tab_main.is_show {  display: block;}
.tab_main:nth-child(1).is_show {}
.tab_main:nth-child(2).is_show {}
.tab_main:nth-child(3).is_show {}
.tab_main:nth-child(4).is_show {}
.tab_main:nth-child(5).is_show {}



.section.prize{position:relative;top:-2em;margin:0 0 -2em 0}

.footer{padding:3em 0 0 0;}
.twitter_cp{width:77%;margin:0 auto 3em auto;padding:3em;}
.twitter_cp .twitter_detail{width:77%;margin:0 auto 1.5em auto;}
.twitter_cp .twitter_forrow{width:30%;margin:0 auto 1.5em auto;}
.banner{width:62.5%;margin:0 auto 3em auto;}
.footer_entryhere{width:37.5%;margin:0 auto;border-radius:0.75em;    box-shadow: 5px 5px 8px #666;}

.footer_kikan{ justify-content:center;margin:0 0 1.5em 0; align-items: center;}
.footer_kikan span{font-size:111%;font-weight:900;}
.footer_kikan span.day{font-size:155%;margin:0 0.15em;}

.bottom{padding:1em ;margin:30vh 0 0 0;}
.bottom .inner{align-items: center;justify-content: space-between;}
.bottom a{width:77px;}
.bottom #copyright{font-size: 90%;font-weight:300;}


.other_prize{ position: relative;width:55%;top:-7em;margin:0 auto -4.5em auto;}
.other_prize a{  flex-basis: 41%;}



#tab01 .footer{ background: #e9f2ed url("../img/first_footer_bg.jpg") no-repeat center bottom;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;	
}
#tab01 .twitter_cp{border:7px solid #009245;}
#tab01 .footer_kikan{color:#009245;}

#tab02 .footer{ background: #e8eaef url("../img/second_footer_bg.jpg") no-repeat center bottom;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;	
}
#tab02 .footer_kikan{color:#3f65ef;}

#tab03 .footer{ background: #ede8e8 url("../img/third_footer_bg.jpg") no-repeat center bottom;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;	
}
#tab03 .twitter_cp{border:7px solid #e82d2d;}
#tab03 .footer_kikan{color:#e82d2d;}




/*QUOカードのアコーディオン*/
.accordion.first{ background: #009245;padding:1em;}
.accordion.third{ background: #e82d2d;padding:1em;}

dl.quocard{margin:auto;width:77%;}
dl.quocard dt{position: relative;display:inline-block;padding:0.5em 0.5em;margin:auto;color:#05400c; font-size:144%; border-radius:0.5em;
background: #ffff00;width:66%;margin:auto;
transition: 0.3s;	
/*
 border:2px solid #fff;box-shadow: 1px 3px 5px #333;
background: #ffd308;
background: -moz-linear-gradient(left, #ffd308 1%, #ffed06 50%, #ffd308 100%);
background: -webkit-linear-gradient(left, #ffd308 1%,#ffed06 50%,#ffd308 100%);
background: linear-gradient(to right, #ffd308 1%,#ffed06 50%,#ffd308 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd308', endColorstr='#ffd308',GradientType=1 );
*/
	
}
dl.quocard dt span{font-weight:700;}
dl.quocard dt .open{display:block}
dl.quocard dt .close{display:none}

dl.quocard dt.active .open{display:none}
dl.quocard dt.active .close{display:block}


@media screen and (max-width: 1000px) {
	dl.quocard dt{ width:88%;}
}

dl.quocard dt:hover{cursor:pointer;}
dl.quocard dt span.open:after{
content: '\002B';
position: absolute;top:0.25em;right:1em;
border-radius:50%;
width:1.5em;
height:1.5em;
font-size:122%;
color:#fff;
background: #05400c;
}
dl.quocard dt span.close:after{
content: '\2212';	
position: absolute;top:0.25em;right:1em;
border-radius:50%;
width:1.5em;
height:1.5em;
font-size:122%;
color:#fff;

}
.accordion.first dl.quocard dt span.open:after{background: #05400c;}
.accordion.third dl.quocard dt span.open:after{background: #8c0000;}
.accordion.first dl.quocard dt span.close:after{background: #05400c;}
.accordion.third dl.quocard dt span.close:after{background: #8c0000;}


dl.quocard dd{display:none;padding:2em 0;}
dl.quocard dt.active + dd{display:block;}
dl.quocard .flex .item{flex-basis: 49%;margin:0;}





/*応募方法*/
#tab04 .footer{ background: #cce3f2 url("../img/howto_footer_bg.jpg") no-repeat center bottom;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;	
}
#tab04 .section.howto{ background: #29abe2;padding:2em 0}
#tab04 .section.howto p{font-size:111%;font-weight:500;color:#fff;line-height: 188%;margin:0 1em 2em 1em;}
#tab04 .section.howto .item{ width:77%;margin:0 auto 4em auto;}
#tab04 .section.howto .here{ width:46.875%;margin:0 auto 1.5em auto;}

#tab04 .section.howto a.regist { width:7.5%;height:5%; position: absolute;bottom:39%;left:17.5%; z-index:1;  border-bottom:1px solid #000;}
#tab04 .section.howto a.loginhere { width:31.025%;height:11.4%; position: absolute;bottom:0;left:0; z-index:1;}
#tab04 .section.howto a:hover { background: rgba(255,255,255,0.6);}

#tab04 .section.clubjranet { width:77%;margin:0 auto 2em auto;}
#tab04 .section.clubjranet_tusin { width:77%;margin:0 auto 3em auto;padding: 3em;border:7px solid #29abe2;}
#tab04 .section.clubjranet_tusin .here{ width:66%;margin:0 auto ;}







/*Q&A*/
#tab05{ background:#cce3f2;}
#qa_menu{ background: #29abe2;padding:1.5em 0;}
#qa_menu ul{width:77%;margin:0 auto;}
#qa_menu ul li{flex-basis: 22%;}



#qa_wrap{position: relative;padding:16% 0 0 0;}
#qa_wrap .qa_upper{position: absolute;top:0;}

#qa{
position: relative;
background: url("../img/howto_footer_bg.jpg") no-repeat center bottom;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain;}







#qa .qa_section{width:77%;margin:0 auto 4em auto;}
#qa .qa_section .qa_tt{ background: #006196;color:#fff;font-size:133%;font-weight:700;padding:0.5em 0;margin:0 0 1em 0;}




#qa dl{margin:0 0 0.5em 0}
#qa dt{  background: #29abe2;color:#fff; align-items: center;}
#qa dt:hover{cursor:pointer;}
#qa dt .icon{flex-basis: 4%;padding:1%;margin:0 0 0 2%}
#qa dt .text{flex-basis: 82%;text-align: left;}
#qa dt .mk{flex-basis: 6%}
#qa dt.active{color:#ffff00}
#qa dt.active .mk{opacity:0.2;}

/*
#qa dt:hover{cursor:pointer;}
#qa dt:after{content:"\25bc";position: absolute;right:0;border:1px solid #fff;border-radius:50%;font-size:80%;padding:0.25em;line-height: 1.2;}
#qa dt.active:after{content:"\25b2";border:1px solid #EDE809;color:#EDE809}
*/
#qa dd{display:none; background: #fff;;margin:0 0 1em 0;font-size:90%;text-align: left;padding:1em 0;}
#qa dt.active + dd{display:block;}
#qa dd .icon{width: 4%;padding:1%;margin:0 3% 0 2%;display:inline-block;vertical-align: middle}
#qa dd .text{width: 80%;text-align: left;display:inline-block;vertical-align: middle}
#qa dd p + p{margin:1em 0 0 0;}
#qa dd ul{margin:0.5em 0 1.5em 0}
#qa dd ul li{font-size:111%;}

#qa dd p.howtomailmaga{width:66%;}


	




#totop {z-index: 100;    position: fixed;    bottom:3em;    right: 1em;}
#totop a {    width: 40px;    display: block;}