@charset "UTF-8";
/* =========================================================
   大同産業開発株式会社 サイト共通スタイル
   - 配色: アクセント緑 #199868 / 淡い水色 #e0ecf4 / 文字 #222,#111
   - 基準: html=10px(62.5%), body=16px。以降 1rem = 10px
   - コンテナ幅: 1000px / ブレークポイント: 1000px
   ========================================================= */

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { font-size: 62.5%; }
body {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05em;
  color: #222;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: #48f; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .6; }
h1, h2, h3, h4, h5, h6 { margin-bottom: .5rem; line-height: 1.4; }
p { margin-bottom: 1rem; }
figure { margin: 0; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }

/* ---------- レイアウト共通 ---------- */
.l-container { width: 1000px; margin-inline: auto; }

/* =========================================================
   共通: ヘッダー
   ========================================================= */
.site-header { position: relative; z-index: 12; width: 100%; }
.site-header__inner {
  display: flex;
  width: 1000px;
  height: 280px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { width: 100%; }

/* グローバルナビ（縦書き） */
.gnav {
  display: flex;
  flex: 0 0 50%;
  justify-content: space-around;
  align-items: center;
}
.gnav__item {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
  color: #111;
  writing-mode: vertical-rl;
}
.gnav__ja {
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.gnav__ja::before {
  content: '';
  display: block;
  width: 1px;
  height: 55px;
  margin-bottom: 1rem;
  background: #199868;
}
.gnav__en { font-size: 1rem; color: #199868; }

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

/* =========================================================
   共通: モバイル用ドロワー（既定は非表示／.is-open で表示）
   ========================================================= */
.drawer {
  position: fixed;
  z-index: 11;
  inset: 0;
  display: none;
  width: 100%;
  height: 100vh;       /* 非対応ブラウザ用フォールバック */
  height: 100dvh;      /* iOS等: 動的ビューポート高さ（実表示領域に追従） */
  overflow-y: auto;
}
.drawer.is-open { display: block; background: rgba(255, 255, 255, .95); }
.drawer__inner { width: 80%; margin: 0 auto; padding: 10rem 0 0; }
.drawer-nav__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #199868;
  color: #111;
}
.drawer-nav__ja { font-size: 1.8rem; font-weight: 700; margin-right: 1rem; }
.drawer-nav__en { font-size: 1.2rem; font-weight: 700; color: #199868; }
.drawer-nav__item--contact {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0;
  border: none;
  background: #199868;
  color: #fff;
}
.drawer-nav__item--contact .drawer-nav__ja { color: #fff; margin: 0 0 0 1rem; font-size: 2rem; line-height: 1; }
.drawer-nav__item--contact img { width: 24px; }

/* =========================================================
   メイン
   ========================================================= */
.page-main { margin-bottom: 5rem; background: #fff; }

/* 個別: ページ見出し（斜めグラデーション帯＋キービジュアル） */
.page-hero__title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 200px;
  font-size: 3rem;
  font-weight: 700;
  color: #199868;
  background: linear-gradient(135deg, #199868 0%, #199868 30%, #fff 30%, #fff 100%);
}
.page-hero__title-text {
  margin-right: 20%;
  text-align: right;
  /* 左側の緑背景に緑文字が重なっても読めるよう白縁＋白ハローを付与 */
  text-shadow:
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
     0   -1px 0 #fff,  0    1px 0 #fff,
    -1px  0   0 #fff,  1px  0   0 #fff,
     0    0   4px #fff;
}
.page-hero__image { width: 100%; height: 370px; }
.page-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* 個別: パンくず */
.breadcrumb { width: 100%; margin: 0 auto; padding: 2.8rem 0; }
.breadcrumb__inner { width: 1000px; margin: auto; font-size: 1.4rem; font-weight: 700; }
.breadcrumb__inner a { color: #111; }

/* 個別: 本文コンテンツ */
.content { background: #e0ecf4; }
.content__inner { width: 1000px; margin: 0 auto; padding: 7rem 0; }
.content h2 { font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem; }
.content p { margin-bottom: 2rem; }
.content a { color: #199868; text-decoration: underline; }

/* 2カラム（画像並び） */
.columns { display: flex; gap: 2em; margin-top: 3rem; }
.columns__col { flex: 1; }
.columns__col figure img { width: 100%; }

/* =========================================================
   共通: お問い合わせ
   ========================================================= */
.contact { width: 1000px; margin: 10rem auto 12rem; }
.contact__heading {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 3rem;
  text-align: center;
  letter-spacing: .5rem;
}
.contact__heading span { font-size: 4.8rem; color: #199868; }
.contact__lead { margin-bottom: 3rem; text-align: center; }
.contact__items {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact__items::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
  background: #199868;
}
.contact__item { flex: 0 0 46%; text-align: center; }
.contact__title { font-size: 1.8rem; font-weight: 700; margin-bottom: 2rem; }
.contact__icon { margin-bottom: 2rem; }
.contact__action { width: 350px; height: 60px; margin: 0 auto; }
.contact__tel { font-size: 3.8rem; font-weight: 700; color: #111; }

/* 緑のボタン（メールフォーム） */
.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: #fff;
  background: #199868;
  text-decoration: none;
}
.button span { position: relative; display: flex; align-items: center; transition: transform .3s ease-out; }
.button span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1%;
  width: 8px;
  height: 8px;
  opacity: 0;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all .3s ease-out;
}
.button:hover { opacity: 1; }
.button:hover span { transform: translateX(-1em); }
.button:hover span::after { right: -3rem; opacity: 1; }

/* =========================================================
   共通: フッター
   ========================================================= */
.site-footer { border-top: 2px solid #199868; }
.site-footer__company {
  display: flex;
  width: 1000px;
  margin: 5rem auto;
  justify-content: space-between;
  align-items: center;
}
.site-footer__address span { display: block; font-weight: 700; }
.site-footer__address span:nth-child(2) { font-size: 3.8rem; }
.site-footer__logo { width: 40%; }
.site-footer__copy { padding: 1em 0; background: #199868; }
.site-footer__copy p {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin: 0;
}

/* =========================================================
   共通: 追従お問い合わせボタン（PC=右端の縦書きタブ）
   ※ <a> 自体を緑ボックス全面にして、ボタン全体をリンク化
   ========================================================= */
.cta {
  position: fixed;
  z-index: 10;
  top: 280px;   /* ヘッダー高さ(280px)の直下に配置 */
  right: 0;
}
.cta__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 235px;
  writing-mode: vertical-rl;
  color: #fff;
  background: #199868;
  text-decoration: none;
}
.cta__link:hover { opacity: .85; }
.cta__icon { width: 24px; }
.cta__text { display: block; font-weight: 700; margin-top: 2rem; }

/* =========================================================
   レスポンシブ（コンテナ幅 1000px 以下: モバイル表示＋ハンバーガー）
   ========================================================= */
@media screen and (max-width: 1000px) {
  .l-container { width: 100%; }

  /* ヘッダー */
  .site-header__inner { position: relative; width: 96%; height: 80px; padding: 0; }
  .site-header__logo img { width: 80%; }
  .gnav { display: none; }

  /* ハンバーガー（緑のボックス＋3本線） */
  .nav-toggle {
    position: fixed;
    z-index: 15;
    top: 2%;
    right: 3%;
    display: block;
    width: 44px;
    height: 44px;
    background: #199868;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #fff;
    transition: all .4s ease;
  }
  /* 中央バーはボックス基準で left:7px、上下バーは span 基準で left:0（中央バーと揃える） */
  .nav-toggle span { top: 21px; left: 7px; }
  .nav-toggle span::before,
  .nav-toggle span::after { left: 0; }
  .nav-toggle span::before { top: -10px; }
  .nav-toggle span::after { top: 10px; }
  .nav-toggle.is-active span { background: transparent; }
  .nav-toggle.is-active span::before { top: 0; transform: rotate(-135deg); }
  .nav-toggle.is-active span::after { top: 0; transform: rotate(135deg); }

  /* ページ見出し */
  .page-hero__title { width: 100%; font-size: 2.4rem; }
  .page-hero__title-text { margin-right: 5%; }
  .page-hero__image { height: 150px; }

  /* パンくず・本文 */
  .breadcrumb__inner { width: 96%; }
  .content__inner { width: 90%; padding: 5rem 0; }
  .columns { flex-direction: column; gap: 3rem; }

  /* お問い合わせ */
  .contact { width: 96%; margin: 6rem auto; }
  .contact__heading { font-size: 3.2rem; margin-bottom: 2rem; }
  .contact__heading span { font-size: 3.6rem; }
  .contact__items { flex-direction: column; }
  .contact__items::before { width: 100%; height: 2px; }
  .contact__item:nth-last-child(1) { margin-top: 3rem; }
  .contact__action { width: 280px; }

  /* フッター（下部固定CTAバー分の余白を確保） */
  .site-footer__company { flex-direction: column-reverse; width: 96%; }
  .site-footer__logo { width: 85%; }
  .site-footer__copy { margin-top: 1rem; margin-bottom: 60px; }

  /* 追従お問い合わせボタン（モバイル=画面下の横バー） */
  .cta {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .cta__link {
    width: 100%;
    height: 60px;
    writing-mode: horizontal-tb;
  }
  .cta__icon { width: 22px; }
  .cta__text { margin: 0 0 0 1rem; }
}