@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* CSS Document */

/* ===============================
   セクション共通リセット
=============================== */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

main {
    background: #f1f7fb;
    color: #231815;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.025em;
}

.sectionTtl {
    text-align: center;
    margin-bottom: 60px;
}

.sectionTtl span {
    display: block;
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.1em;
}

/* 購入ボタン */
a.btnDesign {
    /* 配置・サイズ */
    display: flex; /* Flexboxで中央揃え */
    justify-content: center; /* 横中央 */
    align-items: center; /* 縦中央 */
    flex-direction: column;
    width: 160px;
    height: 46px;
    box-sizing: border-box;

    /* 装飾 */
    background: #231815; /* 通常黒背景 */
    border: 2px solid #231815; /* 縁 */
    border-radius: 30px;
    color: #fff; /* 通常白文字 */
    text-decoration: none;
    transition: all 0.3s ease;

    /* テキスト */
    font-family: "Noto Sans JP";
    font-size: 16px;
}

a.btnDesign:hover {
    background: #fff; /* ホバーで白背景 */
    color: #231815; /* 文字黒 */
}

.spOnly{
    display: none !important;
}

.whiteBg{
    background: #fff;
    padding: 120px 0;
}

@media (max-width: 768px) {
    main {
        padding-top: 70px;
    }
    
    .pcOnly{
        display: none ;
    }
    
    .spOnly{
        display: inline-block!important;
    }
    
    .sectionTtl {
        text-align: center;
        margin-bottom: calc(80vw / 7.5);
    }

    .sectionTtl span {
        margin-top: calc(20vw / 7.5);
        font-size: calc(13vw / 3.75);
    }

    /* 購入ボタン */
    a.btnDesign {
        width: calc(102vw / 3.75);
        height: calc(30vw / 3.75);
        border-radius: 50px;
        font-size: calc(14vw / 3.75);
        letter-spacing: 0;
    }
}

/* ===============================
   Header
=============================== */
#subheader {
    /* 配置 */
    position: relative; /* 通常表示 */
    width: 100%;
    z-index: 10;
    transition: all 0.3s ease;

    /* テキスト */
    font-family: "Noto Sans JP";
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.2em;
}

#subheader.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #f1f7fb;
}

#subheader .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1027px;
    margin: 0 auto;
    padding: 9px calc(20vw / 3.75) 9px;
    gap: 20px;
}

/* PCナビ */
.header-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 35px;
}

.header-nav a {
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: opacity 0.2s ease;
    max-height: 44px;
}

.header-nav .btnDesign {
    color: #fff;
}

.header-nav a:hover {
    opacity: 0.7;
}

/* ハンバーガー */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 14px;
    height: 7px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
    position: relative;
}
.hamburger span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ▼ 初期状態（▽：下向きのV字） */
.hamburger span:nth-child(1) {
  transform: rotate(-45deg) translate(3px, 3px);
}
.hamburger span:nth-child(2) {
  transform: rotate(45deg) translate(-3px,3px);
}

/* × の状態 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(0, 0);
}
.hamburger.active span:nth-child(2) {
  transform: rotate(-45deg) translate(0, 0);
}

/* SPメニュー */
.sp-menu {
    /* 配置 */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: calc(35vw / 3.75);
    z-index: 100;
    background: #f1f7fb;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.sp-menu.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
}
.sp-menu ul {
    width: 100%;
    list-style: none;
}
.sp-menu li + li{
    margin-top: calc(50vw / 3.75);
}
.sp-menu a {
    color: #231815;
    text-decoration: none;
    font-size: calc(20vw / 3.75);
    transition: opacity 0.2s ease;
}
.sp-menu a:hover { opacity: 0.7; }

@media (max-width: 768px) {
    #subheader .inner {
        padding: calc(11vw / 3.75) calc(20vw / 3.75) calc(9vw / 3.75);
        gap: calc(20vw / 3.75);
    }

    .header-nav { display: none; }
    .hamburger { display: flex; }

    .sp-buy {
        display: block;
        margin-left: auto;
    }
    .sp-buy .btnDesign {
        width: calc(102vw / 3.75);
        height: calc(30vw / 3.75);
        padding: calc(10vw / 3.75) 0;
        font-size: calc(12vw / 3.75);
    }

    .header-logo img {
        width: calc(85vw / 3.75);
    }
}

/* PC時にSPボタン非表示 */
@media (min-width: 769px) {
    .sp-buy { display: none; 
    }
}


/* ===============================
   #kvBl セクション
=============================== */
#kvBl {
    max-width: 1027px;
    margin: 0 auto 120px;
}

