@charset "utf-8";
/* ============================================================
   common.css — 基本コード・共通パーツ（PC/SP共通）
   城山衛生材料株式会社／ミツヤファクトリー コーポレートサイト
   マニュアル準拠3枚体制： common.css / pc_contents.css / sp_contents.css
   ============================================================ */

/* ---- カラー・変数（TOPデザインから実測した値）---- */
:root{
  --color-main:   #316C51;   /* メインカラー（緑・ロゴ／ボタン）*/
  --color-deep:   #224C42;   /* 深緑（フッター帯）*/
  --color-blue:   #5E8BAA;   /* くすんだ青（セクション背景）*/
  --color-pale:   #EDF4F9;   /* 薄い水色（ページ／フッター背景）*/
  --color-title:  #006934;   /* 見出し・数字の濃い緑（デザイン実測）*/
  --color-text:   #313131;
  --color-sub:    #6B7580;
  --color-line:   #D3DEE7;
  --color-bg:     #FFFFFF;
  /* 英字見出し（OUR MIND / PRODUCTS）のセリフ体。
     デザインPDFからフォント名が読めなかったため暫定。Figmaの指定が分かれば差し替える */
  --font-serif: Georgia,"Times New Roman","Noto Serif JP","Yu Mincho",serif;
  --font-base: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --pc-inner: 1170px;        /* 本文コンテンツ最大幅（デザイン1440pt−左右136pt）*/
  --wide-inner: 1258px;      /* ヘッダーの最大幅（デザイン1440pt−左右91pt）*/
  --ft-inner:   1184px;      /* フッターの最大幅（デザイン1440pt−左右128pt）*/
  --hd-h: 100px;             /* ヘッダーの高さ（PC）*/
}

/* ---- リセット（最小限）---- */
*{ box-sizing:border-box; }
html{ font-size:62.5%; scroll-behavior:smooth; }
body{
  margin:0;
  padding-top:var(--hd-h);   /* 追従ヘッダーの分だけ下げる（下層ページ）*/
  font-family:var(--font-base);
  font-size:1.6rem;
  line-height:1.9;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
body.hasHero{ padding-top:0; }  /* TOPはヘッダーがMVに重なるので余白なし */
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,address{ margin:0; padding:0; }
ul,ol{ list-style:none; }
address{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--color-main); outline-offset:3px; }

/* ページ内リンクで飛んだとき、追従ヘッダーの下に隠れないようにする */
[id]{ scroll-margin-top:calc(var(--hd-h) + 24px); }

/* ---- PCだけで改行させたいとき用 ---- */
.pcBr{ display:inline; }
.spBr{ display:none; }

/* ---- 共通レイアウト ---- */
.inner{ width:92%; max-width:var(--pc-inner); margin-inline:auto; }

/* ---- 緑のピルボタン（ヘッダー・フッター共通）---- */
.btnPill{
  display:inline-block;
  background:var(--color-main);
  color:#fff;
  border-radius:999px;
  text-align:center;
  font-weight:700;
  letter-spacing:.04em;
  transition:opacity .2s;
}
.btnPill:hover{ opacity:.85; }

/* ============================================================
   共通ヘッダー（土台。詳細は pc_contents / sp_contents）
   ============================================================ */
.siteHeader{
  position:fixed; inset:0 0 auto 0; z-index:100;
}
/* 背景の半透明＋すりガラスは ::before に持たせる。
   ヘッダー本体に backdrop-filter を掛けると、中の position:fixed
   （スマホのドロワーメニュー）がヘッダーの高さに閉じ込められて崩れるため。*/
.siteHeader::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hdInner{ width:92%; max-width:var(--wide-inner); margin-inline:auto; }
.hdCatch{ color:var(--color-text); letter-spacing:.02em; }
.hdLogo{ display:flex; align-items:center; }
.hdCompany{ color:var(--color-main); font-weight:700; letter-spacing:.08em; }
.gnavList a{ font-weight:500; letter-spacing:.04em; }

/* ============================================================
   共通フッター（土台）
   ============================================================ */
.siteFooter{ background:var(--color-pale); }
.ftInner{ width:92%; max-width:var(--ft-inner); margin-inline:auto; }
.ftName{ font-weight:700; }
.ftAddress{ letter-spacing:.02em; }
.ftFollowTitle{ color:var(--color-main); font-weight:700; letter-spacing:.14em; }
.snsList a{ display:block; color:var(--color-main); transition:opacity .2s; }
.snsList a:hover{ opacity:.7; }
.ftLinks a{ font-weight:500; transition:opacity .2s; }
.ftLinks a:hover{ opacity:.65; }

