@charset "UTF-8";
/* CSS Document */
@media screen and (width<=768px) {
  .pageTop .shadowEffectKv{
    height: calc(100vw*1.7143);
  }
  
  /*button settings*/
  .buy-button__wid{
    grid-template-columns: auto;
    place-content:center;
    gap:5px;
  }
  .buy-button__wid .ly_lf{
/*    font-size: min(24px,6vw);*/
    text-align: center;
  }
  .buy-button__wid .ly_rt{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    padding-right: 0;
    gap:0;
  }
  
  /*Overwrite ++++++++++++++++++++*/
  /*header*/
  .header_v2 nav .navLogo {
    width: 100px;
    margin-left: 0;
  }
  /*news*/
  .pageTop .topContents__news .newsSection {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  /*column*/
  .pageTop .topContents__column .columnSection__top {
    margin-bottom: 20px;
  }
  .pageTop .topContents__column .columnSection {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  /*CTA*/
  .ctaSection_v2 .ctaSection__inner{
    width: 100%;
    aspect-ratio:1/1.7143;
    max-height: 600px;
    background-image: url("../img/v02/cta-line-wall_sp.webp");
    background-position: top center;
  }
  .ctaSection_v2 .ctaSection__inner::before{
    box-sizing: border-box;
  }
  .ctaSection_v2 .cta{
    padding-top: min(20px, 5vw);
    padding-bottom: min(20px, 5vw);
    width: 100%;
    margin-left: 0;
  }
  .ctaSection_v2 .cta__text p
  ,.ctaSection_v2 .cta__text h2{
    text-align: center;
  }
  .ctaSection_v2 .cta .commonLink_v2 {
    width: 100%;
  }
  .ctaSection .cta:hover .commonLink_v2 {
    color:#fff;
    background-color: #000
  }
  /*KV*/
  .kv-stonLink{
    grid-template-columns: repeat(2,1fr);
  }
  
  /*banner*/
  .link-stonplus__button{
    aspect-ratio:1/0.645;
  }
  .link-stonplus__button--text{
    translate:0 -1em;
  }
  .link-stonplus__button.stonplus{
    background-size: auto 45%;
    background-position: left -15% bottom;
  }
  .link-stonplus__button.stons{
    background-size: 45%;
    background-position: left -5% bottom -50%;
  }
  .link-stonplus__button::before{
    height: 80%;
    top: auto;
    bottom: 0;
    left: 50%;
    translate:-50% 25%;
  }
  
  /*TOP product*/
  .productDetail_v2 .productSection
  ,.productDetail_v2 .productSection.inv{
    grid-template-columns: 100%;
  }
  .productSection__desc{
    grid-column: auto;
    grid-area: 1;
  }
  .productDetail_v2 .productSection__desc--spec{
    grid-area: 2;
  }
  .productSection .productSection__lf{
    grid-area: 3;
  }
  .productSection__desc-buttonWrap{
    grid-area: 4;
  }
  .productDetail_v2 .productSection__img--thumbnail ul {
    display: none
  }
  .productDetail_v2 .productSection__img--main {
    height: 64vw
  }
  .productDetail_v2 .productSection__img--main.swiper {
    position: relative
  }
  .productDetail_v2 .productSection__img--main .swiper-button-wrap {
    right: 0;
    bottom: 50%;
    left: 0;
    justify-content: space-between
  }
  .productDetail_v2 .productSection__img--main .swiper-button-wrap .swiper-button-prev {
    left: -10px
  }
  .productDetail_v2 .productSection__img--main .swiper-button-wrap .swiper-button-next {
    right: -10px
  }
  .productDetail_v2 .productSection__img--main .swiper-button-wrap .swiper-button-prev, .productDetail_v2 .productSection__img--main .swiper-button-wrap .swiper-button-next {
    position: absolute;
    width: 30px;
    height: 30px
  }
  .productDetail_v2 .productSection__img--main .swiper-button-wrap .swiper-button-prev:after
  , .productDetail_v2 .productSection__img--main .swiper-button-wrap .swiper-button-next:after {
    width: 15px;
    height: 15px;
    -webkit-mask-size: 15px;
    mask-size: 15px
  }
  .productDetail_v2 .productSection__img--main ul li {
    padding-bottom: 8.5333333333vw
  }
  
  .productDetail_v2 .productSection__desc-detail
  ,.productDetail_v2 .productSection__desc-detail.inv{
    grid-template-columns: 100%;
  }
  .productDetail_v2 .productSection__desc-detail.inv .productSection__desc--spec{
    grid-area: 1;
  }
  /*buy button*/
  .productDetail_v2 .productSection__desc--buy{
    width: auto;
    max-width: 100%;
  }
  /*subscription +++++++++++++*/
  .productDetail_v2 .productSection__subscription{
    grid-column: auto;
  }
  .subscription__detail-course .top-text{
    text-align: left
  }
  .deail-course_fst{
    grid-template-columns: 100%;
  }
  .subscription-course__spNav{
    display: grid;
  }
   .subscription-course__list{
     grid-template-columns:100%;
  }
  .titleList__pc{
    display: none;
  }
  .subscription-course__itemDesc{
    grid-template-rows: auto;
    grid-area: auto;
  }
  
  .subscription-course__itemDesc > li{
    padding-left: min(15px,2vw);
  }
  .subscription-course__itemDesc::before{
    width: 100%;
  }
  .subscription-course__itemDesc > li.li_price > div{
    -ms-align-items: flex-end;
    align-items: flex-end;
  }
  .subscription-course__itemDesc > li.li_price > div .off{
     position: relative;
  }
  .subscription-course__itemDesc > li.li_price > div .off::before{
    content: attr(data-spText);
    position: absolute;
    top: 0;
    right: -.5em;
    white-space: nowrap;
    translate:100% -25%;
    font-size: 9px;
  }
  #linkLineup_stonplus .stonplus-ctg__detail{
    grid-template-columns: auto;
  }
  #linkLineup_stonplus .stonplus-ctg__detail .comment{
    grid-column: auto;
  }
  #linkLineup_stonplus .stonplus-ctg__buttonWrap{
    grid-area:auto;
    display: flex;
    justify-content: flex-end;
  }
  /*course*/
  .subscription-course__itemDesc > li.li_ship{
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    justify-content: center;
    gap:.5em;
  }
  .subscription-course__itemDesc > li.li_ship::before{
    content: "送料";
    display: inline-block;
  }
  .subscription-course__itemDesc > li.li_price2 .price::before{
    content: attr(data-spText);
    display: inline-block;
    padding-right: 1em;
  }
  .stonplus-set__buttonWrap{
    grid-column: auto;
    justify-content: center;
  }
  /*ston plus - cartridge +++++++++++++++++++++++++*/
  .product-stonplus_crg{
    grid-template-columns: 100%;
  }
  .product-stonplus_crg::before{
    height: 55%;
  }
  .stonplus-crg__thumb{
    grid-area: 2;
    position: relative;
  }
  .stonplus-crg__thumb::before{
    content: "";
    position: absolute;
    width: 100vw;
    height: calc(50% + min(30px,5vw));
    top: max(-30px,-5vw);
    left: 50%;
    translate:-50% 0;
    background-color: #EDEDED;
    z-index: -1;
  }
  /*SERIES ++++++++++++++++++++++++++*/
  .topSeries__about{
    padding-left: 0;
    padding-right: 0;
    
  }
  .topSeries__aboutWrap{
    grid-template-columns: 100%;
  }
  .topSeries__about--image{
    grid-area: 1;
    aspect-ratio:1/0.7487;
  }
  .topSeries__about--desc
  ,.topSeries__aboutLink{
    padding-left: var(--pd_side);
    padding-right: var(--pd_side);
  }
  .topSeries__about--desc .logo{
    margin-top: max(-10px,-2.5vw);
  }
  /*CONSEPT*/
  .topSeries__concept{
    padding-top: min(60px,10vw);
  }
  .topSeries__concepWrapper{
    position: relative;
    width: calc(100% - min(20px,var(--pd_side)));
  }
  .topSeries__conceptWrap-title{
    mix-blend-mode: normal;
    color: #000;
  }
  .topSeries__conceptWrap{
    grid-template-columns: 100%;
    min-height: inherit;
    padding-bottom: 0;
  }
  .topSeries__conceptWrap .sp-wrapper{
    position: relative;
  }
  .topSeries__conceptWrap .sp-wrapper::before{
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    translate:-50% 0;
    background-color: rgba(0, 0, 0, .25);
  }
  .topSeries__concept--desc::before{
    content: none;    
  }
  .topSeries__concept--desc{
    padding-left: 0;
    padding-bottom: 0;
  }
  .series__widButton-wrap{
    background-color: rgba(0, 0, 0, .25);
    grid-template-columns: 100%;
  }
  /*FAQ*/
  .faqSection__titleArea{
    aspect-ratio:1/0.3429;
    translate:-5.5555555556vw 0;
    width: calc(100% + 5.5555555556vw);
    -ms-align-items: flex-end;
    align-items: flex-end;
    font-weight: 500;
  }
  .faqSection .faqList__title::before
  ,.faqSection .faqList__title::after{
    top: 10px;
    margin-top: 4px;
  }
  .faqSection .faqList__description p{
    padding: 16px 24px;
    font-size: 13px;
    line-height: 180%;
  }
  .faqSection__button{
    margin-right: auto;
  }
  
  /*news*/
  .pageTop .topContents__news .newsSection_v2, .pageTop .topContents__column .columnSection_v2{
    grid-template-columns: 100%;
  }
  .pageTop .topContents__news .newsSection__listWrap, .pageTop .topContents__column .columnSection__listWrap{
    grid-column: auto;
  }
  .newsSection_v2_linkButton, .columnSection_v2_linkButton{
    grid-area: auto;
    display: grid;
    grid-template-columns: min(250px,64vw);
    justify-content: center;
  }
  .topContents__news .columnsCardText{
    grid-template-columns: 100%;
  }
  .pageTop .topContents__news .newsSection__list{
    padding-left: 0;
  }
  .pageTop .topContents__news .newsSection__list--item .columnsCard .columnsCardMeta{
    -ms-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
  }
  .pageTop .topContents__news .newsSection__list--item .columnsCard .columnsCardMeta{
    margin-bottom: 0;
  }
  .pageTop .topContents__column .columnSection__list--item:first-of-type .columnsCard__img
  ,.columnsCard__img{
    height: auto;
  }
  /*footer*/
  .footer_v2::before{
    mask-image:url("../img/v02/mask_footer_sp.webp");
    -webkit-mask-image:url("../img/v02/mask_footer_sp.webp");
  }
  .footer_v2 .footerTop {
    flex-direction: column;
    gap: 12.8vw;
    font-size: min(16px,3.6vw);
    -ms-align-items: flex-start;
    align-items: flex-start;
  }
  .footer_v2 .footer__inner{
    padding-left: min(20px,5vw);
    padding-right: min(20px,5vw);
  }
  
  /*ston TOP +++++++++++++++++++++++++++++++*/
  main.pageBrandSton{
    padding-top: 0;
  }
