@charset "UTF-8";
/* --------------------------------------------------
 ※※※※※※※※※※※※※※※※※※※※※※※※
 共通ページ用
 このファイルはsassでコンパイルされています
 以下の内容を変更したい場合は構成するscssファイルを
 ご確認ください
 ※※※※※※※※※※※※※※※※※※※※※※※※
-------------------------------------------------- */
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap";
:root {
  /* ------------------------------
  pallet colors
  ------------------------------ */
  --pallet-main-100: #effdfd;
  --pallet-main-500: #4dbdb7;
  --pallet-main-600: #00a098;
  --pallet-main-700: #006c67;
  --pallet-red: #e43e35;
  --pallet-red-pale: #fef1f4;
  --pallet-red-notice: #c90000;
  --pallet-orange-400: #ff6533;
  --pallet-yellow-100: #fff6ba;
  --pallet-gold-400: #ddaa04;
  --pallet-brown-400: #d28f55;
  --pallet-blue-400: #2784ff;
  --pallet-gray-10: #fafafa;
  --pallet-gray-50: #efefef;
  --pallet-gray-300: #d1d1d1;
  --pallet-gray-500: #8b8b8b;
  --pallet-gray-600: #646464;
  --pallet-gray-800: #1f2937;
  --pallet-white: #fff;
  --color-surface-shadow: 100 100 100;
  --color-modal-shadow: 100 100 100;
  --color-mv-shadow: 0 108 103;
  --color-header-shadow: 0 108 103;
  --color-bottombar-shadow: 0 108 103;
  /* ------------------------------
    Semantic colors
    役割・意味を表現（テーマで変更される）
  ------------------------------ */
  --color-main: var(--pallet-main-600);
  --color-on-main: var(--pallet-white);
  --color-main-sub: var(--pallet-main-500);
  --color-main-pale: var(--pallet-main-100);
  --color-on-main-pale: var(--pallet-main-600);
  --color-main-dark: var(--pallet-main-700);
  --color-paramount: var(--pallet-orange-400);
  --color-on-paramount: var(--pallet-white);
  --color-accent: var(--pallet-yellow-100);
  --color-attention: var(--pallet-red);
  --color-on-attention: var(--pallet-white);
  --color-attention-pale: var(--pallet-red-pale);
  --color-notice: var(--pallet-red-notice);
  --color-done: var(--pallet-gray-500);
  --color-disabled: var(--pallet-gray-300);
  --color-surface-disabled: var(--pallet-gray-50);
  --color-tag-disabled: var(--pallet-gray-500);
  --color-on-disabled: var(--pallet-white);
  --color-text: var(--pallet-gray-800);
  --color-text-sub: var(--pallet-gray-500);
  --color-text-link: var(--pallet-gray-800);
  --color-text-link-hover: var(--pallet-orange-400);
  --color-heading02-accent: var(--pallet-main-600);
  --color-heading-footer-accent: var(--pallet-main-600);
  --color-border: var(--pallet-gray-500);
  --color-surface: var(--pallet-white);
  --color-surface-main: var(--pallet-main-100);
  --color-surface-sub: var(--pallet-gray-50);
  --color-on-surface-sub: var(--pallet-gray-800);
  --color-bg-main: var(--pallet-main-100);
  --color-bg-disabled: var(--pallet-gray-50);
  --color-bg-section: var(--pallet-gray-50);
  --color-bg-section-pale: var(--pallet-gray-10);
  --color-bg-header: var(--pallet-white);
  --color-bg-footer: var(--pallet-main-100);
  --color-modal-close: var(--pallet-white);
  --color-modal-close-hover: var(--pallet-main-600);
  --color-bg-modal: var(--pallet-white);
  --color-bg-modal-overlay: 100 100 100;
  --color-form-icon: var(--pallet-main-600);
  --color-form-placeholder: var(--pallet-gray-500);
  --color-radio-disabled: var(--pallet-gray-800);
  --color-focus: var(--pallet-blue-400);
  --color-on-ranking-crown: var(--pallet-white);
  --color-ranking-first: var(--pallet-gold-400);
  --color-ranking-second: var(--pallet-gray-500);
  --color-ranking-third: var(--pallet-brown-400);
  --color-book-border: var(--pallet-gray-500);
  --color-bg-service: var(--pallet-gray-10);
  --color-border-service: var(--pallet-gray-50);
  --color-text-sub-service: var(--pallet-gray-500);
  --color-list-disc: var(--pallet-gray-500);
  --color-list-border: var(--pallet-gray-500);
}

:root {
  --font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  --font-family-jp: "Zen Kaku Gothic New", sans-serif;
  --font-family-jp-serif: "ヒラギノ明朝 ProN", "Hiragino Kaku Mincho ProN", 游明朝, "Yu Mincho", hg明朝e, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-weight-light: 400;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
  --font-4xl: 36px;
  --font-3xl: 32px;
  --font-3xl-sm: 28px;
  --font-2xl: 24px;
  --font-2xl-sm: 22px;
  --font-xl: 20px;
  --font-lg: 18px;
  --font-base: 16px;
  --font-sm: 14px;
  --font-xs: 12px;
  --font-2xs: 10px;
  --line-none: 1;
  --line-sm: 1.35;
  --line-base: 1.5;
  --line-relax: 1.75;
}

:root {
  interpolate-size: allow-keywords;
  --trans-quick: 0.1s ease;
  --trans-default: 0.2s ease;
  --trans-slow: 0.4s ease;
}

/* ------------------------------
  ## 命名ルール
  $color-{component}-{variant}-{property}-{state}

  ## 構成要素
  {component}: btn, tag, card, input... （必須）
  {variant}: primary, secondary, tertiary, paramount... （必須）
  {property}: border, outline, shadow... （省略時は背景色）
  {state}: hover, active, focus, disabled...（省略時は通常状態）

  ## on- プレフィックス（コンテンツ色）
  $color-on-{component}-{variant}-{state}
  背景上のコンテンツ（テキスト・アイコン・装飾要素）に使用

  ## 例
  $color-btn-primary                    // ボタン primary の背景色
  $color-on-btn-primary                 // ボタン primary のコンテンツ色（テキスト・アイコン）
  $color-btn-primary-border             // ボタン primary のボーダー色
  $color-btn-primary-hover              // ボタン primary の背景色（ホバー時）
  $color-on-btn-primary-hover           // ボタン primary のコンテンツ色（ホバー時）
  $color-btn-primary-border-hover       // ボタン primary のボーダー色（ホバー時）
------------------------------ */
/* ------------------------------
  base
------------------------------ */
html {
  background-color: var(--color-surface);
  scroll-padding-top: 140px;
}
@media screen and (max-width: 768.9px) {
  html {
    scroll-padding-top: 72px;
  }
}
html.is-fixed {
  height: 100%;
  overflow-y: scroll;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.02em;
  line-height: var(--line-base);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  image-rendering: auto;
  container-name: body;
}
.is-fixed body {
  position: fixed;
  width: 100%;
}

*:focus-visible {
  border-radius: 8px;
  outline: 4px solid var(--color-focus) !important;
}

form {
  display: contents;
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  image-rendering: auto;
}

a {
  transition: var(--trans-default);
}

input,
textarea,
select {
  font-family: var(--font-family);
}

button {
  transition: var(--trans-default);
  font-family: var(--font-family);
}
@media (any-hover: hover) {
  button:hover {
    cursor: pointer;
  }
}

.only-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  .only-sp {
    display: none !important;
  }
}
@media screen and (max-width: 768.9px) {
  .only-pc {
    display: none !important;
  }
}
/* ------------------------------
  footer
------------------------------ */
.footer {
  min-width: 980px;
  margin-block: 80px 0;
  background: var(--color-bg-footer);
}
.footer--service {
  min-width: calc(980px + 80px);
}
@media screen and (max-width: 768.9px) {
  .footer {
    min-width: auto;
    margin-block-start: 60px;
  }
}
.footer__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .footer__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
@media screen and (max-width: 768.9px) {
  .footer__inner {
    min-width: auto;
    padding-inline: 20px;
  }
}

/* ------------------------------
  footer-app
------------------------------ */
.footer-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 34px;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0px 4px 20px rgb(var(--color-surface-shadow) / 0.12);
  gap: 24px;
  container-type: inline-size;
}
@media screen and (max-width: 768.9px) {
  .footer-app {
    padding: 18px 20px 22px;
    gap: 16px;
  }
}
.footer-app__title {
  margin-block: 0;
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .footer-app__title {
    font-weight: var(--font-weight-normal);
  }
}
.footer-app__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: clamp(16px, 12.73cqi - 108.76px, 44px);
}
@media screen and (max-width: 768.9px) {
  .footer-app__nav {
    gap: 14px;
  }
}
.footer-app__button {
  transition: var(--trans-default);
  border-radius: 6px;
}
@media (any-hover: hover) {
  .footer-app__button:hover {
    transform: scale(1.05);
  }
}
.footer-app__button img {
  width: auto;
  height: clamp(60px, 2.27cqi + 37.75px, 65px);
}
@media screen and (max-width: 768.9px) {
  .footer-app__button img {
    height: clamp(46px, 6.1cqi + 21px, 60px);
  }
}

/* ------------------------------
  footer-bottom
------------------------------ */
.footer-bottom {
  background: var(--color-surface);
}
.footer-bottom__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .footer-bottom__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 50px;
  padding-block: 20px;
}
@media screen and (max-width: 768.9px) {
  .footer-bottom__inner {
    min-width: auto;
    padding-inline: 20px;
    gap: 12px;
  }
}
.footer-bottom__nav {
  flex: 1 0 auto;
  max-width: 100%;
}
.footer-bottom__list {
  display: flex;
  flex-wrap: wrap;
  margin-block: 0;
  padding: 0;
  list-style: none;
  gap: 16px 50px;
}
@media screen and (max-width: 768.9px) {
  .footer-bottom__list {
    gap: 10px;
  }
}
.footer-bottom__link {
  display: flex;
  align-items: center;
  transition: var(--trans-default);
  color: var(--color-text-sub);
  font-size: var(--font-xs);
  line-height: var(--line-sm);
  text-decoration: none;
}
@media screen and (max-width: 768.9px) {
  .footer-bottom__link {
    letter-spacing: 0;
  }
}
@media (any-hover: hover) {
  .footer-bottom__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.footer-bottom__copyright {
  margin-inline: auto;
  font-size: var(--font-xs);
}
@media screen and (max-width: 768.9px) {
  .footer-bottom__copyright {
    width: 100%;
    text-align: center;
  }
}

/* ------------------------------
  footer-nav
------------------------------ */
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-block: 40px;
}
@media screen and (max-width: 768.9px) {
  .footer-nav {
    flex-direction: column;
    gap: 36px;
    margin-block: 36px 40px;
  }
}
.footer-nav__item {
  display: flex;
  flex-direction: column;
  width: 200px;
  gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .footer-nav__item {
    width: auto;
    gap: 20px;
  }
}
.footer-nav__title {
  margin-block: 0;
  padding-bottom: 8px;
  border-bottom: var(--color-heading-footer-accent) 2px solid;
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
}

/* ------------------------------
  footer-nav-list
------------------------------ */
.footer-nav-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
  gap: 12px;
}
@media screen and (max-width: 768.9px) {
  .footer-nav-list {
    gap: 18px;
  }
}
@media screen and (max-width: 768.9px) {
  .footer-nav-list--sns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
.footer-nav-list__link {
  transition: var(--trans-default);
  color: var(--color-text-link);
  font-size: var(--font-sm);
  line-height: var(--line-sm);
  text-decoration: none;
}
.footer-nav-list--sns .footer-nav-list__link {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (any-hover: hover) {
  .footer-nav-list__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.footer-nav-list__link img {
  width: 30px;
  height: 30px;
}
@media screen and (max-width: 768.9px) {
  .footer-nav-list__link img {
    width: 40px;
    height: 40px;
  }
}

/* ------------------------------
  footer-top
------------------------------ */
.footer-top {
  display: flex;
  justify-content: center;
  padding-block: 60px;
  gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    padding-block: 40px 36px;
    gap: 16px;
  }
}

/* ------------------------------
  header
------------------------------ */
.header {
  position: sticky;
  z-index: 5;
  top: 0;
  min-width: 980px;
  background: var(--color-bg-header);
  box-shadow: 0 4px 40px rgb(var(--color-header-shadow) / 0.12);
}
.header--service {
  min-width: calc(980px + 80px);
}
@media screen and (max-width: 768.9px) {
  .header {
    min-width: auto;
  }
}
.header--simple {
  position: static;
  box-shadow: none;
}
.header__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .header__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.header__inner {
  display: flex;
  align-items: center;
  padding-block: 16px;
}
@media screen and (max-width: 768.9px) {
  .header__inner {
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: auto;
    padding-block: 12px;
    padding-inline: 20px;
    gap: 12px 0;
  }
}
.header__logo {
  flex: 0 0 auto;
  width: 100px;
  margin: 0;
}
@media screen and (max-width: 768.9px) {
  .header__logo {
    width: 80px;
    height: 32px;
    margin-right: 12px;
  }
}
.header__logo-img {
  display: block;
  width: 100%;
  height: auto;
}
.header__logo-link {
  display: block;
}
.header__button-login {
  flex: 0 0 auto;
  width: auto;
}
@media screen and (max-width: 768.9px) {
  .header__button-login.is-hide {
    display: none;
  }
}
.header__search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  margin-left: 30px;
  padding-block: 2px;
}
@media screen and (max-width: 768.9px) {
  .header__search {
    flex-direction: column;
    align-items: flex-end;
    order: 3;
    width: 100%;
    height: auto;
    margin-left: 0;
    transition: ease 0.1s;
    gap: 8px;
  }
  .header__search.is-hide {
    height: 0;
  }
}
.header__search-box {
  display: contents;
}
@media screen and (max-width: 768.9px) {
  .header__search-box {
    display: flex;
    width: 100%;
  }
}
.header__user {
  display: flex;
  flex-direction: column;
  margin-left: 4px;
  gap: 5px;
}
@media screen and (max-width: 768.9px) {
  .header__user.is-hide {
    display: none;
  }
}

/* ------------------------------
  header
------------------------------ */
.header-bar {
  position: relative;
  z-index: 6;
  min-width: 980px;
  background: var(--color-bg-header);
}
.header-bar--service {
  min-width: calc(980px + 80px);
}
@media screen and (max-width: 768.9px) {
  .header-bar {
    min-width: auto;
  }
}
.header-bar__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .header-bar__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.header-bar__inner {
  display: flex;
  align-items: center;
  padding-block: 11px 4px;
}
@media screen and (max-width: 768.9px) {
  .header-bar__inner {
    display: flex;
    min-width: auto;
    padding: 0;
    padding-inline: 20px;
  }
}
.header-bar__login {
  display: flex;
  gap: 8px;
  align-items: center;
}
.header-bar__user {
  display: flex;
  gap: 32px;
  align-items: center;
}
.header-bar__profile {
  display: flex;
  gap: 20px;
  align-items: center;
}
.header-bar__text {
  margin-block: 0;
  color: var(--color-text-sub);
  font-size: 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* ------------------------------
  header-category
------------------------------ */
@media screen and (max-width: 768.9px) {
  .header-category {
    flex: 0 0 auto;
  }
}
.header-category__panel {
  display: none;
  position: absolute;
  opacity: 0;
  box-shadow: 0px 4px 20px rgb(var(--color-surface-shadow) / 0.12);
}
@media screen and (min-width: 769px) {
  .header-category:has(:hover) .header-category__panel {
    display: block;
    animation: fade-in 0.3s ease forwards;
    opacity: 1;
  }
}

/* ------------------------------
  header-category-button
------------------------------ */
.header-category-button {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  transition: var(--trans-default);
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .header-category-button {
    padding: 8px 10px;
    font-size: var(--font-xs);
    gap: 4px;
  }
}
@media screen and (any-hover: hover) and (min-width: 769px) {
  .header-category:has(:hover) .header-category-button {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.header-category-button::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  transition: var(--trans-default);
  background-color: var(--color-on-main);
  font-size: 0;
  pointer-events: none;
  mask: url("/assets/images/icon/ico_triangle_down.svg") no-repeat 0 0/100% 100%;
}
@media screen and (any-hover: hover) and (min-width: 769px) {
  .header-category-button:hover.header-category-button::after {
    transform: rotate(-180deg);
  }
}

/* ------------------------------
  header-menu
------------------------------ */
.header-menu {
  height: 100%;
  margin-left: auto;
  padding-left: 14px;
}
@media screen and (max-width: 768.9px) {
  .header-menu {
    padding-left: 4px;
  }
}
.header-menu__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media screen and (max-width: 768.9px) {
  .header-menu__list {
    gap: 4px;
  }
}
.header-menu__item {
  display: flex;
  transition: var(--trans-quick);
}
@media screen and (max-width: 768.9px) {
  .header-menu__item--search {
    display: none;
  }
  .header-menu__item--search.is-hide {
    opacity: 0;
  }
}

/* ------------------------------
  header-menu
------------------------------ */
.header-menu-link {
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 55px;
  padding: 4px 2px;
  border: 0;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  gap: 2px;
}
@media screen and (max-width: 768.9px) {
  .header-menu-link {
    min-width: 44px;
    min-height: 44px;
    padding: 2px;
  }
}
@media (any-hover: hover) {
  .header-menu-link:hover {
    background: var(--color-main-pale);
    color: var(--color-main);
  }
}
@media screen and (max-width: 768.9px) {
  .header-menu__item--search .header-menu-link {
    font-size: 0;
  }
}

/* ------------------------------
  header-search
------------------------------ */
.header-search {
  display: flex;
  box-sizing: border-box;
  flex: 1 1 auto;
  max-width: 400px;
  margin-block: 4px;
  margin-inline-start: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
@media screen and (max-width: 768.9px) {
  .header-search {
    max-width: none;
    margin-block: 0;
  }
}
.header-search__input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 8px 0 8px 12px;
  overflow: hidden;
  border: solid transparent 4px;
  border-radius: 8px 0 0 8px;
  font-size: var(--font-base);
  font-weight: var(--font-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-search__input:focus-visible {
  border-radius: 0;
}
.header-search__input::placeholder {
  color: var(--color-form-placeholder);
}
.header-search__button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 36px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: var(--color-surface);
}
.header-search__button::before {
  content: "";
  width: 16px;
  height: 16px;
  mask-image: url("/assets/images/icon/ico_search.svg");
  background-color: var(--color-main);
}
@media (any-hover: hover) {
  .header-search__button:hover {
    background: var(--color-main-pale);
  }
  .header-search__button:hover::before {
    background-color: var(--color-main);
  }
}

/* ------------------------------
  header-search-button
------------------------------ */
.header-search-button {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-height: 40px;
  margin-left: 16px;
  padding: 8px 16px 8px 12px;
  border: 2px solid var(--color-main);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .header-search-button {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 8px;
  }
}
@media (any-hover: hover) {
  .header-search-button:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
    color: var(--color-main);
  }
  .header-search-button:hover::before,
  .header-search-button:hover::after {
    background-color: var(--color-main);
  }
}
.header-search-button::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: -2px 0;
  background-color: var(--color-main);
  font-size: 0;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url("/assets/images/icon/ico_plus.svg");
}
@media screen and (max-width: 768.9px) {
  .header-search-button::before {
    display: none;
  }
}
@media screen and (max-width: 768.9px) {
  .header-search-button::after {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background-color: var(--color-main);
    font-size: 0;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: url("/assets/images/icon/ico_arrow_right.svg");
  }
}

/* ------------------------------
  header-point
------------------------------ */
.header-point {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-sub);
  font-size: var(--font-xs);
  gap: 5px;
}
@media screen and (max-width: 768.9px) {
  .header-point {
    gap: 3px;
  }
}
.header-point__icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 768.9px) {
  .header-point__icon {
    translate: 0 -2px;
    width: 16px;
    height: 16px;
  }
}
.header-point__icon img {
  aspect-ratio: 1/1;
  width: 20px;
}
@media screen and (max-width: 768.9px) {
  .header-point__icon img {
    width: 16px;
  }
}

/* ------------------------------
  header-category
------------------------------ */
.header-user {
  display: flex;
  gap: 12px;
  align-items: center;
}
.header-user__name {
  display: flex;
  align-items: flex-end;
  margin-block: 0;
  color: var(--color-main);
  font-size: var(--font-xs);
  line-height: var(--line-none);
}
.header-user__name-strong {
  display: flex;
  font-size: var(--font-sm);
}
.header-user__job {
  display: flex;
  margin-block: 0;
  padding: 0;
  color: var(--color-text-sub);
  list-style: none;
  gap: 4px;
}
.header-user__job-item {
  display: flex;
  gap: 4px;
  font-size: var(--font-xs);
}
.header-user__job-item:not(:last-child)::after {
  content: "/";
}