#kvBl .kvWrap {
    position: relative;
    text-align: center;
}

#kvBl .kvHeading {
    margin-top: -47px;
    margin-bottom: 25px;
    text-align: center;
}

#kvBl .kvText{
    margin-bottom: 25px;
}

#kvBl .kvText p {
    line-height: 2.14;
    font-size: 15px;    
}

#kvBl .kvProductsImage {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 0 38px;
}

.subText {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.075em;
}

.subText .logo {
    margin-left: 10px;
}

.subText .model {
    display: block;
    font-weight: 100;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    #kvBl {
        margin: 0 auto calc(160vw / 7.5);
    }

    #kvBl .kvImage {
        margin-bottom: 0;
    }

    #kvBl .kvHeading {
        width: calc(410vw / 7.5);
        margin: calc(-40vw / 7.5) auto calc(55vw / 7.5);
    }
    
    #kvBl .kvText{
        font-size:  calc(12vw / 3.75); 
        margin-bottom: calc(50vw / 7.5);
    }    

    #kvBl .kvProductsImage {
        display: flex !important;
        margin-bottom: calc(60vw / 7.5);
        gap: calc(40vw / 7.5);
        align-items: center;
    }

    #kvBl .kvProductsImage img {
        height: auto;
    }
    
    #kvBl .kvProductsImage div:nth-child(1) img{
        width: calc(167vw / 7.5);
    }    
    
    #kvBl .kvProductsImage div:nth-child(2) img{
        width: calc(157vw / 7.5);
    }    

    #kvBl .kvProductsImage div:nth-child(3) img{
        width: calc(198vw / 7.5);
    }    

    .subText {
        font-size: calc(10vw / 3.75);
    }

    .subText .logo {
        margin-left: calc(20vw / 7.5);
    }
    
    .subText .logo img{
        width: calc(397vw / 7.5);
    }
    
    .subText .model {
        margin-top: calc(24vw / 7.5);
        font-size: calc(8vw / 3.75);
        font-weight: 400;
    }
}



/* ===============================
   #topicsBl セクション
=============================== */
#topicsBl {
    padding: 0 calc(20vw / 3.75);
    margin: 0 auto 120px;
    text-align: center;
}

#topicsBl .topicsWrap {
    position: relative;
}

#topicsBl .topicsHeading {
    margin-bottom: 32.5px;
}

#topicsBl .topicsImg01 {
    margin-bottom: 17px;
}

#topicsBl .topicsImg02 {
    margin-bottom: 30px;
}

#topicsBl .topicsText {
    line-height: 2;
}

@media (max-width: 768px) {
    #topicsBl {
        margin-bottom: calc(80vw / 7.5);
        padding: 0 calc(75vw / 7.5) calc(80vw / 7.5);
        border-bottom: 1px solid #a9cdda;
    }

    #topicsBl h2 img {
        width: calc(131vw / 7.5);
    }

    #topicsBl .topicsHeading {
        margin-bottom:calc(62vw / 7.5);
    }

    #topicsBl .topicsHeading img {
        width: calc(591vw / 7.5);
    }

    #topicsBl .topicsImg01 {
        margin: 0 calc(-11vw / 7.5) calc(20vw / 7.5);
    }
    
    #topicsBl .topicsImg01 img{
        width: calc(625vw / 7.5);
    }

    #topicsBl .topicsImg02 {
        margin: 0 auto calc(50vw / 7.5);
    }
    
    #topicsBl .topicsImg02 img{
        width: calc(508vw / 7.5);
    }
    
    
    #topicsBl .topicsText{
        font-size: calc(16vw / 3.75);
        text-align: left;
    }
}

/* =========================================
   #featuressBl セクション
========================================= */
#featuresBl {
    max-width: 900px;
    margin: 0 auto 120px;
    padding: 0 calc(20vw / 3.75);
}

#featuresBl .featuresItem{
    display: flex;
    align-items: center;
    margin-bottom: 120px;
    justify-content: space-between;
}

#featuresBl .featuresItem .featuresItemImg{
    max-width: 540px;
    width: 60%;
}

#featuresBl .featuresItem .featuresItemText{
    width: 35.55%;
    max-width: 320px;
}

#featuresBl .featuresItem .featuresItemText .featuresItemHeading{
    margin-bottom: 20px;
}

#featuresBl .featuresItem .featuresItemText p{
    line-height: 2;
}

#featuresBl .featuresPoint{
    background: #d9f1f9;
    padding: 20px 70px 20px 30px;
    border-radius: 10px;
    margin: -90px auto 120px;
}

#featuresBl .featuresPoint .featuresPointInner{
    display: flex;
    justify-content: space-between;
}

