@charset "utf-8";

/* CSS Document */

/* ========================================
   ヘッダー
======================================== */

/* ---------- ベース ---------- */
#index-header #head {
   padding: 0;
   flex-direction: column;
   height: auto !important;
   border-bottom-left-radius: 0 !important;
   z-index: 1000 !important;
   box-shadow: none !important;
}

#index-header {
   height: auto !important;
}

svg {
   stroke: none;
}

.site-head {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: #fff;
}

#drawerMenu[hidden],
#headSearchSp[hidden] {
   display: none !important;
}

#notice {
   display: none;
}

#index-header h1 img {
   height: auto !important;
}


/* ---------- ヘッダー上段 ---------- */
.head-inner {
   width: min(1400px, 98%);
   height: 70px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.head-logo {
   margin: 0;
   line-height: 1;
   flex: 0 0 auto;
}

.head-logo a,
.head-logo img {
   display: block;
}

.head-logo img {
   width: clamp(150px, 20vw, 200px);
   height: auto;
}

.head-pc-center {
   flex: 1 1 auto;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 2vw;
   margin-right: 2vw;
}

.head-about {
   font-size: 16px;
   font-weight: 600;
   color: #00713f;
   text-decoration: none !important;
   white-space: nowrap;
}

.head-actions {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 2vw;
}

.head-icon-link,
.head-search-toggle {
   width: 44px;
   min-height: 42px;
   padding: 0;
   border: 0;
   background: transparent;
   color: #00713f;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   cursor: pointer;
   font: inherit;
   line-height: 1;
}

.head-action-text {
   display: block;
   margin-top: 2px;
   font-size: 10px;
   line-height: 1.2;
   white-space: nowrap;
}

.head-icon-img,
.head-search-icon {
   width: 24px;
   height: 24px;
   display: grid;
   place-items: center;
   flex: 0 0 auto;
}

.head-icon-img img,
.head-search-icon img {
   display: block;
   width: 24px;
   aspect-ratio: 1 / 1;
   object-fit: contain;
}


/* ---------- 検索フォーム ---------- */
.search-box.head {
   position: relative;
   margin: 0;
   display: flex;
   align-items: center;
   width: fit-content;
}

.search-box.head input[type="text"] {
   width: 234px !important;
   height: 28px !important;
   padding: 0 42px 0 16px !important;
   border: 1px solid #e3e8e3 !important;
   border-radius: 999px;
   background: #fff;
   color: #333 !important;
   font-size: 15px !important;
   outline: none;
   box-sizing: border-box;
}

.search-box.head input[type="text"]::placeholder {
   color: #9aa29a;
}

.search-box.head button[type="submit"] {
   position: absolute;
   left: auto;
   right: 12px;
   top: 28%;
   width: 18px;
   height: 18px;
   padding: 0;
   border: 0;
   background: transparent;
   color: #00713f;
   transform: translateY(-50%);
   cursor: pointer;
   display: grid;
   place-items: center;
}

.search-box.head button[type="submit"] img {
   display: block;
   width: 18px;
   height: 18px;
   object-fit: contain;
}


/* ---------- ハンバーガーボタン ---------- */
.head-menu-toggle {
   width: 32px;
   height: 32px;
   padding: 0;
   border: 0;
   background: transparent;
   display: grid;
   place-items: center;
   position: relative;
   cursor: pointer;
   z-index: 2;
}

.head-menu-toggle span {
   width: 28px;
   height: 1.5px;
   background: #00713f;
   position: absolute;
   transition: transform .25s ease, opacity .2s ease;
}

.head-menu-toggle span:nth-child(1) {
   transform: translateY(-9px);
}

.head-menu-toggle span:nth-child(2) {
   transform: translateY(0);
}

.head-menu-toggle span:nth-child(3) {
   transform: translateY(9px);
}

body.is-drawer-open .head-menu-toggle span:nth-child(1) {
   transform: rotate(45deg);
}

body.is-drawer-open .head-menu-toggle span:nth-child(2) {
   opacity: 0;
}

body.is-drawer-open .head-menu-toggle span:nth-child(3) {
   transform: rotate(-45deg);
}


/* ---------- PCナビ ---------- */
.head-nav {
   height: 45px;
   background: #EDF5EE;
   width: 100%;
}

.head-nav ul {
   height: 100%;
   color: #217A4B;
   text-decoration: none;
   font-size: 17px;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
   padding: 0;
   width: min(800px, 100%);
   list-style: none;
}

.head-nav li {
   margin: 0;
   padding: 0;
}

.head-nav a {
   height: 100%;
   padding: 0 18px;
   color: #00713f;
   text-decoration: none !important;
   font-size: 17px;
   font-weight: 600;
   letter-spacing: .08em;
   display: flex;
   align-items: center;
   justify-content: center;
}

.head-nav a:hover {
   opacity: .72;
}


/* ---------- SP検索アコーディオン ---------- */
.head-search-sp {
   display: block;
   width: 100%;
   max-height: 0;
   overflow: hidden;
   padding: 0 14px;
   box-sizing: border-box;
   background: #fff;
   opacity: 0;
   transition: max-height .32s ease, padding .32s ease, opacity .22s ease;
}

body.is-search-open .head-search-sp {
   max-height: 76px;
   padding: 10px 14px 12px;
   opacity: 1;
}

.head-search-sp .search-box.head {
   width: min(450px, 100%);
   margin: 0 auto;
}

.head-search-sp .search-box.head input[type="text"] {
   width: 100%;
   height: 38px;
   font-size: 14px !important;
   padding: 0 42px 0 16px;
}


/* ---------- ドロワー外枠 ---------- */
.drawer-menu {
   display: block;
   position: static;
   width: 100%;
   max-height: 0;
   overflow: hidden;
   background: #fff;
   box-shadow: none;
   opacity: 0;
   transform: translateY(-6px);
   transition: max-height .36s ease, opacity .24s ease, transform .36s ease;
   z-index: 1;
}

body.is-drawer-open .drawer-menu {
   max-height: 520px;
   opacity: 1;
   transform: translateY(0);
}

.drawer-menu nav ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.drawer-menu nav li {
   margin: 0;
   padding: 0;
}


/* ---------- ドロワー内：メインメニュー ---------- */
.drawer-menu-index {
   background-color: #F5F5F5;
   margin-right: auto;
   margin-left: auto;
   height: 40px;
   display: flex;
   align-items: center;
   padding: 0 5%;
   font-weight: 600;
   font-size: 16px;
}

.drawer-mainmenu {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin: 0;
   padding: 20px 12px 30px 12px;
   list-style: none;
}

.drawer-mainmenu li {
   margin: 0;
   padding: 0;
}

.drawer-mainmenu a {
   display: flex;
   align-items: center;
   min-height: 56px;
   padding: 0 16px;
   border-radius: 6px;
   background: #fff;
   color: #555;
   text-decoration: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
   box-sizing: border-box;
}

.drawer-mainmenu-ico {
   flex: 0 0 28px;
   width: 28px;
   height: 28px;
   margin-right: 8px;
   display: grid;
   place-items: center;
}

.drawer-mainmenu-ico img {
   display: block;
   width: 24px;
   height: 24px;
   object-fit: contain;
}

.drawer-mainmenu-index {
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   white-space: nowrap;
}


/* ---------- ドロワー内：ナビ共通 ---------- */
.drawer-nav-menu {
   width: 100%;
   background: #fff;
}

.drawer-nav-item,
.drawer-nav-direct-link {
   border-bottom: solid 1px #E3E3E3;
}

.drawer-nav-item:last-child,
.drawer-nav-direct-link:last-child {
   border-bottom: none;
}

.drawer-nav-trigger,
.drawer-nav-direct-link {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   height: 60px;
   border: 0;
   background: transparent;
   color: inherit;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   box-sizing: border-box;
}

.drawer-nav-icon {
   flex: 0 0 5.4rem;
   display: grid;
   place-items: center;
}

.drawer-nav-icon img {
   width: 2rem;
   height: auto;
}

.drawer-nav-item--no-icon .drawer-nav-trigger {
   padding-left: 1.4rem;
}

.drawer-nav-title {
   color: #217A4B;
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.4;
}


/* ---------- ドロワー内：＋ / − ---------- */
.drawer-nav-mark,
.drawer-nav-submark {
   position: absolute;
   top: 50%;
   right: 1.35rem;
   width: 0.72rem;
   height: 0.72rem;
   transform: translate(50%, -50%);
}

.drawer-nav-mark::before,
.drawer-nav-mark::after,
.drawer-nav-submark::before,
.drawer-nav-submark::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0.75rem;
   height: 1px;
   background: #217A4B;
   transition: transform .3s ease, opacity .3s ease;
}

