@charset "UTF-8";

/* 不要なフッター消去 */
.books div.footerNav.renewal2022hf,
.books ul.spFooter.sp {
  display: none;
}

/* books専用のブレークポイント */
@media screen and (min-width: 481px) {
  .under480 {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .under480 {
    display: revert;
  }
}
@media screen and (min-width: 541px) {
  .under540 {
    display: none;
  }
}
@media screen and (max-width: 540px) {
  .under540 {
    display: revert;
  }
}
@media screen and (min-width: 601px) {
  .under600 {
    display: none;
  }
  .over600 {
    display: revert;
  }
}
@media screen and (max-width: 600px) {
  .under600 {
    display: revert;
  }
  .over600 {
    display: none;
  }
}

/* 変数 */
:root {
  --child-color: #da7da4;
  --child-light-color: #f4d8e4;
  --child-bg-color: #f8e5ed;
  --child-pale-color: #fbf2f6;
  --general-color: #988575;
  --general-bg-color: #e3d8cc;
  --general-light-color: #e0dad6;
  --general-pale-color: #f5f3f1;
  --library-color: #7eb01b;
  --library-light-color: #dfe7bb;
  --library-bg-color: #e5efd1;
  --library-pale-color: #f2f7e8;
  --bookstore-color: #5b96d7;
  --bookstore-light-color: #cee0f3;
  --bookstore-bg-color: #deeaf7;
  --bookstore-pale-color: #eff4fb;
  --copyright-color: #6b6b6b;
  --copyright-light-color: #d3d3d3;
  --copyright-bg-color: #e1e1e1;
  --copyright-pale-color: #f0f0f0;
  
  --website-gold-color: #af8f68;
  --website-gold-bg-color: #efe9e1;

  --font-size-base: 16px;
  --thumb-size: 180px;
  --detail-thumb-size: 400px;
}

#child {
  --main-box-color: var(--child-color);
  --emphasis-color: var(--child-color);
  --light-color: var(--child-light-color);
  --bg-color: var(--child-bg-color);
  --pale-color: var(--child-pale-color);
}

#general {
  --main-box-color: var(--general-color);
  --emphasis-color: var(--general-color);
  --light-color: var(--general-light-color);
  --bg-color: var(--general-bg-color);
  --pale-color: var(--general-pale-color);
}

#library {
  --main-box-color: var(--library-color);
  --emphasis-color: var(--library-color);
  --light-color: var(--library-light-color);
  --bg-color: var(--library-bg-color);
  --pale-color: var(--library-pale-color);
}
#bookstore {
  --main-box-color: var(--bookstore-color);
  --emphasis-color: var(--bookstore-color);
  --light-color: var(--bookstore-light-color);
  --bg-color: var(--bookstore-bg-color);
  --pale-color: var(--bookstore-pale-color);
}

#copyright {
  --main-box-color: var(--copyright-color);
  --emphasis-color: var(--copyright-color);
  --light-color: var(--copyright-light-color);
  --bg-color: var(--copyright-bg-color);
  --pale-color: var(--copyright-pale-color);
}

/* ヘッダー　*/
header.renewal2022hf {
  display: none;
}
.books_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  height: 60px;
  overflow: hidden;
  margin: 0 auto;
}
.books_header .inner {
  width: 96%;
  max-width: 1120px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.books_header h1 {
  position: relative;
}
.books_nav {
  margin: 0.5em 0 0 0;
}
.books_nav {
  border-bottom: none; /* common_2022でborder-bottomがついているため、ここでnoneにする */
}
.books_nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0.5em 1em;
  list-style: none;
}
.books_nav li {
  font-size: 14px;
  font-weight: 700;
  padding: 0 1em;
  margin: 0;
  min-width: 0;
  width: auto;
  position: relative;
  box-sizing: border-box;
}
nav.books_nav li + li {
  border-left: 1px solid #ccc;
}
/* ヘッダー｜ナビゲーションのアイコン */
nav.books_nav li::before {
  content: "";
  display: inline-block;
  position: static;
  visibility: visible;
  border: 0;
  opacity: 1;
  vertical-align: middle;
  flex: 0 0 auto;
}
nav.books_nav li::before {
  margin-right: 0.5em;
}
nav.books_nav li.child::before {
  width: calc(18.5em / 14);
  height: calc(18.5em / 14);
  background-color: var(--child-color);
  -webkit-mask: url("../images/icon_child.svg") no-repeat center / contain;
  mask: url("../images/icon_child.svg") no-repeat center / contain;
}
nav.books_nav li.library::before {
  width: calc(20em / 14);
  height: calc(20em / 14);
  background-color: var(--library-color);
  -webkit-mask: url("../images/icon_library.svg") no-repeat center / contain;
  mask: url("../images/icon_library.svg") no-repeat center / contain;
}
nav.books_nav li.bookstore::before {
  width: calc(20em / 14);
  height: calc(20em / 14);
  background-color: var(--bookstore-color);
  -webkit-mask: url("../images/icon_bookstore.svg") no-repeat center / contain;
  mask: url("../images/icon_bookstore.svg") no-repeat center / contain;
}
nav.books_nav li.copyright::before {
  width: calc(15em / 14);
  height: calc(15em / 14);
  background-color: var(--copyright-color);
  -webkit-mask: url("../images/icon_copyright.svg") no-repeat center / contain;
  mask: url("../images/icon_copyright.svg") no-repeat center / contain;
}
/* ヘッダー｜ナビゲーションの下線 */
nav.books_nav li.selected::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 0.75em);
  bottom: -0.5em;
  left: 0.375em;
  height: 2.5px;
  /* common_2022でopacity: 0; visibility: hidden; transform: scale(0, 1);がついているため、ここで上書きする */
  opacity: 1;
  visibility: visible;
  transform: scale(1, 1);
}
nav.books_nav li.child.selected::after {
  background-color: var(--child-color);
}
nav.books_nav li.library.selected::after {
  background-color: var(--library-color);
}
nav.books_nav li.bookstore.selected::after {
  background-color: var(--bookstore-color);
}
nav.books_nav li.copyright.selected::after {
  background-color: var(--copyright-color);
}

/* ページ移動の瞬間に画面全体が横にガクッとずれるのを防ぐ。
   移動先のページは、内容の高さが確定するまでスクロールバーが無い状態で
   描画されることがあり、バーが現れた瞬間に中央寄せの内容がバーの幅ぶん
   横に動いて見える。books のページは常に縦に長い（バーが必ず出る）ので、
   バーを常時表示にして幅を最初から確保しておく */
html {
  overflow-y: scroll;
}

/* common_2022.css を上書き*/
body > header:first-of-type {
  display: none;
}
/* books ヘッダ自身のハンバーガー（inc/books_header.tpl の #menuBar）は使わない。
   タブレット・スマホで出すハンバーガーは、下でサイト共通ヘッダごと表示する */
header > div.inner > #menuBar {
  display: none;
}
/* サイト共通の JS（common_2022.js）は、固定ヘッダの高さぶん body の padding-top を
   入れてくる。books では下の作りにより padding は常に不要なので、ここで無効化する。
   （!important はインラインstyleより強いため、JS の実行タイミングに関係なく効く。
     これにより読み込み中・リサイズ時に内容が上下にガタつく＝画面上部に
     壁紙テクスチャが一瞬見える問題が起きない） */
body.books {
  padding-top: 0 !important;
}
@media screen and (max-width: 1024px) {
    .books main {
        padding-top: 0px;
    }
}

