@charset "utf-8";





/* header
------------------------------------------------------------------------------------------- */
.header_wp{background:url(../img/top/header_bg.jpg) top center repeat-x;}
.header_wp_inner{background:url(../img/top/header_bg_in.png) top center no-repeat;}
.header_wp_mv{background:url(../img/top/header_bg_main.png) center 38px no-repeat; -moz-background-size: auto 100%; background-size: auto 100%;}

.header_set{width: 95%; max-width: 1300px; margin: 0 auto; padding-top: 10%; padding-bottom: 4%;}

.header_catch{width: 50%; max-width: 636px;}
.header_logo{width: 50%; max-width: 636px; margin-top: -2%;}
.header_day{width: 50%; max-width: 636px; margin-top: -2%;}
.header_banner{width: 33%; max-width: 400px; margin-top: 5% margin-bottom: 5%; margin-left: 8%;}

hr.header_line{
	height: 15px;
	margin:0;
    padding: 0;
    background: url('../img/top/header_line.gif');
    border: 0px none;
}

@media screen and (max-width: 800px) {
.header_banner{width: 95%; margin-left: 0; margin: 0 auto 5% auto; padding:0;}
.header_banner img{width: 100%; max-width: 781px;}
.header_wp_mv{background:url(../img/top/header_bg_main.png) 60% 50px no-repeat; -moz-background-size: 150% auto; background-size: 150% auto;}
.header_set{width: 95%; max-width: 1300px; margin: 0 auto; padding-top: 25%; padding-bottom: 25%;}
}


@media screen and (max-width: 700px) {
.header_wp_mv{background:url(../img/top/header_bg_main_sp.jpg) 0 50px no-repeat; -moz-background-size: 100% auto; background-size: 100% auto;}
.header_set{width: 80%; max-width: 1300px; margin: 0 auto; padding-top: 90%; padding-bottom: 8%;}
.header_catch{width: 100%;}
.header_logo{width: 100%; }
.header_day{width: 100%;}
.header_banner{width: 95%; margin-left: 0; margin: 0 auto 5% auto; padding:0;}
}