/* 公開後に有効化する項目（よくある質問など）: グレーアウト */
.isDisabled > span{ color:#A9B4BD; cursor:default; }

/* 葉の写真の帯（上に深緑をかぶせる）*/
.ftBand{
  background-image:linear-gradient(rgba(34,76,66,.72),rgba(34,76,66,.72)), url("../img/ftBand.jpg");
  background-size:cover; background-position:center;
}
.copyright{ background:var(--color-pale); text-align:center; color:var(--color-sub); }

/* ============================================================
   セクション共通パーツ（見出し・横長ボタン）
   ============================================================ */
.secEn{ font-family:var(--font-serif); color:#fff; text-align:center; font-weight:400; letter-spacing:.04em; }
.secBadge{
  font-family:var(--font-serif); color:var(--color-main);
  background:#fff; border-radius:999px; text-align:center;
  width:fit-content; margin-inline:auto; letter-spacing:.14em;
}
.secTitle{ color:var(--color-title); text-align:center; font-weight:700; }
.secLead{ color:#707070; text-align:center; }
.secTitle.isLight,
.secLead.isLight{ color:#fff; }

/* 横長ボタン（右端に白い矢印チップ）*/
.btnBar{
  position:relative; display:grid; place-items:center;
  background:var(--color-main); color:#fff; border-radius:4px;
  font-weight:700; letter-spacing:.04em; transition:opacity .2s;
}
.btnBar:hover{ opacity:.86; }
.btnBarDark{ background:#313131; }
.btnBarText{ display:flex; align-items:center; gap:10px; }
.btnBarChip{
  position:absolute; top:50%; right:23px; transform:translateY(-50%);
  display:grid; place-items:center; background:#fff; border-radius:4px;
  color:var(--color-main);
}
.btnBarDark .btnBarChip{ color:#313131; }

/* ---- スクロール出現（要所のみ）---- */
.fadeIn{ opacity:0; transform:translateY(20px); transition:opacity .7s ease-out, transform .7s ease-out; }
.fadeIn.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fadeIn{ opacity:1; transform:none; transition:none; }
}


/* ---- お知らせ詳細：前後の記事が無いときのボタン ---- */
.nwNavBtn.isDisabled{ opacity:.4; pointer-events:none; }

/* ---- お知らせ本文の画像・見出し（クライアントが入れるもの）---- */
.nwBody img{ max-width:100%; height:auto; border-radius:6px; }
.nwBody h2{ margin:2em 0 .8em; font-size:1.15em; font-weight:700; color:var(--color-title); }
.nwBody h3{ margin:1.8em 0 .6em; font-size:1.05em; font-weight:700; }
.nwBody ul, .nwBody ol{ margin:1em 0 1em 1.4em; }
.nwBody ul li{ list-style:disc; }
.nwBody ol li{ list-style:decimal; }
.nwBody a{ color:var(--color-main); text-decoration:underline; }

/* ---- 404 ページ ---- */
.nfSection{ padding:64px 0 96px; text-align:center; }
.nfLead{ line-height:2; color:var(--color-text); }
.nfLinks{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px; }
.nfLinks a{
  display:inline-block; padding:12px 24px; border:1px solid var(--color-main);
  border-radius:999px; color:var(--color-main); font-weight:500;
  transition:background-color .2s, color .2s;
}
.nfLinks a:hover{ background:var(--color-main); color:#fff; }

/* ---- 投稿本文：エディタでの指定を受け取る ----------------------------
   クライアントが管理画面のビジュアルモードで「中央寄せ」「見出し」などを
   指定したときに、サイト側でもそのとおりに出るようにするための指定。
   これが無いと、中央寄せにしても左に寄ったままになる。 */
.nwBody::after{ content:""; display:block; clear:both; }
.nwBody h1{ margin:2.2em 0 .8em; font-size:1.3em;  font-weight:700; color:var(--color-title); }
.nwBody h4{ margin:1.6em 0 .6em; font-size:1em;    font-weight:700; }
.nwBody h5{ margin:1.6em 0 .6em; font-size:.95em;  font-weight:700; }
.nwBody h6{ margin:1.6em 0 .6em; font-size:.9em;   font-weight:700; }
.nwBody strong, .nwBody b{ font-weight:700; }
.nwBody em, .nwBody i{ font-style:italic; }
.nwBody u{ text-decoration:underline; }
.nwBody s, .nwBody del{ text-decoration:line-through; }

.nwBody .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.nwBody p.aligncenter, .nwBody .has-text-align-center{ text-align:center; }
.nwBody p.alignright,  .nwBody .has-text-align-right{ text-align:right; }
.nwBody p.alignleft,   .nwBody .has-text-align-left{ text-align:left; }
.nwBody .alignnone{ display:block; }

.nwBody .wp-caption{ max-width:100%; }
.nwBody .wp-caption img{ display:block; }
.nwBody .wp-caption-text, .nwBody figcaption{
  margin-top:.6em; font-size:.88em; line-height:1.7; color:#6B7671; text-align:center;
}

/* 回り込ませた画像に、見出し・引用・表がかぶらないようにする */
.nwBody h1, .nwBody h2, .nwBody h3, .nwBody h4, .nwBody h5, .nwBody h6,
.nwBody blockquote, .nwBody table, .nwBody hr{ clear:both; }

.nwBody blockquote{
  margin:1.6em 0; padding:.9em 1.2em;
  border-left:3px solid var(--color-main); background:var(--color-pale);
}
.nwBody blockquote p:last-child{ margin-bottom:0; }
.nwBody hr{ margin:2.4em 0; border:0; border-top:1px solid var(--color-line); }
.nwBody table{ width:100%; margin:1.6em 0; border-collapse:collapse; }
.nwBody th, .nwBody td{ padding:.7em .9em; border:1px solid var(--color-line); text-align:left; }
.nwBody th{ background:var(--color-pale); font-weight:700; }

/* ---- 法人ページ：ご相談いただける例のリスト ---- */
.flowReq{ margin:12px 0 0 1.3em; }
.flowReq li{ list-style:disc; line-height:1.95; }
.flowReq li + li{ margin-top:6px; }
.flowReq strong{ font-weight:700; color:var(--color-title); }

/* ---- 会社案内：アクセスの補足 ---- */
.accNote{ margin-top:10px; color:var(--color-main); font-weight:500; }

/* ---- 写真が無いときの枠：内部用語を出さず、ロゴを薄く置く ---- */
.isNoImg{ background:var(--color-pale); display:grid; place-items:center; }
/* .nwCardImg img / .nwFigure img の「枠いっぱいに広げる」指定より
   強くしないと、ロゴが引き伸ばされて切れてしまう */
.isNoImg .phLogo{
  position:static; grid-area:1/1; place-self:center;
  width:48%; max-width:170px; height:auto;
  object-fit:contain; border-radius:0;
  opacity:.28; filter:grayscale(1);
}

/* ---- 在庫なし（次回生産未定）---- */
.isSoldout{ background:#F4F5F6; display:grid; place-items:center; }
.soldoutBox{
  grid-area:1/1; place-self:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 22px; border:1px solid #C9CFD3; border-radius:8px; background:#fff;
}
.soldoutMain{ font-size:1.6rem; font-weight:700; color:#8A939A; letter-spacing:.06em; }
.soldoutSub{ font-size:1.2rem; color:#A3ABB1; letter-spacing:.04em; }
.prodItemPrice.isSoldoutText{ color:#8A939A; font-weight:700; }

/* ---- お問い合わせフォームのエラーメッセージ ----------------------------
   メールフォームプロが出す赤を、サイトの「必須」バッジと同じ赤にそろえる。
   同梱CSS（mfp.statics）のほうが後に読み込まれるので、
   #mailformpro を付けて指定を強くしている。 */
#mailformpro .mfp_tips,
#mailformpro .mfp_tips *,
#mailformpro .mfp_err,
#mailformpro .mfp_error,
body #mfp_error,
body #mfp_error *{
  color:var(--color-accent,#C0392B) !important;
}
#mailformpro .mfp_tips,
body #mfp_error{
  border-color:var(--color-accent,#C0392B) !important;
}
/* 未入力の欄の枠も同じ赤にそろえる */
#mailformpro .problem{
  border-color:var(--color-accent,#C0392B) !important;
}

/* ---- プライバシーポリシー同意：狭い画面での折り返しを整える ----
   スマホで「…に同／意する」と単語の途中で切れて読みにくかったため。 */
.fmCheck > span{ text-wrap:pretty; word-break:normal; }
.noBr{ white-space:nowrap; }