@charset "UTF-8";

/* ////////// Reset Stylesheet ////////// */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
* {
  box-sizing: border-box;
}
body {
  line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}
ul {
  list-style:none;
  margin: 0;
  padding: 0;
}
blockquote, q {
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
table th, table td {
  vertical-align: top;
  text-align: left;
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
input, select {
  vertical-align:middle;
}
input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}



/* ********** FONT ********** */

/* @font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
} */
:root {
  --font-family-gothicOLD: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-family-minchoOLD: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;

  --font-family-gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-family-mincho: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.style--mincho {
  font-family: var(--font-family-mincho);
}
.style--gothic {
  font-family: var(--font-family-gothic);
}

html {
  font-size: 87.5%; /*14px*/
}
body {
  line-height: 1.8;
  font-family: var(--font-family-gothic);
  color: #777777;
}
/* -------- Apply Gothic -------- */
.style--font-gothic ,
.page-link , .page-back , .page-top ,
.container--selling-point h3 ,
.container--info-list .col-body ,
.container--footer-map ,
.container--company-info ,
.container--site-copyright ,
.container--section-breadcrumb ,
.container--item-relation .col-body {
  /* font-family:
  -apple-system, BlinkMacSystemFont,
  "Helvetica Neue", HelveticaNeue,
  "Segoe UI",
  "游ゴシック体", YuGothic, "Yu Gothic M",
  "游ゴシック Medium", "Yu Gothic Medium",
  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
  "メイリオ", Meiryo,
  Osaka,
  "ＭＳ Ｐゴシック", "MS PGothic",
  sans-serif; */
}
/* -------- Apply Mincho -------- */
/* .syle--font-mincho {
  font-family:
  "游明朝体", "YuMincho",
  "游明朝", "Yu Mincho",
  "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3,
  "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
  "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
  "HGS明朝E",
  "ＭＳ Ｐ明朝", "MS PMincho",
  serif;
} */



/* ////////// Common ////////// */

@media only screen and (min-width: 768px) {
  .sp-only {
  display: none;
  }
}
@media only screen and (max-width: 767px) {
  .pc-only {
  display: none;
  }
}
@media only screen and (max-width: 767px) {
  body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    /* top: 0px; */
  }
}
input, textarea {
  font-size: 16px;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a ,
a:visited {
  /* text-decoration: none;
  color: #777777;
  transition: color 0.2s ease-out; */
  color: currentColor;
}
a:hover ,
a:focus {
  text-decoration: underline;
  /* color: #000000; */
  opacity: 0.7;
}
input::placeholder {
  color: #bbb;
}
input:-ms-input-placeholder {
  color: #bbb;
}
input::-ms-input-placeholder {
  color: #bbb;
}
input.switch {
  display: none;
}


:root {
  /* --color-green: #21bd69; */
  /* --color-green-light: #cddfd6; */
  /* --color-green-dark: #308658; */
  --color-warning: #d22222;
  --color-black-light: rgba(0,0,0,0.2);
  --color-gray: #eeeeee;

  /* --color-green-light: rgba(249, 245, 235, 1); */
  /* --color-green: #8c456f; */
  /* --color-green-dark: #8c456f; */

  --color-theme-light: rgb(249, 245, 235);
  --color-theme-midtone: #c83d8f;
  --color-theme-dark: #8c456f;

  --color-footer-base: #f9f5eb;
  --color-footer-border: #8c456f;
}

:root {
  --border-radius: 4px;
}

/* ////////// Structure ////////// */

#stage {}
#row {}
#col {}



/* ////////// Style ////////// */

@media (max-width: 420px) {
}
@media (max-width: 768px) {
}

/* ========== mystyle ========== */
.mystyle {}






html, body {
  height: 100%;
}
#stage {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  min-height: 100%;
}
#stage #footer {
  flex-grow: 1;
}
#header {
  /* background-color: #cccccc; */
}
#main {
  /* outline: 1px solid yellow; */
}
#aside {
  /* outline: 1px solid blue; */
}
#footer {
  /* background-color: #cccccc; */
}




/* ========== .layout ========== */

/* ---------- .layout--sidebar ---------- */
.layout--sidebar > .wrapper {
  display: flex;
}
.layout--sidebar > .wrapper,
.layouts--fullwidth .container > .areas {
  /* width: 80%; */
  /* max-width: 1280px; */
  margin: 0 auto;
}
.layout--sidebar .container--aside {
  width: 320px;
  margin-top: 20px;
}
.layout--sidebar > .wrapper > *:first-child {
  flex-grow: 1;
}
.layout--sidebar > .wrapper > *:last-child {
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 30px;
}
.layout--sidebar .container--content {
  margin-top: 20px;
}
/* ---------- .layout--narrow ---------- */
.layout--narrow > .wrapper {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
}
/* ---------- .layout--single ---------- */
.layout--single > .wrapper {
  width: 80%;
  max-width: 920px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .layout--sidebar > .wrapper {
    flex-direction: column;
  }
  .layout--sidebar > .wrapper,
  .layouts--fullwidth .container > .areas {
    width: 100%;
  }
  .layout--sidebar .container--aside {
    width: 100%;
  }
  .layout--sidebar > .wrapper > *:last-child {
    margin-left: unset;
  }
  .layout--single > .wrapper {
    width: 100%;
    padding: 0 10px;
  }
}

.layouts--single .container {
  width: 80%;
  max-width: 920px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .layouts--single .container {
    width: 100%;
    padding: 0 10px;
  }
}

.sp-only {
  display: none;
}
@media only screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: inherit;
  }
}





.header-block {
  padding: 10px;
}
.header-block .headline {
  margin-bottom: 0.5em;
  font-size: 150%;
}
@media only screen and (max-width: 767px) {
  .header-block .headline {
    font-size: 120%;
  }
}





/* ========== .container--header ========== */

.container--header {
  /* border-bottom: 2px solid #21bd69; */
}
.container--header .blocks--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  /* border-bottom: 1px solid var(--color-green); */
  border-bottom: 1px solid var(--color-theme-midtone);
}
.container--header .block {
  /* flex-basis: 30%; */
}
.container--header .block-body {
  /* flex-basis: 100%; */
}
.container--header .block > .items {
  display: flex;
  align-items: center;
  gap: 10px;
}
.container--header .block .item--catch {
  line-height: 1.4;
  color: var(--color-theme-dark);
}
.container--header .block-foot > .items {
  justify-content: flex-end;
}
/* ---------- .logo ---------- */
.container--header .box--logo {
  /* padding: 5px; */
  /* text-align: center; */
}
.container--header .box--logo a {
  display: inline-block;
}
.container--header .box--logo a img {
  width: auto;
  max-height: 48px;
}
@media only screen and (max-width: 767px) {
  .container--header .box--logo a img {
    max-height: 32px;
  }
}



/* ========== .container--nav ========== */

.container--nav {
  padding: 0.5em 0;
  border-bottom: 2px solid #21bd69;
  text-align: center;
}
.container--nav .menu-box .items {
  display: inline-flex;
  white-space: nowrap;
}
.container--nav .menu-box a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0.5em 1.5em;
  border-radius: 999px;
  line-height: 1.2;
  font-size: 125%;
  color: #000000;
}
.container--nav .menu-box a:hover {
  background-color: rgb(75, 192, 192);
  color: #ffffff;
}
.container--nav .menu-box .selected a {
  background-color: rgb(75, 192, 192);
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .container--nav {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .container--nav .menu-box .items {
    margin: 0 10px;
  }
  .container--nav .menu-box a {
    font-size: 100%;
  }
}



/* ========== .container--search ========== */
XXX.blocks--search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  /* background-color: #21bd69; */
}
XXX.blocks--search-bar > * {
  flex-basis: 30%;
}
XXX.blocks--search-bar .block-body {
  flex-basis: 100%;
  text-align: center;
  /* color: #ffffff; */
  color: #21bd69;
}
XXX.blocks--search-bar .items {
  display: flex;
  align-items: center;
  gap: 10px;
}
XXX.blocks--search-bar .block-foot .items {
  justify-content: flex-end;
}
XXX.blocks--search {
  position: relative;
}
XXX.blocks--search .block-body {
  overflow: hidden;
  background-color: #21bd69;
  background-color: #ffffff;
}
XXX.blocks--search .accordion-wrapper {
  position: absolute;
  top: 0;
  /* left: 0; */
  width: 100%;
  z-index: 1;
}
XXX.blocks--search .accordion-wrapper::after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: rgba(0,0,0,0.1);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}
XXX.blocks--search .accordion-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  /* width: 100%; */
  width: 400px;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
  z-index: 1;
}
.blocks--search {
  padding: 20px;
}
.blocks--search .tag-box {
}





.box--menu-user .box-body {
  position: relative;
}
.box--menu-user .panel {
  overflow: hidden;
  position: absolute;
  right: 0;
  display: none;
  width: 280px;
  background-color: #ffffff;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 1;
}
#switch--menu-user:checked ~ * .box--menu-user .panel {
  display: block;
}
.box--menu-user .open--menu-user {
  /* outline: 2px solid red; */
}
.box--menu-user .open--menu-user svg {
  width: 24px;
  outline: none;
}
.box--menu-user .close--menu-user {
  display: none;
}
@media only screen and (max-width: 767px) {
  .box--menu-user .panel {
    position: fixed;
    top: 0;
    right: -100vw;
    display: block;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff;
    box-shadow: none;
    border-radius: 0px;
    z-index: 100;
    transition: all 0.3s ease-out;
  }
  #switch--menu-user:checked ~ * .box--menu-user .panel {
    right: 0;
  }
  .box--menu-user .close--menu-user {
    position: absolute;
    top: 10px;
    right: 10px;
    display: initial;
  }
}


.box--menu-user .panel-head {
  padding: 20px;
  background-color: var(--color-theme-light);
  font-weight: bold;
  font-size: 15px;
  color: #000000;
}
.box--menu-user .panel-body {
  padding: 20px;
  background-color: #ffffff;
}
.box--menu-user .items {
}
.box--menu-user .items li:not(:last-child) {
  border-bottom: solid 1px rgba(0,0,0,0.1);
  list-style: none;
}
.box--menu-user .items .warning,
.box--menu-user .items .warning a {
  color: var(--color-warning);
}
.box--menu-user .items a,
.box--menu-user .items label {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}

.usermenu--button {
  display: block;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-theme-light);
  width: 1.0em;
  height: 1.0em;
  font-size: 32px;
  color: var(--color-theme-dark);
  overflow: hidden;
}
.usermenu--button::before,
.usermenu--button::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: currentColor;
  content: "";
}
.usermenu--button::before {
  top: 0.15em;
  width: 0.4em;
  height: 0.4em;
}
.usermenu--button::after {
  bottom: -0.4em;
  width: 0.8em;
  height: 0.8em;
}
.button--login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  padding: 0.2em 0.5em;
  background-color: var(--color-theme-dark);
  border-radius: 4px;
}
.button--login,
.button--login:hover,
.button--login:visited {
  text-decoration: none;
  color: #ffffff;
}



/* label.button { */
  /* display: inline-block;
  width: 20px;
  height: auto;
  vertical-align: bottom;
  line-height: 1; */
/* } */
svg.icon {
  display: inline-block;
  width: 20px;
  height: auto;
  vertical-align: bottom;
  line-height: 1;
}


/* ---------- .box--search ---------- */
.blocks--result-search {
  /* width: 80%; */
  max-width: 640px;
  margin: 0 auto;
}
.blocks--search .search-bar,
.blocks--result-search .search-bar {
  display: flex;
  align-items: flex-start;
}
.blocks--search .box--search,
.blocks--result-search .box--search {
  flex-grow: 1;
  position: relative;
  max-width: 100%;
}
.blocks--search .search-close,
.blocks--result-search .search-close {
  display: none;
  margin-left: 20px;
}
.box--search input[type=search] {
  width: 100%;
  padding: 0.5em 1.0em;
  padding-left: 3.0em;
  background-color: #ffffff;
  border-radius: 999px;
  border: 2px solid #e6e6e6;
}
.box--search input[type=search]:focus {
  /* border-color: #0b9c4e; */
  border-color: var(--color-theme-dark);
}
.box--search .search-icon {
  position: absolute;
  top: 50%;
  left: 0.75em;
  transform: translate(0, -50%);
}
.box--search .panel {
  display: none;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
  border-radius: 5px;
  z-index: 1;
}
.box--search input[type=search]:focus ~ .panel {
  display: block;
}
.box--search .panel .body {
  padding: 20px;
}
.box--search .panel .title {
  margin-bottom: 1.0em;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.box--search .panel a {
  color: var(--color-theme-dark);
}
@media only screen and (max-width: 767px) {
  .blocks--search {
    position: fixed;
    top: 0;
    right: -100vw;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff;
    z-index: 100;
    transition: all 0.3s ease-out;
  }
  #switch--search:checked ~ * .blocks--search {
    right: 0;
  }
  .blocks--search .search-close {
    display: block;
  }
}