@media screen and (max-width: 1024px) {
  /* タブレット・スマホではサイト共通ヘッダ（ロゴ＋ハンバーガー）を books でも表示する。
     上の body > header:first-of-type { display: none; } と同じセレクタで、
     こちらが後に書かれているぶんが勝つ（カスケード順）。
     ※ .renewal2022hf クラスは使わないこと。共通JS（common_2022.js）はメニュー内の
       カテゴリをタップすると header の class 属性を丸ごと書き替えて
       renewal2022hf を消してしまうため、クラスに依存するとその瞬間に
       ヘッダごと非表示になり、開いたメニューが消えてしまう。
     common_2022.css はこの幅で共通ヘッダを position: fixed にするが、
     fixed だと body の padding-top（JS 任せ）が必要になり表示タイミングで
     ガタつく。sticky なら文書の流れに残ったまま（padding 不要のまま）
     スクロール時だけ画面最上部に貼り付くため、ガタつきを避けつつ
     「スクロールしてもヘッダが画面上部に残り続ける」動きになる */
  body > header:first-of-type {
    display: block;
    position: sticky;
    top: 0;
  }
  /* ▼ 上の sticky を効かせるための補助 2 点 */
  /* (1) 共通CSSは body に overflow-x: hidden を付けているが、hidden だと
     body 自体が「スクロールする箱」扱いになり、その中の sticky はウィンドウ
     ではなく body に対して貼り付こうとして働かない（ヘッダが今までどおり
     流れて消えてしまう）。clip は「横にはみ出した分を切り取る」見た目は
     hidden と同じまま、body をスクロールする箱にしないので sticky が効く */
  body {
    overflow-x: clip;
  }
  /* (2) ハンバーガーメニューを開いている間、共通JS（common_2022.js）は
     html に is-fixed クラスを付けてページ全体のスクロールを止める。
     スクロールが無い間は sticky も効かず、スクロール途中でメニューを
     開くとヘッダ（閉じる×ボタンごと）が画面外へ出てしまう。
     この間だけヘッダ自身を fixed にして画面最上部に留める
     （画面上の位置は sticky で貼り付いているときと同じなので、
       メニューの開け閉めでヘッダが動いて見えることはない） */
  html.is-fixed body > header:first-of-type {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  /* ▲ 補助ここまで */
  /* ▼ 共通ヘッダの見た目の「ピン留め」（タブレット・スマホ共通ぶん）。
     共通CSS（common_2022.css）の画面幅別ブロックが、ページ表示の一瞬だけ
     効いていない状態になることがあり、そのあいだロゴサイズやハンバーガーの
     有無が変わって画面がガクッとずれて見える。ここで books 側でも同じ値を
     宣言しておくことで、共通CSSの適用タイミングに関係なくヘッダの見た目が
     最初から最終状態と同じになる。値は common_2022.css の該当ブロックの写し。 */
  body > header.renewal2022hf:first-of-type .contents_box .inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* PC専用の部品（会社案内ナビ・文字サイズ・検索窓）はタブレット・スマホでは出さない */
  body > header.renewal2022hf:first-of-type #hNav,
  body > header.renewal2022hf:first-of-type .textresizer,
  body > header.renewal2022hf:first-of-type .searchArea {
    display: none;
  }
  /* ▲ ピン留め（共通ぶん）ここまで */

  /* ハンバーガーで開くメニュー（共通ヘッダの nav / tabNav / navPanel）は、
     books のヘッダ・ナビより必ず手前に表示する。
     共通JSはメニューを開くとき books のナビにも active クラスを付けるため、
     共通CSSの素の z-index（1〜2）のままだと books 側のナビリンクが
     展開メニューの手前に残って（かぶって）しまう。
     数値は books 側の最大値（.books_header の 1200）より上、
     かつ nav < navPanel の上下関係を保つ。
     ※ ここも .renewal2022hf には依存させない（上の注記参照） */
  body > header:first-of-type > nav {
    z-index: 1300;
  }
  body > header:first-of-type .tabNav {
    z-index: 1300;
  }
  body > header:first-of-type .navPanel {
    z-index: 1301;
  }
  .books_header {
    position: static;
    margin-top: 0;
    overflow: visible;
    height: auto;
    border-bottom: 0;
  }
  header.renewal2022hf + .books_header {
    margin-top: 0;
  }
  .books_header .inner {
    width: 100%;
    max-width: 100%;
    padding: 0 0 0.5em 0;
    box-sizing: border-box;
    background-image: url("../images/books_bg.jpg");
    background-size: 100px 100px;
    position: relative;
  }
  #books_top .books_header .inner {
    background-image: url("../images/books_top_bg_pc.png");
    background-size: 1715px 410px;
    background-position: center bottom 120px;
  }
  .books_header .inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .books_header h1 {
    display: none;
  }
  .books_header #menuBar {
    display: none;
  }
  nav.books_nav {
    width: 100%;
  }
  .books_nav ul {
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
    padding: 0.25em 0;
  }
}
/* 共通ヘッダのピン留め・タブレットぶん（common_2022.css の 601〜1024px ブロックの写し） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body > header.renewal2022hf:first-of-type div.contents_box {
    padding: 0;
  }
  body > header.renewal2022hf:first-of-type h1 img {
    width: 10rem;
  }
  body > header.renewal2022hf:first-of-type #menuBar {
    cursor: pointer;
    width: 3.5rem;
    height: 3.5rem;
    position: relative;
    right: -0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body > header.renewal2022hf:first-of-type #menuBar .menu-trigger {
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("/common/images/icon_menu.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  body > header.renewal2022hf:first-of-type #menuBar .menu-trigger.active {
    width: 1.375rem;
    height: 1.375rem;
    background-image: url("/common/images/icon_menu_close.svg");
  }
}
/* 共通ヘッダのピン留め・スマホぶん（common_2022.css の 600px 以下ブロックの写し） */
@media screen and (max-width: 600px) {
  body > header.renewal2022hf:first-of-type .contents_box .inner {
    padding: 0.4375rem 0;
    box-sizing: border-box;
  }
  body > header.renewal2022hf:first-of-type h1 img {
    width: 8rem;
    height: auto;
  }
  body > header.renewal2022hf:first-of-type #menuBar {
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body > header.renewal2022hf:first-of-type #menuBar .menu-trigger {
    width: 1.125rem;
    height: 0.875rem;
    background-image: url("/common/images/icon_menu.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  body > header.renewal2022hf:first-of-type #menuBar .menu-trigger.active {
    width: 1rem;
    height: 1.0625rem;
    background-image: url("/common/images/icon_menu_close.svg");
  }
}

@media screen and (max-width: 909px) {
  .books_header .inner nav.books_nav {
    background-color: transparent; /* common_2022で背景色がついているため、ここで透明にする */
  }
  #books_top .books_header .inner {
    background-position: center bottom calc(410px - 90px - 20vw - 10px);
  }
}
@media screen and (max-width: 680px) {
  .books_nav li {
    padding: 0.75em 0.5em 0em;
  }
  nav.books_nav li::before {
    position: absolute;
    top: -1.5em;
  }
  nav.books_nav li.child::before {
    right: calc(1em * 4.5 - 8px);
  }
  nav.books_nav li.library::before {
    right: calc(1em * 4 - 9px);
  }
  nav.books_nav li.bookstore::before {
    right: calc(1em * 2.5 - 10px);
  }
  nav.books_nav li.copyright::before {
    right: calc(1em * 3.5 - 7.5px);
  }
}
@media screen and (max-width: 600px) {
  #books_top .books_header .inner {
    background-image: url("../images/books_top_bg_sp.png");
    background-size: 100vw 118.4vw;
    background-position: center bottom calc(118.4vw - 96vw);
  }
  .books_header .inner {
    padding: 0.125em 0.5em 0.125em 0.5em;
  }
  /* common_2022でposition: fixedがついているため、ここでstaticにする */
  nav.books_nav {
    position: static;
    height: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    border-top: 0;
    transition: none;
    margin: 0.875em 0 0 0;
  }
  nav.books_nav ul {
    width: 100%;
    justify-content: space-around;
    padding: 0.25em 0 0;
  }
  nav.books_nav li {
    padding: 0 1em;
    border-bottom: none;
    color: #b2b2b2;
    /* 400px付近で::beforeアイコンの端が欠けるケースに備えて明示 */
    overflow: visible;
  }
  nav.books_nav li::before {
    position: absolute;
    top: -1.25em;
  }
  nav.books_nav li.child::before,
  nav.books_nav li.library::before,
  nav.books_nav li.bookstore::before,
  nav.books_nav li.copyright::before {
    background-color: #b2b2b2;
  }
  nav.books_nav li.child::before {
    right: calc(50% - 1em);
  }
  nav.books_nav li.library::before {
    right: calc(50% - 1.14em);
  }
  nav.books_nav li.bookstore::before {
    right: calc(50% - 1.12em);
  }
  nav.books_nav li.copyright::before {
    right: calc(50% - 1em);
  }
  nav.books_nav li.child.selected {
    color: var(--child-color);
  }
  nav.books_nav li.child.selected::before {
    background-color: var(--child-color);
  }
  nav.books_nav li.library.selected::before {
    background-color: var(--library-color);
  }
  nav.books_nav li.library.selected {
    color: var(--library-color);
  }
  nav.books_nav li.bookstore.selected {
    color: var(--bookstore-color);
  }
  nav.books_nav li.bookstore.selected::before {
    background-color: var(--bookstore-color);
  }
  nav.books_nav li.copyright.selected::before {
    background-color: var(--copyright-color);
  }
  nav.books_nav li.copyright.selected {
    color: var(--copyright-color);
  }
  nav.books_nav li.selected::after {
    width: 100%;
    left: 0;
    bottom: calc(-0.5em + 1.5px);
    height: 3px;
  }
  nav.books_nav li + li {
    border-left: none;
  }
}
@media screen and (max-width: 540px) {
  nav.books_nav li {
    line-height: 1.2;
    text-align: center;
  }
}
@media screen and (max-width: 480px) {
  .books_header .inner {
    padding: 0.125em 0.5em 0.125em 0.5em;
  }
  .books_nav ul {
    width: 100%;
    padding: 0 0.125em;
  }
  .books_nav li {
    font-size: 3.2vw;
    padding-left: 0;
    padding-right: 0;
  }
  nav.books_nav li:nth-of-type(1),
  nav.books_nav li:nth-of-type(2) {
    flex: 0 0 28%;
  }
  nav.books_nav li:nth-of-type(3) {
    flex: 0 0 22.4%;
  }
  nav.books_nav li:nth-of-type(4) {
    flex: 0 0 21.6%;
  }
  nav.books_nav li::before {
    top: -1.375em;
  }
}