.drawer-nav-mark::before,
.drawer-nav-submark::before {
   transform: translate(-50%, -50%) rotate(0deg);
}

.drawer-nav-mark::after,
.drawer-nav-submark::after {
   transform: translate(-50%, -50%) rotate(90deg);
}

.drawer-nav-item.is-open .drawer-nav-mark::before,
.drawer-nav-subitem.is-open .drawer-nav-submark::before {
   transform: translate(-50%, -50%) rotate(180deg);
}

.drawer-nav-item.is-open .drawer-nav-mark::after,
.drawer-nav-subitem.is-open .drawer-nav-submark::after {
   opacity: 0;
   transform: translate(-50%, -50%) rotate(180deg);
}


/* ---------- ドロワー内：アコーディオン ---------- */
.drawer-nav-body,
.drawer-nav-subbody {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height .35s ease, opacity .25s ease;
}

.drawer-nav-item.is-open .drawer-nav-body,
.drawer-nav-subitem.is-open>.drawer-nav-subbody {
   opacity: 1;
}


/* ---------- ドロワー内：共通矢印 ---------- */
.drawer-nav-arrow {
   position: absolute;
   top: 50%;
   right: 1.35rem;
   width: 0.5rem;
   height: 0.5rem;
   border-top: 1px solid #217A4B;
   border-right: 1px solid #217A4B;
   transform: translate(50%, -50%) rotate(45deg);
}


