@charset "utf-8";

/* ===== 全体のフォント・リセット設定 ===== */
body {
  font-family: "Noto Sans JP", sans-serif; /* サイト全体の基本フォントを「Noto Sans JP」に設定（日本語に適した読みやすいフォント） */
  margin: 0;                               /* ブラウザが自動でつける余白（外側）をリセット */
  padding: 0;                              /* ブラウザが自動でつける余白（内側）をリセット */
}

#header {
  position: relative;  /* 子要素を絶対配置（absolute）で配置する際の基準とするために relative を指定 */
  width: 100%;         /* ヘッダーの横幅を画面いっぱいに広げる */
  height: auto;        /* 中のコンテンツの高さに応じて自動調整するように設定 */
}

.mainimg {
  position: relative;         /* 子要素（スライド画像）を絶対位置（absolute）で配置するための基準を設定 */
  width: 100%;                /* 横幅を画面いっぱいに広げる */
  height: 600px;              /* 高さを600pxに固定 */
  overflow: hidden;           /* 中の画像が枠からはみ出さないように非表示にする（トリミングの役割） */
  z-index: 0;                 /* 他の要素との重なり順を指定（背景レイヤーとして扱う） */
}

/* ===== スライドショー画像リスト ===== */
.mainimg ul {
  position: relative;     /* 子要素のスライド画像（li）を絶対配置するための基準とする */
  width: 100%;            /* 親要素（.mainimg）に合わせて横幅いっぱいに広げる */
  height: 100%;           /* 親要素と同じ高さ（600px）にする */
  margin: 0;              /* デフォルトの外側余白をなくす（ブラウザの初期設定をリセット） */
  padding: 0;             /* デフォルトの内側余白をなくす */
  list-style: none;       /* リストマーカー（・など）を非表示にする */
  z-index: 0;             /* 背景として扱うために重なり順を一番下にする（他要素より奥） */
}

/* ===== スライド画像（フェード切替）===== */
.mainimg ul .now {
  position: absolute;       /* 親要素（ul）を基準に画像を重ねて配置する */
  top: 0;                    /* 上端にピッタリ配置 */
  left: 0;                   /* 左端にピッタリ配置 */
  width: 100%;               /* 横幅を親要素と同じにする（全画面幅） */
  height: 100%;              /* 高さも親要素と同じにする（.mainimgの高さ） */
  opacity: 0;                /* 初期状態では非表示（アニメーションで表示） */
  animation: slideshow 24s linear infinite; /* slideshowという名前のアニメーションを24秒で繰り返す */
}

.mainimg ul .now:nth-child(2) {
  animation-delay: 8s;  /* 2番目のスライド画像は、8秒後にアニメーションを開始する */
}
.mainimg ul .now:nth-child(3) {
  animation-delay: 16s; /* 3番目のスライド画像は、16秒後にアニメーションを開始する */
}

.mainimg ul .now img {
  width: 100%;              /* スライド画像の横幅を親要素にフィットさせる（全幅表示） */
  height: 100%;             /* 高さも親要素に合わせる（全高表示） */
  object-fit: cover;        /* 画像の縦横比を保ちながら、枠いっぱいに表示。はみ出た部分はトリミング */
  display: block;           /* img要素の下にできる余白（インライン要素の影響）を消す */
}

/* ===== スライドショーのアニメーション設定 ===== */
@keyframes slideshow {
  0%   { opacity: 0; }      /* 最初は非表示（透明） */
  10%  { opacity: 1; }      /* 10%のタイミングで完全に表示（フェードイン完了） */
  28%  { opacity: 1; }      /* 28%までは表示し続ける（静止状態） */
  38%  { opacity: 0; }      /* 38%で非表示に戻る（フェードアウト） */
  100% { opacity: 0; }      /* 残りの時間は非表示のまま（次の画像にバトンタッチ） */
}

/* ===== ナビゲーション（右上固定）===== */
#header nav {
  position: absolute;   /* 親要素（#header）を基準にして絶対位置に配置する */
  top: 20px;            /* 上から20pxの位置に配置 */
  right: 40px;          /* 右から40pxの位置に配置（右上に寄せる） */
}

