/* ============================================================
   記事・一覧ページ（Cocoon の型）を新デザインに寄せる（PRJ-364・2026-10-24）
   色と器は chrome.css の :root（--or・--ink・--w・--pad ほか）を使う
   薄い強調色の地・片側だけの色線は使わない（白地＋影／ベタ塗り／線だけ）
   ============================================================ */

/* ---------- 地と器 ---------- */
body:not(.hibana-shell){background:#fff; color:var(--ink2); font-family:var(--jp); letter-spacing:.03em; -webkit-font-smoothing:antialiased}
body:not(.hibana-shell) .container,body:not(.hibana-shell) .content{background:transparent; margin:0}
.archive .content,.blog .content,.search .content{background:var(--cream)}
.content-in.wrap{display:block; width:100%; max-width:var(--w); margin-inline:auto; padding:clamp(40px,6vw,72px) var(--pad) var(--gap)}
.content .main{float:none; width:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent}
.single .content .main{max-width:800px; margin-inline:auto}
.single .content-in.wrap{padding-top:clamp(20px,3vw,32px)}

/* ---------- 現在地（パンくず） ---------- */
div.breadcrumb.wrap{width:auto; max-width:var(--w); margin:0 auto; padding:clamp(24px,3.4vw,40px) var(--pad) 0; background:transparent; font-size:13px; line-height:1.7; color:var(--sub)}
.breadcrumb a{color:var(--sub); text-decoration:none} .breadcrumb a:hover{color:var(--or-d)}
.breadcrumb .fa{color:#B9AE9E}
.single div.breadcrumb.wrap{max-width:calc(800px + var(--pad) * 2)}  /* Cocoon の .breadcrumb.sbp-main-before.wrap に勝つよう要素名と2つの印で指定 */

/* ---------- 一覧の見出し ---------- */
.hb-archive-head{margin:0 0 clamp(32px,4vw,48px)}
.hb-archive-head .archive-title{font-size:clamp(30px,3.6vw,46px); font-weight:900; line-height:1.4; margin-bottom:14px}
.hb-archive-desc{max-width:760px; font-size:clamp(15px,1.25vw,16.5px); line-height:2.05; color:var(--ink2)}
.hb-archive-desc p{margin:0}
.hb-archive-head .archive-title .fa{display:none}
.hb-archive-head .search-box{margin-top:20px; max-width:520px}

/* ---------- 記事のカード（一覧・関連記事） ---------- */
#list.ect-vertical-card,.related-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin:0}
#list .entry-card-wrap,.related-list .related-entry-card-wrap{display:flex; flex-direction:column; width:auto; margin:0; padding:0; background:#fff; border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease}
#list .entry-card-wrap:hover,.related-list .related-entry-card-wrap:hover{background:#fff; transform:translateY(-4px); box-shadow:var(--sh-h)}
#list .entry-card,.related-entry-card{display:flex; flex-direction:column; height:100%; margin:0; padding:0}
#list .entry-card-thumb,.related-entry-card-thumb{position:relative; float:none; width:100%; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--cream)}
#list .entry-card-thumb img,.related-entry-card-thumb img{width:100%; height:100%; object-fit:cover}
#list .entry-card-content,.related-entry-card-content{margin:0; padding:18px 22px 20px; display:flex; flex-direction:column; flex:1}
#list .entry-card-title,.related-entry-card-title{margin:0 0 12px; font-family:var(--disp); font-size:16.5px; font-weight:700; line-height:1.7; color:var(--ink); word-break:auto-phrase}
#list .entry-card-meta,.related-entry-card-meta{position:static; margin-top:auto; text-align:left; font-family:var(--en); font-size:13px; letter-spacing:.06em; color:var(--sub)}
#list .entry-card-meta .fa,.related-entry-card-meta .fa{display:none}
#list .e-card-info,.related-entry-card-meta .e-card-info{display:block; text-align:left}
#list .e-card-info>*,.related-entry-card-meta .e-card-info>*{float:none; margin:0}
.cat-label{position:absolute; top:12px; left:12px; right:auto; padding:2px 12px; border:1px solid #CFC6B8; border-radius:100px; background:#fff; color:var(--or-d); font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1.6; opacity:1}
.pagination-next{display:none}
.pagination{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:clamp(36px,4vw,52px) 0 0}
.pagination .page-numbers{float:none; display:grid; place-items:center; width:46px; height:46px; margin:0; padding:0; border:1px solid var(--ln); border-radius:50%; background:#fff; color:var(--ink); font-family:var(--en); font-size:15px; font-weight:700; text-decoration:none}
.pagination .page-numbers.current{background:var(--ink); border-color:var(--ink); color:#fff}
.pagination .page-numbers.dots{border:0; background:transparent}
.pagination a.page-numbers:hover{border-color:var(--ink)}

/* ---------- 記事 ---------- */
.article{margin:0}
.article .entry-title{margin:0 0 24px; padding:0; font-family:var(--disp); font-size:clamp(25px,2.8vw,34px); font-weight:900; line-height:1.55; letter-spacing:.02em; color:var(--ink); word-break:auto-phrase}
.article .eye-catch-wrap{margin:0 0 18px}
.article .eye-catch{margin:0; position:relative}
.article .eye-catch img{width:100%; border-radius:var(--r)}
.article .sns-share.ss-top{display:none}
.article .date-tags{margin:0 0 28px; text-align:left; font-family:var(--en); font-size:13px; letter-spacing:.06em; color:var(--sub)}
.article .entry-content{margin:0; font-size:16px; line-height:2.05; color:var(--ink2)}
.article .entry-content p{margin:0 0 1.6em}
.article .entry-content a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--or); text-decoration-thickness:2px; text-underline-offset:4px}
.article .entry-content a:hover{color:var(--or-d)}
.article .entry-content h2{margin:2.6em 0 1.1em; padding:0 0 12px; border:0; border-bottom:2px solid var(--ink); border-radius:0; background:none; font-family:var(--disp); font-size:clamp(21px,2vw,25px); font-weight:700; line-height:1.6; letter-spacing:.02em; color:var(--ink); text-align:left}
.article .entry-content h3{margin:2.2em 0 .9em; padding:0; border:0; background:none; font-family:var(--disp); font-size:clamp(18px,1.6vw,20px); font-weight:700; line-height:1.7; color:var(--ink)}
.article .entry-content h4,.article .entry-content h5,.article .entry-content h6{margin:1.8em 0 .7em; padding:0; border:0; background:none; font-size:17px; font-weight:700; line-height:1.8; color:var(--ink)}
.article .entry-content h2::before,.article .entry-content h2::after,.article .entry-content h3::before,.article .entry-content h3::after{content:none}
.article .entry-content ul,.article .entry-content ol{margin:0 0 1.6em; padding-left:1.4em}
.article .entry-content li{margin:0 0 .4em; line-height:1.95}
.article .entry-content img{border-radius:12px}
.article .entry-content hr,.article .entry-content .wp-block-separator{margin:2.4em 0; border:0; border-top:1px solid var(--ln); background:none}

/* 目次（Cocoon） */
.article .toc{display:block; width:auto; margin:2.2em 0; padding:22px 26px; border:1px solid var(--ln); border-radius:14px; background:#fff; box-shadow:var(--sh); font-size:14.5px; line-height:1.85}
.article .toc-title{display:block; margin:0 0 10px; font-family:var(--disp); font-size:16px; font-weight:700; color:var(--ink); text-align:left}
.article .toc-content a{color:var(--ink2); text-decoration:none} .article .toc-content a:hover{color:var(--or-d)}
.article .toc-list{margin:0; padding-left:1.4em}

/* ---------- 今までの記事の飾り（TCD のころの書き方。本文はそのまま、見た目だけ新デザインに） ---------- */
/* 見出し（TCD の styled_h2：左の太い線）→ 新デザインの記事の見出しと同じ形 */
.article .entry-content h2.styled_h2{text-align:left; font-size:clamp(21px,2vw,25px); padding:0 0 12px; border:0; border-bottom:2px solid var(--ink)}
/* 下線（TCD の q_underline q_underline3：画面に入ると伸びるオレンジの帯）→ いつも見えるオレンジの帯 */
.q_underline{font-weight:700; background-image:linear-gradient(var(--or),var(--or)); background-repeat:no-repeat; background-size:100% .32em; background-position:0 94%; -webkit-box-decoration-break:clone; box-decoration-break:clone}
/* ボタン（TCD の q_custom_button1：オレンジの丸いボタン）→ 新デザインの主ボタン（D 線のボタン・2026-10-24） */
.q_button_wrap{margin:2.4em 0; text-align:center}
.article .entry-content a.q_custom_button{display:inline-flex; align-items:center; justify-content:center; gap:14px; max-width:100%; min-height:56px; padding:0 34px; border:0; border-radius:100px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); font-size:16px; font-weight:700; letter-spacing:.04em; line-height:1.5; text-decoration:none; transition:transform .25s ease, background-color .25s ease}
.article .entry-content a.q_custom_button::after{content:"→"; font-family:var(--en); color:var(--or-d); transition:transform .25s ease}
.article .entry-content a.q_custom_button:hover{background:var(--or); color:#fff; box-shadow:inset 0 0 0 1.5px var(--or); transform:translateY(-2px)}  /* 載せるとオレンジ地に白い文字（2026-10-24） */
.article .entry-content a.q_custom_button:hover::after{color:#fff}
.article .entry-content a.q_custom_button:hover::after{transform:translateX(4px)}

/* ---------- 記事の下（カテゴリ・タグ・シェア・関連記事・前後の記事） ---------- */
.article .entry-footer{margin-top:clamp(36px,4vw,48px)}
.entry-categories-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px}
.entry-categories,.entry-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.entry-categories-tags .cat-link,.entry-categories-tags .tag-link{display:inline-block; margin:0; padding:3px 14px; border:1px solid #CFC6B8; border-radius:100px; background:#fff; color:var(--ink2); font-size:13px; font-weight:700; line-height:1.7; text-decoration:none}
.entry-categories-tags .cat-link{color:var(--or-d)}
.entry-categories-tags .cat-link .fa,.entry-categories-tags .tag-link .fa{display:none}
.sns-share.ss-bottom{margin:0 0 12px}
.sns-share-message{margin-bottom:10px; font-family:var(--en); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--sub); text-align:left}
.sns-share.bc-brand-color .sns-buttons{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px}
.sns-share.bc-brand-color .sns-buttons a.sns-button{flex:none; width:auto; min-width:0; height:40px; margin:0; padding:0 16px; border:1px solid var(--ln); border-radius:100px; background:#fff; box-shadow:none; color:var(--ink); font-size:13px; line-height:38px}
.sns-share.bc-brand-color .sns-buttons a.sns-button:hover{border-color:var(--ink); opacity:1}
.sns-share .pinterest-button,.sns-follow,.article .footer-meta,.author-box{display:none}
.under-entry-content{margin-top:clamp(48px,6vw,72px)}
.related-entries{margin:0}
.related-entry-heading{margin:0 0 20px; padding:0; border:0; background:none; font-family:var(--disp); font-size:clamp(20px,1.8vw,23px); font-weight:700; color:var(--ink)}
.related-entry-heading::before,.related-entry-heading::after{content:none}
.related-entry-card-snippet{display:none}
.pager-post-navi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:clamp(36px,4vw,48px) 0 0}
.pager-post-navi a{display:flex; align-items:center; gap:12px; width:auto; margin:0; padding:16px 20px; border:1px solid var(--ln); border-radius:14px; background:#fff; color:var(--ink); font-size:14px; line-height:1.7; text-decoration:none}
.pager-post-navi a:hover{border-color:var(--ink); background:#fff}
.pager-post-navi a.next-post{grid-column:2; justify-content:flex-end; text-align:right}
.pager-post-navi .iconfont{color:var(--or)}
.pager-post-navi figure{display:none}

/* ---------- 画面幅ごとの組み替え ---------- */
@media (max-width:900px){
  #list.ect-vertical-card,.related-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  #list.ect-vertical-card,.related-list{grid-template-columns:minmax(0,1fr)}
  .pager-post-navi{grid-template-columns:minmax(0,1fr)}
  .pager-post-navi a.next-post{grid-column:auto}
  .article .toc{padding:18px 20px}
  .article .entry-content a.q_custom_button{width:100%; padding:0 24px}
}

/* ---------- 題名・見出しは文節の切れ目だけで折る（2026-10-24） ---------- */
/* inc/phrase.php が文節の切れ目に <wbr> を入れる。Safari は auto-phrase が効かず「ホームページをリニ／ューアルしました」と語の途中で折れたため */
:is(.article .entry-title,.entry-card-title,.related-entry-card-title,.article .entry-content :is(h2,h3,h4),.cta h2):has(wbr){word-break:keep-all; overflow-wrap:anywhere; line-break:strict}
/* 行の長さをそろえる指定は Chrome だけ（Safari は全行を短くそろえ、題名の右に大きな空きが出た） */
@supports (word-break:auto-phrase){ .article .entry-title{text-wrap:balance} }
/* 記事の本文は行頭禁則を厳しめに（Safari の既定は小さい「ュ」「っ」などを行の頭に置く） */
.article .entry-content{line-break:strict}