/* ここから taya_con.css を直接使わずに済むよう、
   このページで実際に使っているクラスだけを移植したもの。
   data-browse-mode は常に "P" 固定のページなので、S(スマホ)側のルールは元々無効だったため省略。 */

.pc {
  display: inline-block !important;
}

.sp {
  display: none !important;
}

@media (max-width: 767px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: inline-block !important;
  }
}

h1 {
  margin: 0;
}

.page-free-feature-father {
  width: 100%;
  padding: 0;
}

/* サイエンスタイ特集の一番上の画像と同じ位置・同じサイズになるよう、
   padding-topでアスペクト比を固定してobject-fit:coverで敷き詰める方式に統一。
   1枚画像なのでスライド切り替え(active/transition)は省略。 */
.main-visual {
  position: relative;
  width: 100%;
  background-color: #000;
  overflow: hidden;
}

.mv-slider {
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .mv-slider {
    height: 0;
    padding-top: 36.6%;
  }
}

@media (max-width: 767px) {
  .mv-slider {
    height: 0;
    padding-top: 168.3%;
  }
}

.mv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/* 夏特集ページ(nabe2.css)の .caption と同じ見た目 */
.main-visual .caption {
  position: absolute;
  bottom: 8%;
  left: 6%;
  z-index: 20;
  color: #fff;
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 85%;
  padding: 12px 20px;
  border-radius: 4px;
}

