@charset "euc-jp";

body {
  background:#F6F6F6;
  color: #333;
  font-size: 11px;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  /*font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
  /*font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
}
a {
  color: #464e54;
}
a:hover {
  color: #5e5e5e;
}
ul, ol {
  margin: 0;
}
ul.inline{
  line-height: 1;
}
ul.inline > li, ol.inline > li {
  display: inline-block;
  padding: 0;
}

hr {
  margin: 0;
  border: 0;
  border-top: 1px dotted #999;
  width: 100%;
}
/*
 * layout
 */
 
svg.svg{
  display: none;
}

#wrapper{
  /*overflow: hidden;*/
  position: relative;
}
#header-g-nav,
#header-main {
  overflow: hidden;
  /*max-width: 1000px;*/
}
.container{
  width: 100%;
}
/* 全てのデバイスサイズに適用 */
.parent{
  overflow: hidden;
  zoom: 1;
}
.mWidth{
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 480px) {
  .mWidth{
    width: 93.33%;
    max-width: 464px;
  }
}
@media (min-width: 600px) {
  .mWidth{
    width: 94.67%;
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .mWidth{
    width: 95.833%;
    max-width: 768px;
  }
}
@media (min-width: 960px) {
  .mWidth{
    width: 93.33%;
    max-width: 960px;
  }
}
@media (min-width: 1120px) {
  .mWidth{
    width: 94.285%;
    max-width: 1120px;
  }
}

.mainLogo .logoWBASE{
  width: 155px;
  height: 60px;
}
.mainLogo .logoWBASE use{
  fill: #1E2E51;
}
#header-mobile{
  position: fixed;
  top: 0;
  left:0;
  z-index: 2000;
  width: 100%;
  padding: 8px 0;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: rgba(30,46,81,.96);
}
#sidebarbtn{
  float: left;
  cursor: pointer;
  padding: 4px 8px;
}
#sidebarbtn i.fa{
  font-size: 24px;
}
#header-mobile .logoWBASE{
  width: 82.667px;
  height: 32px;
  margin: 0 auto;
  margin-left: -38px;
}
#header-mobile .logoWBASE use{
  fill: #fff;
}

#sidebarMenu{
  display: none;
}
#sidebarMenu i.fa{
  color: #fff;
}
/*
 * contents
 */


#contents {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

#contents .topicpath-nav {
  margin-bottom: 5px;
}
#contents .topicpath-nav li {
  padding: 0;
}
#contents .topicpath-nav a {
  margin-left: 5px;
}

.pull-r{
  float: right;
}
.pull-l{
  float: left;
}
/*
 * side
 */

#side .unstyled img {
  display: block;
  margin-bottom: 5px;
}

/*
 * temp
 */

