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

/* CSS Document */

/* 仮 */
/*body {
    padding-top: 100px;
}*/

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

main {
    background: url("../img/bg.webp") repeat left top;
    background-size: 340.5px auto;
    color: #231815;
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    letter-spacing: 0.05em;
}

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

.sectionTtl span {
    display: block;
    margin-top: 20px;
    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; /* 文字黒 */
}


@media (max-width: 768px) {
    main {
        padding-top: 70px;
    }
    
    .pcOnly{
        display: none;
    }
    
    .sectionTtl {
        text-align: center;
        margin-bottom: calc(55vw / 3.75);
    }

    .sectionTtl span {
        margin-top: calc(10vw / 3.75);
        font-size: calc(11vw / 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: url("../img/bg.webp") repeat left top;
}

#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;
    font-family: "Noto Serif JP", serif;
    /* 装飾 */
    background: url("../img/bg.webp") repeat left top;
    background-size: 340.5px auto;
    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; }

/* ===============================
   SP レイアウト
=============================== */
@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 スタイル (PC優先)
=============================== */
#kvBl {
    max-width: 1027px;
    margin: 0 auto 70px;
}

#kvBl .kvWrap {
    position: relative;
}

#kvBl .kvImage {
    margin-bottom: 43px;
}

#kvBl .kvText {
    text-align: center;
}

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

.subText {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 100;
    letter-spacing: 0.075em;
}

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

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

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

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

    #kvBl .kvHeading {
        position: absolute;
        top: calc(35vw / 3.75);
        left: 50%;
        width: calc(329vw / 3.75);
        z-index: 2;
        transform: translateX(-50%);
        filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.19));
    }

    .subText {
        font-size: calc(10vw / 3.75);
        font-weight: 400;
        letter-spacing: 0;
    }

    .subText .logo {
        width: calc(143vw / 3.75);
        margin-left: 10px;
    }

    .subText .model {
        margin-top: calc(12vw / 3.75); /* 修正: calc(8vw / 3.75) + calc(4vw / 3.75)を想定 */
        font-size: calc(8vw / 3.75);
    }
}


/* ===============================
   #introBl スタイル (PC優先)
=============================== */
#introBl {
    max-width: 1027px;
    margin: 0 auto 160px;
    text-align: center;
}

#introBl .introWrap {
    position: relative;
}

#introBl .introImage {
    margin-bottom: 37px;
}

#introBl .introText {
    margin-bottom: 35px;
}

#introBl .introText h2 {
    margin-bottom: 30px;
}

#introBl .introText p {
    line-height: 2.133;
}

#introBl .introProductsImage {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    gap: 0 39px;
}

@media (max-width: 768px) {
    #introBl {
        margin-bottom: calc(100vw / 3.75); /* 下マージン調整 */
    }

    #introBl .introImage {
        margin-bottom: calc(30vw / 3.75);
    }

    #introBl .introText {
        margin-bottom: calc(12vw / 3.75);
        text-align: center;
    }

    #introBl .introHeading {
        position: absolute; /* ビジュアル上に重ねる */
        top: calc(105vw / 3.75); /* 仮の位置 */
        left: calc(133vw / 3.75);
        width: calc(117vw / 3.75);
    }

    #introBl .introText p {
        margin-bottom: calc(50vw / 3.75);
        font-size: calc(12vw / 3.75);
        line-height: 2.5;
    }

    #introBl .introProductsImage {
        margin-bottom: calc(20vw / 3.75);
        gap: calc(25vw / 3.75);
        align-items: center;
    }

    #introBl .introProductsImage img {
        width: calc(85vw / 3.75);
        height: auto;
    }

    #introBl .introProductsImage div:nth-child(3) img{
        width: calc(90vw / 3.75);
    }

    #introBl .subText {
        margin-top: calc(20vw / 3.75);
        font-size: calc(12vw / 3.75);
    }

    #introBl .subText .logo {
        display: block;
        margin: calc(5vw / 3.75) auto;
        width: calc(198vw / 3.75);
    }

    #introBl .subText .model {
        margin-top: calc(15vw / 3.75);
        font-size: calc(9vw / 3.75);
    }
}


/* ===============================
   #magazineBl (マガジン) スタイル (PC優先)
=============================== */
#magazineBl {
    position: relative;
    padding: 0 calc(20vw / 3.75) 120px calc(20vw / 3.75);
    margin-bottom: 120px;
}

#magazineBl:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1250px;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    background: #231815;
}

/* -------------------------------
   タブナビゲーション
------------------------------- */
.magazineTabList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto 33px;
}

.magazineTabList li {
    display: flex;
    justify-content: center;
    width: 25%;
}

.magazineTabList li img {
    width: auto;
    height: 17px;
}

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

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

/* -------------------------------
   スライド / 記事カード
------------------------------- */
.magazineSlider {
    margin-bottom: 75px;
}

