@charset "UTF-8";
/*/////////////////////////
 reset
//////////////////////////*/
@import "reset.css";
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0; /*font-size: 100%;font: inherit;*/
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

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

a, a:link, button {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none !important;
  color: inherit;
}

a:hover, a:active {
  text-decoration: none;
}

b, strong {
  font-weight: 700;
}

img,
svg {
  display: block;
  width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
}

/* 
================================================================================
tag
================================================================================
*/
img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
  height: auto;
}

img,
input,
svg,
*:before,
*:after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

a:hover img,
a:hover input {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

h1, h2, h3, h4, h5, h6,
dl dt {
  text-align: left;
  font-weight: 500;
}

a, a:link, a:active, a:visited {
  color: inherit;
  text-decoration: none;
}

svg {
  width: 100%;
  height: auto;
}
svg g path {
  stroke: #404040;
  fill: #404040;
  stroke-width: 0.05;
  stroke-dashoffset: 0;
}

/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
class
================================================================================
*/
a.link {
  color: #00a273;
}

p.s {
  font-size: 0.8em;
  line-height: 1.6;
}

.text-color-black {
  color: #303030;
}
.text-color-green {
  color: #00a273;
}
.text-color-key {
  color: #00a273;
}
.text-color-red {
  color: #D7000F;
}

.en {
  font-family: Poppins, monospace;
  letter-spacing: 0.07em;
}

.full,
.size-full {
  width: 100%;
}

.iconLink span {
  display: inline-block;
  padding-right: 7.3333333333vw;
}
@media screen and (min-width: 900px) {
  .iconLink span {
    padding-right: 1.875rem;
  }
}
.iconLink span::after {
  content: "";
  display: block;
  width: 5.3333333333vw;
  height: 4.2666666667vw;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
@media screen and (min-width: 900px) {
  .iconLink span::after {
    width: 1.25rem;
    height: 1rem;
  }
}
.iconLink.iconLeft span {
  padding-right: 0;
  padding-left: 7.3333333333vw;
}
@media screen and (min-width: 900px) {
  .iconLink.iconLeft span {
    padding-right: 0;
    padding-left: 1.875rem;
  }
}
.iconLink.iconLeft span::after {
  right: auto;
  left: 0;
  transform: translate(0, -50%) scale(-1, 1);
}

.iconArrowR span::after {
  background: url(../img/parts/arrow_right.svg) center center/contain no-repeat;
}

.bgKeyColor {
  background-color: #00a273;
}
.bgKeyColor * {
  color: #fff;
}

.bgLight {
  background-color: #f2f2eb;
}

.red {
  color: #D7000F;
}

.before::before, .after::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 900px) {
  .onlyPC {
    display: none !important;
  }
}

.onlySP {
  display: none;
}
@media screen and (max-width: 900px) {
  .onlySP {
    display: block !important;
  }
}

.inView {
  transition: all 1000ms cubic-bezier(0, 0, 0, 1);
}
.inView.fade {
  transform: translateY(3rem);
  opacity: 0;
}
.inView.blur {
  filter: blur(0.5em);
}

.inView.in.fade {
  transform: translateY(0rem);
  opacity: 1 !important;
}
.inView.in.blur {
  filter: blur(0);
}

.inView.out {
  opacity: 0;
}

.radius {
  border-radius: 1.25rem;
  overflow: hidden;
}

.tCenter {
  text-align: center;
}

.tLeft {
  text-align: left;
}

.tRight {
  text-align: right;
}

.colorKey {
  color: #00a273;
}

nav.more {
  display: flex;
  justify-content: flex-end;
  padding-top: 5rem;
}
nav.more.posLeft {
  justify-content: flex-start;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
}
@media screen and (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.grid.itemsCenter {
  align-items: center;
}
.grid.col_3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid.col_4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid.col_5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex .flexItem {
  margin: 0;
  width: 100%;
}

.spacer {
  display: block;
  width: 100%;
  height: 3rem;
}
.spacer.guide {
  border: dotted 1px #c00;
}
.spacer.guide::after {
  content: "実際には点線はありません、この囲い分のスペースがあきます";
  font-size: 0.6em;
}

main {
  width: 100%;
}

.fieldGroup:not(:last-child) {
  margin-bottom: 1.5em;
}

.imageGroup {
  display: grid;
  height: fit-content;
  grid-gap: 0.625rem;
}
.imageGroup.count_2 {
  grid-template-columns: 1fr;
}
.imageGroup.count_3 {
  grid-template-columns: 1fr 1fr;
}
.imageGroup.count_3 .item:nth-of-type(1) {
  grid-row: 1/2;
  grid-column: 1/3;
}
.imageGroup.count_3 .item:nth-of-type(2) {
  grid-row: 2/3;
  grid-column: 1/2;
}
.imageGroup.count_3 .item:nth-of-type(3) {
  grid-row: 2/3;
  grid-column: 2/3;
}
.imageGroup.count_4 {
  grid-template-columns: 1fr 1fr;
}
.field:not(:last-child) {
  margin-bottom: 0.5em;
}
.field.label::before {
  content: "●";
  display: inline-block;
}
.field.indent {
  padding-left: 1em;
  font-size: 0.9em;
  line-height: 2.2;
}
.field p:not(:last-child) {
  margin-bottom: 1em;
}
.field .members {
  display: table;
  width: auto !important;
  font-size: 0.9em;
  margin-top: 1em;
  line-height: 1.5;
  padding: 1em;
  background: rgba(0, 0, 0, 0.05);
}
.field .members ol, .field .members ul {
  padding: 0;
}
@media screen and (max-width: 900px) {
  .field .members ol, .field .members ul {
    padding: 0;
  }
}
.field .members ul {
  display: inline-block;
  letter-spacing: 0;
}
.field .members ul li {
  display: inline-block;
  margin-right: 0.2em;
}
.field .members ul li:not(:last-child)::after {
  content: " / ";
}
.field .members div {
  display: table;
  width: inherit;
  font-size: 0.9em;
  padding-top: 1em;
}

.bgBtn {
  width: auto;
  height: auto;
  background: #000;
  color: #fff;
  cursor: pointer;
  margin-bottom: 1.25rem;
  display: inline-flex;
  padding: 0.3125rem 2.5rem;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.bgBtn span {
  color: #fff;
}

dl.news > dt {
  height: 100%;
  display: flex;
  align-items: flex-start;
}
.clamp {
  display: -webkit-box;
  /* 必須 */
  -webkit-box-orient: vertical;
  /* 必須 */
  -webkit-line-clamp: 1;
  /* 行数を制限 */
  overflow: hidden;
  /* はみ出た部分を非表示 */
}

dl.count {
  counter-reset: count 0;
}
dl.count > dt {
  position: relative;
  padding: 0.5em 1em 0 2.5em !important;
}
dl.count > dt:before {
  counter-increment: count;
  content: counter(count) ". ";
  position: absolute;
  top: 0.5em;
  left: 0.3em;
  width: 1.5em;
  text-align: right;
}

ol {
  padding-left: 1.5em;
  counter-reset: section;
  list-style-type: none;
}
ol li:not(:last-child) {
  margin-bottom: 0.2em;
}
ol li::before {
  counter-increment: section;
  content: counters(section, ".") ".";
  position: absolute;
  left: 0;
  transform: translate(-110%, 0);
}
ol li ol {
  padding-top: 0.5em;
  padding-left: 2.5em;
  margin-bottom: 1em;
}
ol li ul {
  padding-top: 0.5em;
  padding-left: 1em;
  margin-bottom: 1em;
}
ol li ul li {
  padding-left: 0.5em !important;
}

ul {
  list-style: none;
  text-align: left;
  margin-left: 0;
  padding-left: 0;
}
ul li::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
ul.list li {
  padding-left: 1em;
}
ul.list li:not(:last-child) {
  margin-bottom: 0.2em;
}
ul.list li::before {
  content: "・";
}
ul.kome li {
  padding-left: 1em;
}
ul.kome li:not(:last-child) {
  margin-bottom: 0.2em;
}
ul.kome li::before {
  content: "※";
}
ul.maru li {
  padding-left: 1em;
}
ul.maru li:not(:last-child) {
  margin-bottom: 0.2em;
}
ul.maru li::before {
  content: "○";
}
ul.circle li {
  padding-left: 1.5em;
}
ul.circle li:not(:last-child) {
  margin-bottom: 0.2em;
}
ul.circle li::before {
  content: "";
  display: block;
  width: 3.3333333333vw;
  height: 3.3333333333vw;
  background: url(../img/icon/icon_ring.svg);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -45%);
}
@media screen and (min-width: 900px) {
  ul.circle li::before {
    width: 1.5625rem;
    height: 1.5625rem;
  }
}
ul.sns {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 40px;
  width: fit-content;
}
ul.sns li {
  width: 7.2vw;
  height: 7.2vw;
  display: flex;
  margin: 0;
}
@media screen and (min-width: 900px) {
  ul.sns li {
    width: 1.875rem;
    height: 1.875rem;
  }
}
ul.sns li:not(:last-child) {
  margin-right: 5.3333333333vw;
}
@media screen and (min-width: 900px) {
  ul.sns li:not(:last-child) {
    margin-right: 1.25rem;
  }
}
ul.sns li a {
  display: flex;
  width: 100%;
  height: 100%;
  background: #ccc;
}
ul.sns li a span {
  display: none;
}
ul.sns li.note a {
  background: url(../img/icon/icon_note.svg) center center/100% 100% no-repeat;
}
ul.sns li.instagram a {
  background: url(../img/icon/icon_instagram.svg) center center/100% 100% no-repeat;
}
ul.sns li.facebook a {
  background: url(../img/icon/icon_facebook.svg) center center/100% 100% no-repeat;
}
ul.sns li.x a {
  background: url(../img/icon/icon_twitter.svg) center center/100% 100% no-repeat;
}
ul.sns li.youtube {
  width: 8.2666666667vw;
}
@media screen and (min-width: 900px) {
  ul.sns li.youtube {
    width: 2.1875rem;
  }
}
ul.sns li.youtube a {
  background: url(../img/icon/icon_youtube.svg) center center/100% auto no-repeat;
}
ul.sns li.line {
  width: 7.4666666667vw;
}
@media screen and (min-width: 900px) {
  ul.sns li.line {
    width: 2rem;
  }
}
ul.sns li.line a {
  background: url(../img/icon/icon_line.svg) center center/100% auto no-repeat;
}

dl.grid {
  display: grid;
  grid-gap: 0.625rem;
  grid-template-columns: auto 1fr;
  width: fit-content;
  line-height: 1.8;
}
@media screen and (max-width: 900px) {
  dl.grid {
    grid-template-columns: 1fr;
  }
}
.global_full {
  width: 100%;
}

.global_inner {
  margin: 0 auto 0;
  width: 90%;
  display: block;
  height: fit-content;
  border-width: 0px;
  max-width: 89.3333333333vw;
}
@media screen and (min-width: 900px) {
  .global_inner {
    max-width: 1000px;
  }
}
.global_inner.widthMid {
  max-width: 800px;
}

a.boxBtn {
  color: #fff;
}

.slideWrap {
  margin-bottom: 11.3333333333vw;
}
@media screen and (min-width: 900px) {
  .slideWrap {
    margin-bottom: 5.3125rem;
  }
}
.slideWrap .swiperWrap .swiper {
  position: relative;
}
.slideWrap .swiperWrap .swiper .swiper-button-prev-clone,
.slideWrap .swiperWrap .swiper .swiper-button-next-clone {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  top: 0 !important;
  margin: 0 !important;
  width: 27.3%;
  height: 100%;
  transform: translate(0, 0) !important;
  z-index: 100;
}
@media screen and (max-width: 900px) {
  .slideWrap .swiperWrap .swiper .swiper-button-prev-clone,
  .slideWrap .swiperWrap .swiper .swiper-button-next-clone {
    display: none;
  }
}
.slideWrap .swiperWrap .swiper .swiper-button-prev-clone {
  left: 0 !important;
}
.slideWrap .swiperWrap .swiper .swiper-button-next-clone {
  right: 0 !important;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide {
  outline: none;
  pointer-events: auto;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide:focus {
  background: transparent;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide a {
  display: inline;
  color: #00a273 !important;
  padding-bottom: 0.05em;
  border-bottom: solid 1px #00a273;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide::selection {
  background-color: transparent;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide::after {
  content: "";
  display: none;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 1000ms cubic-bezier(0, 0, 0, 1);
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image {
  outline: none;
  opacity: 0.6;
  transition: all 1000ms cubic-bezier(0, 0, 0, 1);
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image:focus {
  background: transparent;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image::selection {
  background-color: transparent;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image img {
  outline: none;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image img:focus {
  background: transparent;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image img::selection {
  background-color: transparent;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide.swiper-slide-active .image, .slideWrap .swiperWrap .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .image {
  opacity: 1;
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide.swiper-slide-active .text, .slideWrap .swiperWrap .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .text {
  opacity: 1;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-wrapper .swiper-slide {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
  }
  .slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image {
    width: 100%;
    height: auto;
    aspect-ratio: 150/185;
    display: flex;
    overflow: hidden;
    pointer-events: none;
  }
  .slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image img {
    object-fit: cover;
    transform: scale(1.01);
  }
  .slideWrap .swiperWrap .swiper-wrapper .swiper-slide .image.aspect4-3 {
    aspect-ratio: 400/300;
  }
}
.slideWrap .swiperWrap .swiper-wrapper .swiper-slide .text {
  width: 100%;
  padding: 4vw;
  height: 26.6666666667vw;
  font-size: 3.4666666667vw;
  transition: all 1000ms cubic-bezier(0, 0, 0, 1) 300ms;
  opacity: 0;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-wrapper .swiper-slide .text {
    padding: 0.9375rem 5.625rem;
    height: 100px;
    font-size: 0.9em;
  }
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap.noText .swiper-wrapper .swiper-slide {
    overflow: hidden;
    display: flex;
  }
  .slideWrap .swiperWrap.noText .swiper-wrapper .swiper-slide .image {
    width: 100%;
    height: auto;
    aspect-ratio: 150/180;
    display: flex;
  }
  .slideWrap .swiperWrap.noText .swiper-wrapper .swiper-slide .image img {
    object-fit: cover;
  }
}
.slideWrap .swiperWrap.noText .swiper-wrapper .swiper-slide .text {
  display: none;
}
.slideWrap .swiperWrap .swiper-pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 13.3333333333vw;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-pagination-wrap {
    width: 25rem;
    height: 6.25rem;
  }
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination {
  margin: auto;
  transform: translate3d(0, -6%, 0);
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination .swiper-pagination-bullet {
  margin: 0 2.6666666667vw;
  width: 1.6vw;
  height: 1.6vw;
  border: 0;
  background: #666;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination .swiper-pagination-bullet {
    margin: 0 0.625rem;
    width: 0.625rem;
    height: 0.625rem;
  }
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination .swiper-pagination-bullet::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.9333333333vw;
  height: 2.9333333333vw;
  border: solid 0.8vw #00a273;
  border-radius: 50%;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination .swiper-pagination-bullet::after {
    width: 1.0625rem;
    height: 1.0625rem;
    border: solid 0.25rem #00a273;
  }
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: transparent;
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  display: block;
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-pagination-fraction {
  bottom: auto;
  top: 50%;
  width: auto;
  transform: translate(0%, -50%);
  text-align: center;
  outline: 0;
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-button-prev,
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-button-next {
  width: 5.3333333333vw;
  height: 4.2666666667vw;
  margin: 0;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-pagination-wrap .swiper-button-prev,
  .slideWrap .swiperWrap .swiper-pagination-wrap .swiper-button-next {
    width: 1.25rem;
    height: 1rem;
  }
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-button-prev {
  left: 0;
  background: url(../img/parts/arrow_left.svg) center center/contain no-repeat;
}
.slideWrap .swiperWrap .swiper-pagination-wrap .swiper-button-next {
  right: 0;
  background: url(../img/parts/arrow_right.svg) center center/contain no-repeat;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-thumbnail-wap {
    display: none;
  }
}
.slideWrap .swiperWrap .swiper-thumbnail-wap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2.6666666667vw;
  align-items: center;
  margin: auto;
}
@media screen and (min-width: 900px) {
  .slideWrap .swiperWrap .swiper-thumbnail-wap ul {
    grid-gap: 1.25rem;
    width: 37.5rem;
  }
}
.slideWrap .swiperWrap .swiper-thumbnail-wap ul li {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.slideWrap .swiperWrap .swiper-thumbnail-wap ul li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.swiper-thumbnail .swiper-slide {
  height: 12vw;
}
@media screen and (min-width: 900px) {
  .swiper-thumbnail .swiper-slide {
    height: 5.625rem;
  }
}

.categoryTag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: 13.3333333333vw;
  height: 3.2vw;
  border-radius: 1.6vw;
  background: #00a273;
  color: #fff;
  padding: 0em 1em;
  line-height: 0;
  letter-spacing: 0;
  font-size: 1.92vw;
}
@media screen and (min-width: 900px) {
  .categoryTag {
    height: 1.125rem;
    min-width: 5rem;
    border-radius: 0.75rem;
    font-size: 0.625rem;
  }
}
.categoryTag.note {
  background: #303030;
}
.entryListWrap .entryList {
  margin-bottom: 2.6666666667vw;
}
@media screen and (min-width: 900px) {
  .entryListWrap .entryList {
    margin-bottom: 1.25rem;
  }
}
.entryListWrap .entryList dl {
  border-bottom: dotted 0 #00a273;
  padding-bottom: 2.6666666667vw;
}
.entryListWrap .entryList dl::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.3333333333vw;
  background: radial-gradient(circle farthest-side, #00a273, #00a273 0.2666666667vw, transparent 0.2666666667vw, transparent);
  background-size: 1.3333333333vw 1.3333333333vw;
}
@media screen and (min-width: 900px) {
  .entryListWrap .entryList dl::after {
    height: 0.625rem;
    background: radial-gradient(circle farthest-side, #00a273, #00a273 0.125rem, transparent 0.125rem, transparent);
    background-size: 0.625rem 0.625rem;
  }
}
@media screen and (min-width: 900px) {
  .entryListWrap .entryList dl {
    padding-bottom: 15px;
  }
}
.entryListWrap .entryList dl:not(:last-child) {
  margin-bottom: 4vw;
}
@media screen and (min-width: 900px) {
  .entryListWrap .entryList dl:not(:last-child) {
    margin-bottom: 30px;
  }
}
.entryListWrap .entryList dl dt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1em;
  align-content: center;
  align-items: center;
  font-size: 3.2vw;
}
@media screen and (min-width: 900px) {
  .entryListWrap .entryList dl dt {
    font-size: 1.125rem;
    margin-bottom: 0.3125rem;
  }
}
.entryListWrap .entryList dl dd {
  font-size: 3.4666666667vw;
  font-weight: 500;
  line-height: 1.5;
  min-height: 10.6666666667vw;
}
@media screen and (min-width: 900px) {
  .entryListWrap .entryList dl dd {
    font-size: 1.5rem;
    min-height: 5rem;
  }
}
.entryListWrap .more {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.entryListWrap .more a {
  display: inline-block;
}
.posts-navigation .nav-links {
  display: flex;
  justify-content: space-between;
}
.posts-navigation .nav-links .nav-previous a,
.posts-navigation .nav-links .nav-next a {
  display: inline-block;
}
.posts-navigation .nav-links .nav-previous a::after,
.posts-navigation .nav-links .nav-next a::after {
  content: "";
  display: block;
  width: 5.3333333333vw;
  height: 4.2666666667vw;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  background: url(../img/parts/arrow_right.svg) center center/contain no-repeat;
}
@media screen and (min-width: 900px) {
  .posts-navigation .nav-links .nav-previous a::after,
  .posts-navigation .nav-links .nav-next a::after {
    width: 1.25rem;
    height: 1rem;
  }
}
.posts-navigation .nav-links .nav-previous.deactive,
.posts-navigation .nav-links .nav-next.deactive {
  opacity: 0.2;
}
.posts-navigation .nav-links .nav-previous a {
  padding-left: 7.3333333333vw;
}
@media screen and (min-width: 900px) {
  .posts-navigation .nav-links .nav-previous a {
    padding-left: 1.875rem;
  }
}
.posts-navigation .nav-links .nav-previous a::after {
  left: 0;
  transform: translate(0, -50%) scale(-1, 1);
}
.posts-navigation .nav-links .nav-next a {
  padding-right: 7.3333333333vw;
}
@media screen and (min-width: 900px) {
  .posts-navigation .nav-links .nav-next a {
    padding-right: 1.875rem;
  }
}
.posts-navigation .nav-links .nav-next a::after {
  right: 0;
}

.contentsMeta dt {
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}
.contentsMeta dt .date {
  margin-right: 1em;
}
.contentsMeta dd h3.contentsTitle {
  font-size: 4.8vw;
  line-height: 1.5;
  margin-bottom: 8vw;
}
@media screen and (min-width: 900px) {
  .contentsMeta dd h3.contentsTitle {
    font-size: 1.5rem;
    margin-bottom: 3.75rem;
  }
}

.contentsBody h4 {
  padding-top: 0em;
  font-size: 4.8vw;
  color: #00a273;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 1.3333333333vw;
}
@media screen and (min-width: 900px) {
  .contentsBody h4 {
    font-size: 1.5rem;
    margin-bottom: 0.625rem;
  }
}
.contentsBody h4.black {
  color: #303030;
}
.contentsBody h4:nth-of-type(1) {
  padding-top: 0;
}
.contentsBody .image {
  margin-bottom: 2em;
}
.contentsBody .image.overWidth {
  width: 100vw;
  left: 50%;
  transform: translate(-50vw, 0);
}
@media screen and (min-width: 900px) {
  .contentsBody .image.overWidth {
    width: 100%;
    transform: translate(-50%, 0);
    display: flex;
  }
}
.contentsBody iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 560/315;
}
.contentsBody a.active {
  pointer-events: all !important;
}
.contentsBody textarea {
  width: 100%;
  min-height: 15rem;
  margin-bottom: 5rem;
  font-size: 0.8em;
  padding: 1em;
}
.contentsBody textarea.mini {
  min-height: 7rem;
}
.contentsBody img.size-window {
  left: 50%;
  width: 100vw;
  transform: translate(-50vw, 0);
  max-width: none;
}
@media screen and (min-width: 900px) {
  .contentsBody img.size-80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.contentsBody .wp-caption {
  width: 100% !important;
}
.contentsBody .wp-caption .wp-caption-text {
  padding-top: 0.5em;
  font-size: 0.85em;
  line-height: 1.4;
  margin-bottom: 1em;
}
.contentsBody div.line {
  width: 100%;
  min-height: 3em;
}
.contentsBody div.line::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1.3333333333vw;
  top: 50%;
  transform: translate(0, -50%);
  background: radial-gradient(circle farthest-side, #303030, #303030 0.2666666667vw, transparent 0.2666666667vw, transparent);
  background-size: 1.3333333333vw 1.3333333333vw;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  .contentsBody div.line::after {
    height: 0.625rem;
    background: radial-gradient(circle farthest-side, #303030, #303030 0.125rem, transparent 0.125rem, transparent);
    background-size: 0.625rem 0.625rem;
  }
}
.contentsBody div.dotline {
  width: 100%;
  min-height: 3em;
  margin-bottom: 2em;
}
.contentsBody div.dotline::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1.3333333333vw;
  top: 50%;
  transform: translate(0, -50%);
  background: radial-gradient(circle farthest-side, #00a273, #00a273 0.2666666667vw, transparent 0.2666666667vw, transparent);
  background-size: 1.3333333333vw 1.3333333333vw;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  .contentsBody div.dotline::after {
    height: 0.625rem;
    background: radial-gradient(circle farthest-side, #00a273, #00a273 0.125rem, transparent 0.125rem, transparent);
    background-size: 0.625rem 0.625rem;
  }
}
.contentsBody div.gallery {
  display: grid;
  width: 100%;
  grid-gap: 1.5em;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 900px) {
  .contentsBody div.gallery {
    grid-gap: 1em;
  }
}
@media screen and (max-width: 900px) {
  .contentsBody div.gallery .wp-caption-text {
    margin-bottom: 0;
  }
}
.contentsBody div.gallery div {
  width: 100% !important;
}
.contentsBody div.gallery.count_1 {
  grid-template-columns: 1fr;
}
.contentsBody div.gallery.count_type_odd div:first-child {
  grid-row: 1/2;
  grid-column: 1/3;
  width: 100%;
  max-width: none;
}
.contentsBody div.gallery .wp-caption .wp-caption-image {
  width: 100%;
  aspect-ratio: 4/3;
}
.contentsBody dl.label dt {
  color: #00a273;
  font-weight: 500;
  font-size: 5.6vw;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.label dt {
    font-size: 1.625rem;
  }
}
.contentsBody dl.label dd {
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: dotted 2px #00a273;
}
.contentsBody dl.label dd img {
  margin-top: 1em;
}
.contentsBody dl.label dd ul {
  margin-top: 1em;
}
.contentsBody dl.label.black dt {
  color: #303030;
}
.contentsBody dl.label.black dd {
  border-color: #303030;
}
.contentsBody dl.label.noborder dd {
  border-bottom: 0;
}
.contentsBody dl.program {
  padding-top: 1.25rem;
  margin-bottom: 5rem;
  display: block;
}
.contentsBody dl.program::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.3333333333vw;
  background: radial-gradient(circle farthest-side, #00a273, #00a273 0.2666666667vw, transparent 0.2666666667vw, transparent);
  background-size: 1.3333333333vw 1.3333333333vw;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.program::after {
    height: 0.625rem;
    background: radial-gradient(circle farthest-side, #00a273, #00a273 0.125rem, transparent 0.125rem, transparent);
    background-size: 0.625rem 0.625rem;
  }
}
.contentsBody dl.program.noline {
  padding-top: 0;
}
.contentsBody dl.program.noline::after {
  display: none;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.program {
    display: grid;
    padding-top: 2.5rem;
    grid-gap: 0rem 2.5rem;
    grid-template-columns: 1fr 30%;
    grid-template-rows: auto 1fr;
    align-content: flex-start;
    align-items: flex-start;
  }
}
.contentsBody dl.program dt {
  color: #00a273;
  text-align: left;
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 1em;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.program dt {
    grid-row: 1/2;
    grid-column: 1/2;
    margin-bottom: 2em;
  }
}
@media screen and (min-width: 900px) {
  .contentsBody dl.program dd:first-child {
    grid-row: 2/3;
    grid-column: 1/2;
  }
}
.contentsBody dl.program dd.image {
  margin: 0;
  padding-top: 1em;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.program dd.image {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    padding-top: 0;
    grid-row: 1/3;
    grid-column: 2/3;
  }
}
.contentsBody dl.column {
  margin-bottom: 2em;
  display: block;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.column {
    display: grid;
    padding-top: 0rem;
    grid-gap: 0rem 2.5rem;
    grid-template-columns: 1fr 30%;
    grid-template-rows: auto 1fr;
    align-content: flex-start;
    align-items: flex-start;
  }
}
.contentsBody dl.column dt {
  color: #00a273;
  text-align: left;
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 1em;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.column dt {
    grid-row: 1/2;
    grid-column: 1/2;
    margin-bottom: 1em;
  }
}
@media screen and (min-width: 900px) {
  .contentsBody dl.column dd:first-child {
    grid-row: 2/3;
    grid-column: 1/2;
  }
}
.contentsBody dl.column dd.image {
  margin: 0;
  padding-top: 1em;
}
@media screen and (min-width: 900px) {
  .contentsBody dl.column dd.image {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    padding-top: 0;
    grid-row: 1/3;
    grid-column: 2/3;
  }
}
@media screen and (min-width: 900px) {
  .contentsBody dl.column.harf {
    grid-template-columns: 1fr 1fr;
  }
}
.contentsBody .btnItem {
  display: flex;
  width: 100%;
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 2.5rem;
}
.contentsBody .btnItem.center {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.contentsBody .btnItem a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 15em;
  height: 80px;
  padding-left: 2em;
  padding-right: 2em;
  border: solid 1px #00a273;
  transition: all 150ms ease-in-out;
  background: #00a273;
  color: #fff;
}
.contentsBody .btnItem a:hover {
  background: #01845e;
}
@media screen and (max-width: 900px) {
  .contentsBody .btnItem a {
    height: 13.3333333333vw;
    min-width: 15em;
  }
}
.contentsBody section.oversection {
  width: 100vw;
  left: 50%;
  transform: translate(-50vw, 0);
  background-color: #fff;
  padding: 5em 0;
  padding: 9.3333333333vw 0vw;
}
@media screen and (min-width: 900px) {
  .contentsBody section.oversection {
    padding: 4.375rem 0;
  }
}

ul.linkList {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  line-height: 1.4;
  margin-bottom: 4em;
}
ul.linkList li {
  margin: 0 1em 0.5em 0;
  color: #666;
}
ul.linkList li.active {
  color: #00a273;
}

.preload {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.preload img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

@media screen and (min-width: 900px) {
  .dataWrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.5rem 2.5rem;
  }
}
.dataWrap .dataItem {
  display: grid;
  grid-template-columns: 41.3333333333vw auto;
  grid-gap: 2.6666666667vw;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem {
    grid-template-columns: 9.375rem auto;
    grid-gap: 1.25rem;
  }
}
.dataWrap .dataItem:not(:last-child) {
  margin-bottom: 8vw;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem:not(:last-child) {
    margin-bottom: 0rem;
  }
}
.dataWrap .dataItem.deactive {
  pointer-events: none;
}
.dataWrap .dataItem.deactive * {
  opacity: 0.5;
}
.dataWrap .dataItem .thumbnail {
  display: flex;
  aspect-ratio: 3/4;
  line-height: 0;
  padding: 0;
}
.dataWrap .dataItem .thumbnail a {
  display: flex;
}
.dataWrap .dataItem .thumbnail img {
  display: none;
  object-fit: cover;
  margin: 0;
  vertical-align: bottom;
  line-height: 0;
}
.dataWrap .dataItem dl dt {
  color: #00a273;
  margin-bottom: 4vw;
  line-height: 1.2;
  font-size: 5.3333333333vw;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -0.2em;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt {
    margin-bottom: 0.9375rem;
    font-size: 1.5rem;
  }
}
.dataWrap .dataItem dl dt a {
  padding-left: 0vw;
  min-height: auto;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt a {
    padding-left: 0rem;
  }
}
.dataWrap .dataItem dl dt a span {
  transform: translate(0, 0em);
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt a span {
    transform: translate(0, 0);
  }
}
.dataWrap .dataItem dl dt a::before {
  content: "";
  display: none;
  background: #00a273;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt a::before {
    width: 3.75rem;
    height: 3.75rem;
  }
}
.dataWrap .dataItem dl dt a::after {
  content: "";
  display: none;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 10vw;
  font-size: 6.6666666667vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -52%);
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt a::after {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.875rem;
  }
}
.dataWrap .dataItem dl dt a .headImg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 10vw;
  font-size: 6.6666666667vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -52%);
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt a .headImg {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.875rem;
  }
}
.dataWrap .dataItem dl dt .category {
  display: block;
  width: 100%;
  color: #b2b2b2;
  font-size: 3.2vw;
  padding-top: 1em;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dt .category {
    font-size: 0.875rem;
  }
}
.dataWrap .dataItem dl dt .category a {
  display: inline-block;
  margin-right: 1em;
}
.dataWrap .dataItem dl dd {
  font-size: 3.6vw;
  line-height: 1.4;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dd {
    font-size: 0.9375rem;
  }
}
.dataWrap .dataItem dl dd a .summary {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media screen and (max-width: 900px) {
  .dataWrap .dataItem dl dd a .summary {
    -webkit-line-clamp: 4;
  }
}
.dataWrap .dataItem dl dd.links {
  position: absolute;
  bottom: 0;
  display: flex;
}
.dataWrap .dataItem dl dd.links a {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  opacity: 0.3;
}
@media screen and (min-width: 900px) {
  .dataWrap .dataItem dl dd.links a {
    width: 1.75rem;
    height: 1.75rem;
  }
}
.dataWrap .dataItem dl dd.links a.instagram {
  background: url(../img/icon/icon_instagram_black.svg) center center/100% 100% no-repeat;
}
.dataWrap .dataItem dl dd.links a.facebook {
  background: url(../img/icon/icon_facebook_black.svg) center center/100% 100% no-repeat;
}
.dataWrap .dataItem dl dd.links a.x {
  background: url(../img/icon/icon_twitter_black.svg) center center/100% 100% no-repeat;
}
.dataWrap .dataItem dl dd.links a.youtube {
  background: url(../img/icon/icon_youtube_black.svg) center center/100% 100% no-repeat;
}
.dataWrap .dataItem dl dd.links a.line {
  background: url(../img/icon/icon_line_black.svg) center center/100% 100% no-repeat;
}

.news h2.deco::after {
  background: url(../img/deco/deco_mount_gray.svg) left bottom/100% auto no-repeat !important;
}
.news.bgLight h2.deco::after {
  background: url(../img/deco/deco_mount_white.svg) left bottom/100% auto no-repeat !important;
}

.project h2.deco::after {
  background: url(../img/deco/deco_circle_gray.svg) left bottom/100% auto no-repeat !important;
}
.project.bgLight h2.deco::after {
  background: url(../img/deco/deco_circle_white.svg) left bottom/100% auto no-repeat !important;
}

.access h2.deco::after {
  background: url(../img/deco/deco_bar_gray.svg) left bottom/100% auto no-repeat !important;
}
.access.bgLight h2.deco::after {
  background: url(../img/deco/deco_bar_white.svg) left bottom/100% auto no-repeat !important;
}

ul.role {
  justify-content: flex-start;
  padding-top: 2em;
  margin-bottom: 1em;
  font-weight: 500;
}
ul.role li:not(:first-child) {
  margin-left: 1em;
}
ul.role li.group {
  color: #00a33e;
}

dl.scheduleList {
  padding-bottom: 2.5rem;
}
dl.scheduleList::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 13.3333333333vw;
  height: 100%;
  background: #fff;
  z-index: 2;
}
@media screen and (min-width: 900px) {
  dl.scheduleList::before {
    width: 6.25rem;
  }
}
dl.scheduleList::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1.3333333333vw;
  background: radial-gradient(circle farthest-side, #00a273, #00a273 0.2666666667vw, transparent 0.2666666667vw, transparent);
  background-size: 1.3333333333vw 1.3333333333vw;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  dl.scheduleList::after {
    height: 0.625rem;
    background: radial-gradient(circle farthest-side, #00a273, #00a273 0.125rem, transparent 0.125rem, transparent);
    background-size: 0.625rem 0.625rem;
  }
}
dl.scheduleList dt .mark {
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  background: #00a33e;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.2666666667vw;
  letter-spacing: -0.01em;
  line-height: 0;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 900px) {
  dl.scheduleList dt .mark {
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
  }
}
dl.scheduleList dt .mark small {
  font-size: 0.6em;
}
dl.scheduleList dt::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 13.3333333333vw;
  height: 100%;
  background: #fff;
  z-index: 2;
}
@media screen and (min-width: 900px) {
  dl.scheduleList dt::before {
    width: 6.25rem;
  }
}
dl.scheduleList dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1.3333333333vw;
  background: radial-gradient(circle farthest-side, #00a273, #00a273 0.2666666667vw, transparent 0.2666666667vw, transparent);
  background-size: 1.3333333333vw 1.3333333333vw;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  dl.scheduleList dt::after {
    height: 0.625rem;
    background: radial-gradient(circle farthest-side, #00a273, #00a273 0.125rem, transparent 0.125rem, transparent);
    background-size: 0.625rem 0.625rem;
  }
}
dl.scheduleList dd {
  margin-top: -1.3333333333vw;
  margin-bottom: -1.3333333333vw;
  padding-left: 14vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.6666666667vw;
  min-height: 20vw;
}
@media screen and (min-width: 900px) {
  dl.scheduleList dd {
    margin-top: -0.625rem;
    margin-bottom: -0.625rem;
    padding-left: 6.25rem;
    grid-gap: 1.25rem;
    min-height: 9.375rem;
  }
}
dl.scheduleList dd ul li {
  padding-left: 1.2em;
  line-height: 1.5;
}
dl.scheduleList dd ul li::before {
  content: "○";
  display: inline-block;
}
dl.scheduleList dd ul li.group {
  color: #00a33e;
}
dl.scheduleList dd ul li.group::before {
  content: "◎";
}

.overWrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.topVisual {
  margin-bottom: 2em;
}

.map {
  width: 100%;
  height: 76vw;
  margin-bottom: 2em;
}
@media screen and (min-width: 900px) {
  .map {
    height: 31.25rem;
  }
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

dl.dataList dt {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  color: #00a273;
}
dl.dataList dd {
  margin-bottom: 2em;
}

.categoryList {
  font-size: 3.3333333333vw;
  font-weight: 500;
}
@media screen and (min-width: 900px) {
  .categoryList {
    font-size: 1.25rem;
    margin-bottom: 6.25rem;
  }
}
.categoryList ul {
  display: flex;
  margin-bottom: 13.3333333333vw;
}
@media screen and (min-width: 900px) {
  .categoryList ul {
    margin-bottom: 6.25rem;
  }
}
.categoryList ul li {
  margin-right: 2.6666666667vw;
}
@media screen and (min-width: 900px) {
  .categoryList ul li {
    margin-right: 1.25rem;
  }
}
.categoryList ul li a {
  color: #b2b2b2;
}
.categoryList ul li.current-term a {
  color: #00a273;
}

@keyframes slide {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes yuge_move1 {
  0% {
    transform: rotateY(0deg) scale(1, 1);
    opacity: 0;
    top: -20%;
  }
  25% {
    opacity: 0.7;
  }
  66% {
    opacity: 0.7;
    transform: scale(1.4, 1);
  }
  100% {
    transform: scale(1.5, 1);
    opacity: 0;
    top: -80%;
  }
}
@keyframes yuge_item_mov {
  0% {
    transform: rotateY(0deg) scale(1, 1);
    opacity: 0;
    top: 0%;
  }
  4% {
    transform: rotateY(0deg) scale(1, 1);
    opacity: 0.3;
  }
  33% {
    opacity: 0.3;
    transform: rotateY(0deg) scale(1, 1);
  }
  66% {
    transform: rotateY(0deg) scale(1, 1);
  }
  100% {
    transform: rotateY(0deg) scale(1.05, 1);
    opacity: 0;
    top: -20%;
  }
}
@keyframes yuge_item_mov_mini {
  0% {
    filter: blur(1px);
    transform: rotateY(0deg) scale(1);
    transform-origin: center bottom;
    opacity: 0;
    top: 20%;
  }
  15% {
    transform: rotateY(0deg) scale(1);
    opacity: 0.4;
  }
  33% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    filter: blur(0px);
    transform: rotateY(50deg) scale(2);
    transform-origin: center bottom;
    opacity: 0;
    top: 10%;
  }
}
@keyframes count_move {
  0% {
    filter: blur(0px);
  }
  5% {
    filter: blur(10px);
  }
  90% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0px);
  }
}
@keyframes imgload {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
body
================================================================================
*/
html.scrollMode_onepage {
  overflow: hidden;
}
body {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 300;
  font-size: 4vw;
  line-height: 1.86;
  letter-spacing: 0.13em;
  text-align: left;
  overflow: hidden;
  overflow-y: scroll;
  font-feature-settings: "palt";
  color: #303030;
  padding: 0;
  margin: 0;
  background-color: #fff;
  text-align: justify;
}
@media screen and (min-width: 900px) {
  body {
    font-size: 16px;
  }
}
body.scrollMode_onepage {
  -webkit-overflow-scrolling: touch;
}
body.modal-active {
  /* when modal active */
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  /* Other browsers */
  overscroll-behavior: none;
}
body * {
  border-style: solid;
}
body.fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
html.isTouchDevice body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html.notTouchDevice #cursor {
  display: none;
  position: fixed;
  top: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 900000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0%, 0%);
  pointer-events: none;
}
html.notTouchDevice #cursor .yugeItem {
  display: none;
}
html.notTouchDevice #cursor.mode3d {
  display: block;
}

body.detailViewerOpen #wrapper *, body.gyozaTimerOpen #wrapper * {
  pointer-events: none !important;
}

body.detailViewerOpen #wrapper {
  pointer-events: none;
}
body.detailViewerOpen #wrapper * {
  pointer-events: none;
}
body.gyozaTimerOpen #wrapper {
  pointer-events: none;
}
body.gyozaTimerOpen #wrapper * {
  pointer-events: none;
}
html.isTouchDevice #wrapper {
  height: 100vh;
  height: 100dvh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
body.fixed #wrapper {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#globalFix.auto {
  transition: all 100ms ease-in !important;
}
body.home.view_mainvisual #globalFix {
  background-color: transparent !important;
}
body.globalHeaderHide #globalFix {
  transform: translate3d(0, -110%, 0);
}
body.globalHeaderCompact #globalFix {
  transform: translate3d(0, 0vw, 0);
}
@media screen and (max-width: 900px) {
  body.globalHeaderCompact #globalFix { /* 以上のとき */
    transform: translate3d(0, 0rem, 0);
  }
}

.globalHeader {
  background: #fff;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 20vw;
  overflow: hidden;
  transition: transform 500ms ease-in-out, background 1ms, height 300ms ease-in-out;
  will-change: transform, opacity, background;
}
@media screen and (min-width: 900px) {
  .globalHeader {
    height: 9.375rem;
  }
}
body.loadingFinish .globalHeader {
  display: block;
}
body.menuOpen .globalHeader {
  height: 130vh;
}
body.menuOpen.menuClose .globalHeader {
  height: 20vw;
}
@media screen and (min-width: 900px) {
  body.menuOpen.menuClose .globalHeader {
    height: 9.375rem;
  }
}
.globalHeader h1 {
  line-height: 0;
  margin: 0;
  padding: 0;
}
.globalHeader div {
  z-index: 1100;
}
.globalHeader .logoWrap {
  height: 20vw;
}
@media screen and (min-width: 900px) {
  .globalHeader .logoWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 9.375rem;
    height: 9.375rem;
  }
}
.globalHeader .logoWrap a {
  display: inline-flex;
  width: 42.9333333333vw;
  height: 20vw;
}
@media screen and (min-width: 900px) {
  .globalHeader .logoWrap a {
    width: 20.125rem;
    max-height: 9.375rem;
    height: 9.375rem;
  }
}
.globalHeader .logoWrap a::after {
  content: "";
  display: block;
  background: #333;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/logo/logo_web_white.svg) center center/100% 100% no-repeat;
  transition: all 10ms ease;
  opacity: 0;
}
body.menuOpen .globalHeader .logoWrap a::after {
  opacity: 1;
}
.globalHeader .logo {
  width: 47.7333333333vw;
  height: auto;
}
@media screen and (min-width: 900px) {
  .globalHeader .logo {
    width: 22.375rem;
  }
}
.globalHeader .menuBtn {
  width: 17.3333333333vw;
  height: 20vw;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 900px) {
  .globalHeader .menuBtn {
    width: 8.125rem;
    height: 9.375rem;
  }
}
.globalHeader .menuBtn span {
  visibility: hidden;
}
.globalHeader .menuBtn::before, .globalHeader .menuBtn::after {
  width: 6.6666666667vw;
  height: 0.4vw;
  background: #00a273;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: all 300ms ease-in-out;
}
@media screen and (min-width: 900px) {
  .globalHeader .menuBtn::before, .globalHeader .menuBtn::after {
    width: 3.125rem;
    height: 0.1875rem;
  }
}
body.menuOpen .globalHeader .menuBtn::before, body.menuOpen .globalHeader .menuBtn::after {
  background: #fff;
}
.globalHeader .menuBtn::before {
  margin-top: -1.3333333333vw;
}
@media screen and (min-width: 900px) {
  .globalHeader .menuBtn::before {
    margin-top: -0.625rem;
  }
}
.globalHeader .menuBtn::after {
  margin-bottom: -1.3333333333vw;
}
@media screen and (min-width: 900px) {
  .globalHeader .menuBtn::after {
    margin-bottom: -0.625rem;
  }
}
body.menuOpen .globalHeader .menuBtn::before, body.menuOpen .globalHeader .menuBtn::after {
  margin: 0;
}
body.menuOpen .globalHeader .menuBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
body.menuOpen .globalHeader .menuBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.globalHeader #globalMenu {
  position: fixed;
  top: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  height: 100%;
  padding-top: 32vw;
  background: #00a273;
  color: #fff;
  pointer-events: none;
  transition: transform 200ms ease, background 100ms, opacity 300ms ease-in-out;
  will-change: transform, opacity, background;
  opacity: 0;
}
@media screen and (min-width: 900px) {
  .globalHeader #globalMenu {
    padding-top: 13.75rem;
  }
}
body.menuOpen .globalHeader #globalMenu {
  opacity: 1;
  pointer-events: all;
}
body.menuOpen.menuClose .globalHeader #globalMenu {
  transition: transform 200ms ease, background 100ms, opacity 300ms ease-out 300ms;
  opacity: 0;
}
.globalHeader #globalMenu ul.circle {
  margin-bottom: 42.6666666667vw;
}
@media screen and (min-width: 900px) {
  .globalHeader #globalMenu ul.circle {
    margin-bottom: 9.375rem;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    width: fit-content;
    font-size: 1.625rem;
  }
}
.globalHeader #globalMenu ul.circle li {
  font-weight: 500;
  line-height: 1;
}
.globalHeader #globalMenu ul.circle li:not(:last-child) {
  margin-bottom: 8.2666666667vw !important;
}
@media screen and (min-width: 900px) {
  .globalHeader #globalMenu ul.circle li:not(:last-child) {
    margin-bottom: 3.125rem !important;
  }
}
.globalHeader #globalMenu ul.circle li:nth-last-of-type(2) {
  margin-bottom: 8.6666666667vw !important;
}
@media screen and (min-width: 900px) {
  .globalHeader #globalMenu ul.circle li:nth-last-of-type(2) {
    margin-bottom: 3.3125rem !important;
  }
}
.globalHeader #globalMenu ul.circle li:last-child {
  font-size: 0.8em;
  padding-left: 2em;
}
.globalHeader #globalMenu ul.circle li:last-child::before {
  content: "";
  display: block;
  background: url(../img/icon/icon_ring_dot.svg);
  border: 0;
  position: absolute;
  left: 0em;
  top: 50%;
  transform: translate(0, -45%);
}
.globalHeader #globalMenu .sns {
  margin-bottom: 5.0666666667vw;
}
@media screen and (min-width: 900px) {
  .globalHeader #globalMenu .sns {
    margin-bottom: 1.875rem;
  }
}
.globalHeader #globalMenu .copyright {
  text-align: center;
  font-weight: 500;
  font-size: 0.7em;
  line-height: 1;
}

