@charset "UTF-8";
/* 変数を全体で使えるように */
/* =========================================================
   Mixins (最低限ここに同居)
   ========================================================= */
/* 共通部分の横幅の設定（box-sizingはresetで全体適用済みなので不要） */
/* =========================================================
   Base (typography / links / common)
   =========================================================  */
:root {
  --h-quicknav-h: 60px;
}

body {
  line-height: 1.8;
  font-size: 1.6rem;
  color: #222;
  background: #fff;
  font-family: "Hiragino Sans", Meiryo, "Yu Gothic", sans-serif;
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
}

a {
  color: #253494;
  text-decoration: none;
}

a:hover {
  color: #4859aa;
  text-decoration: underline;
}

/* フォーム：見た目統一 */
input, select, textarea, button {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* フォーカスは消さない（アクセシビリティ） */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =========================================================
   Utilities (共通クラス：最低限)
   ========================================================= */
/* PC/SP 表示切替（既存互換のまま） */
.pc_i {
  display: inline;
}

.pc_b {
  display: block;
}

.sp_i {
  display: none;
}

.sp_b {
  display: none;
}

@media only screen and (max-width: 767px) {
  .pc_i, .pc_b {
    display: none;
  }
  .sp_i {
    display: inline;
  }
  .sp_b {
    display: block;
  }
}
/* text align */
.text_center {
  text-align: center;
}

.text_right {
  text-align: right;
}

/* color utility（互換用。新規はできればコンポーネント側で） */
.c_red {
  color: #f00;
}

.c_blue {
  color: #00f;
}

.c_brown {
  color: #930;
}

.c_green {
  color: #390;
}

.c_orange {
  color: #f60;
}

.c_pink {
  color: #f3f;
}

/* フォントサイズ（安全な式：fs8, fs10, ..., fs28） */
.fs8 {
  font-size: 0.8rem !important;
}

.fs10 {
  font-size: 1rem !important;
}

.fs12 {
  font-size: 1.2rem !important;
}

.fs14 {
  font-size: 1.4rem !important;
}

.fs16 {
  font-size: 1.6rem !important;
}

.fs18 {
  font-size: 1.8rem !important;
}

.fs20 {
  font-size: 2rem !important;
}

.fs22 {
  font-size: 2.2rem !important;
}

.fs24 {
  font-size: 2.4rem !important;
}

.fs26 {
  font-size: 2.6rem !important;
}

.fs28 {
  font-size: 2.8rem !important;
}

/* flex（衝突しにくいよう u- を推奨。既存互換なら .flex でもOK） */
.flex {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .flex {
    display: block;
  }
}

/* clearfix（floatが残るなら） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 余白ユーティリティ */
.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pl0 {
  padding-left: 0px !important;
}

.pr0 {
  padding-right: 0px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.pt60 {
  padding-top: 60px !important;
}

.pb60 {
  padding-bottom: 60px !important;
}

.pl60 {
  padding-left: 60px !important;
}

.pr60 {
  padding-right: 60px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.ml70 {
  margin-left: 70px !important;
}

.mr70 {
  margin-right: 70px !important;
}

.pt70 {
  padding-top: 70px !important;
}

.pb70 {
  padding-bottom: 70px !important;
}

.pl70 {
  padding-left: 70px !important;
}

.pr70 {
  padding-right: 70px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.ml80 {
  margin-left: 80px !important;
}

.mr80 {
  margin-right: 80px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pb80 {
  padding-bottom: 80px !important;
}

.pl80 {
  padding-left: 80px !important;
}

.pr80 {
  padding-right: 80px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mb90 {
  margin-bottom: 90px !important;
}

.ml90 {
  margin-left: 90px !important;
}

.mr90 {
  margin-right: 90px !important;
}

.pt90 {
  padding-top: 90px !important;
}

.pb90 {
  padding-bottom: 90px !important;
}

.pl90 {
  padding-left: 90px !important;
}

.pr90 {
  padding-right: 90px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.ml100 {
  margin-left: 100px !important;
}

.mr100 {
  margin-right: 100px !important;
}

.pt100 {
  padding-top: 100px !important;
}

.pb100 {
  padding-bottom: 100px !important;
}

.pl100 {
  padding-left: 100px !important;
}

.pr100 {
  padding-right: 100px !important;
}

/* 土台 → ベース → 共通コンテンツ（見出し・本文・テーブル）の順  */
/* 変数を全体で使えるように */
/* =========================================================
   Reset (minimal + safe)
   ※ public_html/style.css は base.css より後に読み込まれるため、
     body の font / line-height、a の色などは style.css が上書きする場合がある。
   ========================================================= */
html {
  font-size: 62.5%;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.1; /* style.css の body { line-height:1.1 } が後勝ち */
}

/* HTML5要素（古いブラウザ対策。残してOK） */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

p {
  line-height: 1.8;
}

/* リスト */
ul, ol {
  list-style: none;
}

/* 引用 */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
}

/* テーブル */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* 画像の余白事故防止 */
img,
picture {
  display: block;
}

/* フォーム */
input,
select,
textarea,
button {
  vertical-align: middle;
  font: inherit;
  color: inherit;
}

/* ボタン */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* リンク（色は _settings.scss の a で指定。ここで inherit だと後勝ちで上書きされる） */
a {
  text-decoration: none;
}

/* テキスト折返し事故の軽減 */
p,
li,
dt,
dd,
th,
td {
  overflow-wrap: break-word;
}

/* hr */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
}

/* 変数を全体で使えるように */
/* =========================================================
   サイト本文ラッパー（header.php で開始・footer.php で閉じる）
   共通: @mixin page_contents1（PC: max-width $pc_max_width 中央／SP: 幅100%）
   ========================================================= */
.site_content {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .site_content {
    width: 100%;
    padding: 0 5px;
  }
}

/* =========================================================
   Layout（フロント以外：最低限のレイアウト）
   body.home = フロントページ → main はフロント用レイアウトのまま
   ========================================================= */
body:not(.home) main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
@media only screen and (max-width: 767px) {
  body:not(.home) main {
    padding: 16px 12px 32px;
  }
}

/* single など main を使わず #contents でラップしているテンプレート用 */
#contents {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
@media only screen and (max-width: 767px) {
  #contents {
    padding: 16px 12px 32px;
  }
}

/* =========================================================
   Content（共通：見出し・本文・テーブルなど）
   WordPress 投稿・固定ページ・アーカイブなど全ページの本文エリアに適用
   ========================================================= */
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* 見出し */
}
.form-content h1,
.single-content h1,
.other-content h1,
.entry-content h1,
.post-content h1 {
  margin: 1.2em 0 0.6em;
  padding: 0.4em 0 0.2em;
  font-size: 1.75rem;
  font-weight: 700;
  border-bottom: 2px solid #ccc;
  line-height: 1.3;
}
.form-content h1:first-child,
.single-content h1:first-child,
.other-content h1:first-child,
.entry-content h1:first-child,
.post-content h1:first-child {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .form-content h1,
  .single-content h1,
  .other-content h1,
  .entry-content h1,
  .post-content h1 {
    font-size: 1.5rem;
  }
}
.form-content h2,
.single-content h2,
.other-content h2,
.entry-content h2,
.post-content h2 {
  margin: 1.6em 0 0.5em;
  padding: 0.35em 0 0.15em;
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  line-height: 1.35;
}
.form-content h2:first-child,
.single-content h2:first-child,
.other-content h2:first-child,
.entry-content h2:first-child,
.post-content h2:first-child {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .form-content h2,
  .single-content h2,
  .other-content h2,
  .entry-content h2,
  .post-content h2 {
    font-size: 1.35rem;
  }
}
.form-content h3,
.single-content h3,
.other-content h3,
.entry-content h3,
.post-content h3 {
  margin: 1.4em 0 0.4em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.form-content h3:first-child,
.single-content h3:first-child,
.other-content h3:first-child,
.entry-content h3:first-child,
.post-content h3:first-child {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .form-content h3,
  .single-content h3,
  .other-content h3,
  .entry-content h3,
  .post-content h3 {
    font-size: 1.15rem;
  }
}
.form-content h4, .form-content h5, .form-content h6,
.single-content h4,
.single-content h5,
.single-content h6,
.other-content h4,
.other-content h5,
.other-content h6,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin: 1.2em 0 0.35em;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.45;
}
.form-content h4:first-child, .form-content h5:first-child, .form-content h6:first-child,
.single-content h4:first-child,
.single-content h5:first-child,
.single-content h6:first-child,
.other-content h4:first-child,
.other-content h5:first-child,
.other-content h6:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child,
.post-content h4:first-child,
.post-content h5:first-child,
.post-content h6:first-child {
  margin-top: 0;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* 本文 */
}
.form-content p,
.single-content p,
.other-content p,
.entry-content p,
.post-content p {
  margin: 0 0 1em;
  line-height: 1.8;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* リスト */
}
.form-content ul, .form-content ol,
.single-content ul,
.single-content ol,
.other-content ul,
.other-content ol,
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.form-content ul,
.single-content ul,
.other-content ul,
.entry-content ul,
.post-content ul {
  list-style-type: disc;
}
.form-content ol,
.single-content ol,
.other-content ol,
.entry-content ol,
.post-content ol {
  list-style-type: decimal;
}
.form-content li,
.single-content li,
.other-content li,
.entry-content li,
.post-content li {
  margin-bottom: 0.35em;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* テーブル */
}
.form-content table,
.single-content table,
.other-content table,
.entry-content table,
.post-content table {
  width: 100%;
  max-width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95em;
}
@media only screen and (max-width: 767px) {
  .form-content table,
  .single-content table,
  .other-content table,
  .entry-content table,
  .post-content table {
    display: block;
    overflow-x: auto;
  }
}
.form-content th, .form-content td,
.single-content th,
.single-content td,
.other-content th,
.other-content td,
.entry-content th,
.entry-content td,
.post-content th,
.post-content td {
  padding: 0.5em 0.75em;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
}
.form-content thead th,
.form-content th,
.single-content thead th,
.single-content th,
.other-content thead th,
.other-content th,
.entry-content thead th,
.entry-content th,
.post-content thead th,
.post-content th {
  background: #ccc;
  font-weight: 700;
  color: #333;
}
.form-content tbody tr:nth-child(even),
.single-content tbody tr:nth-child(even),
.other-content tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even),
.post-content tbody tr:nth-child(even) {
  background: #f9f9f9;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* 引用 */
}
.form-content blockquote,
.single-content blockquote,
.other-content blockquote,
.entry-content blockquote,
.post-content blockquote {
  margin: 1em 0;
  padding: 0.75em 1em 0.75em 1.25em;
  border-left: 4px solid #ccc;
  background: #f5f5f5;
  color: #555;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* コンテンツ内リンク（必要なら色指定） */
}
.form-content a,
.single-content a,
.other-content a,
.entry-content a,
.post-content a {
  color: #253494;
  text-decoration: none;
}
.form-content a:hover,
.single-content a:hover,
.other-content a:hover,
.entry-content a:hover,
.post-content a:hover {
  text-decoration: underline;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* 画像 */
}
.form-content img,
.single-content img,
.other-content img,
.entry-content img,
.post-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* 水平線 */
}
.form-content hr,
.single-content hr,
.other-content hr,
.entry-content hr,
.post-content hr {
  margin: 1.5em 0;
  border: none;
  border-top: 1px solid #ccc;
}
.form-content,
.single-content,
.other-content,
.entry-content,
.post-content {
  /* コード（インライン・ブロック） */
}
.form-content code,
.single-content code,
.other-content code,
.entry-content code,
.post-content code {
  padding: 0.15em 0.35em;
  background: #f0f0f0;
  border-radius: 3px;
  font-size: 0.9em;
}
.form-content pre,
.single-content pre,
.other-content pre,
.entry-content pre,
.post-content pre {
  margin: 1em 0;
  padding: 1em;
  overflow-x: auto;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1.5;
}
.form-content pre code,
.single-content pre code,
.other-content pre code,
.entry-content pre code,
.post-content pre code {
  padding: 0;
  background: none;
}

/* 変数を全体で使えるように */
.h_sp_nav_toggle {
  display: none;
}

.h_ham {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  color: #253494;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.h_ham .h_ham_icon {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transform: scaleX(1.4);
}
@media only screen and (max-width: 767px) {
  .h_ham {
    margin-left: auto;
  }
}

.h_nav_wrap {
  position: relative;
  width: 100%;
  border-top: 1px solid #ccc;
  padding: 5px 0;
  margin: 10px 0 5px 0;
  overflow: visible;
}

.h_nav {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible;
}
.h_nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.h_nav > ul > li > a {
  display: block;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.h_nav > ul > li > a:hover {
  text-decoration: underline;
}
.h_nav .h_nav_dropdown {
  position: relative;
}
.h_nav .h_nav_dropdown > .h_nav_parent {
  display: block;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  border-bottom: 4px solid transparent;
  transition: border-color 0.15s ease, font-weight 0.15s ease;
}
.h_nav .h_nav_dropdown:hover > .h_nav_parent, .h_nav .h_nav_dropdown:focus-within > .h_nav_parent {
  font-weight: 700;
  text-decoration: none;
  border-bottom-color: #253494;
}
.h_nav .h_nav_dropdown--mega {
  position: static;
}
.h_nav .h_nav_sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  top: 100%;
  min-width: 280px;
  margin: 0;
  padding: 0px 0;
  list-style: none;
  background: #fff;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.h_nav .h_nav_sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.h_nav .h_nav_dropdown:hover .h_nav_sub,
.h_nav .h_nav_dropdown:focus-within .h_nav_sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.h_nav .h_nav_dropdown:hover .h_nav_sub--mega,
.h_nav .h_nav_dropdown:focus-within .h_nav_sub--mega {
  transform: translateY(0);
}
.h_nav .h_nav_sub a {
  display: block;
  padding: 10px 20px;
  color: #222;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.4rem;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.h_nav .h_nav_sub a:hover {
  background: #f7f7f7;
  text-decoration: none;
}
.h_nav .h_nav_sub li:last-child a {
  border-bottom: none;
}
.h_nav .h_nav_sub--mega {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  transform: translateY(4px);
  box-sizing: border-box;
  padding: 16px max(16px, (100% - 1180px) / 2) 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: stretch;
  justify-content: center;
}
@media only screen and (max-width: 979px) {
  .h_nav .h_nav_sub--mega {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.h_nav .h_nav_sub--mega > li {
  display: flex;
  min-width: 0;
}
.h_nav .h_nav_sub--mega .h_nav_mega_link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 100%;
  padding: 8px 6px 6px;
  font-size: 1.35rem;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 6px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.h_nav .h_nav_sub--mega .h_nav_mega_link:hover {
  background: #f7f7f7;
  border-color: #ddd;
  text-decoration: none;
}
.h_nav .h_nav_sub--mega .h_nav_mega_img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.h_nav .h_nav_sub--mega .h_nav_mega_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.h_nav .h_nav_sub--mega .h_nav_mega_text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  padding: 0 2px;
  line-height: 1.25;
  font-weight: 400;
  font-size: 1.3rem;
  text-align: center;
}

header .h_nav_mega_img img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  float: none !important;
}

.h_sp_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .h_sp_nav {
    width: 100%;
    box-shadow: none;
  }
}
.h_sp_nav .h_sp_nav_scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.h_sp_nav .h_sp_nav_close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #666;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.h_sp_nav .h_sp_nav_close:hover {
  background: #f0f0f0;
  color: #333;
}
.h_sp_nav .sp_menu_category {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 60px 12px 16px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.h_sp_nav .sp_menu_category li {
  width: 22%;
  text-align: center;
  font-weight: 700;
  border: none;
  padding: 0;
}
.h_sp_nav .sp_menu_category_item {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 2px;
  font-weight: 700;
}
.h_sp_nav .sp_menu_category_item:hover {
  background: transparent;
}
.h_sp_nav .sp_menu_category_item::before, .h_sp_nav .sp_menu_category_item::after {
  content: none !important;
  display: none !important;
}
.h_sp_nav .sp_menu_category_img {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  margin: 0 auto 8px;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #999;
  box-sizing: border-box;
}
.h_sp_nav .sp_menu_category_img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity 0.2s;
}
.h_sp_nav .sp_menu_category_item:hover .sp_menu_category_img img {
  opacity: 0.7;
}
.h_sp_nav .sp_menu_category .sp_menu_category_label {
  display: block !important;
  width: 100%;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  color: #333 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.h_sp_nav .sp_menu_section {
  margin-top: 0;
}
.h_sp_nav .sp_menu_section:first-of-type {
  margin-top: 0;
}
.h_sp_nav .sp_menu_heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #FFF8A5;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  user-select: none;
}
.h_sp_nav .sp_menu_heading::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: #666;
  transition: transform 0.3s;
}
.h_sp_nav .sp_menu_heading:hover {
  background: #FFF8A5;
}
.h_sp_nav .sp_menu_section.is-open .sp_menu_heading::after {
  content: "−";
}
.h_sp_nav .sp_menu_list-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
}
.h_sp_nav .sp_menu_section.is-open .sp_menu_list-wrap {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s ease-in;
}
.h_sp_nav .sp_menu_list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.h_sp_nav li {
  border-bottom: 1px solid #eee;
  position: relative;
}
.h_sp_nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px 16px 20px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  position: relative;
}
.h_sp_nav a:hover {
  background: #f5f5f5;
}
.h_sp_nav a::before, .h_sp_nav a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.7;
  transform-origin: right center;
}
.h_sp_nav a::before {
  transform: translateY(-50%) rotate(45deg);
}
.h_sp_nav a::after {
  transform: translateY(-50%) rotate(-45deg);
}
.h_sp_nav .h_bana a {
  padding: 0;
  justify-content: center;
}
.h_sp_nav .h_bana a:hover {
  background: transparent;
}
.h_sp_nav .h_bana a::before, .h_sp_nav .h_bana a::after {
  content: none !important;
  display: none !important;
}
.h_sp_nav .has-child > a::after {
  transform: translateY(-50%) rotate(135deg);
}
.h_sp_nav .has-child.is-open > a::after {
  transform: translateY(-50%) rotate(-45deg);
}
.h_sp_nav .child-menu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
}
.h_sp_nav .has-child.is-open > .child-menu-wrap {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s ease-in;
}
.h_sp_nav .child-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
  min-height: 0;
  overflow: hidden;
}
.h_sp_nav .child-menu li {
  border-bottom: 1px solid #eee;
}
.h_sp_nav .child-menu li:last-child {
  border-bottom: none;
}
.h_sp_nav .child-menu a {
  padding-left: 36px;
  font-size: 14px;
}
.h_sp_nav .child-menu a::after {
  width: 8px;
  height: 8px;
}
.h_sp_nav .child-menu a.sp_child_link {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 16px;
  font-size: 14px;
}
.h_sp_nav .child-menu a.sp_child_link .sp_child_link_img {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.h_sp_nav .child-menu a.sp_child_link .sp_child_link_img img {
  width: 48px;
  height: auto;
  display: block;
  border-radius: 6px;
}
.h_sp_nav .child-menu a.sp_child_link .sp_child_link_text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.h_sp_nav .child-menu a.sp_child_link::before, .h_sp_nav .child-menu a.sp_child_link::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.7;
  transform-origin: right center;
}
.h_sp_nav .child-menu a.sp_child_link::before {
  transform: translateY(-50%) rotate(45deg);
}
.h_sp_nav .child-menu a.sp_child_link::after {
  transform: translateY(-50%) rotate(-45deg);
  width: 8px;
  height: 2px;
}
.h_sp_nav .h_quicknav.h_sp_nav_quick {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--h-quicknav-h);
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
  border-top: 1px solid #eee;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