#header nav ul {
  list-style: none;     /* デフォルトのリストマーカー（・など）を削除する */
  margin: 0;            /* 外側の余白をリセット */
  padding: 0;           /* 内側の余白もリセット */
  display: flex;        /* 子要素（li）を横並びに配置する */
  gap: 30px;            /* リストアイテムの間に30pxのスペースを空ける */
}

#header nav a {
  color: #fff;                              /* リンク文字色を白にする（背景画像の上で目立たせる） */
  text-decoration: none;                   /* デフォルトの下線を消す */
  font-weight: bold;                       /* 文字を太字にして強調する */
  font-size: 20px;                         /* ナビゲーションの文字サイズをやや大きめに設定 */
  text-shadow: 0 0 3px rgba(0,0,0,0.6);    /* 白文字の視認性を高めるために黒の影をつける */
}

/* ===== キャッチコピー（中央）===== */
.header-content {
  position: absolute;                  /* 親要素（.mainimg）を基準に絶対位置で配置 */
  top: 50%;                            /* 上から50%の位置に移動（中央寄せの準備） */
  left: 50%;                           /* 左から50%の位置に移動（中央寄せの準備） */
  transform: translate(-50%, -50%);   /* 自身のサイズ分だけ上と左に引いて「真の中央」に配置 */
  text-align: center;                 /* テキストを中央揃えにする */
  color: #fff;                        /* テキストカラーを白に設定（背景画像の上で目立たせる） */
  z-index: 2;                         /* スライド画像よりも手前に表示する */
  padding: 0 20px;                    /* 左右に20pxの余白を追加（文字が端に寄りすぎないように） */
  text-shadow: 0 0 6px rgba(0,0,0,0.6);/* 白文字の視認性を高めるための黒い影を追加 */
}

/* 画像はそのまま。文字だけ“見えないけど存在”にする */
.header-content h1,
.header-content p {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); /* 旧仕様の互換 */
  clip-path: inset(50%);          /* 新仕様：より確実 */
  white-space: nowrap;
}


/* ===== 下のセクション（背景より前に出す）===== */
section {
  position: relative;  /* z-index を有効にするために relative を指定 */
  z-index: 1;           /* 背景画像（z-index: 0）より手前に表示されるように設定 */
}

/* ========== 事業紹介 ========== */
#services {
  padding: 120px 0;            /* 上下にたっぷり余白を入れる */
  background-color: #fff;      /* 背景色を白に設定 */
}

/* ===== 見出し（SERVICES） ===== */
#services h2 {
  font-size: 30px;             /* 大きな見出し文字サイズ */
  text-align: center;          /* 中央寄せ */
  margin-bottom: 10px;         /* 下に余白 */
  font-weight: bold;           /* 太字にする */
  white-space: nowrap;         /* 自動改行を防ぐ（長いタイトルのレイアウト保持） */
}

/* ===== サブ見出し（日本語） ===== */
#services h2 span {
  display: block;              /* ブロック化して強制的に改行 */
  font-size: 16px;             /* 小さめ文字サイズ */
  color: #666;                 /* グレーで控えめに表示 */
  margin-top: 5px;             /* 上に余白 */
}

.services-inner p.services-lead {
  text-align: center;
}

/* ===== 各特徴の説明タイトル（h3）中央寄せ） ===== */
.feature-box h3 {
  text-align: center;          /* 中央寄せ */
}

/* ===== セクション説明文 ===== */
.services-inner p {
  font-size: 16px;             /* 通常の文字 */
  line-height: 1.8;            /* 行間を広くとって読みやすく */
  margin-bottom: 60px;         /* 説明文の下に広めの余白 */
  text-align: left;          /* 中央寄せで視認性アップ */
}

/* ===== 特徴ボックス全体のラッパー（横並び） ===== */
.features {
  display: flex;               /* ボックスを横並びにする */
  justify-content: space-between; /* 均等に配置 */
  flex-wrap: wrap;             /* 幅が足りない場合は折り返す */
  gap: 30px;                   /* ボックス間の余白 */
  margin-top: 40px;            /* 上に余白 */
}

