@charset "utf-8";

/*
キャラA：#5EC656
コミケS：#2DBEFF
電気街S：#FF9800
キャラO：#FF7444
コミケW：#916AFF
電気街W：#EF5350
*/

/* 共通 */
/* 注意テキスト追加 */
.caution{
width: 100%;
text-align: center;
margin: 0 auto 40px auto;
}


/* 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;
}
/* ランゲージ */
.language{
background: #EEEEEE;
z-index: 5;
padding: 10px;
top: 10px;
right: 10px;
}
.language a{
font-size: 14px;
line-height: 14px;
text-decoration: none;
}
.language #selecting{ color: #FF4949; }
.language span{ color: #9E9E9E; }


/* イベント概要 */
.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,
.goods-min-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: #916AFF; /* イベントカラー */
margin: 0 0 40px 0;
}
#goods-text > h3:before{
width: 0px;
height: 100%;
content: " ";
border-left: 8px #916AFF 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 > img{
width: 100%;
margin: 0;
}
#goods-image-sp{
width: 100%;
display: none;
margin: 0 auto 20px auto;
}


/* 収納した情報一覧 */
.goods-min{
max-width: 100%;
margin: 0 auto;
padding: 60px 0 20px 0;
}
.good-thumbnail{
width: 16.66%;
display: block;
float: left;
margin: 0 0 40px 0;
padding: 20px;
text-decoration: none;
}
.good-thumbnail img{
width: 100%;
margin: 0 0 10px 0;
}
.good-thumbnail > .text{
width: 100%;
/*
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
*/
margin: 0;
}
.good-thumbnail:hover{
color: #FFFFFF;
background: #916AFF;  /* イベントカラー */
}
.good-thumbnail:hover > .text,
.good-thumbnail:hover > .text > span{
color: #FFFFFF;
}
/* 収納した情報用 */
.goods-min-box{
display: none;
}
.goods-min-content{
max-width: 1280px;
background: #FFFFFF;
overflow-y: auto;
margin: 0 auto;
padding: 40px;
}
.goods-min .T-14px{
font-size: 14px;
line-height: 18px;
}


/* キャンペーン */
.campaign{
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
.campaign .goods-content{
margin: 0 auto 60px auto;
}
.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: #916AFF;  /* イベントカラー */
/* background: #916AFF 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%;
display: block;
margin: 0 auto;
}
.campaign-content > .box > .text{
width: 100%;
margin: 0;
padding: 40px;
}
.campaign > hr{
display: none;
}


/* リンク */
.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 40px 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,
.goods-min{
padding: 40px 0;
}
.goods-content > .box,
.goods-min-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;
}
/* 収納した情報一覧 */
.good-thumbnail{
width: 33.33%;
}


/* キャンペーン */
.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: #916AFF; /* イベントカラー */
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){

.caution{
text-align: left;
}

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

/* グッズ一覧 */
#goods-text > h3{
font-size: 24px;
line-height: 28px;
}
/* 収納した情報一覧 */
.good-thumbnail{
width: 50%;
}

/* キャンペーン */
.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 */