.h_sp_nav .h_quicknav a.f_sp_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  font-weight: 400;
}
.h_sp_nav .h_quicknav a.f_sp_menu_toggle:hover {
  background: rgb(34.04, 47.84, 136.16) !important;
  color: #fff !important;
}
.h_sp_nav .h_quicknav a.f_sp_menu_toggle.is-open:hover {
  background: rgb(32.56, 45.76, 130.24) !important;
  color: #fff !important;
}
.h_sp_nav .h_quicknav a::before,
.h_sp_nav .h_quicknav a::after {
  content: none !important;
  display: none !important;
}

.h_sp_nav_toggle:checked ~ .h_sp_nav {
  transform: translateX(0);
}

.h_sp_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 999;
}

.h_sp_nav_toggle:checked ~ .h_sp_overlay {
  opacity: 1;
  visibility: visible;
}

/* 変数を全体で使えるように */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: #253494;
  color: #C1272D;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  overflow: visible;
}
@media (min-width: 768px) {
  header {
    z-index: 500;
  }
}
@media only screen and (max-width: 767px) {
  header {
    position: fixed;
    z-index: 100;
  }
}

.h_bana {
  width: 100%;
  height: 50px;
  background: #253494;
}
.h_bana a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}
.h_bana a:hover {
  color: #fff;
  text-decoration: underline;
}
.h_bana .h_bana_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
  cursor: default;
}

