/* =========================================================
   Curtain Shop Creer /choice/ 商品探索ハブ
   #main 内へそのまま設置できるよう #choiceHub 以下に限定
========================================================= */

#choiceHub,
#choiceHub * {
  box-sizing: border-box;
}#choiceHub {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#choiceHub img {
  max-width: 100%;
  height: auto;
}#choiceHub a {
  color: inherit;
  text-decoration: none;
}#choiceHub .ch-section {
  margin: 52px 0 0;
}#choiceHub .ch-section-title {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#choiceHub .ch-section-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#choiceHub .ch-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/hero-image.png");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#choiceHub .ch-hero-inner {
  position: relative;
  z-index: 2;
  width: 64%;
  padding: 45px 40px 40px;
}#choiceHub .ch-eyebrow {
  margin-bottom: 8px;
  color: #b41424;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
}#choiceHub .ch-hero h1:where(:not(.as-h2)),
#choiceHub .ch-hero div.h_h1 {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  color: #202020;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
}#choiceHub .ch-hero h1:where(:not(.as-h2)) strong,
#choiceHub .ch-hero div.h_h1 strong {
  color: #b41424;
}#choiceHub .ch-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 2;
}#choiceHub .ch-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}#choiceHub .ch-hero-note span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid #ddd6cd;
  border-radius: 30px;
  background: rgba(255,255,255,.85);
  color: #555;
  font-size: 13px;
}/* =========================================================
   7 CATEGORY
========================================================= */

#choiceHub .ch-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}#choiceHub .ch-category-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.04);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}#choiceHub .ch-category-card:hover {
  transform: translateY(-3px);
  border-color: #cfcfcf;
  box-shadow: 0 9px 24px rgba(0,0,0,.09);
}#choiceHub .ch-category-card.ch-wide {
  grid-column: 1 / -1;
}#choiceHub .ch-category-card a {
  display: block;
}#choiceHub .ch-category-visual {
  position: relative;
  height: 150px;
  overflow: hidden;
}#choiceHub .ch-category-visual:after {
  position: absolute;
  right: 10%;
  top: 0;
  width: 18%;
  height: 100%;
  background: rgba(255,255,255,.17);
  content: "";
}/* 悩み */
#choiceHub .ch-visual-nayami {
  background-image: url("/base/nayami.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 機能 */
#choiceHub .ch-visual-function {
  background-image: url("/base/function.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* レース */
#choiceHub .ch-visual-lace {
  background-image: url("/base/lace.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* カラー */
#choiceHub .ch-visual-color {
  background-image: url("/base/colors.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#choiceHub .ch-visual-color span {
  flex: 1;
  border-radius: 3px;
}#choiceHub .ch-visual-color .c1 { background:#e8dfcf; }#choiceHub .ch-visual-color .c2 { background:#c6b49c; }#choiceHub .ch-visual-color .c3 { background:#b9c5b2; }#choiceHub .ch-visual-color .c4 { background:#aebcc7; }#choiceHub .ch-visual-color .c5 { background:#b6a6aa; }#choiceHub .ch-visual-color .c6 { background:#7f8588; }/* 柄・デザイン */
#choiceHub .ch-visual-design {
  background-image: url("/base/design.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 防炎 */
#choiceHub .ch-visual-boen {
  background-image: url("/base/boen.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* テイスト */
#choiceHub .ch-visual-style {
  background-image: url("/base/style.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* wideカード */
#choiceHub .ch-wide a {
  display: grid;
  grid-template-columns: 40% 60%;
}#choiceHub .ch-wide .ch-category-visual {
  height: 185px;
}#choiceHub .ch-category-body {
  padding: 20px 22px 22px;
}#choiceHub .ch-wide .ch-category-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px 30px;
}#choiceHub .ch-category-label {
  margin-bottom: 5px;
  color: #999;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
}#choiceHub .ch-category-card h3 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #282828;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}#choiceHub .ch-category-card p {
  min-height: 50px;
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#choiceHub .ch-wide p {
  min-height: auto;
}#choiceHub .ch-card-link {
  display: inline-block;
  margin-top: 13px;
  color: #a91625;
  font-size: 13px;
  font-weight: 700;
}#choiceHub .ch-card-link:after {
  margin-left: 5px;
  content: "→";
}/* =========================================================
   QUICK NEEDS
========================================================= */

#choiceHub .ch-needs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 24px;
}#choiceHub .ch-need {
  display: flex;
  min-height: 104px;
  align-items: center;
  gap: 11px;
  padding: 15px 12px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fff;
  transition: background .2s ease;
}#choiceHub .ch-need:hover {
  background: #faf8f5;
}#choiceHub .ch-need-icon {
  display: flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f5f6;
  color: #607b8a;
  font-size: 17px;
  font-weight: 700;
}#choiceHub .ch-need strong {
  display: block;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
}#choiceHub .ch-need small {
  display: block;
  margin-top: 3px;
  color: #888;
  font-size: 13px;
  line-height: 1.4;
}/* =========================================================
   PRODUCTS
========================================================= */

/* 商品一覧：PCでは2列 */
#choiceHub .ch-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 25px;
}/* 1商品：左画像＋右文章 */
#choiceHub .ch-product {
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr);
  min-height: 155px;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  background: #fff;
}/* =========================================
   人気商品 共通画像設定
========================================= */

#choiceHub .ch-product-visual {
  width: 115px;
  min-height: 155px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* =========================================
   人気商品 個別画像
========================================= */

/* 1. ステンレス遮熱レース TESORO */
#choiceHub .p-tesoro {
  background-image: url("/base/ch-tesoro.jpg");
}/* 2. わがままプライバシーレース */
#choiceHub .p-privacy {
  background-image: url("/base/ch-wagamama.jpg");
}/* 3. シフォンレースカーテン */
#choiceHub .p-chiffon {
  background-image: url("/base/ch-ciffon.jpg");
}/* 4. 玄関ドア用防寒カーテン */
#choiceHub .p-entrance {
  background-image: url("/base/ch-entrance.jpg");
}/* 5. 窓の光漏れ対策アイテム */
#choiceHub .p-lightblock {
  background-image: url("/base/ch-lightblock.png");
}/* 6. 後付けカーテン裏地 */
#choiceHub .p-uraji {
  background-image: url("/base/ch-uraji.jpg");
}/* =========================================
   商品説明
========================================= */

#choiceHub .ch-product-body {
  min-width: 0;
  padding: 15px 15px 13px;
}#choiceHub .ch-product-tag {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #f4eeee;
  color: #a01826;
  font-size: 12px;
  font-weight: 700;
}#choiceHub .ch-product h3 {
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}#choiceHub .ch-product p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}#choiceHub .ch-product-more {
  display: block;
  margin-top: 8px;
  color: #a91625;
  font-size: 13px;
  font-weight: 700;
}


/* =========================================
   スマートフォン
========================================= */

@media screen and (max-width: 700px) {#choiceHub .ch-product-grid {
    grid-template-columns: 1fr;
  }#choiceHub .ch-product {
    grid-template-columns: 115px minmax(0, 1fr);
  }#choiceHub .ch-product-visual {
    width: 115px;
  }
}

@media screen and (max-width: 480px) {#choiceHub .ch-product {
    grid-template-columns: 92px minmax(0, 1fr);
  }#choiceHub .ch-product-visual {
    width: 92px;
    min-height: 155px;
  }
}/* =========================================================
   CONSULT / KAREN SHOHO
========================================================= */

