@charset "shift_jis";

@import url(setup.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900);
@import url(https://fonts.googleapis.com/css?family=Anton);

/* ---------------------------------------------------------------- *
    共通設定
 * ---------------------------------------------------------------- */

/* リンク色の設定 */
a:link {color:#999;text-decoration:underline;}
a:visited {color:#7e38a1;text-decoration:underline;}
a:hover {color:#7e38a1;text-decoration:none;}
a:active {color:#7e38a1;text-decoration:none;}

/* リンクマウスオーバー設定 */
a, a img  {opacity:1;transition:all .2s ease-in-out;}
a:hover, a img:hover {opacity:0.8;transition:all .1s ease-in-out;}

body {font-family:"Noto Sans Japanese","Roboto","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:16px;background-color:#f3f3f3;color:#333;line-height:160%;}

/* 濃色 */
.bgColor1 {background-color:#fafafa;}
.color1 {color:#fafafa;}

/* 中間色 */
.bgColor2 {background-color:#ccc;}
#partsMenu ul li a {background-color:#ccc;}
#partsMenu ul li a:hover {background-color:#ccc;}

/* 薄色 */
.bgColor3 {background-color:#777;}
#partsMenu .active {background-color:#777;}
#partsMenu .active2 {background-color:#777;}
.nextprev .nextprevBtn li a {background-color:#777;}

/* text */
.small {font-size:10px;line-height:140%!important;}
.meter {font-size:10px;line-height:140%!important;width:280px;}
.red {color:#C00;}
.hide {opacity:0;}
.note {font-size:10px;}


.flex {
	display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	-js-display: flex;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

/* 2020 ヘッダ・フッタ */
.header2020 {background:#999;box-shadow:0 1px 5px rgba(0,0,0,0.8);padding:25px 0;}
.header2020 h1 a {display:block;text-indent:-9999px;width:192px;height:26px;background:url(../image/mugen.png) no-repeat;margin:0 0 0 30px;}
.header2020 .carTop_btn a {display:block;position:absolute;left:260px;font-size:14px;font-weight:600;font-family:'Titillium Web',sans-serif;color:#333;text-decoration:none;}
.header2020 .carTop_btn a::before {position:absolute;left:-15px;top:9px;content:"";width:0;height:0;border-style:solid;border-width: 0 4.5px 7.8px 4.5px;border-color: transparent transparent #555 transparent;}
.header2020 .shop a {font-family:'Titillium Web',sans-serif;font-weight:600;font-size:18px;color:#333;text-decoration:none;background:url(../image/cart.png) no-repeat;padding-left:35px;margin:0 30px 0 0;}
.header2020 .shop a span {color:#C00;}
footer .wrap .copyright {position:relative;margin-top:15px;}
footer .carTop_btn a {display:block;position:absolute;left:17px;top:50px;font-size:14px;font-weight:600;font-family:'Titillium Web',sans-serif;color:#333;text-decoration:none;line-height:100%;}
footer .carTop_btn a::before {position:absolute;left:-15px;top:3px;content:"";width:0;height:0;border-style:solid;border-width: 0 4.5px 7.8px 4.5px;border-color: transparent transparent #555 transparent;}
@media screen and (max-width:640px){
.header2020 {padding:18px 0 25px 0;}
.header2020 h1 a {width:120px;height:16px;background:url(../image/mugen.png) no-repeat;background-size:120px 16px;margin:0 0 0 15px;}
.header2020 .carTop_btn a {top:40px;left:30px;font-size:12px;}
.header2020 .carTop_btn a::before {top:8px;}
.header2020 .shop {margin-top:10px;}
.header2020 .shop a {font-size:14px;height:20px;line-height:20px;padding-left:30px;margin:0 15px 0 0;}
footer .wrap .copyright {position:relative;margin-top:15px;}
footer .carTop_btn a {display:block;position:absolute;left:0px;right:-15px;margin:0 auto;top:0px;font-size:14px;font-weight:600;font-family:'Titillium Web',sans-serif;color:#333;text-decoration:none;line-height:100%;}
footer .carTop_btn a::before {position:absolute;left:0px;right:135px;margin:0 auto;top:3px;content:"";width:0;height:0;border-style:solid;border-width: 0 4.5px 7.8px 4.5px;border-color: transparent transparent #555 transparent;}
footer small {display:block;padding-top:20px;}
}


/* ---------------------------------------------------------------- *
    横幅が980px以上の場合に適用されるCSS（PC向け）
 * ---------------------------------------------------------------- */
@media screen and (min-width:640px){

/* ---------------------------------------------------------------- *
    PC common
 * ---------------------------------------------------------------- */

.header2016 {height:70px;background-color:#FFF;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,0.8);}
.header2016 h1 a {text-indent:-9999px;width:192px;height:26px;background:url(../image/mugen.png) no-repeat;float:left;margin:20px 0 0 30px;}
.header2016 .shop a {float:right;font-family:'Titillium Web',sans-serif;font-weight:600;font-size:18px;color:#333;text-decoration:none;background:url(../image/cart.png) no-repeat;
padding-left:35px;margin:25px 30px 0 0;}
.header2016 .shop a span {color:#C00;}

#pagetop {display:none;position:fixed;bottom:50px;right:30px;}
#pagetop li {list-style:none;font-family:'Roboto',sans-serif;font-weight:400;font-size:10px;line-height:140px;text-align:center;}
#pagetop a {z-index:1000;color:#CCC;display:block;width:58px;height:58px;text-decoration:none;background:url(../image/pagetop.png) no-repeat;opacity:1;}
#pagetop a:hover {opacity:0.9;}

footer {background:#999;height:180px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#333;}
footer .wrap {width:90%;height:180px;margin:0 auto;}
footer .wrap .copyright {font-family:'Roboto',sans-serif;font-size:11px;float:left;line-height:160px;}
footer .wrap .onlineShop {float:right;margin:60px 40px 0 0;}
footer .wrap .onlineShop .text {display:block;font-size:10px;line-height:100%;margin-bottom:-5px;}
footer .wrap .onlineShop a {display:block;font-family:'Titillium Web',sans-serif;font-weight:400;color:#333;text-decoration:none;padding-left:25px;background:url(../image/icon_cart.gif) no-repeat 0 5px;margin-top:17px;}
footer .wrap .onlineShop a span {color:#C00;}

/* ---------------------------------------------------------------- *
    PC home
 * ---------------------------------------------------------------- */
 
#menu {width:100%;height:100px;background:url(../image/nav_bg.gif);box-shadow:0px 2px 5px rgba(0,0,0,0.3);z-index:1000;position:relative;}
#menu .wrap {width:90%;margin:0 auto;}
#menu .wrap h2 a {display:block;text-indent:-9999px;width:250px;height:28px;background:url(../image/logo1.png) no-repeat;background-size:250px 28px;float:left;margin-top:43px;}
#menu .wrap ul {float:right;}
#menu .wrap li {float:left;margin-left:100px;margin-top:37px;}
#menu .wrap li a {font-family:'Anton',sans-serif;font-size:20px;color:#2a2e37;text-decoration:none;text-shadow:0px 1px 3px rgba(255,255,255,1);}
#menu .wrap li ul {display:none;}

.fixed {position:fixed!important;top:0;}
.bodyfixed {padding-top:100px;}

.mainImg_top2016 {background-color:#fff;position:relative;}
.mainImg_top2016 img {display:block;height:auto;width:100%;max-width:2000px;}

#styling {background:url(../image/photo_bg.jpg) no-repeat center #fff;background-size:cover;min-height:100%;}
#styling .wrap {max-width:1200px;width:90%;margin:0 auto;overflow:hidden;padding:100px 0;text-align:center;}
#styling h3 {margin-bottom:80px;font-family:'Anton',sans-serif;font-size:50px;font-weight:normal;text-shadow:0px 1px 5px rgba(255,255,255,1);}
#styling .photowrap a {display:block;width:49%;height:auto;position:relative;background:#FFF;box-shadow:0px 30px 20px -30px rgba(0,0,0,0.8);margin-bottom:25px;}
#styling .photowrap a .photo {display:block;width:100%;}
#styling .photowrap a .icon {display:block;bottom:10px;right:10px;position:absolute;}
#styling .photowrap a:hover {opacity:1;}
#styling .photowrap a .photo:hover {opacity:0.6;}

/* ---------------------------------------------------------------- *
    ティザー用 告知テキスト囲み
 * ---------------------------------------------------------------- */
#styling  .topinfo {max-width:700px;border: 2px solid #aaa; padding: 1em;margin-top: 50px; margin-left: 250px; border-radius: 15px;background-color: #000;color: #fff;  opacity: 0.8;}
#styling  .topinfo h5 {text-align: left;margin-bottom: 5px; font-size:12px;font-weight: bold;text-shadow:0px 0px 3px rgba(255,255,255,1);}
#styling  .topinfo p  {text-align: center;font-size:18px;color: #FFF;  margin-bottom: 10px; margin-top: 10px;}
#styling  .topinfo a {text-decoration: none;color: #FF0000;}
#styling  .topinfo a:hover {text-decoration: underline;color:#FF0000;text-decoration-color: #FF0000;}


}


/* ---------------------------------------------------------------- *
    画面の横幅が980px以下の場合に適用されるCSS（タブレット&スマホ）
 * ---------------------------------------------------------------- */

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

.flex {display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;}

/* ---------------------------------------------------------------- *
    SP common
 * ---------------------------------------------------------------- */

.header2016 {background-color:#FFF;overflow:hidden;padding:20px 10px;}
.header2016 h1 a {display:block;text-indent:-9999px;width:120px;height:16px;background:url(../image/mugen.png) no-repeat;background-size:120px 16px;float:left;}
.header2016 .shop a {display:block;font-family:'Titillium Web',sans-serif;font-weight:600;font-size:14px;height:20px;line-height:20px;color:#333;text-decoration:none;background:url(../image/cart.png) no-repeat;padding-left:30px;float:right;}
.header2016 .shop a span {color:#C00;}

#pagetop {background-color:#EEE;padding:20px 0 40px 43%;border-bottom:solid 1px rgba(0,0,0,0.1);border-top:solid 1px rgba(0,0,0,0.1);}
#pagetop li {list-style:none;font-family:'Roboto',sans-serif;font-weight:400;font-size:10px;line-height:140px;text-align:center;}
#pagetop a {display:block;color:#333;width:58px;height:58px;text-decoration:none;background-image: url("../image/pagetop.png");background-repeat:no-repeat;
;opacity:1;transition:all .2s ease-in-out;}
#pagetop a:hover {opacity:0.8;transition:all .2s ease-in-out;}

footer {background:#FFF;overflow:hidden;text-align:center;}
footer .wrap {width:90%;margin:0 auto;padding-bottom:30px;}
footer .wrap .copyright {font-family:'Roboto',sans-serif;font-size:11px;margin-top:30px;}
footer .wrap .onlineShop {margin-top:30px;}
footer .wrap .onlineShop .text {display:block;font-size:10px;line-height:100%;margin-bottom:-8px;}
footer .wrap .onlineShop a {display:block;font-family:'Titillium Web',sans-serif;font-weight:400;color:#333;text-decoration:none;margin-top:17px;}
footer .wrap .onlineShop a span {color:#C00;}

/* ---------------------------------------------------------------- *
    SP home
 * ---------------------------------------------------------------- */

#menu {background-color:#ccc;}
#menu .wrap h2 {height:100px;background:url(../image/nav_bg.gif);z-index:1000;overflow:hidden;}
#menu .wrap h2 a {display:block;text-indent:-9999px;width:250px;height:28px;background:url(../image/logo1.png) no-repeat;background-size:250px 28px;margin:40px auto 0 auto;}
#menu ul {width:95%;margin:0 auto;padding:10px 0;}
#menu .wrap li {float:inherit;margin-left:auto;margin-top:auto;}
#menu li {width:32%;text-align:center;list-style:none;font-family:'Anton',sans-serif;font-size:16px;border-top:#000 solid 1px;background-color:#f9f9f9;text-shadow:0 1px 0 rgba(255,255,255,1);border-radius:4px;border:solid 1px rgba(255,255,255,0.1);box-shadow:0px 0px 5px rgba(0,0,0,0.3);}
#menu li a {display:block;text-decoration:none;color:#333;padding:20px 0;}
#menu ul .menu2ndHome {width:100%!important;margin:0 auto;}
#menu ul .menu2ndHome a {display:block;padding:15px 0;}



.mainImg_top2016 {background-color:#000;position:relative;}
.mainImg_top2016 img {display:block;height:auto;width:100%;}

.bx-wrapper .bx-prev {display:none;}
.bx-wrapper .bx-next {display:none;}

#styling {background:#000;background-size:cover;min-height:100%;border-top:solid 1px #ccc;}
#styling .wrap {width:90%;margin:0 auto;overflow:hidden;padding:30px 0 10px 0;text-align:center;}
#styling h3 {margin-bottom:30px;font-family:'Anton',sans-serif;font-size:30px;font-weight:normal;}
#styling .photowrap a {display:block;width:100%;margin-bottom:10px;height:auto;position:relative;background:#FFF;}
#styling .photowrap a .photo {display:block;width:100%;}
#styling .photowrap a .icon {display:none;bottom:10px;right:10px;position:absolute;}
#styling .photowrap a:hover {opacity:1;}
#styling .photowrap a .photo:hover {opacity:0.6;}

/* ---------------------------------------------------------------- *
    ティザー用 告知テキスト囲み
 * ---------------------------------------------------------------- */
#styling .topinfo {max-width:100%;margin: 0 auto;border: 1px solid #aaa; padding: 1em;margin-bottom: 30px;border-radius: 15px;background-color: #000;color: #fff;  opacity: 0.8;}
#styling .topinfo h5 {text-align: left;margin-bottom: 5px; font-size:12px;font-weight: bold;text-shadow:0px 0px 3px rgba(255,255,255,1);}
#styling .topinfo p  {text-align: left;font-size:12px;margin-bottom: 5px; font-weight: bold;white-space: nowrap;}
#styling .topinfo a  {text-decoration: underline;color: #FF0000;}



}