/* news
------------------------------------------------------------------------------------------- */
.news_wp{background:url(../img/top/news_bg.jpg) top center}
.news_wp_inner{background:url(../img/top/news_bg_in.png) top center repeat-y; -moz-background-size:98% auto; background-size:98% auto; padding: 20px 0; }
.news_box{width: 100%;}
.news_box_list{ width: 95%; max-width: 1000px; margin: 0 auto;}
.news_box_list li{width: 31.33%; margin: 1%; background: #fff; line-height:1.61; letter-spacing: 0.1em;}

.news_box_list li a{color: #203537;}
.news_box_list li a:hover{-moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}

.news_box_cont{box-shadow:7px 7px 0px -3px #cbe2e6;}
.news_box_cont_inner{position: relative;}
.news_img{}
.news_day{ position: absolute; top: 0; left: 0; margin: 0; color: #fff; background: #b41c2d; font-size: 15px; line-height: 1; padding: 5px 10px;}
.news_text{background:#fff; padding: 10px;}
.old_news_list_btn{width: 100%; max-width: 227px; margin: 10px auto 0 auto;}

.news_banner_list{width: 95%; max-width: 1000px; margin: 0 auto; padding: 3% 0; justify-content: center;}
.news_banner_list li{width: 47%; padding: 1%;}

.news_banner_list2{width: 95%; max-width: 1000px; margin: 0 auto; padding: 0 0 3% 0; justify-content: center; margin-top:-3%;}
.news_banner_list2 li{width: 31%; padding: 1%;}

.news_text a{ color: #b41c2d; text-decoration: underline;}
.news_text a:visited { color: #b41c2d; }
.news_text a:hover { color: #b41c2d; text-decoration: none;}
.news_text a:active { color: #b41c2d; }


@media screen and (max-width: 700px) {
.news_box_list li{width: 98%; margin: 1%; background: #fff; line-height:1.61; letter-spacing: 0.1em;}
.news_box_cont_inner{width: 30%; float: left;}
.news_text{width: 65%; padding: 2%;  float: left;}
.news_day{font-size: 2vw; position: static; text-align: center;}

.news_banner_list{width: 95%; max-width: 540px; margin: 0 auto;}
.news_banner_list li{width: 98%; padding: 1%;}

.news_banner_list2 li{width: 48%; padding: 1%;}


}








/* PV
------------------------------------------------------------------------------------------- */
h3.title_pv{ width: 40%; max-width: 465px; margin: 0 auto 3% auto;}
.pv_box{background:url(../img/top/pv_bg.jpg) top center repeat-x; padding: 5% 0;}


@media screen and (max-width: 700px) {
.pv_box{background:url(../img/top/pv_bg.jpg) top center repeat-x; padding: 5% 0; -moz-background-size: auto 100%; background-size: auto 100%;}
}



/* world
------------------------------------------------------------------------------------------- */
h3.title_world{ width: 40%; max-width: 465px; margin: 0 auto 3% auto;}
.world_box{background:url(../img/top/word_bg.jpg) top center no-repeat; -moz-background-size:150% auto; background-size:150% auto; color: #992929; font-weight: 500; font-size: 30px; text-align: center; line-height:3; 
padding: 5% 0; text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px,#fff 0px -2px 2px, #fff -2px 0px 2px,#fff 2px 2px 2px, #fff -2px 2px 2px,#fff 2px -2px 2px, #fff -2px -2px 2px,#fff 1px 2px 2px, #fff -1px 2px 2px,#fff 1px -2px 2px, #fff -1px -2px 2px,#fff 2px 1px 2px, #fff -2px 1px 2px,#fff 2px -1px 2px, #fff -2px -1px 2px,#fff 1px 1px 2px, #fff -1px 1px 2px,#fff 1px -1px 2px, #fff -1px -1px 2px;}

.btn_more{width: 50%; max-width: 465px; margin: 3% auto 3% auto;}

@media screen and (max-width: 700px) {
.world_box{background:url(../img/top/word_bg.jpg) top center no-repeat; -moz-background-size: auto 100%; background-size: auto 100%;  font-size: 4vw; line-height:3; padding: 5% 0;}
}



/* chara
------------------------------------------------------------------------------------------- */
h3.title_chara{ width: 100%; max-width: 465px; margin: 0 auto 3% auto;}
.chara_box{background:url(../img/top/chara_bg.jpg) top center repeat-x; overflow: hidden; max-height: 500px;}
.chara_img{background:url(../img/top/chara.png) top right no-repeat; padding: 5% 0 5% 0; -moz-background-size:80% auto; background-size:80% auto;}
.chara_box_inner{width: 30%; max-width: 465px; padding-left: 5%; color: #992929; font-weight: 500; font-size: 24px; text-align: center; line-height:3; padding-bottom: 5%; text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px,#fff 0px -2px 2px, #fff -2px 0px 2px,#fff 2px 2px 2px, #fff -2px 2px 2px,#fff 2px -2px 2px, #fff -2px -2px 2px,#fff 1px 2px 2px, #fff -1px 2px 2px,#fff 1px -2px 2px, #fff -1px -2px 2px,#fff 2px 1px 2px, #fff -2px 1px 2px,#fff 2px -1px 2px, #fff -2px -1px 2px,#fff 1px 1px 2px, #fff -1px 1px 2px,#fff 1px -1px 2px, #fff -1px -1px 2px;}


@media screen and (max-width: 700px) {
h3.title_chara{ width: 40%; max-width: 465px; margin: 0 auto 3% auto;}
.chara_img{background:url(../img/top/chara.png) 50% 45% no-repeat; padding: 5% 0 0 0; -moz-background-size:120% auto; background-size:120% auto;}
.chara_box_inner{width: 95%; max-width: 700px; padding-left: 0; font-weight: 500; font-size: 4vw; text-align: center; line-height:3;}

.chara_txt{padding:35% 0 5% 0;}

}



/* product
------------------------------------------------------------------------------------------- */
h4.title_sub_product{ width: 100%; max-width: 465px; margin: 0 auto 3% auto;}


.product_box{width: 95%; max-width: 1000px; margin: 5% auto;}
.product_box_list li{width: 32%; margin: 0.5%;}
.btn_product{width: 50%; max-width: 398px; margin: 5% auto 10% auto;}
.btn_product2{width: 95%; max-width: 200px; margin: 5% auto;}

.btn_product_shop{width: 60%; max-width: 446px; margin: 5% auto;}



@media screen and (max-width: 700px) {
.product_box_list{justify-content: center;}
.product_box_list li{width: 48%; margin: 0.5%;}

}



/* etc
------------------------------------------------------------------------------------------- */
.tw_timeline_box{width: 95%; max-width: 400px; margin: 0 auto 3% auto;}
.twitter_banner{width: 95%; max-width: 472px; margin: 5% auto;}