/* ---------- ドロワー内：パターン① ---------- */
.drawer-nav-scene-link {
   position: relative;
   display: flex;
   align-items: center;
   padding-right: 3rem;
   padding-left: 2rem;
   border-top: solid 1px #E3E3E3;
   color: inherit;
   text-decoration: none;
   box-sizing: border-box;
   height: auto;
}

.drawer-nav-scene-icon {
   flex: 0 0 4.5rem;
   display: grid;
   place-items: center;
}

.drawer-nav-scene-icon img {
   width: 1.8rem;
   height: auto;
}

.drawer-nav-scene-body {
   display: grid;
}

.drawer-nav-scene-name {
   color: #217A4B;
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.4;
}

.drawer-nav-scene-text {
   color: #555;
   font-size: 0.95rem;
   line-height: 1.4;
}


/* ---------- ドロワー内：パターン② ---------- */
.drawer-nav-simple-link {
   position: relative;
   display: flex;
   align-items: center;
   padding-right: 3rem;
   padding-left: 2rem;
   border-top: solid 1px #E3E3E3;
   color: inherit;
   text-decoration: none;
   box-sizing: border-box;
   height: auto;
}

.drawer-nav-simple-icon {
   flex: 0 0 4.5rem;
   display: grid;
   place-items: center;
}

.drawer-nav-simple-icon img {
   width: 1.9rem;
   height: auto;
}

.drawer-nav-simple-title {
   color: #217A4B;
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.4;
}

.drawer-nav-subitem {
   border-top: solid 1px #E3E3E3;
}

.drawer-nav-subtrigger {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   padding: 0.9rem 3rem 0.9rem 2rem;
   border: 0;
   background: transparent;
   color: inherit;
   text-align: left;
   cursor: pointer;
   box-sizing: border-box;
}

.drawer-nav-third-link {
   position: relative;
   display: block;
   padding: 0.9rem 2.4rem 0.9rem 7rem;
   border-top: solid 1px #E3E3E3;
   color: inherit;
   text-decoration: none;
   box-sizing: border-box;
   height: auto;
}

.drawer-nav-third-link::before {
   content: "└";
   position: absolute;
   left: 5rem;
   color: #999;
}

