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


/* --------------------------------------------------
		テストテスト
-------------------------------------------------- */

/* ==================================================
   トップページ全体
================================================== */
html{
  overflow-x: hidden;

}
body.page-id-149 {
  --color-text: #5b4437;
  --color-sub-text: #8a7465;
  --color-header: #fffdf9;
  --color-page: #fffaf5;
  --color-wave: #f1e5d8;
  --color-line: #d9bea0;
  --color-pink: #e8b2a2;
  --color-green: #b5c1a7;
  --color-orange: #dda96c;

  overflow-x: hidden;
  color: var(--color-text);
  background: #f2eee9;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;
}

body.page-id-149 #container,
body.page-id-149 #container * {
  box-sizing: border-box;
}

body.page-id-149 #container {
  width: 100%;
  max-width: none;
  background: var(--color-page);
}


/* ==================================================
   ヘッダー
================================================== */

body.page-id-149 #header-container {
  position: relative;
  z-index: 1;
  margin-bottom: 75px;
  overflow: visible;
  background: var(--color-header);
}

body.page-id-149 #header-container-in,
body.page-id-149 #header {
  position: relative;
  z-index: 3;
  background: transparent;
}

body.page-id-149 #header-in {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 155px;
  padding: 25px 100px 15px;
}


/* ロゴ */

body.page-id-149 .logo-header {
  order: 1;
  width: 100%;
  padding: 0 !important;
  text-align: center;
}

body.page-id-149 .logo-header .site-name-text {
  color: var(--color-text) !important;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
}


/* ロゴ下の「手相・四柱推命・タロット」 */

body.page-id-149 .tagline {
  order: 2;
  width: auto;
  min-width: 310px;
  margin: 7px auto 0 !important;
  padding: 0 48px;
  color: var(--color-sub-text);
  font-size: 0 !important;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.1em;

  background:
    linear-gradient(
      var(--color-line),
      var(--color-line)
    ) left center / 34px 1px no-repeat,
    linear-gradient(
      var(--color-line),
      var(--color-line)
    ) right center / 34px 1px no-repeat;
}

body.page-id-149 .tagline::after {
  content: "四柱推命・手相・タロット";
  font-size: 14px;
}


/* 左側の植物風装飾 */

body.page-id-149 #header::before {
  /* content: "❧";
  position: absolute;
  top: 18px;
  left: max(25px, calc((100% - 1200px) / 2));
  color: rgba(190, 158, 124, 0.28);
  font-family: serif;
  font-size: 100px;
  line-height: 1;
  transform: rotate(-24deg);
  pointer-events: none; */
}


/* ==================================================
   PC用ナビゲーション
================================================== */

body.page-id-149 #navi {
  position: relative;
  z-index: 4;
  background: rgba(255, 253, 249, 0.92);
  border-top: 1px solid rgba(217, 190, 160, 0.28);
}

body.page-id-149 #navi-in {
  max-width: 1050px;
}

body.page-id-149 #navi .menu-header {
  display: flex;
  justify-content: center;
}

body.page-id-149 #navi .menu-item {
  width: auto;
}

body.page-id-149 #navi .menu-item > a {
  height: 55px;
  padding: 0 22px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

body.page-id-149 #navi .menu-item > a:hover {
  color: #a77e60;
  background: rgba(241, 229, 216, 0.45);
}


/* ==================================================
   ヘッダー下の2重の波
================================================== */

body.page-id-149 #header-container::before,
body.page-id-149 #header-container::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

/* 下側のベージュの波 */

body.page-id-149 #header-container::before {
  z-index: 1;
  left: -10%;
  bottom: -62px;
  width: 120%;
  height: 100px;
  background: var(--color-wave);
  border-radius:
    0 0 50% 50% /
    0 0 80% 80%;
  transform: rotate(-1deg);
  transform-origin: center;
}

/* 上側の白い波 */

body.page-id-149 #header-container::after {
  z-index: 2;
  left: -10%;
  bottom: -28px;
  width: 120%;
  height: 78px;
  background: var(--color-header);
  border-radius:
    0 0 50% 50% /
    0 0 90% 90%;
  transform: rotate(-1deg);
  transform-origin: center;
  box-shadow: 0 8px 15px rgba(151, 111, 75, 0.04);
}


/* ==================================================
   メインコンテンツ
================================================== */

body.page-id-149 #content {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

body.page-id-149 #content-in {
  width: calc(100% - 50px);
  max-width: 1120px;
  margin: 0 auto;
}