@media only screen and (max-width: 767px) {
  .h_bana--sp-scroll-collapse {
    height: auto;
    min-height: 0;
    max-height: 50px;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.28s ease;
    opacity: 1;
  }
  .h_bana--sp-scroll-collapse a,
  .h_bana--sp-scroll-collapse .h_bana_txt {
    min-height: 50px;
  }
  header.is-sp-header-compact .h_bana--sp-scroll-collapse {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

.h_catch {
  width: 100%;
  height: 30px;
  background: #FFF8A5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(10px, 2.2vw, 14px);
  text-overflow: ellipsis;
}
@media only screen and (max-width: 767px) {
  .h_catch {
    height: auto;
    min-height: 0;
    max-height: 30px;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.28s ease;
    opacity: 1;
  }
  header.is-sp-header-compact .h_catch {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

.h_heder_inner {
  display: grid;
  grid-template-columns: auto 200px 1fr auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  padding: 5px 15px;
  background: #fff;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .h_heder_inner {
    width: 100%;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 0 12px;
  }
  .h_heder_inner .h_logo {
    order: 1;
  }
  .h_heder_inner .h_search {
    order: 2;
  }
  .h_heder_inner .h_ham {
    order: 3;
  }
  .h_heder_inner .h_contact {
    order: 4;
    grid-column: 1/-1;
    margin-top: 5px;
    width: 100%;
  }
  .h_heder_inner {
    position: relative;
    top: auto;
    z-index: auto;
    background: #fff;
  }
}

.h_logo {
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
}
.h_logo a {
  display: block;
  width: 100%;
  height: 100%;
}
.h_logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.h_search {
  display: flex;
  align-items: center;
  position: relative;
}
.h_search .h_search_toggle {
  display: none;
}
.h_search .h_search_inner {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}
.h_search input[type=search],
.h_search input[type=text] {
  width: 100%;
  padding: 10px 44px 10px 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  box-sizing: border-box;
}
.h_search input[type=search]::placeholder,
.h_search input[type=text]::placeholder {
  color: #999;
}
.h_search .h_search_btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.h_search .h_search_btn img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.h_search .h_search_btn:hover {
  opacity: 0.8;
}
.h_search .h_search_sp_trigger {
  display: none;
}
.h_search .h_search_panel {
  display: none;
}
@media only screen and (max-width: 767px) {
  .h_search {
    display: flex;
    align-items: center;
  }
  .h_search .h_search_pc {
    display: none;
  }
  .h_search .h_search_sp_trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
  }
  .h_search .h_search_sp_trigger img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  .h_search .h_search_panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
  .h_search .h_search_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    background: rgba(0, 0, 0, 0.3);
  }
  .h_search .h_search_toggle:checked ~ .h_search_overlay {
    display: block;
  }
  .h_search .h_search_toggle:checked ~ .h_search_panel {
    display: flex;
  }
  .h_search .h_search_panel_input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .h_search .h_search_panel_btn {
    flex-shrink: 0;
    padding: 10px 16px;
    background: #253494;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .h_search .h_search_close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    background: transparent;
    border: none;
  }
}

.h_contact {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px 24px;
  max-width: 600px;
  margin: 0 auto;
  padding: 5px 20px;
}
.h_contact .contact-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 24px;
}
.h_contact .contact-tel .contact-tel_icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.h_contact .contact-tel a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.h_contact .contact-tel .h_contact_info {
  width: 100%;
  margin: 0px 0 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.5;
  color: #666;
}
.h_contact .contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #253494;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}
.h_contact .contact-btn .contact-btn_icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.h_contact .contact-btn:hover {
  opacity: 0.9;
}
.h_contact .contact-line img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .h_contact {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 0.65fr;
    gap: 0;
    padding: 6px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }
  .h_contact .contact-tel,
  .h_contact .contact-btn,
  .h_contact .contact-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0px 2px;
    border-right: 1px solid #ddd;
    text-align: center;
    text-decoration: none;
    color: #333;
    background: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
  }
  .h_contact .contact-tel:last-child,
  .h_contact .contact-btn:last-child,
  .h_contact .contact-line:last-child {
    border-right: none;
  }
  .h_contact .contact-tel a {
    font-size: 14px;
    font-weight: 700;
  }
  .h_contact .contact-tel .h_contact_info {
    display: none;
  }
  .h_contact .contact-tel_icon,
  .h_contact .contact-btn_icon {
    width: 24px !important;
    height: 24px !important;
  }
  .h_contact .contact-line img {
    width: 36px;
    height: 36px;
  }
}