#choiceHub .ch-consult {
  position: relative;
  overflow: hidden;
  margin-top: 50px;
  padding: 30px 31px;
  border: 1px solid #e5d8c7;
  border-radius: 6px;
  background:
    linear-gradient(135deg,#fffaf2 0%,#f9f3e9 100%);
}#choiceHub .ch-consult:before {
  position: absolute;
  right: -25px;
  bottom: -45px;
  width: 190px;
  height: 190px;
  border: 32px solid rgba(178,20,36,.035);
  border-radius: 50%;
  content: "";
}#choiceHub .ch-consult-inner {
  position: relative;
  z-index: 2;
}#choiceHub .ch-consult-label {
  color: #a91625;
  font-size: 13px;
  font-weight: 700;
}#choiceHub .ch-consult h2,
#choiceHub .ch-consult h1.as-h2,
#choiceHub .ch-consult div.h_h2 {
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
}#choiceHub .ch-consult p {
  max-width: 600px;
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.9;
}#choiceHub .ch-consult-actions {
  display: flex;
  gap: 10px;
  margin-top: 19px;
}#choiceHub .ch-btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}#choiceHub .ch-btn-red {
  background: #b51425;
  color: #fff;
}#choiceHub .ch-btn-outline {
  border: 1px solid #aaa;
  background: #fff;
  color: #444;
}/* =========================================================
   GUIDE
========================================================= */

#choiceHub .ch-guide-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 22px;
}#choiceHub .ch-guide {
  min-height: 135px;
  padding: 18px 16px;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  background: #fff;
}#choiceHub .ch-guide-number {
  margin-bottom: 9px;
  color: #b51425;
  font-size: 13px;
  font-weight: 700;
}#choiceHub .ch-guide strong {
  display: block;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
}#choiceHub .ch-guide span {
  display: block;
  margin-top: 8px;
  color: #999;
  font-size: 13px;
}/* =========================================================
   SHOP LINKS
========================================================= */

#choiceHub .ch-bottom-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 35px;
}#choiceHub .ch-bottom-link {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 17px;
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
  font-size: 13px;
  font-weight: 700;
}#choiceHub .ch-bottom-link:after {
  color: #b51425;
  content: "→";
}

/* =========================================================
   TABLET / SMARTPHONE
========================================================= */

@media screen and (max-width: 700px) {#choiceHub {
    font-size: 16px;
  }#choiceHub .ch-hero {
    min-height: auto;
    border-radius: 0;
    background:
      linear-gradient(
        rgba(249,247,243,.94),
        rgba(249,247,243,.94)
      ),
      repeating-linear-gradient(
        90deg,
        #eee9e1 0,
        #faf8f4 18px,
        #ded8cf 39px,
        #faf8f4 58px
      );
  }#choiceHub .ch-hero-inner {
    width: 100%;
    padding: 32px 23px;
  }#choiceHub .ch-hero h1:where(:not(.as-h2)),
#choiceHub .ch-hero div.h_h1 {
    font-size: 26px;
  }#choiceHub .ch-section {
    margin-top: 42px;
  }#choiceHub .ch-section-title {
    font-size: 22px;
  }#choiceHub .ch-category-grid {
    grid-template-columns: 1fr;
  }#choiceHub .ch-category-card.ch-wide {
    grid-column: auto;
  }#choiceHub .ch-wide a {
    display: block;
  }#choiceHub .ch-wide .ch-category-visual {
    height: 150px;
  }#choiceHub .ch-wide .ch-category-body {
    padding: 20px 22px 22px;
  }#choiceHub .ch-needs-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }#choiceHub .ch-product-grid {
    grid-template-columns: 1fr;
  }#choiceHub .ch-guide-grid {
    grid-template-columns: 1fr;
  }#choiceHub .ch-consult-actions {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {#choiceHub .ch-hero h1:where(:not(.as-h2)),
#choiceHub .ch-hero div.h_h1 {
    font-size: 23px;
  }#choiceHub .ch-hero-note {
    display: none;
  }#choiceHub .ch-section-title {
    font-size: 20px;
  }#choiceHub .ch-needs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }#choiceHub .ch-need {
    display: block;
    min-height: 118px;
    padding: 13px 9px;
    text-align: center;
  }#choiceHub .ch-need-icon {
    margin: 0 auto 7px;
  }#choiceHub .ch-product {
    grid-template-columns: 92px 1fr;
  }#choiceHub .ch-product-visual {
    min-height: 155px;
  }#choiceHub .ch-consult {
    padding: 25px 20px;
  }#choiceHub .ch-consult h2,
#choiceHub .ch-consult h1.as-h2,
#choiceHub .ch-consult div.h_h2 {
    font-size: 20px;
  }#choiceHub .ch-bottom-links {
    grid-template-columns: 1fr;
  }
}/* =========================================================
   FIRE RETARDANT CURTAIN HUB
   /choice/remo-con_boen
========================================================= */

#boenHub,
#boenHub * {
  box-sizing: border-box;
}#boenHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#boenHub a {
  color: inherit;
  text-decoration: none;
}#boenHub .bh-section {
  margin-top: 50px;
}#boenHub .bh-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#boenHub .bh-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#boenHub .bh-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/boen-heroimage.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#boenHub .bh-hero-inner {
  position: relative;
  z-index: 2;
  width: 68%;
  padding: 39px 36px;
}#boenHub .bh-eyebrow {
  margin-bottom: 7px;
  color: #a8412e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#boenHub .bh-hero h1:where(:not(.as-h2)),
#boenHub .bh-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#boenHub .bh-hero h1:where(:not(.as-h2)) strong,
#boenHub .bh-hero div.h_h1 strong {
  color: #a8412e;
}#boenHub .bh-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#boenHub .bh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}#boenHub .bh-badges span {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #d9cbc2;
  border-radius: 30px;
  background: rgba(255,255,255,.85);
  color: #665950;
  font-size: 13px;
}/* =========================================================
   LEGAL / NEED
========================================================= */

#boenHub .bh-need-box {
  padding: 25px 24px;
  border: 1px solid #e2ded8;
  border-radius: 5px;
  background: #faf9f7;
}#boenHub .bh-need-box h2,
#boenHub .bh-need-box h1.as-h2,
#boenHub .bh-need-box div.h_h2 {
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  background: none;
  color: #282828;
  font-size: 20px;
  font-weight: 700;
}#boenHub .bh-need-box > p {
  margin: 0 0 18px;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}#boenHub .bh-need-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}#boenHub .bh-need-item {
  padding: 15px 13px;
  border: 1px solid #e2ddd7;
  border-radius: 4px;
  background: #fff;
}#boenHub .bh-need-icon {
  display: flex;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3e9e5;
  color: #9a3f30;
  font-size: 13px;
  font-weight: 700;
}#boenHub .bh-need-item strong {
  display: block;
  margin-bottom: 4px;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
}#boenHub .bh-need-item span {
  display: block;
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}#boenHub .bh-note {
  margin: 15px 0 0 !important;
  color: #777 !important;
  font-size: 13px !important;
}/* =========================================================
   DESIGN CATEGORY
========================================================= */

#boenHub .bh-design-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 25px;
}#boenHub .bh-design {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  min-height: 125px;
  overflow: hidden;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}#boenHub .bh-design:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(0,0,0,.07);
}#boenHub .bh-design-visual {
  min-height: 125px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 仮ビジュアル
   後から background-image:url(/templates/curtain_remo-con/css/...) に変更可能 */