/* ===== 各特徴ボックスの個別設定 ===== */
.feature-box {
  flex: 1 1 calc(25% - 30px);  /* 4つ横並びになるように幅を調整 */
  min-width: 220px;            /* 最小幅を確保してレイアウト崩れを防止 */
  background-color: #eaf7ff;   /* 明るい水色背景で視認性アップ */
  padding: 20px 20px;          /* 上下18px・左右20px */
  border-radius: 12px;         /* 角丸で柔らかい印象に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 薄めの影で立体感 */
  box-sizing: border-box;      /* padding を含めた幅で計算 */
  line-height: 1.8;            /* 行間をやや広めに */
  font-size: 16px;             /* 読みやすい文字サイズ */
  text-align: left;            /* 左寄せ */
  transition: transform 0.3s ease; /* ホバー時の動きを滑らかに */
}

/* ===== 特徴ボックスの最初の行を強調 ===== */
.feature-box::first-line {
  font-weight: 700;            /* 太字で強調 */
  font-size: 16px;             /* 少し大きくして目立たせる */
  color: #007acc;              /* ブランドカラー系の青色に */
}

/* ===== ホバー時の演出（浮き上がり） ===== */
.feature-box:hover {
  transform: translateY(-5px); /* 少し上に移動して浮き上がったような印象に */
}

.feature-icon{
  display: flex;
  justify-content: center; /* ←中央 */
  margin-bottom: 12px;
  line-height: 0;
}
.feature-icon img{
  width: 72px;
  height: 72px;
}
/* ========== 事業紹介 ========== */


/* ========== お知らせ ========== */
#news {
  padding: 120px 0;            /* 上下に広めの余白をとる */
}

/* 内側の中央寄せボックス */
.news-inner {
  max-width: 900px;            /* 最大幅を900pxに制限 */
  margin: 0 auto;              /* 左右中央に配置する */
  padding: 0 40px;             /* 左右に余白をとる */
  box-sizing: border-box;      /* paddingも幅に含める */
}

/* 見出し「NEWS お知らせ」 */
#news h2 {
  font-size: 30px;             /* 大きめの文字サイズ */
  margin-bottom: 40px;         /* 下に余白をとる */
  text-align: left;            /* 左揃えにする */
  font-weight: bold;           /* 太字にする */
  position: relative;          /* 子要素調整のための基準 */
}

/* 見出しの中の「お知らせ」部分 */
#news h2 span {
  font-size: 16px;             /* 小さめの文字サイズ */
  color: #666;                 /* 薄いグレーの色 */
  margin-left: 10px;           /* 「NEWS」と少し間を空ける */
}

/* リスト全体 */
#news ul {
  list-style: none;            /* デフォルトの・を消す */
  padding: 0;                  /* 内側余白なし */
  margin: 0;                   /* 外側余白なし */
}

/* 各お知らせの枠 */
#news li {
  background-color: #fff;               /* 白背景にする */
  border-left: 4px solid #007BBD;       /* 左側に青いライン */
  padding: 20px;                        /* 内側に余白をつける */
  margin-bottom: 20px;                  /* 下に間隔をとる */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);/* ほんのり影をつける */
}

/* 日付部分のスタイル */
#news time {
  font-size: 14px;             /* 小さめの文字サイズ */
  color: #888;                 /* グレーの文字色 */
  display: block;              /* 改行させる */
  margin-bottom: 5px;          /* 下に少し間隔を空ける */
}
/* ========== お知らせ ========== */


/* ========== お問い合わせ ========== */
#contact {
  padding: 120px 0;  /* セクション上下にたっぷり余白を入れる */
  background-color: #fff;  /* 背景を白に設定 */
}

/* 中央寄せのための内包ボックス */
.contact-inner {
  max-width: 1100px;   /* 最大幅を1100pxに制限（読みやすさUP） */
  margin: 0 auto;      /* 中央に配置 */
  padding: 0 40px;     /* 左右に余白を追加 */
  box-sizing: border-box;  /* paddingを含めて全体幅を計算 */
}

/* CONTACT見出し */
#contact h2 {
  font-size: 30px;      /* 見出し文字サイズ */
  text-align: center;   /* 中央寄せ */
  margin-bottom: 10px;  /* 下に余白 */
  font-weight: bold;    /* 太字 */
}

/* サブ見出し（日本語） */
#contact h2 span {
  display: block;       /* 改行して別行表示 */
  font-size: 16px;      /* 小さめの文字サイズ */
  color: #666;          /* 薄いグレー */
  margin-top: 5px;      /* 上に余白 */
}
.contact-map h3 {
  text-align: left;
  margin-bottom: 10px;
  margin-top: 0px;
  font-size: 16px;
}
/* リード文（説明文） */
.contact-lead {
  text-align: center;   /* 中央寄せ */
  margin-bottom: 60px;  /* 下に余白 */
  color: #000000;          /* 文字色 */
  white-space: nowrap;
}