#featuresBl .featuresPoint .featuresPointInner .featuresPointText{
    width: 32%;
}

#featuresBl .featuresPoint .featuresPointInner .featuresPointText .featuresPointHeading{
    margin-bottom: 12px;
    line-height: 1;
}

#featuresBl .featuresPoint .featuresPointInner .featuresPointText p{
    font-size: 18px;
    line-height: 1.66;
    letter-spacing: 0;
}

#featuresBl .featuresPoint .featuresPointInner .featuresPointImg{
    width: 65.5%;
    display: flex;
    justify-content: space-between;
    gap:0 3.6%;
}

#featuresBl .featuresPoint + p.fontS{
    font-size: 12px;
    line-height: 1.83;
    margin-top: -110px;
    text-align: right;
    margin-bottom: 120px;
}

#featuresBl .featuresApp{
    margin: -60px 0 120px;
}

#featuresBl .featuresAppSliderWrapper{
    display: flex;
    gap:0 6.11%;
    width: 100%;
}

#featuresBl .featuresApp .featuresAppSlide{
    width: 20.38%;
}

#featuresBl .featuresApp .featuresAppSlide .featuresAppSlideTitle{
    text-align: center;
    font-size: 14px;
    margin-bottom: 12px;
}

#featuresBl .featuresApp .featuresAppSlide .featuresAppSlideTitle:after{
    content: url("../img/features_app_line.svg");
    text-align: center;
    width: 118px;
    margin: 0 auto 12px;
    display: block;
}

#featuresBl .featuresApp .swiper-button-prev,
#featuresBl .featuresApp .swiper-button-next{
    display: none;
}

#featuresBl .featuresBuyBtn .btnDesign {
    width: 207px;
    height: 60px;
    margin: 0 auto;
    font-size: 20px;
}

@media (max-width: 768px) {
    #featuresBl{
        padding: 0 calc(75vw / 7.5) calc(160vw / 7.5) ;
        margin-bottom: 0;
    }

    #featuresBl h2 img{
        width:  calc(182vw / 7.5);
    }    
    
    #featuresBl .featuresItem{
        position: relative;
        display:flex;
        flex-direction:column;
        margin-bottom: calc(80vw / 7.5) ;
      }

    #featuresBl .featuresItem:after{
        content: "";
        width: 100vw;
        height: 1px;
        background: #9fc7d5;
        margin-bottom: calc(80vw / 7.5) ;
        order:1;
      }
    
    #featuresBl .featuresItem01:after{
        display: none;
      }
    
    #featuresBl .featuresItem .featuresItemImg{
        width: 100%;
        max-width: inherit;
        margin-bottom: calc(50vw / 7.5) ;
        order:3;
    }

    #featuresBl .featuresItem .featuresItemText{
        width: 100%;
        max-width: inherit;
        display: contents;
    }
    
    #featuresBl .featuresItem .featuresItemText p{
        font-size: calc(16vw / 3.75) ;
    }

    #featuresBl .featuresItem .featuresItemText .featuresItemHeading{
        order:2;
        margin-bottom: calc(60vw / 7.5) ;
    }

    #featuresBl .featuresItem .featuresItemText p{
        order:4;
    }

    #featuresBl .featuresItem01 .featuresItemHeading img{
        width: calc(540vw / 7.5);
        height: auto;
    }
    
    #featuresBl .featuresItem02 .featuresItemHeading img{
        width: calc(586vw / 7.5);
        height: auto;
    }

    #featuresBl .featuresItem03 .featuresItemHeading img{
        width: calc(370vw / 7.5);
        height: auto;
    }

    #featuresBl .featuresItem04 .featuresItemHeading img{
        width: calc(558vw / 7.5);
        height: auto;
    }

    #featuresBl .featuresItem05 .featuresItemHeading img{
        width: calc(575vw / 7.5);
        height: auto;
    }
    
    #featuresBl .featuresPoint{
        padding: calc(40vw / 7.5) calc(45vw / 7.5);
        margin: calc(-20vw / 7.5) auto calc(80vw / 7.5);
    }

    #featuresBl .featuresPoint .featuresPointInner{
        flex-direction: column;
    }

    #featuresBl .featuresPoint .featuresPointInner .featuresPointText{
        width: 100%;
        margin-bottom:  calc(45vw / 7.5);
    }

    #featuresBl .featuresPoint .featuresPointInner .featuresPointText .featuresPointHeading{
        margin-bottom:  calc(25vw / 7.5);
    }
    
    #featuresBl .featuresPoint .featuresPointInner .featuresPointText .featuresPointHeading img{
        width: calc(243vw / 7.5);
        height: auto;
    }

    #featuresBl .featuresPoint .featuresPointInner .featuresPointText p{
        font-size: calc(17vw / 3.75);
    }

    #featuresBl .featuresPoint .featuresPointInner .featuresPointImg{
        width: 100%;
        flex-direction: column;
        gap:calc(25vw / 7.5);
    }

    #featuresBl .featuresPoint + p.fontS{
        font-size: calc(8vw / 3.75);
        margin-top:calc(-70vw / 7.5);
        margin-bottom: calc(80vw / 7.5);
        line-height: 1.6;
        text-align: left;
    }    
    
    #featuresBl .featuresApp{
        margin:calc(-20vw / 7.5) 0 calc(80vw / 7.5);
        background: #d9f1f9;     
        border-radius: 10px;
        padding: calc(30vw / 7.5);
    }

    #featuresBl .featuresAppSliderWrapper{
        display: flex;
        gap:0;
        width: 100%;
    }

    #featuresBl .featuresApp .featuresAppSlide{
        text-align: center;
    }

    #featuresBl .featuresApp .featuresAppSlide .featuresAppSlideTitle{
        font-size:calc(14vw / 3.75);
        margin-bottom: calc(16vw / 7.5);
    }

    #featuresBl .featuresApp .featuresAppSlide .featuresAppSlideTitle:after{
        content: url("../img/features_app_line.svg");
        width: calc(236vw / 7.5);
        margin: 0 auto calc(23vw / 7.5);
    }

    #featuresBl .featuresApp .featuresAppSlide img{
        width: calc(292vw / 7.5);
    }

    #featuresBl .featuresApp .swiper-button-prev,
    #featuresBl .featuresApp .swiper-button-next{
        display: block;
        width:calc(60vw / 7.5);
        height: calc(60vw / 7.5);
    }

    #featuresBl .featuresApp .swiper-button-prev:after,
    #featuresBl .featuresApp .swiper-button-next:after{
        content: url("../img/app_swiper_arrow.svg");
        display: block;
        width: 100%;    
    }

    #featuresBl .featuresApp .swiper-button-prev:after{
      transform: scaleX(-1);    
    }
    
    #featuresBl .featuresBuyBtn .btnDesign {
      width: calc(200vw / 3.75);
      height: calc(50vw / 3.75);
      font-size: calc(14vw / 3.75);
    }    
    
}


