/* ========================================
  Base
======================================== */

/* box-sizing は最低限入れる（リセットではない実務必須） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  color: #222;
  background-color: #fff;
}

/* 画像の基本設定（2倍書き出し前提） */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
}

/* リスト */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ========================================
  Layout
======================================== */

#headerArea,
#mainArea,
#footerArea {
  width: 100%;
}

section,
article {
  position: relative;
}

/* ========================================
  Header
======================================== */

#headerArea {
/* 1. ページ上部に常に固定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* 2. ヘッダーの高さは120px (border-top 30pxを含む) */
  box-sizing: border-box; /* 高さにボーダーを含める設定 */
  height: 120px;
  border-top: 30px solid rgba(58, 83, 2, 1); /* 上部の飾り線 */
  background-color: rgba(23, 34, 0, 0.5); /* 背景色（少し透過） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 浮いた感じを出す影 */

  /* 3 & 4. 左右の配置設定 */
  display: flex;
  justify-content: space-between; /* 両端に寄せる */
  align-items: center;           /* 上下中央揃え */
  padding: 0 40px;               /* 左右の余白 */
}

/* ロゴのサイズ調整（2倍画像を想定） */
#headerArea h1 {
  line-height: 0;
}

#headerArea h1 img {
  width: auto;
  height: 60px; /* 120-30=90pxの高さに対して余裕を持たせたサイズ */
}

/* ナビゲーションの横並び */
#headerArea nav ul {
  display: flex;
  gap: 30px; /* メニュー間の間隔 */
}

#headerArea nav ul li a {
  font-weight: 500;
  color: var(--text-color);
  font-size: 1.1rem;
  transition: color 0.3s;
  font-family: "Noto Serif JP", serif;
  font-weight: 1000;
  color: #fff;
}

#headerArea nav ul li a:hover {
  color: #fff;
}

/* ==========================================================================
   visualArea（ヒーローセクションの親）
   ========================================================================== */

#visualArea {
  width: 100%;
  /* ここには高さを指定せず、中身に合わせて伸びるようにします */
}

/* 画面いっぱいに表示したいメイン画像エリア */
.mainImg {
  position: relative;
  width: 100%;
  height: 100vh; /* ここで画面高さ100%を指定 */
  overflow: hidden;
}

/* 1枚目：背景となる庭園写真 */
.mainImg img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 隙間なく敷き詰める */
}

/* 2枚目：天地中央に重ねるキャッチコピー画像 */
.txtimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 100%; /* 2倍画像なので表示上は半分（適宜調整） */
  max-width: 820px;
  height: auto;
  z-index: 10;
}

/* ==========================================================================
   leadArea（全画面画像の下に続く文章エリア）
   ========================================================================== */

.leadArea {
  max-width: var(--inner-width);
  margin: 0 auto;
  text-align: center;
  background: rgba(225, 229, 216, 1);
}

.leadArea div {
    padding: 5rem 0;
}

.leadArea p {
  max-width: 820px;
  margin: 0 auto;
  line-height: 2.2;
  font-size: 1.2rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  text-align: left;
  margin-bottom: 1rem;
}

/* リード文内の最後の画像 */
.leadArea img {
  margin-top: 0;
  width: 100%;
}

/* ========================================
  Headings
======================================== */

.heading02 {
  margin-bottom: 40px;
  font-size: 2rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.heading03 {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   事業案内（#business）
   ========================================================================== */

#business {
  padding: 100px 0; /* 上下の余白 */
  overflow-x: hidden; /* 装飾の突き出しによる横スクロール防止 */
}

/* --- 1. heading02: 左端から伸びる装飾 --- */
.heading02 {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  text-align: left;
}

/* 疑似要素で画面左端からの横棒を作成 */
.heading02::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%; /* 文字の左端から開始 */
  width: 100vw; /* 画面幅分長くする */
  height: 20px; /* 装飾の厚み */
  margin-right: 1rem;
  background-color: rgba(217, 217, 217, 1);
  transform: translateY(-50%);
}

/* --- 2. textbox と rightimgbox の横並び --- */
#business > .txtbox,
#business > .rightimgbox {
    width: 50%;
}

/* レイアウトを整えるため、textboxとrightimgboxをラップするイメージで調整 */
#business .layoutbox{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右2分割 */
  max-width: 1100px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
}

/* gridの影響を見出しに与えないためのリセット（見出しとslideimgは全幅） */
.heading02, .slideimg, .bgbox {
  grid-column: 1 / -1;
}