/* font */
.txt_l { text-align: left; }
.txt_c { text-align: center; }
.txt_r { text-align: right; }
.txt_fwn { font-weight: normal; }
.txt_fwb { font-weight: bold; }
.txt_i {font-style: italic;}
.txt_dec_ul{ text-decoration: underline;}
.txt_9 { font-size: 9px; }
.txt_10 { font-size: 10px; }
.txt_11 { font-size: 11px; }
.txt_12 { font-size: 12px; }
.txt_13 { font-size: 13px; }
.txt_14 { font-size: 14px; }
.txt_15 { font-size: 15px; }
.txt_16 { font-size: 16px; }
.txt_18 { font-size: 18px; }
.txt_20 { font-size: 20px; }
.txt_24 { font-size: 20px; }
.txt_28 { font-size: 28px; }
.txt_c_fff {color: #fff;}
.txt_c_333 {color: #333;}
.txt_c_555 {color: #555;}
.txt_c_666 {color: #666;}
.txt_c_777 {color: #777;}
.txt_c_999 {color: #999;}
.txt_c_aaa {color: #aaa;}
.txt_c_ccc {color: #ccc;}
.txt_c_navy{color: #1E2E51;}
.txt_c_lnavy{color: #476096;}
.txt_c_blue{color: #A4CEFD;}
.txt_c_orange{color: #EBB000;}
.txt_ltr_05{
  letter-spacing: .5px;
}
.txt_ltr_1{
  letter-spacing: 1px;
}
.txt_ltr_15{
  letter-spacing: 1.5px;
}
.txt_ltr_2{
  letter-spacing: 2px;
}
.txt_ltr_25{
  letter-spacing: 2.5px;
}
.txt_ltr_3{
  letter-spacing: 3px;
}
.txt_gf{
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
.txt_gf .txt_fwb{
  font-weight: 600;
  line-height: 1;
}
.txt_gf .txt_fw700{
  font-weight: 700;
  line-height: 1;
}
.txt_dec_none{
  text-decoration: none;
}
/* background */
.bgc_gray {
  background-color: #555;
}
.bgc_fff{
  background-color: #fff;
}
.bgc_aaa{
  background-color: #aaa;
}
.bgc_999{
  background-color: #999;
}
.bgc_888{
  background-color: #888;
}
.bgc_777{
  background-color: #777;
}
.bgc_lgray {
  background-color: #E0E0E0;
}
.bgc_navy {
  background-color: #1E2E51;
}
.bgc_lnavy {
  background-color: #476096;
}
.bgc_orange {
  background-color: #EBB000;
}
.fill_fff {
  fill: #fff;
}
.fill_navy {
  fill: #1E2E51;
}
.fill_lnavy {
  fill: #476096;
}
.fill_orange{
  fill: #EBB000;
}
.pos_rel{
  position: relative;
  display: block;
}
.pos_abs{
  position: absolute;
  display: block;
}
.display-block{
  display: block;
}
.of-hidden{
  overflow: hidden;
}

/* margin */
.mar-1{margin-left:-1%;margin-right: -1%;}
.mar-8{margin-left:-8px !important;margin-right: -8px !important;}
.mar_auto { margin: 0 auto; }
.mar_0 { margin: 0; }
.mar_8 { margin: 8px; }
.mar_16 { margin: 16px; }
.mar_24 { margin: 24px; }
.mar_32 { margin: 32px; }
.mar_t_0 { margin-top: 0; }
.mar_r_0 { margin-right: 0; }
.mar_b_0 { margin-bottom: 0; }
.mar_l_0 { margin-left: 0; }
.mar_5 { margin: 5px; }
.mar_t_5 { margin-top: 5px; }
.mar_r_5 { margin-right: 5px; }
.mar_b_5 { margin-bottom: 5px; }
.mar_l_5 { margin-left: 5px; }
.mar_t_10 { margin-top: 10px; }
.mar_r_10 { margin-right: 10px; }
.mar_b_10 { margin-bottom: 10px; }
.mar_l_10 { margin-left: 10px; }
.mar_t_20 { margin-top: 20px; }
.mar_r_20 { margin-right: 20px; }
.mar_b_20 { margin-bottom: 20px; }
.mar_l_20 { margin-left: 20px; }
.mar_t_30 { margin-top: 30px; }
.mar_r_30 { margin-right: 30px; }
.mar_b_30 { margin-bottom: 30px; }
.mar_l_30 { margin-left: 30px; }
.mar_t_50 { margin-top: 50px; }
.mar_r_50 { margin-right: 50px; }
.mar_b_50 { margin-bottom: 50px; }
.mar_l_50 { margin-left: 50px; }
.mar_t_4 { margin-top: 4px; }
.mar_r_4 { margin-right: 4px; }
.mar_b_4 { margin-bottom: 4px; }
.mar_l_4 { margin-left: 4px; }
.mar_t_8 { margin-top: 8px; }
.mar_r_8 { margin-right: 8px; }
.mar_b_8 { margin-bottom: 8px; }
.mar_l_8 { margin-left: 8px; }
.mar_t_16 { margin-top: 16px; }
.mar_r_16 { margin-right: 16px; }
.mar_b_16 { margin-bottom: 16px; }
.mar_l_16 { margin-left: 16px; }
.mar_t_20 { margin-top: 20px; }
.mar_r_20 { margin-right: 20px; }
.mar_b_20 { margin-bottom: 20px; }
.mar_l_20 { margin-left: 20px; }
.mar_t_24 { margin-top: 24px; }
.mar_r_24 { margin-right: 24px; }
.mar_b_24 { margin-bottom: 24px; }
.mar_l_24 { margin-left: 24px; }
.mar_t_32 { margin-top: 32px; }
.mar_r_32 { margin-right: 32px; }
.mar_b_32 { margin-bottom: 32px; }
.mar_l_32 { margin-left: 32px; }
.mar_t_48 { margin-top: 48px; }
.mar_r_48 { margin-right: 48px; }
.mar_b_48 { margin-bottom: 48px; }
.mar_l_48 { margin-left: 48px; }
.mar_t_64 { margin-top: 64px; }
.mar_r_64 { margin-right: 64px; }
.mar_b_64 { margin-bottom: 64px; }
.mar_l_64 { margin-left: 64px; }

/* padding */
.pad_v_4 { padding: 4px 0; }
.pad_v_6 { padding: 6px 0; }
.pad_v_8 { padding: 8px 0; }
.pad_v_10 { padding: 10px 0; }
.pad_v_16 { padding: 16px 0; }
.pad_v_20 { padding: 20px 0; }
.pad_v_24 { padding: 24px 0; }
.pad_v_30 { padding: 30px 0; }
.pad_v_32 { padding: 32px 0; }
.pad_0 { padding: 0; }
.pad_t_0 { padding-top: 0; }
.pad_r_0 { padding-right: 0; }
.pad_b_0 { padding-bottom: 0; }
.pad_l_0 { padding-left: 0; }
.pad_2 { padding: 2px; }
.pad_t_2 { padding-top: 2px; }
.pad_r_2 { padding-right: 2px; }
.pad_b_2 { padding-bottom: 2px; }
.pad_l_2 { padding-left: 2px; }
.pad_4 { padding: 4px; }
.pad_t_4 { padding-top: 4px; }
.pad_r_4 { padding-right: 4px; }
.pad_b_4 { padding-bottom: 4px; }
.pad_l_4 { padding-left: 4px; }
.pad_5 { padding: 5px; }
.pad_t_5 { padding-top: 5px; }
.pad_r_5 { padding-right: 5px; }
.pad_b_5 { padding-bottom: 5px; }
.pad_l_5 { padding-left: 5px; }
.pad_8 { padding: 8px; }
.pad_t_8 { padding-top: 8px; }
.pad_r_8 { padding-right: 8px; }
.pad_b_8 { padding-bottom: 8px; }
.pad_l_8 { padding-left: 8px; }
.pad_10 { padding: 10px; }
.pad_t_10 { padding-top: 10px; }
.pad_r_10 { padding-right: 10px; }
.pad_b_10 { padding-bottom: 10px; }
.pad_l_10 { padding-left: 10px; }
.pad_16 { padding: 10px; margin: 20px; font-size: 11px;}
.pad_50 { padding: 10px; font-size: 10px;}
.pad_t_16 { padding-top: 16px; }
.pad_r_16 { padding-right: 16px; }
.pad_b_16 { padding-bottom: 16px; }
.pad_l_16 { padding-left: 16px; }
.pad_20 { padding: 20px; }
.pad_t_20 { padding-top: 20px; }
.pad_r_20 { padding-right: 20px; }
.pad_b_20 { padding-bottom: 20px; }
.pad_l_20 { padding-left: 20px; }
.pad_24 { padding: 24px; }
.pad_t_24 { padding-top: 24px; }
.pad_r_24 { padding-right: 24px; }
.pad_b_24 { padding-bottom: 24px; }
.pad_l_24 { padding-left: 24px; }
.pad_30 { padding: 30px}
.pad_t_30 { padding-top: 30px; }
.pad_r_30 { padding-right: 30px; }
.pad_b_30 { padding-bottom: 30px; }
.pad_l_30 { padding-left: 30px; }
.pad_32 { padding: 32px}
.pad_t_32 { padding-top: 32px; }
.pad_r_32 { padding-right: 32px; }
.pad_b_32 { padding-bottom: 32px; }
.pad_l_32 { padding-left: 32px; }

/* border */
.bor_t_1 { border-top: 1px solid #eee; }
.bor_r_1 { border-right: 1px solid #eee; }
.bor_b_1 { border-bottom: 1px solid #eee; }
.bor_l_1 { border-left: 1px solid #eee; }
.bor_b_3 { border-bottom: 3px solid #666; }
.bor_dot_t_1 { border-top: 1px dotted #ccc; }
.bor_dot_r_1 { border-right: 1px dotted #ccc; }
.bor_dot_b_1 { border-bottom: 1px dotted #ccc; }
.bor_dot_l_1 { border-left: 1px dotted #ccc; }

/* radius */
.r4 {
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px; 
}
/* vertical align */
.va-10 { vertical-align: -10%; }
.va-20 { vertical-align: -20%; }
.va-30 { vertical-align: -30%; }
.va-35 { vertical-align: -35%; }
.va-40 { vertical-align: -40%; }

@media (max-width: 980px) {
  /* ~980px */
  #base_gmoWrapp,
  #gmo_CMSPbar {
    overflow: hidden;
    min-width: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  #contents{
    padding-top: 64px;
  }
  /* ~768px */
  /*
  #contents {
    padding-left: 0;
  }
  */
}
@media (max-width: 480px) {
  /* ~480px */
}

/*
 * icons
 */
.icon-user { background-position: -208px 0px; }
.icon-lg-b.icon-user { background-position: -312px 0px; }
.icon-adduser { background-position: -240px 0px; }
.icon-lg-b.icon-adduser { background-position: -360px 0px; }
.icon-login { background-position: -48px -80px; }
.icon-lg-b.icon-login { background-position: -72px -120px; }
.icon-logout { background-position: -32px -80px; }
.icon-lg-b.icon-logout { background-position: -48px -120px; }
.icon-home { background-position: -176px -16px; }
.icon-lg-b.icon-home { background-position: -264px -24px; }
.icon-mail { background-position: -64px 0px; }
.icon-lg-b.icon-mail { background-position: -96px 0px; }
.icon-pencil { background-position: -96px 0px; }
.icon-lg-b.icon-pencil { background-position: -144px 0px; }
.icon-help { background-position: -272px -80px; }
.icon-lg-b.icon-help { background-position: -408px -120px; }
.icon-cart { background-position: -176px -64px; }
.icon-lg-b.icon-cart { background-position: -264px -96px; }
.icon-search { background-position: -208px -16px; }
.icon-lg-b.icon-search { background-position: -312px -24px; }
.icon-chevron_up { background-position: -0px -144px; }
.icon-lg-b.icon-chevron_up { background-position: -0px -216px; }
.icon-chevron_down { background-position: -352px -128px; }
.icon-lg-b.icon-chevron_down { background-position: -528px -192px; }

.icon-b,
.icon-w {
  width: 16px;
  height: 16px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.icon-lg-b,
.icon-lg-w {
  width: 24px;
  height: 24px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*font awesome */
.fa{
  font-size: 14px;
}

.icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_b.png); }
.icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_w.png); }
.icon-lg-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png); }
.icon-lg-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .icon-b,
  .icon-w {
    -webkit-background-size: 368px 320px;
    background-size: 368px 320px;
  }

  .icon-lg-b,
  .icon-lg-w {
    -webkit-background-size: 552px 480px;
    background-size: 552px 480px;
  }

  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_w.png); }
  .icon-lg-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png); }
  .icon-lg-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png); }
}
@media (max-width: 768px) {
  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png); }
}
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 768px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 768px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 768px) and (min-device-pixel-ratio: 2), only screen and (max-width: 768px) and (min-resolution: 192dpi), only screen and (max-width: 768px) and (min-resolution: 2dppx) {
  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png); }
}


/* header */
#header-g-nav{
  /*padding: 8px;
  font-size: 12px;*/
  padding: 6px;
  font-size: 9px;
}
#header-g-nav a{
  color: #fff;
  text-decoration: none;
}
#header-g-nav a:hover,
#sidebarMenu a:hover,
#footer a:hover{
  color: #EBB000;
  text-decoration: underline;
}

#header-g-nav ul.icon-ul{
  line-height: 0;
}
#header-g-nav ul li{
  margin: 0 8px;
  line-height: 18px;
}
#header-g-nav ul li a{
  display: block;
  overflow: hidden;
}
#header-g-nav .fa,
.formArea .fa{
  font-size: 18px;
  line-height: 1;
}
#footer .fa,
#topInfo .fa{
  font-size: 26px;
  line-height: 1;
}