:root {
  --site-header-offset: 215px;
  --site-header-offset-sp: 125px;
  --site-header-offset-sp-expanded-fallback: 205px;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: var(--site-header-offset);
  }
  body.is-site-front {
    padding-top: var(--site-header-offset);
  }
  body.is-site-inner {
    padding-top: 0;
  }
  body.is-site-inner .site_content {
    padding-top: var(--site-header-offset);
  }
}
@media only screen and (max-width: 767px) {
  html {
    scroll-padding-top: var(--site-header-offset-sp-dynamic, var(--site-header-offset-sp-expanded-fallback));
  }
  body.is-site-front {
    padding-top: var(--site-header-offset-sp-dynamic, var(--site-header-offset-sp-expanded-fallback));
  }
  body.is-site-inner {
    padding-top: 0;
  }
  body.is-site-inner .site_content {
    padding-top: var(--site-header-offset-sp-dynamic, var(--site-header-offset-sp-expanded-fallback));
  }
}
/* 変数を全体で使えるように */
.footer {
  color: #fff;
  padding-bottom: 0;
  margin-top: 50px;
}
.footer a:hover {
  text-decoration: underline;
}

.f_main {
  background: #ddd;
  color: #222;
  padding: 40px 0 32px;
}

.f_main_inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .f_main_inner {
    width: 100%;
    padding: 0 5px;
  }
}
.f_main_inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 24px 32px;
  padding: 0 20px;
}
@media only screen and (max-width: 767px) {
  .f_main_inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px;
  }
}

.f_col {
  min-width: 0;
}

.f_col_ttl {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: #222;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.f_col_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.f_col_list li {
  margin-bottom: 6px;
}
.f_col_list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #222;
  text-decoration: none;
  font-size: 1.3rem;
  position: relative;
  padding-right: 20px;
}
.f_col_list a::before, .f_col_list a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
  transform-origin: right center;
}
.f_col_list a::before {
  transform: translateY(-50%) rotate(45deg);
}
.f_col_list a::after {
  transform: translateY(-50%) rotate(-45deg);
}

.f_col_company .f_logo {
  margin-bottom: 12px;
}
.f_col_company .f_logo a {
  display: inline-block;
}
.f_col_company .f_logo img {
  max-width: 160px;
  height: auto;
  display: block;
}
.f_col_company .f_address_block {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 16px;
  opacity: 0.95;
  font-style: normal;
}
.f_col_company .f_company_name {
  font-weight: 700;
}
.f_col_company .f_contact_lead {
  margin: 0 0 16px;
}
.f_col_company .f_btn_mail {
  display: inline-block;
  background: #fff;
  color: #333;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  text-decoration: none;
}
.f_col_company .f_btn_mail:hover {
  background: #f0f0f0;
  text-decoration: none;
}
.f_col_company .f_sns {
  display: flex;
  gap: 12px;
  align-items: center;
}
.f_col_company .f_sns_icon {
  display: block;
  width: 32px;
  height: 32px;
}
.f_col_company .f_sns_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.f_col_company .f_sns_icon:hover {
  text-decoration: none;
  opacity: 0.85;
}
@media only screen and (max-width: 767px) {
  .f_col_company .f_logo {
    width: 100%;
    text-align: center;
  }
  .f_col_company .f_logo a {
    display: block;
    width: 100%;
  }
  .f_col_company .f_logo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

.f_nav {
  background: #253494;
  padding: 14px 0;
}

.f_nav_inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .f_nav_inner {
    width: 100%;
    padding: 0 5px;
  }
}
.f_nav_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  padding: 0 20px;
}

.f_nav a {
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
}
.f_nav a:hover {
  text-decoration: underline;
}