/* =========================================
   #columnBl セクション
========================================= */
#columnBl{
    margin: 0 auto 120px auto;
    background: #FFF;
    padding: 120px calc(20vw / 3.75);
}

#columnBl .columnWrap{
    max-width: 900px;
    margin: 0 auto;
}

#columnBl h2 span{
    color: #0f7296;
}

#columnBl .columnList{
    display: flex;
    justify-content: space-between;
}

#columnBl .columnItem{
    width: 45.55%;
}

#columnBl .columnItemHeading{
    margin-bottom: 30px;
    text-align: center;
}

#columnBl .columnItemHeading img{
    height:90px;
    width: auto;
}

#columnBl .columnItemImg{
    margin-bottom: 20px;
}

#columnBl .columnItemImg img:nth-child(2){
    margin: 0 -8px;
    max-width: calc(100% + 16px);
}

#columnBl .columnItemText{
    color: #0f7296;
    line-height: 2;
}

#columnBl .columnItemText{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#columnBl .columnItemText.expanded{
  -webkit-line-clamp: unset;
}

#columnBl .columnItemReadMore {
    /* 配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    box-sizing: border-box;
    cursor: pointer;
    /* 装飾 */
    border: 1px solid #0f7296;
    border-radius: 30px;
    color: #0f7296;
    text-decoration: none;
    transition: all 0.3s ease;
    /* テキスト */
    font-family: "Noto Sans JP", sans-serif;
}

@media (max-width: 768px) {
    #columnBl{
        margin-bottom: calc(160vw / 7.5);
        padding: calc(160vw / 7.5) calc(75vw / 7.5) ;
    }

    #columnBl h2 img{
        width:  calc(155vw / 7.5);
    }    

    #columnBl .columnList{
        flex-wrap: wrap;
        gap:calc(160vw / 7.5) 0;
    }

    #columnBl .columnItem{
        width: 100%;
    }

    #columnBl .columnItemHeading{
        margin-bottom:  calc(60vw / 7.5);
    }

    #columnBl .columnItem01 .columnItemHeading img{
        height:calc(180vw / 7.5);
    }
    
    #columnBl .columnItem02 .columnItemHeading img{
        height:calc(251vw / 7.5);
    }

    #columnBl .columnItemImg{
        margin-bottom: calc(20vw / 7.5);
    }

    #columnBl .columnItemImg img:nth-child(2){
        margin: calc(10vw / 7.5) calc(-10vw / 7.5) 0;
        max-width: calc(100% + calc(20vw / 7.5));
    }

    #columnBl .columnItemText{
        font-size: calc(16vw / 3.75);
    }

    #columnBl .columnItemReadMore {
        height: calc(80vw / 7.5);
        margin-top: calc(35vw / 7.5);
        border-radius: calc(40vw / 7.5);
        font-size: calc(16vw / 3.75);
        line-height: calc(80vw / 7.5);
    }    
}

