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

/************************************
** 子テーマ用のスタイルを書く
************************************/

:root{
  --lune-bg: #fdf7f6;
  --lune-bg-alt: #f6e9e7;
  --lune-text: #3a2a2c;
  --lune-text-sub: #9c8285;
  --lune-accent: #b8768a;
  --lune-accent-dark: #9c5f72;
  --lune-line: #ecdcdc;
  --lune-white: #ffffff;
}

body{
  color: var(--lune-text);
}

a{
  color: var(--lune-accent-dark);
}
a:hover{
  color: var(--lune-accent);
}

/* ヘッダー */
#header{
  background: var(--lune-white);
  border-bottom: 1px solid var(--lune-line);
}
#site-title, #site-title a, .site-name a{
  color: var(--lune-accent-dark) !important;
  letter-spacing: .1em;
}
.site-description{
  color: var(--lune-text-sub) !important;
}

/* グローバルナビ */
#navi, #navi-in, .navi-in-inner{
  background: var(--lune-accent-dark) !important;
}
#navi a{
  color: var(--lune-white) !important;
}
#navi li:hover, #navi li.current-menu-item{
  background: var(--lune-accent) !important;
}

/* フッター */
#footer{
  background: var(--lune-text);
  color: var(--lune-white);
}
#footer a{
  color: var(--lune-white) !important;
}
#footer .footer-widget-title{
  color: var(--lune-white) !important;
  border-color: var(--lune-accent) !important;
}

/* ボタン・WooCommerceボタン類 */
.sim-btn, .btn, .wp-block-button__link,
input[type="submit"], button.button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button{
  background: var(--lune-accent) !important;
  color: var(--lune-white) !important;
  border-color: var(--lune-accent) !important;
  border-radius: 4px !important;
}
.sim-btn:hover, .btn:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, button.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover{
  background: var(--lune-accent-dark) !important;
  color: var(--lune-white) !important;
}

/* 見出し */
h1, h2, h3, h4{
  color: var(--lune-accent-dark);
}
.article h2{
  border-color: var(--lune-accent) !important;
}

/* サイト全体の背景 */
#wrapper{
  background: var(--lune-bg);
}
.content-top, .article, .box-widget{
  background: var(--lune-white);
}

/* ヘッダーのカートリンク・個数バッジ */
.lune-cart-menu-item > a{
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.lune-cart-count{
  background: var(--lune-white);
  color: var(--lune-accent-dark);
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* WooCommerce 価格・セール表示 */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--lune-accent-dark) !important;
}
.onsale{
  background: var(--lune-accent) !important;
}

/* 固定ページ(ショップページ含む)の日付・投稿者名・目次を非表示 */
.page .date-tags,
.page .author-info,
.page .toc{
  display: none !important;
}

/* 独自ヒーローを置いたページでは、重複するページタイトルを非表示 */
.page:has(.lune-hero) .entry-title{
  display: none !important;
}

/************************************
** LUNE 固定ページ用パーツ
************************************/
.lune-hero{
  text-align: center;
  padding: 88px 20px;
  background: var(--lune-bg-alt);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.lune-hero-eyebrow{
  letter-spacing: .25em;
  font-size: 12px;
  color: var(--lune-accent-dark);
  margin-bottom: 16px;
}
.lune-hero-title{
  font-size: 30px;
  letter-spacing: .06em;
  color: var(--lune-text) !important;
  margin-bottom: 20px;
}
.lune-hero-lead{
  font-size: 14px;
  line-height: 1.9;
  color: var(--lune-text-sub);
  margin-bottom: 32px;
}

.lune-btn{
  display: inline-block;
  padding: 14px 40px;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: .1em;
  transition: opacity .2s;
  text-decoration: none !important;
}
.lune-btn:hover{ opacity: .75; }
.lune-btn-primary{
  background: var(--lune-accent);
  color: var(--lune-white) !important;
}
.lune-btn-outline{
  background: transparent;
  border: 1px solid var(--lune-accent);
  color: var(--lune-accent-dark) !important;
}

.lune-section{
  padding: 72px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.lune-section-alt{
  background: var(--lune-bg-alt);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 72px 20px;
}
.lune-section-title{
  text-align: center;
  font-size: 22px;
  letter-spacing: .1em;
  color: var(--lune-accent-dark);
  margin-bottom: 44px;
}

.lune-grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media screen and (max-width: 834px){
  .lune-grid-3{ grid-template-columns: 1fr; }
  .lune-hero-title{ font-size: 24px; }
}

.lune-category-card{
  text-align: center;
}
.lune-category-thumb{
  height: 160px;
  width: 160px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--lune-white);
  border: 1px solid var(--lune-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lune-text-sub);
  font-size: 12px;
  letter-spacing: .1em;
}

.lune-center{
  text-align: center;
  margin-top: 36px;
}

.lune-value-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 20px;
}
.lune-value-num{
  font-size: 13px;
  color: var(--lune-accent);
  margin-bottom: 10px;
}
.lune-value-title{
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--lune-text);
}
.lune-value-text{
  font-size: 13px;
  color: var(--lune-text-sub);
  line-height: 1.8;
}
@media screen and (max-width: 834px){
  .lune-value-grid{ grid-template-columns: 1fr; text-align: center; }
}

.lune-cta{
  text-align: center;
  padding: 72px 20px;
  background: var(--lune-bg-alt);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.lune-cta-title{
  font-size: 20px;
  color: var(--lune-text);
  margin-bottom: 12px;
}
.lune-cta-text{
  font-size: 13px;
  color: var(--lune-text-sub);
  margin-bottom: 28px;
}

/* お問い合わせ(デモフォーム) */
.lune-form{
  max-width: 480px;
  margin: 0 auto;
}
.lune-form .form-row{
  margin-bottom: 20px;
  text-align: left;
}
.lune-form label{
  display: block;
  font-size: 12px;
  color: var(--lune-text-sub);
  margin-bottom: 8px;
  letter-spacing: .05em;
}
.lune-form input, .lune-form textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid var(--lune-line);
  background: var(--lune-white);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.lune-form textarea{ min-height: 140px; }
.lune-form-msg{
  display: none;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--lune-accent-dark);
}
.lune-disclaimer{
  text-align: center;
  font-size: 12px;
  color: var(--lune-text-sub);
  background: var(--lune-bg-alt);
  padding: 10px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: -20px;
  margin-bottom: 0;
}

/* 商品ショートコード(WooCommerce)をLUNE配色に */
.lune-section ul.products li.product .price{
  color: var(--lune-accent-dark) !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}