/* ====================================================
// aroma-chemicals css file
// Created : 2025.10.28
// ==================================================*/

/* ====================================================
// Common
// ==================================================*/
  :root {
    --inner: 70%; /* 中央穴の直径（%） */
  }
    @media only screen and (max-width: 640px) {
      :root {
        --inner: 40%; /* 中央穴の直径（%） */
      }
    }
.g-Area#area-Contents {
  overflow:clip;
}
.g-Section {
  overflow:clip;
}
*:focus {
outline: none;
}
.sp-display {
    display: none;
}
    @media only screen and (max-width: 640px) {
          .pc-display {
              display: none !important;
          }
          .sp-display {
              display:block;
          }
      }

  .aroma h1,
  .aroma h2,
  .aroma h3,
  .aroma h4,
  .aroma a,
  .aroma button,
  .font-bold,
  .detail .head nav ul li a,
  .aroma .contents01 .box .box_s01 p,
  .label-link span
   {
    /* text-box-trim: trim-both;
    text-box-edge: cap alphabetic; */
  }
  .aroma h1,
  .aroma h2,
  .aroma h3,
  .aroma h4,
  .font-bold,
  .aroma .contents01 .box .box_s01 p
  {
    font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
    position: relative;
    top:4px;
  }
  h1 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom:26px;
  }
    @media only screen and (max-width: 640px) {
      h1 {
        font-size: 1.7rem;
        color: #000;
        line-height: 1.2;
      }
    }
        @media only screen and (max-width: 361px) {
          h1 {
            font-size: 1.2rem;
          }
        }
  h2 {
    font-size: 40px;
    line-height: 1.1;
  }
        @media only screen and (max-width: 640px) {
          h2 {
            font-size: 1.9rem;
            line-height: 1.2;
          }
        }
        /* @media only screen and (max-width: 361px) {
          h2 {
            font-size: 3.2rem;
          }
        } */
  p {
    font-size: 14px;
    line-height: 1.7;
    margin: 22px 0 26px 0;
  }
      @media only screen and (max-width: 640px) {
        p {
          font-size: 1.0rem;
          line-height: 1.8;
        }
      }
      /* @media only screen and (max-width: 361px) {
        p {
          font-size: 1.4rem;
        }
      } */
  .flex {
    display: flex;
  }

/* 背景 */
.body-wrap {
  /* overflow: hidden; */
  letter-spacing: 0.08rem;
  background:#EDF1F2;
  background-repeat:repeat;
  background-size:128px 128px; /* 粒感調整はここ */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
}

.font-bold {
  /* position: relative;
  top: 5px; */
    font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
    position: relative;
    top:4px;
}
.indent {
  text-indent: -1em;
  padding-left: 1em;
}

/* 既存ヘッダー下のpadding削除 */
.l-Column.is-gutter--m .l-Column__cols {
    padding-top: 0px;
}

/*▼▼------------
 header
▲▲------------*/
.aroma-header {
  position: relative;
  width: 100%;
}
.aroma-header .image img {
  width:100%;
}
.aroma-header .text {
  position: absolute;
  right:20%;
  top:15%;
}
  @media only screen and (max-width: 640px) {
    .aroma-header .text {
      left:5%;
      top:7%;
    }
    .aroma-header .text {
      left:5%;
    }
    .aroma-header-sp {
      padding:0 24px;
      margin: 7vh 0;
    }
  }

/*▼▼------------
 header-under
▲▲------------*/
.aroma .header-under {
  max-width: 1166px;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  gap:10%;
  padding:150px 0;
}
.aroma .header-under .text h2 {
  margin-top:0;
  margin-bottom: 26px;
}
.aroma .header-under .image img {
  width: 400px;
}
.aroma .header-under .image {
}
  @media only screen and (max-width: 640px) {
    .aroma .header-under {
      width: 100%;
      flex-direction: column;
    }
    .aroma .header-under .text {
      padding:0 5%;
    }
  }

/*▼▼------------
 contents01
▲▲------------*/
.aroma .contents01 {
  border-top: #282828 1px solid;
  border-bottom: #282828 1px solid;
}
.aroma .contents01 .inner {
    max-width: calc(100% - 180px);
    margin: 0 auto;
    border-left: #282828 1px solid;
    border-right: #282828 1px solid;
    flex-direction: column;
}
.aroma .contents01 .ttl {
    padding:0 14px;
    height: 114px;
    align-items: center;
}
.aroma .contents01 .ttl h3 {
  font-size: 26px;
  line-height: 1.4;
}
.aroma .contents01 .box-wrap {
  display: flex;
  align-items: stretch;
}
.aroma .contents01 .box {
    border-top: #282828 1px solid;
    border-right: #282828 1px solid;
    padding:14px;
    font-size: 40px;
    width: calc(100% / 3);
    display: flex;
}
.aroma .contents01 .box .num p {
    font-size: 26px;
    line-height: 1.4;
    white-space: nowrap;
}
.aroma .contents01 .box.last {
    border-right:none;
}
    @media only screen and (max-width: 640px) {
      .aroma .contents01 .box.last {
            border-right: #282828 1px solid;
      }
    }
.aroma .contents01 .box .box_swrap {
  display: flex;
  flex-direction: column;
  height: 100%; /* .boxの高さいっぱいまで伸ばす */
}
.aroma .contents01 .box .box_s01 p {
  margin: 0;
}
/* 既存の .box_s02{ flex-grow:1; } を打ち消す（画像側にも効くのを防ぐ） */
.aroma .contents01 .box .box_s02 {
  flex: 0 0 auto;         /* ←一旦リセット */
  display: flex;          /* ←これで内部をflex化 */
  align-items: flex-start; /* ←縦方向の上揃え */
  justify-content: flex-start; /* 念のため横方向も左揃え */
}
.aroma .contents01 .box .box_s02 p {
  margin-top: 27px;
}
/* 最後の子（=画像ブロック）を底に固定 */
.aroma .contents01 .box .box_swrap > :last-child{
  margin-top:auto;        /* これで常に下へ */
  flex: 0 0 auto;         /* 画像側は伸びない */
}
.aroma .contents01 .box .num {
  padding-top: 25px;
}
.aroma .contents01 .box .text01 {
  margin-top: 0px;
  margin-bottom: 0;
  font-size: 26px;
  line-height: 1.4;
}
.aroma .contents01 .box img {
  width: 100%;
  height: auto;
  display: block;
}