#topInfo .fa {
  display: block;
  height: 64px;
  width: 64px;
  background: #f8f8f8;
  text-align: center;
  line-height: 64px;
  border-radius: 50%;
  font-size: 28px;
  margin-right: 16px;
  color: #1E2E51;
}

#topInfo dl{
}

#topInfo dt{
  font-size: 12px;
  margin-bottom: 8px;
  color: #333;/*EBB000*/
  line-height: 1.2;
}
#topInfo dd{
  font-size: 9px;
  line-height: 1.2;
}

.formArea input{
  width: 170px;
  font-size: 13px;
  padding: 4px 6px;
  border: solid 1px transparent;
  outline: none;
}
.formArea input:focus{
  border: 1px solid #f2f2f2;
  font-size: 16px;
  color: #666;
}

input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input:-moz-placeholder{
  color: #aaa;
}

.cartArea{
}
.cartArea a{
  background: #F6F6F6;
  display: block;
  padding: 12px 16px;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
}
.cartArea a:hover{
  text-decoration: none;
  background:#ddd;
}
.cartArea .fa{
  font-size: 24px;
  color: #888;
  vertical-align: middle;
}
cartArea a:hover .fa{
  color: #666;
}
div.category-navi ul.listCat{
  text-align: center;
  width: 98%;
  display: block;
  /*
  display: table;
  table-layout: fixed;
  */
  /*position: relative;*/
  margin: 0 auto;
}
div.category-navi ul.listCat > li{
  /* display: table-cell; */
  display: block;
  float: left;
  width: 14%;
}
div.category-navi ul li a{
  text-decoration: none;
  display: block;
  padding: 8px 0;
}
/*div.category-navi ul li a:hover{
}
*/
#contents ul.listCat > li,
#footer ul.listCat > li{
  overflow: hidden;
}
#contents ul.listCat > li > i.fa,
#footer ul.listCat > li > i.fa{
  cursor: pointer;
  font-size: 16px;
  width: 16px;
  text-align: center;
  margin-top: -2px;
}
ul.listCat li div.areasubcat{
  clear: both;
}
#sidebarMenu ul.listCat > li{
  font-size: 18px;
}
#sidebarMenu ul.listCat > li > i.fa{
  cursor: pointer;
  font-size: 22px;
  width: 22px;
  text-align: center;
  margin-top: -2px;
}
/*
ul.dropdown-nav{
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -webkit-backface-visibility: hidden;
}
*/
div.category-navi div.areasubcat{
  /*display: none;*/
  position: absolute;
  background: rgba(236, 236, 239, .98);/*rgba(255, 255, 255, .98);*/
  height: 0;
  padding: 0 16px;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  overflow: hidden;
}
div.category-navi ul.listCat > li:hover div.areasubcat{
  /*display: block;*/
  /*position: absolute;*/
  height: auto;
  z-index: 30;
  padding: 4px 16px 8px;
}
div.category-navi ul.listCat > li:last-child div.areasubcat{
  margin-left: -15px;
}
div.category-navi ul.listsubcat li{
  display: list-item;
  text-align: left;
  font-weight: bold;
  /* width: 160px; */
  /* float: left; */
  list-style: none;
  width: 180px;
  margin: 3px auto;
  /*margin: 4px auto;*/
}

