@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

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

/* サイドバーメニュー */
.widget_nav_menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_nav_menu .menu li {
    margin-bottom: 8px;
}

.widget_nav_menu .menu li a {
    display: block;
    padding: 12px 16px;
    background: #f8f9fa;
    border-left: 4px solid #20a39e;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    color: #333;
    transition: all 0.2s ease;
}

.widget_nav_menu .menu li a:hover {
    background: #20a39e;
    color: #fff;
    transform: translateX(4px);
}

/* 現在のページ */
.widget_nav_menu .current-menu-item a {
    background: #20a39e;
    color: #fff;
}

.widget_nav_menu .menu li a::before {
    content: "▶";
    margin-right: 8px;
    color: #20a39e;
}

.widget_nav_menu .menu li a:hover::before,
.widget_nav_menu .current-menu-item a::before {
    color: #fff;
}

.rsswidget {font-size: 0.9em;}

.toc-title {color:#fff;font-weight:bold;}

.hsr5star img {background: linear-gradient(180deg,#885550,#c9a36a 53%);
    border-bottom-color: #c9a36a;}

.hsr4star img {background: linear-gradient(180deg,#343659,#8a5fcc 53%);
    border-bottom-color: #8a5fcc;}

.naname{
     font-family: 'Noto Serif JP', serif;
}


/* =========================================================
   acm_story：原神ストーリー要約用スタイル
   子テーマの style.css の「末尾」に追記してください
   （既存の .article h3 などより後ろに置くことで、こちらが優先されます）
   ※記事内では h2 を使用しない（Cocoonの広告自動挿入対策）
   ========================================================= */

/* ---------- 配色（デフォルト＝稲妻） ---------- */
.acm_story{
  --acm-main:#5d5486;       /* メイン（見出し・バッジ・帯） */
  --acm-main-pale:#f4f2f9;  /* メインの淡色（見出し背景・ボックス背景） */
  --acm-sub:#b8975a;        /* サブ（結論ラベル・点・h4下線） */
  --acm-sub-pale:#faf7f0;   /* サブの淡色（結論ボックス背景） */
  --acm-sub-line:#e3d6b8;   /* サブの枠線 */
  --acm-sub-dark:#8a6d3b;   /* サブの濃色（人物ラベル文字） */
  --acm-text:#3a3a3a;
  --acm-line:#e3e1e8;
  --acm-marker:rgba(255,222,110,.55);
  --acm-marker2:rgba(246,170,170,.45);
}

/* ---------- 地域別の配色 ----------
   指定方法は2通り（どちらか一方でOK）
   ① 記事側：<article class="acm_story acm_theme-mondstadt">
   ② カテゴリー：記事のカテゴリースラッグが一致すれば自動適用
      ※下記の category-xxx は実際のカテゴリースラッグに合わせて変更
   ------------------------------------------------------- */

/* 稲妻 */
.acm_story.acm_theme-inazuma,
.category-inazuma .acm_story{
  --acm-main:#5d5486; --acm-main-pale:#f4f2f9;
  --acm-sub:#b8975a;  --acm-sub-pale:#faf7f0; --acm-sub-line:#e3d6b8; --acm-sub-dark:#8a6d3b;
}
/* モンド */
.acm_story.acm_theme-mondstadt,
.category-mondstadt .acm_story{
  --acm-main:#3f7f78; --acm-main-pale:#eef6f5;
  --acm-sub:#9aa86a;  --acm-sub-pale:#f6f8ef; --acm-sub-line:#d9e0c4; --acm-sub-dark:#67733f;
}
/* 璃月 */
.acm_story.acm_theme-liyue,
.category-liyue .acm_story{
  --acm-main:#8a5a3c; --acm-main-pale:#f8f2ee;
  --acm-sub:#c19a4b;  --acm-sub-pale:#fbf7ec; --acm-sub-line:#e8d9b5; --acm-sub-dark:#8a6a28;
}
/* スメール */
.acm_story.acm_theme-sumeru,
.category-sumeru .acm_story{
  --acm-main:#4f7d4a; --acm-main-pale:#f0f6ef;
  --acm-sub:#c0a35a;  --acm-sub-pale:#faf7ed; --acm-sub-line:#e6dbb8; --acm-sub-dark:#85702f;
}
/* フォンテーヌ */
.acm_story.acm_theme-fontaine,
.category-fontaine .acm_story{
  --acm-main:#3d5f8a; --acm-main-pale:#eef3f8;
  --acm-sub:#8fa3b8;  --acm-sub-pale:#f3f6f9; --acm-sub-line:#d6dfe8; --acm-sub-dark:#556a80;
}
/* ナタ */
.acm_story.acm_theme-natlan,
.category-natlan .acm_story{
  --acm-main:#a5533a; --acm-main-pale:#faf0ec;
  --acm-sub:#c08a3e;  --acm-sub-pale:#fbf5ec; --acm-sub-line:#ead6b6; --acm-sub-dark:#8a5e22;
}
/* スネージナヤ */
.acm_story.acm_theme-snezhnaya,
.category-snezhnaya .acm_story{
  --acm-main:#4d6f86; --acm-main-pale:#eff4f7;
  --acm-sub:#9db3c2;  --acm-sub-pale:#f4f7f9; --acm-sub-line:#d9e3ea; --acm-sub-dark:#5b7385;
}

/* ---------- 基本 ---------- */
.acm_story{
  color:var(--acm-text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.04em;
}
.acm_story *{box-sizing:border-box}
.acm_story p{margin:0 0 1.2em;padding:0}
.acm_story strong{font-weight:700}

/* ---------- マーカー ---------- */
.acm_story .acm_mk{background:linear-gradient(transparent 62%,var(--acm-marker) 62%);font-weight:700}
.acm_story .acm_mk2{background:linear-gradient(transparent 62%,var(--acm-marker2) 62%);font-weight:700}

/* ---------- シリーズラベル ---------- */
.acm_story .acm_series{
  display:inline-block;margin:0 0 1.6em;padding:2px 12px;border-radius:3px;
  background:var(--acm-main);color:#fff;font-size:.78em;font-weight:700;letter-spacing:.08em;line-height:1.8;
}

/* ---------- 見出し ----------
   スキン（カラフルライン）の .article h3 / h4 と疑似要素(::before/::after)を打ち消すため
   「body .acm_story」で詳細度を上げ、疑似要素も明示的にリセット
   ------------------------------------------------------- */
body .acm_story h3{
  position:relative;display:flex;align-items:center;gap:.6em;
  margin:3.2em 0 1.2em;padding:.65em .9em;
  font-size:1.25em;line-height:1.5;font-weight:700;letter-spacing:.05em;color:var(--acm-text);
  background:var(--acm-main-pale);background-image:none;
  border:none;border-left:5px solid var(--acm-main);border-radius:0 4px 4px 0;box-shadow:none;
}
body .acm_story h3::before,
body .acm_story h3::after{content:none;display:none}
body .acm_story h3 .acm_num{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;border-radius:50%;background:var(--acm-main);color:#fff;
  font-size:.78em;font-weight:700;letter-spacing:0;line-height:1;
}
body .acm_story h4{
  position:relative;
  margin:2.2em 0 1em;padding:0 0 .45em;
  font-size:1.08em;line-height:1.5;font-weight:700;letter-spacing:.05em;color:var(--acm-text);
  background:none;border:none;border-bottom:2px solid var(--acm-line);border-radius:0;box-shadow:none;
}
body .acm_story h4::before{content:none;display:none}
body .acm_story h4::after{
  content:"";display:block;position:absolute;top:auto;right:auto;left:0;bottom:-2px;
  width:4em;height:2px;margin:0;background:var(--acm-sub);border:none;border-radius:0;
  transform:none;-webkit-transform:none;
}

/* ---------- 箇条書き ---------- */
.acm_story ul.acm_list,
.acm_story ol.acm_steps,
.acm_story ul.acm_check,
.acm_story ul.acm_people{list-style:none;margin:0 0 1.5em;padding:0;border:none;background:none}
.acm_story ul.acm_list li,
.acm_story ol.acm_steps li,
.acm_story ul.acm_check li,
.acm_story ul.acm_people li{position:relative;margin:.55em 0;line-height:1.8;list-style:none}

/* 点 */
.acm_story ul.acm_list li{padding-left:1.4em}
.acm_story ul.acm_list li::before{
  content:"";position:absolute;left:.35em;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--acm-sub);
}
/* 点＋区切り線 */
.acm_story ul.acm_list.acm_list--line li{margin:0;padding:.55em 0 .55em 1.4em;border-bottom:1px dashed #d4d4d4}
.acm_story ul.acm_list.acm_list--line li:last-child{border-bottom:none}
.acm_story ul.acm_list.acm_list--line li::before{top:1.27em}

/* 番号 */
.acm_story ol.acm_steps{counter-reset:acm-step}
.acm_story ol.acm_steps li{padding-left:2.1em}
.acm_story ol.acm_steps li::before{
  counter-increment:acm-step;content:counter(acm-step);
  position:absolute;left:0;top:.2em;width:1.5em;height:1.5em;border-radius:50%;
  background:var(--acm-main);color:#fff;font-size:.88em;font-weight:700;line-height:1.5em;text-align:center;letter-spacing:0;
}
/* チェック */
.acm_story ul.acm_check li{padding-left:1.7em}
.acm_story ul.acm_check li::before{
  content:"";position:absolute;left:.3em;top:.5em;width:.45em;height:.8em;
  border-right:2px solid var(--acm-main);border-bottom:2px solid var(--acm-main);transform:rotate(45deg);
}
/* 人物ラベル付き */
.acm_story ul.acm_people li{display:flex;align-items:flex-start;gap:.8em;margin:0;padding:.6em 0;border-bottom:1px dashed #d4d4d4}
.acm_story ul.acm_people li:last-child{border-bottom:none}
.acm_story ul.acm_people .acm_name{
  flex:none;min-width:6.2em;padding:0 .6em;border-radius:3px;
  background:var(--acm-sub-pale);border:1px solid var(--acm-sub-line);color:var(--acm-sub-dark);
  font-size:.85em;font-weight:700;text-align:center;line-height:1.9;margin-top:.15em;
}

/* ---------- ボックス：タイトル帯つき（導入・まとめ） ---------- */
.acm_story .acm_box{margin:0 0 2em;border-radius:4px;overflow:hidden;background:var(--acm-main-pale);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.acm_story .acm_box-title{
  margin:0;padding:.55em 1em;background:var(--acm-main);color:#fff;
  font-size:.95em;font-weight:700;letter-spacing:.1em;text-align:center;line-height:1.6;
}
.acm_story .acm_box-body{padding:1.4em 1.6em .4em}

/* ---------- ボックス：結論 ---------- */
.acm_story .acm_conclusion{
  position:relative;margin:2.4em 0 1.5em;padding:1.7em 1.6em 1.2em;
  background:var(--acm-sub-pale);border:1px solid var(--acm-sub-line);border-radius:4px;
}
.acm_story .acm_conclusion::before{
  content:"結論";position:absolute;top:-.95em;left:1.2em;padding:0 .9em;border-radius:3px;
  background:var(--acm-sub);color:#fff;font-size:.82em;font-weight:700;letter-spacing:.12em;line-height:1.9;
}
.acm_story .acm_conclusion p{margin:0}

/* ---------- ボックス：補足（枠線にタイトル） ---------- */
.acm_story .acm_memo{position:relative;margin:2em 0 1.6em;padding:1.5em 1.5em 1.1em;border:2px solid var(--acm-line);border-radius:4px}
.acm_story .acm_memo-title{
  position:absolute;top:-.85em;left:1em;margin:0;padding:0 .5em;background:#fff;
  color:var(--acm-main);font-size:.9em;font-weight:700;letter-spacing:.08em;line-height:1.6;
}
.acm_story .acm_memo p:last-child{margin-bottom:0}

/* ---------- 2カラム比較 ---------- */
.acm_story .acm_compare{display:flex;gap:12px;margin:0 0 1.8em}
.acm_story .acm_compare-col{flex:1;border-radius:4px;overflow:hidden;background:#fafafb;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.acm_story .acm_compare-head{
  margin:0;padding:.6em .8em;background:var(--acm-main);color:#fff;
  font-size:.92em;font-weight:700;text-align:center;line-height:1.5;letter-spacing:.05em;
}
.acm_story .acm_compare-col:nth-child(2) .acm_compare-head{background:var(--acm-sub)}
.acm_story .acm_compare-body{padding:1em 1.1em .4em;font-size:.95em}
.acm_story .acm_compare-body ul.acm_list{margin-bottom:.6em}

/* ---------- 会話 ---------- */
.acm_story .acm_talk{margin:0 0 1.6em;padding:1.1em 1.3em;background:#fafafb;border-radius:4px}
.acm_story .acm_talk p{display:flex;align-items:baseline;gap:.8em;margin:.3em 0}
.acm_story .acm_talk .acm_who{
  flex:none;min-width:5.6em;padding:0 .6em;border-radius:30px;background:var(--acm-main);color:#fff;
  font-size:.8em;font-weight:700;text-align:center;line-height:1.9;
}
.acm_story .acm_talk p:nth-child(2) .acm_who{background:var(--acm-sub)}

/* ---------- 表（横罫線のみ・1列目太字） ----------
   スキンの th/td 白枠・th背景・行の縞模様（tr背景）を打ち消す
   ------------------------------------------------------- */
body .acm_story .acm_custom-table-wrapper{
  overflow-x:auto;margin:0 0 1.8em;border-top:1px solid #ccc;border-bottom:1px solid #ccc;
}
body .acm_story .acm_custom-table-wrapper table{
  width:100%;margin:0;border:none;border-collapse:collapse;font-size:.95em;background:none;
}
body .acm_story .acm_custom-table-wrapper tr,
body .acm_story .acm_custom-table-wrapper tr:nth-of-type(2n),
body .acm_story .acm_custom-table-wrapper tr:nth-of-type(2n+1){background:none;background-color:transparent;border:none}
body .acm_story .acm_custom-table-wrapper th,
body .acm_story .acm_custom-table-wrapper td{
  padding:.9em 1em;border:none !important;border-bottom:1px solid #e8e8e8 !important;
  text-align:left;vertical-align:top;line-height:1.75;background:none;color:var(--acm-text);
}
body .acm_story .acm_custom-table-wrapper tr:last-child td{border-bottom:none !important}
body .acm_story .acm_custom-table-wrapper thead th{
  background:var(--acm-main-pale) !important;color:var(--acm-main);font-size:.9em;font-weight:700;letter-spacing:.08em;
}
body .acm_story .acm_custom-table-wrapper tbody td:first-child{font-weight:700;white-space:nowrap}

/* ---------- スマホ ---------- */
@media (max-width:600px){
  .acm_story{font-size:15px}
  body .acm_story h3{font-size:1.12em;padding:.6em .7em}
  .acm_story .acm_box-body{padding:1.2em 1.1em .3em}
  .acm_story .acm_conclusion{padding:1.6em 1.1em 1em}
  .acm_story .acm_compare{flex-direction:column}
  .acm_story ul.acm_people li{flex-direction:column;gap:.3em}
  .acm_story .acm_talk p{flex-direction:column;gap:.2em}
}


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

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

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

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