/* ------------------------------
  header-store
------------------------------ */
.header-store {
  display: flex;
  align-items: center;
  margin-block: 0;
  gap: 12px;
}
@media screen and (max-width: 768.9px) {
  .header-store {
    gap: 8px;
  }
}
.header-store__heading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-block: 0;
  padding: 6px 12px;
  background-color: var(--pallet-main-100);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  gap: 12px;
}
.header-store__heading::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  mask: url("/assets/images/icon/ico_book.svg") no-repeat center/contain;
  background-color: var(--color-main);
}
.header-store__name {
  margin-block: 0;
  color: var(--color-text-sub);
  font-size: var(--font-xs);
}

/* ------------------------------
  ly-accordion-box
------------------------------ */
.ly-accordion-box {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 768.9px) {
  .ly-accordion-box {
    flex-direction: column;
    gap: 20px;
  }
}

/* ------------------------------
  ly-change-book-store
------------------------------ */
.ly-change-book-store {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  width: 100%;
}

/* ------------------------------
  ly-confirm-book-store
------------------------------ */
.ly-confirm-book-store {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .ly-confirm-book-store {
    width: 100%;
    row-gap: 16px;
  }
}

/* ------------------------------
  ly-button
------------------------------ */
.ly-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .ly-button {
    row-gap: 16px;
  }
}
@media screen and (min-width: 769px) {
  .ly-button--horizontal {
    flex-direction: row;
    justify-content: center;
    column-gap: 16px;
  }
}

/* ------------------------------
  ly-button-column
------------------------------ */
.ly-button-column {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
@media screen and (max-width: 768.9px) {
  .ly-button-column {
    width: 100%;
  }
}

/* ------------------------------
  ly-book-detail
------------------------------ */
.ly-book-detail {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  width: 100%;
}

/* ------------------------------
  ly-book-list
------------------------------ */
.ly-book-list {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .ly-book-list {
    row-gap: 40px;
  }
}

/* ------------------------------
  ly-confirm
------------------------------ */
.ly-confirm {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ------------------------------
  ly-confirm-head
------------------------------ */
.ly-confirm-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (max-width: 768.9px) {
  .ly-confirm-head {
    gap: 20px;
  }
}

/* ------------------------------
  ly-container
------------------------------ */
.ly-container {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-container {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.ly-container {
  display: grid;
  grid-template-areas: "sidebar main  " "related related";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 80px 40px;
}
.ly-lower-main .ly-container {
  min-width: 0;
}
.ly-container:has(.book-list) {
  column-gap: 50px;
}
.ly-container:not(:has(.ly-related)) {
  grid-template-areas: "sidebar main";
  row-gap: 0;
}
.ly-container--one-column {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768.9px) {
  .ly-container {
    display: flex;
    flex-direction: column;
    min-width: auto;
    padding-inline: 20px;
    gap: 60px;
  }
  .ly-lower-container .ly-container {
    padding-inline: 0;
  }
}

/* ------------------------------
  ly-form-bottom
------------------------------ */
.ly-form-bottom {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  align-items: center;
  width: 100%;
}

/* ------------------------------
  ly-information-detail
------------------------------ */
.ly-information-detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .ly-information-detail {
    row-gap: 16px;
  }
}

/* ------------------------------
  ly-information-list
------------------------------ */
.ly-information-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-information-list {
    row-gap: 24px;
  }
}

/* ------------------------------
  ly-lower-container
------------------------------ */
.ly-lower-container {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-container {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.ly-lower-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 60px;
  row-gap: 40px;
}
.ly-lower-container--fill {
  max-width: 100%;
  padding-inline: 0;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-container {
    margin-top: 20px;
    row-gap: 20px;
  }
  .ly-lower-container:has(.merit-list) {
    row-gap: 40px;
  }
}

/* ------------------------------
  ly-lower-contents
------------------------------ */
.ly-lower-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-contents {
    row-gap: 24px;
  }
}
.ly-lower-contents:has(> .ly-related) {
  row-gap: 80px;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-contents:has(> .ly-related) {
    row-gap: 60px;
  }
}

/* ------------------------------
  ly-lower-main
------------------------------ */
.ly-lower-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 40px;
}
.ly-lower-main.is-small {
  max-width: 900px;
}
.ly-lower-main:has(> .ly-related) {
  row-gap: 80px;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-main:has(> .ly-related) {
    row-gap: 60px;
  }
}

/* ------------------------------
  ly-main
------------------------------ */
.ly-main {
  display: flex;
  grid-area: main;
  flex-direction: column;
  min-width: 0; /* CSS Grid のアイテムが親コンテナを超えないようにする */
  gap: 60px 0;
}

/* ------------------------------
  _ly-purchase
------------------------------ */
.ly-purchase {
  display: flex;
  gap: 40px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .ly-purchase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 40px;
  }
}

/* ------------------------------
  ly-related
------------------------------ */
.ly-related {
  grid-area: related;
  width: 100%;
}

/* ------------------------------
  ly-section
------------------------------ */
.ly-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 768.9px) {
  .ly-section {
    gap: 20px;
  }
}

/* ------------------------------
  ly-section-head
------------------------------ */
.ly-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.ly-section-head__title {
  flex: 1 1 auto;
}
.ly-section-head__button {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ------------------------------
  ly-section-wrapper
------------------------------ */
.ly-section-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 60px;
}
.ly-lower-container--fill .ly-section-wrapper {
  align-items: center;
}

/* ------------------------------
  ly-select-book-store-section
------------------------------ */
.ly-select-book-store-section {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .ly-select-book-store-section {
    row-gap: 16px;
  }
}

/* ------------------------------
  ly-select-book-store-section-wrapper
------------------------------ */
.ly-select-book-store-section-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  width: 100%;
}

/* ------------------------------
  ly-sidebar
------------------------------ */
.ly-sidebar {
  display: flex;
  grid-area: sidebar;
  flex-direction: column;
  width: 200px;
  gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .ly-sidebar {
    width: 100%;
    gap: 16px;
  }
}

/* ------------------------------
  ly-table-wrapper
------------------------------ */
.ly-table-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.ly-table-wrapper__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ------------------------------
  ly-top-fv
------------------------------ */
.ly-top-fv {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-top-fv {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.ly-top-fv {
  margin-bottom: 60px;
}
@media screen and (max-width: 768.9px) {
  .ly-top-fv {
    min-width: 100%;
    margin-bottom: 40px;
    padding-inline: 20px;
  }
}

/* ------------------------------
  ly-wrapper
------------------------------ */
.ly-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------
  accordion-box
------------------------------ */
.accordion-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.accordion-box__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border: solid 2px var(--color-main);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  text-align: left;
}
.accordion-box__heading:hover {
  background-color: var(--color-bg-main);
}
.accordion-box__contents {
  height: 0;
  padding: 16px 12px 0;
  overflow: hidden;
  transition: var(--trans-slow);
}
.accordion-box__contents.is-expanded {
  height: auto;
  padding-bottom: 20px;
}

/* ------------------------------
  accordion-list
------------------------------ */
.accordion-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0;
  padding: 0;
  list-style: none;
  gap: 12px 0;
}
.accordion-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}
.accordion-list__item-heading {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  background-color: var(--color-surface-sub);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.accordion-list__item-heading [class^="icon-"] {
  width: 14px;
  height: auto;
}
.accordion-list__item-heading [class^="icon-"]::before {
  background-color: var(--color-text-sub);
}
.accordion-list__item-contents {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  transition: var(--trans-slow);
  row-gap: 12px;
}
[aria-expanded="true"] + .accordion-list__item-contents {
  height: auto;
}
.accordion-list__category {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accordion-list__price {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.accordion-list__device-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ------------------------------
  arrow-list
------------------------------ */
.arrow-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}
.arrow-list__link {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 35px;
  padding: 8px 10px;
  color: var(--color-text);
  font-size: var(--font-sm);
  text-decoration: none;
}
.arrow-list__link [class^="icon-"] {
  flex-shrink: 0;
  width: 14px;
  height: auto;
  translate: 0 4px;
}
@media (any-hover: hover) {
  .arrow-list__link:hover {
    background-color: var(--color-main-pale);
  }
}

.badge-dot {
  position: absolute;
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-attention);
}
.icon-alert .badge-dot {
  top: 1px;
  right: 2px;
}

/* ------------------------------
  book-data-list
------------------------------ */
.book-data-list {
  display: flex;
  margin-block: 0;
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .book-data-list {
    flex-shrink: 0;
    padding-bottom: 16px;
    overflow: scroll;
  }
}
.book-data-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14.2857142857%;
  padding-inline: 8px;
  border-right: solid 1px var(--color-main);
  text-align: center;
  gap: 6px;
}
.book-data-list__item:first-child {
  border-left: solid 1px var(--color-main);
}
@media screen and (max-width: 768.9px) {
  .book-data-list__item {
    flex-shrink: 0;
    min-width: 110px;
  }
}
.book-data-list__title {
  color: var(--color-main);
}
.book-data-list__data {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}
.book-data-list__link {
  color: var(--color-main);
  text-decoration: none;
}
@media (any-hover: hover) {
  .book-data-list__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  book-detail
------------------------------ */
.book-detail {
  display: grid;
  grid-template: "image tag" "image data" / auto 1fr;
  gap: 0 28px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .book-detail {
    grid-template: "tag" "image" "data"/1fr;
    min-width: auto;
    padding-inline: 0;
  }
}
.book-detail__tag-area {
  display: flex;
  grid-area: tag;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}
.book-detail__image {
  grid-area: image;
  aspect-ratio: 1/1;
  width: 340px;
  height: 340px;
}
@media screen and (max-width: 768.9px) {
  .book-detail__image {
    width: 100%;
    height: auto;
  }
}
.book-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.book-detail__data {
  grid-area: data;
}
@media screen and (max-width: 768.9px) {
  .book-detail__data {
    margin-top: 20px;
  }
}
.book-detail__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-detail__title-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
}
@media screen and (max-width: 768.9px) {
  .book-detail__title-wrap {
    flex-direction: column;
    gap: 12px;
  }
}
.book-detail__subinfo {
  margin-top: 16px;
}

/* ------------------------------
  book-detail-author
------------------------------ */
.book-detail-author {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  gap: 2px 4px;
}
@media screen and (max-width: 768.9px) {
  .book-detail-author {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  book-detail-action
------------------------------ */
.book-detail-action {
  display: flex;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .book-detail-action {
    align-self: flex-end;
  }
}
/* ------------------------------
  book-detail-buttons
------------------------------ */
.book-detail-buttons {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-top: 24px;
  gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .book-detail-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

/* ------------------------------
  book-detail-info
------------------------------ */
.book-detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.book-detail-info__item {
  margin-block: 0;
  color: var(--color-text-sub);
}

/* ------------------------------
  book-detail-price
------------------------------ */
.book-detail-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  gap: 12px 0;
}
.book-detail-price__amount {
  display: flex;
  align-items: center;
  font-size: var(--font-3xl-sm);
  translate: 0 -1px;
  gap: 4px;
}
.book-detail-price__number {
  translate: 0 -1px;
}
.book-detail-price__yen {
  font-size: var(--font-2xl);
}

/* ------------------------------
  book-detail-info
------------------------------ */
.book-detail-title {
  flex: 1;
}
.book-detail-title__text {
  display: inline;
  margin-block: 0;
  font-size: var(--font-2xl);
  line-height: var(--line-sm);
}
@media screen and (max-width: 768.9px) {
  .book-detail-title__text {
    font-size: var(--font-xl);
  }
}
.book-detail-title__tag {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 7px 6px;
  border: solid 1px var(--color-main);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  translate: 0 -4px;
  gap: 4px;
}

/* ------------------------------
  book-detail-wrapper
------------------------------ */
.book-detail-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
  width: 100%;
}

/* ------------------------------
  book-card
------------------------------ */
.book-card {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  max-width: 240px;
  gap: 8px;
}
.is-tile .book-card {
  width: calc((100% - 84px) / 4);
}
@media screen and (max-width: 768.9px) {
  .is-tile .book-card {
    width: calc((100% - 12px) / 2);
  }
  @container (min-width:calc(240px * 2 + 12px)) {
    .is-tile .book-card {
      width: calc((100% - 24px) / 3);
    }
  }
}
.feature .is-tile .book-card {
  width: calc((100% - 256px) / 5);
}
@media screen and (max-width: 768.9px) {
  .feature .is-tile .book-card {
    width: calc((100% - 12px) / 2);
  }
  @container (min-width:calc(240px * 2 + 12px)) {
    .feature .is-tile .book-card {
      width: calc((100% - 24px) / 3);
    }
  }
}
.book-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: solid 1px var(--color-main);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  translate: 0 -4px;
  text-align: center;
  gap: 4px;
}
.book-card__inner-top {
  display: flex;
  flex-direction: column;
}
.book-card__inner-bottom {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}
.book-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  gap: 10px;
}
@media (any-hover: hover) {
  .book-card__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.book-card__thumb {
  grid-area: thumb;
  width: 100%;
  max-width: 180px;
  overflow: hidden;
  transition: var(--trans-default);
  aspect-ratio: 1/1;
}
@media (any-hover: hover) {
  .book-card__link:hover .book-card__thumb img {
    transform: scale(1.1);
  }
}
.book-card__thumb img {
  width: 100%;
  height: 100%;
  transition: var(--trans-default);
  object-fit: contain;
}
.book-card__title {
  display: -webkit-box;
  grid-area: head;
  min-height: calc(var(--font-base) * var(--line-sm) * 2);
  margin-block: 0;
  overflow: hidden;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.book-card__tag-area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-block: 0;
  gap: 4px;
}
.book-card__price {
  margin-block: 0;
  font-size: var(--font-sm);
}
.book-card__price b {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
}
.book-card__notice {
  margin-block: 0;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
}
.book-card__button-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: flex-end;
  justify-content: flex-end;
  width: 100%;
  max-width: 210px;
  margin-block: 8px 0;
  gap: 8px;
}
.book-list.is-view-all .book-card__button-box {
  justify-content: flex-start;
}

/* ------------------------------
  book-card-action
------------------------------ */
.book-card-action {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  align-self: stretch;
  justify-content: center;
}
@media screen and (max-width: 768.9px) {
  .book-card-action {
    justify-self: flex-end;
  }
}

/* ------------------------------
  book-card-data
------------------------------ */
.book-card-data {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-block: 0;
  gap: 4px 8px;
}
.book-card-data__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  line-height: var(--line-sm);
}
@media screen and (max-width: 768.9px) {
  .book-card-data__item {
    flex-direction: row;
  }
}
.book-card-data__item--expiration {
  color: var(--color-attention);
}
.book-card-data__item--registration {
  color: var(--color-attention);
}
.book-card-data__title {
  flex: 0 0 auto;
  font-size: var(--font-sm);
}
.book-card-data__item--registration .book-card-data__title {
  font-size: var(--font-xs);
}
.book-card-data__item--viewer .book-card-data__title {
  font-size: var(--font-xs);
}
.book-card-data__desc {
  margin-inline-start: 0;
  font-size: var(--font-sm);
  letter-spacing: 0;
}
.book-card-data__item--registration .book-card-data__desc {
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
}
.book-card-data__item--viewer .book-card-data__desc {
  font-size: var(--font-xs);
}
.book-card-data__desc--emphasis {
  font-size: var(--font-base);
}

/* ------------------------------
  book-card-downloadnumber
------------------------------ */
.book-card-downloadnumber {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-decoration: none;
  appearance: none;
}
@media (any-hover: hover) {
  .book-card-downloadnumber:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  book-card-head
------------------------------ */
.book-card-head {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  gap: 8px;
}
.book-card-head__tag {
  display: grid;
  padding: 4px;
  background-color: var(--color-tag-disabled);
  color: var(--color-on-disabled);
  font-size: var(--font-xs);
  line-height: var(--line-none);
  place-items: center;
}
.book-card-head__tag.is-active {
  background-color: var(--color-main);
  color: var(--color-on-main);
}
.book-card-headinput[type="checkbox"] {
  top: 24px;
  left: 24px;
}

/* ------------------------------
  book-card-info
------------------------------ */
.book-card-info {
  display: flex;
  grid-area: subinfo;
  flex-direction: column;
  margin-block: 8px 0;
}
.book-card-info .book-card-info__publisher,
.book-card-info .book-card-info__author,
.book-card-info .book-card-info__desc {
  display: -webkit-box;
  margin-block: 0;
  overflow: hidden;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
  line-height: var(--line-sm);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.book-card-info__desc {
  -webkit-line-clamp: 2;
  min-height: calc(var(--font-sm) * var(--line-sm) * 2);
}
.book-card-info__author {
  -webkit-line-clamp: 1;
}
.book-card-info__publisher {
  -webkit-line-clamp: 1;
}

/* ------------------------------
  book-card-rank
------------------------------ */
.book-card-rank {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 8px;
  font-size: var(--font-sm);
  line-height: var(--line-none);
}
.book-card-rank__crown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 43px;
  height: 32px;
  padding-bottom: 2px;
  background-color: var(--color-ranking-first);
  color: var(--color-on-ranking-crown);
  font-family: var(--font-family-jp);
  font-size: 23px;
  mask: url("/assets/images/common/crown.svg") no-repeat center/contain;
}
.book-card-rank__crown--first {
  background-color: var(--color-ranking-first);
}
.book-card-rank__crown--second {
  background-color: var(--color-ranking-second);
}
.book-card-rank__crown--third {
  background-color: var(--color-ranking-third);
}
.book-card-rank__number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-right: 2px;
  font-size: var(--font-2xl);
  gap: 20px;
}

