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

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



/* 全体 */
.nanan-page {
  background-color: #fff;
  font-family: '游ゴシック体', 'YuGothic', 'YuGothic', 游ゴシック, 'YuGothic', sans-serif;
  text-align: center;
}

/* ヘッダー */
.nanan-page-header {
  padding: 20px 0;
}

.nanan-page-title {
  font-size: 2.5em;
  color: #ff69b4;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* ふわふわ影 */
}

.nanan-page-description {
  font-size: 1.2em;
  color: #666;
}

/* イラスト */
.nanan-page-illustration {
  margin-bottom: 20px;
}

.nanan-page-illustration img {
  width: 350px;
}

/* おすすめ */
.nanan-page-recommend {
  padding: 20px;
  background-color: #f0f8ff;
}

.nanan-page-recommend h2 {
  font-size: 1.8em;
  color: #333;
  margin-bottom: 10px;
}

.nanan-page-recommend-list {
  list-style: none;
  padding: 0;
}

.nanan-page-recommend-list li {
  margin-bottom: 10px;
}

.nanan-page-recommend-list a {
  color: #ff69b4;
  text-decoration: none;
}

/* アイテム */
.nanan-page-item {
  padding: 20px;
}

.nanan-page-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nanan-page-item {
  width: 200px; /* アイテムの幅 */
  margin: 10px; /* アイテム間の余白 */
  border: 1px solid #ddd; /* ふわふわボーダー */
  border-radius: 10px; /* ふわふわ角 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* ふわふわ影 */
}

.nanan-page-item-image {
  overflow: hidden; /* 画像がはみ出ないようにする */
}

.nanan-page-item-image img {
  width: 100%; /* アイテム全体に画像を敷き詰める */
  height: auto; /* 画像の縦横比を維持する */
}

.nanan-page-item-info {
  padding: 10px;
  text-align: left; /* 文字を左寄せ */
}

.nanan-page-item-info h3 {
  margin: 0; /* 余白をなくす */
  color: #333;
}

.nanan-page-item-info p {
  margin: 0; /* 余白をなくす */
  color: #666;
}

/* フッター */
.nanan-page-footer {
  padding: 20px 0;
  background-color: #fff;
}

.nanan-page-footer p {
  color: #666;
}

/* モバイルメニュー（下）の非表示 */
.mobile-footer-menu-buttons.mobile-menu-buttons {
display: none;
}


/* スキン使用時のスタイル*/
.skin-grayish #navi-in {
background: #ffffff2a;
backdrop-filter: blur(4px);
}
.skin-grayish:not(.front-top-page) .header-container {
background: #ffffff2a;
backdrop-filter: blur(4px);
}
.skin-grayish:not(.front-top-page) .header-container .skin-grayish #navi-in {
background: #ffffff0a;
backdrop-filter: blur(0px);
}
.skin-grayish .footer {
background: #ffffff;
}
.skin-grayish .footer-bottom-logo img {
    width: 88%;
    max-width: 155px;
    margin: 0 auto 21px;
	display: block;
}




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

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

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