.drawer-nav-third-link::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 1.35rem;
   width: 0.5rem;
   height: 0.5rem;
   border-top: 1px solid #217A4B;
   border-right: 1px solid #217A4B;
   transform: translate(50%, -50%) rotate(45deg);
}


/* ---------- ドロワー内：パターン③ ---------- */
.drawer-nav-subindex {
   min-height: 2.2rem;
   margin: 0;
   background: #90BCA5;
   color: #fff;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
}

.drawer-nav-product-link {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 4.5rem !important;
   padding: 0.8rem 3rem 0.8rem 3.5rem;
   border-top: solid 1px #E3E3E3;
   color: inherit;
   text-decoration: none;
   box-sizing: border-box;
   height: auto;
}

.drawer-nav-branch {
   flex: 0 0 4rem;
   position: relative;
   min-height: 1rem;
}

.drawer-nav-branch::before {
   content: "└";
   position: absolute;
   left: 2rem;
   top: 50%;
   color: #999;
   transform: translateY(-50%);
}

.drawer-nav-product-body {
   display: grid;
   gap: 0.2rem;
}

.drawer-nav-product-label {
   width: fit-content;
   padding: 0.1rem 0.6rem;
   border: 1px solid #217A4B;
   color: #217A4B;
   font-size: 1rem;
   line-height: 1.4;
}

.drawer-nav-product-name {
   line-height: 1.4;
}

.drawer-nav-subbody.drawer-nav-product-list {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height .35s ease, opacity .25s ease;
   margin-top: auto;
}

.drawer-nav-subitem.is-open>.drawer-nav-subbody.drawer-nav-product-list {
   opacity: 1;
}


/* ---------- ドロワー内：パターン④・⑥ ---------- */
.drawer-nav-direct-link {
   padding-left: 0;
   padding-right: 3.2rem;
   height: auto;
}

.drawer-nav-direct-link .drawer-nav-arrow {
   right: 1.35rem;
}

.drawer-nav-direct-link--no-icon {
   padding-left: 1.4rem;
}

.drawer-nav-direct-link--no-icon .drawer-nav-title {
   flex: 1 1 auto;
}


/* ---------- ドロワー内：パターン⑤ ---------- */
.drawer-nav-text-link {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 4.8rem;
   padding: 0.9rem 3rem 0.9rem 3.8rem;
   border-top: solid 1px #E3E3E3;
   color: inherit;
   text-decoration: none;
   box-sizing: border-box;
   height: auto;
}

.drawer-nav-text-title {
   color: #217A4B;
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.4;
}

.drawer-nav-item--text.drawer-nav-item--no-icon .drawer-nav-trigger {
   padding-left: 1.4rem;
}


/* ---------- PC ---------- */
@media screen and (min-width: 1001px) {

   .head-search-toggle,
   .head-menu-toggle,
   .head-search-sp,
   .drawer-menu {
      display: none !important;
   }
}

/* ---------- SP ---------- */
@media screen and (max-width: 1000px) {
   #index-header {
      height: 70px !important;
   }

   #head.site-head {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 10000 !important;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
   }

   .head-inner {
      width: 95%;
      height: 70px;
   }

   .head-pc-center,
   .head-search-pc,
   .head-nav {
      display: none;
   }

   .head-icon-link,
   .head-search-toggle {
      width: 42px;
      min-height: 44px;
      gap: 0;
   }

   .head-action-text {
      font-size: 10px;
   }

   .head-icon-img,
   .head-search-icon {
      width: 25px;
      height: 25px;
   }

   .head-icon-img img,
   .head-search-icon img {
      width: 23px;
      aspect-ratio: 1 / 1;
      object-fit: contain;
   }

   .head-menu-toggle {
      width: 34px;
      height: 34px;
      margin-left: 2px;
   }

   .head-search-sp {
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      padding: 0 14px;
      box-sizing: border-box;
      background: #fff;
      opacity: 0;
      transition: max-height .32s ease, padding .32s ease, opacity .22s ease;
      z-index: 10001;
   }

   .drawer-menu {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      width: 100%;
      height: calc(100dvh - 70px);
      max-height: 0;
      overflow: hidden;
      background: #fff;
      opacity: 0;
      transform: translateY(-8px);
      transition: max-height .36s ease, opacity .24s ease, transform .36s ease;
      z-index: 10001;
   }

   body.is-drawer-open .drawer-menu {
      max-height: calc(100dvh - 70px);
      opacity: 1;
      transform: translateY(0);
   }

   .drawer-menu-inner {
      height: 100%;
      max-height: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
   }
}