/* ------------------------------
  book-banner
------------------------------ */
.book-banner {
  display: grid;
  position: relative;
  grid-template: "thumb tag-area tag-area tag-area tag-area" auto "thumb head head head head" auto "thumb subinfo subinfo subinfo subinfo" auto "thumb data term price action" auto "thumb important-notice important-notice important-notice important-notice" auto "thumb viewer viewer viewer viewer" auto "thumb description description description description" auto "thumb bottom bottom bottom bottom" auto/228px 1fr auto auto auto;
  align-items: flex-end;
  max-width: 100%;
  padding-bottom: 30px;
  border-bottom: solid 1px var(--color-book-border);
  list-style: none;
}
@media (width < 1200px) {
  .book-banner {
    grid-template: "thumb tag-area tag-area tag-area" auto "thumb head head head" auto "thumb subinfo subinfo subinfo" auto "thumb data data data" auto "thumb term price action" auto "thumb viewer viewer viewer" auto "thumb important-notice important-notice important-notice" auto "thumb description description description" auto/228px 1fr auto auto;
  }
}
@media screen and (max-width: 768.9px) {
  .book-banner {
    grid-template: "thumb" auto "head" auto "subinfo " auto "data " auto "price " auto "tag-area " auto "viewer" auto "important-notice" auto "description" auto "bottom" auto "action" auto/1fr;
  }
}
.is-shelf .book-banner {
  grid-template: "thumb head head head head" auto "thumb subinfo subinfo subinfo subinfo" auto "thumb data data data data" auto "thumb price price price price" auto "thumb important-notice important-notice important-notice important-notice" auto "thumb viewer viewer viewer viewer" auto "thumb description description description description" auto "thumb bottom bottom bottom bottom" auto/228px 1fr auto auto auto;
}
.is-shelf .book-banner:has(.book-card-head) {
  grid-template-columns: 240px 1fr auto auto auto;
}
@media screen and (max-width: 768.9px) {
  .is-shelf .book-banner:has(.book-card-head) {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768.9px) {
  .is-shelf .book-banner {
    grid-template: "thumb" auto "head" auto "subinfo " auto "data " auto "price " auto "viewer" auto "bottom" auto/1fr;
  }
}
.book-banner:has(.book-banner-rank) {
  grid-template: "rank tag-area tag-area tag-area tag-area" auto "thumb head head head head" auto "thumb subinfo subinfo subinfo subinfo" auto "thumb data term price action" auto "thumb important-notice important-notice important-notice important-notice" auto "thumb viewer viewer viewer viewer" auto "thumb description description description description" auto "thumb bottom bottom bottom bottom" auto/228px 1fr auto auto auto;
}
@media screen and (max-width: 768.9px) {
  .book-banner:has(.book-banner-rank) {
    grid-template: "thumb" auto "head" auto "subinfo " auto "data " auto "price " auto "tag-area " auto "viewer" auto "important-notice" auto "description" auto "bottom" auto "action" auto/1fr;
  }
}
.is-history .book-banner {
  box-sizing: border-box;
  grid-template: "thumb head" auto "thumb data" auto "thumb price" 1fr/228px 1fr;
  align-items: flex-start;
}
@media screen and (max-width: 768.9px) {
  .is-history .book-banner {
    grid-template: "thumb" auto "head" auto "data" auto "price" auto;
  }
}
.book-banner__thumb {
  grid-area: thumb;
  flex-shrink: 0;
  align-self: flex-start;
  padding-right: 24px;
  aspect-ratio: 1/1;
}
:has(.book-card-head) .book-banner__thumb {
  padding-left: 30px;
}
@media screen and (max-width: 768.9px) {
  .book-banner__thumb {
    justify-self: center;
    width: 100%;
    max-width: 200px;
    margin-bottom: 12px;
    padding: 0;
  }
}
.book-banner__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.book-banner__tag-area {
  display: flex;
  grid-area: tag-area;
  flex-wrap: wrap;
  margin-block: 0 8px;
  gap: 4px;
}
@media screen and (max-width: 768.9px) {
  .book-banner__tag-area {
    margin-block: 8px 0;
  }
}
.book-banner__head {
  display: flex;
  grid-area: head;
  flex-direction: column;
  gap: 4px;
}
.book-banner__link {
  color: var(--color-text);
  text-decoration: none;
}
@media (any-hover: hover) {
  .book-banner__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.book-banner__title {
  display: -webkit-box;
  margin-block: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media screen and (max-width: 768.9px) {
  .book-banner__title {
    font-size: var(--font-base);
  }
}
.book-banner__subinfo {
  grid-area: subinfo;
  margin-block: 4px;
}
.book-banner__viewer {
  grid-area: viewer;
  line-height: var(--line-none);
}
.book-banner__action {
  display: flex;
  grid-area: action;
  align-items: center;
  margin-left: 32px;
  gap: 12px;
}
.book-banner__action [class^="button-"]:not(.button-favorite) {
  width: 209px;
}
@media screen and (max-width: 768.9px) {
  .book-banner__action [class^="button-"]:not(.button-favorite) {
    width: 100%;
    max-width: 390px;
  }
}
@media screen and (max-width: 768.9px) {
  .book-banner__action {
    justify-content: center;
    margin-top: 8px;
    margin-left: 0;
  }
}
.book-banner__description {
  display: -webkit-box;
  grid-area: description;
  margin-top: 6px;
  overflow: hidden;
  font-size: var(--font-xs);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.is-shelf .book-banner__description {
  margin-top: 0;
}
@media screen and (max-width: 768.9px) {
  .book-banner__description {
    display: none;
  }
}

/* ------------------------------
  book-banner-bottom
------------------------------ */
.book-banner-bottom {
  display: flex;
  grid-area: bottom;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 12px 28px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom {
    margin-top: 0;
  }
}
.book-banner-bottom__data-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom__data-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}
.book-banner-bottom__data-block {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  gap: 0 8px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom__data-block {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
  }
}
.book-banner-bottom__action {
  display: flex;
  justify-content: flex-end;
  max-width: 100%;
  column-gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom__action {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    row-gap: 8px;
  }
}
.book-banner-bottom__action [class^="button-"] {
  width: 210px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom__action [class^="button-"] {
    width: 100%;
  }
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
.book-banner-bottom__notice {
  margin-block: 0;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
}

/* ------------------------------
  book-banner-data
------------------------------ */
.book-banner-data {
  display: flex;
  grid-area: data;
  flex-direction: column;
  margin-block: 0;
  font-size: var(--font-sm);
  gap: 2px 4px;
}
.is-history .book-banner-data {
  margin-top: 12px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-data {
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 0;
    margin-bottom: 8px;
    gap: 4px 8px;
  }
  .is-shelf .book-banner-data {
    margin-bottom: 0;
  }
  .is-history .book-banner-data {
    margin-block: 8px 0;
  }
}
.book-banner-data__profile {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.is-shelf .book-banner-data__profile {
  flex-direction: column;
}
@media screen and (max-width: 768.9px) {
  .book-banner-data__profile {
    flex-direction: column;
  }
}
.book-banner-data__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-block: 0;
  font-size: var(--font-sm);
  gap: 2px 8px;
}
.is-shelf .book-banner-data__list {
  flex-direction: row;
}
@media screen and (max-width: 768.9px) {
  .book-banner-data__list {
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--font-xs);
  }
}
.book-banner-data__item {
  display: flex;
  flex-wrap: wrap;
}
.book-banner-bottom .book-banner-data__item {
  min-width: 174px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-bottom .book-banner-data__item {
    min-width: auto;
  }
}
.book-banner-data__item--expiration {
  color: var(--color-attention);
}
.book-banner-data__item--registration {
  color: var(--color-attention);
}
.book-banner-data__desc {
  margin: 0;
}
.book-banner-data__notice {
  margin-block: 0;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
}

/* ------------------------------
  book-banner-downloadnumber
------------------------------ */
.book-banner-downloadnumber {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-decoration: none;
  appearance: none;
}
@media (any-hover: hover) {
  .book-banner-downloadnumber:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  book-banner-info
------------------------------ */
.book-banner-info {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  margin: 0;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
}
.book-banner-info__item {
  margin: 0;
}

/* ------------------------------
  book-banner-rank
------------------------------ */
.book-banner-rank {
  display: flex;
  grid-area: rank;
  align-items: flex-end;
  justify-content: center;
  max-width: 180px;
  min-height: 34px;
  margin-bottom: 8px;
  font-size: var(--font-sm);
  line-height: var(--line-none);
}
@media screen and (max-width: 768.9px) {
  .book-banner-rank {
    position: absolute;
    top: 0;
    left: 0;
  }
}
.book-banner-rank__crown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 43px;
  height: 32px;
  padding-bottom: 2px;
  background-color: var(--color-ranking-first);
  color: var(--color-on-ranking-crown);
  font-family: var(--font-family-jp);
  font-size: 23px;
  mask: url("/assets/images/common/crown.svg") no-repeat center/contain;
}
.book-banner-rank__crown--first {
  background-color: var(--color-ranking-first);
}
.book-banner-rank__crown--second {
  background-color: var(--color-ranking-second);
}
.book-banner-rank__crown--third {
  background-color: var(--color-ranking-third);
}
.book-banner-rank__number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-right: 2px;
  font-size: var(--font-2xl);
  gap: 20px;
}

/* ------------------------------
  book-banner-price
------------------------------ */
.book-banner-price {
  display: flex;
  grid-area: price;
  align-items: flex-end;
  justify-content: flex-end;
  margin-block: 4px;
  font-size: var(--font-sm);
  line-height: var(--line-none);
  gap: 2px;
}
@media screen and (max-width: 768.9px) {
  .book-banner-price {
    margin-bottom: 6px;
  }
}
.is-shelf .book-banner-price {
  justify-content: flex-start;
}
.is-history .book-banner-price {
  justify-content: flex-start;
  margin-block: 8px 0;
}
@media screen and (max-width: 768.9px) {
  .book-banner-price {
    justify-content: flex-start;
    translate: 0;
  }
}
.book-banner-price__mark {
  translate: 0 -2px;
}
.book-banner-price__amount {
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .book-banner-price__amount {
    font-size: var(--font-xl);
  }
}

/* ------------------------------
  book-list
------------------------------ */
.book-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-block: 0;
  padding: 0;
  container-type: inline-size;
}
.book-list.is-tile {
  gap: 60px 28px;
}
@media screen and (max-width: 768.9px) {
  .book-list.is-tile {
    gap: 40px 12px;
  }
}
.feature .book-list.is-tile {
  gap: 40px 64px;
}
@media screen and (max-width: 768.9px) {
  .feature .book-list.is-tile {
    gap: 40px 12px;
  }
}
.book-list.is-list {
  flex-direction: column;
  gap: 30px 0;
}
.book-list.is-history {
  column-gap: 40px;
}

/* ------------------------------
  book-list-control
------------------------------ */
.book-list-control {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 30px;
}
@media screen and (max-width: 768.9px) {
  .book-list-control {
    flex-direction: column-reverse;
    gap: 24px;
  }
}

/* ------------------------------
  book-list-filter-button
------------------------------ */
.book-list-filter-button {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-height: 40px;
  margin-left: 16px;
  padding: 8px 16px 8px 12px;
  border: 2px solid var(--color-main);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .book-list-filter-button {
    min-height: 0;
    margin: 0;
    gap: 8px;
  }
}
@media (any-hover: hover) {
  .book-list-filter-button:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
    color: var(--color-main);
  }
  .book-list-filter-button:hover::before,
  .book-list-filter-button:hover::after {
    background-color: var(--color-main);
  }
}
.book-list-filter-button::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin: -2px 0;
  background-color: var(--color-main);
  font-size: 0;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url("/assets/images/icon/ico_plus-bold.svg");
}

/* ------------------------------
  book-list-page-wrap
------------------------------ */
.book-list-page-wrap {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 48px;
}
@media screen and (max-width: 768.9px) {
  .book-list-page-wrap {
    flex-direction: column;
    row-gap: 12px;
  }
}

/* ------------------------------
  book-list-sort
------------------------------ */
.book-list-sort {
  display: flex;
  gap: 30px;
}
@media screen and (max-width: 768.9px) {
  .book-list-sort {
    flex: 1;
    gap: 14px;
  }
}
.book-list-sort__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .book-list-sort__item {
    flex: 1;
  }
  .feature .book-list-sort__item {
    max-width: 160px;
  }
}
.book-list-sort__item-heading {
  flex-shrink: 0;
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .book-list-sort__item-heading {
    display: none;
  }
}
.book-list-sort__item-input {
  width: 100%;
}

/* ------------------------------
  book-list-toggle
------------------------------ */
.book-list-toggle {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

/* ------------------------------
  book-list-bottom
------------------------------ */
.book-list-bottom {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 40px 56px;
}
.book-list-bottom--full {
  justify-content: center;
}
@media screen and (max-width: 768.9px) {
  .book-list-bottom {
    flex-direction: column;
    row-gap: 40px;
  }
}

/* ------------------------------
  book-list-head
------------------------------ */
.book-list-head {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  padding-left: clamp(40px, (100% - 1200px) / 2, (100% - 1200px) / 2);
}
@media screen and (max-width: 768.9px) {
  .book-list-head {
    min-width: 0;
    padding-inline: 0;
  }
}
.book-list-head__inner {
  display: flex;
}
@media screen and (max-width: 768.9px) {
  .book-list-head__inner {
    flex-direction: column;
    gap: 12px 0;
  }
}
.book-list-head__heading {
  width: 280px;
}
@media screen and (max-width: 768.9px) {
  .book-list-head__heading {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    padding: 0;
    column-gap: 10px;
  }
  .book-list-head__heading [class^="button-"] {
    flex-shrink: 0;
  }
}
@media screen and (max-width: 768.9px) {
  .book-list-head__deviceid {
    width: 100px;
    margin-left: auto;
  }
}
.book-list-head__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 950px;
  padding-right: 32px;
  gap: 28px 0;
}
@media screen and (max-width: 768.9px) {
  .book-list-head__form {
    padding-right: 0;
    gap: 8px 0;
  }
}
@media screen and (max-width: 768.9px) {
  .book-list-head__form--search {
    gap: 20px 0;
  }
}
.book-list-head__top {
  gap: 8px 0;
}
.book-list-head__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}

/* ------------------------------
  book-list-head-action
------------------------------ */
.book-list-head-action {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 768.9px) {
  .book-list-head-action {
    align-items: center;
    justify-content: flex-end;
    column-gap: 40px;
  }
}

/* ------------------------------
  book-list-head-info
------------------------------ */
.book-list-head-info {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .book-list-head-info {
    gap: 12px 0;
  }
}
.book-list-head-info__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.book-list-head-info__item-heading {
  color: var(--color-main);
  translate: 0 3px;
}

/* ------------------------------
  book-list-search-input
------------------------------ */
.book-list-head-input {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.book-list-head-input::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
  mask-image: url("/assets/images/icon/ico_search.svg");
  background-color: var(--color-main);
}
.book-list-head-input__input {
  width: 100%;
  border-width: 0 0 1px;
  border-color: var(--color-main);
}

/* ------------------------------
  tag
------------------------------ */
/* ------------------------------
  book-list-head-terms
------------------------------ */
.book-list-head-terms {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px 20px;
}
@media screen and (max-width: 768.9px) {
  .book-list-head-terms {
    flex-direction: column;
  }
}
.book-list-head-terms__item {
  display: flex;
  align-items: center;
}
.book-list-head-terms__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-main-pale);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
}

/* ------------------------------
  book-list-number
------------------------------ */
.book-list-number {
  display: flex;
  margin-inline: auto;
  font-size: var(--font-lg);
  justify-self: flex-end;
}
.book-list-bottom--full .book-list-number {
  margin-inline: 0;
}
@media screen and (max-width: 768.9px) {
  .book-list-number {
    gap: 0 8px;
  }
}
.book-list-number__total {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
  book-operation
------------------------------ */
.book-operation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 28px;
}
@media screen and (max-width: 768.9px) {
  .book-operation {
    flex-direction: column;
    row-gap: 20px;
  }
}
.bottombar .book-operation {
  justify-content: center;
}
.book-operation__move {
  display: flex;
  flex: 1;
  gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .book-operation__move {
    flex-direction: column;
    align-items: center;
    row-gap: 16px;
    width: 100%;
  }
}
.bottombar .book-operation__move {
  column-gap: 40px;
}
.book-operation__licenseclear {
  display: flex;
  flex: 1;
  max-width: 168px;
}
@media screen and (max-width: 768.9px) {
  .book-operation__licenseclear {
    width: 100%;
    max-width: 390px;
  }
}
.bottombar .book-operation__licenseclear {
  justify-content: center;
  width: 100%;
  max-width: 332px;
}
@media screen and (max-width: 768.9px) {
  .bottombar .book-operation__licenseclear {
    max-width: 390px;
  }
}

/* ------------------------------
  book-search
------------------------------ */
.book-search {
  display: flex;
  box-sizing: border-box;
  flex: 1 1 auto;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid var(--color-main);
  border-width: 0 0 1px;
  background: var(--color-surface);
}
@media screen and (max-width: 768.9px) {
  .book-search {
    max-width: none;
    margin-block: 0;
  }
}
.book-search__input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  min-height: 38px;
  padding: 8px 0 8px 10px;
  overflow: hidden;
  border: none;
  border-radius: 8px 0 0 8px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-search__input:focus-visible {
  border-radius: 0;
}
.book-search__input::placeholder {
  color: var(--color-form-placeholder);
}
.book-search__button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 36px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: var(--color-surface);
}
.book-search__button::before {
  content: "";
  width: 16px;
  height: 16px;
  mask-image: url("/assets/images/icon/ico_search.svg");
  background-color: var(--color-main);
}
@media (any-hover: hover) {
  .book-search__button:hover {
    background: var(--color-main-pale);
  }
  .book-search__button:hover::before {
    background-color: var(--color-main);
  }
}

