@charset "utf-8";
/* =========================================================
   responsive.css － スマホ／タブレット対応オーバーレイ
   既存デザインを保ちつつ、画面幅に応じて流動化する
========================================================= */

/* 元base.cssが幅1060px以下で body{min-width:1200px} を強制し
   横スクロールを出す設計のため、それを打ち消して流動化する */
@media screen and (max-width: 1060px) {
  body { min-width: 0; overflow-x: hidden; }
}

/* ハンバーガーボタンはPCでは非表示 */
.sp-nav-toggle { display: none; }

/* --- ~1240px：固定1200px幅を流動化（横スクロール防止） --- */
@media screen and (max-width: 1240px) {
  #header #header-inner,
  #container .container-inner,
  #footer #footer-inner,
  .mod-box-productdetailList .productdetailList-inner {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
  }
  #header #header-inner .h-gnav nav > ul > li { width: auto; flex: 1; }
  #pan ul { width: 100%; box-sizing: border-box; }
}

/* --- ~900px：タブレット／スマホ --- */
@media screen and (max-width: 900px) {
  /* ヘッダーを縦積みに */
  #header { border-top-width: 6px; }
  #header #header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 12px;
  }
  #header #header-inner .logoArea {
    padding-top: 12px;
    padding-bottom: 12px;
    flex: 1 1 auto;
  }
  #header #header-inner .h-logo {
    width: auto;
    padding-left: 0;
  }
  #header #header-inner .h-logo img { max-width: 70vw; height: auto; }
  #header #header-inner > .logoAreaText {
    order: 3;
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 6px 0;
  }
  #header #header-inner > .logoAreaText a { font-size: 1.5rem; }

  /* ハンバーガーボタン */
  .sp-nav-toggle {
    display: block;
    order: 2;
    width: 46px;
    height: 46px;
    padding: 0;
    margin-left: auto;
    background: #1b1b1b;
    border: none;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
  }
  .sp-nav-toggle span {
    display: block;
    position: absolute;
    left: 11px;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: 0.25s;
  }
  .sp-nav-toggle span:nth-child(1) { top: 15px; }
  .sp-nav-toggle span:nth-child(2) { top: 22px; }
  .sp-nav-toggle span:nth-child(3) { top: 29px; }
  .sp-nav-toggle.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
  .sp-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .sp-nav-toggle.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

  /* グローバルナビをドロップダウンに */
  #header #header-inner .h-gnav {
    order: 4;
    width: 100%;
    margin: 0;
  }
  #header #header-inner .h-gnav nav > ul.globalNav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0 0 10px;
  }
  #header #header-inner .h-gnav nav > ul.globalNav > li {
    width: 100%;
    border-left: none;
    border-top: 1px solid #ddd;
  }
  #header #header-inner .h-gnav nav > ul.globalNav > li a {
    text-align: left;
    padding: 14px 10px;
    font-size: 1.6rem;
  }

  /* ヒーロー画像（1920×584の横長バナー）はスマホで全幅にすると
     高さ約114pxまで縮み文字が読めないため、cover で拡大表示する。
     社名テキストの位置が画像ごとに異なるため、テキスト側に寄せて
     社名が見切れないようにする（1枚目=中央／2枚目=右／3枚目=左） */
  #home .home-slider .mainSlider img {
    width: 100%;
    height: 56vw;
    max-height: 320px;
    object-fit: cover;
    object-position: center;
  }
  #home .home-slider .mainSlider img.hero-right { object-position: right center; }
  #home .home-slider .mainSlider img.hero-left  { object-position: left center; }

  /* メインスライダー下の余白を圧縮 */
  #home .home-slider { margin-bottom: 4em; }
  #home .home-project { margin-top: 5em; padding-bottom: 3em; }

  /* セクションタイトル */
  .pagetitle .title .en { font-size: 2.6rem; }
  .pagetitle .title .jp { font-size: 1.4rem; }

  /* 事業紹介カードを1～2列で縦積み */
  ul.mod-business-menu-box { margin-top: 1.5em; }
  ul.mod-business-menu-box > li,
  ul.mod-business-menu-box > li:nth-child(3n+1),
  ul.mod-business-menu-box > li:nth-child(n+4) {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 28px;
  }
  ul.mod-business-menu-box > li a dd.photo {
    width: 100%;
    height: auto;
  }
  ul.mod-business-menu-box > li a dd.photo img {
    width: 100%;
    height: auto;
  }
  /* 重なっていたタイトルを写真の下に配置 */
  ul.mod-business-menu-box > li a dl { display: flex; flex-direction: column; }
  ul.mod-business-menu-box > li a dd.photo { order: 1; }
  ul.mod-business-menu-box > li a dt.title {
    position: static;
    order: 2;
    width: 100%;
    box-sizing: border-box;
    top: auto;
    right: auto;
    box-shadow: none;
    font-size: 1.6rem;
    padding: 12px 8px;
  }

  /* 施工事例スライダーの矢印が画面外に出ないよう内側に */
  .mod-productSlider .slick-prev { left: 5px; z-index: 2; }
  .mod-productSlider .slick-next { right: 5px; z-index: 2; }

  /* お知らせ */
  .info-list dt { display: block; }

  /* フッターを縦積みに */
  #footer #footer-inner { flex-wrap: wrap; }
  #copyright {
    width: 100%;
    margin-left: 0;
    text-align: left;
    margin-top: 6px;
  }
  #pagetop { left: 0; right: 10px; }
}

/* --- ~600px：スマホ細部調整 --- */
@media screen and (max-width: 600px) {
  #header #header-inner .h-logo img { max-width: 62vw; }
  .pagetitle .title .en { font-size: 2.2rem; }
  .mod-curd-project .contents { padding: 16px; }
  .mod-curd-project .contents p.cat span { font-size: 1.3rem; width: auto; padding: .21em .8em; position: static; display: inline-block; }
  .mod-curd-project .contents p.cat { position: static; }
  .mod-curd-project .contents dt .title { margin-top: .4em; }
}

/* 画像が枠を超えないための安全策（スライダー画像含む） */
img { max-width: 100%; }