@font-face {
  font-family: "YonagaOldMinchoRegular";
  src: url("fonts/YonagaOldMincho-Regular.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ShipporiMinchoSemiBold";
  src: url("fonts/ShipporiMincho-SemiBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --main-color: #2e3c4a;
  --sub-color: #d2e0d9;
  --accent-color: #eb5545;
  --text-color: #383030;
  --background: #DDDCD1;
  --champagne: #ebe5c4;
  --font-gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-gothic: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
  --ff-yonaga: 'YonagaOldMinchoRegular', serif;
  --ff-shippori: 'ShipporiMinchoSemiBold', serif;
  --ls-01: 0.1em;

  --site-width: 1200px;
  --site-width-m: 980px;

  --slider-width: 828;

  --sm-width: 640px;
  --md-width: 768px;
  --lg-width: 1024px;
  --xl-width: 1280px;
}

* {font-family: var(--ff-yonaga);box-sizing: border-box;color: var(--text-color);}
html, body {width: 100%;margin: 0;padding: 0;}
body {-webkit-text-size-adjust:100%;padding: 0;margin: 0;}
a {text-decoration: none;cursor: pointer;width: 100%;height: 100%;display: block;}
a:hover {text-decoration: none;}
ul {list-style: none;padding: 0;margin: 0;}
img {width: 100%;height: auto;object-fit: cover;}
.main-color {color: var(--main-color);}
.color-w {color: #fff;}
.ls-01 {letter-spacing: 0.1em;}.ls-02 {letter-spacing: 0.2em;}
.max-width-600,.max-width-700,.max-width-800,.max-width-1000 {margin: 0 auto;display: block;}
.max-width-600 {max-width: 600px;}.max-width-700 {max-width: 700px;}.max-width-800 {max-width: 800px;}.max-width-1000 {max-width: 1000px;}
.pd-0 {padding: 0!important;}.pd-3{padding: 3px;}.pd-5{padding: 5px;}.pd-8{padding: 8px;}.pd-10 {padding: 10px;}.pd-12 {padding: 12px;}.pd-15 {padding: 15px;}.pd-16 {padding: 16px;}.pd-20 {padding: 20px;}.pd-24 {padding: 24px;}.pd-25 {padding: 25px;}.pd-30 {padding: 30px;}.pd-32 {padding: 32px;}
.plr-0 {padding-left: 0!important;padding-right: 0!important;}.plr-3 {padding-left: 3px;padding-right: 3px;}.plr-5 {padding-left: 5px;padding-right: 5px;}.plr-8 {padding-left: 8px;padding-right: 8px;}.plr-10 {padding-left: 10px;padding-right: 10px;}.plr-12 {padding-left: 12px;padding-right: 12px;}.plr-15 {padding-left: 15px;padding-right: 15px;}.plr-16 {padding-left: 16px;padding-right: 16px;}.plr-20 {padding-left: 20px;padding-right: 20px;}.plr-24 {padding-left: 24px;padding-right: 24px;}.plr-25 {padding-left: 25px;padding-right: 25px;}.plr-30 {padding-left: 30px;padding-right: 30px;}.plr-32 {padding-left: 32px;padding-right: 32px;}
.ptb-0 {padding-top: 0!important;padding-bottom: 0!important;}.ptb-3 {padding-top: 3px;padding-bottom: 3px;}.ptb-5 {padding-top: 5px;padding-bottom: 5px;}.ptb-8 {padding-top: 8px;padding-bottom: 8px;}.ptb-10 {padding-top: 10px;padding-bottom: 10px;}.ptb-12 {padding-top: 12px;padding-bottom: 12px;}.ptb-15 {padding-top: 15px;padding-bottom: 15px;}.ptb-16 {padding-top: 16px;padding-bottom: 16px;}.ptb-20 {padding-top: 20px;padding-bottom: 20px;}.ptb-24 {padding-top: 24px;padding-bottom: 24px;}.ptb-25 {padding-top: 25px;padding-bottom: 25px;}.ptb-30 {padding-top: 30px;padding-bottom: 30px;}.ptb-32 {padding-top: 32px;padding-bottom: 32px;}
.pl-0 {padding-left: 0!important;}.pl-3 {padding-left: 3px;}.pl-5 {padding-left: 5px;}.pl-8 {padding-left: 8px;}.pl-10 {padding-left: 10px;}.pl-12 {padding-left: 12px;}.pl-15 {padding-left: 15px;}.pl-16 {padding-left: 16px;}.pl-20 {padding-left: 20px;}.pl-24 {padding-left: 24px;}.pl-25 {padding-left: 25px;}.pl-30 {padding-left: 30px;}.pl-32 {padding-left: 32px;}
.pr-0 {padding-right: 0!important;}.pr-3 {padding-right: 3px;}.pr-5 {padding-right: 5px;}.pr-8 {padding-right: 8px;}.pr-10 {padding-right: 10px;}.pr-12 {padding-right: 12px;}.pr-15 {padding-right: 15px;}.pr-16 {padding-right: 16px;}.pr-20 {padding-right: 20px;}.pr-24 {padding-right: 24px;}.pr-25 {padding-right: 25px;}.pr-30 {padding-right: 30px;}.pr-32 {padding-right: 32px;}
.pt-0 {padding-top: 0!important;}.pt-3 {padding-top: 3px;}.pt-5 {padding-top: 5px;}.pt-8 {padding-top: 8px;}.pt-10 {padding-top: 10px;}.pt-12 {padding-top: 12px;}.pt-15 {padding-top: 15px;}.pt-16 {padding-top: 16px;}.pt-20 {padding-top: 20px;}.pt-24 {padding-top: 24px;}.pt-25 {padding-top: 25px;}.pt-30 {padding-top: 30px;}.pt-32 {padding-top: 32px;}
.pb-0 {padding-bottom: 0!important;}.pb-3 {padding-bottom: 3px;}.pb-5 {padding-bottom: 5px;}.pb-8 {padding-bottom: 8px;}.pb-10 {padding-bottom: 10px;}.pb-12 {padding-bottom: 12px;}.pb-15 {padding-bottom: 15px;}.pb-16 {padding-bottom: 16px;}.pb-20 {padding-bottom: 20px;}.pb-24 {padding-bottom: 24px;}.pb-25 {padding-bottom: 25px;}.pb-30 {padding-bottom: 30px;}.pb-32 {padding-bottom: 32px;}
.mg-0 {margin: 0!important;}.mg-3{margin: 3px;}.mg-5{margin: 5px;}.mg-8{margin: 8px;}.mg-10 {margin: 10px;}.mg-12 {margin: 12px;}.mg-15 {margin: 15px;}.mg-16 {margin: 16px;}.mg-20 {margin: 20px;}.mg-24 {margin: 24px;}.mg-25 {margin: 25px;}.mg-30 {margin: 30px;}.mg-32 {margin: 32px;}
.mlr-0 {margin-left: 0!important;margin-right: 0!important;}.mlr-3 {margin-left: 3px;margin-right: 3px;}.mlr-5 {margin-left: 5px;margin-right: 5px;}.mlr-8 {margin-left: 8px;margin-right: 8px;}.mlr-10 {margin-left: 10px;margin-right: 10px;}.mlr-12 {margin-left: 12px;margin-right: 12px;}.mlr-15 {margin-left: 15px;margin-right: 15px;}.mlr-16 {margin-left: 16px;margin-right: 16px;}.mlr-20 {margin-left: 20px;margin-right: 20px;}.mlr-24 {margin-left: 24px;margin-right: 24px;}.mlr-25 {margin-left: 25px;margin-right: 25px;}.mlr-30 {margin-left: 30px;margin-right: 30px;}.mlr-32 {margin-left: 32px;margin-right: 32px;}
.mtb-0 {margin-top: 0!important;margin-bottom: 0!important;}.mtb-3 {margin-top: 3px;margin-bottom: 3px;}.mtb-5 {margin-top: 5px;margin-bottom: 5px;}.mtb-8 {margin-top: 8px;margin-bottom: 8px;}.mtb-10 {margin-top: 10px;margin-bottom: 10px;}.mtb-12 {margin-top: 12px;margin-bottom: 12px;}.mtb-15 {margin-top: 15px;margin-bottom: 15px;}.mtb-16 {margin-top: 16px;margin-bottom: 16px;}.mtb-20 {margin-top: 20px;margin-bottom: 20px;}.mtb-24 {margin-top: 24px;margin-bottom: 24px;}.mtb-25 {margin-top: 25px;margin-bottom: 25px;}.mtb-30 {margin-top: 30px;margin-bottom: 30px;}.mtb-32 {margin-top: 32px;margin-bottom: 32px;}
.ml-0 {margin-left: 0!important;}.ml-3 {margin-left: 3px;}.ml-5 {margin-left: 5px;}.ml-8 {margin-left: 8px;}.ml-10 {margin-left: 10px;}.ml-12 {margin-left: 12px;}.ml-15 {margin-left: 15px;}.ml-16 {margin-left: 16px;}.ml-20 {margin-left: 20px;}.ml-24 {margin-left: 24px;}.ml-25 {margin-left: 25px;}.ml-30 {margin-left: 30px;}.ml-32 {margin-left: 32px;}
.mr-0 {margin-right: 0!important;}.mr-3 {margin-right: 3px;}.mr-5 {margin-right: 5px;}.mr-8 {margin-right: 8px;}.mr-10 {margin-right: 10px;}.mr-12 {margin-right: 12px;}.mr-15 {margin-right: 15px;}.mr-16 {margin-right: 16px;}.mr-20 {margin-right: 20px;}.mr-24 {margin-right: 24px;}.mr-25 {margin-right: 25px;}.mr-30 {margin-right: 30px;}.mr-32 {margin-right: 32px;}
.mt-0 {margin-top: 0!important;}.mt-3 {margin-top: 3px;}.mt-5 {margin-top: 5px;}.mt-8 {margin-top: 8px;}.mt-10 {margin-top: 10px;}.mt-12 {margin-top: 12px;}.mt-15 {margin-top: 15px;}.mt-16 {margin-top: 16px;}.mt-20 {margin-top: 20px;}.mt-24 {margin-top: 24px;}.mt-25 {margin-top: 25px;}.mt-30 {margin-top: 30px;}.mt-32 {margin-top: 32px;}
.mb-0 {margin-bottom: 0!important;}.mb-3 {margin-bottom: 3px;}.mb-5 {margin-bottom: 5px;}.mb-8 {margin-bottom: 8px;}.mb-10 {margin-bottom: 10px;}.mb-12 {margin-bottom: 12px;}.mb-15 {margin-bottom: 15px;}.mb-16 {margin-bottom: 16px;}.mb-20 {margin-bottom: 20px;}.mb-24 {margin-bottom: 24px;}.mb-25 {margin-bottom: 25px;}.mb-30 {margin-bottom: 30px;}.mb-32 {margin-bottom: 32px;}
.fw-b {font-weight: bold;}
.ta-l {text-align: left;}
.ta-c {text-align: center;}
.ta-r {text-align: right;}
.d-block {display: block;}
.d-inline-block {display: inline-block;}
.d-inline {display: inline;}
.d-none {display: none;}
.p-relative {position: relative;}
.p-absolute {position: absolute;}
.d-flex {display: flex;}
.d-iflex {display: inline-flex;}
.fd-c {flex-direction: column;}
.fd-cr {flex-direction:column-reverse;}
.fd-r {flex-direction: row;}
.fd-rr {flex-direction:row-reverse;}
.fw-w {flex-wrap: wrap;}
.fw-n {flex-wrap: nowrap;}
.jc-fs {justify-content: flex-start;}
.jc-fe {justify-content: flex-end;}
.jc-c {justify-content: center;}
.jc-sb {justify-content: space-between;}
.jc-sa {justify-content: space-around;}
.ai-c {align-items: center;}
.ai-fs {align-items: flex-start;}
.ai-fe {align-items: flex-end;}
.flex-1 {flex: 1;}
.gap-3{gap: 3px;}.gap-5 {gap: 5px;}.gap-8 {gap: 8px;}.gap-10 {gap: 10px;}.gap-12 {gap: 12px;}.gap-15 {gap: 15px;}.gap-16 {gap: 16px;}.gap-20 {gap: 20px;}.gap-24 {gap: 24px;}.gap-25 {gap: 25px;}.gap-30 {gap: 30px;}.gap-32 {gap: 32px;}
.fs-8 {font-size: 8px;}
.fs-10 {font-size: 10px;}
.fs-12 {font-size: 12px;}
.fs-14 {font-size: 14px;}
.fs-16 {font-size: 16px;}
.fs-18 {font-size: 18px;}
.fs-20 {font-size: 20px;}
.fs-24 {font-size: 24px;}
.fs-28 {font-size: 28px;}
.fs-30 {font-size: 30px;}
.fs-32 {font-size: 32px;}
.fs-36 {font-size: 36px;}
.fs-48 {font-size: 48px;}
.fs-60 {font-size: 60px;}
.ff-yonaga {
  font-family: var(--ff-yonaga);
}
.ff-shippori {
  font-family: var(--ff-shippori);
}

br.sp-only {
  display: none;
}

.pc-only {
  display: inline;
}
@media (max-width: 768px) {
  br.sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}

/* overall */
body #content {
  transition: all 1.5s ease-in-out;
}
body.side-menu-open #content,
body.side-menu-open #stage #c2,
body.side-menu-open #stage .tap-to-start {
  filter: blur(5px);
  opacity: 0;
}

#c2 {
  transition: all 1.5s ease-in-out;
}