.magazineArticleCard {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

/* PCではSP用画像を非表示 */
.articleFigure {
    display: none;
    flex: 0 0 45%;
    margin: 0;
}

/* PCでは詳細を表示 */
.magazineArticleCardDetail {
    display: block;
    padding: 0 12px;
}

.articleBody.twoColumn {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    gap: 0 65px;
}

.articleBodyImg {
    margin: 0;
}

.magazineArticleCard[data-modal-target="article-modal-0"] .articleBodyImg {
    margin-left: -40px;
}

.articleBodyText {
    flex: 1;
}

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

.articleBodyText p span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.8;
}

.articleHeading {
    margin-bottom: 30px;
}

.userProfile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.userProfileDetails {
    flex: 1;
}

.userProfileName {
    margin-bottom: 5px;
    font-size: 20px;
}

.userProfileName span {
    font-size: 14px;
}

.userProfileBio {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

/* モーダルボタン（PCでは非表示） */
.modalTriggerBtn {
    display: none;
}

/* -------------------------------
   購入ボタン
------------------------------- */
.magazineBuyBtn .btnDesign {
    width: 207px;
    height: 60px;
    margin: 0 auto;
    font-size: 20px;
}

/* -------------------------------
   モーダル（SP専用）
------------------------------- */
#magazineModal {
    /* 配置 */
    display: flex;
    position: fixed;
    inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; のショートハンド */
    overflow: hidden;
    z-index: 1000;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* ここからフェード用 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;    
}

#magazineModal.active {
    opacity: 1;
    visibility: visible;    
}

#magazineModal .modalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

#magazineModal .modalContent {
    /* 配置 */
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: calc(50vw / 3.75) calc(20vw / 3.75);
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1001;
    -webkit-overflow-scrolling: touch;

    /* 装飾 */
    background: url("../img/bg.webp") repeat left top;
    background-size: 340.5px;
}

#magazineModal .modalClose {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1002;
    cursor: pointer;

    /* テキスト */
    color: #231815;
    font-family: "Noto Serif JP", serif;
    font-weight: 100;
    font-size: 32px;
    line-height: 1;
}

#magazineModal .modalInner {
    display: flex;
    flex-direction: column;
    gap: calc(20vw / 3.75);
}

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

#magazineModal .modalText {
    font-size: calc(12vw / 3.75);
    line-height: 1.8;
}

#magazineModal .modalText span {
    display: block;
    margin-top: calc(5vw / 3.75);
    font-size: calc(8vw / 3.75);
}

#magazineModal .modalImg img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===============================
   table専用 (max-width: 1000px)
=============================== */
@media (max-width: 1000px) {
    .articleBody.twoColumn {
        gap: 0 30px;
    }
}
/* ===============================
   SP専用 (max-width: 768px)
=============================== */
@media (max-width: 768px) {

    /* -------------------
       全体調整
    ------------------- */
    #magazineBl {
        padding: 0 0 calc(100vw / 3.75) 0;
        margin-bottom: calc(100vw / 3.75);
    }

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

    #magazineBl .sectionTtl img {
        width: calc(180vw / 3.75);
    }

    #magazineBl:after {
        height: 1px;
    }

    /* -------------------
       タブ非表示
    ------------------- */
    .magazineTabList {
        display: none;
    }

    /* -------------------
       スライダー設定
    ------------------- */
    .magazineSlider {
        margin-bottom: calc(70vw / 3.75);
        padding-left: calc(20vw / 3.75);
        overflow: hidden;
    }

    .magazineSlider .swiper-wrapper {
        padding-right: calc(20vw / 3.75);
    }

    .magazineSlider .swiper-slide {
        width: calc((310vw / 3.75) - 20px) !important;
        margin-right: 20px !important;
        flex-shrink: 0;
    }

    .magazineSlider .swiper-wrapper .swiper-slide:last-child {
        margin-right: 0 !important;
    }

    /* SPでは詳細非表示、画像表示 */
    .magazineArticleCardDetail {
        display: none;
        padding: 0 calc(15vw / 3.75);
    }

    .articleFigure {
        display: block;
        width: 100%;
        margin: 0;
    }

    .articleFigure img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* モーダルトリガー */
    .modalTriggerBtn {
        display: block;
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        z-index: 10;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .modalTriggerBtn .plusIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        color: #231815;
        font-family: "Noto Serif JP", serif;
        font-size: 18px;
        line-height: 1;
    }

    /* モーダル内縦積み */
    .articleBody.twoColumn {
        flex-direction: column-reverse;
        margin-bottom: calc(30vw / 3.75);
        gap: 0;
    }

    .articleBodyImg img {
        width: 100%;
    }

    .magazineSlideItem[data-tab-id="tab1"] .articleBodyImg {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .magazineSlideItem[data-tab-id="tab1"] .articleBodyImg img {
        width: 100%;
        height: auto;
    }

    .articleBodyText {
        width: auto;
        height: auto;
        margin-bottom: calc(20vw / 3.75);
    }

    .userProfile {
        gap: calc(10vw / 3.75);
        align-items: start;
    }

    .userProfileFigure {
        width: calc(60vw / 3.75);
    }

    .userProfileFigure img {
        width: 100%;
        height: auto;
    }

    .userProfileName {
        font-size: calc(12vw / 3.75);
    }

    .userProfileName span,
    .userProfileBio {
        font-size: calc(10vw / 3.75);
        line-height: 1.4;
        letter-spacing: 0em;
    }

    .articleHeading {
        margin-bottom: calc(20vw / 3.75);
    }

    /* タイトル個別幅 */
    #magazineModal[data-tab-id="tab1"] .articleHeading img { width: calc(196vw / 3.75); }
    #magazineModal[data-tab-id="tab2"] .articleHeading img { width: calc(215vw / 3.75); }
    #magazineModal[data-tab-id="tab3"] .articleHeading img { width: calc(217vw / 3.75); }
    #magazineModal[data-tab-id="tab4"] .articleHeading img { width: calc(136vw / 3.75); }

    .articleBodyText p {
        font-size: calc(12vw / 3.75);
        line-height: calc(22vw / 3.75);
    }

    .articleBodyText p span {
        display: block;
        margin-top: calc(10vw / 3.75);
        line-height: calc(12vw / 3.75);
        font-size: calc(8vw / 3.75);
    }

    /* 購入ボタン */
    .magazineBuyBtn .btnDesign {
        width: calc(200vw / 3.75);
        height: calc(50vw / 3.75);
        font-size: calc(14vw / 3.75);
    }
}

