@charset "utf-8";
/* CSS Document */

/* ============================================================
   【共通】セクション余白・見出し
   複数セクションで共有。セクション固有スタイルは下部へ。
   ============================================================ */

/* 共通：セクション間の縦リズム */
.naire-kinenhin-section {
  margin: 32px 0 0;
  box-sizing: border-box;
}

/* 共通：コンテンツ横余白（フルブリードの帯見出しを使わないセクション向け） */
.naire-kinenhin-section--pad {
  padding: 0 16px;
}

/* 共通：見出しベース（reset） */
.naire-kinenhin-heading {
  margin: 0;
  font-weight: bold;
  color: #333;
}

/* 共通：帯見出し（カテゴリ / おすすめ商品） */
.naire-kinenhin-heading--large {
  padding: 8px 16px;
  font-size: 20px;
  line-height: 1;
  color: #FFF;
}

/* 共通：帯見出し色（カテゴリ） */
.naire-kinenhin-heading--navy {
  background-color: #0D375D;
}

/* 共通：帯見出し色（おすすめ商品） */
.naire-kinenhin-heading--gold {
  background-color: #BC9239;
}

/* 共通：下線見出し（選ばれる理由 / FAQ） */
.naire-kinenhin-heading--underline {
  padding: 0 0 4px;
  border-bottom: 1px solid #333;
  font-size: 20px;
  line-height: 1.6;
}

/* 共通：下線見出し直後のコンテンツ余白 */
.naire-kinenhin-heading--underline + * {
  margin: 16px 0 0;
}


/* ============================================================
   ヒーロー
   ============================================================ */
.naire-kinenhin-hero {
  display: block;
}

.naire-kinenhin-hero_img {
  display: block;
  width: 100%;
  height: auto;
}

.naire-kinenhin-hero_body {
  padding: 16px 16px 24px;
  box-sizing: border-box;
}

.naire-kinenhin-hero_title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  line-height: 1.6;
}

.naire-kinenhin-hero_text {
  margin: 16px 0 0;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}


/* ============================================================
   カテゴリで探す
   （見出し：共通 .naire-kinenhin-heading--large / --navy）
   ============================================================ */
.naire-kinenhin-category_list {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 24px 16px 32px;
  list-style: none;
  box-sizing: border-box;
}

.naire-kinenhin-category_item {
  width: 33.33%;
  min-width: 0;
  margin: 0;
  border: 1px solid #5E5E5E;
  border-radius: 8px;
  overflow: hidden;
  background-color: #FFF;
  box-sizing: border-box;
}

.naire-kinenhin-category_item:hover {
  outline: 3px solid #5E5E5E;
  outline-offset: -3px;
}

.naire-kinenhin-category_link {
  display: block;
  text-decoration: none;
}

.naire-kinenhin-category_link:hover {
  text-decoration: none;
}

.naire-kinenhin-category_img {
  display: block;
  width: 100%;
  height: auto;
}

.naire-kinenhin-category_item_title {
  margin: 0;
  padding: 14px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  text-align: center;
  background-color: #F5F5F5;
}

.naire-kinenhin-category_item_title::after {
  content: " ＞";
}


/* ============================================================
   シーン別
   ============================================================ */
.naire-kinenhin-scene {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 32px 24px;
  background-color: #0D375D;
  box-sizing: border-box;
}

.naire-kinenhin-scene_body {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.naire-kinenhin-scene_title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  color: #FFF;
}

.naire-kinenhin-scene_title_img {
  display: block;
  width: auto;
  height: 32px;
  flex-shrink: 0;
}

.naire-kinenhin-scene_img {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 0;
}

.naire-kinenhin-scene_text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #FFF;
}


/* ============================================================
   おすすめ商品
   （見出し：共通 .naire-kinenhin-heading--large / --gold）
   （余白：共通 .naire-kinenhin-section）
   ============================================================ */
.naire-kinenhin-recommend {
  background-color: #FFF;
}

.naire-kinenhin-recommend_link {
  display: flex;
  align-items: stretch;
  gap: 24px;
  color: inherit;
  text-decoration: none;
}

.naire-kinenhin-recommend_link:hover,
.naire-kinenhin-recommend_link:focus {
  color: inherit;
  text-decoration: none;
}

.naire-kinenhin-recommend_link:hover *,
.naire-kinenhin-recommend_link:focus * {
  text-decoration: none;
}

.naire-kinenhin-recommend_item {
  margin: 0;
  padding: 32px 16px;
  background-color: #FFF;
  box-sizing: border-box;
}

