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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ===== そらの修行 デザイン (2026-11) ===== */
:root{
  --sora-navy:#0b1a33; --sora-navy2:#12284d; --sora-ink:#1d2433;
  --sora-gold:#e3a03a; --sora-jal:#9b1b26; --sora-ana:#1a4fa0;
}

/* --- ヘッダー・メニュー (全ページ) --- */
.header-container{background:var(--sora-navy)}
.header{background:transparent}
.header .site-name-text,.header .site-name-text-link{color:#fff}
.header .tagline{color:rgba(255,255,255,.65);letter-spacing:.06em}
.header-in{min-height:0}
.logo-text{padding:14px 0 10px}
.site-name-text{font-weight:700;letter-spacing:.12em}
.navi{background:var(--sora-navy);border-top:1px solid rgba(255,255,255,.08)}
.navi-in a{color:rgba(255,255,255,.88);font-size:15px}
.navi-in a:hover{background:rgba(255,255,255,.06);color:var(--sora-gold)}
.navi-in>ul .sub-menu{background:var(--sora-navy2)}
@media (max-width:1023px){.navi-in>ul li{height:46px}.navi-in a{font-size:12px}}

/* --- フッター (全ページ) --- */
.footer{background:var(--sora-navy);color:rgba(255,255,255,.75)}
.footer a,.footer .site-name-text{color:#fff}
.footer .navi-footer-in a{color:rgba(255,255,255,.75)}
.footer .navi-footer-in a:hover{color:var(--sora-gold)}
.footer .copyright{color:rgba(255,255,255,.55)}

/* --- トップページだけ: 余計な部品を隠して横幅いっぱいに --- */
.home.page .article-header,.home.page .entry-title,.home.page .date-tags,
.home.page .sns-share,.home.page .sns-follow,.home.page .article-footer,
.home.page .breadcrumb,.home.page .under-entry-content,.home.page .author-box{display:none}
.home.page .main{padding:0;border:0;background:transparent}
.home.page .article{margin:0}
.home.page .content{margin-top:0}
.home.page .entry-content{margin:0}
.home.page{overflow-x:hidden}

/* ===== トップページ本体 ===== */
.sora-top{color:var(--sora-ink);line-height:1.8}
.sora-top *{box-sizing:border-box}
.sora-top a{text-decoration:none}
.sora-top p{margin:0}

/* ヒーロー */
.st-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,#24477f 0%,rgba(36,71,127,0) 60%),
             linear-gradient(180deg,var(--sora-navy) 0%,#0f2547 55%,#1a3a6b 100%);
  color:#fff;padding:72px 20px 84px}
.st-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(227,160,58,.10));pointer-events:none}
.st-stars{position:absolute;inset:0;opacity:.85;
  background-image:
   radial-gradient(1.5px 1.5px at 8% 18%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 22% 62%,#fff 50%,transparent 51%),
   radial-gradient(1.2px 1.2px at 35% 12%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 48% 40%,rgba(255,255,255,.8) 50%,transparent 51%),
   radial-gradient(1.6px 1.6px at 63% 22%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 72% 70%,rgba(255,255,255,.7) 50%,transparent 51%),
   radial-gradient(1.3px 1.3px at 86% 34%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 93% 8%,#fff 50%,transparent 51%),
   radial-gradient(1px 1px at 14% 86%,rgba(255,255,255,.6) 50%,transparent 51%),
   radial-gradient(1.2px 1.2px at 55% 88%,rgba(255,255,255,.6) 50%,transparent 51%),
   radial-gradient(2px 2px at 78% 52%,rgba(227,160,58,.9) 50%,transparent 51%);
  animation:st-twinkle 6s ease-in-out infinite alternate}
@keyframes st-twinkle{from{opacity:.55}to{opacity:.95}}
.st-route{position:absolute;inset:0;width:100%;height:100%}
.st-hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.st-eyebrow{display:inline-block;font-size:13px;letter-spacing:.12em;color:var(--sora-gold);
  border:1px solid rgba(227,160,58,.5);border-radius:999px;padding:4px 14px;margin-bottom:20px !important}
.st-hero-title{font-size:44px;font-weight:700;line-height:1.35;letter-spacing:.04em;margin-bottom:20px !important;
  text-shadow:0 2px 20px rgba(0,0,0,.25)}
.st-hero-lead{font-size:16px;color:rgba(255,255,255,.82);max-width:34em;margin-bottom:28px !important}
.st-cta{display:flex;flex-wrap:wrap;gap:12px}
.st-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;
  transition:transform .2s,box-shadow .2s,background .2s}
.st-btn:hover{transform:translateY(-2px)}
.st-btn-gold{background:var(--sora-gold);color:var(--sora-navy) !important;box-shadow:0 8px 24px rgba(227,160,58,.35)}
.st-btn-gold:hover{box-shadow:0 12px 28px rgba(227,160,58,.45)}
.st-btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff !important}
.st-btn-ghost:hover{background:rgba(255,255,255,.1)}

/* 修行メーター */
.st-meter{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;
  padding:26px 26px 22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 20px 50px rgba(0,0,0,.25)}
.st-meter-label{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.st-meter-label .fa{color:var(--sora-gold);margin-right:6px}
.st-meter-num{margin:6px 0 16px !important;color:rgba(255,255,255,.7);font-size:15px}
.st-meter-num strong{font-size:52px;line-height:1;color:#fff;font-weight:700;margin-right:4px;font-variant-numeric:tabular-nums}
.st-bar{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:visible}
.st-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#c43a43,var(--sora-gold));
  box-shadow:0 0 14px rgba(227,160,58,.6)}
.st-tick{position:absolute;top:-3px;width:2px;height:18px;background:rgba(255,255,255,.7);border-radius:2px}
.st-bar-legend{position:relative;height:40px;margin-top:6px;font-size:11px;line-height:1.3;color:rgba(255,255,255,.6)}
.st-bar-legend span{position:absolute;transform:translateX(-50%);text-align:center;white-space:nowrap}
.st-bar-legend span:last-child{transform:translateX(-100%);text-align:right;color:var(--sora-gold)}
.st-meter-note{margin-top:10px !important;font-size:13px;color:rgba(255,255,255,.8);
  border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.st-meter-note strong{color:var(--sora-gold);font-size:16px;margin:0 2px}

/* セクション共通 */
.st-sec{max-width:1100px;margin:0 auto;padding:64px 20px 0}
.st-sec:last-child{padding-bottom:72px}
.st-sec-en{font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--sora-gold)}
.sora-top .st-h2{all:unset;display:block;font-size:26px;font-weight:700;color:var(--sora-navy);
  letter-spacing:.04em;margin:4px 0 28px;line-height:1.5}

/* ツール */
.st-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st-tool{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 24px 22px;border-radius:16px;
  background:#fff;border:1px solid #e3e7ef;color:var(--sora-ink) !important;overflow:hidden;
  box-shadow:0 4px 16px rgba(11,26,51,.06);transition:transform .2s,box-shadow .2s}
.st-tool::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--acc)}
a.st-tool:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(11,26,51,.14)}
.st-jal{--acc:var(--sora-jal)}
.st-both{--acc:linear-gradient(90deg,var(--sora-jal) 50%,var(--sora-ana) 50%)}
.st-tool-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#fff;
  background:var(--sora-jal);margin-bottom:8px}