#boenHub .bh-d-plain {
  background-image: url("/base/boen-plain.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-natural {
  background-image: url("/base/boen-natural.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-modern {
  background-image: url("/base/boen-modern.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-flower {
  background-image: url("/base/boen-flower.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-elegant {
  background-image: url("/base/boen-elegant.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-classic {
  background-image: url("/base/boen-classic.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-casual {
  background-image: url("/base/boen-casual.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-stripe {
  background-image: url("/base/boen-stripe.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-check {
  background-image: url("/base/boen-check.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-japanese {
  background-image: url("/base/boen-japanese.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-d-lace {
  background-image: url("/base/boen-lace.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#boenHub .bh-design-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 13px 14px;
}#boenHub .bh-design-body small {
  color: #a8412e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#boenHub .bh-design-body strong {
  display: block;
  margin: 2px 0 5px;
  color: #292929;
  font-size: 15px;
  line-height: 1.5;
}#boenHub .bh-design-body span {
  color: #777;
  font-size: 14px;
  line-height: 1.55;
}#boenHub .bh-design-body em {
  display: block;
  margin-top: 7px;
  color: #a8412e;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}/* =========================================================
   3 STEP
========================================================= */

#boenHub .bh-step-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}#boenHub .bh-step {
  position: relative;
  min-height: 170px;
  padding: 20px 16px 17px;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  background: #fff;
}#boenHub .bh-step-no {
  display: block;
  margin-bottom: 9px;
  color: #a8412e;
  font-size: 13px;
  font-weight: 700;
}#boenHub .bh-step strong {
  display: block;
  margin-bottom: 7px;
  color: #333;
  font-size: 15px;
}#boenHub .bh-step p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   LABEL BOX
========================================================= */

#boenHub .bh-label-box {
  margin-top: 48px;
  padding: 27px;
  border-left: 5px solid #a8412e;
  background: #f8f3f0;
}#boenHub .bh-label-box h2,
#boenHub .bh-label-box h1.as-h2,
#boenHub .bh-label-box div.h_h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #282828;
  font-size: 20px;
  font-weight: 700;
}#boenHub .bh-label-box p {
  margin: 0 0 10px;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}#boenHub .bh-label-box p:last-child {
  margin-bottom: 0;
}/* =========================================================
   FAQ
========================================================= */

#boenHub .bh-faq {
  margin-top: 22px;
  border-top: 1px solid #ddd;
}#boenHub .bh-faq-item {
  padding: 18px 4px;
  border-bottom: 1px solid #ddd;
}#boenHub .bh-q {
  position: relative;
  padding-left: 30px;
  color: #333;
  font-size: 15px;
  font-weight: 700;
}#boenHub .bh-q:before {
  position: absolute;
  left: 0;
  top: 0;
  color: #a8412e;
  font-size: 17px;
  font-weight: 700;
  content: "Q";
}#boenHub .bh-a {
  position: relative;
  margin-top: 8px;
  padding-left: 30px;
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}#boenHub .bh-a:before {
  position: absolute;
  left: 0;
  top: 0;
  color: #777;
  font-size: 16px;
  font-weight: 700;
  content: "A";
}/* =========================================================
   CONSULT
========================================================= */

#boenHub .bh-consult {
  margin-top: 48px;
  padding: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg,#fff9f4,#f6eee9);
  text-align: center;
}#boenHub .bh-consult small {
  color: #a8412e;
  font-size: 13px;
  font-weight: 700;
}#boenHub .bh-consult h2,
#boenHub .bh-consult h1.as-h2,
#boenHub .bh-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#boenHub .bh-consult p {
  margin: 0 auto;
  max-width: 570px;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#boenHub .bh-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #a8412e;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#boenHub .bh-back {
  margin-top: 30px;
  text-align: center;
}#boenHub .bh-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#boenHub .bh-hero {
    min-height: auto;
  }#boenHub .bh-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#boenHub .bh-hero h1:where(:not(.as-h2)),
#boenHub .bh-hero div.h_h1 {
    font-size: 25px;
  }#boenHub .bh-need-grid {
    grid-template-columns: 1fr;
  }#boenHub .bh-design-grid {
    grid-template-columns: 1fr;
  }#boenHub .bh-step-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#boenHub .bh-hero h1:where(:not(.as-h2)),
#boenHub .bh-hero div.h_h1 {
    font-size: 22px;
  }#boenHub .bh-title {
    font-size: 20px;
  }#boenHub .bh-design {
    grid-template-columns: 95px minmax(0,1fr);
  }#boenHub .bh-design-visual {
    min-height: 120px;
  }
}/* =========================================================
   COLOR CURTAIN HUB
   /choice/remo-con_color
========================================================= */

#colorHub,
#colorHub * {
  box-sizing: border-box;
}#colorHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#colorHub a {
  color: inherit;
  text-decoration: none;
}#colorHub .cl-section {
  margin-top: 50px;
}#colorHub .cl-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#colorHub .cl-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#colorHub .cl-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/cl-hero-imege.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#colorHub .cl-hero:after {
  position: absolute;
  right: -25px;
  top: -30px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    conic-gradient(
      #ddd5c8,
      #aebac0,
      #9daa91,
      #e1c279,
      #c88778,
      #b890a5,
      #90847d,
      #ddd5c8
    );
  opacity: .20;
  content: "";
}#colorHub .cl-hero-inner {
  position: relative;
  z-index: 2;
  width: 67%;
  padding: 40px 36px;
}#colorHub .cl-eyebrow {
  margin-bottom: 7px;
  color: #a91625;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#colorHub .cl-hero h1:where(:not(.as-h2)),
#colorHub .cl-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#colorHub .cl-hero h1:where(:not(.as-h2)) strong,
#colorHub .cl-hero div.h_h1 strong {
  color: #a91625;
}#colorHub .cl-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#colorHub .cl-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}#colorHub .cl-hero-tags span {
  padding: 4px 10px;
  border: 1px solid #ddd7d1;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  color: #666;
  font-size: 13px;
}/* =========================================================
   COLOR CARDS
========================================================= */

#colorHub .cl-color-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 25px;
}#colorHub .cl-color-card {
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}#colorHub .cl-color-card:hover {
  transform: translateY(-3px);
  border-color: #ccc;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}#colorHub .cl-swatch {
  position: relative;
  height: 105px;
  overflow: hidden;
}/* カーテンのヒダのような質感 */
#colorHub .cl-swatch:after {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.18) 0,
      rgba(255,255,255,.02) 15px,
      rgba(0,0,0,.06) 29px,
      rgba(255,255,255,.12) 45px
    );
  content: "";
}/* 13 COLORS */

#colorHub .cl-white {
  background: #f5f5f2;
}#colorHub .cl-ivory {
  background: #eee7d8;
}#colorHub .cl-beige {
  background: #cdbda4;
}#colorHub .cl-gray {
  background: #9da0a0;
}#colorHub .cl-brown {
  background: #796457;
}#colorHub .cl-black {
  background: #363636;
}#colorHub .cl-blue {
  background: #718da4;
}#colorHub .cl-green {
  background: #829681;
}#colorHub .cl-yellow {
  background: #dcbf65;
}#colorHub .cl-orange {
  background: #c98957;
}#colorHub .cl-red {
  background: #a65350;
}#colorHub .cl-pink {
  background: #d4aaa9;
}#colorHub .cl-lavender {
  background: #aaa0bb;
}#colorHub .cl-color-body {
  padding: 15px 15px 16px;
}#colorHub .cl-color-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}#colorHub .cl-color-name strong {
  color: #292929;
  font-size: 15px;
  line-height: 1.4;
}#colorHub .cl-color-name small {
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}#colorHub .cl-color-body p {
  min-height: 45px;
  margin: 7px 0 0;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}#colorHub .cl-more {
  display: block;
  margin-top: 8px;
  color: #a91625;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   3 STEPS
========================================================= */

#colorHub .cl-step-box {
  margin-top: 48px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f8f7f5;
}#colorHub .cl-step-box h2,
#colorHub .cl-step-box h1.as-h2,
#colorHub .cl-step-box div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#colorHub .cl-step-intro {
  margin: 0 0 22px;
  color: #666;
  font-size: 15px;
  text-align: center;
}#colorHub .cl-step-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
}#colorHub .cl-step {
  padding: 18px 15px;
  border: 1px solid #e2e0dc;
  border-radius: 5px;
  background: #fff;
}#colorHub .cl-step-no {
  display: block;
  margin-bottom: 7px;
  color: #a91625;
  font-size: 12px;
  font-weight: 700;
}#colorHub .cl-step strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#colorHub .cl-step p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   COLOR FAMILY
========================================================= */

#colorHub .cl-family-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}#colorHub .cl-family {
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  background: #fff;
}#colorHub .cl-family-bar {
  display: flex;
  height: 18px;
}#colorHub .cl-family-bar span {
  flex: 1;
}#colorHub .cl-family-body {
  padding: 17px 15px;
}#colorHub .cl-family-body strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#colorHub .cl-family-body p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   FUNCTION BOX
========================================================= */

