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

/* ========================================
   RYK STUDIO HOME 専用CSS
   ======================================== */

/* 投稿日・更新日を非表示 */
body.home .date-tags {
  display: none !important;
}

/* 投稿者名を非表示 */
body.home .author-info {
  display: none !important;
}
/* ========================================
   固定ページ 共通CSS
   ======================================== */

/* 投稿日・更新日を非表示 */
body.page .date-tags {
  display: none !important;
}

/* 投稿者名を非表示 */
body.page .author-info {
  display: none !important;
}
/* ========================================
   キャラクター紹介：PC
   ======================================== */

body.home figure#nyaiton-home,
body.home figure#haremyan-home {
  height: 220px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.home figure#nyaiton-home > img,
body.home figure#haremyan-home > img {
  display: block !important;
  max-width: 220px !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ========================================
   LINEスタンプ画像：PC
   ======================================== */

body.home figure#stamp-nyaiton,
body.home figure#stamp-haremyan-1,
body.home figure#stamp-haremyan-2 {
  height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.home figure#stamp-nyaiton > img,
body.home figure#stamp-haremyan-1 > img,
body.home figure#stamp-haremyan-2 > img {
  display: block !important;
  max-width: 160px !important;
  max-height: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* LINEスタンプ商品タイトル：PC */
body.home #stamp-title-nyaiton,
body.home #stamp-title-haremyan-1,
body.home #stamp-title-haremyan-2 {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
}

/* ========================================
   スマートフォン最終調整
   ======================================== */

@media screen and (max-width: 834px) {

  /* キャラクター画像 */
  body.home figure#nyaiton-home,
  body.home figure#haremyan-home {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 16px !important;
  }

  body.home figure#nyaiton-home > img,
  body.home figure#haremyan-home > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
  }


  /* LINEスタンプ商品画像 */
  body.home figure#stamp-nyaiton,
  body.home figure#stamp-haremyan-1,
  body.home figure#stamp-haremyan-2 {
    width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 14px !important;
  }

  body.home figure#stamp-nyaiton > img,
  body.home figure#stamp-haremyan-1 > img,
  body.home figure#stamp-haremyan-2 > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
  }


  /* LINEスタンプ商品名 */
  body.home #stamp-title-nyaiton,
  body.home #stamp-title-haremyan-1,
  body.home #stamp-title-haremyan-2 {
    min-height: 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }


  /* HOME内ボタンをスマホ向けに少しコンパクト化 */
  body.home .wp-block-button__link {
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 0.7em 1.2em !important;
  }
}
/* ========================================
   キャラクター一覧
   ======================================== */

/* キャラクター名 */
.character-name-ja {
  background: none !important;
  margin-bottom: -0.4em !important;
}

.character-name-en {
  position: relative;
  top: -12px;
}