body.page-id-149 #main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 35px 50px 70px;
  background: #fffdf9;
  border: none;
  border-radius: 2px;
  box-shadow: 0 8px 30px rgba(112, 84, 62, 0.05);
}


/* 空のタイトルを非表示 */

body.page-id-149 .article-header .entry-title {
  display: none;
}


/* 日付 */

body.page-id-149 .article-header {
  max-width: 960px;
  margin: 0 auto;
}

body.page-id-149 .date-tags {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.4;
  display: none!important;
}

body.page-id-149 .post-date,
body.page-id-149 .post-update {
  margin: 0;
}

body.page-id-149 .date-tags .fa {
  margin-right: 5px;
  color: var(--color-text);
}


/* 本文全体 */

body.page-id-149 .entry-content {
  max-width: 960px;
  margin: 0 auto !important;
}


/* メイン画像 */

body.page-id-149 .entry-content > .wp-block-image:first-child {
  width: 100%;
  margin: 0 auto !important;
}

body.page-id-149 .entry-content > .wp-block-image:first-child img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}


/* ==================================================
   メイン画像下の紹介文
================================================== */

/*
HTMLにある画像直後の空のpタグを利用しています。
*/

body.page-id-149 .entry-content > .wp-block-image:first-child + p {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 105px;
  margin: 0 !important;
  padding: 20px 10px 10px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.09em;
}

body.page-id-149 .entry-content > .wp-block-image:first-child + p::before {
  content:
    "ほっと一息つける、あなただけの時間。\A"
    "心が軽くなる鑑定をお届けします。";
  white-space: pre-line;
}

body.page-id-149 .entry-content > .wp-block-image:first-child + p::after {
  /* content: "・— ❧ —・";
  display: block;
  margin-top: 5px;
  color: #d6b48e;
  font-size: 16px;
  letter-spacing: 0.18em; */
}


/* 最後の空白pタグを非表示 */

body.page-id-149 .entry-content > p:last-child:empty {
  display: none;
}


/* ==================================================
   3つのメニューボタン
================================================== */

/*
元の6つのボタンから
・鑑定メニュー
・ブログ
・プロフィール
だけを表示します。
*/

body.page-id-149 .entry-content > .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch !important;
  margin: 25px 0 0 !important;
  padding: 0;
  background: transparent !important;
}


/* 3列目・4列目を非表示 */

/* body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(n + 3) {
  display: none !important;
} */


/* 2列目の「鑑定スタイル」を非表示 */

/* body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(2)
.wp-block-button:nth-child(2) {
  display: none !important;
} */


/*
入れ子をなくし、3つのボタンを
同じグリッド上へ並べる
*/

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column,
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-buttons {
  display: contents !important;
}

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button {
  width: auto !important;
  margin: 0 !important;
}


/* ボタン本体 */

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 14px;

  width: 100%;
  min-height: 96px;
  padding: 14px 16px !important;

  color: var(--color-text) !important;
  text-align: left;
  text-decoration: none;

  background-color: #fffdf9 !important;
  border: 1px solid rgba(208, 184, 155, 0.42) !important;
  border-radius: 14px !important;
  box-shadow:
    0 4px 10px rgba(117, 88, 64, 0.08),
    0 1px 2px rgba(117, 88, 64, 0.05);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(117, 88, 64, 0.12),
    0 2px 4px rgba(117, 88, 64, 0.06);
}


/* ボタンタイトル */

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link
> span {
  grid-column: 2;
  display: block;
  min-width: 0;
  color: var(--color-text);
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 19px !important;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link
> span
span {
  font-size: inherit !important;
}


/* ボタン内の説明文 */

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link
> span::after {
  display: block;
  margin-top: 2px;
  color: var(--color-sub-text);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
}


/* 鑑定メニューの説明 */

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(1)
.wp-block-button:nth-child(1)
.wp-block-button__link
> span::after {
  content: none;
}


/* ブログの説明 */

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(1)
.wp-block-button:nth-child(2)
.wp-block-button__link
> span::after {
  content: "日々のことや占いの知識を綴っています";
}


/* プロフィールの説明 */

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(2)
.wp-block-button:nth-child(1)
.wp-block-button__link
> span::after {
  content: "はなについて・ごあいさつ";
}


/* 左側の丸いアイコン */

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link::before {
  content: "\f06c"; /* 基本の葉っぱアイコン */
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: rgba(255, 255, 255, 0.9);
  font-family: FontAwesome;
  font-size: 29px;
  font-weight: normal;
  background: #c5b39f;
  border-radius: 50%;
}


/* 鑑定メニュー：手のアイコン */

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(1)
.wp-block-button:nth-child(1)
.wp-block-button__link::before {
  content: "\f256";
  background: var(--color-pink);
}


/* ブログ：本のアイコン */

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(1)
.wp-block-button:nth-child(2)
.wp-block-button__link::before {
  content: "\f02d";
  background: var(--color-green);
}


/* プロフィール：カップのアイコン */

body.page-id-149
.entry-content
> .wp-block-columns
> .wp-block-column:nth-child(2)
.wp-block-button:nth-child(1)
.wp-block-button__link::before {
  content: "\f0f4";
  background: var(--color-orange);
}


/* 右側の矢印 */

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link::after {
  content: "\f105";
  grid-column: 3;
  color: #c7a67e;
  font-family: FontAwesome;
  font-size: 28px;
  font-weight: normal;
  text-align: center;
}


/* 記事下の投稿者情報を非表示 */

body.page-id-149 .article-footer {
  display: none;
}


/* ==================================================
   フッター
================================================== */

body.page-id-149 #footer {
  margin-top: 0;
  padding: 30px 0;
  color: var(--color-text);
  background: #eee6dd;
  border: none;
}