.blocks--result-search {
  /* width: 80%; */
  max-width: 640px;
  margin: 0 auto;
}
.blocks--result-search .search-bar {
  display: flex;
  align-items: flex-start;
}
.blocks--result-search .box--search {
  flex-grow: 1;
  position: relative;
  max-width: 100%;
}
.blocks--result-search .search-close {
  display: none;
  margin-left: 20px;
}
@media only screen and (max-width: 767px) {
  .blocks--result-search {
    padding: 10px;
  }
  .blocks--result-search .search-bar {
  }
}





/* ---------- .tag-box ---------- */
.blocks--search .tag-box,
.blocks--result-search .tag-box {
  margin: 1.0em auto;
  padding: 0.5em;
  border-radius: var(--border-radius);
  background-color: #eeeeee;
}
.blocks--search .tag-box .title,
.blocks--result-search .tag-box .title {
  padding: 0.25em 0.5em;
  opacity: 0.6;
  line-height: 1;
}
.blocks--search .tag-box .tag-list,
.blocks--result-search .tag-box .tag-list {
  display: inline-block;
}
@media only screen and (max-width: 767px) {

}




.tag-list {
  line-height: 1.4;
}
.tag-list > li {
  display: inline-block;
}
.tag-list .label {
  display: inline-block;
  /* margin-right: -0.5em; */
  padding: 0.25em 0.5em;
  border-radius: 999px;
  line-height: 1;

}
.tag-list a {
  text-decoration: none;
  /* color: #ffffff; */
}
.tag-list a:hover .label {
  /* background-color: rgba(33, 189, 105, 0.5); */
  background-color: #ffffff;
  /* color: #21bd69; */
  color: var(--color-theme-dark);
}


.blocks--banner {
  padding: 20px;
}
.blocks--banner .item {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .blocks--banner {
    padding: 5px;
  }
  .items--banner {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
  }
  .blocks--banner .item {
    flex-basis: 50%;
    margin-bottom: initial;
    /* padding: 0 10px; */
    padding: 5px;
  }
}

/* .blocks--search2 {
  position: relative;
  padding: 20px;
}
.blocks--search2 .tag-box .title {

}
.blocks--search2 .tag-box a {
  color: var(--color-green);
}
@media only screen and (max-width: 767px) {
  .blocks--banner {
  }

} */



/* .container--search {
  position: relative;
  background-color: #bae2ee;
}
.container--search-compact .anim-box,
.container--search-compact .catch-box {
  display: none !important;
}
.container--search .areas {
  overflow: hidden;
  position: relative;
}
.container--search .area-head {
  position: absolute;
  width: 100%;
  height: 100%;
} */
/* ---------- .search-block ---------- */
/* .container--search .search-block {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .container--search .search-block {
    margin: 0 10px;
  }
} */
/* ---------- .catch-box ---------- */
/* .container--search .catch-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  padding-top: 1.0em;
  font-weight: bold;
  font-size: 34px;
  color: #0b9c4e;
} */
/* @media only screen and (max-width: 767px) {
  .container--search .catch-box {
    height: 100px;
    font-size: 150%;
  }
} */
/* ---------- .box--search ---------- */
/* .container--search .box--search {
  position: relative;
  width: 400px;
  max-width: 100%;
  margin: 1.0em auto;
}
.container--search .box--search input[type=search] {
  width: 100%;
  padding: 0.75em 1.0em;
  padding-left: 3.0em;
  background-color: #ffffff;
  border-radius: 999px;
  border: 2px solid #0b9c4e;
}
.container--search .box--search .search-icon {
  position: absolute;
  top: 50%;
  left: 0.75em;
  transform: translate(0, -50%);
} */
/* ---------- .tag-box ---------- */
/* .container--search .tag-box {
  margin: 1.0em auto;
  text-align: center;
}
.container--search .tag-box .tag-list {
  display: inline-block;
} */
/* ---------- .anim-box ---------- */
/* .container--search .anim-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.container--search .anim-box .item {
  position: absolute;
}
.container--search .anim-box .item img {
  width: 100%;
  height: auto;
  animation-iteration-count: infinite;
}
.container--search .anim-box .item-01 {
  bottom: 20%;
  left: 20%;
  width: 100px;
  filter: blur(0px);
  opacity: 1;
}
.container--search .anim-box .item-01 img {
  animation-name: item-01-animation;
  animation-delay: 0s;
  animation-duration: 15s;
} */
@keyframes item-01-animation {
  0%   { transform: translate3d(0, 0, 0); }
  5%  { transform: scale(1.1, 0.9)
         translate3d(20%, -100%, 0)
         rotate(15deg); }
  30% { transform: translate3d(10%, -50%, 0); }
  35%  { transform: scale(1.1, 0.9)
         translate3d(-30%, -150%, 0)
         rotate(-15deg); }
  70% { transform: translate3d(0, 0, 0); }
  75%  { transform: scale(1.1, 0.9)
        translate3d(0, -100%, 0)
        rotate(15deg); }
  100% { transform: translate3d(0, 0, 0); }
}
@media only screen and (max-width: 767px) {
  XXX.container--search .anim-box .item-01 {
    bottom: unset;
    top: 25%;
    left: 10%;
    width: 60px;
  }
}
XXX.container--search .anim-box .item-02 {
  bottom: 25%;
  right: 10%;
  width: 100px;
  filter: blur(0px);
  opacity: 1;
}
XXX.container--search .anim-box .item-02 img {
  animation-name: item-02-animation;
  animation-delay: 1s;
  animation-duration: 18s;
}
@keyframes item-02-animation {
  0%   { transform: translate3d(0, 0, 0); }
  5%  { transform: scale(1.1, 0.9)
         translate3d(-20%, -100%, 0)
         rotate(-15deg); }
  30% { transform: translate3d(-10%, -50%, 0); }
  35%  { transform: scale(1.1, 0.9)
         translate3d(-30%, -150%, 0)
         rotate(15deg); }
  70% { transform: translate3d(0, 0, 0); }
  75%  { transform: scale(1.1, 0.9)
        translate3d(0, -100%, 0)
        rotate(-15deg); }
  100% { transform: translate3d(0, 0, 0); }
}
@media only screen and (max-width: 767px) {
  XXX.container--search .anim-box .item-02 {
    bottom: unset;
    top: 25%;
    right: 5%;
    width: 60px;
  }
}
XXX.container--search .anim-box .item-03 {
  bottom: 30%;
  right: 25%;
  width: 60px;
  filter: blur(1px);
  opacity: 1;
}
XXX.container--search .anim-box .item-03 img {
  animation-name: item-03-animation;
  animation-delay: 2s;
  animation-duration: 18s;
}
@keyframes item-03-animation {
  0%   { transform: translate3d(0, 0, 0); }
  5%  { transform: scale(1.1, 0.9)
         translate3d(-20%, -100%, 0)
         rotate(-15deg); }
  30% { transform: translate3d(-10%, -50%, 0); }
  35%  { transform: scale(1.1, 0.9)
         translate3d(-30%, -150%, 0)
         rotate(15deg); }
  70% { transform: translate3d(0, 0, 0); }
  75%  { transform: scale(1.1, 0.9)
        translate3d(0, -100%, 0)
        rotate(-15deg); }
  100% { transform: translate3d(0, 0, 0); }
}
@media only screen and (max-width: 767px) {
  XXX.container--search .anim-box .item-03 {
    bottom: unset;
    top: 30%;
    right: 35%;
    width: 40px;
  }
}
/* ---------- .search-icon ---------- */
.search-icon {
  position: relative;
  display: inline-block;
  width: 1.0em;
  height: 1.0em;
  color: #999999;
  font-size: 20px;
}
.search-icon::before {
  content: '';
  position: absolute;
  bottom: 0px;
  right: -0.1em;
  width: 0.2em;
  height: 0.6em;
  box-sizing: border-box;
  background-color: currentColor;
  border-radius: 0.1em;
  transform-origin: center bottom;
  transform: rotate(-45deg);
}
.search-icon::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0.8em;
  height: 0.8em;
  box-sizing: border-box;
  border: 0.2em solid currentColor;
  border-radius: 50%;
}