#colorHub .cl-function {
  margin-top: 48px;
  padding: 27px;
  border-left: 5px solid #768998;
  background: #f3f6f7;
}#colorHub .cl-function h2,
#colorHub .cl-function h1.as-h2,
#colorHub .cl-function div.h_h2 {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 20px;
  font-weight: 700;
}#colorHub .cl-function p {
  margin: 0 0 14px;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}#colorHub .cl-function-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}#colorHub .cl-function-links a {
  padding: 6px 11px;
  border: 1px solid #ccd4d8;
  border-radius: 4px;
  background: #fff;
  color: #536875;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   CONSULT
========================================================= */

#colorHub .cl-consult {
  margin-top: 48px;
  padding: 28px;
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      #fff9f5,
      #f7f1ed
    );
  text-align: center;
}#colorHub .cl-consult small {
  color: #a91625;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#colorHub .cl-consult h2,
#colorHub .cl-consult h1.as-h2,
#colorHub .cl-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#colorHub .cl-consult p {
  max-width: 570px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#colorHub .cl-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #a91625;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#colorHub .cl-back {
  margin-top: 30px;
  text-align: center;
}#colorHub .cl-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#colorHub .cl-hero {
    min-height: auto;
  }#colorHub .cl-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#colorHub .cl-hero h1:where(:not(.as-h2)),
#colorHub .cl-hero div.h_h1 {
    font-size: 25px;
  }#colorHub .cl-color-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }#colorHub .cl-step-grid,
#colorHub .cl-family-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#colorHub .cl-hero h1:where(:not(.as-h2)),
#colorHub .cl-hero div.h_h1 {
    font-size: 22px;
  }#colorHub .cl-title {
    font-size: 20px;
  }#colorHub .cl-swatch {
    height: 90px;
  }#colorHub .cl-color-body {
    padding: 12px;
  }#colorHub .cl-color-body p {
    min-height: 58px;
  }
}/* =========================================================
   DESIGN CURTAIN HUB
   /choice/remo-con_design
========================================================= */

#designHub,
#designHub * {
  box-sizing: border-box;
}#designHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#designHub a {
  color: inherit;
  text-decoration: none;
}#designHub .dh-section {
  margin-top: 50px;
}#designHub .dh-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#designHub .dh-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#designHub .dh-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/dh-hero-imege.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#designHub .dh-hero-inner {
  position: relative;
  z-index: 2;
  width: 68%;
  padding: 40px 36px;
}#designHub .dh-eyebrow {
  margin-bottom: 7px;
  color: #8d5067;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#designHub .dh-hero h1:where(:not(.as-h2)),
#designHub .dh-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#designHub .dh-hero h1:where(:not(.as-h2)) strong,
#designHub .dh-hero div.h_h1 strong {
  color: #8d5067;
}#designHub .dh-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#designHub .dh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}#designHub .dh-tags span {
  padding: 4px 10px;
  border: 1px solid #ddd5d8;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  color: #655b60;
  font-size: 13px;
}/* =========================================================
   DESIGN CARDS
========================================================= */

#designHub .dh-design-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 15px;
  margin-top: 25px;
}#designHub .dh-design-card {
  display: grid;
  grid-template-columns: 135px minmax(0,1fr);
  min-height: 155px;
  overflow: hidden;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}#designHub .dh-design-card:hover {
  transform: translateY(-3px);
  border-color: #ccc;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}#designHub .dh-design-visual {
  width: 135px;
  min-height: 155px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* =========================================================
   仮デザイン
   ↓ 後で background-image に差し替え
========================================================= */

/* 無地 */
#designHub .dh-d-plain {
  background-image: url("/base/dh-d-plain.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* カジュアル */
#designHub .dh-d-casual {
  background-image: url("/base/dh-d-casual.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* ストライプ */
#designHub .dh-d-stripe {
  background-image: url("/base/dh-d-stripe.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* チェック */
#designHub .dh-d-check {
  background-image: url("/base/dh-d-check.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* ナチュラル */
#designHub .dh-d-natural {
  background-image: url("/base/dh-d-natural.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* クラシック */
#designHub .dh-d-classic {
  background-image: url("/base/dh-d-classic.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* モダン */
#designHub .dh-d-modern {
  background-image: url("/base/dh-d-modern.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* エレガント */
#designHub .dh-d-elegant {
  background-image: url("/base/dh-d-elegant.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 花柄 */
#designHub .dh-d-flower {
  background-image: url("/base/dh-d-flower.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 和風 */
#designHub .dh-d-japanese {
  background-image: url("/base/dh-d-japanese.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* =========================================================
   CARD TEXT
========================================================= */

#designHub .dh-design-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 16px 16px;
}#designHub .dh-design-body small {
  color: #8d5067;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}#designHub .dh-design-body h3 {
  margin: 2px 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}#designHub .dh-design-body p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}#designHub .dh-more {
  display: block;
  margin-top: 8px;
  color: #8d5067;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   DESIGN TIPS
========================================================= */

#designHub .dh-tips {
  margin-top: 48px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f8f6f4;
}#designHub .dh-tips h2,
#designHub .dh-tips h1.as-h2,
#designHub .dh-tips div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#designHub .dh-tips-intro {
  margin: 0 0 22px;
  color: #666;
  font-size: 15px;
  text-align: center;
}#designHub .dh-tip-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
}#designHub .dh-tip {
  padding: 18px 15px;
  border: 1px solid #e0ddd9;
  border-radius: 5px;
  background: #fff;
}#designHub .dh-tip-no {
  display: block;
  margin-bottom: 7px;
  color: #8d5067;
  font-size: 12px;
  font-weight: 700;
}#designHub .dh-tip strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#designHub .dh-tip p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   PATTERN GUIDE
========================================================= */

#designHub .dh-pattern-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}#designHub .dh-pattern-guide {
  padding: 20px 18px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fff;
}#designHub .dh-pattern-guide strong {
  display: block;
  margin-bottom: 7px;
  color: #333;
  font-size: 15px;
}#designHub .dh-pattern-guide p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.75;
}/* =========================================================
   NEXT FILTER
========================================================= */

#designHub .dh-next {
  margin-top: 48px;
  padding: 27px;
  border-left: 5px solid #7d8792;
  background: #f3f5f6;
}#designHub .dh-next h2,
#designHub .dh-next h1.as-h2,
#designHub .dh-next div.h_h2 {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 20px;
  font-weight: 700;
}#designHub .dh-next p {
  margin: 0 0 14px;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}#designHub .dh-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}#designHub .dh-next-links a {
  padding: 6px 11px;
  border: 1px solid #ccd1d5;
  border-radius: 4px;
  background: #fff;
  color: #56636d;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   STYLE LINK
========================================================= */

#designHub .dh-style-box {
  margin-top: 25px;
  padding: 22px 23px;
  border: 1px solid #e3ddd8;
  border-radius: 5px;
  background: #fcfaf8;
}#designHub .dh-style-box strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#designHub .dh-style-box p {
  margin: 0 0 12px;
  color: #777;
  font-size: 14px;
}#designHub .dh-style-box a {
  color: #8d5067;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   CONSULT
========================================================= */

#designHub .dh-consult {
  margin-top: 48px;
  padding: 28px;
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      #fff9f7,
      #f5eeee
    );
  text-align: center;
}#designHub .dh-consult small {
  color: #8d5067;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#designHub .dh-consult h2,
#designHub .dh-consult h1.as-h2,
#designHub .dh-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#designHub .dh-consult p {
  max-width: 570px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#designHub .dh-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #8d5067;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#designHub .dh-back {
  margin-top: 30px;
  text-align: center;
}#designHub .dh-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#designHub .dh-hero {
    min-height: auto;
  }#designHub .dh-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#designHub .dh-hero h1:where(:not(.as-h2)),
#designHub .dh-hero div.h_h1 {
    font-size: 25px;
  }#designHub .dh-design-grid {
    grid-template-columns: 1fr;
  }#designHub .dh-tip-grid {
    grid-template-columns: 1fr;
  }#designHub .dh-pattern-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#designHub .dh-hero h1:where(:not(.as-h2)),
