@charset "UTF-8";

/*=================================
    OSMO products
    260730
=================================*/

main.l-container{
  padding:clamp(120px , 16.67vw , 200px) 0 0;
  text-align:justify;
}
.product-sub{
  text-align:justify;
  margin-top:clamp(200px , 27.5vw , 330px);
}

/* ecforce機能調整
=========================================*/
/*
.co-selling-list h3{
  display:none;
}
*/

.co-btn-add{
  background:var(--main-color) !important;
  font-size:clamp(14px , 1.67vw , 20px) !important;
  border-radius:2em;
  padding:0 3em;
  line-height:2.85 !important;
  height:2.85em !important;
  text-align: left;
  font-family:var(--font-jp-serif);
  position:relative;
  margin:0 !important;
}
.co-btn-add::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  display: block;
}
.co-btn-add:hover{
  transition: .6s;
  opacity:.7;
}
.c-product_info__co_selling__nav__list{
  border-radius:2px !important;
  border: 1px solid var(--main-color) !important;
}
.c-product_info__co_selling__nav__list:hover{
  transition: .6s;
  opacity:.7;
}
.c-product_info__co_selling__nav__list:last-child{
  margin-left:17px;
  border-left: 1px solid var(--main-color) !important;
}
.c-product_info__co_selling__nav__list a{
  font-size:clamp(14px , 1.33vw , 16px);
  color:var(--main-color);
  font-weight:600;
}
.c-product_info__co_selling__nav .active a{
  background:var(--main-color) !important;
  color:#fff;
}
.c-product_info__co_selling__tab_content{
  border-bottom:0 !important;
}
.c-product_info__co_selling__tab_content h3{
  font-size:clamp(16px , 1.67vw , 20px);
  font-weight:600;
  font-family:var(--font-jp-serif);
  text-align: left;
  display: flex;
  align-items: flex-start;
}
.c-product_info__co_selling__tab_content h3 .status{
  font-size:11px;
  border:1px solid var(--txt-color);
  padding:0 0.5em;
  margin-right:1em;
  line-height: 1.8;
  display: inline-block;
  vertical-align: text-top;
  white-space: nowrap;
  font-weight: 500;
  margin-top: 0.2em;
}
.c-product_info__co_selling__tab_content h3 .tit{
  line-height:1.3;
  font-weight: 500;
}
.c-product_info__co_selling__tab_content h3 .set-txt{
  font-size:clamp(10px , 1vw , 12px) !important;
  font-weight: 500;
}
.c-product_info__co_selling{
  max-width:448px;
}
@media screen and (max-width: 719px) {
  .c-product_info__co_selling{
    max-width:100%;
  }
}

.c-product_info__co-selling-product__option_types__wrapper_quantity{
  margin:0 !important;
}
.c-product_info__co-selling-product__quantity {
  margin:0 0 20px;
}
.co-add-shop-cart-form .co-form-input-group{
  margin:40px 0 0 !important;
}


/* 商品画像下
=========================================*/
.p-product_content__inner__info .law-link {
  display:none;
}
@media screen and (max-width: 719px) {
  .p-product_content__inner .law-link {
    display:none;
  }
  .p-product_content__inner__info  .law-link {
    display:block;
  }
}

/* kv
=========================================*/
.product-sub .kv{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:relative;
  z-index:2;
  background:url(../img/products/product01.jpg) no-repeat center center;
  background-size:cover;
}
.product-sub .kv .read{
  position:absolute;
  left:15.43%;
  top:16.71%;
}
.product-sub .kv .read .read1{
  animation-name:blurInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  font-size:clamp(24px , 2.67vw , 32px);
  letter-spacing: 0.1em;
  line-height:1.43 !important;
}
.product-sub .kv .read .read2{
  animation-name:blurInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay:1s;
  font-size:clamp(16px , 2vw , 24px);
  margin-top:clamp(20px , 2.5vw , 30px);;
}
@media only screen and (max-width: 767px){
  .product-sub .kv{
    background:url(../img/products/product01_sp.jpg) no-repeat center bottom;
    background-size:cover;
  }
  .product-sub .kv .read{
    width:79.64vw;
    position:absolute;
    left:10.18vw;
    top:auto;
    bottom:5.56%;
  }

}