/* @media (max-width: 374px) {
  html,
  body {
    width: 375px;
  }
} */

/* side menu */

.header-right-wrapper .hamburger span {
  background-color: var(--accent-color);
}

#sidemenu {
  background-color: var(--sub-color);
  width: 80vw;
  transition: 1.5s ease-in-out;
  opacity: 0;
  right: -5vw;
  z-index: -1;
}

#sidemenu.close {
  opacity: 1;
  z-index: 400;
}

#blind {
  background-color: transparent;
}

#sidemenu .sidemenu-inner {
  padding: 90px 50px;
}

#sidemenu .sidemenu-logo {
  width: calc(100% - 40px);
  max-width: 250px;
  transform: translateX(10px);
  transition: all .8s ease-in-out .3s;
  opacity: 0;
}

#sidemenu .worldest-menu li {
  margin-top: 40px;
  transform: translateX(10px);
  transition: all .8s ease-in-out .5s;
  opacity: 0;
}

body.side-menu-open #sidemenu .worldest-menu > li {
  transform: translateX(0);
  opacity: 1;
}

body.side-menu-open #sidemenu .sidemenu-logo {
  transform: translateX(0);
  opacity: 1;

}

body.side-menu-open #sidemenu .worldest-menu > li:nth-child(1) {
  transition-delay: .5s;
}
body.side-menu-open #sidemenu .worldest-menu > li:nth-child(2) {
  transition-delay: .7s;
}
body.side-menu-open #sidemenu .worldest-menu > li:nth-child(3) {
  transition-delay: .9s;
}
body.side-menu-open #sidemenu .worldest-menu > li:nth-child(4) {
  transition-delay: 1.1s;
}
body.side-menu-open #sidemenu .worldest-menu > li:nth-child(5) {
  transition-delay: 1.3s;
}

