@charset "UTF-8";
/* ==========================================================================
   Sections
========================================================================== */
.section {
  margin-top: 3.5em;
  margin-bottom: 3.5em;
}
.section-padding {
  padding-top: 2em;
  padding-bottom: 2em;
}
.content {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.container-fluid, .container {
  padding-right: 10px;
  padding-left: 10px;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
}
.row > .col,
.row > [class*="col"] {
  padding-right: 10px;
  padding-left: 10px;
}
.row.no-gutters {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.no-gutters > .col,
.no-gutters > [class*=col-] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.container .container {
  width: 100%;
}

@media (max-width: 575px) {
  .container {
    width: calc(100% - 20px);
  }
}
@media (min-width: 768px) {

}
@media (min-width: 992px) {
  .container {
    width: calc(100% - 40px);
    max-width: 720px;
  }
  .container.container-full {
    width: calc(100% - 40px);
    max-width: calc(720px + 275px);
  }
}
@media (min-width: 1200px) {
  .section {
    margin-top: 4.5em;
    margin-bottom: 4.5em;
  }
  .section-padding {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }
  .content {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .container {
    width: calc(100% - 40px);
    max-width: 1004px;
  }
  .container.container-full {
    max-width: calc(1004px + 300px);
  }
  .container.container_S {
    max-width: 724px;
  }
  .container-fluid, .container {
    padding-right: 12px;
    padding-left: 12px;
  }
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .row > .col,
  .row > [class*="col"] {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (min-width: 1366px) {
  .container.container-full {
    max-width: calc(100% - 40px);
    width: calc(1004px + 22vw);
  }
}

hr {
  border-top: 1px solid var(--border1);
  margin: 1em 0;
}
/* ==========================================================================
   Layout
========================================================================== */
.over-right {
  margin-right: calc(((100vw - 100%)/2)*-1);
}
.over-left {
  margin-left: calc(((100vw - 100%)/2)*-1);
}
@media (max-width: 575px) {
  .sp-full {
    margin-right: calc(((100vw - 100%)/2)*-1);
    margin-left: calc(((100vw - 100%)/2)*-1);
  }
}
/* ==========================================================================
   Links
========================================================================== */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1), transform .6s cubic-bezier(0.165, 0.84, 0.44, 1), color .6s cubic-bezier(0.165, 0.84, 0.44, 1), background .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a img {
  transition: opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1), transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

nav a {
  display: block;
  text-decoration: none;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 0;
  margin: 0;
}
nav ul li a {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.25;
  padding: .75em 0;
}
nav ul li a span {
  display: block;
  font-style: normal;
}
/* ==========================================================================
   Image
========================================================================== */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.fit-img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
figcaption {
  font-size: .75rem;
  line-height: 1.8;
  margin-top: 1em;
}
/* ==========================================================================
   Typography
========================================================================== */
.font1, .en_ttl {
  font-family: var(--font1);
  letter-spacing: 0;
}
.mincho {
  font-family: serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 400;
  position: relative;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {
  text-decoration: none;
}
h1, .h1 {
  font-size: 2.385em;
  line-height: 1.2;
}
h2, .h2 {
  font-size: 2em;
  line-height: 1.4;
}
h3, .h3 {
  font-size: 1.385em;
  line-height: 1.6;
}
h4, .h4 {
  font-size: 1.125em;
  line-height: 1.8;
}
h5, .h5 {
  font-size: 1.125em;
  line-height: 2;
}
h6, .h6 {
  font-size: 1em;
  line-height: 2.2;
}
.txt {
  font-size: .813rem;
}
small, .small {
  font-size: .857em;
}
.xsmall {
  font-size: .75em;
}
sup {
  font-size: .625em;
  vertical-align: top;
}
sub {
  font-size: .625em;
  vertical-align: bottom;
}

@media (min-width: 576px) {
  h1, .h1 {
    font-size: 3.126em;
    line-height: 1.2;
  }
  h2, .h2 {
    font-size: 2.262em;
    line-height: 1.4;
  }
  h3, .h3 {
    font-size: 1.625em;
    line-height: 1.6;
  }
  h4, .h4 {
    font-size: 1.25em;
    line-height: 1.8;
  }
  h5, .h5 {
    font-size: 1.125em;
    line-height: 2;
  }
}
p {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
p:first-child { margin-top: 0; }
p:last-child  { margin-bottom: 0; }
.fw-400, .text-normal { font-weight: 400 !important; }
.fw-500, .text-medium { font-weight: 500 !important; }
.fw-600, .text-semibold { font-weight: 600 !important; }
.fw-700, .text-bold { font-weight: 700 !important; }
.text-italic { font-style: italic; }
.text-justify { text-align: justify; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
@media (min-width: 576px) {
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
  .text-sm-center { text-align: center !important; }
}
@media (min-width: 768px) {
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
  .text-md-center { text-align: center !important; }
}
@media (min-width: 992px) {
  .text-lg-left { text-align: left !important; }
  .text-lg-right { text-align: right !important; }
  .text-lg-center { text-align: center !important; }
}
@media (min-width: 1200px) {
  .text-xl-left { text-align: left !important; }
  .text-xl-right { text-align: right !important; }
  .text-xl-center { text-align: center !important; }
}
/* ==========================================================================
   Button
========================================================================== */
.more-btn {
  display: inline-block;
  text-align: left;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: .05em;
  line-height: 1.2;
  font-weight: 400;
  padding: 1.25em 2.75em 1.25em 0;
  width: 18.5em;
  max-width: 100%;
  color: var(--black);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color3);
  text-decoration: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .6s cubic-bezier(0.165, 0.84, 0.44, 1), background .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.more-btn::before {
  content: '';
  position: absolute;
  right: .65em;
  top: 50%;
  transform: translateY(-50%);
  width: 2.125em;
  height: 2.125em;
  border-radius: 50%;
  background-color: var(--color0);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.45%22%20height%3D%2210.45%22%20viewBox%3D%220%200%2010.45%2010.45%22%3E%3Cline%20x1%3D%22.35%22%20y1%3D%2210.1%22%20x2%3D%2210.08%22%20y2%3D%22.37%22%20fill%3D%22none%22%20stroke%3D%22%23534741%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10.05%2C.42S5.21%2C3.66%2C1.82%2C1.15%22%20fill%3D%22none%22%20stroke%3D%22%23534741%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10.03%2C.4s-3.25%2C4.83-.73%2C8.23%22%20fill%3D%22none%22%20stroke%3D%22%23534741%22%20stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32%;
}
.more-btn > span {
  display: block;
  position: relative;
  overflow: hidden;
}
.more-btn .roll-txt,
.more-btn > span::before {
  display: block;
  transition: opacity .6s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.more-btn > span::before {
  content: attr(data-text);
  position: absolute;
  top: 120%;
  left: 0;
  opacity: 0;
}
a:hover .more-btn .roll-txt,
.more-btn:hover .roll-txt {
  opacity: 0;
  transform: translate3d(0,-120%,0);
}
a:hover .more-btn > span::before,
.more-btn:hover > span::before {
  opacity: 1;
  transform: translate3d(0,-120%,0);
}

.more-btn.view-more {
  width: 14.5em;
}


.txt-btn {
  display: inline-block;
  text-align: left;
  font-size: .938em;
  font-family: inherit;
  letter-spacing: .05em;
  line-height: 1.2;
  font-weight: 400;
  padding: .5em 1.5em .5em 0;
  max-width: 100%;
  color: var(--color1) !important;
  border-bottom: 1px solid var(--color1);
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
  position: relative;
}
.txt-btn::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: .5em;
  width: 1em;
  height: 1em;
  border-radius: 0;
  background-color: transparent;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2010.45%2010.45%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C79F62%22%20stroke-miterlimit%3D%2210%22%3E%3Cpath%20d%3D%22m.35%2010.1%209.73-9.73%22%2F%3E%3Cpath%20d%3D%22m10.05.42s-4.84%203.24-8.23.73%22%2F%3E%3Cpath%20d%3D%22m10.03.4s-3.25%204.83-.73%208.23%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  transition: transform .2s;
}
.txt-btn:hover::before {
  transform: translate(2px, -2px);
  transition: transform .2s;
}

.btn,
[type="submit"] {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .923rem;
  font-family: inherit;
  letter-spacing: .05em;
  line-height: 1.2;
  font-weight: 400;
  padding: 1.25em 0;
  width: 18.5em;
  max-width: 100%;
  color: #FFF;
  background-color: var(--color3);
  border: 1px solid transparent;
  border-radius: 3em;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .6s cubic-bezier(0.165, 0.84, 0.44, 1), background .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn.btn-back,
.btn.btn-w {
  color: var(--color3);
  border-color: var(--color3);
  background-color: #FFF;
}
.btn.btn_S {
  display: inline-block;
  padding: 1em 2.25em;
  width: auto;
}
.btn .share {
  display: block;
  width: 1.4em;
  height: 1.4em;
  margin-left: .75em;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2026.32%2027.32%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m24.45%2015.04v11.78h-22.58v-11.78%22%2F%3E%3Cpath%20d%3D%22m6.63%207.03%206.53-6.53%206.53%206.53%22%2F%3E%3Cpath%20d%3D%22m13.16.5v15.99%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22m0%20.5h26.32v26.32h-26.32z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  transition: 0.2s cubic-bezier(0.61, 1, 0.88, 1);
}
.btn .dl {
  display: block;
  width: 1.4em;
  height: 1.4em;
  margin-left: .75em;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2015.13%2015.71%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.57%22%3E%3Cpath%20d%3D%22m14.06%208.65v6.77h-12.99v-6.77%22%2F%3E%3Cpath%20d%3D%22m11.32%205.72-3.75%203.76-3.76-3.76%22%2F%3E%3Cpath%20d%3D%22m7.57%209.48v-9.19%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22m0%20.29h15.13v15.13h-15.13z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  transition: 0.2s cubic-bezier(0.61, 1, 0.88, 1);
}

.btn:hover {
  background-color: var(--color4);
}
.btn.btn-back:hover,
.btn.btn-w:hover {
  background-color: var(--l-gray2);
}


.buttons.row {
  margin-right: -12px;
  margin-left: -12px;
}
.buttons.row > div {
  padding-right: 12px;
  padding-left: 12px;
  margin-bottom: 12px;
}
.buttons.row > div .btn {
  min-width: 100%;
}
@media (min-width: 768px) {
  .buttons.row > div {
    margin-bottom: 24px;
  }
}
/* ==========================================================================
   Badge
========================================================================== */
.badge {
  display: inline-block;
  border-radius: 2em;
  padding: .5em .75em;
  background: var(--color2);
  color: #FFF;
  font-size: .75em;
  line-height: 1;
  white-space: nowrap;
}
.badge.tax-fee {
  background: var(--l-red);
  color: var(--red);
}

.round-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: var(--red);
  color: #FFF;
  font-family: var(--font1);
  font-size: .813em;
  line-height: 1.25;
  text-align: center;
  position: absolute;
  top: 0;
  left: .75em;
  z-index: 2;
  transform: translateY(-50%);
}
.round-badge span {
  display: block;
}

/* ==========================================================================
   Tag list
========================================================================== */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -.2em;
}
.tag-list > a {
  display: inline-block;
  border-radius: 2em;
  padding: .75em .85em;
  margin: .25em .2em;
  background: #FFF;
  font-size: .923em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.tag-list > a:hover {
  background: var(--color2);
  color: #FFF;
}
@media (min-width: 576px) {
  .tag-list {
    margin: 0 -.3em;
  }
  .tag-list > a {
    margin: .4em .3em;
    padding: .75em 1.5em;
  }
}
@media (min-width: 992px) {
  .tag-list {
    margin: 0 -.4em;
  }
  .tag-list > a {
    padding: .75em 1.75em;
    margin: .4em;
    font-size: .875em;
  }
}

/* ==========================================================================
   Border
========================================================================== */
.border {
  border: 1px solid var(--border1);
}
.border-y {
  border-top: 1px solid var(--border1);
  border-bottom: 1px solid var(--border1);
}
.border-x {
  border-right: 1px solid var(--border1);
  border-left: 1px solid var(--border1);
}
.border-t {
  border-top: 1px solid var(--border1);
}
.border-r {
  border-right: 1px solid var(--border1);
}
.border-b {
  border-bottom: 1px solid var(--border1);
}
.border-l {
  border-left: 1px solid var(--border1);
}
/* ==========================================================================
   Headline
========================================================================== */
.section__header {
  position: relative;
}
.section__header .ttl {
  display: inline-block;
  line-height: 1.6;
}
.section__header .ja_ttl {
  font-weight: 400;
  margin: .5em 0;
  font-feature-settings: "palt";
  letter-spacing: .06em;
}
.section__header p {
  margin: 1.75em 0;
}
.section__header .en_ttl {
  font-weight: 400;
}
.section__header .en_ttl + p {
  margin: .5em 0 0;
}
.section__header .en_ttl + .ttl {
  margin: .25rem 0 0;
}


.content__header {
  line-height: 1.5;
  margin-bottom: 1.5em;
}
.content__header .ttl {
  display: flex;
  align-items: center;
  line-height: 1.5;
  position: relative;
}
.content__header h3.ttl {
  border-left: .2em solid var(--color2);
  padding-left: .5em;
}

.content__header h4.ttl {
  padding-left: 1em;
}
.content__header h4.ttl::before {
  content: '';
  display: inline-block;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--color2);
  position: absolute;
  top: .5em;
  left: 0;
}
@media (min-width: 768px) {
  .content__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .content__header h3.ttl + p {
    margin: 0 0 0 3em;
  }
}


/* ==========================================================================
   Tab
========================================================================== */
.search-tabBox .tab-panels + .link {
  font-size: .923em;
}
.search-tabBox .link a {
  display: block;
  padding: .25em 1.25em .25em 0;
  margin-top: .25em;
  margin-left: 1.5em;
  position: relative;
}
.search-tabBox .link a::before {
  content: '';
  display: block;
  width: .5em;
  height: .5em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: .5em;
}
.tabs-wrap {
  font-size: .846em;
}
.tabs {
  display: flex;
  list-style-type: none;
  border-bottom: 1px solid var(--color3);
}
.tabs li {
  height: 3.5em;
  flex-basis: 100%;
  display: flex;
  align-items: flex-end;
}
.tabs li:not(:last-child) {
  margin-right: 2px;
}
.tabs li > span {
  cursor: pointer;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.25;
  text-align: center;
  border-radius: .5rem .5rem 0 0;
  background: var(--l-gray);
  color: var(--color3);
  transition: height .3s cubic-bezier(0.165, 0.84, 0.44, 1), background .3s cubic-bezier(0.165, 0.84, 0.44, 1), color .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}
.tabs li:hover > span,
.tabs li.active > span {
  height: 100%;
}
.tabs li.active > span {
  background: var(--color3);
  color: #FFF;
  cursor: auto;
}
.tabs li svg {
  fill: currentColor;
  margin-right: .5em;
}
.tab-panels {
  border-radius: 0 0 .5rem .5rem;
  background: var(--l-gray);
}
.tab-panel {
  padding: 1em .5em;
  overflow: hidden;
}
.tab-select .tab-panel:not(.active) {
  display: none;
}
@media (min-width: 576px) {
  .tab-panel {
    padding: 1.25em .75em;
  }
}
@media (min-width: 768px) {
  .search-tabBox .link a {
    margin-top: .5em;
  }
  .tabs-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tabs li {
    flex-basis: auto;
    min-width: 152px;
  }
  .tabs li:not(:last-child) {
    margin-right: .75em;
  }
  .tab-panels {
    border-radius: 0 .5rem .5rem .5rem;
  }
}
@media (min-width: 1200px) {
  .tabs-wrap {
    font-size: .75em;
    justify-content: flex-start;
  }
  .tabs li {
    min-width: 168px;
    height: 3.75em;
  }
}

/* tab-panel tag & cat */
.tab-panel .tags,
.tab-panel .cats {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  font-size: .923em;
  line-height: 1.25;
}
.tab-panel .tags li,
.tab-panel .cats li {
  margin: .25em 0;
}
.tab-panel .tags li a,
.tab-panel .tags li label,
.tab-panel .cats li a,
.tab-panel .cats li label {
  display: block;
  padding: .25em 1em;
  transition: color .2s;
}
.tab-panel .tags li a:hover,
.tab-panel .tags li.active a,
.tab-panel .tags li label:hover,
.tab-panel .cats li a:hover,
.tab-panel .cats li.active a,
.tab-panel .cats li label:hover {
  color: var(--color1);
}

.tab-panel .tags li label input[type="checkbox"],
.tab-panel .tags li label input[type="radio"],
.tab-panel .cats li label input[type="checkbox"],
.tab-panel .cats li label input[type="radio"] {
  display: none;
}
.tab-panel .tags li label input[type="checkbox"] + span,
.tab-panel .tags li label input[type="radio"] + span,
.tab-panel .cats li label input[type="checkbox"] + span,
.tab-panel .cats li label input[type="radio"] + span {
  display: block;
}
.tab-panel .tags li label input[type="checkbox"]:checked + span,
.tab-panel .tags li label input[type="radio"]:checked + span,
.tab-panel .cats li label input[type="checkbox"]:checked + span,
.tab-panel .cats li label input[type="radio"]:checked + span {
  color: var(--color1);
}

@media (max-width: 575px) {
  .tab-panel .tags li,
  .tab-panel .cats li {
    flex: 0 0 50%;
  }
}
@media (min-width: 576px) {
  .tab-panel .tags li,
  .tab-panel .cats li {
    margin: .5em 0;
  }
  .tab-panel .tags li:not(:last-child),
  .tab-panel .cats li:not(:last-child) {
    border-right: 1px solid var(--border1);
  }
}
@media (min-width: 1200px) {
  .tab-panel .tags,
  .tab-panel .cats {
    font-size: .875em;
  }
}


/* tab-panel initial */
.tab-panel .initials {
  max-width: 26.5em;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  font-size: .923em;
  line-height: 1.25;
  padding: .25em .75em;
  margin: 0 auto;
}
.tab-panel .initials li {
  flex: 0 0 5em;
  padding: .25em;
}
.tab-panel .initials li a {
  height: 4.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border1);
  background: transparent;
}
.tab-panel .initials li a:hover,
.tab-panel .initials li.active a {
  background: #FFF;
}
@media (min-width: 768px) {
  .tab-panel .initials {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .tab-panel .initials {
    font-size: .857em;
  }
}
@media (min-width: 1200px) {
  .tab-panel .initials {
    font-size: .875em;
  }
}

/* ==========================================================================
   Search results
========================================================================== */
.result-number span {
  display: inline-block;
}
.result-number span.num {
  font-size: 2.3125em;
  margin: 0 .25em;
}
/* ==========================================================================
   Ajax Search results
========================================================================== */
#ajax-result {
  position: relative;
}

/* loading */
#ajax-loader {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
#ajax-loader .loadingMsg {
    width: 38px;
    height: 38px;
    text-align: center;
    position: absolute;
    top: 11em;
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================================================================
   Responsive iframe
========================================================================== */
.iframeBox {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.iframeBox iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ==========================================================================
   List
========================================================================== */
ul.inside {
  list-style-type: none;
}
ul.inside li{
  line-height: 2;
  position: relative;
  padding-left: 16px;
}
ul.inside li:before {
  content: "";
  position: absolute;
  top: calc((2em - 6px)/2);
  left: 0;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: 50%;
}

ul.row, ol.row, .lists {
  list-style-type: none;
}
/* ==========================================================================
   Table of contents
========================================================================== */
ul.toc {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  font-size: .923em;
  line-height: 1.25;
  margin: 0 -.5em;
}
ul.toc li {
  flex-basis: 50%;
  padding: 0 .5em;
  margin-bottom: .5em;
  position: relative;
}
ul.toc li a {
  display: flex;
  align-items: center;
  height: 3.5em;
  padding: 0 1.25em 0 0;
  border-bottom: 1px solid var(--border1);
  color: inherit;
  text-decoration: none;
  position: relative;
}
ul.toc li a::before {
  content: '';
  display: block;
  width: .6em;
  height: .6em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  position: absolute;
  top: 50%;
  right: .5em;
  transform: rotate(45deg) translateY(-50%);
}
ul.toc li a:hover {
  opacity: .5;
}
ul.toc li a img.pict,
ul.toc li a img.icon {
  display: inline-block;
  width: 2em;
  margin-right: .5em;
}
ul.toc li a span {
  display: inline-block;
}

@media (min-width: 768px) {
  ul.toc li {
    flex-basis: 33.33333%;
  }
}
@media (min-width: 992px) {
  ul.toc {
    margin: 0 -1em;
  }
  ul.toc li {
    padding: 0 1em;
  }
  ul.toc li a {
    height: 4em;
  }
}
@media (min-width: 1200px) {
  ul.toc {
      font-size: .875em;
  }
  ul.toc li {
    flex-basis: 25%;
    margin-bottom: 0;
  }
  ul.toc li::before {
    content: '';
    display: block;
    width: 1px;
    background: var(--border1);
    position: absolute;
    top: .75em;
    bottom: .75em;
    left: 0;
    transform: translateX(-50%);
  }
  ul.toc li:first-child::before,
  ul.toc li:nth-child(4n + 1)::before {
    display: none;
  }
  ul.toc li:last-child::after {
    content: '';
    display: block;
    width: 1px;
    background: var(--border1);
    position: absolute;
    top: .75em;
    bottom: .75em;
    right: 0;
    transform: translateX(50%);
  }
  ul.toc li:nth-child(4n)::after {
    display: none;
  }
}

/* ==========================================================================
   Card
========================================================================== */
.cards {
  list-style-type: none;
}
.cards > * {
  padding-bottom: 2.5em;
}
.card {
  line-height: 1.6;
  position: relative;
}
.card > a {
  display: block;
}
.card > a:hover {
  opacity: .6;
}
.card .card-header {
  margin-bottom: 1.25em;
}
.card .card-img {
  padding-bottom: 100%;
  margin-bottom: .75em;
  position: relative;
}
.card .card-img_half {
  padding-bottom: 52.5%;
  margin-bottom: .75em;
  position: relative;
}
.card .card-img img,
.card .card-img_half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.card .card-img .badge {
  background: #FFF;
  color: var(--black);
  border-radius: 0 .25em 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.card .card-body {

}
.card .card-body .ttl {
  display: block;
  font-size: 1em;
  font-feature-settings: "palt";
  letter-spacing: .08em;
  line-height: 1.6;
}
.card.shop-card .card-body .ttl {
  line-height: 1.35;
}
.card .badges {
  display: flex;
  align-items: center;
  margin-top: .75em;
}
.card .badges > *:not(:last-child) {
  margin-right: .5rem;
}
.card .card-footer {
  margin-top: 1.5em;
  padding-top: .5em;
  border-top:1px solid var(--border2);
}

.card time {
  display: block;
  color: var(--color2);
  font-family: var(--font1);
  font-size: .846em;
}
.card .author,
.card .genre {
  font-size: .846em;
  color: var(--color1);
}
.card .genre {
  margin-top: .25em;
}
.card .tags {
  font-size: .846em;
  display: flex;
  flex-wrap: wrap;
  color: var(--color2);
}
.card .tags > span {
  display: inline-block;
}
.card .tags > span:not(:last-child) {
  margin-right: 1em;
}
.card .period {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .5em;
  font-size: .846em;
}
.card .period .label {
  display: inline-block;
  padding: .25em .75em;
  border-radius: 2em;
  background: var(--red);
  color: #FFF;
}
.card .period .date {
  
}

@media (min-width: 768px) {
  .card time,
  .card .author,
  .card .genre,
  .card .tags,
  .card .period {
    font-size: .75em;
  }
}



/* --------------------
  Limited store
-------------------- */
.limited-store .row {
  margin-right: -30px;
  margin-left: -30px;
}
.limited-store .row > div {
  padding-right: 30px;
  padding-left: 30px;
}
.limited-store .col-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
}
.limited-store #lobby .col-header .logo {
  width: 15em;
}
.limited-store #dsm .col-header .logo {
  width: 16.5em;
}
.limited-store .card {
  padding-bottom: 2.5em;
}
.limited-store .row .buttons.row > div {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .limited-store #lobby + #dsm {
    border-left: 1px solid var(--border1);
  }
  .limited-store .col-header {
    height: 3.5em;
  }
}
@media (min-width: 1200px) {
  .limited-store .row {
    margin-right: -45px;
    margin-left: -45px;
  }
  .limited-store .row > div {
    padding-right: 45px;
    padding-left: 45px;
  }
}

/* ==========================================================================
   Color
========================================================================== */
.white {
  color: #FFF;
}
.gray {
  color: var(--gray);
}
.red {
  color: var(--red);
}
.color1 {
  color: var(--color1);
}
.color2 {
  color: var(--color2);
}
.bg-white {
  background-color: #FFF;
}
.bg-l-gray {
  background-color: var(--l-gray);
}
.bg-color1 {
  background-color: var(--color1);
  color: #FFF;
}
section.bg-l-gray {
  overflow: hidden;
}



/* ==========================================================================
   Alert
========================================================================== */
.alert {
  background: var(--l-gray);
  padding: 1.25em;
  line-height: 1.5;
  border-radius: .5em;
}

table .alert {
  font-size: .923em;
}
@media (min-width: 768px) {
  table .alert {
    font-size: .857em;
  }
}
@media (min-width: 1200px) {
  table .alert {
    font-size: .813em;
  }
}

/* ==========================================================================
   table
========================================================================== */
table a {
  color: var(--blue);
  text-decoration: underline;
  word-break: break-all;
}
table {
  width: 100%;
  font-size: .923em;
  line-height: 1.8;
  position: relative;
}
table tr {
  border-bottom: 1px solid var(--border2);
  position: relative;
}
table tr:first-child {
  border-top: 1px solid var(--border2);
}
table tr::before,
table tr:first-child::after {
  content: '';
  display: block;
  width: 15%;
  height: 1px;
  background: var(--color1);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
}
table tr:first-child::after {
  top: -1px;
}
table th {
  background-color: transparent;
  padding: 1.5em 5.5% 1.5em 0;
  font-weight: inherit;
  text-align: left;
  white-space: nowrap;
}

table td {
  padding: 1.5em 0 1.5em 5.5%;
}
table td:first-child {
  padding: 1.5em 0;
}

@media (min-width: 768px) {
  table {
    font-size: .929em;
  }
}
@media (min-width: 1200px) {
  table {
    font-size: 1em;
  }
}


table.outline tr:first-child {
  border-top: 0;
}
table.outline tr::before,
table.outline tr:first-child::after {
  display: none;
}


/* ==========================================================================
   Post
========================================================================== */
.articleHeader {
  line-height: 1.6;
  position: relative;
}
.articleHeader .shop-data {
  display: flex;
  align-items: center;
}
.articleHeader .shop-data .logoBox {
  flex: 0 0 4em;
}
.articleHeader .shop-data .logoBox .shop-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--border1);
  overflow: hidden;
}
.articleHeader .shop-data .logoBox .shop-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.articleHeader .shop-data .txtBox {
  flex-basis: 100%;
  padding-left: 1.25em;
}
.articleHeader .shop-data .ttl {
  font-size: 1.538em;
  line-height: 1;
}

.articleHeader .entry-data {
  margin-top: 1.5em;
  margin-bottom: 1.25em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--border1);
}
.articleHeader .entry-ttl .ttl {
  font-feature-settings: "palt";
  letter-spacing: .04em;
}

