@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@700&family=Oswald&display=swap");
/* ------------------------------
* BASE/RESET
* ICON FONT
* LAYOUT
    contents width
    column
    header
    nav
    footer
* COMMON PARTS
    breadcrumb
    heading
    list
    link
    button
    media
    tag
    panel
    tab
    slide
    box
    pagination
    form
    align
    margin padding
    font
    sns
* TOP PAGE
* ARTICLE PAGE
* BOOK PAGE
* NEWS PAGE
* FEATURE PAGE
* SEARCH PAGE
* LEGACY STYLE
------------------------------ */
/* BASE
------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
}

body {
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  font-size: 16px;
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  overflow-wrap: break-word;
}

img, iframe {
  outline: none;
  vertical-align: bottom;
}

img {
  max-width: 100%;
  height: auto;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 24px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #B7183F;
}

p {
  line-height: 1.8;
}

/* ICON FONT
------------------------------ */
@font-face {
  font-style: normal;
  font-weight: normal;
  src: url("/src/fonts/icon-font.eot");
  src: url("/src/fonts/icon-font.eot") format("embedded-opentype"), url("/src/fonts/icon-font.ttf") format("truetype"), url("/src/fonts/icon-font.woff") format("woff"), url("/src/fonts/icon-font.svg") format("svg");
  font-family: "icon-font";
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  font-family: "icon-font" !important;
  text-transform: none;
}

.icon-book:before {
  content: "\e906";
}

.icon-cart:before {
  content: "\e901";
}

.icon-facebook:before {
  content: "\ea90";
}

.icon-twitter:before {
  /*content: "\ea96";*/
  content: "\e90a";
}

.icon-pdf:before {
  content: "\eadf";
}

.icon-tablet:before {
  content: "\e902";
}

.icon-calendar:before {
  content: "\e903";
}

.icon-arrow:before {
  content: "\e904";
}

.icon-launch:before {
  content: "\e900";
}

.icon-search:before {
  content: "\e905";
}

.icon-minus:before {
  content: "\e908";
}

.icon-plus:before {
  content: "\e907";
}

.icon-medal:before {
  content: "\e909";
}

.icon-x:before {
  content: "\e90a";
}

.icon-bullhorn:before {
  content: "\e91a";
}

.icon-books:before {
  content: "\e920";
}

.icon-history:before {
  content: "\e94d";
}

/* LAYOUT
------------------------------ */
.wrapper {
  overflow: clip;
}

.contents-l {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 16px;
}

.contents-m {
  max-width: 860px;
  margin: 0 auto;
}

.contents-block {
  padding-bottom: clamp(40px, 8vw, 80px);
}

/* column */
.col {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 24px);
}
.col .col-item {
  width: calc(100% - clamp(16px, 2.4vw, 24px));
}
.col.col-2, .col.col-2-1 {
  flex-wrap: wrap;
}
.col.col-2 .col-item, .col.col-2-1 .col-item {
  width: calc(50% - clamp(16px, 2.4vw, 24px));
}
.col.col-3-2 {
  flex-wrap: wrap;
  justify-content: center;
}
.col.col-3-2 .col-item {
  width: calc(33.3% - clamp(16px, 2.4vw, 24px));
}
.col.col-5-2 {
  flex-wrap: wrap;
  justify-content: center;
}
.col.col-5-2 .col-item {
  width: calc(20% - clamp(16px, 2.4vw, 24px));
}

@media screen and (max-width: 1100px) {
  .col.col-3-2 {
    flex-wrap: wrap;
  }
  .col.col-3-2 .col-item {
    width: calc(50% - clamp(16px, 2.4vw, 24px));
  }
}
@media screen and (max-width: 960px) {
  .col.col-5-2 {
    flex-wrap: wrap;
  }
  .col.col-5-2 .col-item {
    width: calc(33.3% - clamp(16px, 2.4vw, 24px));
  }
}
@media screen and (max-width: 640px) {
  .col.col-2-1 .col-item {
    width: 100%;
  }
  .col.col-5-2 {
    flex-wrap: wrap;
  }
  .col.col-5-2 .col-item {
    width: calc(50% - clamp(16px, 2.4vw, 24px));
  }
}
/* header */
.header-wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1366px;
  margin: 16px auto;
  padding: 0 16px;
}

.header-logo img {
  max-height: 50px;
}

.header-utilnav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-utilnav li {
  font-size: clamp(12px, 1.4vw, 14px);
  list-style-type: none;
}
.header-utilnav a {
  color: #333;
  text-decoration: none !important;
}
.header-utilnav a:hover {
  color: #B7183F;
}

.header-utilnav-link {
  display: flex;
  gap: 24px;
}

.header-utilnav-sns {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-utilnav-sns a {
  color: #777 !important;
  font-size: 24px;
  text-decoration: none !important;
}
.header-utilnav-sns a:hover {
  color: #B7183F !important;
}

.header-search form {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  position: relative;
  max-width: 240px;
  height: 40px;
  border: 1px solid #bababa;
  border-radius: 3px;
  text-align: left;
}
.header-search .inputKeyword {
  height: 100%;
}
.header-search .inputKeyword input {
  width: calc(100% - 40px);
  height: 100%;
  padding: 0 8px;
  border: none;
  outline: none;
  background: transparent;
}
.header-search .searchSubmit {
  position: absolute;
  top: calc(50% - 12px);
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  outline: none;
  background: transparent url(/assets/images/icon_search.png) no-repeat center center;
  text-indent: -9999px;
  cursor: pointer;
}
.header-search .header-search-trigger {
  display: none;
}

@media screen and (max-width: 1100px) {
  .wrapper {
    padding-top: 44px;
  }

  .wrapper > header {
    z-index: 99999;
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
  }
}
/* nav */
@media screen and (max-width: 1100px) {
  body.is-menu-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.header-contents {
  height: 50px;
  background: #B7183F;
}

#header-sp-btn {
  display: none;
}

#header-nav {
  width: 100%;
  max-width: 1366px;
  height: 100%;
  margin: 0 auto;
}

.header-menu {
  display: flex;
  height: 100%;
  padding-left: 0 !important;
}
.header-menu li {
  padding: 0 !important;
  list-style: none;
}
.header-menu li.sp-only {
  display: none;
}
.header-menu li, .header-menu a {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bold;
}
.header-menu a {
  color: #fff !important;
  text-decoration: none !important;
}

.dropdown-trigger {
  position: relative;
}
.dropdown-trigger::before {
  display: block;
  position: absolute;
  top: calc(50% - 4px);
  right: 16px;
  width: 8px;
  height: 8px;
  transform: rotate(135deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
}
.dropdown-trigger .dropdown {
  z-index: 9999;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  max-height: 0;
  padding-left: 0 !important;
  overflow: hidden;
  background: linear-gradient(to bottom, #B7183F 0%, #8a122f 100%);
  box-shadow: inset 0 4px 8px rgba(138, 18, 47, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
.dropdown-trigger .dropdown li {
  display: block;
  width: 100%;
}
.dropdown-trigger .dropdown a {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: clamp(14px, 1.6vw, 16px);
}
.dropdown-trigger .dropdown a:hover {
  background: #5d0c20;
}
.dropdown-trigger .dropdown.genre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100vw;
}
.dropdown-trigger .dropdown.genre li {
  width: 18%;
}
.dropdown-trigger .dropdown a[target=_blank] {
  position: relative;
  padding-right: 16px;
}
.dropdown-trigger .dropdown a[target=_blank]::after {
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  right: 8px;
  content: "";
  content: "\e900";
  font-size: 14px;
  font-family: "icon-font";
}
.dropdown-trigger:hover .dropdown {
  max-height: 2000px;
  overflow: visible;
  opacity: 1;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

@media screen and (max-width: 1100px) {
  .header-wrapper {
    height: 44px;
    margin: 0;
  }

  .header-contents {
    height: 0;
  }

  .header-logo {
    padding: 4px;
  }
  .header-logo img {
    height: 100%;
  }

  .header-utilnav-link,
.header-utilnav-sns {
    display: none;
  }

  .header-search {
    position: absolute;
    top: 0;
    right: 44px;
  }
  .header-search .header-search-wrapper {
    display: none;
    z-index: 5;
    position: absolute;
    top: 44px;
    right: -44px;
    width: 100vw;
    padding: 16px;
    background: #fff;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .header-search form {
    width: calc(100% - 16px);
    max-width: none;
    margin-left: 16px;
  }
  .header-search.is-open .header-search-wrapper {
    display: block;
    opacity: 1;
    transition: opacity 1s ease-in-out;
  }
  .header-search.is-open .header-search-trigger::before {
    transform: rotate(45deg);
    content: "\e907";
  }
  .header-search .header-search-trigger {
    display: flex;
    z-index: 5;
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: #fff;
  }
  .header-search .header-search-trigger::before {
    display: block;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    content: "";
    content: "\e905";
    color: #777;
    font-size: 24px;
    font-family: "icon-font";
    cursor: pointer;
  }

  #header-sp-btn {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #B7183F;
  }
  #header-sp-btn:hover {
    cursor: pointer;
  }
  #header-sp-btn .header-sp-btn-bar {
    position: relative;
    width: 50px;
    height: 50px;
  }
  #header-sp-btn .header-sp-btn-bar span {
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 28%;
    width: 45%;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    transition: all 0.4s;
  }
  #header-sp-btn .header-sp-btn-bar span:nth-of-type(2) {
    top: 23px;
  }
  #header-sp-btn .header-sp-btn-bar span:nth-of-type(3) {
    top: 31px;
  }
  #header-sp-btn.is-open .header-sp-btn-bar span {
    top: 18px;
    left: 35%;
    width: 30%;
    transform: translateY(6px) rotate(-45deg);
  }
  #header-sp-btn.is-open .header-sp-btn-bar span:nth-of-type(2) {
    opacity: 0;
  }
  #header-sp-btn.is-open .header-sp-btn-bar span:nth-of-type(3) {
    top: 30px;
    left: 35%;
    width: 30%;
    transform: translateY(-6px) rotate(45deg);
  }

  .is-menu-open .header-menu {
    height: 90vh;
    max-height: 2000px;
    overflow-y: auto;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
  }

  .header-menu {
    display: block;
    z-index: 9999;
    position: absolute;
    top: 44px;
    right: 0;
    width: 50%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
  }
  .header-menu li.sp-only {
    display: block;
  }
  .header-menu li, .header-menu a {
    display: block;
    width: 100%;
    height: auto;
  }
  .header-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background: #B7183F;
  }
  .header-menu .dropdown-trigger, .header-menu a {
    padding: 16px !important;
  }
  .header-menu .font-en {
    display: inline-block;
    margin-right: 8px;
  }

  .dropdown-trigger {
    position: relative;
  }
  .dropdown-trigger::before {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    display: block;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 8px;
    height: 8px;
    transform: rotate(135deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-radius: 2px;
    content: "";
  }
  .dropdown-trigger.is-open::before {
    transform: rotate(-45deg);
  }
  .dropdown-trigger .dropdown,
.dropdown-trigger .dropdown.genre {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    box-shadow: none;
    opacity: 1;
  }
  .dropdown-trigger.is-open .dropdown, .dropdown-trigger.is-open .dropdown.genre {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    background: none;
  }
  .dropdown-trigger.is-open .dropdown li, .dropdown-trigger.is-open .dropdown.genre li {
    width: 50%;
  }
}
@media screen and (max-width: 640px) {
  .header-menu {
    width: 100%;
  }
}
/* footer */
footer {
  margin-top: clamp(80px, 16vw, 160px);
  clear: both;
  border-top: 1px solid #777;
}

