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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* オーバーレイ全体 */
#welcome-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* 背景図形 */
.background-shape {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #abbbd3;
  z-index: 1;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

/* 曲線カーテン共通 */
.arc-shape {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  z-index: 2;

  background: #becbe0;
  clip-path: ellipse(60% 100% at 50% 100%);

  opacity: 1;

  /* ★初期状態：画面上外 */
  transform: translateY(-120vh) scaleY(-1);

  transition: transform 0.8s ease-out;
}

.arc2 {
  background: #f5f4f1;
  clip-path: ellipse(55% 90% at 50% 100%);
}

.arc3 {
  background: #becbe0;
  clip-path: ellipse(50% 80% at 50% 100%);
}

/* ★① スライドイン（いったん定位置へストン） */
.arc-shape.in {
  transform: translateY(0) scaleY(-1);
}

/* ★② スライドアウト（上へ抜ける） */
.arc-shape.out {
  transition: transform 1.2s ease-in;
  transform: translateY(-120vh) scaleY(-1);
}

/* 背景フェードアウト */
.background-shape.fade-out {
  opacity: 0;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
@media screen and (min-width: 1024px){
/* グローバルメニューの均等割り付け */
#navi .navi-in > ul {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
 }
#custom_html-3 { display: none !important;}
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
#custom_html-2 { display: none !important;}
}

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

/*480px以下*/
@media screen and (max-width: 480px){
.menu-content {
    max-width: 330px;
}
}