@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

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

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

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

/* ===== Entrance Hero ===== */
.entrance-page{
  margin: 0;
}

.hero-entrance{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* 背景動画：全面敷き */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;          /* 動画の低透明度（必要に応じて調整） */
  transform: scale(1.02); /* 端のチラつき対策 */
}

/* 暗幕（文字の可読性用） */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* 文字レイヤー */
.hero-content{
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

/* ===== タイポ：3段階シーケンス ===== */
.hero-title.hero-seq{
  position: relative;
  display: grid;
  place-items: center;
}

/* 3つのテキストを同じ位置に重ねる */
.hero-seq__part{
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,0.55);

  /* フォント・サイズ（必要なら調整） */
  font-family: inherit;
  font-size: clamp(40px, 10vw, 80px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

/* ロード後に順番に実行 */
.hero-entrance.is-ready .hero-seq__p1{
  animation: seqFade 1.8s ease-out 0s 1 forwards;
}
.hero-entrance.is-ready .hero-seq__p2{
  animation: seqFade 1.8s ease-out 2.0s 1 forwards;
}
/* 3つ目は出現して“保持”＝フェードアウトしない */
.hero-entrance.is-ready .hero-seq__p3{
  animation: seqStay 1.1s ease-out 4.0s 1 forwards;
}

/* ①②：出現 → 1秒保持 → フェードアウト */
@keyframes seqFade{
  0%   { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  12%  { opacity: 1; transform: translateY(0);  filter: blur(0); }   /* 出現 */
  68%  { opacity: 1; transform: translateY(0);  filter: blur(0); }   /* 1秒保持相当 */
  100% { opacity: 0; transform: translateY(-6px); filter: blur(2px);}/* フェードアウト */
}

/* ③：改めて出現 → そのまま保持 */
@keyframes seqStay{
  0%   { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);  filter: blur(0); }
}

/* 粒子（グレイン） */
.hero-entrance::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 10% 20%, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0) 2px 6px),
    repeating-radial-gradient(circle at 70% 60%, rgba(0,0,0,0.10) 0 1px, rgba(0,0,0,0) 2px 7px);
}

/* ログイン中の管理バーを玄関では隠す（不要なら削除OK） */
.home #wpadminbar{
  display: none !important;
}
html{
  margin-top: 0 !important;
}