.txtbox {
    margin: 0;
    padding: 0;
}

.rightimgbox img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- slideimg: 余白ありの無限スライド --- */

.slideimg {
  width: 100vw;
  margin: 80px calc(50% - 50vw);
  overflow: hidden;
}

.slideimg ul {
  display: flex;
  /* 画像と画像の間隔 */
  gap: 20px; 
  /* 計算式：(1枚の幅 * 8枚) + (隙間 20px * 7箇所) 
     ※animationをスムーズにするため、ここでは一旦 width は auto でもOK
  */
  width: max-content; 
  animation: scroll-left 30s linear infinite;
}

.slideimg li {
  /* 1枚の幅を「画面の4分の1」から「隙間分」を引いたサイズに調整 */
  width: calc(25vw - 15px); /* 4枚並びで間隔20pxの場合の微調整 */
  flex-shrink: 0;
  list-style: none;
}

.slideimg img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  vertical-align: bottom;
}

/* アニメーションの修正 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 重要：4枚分進んだところでリセットする。
       「(1枚の幅 + gap) * 4枚」分をマイナスする計算 
    */
    transform: translateX(calc(-50% - 10px)); /* gapの半分を調整 */
  }
}

/* ==========================================================================
   作庭塾エリア（.bgbox）
   ========================================================================== */

.bgbox {
  max-width: 1200px;
  margin: 100px auto; /* 上下に余白を持たせて中央配置 */
  padding: 40px 0;    /* 背景色の中の上下余白 */
  background-color: rgba(244, 244, 244, 1);
}

/* 3, 4, 5 共通の幅制限コンテナとしての役割を親に持たせる */
.bgbox > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 3. heading03 --- */
.bgbox .heading03 {
  text-align: center;
  padding-bottom: 15px; /* 文字と線の距離 */
  margin-bottom: 40px;  /* 下の要素との距離 */
  border-bottom: 3px solid rgba(71, 98, 11, 1);
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
}

/* --- 4. p (説明文) --- */
.bgbox p {
  text-align: left;
  line-height: 2;
  margin-bottom: 50px;
}

/* --- 5. div内のfigure（3カラム） --- */
/* HTML構造が <div class="figures-wrapper"><figure>...</div> の想定 */
.bgbox div {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 均等な3カラム */
  gap: 30px; /* 画像同士の間隔 */
}

.bgbox figure {
  margin: 0; /* デフォルトの余白をリセット */
}

.bgbox figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* 画像の比率を統一すると綺麗に並びます */
  object-fit: cover;
  vertical-align: bottom;
}

.bgbox figure figcaption {
  margin-top: 15px;
  font-size: 0.9rem;
  text-align: center;
}

/* ==========================================================================
   施工事例（#case）
   ========================================================================== */

/* --- 3. heading03 (1100px幅・右側に突き抜ける棒) --- */
#case .heading03 {
  position: relative;
  max-width: 1100px;
  margin: 40px auto; /* 中央配置しつつ、中身は左揃え */
  font-size: 1.5rem;
  text-align: left;
}

#case .heading03::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0; /* 文字の左端から開始 */
  width: 80%; /* 画面幅分長くする */
  height: 10px; /* 装飾の厚み */
  background-color: rgba(217, 217, 217, 1);
  transform: translateY(-80%);
}

/* --- 2 & 4. columnbox (3カラム) --- */
.columnbox {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* --- 5. figure.imgbox --- */
#case figure.imgbox {
  /* --- ここを追加 --- */
  border-radius: 15px; /* 角丸の大きさ。お好みで調整してください */
  overflow: hidden;    /* 中の画像が角からはみ出すのを防ぐ */
  /* ------------------ */  background-color: rgba(244, 244, 244, 1);
  margin: 0;
  display: flex;
  flex-direction: column;
}

#case figure.imgbox img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

#case figcaption {
  padding: 10px 20px;
  text-align: center;
}

#case figcaption p {
  text-align: left;
  margin: 0 0 1rem;
}

/* --- 6. 詳細を見るボタン (丸ボタン) --- */
#case figcaption div a {
  display: inline-block;
  width: 100%;
  margin-top: 15px;
  padding: 10px 40px;
  background-color: rgba(225, 229, 216, 1); /* 指定の色 */
  /* ボタンと背景が同色なので、視認性のために枠線や影をつけるのが一般的です */
  border: 1px solid var(--main-color); 
  color: var(--main-color);
  text-decoration: none;
  border-radius: 50px; /* 丸ボタン */
  font-weight: 500;
  transition: 0.3s;
}