.main-visual .caption span {
  display: block;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

@media screen and (max-width: 768px) {
  .main-visual .caption {
    font-size: 1.3rem;
    bottom: 6%;
    left: 5%;
    right: 5%;
    line-height: 1.5;
    padding: 10px 14px;
    text-align: left;
  }

  .main-visual .caption span {
    font-size: 0.9rem;
    margin-top: 4px;
  }
}

.father_intro {
  width: calc(1200 / 1366 * 100%);
  max-width: 1200px;
  margin: 70px auto 0;
}

/* 夏特集ページの h1（nabe2.css + summer2026002.css）と同じ構造。
   配色だけ夏の水色ではなく、このページの紺・ゴールドに変更 */
.page-free-feature-father h1 {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  margin: 50px auto 10px;
  letter-spacing: 0.08em;
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  color: #444444;
  padding-bottom: 10px;
}

.page-free-feature-father h1::after {
  content: "";
  display: block;
  width: 50%;
  margin: 10px auto 0;
  border-top: 2px solid #a7945f;
}

.page-free-feature-father h1 span {
  display: block;
  font-size: 1.3rem;
  color: #a7945f;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-top: 8px;
}

@media screen and (max-width: 768px) {
  .page-free-feature-father h1 {
    font-size: 1.4rem;
    margin: 40px auto 8px;
  }
}

/* サイエンスタイページの h2.nabe-h2-sub と同じフォント・文字色。
   (nabe3.css の .taya-lp h2 の書体・.taya-lp の文字色 #444444 を移植) */
.nabe-h2-sub {
  font-size: 1.4rem;
  font-weight: 550;
  text-align: center;
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  letter-spacing: 0.06em;
  color: #444444;
  margin: 10px auto 10px;
}

.page-free-feature-father .intro-text {
  text-align: center;
  font-size: 15px;
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: .8pt;
  color: #444444;
  margin-bottom: 20px;
}

.father_header {
  text-align: center;
  font-size: 30px;
  color: #000080;
  font-weight: normal;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.father_header span {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #000;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.05em;
}

.father_header::after {
  content: "";
  width: 80px;
  height: 1px;
  display: block;
  margin: 10px auto;
  background: #b4b4b4;
}

.father_header2 {
  text-align: center;
  font-size: 26px;
  color: #000;
  font-weight: normal;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.father_header2 span {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #a7945f;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .father_header2 {
    font-size: 20px;
  }
}

.visual2 {
  text-align: center;
  margin-bottom: 40px;
}

.visual2 img {
  width: calc(1000 / 1200 * 100%);
}

.page-free-feature-father .block-lead {
  width: calc(1200 / 1366 * 100%);
  max-width: 1200px;
  margin: 60px auto 80px;
}

.father_item {
  width: calc(1200 / 1366 * 100%);
  max-width: 1200px;
  margin: 100px auto;
}

.father_item .item {
  margin: 80px 0 180px;
}

.father_item .item:last-child {
  margin-bottom: 40px;
}

.ulitem2 {
  margin-top: 50px;
  margin-bottom: 50px;
  justify-content: center;
  display: flex;
}

.page-free-feature-father .liitem {
  list-style: none;
  width: calc(200 / 1200 * 100%);
  max-width: 200px;
  margin: 0 10px;
  text-align: center;
}

.page-free-feature-father .liitem a {
  text-decoration: none !important;
  font-size: 12px;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 500;
}

.liitem a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.liitem img {
  width: 100%;
}

.more-btn {
  width: 299px;
  margin: 40px auto 90px;
}

.more-btn a {
  position: relative;
  display: block;
  padding: calc(15 / 225 * 100%) 0;
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1;
  background: #a7945f;
  transition: all 0.5s ease;
  text-decoration: none !important;
}

.more-btn a:hover {
  text-decoration: none;
  opacity: 0.85;
}

.tayahr {
  width: 50%;
  margin: 0 auto;
  border-top: 1px solid #b4b4b4;
}

.tayahr2 {
  width: 20%;
  margin: 0 auto;
  border-top: 1px solid #b4b4b4;
}

/* 写真(.visual2 img)と同じ幅のグレーの区切り線。
   直前の .item の margin-bottom:180px 分を負のマージンで引き上げ、空きすぎを解消 */
.section-divider {
  width: calc(1000 / 1200 * 100%);
  margin: -140px auto 0;
  border: none;
  border-top: 1px solid #ddd;
}

.hr-end {
  width: 70%;
  margin: 0 auto;
  border: none;
  border-top: 1px solid #b4b4b4;
}

@media screen and (max-width: 767px) {
  .hr-end {
    width: 85%;
  }

  .father_item .item:last-child .more-btn {
    margin-bottom: 40px;
  }

  .father_outro {
    margin: 40px auto;
  }
}

.father_outro {
  width: calc(1200 / 1366 * 100%);
  max-width: 1200px;
  margin: 80px auto;
}

.header {
  margin-bottom: 30px;
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.header span {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #a7945f;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.05em;
}

.contents-block {
  justify-content: center;
  display: flex;
}

.recocon {
  list-style: none;
  width: calc(500 / 1285 * 100%);
  max-width: 500px;
  margin: 0 20px;
}

.recocon a {
  text-decoration: none !important;
}

.recocon a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.recocon img {
  width: 100%;
}

.con-header {
  font-size: 22px;
  font-weight: normal;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin: 20px 0 10px 0;
  text-align: left;
}

.con-txt {
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .8pt;
  margin: 10px 0 90px 0;
  text-align: left;
}

.finder-nav {
  display: flex;
  gap: 24px;
  max-width: 900px;
  margin: 34px auto 0
}

.finder-nav__btn {
  flex: 1;
  text-align: center;
  padding: 28px 16px;
  border: 1px solid #ddd;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .2s
}

.finder-nav__btn:hover {
  border-color: #a7945f
}

.finder-nav__en {
  display: block;
  font-size: 15px;
  font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: .06em;
  margin-bottom: 6px
}

.finder-nav__ja {
  display: block;
  font-size: 12.5px;
  color: #a7945f
}

@media (max-width:640px) {
  .finder-nav {
    flex-direction: column
  }
}

/* item_list3.css の .item-list（JS生成の商品タイル）は、
   個々のタイルが class="item" を持つせいで .father_item .item の
   margin:80px 0 180px を拾ってしまいズレる。ここで打ち消す。
   どのセクション（items / items2 / items3 ...）で使っても効くよう
   id指定ではなく構造で当てている。 */
.block-lead:has(+ .item-list) {
  margin-bottom: 20px
}

.item-list {
  margin: 0 auto !important
}

.item-list .item {
  margin: 0 !important
}

.item-list + .more-btn {
  margin-top: 20px !important
}

.kessiki-faq .faq-list {
  max-width: 900px;
  margin: 34px auto 0
}

.faq-item {
  border-bottom: 1px solid #ddd
}

.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 18px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit
}

.faq-q__mark {
  font-weight: 600;
  flex: none
}

.faq-q__text {
  flex: 1
}

.faq-q__ico {
  flex: none;
  color: #999
}

.faq-q__ico::before {
  content: "＋"
}

.faq-q[aria-expanded="true"] .faq-q__ico::before {
  content: "－"
}

.faq-a {
  padding: 0 4px 18px 34px
}

.faq-a p {
  margin: 0;
  font-size: 12.5px;
  color: #777;
  line-height: 1.8
}

/* --- 改行制御クラスの定義 --- */
.is-pc { display: inline; }
.is-sp { display: none; }

@media screen and (max-width: 768px) {
  .is-pc { display: none; }
  .is-sp { display: inline; }
}

/* --- 分割させたくない塊 --- */
.nb { display: inline-block; }

/* --- SP時の折り返し制御 --- */
@media screen and (max-width: 768px) {

  .father_intro h1,
  .father_header,
  .father_header2,
  .intro-text {
    text-align: center;
    word-break: auto-phrase;   /* 文節単位で改行 */
    text-wrap: balance;        /* 各行の長さを均等化＝中央揃えが一番きれいに見える */
    line-break: strict;
  }

  .block-lead .intro-text {
    max-width: 32em;           /* 行が長くなりすぎるのを防ぐ */
    margin-inline: auto;
  }
}
/* PC・SP共通 */
.block-lead .intro-text {
 #formal-bow .intro-text .nb { display: inline-block; }
}

@media screen and (max-width: 768px) {
  .block-lead .intro-text {
    max-width: 20em;
    font-size: 0.9rem;
    line-height: 2;
  }
}
#formal-bow .block-lead {
  margin-bottom: 40px;   /* Ⅰと同じ値に */
}

#formal-white .block-lead,
#formal-morning .block-lead {
  margin-bottom: 40px;   /* Ⅱと同じ値に */
}

.page-free-feature-father h1,
.page-free-feature-father h2,
.page-free-feature-father h3 {
  background: none;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  border: none;
}

.page-free-feature-father を前置してあ