#sidemenu .worldest-menu a {
  padding: 0;
  color: var(--text-color);
  color: var(--text-color);
  padding: 0;
  font-size: 17px;
  text-transform: none;
  text-decoration: none;
  letter-spacing: .1em;

}

/* header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: transparent;
  z-index: 500;
  transition: opacity 1.2s ease-in-out .3s;
}

.home .site-header {
  opacity: 0;
}


/* first view */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--background);
  overflow-x: hidden;
  font-family: var(--ff-yonaga);
}

.container {
  background: var(--background);
  padding: 0;
  padding-top: 60px;
}

#page {
  position: relative;
}

#stage {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: var(--background);
  transition: filter 2s ease-in-out, opacity 2s ease-in-out, transform 2s ease-in-out ;
}
canvas#c,
canvas#c2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
canvas#c {
  width: 100%;
}
canvas#c2 {
  width: 100%;
  /* width: 20.4%; */
  z-index: 2;
}

.tap-to-start {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  display: none;
  filter: blur(10px);
  transition: filter 1.5s ease-in-out, opacity 1.5s ease-in-out;
  cursor: pointer;
}

.tap-to-start .tap-circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--accent-color);
  animation: 4s swell linear alternate infinite;
  opacity: 0;
  transition: opacity 2s ease-in-out 1s;
}

.tap-to-start .sound_wave {
  position: absolute;
  width: 80px;
  height: 80px;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.tap-to-start .sound_wave::after,
.tap-to-start .sound_wave::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  border: 1px solid var(--accent-color);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  animation: 4s circleanime linear infinite;
}

.tap-to-start .sound_wave::after {
  animation-delay: .5s;
}

@keyframes swell {
  0%{
    transform: scale(1);
  }
  25%{
    transform: scale(1.05);
  }
  50%{
    transform: scale(1.1);
  }
}

@keyframes circleanime {
  0%{
    transform: scale(0);
  }
  25%{
    transform: scale(.6);
    opacity: .8;
  }
  50%{
    transform: scale(1);
    opacity: 0;
  }
}

.tap-to-start .tap-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.1em;
}

.tap-to-start .tap-line {
  width: 1.5px;
  height: 40px;
  background-color: var(--accent-color);
  opacity: 0;
  transition: opacity 2s ease-in-out 1s;
}




.header-image-area {
  width: 100%;
  height: calc(440 / 828 * 200vw);
  /* background: pink; */
  overflow-x: hidden;
}

.header-image-area-inner,
.header-image-slider,
.header-bg-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header-image-area-inner {
  position: relative;
}

.header-image-slider {
  position: relative;
  z-index: 1;
}

.header-bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}


/* 2セット並べて流すためのトラック */
.slider-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* 1セット（これをJSで複製して2つにする） */
.slider-set {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  /* background: pink; */
}

.header-image-slider .slider-set.is-clone {
  /* background: blue; */
  left: calc(70 / var(--slider-width) * -100%);
}

.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  overflow: hidden;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-image-slider .slider-set > .slider-item:nth-child(1) {
  mask-image: url("../svg/mask-bubble1.svg");
  width: calc(191.37 / 828 * 100%);
  height: calc(230.06 / 440 * 100%);
  top: calc(209.74 / 440 * 100%);
  left: calc(0 / 828 * 100%);
}
.header-image-slider .slider-set > .slider-item:nth-child(2) {
  mask-image: url("../svg/mask-bubble2.svg");
  width: calc(188.72 / 828 * 100%);
  height: calc(154.66 / 440 * 100%);
  top: calc(0 / 440 * 100%);
  left: calc(56.15 / 828 * 100%);
}
.header-image-slider .slider-set > .slider-item:nth-child(3) {
  mask-image: url("../svg/mask-bubble3.svg");
  width: calc(355.00 / 828 * 100%);
  height: calc(235.16 / 440 * 100%);
  top: calc(131.58 / 440 * 100%);
  left: calc(181.57 / 828 * 100%);
}
.header-image-slider .slider-set > .slider-item:nth-child(4) {
  mask-image: url("../svg/mask-bubble4.svg");
  width: calc(240.42 / 828 * 100%);
  height: calc(180.40 / 440 * 100%);
  top: calc(31.44 / 440 * 100%);
  left: calc(550.65 / 828 * 100%);
}
.header-image-slider .slider-set > .slider-item:nth-child(5) {
  mask-image: url("../svg/mask-bubble5.svg");
  width: calc(150.98 / 828 * 100%);
  height: calc(165.49 / 440 * 100%);
  top: calc(249.69 / 440 * 100%);
  left: calc(569.21 / 828 * 100%);
}