section:has(.top-brand) + footer {
  margin-top: 0;
}

.abj {
  border-bottom: 1px solid #777;
}
.abj .contents-l {
  display: flex;
  align-items: center;
  padding: clamp(40px, 8vw, 80px) 16px;
  gap: 16px;
}
.abj .abj-text {
  width: 100%;
  font-size: clamp(11px, 1.4vw, 14px);
  text-align: left;
}

.footer-nav {
  display: flex;
  justify-content: space-between;
  padding: clamp(40px, 8vw, 80px) 0;
  gap: 24px;
}
.footer-nav .footer-nav-item {
  width: 100%;
  font-size: clamp(12px, 1.6vw, 16px);
}
.footer-nav .footer-nav-link {
  padding-left: 0 !important;
}

.footer-nav-logo {
  text-align: center;
}
.footer-nav-logo img {
  width: 100%;
  max-width: 220px;
}
.footer-nav-logo .sns {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.footer-nav-logo .sns a {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 5.6vw, 56px);
  height: clamp(40px, 5.6vw, 56px);
  margin-top: 40px;
  border: 1px solid #777;
  border-radius: 50%;
}
.footer-nav-logo .sns a::before {
  display: block;
  position: absolute;
  content: "";
  content: "\ea90";
  color: #777;
  font-size: clamp(18px, 2.8vw, 28px);
  font-family: "icon-font";
}
.footer-nav-logo .sns a.twitter::before {
  content: "\e90a";
}

.footer-nav-link li {
  position: relative;
  margin-bottom: 16px;
  padding: 0;
  padding-left: 12px;
  font-weight: bold;
  list-style: none;
}
.footer-nav-link li::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 1.5em;
  background: #B7183F;
  content: "";
}
.footer-nav-link li ul {
  margin-top: 16px;
  padding-left: 0 !important;
}
.footer-nav-link li ul li {
  padding-left: 0;
  font-weight: normal;
}
.footer-nav-link li ul li::before {
  display: none;
}
.footer-nav-link li ul li ul {
  margin-left: 1em;
}
.footer-nav-link a {
  color: #333 !important;
  text-decoration: none !important;
}
.footer-nav-link a:hover {
  color: #B7183F !important;
}
.footer-nav-link a[target=_blank] {
  display: inline-block;
  position: relative;
  padding-right: 16px;
}
.footer-nav-link a[target=_blank]::after {
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  right: 0;
  content: "";
  content: "\e900";
  color: #777;
  font-size: 14px;
  font-family: "icon-font";
}

.footer-support-link {
  position: relative;
  padding: 40px 24px;
  background: #B7183F;
  color: #fff;
  font-size: clamp(11px, 1.4vw, 14px);
  text-align: center;
}
.footer-support-link::before, .footer-support-link::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  background: linear-gradient(to right, #F1CED9 0%, #F1CED9 20%, #E29FB3 20%, #E29FB3 40%, #D26E8C 40%, #D26E8C 60%, #C53F66 60%, #C53F66 80%, #B7183F 80%, #B7183F 100%);
  content: "";
}
.footer-support-link::after {
  right: 0;
  left: auto;
  background: linear-gradient(to right, #B7183F 0%, #B7183F 20%, #C53F66 20%, #C53F66 40%, #D26E8C 40%, #D26E8C 60%, #E29FB3 60%, #E29FB3 80%, #F1CED9 80%, #F1CED9 100%);
}
.footer-support-link ul {
  display: flex;
  z-index: 5;
  position: relative;
  justify-content: center;
  margin-bottom: 16px;
}
.footer-support-link li {
  padding: 0;
  list-style: none;
}
.footer-support-link li:last-of-type a {
  border: none;
}
.footer-support-link a {
  display: block;
  padding: 0 8px;
  border-right: 1px solid #fff;
  color: #fff !important;
  text-decoration: none !important;
}

.footer-copyright {
  z-index: 5;
  position: relative;
}

@media screen and (max-width: 640px) {
  .footer-nav {
    display: block;
  }
  .footer-nav .footer-nav-logo {
    margin-bottom: 40px;
  }
  .footer-nav .footer-nav-logo img {
    max-width: 50%;
  }

  .footer-nav-link li ul li {
    display: inline-block;
    margin-right: 24px;
  }

  .footer-support-link::before, .footer-support-link::after {
    top: auto;
    bottom: 0;
    width: 50%;
    height: 8px;
  }
  .footer-support-link ul {
    flex-wrap: wrap;
    gap: 8px 0;
  }
}
/* COMMON PARTS
------------------------------ */
/* breadcrumb */
.breadcrumb {
  font-feature-settings: "palt" 1;
  margin: 16px 0 24px;
  font-size: clamp(12px, 1.4vw, 14px);
}
.breadcrumb li {
  display: inline;
  position: relative;
  padding-right: 16px;
  list-style: none;
}
.breadcrumb li::after {
  display: block;
  position: absolute;
  top: 23%;
  right: 8px;
  width: 1px;
  height: 60%;
  transform: rotate(15deg);
  background: #333;
  content: "";
}
.breadcrumb li:last-of-type::after {
  display: none;
}
.breadcrumb li a {
  color: #333;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}

/* heading */
.ttl-page {
  font-feature-settings: "palt" 1;
  position: relative;
  margin-bottom: clamp(16px, 2.4vw, 24px);
  padding: 0 0 8px clamp(40px, 7.2vw, 72px);
  border-bottom: 1px solid #000;
  font-size: clamp(18px, 3.2vw, 32px);
  line-height: 1.3;
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
.ttl-page::before, .ttl-page::after {
  display: block;
  position: absolute;
  bottom: calc(8px + 0.2em);
  left: 0;
  width: clamp(24px, 4vw, 40px);
  height: 1em;
  background: linear-gradient(to right, #B7183F 0%, #B7183F 20%, rgba(183, 24, 63, 0.8) 20%, rgba(183, 24, 63, 0.8) 40%, rgba(183, 24, 63, 0.6) 40%, rgba(183, 24, 63, 0.6) 60%, rgba(183, 24, 63, 0.4) 60%, rgba(183, 24, 63, 0.4) 80%, rgba(183, 24, 63, 0.2) 80%, rgba(183, 24, 63, 0.2) 100%);
  content: "";
}
.ttl-page::after {
  display: block;
  position: absolute;
  bottom: calc(8px + 0.14em);
  left: clamp(24px, 4vw, 40px);
  width: clamp(5px, 1vw, 10px);
  transform: rotate(-15deg);
  transform-origin: top left;
  background: rgba(183, 24, 63, 0.1);
  content: "";
}

.page-header .page-header-award {
  position: relative;
  padding: 4px 8px 4px 40px;
  background: #F8E7EC;
  color: #B7183F;
  font-weight: bold;
  font-size: clamp(14px, 1.6vw, 16px);
}
.page-header .page-header-award::before {
  display: block;
  position: absolute;
  top: calc(50% - 12px);
  left: 8px;
  content: "";
  content: "\e909";
  font-weight: normal;
  font-size: 24px;
  font-family: "icon-font";
}
.page-header .page-header-award:first-of-type {
  padding-top: 8px;
}
.page-header .page-header-award:last-of-type {
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.page-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.page-header-info .sns {
  display: flex;
}
.page-header-info .sns a {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border-radius: 50%;
  color: #fff;
}
.page-header-info .sns a.facebook {
  background: #4080FF;
}
.page-header-info .sns a.twitter {
  background: #000;
}

.ttl-section {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #000;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
.ttl-section::after {
  display: block;
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  content: "";
}
.ttl-section .subtitle {
  margin-top: 8px;
  color: #777;
  font-size: clamp(14px, 1.6vw, 16px);
}

.ttl-red {
  margin-bottom: 16px;
  color: #B7183F;
  font-weight: bold;
  font-size: clamp(16px, 2vw, 20px);
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}

/* list */
.list-disc,
.list-number {
  margin: 0 0 24px 2em;
}
.list-disc li,
.list-number li {
  margin-bottom: 8px;
  line-height: 1.3;
}

.list-media {
  margin-bottom: 24px;
}
.list-media .list-media-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  gap: 16px;
  border-bottom: 1px solid #EAEAEA;
  list-style: none;
}
.list-media-thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}
.list-media-thumb img {
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0px 0px 1px #000);
}

/* link */
.link-text {
  min-height: 48px;
  margin-bottom: 16px;
}
.link-text a {
  display: inline-block;
  position: relative;
  width: fit-content;
  padding-left: 54px;
  color: #333 !important;
  text-decoration: none !important;
}
.link-text a::before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: block;
  position: absolute;
  top: calc(50% - 24px);
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F8E7EC;
  content: "";
}
.link-text a::after {
  display: flex;
  position: absolute;
  top: calc(50% - 24px);
  left: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  content: "\e904";
  font-size: 24px;
  font-family: "icon-font" !important;
}
.link-text a:hover {
  color: #B7183F !important;
}
.link-text.link-text-new-item a::after {
  content: "\e91a";
  font-size: 18px;
}
.link-text.link-text-backnumber a::after {
  content: "\e94d";
  font-size: 18px;
}
.link-text.link-text-subscribe a::after {
  content: "\e920";
  font-size: 18px;
}

@media screen and (max-width: 640px) {
  .link-text a {
    padding-left: 40px;
    font-size: 14px;
  }

  .link-text a::before {
    top: calc(50% - 16px);
    width: 32px;
    height: 32px;
  }

  .link-text a::after {
    top: calc(50% - 16px);
    width: 32px;
    height: 32px;
  }
}
/* button */
.btn-line {
  font-feature-settings: "palt" 1;
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  color: #000 !important;
  font-weight: bold;
  font-size: clamp(16px, 2.4vw, 24px);
  text-align: center;
  text-decoration: none !important;
}
.btn-line::before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: block;
  position: absolute;
  top: calc(50% - 24px);
  right: 0;
  width: 48px;
  height: 48px;
  transform: scale(1, 1);
  border-radius: 50%;
  background: #F8E7EC;
  content: "";
}
.btn-line:hover::before {
  animation: arrow-expand 2.4s linear 0s alternate forwards;
}
.btn-line::after {
  display: block;
  display: flex;
  position: absolute;
  top: calc(50% - 24px);
  right: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  content: "";
  content: "\e904";
  font-size: 24px;
  font-family: "icon-font" !important;
}
.btn-line .btn-line-inner {
  display: block;
  z-index: 5;
  position: relative;
  padding: 16px 48px;
}
.btn-line .btn-line-inner::before {
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: calc(100% - 8px);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  content: "";
}

@keyframes arrow-expand {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(200, 200);
  }
}
@media screen and (max-width: 640px) {
  .btn-line {
    max-width: 80%;
  }
  .btn-line::before, .btn-line::after {
    top: calc(50% - 20px);
    width: 40px;
    height: 40px;
  }
}
.btn-red,
.btn-w,
.btn-trial,
.btn-gray {
  display: flex;
  appearance: none;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  margin: 0 auto 16px;
  padding: 12px 48px;
  border: none;
  color: #fff;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: 0.4s background;
}
.btn-red:has(a),
.btn-w:has(a),
.btn-trial:has(a),
.btn-gray:has(a) {
  padding: 0;
}
.btn-red a,
.btn-w a,
.btn-trial a,
.btn-gray a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 48px;
}
.btn-red::before,
.btn-w::before,
.btn-trial::before,
.btn-gray::before {
  display: block;
  display: flex;
  position: absolute;
  left: 16px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 100%;
  content: "";
  color: #fff;
  font-weight: normal;
  font-size: 24px;
  font-family: "icon-font";
}