/* ========== .style--column ========== */
.container--column {
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .container--column {
    width: 640px;
  }
}
.container--column .blocks--series ,
.container--column .blocks--chapter,
.container--column .blocks--share ,
.container--column .blocks--column {
  width: 80%;
  margin: 0 auto;
}
.container--column .area-head {
  margin: 3.0em auto 1.0em;
}
.container--column .blocks--column .block-head {
  margin-top: 4.0em;
  margin-bottom: 4.0em;
}
@media only screen and (max-width: 767px) {
  .container--column .blocks--series ,
  .container--column .blocks--chapter,
  .container--column .blocks--share ,
  .container--column .blocks--column {
    width: unset;
    margin: 0 20px;
  }
}
/* ---------- .blocks--series ---------- */
.container--column .blocks--series {}
.container--column .blocks--series .headline {
  line-height: 1.4;
  font-size: 250%;
}
.container--column .blocks--series .author {
  font-size: 200%;
  line-height: 1.4;
}
.container--column .blocks--series .description {
  font-size: 90%;
  line-height: 1.4;
}
.container--column .blocks--series .description p {
  margin: 0.5em 0;
}
@media only screen and (max-width: 767px) {
  .container--column .blocks--series .headline {
    font-size: 180%;
  }
  .container--column .blocks--series .author {
    font-size: 150%;
  }
}
/* ---------- .blocks--chapter ---------- */
.container--column .blocks--chapter {
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  padding: 1.0em 1.5em;
  background-color: #f6f6ef;
  border-radius: 0.5em;
}
/* ---------- .blocks--like ---------- */
.container--column .blocks--like {
  margin-top: 4.0em;
  margin-bottom: 2.0em;
}
/* ---------- .blocks--share ---------- */
.container--column .blocks--share--large {
  justify-content: center;
  margin-bottom: 2.0em;
}
/* ---------- .blocks--author ---------- */
.container--column .blocks--author {
  display: flex;
  margin-top: 6em;
  padding: 2em 3em;
  background-color: #eeeeee;
  border-radius: 0.5em;
  line-height: 1.6;
}
.container--column .blocks--author .name {
  margin-bottom: 0.5em;
  font-weight: bold;
}
.container--column .blocks--author .name .kana {
  font-weight: normal;
}
.container--column .blocks--author .block-foot {
  width: 25%;
  min-width: 25%;
  margin-left: 2.0em;
}
.container--column .blocks--author figure {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0;
  padding-bottom: 100%;
}
.container--column .blocks--author img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
@media only screen and (max-width: 767px) {
  .container--column .blocks--author {
    flex-direction: column;
    align-items: center;
  }
  .container--column .blocks--author .block-body {
    order: 2;
  }
  .container--column .blocks--author .block-foot {
    order: 1;
    width: 50%;
    margin-left: unset;
    margin-bottom: 1.0em;
  }
}
/* ---------- .blocks--cover ---------- */
.container--column .blocks--cover {
  margin: 1.0em 0;
}
.container--column .blocks--cover figure {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.container--column .blocks--cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
/* ---------- .blocks--next ---------- */
.container--column .blocks--next {
  margin-bottom: 2.0em;
  text-align: center;
}
.container--column .blocks--next a span ,
.container--column .blocks--next a:hover span {
  text-decoration: none;
}
.container--column .blocks--next .block-head {
  text-align: center;
}
.container--column .blocks--next .block-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
.container--column .blocks--next .block-body .back-wrapper {
  flex-shrink: 0;
}
.container--column .blocks--next .prev ,
.container--column .blocks--next .next {
  position: relative;
  display: inline-block;
  padding-top: 0.6em;
  padding-bottom: 0.4em;

  background-color: #bae2ee;
  line-height: 1;
}
.container--column .blocks--next .prev {
  margin-right: 1.0em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}
.container--column .blocks--next .next {
  padding-left: 1.0em;
  padding-right: 1.0em;
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.container--column .blocks--next .prev::after ,
.container--column .blocks--next .next::after {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 1.4em;
  height: 1.4em;
  background-color: #bae2ee;
  border-top-right-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
  z-index: 0;
}
.container--column .blocks--next .prev::after {
  left: 0;
  transform: translate(-50%,-50%) rotate(45deg);
}
.container--column .blocks--next .next::after {
  right: 0;
  transform: translate(50%,-50%) rotate(45deg);
}
.container--column .blocks--next .prev .number ,
.container--column .blocks--next .next .number {
  position: absolute;
  top: 50%;
  left: 0.25em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em;
  background-color: #ffffff;
  border-radius: 0.25em;
  transform: translate(0,-50%);
  z-index: 1;
}
.container--column .blocks--next .prev .label ,
.container--column .blocks--next .next .label {
  position: relative;
  display: inline-block;
  text-align: left;
  z-index: 1;
}
.container--column .blocks--next .prev .label {
  /* padding-right: 1.25em; */
}
.container--column .blocks--next .next .label {
  padding-left: 1.6em;
}
.container--column .blocks--next .back {
  position: relative;
  display: inline-block;
  padding: 0.6em 1.5em 0.4em;
  background-color: #bae2ee;
  border-radius: 0.25em;
  line-height: 1;
  text-decoration: none;
}
/* ---------- .blocks--column ---------- */
.container--column .blocks--column .title {
  line-height: 1.2;
  font-size: 140%;
  color: var(--color-theme-dark)
}
.container--column .blocks--column p {
  margin-bottom: 2.0em;
}
/* ---------- .blocks--column figure ---------- */
.container--column .blocks--column figure {
  margin: 1.0em 0 2.0em;
}
.container--column .blocks--column figure.small {
  margin: 2.0em 20%;
}
.container--column .blocks--column figure.medium {}
.container--column .blocks--column figure.large {
  margin: 2.0em -12.5%;
}
@media only screen and (max-width: 767px) {
  .container--column .blocks--column figure.large {
    margin: 2.0em -20px;
  }
}

.container--column .blocks--column .embed-video {
  margin: 1.0em 0 2.0em;
}
.container--column .blocks--column .embed-video.small {
  margin: 2.0em 20%;
}
.container--column .blocks--column .embed-video.medium {}
.container--column .blocks--column .embed-video.large {
  margin: 2.0em -12.5%;
}
@media only screen and (max-width: 767px) {
  .container--column .blocks--column .embed-video.large {
    margin: 2.0em -20px;
  }
}







/* ========== .style--column ========== */
.style--column {
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .style--column {
    width: 640px;
  }
}
.style--column .series-block ,
.style--column .chapter-block,
.style--column .share-block ,
.style--column .column-block {
  width: 80%;
  margin: 0 auto;
}
.style--column .area-head {
  margin: 3.0em auto 1.0em;
}
.style--column .column-block .block-head {
  margin-top: 4.0em;
  margin-bottom: 4.0em;
}
@media only screen and (max-width: 767px) {
  .style--column .series-block ,
  .style--column .chapter-block,
  .style--column .share-block ,
  .style--column .column-block {
    width: unset;
    margin: 0 20px;
  }
}
/* ---------- .series-block ---------- */
.style--column .series-block {}
.style--column .series-block .headline {
  line-height: 1.4;
  font-size: 250%;
}
.style--column .series-block .author {
  font-size: 200%;
  line-height: 1.4;
}
.style--column .series-block .description {
  font-size: 90%;
  line-height: 1.4;
}
.style--column .series-block .description p {
  margin: 0.5em 0;
}
@media only screen and (max-width: 767px) {
  .style--column .series-block .headline {
    font-size: 180%;
  }
  .style--column .series-block .author {
    font-size: 150%;
  }
}
/* ---------- .chapter-block ---------- */
.style--column .chapter-block {
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  padding: 1.0em 1.5em;
  background-color: #f6f6ef;
  border-radius: 0.5em;
}
/* ---------- .like-block ---------- */
.style--column .like-block {
  margin-top: 4.0em;
  margin-bottom: 2.0em;
}
/* ---------- .share-block ---------- */
.style--column .share-block--large {
  margin-bottom: 2.0em;
}
/* ---------- .author-block ---------- */
.style--column .author-block {
  display: flex;
  margin-top: 6em;
  padding: 2em 3em;
  background-color: #eeeeee;
  border-radius: 0.5em;
  line-height: 1.6;
}
.style--column .author-block .name {
  margin-bottom: 0.5em;
  font-weight: bold;
}
.style--column .author-block .name .kana {
  font-weight: normal;
}
.style--column .author-block .block-foot {
  width: 25%;
  margin-left: 2.0em;
}
.style--column .author-block figure {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0;
  padding-bottom: 100%;
}
.style--column .author-block img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
@media only screen and (max-width: 767px) {
  .style--column .author-block {
    flex-direction: column;
    align-items: center;
  }
  .style--column .author-block .block-body {
    order: 2;
  }
  .style--column .author-block .block-foot {
    order: 1;
    width: 50%;
    margin-left: unset;
    margin-bottom: 1.0em;
  }
}
/* ---------- .cover-block ---------- */
.style--column .cover-block {
  margin: 1.0em 0;
}
.style--column .cover-block figure {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.style--column .cover-block img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
/* ---------- .next-block ---------- */
.style--column .next-block {
  margin-bottom: 2.0em;
  text-align: center;
}
.style--column .next-block a span ,
.style--column .next-block a:hover span {
  text-decoration: none;
}
.style--column .next-block .block-head {
  text-align: center;
}
.style--column .next-block .block-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
.style--column .next-block .block-body .back-wrapper {
  flex-shrink: 0;
}
.style--column .next-block .prev ,
.style--column .next-block .next {
  position: relative;
  display: inline-block;
  padding-top: 0.6em;
  padding-bottom: 0.4em;

  background-color: #bae2ee;
  line-height: 1;
}
.style--column .next-block .prev {
  margin-right: 1.0em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}
.style--column .next-block .next {
  padding-left: 1.0em;
  padding-right: 1.0em;
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.style--column .next-block .prev::after ,
.style--column .next-block .next::after {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 1.4em;
  height: 1.4em;
  background-color: #bae2ee;
  border-top-right-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
  z-index: 0;
}
.style--column .next-block .prev::after {
  left: 0;
  transform: translate(-50%,-50%) rotate(45deg);
}
.style--column .next-block .next::after {
  right: 0;
  transform: translate(50%,-50%) rotate(45deg);
}
.style--column .next-block .prev .number ,
.style--column .next-block .next .number {
  position: absolute;
  top: 50%;
  left: 0.25em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em;
  background-color: #ffffff;
  border-radius: 0.25em;
  transform: translate(0,-50%);
  z-index: 1;
}
.style--column .next-block .prev .label ,
.style--column .next-block .next .label {
  position: relative;
  display: inline-block;
  text-align: left;
  z-index: 1;
}
.style--column .next-block .prev .label {
  /* padding-right: 1.25em; */
}
.style--column .next-block .next .label {
  padding-left: 1.6em;
}
.style--column .next-block .back {
  position: relative;
  display: inline-block;
  padding: 0.6em 1.5em 0.4em;
  background-color: #bae2ee;
  border-radius: 0.25em;
  line-height: 1;
  text-decoration: none;
}
/* ---------- .column-block ---------- */
.style--column .column-block .title {
  line-height: 1.2;
  font-size: 140%;
  color: var(--color-theme-dark)
}
.style--column .column-block p {
  margin-bottom: 2.0em;
}
/* ---------- .column-block figure ---------- */
.style--column .column-block figure {
  margin: 1.0em 0 2.0em;
}
.style--column .column-block figure.small {
  margin: 2.0em 20%;
}
.style--column .column-block figure.medium {}
.style--column .column-block figure.large {
  margin: 2.0em -12.5%;
}
@media only screen and (max-width: 767px) {
  .style--column .column-block figure.large {
    margin: 2.0em -20px;
  }
}



/* ========== .like-block ========== */

.like-block {}
.like-block .block-body {
  display: flex;
  justify-content: center;
}
.like-block a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.like-block .shoulder {
  position: relative;
  margin-bottom: 1.0em;
  padding: 0.5em 1.0em;
  border: 1px solid #666;
  border-radius: 0.5em;
  line-height: 1.0em;
}
.like-block .shoulder strong {
  position: relative;
  z-index: 1;
}
.like-block .shoulder::after {
  content: '';
  position: absolute;
  left: 50%;
  display: block;
  width: 1.0em;
  height: 1.0em;
  transform: translate(-50%,0) rotate(45deg);
  background-color: #ffffff;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}
.like-block .icon {}
.like-block .icon img {
  width: 4.0em;
}
.like-block .number {
  line-height: 1.4;
}
.like-block .mode--on .number {
  color: #e44849;
}
.like-block .icon-on {
  display: none;
}
.like-block a:hover .icon-on {
  display: inherit;
}
.like-block .icon-off {
  display: inherit;
}
.like-block a:hover .icon-off {
  display: none;
}
.like-block .mode--on .icon-on {
  display: inherit;
}
.like-block .mode--on .icon-off {
  display: none;
}



/* ========== .blocks--like ========== */

.blocks--like {}
.blocks--like .block-body {
  display: flex;
  justify-content: center;
}
.blocks--like a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.blocks--like .shoulder {
  position: relative;
  margin-bottom: 1.0em;
  padding: 0.5em 1.0em;
  border: 1px solid #666;
  border-radius: 0.5em;
  line-height: 1.0em;
}
.blocks--like .shoulder strong {
  position: relative;
  z-index: 1;
}
.blocks--like .shoulder::after {
  content: '';
  position: absolute;
  left: 50%;
  display: block;
  width: 1.0em;
  height: 1.0em;
  transform: translate(-50%,0) rotate(45deg);
  background-color: #ffffff;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}
.blocks--like .icon {}
.blocks--like .icon img {
  width: 4.0em;
}
.blocks--like .number {
  line-height: 1.4;
}
.blocks--like .mode--on .number {
  color: #e44849;
}
.blocks--like .icon-on {
  display: none;
}
.blocks--like a:hover .icon-on {
  display: inherit;
}
.blocks--like .icon-off {
  display: inherit;
}
.blocks--like a:hover .icon-off {
  display: none;
}
.blocks--like .mode--on .icon-on {
  display: inherit;
}
.blocks--like .mode--on .icon-off {
  display: none;
}



.style--mail {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .style--mail {
    width: unset;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
/* ---------- .link-box ---------- */
.style--mail .link-box {
  margin-top: 3.0em;
  text-align: center;
}
.style--mail .link-box a {
  text-decoration: underline;
  /* color: #21bd69; */
  color: var(--color-theme-dark);
}
/* ---------- .agree-box ---------- */
.style--mail .agree-box {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .style--mail .agree-box {
    margin-bottom: 30px;
  }
}
/* ---------- #agreecheck ---------- */
.style--mail #agreecheck[type=checkbox] + label {
  position: relative;
  display: inline-block;
  padding: 1.0em 2.0em;
  padding-left: 3.0em;
  background-color: #eeeeee;
  border-radius: 5px;
}
.style--mail #agreecheck[type=checkbox]:checked + label {
  background-color: #bae2ee;
}
.style--mail #agreecheck[type=checkbox] + label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.0em;
  width: 1.5em;
  height: 1.5em;
  background-color: #ffffff;
  border-radius: 0.75em;
  transform: translate(0,-50%);
}
.style--mail #agreecheck[type=checkbox] + label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.0em;
  display: block;
  width: 0.75em;
  height: 1.0em;
  transform: translate(40%,-80%) rotate(45deg);
  background-color: transparent;
  border-right: 5px solid #dddddd;
  border-bottom: 5px solid #dddddd;
  opacity: 0;
}
.style--mail #agreecheck[type=checkbox]:checked + label::after {
  border-right-color: #21bd69;
  border-bottom-color: #21bd69;
  opacity: 1;
}


/* ---------- input[type=radio] ---------- */
.style--mail input[type=radio] + label {
  position: relative;
  display: inline-block;
  margin-right: 1.0em;
  margin-bottom: 0.5em;
  padding-left: 2.0em;
}
.style--mail input[type=radio]:checked + label {
  color: #21bd69;
}
.style--mail input[type=radio] + label::before {
  content: '';
  position: absolute;
  /* top: 50%; */
  /* top: 0.25em; */
  top: 0;
  left: 0;
  width: 1.5em;
  height: 1.5em;
  background-color: #ffffff;
  border-radius: 999px;
  border: 1px solid #cccccc;
  /* transform: translate(0,-50%); */
}
.style--mail input[type=radio] + label::after {
  content: '';
  position: absolute;
  /* top: 50%; */
  top: 0.25em;
  left: 0.25em;
  width: 1.0em;
  height: 1.0em;
  background-color: #21bd69;
  border-radius: 999px;
  border: 1px solid #dddddd;
  /* transform: translate(0,-50%); */
  opacity: 0;
}
.style--mail input[type=radio]:checked + label::after {
  opacity: 1;
}
/* ---------- .form-block ---------- */
.style--mail .form-block {
  text-align: center;
}
.style--mail .form-block .block-body {
  /* width: 80%; */
  margin: 50px auto;
  padding: 0 30px;
  background-color: #ffffff;
  box-shadow: 0px 2px 10px rgb(0 0 0 / 20%);
  border-radius: 5px;
  border: 1px solid #dddddd;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .style--mail .form-block .block-body {
    /* margin-left: -10px; */
    /* margin-right: -10px; */
    margin: 10px auto 30px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/* ---------- .input-table ---------- */
.style--mail .form-block .input-table {
  width: 100%;
}
.style--mail .form-block .input-table th ,
.style--mail .form-block .input-table td {
  padding: 1.0em 0;
}
.style--mail .form-block .input-table th {
  padding-right: 1.5em;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .style--mail .form-block .input-table ,
  .style--mail .form-block .input-table tbody ,
  .style--mail .form-block .input-table tr ,
  .style--mail .form-block .input-table th ,
  .style--mail .form-block .input-table td {
    display: block;
  }
  .style--mail .form-block .input-table th {
    padding-bottom: 0;
  }
}
.style--mail .form-block input[type=text] ,
.style--mail .form-block textarea {
  width: 100%;
  padding: 1.0em;
  border-radius: 5px;
  border: 1px solid #cccccc;
}
.style--mail .form-block textarea {
  height: 10.0em;
}

.style--mail .form-block .required {}
.style--mail .form-block .required > * {
  display: inline-block;
  padding: 0.5em;
  background-color: #e44849;
  border-radius: 5px;
  line-height: 1.0;
  font-size: 90%;
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .style--mail .form-block .title {
    display: inline-block;
  }
  .style--mail .form-block .required {
    display: inline-block;
  }
}
/* .style--mail .form-block .required::before {
  content: "\A" ;
  white-space: pre ;
} */
.style--mail .form-block .guide-box {
  margin-top: 30px;
  margin-bottom: 30px;
}
.style--mail .form-block .input-box {
  margin-top: 30px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .style--mail .form-block .input-box {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.style--mail .arrange--horizontal {
  display: flex;
}
.style--mail .arrange--horizontal > *:not(:first-child) {
  margin-left: 0.5em;
}
.style--mail .arrange--vertical {
  display: flex;
  flex-direction: column;
}
.style--mail .arrange--vertical > *:not(:first-child) {
  margin-top: 0.5em;
}
.style--mail .arrange--wrap {
  display: flex;
  flex-wrap: wrap;
}


.style--mail .error-box {
  padding: 1em;
  margin-left: -30px;
  margin-right: -30px;
  background-color: #ffac00;
  border-radius: 0 0 5px 5px;
  text-align: center;
  color: #ffffff;
}
.style--mail .error-box .error-list {
  display: inline-block;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .style--mail .error-box {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.style--mail .chara-box {
  padding-top: 80px;
  text-align: center;
}
.style--mail .chara-box img {
  width: 80%;
  max-width: 120px;
  height: auto;
  animation-name: floating-animation-kurage;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}


.contact-block {
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 2em;
  background-color: rgb(255, 250, 207);
  border-radius: 5px;
  border: 1px dashed rgb(231, 220, 123);
}
.contact-block .headline {
  margin-bottom: 1.0em;
  font-size: 120%;
  color: #ffac00;
}

.arrange-button-box {
  display: flex;
  align-items: center;
}
.arrange-button-box > * {
  flex-basis: 100%;
  /* outline: 1px solid blue; */
}
.arrange-button-box > *:first-child {
  text-align: left;
}
.arrange-button-box > *:last-child {
  text-align: right;
}
.arrange-button-box .button-main a ,
.arrange-button-box .button-main button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px;
  /* background-color: #21bd69; */
  background-color: var(--color-theme-midtone);
  border-radius: 999px;
  line-height: 1;
  font-weight: bold;
  font-size: 120%;
  color: #ffffff;
}
.arrange-button-box .button-main button:disabled {
  background-color: #cccccc;
  color: #dddddd;
}
.arrange-button-box .button-main > * span {
  display: block;
  border: 3px solid #fff;
  width: 100%;
  height: 100%;
  padding: 0.75em 2.0em;
  border-radius: 999px;
}
.arrange-button-box .button-sub a ,
.arrange-button-box .button-sub button {
  position: relative;
  display: inline-block;
  padding: 0.5em 2em;
  border-radius: 999px;
  background-color: rgba(0,0,0,0.25);
  color: #ffffff;
  transition: all 0.2s ease-out;
}
.arrange-button-box .button-sub a:hover,
.arrange-button-box .button-sub button:hover {
  background-color: rgba(0,0,0,0.5);
}
.arrange-button-box .button-back a ,
.arrange-button-box .button-back button {
  padding-left: 3.0em;
}
.arrange-button-box .button-back a > *::before ,
.arrange-button-box .button-back button > *::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 1.0em;
  width: 0.5em;
  height: 0.5em;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: translate(0, -50%) rotate(45deg);
}
.arrange-button-box .button-next a ,
.arrange-button-box .button-next button {
  padding-right: 3.0em;
}
.arrange-button-box .button-next a > *::before ,
.arrange-button-box .button-next button > *::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 1.0em;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translate(0, -50%) rotate(45deg);
}
@media only screen and (max-width: 767px) {
  .arrange-button-box {
    flex-direction: column;
  }
  .arrange-button-box > * {
    order: 2;
    margin-bottom: 1.0em;
  }
  .arrange-button-box .button-main {
    order: 1;
  }
}










.container--breadcrumb {
  background-color: #ffffff;
  padding: 0.5em 0;
}
.container--breadcrumb .breadcrumb-list {
  display: flex;
  padding-left: 1.0em;
}
.container--breadcrumb .breadcrumb-list > li > * {
  display: inline-block;
}
.container--breadcrumb .breadcrumb-list > li > a {
  position: relative;
  padding-right: 2em;
}
.container--breadcrumb .breadcrumb-list > li > a::after {
  content: '';
  display: block;
  position: absolute;
  top: 0.6em;
  right: 1.0em;
  width: 0.4em;
  height: 0.4em;
  border-style: solid;
  border-color: #000000;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}
.container--breadcrumb .breadcrumb-list > li > a:hover {
  text-decoration: underline;
  color: blue;
}
@media only screen and (max-width: 767px) {
  .container--breadcrumb {
    display: none;
  }
  .container--breadcrumb .breadcrumb-list {
    flex-wrap: wrap;
    margin: 0 20px;
    padding-left: unset;
  }
  .container--breadcrumb .breadcrumb-list > li {
    margin: 0.25em 0;
    line-height: 1.2;
  }
}





/* color-sample {
  color: #21bd69;
} */

.layout--sidebyside {
  display: flex;
}
.layout--float-right,
.layout--float-left {
  overflow: hidden;
}
.layout--float-right > *:first-child {
  float: right;
}
.layout--float-left > *:first-child {
  float: left;
}











/* ========== .hamburger ========== */


XXX#hamburger--flag {
  display: none;
}
XXX.hamburger--button {
  /* position: fixed; */
  position: relative;
  /* top: 10px; */
  /* right: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 60px; */
  /* width: 60px; */
  width: 1.0em;
  height: 1.0em;
  font-size: 20px;
  /* background-color: #3584bb; */
  /* box-shadow: 0px 2px 5px rgba(0,0,0,0.5); */
  /* border-radius: 999px; */
  /* z-index: 90; */
  transition: all 0.1s ease-out;
}
XXX.hamburger--button span,
XXX.hamburger--button span:before,
XXX.hamburger--button span:after {
  content: '';
  display: block;
  height: 2px;
  height: 0.1em;
  /* width: 20px; */
  width: 1.0em;
  border-radius: 0.1em;
  background-color: #606778;
  position: absolute;
  transition: all 0.2s ease-out;
}
XXX.hamburger--button span:before {
  bottom: 0.35em;
}
XXX.hamburger--button span:after {
  top: 0.35em;
}
XXX.hamburger--button-close ,
XXX#hamburger--flag:checked ~ .hamburger--button {
  box-shadow: none;
}
XXX.hamburger--button-close span ,
XXX#hamburger--flag:checked ~ .hamburger--button span {
  background-color: rgba(255, 255, 255, 0);
}
XXX.hamburger--button-close span::before ,
XXX#hamburger--flag:checked ~ .hamburger--button span::before ,
XXX.hamburger--button-close span::after ,
XXX#hamburger--flag:checked ~ .hamburger--button span::after {
  background-color: #ffffff;
}
XXX.hamburger--button-close span::before ,
XXX#hamburger--flag:checked ~ .hamburger--button span::before {
  bottom: 0;
  transform: rotate(45deg);
}
XXX.hamburger--button-close span::after ,
XXX#hamburger--flag:checked ~ .hamburger--button span::after {
  top: 0;
  transform: rotate(-45deg);
}
XXX.hamburger--content {
  overflow: scroll;
  width: 100%;
  height: 100%;
  max-width: 320px;
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 80;
  /* background-color: #3584bb; */
  /* background-color: rgba(40,40,40,0.5); */
  transition: all 0.5s ease-out;
  -webkit-backdrop-filter: blur(12px) grayscale(0.3) contrast(0.5);
  backdrop-filter: blur(12px) grayscale(0.3) contrast(0.5);
}
XXX#hamburger--flag:checked ~ .hamburger--content {
  left: 0;
}
/* .hamburger--content:before {
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
} */
XXX.hamburger--content .content-head {
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
  height: 52px;
  padding: 10px 20px;
}
XXX.hamburger--content .content-body {
  /* padding-left: 30px; */
  /* padding-right: 50px; */
}
XXX.hamburger--content ul.list {
  padding: 0 60px;
  padding-top: 30px;
  padding-bottom: 30px;
}
XXX.hamburger--content ul ul {
  /* padding: 70px 10px 0; */
  padding-left: 20px;
}
XXX.hamburger--content ul li {
  border-bottom: solid 1px rgba(255,255,255,0.5);
  list-style: none;
}
XXX.hamburger--content ul li:last-child {
  border-bottom: none;
}
XXX.hamburger--content ul li .title {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 9px 15px 0 0;
  position: relative;
  font-weight: bold;
}
XXX.hamburger--content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
XXX.hamburger--content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}
XXX.hamburger--content ul.list-management {
  /* margin-top: 20px; */
  /* padding-top: 30px; */
  /* padding-bottom: 30px; */
  background-color: rgba(0,0,0,0.2);
}
XXX.hamburger--content ul li.warning a {
  color: #ffcccc;
}
XXX.hamburger--content ul li.warning a::before {
  border-top-color: #ffcccc;
  border-right-color: #ffcccc;
}
XXX.hamburger--close {
  position: fixed;
  top: 16px;
  /* left: 20px; */
  left: -100%;
  z-index: 81;
  transition: all 0.5s ease-out;
}
XXX#hamburger--flag:checked ~ .hamburger--close {
  left: 20px;
}