.header-bg-slider .slider-set > .slider-item:nth-child(1) {
  width: calc(240.91 / 828 * 100%);
  top: calc(185.17 / 440 * 100%);
  left: calc(56.15 / 828 * 100%);
}
.header-bg-slider .slider-set > .slider-item:nth-child(2) {
  width: calc(240.63 / 828 * 100%);
  top: calc(90.09 / 440 * 100%);
  left: calc(191.37 / 828 * 100%);
}
.header-bg-slider .slider-set > .slider-item:nth-child(3) {
  width: calc(237.01 / 828 * 100%);
  top: calc(300.03 / 440 * 100%);
  left: calc(379.84 / 828 * 100%);
}
.header-bg-slider .slider-set > .slider-item:nth-child(4) {
  width: calc(123.02 / 828 * 100%);
  top: calc(9.86 / 440 * 100%);
  left: calc(455.42 / 828 * 100%);
}
.header-bg-slider .slider-set > .slider-item:nth-child(5) {
  width: calc(118.36 / 828 * 100%);
  top: calc(156.58 / 440 * 100%);
  left: calc(611.69 / 828 * 100%);
}

@media (min-width: 640px) {
  .header-image-area {
    height: calc(440 / 828 * 1200px);
  }
  .slider-track {
    width: 1200px;
  }
}

@media (min-width: 1024px) {
  .header-image-area {
    height: calc(440 / 828 * 1500px);
  }
  .slider-track {
    width: 1550px;
  }
}

section {
  position: relative;
}

.section-title {
  position: relative;
  display: inline-flex;
  width: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;

}

.section-title-content {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: all 1s ease-in-out;
}

.section-title-content.animated {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px);
}

.section-title h2 {
  font-size: 20px;
  font-family: var(--ff-shippori);
  letter-spacing: 0.3em;
  color: var(--text-color);
  margin-bottom: 0px;
}

.section-title .title-e {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--text-color);
  position: relative;
  top: 5px;
}

.section-title .section-title-content {
  position: relative;
  z-index: 2;
}

.section-title .section-title-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#news .section-title .section-title-bg {
  top: 37%;
}

#contents .section-title .section-title-bg {
  top: 32%;
}

#blog .section-title .section-title-bg {
  top: 45%;
}

#information .section-title .section-title-bg {
  top: 32%;
}

.section-title canvas {
  width: 100%;
}

.section-content {
  position: relative;
  z-index: 2;
}

.section-illust,
.content-illust {
  width: 70px;
  position: absolute;
  margin: 0 auto;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1s ease-in-out .4s, filter 1s ease-in-out .4s, transform 1s ease-in-out .4s;
}
.section-illust {
  left: calc(50%);
  transform: translateX(-50%);
}

.section-illust.animated,
.content-illust.animated {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px);
}

#news .section-illust {
  width: 130px;
  top: -115px;
  left: calc(50% + 120px);
  transform: translateX(-50%);
}

#contents .section-illust {
  width: 200px;
  top: -170px;
  left: calc(50% - 100px);
  transform: translateX(-50%);
}

#blog .section-illust {
  width: 145px;
  top: -16px;
  left: calc(50% - 127px);
  transform: translateX(-50%);
}

#information .section-illust {
  width: 60px;
  top: -70px;
  left: calc(50% + 100px);
  transform: translateX(-50%);
}

.instagram-view-more > img {
  width: 30px;
}



/* concept */

#concept {
  position: relative;
  padding-bottom: 0px;
  margin-bottom: 90px;
  margin-top: 0px;
}

#concept .section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#concept .section-bg > div {
  position: absolute;
  width: calc(271.8415 / 1241 * 414px);
  left: 50%;
  transform: translateX(-50%);
}
#concept .section-bg > div:nth-child(1) {
  top: 0%;
  animation: floatSoftAconceptBg 24s ease-in-out infinite;
}
#concept .section-bg > div:nth-child(2) {
  top: calc(440 / 1713 * 100%);
  left: calc(50% - 198 / 1242 * 414px);
  animation: floatSoftBconceptBg 30s ease-in-out infinite -3s;
}
#concept .section-bg > div:nth-child(3) {
  top: calc(888 / 1713 * 100%);
  left: calc(50% - 112 / 1242 * 414px);
  animation: floatSoftCconceptBg 31s ease-in-out infinite -6s;
}
#concept .section-bg > div:nth-child(4) {
  top: calc(1435 / 1713 * 100%);
  left: calc(50% - 321 / 1242 * 414px);
  animation: floatSoftBconceptBg 27s ease-in-out infinite -2s;
}

@keyframes floatSoftAconceptBg {
  0%,100%{ transform: translate3d(calc(-50%),0,0) rotate(-2deg); }
  25%    { transform: translate3d(calc(-50% + 6px),-8px,0) rotate(1.6deg); }
  50%    { transform: translate3d(calc(-50% - 4px),-4px,0) rotate(-0.8deg); }
  75%    { transform: translate3d(calc(-50% + 4px),4px,0) rotate(1.2deg); }
}
@keyframes floatSoftBconceptBg {
  0%,100%{ transform: translate3d(calc(-50%),0,0) rotate(0.80deg); }
  30%    { transform: translate3d(calc(-50% - 8px),-6px,0) rotate(-1.6deg); }
  60%    { transform: translate3d(calc(-50% + 4px),-10px,0) rotate(0.8deg); }
  85%    { transform: translate3d(calc(-50% - 4px),4px,0) rotate(1.6deg); }
}
@keyframes floatSoftCconceptBg {
  0%,100%{ transform: translate3d(calc(-50%),0,0) rotate(0deg); }
  20%    { transform: translate3d(calc(-50% + 4px),-4px,0) rotate(-1.6deg); }
  45%    { transform: translate3d(calc(-50% - 6px),-12px,0) rotate( 2deg); }
  70%    { transform: translate3d(calc(-50% + 8px),-2px,0) rotate(-0.8deg); }
  90%    { transform: translate3d(calc(-50% - 2px),6px,0) rotate(1.2deg); }
}