/* ---------- 小さめSP ---------- */
@media screen and (max-width: 374px) {
   .head-actions {
      gap: 7px;
   }

   .head-icon-link,
   .head-search-toggle {
      width: 38px;
   }

   .head-action-text {
      font-size: 9px;
   }

   .drawer-mainmenu {
      gap: 10px;
      padding: 10px;
   }

   .drawer-mainmenu a {
      min-height: 54px;
      padding: 0 12px;
   }

   .drawer-mainmenu-ico {
      flex-basis: 24px;
      width: 24px;
      height: 24px;
      margin-right: 6px;
   }

   .drawer-mainmenu-ico img {
      width: 22px;
      height: 22px;
   }

   .drawer-mainmenu-index {
      font-size: 14px;
   }
}

/* ---------- ドロワー内：高さ・ボーダー統一 ---------- */

/* クリックできる項目はすべて60pxに統一 */
.drawer-nav-trigger,
.drawer-nav-direct-link,
.drawer-nav-scene-link,
.drawer-nav-simple-link,
.drawer-nav-subtrigger,
.drawer-nav-third-link,
.drawer-nav-product-link,
.drawer-nav-text-link {
   height: 60px;
   min-height: 60px;
   box-sizing: border-box;
}

/* 項目間の線を統一 */
.drawer-nav-item,
.drawer-nav-direct-link {
   border-bottom: solid 1px #E3E3E3;
}

/* アコーディオン内の項目は上線で区切る */
.drawer-nav-scene-link,
.drawer-nav-simple-link,
.drawer-nav-subitem,
.drawer-nav-third-link,
.drawer-nav-product-link,
.drawer-nav-text-link {
   border-top: solid 1px #E3E3E3;
}

/* 二重線になりやすい箇所を調整 */
.drawer-nav-body>.drawer-nav-subitem:first-child,
.drawer-nav-body>.drawer-nav-scene-link:first-child,
.drawer-nav-body>.drawer-nav-simple-link:first-child,
.drawer-nav-body>.drawer-nav-text-link:first-child,
.drawer-nav-subbody>.drawer-nav-third-link:first-child,
.drawer-nav-subbody>.drawer-nav-product-link:first-of-type {
   border-top: solid 1px #E3E3E3;
}

/* 商品リンク内の高さ固定に合わせて中身を中央寄せ */
.drawer-nav-product-link {
   align-items: center;
}

/* サブテキストあり項目も60px内で中央寄せ */
.drawer-nav-scene-body,
.drawer-nav-product-body {
   align-content: center;
}

/* 小見出しは項目ではないので高さ固定対象外 */
.drawer-nav-subindex {
   min-height: 2.2rem;
   height: auto;
}

/* 最後の余計な線を出したくない場合の調整 */
.drawer-nav-menu>.drawer-nav-item:last-child,
.drawer-nav-menu>.drawer-nav-direct-link:last-child {
   border-bottom: none;
}

.drawer-menu-blank {
   display: block;
   height: 35px;
   background-color: #F5F5F5;
}

/* ---------- ドロワー内：お問い合わせエリア ---------- */
.drawer-menu-inner .contact-container {
   text-align: center;
   padding: 60px 15px;
   background-color: #F5F5F5;
   box-sizing: border-box;
}

.drawer-menu-inner .contact-flex-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 30px;
   width: 100%;
   max-width: 420px;
   margin: 0 auto;
}

.drawer-menu-inner .contact-block {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.drawer-menu-inner .contact-label {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 1.5em;
   margin-bottom: 8px;
   color: #333;
   font-size: 1.1em;
   font-weight: 700;
   line-height: 1.4;
}

.drawer-menu-inner .contact-label .tel {
   font-weight: 700;
}

.drawer-menu-inner .contact-btn {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   height: 70px;
   padding: 15px 44px 15px 20px;
   border: 1px solid #ddd;
   border-radius: 100px;
   background: #fff;
   color: #217A4B;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
   box-sizing: border-box;
}

.drawer-menu-inner .contact-btn::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 20px;
   width: 12px;
   height: 12px;
   border-top: 1px solid #217A4B;
   border-right: 1px solid #217A4B;
   transform: translateY(-50%) rotate(45deg);
}