/* フッター｜関連コンテンツ */
.related_area {
  font-size: var(--font-size-base);
  margin: 4em auto 0;
  padding-left: 2em;
  padding-right: 2em;
  position: relative;
  background-color: var(--general-bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.related_title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  line-height: 1;
  color: var(--general-color);
  background-color: var(--general-bg-color);
  border-radius: 0.625em 0.625em 0 0;
  padding: 0.75em 4em 0.25em 4em;
  position: relative;
  margin-top: -1.5em;
}
.related_list {
  display: grid;
  column-gap: 2em;
  row-gap: 1em;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 250px);
  width: 100%;
  max-width: 1400px;
  margin: 1em auto;
}
.related_item .banner {
  width: 100%;
  height: 80px;
}
.related_item .banner img {
  width: 100%;
}
@media screen and (max-width: 600px) {
  .related_area {
    font-size: 4.25vw;
    padding-left: 1em;
    padding-right: 1em;
  }
  .related_list {
    grid-template-columns: repeat(auto-fit, 42vw);
    column-gap: 1em;
  }
  .related_item .banner {
    width: 42vw;
    height: 13.44vw;
  }
}
@media screen and (max-width: 480px) {
  .related_area {
    font-size: 4.25vw;
  }
}

/* フッター｜仕切り */
.dots {
  width: calc(100% - 4em);
  max-width: 1400px;
  height: 3px;
  margin: 0.5em auto;
  background-image: radial-gradient(
    circle,
    var(--general-color) 0 1.5px,
    transparent 1.5px
  );
  background-size: 8px 3px;
  background-repeat: repeat-x;
}
/* フッター｜ナビゲーション */
.navigation_banners {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em auto 1.5em;
}
.navigation_banners li.selected {
  display: none;
}
.navigation_banners li {
  font-size: calc(var(--font-size-base) * 1.25);
  width: 15em;
  height: 3em;
  background-color: #fff;
  border-radius: 1em;
}
.navigation_banners li a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
.navigation_banners li a span {
  font-weight: 700;
  flex: 1;
  text-align: center;
  margin: 0;
}
.navigation_banners li a::before {
  content: "";
  flex: 0 0 3.75em;
  width: 3.75em;
  align-self: stretch; /* ← 高さ100% */
  /*
  height: 3em;
  */
  margin-right: -0.5em;
  flex: 0 0 3.75em;
  border-radius: 1em 0 0 1em;
  background-repeat: no-repeat;
  background-position: center;
}
li.child_banner a::before {
  background-color: var(--child-color);
  background-image: url("../images/icon_child.svg");
  background-size: 1.8em 1.8em;
}
li.library_banner a::before {
  background-color: var(--library-color);
  background-image: url("../images/icon_library.svg");
  background-size: 2em 2em;
}
li.bookstore_banner a::before {
  background-color: var(--bookstore-color);
  background-image: url("../images/icon_bookstore.svg");
  background-size: 2em 2em;
}
li.copyright_banner a::before {
  background-color: var(--copyright-color);
  background-image: url("../images/icon_copyright.svg");
  background-size: 1.75em 1.75em;
}
@media screen and (max-width: 1024px) {
  .navigation_banners li {
    font-size: calc(var(--font-size-base) * 1.125);
  }
}
@media screen and (max-width: 880px) {
  .navigation_banners li {
    font-size: calc(var(--font-size-base) * 1.0625);
  }
}
@media screen and (max-width: 840px) {
  .navigation_banners li {
    font-size: calc(var(--font-size-base) * 1);
  }
}
@media screen and (max-width: 780px) {
  .navigation_banners li {
    width: 13.75em;
  }
  .navigation_banners li a::before {
    width: 3em;
  }
}
@media screen and (max-width: 720px) {
  .navigation_banners li {
    width: 12.5em;
    height: 2.75em;
  }
  .navigation_banners li a::before {
    flex: 0 0 2.75em;
    width: 2.75em;
  }
}
@media screen and (max-width: 644px) {
  .navigation_banners li {
    width: 20em;
    height: 2.5em;
  }
  .navigation_banners li a::before {
    width: 5em;
    height: 2.5em;
    flex: 0 0 5em;
  }
}
@media screen and (max-width: 600px) {
  .navigation_banners li {
    font-size: 4.25vw;
    width: 18.75em;
    height: 2.8125em;
  }
  .navigation_banners li a::before {
    width: 5em;
    height: 2.8125em;
  }
}

/* main */
.books main {
  background-image: url("../images/books_bg.jpg");
  background-size: 100px 100px;
  padding-top: 60px; /* ヘッダー部分fixedのため高さ分の余白を確保 */
}
.books main.searched,
.books main.detail,
.books main.news {
  padding-top: calc(60px + 1em); /* ヘッダー部分fixedのため高さ分の余白を確保 */
}
@media screen and (max-width: 1024px) {
  .books main,
  .books main.searched,
  .books main.detail,
  .books main.news {
    padding-top: 0;
  }
}

/* 詳細ページ｜「おすすめの本」(AO列) と「セット内容」(AP列) の出し分け。
   どちらも同じタイル構造（.extra_area）で生成時に両方焼き込まれており、
   通常（子どもの本・一般書の文脈）は「おすすめの本」だけを表示する。
   図書館向けページから来たとき（js/books_public.js の applyLibraryContext が
   main の id を library に切り替える）は「セット内容」だけを表示する */
.set_contents_area {
  display: none;
}
main#library .recommend_area {
  display: none;
}
main#library .set_contents_area {
  display: block;
}

/* 実線＆点線枠 */
.main_frame {
  font-size: var(--font-size-base);
  box-sizing: border-box;
  border-radius: 18px;
  border: 3px solid var(--main-box-color);
  background-color: #fff;
  width: calc(100% - 2em);
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
/* 角が汚く欠けるのでやめる
.main_frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 9px;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--main-box-color) 1.5px, transparent 1.5px)
      top / 8px 3px repeat-x,
    radial-gradient(circle, var(--main-box-color) 1.5px, transparent 1.5px)
      bottom / 8px 3px repeat-x,
    radial-gradient(circle, var(--main-box-color) 1.5px, transparent 1.5px)
      left / 3px 8px repeat-y,
    radial-gradient(circle, var(--main-box-color) 1.5px, transparent 1.5px)
      right / 3px 8px repeat-y;

  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
*/
.main_frame::before {
  content: "";
  position: absolute;
  inset: 9px 18px 9px 18px;
  pointer-events: none;
  background-color: var(--main-box-color);
  -webkit-mask:
    url(../images/dot_frame_horizontal_pattern.svg) left top / 100% 3px repeat-x,
    url(../images/dot_frame_horizontal_pattern.svg) left bottom / 100% 3px
      repeat-x;
  mask:
    url(../images/dot_frame_horizontal_pattern.svg) left top / 100% 3px repeat-x,
    url(../images/dot_frame_horizontal_pattern.svg) left bottom / 100% 3px
      repeat-x;
}
.main_frame::after {
  content: "";
  position: absolute;
  inset: 18px 9px 18px 9px;
  pointer-events: none;
  background-color: var(--main-box-color);
  -webkit-mask:
    url(../images/dot_frame_vertical.svg) left top / 3px 8px repeat-y,
    url(../images/dot_frame_vertical.svg) right top / 3px 8px repeat-y;
  mask:
    url(../images/dot_frame_vertical.svg) left top / 3px 8px repeat-y,
    url(../images/dot_frame_vertical.svg) right top / 3px 8px repeat-y;
}
.main_frame_corner {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--main-box-color);

  -webkit-mask:
    url(../images/dot_frame_left_top.svg) left top / 18px 18px no-repeat,
    url(../images/dot_frame_right_top.svg) right top / 18px 18px no-repeat,
    url(../images/dot_frame_right_bottom.svg) right bottom / 18px 18px no-repeat,
    url(../images/dot_frame_left_bottom.svg) left bottom / 18px 18px no-repeat;
  mask:
    url(../images/dot_frame_left_top.svg) left top / 18px 18px no-repeat,
    url(../images/dot_frame_right_top.svg) right top / 18px 18px no-repeat,
    url(../images/dot_frame_right_bottom.svg) right bottom / 18px 18px no-repeat,
    url(../images/dot_frame_left_bottom.svg) left bottom / 18px 18px no-repeat;
}