.search--button {
  display: block;
  width: 1.0em;
  height: 1.0em;
  font-size: 20px;
  position: relative;
  /* box-shadow: 0 0 0 1px rgba(0,0,0,.1); */
  cursor: pointer;
}
.search--button span {
  /* position: absolute; */
  display: block;
  top: 0;
  left: 0;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  /* margin: -0.28em 0 0 -0.28em; */
  border: 0.1em solid #606778;
}
.search--button span::after {
  position: absolute;
  display: block;
  content: '';
  bottom: 0;
  right: 0;
  width: 0.5em;
  height: 12%;
  background: #606778;
  margin: -6% 0;
  transform-origin: 100% center;
  transform: rotate(45deg);
}




/* ========== .container--beside ========== */

.container--beside {
  margin: 80px auto 50px;
  text-align: center;
}
.container--beside img {
  width: 64px;
  height: auto;
  animation-name: floating-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes floating-animation {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: scale(1.1, 0.9) translate3d(0, -20px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}



/* ========== .container--footer ========== */

.container--footer {
  margin-top: 100px;
  background-color: var(--color-footer-base);
  border-top: 1px solid rgb(140 69 111 / 19%);
}
.container--footer .areas {
  padding-top: 20px;
  padding-bottom: 30px;
}
.container--footer .blocks > * {
  /* width: 80%;
  max-width: 1280px;
  margin: 0 auto; */
  /* outline: 1px solid red; */
}
/* ---------- .sns-block ---------- */
.container--footer .sns-block {
  text-align: center;
}
.container--footer .sns-block .panel {
  display: inline-block;
  padding: 20px 40px;
  background-color: #ffffff;
  border-radius: 5px;
  text-align: center;
}
.container--footer .sns-block .headline {
  margin-bottom: 0.5em;
  font-size: 125%;
}
@media only screen and (max-width: 767px) {
  .container--footer .sns-block .panel {
    margin: 0 20px;
    padding: 20px;
  }
  .container--footer .sns-block .headline {
    font-size: 100%;
  }
}
/* ---------- .sns-list ---------- */
.container--footer .sns-list {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.container--footer .sns-list > * {
  padding: 0 30px;
}
.container--footer .sns-list img {
  width: 48px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .container--footer .sns-list > * {
    padding: 0 20px;
  }
}
.container--footer .sns-list .line-large {
  padding: 0;
}
.container--footer .sns-list .line-large a {
  display: flex;
  align-items: center;
  padding: 1.0em;
  background-color: rgb(49, 173, 56);
  border-radius: 5px;
  line-height: 1.4;
  text-decoration: none;
  color: #ffffff;
}
.container--footer .sns-list .line-large a .message {
  padding: 0 1.0em;
  text-align: left;
}
.container--footer .sns-list .line-large a .message .head {
  font-weight: bold;
}
/* ---------- .menu-block ---------- */
.container--footer .menu-block {
  text-align: center;
}
/* ---------- .menu-list ---------- */
.container--footer .menu-list {
  margin-top: 30px;
}
.container--footer .menu-list > * {
  margin-bottom: 0.5em;
}
/* ---------- .copyright-block ---------- */
/* .container--footer .copyright-block {
  border-top: 1px solid #bbbbbb;
  padding: 20px 0 40px;
  text-align: center;
} */

.container--copyright {
  /* background-color: #eeeeee; */
  /* border-top: 1px solid #bbbbbb; */
  background-color: var(--color-footer-base);
  border-top: 1px solid var(--color-footer-border);
}
.container--copyright .copyright-block {
  /* border-top: 1px solid #bbbbbb; */
  padding: 20px 0 40px;
  text-align: center;
}






/* ========== .blocks--panel ========== */

.blocks--panel {
  width: 100%;
  padding: 10px;
  /* border-radius: 10px; */
}
.blocks--panel a:hover {
  text-decoration: none;
}
.blocks--panel a:hover .title ,
.blocks--panel a:hover .title .label {
  text-decoration: underline;
}
.blocks--panel .mascot {
  width: 48px;
  margin: 0 auto;
}
.blocks--panel .headline {
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 125%;
  color: #ffffff;
}
/* ---------- .item ---------- */
.blocks--panel .items {
  display: flex;
  flex-wrap: wrap;
}
.blocks--panel .items > .item {
  padding: 10px;
}
/* ---------- .panel ---------- */
.blocks--panel .panel {
  /* overflow: hidden; */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* padding: 10px; */
  /* background-color: #ffffff; */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.2); */
  border-radius: 5px;
}
.blocks--panel .panel-direction {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* .blocks--panel .items--large .panel-direction ,
.blocks--panel .item--large .panel-direction {
  display: flex;
  flex-direction: column;
} */
.blocks--panel .items--small .panel-direction ,
.blocks--panel .item--small .panel-direction {
  /* display: flex; */
  flex-direction: row;
}
/* ---------- .sticker ---------- */
/* .blocks--panel .sticker {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2.0em 3.0em 0.5em;
  transform: ;
  transform-origin: center top 0;
  transform: translateX(-50%) rotate(-45deg);
  line-height: 1;
  font-size: 80%;
  color: #ffffff;
  z-index: 2;
}
.blocks--panel .items--large .sticker ,
.blocks--panel .item--large .sticker {
  font-size: 100%;
}
.blocks--panel .sticker-new {
  background-color: #e44849;
}
.blocks--panel .sticker-update {
  background-color: #ffb300;
}
.blocks--panel .sticker-none {
  display: none;
} */
/* .blocks--panel .items--small .sticker ,
.blocks--panel .item--small .sticker {
  font-size: 80%;
} */
/* ---------- .badge ---------- */
.blocks--panel .badge {
  position: absolute;
  top: -0.25em;
  left: -0.25em;
  padding: 0.3em;
  background-color: #ffffff;

  border-radius: 0 0 4px;
  line-height: 1;
  font-weight: bold;
  font-size: 10px;
  color: #e44849;

  z-index: 2;
}
.blocks--panel .badge-new {
  background-color: #e44849;
  color: #ffffff;
}
.blocks--panel .badge-popular {
  background-color: #ffb300;
  color: #ffffff;
}
/* ---------- .thumb ---------- */
.blocks--panel .thumb {
  position: relative;
  flex-shrink: 0;
  /* margin-bottom: 0.75em; */
}
.blocks--panel .item--small .thumb {
  margin-bottom: 0;
}
.blocks--panel .thumb figure {
  position: relative;
  /* width: 100%; */
  /* width: 100%; */
  /* height: 0; */
  /* padding-bottom: 56.25%; /* 16:9 */ */
}
.blocks--panel .cover-size--free .thumb figure {}
.blocks--panel .cover-size--hd .thumb figure {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}
.blocks--panel .cover-size--paper .thumb figure {
  width: 100%;
  height: 0;
  padding-bottom: 141.42%; /* 1:√2 */
}
/* .blocks--panel .items--large .thumb figure ,
.blocks--panel .item--large .thumb figure {
  position: relative;
  width: 100%;
  height: 0;
} */
.blocks--panel .items--small .thumb figure ,
.blocks--panel .item--small .thumb figure {
  /* position: relative; */
  width: 100px;
  /* height: 0; */
  padding-bottom: 100%; /* square */
}
.blocks--panel .thumb img.cover {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */

  /* object-fit: cover; */
  border-radius: 3px;
}
.blocks--panel .cover-size--hd .thumb img.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 3px; */
}
.blocks--panel .media img.icon {
  width: 20px;
}

.blocks--panel .items--small .thumb ,
.blocks--panel .item--small .thumb {}
.blocks--panel .items--small .thumb figure ,
.blocks--panel .item--small .thumb figure {
  /* width: 100px; */
  /* padding-bottom: 100%; /* square */ */
}
/* ---------- .detail ---------- */
.blocks--panel .detail ,
.blocks--panel .items--small .item--large .detail {
  /* flex-grow: 1; */
  display: flex;
  flex-direction: column;
  /* margin-left: 0.5em; */
  height: 100%;
}
.blocks--panel .items--large .detail ,
.blocks--panel .item--large .detail {
  /* margin-left: 0.2em; */
}
/* .blocks--panel .items--small .detail ,
.blocks--panel .item--small .detail {
  margin-left: 0.5em;
} */
/* ---------- .series ---------- */
.blocks--panel .series .title {
  margin: 1.0em 0 0.25em;
  line-height: 1.4;
  /* font-size: 120%; */
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* .blocks--panel .items--large .series .title ,
.blocks--panel .item--large .series .title {
  margin: 0.25em 0;
} */
.blocks--panel .items--small .series .title ,
.blocks--panel .item--small .series .title {
  margin: 0;
}
.blocks--panel .series .shoulder {
  margin: 0.5em 0;
  line-height: 1.2;
  font-size: 90%;
}
.blocks--panel .series .title .chapter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em 0.4em 0.1em;
  background-color: #e44849;
  border-radius: 0.25em;
  vertical-align: bottom;
  line-height: 1;
  font-size: 80%;
  color: #ffffff;
}
.blocks--panel .items--small .series .title ,
.blocks--panel .item--small .series .title {
  /* margin: 0; */
  /* padding-top: 0.25em; */
}
.blocks--panel .series .author {
  /* margin-top: 0.25em; */
}
.blocks--panel .series .info {
  display: flex;
  justify-content: space-between;
  margin: 0.25em;
  font-size: 12px;
}
.blocks--panel .propaty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 0.5em; */
  line-height: 1;
  font-size: 12px;
}
.blocks--panel .propaty .like {
  margin-left: 0.25em;
}
.blocks--panel .propaty img.icon {
  width: 16px;
}
/* ---------- .tag ---------- */
.blocks--panel .tag {
  margin-left: -0.25em;
}
/* ---------- .update ---------- */
.blocks--panel .update {
  flex-grow: 1;
  align-items: flex-end;
}
.blocks--panel .update {
  display: flex;
  justify-content: space-between;
}
.blocks--panel .update .chapter {
  margin-left: auto;
  margin-right: 0.25em;
}
.blocks--panel .panel-direction .update {
  /* flex-grow: 0; */
  /* align-items: flex-start; */
}
/* ---------- .serial ---------- */
.blocks--panel .serial {
  /* position: relative; */
  position: absolute;
  /* top: -0.25em; */
  bottom: 0.2em;
  right: 0.2em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.2em 0.4em;
  background-color: #ffffff;
  border-radius: 3px;
  /* border: 1px solid #e44849; */
  line-height: 1;
  font-size: 12px;
  /* color: #e44849; */
}
.blocks--panel .serial .number {
  margin-right: 0.2em;
  font-weight: bold;
  font-size: 14px;
}
.blocks--panel .serial .total {}
/* ---------- .media ---------- */
.blocks--panel .media {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  line-height: 1;
  font-size: 12px;
}

/* ---------- .chapter ---------- */
.blocks--panel .chapter {
  /* padding: 0.5em 0; */
}

.blocks--panel .chapter-list .item:not(:last-child) {
  margin-bottom: 0.25em;
}
.blocks--panel .chapter-list .item > * {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-left: 2.0em;
  line-height: 1.2;
}
.blocks--panel .chapter-list .item a[href]:hover .title {
  text-decoration: underline;
}
.blocks--panel .chapter .number {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em;
  border-radius: 0.25em;
}
.blocks--panel .chapter .title {
  line-height: 1.2;
}
.blocks--panel .button {
  margin: 1.0em 0;
  text-align: center;
}
.blocks--panel .button a[href] {
  display: inline-block;
  margin: 0 auto;
  padding: 0.5em 1.0em;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  border-radius: 999px;
  font-weight: bold;
}
/* ---------- .container--aside ---------- */
.container--aside .blocks--panel {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #90c8aa;
  border-radius: 5px;
}
.container--aside .blocks--panel .items > .item {
  flex-basis: 100%;
  width: 100%;
  padding: 5px 0;
}



/* ========== .widgit--feature ========== */

.widgit--feature {
  background-color: #fff2a7;
}
.widgit--feature .items > .item {
  flex-basis: 33.33%;
  width: 33.33%;
}
@media only screen and (max-width: 767px) {
  .widgit--feature .items > .item {
    flex-basis: 100%;
    width: 100%;
  }
}
/* ========== .widgit--popular ========== */
.widgit--popular {
  background-color: #90c8aa;
}
.widgit--popular .items > .item {
  flex-basis: 50%;
  width: 50%;
}

.widgit--columns {}
.widgit--columns .items > .item {
  flex-basis: 33.33%;
  width: 33.33%;
}
@media only screen and (max-width: 767px) {
  .widgit--columns .items > .item {
    flex-basis: 100%;
    width: 100%;
  }
}

.container--search-result {
  padding: 40px;
  max-width: 980px;
  margin: 0 auto;
}
.container--search-result a:hover {
  text-decoration: none;
}
.container--search-result a:hover .series .title .label {
  text-decoration: underline;
}
.container--search-result .headline {
  font-weight: normal;
  color: var(--color-theme-dark);
}
.container--search-result .area-body .blocks {
  width: 100%;
  padding: 10px;
  /* border-radius: 10px; */
  /* outline: 1px solid red; */
}
.container--search-result .items {
  display: flex;
  flex-direction: column;
}
.container--search-result .items > .item {
  flex-basis: 100%;
  /* width: 100%; */
  /* padding: 10px; */
}
@media only screen and (max-width: 767px) {
  .container--search-result {
    padding: 0;
  }
}
/* ---------- .panel ---------- */
.container--search-result .panel {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  margin-bottom: 2.0em;
  /* padding: 10px; */
  background-color: #ffffff;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.2); */
  /* border-radius: 5px; */
}
.container--search-result .panel-direction {
  display: flex;
  flex-direction: row;
  width: 100%;
}
/* ---------- .thumb ---------- */
.container--search-result .thumb {
  flex-shrink: 0;
  flex-basis: 15%;
  min-width: 120px;
}
.container--search-result .thumb figure {
  position: relative;
  width: 100%;
  height: 0;
  /* padding-bottom: 56.25%; */ /* 16:9 */
  /* width: 100px; */
  padding-bottom: 100%; /* square */
}
.container--search-result .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
@media only screen and (max-width: 767px) {
  .container--search-result .thumb {
    min-width: 80px;
  }
}
/* ---------- .detail ---------- */
.container--search-result .detail {
  display: flex;
  flex-direction: column;
  margin-left: 1.5em;
}
@media only screen and (max-width: 767px) {
  .container--search-result .detail {
    margin-left: 1.0em;
  }
}
/* ---------- .series ---------- */
.container--search-result .series .title {
  /* padding-top: 0.5em; */
  line-height: 1.2;
  font-size: 120%;
}
.container--search-result .series .title .label {
  margin-right: 0.5em;
}
.container--search-result .chapter-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em 0.4em 0.1em;
  background-color: #e44849;
  border-radius: 0.25em;
  vertical-align: bottom;
  line-height: 1;
  font-size: 80%;
  color: #ffffff;
}
.container--search-result .series .author {}
.container--search-result .chapter-title {
  color: var(--color-theme-dark);
}
/* ---------- .discription ---------- */
.container--search-result .discription {
  line-height: 1.6;
}
.container--search-result .discription p {
  margin: 0.25em 0;
}