.naire-kinenhin-recommend_item:hover {
  background-color: #FCF4E3;
}

.naire-kinenhin-recommend_media {
  width: 250px;
  flex-shrink: 0;
}

.naire-kinenhin-recommend_img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #CCC;
  box-sizing: border-box;
}

.naire-kinenhin-recommend_shipday {
  display: inline-block;
  padding: 6px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  border-radius: 4px;
  background: #FFF;
  color: #005B32;
  border: 1px solid #005B32;
  box-sizing: border-box;
}

.naire-kinenhin-recommend_shipday--under-img {
  display: none;
}

.naire-kinenhin-recommend_body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.naire-kinenhin-recommend_item_title {
  margin: 0;
  padding: 8px 16px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  color: #9B782F;
  background-color: #F5F5F5;
  border-left: 4px solid #9B782F;
}

.naire-kinenhin-recommend_text {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.naire-kinenhin-recommend_footer {
  display: flex;
  align-items: flex-end;
  margin: auto 0 0;
  padding: 16px 0 0;
}

.naire-kinenhin-recommend_meta {
  margin: 0 0 0 auto;
  text-align: right;
}

.naire-kinenhin-recommend_price {
  margin: 0;
  line-height: 1.6;
  text-align: right;
  font-weight: bold;
  color: #D93A38;
}

.naire-kinenhin-recommend_price_value {
  font-size: 24px;
}

.naire-kinenhin-recommend_price_unit {
  font-size: 14px;
}

.naire-kinenhin-recommend_detail {
  margin: 4px 0 0;
  font-weight: bold;
  text-align: right;
}

.naire-kinenhin-recommend_detail_link {
  font-size: 16px;
  color: #009953;
  text-decoration: none;
}


/* ============================================================
   ハンコヤドットコムが選ばれる理由
   （見出し：共通 .naire-kinenhin-heading--underline）
   （余白：共通 .naire-kinenhin-section / --pad）
   ============================================================ */
.naire-kinenhin-reason_list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.naire-kinenhin-reason_item {
  width: 33.33%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.naire-kinenhin-reason_img {
  display: block;
  width: 70px;
  height: auto;
  flex-shrink: 0;
}

.naire-kinenhin-reason_text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.naire-kinenhin-reason_text--bold {
  font-size: 18px;
  font-weight: bold;
}

.naire-kinenhin-reason_text_note {
  font-size: 10px;
}


/* ============================================================
   よくある質問
   （見出し：共通 .naire-kinenhin-heading--underline）
   （余白：共通 .naire-kinenhin-section）
   ============================================================ */
.naire-kinenhin-faq {
  padding: 24px 16px;
  background-color: #EEE;
}

.naire-kinenhin-faq_body {
  padding: 16px 16px 24px;
  background-color: #FFF;
  box-sizing: border-box;
}

.naire-kinenhin-faq_list {
  margin: 0;
  padding: 0;
}

.naire-kinenhin-faq_item {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #CCC;
}

.naire-kinenhin-faq_item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.naire-kinenhin-faq_item_question {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  color: #333;
}

.naire-kinenhin-faq_item_answer {
  margin: 8px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 2;
  color: #333;
}

.naire-kinenhin-faq_img {
  width: 100%;
  height: auto;
  margin: 8px 0 0;
  box-sizing: border-box;
}

.naire-kinenhin-faq_item_answer_link {
  display: block;
  margin: 16px 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  box-sizing: border-box;
  text-decoration: underline;
}


/* ============================================================
   パンくず
   サイト共通 .pan-list-inline（base.css / module.css）を使用
   ============================================================ */


/* ============================================================
   一覧へ戻るリンク
   （余白：共通 .naire-kinenhin-section / --pad）
   ============================================================ */
.naire-back-link_section {
  text-align: center;
}

.naire-back-link_section_inner {
  display: flex;
  justify-content: center;
}

.naire-back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 360px;
  padding: 14px 40px;
  background-color: #4A4A4A;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: none;
  box-sizing: border-box;
}

.naire-back-link:hover,
.naire-back-link:focus,
.naire-back-link:visited {
  color: #fff;
  text-decoration: none;
}

.naire-back-link:hover,
.naire-back-link:focus {
  opacity: 0.8;
}

.naire-back-link:hover .naire-back-link_text,
.naire-back-link:focus .naire-back-link_text {
  color: #fff;
  text-decoration: none;
}

.naire-back-link_icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}