@charset "utf-8";


/* TOP */
.top{
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.top > .title{
width: 100%;
text-align: center;
margin: 0 auto;
padding: 40px 0;
}
.top > .title > h1{
font-size: 80px;
line-height: 80px;
}
.top > .title > span{
font-size: 32px;
line-height: 32px;
}
.top > img{
width: 100%;
margin: 0 auto;
}


/* イベント概要 */
.about{
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
}
.about > .text{
width: 50%;
float: left;
margin: 0;
padding: 0 10px;
}


/* グッズ一覧 */
.goods{
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
.goods-content{
width: 100%;
margin: 0 auto;
}
.goods-content > .box{
width: 50%;
float: left;
margin: 0;
padding: 0 10px;
}
/* テキスト */
#goods-text > .tags{
width: 100%;
margin: 0 0 20px -10px;
}
#goods-text > .tags > span{
background: #424242;
font-size: 14px;
line-height: 14px;
margin: 0 5px;
padding: 3px 10px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
}
#goods-text > h3{
width: 100%;
display: block;
font-size: 30px;
line-height: 34px;
color: #2DBEFF; /* イベントカラー */
margin: 0 0 40px 0;
}
#goods-text > h3:before{
width: 0px;
height: 100%;
content: " ";
border-left: 8px #2DBEFF solid; /* イベントカラー */
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
position: absolute;
top: 0;
left: -22px;
}
#goods-text > .text{
width: 100%;
margin: 0;
}
/* イメージ */
#goods-image{
display: block;
}
#goods-image > img{
width: 100%;
margin: 0;
}
#goods-image-sp{
width: 100%;
display: none;
margin: 0 auto 20px auto;
}


/* キャンペーン */
.campaign{
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.campaign-content{
width: 50%;
float: left;
margin: 0 0 40px 0;
padding: 0 20px;
}
.campaign-content > .box{
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: rgba(0,0,0,0.2) 0px 1px 6px 1px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 6px 1px; -moz-box-shadow :rgba(0,0,0,0.2) 0px 1px 6px 1px;
border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
margin: 0;
}
.campaign-content > .box > .line{
width: 100%;
height: 10px;
background: #2DBEFF;  /* イベントカラー */
/* background: #5EC656 url(../image/common/background01.png) repeat center top;   */
margin: 0 auto;
}
.campaign-content > .box > h3{
width: 100%;
display: block;
font-size: 30px;
line-height: 34px;
margin: 0 auto;
padding: 40px;
}
.campaign-content > .box > .image{
width: 100%;
margin: 0;
padding: 0 40px;
}
.campaign-content > .box > .image > img{
width: 100%;
margin: 0;
}
.campaign-content > .box > .text{
width: 100%;
margin: 0;
padding: 40px;
}
.campaign > hr{
display: none;
}


/* 小グッズ一覧用追加 */
.min-goods-text{
width: 100%;
text-align: center;
margin: 0 auto 40px auto;
}
/* タグ */
.min-goods-tags{
width: 100%;
margin: 0 0 20px -10px;
}
.min-goods-tags > span{
background: #424242;
font-size: 14px;
line-height: 14px;
margin: 0 5px;
padding: 3px 10px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
}


/* リンク */
.site-link{
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
.site-link-content{
width: 16.66%;
display: block;
float: left;
margin: 0;
padding: 0 20px;
}
.site-link-content:link{
text-decoration: none;
}
.site-link-content > .box{
width: 100%;
text-align: center;
margin: 0;
}
.site-link-content > .box > img{
width: 100%;
border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;
margin: 0 0 20px 0;
}


/* c表記 */
.copyright{
width: 100%;
text-align: center;
margin: 0 auto;
}


/* レスポンシブ */


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

/* TOP */
.top > .title > h1{
font-size: 50px;
line-height: 54px;
}
.top > .title > span{
font-size: 20px;
line-height: 20px;
}

/* イベント概要 */
.about{
padding: 40px 0;
}
.about > .text{
width: 100%;
float: none;
margin: 0;
padding: 0;
}

/* グッズ一覧 */
.goods{
padding: 40px 0;
}
.goods-content > .box{
width: 100%;
float: none;
padding: 0;
}
#goods-text > h3:before{
display: none;
}
#goods-text > h3 > br{
display: none;
}
/* イメージ */
#goods-image{
display: none;
}
#goods-image-sp{
display: block;
}

/* 小グッズ一覧用追加 */
.min-goods-text{
text-align: left;
}
/* タグ */
.min-goods-tags{
margin: 0 0 20px 0;
}

/* キャンペーン */
.campaign{
margin: 0 auto;
padding: 40px 0;
display: block;
}
.campaign-content{
width: 100%;
float: none;
margin: 0 auto 20px auto;
padding: 0;
}
.campaign-content > .box{
box-shadow: rgba(0,0,0,0.0) 0px 1px 6px 1px; -webkit-box-shadow: rgba(0,0,0,0.0) 0px 1px 6px 1px; -moz-box-shadow :rgba(0,0,0,0.0) 0px 1px 6px 1px;
border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
}
.campaign-content > .box > .line{
display: none;
}
.campaign-content > .box > h3{
font-size: 30px;
line-height: 34px;
color: #2DBEFF; /* イベントカラー */
padding: 20px 0;
}
.campaign-content > .box > .image{
padding: 0;
}
.campaign-content > .box > .text{
padding: 20px 0;
}
.campaign > hr{
display: block;
}

/* リンク */
.site-link{
padding: 40px 0;
}
.site-link-content{
width: 33.33%;
margin: 0 0 40px 0;
}

}

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

/* TOP */
.top > .title{
padding: 20px 0;
}

/* グッズ一覧 */
#goods-text > h3{
font-size: 24px;
line-height: 28px;
}

/* キャンペーン */
.campaign-content > .box > h3{
font-size: 24px;
line-height: 28px;
}

/* リンク */
.site-link-content{
margin: 0 0 20px 0;
}
.site-link-content > .box > span{
display: none;
}
.site-link-content{
width: 50%;
}

}


/* end */