/*----------------------------------------

共通

----------------------------------------*/

*{
	margin:0;
	padding:0;
	border:none;
	box-sizing:border-box;
}

#header .utility-area{
	box-sizing:content-box !important;
}

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

body {
	/*横にしたときに文字が大きくならないようにする*/
	-webkit-text-size-adjust: 100%;
	
	/*長い文字列でも途中で改行させる*/
	word-break: break-all;

}

/*画像を伸縮するように*/
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
}

}

body {	
	/*パディングとボーダーを幅と高さに含める*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

div#wrap{
	border-top:0;
	padding:0 !important;
}

#contents img{
	vertical-align:top;
}

#contents li{
	list-style-type: none;
}

@media screen and (min-width: 768px) {
div#wrap{
	border-top:0;
	padding:0 !important;
}
#contents{
	min-width:950px;
	width:100%;
	background: url(/sweets/candy_gum/chelsea/common/images/contents_bg.gif) repeat 0 0;
}

}
@media screen and (min-width: 768px) {
    .isSP{
        display: none !important;
    }

}
@media screen and (max-width: 767px) {
    .isPC{
        display: none !important;
    }

}

/*----------------------------------------

OverWrite Meiji Default CSS

----------------------------------------*/

#body{
	width:100% !important;
	background:url(/sweets/candy_gum/chelsea/common/images/contents_bg.gif) repeat 0 0;
	min-width:320px;
}



/*----------------------------------------

ページタイトル

----------------------------------------*/

#contents > .ttl_wrap{
	background:url(/sweets/candy_gum/chelsea/common/images/ttl_arrow.png),url(/sweets/candy_gum/chelsea/common/images/ttl_bottom.png);
	background-size:11px 8px,5px 8px;
	background-repeat:no-repeat,repeat-x;
	background-position:bottom center,bottom center;
	height:53px;
}

#contents > .ttl_wrap > .ttl{
	height: 45px;
	background-color:#ebd6b0;
	
}

#contents > .ttl_wrap > .ttl h3{
	vertical-align:bottom;
}


@media screen and (min-width: 768px) {

#contents > .ttl_wrap{
	background:url(/sweets/candy_gum/chelsea/common/images/ttl_arrow.png),url(/sweets/candy_gum/chelsea/common/images/ttl_bottom.png);
	
	background-size:22px 16px,10px 16px;
	background-repeat:no-repeat,repeat-x;
	background-position:bottom center,bottom center;
	height:62px;
	text-align:center;
}


#contents > .ttl_wrap > .ttl{
	height: 46px;
	background-color:#ebd6b0;
}

#contents > .ttl_wrap > .ttl h3{
	vertical-align:bottom;
}

}


/*----------------------------------------

フォント、行間

----------------------------------------*/

/*
ルートであるhtml要素に対して62.5%を適用することで基準サイズが10pxになります。
それに対して、1.0remを指定すれば10px、1.4remを指定すれば14pxになるよって計算です。
スマートフォンではルートの要素に対して、さらに小さい値を設定しています。

htmlタグとbodyタグにfont-sizeの設定をすると、
明治の共通ヘッダーやフッターに影響を与えるため
*/

/*{
	font-family: "游ゴシック","メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif !important;
}*/

@media screen and (min-width: 768px) {
    html {
        /*font-size:62.5%;*/
    }
}
@media screen and (max-width: 767px) {
    html {
        /*font-size:60%;*/
        /*font-size: 9.6px;*/
    }
    #wrap h4,#wrap p{
        font-size: 11.52px;
        line-height: 19.2px;
    }
}

#wrap{
    /*font-size:1.2rem;*/
    /*line-height:2rem;*/
}



/*----------------------------------------
コンテンツ余白
html>body>#wrap>#body>#contents>.section
----------------------------------------*/


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

	body #wrap #body #contents .section{
		padding:0 10px;
	}

}

/*----------------------------------------

ヘッダー

----------------------------------------*/