/* =========================================
   #productBl セクション
========================================= */
#productBl {
    position: relative;
    margin: 0 auto 120px;
    padding: 0 calc(20vw / 3.75) ;
}

.productWrap {
    max-width: 900px;
    margin: 0 auto;
}

/* ---------- タブ部分 ---------- */
.productTabList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 75px;
}

.productTabList li {
    display: flex;
    justify-content: center;
    width: 33.33%;
}

.productTabLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 3px solid #cbcbcb;
    transition: all 0.3s;
}

.productTabLink:hover,
.productTabLink.is-active {
    border-color: #231815;
}

/* ---------- メインスライダー ---------- */
.productSlider {
    position: relative;
    margin-bottom: 100px;
}

.productSlide {
    display: flex;
    flex-direction: column;
}

/* ----- メイン / サブ ----- */
.productMain,
.productSub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.productMain {
    margin-bottom: 75px;
}

.productSub {
    margin-bottom: 0;
    max-width: 100%;
    gap: 0 8.88%;
}

/* ----- 画像 / テキスト ----- */
.productMainImg {
    width: 50.55%;
    flex-shrink: 0;
    text-align: center;
}

.productSubImg {
    width: 60%;
}

.productMainText,
.productSubText {
    flex: 1;
}

.productModelName {
    margin-bottom: 40px;
}

.productDesc {
    font-size: 20px;
    line-height: 2;
}

.productSubTopicTtl {
    margin-bottom: 30px;
    line-height: 1;
}

.productSubHeading {
    margin-bottom: 10px;
}

.productSubText {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.025em;
}

#productModal.active[data-tab-id="tab0"] .modalTitle img {
    width: calc(223.5vw / 3.75);
}

#productModal.active[data-tab-id="tab1"] .modalTitle img {
    width: calc(251.5vw / 3.75);
}

#productModal.active[data-tab-id="tab2"] .modalTitle img {
    width: calc(187.2vw / 3.75);
}

@media (max-width: 980px) {
    .productMain {
        gap:0 3%;
    }
}
    
