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

/************************************
** シタゴコロ カスタム調整
************************************/

/* ヘッダー＆ナビゲーションの背景をサイト背景と統一 */
#navi,
.navi,
#navi-in,
.navi-in,
#navi ul,
#navi .menu-header,
.menu-header,
#header-container,
.header-container,
#header,
.header {
  background-color: #191919 !important;
  background-image: none !important;
}

/* ナビ下の境界線を控えめに */
#navi {
  border-bottom: 1px solid #2a2a2e !important;
  box-shadow: none !important;
}

/* ナビリンクのホバー色（臙脂寄り） */
#navi .menu-header li a,
.navi li a {
  background-color: transparent !important;
  color: #d3d3d3 !important;
  transition: color 0.2s, background-color 0.2s;
}
#navi .menu-header li a:hover,
.navi li a:hover {
  background-color: rgba(216, 164, 164, 0.08) !important;
  color: #d8a4a4 !important;
}

/************************************
** ヒーロー（アピールエリア）
************************************/

/* Google Fonts 読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500&family=DM+Mono:wght@300;400&display=swap');

#appeal {
  background-color: #191919 !important;
  background-image: none !important;
  border-bottom: 1px solid #2a2a2e;
  padding: 5rem 2rem 4rem !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
  text-align: left;
}
#appeal .appeal-in,
#appeal-in.appeal-in {
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}
#appeal .appeal-content {
  background: transparent !important;
  padding: 0 !important;
  max-width: 720px;
  margin: 0 !important;
  text-align: left;
  color: #e8e6e0;
}
/* 上部ラベル: — personal journal */
#appeal .appeal-content::before {
  content: "— personal journal";
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: #d8a4a4;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  opacity: 0.9;
}
/* メインキャッチ */
#appeal .appeal-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #e8e6e0 !important;
  margin: 0 0 1.4rem 0 !important;
  letter-spacing: 0.04em;
  text-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
/* サブテキスト */
#appeal .appeal-message,
#appeal .appeal-message p {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  color: #8a8880 !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
/* ボタン非表示（ボタンを使わない場合に備えて） */
#appeal .appeal-btn,
#appeal .appeal-button { display: none !important; }

/* フェードイン */
#appeal .appeal-content {
  opacity: 0;
  transform: translateY(12px);
  animation: shitagokoroFadeUp 0.7s ease 0.05s forwards;
}
@keyframes shitagokoroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* レスポンシブ */
@media screen and (max-width: 834px) {
  #appeal { padding: 3.5rem 1.5rem 3rem !important; }
  #appeal .appeal-title { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
}

/************************************
** ヘッダースリム化 ＆ 横並びレイアウト
************************************/

/* hlt-center-logo-wrap を上書きして、ロゴ左・ナビ右の横並びに */
body.hlt-center-logo-wrap #header-container-in,
#header-container-in {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  height: 72px !important;
  gap: 2rem !important;
}

/* ヘッダー本体をスリムに */
body #header-container,
body.hlt-center-logo-wrap #header-container {
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 !important;
}
body #header,
body.hlt-center-logo-wrap #header {
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: left !important;
}
body #header-in,
body.hlt-center-logo-wrap #header-in {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  text-align: left !important;
}

/* ロゴ画像を高さ52pxに揃える */
body .logo,
body .logo-header,
body .logo-image {
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
}
body .logo a,
body .logo-header a,
body .logo-image a {
  display: inline-flex !important;
  align-items: center !important;
  height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .logo img,
body .logo-header img,
body .logo-image img {
  height: 52px !important;
  width: auto !important;
  max-height: 52px !important;
  max-width: none !important;
  display: block !important;
  transition: opacity 0.2s;
}
body .logo a:hover img { opacity: 0.75; }

/* グローバルナビを右寄せに */
body #navi,
body.hlt-center-logo-wrap #navi {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}
body #navi-in,
body.hlt-center-logo-wrap #navi-in {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body #navi .menu-header,
body #navi ul.menu-header,
body #navi .menu,
body #navi ul.menu {
  display: flex !important;
  gap: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  justify-content: flex-end !important;
}
body #navi .menu-header > li,
body #navi ul.menu > li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

/* ナビリンク：サブテキストと同じ色 #8a8880 */
body #navi .menu-header li a,
body #navi ul.menu li a,
body .navi li a {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8a8880 !important;
  background-color: transparent !important;
  padding: 0.5rem 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  border: none !important;
  transition: color 0.2s;
}
body #navi .menu-header li a:hover,
body #navi ul.menu li a:hover,
body .navi li a:hover {
  color: #d8a4a4 !important;
  background-color: transparent !important;
}

/* サイトタイトルテキスト（画像ロゴと並走しない） */
.logo-header .site-name-text-link { display: none; }

/* モバイル調整 */
@media screen and (max-width: 834px) {
  body #header-container-in,
  body.hlt-center-logo-wrap #header-container-in {
    padding: 0 1rem !important;
    height: 64px !important;
    gap: 1rem !important;
  }
  body #header-container,
  body #header,
  body.hlt-center-logo-wrap #header-container,
  body.hlt-center-logo-wrap #header {
    height: 64px !important;
    min-height: 64px !important;
  }
  body .logo, body .logo-header, body .logo-image, body .logo img { height: 44px !important; max-height: 44px !important; }
  body .logo a, body .logo-header a, body .logo-image a { height: 44px !important; }
  body #navi .menu-header, body #navi ul.menu { gap: 1.2rem !important; }
  body #navi .menu-header li a, body #navi ul.menu li a { font-size: 0.72rem !important; }
}