/* 2カラムを中央寄せ */
.character-grid {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 「詳しく見る」ボタン中央配置 */
.character-button {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
}

/* スマートフォン */
@media screen and (max-width: 600px) {

  .character-grid {
    max-width: 100% !important;
    width: 100% !important;
  }

  .character-grid > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .character-name-en {
    top: -4px;
  }
}
/* キャラクター紹介文 */
.character-description {
  text-align: left !important;
  max-width: 280px;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  left: 35px;
}
/* ========================================
   お問い合わせフォーム：確認画面
   ======================================== */

.ryk-contact-confirm {
  display: none;
}

/* 各確認項目 */
.ryk-contact-confirm p {
  margin: 0 0 14px !important;
}

/* 確認値 */
.ryk-contact-confirm output {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: normal;
}

/* 最後の確認文 */
.ryk-contact-confirm p:nth-last-of-type(2) {
  margin-top: 24px !important;
  margin-bottom: 18px !important;
}

/* 戻る・送信ボタンの並び */
.ryk-contact-confirm p:last-of-type {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 !important;
}

/* 2つのボタンを同じサイズ感にする */
.ryk-contact-back,
.ryk-contact-confirm .wpcf7-submit {
  width: auto !important;
  min-width: 140px;
  display: inline-block !important;
  padding: 0.7em 1.4em !important;
  margin: 0 !important;
  border: none;
  border-radius: 999px;
  background: #333;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
/* ========================================
   お問い合わせフォーム：全体幅
   ======================================== */

.ryk-contact-form-wrap {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* ========================================
   お問い合わせフォーム：送信完了表示
   ======================================== */

.ryk-contact-form-wrap .wpcf7-response-output {
  max-width: 640px;
  margin: 24px auto 0 !important;
  padding: 18px 20px !important;
  text-align: center;
  line-height: 1.8;
  border-radius: 8px;
}
/* ========================================
   お問い合わせフォーム：確認ボタン
   ======================================== */

.ryk-contact-check {
  width: auto !important;
  display: inline-block !important;
  padding: 0.7em 1.4em !important;
  margin: 0 !important;
  border: none;
  border-radius: 999px;
  background: #333;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
/* ========================================
   BLOG個別記事：アイキャッチ表示サイズ
   ======================================== */

.single-post .eye-catch {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.single-post .eye-catch img {
  width: 100%;
  height: auto;
  display: block;
}
/* ========================================
   BLOG個別記事：アイキャッチ上のカテゴリーラベルを非表示
   ======================================== */

.single-post .eye-catch .cat-label {
  display: none;
}
/* ========================================
   BLOG個別記事：本文の読みやすい横幅
   ======================================== */

.single-post .entry-content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
/* ========================================
   BLOG個別記事：段落間隔
   ======================================== */

.single-post .entry-content p {
  margin-top: 0;
  margin-bottom: 1.2em;
}
/* ========================================
   BLOG個別記事：記事タイトル幅
   ======================================== */

.single-post .entry-title {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
/* ========================================
   BLOG一覧：PV表示を非表示
   ======================================== */

.blog .admin-pv {
  display: none;
}
/* ========================================
   BLOG一覧：投稿日を非表示
   ======================================== */

.blog .post-date {
  display: none;
}
/* ========================================
   RYK STUDIO Webデザイン：ベースカラー
   ======================================== */

/* サイト全体の背景 */
body {
  background: #FAE8EA;
  color: #2F2F2F;
}

/* メインコンテンツ領域 */
#content,
.main,
.entry-content {
  background: #FFFFFF;
}

/* 見出し */
h1,
h2,
h3,
.entry-title {
  color: #630A2A;
}

/* リンク */
a {
  color: #630A2A;
}

a:hover {
  color: #DC657B;
}
/* ========================================
   RYK STUDIO Webデザイン：セクション見出し
   ======================================== */

.entry-content h2.wp-block-heading {
  background: #FAE8EA;
  color: #630A2A;
  padding: 12px 18px;
  border-left: 5px solid #DC657B;
  border-radius: 8px;
}
/* ========================================
   RYK STUDIO Webデザイン：共通ボタン
   ======================================== */

.entry-content .wp-block-button__link {
  background-color: #630A2A;
  color: #FFFFFF;
  border-radius: 24px;
  padding: 10px 22px;
  border: 2px solid #630A2A;
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}

.entry-content .wp-block-button__link:hover {
  background-color: #DC657B;
  border-color: #DC657B;
  color: #FFFFFF;
}
/* ========================================
   RYK STUDIO Webデザイン：小見出し（H3）
   ======================================== */

.entry-content h3.wp-block-heading {
  background: #FFF7F8;
  color: #630A2A;
  border-left: 4px solid #F3B8C6;
  border-bottom: 1px solid #F3B8C6;
  border-top: none;
  border-right: none;
  border-radius: 0 6px 6px 0;
  padding: 8px 14px;
}
/* ========================================
   RYK STUDIO Webデザイン：HOMEキャラクターカード
   ======================================== */

.page-id-8
.wp-block-cocoon-blocks-column-2:has(#nyaiton-home)
> .wp-block-cocoon-blocks-column-left,

.page-id-8
.wp-block-cocoon-blocks-column-2:has(#nyaiton-home)
> .wp-block-cocoon-blocks-column-right {
  background: #FFFFFF;
  border: 1px solid #F3B8C6;
  border-radius: 14px;
  padding: 22px 20px 24px;
  box-sizing: border-box;
}
/* ========================================
   RYK STUDIO Webデザイン：ヘッダーナビ
   ======================================== */

/* ヘッダーメニュー文字 */
#navi .item-label {
  color: #2F2F2F;
  transition: color 0.2s ease;
}

/* マウスを乗せたとき */
#navi .menu-item:hover .item-label {
  color: #630A2A;
}

/* ヘッダーナビ下部のブランドライン */
#navi {
  border-bottom: 4px solid #FAE8EA;
}
/* ヘッダーメニュー：ホバー背景 */
#navi .menu-item:hover > a {
  background-color: #FFF7F8;
}
/* ========================================
   RYK STUDIO Webデザイン：フッター
   ======================================== */

#footer-in {
  background-color: #FAE8EA;
  border-top: 4px solid #630A2A;
}
/* ========================================
   RYK STUDIO Webデザイン：BLOG一覧カード
   ======================================== */

.blog .entry-card-wrap {
  background: #FFFFFF;
  border: 1px solid #F3B8C6;
  border-radius: 14px;
  padding: 18px;
  box-sizing: border-box;
  transition: background-color 0.2s ease,
              border-color 0.2s ease;
}

.blog .entry-card-wrap:hover {
  background-color: #FFF7F8;
  border-color: #DC657B;
}
/* ========================================
   RYK STUDIO Webデザイン：BLOGカテゴリーラベル
   ======================================== */

.blog .cat-label {
  background-color: #630A2A;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}
/* ========================================
   RYK STUDIO Webデザイン：HOME商品画像（スマホ）
   ======================================== */

@media screen and (max-width: 768px) {
  .page-id-8 .wp-image-35,
  .page-id-8 .wp-image-37,
  .page-id-8 .wp-image-38 {
    width: 180px;
    height: auto;
  }
}
/* ========================================
   お問い合わせ：送信完了メッセージ
   ======================================== */

.wpcf7 form.sent .wpcf7-response-output {
  max-width: 760px;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 20px;
}
/* =========================================
   お問い合わせ：フォームボタン
========================================= */

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #630A2A;
  color: #ffffff;
  border: none;
  border-radius: 999px;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="button"]:hover {
  background-color: #DC657B;
  color: #ffffff;
}
/* お問い合わせ：入力内容を確認するボタン */
.wpcf7 .ryk-contact-check {
  background-color: #630A2A;
  color: #ffffff;
  border: none;
  border-radius: 999px;
}

.wpcf7 .ryk-contact-check:hover {
  background-color: #DC657B;
  color: #ffffff;
}
/* お問い合わせ：戻って修正するボタン */
.wpcf7 .ryk-contact-back {
  background-color: #630A2A;
  color: #ffffff;
  border: none;
  border-radius: 999px;
}

.wpcf7 .ryk-contact-back:hover {
  background-color: #DC657B;
  color: #ffffff;
}