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


/* =====================================================================
   ORIA Journal — Cocoon Child ブランドCSS
   ---------------------------------------------------------------------
   適用方法:
     WordPress 管理画面 ▶ 外観 ▶ テーマファイルエディター ▶
     「Cocoon Child」の style.css を開き、ファイル末尾（テーマ
     ヘッダーコメントより下）にこの内容を丸ごと貼り付けて保存。
   注意:
     style.css 冒頭の「Theme Name / Template: cocoon-master」コメントは
     絶対に消さないこと（消すと子テーマが認識されなくなる）。
   準拠: design/assets/oria.css（1a デザイントークン）
         docs/BRAND_GUIDE.md（カラー / フォント）
         ※ 実機 Cocoon での最終確認は別途必要
   ===================================================================== */

/* --- Webフォント（Cocoon設定のWebフォントを使わない場合はこのまま） --- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- デザイントークン（1a — design/assets/oria.css 準拠） --- */
:root{
  --c-bg:        #FBF7F0;
  --c-surface:   #F4EDE2;
  --c-ink:       #211E1A;
  --c-text:      #3A332B;
  --c-text-sub:  #6E655A;
  --c-text-3:    #857B6E;
  --c-navy:      #1E2742;
  --c-gold:      #9C7E45;
  --c-gold-2:    #C9B894;
  --c-footer:    #322C24;
  --c-heading:   #211E1A;
  --c-accent:    #9C7E45;
  --font-body:    'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --font-heading: 'Shippori Mincho B1', serif;
  --font-wordmark:'Cormorant Garamond', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --measure: 720px;
  --leading: 1.95;
}

