@charset "utf-8";
:root{
  /* Layout */
  --content-max: 760px;           /* 本文最大幅（画像幅710px＋余白想定） */
  --content-pad: 20px;            /* コンテンツ左右余白 */
  --radius: 10px;                 /* 標準角丸 */
  --radius-sm: 7px;
  --radius-xs: 5px;
  --gap: 18px;                    /* セクション間基本余白 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.05);

  /* Color */
  --bg: #ffffff;
  --fg: #222;
  --muted: #6a7180;
  --border: #e6e8ec;
  --link: #1177cc;
  --link-visited: #7a4bd1;
  --key-color: #65c2e9;           /* 記事内カードのラベル等で使用 */
  --accent: #f7931e;              /* 見出しボックス等のアクセント */
  --accent-2: #4ba0d8;            /* 代替アクセント */
  --tone-cream: #fff9e5;          /* 黄色系ボックスの背景 */
  --tone-green: #eaf9ea;          /* 緑系ボックスの背景 */
  --tone-red: #fff4f4;            /* 赤系ボックスの背景 */
  --tone-blue: #f2fafc;           /* 薄い青系背景 */
  --tone-gray: #f6f7f8;           /* TOC背景など */
  --highlight-yellow: #fff59d;    /* 強調マーカー（黄） */
  --highlight-green: #dff5e8;     /* 強調マーカー（緑） */
  --star-on: #f0b400;             /* 星評価の塗り色 */
  --star-off: #d8dbe2;

  /* Typography */
  --fs-body: 16px;
  --lh-body: 1.9;
  --fs-small: 14px;
  --fs-h1: clamp(1.85rem, 1.35rem + 1.6vw, 2.4rem);
  --fs-h2: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-h4: 1.05rem;
}

@media (min-width: 960px){
  :root{ --content-pad: 24px; }
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0e1013;
    --fg: #e9eef3;
    --muted: #a8b0ba;
    --border: #2a2f36;
    --tone-cream: #3a341f;
    --tone-green: #1b2a22;
    --tone-red: #3a2020;
    --tone-blue: #13232b;
    --tone-gray: #151a1f;
    --link: #6db6ff;
    --link-visited: #b49cff;
    --star-off: #3a3f48;
  }
}

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

html{ -webkit-text-size-adjust: 100%; }

main{
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 28px var(--content-pad) 64px;
}