#scrollBody {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 0;
  background: #00a273;
  scrollbar-color: #303030 #000;
}
#scrollBody::before {
  content: "";
  display: none;
  width: 100%;
  height: 50vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #f2f2eb;
}
#scrollBody::after {
  content: "";
  display: block;
  width: 100%;
  height: 30vh;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #00a273;
  z-index: -1;
}
body.loadingFinish #scrollBody {
  opacity: 1;
}
body.fixed #scrollBody {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body.scrollMode_easing #scrollBody {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
body.scrollMode_static #scrollBody {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* 
================================================================================
debugWrap
================================================================================
*/
#debugWrap {
  position: fixed;
  width: auto;
  height: auto;
  min-width: 0.625rem;
  min-height: 0.625rem;
  bottom: 0.625rem;
  left: 6.25rem;
  z-index: 999999;
  color: #ddd500;
  font-size: 0.875rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.9);
}
#debugWrap .contents {
  padding: 1rem;
}

/* 
================================================================================
container,base
================================================================================
*/
#container {
  position: relative;
  width: 100%;
  visibility: hidden;
}
body.loadingFinish #container {
  visibility: visible;
}
#container.fixed, body.scrollMode_onepage #container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
}
body.scrollMode_easing #container {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}
#container #siteBG {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#container #siteBG ul {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#container #siteBG ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(-100%, 0);
  transition: all 500ms ease-in-out;
}
#container #siteBG ul li:nth-of-type(1) {
  background: rgba(255, 0, 0, 0.1);
}
#container #siteBG ul li:nth-of-type(2) {
  background: rgba(0, 255, 0, 0.1);
}
#container #siteBG ul li:nth-of-type(3) {
  background: rgba(0, 0, 255, 0.1);
}
#container #siteBG ul li:nth-of-type(4) {
  background: rgba(0, 150, 150, 0.1);
}
#container #siteBG ul li:nth-of-type(5) {
  background: rgba(150, 150, 0, 0.1);
}
#container #siteBG ul li.in {
  opacity: 1;
  transform: translate(0, 0);
}
#container #siteBG ul li.out {
  transform: translate(100%, 0);
}
#container #siteBG ul li.stby {
  transform: translate(-100%, 0);
}
#container #siteNav {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  pointer-events: none;
  display: none;
}
body.scrollMode_onepage #container #siteNav {
  display: block;
}
#container #siteNav .sectionNavWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100px;
  height: 100%;
  top: 0;
  right: 0;
}
#container #siteNav .sectionNavWrap ul {
  pointer-events: all;
}
#container #siteNav .sectionNavWrap ul li {
  padding: 0.625rem;
  line-height: 1;
}
#container #siteNav .sectionNavWrap ul li:not(.active) {
  cursor: pointer;
}
#container #siteNav .sectionNavWrap ul li.active {
  background: #000;
  color: #fff;
}
#container #siteNav .sectionNavWrap ul li:not(.active):hover {
  color: inherit;
  background: rgba(0, 0, 0, 0.1);
}
#container .overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 255, 0, 0.2);
  z-index: 999;
  pointer-events: none;
  display: none;
}
#container #siteMain {
  overflow: hidden;
  padding-top: 20vw;
  background: #fff;
}
@media screen and (min-width: 900px) {
  #container #siteMain {
    padding-top: 9.375rem;
  }
}
#container #siteMain #globalHeader {
  visibility: hidden;
  background: #fff;
  max-height: 20vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 20vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader {
    max-height: 9.375rem;
    height: 9.375rem;
  }
}
#container #siteMain #globalHeader h1 {
  line-height: 0;
  margin: 0;
  padding: 0;
}
#container #siteMain #globalHeader div {
  z-index: 1100;
}
#container #siteMain #globalHeader .logoWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader .logoWrap {
    max-height: 9.375rem;
    height: 9.375rem;
  }
}
#container #siteMain #globalHeader .logoWrap a {
  display: inline-flex;
}
#container #siteMain #globalHeader .logoWrap a::after {
  content: "";
  display: block;
  background: #333;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/logo/logo_web_white.svg) center center/contain no-repeat;
  transition: all 10ms ease;
  opacity: 0;
}
body.menuOpen #container #siteMain #globalHeader .logoWrap a::after {
  opacity: 1;
}
#container #siteMain #globalHeader .logo {
  width: 47.7333333333vw;
  height: auto;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader .logo {
    width: 22.375rem;
  }
}
#container #siteMain #globalHeader .menuBtn {
  width: 17.3333333333vw;
  height: 20vw;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader .menuBtn {
    width: 8.125rem;
    height: 9.375rem;
  }
}
#container #siteMain #globalHeader .menuBtn span {
  visibility: hidden;
}
#container #siteMain #globalHeader .menuBtn::before, #container #siteMain #globalHeader .menuBtn::after {
  width: 6.6666666667vw;
  height: 0.4vw;
  background: #00a273;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: all 300ms ease-in-out;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader .menuBtn::before, #container #siteMain #globalHeader .menuBtn::after {
    width: 3.125rem;
    height: 0.1875rem;
  }
}
body.menuOpen #container #siteMain #globalHeader .menuBtn::before, body.menuOpen #container #siteMain #globalHeader .menuBtn::after {
  background: #fff;
}
#container #siteMain #globalHeader .menuBtn::before {
  margin-top: -1.3333333333vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader .menuBtn::before {
    margin-top: -0.625rem;
  }
}
#container #siteMain #globalHeader .menuBtn::after {
  margin-bottom: -1.3333333333vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader .menuBtn::after {
    margin-bottom: -0.625rem;
  }
}
body.menuOpen #container #siteMain #globalHeader .menuBtn::before, body.menuOpen #container #siteMain #globalHeader .menuBtn::after {
  margin: 0;
}
body.menuOpen #container #siteMain #globalHeader .menuBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
body.menuOpen #container #siteMain #globalHeader .menuBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#container #siteMain #globalHeader #globalMenu2 {
  position: fixed;
  top: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  height: 100%;
  padding-top: 29.3333333333vw;
  background: #00a273;
  color: #fff;
  pointer-events: none;
  transition: all 300ms ease-in-out;
  opacity: 0;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader #globalMenu2 {
    padding-top: 13.75rem;
  }
}
body.menuOpen #container #siteMain #globalHeader #globalMenu2 {
  opacity: 1;
  pointer-events: all;
}
#container #siteMain #globalHeader #globalMenu2 ul.circle {
  margin-bottom: 40vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader #globalMenu2 ul.circle {
    margin-bottom: 9.375rem;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    width: fit-content;
    font-size: 1.625rem;
  }
}
#container #siteMain #globalHeader #globalMenu2 ul.circle li {
  font-weight: 500;
  line-height: 1;
}
#container #siteMain #globalHeader #globalMenu2 ul.circle li:not(:last-child) {
  margin-bottom: 6.6666666667vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalHeader #globalMenu2 ul.circle li:not(:last-child) {
    margin-bottom: 3.125rem;
  }
}
#container #siteMain #globalHeader #globalMenu2 ul.circle li:last-child {
  font-size: 0.8em;
  margin-top: 2em;
}
#container #siteMain #globalHeader #globalMenu2 ul.circle li:last-child::before {
  content: "";
  display: block;
  width: 0.45em;
  height: 0.45em;
  border-radius: 1em;
  background: #fff;
  border: 0;
  position: absolute;
  left: 0.25em;
  top: 50%;
  transform: translate(0, -50%);
}
#container #siteMain #globalHeader #globalMenu2 .copyright {
  text-align: center;
  font-size: 0.6em;
}
#container #siteMain #globalFooter {
  padding: 11.3333333333vw 0 4vw 0;
  font-size: 4vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter {
    text-align: center;
    padding: 3.125rem 0 3.125rem 0;
    font-size: 1rem;
  }
}
#container #siteMain #globalFooter .logo {
  margin-bottom: 4vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .logo {
    margin-bottom: 0.625rem;
    display: inline-block;
    width: auto;
  }
}
#container #siteMain #globalFooter .logo img {
  width: 64.4vw;
  height: auto;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .logo img {
    width: 16.875rem;
  }
}
#container #siteMain #globalFooter .address {
  margin-bottom: 6.6666666667vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .address {
    margin-bottom: 2.5rem;
  }
}
#container #siteMain #globalFooter .sns {
  display: inline-flex;
  margin-bottom: 11.3333333333vw;
  justify-content: flex-start;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .sns {
    margin-bottom: 2.5rem;
    width: 100%;
    justify-content: center;
  }
}
#container #siteMain #globalFooter .menu {
  margin-bottom: 17.3333333333vw;
  font-size: 4.2666666667vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .menu {
    margin-bottom: 7.5rem;
    font-size: 1rem;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
#container #siteMain #globalFooter .menu li {
  line-height: 1;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .menu li {
    margin-right: 1.875rem;
  }
}
#container #siteMain #globalFooter .menu li:not(:last-child) {
  margin-bottom: 8vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .menu li:not(:last-child) {
    margin-bottom: 2.5rem;
  }
}
#container #siteMain #globalFooter .menu li:nth-last-of-type(2) {
  margin-bottom: 21.3333333333vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .menu li:nth-last-of-type(2) {
    margin-bottom: 2.5rem;
    margin-right: 0rem;
  }
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .menu li:last-child {
    width: 100%;
    margin: 0;
    text-align: center;
  }
}
#container #siteMain #globalFooter .menu li .small {
  font-size: 0.8em;
}
#container #siteMain #globalFooter .copyright {
  text-align: center;
  font-size: 2.6666666667vw;
}
@media screen and (min-width: 900px) {
  #container #siteMain #globalFooter .copyright {
    margin-bottom: 0rem;
    font-size: 0.75rem;
  }
}
#container section .inFrame {
  width: 100%;
}
#container section.bLine {
  border-bottom-width: 1px;
}
@media screen and (max-width: 900px) {
  #container section.bLine {
    border-bottom-width: 0.9px;
  }
}
#container section.page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9.3333333333vw 0vw 21.3333333333vw 0vw;
}
#container section.page:not(.pageFirst) {
  padding-top: 13.3333333333vw;
}
@media screen and (min-width: 900px) {
  #container section.page:not(.pageFirst) {
    padding-top: 4.375rem;
  }
}
@media screen and (min-width: 900px) {
  #container section.page {
    padding: 4.375rem 0rem 10rem 0rem;
  }
}
#container section.page.full {
  padding: 0;
}
#container section.page.spacer {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (max-width: 900px) {
  #container section.page.spacer {
    padding-top: 12vw;
    padding-bottom: 12vw;
  }
}
#container section.page h2 {
  font-size: 5.3333333333vw;
  font-family: Poppins, monospace;
  font-weight: 600;
  color: #00a273;
  width: 100%;
  min-height: 8vw;
  margin-bottom: 6.6666666667vw;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
}
@media screen and (min-width: 900px) {
  #container section.page h2 {
    font-size: 1.875rem;
    min-height: 2.8125rem;
    margin-bottom: 2.5rem;
  }
}
#container section.page h2.deco span {
  display: block;
  width: 26.6666666667vw;
  text-align: center;
  line-height: 0.8;
}
@media screen and (min-width: 900px) {
  #container section.page h2.deco span {
    width: 9.375rem;
  }
}
body#privacypolicy #container section.page h2.deco span, body.longtitle #container section.page h2.deco span {
  width: 53.3333333333vw;
}
@media screen and (min-width: 900px) {
  body#privacypolicy #container section.page h2.deco span, body.longtitle #container section.page h2.deco span {
    width: 18.75rem;
  }
}
#container section.page h2.deco::before {
  content: "";
  display: block;
  width: 26.6666666667vw;
  height: 2.1333333333vw;
  background: url(../img/deco/deco_waveline.svg) left bottom/100% auto no-repeat;
  position: absolute;
  bottom: 0%;
  left: 0%;
}
@media screen and (min-width: 900px) {
  #container section.page h2.deco::before {
    width: 9.375rem;
    height: 0.9375rem;
  }
}
body#privacypolicy #container section.page h2.deco::before, body.longtitle #container section.page h2.deco::before {
  width: 53.3333333333vw;
  background: url(../img/deco/deco_waveline_long.svg) left bottom/100% auto no-repeat;
}
@media screen and (min-width: 900px) {
  body#privacypolicy #container section.page h2.deco::before, body.longtitle #container section.page h2.deco::before {
    width: 18.75rem;
    height: 0.9375rem;
  }
}
#container section.page h2.deco::after {
  content: "";
  display: block;
  width: 25.3333333333vw;
  height: 4vw;
  background: url(../img/deco/deco_line_gray.svg) left bottom/100% auto no-repeat;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 900px) {
  #container section.page h2.deco::after {
    width: 11.875rem;
    height: 1.875rem;
  }
}
#container section.page h2.topParent {
  margin-bottom: 13.3333333333vw;
}
@media screen and (min-width: 900px) {
  #container section.page h2.topParent {
    margin-bottom: 6.25rem;
  }
}
#container section.page h3.pageTitle {
  font-size: 5.3333333333vw;
  font-family: Poppins, monospace;
  font-weight: 600;
  color: #303030;
  width: 100%;
  min-height: 8vw;
  margin-bottom: 5.3333333333vw;
  display: flex;
  justify-content: flex-start;
}
@media screen and (min-width: 900px) {
  #container section.page h3.pageTitle {
    font-size: 1.875rem;
    min-height: 2.8125rem;
    margin-bottom: 2.5rem;
  }
}
#container section.page h3.label {
  font-size: 5.6vw;
  color: #00a273;
  line-height: 1.5;
  min-height: 16vw;
  margin-bottom: 4vw;
}
@media screen and (min-width: 900px) {
  #container section.page h3.label {
    font-size: 1.875rem;
    min-height: 5rem;
    margin-bottom: 1.875rem;
  }
}
#container section.page h3.pageRead {
  font-size: 5.6vw;
  margin-bottom: 8.6666666667vw;
  line-height: 1.4;
}
#container section.page h3.pageRead.colorKey {
  color: #00a273;
}
@media screen and (min-width: 900px) {
  #container section.page h3.pageRead {
    font-size: 2.625rem;
    margin-bottom: 3.75rem;
  }
}
#container section.page.bgLight h2::after {
  background: url(../img/deco/deco_line_white.svg) left bottom/100% auto no-repeat;
}
body.scrollMode_onepage #container section.contents {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
body.scrollMode_onepage #container section.page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 1000ms ease;
}
body.scrollMode_onepage #container section.page.out, body.scrollMode_onepage #container section.page.stby {
  opacity: 0;
  transform: translate(0, 100%);
}
body.scrollMode_onepage #container section.page.out {
  transform: translate(0, -100%);
}
body.scrollMode_onepage #container section.page.stby {
  transform: translate(0, 100%);
}
body.scrollMode_onepage #container section.page.in {
  opacity: 1;
  transform: translate(0, 0%);
}
body.scrollMode_onepage #container section.page .inFrame {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}
#container section p:not(:last-child) {
  margin-bottom: 2rem;
}
picture, source {
  border: 0 !important;
  padding: 0;
  margin: 0;
}