.fixed_header{
	height:50px;
	width:100%;
	position:relative;
	border-top: 4px solid #663300;
	z-index:1000;
}

.local_header_wrap{
	width:100%;
	height:50px;
	margin:0 auto;
	padding:0;
	background:url(/sweets/candy_gum/chelsea/common/images/header_bg.gif) repeat;
}



.local_header_wrap .local_header {
	position:relative;
	width:100%;

}

.local_header_wrap .local_header ul.sns{
	position:absolute;
	top:10px;
	left:10px;
	width:89px;
}

.local_header_wrap .local_header ul.sns li{
	display:inline-block;
	width:30px;
	height:30px;
}


.local_header_wrap .local_header ul.sns li a{
	display:block;
	width:100%;
	height:100%;
}

.local_header_wrap .local_header ul.sns li.tw{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_tw_sp.gif) no-repeat;
	background-size:30px 30px;
}

.local_header_wrap .local_header ul.sns li.fb{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_fb_sp.gif) no-repeat;
	background-size:30px 30px;
}


.local_header_wrap .local_header h2.logo{
	width:110px;
	height:22px;
	display:block;
	margin:0 auto;
	padding:8px 0 0 0;
}


.local_header_wrap .local_header h2.catch{
	width:120px;
	height:9px;
	margin:12px auto;
	/*
	position:absolute;
	top:34px;
	left:calc(50% - 60px);
	*/
}



.local_header_wrap .local_header .menu{
	width:33px;
	height:33px;
	position:absolute;
	top:8px;
	right:10px;
	cursor:pointer;
}


.local_header_wrap .local_header .menu[class*="open"]{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_menu.gif) no-repeat;
	background-size:30px 30px;
}


.local_header_wrap .local_header .menu[class*="close"]{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_menu_close.gif) no-repeat;
	background-size:30px 30px;
}

@media screen and (min-width: 768px) {
.fixed_header{
	height:131px;
	width:100%;
	position:relative;
	border-top: 4px solid #663300;
	z-index:6000;
}

.local_header_wrap{
    padding:0 0 0 0;
    height:71px;
}

.local_header_wrap .local_header{
	width:950px;
	
	margin:0 auto;
}

.local_header_wrap .local_header h2.logo{
	width:168px;
	height:37px;
	position:absolute;
	top:10px;
	left:calc(50% - 84px);
}


.local_header_wrap .local_header h2.catch{
	display:none;
}

.local_header_wrap .local_header h2.logo img{
	width:100%;
	height:auto;
}


.local_header_wrap .local_header ul.sns{
	display:table;
	padding:0 0 0 5px;
	top:0;
}

.local_header_wrap .local_header ul.sns li{
	display:table-cell;
	width:42px;
	height:32px;
}

.local_header_wrap .local_header ul.sns li.tw{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_tw_off.gif) no-repeat;
	background-size:34px 32px;
}


.local_header_wrap .local_header ul.sns li.tw:hover{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_tw_on.gif) no-repeat;
}

.local_header_wrap .local_header ul.sns li.fb{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_fb_off.gif) no-repeat;
	background-size:34px 32px;
}

.local_header_wrap .local_header ul.sns li.fb:hover{
	background:url(/sweets/candy_gum/chelsea/common/images/btn_fb_on.gif) no-repeat;
}

.local_header_wrap .local_header .sound{
	position:absolute;
	top:10px;
	right:0;
}

.local_header_wrap .local_header .sound p{
	float:left;
	padding:5px 10px;
}

.local_header_wrap .local_header .sound li{
	display:block;
	float:left;
	cursor:pointer;
}

.local_header_wrap .local_header .sound li.on{
	width:47px;
	height:22px;
}

.local_header_wrap .local_header .sound li.off{
	width:45px;
	height:22px;
}

}

/*----------------------------------------

ナビ

----------------------------------------*/


