@charset "utf-8";

/* ========================================================= SP/PC 切り替え */
@media print,
screen and (max-width: 767px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .pcOnly {
    display: block;
  }

  .spOnly {
    display: none;
  }

  /* ========================================================= BASE (PC) */
  body {
    font-size: 1.0vw;

  }

  /* ========================================================= HEADER */
  header {
    padding: min(16.58vw, 10.5vh) min(11.46vw, 20.7vh);
  }

  .headerLogo img {
    width: 10.74vw;
  }

  main {
    width: 100%;

    overflow-x: hidden;
  }

  video {
    height: 100vh;
    width: auto;
    min-width: 100%;
  }

  /* ========================================================= ハンバーガーメニュー */
  .hamburger {
    top: 5.99vw;
    right: 5.22vw;
    width: 4.22vw;
    height: 1.55vw;
  }

  .navDrawerOverlay {
    display: none !important;
  }

  .navDrawer {
    width: 39.33vw;
    padding: 23vh 0 0 13.5vh;
    overflow-y: auto;
  }

  .hamburger span:last-child {
    top: .7vw;
  }

  .navDrawerNav {
    gap: min(6vw, 11vh) 0;
    margin-top: 0;
  }

  .navDrawerNav a {
    font-size: 1.2vw;
  }

  .navDrawerLogo img {
    width: 11vw;
  }


  /* ========================================================= FV */
  /* PC: 計測値に基づく忠実な実装
     FV高さ: display430px/395px幅 → 109vw
     STYLE font-size: display50px視覚高÷0.72(cap比) / 395 × 100 ≈ 17.6vw → 16.3vw採用
     WARM/ACTIVE font-size: display25px÷0.72 / 395 × 100 ≈ 8.9vw → 7.0vw採用
     WARMのx開始位置: display120px / 395 = 30.4vw（text左端7.1vwからのoffset=23.3vw）
  */
  #fv {
    height: 100dvh;
    z-index: 60;
    position: relative;
  }

  .fvText {
    bottom: min(6.6vw, 12vh);
    left: min(11.46vw, 20.7vh);
  }

  .fvSeason {
    text-align-last: left;
    font-size: min(3.3vw, 6vh);
    position: relative;
    align-items: center;
    top: 0;
    left: 0;
    gap: min(2.1vw, 4vh);
    right: initial;
    margin: 0.4vw 0 0;
    padding: 0;
    width: auto;
    letter-spacing: 10%;
  }

  .fvStyle {
    font-size: min(7.5vw, 13.5vh);
    font-weight: 300;
    line-height: min(10.5vw, 19vh);
  }

  .fvLabels {
    top: min(5.5vw, 10vh);
    left: min(23vw, 41.7vh);
    gap: .5vw;
    right: initial;
    margin: 0.4vw 0 0.4vw;
    padding: 0 0 1vw;
    width: auto;
  }

  .fvWarm {
    font-size: min(2.5vw, 4.5vh);
    letter-spacing: 0;
  }

  .fvActive {
    font-size: min(2.3vw, 4.5vh);
    letter-spacing: 0;
  }

  .fvLayering {
    font-size: min(7.5vw, 13.5vh);
    font-weight: 300;
    line-height: min(7.5vw, 13.5vh);
    letter-spacing: .5vw;
  }

  .fvVertical {
    font-size: min(1.46vw, 2.6vh);
    line-height: min(2.56vw, 4.6vh);
    right: min(10.99vw, 19.8vh);
    top: 65vh;
    letter-spacing: .1vw;
  }



  /* ========================================================= SECTION LABEL */
  .sectionLabel {
    width: auto;
    writing-mode: vertical-rl;
    border: none;
    justify-content: left;
  }

  .sectionLabelWrap {
    display: flex;
    flex-wrap: wrap;
  }

  .sectionLabel span {
    font-size: 1.3vw;
    padding: 0;
    letter-spacing: .1vw;
    font-weight: 300;
  }
  .sectionLabel span.spOnly{
    display: none;
  }

  /* ========================================================= INTRODUCTION */
  #introduction {
    width: 100%;
    padding: 8.02vw 7.3vw 5.6vw 11.46vw;
    display: flex;
    flex-flow: wrap;
  }

  .introInner {
    width: 69.69vw;
    display: grid;
    grid-template-columns: 22vw 1fr;
    grid-template-areas:
      "body photo"
      "icons photo";
    gap: 2vw 3vw;
    margin: 0;
    padding: 0 0 0 5.99vw;
    align-items: start;
  }

  .introBody {
    grid-area: body;
    flex: unset;
  }

  .introIcons {
    grid-area: icons;
    gap: 2.1vw;
    flex-wrap: wrap;
    margin-top: 0;
  }

  .introPhoto {
    grid-area: photo;
    flex: unset;
  }

  .introPhoto img {
    width: 42.81vw;
    margin: -6vw 0 0 -3vw;
  }

  .introText {
    width: 16.09vw;
    font-size: 1.04vw;
    letter-spacing: .1vw;
    line-height: 2.08vw;
  }

  .introIcons {
    justify-content: left;
  }

  .introIcons img {
    width: 3.5vw;
  }

  .introIconWarm svg,
  .introIconActive svg {
    width: 3.5vw;
    height: 3.5vw;
  }

  /* ========================================================= KNOWLEDGE */
  #knowledge {
    padding: 5.6vw 0 5.6vw 11.46vw;
  }

  .knowledgeHead {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    background: none;
    height: auto;
    color: #000;
    margin-bottom: 6.8vw;
  }

  .knowledgeHead .sectionLabel {
    margin: 0;
  }

  .knowledgeHead div:last-of-type {
    margin-left: 5.99vw;
  }

  .knowledgeTitle {
    text-align: left;
    width: 69.69vw;
    font-size: 1.25vw;
    line-height: 1.25vw;
    padding-bottom: .8vw;
  }

  .knowledgeLead {
    margin: 0;
    font-size: 1.04vw;
    letter-spacing: .1vw;
    line-height: 2.08vw;
  }

  .knowledgeTab {
    margin-bottom: 0;
  }

  .knowledgeTab li {
    width: 38.54vw;
    height: 5.94vw;
    font-size: 1.56vw;
    letter-spacing: .1vw;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* 比較ヘッダー */
  .layeringCompare {
    gap: 2.8vw;
    margin-bottom: .8vw;
    margin-left: 19.64vw;
  }

  .layeringCompareDesc {
    font-size: 0.9vw;
  }

  .layeringCompareName {
    font-size: 1.9vw;
    letter-spacing: .1vw;
    padding-bottom: 2.5vw;
    font-weight: 300;
  }

  .warmLabel {
    border-bottom-width: 0.2vw;
  }

  .activeLabel {
    border-bottom-width: 0.2vw;
  }

  /* 商品セクション */
  .layeringImageWrap {

    margin-left: 19.71vw;
  }

  .layerRow {
    padding: 0 0;
    gap: 1.4vw;

  }

  .layerLabel {
    width: 5.2vw;
    gap: 0.89vw;
    margin: 2vw 1.79vw 0 11.46vw;
    padding: 0;
    border-top: none;

  }

  .layerIconWrap {
    width: 3.5vw;
    height: auto;
  }

  .layerNameWrap {
    flex-flow: column;
    writing-mode: initial;
    font-size: 1.25vw;
    padding-right: 0;
    gap:.5vw;
  }

  .layerNameWrap em {
    font-size: .75vw;
    margin-top: 0.2vw;
  }


  /* ========================================================= LAYERING MAPPING: productCard 配置調整 */
  /*
   * 使い方:
   *   1. layerRow に class="layerRow map-row" と style="--row-h:Xvw" を追加
   *   2. productCard に style="--x:Xvw;--y:Yvw" を追加
   *
   * 例:
   *   <div class="layerRow map-row" style="--row-h:40vw">
   *     <div class="productCard" data-id="..." style="--x:9vw;--y:2vw">
   */

  .layerRow.map-row {
    position: relative;
    height: var(--row-h, 30vw);
    gap: 0;
    padding: 0;
    right: 0;
  }

  .layerRow.map-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: initial;
    width: 77.11vw;
    height: 1px;
    background: #000;
  }

  .inner-layer.map-row::after {
    display: none;
  }

  #knowledge .layerRow.map-row::before {
    content: '';
    position: absolute;
    left: 17.5vw;
    top: 2vw;
    height: 80%;
    width: 1px;
    background: #333;
    z-index: 1;
  }

  .layerRow.map-row .layerLabel {
    position: absolute;
    top: 2vw;
    left: 11.46vw;
    margin: 0;
    z-index: 2;
  }

  .layerRow.map-row .productGrid {
    position: absolute;
    inset: 0;
    width: auto;
    gap: 0;
    padding: 0;
    border: none;
    display: block;
  }

  .layerRow.map-row .productColWarm,
  .layerRow.map-row .productColActive {
    display: contents;
  }

  .layerRow.map-row .productCard,
  .layerRow.map-row .productColWarm .productCard,
  .layerRow.map-row .productColActive .productCard {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    width: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1.5vw;
  }

  .layerRow.map-row .productImgWrap {
    width: var(--img-w, 9vw);
    margin: 0;
    flex-shrink: 0;
    aspect-ratio: unset;
    overflow: visible;
    justify-content: left;
  }

  .layerRow.map-row .productImgWrap img {
    height: auto;
    width: 100%;
    object-fit: contain;
  }

  .layerRow.map-row .productCardBody {
    order: -1;
    width: 6.5vw;
    height: 100%;
    min-height: 7vw;
    padding: 0;
    justify-content: flex-end;
  }

  /* .layerRow.map-row .productCode,
  .layerRow.map-row .productName {
    display: none;
  } */

  /* twoCol: WARM/ACTIVE 比較 */
  .productGrid.twoCol,
  #layeringImage .productGrid.singleCol {
    padding: 3vw 2.08vw;
    gap: 2.1vw;
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent 70%);
    border-image-slice: 1;
  }

  .productColWarm,
  .productColActive {
    gap: 1.4vw;
  }

  .productColWarm .productCard,
  .productColActive .productCard {
    width: calc(50% - 0.7vw);
    height: auto;
  }

  .productCardBody {
    display: flex;
    flex-flow: column;
    height: auto;
    padding: 0 0 3vw;
  }

  .productCardBody a {
    margin-top: auto;
  }

  /* singleCol */
  .productGrid.singleCol {
    gap: 1.4vw;
  }

  .productGrid.singleCol .productCard {
    height: auto;
  }

  .productImgWrap {
    width: 7.69vw;
    margin-bottom: 0.7vw;
    cursor: pointer;
  }

  .productImgWrap img {
    min-width: auto;
    width: auto;
    height: 100%;
    max-height: 9vw;
  }

  .productImgWrap img:hover {
    transform: scale(1.2);
    transition: transform 0.3s;
  }

  .productCode {
    font-size: 0.9vw;
    margin-bottom: 0.3vw;
    text-align: left;
    cursor: pointer;
  }

  .productName {
    font-size: .84vw;
    line-height: 1.3vw;
    margin-bottom: 0.7vw;
    display: block;
    white-space: nowrap;
  }

  .readMore {
    width: 4.79vw;
    height: 1.61vw;
    font-size: .75vw;
    padding: 0.4vw 0;
    border-width: 0.1vw;
  }

  #select01 .readMore {
    margin-bottom: 2vw;

  }

  .knowledgeInner {
    width: 77.08vw;
  }

  .knowledgeContentWrap {
    width: 100vw;
    margin: 0 0 0 -11.46vw;
    padding: 5.21vw 11.46vw 0 0;
    max-height: 33.9vw;
    overflow-x: hidden;
    cursor: initial;
  }

  .knowledgeClose {
    border-radius: 9999px;
    padding: 0 0 0;
    width: 38.54vw;
    height: 4.06vw;
    margin: -2vw auto 0;
    justify-content: space-between;
  }

  .knowledgeCloseBtnIcon {
    font-size: 2.1vw;
  }

  .knowledgeCloseBtn {
    font-size: 1.3vw;
    gap: 0;
    padding: 0 2vw 0 3vw;
    justify-content: space-between;
    width: 100%;
  }

  .knowledgeContentWrap.open+.knowledgeClose {
    background-color: #fff;
    border: 0.1vw solid #000;
  }

  .knowledgeContentWrap.open+.knowledgeClose .knowledgeCloseBtn {
    color: #000;
  }

  #layeringImage,
  #layeringMapping {
    width: 100%;
  }

  .layeringImageWrap:first-of-type {
    margin: 0;
    margin-left: 19.71vw;
    /* margin-right: 11.46vw; */
  }

  #layeringMapping .layeringImageWrap:first-of-type {
    margin-left: 19.71vw;
  }

  .layeringImageWrap img.spOnly {
    display: none;
  }

  /* ========================================================= SELECT01 */
  #select01 {
    padding: 3vw 11.46vw 5.6vw 11.46vw;
  }

  .select01Lead {
    font-size: 1.04vw;
    line-height: 2.6vw;
    letter-spacing: .1vw;
    margin-bottom: 2.8vw;
    padding: 0 0 0 5.99vw;
  }

  .select01Cards {
    gap: 1.4vw;
  }

  #select01TabWarm,
  #select01TabWarm .imgBack,
  #select01TabActive,
  #select01TabActive .imgBack {
    width: 34.32vw;
    height: 48.8vw;
    flex: initial;
  }

  .selectCard {
    min-height: auto;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
  }

  .selectCardContent {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 8.18vw 0 4.43vw;
    text-align: center;

  }

  #select01TabWarm {
    background-image: url(../img/selectWarmHover.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  #select01TabWarm .imgBack,
  #select01TabActive .imgBack {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../img/selectWarm.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all .3s;
  }
  #select01TabWarm:hover .imgBack,
  #select01TabActive:hover .imgBack {
    opacity: 0;
  }

  #select01TabActive {
    background-image: url(../img/selectActiveHover.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  #select01TabActive .imgBack {
    right: 0;
    left: initial;
    background-image: url(../img/selectActive.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .selectTypeName {
    font-size: 3.8vw;
    font-weight: 100;
  }

  .selectTypeName span {
    font-size: 2.5vw;
  }

  .selectTypeSubtitle {
    writing-mode: initial;
    font-size: 1.21vw;
    line-height: 3.39vw;
    text-align: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .selectTypeCopy {
    background-size: 21.28vw auto;
    background-position: center;
    font-size: 1.83vw;
    line-height: 2.5vw;
    margin: 0;
    padding: 2vw 0 3vw;
    font-weight: 400;
  }

  .selectTypeDesc {
    width: auto;
    margin: 0 auto;
    padding: 0;
    border: none;
    font-size: .88vw;
    letter-spacing: initial;
  }

  .selectTypeFish {
    padding: 2vw 0 0;
    font-size: 1.27vw;
    margin-bottom: 2.1vw;
  }

  .selectBtn {
    border-radius: 9999px;
    font-size: 1.25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto auto 0;
    border-width: 0.1vw;
    padding: 0;
    height: 3.13vw;
    width: 9.27vw;
    letter-spacing: .2vw;
  }

  /* ========================================================= SELECT01 PC: タブなし横並び */
  .select01CardArea.bg-warm {
    background-image: none;
    color: #000;
    justify-content: space-between;
    /* background-image: url(../img/selectWarm.png); */
  }


  .select01CardArea.bg-active {
    background-image: none;
  }

  .select01CardArea .tab.select01Tab {
    display: none;
  }

  .select01CardArea {
    display: flex;
    justify-content: space-between;
    margin-top: 3.8vw;
  }

  .select01CardArea .tabContent {
    display: block;
    flex: 1;
  }

  /* ========================================================= SELECT02 */
  .s2BannerItem {
    padding: 2.8vw 3.5vw;
  }

  .s2BannerType {
    font-size: 2.8vw;
  }

  .s2BannerSub {
    font-size: 1.0vw;
  }

  .select02Content {
    padding: 8.5vw 0 0 0;
  }

  .select02Content .sectionLabel.bg-activeScene01 {
    background-image: none;
    background-color: transparent;
    color: #000;
  }

  .select02Content .sectionLabel {
    width: auto;
    height: auto;
    transition: background-image 0.3s;
  }

  .sectionLabelTtl {
    font-family: "oswald", sans-serif;
    font-weight: 100;
    font-size: 4.3vw;
    padding: 0;
    letter-spacing: .2vw;
    text-align: center;
    margin: -7vw 0 6.6vw;
  }

  .sectionLabelTtl span {
    display: block;
    font-size: 2.67vw;
    padding: .5vw 0;

  }

  .sectionLabelTtl span:last-of-type {
    font-size: 1.3vw;
  }

  .select02Content .sectionLabel.bg-warmScene02,
  .select02Content .sectionLabel.bg-warmScene01 {
    background-image: none;
    background-color: transparent;
    color: #000;
    height: auto;


  }

  .select02Header {
    gap: 5.6vw;
    margin-bottom: 3.5vw;
  }

  .select02TypeName {
    font-size: 4.5vw;
  }

  .select02TypeSub {
    font-size: 1.0vw;
  }

  /* シナリオ比較ラベル */
  .select02ScenarioLabel {
    display: flex;
    gap: 1.4vw;
    margin-bottom: 1.4vw;
  }

  .select02ScenarioLabel.spOnly {
    display: none;
  }

  .scenarioCondTitle {
    flex: 1;
    font-size: 1.0vw;
    margin: 0;
    padding: 0.7vw 1.4vw;
    background-color: #e8e6e3;
    text-align: center;
    cursor: pointer;
  }

  .scenarioTab {
    margin: 0 0 4.4vw;
    justify-content: center;
  }

  .scenarioTab li {
    width: 38.54vw;
    height: 12.18vw;
    font-size: 1.425vw;
    padding: .45vw 6vw 0;
    flex-flow: column;
    flex: initial;
    border-radius: 0;
  }

  .scenarioTab li:first-child {
    align-items: flex-end;
  }

  .scenarioTab li:last-child {
    align-items: flex-start;
    margin-top: .5vw;
  }

  .scenarioTab li .tabLiInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    /* padding-bottom: 0.5vw; */
    justify-content: center;
    height: 100%;
  }

  .scenarioTab li.active .tabLiInner {
    border-bottom: 0.1vw solid #000;
  }

  .scenarioTab li .tabLiInner img {
    margin-top: 2vw;
    display: block;
    width: var(--tab-img-w-pc, auto);
  }

  .scenarioThemeTop {
    font-size: 0.9vw;
    line-height: 1.8;
    margin-bottom: .5vw;
    padding: .4vw 0;
    position: relative;
    display: flex;
    height: 3.59vw;
    vertical-align: middle;
    align-items: center;
    justify-content: start;
    font-size: 1.2vw;
    font-family: "oswald", sans-serif;
    font-weight: 100;
  }

  .scenarioThemeTop::before,
  .scenarioThemeTop::after {
    content: '';
    position: absolute;
    left: 0;
    height: 1px;
    background: #000;
  }

  .scenarioThemeTop::before {
    top: 0;
    width: var(--line-top-pc, 100%);
  }

  .scenarioThemeTop::after {
    bottom: 0;
    width: var(--line-bottom-pc, 100%);
  }

  .scenarioThemeTop span {
    display: inline-block;
    width: 22.5vw;
    font-size: 1.56vw;
    margin-right: 6.3vw;
    border-right: 0.1vw solid #000;
    font-weight: 300;
  }

  .scenarioThemeTop img {
    margin-left: auto;
    margin-right: -.5vw;
    /* height: 4.43vw; */
    width: var(--img-w-pc, auto);
  }

  .scenarioThemeBottom {
    font-size: 1.04vw;
    line-height: 2.6vw;
    padding: 2vw 0;
    margin-bottom: 0;
    justify-content: left;
  }

  .scenarioThemeBottom span {
    padding: 0 0.52vw 0 0;
  }

  .scenarioThemeBottom span:first-of-type {
    width: 3.79vw;
  }

  .scenarioThemeBottom span:last-of-type {

    font-size: 1.04vw;
    line-height: 2.6vw;
  }

  .scenarioLayeringTitle {
    font-size: 2.1vw;
    margin-bottom: 2.1vw;
    padding-bottom: 0.7vw;
    border-bottom-width: 0.2vw;
  }

  .scenarioLayerList {
    overflow: visible;
    cursor: initial;
  }

  .productSection {
    overflow: visible;
    position: relative;

  }

  .scenarioLayerRow {
    padding: 0;
    gap: 1.4vw;
    /* height: 78.13vw; */
    height: auto;
    width: 28.89vw;
    align-items: center;
  }

  .scenarioLayerRow:first-child {
    align-items: start;
    width: 22.5vw;
  }

  .scenarioLayerRow:last-of-type {
    border-right: none;
  }

  .scenarioLayerHead {
    width: auto;
    gap: 0.7vw;
    flex-flow: row;
    align-items: center;
    margin: 0 0 3vw;
    height: 4vw;
    flex-shrink: 0;
    min-height: fit-content;
  }

  .scenarioLayerName {
    flex-flow: row;
    font-size: 1.26vw;
    padding: 0 0 0 2.9vw;
  }

  .scenarioLayerName em {
    font-size: .75vw;
    margin-top: 0;
    padding: 0 0 0 1.35vw;
  }

  .scenarioLayerRow .productGrid.singleCol .productCard {
    width: auto;
    height: 10vw;
    margin-bottom: 4vw;
  }

  .scenarioLayerRow .productGrid.singleCol .productCard .productCardBody {
    padding: 0;
    height: 100%;
    position: relative;
    z-index: 2;
  }

  .scenarioLayerRow .productGrid.singleCol {
    gap: 6.4vw;
  }

  .select02ScenarioWrap .productCard {
    flex-flow: row;
    height: 15.52vw;

  }

  .select02ScenarioWrap .productCard .productImgWrap {
    width: 10.94vw;
    margin: 0;
    aspect-ratio: unset;
    overflow: visible;
    justify-content: left;
  }

  .select02ScenarioWrap .productCard .productImgWrap img {
    height: auto;
    width: 79%;
    object-fit: contain;
    max-height: 16vw;
  }

  /* ========================================================= KEEPLIST */
  #keeplistTrigger.spOnly {
    display: none;
  }

  /* #keeplist {
    padding: 5.6vw 7.3vw;
  }

  .keeplistTitle {
    font-size: 4.5vw;
  }

  .keeplistSub {
    font-size: 1.1vw;
  } */

  /* PC：パネルを左からスライド */
  #keeplistPanel {
    left: 0;
    right: auto;
    width: min(400px, 28vw);
    transform: translateX(-100%);
  }

  #keeplistPanel.open {
    transform: translateX(0);
  }

  /* 閉じるボタンを右上に */
  .keeplistPanelClose {
    left: auto;
    right: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
    width: 3vw;
    height: 3vw;
    min-width: 40px;
    min-height: 40px;
  }

  .keeplistPanelInner {
    padding: 3vw 2vw 3vw;
  }

  .keeplistPanelTitle {
    font-size: 1.8vw;
    letter-spacing: 0.2em;
    margin: 0 0 0.5vw;
  }

  .keeplistPanelSub {
    font-size: 0.85vw;
    padding-bottom: 0.8vw;
    width: auto;
    text-indent: 0;
    white-space: normal;
    margin: 0 auto 1.5vw;
  }

  .keeplistEmpty {
    font-size: 0.85vw;
  }

  .keeplistItem {
    gap: 1vw;
    padding: 1.5vw 0;
    width: 88%;
  }

  .keeplistItem img {
    max-width: initial;
    max-height: initial;
    width: 7vw;
    height: 9.5vw;
    object-fit: contain;
  }

  .keeplistItemBody {
    width: auto;
    flex: 1;
  }

  .keeplistItemCode {
    font-size: 0.85vw;
    margin: 0 0 0.3vw;
  }

  .keeplistItemName {
    font-size: .75vw;
    line-height: 1.5;
    margin: 0 0 0.5vw;
  }

  .keeplistItemDelete {
    width: 100%;
    height: 36px;
    font-size: 11px;
    gap: 7px;
  }

  .keeplistItemDelete img {
    width: 14px;
  }

  .keeplistItemDetail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    font-size: 11px;
    background-color: #969181;
    color: #fff;
    border-radius: 3px;
    margin-top: 0.4vw;
    text-decoration: none;
  }

  /* PC トリガーボタン（左下固定） */
  #keeplistTriggerPc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 50;
    background: #000;
    color: #fff;
    border: none;
    padding: 1vw 0 1.5vw 0;
    cursor: pointer;
    writing-mode: vertical-rl;
    border-radius: 0 10px 0 0;
    width: 2.5vw;
    height: 10vw;
    font-size: 0.9vw;
    letter-spacing: 0.1em;
  }

  #keeplistTriggerPc img {
    width: 1vw;
    margin-bottom: 0.5vw;
  }

  /* ========================================================= FOOTER */
  footer {
    padding: 4.17vw 6.46vw 4.17vw 11.46vw;
    width: 88.54vw;
    height: 12.88vw;
    background-color: #747474;
    background-image: none;
  }

  .footerThermal {
    font-size: 0.9vw;
    margin-bottom: 0.7vw;
  }

  .footerNavWarm,
  .footerNavActive,
  .footerNavWear {
    font-size: 1.25vw;
  }

  .footerNav {
    flex-flow: row;
    gap: 5.1vw;
  }

  .footerInner {
    flex-flow: row;
  }

  .footerLogoWrap img {
    width: 10.27vw;
  }

  /* ========================================================= POPUP (PC) */
  .popup {
    display: none;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 50vw;
    height: auto;
    min-height: auto;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transition: none;
  }

  .popup.active {
    display: block;
    transform: translate(-50%, -50%);
  }

  .popup>div {
    padding: 2.8vw;
  }

  .popup .popupInner {
    height: 100%;
    display: grid;
    grid-template-columns: 44% 1fr 1fr;
    grid-template-columns: 33.3% 1fr 1fr;
    gap: 0 2.1vw;
    align-items: start;
    padding: 5.1vw 7.8vw 5.1vw 7.97vw;
  }

  .popup img.popupImg {
    grid-column: 1;
    grid-row: 1 / span 10;
    width: auto;
    max-width: 11.2vw;
    height: auto;
    max-height: 26vw;
    margin: 0;
  }

  .popup .popupTtl {
    grid-column: 2 / span 2;
    font-size: 1.5vw;
    line-height: 1.3;
    padding-bottom: 0.7vw;
    text-align: left;
  }

  .popup .popupName {
    grid-column: 2 / span 2;
    font-size: 0.94vw;
    line-height: 1.3vw;
    border-bottom: none;
    padding-bottom: 0.5vw;
    margin-bottom: 0.5vw;

  }

  .popup p.popupName {
    text-align: left;
    border: none;
    padding: 0.42vw 0 1.72vw;
    margin-bottom: 0;
  }

  .popup .popupDesc {
    width: 15.21vw;
    grid-column: 2 / span 2;
    font-size: 0.85vw;
    line-height: 1.7;
    padding-bottom: 1.4vw;
  }

  .popup .saveToListBtn {
    grid-column: 2;
    padding: 0.7vw 1vw;
    margin-bottom: 0;
    font-size: 0.9vw;
    height: 2.9vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .saveToListBtn img {
    margin: 0 .4vw 0 0;
    width: 1vw;
  }

  .popup .popupBtn {
    grid-column: 3;
    margin-top: 0;
  }

  .popup .popupBtn a {
    background-color: #969181;
    padding: 0.7vw 1.4vw;
    font-size: 0.9vw;
    height: 2.9vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .popup .popupBtn a:first-child {
    background-color: #969181;
  }

  .popup i.closeTabId {
    top: 1vw;
    right: 1vw;
    width: 2.5vw;
    height: 2.5vw;
    background-color: transparent;
    border-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 1.5vw;
  }

  .popup .close i,
  .popup .close b {
    background: #1a1a1a;
  }

}