img,svg,video{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

figure{ margin: 1.2em 0; }
figcaption{ color: var(--muted); font-size: .9em; margin-top: .4em; }

hr{ border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Utility */
.list-unstyled{ list-style: none; margin: 0; padding: 0; }
.aligncenter{ text-align: center; }
.has-text-align-center{ text-align: center; }
.has-text-align-right{ text-align: right; }
.has-small-font-size{ font-size: var(--fs-small); }
.color{ color: var(--accent); }
.has-inline-color.has-red-color{ color: #ff4949; }
.wp-block-spacer{ display: block; width: 100%; }
.post-page-numbers{ text-decoration: none; }
.pc, .tab, .mobile{ display: none; }

@media (min-width: 1025px){ .pc{ display:block } }
@media (min-width: 641px) and (max-width:1024px){ .tab{ display:block } }
@media (max-width: 640px){ .mobile{ display:block } }

/* -----------------------------
   Article Container
----------------------------- */
.articleContainer{ }
.articleHeader{
  margin-bottom: 20px;
}
.breadcrumbs{
  display: flex; flex-wrap: wrap; gap: .4em .6em;
  font-size: .9em; color: var(--muted);
  margin-bottom: 8px;
}
.breadcrumbs li{ display: inline-flex; align-items: center; gap: .4em; }
.breadcrumbs li+li::before{ content: "›"; color: var(--muted); margin: 0 .3em; }

.articleHeader__title{
  font-size: var(--fs-h1);
  line-height: 1.4;
  margin: .2em 0 .5em;
  font-weight: 800;
  letter-spacing: .01em;
}

.articleHeader__info{
  display:flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--muted); font-size: .92rem;
  margin-bottom: 12px;
}
.article-meta{ display:flex; gap: 12px; align-items: center; }
.article-date i{ margin-right: .4em; opacity: .8 }
.modified-date{ white-space: nowrap; }

.articleHeader__sns{
  margin-left: auto;
}
.snsShare{ }
.snsShare__body{ }
.snsShare__copy{ margin: 0 0 6px; font-weight: 700; color: var(--muted); }
.snsList{ display:flex; gap: 8px; }
.btn{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4em; border:1px solid var(--border); background:#fff0; color:var(--fg); padding:.45em .6em; border-radius: 8px; box-shadow: var(--shadow-sm); text-decoration: none; }
.btn:hover{ transform: translateY(-1px); }
.btn__sns{ width: 38px; height: 38px; border-radius: 9px; }
.btn__sns.x-twitter{ background: #111; color:#fff; }
.btn__sns.facebook{ background: #3b5998; color:#fff; }
.btn__sns.line{ background: #06c755; color:#fff; }
.btn__sns.copy{ background: #f1f3f5; color:#333; }

/* simple icon fallbacks */
.icon-x-twitter::before{ content:"X"; font-weight:700; }
.icon-facebook::before{ content:"f"; font-weight:700; }
.icon-line::before{ content:"LINE"; font-weight:700; font-size:.75em }
.icon-paste::before{ content:"⧉"; }

.post-thumbnail{ margin: 16px 0 8px; }
.post-thumbnail img{ width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* -----------------------------
   Article Body
----------------------------- */
.articleBody{
  font-size: 1rem;
}
.articleBody > p{ margin: 1em 0; }
.articleBody strong{ font-weight: 800; }
.articleBody h2{
  font-size: var(--fs-h2);
  line-height: 1.55;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
  padding: .55em 0 .5em;
  margin: 2.2em 0 .9em;
}
.articleBody h3{
  font-size: var(--fs-h3);
  line-height: 1.55;
  margin: 1.6em 0 .6em;
  border-left: 4px solid var(--accent-2);
  padding-left: .6em;
}
.articleBody h4{
  font-size: var(--fs-h4);
  margin: 1.1em 0 .4em;
}

.keiko_yellow{ background: var(--highlight-yellow); padding: .05em .2em; border-radius: 3px; }
.keiko_green{ color: #15855c; background: var(--highlight-green); padding: .05em .2em; border-radius: 3px; }

/* table (wp-block-table) */
.wp-block-table table{
  width: 100%;
  border-collapse: collapse;
  background: var(--background-color, #fff);
  border: 1px solid var(--block-table-border-color, var(--border));
}
.wp-block-table th,
.wp-block-table td{
  padding: .65em .8em;
  border-bottom: 1px solid var(--block-table-border-color, var(--border));
  vertical-align: middle;
}
.wp-block-table thead th{
  color: var(--block-table-heading-text-color, #fff);
  background: var(--block-table-heading-background-color, #999);
}
.wp-block-table tfoot td{
  color: var(--block-table-footer-text-color, #fff);
  background: var(--block-table-footer-background-color, #999);
}
.has-border-color.has-333-border-color{ border-color: #333 !important; }

/* star rating */
.star-rating{
  --value: 0;
  --size: 1em;
  letter-spacing: .2em;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  font-family: "Apple Color Emoji","Segoe UI Symbol","Arial Unicode MS";
}
.star-rating::before{
  content: "★★★★★";
  background: linear-gradient(90deg, var(--star-on) calc(var(--value) * 20%), var(--star-off) 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.star-rating--4{ --value: 4; }
.star-rating--3-half{ --value: 3.5; }
.star-rating--2{ --value: 2; }

/* TOC */
.toc_block{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.8rem 0;
  /* background: var(--tone-gray); */
}
.toc__caption{
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 800;
  padding: .7em 1em;
  /* background: color-mix(in srgb, var(--tone-gray) 40%, var(--bg) 60%); */
}
.toc{ padding: .6em 1em 1em; }
.toc ol{ margin: 0; padding-left: 1.2em; }
.toc li{ margin: .35em 0; }
.toc_block.is-closed .toc{ display:none; }
.toc_toggle_button{ font-size:.9em; cursor:pointer; user-select:none; }
.toc_toggle_button .open{ display:none; }
.toc_block.is-closed .toc_toggle_button .open{ display:inline; }
.toc_block.is-closed .toc_toggle_button .close{ display:none; }

/* WP image center */
.wp-block-image figure.aligncenter{ margin-left:auto; margin-right:auto; }
.wp-block-image img{ border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* -----------------------------
   Title Box / Point Box etc. (.wp-block-xwrite-titlebox)
----------------------------- */
.wp-block-xwrite-titlebox.xw-block-title-box{
  --background-color: var(--background-color, #fff);
  --accent-color: var(--accent-color, var(--accent));
  --border-radius: var(--border-radius, var(--radius-sm));
  --text-color: var(--text-color, inherit);
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border) 70%);
  border-radius: var(--border-radius);
  background: var(--background-color);
  margin: 1.6rem 0;
  box-shadow: var(--shadow-sm);
}
.xw-block-title-box .xw-box-title{
  display:flex; align-items:center; gap:.6em;
  font-weight: 800;
  padding: .65em .9em;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--border) 76%);
}
.xw-block-title-box .xw-box-title .title-icon{ color: var(--accent-color); opacity: .9; }
.xw-block-title-box .xw-box-content{ padding: .9em 1em; }

/* Variants */
.xw-box-type1{ --background-color: var(--tone-cream); --accent-color: var(--accent); }
.xw-box-type3{ --background-color: var(--tone-cream); --accent-color: var(--accent); }
.xw-box-type4{ --background-color: var(--tone-blue);  --accent-color: var(--accent-2); }

/* Point list / number circle */
.is-style-number-circle{ counter-reset: item; list-style: none; padding-left: 0; }
.is-style-number-circle > li{ counter-increment: item; position: relative; padding-left: 2.2em; margin: .6em 0; }
.is-style-number-circle > li::before{
  content: counter(item);
  position: absolute; left: 0; top: .15em;
  width: 1.7em; height: 1.7em;
  border-radius: 999px;
  display: inline-grid; place-items:center;
  background: color-mix(in srgb, var(--accent-color) 18%, #fff 82%);
  color: color-mix(in srgb, var(--accent-color) 85%, #000 15%);
  font-weight: 800; font-size: .9em;
  border: 1px solid color-mix(in srgb, var(--accent-color) 50%, #000 50%, var(--border));
}

/* -----------------------------
   Decobox (good/bad/memo etc.)
----------------------------- */
.wp-block-xwrite-decobox.xw-block-decobox{
  border-radius: var(--radius-sm);
  padding: .9em 1em;
  margin: 1.2rem 0;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.xw-box-batsu{ background: var(--tone-red); }
.xw-box-maru{ background: var(--tone-green); }
.xw-memo-text{ background: #fff; }

.box-memo-explanation-orange,
.box-memo-explanation-blue{
  border-radius: var(--radius-sm);
  padding: .75em 1em .9em;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin: 1.2rem 0;
}
.box-memo-explanation-orange{ background: var(--tone-cream); }
.box-memo-explanation-blue{  background: color-mix(in srgb, var(--key-color) 12%, #fff 88%); }
.box-memo-explanation-orange-title,
.box-memo-explanation-blue-title{
  font-weight: 800;
  margin: .2em 0 .5em;
}

/* -----------------------------
   Chat Balloon (.wp-block-xwrite-fukidashi)
----------------------------- */
.wp-block-xwrite-fukidashi.xw-block-chat{
  display:flex; gap: 12px; align-items: flex-start;
  margin: 1.1rem 0;
}
.chat_icon_l .chat_icon_photo{
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.chat_name_text{ margin: .25em 0 0; font-size: .9rem; }
.chat_speech{ flex: 1; }
.chat_speech_content{
  border-radius: var(--balloon-border-radius, var(--radius-sm));
  background: var(--balloon-color, #eee);
  padding: .8em 1em;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.chat_speech_content.chat_arrow::before{
  content:""; position:absolute; left:-8px; top: 16px;
  border: 8px solid transparent; border-right-color: var(--balloon-color, #eee);
}

/* -----------------------------
   Blog Card (.wp-block-xwrite-blogcard)
----------------------------- */
.wp-block-xwrite.xw-block-blog-card{ position: relative; }
.xw-block-blog-card > a{
  display:grid; grid-template-columns: 150px 1fr; gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
}
@media (max-width: 640px){
  .xw-block-blog-card > a{ grid-template-columns: 1fr; }
}
.xw-block-blog-card__thumbs img{ width: 100%; border-radius: var(--radius-xs); }
.xw-block-blog-card__details--title{ font-weight: 800; line-height: 1.55; }
.xw-block-blog-card__details--text{ color: var(--muted); margin-top: .4em; font-size: .95em; }
.xw-block-blog-card__details--date{ display:flex; gap: 1em; color: var(--muted); font-size: .9em; margin-top: .5em; }
.xw-block-blog-card__label{
  position: absolute; top: 8px; left: 8px;
  background: var(--key-color); color: #fff; font-weight: 700;
  font-size: .75rem; padding: .15em .6em; border-radius: 6px;
}

/* -----------------------------
   Footer (share, cat/tag, related)
----------------------------- */
.articleFooter{ margin-top: 2.2rem; }
.articleFooter__sns{ margin: 1.2rem 0; }
.articleFooter__cat, .articleFooter__tag{
  display:flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: .8em 0; border-top: 1px solid var(--border);
}
.articleFooter__cat--caption,
.articleFooter__tag--caption{ font-weight: 800; color: var(--muted); }
.catList, .tagList{ display:flex; flex-wrap: wrap; gap: .5em .7em; }
.catList a, .tagList a{
  display:inline-block; padding: .2em .6em; border-radius: 999px;
  border: 1px solid var(--border); background: var(--tone-gray); text-decoration: none; color: inherit;
}
.articleFooter__relation .caption{ font-weight: 800; margin: .8em 0; }
.articleList{ display:grid; gap: 14px; }
@media (min-width: 641px){
  .articleList.pc-col2{ grid-template-columns: 1fr 1fr; }
}
.articleList__item a{
  display:grid; grid-template-columns: 140px 1fr; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; text-decoration: none; color: inherit; background: var(--bg);
}
.articleList__item img{ width: 100%; border-radius: var(--radius-xs); }
.xw-article-media__body--title{ font-weight: 800; line-height: 1.5; }

/* -----------------------------
   Pager (prev/next)
----------------------------- */
.articlePagerUnit{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.articlePager a{
  display:grid; grid-template-columns: 120px 1fr; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; text-decoration: none; color: inherit; background: var(--bg);
}
.articlePager__body--fig img{ width:100%; border-radius: var(--radius-xs); }
.articlePager__body--text{ font-weight: 700; line-height: 1.45; }

/* -----------------------------
   CTA (簡易)
----------------------------- */
.blog-cta-btn-bottom{ margin: 1.6rem 0; text-align: center; }
.button_bottom_green{
  display:inline-block; text-decoration: none; color: #fff;
  background: #18a05e; padding: .9em 1.3em; border-radius: 999px; font-weight: 800;
  box-shadow: var(--shadow-md);
}
.button_bottom_green:hover{ filter: brightness(1.05); }

.blog-cta-text-x a{ color: inherit; font-weight: 800; text-decoration: underline; }
.blog-cta-banner-x img{ width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* -----------------------------
   Misc
----------------------------- */
.wp-block-list{ padding-left: 1.1em; }
.wp-block-list li{ margin: .4em 0; }

/* Breadcrumb home icon fallback */
.fas.fa-home::before{ content:"⌂"; }

/* Modified icon fallback */
.fas.fa-sync-alt::before{ content:"↻"; margin-right:.2em; }

/* Visually hidden (for assistive labels if needed) */
.visually-hidden{
  position:absolute !important;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  width:1px; height:1px; overflow:hidden; white-space:nowrap; border:0; padding:0; margin:-1px;
}