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

/* ===== ヘッダー・メニュー(メディアサイト風) 2026-10-29 ===== */
:root{--hd-ink:#1b2430;--hd-sub:#5b6676;--hd-line:#e3e7ee;--hd-accent:#d9480f;--hd-bar:#1b2430;}
@media screen and (min-width:1024px){
  /* 上段: 左にロゴ、右にタグライン */
  #header-container{background:#fff;border-bottom:1px solid var(--hd-line);}
  #header-container .header-in{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:18px 0 16px;min-height:0;}
  #header-container .logo-header,#header-container .hlt-center-logo .logo{flex:0 0 auto;width:auto;margin:0;text-align:left;padding:0;}
  #header-container .header-in:before,#header-container .header-in:after{display:none;}
  #header-container .header-in{max-width:1240px;margin-left:auto;margin-right:auto;}
  #header-container .logo-header a{color:var(--hd-ink);font-size:30px;font-weight:800;letter-spacing:.02em;text-decoration:none;}
  #header-container .logo-header a:before{content:"";display:inline-block;width:6px;height:28px;background:var(--hd-accent);margin-right:12px;vertical-align:-5px;}
  #header-container .tagline{margin:0;color:var(--hd-sub);font-size:12px;text-align:right;max-width:340px;line-height:1.5;}

  /* 下段: 濃色のナビバー */
  #navi{background:var(--hd-bar);border:0;}
  #navi .navi-in>ul{display:flex;justify-content:flex-start;max-width:1240px;margin:0 auto;}
  #navi .navi-in>ul>li{position:relative;width:auto;flex:0 0 auto;}
  #navi .navi-in>ul>li>a{display:block;height:auto;padding:0;color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1;background:transparent;border-bottom:3px solid transparent;transition:background .15s,border-color .15s;}
  #navi .navi-in>ul>li>a .caption-wrap{padding:16px 20px 13px;}
  #navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li:hover>a,#navi .navi-in>ul>li.current-menu-item>a,#navi .navi-in>ul>li.current-menu-ancestor>a,#navi .navi-in>ul>li.current-post-ancestor>a{background:#0f151d;border-bottom-color:var(--hd-accent);color:#fff;}
  #navi .navi-in>ul>li.menu-item-has-children>a .item-label:after{content:"";display:inline-block;margin-left:7px;width:5px;height:5px;border-right:2px solid #aeb7c4;border-bottom:2px solid #aeb7c4;transform:rotate(45deg) translateY(-2px);}

  /* ドロップダウン(2列) */
  #navi .navi-in>ul>li>ul.sub-menu{display:block;position:absolute;left:0;top:100%;width:520px;min-width:0;padding:10px 14px 14px;background:#fff;border:1px solid var(--hd-line);border-top:3px solid var(--hd-accent);box-shadow:0 10px 24px rgba(20,28,40,.14);column-count:2;column-gap:8px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:999;}
  #navi .navi-in>ul>li:hover>ul.sub-menu,#navi .navi-in>ul>li:focus-within>ul.sub-menu{opacity:1;visibility:visible;transform:none;}
  #navi .navi-in>ul>li:nth-last-child(-n+3)>ul.sub-menu{left:auto;right:0;}
  #navi .sub-menu li{width:auto;break-inside:avoid;}
  #navi .sub-menu li a{display:block;height:auto;padding:0;color:var(--hd-ink);background:transparent;border:0;font-size:13px;font-weight:500;line-height:1.5;border-radius:4px;}
  #navi .sub-menu li a .caption-wrap{padding:9px 10px;}
  #navi .sub-menu li a:hover{background:#f3f5f8;color:var(--hd-accent);}
  #navi .sub-menu li a .item-label:before{content:"›";margin-right:7px;color:var(--hd-accent);font-weight:700;}
  /* 項目の少ないメニューは1列 */
  #navi .navi-in>ul>li:nth-child(4)>ul.sub-menu,#navi .navi-in>ul>li:nth-child(5)>ul.sub-menu,#navi .navi-in>ul>li:nth-child(6)>ul.sub-menu{width:300px;column-count:1;}
  #navi .navi-in>ul>li:nth-child(4)>ul.sub-menu{width:280px;}
}
.related-box{margin:36px 0 8px;padding:16px 20px;border:1px solid #e3e7ee;border-left:4px solid #d9480f;background:#fafbfc;border-radius:4px;}
.related-box-title{font-weight:700;font-size:14px;margin-bottom:6px;color:#1b2430;}
.related-box ul{margin:0;padding-left:1.2em;}
.related-box li{margin:4px 0;font-size:14px;}

/* ===== トップページ(公式サイト風) 2026-10-29 ===== */
.home.page #sidebar,.home.page .sns-share,.home.page .sns-follow,.home.page .comment-area,.home.page .breadcrumb,.home.page .author-info,.home.page .entry-title,.home.page .article-header,.home.page .article-footer,.home.page .related-box,.home.page .pager-post-navi,.home.page .date-tags,.home.page .eye-catch-wrap{display:none!important;}
.home.page .content{margin-top:0;}
.home.page .content-in{display:block;}
.home.page .main,.home.page #main{float:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.home.page .content-in,.home.page #content-in{display:block!important;max-width:none!important;width:100%!important;padding:0!important;}
.home.page #content{margin-top:0!important;}
.home.page .wrap{max-width:none;}
.tt-top .tt-hero{width:100%!important;margin-left:0!important;}
body.home.page{overflow-x:hidden;}
.home.page .article{padding:0;margin:0;background:transparent;box-shadow:none;}
.home.page .entry-content,.home.page .entry-content.cf{margin:0!important;padding:0!important;width:100%!important;max-width:none!important;}
.home.page .article>*{max-width:none;}
.tt-top{--tt-ink:#1b2430;--tt-sky:#2aa7d8;--tt-line:#e3e7ee;}
.tt-top section{max-width:1100px;margin:0 auto;}
.tt-top a{text-decoration:none;}
/* ヒーロー(画面幅いっぱい) */
.tt-top .tt-hero{position:relative;max-width:none;width:100vw;margin:0 0 0 calc(50% - 50vw);height:min(66vh,600px);min-height:420px;overflow:hidden;background:#101828;}
.tt-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s;display:block;}
.tt-slide.on{opacity:1;z-index:1;}
.tt-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,30,.62) 0%,rgba(10,16,30,.18) 55%,rgba(10,16,30,0) 100%);}
.tt-copy{position:absolute;left:max(7vw,64px);top:50%;transform:translateY(-50%);color:#fff;max-width:640px;display:block;}
.tt-kicker{display:block;font-size:13px;font-weight:700;letter-spacing:.3em;margin-bottom:18px;color:#fff;opacity:.9;}
.tt-kicker:before{content:"";display:inline-block;width:34px;height:2px;background:#fff;vertical-align:middle;margin-right:12px;}
.tt-catch{display:block;font-size:clamp(30px,4.4vw,58px);font-weight:700;letter-spacing:.14em;line-height:1.35;text-shadow:0 2px 14px rgba(8,20,48,.55);}
.tt-sub{display:block;margin-top:18px;font-size:clamp(14px,1.4vw,17px);letter-spacing:.06em;text-shadow:0 1px 8px rgba(8,20,48,.6);}
.tt-btn{display:inline-block;margin-top:28px;padding:12px 32px;background:#fff;color:var(--tt-ink);font-weight:700;font-size:15px;letter-spacing:.1em;border-radius:40px;}
.tt-slide:hover .tt-btn{background:var(--tt-sky);color:#fff;}
.tt-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;gap:10px;}
.tt-dots button{width:34px;height:4px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;}
.tt-dots button.on{background:#fff;}
.tt-share{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:3;background:#fff;border-radius:0 12px 12px 0;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.tt-share span{writing-mode:vertical-rl;font-size:11px;font-weight:800;letter-spacing:.25em;color:var(--tt-ink);margin-bottom:4px;}
.tt-share a{width:30px;height:30px;border-radius:50%;background:var(--tt-ink);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.tt-pick{position:absolute;right:0;top:44px;z-index:3;width:210px;background:rgba(255,255,255,.95);border-radius:14px 0 0 14px;padding:14px 16px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.tt-pick-t{font-weight:800;font-size:12px;letter-spacing:.2em;color:var(--tt-sky);margin-bottom:6px;}
.tt-pick a{display:block;padding:8px 0;border-top:1px solid var(--tt-line);font-size:13px;font-weight:700;color:var(--tt-ink);}
.tt-pick a:hover{color:var(--tt-sky);}
.tt-sec{padding:56px 20px 0;}
/* 見出し */
.tt-h{margin:0 0 22px;padding:0;border:0;background:none;display:flex;align-items:baseline;gap:16px;}
.tt-h span{font-size:34px;font-weight:800;letter-spacing:.08em;color:var(--tt-ink);line-height:1;}
.tt-h span:after{content:"";display:block;width:100%;height:4px;margin-top:8px;background:repeating-linear-gradient(135deg,var(--tt-sky) 0 6px,transparent 6px 10px);}
.tt-h small{font-size:13px;color:#6b7686;letter-spacing:.1em;}
/* バナー */
.tt-banners{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.tt-ban{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:1200/630;background:#eef1f5;box-shadow:0 2px 10px rgba(20,28,40,.12);transition:transform .2s,box-shadow .2s;}
.tt-ban img{width:100%;height:100%;object-fit:cover;display:block;}
.tt-ban:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(20,28,40,.2);}
.tt-ban-t{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;font-size:15px;font-weight:700;line-height:1.4;background:linear-gradient(0deg,rgba(10,16,30,.78),rgba(10,16,30,0));}
/* NEWS */
.tt-news{list-style:none;margin:0;padding:0;border-top:1px solid var(--tt-line);}
.tt-news li{margin:0;padding:0;border-bottom:1px solid var(--tt-line);}
.tt-news a{display:flex;align-items:center;gap:16px;padding:16px 8px;color:var(--tt-ink);}
.tt-news a:hover{background:#f4f9fc;}
.tt-news time{flex:0 0 92px;font-size:14px;color:#6b7686;font-weight:600;letter-spacing:.04em;}
.tt-chip{flex:0 0 auto;min-width:96px;text-align:center;font-size:12px;font-weight:700;color:#fff;background:var(--tt-sky);padding:3px 10px;border-radius:3px;}
.tt-title{font-size:15px;font-weight:600;line-height:1.5;}
.tt-more{text-align:right;margin-top:14px;}
.tt-more a{display:inline-block;padding:9px 34px;border:2px solid var(--tt-ink);color:var(--tt-ink);font-weight:800;font-size:14px;letter-spacing:.12em;border-radius:30px;}
.tt-more a:hover{background:var(--tt-ink);color:#fff;}
/* RECOMMEND */
.tt-rec{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.tt-tile{display:block;padding:26px 22px;border-radius:8px;color:#fff;position:relative;overflow:hidden;min-height:112px;transition:transform .2s;}
.tt-tile:hover{transform:translateY(-3px);}
.tt-tile b{display:block;font-size:18px;letter-spacing:.04em;}
.tt-tile span{display:block;margin-top:6px;font-size:13px;opacity:.92;}
.tt-tile:after{content:"›";position:absolute;right:18px;bottom:10px;font-size:34px;opacity:.7;}
.tt-tile.c1{background:#e9573f}.tt-tile.c2{background:#1d9a8a}.tt-tile.c3{background:#3b6ea8}.tt-tile.c4{background:#d98b1c}.tt-tile.c5{background:#4a5568}.tt-tile.c6{background:#8a5a9c}
/* OFFICIAL */
.tt-offl{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:64px;}
.tt-offl a{padding:12px 24px;border:1px solid var(--tt-line);border-radius:30px;color:var(--tt-ink);font-weight:700;font-size:14px;background:#fff;}
.tt-offl a:hover{border-color:var(--tt-sky);color:var(--tt-sky);}
@media screen and (max-width:834px){
  .tt-banners,.tt-rec{grid-template-columns:1fr;}
  .tt-pick,.tt-share{display:none;}
  .tt-copy{left:24px;right:24px;}
  .tt-news a{flex-wrap:wrap;gap:6px 10px;}
  .tt-news time{flex:0 0 auto;}
  .tt-title{flex:1 0 100%;}
  .tt-h span{font-size:26px;}
}
.home.page .toc,.home.page #toc{display:none!important;}
.tt-top h2.tt-h{margin:0 0 22px!important;padding:0!important;border:0!important;background:none!important;display:flex!important;align-items:baseline;gap:16px;border-radius:0!important;}
.tt-top h2.tt-h:before,.tt-top h2.tt-h:after{display:none!important;}
.tt-top h2.tt-h span{display:inline-block;}
.tt-copy{max-width:820px!important;}
.tt-catch{letter-spacing:.1em!important;}
.tt-top h2.tt-h small{margin-left:14px;display:inline-block;}
.tt-top h2.tt-h{flex-direction:column;align-items:flex-start!important;gap:6px!important;}.tt-top h2.tt-h small{margin-left:0!important;font-size:13px!important;font-weight:500;color:#6b7686;letter-spacing:.1em;}

/* ===== 整列の修正 2026-10-30: ロゴ・ナビの左端を、本文の枠(1256px)にそろえる ===== */
@media screen and (min-width:1024px){
  #header-container .header-in{max-width:1256px;padding-left:0;padding-right:0;}
  #header-container .logo-header a{padding:0!important;}
  #header-container .tagline{padding:0;}
  #navi .navi-in>ul{max-width:1256px;padding:0;}
  #navi .navi-in>ul>li:first-child>a .caption-wrap{padding-left:0;}
  #navi .navi-in>ul>li:first-child>a:hover,#navi .navi-in>ul>li:first-child.current-menu-item>a{background:transparent;}
}

/* ===== 矢印の二重表示を解消 2026-10-30: 自作の矢印をやめて、テーマの矢印(fa-angle-down)を整える ===== */
@media screen and (min-width:1024px){
  #navi .navi-in>ul>li.menu-item-has-children>a .item-label:after{content:none;display:none;}
  #navi .navi-in>ul>li>a{position:relative;}
  #navi .navi-in>ul>li.menu-item-has-children>a .caption-wrap{padding-right:30px;}
  #navi .navi-in>ul>li>a .top-has-sub{position:absolute;right:11px;top:50%;margin:-8px 0 0;width:auto;height:16px;line-height:16px;font-size:12px;color:#aeb7c4;}
  #navi .navi-in>ul>li>a:hover .top-has-sub,#navi .navi-in>ul>li:hover>a .top-has-sub{color:#fff;}
}

/* ===== 運営表示 2026-10-30: フッターに運営組織を表示 ===== */

/* 運営表示(リンク) 2026-10-30 */
.hcn-op{display:block;margin-top:4px;font-size:.92em;letter-spacing:.06em}
.hcn-op a{text-decoration:underline}
