@charset "UTF-8";

/* ==========================================================================
   Base & Reset
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", serif;
  /* 💡 下層ページのヘッダー固定によるコンテンツの重なりを防ぐための余白（PC: 100px） */
  padding-top: 100px;
}

a {
  text-decoration: none;
  color: #333;
}

ul {
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

.about-section {
  scroll-margin-top: 100px; /* PC用ヘッダーの高さ */
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  height: 100px;
  padding-right: 30px;
}

.logo-area {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-icon-box {
  background-color: #6a8d5e;
  width: 120px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-icon-box img {
  width: 65px;
  height: auto;
}

.logo-text {
  margin-left: 25px;
}

.logo-text img {
  height: 50px;
  width: auto;
  display: block;
}

.global-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.nav-list li {
  margin: 0 12px;
}

.nav-list li a:hover {
  color: #6a8d5e;
}

.nav-list .en {
  display: none;
}

@media (min-width: 769px) {
  .nav-list li:first-child {
    position: relative;
    padding-right: 35px;
    margin-right: 35px;
  }
  
  .nav-list li:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background-color: #638165;
  }
}

.sns-icon {
  margin-left: 20px;
  padding-top: 5px;
}

.sns-icon img {
  width: 40px;
  height: auto;
}

.hamburger-btn {
  display: none;
}

/* ==========================================================================
   About
   ========================================================================== */

/* =======================================================
   メインコンテナ（全体の固定用ラッパー）
   ======================================================= */
.l-main {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px); /* 💡 ヘッダー以下の画面ぴったりに収める */
  overflow: hidden;
  background-color: #fcfbf9;
}

/* =======================================================
   セクション共通（絶対配置で完全に重ね合わせる）
   ======================================================= */
.about-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fcfbf9;
  opacity: 0;          /* 💡 初期状態はすべて透明 */
  visibility: hidden;  /* 💡 裏に隠れているパーツのクリック等を無効化 */
}

/* 1つ目のセクションだけ初期状態で表示しておく */
.about-section:first-child {
  opacity: 1;
  visibility: visible;
}

.about-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.about-section.reverse .about-inner {
  flex-direction: row-reverse;
}

/* =======================================================
   大画像エリア（60%）
   ======================================================= */
.about-visual {
  width: 60%;
  flex: 0 0 60%;
  height: 100%;
  position: relative; /* 💡 追加：画像重ね合わせの基準点 */
}

/* 💡 imgの指定を絶対配置（absolute）に変更 */
.about-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.0s ease; /* 1秒かけてふわっと切り替わる */
}

/* 2枚目の画像（初期状態は透明） */
.img-secondary {
  opacity: 0;
}

/* JSで is-switched クラスが付与された時の状態 */
.about-visual.is-switched .img-primary {
  opacity: 0;
}
.about-visual.is-switched .img-secondary {
  opacity: 1;
}

/* =======================================================
   テキストエリア（40%）
   ======================================================= */
.about-text-area {
  width: 40%;
  flex: 0 0 40%;
  height: 100%;
  padding: 80px 6% 100px;
  overflow: hidden;
  position: relative;
}

/* GSAPで丸ごと上に動かすインナー */
.about-text-scroll-inner {
  position: relative;
  width: 100%;
}

.about-title {
  margin-bottom: 40px;
}

.about-title .en {
  display: block;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 40px;
  color: #c97f45;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
}

.about-title .ja {
  display: block;
  font-size: clamp(24px, 2.0vw + 4px, 32px);
  color: #333;
}

.about-desc p {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 2.4;
  margin-bottom: 2em;
  color: #333;
  text-align: justify;
}

.about-sub-img {
  width: 100%;
  height: auto;
  margin-bottom: 2em;
}

/* =======================================================
   枠線付きのボックス（連作障害とは…）
   ======================================================= */
.about-box {
  border: 1px solid #638165; /* テーマカラーの深緑 */
  border-radius: 24px;       /* 優しい角丸 */
  padding: 40px;             /* 内側のゆったりとした余白 */
  margin-bottom: 2.5em;
}

/* ボックス内のテキスト共通設定 */
.about-box p {
  font-size: 16px;
  line-height: 2.2;
  color: #333333;
  margin-bottom: 0;
  text-align: justify;
}

/* 1行目：「連作障害とは…」 */
.about-box p:nth-child(1) {
  margin-bottom: 1.5em;
}