.btn-red {
  background: #B7183F;
}
.btn-red:hover {
  background: #000;
  color: #fff;
}
.btn-red a {
  color: #fff;
}
.btn-red.subscribe::before, .btn-red.shop::before {
  content: "\e903";
}
.btn-red.shop::before {
  content: "\e901";
}

.btn-w {
  border: 1px solid #B7183F;
  color: #B7183F;
}
.btn-w:hover {
  border-color: #000;
  background: #000;
  color: #fff !important;
}
.btn-w:hover a, .btn-w:hover::before, .btn-w:hover::after {
  color: #fff !important;
}
.btn-w a {
  color: #B7183F;
}
.btn-w.ebook::before {
  content: "\e902";
  color: #B7183F;
}

.btn-trial {
  width: fit-content;
  min-width: 0;
  border: 1px solid #777;
  color: #333;
}
.btn-trial:hover a, .btn-trial:hover::before {
  color: #B7183F;
}
.btn-trial a {
  padding: 12px 48px 12px 56px;
  color: #777;
}
.btn-trial::before {
  content: "\e906";
  color: #777;
}

.btn-gray {
  margin: 0;
  border: 1px solid #777;
  background: #F5F5F5;
  color: #333;
}

.accordion-trigger .btn-red::after,
.accordion-trigger .btn-w::after,
.accordion-trigger .btn-gray::after {
  display: block;
  display: flex;
  position: absolute;
  right: 16px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 100%;
  content: "";
  content: "\e907";
  color: #fff;
  font-weight: normal;
  font-size: 24px;
  font-family: "icon-font";
}
.accordion-trigger .btn-w::after {
  color: #B7183F;
}
.accordion-trigger .btn-gray::after {
  color: #333;
}
.accordion-trigger.active .btn-red, .accordion-trigger.active .btn-w {
  background: #000;
  color: #fff;
}
.accordion-trigger.active .btn-red::after, .accordion-trigger.active .btn-w::after {
  content: "\e908";
  color: #fff;
}
.accordion-trigger.active .btn-w {
  border-color: #000;
}
.accordion-trigger.active .btn-w::before {
  color: #fff;
}
.accordion-trigger.active .btn-gray::after {
  content: "\e908";
}

.accordion-content {
  display: none;
  padding-bottom: 40px;
}

/* media */
.media-contents {
  margin-bottom: clamp(40px, 8vw, 80px);
  text-align: center;
}
.media-contents .media-movie iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
.media-contents .caption {
  display: block;
  margin-top: clamp(8px, 1.6vw, 16px);
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.3;
}

/* tag */
.tag .tag-item {
  font-feature-settings: "palt" 1;
  display: inline-block;
  margin-right: 4px;
  padding: 2px 16px;
  background: #F8E7EC;
  font-size: clamp(12px, 1.4vw, 14px);
  white-space: nowrap;
}

/* panel */
.panel-gray {
  padding: 16px;
  background: #F5F5F5;
}
.panel-gray .panel-gray-thumb-s {
  margin-bottom: 8px;
}
.panel-gray .panel-gray-thumb-s img {
  aspect-ratio: 16/9;
  height: clamp(80px, 10vw, 100px);
  object-fit: contain;
  filter: drop-shadow(0px 0px 1px #000);
}
.panel-gray .panel-gray-text {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.3;
}
.panel-gray a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
}

/* book panel */
.book-panel-w .book-panel-item,
.book-panel-grade .book-panel-item {
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;
  color: #333;
  text-decoration: none;
}
.book-panel-w .book-panel-item:hover,
.book-panel-grade .book-panel-item:hover {
  color: #B7183F;
}
.book-panel-w .book-panel-item:hover img,
.book-panel-grade .book-panel-item:hover img {
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
}
.book-panel-w .book-thumb,
.book-panel-grade .book-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  width: 100%;
  padding: 24px;
  background: #fff;
}
.book-panel-w .book-thumb img,
.book-panel-grade .book-thumb img {
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 260px;
  max-height: 260px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0px 0px 1px #000);
  transition: 0.4s filter;
}
.book-panel-w .book-info-text,
.book-panel-grade .book-info-text {
  padding: 16px 16px 0;
  font-size: clamp(12px, 1.6vw, 16px);
}
.book-panel-w .book-info-text .book-title,
.book-panel-grade .book-info-text .book-title {
  font-feature-settings: "palt" 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  margin-bottom: 16px;
  overflow: hidden;
  font-weight: bold;
  font-size: clamp(14px, 1.8vw, 18px);
  text-overflow: ellipsis;
}
.book-panel-w .book-info-text .book-author,
.book-panel-grade .book-info-text .book-author {
  margin-bottom: 8px;
  font-size: clamp(12px, 1.6vw, 16px);
}
.book-panel-w .book-info-text .book-tag,
.book-panel-grade .book-info-text .book-tag {
  display: flex;
  gap: 8px;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1;
}
.book-panel-w .book-info-text .book-tag .tag,
.book-panel-grade .book-info-text .book-tag .tag {
  padding-right: 8px;
  border-right: 1px solid #777;
}
.book-panel-w .book-info-text .book-tag .tag:last-of-type,
.book-panel-grade .book-info-text .book-tag .tag:last-of-type {
  border: none;
}
.book-panel-w .book-info-text .book-author,
.book-panel-w .book-info-text .book-tag,
.book-panel-grade .book-info-text .book-author,
.book-panel-grade .book-info-text .book-tag {
  color: #777 !important;
}
.book-panel-w .book-info-text .date,
.book-panel-grade .book-info-text .date {
  font-size: clamp(10px, 1.4vw, 14px);
  text-align: right;
}