div.category-navi ul.listsubcat li a{
  padding: 4px 0;
}
div.category-navi li a:hover{
  text-decoration: underline;
  color: #EBB000;
}
div.category-navi ul.listCat > li > a{
  text-decoration: none;
}
/* footer */

#footer{
  /*background: #e9e9e9;*/
  font-size: 12px;
}
#footer a{
  color: #ddd;
  text-decoration: underline;
}
#footer a:hover i.txt_c_orange{
  color: #ffd968;
}
#footer a.txt_dec_none{
  text-decoration: none;
}
#footer ul.listCat a{
  text-decoration: none;
}
#footer .col{
  padding-right: 1.8%;
  padding-left: 1.8%;
}
#footer ul li{
  margin-bottom: 2px;
}

/* top page */
.topnews h3{
  margin: 0;
}
.recommend .recommend-unit{
  position: relative;
}
.icons-new{
  position: absolute;
  display: block;
  background: rgba(235,176,0,.65);
  width: 48px;
  height: 48px;
  font-size: 13px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  right: 13px;
  top: 8px;
  color: #fff;
  font-style: italic;
  font-weight: normal;
}
/* 3 - category page */
#category .productlist-unit{
  position: relative;
}

/* 4 - product page */
#product .breadcrumbs{
  
}
/*
#product select{
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-indent: .6em;
}
#product select:after{
  content:"AAAAAAAAAAAA";
}
*/
#product select, [type="file"] {
  height: 48px;
  line-height: 1;
  font-size: 15px;
}
#product .input-prepend.input-append input {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 48px;
  text-align: right;
  border: 1px solid #ccc;
}
#product .icon-lg-b.icon-chevron_up {
  background-position: -0px -216px;
}
#product .icon-lg-w.icon-chevron_up {
  background-position: -0px -216px;
}
#product .icon-lg-w.icon-chevron_down {
  background-position: -528px -192px;
}
#product .btn {
  border: 1px solid #999;
}
#product .btn:hover,
#product .btn:focus,
#product .btn:active,
#product .btn.active,
#product .btn.disabled,
#product .btn[disabled] {
  background-/*col*/or: #476096;
  color: #333;
  *background-color: #d9d9d9;
}
#product .btn.disabled,
#product .btn[disabled]{
  color: #fff;
  background: #888;
}
#product .btn-addcart{
  padding: 16px 24px;
  width: 60%;
}
#product .btn-addcart:hover{
  color: #fff;
}
.teika {
  font-size: 18px;
  text-decoration: line-through;
  color: #ccc;
}
span.price{
 font-size: 120%;
 color: #888;
}
.saleprice{
  color: #ff8855;
}
span.soldout {
    position: absolute;
    top: 5px;
    left: 13px;
    letter-spacing: 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    background: rgba(90,90,90,.6);
    padding: 1px 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; 
}
#product .product-order .bgc_navy:hover{
  background: #495C88;
}
#product .product-order-exp small{
  margin-bottom: 24px;
  display: inline-block;
  float: right;
  color: #999;
}
.product-order-exp h3 {
  color: #1E2E51;
  font-size: 22px;
  /*font-size: 16px;*/
  font-weight: normal;
  padding-bottom: 16px;
  border-bottom: 1px dotted #999;
  margin-top: 8px;
  margin-bottom: 24px;
}
#product .product-order-exp > div > div{
  display: block;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 1%;
  padding-left: 1%;
  min-height: 1px;
  word-break: break-all;
  margin-bottom: 24px;
}
#product .product-order-exp > div > div.D-DESC{
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
}
#product .product-order-exp > div > div.D-SPEC,
#product .product-order-exp > div > div.D-SIZE{
  width: 50%;
}
@media (max-width: 768px) {
  #product .product-order-exp > div > div.D-SPEC,
  #product .product-order-exp > div > div.D-SIZE{
    width: 100%;
  }
  #footer{
    font-size: 12px;
    line-height: 1.6;
  }
  #footer a{
    text-decoration: underline;
  }
}

