@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){
  /*必要ならばここにコードを書く*/
}
/* 記事の大きな見出し(H2)の変な背景と左線を消して、すっきりさせる */
.article h2 {
  background: transparent !important;
  border-bottom: 1px solid #5A514A !important;
  color: #5A514A !important;
}

/* 小見出し(H3)の左側の線をサロンのゴールドにする */
.article h3 {
  background: transparent !important;
  color: #5A514A !important;
  border: none !important;
}

/* ヘッダーメニューのフォントをCormorant Garamondにする */
.navi-in a {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', 'ヒラギノ明朝 ProN', serif !important;
  font-size: 18px; /* ガラモンは少し華奢で小さめに見えるので、文字サイズを少しだけ補正しています */
  font-weight: 500; /* ほどよい上品な太さに設定 */
}

/* ① ヘッダーの上下にゆったりした余白を作る */
.header-in {
  padding-top: 10px !important;    /* ヘッダーの上の余白 */
  padding-bottom: 10px !important; /* ヘッダーの下の余白 */
}

/* ② 予約メニューを「透き通る白と白枠線のスマートなボタン」にする */
.navi-in li.header-btn a {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif !important;
  
  /* ↓背景を美しい「透けた白」に設定（最後の 0.15 が透明度です。お好みで 0.2 などに上げても綺麗です） */
  background-color: rgba(255, 255, 255, 0.15) !important; 
  
  /* ↓文字色と枠線を綺麗な「白」に設定 */
  color: #ffffff !important; 
  border: 1px solid rgba(255, 255, 255, 0.6) !important; /* 少しだけ馴染む繊細な白枠線 */
  
  /* ↓スマートに細く潰すための設定 */
  padding: 8px 20px !important; 
  line-height: 1.2 !important; 
  height: auto !important; 
  display: inline-block !important;
  
  transition: all 0.3s ease; 
  font-weight: 600 !important;
}

/* ③ マウスを乗せた時（ホバー時）の演出 */
.navi-in li.header-btn a:hover {
  /* ホバー時は少しだけ透け感を濃くして、押せる感を出します */
  background-color: rgba(255, 255, 255, 0.3) !important; 
  border-color: #ffffff !important;
  color: #ffffff !important;
  text-decoration: none !important;
}