@media screen and (max-width: 640px) {
  .book-panel-w .book-panel-item .book-info-text,
.book-panel-grade .book-panel-item .book-info-text {
    padding: 8px 8px 0;
  }

  .book-panel-w .book-panel-item:hover img {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.3));
  }
  .book-panel-w .book-thumb {
    padding: 16px;
  }
}
.book-panel-grade .book-panel-item {
  border: none;
}
.book-panel-grade .book-thumb {
  padding: 16px;
  background: linear-gradient(135deg, #fff 0%, #EAEAEA 100%);
}
.book-panel-grade .book-thumb img {
  max-width: 340px;
  max-height: 340px;
  filter: drop-shadow(0px 0px 1px #000);
}

.book-panel-col4 {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 0;
}
.book-panel-col4 .book-panel-item {
  width: 25%;
}
.book-panel-col4.book-panel-grade .book-panel-item {
  position: relative;
}
.book-panel-col4.book-panel-grade .book-panel-item::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 16px;
  width: calc(100% - 32px);
  height: 1px;
  background-color: #000;
  content: "";
}

@media screen and (max-width: 640px) {
  .book-panel-col4 .book-panel-item {
    width: 50%;
  }
  .book-panel-col4.book-panel-grade .book-panel-item::after {
    left: 8px;
    width: calc(100% - 16px);
  }
}
.book-panel-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
}
.book-panel-horizontal .book-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(33.3% - 16px);
}
.book-panel-horizontal .book-thumb {
  flex-shrink: 0;
  width: 50%;
  padding: 16px;
}
.book-panel-horizontal .book-info-text {
  width: 100%;
  padding: 0 0 0 16px;
}

@media screen and (max-width: 960px) {
  .book-panel-horizontal {
    gap: 24px 16px;
  }
  .book-panel-horizontal .book-panel-item {
    width: 100%;
  }
  .book-panel-horizontal .book-thumb {
    width: 120px;
    padding: 8px;
  }
}
.book-ladder .book-panel-item {
  display: flex;
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EAEAEA;
}
.book-ladder .book-panel-item:hover {
  color: #333;
}
.book-ladder .book-panel-item a {
  color: #333;
  text-decoration: underline;
}
.book-ladder .book-panel-item a:hover {
  color: #B7183F;
}
.book-ladder .book-thumb {
  flex-shrink: 0;
  width: 200px;
  height: 100%;
  padding: 16px;
}
.book-ladder .book-info-text {
  padding: 0 0 0 16px;
}
.book-ladder .book-info-text .book-title a {
  text-decoration: none;
}
.book-ladder .book-info-text .book-text-item {
  margin-bottom: 8px;
}
.book-ladder .book-info-text .summary {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 640px) {
  .book-ladder .book-thumb {
    width: 120px;
    padding: 8px;
  }
}
/* tab */
.tabs {
  display: flex;
  margin-bottom: 16px;
  overflow-x: auto;
  border-bottom: 1px solid #000;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

.tab {
  width: 100%;
  text-align: center;
}

.tab-button {
  font-feature-settings: "palt" 1;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px;
  border: none;
  background: none;
  color: #333;
  font-weight: bold;
  font-size: clamp(14px, 1.8vw, 18px);
  white-space: nowrap;
  cursor: pointer;
}
.tab-button:hover::before, .tab-button.active::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #B7183F;
  content: "";
}

a.tab-button.active {
  pointer-events: none;
}

.tab-content {
  display: none;
  padding: 10px;
}