/* ---------- .serial ---------- */
.container--search-result .serial {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.25em 0.5em;
  border-radius: 3px;
  border: 1px solid #e44849;
  line-height: 1;
  color: #e44849;
}
.container--search-result .serial .number {
  margin-right: 0.2em;
  font-weight: bold;
}
.container--search-result .serial .total {}
.container--search-result .relevant {
  border-radius: 0.2em;
  background-color: #ffee99;
}
.container--search-result .blocks--search {
  width: 80%;
  margin: 0 auto;
}
.container--search-result .tag-box {
  display: flex;
  padding: 1.5em 1.0em;
}
.container--search-result .tag-box .title {
  flex-shrink: 0;
  margin-right: 0.5em;
}
.container--search-result input[type=search] {
  padding-top: 1.0em;
  padding-bottom: 1.0em;
}
@media only screen and (max-width: 767px) {
  .container--search-result .tag-box {
    flex-direction: column;
    padding: 10px;
  }
}

.container--category .blocks--panel .block-head {
  margin-top: 2.0em;
  margin-bottom: 0.5em;
  /* font-size: 150%; */
}
.container--category .blocks--panel .block-head .title {
  font-size: 150%;
}
.container--category .blocks--panel .block-body .items {
  display: flex;
  flex-wrap: wrap;
}
.container--category .blocks--panel .block-body .item {
  /* flex-basis: 20%; */
  /* padding: 20px; */
}
@media only screen and (max-width: 767px) {
  .container--category .blocks--panel .block-body .item {
    /* flex-basis: 33.33333333%; */
    /* padding: 0px; */
  }
}



/* .block-category .items {
  display: flex;
  flex-wrap: wrap;
}
.block-category .item {
  flex-basis: 20%;
  padding: 20px;
}
.category-header {
  margin-bottom: 0.5em;
  font-size: 150%;
} */



