@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

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

<PageMap>
	<DataObject type="thumbnail">
		<Attribute name="src" value="https://kagayaki-nikko.info/wp-content/uploads/2018/10/cropped-icon-1.png"/>
		<Attribute name="width" value="120"/>
		<Attribute name="height" value="120"/>
	</DataObject>
</PageMap>

<meta name="thumbnail" content="https://kagayaki-nikko.info/wp-content/uploads/2018/10/cropped-icon-1.png" />

/*トップページの上部にアニメーションを入れる（空の背景＋食パン）*/
#content-top {/*上方向の隙間を無くす*/
margin: 0;
}
#content-top-in {/*画面幅いっぱいに広げる*/
width: auto;
}
.anime-box {
height: 25vw;
background-image: url(https://shokupan-k.com/wp-content/uploads/2021/06/kumo-3.jpg);
background-position: top center;
background-size: cover;
position: relative;
}

/*画像を背景に重ねて動きをつける*/
.sky-and-cloud {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 20%;
animation: shokupan 4s ease infinite;
}

/*アニメーションの動き*/
@keyframes shokupan {
0% { transform:translateY(0) }
5% { transform:translateY(-10px) }
10% { transform:translateY(-15px) }
15% { transform:translateY(-20px) }
20% { transform:translateY(-30px) }
25% { transform:translateY(-35px) }
30% { transform:translateY(-40px) }
35% { transform:translateY(-45px) }
40% { transform:translateY(-50px) }
45% { transform:translateY(-45px) }
50% { transform:translateY(-40px) }
60% { transform:translateY(-35px) }
70% { transform:translateY(-30px) }
80% { transform:translateY(-20px) }
90% { transform:translateY(-15px) }
100% { transform:translateY(-0px) }
}

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

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

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

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

/*---cocoonモバイルメニューのカスタマイズ---*/
.mobile-menu-buttons {
  background: #b7ded2;/* メニューの背景色 */
  box-shadow:0 -2px 6px gray;/* メニューに影をつける */
}
.navi-menu-button,
.mobile-menu-buttons .home-menu-button > a,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.sidebar-menu-button{
  color: #ffffff;/* メニューのテキストの色 */
}
.mobile-menu-buttons .menu-button:hover {
  background: #00ac93;/* メニューの背景色(選択時) */
}
.top-menu-button a:hover,
.home-menu-button a:hover,
.mobile-menu-buttons :hover,
.menu-button:hover {
	color: #ffffff;/* メニューのテキストの色(選択時) */
}
.mobile-menu-buttons .menu-content{
  color: #333;/* サイドメニューの表示色が変わるのを防ぐ */
}
/*-------------------------------------*/