@media screen and (max-width: 640px) {
  .tab-sp-scroll {
    position: relative;
  }
  .tab-sp-scroll::before {
    display: block;
    z-index: 999;
    position: absolute;
    right: -16px;
    bottom: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, #fff 100%);
    content: "";
  }
  .tab-sp-scroll::after {
    display: block;
    z-index: 999;
    position: absolute;
    right: -8px;
    bottom: calc(50% - 12px);
    content: "";
    content: "\e904";
    color: #333;
    font-size: 24px;
    font-family: "icon-font";
  }

  .top-news .tab-sp-scroll::before {
    background: linear-gradient(to right, rgba(245, 245, 245, 0.8) 0%, #F5F5F5 100%);
  }
}
/* slide */
.slide-single-image .media-contents {
  margin-bottom: 40px;
}
.slide-single-image .media-contents img {
  max-width: clamp(1px, 100%, 700px);
}

.swiper-wrapper.book-panel-w .swiper-slide {
  height: auto;
}

.swiper-wrapper.book-panel-w .book-panel-item {
  height: 100%;
}

.slide-infinite .swiper-wrapper,
.slide-infinite-reverse .swiper-wrapper {
  transition-timing-function: linear;
}

.swiper:has(.swiper-pagination) {
  padding-bottom: 40px;
}

.swiper-button-prev, .swiper-button-next {
  top: 32% !important;
}

.slide-single-image .swiper-button-prev, .slide-single-image .swiper-button-next,
.slide-3-image .swiper-button-prev,
.slide-3-image .swiper-button-next {
  top: 40% !important;
}

.swiper-button-prev:after, .swiper-button-next:after {
  font-size: clamp(24px, 4vw, 40px) !important;
}

@media screen and (max-width: 640px) {
  .swiper-button-prev, .swiper-button-next {
    top: 24% !important;
  }

  .slide-3-image .swiper-button-prev, .slide-3-image .swiper-button-next {
    top: 30% !important;
  }
}
/* box */
[class^=box-] {
  padding: clamp(16px, 2.4vw, 24px);
}
[class^=box-] p:last-of-type,
[class^=box-] ul:last-of-type,
[class^=box-] ol:last-of-type {
  margin-bottom: 0;
}

.box-gray {
  background: #F5F5F5;
}

.box-border {
  border: 1px solid #000;
}

/* pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 8vw, 80px);
  gap: 16px;
}
.pagination .pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 4vw, 40px);
  height: clamp(24px, 4vw, 40px);
  border: 1px solid #777;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1;
}
.pagination .pagination-item.current, .pagination .pagination-item:hover {
  border-color: #B7183F;
  background: #B7183F;
  color: #fff;
}
.pagination .pagination-item.current {
  pointer-events: none;
}
.pagination .pagination-item:first-of-type, .pagination .pagination-item:last-of-type {
  position: relative;
  color: transparent;
  text-indent: -9999px;
}
.pagination .pagination-item:first-of-type::before, .pagination .pagination-item:last-of-type::before {
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(-135deg);
  border-top: 2px solid #777;
  border-right: 2px solid #777;
  content: "";
}
.pagination .pagination-item:first-of-type:hover::before, .pagination .pagination-item:last-of-type:hover::before {
  border-color: #fff;
}
.pagination .pagination-item:last-of-type::before {
  transform: rotate(45deg);
}

/* read more */
.book-text-summary {
  margin: 24px 0;
}
.book-text-summary input, .book-text-summary label {
  display: none;
}
.book-text-summary.ui-accordion {
  position: relative;
  height: calc(7.2em + 60px);
  overflow: hidden;
  transition: 0.5s;
}
.book-text-summary.ui-accordion > input {
  display: none;
}
.book-text-summary.ui-accordion > label {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.8em;
  margin-right: 0 !important;
  /*background    : linear-gradient( rgba(255, 255, 255, 0.10),
          #ffffff 65% );*/
  background: #fff;
  font-size: 15px;
  /* padding-top   : 40px;*/
  text-align: right;
  cursor: pointer;
}
.book-text-summary.ui-accordion > input[type=checkbox]:checked + label {
  height: 25px;
  padding-top: 5px;
  background: rgba(255, 255, 255, 0.6);
}
.book-text-summary.ui-accordion > input[type=checkbox]:not(:checked) + label::after, .book-text-summary.ui-accordion > input[type=checkbox]:checked + label::after {
  padding-right: 32px;
  content: "続きを読む";
}
.book-text-summary.ui-accordion > input[type=checkbox]:not(:checked) + label::before, .book-text-summary.ui-accordion > input[type=checkbox]:checked + label::before {
  display: block;
  position: absolute;
  top: calc(50% - 8px);
  right: 8px;
  width: 8px;
  height: 8px;
  transform: rotate(135deg);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  content: "";
}
.book-text-summary.ui-accordion > input[type=checkbox]:checked + label::after {
  content: "閉じる";
}
.book-text-summary.ui-accordion > input[type=checkbox]:checked + label::before {
  top: 50%;
  transform: rotate(-45deg);
}

/* form */
select,
input[type=text] {
  height: 40px;
  padding: 0 8px;
  border: 1px solid #bababa;
  border-radius: 3px;
  font-size: 16px;
}

input[type=checkbox],
input[type=radio] {
  margin-right: 4px;
}
input[type=checkbox] + label,
input[type=radio] + label {
  margin-right: 16px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.3;
}

button {
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

/* align */
.align-c {
  text-align: center;
}

.align-r {
  text-align: right;
}

/* margin padding */
.mb40 {
  margin-bottom: 40px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

/* font */
.font-l {
  font-size: clamp(18px, 2vw, 20px) !important;
}

.font-s {
  font-size: clamp(12px, 1.4vw, 14px) !important;
}

.font-red {
  color: #B7183F !important;
}

.date {
  color: #777;
  font-size: clamp(12px, 1.8vw, 18px);
}

/* sns */
.sns-link-common {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.sns-link-common a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  background: #3566FF;
  color: #fff;
  font-weight: bold;
  font-size: clamp(14px, 2vw, 20px);
}
.sns-link-common a:hover {
  filter: saturate(80%);
}
.sns-link-common a.twitter {
  background: #000;
}
.sns-link-common a.instagram {
  background: #D7175A;
}
.sns-link-common a.line {
  background: #0CBE01;
}
.sns-link-common a i, .sns-link-common a svg {
  position: absolute;
  left: 16px;
  font-size: clamp(24px, 3.2vw, 32px);
}
.sns-link-common a svg {
  fill: #fff;
  width: clamp(24px, 3.2vw, 32px);
  height: clamp(24px, 3.2vw, 32px);
}

@media screen and (max-width: 640px) {
  .sns-link-common {
    flex-wrap: wrap;
  }
  .sns-link-common a {
    width: calc(50% - 8px);
  }
  .sns-link-common a i, .sns-link-common a svg {
    left: 8px;
  }
}
/* TOP PAGE
------------------------------ */
/* heading */
.top-title {
  margin-bottom: clamp(24px, 4vw, 40px);
  font-size: clamp(24px, 4.8vw, 48px);
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
.top-title .top-title-inner {
  z-index: 5;
  position: relative;
}

.top-title-circle {
  position: relative;
  width: 1em;
  margin: 0 auto 24px;
  line-height: 1.3;
  writing-mode: vertical-rl;
}
.top-title-circle::before {
  display: block;
  position: absolute;
  top: -70px;
  left: -70px;
  width: clamp(64px, 14vw, 140px);
  height: clamp(64px, 14vw, 140px);
  background: transparent url(/assets/images/top/title_circle.png) no-repeat center center;
  background-size: contain;
  content: "";
}
.top-title-circle::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: calc(100% + 24px);
  background: #000;
  content: "";
}

/* hero */
.hero {
  margin-bottom: clamp(40px, 12vw, 120px);
  background: #B7183F;
}
.hero .hero-inner {
  display: flex;
  justify-content: space-between;
  max-width: 2000px;
  margin: 0 auto;
  overflow: hidden;
}
.hero .hero-message {
  display: flex;
  z-index: 5;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30%;
  background: linear-gradient(to right, #B7183F 0%, #B7183F 20%, #C53F66 20%, #C53F66 40%, #D26E8C 40%, #D26E8C 60%, #E29FB3 60%, #E29FB3 80%, #F1CED9 80%, #F1CED9 100%);
}
.hero .hero-message h1 {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 110%;
  height: 100%;
  margin: 0 -10% 0 10%;
  background: transparent url(/assets/images/top/img_book.svg) no-repeat center center;
  background-size: contain;
  text-indent: -9999px;
}
.hero .slide-hero {
  position: relative;
  width: 70%;
}
.hero .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(24px, 4vw, 40px);
  background: rgba(0, 0, 0, 0.5);
}
.hero .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 8px !important;
  background: #EAEAEA;
  opacity: 1;
}
.hero .swiper-pagination-bullet-active {
  background: #B7183F;
}
.hero .swiper-button-prev, .hero .swiper-button-next {
  top: auto !important;
  bottom: 0;
  width: clamp(24px, 4vw, 40px);
  height: clamp(24px, 4vw, 40px);
  background: #B7183F;
}
.hero .swiper-button-prev:after,
.hero .swiper-button-next:after {
  color: #fff;
  font-size: 24px !important;
}

@media screen and (max-width: 640px) {
  .top-title-circle {
    width: fit-content;
    text-align: center;
    writing-mode: horizontal-tb;
  }
  .top-title-circle br {
    display: none;
  }
  .top-title-circle::before {
    top: -32px;
    left: -32px;
  }
  .top-title-circle::after {
    right: -16px;
  }

  .hero {
    background: none;
  }
  .hero .hero-inner {
    display: block;
  }
  .hero .hero-message {
    display: none;
  }
  .hero .slide-hero {
    width: 100%;
    padding-bottom: 32px;
  }
  .hero .slide-hero::after {
    display: block;
    position: absolute;
    bottom: 24px;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, #F1CED9 0%, #F1CED9 10%, #E29FB3 10%, #E29FB3 20%, #D26E8C 20%, #D26E8C 30%, #C53F66 30%, #C53F66 40%, #B7183F 40%, #B7183F 50%, #B7183F 50%, #B7183F 60%, #C53F66 60%, #C53F66 70%, #D26E8C 70%, #D26E8C 80%, #E29FB3 80%, #E29FB3 90%, #F1CED9 90%, #F1CED9 100%);
    content: "";
  }
  .hero .swiper-slide.slogan {
    position: relative;
  }
  .hero .swiper-slide.slogan::before {
    display: block;
    position: absolute;
    top: 8px;
    left: 32px;
    width: 25%;
    height: calc(100% - 16px);
    background: url(/assets/images/top/img_lead_text.png) no-repeat top left;
    background-size: contain;
    content: "";
  }
  .hero .swiper-pagination {
    background: none;
  }
  .hero .swiper-button-prev,
.hero .swiper-button-next {
    top: 50% !important;
    bottom: auto;
  }
  .hero .swiper-button-prev::after,
.hero .swiper-button-next::after {
    font-weight: bold;
    font-size: 12px !important;
  }
}
/* popular book */
.top-book-popular .book-popular-main {
  position: relative;
  margin-left: 3%;
  padding: 40px 0 120px;
  overflow: hidden;
}
.top-book-popular .book-popular-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.1, 1.1);
  filter: blur(20px);
}
.top-book-popular .book-popular-inner {
  display: flex;
  z-index: 5;
  position: relative;
  align-items: center;
  justify-content: space-between;
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 16px;
  gap: 24px;
}
.top-book-popular .thumb,
.top-book-popular .text {
  flex-shrink: 0;
  width: 50%;
}
.top-book-popular .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-book-popular .thumb img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0px 0px 1px #000);
}
.top-book-popular .text {
  position: relative;
  padding: 24px;
}
.top-book-popular .text::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  content: "";
}
.top-book-popular .text-inner {
  z-index: 5;
  position: relative;
}
.top-book-popular .book-popular-tag {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 24px;
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
.top-book-popular .book-popular-tag .tag-main {
  position: relative;
  font-weight: bold;
  font-size: clamp(12px, 2.4vw, 24px);
}
.top-book-popular .book-popular-tag .tag-main::after {
  display: block;
  position: absolute;
  top: 0.3em;
  right: -12px;
  width: 1px;
  height: 1em;
  background: #777;
  content: "";
}
.top-book-popular .book-lead {
  font-feature-settings: "palt" 1;
  margin-bottom: 8px;
  font-size: clamp(12px, 1.4vw, 14px);
}
.top-book-popular .book-title {
  font-feature-settings: "palt" 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  margin-bottom: 8px;
  overflow: hidden;
  font-weight: bold;
  font-size: clamp(14px, 2.4vw, 24px);
  text-overflow: ellipsis;
}
.top-book-popular .book-author {
  font-size: clamp(12px, 1.6vw, 16px);
}
.top-book-popular .date {
  font-size: clamp(12px, 1.4vw, 14px);
  text-align: right;
}
.top-book-popular .book-popular-slide {
  margin-top: -80px;
}

@media screen and (max-width: 640px) {
  .top-book-popular .book-popular-main {
    margin-left: 0;
  }
  .top-book-popular .book-popular-inner {
    gap: 16px;
  }
  .top-book-popular .thumb,
.top-book-popular .text {
    width: auto;
  }
  .top-book-popular .thumb img {
    max-width: 160px;
    max-height: 160px;
  }
  .top-book-popular .text {
    flex-shrink: unset;
    padding: 16px 0 16px 16px;
  }
  .top-book-popular .text .tag-sub {
    font-size: 12px;
  }
}
/* new book */
.top-book-new {
  margin-top: 120px;
  padding: clamp(40px, 8vw, 80px) 0;
  background: #F5F5F5;
}
.top-book-new .top-title {
  margin-top: -120px;
}

@media screen and (max-width: 640px) {
  .top-book-new {
    margin-top: 0;
    padding-top: 80px;
  }
  .top-book-new .top-title {
    margin-top: 0;
  }
}
/* special */
.top-special {
  margin-top: 120px;
}
.top-special .swiper-slide {
  border: 1px solid #EAEAEA;
}
.top-special .swiper-slide .book-thumb img {
  aspect-ratio: 40/21;
  object-fit: contain;
}
.top-special .top-special-text {
  padding: 0 24px;
  text-align: center;
}
.top-special .slide-infinite-reverse {
  margin-bottom: clamp(24px, 4vw, 40px);
}

@media screen and (max-width: 640px) {
  .top-special {
    margin-top: 0;
    padding-top: 80px;
  }
  .top-special .top-title {
    margin-top: 0;
  }
}
/* news */
.top-news {
  padding: clamp(40px, 8vw, 80px) 0 clamp(80px, 16vw, 160px);
  background: #F5F5F5;
}

/* company */
.top-company .company-title {
  position: relative;
  margin-bottom: 160px;
  padding: 64px 0;
  background: #B7183F;
}
.top-company .company-title::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  background: linear-gradient(to right, #B7183F 0%, #B7183F 20%, #C53F66 20%, #C53F66 40%, #D26E8C 40%, #D26E8C 60%, #E29FB3 60%, #E29FB3 80%, #F1CED9 80%, #F1CED9 100%);
  content: "";
}
.top-company .company-title .content-l {
  z-index: 5;
  position: relative;
}
.top-company .company-title .company-title-item {
  display: flex;
  z-index: 6;
  position: relative;
  align-items: flex-start;
  gap: 24px;
}
.top-company .company-title .company-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  width: 25%;
  padding: 24px;
  background: #fff;
}
.top-company .company-title .company-logo img {
  width: 100%;
  max-width: 220px;
}
.top-company .company-title .company-text {
  margin-top: 40px;
  color: #fff;
  font-size: clamp(16px, 4vw, 40px);
  font-family: "Oswald", sans-serif;
}
.top-company .company-visual {
  position: absolute;
  top: 50%;
  right: 0;
  left: 15%;
  width: 100%;
}
.top-company .company-visual img {
  width: 100%;
  max-width: none;
  height: clamp(120px, 32vw, 320px);
  object-fit: cover;
  object-position: center center;
}
.top-company .company-panel {
  display: flex;
  z-index: 10;
  position: relative;
  justify-content: space-between;
  margin: 0 15%;
  gap: 24px;
}
.top-company .company-panel .company-panel-item {
  width: 100%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.top-company .company-panel .company-panel-item .company-panel-thumb img {
  width: 100%;
  object-fit: cover;
}
.top-company .company-panel .company-panel-item .company-panel-text {
  padding: 16px;
  font-weight: bold;
  font-size: clamp(18px, 2.4vw, 24px);
  text-align: center;
}

@media screen and (max-width: 640px) {
  .top-company .company-title {
    margin-bottom: 40px;
    padding: 24px;
  }
  .top-company .company-title .contents-l {
    padding: 0;
  }
  .top-company .company-title .company-title-item {
    display: block;
  }
  .top-company .company-title .company-logo {
    display: block;
    position: relative;
    aspect-ratio: auto;
    width: 50%;
    padding: 16px;
  }
  .top-company .company-title .company-logo::before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    margin-left: calc(50vw - 50%);
    background: #fff;
    content: "";
  }
  .top-company .company-title .company-logo img {
    z-index: 5;
    position: relative;
    max-width: 80%;
  }
  .top-company .company-title .company-text {
    margin-top: 16px;
    text-align: center;
  }
  .top-company .company-visual {
    top: 40%;
    left: 5%;
  }
  .top-company .company-panel {
    flex-direction: column;
    margin: 0;
    padding: 0 16px;
  }
}
/* ad */
.top-ad {
  padding: clamp(40px, 8vw, 80px) 0;
  overflow: hidden;
  background: #333;
  color: #fff;
}
.top-ad .top-title {
  margin-bottom: 0;
}
.top-ad .title-en {
  transform: rotate(90deg);
  transform-origin: bottom left;
  color: #777;
  font-weight: normal;
  font-size: 40px;
  line-height: 1;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.1em;
}
.top-ad .ad-panel {
  display: flex;
  margin: 0 0 40px 64px;
  gap: 1px;
}
.top-ad .ad-panel-item {
  width: 100%;
  background: #444;
  color: #fff;
}
.top-ad .ad-panel-item .ad-panel-thumb {
  overflow: hidden;
}
.top-ad .ad-panel-item .ad-panel-thumb img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  transition: 0.4s transform, 0.4s filter;
}
.top-ad .ad-panel-item .ad-panel-text {
  padding: 16px;
  font-size: clamp(14px, 1.6vw, 16px);
}
.top-ad .ad-panel-item .ad-panel-text h3 {
  margin-bottom: 8px;
  font-size: clamp(18px, 2.4vw, 24px);
}
.top-ad .ad-panel-item:hover .ad-panel-thumb img {
  transform: scale(1.2, 1.2);
  filter: brightness(1);
}
.top-ad .btn-line {
  color: #fff !important;
}
.top-ad .btn-line,
.top-ad .btn-line .btn-line-inner::before {
  border-color: #fff;
}
.top-ad .btn-line:hover,
.top-ad .btn-line::after {
  color: #333 !important;
}