/* ========== .banner-block ========== */

.banner-block .banner a {
  display: block;
  width: 75%;
  margin: 20px auto;
  border-radius: 999px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .banner-block .banner a {
    width: 90%;
    border-radius: 40px;
  }
}
.banner-block .banner-box {
  width: 75%;
  margin: 20px auto;
}
@media only screen and (max-width: 767px) {
  .banner-block .banner-box {
    width: 90%;
  }
}
/* ---------- .watashi-banner ---------- */
/* .watashi-banner .banner a {
  overflow: hidden;
  position: relative;
  padding: 15px;
  background-color: #e44849;
  box-shadow: 0 2px 8px rgb(0,0,0,30%);
  line-height: 1.2;
  color: #ffffff;
}
.watashi-banner .banner .back {
  position: absolute;
  top: 0;
  right: -5%;
  width: 35%;
  opacity: 0.5;
}
.watashi-banner .banner .shoulder {
  position: relative;
  font-weight: bold;
  font-size: 125%;
  color: #000000;
}
.watashi-banner .banner .title {
  position: relative;
  font-weight: bold;
  font-size: 200%;
}
.watashi-banner .banner .title::before {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.8em;
  margin-right: 0.4em;
  border-style: solid;
  border-color: rgba(255,255,255,0.5);
  border-width: 0 0.2em 0.2em 0;
  transform: rotate(45deg);
}
.watashi-banner .banner .button {
  position: relative;
  margin-top: 10px;
  text-align: center;
}
.watashi-banner .banner .button > * {
  display: inline-block;
  padding: 0.3em 1.0em;
  background-color: #ffffff;
  border-radius: 999px;
  font-weight: bold;
  font-size: 125%;
  color: green;
} */






/* ========== .banner-item ========== */

