@charset "UTF-8";

/* =========================================================
   Base / Reset（必要最低限）
   ========================================================= */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*,*::before,*::after { box-sizing: inherit; }
body, h1,h2,h3,h4,h5,h6, p, ul,ol,li, figure { margin:0; padding:0; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; }
ul,ol { list-style:none; }
a { color:inherit; text-decoration:none; }
button { background:none; border:0; padding:0; cursor:pointer; }
table { border-collapse:collapse; }

/* =========================================================
   Typography
   ========================================================= */
html { font-size:62.5%; } /* 1rem = 10px */
body {
  font-family: "Noto Sans JP", "Noto Sans Japanese", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:1.6rem; line-height:1.6; color:#111; background:#fff;
}

/* Link hover */
a:hover { text-decoration:underline; }

/* =========================================================
   Utilities（最小限）
   ========================================================= */
.container { max-width:1200px; margin:0 auto; padding:0 16px; }
.tal{text-align:left!important;} .tac{text-align:center!important;} .tar{text-align:right!important;}
.fwn {font-weight:normal !important; } .fwm {font-weight:500 !important; } .fwb {font-weight:bold !important; }
.db{display:block;} .dn{display:none!important;}
.mt0{margin-top:0!important;} .mb0{margin-bottom:0!important;}
.mt16{margin-top:16px!important;} .mb16{margin-bottom:16px!important;}
.mt24{margin-top:24px!important;} .mb24{margin-bottom:24px!important;}
small {font-size: 80%; }
.borderWrap01 {
  border: #666 solid 1px; }
.borderWrap02 {
  border: #666 solid 2px; }
.borderWrap03 {
  border: #666 solid 3px; }
.borderWrap04 {
  border: #666 solid 4px; }
.beforeTextCircle:before {
  content: '◯'; }
.beforeTextSquare:before {
  content: '■'; }
.beforeTextKome:before {
  content: '※'; }
.iconBig:before {
  font-size: 150%;
  position: relative;
  top: 0.1em; }
.iconVeryBig:before {
  font-size: 240%; }
.ls-disc > li {
  list-style-type: disc !important; }
.ls-square > li {
  list-style-type: square !important; }
.ls-decimal > li {
  list-style-type: decimal; }
.ls-ti > li {
  text-indent: -1em;
  padding-left: 1em; }


/* =========================================================
   Buttons（共通）
   ========================================================= */
.btn { display:inline-block; padding:10px 14px; border-radius:6px; font-size:1.4rem; line-height:1; }
.btn--ghost { border:1px solid #999; color:#111; background:#fff; }
.btn--primary { background:#e24040; color:#fff; }
.btn--primary:hover { opacity:.9; text-decoration:none; }

/* =========================================================
   Footer
   ---------------------------------------------------------
   対応HTML（parts/site-footer.php）：
   <footer class="site-footer">
     <div class="inside-footer grid--footer"> … 各 .ft-col … </div>
     <div class="inside-footer bottom"> … </div>
   </footer>
   ========================================================= */
.site-footer{ background:#111; color:#eee; }
.site-footer a{ color:#eee; }
.site-footer a:hover{ text-decoration:underline; }

/* grid */
.grid--footer{
  display:grid; gap:24px; padding:40px 20px;
  grid-template-columns: repeat(5, minmax(0,1fr)); /* 会社情報＋4列 */
}
.ft-col .ft-ttl{ font-weight:700; font-size:1.6rem; margin:0 0 12px; }
.ft-list{ list-style:none; margin:0; padding:0; }
.ft-list li{ margin:6px 0; }

.ft-about .ft-address{ font-style:normal; line-height:1.6; margin:.5em 0 1em; }
.ft-cta .btn{ margin-right:8px; }

/* bottom row */
.site-footer .bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,.12); padding:12px 20px;
}
.to-top{ font-size:1.2rem; border:1px solid #666; padding:.3em .8em; border-radius:999px; }

/* responsive footer */
@media (max-width: 1100px){
  .grid--footer{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 700px){
  .grid--footer{ grid-template-columns: 1fr; }
  .site-footer .bottom{ flex-direction:column; gap:8px; }
}

/* =========================================================
   Slick dots（必要なら有効化、slick.css 本体は別ファイルに任せる）
   ========================================================= */
/*
.slick-dots{ display:flex; justify-content:center; gap:8px; margin:12px 0; }
.slick-dots li button{ width:.8em; height:.8em; padding:0; border-radius:50%; background:#e6e6e6; text-indent:-9999px; }
.slick-dots .slick-active button{ background:#e24040; }
*/

/* =========================================================
   Page scaffolding（必要に応じて使う軽いレイアウト）
   ========================================================= */
.section { padding:48px 0; }
.section .section-ttl{ font-size:2.0rem; font-weight:700; margin-bottom:16px; }

/* ===== 共通：画像と枠 ===== */
.linksWrap > div > a{ display:block; }
.linksWrap img{ display:block; width:100%; height:auto; }
/*.childBdWrapLightGray > *{ border:1px solid #e6e6e6; }*/

/* ===== 3カラム（商品ラインナップ・contactNavIndex など） ===== */
.df-partition3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  /*gap:16px;*/
}

/* 3カラム内で“半幅×2=1列分”にしたい箱（PCだけ2カラム分を占有） */
.df-partition3 > .pc-widthHalf{ grid-column: span 2; }

/* 旧CSSの「子要素 width 固定」を無効化（3カラムのみ） */
.df-partition3 > *{ width:auto !important; }

/* ===== 2カラム（バナー2分割等） ===== */
.df-partition2,
.df-column2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

/* ===== contactNavIndex の各リンクをタイル風に（任意で綺麗に） ===== */
.contactNavIndex a{
  display:flex; align-items:center; justify-content:center;
  padding:14px; min-height:48px; text-decoration:none;
}
.contactNavIndex i{ margin-right:.5em; }

/* contactNavIndex 内に画像リンクが来る場合の保険（任意） */
.contactNavIndex a img{
  display:block;
  width:100%;
  height:auto;
}
.contactNavIndex .pc-widthHalf{ grid-column: auto; }

/* support FAQ タイルだけ整える */
.supportFaqTiles > div > a,
.toiletSupportTiles > div > a{
  display:flex;
  align-items:center;
  gap:.75em;
  padding:14px;
  min-height:64px;
  text-decoration:none;
}

.supportFaqTiles .ttl,
.toiletSupportTiles .ttl{
  font-weight:600;
  line-height:1.3;
}

/* バッジがある時は右寄せで揃う */
.supportFaqTiles .textBgc{
  margin-left:auto;
  white-space:nowrap;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px){
  .df-column2,
  .df-partition2{ grid-template-columns: 1fr 1fr; }
  .df-partition3 > .pc-widthHalf{ grid-column: span 2; }
}

@media (max-width: 640px){
  .df-partition2,
  .df-column2{ grid-template-columns: 1fr; }

  /* “sp-two” を付けた時だけ2列 */
  .df-partition3.sp-two,
  .df-column2.sp-two{ grid-template-columns: 1fr 1fr; }

  .df-partition3 > .pc-widthHalf{ grid-column: auto; }
}

/* TOP：ネスト2カラムを親3列に”溶かす”（必要な時だけ：専用クラス推奨） */
.df-partition3.linksWrap.is-flatten > .df-partition2{ display: contents; }

/* =========================================================
   .tableGrayPartition — テーブル罫線リセット
   ---------------------------------------------------------
   GeneratePress テーマの `table, td, th { border: 1px solid rgba(0,0,0,.1) }` を打ち消す。
   border-collapse は common.css:13 の `table { border-collapse: collapse }` で対応済み。
   行間区切り線（tr + tr th/td の border-top）は sp.css 側で詳細度 0,1,2 として定義されており、
   このルール（詳細度 0,1,1）より優先されるため、行区切りは破壊されない。
   PC / SP 両方に共通して適用される。
   ========================================================= */
.tableGrayPartition table,
.tableGrayPartition th,
.tableGrayPartition td {
  border: none;
}

/* カラーバリエーション 丸表示 */
[class*="colorVariation-"] {
  display: block;
  width: 5em;
  height: 5em;
  border: #fff solid 1px;
  background: #ddd;
  border-radius: 50%;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.4);
  margin: 0 auto; /* ← これを追加 */
}
.colorVariation-newPink {
  background: #fce1e2; }
.colorVariation-pastelIvory {
  background: #f4ede7; }
.colorVariation-pureWhite {
  background: #f8fdff; }

/* Close ボタン非表示（一覧ページ直接展開時） */
.entry-content .close,
.entry-content .closeXmark {
  display: none; }