body.page-id-149 #footer .site-name-text {
  color: var(--color-text);
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
}


/* ==================================================
   スマホ
================================================== */

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

  body.page-id-149 #header-container {
    margin-bottom: 48px;
  }

  body.page-id-149 #header-in {
    min-height: 125px;
    padding: 55px 66px 13px;
  }
  }

  body.page-id-149 .logo-header .site-name-text {
    font-size: 23px !important;
    line-height: 1.45;
    letter-spacing: 0.13em;
    white-space: nowrap;
  }

  body.page-id-149 .tagline {
    min-width: 230px;
    margin-top: 6px !important;
    padding: 0 36px;
    background-size: 27px 1px;
  }

  body.page-id-149 .tagline::after {
    font-size: 14px;
  }
  @media screen and ( max-width:430px ){
    body.page-id-149 .tagline::after {
      font-size: 12px;
    }
  }

  /* 左側の植物風装飾 */

  body.page-id-149 #header::before {
    top: 27px;
    left: -7px;
    font-size: 75px;
    opacity: 0.85;
  }


  /* PC用ナビを非表示 */
@media screen and ( max-width:430px ){
  body.page-id-149 #navi {
    display: none;
  }
}



  /* スマホの波 */

  body.page-id-149 #header-container::before {
    left: -15%;
    bottom: -43px;
    width: 130%;
    height: 67px;
    transform: rotate(-1.3deg);
  }

  body.page-id-149 #header-container::after {
    left: -15%;
    bottom: -17px;
    width: 130%;
    height: 48px;
    transform: rotate(-1.3deg);
  }


  /* メインコンテンツ */

  body.page-id-149 #content-in {
    width: 100%;
  }