/* product-nav
=========================================*/
.product-sub .product-nav{
  padding:40px 0 0;
}
.product-sub .product-nav.fix{
  position:fixed;
  z-index:10;
  left:0;
  top:48px;
  width:100%;
}
.product-sub .product-nav ul{
  display: flex;
  justify-content: space-between;
  width:min(88.5vw , 750px);
  margin:0 auto;
}
.product-sub .product-nav li a{
  box-sizing: border-box;
  text-align: center;
  min-width: 174px;
  background: #FFFFFF;
  border: 1px solid var(--txt-color);
  border-radius: 1.5em;
  font-family:var(--font-en-serif);
  color:var(--txt-color);
  display:block;
  font-size: clamp(11px, 1.33vw, 16px);
  transition: .6s;
  display: block;
  padding-top: 0.1em;
}
.product-sub .product-nav li a:hover{
  background: var(--txt-color);
  color:#fff;
}

.product-sub .product-nav .fix-btn{
  color:#fff;
  width:clamp(190px , 19.17vw , 230px);
  display:none;
  line-height:2;
  transition: .6s;
  position:fixed;
  bottom:40px;
  right:7vw;
  padding:0 1.5em;
  font-size:clamp(14px , 1.33vw , 16px) !important;
  border:1px solid #fff;
}

@media only screen and (max-width: 767px){
  .product-sub .product-nav{
    padding:30px 0 0;
  }
  .product-sub .product-nav li a{
    min-width: 100px;
    padding-top: 0.2em;
  }
}

/* cts01
=========================================*/
.product-sub .cts01{
  margin-top:clamp(150px , 16.67vw , 180px);
  width:100%;
  position:relative;
  z-index:3;
  display: flex;
  align-items: center;
  gap:0 clamp(50px , 7.5vw , 90px);
  box-sizing:border-box;
}
.product-sub .cts01 .img{
  width:57.36vw;
}
.product-sub .cts01 .txt{
  padding-right:7vw;
}
.product-sub .cts01 .txt1 p{
  font-size:clamp(13px , 1.17vw , 14px);
}
.product-sub .cts01 .txt2{
  margin-top:clamp(38px , 4.17vw , 50px);
}
.product-sub .cts01 .txt2 p{
  font-size:clamp(15px , 1.67vw , 20px);
  text-align:left;
}
.product-sub .cts01 .txt2 p + p{
  margin-top:20px;
}
@media only screen and (max-width: 767px){
  .product-sub .cts01{
    display: block;
    padding:0 7.125%;
  }
  .product-sub .cts01 .img{
    width:100%;
    margin-bottom:80px;
  }
  .product-sub .cts01 .txt{
    padding-right:0;
  }
  .product-sub .cts01 .txt1,
  .product-sub .cts01 .txt2 p{
    text-align:center;
  }
}
/* point
=========================================*/
.product-sub .point{
  padding:clamp(200px , 41.67vw , 500px) 0 clamp(320px , 57.14vw , 800px);
  background:url(../img/bg01.png) no-repeat center center;
  background-size:100% 100%;
  margin-top:calc(-1 * clamp(180px , 20.83vw , 300px));
}
.product-sub .point .inner{
  display: flex;
  width:min(86% , 920px);
  justify-content: space-between;
  align-items: center;
  margin:0 auto;
  padding-top:clamp(80px , 10.83vw , 130px);
}
.product-sub .point .inner .img{
  width:370px;
}
.product-sub .point .inner .txt{
  width:calc(100% - 370px - clamp(30px , 3.33vw , 40px));
  max-width:350px;
}
.product-sub .point .inner .txt h3{
  font-weight:700;
  margin:0 0 clamp(35px , 4.17vw , 50px);
}
.product-sub .point .inner .txt h3 strong{
  font-size:clamp(18px , 2vw , 24px);
  display:block;
  margin:15px 0 0;
}