/* 横並びレイアウト全体 */
.contact-columns {
  display: flex;        /* 横並びにする */
  flex-direction: row;  /* 横並び */
  gap: 30px;            /* カラムの間にスペース */
  align-items: stretch; /* 高さを揃える */
}

/* 左側（メール＋電話）を縦に並べる */
.contact-left {
  flex: 1;                 /* 横幅を1:1に分ける（マップと同等） */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 30px;              /* ボックスの間のスペース */
}

/* 右側：マップ用ボックス */
.contact-map {
  flex: 1;                      /* 横幅1:1に設定 */
  background-color: #f5f5f5;    /* 薄いグレーの背景 */
  border-radius: 10px;          /* 角を丸くする */
  padding: 30px;
  box-sizing: border-box;       /* padding込みでサイズ調整 */
  display: flex;
  flex-direction: column;       /* 中身を縦に並べる */
  justify-content: space-between;
}

/* Googleマップ（iframe） */
.contact-map iframe {
  flex: 1;               /* 残りの高さを全て使う */
  border-radius: 5px;    /* 角を少し丸く */
  border: 0;             /* デフォルトの枠線を消す */
  max-width:100%;
  height: 100%;
  min-height: 300px; 
}

/* メール・電話共通ボックス */
.contact-box {
  background-color: #f5f5f5;  /* 背景色を薄グレーに統一 */
  padding: 30px;              /* 内側の余白 */
  border-radius: 10px;        /* 角を丸く */
  box-sizing: border-box;     /* padding込みでサイズ計算 */
}

/* お問い合わせボタン */
.contact-btn {
  display: inline-block;       /* インライン＋ブロック化 */
  margin-top: 15px;            /* ボタン上に余白 */
  background-color: #007BBD;   /* ボタンの背景色（青系） */
  color: white;                /* 文字色を白に */
  text-decoration: none;       /* 下線を消す */
  padding: 10px 20px;          /* ボタンの内側余白 */
  border-radius: 5px;          /* ボタンの角を丸く */
  font-weight: bold;           /* 太字 */
}

/* 電話番号の強調表示 */
.tel {
  font-size: 20px;     /* 少し大きめにする */
  font-weight: bold;   /* 太字で強調 */
  margin-top: 10px;    /* 上に余白 */
}
/* Googleマップのレスポンシブ対応（PC・スマホ両方に効かせる） */
/* --------------------------------------------------------------
   .map-containerで囲んだGoogleマップ(iframe)を、
   画面サイズに関係なく、16:9の比率で綺麗に表示させるための設定。
   -------------------------------------------------------------- */


.map-container {
  position: relative;          /* 中のiframeの基準にするためにrelative */
  width: 100%;                 /* 横幅いっぱいに広げる */
  padding-top: 56.25%;         /* 高さを16:9の比率に（= 9/16 = 0.5625） */
  overflow: hidden;            /* iframeがはみ出さないようにする */
}

.map-container iframe {
  position: absolute;          /* 親要素にぴったり重ねる */
  top: 0;
  left: 0;
  width: 100%;                 /* 親要素いっぱいに広げる */
  height: 100%;
  border: 0;                   /* iframeの枠を消す */
  border-radius: 5px;          /* デザインで角を少し丸く（お好みで調整可） */
}
/* ========== お問い合わせ ========== */


/* ========== フッター ========== */
/* ===== フッター全体のスタイル ===== */
footer {
  background-color: #333;       /* 背景色をダークグレーに設定 */
  color: #fff;                  /* テキストの色を白に設定 */
  padding: 20px 0;              /* 上下に20pxの余白を設定（左右は0） */
  font-size: 14px;              /* フォントサイズを14pxに設定 */
}