/* ------------------------------
  complete
------------------------------ */
.complete {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  align-items: center;
  width: 100%;
}
.complete__head {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}
@media screen and (max-width: 768.9px) {
  .complete__head {
    row-gap: 20px;
  }
}
.complete__supplement {
  margin-block: 0;
  font-size: var(--font-sm);
}
.complete__supplement-bold {
  font-weight: var(--font-weight-bold);
}
.complete__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 32px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .complete__main {
    row-gap: 40px;
  }
}
.complete__bottom {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ------------------------------
  complete-notice
------------------------------ */
.complete-notice {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}
@media screen and (max-width: 768.9px) {
  .complete-notice {
    row-gap: 20px;
  }
}
.complete-notice__heading {
  margin-block: 0;
  font-size: var(--font-lg);
}
@media screen and (max-width: 768.9px) {
  .complete-notice__heading {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  current-book-store
------------------------------ */
.current-book-store {
  display: flex;
  margin-block: 0;
  padding-block: 24px;
  border: solid var(--color-border);
  border-width: 1px 0;
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .current-book-store {
    flex-direction: column;
    padding-block: 12px;
    row-gap: 12px;
  }
}
.current-book-store__heading {
  flex: 0 0 auto;
  width: 273px;
  padding-left: 20px;
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .current-book-store__heading {
    width: 100%;
    padding: 0;
  }
}
.current-book-store__data {
  margin: 0;
  padding-left: 24px;
}
@media screen and (max-width: 768.9px) {
  .current-book-store__data {
    width: 100%;
    padding: 0;
  }
}

/* ------------------------------
  partner-stores-list
------------------------------ */
.partner-stores-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-size: var(--font-sm);
  letter-spacing: -0.01em;
  list-style: none;
}

/* ------------------------------
  partner-stores-list-head
------------------------------ */
.partner-stores-list-head {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border: solid var(--color-border);
  border-width: 1px 0;
}
.partner-stores-list-head__info-heading {
  display: flex;
  flex: 0 1 auto;
}
.partner-stores-list-head__item {
  box-sizing: border-box;
  margin-block: 0;
  padding: 4px 0 4px 12px;
  color: var(--color-text-sub);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  text-align: left;
}
.partner-stores-list-head__item--name {
  flex: 0 0 400px;
  padding-left: 0;
}
.partner-stores-list-head__item--address {
  flex: 0 0 271px;
}
.partner-stores-list-head__item--tel,
.partner-stores-list-head__item--fax {
  flex: 0 0 108px;
}

/* ------------------------------
  partner-stores-list-item
------------------------------ */
.partner-stores-list-item {
  display: flex;
  align-items: center;
  padding-block: 16px;
  border-bottom: solid var(--color-border) 1px;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 8px;
    border: solid var(--color-border);
    border-width: 1px 0;
    row-gap: 8px;
  }
  .partner-stores-list-item:not(:last-child) {
    border-bottom: 0;
  }
}
.partner-stores-list-item__item {
  display: flex;
}
.partner-stores-list-item__name {
  flex: 0 1 400px;
  margin-block: 0;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item__name {
    flex: none;
    width: 100%;
    padding: 0;
  }
}

/* ------------------------------
  partner-stores-list-item-info
------------------------------ */
.partner-stores-list-item-info {
  display: flex;
  flex: 0 1 auto;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item-info {
    flex-direction: column;
    row-gap: 8px;
  }
}
.partner-stores-list-item-info__item {
  display: flex;
  box-sizing: border-box;
  flex: 1 0 auto;
  align-items: center;
  padding-left: 12px;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item-info__item {
    align-items: flex-start;
    width: 100%;
    padding: 0;
    column-gap: 8px;
  }
}
.partner-stores-list-item-info__item--tel,
.partner-stores-list-item-info__item--fax {
  flex: 0 0 108px;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item-info__item--tel,
  .partner-stores-list-item-info__item--fax {
    flex: none;
  }
}
.partner-stores-list-item-info__item--address {
  flex: 0 0 271px;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item-info__item--address {
    flex: none;
  }
}
.partner-stores-list-item-info__item-title {
  display: none;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-item-info__item-title {
    display: flex;
    position: relative;
    min-width: 70px;
    padding: 0;
    white-space: nowrap;
  }
  .partner-stores-list-item-info__item-title::after {
    content: ":";
    position: absolute;
    right: 0;
  }
}
.partner-stores-list-item-info__item-data {
  width: 100%;
  margin: 0;
}

/* ------------------------------
  partner-stores-list-prefecture
------------------------------ */
.partner-stores-list-prefecture {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-prefecture {
    row-gap: 8px;
    font-size: var(--font-base);
  }
}
.partner-stores-list-prefecture__heading {
  margin-block: 0;
  font-size: var(--font-base);
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-prefecture__heading {
    font-size: var(--font-sm);
  }
}

/* ------------------------------
  book-store-rlist-egion
------------------------------ */
.partner-stores-list-region {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .partner-stores-list-region {
    row-gap: 24px;
  }
}

/* ------------------------------
  partner-stores-list-wrap
------------------------------ */
.partner-stores-list-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

/* ------------------------------
  book-store-select
------------------------------ */
.book-store-select {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  align-items: center;
}

/* ------------------------------
  book-store-select-form
------------------------------ */
.book-store-select-form {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
  width: 100%;
}
.book-store-select-form__block {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.book-store-select-form__heading {
  display: flex;
  align-items: flex-start;
  column-gap: 12px;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.book-store-select-form__heading-radio {
  translate: 0 4px;
}
@media screen and (max-width: 768.9px) {
  .book-store-select-form__heading-radio {
    translate: 0 5px;
  }
}
.book-store-select-form__contents {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  row-gap: 40px;
  transition: height var(--trans-default);
}
.book-store-select-form__contents.is-active {
  height: auto;
}

/* ------------------------------
  book-store-select-lead
------------------------------ */
.book-store-select-lead {
  display: inline-flex;
  align-items: center;
  column-gap: 96px;
  translate: 16px 0;
}
@media screen and (max-width: 768.9px) {
  .book-store-select-lead {
    flex-direction: column;
    row-gap: 24px;
    translate: 0;
  }
}
.book-store-select-lead__image {
  flex-shrink: 0 0 auto;
}
.book-store-select-lead__text {
  flex: 1;
  max-width: 604px;
  margin-block: 0;
  font-size: var(--font-xl);
}
@media screen and (max-width: 768.9px) {
  .book-store-select-lead__text {
    width: 100%;
    font-size: var(--font-base);
  }
}

/* ------------------------------
  breadcrumb
------------------------------ */
.breadcrumb {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  color: var(--color-main);
  list-style: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (max-width: 768.9px) {
  .breadcrumb {
    min-width: auto;
  }
}
.breadcrumb__item {
  display: inline;
}
.breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline: 10px;
  background: url("/assets/images//icon/ico_arrow-breadcrumb.svg") no-repeat center center/contain;
}
.breadcrumb__link {
  color: var(--color-main);
  font-size: var(--font-sm);
  text-decoration: none;
}
@media (any-hover: hover) {
  .breadcrumb__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  bottombar
------------------------------ */
.bottombar {
  display: flex;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  justify-content: center;
  width: 100%;
  padding: 20px 80px;
  transition: var(--trans-default);
  background-color: var(--color-surface);
  box-shadow: 0 -4px 40px rgb(var(--color-bottombar-shadow) / 0.12);
  translate: 0 100%;
}
.bottombar.is-show {
  translate: 0;
}
@media screen and (max-width: 768.9px) {
  .bottombar {
    padding: 16px 20px;
  }
}

/* ------------------------------
  bottombar-bookaction
------------------------------ */
.bottombar-bookaction {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 20px;
}
.bottombar-bookaction__favorite {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: none;
  font-size: var(--font-xs);
  gap: 4px 0;
}
@media (any-hover: hover) {
  .bottombar-bookaction__favorite:hover {
    background-color: var(--color-attention-pale);
  }
}

/* ------------------------------
  bottombar-operation
------------------------------ */
.bottombar-operation {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  max-width: 980px;
  column-gap: 120px;
}
@media screen and (max-width: 768.9px) {
  .bottombar-operation {
    flex-direction: column;
    row-gap: 12px;
  }
}
.bottombar-operation__select {
  display: flex;
  align-items: center;
  column-gap: 50px;
}
@media screen and (max-width: 768.9px) {
  .bottombar-operation__select {
    column-gap: 24px;
  }
}
.bottombar-operation__count {
  flex-shrink: 0;
  color: var(--color-main);
}

/* ------------------------------
  button
------------------------------ */
[class*="button-"][aria-disabled="true"] {
  border-color: var(--color-disabled);
  background-color: var(--color-disabled);
  color: var(--color-on-disabled);
  pointer-events: none;
}

[class*="button-"].is-short {
  width: fit-content;
  min-width: 120px;
  max-width: none;
}
@media screen and (max-width: 768.9px) {
  [class*="button-"].is-short {
    width: 100%;
    max-width: 390px;
  }
}
[class*="button-"].is-fit {
  width: fit-content;
}
[class*="button-"].is-fill {
  max-width: 100%;
}
[class*="button-"].is-small {
  width: fit-content;
  max-width: none;
  min-height: 0;
  padding: 4px 12px;
}
[class*="button-"].is-large {
  max-width: 280px;
  min-height: 50px;
  border-radius: 26px;
}
@media screen and (max-width: 768.9px) {
  [class*="button-"].is-large {
    max-width: 390px;
  }
}
[class*="button-"].is-icon-left {
  position: relative;
  justify-content: space-between;
  padding-right: 0;
}
[class*="button-"].is-icon-left.is-short,
[class*="button-"].is-icon-left.is-small {
  padding-right: 12px;
}
[class*="button-"].is-icon-left.is-short::after,
[class*="button-"].is-icon-left.is-small::after {
  display: none;
}
[class*="button-"].is-icon-left::after {
  content: "";
  display: block;
  flex: 0 9999 30px;
  min-width: 12px;
  margin-left: -4px;
}
[class*="button-"].is-icon-right {
  position: relative;
  justify-content: space-between;
  padding-left: 0;
}
[class*="button-"].is-icon-right.is-short,
[class*="button-"].is-icon-right.is-small {
  padding-left: 12px;
}
[class*="button-"].is-icon-right.is-short::after,
[class*="button-"].is-icon-right.is-small::after {
  display: none;
}
[class*="button-"].is-icon-right::before {
  content: "";
  flex: 0 9999 30px;
  min-width: 12px;
  margin-right: -4px;
}
@media screen and (max-width: 768.9px) {
  .form.is-select-book-store [class*="button-"] {
    max-width: 209px;
  }
}

/* ------------------------------
  button-cta
------------------------------ */
.button-cta {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 210px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 0 8px;
}
@media screen and (max-width: 768.9px) {
  .button-cta {
    max-width: 390px;
    padding: 8px;
  }
}
.button-cta__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.button-cta {
  max-width: 100%;
  min-height: 56px;
  border-radius: 28px;
}
@media screen and (max-width: 768.9px) {
  .header__button-login .button-cta {
    font-size: var(--font-xs);
  }
}
@media (any-hover: hover) {
  .button-cta:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
    color: var(--color-on-main-pale);
  }
}

/* ------------------------------
  button-favorite
------------------------------ */
.button-favorite {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  color: var(--color-attention);
  font-size: 0;
  text-align: center;
  text-decoration: none;
}
@media (any-hover: hover) {
  .button-favorite:hover {
    background-color: var(--color-attention-pale);
    color: var(--color-attention);
  }
}

/* ------------------------------
  button-folder
------------------------------ */
.button-folder {
  display: block;
  grid-area: folder;
  flex-shrink: 0;
  width: 30px;
  height: auto;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-main);
  font-size: 0;
  aspect-ratio: 1/1;
}
.button-folder::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  mask: url("/assets/images/icon/ico_folder.svg") no-repeat center/contain;
  background-color: var(--color-surface);
}

/* ------------------------------
  button-paramount
------------------------------ */
.button-paramount {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 210px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--color-paramount);
  color: var(--color-on-paramount);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 0 8px;
}
@media screen and (max-width: 768.9px) {
  .button-paramount {
    max-width: 390px;
    padding: 8px;
  }
}
.button-paramount__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
@media (any-hover: hover) {
  .button-paramount:hover {
    border-color: var(--color-paramount);
    background-color: var(--color-surface);
    color: var(--color-paramount);
  }
}
.book-detail-buttons .button-paramount {
  flex: 1;
  max-width: 260px;
}
@media screen and (max-width: 768.9px) {
  .book-detail-buttons .button-paramount {
    max-width: 390px;
  }
}
.bottombar .button-paramount {
  max-width: 320px;
}
@media screen and (max-width: 768.9px) {
  .bottombar .button-paramount {
    flex: 1;
    max-width: 390px;
  }
}

/* ------------------------------
  button-primary
------------------------------ */
.button-primary {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 210px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 0 8px;
}
@media screen and (max-width: 768.9px) {
  .button-primary {
    max-width: 390px;
    padding: 8px;
  }
}
.button-primary__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
@media screen and (max-width: 768.9px) {
  .header__button-login .button-primary {
    font-size: var(--font-xs);
  }
}
@media (any-hover: hover) {
  .button-primary:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
    color: var(--color-on-main-pale);
  }
}
.book-list-head__heading .button-primary {
  margin-left: auto;
}
.device-id-list .button-primary {
  width: auto;
}
@media screen and (max-width: 768.9px) {
  .device-id-list .button-primary {
    width: auto;
  }
}

/* ------------------------------
  button-secondary
------------------------------ */
.button-secondary {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 210px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid var(--color-main);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 0 8px;
}
@media screen and (max-width: 768.9px) {
  .button-secondary {
    max-width: 390px;
    padding: 8px;
  }
}
.button-secondary__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
@media (any-hover: hover) {
  .button-secondary:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
    color: var(--color-main);
  }
}
.book-detail-buttons .button-secondary {
  flex: 1;
  width: 260px;
}
@media screen and (max-width: 768.9px) {
  .book-detail-buttons .button-secondary {
    width: 100%;
    max-width: 390px;
  }
}
@media screen and (max-width: 768.9px) {
  .book-list-head-action .button-secondary {
    width: auto;
    padding-inline: 16px;
  }
}

/* ------------------------------
  button-sub
------------------------------ */
.button-sub {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 210px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  text-align: center;
  text-decoration: none;
  gap: 0 8px;
}
@media screen and (max-width: 768.9px) {
  .button-sub {
    max-width: 390px;
    padding: 8px;
  }
}
.button-sub__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.button-sub {
  width: auto;
  background-color: var(--pallet-gray-50);
  color: var(--color-main);
}
@media screen and (max-width: 768.9px) {
  .button-sub {
    width: 100%;
  }
}
@media (any-hover: hover) {
  .button-sub:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
    color: var(--color-on-main-pale);
  }
}

/* ------------------------------
  button-list
------------------------------ */
.button-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 16px;
}

/* ------------------------------
  cart-total
------------------------------ */
.cart-total {
  display: inline-flex;
  box-sizing: border-box;
  flex-direction: column;
  align-self: flex-end;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0px 0px 15px rgb(var(--color-surface-shadow) / 0.12);
}
@media screen and (max-width: 768.9px) {
  .cart-total {
    width: 100%;
    max-width: 390px;
  }
}
.cart-total__total {
  display: flex;
  flex-direction: column;
  font-size: var(--font-sm);
  gap: 12px;
}
.cart-total__num {
  margin-block: 0;
  font-size: var(--font-base);
}
.cart-total__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  gap: 8px;
}
.cart-total__price-amount {
  font-size: var(--font-3xl-sm);
  translate: 0 -2px;
}
.cart-total__note {
  margin-block: 14px 0;
  color: var(--color-attention);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
}
.cart-total__button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* ------------------------------
 cart-wrapper
------------------------------ */
.cart-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .cart-wrapper {
    row-gap: 60px;
  }
}

/* ------------------------------
 category-list
------------------------------ */
.category-list {
  position: relative;
  z-index: 4;
  width: 200px;
  margin: 0;
  padding: 0;
  transition: 0.2s ease;
  background: var(--color-surface);
  list-style: none;
}
.category-list::after {
  content: "";
  position: absolute;
  z-index: 11;
  top: 0;
  bottom: 0;
  left: 200px;
  width: 200px;
  opacity: 0;
  box-shadow: 0px 4px 20px rgb(var(--color-surface-shadow) / 0.12);
  pointer-events: none;
}
@media (any-hover: hover) {
  .category-list:has(.is-active) {
    width: 400px;
  }
  .category-list:has(.is-active)::after {
    animation: fade-in 0.3s ease forwards;
    animation-delay: 0.2s;
  }
}
.category-list__link {
  display: flex;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  padding: 8px 4px 8px 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-sm);
  letter-spacing: 0;
  line-height: var(--line-sm);
  text-decoration: none;
  gap: 4px;
}
.category-list__link::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--color-main);
  mask: url("/assets/images/icon/ico_arrow_right.svg") no-repeat 0 0/100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
@media (any-hover: hover) {
  .category-list__link:hover {
    background: var(--color-main-pale);
    color: var(--color-main);
  }
}

/* ------------------------------
 category-list-sub
------------------------------ */
.category-list-sub {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 200px;
  width: 200px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  opacity: 0;
  list-style: none;
}
.category-list-sub.is-active {
  display: block;
  transform: translateX(0);
  animation: slide-in 0.3s ease forwards;
  opacity: 1;
}
.category-list-sub__link {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--color-text);
  font-size: var(--font-xs);
  line-height: var(--line-sm);
  text-decoration: none;
  gap: 8px;
}
@media (any-hover: hover) {
  .category-list-sub__link:hover {
    background: var(--color-main-pale);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
  }
}

/* ------------------------------
 category-list-select
------------------------------ */
.category-list-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------
  contents-index
------------------------------ */
.contents-index {
  display: flex;
  column-gap: 16px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .contents-index {
    flex-direction: column;
    row-gap: 20px;
  }
}
.contents-index__column {
  flex: 1;
}

/* ------------------------------
  contents-index-list
------------------------------ */
.contents-index-list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}
@media screen and (max-width: 768.9px) {
  .contents-index-list {
    row-gap: 20px;
  }
}
.contents-index-list__item {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;
}
@media screen and (max-width: 768.9px) {
  .contents-index-list__item {
    row-gap: 20px;
  }
}
.contents-index-list__link {
  color: var(--color-main);
  text-decoration: none;
}
@media (any-hover: hover) {
  .contents-index-list__link:hover {
    color: var(--color-text-link-hover);
  }
}

/* ------------------------------
  contents-index-sublist
------------------------------ */
.contents-index-sublist {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin-block: 0;
  padding-left: 30px;
  list-style: none;
}
.contents-index-sublist__item {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;
}
.contents-index-sublist__link {
  color: var(--color-main);
  text-decoration: none;
}
@media (any-hover: hover) {
  .contents-index-sublist__link:hover {
    color: var(--color-text-link-hover);
  }
}

/* ------------------------------
  choices
------------------------------ */
.choices {
  margin-bottom: 0;
}
.choices[data-type*="select-one"]::after {
  right: 14px;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  transition: var(--trans-default);
  border: 0;
  background-color: var(--color-form-icon);
  font-size: 0;
  mask-image: url("/assets/images/icon/ico_arrow_down.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.is-small .choices[data-type*="select-one"]::after {
  right: 8px;
}
@media screen and (max-width: 768.9px) {
  .choices[data-type*="select-one"]::after {
    right: 10px;
    width: 11px;
    height: 11px;
    margin-top: -4px;
  }
}
.choices[data-type*="select-one"].is-open::after {
  transform: scale(1, -1);
}
.choices__inner {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  min-height: 40px;
  padding: 3px 4px 3px 10px;
  border-radius: 8px;
  border-color: var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--font-base);
}
.is-focused .choices__inner {
  border-radius: 8px;
  border-color: var(--color-border);
}
.is-open .choices__inner {
  border-radius: 8px 8px 0 0;
  border-color: var(--color-border);
}
.is-flipped.is-open .choices__inner {
  border-radius: 0 0 8px 8px;
}
.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 3px;
}
.choices__input:focus-visible {
  border-radius: 0;
}
.choices__list {
  box-sizing: border-box;
}
.choices__list--single {
  padding: 5px 24px 5px 4px;
}
@media screen and (max-width: 768.9px) {
  .choices__list--single {
    padding-right: 18px;
  }
}
.choices__list--single:not(:has(.choices__placeholder)):has(.choices__button) {
  padding-right: 46px;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  z-index: 3;
  border-radius: 0 0 8px 8px;
  border-color: var(--color-border);
}
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
  border-color: var(--color-border);
}
.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
  border-radius: 8px 8px 0 0;
}
.choices__item {
  font-size: var(--font-sm);
  line-height: var(--line-sm);
}
.choices__list--multiple .choices__item {
  border-color: transparent;
  background-color: var(--color-main);
}
.choices__item:not([data-placeholder], :last-child) {
  border-bottom: solid 1px var(--color-border);
}
.choices[data-type*="select-one"] .choices__button {
  margin-right: 32px;
  background-size: 14px 14px;
}
.choices__placeholder {
  opacity: 1;
  color: var(--color-form-placeholder);
}

.is-error .choices[data-type*="select-one"]::after {
  background-color: var(--color-attention);
}
.is-error .choices__inner {
  border-color: var(--color-attention);
  outline: 1px solid var(--color-attention);
  outline-offset: -2px;
  background-color: var(--color-attention-pale);
}

.is-correct .choices__inner {
  border-color: var(--color-main);
  outline: 1px solid var(--color-main);
  outline-offset: -2px;
}

.choices.is-disabled .choices__item {
  color: var(--color-form-placeholder);
}

.modal .choices__list--dropdown {
  z-index: 10000;
}

/* ------------------------------
  filter-checklist
------------------------------ */
.filter-checklist {
  padding: 0;
  list-style: none;
}
.filter-checklist__item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  min-height: 35px;
  padding: 8px 4px;
}

/* ------------------------------
  filter-list
------------------------------ */
.filter-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0;
  padding: 0;
  list-style: none;
  gap: 12px 0;
}
.filter-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}
.filter-list__item-heading {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  background-color: var(--color-surface-sub);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.filter-list__item-contents {
  height: 0;
  overflow: hidden;
  transition: var(--trans-slow);
}
[aria-expanded="true"] + .filter-list__item-contents {
  height: auto;
}
.filter-list__category {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-list__price {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------
  check-list
------------------------------ */
.check-list {
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.check-list__item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  min-height: 35px;
  padding: 8px 4px;
}

/* ------------------------------
  device-id-data
------------------------------ */
.device-id-data {
  font-size: var(--font-sm);
}
.device-id-data__item {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-text-sub);
}
.device-id-data__desc {
  margin: 0;
}

/* ------------------------------
  device-id-list
------------------------------ */
.device-id-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  row-gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .device-id-list {
    font-size: var(--font-sm);
  }
}
.device-id-list__id {
  margin: 0;
}
.device-id-list__item {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.device-id-list__item-head {
  display: flex;
  align-items: center;
  column-gap: 12px;
}

/* ------------------------------
  feature
------------------------------ */
.feature {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .feature {
    gap: 32px;
  }
}

/* ------------------------------
  feature-control
------------------------------ */
.feature-control {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  align-items: flex-start;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .feature-control {
    row-gap: 20px;
  }
}
.feature-control__block {
  display: flex;
  justify-content: flex-start;
  column-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .feature-control__block {
    width: 100%;
  }
}

/* ------------------------------
  feature-head
------------------------------ */
/* ------------------------------
  feature-heading
------------------------------ */
.feature-heading__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-main);
  text-align: center;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .feature-heading__block {
    text-align: left;
  }
}
.feature-heading__lead {
  position: relative;
  margin-block: 0;
  padding-bottom: 8px;
  padding-inline: 12px;
  color: var(--color-on-main);
  font-size: var(--font-lg);
}
@media screen and (max-width: 768.9px) {
  .feature-heading__lead {
    padding-inline: 0;
    font-size: var(--font-base);
  }
}
.feature-heading__lead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 2px;
  background-color: var(--color-on-main);
  mask: url("/assets/images/line/line_dot.svg") repeat-x center left/auto 100%;
}
.feature-heading__title {
  margin-block: 0;
  color: var(--color-on-main);
  font-size: var(--font-2xl);
}
@media screen and (max-width: 768.9px) {
  .feature-heading__title {
    font-size: var(--font-xl);
  }
}
.feature-heading__note {
  margin-block: 16px 0;
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .feature-heading__note {
    margin-block: 12px 0;
  }
}

/* ------------------------------
  folder-edit
------------------------------ */
.folder-edit {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

/* ------------------------------
  folder-edit-list
------------------------------ */
.folder-edit-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 16px;
}
.folder-edit-list__item {
  display: flex;
  gap: 12px;
  align-items: center;
}
.folder-edit-list__item [class^="icon-"] {
  width: 32px;
  height: auto;
}

/* ------------------------------
  form
------------------------------ */
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .form.is-select-book-store {
    gap: 32px;
  }
}

/* ------------------------------
  form-buttons
------------------------------ */
.form-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  column-gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .form-buttons {
    row-gap: 20px;
  }
}