#designHub .dh-hero div.h_h1 {
    font-size: 22px;
  }#designHub .dh-title {
    font-size: 20px;
  }#designHub .dh-design-card {
    grid-template-columns: 105px minmax(0,1fr);
  }#designHub .dh-design-visual {
    width: 105px;
    min-height: 145px;
  }
}/* =========================================================
   FUNCTION CURTAIN HUB
   /choice/remo-con_kino
========================================================= */

#functionHub,
#functionHub * {
  box-sizing: border-box;
}#functionHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#functionHub a {
  color: inherit;
  text-decoration: none;
}#functionHub .fn-section {
  margin-top: 50px;
}#functionHub .fn-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#functionHub .fn-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#functionHub .fn-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/fn-hero-imege.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#functionHub .fn-hero:after {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 390px;
  height: 390px;
  border: 45px solid rgba(74,112,130,.07);
  border-radius: 50%;
  content: "";
}#functionHub .fn-hero-inner {
  position: relative;
  z-index: 2;
  width: 68%;
  padding: 40px 36px;
}#functionHub .fn-eyebrow {
  margin-bottom: 7px;
  color: #477489;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#functionHub .fn-hero h1:where(:not(.as-h2)),
#functionHub .fn-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#functionHub .fn-hero h1:where(:not(.as-h2)) strong,
#functionHub .fn-hero div.h_h1 strong {
  color: #477489;
}#functionHub .fn-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#functionHub .fn-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}#functionHub .fn-hero-tags span {
  padding: 4px 10px;
  border: 1px solid #cedadd;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  color: #52666f;
  font-size: 13px;
}/* =========================================================
   FUNCTION CATEGORY
========================================================= */

#functionHub .fn-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 25px;
}#functionHub .fn-card {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr);
  min-height: 145px;
  overflow: hidden;
  border: 1px solid #e0e4e5;
  border-radius: 6px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}#functionHub .fn-card:hover {
  transform: translateY(-3px);
  border-color: #cbd3d6;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}#functionHub .fn-icon {
  display: flex;
  min-height: 145px;
  align-items: center;
  justify-content: center;
  background: #edf3f5;
  color: #477489;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
}#functionHub .fn-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 15px 15px;
}#functionHub .fn-body small {
  color: #7c969f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}#functionHub .fn-body h3 {
  margin: 2px 0 5px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}#functionHub .fn-body p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}#functionHub .fn-more {
  display: block;
  margin-top: 7px;
  color: #477489;
  font-size: 13px;
  font-weight: 700;
}/* アイコンごとに少し色を変える */

#functionHub .icon-light {
  background: #eef0f4;
  color: #596a86;
}#functionHub .icon-heat {
  background: #f6eee9;
  color: #a25f42;
}#functionHub .icon-cold {
  background: #edf4f5;
  color: #4f7d87;
}#functionHub .icon-privacy {
  background: #f1eef4;
  color: #716386;
}#functionHub .icon-sound {
  background: #eef1f3;
  color: #536c7a;
}#functionHub .icon-fire {
  background: #f6ece9;
  color: #a34d3c;
}#functionHub .icon-uv {
  background: #f6f2df;
  color: #9a7c36;
}#functionHub .icon-lightin {
  background: #f7f5e9;
  color: #998544;
}#functionHub .icon-pollen {
  background: #eff4e9;
  color: #6f8556;
}#functionHub .icon-clean {
  background: #eaf3ef;
  color: #4f806c;
}/* =========================================================
   REVERSE LOOKUP
========================================================= */

#functionHub .fn-reverse {
  margin-top: 48px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f7f8f8;
}#functionHub .fn-reverse h2,
#functionHub .fn-reverse h1.as-h2,
#functionHub .fn-reverse div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#functionHub .fn-reverse-intro {
  margin: 0 0 22px;
  color: #666;
  font-size: 15px;
  text-align: center;
}#functionHub .fn-reverse-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}#functionHub .fn-reverse-item {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e0e3e4;
  border-radius: 4px;
  background: #fff;
}#functionHub .fn-reverse-item span {
  color: #444;
  font-size: 14px;
  font-weight: 700;
}#functionHub .fn-reverse-item strong {
  color: #477489;
  font-size: 15px;
  white-space: nowrap;
}/* =========================================================
   COMBINATION
========================================================= */

#functionHub .fn-combination {
  margin-top: 50px;
}#functionHub .fn-combo-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}#functionHub .fn-combo {
  min-height: 175px;
  padding: 18px 15px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fff;
}#functionHub .fn-combo-label {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 7px;
  border-radius: 3px;
  background: #edf3f5;
  color: #477489;
  font-size: 12px;
  font-weight: 700;
}#functionHub .fn-combo strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#functionHub .fn-combo p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   DRAPE / LACE
========================================================= */

#functionHub .fn-role {
  margin-top: 48px;
  padding: 27px;
  border-left: 5px solid #718996;
  background: #f2f6f7;
}#functionHub .fn-role h2,
#functionHub .fn-role h1.as-h2,
#functionHub .fn-role div.h_h2 {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 20px;
  font-weight: 700;
}#functionHub .fn-role > p {
  margin: 0 0 18px;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}#functionHub .fn-role-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}#functionHub .fn-role-item {
  padding: 16px 15px;
  border: 1px solid #d8e0e3;
  border-radius: 4px;
  background: #fff;
}#functionHub .fn-role-item strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#functionHub .fn-role-item p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}#functionHub .fn-role-item a {
  display: block;
  margin-top: 8px;
  color: #477489;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   NEXT FILTER
========================================================= */

#functionHub .fn-next {
  margin-top: 28px;
  padding: 22px 23px;
  border: 1px solid #e1e2e2;
  border-radius: 5px;
  background: #fcfcfb;
}#functionHub .fn-next strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#functionHub .fn-next p {
  margin: 0 0 12px;
  color: #777;
  font-size: 14px;
}#functionHub .fn-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}#functionHub .fn-next-links a {
  padding: 6px 11px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   CONSULT
========================================================= */

#functionHub .fn-consult {
  margin-top: 48px;
  padding: 28px;
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      #f5fafb,
      #edf4f5
    );
  text-align: center;
}#functionHub .fn-consult small {
  color: #477489;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#functionHub .fn-consult h2,
#functionHub .fn-consult h1.as-h2,
#functionHub .fn-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#functionHub .fn-consult p {
  max-width: 570px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#functionHub .fn-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #477489;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#functionHub .fn-back {
  margin-top: 30px;
  text-align: center;
}#functionHub .fn-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#functionHub .fn-hero {
    min-height: auto;
  }#functionHub .fn-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#functionHub .fn-hero h1:where(:not(.as-h2)),
#functionHub .fn-hero div.h_h1 {
    font-size: 25px;
  }#functionHub .fn-grid {
    grid-template-columns: 1fr;
  }#functionHub .fn-reverse-grid {
    grid-template-columns: 1fr;
  }#functionHub .fn-combo-grid {
    grid-template-columns: 1fr;
  }#functionHub .fn-role-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#functionHub .fn-hero h1:where(:not(.as-h2)),
#functionHub .fn-hero div.h_h1 {
    font-size: 22px;
  }#functionHub .fn-title {
    font-size: 20px;
  }#functionHub .fn-card {
    grid-template-columns: 70px minmax(0,1fr);
  }#functionHub .fn-icon {
    min-height: 140px;
    font-size: 18px;
  }
}/* =========================================================
   LACE CURTAIN HUB
   /choice/remo-con_lace
========================================================= */