#books_top .main_frame {
  display: none;
}
#books_top:has(#radio_child:checked) .main_frame#child {
  display: block;
}
#books_top:has(#radio_general:checked) .main_frame#general {
  display: block;
}
#library .page_title + .main_frame,
#bookstore .page_title + .main_frame,
#copyright .page_title + .main_frame {
  margin-top: -1.625em;
}

.main_frame .frame_inner {
  margin: 2.5em auto;
  width: calc(100% - 18px);
  /* ↑ main_frameには3pxの実践枠があるので100%の時点で-6pxされてる */
}
@media screen and (max-width: 600px) {
  .main_frame {
    width: calc(100% - 1em);
  }
  #library .main_frame,
  #bookstore .main_frame,
  #copyright .main_frame,
  .detail .main_frame,
  .searched .main_frame {
    font-size: 4.25vw;
  }
  #library .page_title + .main_frame,
  #bookstore .page_title + .main_frame,
  #copyright .page_title + .main_frame,
  .news .main_frame,
  .detail .main_frame,
  .searched .main_frame {
    margin-top: 0.75em;
  }
}

/* タイル */
/* トップと図書館で使用 */
.tile_area,
.extra_area {
  margin: 2.5em 0;
  font-size: calc(var(--font-size-base) * 0.9375);
}
.tile_area .tile_list,
.extra_area .tile_list {
  display: grid;
  grid-template-columns: repeat(4, var(--thumb-size));
  justify-content: space-evenly;
  row-gap: 2em;
  /* 検索の描き替え時にブラウザが自動でスクロール位置を調整（アンカリング）して
     画面がガタつくのを防ぐ。位置の維持は books_index.js 側で行う */
  overflow-anchor: none;
}
.tile_area .tile_item,
.extra_area .tile_item {
  width: var(--thumb-size);
  position: relative;
}
/* 検索結果が 0 件のときのメッセージ（JS が挿入する）。
   タイル 1 枚分のセルに収めず全列をぶち抜き、折り返さず中央に表示する */
.tile_area .tile_list .tile_item_empty {
  grid-column: 1 / -1;
  text-align: center;
  white-space: nowrap;
}
.tile_area .tile_item .thumb,
.extra_area .tile_item .thumb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin-bottom: 0.75em;
}
.tile_area .thumb_inner,
.extra_area .thumb_inner {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border: #ccc 1px solid;
}
.tile_item.coming_soon .thumb_inner::before,
.tile_item.recommended .thumb_inner::before,
.tile_item.popular .thumb_inner::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -13px;
  width: 84px;
  height: 26px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
/* バッジは 1 つの ::before を共有しているため、複数クラスが同時に付いた場合は
   「後に書いた規則」が勝つ。近日発売 ＞ おすすめ/人気 の優先順位にしたいので、
   .coming_soon を最後に書くこと（順序を入れ替えると優先順位が変わる） */
.tile_item.popular .thumb_inner::before {
  background-image: url("../images/icon_popular.svg");
}
.tile_item.recommended .thumb_inner::before {
  background-image: url("../images/icon_recommended.svg");
}
.tile_item.coming_soon .thumb_inner::before {
  background-image: url("../images/icon_comingsoon.svg");
}
.thumb > img,
.thumb .thumb_inner img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--thumb-size));
  max-height: var(--thumb-size);
}
.tile_title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: calc(var(--font-size-base) / 4);
}
.tile_seriestitle,
.tile_subtitle,
.tile_special {
  font-size: calc(var(--font-size-base) * 0.8);
  line-height: 1.2;
  color: #3c3c43;
  margin-bottom: calc(var(--font-size-base) / 4);
}
/* 検索キーワードのハイライト（トップページの検索結果で一致した部分） */
.tile_item mark.hit {
  background-color: #ffe895;
  color: inherit; /* ブラウザ既定の mark の文字色に変えず、周りの文字色のまま */
  padding: 1px 0;
  border-radius: 2px;
}
.tile_author {
  font-size: 0; /* <dt>と<dd>間の空白をなくすために0にする */
}
.tile_author dt,
.tile_author dd {
  font-size: calc(var(--font-size-base) * 0.84375);
  display: inline;
  line-height: 1.4;
}
.tile_author dt::after {
  content: "：";
}
.tile_author dd::after {
  content: "\A";
  white-space: pre;
}
/* タイル４枚、アキ30pxの限界 */
@media screen and (max-width: 926px) {
  .tile_area .tile_list,
  .extra_area .tile_list {
    justify-content: space-around;
  }
}
/* タイル４枚、アキ30px、両端は15pxの限界 */
@media screen and (max-width: 896px) {
  .tile_area .tile_list,
  .extra_area .tile_list {
    grid-template-columns: repeat(3, var(--thumb-size));
    justify-content: space-evenly;
  }
}
/* タイル３枚、アキ30pxの限界 */
@media screen and (max-width: 716px) {
  .tile_area .tile_list,
  .extra_area .tile_list {
    justify-content: space-around;
  }
}
/* タイル３枚、アキ30px、両端は15pxの限界 */
@media screen and (max-width: 686px) {
  .tile_area .tile_list,
  .extra_area .tile_list {
    grid-template-columns: repeat(2, var(--thumb-size));
    justify-content: space-evenly;
  }
}
/* タイル２枚、アキ30pxの限界 */
@media screen and (max-width: 506px) {
  .tile_area .tile_list,
  .extra_area .tile_list {
    justify-content: space-around;
  }
}
/* タイル２枚、アキ30px、両端は15pxの限界 */
@media screen and (max-width: 476px) {
  .tile_area,
  .extra_area {
    font-size: 4vw;
    --thumb-size: calc((100vw - 40px - 16vw) / 2);
  }
  .tile_title {
    font-size: 3.75vw;
  }
  .tile_seriestitle,
  .tile_subtitle,
  .tile_special {
    font-size: 3.2vw;
  }
  .tile_author dt,
  .tile_author dd {
    font-size: 3.5vw;
  }
}
/* タイル｜もっと見る */
.view_more {
  cursor: pointer; /* リンクではないがクリックできるので指カーソルにする */
  font-size: var(--font-size-base);
  margin: 2.5em auto 0em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.view_more p {
  font-weight: 700;
  color: var(--emphasis-color);
}
.view_more p::after {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  margin-left: 0.5em;
  flex: 0 0 auto;
  background-color: var(--emphasis-color);
  -webkit-mask: url("../images/icon_arrow.svg") no-repeat center / contain;
  mask: url("../images/icon_arrow.svg") no-repeat center / contain;
}

/* トップページ｜キービジュアル */
.kv_area {
  font-size: var(--font-size-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  height: 290px;
  background-image: url("../images/books_top_bg_pc.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: #3c3c43;
  padding: 0;
}
.kv_area .new_books_logo {
  margin-top: 0;
  width: 260px;
  height: 90px;
}
.kv_area .new_books_logo img {
  width: 260px;
  height: auto;
}
/* トップページ｜キービジュアル｜新刊タイル */
.kv_area {
  --thumb-size: 180px;
}
.kv_area .new_book_list {
  width: calc(100% - 4em);
  max-width: 1400px;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  margin: 0;
  padding: 0;
}
.kv_area .tile_item {
  width: var(--thumb-size);
  position: relative;
}
.kv_area .tile_item .thumb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--thumb-size);
  height: var(--thumb-size);
}
.kv_area .tile_item .thumb_inner {
  position: relative;
  display: inline-block;
  max-width: 100%;
  z-index: 0;
}
.kv_area .tile_item .thumb_inner::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 140px;
  right: -52px;
  bottom: -9px;
  background: url("../images/book_shadow.png") no-repeat center / contain;
  z-index: -1;
}
@media screen and (max-width: 1715px) {
  .kv_area {
    background-size: 1715px 410px;
  }
}
@media screen and (max-width: 909px) {
  .kv_area {
    height: calc(90px + 20vw + 10px);
  }
  .kv_area .new_book_list {
    width: calc(100% - 2em);
    align-items: flex-end;
  }
  .kv_area .tile_item .thumb {
    width: 20vw;
    height: 20vw;
  }
  .kv_area .tile_item .thumb_inner img {
    max-width: 20vw;
    max-height: 20vw;
  }
}
@media screen and (max-width: 600px) {
  .kv_area {
    height: 96vw;
    background-image: url("../images/books_top_bg_sp.png");
    background-size: cover;
  }
  .kv_area .new_books_logo {
    width: 43.2vw;
    height: 12.8vw;
    position: relative;
  }
  .kv_area .new_books_logo img {
    width: 43.2vw;
    height: auto;
  }
  .kv_area .new_book_list {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 35.2vw);
    row-gap: 9.6vw;
    justify-content: space-evenly;
    /*
    background-color: rgba(255, 0, 0, 0.5); /* デバッグ用 */
  }
  .kv_area .tile_item .thumb {
    width: 35.2vw;
    height: 35.2vw;
  }
  .kv_area .tile_item .thumb_inner img {
    max-width: 35.2vw;
    max-height: 35.2vw;
  }
}