.f_nav_sep {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  user-select: none;
}

.f_copyright {
  background: #253494;
  padding: 12px 20px;
  text-align: center;
}

.f_copy {
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
  opacity: 0.95;
}

.f_sp_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  text-decoration: none;
  color: #333;
  border-right: 1px solid #eee;
  min-width: 0;
}
.f_sp_item:last-child {
  border-right: none;
}
.f_sp_item:hover {
  background: #f5f5f5;
  text-decoration: none;
}

.f_sp_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}
.f_sp_icon img {
  max-width: 100%;
  max-height: 100%;
}

.f_sp_menu_toggle {
  background: #253494;
  color: #fff;
}
.f_sp_menu_toggle:hover {
  background: rgb(34.04, 47.84, 136.16);
  color: #fff;
}

.f_sp_menu_toggle .f_sp_icon {
  font-size: 24px;
  color: #fff;
}

.f_sp_menu_toggle.is-open {
  background: rgb(35.15, 49.4, 140.6);
  color: #fff;
}

.f_sp_label {
  font-size: clamp(8px, 2.5vw, 11px);
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .f_sp_label {
    font-size: 12px;
  }
}

/* 変数を全体で使えるように */
.main_slider {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 20px 0;
}
@media only screen and (max-width: 767px) {
  .main_slider {
    padding: 10px 0;
  }
}

.main_slider_wrapper {
  overflow: hidden;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .main_slider_wrapper {
    width: 100%;
  }
}

.main_slider_track {
  display: flex;
  gap: 10px;
  transition: transform 0.4s ease;
}
@media only screen and (max-width: 767px) {
  .main_slider_track {
    gap: 10px;
  }
}

.main_slider_slide {
  flex-shrink: 0;
  width: 600px;
  display: block;
}
.main_slider_slide img {
  width: 100%;
  height: auto;
  display: block;
}
.main_slider_slide:hover {
  opacity: 0.9;
}
@media only screen and (max-width: 767px) {
  .main_slider_slide {
    width: 80vw;
  }
}

.main_slider_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, box-shadow 0.2s;
}
.main_slider_arrow:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.main_slider_prev {
  left: 20px;
}

.main_slider_next {
  right: 20px;
}

.main_slider_dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.main_slider_dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.main_slider_dot:hover {
  background: #999;
}
.main_slider_dot.is-active {
  background: #253494;
}

/* 変数を全体で使えるように */
#kulink {
  font-size: 12px;
  text-align: left;
  margin: 0 auto 20px auto;
  padding: 0;
  max-width: 1180px;
}
#kulink a {
  color: #333;
  text-decoration: none;
  padding: 0 10px;
}
#kulink a:hover {
  text-decoration: underline;
}
#kulink strong {
  padding: 0 10px;
}
@media only screen and (max-width: 767px) {
  #kulink {
    font-size: 11px;
  }
}

#main h1 {
  margin: 0 0 16px;
  padding: 12px 20px;
  color: #253494;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}
@media only screen and (max-width: 767px) {
  #main h1 {
    font-size: 18px;
    padding: 10px 16px;
    margin-bottom: 12px;
  }
}

.headp {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.headp li {
  list-style: none;
  margin: 0;
}
.headp a {
  color: #333;
  text-decoration: none;
}
.headp a:hover {
  text-decoration: underline;
}

#main.itemcate {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5px;
}

#main.itemdetail {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5px;
}

.catetab {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid #ddd;
}
@media only screen and (max-width: 767px) {
  .catetab {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
  }
  .catetab::-webkit-scrollbar {
    display: none;
  }
}
.catetab li {
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.catetab li:hover {
  color: #333;
}
.catetab li.select {
  color: #333;
  font-weight: 700;
  border-bottom-color: #253494;
}
@media only screen and (max-width: 767px) {
  .catetab li {
    padding: 8px 12px;
    font-size: 12px;
  }
}

.section_heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .section_heading {
    margin-bottom: 16px;
  }
}

.section_icon {
  font-size: 14px;
  color: #253494;
}

.section_title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .section_title {
    font-size: 18px;
  }
}

.section_link {
  font-size: 13px;
  text-decoration: none;
  background: linear-gradient(transparent 60%, #fff066 60%);
}
.section_link:hover {
  text-decoration: none;
  background: linear-gradient(transparent 50%, #fff066 50%);
}

.ranking_tab_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid #ddd;
}
@media only screen and (max-width: 767px) {
  .ranking_tab_list {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
  }
  .ranking_tab_list::-webkit-scrollbar {
    display: none;
  }
}

.ranking_tab_item {
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.ranking_tab_item:hover {
  color: #333;
}
.ranking_tab_item.is-active {
  color: #333;
  font-weight: 700;
  border-bottom-color: #253494;
}
@media only screen and (max-width: 767px) {
  .ranking_tab_item {
    padding: 8px 12px;
    font-size: 12px;
  }
}

.ranking_tab_panels {
  overflow: hidden;
  position: relative;
}

.ranking_tab_track {
  display: flex;
  transition: transform 0.4s ease;
}

.ranking_tab_content {
  flex-shrink: 0;
  width: 100%;
}

.ranking_row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
@media only screen and (max-width: 767px) {
  .ranking_row {
    gap: 8px;
    justify-content: space-between;
  }
}

.ranking_item {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.ranking_item:hover {
  opacity: 0.8;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .ranking_item {
    flex: 1;
    min-width: 0;
  }
}

.ranking_img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ranking_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .ranking_img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
}

.ranking_brand {
  margin-bottom: 6px;
}
.ranking_brand img {
  height: 20px;
  width: auto;
}
@media only screen and (max-width: 767px) {
  .ranking_brand img {
    height: 16px;
  }
}

.ranking_name {
  font-size: 12px;
  text-align: center;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .ranking_name {
    font-size: clamp(9px, 2.5vw, 11px);
  }
}

.cta_btn-order,
.cta_btn-estimate,
.cta_btn-design {
  margin: 0 0 12px 0;
  padding: 0;
}
.cta_btn-order:last-child,
.cta_btn-estimate:last-child,
.cta_btn-design:last-child {
  margin-bottom: 0;
}
.cta_btn-order a,
.cta_btn-estimate a,
.cta_btn-design a {
  display: block;
  padding: 14px 24px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s;
}
.cta_btn-order a:hover,
.cta_btn-estimate a:hover,
.cta_btn-design a:hover {
  opacity: 0.9;
}
@media only screen and (max-width: 767px) {
  .cta_btn-order a,
  .cta_btn-estimate a,
  .cta_btn-design a {
    padding: 12px 20px;
    font-size: 16px;
  }
}

.cta_btn-order a {
  background: #C1272D;
}

.cta_btn-estimate a {
  background: #253494;
}

.cta_btn-design a {
  background: #F6A91B;
}

/* 変数を全体で使えるように */
.front_search {
  max-width: 480px;
  margin: 24px auto;
  padding: 0 20px;
}
@media only screen and (max-width: 767px) {
  .front_search {
    max-width: 100%;
    margin: 16px auto;
  }
}

.front_search_form {
  display: flex;
  align-items: center;
  border: 2px solid #253494;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
}

.front_search_input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}
.front_search_input::placeholder {
  color: #999;
}

.front_search_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}
.front_search_btn:hover {
  color: #666;
}
.front_search_btn svg {
  width: 20px;
  height: 20px;
}