.product-sub .point .inner .txt p{
  font-size:clamp(11px , 1.17vw , 14px);
}
.product-sub .point .inner:nth-of-type(2) .img{
  order: 1;
}
.product-sub .point .inner:nth-of-type(2) .txt{
  order: 2;
}
@media only screen and (max-width: 767px){
  .product-sub .point{
    background:url(../img/products/product_bg01_sp.png) no-repeat center center;
    background-size:100% 100%;
    margin-top:20px;
  }
  .product-sub .point .inner{
    flex-direction: column;
    width:86.01%;
    justify-content: center;
  }
  .product-sub .point .inner .txt{
    width:100%;
    max-width:100%;
  }
  .product-sub .point .inner .img{
    max-width:100%;
    margin-bottom:16px;
  }
  .product-sub .point .inner:nth-of-type(2) .img{
    order: 2;
  }
  .product-sub .point .inner:nth-of-type(2) .txt{
    order: 1;
  }
  .product-sub .point .inner:nth-of-type(2)>p{
    order: 3;
  }
}
/* keyword
=========================================*/
.product-sub .keyword{
  margin-top:calc(-1 * clamp(60px , 8.33vw , 100px));
}

.product-sub .keyword .inner{
  display: flex;
  justify-content: center;
}
.product-sub .keyword .inner .item{
  width:min(39.42vw, 473px);
  height:min(39.42vw, 473px);
  background:url(../img/products/product_bg02.png) no-repeat center center;
  background-size:contain;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(14px, 1.33vw, 16px);
}
.product-sub .keyword .inner .item:nth-of-type(2){
  margin-top:min(12.5vw , 150px);
}
.product-sub .keyword .inner .item:nth-of-type(3){
  margin-top:min(25vw , 300px);
}
@media only screen and (max-width: 767px){
  .product-sub .keyword{
    padding-bottom:160px;
  }
  .product-sub .keyword .inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .product-sub .keyword .inner .item{
    width:280px;
    height:280px;
  }

  .product-sub .keyword .inner .item:nth-of-type(2),
  .product-sub .keyword .inner .item:nth-of-type(3){
    margin-top:-60px;
  }
}

/* step
=========================================*/
.product-sub .step{
  background:var(--main-color);
  color:#fff;
  padding:clamp(120px , 16.67vw , 200px) 0 clamp(60px , 8.33vw , 100px);
  overflow:hidden;
}
.product-sub .step .slick-track{
  display: flex;
  margin:0 auto;
}
.product-sub .step .slick-slide {
  height: auto !important;
}
.product-sub .step .step-slick .item{
  width:min(27.08vw , 390px);
  padding-left:clamp(46px , 5.33vw , 64px);
  display: flex;
  flex-direction: column;
}
.product-sub .step .step-slick .item h4 .num{
  font-size:clamp(11px , 1.08vw , 13px);
  font-weight:500;
}
.product-sub .step .step-slick .item h4 .time{
  font-size:clamp(11px , 1.17vw , 14px);
  font-weight:500;
}
.product-sub .step .step-slick .item h4 strong{
  font-size:clamp(14px , 1.67vw , 20px);
  display:block;
  margin:10px 0 15px;
}
.product-sub .step .step-slick .item p{
  flex-grow: 1;
  font-size:clamp(11px , 1.08vw , 13px);
  margin:0 0 20px;
}
.product-sub .step .step-slick .dots-wrap{
  position:absolute;
  left:50%;
  bottom:calc(-1 * clamp(40px , 5.83vw , 70px));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap:14px;
}

.product-sub .step .step-slick .dots-wrap li {
  width: 50px;
  height: 2px;
  background: #D0D0D0;
  cursor: pointer;
}
.product-sub .step .step-slick .dots-wrap li:hover,
.product-sub .step .step-slick .dots-wrap li.slick-active {
    background: #fff;
}
.product-sub .step .step-slick .dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}
.product-sub .step .step-slick .slide-arrow{
  width:22px;
  height:36px;
  background:url(../img/ico_arrow3.svg) no-repeat center center;
  background-size:contain;
  cursor: pointer;
  position:absolute;
  bottom:calc(-1 * calc(clamp(40px , 5.83vw , 70px) + 18px));
}
.product-sub .step .step-slick .slide-arrow.prev-arrow{
  left:calc(50% - 100px);
}
.product-sub .step .step-slick .slide-arrow.next-arrow{
  transform: rotate(180deg);
  right:calc(50% - 100px);
}
@media only screen and (min-width: 1581px){
  .product-sub .step .step-slick{
    display: flex;
    justify-content: center;
    padding-right: clamp(46px, 5.33vw, 64px);
  }
}

