@charset "utf-8";
/* =========================================================
   五十畑工業株式会社 共通スタイル
   ・外部ライブラリ／JavaScript 不使用
   ・ブレークポイントは 880px の1箇所のみ
   ========================================================= */

/* ===== 変数 =============================================== */
:root{
  --green:#82c400;      /* メインカラー */
  --green-dark:#6ba300; /* 濃いめ（テキストリンク用） */
  --yellow:#fff034;     /* アクセント */
  --cream:#fff8e0;      /* 背景 */
  --line:#e6dcbb;       /* 罫線 */
  --text:#4a4a4a;       /* 本文 */
  --red:#d32f2f;        /* 注意喚起 */
  --red-bg:#fdf3f2;
  color-scheme:light;
}

/* ===== 基本設定 =========================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.85;
}
img{max-width:100%;height:auto;vertical-align:middle;}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0;}
ul{list-style:none;}
a{color:var(--green-dark);}
a:hover{text-decoration:none;}

/* 画面幅に合わせて無段階に伸縮する共通の内側幅 */
.inner{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(14px,3vw,32px);
}

/* ===== ヘッダー =========================================== */
.site-header{background:var(--cream);}
.site-header .inner{
  display:flex;align-items:center;
  min-height:clamp(72px,14vw,120px);
}
.logo{line-height:0;}
.logo img{width:clamp(240px,48vw,420px);}

/* ===== グローバルナビ ===================================== */
.gnav{
  background:var(--green);
  position:sticky;top:0;z-index:10;
}
.gnav ul{display:flex;flex-wrap:wrap;}
.gnav li{flex:1 1 auto;}
.gnav a{
  display:block;text-align:center;
  padding:.7em .9em;
  color:#fff;text-decoration:none;
  font-size:clamp(.88rem,2.6vw,1rem);
  letter-spacing:.06em;
  border-bottom:3px solid transparent;
  border-right:1px solid rgba(255,255,255,.22);
}
.gnav li:last-child a{border-right:none;}
.gnav a:hover{background:var(--green-dark);}
.gnav a[aria-current="page"]{border-bottom-color:var(--yellow);}

/* ===== レイアウト ========================================= */
.layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr); /* minmax(0,…) が横はみ出しを防ぐ */
  gap:clamp(20px,3vw,36px);
  padding-block:clamp(20px,4vw,40px);
  align-items:start;
}
.main{grid-column:2;}
.side{grid-column:1;grid-row:1;}
@media (max-width:880px){
  .layout{grid-template-columns:minmax(0,1fr);}
  .main,.side{grid-column:1;grid-row:auto;}
}

/* ===== カード（セクション枠） ============================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  margin-bottom:clamp(18px,3vw,28px);
  overflow:hidden;
}
.card > h2{
  background:var(--green);
  color:#fff;
  font-size:clamp(1rem,2.8vw,1.15rem);
  padding:.55em clamp(14px,2.5vw,22px);
  letter-spacing:.05em;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2em 1em;
}
.card > h2 a{color:#fff;font-size:.85rem;font-weight:400;}
.card-body{padding:clamp(16px,3vw,26px);}
.card-body > * + *{margin-top:1em;}

/* 見出し（カード内の小見出し） */
.sub-hdg{
  font-size:clamp(.98rem,2.6vw,1.08rem);
  color:#3c3c3c;
  padding-left:.6em;
  border-left:5px solid var(--green);
  margin-top:1.6em;
}
.card-body > .sub-hdg:first-child{margin-top:0;}