/* トップページ｜おしらせ */
#books_top .news_area {
  font-size: var(--font-size-base);
  margin: 2.5em auto 0;
  width: calc(100% - 4em);
  max-width: 1000px;
  padding: 1.75em;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-color: transparent; /* common_2022で背景色がついているため、ここで透明にする */
  background-color: rgba(255, 255, 255, 0.8);
}
#books_top .news_title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 1.0625em;
  line-height: 1;
  color: #808080;
  position: absolute;
  left: 0.75em;
  top: -1.5em;
  display: flex;
  align-items: center;
  z-index: 0;
}
#books_top .news_title::before {
  content: "";
  display: inline-block;
  width: 2.6em;
  height: 2.6em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  background-image: url("../images/baketa-kun.png");
  background-size: contain;
  background-repeat: no-repeat;
}
#books_top .news_title::after {
  content: "";
  position: absolute;
  left: 3em;
  right: -0.05em;
  bottom: 0.5em;

  height: 0.6em;
  background: var(--child-bg-color);
  z-index: -1;
}
#books_top .news_list {
  font-size: var(--font-size-base);
  line-height: 1.5;
  display: grid;
  grid-template-columns: max-content 1fr;
}
#books_top .news_list dt {
  font-size: 0.875em;
  color: #3c3c43;
  padding-top: 0.0625em;
}
#books_top .news_list dd {
  padding-left: 1em;
  font-weight: 500;
  color: #3c3c43;
}

#books_top .news_list dt:first-child + dd {
  margin-bottom: 0.75em;
}
#books_top .news_more {
  position: absolute;
  right: 1.5em;
  bottom: -1em;
  font-size: 0.875em;
  line-height: 1;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  padding: 0.5em 1em;
  color: var(--child-color);
  border-radius: 1em;
  background-color: var(--child-bg-color);
}
#books_top .news_more::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  mask: url("../images/icon_arrow_right.svg") no-repeat center / contain;
  -webkit-mask: url("../images/icon_arrow_right.svg") no-repeat center / contain;
  background-color: var(--child-color);
}
@media screen and (max-width: 600px) {
  #books_top .news_area {
    font-size: var(--font-size-base);
    width: 100%;
    max-width: none;
    margin: 1.25em 0 0;
    padding: 1.25em;
    box-sizing: border-box;
  }
  #books_top .news_title {
    left: 0.5em;
    top: -2.125em;
  }
  #books_top .news_title::before {
    width: 3.5em;
    height: 3.5em;
  }
  #books_top .news_title::after {
    left: 3.9em;
    right: -0.05em;
    bottom: 1em;

    height: 0.6em;
  }
  #books_top .news_list {
    margin-top: 0.5em;
    grid-template-columns: 1fr;
  }
  #books_top .news_list dd {
    padding-left: 0;
  }
  #books_top .news_list dt {
    display: none;
  }
}

/* トップページ｜セレクター　*/
.category_area {
  font-size: var(--font-size-base);
  width: calc(100% - 2em);
  box-sizing: content-box; /* border-boxで統一したらよかったが、この条件でチューニングしちゃったので明示した */
  max-width: 1120px;
  margin: 2.25em auto 1.25em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25em;
}
.category_area input[type="radio"] {
  display: none;
}
.category_area label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
  height: 3em;
  border-radius: 0.75em;
  box-sizing: border-box;
  background-color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.category_area label[for="radio_child"] {
  color: var(--child-color);
}
.category_area label[for="radio_general"] {
  color: var(--general-color);
}
.category_area label[for="radio_child"]::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  background-color: var(--child-color);
  -webkit-mask: url("../images/icon_child.svg") no-repeat center / contain;
  mask: url("../images/icon_child.svg") no-repeat center / contain;
}
.category_area label[for="radio_general"]::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  background-color: var(--general-color);
  -webkit-mask: url("../images/icon_general.svg") no-repeat center / contain;
  mask: url("../images/icon_general.svg") no-repeat center / contain;
}
input#radio_child:checked + label[for="radio_child"] {
  border: 3px solid var(--child-color);
}
input#radio_general:checked + label[for="radio_general"] {
  border: 3px solid var(--general-color);
}
input#radio_child:checked + label[for="radio_child"]::after,
input#radio_general:checked + label[for="radio_general"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1.5em;
  height: 0.75em;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  .category_area {
    margin-bottom: 1.2em;
  }
}
@media screen and (max-width: 600px) {
  .category_area {
    width: calc(100% - 1em);
  }
  .category_area {
    gap: 0.5em;
    margin-bottom: 1em;
  }
  .category_area label {
    font-size: 1.125em;
  }
}
@media screen and (max-width: 480px) {
  .category_area label {
    font-size: 1em;
  }
}
@media screen and (max-width: 374px) {
  .category_area label {
    font-size: 4.25vw;
  }
}

/* トップページ｜検索 */
/* ブラウザ修飾を消す */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  font-size: var(--font-size-base);
}
.search_area p {
  color: var(--emphasis-color);
  font-weight: 700;
  margin-bottom: 0.25em;
}
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}
.search_box {
  position: relative;
  width: 30em;
  height: 2.25em;
  max-width: 100%;
  border-radius: 1.125em;
  background-color: #f0f0f0;
  overflow: hidden;
}
.search_box form {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.search_input {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.search_box input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 1.125em 0 0 1.125em;
  background: transparent;
  padding: 0 1em;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.2;
}
/* 検索欄はブラウザ標準のフォーカス枠を出さない。
   角丸の検索ボックスと形が合わず、Safari では虫眼鏡アイコンの左に青い線、
   Chrome では枠全体が青く見えてしまうため（枠自体が入力位置を示しているので
   フォーカス表示は重複とみなして消す） */
.search_box input:focus,
.search_box input:focus-visible {
  outline: none;
  box-shadow: none;
}
.clear_button {
  position: absolute;
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);

  width: 1.5em;
  height: 1.5em;

  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.search_box button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--emphasis-color);
  border: none;
  width: 2.5em;
  height: 100%;
  border-radius: 0 1.125em 1.125em 0;
  cursor: pointer;
  font-size: 1em; /* common_2022で0にされているので、ここで1emに戻す */
}
.search_box button img {
  display: block;
  font-size: 1em;
  height: 1.0625em;
  width: auto;
}
@media screen and (max-width: 600px) {
  .search_area {
    font-size: 4.25vw;
  }
  .search_box {
    position: relative;
    width: 84vw;
    height: 2.25em;
    max-width: 100%;
    border-radius: 1.125em;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}

/* トップページ｜対象年齢＆シリーズ・カテゴリ名 */
.pulldown_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0.75em;
  font-size: var(--font-size-base);
}
.pulldown_area label {
  box-sizing: border-box;
  color: var(--emphasis-color);
  font-weight: 700;
  margin-bottom: 0.25em;
}
.pulldown_area select {
  width: 15.5em;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 2.25em;
  padding: 0 2.5em 0 0.75em;

  border: 1px solid var(--emphasis-color);
  color: var(--emphasis-color);
  border-radius: 0;
  background-color: #fff;
  background-image:
    url("../images/icon_select.svg"),
    linear-gradient(var(--emphasis-color), var(--emphasis-color));
  background-repeat: no-repeat, no-repeat;
  background-position:
    right 0.5em center,
    right -1px center;
  background-size:
    1em 1em,
    2em 100%;

  font-size: 1em;
  font-weight: 400;
}
.pulldown_area select.is-selected {
  font-weight: 700;
}
@media screen and (max-width: 600px) {
  .pulldown_area {
    font-size: 4.25vw;
  }
  .pulldown_area select {
    width: 66vw;
  }
}