@media only screen and (max-width: 767px){
  .product-sub .step .step-slick .item{
    width:70.74vw;
  }
  .product-sub .step .step-slick .slide-arrow{
    width:17px;
    height:28px;
    bottom:calc(-1 * calc(clamp(40px , 5.83vw , 70px) + 14px));
  }
  .product-sub .step .step-slick .slide-arrow.prev-arrow{
    left:calc(50% - 150px);
  }
  .product-sub .step .step-slick .slide-arrow.next-arrow{
    right:calc(50% - 150px);
  }

}
/* howto
=========================================*/
.product-sub .howto{
  padding:clamp(120px , 16.67vw , 200px) 0 clamp(80px , 10vw , 120px);
  background:var(--main-color);
  color:#fff;
  text-align:center;
}
.product-sub .howto h3{
  font-size:clamp(20px , 2.67vw , 32px);
  font-weight:500;
  margin:0 auto clamp(40px , 5.83vw , 70px);
}
.product-sub .howto .inner{
  width: min(88.33vw, 1018px);
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:clamp(40px , 6.25vw , 75px);
}
.product-sub .howto .inner .img{
  width:43.91%;
}
.product-sub .howto .inner .txt{
  width:calc(100% - 43.91% - clamp(40px , 6.25vw , 75px));
}
.product-sub .howto .inner .txt li{
  display: flex;
  align-items: flex-start;
  gap:1em;
  text-align:left;
}
.product-sub .howto .inner .txt li + li{
  margin-top:clamp(25px , 4.17vw , 50px);
}
.product-sub .howto .inner .txt li .num{
  border-radius:50%;
  border:1px solid #fff;
  position:relative;
  font-size:clamp(23px , 2.25vw , 27px);
  line-height:clamp(44px , 4.17vw , 50px);
  width:clamp(44px , 4.17vw , 50px);
  height: clamp(44px, 4.17vw, 50px);
  text-align:center;
  aspect-ratio: 1 / 1;
}
.product-sub .howto .inner .txt li h4{
  font-size:clamp(16px , 1.5vw , 18px);
  font-weight:600;
  margin-bottom:10px;
}
.product-sub .howto .inner .txt li p{
  line-height:1.8 !important;
  font-size:clamp(11px , 1.08vw , 13px);
}

@media only screen and (max-width: 767px){
  .product-sub .howto .inner{
    width: 86.01vw;
    justify-content: center;
    align-items: center;
    gap:36px;
    flex-wrap: wrap;
  }
  .product-sub .howto .inner .img{
    width:min(100%, 338px);
  }
  .product-sub .howto .inner .txt{
    width:100%;
    width:min(100%, 338px);
  }
}

/* data
=========================================*/
.product-sub .data{
  padding:clamp(80px , 10.83vw , 130px) 0 clamp(100px , 16.67vw , 180px);
}
.product-sub .data .inner{
  width:min(88.5vw ,1062px);
  margin:0 auto;
}
.product-sub .data .inner h3{
  font-size:clamp(18px , 2vw , 24px);
  font-weight:500;
  padding:clamp(60px , 8.33vw , 100px) 0 clamp(30px , 3.33vw , 40px);
  text-align:center;
}
.product-sub .data .inner dt{
  cursor:pointer;
  padding:0 2em 5px 0;
  border-bottom:1px solid var(--txt-color);
  position:relative;
  line-height:1.8 !important;
}
.product-sub .data .inner dt::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  right:0;
  bottom:8px;
  background:url(../img/ico_arrow2.svg) no-repeat center center;
  background-size:contain;
}
.product-sub .data .inner dt.open::after{
  transform: rotate(180deg);
}
.product-sub .data .inner dd{
  display:none;
  padding:10px 0 0;
  line-height:1.6875 !important;
}
.product-sub .data .inner dd + dt{
  margin-top:clamp(30px , 3.33vw , 40px);
}
.product-sub .data .inner dd p + p{
  margin-top:2em;
}

