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

/************************************************
** Noa Blog Style
** この下にオリジナルCSSを追加していきます
************************************************/


/* ==========================================================
   トップページ・記事ページ
========================================================== */

/* トップページのタイトル・投稿日・投稿者情報を非表示 */
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info {
  display: none;
}

/* 投稿者情報を非表示 */
.author-info.author-info {
  display: none;
}

/* 記事タイトル（H1）を非表示 */
h1.entry-title {
  display: none;
}


/* ==========================================================
   オリジナル見出し（番号＋葉っぱ）
========================================================== */

/* 見出し全体 */
.custom-heading {
  position: relative;
  display: flex;
  align-items: stretch;

  margin: 30px 0;
  padding-right: 90px;

  background: #f3ebe8;
  border-radius: 6px;
  overflow: visible;
}


/* 左側の番号 */
.heading-number {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 60px;
  padding: 0 16px;

  background: #d2a79d;
  color: #fff;

  font-size: 16px;
  font-weight: bold;

  z-index: 2;
}

/* タイトル */
.heading-title {
  padding: 14px 22px;

  color: #6b4c46;

  font-family: "Yu Mincho", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;

  z-index: 2;
}

/* 葉っぱ装飾 */
.custom-heading::after {
  content: "";

  position: absolute;
  top: -25px;
  right: 8px;

  width: 95px;
  height: 95px;

  background: url("https://amorialuxy.com/wp-content/uploads/2026/05/heading.png") center / contain no-repeat;

  opacity: .45;
  z-index: 1;
}


/* ==========================================================
   メディアとテキストブロック
========================================================== */

/* 上揃え */
.wp-block-media-text {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* テキスト部分 */
.wp-block-media-text__content {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* 段落余白 */
.wp-block-media-text__content p {
  margin: 0 0 1em !important;
}


/* ==========================================================
   スマホ表示（768px以下）
========================================================== */

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

  .custom-heading {
    padding-right: 60px;
  }

  .heading-title {
    padding: 12px 16px;
    font-size: 16px;
  }

  .custom-heading::after {
    top: 50%;
    right: 0;

    width: 65px;
    height: 65px;

    transform: translateY(-50%);
    opacity: .25;
  }

}


/************************************************
** 1023px以下
************************************************/

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

}


/************************************************
** 834px以下
************************************************/

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

}


/************************************************
** 480px以下
************************************************/

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

}

/* ==========================================================
   Amoria Luxy
   ヘッダーメニュー
   アイコン＋日本語＋英語
========================================================== */

/* メニュー全体 */
#navi .navi-in > ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 各メニュー項目 */
#navi .navi-in > ul > li[class*="fa-"] {
  position: relative !important;

  display: flex !important;
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: max-content !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: center !important;
  justify-content: center !important;
}

/* メニュー項目同士の間隔 */
#navi .navi-in > ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 70px !important;
}
/* メニューリンク */
#navi .navi-in > ul > li[class*="fa-"] > a {
  display: flex !important;
  align-items: center !important;

  width: auto !important;
  min-width: max-content !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* ----------------------------------------------------------
   アイコン
   日本語タイトルの左側に配置
---------------------------------------------------------- */

#navi .navi-in > ul > li[class*="fa-"]::before {
  position: absolute !important;

  left: 0 !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  display: inline-block !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 15px !important;
  line-height: 1 !important;
}

/* ----------------------------------------------------------
   日本語＋英語
---------------------------------------------------------- */

#navi .navi-in > ul > li[class*="fa-"] .caption-wrap {
  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  width: auto !important;
  min-width: max-content !important;
  height: auto !important;

  margin: 0 !important;

  /* アイコンの分だけ左に余白 */
  padding: 30px 0 0 22px !important;
}

/* 日本語 */
#navi .navi-in > ul > li[class*="fa-"] .item-label {
  display: block !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;

  line-height: 1.3 !important;
}

/* 英語 */
#navi .navi-in > ul > li.menu-item .item-description {
  display: block !important;

  width: 100% !important;

  margin: 3px 0 15px !important;
  padding: 0 !important;

  white-space: nowrap !important;

  line-height: 1.3 !important;

  /* 中央揃え */
  text-align: center !important;

  /* フォントの色 */
  color: #b49a86 !important;
}

/* ==========================================================
   Amoria Luxy
   ヘッダー上下の薄いライン
========================================================== */

#navi {
  border-top: 1px solid rgba(180, 154, 134, 0.35) !important;
  border-bottom: 1px solid rgba(180, 154, 134, 0.35) !important;
}
/* ==========================================================
   ヘッダーメニュー：シャープな文字
========================================================== */

#navi .navi-in > ul > li[class*="fa-"] .item-label {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;

  color: #6B5A52 !important;
}

/* Cocoon：カスタムボタンデザイン */
.my-custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px; /* 必要に応じて横幅を調整してください */
    height: 54px;
    margin: 0 auto 50px auto; 
    background-color: #ffffff !important;
    color: #4a4a4a !important;
    border: 1px solid #b5b5b5 !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 14px;
    position: relative;
    box-sizing: border-box;
}

/* 右側の矢印アイコン（>） */
.my-custom-btn::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #4a4a4a;
    border-right: 1.5px solid #4a4a4a;
}

/* マウスホバー時の設定（少し薄くする） */
.my-custom-btn:hover {
    opacity: 0.8;
    background-color: #fcfcfc !important;
}