/* --- 全体 --- */
body{
  background-color: var(--c-bg) !important;
  color: var(--c-text);
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: var(--leading);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
.entry-content{
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.entry-content p{
  margin: 0 0 1.6em;
}
/* --- 見出し --- */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.article-title,
.entry-title,
.page-title{
  font-family: var(--font-heading);
  color: var(--c-ink);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
}
.entry-content h2{
  font-size: 1.6rem;
  margin: 3rem 0 1.2rem;
  padding: 0 0 .6rem;
  border: none;
  border-bottom: 2px solid var(--c-navy);
  background: none;
}
.entry-content h3{
  font-size: 1.2rem;
  margin: 2.4rem 0 1rem;
  padding: 0 0 0 .65rem;
  border: none;
  border-left: 3px solid var(--c-gold);
  background: none;
}
.entry-content a{
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold);
  transition: color .15s ease, border-color .15s ease;
}
.entry-content a:hover{
  color: var(--c-gold);
  border-bottom-color: var(--c-gold);
}
.entry-content strong{
  font-weight: 700;
  color: var(--c-ink);
}
.entry-content blockquote{
  background: var(--c-surface);
  border: none;
  border-left: 3px solid var(--c-gold);
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  color: var(--c-text-sub);
  border-radius: 2px;
}
.entry-content ul,
.entry-content ol{
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}
.entry-content li{
  margin: .4em 0;
}
.entry-content table{
  border-collapse: collapse;
  width: 100%;
  margin: 2rem 0;
}
.entry-content th,
.entry-content td{
  border: 1px solid rgba(33,30,26,.12);
  padding: .7em .9em;
}
.entry-content th{
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 600;
}
.entry-content hr{
  border: none;
  border-top: 1px solid rgba(33,30,26,.12);
  margin: 2.5rem 0;
}
.date-tags,
.author-info,
.post-meta,
.entry-meta{
  color: var(--c-text-sub);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
}
.post-update,
.entry-meta .updated{
  color: var(--c-ink);
}
.toc,
#toc{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--c-surface);
  border: 1px solid rgba(33,30,26,.12);
  border-radius: 4px;
  padding: 1.1rem 1.3rem;
}
.toc .toc-title{
  font-family: var(--font-heading);
  color: var(--c-ink);
  font-weight: 600;
}
.toc a{
  color: var(--c-text);
  border: none;
}
.toc a:hover{
  color: var(--c-gold);
}
.author-box,
.author-thumb-area + .author-description{
  background: var(--c-surface);
  border: 1px solid rgba(33,30,26,.12);
  border-radius: 4px;
}
.oria-callout{
  background: var(--c-navy);
  color: #F7F1E8;
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.oria-callout .oria-callout-title{
  font-family: var(--font-mono);
  color: var(--c-gold-2);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
}
.oria-callout p{
  color: #EDE6D8;
  font-size: .95rem;
  line-height: 1.85;
  margin: 0 0 .8em;
}
.oria-callout p:last-child{
  margin-bottom: 0;
}
.oria-note{
  background: var(--c-surface);
  border: 1px solid rgba(33,30,26,.12);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  margin: 2rem 0;
  color: var(--c-text-sub);
  font-size: .9rem;
}
.oria-update-log{
  background: var(--c-surface);
  border-radius: 2px;
  padding: .9rem 1.2rem;
  margin: 1.5rem 0;
  color: var(--c-text-sub);
  font-size: .85rem;
}
.oria-update-log .oria-update-log-title{
  font-family: var(--font-heading);
  color: var(--c-heading);
  font-weight: 600;
  margin: 0 0 .4rem;
  font-size: .9rem;
}
.oria-update-log .oria-update-log-list{
  margin: 0;
  padding-left: 1.2em;
}
.oria-update-log .oria-update-log-list li{
  margin: .25em 0;
}
.oria-supervisor{
  background: var(--c-surface);
  border: 1px solid rgba(33,30,26,.12);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin: 2.5rem 0;
}
.oria-supervisor .oria-supervisor-title{
  font-family: var(--font-heading);
  color: var(--c-heading);
  font-weight: 600;
  margin: 0 0 .4rem;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: none;
}
.oria-supervisor .oria-supervisor-name{
  font-family: var(--font-heading);
  color: var(--c-heading);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}
.oria-supervisor .oria-supervisor-role{
  color: var(--c-text-sub);
  font-weight: 400;
  font-size: .9rem;
}
.oria-supervisor .oria-supervisor-link a{
  border-bottom-color: var(--c-accent);
  font-size: .9rem;
}
.oria-diagram{
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}
.oria-diagram svg{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: var(--c-bg);
  border: 1px solid rgba(33,30,26,.12);
  border-radius: 3px;
}
.oria-diagram .oria-diagram-caption{
  margin-top: .5rem;
  color: var(--c-text-sub);
  font-size: .85rem;
}
.oria-references{
  font-size: .9rem;
  color: var(--c-text-sub);
}
.oria-references li{
  margin: .5em 0;
  word-break: break-word;
}
.widget-title,
.sidebar h3{
  font-family: var(--font-heading);
  color: var(--c-ink);
}
.oria-product-card{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.2rem;
  background: var(--c-surface);
  border: 1px solid rgba(33,30,26,.12);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  margin: 2.5rem 0;
  align-items: center;
}
.oria-product-card__media img{
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 3px;
}
.oria-product-card__label{
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--c-accent);
  margin: 0 0 .25rem;
  text-transform: none;
}
.oria-product-card__name{
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--c-heading);
  margin: 0 0 .5rem;
  line-height: 1.4;
}
.oria-product-card__lead{
  color: var(--c-text);
  margin: 0 0 .8rem;
  font-size: .95rem;
}
.oria-product-card__cta a{
  display: inline-block;
  padding: .55rem 1.2rem;
  background: var(--c-heading);
  color: #fff;
  border-bottom: none;
  border-radius: 2px;
  font-size: .92rem;
  letter-spacing: .04em;
}
.oria-product-card__cta a:hover{
  background: var(--c-accent);
  color: #fff;
}
.oria-product-card__note{
  margin: .7rem 0 0;
  font-size: .78rem;
  color: var(--c-text-sub);
}
@media (max-width: 560px){
  .oria-product-card{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .oria-product-card__media{
    max-width: 160px;
    margin: 0 auto;
  }
}
.oria-front-section{ margin: 3rem 0; }
.oria-front-section__title{
  font-family: var(--font-heading); color: var(--c-heading);
  font-weight: 600; font-size: 1.35rem; letter-spacing: .05em;
  text-align: center; margin: 0 0 1.5rem;
}
.oria-front-section__lead{
  text-align: center; color: var(--c-text-sub);
  font-size: .95rem; margin: 0 0 2rem;
}
.oria-front-search__grid{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
}
.oria-front-search__col{
  background: var(--c-surface); border: 1px solid rgba(33,30,26,.12);
  border-radius: 4px; padding: 1rem 1.1rem;
}
.oria-front-search__col h3{
  font-family: var(--font-heading); color: var(--c-heading);
  font-size: 1rem; font-weight: 600; margin: 0 0 .6rem;
  padding: 0; border: none;
}
.oria-front-search__col ul{ margin: 0; padding: 0; list-style: none; }
.oria-front-search__col li{ margin: .35em 0; font-size: .9rem; }
.oria-front-search__col li a{ border-bottom-color: var(--c-accent); }
@media (max-width: 900px){
  .oria-front-search__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .oria-front-search__grid{ grid-template-columns: 1fr; }
}
.oria-front-recommend__list{
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: .7rem;
  max-width: 800px;
}
.oria-front-recommend__list li{
  display: grid; grid-template-columns: 48px 1fr; gap: 1rem;
  align-items: center; background: #fff; border: 1px solid rgba(33,30,26,.12);
  border-radius: 3px; padding: .7rem 1rem;
}
.oria-front-recommend__rank{
  font-family: var(--font-heading); color: var(--c-accent);
  font-size: 1.6rem; font-weight: 700; text-align: center; line-height: 1;
}
.oria-front-recommend__list a{ border-bottom: none; color: var(--c-heading); font-weight: 500; }
.oria-front-recommend__list a:hover{ color: var(--c-accent); }
.oria-front-recommend__note{
  text-align: center; color: var(--c-text-sub); font-size: .8rem; margin: 1rem 0 0;
}
.oria-front-glossary__grid{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
  max-width: 900px; margin-inline: auto;
}
.oria-front-glossary__grid a{
  display: block; background: var(--c-surface); border: 1px solid rgba(33,30,26,.12);
  border-radius: 3px; padding: 1rem .5rem; text-align: center;
  font-family: var(--font-heading); color: var(--c-heading);
  font-weight: 600; border-bottom: 1px solid rgba(33,30,26,.12);
}
.oria-front-glossary__grid a:hover{
  background: #fff; color: var(--c-accent); border-color: var(--c-accent);
}
@media (max-width: 600px){
  .oria-front-glossary__grid{ grid-template-columns: repeat(2, 1fr); }
}
.single .oria-front-section,
.page   .oria-front-section,
.archive .oria-front-section,
.search  .oria-front-section{
  display: none;
}
/* ---------------------------------------------------------------------------
   ロングUVA フィーチャーセクション（トップ ヒーロー直下）
   --------------------------------------------------------------------------- */
.oria-longuva-feature{
  margin: 2.5rem 0 3rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-bg) 100%);
  border-left: 4px solid var(--c-gold);
  border-radius: 2px;
}
.oria-longuva-feature__inner{
  max-width: 880px;
  margin: 0 auto;
}
.oria-longuva-feature__eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--c-gold);
  margin: 0 0 0.5rem;
  font-weight: 500;
  text-transform: uppercase;
}
.oria-longuva-feature__title{
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 1rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.oria-longuva-feature__lead{
  font-size: 0.98rem;
  line-height: 1.95;
  color: var(--c-text-sub);
  margin: 0 0 1.75rem;
}
.oria-longuva-feature__cta{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: var(--c-navy);
  color: #F7F1E8;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.oria-longuva-feature__cta:hover{
  background: var(--c-gold);
  color: #F7F1E8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 39, 66, 0.2);
  text-decoration: none;
}
.oria-longuva-feature__cta::after{
  content: "\2192";
  font-size: 1.05rem;
  line-height: 1;
}
.single .oria-longuva-feature,
.page   .oria-longuva-feature,
.archive .oria-longuva-feature,
.search  .oria-longuva-feature{
  display: none;
}
@media (max-width: 768px){
  .oria-longuva-feature{
    padding: 2rem 1.25rem;
  }
  .oria-longuva-feature__title{
    font-size: 1.35rem;
  }
  .oria-longuva-feature__cta{
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
  }
}
/* ---------------------------------------------------------------------------
   トップ: 注目記事 + 用語集 を 2 カラムで横並び
   --------------------------------------------------------------------------- */
.oria-home-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin: 3rem auto;
  max-width: 1120px;
  padding: 0 1rem;
}
.oria-home-pair__col{
  display: flex;
  flex-direction: column;
}
.oria-home-pair__heading{
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--c-gold);
  letter-spacing: 0.04em;
}
.oria-home-pair__eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--c-gold);
  margin: 0 0 0.3rem;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 768px){
  .oria-home-pair{
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem auto;
  }
}
.single .oria-home-pair,
.page   .oria-home-pair,
.archive .oria-home-pair,
.search  .oria-home-pair{
  display: none;
}
/* ---------------------------------------------------------------------------
   トップ: 新着記事 3 カラム × 3 行（9 件想定）
   --------------------------------------------------------------------------- */