@media screen and (max-width: 640px) {
  .top-ad .title-en {
    display: none;
  }
  .top-ad .ad-panel {
    flex-direction: column;
    margin: 24px 0 40px;
    gap: 16px;
  }
}
/* brand */
.top-brand {
  padding: clamp(40px, 8vw, 80px) 0;
  background: #F5F5F5;
  text-align: center;
}

.brand-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
  gap: 16px;
}
.brand-panel .brand-panel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(20% - 12.8px);
  height: 110px;
  padding: 16px;
  background: #fff;
  transition: 0.4s box-shadow;
}
.brand-panel .brand-panel-item:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.brand-panel .brand-panel-item img {
  max-height: 100%;
}
.brand-panel .brand-panel-item.brand-panel-item-nolink {
  pointer-events: none;
}

.brand-panel + .brand-panel {
  margin-top: -16px;
}

.brand-panel-textonly .brand-panel-item {
  width: calc(20% - 12.8px);
  height: auto !important;
  padding: 8px;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .brand-panel .brand-panel-item {
    width: calc(50% - 24px);
    height: 80px;
  }
}
/* ARTICLE PAGE
------------------------------ */
.contents-article p {
  margin-bottom: 24px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7;
}
.contents-article a {
  color: #006AB4;
  text-decoration: underline;
  word-break: break-all;
  transition: 0.4s color;
}
.contents-article a:hover {
  color: #B7183F;
}
.contents-article a[target=_blank],
.contents-article a[href$=".pdf"] {
  display: inline-block;
  position: relative;
  padding-right: 16px;
}
.contents-article a[target=_blank]::after,
.contents-article a[href$=".pdf"]::after {
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  right: 0;
  content: "";
  content: "\e900";
  font-size: 14px;
  line-height: 1.3;
  font-family: "icon-font";
}
.contents-article a[target=_blank]:has(img) {
  padding-right: 0;
}
.contents-article a[target=_blank]:has(img)::after {
  display: none;
}
.contents-article a[href$=".pdf"]::after {
  content: "\eadf";
}
.contents-article [class^=box-] {
  margin-bottom: 40px;
}

.table-contents {
  display: flex;
  justify-content: space-between;
}
.table-contents .table-contents-title {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  width: 30%;
  height: 100%;
  padding-top: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #000;
}
.table-contents .table-contents-title::before {
  display: block;
  position: absolute;
  top: 24px;
  left: 0;
  content: "";
  content: "CONTENTS";
  color: #B7183F;
  font-size: clamp(14px, 4vw, 40px);
  line-height: 1;
  font-family: "Oswald", sans-serif;
}
.table-contents .table-contents-title::after {
  display: block;
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  content: "";
}
.table-contents .table-contents-title .ttl-section {
  margin-top: clamp(22px, 4.8vw, 48px);
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}
.table-contents .table-contents-title .ttl-section::after {
  display: none;
}
.table-contents .table-contents-title .subtitle {
  margin-top: 8px;
  color: #777;
  font-size: clamp(14px, 1.6vw, 16px);
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
.table-contents .table-contents-list {
  width: 100%;
  margin-left: 24px;
  padding-top: 24px;
}
.table-contents .table-contents-list > .list-item {
  margin-bottom: clamp(24px, 4vw, 40px);
}
.table-contents .table-contents-list .label {
  font-feature-settings: "palt" 1;
  font-size: clamp(12px, 1.4vw, 14px);
}
.table-contents .table-contents-list .title,
.table-contents .table-contents-list .subtitle {
  font-feature-settings: "palt" 1;
  font-weight: bold;
  font-size: clamp(18px, 2vw, 20px);
}
.table-contents .table-contents-list .subtitle {
  font-size: clamp(16px, 1.8vw, 18px);
}
.table-contents .table-contents-list .summary {
  margin-top: 8px;
  font-size: clamp(12px, 1.4vw, 14px);
}
.table-contents .table-contents-list .box-gray + .list-item {
  margin-top: clamp(24px, 4vw, 40px);
}
.table-contents .table-contents-list .box-gray > .list-item {
  margin-bottom: clamp(24px, 4vw, 40px);
}
.table-contents .table-contents-list .box-gray > .list-item:last-of-type {
  margin-bottom: 0;
}

@media screen and (max-width: 1100px) {
  .table-contents .table-contents-title {
    top: 44px;
  }
}
@media screen and (max-width: 640px) {
  .table-contents {
    display: block;
  }
  .table-contents .table-contents-title {
    position: relative;
    top: 0;
    width: 100%;
  }
  .table-contents .table-contents-list {
    margin: 0;
    padding: 0;
  }
}
.swiper + .ttl-red {
  margin-top: 40px;
}

/* leagacy style */
.contents-article .image {
  width: 160px;
  margin: 0 24px 24px 0;
  float: left;
}
.contents-article .image p {
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.3;
}

@media screen and (max-width: 640px) {
  .contents-article .image {
    width: 120px;
    margin: 0 16px 16px 0;
  }
}
/* BOOK PAGE
------------------------------ */
.book-filter {
  position: relative;
}
.book-filter .tab {
  width: fit-content;
}
.book-filter .tab-button:has(input) {
  padding: 0;
}
.book-filter .tab-button input[type=radio] {
  display: none;
}
.book-filter .tab-button label {
  display: block;
  margin: 0;
  padding: 16px 24px;
  cursor: pointer;
}
.book-filter select {
  position: absolute;
  right: 0;
  bottom: 16px;
}

@media screen and (max-width: 640px) {
  .book-filter {
    margin-bottom: 16px;
  }
  .book-filter .tab {
    width: 100%;
  }
  .book-filter select {
    position: static;
    width: 100%;
  }
}
.book-info {
  display: flex;
  justify-content: space-between;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7;
}
.book-info .book-thumb,
.book-info .book-detail {
  width: 50%;
}
.book-info .book-thumb-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(135deg, #fff 0%, #EAEAEA 100%);
}
.book-info .book-thumb-inner img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0px 0px 1px #000);
}
.book-info .btn-trial {
  margin-top: 16px;
}
.book-info .book-detail {
  padding-left: clamp(24px, 4vw, 40px);
}
.book-info .book-detail .page-header-info {
  margin-bottom: clamp(16px, 2.4vw, 24px);
}
.book-info .book-detail .book-title {
  font-feature-settings: "palt" 1;
  margin-bottom: 16px;
  font-weight: bold;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
}
.book-info .book-detail .book-title .logo img {
  max-height: 80px;
  margin-bottom: 16px;
}
.book-info .book-detail .book-title .subtitle {
  margin-bottom: 8px;
  font-weight: normal;
  font-size: clamp(16px, 1.8vw, 18px);
}
.book-info .book-detail .book-title .subtitle:last-child {
  margin-top: 8px;
}
.book-info .book-detail .book-info-text {
  margin-bottom: 40px;
}
.book-info .book-detail .book-text-item {
  margin-bottom: 8px;
  line-height: 1.3;
}
.book-info .book-detail .summary {
  margin: 24px 0;
  line-height: 1.7;
}
.book-info .book-detail .book-related-link-h {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  gap: 24px;
}
.book-info .book-detail .book-related-link-h .item {
  width: calc(50% - 12px);
}
.book-info .book-sale-btn {
  margin-bottom: 40px !important;
}
.book-info .book-sale-btn .btn-shop {
  position: relative;
  border: 1px solid #777;
  text-align: center;
}
.book-info .book-sale-btn .btn-shop.sold::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  content: "★";
  font-size: 14px;
}

