@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** ヒーローセクション（トップページ）
************************************/
.tldo-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* 全画面の高さ */
  min-height: 100dvh; /* モバイルブラウザのURLバー差を補正 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px 24px 120px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(127, 216, 207, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(127, 216, 207, 0.10) 0%, transparent 45%),
    #ffffff;
  color: #10333a;
  border-bottom: 1px solid #e2efed;
}

/* particles.js が生成するcanvasの配置 */
.tldo-hero canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* 背景装飾とせず、テキスト選択等を妨げない */
}

.tldo-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.tldo-hero-title {
  margin: 0 0 32px;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  color: #0b2f34;
}

.tldo-hero-text {
  margin: 0 auto 48px;
  max-width: 30em;
  font-size: 1.15rem;
  line-height: 2;
  color: #33555b;
}

.tldo-hero-signature {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #5b7a7e;
}

/* スクロールインジケータ（ヒーロー下部中央） */
.tldo-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  text-decoration: none;
}

.tldo-hero-scroll-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.4em; /* 視覚的中心寄せ */
  color: #5b7a7e;
}

.tldo-hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, #3fb0a5, rgba(63, 176, 165, 0));
  animation: tldo-scroll-line 2.2s ease-in-out infinite;
}

@keyframes tldo-scroll-line {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

.tldo-hero-scroll:hover .tldo-hero-scroll-label {
  color: #0e5a5f;
}

/* ヒーローの次の導入メッセージ（ご相談の流れへリンク） */
/* 全画面高さにし、文言をセクション下部に配置することで
   「SCROLL」と文言の間に約1画面分の距離（余白）を作る。
   SCROLLクリックでこの余白を越し、文言が視界の下部に到着する */
.tldo-next {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 120px 24px 14vh;
  text-align: center;
  background: #ffffff;
}

.tldo-next-title {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.tldo-next-link {
  position: relative;
  display: inline-block;
  padding: 0.1em 0.15em;
  color: #0b2f34;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* ホバー时下線が左から伸びる演出 */
.tldo-next-link::after {
  content: "";
  position: absolute;
  left: 0.15em;
  right: 0.15em;
  bottom: 0.02em;
  height: 3px;
  background: #3fb0a5;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.tldo-next-link:hover,
.tldo-next-link:focus {
  color: #0e5a5f;
}

.tldo-next-link:hover::after,
.tldo-next-link:focus::after {
  transform: scaleX(1);
}

/* ヒーロー用レスポンシブ */
@media screen and (max-width: 834px) {
  .tldo-hero {
    padding: 80px 20px 104px;
  }
  .tldo-hero-title {
    font-size: 2.1rem;
  }
  .tldo-hero-br {
    display: none; /* 画面が狭い場合は強制改行を解除 */
  }
  .tldo-next {
    padding: 88px 20px 12vh;
  }
  .tldo-next-title {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 480px) {
  .tldo-hero {
    padding: 68px 16px 96px;
  }
  .tldo-hero-title {
    font-size: 1.65rem;
  }
  .tldo-hero-text {
    font-size: 1rem;
  }
  .tldo-next {
    padding: 72px 16px 10vh;
  }
  .tldo-next-title {
    font-size: 1.45rem;
  }
}

/* SCROLL → 導入メッセージのアンカー移動をスムーズスクロールで演出。
   「モーション低減」を有効化しているユーザーには適用しない */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 減速設定のユーザーにはスクロールインジケータのアニメーションを停止 */
@media (prefers-reduced-motion: reduce) {
  .tldo-hero-scroll-line {
    animation: none;
  }
  .tldo-next-link::after {
    transition: none;
  }
}

/************************************
** ヘッダーメニューの文字サイズを小さく
 ************************************/
.navi-in > ul > li > a {
  font-size: 13px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 空の内容シェルを隠す（トップページ本文なし用）
************************************
 * トップページで本文が空だと、page.php は article を出さないが、
 * <main id="main"> の枠（親テーマ body-top.php / footer.php）は
 * 常時残る。そこで body クラス tldo-hide-main-content で隠す。
 * ※クラスは page.php と同一条件（本文が空）でだけ付くため、
 *   本文が入力された時点で自動的に元に戻る。
************************************/
body.tldo-hide-main-content #content {
  display: none;
}