/* ===== フッター内部のラッパー（中央揃え・最大幅制限） ===== */
.footer-inner {
  max-width: 1100px;            /* コンテンツの最大幅を1100pxに制限 */
  margin: 0 auto;               /* 左右のマージンを自動にして中央揃え */
  /*padding: 0 20px;*/              /* 左右に20pxの内側余白を追加 */
  display: flex;                /* Flexboxで横並びにする */
  justify-content: space-between;  /*左右に要素を分散配置 */
  align-items: center;          /* 垂直方向に中央揃え */
  flex-wrap: wrap;              /* 幅が足りない場合に折り返す */
}

/* ===== フッター内のリンクリスト（ul） ===== */
.footer-links {
  list-style: none;             /* リストマーカー（・）を非表示にする */
  display: flex;                /* Flexboxで横並びにする */
  gap: 20px;                    /* 各リンクの間隔を20pxに設定 */
  margin: 0;                    /* 外側余白を0に設定 */
  padding: 0;                   /* 内側余白を0に設定 */
}

/* ===== 各リンク（aタグ）のスタイル ===== */
.footer-links li a {
  color: #fff;                  /* リンク文字色を白に設定 */
  text-decoration: none;        /* 下線を削除 */
  transition: opacity 0.3s;     /* hover時のフェードのアニメーションを設定 */
}

/* ===== リンクのホバー効果 ===== */
.footer-links li a:hover {
  opacity: 0.7;                 /* ホバー時に少し透明にする */
}
/* ========== フッター ========== */

/* ========== プライバシーポリシー ========== */
/* プライバシーセクション全体 */
.privacy {
  background-color: #fff;
  padding: 80px 20px;
}

/* 共通ボックス */
.privacy .inner {
  max-width: 800px;     /* 横幅制限で読みやすさUP */
  margin: 0 auto 40px;  /* 中央寄せ＋下余白 */
  text-align: left;     /* 本文を左寄せに */
  line-height: 1.8;
}

/* 見出しの調整 */
.privacy h2, 
.privacy h3 {
  text-align: left;
  margin-bottom: 16px;
}

/* リストのスタイル調整 */
.privacy ul {
  padding-left: 1.5em; /* 行頭の余白をつける */
  margin-top: 10px;
}

.privacy li {
  margin-bottom: 5px;
}
/* ========== プライバシーポリシー ========== */


@media screen and (max-width: 767px) {
 
/* ===================== ヘッダー・メイン画像 ===================== */
  #header {
    height: auto;
  }

  .mainimg {
    height: 300px;
  }
  .header-content{
    width: 300px;
  }

/* 画像はそのまま。文字だけ“見えないけど存在”にする */
.header-content h1,
.header-content p {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); /* 旧仕様の互換 */
  clip-path: inset(50%);          /* 新仕様：より確実 */
  white-space: nowrap;
}


/* ===================== ナビゲーション関連 ===================== */

  /* ハンバーガーボタン：右上に固定してスクロール追従 */
  .hamburger {
    display: flex;
    position: fixed;
    top: 20px;
    right: 20px;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000; /* 最前面に */
  }

  .hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #000000;
    border-radius: 2px;
  }

  /* メニュー本体：非表示の初期状態 */
  #global-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease;
    z-index: 999;
  }

  /* メニューリスト */
  #global-nav ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* メニューリンク */
  #global-nav a {
    color: #000000;
    font-size: 18px;
    text-decoration: none;
    text-shadow: none;
}


  /* メニューを開いた状態 */
  #global-nav.show {
    right: 0;
  }
  #global-nav.show a {
    color: #000000;
  }

/* ===================== 事業紹介 ===================== */	
.services-lead {
  padding: 0px 20px;
  text-align: left;
}
.services-inner p{
  text-align: left;
}
.feature-box {
  margin: 0 15px; /* 左右15pxの余白を追加 */
  border-radius: 10px; /* 角丸を維持するなら */
}
.feature-icon img{
  width:60px; height:60px; 
}

/* ========== お問い合わせ ===================== */
  /* お問い合わせセクション（横並び→縦並び） */
  .contact-columns {
    flex-direction: column;
  }

  .contact-left,
  .contact-map {
    width: 100%;
  }

  .contact-map {
    margin-top: 30px;
  }

  .contact-map iframe {
    height: 200px;
  }
/* ===================== フッター ===================== */
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .footer-links {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
  }

  .footer-links li {
    list-style: none;
  }

  .footer-links a {
    color: #fff;
    text-decoration: none;
  }

  .footer-copy {
    order: 2;
  }
}