@charset "utf-8";
/* ============================================================
   静的サイト用 追加スタイル（自前・軽量）
   Smart Slider3 / Owl Carousel など重いプラグインの置き換え。
   テーマ本体 style.css の後に読み込む。
============================================================ */

/* ---------- トップ ヒーロースライダー ---------- */
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  background: #fff;
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active {
  opacity: 1;
}
/* 旧ブラウザ向けフォールバック（aspect-ratio未対応時の最低高さ） */
@supports not (aspect-ratio: 4 / 1) {
  .hero-slider { height: 25vw; max-height: 300px; }
}

/* ---------- トップ 事業案内カルーセル ---------- */
.solution-carousel-wrap {
  background: #fafafa;
  border: solid 0 #f0f0f0;
  border-radius: 5px;
  padding: 8px;
}
.solution-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.solution-carousel::-webkit-scrollbar {
  display: none;
}
.solution-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  text-align: center;
  padding: 32px 5% 28px;
}
.solution-item:nth-child(odd)  { background: rgb(232, 232, 232); }
.solution-item:nth-child(even) { background: rgb(244, 244, 244); }
.solution-item img {
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}
.solution-item h3 {
  font-size: 1.05rem;
  margin: 0.2em 0 0.4em;
  color: #333;
}
.solution-item p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #555;
  margin: 0;
}
@media (min-width: 480px) {
  .solution-item { flex-basis: 50%; }
}
@media (min-width: 768px) {
  .solution-item { flex-basis: 33.3333%; }
}
@media (min-width: 980px) {
  .solution-item { flex-basis: 25%; }
}

/* ---------- ハンバーガーメニュー オーバーレイ背景 ---------- */
#js-menuBk {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 8;
}
#js-menuBk.isOpen {
  display: block;
}

/* ---------- 求人ページ Googleマップ レスポンシブ ---------- */
.recruit iframe,
.access iframe,
.su-gmap iframe {
  max-width: 100%;
}

/* ---------- お問い合わせ（電話案内）----------
   見出し・枠・下線などの装飾はテーマCSSの section.contactbox を使用。
   内容が少ないので本文幅を抑えて中央に寄せ、広い画面での間延びを防ぐ。 */
.contact .entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.contactbox {
  margin-bottom: 2.5em;
}
/* 枠内の余白は箱のpaddingではなく各行のmarginで取る。
   箱にpaddingを付けると上下のグラデ線（::before/::after）が内側にズレて
   左右の縦罫と角でつながらず「ちぎれて」見えるため。 */
.contactbox h3,
.contactbox p {
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}
.contactbox h3 {
  margin-top: 1.5rem;
}
.contactbox .tel {
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.contactbox .tel .blank {
  font-size: 0.8rem;
  font-weight: normal;
  color: #777;
  margin-left: 0.5em;
}
.contactbox .contact-sub {
  color: #555;
  margin: 0.75rem 1.75rem 0;
  display: flex;
  align-items: center;
}
/* 最終行と下のグラデ線の間にも余白を確保 */
.contactbox p:last-of-type {
  margin-bottom: 1.5rem;
}
/* アイコンを固定幅の溝に中央寄せし、各行のテキスト開始位置を揃える */
.contactbox .tel i,
.contactbox .contact-sub i {
  flex: 0 0 1.8rem;
  text-align: center;
  margin-right: 0.4em;
  color: #2f81b7;
}
.contactbox .tel a {
  color: inherit;
  text-decoration: none;
}

/* テーブルのレイアウト・th配色はテーマCSS(.entry-content table)に委ねる
   （th＝青背景・白文字、481px以上で横並び：元サイトと同じ挙動）。
   ここではフォーム固有の微調整のみを行う。 */
.contact-form th {
  text-align: left;
  letter-spacing: 0.1em;
}
.contact-form th p {
  margin: 0;
}
.contact-form td {
  padding: 0.8em 0.5em;
}
.contact-form td p {
  margin: 0 0 0.5em;
}
.contact-form td p:last-child {
  margin-bottom: 0;
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1rem;
}
.contact-form textarea {
  margin-bottom: 0;
}
.contact-form select {
  min-width: 8em;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1rem;
  margin: 0.4em 0;
}
.contact-form .required {
  color: #00efff;
  margin-left: 0.3em;
}
.contact-form .zipmark {
  margin-right: 0.3em;
}
.contact-form .checklist label {
  display: inline-block;
  margin-right: 1.2em;
  line-height: 2;
}

/* タイトル見出し：投稿日を表示しないため、PC幅で付く上罫線を消し下罫線のみに整理 */
.hentry .article-header {
  border-top: none;
}

.pp {
  border: 1px solid #ddd;
  background: #fafafa;
  padding: 1em 1.2em;
  height: 220px;
  overflow-y: scroll;
  font-size: 0.82rem;
  line-height: 1.7;
  margin-bottom: 1.2em;
}
.pp h4 { margin-top: 0; }
.pp h5 { margin-bottom: 0.2em; color: #333; }
.agree {
  text-align: center;
  margin-bottom: 1em;
}
.send {
  text-align: center;
}
.send .btn,
.contact-form input[type="submit"] {
  display: inline-block;
  background: #2f81b7;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.8em 2.5em;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  margin: 0.3em;
}
.send .btn:hover,
.contact-form input[type="submit"]:hover {
  background: #246499;
}
.send .btn.back {
  background: #888;
}
.send .btn.back:hover {
  background: #6f6f6f;
}

/* 確認・完了画面 */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
}
.confirm-table th,
.confirm-table td {
  border: 1px solid #e0e0e0;
  padding: 0.8em 1em;
  text-align: left;
  vertical-align: top;
}
.confirm-table th {
  width: 30%;
  background: #f7f7f7;
  color: #333;
  white-space: nowrap;
}
.form-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #c0392b;
  padding: 1em 1.2em;
  border-radius: 4px;
  margin-bottom: 1.5em;
}
.form-error ul {
  margin: 0.4em 0 0;
  padding-left: 1.2em;
}
.thanks-message {
  text-align: center;
  padding: 2em 0;
}
.honeypot {
  position: absolute;
  left: -9999px;
}