@charset "UTF-8";

/**************************************************/
/* ENGLISH CSS */
/**************************************************/

#contents{max-width:1180px;}
#contents .box{width:100%;}

#main{width:auto;margin:0 auto;padding:0;}

/* ページタイトル */
#pageTitle{position:relative; margin-bottom:0; overflow:hidden;}
#pageTitle  h2{position:absolute; width:51%; max-width:594px; top:40%; right:0; left:0; margin:auto; z-index:2;}
#pageTitle h2 img{display:block; width:100%; height:auto;}

/*#pageTitle h2{margin-bottom:0px;left:50%;top:44%;width:43.2%;margin-left:-21.6%;}*/

/* メインビジュアル */
#visualSlider{position:relative;z-index:1;}

/* スライダー */
.slider{width:100%;height:auto;padding:38.1% 0px 0px;margin:0px auto;position:relative;z-index:1;background-color:#a5ae8a;}

.itemSample{position:absolute;left:0px;top:0px;width:100%;height:auto;background-color:#CCC;z-index:1;}
.itemSample img{width:100%;height:auto;display:block;}

.itemGroup{position:absolute;left:0px;top:0px;width:1180px;display:none;z-index:2;}
.itemGroup ul{width:100%;}
.itemGroup ul:after{content:'';display:block;width:100%;height:0px;clear:both;}
.itemGroup li{width:1180px;height:auto;background-color:#a5ae8a;}
.itemGroup img{width:100%;height:auto;display:block;}

.slideClone img{width:100%;height:auto;display:block;}
.slideClone1{width:1180px;height:auto;position:absolute;top:0px;right:100%;}
.slideClone2{width:1180px;height:auto;position:absolute;top:0px;left:100%;}

/* スクリプト有効時 */
.scriptOn .itemGroup{display:block;}
.scriptOn .itemGroup li{display:block;float:left;}
.scriptOn .itemSample{visibility:hidden;}

.scriptOn .privilegeMarker{display:block;width:100%;height:10px;text-align:center;position:absolute;bottom:24px;left:0px;z-index:3;}
/* 特典 */
.privilegeBox{position:absolute;top:95px;width:322px;height:400px;background:url(../img/privilegeBox.png) repeat center top;z-index:3;}

.privilegeText{padding:30px;}
.privilegeText p{color:#000;font-size:16px;line-height:24px;}
.privilegeText p.notes{font-size:13px;line-height:24px;}

.privilegeMarker{display:none;text-align:center;}
.privilegeMarker ul{display:inline-block;margin:0px auto;}
.privilegeMarker li{display:inline-block;width:10px;height:10px;border:1px solid #FFF;background-color:#FFF;border-radius:6px;margin:0px 5px;}

/* スライダー1 */
#visualSlider{position:relative;overflow:hidden;height:auto;margin:0px auto 0px;}
#visualSlider .liquidBox{position:relative;z-index:1;}
#visualSlider .itemSample,
#visualSlider .itemGroup{}
#visualSlider .privilegeBox{}
#visualSlider .privilegeMarker li{}
#visualSlider .privilegeMarker li.selected{background-color:#da5d00;}
#visualSlider.scriptOn{height:auto;}

/* コンテンツ1 */
#content1{margin-bottom:40px;}
#content1:after{content:''; display:block; clear:both;}
#content1 .floater img{width:100%;max-width:340px;height:auto;margin:0px auto;padding:5.44% 0px;}
#content1 .floater a{display:block; width:100%; height:auto;background:url(../img/product_introduction_bg.jpg) no-repeat center top; background-size:cover;box-sizing:border-box;border:1px solid #d2cdc4;}
#content1 .floater a:hover{background-image:url(../img/product_introduction_ov.jpg);}


/* コンテンツ2 */
#content2{padding-bottom:140px;margin-bottom:0px;}
#content2 p{width:980px; margin:0 auto;}
#content2 a{display:block; width:100%; height:100%;}
#content2 img{width:100%;height:auto;margin:0px auto;}

#content2 #banner1 img{max-width:254px;padding:5.08% 0px;}
#content2 #banner1{background:url(../img/grobal_brand_bg.jpg) no-repeat center;margin-bottom:10px;}
#content2 #banner1:hover{background-image:url(../img/grobal_brand_ov.jpg);}

#content2 #banner2 img{max-width:172px;padding:5.08% 0px;}
#content2 #banner2{background:url(../img/profile_bg.jpg) no-repeat center;margin-bottom:10px;}
#content2 #banner2:hover{background-image:url(../img/profile_ov.jpg);}

#content2 #banner3 img{max-width:214px;padding:5.08% 0px;}
#content2 #banner3{background:url(../img/catalogue_bg.jpg) no-repeat center;margin-bottom:0px;}
#content2 #banner3:hover{background-image:url(../img/catalogue_ov.jpg);}




/* スマホ版最適化 */
#spMode #head,
#spMode #foot{min-width:100%; height:45px;}
#spMode #head .box,
#spMode #foot .box{width:auto;}
#spMode:before{content:none;}
#spMode:after{content:none;}/**/

#spMode{min-width:auto;}

#spMode #contents{min-width:auto;}
#spMode #contents .box{width:auto; max-width:1180px;}

#spMode #main{width:auto;margin:0 auto;padding:0;}

#spMode #pageTitle{margin:0;}
#spMode .itemGroup ul{margin:0px;}
#spMode .itemGroup li{margin:0;}
#spMode .privilegeMarker li{width:5px;height:5px;border:1px solid #FFF;background-color:#FFF;border-radius:3px;margin:0px 2px;}
#spMode .scriptOn .privilegeMarker{bottom:20px;}

/* コンテンツ1 */
#spMode #content1{margin-bottom:20px;}
#spMode #content1 .floater{width:100%; height:auto;}
#spMode #content1 .floater img{width:50%;max-width:340px;height:auto;margin:0px auto;padding:9.14% 0px!important;}
#spMode #content1 .floater a{display:block; width:100%; height:auto;background:url(../img/product_introduction_bg.jpg) no-repeat center top; background-size:cover;}
#spMode #content1 .floater a:hover{background-image:url(../img/product_introduction_bg.jpg);}

/* コンテンツ2 */
#spMode #content2{padding-bottom:20px;margin-bottom:0px;}
#spMode #content2 p{width:100%; max-width:980px; height:auto; margin:0 auto;}
#spMode #content2 a{display:block; width:100%; height:100%; border:none;}
#spMode #content2 a:hover img{display:block;}
#spMode #content2 a img{margin:0;}

#spMode #content2 #banner1 img{width:34%;max-width:254px;height:auto;margin:0px auto;padding:8.68% 0px!important;}
#spMode #content2 #banner1{background:url(../img/grobal_brand_bg.jpg) no-repeat center;background-size:cover;margin-bottom:10px;}
#spMode #content2 #banner1:hover{background-image:url(../img/grobal_brand_bg.jpg);}

#spMode #content2 #banner2 img{width:24%;max-width:172px;height:auto;margin:0px auto;padding:8.68% 0px!important;}
#spMode #content2 #banner2{background:url(../img/profile_bg.jpg) no-repeat center;background-size:cover;margin-bottom:10px;}
#spMode #content2 #banner2:hover{background-image:url(../img/profile_bg.jpg);}

#spMode #content2 #banner3 img{width:29.6%;max-width:214px;height:auto;margin:0px auto;padding:8.68% 0px!important;}
#spMode #content2 #banner3{background:url(../img/catalogue_bg.jpg) no-repeat center;background-size:cover;margin-bottom:0px;}
#spMode #content2 #banner3:hover{background-image:url(../img/catalogue_bg.jpg);}