/*SP*/
@media screen and (max-width: 767px) {
.local_nv_wrap{
	width:100%;
	height:1000px;
	height:1000vh;
	background:#000000;
	padding:0;
	position:absolute;
	top:50px;
	left:0;
	z-index:100;
	display:none;
}

ul.local_nv{
	width:100%;
	margin:0 auto;
}

ul.local_nv li{
	display:block;
	margin:0;
	height:50px;
	position:relative;
}


ul.local_nv li:last-child{
	border-bottom:4px solid #663300;
}

ul.local_nv li a{
    display:block;
    width:100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
	z-index:300;
}

li.products{
	width:100%;
	height:0;
	padding-top:15.5%;/*高さ÷横幅*/
	background:url(/sweets/candy_gum/chelsea/common/images/nv_products_sp.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	background-size:contain;
	background-color:#000;
}

li.story{
	width:100%;
	height:0;
	padding-top:15.5%;/*高さ÷横幅*/
	background:url(/sweets/candy_gum/chelsea/common/images/nv_story_sp.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	background-size:contain;
	background-color:#000;
}

li.song{
	width:100%;
	height:0;
	padding-top:15.5%;/*高さ÷横幅*/
	background:url(/sweets/candy_gum/chelsea/common/images/nv_song_sp.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	background-size:contain;
	background-color:#000;
}

li.history{
	width:100%;
	height:0;
	padding-top:15.5%;/*高さ÷横幅*/
	background:url(/sweets/candy_gum/chelsea/common/images/nv_history_sp.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	background-size:contain;
	background-color:#000;
}
li.download{
	width:100%;
	height:0;
	padding-top:15.6%;/*高さ÷横幅　Aquosずれるのでここだけ15.6%*/
	background:url(/sweets/candy_gum/chelsea/common/images/nv_download_sp.gif);
	background-position:-1px 0;
	background-repeat:repeat-x;
	background-size:contain;
	background-color:#000;
}
li.premium{
	width:100%;
	height:0;
	padding-top:15.6%;/*高さ÷横幅*/
	background:url(/sweets/candy_gum/chelsea/common/images/nv_premium_sp.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	background-size:contain;
	background-color:#000;
}


}

/*PC*/
@media screen and (min-width: 768px) {
.local_nv_wrap{
	width:100%;
	height:56px;
	margin:0 auto;
	padding:0 0 0 0;
	background:url(/sweets/candy_gum/chelsea/common/images/header_bg.gif) repeat;
}

ul.local_nv{
	width:950px;
	height:100px;
	margin:0 auto;
}

ul.local_nv li{
	display:block;
	width:148px;
	height:36px;
	/*margin:0 10px;*/
	float:left;
	cursor:pointer;
}

ul.local_nv li a{
	display:block;
	width:100%;
	height:100%;
}


li.products{
	width:80px !important;
	margin:0 69px 0 1px;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_products_en.png),url(/sweets/candy_gum/chelsea/common/images/nv_products_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.products[class*="active"],
li.products:hover{
	width:80px !important;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_products_en_active.png),url(/sweets/candy_gum/chelsea/common/images/nv_products_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.story{
	margin:0 69px 0 0;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_story_en.png),url(/sweets/candy_gum/chelsea/common/images/nv_story_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.story[class*="active"],
li.story:hover{
	background:url(/sweets/candy_gum/chelsea/common/images/nv_story_en_active.png),url(/sweets/candy_gum/chelsea/common/images/nv_story_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.song{
	margin:0 69px 0 0;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_song_en.png),url(/sweets/candy_gum/chelsea/common/images/nv_song_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.song[class*="active"],
li.song:hover{
	background:url(/sweets/candy_gum/chelsea/common/images/nv_song_en_active.png),url(/sweets/candy_gum/chelsea/common/images/nv_song_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.history{
	margin:0 69px 0 0;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_history_en.png),url(/sweets/candy_gum/chelsea/common/images/nv_history_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.history[class*="active"],
li.history:hover{
	background:url(/sweets/candy_gum/chelsea/common/images/nv_history_en_active.png),url(/sweets/candy_gum/chelsea/common/images/nv_history_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.download{
	margin:0 1px 0 0;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_download_en.png),url(/sweets/candy_gum/chelsea/common/images/nv_download_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.download[class*="active"],
li.download:hover{
	background:url(/sweets/candy_gum/chelsea/common/images/nv_download_en_active.png),url(/sweets/candy_gum/chelsea/common/images/nv_download_jp.png);
	background-size:auto 10px,auto 15px;
	background-repeat: no-repeat,no-repeat;
	background-position:50% 2px,bottom center;
}

li.premium{
	margin:0 0 0 0!important;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_premium_en.png),url(/sweets/candy_gum/chelsea/common/images/nv_premium_jp.png),url(/sweets/candy_gum/chelsea/common/images/nv_new.png);
	background-size:auto 10px,auto 15px,auto 15px;
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position:calc(50% + 10px) 2px,bottom center,0 0;
}

li.premium[class*="active"],
li.premium:hover{
	margin:0 0 0 0!important;
	background:url(/sweets/candy_gum/chelsea/common/images/nv_premium_en_active.png),url(/sweets/candy_gum/chelsea/common/images/nv_premium_jp.png),url(/sweets/candy_gum/chelsea/common/images/nv_new.png);
	background-size:auto 10px,auto 15px,auto 15px;
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position:calc(50% + 10px) 2px,bottom center,0 0;
}

}




/*----------------------------------------

キャンディー

----------------------------------------*/

@media screen and (min-width: 768px) {

.candy_wrap{
	width:100%;
	height:120px;
	background-color:#ebd6b0;
}
.candy{
	display:table;
	width:939px;
	padding:0 0 0 0;
	margin:0 auto;
	position:relative;
}
	
.candy li{
	display:table-cell;
	position:absolute;
	top: -100px;/*jsで20pxにします*/
}

	
.candy li:nth-child(1){
	width:145px;
	height:102px;
	background:url(/sweets/candy_gum/chelsea/common/images/candy_01.png) no-repeat 0 0;
	left: 0;
}

.candy li:nth-child(2){
	width:160px;
	height:102px;
	background:url(/sweets/candy_gum/chelsea/common/images/candy_02.png) no-repeat 0 0;
	left: calc(145px + 160px * 0);
}

.candy li:nth-child(3){
	width:160px;
	height:102px;
	background:url(/sweets/candy_gum/chelsea/common/images/candy_03.png) no-repeat 0 0;
	left: calc(145px + 160px * 1);
}

.candy li:nth-child(4){
	width:160px;
	height:102px;
	background:url(/sweets/candy_gum/chelsea/common/images/candy_04.png) no-repeat 0 0;
	left: calc(145px + 160px * 2);
}

.candy li:nth-child(5){
	width:160px;
	height:102px;
	background:url(/sweets/candy_gum/chelsea/common/images/candy_05.png) no-repeat 0 0;
	left: calc(145px + 160px * 3);
}

.candy li:nth-child(6){
	width:154px;
	height:102px;
	background:url(/sweets/candy_gum/chelsea/common/images/candy_06.png) no-repeat 0 0;
	left: calc(145px + 160px * 4);
}
}
@media screen and (max-width: 767px){
    .candy_wrap{display:none;}
}



/*----------------------------------------

フッター

----------------------------------------*/

.local_footer_wrap{
	width:100% !important;
	padding:20px 0 0 0;
	background:url(/sweets/candy_gum/chelsea/common/images/contents_bg.gif) repeat 0 0;
	border-bottom:5px solid #17100e;

}

.local_footer_wrap a img{
	display:block;
	width:35px;
	height:20px;
	margin:0 auto;
}



@media screen and (min-width: 768px) {
.local_footer_wrap{
	min-width:950px;
	border-bottom:20px solid #17100e;
	border-image: url(/sweets/candy_gum/chelsea/common/images/pagetop_bg.gif) 0 0 20 0 repeat;
}

.local_footer_wrap a img{
	width:70px;
	height:40px;
}
}