@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.jpg") no-repeat;
		background-size:cover;
	}

/*.main .bg{
	background:url("../img/main_bg2.png") no-repeat top 5px center;
}*/
@media screen and (min-width: 769px) {

.main .inner{
	width:1200px;
	height:650px;
	margin:auto;
	padding-top:20px;
	text-align:left;
	box-sizing:border-box;
}

}
@media screen and (max-width: 768px) {
	.main{
	background-size:cover;
	}
	
	.main .inner{
		width:100%;
		text-align:left;
		padding:10px 5px 40px;
	}
	.main .inner img{
		width:70%;
	}

}

/*----------------------------------------------------
	nav
----------------------------------------------------*/
.menu{
	background:#f9ebdd;
}
nav{
	width: 980px;
	margin:auto;
	padding: 10px 0;
}
nav ul{
	display: flex;
}
nav li{
	width:163px;
	text-align: center;
	border-right: 1px solid #9edad6;
}
nav li:last-child{
	border-right: none;
}
nav li a{
	display: block;
	width: 100%;
	padding: 15px 0;
	color: #666366;
	/*font-family: source-han-serif-japanese, serif;
font-weight: 500;
font-style: normal;*/
	text-decoration: none;
}
@media screen and (max-width: 768px) {
	nav{
	width: 100%;
}
	nav ul{
		flex-wrap: wrap;
	}
	nav li{
		width:33%;
		margin: 2px 0;
	}
	nav li:nth-child(3){
	border-right: none;
}
}

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

/*共通*/
 
 section .inner{
	 width:980px;
	 margin:auto;
	 text-align: center;
}
 
section .box{

padding:40px 0;
	
}
section .box:nth-of-type(n+2){
	margin-top:50px;
}

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


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

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

	section .content{
	margin:0 20px;
}

}
 
/*テーマ*/
 
	  
 /*プレゼント*/
  .present{
	  background:#fae1e1;
	  padding:40px 0 50px;
 }
 
   .present h3{
	   margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
   .present h3{
	   width:50%;
	   margin:0 auto 20px;
}
}
   
  /*応募方法以下共通*/

    .info{

 }
 
   .info h3{
	   margin-bottom: 50px;
  }
.info p{
	  margin-bottom:15px;
  }
@media screen and (max-width: 768px) {
   .info h3{
	   width:50%;
	   margin:0 auto 20px;
}
}
  
.txtbox {
	width: 910px;
	padding: 40px 30px;
	text-align: left;
	background: #fff;
	margin: auto;
	box-sizing: border-box;
}
 @media screen and (max-width: 768px) {
	.txtbox {
	width:95%;
	padding:30px 15px;
	}
}

 /*応募方法*/ 
.method{
	padding:40px 0 50px;
}
.method li{
	margin-bottom: 20px;
	
}
  
 
 /*応募要項*/
  
.guideline{
	background:#f9ebdd;
	padding:40px 0 50px;
}

 /*応募規約*/
.terms {
	background: #fae1e1;
  padding:40px 0 50px;
	}
   
/*お問い合わせ*/
.contact{
	background:#e4dfd7;
	padding:40px 0 50px;
}

 @media screen and (max-width: 768px) {
	.present,.method,.guideline,.terms,.contact{
	  padding:20px 0 30px;
 }
}

/*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{
	width: 60px;
	margin-right:10px;
}
.snsicon img:nth-of-type(3){
	margin-right:0;
}

/*instagram*/
.insta{
	background:#fef6f4;
	padding:40px 0 50px;
}

.insta .inner{
	text-align: left;
}
.insta iframe {
width: 940px;
height: 200px;
}

@media screen and (max-width: 768px){
.insta iframe {
width: 95%;
}
}

/*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);
}
}