@media screen and (max-width: 960px) {
  .book-info .book-detail .book-related-link-h {
    display: block;
  }
  .book-info .book-detail .book-related-link-h .item {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .book-info {
    display: block;
  }
  .book-info .book-thumb, .book-info .book-detail {
    width: 100%;
    padding: 0;
  }
  .book-info .book-thumb {
    margin-bottom: 24px;
  }
}
/* NEWS PAGE
------------------------------ */
.news-list .news-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  gap: 16px;
  border-bottom: 1px solid #EAEAEA;
  font-size: clamp(14px, 1.8vw, 18px);
}
.news-list .news-list-item .date {
  flex-shrink: 0;
  min-width: 4em;
}
.news-list .news-list-item .tag {
  flex-shrink: 0;
  width: 6em;
}
.news-list .news-list-item .tag .tag-item {
  width: 100%;
  margin-right: 0;
  padding: 2px 8px;
  text-align: center;
}
.news-list .news-list-item .text {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .news-list .news-list-item {
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    gap: 8px 16px;
  }
  .news-list .news-list-item .text {
    width: 100%;
  }
}
.news-list-pickup {
  margin-bottom: 40px;
  padding: 16px;
}
.news-list-pickup .news-list .news-list-item {
  position: relative;
  margin-bottom: 8px;
  padding-bottom: 8px;
  padding-left: 24px;
}
.news-list-pickup .news-list .news-list-item:last-of-type {
  margin-bottom: 0;
}
.news-list-pickup .news-list .news-list-item::before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B7183F;
  content: "";
}
.news-list-pickup .news-list .news-list-item a {
  font-weight: bold;
}

/* FEATURE PAGE
------------------------------ */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
}
.feature-list .feature-list-item {
  width: calc(33.3% - 16px);
}
.feature-list .feature-list-item .thumb {
  margin-bottom: 16px;
}
.feature-list .feature-list-item .thumb img {
  aspect-ratio: 40/21;
  width: 100%;
  object-fit: contain;
  border: 1px solid #EAEAEA;
}
.feature-list .feature-list-item .title {
  font-feature-settings: "palt" 1;
  font-weight: bold;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.3;
}

@media screen and (max-width: 640px) {
  .feature-list .feature-list-item {
    width: 100%;
  }
}
/* SEARCH PAGE
------------------------------ */
.search-result-summary {
  padding: 16px;
  background: #F5F5F5;
  font-size: clamp(12px, 1.6vw, 16px);
}
.search-result-summary .search-result-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
  gap: 8px;
}
.search-result-summary .search-result-item .item {
  padding-right: 8px;
  border-right: 1px solid #777;
  line-height: 1.3;
}
.search-result-summary .search-result-number {
  font-weight: bold;
}

/* search form */
.search-requirement {
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.search-requirement .search-requirement-item {
  display: flex;
  gap: 16px;
}
.search-requirement .search-title {
  flex-shrink: 0;
  width: 160px;
  font-weight: bold;
}
.search-requirement .search-form {
  width: 100%;
}
.search-requirement .search-form-item {
  width: 100%;
  margin-bottom: 16px;
}
.search-requirement .search-form-item .item-label {
  margin-bottom: 4px;
  font-weight: bold;
}
.search-requirement .search-form-item .item-label small {
  font-weight: normal;
}
.search-requirement .search-form-item.keyword {
  margin-bottom: 4px;
}
.search-requirement .search-form-item.keyword input {
  width: 50%;
}
.search-requirement .search-form-item.isbn {
  flex-shrink: 0;
  width: 40%;
}
.search-requirement .search-form-item.isbn input {
  min-width: 240px;
}
.search-requirement .release-date {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.search-requirement .release-date .release-start, .search-requirement .release-date .release-end {
  display: flex;
  width: 100%;
  gap: 8px;
}
.search-requirement .release-date .release-start select, .search-requirement .release-date .release-end select {
  width: 30%;
}
.search-requirement .release-date #release_start_date_year,
.search-requirement .release-date #release_end_date_year {
  width: 40%;
}
.search-requirement .accordion-trigger {
  width: fit-content;
  min-width: 240px;
}
.search-requirement .accordion-content {
  padding: 24px 0 0;
}

.search-form-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.search-form-item.category .search-form-col,
.search-form-item.genre .search-form-col {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.search-form-item.category .search-form-col li,
.search-form-item.genre .search-form-col li {
  list-style: none;
}

.search-form-item.genre li {
  width: calc(16.6% - 13.3px);
}

.btn-search {
  min-width: 30%;
  font-size: 18px;
}

.search-filter {
  margin-top: 40px;
  border: none;
}
.search-filter .filter-button {
  appearance: none;
  margin: 0 8px 8px 0;
  padding: 8px;
  border: 1px solid #ccc;
  background: none;
  font-size: clamp(14px, 1.6vw, 16px);
  cursor: pointer;
}
.search-filter .filter-button:hover {
  background: #F5F5F5;
}

/* search result */
.search-result-feature {
  position: relative;
  margin: 24px 0 16px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid #ccc;
}
.search-result-feature .title {
  position: absolute;
  top: -9px;
  left: 24px;
  width: fit-content;
  padding: 0 8px;
  background: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
}
.search-result-feature .feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}
.search-result-feature .feature-item:last-of-type {
  margin-bottom: 0;
}
.search-result-feature .feature-item .feature-thumb {
  flex-shrink: 0;
  width: clamp(100px, 16vw, 160px);
}
.search-result-feature .feature-item .feature-title {
  font-feature-settings: "palt" 1;
  width: 100%;
  font-weight: bold;
  font-size: clamp(14px, 1.8vw, 18px);
}

@media screen and (max-width: 960px) {
  .search-requirement .search-requirement-item {
    display: block;
  }
  .search-requirement .search-form-item.keyword input {
    width: 100%;
  }

  .search-form-row {
    display: block;
  }

  .search-requirement .search-form-item.isbn {
    width: 100%;
  }

  .search-requirement .release-date {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-form-item.category .search-form-col li,
.search-form-item.genre .search-form-col li {
    width: calc(33.3% - 10.6px);
  }
}
@media screen and (max-width: 640px) {
  .search-requirement .accordion-trigger,
.search-requirement .search-form-item.isbn input,
.search-form .btn-gray,
.btn-search {
    width: 100%;
    max-width: none;
  }
}
/* LEGACY STYLE
------------------------------ */
/* feature sns */
.sns-article-legacy {
  display: flex;
  justify-content: flex-end;
  padding: 4px;
}

/* book detail */
#detailMainArea img {
  display: block;
  margin: 0 auto 16px !important;
}
#detailMainArea a:has(img) {
  display: inline;
}
#detailMainArea .center {
  text-align: center;
}
#detailMainArea center iframe {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.detailTxtLCenter {
  text-align: center;
}

/* book table */
#detailMainArea p + br {
  /*display: none;*/
  margin-bottom: 16px;
}
#detailMainArea .detailNoBorderArea {
  margin-bottom: 24px;
}
#detailMainArea .detailNoBorderArea .detailTxtBNoMargin {
  /*margin: 16px 0 0;*/
}
#detailMainArea .detailRedArea p,
#detailMainArea .detailBlueArea p,
#detailMainArea .detailPurpleArea p,
#detailMainArea .detailPinkArea p,
#detailMainArea .detailSaxArea p,
#detailMainArea .detailOrangeArea p,
#detailMainArea .detailGreenArea p,
#detailMainArea .detailGrayArea p,
#detailMainArea .detailYellow1Area p,
#detailMainArea .detailBlue4Area p {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #000;
  background: #fff;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