/* ------------------------------
  form-description-box
------------------------------ */
.form-description-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-description-box__attention {
  margin-block: 0;
  color: var(--color-attention);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.form-description-box__description {
  margin-block: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
  form-item
------------------------------ */
.form-item {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  column-gap: 24px;
  border: 0;
}
.form-item.is-hidden {
  display: none;
}
.form-item.is-active {
  display: flex;
}
@media screen and (max-width: 768.9px) {
  .form-item {
    flex-direction: column;
    row-gap: 8px;
  }
}
.form-item--compact {
  flex-direction: column;
}
.form-item--wide {
  gap: 24px;
}
@media screen and (max-width: 768.9px) {
  .form-item--wide {
    gap: 8px;
  }
}
.form-item--vertical-center {
  align-items: center;
}
@media screen and (max-width: 768.9px) {
  .form-item--vertical-center {
    align-items: flex-start;
  }
}
.form-item--center {
  justify-content: center;
}
.form-item__label-box {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 272px;
  max-width: 272px;
  column-gap: 8px;
  translate: 0 6px;
}
.form-item--compact .form-item__label-box {
  translate: 0;
}
.form-item__label-box:not(:has([class^="tag-"])) {
  translate: 0;
}
@media screen and (max-width: 768.9px) {
  .form-item__label-box {
    translate: 0;
    justify-content: flex-start;
  }
}
fieldset .form-item__label-box {
  margin-bottom: 8px;
}
.form-item__label-box--longer {
  justify-content: space-between;
  width: 100%;
  max-width: 272px;
  min-height: 40px;
}
@media screen and (max-width: 768.9px) {
  .form-item__label-box--longer {
    justify-content: flex-start;
    height: 24px;
  }
}
.form-item__label {
  margin-block: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .form-list--confirm .form-item__label {
    color: var(--color-text-sub);
  }
}
.form-item__description {
  margin-block: 0;
  font-size: var(--font-xs);
}
.form-item__contents-box {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  width: 100%;
}
.form-item__note {
  margin-block: 0;
  font-size: var(--font-xs);
}
.form-item__terms {
  display: flex;
  flex-direction: column;
}
.form-item__price {
  color: var(--color-attention);
  font-size: var(--font-3xl-sm);
}

/* ------------------------------
  form-item-terms-list
------------------------------ */
.form-item-terms-list {
  margin-block: 0;
  font-size: var(--font-xs);
}
.form-item-terms-list__item {
  display: flex;
}
@media screen and (max-width: 768.9px) {
  .form-item-terms-list__item {
    display: block;
  }
}
.form-item-terms-list__heading {
  margin: 0;
}
@media screen and (max-width: 768.9px) {
  .form-item-terms-list__heading {
    display: inline;
  }
}
.form-item-terms-list__detail {
  margin: 0;
}
@media screen and (max-width: 768.9px) {
  .form-item-terms-list__detail {
    display: inline;
  }
}
.form-item-terms-list__sublist {
  padding: 0;
  list-style: none;
  translate: -32px 0;
}
@media screen and (max-width: 768.9px) {
  .form-item-terms-list__sublist {
    translate: 0;
    padding-left: 12px;
  }
}

/* ------------------------------
  form-items-wrap
------------------------------ */
.form-items-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .form-items-wrap {
    max-width: 100%;
  }
}

/* ------------------------------
  form-list
------------------------------ */
.form-list {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: 100%;
  max-width: 900px;
}
@media screen and (max-width: 768.9px) {
  .form.is-select-book-store .form-list {
    row-gap: 16px;
  }
}
@media screen and (max-width: 768.9px) {
  .form-list {
    row-gap: 24px;
  }
}

/* ------------------------------
  guide
------------------------------ */
.guide {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

/* ------------------------------
  guide-address
------------------------------ */
.guide-address {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}

/* ------------------------------
  guide-block
------------------------------ */
.guide-block {
  display: flex;
  flex-direction: column;
  padding: 20px;
  row-gap: 4px;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgb(var(--color-surface-shadow) / 0.12);
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .guide-block {
    padding: 40px 20px;
    row-gap: 16px;
  }
}
.guide-block__heading {
  display: flex;
  align-items: flex-start;
  margin-block: 0;
  color: var(--color-main);
  font-size: var(--font-lg);
}
@media screen and (max-width: 768.9px) {
  .guide-block__heading {
    column-gap: 12px;
  }
}
.guide-block__heading-number {
  display: flex;
  flex-shrink: 0;
  width: 32px;
  color: var(--color-main);
  font-size: var(--font-3xl);
  line-height: var(--line-none);
  translate: 0 -4px;
}
@media screen and (max-width: 768.9px) {
  .guide-block__heading-number {
    width: auto;
  }
}
.guide-block--subnumber .guide-block__heading-number {
  width: 60px;
}
@media screen and (max-width: 768.9px) {
  .guide-block--subnumber .guide-block__heading-number {
    width: auto;
  }
}
.guide-block__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 32px;
  font-size: var(--font-sm);
  row-gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .guide-block__detail {
    padding-left: 0;
  }
}
.guide-block--subnumber .guide-block__detail {
  padding-left: 60px;
}
@media screen and (max-width: 768.9px) {
  .guide-block--subnumber .guide-block__detail {
    padding-left: 0;
  }
}

/* ------------------------------
  guide-block-column-block
------------------------------ */
.guide-block-column-block {
  display: flex;
  column-gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .guide-block-column-block {
    flex-direction: column;
    row-gap: 16px;
  }
}
.guide-block-column-block__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 8px;
}

/* ------------------------------
  guide-block-explanation-list
------------------------------ */
.guide-block-explanation-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
}
.guide-block-explanation-list__title {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
.guide-block-explanation-list__item {
  display: flex;
  flex-direction: column;
  padding-block: 16px;
  border-bottom: solid 1px var(--color-border);
  row-gap: 8px;
}
.guide-block-explanation-list__item:first-child {
  padding-top: 0;
}
.guide-block-explanation-list__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.guide-block-explanation-list__description {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  margin: 0;
}

/* ------------------------------
  guide-block-image-block
------------------------------ */
.guide-block-image-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  width: 100%;
}
.guide-block-image-block--left {
  align-items: flex-start;
}
.guide-block-image-block__image {
  text-align: center;
}
.guide-block-image-block__image--cards {
  width: 64.2857%;
  max-width: 271px;
}
.guide-block-image-block__image img {
  width: auto;
  height: auto;
}
@media screen and (max-width: 768.9px) {
  .guide-block-image-block__image img {
    width: 100%;
    max-width: 390px;
  }
}

/* ------------------------------
  guide-block-link
------------------------------ */
.guide-block-link {
  color: var(--color-main);
}
@media (any-hover: hover) {
  .guide-block-link:hover {
    color: var(--color-text-link-hover);
  }
}

/* ------------------------------
  guide-block-note-list
------------------------------ */
.guide-block-note-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 2px;
}
.guide-block-note-list__note--annotation {
  color: var(--color-notice);
}

/* ------------------------------
  guide-block-section
------------------------------ */
.guide-block-section {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 100%;
}
.guide-block-section__heading {
  margin-block: 0;
  color: var(--color-main);
  font-size: var(--font-sm);
}
.guide-block-section__contents {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

/* ------------------------------
  guide-block-text-block
------------------------------ */
.guide-block-text-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0;
  row-gap: 8px;
}
.guide-block-text-block__text {
  margin-block: 0;
}

/* ------------------------------
  guide-block-wrapper
------------------------------ */
.guide-block-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

/* ------------------------------
  guide-footer
------------------------------ */
@media screen and (max-width: 768.9px) {
  .guide-footer {
    font-size: var(--font-sm);
  }
}

/* ------------------------------
  guide-footer-section
------------------------------ */
.guide-footer-section__contents {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.guide-footer-section__block {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.guide-footer-section__list {
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.guide-footer-section__list-item {
  position: relative;
  padding-left: calc(1em + 4px);
}
.guide-footer-section__list-item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

/* ------------------------------
  heading
------------------------------ */
[class^="heading-"] {
  margin-block: 0;
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
  heading-02
------------------------------ */
.heading-02 {
  position: relative;
  padding-left: 12px;
  font-size: var(--font-2xl-sm);
}
@media screen and (max-width: 768.9px) {
  .heading-02 {
    font-size: var(--font-lg);
  }
}
.heading-02::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background-color: var(--color-heading02-accent);
}
@media screen and (min-width: 769px) {
  .heading-02 {
    font-size: var(--font-xl);
  }
}

/* ------------------------------
  heading-03
------------------------------ */
.heading-03 {
  position: relative;
  width: 100%;
  font-size: var(--font-lg);
}
@media screen and (max-width: 768.9px) {
  .heading-03 {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  heading-complete
------------------------------ */
.heading-complete {
  font-size: var(--font-2xl-sm);
}
@media screen and (max-width: 768.9px) {
  .heading-complete {
    font-size: var(--font-lg);
  }
}

/* ------------------------------
  heading-message
------------------------------ */
.heading-message {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: var(--font-2xl-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .heading-message {
    font-size: var(--font-lg);
  }
}
.heading-message__lead {
  font-size: var(--font-sm);
}

/* ------------------------------
  heading-modal
------------------------------ */
.heading-modal {
  padding-bottom: 10px;
  border-bottom: var(--color-main) 2px solid;
  color: var(--color-main);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
}
@media screen and (max-width: 768.9px) {
  .heading-modal {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  heading-page
------------------------------ */
.heading-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
  gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .heading-page {
    font-size: var(--font-xl);
  }
}
.heading-page__lead {
  font-size: var(--font-sm);
}
.ly-lower-container--fill .heading-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-container--fill .heading-page {
    min-width: 100%;
    padding-inline: 20px;
  }
}

.book-list-head .heading-page {
  grid-area: heading;
  width: auto;
}

/* ------------------------------
  heading-sidebar
------------------------------ */
.heading-sidebar {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-sm);
}

/* ------------------------------
  history-data
------------------------------ */
.history-data {
  width: 100%;
}
.history-data__list {
  display: flex;
  gap: 32px;
  margin-block: 0;
}
.history-data__item {
  display: flex;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.history-data__title {
  flex-shrink: 0;
}
.history-data__desc {
  margin-left: 0;
}
.history-data__button-box {
  margin-top: 20px;
}
@media screen and (max-width: 768.9px) {
  .history-data__button-box {
    margin-top: 16px;
  }
}
.history-data__note-box {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 20px;
}
@media screen and (max-width: 768.9px) {
  .history-data__note-box {
    flex-direction: column;
    gap: 8px;
  }
}
.history-data__note {
  margin-block: 0;
  color: var(--color-attention);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.history-data__number-list {
  display: flex;
  flex-shrink: 0;
  margin-block: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.history-data__number-title {
  flex-shrink: 0;
}
.history-data__number-desc {
  margin-left: 0;
}

/* ------------------------------
  history-sort
------------------------------ */
.history-sort {
  display: grid;
  grid-template-columns: 230px auto;
  align-items: center;
  gap: 10px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .history-sort {
    grid-template-columns: minmax(0, 180px) auto;
    gap: 8px;
  }
}
.history-sort__text {
  font-size: var(--font-sm);
}

/* ------------------------------
  icon
------------------------------ */
[class^="icon-"] {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  font-size: 0;
  place-items: center;
  aspect-ratio: 1/1;
}
[class^="icon-"]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.button-paramount [class^="icon-"]::before {
  background-color: var(--color-on-paramount);
}
@media (any-hover: hover) {
  .button-paramount:hover [class^="icon-"]::before {
    background-color: var(--color-paramount);
  }
}
.button-primary [class^="icon-"] {
  margin: -2px 0;
}
.button-primary [class^="icon-"]::before {
  background-color: var(--color-on-main);
}
@media (any-hover: hover) {
  .button-primary:hover [class^="icon-"]::before {
    background-color: var(--color-on-main-pale);
  }
}

[class^="icon-"].w-30 {
  width: 30px;
  height: 30px;
}
.iconbutton [class^="icon-"] {
  min-width: 30px;
  height: auto;
}
.text-link [class^="icon-"] {
  width: 14px;
  height: 14px;
}

/* ------------------------------
  icon-alert
------------------------------ */
.icon-alert::before {
  mask-image: url("/assets/images/icon/ico_alert.svg");
}

/* ------------------------------
  icon-arrow-down
------------------------------ */
.icon-arrow-down::before {
  mask-image: url("/assets/images/icon/ico_arrow_down.svg");
}

/* ------------------------------
  icon-arrow-left
------------------------------ */
.icon-arrow-left::before {
  mask-image: url("/assets/images/icon/ico_arrow_left.svg");
}
.pagenation .icon-arrow-left {
  width: 16px;
  height: auto;
}

/* ------------------------------
  icon-arrow-right
------------------------------ */
.icon-arrow-right::before {
  mask-image: url("/assets/images/icon/ico_arrow_right.svg");
}

/* ------------------------------
  icon-arrow-toggle
------------------------------ */
.icon-arrow-toggle::before {
  mask-image: url("/assets/images/icon/ico_arrow_down.svg");
}
[aria-expanded="true"] .icon-arrow-toggle::before {
  transform: rotate(180deg);
}
.filter-list__item-heading .icon-arrow-toggle::before {
  width: 12px;
  height: 12px;
}
.filter-list__item-heading .icon-arrow-toggle::before::before {
  background-color: var(--color-text-sub);
}
@media screen and (max-width: 768.9px) {
  .icon-arrow-toggle::before {
    width: 12px;
    height: 12px;
  }
}
.filter-list .icon-arrow-toggle::before {
  width: 16px;
  height: 16px;
}

/* ------------------------------
  icon-blank
------------------------------ */
.icon-blank::before {
  mask-image: url("/assets/images/icon/ico_blank.svg");
}

/* ------------------------------
  icon-bookshelf
------------------------------ */
.icon-bookshelf::before {
  mask-image: url("/assets/images/icon/ico_bookshelf.svg");
}

/* ------------------------------
  icon-cart
------------------------------ */
.icon-cart::before {
  mask-image: url("/assets/images/icon/ico_cart.svg");
}

/* ------------------------------
  icon-edit
------------------------------ */
.icon-edit::before {
  mask-image: url("/assets/images/icon/ico_edit.svg");
}

/* ------------------------------
  icon-favorite
------------------------------ */
.icon-favorite::before {
  mask: url("/assets/images/icon/ico_heart.svg") no-repeat center/contain;
  background-color: var(--color-attention);
}
.is-active .icon-favorite::before {
  mask-image: url("/assets/images/icon/ico_heart-fill.svg");
}
.button-favorite .icon-favorite {
  width: 100%;
  height: auto;
}

/* ------------------------------
  icon-heart
------------------------------ */
.icon-heart::before {
  mask: url("/assets/images/icon/ico_heart.svg") no-repeat center/contain;
  background-color: var(--color-main);
}

/* ------------------------------
  icon-menu
------------------------------ */
.icon-menu::before {
  mask-image: url("/assets/images/icon/ico_menu.svg");
}

/* ------------------------------
  icon-list
------------------------------ */
.icon-list::before {
  mask-image: url("/assets/images/icon/ico_list.svg");
}

/* ------------------------------
  icon-plus
------------------------------ */
.icon-plus::before {
  mask-image: url("/assets/images/icon/ico_plus.svg");
}

/* ------------------------------
  icon-plus-bold
------------------------------ */
.icon-plus-bold::before {
  mask-image: url("/assets/images/icon/ico_plus-bold.svg");
}

/* ------------------------------
  icon-search
------------------------------ */
.icon-search::before {
  mask-image: url("/assets/images/icon/ico_search.svg");
}

/* ------------------------------
  icon-seedling
------------------------------ */
.icon-seedling::before {
  mask-image: url("/assets/images/icon/ico_seedling.svg");
}
.modal-confirm .icon-seedling {
  width: 60px;
  height: 60px;
}

/* ------------------------------
  icon-tile
------------------------------ */
.icon-tile::before {
  mask-image: url("/assets/images/icon/ico_tile.svg");
}

/* ------------------------------
  icon-toggle-plus
------------------------------ */
.icon-toggle-plus::before {
  mask-image: url("/assets/images/icon/ico_plus.svg");
}
.readmore:has(.is-expanded) .icon-toggle-plus::before {
  mask-image: url("/assets/images/icon/ico_minus.svg");
}

.readmore__trigger .icon-toggle-plus {
  width: 20px;
  height: 20px;
}

/* ------------------------------
  icon-share
------------------------------ */
.icon-share {
  aspect-ratio: 1/1;
}
.icon-share::before {
  mask-image: url("/assets/images/icon/ico_share.svg");
  background-color: var(--color-main);
}
.iconbutton .icon-share {
  width: 24px;
  height: auto;
}

/* ------------------------------
  iconbutton
------------------------------ */
[class^="iconbutton-"] {
  display: grid;
  box-sizing: border-box;
  flex-direction: column;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 4px;
  border: 0;
  background: none;
  font-size: 0;
  line-height: var(--line-none);
  place-items: center;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 768.9px) {
  [class^="iconbutton-"] {
    width: 30px;
    height: 30px;
    padding: 0;
  }
}
[class^="iconbutton-"]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
@media (any-hover: hover) {
  [class^="iconbutton-"]:hover {
    background-color: var(--color-bg-main);
  }
}

/* ------------------------------
  iconbutton-favorite
------------------------------ */
.iconbutton-favorite::before {
  mask-image: url("/assets/images/icon/ico_heart.svg");
  background-color: var(--color-attention);
}
.iconbutton-favorite.is-active::before {
  mask-image: url("/assets/images/icon/ico_heart-fill.svg");
}
@media (any-hover: hover) {
  .iconbutton-favorite:hover {
    background-color: var(--color-attention-pale);
  }
}

/* ------------------------------
  iconbutton-folder-edit
------------------------------ */
.iconbutton-folder-edit::before {
  width: 32px;
  height: 32px;
}
[data-edit-type="trash"] .iconbutton-folder-edit::before {
  mask-image: url("/assets/images/icon/ico_trash.svg");
}
[data-edit-type="add"] .iconbutton-folder-edit::before {
  width: 28px;
  height: 28px;
  mask-image: url("/assets/images/icon/ico_plus.svg");
}

/* ------------------------------
  iconbutton-list
------------------------------ */
.iconbutton-list::before {
  width: 30px;
  height: 30px;
  background-color: var(--color-disabled);
  mask-image: url("/assets/images/icon/ico_list.svg");
}
@media screen and (max-width: 768.9px) {
  .iconbutton-list::before {
    width: 28px;
    height: 28px;
  }
}
.iconbutton-list.is-current {
  pointer-events: none;
}
.iconbutton-list.is-current::before {
  background-color: var(--color-main);
}

/* ------------------------------
  iconbutton-share
------------------------------ */
.iconbutton-share {
  padding: 6px;
}
.iconbutton-share::before {
  mask-image: url("/assets/images/icon/ico_share.svg");
  background-color: var(--color-main);
}

/* ------------------------------
  iconbutton-plus
------------------------------ */
.iconbutton-plus::before {
  width: 28px;
  height: 28px;
  mask-image: url("/assets/images/icon/ico_plus.svg");
}

/* ------------------------------
  iconbutton-tile
------------------------------ */
.iconbutton-tile::before {
  width: 30px;
  height: 30px;
  background-color: var(--color-disabled);
  mask-image: url("/assets/images/icon/ico_tile.svg");
}
@media screen and (max-width: 768.9px) {
  .iconbutton-tile::before {
    width: 28px;
    height: 28px;
  }
}
.iconbutton-tile.is-current {
  pointer-events: none;
}
.iconbutton-tile.is-current::before {
  background-color: var(--color-main);
}

/* ------------------------------
  important-notice
------------------------------ */
.important-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
}
@media screen and (max-width: 768.9px) {
  .important-notice {
    min-width: auto;
  }
}
.book-banner .important-notice {
  grid-area: important-notice;
  width: 100%;
  margin-top: 12px;
}
@media screen and (max-width: 768.9px) {
  .book-banner .important-notice {
    margin-top: 8px;
  }
}
.important-notice__section {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--color-attention-pale);
  gap: 8px 18px;
}
@media screen and (max-width: 768.9px) {
  .important-notice__section {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 8px;
  }
}
.book-banner .important-notice__section {
  width: 100%;
  max-width: 100%;
}
.important-notice__section--vertical {
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.important-notice__title {
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-attention);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
}
.important-notice__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--font-sm);
  line-height: var(--line-sm);
}

/* ------------------------------
  important-notice-list
------------------------------ */
.important-notice-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  font-size: var(--font-sm);
  list-style: none;
  gap: 1px;
}

/* ------------------------------
  input-checkbox
------------------------------ */
.input-checkbox {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
}
.input-checkbox--all {
  gap: 12px;
}
.input-checkbox {
  font-size: var(--font-sm);
  gap: 8px;
}
@media (any-hover: hover) {
  .input-checkbox:hover {
    cursor: pointer;
  }
}
.input-checkbox__input {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.input-checkbox--all .input-checkbox__input {
  width: 24px;
  height: 24px;
}
.book-card .input-checkbox__input {
  width: 24px;
  height: 24px;
}
.book-banner .input-checkbox__input {
  width: 24px;
  height: 24px;
}
.input-checkbox__input::before,
.input-checkbox__input::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.input-checkbox__input::before {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: solid 1px var(--color-main);
  border-radius: 3px;
  background-color: var(--color-surface);
}
.input-checkbox__input:checked::before {
  background-color: var(--color-main);
}
.input-checkbox__input:checked::after {
  width: 12px;
  height: 12px;
  mask: url("/assets/images/icon/ico_check.svg") no-repeat center/contain;
  background-color: var(--color-surface);
}
.input-checkbox__text {
  display: block;
  position: relative;
  padding-left: 23px;
  cursor: pointer;
}
.input-checkbox__input:disabled + .input-checkbox__text {
  pointer-events: none;
}
.input-checkbox__text::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  transition: 500s;
  border-radius: 50%;
}
.input-checkbox__input:disabled + .input-checkbox__text::before {
  box-shadow: none;
}
.input-checkbox__text::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 10px;
  height: 10px;
  transition: scale 500s;
  border-radius: 50%;
  scale: 0;
}
.input-checkbox__input:checked + .input-checkbox__text::after {
  scale: 1;
}

/* ------------------------------
  input-code
------------------------------ */
.input-code {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 768.9px) {
  .input-code {
    gap: 8px;
  }
}
.input-code__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
@media screen and (max-width: 768.9px) {
  .input-code__item {
    gap: 8px;
  }
}
.input-code__item::after {
  content: "";
  display: block;
  width: 12px;
  height: 1.5px;
  border-radius: 999px;
  background-color: var(--color-main);
}
.input-code__item:last-child::after {
  display: none;
}

/* ------------------------------
  input-date
------------------------------ */
.input-date {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .input-date {
    gap: 8px;
  }
}
.input-date__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-date__label {
  width: fit-content;
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .input-date__label {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  input-name
------------------------------ */
.input-name {
  display: flex;
  align-items: center;
  width: 100%;
  column-gap: 8px;
}
.input-name__note {
  font-size: var(--font-xs);
}

/* ------------------------------
  input-password
------------------------------ */
.input-password {
  position: relative;
  width: 100%;
  max-width: 230px;
}
.input-password.is-xsmall {
  max-width: 72px;
}
.input-password.is-small {
  max-width: 192px;
}
.input-password.is-large {
  max-width: 100%;
}
.input-password__input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 40px;
  padding: 8px 12px;
  transition: border-color var(--trans-default);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-sm);
}
.input-password__input::placeholder {
  color: var(--color-form-placeholder);
}
.input-password__input.is-error {
  outline: 1px solid var(--color-attention);
  outline-offset: 0;
}
/* ------------------------------
  input-period
------------------------------ */
.input-period {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .input-period {
    gap: 2px;
  }
}
@media screen and (max-width: 768.9px) {
  .input-period--date {
    flex-direction: column;
    row-gap: 8px;
  }
}
.filter-list__price .input-period {
  gap: 4px;
  color: var(--color-text-sub);
}
.input-period__block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
@media screen and (max-width: 768.9px) {
  .input-period--date .input-period__block {
    box-sizing: border-box;
    width: 100%;
  }
}
.input-period__inner {
  width: 100%;
}
.input-period__item {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .input-period__item {
    flex: 1;
    gap: 2px;
  }
}
.filter-list__price .input-period__item {
  gap: 4px;
}
@media screen and (max-width: 768.9px) {
  .input-period--date .input-period__block:nth-child(2) .input-period__item:last-child {
    padding-right: 13px;
  }
}
.input-period__item--large .input-period__label {
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .input-period__item--large .input-period__label {
    font-size: var(--font-sm);
  }
}
.input-period__label {
  width: fit-content;
  font-size: var(--font-sm);
}
.filter-list__price .input-period__label {
  font-size: var(--font-xs);
}
@media screen and (max-width: 768.9px) {
  .input-period__label {
    font-size: var(--font-xs);
  }
}

/* ------------------------------
  input-text
------------------------------ */
.input-point {
  position: relative;
  width: 100%;
  max-width: 230px;
}
.input-point.is-small {
  max-width: 70px;
}
.input-point.is-large {
  max-width: 100%;
}
.input-point__input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 40px;
  padding: 8px 12px;
  transition: border-color var(--trans-default);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-sm);
}
.input-point__input::placeholder {
  color: var(--color-form-placeholder);
}
.input-point__input.is-error {
  border-color: var(--color-attention);
  outline: 1px solid var(--color-attention);
  outline-offset: 0;
  background-color: var(--color-attention-pale);
}
.input-point__input.is-correct {
  border-color: var(--color-main);
  outline: 1px solid var(--color-main);
  outline-offset: 0;
}
.input-point__input:disabled {
  background-color: var(--color-bg-section);
  cursor: not-allowed;
}
/* ------------------------------
  input-radio
------------------------------ */
.input-radio {
  display: flex;
  position: relative;
  align-items: flex-start;
  font-size: var(--font-sm);
  gap: 8px;
}
@media (any-hover: hover) {
  .input-radio:hover {
    cursor: pointer;
  }
}
.input-radio__input {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.input-radio.is-large .input-radio__input {
  width: 24px;
  height: 24px;
}
.radio-block .input-radio__input {
  translate: 0;
}
.input-radio__input::before,
.input-radio__input::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  translate: -50% -50%;
}
.input-radio__input::before {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: solid 1px var(--color-main);
  background-color: var(--color-surface);
}
.input-radio__input:disabled::before {
  border-color: var(--color-radio-disabled);
  background-color: var(--color-surface-disabled);
}
.input-radio__input:checked::after {
  width: 58.33%;
  height: 58.33%;
  background-color: var(--color-main);
}
.input-radio__text {
  display: block;
  position: relative;
  padding-left: 23px;
  cursor: pointer;
}
.input-radio__input:disabled + .input-radio__text {
  pointer-events: none;
}
.input-radio__text::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  transition: 500s;
  border-radius: 50%;
}
.input-radio__input:disabled + .input-radio__text::before {
  box-shadow: none;
}
.input-radio__text::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 10px;
  height: 10px;
  transition: scale 500s;
  border-radius: 50%;
  scale: 0;
}
.input-radio__input:checked + .input-radio__text::after {
  scale: 1;
}

