@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){
  /*必要ならばここにコードを書く*/
}

.apple{
height:98vh;
background-position:center;
}
.appeal-in{
width:100%;
background-color:rgba(255,255,255,.5);/*画像をちょっと白っぽくしている*/
}

.header-container {
 position: fixed;
z-index: 9999;
top: 0;
background-color: rgba(255,255,255,0);
}
#header-container .navi, #navi .navi-in>.menu-header .sub-menu, .header-container {
position:fixed!important;
background-color: rgba(255,255,255,0);
}


@media (max-width: 1025px) {
  .header-container {
    display: none;
  }
}

/************************************
**　　グローバルナビメニュー 
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #223a70;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#666666; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#223a70; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    /*margin-top: 53px;*/
  }
}
.navi-in a:hover {
    background-color: transparent;
}


.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}


/* 親メニューの下線を消す */
#navi .menu-item-has-children > a::after {
  display: none;
}

/* 全体を中央揃え */
.youtube-center {
  text-align: center;
}

/* 中央寄せの決め手 */
.youtube-wrapper {
  position: relative;
  width: 80%;          /* ← 好きな幅（100%でもOK） */
  max-width: 560px;    /* PCで大きくなりすぎない */
  margin: 0 auto;      /* ← これで確実に中央 */
  aspect-ratio: 16 / 9;
}

/* iframeはラッパーいっぱいに */
.youtube-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* キャプション */
.youtube-caption {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
}

/* 固定ヘッダーではサブメニューを一旦非表示 */
#header-container.fixed-header .sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* マウスオン時のみサブメニュー表示 */
#header-container.fixed-header li.menu-item-has-children:hover > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 見た目の安定用（任意） */
#header-container.fixed-header .sub-menu {
  background: #fff;
  z-index: 9999;
}