.articleHeader time {
  display: block;
  color: var(--color2);
  font-family: var(--font1);
  font-size: .846em;
  margin-bottom: 2.5rem;
}
.articleHeader .author,
.articleHeader .genre {
  font-size: .846em;
  color: var(--color1);
}
.articleHeader .genre {
  margin-top: .5em;
}
.articleHeader .tags {
  font-size: .846em;
  display: flex;
  flex-wrap: wrap;
  color: var(--color2);
}
.articleHeader .tags > span {
  display: inline-block;
}
.articleHeader .tags > span:not(:last-child) {
  margin-right: 1em;
}
.articleHeader .period {
  display: flex;
  align-items: center;
  margin-top: 1.5em;
}
.articleHeader .period .label {
  display: inline-block;
  font-size: .846em;
  padding: .25em 1.25em;
  border-radius: 2em;
  background: var(--red);
  color: #FFF;
}
.articleHeader .period .date {
  padding-left: .75em;
}


@media (max-width: 767px) {
  .articleHeader .entry-ttl .ttl {
    font-size: 1.231em;
  }
}
@media (min-width: 768px) {
  .articleHeader time,
  .articleHeader .author,
  .articleHeader .genre,
  .articleHeader .tags,
  .articleHeader .period .label {
    font-size: .75em;
  }
  .articleHeader .period .date {
    font-size: .875em;
  }
}