/* 3枚画像の切り替え用ベース */
.img-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1; /* 💡 追加：基本の重なり順 */
  transition: opacity 1.0s ease; /* 1秒かけてフワッと切り替え */
}

/* アクティブな画像だけ表示する */
.img-step.is-active {
  opacity: 1;
  z-index: 2; /* 💡 追加：アクティブな画像を確実に一番手前にする */
}

/* =======================================================
   テキスト装飾用の共通クラス
   ======================================================= */
/* 💡 タイトルの英語部分を深緑にする */
.about-title.color-green .en {
  color: #638165;
}

/* 💡 本文の一部を深緑にする便利なクラス */
.text-green {
  color: #638165;
  /* 強調させたい場合は下のコメントアウトを外して太字にしても綺麗です */
  /* font-weight: bold; */
}

/* =======================================================
   右側ドットナビゲーション
   ======================================================= */
.side-nav {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none; /* デフォルトの点を消す */
}

/* 〇（基本の状態：通常時は少し小さめの緑の丸） */
.nav-dot {
  width: 14px;
  height: 14px;
  border: 2px solid #638165; /* テーマカラーの深緑 */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #638165; /* 💡 通常時は緑で塗りつぶし */
  border-color: #ffffff;     /* 外縁は緑のまま */
  transform: scale(0.7);     /* 💡 通常時は少し小ぶりに */
}