.drawer-menu-inner .contact-btn svg {
   flex: 0 0 24px;
   width: 24px;
   height: 24px;
   stroke: #217A4B;
}

.drawer-menu-inner .contact-btn svg .cls-1,
.drawer-menu-inner .contact-btn svg .cls-2 {
   fill: none;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;
}

.drawer-menu-inner .contact-btn p {
   margin: 0;
   color: #217A4B;
   font-weight: 700;
   line-height: 1.2;
}

.drawer-menu-inner .contact-btn .tel-number {
   font-size: 24px !important;
   font-weight: 400;
   letter-spacing: .02em;
}

.drawer-menu-inner .contact-btn .contact {
   font-size: 16px;
   text-align: center;
}

.drawer-menu-inner .contact-note {
   width: 100%;
   margin-top: 10px;
   color: #333;
   font-size: .9em;
   line-height: 1.5;
   text-align: left;
}

.drawer-menu-inner .contact-note.inquiry {
   margin-bottom: 0;
}

.drawer-menu-inner .contact-note a {
   color: inherit;
}

/* 小さめSP */
@media screen and (max-width: 374px) {
   .drawer-menu-inner .contact-container {
      padding: 24px 10px;
   }

   .drawer-menu-inner .contact-flex-wrapper {
      gap: 24px;
   }

   .drawer-menu-inner .contact-btn {
      height: 64px;
      padding: 12px 36px 12px 16px;
   }

   .drawer-menu-inner .contact-btn::after {
      right: 14px;
      width: 10px;
      height: 10px;
   }

   .drawer-menu-inner .contact-btn .tel-number {
      font-size: 20px !important;
   }

   .drawer-menu-inner .contact-btn .contact {
      font-size: 14px;
   }

   .drawer-menu-inner .contact-note {
      font-size: 12px;
   }
}

.drawer-banner {
   width: 90%;
   display: block;
   margin: 40px auto 0;
}

.drawer-sns-container {
   background-color: #626262;
   padding: 20px 0;
}

.drawer-sns-container ul {
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 95%;
   gap: 5vw;
}

.drawer-sns-container ul li {
   width: 32px;
}


/* ---------- ドロワー内：製品タイプ直リンク・商品アイコン・外部リンク調整 ---------- */

/* 製品タイプ内の二階層目直リンクも、目的・お悩み直リンクと同じ扱い */
.drawer-nav-simple-link--product-direct {
   border-top: solid 1px #E3E3E3;
}

/* 製品タイプの三階層目：商品アイコンありの構成 */
.drawer-nav-product-link {
   padding: 0.8rem 3rem 0.8rem 3.3rem;
}

.drawer-nav-product-icon {
   flex: 0 0 4.5rem;
   display: grid;
   place-items: center;
}

.drawer-nav-product-icon img {
   display: block;
   width: 1.9rem;
   height: auto;
}

/* 旧「└」用が混ざっても崩れないように残す */
.drawer-nav-product-link .drawer-nav-branch {
   display: none;
}

/* 商品ラベルはドロワー内で独立して見えるようにする */
.drawer-nav-product-label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
   min-width: 4.5em;
   padding: 0.1rem 0.6rem;
   border: 1px solid #217A4B;
   color: #217A4B;
   font-size: 0.9rem;
   line-height: 1.4;
   box-sizing: border-box;
}

.drawer-nav-product-name {
   color: #333;
   font-size: 1.05rem;
   line-height: 1;
}

/* 読みもの・法人のお客様：右矢印を外部リンクアイコンに差し替え */
.drawer-nav-text-link--external {
   padding-right: 3rem;
}

.drawer-nav-text-link--external .drawer-nav-arrow {
   display: none;
}