/* ------------------------------
  input-range
------------------------------ */
.input-range {
  display: grid;
  place-items: center;
  position: relative;
  height: 20px;
  padding-block: 8px;
}
.input-range__input {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.input-range__input::-webkit-slider-runnable-track {
  height: 1px;
  background-color: var(--color-border);
  -webkit-appearance: none;
}
.input-range__input:last-child::-webkit-slider-runnable-track {
  height: 0;
}
.input-range__input::-webkit-slider-thumb {
  display: block;
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: solid 1px var(--color-main);
  border-radius: 50%;
  background-color: var(--color-surface);
  box-shadow: none;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  translate: 0 -50%;
}
.input-range--note {
  flex-wrap: wrap;
  width: 100%;
}

/* ------------------------------
  input-select
  // choicesの枠
------------------------------ */
.input-select {
  width: 100%;
  min-width: 80px;
  max-width: 230px;
}
@media screen and (max-width: 768.9px) {
  .input-select {
    max-width: 100%;
  }
}
.input-select.is-small {
  max-width: 90px;
}
.input-select.is-large {
  max-width: 100%;
}
.input-select.is-disabled .js-choices {
  background-color: var(--color-surface-disabled);
}
.book-list-control .input-select {
  width: 230px;
}
@media screen and (max-width: 768.9px) {
  .book-list-control .input-select {
    width: 100%;
  }
}
.feature-control .input-select {
  width: 230px;
}
@media screen and (max-width: 768.9px) {
  .feature-control .input-select {
    width: 100%;
  }
}
.book-operation .input-select {
  max-width: 526px;
}
.bottombar .input-select {
  max-width: 534px;
}
@media screen and (max-width: 768.9px) {
  .bottombar .input-select {
    max-width: 390px;
  }
}

/* ------------------------------
  input-text
------------------------------ */
.input-text {
  position: relative;
  width: 100%;
  max-width: 230px;
}
.input-text.is-small {
  max-width: 90px;
}
.input-text.is-large {
  max-width: 100%;
}
.input-text__input {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
  padding: 8px 12px;
  transition: border-color var(--trans-default);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-sm);
}
.filter-list__price .input-text .input-text__input {
  padding-inline: 8px;
  font-size: var(--font-sm);
}
.input-text__input::placeholder {
  color: var(--color-form-placeholder);
}
.input-text__input.is-error {
  border-color: var(--color-attention);
  outline: 1px solid var(--color-attention);
  outline-offset: 0;
  background-color: var(--color-attention-pale);
}
.input-text__input.is-correct {
  border-color: var(--color-main);
  outline: 1px solid var(--color-main);
  outline-offset: 0;
}
/* ------------------------------
  input-textarea
------------------------------ */
.input-textarea {
  position: relative;
  width: 100%;
}
.input-textarea__input {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  height: 300px;
  min-height: 40px;
  padding: 8px 12px;
  transition: border-color var(--trans-default);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-sm);
  resize: vertical;
}
.input-textarea__input::placeholder {
  color: var(--color-form-placeholder);
}
.input-textarea__input.is-error {
  border-color: var(--color-attention);
  outline: 1px solid var(--color-attention);
  outline-offset: 0;
  background-color: var(--color-attention-pale);
}
.input-textarea__input.is-correct {
  border-color: var(--color-main);
  outline: 1px solid var(--color-main);
  outline-offset: 0;
}
/* ------------------------------
  input-text-book-list
------------------------------ */
.input-text-book-list {
  display: flex;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border-bottom: solid 1px var(--color-main);
}
.input-text-book-list__input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 35px;
  padding: 8px 12px;
  transition: border-color var(--trans-default);
  border: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-sm);
}
.input-text-book-list__input:focus-visible {
  border-radius: 0;
}
.input-text-book-list__input::placeholder {
  color: var(--color-form-placeholder);
}
.input-text-book-list__input.is-error {
  border-color: var(--color-attention);
  outline: 1px solid var(--color-attention);
  outline-offset: 0;
  background-color: var(--color-attention-pale);
}
/* ------------------------------
  information-detail
------------------------------ */
.information-detail {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .information-detail {
    row-gap: 24px;
  }
}

/* ------------------------------
  information-detail-data
------------------------------ */
.information-detail-data {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 8px;
}

/* ------------------------------
  information-detail-head
------------------------------ */
.information-detail-head {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

/* ------------------------------
  information-list
------------------------------ */
.information-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  border: solid var(--color-border);
  border-width: 1px 0;
  font-size: var(--font-sm);
  list-style: none;
}

/* ------------------------------
  information-list-item
------------------------------ */
.information-list-item {
  display: flex;
  align-items: center;
  padding-block: 16px;
  column-gap: 12px;
}
.information-list-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
@media screen and (max-width: 768.9px) {
  .information-list-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    row-gap: 6px;
  }
}
.information-list-item__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  column-gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .information-list-item__head {
    width: 100%;
  }
}
.information-list-item__date {
  flex-shrink: 0;
  width: 80px;
}
@media screen and (max-width: 768.9px) {
  .information-list-item__date {
    width: auto;
  }
}
@media screen and (max-width: 768.9px) {
  .information-list-item__tag {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 768.9px) {
  .information-list-item__title {
    width: 100%;
  }
}

/* ------------------------------
  information-list-section
------------------------------ */
.information-list-section {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}
@media screen and (max-width: 768.9px) {
  .information-list-section {
    row-gap: 20px;
  }
}

/* ------------------------------
  information-list-wrapper
------------------------------ */
.information-list-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .information-list-wrapper {
    row-gap: 24px;
  }
}

/* ------------------------------
  information-sort
------------------------------ */
.information-sort {
  display: grid;
  grid-template-columns: auto 230px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  column-gap: 10px;
}
@media screen and (max-width: 768.9px) {
  .information-sort {
    grid-template-columns: auto 180px;
    gap: 8px;
  }
}
.information-sort__text {
  font-size: var(--font-sm);
}

/* ------------------------------
  list-anchorlink
------------------------------ */
.list-anchorlink {
  display: flex;
  flex-wrap: wrap;
  margin-block: 0;
  padding: 0;
  font-size: var(--font-sm);
  list-style: none;
  gap: 12px 16px;
}
.list-anchorlink__link {
  color: var(--color-main);
  text-decoration: none;
}

/* ------------------------------
  list-desc
------------------------------ */
.list-disc {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  font-size: var(--font-sm);
  list-style: none;
  row-gap: 12px;
}
.list-disc__item {
  position: relative;
  padding-left: 16px;
}
.list-disc__item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-main);
  translate: 0 8px;
}