/* 図書館＆書店＆著作権｜ページタイトル */
.page_title {
  font-size: var(--font-size-base);
  height: 6.625em;
  padding-top: 60px; /* ヘッダー部分fixedのため高さ分の余白を確保 */
  background-color: var(--emphasis-color);
  display: flex;
  justify-content: center;
}
.page_title h2 {
  width: calc(var(--font-size-base) * 15);
  height: calc(var(--font-size-base) * 2.5);
  font-weight: 500;
  font-size: 1.25em;
  line-height: 2;
  text-align: center;
  color: var(--emphasis-color);
  background-image: url("../images/page_title_bg.svg");
  background-size: calc(var(--font-size-base) * 15)
    calc(var(--font-size-base) * 2.5);
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 600px) {
  .page_title {
    display: none;
  }
}
/* 図書館＆書店＆著作権＆お知らせ一覧｜見出し */
.heading_area {
  margin: 3em auto 0;
  font-size: var(--font-size-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
}
.heading_area h3 {
  font-size: 1.125em;
  font-weight: 900;
  line-height: 1;
  position: relative;
  display: inline-block;
}
.heading_area h3::before {
  content: "";
  position: absolute;
  left: -2.5em;
  top: -0.44em;
  width: 0.88em;
  height: 1.88em;
  background-color: var(--emphasis-color);
  -webkit-mask: url("../images/flash_left.svg") no-repeat center / contain;
  mask: url("../images/flash_left.svg") no-repeat center / contain;
}
.heading_area h3::after {
  content: "";
  position: absolute;
  right: -2.5em;
  top: -0.44em;
  width: 0.88em;
  height: 1.88em;
  background-color: var(--emphasis-color);
  -webkit-mask: url("../images/flash_left.svg") no-repeat center / contain;
  mask: url("../images/flash_left.svg") no-repeat center / contain;
  transform: scaleX(-1); /* 左右反転 */
}
.heading_area h4 {
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  margin: 0; /* common_2022でmarginがついているため、ここで0にする */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  background-color: var(--bg-color);
  width: calc(100% - 9.375em);
  max-width: 700px;
  text-align: center;
}
.heading_area h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.625em;
  height: 100%;
  background-color: var(--emphasis-color);
}
.heading_area h4::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0.625em;
  height: 100%;
  background-color: var(--emphasis-color);
}
/* 600以下で文字サイズ再定義 */
@media screen and (max-width: 600px) {
  .heading_area {
    font-size: 4.25vw;
  }
}
@media screen and (max-width: 540px) {
  .heading_area h3::before {
    left: -2em;
  }
  .heading_area h3::after {
    right: -2em;
  }
  .heading_area h4 {
    width: calc(100% - 2em);
  }
}

/* 図書館｜〜年度の新刊 */
.newrelease_area {
  margin: 2.5em 0;
  font-size: calc(var(--font-size-base) * 0.9375);
  --thumb-size: 270px;
}
.newrelease_area .tile_list {
  width: calc(100% - 4em);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5em 2em;
}
.newrelease_area .tile_item {
  flex: 0 0 var(--thumb-size);
  position: relative;
}
.newrelease_area .tile_item .thumb {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: var(--thumb-size);
  height: calc(var(--thumb-size) * 2 / 3); /* サムネイル領域は３：２ */
  margin-bottom: 0.75em;
}
.newrelease_area .thumb_inner {
  position: relative;
  border: #ccc 1px solid;
  max-width: 100%;
  display: inline-block;
}
.newrelease_area .tile_item .thumb img {
  /* サイト共通リセット（img { font-size: 0 }）のままだと、下の max-height 内の
     --thumb-size（スマホ幅では 2em などを含む calc）が img 上で枠と違う値に
     解決されてしまうため、枠側と同じ文字サイズを継承して計算を一致させる */
  font-size: inherit;
  max-width: 100%;
  /* サムネイル領域は 3:2（高さ = --thumb-size の 2/3）なので、縦長の書影も
     その高さに収める。100% 指定は途中の .thumb_inner に高さが無く効かない。
     -2px は .thumb_inner の枠線（上下 1px）ぶん */
  max-height: calc(var(--thumb-size) * 2 / 3 - 2px);
  width: auto;
  height: auto;
}
@media screen and (max-width: 686px) {
  .newrelease_area {
    --thumb-size: calc((100vw - 32px - 24px - 4em - 2em) / 2); /* 2列表示 */
  }
}
@media screen and (max-width: 600px) {
  .newrelease_area {
    --thumb-size: calc((100vw - 32px - 24px - 2em - 2em) / 2); /* 2列表示 */
  }
  .newrelease_area .tile_list {
    width: calc(100% - 2em);
    column-gap: 5vw;
  }
}
@media screen and (max-width: 450px) {
  .newrelease_area {
    font-size: 4.25vw;
  }
}
@media screen and (max-width: 420px) {
  .newrelease_area {
    font-size: 4vw;
    --thumb-size: calc((100vw - 16px - 24px - 2em - 2em) / 2); /* 2列表示 */
  }
}

/* 図書館｜カテゴリフィルター */
.filter_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0.5em;
  font-size: var(--font-size-base);
}
.filter_area p {
  color: var(--emphasis-color);
  font-weight: 700;
  margin: 1em auto 1em;
}
.filter_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-evenly;
  font-size: 0.875em;
  gap: 1em;
}
.filter_item {
  cursor: pointer; /* リンクではないがクリックできるので指カーソルにする */
  box-sizing: border-box;
  border-radius: 1em;
  color: var(--emphasis-color);
  border: 1px solid var(--emphasis-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
}
.filter_item.selected {
  background-color: var(--bg-color);
}
@media screen and (max-width: 600px) {
  .filter_list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 450px) {
  .filter_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 図書館＆書店｜タイル：ダウンロード用 */
.download_area {
  width: calc(100% - 1em);
  margin: 1.5em auto 0;
  font-size: calc(var(--font-size-base) * 0.9375);
  --tile-size: 200px;
  --thumb-size: 150px;
}
#bookstore .download_area {
  margin-top: 2.5em;
}
.download_area .tile_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--tile-size));
  /* タイル４枚の最小幅は、枠外16*2px、枠線12*2px、download_areaは-1em、200*4pxと間隔30*3pxで961px */
  /* タイル３枚の最小幅は、枠外16*2px、枠線12*2px、download_areaは-1em、200*3pxと間隔30*2pxで731px */
  /* タイル２枚の最小幅は、枠外16*2px、枠線12*2px、download_areaは-1em、200*2pxと間隔30*1pxで501px */
  justify-content: center;
  gap: 2em;
}
.download_area .tile_item {
  width: var(--tile-size);
  position: relative;
}
.download_area .tile_item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.download_area .tile_item .thumb {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: var(--thumb-size);
  height: calc(var(--thumb-size) * 4 / 3); /* サムネイル領域は３：４ */
  overflow: hidden;
  margin-bottom: 0.75em;
}
.download_area .thumb_inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.download_area .tile_item .thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  border: #ccc 1px solid;
}
.tile_downloadtitle {
  font-size: calc(var(--font-size-base) * 0.875);
  font-weight: 900;
  line-height: 1.2;
}
.tile_downloadtitle::before {
  content: "";
  float: left;
  width: 3em;
  height: 3.6em;
  margin-right: 0.75em;
  background: url("../images/icon_pdf.svg") no-repeat center / contain;
}
.filesize {
  display: block;
  font-size: calc(var(--font-size-base) * 0.75);
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0.1em;
}
.filesize::before {
  content: none;
}
@media screen and (max-width: 500px) {
  .download_area {
    font-size: 4vw;
    --tile-size: calc((100vw - 16px - 24px - 2em - 2em) / 2); /* 2列表示 */
    --thumb-size: calc(
      (100vw - 16px - 24px - 2em - 2em) / 2 * 0.9
    ); /* 2列表示 */
  }
  .tile_downloadtitle {
    font-size: 3.5vw;
  }
  .filesize {
    font-size: 3.2vw;
  }
  .tile_downloadtitle::before {
    width: 10vw;
    height: 12vw;
    margin-right: 1.5vw;
  }
}
/* 書店｜アコーディオン */
.accordion summary {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-base);
  width: calc(100% - 9.375em);
  height: 2em;
  border-radius: 1em;
  border: 1px solid var(--emphasis-color);
  background-color: var(--pale-color);
  margin: 0 auto 3em;
  max-width: 700px;
  text-align: center;
}
.accordion_title {
  color: var(--emphasis-color);
  font-weight: 700;
  position: relative;
}
.accordion_title::after {
  content: "";
  position: absolute;
  right: -1.25em;
  top: 0.375em;
  width: 0.875em;
  height: 0.875em;
  background-color: var(--emphasis-color);
  -webkit-mask: url("../images/icon_arrow.svg") no-repeat center / contain;
  mask: url("../images/icon_arrow.svg") no-repeat center / contain;
}
.accordion[open] .accordion_title::after {
  transform: rotate(180deg);
}
.books .accordion {
  border-bottom: none; /* common_2022でborder-bottomがついているため、ここでnoneにする */
}
/* 600px以下で文字サイズ再定義 */
@media screen and (max-width: 600px) {
  .accordion summary {
    font-size: 4.25vw;
  }
}
/* ほかの見出しと同じブレークポイントに */
@media screen and (max-width: 540px) {
  #bookstore summary {
    width: calc(100% - 2em);
  }
}