/* table */
.table.sizechart{
  margin-bottom: 8px;
}
.table.sizechart th, .table.sizechart td{
  text-align: center;
}
.table.sizechart th{
  background: #f9f9f9;
}
.table.sizechart thead th{
  background: #efefef;
}

/* google map */
#map_inner{
  position: relative;
  width: 100%;
  height: auto;
}
#map_inner:before {
    content: "";
    display: block;
    padding-top: 60%;
}
#map_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.mar_t_111 {
    margin-bottom: 38px;
    margin-left: -10px;
}

/*↓keybow*/

.explink {
  color:#004297;
}

/* 映像・画像を16:9で表示 */
#wrapperwbase {
    position: relative;
    width: 100%;
}
#wrapperwbase:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#contentwbase {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*テーブル画像4列配置*/
.table-imagegrid4 {
	background-color: transparent;
	color: #000000;
	border: 0;
	table-layout: fixed;
	width: 100%;
	margin: 1em auto;
}
.table-imagegrid4 tr {
	background-color: transparent;
	color: #000000;
	border: 0;
}
.table-imagegrid4 td {
	background-color: transparent;
	color: #000000;
	border: 0px;
	padding: 1px;
	margin: 1px;
	vertical-align: top;
	width: 25%;
	border: 0;
}


