/* psychology 共通追加CSS
   common.css を読み込んだ後に使用します。 */
:root{
  --psy-bg:#f3fbff;
  --psy-paper:#ffffff;
  --psy-deep:#315a78;
  --psy-main:#578fb5;
  --psy-soft:#dff1fb;
  --psy-green:#82b8a2;
  --psy-line:#b9d8e7;
  --psy-ink:#24343f;
}

body.psycho-page{
  color:var(--psy-ink);
  background:
    radial-gradient(circle at 12% 6%, rgba(162,218,240,.34), transparent 28rem),
    radial-gradient(circle at 90% 16%, rgba(185,226,207,.34), transparent 25rem),
    linear-gradient(180deg,#f8fdff 0%,#edf8fc 56%,#fbfff9 100%);
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

.psycho-shell{max-width:980px;margin:0 auto;padding:18px 18px 42px;}
.psycho-topbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px;padding:7px 10px;
  background:rgba(255,255,255,.86);border:1px solid var(--psy-line);
  border-radius:12px;box-shadow:0 5px 18px rgba(50,95,120,.08);
}
.psycho-topbar img{width:auto;max-height:34px;}
.psycho-topbar a{
  display:inline-block;padding:5px 10px;border:1px solid #83b7d0;
  border-radius:999px;color:#245b78;background:#fff;font-size:.88rem;
}
.psycho-topbar a:hover{background:#e8f7fd;}

.psycho-hero{
  position:relative;overflow:hidden;margin-bottom:18px;padding:28px 34px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(224,244,252,.92));
  border:1px solid var(--psy-line);border-radius:20px;
  box-shadow:0 12px 32px rgba(50,90,115,.12);
}
.psycho-hero::after{
  content:"";position:absolute;right:-42px;top:-58px;width:210px;height:210px;
  border:26px solid rgba(87,143,181,.12);border-radius:50%;
  box-shadow:-72px 75px 0 -42px rgba(130,184,162,.18);
}
.psycho-kicker{margin:0 0 4px;color:#4f839e;font-weight:700;letter-spacing:.12em;font-size:.84rem;}
.psycho-hero h1{position:relative;z-index:1;margin:0;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.35;color:var(--psy-deep);}
.psycho-hero p{position:relative;z-index:1;margin:10px 0 0;max-width:730px;color:#526570;}

.psycho-article{
  padding:28px 34px;background:rgba(255,255,255,.95);
  border:1px solid #d2e4ed;border-radius:18px;
  box-shadow:0 10px 28px rgba(53,85,105,.09);
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  font-size:1.03rem;line-height:1.95;
}
.psycho-article p{margin:0 0 1.25em;}
.psycho-article h3{
  margin:1.7em 0 .75em;padding:.48em .75em;
  color:#244f69;background:linear-gradient(90deg,#dff2fb,#f6fcff);
  border-left:7px solid var(--psy-main);border-radius:0 10px 10px 0;
  font-size:1.3rem;line-height:1.45;
}
.psycho-article img{
  display:inline-block;width:auto;max-width:100%;height:auto;margin:10px 8px 14px 0;
  vertical-align:top;border-radius:10px;box-shadow:0 5px 16px rgba(40,70,90,.13);
}
.psycho-article video{display:block;max-width:100%;margin:8px auto 20px;border-radius:14px;box-shadow:0 7px 22px rgba(40,70,90,.16);}
.games-container{display:flex;flex-direction:column;gap:22px;width:100%;margin-top:20px;}
.games-container iframe{width:100%;height:500px;border:1px solid var(--psy-line);border-radius:14px;background:#fff;}

.psycho-pager{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  margin-top:18px;padding:12px 15px;background:rgba(255,255,255,.88);
  border:1px solid var(--psy-line);border-radius:14px;
}
.psycho-pager a{color:#245b78;font-weight:700;}
.psycho-pager .next{text-align:right;}
.psycho-count{color:#6a7d88;font-size:.88rem;}
.psycho-footer{text-align:center;margin-top:22px;color:#64747d;font-size:.82rem;}

.psycho-index-intro{margin:0 0 20px;padding:16px 20px;background:rgba(255,255,255,.86);border-left:6px solid var(--psy-green);border-radius:10px;}
.psycho-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.psycho-card{
  position:relative;display:block;min-height:138px;padding:20px 20px 18px 76px;
  background:rgba(255,255,255,.94);border:1px solid #cce1eb;border-radius:16px;
  box-shadow:0 8px 22px rgba(50,90,110,.09);transition:.2s;
}
.psycho-card:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(50,90,110,.14);border-color:#84b9d2;}
.psycho-card__num{position:absolute;left:18px;top:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#5c9fc2,#83bca5);color:#fff;font-weight:800;}
.psycho-card strong{display:block;color:#294f66;font-size:1.13rem;line-height:1.5;}
.psycho-card span{display:block;margin-top:8px;color:#61737d;font-size:.9rem;line-height:1.6;}

@media(max-width:700px){
  .psycho-shell{padding:10px 10px 28px;}
  .psycho-hero{padding:22px 20px;}
  .psycho-article{padding:22px 18px;font-size:1rem;}
  .psycho-card-grid{grid-template-columns:1fr;}
  .psycho-pager{grid-template-columns:1fr 1fr;}
  .psycho-count{grid-column:1/-1;grid-row:1;text-align:center;}
  .games-container iframe{height:430px;}
}

/* =========================================================
   心理学・脳科学　新15本シリーズ用追加
   既存 psycho_common.css の末尾に追加してください。
   既存の .psycho-hero / .psycho-card / .psycho-pager 等は変更しません。
========================================================= */

/* ---------- シリーズ共通ロゴ ---------- */

.psycho-series-logo{
  margin:0 0 18px;
  overflow:hidden;
  background:#fff;
  border:1px solid #d9e5ef;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(68,91,117,.12);
}

.psycho-series-logo img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border-radius:0;
  box-shadow:none;
}


/* ---------- 新シリーズ各話タイトル ---------- */

.psycho-story-head{
  margin:0 0 18px;
  padding:24px 30px 22px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--psy-line);
  border-radius:20px;
  box-shadow:0 8px 22px rgba(62,83,108,.09);
}

.psycho-story-head h1{
  margin:0;
  color:var(--psy-deep);
  font-size:clamp(1.55rem,3vw,2.15rem);
  line-height:1.4;
  letter-spacing:.04em;
}

.psycho-subtitle{
  margin:9px 0 0;
  color:#5c6670;
  font-size:1.05rem;
  line-height:1.75;
}


/* ---------- 本文内の章 ---------- */

.psycho-section{
  margin-top:46px;
}

.psycho-section:first-of-type{
  margin-top:38px;
}

.psycho-section h2{
  margin:0 0 22px;
  padding:0 0 9px 15px;
  color:#214e69;
  border-left:6px solid #91cde3;
  border-bottom:1px solid #dce8ee;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:1.4rem;
  line-height:1.5;
}

.psycho-section strong{
  color:#193f59;
}


/* ---------- 文章中の強調 ---------- */

.psycho-emphasis{
  margin:28px 0!important;
  padding:17px 20px;
  background:#f2f9fd;
  border-left:5px solid #79bfdc;
  border-radius:8px;
  color:#173f57;
  font-weight:700;
}

.psycho-question{
  margin:28px 0!important;
  padding:19px 22px;
  background:#faf4ff;
  border:1px solid #ded0ee;
  border-radius:14px;
  color:#503b62;
  font-size:1.1rem!important;
  font-weight:700;
}

.psycho-keyline{
  max-width:760px;
  margin:30px auto!important;
  padding:17px 22px;
  background:linear-gradient(90deg,#eef9ff,#faf4ff);
  border-radius:12px;
  color:#254866;
  font-size:1.16rem!important;
  font-weight:700;
  text-align:center;
}

.psycho-answer{
  margin-top:30px!important;
  color:#3b5680;
  font-weight:700;
}

.psycho-final-message{
  margin:18px 0!important;
  color:#173f57;
  font-size:1.12rem!important;
  font-weight:700;
}

.psycho-closing{
  margin:34px 0 6px!important;
  padding:24px 20px;
  background:linear-gradient(135deg,#effaff,#f8f1ff);
  border:1px solid #cddfeb;
  border-radius:16px;
  color:#173f57;
  font-size:1.18rem!important;
  font-weight:700;
  text-align:center;
}


/* ---------- 補足欄 ---------- */

.psycho-note{
  margin:28px 0;
  padding:20px 22px 8px;
  background:#fbfcff;
  border:1px solid #d9dff1;
  border-radius:16px;
  box-shadow:inset 5px 0 0 #b9a8e2;
}

.psycho-note h3{
  margin:0 0 12px;
  padding:0;
  color:#594b78;
  background:none;
  border:0;
  border-radius:0;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:1.16rem;
}

.psycho-note p{
  font-size:1rem;
}


/* ---------- 結論部 ---------- */

.psycho-conclusion{
  margin-top:54px;
  padding:26px 28px 18px;
  background:linear-gradient(145deg,#f8fdff,#fbf8ff);
  border:1px solid #cfdee8;
  border-radius:18px;
}


/* ---------- 止めイラスト ---------- */

.psycho-ending-visual{
  margin:38px 0 4px;
  overflow:hidden;
  border:1px solid #d7e3eb;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(54,77,100,.11);
}

.psycho-ending-visual img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border-radius:0;
  box-shadow:none;
}


/* ---------- 新シリーズ追加分のスマホ対応 ---------- */

@media(max-width:700px){
  .psycho-story-head{
    padding:20px 18px;
  }

  .psycho-subtitle{
    font-size:.96rem;
  }

  .psycho-section{
    margin-top:38px;
  }

  .psycho-section h2{
    font-size:1.22rem;
  }

  .psycho-conclusion{
    padding:20px 17px 12px;
  }

  .psycho-keyline,
  .psycho-closing{
    font-size:1.06rem!important;
  }
}



/* =========================================================
   おまけ：1分心理チェック
========================================================= */

.psycho-mini-check{
  margin:42px 0 8px;
  padding:24px 26px;
  background:#fffdf5;
  border:2px solid #d8c77d;
  border-radius:18px;
}

.psycho-mini-label{
  display:inline-block;
  margin:0 0 5px!important;
  padding:3px 12px;
  background:#e8f5fa;
  border-radius:999px;
  color:#35647b;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:.85rem!important;
  font-weight:700;
}

.psycho-mini-check h2{
  margin:4px 0 8px;
  color:#315a78;
  font-size:1.35rem;
}

.psycho-mini-intro{
  color:#68747a;
  font-size:.95rem!important;
}

.psycho-mini-question{
  margin:20px 0;
  padding-top:16px;
  border-top:1px solid #e5dfc4;
}

.psycho-mini-question button{
  margin:4px 5px 4px 0;
  padding:8px 13px;
  border:1px solid #9bbfce;
  border-radius:8px;
  background:#fff;
  color:#294f66;
  cursor:pointer;
}

.psycho-mini-question button:hover,
.psycho-mini-question button.is-selected{
  background:#dff2fb;
  border-color:#578fb5;
}

.psycho-mini-result-btn{
  padding:9px 22px;
  border:0;
  border-radius:999px;
  background:#578fb5;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.psycho-mini-result{
  margin-top:18px;
  padding:16px 18px;
  background:#f0f9fc;
  border-left:5px solid #82b8a2;
  border-radius:8px;
  line-height:1.8;
}


/* =========================================================
   心理学シリーズ：クリックできる選択ボタンを明確にする
   ========================================================= */

.psycho-page button,
.psycho-page [role="button"]{
  cursor: pointer;
}

/* 切替ボタン系 */
.psycho-page .reward-tabs button,
.psycho-page .recon-tabs button,
.psycho-page .psycho-choice button,
.psycho-page .psycho-tabs button{
  position: relative;
  border: 2px solid #7f6aa6;
  background: #ffffff;
  color: #554469;
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;

  box-shadow: 0 3px 7px rgba(0,0,0,.12);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* 「押せます」の印 */
.psycho-page .reward-tabs button::before,
.psycho-page .recon-tabs button::before,
.psycho-page .psycho-choice button::before,
.psycho-page .psycho-tabs button::before{
  content: "▶";
  margin-right: 6px;
  font-size: .75em;
}

/* マウスを乗せた時 */
.psycho-page .reward-tabs button:hover,
.psycho-page .recon-tabs button:hover,
.psycho-page .psycho-choice button:hover,
.psycho-page .psycho-tabs button:hover{
  background: #f0eaf7;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,.16);
}

/* 押した瞬間 */
.psycho-page .reward-tabs button:active,
.psycho-page .recon-tabs button:active,
.psycho-page .psycho-choice button:active,
.psycho-page .psycho-tabs button:active{
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* 現在選択中 */
.psycho-page .reward-tabs button.is-active,
.psycho-page .recon-tabs button.is-active,
.psycho-page .psycho-choice button.is-active,
.psycho-page .psycho-tabs button.is-active{
  background: #7f6aa6;
  color: #fff;
  border-color: #6e5892;
}