/* 図書館＆書店｜タイル：ダウンロード用横長 */
.download_area.landscape .tile_item .thumb {
  height: calc(var(--thumb-size) * 2 / 3); /* サムネイル領域は３：２ */
}

/* 詳細ページ｜書誌情報 */
.detail_area {
  width: calc(100% - 2em);
  max-width: calc(800px + 4em);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--detail-thumb-size) 1fr;
  gap: 2em;
}
.detail_thumb {
  width: var(--detail-thumb-size);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* 高さは持たない */
}
.detail_thumb img {
  max-width: 100%;
  max-height: var(--detail-thumb-size);
  width: auto;
  height: auto;
}
.detail_text {
  width: 100%;
}
.detail_area h2 {
  font-size: 1.375em;
  font-weight: 500;
  line-height: 1.2;
  color: #3c3c43;
}
.detail_area .series_title,
.detail_area .subtitle {
  font-size: 1.125em;
  color: #666;
}
.detail_area .special_note {
  font-size: 1em;
  color: #666;
}
.authors_area a,
.info_table a {
  color: var(--emphasis-color);
  text-decoration: underline;
}
.authors_area {
  font-size: 0; /* dt,ddがソース側では改行されるため、それによる隙間を消す　*/
  margin: calc(var(--font-size-base) * 0.5) 0;
}
.authors_area dt,
.authors_area dd {
  font-size: var(--font-size-base);
  display: inline;
  margin: 0;
  padding: 0;
}
.authors_area dt::after {
  content: "：";
}
.authors_area dd + dt::before {
  content: "　／　";
}
.info_table {
  font-size: var(--font-size-base);
  width: 100%;
  max-width: 400px;
  border-collapse: collapse;
  margin: 1em 0;
}
.info_table th,
.info_table td {
  padding: 0.25em 1em;
  border: 1px solid var(--light-color);
}
.info_table th {
  text-align: center;
  background-color: var(--pale-color);
  white-space: nowrap;
}
.detail .buy_button {
  width: fit-content;
  font-size: 1.125em;
  border-radius: 1em;
  border: 2px solid var(--emphasis-color);
  padding: 0.125em 2.5em;
  margin: 0 auto;
}
.detail .buy_button a {
  color: var(--emphasis-color);
  font-weight: 700;
}
/* 詳細ページ｜購入パネル（「購入する」で表示。開閉は js/books_public.js、
   中身は templates/detail.html。見た目は旧サイトの product.css の移植） */
#grayLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999; /* ヘッダのナビ（z-index:1301）より上に重ねる */
}
#purchasePanel {
  display: none; /* 「購入する」を押したときだけ JS が表示する */
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 770px;
  background-color: #e5e5e5;
  padding: 40px;
  box-sizing: border-box;
  z-index: 10000; /* #grayLayer よりさらに上 */
}
#purchasePanel a {
  color: #000;
  text-decoration: none;
}
#purchasePanel .block01 {
  border-bottom: 1px dashed #999;
}
#purchasePanel .block01 > p {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
}
#purchasePanel .block01 .links {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ストアのボタンを 3 列に並べる */
  gap: 14px;
  margin-bottom: 20px;
}
#purchasePanel .block01 .links p {
  margin: 0;
}
#purchasePanel .block01 .links img {
  display: block;
  width: 100%;
}
#purchasePanel .block02 {
  padding-top: 20px;
}
#purchasePanel .block02 > p {
  font-size: 0.875rem;
}
#purchasePanel .block02 .btn {
  display: block;
  width: 55%;
  margin: 1em auto;
  padding: 1.4em 0;
  text-align: center;
  background-color: #fffddd;
  box-shadow: 1px 1px 1px #868686;
}
#purchasePanel .cancel {
  position: absolute; /* パネルの右上の外側に × を置く */
  top: -10px;
  right: -60px;
  margin: 0;
  cursor: pointer;
}
@media screen and (max-width: 900px) {
  /* × ボタンが画面からはみ出さないよう、狭い画面ではパネルの上に載せる */
  #purchasePanel .cancel {
    top: -55px;
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  #purchasePanel {
    width: 90%;
    padding: 20px;
  }
  #purchasePanel .block01 .links {
    grid-template-columns: repeat(2, 1fr); /* 狭い画面では 2 列 */
  }
  #purchasePanel .block02 .btn {
    width: 95%;
    font-size: 0.875rem;
  }
  #purchasePanel .cancel img {
    width: 20px;
  }
}
@media screen and (max-width: 840px) {
  .info_table th,
  .info_table td {
    padding: 0.25em 0.5em;
  }
}
@media screen and (max-width: 800px) {
  .detail_area {
    grid-template-columns: 300px 1fr;
    place-items: center;
    gap: 2em;
    --detail-thumb-size: 300px;
  }
}
@media screen and (max-width: 720px) {
  .detail_area {
    grid-template-columns: 1fr;
    gap: 1em;
    --detail-thumb-size: 400px;
    /*
    background-color: var(--pale-color);
    */
  }
  .info_table {
    max-width: 100%;
  }
}
@media screen and (max-width: 600px) {
  /* main_frame にfont-size:4.25vwが設定されてるので上書き */
  .detail_area {
    font-size: var(--font-size-base);
  }
}
@media screen and (max-width: 502px) {
  .detail_area {
    --detail-thumb-size: calc(100vw - 6.5em);
  }
  .info_table {
    /*
    width: calc(100vw - 6.5em);
    */
  }
}
@media screen and (max-width: 420px) {
  .detail_area {
    font-size: 4.25vw;
  }
  .detail_area h2 {
    font-size: 1.125em;
  }
  .detail_area .series_title,
  .detail_area .subtitle {
    font-size: 1.0625em;
  }
  .authors_area dt,
  .authors_area dd {
    font-size: 4.25vw;
  }
  .info_table {
    font-size: 3.75vw;
  }
  .info_table th,
  .info_table td {
    padding: 0.25em 0.5em;
  }
  .detail .buy_button {
    width: fit-content;
    font-size: 4.8vw;
  }
}

/* 詳細ページ｜紹介文 */
.description_area {
  font-size: var(--font-size-base);
  width: calc(100% - 2em);
  max-width: 800px;
  margin: 1.5em auto;
  color: #3c3c43;
}
.description_text {
  font-size: var(--font-size-base);
  line-height: 1.875;
}
.composition_text {
  margin: 1.5em auto;
  font-size: 0.875em;
  line-height: 1.75;
  padding: 1em 2em;
  position: relative;
}
.composition_text::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-color: var(--light-color);

  -webkit-mask:
    url(../images/bracket_top_left.svg) left top / 14px 14px no-repeat,
    url(../images/bracket_top_right.svg) right top / 14px 14px no-repeat,
    url(../images/bracket_bottom_right.svg) right bottom / 14px 14px no-repeat,
    url(../images/bracket_bottom_left.svg) left bottom / 14px 14px no-repeat;

  mask:
    url(../images/bracket_top_left.svg) left top / 14px 14px no-repeat,
    url(../images/bracket_top_right.svg) right top / 14px 14px no-repeat,
    url(../images/bracket_bottom_right.svg) right bottom / 14px 14px no-repeat,
    url(../images/bracket_bottom_left.svg) left bottom / 14px 14px no-repeat;
}
.composition_text::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    /* 左外側 */
    linear-gradient(var(--light-color), var(--light-color)) left 0 top 14px /
      1px calc(100% - 28px) no-repeat,
    /* 左内側 */ linear-gradient(var(--light-color), var(--light-color)) left
      3.5px top 14px / 1px calc(100% - 28px) no-repeat,
    /* 右内側 */ linear-gradient(var(--light-color), var(--light-color)) right
      3.5px top 14px / 1px calc(100% - 28px) no-repeat,
    /* 右外側 */ linear-gradient(var(--light-color), var(--light-color)) right 0
      top 14px / 1px calc(100% - 28px) no-repeat;
}
.review_text {
  background-color: var(--pale-color);
  line-height: 1.875;
  padding: 1em;
  border-radius: 1em;
  margin: 1.5em auto;
}
@media screen and (max-width: 420px) {
  .description_area,
  .description_text {
    font-size: 4.25vw;
  }
  .composition_text {
    font-size: 0.875em;
  }
}

/* 詳細ページ｜特設サイト */
.special_area {
  width: calc(100% - 2em);
  max-width: 800px;
  margin: 1.5em auto;
  font-size: 0.875em;
  color: #3c3c43;
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  justify-content: center;
  align-items: center;
}
.special_area .special_banner {
  width: 300px;
}
.special_area .special_banner img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 420px) {
  .special_area {
    font-size: 3.75vw;
  }
}

