@charset "utf-8";

/* common------------------------*/
body{ background:url(../img/bg.jpg); }
#wrapper{ width:100%; overflow:hidden; }
.inner{ max-width:1060px; margin:0 auto; }
main{ position:relative; display:block; }
a:hover{ text-decoration:none; }
.tel a{ text-decoration:none;  }
.note{ font-size:0.9em; }

::selection { background:#586887; color:#FFF; }
::-moz-selection { background:#586887; color:#FFF; }

.bg_dark{ background:url(../img/bg_dark.jpg); }
.t_line{ position:relative; }
.t_line::before, .t_line::after {
  position:absolute; content:""; height:1px; top:50%; left:0; background:#393939; }
.t_line::after{ left:auto; right:0; }

.title{ position:relative; margin:0 auto 2em; text-align:center; font-size:1.6em; line-height:1.4; letter-spacing:0.1em }
.title > span{ display:inline-block; position:relative; text-align:left; }
.title > span::before{
  position:absolute; content:""; top:0.5em;
  background:url(../img/i_hand.svg) no-repeat 0 0 / 100%; }
.title .ef{ display:block; font-size:0.6em; font-weight:normal; }

.overlay { position:fixed; z-index:999; top:0; right:0; bottom:0; left:0; display:none;
    width:100%; height:100%; }

/* header------------------------*/
#header { top:0; left:0; z-index:999; color:#FFF; background:#2b3342; }

/* hnav ------------------------*/
#hnav a{ display:inline-block; text-decoration:none; color:#FFF; }
#hnav .sns_list li{ margin:0 0.3em; }
#hnav .sns_list li.english a{ padding:0.2em 0.5em 0.2em; }
#hnav .sns_list a{ padding:0 0.4em 0.4em; background:#000; border:1px solid #000; }
#hnav .sns_list a:hover{ border:1px solid #FFF; }
#hnav .sns_list img{ width:18px; }

/* menuボタン */
.menu-button { position:relative; z-index:9999; background:#992e0e; cursor:pointer; }
.menu-button:hover{ background:#c9522f; }
.menu-button,
.menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
.menu-button .h_menu { position:relative; width:30px; height:20px; margin:0 auto; }
.menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:#FFF; }

.menu-button span:nth-of-type(1) { top:0; }
.menu-button span:nth-of-type(2) { top:9px; }
.menu-button span:nth-of-type(3) { bottom:0; }

.menu-button.open span:nth-of-type(1) {
  -webkit-transform:translateY(9px) rotate(-45deg);
  transform:translateY(9px) rotate(-45deg);
}
.menu-button.open span:nth-of-type(2) {
  opacity:0;
}
.menu-button.open span:nth-of-type(3) {
  -webkit-transform:translateY(-9px) rotate(45deg);
  transform:translateY(-9px) rotate(45deg);
}
.menu-button .label { width:auto; height:auto; text-align:center; line-height:1; font-size:0.85em; }

.nav_shop{ position:absolute; }
.nav_shop a{ display:block; padding:0.4em 0.2em 0.4em 0.4em; text-decoration:none;
  font-size:0.85em; color:#FFF; background:#00060f; border:1px solid #00060f; }
.nav_shop a:hover{ background:#222; border:1px solid #FFF; }
.nav_shop a img{ width:24px; margin-right:4px; }
.free{ padding:0.5em; text-align:center; line-height:1.5;
  font-size:0.85em; border:1px solid #FFF; }
.free span{ font-size:1.05em; }

/* footer ------------------------ */
footer{ font-size:0.9em; color:#FFF; background:url(../img/bg_footer.jpg) #111419 no-repeat right top; }
footer p{ margin:0; }
footer a{ text-decoration:none; color:#FFF; }
footer .logo{ text-align:center; }
.flink { margin-bottom:3em; overflow:hidden; }
.flink > li{ margin:0 1em 3em; float:left; }
.flink .f_guide{ width:48%; }
.flink .f_shop{ width:45%; }
.flink .f_shop li:nth-child(2n+1){ width:30%; }
.flink .f_shop li:nth-child(2n){ width:60%; }
.flink > li > a{ font-size:1.1em; }
.flink > li ul{ margin:1.5em 1em; }
.flink > li ul li{ width:48%; margin-bottom:0.5em; }
.flink a{ position:relative; padding-left:0.8em; }
.flink a::before{ content:''; position:absolute; bottom:50%; left:0;
  width:0; height:0;
  border-style:solid;
  border-width:2px 0 2px 6px;
  border-color:transparent transparent transparent #717171; }
.flink a:hover { color:#FFF; text-decoration:underline; }
.copyright{ text-align:center; letter-spacing:0.05em; }

/* contents ------------------------ */
.brand{ margin:0; }
.brand span { display:inline-block; padding:0 0.6em; text-align:center;
  color:#FFF; font-size:0.95em; line-height:1.7; font-family:'Century Gothic', Futura; }
.brand .natsuno{ background:#2b485f; }
.brand .konatsu{ background:#bd1b23; }

/* product */
.product{ padding-top:2em; }
.product .ef.sub{ margin:0 0 0.2em 0.7em; font-size:1.7em; font-weight:normal; }
.p_list li .brand{ position:absolute; top:0; left:0; z-index:1; }
.p_list li > a{ display:block; position:relative; height:100%; text-decoration:none; color:#222; background:#FFF; border:1px solid #FFF; overflow:hidden; }
.p_list li a:hover{ border:1px solid #2b3342; }
.p_list .number{ font-size:0.95em; font-family:'Century Gothic', Futura; }
.p_list .cat{ font-size:0.85em; line-height:1.5; }
.p_list .price { color:#992e0e; }

.s_naire, .s_order, .s_wazuka { display:inline-block; background:#fff; }
.s_naire{ color:#4e658f; border:1px solid #4e658f; }
.s_order { color:#999; border:1px solid #999; }
.p_list span[class^="s_"] { margin-left:.5em; padding:0 .5em;font-size:.8em; }

/* 商品一覧　ボックス型 */
.list_bx{ width:31%; margin-bottom:2em; line-height:1.5; }
.list_bx > a{ padding:1.5em 1em 1em; }
.list_bx .number{ display:inline-block; float:right; }
.list_bx figure{ clear:both; margin:1.5em 0 1em; padding-top:60%; position:relative; overflow:hidden; }
.list_bx p{ margin:0; }
.list_bx .price { text-align:right; }

/* 商品一覧　ヨコ型 */
.list_y{ width:100%; margin-bottom:20px; background:#fff; }
.list_y > a{ padding:35px 25px 25px; }
.list_y .number{ margin:0; text-align:right; color:#919191; }
.list_y .pname{ margin:0; font-size:1.1em; }
.list_y figure{ margin:20px auto; max-width:800px; }
.list_y .ex{ margin:0; font-size:.95em; }
.list_y ul.price{ max-width:18em; margin-top:.5em; }
.list_y .price li { width:100%; }
.list_y .price .size { flex:1; -webkit-flex:1; }
.list_y .price .price { width:5em; text-align:right; }

/* 商品一覧　左右型 */
.list_lr{ width:100%; margin-bottom:20px; }
.list_lr > a{ padding:25px; }
.list_lr figure{ position:relative; }
.list_lr figure .vh_ctr { position:relative; }
.list_lr .txt{ width:50%; }
.list_lr .pname{ margin:0; font-size:1.1em; }
.list_lr .number{ margin:0; color:#919191; }
.list_lr .ex{ font-size:.95em; }
.list_lr ul.price{ max-width:18em; margin-top:.5em; }
.list_lr .price .size { flex:1; -webkit-flex:1; }
.list_lr .price .price { width:5em; text-align:right; }

/* 詳細検索 */
.d_search{ margin:0 0 50px; color:#FFF; padding:1.5em 3em; background-color:#323e55; }
.d_search .sub{ font-weight:normal; }
.d_search h3.sub{ font-size:1.3em; }
.d_search ul{  }
.d_search li{ margin-bottom:1em; }
.d_search input[type="text"], .d_search select{ padding:5px 5px; border:0; }
.d_search .cat li  select { width:100%; }
.d_search select option:nth-child(odd) { background:#FFF; }
.d_search select option:nth-child(even) { background:#E0E0E0; }
.d_search select.selected, .d_search select option[selected] { background:#f39e84; }
.d_search .keyword, .d_search .keyword input, .d_search .price { width:100%; }
.d_search .submit{ width:40%; margin:10px auto; }
.d_search .submit input{ width:100%; border:none; }

.bnr_list > li{ margin:0 0 1.5em 2%; line-height:1.5; }
.bnr_list > li > a{ display:block; position:relative; height:100%; }
.bnr_list > li > a::before{ position:absolute; content:""; width:100%; height:100%; top:0; left:0;
  background:transparent; transition:all .3s; }
.bnr_list .txt{ position:absolute; width:100%; bottom:1em; left:0; margin:0; padding:0.5em 0.8em;
  color:#FFF; background:rgba(21,26,31,0.9); }
.bnr_list a:hover .txt{ background:transparent; transition:all .3s; }
.bnr_list > li > a:hover::before{ background:rgba(21,26,31,0.5); }

.b_link a{ display:block; position:relative; padding:1em; text-align:right; text-decoration:none;
  color:#FFF; background:#30353b; }
.b_link a::before{ position:absolute; content:""; width:1.5em; height:1px; left:0; top:50%;
  background:#FFF; transition:all .3s; }
.b_link a:hover::before{ width:4em; }

/* #search-wrapper ------------------------*/
#search-wrapper { color:#000; overflow:auto; }
#search-wrapper .natsuno { background:#c5ccd9; }
#search-wrapper .konatsu { background:#f5dcdd; }
#search-wrapper .brand { margin-top:55px; height:141px; }
#search-wrapper .brand img { max-width:112px; }
#search-wrapper .brand + h3 { margin:10% 0 4%; font-weight:normal; }
#search-wrapper .category { width:85%; margin:0 auto 1em; line-height:1.2; }
#search-wrapper .category > div { padding:4% 2%; border-top:1px solid #000; overflow:hidden; }
#search-wrapper .category > div:last-child { border-bottom:1px solid #000; }
#search-wrapper .category dt { clear:left; }
#search-wrapper .category dd { float:left; margin:0; font-size:.94em; }
#search-wrapper .category dd a {
  display:block; position:relative; color:#000; text-decoration:none;
  margin:7px 10px 7px 0; padding-left:15px;
  }
#search-wrapper .category .col2 dd { width:50%; }
#search-wrapper .category .col3 dd { width:33.33%; }
#search-wrapper .category .col2 dd:nth-child(-n+3) a,
#search-wrapper .category .col3 dd:nth-child(-n+4) a { margin-top:0; }
#search-wrapper .category dd:last-child a { margin-bottom:0; }
#search-wrapper .category dd:nth-last-child(2):nth-child(even) a { margin-bottom:0; }
#search-wrapper .category dd a::before {
  content:""; display:block; width:0; height:0;
  position:absolute; left:0; top:50%; margin-top:-2px;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-left:5px solid #000; }

/* bnr_about_hashi */
.bnr_about_hashi{ margin:0 auto; padding:2em 2em;
  color:#FFF; background:url(../img/bg_about_hashi.jpg) #14161c no-repeat right top; }
#top .bnr_about_hashi{ margin-top:3em; }
.bnr_about_hashi .sub{ margin-bottom:0.4em; font-size:1.2em; font-weight:400; }
.bnr_about_hashi a{ display:block; position:relative; padding:0.5em 0.8em 0.5em 1.2em; font-size:1.05em;
  color:#FFF; text-decoration:none; }
.bnr_about_hashi a::before{ position:absolute; content:"";
  bottom:50%; left:0.5em; width:0; height:0;
  border-style:solid;
  border-width:2px 0 2px 6px;
  border-color:transparent transparent transparent #9a9a9a; }
.bnr_about_hashi a:hover{ background-color:rgba(151,168,218,0.4); }

/* SSL */
.ssl_seal { max-width:560px; margin:3em auto; padding:15px; font-size:.9em; background:#fff; }
.ssl_seal p { flex:1; margin:0 0 0 1em; }

/*1260px 以下*/
@media screen and (max-width:1259px){
.inner{ padding-right:30px; padding-left:30px; }
}

/*1260px 以上*/
@media screen and (min-width:1260px){
  #hnav .hlist{ margin:0 3em; -webkit-justify-content:center; justify-content:center; }
  .bnr_about_hashi li{ margin:0 0.5em; }
}

/*959px 以下*/
@media screen and (max-width:959px){
  body{ font-size:0.9em; }

  /* header ------------------------*/
  #header { position:relative; width:100%; padding:5px 10px; min-height:74px; }
  #header .logo {position:relative; z-index:2;  width:50px; }
  #nav-wrappar { position:absolute; top:100%; right:0; left:0; display:none; height:calc(100vh - 270px); }


  #hnav { padding:0 0 1em; }

  #menu-btn { display:block; position:absolute; top:6px; right:6px; }
  #search-btn { display:none; }

  .menu-button { padding:8px 12px 10px; }
  .menu-button .label { margin:0 0 10px; }

  .nav_shop { top:0; left:0; right:0; bottom:0; }
  .nav_shop ul { position:absolute; top:29px; right:200px; }
  .nav_shop li { margin-left:1em; }
  .nav_shop li a { padding-right:0.5em; }
  .nav_shop .free { position:absolute; top:9px; right:80px; margin:0; }

  .b_link a{ padding:0.5em 0.5em; }
  .b_link a::before{ width:0.8em; }

  /* #nav-wrappar ------------------------*/
  #nav-wrappar { margin:0 -10px; background:#2b3342; }
  .hlist { margin-bottom:.8em; border-top:1px solid #12161d; }
  .hlist li { width:33.33%; border-bottom:1px solid #12161d; border-right:1px solid #12161d; }
  .hlist li:nth-child(3n) { border-right:none; }
  #hnav a{ display:block; padding:0.8em 0; text-align:center; font-size:0.9em; }
  #search-overlay { display:block; position:static; }
  #search-wrapper .flex > div { width:100%; }
  .sns_list{ padding:0.5em 0; }

  /* contents ------------------------*/
}

/*759px 以下*/
@media screen and (max-width:759px){
  .inner { padding-right:15px; padding-left:15px; }
  .title{ margin-bottom:1em; font-size:1.3em; }

  /* contents ------------------------ */
  .product{ padding-bottom:0; }
  .product .ef.sub{ margin-left:0; font-size:1.5em; }
  .bnr_list li{ width:48%; }
  .bnr_about_hashi{ padding:1.5em 1.5em; background-size:600px; }
  .bnr_about_hashi li{ width:50%; }
  .bnr_about_hashi a{ padding:0.3em 0 0.3em 1.2em; font-size:0.9em; }
  .b_link li{ width:48%; margin-bottom:10px; }

  .list_bx figure { margin-bottom:0; }
  .list_bx .status { margin:0 0 .5em; }

  /* 詳細検索 */
  .abox{ overflow:hidden; margin-bottom:10px; }
  .abox a{ display:block; padding:8px 0; text-align:center; font-size:0.9em; color:#FFF; text-decoration:none; background-color:#992e0e; }
  .i_naire{ width:100px; height:40px; float:left; margin-right:10px; }
  .i_washer{ width:100px; height:40px; float:left; }
  .abox a.i_search{ width:40px; height:40px; float:right; padding:8px; }
  .d_search { display:none; }
}

/*599px 以下*/
@media screen and (max-width:599px){
  .t_line::before, .t_line::after{ width:4em; }
  .title > span{ margin-left:2em; }
  .title > span::before{ width:2.5em; height:100%; left:-3.0em; }
  .bnr_list li{ width:80%; margin:0 auto 1.5em; }

  /* header ------------------------*/
  #header { padding-bottom:0; }
  .nav_shop { position:static; }
  .nav_shop ul { position:static; margin:10px -10px 0; }
  .nav_shop li { margin:0; width:33.33%; }

  #nav-wrappar { height:calc(100vh - 370px); }

  /* footer ------------------------*/
  footer { padding:1em 0; }
  footer .logo, .flink { display:none; }
  footer .copyright{ font-size:.85em; }

  /* #search-wrapper ------------------------*/
  #search-wrapper .category dt { margin-bottom:7px; font-weight:bold; }
  #search-wrapper .category dd a { margin:7px 10px 0 0; padding-left:13px; }
  #search-wrapper .category dd a::before { margin-top:-3px; left:2px; }

  /* contents ------------------------ */
  .bnr_list li{ width:100%; }

  .p_list span[class^="s_"] { font-size:0.7em; }

  /* 商品一覧　ボックス型 */
  .list_bx { width:48%; }
  .list_bx > a { padding:1.5em 10px 10px; }
  .list_bx .number{ padding:8px 0 0; font-size:1.0em; }
  .list_bx .pname{ margin:0 0 10px; font-size:.9em; }

  /* 商品一覧　ヨコ型 */
  .list_y > a{ padding:30px 15px 15px; }
  .list_y .number{ width:100%; }
  .list_y .pname{ line-height:1.5; }
  .list_y .ex{ font-size:0.9em; line-height:1.4; }
  .list_y .txt{ width:100%; }
  /*.list_y .price{ width:100%; }*/

  /* 商品一覧　左右型 */
  .list_lr > a{ padding:20px 15px 15px; }
  .list_lr figure{ width:100%; padding:10px 0; }
  .list_lr .txt{ width:100%; }
  .list_lr .number{ text-align:right; }
  .list_lr .pname{ line-height:1.5; }
  .list_lr .ex{ font-size:0.9em; line-height:1.4; }

  .d_search { padding:1em 1.5em; }
  .d_search .sub{ font-size:1.1em; }
  .d_search .cat li{ width:48%; }
  .d_search .cat li:nth-child(odd) { margin-right:4%; }

}

/*480px 以下*/
@media screen and (max-width:480px){
  /* contents ------------------------ */
  .b_link li{ width:100%; }
  .a_nav.b_link li{ width:48%; }
}

/*600px 以上*/
@media screen and (min-width:600px){
  .t_line::before, .t_line::after{ width:6em; }
  .title > span{ margin-left:3em; }
  .title > span::before{ width:3em; height: 100%; left:-4.5em; }

  /* footer ------------------------*/
  footer { padding:4em 0 2em; }
  footer .copyright{ margin-top:1em; }

  /* 商品一覧 */
  .list_y .txt { flex:1; -webkit-flex:1; padding-right:1em; }
  .list_lr figure{ width:45%; }

  /* #search-wrapper ------------------------*/
  #search-wrapper .category > div { padding:4% 2% 4% 10em; }
  #search-wrapper .category dt { float:left; margin-left:-8em; width:8em; }

  .d_search .cat li{ width:32%; margin-right:2%; }
  .d_search .cat li:nth-child(3n) { margin-right:0; }

}

/*760px 以上*/
@media screen and (min-width:760px){

  /* contents ------------------------ */
  .product{ padding-top:5em; padding-bottom:2em; }
  .bnr_list li{ width:31%; }
  .b_link li{ width:23%; }
  .b_link li:nth-child(n+5) { margin-top:1em; }

  .list_bx .status { position:absolute; top:0; right:0; }
}

/*960px 以上*/
@media screen and (min-width:960px){
  /* header ------------------------*/
  #header {
    position:fixed; bottom:0; width:160px; height:100vh; padding:30px 25px 0; }
  #header .logo{ margin-bottom:3em; }

  /* hnav ------------------------*/
  #hnav{ position:fixed; top:0; left:160px; right:0; z-index:998; padding:0.8em 0;
   background:rgba(0,0,0,.6);
   -webkit-transition:all .5s ease-out; transition:all .5s ease-out; }
  #hnav a{ letter-spacing:0.05em; }
  #hnav ul{ float:left; }
  #hnav .hlist li{ margin:0 0.7em; }
  #hnav .hlist li a{ padding:0.2em 0.5em; }
  #hnav .hlist li a:hover{ background:#000; }
  #hnav .hlist span{ margin-right:0.5em; font-size:0.9em; }

  #search-overlay { left:160px; }
  #search-wrapper { width:calc(100% - 160px); height:100%; }
  #search-wrapper .flex > div { width:50%; }

  #menu-btn { display:none; }
  #search-btn { display:block; }

  .menu-button { margin-bottom:8em; padding:0.8em 0.8em 1.5em; }
  .menu-button .label { margin:0 0 15px; }

  .nav_shop { top:auto; left:25px; right:25px; bottom:20px; }
  .nav_shop ul{ margin-bottom:1.5em; }
  .nav_shop li { width:100%; margin-bottom:1em; }

  /* footer ------------------------*/
  footer { margin-left:160px; }

  /* contents ------------------------*/
  main { margin-left:160px; }
  .t_line::before, .t_line::after { width:16em; }

  /* bnr_about_hashi */
  .bnr_about_hashi .sub{ margin-left:0.5em; font-size:1.8em; }

}