#case figcaption div a:hover {
  background-color: rgba(225, 229, 216, 1); /* 指定の色 */
  color: #fff;
}

/* ==========================================================================
   会社概要（#company）
   ========================================================================== */

#company {
  padding: 100px 0;
}

/* --- 1. heading02 --- */
/* (businessと同様のスタイルが適用されます) */

/* --- 2. dlist全体の背景と最大幅 --- */
.dlist {
  max-width: 1100px;
  margin: 40px auto;
  /* 角を少し丸くしたり、内側に余白を入れると丁寧です */
  padding: 20px 0; 
}

/* --- 3. dlを1行のコンテナとして扱う --- */
.dlist dl {
  display: flex;
  margin: 0 0 0.3rem;
  padding: 5px;
  background-color: #f4f4f4; /* 全体の背景色 */
}

/* --- 4. dt（項目名）の幅と装飾 --- */
.dlist dt {
  width: 25%;
  padding: 5px;
  font-weight: normal;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* 文字を上下中央に */
}

/* --- 5. dd（内容）の幅と白の3pxボーダー --- */
.dlist dd {
  width: 75%; /* dt(25%)と合わせて100% */
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f4f4f4; /* 背景色（念のため） */
  border-left: 0.2rem solid #ffffff;
  line-height: 1.8; /* 改行が多い代表者や事業内容を見やすく */
}

/* ==========================================================================
   お問い合わせ（#contact）
   ========================================================================== */

#contact {
  padding: 100px 0;
}

/* --- 1. heading02 --- */
/* (businessと同様のスタイル) */

/* --- 2. formbox全体の設定 (最大幅1100px, 背景#f4f4f4) --- */
.formbox {
  max-width: 1100px;
  margin: 40px auto;
  background-color: #f4f4f4; /* ボックス全体をグレーに */
  padding: 40px;        /* 上下にゆとりを持たせる */
  box-sizing: border-box;
}

/* --- 3. dl.formlist (横並びの設定) --- */
.formlist {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 50px 0; /* ボタンとの距離 */
}

.formlist dt {
  width: 25%;
  padding: 20px 0;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-align: left;
}

.formlist dd {
  width: 75%;
  margin: 0;
  padding: 10px 0;
  text-align: left;
}

/* 入力要素のスタイル */
.formlist input[type="text"],
.formlist input[type="email"],
.formlist input[type="tel"],
.formlist textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ffffff; /* 入力欄を白にして背景との差をつける */
  box-sizing: border-box;
  font-size: 1rem;
}

/* --- 4. button (背景#3A5302, 角丸, 中央) --- */
.formbox form > div {
  text-align: center;
  margin-bottom: 25px;
}

.formbox button[type="submit"],
.formbox button[type="button"] {
  color: #ffffff;
  padding: 18px 100px; /* 少し太めにすると安定感が出ます */
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.formbox #submit-form {
  background-color: #D85103;
}

.formbox button[type="button"] {
  background-color: #3A5302;
}

.formbox button[type="submit"]:hover {
  opacity: 0.9;
  transform: translateY(-2px); /* 軽く浮き上がる演出 */
}

/* --- 5. p (中央寄せ, 文字色#A11111) --- */
.formbox p {
  text-align: center;
  color: #A11111;
  font-size: 0.9rem;
  margin: 0;
}

.formbox p a {
  color: #A11111;
  font-weight: bold;
}

/* ==========================================================================
   フッター（footer）
   ========================================================================== */

footer {
  width: 100%;
  background-color: #E1E5D8; /* フッター全体の背景色 */
  padding-top: 60px;          /* コピーライトより上の余白 */
}

/* --- 2. .footerlogo (最大幅1200px / 画像最大280px / 左寄せ) --- */
.footerlogo {
  max-width: 1200px;
  margin: 0 auto 30px; /* 中央に配置しつつ、中身は左寄せ */
  padding: 0;     /* スマホ時の左右余白 */
  box-sizing: border-box;
}

.footerlogo img {
  display: block;
  max-width: 280px;   /* ロゴの最大幅制限 */
  width: 100%;        /* 親要素に合わせる */
  height: auto;
}

