/* ----- [シンプル] ----- */

:root {
  --m-content-bg-color:#ffffff;
  --m-sidemenu-bg-color:#ffffff;
  --m-recommend-bg-color:#F4F4F4;
  --footer-height: 54px;
  --m-page-heading-bg-color:#f5f5f5;
  --page-bottom-navi-bg-color:#f5f5f5;
  --page-bottom-navi-border-style:none;
  --page-bottom-navi-round: 2px;
  --m-common-border-style: solid 1px #dcdcdc;
  --m-common-list-hover-bg-color: #F5F5F5;
  --m-common-list-border-style: solid 1px #dcdcdc;
  /* simple */
  --sm-nav-height: 66px;
  --m-bg-color1: #ffffff;
  --m-nav-bg-color:#ffffff;
  --m-nav-border1-bg-color:#595857;
  --m-nav-border1-height:4px;
  --m-nav-border2-bg-color:#E6E6E6;
  --m-nav-border2-height:2px;
  --m-nav-border2-bottom:2px;
  --m-nav-text-color:#000000;
  /* login user tooltip */
  --m-user-tooltip-bg-color: #f5f5f5;
  --m-user-tooltip-border-style: solid 1px #707070;
  --m-user-tooltip-text-color: #000000;
  --m-login-box-bg-color:#F5F5F5;
  --m-login-box-round:4px;
  /* toggle */
  --m-toggle-openclose-bg-color: #F5F5F5;
  --m-toggle-openclose-border-color: transparent;
  --m-toggle-openclose-border-style: none;
  --m-toggle-openclose-border-width: 0px;
  --m-toggle-openclose-round: 2px;
  --m-sidemenu-category-hover-bg-color: #F5F5F5;
  --m-sidemenu-category-border-style: solid 1px #dcdcdc;
  --m-nav-menu-border-style: none;
  --m-nav-menu-border-width: none;
  --m-nav-menu-border-color: transparent;
  --m-nav-menu-hover-bg-color: #F5F5F5;
  --m-nav-menu-hover-text-color: #000000;
  --m-nav-menu-hover-round: 2px;
  --m-nav-menu-hover-border-style: none;
  --m-nav-menu-hover-border-width: none;
  --m-nav-menu-hover-border-color: transparent;
  --m-sidemenu-title-bg-color:#FFFFFF;
  --m-sidemenu-title-border-style: none none solid none;
  --m-sidemenu-title-border-width: 2px;
  --m-sidemenu-title-border-color: #595857;
  --m-sidemenu-title-round: 2px;
  --m-sidemenu-title-padding: 4px;
  --m-sidemenu-sub-title-bg-color:#FFFFFF;
  --m-sidemenu-sub-title-border-style: none none solid none;
  --m-sidemenu-sub-title-border-width: 2px;
  --m-sidemenu-sub-title-border-color: #707070;
  --m-sidemenu-sub-title-round: 2px;
  --m-sidemenu-sub-title-padding: 4px;
  /* book thumbnail menu */
  --m-thumb-menu-box-bg-color:#FFFFFF90;
  --m-thumb-menu-bg-color:#59585790;
  --m-thumb-menu-hover-bg-color:#dcdddd90;
  --m-thumb-menu-active-bg-color:#59585790;
  --m-thumb-menu-active-text-color:#FFFFFF;
  --m-thumb-menu-round:2px;
  --m-thumb-menu-text-color:#FFFFFF;
  --m-thumb-menu-text-weight:bold;
  --m-thumb-menu-hover-text-color:#000000;
  /* category */
  --m-badge-category-bg-color:#F5F5F5;
  --m-badge-category-border-style: solid 1px #dcdcdc;
  --m-badge-category-round: 2px;
  /* category(pickup) */
  --m-badge-category2-bg-color:#F5F5F5;
  --m-badge-category2-border-style: solid 1px #dcdcdc;
  --m-badge-category2-round: 2px;
  /* sidebar toggle menu */
  --m-btn-sidebar-bg-color: #f5f5f5;
  /* recommend menu */
  --m-btn-recommend-caret-bg-color: rgba(255, 255, 255, .5);
  /* news */
  --m-newslist-border-style: solid 1px #dcdcdc;
  --m-badge-round:2px;
  --m-book-badge-round:2px;
  --m-common-round: 2px;
  --m-input-serch-round: 2px;
  --m-input-border-color: #707070;
  --m-input-border-style: solid 1px #707070;
  --m-input-bg-color: #ffffff;
  --m-pulldown-bg-color: #FFFFFF;
  --m-pulldown-border-color: #707070;
  --m-pulldown-border-style: solid;
  --m-pulldown-border-width: 1px;
  --m-pulldown-round: 2px;
  /* pulldown contents */
  --m-pulldown1-bg-color: #FFFFFF;
  --m-pulldown1-border-color: #707070;
  --m-pulldown1-border-style: solid;
  --m-pulldown1-border-width: 1px;
  --m-pulldown1-round: 2px;
  /* pulldown header */
  --m-pulldown2-bg-color: #FFFFFF;
  --m-pulldown2-border-color: #707070;
  --m-pulldown2-border-style: solid;
  --m-pulldown2-border-width: 1px;
  --m-pulldown2-round: 2px;
  /* pulldown sidemenu */
  --m-pulldown3-bg-color: #FFFFFF;
  --m-pulldown3-border-color: #707070;
  --m-pulldown3-border-style: solid;
  --m-pulldown3-border-width: 1px;
  --m-pulldown3-round: 2px;
  /* pulldown sp contents */
  --m-pulldown4-bg-color: #FFFFFF;
  --m-pulldown4-border-color: #707070;
  --m-pulldown4-border-style: solid;
  --m-pulldown4-border-width: 1px;
  --m-pulldown4-round: 2px;
  --m-btn-primary-bg-color: #595857;
  --m-btn-primary-text-color: #ffffff;
  --m-btn-secondary-bg-color: #F5F5F5;
  --m-menu-border-style: none;
  --m-menu-border-width: 0px;
  --m-menu-border-color: transparent;
  --m-menu-bg-color: #F5F5F5;
  --m-menu-round: 2px;
  --m-sidemenu-toggle-bg-color: #F5F5F5;
  --m-sidemenu-toggle-border-color: transparent;
  --m-sidemenu-toggle-border-style: none;
  --m-sidemenu-toggle-border-width: 0px;
  --m-sidemenu-toggle-round: 2px;
  --m-menu-active-bg-color: #F5F5F5;
  --m-current-page-bg-color: #dcdcdc;
  --m-menu-navi-active-bg-color: #F5F5F5;
  --m-menu-navi-active-round: 2px;
  --m-menu-navi-active-border-style:  none;
  --m-menu-navi-active-border-width:  0px;
  --m-menu-navi-active-border-color:  transparent;
  --m-book-icon-round: 2px;
  --m-book-icon-width: auto;
  --m-book-icon-height: auto;
  --m-recommend-book-icon-top: 4px;
  --m-thumb-book-icon-top: 4px;
  --m-details-book-icon-top: none;
  --m-details-book-icon-box-height: 24px;
  --m-book-thumb-box-border-style:  solid 1px #dcdcdc;
  --m-book-thumb-round: 0px;
  --m-book-thumb-border-style:  none;
  --m-book-title-tooltip-bg-color:#ffffff;
}

/* [スキン共通デザイン] */

:root {
  --m-common-thumbnail-bg-color:#f5f5f5;
  --m-common-thumbnail-bg-round: 2px;
  --m-common-colose-bg-color:#dcdcdc;
  /* new */
  --m-icon-new-bg-color:#DC143C;
  --m-icon-new-text-color:#FFFFFF;
  /* update */
  --m-icon-update-bg-color:#FFD700;
  --m-icon-update-text-color:#000000;
  /* filing */
  --m-icon-filing-bg-color:#FF6600;
  --m-icon-filing-text-color:#FFFFFF;
  /* image */
  --m-icon-contents-image-bg-color:#33CCFF;
  --m-icon-contents-image-text-color:#FFFFFF;
  /* movie */
  --m-icon-contents-movie-bg-color:#0066CC;
  --m-icon-contents-movie-text-color:#FFFFFF;
  /* audio */
  --m-icon-contents-audio-bg-color:#007B43;
  --m-icon-contents-audio-text-color:#FFFFFF;
  /* file */
  --m-icon-contents-file-bg-color:#FFBF00;
  --m-icon-contents-file-text-color:#FFFFFF;
  /* html */
  --m-icon-contents-html-bg-color:#663399;
  --m-icon-contents-html-text-color:#FFFFFF;
  /* tooltip ?mark */
  --m-badge-help-bg-color:#38a1db;
  --m-badge-help-round:4px;
}

/* [uneditable] */

:root {
  --m-book-thumbnail-width:176px;
  --m-book-thumbnail-height:340px;
  --m-book-thumbnail-box-min-height:274px;
  --m-pagetitle-font-style: bold;
  --m-pagetitle-font-size: 1.5rem;
  --m-pagetitle-lineheight: 2rem;
  --m-page-thumbnail-box-min-height:210px;
  --m-pagetitle-space-bottom: 20px;
  --m-header-logo--box-width: 300px;
  --m-sidebar-width:300px;
  /* grid-template-columns */
  --m-grid-col:repeat(2, minmax(0, 1fr));
  --m-grid-md-col:repeat(2, minmax(0, 1fr));
  --m-grid-lg-col:repeat(3, minmax(0, 1fr));
  --m-grid-xl-col:repeat(5, minmax(0, 1fr));
  --m-grid-2xl-col:repeat(6, minmax(0, 1fr));
  --m-grid-3xl-col:repeat(8, minmax(0, 1fr));
  /* expanded grid */
  --m-grid-expanded-col:repeat(2, minmax(0, 1fr));
  --m-grid-expanded-md-col:repeat(3, minmax(0, 1fr));
  --m-grid-expanded-lg-col:repeat(4, minmax(0, 1fr));
  --m-grid-expanded-xl-col:repeat(6, minmax(0, 1fr));
  --m-grid-expanded-2xl-col:repeat(7, minmax(0, 1fr));
  --m-grid-expanded-3xl-col:repeat(10, minmax(0, 1fr));
  /* grid-column-end */
  --m-grid-col-end:3;
  --m-grid-md-col-end:3;
  --m-grid-lg-col-end:4;
  --m-grid-xl-col-end:6;
  --m-grid-2xl-col-end:7;
  --m-grid-3xl-col-end:9;
  /* expanded grid-column-end */
  --m-grid-expanded-col-end:3;
  --m-grid-expanded-md-col-end:4;
  --m-grid-expanded-lg-col-end:5;
  --m-grid-expanded-xl-col-end:7;
  --m-grid-expanded-2xl-col-end:8;
  --m-grid-expanded-3xl-col-end:11;
}

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */

/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */

/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
}

/* Sections */

/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */

/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */

/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */

/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */

/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */

/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */

/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */

/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */

/* ============================================ */

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  /* 2 */
}

