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

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

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/************************************
** ローディング画面を表示する
************************************/
/************************************
** ローディング画面を表示する（CSS強制タイマー版）
************************************/

/* 枠組み */
.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #ffebf5;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  /* ★ここがポイント：表示されてから2秒後に、0.8秒かけて消えるアニメーションを設定 */
  animation: fadeOutAnime 0.8s forwards;
  animation-delay: 2s; /* 2秒間表示し続ける */
}

/* 文字の設定 */
.moji {
  writing-mode: vertical-rl;
  font-size: 2.0em;
  font-family: 'Noto Serif JP', serif;
  color: black;
  
  animation: fadeInAnime 1.5s forwards;
  opacity: 0;
}

/* 文字がふわっと出るアニメーション */
@keyframes fadeInAnime {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ★新設：外枠のピンク画面と文字をまとめて消し去るアニメーション */
@keyframes fadeOutAnime {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden; /* 完全に存在を消し、後ろを触れるようにする */
    display: none;
  }
}