/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-me/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 3.1.3.1652367681
Updated: 2022-05-13 00:01:21

*/

.sp_only{
    display: none;
}
.page-id-8712 header{
    display: none;
}
#YMK-module{
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  z-index: 500;
}

#YMK-module div{
  width: 100%;
}
iframe#YMK-module-iframe{
  width: 100%!important;
  height: 100%!important;

}

.pf-layout-container{
    width: 85%;
    margin: 60px auto 0;
    max-width: 1146px;
}
.pf-showcase-content {
    display: flex;
    gap: 15px;

    margin-bottom: 60px;
    width: 100%;
    justify-content: center;
}

.pf-showcase-webmodule{
    position: relative;
    width: 100%;
}

.f-showcase-webmodule{
    width: 100%;
}

.pf-showcase-webmodule {
    margin-right: 40px;
    position: relative;
}

.pf-showcase{
padding: 0 0px;
}


.pf-showcase-webmodule{
  position: relative;
  width: 100%;
}

.f-showcase-webmodule{
  width: 100%;
}

.pf-showcase-webmodule {
  margin-right: 40px;
  position: relative;
}


.pf-showcase-webmodule-init {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}



.pf-showcase-webmodule-try {
  text-align: center;
  padding: 10px 0;
}

.pf-showcase-productdetail {
  width: calc(100% - 400px);


}

.components-product {
  text-align: left;
}
.components-product__title {
  font-size: 32px;
  color: #2b2b2b;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 0;
  text-transform: capitalize;
}
.pf-font-unset {
  font-size: unset;
  font-weight: unset;
}

.pf-color-btn_category {
  width: 100%;
  margin: 20px 0;
}
.pf-color-des {
  font-size: 18px;
  line-height: 1.17;
  color: #212529;
}
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
.showcase-components-colorlist {
  flex-flow: wrap;
}
.showcase-components-colorlist {
  display: flex;
  align-items: center;
}
.skutypes-reset {
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  margin: 1px 2px 1px 0;
  line-height: 0;
  box-sizing: content-box;
}
.skutypes-reset img {
  width: 40px;
  padding: 3px;
  box-sizing: content-box;
}
.showcase-components-colorlist__color {
  border: 2px solid transparent;
  margin: 1px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
}









/* タブ */
.tab{
list-style:none;
padding:0;
margin:0 auto 20px auto;
overflow-x: scroll;
white-space: nowrap;
display:flex;
background-color: #8897a7;

justify-content: center;
}
.tab::-webkit-scrollbar {
  display:none;
 }
.tab li{
width: 20%;
background:#8897a7;
text-align: center;
padding:15px 0 10px;
white-space: nowrap;
border-left: 2px solid #fff;
color: #fff;
width: 150px;
min-width:150px;
}
.tab li:last-child{
border-right: 2px solid #fff;

}
.tab li.active{
background:#fff;
position: relative;
color: #000;
border-top : 4px solid #8897a7;
border-left: none;

/* border-right : 1px solid #e4007f;
border-left : 1px solid #e4007f;  */
}

.tab li.active + li {
  border-left: none;
}

.tab li.active::after{
position: absolute;
content: '';
width: 100%;
height: 4px;
background-color: #fff;
position: absolute;
z-index: 1;
left: 0;
bottom: -2px;
transition: opacity .34s ease 0s;
}
/* ページャー */
.tab_sub{
margin:30px auto;
overflow-x: scroll;
justify-content: flex-start;
padding:0;
display:flex;
list-style:none;
gap: 20px;

}
.tab_sub::-webkit-scrollbar {
  display:none;
 }
.tab_sub li{
border:1px solid #dfdfdf;
padding: 10px 0 0;
box-sizing: border-box;
font-size: 0;
width: 130px;
min-width: 130px;
display: grid;
}
.tab_sub li p{
font-size: 12px;
text-align: center;
line-height: 1.3;

padding: 10px 5px;
margin: 10px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.tab_sub li.active{
background:#fff;
border-top: 1px solid #dd8e9f;
border-right: 1px solid #dd8e9f;
border-left: 1px solid #dd8e9f;
}
.tab_sub li.active p{
background-color: #dd8e9f;
color: #fff;
padding: 10px 0;
margin: 10px 0 0;
}

.tab_sub li img{
width: 90%;
display: block;
margin: 0 auto;
height: 120px;
object-fit: contain;
}

.list .inner,
.list .inner .item_li{
display:none;
}
.list .inner.active{
display:block;
}
.list .inner div.active{
display:block;
}
.item_li .item_li_inner{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
}
.item_li .item_li_inner::-webkit-scrollbar {
  display:none;
 }
.item_li li{
list-style-type: none;
padding: 0;
box-sizing: border-box;
width: 80px;
}
/* .item_li li.active {
  background: #fff;
  border-top: 1px solid #dd8e9f;
  border-right: 1px solid #dd8e9f;
  border-left: 1px solid #dd8e9f;
} */
.item_li li.active span.item_name {
  color: #dd8e9f;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_li li.active span.item_info {
    border: 1px solid #dd8e9f;

}
.item_li li img{
width:30%;
object-fit: contain;
}
.item_li li .item_color{
  width: 60px;
  height: 60px;
  background-size: contain;
  margin: auto;

}

.item_li li span{
  display: block;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  padding: 10px 0 0;
}

.item_li li span.item_info{
  border: 1px solid #bebebe;
  padding: 10px 0;
}





.pf-showcase-webmodule-init{
  display: none!important;
}



@media (max-width: 1024px){
  .tab_sub li {
    min-width: 150px;
    width: 150px;
}
.item_li li {
  min-width: 150px;
  width: 150px;
}
}


@media (max-width: 768px){


    .sp_only{
        display: block;
    }
    .pc_only{
        display: none;
    }





    .pf-showcase-content {
        gap: 0;

    flex-wrap: wrap;
    }


    .pf-layout-container {
        width: 100%;
        margin: 0 auto;
    }

    .pf-showcase-productdetail{
        width: 100%;
        padding: 0 15px 0;

    }
    .pf-showcase-webmodule {
        margin-right: 0;
    }


    .tab{
      justify-content: flex-start;
      overflow-y: hidden;

    }
  .tab li{
    font-size: 15px;
    min-width:auto;
    width: 20%;
    padding: 7px 0 5px;

  }
  .tab_sub{
    overflow-x: scroll;
    justify-content: flex-start;
    gap: 15px;
    margin: 20px auto 0px;
  }

  .tab_sub li {
    border: 1px solid #dfdfdf;
    padding: 10px 0 0;
    box-sizing: border-box;
    font-size: 0;
    width: 110px;
    min-width:125px;
    display: grid;
  }
  .tab_sub li p{
    line-height: 1.2;
  }

  .tab_sub li img {
    /* width: 62%; */
    display: block;
    margin: 0 auto;
    height: 75px;
    object-fit: contain;
}
  .item_li .item_li_inner {
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 15px 0;
    white-space: nowrap;
  }

  .item_li li {
    min-width: auto;
    width: 75px;
  }
  .item_li li span{
  font-size: 11px;
}
  .item_li li span.item_info{
    border: 1px solid #bebebe;
  }
  .item_li li.active span.item_name {
    color: #dd8e9f;
}

.item_li li .item_color{
    width: 55px;
    height: 55px;

  }


  #YMK-module{
    width: 100%;
  }

}