.entry-content > * {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content a {
  color: var(--blue);
  text-decoration: underline;
  word-break: break-all;
}
.entry-content img {
  margin-bottom: 1.5em;
}
.entry-content p + p img {
  margin-top: 1.5em;
}
.entry-content p:empty {
  margin: 0!important;
  display: none!important;
}
.entry-content p:empty:before {
  content: initial!important;
}

@media (max-width: 767px) {
  .entry-content h3 {
      font-size: 1.231em;
  }
}


.entry-content .shopping-list {
  margin-bottom: 4em;
}
.entry-content .shopping-list li {
  padding: 1em 0;
  border-bottom: 1px dotted var(--border1);
  line-height: 1.6;
}
.entry-content .shopping-list li > div > a {
  color: var(--color1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.entry-content .shopping-list li > div small {
  display: inline-block;
  font-size: .75em;
}
.entry-content .shopping-list li .sale {
  color: var(--red);
  font-size: 1.25em;
  font-weight: 700;
  margin-right: .5em;
}
@media (max-width: 767px) {
  .entry-content .shopping-list li > div + div {
    padding-top: .5em;
  }
}
@media (min-width: 768px) {
  .entry-content .shopping-list li > div + div {
    padding-left: 1em !important;
  }
}




/* ==========================================================================
   Pagination - Archive
========================================================================== */
.pagination {
  text-align: center;
}
.pagination ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding: 0;
}
.pagination li {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.pagination li .page-numbers {
  text-decoration: none;
  margin: 0 .25em;
  padding: 0;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  line-height: 3.5;
  font-size: .75rem;
  display: block;
  position: relative;
}
.pagination li .dots {
  width: 1em;
  height: 2em;
  padding: 0 !important;
}
.pagination li a.page-numbers:hover,
.pagination li a.page-numbers:focus {
  background: rgba(0,0,0,0.1);
}
.pagination li .page-numbers.current {
  color: #FFF;
  background: var(--color3);
  cursor: default;
}
.pagination li .prev, .pagination li .next {
  display: block;
  margin: 1em 0;
  padding: 0 1.5em;
  color: currentColor;
  font-size: .75rem;
  font-weight: 700;
  position: relative;
}
.pagination li .next {
  text-align: right;
}
.pagination li .prev::before, .pagination li .next::before {
  content: '';
  display: inline-block;
  width: .5em;
  height: .5em;
  border-top: 1px solid currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
}
.pagination li .prev::before {
  border-left: 1px solid currentColor;
  transform: translate(-50%,-50%) rotate(-45deg);
}
.pagination li .next::before {
  border-right: 1px solid currentColor;
  transform: translate(-50%,-50%) rotate(45deg);
}
@media (min-width: 992px) {
  .pagination li .prev {
    margin: 0 .25em 0 0;
  }
  .pagination li .next {
    margin: 0 0 0 .25em;
  }
}


/* ==========================================================================
   SNS share buttons
========================================================================== */
.sns-share-buttons .inner {
  display: flex;
  align-items: center;
}
.sns-share-buttons .ttl {
  margin-right: 1em;
  color: var(--color3);
}
.sns-share-buttons ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}
.sns-share-buttons ul li {
  padding: 0 .6em;
}
.sns-share-buttons ul li a {
  display: block;
  line-height: 1;
}
.sns-share-buttons ul li a img {
  width: 2em;
  height: 2em;
}
.sns-share-buttons ul li a:hover {
  transform: scale(1.1);
}


@media (max-width: 991px) {
  #share-button-api {
    display: block;
  }
  #share-button-pc {
    display: none;
  }
}
@media (min-width: 992px) {
  #share-button-pc {
    display: block;
  }
  #share-button-api {
    display: none;
  }
}