/* ------------------------------
  list-note
------------------------------ */
.list-note {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 8px;
}
.list-note__item {
  position: relative;
  padding-left: 16px;
}
.list-note__item::before {
  content: "※";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* ------------------------------
  list-check
------------------------------ */
.list-check {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 12px;
}

/* ------------------------------
  lower-page-lead
------------------------------ */
.lower-page-lead {
  width: 100%;
  margin-block: 0;
  font-size: var(--font-sm);
  text-align: left;
}
.ly-lower-container--fill .lower-page-lead {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .ly-lower-container--fill .lower-page-lead {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.ly-lower-container--fill .lower-page-lead {
  max-width: 900px;
}

/* ------------------------------
  merit-card-list
------------------------------ */
.merit-card-list {
  display: flex;
  max-width: 900px;
  margin-block: 0;
  padding: 0;
  column-gap: 32px;
  list-style: none;
}
@media screen and (max-width: 768.9px) {
  .merit-card-list {
    flex-direction: column;
    row-gap: 20px;
  }
}
.merit-card-list__item {
  display: flex;
  flex: 1;
  padding: 40px 20px;
  column-gap: 16px;
  border-radius: 12px;
  background-color: var(--color-surface);
  box-shadow: 0px 4px 20px rgb(var(--color-surface-shadow) / 0.12);
}
.merit-card-list__item-number {
  color: var(--color-main);
  font-size: var(--font-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  translate: 0 -4px;
}
.merit-card-list__item-contents {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.merit-card-list__item-heading {
  margin-block: 0;
  color: var(--color-main);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
}
.merit-card-list__item-detail {
  margin-block: 0;
  font-size: var(--font-sm);
}

/* ------------------------------
  member-info
------------------------------ */
.member-info {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.member-info__heading {
  margin-block: 0;
}
@media screen and (max-width: 768.9px) {
  .member-info__heading {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  member-info-list
------------------------------ */
.member-info-list {
  margin-block: 0;
  padding: 0;
  list-style-type: none;
  font-size: var(--font-sm);
}
.member-info-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-info-list__item-title {
  font-weight: var(--font-weight-normal);
}
.member-info-list__item-detail {
  margin: 0;
}

/* ------------------------------
  licenseclear
------------------------------ */
.licenseclear {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  row-gap: 4px;
}
.licenseclear__link {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 35px;
  padding: 8px 10px;
  color: var(--color-text);
  font-size: var(--font-sm);
  text-decoration: none;
}
.licenseclear__link [class^="icon-"] {
  flex-shrink: 0;
  width: 14px;
  height: auto;
  translate: 0 4px;
}
@media (any-hover: hover) {
  .licenseclear__link:hover {
    background-color: var(--color-main-pale);
  }
}

/* ------------------------------
  modal
------------------------------ */
.modal {
  display: none;
  position: fixed;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 40px 24px 30px;
  border: 0;
  opacity: 0;
  background-color: transparent;
  inset: 0;
  gap: 12px;
}
@media screen and (max-width: 768.9px) {
  .modal {
    height: 100vh;
    padding: 48px 20px 30px;
    overflow-y: scroll;
    gap: 20px;
  }
}
.modal::backdrop {
  display: none;
}
.modal::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  opacity: 0;
  background-color: rgb(var(--color-bg-modal-overlay) / 0.5);
}
.modal:not([data-overlay-close="false"]) {
  cursor: pointer;
}
.modal.is-active {
  display: flex;
  overflow-y: auto;
  animation: fade-in 0.3s ease forwards;
  opacity: 1;
}
.modal.is-active::before {
  opacity: 1;
}
.modal__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: auto 0;
  gap: 12px;
}
.modal__close {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-modal-close);
  font-size: 0;
  cursor: default;
  mask-image: url("/assets/images/icon/ico_close.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
@media screen and (max-width: 768.9px) {
  .modal__close {
    align-self: flex-end;
    width: 32px;
    height: 32px;
    transform: translateX(0);
  }
}
@media screen and (max-width: 768.9px) {
  .modal__close {
    width: 32px;
    height: 32px;
    transform: translateX(0);
  }
}
@media (any-hover: hover) {
  .modal__close:hover {
    background-color: var(--color-modal-close-hover);
  }
}
.modal__inner {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: calc(100vw - 48px);
  max-width: 900px;
  padding: 30px 40px;
  border-radius: 24px;
  background-color: var(--color-bg-modal);
  box-shadow: 0 4px 16px rgb(var(--color-modal-shadow) / 0.12);
  cursor: default;
  gap: 30px;
}
@media screen and (max-width: 768.9px) {
  .modal__inner {
    width: calc(100vw - 40px);
    padding: 30px 22px;
    border-radius: 16px;
    gap: 32px;
  }
}
.modal[data-size="small"] .modal__inner {
  max-width: 520px;
}
.modal[data-size="large"] .modal__inner {
  max-width: 1060px;
}
.modal__member-header {
  display: flex;
  justify-content: space-between;
  gap: 30px 40px;
}
@media screen and (max-width: 768.9px) {
  .modal__member-header {
    flex-direction: column;
    gap: 40px;
  }
}
.modal__nav-wrap {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .modal__nav-wrap {
    flex-direction: column;
  }
}

/* ------------------------------
  modal-button-box
------------------------------ */
.modal-button-box {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.modal-button-box.is-column {
  flex-direction: column;
  gap: 20px;
}

/* ------------------------------
  modal-column
------------------------------ */
.modal-column {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .modal-column {
    flex-direction: column;
    gap: 16px;
  }
}
.modal-column__box {
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  gap: 30px;
}
.modal-column__box--fixed {
  min-width: 470px;
}
@media screen and (max-width: 768.9px) {
  .modal-column__box--fixed {
    min-width: auto;
  }
}

/* ------------------------------
  modal-confirm
------------------------------ */
.modal-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.modal-confirm__top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-confirm__icon {
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}
.modal-confirm__heading {
  margin-block: 0;
  color: var(--color-main);
  text-align: center;
}
@media screen and (max-width: 768.9px) {
  .modal-confirm__heading {
    font-size: var(--font-lg);
  }
}
.modal-confirm__lead {
  margin-block: 12px 0;
  font-size: var(--font-sm);
  text-align: center;
}
.modal-confirm__note {
  margin-block: 12px 0;
  color: var(--color-notice);
  font-size: var(--font-sm);
  text-align: center;
}

/* ------------------------------
  modal-form-contents
------------------------------ */
.modal-form-contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------
  modal-filter
------------------------------ */
.modal-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-filter__button-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.modal-filter__button-wrap:first-child {
  margin-bottom: 20px;
}
.modal-filter__button-wrap:last-child {
  margin-top: 28px;
}

/* ------------------------------
  modal-section
------------------------------ */
.modal-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
}

/* ------------------------------
  modal-nav-list
------------------------------ */
.modal-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.modal-nav-list__link {
  color: var(--color-text-link);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
@media screen and (max-width: 768.9px) {
  .modal-nav-list__link {
    font-weight: var(--font-weight-normal);
  }
}
@media (any-hover: hover) {
  .modal-nav-list__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
    cursor: pointer;
  }
}

/* ------------------------------
  modal-point
------------------------------ */
.modal-point__lead {
  margin-block: 20px 0;
  text-align: center;
}
@media screen and (max-width: 768.9px) {
  .modal-point__lead {
    font-size: var(--font-sm);
  }
}
.modal-point__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: 20px 0;
  gap: 12px;
}
.modal-point__text {
  margin-block: 28px 0;
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .modal-point__text {
    font-size: var(--font-xs);
  }
}

/* ------------------------------
  modal-sns-list
------------------------------ */
.modal-sns-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .modal-sns-list {
    padding-inline: 20px;
  }
}
.modal-sns-list__item {
  flex-shrink: 0;
  width: calc((100% - 80px) / 5);
}
@media screen and (max-width: 768.9px) {
  .modal-sns-list__item {
    width: clamp(40px, (100% - 40px) / 3, 80px);
  }
}
.modal-sns-list__link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  color: var(--color-text);
  font-size: var(--font-sm);
  line-height: var(--line-none);
  text-align: center;
  text-decoration: none;
  gap: 8px;
}
.modal-sns-list__link img {
  width: 100%;
  max-width: 46px;
  height: auto;
}
@media (any-hover: hover) {
  .modal-sns-list__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  modal-trial-confirm
------------------------------ */
.modal-trial-confirm {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}
.modal-trial-confirm__lead {
  margin-block: 0;
  font-size: var(--font-sm);
}
.modal-trial-confirm__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
@media screen and (max-width: 768.9px) {
  .modal-trial-confirm__section {
    margin-top: 20px;
  }
}

/* ------------------------------
  modal-trial-error
------------------------------ */
.modal-trial-error {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}
.modal-trial-error__text-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-trial-error__text {
  margin: 0;
}

/* ------------------------------
  modal-trial-thanks
------------------------------ */
.modal-trial-thanks {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}
.modal-trial-thanks__text-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-trial-thanks__text {
  margin: 0;
}

/* ------------------------------
  modal-user
------------------------------ */
.modal-user {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px 16px;
}
@media screen and (max-width: 768.9px) {
  .modal-user {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}
.modal-user__profile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}
.modal-user__icon {
  flex-shrink: 0;
}
.modal-user__icon img {
  width: 40px;
  height: 40px;
}
.modal-user__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-block: 0;
  gap: 4px 8px;
}
.modal-user__name-large {
  font-size: var(--font-2xl-sm);
}

/* ------------------------------
  my-book-store
------------------------------ */
.my-book-store {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  column-gap: 24px;
  border: solid var(--color-border);
  border-width: 1px 0;
  font-size: var(--font-sm);
}
@media screen and (max-width: 768.9px) {
  .my-book-store {
    padding: 0;
  }
}
.my-book-store__name {
  flex: 0 0 320px;
  margin: 0;
}
@media screen and (max-width: 768.9px) {
  .my-book-store__name {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    padding: 10px 8px;
    border-bottom: solid 1px var(--color-border);
  }
}
@media screen and (max-width: 768.9px) {
  .my-book-store {
    flex-direction: column;
  }
}

/* ------------------------------
  my-book-store-data
------------------------------ */
.my-book-store-data {
  display: flex;
  flex: 1;
  align-items: center;
  margin-block: 0;
}
@media screen and (max-width: 768.9px) {
  .my-book-store-data {
    flex-direction: column;
    width: 100%;
  }
}
.my-book-store-data__item {
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .my-book-store-data__item:not(:last-child) {
    border-bottom: solid var(--color-border) 1px;
  }
}
.my-book-store-data__title {
  width: 36%;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .my-book-store-data__title {
    width: 172px;
    padding: 10px 0 10px 8px;
  }
}
.my-book-store-data__data {
  flex: 1;
  margin: 0;
  padding-inline: 24px;
}

/* ------------------------------
  number-list
------------------------------ */
.number-list {
  display: table;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.number-list__item {
  display: table-row;
  font-size: var(--font-sm);
  counter-increment: ol;
}
.number-list__item::before {
  content: counter(ol) ".";
  display: table-cell;
  width: fit-content;
  padding-right: 0.4em;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------
  readmore
------------------------------ */
.readmore {
  position: relative;
}
.readmore__contents {
  position: relative;
  height: 160px;
  overflow: hidden;
  transition: var(--trans-slow);
}
.readmore__contents.is-expanded {
  height: auto;
  padding-bottom: 40px;
}
.readmore__contents::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: var(--trans-slow);
  opacity: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);
}
.readmore__contents.is-expanded::after {
  opacity: 0;
  pointer-events: none;
}
.readmore__trigger {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 50%;
  align-items: center;
  padding: 6px 18px;
  border: 0;
  background: none;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  translate: -50% 0;
  gap: 10px;
}
@media (any-hover: hover) {
  .readmore__trigger:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.readmore__text {
  margin-block: 0;
}
@media screen and (max-width: 768.9px) {
  .readmore__text {
    font-size: var(--font-sm);
  }
}

/* ------------------------------
  pagenation
------------------------------ */
.pagenation {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
}
.book-list-bottom--full .pagenation {
  flex: none;
}
@media screen and (max-width: 768.9px) {
  .pagenation {
    justify-content: center;
    gap: 8px;
  }
}
.pagenation__arrow-link {
  display: flex;
  flex-shrink: 0;
  width: auto;
  height: auto;
  color: var(--color-main);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  gap: 4px;
}
.pagenation__arrow-link [class^="icon-"] {
  width: 16px;
  height: auto;
}
@media (any-hover: hover) {
  .pagenation__arrow-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.pagenation__numbers {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 20px;
}
.pagenation__numbers-item {
  white-space: nowrap;
}
.pagenation__numbers-link {
  display: grid;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--color-text);
  font-family: var(--font-family-jp);
  font-size: var(--font-xl);
  line-height: var(--line-none);
  text-decoration: none;
  place-items: center;
  aspect-ratio: 1/1;
  gap: 8px;
}
@media (any-hover: hover) {
  .pagenation__numbers-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.pagenation__numbers-link.is-current {
  background-color: var(--color-main);
  color: var(--color-on-main);
  pointer-events: none;
}

/* ------------------------------
  page-header
------------------------------ */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .page-header {
    gap: 12px;
  }
}
.page-header__lead {
  margin-block: 0;
  font-size: var(--font-sm);
}

/* ------------------------------
  partner-store
------------------------------ */
.partner-store {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 60px;
}

/* ------------------------------
  partner-store-section
------------------------------ */
.partner-store-section {
  width: 100%;
}
.partner-store-section--merit {
  background-color: var(--color-bg-section-pale);
}
.partner-store-section__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .partner-store-section__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.partner-store-section__inner {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  row-gap: 24px;
  padding-block: 40px;
}
@media screen and (max-width: 768.9px) {
  .partner-store-section__inner {
    gap: 20px;
  }
}

/* ------------------------------
  partner-stores
------------------------------ */
.partner-stores {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  width: 100%;
}

/* ------------------------------
  partner-store-merit
------------------------------ */
.partner-store-merit {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.partner-store-merit__image {
  margin: 0;
}
.partner-store-merit__image img {
  width: 100%;
  height: auto;
}

/* ------------------------------
  partner-store-merit-detail
------------------------------ */
.partner-store-merit-detail {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}
.partner-store-merit-detail__section {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.partner-store-merit-detail__section-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 20px;
}
.partner-store-merit-detail__text {
  width: 100%;
  margin-block: 0;
}
@media screen and (max-width: 768.9px) {
  .partner-store-merit-detail__image {
    max-width: 390px;
  }
}
@media screen and (max-width: 768.9px) {
  .partner-store-merit-detail__image img {
    width: 100%;
    height: auto;
  }
}
.partner-store-merit-detail__note {
  width: 100%;
  color: var(--color-text-sub);
  font-size: var(--font-xs);
}

/* ------------------------------
  payment-item
------------------------------ */
.payment-item-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

.payment-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}
.payment-item__note {
  font-size: var(--font-xs);
}

.is-disabled .payment-item__heading {
  color: var(--color-text);
}
.is-disabled .choices[data-type*="select-one"]::after {
  background-color: var(--color-border);
}
.is-disabled .choices__inner {
  background-color: var(--color-bg-section);
}
.is-disabled .choices__inner::before {
  background-color: var(--color-bg-section);
}

/* ------------------------------
  payment
------------------------------ */
.payment {
  display: inline-flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  padding: 16px 12px;
  border-radius: 6px;
  box-shadow: 0px 0px 15px rgb(var(--color-surface-shadow) / 0.12);
  gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .payment {
    max-width: 390px;
  }
}
.payment__total {
  display: flex;
  flex-direction: column;
  font-size: var(--font-sm);
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .payment__total {
    flex-direction: row;
  }
}
.payment__total-heading {
  margin-block: 0;
  color: var(--color-main);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
}
.payment__total-heading.is-only {
  color: var(--color-attention);
}
@media screen and (max-width: 768.9px) {
  .payment__total-heading {
    min-width: 127px;
    translate: 0 8px;
  }
}
.payment__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block: 0;
  line-height: var(--line-sm);
  gap: 4px;
}
@media screen and (max-width: 768.9px) {
  .payment__price {
    flex-direction: column;
    align-items: flex-start;
  }
}
.payment__price-amount {
  color: var(--color-attention);
  font-size: var(--font-3xl-sm);
  font-weight: var(--font-weight-bold);
}
.payment__note {
  font-size: var(--font-sm);
}
.payment__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payment__info-tag {
  width: 30px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--color-bg-section);
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.payment__info-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-bold);
  list-style: none;
}
.payment__info-list:last-child {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.payment__info-text {
  display: flex;
  align-items: flex-end;
}
.payment__info-heading {
  margin: 0;
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .payment__info-heading {
    min-width: 127px;
  }
}
.payment__info-num {
  margin: 0;
  font-size: var(--font-lg);
  line-height: var(--line-sm);
}
.payment__button {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.payment--small {
  align-self: flex-start;
  max-width: 210px;
}
@media screen and (max-width: 768.9px) {
  .payment--small {
    max-width: 390px;
  }
}

/* ------------------------------
  payment-list
------------------------------ */
.payment-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.payment-list__item {
  margin-bottom: 16px;
}
@media screen and (max-width: 768.9px) {
  .payment-list__item {
    margin-bottom: 12px;
  }
}
.payment-list__item--store {
  margin-bottom: 40px;
}
@media screen and (max-width: 768.9px) {
  .payment-list__item--store {
    margin-bottom: 32px;
  }
}
.payment-list__item:last-child {
  margin-bottom: 0;
}

/* ------------------------------
  payment-point
------------------------------ */
@media screen and (max-width: 768.9px) {
  .payment-point {
    justify-content: flex-end;
    width: 100%;
    max-width: 390px;
  }
}
.payment-point__item {
  display: inline-flex;
  box-sizing: border-box;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 16px 12px;
  border-radius: 6px;
  box-shadow: 0px 0px 15px rgb(var(--color-surface-shadow) / 0.12);
}
@media screen and (max-width: 768.9px) {
  .payment-point__item {
    max-width: 100%;
  }
}
.payment-point__heading {
  margin: 20px 0 12px;
  font-weight: var(--font-weight-bold);
}
.payment-point__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.payment-point__note {
  font-size: var(--font-xs);
  line-height: var(--line-sm);
}
.payment-point__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .payment-point__text {
    flex-direction: row;
    align-items: center;
  }
}
.payment-point__text-heading {
  margin: 0;
  color: var(--color-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.payment-point__text-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.payment-point__text-num {
  margin: 0;
  font-size: var(--font-lg);
}

/* ------------------------------
  purchase-main
------------------------------ */
.purchase-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 32px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .purchase-main {
    row-gap: 20px;
    width: 100%;
  }
}
.purchase-main__lead {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .purchase-main__lead {
    margin-top: 4px;
  }
}
.purchase-main__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
@media screen and (max-width: 768.9px) {
  .purchase-main__section {
    margin-top: 20px;
  }
}

/* ------------------------------
  purchase-side
------------------------------ */
.purchase-side {
  flex: 0 0 210px;
}
@media screen and (max-width: 768.9px) {
  .purchase-side {
    width: 100%;
  }
}

/* ------------------------------
  purchase-service
------------------------------ */
.purchase-service {
  margin-top: 8px;
}
@media screen and (max-width: 768.9px) {
  .purchase-service {
    margin-top: 20px;
  }
}
.purchase-service__heading {
  margin-block: 0;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .purchase-service__heading {
    font-size: var(--font-lg);
  }
}
.purchase-service__box {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* ------------------------------
  radio-block
------------------------------ */
.radio-block {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  column-gap: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-surface);
  cursor: pointer;
}
@media (any-hover: hover) {
  .radio-block:hover {
    cursor: pointer;
  }
}
.radio-block:has(:disabled) {
  background-color: var(--color-surface-disabled);
  pointer-events: none;
}
.radio-block:has(.input-radio__input:checked) {
  background-color: var(--color-bg-main);
}
.radio-block__label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}
@media screen and (max-width: 768.9px) {
  .radio-block {
    gap: 16px;
    padding: 16px;
  }
}
.radio-block__heading {
  margin: 0;
  color: var(--color-main);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .radio-block__heading {
    font-size: var(--font-base);
  }
}
.radio-block__detail {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  align-items: flex-start;
}
.radio-block__contents {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 8px;
}
.radio-block__text {
  margin-block: 0;
  font-size: var(--font-sm);
  line-height: var(--line-sm);
}
.radio-block__text--link {
  max-width: 176px;
  color: var(--color-main);
  text-decoration: none;
}
@media (any-hover: hover) {
  .radio-block__text--link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.radio-block__link {
  color: var(--color-main);
  font-size: var(--font-sm);
}
@media (any-hover: hover) {
  .radio-block__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}
.radio-block__note-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  row-gap: 4px;
}
.radio-block__note {
  margin-block: 0;
  font-size: var(--font-xs);
}

/* ------------------------------
  radio-block-list
------------------------------ */
.radio-block-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .radio-block-list {
    row-gap: 12px;
  }
}

/* ------------------------------
  search-result
------------------------------ */
.search-result {
  display: flex;
  align-items: flex-end;
  line-height: var(--line-none);
  gap: 0 10px;
}
.search-result__total {
  font-size: var(--font-sm);
}
.search-result__total-num {
  font-size: var(--font-xl);
}

/* ------------------------------
  service-description
------------------------------ */
.service-description {
  margin-top: 8px;
}
@media screen and (max-width: 768.9px) {
  .service-description {
    margin-top: 20px;
  }
}
.service-description__heading {
  margin-block: 0;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .service-description__heading {
    font-size: var(--font-lg);
  }
}
.service-description__box {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* ------------------------------
  set-products
------------------------------ */
.set-products {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.set-products__heading {
  margin-block: 0;
}
@media screen and (max-width: 768.9px) {
  .set-products__heading {
    font-size: var(--font-base);
  }
}

/* ------------------------------
  set-products-list
------------------------------ */
.set-products-list {
  margin-block: 0;
  padding: 0;
  list-style-type: none;
  font-size: var(--font-sm);
}
.set-products-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.set-products-list__item-title {
  font-weight: var(--font-weight-normal);
}
.set-products-list__item-detail {
  margin: 0;
}

/* ------------------------------
  sidebar-contents
------------------------------ */
.sidebar-contents {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

/* ------------------------------
  sidebar-filter
------------------------------ */
.sidebar-filter {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

/* ------------------------------
  scroll-box
------------------------------ */
.scroll-box {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  height: 540px;
  padding: 20px;
  overflow-y: scroll;
  border-radius: 12px;
  background-color: var(--color-bg-section);
}
.scroll-box__heading {
  margin-block: 0 16px;
}
.modal .scroll-box {
  height: 224px;
}

/* ------------------------------
  scroll-box-list
------------------------------ */
.scroll-box-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------
  send-mail
------------------------------ */
.send-mail {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  align-items: center;
}
.send-mail__head {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}
@media screen and (max-width: 768.9px) {
  .send-mail__head {
    row-gap: 20px;
  }
}
.send-mail__supplement {
  margin-block: 0;
  font-size: var(--font-sm);
}
.send-mail__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 32px;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .send-mail__main {
    row-gap: 24px;
  }
}
.send-mail__bottom {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ------------------------------
  slider-banner
------------------------------ */
.slider-banner {
  padding-block: 10px;
}
@media screen and (max-width: 768.9px) {
  .slider-banner {
    margin-inline: -20px;
    padding-block: 10px 15px;
    overflow-x: auto;
  }
}
@media screen and (max-width: 768.9px) {
  .slider-banner__swiper {
    display: flex;
    padding-inline: 20px 0;
    gap: 20px;
  }
}
@media screen and (max-width: 768.9px) {
  .slider-banner__swiper::after {
    content: "";
    flex: 0 0 1px;
  }
}
.slider-banner__item {
  width: 180px;
}
@media screen and (max-width: 768.9px) {
  .slider-banner__item {
    width: 36%;
  }
}
.slider-banner__link {
  display: block;
  transform-origin: center center;
  transition: var(--trans-default);
  aspect-ratio: 1/1;
}
@media (any-hover: hover) {
  .slider-banner__link:hover {
    transform: scale(1.05);
  }
}
.slider-banner__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------
  slider-book
------------------------------ */
.slider-book {
  position: relative;
  width: 100%;
  padding: 40px 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0px 4px 20px rgb(var(--color-surface-shadow) / 0.12);
}
@media screen and (max-width: 768.9px) {
  .slider-book {
    padding-block: 24px;
  }
}
.slider-book__inner {
  margin-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .slider-book__inner {
    margin-inline: 24px;
  }
}
.slider-book__item {
  display: flex;
  height: auto;
}

/* ------------------------------
  slider-button
------------------------------ */
.slider-button-prev {
  display: flex;
  position: absolute;
  z-index: 10;
  top: 50%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  transition: var(--trans-default);
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--color-main);
  box-shadow: 0 4px 4px rgb(var(--color-surface-shadow) / 0.2);
  cursor: pointer;
}
.slider-button-prev[aria-disabled="true"] {
  opacity: 0;
  pointer-events: none;
}
.slider-button-prev::before {
  content: "";
  width: 18px;
  height: 18px;
  transition: var(--trans-default);
  background-color: var(--color-on-main);
  mask: url("/assets/images/icon/ico_arrow_left.svg") no-repeat 0 0/100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
@media (any-hover: hover) {
  .slider-button-prev:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
  }
  .slider-button-prev:hover::before {
    background-color: var(--color-on-main-pale);
  }
}
.slider-button-prev {
  left: 10px;
}

.slider-button-next {
  display: flex;
  position: absolute;
  z-index: 10;
  top: 50%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  transition: var(--trans-default);
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--color-main);
  box-shadow: 0 4px 4px rgb(var(--color-surface-shadow) / 0.2);
  cursor: pointer;
}
.slider-button-next[aria-disabled="true"] {
  opacity: 0;
  pointer-events: none;
}
.slider-button-next::before {
  content: "";
  width: 18px;
  height: 18px;
  transition: var(--trans-default);
  background-color: var(--color-on-main);
  mask: url("/assets/images/icon/ico_arrow_left.svg") no-repeat 0 0/100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
@media (any-hover: hover) {
  .slider-button-next:hover {
    border-color: var(--color-main);
    background-color: var(--color-main-pale);
  }
  .slider-button-next:hover::before {
    background-color: var(--color-on-main-pale);
  }
}
.slider-button-next {
  right: 10px;
}
.slider-button-next::before {
  transform: scaleX(-1);
}

/* ------------------------------
  step
------------------------------ */
.step {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 768.9px) {
  .step {
    justify-content: flex-start;
  }
}

/* ------------------------------
  step-list
------------------------------ */
.step-list {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 56px;
}
@media screen and (max-width: 768.9px) {
  .step-list {
    display: none;
  }
}
.step-list__item {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 88px;
  min-height: 88px;
  font-size: var(--font-xs);
  gap: 8px;
  text-align: center;
}
.step-list__item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-disabled);
  translate: calc(-100% - 8px) 24px;
}
.step-list__item:first-child::before {
  display: none;
}
.step-list__number {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-disabled);
  color: var(--color-on-main);
  font-size: var(--font-2xl);
}
.is-current .step-list__number {
  background-color: var(--color-main);
}
.step-list__text {
  font-size: var(--font-xs);
}

/* ------------------------------
  step-label
------------------------------ */
.step-label {
  display: none;
  padding: 8px 20px;
  border-radius: 999px;
  background-color: var(--color-bg-main);
  color: var(--color-main);
  font-size: var(--font-lg);
  line-height: var(--line-none);
  text-align: center;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .step-label {
    display: flex;
  }
}
.step-label__heading {
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
  table
------------------------------ */
.table {
  overflow: hidden;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.table__title {
  box-sizing: border-box;
  width: 280px;
  padding: 16px 8px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-main);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
}
tr:first-child .table__title {
  border-top: 0;
}
@media screen and (max-width: 768.9px) {
  .table__title {
    width: 120px;
  }
}
.table__data {
  padding: 16px;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--font-sm);
}
tr:first-child .table__data {
  border-top: 0;
}
@media screen and (max-width: 768.9px) {
  .table__data {
    padding: 16px 12px;
  }
}
.table__text {
  margin-block: 8px 0;
}
.table__text:first-child {
  margin-top: 0;
}
.table__note {
  margin-block: 8px 0;
  font-size: var(--font-xs);
}

/* ------------------------------
  table-store
------------------------------ */
.table-store {
  border-collapse: collapse;
  border: solid var(--color-border);
  border-width: 1px 0;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
}
.table-store__th {
  padding-block: 4px;
  border-bottom: solid 1px var(--color-border);
  color: var(--color-text-sub);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  text-align: left;
}
.table-store__td {
  box-sizing: border-box;
  padding: 16px 8px 16px 0;
  letter-spacing: -0.01em;
}
.table-store__row:not(:last-child) .table-store__td {
  border-bottom: solid 1px var(--color-border);
}
.table-store__td--name {
  width: 400px;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
.table-store__td--address {
  width: 271px;
}

/* ------------------------------
  tag-done
------------------------------ */
.tag-done {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-done);
  color: var(--color-on-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}

/* ------------------------------
  tag-information
------------------------------ */
.tag-information {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-surface-sub);
  color: var(--color-on-surface-sub);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
  box-sizing: border-box;
  justify-content: center;
}
.information-list .tag-information {
  width: 136px;
}
@media screen and (max-width: 768.9px) {
  .information-list .tag-information {
    width: auto;
  }
}

.tag-information--update {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}
.tag-information--product {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px var(--color-main);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}
.tag-information--event {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-paramount);
  color: var(--color-on-paramount);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}
.tag-information--newproduct {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-attention);
  color: var(--color-on-attention);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}