#laceHub,
#laceHub * {
  box-sizing: border-box;
}#laceHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#laceHub a {
  color: inherit;
  text-decoration: none;
}#laceHub .lh-section {
  margin-top: 50px;
}#laceHub .lh-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#laceHub .lh-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#laceHub .lh-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/lh-hero-imege.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#laceHub .lh-hero:after {
  position: absolute;
  right: -50px;
  top: -40px;
  width: 330px;
  height: 330px;
  border: 38px solid rgba(68,120,126,.05);
  border-radius: 50%;
  content: "";
}#laceHub .lh-hero-inner {
  position: relative;
  z-index: 2;
  width: 68%;
  padding: 40px 36px;
}#laceHub .lh-eyebrow {
  margin-bottom: 7px;
  color: #4f8085;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#laceHub .lh-hero h1:where(:not(.as-h2)),
#laceHub .lh-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#laceHub .lh-hero h1:where(:not(.as-h2)) strong,
#laceHub .lh-hero div.h_h1 strong {
  color: #4f8085;
}#laceHub .lh-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#laceHub .lh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}#laceHub .lh-tags span {
  padding: 4px 10px;
  border: 1px solid #d3dfe0;
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  color: #56696b;
  font-size: 13px;
}/* =========================================================
   VISIBILITY SELECT
========================================================= */

#laceHub .lh-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 25px;
}#laceHub .lh-visibility {
  position: relative;
  overflow: hidden;
  min-height: 175px;
  padding: 20px 19px;
  border: 1px solid #dfe5e6;
  border-radius: 6px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}#laceHub .lh-visibility:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}#laceHub .lh-v-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: #edf4f4;
  color: #4f8085;
  font-size: 12px;
  font-weight: 700;
}#laceHub .lh-visibility h3 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}#laceHub .lh-visibility p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}#laceHub .lh-v-more {
  display: block;
  margin-top: 10px;
  color: #4f8085;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   FUNCTION CARDS
========================================================= */

#laceHub .lh-function-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
  margin-top: 25px;
}#laceHub .lh-function {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  min-height: 135px;
  overflow: hidden;
  border: 1px solid #e1e4e4;
  border-radius: 5px;
  background: #fff;
}#laceHub .lh-function-icon {
  display: flex;
  min-height: 135px;
  align-items: center;
  justify-content: center;
  background: #edf4f4;
  color: #4f8085;
  font-size: 17px;
  font-weight: 700;
}#laceHub .lh-function-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 14px 14px;
}#laceHub .lh-function-body small {
  color: #749195;
  font-size: 12px;
  font-weight: 700;
}#laceHub .lh-function-body h3 {
  margin: 2px 0 5px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 15px;
  font-weight: 700;
}#laceHub .lh-function-body p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}#laceHub .lh-function-body span {
  display: block;
  margin-top: 7px;
  color: #4f8085;
  font-size: 14px;
  font-weight: 700;
}/* 色分け */

#laceHub .lh-icon-heat {
  background: #f4eee8;
  color: #a36749;
}#laceHub .lh-icon-uv {
  background: #f5f2df;
  color: #99803e;
}#laceHub .lh-icon-light {
  background: #f7f5e8;
  color: #9a884d;
}#laceHub .lh-icon-design {
  background: #f3edf2;
  color: #8c657d;
}#laceHub .lh-icon-japan {
  background: #f2eee7;
  color: #806e57;
}#laceHub .lh-icon-fire {
  background: #f6ece9;
  color: #a25040;
}/* =========================================================
   MIRROR LEVEL
========================================================= */

#laceHub .lh-mirror-box {
  margin-top: 48px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f7f9f9;
}#laceHub .lh-mirror-box h2,
#laceHub .lh-mirror-box h1.as-h2,
#laceHub .lh-mirror-box div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#laceHub .lh-mirror-intro {
  max-width: 620px;
  margin: 0 auto 22px;
  color: #666;
  font-size: 15px;
  line-height: 1.85;
  text-align: center;
}#laceHub .lh-mirror-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}#laceHub .lh-mirror {
  padding: 18px 14px;
  border: 1px solid #dfe4e5;
  border-radius: 5px;
  background: #fff;
  text-align: center;
}#laceHub .lh-meter {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
}#laceHub .lh-meter i {
  display: block;
  width: 20px;
  height: 7px;
  border-radius: 10px;
  background: #dce4e5;
}#laceHub .lh-meter .on {
  background: #4f8085;
}#laceHub .lh-mirror strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#laceHub .lh-mirror p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}#laceHub .lh-mirror a {
  display: block;
  margin-top: 9px;
  color: #4f8085;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   SELECT GUIDE
========================================================= */

#laceHub .lh-guide {
  margin-top: 48px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f8f7f5;
}#laceHub .lh-guide h2,
#laceHub .lh-guide h1.as-h2,
#laceHub .lh-guide div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#laceHub .lh-guide-intro {
  margin: 0 0 22px;
  color: #666;
  font-size: 15px;
  text-align: center;
}#laceHub .lh-guide-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
}#laceHub .lh-guide-item {
  padding: 18px 15px;
  border: 1px solid #e1ded9;
  border-radius: 5px;
  background: #fff;
}#laceHub .lh-guide-no {
  display: block;
  margin-bottom: 7px;
  color: #4f8085;
  font-size: 12px;
  font-weight: 700;
}#laceHub .lh-guide-item strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#laceHub .lh-guide-item p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   NIGHT NOTE
========================================================= */

#laceHub .lh-night-note {
  margin-top: 48px;
  padding: 25px 25px;
  border-left: 5px solid #596b77;
  background: #f2f4f5;
}#laceHub .lh-night-note h2,
#laceHub .lh-night-note h1.as-h2,
#laceHub .lh-night-note div.h_h2 {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 19px;
  font-weight: 700;
}#laceHub .lh-night-note p {
  margin: 0 0 10px;
  color: #555;
  font-size: 14px;
  line-height: 1.85;
}#laceHub .lh-night-note p:last-child {
  margin-bottom: 0;
}#laceHub .lh-night-note a {
  color: #4f8085;
  font-weight: 700;
}/* =========================================================
   NEXT FILTER
========================================================= */

#laceHub .lh-next {
  margin-top: 28px;
  padding: 22px 23px;
  border: 1px solid #e1e2e2;
  border-radius: 5px;
  background: #fcfcfb;
}#laceHub .lh-next strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#laceHub .lh-next p {
  margin: 0 0 12px;
  color: #777;
  font-size: 14px;
}#laceHub .lh-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}#laceHub .lh-next-links a {
  padding: 6px 11px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   CONSULT
========================================================= */

#laceHub .lh-consult {
  margin-top: 48px;
  padding: 28px;
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      #f7fbfb,
      #eef5f5
    );
  text-align: center;
}#laceHub .lh-consult small {
  color: #4f8085;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#laceHub .lh-consult h2,
#laceHub .lh-consult h1.as-h2,
#laceHub .lh-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#laceHub .lh-consult p {
  max-width: 570px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#laceHub .lh-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #4f8085;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#laceHub .lh-back {
  margin-top: 30px;
  text-align: center;
}#laceHub .lh-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#laceHub .lh-hero {
    min-height: auto;
  }#laceHub .lh-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#laceHub .lh-hero h1:where(:not(.as-h2)),
#laceHub .lh-hero div.h_h1 {
    font-size: 25px;
  }#laceHub .lh-visibility-grid,
#laceHub .lh-function-grid {
    grid-template-columns: 1fr;
  }#laceHub .lh-mirror-grid,
#laceHub .lh-guide-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#laceHub .lh-hero h1:where(:not(.as-h2)),
#laceHub .lh-hero div.h_h1 {
    font-size: 22px;
  }#laceHub .lh-title {
    font-size: 20px;
  }#laceHub .lh-function {
    grid-template-columns: 65px minmax(0,1fr);
  }#laceHub .lh-function-icon {
    min-height: 130px;
    font-size: 16px;
  }
}/* =========================================================
   NAYAMI / PROBLEM SOLUTION HUB
   /choice/remo-con_nayami
========================================================= */