#detailMainArea .detailRedArea p::after,
#detailMainArea .detailBlueArea p::after,
#detailMainArea .detailPurpleArea p::after,
#detailMainArea .detailPinkArea p::after,
#detailMainArea .detailSaxArea p::after,
#detailMainArea .detailOrangeArea p::after,
#detailMainArea .detailGreenArea p::after,
#detailMainArea .detailGrayArea p::after,
#detailMainArea .detailYellow1Area p::after,
#detailMainArea .detailBlue4Area p::after {
  display: block;
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  content: "";
}
#detailMainArea td {
  display: block;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7;
}
#detailMainArea .detailTxtNoMargin,
#detailMainArea .detailTxtLNoMargin {
  /*margin: 0 0 8px 2em;
  display: list-item;
  list-style: disc;*/
  margin-bottom: 0 !important;
  /*& + br {
    display: none;
  }*/
}
#detailMainArea .detailTxtLNoMargin,
#detailMainArea .detailTxtBNoMargin {
  font-weight: bold;
}
#detailMainArea .detailTxtBNoMargin {
  /*margin: 16px 0 0;*/
  margin: 0;
}
#detailMainArea ul {
  margin: 0 0 16px 2em;
}
#detailMainArea .detailRedBorderArea,
#detailMainArea .detailPurpleBorderArea,
#detailMainArea .detailGreenBorderArea,
#detailMainArea .detailYellow2BorderArea,
#detailMainArea .detailBlue2BorderArea,
#detailMainArea .detailPinkBorderAreaLarge,
#detailMainArea .detailOrangeBorderArea,
#detailMainArea .detailRed2BorderArea,
#detailMainArea .detailOrangeAreaInside,
#detailMainArea .detailGreenAreaInside,
#detailMainArea .detailBlueAreaInside,
#detailMainArea .detailRedAreaInside {
  margin-bottom: 16px;
  color: #B7183F;
  font-weight: bold;
  font-size: clamp(16px, 2vw, 20px);
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif !important;
}
#detailMainArea .mw_mokuji_List dd {
  margin-bottom: 0;
}
#detailMainArea .detailTxtSGreen,
#detailMainArea .detailTxtBNoMarginGray,
#detailMainArea .detailTxtSRed,
#detailMainArea .detailTxtSGray,
#detailMainArea .detailTxtS,
#detailMainArea .detailGrayTitle,
#detailMainArea .detailTxtBOrange,
#detailMainArea .detailTxtSBlue,
#detailMainArea .detailTxtSOrange,
#detailMainArea .detailRed1Title {
  margin-bottom: 0;
  font-size: clamp(12px, 1.4vw, 14px);
}
#detailMainArea .detailTxtRed,
#detailMainArea .detailTxtPink,
#detailMainArea .detailRedTitle,
#detailMainArea .detailTxtBlue3,
#detailMainArea .detailTxtSax,
#detailMainArea .detailTxtPurple,
#detailMainArea .detailPinkTitle,
#detailMainArea .detailTxtLGreen,
#detailMainArea .detailTxtLPink,
#detailMainArea .detailTxtBlue2,
#detailMainArea .detailBlueTitle,
#detailMainArea .detailSaxTitle,
#detailMainArea .detailTxtBRed,
#detailMainArea .detailBlueBorderArea,
#detailMainArea .detailOrangeTitle {
  margin: 16px 0 0;
  color: #B7183F;
  font-weight: bold;
}

/* subscribe */
.subscriptionArea {
  max-width: 800px;
  margin: 0 auto;
}
.subscriptionArea table {
  width: 100%;
}
.subscriptionArea .mainimg {
  text-align: center;
}
.subscriptionArea .noteBox .red {
  color: #B7183F;
}

#mainArea {
  float: none !important;
}
#mainArea table {
  width: 100%;
  max-width: none;
}
#mainArea .btnSubmit {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.selectMenu {
  display: flex;
  justify-content: center;
  margin: 16px 0 24px;
  gap: 16px;
}
.selectMenu .selectMenuItem {
  width: calc(50% - 8px);
}
.selectMenu .selectMenuItem a {
  display: flex;
}
.selectMenu .selectMenuThumb {
  flex-shrink: 0;
  width: 30%;
  max-width: 150px;
  margin: 0 8px 0 0;
}
.selectMenu .head {
  margin-bottom: 8px;
  font-weight: bold;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.3;
}

.footerGuideTxt {
  margin-bottom: 16px;
  font-weight: bold;
  text-align: center;
}

.footerNoteTxt p {
  margin-bottom: 16px;
}

@media screen and (max-width: 640px) {
  #mainArea table.subscriptionTable tr td:first-of-type {
    padding-left: 0;
  }

  #mainArea .keyword350,
#mainArea .keyword150 {
    width: 100% !important;
    max-width: 100%;
  }

  #mainArea input[name=re_email_first].keyword150,
#mainArea input[name=re_email_last].keyword150 {
    width: 45% !important;
  }

  #mainArea .btnSubmit {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  #mainArea .loginArea .loginBox .loginForm {
    width: 100% !important;
  }

  #mainArea .loginArea .loginBox .loginForm th,
#mainArea .loginArea .loginBox .loginForm td {
    display: block;
  }

  #mainArea .loginArea .loginBox .pwRemind a {
    display: inline-block;
    margin-top: 8px;
  }

  #mainArea .loginArea .loginBox .pwRemind {
    text-align: left !important;
  }

  #mainArea .loginArea .loginBox .loginForm td {
    margin-bottom: 16px;
  }

  #mainArea .loginArea .loginBox .loginForm td input {
    width: 100% !important;
  }

  .selectMenu {
    display: block;
  }
  .selectMenu .selectMenuItem {
    width: 100%;
    margin-bottom: 24px;
  }

  #mainArea table.subscriptionTable th {
    padding: 10px 10px 10px 0 !important;
  }

  #mainArea table.subscriptionTable .tel1,
#mainArea table.subscriptionTable .tel2,
#mainArea table.subscriptionTable .tel3 {
    width: auto !important;
  }

  #mainArea table.subscriptionTable td p input.zipBtn {
    margin-left: 0;
  }

  #mainArea table.subscriptionTable .loginpwControl {
    float: none !important;
  }

  #mainArea table.subscriptionTable td p input.name1,
#mainArea table.subscriptionTable td p input.name2,
#mainArea table.subscriptionTable td p input.kana1,
#mainArea table.subscriptionTable td p input.kana2,
#mainArea table.subscriptionTable td p input#card_no,
#mainArea table.subscriptionTable td p input#card_securitycode {
    display: block;
  }

  #mainArea table.grayTable td p input {
    display: block;
  }

  #mainArea table.grayTable input.zip1,
#mainArea table.grayTable input.zip2,
#mainArea table.grayTable input.tel1,
#mainArea table.grayTable input.tel2,
#mainArea table.grayTable input.tel3 {
    display: inline-block;
    width: 4em !important;
  }

  #mainArea table.grayTable .zipBtn {
    display: inline-block;
  }

  #mainArea #creditcardinfo {
    margin: 20px 0 !important;
  }
}
/* origin other */
#homeContentHolder #sidebar,
#mainContents #sidebar {
  display: none !important;
}
#homeContentHolder .centerTable,
#mainContents .centerTable {
  width: auto !important;
}
#homeContentHolder #mainArea,
#mainContents #mainArea {
  padding: 0 10px !important;
}

#mainContents {
  min-width: unset !important;
}

/* toeic */
.detailToeicHowtoPlay {
  width: 100% !important;
}

.detailToeicHowtoPlayTxt,
.detailToeicDLTxt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.detailToeicIco {
  display: none !important;
}

#detailMainArea img.detailToeicAppBnr,
#detailMainArea img.detailToeicDLBtn {
  margin: 0 0 0 16px !important;
}

/* mypage */
.subscriptionArea {
  max-width: none !important;
}
.subscriptionArea #mainContentsWrap {
  width: 100% !important;
}

#mypage .mainArea {
  width: calc(100% - 224px) !important;
}

@media screen and (max-width: 960px) {
  .subscriptionArea #mainContentsWrap #mypage {
    display: flex;
    flex-wrap: wrap;
  }
  .subscriptionArea #mainContentsWrap #mypage .mainArea {
    order: 2;
    width: 100% !important;
    float: none;
  }
  .subscriptionArea #mainContentsWrap #mypage .menuArea {
    order: 1;
    width: 100% !important;
    margin-bottom: 24px;
    float: none;
  }
  .subscriptionArea #mainContentsWrap #mypage .menuArea .menu ul {
    display: flex;
  }
  .subscriptionArea #mainContentsWrap #mypage .menuArea .menu li {
    width: 100%;
  }
  .subscriptionArea #mainContentsWrap #mypage .menuArea .menu li a {
    display: block;
    height: 100%;
    padding: 4px;
  }
}
@media screen and (max-width: 640px) {
  .subscriptionArea #mainContentsWrap #mypage .name1, .subscriptionArea #mainContentsWrap #mypage .name2, .subscriptionArea #mainContentsWrap #mypage .kana1, .subscriptionArea #mainContentsWrap #mypage .kana2 {
    width: calc(100% - 2em);
  }

  #mypage .mainArea table.editTable th {
    width: 6em;
    white-space: unset !important;
  }
}