/* PCではモーダルを非表示固定 */
@media (min-width: 769px) {
    #magazineModal {
        display: none !important;
    }
}


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

#productBl:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1250px;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    background: #231815;
}

#productBl .sectionTtl {
    margin-bottom: 40px;
}

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

/* ---------- タブ部分 ---------- */
.productTabList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 900px;
    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;
    max-width: 825px;
    margin-left: auto;
    margin-right: auto;
}

.productMain {
    margin-bottom: 75px;
}

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

/* ----- 画像 / テキスト ----- */
.productMainImg {
    width: 386px;
    flex-shrink: 0;
    margin-right: 30px;
    text-align: center;
}

.productSubImg {
    width: 56.25%;
}

.productMainText,
.productSubText {
    flex: 1;
}

.productModelName {
    margin-bottom: 40px;
}

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

.productSubTopicImg {
    margin-bottom: 22px;
}

.productSubHeading {
    margin-bottom: 30px;
}

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

/* ---------------------------------
   ---------- 下部コラムエリア ----------
--------------------------------- */
.productColumn .swiper-wrapper {
    display: flex;
    justify-content: space-between;
}

.productColumnItem {
    position: relative;
    max-width: 30%;
    box-sizing: border-box;
}

.productColumnItemTitle {
    margin-bottom: 30px;
    text-align: left;
}

.productColumnItemImg {
    margin-bottom: 25px;
}

.productColumnItemCard {
    display: none;
}

.productColumnItemText {
    display: -webkit-box;
    overflow: hidden;
    line-height: 2;
    font-size: 16px;
    text-align: left;
    letter-spacing: 0.025em;
    transition: all 0.3s ease;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.productColumnItemText span {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
}

.productColumnItemText.expanded {
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
}

.productColumnItemReadMore {
    /* 配置 */
    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 #231815;
    border-radius: 30px;
    color: #231815;
    text-decoration: none;
    transition: all 0.3s ease;

    /* テキスト */
    font-family: "Noto Serif JP", serif;
}

.productModalTriggerBtn {
    /* PCでは非表示 */
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    z-index: 10;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* ---------- モーダル ---------- */
#productModal.modal {
    /* 配置 */
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    /* ここからフェード用 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;    
}

#productModal .modalContent {
    /* 配置 */
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: calc(50vw / 3.75) calc(35vw / 3.75);
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1001;
    -webkit-overflow-scrolling: touch;

    /* 装飾 */
    background: url("../img/bg.webp") repeat left top;
    background-size: 340.5px;
}

.modalClose {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1002;
    cursor: pointer;

    /* テキスト */
    color: #231815;
    font-family: "Noto Serif JP", serif;
    font-weight: 100;
    font-size: 32px;
    line-height: 1;
}

.modalTitle {
    margin-bottom: calc(50vw / 3.75);
}

#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);
}


.modalText {
    font-size: calc(12vw / 3.75);
    line-height: calc(22vw / 3.75);
    margin-bottom: calc(20vw / 3.75);
}

