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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.main {  background-color: #a7d28d;
}

/************************************
**　　ふわっとさせるエフェクト 
************************************/

.fadein-right {
/* 最初は非表示 */
opacity: 0;
visibility: hidden;
transform: translateX(30px);
transition: opacity 1s, visibility 1s, transform 1s;
}

.fade-up {
/* 最初は非表示 */
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: opacity 1s, visibility 1s, transform 1s;
}

.fadein-left {
/* 最初は非表示 */
opacity: 0;
visibility: hidden;
transform: translateX(-30px);
transition: opacity 1s, visibility 1s, transform 1s;
}

/* フェードイン時に入るクラス */
.is-fadein {
opacity: 1;
visibility: visible;
transform: translateX(0);

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

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

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

/* アピールエリア---------------------------------------------- *
/*全体*/

.appeal{
	height:calc(100vw * 0.5) /*パソコンでの高さ調整*/
	background-size: contain; /*背景をフィットさせる*/
}

@media screen and (max-width: 834px){
	.appeal{
		height:calc(100svh - 50px); /*モバイルでの高さ調整*/
	}
}

.appeal-in {
	height:100%; /*パソコン、スマホ高さ調整*/
	width:100%; /*幅を最大に*/
	background-color:rgba(250,250,250,0.5); /*背景色、白を透過させる*/
	backdrop-filter: blur(3px); /*ぼかしpxで調整*/
}
/************************************
** アピールエリア（メインビジュアル）のカスタマイズ
************************************/
/*アピールエリアの白枠の透明化とフォントサイズ変更とタイトル色変更　*/

.appeal-title {
	font-size:30px;
	color: #fff;
}

	.appeal-content {
    color: #fff;
    font-size: 30px;
	background-color:initial; /*デフォルトの背景色無効化*/

}

/*ボタン（アイコン部分）*/
.appeal-button{
	background-color:initial; /*ボタンの背景色無効化*/
	font-size:2.0em; /*文字を少し小さく*/
	color:initial;/*アイコンの色はここで設定*/
}

/*アイコンを追加*/
.appeal-button:before{
	display:block;
	font-family: "Font Awesome 5 Free";
	font-weight:bold;
	content: "\f103"; /*アイコン指定（シングル矢印は\f107にする）*/
	font-size: 1.5em; /*アイコンの大きさ*/
	animation: move 1s infinite alternate ease-in-out; /*アイコンをゆっくり動かす*/
}

@keyframes move{
  from {
	  transform: translateY(0);
  }
  to {
	  transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}


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

/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #999!important;
	background: #ffffff;
	transition: all 0.5s ease;
}
	
/* プルダウンメニュー全体の背景色と文字色 */
.navi-in ul ul {
    background-color: #deb887; /* 背景色*/
}

.navi-in ul ul a {
    color: #222; /* 文字色 */
}

/* プルダウンメニューにマウスを乗せた時（ホバー時）の背景色と文字色 */
.navi-in ul ul a:hover {
    background-color: #d2b48c; /* マウスホバー時の背景色 */
    color: #222; /* マウスホバー時の文字色*/
}

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}

#header-container #navi a{
   color:#333333; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#b22222; /* マウスホバー時の文字色 */
}
#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: 1023px){
  #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;
  }
}

/*モバイルメニュー　文字消す*/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
}

/*×アイコンを移動*/
.menu-close-button {
 padding-top: 15px;
 padding-left: 25px;
 padding-bottom: 30px;
text-align: left;
font-size: 1.3em;
}

.menu-drawer a {
font-size: 1.2em;
line-height: 1.6em;
border-bottom: solid 1px #999;
padding:0.6em;}

.menu-drawer a:hover {
background-color:#ccc;　/*マウスオーバー時の背景色*/
}

.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #e6e6e6;
}

/*モバイルメニュー背景色*/
.navi-menu-content {
background-color: rgba(255,255,255,0.7);
}

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


/*画像下キャプションの文字を中央揃えに*/
.wp-block-image figcaption {
    text-align: center;
}

:target::before {
    content:"";
    display:block;
    height:200px;       /* 移動する距離。 私の場合は、height:3rem; 　高さは調節してくださいね。*/
    margin:200px 0 0;  /* heightのマイナス値と0　0。 私の場合は、margin:-3rem 0 0; */
}

/* ページ内ジャンプの位置調整 */
a.anchor {
    display: block;
    padding-top: 300px;
    margin-top: -300px;
	height:200px;
}

a {
    text-decoration:none; 
}

/*VR画像の画面幅アスペクト比固定*/
.iframe-container {
  width: 100%;
  height: auto;
  aspect-ratio: 17 / 10;
}
	
	
.entry-content thead {
    border-bottom: none;　　/* ヘッダーラベルの下線を消す */
}

.entry-content th {
    padding: 10px 15px; /* 余白 */
    background-color: #f5fffa; /* 背景色 */
    color: #ccc; /* 文字色 */
    letter-spacing: 0.1em; /* 文字と文字の間隔 */
    text-align: center; /* 中央揃え */
}

.entry-content tr td:first-child{
	background-color: #f5fffa;　/* 背景色 */
	color:#ccc;　/* 文字色 */
	font-weight:bold; /* 文字を太く */
}
	
/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none; /* 背景色なし */
  border: none;     /* 枠線なし */
  border-radius: 0; /* 丸みなし */
}
	
/* 食材・ケーキご注文フォームの送信時入力欄を非表示にする */
.sent .contact-input-area{
display: none;
}
	
/*コンタクトフォームのrecapchaをセンタリング*/
.recaptcha{
	text-align: center;
}
#recaptcha{
	margin-right:auto;
	margin-left:auto;
	width: 300px;
}