/* ==========================================================================
   Slider (splide.js)
========================================================================== */
.splide__controller {
  display: flex;
  align-items: center;
  font-size: .813em;
}
.splide__counter {
  display: flex;
  align-items: center;
  font-family: var(--font1);
  font-weight: 500;
  margin-top: .25em;
  margin-right: .5em;
}
.splide__currentNum::after {
  content: '/';
  display: inline-block;
  padding: 0 .5em;
}
.splide__arrows {
  display: flex;
  align-items: center;
}
.splide__arrow {
  display: block;
  width: 2.4em;
  height: 2.4em;
  line-height: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25%;
}
.splide__arrow--next {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209.25%2017.08%22%3E%3Cpolyline%20points%3D%22.35%20.35%208.54%208.54%20.35%2016.72%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E');
}
.splide__arrow--prev {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209.25%2017.08%22%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%228.89%2016.72%20.71%208.54%208.89%20.35%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-miterlimit%3D%2210%22%2F%3E%3C%2Fsvg%3E');
}

.splide__pagination {
  padding: 0 10px;
  margin-top: 1em;
}
.splide__pagination li {
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.splide__pagination__page {
  background: var(--color3);
  border: 0;
  border-radius: 50%;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px;
  padding: 0;
  position: relative;
}
.splide__pagination__page::before {
  content: '';
  background: var(--color3);
  opacity: .13;
  border-radius: 50%;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(1);
  transition: transform .2s ease;
}
.splide__pagination__page.is-active::before {
  transform: translate(-50%,-50%) scale(2);
}

.splide__slide img {
  display: block;
  width: 100%;
}

@media (max-width: 767px) {
  .splide__pagination {
    margin-top: 0;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -30px;
    justify-content: flex-end;
  }
}


/* ==========================================================================
   Modal (iziModal.js)
========================================================================== */
.zoom-btn {
  line-height: 2.5;
  cursor: pointer;
  position: relative;
}
.zoom-btn::before {
  content: '';
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color: rgba(0,0,0,0);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%22800%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22800%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m289.391%20222.609v-222.609h-66.782v222.609h-222.609v66.782h222.609v222.609h66.782v-222.609h222.609v-66.782z%22%20fil%3D%22%23222%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: .5em;
  position: absolute;
  bottom: .5em;
  right: .5em;
  transition: background-color .3s;
}
.zoom-btn:hover::before {
  background-color: rgba(0,0,0,0.1);
}

.iziModal {
  width: calc(100% - 40px);
  max-width: 540px;
  box-shadow: none;
}
.iziModal .iziModal-header {
  background: transparent;
  padding: 1em 0;
  box-shadow: none;
}
.iziModal .iziModal-header.iziModal-noSubtitle .iziModal-button {
  background: none;
  position: relative;
  opacity: 1;
}
.iziModal .iziModal-button-close:hover {
  transform: rotate(0);
}
.iziModal .iziModal-button-close::before,
.iziModal .iziModal-button-close::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: #FFF;
  transform: translateY(-50%) rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
}
.iziModal .iziModal-button-close::after {
  transform: translateY(-50%) rotate(-45deg);
}
.iziModal-content {
  border-radius: .5em;
  overflow: hidden;
}

.iziModal-navigate {
  z-index: 999 !important;
}
.iziModal-navigate>button {
  opacity: 1;
  background: none !important;
}
.iziModal-navigate>button::before {
  content: '';
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-top: 1px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}
.iziModal-navigate>button.iziModal-navigate-next::before {
  border-right: 1px solid #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}
.iziModal-navigate>button.iziModal-navigate-prev::before {
  border-left: 1px solid #fff;
  transform: translate(-50%,-50%) rotate(-45deg);
}

@media (max-width: 708px) {
  .iziModal-navigate>button {
    width: 48px;
    margin: 0 !important;
  }
  .iziModal-navigate>button.iziModal-navigate-next {
    right: 0;
  }
  .iziModal-navigate>button.iziModal-navigate-prev {
    left: 0;
  }
  .iziModal-navigate>button::before {
    width: 1.25em;
    height: 1.25em;
  }
}