@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 メインビジュアル
----------------------------------------------------*/
.main{
	background:url(../img/main_bg.png) repeat-x center top,url("../img/main_border.png") repeat-x center bottom;
}

@media screen and (min-width: 769px) {
.main .inner{
	width:1200px;
	height:680px;
	padding-top: 20px;
	margin:auto;
	position:relative;
	text-align:center;
	box-sizing:border-box;
}

.main .bnr{
position:absolute;
bottom:20px;
right:-20px;
}

}
@media screen and (max-width: 768px) {
	.main{
	background:url(../img/main_bg.png) repeat-x center top,url("../img/main_border.png") repeat-x center bottom;
		background-size: cover,auto;
}

	.main .inner{
		width:100%;
		text-align:center;
		padding:0 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,.present,.about,.ouencp{
  padding:40px 0 50px;
 }

.thema h3,.present h3,.about h3{
	  margin-bottom:20px;
	  text-align:center;
}
.thema h3 img,.present h3 img,.about h3 img{
	width: 640px;
}
 
/*テーマ*/
.thema h4{
	text-align: center;
	margin-bottom: 20px;
}
  .thema p{
	  text-align:center;
	  margin-bottom:30px;
  }
 
  
  @media screen and (max-width: 768px) {
	  .thema{
  padding:20px 0 50px;
 }
	    .thema p{
			text-align:left;
		}
		 .thema p br{
			 display: none;
		}
		  
  }
	  
 /*プレゼント*/
  .present{
 background:url(../img/present_bg.gif);
  padding:40px 0 50px;
 }
.present li{
	background: url( "../img/present_border.jpg") no-repeat bottom center;
	padding:20px 0 40px;
}
.present li:last-of-type{
	background: none;
}
 
/*キャンペーンについて*/

   .about h4{
	    background:#EAADBD;
		width:100%;
		height:60px;
		text-align:center;
		line-height:60px;
		font-size:137.5%;
		margin:0 auto 30px;
	   color: #fff;
   }
   
   .about h5{
	   font-size:125%;
	   border-bottom:2px solid #333;
	   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;
	background-size: 55px;
	width:55px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:22px;
	clear: left; 
	float: left;  
	color: #fff;
}
.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;
	background-size: 55px;
	width:55px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:22px;
		  color: #fff;
	  }
 .flow dd{
	padding-top:10px;
	margin-bottom:40px;
}
.flow dd p{
	margin-bottom:20px;
}

  }
  

  
/*応援キャンペーン*/

.ouencp{
	background: url(../img/ouencp_bg.gif);
}
.ouencp h3,.ouencp h4,.ouencp p{
	text-align: center;
}

.ouencp .box{
	position: relative;
}
.ouencp .item1{
	position:absolute;
	top: -120px;
	left: 0;
}
.ouencp p:first-of-type{
	font-size: 30px;
}
.ouencp p:nth-of-type(2) span{
	font-size: 28px;
	color: #EA4F78;
}

.ouencp p:nth-of-type(3){
	font-size: 26px;
	background:#EA4F78;
	color: #fff;
	padding: 10px 0;
	margin-bottom: 50px;
}

 @media screen and (min-width: 769px) {
	 .ouencp p br{
		 display: none;
	 }
}
  @media screen and (max-width: 768px) {
	  .ouencp .item1{
		  width:25%;
		  top: -50px;
	left: 0;
	  } 
	  .ouencp h3 img{
		  width: 95%;
		  
	  }
	  .ouencp p:first-of-type{
	font-size: 24px;
}
.ouencp p:nth-of-type(2) span{
	font-size: 22px;
}

.ouencp p:nth-of-type(3){
	font-size:18px;
	  }
}


/*お問い合わせ*/
.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);
}
}