/*テーブル画像2列配置*/
.table-imagegrid2 {
	background-color: transparent;
	color: #000000;
	border: none;
	table-layout: fixed;
	width: 100%;
	margin: 1em auto;
}
.table-imagegrid2 tr {
	background-color: transparent;
	color: #000000;
	border: 0;
}
.table-imagegrid2 td {
	background-color: transparent;
	color: #000000;
	border: 0;
	padding: 1px;
	margin: 1px;
	vertical-align: top;
	text-align: center;
	width: calc(100% / 2);
}

/* ジオメトリ用 */
table.geometry {
	background-color: transparent;
	color: #666;
	border-collapse: collapse;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	table-layout: fixed;
	width: 100%;
	margin: auto;
}
table.geometry thead {
	background-color: transparent;
	color: #666;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px solid #000000;
	padding: 1%;
	vertical-align: middle;
	font-weight: bolder;
}
table.geometry th {
	background-color: transparent;
	color: #666;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px solid #000000;
	padding: 1%;
	vertical-align: middle;
	width: 30%;
	font-weight: bolder;
}
table.geometry td {
	background-color: transparent;
	color: #666;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px solid #000000;
	padding: 1%;
	vertical-align: middle;
}
/* flexbox */
.flexboxmain-nav,
.flexboxmain {
	display: -webkit-flex;
	display: -ms-flexox;
	display: flex;
	align-items: stretch;
}