/* ===== 更新情報 =========================================== */
.news + .news{margin-top:1.8em;padding-top:1.6em;border-top:1px dashed var(--line);}
.news-head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2em .8em;margin-bottom:.3em;
}
.news-head h3{font-size:clamp(1rem,2.6vw,1.08rem);color:#333;}
.news-date{font-size:.82rem;color:var(--red);white-space:nowrap;}

/* ===== リンクリスト ======================================= */
.linklist li{padding-left:1.1em;text-indent:-1.1em;}
.linklist li::before{content:"▸ ";color:var(--green);}

/* ===== 注意喚起ブロック =================================== */
.alert{
  background:var(--red-bg);
  border-left:4px solid var(--red);
  border-radius:0 4px 4px 0;
  padding:clamp(14px,2.5vw,20px);
}
.alert-title{
  color:var(--red);font-weight:700;
  font-size:clamp(1.05rem,3.2vw,1.3rem);
  margin-bottom:.4em;
}
.checklist > li{padding-left:1.2em;text-indent:-1.2em;margin-top:.6em;}
.checklist > li::before{content:"●";color:var(--green);margin-right:.3em;}
.checklist ul{margin-top:.1em;}
.checklist ul li{padding-left:1.4em;text-indent:-1.4em;font-size:.94em;}
.checklist ul li::before{content:"└ ";color:#999;}
.red{color:var(--red);}
.strong-red{color:var(--red);font-weight:700;}
.url{overflow-wrap:anywhere;}

/* ===== 定義テーブル（会社概要など） ======================= */
.ta1{width:100%;border-collapse:collapse;}
.ta1 th,.ta1 td{
  border:1px solid var(--line);
  padding:.7em 1em;
  text-align:left;
  vertical-align:top;
}
.ta1 th{
  background:var(--cream);
  width:9em;
  white-space:nowrap;
  font-weight:700;
  color:#3c3c3c;
}
/* 狭い画面ではセルを縦積みにする（横スクロールを発生させない） */
@media (max-width:640px){
  .ta1,.ta1 tbody,.ta1 tr,.ta1 th,.ta1 td{display:block;width:auto;}
  .ta1 tr{margin-bottom:-1px;}
  .ta1 th{border-bottom:none;white-space:normal;}
  .ta1 td{border-top:none;}
}

/* 地図（アスペクト比固定でレイアウトずれを防ぐ） */
.map{
  width:100%;
  aspect-ratio:16/10;
  max-height:420px;
  border:1px solid var(--line);
}

/* ===== 製品一覧グリッド =================================== */
.cards{
  display:grid;
  /* auto-fill + minmax でブレークポイント無しに列数が変化する */
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(12px,2vw,20px);
  margin-top:1em;
}
.cards li{display:flex;}
.cards a{
  display:flex;flex-direction:column;
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  background:#fff;
}
.cards a:hover{border-color:var(--green);}
.cards img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.cards .txt{padding:.7em .9em 1em;}
.cards h4{
  font-size:.98rem;
  color:var(--green-dark);
  line-height:1.5;
  margin-bottom:.2em;
}
.cards p{font-size:.85rem;line-height:1.65;}

/* ===== 製品詳細ページ ===================================== */
/* 特徴の箇条書き */
.feat li{padding-left:1.1em;text-indent:-1.1em;}
.feat li::before{content:"・";color:var(--green);}
/* 主要写真（複数枚並べても崩れないよう flex にする） */
.photo{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-block:1.4em;
}
.photo img{
  border:1px solid var(--line);
  border-radius:4px;
  background:#fff;
}
/* 写真＋説明の2カラム表 */
.ta-photo{width:100%;border-collapse:collapse;margin-top:1.2em;}
.ta-photo td{
  border:1px solid var(--line);
  padding:.8em 1em;
  vertical-align:middle;
}
.ta-photo td.ph{width:230px;padding:.6em;text-align:center;}
.ta-photo td.ph img{width:100%;}
/* 狭い画面ではセルを縦積みに */
@media (max-width:640px){
  .ta-photo,.ta-photo tbody,.ta-photo tr,.ta-photo td{display:block;width:auto;}
  .ta-photo tr{margin-bottom:-1px;}
  .ta-photo td.ph{width:auto;border-bottom:none;}
  .ta-photo td.ph img{max-width:340px;}
  .ta-photo td:not(.ph){border-top:none;}
}
/* 戻るリンク */
.backlink{margin-top:1.4em;font-size:.92rem;}

/* ===== フォーム ============================================= */
.ta1 input[type="text"],
.ta1 input[type="email"],
.ta1 textarea{
  width:100%;
  max-width:34em;
  padding:.5em .6em;
  border:1px solid #bbb;
  border-radius:4px;
  font:inherit;
  color:inherit;
  background:#fff;
}
.ta1 textarea{max-width:100%;line-height:1.7;resize:vertical;}
.ta1 input:focus,.ta1 textarea:focus{outline:2px solid var(--green);outline-offset:1px;}
.req{color:var(--red);margin-left:.25em;font-size:.9em;}
.check{display:inline-flex;align-items:flex-start;gap:.5em;cursor:pointer;}
.check input{margin-top:.45em;width:1.1em;height:1.1em;flex:none;}
.form-note{font-size:.82rem;color:#8a8a8a;line-height:1.6;margin-top:.3em;}
.form-err{color:var(--red);font-size:.88rem;margin-top:.3em;}
.form-err-top{
  background:var(--red-bg);border-left:4px solid var(--red);
  padding:.8em 1em;color:var(--red);border-radius:0 4px 4px 0;
}
.form-btns{text-align:center;margin-top:1.6em;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.btn{
  font:inherit;
  padding:.7em 2.2em;
  border:1px solid var(--line);
  border-radius:4px;
  background:#f2f2f2;
  color:var(--text);
  cursor:pointer;
  min-width:11em;
}
.btn-main{background:var(--green);border-color:var(--green);color:#fff;font-weight:700;}
.btn:hover{background:#e6e6e6;}
.btn-main:hover{background:var(--green-dark);}
/* 自動投稿対策用。利用者からは見えない位置に置く */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== 工事中表示 ========================================= */
.construction{
  text-align:center;
  padding:clamp(36px,9vw,80px) 20px;
  color:#8a8a8a;
}
.construction strong{
  display:block;
  font-size:clamp(1.1rem,3.4vw,1.4rem);
  color:#3c3c3c;
  margin-bottom:.5em;
}

/* ===== サイドメニュー ===================================== */
.side-menu{
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.side-menu h2{
  background:var(--green);color:#fff;
  font-size:1rem;padding:.5em 16px;
}
.side-menu h2 span{font-size:.78rem;margin-left:.6em;font-weight:400;}
.side-menu li + li{border-top:1px solid var(--line);}
.side-menu a{
  display:block;padding:.7em 16px;
  color:var(--text);text-decoration:none;
}
.side-menu a:hover{background:var(--cream);color:var(--green-dark);}
.side-menu a[aria-current="page"]{
  background:var(--cream);color:var(--green-dark);font-weight:700;
}

/* ===== フッター =========================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:20px;
  font-size:.82rem;text-align:center;
}
.site-footer p{margin:0;}
.site-footer .pr{color:#999;}
.site-footer .pr a{color:#999;}