/* 
================================================================================
sample
================================================================================
*/
div.sample {
  width: 200px;
  height: 200px;
}
body.sample div.sample {
  text-align: center;
}
div.sample:before {
  content: "";
  display: block;
  width: 300px;
  height: 150px;
  background: blue;
}
.sample-1 {
  width: 100px;
}

.sample-2 {
  width: 200px;
}

.sample-3 {
  width: 300px;
}

@keyframes anim {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* 
================================================================================
contents
================================================================================
*/
.c {
  color: #ccc;
}

section.page#visual .slideWrap {
  margin-bottom: 0;
  position: relative;
}
section.page#visual .slideWrap .swiper::before {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0%;
  opacity: 0.8;
  z-index: 10;
  pointer-events: none;
  transition: opacity 1000ms ease-out 3000ms;
}
body.thirdplaceOn section.page#visual .slideWrap .swiper::before {
  opacity: 0;
}
section.page#visual .slideWrap .swiper::after {
  content: "";
  display: block;
  width: 84vw;
  height: 20vw;
  background: url(../img/contents/text_satode_atarashisato.svg) center center/contain no-repeat;
  position: absolute;
  top: 54.6666666667vw;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}
@media screen and (min-width: 900px) {
  section.page#visual .slideWrap .swiper::after {
    top: 50%;
    width: 36vw;
    height: 9.375rem;
    max-width: 39.375rem;
    transform: translate(-50%, -70%);
  }
}
section.page#visual .slideWrap .swiper .swiper-slide2 {
  filter: blur(20px) brightness(70%);
  transition: filter 1000ms ease-out 2500ms;
}
body.thirdplaceOn section.page#visual .slideWrap .swiper .swiper-slide2 {
  filter: blur(0) brightness(100%);
}
section.page#visual .slideWrap .swiper-thumbnail-wap {
  display: none;
}
section.page#news {
  padding-bottom: 13.3333333333vw;
}
@media screen and (min-width: 900px) {
  section.page#news {
    padding-bottom: 6.25rem;
  }
}
section.page.project .projectLogo {
  width: 46.6666666667vw;
  max-width: 18.75rem;
  margin-bottom: 8.6666666667vw;
}
@media screen and (min-width: 900px) {
  section.page.project .projectLogo {
    margin-bottom: 6.25rem;
  }
}
section.page.access .accessMain {
  padding-top: 6.6666666667vw;
}
@media screen and (min-width: 900px) {
  section.page.access .accessMain {
    padding-top: 4em;
    grid-gap: 8em;
    align-items: flex-start;
  }
}
section.page.access .flow {
  color: #00a273;
  font-size: 0.85em;
  margin: 0 auto 13.3333333333vw;
}
section.page.access .flow img {
  width: 80%;
  margin: 0 auto 1.5em;
}
@media screen and (min-width: 900px) {
  section.page.access .flow img {
    width: 100%;
    align-items: flex-start;
  }
}
@media screen and (min-width: 900px) {
  section.page.access .flow {
    margin: 0 auto 6.25rem;
  }
}
section.page.access .info .map {
  margin-bottom: 5em;
}
section.page.access .info .parking {
  grid-template-columns: 40vw 1fr;
  align-items: flex-start;
  margin-bottom: 2em;
}
@media screen and (max-width: 900px) {
  section.page.access .info .parking .gridItem:nth-of-type(3) {
    grid-column: 1/3;
  }
}
@media screen and (min-width: 900px) {
  section.page.access .info .parking {
    grid-template-columns: 1fr auto auto;
  }
  section.page.access .info .parking img {
    width: auto;
    height: 15.625rem;
  }
}
section.page.access .info .parking h4 {
  font-size: 1.4em;
}
section .contentsBody a {
  display: inline;
  color: #00a273;
  padding-bottom: 0.05em;
  border-bottom: solid 1px #00a273;
}
section .contentsBody p + ul {
  margin-top: -1em;
}
section .contentsBody ul {
  list-style: none;
  padding-left: 1.5em;
  margin-bottom: 2em;
}
section .contentsBody ul li {
  font-size: 0.9em;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
section .contentsBody ul li::before {
  content: "・";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -1.2em;
}
section .contentsBody .fukidashiGroup {
  width: 100%;
  margin: auto;
  display: grid;
  grid-gap: 0em;
  grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 900px) {
  section .contentsBody .fukidashiGroup {
    display: flex;
    grid-gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
  }
}
section .contentsBody .fukidashiGroup img {
  width: 100%;
  margin-bottom: -0.7em;
}
@media screen and (max-width: 900px) {
  section .contentsBody .fukidashiGroup img:nth-child(odd) {
    transform: translate(3%, 0%);
  }
  section .contentsBody .fukidashiGroup img:nth-child(even) {
    transform: translate(-3%, 35%);
  }
}
@media screen and (min-width: 900px) {
  section .contentsBody .fukidashiGroup img {
    width: 22%;
  }
}
section .contentsBody .connectGroup {
  margin-bottom: 10.6666666667vw;
}
@media screen and (min-width: 900px) {
  section .contentsBody .connectGroup {
    padding-left: 10em;
    min-height: 12.5rem;
    margin-bottom: 0vw;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
}
section .contentsBody .connectGroup dt {
  width: 100%;
}
section .contentsBody .connectGroup dd {
  width: 100%;
  margin-bottom: 0;
  padding: 0;
}
section .contentsBody .connectGroup dd:last-child {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 900px) {
  section .contentsBody .connectGroup dd:last-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 100%;
    padding-top: 0rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
}
section .contentsBody .connectGroup dd img.icon {
  margin: auto;
}
section .contentsBody .connectGroup dd img.iconLine {
  width: 26.6666666667vw;
}
@media screen and (min-width: 900px) {
  section .contentsBody .connectGroup dd img.iconLine {
    width: 4em;
  }
}
section .contentsBody .connectGroup dd img.iconPC {
  width: 40vw;
}
@media screen and (min-width: 900px) {
  section .contentsBody .connectGroup dd img.iconPC {
    width: 6em;
  }
}
section .contentsBody .connectGroup dd img.iconVisit {
  width: 20vw;
}
@media screen and (min-width: 900px) {
  section .contentsBody .connectGroup dd img.iconVisit {
    width: 3.5em;
  }
}

/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
.op_logo {
  width: 84vw;
  height: auto;
  position: absolute;
  top: 54.6666666667vw;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}
@media screen and (min-width: 900px) {
  .op_logo {
    top: 50%;
    width: 36vw;
    height: auto;
    max-width: 39.375rem;
    transform: translate(-50%, -70%);
  }
}
.op_logo svg,
.op_logo image {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
.op_logo .cls-1, .op_logo .cls-2 {
  fill: none;
}
.op_logo .cls-2 {
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 10px;
}
.op_logo .cls-1, .op_logo .cls-2 {
  fill: none;
}
.op_logo .cls-2 {
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 10px;
}
.op_logo img.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(5px);
  transform: translate(0, 5%);
  transition: all 1000ms ease-out;
}
.op_logo.in img.text {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0%);
}

/* 
================================================================================
お問い合わせフォーム
================================================================================
*/
.formTitle {
  margin-bottom: 1em;
}

.formRead {
  margin-bottom: 4em;
}

article.formArea .formTable {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr;
  grid-gap: 0;
  border-top: solid 1px;
}
@media screen and (max-width: 900px) {
  article.formArea .formTable {
    grid-template-columns: 1fr;
  }
}
article.formArea .formTable .gridItem {
  border-bottom: solid 1px;
  padding: 0.5rem 0;
  height: 100%;
}
article.formArea .formTable dt.gridItem {
  padding-right: 1rem;
}
article.formArea .formTable dd.gridItem {
  padding-right: 2rem;
  position: relative;
}
article.formArea .formTable .gridItem.label,
article.formArea .formTable .gridItem.inputArea {
  padding: 1rem 1em;
}
@media screen and (max-width: 900px) {
  article.formArea .formTable .gridItem.label {
    padding: 1em 0 0em;
    border: 0 !important;
  }
}
@media screen and (max-width: 900px) {
  article.formArea .formTable .gridItem.inputArea {
    padding: 0.5em 0 0.5em;
  }
}
article.formArea .formTable dt + dd {
  font-size: 0.8em;
  line-height: 2.2rem;
}
article.formArea .formTable .inputText {
  width: 100%;
  padding: 0.5em;
  border: solid 1px var(--color-key);
  border-bottom-color: var(--color-gray-light);
  border-right-color: var(--color-gray-light);
}
article.formArea .formTable .inputTextArea {
  height: 30em;
}
article.formArea .formTable .inputText, article.formArea .formTable .inputTextArea {
  font-size: 1rem;
  color: #000;
  font-family: YakuHanJP, "Poppins", "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: var(--font-weight-normal);
}
article.formArea .checkMessage {
  font-size: 1rem;
  color: #000;
  font-family: YakuHanJP, "Poppins", "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: var(--font-weight-normal);
}
article.formArea .formTable .inputText.errors, article.formArea .formTable .inputTextArea.errors {
  border: solid 1px #c00;
}
article.formArea .formTable span.msg {
  display: inline-block;
  padding-top: 0.2em;
  font-size: 0.8em;
  color: #c00;
}
article.formArea.input_step_2 {
  display: none;
}
article.formArea.input_step_2 .inputArea.textarea .wpcf7-form-control-wrap {
  position: absolute !important;
  top: 0 !important;
}
article.formArea.input_step_2 .formTable .inputText {
  pointer-events: none;
  border: 0;
  height: auto;
}
article.formArea.input_step_2 .formTable .inputTextArea {
  pointer-events: none;
  border: 0;
  height: auto;
  position: absolute;
  top: 0;
  height: 0;
  visibility: hidden;
  display: none;
}
article.formArea.input_step_2 .checkMessage {
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
  background: #fff;
}
article.formArea.input_step_2 .formTable dd.gridItem {
  min-height: 30px;
}

span.wpcf7-list-item.deactive {
  display: inline-block;
  pointer-events: none;
  opacity: 0.3 !important;
}

.ajax-loader {
  position: absolute;
  top: 0;
  opacity: 0;
}

.confirmMessage {
  margin-bottom: 3em;
  padding-top: 0em;
  border-top: solid 0px var(--color-key);
}
.confirmMessage h5 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  color: #00a273;
}
.confirmMessage p {
  font-size: 0.9rem;
}