/* --- 3. .footertext (最大幅1200px / 左寄せ) --- */
.footertext {
  max-width: 1200px;
  margin: 0 auto 60px; /* 中央に配置しつつ、中身は左寄せ */
  padding: 0;
  box-sizing: border-box;
  text-align: left;    /* テキストを左寄せ */
  line-height: 1.8;
  color: #333;         /* 読みやすい濃いグレー */
}

.footertext p {
    margin: 0;
}

/* --- 4. copyright (幅いっぱい / 背景#3A5302 / 中央寄せ / 白文字) --- */
#copyright {
  width: 100%;
  background-color: #3A5302;
  margin: 0;
  padding: 15px 0;    /* 上下の厚み */
  text-align: center; /* 中央寄せ */
}

#copyright small {
  color: #ffffff;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ========================================
  Page Top
======================================== */

#pageTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

#pageTop img {
    width: 50%;
}


/* バリデーションエラー */
.error-msg {
    color: #A11111;
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
}
input.error, textarea.error {
    border: 1px solid #A11111;
    background-color: #fffafa;
}

/* モーダル基本設定 */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 30px;
    width: 80%;
    max-width: 600px;
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
}
.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    cursor: pointer;
}

/* 確認画面のボタンスタイル */
.form-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}
.form-btns button {
    padding: 10px 30px;
    cursor: pointer;
}

.modal-content {
    max-width: 1200px;
    padding: 20px;
    background: #E1E5D8;
}


/* --- 1. メインビジュアルの演出 --- */
.mainImg {
  position: relative;
  overflow: hidden;
  background: #f0f0f0; /* 出現前の下地 */
}

/* 背景画像 (main-img.webp) */
.mainImg > img:first-child {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 2.5s ease, transform 10s linear; /* 10秒かけてズームアウト */
  display: block;
  width: 100%;
}

/* キャッチコピー画像 (main-words.png) */
.mainImg .txtimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%); /* 最初は少し左にずらす */
  opacity: 0;
  margin: 0;
  transition: opacity 1.5s ease 1.2s, transform 1.5s ease 1.2s; /* 画像出現から1.2秒後に開始 */
}

/* 出現時 (JSでis-visibleが付与された時) */
.mainImg.is-visible > img:first-child {
  opacity: 1;
  transform: scale(1.0);
}

.mainImg.is-visible .txtimg {
  opacity: 1;
  transform: translate(-50%, -50%); /* 中央へスライドイン */
}

/* --- 2. 各記事(article)のスクロール出現 --- */
article {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s ease, transform 1.2s ease;
}

article.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* --- モーダルスライダー基本設定 --- */
#modal-slider-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; display: none; align-items: center; justify-content: center;
}
.modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
}
.modal-main-content {
    position: relative; width: 90%; max-width: 1000px; z-index: 10;
}
.slider-viewport {
    width: 100%; overflow: hidden; background: #000;
}
.slider-canvas {
    display: flex; transition: transform 0.4s ease;
}
.slider-canvas img {
    width: 100%; flex-shrink: 0; max-height: 75vh; object-fit: contain;
}

/* ナビゲーション */
.slider-prev, .slider-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); color: #fff; border: none;
    padding: 20px 10px; cursor: pointer; font-size: 24px;
}
.slider-prev { left: 0; }
.slider-next { right: 0; }
.slider-close {
    position: absolute; top: -50px; right: 0;
    background: none; border: none; color: #fff; font-size: 40px; cursor: pointer;
}
.slider-nav-dots { text-align: center; margin-top: 15px; }
.nav-dot {
    display: inline-block; width: 12px; height: 12px; margin: 0 6px;
    background: #555; border-radius: 50%; cursor: pointer;
}
.nav-dot.is-active { background: #fff; }

/* 背景スクロール防止（重要） */
body.is-locked {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}


/* --- ローディング画面 --- */
#loader-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff; /* サイトの背景色に合わせて調整 */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* 読み込み完了後に消すためのクラス */
#loader-wrapper.is-loaded {
    opacity: 0;
    visibility: hidden;
}

/* 中央のテキストとバーの演出 */
.loader-content {
    text-align: center;
}
.loader-text {
    font-family: serif;
    letter-spacing: 0.2em;
    color: #333;
    margin-bottom: 10px;
}
.loader-bar {
    width: 100px;
    height: 1px;
    background: #ddd;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.loader-bar::after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #333;
    animation: loading-line 1.5s infinite;
}

@keyframes loading-line {
    0% { left: -100%; }
    100% { left: 100%; }
}