#nayamiHub,
#nayamiHub * {
  box-sizing: border-box;
}#nayamiHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#nayamiHub a {
  color: inherit;
  text-decoration: none;
}#nayamiHub .nh-section {
  margin-top: 52px;
}#nayamiHub .nh-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#nayamiHub .nh-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#nayamiHub .nh-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/nh-hero-imege.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#nayamiHub .nh-hero:after {
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 390px;
  height: 390px;
  border: 48px solid rgba(151,74,57,.045);
  border-radius: 50%;
  content: "";
}#nayamiHub .nh-hero-inner {
  position: relative;
  z-index: 2;
  width: 69%;
  padding: 40px 36px;
}#nayamiHub .nh-eyebrow {
  margin-bottom: 7px;
  color: #9a4d3c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#nayamiHub .nh-hero h1:where(:not(.as-h2)),
#nayamiHub .nh-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#nayamiHub .nh-hero h1:where(:not(.as-h2)) strong,
#nayamiHub .nh-hero div.h_h1 strong {
  color: #9a4d3c;
}#nayamiHub .nh-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#nayamiHub .nh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 19px;
}#nayamiHub .nh-tags span {
  padding: 4px 10px;
  border: 1px solid #ded5cf;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  color: #685d58;
  font-size: 13px;
}/* =========================================================
   TOP 6
========================================================= */

#nayamiHub .nh-top-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
  margin-top: 25px;
}#nayamiHub .nh-top-card {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}#nayamiHub .nh-top-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(0,0,0,.08);
}#nayamiHub .nh-top-icon {
  display: flex;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}#nayamiHub .nh-top-card strong {
  display: block;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
}#nayamiHub .nh-top-card small {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: 12px;
}#nayamiHub .i-hot {
  background: #f6ece6;
  color: #a35e3d;
}#nayamiHub .i-cold {
  background: #eaf2f5;
  color: #527787;
}#nayamiHub .i-light {
  background: #f5f1dc;
  color: #96803f;
}#nayamiHub .i-eye {
  background: #eeeaf2;
  color: #736481;
}#nayamiHub .i-sound {
  background: #edf0f2;
  color: #5d707a;
}#nayamiHub .i-view {
  background: #e9f2ed;
  color: #5a806b;
}/* =========================================================
   PROBLEM GROUP
========================================================= */

#nayamiHub .nh-group {
  margin-top: 48px;
}#nayamiHub .nh-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}#nayamiHub .nh-group-icon {
  display: flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}#nayamiHub .nh-group-head h2,
#nayamiHub .nh-group-head h1.as-h2,
#nayamiHub .nh-group-head div.h_h2 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
  font-weight: 700;
}#nayamiHub .nh-group-head p {
  margin: 2px 0 0;
  color: #888;
  font-size: 14px;
}#nayamiHub .nh-problem-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}#nayamiHub .nh-problem {
  display: flex;
  min-height: 125px;
  flex-direction: column;
  justify-content: center;
  padding: 16px 17px;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  background: #fff;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}#nayamiHub .nh-problem:hover {
  border-color: #ccc;
  box-shadow: 0 5px 16px rgba(0,0,0,.06);
}#nayamiHub .nh-problem small {
  color: #a45b4c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}#nayamiHub .nh-problem h3 {
  margin: 2px 0 5px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}#nayamiHub .nh-problem p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}#nayamiHub .nh-solution {
  display: block;
  margin-top: 8px;
  color: #9a4d3c;
  font-size: 13px;
  font-weight: 700;
}/* group colors */

#nayamiHub .group-temp .nh-group-icon {
  background: #f6ece6;
  color: #9f6044;
}#nayamiHub .group-light .nh-group-icon {
  background: #f5f1dd;
  color: #95803e;
}#nayamiHub .group-view .nh-group-icon {
  background: #ebf2ef;
  color: #56806a;
}#nayamiHub .group-life .nh-group-icon {
  background: #edf1f3;
  color: #59727e;
}/* =========================================================
   QUICK TABLE
========================================================= */

#nayamiHub .nh-quick {
  margin-top: 50px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f7f8f8;
}#nayamiHub .nh-quick h2,
#nayamiHub .nh-quick h1.as-h2,
#nayamiHub .nh-quick div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#nayamiHub .nh-quick-intro {
  margin: 0 0 20px;
  color: #666;
  font-size: 15px;
  text-align: center;
}#nayamiHub .nh-quick-list {
  border-top: 1px solid #ddd;
}#nayamiHub .nh-quick-row {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: 10px;
  padding: 11px 7px;
  border-bottom: 1px solid #ddd;
}#nayamiHub .nh-quick-row span {
  color: #444;
  font-size: 14px;
}#nayamiHub .nh-quick-row strong {
  color: #9a4d3c;
  font-size: 15px;
  text-align: right;
}/* =========================================================
   IMPORTANT NOTE
========================================================= */

#nayamiHub .nh-note {
  margin-top: 30px;
  padding: 22px 23px;
  border-left: 5px solid #788a93;
  background: #f2f5f6;
}#nayamiHub .nh-note strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#nayamiHub .nh-note p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}/* =========================================================
   NEXT
========================================================= */

#nayamiHub .nh-next {
  margin-top: 28px;
  padding: 22px 23px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fcfbfa;
}#nayamiHub .nh-next strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#nayamiHub .nh-next p {
  margin: 0 0 12px;
  color: #777;
  font-size: 14px;
}#nayamiHub .nh-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}#nayamiHub .nh-next-links a {
  padding: 6px 11px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   CONSULT
========================================================= */

#nayamiHub .nh-consult {
  margin-top: 48px;
  padding: 29px 26px;
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      #fff8f3,
      #f6eee9
    );
  text-align: center;
}#nayamiHub .nh-consult small {
  color: #9a4d3c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#nayamiHub .nh-consult h2,
#nayamiHub .nh-consult h1.as-h2,
#nayamiHub .nh-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#nayamiHub .nh-consult p {
  max-width: 580px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#nayamiHub .nh-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #a14e3d;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#nayamiHub .nh-back {
  margin-top: 30px;
  text-align: center;
}#nayamiHub .nh-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#nayamiHub .nh-hero {
    min-height: auto;
  }#nayamiHub .nh-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#nayamiHub .nh-hero h1:where(:not(.as-h2)),
#nayamiHub .nh-hero div.h_h1 {
    font-size: 25px;
  }#nayamiHub .nh-top-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }#nayamiHub .nh-problem-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#nayamiHub .nh-hero h1:where(:not(.as-h2)),
#nayamiHub .nh-hero div.h_h1 {
    font-size: 22px;
  }#nayamiHub .nh-title {
    font-size: 20px;
  }#nayamiHub .nh-group-head h2,
#nayamiHub .nh-group-head h1.as-h2,
#nayamiHub .nh-group-head div.h_h2 {
    font-size: 18px;
  }#nayamiHub .nh-top-card {
    min-height: 125px;
    padding: 14px 9px;
  }#nayamiHub .nh-quick-row {
    grid-template-columns: 1fr;
    gap: 1px;
  }#nayamiHub .nh-quick-row strong {
    text-align: left;
  }
}/* =========================================================
   STYLE / BRAND CURTAIN HUB
   /choice/remo-con_popu
========================================================= */

#styleHub,
#styleHub * {
  box-sizing: border-box;
}#styleHub {
  width: 100%;
  margin: 0 auto 50px;
  color: #333;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
}#styleHub a {
  color: inherit;
  text-decoration: none;
}#styleHub .sh-section {
  margin-top: 52px;
}#styleHub .sh-title {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}#styleHub .sh-lead {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}/* =========================================================
   HERO
========================================================= */

#styleHub .sh-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  margin-bottom: 45px;
  border-radius: 4px;

  background-image:
    linear-gradient(
      90deg,
      rgba(249,247,243,.98) 0%,
      rgba(249,247,243,.95) 40%,
      rgba(249,247,243,.65) 58%,
      rgba(249,247,243,.15) 78%
    ),
    url("/base/sh-hero-imege.jpeg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}#styleHub .sh-hero:after {
  position: absolute;
  right: -70px;
  top: -80px;
  width: 380px;
  height: 380px;
  border: 48px solid rgba(95,115,93,.05);
  border-radius: 50%;
  content: "";
}#styleHub .sh-hero-inner {
  position: relative;
  z-index: 2;
  width: 69%;
  padding: 40px 36px;
}#styleHub .sh-eyebrow {
  margin-bottom: 7px;
  color: #79664e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}#styleHub .sh-hero h1:where(:not(.as-h2)),