.banner-item {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #e44849;
  box-shadow: 0 2px 8px rgb(0,0,0,30%);
  border-radius: 999px;
  line-height: 1.2;
  color: #ffffff;
}
.banner-item:hover {
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .banner-item {
    border-radius: 40px;
  }
}
/* ---------- .banner--watashicheck ---------- */
.banner--watashicheck {
  background-color: #e44849;
  text-align: center;
  color: #ffffff;
}
.banner--watashicheck .back {
  position: absolute;
  top: 0;
  right: -5%;
  width: 35%;
  opacity: 0.5;
}
.banner--watashicheck .front {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.banner--watashicheck .front > * {
  /* outline: 2px solid yellow; */
}
/* .banner--watashicheck .front .body {
  flex-grow: 1;
} */
.banner--watashicheck .shoulder {
  position: relative;
  font-weight: bold;
  font-size: 125%;
  color: #000000;
}
.banner--watashicheck .title {
  position: relative;
  font-weight: bold;
  font-size: 200%;
  color: #ffffff;
}
.banner--watashicheck .title::before {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.8em;
  margin-right: 0.4em;
  border-style: solid;
  border-color: rgba(255,255,255,0.5);
  border-width: 0 0.2em 0.2em 0;
  transform: rotate(45deg);
}
.banner--watashicheck .button {
  position: relative;
  margin-top: 10px;
  text-align: center;
  /* position: absolute; */
  /* bottom: 0; */
}
.banner--watashicheck .button > * {
  display: inline-block;
  padding: 0.3em 1.0em;
  background-color: #ffffff;
  border-radius: 999px;
  font-weight: bold;
  font-size: 125%;
  color: #21bd69;
}

.banner--dummy {
  background-color: green;
  text-align: center;
  color: #ffffff;
}
.banner--dummy .front {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.banner--dummy .title {
  font-weight: bold;
  font-size: 200%;
  color: #ffffff;
}


/* ========== .chapter-list ========== */

.chapter-list {}
.chapter-list .item {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.chapter-list .item > * {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-left: 2.25em;
  line-height: 1.2;
}
.chapter-list .item a {
  text-decoration: none;
}
.chapter-list .item a[href]:hover {
  text-decoration: underline;
}
/* ---------- .number ---------- */
.chapter-list .item .number {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em;
  background-color: rgba(0,0,0,0.05);
  border-radius: 0.25em;
}
/* ---------- .badge ---------- */
.chapter-list .item .badge {
  margin-left: 0.5em;
  font-size: 90%;
}
.chapter-list .item .badge--new {
  color: #e44849;
}
/* ---------- .item--selected ---------- */
.chapter-list .item--selected .number {
  background-color: #e44849;
  font-weight: bold;
  color: #ffffff;
}
/* ---------- .item--new ---------- */
.chapter-list .item--new .number {
  background-color: #e44849;
  font-weight: bold;
  color: #ffffff;
}
.chapter-list .item--new .title {
  font-weight: bold;
}
/* ---------- .item--closed ---------- */
.chapter-list .item--closed a {
  color: #bbbbbb;
}
.chapter-list .item--closed .number {
  background-color: transparent;
}



/* ========== .share-block ========== */

.share-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  line-height: 1;
  font-size: 120%;
}
.share-block .block-head {
  margin: 0;
}
.share-block .items {
  display: flex;
  gap: 0.5em;
  /* justify-content: space-between; */
}
.share-block .items .item {
}
.share-block .item img {
  width: 1.0em;
}
.share-block .item--heart .number {
  font-size: 83%;
}


/* ---------- .share-block--large ---------- */
.share-block--large {
  font-size: 200%;
}
.share-block--large > * {
  justify-content: center;
}
/* ---------- .item--heart ---------- */
.share-block .item--heart a {
  text-decoration: none;
}
.share-block .item--heart .mode--on .number {
  color: #e44849;
}
.share-block .icon-on {
  display: none;
}
.share-block a:hover .icon-on {
  display: unset;
}
.share-block .icon-off {
  display: unset;
}
.share-block a:hover .icon-off {
  display: none;
}
.share-block .mode--on .icon-on {
  display: unset;
}
.share-block .mode--on .icon-off {
  display: none;
}







/* ========== .blocks--share ========== */

.blocks--share {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  line-height: 1;
  font-size: 120%;
}
.blocks--share .block-head {
  margin: 0;
}
.blocks--share .items {
  display: flex;
  gap: 0.5em;
  /* justify-content: space-between; */
}
.blocks--share .items .item {
}
.blocks--share .item img {
  width: 1.0em;
}
.blocks--share .item--heart .number {
  font-size: 83%;
}


/* ---------- .blocks--share--large ---------- */
.blocks--share--large {
  font-size: 200%;
}
.blocks--share--large > * {
  justify-content: center;
}
/* ---------- .item--heart ---------- */
.blocks--share .item--heart a {
  text-decoration: none;
}
.blocks--share .item--heart .mode--on .number {
  color: #e44849;
}
.blocks--share .icon-on {
  display: none;
}
.blocks--share a:hover .icon-on {
  display: unset;
}
.blocks--share .icon-off {
  display: unset;
}
.blocks--share a:hover .icon-off {
  display: none;
}
.blocks--share .mode--on .icon-on {
  display: unset;
}
.blocks--share .mode--on .icon-off {
  display: none;
}







.style--notmatch {
  margin-top: 40px;
}
.style--notmatch .header-block .headline {
  text-align: center;
}
.style--notmatch .guide-block {
  width: 70%;
  margin: 0 auto 50px;
  padding: 10px;
}
.style--notmatch .guide-list {
  margin: 1.0em 0;
  list-style-type: none;
  text-align: left;
}
.style--notmatch .guide-list > * {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
}
.style--notmatch .guide-list > *::before {
  content: '';
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.8em;
  height: 0.4em;
  border-left: 3px solid #25AF01;
  border-bottom: 3px solid #25AF01;
  transform: rotate(-45deg);
}
.style--notmatch .tag-list {
  background-color: #eeeeee;
  padding: 2em;
  border-radius: 5px;
}
.style--notmatch .item--photo {
  padding-top: 50px;
  text-align: center;
}
.style--notmatch .item--photo img {
  width: 80%;
  max-width: 120px;
  height: auto;
  animation-name: floating-animation-about;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@keyframes floating-animation-notmatch {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: scale(1.1, 0.9) translate3d(0, -60%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media only screen and (max-width: 767px) {
  .style--notmatch .guide-block {
    width: auto;
  }
}


.style--error {
  margin-top: 40px;
}
.style--error .header-block .headline {
  text-align: center;
}
.style--error .header-block .headline .number {
  display: block;
  line-height: 1;
  font-size: 300%;
}
.style--error .header-block .message {
  text-align: center;
}
.style--error .guide-block {
  width: 70%;
  margin: 0 auto 50px;
  padding: 20px 20px 10px;
  background-color: #eeeeee;
  border-radius: 5px;
}
.style--error .guide-list {
  margin: 1.0em 0;
  list-style-type: none;
  text-align: left;
}
.style--error .guide-list > * {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
}
.style--error .guide-list > *::before {
  content: '';
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.8em;
  height: 0.4em;
  border-left: 3px solid #25AF01;
  border-bottom: 3px solid #25AF01;
  transform: rotate(-45deg);
}
.style--error .item--photo {
  padding-top: 50px;
  text-align: center;
}
.style--error .item--photo img {
  width: 80%;
  max-width: 120px;
  height: auto;
  animation-name: floating-animation-kurage;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@media only screen and (max-width: 767px) {
  .style--error .guide-block {
    width: auto;
  }
}



.style--about {
  margin-bottom: 8.0em;
}
.style--about .page-header {
  justify-content: center;
}
/* .style--about .anim-block .block-head {
  text-align: center;
  font-size: 150%;
}
.style--about .anim-block .headline {
  position: relative;
  display: inline-block;
  margin-bottom: 1.0em;
  padding: 0.5em 1.0em;
  border: 3px solid #999;
  border-radius: 0.5em;
  line-height: 1.0em;
  color: #999;
  animation-name: updown-animation-about;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}
@keyframes updown-animation-about {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 60%, 0); }
  100% { transform: translate3d(0, 0, 0); }
} */
/* .style--about .anim-block .headline .label {
  position: relative;
  z-index: 1;
}
.style--about .anim-block .headline::after {
  content: '';
  position: absolute;
  left: 50%;
  display: block;
  width: 1.0em;
  height: 1.0em;
  transform: translate(-50%,0) rotate(45deg);
  background-color: #ffffff;
  border-right: 3px solid #999;
  border-bottom: 3px solid #999;
} */
.style--about .message-block {
  margin-top: 1.5em;
  text-align: center;
  font-size: 120%;
}
.style--about .message-block .headline {
  /* margin-bottom: 1.0em; */
  /* font-size: 150%; */
  font-weight: bold;
  color: #a05c1a;
}
/* .style--about .message-block .block-body {
  font-size: 120%;
} */
.style--about .message-block .block-body p {
  margin-bottom: 1.5em;
}
/* .style--about .slide {
  position: relative;
  width: 320px;
  margin: 0 auto;
} */
/* .style--about .slide > * {
  animation-name: fade-animation-about;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  opacity: 0;
}
.style--about .slide > *:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
@keyframes fade-animation-about {
  0% { opacity: 0; }
  3% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; }
} */
/* .style--about .slide-01 {
  animation-delay: 0s;
}
.style--about .slide-02 {
  animation-delay: 2s;
}
.style--about .slide-03 {
  animation-delay: 4s;
}
.style--about .slide-04 {
  animation-delay: 6s;
}
.style--about .slide-05 {
  animation-delay: 8s;
} */


/* .style--about .message-block .panel-title {
  font-weight: bold;
  color: #a05c1a;
} */
.style--about .message-block .panel {
    display: inline-block;
    margin-bottom: 2em;
    padding: 1em 2em;
    padding-left: 3em;
    background-color: rgb(255, 255, 227);
    border-radius: 0.5em;
    list-style: disc;
    text-align: left;
    color: #a05c1a;
}
@media only screen and (max-width: 767px) {
  .style--about .message-block {
    margin-right: 1em;
    margin-left: 1em;
  }
  .style--about .message-block .panel {
    padding-right: 1em;
    padding-left: 2em;
  }
}



.blocks--userpolicy {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 80px;
  padding: 0 20px;
}
.blocks--userpolicy .headline .label {
  font-weight: normal;
  font-size: 150%;
}
.blocks--userpolicy ol {
  counter-reset: count;
  list-style-type: none;
  padding-left: 0;
}
.blocks--userpolicy ol > li{
  position: relative;
  padding-left: 1.3em;
}
.blocks--userpolicy ol.primary > li {
  margin: 1.0em 0;
}
.blocks--userpolicy ol > li:before {
  counter-increment: count;
  content: counter(count)'.';
  position: absolute;
  left: 0;
  font-weight: bold;
}
.blocks--userpolicy ol > li{
  position: relative;
  padding-left: 1.5em;
}
.blocks--userpolicy ol ol > li:before {
  content: '('counter(count)')';
  font-weight: normal;
}
.blocks--userpolicy ul {
  list-style-type: none;
  padding-left: 0;
}
.blocks--userpolicy ul > li{
  position: relative;
  padding-left: 1.3em;
}
.blocks--userpolicy ul > li:before {
  content: '・';
  position: absolute;
  left: 0;
}
.blocks--userpolicy h3 {
  display: inline;
}
.blocks--userpolicy .enactment {
  margin: 2.0em 0;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .blocks--userpolicy {

  }
}



.style--contents {}
.style--contents .banner-list {
  display: flex;
  flex-wrap: wrap;
  margin: 30px -10px;
}
.style--contents .banner-list > * {
  flex-basis: 50%;
  padding: 10px;
}
@media only screen and (max-width: 767px) {
  .style--contents .banner-list {
    flex-direction: column;
    margin: 0;
    padding: 10px;
  }
  .style--contents .banner-list > * {
    flex-basis: 100%;
    padding: 0;
    margin-bottom: 10px;
  }
}

@keyframes floating-animation-kurage {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: scale(1.1, 0.9) translate3d(0, -60%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.snsbuttons-box {}
.snsbuttons-box .snsbuttons-list > * {
  display: inline-block;
}



.style--dummy {
  background-color: #bae2ee;
}



.widgit--scroll {
  margin: 20px 0;
  padding: 0;
}
.widgit--scroll .scroll-track {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.widgit--scroll .scroll-track::-webkit-scrollbar{
  display:none;
}
.widgit--scroll .scroll-title {
  display: flex;
  justify-content: space-between;
  margin: 0 14px;
}
.widgit--scroll .scroll-title a {
  font-size: 12px;
  color: var(--color-theme-dark);
}
.widgit--scroll .scroll-items {
  display: flex;
  gap: 0px 10px;
  padding: 5px 0;
}
.widgit--scroll .scroll-items::before ,
.widgit--scroll .scroll-items::after {
  content: "";
  min-width: 4px;
}
.widgit--scroll .item {
  min-width: 40%;
}
.widgit--scroll .item:last-child {
  /* padding-right: 50px; */
}
.widgit--scroll .thumb {
  /* margin-bottom: 4px; */
}
.widgit--scroll .item .ratio-hd {
  /* position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; */
}
.widgit--scroll .item .ratio-hd img {
  /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid #cccccc; */
}
.widgit--scroll .scroll-more {
  padding-left: 20px;
  white-space: nowrap;
}
.widgit--scroll .scroll-more > * {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.widgit--scroll .scroll-more .icon {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.widgit--scroll .scroll-more .label {
  font-size: 12px;
}
/* .widgit--scroll .shoulder {
  line-height: 1.4;
  font-size: 12px;
}
.widgit--scroll .title {
  margin: 4px 0;
  line-height: 1.6;
  font-weight: 700;
  font-size: 13px;
}
.widgit--scroll .author {
  font-size: 12px;
} */

.widgit--slider-article {
  /* padding: 0; */
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}
.widgit--slider-article a:hover ,
.widgit--slider-article a:focus {
  opacity: 1;
}
.widgit--slider-article a:hover .title ,
.widgit--slider-article a:focus .title ,
.widgit--slider-article a:hover .title .label ,
.widgit--slider-article a:focus .title .label {
  text-decoration: none;
}

/* .blocks--panel .corner-header {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 767px) {
  .blocks--panel .corner-header {
    width: initial;
    margin: 0 10px;
  }
}
.blocks--panel .corner-header a {
  font-size: 12px;
  color: var(--color-theme-dark);
} */
.category-header {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 0.5em;
}
.category-header .title {
  font-size: 140%;
}
.category-header .more a {
  font-size: 12px;
  color: var(--color-theme-dark);
}
.category-header .volume {
  position: relative;
  top: -0.1em;
  padding: 0.1em 0.2em;
  border-radius: 5px;
  border: 1px solid #777777;
  font-weight: normal;
  font-size: 0.8em;
}
.category-header .author {
  font-weight: normal;
}
.category-discription {
  display: flex;
  width: 90%;
  margin: 0 auto;
}

.page-header {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-top: 4.0em;
  margin-bottom: 0.5em;
}
.page-header .title {
  font-weight: normal;
  color: var(--color-theme-dark);
}
.page-header .title .label {
  font-size: 200%;
}
.page-header .title .suffix {
  font-size: 160%;
}
.page-discription {
  /* display: flex; */
  width: 90%;
  margin: 0 auto;
}

.stick-items {
  display: flex;
  flex-wrap: wrap;
  width: calc( 90% + 60px );
  /* calc(90% + 40px); */
  margin: 0 auto;
}
.stick-items > * {
  flex-basis: 25%;
  padding: 20px;
}
@media only screen and (max-width: 767px) {
  .stick-items {
    width: unset;
    gap: 10px;
    padding: 10px;
  }
  .stick-items > * {
    flex-basis: calc( 50% - 5px );
    padding: unset;
  }
}


.widgit--slider-article .slider-header {
  display: flex;
  /* justify-content: space-between; */
  width: 90%;
  margin: 0 auto;
  margin-bottom: 0.5em;
}
.widgit--slider-article .block-head {
  /* width: 90%; */
  /* margin: 0 auto; */
  /* margin-bottom: 0.5em; */
}
.widgit--slider-article .block-head > * {
  display: flex;
}
.widgit--slider-article .block-head .more {
  margin-left: auto;
}
.widgit--slider-article .block-head .title {
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .widgit--slider-article .slider-header {
    width: initial;
    margin: 0 10px;
  }
}
.widgit--slider-article .slider-header a {
  font-size: 12px;
  /* color: #0b9c4e; */
  color: var(--color-theme-dark);
}



.widgit--slider-article .slider-items .item {
  padding: 5px 5px 0;
  padding: 20px;
  padding: 5px 10px 0 0;
  /* width: 40vw; */
}
@media only screen and (max-width: 767px) {
  .widgit--slider-article .slider-items .item {
    padding: 10px;
  }
}



.widgit--slider-article .slider-more {
  /* color: #0b9c4e; */
}
.widgit--slider-article .slider-more a {
  /* color: #0b9c4e; */
  color: var(--color-theme-dark);
}
.widgit--slider-article .slider-more > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
.widgit--slider-article .slider-more .button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.widgit--slider-article .slider-more .icon {
  display: block;
  width: 24px;
  margin: 0.5em;
}
.widgit--slider-article .slider-more .label {
  font-size: 12px;
}



.widgit--stick-article {
  padding: 10px;
}

/* ---- Hide at start ---- */
/* .script--slider-article {
  display: none;
}
.script--slider-article.slick-initialized {
  display: block;
} */
/* ---- Align item heights ---- */
.script--slider-article .slick-track ,
.script--slider-article-large .slick-track {
  display: flex;
}
.script--slider-article .slick-slide ,
.script--slider-article-large .slick-slide {
  height: auto !important;
}
/* ---- Prevents the display cut off ---- */
.script--slider-article .slick-track ,
.script--slider-article-large .slick-track {
  /* overflow: hidden; */
  margin-left: initial;
  margin-right: initial;
}
.script--slider-article .slick-list ,
.script--slider-article-large .slick-list {
  overflow: visible !important;
}
/* ---- Fine tuning ---- */
.script--slider-article ,
.script--slider-article-large {
  overflow: hidden;
  padding-left: 5%;
  padding-right: 5%;
}
@media only screen and (max-width: 767px) {
  .script--slider-article ,
  .script--slider-article-large {
    padding-left: 5px;
    padding-right: 15%;
  }
}




.slider-arrow {
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  background: rgb(255,255,255);
  z-index: 2;
  opacity: 1;
  transition: opacity .3s linear;
}
.slider-arrow img {
  width: 20px;
}
.slider-arrow.slick-disabled {
  opacity: 0;
}
.slider-prev {
  left: 0;
  background: linear-gradient(90deg,
  rgba(255,255,255,0.8) 0%,
  rgba(255,255,255,0) 100%);
}
.slider-next {
  right: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.8) 100%);
}

.blocks--hero .slick-dots {
  padding-right: 10px;
  text-align: right;
}
.blocks--hero .slick-dots li {
  margin: initial;
}

/* ---- Hide at start ---- */
.script--slider {
  display: none;
}
.script--slider.slick-initialized {
  display: block;
}

#suggest--content .layout--suggest,
#suggest--content .layout--curtain {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#suggest--content .layout--curtain {
  top: 0;
  display: block;
  background-color: rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(3px) grayscale(0.3) contrast(0.5);
  backdrop-filter: blur(3px) grayscale(0.3) contrast(0.5);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  z-index: -1;
}
/* #suggest--content .curtain.active { */
  /* z-index: 90; */
/* } */
/* #suggest--switch:checked ~ #suggest--content .curtain { */
#switch--suggest:checked ~ #suggest--content .layout--curtain ,
#switch--suggest:checked ~ * #suggest--content .layout--curtain {
  opacity: 1;
  z-index: 90;
}
/* #suggest--content .curtain.switch-on {
  z-index: 90;
}
#suggest--content .curtain.switch-off {
  z-index: -1;
} */
#suggest--content .layout--suggest {
  top: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-out;
  z-index: 91;
}
/* #suggest--switch:checked ~ #suggest--content .layout { */
#switch--suggest:checked ~ #suggest--content .layout--suggest ,
#switch--suggest:checked ~ * #suggest--content .layout--suggest {
  top: 0;
}




.container--suggest {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
}
.container--suggest .areas {
  display: flex;
  flex-direction: column;
  max-width: 80vw;
  max-height: 80vh;
}
.container--suggest .area-head {
  padding: 10px 0;
}
.container--suggest .area-head .block-body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.container--suggest .area-head .mascot {
  width: 32px;
}
.container--suggest .area-body {
  overflow: auto;
}
.container--suggest .type--column .area-body {
  padding: 10px 30px;
}
.container--suggest .type--photo .area-body {
  padding: 10px;
}
.container--suggest .type--wotd .area-body {
  padding: 10px 30px;
}
.container--suggest .area-foot {
  padding: 15px 0;
  text-align: center;
}



.container--suggest .area-head .blocks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.container--suggest .area-head .blocks > * {
  flex-basis: 30%;
}
.container--suggest .area-head .blocks .block-body {
  flex-basis: 100%;
  text-align: center;
}
.container--suggest .area-head .blocks .items {
  display: flex;
  align-items: center;
  gap: 10px;
}
.container--suggest .area-head .blocks .block-foot .items {
  justify-content: flex-end;
}
.container--suggest .area-head .blocks .block-foot .items .item {
  flex-basis: unset;
}



.container--suggest .block-head {
  margin-bottom: 0.5em;
}
.container--suggest .type--photo .block-head ,
.container--suggest .type--wotd .block-head {
  text-align: center;
}
.container--suggest .block-body {
  font-size: 12px;
}
.container--suggest .title {
  line-height: 1.5;
  font-weight: bold;
}
.container--suggest .author {
  font-size: 12px;
}
.container--suggest .type--column .author {
  text-align: right;
}
.container--suggest .image {
  margin: 0.5em auto;
}
.container--suggest .type--wotd .image {
  width: 60%;
}

.container--suggest-list {
  /* max-width: 640px; */
  /* margin: 0 auto; */
  /* padding: 0 20px; */
}
.container--suggest-list .attention {
  position: relative;
  list-style: none;
  margin: 0.5em 0;
  padding-left: 2.0em;
  color: var(--color-warning);
}
.container--suggest-list .attention::before {
  content: '[注]';
  position: absolute;
  left: 0;
}

.container--suggest-list .items--suggest-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  /* width: calc( 90% + 60px ); */
  width: 90%;
  margin: 0 auto;
  margin-bottom: 80px;
}
.container--suggest-list .items--suggest-list > li {
  flex-basis: calc(50% - 20px);
  /* margin: 1.0em 0; */
}
@media only screen and (max-width: 1600px) {
  .container--suggest-list .items > li {
    flex-basis: 100%;
  }
}
.container--suggest-list .temporary-body {
  display: none;
}
.container--suggest-list .button--suggest {
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  height: 100%;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.25);
}
.container--suggest-list .item--none {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 40px 0;
  font-weight: bold;
  font-size: 120%;
  color: #ccc;
}
.suggest-title {
  /* order: 2; */
}
.suggest-title .date {
  display: block;
}
.suggest-title .label {
  line-height: 1.4;
  font-weight: bold;
  font-size: 150%;
}

.suggest-image {
  flex-shrink: 0;
  /* order: 1; */
  width: 80px;
  margin-left: 40px;
}
.suggest-image img {

  /* width: 80px; */
}



.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
.button .icon {
  width: 1.0em;
}
.button--solid ,
.button--solid:visited {
  padding: 0.5em 1em;
  /* border: 1px solid #21bd69; */
  /* background-color: #21bd69; */
  border: 1px solid var(--color-theme-dark);
  background-color: var(--color-theme-dark);
  border-radius: 5px;
  line-height: 1;
  color: #ffffff;
}
.button--rounded {
  border-radius: 999px;
}
.button--border,
.button--border:visited {
  padding: 0.5em 1em;
  /* border: 1px solid #21bd69; */
  border: 1px solid var(--color-theme-dark);
  border-radius: 5px;
  line-height: 1;
  /* color: #21bd69; */
  color: var(--color-theme-dark);
}
/* .button--close {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  font-size: 20px;
  transition: all 0.1s ease-out;
}
.button--close:before,
.button--close:after {
  content: '';
  position: absolute;
  display: block;
  height: 2px;
  height: 0.1em;
  width: 1em;
  border-radius: 0.1em;
  background-color: #606778;
  transition: all 0.2s ease-out;
}
.button--close:before {
  transform: rotate(45deg);
}
.button--close:after {
  transform: rotate(-45deg);
} */


XXX.layout--three-column-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
XXX.layout--three-column-bar > * {
  flex-basis: 30%;
}
XXX.layout--three-column-bar .block-body {
  flex-basis: 100%;
  text-align: center;
}
XXX.layout--three-column-bar .items {
  display: flex;
  align-items: center;
  gap: 10px;
}
XXX.layout--three-column-bar .block-foot .items {
  justify-content: flex-end;
}

.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}
.photo-gallery > * {
  flex-basis: 32.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-right: 1%; */
  margin-top: 1%;
  padding: 5px;
  border-radius: 4px;
  background-color: #666666;
  color: #ffffff;
}
.style--column .photo-gallery figure {
  margin: 0;
}
.style--column .photo-gallery figcaption {
  margin-top: 0.5em;
  line-height: 1.5;
  font-size: 12px;
  color: #ffffff;
}
.photo-gallery--dropcap > *:first-child {
  flex-basis: 100%;
  margin: 0;
}
.pswp__custom-caption {
padding: 0.5em 1em;
transform: translate(-50%,0);
color: white;
bottom: 1em;
position: absolute;
left: 50%;
/* width: 100%; */
border-radius: 5px;
text-align: center;
background-color: rgba(0,0,0,0.5);
/* outline: 1px solid red; */
text-shadow: 1px 1px 3px #4f4f4f;
}



/* ========== .layouts ========== */

/* ---------- .layouts--sidebyside ---------- */
.layouts--sidebyside {
  display: grid;
  grid-template-columns: 220px calc(100% - 520px) 300px;
  /* grid-template-columns: 220px auto 300px; */
}
.layouts--sidebyside > * {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .layouts--sidebyside {
    display: block;
  }
}


/* #hero { */
.container--hero {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .container--hero {
    width: 100%;
    margin-top: initial;
  }
}

.container--menu {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
}
.container--menu > * {
  direction: ltr;
}
@media only screen and (max-width: 767px) {
  .container--menu {
    position: initial;
    overflow: initial;
    direction: initial;
  }
}


.box--menu-contents .items--main {
  padding: 40px;
  padding-right: 20px;
}
.box--menu-contents .items--sub {
  padding-left: 20px;
}
.box--menu-contents .item {
  border-bottom: solid 1px rgba(0,0,0,0.1);
  list-style: none;
}
.box--menu-contents .item:last-child {
  border-bottom: none;
}
.box--menu-contents .item .title {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  text-decoration: none;
  padding: 9px 15px 0 0;
  position: relative;
  font-weight: bold;
}
.box--menu-contents .item a ,
.box--menu-contents .item label {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.box--menu-contents .close--menu-contents {
  display: none;
}
@media only screen and (max-width: 767px) {
  .container--menu .areas {
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100vh;
    width: 100vw;
    /* background-color: #ffffff; */
    background-color: rgba(255,255,255,0.8);
    z-index: 100;
    /* overflow-y: auto; */
    transition: all 0.3s ease-out;

    -webkit-backdrop-filter: blur(12px) grayscale(0.3) contrast(0.5);
    backdrop-filter: blur(12px) grayscale(0.3) contrast(0.5);
  }
  #switch--menu-contents:checked ~ * .container--menu .areas {
    left: 0;
  }
  .container--menu .area-body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .container--menu .close--menu-contents {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
  }
  .container--menu .items--main {
    padding: 40px 60px;
  }
  .container--menu .search-close {
    display: block;
  }

  XXX.box--menu-contents .panel{
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff;
    z-index: 100;
    overflow-y: auto;
    transition: all 0.3s ease-out;
  }
  XXX#switch--menu-contents:checked ~ * .box--menu-contents .panel {
    left: 0;
  }
  XXX.box--menu-contents .panel-body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  XXX.box--menu-contents .close--menu-contents {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
  }
  XXX.blocks--menu-contents .items--main {
    padding: 40px 60px;
  }
  XXX.blocks--menu-contents .search-close {
    display: block;
  }
}



.blocks--notice {
  position: relative;
  /* display: flex; */
  /* align-items: center; */
  padding: 10px 40px;
  /* background-color: var(--color-green); */
  /* background-color: var(--color-theme-midtone); */
  background-color:  var(--color-footer-base);
  text-align: center;
  /* color: #ffffff; */
}
.blocks--notice .block-close {
  position: absolute;
  /* top: 50%; */
  top: 10px;
  right: 20px;
  /* transform: translateY(-50%); */
}
.blocks--notice svg.close {
  width: 16px;
  height: auto;
  /* margin-right: 1.0em; */
}
.layout--notice {
  display: none;
}
#switch--notice:checked ~ * .layout--notice {
  display: initial;
}
@media only screen and (max-width: 767px) {
  .blocks--notice {
    text-align: left;
    padding: 10px 20px;
    padding-right: 40px;
  }
}