/* Main contents */
.flexboxmain section {
	-webkit-flex: 1;
	-ms-flexox: 1;
	flex: 1;
}













.container4 {
  display: flex;
  justify-content: space-between; /* カラムを横並びに */
  align-items: flex-start; /* 上揃えに */
  margin: 0 20px; /* 左右のマージンを開ける */
}

.text-column4 {
  flex: 1; /* 左側のカラムにスペースを割り当て */
  padding-right: 20px; /* 右側の画像との間隔 */
  margin-left: 0; /* 左側のマージンを無しに設定 */
}

.image-column4 {
  flex: 1; /* 右側のカラムにスペースを割り当て */
  display: flex;
  justify-content: center; /* 画像を中央揃え */
}

.image-column4 img {
  max-width: 100%; /* 画像がカラムに収まるように */
  height: auto; /* アスペクト比を保つ */
}

/* レスポンシブデザイン: スマホ用 */
@media screen and (max-width: 768px) {
  .container4 {
    flex-direction: column; /* 横並びを縦並びに変更 */
    align-items: flex-start; /* 左詰めにする */
    margin: 0 10px; /* スマホでは左右マージンを少し小さく */
  }

  .text-column4 {
    padding-right: 0; /* 右側の余白を削除 */
    padding-bottom: 20px; /* 画像との間隔を追加 */
    margin-left: 0; /* スマホでも左側のマージンを無しに */
  }

  .image-column4 {
    width: 100%; /* 画像が親要素に合わせて広がる */
    margin-top: 20px; /* 画像の上に間隔を追加 */
  }
}






/* おすすめ商品画像の調整 */
.recommend-image {
    width: 100%;
    height: 0;
    padding-bottom: 66.66%; /* 3:2のアスペクト比 */
    background-color: #fff; /* 背景を白に */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 画像がはみ出さないように */
    position: relative; /* 子要素を中央に配置するために必要 */
}

/* 商品画像 */
.recommend-image img {
    width: auto; /* 横幅を自動調整 */
    height: 100%; /* 高さを親要素に合わせる */
    max-height: 100%; /* 最大高さを親要素に合わせる */
    object-fit: contain; /* 縦横比を保ちつつ画像を親要素に収める */
    object-position: center; /* 画像を中央に配置 */
    position: absolute; /* 画像を中央に絶対配置 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 画像を中央に持ってくる */
    border-radius: 0; /* 画像の角を四角にする */
}

/* 以下、他の既存のCSSコードはそのまま使ってください */