@media (min-width: 769px){
  body.home .list .a-wrap,
  body.home .list .entry-card-wrap{
    width: calc((100% - 2rem) / 3);
  }
}
/* ---------------------------------------------------------------------------
   画面下部固定バナー（LINE 先行登録 CTA・全ページ常時表示）
   --------------------------------------------------------------------------- */
.oria-sticky-banner{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: block;
  text-decoration: none;
  background: transparent;
  box-shadow: 0 -4px 16px rgba(30, 39, 66, 0.12);
  transition: transform 0.35s ease;
  line-height: 0;
}
.oria-sticky-banner picture,
.oria-sticky-banner img{
  display: block;
  width: 100%;
  height: auto;
}
.oria-sticky-banner__close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(30, 39, 66, 0.65);
  color: var(--c-bg);
  font-size: 18px;
  line-height: 1;
  border: none;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}
.oria-sticky-banner__close:hover{
  background: rgba(30, 39, 66, 0.85);
}
.oria-sticky-banner.is-hidden{
  transform: translateY(100%);
  pointer-events: none;
}
.go-to-top,
#go-to-top{
  bottom: 160px !important;
}
body.sticky-banner-dismissed .go-to-top,
body.sticky-banner-dismissed #go-to-top{
  bottom: 40px !important;
}
body{
  padding-bottom: 140px;
}
body.sticky-banner-dismissed{
  padding-bottom: 0;
}
@media (max-width: 768px){
  body{
    padding-bottom: 80px;
  }
  .go-to-top,
  #go-to-top{
    bottom: 100px !important;
  }
}
.o-figure-wrap { display: none; }
/* =====================================================================
   1a 追補（2026-07）: フッター色の1a統一 + ロングUVAヒーローの画像/ゴールド枠
   - (a) フッター: 現行の Cocoon フッター色(#4A3F36)を 1a の #322C24 に統一。
         ※ 最も確実なのは Cocoon設定 ▶ フッター ▶ フッターカラー=#322C24。
           下記はその保険（#footer を id 指定 + !important で上書き）。
   - (b) ロングUVAフィーチャーに右カラムの画像＋極細ゴールド枠を追加（HTML不要・CSSのみ）。
         画像は WP メディアに hero-model.png をアップロードし、--oria-hero-img の URL を差し替える。
         未設定時は淡いパネル地のプレースホルダとして破綻なく表示される。
   ===================================================================== */

/* (a) フッターを 1a 濃色へ統一 */
#footer{
  background-color: var(--c-footer) !important;
}

/* (b) ロングUVAフィーチャー: 右にビジュアル列＋ゴールド枠（PCのみ／モバイルは従来通り1カラム） */
.oria-longuva-feature{
  /* ↓ WPメディアにアップロードした画像URLに差し替える。
     例: --oria-hero-img: url("https://oria-skin.jp/wp-content/uploads/2026/07/hero-model.png"); */
  --oria-hero-img: url("https://journal.oria-skin.jp/wp-content/uploads/2026/07/hero-model.png");
}
@media (min-width: 861px){
  .oria-longuva-feature__inner{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
  }
  .oria-longuva-feature__inner::after{
    content: "";
    align-self: stretch;
    min-height: clamp(220px, 26vw, 320px);
    background: var(--oria-hero-img) center / cover no-repeat;
    border: 1px solid var(--c-gold);
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(33, 30, 26, 0.08);
  }
}

/* 目次のモバイル固定不具合の是正（本文が目次背後に潜る問題） */
@media (max-width: 768px){
  .o-article-layout{ flex-direction: column !important; }
  .o-toc{
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
}