#concept .section-inner {
  position: relative;
  z-index: 2;
  padding-top: 10px;
}

.concept-title {
  margin: 30px 0;
  margin-top: 10px;
  letter-spacing: 0.35em;
}

.concept-text p {
  line-height: 2.8;
  letter-spacing: 0.1em;
  font-size: 13px;
  margin: 0;
}

.concept-text p span {
  line-height: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  margin: inherit;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(3px);
  transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out, transform 1.2s ease-in-out;
}

.concept-text p.animated span {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px);
}

.concept-text p + p {
  margin-top: 40px;
}

/* news */

.news-wrapper {
  display: inline-block;
  margin: 0 auto;
  max-width: 360px;
}

li.news-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-color);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0px
}

li.news-title + li.news-title {
  margin-top: 25px;
}

li.news-title span {
  display: block;
  line-height: 24px;
  width: 90px;
  text-align: left;
  font-size: 14px;
  color: var(--text-color);
}

li.news-title a {
  display: block;
  line-height: 22px;
  flex: 1;
  text-align: left;
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}


/* contents */

#contents ul {
  max-width: 800px;
  margin: 0 auto;
}

#contents ul  > li {
  position: relative;
  margin: 0;
}

#contents ul  > li + li {
  margin-top: 80px;
}

#contents ul  > li > .content-item {
  display: flex;
  justify-content: space-between;
}

#contents ul  > li:nth-child(even) > .content-item {
  flex-direction: row-reverse;
}

#contents ul  > li > .content-item > .content-thumb {
  position: absolute;
  width: calc(50% - 15px);
  right: 0;
  top: 0;
  z-index: 1;
}

#contents ul  > li:nth-child(even) > .content-item > .content-thumb {
  left: 0;
  right: initial;
}

#contents ul  > li > .content-item > .content-info {
  width: 60%;
  position: relative;
  z-index: 2;
  text-align: left;
}
#contents ul  > li:nth-child(even) > .content-item > .content-info {
  text-align: right;
}

#contents ul  > li > .content-item > .content-thumb img {
  border-radius: 0;
  aspect-ratio: 583 / 389;
}


#contents ul  > li > .content-item > .content-thumb img {
  border-radius: 30px 0 0 30px;
}

#contents ul  > li:nth-child(even) > .content-item > .content-thumb img {
  border-radius: 0 30px 30px 0;
}

@media (min-width: 800px) {
  #contents ul  > li > .content-item > .content-thumb img {
    border-radius: 30px!important;
  }
}

.content-title {
  margin-bottom: 40px;
}

#contents ul  > li .content-title h3 {
  font-size: 16px;
  color: var(--text-color);
  letter-spacing: 0.1em;
  text-align: left;
  padding-left: 30px;
  margin-top: 5px;
}

#contents ul  > li:nth-child(even) .content-title h3 {
  text-align: right;
  padding-left: 0;
  padding-right: 30px;
}

#contents ul  > li .content-title-e {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 3px;
  position: relative;
  padding-left: 30px;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--text-color);
  }
}

#contents ul  > li:nth-child(even) .content-title-e {
  justify-content: flex-end;
  padding-right: 30px;
  &::after {
    right: 0;
    left: initial;
  }
}

#contents .content-title-e > div {
  position: relative;
  width: initial;
  height: 33px;
}

#contents .content-title-e > div > img:nth-child(1) {
  position: absolute;
  bottom: -10px;
  right: -5px;
  width: 70px;
  max-width: none;
  object-fit: contain;
  z-index: -1;
}

#contents ul  > li:nth-child(2) .content-title-e > div > img:nth-child(1) {
  bottom: -25px;
  right: -5px;
  transform: rotateY(180deg);
}

#contents .content-title-e > div > img:nth-child(2) {
  object-fit: contain;
  height: 100%;
  width: auto;
}

#contents .content-title-e span {
  font-size: 21px;
  letter-spacing: 0.1em;
  display: inline-block;
  height: 20px;
  line-height: 23px;
}

#contents ul  > li > .content-item .content-text {
  padding-left: 30px;
  text-align: left;
}

#contents ul  > li:nth-child(even) .content-item .content-text {
  padding-left: 0;
  padding-right: 30px;
  text-align: right;
}

#contents .content-text p {
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 2;
}

#contents ul  > li .content-illust {
  position: absolute;
  z-index: 1;
}

#contents ul  > li:nth-child(1) .content-illust {
  width: 275px;
  top: calc((50vw - 15px) * 389 / 583 - 10px);
  left: 130px;
}

@media (max-width: 400px) {
  #contents ul  > li:nth-child(1) .content-illust {
    width: 250px;
  }
}

@media (max-width: 380px) {
  #contents ul  > li:nth-child(1) .content-illust {
    width: 225px;
  }
}


#contents ul  > li:nth-child(2) .content-illust {
  width: 150px;
  top: calc((50vw - 15px) * 389 / 583 - 10px);
  left: calc(50vw - 15px);
  transform: translateX(-100%);
}
#contents ul  > li:nth-child(3) .content-illust {
  width: 165px;
  top: calc((50vw - 15px) * 389 / 583 - 15px);
  left: calc(50vw + (50vw - 15px) / 2 + 10px);
  transform: translateX(-50%);
}

@media (min-width: 450px) {
  #contents ul  > li:nth-child(1) .content-illust {
    left: 170px;
  }
}

@media (min-width: 550px) {
  #contents ul  > li:nth-child(1) .content-illust {
    left: 200px;
  }
  #contents ul  > li:nth-child(3) .content-illust {
    width: 175px;
  }
}

@media (min-width: 640px) {
  #contents ul  > li:nth-child(1) .content-illust {
    left: 230px;
  }
  #contents ul  > li:nth-child(2) .content-illust {
    width: 200px;
  }
  #contents ul  > li:nth-child(3) .content-illust {
    width: 200px;
  }
}

@media (min-width: 768px) {
  #contents ul  > li:nth-child(1) .content-illust {
    left: 200px;
    width: 400px;
    top: calc(350px * 389 / 583 - 40px);
  }
  #contents ul  > li:nth-child(2) .content-illust {
    width: 250px;
    top: calc(350px * 389 / 583 - 10px);
    left: 350px;
  }
  #contents ul  > li:nth-child(3) .content-illust {
    width: 250px;
    top: calc(350px * 389 / 583 - 20px);
    left: calc(400px  + 350px / 2 + 30px);

  }
}