@media (max-width: 768px) {
    #productBl {
        padding: 0 calc(40vw / 7.5);
        margin-bottom: calc(160vw / 7.5);
    }

    #productBl .sectionTtl {
        margin-bottom: calc(43vw / 3.75);
    }

    #productBl .sectionTtl img {
        width: calc(175vw / 7.5);
    }

    /* ---------- タブ部分 ---------- */
    .productTabList {
        margin: 0 auto calc(80vw / 7.5);
    }

    .productTabList li:nth-child(1) img {
        width: calc(168vw / 7.5);
    }

    .productTabList li:nth-child(2) img {
        width: calc(158vw / 7.5);
    }

    .productTabList li:nth-child(3) img {
        width: calc(156vw / 7.5);
    }

    .productTabLink {
        width: 100%;
        padding-bottom: calc(18vw / 7.5);
    }

    .swiper-wrapper {
        display: flex;
    }

    .productSlider {
        padding: 0 calc(35vw / 7.5);
    }

    .productMain {
        margin-bottom: calc(160vw / 7.5);
        text-align: center;
    }

    .productMainImg {
        width: 100%;
        margin-right: 0;
        margin-bottom: calc(78vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab1"] .productMainImg img {
        width: calc(400vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab2"] .productMainImg img {
        width: calc(409vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab3"] .productMainImg img {
        width: calc(464vw / 7.5);
    }

    .productModelName {
        margin-bottom: calc(30vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab1"] .productModelName img {
        width: calc(409vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab2"] .productModelName img {
        width: calc(387vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab3"] .productModelName img {
        width: calc(379vw / 7.5);
    }

    .productSub {
        flex-direction: column-reverse;
        text-align: center;
    }

    .productSubTopicTtl {
        width: calc(86vw / 7.5);
        margin: 0 auto calc(60vw / 7.5);
        line-height: 1;
    }

    .productSubHeading {
        margin-bottom: calc(35vw / 7.5);
        line-height: 1;
    }

    .swiper-slide[data-tab-id="tab1"] .productSubHeading img {
        width: calc(564vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab2"] .productSubHeading img {
        width: calc(450vw / 7.5);
    }

    .swiper-slide[data-tab-id="tab3"] .productSubHeading img {
        width: calc(564vw / 7.5);
    }

    .productSubText {
        margin-bottom: calc(30vw / 7.5);
        font-size: calc(16vw / 3.75);
        line-height: 2;
        letter-spacing: 0;
    }

    .productSubImg,
    .productSubImg img {
        width: 100%;
    }

    .productSubContent {
        text-align: left;
    }

    .productSubContent span {
        display: block;
        margin-top: calc(5vw / 3.75);
        font-size: calc(8vw / 3.75);
        text-align: left;
    }

    .productDesc {
        font-size: calc(15vw / 3.75);
        margin: 0 calc(-10vw / 3.75);
    }

    .swiper-slide {
        display: block;
        max-width: 100%;
    }

}

.productSlider.swiper-container {
    overflow: hidden;
}

.productSlider .swiper-slide {
    visibility: hidden;
    pointer-events: none;
}

.productSlider .swiper-slide.swiper-slide-active {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}


/* ===============================
   #shopNowBl セクション
=============================== */
#shopNowBl {
    max-width: 1027px;
    margin: 0 auto 120px;
    padding: 0 calc(20vw / 3.75) ;
    text-align: center;
}

#shopNowBl .shopSwiper {
    overflow: hidden;
}

/* 商品アイテム */
#shopNowBl .shopNowItem {
    width: 21.908471275%;
    text-align: center;
/*    transition: transform 0.3s ease;*/
}

#shopNowBl .shopNowItemImg {
    margin: 0 auto 38px;
}

/* 商品名（SVG対応） */
#shopNowBl .shopNowItemName {
    margin: 0 0 27px;
}

/* 色違い画像 */
#shopNowBl .shopNowItemColors {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    gap: 12px;
}

#shopNowBl .shopNowItemColors li {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 11px;
    cursor: pointer;
}

#shopNowBl .shopNowItemColors li img {
    transition: all 0.3s ease;
    display: block;
    width: auto;
    height: 59px;
    margin: 0 auto 6px;
}

#shopNowBl .shopNowItemColors li:hover img,
#shopNowBl .shopNowItemColors li.active img {
    opacity: 0.4;
}

#shopNowBl .rd930 .shopNowItemColors li img {
    height: 67.5px;
}

#shopNowBl .shopNowItemColors li span {
    display: block;
    line-height: 1.3;
    letter-spacing: 0;
}

/* タグ */
#shopNowBl .shopNowItemTags {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-bottom: 37px;
    gap: 8px;
}

#shopNowBl .shopNowItemTags li {
    padding: 6px 8px;
    border: 1px solid #000;
    font-family: "Noto Sans JP";
    font-size: 11px;
}

/* リンク */
#shopNowBl .shopNowItemLinks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#shopNowBl .shopNowItemLinks li {
    width: 100%;
}

#shopNowBl .shopNowItemLinks a.btnDesign {
    width: 100%;
    max-width: 210px;
}

#shopNowBl .shopNowItemLinks a.btnDesign span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
}

@media (min-width: 769px) {
    #shopNowBl .shopSwiper .swiper-wrapper {
        display: flex;
        justify-content: space-between;
    }
    #shopNowBl .swiper-pagination,
    #shopNowBl .shopNowArrows{
        display: none;
    }
}

@media (max-width: 1000px) {
    #shopNowBl .rd803 .shopNowItemImg img {
        width: 130px;
    }
    #shopNowBl .rd930 .shopNowItemImg img {
        width: 129.63px;
    }
    #shopNowBl .rd915 .shopNowItemImg img {
        width: 157.15px;
    }
    #shopNowBl .rd914 .shopNowItemImg img {
        width: 157.15px;
    }

    #shopNowBl .shopNowItemColors li {
        font-size: 9px;
    }

    #shopNowBl .shopNowItemColors li img {
        height: 40px;
    }

    #shopNowBl .rd930 .shopNowItemColors li img {
        height: 45.78px;
    }
}