.formThankYou {
  text-align: center;
  padding-top: 5rem;
}
.formThankYou h5 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.formThankYou p.jp {
  font-size: 0.9rem;
  margin-bottom: 60px;
}

article.formArea.input_step_2 .wpcf7-form-control-wrap {
  display: block;
  position: relative;
  top: 0%;
  width: 100%;
  height: 100%;
}
article.formArea.input_step_2 .wpcf7-not-valid-tip {
  position: absolute;
  top: 50%;
  transform: translate(0, -150%);
  display: block;
  width: 100%;
  padding: 0;
  text-align: right;
  pointer-events: none;
}

.card {
  -webkit-animation: cardEnter 0.75s ease-in-out 0.5s;
  animation: cardEnter 0.75s ease-in-out 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 250px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  margin: 20px auto;
  opacity: 0;
}

.spanCheck .wpcf7-not-valid-tip {
  transform: translate(0, -100%) !important;
}
@media screen and (max-width: 900px) {
  .spanCheck .wpcf7-not-valid-tip {
    transform: translate(0, -140%) !important;
  }
}
.spanCheck .wpcf7-list-item.errors {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 900px) {
  .spanCheck .wpcf7-list-item.errors {
    font-size: 0.9em;
    padding-left: 1.5em;
  }
}
.spanCheck .wpcf7-list-item.errors input {
  top: 50% !important;
  transform: translate(0, -50%) scale(1.2);
}
@media screen and (max-width: 900px) {
  .spanCheck .wpcf7-list-item.errors input {
    top: 1em !important;
    left: 0 !important;
  }
}