input:focus-visible {
  outline: none;
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Fix appearance for Firefox
 */

[type="number"] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */

/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */

/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit;
  /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

body{
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans','メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3',	'Hiragino Kaku Gothic ProN', sans-serif;
}

.hidden{
  display : none;
}

.pulldown {
  border-width:1px;
  border-color:var(--m-input-border-color);
  background-color:var(--m-input-bg-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.25rem;
  padding-right:0.25rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.pulldown:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.pulldown{
  background-color: var(--m-pulldown-bg-color);
  border-color: var(--m-pulldown-border-color);
  border-style: var(--m-pulldown-border-style);
  border-width: var(--m-pulldown-border-width);
  border-radius : var(--m-pulldown-round);
}

/* pulldown contents */

.pulldown1 {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.25rem;
  padding-right:0.25rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.pulldown1:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.pulldown1{
  background-color: var(--m-pulldown1-bg-color);
  border-color: var(--m-pulldown1-border-color);
  border-style: var(--m-pulldown1-border-style);
  border-width: var(--m-pulldown1-border-width);
  border-radius : var(--m-pulldown1-round);
}

/* pulldown header */

.pulldown2 {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.25rem;
  padding-right:0.25rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.pulldown2:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.pulldown2{
  background-color: var(--m-pulldown2-bg-color);
  border-color: var(--m-pulldown2-border-color);
  border-style: var(--m-pulldown2-border-style);
  border-width: var(--m-pulldown2-border-width);
  border-radius : var(--m-pulldown2-round);
}

/* pulldown sidemenu */

.pulldown3 {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.25rem;
  padding-right:0.25rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.pulldown3:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.pulldown3{
  background-color: var(--m-pulldown3-bg-color);
  border-color: var(--m-pulldown3-border-color);
  border-style: var(--m-pulldown3-border-style);
  border-width: var(--m-pulldown3-border-width);
  border-radius : var(--m-pulldown3-round);
}

/* pulldown sp contents */

.pulldown4 {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.25rem;
  padding-right:0.25rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.pulldown4:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.pulldown4{
  background-color: var(--m-pulldown4-bg-color);
  border-color: var(--m-pulldown4-border-color);
  border-style: var(--m-pulldown4-border-style);
  border-width: var(--m-pulldown4-border-width);
  border-radius : var(--m-pulldown4-round);
}

html{
  font-size: 16px;
  scrollbar-width: auto;
  scrollbar-color: rgb(209 213 219) transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  display: none;
}

::-webkit-scrollbar-thumb {
  border-radius:0.75rem;
  --tw-bg-opacity:1;
  background-color:rgb(209 213 219 / var(--tw-bg-opacity));
}

::-webkit-scrollbar:horizontal{
  height: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  border-radius:0.75rem;
  --tw-bg-opacity:1;
  background-color:rgb(209 213 219 / var(--tw-bg-opacity));
}

/* 目次 */

.list-style {
  width:100%;
  flex-direction:row;
  text-align:center;
}

@media (min-width: 768px) {
  .list-style {
    flex-direction:column;
    text-align:left;
  }
}

.list-style li a {
  display:flex;
  height:60px;
  width:100%;
  align-items:center;
  justify-content:space-between;
  text-decoration-line:none;
  border-bottom: var(--m-common-list-border-style);
}

@media (hover: hover) and (pointer: fine){
  .list-style li a:hover{
    background-color :var(--m-common-list-hover-bg-color);
    cursor: pointer;
  }
}

.list-style li a > div{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  min-height: 0;
}

.list-style ul.closed{
  max-height: 0;
  opacity: 0;
  transition: all .2s ease-in;
}

.list-style ul:not(.closed){
  transition: all .5s ease-in;
  max-height: 100dvh;
  opacity: 1;
}

:not(.nopadding-lists).list-style.cate-l1 a {
  padding-left:8px;
  padding-right: 8px;
}

:not(.nopadding-lists).list-style .cate-l2 a {
  padding-left:16px;
  padding-right: 8px;
}

:not(.nopadding-lists).list-style .cate-l3 a {
  padding-left:24px;
  padding-right: 8px;
}

:not(.nopadding-lists).list-style .cate-l4 a {
  padding-left:32px;
  padding-right: 8px;
}

:not(.nopadding-lists).list-style .cate-l5 a {
  padding-left:40px;
  padding-right: 8px;
}

.nopadding-lists.list-style.cate-l1 a {
  padding-left:0px;
  padding-right: 8px;
}

.nopadding-lists.list-style .cate-l2 a{
  margin-left: 8px;
  width: calc(100% - 8px);
  padding-right: 8px;
}

.nopadding-lists.list-style .cate-l3 a{
  margin-left: 16px;
  width: calc(100% - 16px);
  padding-right: 8px;
}

.nopadding-lists.list-style .cate-l4 a{
  margin-left: 24px;
  width: calc(100% - 24px);
  padding-right: 8px;
}

.nopadding-lists.list-style .cate-l5 a{
  margin-left: 32px;
  width: calc(100% - 32px);
  padding-right: 8px;
}

.icon-list-style .closed {
  display : none;
}

.icon-toggle-menu .cate-l2  a {
  padding-left:16px;
}

.icon-toggle-menu .cate-l2  a:hover {
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity));
}

.icon-toggle-menu .cate-l3  a {
  padding-left:32px;
}

.icon-toggle-menu .cate-l3  a:hover {
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity));
}

.icon-toggle-menu .closed {
  display : none;
}

.icon-bookinfo-index{
  background-color : var(--m-toggle-openclose-bg-color);
  border-radius : var(--m-toggle-openclose-round);
  border-style: 	var(--m-toggle-openclose-border-style);
  border-width: 	var(--m-toggle-openclose-border-width);
  border-color: 	var(--m-toggle-openclose-border-color) !important;
}

@media (hover: hover) and (pointer: fine){
  .ev-book-view:hover{
    cursor: pointer;
  }
}

.menu-button {
  display:flex;
  max-width:200px;
  align-items:center;
  justify-content:center;
  background-color:var(--m-btn-secondary-bg-color);
  padding-top:4px;
  padding-bottom:4px;
  padding-left:8px;
  padding-right:8px;
  font-size:1rem;
  line-height:1.5rem;
  font-weight:700;
  border-radius : var(--m-common-round);
}

.btn-menu-parts{
  background-color : var(--m-menu-bg-color);
  border-radius : var(--m-menu-round);
  border-style: 	var(--m-menu-border-style);
  border-width: 	var(--m-menu-border-width);
  border-color: 	var(--m-menu-border-color);
}

input[type="checkbox"] + span {
  margin-left:8px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.btn-tooltip-close{
  position: absolute;
  right: 0;
  top: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

/* ブックタイトル省略時のツールチップ */

.title-tooltip{
  padding: 8px;
  position: absolute;
  z-index: 500;
  display: inline-block;
  word-break: break-word;
  background: var(--m-book-title-tooltip-bg-color);
}

.title-tooltip:focus {
  outline: none;
}

.icon-plus-minus{
  border-radius : var(--m-common-round);
}

/* ページの説明のツールチップ */

.tooltip1 {
  position: relative;
  display: none;
  padding: 12px 18px;
  min-width: 420px;
  max-width: 50dvw;
  color: #fff;
  translate: calc(50%*-1) 40px;
  background: var(--m-badge-help-bg-color);
  border-radius: var(--m-badge-help-round);
  z-index: 300;
  cursor: default;
  height: -moz-fit-content;
  height: fit-content;
}

.tooltip1:before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  margin-left: -8px;
  border: 16px solid transparent;
  border-bottom: 16px solid var(--m-badge-help-bg-color);
}

.tooltip1 p {
  margin: 0;
  padding: 0;
}

.tooltip1-sp {
  position: absolute;
  text-align: left;
  display: none;
  padding: 12px 18px;
  width: calc(100% - 16px);
  left: 8px;
  color: #fff;
  background: var(--m-badge-help-bg-color);
  border-radius: var(--m-badge-help-round);
  z-index: 300;
  cursor: default;
}

.tooltip1-sp p {
  margin: 0;
  padding: 0;
}

.tooltip-menu {
  z-index: 300;
  position: absolute;
  display: block;
  width: -moz-max-content;
  width: max-content;
  padding: 10px;
  background: var(--m-book-title-tooltip-bg-color);
}

.tooltip-menu::after {
  bottom: 100%;
  left: 0;
  height: calc(var(--_triangle-size) + var(--_gap));
}

/* ----- スマートフォン 並び替えモーダル ----- */

.modal-sm {
  width:calc(100vw - 16px);
  overflow-x:hidden;
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity));
  z-index: 1100;
}

.lists-sort-select {
  display:flex;
  width:100%;
  flex-direction:column;
}

ul.lists-sort-select li {
  display:flex;
  height:54px;
  width:100%;
  border-top: var(--m-common-border-style);
}

ul.lists-sort-select li label {
  display:flex;
  height:100%;
  width:100%;
  align-items:center;
}

ul.lists-sort-select li .menu-text {
  display:flex;
  width:100%;
  padding-left:0.5rem;
}

ul.lists-sort-select li .menu-control {
  margin-right:16px;
  display:flex;
  height:32px;
  width:32px;
  align-items:center;
  justify-content:center;
}

ul.lists-sort-select li input[type="radio"] {
  display:flex;
}

.modal-header-sm {
  display:flex;
  height:36px;
  width:100%;
  align-items:center;
  justify-content:space-between;
}

.modal-header-text-sm {
  display:flex;
  width:100%;
  justify-content:center;
  font-weight:700;
}

.modal-header-close-sm {
  position:relative;
  margin-right:8px;
  display:flex;
  height:32px;
  width:32px;
  justify-content:center;
}

#btn-sm_menu_close {
  display : none;
}

#btn-sm_menu.selected #btn-sm_menu_close {
  display:flex;
}

#btn-sm_menu.selected #btn-sm_menu_open {
  display : none;
}

.user-icon {
  display:flex;
  height:36px;
  width:32px;
  align-items:center;
  justify-content:center;
  border-radius:0.25rem;
}

.user-icon:hover {
  border-top-left-radius:0.25rem;
  border-bottom-left-radius:0.25rem;
}

.user-info-box {
  position:relative;
  display:flex;
  align-items:center;
}

.user-tooltip {
  position:absolute;
  top:32px;
  right:0px;
  z-index:1000;
  height:-moz-fit-content;
  height:fit-content;
  width:-moz-fit-content;
  width:fit-content;
  white-space:nowrap;
  padding:8px;
  display : none;
  border :var(--m-user-tooltip-border-style);
  background-color :var(--m-user-tooltip-bg-color);
  color :var(--m-user-tooltip-text-color);
  border-radius: 2px;
}

.user-info-box:hover .user-tooltip{
  display: block;
}

.login-user-btn {
  margin-right:0.5rem;
  display:flex;
  align-items:center;
  justify-items:center;
  border-radius:0.25rem;
}

.btn-nav_help {
  margin-right:1rem;
  display:block;
  border-radius:0.25rem;
  padding:0.5rem;
}

.btn-nav_help:hover {
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity));
}

@media (min-width: 1024px) {
  .btn-nav_help {
    margin-top:0px;
    display:inline-block;
  }
}

/* ----- フッター ----- */

footer {
  position:fixed;
  bottom:0px;
  display:flex;
  height:var(--footer-height);
  width:100%;
  align-items:center;
  justify-content:center;
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity));
  font-size:0.875rem;
  line-height:1.25rem;
}

.btn-content-toggle {
  height:32px;
  width:32px;
  align-items:center;
  justify-content:center;
}