@media (max-width: 768px) {
    #shopNowBl {
        margin: 0 auto calc(160vw / 7.5);
        position: relative;
        padding: 0;
    }
    
    #shopNowBl .sectionTtl {
        margin-bottom: calc(30vw / 3.75);
    }

    #shopNowBl .sectionTtl img {
        width: calc(204vw / 7.5);
    }

    #shopNowBl .shopSwiper {
        padding-bottom: calc(35vw / 3.75);
    }

    #shopNowBl .shopNowItem {
        width: calc(200vw / 3.75) !important; /* メインスライド幅 */
        margin: 0 auto;
    }

    /* 前後のスライドが少し見える */
    #shopNowBl .swiper-slide {
        box-sizing: border-box;
        flex: 0 0 53.333%;
        max-width: 53.333%;
    }

    #shopNowBl .swiper-pagination {
        bottom: 10px !important;
    }

    #shopNowBl .shopNowItemImg {
        margin-bottom: calc(20vw / 3.75);
    }

    #shopNowBl .rd803 .shopNowItemImg img {
        width: calc(168vw / 3.75);
    }

    #shopNowBl .rd930 .shopNowItemImg img {
        width: calc(166vw / 3.75);
    }

    #shopNowBl .rd915 .shopNowItemImg img {
        width: calc(175vw / 3.75);
    }

    #shopNowBl .rd914 .shopNowItemImg img {
        width: calc(177vw / 3.75);
    }

    #shopNowBl .shopNowItemName {
        margin-bottom: calc(15vw / 3.75);
    }

    #shopNowBl .rd803 .shopNowItemName img {
        width: calc(110.6vw / 3.75);
    }

    #shopNowBl .rd930 .shopNowItemName img {
        width: calc(104vw / 3.75);
    }

    #shopNowBl .rd915 .shopNowItemName img {
        width: calc(100vw / 3.75);
    }

    #shopNowBl .rd914 .shopNowItemName img {
        width: calc(102vw / 3.75);
    }

    #shopNowBl .shopNowItemTags {
        padding: 0 calc(15vw / 3.75);
        margin-bottom: calc(40vw / 3.75);
        gap: calc(5vw / 3.75);
    }

    #shopNowBl .shopNowItemColors {
        margin-bottom: calc(15vw / 3.75);
        gap: calc(22vw / 3.75);
    }

    #shopNowBl .shopNowItemColors li span {
        font-size: calc(8vw / 3.75);
    }

    #shopNowBl .shopNowItemLinks {
        gap: calc(10vw / 3.75);
    }

    #shopNowBl .shopNowItemLinks li {
        width: 100%;
    }

    #shopNowBl .shopNowItemTags li,
    #shopNowBl .shopNowItemColors li {
        font-size: calc(9vw / 3.75);
    }

    #shopNowBl .shopNowItemLinks a.btnDesign {
        max-width: inherit;
        height: calc(50vw / 3.75);
        padding: calc(8vw / 3.75) 0;
    }

    #shopNowBl .swiper-pagination {
        bottom: 0 !important;
    }
    
    #shopNowBl .shopNowItemLinks a.btnDesign span {
        font-size: calc(11vw / 3.75) 0;
    }    
    
    #shopNowBl .shopNowArrows{
        display: flex;
        gap:0  calc(30vw / 3.75);
        justify-content: center;
        margin: 0 auto calc(30vw / 3.75) auto;
         height:  calc(32vw / 3.75);
    }
    
    #shopNowBl .shopNowArrows .swiper-button-prev,
    #shopNowBl .shopNowArrows .swiper-button-next{
        position: inherit;
        width: calc(32vw / 3.75) ;
        height:  calc(32vw / 3.75);
        margin: 0;
    }
    
    #shopNowBl .shopNowArrows .swiper-button-prev:after,
    #shopNowBl .shopNowArrows .swiper-button-next:after{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url("../img/shopnow_swiper_arrow.svg") no-repeat left top;
        background-size: cover;
    }   
    
    #shopNowBl .shopNowArrows .swiper-button-next:after{
         transform: scale(-1, -1);
    }       
    
    #shopNowBl .swiper-pagination {
        display: flex;
        justify-content: center;
        width: calc(200vw / 3.75) !important;
        height: 3px;
        bottom: 0 !important;
        left: 50%;
        gap: 3px;
        transform: translateX(-50%);
    }

    #shopNowBl .swiper-pagination-bullet {
        flex: 1;
        height: 3px;
        border-radius: 0;
        background: #231815;
    }
}

/* ===============================
   #specBl セクション
=============================== */
#specBl{
    max-width: 1027px;
    margin: 0 auto ;
    padding: 0 calc(20vw / 3.75) 120px;
}

#specBl .specSlider{
    max-width: 495px;
    margin: 0 auto 65px;
    position: relative;
}

#specBl .specSlider .specItem{
    display: flex;
    gap:0 20px;
    width: 330px;
    justify-content: center;
    align-items: center;
    display: none;
    height: 116px;
    opacity: 0;
}