.front_btn_group {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 480px;
  margin: 24px auto;
  padding: 0 20px;
}
@media only screen and (max-width: 767px) {
  .front_btn_group {
    max-width: 100%;
    margin: 16px auto;
  }
}

.front_btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: #253494;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.front_btn:first-child {
  border-radius: 30px 0 0 30px;
}
.front_btn:last-child {
  border-radius: 0 30px 30px 0;
}
.front_btn:hover {
  opacity: 0.9;
  text-decoration: none;
}

.front_pickup_tabs:not(.front_pickup_tabs--single) > .front_pickup:not(.is-active) {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .front_pickup_tabs--stack-sp .front_pickup {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }
}

@media only screen and (max-width: 767px) {
  .front_pickup_tabs--stack-sp .front_pickup_item {
    flex-shrink: 0;
    width: 100%;
    max-width: 360px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .front_pickup_tabs--stack-sp .front_pickup_img {
    width: 100px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

@media only screen and (max-width: 767px) {
  .front_pickup_tabs--stack-sp .front_pickup_title {
    font-size: 14px;
    text-align: left;
    flex: 1;
    min-width: 0;
  }
}

.front_pickup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  row-gap: 24px;
  column-gap: 30px;
  padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
  .front_pickup {
    flex-wrap: nowrap;
    justify-content: flex-start;
    column-gap: 16px;
    row-gap: 0;
    padding: 20px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .front_pickup::-webkit-scrollbar {
    display: none;
  }
}

.front_pickup_item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.front_pickup_item:hover {
  text-decoration: none;
  opacity: 0.8;
}

.front_pickup_img {
  width: 120px;
  overflow: hidden;
  margin-bottom: 12px;
}
.front_pickup_img img {
  width: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .front_pickup_img {
    width: 100px;
    margin-bottom: 8px;
  }
}

.front_pickup_title {
  font-size: 13px;
  text-align: center;
  line-height: 1.4;
  color: #333;
  max-width: 120px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media only screen and (max-width: 767px) {
  .front_pickup_title {
    font-size: 12px;
    max-width: none;
  }
}

.front_brand {
  padding: 20px 0;
}
@media only screen and (max-width: 767px) {
  .front_brand {
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .front_brand::-webkit-scrollbar {
    display: none;
  }
}

.front_brand_inner {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 16px;
}
@media only screen and (max-width: 767px) {
  .front_brand_inner {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    width: max-content;
  }
}

.front_brand_item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.front_brand_item:hover {
  text-decoration: none;
  opacity: 0.8;
}

.front_brand_img {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 10px;
  margin-inline: auto;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.front_brand_img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .front_brand_img {
    width: auto;
    max-width: 100px;
    height: auto;
    margin-bottom: 8px;
    padding: 5px;
  }
}

.front_brand_name {
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .front_brand_name {
    font-size: 10px;
  }
}

.front_purpose {
  padding: 20px 0;
}
@media only screen and (max-width: 767px) {
  .front_purpose {
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .front_purpose::-webkit-scrollbar {
    display: none;
  }
}

.front_purpose_inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
@media only screen and (max-width: 767px) {
  .front_purpose_inner {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    width: max-content;
  }
}

.front_purpose_item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.front_purpose_item:hover {
  text-decoration: none;
  opacity: 0.8;
}

.front_purpose_img {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
  margin-inline: auto;
  border-radius: 4px;
}
.front_purpose_img img {
  width: 100%;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .front_purpose_img {
    width: 160px;
    margin-bottom: 8px;
  }
}

.front_purpose_name {
  display: none;
}
@media only screen and (max-width: 767px) {
  .front_purpose_name {
    display: none;
  }
}

.front_flow {
  display: flex;
  gap: 12px;
}
@media only screen and (max-width: 767px) {
  .front_flow {
    gap: 6px;
  }
}

.front_flow_item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: visible;
  border-radius: 8px;
}

.front_flow_upper {
  width: 100%;
  padding: 50px 12px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .front_flow_upper {
    padding: 40px 6px 32px;
  }
}

.front_flow_lower {
  width: 100%;
  padding: 37px 20px 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  border-radius: 0 0 0 8px;
  min-height: 180px;
}
@media only screen and (max-width: 767px) {
  .front_flow_lower {
    padding: 30px 16px 14px 6px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    min-height: 140px;
  }
}

.front_flow_step1 .front_flow_lower {
  background: #5a9a78;
}
.front_flow_step1 .front_flow_step {
  background: #6ab886;
}

.front_flow_step2 .front_flow_lower {
  background: #c9a830;
}
.front_flow_step2 .front_flow_step {
  background: #e6c830;
}

.front_flow_step3 .front_flow_lower {
  background: #d88050;
}
.front_flow_step3 .front_flow_step {
  background: #f5a070;
}

.front_flow_step4 .front_flow_lower {
  background: #b86060;
}
.front_flow_step4 .front_flow_step {
  background: #d87878;
}

.front_flow_step {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 24px 6px 16px;
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 700;
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}
.front_flow_step span {
  font-size: clamp(14px, 3.5vw, 18px);
  margin-left: 2px;
}
@media only screen and (max-width: 767px) {
  .front_flow_step {
    padding: 5px 18px 5px 12px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  }
}

.front_flow_title {
  font-size: clamp(12px, 3.5vw, 18px);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  color: #333;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front_flow_icon {
  width: 80px;
  height: 80px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -25px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: -25px;
}
.front_flow_icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .front_flow_icon {
    width: 36px;
    height: 36px;
    margin-bottom: -18px;
    margin-top: -18px;
  }
  .front_flow_icon img {
    width: 36px;
    height: 36px;
  }
}

.front_flow_desc {
  font-size: clamp(9px, 2.2vw, 12px);
  text-align: center;
  line-height: 1.6;
  color: #fff;
}

.front_cta_btn {
  text-align: right;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .front_cta_btn {
    margin-top: 16px;
  }
}

.front_cta_link {
  display: inline-block;
  padding: 12px 30px;
  background: #fff9e6;
  border: 1px solid #e8d88a;
  border-radius: 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
}
.front_cta_link span {
  margin-left: 8px;
}
.front_cta_link:hover {
  background: #fff3cc;
  border-color: #ddc84a;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .front_cta_link {
    padding: 10px 24px;
    font-size: 12px;
  }
}

.front_faq_list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.front_faq_item {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.front_faq_item:last-of-type {
  margin-bottom: 0;
}

.front_faq_q {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  background: linear-gradient(transparent 88%, #fff066 88%);
}
@media only screen and (max-width: 767px) {
  .front_faq_q {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

.front_faq_q_label {
  color: #253494;
  font-weight: 700;
  background: none;
}

.front_faq_a {
  display: flex;
  align-items: baseline;
  gap: 0 4px;
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .front_faq_a {
    font-size: 13px;
  }
}

.front_faq_a_label {
  color: #c62828;
  font-weight: 700;
}

.front_delivery_map {
  margin: 0 0 20px;
  background-color: #eee;
  padding: 20px;
}
.front_delivery_map img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.front_delivery_map figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .front_delivery_map figcaption {
    font-size: 13px;
  }
}

.front_delivery_lead {
  margin: 0 0 20px;
  line-height: 1.7;
  color: #333;
  font-size: 14px;
}
@media only screen and (max-width: 767px) {
  .front_delivery_lead {
    margin-bottom: 16px;
    font-size: 13px;
  }
}

.front_delivery_prefectures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.3em;
  margin: 0;
  padding: 30px 20px;
  list-style: none;
  background-color: #fff;
}
.front_delivery_prefectures li {
  display: inline-flex;
  align-items: center;
}
.front_delivery_prefectures li::after {
  content: "|";
  margin-left: 1em;
  color: #333;
  font-weight: normal;
}
.front_delivery_prefectures li:last-child::after {
  display: none;
}
.front_delivery_prefectures a {
  color: #17458f;
  text-decoration: none;
  font-size: 14px;
}
.front_delivery_prefectures a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 767px) {
  .front_delivery_prefectures a {
    font-size: 13px;
  }
}

.front_instagram_box {
  border-radius: 8px;
  overflow: hidden;
}
.front_instagram_box iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.front_reason {
  padding-bottom: 40px;
}

.front_reason_lead {
  margin: 0 0 24px;
  padding: 0 20px;
  line-height: 1.7;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .front_reason_lead {
    margin-bottom: 20px;
    padding: 0 16px;
    font-size: 14px;
  }
}

.front_reason_ribbon {
  display: block;
  width: 100%;
  margin: 0 auto 32px;
  padding: 16px 24px;
  background: #1e88e5;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  clip-path: polygon(0 0, 100% 0, 100% calc(50% - 20px), calc(100% - 14px) 50%, 100% calc(50% + 20px), 100% 100%, 0 100%, 0 calc(50% + 20px), 14px 50%, 0 calc(50% - 20px));
}
@media only screen and (max-width: 767px) {
  .front_reason_ribbon {
    margin-bottom: 24px;
    padding: 14px 20px;
    font-size: 20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(50% - 16px), calc(100% - 12px) 50%, 100% calc(50% + 16px), 100% 100%, 0 100%, 0 calc(50% + 16px), 12px 50%, 0 calc(50% - 16px));
  }
}

.front_reason_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 auto 32px;
}
@media only screen and (max-width: 767px) {
  .front_reason_grid {
    gap: 12px;
    margin-bottom: 24px;
  }
}

.front_reason_box {
  background: #fff9e6;
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .front_reason_box {
    padding: 16px;
    border-radius: 10px;
  }
}

.front_reason_box_title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid #000;
}
@media only screen and (max-width: 767px) {
  .front_reason_box_title {
    font-size: 16px;
  }
}

.front_reason_box_text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .front_reason_box_text {
    font-size: 13px;
  }
}