#styleHub .sh-hero div.h_h1 {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
}#styleHub .sh-hero h1:where(:not(.as-h2)) strong,
#styleHub .sh-hero div.h_h1 strong {
  color: #79664e;
}#styleHub .sh-hero p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}#styleHub .sh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 19px;
}#styleHub .sh-tags span {
  padding: 4px 10px;
  border: 1px solid #ddd5cb;
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  color: #655e57;
  font-size: 13px;
}/* =========================================================
   TASTE CARDS
========================================================= */

#styleHub .sh-taste-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 15px;
  margin-top: 25px;
}#styleHub .sh-taste {
  overflow: hidden;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}#styleHub .sh-taste:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}#styleHub .sh-taste-visual {
  position: relative;
  height: 175px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-taste-visual:after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.10)
    );
  content: "";
}/* =========================================================
   仮ビジュアル
   実画像に変更すると非常に効果的
========================================================= */

/* 北欧 */
#styleHub .sh-nordic {
  background-image: url("/base/sh-nordic.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* ナチュラル */
#styleHub .sh-natural {
  background-image: url("/base/sh-natural.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 韓国 */
#styleHub .sh-korea {
  background-image: url("/base/sh-korea.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* ポップ */
#styleHub .sh-pop {
  background-image: url("/base/sh-pop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* 男前 */
#styleHub .sh-mens {
  background-image: url("/base/sh-mens.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}/* ラグジュアリー */
#styleHub .sh-luxury {
  background-image: url("/base/sh-luxury.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-taste-body {
  padding: 17px 18px 18px;
}#styleHub .sh-taste-body small {
  color: #8c7255;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}#styleHub .sh-taste-body h3 {
  margin: 2px 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 17px;
  font-weight: 700;
}#styleHub .sh-taste-body p {
  min-height: 53px;
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}#styleHub .sh-more {
  display: block;
  margin-top: 8px;
  color: #79664e;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   MATERIAL
========================================================= */

#styleHub .sh-material-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}#styleHub .sh-material {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  min-height: 125px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  background: #fff;
}#styleHub .sh-material-visual {
  min-height: 125px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-linen {
  background-image: url("/base/sh-linen.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-gauze {
  background-image: url("/base/sh-gauze.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-linenlike {
  background-image: url("/base/sh-linenlike.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-fashionlace {
  background-image: url("/base/sh-fashionlace.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}#styleHub .sh-material-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 13px 14px;
}#styleHub .sh-material-body small {
  color: #8c7255;
  font-size: 12px;
  font-weight: 700;
}#styleHub .sh-material-body strong {
  display: block;
  margin: 2px 0 5px;
  color: #333;
  font-size: 15px;
}#styleHub .sh-material-body p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}#styleHub .sh-material-body span {
  display: block;
  margin-top: 7px;
  color: #79664e;
  font-size: 14px;
  font-weight: 700;
}/* =========================================================
   BRAND
========================================================= */

#styleHub .sh-brand-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
  margin-top: 24px;
}#styleHub .sh-brand {
  min-height: 150px;
  padding: 19px 17px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}#styleHub .sh-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}#styleHub .sh-brand small {
  display: block;
  margin-bottom: 5px;
  color: #987e5d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}#styleHub .sh-brand h3 {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 16px;
  font-weight: 700;
}#styleHub .sh-brand p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}#styleHub .sh-brand-more {
  display: block;
  margin-top: 8px;
  color: #79664e;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   DESIGN BRIDGE
========================================================= */

#styleHub .sh-design-bridge {
  margin-top: 48px;
  padding: 25px 24px;
  border-left: 5px solid #8a6975;
  background: #f7f3f5;
}#styleHub .sh-design-bridge h2,
#styleHub .sh-design-bridge h1.as-h2,
#styleHub .sh-design-bridge div.h_h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 19px;
  font-weight: 700;
}#styleHub .sh-design-bridge p {
  margin: 0 0 12px;
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}#styleHub .sh-design-bridge a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid #d7cbd0;
  border-radius: 4px;
  background: #fff;
  color: #805e6b;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   HOW TO CHOOSE
========================================================= */

#styleHub .sh-guide {
  margin-top: 48px;
  padding: 27px 24px;
  border-radius: 6px;
  background: #f8f7f5;
}#styleHub .sh-guide h2,
#styleHub .sh-guide h1.as-h2,
#styleHub .sh-guide div.h_h2 {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}#styleHub .sh-guide-intro {
  margin: 0 0 22px;
  color: #666;
  font-size: 15px;
  text-align: center;
}#styleHub .sh-guide-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
}#styleHub .sh-guide-item {
  padding: 18px 15px;
  border: 1px solid #e1ded9;
  border-radius: 5px;
  background: #fff;
}#styleHub .sh-guide-no {
  display: block;
  margin-bottom: 7px;
  color: #79664e;
  font-size: 12px;
  font-weight: 700;
}#styleHub .sh-guide-item strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
}#styleHub .sh-guide-item p {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.7;
}/* =========================================================
   NEXT
========================================================= */

#styleHub .sh-next {
  margin-top: 28px;
  padding: 22px 23px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #fcfbfa;
}#styleHub .sh-next strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 15px;
}#styleHub .sh-next p {
  margin: 0 0 12px;
  color: #777;
  font-size: 14px;
}#styleHub .sh-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}#styleHub .sh-next-links a {
  padding: 6px 11px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   CONSULT
========================================================= */

#styleHub .sh-consult {
  margin-top: 48px;
  padding: 29px 26px;
  border-radius: 6px;
  background:
    linear-gradient(
      135deg,
      #faf8f3,
      #f2ece4
    );
  text-align: center;
}#styleHub .sh-consult small {
  color: #79664e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}#styleHub .sh-consult h2,
#styleHub .sh-consult h1.as-h2,
#styleHub .sh-consult div.h_h2 {
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #292929;
  font-size: 21px;
}#styleHub .sh-consult p {
  max-width: 580px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  line-height: 1.85;
}#styleHub .sh-consult-btn {
  display: inline-block;
  margin-top: 17px;
  padding: 11px 27px;
  border-radius: 4px;
  background: #79664e;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
}/* =========================================================
   BACK
========================================================= */

#styleHub .sh-back {
  margin-top: 30px;
  text-align: center;
}#styleHub .sh-back a {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:700px) {#styleHub .sh-hero {
    min-height: auto;
  }#styleHub .sh-hero-inner {
    width: 100%;
    padding: 30px 22px;
  }#styleHub .sh-hero h1:where(:not(.as-h2)),
#styleHub .sh-hero div.h_h1 {
    font-size: 25px;
  }#styleHub .sh-taste-grid,
#styleHub .sh-material-grid,
#styleHub .sh-brand-grid {
    grid-template-columns: 1fr;
  }#styleHub .sh-guide-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:480px) {#styleHub .sh-hero h1:where(:not(.as-h2)),
#styleHub .sh-hero div.h_h1 {
    font-size: 22px;
  }#styleHub .sh-title {
    font-size: 20px;
  }#styleHub .sh-taste-visual {
    height: 150px;
  }#styleHub .sh-material {
    grid-template-columns: 90px minmax(0,1fr);
  }
}


/* =========================================================
   READABILITY REFINEMENTS
   2026-08 可読性優先調整
========================================================= */

@media screen and (max-width:480px) {#choiceHub .ch-section-lead,
#boenHub .bh-lead,
#colorHub .cl-lead,
#designHub .dh-lead,
#functionHub .fn-lead,
#laceHub .lh-lead,
#nayamiHub .nh-lead,
#styleHub .sh-lead {
    text-align: left;
  }
}