.modalText span {
    display: block;
    margin-top: calc(10vw / 3.75);
    line-height: calc(12vw / 3.75);
    font-size: calc(8vw / 3.75);
}

.modalImg img {
    width: 100%;
    height: auto;
}


/* ---------- SP用切替 ---------- */
@media (max-width: 768px) {
    #productBl {
        padding: 0 0 calc(75vw / 3.75) 0;
        margin-bottom: calc(75vw / 3.75);
    }

    #productBl::after {
        height: 1px;
    }

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

    #productBl .sectionTtl img {
        width: calc(93vw / 3.75);
    }

    .productWrap {
        padding: 0 calc(20vw / 3.75);
    }

    .productColumn {
        margin-bottom: calc(70vw / 3.75);
        padding-left: calc(20vw / 3.75);
        overflow: hidden;
    }

    .productColumn .swiper-wrapper {
        padding-right: calc(20vw / 3.75);
    }

    .productColumnItem {
        flex: inherit;
        width: calc((310vw / 3.75) - 20px) !important;
        margin-right: 20px !important;
        flex-shrink: 0;
    }

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

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

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

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

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

    .productColumn {
        display: block; /* Swiperに任せる */
        margin: 0 calc(-20vw / 3.75);
    }

    .swiper-wrapper {
        display: flex;
    }

    .productSlider {
        padding: 0 calc(15vw / 3.75);
        margin-bottom: calc(60vw / 3.75);
    }

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

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

    .productColumnItemTitle,
    .productColumnItemImg {
        display: none;
    }

    .productColumnItemCard {
        display: block;
    }

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

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

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

    .productModelName {
        margin-bottom: calc(25vw / 3.75);
    }

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

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

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

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

    .productSubTopicImg {
        width: calc(44vw / 3.75);
        margin: 0 auto calc(10vw / 3.75);
        line-height: 1;
    }

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

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

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

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

    .productSubText {
        margin-bottom: calc(15vw / 3.75);
        font-size: calc(12vw / 3.75);
        line-height: 1.8;
        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(14vw / 3.75);
    }

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

    /* SPでは全文切替非表示、モーダルで表示 */
    #productModal.active {
        opacity: 1;
        visibility: visible;
    }

    .productColumnItemText,
    .productColumnItemReadMore {
        display: none !important;
    }

    /* SPモーダル用ボタン表示 */
    .productModalTriggerBtn {
        display: block;
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        z-index: 10;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .productModalTriggerBtn .plusIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        color: #231815;
        font-family: "Noto Serif JP", serif;
        font-size: 18px;
        line-height: 1;
    }

    .productColumnItemImgSp {
        display: block;
    }

    .productColumnItemImgPc {
        display: none; /* モーダル用 */
    }
}

/* ---------- フェードスライダー用 ---------- */
.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;
}

/* ---------- PCでの表示調整 ---------- */
@media (min-width: 769px) {
    .productColumnItemImgSp {
        display: none;
    }

    .productModalTriggerBtn {
        display: none;
    }
}


/* ===============================
   #shopNowBl (SHOP NOW) BLOCK
=============================== */
#shopNowBl {
    max-width: 1027px;
    margin: 0 auto;
    padding: 0 calc(20vw / 3.75) 120px;
    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;
}

/* ===============================
   PC layout (変更なし)
=============================== */
@media (min-width: 769px) {
    #shopNowBl .shopSwiper .swiper-wrapper {
        display: flex;
        justify-content: space-between;
    }
    #shopNowBl .swiper-pagination,
    #shopNowBl .shopNowArrows{
        display: none;
    }
}

/* ===============================
   tablet layout (整理済み)
=============================== */
@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;
    }
}
/* ===============================
   SP layout (整理済み)
=============================== */
@media (max-width: 768px) {
    #shopNowBl {
        padding: 0 0 calc(70vw / 3.75);
        position: relative;
    }

    #shopNowBl::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 1250px;
        width: 100%;
        height: 1px;
        margin: 0 auto;
        background: #231815;
    }
    
    #shopNowBl .sectionTtl {
        margin-bottom: calc(30vw / 3.75);
    }

    #shopNowBl .sectionTtl img {
        width: calc(108vw / 3.75);
    }

    #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(126vw / 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;
    }    
    
    
    /* ===============================
      Swiper ボタン
    =============================== */
    #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);
    }       
    
    /* ===============================
      Swiper ページネーション（ライン型）
    =============================== */
    #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;
    }
}

.note{
    margin: 0 auto;
    padding: 0 calc(20vw / 3.75) 50px;
    max-width: 1027px;
    text-align: right;
    font-size: 13px;
}
@media (max-width: 768px) {
    .note{
        text-align: left;
        font-size: calc(8vw / 3.75) !important;
        padding: calc(35vw / 3.75) calc(20vw / 3.75);
    }
}