.front_reason_box--media {
  padding: 0;
  background-color: #fff;
}
.front_reason_box--media .front_reason_box_title {
  margin-bottom: 0;
}

.front_reason_box_media {
  display: block;
  overflow: hidden;
}
.front_reason_box_media img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .front_reason_box_media {
    margin-top: 10px;
  }
}

.front_delivery {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 1180px;
  margin: 30px auto;
}
@media only screen and (max-width: 767px) {
  .front_delivery {
    max-width: 100%;
    margin: 20px auto;
    padding: 0 16px;
    gap: 10px;
  }
}

.front_delivery_box {
  flex: 1;
  text-align: center;
  border: 2px solid #f5d742;
  overflow: hidden;
}

.front_delivery_label {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  background: #f5d742;
  letter-spacing: 0.1em;
  margin: -2px -2px 0 -2px;
  width: calc(100% + 4px);
}
@media only screen and (max-width: 767px) {
  .front_delivery_label {
    font-size: 11px;
    padding: 6px 12px;
  }
}

.front_delivery_value {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  padding: 16px 20px;
}
@media only screen and (max-width: 767px) {
  .front_delivery_value {
    font-size: 14px;
    padding: 12px 16px;
  }
}

.front_section {
  max-width: 1180px;
  margin: 60px auto;
  padding: 0 20px;
}
@media only screen and (max-width: 767px) {
  .front_section {
    margin: 30px auto;
    padding: 0 16px;
  }
}

.front_info {
  max-width: 1180px;
  margin: 30px auto;
}
@media only screen and (max-width: 767px) {
  .front_info {
    margin: 20px 16px;
  }
}

.front_info_inner {
  padding: 20px 24px;
  background: #f5f5f5;
  border-radius: 8px;
}
@media only screen and (max-width: 767px) {
  .front_info_inner {
    padding: 16px 20px;
  }
}

.front_info_heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}
@media only screen and (max-width: 767px) {
  .front_info_heading {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

.front_info_icon {
  font-size: 18px;
  color: #333;
}

.front_info_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.front_info_item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.front_info_item:not(:last-child) {
  border-bottom: none;
}
@media only screen and (max-width: 767px) {
  .front_info_item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
  }
}

.front_info_date {
  font-size: 13px;
  color: #666;
  flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .front_info_date {
    font-size: 12px;
  }
}

.front_info_title {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding-left: 16px;
}
.front_info_title:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 767px) {
  .front_info_title {
    font-size: 13px;
    padding-left: 12px;
  }
}

