@charset "UTF-8";
/*
 * common.css（旧サイトから流用）への追加・上書き
 */

/* ハンバーガーを button 要素にしたためのリセット */
.header .spNav {
  background: none;
  cursor: pointer;
}

/* 会社概要：アクセスの切り替えを button 要素にしたためのリセット */
.accessBtn {
  color: #25262d;
}

/* SP メニュー：jQuery の slideToggle の代わりにクラスで開閉 */
@media screen and (max-width: 768px) {
  .header__right.is--open {
    display: block;
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    overflow-y: auto;
  }
}

/* サイトマップ：別ウィンドウアイコン（元の window.png が失われたため SVG で代替） */
.sitemap__title--win a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' fill='none' stroke='%2325262d' stroke-width='1.2'%3E%3Crect x='0.6' y='3.6' width='7.8' height='7.8'/%3E%3Cpath d='M3 1.6V0.6h7.4V8H9.4'/%3E%3C/svg%3E");
}

/* お問い合わせ：ボット対策の入力欄（人間には見せない） */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* お問い合わせ：完了・送信エラー画面のリンク（青背景上） */
.send__description a {
  color: #fff;
  text-decoration: underline;
}

/* フォーム：ラジオボタン（採用エントリー） */
.form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding: 6px 0;
}
.form__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.form__radio input {
  -webkit-appearance: radio;
  appearance: radio;
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ===== www.maru.jp 暫定版 ===== */

/* TOP：旧サイトのスライダー（slick）を、動きのない一覧表示に置き換え */
.slider.slider--static::after {
  display: none;
}
/* 番号（01〜06）は枠の上にはみ出す配置なので、はみ出しを隠さない */
.slider.slider--static,
.slider--static .slider__inner {
  overflow: visible;
}
/* 旧デザインに合わせ、カードは横長（ロゴと説明文を横並び）で 2 列、後ろに薄いグレーの角丸の背景 */
.slider--static .slider__inner {
  opacity: 1;
  height: auto;
  max-width: 1340px;
  margin: 0 auto 50px;
  padding: 70px 50px 60px;
  box-sizing: border-box;
  background: #f1f3f9;
  border-radius: 0 0 80px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 50px; /* 行間は番号のはみ出し分（約 26px）より広く */
}
.slider--static .slider__box {
  width: auto;
  height: auto;
  margin: 0;
}
.slider--static .slider__box a {
  height: 100%;
}
/* 「詳細を見る」の帯（高さ 35px）は枠の下端に重ねて配置されるので、本文の下に帯の分の余白を取る */
.slider--static .slider__box__inner {
  padding-bottom: 60px;
}
@media screen and (max-width: 1100px) {
  .slider--static .slider__inner {
    grid-template-columns: 1fr;
    max-width: 720px;
    border-radius: 0 0 50px 50px;
  }
}
@media screen and (max-width: 768px) {
  .slider--static .slider__inner {
    gap: 40px;
    margin: 0 auto;
    padding: 30px 0 10px;
    background: none; /* スマホは .slider 自体にグレーの背景がある */
  }
  .slider--static .slider__box__inner {
    padding-bottom: 60px;
  }
}

/* 製品ページ：ロゴ画像がない製品の名前 */
.detail_name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* 製品・事例ページ：「まずはご相談下さい」
 * パソコンは右側のフォーム、スマホは画面下のボタンからポップアップ（旧サイトと同じ）。 */
.popupForm__inner {
  position: relative;
}
.button__submit button + button {
  margin-top: 12px;
}
.popupForm__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 36px;
  color: #646970;
  background: none;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .contactForm {
    display: none;
  }
  /* 画面下に固定したボタンの分、フッターが隠れないようにする（ボタンがあるページだけ） */
  body:has(.buttonArea_popup) {
    padding-bottom: 70px;
  }
}

/* サイトマップ */
.siteMap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.siteMap__title {
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 12px;
}
.siteMap__title:first-child {
  margin-top: 0;
}
.siteMap__subtitle {
  font-weight: 700;
  color: #646970;
  margin: 16px 0 8px;
}
.siteMap__list li {
  margin: 0 0 8px 1em;
}
.siteMap a {
  color: #25262d;
}
.siteMap__list a {
  color: #63b2ed;
}
@media screen and (max-width: 768px) {
  .siteMap {
    grid-template-columns: 1fr;
    gap: 0;
  }
}