.product-sub .data .inner .qanda dt,
.product-sub .data .inner .qanda dd{
  padding-left:2em;
  text-indent:-2em;
}
.product-sub .data .inner .qanda dt::before,
.product-sub .data .inner .qanda dd::before{
  display:inline-block;
  width:2em;
  text-indent: 0;
  padding-left:0;
}
.product-sub .data .inner .qanda dt::before{
  content:"Q.";
}
.product-sub .data .inner .qanda dd::before{
  content:"A.";
}
@media only screen and (max-width: 767px){
}
/* product-footer
=========================================*/
.product-footer{
  background:url(../img/fooer_bg.jpg) no-repeat center center;
  background-size:cover;
  width:100%;
  overflow:hidden;
  position:relative;
  text-align:center;
  padding:clamp(150px , 20.83vw , 250px) 0 clamp(130px , 18.33vw , 220px);
}
.product-footer .inner{
  width:min(88.5vw ,1062px);
  margin:0 auto;
}
.product-footer .inner h2{
  font-size:clamp(20px , 3.33vw , 40px);
}
.product-footer .inner p{
  margin:20px auto clamp(50px , 6.67vw , 80px);
  font-size:clamp(18px , 2vw , 24px);
}
.product-footer .inner ul{
  width:200px;
  margin:0 auto;
}
.product-footer .inner ul li + li{
  margin-top:clamp(20px , 2.92vw , 35px);
}

.product-footer .txt1 {
  margin: clamp(50px, 6.67vw, 80px) auto 0;
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(35px, 4.17vw, 50px);
  transform: translateX(-50%);
}
@media only screen and (max-width: 767px){
  .product-footer .inner ul{
    width:138px;
  }
}

/* 定期購入商品の表示調整
=========================================*/
.radio-label{
  padding:20px;
  border:1px solid #fff;
}
.radio-label.unique{
  cursor:default;
  pointer-events: none;
  padding:20px 0 0;
}
input[type="radio"]:checked + label.radio-label {
  background: #F7FAFC;
  border:1px solid #D7E5EA;
}
@media only screen and (max-width: 767px){
  .radio-label{
    padding:15px;
  }
}

/* 表示調整
=========================================*/
.c-product_info__co_selling__tab_content__price{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:clamp(10px , 1vw , 12px) !important;
  font-family:var(--font-jp-serif);
}
.c-product_info__co_selling__tab_content__price .u-text--subhead{
  font-size:clamp(10px , 1vw , 12px) !important;
}
.c-product_info__co_selling__tab_content__price .co-sales_price{
  font-size:clamp(16px , 1.83vw , 22px);
  padding-right:0.5em;
}
.c-product_info__co_selling__tab_content__price .off{
  color:#fff;
  background:#A7CED8;
  padding:0 1em;
  line-height:2.5;
  display:inline-block;
  font-size:clamp(10px , 1vw , 12px);
}
.c-product_info__co_selling__tab_content{
  padding: 25px 0 0 !important;
}
.postage-off{
  margin:24px 0 0;
  display:inline-block;
  background:var(--txt-color);
  color:#fff;
  padding:0.2em 1em;
}
.custom-quantity-radio{
  background:#F7F8F9;
  padding:14px 24px 25px 24px;
  font-size:clamp(16px , 1.83vw , 22px);
}
.custom-quantity-radio label + label{
  margin-top:25px;
}
.custom-quantity-radio label{
  display: flex;
  justify-content: space-between;
  position:relative;
}
.custom-quantity-radio label .num{
  display: flex;
  align-items: center;
  gap:0.5em;
}
.custom-quantity-radio label .num input{
  appearance: auto;
}
.custom-quantity-radio label .tax{
  font-size:clamp(10px , 0.92vw , 11px);
}
.custom-quantity-radio label .off{
  font-size:clamp(10px , 0.92vw , 11px);
  color:#7290AC;
  position:absolute;
  right:0;
  bottom:-1.4em;
}
.c-product_info__co-selling-product__quantity.none{
  display:none !important;
}

@media only screen and (max-width: 719px){
  .c-product_info__co_selling__tab_content{
    padding: 20px 0 0 !important;
  }
}
/*配送サイクル*/
.cicle_select{
  margin:1em 0 0;
}