/* 詳細ページ｜おすすめの本 */
.extra_title {
  width: calc(100% - 2em);
  max-width: 800px;
  margin: 2em auto;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #989898;
}
.extra_title::before,
.extra_title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.extra_title span {
  padding: 0 1em;
}
@media screen and (max-width: 420px) {
  .extra_title {
    font-size: 4vw;
  }
}

/* 詳細ページ｜戻るボタン
   角丸の枠・余白・矢印アイコンはリンク（a）側に付けてある。
   （枠の中ならどこをクリックしてもリンクが効くようにするため） */
.back_button {
  font-size: var(--font-size-base);
  margin: 2em auto;
  display: flex;
  justify-content: center;
}
.back_button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5em;
  border-radius: 1em;
  border: 1px solid #989898;
  padding: 0.125em 1.5em;
}
.back_button a::before {
  content: "";
  display: inline-block;
  width: 1.625em;
  height: 1.6255em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  background-color: #989898;
  -webkit-mask: url("../images/icon_back.svg") no-repeat center / contain;
  mask: url("../images/icon_back.svg") no-repeat center / contain;
}
.back_button.to_top {
  color: var(--emphasis-color);
}
.back_button.to_top a {
  width: 9em;
  border-color: var(--emphasis-color);
}
.back_button.to_top a::before {
  background-color: var(--emphasis-color);
}

/* フィルター済みページ */
/*
main.searched {
  font-size: var(font-size-base);
}
.filter .frame_inner {
  margin: 2.5em auto; /* 中央揃えのため左右はauto 
  width: calc(100% - 5em); /* 左右も2.5emはマージン取る 
  max-width: calc(800px + 2em); /* サムネイル400px + 余白2em + 説明文400px 
}
*/
.searched .keyword,
.searched .series_name {
  font-size: calc(var(--font-size-base) * 1.125);
  font-weight: 900;
  line-height: 1;
  color: var(--emphasis-color);
  text-align: center;
  position: relative;
}
.searched .target_age::before {
  content: "対象年齢：";
}
.searched .series_text {
  font-size: var(--font-size-base);
  margin: 1em auto;
  width: calc(100% - 4em);
  max-width: 800px;
}
@media screen and (max-width: 600px) {
  .searched .series_text {
    width: calc(100% - 2em);
  }
}
@media screen and (max-width: 420px) {
  .searched .series_text {
    font-size: 4.25vw;
  }
}
/*
@media screen and (max-width: 420px) {
  main.filter {
    font-size: 4.25vw;
  }
}
*/

/* おしらせ一覧 */
main.news {
  font-size: var(--font-size-base);
}
.news .frame_inner {
  margin: 2.5em auto; /* 中央揃えのため左右はauto */
  width: calc(100% - 5em); /* 左右も2.5emはマージン取る */
  max-width: 860px;
}
.news .news_list {
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin: 2.5em auto;
  display: grid;
  grid-template-columns: max-content 1fr;
}
.news .news_list dt {
  font-size: 0.875em;
  padding: calc(1.5 * var(--font-size-base)) var(--font-size-base)
    calc(0.5 * var(--font-size-base));
}
.news .news_list dd {
  padding: 1.5em var(--font-size-base) 0.5em 0;
}
.news .news_list dt,
.news .news_list dd {
  border-bottom: 1px solid var(--copyright-color);
}
.news_list .instagram {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.5em;
  margin-bottom: -0.25em;
  background: url("../images/icon_instagram.svg") no-repeat center / contain;
}
.news_list .twitter {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.5em;
  margin-bottom: -0.25em;
  background: url("../images/icon_x.svg") no-repeat center / contain;
}
@media screen and (max-width: 600px) {
  .news .frame_inner {
    width: calc(100% - 3em);
  }
}
@media screen and (max-width: 420px) {
  main.news {
    font-size: 4.25vw;
  }
  .news .news_list {
    grid-template-columns: 1fr;
  }
  .news .news_list dt {
    padding: 1.5em 0 0 0;
  }
  .news .news_list dd {
    padding: 0 0 0.5em 0.25em;
  }
  .news .news_list dt {
    border-bottom: none;
  }
}

/* 著作物のご利用 */
.intro_area,
.unnecessary_area,
.request_area {
  font-size: var(--font-size-base);
  width: calc(100% - 2em);
  max-width: 800px;
  margin: 1.5em auto;
}
.copyright_text + .copyright_text {
  margin-top: 0.5em;
}
.link_text {
  font-weight: 700;
  color: var(--website-gold-color);
}
.emphasis_text {
  font-weight: 700;
  color: var(--emphasis-color);
}
.link_external::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--website-gold-color);
  -webkit-mask: url("../images/icon_external.svg") no-repeat center / contain;
  mask: url("../images/icon_external.svg") no-repeat center / contain;
}
#copyright .heading_area {
  margin-top: 2em;
  margin-bottom: 2em;
}
.unnecessary_list_block + .unnecessary_list_block {
  margin-top: 1em;
}
.unnecessary_list {
  padding-left: 1em;
  text-indent: -1em;
}
.unnecessary_condition {
  margin: 0.5em 0;
  padding-left: 2em;
  position: relative;
  /*
  background-color: aqua;
  */
}
.unnecessary_condition::before {
  content: "";
  position: absolute;
  left: 1.3em;
  top: 0.75em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--emphasis-color);
  transform: translateY(-50%);
}
.neccessary_note {
  margin: 0.5em 0;
  padding-left: 2em;
  text-indent: -1em;
}
.neccessary_note::before {
  content: "※";
}
/* 著作権アコーディオン */
#copyright .accordion {
  width: 100%;
  max-width: 700px;
  margin: 1.5em auto 3em;
  border-radius: 1em;
  background-color: var(--pale-color);
}
#copyright .accordion summary {
  width: 100%;
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
}
.copyright_law {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  padding: 1em;
}
.copyright_law + .copyright_law {
  padding-top: 0;
}

#request.heading_area {
  margin-top: 5em;
  margin-bottom: 1em;
  --emphasis-color: var(--website-gold-color);
  --bg-color: var(--website-gold-bg-color);
}
.request_area {
  font-size: var(--font-size-base);
  margin: 1.5em auto;
}
.request_grid {
  margin-top: 2em;
  margin-inline: auto;
  width: fit-content;
  display: grid;
  grid-template-columns: max-content 2em 21em;
  gap: 0.5em;
  align-items: center;
  --emphasis-color: var(--website-gold-color);
}
.request_file {
  display: flex;
  align-items: center;
}
.request_download_title {
  font-size: calc(var(--font-size-base) * 0.875);
  line-height: 1.2;
}
.request_file::before {
  content: "";
  float: left;
  width: 3em;
  height: 3.6em;
  margin-right: 0.75em;
  background: url("../images/icon_pdf.svg") no-repeat center / contain;
}
.request_to_arrow {
  content: "";
  width: 2em;
  height: 2em;
  background-color: var(--emphasis-color);
  -webkit-mask: url("../images/icon_arrow.svg") no-repeat center / contain;
  mask: url("../images/icon_arrow.svg") no-repeat center / contain;
  transform: rotate(-90deg);
}
.request_to_flex {
  display: flex;
  flex-direction: column;
}
.request_to_block {
  display: flex;
}
.request_to_block dt,
.request_to_block dd {
  font-size: var(--font-size-base);
  display: inline;
  margin: 0;
  padding: 0;
}
.request_to_block dt::after {
  content: "：";
}
/* 670px以下では、メールアドレスが溢れるので縦並び */
@media screen and (max-width: 670px) {
  .request_grid {
    margin-top: 2em;
    margin-inline: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    --emphasis-color: var(--website-gold-color);
  }
  .request_file {
    justify-self: center;
  }
  .request_to_arrow {
    content: "";
    width: 2em;
    height: 2em;
    background-color: var(--emphasis-color);
    -webkit-mask: url("../images/icon_arrow.svg") no-repeat center / contain;
    mask: url("../images/icon_arrow.svg") no-repeat center / contain;
    transform: rotate(0deg);
    justify-self: center;
  }
  .request_to_title {
    text-align: center;
  }
}
/* 600px以下ではアコーディオンが溢れる */
@media screen and (max-width: 600px) {
  .intro_area,
  .unnecessary_area,
  .request_area {
    font-size: 4.25vw;
  }
  /* 通常540pxがブレークポンとだが、ここは見出しが溢れるので */
  .heading_area h4 {
    width: calc(100% - 2em);
  }
  .request_download_title {
    font-size: calc(4.25vw * 0.875);
  }
  .filesize {
    font-size: 3.2vw;
  }
  .request_to_address,
  .request_to_block dt,
  .request_to_block dd {
    font-size: 3.75vw;
  }
}