@charset "utf-8";
/* 
 style info : topスタイル

2017/07/26
 
 font 16pxベース(PC/SP)
    10px = 62.5%     11px = 68.75%     12px = 75%     13px = 81.25%
    14px = 87.5%    15px = 93.75%    16px = 100%  17px = 106.25%
    18px = 112.5%  19px = 118.75%  20px = 125%  21px =131.25%
    22px = 137.5%    23px = 143.75%    24px =150%    25px =156.25%
    26px = 162.5%  34px = 212.5%…40px = 250%  58px = 362.5%
	
 
 */
 
/*----------------------------------------------------
	main メインビジュアル
----------------------------------------------------*/
@media screen and (min-width: 769px) {

.main .inner{
	width:980px;
	height:650px;
	margin:auto;
	padding-top:50px;
	position:relative;
	text-align:center;
	box-sizing:border-box;
}

}
@media screen and (max-width: 768px) {
	
	.main .inner{
		width:100%;
		text-align:center;
		padding:40px 0 20px;
	}
	
}



/*----------------------------------------------------
	#contetnts
----------------------------------------------------*/

/*共通*/
 
 section .inner{
	 width:960px;
	 margin:auto;
}
 
section .box{
background:#fff;
width:900px;
padding:40px 0;
margin:auto;
position: relative;
}
section .box:nth-of-type(n+2){
	margin-top:50px;
}

section .box.separat{
	margin-top:90px;
}


section .content{
	margin:0 40px;
}
.side-box{
	display: flex;
}

@media screen and (max-width: 768px) {
	 section .inner{
		 width:100%;
	 }
	section .box{
		width:95%;
	}
	section .box:nth-of-type(n+2){
	margin-top:30px;
}
section .box.separat{
	margin-top:60px;
}

	section .content{
	margin:0 20px;
}

}
 
/*テーマ*/
 .thema{
/* background:#a3d5ee;*/
background:url(../img/bg2.png);
 padding:40px 0 50px;

 }
 
  .thema h3{
	  background:url(../img/ttl01.png) no-repeat center top;
	  padding-top:50px;
	  margin-bottom:20px;
	  text-align:center;
	  color:#fff;
  }
  .thema h4{
	  text-align:center;
	  font-size: 162.5%;
	  color:#da473e;
	  margin-bottom:20px;
  }
  .thema p{
	  text-align:center;
	  margin-bottom:30px;
  }
  .thema ul{
	  display: flex;
	  justify-content:space-between;
  }
   .thema li p{
	   text-align:left;
  }
  
  @media screen and (max-width: 768px) {
	   .thema li{
		   width:30%;
	   }
	    .thema p{
			text-align:left;
		}
		 .thema li p{
			 font-size:14px;
  }
  }
	  
 /*プレゼント*/
  .present{
 background:url(../img/bg.gif);
 /* padding:40px 0 50px;*/
 padding:80px 0 50px;
 }
 
 .present h4{
	  text-align:center;
	  position:absolute;
	  top:-30px;
	  left:0;
	  right:0;
  }
 .present h4 img{
	 width:220px;
 }


   @media screen and (min-width: 769px) {
  .present h4 br{
	  display:none;
  }
   }
  @media screen and (max-width: 768px) {
	  ul.mishin_list li{
		   width:46%;
	   }
	    ul.mishin_list li:nth-of-type(n+3){
 margin-top:40px;
 }
	     .present ul.mishin_list h5,.present ul.mishin_list p{
			  font-size:14px;
		 }
		  .present ul.mishin_list a{
			  padding:8px 5px;
			   font-size:14px;
		  }
  }
 

  
  /*キャンペーンについて*/
    .about{
background:#a3d5ee;
  padding:40px 0 50px;
 }
 .about.stripe{
	 background:url(../img/bg.gif);
 }
 
   .about h3{
	  background:url(../img/ttl03.png) no-repeat center top;
	  padding-top:50px;
	  margin-bottom:20px;
	  text-align:center;
	  color:#fff;
  }
  
   .about h4{
	    background:url(../img/sub_ttl_bg.gif) no-repeat center center;
		width:450px;
		height:90px;
		text-align:center;
		line-height:70px;
		font-size:137.5%;
		margin:0 auto 30px;
   }
   
   .about h5{
	   font-size:125%;
	   border-bottom:2px solid #f8e352;
	   margin:40px 0 20px;
   }
   
   
.agreement p{
	  margin-bottom:15px;
  }
   @media screen and (max-width: 768px) {
	      .about h4{
			 max-width:100%;
			 height:45px;
			 line-height:45px;
			  background-size:contain;
		  }
   }
  
 /*キャンペーンの流れ*/
 
  @media screen and (min-width: 769px) {
.flow dt{
	background:url(../img/num_bg.png)  no-repeat center top;
	width:55px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:22px;
	clear: left; 
	float: left;  
}
.flow dd{
	padding-top:15px;
	margin-left:80px;
	margin-bottom:30px;
}
.flow dd p{
	margin-bottom:30px;
}

.flow .snsbnr{
	display: table-cell;
}
 
 .ex_img{
	 width:380px;
	 margin-left:60px;
 }
   }
  @media screen and (max-width: 768px) {
	  .flow dt{
	background:url(../img/num_bg.png)  no-repeat center top;
	width:55px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:22px;
	  }
 .flow dd{
	padding-top:10px;
	margin-bottom:40px;
}
.flow dd p{
	margin-bottom:20px;
}

  }
  
 
 /*応募規約*/
  

  
/*snslink
----------------------------------------------------*/
.snsbnr img{
	width:230px;
	margin-right:10px;
}
  @media screen and (max-width: 768px) {
	  .snsbnr img{
	margin:0 0 8px;
}
 .snsbnr{
	 text-align:center;
 }
  }
.snsicon{
	text-align:center;
	margin:40px 0 30px;
}
.snsicon img{
	margin-right:10px;
}
.snsicon img:nth-of-type(3){
	margin-right:0;
}

/*ScrollTrigger用
----------------------------------------------------*/

.invisible {
	transition: opacity 0.5s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 0.5s ease;
	opacity: 1.0;
}
/*css3フェード*/
.fadeInTOP{
animation-name: fadein;
    animation-duration: 1s;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeInL{
animation-name: fadeinL;
    animation-duration: 1s;
}
@keyframes fadeinL {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInR{
animation-name: fadeinR;
    animation-duration: 1s;
}
@keyframes fadeinR {
from {
    opacity: 0;
    transform: translateX(20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}