@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.2.3 (LCP-friendly: no always-on will-change / FA icon fallback / safe content-visibility)
*/

/* =========================================================
   0) Critical: Above-the-fold（最小セット）
   ========================================================= */

/* 画像は属性の比率で先取り（attr()は使わない）→ LCP影響小 */
:is(.entry-content, .wp-block-image) img{
  height: auto; /* display:block は下のグローバルimgで付与済み */
}

/* ヘッダーロゴ（LCP対象になりにくい・影響小） */
.header .site-logo img{
  height: auto; /* display:block はグローバルimgで付与済み */
}

/* 埋め込み16:9（一般にLCP対象外が多いので維持） */
.embed-responsive{ position: relative; width: 100%; aspect-ratio: 16 / 9; }
.embed-responsive iframe{ position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================
   1) Base / Reset-ish（必要最小限）
   ========================================================= */

:root{
  --brand:#003366;
  --accent:#FDD835;
  --muted:#b5b5b5;
  --ink:#333;
  --shadow-sm:0 5px 15px -5px rgba(0,0,0,.16);
  --shadow-md:0 10px 20px -6px rgba(0,0,0,.20);
}

*,
*::before,
*::after{ box-sizing: border-box; }

img{ border-style:none; max-width:100%; height:auto; display:block; }
figure{ margin:0; }

/* =========================================================
   2) Buttons（transformで動かす）— will-change常時指定は撤去
   ========================================================= */
.btn{
  box-shadow: 0 7px 0 #808080;
  transition: transform .4s ease, box-shadow .4s ease;
}
.btn:hover{
  box-shadow: 0 1px 0 #808080;
  transform: translateY(6px);
}

/* =========================================================
   3) Global / Nav
   ========================================================= */
nav#navi,
.menu-header .sub-menu{
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.menu-header .item-label{ color: var(--muted) !important; }
.menu-header .sub-menu .item-label{ font-size: 80%; }

.menu-header .current-menu-item > a .item-label,
.menu-header .current-post-item > a .item-label,
.menu-header .current-menu-ancestor > a .item-label,
.menu-header .current-post-ancestor > a .item-label,
.menu-header .item-label:hover{
  color: var(--ink) !important;
  box-shadow: inset 0 -3px 0 0 var(--accent);
  transition: box-shadow .2s ease, color .2s ease;
}
.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{ box-shadow: none; }

/* =========================================================
   4) Entry cards
   ========================================================= */
a.entry-card-wrap figure.entry-card-thumb{
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin-bottom: .5em;
}
a.entry-card-wrap figure.entry-card-thumb .cat-label{ line-height: 1.7; }

/* will-change: transform; を撤去（初期コスト回避） */
a.entry-card-wrap:hover img.entry-card-thumb-image{
  filter: blur(3px) brightness(60%);
  transform: scale(1.03);
  opacity: 1;
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}

a.entry-card-wrap figure.entry-card-thumb::before{
  z-index: 1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 700;
  content: "READ MORE";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%; height: 100%;
  color: #fff;
  top: 0; left: 0;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .25s ease, transform .25s ease;
}
a.entry-card-wrap:hover figure.entry-card-thumb::before{
  opacity: .9;
  transform: scale(1);
}

.entry-card-snippet{
  font-size: 72%;
  line-height: 1.6;
  color: gray;
  text-align: justify;
  text-justify: inter-ideograph;
}

.entry-card-wrap{
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  margin-bottom: 1em !important;
  background: #fff;
  border-radius: 4px;
}
.entry-card-wrap:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  background:#fff;
}

/* =========================================================
   5) TOC icon — FontAwesome依存を避けてフォールバック
   ========================================================= */
.toc .toc-title::before{
  content:'📄';
  margin-right:.5em;
  font-family: inherit;
  font-size: 0.95em;
  line-height: 1;
}

/* =========================================================
   6) Author box
   ========================================================= */
.author-box{ border:none !important; padding:0 !important; }
.pwa .author-box{ text-align:left; }

.author-box .author-widget-name{
  color:#666;
  background:#eaedf2;
  display:inline-block;
  margin:0 auto 3px 1rem;
  padding:.4em;
  border-radius:4px;
  font-weight:700;
  position:relative;
  z-index:2;
  font-size:.9em;
}
.author-box .author-widget-name::before{
  content:'';
  position:absolute;
  left:20%; bottom:-15px;
  width:0; height:0;
  border-right:15px solid transparent;
  border-top:15px solid #eaedf2;
  border-left:15px solid transparent;
  z-index:1;
}