.spanCheck .wpcf7-form-control-wrap {
  position: relative !important;
  text-align: center;
  padding: 50px 0 20px 0;
}
@media screen and (max-width: 900px) {
  .spanCheck .wpcf7-form-control-wrap {
    padding: 1.5em 0 1em 0;
  }
}
.spanCheck .wpcf7-form-control-wrap .wpcf7-form-control {
  text-align: center;
}
.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item-label {
  display: none;
}
.spanCheck .wpcf7-form-control-wrap .errors {
  display: inline-block;
  vertical-align: top;
}
.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item input, .spanCheck .wpcf7-form-control-wrap .errors input {
  position: absolute;
  top: 0.4em;
  left: -2.4em;
}
.spanCheck .wpcf7-form-control-wrap .spanCheck_t {
  display: inline-block;
  text-align: left;
}
.viewMore {
  padding: 160px 0 0 0;
  text-align: center;
  display: flex;
}
.viewMore.submitBtn {
  padding: 1em 0 8em 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.viewMore.submitBtn .label {
  display: block;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .viewMore.submitBtn {
    flex-wrap: wrap;
  }
  .viewMore.submitBtn .btnArea.back {
    margin-bottom: 1em;
  }
}
.viewMore .btnArea {
  display: inline-block;
  cursor: pointer;
  background: #00a273;
  color: #fff;
  font-weight: 500;
}
.viewMore.col_2 .btnArea {
  margin: 0 1em;
}
.viewMore .btnArea {
  height: 80px;
}
@media screen and (max-width: 900px) {
  .viewMore .btnArea {
    height: 13.3333333333vw;
  }
}
.viewMore .btnArea a {
  z-index: 2;
  pointer-events: none;
  display: inline-block;
  width: 350px;
  height: 80px;
  border: solid 1px var(--color-btn);
  color: var(--color-btn);
  transition: var(--transition);
}
@media screen and (max-width: 900px) {
  .viewMore .btnArea a {
    height: 13.3333333333vw;
  }
}
.viewMore .btnArea.active a {
  pointer-events: all;
}
.viewMore .btnArea a span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.viewMore .btnArea:hover a {
  border: solid 1px var(--color-btn-hover);
  color: var(--color-btn-hover);
}
.viewMore .btnArea input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}