/* ------------------------------
  tag-new
------------------------------ */
.tag-new {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: var(--color-attention);
  color: var(--color-on-attention);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  text-align: center;
}
.header-menu-link .tag-new {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 2px;
  padding: 2px 4px 3px;
  font-size: var(--font-2xs);
}
@media screen and (max-width: 768.9px) {
  .header-menu-link .tag-new {
    top: -3px;
    right: -5px;
    padding: 1px 3px 2px;
  }
}
.footer-nav-list__link .tag-new {
  margin-left: 4px;
  translate: 0 -1px;
}
.modal-nav-list__link .tag-new {
  margin-left: 6px;
  translate: 0 -1px;
}

/* ------------------------------
  tag-optional
------------------------------ */
.tag-optional {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-done);
  color: var(--color-on-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
  flex-shrink: 0;
}

/* ------------------------------
  tag-primary
------------------------------ */
.tag-primary {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-accent);
  color: var(--color-text-sub);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}
.tag-primary__subtext {
  flex: 1;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: var(--color-surface);
  color: var(--color-text-sub);
  font-size: var(--font-2xs);
}

/* ------------------------------
  tag-required
------------------------------ */
.tag-required {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px var(--color-main);
  border-radius: 4px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
  flex-shrink: 0;
}

/* ------------------------------
  tag-secondary
------------------------------ */
.tag-secondary {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px var(--color-main);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}

/* ------------------------------
  tag-tertiary
------------------------------ */
.tag-tertiary {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: solid 1px transparent;
  border-radius: 4px;
  background: var(--color-main-pale);
  color: var(--color-main);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  gap: 4px;
}

/* ------------------------------
  term
------------------------------ */
.term {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  font-size: var(--font-sm);
}

/* ------------------------------
  term-enforcement-list
------------------------------ */
.term-enforcement-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

/* ------------------------------
  term-disc-list 
------------------------------ */
.term-disc-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
  row-gap: 2px;
}
.term-disc-list__item {
  position: relative;
  padding-left: 16px;
}
.term-disc-list__item::before {
  content: "•";
  position: absolute;
  top: 0;
  left: 0;
}

/* ------------------------------
  term-number-list 
------------------------------ */
.term-number-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
  row-gap: 12px;
  translate: -32px 0;
  counter-reset: term-number 0;
}
@media screen and (max-width: 768.9px) {
  .term-number-list {
    translate: -16px 0;
  }
}
.term-number-list__item {
  display: flex;
  position: relative;
  row-gap: 8px;
  flex-direction: column;
  padding-left: 32px;
  counter-increment: term-number 1;
}
@media screen and (max-width: 768.9px) {
  .term-number-list__item {
    padding-left: 16px;
  }
}
.term-number-list__item::before {
  content: counter(term-number);
  position: absolute;
  top: 0;
  left: 0;
}

/* ------------------------------
  term-bracket-number-list
------------------------------ */
.term-bracket-number-list {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: 0;
  list-style: none;
  row-gap: 4px;
  counter-reset: term;
}
.term-bracket-number-list__item {
  position: relative;
  padding-left: 24px;
  counter-increment: term 1;
}
.term-bracket-number-list__item::before {
  content: "(" counter(term) ")";
  position: absolute;
  top: 0;
  left: 0;
}

/* ------------------------------
  term-section
------------------------------ */
.term-section {
  row-gap: 12px;
  display: flex;
  flex-direction: column;
}
.term-section > .term-section {
  padding-left: 24px;
}
.term-section__heading {
  margin-block: 0;
  font-size: var(--font-sm);
}
.term-section__contents {
  padding-left: 32px;
}
@media screen and (max-width: 768.9px) {
  .term-section__contents {
    padding-left: 16px;
  }
}

/* ------------------------------
  term-table
------------------------------ */
.term-table {
  border-collapse: collapse;
  border: solid 1px var(--color-border);
  text-align: left;
}
.term-table th {
  padding: 8px;
  border: solid 1px var(--color-border);
  font-weight: var(--font-weight-normal);
  vertical-align: top;
  white-space: nowrap;
}
.term-table td {
  padding: 8px;
  border: solid 1px var(--color-border);
}

/* ------------------------------
  term-text 
------------------------------ */
.term-text {
  margin-block: 0;
}

/* ------------------------------
  text-attention
------------------------------ */
.text-attention {
  color: var(--color-attention);
}

/* ------------------------------
  text-error
------------------------------ */
.text-error {
  display: inline-flex;
  align-items: flex-start;
  margin-block: 0;
  color: var(--color-attention);
  font-size: var(--font-sm);
  line-height: var(--line-sm);
  gap: 8px;
}
.text-error--base {
  font-size: var(--font-base);
}

/* ------------------------------
  text-inline-link
------------------------------ */
.text-inline-link {
  padding-inline: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.text-inline-link.is-small {
  font-size: var(--font-sm);
}
@media (any-hover: hover) {
  .text-inline-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  text-link
------------------------------ */
.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding-inline: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text-link);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  gap: 8px;
}
.text-link--xs {
  font-size: var(--font-xs);
  gap: 4px;
}
.text-link--xs [class^="icon-"]::before {
  width: 12px;
  height: 12px;
}
.text-link--sm {
  font-size: var(--font-sm);
  gap: 4px;
  font-weight: var(--font-weight-normal);
}
.text-link--sm [class^="icon-"] {
  translate: 0 1px;
}
.text-link--sm [class^="icon-"]::before {
  width: 12px;
  height: 12px;
}
.text-link--color {
  color: var(--color-main);
}
@media screen and (max-width: 768.9px) {
  .text-link {
    font-size: var(--font-sm);
  }
  .text-link--small {
    font-size: var(--font-xs);
  }
  .text-link--small [class^="icon-"]::before {
    translate: 0 1px;
  }
}
@media (any-hover: hover) {
  .text-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }
}

/* ------------------------------
  text-list
------------------------------ */
.text-list {
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}
.text-list__item {
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.text-list__item::before {
  content: "・";
  margin-right: 0.4em;
}

/* ------------------------------
  text-size
------------------------------ */
.text-md {
  margin-block: 0;
  font-size: var(--font-base);
}

/* ------------------------------
  text-note
------------------------------ */
.text-note {
  position: relative;
  margin-block: 0;
  font-size: var(--font-xs);
}
.text-note--base {
  font-size: var(--font-base);
}
.text-note--sub {
  color: var(--color-text-sub);
}

.text-sm {
  margin-block: 0;
  font-size: var(--font-sm);
}

.text-xs {
  margin-block: 0;
  font-size: var(--font-xs);
}
@media screen and (max-width: 768.9px) {
  [class^="iconbutton-"] .text-xs {
    display: none;
  }
}

/* ------------------------------
  thanks
------------------------------ */
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  row-gap: 40px;
}
.thanks__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .thanks__head {
    row-gap: 20px;
  }
}
.thanks__greet {
  display: flex;
  align-items: center;
  margin-block: 0;
  column-gap: 16px;
  color: var(--color-main);
  font-size: var(--font-3xl-sm);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .thanks__greet {
    column-gap: 8px;
    font-size: var(--font-2xl);
  }
}
.thanks__heading {
  margin-block: 0;
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 768.9px) {
  .thanks__heading {
    font-size: var(--font-xl);
  }
}
.thanks__text-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.thanks__text {
  margin-block: 0;
  font-size: var(--font-sm);
}
.thanks__text-bold {
  font-weight: var(--font-weight-bold);
}
.thanks__text-link {
  color: var(--color-main);
  text-decoration: none;
}
.thanks__text-link:hover {
  color: var(--color-text-link-hover);
}
.thanks__notice {
  margin-block: 0;
  color: var(--color-attention);
  font-size: var(--font-sm);
}
.thanks__bottom {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  width: 100%;
}
.thanks__button-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ------------------------------
  top
------------------------------ */
/* ------------------------------
  top-hero
------------------------------ */
.top-hero {
  margin-block: 40px;
}
@media screen and (max-width: 768.9px) {
  .top-hero {
    min-width: auto;
    margin-block: 20px;
  }
}
.top-hero__inner {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-content: center;
  min-height: 410px;
  padding: 24px 85px;
  overflow: hidden;
  border-radius: 24px;
  background: url("/assets/images/top/top_hero.jpg") no-repeat center center/cover;
  box-shadow: 0 0 20px rgb(var(--color-mv-shadow) / 0.12);
}
@media screen and (max-width: 768.9px) {
  .top-hero__inner {
    min-height: auto;
    padding: 15px 0 10px;
    border-radius: 12px;
    background-image: url("/assets/images/top/top_hero_sp.jpg");
  }
}
.top-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
.top-hero__title {
  width: 310px;
  margin-block: 0;
}
@media screen and (max-width: 768.9px) {
  .top-hero__title {
    width: 120px;
  }
}
.top-hero__title img {
  height: auto;
}
.top-hero__text {
  margin-block: 12px 0;
  font-size: var(--font-base);
}
@media screen and (max-width: 768.9px) {
  .top-hero__text {
    margin-block-start: 6px;
    margin-inline: 17px;
    font-size: var(--font-xs);
    text-align: center;
  }
}
.top-hero__carenet {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-block: 0;
  padding: 8px 12px;
  border-top-left-radius: 24px;
  background: var(--color-surface);
}
@media screen and (max-width: 768.9px) {
  .top-hero__carenet {
    padding: 4px 8px;
    border-top-left-radius: 12px;
  }
}
.top-hero__carenet img {
  width: 249px;
  height: auto;
}
@media screen and (max-width: 768.9px) {
  .top-hero__carenet img {
    width: 126px;
  }
}

/* ------------------------------
  top-hero-point
------------------------------ */
.top-hero-point {
  display: flex;
  margin-block: 16px 0;
  padding: 0;
  gap: 14px;
}
@media screen and (max-width: 768.9px) {
  .top-hero-point {
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    margin-block: 8px 0;
    gap: 5px;
  }
}
.top-hero-point__item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 142px;
  border: var(--color-main) 2px solid;
  border-radius: 50%;
  gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .top-hero-point__item {
    width: auto;
    height: auto;
    padding: 4px 6px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(32, 186, 197, 0.8) 0%, rgba(99, 199, 115, 0.8) 100%);
  }
}
.top-hero-point__text {
  margin-block: 0;
  color: var(--color-main);
  line-height: var(--line-sm);
  text-align: center;
}
@media screen and (max-width: 768.9px) {
  .top-hero-point__text {
    color: var(--color-on-main);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-sm);
    text-align: left;
  }
}

/* ------------------------------
  service
------------------------------ */
.service {
  font-family: var(--font-family-jp);
  font-weight: var(--font-weight-light);
}

/* ------------------------------
  service-feature-section
------------------------------ */
.service-feature-section {
  padding-block: 80px;
  border: solid 1px var(--color-border-service);
  border-width: 1px 0;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section {
    padding-block: 40px;
  }
}
.service-feature-section__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.service-feature-section__inner {
  display: flex;
  box-sizing: content-box;
  max-width: 980px;
  column-gap: 60px;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__inner {
    box-sizing: border-box;
    flex-direction: column-reverse;
    min-width: auto;
    row-gap: 16px;
    padding-inline: 12.5%;
  }
}
.service-feature-section:nth-child(even) .service-feature-section__inner {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section:nth-child(even) .service-feature-section__inner {
    flex-direction: column-reverse;
  }
}
.service-feature-section__image {
  width: 50%;
  height: auto;
  overflow: hidden;
}
.service-feature-section__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__image {
    width: 100%;
  }
}
.service-feature-section__text-wrap {
  display: flex;
  flex-direction: column;
  width: 50%;
  row-gap: 16px;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__text-wrap {
    width: 100%;
    row-gap: 5px;
  }
}
.service-feature-section__heading {
  margin-block: 0;
  color: var(--color-main);
  font-family: var(--font-family-jp-serif);
  font-size: 1.875rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__heading {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }
}
.service-feature-section__detail {
  display: flex;
  flex-direction: column;
}
.service-feature-section__description {
  margin-block: 0;
  font-size: 1.125rem;
  line-height: 2;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__description {
    font-size: 0.6875rem;
    line-height: var(--line-relax);
  }
}
.service-feature-section__button-wrap {
  margin-top: 16px;
}
.service-feature-section__annotation {
  margin-top: 16px;
  padding-left: 2em;
  font-size: 0.75rem;
  line-height: var(--line-base);
  text-indent: -2em;
}
@media screen and (max-width: 768.9px) {
  .service-feature-section__annotation {
    font-size: 0.5625rem;
  }
}

/* ------------------------------
  service-feature
------------------------------ */
.service-feature {
  min-width: calc(980px + 80px);
}
@media screen and (max-width: 768.9px) {
  .service-feature {
    min-width: auto;
  }
}
.service-feature__heading {
  display: grid;
  width: 100%;
  height: 125px;
  margin-block: 0;
  border-width: 1px 0;
  color: var(--color-main);
  font-family: var(--font-family-jp-serif);
  font-size: 2.25rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.2em;
  text-align: center;
  place-items: center;
}
@media screen and (max-width: 768.9px) {
  .service-feature__heading {
    height: 62px;
    font-size: 1.25rem;
  }
}
.service-feature__container {
  background-color: var(--color-bg-service);
}
.service-feature__section-wrap {
  display: flex;
  flex-direction: column;
}

/* ------------------------------
  service-hero
------------------------------ */
.service-hero {
  min-width: calc(980px + 80px);
  padding-top: 70px;
}
@media screen and (max-width: 768.9px) {
  .service-hero {
    min-width: auto;
    padding-top: 40px;
  }
}
.service-hero::after {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1500/440;
  background: url("/assets/images/service/hero.jpg") no-repeat center/cover;
}
@media screen and (width < 600px) {
  .service-hero::after {
    aspect-ratio: 640/350;
    background-image: url("/assets/images/service/hero-sp.jpg");
  }
}
.service-hero__heading {
  display: flex;
  flex-direction: column;
  text-align: center;
  row-gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .service-hero__heading {
    font-size: 1.5rem;
    row-gap: 10px;
  }
}
.service-hero__heading-title {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .service-hero__heading-title {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.service-hero__heading-title {
  margin-block: 0;
  font-family: var(--font-family-jp-serif);
  font-size: 2.625rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.4em;
  line-height: 1.5;
}
@media screen and (max-width: 768.9px) {
  .service-hero__heading-title {
    min-width: auto;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
  }
}
.service-hero__heading-strong {
  color: var(--color-main);
  font-weight: var(--font-weight-normal);
}
.service-hero__heading-lead {
  margin-block: 0;
  color: inherit;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  line-height: var(--line-relax);
}
@media screen and (max-width: 768.9px) {
  .service-hero__heading-lead {
    color: var(--color-text-sub-service);
    font-size: 0.6875rem;
  }
}

/* ------------------------------
  service-now
------------------------------ */
.service-now {
  min-width: calc(980px + 80px);
}
@media screen and (max-width: 768.9px) {
  .service-now {
    min-width: auto;
  }
}
.service-now__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .service-now__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.service-now__inner {
  display: flex;
  box-sizing: content-box;
  flex-direction: column;
  max-width: 980px;
  padding-block: 70px 80px;
  row-gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .service-now__inner {
    box-sizing: border-box;
    min-width: auto;
    max-width: auto;
    padding: 40px 6.25%;
  }
}
.service-now__heading {
  margin-block: 0;
  color: var(--color-main);
  font-family: var(--font-family-jp-serif);
  font-size: 1.875rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768.9px) {
  .service-now__heading {
    font-size: 1.125rem;
  }
}
.service-now__image {
  width: 100%;
  height: auto;
}
.service-now__image img {
  width: 100%;
  height: auto;
}

/* ------------------------------
  service-start
------------------------------ */
.service-start {
  min-width: calc(980px + 80px);
  border: solid 1px var(--color-border-service);
  border-width: 1px 0;
  background-color: var(--color-bg-service);
}
@media screen and (max-width: 768.9px) {
  .service-start {
    min-width: auto;
  }
}
.service-start__inner {
  box-sizing: border-box;
  width: 100%;
  min-width: 980px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .service-start__inner {
    min-width: 100%;
    padding-inline: 20px;
  }
}
.service-start__inner {
  display: flex;
  box-sizing: content-box;
  flex-direction: column;
  max-width: 980px;
  padding-block: 70px 80px;
  row-gap: 20px;
}
@media screen and (max-width: 768.9px) {
  .service-start__inner {
    box-sizing: border-box;
    min-width: auto;
    max-width: auto;
    padding-block: 40px;
    padding-inline: 6.25%;
  }
}
.service-start__heading {
  margin-block: 0;
  color: var(--color-main);
  font-family: var(--font-family-jp-serif);
  font-size: 1.875rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768.9px) {
  .service-start__heading {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }
}
.service-start__section-wrap {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768.9px) {
  .service-start__section-wrap {
    flex-direction: column;
    row-gap: 20px;
    padding-inline: 7.1428%;
  }
}

/* ------------------------------
  service-start-section
------------------------------ */
.service-start-section {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  width: 32%;
  padding-block: 40px;
  border-radius: 10px;
  background-color: var(--color-surface);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  row-gap: 40px;
}
@media screen and (max-width: 768.9px) {
  .service-start-section {
    width: 100%;
    padding: 8.3333%;
    row-gap: 12px;
    border-radius: 6px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  }
}
.service-start-section__heading {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-block: 0;
  padding-inline: 20px;
  color: var(--color-main);
  font-family: var(--font-family-jp-serif);
  font-size: 1.875rem;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.15em;
  text-align: center;
  word-break: auto-phrase;
  row-gap: 8px;
}
@media screen and (max-width: 768.9px) {
  .service-start-section__heading {
    font-size: 1.125rem;
    row-gap: 0;
  }
}
.service-start-section__image {
  height: 96px;
}
@media screen and (max-width: 768.9px) {
  .service-start-section__image {
    height: auto;
  }
  .service-start-section:first-child .service-start-section__image {
    width: 60px;
  }
  .service-start-section:nth-child(2) .service-start-section__image {
    width: 50px;
  }
  .service-start-section:nth-child(3) .service-start-section__image {
    width: 110px;
  }
}
.service-start-section__image img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.service-start-section__bottom {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  row-gap: 16px;
  padding-inline: 40px;
}
@media screen and (max-width: 768.9px) {
  .service-start-section__bottom {
    width: 100%;
    padding: 0;
  }
}
.service-start-section__description {
  margin-block: 0;
  font-size: 1rem;
}
@media screen and (max-width: 768.9px) {
  .service-start-section__description {
    font-size: 0.6875rem;
    line-height: 1.6;
  }
}

/* ------------------------------
  align
------------------------------ */
.u-align-center {
  margin-inline: auto;
}

.u-align-left {
  margin-right: auto;
}

.u-align-right {
  margin-left: auto;
}

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

.u-text-left {
  text-align: left;
}

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

/* ------------------------------
  text-break-manual
------------------------------ */
.u-text-break-manual {
  word-break: keep-all;
}

/* ------------------------------
  text-size
------------------------------ */
.u-text-xl {
  font-size: var(--font-xl);
}

.u-text-lg {
  font-size: var(--font-lg);
}

.u-text-md {
  font-size: var(--font-base);
}

.u-text-sm {
  font-size: var(--font-sm);
}

.u-text-xs {
  font-size: var(--font-xs);
}

/* ------------------------------
  text-support
------------------------------ */
.u-text-support {
  color: var(--color-text-sub);
}

/* ------------------------------
  text-weight
------------------------------ */
.u-text-normal {
  font-weight: var(--font-weight-normal);
}

.u-text-bold {
  font-weight: var(--font-weight-bold);
}

/*# sourceMappingURL=style.css.map */