@media screen and ( max-width:430px ){
  body.page-id-149 #content-in {
    margin: 0;
  }
}

  body.page-id-149 #main {
    padding: 0 18px 38px;
    border-radius: 0;
    box-shadow: none;
  }


  /* 日付 */

  body.page-id-149 .date-tags {
    gap: 14px;
    margin-bottom: 10px;
    font-size: 16px;
    white-space: nowrap;
  }


  /* 画像下の紹介文 */

  body.page-id-149
  .entry-content
  > .wp-block-image:first-child
  + p {
    min-height: 90px;
    padding: 14px 0 7px;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.07em;
  }

  body.page-id-149
  .entry-content
  > .wp-block-image:first-child
  + p::after {
    margin-top: 3px;
    font-size: 12px;
  }


  /* ボタンを縦並びにする */

  body.page-id-149 .entry-content > .wp-block-columns {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 6px !important;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link {
    grid-template-columns: 53px minmax(0, 1fr) 16px;
    column-gap: 13px;
    min-height: 64px;
    padding: 9px 12px !important;
    border-radius: 11px !important;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link::before {
    width: 53px;
    height: 53px;
    font-size: 25px;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link
  > span {
    font-size: 17px !important;
    line-height: 1.4;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link
  > span::after {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.5;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link::after {
    font-size: 25px;
  }


  /* ================================================
     右上の丸いメニューボタン
  ================================================ */

  body.page-id-149 .mobile-footer-menu-buttons {
    position: absolute !important;
    z-index: 1000;
    top: 28px !important;
    right: 13px !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;
    width: 62px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.page-id-149 .mobile-footer-menu-buttons > li {
    display: none !important;
  }

  body.page-id-149
  .mobile-footer-menu-buttons
  > .navi-menu-button {
    display: block !important;
    width: 62px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.page-id-149
  .mobile-footer-menu-buttons
  #navi-menu-open {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 62px !important;
    height: 76px !important;
    padding: 0 !important;
    color: var(--color-text);
    background: transparent !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  body.page-id-149
  .mobile-footer-menu-buttons
  .navi-menu-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 3px;
    color: var(--color-text);
    font-size: 22px;
    background: #e6d3bc;
    border-radius: 50%;
  }

  body.page-id-149
  .mobile-footer-menu-buttons
  .navi-menu-caption {
    display: block;
    color: var(--color-text);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }


  /*
  メニューを開いた後の内容は、
  Cocoon本来のドロワーメニューを使用
  */

  body.page-id-149 #navi-menu-content {
    font-family:
      "Yu Mincho",
      "Hiragino Mincho ProN",
      serif;
  }


  /* スマホではフッターを小さくする */

  body.page-id-149 #footer {
    padding: 22px 15px;
    font-size: 12px;
  }



/* ==================================================
   幅の小さいスマホ
================================================== */

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

  body.page-id-149 #header-in {
    padding-right: 65px;
    padding-left: 58px;
  }

  body.page-id-149 .logo-header .site-name-text {
    font-size: 20px !important;
    letter-spacing: 0.1em;
  }

  body.page-id-149 .tagline {
    min-width: 215px;
    padding-right: 32px;
    padding-left: 32px;
    background-size: 23px 1px;
  }

  body.page-id-149 #main {
    padding-right: 14px;
    padding-left: 14px;
  }

  body.page-id-149 .date-tags {
    gap: 10px;
    font-size: 16px;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link
  > span::after {
    font-size: 9px;
  }
}


time{
  

}

.menu-drawer a{
  padding: 12px 6px;
}

.menu-close-button{
  display: none;
}

.menu-content .menu-drawer {
  padding: 60px 1em 30px;
}

@media screen and (max-width: 480px) {
  .menu-content {
      max-width: 74%;
  }
}

/* プロフィール */
body.page-id-149
.wp-block-button__link[href*="page_id=78"]::before {
  content: "\f0f4";
  background: #dda96c;
}

/* ご予約・お問い合わせ */
body.page-id-149
.wp-block-button__link[href*="page_id=102"]::before {
  content: "\f0e0";
  background: #b9a9c7;
}

/* 鑑定メニュー */
body.page-id-149
.wp-block-button__link[href*="page_id=112"]::before {
  content: "\f256";
  background: #e8b2a2;
}

/* ブログ */
body.page-id-149
.wp-block-button__link[href*="page_id=116"]::before {
  content: "\f02d";
  background: #b5c1a7;
}

/* 鑑定スタイル */
body.page-id-149
.wp-block-button__link[href*="page_id=128"]::before {
  content: "\f14e";
  background: #aebdcc;
}

/* お客様の声 */
body.page-id-149
.wp-block-button__link[href*="page_id=260"]::before {
  content: "\f0e6";
  background: #d1ad9d;
}

/* ==================================================
   下部メニューを2項目だけ表示
================================================== */

/* ボタンを直接グリッドの項目として扱う */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button {
  display: contents !important;
}

/* すべてのボタンを一度非表示 */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link {
  display: none !important;
}

/* 鑑定メニュー・ご予約お問い合わせだけ表示 */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link[href*="page_id=112"],

body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link[href*="page_id=102"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  align-items: center;
  column-gap: 14px;

  min-height: 88px;
  padding: 16px 20px !important;
}

/* PCでは2列 */
body.page-id-149
.entry-content
> .wp-block-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 左側の丸いアイコンを削除 */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link::before {
  content: none !important;
  display: none !important;
}

/* タイトル・説明文を左列に配置 */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link
> span {
  grid-column: 1 !important;
}

/* 右矢印を右列に配置 */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link::after {
  grid-column: 2 !important;
}

/* ご予約・お問い合わせの説明文 */
body.page-id-149
.entry-content
> .wp-block-columns
.wp-block-button__link[href*="page_id=102"]
> span::after {
  content: none;
}

/* スマホでは縦並び */
@media screen and (max-width: 834px) {
  body.page-id-149
  .entry-content
  > .wp-block-columns {
    grid-template-columns: 1fr !important;
  }

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link[href*="page_id=112"],

  body.page-id-149
  .entry-content
  > .wp-block-columns
  .wp-block-button__link[href*="page_id=102"] {
    min-height: 64px;
    padding: 12px 16px !important;
  }
}