.submitBtn .btnArea.back a {
  color: #303030;
  background: #ccc;
  pointer-events: all;
}
.submitBtn .btnArea:hover a:before {
  height: 100%;
}

.wpcf7-not-valid-tip {
  font-size: 0.8em !important;
  padding: 1em 0 !important;
  display: block !important;
  margin-bottom: 2em !important;
  text-align: center !important;
}

.wpcf7-response-output {
  display: none;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  transform: translate(0, 0%);
  width: 100%;
  font-size: 1.2em !important;
  text-align: center !important;
  border: 0 !important;
  padding: 0.5em !important;
  color: #00a273 !important;
  background: #eee !important;
}

#formAreaFinished {
  display: none;
}

/* 
================================================================================
loader
================================================================================
*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 50000;
  transition: all 1000ms ease;
}
body.loadingFinish #loader {
  opacity: 0;
  pointer-events: none;
}
#loader #loadingAnim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  transition: all 150ms ease;
}
body.loadingAnimFinish #loader #loadingAnim {
  opacity: 0;
}
#loader #loadingCircle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.25rem;
  height: auto;
  transition: all 800ms ease;
}
body.loaderOut #loader #loadingCircle {
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: blur(5px);
}
#loader #loadingCircle::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 227/164;
}
#loader #loadingCircle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  animation-name: loading_anime;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

@keyframes loading_circle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes loading_popup {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.8rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes loading_anime {
  0% {
    background: url(../img/intro/0.png) center center/contain no-repeat;
  }
  3% {
    background: url(../img/intro/1.png) center center/contain no-repeat;
  }
  6% {
    background: url(../img/intro/2.png) center center/contain no-repeat;
  }
  9% {
    background: url(../img/intro/3.png) center center/contain no-repeat;
  }
  12% {
    background: url(../img/intro/4.png) center center/contain no-repeat;
  }
  15% {
    background: url(../img/intro/5.png) center center/contain no-repeat;
  }
  18% {
    background: url(../img/intro/6.png) center center/contain no-repeat;
  }
  21% {
    background: url(../img/intro/7.png) center center/contain no-repeat;
  }
  24% {
    background: url(../img/intro/8.png) center center/contain no-repeat;
  }
  27% {
    background: url(../img/intro/9.png) center center/contain no-repeat;
  }
  30% {
    background: url(../img/intro/10.png) center center/contain no-repeat;
  }
  33% {
    background: url(../img/intro/11.png) center center/contain no-repeat;
  }
  36% {
    background: url(../img/intro/12.png) center center/contain no-repeat;
  }
  39% {
    background: url(../img/intro/13.png) center center/contain no-repeat;
  }
  42% {
    background: url(../img/intro/14.png) center center/contain no-repeat;
  }
  45% {
    background: url(../img/intro/15.png) center center/contain no-repeat;
  }
  48% {
    background: url(../img/intro/16.png) center center/contain no-repeat;
  }
  51% {
    background: url(../img/intro/17.png) center center/contain no-repeat;
  }
  54% {
    background: url(../img/intro/18.png) center center/contain no-repeat;
  }
  57% {
    background: url(../img/intro/19.png) center center/contain no-repeat;
  }
  60% {
    background: url(../img/intro/20.png) center center/contain no-repeat;
  }
  63% {
    background: url(../img/intro/21.png) center center/contain no-repeat;
  }
  66% {
    background: url(../img/intro/22.png) center center/contain no-repeat;
  }
  69% {
    background: url(../img/intro/23.png) center center/contain no-repeat;
  }
  100% {
    background: url(../img/intro/23.png) center center/contain no-repeat;
  }
}