/* 変数を全体で使えるように */
.itemcate .cateall .catebox.hide {
  display: none;
}
.itemcate .cateall .catebox {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 767px) {
  .itemcate .cateall .catebox {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.itemcate .cateall .catebox > .juntab {
  grid-column: 1/-1;
}
.itemcate .cateall .catebox > a {
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}
.itemcate .juntab .sort_ti {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  background: #ccc;
  color: #253494;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.itemcate .juntab .sort_ti::before {
  content: "↓↓";
  margin-right: 8px;
  flex-shrink: 0;
}
.itemcate .juntab .sort_ti span {
  flex: 1;
  text-align: center;
}
.itemcate .juntab .sort_ti::after {
  content: "▼";
  margin-left: 8px;
  flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .itemcate .juntab .sort_ti {
    padding: 8px 12px;
    font-size: 14px;
  }
}
.itemcate .juntab .sort_form201901 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  background: #ccc;
  padding: 12px;
}
@media only screen and (max-width: 767px) {
  .itemcate .juntab .sort_form201901 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.itemcate .juntab:not(.is-open) .sort_form201901 {
  display: none;
}
.itemcate .juntab .sort_option {
  position: relative;
}
.itemcate .juntab .sort_option input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.itemcate .juntab .sort_option label {
  display: block;
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  color: #333;
  font-size: 13px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.itemcate .juntab .sort_option label:hover {
  opacity: 0.9;
}
@media only screen and (max-width: 767px) {
  .itemcate .juntab .sort_option label {
    padding: 8px 10px;
    font-size: 12px;
  }
}
.itemcate .juntab .sort_option input[type=radio]:checked + label {
  font-weight: 700;
  box-shadow: 0 0 0 2px #253494;
}
.itemcate .juntab.is-open .sort_ti::after {
  content: "▲";
}
.itemcate .juntab:not(.is-open) .sort_ti::after {
  content: "▼";
}
.itemcate .cateall .catebox article {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-right: 0;
  background: none;
  border: 1px solid #ccc;
  padding: 10px;
}
.itemcate .cateall .catebox article .box {
  float: none;
  width: 100%;
  padding: 0;
  position: relative;
}
.itemcate .cateall .catebox article .box > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.itemcate .cateall .catebox article > ul {
  position: static;
  margin: 0;
  padding: 8px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  list-style: none;
}
.itemcate .cateall .catebox article > ul li {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.itemcate .cateall .catebox article > ul img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}
.itemcate .cateall .catebox article .box h6:not(.box_overlay) {
  width: 50%;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
}
.itemcate .cateall .catebox article .box h6:not(.box_overlay) span {
  flex-shrink: 0;
}
.itemcate .cateall .catebox article .box h6:not(.box_overlay) span.rb {
  margin-left: auto;
}
.itemcate .cateall .catebox article .box h6:not(.box_overlay) img {
  display: block;
  width: auto;
  max-width: 60%;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}
.itemcate .cateall .catebox article .box .box_overlay {
  position: absolute;
  right: 0;
  margin: 4px 0;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.3;
  background: #ccc;
  color: #333;
  max-width: 45%;
  box-sizing: border-box;
}
.itemcate .cateall .catebox article .box .box_overlay--color {
  bottom: 0;
}
.itemcate .cateall .catebox article .box .box_overlay--size {
  bottom: 1.6em;
}
.itemcate .cateall .catebox article .brand-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  max-width: 180px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  box-sizing: border-box;
  z-index: 2;
}
.itemcate .cateall .catebox article .brand-overlay img {
  display: block;
  max-width: 100%;
  height: auto;
}
.itemcate .cateall .catebox article .brand-overlay span {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  display: block;
}
.itemcate .cateall .catebox article .color-size-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  max-width: 170px;
  padding: 8px 10px;
  background: rgba(200, 200, 200, 0.9);
  border-radius: 6px;
  box-sizing: border-box;
  z-index: 2;
}
.itemcate .cateall .catebox article .color-size-overlay h5 {
  margin: 0 0 4px 0;
  font-size: 12px;
  line-height: 1.3;
}
.itemcate .cateall .catebox article .color-size-overlay h5:last-child {
  margin-bottom: 0;
}
.itemcate .cateall .catebox article .meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 0 4px;
}
.itemcate .cateall .catebox article .meta-row h6 {
  width: 50%;
  margin: 0;
  font-size: 14px;
}
.itemcate .cateall .catebox article .meta-row h6 span {
  display: block;
  float: left;
  width: 10%;
}
.itemcate .cateall .catebox article .meta-row h6 span.rb {
  float: right;
}
.itemcate .cateall .catebox article .meta-row h6 img {
  display: block;
  margin: 0 auto;
  width: 65%;
  height: auto;
}
.itemcate .cateall .catebox article .meta-row h4 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  color: #CB241E;
  text-align: left;
  padding: 0;
}
.itemcate .cateall .catebox article .meta-row h4 span {
  font-size: 14px;
}
.itemcate .cateall .catebox article h2 {
  margin: 8px 0 4px 0;
  font-size: 16px;
  color: #253494;
  padding: 0;
}
.itemcate .cateall .catebox article p {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
}
.itemcate .cateall .catebox .ltemlist_box {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-right: 0;
  background: none;
  border: 1px solid #ccc;
  padding: 5px;
}
.itemcate .cateall .catebox .ltemlist_box .box {
  float: none;
  width: 100%;
  padding: 0;
  position: relative;
}
.itemcate .cateall .catebox .ltemlist_box .box > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.itemcate .cateall .catebox .ltemlist_box .box .ltemlist_color,
.itemcate .cateall .catebox .ltemlist_box .box .ltemlist_size {
  position: absolute;
  right: 0;
  margin: 4px 0;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.3;
  background: #ccc;
  color: #333;
  max-width: 45%;
  box-sizing: border-box;
}
.itemcate .cateall .catebox .ltemlist_box .box .ltemlist_color {
  bottom: 0;
  position: absolute;
  right: 10px;
  font-size: 16px;
}
@media only screen and (max-width: 767px) {
  .itemcate .cateall .catebox .ltemlist_box .box .ltemlist_color {
    font-size: 12px;
  }
}
.itemcate .cateall .catebox .ltemlist_box .box .ltemlist_size {
  bottom: 30px;
  position: absolute;
  right: 10px;
  font-size: 16px;
}
@media only screen and (max-width: 767px) {
  .itemcate .cateall .catebox .ltemlist_box .box .ltemlist_size {
    font-size: 12px;
  }
}
.itemcate .cateall .catebox .ltemlist_box .ltemlist_brand {
  bottom: 0;
  position: absolute;
  left: 0px;
  width: 50%;
}
.itemcate .cateall .catebox .ltemlist_box .box2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
.itemcate .cateall .catebox .ltemlist_box .box2 > p {
  flex: 0 0 48%;
  width: 50%;
  box-sizing: border-box;
  min-width: 0;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_atsu {
  width: 50%;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_atsu span {
  flex-shrink: 0;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_atsu span.rb {
  margin-left: auto;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_atsu img {
  display: block;
  width: auto;
  max-width: 60%;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}
.itemcate .cateall .catebox .ltemlist_box .Item_list_price {
  margin: 4px 0 0 0;
  font-size: 20px;
  color: #CB241E;
  padding: 0;
  text-align: right;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .itemcate .cateall .catebox .ltemlist_box .Item_list_price {
    font-size: 16px;
  }
}
.itemcate .cateall .catebox .ltemlist_box .Item_list_price span {
  font-size: 10px;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_icon {
  position: static;
  margin: 0;
  padding: 8px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  list-style: none;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_icon li {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.itemcate .cateall .catebox .ltemlist_box .Itemlist_icon img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}
.itemcate .cateall .catebox .ltemlist_box h2 {
  margin: 8px 0 4px 0;
  font-size: 16px;
  padding: 0;
  color: #000;
}
.itemcate .cateall .catebox .ltemlist_box h3 {
  margin: 0;
  font-size: 16px;
  padding: 0;
  font-weight: bold;
  color: #000;
}
.itemcate .cateall .catebox .ltemlist_box > p {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
}
@media only screen and (max-width: 767px) {
  .itemcate .cateall .catebox .ltemlist_box > p {
    font-size: 12px;
  }
}

/* -----------------------------------------------------------------
   横スクロール案内（親に .js-scroll-guide / JS が .scroll-guide を挿入）
   ----------------------------------------------------------------- */
.js-scroll-guide {
  position: relative;
  overflow-y: hidden;
}

.itemdetail .midbox .colorbox.js-scroll-guide {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.itemdetail .recently-viewed-scroll .recently-viewed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 12px;
}

@media only screen and (max-width: 767px) {
  .itemdetail .recently-viewed-scroll.js-scroll-guide {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .itemdetail .recently-viewed-scroll .recently-viewed-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
    min-width: 100%;
  }
  .itemdetail .recently-viewed-scroll .recently-viewed-item {
    flex: 0 0 auto;
    width: 120px;
  }
}
.js-scroll-guide .scroll-guide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.js-scroll-guide .scroll-guide img {
  display: block;
  width: auto;
  max-width: min(120px, 48%);
  max-height: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.js-scroll-guide.is-scrollable:not(.scroll-guide-dismissed):not(.scroll-guide-fading) .scroll-guide {
  opacity: 1;
  visibility: visible;
}

.js-scroll-guide.scroll-guide-fading .scroll-guide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.js-scroll-guide.scroll-guide-dismissed .scroll-guide {
  display: none;
}

.as-embed-youtube {
  max-width: 920px;
  margin: 20px auto 28px;
  padding: 0 8px;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .as-embed-youtube {
    margin: 16px auto 22px;
    padding: 0 12px;
  }
}

.as-embed-youtube__inner {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  background: #111;
}

.as-embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*# sourceMappingURL=base.css.map */