.st-both .st-tool-icon{background:linear-gradient(135deg,var(--sora-jal) 50%,var(--sora-ana) 50%)}
.st-tool-tag{position:absolute;top:22px;right:20px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--sora-jal)}
.st-tool-tag b{font-weight:700;margin-left:6px}
.st-tool-tag .t-jal{color:var(--sora-jal)} .st-tool-tag .t-ana{color:var(--sora-ana)}
.st-tool-name{font-size:19px;font-weight:700;color:var(--sora-navy)}
.st-tool-desc{font-size:14px;color:#5a6274;line-height:1.7;flex:1}
.st-tool-go{margin-top:10px;font-size:14px;font-weight:700;color:var(--sora-jal)}
.st-both .st-tool-go{color:var(--sora-navy)}
.st-soon{opacity:.72;background:#f7f8fb}
.st-soon .st-tool-go{color:#8a92a3;font-weight:400}

/* カテゴリ */
.st-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.st-cat{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:14px;color:#fff !important;
  background:var(--bg);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.st-cat::after{content:"\f105";font-family:FontAwesome;position:absolute;right:22px;font-size:22px;opacity:.6;transition:right .2s}
.st-cat:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,26,51,.2)}
.st-cat:hover::after{right:16px}
.st-cat>.fa{font-size:26px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);flex:none}
.st-cat b{display:block;font-size:18px;letter-spacing:.03em}
.st-cat small{display:block;font-size:13px;opacity:.8}
.st-cat-jal{--bg:linear-gradient(120deg,#7d1520,var(--sora-jal) 60%,#b4323c)}
.st-cat-ana{--bg:linear-gradient(120deg,#123a7a,var(--sora-ana) 60%,#2f6cc4)}
.st-cat-navy{--bg:linear-gradient(120deg,var(--sora-navy),#1d3a68)}
.st-cat-gold{--bg:linear-gradient(120deg,#1d3a68,var(--sora-navy))}
.st-cat-gold>.fa{color:var(--sora-gold)}

/* 新着記事 (Cocoonの新着記事リスト) */
.st-new .new-entry-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.st-new .new-entry-card-link,.st-new .widget-entry-card-link{display:block;border-radius:14px;background:#fff;border:1px solid #e3e7ef;
  padding:14px;transition:transform .2s,box-shadow .2s;margin:0}
.st-new .new-entry-card-link:hover,.st-new .widget-entry-card-link:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,26,51,.12);background:#fff}
.st-new .new-entry-card-title,.st-new .card-title{font-weight:700;color:var(--sora-navy);font-size:15px;line-height:1.6}
.st-new .card-thumb img,.st-new .new-entry-card-thumb img{border-radius:8px}

/* 運営者 */
.st-about{display:flex;gap:28px;align-items:center;padding:32px;border-radius:18px;
  background:linear-gradient(120deg,var(--sora-navy),#1a3a6b);color:#fff;position:relative;overflow:hidden}
.st-about::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(227,160,58,.3)}
.st-about-badge{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:700;
  color:var(--sora-navy);background:linear-gradient(135deg,#f3c46f,var(--sora-gold));box-shadow:0 0 0 6px rgba(227,160,58,.2)}
.st-about-name{font-size:20px;font-weight:700;margin:2px 0 8px !important}
.st-about-text{font-size:14px;color:rgba(255,255,255,.82);line-height:1.9}
.st-about-link{display:inline-block;margin-top:12px;color:var(--sora-gold) !important;font-weight:700;font-size:14px}

/* スマホ・タブレット */
@media (max-width:900px){
  .st-hero{padding:48px 18px 60px}
  .st-hero-inner{grid-template-columns:1fr;gap:32px}
  .st-hero-title{font-size:32px}
  .st-tools{grid-template-columns:1fr}
}
@media (max-width:600px){
  .st-hero-title{font-size:27px}
  .st-hero-lead{font-size:14px}
  .st-btn{width:100%;justify-content:center}
  .st-meter{padding:20px 18px 18px}
  .st-meter-num strong{font-size:42px}
  .st-sec{padding:48px 16px 0}
  .sora-top .st-h2{font-size:22px;margin-bottom:20px}
  .st-cats,.st-new .new-entry-cards{grid-template-columns:1fr}
  .st-cat{padding:18px}
  .st-about{flex-direction:column;text-align:center;padding:28px 20px}
  .st-about-badge{width:76px;height:76px;font-size:32px}
}
@media (prefers-reduced-motion:reduce){.st-stars{animation:none}.sora-top *{transition:none !important}}

/* --- 写真 (2026-11 追加) --- */
.st-hero-photo{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,26,51,.95) 0%,rgba(11,26,51,.82) 42%,rgba(11,26,51,.5) 100%),
             linear-gradient(0deg,rgba(11,26,51,.85) 0%,rgba(11,26,51,0) 40%),
             url(/wp-content/uploads/2026/11/sora-hero-lounge.webp) center 45%/cover no-repeat}
.st-hero .st-stars{opacity:.35}
.st-hero{padding-top:96px;padding-bottom:104px}
.st-cat{min-height:124px;background:var(--ov),var(--img,none) center/cover no-repeat}
.st-cat-jal{--ov:linear-gradient(105deg,rgba(125,21,32,.96) 0%,rgba(155,27,38,.85) 45%,rgba(155,27,38,.4) 100%)}
.st-cat-ana{--ov:linear-gradient(105deg,rgba(18,58,122,.96) 0%,rgba(26,79,160,.85) 45%,rgba(26,79,160,.4) 100%)}
.st-cat-navy{--ov:linear-gradient(105deg,rgba(11,26,51,.96) 0%,rgba(29,58,104,.85) 45%,rgba(29,58,104,.4) 100%)}
.st-cat-gold{--ov:linear-gradient(105deg,rgba(11,26,51,.96) 0%,rgba(29,58,104,.85) 45%,rgba(29,58,104,.4) 100%)}
.st-cat b,.st-cat small{text-shadow:0 1px 8px rgba(0,0,0,.35)}

.st-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.st-ph{position:relative;margin:0 !important;border-radius:14px;overflow:hidden;background:var(--sora-navy)}
.st-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.st-ph:hover img{transform:scale(1.05)}
.st-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:13px;line-height:1.5;color:#fff;
  background:linear-gradient(180deg,rgba(11,26,51,0),rgba(11,26,51,.85));text-align:left}
.st-ph-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;padding:1px 8px;border-radius:999px;margin-right:8px;vertical-align:1px}
.st-ph-tag.is-jal{background:var(--sora-jal)} .st-ph-tag.is-ana{background:var(--sora-ana)} .st-ph-tag.is-navy{background:var(--sora-gold);color:var(--sora-navy)}
.st-ph-big{grid-column:span 2;grid-row:span 2}
.st-ph-tall{grid-row:span 2}
.st-ph-wide{grid-column:span 2}
@media (max-width:900px){.st-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .st-ph-big{grid-column:span 2;grid-row:span 1}.st-ph-tall{grid-row:span 2}}
@media (max-width:600px){.st-hero{padding-top:56px;padding-bottom:64px}
  .st-hero-photo{background:linear-gradient(180deg,rgba(11,26,51,.7) 0%,rgba(11,26,51,.9) 55%,rgba(11,26,51,.97) 100%),
    url(/wp-content/uploads/2026/11/sora-hero-lounge.webp) 60% 30%/cover no-repeat}
  .st-gallery{grid-auto-rows:150px;gap:10px}.st-ph figcaption{font-size:12px;padding:22px 10px 9px}}
/* ===== /そらの修行 デザイン ===== */


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

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

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