.drawer-nav-text-link--external::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 1.35rem;
   width: 13px;
   height: 13px;
   background: url("/img/top/ico/external-link.svg") no-repeat center / contain;
   transform: translate(50%, -50%);
}

/* 2行テキストでも60px内で中央に見えるように調整 */
.drawer-nav-text-link--external .drawer-nav-text-title {
   line-height: 1.35;
}



/* ---------- カテゴリー：製品タイプ　バッジ（トップItem共通） ---------- */

.product-type-item__label-toilet {
   color: #15ABC5;
   border: 1px solid #15ABC5;
}

.product-type-item__label-anywhere {
   color: #46996E;
   border: 1px solid #46996E;
}

.product-type-item__label-sleep {
   color: #AA9ABD;
   border: 1px solid #AA9ABD;
}

.product-type-item__label-entrance {
   color: #E9A252;
   border: 1px solid #E9A252;
}

.product-type-item__label-shoes {
   color: #697bd6;
   border: 1px solid #697bd6;
}

.product-type-item__label-bag {
   color: #155d22;
   border: 1px solid #155d22;
}

.product-type-item__label-dani {
   color: #5d4c19;
   border: 1px solid #5d4c19;
}

.product-type-item__label-fabric {
   color: #de7eb0;
   border: 1px solid #de7eb0;
}

.product-type-item__label-mask {
   color: #48afa0;
   border: 1px solid #48afa0;
}

.product-type-item__label-dispeldrowsiness {
   color: #beca11;
   border: 1px solid #beca11;
}

.product-type-item__label-kitchen {
   color: #26b643;
   border: 1px solid #26b643;
}

.product-type-item__label-cleaning {
   color: #40a7b5;
   border: 1px solid #40a7b5;
}

.product-type-item__label-kafun {
   color: #95d331;
   border: 1px solid #95d331;
}

.product-type-item__name {
   line-height: 1.4;
}

/* ---------- PCヘッダー：スクロール追従 ---------- */
@media screen and (min-width: 1001px) {
   #index-header.is-pc-header-scroll {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 115px !important;
      z-index: 10000 !important;
      background: #fff;
      overflow: hidden;
      transform: translateY(0);
      transition: transform .32s ease, height .28s ease, box-shadow .28s ease;
      will-change: transform, height;
   }

   #index-header.is-pc-header-scroll #head.site-head {
      position: relative !important;
      top: auto !important;
      transform: none !important;
      width: 100%;
      background: #fff;
   }

   #index-header.is-pc-header-scroll .head-inner {
      height: 70px;
      flex-shrink: 0;
   }

   #index-header.is-pc-header-scroll .head-nav {
      height: 45px;
      max-height: 45px;
      opacity: 1;
      overflow: hidden;
      transition: height .28s ease, max-height .28s ease, opacity .22s ease;
      pointer-events: auto;
   }

   /* 下スクロール：上段だけを引っ込める */
   #index-header.is-pc-header-scroll.is-head-hidden {
      height: 70px !important;
      transform: translateY(-70px);
      box-shadow: none !important;
   }

   #index-header.is-pc-header-scroll.is-head-hidden .head-nav {
      height: 0 !important;
      max-height: 0 !important;
      opacity: 0;
      pointer-events: none;
   }

   /* 上スクロール：上段だけ表示 */
   #index-header.is-pc-header-scroll.is-head-compact {
      height: 70px !important;
      transform: translateY(0);
      box-shadow: 0 3px 12px rgba(0, 0, 0, .08) !important;
   }

   #index-header.is-pc-header-scroll.is-head-compact .head-nav {
      height: 0 !important;
      max-height: 0 !important;
      opacity: 0;
      pointer-events: none;
   }

   /* 最下部：ヘッダー丸ごと表示 */
   #index-header.is-pc-header-scroll.is-head-full {
      height: 115px !important;
      transform: translateY(0);
      box-shadow: none !important;
   }

   #index-header.is-pc-header-scroll.is-head-full .head-nav {
      height: 45px !important;
      max-height: 45px !important;
      opacity: 1;
      pointer-events: auto;
   }

   body {
      padding-top: 115px;
   }
}

/* ========================================
   各種ページ調整
======================================== */
#bread-crumb {
    width: min(95%, 1200px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}