.aroma .contents01 .under {
  height: 86px;
  border-top: #282828 1px solid;
}

/* fadeI */
.fadeI {
    opacity: 0;
}
.fadeI.is-animated.fadeI_01 {
    opacity: 0;
    animation: animeI ease forwards 1.4s;
}
.fadeI.is-animated.fadeI_02 {
    opacity: 0;
    animation: animeI ease forwards 1.4s 250ms;
}
.fadeI.is-animated.fadeI_03 {
    opacity: 0;
    animation: animeI ease forwards 1.4s 500ms;
}
    @media only screen and (max-width: 640px) {
      .fadeI {
          opacity: 1;
      }
      .fadeI.is-animated.fadeI_01 {
          opacity: 1;
          animation:none;
      }
      .fadeI.is-animated.fadeI_02 {
          opacity: 1;
          animation:none;
      }
      .fadeI.is-animated.fadeI_03 {
          opacity: 1;
          animation:none;
      }
    }
@keyframes animeI {
    to  {
        opacity: 1;
   } 
 }
/* △fadeI */
    @media only screen and (max-width: 640px) {
      .aroma .contents01 {
      }
      .aroma .contents01 .inner {
          width: 100%;
          max-width: 100%;
          position: relative;
          z-index: 3;
          border-right: none;
          border-left: none;
      }
      .aroma .contents01 .ttl {
          height: 64px;
          padding:0 24px;
          position: sticky;
          top: 0;
          z-index: 2;
          border-top: #282828 1px solid;
          border-bottom: #282828 1px solid;
          background:#EDF1F2;
          background-repeat:repeat;
          background-size:128px 128px; /* 粒感調整はここ */
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
      }
      .aroma .contents01 .ttl h3 {
          font-size: 1.2rem;
      }
      .aroma .contents01 .box-wrap {
          flex-direction: column;
      }
      .aroma .contents01 .box {
          padding:0;
          border-top:0;
          width: 100%;
      }
      .aroma .contents01 .box-wrap .box_s01 {
          display: flex;
          align-items: center;
          padding: 0;
      }
      .aroma .contents01 .box-wrap .box_s01.s01Border {
          border-top: #282828 1px solid;
      }
      .aroma .contents01 .box-wrap .box_s01 .num {
          flex: 0.8;
          font-size: 1.8rem;
          border-right: #282828 1px solid;
          padding: 10px 0;
      }
      .aroma .contents01 .box-wrap .box_s01 .num p {
          padding-left:24px;
          margin: 0;
          font-size: 1.6rem;
      }
      .aroma .contents01 .box-wrap .box_s01 .text01 {
          flex: 2;
          font-size: 1.2rem;
          margin: 0;
          padding-left: 5%;
      }
      .aroma .contents01 .box-wrap .box_s02 {
          display: flex;
          flex-direction: row;
          border-top: #282828 1px solid;
          padding: 0;
      }
      .aroma .contents01 .box-wrap .box_s02 .box_s03 {
          flex: 0.8;
      }
      .aroma .contents01 .box-wrap .box_s02 div img {
          width: 100%;
      }
      .aroma .contents01 .box-wrap .box_s02 p {
          flex: 2;
          border-left: #282828 1px solid;
          padding: 5% 0 5% 5%;
          margin: 0;
      }
      .aroma .contents01 .box-wrap .box_s02 p span {
          padding-right:5%;
          display: block;
      }
    }
        /* @media only screen and (max-width: 361px) {
          .aroma .contents01 .ttl h3 {
              font-size: 1.6rem;
          }
        } */

/*▼▼------------
 contents02 circle-map
▲▲------------*/

.aroma .contents02 {
    max-width: 85%;
    margin: 0 auto;
}
    @media only screen and (max-width: 640px) {
      .aroma .contents02 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20vw;
      }
    }
.aroma .contents02 .ttl {
}
  @media only screen and (max-width: 640px) {
    .aroma .contents02 .ttl {
          position: sticky;
          top: 0;
          z-index: 3;
          padding:6px 24px;
          border-bottom: #282828 1px solid;
          margin-bottom: 140px;
          background:#EDF1F2;
          background-repeat:repeat;
          background-size:128px 128px; /* 粒感調整はここ */
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
    }
  }
.aroma .contents02 .ttl h3 {
  font-size: 26px;
  line-height: 1.4;
  margin-top: 75px;
  margin-bottom:75px;
}
  @media only screen and (max-width: 640px) {
    .aroma .contents02 .ttl h3 {
      font-size: 1.2rem;
      margin:1em 0;
    }
  }
    /* @media only screen and (max-width: 361px) {
      .aroma .contents02 .ttl h3 {
        font-size: 1.6rem;
      }
    } */