#specBl .specSlider .specItem.is-active{
    opacity: 1;
    display: flex;
    margin: 0 auto;
}

#specBl .specSlider .specItem .specItemImg{
    width: 122.5px;
    text-align: center;
}

#specBl .specSlider .specItem .specItemName img{
    height: 25px;
    width: auto;
}

#specBl .specData{
  display:none;
  opacity: 0;
  transition: all 0.3s ease;
}

#specBl .specData.is-active{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    opacity: 1;
}

#specBl .specData p{
    width: 50%;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.4;
}

#specBl .specData p + p{
    float: right;
    text-align: right;
}

#specBl table{
    width: 46.73%;
    border-top: 1px solid #797c7e;
    line-height: 1.4;
}

#specBl table caption{
    margin-bottom: 15px;
}

#specBl table tr{
    border-bottom: 1px solid #797c7e;
}

#specBl table th{
    width: 140px;
    background: #fff;
    vertical-align: middle;
    line-height: 1.4;
    padding: 10px 7px;
}

#specBl table td{
    padding: 10px 7px;
}

#specBl .swiper-button-prev,
#specBl .swiper-button-next{
    position: absolute;
    top:50%;
    transform:translateY(-50%);        
    width: 40px;
    height: 40px;
    margin: 0;
}

#specBl .swiper-button-prev:after,
#specBl .swiper-button-next:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/spec_swiper_arrow.svg") no-repeat left top;
    background-size: cover;
}   

#specBl .swiper-button-prev{
    left: 0;
}      

#specBl .swiper-button-next{
    right: 0;
}      

#specBl .swiper-button-next:after{
     transform: scale(-1, -1);
    right: 0;
}

@media (max-width: 768px) {
    #specBl {
        padding: 0 calc(75vw / 7.5) calc(160vw / 7.5);
    }

    #specBl .sectionTtl{
        margin-bottom: calc(70vw / 7.5);
    }
    
    #specBl .sectionTtl img {
        width: calc(92vw / 7.5);
    }

    #specBl .specSlider{
        max-width: inherit;
        width: calc(540vw / 7.5);
        margin: 0 auto calc(65vw / 7.5);
    }

    #specBl .specSlider .specItem{
        gap:0 calc(20vw / 7.5);
        height: inherit;
        width: auto;
    }

    #specBl .specSlider .specItem.rd803 .specItemImg{
        width: calc(82vw / 7.5);
        text-align: center;
    }

    #specBl .specSlider .specItem.rd930 .specItemImg{
        width: calc(85vw / 7.5);
        text-align: center;
    }

    #specBl .specSlider .specItem.rd915 .specItemImg{
        width: calc(93vw / 7.5);
        text-align: center;
    }

    #specBl .specSlider .specItem.rd914 .specItemImg{
        width: calc(92vw / 7.5);
        text-align: center;
    }    

    #specBl .specSlider .specItem .specItemName img{
        height:  calc(30vw / 7.5);
        width: auto;
    }

    #specBl .specData{
        flex-direction: column;
        gap: 0;
    }

    #specBl .specData table:nth-of-type(1){
        order:1;
    }

    #specBl .specData p:nth-of-type(1){ 
        order:2; 
        margin: calc(15vw / 7.5) 0 calc(60vw / 7.5);
    }

    #specBl .specData table:nth-of-type(2){
        order:3;
    }

    #specBl .specData p:nth-of-type(2){
        order:4;
        float: inherit;
        text-align: left;
    }

    #specBl .specData p{
        width: 100%;
        margin-top: calc(15vw / 7.5);
        font-size:  calc(10vw / 3.75);
    }

    #specBl table{
        width: 100%;
    }

    #specBl table caption{
        font-size:  calc(10vw / 3.75);
        margin-bottom: calc(15vw / 7.5);
    }

    #specBl table th{
        font-size:  calc(12vw / 3.75);    
        width: calc(200vw / 7.5);
        padding: calc(15vw / 7.5) calc(10vw / 7.5);
    }

    #specBl table td{
        font-size:  calc(10vw / 3.75);    
        padding: calc(15vw / 7.5) calc(10vw / 7.5);
    }

    #specBl table sup{
        font-size:  60%;    
    }
    
    #specBl .swiper-button-prev,
    #specBl .swiper-button-next{
        width:   calc(65vw / 7.5);
        height:   calc(65vw / 7.5);
    }

    #specBl .swiper-button-prev:after{
        background: url("../img/shopnow_swiper_arrow.svg") no-repeat left center;
    }

    #specBl .swiper-button-next:after{
        background: url("../img/shopnow_swiper_arrow.svg") no-repeat right center;
    }
    
}