#contents ul  > li .read-more {
  margin-top: 20px;
  padding-left: 30px;
  text-align: left;
  display: inline-flex;
  align-items: center;
}

#contents ul  > li:nth-child(even) .read-more {
  padding-left: 0;
  padding-right: 30px;
  text-align: right;
}

#contents ul  > li .read-more a {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 13px;
  position: relative;
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

#contents ul  > li .read-more span {
  position: relative;
  display: block;
  width: 20px;
}

#contents ul  > li .read-more span::before,
#contents ul  > li .read-more span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1.5px;
  height: 16px;
  background-color: var(--accent-color);
}

#contents ul  > li .read-more span::before {
  transform: translateY(-82%) rotate(-45deg);
}

#contents ul  > li .read-more span::after {
  transform: translateY(-18%) rotate(45deg);
}

@media (min-width: 550px) {
  #blog .section-illust {
    width: 150px;
    top: -50px;
    left: calc(50% - 190px);
  }
  #information .section-illust {
    left: calc(50% + 200px);
}
}

@media (min-width: 640px) {
  section {
    padding-bottom: 120px;
  }
  #blog .section-illust {
    width: 150px;
    top: -50px;
    left: calc(50% - 200px);
  }
  #information .section-illust {
    width: 70px;
    left: calc(50% + 250px);
  }
}

@media (min-width: 768px) {
  section {
    padding-bottom: 150px;
  }
  #concept {
    margin-bottom: 150px;
  }
  #news .section-illust {
    width: 200px;
    top: -190px;
    left: calc(50% + 200px);
  }
  #contents .section-illust {
    width: 350px;
    top: -275px;
    left: calc(50% - 250px);
  }
  #blog .section-illust {
    width: 175px;
    top: -50px;
    left: calc(50% - 260px);
  }
  #information .section-illust {
    width: 80px;
    left: calc(50% + 300px);
  }
  #contents ul > li > .content-item > .content-thumb {
    width: 350px;
  }
}

/* blog */

#instagram-list {
  position: relative;
  width: 100%;
  height: 440px;
}

.instagram-item {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

.instagram-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instagram-item > .instagram-image {
  width: 100%;
  height: 100%;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  position: relative;
  z-index: 2;
}

.instagram-item > img {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#instagram-list {
  width: 100vw;
  overflow: hidden;
  height: 100vw;
}

#instagram-list > .instagram-item:nth-child(1) > .instagram-image {
  mask-image: url("../svg/mask-bubble-blog1.svg");
}
#instagram-list > .instagram-item:nth-child(2) > .instagram-image {
  mask-image: url("../svg/mask-bubble-blog2.svg");
}
#instagram-list > .instagram-item:nth-child(3) > .instagram-image {
  mask-image: url("../svg/mask-bubble-blog3.svg");
}
#instagram-list > .instagram-item:nth-child(4) > .instagram-image {
  mask-image: url("../svg/mask-bubble-blog4.svg");
}
#instagram-list > .instagram-item:nth-child(5) > .instagram-image {
  mask-image: url("../svg/mask-bubble-blog5.svg");
}
#instagram-list > .instagram-item:nth-child(6) > .instagram-image {
  mask-image: url("../svg/mask-bubble-blog6.svg");
}

#instagram-list > .instagram-item:nth-child(1) {
  width: calc(454.94 / 1242 * 100%);
  height: calc(399.15 / 1242 * 100%);
  top: calc(61.14 / 1242 * 100%);
  left: calc(-21.17 / 1242 * 100%);
}
#instagram-list > .instagram-item:nth-child(2) {
  width: calc(512.09 / 1242 * 100%);
  height: calc(490.37 / 1242 * 100%);
  top: calc(619.89 / 1242 * 100%);
  left: calc(-148.27 / 1242 * 100%);
}
#instagram-list > .instagram-item:nth-child(3) {
  width: calc(426.14 / 1242 * 100%);
  height: calc(316.45 / 1242 * 100%);
  top: calc(0 / 1242 * 100%);
  left: calc(501.73 / 1242 * 100%);
}
#instagram-list > .instagram-item:nth-child(4) {
  width: calc(432.50 / 1242 * 100%);
  height: calc(485.17 / 1242 * 100%);
  top: calc(460.24 / 1242 * 100%);
  left: calc(404.84 / 1242 * 100%);
}
#instagram-list > .instagram-item:nth-child(5) {
  width: calc(544.95 / 1242 * 100%);
  height: calc(392.91 / 1242 * 100%);
  top: calc(276.26 / 1242 * 100%);
  left: calc(828.99 / 1242 * 100%);
}
#instagram-list > .instagram-item:nth-child(6) {
  width: calc(454.94 / 1242 * 100%);
  height: calc(399.15 / 1242 * 100%);
  top: calc(776.66 / 1242 * 100%);
  left: calc(873.99 / 1242 * 100%);
}

.instagram-view-more {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.instagram-view-more a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.instagram-view-more img {
  width: 20px;
}

.instagram-view-more span {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--text-color);
  text-decoration: underline;
}

#instagram-list .instagram-item{
  will-change: transform;
  transform-origin: 50% 50%;
}

.header-image-slider .slider-set > .slider-item:nth-child(1) { animation: floatSoftAOnlyUpperSide 24s ease-in-out infinite; }
.header-image-slider .slider-set > .slider-item:nth-child(2){ animation: floatSoftBOnlyLowerSide 30s ease-in-out infinite -3s; }
.header-image-slider .slider-set > .slider-item:nth-child(3){ animation: floatSoftC 31s ease-in-out infinite -6s; }
.header-image-slider .slider-set > .slider-item:nth-child(4){ animation: floatSoftB 27s ease-in-out infinite -2s; }
.header-image-slider .slider-set > .slider-item:nth-child(5){ animation: floatSoftA 29s ease-in-out infinite -5s; }
.header-image-slider .slider-set > .slider-item:nth-child(6){ animation: floatSoftC 34s ease-in-out infinite -8s; }
.header-image-slider .slider-set > .slider-item:nth-child(1) > img { animation: scaleSoftA 24s ease-in-out infinite; }
.header-image-slider .slider-set > .slider-item:nth-child(2) > img { animation: scaleSoftB 30s ease-in-out infinite -3s; }
.header-image-slider .slider-set > .slider-item:nth-child(3) > img { animation: scaleSoftC 31s ease-in-out infinite -6s; }
.header-image-slider .slider-set > .slider-item:nth-child(4) > img { animation: scaleSoftB 27s ease-in-out infinite -2s; }
.header-image-slider .slider-set > .slider-item:nth-child(5) > img { animation: scaleSoftA 29s ease-in-out infinite -5s; }
.header-image-slider .slider-set > .slider-item:nth-child(6) > img { animation: scaleSoftC 34s ease-in-out infinite -8s; }