/* 下から表示 */
.fadeC {
    opacity: 0;
}
.fadeC.is-animated {
    opacity: 0;
    animation: animeC forwards 1.0s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes animeC {
    from {
        opacity: 0;
        transform: translateY(50px);
    } 
    to  {
        opacity: 1;
        transform: translateY(0);
   } 
 }
  @media only screen and (max-width: 640px) {
    .fadeC.animenone_sp {
        opacity: 1;
    }
    .fadeC.animenone_sp.is-animated {
      opacity: 1;
      animation: none;
    }
  }
/*
 ▼circle-map 
*/
  .circle-map {
    margin:0 auto;
    max-width: 540px;
    width: 70%;
    position: relative;
  }
    @media only screen and (max-width: 640px) {
        .circle-map {
            width: 100%;
        }
    }
    
  .ring{
        width:100%;
        aspect-ratio:1/1;
        position:relative;
  }
    @media only screen and (max-width: 640px) {
        .ring {
        width:70%;
        margin: 0 auto;
        aspect-ratio:2/1.4
        }
    }
  .ring .center {
    font-size: 26px;
    line-height: 1.4;
    font-family: "Neue-Helvetica-Paneuropean", sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  @media only screen and (max-width: 640px) {
      .ring .center {
        font-size: 1.2em;
        line-height: 1.0;
      }
  }
  /* 下から表示 */
  .fadeH {
      opacity: 0;
  }
  .fadeH.is-animated {
      opacity: 0;
      animation: animeH forwards 1.0s 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes animeH {
      from {
          opacity: 0;
          transform: translate(-50%, 0%);
      } 
      to  {
          opacity: 1;
          transform: translate(-50%, -50%);
    } 
  }

/* ▽アニメーションで表示(bg-layerで画像を配置) */
/* レイヤ共通：初期は透明 */
.bg-layer{
  position:absolute; inset:0;
  background-position:center; background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:0; transition:opacity .6s ease;
  pointer-events:none; z-index:1;
    width:100%; aspect-ratio:1/1;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center, center, center;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    margin: 0 auto;
}
    @media only screen and (max-width: 640px) {
      .bg-layer{
        width: 70%;
      }
    }
/* 画像割当（PC） */
.bgA{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleA.png"); }
.bgB{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleB.png"); }
.bgC{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleC.png"); }
.bgD{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleD.png"); }
.bgE{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleE.png"); }
.bgF{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleF.png"); }

.ring.fadeB.is-animated .bgA{ opacity: 0; animation: animeB_circle ease-in forwards 0s 0ms; }
.ring.fadeB.is-animated .bgB{ opacity: 0; animation: animeB_circle ease-in forwards 0s 110ms; }
.ring.fadeB.is-animated .bgC{ opacity: 0; animation: animeB_circle ease-in forwards 0s 220ms; }
.ring.fadeB.is-animated .bgD{ opacity: 0; animation: animeB_circle ease-out forwards 0s 330ms; }
.ring.fadeB.is-animated .bgE{ opacity: 0; animation: animeB_circle ease-out forwards 0s 440ms; }
.ring.fadeB.is-animated .bgF{ opacity: 0; animation: animeB_circle ease-out forwards 0s 550ms; }
@keyframes animeB_circle {
    to  {
        opacity: 1;
   } 
 }
/* SPで別画像にしたい場合（任意） */
@media (max-width:640px){
  .bgA{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleA_sp.png"); }
  .bgB{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleB_sp.png"); }
  .bgC{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleC_sp.png"); }
  .bgD{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleD_sp.png"); }
  .bgE{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleE_sp.png"); }
  .bgF{ background-image:url("/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/circleF_sp.png"); }
}
/* モーション削減配慮 */
@media (prefers-reduced-motion: reduce){
  .bg-layer{ transition:none; }
  .ring.fadeB .bgA,
  .ring.fadeB .bgB,
  .ring.fadeB .bgC,
  .ring.fadeB .bgD,
  .ring.fadeB .bgE,
  .ring.fadeB .bgF{ transition-delay:0ms; }
}
/* △.bg-layer */

/* 透明のクリック扇形（6分割） */
  .seg{ position:absolute; inset:0; display:block; text-decoration:none; }

  /* 中央のクリック遮断フタ */
  .center-blocker{
    position:absolute; left:50%; top:50%;
    width:var(--inner); height:var(--inner); transform:translate(-50%,-50%);
    border-radius:50%; background:transparent;
  }

  /* テキストラベル（クリック可） */
.labels{ position:absolute; inset:0; pointer-events:none; }
.label-link{
  font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  text-decoration:none;
  color:#263238;
  font-weight:700;
  font-size:clamp(12px, 2.2vw, 18px);
  text-shadow:0 0 6px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9);
  display:inline-flex; align-items:center; gap:.4em;
}
@media only screen and (max-width: 640px) {
    .label-link {
      transform:unset;
    }
}
.label-link.active,
.label-link:hover,
.label-link:focus-visible{
  text-decoration:none;
  font-family: "Neue-Helvetica-Paneuropean-bold", sans-serif;
}
 /* fadeD */
.fadeD .label-link {
      opacity: 0;
 }
  .fadeD.is-animated .label-link.fadetime01 {
    animation: labelsAnime ease forwards 0s 0ms;
}
  .fadeD.is-animated .label-link.fadetime02 {
    animation: labelsAnime ease forwards 0s 110ms;
}
  .fadeD.is-animated .label-link.fadetime03 {
    animation: labelsAnime ease forwards 0s 220ms;
}
  .fadeD.is-animated .label-link.fadetime04 {
    animation: labelsAnime ease forwards 0s 330ms;
}
  .fadeD.is-animated .label-link.fadetime05 {
    animation: labelsAnime ease forwards 0s 440ms;
}
  .fadeD.is-animated .label-link.fadetime06 {
    animation: labelsAnime ease forwards 0s 550ms;
}
@keyframes labelsAnime {
    to  {
        opacity: 1;
   } 
 }

/* ▽テキストアンダーバー */
  .label-link {
    z-index: 2;
  }
  /* テキスト部分（span）に下線用の器を作る */
  .label-link span{
  display: inline-block;
  transform: translateY(3px);
  line-height: 1;
}

  /* 伸びる下線（最初は幅0：scaleX(0)） */
  .label-link span::after{
    content:"";
    position: absolute;
    left: 0; bottom: -0.18em;          /* 下線のオフセット */
    width: 100%; height: 1px;          /* 線の太さ */
    background: currentColor;          /* 文字と同色 */
    transform: scaleX(0);              /* 幅0 */
    transform-origin: left;            /* 左から伸びる */
    transition: transform .5s ease;   /* 伸びアニメ */
  }

  /* hover / active で線をフル幅（scaleX(1)）へ */
  .label-link:hover span::after,
  .label-link:focus-visible span::after,
  .label-link.active span::after{
    transform: scaleX(1);
  }
/* △テキストアンダーバー */

/* 矢印画像のサイズは必要に応じて */
.arrow-img{ width:clamp(14px,2.2vw,18px); height:auto; display:inline-block; }
  /* ラベルの配置（必要に応じて微調整してOK） */
  .lab0{ right:-30px; top:5%;  }   /* FLORAL    */
  .lab1{ right:-180px; top:50%; }   /* AMBERY    */
  .lab2{ right:-35px; bottom:2%; }   /* WOODY     */
  .lab3{ left:65px; bottom:2%; }   /* GREEN     */
  .lab4{ left:-85px; top:50%;  }   /* ALDEHYDIC */
  .lab5{ left:75px;  top:5%; }   /* FRUITY    */
    @media only screen and (max-width: 640px) {
    .lab0{ right:2%; top:0;  }   /* FLORAL    */
    .lab1{ right:2%; top:40%; }   /* AMBERY    */
    .lab2{ right:2%; bottom:15%; }   /* WOODY     */
    .lab3{ left:2%; bottom:15%; }   /* GREEN     */
    .lab4{ left:2%; top:40%;  }   /* ALDEHYDIC */
    .lab5{ left:2%;  top:0; }   /* FRUITY    */
    }
  /* アクセシビリティ：Tab移動時に扇形の輪郭（最小限） */
  .seg:focus-visible{ outline:2px dashed #111; outline-offset:6px; border-radius:50%; }
  /* スマホ版アンダー矢印 */
  @media only screen and (max-width: 640px) {
    .label-link {
      font-size:0.9rem;
    }
    .label-link .arrow01 {
        position: relative;
    }
    .label-link span::after {
        left:unset;
        background:unset;
        transform:unset;
        transform-origin:unset;
        transition:unset;
        content: "";
        position: absolute;
        right: 0;
        bottom: -1.2em;
        width: 25svw;
        height: 13px;   
        background-image:url(/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/under_yajirushi01.svg);
        background-repeat: no-repeat;

    }
    .arrow02 {
        position: relative;
    }
    .label-link span.arrow02::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -1.2em;
        width: 19svw;
        height: 13px;   
        background-image:url(/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/under_yajirushi02.svg);
        background-repeat: no-repeat;
    }
    .arrow03 {
        position: relative;
    }
    .label-link span.arrow03::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1.2em;
        width: 25svw;
        height: 13px;   
        background-image:url(/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/under_yajirushi03.svg);
        background-repeat: no-repeat;
    }
    .arrow04 {
        position: relative;
    }
    .label-link span.arrow04::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1.2em;
        width: 19svw;
        height: 13px;   
        background-image:url(/content/dam/sites/kao/chemical-kao-com/global/fragrance-aroma-chemicals/under_yajirushi04.svg);
        background-repeat: no-repeat;
    }
  }
      /* @media only screen and (max-width: 361px) {
      .label-link {
        font-size:0.8rem;
      }
      } */


/*
 ▽circle-map 写真切り替え 
*/
/* フェード用のオーバーレイ（on画像）を疑似要素で用意 */
/* .ring{ position:relative; } */
/* ラベルは前面に（必要なら） */
/* .labels{ z-index:3; position:absolute; inset:0; pointer-events:none; }
.labels .label-link{ pointer-events:auto; } */
/* クリック当たり判定は背面寄り */
/* .seg{ z-index:1; position:absolute; inset:0; } */
/* on画像を1枚だけ重ねる器。URLはCSS変数で受け取る */
.ring::before{
  content:"";
  position:absolute; inset:0;
  background: center / 100% 100% no-repeat var(--on-img, none); /* ← on画像URLを入れる */
  opacity:0;                     /* 初期は非表示 */
  transition: opacity .5s ease; /* フェード時間 */
  pointer-events:none;
  z-index:2;                     /* .seg の上、.labels の下でもOK。必要に応じて調整 */
}
/* JSで .show-on を付けるとフェードイン */
.ring.show-on::before{ opacity:1; }
/*
 △circle-map 写真切り替え
------------*/

/*
 ▲circle-map
------------*/
/*
 ▲▲contents02 circle-map
------------*/


/*▼▼------------
 パララックス
▲▲------------*/
/* “貼り付き”の尺（長さ）。長く見せたいなら 240svh などに */
.wrap.pin {
  position: relative;
  /* height: 220svh;         ←お好みで 180〜300svh くらいに調整 */
  isolation: isolate;     /* 子の z-index を切り分け */
}
/* 画像の“窓”：画面に貼り付け（固定） */
.wrap.pin .para-image {
  position: sticky;
  top: 0;
  /* height: var(--vh);      1画面ぶんで固定 */
  overflow: hidden;
  z-index: 0;             /* テキストより後ろ */
    aspect-ratio: 16/9;      /* ← これを付けると「vh」よりも aspect-ratio 優先で高さが決まる */
    height: auto;            /* aspect-ratio を効かせるため */
}
/* 画像は窓いっぱいにフィット */
.wrap.pin .para-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none !important;   /* 念のため、過去のtransform影響を遮断 */
  will-change: auto;
  /* 被写体が上や下に寄っているなら object-position を調整 */
  object-position: 50% 40%;  /* やや上寄せ。被写体に合わせて 30〜50% で微調整 */
}
/* 画像の上に薄い黒をかけたい場合（任意） */
.wrap.pin .pin-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
}
/* 画像の上に重ねる大きめ見出し（最初にフワッと表示） */
.wrap.pin {
  position: relative;
  /* height: 240svh; */
  /* top: 0; */
  z-index: 3;
  text-align: center;
  padding: 0;
  overflow: visible;
}
/* 本文パネル */
.wrap.pin .pin-panel {
  position: relative;
  z-index: 2;
  text-align: left;
  padding:0 24px 80px 24px;
  margin-top: 0;
  /* 背景 */
  background:#EDF1F2;
  background-repeat:repeat;
  background-size:228px 228px; /* 粒感調整はここ */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ダークな背景でも読みやすいように、前後の余白を確保 */
/* .wrap.pin + * { position: relative; z-index: 1; } */
.wrap.pin .pin-panel h2 {
  padding-top: 20vw;
  margin-top:0;
}
      @media only screen and (max-width: 361px) {
        .wrap.pin .pin-panel h2 {
          /* margin-top:60px; */
        }
      }
/*▼▼------------
 detail
▲▲------------*/
.detail {
  margin-top:200px;
  border-bottom: #282828 1px solid;
}
.detail .head-top {
  border-top: #282828 1px solid;
  height: 5px;
}
.detail .head {
  position: sticky;
  top:0;
  z-index: 2;
  background:#EDF1F2;
  background-repeat:repeat;
  background-size:228px 228px; /* 粒感調整はここ */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  border-top: #282828 1px solid;
  border-bottom: #282828 1px solid;
  align-items: stretch;
  height: 70px;
}
.detail .category-wrap .sp-menu {
  position: sticky;
  top:51px;
  z-index: 1;
  background:#EDF1F2;
  background-repeat:repeat;
  background-size:228px 228px; /* 粒感調整はここ */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  /* border-top:#282828 1px solid; */
  border-bottom: #282828 1px solid;
  align-items: stretch;
  height: 51px;
}
  @media only screen and (max-width: 640px) {
  .detail {
    margin-top: 140px;
  }
  .detail .head {
      flex-direction: column;
      height: auto;
    }
  }
.detail .head .ttl {
  width: 50%;
  padding-left: 54px;
  display: flex;
  align-items: center;
}
.detail .head .ttl h2 {
  font-size: 23px;
  margin: 0;
}
.detail .category-wrap .sp-menu h3 {
  margin: 0;
}
  @media only screen and (max-width: 640px) {
    .detail .category-wrap {
      border-top: #282828 1px solid;
    }
    .detail .category-wrap.first {
      border-top: none;
    }
    .detail .head .ttl {
      width: 100%;
      justify-content: center;
      /* border-bottom: #282828 1px solid; */
      padding-left:0;
      height: 51px;
    }
   .detail .head .ttl h2 {
      font-size: 1.2rem;
      padding: 14px 0;
     }
    .detail .category-wrap .sp-menu {
      width: 100%;
      padding-left:0;
      height: 51px;
    }
    .detail .category-wrap .sp-menu .flex {
      justify-content: center;
      height: 51px;
    }
   .detail .category-wrap .sp-menu h3 {
      font-size: 1.2rem;
      padding: 14px 0;
      line-height: 1.2;
     }
  }
.detail .head nav {
}
.detail .head nav ul {
  list-style: none;
  font-size: 1vw;
  height: 100%;
  margin: 0;
  padding: 0;
}
  @media only screen and (max-width: 640px) {
    .detail .head nav {
      margin: auto;
    }
    .detail .head nav ul {
      font-size: 0.8rem;
      row-gap: 8px;
      flex-wrap: wrap;
      padding-inline-start: 0;
    }
  }
.detail .head nav ul li:first-child {
    border-left: #282828 1px solid;
}
  @media only screen and (max-width: 640px) {
    .detail .head nav ul li:nth-child(4) {
          /* border-left: #282828 1px solid; */
    }
  }
.detail .head nav ul li {
  padding-right:1vw;
  padding-left:1vw;
  border-right: #282828 1px solid;
  display: flex;
  align-items: center;

}
.detail .head nav ul li:last-child {
  border-right:none;
}
  @media only screen and (max-width: 640px) {
    .detail .head nav ul li {
      padding-left: 5px;
      padding-right:5px;
      box-sizing: border-box;
    }
    .detail .head nav ul li:first-child {
      border-left:none;
    }
    .detail .head nav ul li:last-child {
      border-right: #282828 1px solid;
    }
  }

.detail .head nav ul li a {
  color: #999999;
  text-decoration:none;
  position: relative;
  font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
  top:7px;
}
  @media only screen and (max-width: 640px) {
    .detail .head nav ul li a {
      padding: 0 10px;
      top:2px;
      line-height: 1;
    }
  }
.detail .head nav ul li a:hover,
.detail .head nav ul li a.current
 {
  /* text-decoration:underline; */
  color: #000000;
}
.detail .head nav ul li a:hover::before,
.detail .head nav ul li a.current::before
 {
  content: '';
  position: absolute;
  top:-14px;
  left: 40%;
  background-color: #FFF;
  width: 0.6vw;
  height: 0.6vw;
  border-radius: 50%;
  display: inline-block;
  border: solid 1px #000000;
  vertical-align: bottom;
}
  @media only screen and (max-width: 640px) {
    .detail .head nav ul li a:hover
    {
      /* text-decoration:underline; */
      color: inherit;
      color: #999999;
    }
  .detail .head nav ul li a:hover::before {
    content:unset;
  }
  .detail .head nav ul li a.current {
    color: #000000;
  }
  .detail .head nav ul li a.current::before
    {
      content: '';
      top:-1px;
      left: -0.1em;
      width: 8px;
      height: 8px;
    }
  }
  .circle {
        background-color: #FFF;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        border: solid 1px #000000;
        vertical-align:middle;
        margin-right: 9px;
  }
.detail .head nav ul li.floral a:hover::before,
.detail .head nav ul li.floral a.current::before,
.circle.floral
 {
  background-color: #CDAEB2;
 }
.detail .head nav ul li.ambery a:hover::before,
.detail .head nav ul li.ambery a.current::before,
.circle.ambery
 {
  background-color: #DEAE98;
 }
.detail .head nav ul li.woody a:hover::before,
.detail .head nav ul li.woody a.current::before,
.circle.woody
 {
  background-color: #999966;
 }
.detail .head nav ul li.green a:hover::before,
.detail .head nav ul li.green a.current::before,
.circle.green
 {
  background-color: #769b8a;
 }
.detail .head nav ul li.aldehydic a:hover::before,
.detail .head nav ul li.aldehydic a.current::before,
.circle.aldehydic
 {
  background-color: #dce3e3;
 }
.detail .head nav ul li.fruity a:hover::before,
.detail .head nav ul li.fruity a.current::before,
.circle.fruity
 {
  background-color: #e3d4b0;
 }

.detail .con {
  align-items: flex-start;
}
.detail .con.top-border {
  border-top: #282828 1px solid;
}
    @media (max-width:640px){
      .detail .con.top-border {
        border-top: none;
      }
    }
.detail .con .menu {
  width: 300px;
  position: sticky;
  top: 70px;
}

.detail .con .menu nav {
  /* position: sticky;
  top:50px; */
  text-align: center;
}

.detail .con .menu nav ul {
  list-style: none;
  padding-left:0;
  margin: 0;
}
.detail .con .menu nav ul li {
  border-bottom: #282828 1px solid;
  /* padding-left: clamp(0px, (100vw - 1166px) / 2, 9999px); */
  text-decoration: none;
  font-size: 23px;
  height: 70px;
  display: flex;
  padding-left: 30px;
  justify-content:flex-start;
  align-items: center;
}
@media (max-width:640px){
  .anchor {
     /* scroll-margin-top: 120px; */
    height: 100px;         /* ← ヘッダーと同じ高さ */
    margin-top: -100px;    /* ← 上方向に引き戻す */
    pointer-events: none;  /* ← クリック不可にして邪魔しない */  }
}
.detail .con .products-wrap {
  width: 70%;
  overflow: hidden;
  border-left: #282828 1px solid;
}
.detail .con .products-wrap .products-box {
  padding-top:70px;
  padding-bottom:140px;
  flex-wrap: wrap;
  width: 100%;
  padding-left:60px;
  /* padding-right: clamp(0px, (100vw - 1166px) / 2, 9999px); */
  justify-content:flex-start;
  column-gap: 20px;
  row-gap:50px;
}
    @media only screen and (max-width: 640px) {
      .detail .con .products-wrap {
        width: 100%;
      }
      .detail .con .products-wrap .products-box {
        /* border-top: #282828 1px solid; */
        width: 100%;
        padding:0;
        column-gap: 0;
        row-gap:0;
        scroll-margin-top: 120px;
      }
    }
.detail .con .products-wrap .products-box .products {
  width: 29%;
}
.detail .con .products-wrap .products-box .products a {
  text-decoration: none;
  color: #000000;
}
.detail .con .products-wrap .products-box .products a:hover {
  color:#008373;
}
.detail .con .products-wrap .products-box .products a:hover img {
  filter: brightness(75%);
}
.detail .con .products-wrap .products-box .products a .image {
  line-height: 0;
}
    @media only screen and (max-width: 640px) {
      .detail .con .products-wrap .products-box .products {
        width: calc(50% - 1px);
        border-top: #282828 1px solid;
        border-right: #282828 1px solid;
      }
      .detail .con .products-wrap .products-box .products:nth-of-type(1),
      .detail .con .products-wrap .products-box .products:nth-of-type(2) {
        border-top: none;
      }
      .detail .con .products-wrap .products-box .products:last-child {
        /* border-bottom: none; */
      }
      .detail .con .products-wrap .products-box .products:nth-child(even):nth-last-child(2) {
        border-bottom: #282828 1px solid;
      }
      .detail .con .products-wrap .products-box .products .image {
        line-height: 0;
        border-bottom: #282828 1px solid;
      }
    }
.detail .con .products-wrap .products-box .products .text {
  margin:12px 0;
  border-left: #282828 1px solid;
  font-family: "Neue-Helvetica-Paneuropean", sans-serif;
}
/* .detail .con .products-wrap .products a:hover .text div.ttl {
  text-decoration: underline;
  color:#008397;
} */
.detail .con .products-wrap .products-box .products .text div.ttl {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: #282828 1px solid;
  line-height: 1.2;
}
.detail .con .products-wrap .products-box .products .text div.cas {
  font-size: 14px;
  padding-left: 10px;
  padding-top: 8px;
  line-height: 1.3;
}
.detail .con .products-wrap .products-box .products a .text div.cas:hover {
  text-decoration: none;
}
.detail .con .products-wrap .products-box .products .text div.cas .sp-block03 {
  font-family: "Neue-Helvetica-Paneuropean-Light", sans-serif;
}
    @media only screen and (max-width: 640px) {
      .detail .con .products-wrap .products-box .products .text {
        border: unset;
        padding: 16px 5% 21px 5%;
        margin: 0;
        height: auto;
      }
      .detail .con .products-wrap .products-box .products:nth-child(odd) .text {
      }
      .detail .con .products-wrap .products-box .products .text div.ttl {
        font-size: 1.0rem;
        padding-left: 0;
        padding-bottom: 2px;
        line-height: 1.1;
      }
      .detail .con .products-wrap .products-box .products .text div.cas {
        font-size: 1.0rem;
        padding:0;
        line-height: 1.1;
      }
      .detail .con .products-wrap .products-box .products .text div.cas .sp-block01 {
        display: block;
        border-bottom: #282828 1px solid;
        padding-top: 8px;
        padding-bottom: 2px;
      }
      .detail .con .products-wrap .products-box .products .text div.cas .sp-block03 {
        display: block;
        padding-top: 8px;
      }
    }
.detail .con .products-wrap .products img {
  width: 100%;
  border:1px solid #000000;
}
    @media only screen and (max-width: 640px) {
      .detail .con .products-wrap .products img {
        width: 100%;
        border: none;
      }
    }

    
/*▼▼------------
 contact
▲▲------------*/
.contact {
  margin-top: 120px;
}
.contact a {
  color: #000000;
  margin-bottom: 230px;
  position: relative;
  top: 4px;
}
.contact div a.button:hover {
  /* text-decoration: underline; */
  background-color: #008373;
  color: #FFF;
}
.contact div {
  justify-content: center;
}
.contact .button {
  background-color: #00AE8D;
  width: 340px;
  padding:10px;
  border-radius: 30px;
  border: 0;
  font-size: 26px;
  text-align: center;
  text-decoration: none;
}
.contact a span {
  position: relative;
  top: 4px;
}
    @media only screen and (max-width: 640px) {
      .contact .button {
        width:80vw
      }
    }

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼------------

products

▲▲▲▲▲▲▲▲▲▲▲▲▲▲------------*/

/*▼▼------------
 contents01 products
▲▲------------*/
/* 1階層目ページのcss初期化 */
.contents01.products .box {
  padding:0;
  display: block;
  border: none;
}
.contents01.products .box-wrap {
  margin-top:70px;
  border-top: #282828 1px solid;
}
.contents01.products .box .box_swrap {
    height: auto;
}
.contents01.products .box .box_swrap > :last-child {
  margin-top: 0;
  flex:none
}

/* layout01 */
/* left */
.contents01.products .box.left {
  width: 30%;
  flex-direction: column;
  display: flex;
  border-right: #282828 1px solid;
}
.contents01.products .box.left .box_swrap {
    flex-direction:column;
}
.contents01.products .box.left .box_s02 {
  padding:14px;
  flex-direction: column;
}
.contents01.products .box.left .box_swrap.layout01 .box_s02 {
  border-top: #282828 1px solid;
}
.contents01.products .box.left .box_s02 p {
  width: 100%;
  margin-bottom: 0;
}
.contents01.products .box.left .box_s02 p.border {
  border-bottom: #282828 1px solid;
  margin-top:0;
}
.contents01.products .box.left .box_s02 p.border:first-child {
  font-size: 26px;
  font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
}
.contents01.products .box.left .box_s02 p.border:last-child {
  padding:22px 0 20px 0;
}
.contents01.products .box.left .box_s02 p.border:first-child span {
  position: relative;
  top:4px;
}
.contents01.products .box.left .box_s02 p.text {
  margin-top:0px;
  font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
  line-height: 1.5;
}

/* right */
.contents01.products .box.right {
  width: 70%;
  padding-top: 60px;
}
.contents01.products .box.right .box_swrap {
  width: 90%;
  flex-direction: row;
  justify-content:flex-start;
  margin: 18px auto 70px auto;
  gap: 45px;
}
.contents01.products .box.right .box_swrap .box_s.left {
  width: calc((100% - 45px) / 2);
}
.contents01.products .box.right .box_swrap .box_s.right {
  width: calc((100% - 45px) / 2);
}
.contents01.products .box.right .box_swrap.layout02 .box_s.left {
  width: auto;
}
.contents01.products .box.right .box_swrap.layout02 .box_s.right {
    width: auto;
}
.contents01.products .box.right .box_swrap .box_s .box_ss {
  width: 100%;
}
.contents01.products .box.right .box_swrap .box_s .box_ss .image {
    margin-top:20px;
}
.contents01.products .box.right .box_swrap.layout01b .box_s .box_ss .image a {
  text-decoration: none;
  color: #000000;
}
.contents01.products .box.right .box_swrap.layout01b .box_s .box_ss .image a:hover {
  text-decoration: underline;
}
.contents01.products .box.right .box_swrap.layout01b .box_s .box_ss .image p {
  font-size: 14px;
  line-height: 1.5;
}
.contents01.products .box.right .box_swrap.layout01b .box_s .box_ss .image img {
  width: 12px;
  display: inline;
}
.contents01.products .box.right .box_swrap .ttl {
  font-size: 16px;
  border-top: #282828 1px solid;
  border-bottom: #282828 1px solid;
  padding:12px 0 12px 0;
  line-height: 1.4;
  height: auto;
  font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
}
.contents01.products .box.right .box_swrap .ttl span {
}
.contents01.products .box.right .box_swrap .text {
  font-size: 14px;
  padding:10px 0 8px 0;
  border-bottom: #282828 1px solid;
  line-height: 1.3;
}
.contents01.products .box.right .box_swrap .text div:first-child {
  width: 35%;
}
.contents01.products .box.right .box_swrap .text div:nth-of-type(n+2) {
  width: 5%;
}
.contents01.products .box.right .box_swrap .text div:nth-of-type(n+3) {
  width: 55%;
}
.contents01.products .box .box_swrap .box_ss .ttl span.height {
  position: relative;
  top: 4px;
}
.contents01.products .box .box_swrap .box_ss .ttl span.height.small {
  font-size: 11px;
  font-family: "Neue-Helvetica-Paneuropean-Light", sans-serif;
}

    @media only screen and (max-width: 640px) {
      .contents01.products .box-wrap {
        border-top: none;
        margin-top: 0;
      }
      .contents01.products .box.left {
        width: 100%;
      }
      .contents01.products .box.left .box_swrap {
        flex-direction: row;
      }
      .contents01.products .box.left .box_s01 {
        width: 45%;
        border-right: #282828 1px solid;
        border-bottom: #282828 1px solid;
      }
      .contents01.products .box.left .box_s02 {
        padding: 0;
        width: 55%;
      }
      .contents01.products .box.left .box_swrap.layout01 .box_s02 {
        border-top:none;
        border-bottom: #282828 1px solid;
      }
      .contents01.products .box.left .box_s02 p {
        flex: none;
      }
      .contents01.products .box.left .box_s02 p.border {
        padding-top:8px;
        padding-bottom:10px;
      }

      .contents01.products .box.right {
        width: 100%;
      }
      .contents01.products .box .box_swrap {
        flex-direction: row;
      }
      .contents01.products .box.right .box_swrap {
        margin-bottom: 0;
      }
      .contents01.products .box .box_s02 {
        padding: 0;
      }
      .contents01.products .box.left .box_s02 p {
        margin-bottom: 0;
        border-left:none;
      }
      .contents01.products .box.left .box_s02 p.border {
        border-bottom: #282828 1px solid;
        margin-top:0;
      }
      .contents01.products .box.left .box_s02 p.text {
        margin-top:0px;
        padding:0;
      }
      .contents01.products .box.left .box_s02 p.text span {
        padding:25px 25px 0 25px;
      }
      .contents01.products .box.left .con02 .box_s02 {
        border-top: 0;
        width: 100%;
      }
      .contents01.products .box.left .box_s02 p.border:first-child {
        font-size: 16px;
      }
      .contents01.products .box.left .box_s02 p.border:last-child {
        font-size: 12px;
      }
      .contents01.products .box.left .box_swrap.layout01 .box_s02 p.border:last-child {
        padding-top:10px;
        padding-bottom:6px;
        padding-left:5%;
      }
      .contents01.products .box.right .box_swrap {
        flex-direction: column;
        width: 100%;
        gap: 0;
      }
      .contents01.products .box.right .box_swrap .box_s.left {
        width: 100%;
        margin-bottom: 90px;
      }
      .contents01.products .box .box_swrap .box_ss .ttl {
        padding:0;
        position: relative;
      }
      .contents01.products .box .box_swrap .box_ss .ttl span.border-block {
          border-left: #282828 1px solid;
          display: block;
          margin-left:15px;
          padding: 10px;
      }
      .contents01.products .box.right .box_swrap .box_s.right {
          width: 100%;
          margin-bottom: 90px;
      }
      .contents01.products .box.right .box_swrap .box_s.right.mBnone {
          margin-bottom: 0;
      }
      .contents01.products .box.right .box_swrap .text {
        padding: 8px 25px 8px 25px;
        margin-bottom: 0;
      }
      .contents01.products .box.right .box_swrap .text div {
          position: relative;
          top: 2px;
      }
      .contents01.products .box.right .box_swrap .box_s .box_ss .image {
        padding: 0 25px;
      }
      .contents01.products .box.right .box_swrap .box_s .box_ss .image p {
        margin-bottom: 0;
      }
      .contents01.products .box.right .box_swrap .box_s .box_ss .image img {
        width: 75%;
        margin: 0 auto;
      }
    }

/* layout02 */
.contents01.products .box-ttl {
  font-size: 16px;
  line-height: 1.4;
  border-top: #282828 1px solid;
  border-bottom: #282828 1px solid;
  width: 90%;
  text-align: left;
  padding: 12px 0;
  margin: 60px auto 0 auto;
  font-family: "Neue-Helvetica-Paneuropean-Bold", sans-serif;
}
.contents01.products .box-ttl span.height {
  position: relative;
  top: 4px;
}
/* table */
.contents01.products .box.right .box_swrap.layout02 {
}
.contents01.products .box_swrap.layout02 .box_s.table table {
  border: none;
  border-bottom: 1px solid #282828;
}
.contents01.products .box_s.table td,
.contents01.products .box_s.table th{
    border: none;
    border-left: 1px solid #282828;
    border-top: 1px solid #282828;
}
.contents01.products .box_s.table td:first-child,
.contents01.products .box_s.table th:first-child{
    border-left:none;
}
.contents01.products .box_s.table tr:first-child td,
.contents01.products .box_s.table tr:first-child th{
    border-top:none;
}
.contents01.products .box_swrap.layout02 .box_s.table table th {
  background-color: #FFFFFF;
  color: #008373;
  font-size: 17px;
  padding: 10px;
  font-family: "Neue-Helvetica-Paneuropean", sans-serif;
  }
.contents01.products .box_swrap.layout02 .box_s.table table td {
  font-size: 16px;
  text-align: left;
  padding: 20px;
  font-family: "Neue-Helvetica-Paneuropean", sans-serif;
}
.contents01.products .box_swrap.layout02 .box_s.table.right table td {
  padding:10px 20px;
}
.contents01.products .box_swrap.layout02 .box_s.table table td:first-child {
  padding-left:10px;
}
.contents01.products .box_swrap.layout02 .box_s.table table td.t02 {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
.contents01.products .box_swrap.layout02 .box_s.table table td.t03 {
  text-align: left;
}
.contents01.products .box_swrap.layout02 .box_s.table table td.t04 {
    border-left: 1px solid #282828;
    padding:10px 20px;
}
.contents01.products .box_swrap.layout02 .box_s.table table td.t05 {
    padding:10px 20px;
}
.contents01.products .box_swrap.layout02 .box_s.table table th:nth-child(n + 4) {
  text-align: left;
  padding-left:20px;
}
.contents01.products .box_swrap.layout02 .box_s.table.right table {

}
.contents01.products .box_swrap.layout02 .box_s.table.right table th {
  text-align: left;
}
    @media only screen and (max-width: 640px) {
      .contents01.products .box-ttl {
        padding:0;
        width: 100%;
        margin-top: 0;
      }
      .contents01.products .box-ttl span.border-block {
          border-left: #282828 1px solid;
          display: block;
          margin-left:15px;
          padding: 10px;
      }
      .contents01.products .box-ttl span.height {
        position: relative;
        top: 4px;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table {
        width: calc(100% - 8px);
        margin: 0 4px;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table th {
        padding:2vw 0 1vw 21px;
        text-align: left;
        font-size: 16px;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table th:nth-of-type(n+2) {
        text-align: center;
        padding-left:0;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table th:last-child {
        text-align: left;
        padding-left:3vw;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table td {
        /* font-size: 16px; */
        padding: 2vw 3vw 1vw 3vw;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table td:first-child {
        padding-left:21px;
        width: 40%;
      }
      .contents01.products .box_swrap.layout02 .box_s.table table td.t02 {
        padding-left:0;
        padding-right:0;
      }
      .contents01.products .box_swrap.layout02 .box_s.table.right table th {
        padding-left:21px;
      }
      .contents01.products .box_swrap.layout02 .box_s.table.right table td {
        padding: 2vw 0 1vw 20px;
      }
      .contents01.products .box_swrap.layout02 .box_s.table.right table td:first-child {
        /* width: 35%; */
      }
      .contents01.products .box_swrap.layout02 .box_s.table.right table td.t02 {
        border-left: #282828 1px solid;
        text-align: left;
        padding: 2vw 3vw 1vw 3vw;
        width: auto;
      }
      .contents01.products .box_swrap.layout02 .box_s.table.right table td.t03 {
        padding: 2vw 3vw 1vw 3vw;
      }
      .contents01.products .box.right .box_swrap.layout02 .box_s.left {
        margin-bottom: 18px;
      }
    }

    /* layout03 */
.contents01.products .box_swrap.layout03 .box_sss {
  border-bottom: #282828 1px solid;
  font-size: 14px;
}
.contents01.products .box_swrap.layout03 .box_sss a {
  text-decoration: none;
  color: #000000;
}
.contents01.products .box_swrap.layout03 .box_sss a:hover {
  text-decoration:underline;
}
.contents01.products .box_swrap.layout03 .box_sss div.products {
  width: calc(100% / 3);
  padding:10px 15px;
  border-right: #282828 1px solid;
}
.contents01.products .box_swrap.layout03 .box_sss div.products:last-child {
  border-right: none;
}
.contents01.products .box_swrap.layout03 .box_sss div.products .more {
  text-align: center;
  font-family: "Neue-Helvetica-Paneuropean", sans-serif;
  position: relative;
  margin-left: -0.7em;
}
.contents01.products .box_swrap.layout03 .box_sss div.products .more img {
  width: 14px;
  display:inline-block;
  position: relative;
  top: 2px;
  position: absolute;
  top:1px;
  padding-left: 2px;
}
.contents01.products .box_swrap.layout03 .box_sss div.products a:hover .more img:nth-of-type(2) {
  opacity: 0;
}
.contents01.products .box_swrap.layout03 .box_s.right p.text_s {
  font-size: 12px;
  margin-bottom: 0;
}
.contents01.products .box_swrap.layout03 .box_s.right p.text {
  font-size: 14px;
  line-height: 1.5;
  border: none;
  padding-top: 0;
  margin-top: 12px;
}
    @media only screen and (max-width: 640px) {
      .contents01.products .box_swrap.layout03 .box_s.right p.text_s {
        padding:0 25px;
      }
      .contents01.products .box_swrap.layout03 .box_sss a img {
        width: 75%;
        margin: 0 auto;
      }
    }

/* contact */
    @media only screen and (max-width: 640px) {
      .body-wrap.products section.contact .button {
        width:50vw
      }
    }