/* ●（現在見ているセクションのアクティブ状態：外枠緑、中身白で大きめに） */
.nav-dot.is-active {
  background-color: #ffffff; /* 💡 ご要望通り、真ん中を白に！ */
  border-color: #638165;     /* 外縁は緑のまま */
  transform: scale(1.2);     /* 💡 ひとまわり大きくしてクッキリ強調 */
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: #638165;
  color: #ffffff;
  padding: 80px 20px 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-logo {
  width: 160px;
  height: auto;
}

.footer-address {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  color: #ffffff;
}

.footer-links {
  display: flex;
  gap: 80px;
}

.link-col {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.link-col li a {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

.link-col li a:hover {
  opacity: 0.7;
}

.footer-action {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.btn-page-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  color: #638165;
  border-radius: 50%;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.3s ease;
  box-sizing: border-box;
  padding-bottom: 4px;
}

.btn-page-top:hover {
  transform: translateY(-5px);
}

.footer-copyright {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-copyright p {
  margin: 0;
  font-size: 12px;
  color: #ffffff;
}

/* PCではSP用のカリフラワーを隠す */
.sp-main-img {
  display: none !important;
}

/* PCではSP用画像を隠す */
.sp-only-img {
  display: none;
}

/* ==========================================================================
   Responsive (Tablet: 1000px)
   ========================================================================== */
@media (max-width: 1000px) {
  .nav-list {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.4s ease;
  }

  .nav-list.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-list li {
    margin: 0;
    width: 60%;
    border-bottom: 1px solid #638165;
    padding-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .nav-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .nav-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333333 !important;
  }

  .nav-list li a .ja {
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }

  .nav-list li a .en {
    display: block;
    font-size: 11px;
    color: #638165;
    letter-spacing: 0.2em;
    font-family: sans-serif;
  }

  .sns-icon {
    margin: 0 20px 0 0;
    padding-top: 0;
  }
  
  .sns-icon img {
    width: 34px;
    transform: translateY(3px);
  }

  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 34px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
  }
  
  .hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #638165;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .hamburger-btn.is-active .hamburger-line:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }
  .hamburger-btn.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .hamburger-btn.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }
}



/* ==========================================================================
   Responsive (SP: 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* -------------------------------------------
     共通（既存）
  ------------------------------------------- */
  body {
    padding-top: 70px;
  }

  .header {
    height: 70px;
    padding-right: 15px;
  }
  .logo-icon-box {
    width: 80px;
  }
  .logo-icon-box img {
    width: 45px;
  }
  .logo-text img {
    height: 35px;
  }

  .site-footer {
    padding: 60px 20px 40px;
  }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
  }
  .footer-info {
    align-items: center;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .footer-logo {
    width: 110px;
    margin-bottom: 20px;
  }
  .footer-address {
    text-align: center;
    font-size: 16px;
  }
  .footer-links {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
  }
  .link-col {
    align-items: center;
    gap: 24px;
  }
  .footer-action {
    width: 100%;
    justify-content: center;
    padding-top: 40px;
  }
  .footer-copyright p {
    text-align: center;
  }

.about-section {
    scroll-margin-top: 70px; /* SP用ヘッダーの高さ */
  }

  /* -------------------------------------------
     Aboutページ SP版のリセットスタイル
  ------------------------------------------- */
  /* メインコンテナの固定・オーバーフローを解除 */
  .l-main {
    height: auto;
    overflow: visible;
  }

  /* セクションの絶対配置を解除し、縦に並べる */
  .about-section {
    position: relative;
    opacity: 1 !important;        /* GSAPの初期状態(透明)を強制解除 */
    visibility: visible !important;
    height: auto;
    padding: 0 0 60px;            /* 💡 【修正】上のpaddingを0にしてヘッダーとの隙間を解消 */
  }

  /* 横並び(flex)を縦並び(column)に変更 */
  .about-inner {
    flex-direction: column !important; /* reverseも縦並びにするためimportant */
  }

  /* 画像エリア：幅100%にして、適切な高さを設ける */
  .about-visual {
    width: 100%;
    flex: none;
    height: 90vw; /* 💡 カンプに合わせた縦長比率 */
    margin-bottom: 30px;
  }

  /* SPでは切り替え用の子画像(2枚目以降)は非表示にしてシンプルにする */
  .img-secondary,
  .img-step:not(.img-step-1) {
    display: none !important;
  }

  /* テキストエリア：幅100%にし、余白を調整 */
  .about-text-area {
    width: 100%;
    flex: none;
    height: auto;
    padding: 0 20px; /* 左右に20pxの余白 */
    overflow: visible;
  }

/* about-box内の最後のpタグの下余白をなくす */
  .about-box p:last-child {
    margin-bottom: 0;
  }

  /* GSAPで動かしていたインナーの変形をリセット */
  .about-text-scroll-inner {
    transform: none !important;
  }

  /* 右側のドットナビゲーションはSPでは不要なので非表示 */
  .side-nav {
    display: none;
  }

  /* -------------------------------------------
     タイトルとテキストのSPカンプ再現
  ------------------------------------------- */
  /* タイトル全体を右寄せに */
  .about-title {
    text-align: right;
    margin-bottom: 40px;
  }

  /* 英語タイトル（オレンジのままサイズ調整） */
  .about-title .en {
    color: #c97f45;
    font-size: clamp(32px, 10vw, 44px); /* 画面幅に合わせていい感じに縮尺 */
    line-height: 1.1;
    margin-bottom: 12px;
  }

.about-title.color-green .en {
    color: #638165;
  }

  /* 日本語タイトル */
  .about-title .ja {
    font-size: 22px;
  }

  /* 本文のテキスト */
  .about-desc p {
    text-align: justify; /* スマホで見やすいよう左揃え */
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 2.2; /* カンプのゆったりした行間 */
    margin-bottom: 2.5em; /* 段落間の余白 */
  }

  .pc-main-img {
    display: none !important;
  }
  .sp-main-img {
    display: block !important;
  }

  .sp-only-img {
    display: block !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px;
    margin-bottom: 2.5em;
    height: auto !important;       /* 💡 高さを強制的に「自動」にして元々の比率を保つ */
    object-fit: unset !important;  /* 💡 「枠に合わせて切り取る」設定を強制解除 */
    aspect-ratio: auto !important; /* 💡 正方形の比率に縛られるのを防ぐ */
  }

  .js-multi-trigger {
    margin-top: 0 !important;
  }
  
  .js-multi-trigger h3 {
    margin-bottom: 1.5em;
  }

  .sp-only-img.sp-align-right {
    width: 90% !important; /* 💡 100%に近い数値にするほど余白が減ります（さっきより広げました） */
    margin-left: auto !important;
    margin-right: -20px !important; /* 右端は画面にくっつける */
    height: auto !important;
  }

  .sp-only-img.sp-align-left {
    width: 90% !important; /* 💡 ホウレン草と同じ横幅 */
    margin-left: -20px !important; /* 左端は画面にくっつける */
    margin-right: auto !important;
    height: auto !important;
  }

  /* -------------------------------------------
     ふわっと表示用のアニメーションクラス
  ------------------------------------------- */
  .fade-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .fade-target.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}