.pageBrandSton .shadowEffectKv__slides{
  height: calc(100vw*1.6005);
}
  .stonContens__lineup--item{
    grid-template-columns: 100%;
  }
  .stonContens__lineup__image{
    grid-area: 1;
  }
  /* -- about*/
  .product-anchorLink__list{
    grid-template-columns: repeat(2,1fr);
  }
  .product-anchorLink__list .anchorLink__list--item{
    padding-bottom: 0;
  }
  .product-anchorLink__list .anchorLinkText{
    padding-left: 0;
  }
  /*PRODUCT +++++++++++++++++++++++++++++++++++++++++*/
  /*CART*/
  .productsContentsWrap .productDetail_v2 .productSection{
    grid-template-columns: 100%;
    margin: 0;
  }
  .pageProductDetail .productDetail_v2 .productSection__img{
    grid-row: auto;
  }
  .pageProductDetail .productDetail_v2 .productSection__subscription{
    grid-column: auto;
  }
  .pageProductDetail .productDetail_v2 .productSection__img--main .swiper-button-wrap{
    bottom: 50%;
  }
  .product-cta__line .ctaSection__inner
  ,.pageProductDetail .productDetail_v2 .productSection__desc--buy{
    width: 100%;
  }
  /*ston + color */
  .colorSection_v2 .productDetailHeading__title{
    margin-bottom: 0;
  }
  .pageProductDetail .colorSection_v2{
    grid-template-columns: 100%;
  }
  /*stons feature*/
  .featureSection__stonsWrap{
    align-self: end;
  }
    .featureSection_v2__item:has(.featureSection_v2__itemWall):not(.item-4) .featureSection_v2__item-desc{
    grid-template-columns: 100%;
    align-content: flex-end;
    min-height: min(420px,100vw);
  }
  .pageProductDetail .introSection__column .introSection__img
  ,.pageProductDetail .introSection__column.inv .introSection__img{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .featureSection_v2__item:not(.item-4) .featureSection_v2__itemWall{
    width: 100%;
    clip-path:none;
  }
  .featureSection_v2__item.item-2 .featureSection_v2__itemWall{
    mask-image: linear-gradient(15deg, transparent 30%, rgba(0,0,0,1) 60%);
    -webkit-mask-image: linear-gradient(15deg, transparent 30%, rgba(0,0,0,1) 60%);
  }
  .featureSection_v2__item.item-3 .featureSection_v2__itemWall{
    mask-image: linear-gradient(-15deg, transparent 30%, rgba(0,0,0,1) 60%);
    -webkit-mask-image: linear-gradient(-15deg, transparent 30%, rgba(0,0,0,1) 60%);
  }
  /*HOWTOUSE*/
  .howtouseSection_intro{
    grid-template-columns: 100%;
  }
  .howtouseSection_intro--desc{
    text-align: left;
  }
  .howtouseStepBox{
    grid-template-columns: repeat(2,1fr);
  }
  .howtouseSection__charging
  ,.howtouseSection__cartridge{
    grid-template-columns: 100%;
  }
  .featureSection_v2__buttonWrap .buy-button__wid{
    width: 100%;
  }
  .howtouseSection__manual > li{
    grid-template-columns: auto;
  }
  /*situation*/
  .productSituation__slider{
    display: grid;
    grid-template-columns: 100%;
    gap:min(50px,5vw);
  }
  .swiper-product-sub{
    grid-area: 1;
    width: 100%;
  }
  .productSituation__slider .situationSection__img{
    width: 100%;
  }
  .pageProductDetail .situationSection__list{
    background-color: #fff;
  }
  .pageProductDetail .situationSection__list::before{
    content: none;
  }
  .pageProductDetail .situationSection__card{
    margin: 0;
    padding: 0 min(20px,5vw);
  }
  .situationSection__card .swiper-button-wrap{
    width: 100%;
    right: 50%;
    translate:50% -50%;
    top: 50%;
    z-index: 3;
    pointer-events: none;
    justify-content: space-between;
  }
  .situationSection__card .swiper-button-wrap > div{
    pointer-events: auto;
  }
  .pageProductDetail .situationSection__img{
    height: auto;
    padding-bottom: 0;
  }
  .productSituation__slider .situationSection__img figure{
    aspect-ratio:1/0.56;
  }
  .productPatten_wrap{
    grid-template-columns: 100%;
  }
  
  /*single*/
  .pageColumnsSingle .columnArticleBody__contentWrap .commonLink{
    margin:0 auto;
  }
  /*faq*/
  .faqContents__main{
    margin-top: min(50px,10vw);
  }
}

@media screen and (width <=480px) {
  :root{
    --pd_side:5vw;
  }
  .productDetail_v2 .productSection__desc--buy{
    width: 100%;
  }
  .productPatten__descEx.carrt{
    grid-template-columns: auto;
    place-items: center;
  }
  .productPatten__descEx.carrt figure{
    grid-area: 1;
    width: 65%;
  }
  .productPatten__anchor{
    grid-template-columns: 100%;
  }
  .productPatten__descEx .image-set_clm{
    grid-template-columns: 100%;
  }
  .productPatten__descEx .image-set_clm figure{
    grid-area: 2;
  }
  /*footer ++++++++++++++++++*/
  .footerV2__navList{
    grid-template-columns: 100%;
  }
  
}