#instagram-list > .instagram-item:nth-child(1){ animation: floatSoftA 24s ease-in-out infinite; }
#instagram-list > .instagram-item:nth-child(2){ animation: floatSoftB 30s ease-in-out infinite -3s; }
#instagram-list > .instagram-item:nth-child(3){ animation: floatSoftC 31s ease-in-out infinite -6s; }
#instagram-list > .instagram-item:nth-child(4){ animation: floatSoftB 27s ease-in-out infinite -2s; }
#instagram-list > .instagram-item:nth-child(5){ animation: floatSoftA 29s ease-in-out infinite -5s; }
#instagram-list > .instagram-item:nth-child(6){ animation: floatSoftC 34s ease-in-out infinite -8s; }
#instagram-list > .instagram-item:nth-child(1) > div > img { animation: scaleSoftA 24s ease-in-out infinite; }
#instagram-list > .instagram-item:nth-child(2) > div > img { animation: scaleSoftB 30s ease-in-out infinite -3s; }
#instagram-list > .instagram-item:nth-child(3) > div > img { animation: scaleSoftC 31s ease-in-out infinite -6s; }
#instagram-list > .instagram-item:nth-child(4) > div > img { animation: scaleSoftB 27s ease-in-out infinite -2s; }
#instagram-list > .instagram-item:nth-child(5) > div > img { animation: scaleSoftA 29s ease-in-out infinite -5s; }
#instagram-list > .instagram-item:nth-child(6) > div > img { animation: scaleSoftC 34s ease-in-out infinite -8s; }
#instagram-list > .instagram-item:nth-child(1) > img { animation: transitionSoftA 24s ease-in-out infinite; }
#instagram-list > .instagram-item:nth-child(2) > img { animation: transitionSoftB 30s ease-in-out infinite -3s; }
#instagram-list > .instagram-item:nth-child(3) > img { animation: transitionSoftC 31s ease-in-out infinite -6s; }
#instagram-list > .instagram-item:nth-child(4) > img { animation: transitionSoftB 27s ease-in-out infinite -2s; }
#instagram-list > .instagram-item:nth-child(5) > img { animation: transitionSoftA 29s ease-in-out infinite -5s; }
#instagram-list > .instagram-item:nth-child(6) > img { animation: transitionSoftC 34s ease-in-out infinite -8s; }
/* #concept .section-bg > div:nth-child(1) {
  animation: floatSoftA 24s ease-in-out infinite;
}
#concept .section-bg > div:nth-child(2) {
  animation: floatSoftB 30s ease-in-out infinite -3s;
}
#concept .section-bg > div:nth-child(3) {
  animation: floatSoftC 31s ease-in-out infinite -6s;
}
#concept .section-bg > div:nth-child(4) {
  animation: floatSoftB 27s ease-in-out infinite -2s;
} */
@keyframes floatSoftA{
  0%,100%{ transform: translate3d(0,0,0) rotate(-2deg); }
  25%    { transform: translate3d(6px,-8px,0) rotate(1.6deg); }
  50%    { transform: translate3d(-4px,-4px,0) rotate(-0.8deg); }
  75%    { transform: translate3d(4px,4px,0) rotate(1.2deg); }
}
@keyframes floatSoftAOnlyUpperSide{
  0%,100%{ transform: translate3d(0,0,0) rotate(-2deg); }
  25%    { transform: translate3d(6px,-8px,0) rotate(1.6deg); }
  50%    { transform: translate3d(-4px,-4px,0) rotate(-0.8deg); }
  75%    { transform: translate3d(4px,0px,0) rotate(1.2deg); }
}
@keyframes floatSoftB{
  0%,100%{ transform: translate3d(0,0,0) rotate(0.80deg); }
  30%    { transform: translate3d(-8px,-6px,0) rotate(-1.6deg); }
  60%    { transform: translate3d(4px,-10px,0) rotate(0.8deg); }
  85%    { transform: translate3d(-4px,4px,0) rotate(1.6deg); }
}
@keyframes floatSoftBOnlyLowerSide{
  0%,100%{ transform: translate3d(0,0,0) rotate(0.80deg); }
  30%    { transform: translate3d(-8px,6px,0) rotate(-1.6deg); }
  60%    { transform: translate3d(4px,10px,0) rotate(0.8deg); }
  85%    { transform: translate3d(-4px,4px,0) rotate(1.6deg); }
}
@keyframes floatSoftC{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  20%    { transform: translate3d(4px,-4px,0) rotate(-1.6deg); }
  45%    { transform: translate3d(-6px,-12px,0) rotate( 2deg); }
  70%    { transform: translate3d(8px,-2px,0) rotate(-0.8deg); }
  90%    { transform: translate3d(-2px,6px,0) rotate(1.2deg); }
}
@keyframes scaleSoftA{
  0%,100%{ transform: scale(1.05); }
  25%    { transform: scale(1.10); }
  50%    { transform: scale(1); }
  75%    { transform: scale(1.1); }
}
@keyframes scaleSoftB{
  0%,100%{ transform: scale(1.05); }
  30%    { transform: scale(1.05); }
  60%    { transform: scale(1); }
  85%    { transform: scale(1.1); }
}
@keyframes scaleSoftC{
  0%,100%{ transform: scale(1.05); }
  20%    { transform: scale(1.05); }
  45%    { transform: scale(1); }
  70%    { transform: scale(1.05); }
  90%    { transform: scale(1); }
}
@keyframes transitionSoftA{
  0%,100%{ top: 8px; left: 8px; }
  25%    { top: 12px; left: 12px; }
  50%    { top: 8px; left: 8px; }
  75%    { top: 12px; left: 12px; }
}
@keyframes transitionSoftB{
  0%,100%{ top: 8px; left: 8px; }
  30%    { top: -4px; left: -4px; }
  60%    { top: 8px; left: 8px; }
  85%    { top: 10px; left: 10px; }
}
@keyframes transitionSoftC{
  0%,100%{ top: 8px; left: 8px; }
  20%    { top: 4px; left: 4px; }
  45%    { top: -4px; left: -4px; }
  70%    { top: 14px; left: 14px; }
  90%    { top: 6px; left: 6px; }
}