.comic-viewer {
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* display: flex; */
  /* flex-direction: column; */


  /* display: grid; */
  /* grid-template-rows: 1fr 50px; */
  display: none;
  z-index: 2;
}
.switch--viewer-comic:checked ~ .comic-viewer {
  display: block;
}
.comic-viewer .slick-list,
.comic-viewer .slick-track {
  height: 100%;
}
.comic-viewer .slick-slider {
  -ms-touch-action: auto;
  touch-action: auto;
  height: 100%;


  flex-grow: 1;
}
.comic-viewer .panel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 60px;
}
@media only screen and (max-width: 767px) {
  .comic-viewer .panel {
    padding: 10px;
  }
  /* .comic-viewer .panel--announce {
    padding: 20px;
  } */
}
.comic-viewer figure {
  display: flex;
  height: 100%;
  margin: 0 !important;
}
.comic-viewer img {
  object-fit: contain;
  max-width:100%;
  max-height:100%;
}
.comic-viewer .panel .announce {
  padding: 40px;
  background-color: rgba(255,255,255,0.9);
  border-radius: 5px;
  text-align: center;
}
/* .comic-viewer .slick-prev {
  outline: 3px solid red;
  width: 100px;
  height: 100%;
  z-index: 1;
  right: 0;
} */

@media only screen and (max-width: 767px) {
  .comic-viewer .slick-prev {
    width: 30px;
  }
}
.comic-viewer .controller .bar--head {
  /* background-color: rgba(0,255,0,0.5); */
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  color: #ffffff;
}
.comic-viewer .controller .bar--foot {
  /* background-color: rgba(255,0,0,0.5); */
  position: absolute;
  bottom: 0;
  /* left: 0; */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  /* width: 100%; */
  width: 300px;
  padding: 20px;
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .comic-viewer .controller .bar--foot {
    width: 100%;
  }
}
.comic-viewer .controller .bar--foot > * {
  flex-basis: 100%;
}
.comic-viewer .controller .bar--foot .head {
  text-align: left;
}
.comic-viewer .controller .bar--foot .body {
  text-align: center;
}
.comic-viewer .controller .bar--foot .foot {
  text-align: right;
}
.comic-viewer .controller .bar--foot .label {
  margin-left: 1.0em;
}
.comic-viewer .controller .bar--foot button {
  font-size: 100%;
  color: #ffffff;
}
.comic-viewer .controller .bar--foot .slick-disabled {
  opacity: 0;
}

.button--comic-cover {
  display: block;
  /* padding: 20px; */
  /* background-color: var(--color-green-dark); */
  /* background-color: #eeeeee; */
  /* border-radius: 10px;
  border: 1px solid var(--color-green-dark);
  text-align: center;
  color: var(--color-green-dark); */
  cursor: pointer;
}
.button--comic-cover .button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  margin-top: 0.5em;
  padding: 1.0em;
  background-color: var(--color-theme-dark);
  border-radius: 4px;
  color: #ffffff;


  /* border: 1px solid var(--color-green-dark); */
}
.button--comic-cover .button .label {
  font-weight: bold;
}

.series-block .volume {
  position: relative;
  top: -0.1em;
  padding: 0.1em 0.2em;
  border-radius: 5px;
  border: 1px solid #777777;
  font-weight: normal;
  font-size: 0.8em;
}




.container--result-search .blocks--search {
  /* width: 60%; */
  max-width: 768px;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 20px;
}
.container--result a {
  text-decoration: none;
}
.container--result a:hover {
  text-decoration: none;
}
.container--result a:hover .series .title .label {
  text-decoration: underline;
}
.container--result .page-header {
  margin-top: 0;
  margin-bottom: 2.0em;
}
@media only screen and (max-width: 767px) {
  .container--result .page-header {
    margin-top: 3.0em;
  }
}
.container--result .headline {
  font-weight: normal;
  color: var(--color-theme-dark);
}
.container--result .area-body .blocks {
  width: 100%;
  padding: 10px;
  /* border-radius: 10px; */
  /* outline: 1px solid red; */
}
.container--result .items {
  display: flex;
  flex-direction: column;
}
.container--result .items > .item {
  flex-basis: 100%;
  width: 100%;
  /* padding: 10px; */
}
.container--result .items--result {
  width: 90%;
  margin: 0 auto;
}
/* ---------- .panel ---------- */
.container--result .panel {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  margin-bottom: 2.0em;
  /* padding: 10px; */
  background-color: #ffffff;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.2); */
  /* border-radius: 5px; */
}
.container--result .panel-direction {
  display: flex;
  flex-direction: row;
  width: 100%;
}
/* ---------- .thumb ---------- */
.container--result .thumb {
  flex-shrink: 0;
  /* flex-basis: 15%; */
  /* min-width: 120px; */
  width: 120px;
}
.container--result .thumb figure {
  position: relative;
  width: 100%;
  height: 0;
  /* padding-bottom: 56.25%; */ /* 16:9 */
  /* width: 100px; */
  padding-bottom: 100%; /* square */
}
.container--result .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
@media only screen and (max-width: 767px) {
  .container--result .thumb {
    width: 80px;
  }
}
/* ---------- .detail ---------- */
.container--result .detail {
  display: flex;
  flex-direction: column;
  margin-left: 1.5em;
}
@media only screen and (max-width: 767px) {
  .container--result .detail {
    margin-left: 1.0em;
  }
}
/* ---------- .series ---------- */
.container--result .series .title {
  /* padding-top: 0.5em; */
  line-height: 1.2;
  font-size: 120%;
}
.container--result .series .title .label {
  margin-right: 0.5em;
}
.container--result .chapter-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0.2em 0.4em 0.1em;
  background-color: #e44849;
  border-radius: 0.25em;
  vertical-align: bottom;
  line-height: 1;
  font-size: 80%;
  color: #ffffff;
}
.container--result .series .author {}
.container--result .chapter-title {
  color: var(--color-theme-dark);
}
/* ---------- .discription ---------- */
.container--result .discription {
  line-height: 1.6;
}
.container--result .discription p {
  margin: 0.25em 0;
}

/* ---------- .serial ---------- */
.container--result .serial {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.25em 0.5em;
  border-radius: 3px;
  border: 1px solid #e44849;
  line-height: 1;
  color: #e44849;
}
.container--result .serial .number {
  margin-right: 0.2em;
  font-weight: bold;
}
.container--result .serial .total {}
.container--result .relevant {
  border-radius: 0.2em;
  background-color: #ffee99;
}


.blocks--paginate {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 20px 10px 40px;
}
.blocks--paginate .items--pages {
  display: flex;
  flex-direction: row;
}
.blocks--paginate .items--pages > * {
  margin: 0 0.2em;
}
.blocks--paginate .items--pages .item > * {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25em;
  min-width: 2em;
  min-height: 2em;
  line-height: 1;
  text-align: center;
  background-color: #f6f6ef;
  border-radius: 4px;
}
.blocks--paginate .items--pages .item > a:hover {
  background-color: #bae2ee;
  opacity: 1;
}
.blocks--paginate .items--pages .item--selected > * {
  background-color: #e44849;
  font-weight: bold;
  color: #ffffff;
}
.blocks--paginate .prev,
.blocks--paginate .next{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2em;
  margin: 0 1.0em;
  padding: 0.25em 0.5em;
  background-color: #f6f6ef;
  border-radius: 0.2em;
  line-height: 1;
}
.blocks--paginate .prev .label,
.blocks--paginate .next .label {
  position: relative;
  display: inline-block;
  text-align: left;
  z-index: 1;
}
.blocks--paginate .prev::after ,
.blocks--paginate .next::after {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: #f6f6ef;
  border-radius: 0.2em;
  z-index: 0;
}
.blocks--paginate .prev::after {
  left: 0;
  transform: translate(-45%,-50%) rotate(45deg);
}
.blocks--paginate .next::after {
  right: 0;
  transform: translate(45%,-50%) rotate(45deg);
}
.blocks--paginate .prev:hover ,
.blocks--paginate .next:hover ,
.blocks--paginate .prev:hover::after ,
.blocks--paginate .next:hover::after {
  background-color: #bae2ee;
  opacity: 1;
}


.embed-video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-bottom: 2rem;
}
.embed-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}