.author-box .author-content{
  margin-left:0 !important;
  margin-top:5.5em !important;
}
.author-box .author-content .author-name{
  text-align:center;
  font-size:1.3rem;
}
.author-box .author-content .author-name a{
  color:#14171a; text-decoration:none;
}
.author-box .author-content .author-name a:hover{
  color:#14171a; text-decoration:underline;
}
.author-box .author-content .author-description p{
  margin:.5em auto;
  line-height:1.5 !important;
  max-width:500px;
  font-size:90%;
  text-align:left;
}
.author-box .author-content .author-description p a{ text-decoration:none; }
.author-box .author-content .author-description p a:hover{ text-decoration:underline; }

.author-box .author-content .author-follows .sns-buttons{ justify-content:center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
  border-radius:50%; border:none; width:40px; height:40px; color:#fff;
  margin:0 .5em .5em 0; box-shadow:0 2px 5px 0 rgba(0,0,0,.2);
}
.author-box .bc-brand-color.sns-follow .website-button{ background:#6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background:#7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background:#7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background:#2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background:#dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg,#427eff 0%,#f13f79 80%) !important; }
.author-box .bc-brand-color.sns-follow .youtube-button{ background:#cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background:#111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background:#bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background:#00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background:#ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background:#4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background:#2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background:#f26522 !important; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height:40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size:20px !important; }

main .author-box{
  max-width:400px;
  margin:0 auto;
  font-size:80%;
}

/* =========================================================
   7) Mobile menu (≤480px)
   ========================================================= */
@media (max-width:480px){
  ul.menu-mobile{
    overflow-x:auto;
    overflow-y:hidden;
    display:flex !important;
    flex-wrap:nowrap;
    font-size:14px;
    justify-content:flex-start;
    padding:0 1em;
    -webkit-overflow-scrolling:touch;
    position:relative;
    gap: 0;
  }
  ul.menu-mobile > li{ padding-right:1em; white-space:nowrap; }
  ul.menu-mobile .item-label{ white-space:nowrap; font-size:14px; }
}

/* =========================================================
   8) Images / Gallery
   ========================================================= */

.wp-caption-text.gallery-caption{ display:none !important; }
.gallery-item{ margin:0 !important; }
.gallery-icon{ margin:1px !important; padding:0 !important; }
.gallery-icon img{ border:none !important; }

/* =========================================================
   9) Search
   ========================================================= */
.search-box{ margin:1em; }
.search-edit{ height:40px; border-radius:40px; }
.search-submit{ line-height:0; top:0; bottom:0; }
.search-edit:focus{ outline:none; border-color:navy; }

/* =========================================================
   10) Widget titles — FontAwesome依存をやめる（絵文字フォールバック）
   ========================================================= */
.widget h3::before{
  font-size:80%;
  vertical-align:middle;
  font-weight:normal;
  margin-right:5px;
  font-family: inherit;
}

/* 旧: FontAwesomeコードポイント → 近い意味の絵文字に置換 */
.widget_links h3::before{ content:'🔗'; }
.widget_popular_entries h3::before{ content:'🚀'; }
.widget_new_entries h3::before,
.widget_recent_entries h3::before{ content:'⭐'; }
.widget_categories h3::before{ content:'📂'; }
.widget_rss h3::before{ content:'📡'; }
.widget_rss h3 img{ display:none; }
.widget_tag_cloud h3::before{ content:'🏷️'; }
.widget_search h3::before{ content:'🔎'; }
.widget_meta h3::before{ content:'⚙️'; }
.widget_fb_like_box h3::before,
.widget_facebook_page_like h3::before{ content:'👍'; }
.widget_item_ranking h3::before{ content:'🏆'; }
.widget_calendar h3::before{ content:'📅'; }
.widget_recent_comments h3::before{ content:'💬'; }

/* =========================================================
   11) Blogcard
   ========================================================= */
.blogcard{
  padding:1rem;
  color:var(--ink);
  position:relative;
  border:1px solid #68d6cb;
  box-shadow:0 0 4px -1px rgba(0,0,0,1);
  background:#fff;
}
a.blogcard-wrap{ font-weight:normal; }
a.blogcard-wrap:hover{ background:transparent !important; opacity:.86; }
a.blogcard-wrap:hover img.blogcard-thumb-image{
  transform:scale(1.05);
  transition: transform .3s ease;
}

.blogcard-thumbnail{
  line-height:0;
  margin-right:1rem;
  overflow:hidden;
  width:22%;
}
.blogcard-title{
  margin-bottom:.5rem;
  line-height:1.7;
}
.blogcard-title::before{
  content:'関連記事';
  display:inline-block;
  font-size:.7em;
  background:#333;
  padding:.3em .5em;
  font-weight:700;
  color:#fff;
  border-radius:2px;
  vertical-align:middle;
  margin-right:.5rem;
}
.blogcard-snipet{ display:none; }
.blogcard-snippet{ display:none; }
@media (max-width:480px){
  .blogcard-thumbnail{ width:40%; }
}

/* 内部カードの装飾 */
.internal-blogcard-footer{ display:none; }
.internal-blogcard-site{ display:none; }
.blogcard-date{
  float:none;
  font-family: Arial, sans-serif;
  font-weight:700;
  color:#999;
}
.blogcard::before{
  content:'あわせて読みたい';
  position:absolute;
  top:-.8rem;
  left:auto;
  font-size:50%;
  background:#68d6cb;
  padding:.6em 1em;
  font-weight:700;
  color:#fff;
  border-radius:2px;
}
.internal-blogcard::after{
  content:'続きを読む \00bb';
  position:absolute;
  bottom:.5rem; right:1rem;
  font-size:70%;
  background:#ffd242;
  padding:.4em 3em;
  font-weight:700;
  color:#fff;
  border-radius:2px;
}

/* =========================================================
   12) Titles
   ========================================================= */
.entry-card-title{ font-size:18px; }
.related-entry-card-title{ font-weight:700; font-size:18px !important; }

/* =========================================================
   13) Pagination
   ========================================================= */
.pagination-next,
.pager-prev-next{
  margin-top:38px;
  border:2px solid var(--brand);
  border-radius:6px;
  background:#fff;
  box-shadow:3px 3px 2px 0 rgba(0,0,0,.3);
}
.pagination-next-link{
  font-size:20px;
  letter-spacing:10px;
  font-weight:700;
  color:var(--brand);
  padding:6px;
  transition: color .3s ease, background .3s ease;
  border:none;
}
.pagination-next-link:hover{
  color:#fff;
  background:var(--brand);
}

.page-numbers{
  background:#fff;
  border:2px solid var(--brand);
  border-radius:24px;
  font-size:16px;
  font-style:oblique;
  color:var(--brand);
  font-weight:700;
  box-shadow:3px 3px 2px 0 rgba(0,0,0,.3);
  transition: color .3s ease, background .3s ease, border-color .3s ease;
  font-family:Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif;
}
@media (max-width:1030px){
  .page-numbers{ font-size:18px; line-height:44px; }
}
.pagination a.page-numbers:hover{
  background:var(--brand) !important;
  color:#fff !important;
}
.pagination .current{
  background:var(--brand);
  border:2px solid var(--brand);
  border-radius:24px;
  font-size:16px;
  font-style:oblique;
  color:#fff;
  font-weight:700;
  box-shadow:3px 3px 2px 0 rgba(0,0,0,.3);
}
.page-numbers.dots{
  background:transparent;
  border:none;
  color:var(--brand);
  font-size:28px;
  font-weight:900;
  font-style:normal;
  box-shadow:none;
  opacity:1;
}
@media (max-width:1030px){
  .page-numbers.dots{ line-height:36px; }
}

/* =========================================================
   14) Ads / Related placeholders（表示のゆれ抑止）
   ========================================================= */
.ad-slot-rect{ width:336px; max-width:100%; min-height:280px; margin:1em auto; }
@media (max-width:480px){ .ad-slot-rect{ min-height:250px; } }
.related-entries, .related-posts{ min-height:420px; }

/* =========================================================
   15) Offscreen heavy sections
   ========================================================= */
/* ATFに入りやすいサイドバーは除外する（LCPの切替/ブレを避ける） */
.related-entries,
.related-posts,
.comments-area{
  content-visibility: auto;
  contain: layout paint;
  contain-intrinsic-size: 1px 1000px; /* 横幅の仮サイズを最小にして膨張防止 */
}
/* 必要なら以下を有効化（サイドバーがATF外のサイトのみ推奨）
.widget-area{
  content-visibility: auto;
  contain: layout paint;
  contain-intrinsic-size: 1px 1000px;
}
*/

/* 利用者の好みに配慮：大きな動きを抑制 */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* =========================================================
   16) Misc
   ========================================================= */
.cat-item.cat-item-1,
.cat-item-17{ display:none; }

/* =========================================================
   17) Responsive skeleton
   ========================================================= */
@media (max-width:1023px){ }
@media (max-width:834px){ }
@media (max-width:480px){ }

/* =========================================================
   18) Utilities: aspect-ratio helpers
   ========================================================= */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }

.ratio-16-9 img,
.ratio-3-2 img,
.ratio-1-1 img { display:block; height:auto; max-width:100%; }