/* information */

#information {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 0px;
}

#information .info-text {
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
}

#information .info-text > p {
  line-height: 2;
  letter-spacing: 0.05em;
  font-size: 13px;
  margin: 0;
  position: relative;
  z-index: 2;
  display: inline;
}

#information .info-text > p {
  display: inline;
  background-image: linear-gradient(var(--sub-color), var(--sub-color));
  background-repeat: no-repeat;
  --thick: 15px;
  --gap: -8px;
  background-size: 100% var(--thick);
  background-position: 0 calc(1em + var(--gap));
  padding-bottom: calc(var(--gap) + var(--thick));
  a {
    display: inline;
    text-decoration: underline;
    color: var(--text-color);
  }
}


#information .info-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  #information .info-wrapper {
    flex-direction: row;
    gap: 60px;
    justify-content: center;
  }
}

#information .address-area {
  margin-bottom: 40px;
}

#information .address-area .address-title,
#information .contact-area .contact-title {
  font-size: 16px;
  letter-spacing: 0.05em;
}

#information .address-area .address-title span,
#information .contact-area .contact-title span {
  display: inline-block;
  border-bottom: 1px solid var(--text-color);
  padding: 0 20px;
  padding-bottom: 2px;
  line-height: 1;
  margin-bottom: 20px;
  font-size: 16px;

}

#information .address-area .address-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#information .address-area .address-content > div:first-child {
  max-width: 250px;
  margin: 0 auto;
}

#information .address-area .address-content > div:last-child {
}

#information .address-area .address-content .address-info {
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding: 0 30px;
  margin-bottom: 0px;
}

#information .address-area .address-content .google-map-btn {
  font-size: 13px;
  letter-spacing: 0.15em;
  line-height: 2.8;
  background-color: var(--text-color);
  color: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  display: inline;
}

#information .contact-area .contact-content p {
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 10px;
}

#information .contact-area .contact-content a {
  display: inline;
  font-size: inherit;
  letter-spacing: 0.1em;
  line-height: 2.8;
  color: var(--text-color);
  text-decoration: underline;
}

/* footer */

.site-footer {
  background: var(--background);
  text-align: center;
  padding-bottom: 10px;
}

.site-footer * {
  color: var(--text-color);
  letter-spacing: 0.1em;
  font-size: 12px;
}

/* media queries */

@media (min-width: 550px) {
  #contents .content-text p {
    font-size: 14px;
  }
  #contents ul > li + li {
    margin-top: 100px;
  }
}

@media (min-width: 640px) {
  .section-title {
    margin-bottom: 75px;
  }
  .concept-title {
    font-size: 24px;
  }
  .concept-text p {
    font-size: 14px;
    line-height: 2.8;
    letter-spacing: 0.1em;
  }
  #contents .content-text p {
    font-size: 16px;
  }
  #contents ul > li + li {
    margin-top: 120px;
  }
  #contents .content-title-e > div {
    height: calc(33px * 1.2);
  }
  #contents .content-title-e span {
    font-size: calc(21px * 1.2);
    line-height: 20px;
  }
  #contents ul > li .content-title h3 {
    font-size: calc(16px * 1.2);
  }
  #information .info-text > p,
  #information .contact-area .contact-content p,
  #information .address-area .address-content .address-info,
  #information .address-area .address-content .google-map-btn {
    font-size: 16px;
  }
  #information .address-area .address-title span, #information .contact-area .contact-title span {
    font-size: 18px;
  }



}

@media (min-width: 768px) {
  .section-title,
  .section-illust {
    transform: scale(1.2);
  }
  .concept-title {
    font-size: 28px;
  }
  #concept {
    margin-top: 50px;
  }
  #concept .section-inner {
    padding-top: 5px;
  }
  .concept-text p {
    font-size: 16px;
    line-height: 3;
    letter-spacing: 0.15em;
  }
  #concept .section-bg > div img {
    transform: scale(1.2);
  }
  li.news-title span,
  li.news-title a {
    font-size: 16px;
  }
  li.news-title span {
    width: 110px;
  }
  #contents .content-title-e > div {
    height: calc(33px * 1.3);
  }
  #contents .content-title-e > div > img:nth-child(1) {
    bottom: -15px;
    width: 90px;
  }
  #contents ul  > li:nth-child(2) .content-title-e > div > img:nth-child(1) {
    bottom: -30px;
    right: -8px;
  }
  #contents .content-title-e span {
    font-size: calc(21px * 1.3);
    line-height: 19px;
  }
  #contents ul > li .content-title h3 {
    font-size: calc(16px * 1.3);
  }
  #contents ul > li > .content-item .content-text {
    padding-top: 40px;
  }
  #contents ul > li:nth-child(even) .content-title {
    transform-origin: right top;
  }
  #contents .content-text p {
    margin-bottom: 20px;
  }

  
  #contents ul > li .read-more {
    margin-top: 60px;
  }
  #contents ul > li .read-more a {
    font-size: 18px;
  }
  #contents ul > li .read-more span {
    transform: scale(1.5);
  }
  #contents ul > li:nth-child(even) .read-more {
    padding-right: 35px;
  }

  #instagram-list {
    width: 640px;
    overflow: initial;
    height: 640px;
    margin: 0 auto;
  }
  
  #footer-bg {
    transform: scale(1.2);
  }
}

@media (min-width: 1024px) {

  #contents ul > li > .content-item > .content-thumb img,
  #contents ul > li:nth-child(even) > .content-item > .content-thumb img  {
    border-radius: 30px;
  }

}


/* animation */

.ani-obj, .ani-obj-150, .ani-obj-250 {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(3px);
  transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out, transform 1.2s ease-in-out;
}
.ani-delay-100 {
  transition-delay: 0.1s!important;
}
.ani-delay-200 {
  transition-delay: 0.2s!important;
}
.ani-delay-300 {
  transition-delay: 0.3s!important;
}
.ani-delay-400 {
  transition-delay: 0.4s!important;
}
.ani-delay-500 {
  transition-delay: 0.5s!important;
}
.ani-delay-600 {
  transition-delay: 0.6s!important;
}
.ani-delay-700 {
  transition-delay: 0.7s!important;
}
.ani-delay-800 {
  transition-delay: 0.8s!important;
}
.ani-delay-900 {
  transition-delay: 0.9s!important;
}


.ani-obj.animated, .ani-obj-150.animated, .ani-obj-250.animated {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px);
}