/* ブック一覧の親、スクロールするエリア */

.page{
  /* ヘッダー + フッター + ページタイトル + 表示切り替え */
  display:flex;
  height:auto;
  width:100%;
  justify-content:center;
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}

@media (min-width: 768px) {
  .page {
    height:auto;
  }
}

/* 簡易表示 */

/* [表示数に依存] */

.page-contents {
  position:relative;
  height:-moz-fit-content;
  height:fit-content;
  width:100%;
}

/* 詳細表示 */

/* [表示数に依存] */

.page.detail .page-contents {
  display:flex;
  flex-direction:column;
  row-gap:2rem;
  -moz-column-gap:2rem;
       column-gap:2rem;
  padding-bottom:0.5rem;
}

@media (min-width: 768px) {
  .page.detail .page-contents {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.page.simple .page-contents {
  display:grid;
  grid-template-columns:var(--m-grid-md-col);
  row-gap:1rem;
  -moz-column-gap:0.5rem;
       column-gap:0.5rem;
  padding-bottom:0.5rem;
}

@media (min-width: 640px) {
  .page.simple .page-contents {
    grid-template-columns:var(--m-grid-md-col);
  }
}

@media (min-width: 768px) {
  .page.simple .page-contents {
    grid-template-columns:var(--m-grid-md-col);
  }
}

@media (min-width: 1024px) {
  .page.simple .page-contents {
    grid-template-columns:var(--m-grid-lg-col);
  }
}

@media (min-width: 1280px) {
  .page.simple .page-contents {
    grid-template-columns:var(--m-grid-xl-col);
  }
}

@media (min-width: 1536px) {
  .page.simple .page-contents {
    grid-template-columns:var(--m-grid-2xl-col);
  }
}

@media (min-width: 1920px) {
  .page.simple .page-contents {
    grid-template-columns:var(--m-grid-3xl-col);
  }
}

/* 簡易表示 */

/* [表示数に依存] */

@media (min-width: 768px) {
  .content.expanded .page-contents {
    grid-template-columns:var(--m-grid-expanded-md-col);
  }
}

@media (min-width: 1024px) {
  .content.expanded .page-contents {
    grid-template-columns:var(--m-grid-expanded-lg-col);
  }
}

@media (min-width: 1280px) {
  .content.expanded .page-contents {
    grid-template-columns:var(--m-grid-expanded-xl-col);
  }
}

@media (min-width: 1536px) {
  .content.expanded .page-contents {
    grid-template-columns:var(--m-grid-expanded-2xl-col);
  }
}

@media (min-width: 1920px) {
  .content.expanded .page-contents {
    grid-template-columns:var(--m-grid-expanded-3xl-col);
  }
}

/* 詳細表示 */

/* [表示数に依存] */

.content.expanded .page.detail .page-contents {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

/* [表示数に依存] */

.book-category-title {
  grid-column-start:1;
  grid-column-end:var(--m-grid-col-end);
  padding:8px;
  font-weight:700;
}

@media (min-width: 768px) {
  .book-category-title {
    grid-column-end:var(--m-grid-md-col-end);
  }
}

@media (min-width: 1024px) {
  .book-category-title {
    grid-column-end:var(--m-grid-lg-col-end);
  }
}

@media (min-width: 1280px) {
  .book-category-title {
    grid-column-end:var(--m-grid-xl-col-end);
  }
}

@media (min-width: 1536px) {
  .book-category-title {
    grid-column-end:var(--m-grid-2xl-col-end);
  }
}

@media (min-width: 1920px) {
  .book-category-title {
    grid-column-end:var(--m-grid-3xl-col-end);
  }
}

.book-category-title {
  background-color: var(--m-page-heading-bg-color);
  border-radius : var(--m-common-round);
}

/* [表示数に依存] */

.content.expanded .book-category-title {
  grid-column-end:var(--m-grid=expanded-col-end);
}

@media (min-width: 768px) {
  .content.expanded .book-category-title {
    grid-column-end:var(--m-grid-expanded-md-col-end);
  }
}

@media (min-width: 1024px) {
  .content.expanded .book-category-title {
    grid-column-end:var(--m-grid-expanded-lg-col-end);
  }
}

@media (min-width: 1280px) {
  .content.expanded .book-category-title {
    grid-column-end:var(--m-grid-expanded-xl-col-end);
  }
}

@media (min-width: 1536px) {
  .content.expanded .book-category-title {
    grid-column-end:var(--m-grid-expanded-2xl-col-end);
  }
}

@media (min-width: 1920px) {
  .content.expanded .book-category-title {
    grid-column-end:var(--m-grid-expanded-3xl-col-end);
  }
}

.page.detail .book-category-title {
  grid-column-start:1;
  grid-column-end:3;
}

/* [未使用] */

.book-thumbnail {
  counter-increment: count 1;
}

/* ページの先頭へ戻るボタン */

.page-bottom-navi {
  position:fixed;
  right:16px;
  bottom:calc(var(--footer-height) + 8px);
  background-color :var(--page-bottom-navi-bg-color);
  border: var(--page-bottom-navi-border-style);
  border-radius : var(--page-bottom-navi-round);
}

/* ----- ログイン画面 ----- */

.login-content {
  position:fixed;
  top:var(--sm-nav-height);
  display:flex;
  width:100%;
  justify-content:center;
  padding-top:calc(32px + 8px);
  padding-bottom:calc(32px + 8px);
  padding-left:16px;
  padding-right:16px;
}

@media (min-width: 768px) {
  .login-content {
    top:70px;
  }
}

.login-content-title {
  display:flex;
  height:48px;
  width:100%;
  font-style: var(--m-pagetitle-font-style);
  font-size: var(--m-pagetitle-font-size);
  line-height: var(--m-pagetitle-lineheight);
  margin-bottom: var(--m-pagetitle-space-bottom);
}

.login-content-body {
  display:flex;
  width:440px;
  flex-direction:column;
  justify-content:center;
}

.login-form {
  display:flex;
  height:224px;
  width:100%;
  flex-direction:column;
  justify-content:center;
  row-gap:32px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(0 0 0 / var(--tw-border-opacity));
  background-color: var(--m-login-box-bg-color);
  border-radius : var(--m-login-box-round);
}

.login-form > div {
  display:flex;
  width:100%;
  justify-content:center;
}

.login-form input {
  height:32px;
  width:80%;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border-width:1px;
  border-color:var(--m-input-border-color);
  background-color:var(--m-input-bg-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  font-size:1rem;
  line-height:1.5rem;
  line-height:1.25;
}

.login-form input:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.login-form input{
  border-radius : var(--m-input-serch-round);
}

.login-form input::-moz-placeholder {
  font-size:1rem;
  line-height:1.5rem;
}

.login-form input::placeholder {
  font-size:1rem;
  line-height:1.5rem;
}

button.btn-login {
  display:flex;
  height:32px;
  width:180px;
  align-items:center;
  justify-content:center;
  background-color:var(--m-btn-primary-bg-color);
  color:var(--m-btn-primary-text-color);
  border-radius : var(--m-common-round);
}

@media (hover: hover) and (pointer: fine){
  .btn-login:hover{
    opacity: .5;
  }
}

/* ----- ヘルプページ ----- */

.help-contents {
  display:flex;
  height:100%;
  width:100%;
  flex-direction:column;
}

.help-item-title {
  margin-top:16px;
  margin-bottom:16px;
  display:flex;
  height:32px;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  padding:8px;
  font-weight:700;
  background-color: var(--m-page-heading-bg-color);
  border-radius : var(--m-common-round);
}

.help-items {
  width:100%;
  flex-direction:column;
  -moz-column-gap:16px;
       column-gap:16px;
  row-gap:16px;
}

@media (min-width: 768px) {
  .help-items {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.help-item {
  display:flex;
  flex-direction:column;
}

.help-item-header {
  display:flex;
  height:40px;
  align-items:center;
  justify-items:center;
  -moz-column-gap:4px;
       column-gap:4px;
  padding:8px;
  font-weight:700;
  border-bottom: var(--m-common-border-style);
}

.help-item-body {
  display:flex;
  height:100%;
  width:100%;
  justify-items:center;
  padding:8px;
}

/* ----- ブック一覧 | シンプル表示 ----- */

/*
 画像1件分
*/

.book-thumbnail {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.book-thumbnail-basebox {
  position:relative;
  display:flex;
  width:var(--m-book-thumbnail-width);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:var(--m-book-thumbnail-box-min-height);
  padding-top: 24px;
}

.book-thumbnail-imagebox {
  position:relative;
  box-sizing:border-box;
  display:flex;
  width:var(--m-book-thumbnail-width);
  align-items:center;
  justify-content:center;
}

.book-thumbnail-imagebox img {
  max-height:100%;
  border :var(--m-book-thumb-box-border-style);
}

/* ブックのサムネイルオーバーメニュー */

.book-thumbnail-menubox {
  position:absolute;
  top:24px;
  width:var(--m-book-thumbnail-width);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-items:center;
  row-gap:6px;
  display : none;
  height: calc(100% - 24px);
  background-color: var(--m-thumb-menu-box-bg-color);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-basebox:hover .book-thumbnail-menubox {
    display:flex;
  }

  .book-thumbnail-basebox:hover .link-menu{
    cursor: pointer;
  }

  .book-thumbnail-imagebox:hover .book-thumbnail-menubox{
    opacity:1;
  }
}

.book-thumbnail-imagebox .book-thumbnail-menubox{
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-delay: 0ms;
}

/* ブックのサムネイルオーバーメニューボタン */

.book-thumbnail-menu {
  display:flex;
  width:80%;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:0.875rem;
  line-height:1.25rem;
  background-color :var(--m-thumb-menu-bg-color);
  border-radius : var(--m-thumb-menu-round);
  color : var(--m-thumb-menu-text-color);
  font-weight: var(--m-thumb-menu-text-weight);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-menu:hover{
    background-color :var(--m-thumb-menu-hover-bg-color);
    color : var(--m-thumb-menu-hover-text-color);
  }
}

.book-thumbnail-menu:active{
  background-color :var(--m-thumb-menu-active-bg-color);
  color : var(--m-thumb-menu-active-text-color);
}

.book-thumbnail-iconbox {
  position:absolute;
  top:0px;
  display:flex;
  height:24px;
  width:var(--m-book-thumbnail-width);
  align-items:center;
  justify-content:flex-end;
}

.book-thumbnail-icon {
  position:absolute;
  z-index:30;
  display:flex;
  height:var(--m-book-icon-height);
  width:var(--m-book-icon-width);
  align-items:center;
  justify-content:center;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:0.25rem;
  padding-right:0.25rem;
  text-align:center;
  font-size:0.75rem;
  line-height:1rem;
  border-radius : var(--m-book-icon-round);
  top: var(--m-thumb-book-icon-top);
}

.book-thumbnail-icon[data-type="new"]{
  background-color :var(--m-icon-new-bg-color);
  color: var(--m-icon-new-text-color);
}

.book-thumbnail-icon[data-type="update"]{
  background-color :var(--m-icon-update-bg-color);
  color: var(--m-icon-update-text-color);
}

.book-thumbnail-image{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  pointer-events: none;
  border-radius : var(--m-book-thumb-round);
}

.book-thumbnail-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-top:8px;
  margin-bottom:8px;
  width:var(--m-book-thumbnail-width);
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:0.25rem;
  padding-right:0.25rem;
  padding-top:2px;
  padding-bottom:2px;
}

.book-thumbnail-categorybox {
  display:flex;
  height:28px;
  width:var(--m-book-thumbnail-width);
  align-items:center;
}

.book-thumbnail-category-icon{
  overflow: hidden;
  white-space: nowrap;
  cursor:pointer;
  text-overflow:ellipsis;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  font-size:0.75rem;
  line-height:1rem;
  background-color :var(--m-badge-category-bg-color);
  border:var(--m-badge-category-border-style);
  border-radius : var(--m-badge-category-round);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-category-icon:hover{
    opacity: .5;
  }
}

.ev-nonevent{
  pointer-events: none;
}

/* ----- ブック一覧 | 詳細表示 ----- */

/*
 画像1件分
*/

.book-thumbnail-detail {
  display:flex;
  gap:1rem;
  padding:8px;
}

.book-thumbnail-detail-leftbox {
  position:relative;
  display:flex;
  width:50%;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.book-thumbnail-detail-rightbox {
  position:relative;
  display:flex;
  width:100%;
  flex-direction:column;
}

.book-thumbnail-detail-imagebox {
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
}

.book-thumbnail-detail-imagebox img {
  max-height:100%;
  border :var(--m-book-thumb-box-border-style);
}

/* ブックのサムネイルオーバーメニュー */

.book-thumbnail-detail-buttonbox {
  margin-top:16px;
  display:flex;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(0, 1fr));
  flex-wrap:wrap;
  align-items:center;
  row-gap:16px;
  -moz-column-gap:2rem;
       column-gap:2rem;
}

/* ブックのサムネイルオーバーメニュー */

.book-thumbnail-detail-menubox {
  position:absolute;
  top:0px;
  height:100%;
  width:100%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-items:center;
  row-gap:6px;
  display : none;
  background-color: var(--m-thumb-menu-box-bg-color);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-detail-imagebox:hover .book-thumbnail-detail-menubox {
    display:flex;
  }

  .book-thumbnail-detail-imagebox:hover .link-menu{
    cursor: pointer;
  }

  .book-thumbnail-detail-imagebox:hover .book-thumbnail-detail-menubox{
    opacity:1;
  }
}

.book-thumbnail-detail-imagebox .book-thumbnail-detail-menubox{
  transition-property: opacity;
  transition-duration: 300ms;
  transition-delay: 0ms;
}

/* ブックのサムネイルオーバーメニューボタン */

.book-thumbnail-detail-menu {
  display:flex;
  width:80%;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:0.875rem;
  line-height:1.25rem;
  background-color :var(--m-thumb-menu-bg-color);
  border-radius : var(--m-thumb-menu-round);
  color : var(--m-thumb-menu-text-color);
  font-weight: var(--m-thumb-menu-text-weight);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-detail-menu:hover{
    background-color :var(--m-thumb-menu-hover-bg-color);
    color : var(--m-thumb-menu-hover-text-color);
    cursor: pointer;
  }
}

/* 詳細表示のボタン */

.book-thumbnail-detail-buttonbox button {
  display:flex;
  max-width:200px;
  align-items:center;
  justify-content:center;
  border-radius:0.25rem;
  background-color:var(--m-btn-secondary-bg-color);
  padding-top:4px;
  padding-bottom:4px;
  padding-left:8px;
  padding-right:8px;
  font-size:1rem;
  line-height:1.5rem;
  font-weight:700;
  border-radius : var(--m-common-round);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-detail-buttonbox button:hover{
    opacity: .5;
    cursor: pointer;
  }
}

.book-thumbnail-detail-iconbox {
  position:relative;
  display:flex;
  height:var(--m-details-book-icon-box-height);
  align-items:flex-start;
  justify-content:flex-start;
  margin-bottom: 8px;
}

.book-thumbnail-detail-icon {
  position:absolute;
  z-index:30;
  display:flex;
  height:var(--m-book-icon-height);
  width:var(--m-book-icon-width);
  align-items:center;
  justify-content:center;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:0.25rem;
  padding-right:0.25rem;
  text-align:center;
  font-size:0.75rem;
  line-height:1rem;
  border-radius : var(--m-book-icon-round);
  top: var(--m-details-book-icon-top);
}

.book-thumbnail-detail-icon[data-type="new"]{
  background-color :var(--m-icon-new-bg-color);
  color: var(--m-icon-new-text-color);
}

.book-thumbnail-detail-icon[data-type="update"]{
  background-color :var(--m-icon-update-bg-color);
  color: var(--m-icon-update-text-color);
}

.book-thumbnail-detail-image {
  width:var(--m-book-thumbnail-width);
  border-radius : var(--m-book-thumb-round);
}

.book-thumbnail-detail-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:0.25rem;
  padding-right:0.25rem;
  padding-bottom:2px;
  font-size:1rem;
  line-height:1.5rem;
  font-weight:700;
}

.book-thumbnail-detail-categorybox {
  display:flex;
  height:28px;
  width:100%;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
}

.book-thumbnail-detail-category-icon{
  overflow: hidden;
  white-space: nowrap;
  cursor:pointer;
  text-overflow:ellipsis;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  font-size:0.75rem;
  line-height:1rem;
  background-color :var(--m-badge-category-bg-color);
  border:var(--m-badge-category-border-style);
  border-radius : var(--m-badge-round);
}

@media (hover: hover) and (pointer: fine){
  .book-thumbnail-detail-category-icon:hover{
    opacity: .5;
  }
}

.book-thumbnail-detail-bookinfo {
  display:flex;
  padding-top:8px;
  padding-bottom:16px;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:700;
}

.book-thumbnail-detail-bookinfo div {
  width:50%;
}

.book-thumbnail-detail-bookinfo div:nth-child(2) {
  display:flex;
  justify-content:flex-end;
}

.book-thumbnail-detail-description{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  max-height:120px;
  padding-top:16px;
  border-top:var(--m-common-border-style);
}

/* ----- ページ一覧 ----- */

.page-list .filing-btn[data-type="add"]{
  display:flex;
}

.page-list .filing-btn[data-type="delete"]{
  display:none;
}

.page-list.filed-page .filing-btn[data-type="add"]{
  display:none;
}

.page-list.filed-page .filing-btn[data-type="delete"]{
  display:flex;
}

.page-list.filed-page .page-thumbnail-icon.filed-page[data-type="filing"]{
  display:flex;
}

.page-list .page-thumbnail-icon[data-type="filing"]{
  display:none;
}

.book-page-info-menubox.all-filing .all-filing-btn[data-type="add"]{
  display:none;
}

.book-page-info-menubox.all-filing .all-filing-btn[data-type="delete"]{
  display:flex;
}

.book-page-info-menubox .all-filing-btn[data-type="add"]{
  display:flex;
}

.book-page-info-menubox .all-filing-btn[data-type="delete"]{
  display:none;
}

/*
 ページ1件分
*/

.page-thumbnail {
  display:flex;
  max-height:360px;
  flex-direction:column;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  background-color: var(--m-common-thumbnail-bg-color);
  border-radius: var(--m-common-thumbnail-bg-round);
}

.filing-page-thumbnail {
  display:flex;
  height:360px;
  flex-direction:column;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  background-color: var(--m-common-thumbnail-bg-color);
  border-radius: var(--m-common-thumbnail-bg-round);
}

.book-page-info {
  display:flex;
  flex-direction:column;
  row-gap:8px;
}

.book-page-divbox {
  display:flex;
  flex-direction:column-reverse;
  justify-content:space-between;
  row-gap:8px;
}

@media (min-width: 768px) {
  .book-page-divbox {
    flex-direction:row;
  }
}

.book-page-info-menubox {
  display:flex;
  align-items:center;
  -moz-column-gap:8px;
       column-gap:8px;
}

.pageno-info {
  display:flex;
  justify-content:flex-end;
  -moz-column-gap:8px;
       column-gap:8px;
  font-size:0.875rem;
  line-height:1.25rem;
}

.icon-help-box{
  border-radius: 50%;
  /*角丸*/
  position:relative;
  display:flex;
  height:16px;
  width:16px;
  font-size:0.875rem;
  line-height:1.25rem;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity));
  background-color :var(--m-badge-help-bg-color);
}

.book-page-category-icon{
  overflow: hidden;
  /* 改行を半角スペースに変換することで、1行にする */
  white-space: nowrap;
  display:inline-block;
  cursor:pointer;
  text-overflow:ellipsis;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  font-size:0.75rem;
  line-height:1rem;
  background-color :var(--m-badge-category-bg-color);
  border:var(--m-badge-category-border-style);
  border-radius : var(--m-badge-round);
}

.page-searchbox {
  display:flex;
  justify-content:flex-end;
}

.page-searchbox .search-form {
  width:100%;
}

@media (min-width: 768px) {
  .page-searchbox .search-form {
    width:240px;
  }
}

.search-form-inputbox {
  display:flex;
  align-items:center;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.search-form-inputbox input[type="text"] {
  height:32px;
  width:100%;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border-width:1px;
  border-color:var(--m-input-border-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.search-form-inputbox input[type="text"]:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.search-form-inputbox input[type="text"]{
  border-top-left-radius : var(--m-input-serch-round);
  border-bottom-left-radius : var(--m-input-serch-round);
}

.search-form-inputbox button {
  height:32px;
  flex-shrink:0;
  background-color:var(--m-btn-primary-bg-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  font-size:0.875rem;
  line-height:1.25rem;
  color:var(--m-btn-primary-text-color);
  border-top-right-radius : var(--m-input-serch-round);
  border-bottom-right-radius : var(--m-input-serch-round);
}

.page-thumbnail-basebox {
  position:relative;
  display:flex;
  max-height:340px;
  width:calc(100% - 16px);
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  height: 100%;
  min-height: var(--m-page-thumbnail-box-min-height);
}

.page-thumbnail-imagebox[data-type="pagelist"] {
  position:relative;
  align-items:center;
  width: 100%;
  height: calc(100% - 24px - 28px - 16px);
  max-height: calc(100% - 24px - 28px - 16px);
}

.page-thumbnail-imagebox[data-type="search_pagelist"] {
  position:relative;
  align-items:center;
  width: 100%;
  height: calc(100% - 24px - 28px - 16px);
  max-height: calc(100% - 24px - 28px - 44px);
  margin-bottom: 8px;
}

.page-thumbnail-imagebox[data-type="filinglist"] {
  position:relative;
  align-items:center;
  width: 100%;
  height: calc(100% - 24px - 28px - 16px);
  max-height: calc(100% - 24px - 28px - 16px - 45px);
}

.page-thumbnail-imagebox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border :var(--m-book-thumb-box-border-style);
  margin: 0 auto;
}

/* ブックのサムネイルオーバーメニュー */

.page-thumbnail-menubox {
  position:absolute;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-items:center;
  row-gap:6px;
  display : none;
  background-color: var(--m-thumb-menu-box-bg-color);
  width: 100%;
  top: calc(24px + 28px);
  z-index: 1000;
}

.page-thumbnail-menubox[data-type="filinglist"]{
  height: calc(100% - 24px - 28px - 48px);
}

.page-thumbnail-menubox[data-type="pagelist"]{
  height: calc(100% - 24px - 28px - 16px);
}

.page-thumbnail-menubox[data-type="search_pagelist"]{
  height: calc(100% - 24px - 28px - 16px - 34px);
}

@media (hover: hover) and (pointer: fine){
  .page-thumbnail-basebox:hover .page-thumbnail-menubox {
    display:flex;
  }
}

.page-thumbnail-imagebox .page-thumbnail-menubox{
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-delay: 0ms;
}

.page-thumbnail-imagebox:hover .page-thumbnail-menubox{
  opacity:1;
}

/* ブックのサムネイルオーバーメニューボタン */

.page-thumbnail-menu {
  display:flex;
  width:80%;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:0.875rem;
  line-height:1.25rem;
  background-color :var(--m-thumb-menu-bg-color);
  border-radius : var(--m-thumb-menu-round);
  color : var(--m-thumb-menu-text-color);
  font-weight: var(--m-thumb-menu-text-weight);
}

@media (hover: hover) and (pointer: fine){
  .page-thumbnail-menu:hover{
    background-color :var(--m-thumb-menu-hover-bg-color);
    color : var(--m-thumb-menu-hover-text-color);
    cursor: pointer;
  }
}

.page-thumbnail-menu a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-thumbnail-iconbox {
  display:flex;
  height:24px;
  width:100%;
  align-items:center;
  justify-content:flex-end;
}

.page-thumbnail-icon[data-type="unfiling"] {
  position:relative;
  display:flex;
  height:18px;
  width:18px;
  cursor:pointer;
  align-items:center;
  border-radius:50%;
  background-color: var(--m-common-colose-bg-color);
}

.page-thumbnail-icon {
  height:-moz-fit-content;
  height:fit-content;
  width:36px;
  align-items:center;
  justify-content:center;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:0.25rem;
  padding-right:0.25rem;
  text-align:center;
  font-size:0.75rem;
  line-height:1rem;
}

.page-thumbnail-icon[data-type="new"]{
  background-color :var(--m-icon-new-bg-color);
  color: var(--m-icon-new-text-color);
  border-radius : var(--m-book-badge-round);
}

.page-thumbnail-icon[data-type="update"]{
  background-color :var(--m-icon-update-bg-color);
  color: var(--m-icon-update-text-color);
  border-radius : var(--m-book-badge-round);
}

.page-thumbnail-icon[data-type="filing"]{
  background-color :var(--m-icon-filing-bg-color);
  color: var(--m-icon-filing-text-color);
  border-radius : var(--m-badge-round);
}

.page-thumbnail-image {
  width:var(--m-book-thumbnail-width);
}

.page-thumbnail-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-top:8px;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}

.page-thumbnail-page {
  height:28px;
  width:100%;
  text-align:center;
}

.page-thumbnail-categorybox {
  display:flex;
  height:28px;
  width:100%;
  align-items:center;
}

.page-thumbnail-category-icon{
  overflow: hidden;
  white-space: nowrap;
  cursor:pointer;
  text-overflow:ellipsis;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  font-size:0.75rem;
  line-height:1rem;
  background-color :var(--m-badge-category-bg-color);
  border:var(--m-badge-category-border-style);
  border-radius : var(--m-badge-round);
}

@media (hover: hover) and (pointer: fine){
  .page-thumbnail-category-icon:hover{
    opacity: .5;
  }
}

.current-item{
  background-color :var(--m-current-page-bg-color);
}

/* ----- ブック情報 ----- */

.bookinfo-contents {
  position:relative;
  display:flex;
  height:-moz-fit-content;
  height:fit-content;
  width:100%;
  flex-direction:column;
  row-gap:32px;
  padding-bottom:0.5rem;
}

.book-info-contents-title {
  display:flex;
  height:32px;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:8px;
  font-weight:700;
  background-color: var(--m-page-heading-bg-color);
  border-radius : var(--m-common-round);
}

@media (hover: hover) and (pointer: fine){
  .book-info-contents-title:hover{
    cursor: pointer;
    opacity: .5;
  }
}

/*
 画像1件分
*/

.book-info {
  display:flex;
  gap:1rem;
}

.book-info-leftbox {
  position:relative;
  display:flex;
  width:40%;
  flex-direction:column;
}

@media (min-width: 768px) {
  .book-info-leftbox {
    width:220px;
  }
}

.book-info-rightbox {
  position:relative;
  display:flex;
  width:60%;
  flex-direction:column;
  overflow:hidden;
}

@media (min-width: 768px) {
  .book-info-rightbox {
    width:calc(100% - 220px);
  }
}

.book-info-imagebox {
  position:relative;
  display:flex;
  height:280px;
  width:100%;
  min-width:140px;
  align-items:flex-start;
  justify-content:center;
}

@media (min-width: 768px) {
  .book-info-imagebox {
    width:220px;
    align-items:center;
  }
}

/* ブックのサムネイルオーバーメニュー */

.book-info-buttonbox {
  margin-top:0.5rem;
  display:flex;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(0, 1fr));
  flex-wrap:wrap;
  align-items:center;
  row-gap:0.5rem;
  -moz-column-gap:16px;
       column-gap:16px;
}

/* ブックのサムネイルオーバーメニューボタン */

.book-info-buttonbox button {
  display:flex;
  max-width:200px;
  align-items:center;
  justify-content:center;
  padding-left:0.5rem;
  padding-right:0.5rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:1rem;
  line-height:1.5rem;
  font-weight:700;
  background-color: var(--m-btn-secondary-bg-color);
  border-radius: var(--m-common-round);
}

@media (hover: hover) and (pointer: fine){
  .book-info-buttonbox button:hover{
    opacity: .5;
    cursor: pointer;
  }
}

/* ブックのサムネイルオーバーメニュー */

.book-info-menubox {
  position:absolute;
  top:0px;
  display:flex;
  height:100%;
  width:100%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-items:center;
  row-gap:6px;
  background-color: var(--m-thumb-menu-box-bg-color);
}

.book-info-imagebox .book-info-menubox{
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-delay: 0ms;
}

@media (hover: hover) and (pointer: fine){
  .book-info-imagebox:hover .book-info-menubox{
    opacity:1;
  }
}

.book-info-image {
  box-sizing:border-box;
  max-height:280px;
  width:100%;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-border-opacity));
}

@media (min-width: 768px) {
  .book-info-image {
    width:200px;
  }
}

/* ブックのサムネイルオーバーメニューボタン */

.book-info-menu {
  display:flex;
  width:80%;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:0.875rem;
  line-height:1.25rem;
  background-color :var(--m-thumb-menu-bg-color);
  border-radius : var(--m-thumb-menu-round);
  color : var(--m-thumb-menu-text-color);
  font-weight: var(--m-thumb-menu-text-weight);
}

@media (hover: hover) and (pointer: fine){
  .book-info-menu:hover{
    background-color :var(--m-thumb-menu-hover-bg-color);
    color : var(--m-thumb-menu-hover-text-color);
    cursor: pointer;
  }
}

.book-info-iconbox {
  display:flex;
  height:24px;
  width:var(--m-book-thumbnail-width);
  align-items:center;
  justify-content:flex-start;
}

.book-info-icon {
  height:-moz-fit-content;
  height:fit-content;
  width:36px;
  align-items:center;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:0.25rem;
  padding-right:0.25rem;
  text-align:center;
  font-size:0.75rem;
  line-height:1rem;
}

.book-info-icon[data-type="new"]{
  background-color :var(--m-icon-new-bg-color);
  color: var(--m-icon-new-text-color);
  border-radius : var(--m-book-badge-round);
}

.book-info-icon[data-type="update"]{
  background-color :var(--m-icon-update-bg-color);
  color: var(--m-icon-update-text-color);
  border-radius : var(--m-book-badge-round);
}

.book-info-title {
  margin-top:0.25rem;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:0.25rem;
  padding-right:0.25rem;
  padding-top:2px;
  padding-bottom:2px;
  font-size:1.125rem;
  line-height:1.75rem;
  font-weight:700;
}

.book-info-categorybox {
  display:flex;
  height:28px;
  width:100%;
  align-items:center;
}

.book-info-category-icon{
  overflow: hidden;
  white-space: nowrap;
  cursor:pointer;
  text-overflow:ellipsis;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  font-size:0.75rem;
  line-height:1rem;
  background-color :var(--m-badge-category-bg-color);
  border:var(--m-badge-category-border-style);
  border-radius : var(--m-badge-round);
}

@media (hover: hover) and (pointer: fine){
  .book-info-category-icon:hover{
    opacity: .5;
  }
}

.book-info-bookinfo {
  display:flex;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:700;
}

.book-info-bookinfo div {
  width:50%;
}

.book-info-bookinfo div:nth-child(2) {
  display:flex;
  justify-content:flex-end;
}

.book-info-description{
  border-top: var(--m-common-border-style);
  padding-top: 8px;
  overflow-wrap: break-word;
}

/* ----- ブック情報 | 目次 ----- */

.bookindex-lists li a{
  height: auto !important;
  min-height: 60px !important;
  position: relative;
}

.bookindex-color{
  width: 10px;
  height: 100%;
  position: absolute;
}

.bookindex-text{
  width: 100%;
  padding-left: 16px;
  padding-right: 8px;
  text-align: left;
  word-break: break-word;
}

/* ----- ブック情報 | 関連素材 ----- */

.book-assets-contents {
  display:flex;
  flex-direction:column;
  row-gap:8px;
  overflow:hidden;
}

.book-assets-header-menubox {
  display:flex;
  align-items:center;
  -moz-column-gap:16px;
       column-gap:16px;
  padding:8px;
}

.book-assets-icon {
  display:block;
  height:-moz-fit-content;
  height:fit-content;
  width:100%;
  align-items:center;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  text-align:center;
  font-size:0.75rem;
  line-height:1rem;
}

.book-assets-icon[data-type="image"]{
  background-color :var(--m-icon-contents-image-bg-color);
  color: var(--m-icon-contents-image-text-color);
  border-radius : var(--m-badge-round);
}

.book-assets-icon[data-type="movie"]{
  background-color :var(--m-icon-contents-movie-bg-color);
  color: var(--m-icon-contents-movie-text-color);
  border-radius : var(--m-badge-round);
}

.book-assets-icon[data-type="audio"]{
  background-color :var(--m-icon-contents-audio-bg-color);
  color: var(--m-icon-contents-audio-text-color);
  border-radius : var(--m-badge-round);
}

.book-assets-icon[data-type="file"]{
  background-color :var(--m-icon-contents-file-bg-color);
  color: var(--m-icon-contents-file-text-color);
  border-radius : var(--m-badge-round);
}

.book-assets-icon[data-type="html"]{
  background-color :var(--m-icon-contents-html-bg-color);
  color: var(--m-icon-contents-html-text-color);
  border-radius : var(--m-badge-round);
}

.book-assets-lists {
  display:flex;
  flex-direction:column;
}

.book-assets-lists-sort {
  display:grid;
  text-decoration-line:none;
  grid-template-columns: 50px 80px 1fr 100px;
  border-bottom: var(--m-common-list-border-style);
}

.book-assets-lists-sort > div {
  display:flex;
  min-height:50px;
  align-items:center;
  padding:8px;
}

.content-sort {
  display:flex;
  align-items:center;
}

.book-assets-lists-row {
  display:grid;
  text-decoration-line:none;
  grid-template-columns: 50px 80px 1fr 80px;
  border-bottom: var(--m-common-list-border-style);
}

.book-assets-lists-row > div {
  display:flex;
  min-height:50px;
  align-items:center;
  padding:8px;
}

.book-assets-lists div:nth-child(1) {
  justify-content:center;
}

.book-assets-lists div:nth-child(2) {
  justify-content:center;
}

.book-assets-lists div:nth-child(3) {
  word-break:break-all;
  text-align:left;
}

.book-assets-lists div:nth-child(4) {
  justify-content:flex-end;
}

.book-assets-pageno {
  display:inline-block;
  padding:4px;
  background-color: var(--m-btn-secondary-bg-color);
  border-radius : var(--m-common-round);
}

/* ----- サイドメニュー ----- */

.btn-sidebar {
  display:flex;
  height:32px;
  width:32px;
  align-items:center;
  justify-content:center;
}

.btn-sidebar-toggle-box {
  margin-top:4px;
  margin-bottom:16px;
  display:flex;
  height:32px;
  width:100%;
  justify-content:flex-end;
}

.btn-sidebar-toggle{
  background-color : var(--m-sidemenu-toggle-bg-color);
  border-radius : var(--m-sidemenu-toggle-round);
  border-style: 	var(--m-sidemenu-toggle-border-style);
  border-width: 	var(--m-sidemenu-toggle-border-width);
  border-color: 	var(--m-sidemenu-toggle-border-color);
}

/* sidebar */

.sidebar {
  position:fixed;
  bottom:0px;
  height:calc(100vh - var(--sm-nav-height) - var(--footer-height));
  overflow-x:hidden;
  overflow-y:scroll;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:24px;
  padding-right:10px;
  text-align:center;
  display : none;
}

@media (min-width: 768px) {
  .sidebar {
    top:70px;
    left:0px;
    display:inline-block;
    height:calc(100dvh - 70px - var(--footer-height));
  }
}

.sidebar{
  background-color :var(--m-sidemenu-bg-color);
}

.sidebar-inner {
  position:absolute;
  width:calc(var(--m-sidebar-width) - 42px);
}

@media (hover: hover) and (pointer: fine){
  .sidebar {
    overflow-y:hidden;
  }

  .sidebar:hover {
    overflow-y:scroll;
  }
}

.sidebar::-webkit-scrollbar-track {
  display: none;
}

.sidebar.default {
  width:var(--m-sidebar-width);
}

.sidebar.expanded {
  width:var(--m-sidebar-width);
  animation: anim-sidebar 300ms;
}

@keyframes anim-sidebar {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(0px);
  }
}

.category-box {
  clear:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:1rem;
  margin-bottom:1.25rem;
  width:100%;
  font-size:0.875rem;
  line-height:1.25rem;
}

@media (min-width: 768px) {
  .category-box {
    position:relative;
    float:right;
  }
}

.banner-box {
  position:relative;
  clear:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:1.75rem;
  margin-bottom:12px;
  width:100%;
  font-size:0.875rem;
  line-height:1.25rem;
  display : none;
}

@media (min-width: 768px) {
  .banner-box {
    display:flex;
  }
}

.banner-lists {
  display:flex;
  flex-direction:column;
  row-gap:0.5rem;
}

.banner-item {
  display:flex;
  min-width: auto;
}

.banner {
  display:flex;
}

.menubox {
  clear:left;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

@media (min-width: 768px) {
  .menubox {
    position:relative;
  }
}

@media (min-width: 1024px) {
  .menubox {
    float:right;
  }
}

/* 左メニューの項目名 */

.menubox-title-style{
  background-color: var(--m-sidemenu-title-bg-color);
  border-style: var(--m-sidemenu-title-border-style);
  border-width: var(--m-sidemenu-title-border-width);
  border-color: var(--m-sidemenu-title-border-color);
  border-radius : var(--m-sidemenu-title-round);
  padding: var(--m-sidemenu-title-padding);
}

/* 左メニューの小項目名 */

.menubox-sub-title-style {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  background-color: var(--m-sidemenu-sub-title-bg-color);
  border-style: var(--m-sidemenu-sub-title-border-style);
  border-width: var(--m-sidemenu-sub-title-border-width);
  border-color: var(--m-sidemenu-sub-title-border-color);
  border-radius : var(--m-sidemenu-sub-title-round);
  padding: var(--m-sidemenu-sub-title-padding);
}

/* 左メニューの項目名大 */

.menubox-title {
  clear:left;
  text-align:left;
  font-size:1rem;
  line-height:1.5rem;
  font-weight:700;
}

.menubox-body {
  padding:0.25rem;
  text-align:left;
}

.menubox-form {
  width:100%;
  max-width:24rem;
}

.menubox-inputbox {
  display:flex;
  align-items:center;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.menubox-inputbox input[type="text"] {
  height:32px;
  width:100%;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border-width:1px;
  border-color:var(--m-input-border-color);
  background-color:var(--m-input-bg-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.menubox-inputbox input[type="text"]:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.menubox-inputbox input[type="text"]{
  border-top-left-radius : var(--m-input-serch-round);
  border-bottom-left-radius : var(--m-input-serch-round);
}

.menubox-inputbox button {
  height:32px;
  flex-shrink:0;
  background-color:var(--m-btn-primary-bg-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  font-size:0.875rem;
  line-height:1.25rem;
  color:var(--m-btn-primary-text-color);
  border-top-right-radius : var(--m-input-serch-round);
  border-bottom-right-radius : var(--m-input-serch-round);
}

.menubox-more {
  margin-bottom:0.5rem;
  width:100%;
  padding-right:0.5rem;
  text-align:right;
  font-size:0.875rem;
  line-height:1.25rem;
}

.menubox-more a {
  text-decoration-line:underline;
}

.keywordsearch-more {
  position:relative;
  padding-right:16px;
}

.keywordsearch-more::after {
  position:absolute;
  top:2px;
  right:0px;
  display:block;
  height:12px;
  width:14px;
  --tw-bg-opacity:1;
  background-color:rgb(31 41 55 / var(--tw-bg-opacity));
}

.menubox:not(.expanded) .keywordsearch-more::after{
  content: '';
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

.menubox.expanded .keywordsearch-more::after{
  content: '';
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.menubox.expanded .keywordsearchbox-optionmenu {
  display:block;
}

.menubox:not(.expanded) .keywordsearchbox-optionmenu {
  display : none;
}

.keywordsearchbox-optionmenu-title {
  clear:left;
  margin-top:1rem;
  margin-bottom:0.5rem;
  text-align:left;
  font-weight:700;
}

.keywordsearchbox-optionmenu-title-s {
  clear:left;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  text-align:left;
  font-size:0.875rem;
  line-height:1.25rem;
}

.keywordsearchbox-optionmenu-body {
  padding:0.25rem;
  text-align:left;
}

.keywordsearchbox-optionmenu-body[data-type="search_page_filter"] label {
  font-size:0.875rem;
  line-height:1.25rem;
}

.lbl-radio:nth-child(2) {
  margin-left:0.5rem;
}

.keywordsearchbox-optionmenu-form {
  width:100%;
  max-width:24rem;
}

.keywordsearchboxx-optionmenu-inputbox {
  display:flex;
  align-items:center;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.keywordsearchboxx-optionmenu-inputname {
  clear:left;
  display:flex;
}

.search-pulldown {
  display:block;
  height:32px;
  width:100%;
}

.search-button-box {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  padding:0.25rem;
  text-align:left;
}

.search-input-style{
  border-radius : var(--m-input-serch-round);
}

.search-input {
  height:32px;
  width:100%;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border-width:1px;
  border-color:var(--m-input-border-color);
  background-color:var(--m-input-bg-color);
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  line-height:1.25;
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity));
}

.search-input:focus {
  outline:2px solid transparent;
  outline-offset:2px;
}

.search-button {
  height:36px;
  width:64px;
  border-radius:0.25rem;
  background-color:var(--m-btn-secondary-bg-color) !important;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:0.5rem;
  padding-right:0.5rem;
  text-align:center;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity));
  background-color :var(--m-btn-sidebar-bg-color);
  border-radius : var(--m-common-round);
}

.link-news-list {
  width:100%;
  padding-right:0.5rem;
  text-align:right;
  font-size:0.875rem;
  line-height:1.25rem;
}

.link-news-list a {
  text-decoration-line:underline;
}

.menu-title {
  clear:left;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  text-align:left;
  font-size:18px;
  font-weight:700;
}

/* カテゴリーツリー */

.menubox-category-lists {
  display:flex;
  width:100%;
  flex-direction:column;
  text-align:left;
}

.menubox-category-lists  li  a {
  display:flex;
  min-height:50px;
  width:100%;
  align-items:center;
  justify-content:space-between;
  text-decoration-line:none;
  border-bottom: var(--m-sidemenu-category-border-style);
}

.menubox-category-lists  li  a:hover{
  background-color:var(--m-sidemenu-category-hover-bg-color);
}

.menubox-category-lists  li  a > span {
  display:block;
  width: -moz-fit-content;
  width: fit-content;
  word-break: break-all;
  padding-right: 8px;
}

.menubox-category-lists ul.closed{
  max-height: 0;
  opacity: 0;
  transition: all .2s ease-in;
}

.menubox-category-lists ul:not(.closed){
  transition: all .2s ease-in;
  opacity: 1;
}

.menubox-category-lists  .cate-l2 a {
  padding-left:16px;
}

.menubox-category-lists  .cate-l2 a:hover{
  background-color:var(--m-sidemenu-category-hover-bg-color);
}

.menubox-category-lists  .cate-l3  a {
  padding-left:32px;
}

.menubox-category-lists  .cate-l3 a:hover{
  background-color:var(--m-sidemenu-category-hover-bg-color);
}

.icon-menubox-category-lists .closed {
  display : none;
}

.sideber-news-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.newsbox-item-box{
  padding-bottom: 8px;
  padding-top: 8px;
}

.newsbox-item-box:not(:first-child){
  border-top:var(--m-newslist-border-style);
}

/* ----- お知らせ ----- */

/* お知らせ欄 */

.newsbox {
  clear:left;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:8px;
  width:100%;
}

@media (min-width: 768px) {
  .newsbox {
    position:relative;
  }
}

@media (min-width: 1024px) {
  .newsbox {
    float:right;
  }
}

.newsbox-info {
  margin-top:8px;
  margin-bottom:24px;
  width:100%;
  text-align:right;
}

.newsbox-item {
  padding-left:8px;
  padding-right:8px;
  padding-top:16px;
  padding-bottom:16px;
  text-align:left;
  line-height:1.5;
}

.menu-sm .newsbox-item:first-child {
  border-top-width:1px;
}

.menu-sm .newsbox-item {
  border-bottom-width:1px;
}

.news-date {
  margin-top:8px;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:700;
}

/* お知らせ一覧 */

.news-contents {
  width:100%;
}

.news-items {
  display:flex;
  flex-direction:column;
}

.news-item {
  display:flex;
  -moz-column-gap:16px;
       column-gap:16px;
  padding-left:8x;
  padding-right:8x;
  padding-top:16px;
  padding-bottom:16px;
  border-top: var(--m-newslist-border-style);
}

.news-item:last-child{
  border-bottom: var(--m-newslist-border-style);
}

.news-item-date {
  display:flex;
  min-width:100px;
  font-weight:700;
}

.news-item-title {
  display:flex;
  word-break: break-word;
}

.news-item-text {
  display:flex;
  word-break: break-word;
}

.news-title{
  word-break: break-word;
}

.news-text{
  word-break: break-word;
}

.news-item-body {
  display:flex;
  flex-direction:column;
}

/* ----- ピックアップ ----- */

/* [表示数に依存] */

.recommend-books-area {
  position:relative;
  grid-column-start:1;
  grid-column-end:var(--m-grid-md-col-end);
  display:flex;
  height:400px;
  width:100%;
  scroll-snap-type:x var(--tw-scroll-snap-strictness);
  -moz-column-gap:0.25rem;
       column-gap:0.25rem;
  padding-left:0px;
  padding-right:0px;
}

@media (min-width: 768px) {
  .recommend-books-area {
    grid-column-end:var(--m-grid-md-col-end);
    height:400px;
    -moz-column-gap:2.5rem;
         column-gap:2.5rem;
    padding-left:24px;
    padding-right:24px;
  }
}

@media (min-width: 1024px) {
  .recommend-books-area {
    grid-column-end:var(--m-grid-lg-col-end);
  }
}

@media (min-width: 1280px) {
  .recommend-books-area {
    grid-column-end:var(--m-grid-xl-col-end);
  }
}

@media (min-width: 1536px) {
  .recommend-books-area {
    grid-column-end:var(--m-grid-2xl-col-end);
  }
}

@media (min-width: 1920px) {
  .recommend-books-area {
    grid-column-end:var(--m-grid-3xl-col-end);
  }
}

.recommend-books-area{
  background-color :var(--m-recommend-bg-color);
}

.recommend-books {
  position:relative;
  display:flex;
  height:400px;
  width:100%;
  scroll-snap-type:x var(--tw-scroll-snap-strictness);
  -moz-column-gap:0.25rem;
       column-gap:0.25rem;
  overflow-y:hidden;
  overflow-x:scroll;
}

@media (min-width: 768px) {
  .recommend-books {
    height:400px;
    -moz-column-gap:2.5rem;
         column-gap:2.5rem;
    overflow:hidden;
  }
}

/* [表示数に依存] */

@media (min-width: 768px) {
  .content.expanded .recommend-books-area {
    grid-column-end:var(--m-grid-expanded-md-col-end);
  }
}

@media (min-width: 1024px) {
  .content.expanded .recommend-books-area {
    grid-column-end:var(--m-grid-expanded-lg-col-end);
  }
}

@media (min-width: 1280px) {
  .content.expanded .recommend-books-area {
    grid-column-end:var(--m-grid-expanded-xl-col-end);
  }
}

@media (min-width: 1536px) {
  .content.expanded .recommend-books-area {
    grid-column-end:var(--m-grid-expanded-2xl-col-end);
  }
}

@media (min-width: 1920px) {
  .content.expanded .recommend-books-area {
    grid-column-end:var(--m-grid-expanded-3xl-col-end);
  }
}

.page.detail .recommend-books-area {
  grid-column-start:1;
  grid-column-end:3;
}

.page.detail .recommend-books {
  grid-column-start:1;
  grid-column-end:3;
}

.recommend-menu{
  position: absolute;
  z-index: 1000;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  top:calc(340px / 2);
  height:32px;
  width:32px;
  cursor:pointer;
}

@media (min-width: 768px) {
  .recommend-menu {
    top:calc(420px / 2);
  }
}

.recommend-menu{
  background-color :var(--m-btn-recommend-caret-bg-color);
  border-radius : var(--m-common-round);
  display: none;
}

.recommend-menu[data-type="left"]{
  left: 12px;
}

.recommend-menu[data-type="right"]{
  right: 12px;
}

.recommend-menu svg {
  height:100%;
  width:100%;
  stroke:#fff;
}

/*
 画像1件分
*/

.recommend-book-thumbnail {
  position:relative;
  display:flex;
  width:calc(100% / 2);
  flex-shrink:0;
  scroll-snap-align:start;
  flex-direction:column;
  align-items:center;
  padding-top:4px;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail {
    width:auto;
  }
}

.recommend-book-thumbnail-basebox {
  position:relative;
  display:flex;
  max-height:330px;
  width:var(--m-book-thumbnail-width);
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail-basebox {
    max-height:330px;
    width:210px;
  }
}

.recommend-book-thumbnail-imagebox {
  position:relative;
  display:flex;
  height:280px;
  width:var(--m-book-thumbnail-width);
  align-items:center;
  justify-content:center;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail-imagebox {
    height:280px;
    width:210px;
  }
}

.recommend-book-thumbnail-imagebox img{
  border :var(--m-book-thumb-box-border-style);
}

/* ブックのサムネイルオーバーメニュー */

.recommend-book-thumbnail-menubox {
  position:absolute;
  top:24px;
  display:flex;
  height:280px;
  width:var(--m-book-thumbnail-width);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-items:center;
  row-gap:6px;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail-menubox {
    height:280px;
    width:210px;
  }
}

.recommend-book-thumbnail-menubox{
  background-color: var(--m-thumb-menu-box-bg-color);
  display : none;
}

@media (hover: hover) and (pointer: fine){
  .recommend-book-thumbnail-basebox:hover .recommend-book-thumbnail-menubox {
    display:flex;
  }
}

/* ブックのサムネイルオーバーメニューボタン */

.recommend-book-thumbnail-menu {
  display:flex;
  width:80%;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:0.875rem;
  line-height:1.25rem;
  background-color :var(--m-thumb-menu-bg-color);
  border-radius : var(--m-thumb-menu-round);
  color : var(--m-thumb-menu-text-color);
  font-weight: var(--m-thumb-menu-text-weight);
}

@media (hover: hover) and (pointer: fine){
  .recommend-book-thumbnail-menu:hover{
    background-color :var(--m-thumb-menu-hover-bg-color);
    color : var(--m-thumb-menu-hover-text-color);
    cursor: pointer;
  }
}

.recommend-book-thumbnail-iconbox {
  position:relative;
  display:flex;
  height:24px;
  width:var(--m-book-thumbnail-width);
  align-items:center;
  justify-content:flex-end;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail-iconbox {
    width:210px;
  }
}

.recommend-book-thumbnail-icon {
  position:absolute;
  z-index:30;
  display:flex;
  height:var(--m-book-icon-height);
  width:var(--m-book-icon-width);
  align-items:center;
  justify-content:center;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:0.25rem;
  padding-right:0.25rem;
  text-align:center;
  font-size:0.75rem;
  line-height:1rem;
  border-radius : var(--m-book-icon-round);
  top: var(--m-recommend-book-icon-top);
}

.recommend-book-thumbnail-icon[data-type="new"]{
  background-color :var(--m-icon-new-bg-color);
  color: var(--m-icon-new-text-color);
}

.recommend-book-thumbnail-icon[data-type="update"]{
  background-color :var(--m-icon-update-bg-color);
  color: var(--m-icon-update-text-color);
}

.recommend-book-thumbnail-image {
  max-height:100%;
  max-width:100%;
  border-radius : var(--m-book-thumb-round);
}

.recommend-book-thumbnail-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-top:0.25rem;
  width:var(--m-book-thumbnail-width);
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:0.25rem;
  padding-right:0.25rem;
  padding-top:2px;
  padding-bottom:2px;
  font-size:1rem;
  line-height:1.5rem;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail-title {
    width:210px;
  }
}

.recommend-book-thumbnail-categorybox {
  display:flex;
  height:28px;
  width:var(--m-book-thumbnail-width);
  align-items:center;
}

@media (min-width: 768px) {
  .recommend-book-thumbnail-categorybox {
    width:210px;
  }
}

.recommend-book-thumbnail-category-icon{
  overflow: hidden;
  white-space: nowrap;
  cursor:pointer;
  text-overflow:ellipsis;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  font-size:0.75rem;
  line-height:1rem;
  background-color :var(--m-badge-category2-bg-color);
  border:var(--m-badge-category2-border-style);
  border-radius : var(--m-badge-category2-round);
}

@media (hover: hover) and (pointer: fine){
  .recommend-book-thumbnail-category-icon:hover{
    opacity: .5;
  }
}

.m-menu-active:active{
  background-color: var(--m-menu-active-bg-color);
}

@media (hover: hover) and (pointer: fine){
  .m-menu-active:hover{
    background-color: var(--m-menu-active-bg-color);
    opacity: .5;
  }
}

.m-menu-active-1:active{
  opacity: .5;
}

@media (hover: hover) and (pointer: fine){
  .m-menu-active-1:hover{
    opacity: .5;
  }
}

.m-menu-active-2:active{
  opacity: .5;
}

@media (hover: hover) and (pointer: fine){
  .m-menu-active-2:hover{
    opacity: .5;
    cursor: pointer;
  }
}

.m-menu-active-textlink:active{
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine){
  .m-menu-active-textlink:hover{
    text-decoration: none;
  }
}

nav {
  position:absolute;
  left:0px;
  display:flex;
  height:var(--sm-nav-height);
  width:100vw;
  align-items:center;
  justify-content:space-between;
  --tw-bg-opacity:1;
  background-color:rgb(254 242 242 / var(--tw-bg-opacity));
  background-color:var(--m-nav-bg-color);
  padding-left:8px;
  padding-right:8px;
  padding-bottom:5px;
  color:var(--m-nav-text-color);
}

@media (min-width: 768px) {
  nav {
    height:70px;
  }
}

nav{
  z-index: 500;
}

.nav-contents {
  position:relative;
  float:left;
  width:100%;
  justify-content:space-between;
  display : none;
}

@media (min-width: 768px) {
  .nav-contents {
    display:flex;
  }
}

@media (min-width: 1024px) {
  .nav-contents {
    width:calc(100% - var(--m-header-logo--box-width));
  }
}

.nav-contents-sm {
  display:flex;
  -moz-column-gap:8px;
       column-gap:8px;
  padding-right:0.5rem;
}

@media (min-width: 768px) {
  .nav-contents-sm {
    display:none;
  }
}

.nav-contents-sm span {
  display:flex;
  height:40px;
  width:40px;
  align-items:center;
  justify-content:center;
  border-radius:0.125rem;
}

.nav-contents-sm span i {
  display:flex;
}

.header-logobox {
  display:flex;
  width:200px;
  flex-shrink:0;
  align-items:center;
}

@media (min-width: 1024px) {
  .header-logobox {
    width:var(--m-header-logo--box-width);
  }
}

.header-logo {
  height:32px;
  width:170px;
}

@media (min-width: 768px) {
  .header-logo {
    height:40px;
  }
}

.header-logo img {
  height:32px;
}

@media (min-width: 768px) {
  .header-logo img {
    height:40px;
  }
}

.nav-contents-left {
  display:block;
  width:50%;
}

@media (min-width: 768px) {
  .nav-contents-left {
    display:flex;
    align-items:center;
  }
}

.navi-menu {
  display:flex;
  -moz-column-gap:0.25rem;
       column-gap:0.25rem;
  font-size:0.875rem;
  line-height:1.25rem;
}

@media (min-width: 1024px) {
  .navi-menu {
    flex-grow:1;
  }
}

.navi-menu a {
  display:block;
}

@media (min-width: 1024px) {
  .navi-menu a {
    margin-right:1rem;
    margin-top:0px;
    display:inline-block;
  }
}

.nav-menu-style {
  box-sizing:border-box;
  height:36px;
  padding:0.5rem;
  border-radius : var(--m-nav-menu-hover-round);
  border-style: var(--m-nav-menu-border-style);
  border-width: var(--m-nav-menu-border-width);
  border-color: var(--m-nav-menu-border-color);
}

@media (hover: hover) and (pointer: fine){
  .nav-menu-style:hover{
    background-color: var(--m-nav-menu-hover-bg-color);
    color:var(--m-nav-menu-hover-text-color);
    border-radius : var(--m-nav-menu-hover-round);
    border-style: var(--m-nav-menu-hover-border-style);
    border-width: var(--m-nav-menu-hover-border-width);
    border-color: var(--m-nav-menu-hover-border-color);
  }
}

.nav-contents-right {
  position:static;
  right:0px;
  word-break:keep-all;
}

@media (min-width: 768px) {
  .nav-contents-right {
    display:flex;
  }
}

.nav-contents-right{
  min-width: 330px;
  width: auto;
}

.nav-contents-right-menu {
  display:flex;
  width:100%;
  justify-content:flex-end;
  -moz-column-gap:0.25rem;
       column-gap:0.25rem;
  font-size:0.875rem;
  line-height:1.25rem;
}

@media (min-width: 768px) {
  .nav-contents-right-menu {
    align-items:center;
  }
}

.nav-fooer-border1 {
  position:absolute;
  bottom:0px;
  box-sizing:content-box;
  display:flex;
  width:100%;
  background-color: var(--m-nav-border1-bg-color);
  height:var(--m-nav-border1-height);
  left: 0;
}

.nav-fooer-border2 {
  position:absolute;
  box-sizing:content-box;
  display:flex;
  width:100%;
  background-color: var(--m-nav-border2-bg-color);
  height:var(--m-nav-border2-height);
  left: 0;
  bottom:calc(var(--m-nav-border1-height) + var(--m-nav-border2-bottom));
}

.pulldown-language {
  margin-right:0.25rem;
  display:block;
  width:10rem;
}

.main {
  position:relative;
  display:flex;
  width:100%;
  flex-wrap:wrap;
}

@media (min-width: 768px) {
  .main {
    flex-direction:row-reverse;
  }
}

.content {
  position:fixed;
  left:0px;
  top:var(--sm-nav-height);
  height:calc(100dvh - var(--sm-nav-height) - var(--footer-height));
  width:100%;
  flex-direction:column;
  overflow-y:scroll;
  padding:8px;
}

@media (min-width: 768px) {
  .content {
    left:var(--m-sidebar-width);
    top:70px;
    margin-left:auto;
    margin-right:auto;
    height:calc(100dvh - 70px - var(--footer-height));
    width:calc(100vw - var(--m-sidebar-width));
  }
}

.content{
  background-color :var(--m-content-bg-color);
}

.content.expanded {
  left:0px;
  width:100%;
  animation: anim-content-expand 300ms;
}

.content.closed {
  width:calc(100vw - var(--m-sidebar-width));
}

@keyframes anim-content-expand {
  0% {
    transform: translateX(var(--m-sidebar-width));
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes anim-content-closed {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(0px);
  }
}

.content-bannerbox {
  position:relative;
  max-height:300px;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  overflow:hidden;
  overflow-x:scroll;
  display : none;
}

@media (min-width: 768px) {
  .content-bannerbox {
    display:flex;
  }
}

.content-bannerbox {
  /* IE, Edge 対応 */
  -ms-overflow-style: none;
  /* Firefox 対応 */
  scrollbar-width: none;
}

/* Chrome, Safari 対応 */

.content-bannerbox::-webkit-scrollbar {
  display:none;
}

/* スマホ用バナートップエリア */

.sp-content-bannerbox {
  position:relative;
  display:flex;
  max-height:300px;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  overflow:hidden;
}

@media (min-width: 768px) {
  .sp-content-bannerbox {
    display:none;
  }
}

/* スマホ用バナーフッターエリア */

.sp-content-bannerbox-footer {
  position:relative;
  margin-top:32px;
  margin-bottom:32px;
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

@media (min-width: 768px) {
  .sp-content-bannerbox-footer {
    display:none;
  }
}

/* スマホ用バナースクロールエリア */

.sp-content-bannerscroll {
  position:relative;
  display:flex;
  width:100%;
  gap:0.5rem;
  overflow:hidden;
  overflow-x:scroll;
}

@media (min-width: 768px) {
  .sp-content-bannerscroll {
    display:none;
  }
}

.sp-content-bannerscroll{
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sp-content-bannerscroll::-webkit-scrollbar{
  display:none;
}

.content-bannerbox-menu{
  position: absolute;
  z-index: 1000;
  transform: translateY(-50%);
  top:calc(100% / 2);
  height:32px;
  width:32px;
}

@media (min-width: 768px) {
  .content-bannerbox-menu {
    display:none;
  }
}

.content-bannerbox-menu{
  background-color :var(--m-btn-recommend-caret-bg-color);
  border-radius : var(--m-common-round);
}

.content-bannerbox-menu[data-type="left"]{
  left: 0%;
}

.content-bannerbox-menu[data-type="right"]{
  right: 0%;
}

.content-bannerbox-menu i {
  height:100%;
  width:100%;
  stroke:#fff;
}

.sp-content-bannerbox .banner-item{
  flex: 1 0 100%;
  align-items:center;
  justify-content:center;
}

.content-bannerbox .banner-item img, .sp-content-bannerbox .banner-item img{
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.content-header {
  margin-top:4px;
  display:flex;
  width:100%;
  flex-direction:column;
}

.content-nav {
  display:flex;
  height:32px;
  width:100%;
}

.page-title-box {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
}

.page-title{
  font-style: var(--m-pagetitle-font-style);
  font-size: var(--m-pagetitle-font-size);
  line-height: var(--m-pagetitle-lineheight);
  word-break: break-word;
}

.menu-change_display {
  display:flex;
  height:90px;
  width:100%;
  flex-direction:column;
  row-gap:8px;
}

@media (min-width: 768px) {
  .menu-change_display {
    display:grid;
    height:44px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:center;
    justify-content:space-between;
  }
}

.menu-change_display-left {
  justify-content:flex-start;
  display : none;
}

@media (min-width: 768px) {
  .menu-change_display-left {
    display:flex;
  }
}

.menu-change_display-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.menu-change_display-sm {
  display:flex;
  width:100%;
}

@media (min-width: 768px) {
  .menu-change_display-sm {
    display:none;
  }
}

.menu-change_display-sm .pulldown-sm {
  width:100%;
}

.btn-change_display_mode {
  cursor:pointer;
}

.pulldown-sort {
  display:block;
  width:120px;
  font-size:0.875rem;
  line-height:1.25rem;
}

/* ----- スマートフォン メニュー ----- */

.menu-sm {
  position:absolute;
  top:var(--sm-nav-height);
  z-index:1000;
  height:calc(100dvh - var(--sm-nav-height) - var(--footer-height));
  width:100%;
  flex-direction:column;
  overflow-y:scroll;
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity));
  padding:8px;
  display : none;
}

.btn-sm-nav-menu {
  position:relative;
  border-radius : var(--m-common-round);
}

.btn-sm-nav-menu.selected{
  background-color :var(--m-menu-navi-active-bg-color);
  border-radius : var(--m-menu-navi-active-round);
  outline: var(--m-menu-navi-active-border-width) var(--m-menu-navi-active-border-style) var(--m-menu-navi-active-border-color);
  outline-offset: calc(var(--m-menu-navi-active-border-width) * -1);
}

.menu-sm-info {
  display:flex;
  height:60px;
  width:100%;
  padding:8px;
  border-bottom: var(--m-common-border-style);
}

.menu-sm-info > * {
  display:flex;
  align-items:center;
}

.menu-sm .user-icon {
  height:auto;
  width:44px;
  justify-content:flex-start;
  margin-left: -8px;
}

.user-name{
}

.menu-sm-title {
  clear:left;
  display:flex;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  text-align:left;
  font-size:18px;
  font-weight:700;
}

.menu-sm-lists {
  display:flex;
  flex-direction:column;
}

.menu-sm-list-item {
  display:grid;
  height:70px;
  grid-template-columns:1fr 44px;
  align-items:center;
  padding:8px;
  border-bottom: var(--m-common-border-style);
}

.menu-sm-list-item > * {
  display:flex;
  height:100%;
  align-items:center;
}

.menu-sm-list-item span {
  width:44px;
  justify-content:center;
}

:root {
  --skin-svg: url('data:image/svg+xml;charset=utf8,');
}

.icon-thumbnail{
  background-image: url('./sprites.svg');
  /* background-image     : var(--skin-svg); */
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -34px -34px;
  float             : left;
  width             : 32px;
  height            : 32px;
}

.icon-detail{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: 0 -34px;
  float             : left;
  width             : 32px;
  height            : 32px;
}

/* ページトップに戻る */

.icon-caret-up{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* 下 */

.icon-caret-down{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -34px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* 左 */

.icon-caret-left{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -68px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* 右 */

.icon-caret-right{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -102px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* 二重左 */

.icon-shift-left{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -136px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* 二重右 */

.icon-shift-right{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -170px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* マイナス */

.icon-minus{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -204px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* プラス */

.icon-plus{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -238px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* X */

.icon-xmark{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -272px 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 0;
  left : 0;
}

/* X */

.icon-xmark-m{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -272px 0;
  transform            : scale(calc(24/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 1px;
  left : 1px;
}

/* X */

.icon-xmark-s{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -272px 0;
  transform            : scale(calc(16/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 1px;
  left : 1px;
}

/* X スマホヘッダー用 */

.icon-xmark-sm{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -272px 0;
  transform            : scale(calc(40/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 0;
  left : 0;
}

/* question */

.icon-question{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -68px -34px;
  transform            : scale(calc(16/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 0;
  left : 0;
}

/* bars */

.icon-bars{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -102px -34px;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* bars */

.icon-bars-sm{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -102px -34px;
  transform            : scale(calc(40/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 0;
  left : 0;
}

/* search */

.icon-search{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -136px -34px;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* search */

.icon-search-sm{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -136px -34px;
  transform            : scale(calc(40/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 0;
  left : 0;
}

/* bell */

.icon-bell{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -170px -34px;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* bell */

.icon-bell-sm{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -170px -34px;
  transform            : scale(calc(40/32));
  transform-origin     : 0 0;
  width             : 32px;
  height            : 32px;
  display: flex;
  position: absolute;
  top: 0;
  left : 0;
}

/* user */

.icon-user{
  background-image: url('./sprites.svg');
  background-size      : 304px 100px;
  background-repeat : no-repeat;
  background-position: -204px -34px;
  width             : 32px;
  height            : 32px;
  display: flex;
}

/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

::backdrop {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

.ml-1 {
  margin-left:0.25rem;
}

.mr-1 {
  margin-right:0.25rem;
}

.mr-3 {
  margin-right:0.75rem;
}

.hidden {
  display:none;
}

.text-sm {
  font-size:0.875rem;
  line-height:1.25rem;
}