@charset "UTF-8";
:root {
  --grad-progress: 0;
  --intro-progress: 0;
  --g-padding-s: 40px;
  --g-padding-m: 120px;
  --g-padding-l: 152px;
  --g-color-base: #ECECEC;
  --g-color-bg: #F4F5F7;
  --g-color-red: #EF626B;
  --g-color-orange: #E27A1E;
  --g-color-black: #211816;
  --g-color-blue: #00A0E9;
  --g-color-white: #fff;
  --g-color-border: #707070;
}
@media screen and (max-width: 1500px) {
  :root {
    --g-padding-s: 40rem;
    --g-padding-m: 120rem;
    --g-padding-l: 152rem;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --g-padding-s: 0;
    --g-padding-m: 0;
    --g-padding-l: 0;
  }
}

._b {
  font-weight: bold;
}

._m {
  font-weight: 500;
}

._n {
  font-weight: normal;
}

.c-font-xs {
  font-size: 12rem;
  letter-spacing: 0.05em;
}

.c-font-s {
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
}

.c-font-m {
  font-size: 25rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

.c-font-l {
  font-size: 45rem;
  font-weight: 500;
  line-height: 90rem;
  letter-spacing: 0.05em;
}

.c-font-xl {
  font-size: 120rem;
  font-weight: normal;
  line-height: 1.2;
}

@media (max-width: 768px) {
  ._pc {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  ._tablet {
    display: none !important;
  }
}
@media (min-width: 768px) {
  ._sp {
    display: none !important;
  }
}
.smooth-scroll {
  height: 100vh;
  width: 100%;
}

.scrollbar-track {
  display: none !important;
}

html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

[data-scroll-container] {
  overflow: hidden !important;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11rem;
  height: 100vh;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.c-scrollbar:hover {
  transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7rem;
  border-radius: 10rem;
  margin: 2rem;
  cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
  cursor: grabbing;
}

.cover-footer {
  z-index: 1;
}

body.is-loading .js-cursor {
  display: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}

html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  font-size: 0.0520833333vw;
}
@media screen and (max-width: 1500px) {
  html {
    font-size: 0.0666666667vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 0.2666666667vw;
  }
}
html::-webkit-scrollbar {
  display: none;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

::before,
::after {
  box-sizing: inherit;
  margin: 0;
}

::-moz-selection {
  background-color: #ccc;
}

::selection {
  background-color: #ccc;
}

body {
  overflow-wrap: break-word;
  width: 100%;
  min-height: 100%;
  line-height: 1.8;
  overflow-x: clip;
  background: url(../img/top/white-bg.webp);
  background-repeat: repeat;
  background-size: 100% auto;
  background-position: center;
}
body.is-menu-active {
  overflow: hidden;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1em;
}

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

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 0;
  visibility: unset !important;
}

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

dl {
  padding: 0;
}

iframe {
  border-style: none;
}

.black a,
.black p {
  color: #000;
}

h1,
h2,
h3,
h4,
h5,
a,
p,
span {
  color: var(--g-color-black);
}

section {
  position: relative;
  overflow-x: clip;
}

span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

body.mac-os .home-intro__ttl-icons-graphic {
  bottom: 1.9270833333vw !important;
}
body.mac-os .home-footer__intro .home-intro__ttl-icons-graphic {
  bottom: 0.2083333333vw !important;
}

.sec-ttl__wrap._show .sec-ttl span {
  transform: translateY(0);
}

.js-menu .c-menu {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.js-menu .c-menu span {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: inherit;
}
@media screen and (max-width: 768px) {
  .js-menu .c-menu span {
    transform: unset !important;
  }
}
.js-menu .c-menu span::after {
  position: absolute;
  top: 0;
  left: 0;
  color: inherit;
  content: attr(data-text);
  transform: translateY(100%);
}
@media screen and (max-width: 768px) {
  .js-menu .c-menu span::after {
    content: unset;
  }
}

section {
  position: relative;
}

.forpc {
  display: block;
}
@media screen and (max-width: 768px) {
  .forpc {
    display: none;
  }
}

.forsp {
  display: none;
}
@media screen and (max-width: 768px) {
  .forsp {
    display: block;
  }
}

.container {
  max-width: 1100px;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 1500px) {
  .container {
    max-width: 1100rem;
  }
}
@media screen and (max-width: 768px) {
  .container {
    max-width: 295rem;
  }
}

.h-container {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 1500px) {
  .h-container {
    max-width: 1200rem;
  }
}
@media screen and (max-width: 768px) {
  .h-container {
    max-width: 295rem;
  }
}

.s-container {
  max-width: 800px;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 1500px) {
  .s-container {
    max-width: 800rem;
  }
}
@media screen and (max-width: 768px) {
  .s-container {
    max-width: 390rem;
  }
}

.sec-ttl {
  text-align: center;
}
.sec-ttl h2 {
  color: var(--g-color-white);
  font-size: 110px;
  letter-spacing: 0.05em;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
}
@media screen and (max-width: 1500px) {
  .sec-ttl h2 {
    font-size: 110rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-ttl h2 {
    line-height: 1.5;
    font-size: 58rem;
  }
}
.sec-ttl h2 span {
  display: block;
}
.sec-ttl h2 span._fadeup {
  transform: translateY(100%);
  opacity: 1;
}
.sec-ttl p {
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--g-color-white);
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec-ttl p {
    font-size: 14rem;
  }
}
.sec-ttl._blue h2,
.sec-ttl._blue p {
  color: #00A0E9;
}

.parallax-img__wrap {
  position: relative;
}
.parallax-img__wrap .parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
}

.slide-auto-loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.slide-auto-loop-area {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: loop-area 100s infinite linear;
}

@keyframes loop-area {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.slide-auto-loop-img {
  width: 520px;
  height: 400px;
}
@media screen and (max-width: 1500px) {
  .slide-auto-loop-img {
    width: 520rem;
    height: 400rem;
  }
}
@media screen and (max-width: 768px) {
  .slide-auto-loop-img {
    width: 417rem;
    height: 320rem;
  }
}
.slide-auto-loop-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slide-auto-loop-txt {
  font-size: 176px;
  letter-spacing: 0.05em;
  color: var(--g-color-white);
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  line-height: 1;
  text-wrap: nowrap;
  margin-right: 140px;
}
@media screen and (max-width: 1500px) {
  .slide-auto-loop-txt {
    margin-right: 140rem;
    font-size: 176rem;
  }
}
@media screen and (max-width: 768px) {
  .slide-auto-loop-txt {
    font-size: 74rem;
  }
}

.lower-ttl {
  height: 520px;
  position: relative;
  padding-top: 180px;
  text-align: center;
  background: url(../img/top/lower-ttl.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  margin-bottom: 120px;
}
@media screen and (max-width: 1500px) {
  .lower-ttl {
    margin-bottom: 120rem;
    height: 520rem;
    padding-top: 180rem;
  }
}
@media screen and (max-width: 768px) {
  .lower-ttl {
    margin-bottom: 60rem;
    height: 300rem;
    padding-top: 120rem;
  }
}
.lower-ttl h2 {
  font-size: 110px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  color: var(--g-color-white);
  font-weight: 500;
}
@media screen and (max-width: 1500px) {
  .lower-ttl h2 {
    font-size: 110rem;
  }
}
@media screen and (max-width: 768px) {
  .lower-ttl h2 {
    font-size: 58rem;
  }
}
.lower-ttl p {
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--g-color-white);
}
@media screen and (max-width: 768px) {
  .lower-ttl p {
    font-size: 16rem;
  }
}
.lower-ttl-deco img {
  position: absolute;
}
.lower-ttl-deco img:nth-child(1) {
  top: 96px;
  left: 46px;
  width: 330px;
}
@media screen and (max-width: 1500px) {
  .lower-ttl-deco img:nth-child(1) {
    top: 96rem;
    left: 46rem;
    width: 330rem;
  }
}
@media screen and (max-width: 768px) {
  .lower-ttl-deco img:nth-child(1) {
    top: 85rem;
    left: 20rem;
    width: 110rem;
  }
}
.lower-ttl-deco img:nth-child(2) {
  top: 298px;
  right: 70%;
  width: 162px;
}
@media screen and (max-width: 1500px) {
  .lower-ttl-deco img:nth-child(2) {
    top: 298rem;
    width: 162rem;
  }
}
@media screen and (max-width: 768px) {
  .lower-ttl-deco img:nth-child(2) {
    left: 0;
    right: auto;
    top: 228rem;
    width: 90rem;
  }
}
.lower-ttl-deco img:nth-child(3) {
  width: 400px;
  bottom: 56px;
  right: 0;
}
@media screen and (max-width: 1500px) {
  .lower-ttl-deco img:nth-child(3) {
    width: 400rem;
    bottom: 56rem;
  }
}
@media screen and (max-width: 768px) {
  .lower-ttl-deco img:nth-child(3) {
    width: 120rem;
    bottom: 36rem;
  }
}

.work-ctg-list {
  margin-bottom: 42px;
}
@media screen and (max-width: 1500px) {
  .work-ctg-list {
    margin-bottom: 42rem;
  }
}
@media screen and (max-width: 768px) {
  .work-ctg-list {
    margin-bottom: 20rem;
  }
}
.work-ctg-list-main {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 20px;
}
@media screen and (max-width: 1500px) {
  .work-ctg-list-main {
    padding-bottom: 20rem;
  }
}
.work-ctg-list ul {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 8px;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (max-width: 1500px) {
  .work-ctg-list ul {
    gap: 8rem;
  }
}
.work-ctg-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 163px;
  height: 46px;
  border-radius: 100px;
  transition: all 0.4s ease-in-out;
  background: #F0F0F0;
  color: rgba(0, 0, 0, 0.2);
  letter-spacing: 0.05em;
  font-size: 16px;
  cursor: pointer;
}
@media screen and (max-width: 1500px) {
  .work-ctg-list li {
    width: 163rem;
    height: 46rem;
    font-size: 16rem;
  }
}
@media screen and (max-width: 768px) {
  .work-ctg-list li {
    width: 120rem;
    height: 30rem;
    font-size: 12rem;
  }
}
.work-ctg-list li:hover {
  background: #00A0E9;
  color: var(--g-color-white);
}
.work-ctg-list li.active {
  background: #00A0E9;
  color: var(--g-color-white);
}
.work-ctg-list li.active:hover {
  opacity: 0.6;
}

html {
  font-family: YakuHanJP_Narrow, "Montserrat", "Zen Kaku Gothic Antique", sans-serif;
}

._bold {
  font-weight: 700;
}

.js-ttl,
.js-ttl-io {
  overflow: hidden;
  display: block;
  opacity: 0;
}
.js-ttl.show,
.js-ttl-io.show {
  opacity: 1;
}
.js-ttl > span,
.js-ttl-io > span {
  display: inline-flex;
  align-items: center;
}
.js-ttl > span span,
.js-ttl-io > span span {
  display: inline-block;
  transform: translate(0, 101%);
  transition: transform 1.2s cubic-bezier(0.32, 0.1, 0, 1);
}
.js-ttl > span span._delay._show,
.js-ttl-io > span span._delay._show {
  transform: translate(0);
}
.js-ttl > span span._delay._show:nth-of-type(1),
.js-ttl-io > span span._delay._show:nth-of-type(1) {
  transition-delay: 0s;
}
.js-ttl > span span._delay._show:nth-of-type(2),
.js-ttl-io > span span._delay._show:nth-of-type(2) {
  transition-delay: 0.1s;
}
.js-ttl > span span._delay._show:nth-of-type(3),
.js-ttl-io > span span._delay._show:nth-of-type(3) {
  transition-delay: 0.18s;
}
.js-ttl > span span._delay._show:nth-of-type(4),
.js-ttl-io > span span._delay._show:nth-of-type(4) {
  transition-delay: 0.26s;
}
.js-ttl > span span._delay._show:nth-of-type(5),
.js-ttl-io > span span._delay._show:nth-of-type(5) {
  transition-delay: 0.34s;
}
.js-ttl > span span._delay._show:nth-of-type(6),
.js-ttl-io > span span._delay._show:nth-of-type(6) {
  transition-delay: 0.42s;
}
.js-ttl > span span._delay._show:nth-of-type(7),
.js-ttl-io > span span._delay._show:nth-of-type(7) {
  transition-delay: 0.5s;
}
.js-ttl > span span._delay._show:nth-of-type(8),
.js-ttl-io > span span._delay._show:nth-of-type(8) {
  transition-delay: 0.58s;
}
.js-ttl > span span._delay._show:nth-of-type(9),
.js-ttl-io > span span._delay._show:nth-of-type(9) {
  transition-delay: 0.66s;
}
.js-ttl > span span._delay._show:nth-of-type(10),
.js-ttl-io > span span._delay._show:nth-of-type(10) {
  transition-delay: 0.74s;
}
.js-ttl > span span._delay._show:nth-of-type(11),
.js-ttl-io > span span._delay._show:nth-of-type(11) {
  transition-delay: 0.82s;
}
.js-ttl > span span._delay._show:nth-of-type(12),
.js-ttl-io > span span._delay._show:nth-of-type(12) {
  transition-delay: 0.9s;
}
.js-ttl > span span._delay._show:nth-of-type(13),
.js-ttl-io > span span._delay._show:nth-of-type(13) {
  transition-delay: 0.98s;
}
.js-ttl > span span._delay._show:nth-of-type(14),
.js-ttl-io > span span._delay._show:nth-of-type(14) {
  transition-delay: 1.06s;
}
.js-ttl > span span._delay._show:nth-of-type(15),
.js-ttl-io > span span._delay._show:nth-of-type(15) {
  transition-delay: 1.12s;
}
.js-ttl > span span._delay._show:nth-of-type(16),
.js-ttl-io > span span._delay._show:nth-of-type(16) {
  transition-delay: 1.2s;
}
.js-ttl > span span._delay._show:nth-of-type(17),
.js-ttl-io > span span._delay._show:nth-of-type(17) {
  transition-delay: 1.28s;
}
.js-ttl > span span._delay._show:nth-of-type(18),
.js-ttl-io > span span._delay._show:nth-of-type(18) {
  transition-delay: 1.36s;
}
.js-ttl > span span._delay._show:nth-of-type(19),
.js-ttl-io > span span._delay._show:nth-of-type(19) {
  transition-delay: 1.44s;
}
.js-ttl > span span._delay._show:nth-of-type(20),
.js-ttl-io > span span._delay._show:nth-of-type(20) {
  transition-delay: 1.52s;
}
.js-ttl > span span._delay._show:nth-of-type(21),
.js-ttl-io > span span._delay._show:nth-of-type(21) {
  transition-delay: 1.6s;
}
.js-ttl > span span._delay._show:nth-of-type(22),
.js-ttl-io > span span._delay._show:nth-of-type(22) {
  transition-delay: 1.68s;
}
.js-ttl > span span._delay._show:nth-of-type(23),
.js-ttl-io > span span._delay._show:nth-of-type(23) {
  transition-delay: 1.74s;
}
.js-ttl > span span._delay._show:nth-of-type(24),
.js-ttl-io > span span._delay._show:nth-of-type(24) {
  transition-delay: 1.82s;
}
.js-ttl > span span._delay._show:nth-of-type(25),
.js-ttl-io > span span._delay._show:nth-of-type(25) {
  transition-delay: 1.9s;
}
.js-ttl > span span._delay._show:nth-of-type(26),
.js-ttl-io > span span._delay._show:nth-of-type(26) {
  transition-delay: 1.98s;
}
.js-ttl > span span._delay._show:nth-of-type(27),
.js-ttl-io > span span._delay._show:nth-of-type(27) {
  transition-delay: 2.04s;
}
.js-ttl > span span._delay._show:nth-of-type(28),
.js-ttl-io > span span._delay._show:nth-of-type(28) {
  transition-delay: 2.12s;
}
.js-ttl > span span._delay._show:nth-of-type(29),
.js-ttl-io > span span._delay._show:nth-of-type(29) {
  transition-delay: 2.2s;
}
.js-ttl > span span._delay._show:nth-of-type(30),
.js-ttl-io > span span._delay._show:nth-of-type(30) {
  transition-delay: 2.28s;
}
.js-ttl > span span._show,
.js-ttl-io > span span._show {
  transform: translate(0, 0);
}

.js-io._fadeup {
  transform: translate(0, 36px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.32, 0.1, 0, 1), opacity 1.2s cubic-bezier(0.32, 0.1, 0, 1), background 1.2s cubic-bezier(0.32, 0.1, 0, 1);
}
.js-io._fadetoup {
  transform: translate(0, 130%);
  transition: transform 1.2s cubic-bezier(0.32, 0.1, 0, 1), opacity 1.2s cubic-bezier(0.32, 0.1, 0, 1), background 1.2s cubic-bezier(0.32, 0.1, 0, 1);
}
.js-io._fadeleft {
  transform: translateX(100px) scale(1.1);
  transition: all 0.5s ease-in-out;
  visibility: hidden;
  filter: blur(10px);
  opacity: 0;
}
@media screen and (max-width: 1500px) {
  .js-io._fadeleft {
    transform: translateX(100rem) scale(1.1);
  }
}
@media screen and (max-width: 768px) {
  .js-io._fadeleft {
    transform: translateX(50rem) scale(1.1);
  }
}
.js-io._blur {
  transform: scale(1.1);
  transition: all 1s ease-in-out;
  visibility: hidden;
  filter: blur(10px);
  opacity: 0;
}
.js-io._fadein {
  transform: translateY(0);
  transition: all 1s ease-in-out;
  visibility: hidden;
  opacity: 0;
}
.js-io._zoomup {
  transform: scale(0.5);
  transition: all 1s ease-in-out;
  visibility: hidden;
  opacity: 0;
  transition-timing-function: cubic-bezier(1, -0.195, 0, 1.33);
}
.js-io._show {
  transform: translate(0) scale(1);
  visibility: visible;
  filter: blur(0);
  opacity: 1;
}
.js-io._delay.--fadein {
  transform: translateY(0);
}
.js-io._delay._show {
  transform: translate(0) scale(1);
  visibility: visible;
  filter: blur(0);
  opacity: 1;
}
.js-io._delay._show:nth-of-type(1) {
  transition-delay: 0s;
}
.js-io._delay._show:nth-of-type(2) {
  transition-delay: 0.05s;
}
.js-io._delay._show:nth-of-type(3) {
  transition-delay: 0.09s;
}
.js-io._delay._show:nth-of-type(4) {
  transition-delay: 0.13s;
}
.js-io._delay._show:nth-of-type(5) {
  transition-delay: 0.17s;
}
.js-io._delay._show:nth-of-type(6) {
  transition-delay: 0.21s;
}
.js-io._delay._show:nth-of-type(7) {
  transition-delay: 0.25s;
}
.js-io._delay._show:nth-of-type(8) {
  transition-delay: 0.29s;
}
.js-io._delay._show:nth-of-type(9) {
  transition-delay: 0.33s;
}
.js-io._delay._show:nth-of-type(10) {
  transition-delay: 0.37s;
}
.js-io._delay._show:nth-of-type(11) {
  transition-delay: 0.41s;
}
.js-io._delay._show:nth-of-type(12) {
  transition-delay: 0.45s;
}
.js-io._delay._show:nth-of-type(13) {
  transition-delay: 0.49s;
}
.js-io._delay._show:nth-of-type(14) {
  transition-delay: 0.53s;
}
.js-io._delay._show:nth-of-type(15) {
  transition-delay: 0.57s;
}
.js-io._delay._show:nth-of-type(16) {
  transition-delay: 0.61s;
}
.js-io._delay._show:nth-of-type(17) {
  transition-delay: 0.65s;
}
.js-io._delay._show:nth-of-type(18) {
  transition-delay: 0.69s;
}
.js-io._delay._show:nth-of-type(19) {
  transition-delay: 0.73s;
}
.js-io._delay._show:nth-of-type(20) {
  transition-delay: 0.77s;
}
.js-io._delay._show:nth-of-type(21) {
  transition-delay: 0.81s;
}
.js-io._delay._show:nth-of-type(22) {
  transition-delay: 0.85s;
}
.js-io._delay._show:nth-of-type(23) {
  transition-delay: 0.89s;
}
.js-io._delay._show:nth-of-type(24) {
  transition-delay: 0.93s;
}
.js-io._delay._show:nth-of-type(25) {
  transition-delay: 0.97s;
}
.js-io._delay._show:nth-of-type(26) {
  transition-delay: 1.01s;
}
.js-io._delay._show:nth-of-type(27) {
  transition-delay: 1.05s;
}
.js-io._delay._show:nth-of-type(28) {
  transition-delay: 1.09s;
}
.js-io._delay._show:nth-of-type(29) {
  transition-delay: 1.13s;
}
.js-io._delay._show:nth-of-type(30) {
  transition-delay: 1.17s;
}

.js-menu .c-menu {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.js-menu .c-menu span {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: inherit;
}
.js-menu .c-menu span::after {
  position: absolute;
  top: 0;
  left: 0;
  color: inherit;
  content: attr(data-text);
  transform: translateY(100%);
}

._cus-blur {
  transform: scale(1.1);
  transition: all 1s ease-in-out;
  filter: blur(10px);
  opacity: 0;
}
._cus-blur._show {
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
}

._cus-fadeup {
  transform: translate(0, 36px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.32, 0.1, 0, 1), opacity 1.2s cubic-bezier(0.32, 0.1, 0, 1), background 1.2s cubic-bezier(0.32, 0.1, 0, 1);
}
._cus-fadeup._show {
  transform: translate(0);
  opacity: 1;
}
._cus-fadeup._delay._show {
  transform: translate(0) scale(1);
  visibility: visible;
  filter: blur(0);
  opacity: 1;
}
._cus-fadeup._delay._show:nth-of-type(1) {
  transition-delay: 0s;
}
._cus-fadeup._delay._show:nth-of-type(2) {
  transition-delay: 0.05s;
}
._cus-fadeup._delay._show:nth-of-type(3) {
  transition-delay: 0.09s;
}
._cus-fadeup._delay._show:nth-of-type(4) {
  transition-delay: 0.13s;
}
._cus-fadeup._delay._show:nth-of-type(5) {
  transition-delay: 0.17s;
}

.handle-anime-txt {
  animation-name: handle_anime_txt;
  animation-duration: 0.87s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes handle_anime_txt {
  0% {
    clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
    transform: translate(0, 100%) scale(1, 3.6);
  }
  100% {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    transform: translate(0, 0) scale(1);
  }
}
.js-io-anime {
  clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
}

.handle-anime {
  animation-name: handle_anime;
  animation-duration: 0.653s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-delay: 0.776s;
}

@keyframes handle_anime {
  0% {
    clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    transform: translate(0, 0);
  }
}
body.is-loading .js-cursor {
  display: none;
}

.full-border {
  border: 25px solid var(--g-color-white);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
}
@media screen and (max-width: 1500px) {
  .full-border {
    border: 25rem solid var(--g-color-white);
  }
}
@media screen and (max-width: 768px) {
  .full-border {
    border: 15rem solid var(--g-color-white);
  }
}

.full-border-outside {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  pointer-events: none;
  border: 25px solid var(--g-color-white);
  border-radius: 66px;
  display: block;
  width: 100vw;
  height: 100vh;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1500px) {
  .full-border-outside {
    border: 25rem solid var(--g-color-white);
    border-radius: 66rem;
  }
}
@media screen and (max-width: 768px) {
  .full-border-outside {
    border: 15rem solid var(--g-color-white);
    border-radius: 43rem;
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: transform 1.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.header.loaded {
  transform: translateY(0);
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 48px;
  margin: auto;
}
@media screen and (max-width: 1500px) {
  .header-container {
    padding: 32rem 48rem;
  }
}
@media screen and (max-width: 768px) {
  .header-container {
    grid-template-columns: 1fr auto;
    padding: 22rem 24rem;
  }
}
.header-logo {
  justify-self: start;
}
.header-logo__heading {
  margin: 0;
  line-height: 1;
}
.header-logo__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: opacity 0.25s ease;
}
.header-logo__link:hover {
  opacity: 0.85;
}
.header-logo__img {
  display: block;
  width: auto;
  height: 50px;
  max-width: none;
}
@media screen and (max-width: 1500px) {
  .header-logo__img {
    height: 50rem;
  }
}
@media screen and (max-width: 768px) {
  .header-logo__img {
    height: 38rem;
  }
}
.header-logo__text {
  display: none;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--g-color-white);
  letter-spacing: 0.08em;
  line-height: 1;
}
@media screen and (max-width: 1500px) {
  .header-logo__text {
    font-size: 20rem;
  }
}
@media screen and (max-width: 768px) {
  .header-logo__text {
    font-size: 16rem;
  }
}
.header_links {
  display: flex;
  justify-content: right;
  gap: 20rem;
}
.header_links-nav {
  display: flex;
  justify-self: center;
  background-color: var(--g-color-white);
  border: 1px solid #3b353c;
  border-radius: 9999px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .header_links-nav {
    display: none;
  }
}
.header_links-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 40px;
  margin: 0;
}
@media screen and (max-width: 1500px) {
  .header_links-nav__list {
    gap: 28rem;
    padding: 14rem 40rem;
  }
}
.header_links-nav__item {
  line-height: 1;
}
.header_links-nav__item--has-child .sub_link_group {
  position: absolute;
  top: 100%;
  left: 0rem;
  padding-top: 12rem;
  display: flex;
  gap: 10rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  transition-delay: 0.15s;
}
.header_links-nav__item--has-child .sub_link_group a {
  background-color: #54c3f1;
  padding-block: 5rem;
  color: #fff;
  font-size: 12rem;
  font-weight: 700;
  padding: 15rem 30rem;
  border-radius: 30rem;
  white-space: nowrap;
}
.header_links-nav__item--has-child:hover .sub_link_group {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.header_links-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 4em;
  color: #3b353c;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.25s ease;
}
@media screen and (max-width: 1500px) {
  .header_links-nav__link {
    gap: 6rem;
    font-size: 15rem;
    line-height: 2em;
  }
}
.header_links-nav__link:hover {
  color: #54c3f1;
}
.header_links-nav__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 8px;
  color: #54c3f1;
}
@media screen and (max-width: 1500px) {
  .header_links-nav__arrow {
    width: 10rem;
    height: 6rem;
  }
}
.header_links-menu {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 56px;
  height: 56px;
  padding: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-color: #54c3f1;
  border: 1px solid #3b353c;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.25s ease;
  transition: all ease-in-out 0.2s;
  position: relative;
  z-index: 999;
}
@media screen and (max-width: 1500px) {
  .header_links-menu {
    gap: 5rem;
    width: 56rem;
    height: 56rem;
  }
}
@media screen and (max-width: 768px) {
  .header_links-menu {
    width: 39rem;
    height: 39rem;
    gap: 3rem;
  }
}
.header_links-menu:hover {
  background-color: #fff;
  transition: all ease-in-out 0.2s;
}
.header_links-menu:hover .header_links-menu__bar {
  background-color: #54c3f1;
}
.header_links-menu__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--g-color-white);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media screen and (max-width: 1500px) {
  .header_links-menu__bar {
    width: 22rem;
    height: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .header_links-menu__bar {
    width: 15rem;
    height: 1.5rem;
  }
}
.header_links-menu.is-open .header_links-menu__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
@media screen and (max-width: 1500px) {
  .header_links-menu.is-open .header_links-menu__bar:nth-child(1) {
    transform: translateY(7rem) rotate(45deg);
  }
}
@media screen and (max-width: 768px) {
  .header_links-menu.is-open .header_links-menu__bar:nth-child(1) {
    transform: translateY(4rem) rotate(45deg);
  }
}
.header_links-menu.is-open .header_links-menu__bar:nth-child(2) {
  opacity: 0;
}
.header_links-menu.is-open .header_links-menu__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media screen and (max-width: 1500px) {
  .header_links-menu.is-open .header_links-menu__bar:nth-child(3) {
    transform: translateY(-7rem) rotate(-45deg);
  }
}
@media screen and (max-width: 768px) {
  .header_links-menu.is-open .header_links-menu__bar:nth-child(3) {
    transform: translateY(-5rem) rotate(-45deg);
  }
}

.full-bg {
  position: fixed;
  background: #8edff8;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 720;
  transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), visibility 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  visibility: hidden;
  opacity: 0;
}
.full-bg.open-menu {
  visibility: visible;
  opacity: 0.5;
}

/* スマホメニュー */
.sp-menu {
  position: fixed;
  top: 32rem;
  right: 48rem;
  transform: translate(50%, -50%);
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #fff;
  transition: right 0.4s ease;
  z-index: 990;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  /* メニュー表示 */
}
.sp-menu.is-open {
  transition: all ease-in-out 0.3s;
  max-width: 1900rem;
  width: 1400rem;
  height: 1400rem;
  transform: translate(40%, -40%);
  opacity: 1;
  display: block;
}
@media screen and (max-width: 768px) {
  .sp-menu.is-open {
    width: 700rem;
    height: 700rem;
  }
}
.sp-menu-logo {
  width: 300rem;
  position: absolute;
  top: 41%;
  left: 20%;
}
@media screen and (max-width: 768px) {
  .sp-menu-logo {
    width: 170rem;
    top: 40%;
    left: 26%;
  }
}
.sp-menu {
  /* メニュー一覧 */
}
.sp-menu__list {
  list-style: none;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 15%;
}
@media screen and (max-width: 768px) {
  .sp-menu__list {
    top: 45%;
    left: 18%;
  }
}
.sp-menu__list .footer__nav {
  gap: 0;
}
@media screen and (max-width: 768px) {
  .sp-menu__list .footer__nav {
    scale: 0.8;
  }
}
.sp-menu__list .footer__nav .footer__sns a {
  color: #fff;
}
.sp-menu__list .footer__nav .footer__sns a::before {
  display: none;
}
.sp-menu__list .footer__nav .footer__sns a:hover {
  color: #1ec3f2;
}
.sp-menu-img {
  position: absolute;
  width: 400rem;
  bottom: 5%;
  left: 30%;
}
@media screen and (max-width: 768px) {
  .sp-menu-img {
    width: 200rem;
  }
}

.footer {
  width: 100vw;
  padding: 100rem 0 40rem;
  background: #fff;
}
.footer__inner {
  width: min(1920rem, 90%);
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50rem;
}
@media screen and (max-width: 768px) {
  .footer__inner {
    width: unset;
    flex-direction: column-reverse;
    width: 100%;
    padding-inline: 40rem;
  }
}
.footer__company {
  width: 415rem;
}
@media screen and (max-width: 768px) {
  .footer__company {
    width: 290rem;
  }
}
.footer__logo {
  display: block;
  margin-bottom: 40rem;
}
@media screen and (max-width: 768px) {
  .footer__logo {
    margin-bottom: 10rem;
  }
}
.footer__logo img {
  width: 400rem;
  height: auto;
}
@media screen and (max-width: 768px) {
  .footer__logo img {
    width: 290rem;
  }
}
.footer__name {
  color: #1ec3f2;
  font-size: 24rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .footer__name {
    font-size: 18rem;
  }
}
.footer__address {
  font-size: 20rem;
  font-weight: bold;
  color: #1ec3f2;
  line-height: 1;
  margin-bottom: 30rem;
}
@media screen and (max-width: 768px) {
  .footer__address {
    font-size: 12rem;
    margin-bottom: 15rem;
  }
}
.footer__tel {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  text-decoration: none;
  color: #fff;
  background: #1ec3f2;
  border: 2px solid #1ec3f2;
  border-radius: 18rem;
  padding: 20rem 28rem;
  margin-bottom: 30rem;
  transition: all ease-in-out 0.2s;
}
.footer__tel:hover {
  background-color: #fff;
  color: #1ec3f2;
}
.footer__tel:hover .white {
  display: none;
}
.footer__tel:hover .blue {
  display: block;
}
@media screen and (max-width: 768px) {
  .footer__tel {
    padding: 10rem 34rem;
    align-items: flex-start;
    margin-bottom: 20rem;
  }
}
.footer__tel div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}
.footer__tel-icon {
  width: 35rem;
}
@media screen and (max-width: 768px) {
  .footer__tel-icon {
    width: 25rem;
  }
}
.footer__tel-icon .white {
  display: block;
}
.footer__tel-icon .blue {
  display: none;
}
.footer__tel strong {
  display: block;
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif;
  font-size: 36rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .footer__tel strong {
    font-size: 22rem;
  }
}
.footer__tel small {
  display: block;
  font-size: 13rem;
}
@media screen and (max-width: 768px) {
  .footer__tel small {
    font-size: 8rem;
  }
}
.footer__sns {
  display: flex;
  gap: 16rem;
}
.footer__sns a {
  width: 68rem;
  height: 68rem;
  border: 2px solid #1ec3f2;
  border-radius: 50%;
  background-color: #1ec3f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rem;
  font-weight: bold;
  color: #fff;
  transition: all ease-in-out 0.2s;
}
@media screen and (max-width: 768px) {
  .footer__sns a {
    width: 35rem;
    height: 35rem;
    font-size: 10rem;
  }
}
.footer__sns a:hover {
  background-color: #fff;
  color: #1ec3f2;
}
.footer__sns a:hover .white {
  display: none;
}
.footer__sns a:hover .blue {
  display: block;
}
.footer__sns a img {
  width: 60%;
}
.footer__sns a img.white {
  display: block;
}
.footer__sns a img.blue {
  display: none;
}
.footer__nav__group {
  display: flex;
  -moz-column-gap: 50rem;
       column-gap: 50rem;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .footer__nav__group {
    display: grid;
    grid-template-columns: 45% 1fr;
    -moz-column-gap: 14rem;
         column-gap: 14rem;
    align-items: start;
  }
}
.footer__nav {
  flex: 0 0 auto;
}
.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 28rem;
}
@media screen and (max-width: 768px) {
  .footer__nav ul {
    gap: 15rem;
  }
}
.footer__nav li {
  list-style: none;
}
.footer__nav a {
  display: flex;
  align-items: center;
  gap: 16rem;
  color: #222;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
  font-size: 18rem;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .footer__nav a {
    font-size: 12rem;
    gap: 10rem;
    white-space: normal;
  }
}
.footer__nav a::before {
  content: ">>";
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  font-size: 12rem;
  line-height: 1;
  color: #fff;
  background-color: #1ec3f2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .footer__nav a::before {
    width: 18rem;
    height: 18rem;
    font-size: 10rem;
  }
}
.footer__nav a:hover {
  color: #53b7e9;
  transform: translateX(6rem);
}
.footer__nav--biz li:not(:first-child) a::before {
  color: #1ec3f2;
  background-color: transparent;
}
.footer__nav--biz li:first-child a::before {
  content: none;
}
.footer__copyright {
  width: min(1920rem, 90%);
  margin: 30rem auto 0;
  text-align: right;
  color: #53b7e9;
  font-size: 14rem;
}
@media screen and (max-width: 768px) {
  .footer__copyright {
    font-size: 12rem;
    font-weight: 500;
    margin-top: 50rem;
  }
}

@keyframes cloudMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes boatMove {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fishMove {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  5% {
    opacity: 100%;
    transform: translateY(-15%);
  }
  70% {
    opacity: 100%;
    transform: translateY(-15%);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes personMove {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-5%);
  }
  10% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes runMove {
  0% {
    transform: rotateY(0);
  }
  10% {
    transform: rotateY(180deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  60% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes horiMove {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes upMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-20%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes downMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(10%) translateY(10%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes downMove1 {
  0% {
    transform: translateX(0) translateY(0) rotateY(180deg);
  }
  50% {
    transform: translateX(10%) translateY(10%) rotateY(180deg);
  }
  100% {
    transform: translateX(0) translateY(0) rotateY(180deg);
  }
}
@keyframes truckMove {
  0% {
    left: 54%;
    top: 45%;
    transform: rotateY(360deg);
    z-index: 5;
  }
  100% {
    left: -11%;
    top: 70%;
    transform: rotateY(360deg);
  }
}
@keyframes msg_truckMove {
  0% {
    z-index: 5;
    left: 61%;
    top: 60%;
  }
  50% {
    left: 30%;
    top: 67%;
    z-index: 3;
  }
  100% {
    left: -13%;
    top: 75%;
  }
}
@keyframes msg_truckMove_PC {
  0% {
    z-index: 5;
    left: 61%;
    top: 54%;
  }
  50% {
    left: 30%;
    top: 61%;
    z-index: 3;
  }
  100% {
    left: -13%;
    top: 69%;
  }
}
@keyframes msg_truckMove_SP {
  0% {
    z-index: 5;
    left: 60%;
    top: 62%;
  }
  100% {
    left: -21%;
    top: 80%;
  }
}
@keyframes footerTruck {
  0% {
    left: 32%;
    bottom: 31%;
  }
  50% {
    left: 14%;
    bottom: 21%;
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(9deg);
    left: -12%;
    bottom: 15%;
  }
}
@keyframes turnMove {
  0% {
    transform: translateX(-50%) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateZ(-360deg);
  }
}
@keyframes flow_gallery_PC {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-2800rem);
  }
}
@keyframes flow_gallery_SP {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1050rem);
  }
}
#sticky_truck {
  position: fixed;
  bottom: 100rem;
  left: 100rem;
  z-index: 9999;
  transition: transform 0.4s ease;
}
@media screen and (max-width: 768px) {
  #sticky_truck {
    display: none;
  }
}
#sticky_truck img {
  width: 200rem;
  display: block;
}
#sticky_truck.hide img {
  display: none;
  transition: all ease 0.2s;
}
#sticky_truck.left img {
  transform: scaleX(1);
  transition: all ease 0.2s;
}
#sticky_truck.right img {
  transform: scaleX(-1);
  transition: all ease 0.2s;
}

.sec-map__inner .truck-1.is-following {
  position: fixed;
  left: 100rem;
  bottom: 100rem;
  top: auto;
  z-index: 799;
}
.sec-map__inner .truck-1.is-parked {
  position: absolute;
  bottom: auto;
  z-index: 799;
}
.sec-map__inner .truck-1.is-following, .sec-map__inner .truck-1.is-parked {
  cursor: pointer;
  pointer-events: auto;
}
.sec-map__inner .truck-1.left {
  transform: scaleX(1);
}
.sec-map__inner .truck-1.right {
  transform: scaleX(-1);
}
.sec-map__inner .truck-1.hide {
  visibility: hidden;
}

.sec-hero {
  width: 100vw;
  height: 100vh;
}
.sec-hero_background {
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .sec-hero_background {
    height: 80%;
  }
}
.sec-hero_background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  transform: scale(1.05);
}
@media screen and (max-width: 768px) {
  .sec-hero_background img {
    transform: scale(1.5) translate(9%, 10px);
  }
}

.sec-map {
  width: 100vw;
}
.sec-map_mountain {
  transform: scale(1.15);
  width: 100vw;
  height: 150rem;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1500px) {
  .sec-map_mountain {
    height: 100rem;
  }
}
.sec-map_mountain__content {
  position: absolute;
  top: -30rem;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  font-size: 44rem;
  font-weight: bold;
  line-height: 1.5em;
  color: white;
  text-shadow: -1rem -1rem 0 #333, 1rem -1rem 0 #333, -1rem 1rem 0 #333, 1rem 1rem 0 #333;
}
@media screen and (max-width: 1500px) {
  .sec-map_mountain__content {
    font-size: 38rem;
    top: -20rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map_mountain__content {
    font-size: 25rem;
    top: 50rem;
    text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
  }
}
.sec-map_mountain img {
  position: absolute;
  visibility: unset !important;
}
.sec-map_mountain .mount {
  visibility: unset !important;
  position: absolute;
  z-index: 1;
  bottom: -190rem;
  width: 100vw;
  height: auto;
}
@media screen and (max-width: 1500px) {
  .sec-map_mountain .mount {
    bottom: -150rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .mount {
    bottom: -50rem;
    max-width: none;
    width: 700rem;
  }
}
.sec-map_mountain .cloud {
  position: absolute;
  z-index: 3;
}
.sec-map_mountain .cloud--1 {
  top: -175rem;
  left: 250rem;
  width: 180rem;
}
@media screen and (max-width: 1500px) {
  .sec-map_mountain .cloud--1 {
    width: 160rem;
    top: -217rem;
    left: 232rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .cloud--1 {
    width: 65rem;
    top: -82rem;
    left: -4rem;
  }
}
.sec-map_mountain .cloud--1 {
  animation: cloudMove 5s ease-in-out infinite;
}
.sec-map_mountain .cloud--2 {
  top: 0rem;
  left: 300rem;
  width: 170rem;
}
@media screen and (max-width: 1500px) {
  .sec-map_mountain .cloud--2 {
    top: -92rem;
    width: 155rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .cloud--2 {
    top: -48rem;
    left: 42rem;
    width: 65rem;
  }
}
.sec-map_mountain .cloud--2 {
  animation: cloudMove 4s ease-in-out infinite;
}
.sec-map_mountain .cloud--3 {
  top: -42rem;
  right: 10rem;
  width: 150rem;
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .cloud--3 {
    width: 65rem;
  }
}
.sec-map_mountain .cloud--3 {
  animation: cloudMove 6s ease-in-out infinite;
}
.sec-map_mountain .cloud--4 {
  top: -113rem;
  right: 21rem;
  width: 130rem;
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .cloud--4 {
    width: 65rem;
  }
}
.sec-map_mountain .cloud--4 {
  animation: cloudMove 5s ease-in-out infinite;
}
.sec-map_mountain .bird {
  position: absolute;
  z-index: 4;
  width: 150rem;
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .bird {
    width: 65rem;
  }
}
.sec-map_mountain .bird--1 {
  left: 432rem;
  top: -175rem;
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .bird--1 {
    top: -122rem;
    left: 50rem;
  }
}
.sec-map_mountain .bird--1 {
  animation: cloudMove 4.5s ease-in-out infinite;
}
.sec-map_mountain .bird--2 {
  top: -80rem;
  right: 450rem;
}
@media screen and (max-width: 1500px) {
  .sec-map_mountain .bird--2 {
    top: -100rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .bird--2 {
    top: -89rem;
    right: 60rem;
  }
}
.sec-map_mountain .bird--2 {
  animation: cloudMove 5.5s ease-in-out infinite;
}
.sec-map_mountain .tree {
  position: absolute;
  z-index: 1;
  width: 30rem;
  display: none;
}
@media screen and (max-width: 768px) {
  .sec-map_mountain .tree {
    display: block;
  }
}
.sec-map_mountain .tree--1 {
  left: 60rem;
  bottom: 20rem;
}
.sec-map_mountain .tree--2 {
  left: 90rem;
  bottom: 25rem;
}
.sec-map_mountain .tree--3 {
  left: 120rem;
  bottom: 22rem;
}
.sec-map_mountain .tree--4 {
  bottom: 10rem;
  right: 100rem;
}
.sec-map_mountain .tree--5 {
  bottom: 0rem;
  right: 120rem;
}
.sec-map__inner {
  width: 100%;
  height: 74vw;
  overflow-x: clip;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec-map__inner {
    width: 735rem;
    height: 530rem;
    left: -160rem;
    top: -20rem;
  }
}
.sec-map__inner .mount.mount--1 {
  display: none;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .mount.mount--1 {
    width: 150vw;
    position: relative;
    z-index: 2;
  }
}
.sec-map__inner img {
  visibility: unset !important;
}
.sec-map__inner .obj {
  position: absolute;
  max-width: none;
  height: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.sec-map__inner .person01 {
  left: 2.5%;
  top: 1.3%;
  width: 18%;
  z-index: 5;
}
.sec-map__inner .person02 {
  left: 21.8%;
  top: 4%;
  width: 10.5%;
  z-index: 5;
  animation: horiMove 5s ease-in-out infinite;
}
.sec-map__inner .person03 {
  left: 26.5%;
  top: 6%;
  width: 11%;
  z-index: 5;
  animation: horiMove 5s ease-in-out infinite;
}
.sec-map__inner .person04 {
  left: 1%;
  top: 22%;
  width: 7%;
  z-index: 5;
}
.sec-map__inner .tree {
  position: absolute;
  z-index: 3;
  width: 80rem;
}
@media screen and (max-width: 1500px) {
  .sec-map__inner .tree {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map__inner .tree {
    width: 30rem;
  }
}
.sec-map__inner .tree--1 {
  left: 1%;
  top: 8.2%;
}
.sec-map__inner .tree--2 {
  left: -50rem;
  top: 8%;
}
.sec-map__inner .tree--3 {
  left: 13%;
  top: 5.6%;
}
.sec-map__inner .tree--4 {
  top: 7%;
  left: 16.3%;
}
.sec-map__inner .tree--5 {
  top: 10%;
  left: 20%;
  z-index: 5;
}
.sec-map__inner .tree--6 {
  top: 11%;
  left: 23%;
  z-index: 5;
}
.sec-map__inner .tree--7 {
  top: 11%;
  left: 0%;
  width: 8%;
  z-index: 5;
}
.sec-map__inner .tree--8 {
  top: 10%;
  left: 35%;
  z-index: 3;
}
.sec-map__inner .tree--9 {
  top: 6%;
  left: 37.5%;
  width: 7%;
  z-index: 3;
}
.sec-map__inner .tree--10 {
  top: -2%;
  left: 28%;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .tree--10 {
    display: none;
  }
}
.sec-map__inner .tree--11 {
  top: -3%;
  left: 32%;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .tree--11 {
    display: none;
  }
}
.sec-map__inner .tree--12 {
  top: -1.5%;
  left: 36%;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .tree--12 {
    display: none;
  }
}
.sec-map__inner .field01 {
  left: 9.5%;
  top: 22%;
  width: 13%;
  z-index: 5;
}
.sec-map__inner .field02 {
  left: 22%;
  top: 14%;
  width: 15%;
  z-index: 5;
}
.sec-map__inner .book {
  width: 18%;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .book {
    width: 17%;
  }
}
.sec-map__inner .book-1 {
  left: 7.5%;
  top: 24%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .book-1 {
    left: 19.5%;
    top: 28%;
    z-index: 6;
  }
}
.sec-map__inner .book-2 {
  left: 24.5%;
  top: 20%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .book-2 {
    left: 33.5%;
    top: 24%;
  }
}
.sec-map__inner .treeB {
  width: 80rem;
  z-index: 5;
}
@media screen and (max-width: 1500px) {
  .sec-map__inner .treeB {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeB {
    width: 30rem;
  }
}
.sec-map__inner .treeB--1 {
  left: 6%;
  top: 36%;
}
.sec-map__inner .treeB--2 {
  left: 9.5%;
  top: 39%;
}
.sec-map__inner .treeB--3 {
  left: 22.5%;
  top: 34%;
  width: 7%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeB--3 {
    left: 31.5%;
    top: 44%;
    z-index: 6;
    z-index: 6;
  }
}
.sec-map__inner .treeB--4 {
  left: 25.5%;
  top: 36%;
  width: 7%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeB--4 {
    left: 35.5%;
    top: 48%;
    width: 7%;
    z-index: 6;
  }
}
.sec-map__inner .figure {
  position: absolute;
  width: 8%;
  z-index: 10;
  transition: all ease-in-out 1s;
}
.sec-map__inner .figure:hover .fir {
  opacity: 0;
  transition: all ease-in-out 1s;
}
.sec-map__inner .figure:hover .sec {
  transform: rotateY(-180deg);
  transition: all ease-in-out 1s;
  opacity: 1;
}
.sec-map__inner .figure:hover .alarm-text {
  color: #4db8e9;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .figure {
    width: 10%;
  }
  .sec-map__inner .figure:nth-of-type(3) .fir,
  .sec-map__inner .figure:nth-of-type(3) .sec {
    transform: rotate(30deg);
  }
  .sec-map__inner .figure:nth-of-type(3):hover .fir {
    opacity: 0;
    transition: all ease-in-out 1s;
  }
  .sec-map__inner .figure:nth-of-type(3):hover .sec {
    transform: rotateZ(30deg) rotateY(-180deg);
    transition: all ease-in-out 1s;
    opacity: 1;
  }
  .sec-map__inner .figure:nth-of-type(3):hover .alarm-text {
    color: #4db8e9;
  }
}
.sec-map__inner .figure .fir {
  opacity: 1;
  transition: all ease-in-out 1s;
}
.sec-map__inner .figure .sec {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all ease-in-out 1s;
}
.sec-map__inner .figure .alarm-text {
  font-size: 22rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.05em;
  width: -moz-max-content;
  width: max-content;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1500px) {
  .sec-map__inner .figure .alarm-text {
    font-size: 17rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map__inner .figure .alarm-text {
    font-size: 11rem;
  }
}
.sec-map__inner .figure .alarm-text span {
  font-size: 14rem;
  line-height: 2.1em;
}
@media screen and (max-width: 1500px) {
  .sec-map__inner .figure .alarm-text span {
    font-size: 11rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map__inner .figure .alarm-text span {
    font-size: 8rem;
  }
}
.sec-map__inner .figure.gomito {
  top: 16%;
  left: 13%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .figure.gomito {
    top: 17%;
    left: 23%;
  }
}
.sec-map__inner .figure.nishi {
  top: 12%;
  left: 30%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .figure.nishi {
    top: 13%;
    left: 37%;
  }
}
.sec-map__inner .figure.comp {
  top: 6%;
  left: 45%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .figure.comp {
    top: 5%;
    left: 52%;
  }
}
.sec-map__inner .building {
  width: 11%;
  z-index: 5;
  transform: rotateY(180deg);
}
.sec-map__inner .building-1 {
  left: 6.5%;
  top: 40%;
  width: 13%;
}
.sec-map__inner .building-2 {
  left: -1.5%;
  top: 39%;
}
.sec-map__inner .building-3 {
  left: -2.5%;
  top: 45%;
}
.sec-map__inner .building-4 {
  left: 16%;
  top: 38%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .building-4 {
    left: 16%;
    top: 48%;
  }
}
.sec-map__inner .building-5 {
  left: 22%;
  top: 41%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .building-5 {
    left: 22%;
    top: 51%;
  }
}
.sec-map__inner .building-6 {
  left: 14.5%;
  top: 45%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .building-6 {
    left: 14.5%;
    top: 55%;
  }
}
.sec-map__inner .building-7 {
  transform: rotate(0);
  left: 28.5%;
  top: 31%;
  width: 33%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .building-7 {
    transform: rotate(0) scale(0.8);
    left: 30.5%;
    top: 33%;
  }
}
.sec-map__inner .box {
  width: 4%;
  z-index: 5;
}
.sec-map__inner .box-1 {
  left: 10%;
  top: 52%;
}
.sec-map__inner .box-2 {
  left: 7.5%;
  top: 52.8%;
}
.sec-map__inner .box-3 {
  left: 28%;
  top: 52%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .box-3 {
    top: 58%;
  }
}
.sec-map__inner .box-4 {
  left: 25.5%;
  top: 52.8%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .box-4 {
    top: 58.8%;
  }
}
.sec-map__inner .personB {
  width: 7%;
  z-index: 5;
}
.sec-map__inner .personB-1 {
  left: 52%;
  top: 31%;
  z-index: 6;
  animation: personMove 5s ease-in-out infinite;
}
.sec-map__inner .personB-2 {
  left: 45%;
  top: 36.4%;
}
.sec-map__inner .personB-3 {
  left: 30%;
  top: 43%;
  animation: downMove 5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .personB-3 {
    left: 36%;
    top: 52%;
    z-index: 6;
  }
}
.sec-map__inner .personB-4 {
  left: 21%;
  top: 50.4%;
  animation: personMove 3s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .personB-4 {
    top: 52%;
  }
}
.sec-map__inner .truck {
  width: 12%;
  z-index: 10;
}
.sec-map__inner .truck-1 {
  left: 5.3%;
  top: 65%;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .truck-1 {
    left: 25%;
    top: 57%;
  }
}
.sec-map__inner .truck-2 {
  left: 41%;
  top: 43.4%;
  z-index: 5;
}
.sec-map__inner .truck-3 {
  right: 16%;
  top: 63%;
  transform: rotateY(180deg);
  animation: downMove1 5s ease-in-out infinite;
}
.sec-map__inner .truck-4 {
  right: 10%;
  top: 31%;
}
.sec-map__inner .waterfall {
  right: 27%;
  top: 5%;
  width: 11%;
  z-index: 3;
}
.sec-map__inner .w-girl {
  right: 31.5%;
  top: 12%;
  width: 6%;
  z-index: 3;
}
.sec-map__inner .treeW {
  width: 80rem;
  z-index: 3;
}
@media screen and (max-width: 1500px) {
  .sec-map__inner .treeW {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeW {
    width: 30rem;
  }
}
.sec-map__inner .treeW--1 {
  right: 35.1%;
  top: -1%;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeW--1 {
    display: none;
  }
}
.sec-map__inner .treeW--2 {
  right: 39%;
  top: 0%;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeW--2 {
    display: none;
  }
}
.sec-map__inner .treeW--3 {
  right: 37.1%;
  top: 14%;
}
.sec-map__inner .treeW--4 {
  right: 32%;
  top: 16%;
}
.sec-map__inner .treeW--5 {
  right: 26%;
  top: 11%;
}
.sec-map__inner .company {
  left: 41%;
  top: 13%;
  width: 21%;
  z-index: 3;
}
.sec-map__inner .womanC {
  left: 48%;
  top: 23%;
  width: 5%;
  z-index: 3;
  animation: mainWave 5s ease-in-out infinite;
}
@keyframes mainWave {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(10%) translateY(-10%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
.sec-map__inner .stoneG {
  right: 11%;
  top: 14%;
  width: 18%;
  z-index: 3;
}
.sec-map__inner .generalW {
  right: 15%;
  top: 6%;
  width: 14%;
  z-index: 3;
}
.sec-map__inner .student {
  right: 14%;
  top: 9%;
  width: 7%;
  z-index: 3;
}
.sec-map__inner .treeG--1 {
  right: 7%;
  top: 8%;
}
.sec-map__inner .treeG--2 {
  right: 10%;
  top: 10%;
}
.sec-map__inner .stoneF {
  right: 8%;
  top: 24%;
  width: 18%;
  z-index: 3;
}
.sec-map__inner .farmer {
  right: 8%;
  top: 21%;
  width: 14.5%;
  z-index: 3;
}
.sec-map__inner .treeF {
  width: 80rem;
  z-index: 3;
}
@media screen and (max-width: 1500px) {
  .sec-map__inner .treeF {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-map__inner .treeF {
    width: 30rem;
  }
}
.sec-map__inner .treeF--1 {
  right: 27%;
  top: 23.5%;
}
.sec-map__inner .treeF--2 {
  right: 24%;
  top: 24.5%;
}
.sec-map__inner .treeF--3 {
  right: 21%;
  top: 25.5%;
}
.sec-map__inner .house {
  width: 11%;
  z-index: 3;
}
.sec-map__inner .houseF-1 {
  right: 22%;
  top: 17.5%;
}
.sec-map__inner .houseF-2 {
  right: 29.5%;
  top: 19%;
}
.sec-map__inner .houseF-3 {
  right: 30%;
  top: 24%;
}
.sec-map__inner .houseF-4 {
  right: 22%;
  top: 27%;
}
.sec-map__inner .houseF-5 {
  right: 31%;
  top: 28.5%;
}
.sec-map__inner .houseF-6 {
  right: 23%;
  top: 32%;
}
.sec-map__inner .boxF {
  width: 3.5%;
  z-index: 3;
  transform: rotateY(180deg);
}
.sec-map__inner .boxF-1 {
  right: 28%;
  top: 37.5%;
}
.sec-map__inner .boxF-2 {
  right: 30.5%;
  top: 38.5%;
}
.sec-map__inner .boxF-3 {
  right: 43.5%;
  top: 28%;
}
.sec-map__inner .boxF-4 {
  right: 41%;
  top: 29%;
}
.sec-map__inner .personF {
  width: 5%;
  right: 33%;
  top: 31%;
  z-index: 3;
  animation: mainWave 3.5s ease-in-out infinite;
}
@keyframes mainWave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(0);
  }
}
.sec-map__inner .greenhouse {
  width: 9%;
  z-index: 3;
}
.sec-map__inner .greenhouse-1 {
  right: -1%;
  top: 18%;
}
.sec-map__inner .greenhouse-2 {
  right: -2.5%;
  top: 20.5%;
}
.sec-map__inner .greenhouse-3 {
  right: 2%;
  top: 34%;
}
.sec-map__inner .greenhouse-4 {
  right: -2%;
  top: 35.3%;
}
.sec-map__inner .treeS {
  width: 7%;
  z-index: 5;
}
.sec-map__inner .treeS--1 {
  right: 8%;
  top: 38%;
}
.sec-map__inner .treeS--2 {
  right: 12%;
  top: 39%;
}
.sec-map__inner .treeS--3 {
  right: 23%;
  top: 39.5%;
}
.sec-map__inner .treeS--4 {
  right: 27%;
  top: 41.2%;
}
.sec-map__inner .treeS--5 {
  right: 31%;
  top: 42.2%;
}
.sec-map__inner .treeS--6 {
  right: 34%;
  top: 45%;
}
.sec-map__inner .shop {
  right: -5%;
  top: 43%;
  width: 31%;
  z-index: 5;
}
.sec-map__inner .shop_man {
  right: 5%;
  top: 45%;
  width: 14%;
  z-index: 5;
}
.sec-map__inner .houseS-1 {
  transform: rotateY(180deg);
  right: 22%;
  top: 45.5%;
  z-index: 5;
}
.sec-map__inner .houseS-2 {
  transform: rotateY(180deg);
  right: 29%;
  top: 48%;
  z-index: 5;
}
.sec-map__inner .dog {
  width: 4.5%;
  z-index: 5;
  right: 24.5%;
  top: 53%;
}
.sec-map__inner .personS {
  width: 5.5%;
  z-index: 5;
}
.sec-map__inner .personS-1 {
  width: 7%;
  right: 5%;
  top: 60%;
  animation: horiMove 5s ease-in-out infinite;
}
.sec-map__inner .personS-2 {
  right: 18%;
  top: 52%;
  animation: downMove 6s ease-in-out infinite;
}
.sec-map__inner .personS-3 {
  right: 27.5%;
  top: 52%;
}
.sec-map__inner .boxS {
  width: 4%;
  z-index: 5;
  transform: rotateY(180deg);
}
.sec-map__inner .boxS-1 {
  right: 33.5%;
  top: 56%;
}
.sec-map__inner .boxS-2 {
  right: 31%;
  top: 58%;
}
.sec-map__inner .boat {
  left: 45%;
  top: 60%;
  width: 18%;
  z-index: 5;
  animation: boatMove 5s ease-in-out infinite;
}
.sec-map__inner .dolphin {
  width: 9%;
  z-index: 5;
}
.sec-map__inner .dolphin-1 {
  left: 34%;
  top: 67%;
  animation: fishMove 6s ease-in-out infinite;
}
.sec-map__inner .dolphin-2 {
  left: 26%;
  top: 70%;
  animation: fishMove 10s ease-in-out infinite;
}
.sec-map__inner .dolphin-3 {
  left: 15%;
  top: 74%;
  animation: fishMove 8s ease-in-out infinite;
}
.sec-map__inner .shrimp {
  z-index: 5;
}
.sec-map__inner .shrimp-1 {
  width: 8%;
  right: 23%;
  top: 69%;
  animation: downMove 5s ease-in-out infinite;
}
.sec-map__inner .shrimp-2 {
  width: 6%;
  right: 30%;
  top: 70%;
  animation: downMove 4s ease-in-out infinite;
}

.sec-message {
  position: relative;
  isolation: isolate;
  padding-top: calc(46.875vw - 325rem);
}
@media screen and (max-width: 768px) {
  .sec-message {
    padding-top: calc(52.0833333333vw - 155rem);
    padding-bottom: 370rem;
    background: #fbf9f4;
  }
}
.sec-message .movie {
  position: absolute;
  top: -245rem;
  z-index: 0;
  width: 100vw;
  height: 46.875vw;
}
@media screen and (max-width: 768px) {
  .sec-message .movie {
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .sec-message .movie {
    top: -100rem;
  }
}
.sec-message .movie__wave {
  position: absolute;
  top: -1rem;
  left: 0;
  width: 100%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .sec-message .movie__wave {
    transform: scale(2);
  }
}
.sec-message .movie__video {
  width: 100%;
  aspect-ratio: 1920/900;
  background-color: #868383;
}
.sec-message .movie__video video,
.sec-message .movie__video img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  display: block;
}
.sec-message__inner {
  position: relative;
  background: #fbf9f4;
  padding: 170rem 0 0 300rem;
  border-radius: 80rem 80rem 0 0;
  width: 100vw;
  margin: auto;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .sec-message__inner {
    padding: 65rem 0 0 40rem;
    border-radius: 30rem 30rem 0 0;
  }
}
.sec-message__inner__heading {
  display: flex;
  align-items: flex-start;
  gap: 24rem;
  margin-bottom: 70rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__heading {
    margin-bottom: 0rem;
  }
}
.sec-message__inner__heading img {
  position: absolute;
}
.sec-message__inner__heading .message__cloud {
  width: 230rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__heading .message__cloud {
    display: none;
  }
}
.sec-message__inner__heading .message__cloud-1 {
  left: 190rem;
  top: 26rem;
  animation: cloudMove 5s ease-in-out infinite;
}
.sec-message__inner__heading .message__cloud-2 {
  left: 438rem;
  top: -57rem;
  animation: cloudMove 4s ease-in-out infinite;
}
.sec-message__inner__heading .message__cloud-3 {
  right: 430rem;
  top: 60rem;
  animation: cloudMove 6s ease-in-out infinite;
}
.sec-message__inner__heading .message__cloud-4 {
  right: 130rem;
  top: -47rem;
  animation: cloudMove 4.5s ease-in-out infinite;
}
.sec-message__inner__heading .message__person {
  width: 150rem;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__heading .message__person {
    width: 60rem;
  }
}
.sec-message__inner__heading .message__person-1 {
  right: 211rem;
  top: 120rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__heading .message__person-1 {
    right: 120rem;
    top: -40rem;
  }
}
.sec-message__inner__heading .message__person-1 {
  animation: runMove 2.5s ease-in-out infinite;
}
.sec-message__inner__heading .message__person-2 {
  right: 87rem;
  top: 120rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__heading .message__person-2 {
    right: 70rem;
    top: -40rem;
  }
}
.sec-message__inner__heading .message__person-2 {
  animation: runMove 2.5s ease-in-out infinite;
}
.sec-message__inner__title span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 10rem;
  padding: 0.05em 0.4em;
  background: #52b7e9;
  color: #fff;
  font-size: 56rem;
  line-height: 1.4em;
  letter-spacing: 0.05em;
  font-weight: 700;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  border: 1px solid #333;
}
@media screen and (max-width: 1500px) {
  .sec-message__inner__title span {
    font-size: 42rem;
  }
}
.sec-message__inner__body {
  display: grid;
  grid-template-columns: 680rem 1fr;
  -moz-column-gap: 50rem;
       column-gap: 50rem;
  align-items: start;
}
@media screen and (max-width: 1500px) {
  .sec-message__inner__body {
    grid-template-columns: 510rem 1fr;
  }
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body {
    display: flex;
    flex-direction: column;
    gap: 85rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__text h2 {
    margin-bottom: 30rem;
  }
}
.sec-message__inner__body__text h2 span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 10rem;
  padding: 0.05em 0.4em;
  background: #52b7e9;
  color: #fff;
  font-size: 56rem;
  line-height: 1.4em;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__text h2 span {
    font-size: 26rem;
  }
}
.sec-message__inner__body__text p {
  margin-bottom: 2em;
  line-height: 2.2;
  font-size: 24rem;
}
@media screen and (max-width: 1500px) {
  .sec-message__inner__body__text p {
    font-size: 20rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__text p {
    font-size: 12rem;
  }
}
.sec-message__inner__body__gallery {
  display: flex;
  flex-direction: column;
}
.sec-message__inner__body__photo {
  width: 100%;
  position: relative;
}
.sec-message__inner__body__photo img {
  display: block;
  width: 100%;
}
.sec-message__inner__body__photo .main {
  width: 100%;
  aspect-ratio: 2/1.2;
  border-radius: 20rem;
}
.sec-message__inner__body__photo .obj {
  position: absolute;
}
.sec-message__inner__body__photo.photo01 {
  transform: translateY(-200rem);
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__photo.photo01 {
    transform: translateY(0);
  }
}
.sec-message__inner__body__photo.photo01 .tree {
  width: 160rem;
  bottom: -65rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__photo.photo01 .tree {
    width: 80rem;
    bottom: -55rem;
  }
}
.sec-message__inner__body__photo.photo01 .tree--1 {
  right: 65rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__photo.photo01 .tree--1 {
    right: 85rem;
  }
}
.sec-message__inner__body__photo.photo01 .tree--2 {
  right: 188rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__photo.photo01 .tree--2 {
    right: 45rem;
  }
}
.sec-message__inner__body__photo.photo01 .tree--3 {
  right: 310rem;
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__photo.photo01 .tree--3 {
    right: 5rem;
  }
}
.sec-message__inner__body__photo.photo02 .tree {
  width: 100rem;
  bottom: -65rem;
}
@media screen and (max-width: 1500px) {
  .sec-message__inner__body__photo.photo02 .tree {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-message__inner__body__photo.photo02 .tree {
    width: 50rem;
    bottom: -30rem;
  }
}
.sec-message__inner__body__photo.photo02 .tree--1 {
  left: -50rem;
}
@media screen and (max-width: 1500px) {
  .sec-message__inner__body__photo.photo02 .tree--1 {
    left: -30rem;
  }
}
.sec-message__inner__body__photo.photo02 .tree--2 {
  left: 40rem;
}
.sec-message_road {
  position: relative;
  background: #fbf9f4;
  width: 100vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .sec-message_road {
    height: 78vw;
  }
}
.sec-message_road .obj {
  position: absolute;
}
.sec-message_road .message__road {
  width: 100vw;
  transform: scale(1.17) translateY(-200rem);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec-message_road .message__road {
    transform: scale(1.57) translate(-15rem, -10rem);
  }
}
.sec-message_road .msg__person {
  width: 140rem;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec-message_road .msg__person {
    width: 60rem;
  }
}
.sec-message_road .msg__person-1 {
  right: 11%;
  top: 18%;
}
@media screen and (max-width: 1500px) {
  .sec-message_road .msg__person-1 {
    top: 10%;
  }
}
.sec-message_road .msg__person-1 {
  animation: upMove 5s ease-in-out infinite;
}
.sec-message_road .msg__person-2 {
  left: 26%;
  top: 45%;
  animation: downMove 5s ease-in-out infinite;
}
.sec-message_road .msg__person-3 {
  left: 17%;
  top: 32%;
  animation: downMove 5s ease-in-out infinite;
}
.sec-message_road .message__truck {
  width: 15%;
  left: -11%;
  top: 69%;
  z-index: 3;
  animation: msg_truckMove 5s ease-in-out infinite;
}
@media screen and (max-width: 1500px) {
  .sec-message_road .message__truck {
    left: 61%;
    top: 54%;
    animation: msg_truckMove_PC 5s ease-in-out infinite;
  }
}
@media screen and (max-width: 768px) {
  .sec-message_road .message__truck {
    width: 27%;
    top: 70%;
    animation: msg_truckMove_SP 5s ease-in-out infinite;
  }
}
.sec-message_road .cloud {
  position: absolute;
  width: 200rem;
  z-index: 5;
}
.sec-message_road .cloud--1 {
  left: 300rem;
  bottom: 50rem;
  animation: cloudMove 4s ease-in-out infinite;
}
@media screen and (max-width: 1500px) {
  .sec-message_road .cloud--1 {
    bottom: 110rem;
  }
}
.sec-message_road .cloud--2 {
  left: 900rem;
  bottom: 150rem;
  animation: cloudMove 6s ease-in-out infinite;
}
.sec-message_road .photo01 {
  position: absolute;
  left: 300rem;
  top: -100rem;
  z-index: 15;
  width: 600rem;
  height: auto;
}
@media screen and (max-width: 1500px) {
  .sec-message_road .photo01 {
    width: 500rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-message_road .photo01 {
    width: 200rem;
    left: unset;
    right: 0rem;
    top: 130rem;
  }
}
.sec-message_road .photo01 .main {
  border-radius: 30rem;
}
@media screen and (max-width: 768px) {
  .sec-message_road .photo01 .main {
    border-radius: 7rem;
  }
}
.sec-message_road .photo02 {
  position: absolute;
  right: 130rem;
  bottom: 275rem;
  z-index: 5;
  width: 600rem;
  height: auto;
}
@media screen and (max-width: 1500px) {
  .sec-message_road .photo02 {
    width: 500rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-message_road .photo02 {
    width: 330rem;
    right: 0;
    bottom: -240rem;
  }
}
.sec-message_road .photo02 .main {
  border-radius: 30rem;
}
@media screen and (max-width: 768px) {
  .sec-message_road .photo02 .main {
    border-radius: 7rem;
  }
}
.sec-message_road .photo02 .tree {
  width: 90rem;
}
.sec-message_road .photo02 .tree--1 {
  right: 65rem;
  bottom: -65rem;
}
.sec-message_road .photo02 .tree--2 {
  right: 188rem;
  bottom: -65rem;
}

.sec-book {
  position: relative;
  width: 100vw;
  background: url("../img/top/back.webp") no-repeat;
  background-size: contain;
  transform: translateY(-110rem);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec-book {
    transform: translateY(-100rem);
    background-size: 400%;
    background-position-x: 57%;
  }
}
.sec-book .back {
  width: 100vw;
  height: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec-book .back {
    max-width: none;
    width: 400vw;
  }
}
.sec-book__inner .obj {
  position: absolute;
}
.sec-book__inner .waterfall {
  width: 11%;
  left: 12%;
  top: 17%;
  transform: rotateY(180deg);
}
@media screen and (max-width: 768px) {
  .sec-book__inner .waterfall {
    width: 32%;
    left: 4%;
    top: 7%;
  }
}
.sec-book__inner .tree {
  width: 80rem;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .tree {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .tree {
    width: 40rem;
  }
}
.sec-book__inner .treeW--1 {
  left: 10%;
  top: 25%;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeW--1 {
    left: -2%;
    top: 11%;
  }
}
.sec-book__inner .treeW--2 {
  left: 9.5%;
  top: 32%;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeW--2 {
    left: 0.5%;
    top: 16%;
  }
}
.sec-book__inner .treeW--3 {
  left: 15.5%;
  top: 34%;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeW--3 {
    top: 18%;
  }
}
.sec-book__inner .treeW--4 {
  left: 12.5%;
  top: 35.5%;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeW--4 {
    left: 7.5%;
    top: 18.5%;
  }
}
.sec-book__inner .book {
  width: 505rem;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .book {
    width: 300rem;
  }
}
.sec-book__inner .book-1 {
  top: 14%;
  left: 17%;
}
.sec-book__inner .book-1.show {
  display: block;
}
.sec-book__inner .book-1:hover.show {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .book-1 {
    top: 12%;
    left: 10%;
  }
}
.sec-book__inner .book-2 {
  top: 14%;
  left: 47.5%;
}
.sec-book__inner .book-2.show {
  display: block;
}
.sec-book__inner .book-2:hover.show {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .book-2 {
    top: 52%;
    left: 10%;
  }
}
.sec-book__inner .alarm {
  position: absolute;
  width: 350rem;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .alarm {
    width: 250rem;
  }
}
.sec-book__inner .alarm-1 {
  top: 0%;
  left: 22%;
  animation: boatMove 4.5s ease-in-out infinite;
}
.sec-book__inner .alarm-2 {
  top: 0%;
  left: 52%;
  animation: boatMove 4.5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .alarm-2 {
    top: 42%;
    left: 22%;
  }
}
.sec-book__inner .alarm .cloud_bg {
  width: 100%;
}
.sec-book__inner .alarm p {
  position: absolute;
  top: 70rem;
  left: 50%;
  transform: translateX(-50%);
  width: 200rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .alarm p {
    top: 47rem;
    font-size: 12rem;
  }
}
.sec-book__inner .alarm .circle_L {
  width: 28rem;
  height: 22rem;
  border-radius: 50%;
  border: 2rem solid #000;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20rem;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .alarm .circle_L {
    border-width: 1rem;
  }
}
.sec-book__inner .alarm .circle_S {
  width: 22rem;
  height: 18rem;
  border-radius: 50%;
  border: 2rem solid #000;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5rem;
}
@media screen and (max-width: 768px) {
  .sec-book__inner .alarm .circle_S {
    border-width: 1rem;
  }
}
.sec-book__inner .treeB--1 {
  left: 16%;
  top: 47%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .treeB--1 {
    top: 57%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeB--1 {
    top: 37%;
    left: 11%;
  }
}
.sec-book__inner .treeB--2 {
  left: 19.5%;
  top: 51%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .treeB--2 {
    top: 61%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeB--2 {
    top: 39%;
    left: 21%;
  }
}
.sec-book__inner .treeB--3 {
  left: 23.8%;
  top: 49%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .treeB--3 {
    top: 59%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeB--3 {
    top: 38%;
    left: 31%;
  }
}
.sec-book__inner .dog {
  width: 5%;
  left: 32%;
  top: 51%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .dog {
    top: 61%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .dog {
    width: 12%;
    top: 39%;
    left: 61%;
  }
}
.sec-book__inner .dog {
  animation: downMove 5s ease-in-out infinite;
}
.sec-book__inner .personS-1 {
  width: 6.5%;
  left: 39%;
  top: 44%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .personS-1 {
    top: 54%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .personS-1 {
    width: 14.5%;
    top: 34%;
    left: 79%;
  }
}
.sec-book__inner .personS-2 {
  width: 9.5%;
  left: 35%;
  top: 53%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .personS-2 {
    top: 63%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .personS-2 {
    width: 17.5%;
    top: 40%;
    left: 70%;
  }
}
.sec-book__inner .personS-2 {
  animation: downMove 5s ease-in-out infinite;
}
.sec-book__inner .personS-3 {
  width: 6.8%;
  left: 77.8%;
  top: 50%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .personS-3 {
    top: 60%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .personS-3 {
    width: 14.8%;
    top: 80%;
    left: 81.8%;
  }
}
.sec-book__inner .personS-3 {
  animation: personMove 4s ease-in-out infinite;
}
.sec-book__inner .treeG--1 {
  left: 75.8%;
  top: 29%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .treeG--1 {
    top: 39%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeG--1 {
    width: 50rem;
    top: 80%;
    left: 11.8%;
  }
}
.sec-book__inner .treeG--2 {
  left: 70.8%;
  top: 33%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .treeG--2 {
    top: 43%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .treeG--2 {
    width: 50rem;
    top: 80%;
    left: 24.8%;
  }
}
.sec-book__inner .treeG--3 {
  left: 80.3%;
  top: 34%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .treeG--3 {
    top: 44%;
  }
}
.sec-book__inner .truck-1 {
  width: 15.5%;
  left: 63.5%;
  top: 45%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .truck-1 {
    top: 55%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .truck-1 {
    width: 30.5%;
    top: 77%;
    left: 53.5%;
  }
}
.sec-book__inner .truck-2 {
  width: 15.5%;
  left: 62%;
  top: 51.5%;
}
@media screen and (max-width: 1500px) {
  .sec-book__inner .truck-2 {
    top: 61.5%;
  }
}
@media screen and (max-width: 768px) {
  .sec-book__inner .truck-2 {
    width: 30.5%;
    top: 81.5%;
    left: 46%;
  }
}

.sec-service {
  width: 100vw;
  height: auto;
  position: relative;
  isolation: isolate;
  padding-top: 600rem;
}
@media screen and (max-width: 1500px) {
  .sec-service {
    padding-top: 400rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-service {
    padding-top: 100rem;
  }
}
.sec-service .movie {
  width: 100%;
  height: 700rem;
  position: absolute;
  top: -300rem;
  left: 0;
  background-color: #333;
}
@media screen and (max-width: 768px) {
  .sec-service .movie {
    top: -105rem;
    height: 252rem;
  }
}
.sec-service__inner {
  position: relative;
  z-index: 1;
  border-radius: 50rem 50rem 0 0;
  background-color: #f9f8f3;
  padding-top: 100rem;
  padding-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .sec-service__inner {
    padding-top: 57rem;
    border-radius: 30rem 30rem 0 0;
  }
}
.sec-service__title {
  font-size: 70rem;
  font-weight: 700;
  color: #1ec5f4;
  text-align: center;
  paint-order: stroke fill;
  -webkit-text-stroke: 3rem #333;
}
@media screen and (max-width: 768px) {
  .sec-service__title {
    font-size: 33rem;
    margin-bottom: 22rem;
    -webkit-text-stroke: 1.5px #333;
  }
}
.sec-service__lead {
  font-size: 24rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec-service__lead {
    font-size: 14rem;
    font-weight: 500;
  }
}
.sec-service .swiper {
  padding: 60rem 0 90rem;
  margin-bottom: 200rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec-service .swiper {
    padding-bottom: 0;
  }
}
.sec-service .swiper-wrapper {
  display: flex;
}
.sec-service .swiper-slide {
  transition: 0.5s;
  transform: scale(0.82);
  opacity: 0.35;
  width: 460rem;
}
.sec-service .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}
.sec-service__inner {
  background-color: #f9f8f3;
}
.sec-service .service-card {
  width: 80%;
  margin: auto;
  overflow: hidden;
  border: 1rem solid #000;
  border-radius: 18rem;
  background: #52b7e9;
  transition: 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .sec-service .service-card {
    border-radius: 10rem;
  }
}
.sec-service .service-card h3 {
  width: 80%;
  padding: 18rem;
  color: #fff;
  font-size: 22rem;
  font-weight: bold;
  text-align: center;
  border-bottom: 1rem solid #fff;
}
@media screen and (max-width: 768px) {
  .sec-service .service-card h3 {
    font-size: 16rem;
  }
}
.sec-service .service-card figure {
  margin: 20rem 18rem;
  border-radius: 14rem;
  overflow: hidden;
  background: #ddd;
  width: 80%;
  aspect-ratio: 1;
}
.sec-service .service-card p {
  max-width: 80%;
  color: #fff;
  line-height: 1.35;
  min-height: 120rem;
  font-size: 18rem;
}
@media screen and (max-width: 768px) {
  .sec-service .service-card p {
    font-size: 12rem;
    min-height: 45rem;
  }
}
.sec-service .service-card a {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70rem;
  background: #fff;
  color: #000;
  font-size: 14rem;
  font-weight: bold;
  text-decoration: none;
  transition: all ease-in-out 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-service .service-card a {
    height: 40rem;
  }
}
.sec-service .service-card a:hover span {
  transform: translateX(100%);
  transition: all ease-in-out 0.3s;
}
.sec-service .swiper-slide-active a {
  display: flex;
}
.sec-service .swiper-slide-active a span {
  font-size: 8rem;
  margin-left: 5rem;
  transition: all ease-in-out 0.3s;
}
.sec-service .swiper-slide-active a:hover span {
  transform: translateX(10rem);
  transition: all ease-in-out 0.3s;
}
.sec-service .service-prev,
.sec-service .service-next {
  position: absolute;
  top: 45%;
  width: 76rem;
  height: 76rem;
  border-radius: 50%;
  background: #fff;
  border: 1rem solid #333;
  cursor: pointer;
  z-index: 20;
  font-weight: bold;
}
.sec-service .service-prev:hover,
.sec-service .service-next:hover {
  background-color: #4db8e9;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .sec-service .service-prev,
  .sec-service .service-next {
    width: 42rem;
    height: 42rem;
  }
}
.sec-service .service-prev {
  left: 32%;
}
@media screen and (max-width: 768px) {
  .sec-service .service-prev {
    left: 3%;
  }
}
.sec-service .service-next {
  right: 32%;
}
@media screen and (max-width: 768px) {
  .sec-service .service-next {
    right: 3%;
  }
}
.sec-service .cloud {
  position: absolute;
  width: 150rem;
}
@media screen and (max-width: 768px) {
  .sec-service .cloud {
    width: 50rem;
  }
}
.sec-service .cloud--1 {
  left: 20%;
  bottom: 19%;
  animation: cloudMove 5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-service .cloud--1 {
    left: -3%;
  }
}
.sec-service .cloud--2 {
  right: 37%;
  bottom: 12%;
  animation: cloudMove 6s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-service .cloud--2 {
    right: 25%;
    bottom: 16%;
  }
}
.sec-service .cloud--3 {
  right: 23%;
  bottom: 18%;
  animation: cloudMove 4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-service .cloud--3 {
    right: 3%;
  }
}
.sec-service .bird--1 {
  position: absolute;
  width: 150rem;
  left: 37%;
  bottom: 10%;
  animation: cloudMove 5.5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-service .bird--1 {
    width: 50rem;
    left: 20%;
    bottom: 14%;
  }
}

.sec-recruit {
  position: relative;
  padding: 180rem 0;
  background: #f9f8f3;
}
@media screen and (max-width: 768px) {
  .sec-recruit {
    padding-top: 0;
    padding-bottom: 50rem;
  }
}
.sec-recruit__bg-text {
  position: absolute;
  left: 50%;
  top: -140rem;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 1;
  width: 2800rem;
  animation: turnMove 45s linear infinite;
}
@media screen and (max-width: 768px) {
  .sec-recruit__bg-text {
    width: 1100rem;
  }
}
.sec-recruit__inner {
  position: relative;
  z-index: 5;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 50%;
  gap: 90rem;
  align-items: center;
  padding-inline: 200rem;
}
@media screen and (max-width: 768px) {
  .sec-recruit__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 40rem;
    gap: 40rem;
  }
}
.sec-recruit__image {
  border-radius: 18rem;
  overflow: hidden;
  height: 650rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .sec-recruit__image {
    height: 200rem;
    border-radius: 8rem;
  }
}
.sec-recruit__image img {
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 10%;
     object-position: 10%;
}
@media screen and (max-width: 768px) {
  .sec-recruit__content {
    display: flex;
    flex-direction: column;
  }
}
.sec-recruit__heading {
  font-size: 70rem;
  font-weight: 700;
  color: #4fb7ea;
  paint-order: stroke fill;
  -webkit-text-stroke: 3rem #333;
}
@media screen and (max-width: 768px) {
  .sec-recruit__heading {
    font-size: 30rem;
    -webkit-text-stroke: 1.5px #333;
  }
}
.sec-recruit__lead {
  font-size: 32rem;
  font-weight: 1000;
  line-height: 1.5;
  margin-bottom: 40rem;
}
@media screen and (max-width: 768px) {
  .sec-recruit__lead {
    font-size: 22rem;
  }
}
.sec-recruit__text {
  font-size: 22rem;
  line-height: 2.2;
  margin-bottom: 50rem;
}
@media screen and (max-width: 768px) {
  .sec-recruit__text {
    font-size: 12rem;
    margin-bottom: 0rem;
  }
}
.sec-recruit__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 300rem;
  height: 93rem;
  background: url("../img/top/read_more.webp") center/100% 100% no-repeat;
  text-decoration: none;
  font-size: 22rem;
  font-weight: 700;
  color: #222;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-recruit__btn {
    transform: scale(0.5);
    margin: 0 auto;
  }
}
.sec-recruit__btn span {
  transition: 0.3s;
}
.sec-recruit__btn:hover span {
  transform: translateX(8rem);
  transition: 0.3s;
}
.sec-recruit .tree {
  position: absolute;
  width: 80rem;
  z-index: 5;
}
@media screen and (max-width: 1500px) {
  .sec-recruit .tree {
    width: 70rem;
  }
}
.sec-recruit .tree--1 {
  right: 120rem;
  bottom: 100rem;
}
.sec-recruit .tree--2 {
  right: 200rem;
  bottom: 100rem;
}

.sec-blog {
  position: relative;
  padding: 140rem 0;
  padding-bottom: 500rem;
  background: #fff;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .sec-blog {
    padding-top: 75rem;
    padding-bottom: 0rem;
  }
}
.sec-blog .tree {
  position: absolute;
  width: 80rem;
  z-index: 5;
}
@media screen and (max-width: 1500px) {
  .sec-blog .tree {
    width: 70rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog .tree {
    width: 50rem;
  }
}
.sec-blog .tree--1 {
  left: 120rem;
  top: 0;
  transform: translateY(-50%);
}
.sec-blog .tree--2 {
  left: 200rem;
  top: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .sec-blog .tree--2 {
    left: unset;
    right: 60rem;
  }
}
.sec-blog .tree--3 {
  left: 280rem;
  top: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .sec-blog .tree--3 {
    left: unset;
    right: 10rem;
  }
}
.sec-blog__inner {
  width: min(1400rem, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 340rem 1fr;
  gap: 80rem;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .sec-blog__inner {
    width: 100vw;
    padding-inline: 37rem;
    display: flex;
    flex-direction: column;
    gap: 30rem;
  }
}
.sec-blog__content {
  top: 120rem;
}
@media screen and (max-width: 768px) {
  .sec-blog__content {
    position: unset;
  }
}
.sec-blog__title {
  margin-bottom: 40rem;
  font-size: 70rem;
  font-weight: 700;
  color: #53b7e8;
  paint-order: stroke fill;
  -webkit-text-stroke: 3rem #333;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec-blog__title {
    margin-bottom: 30rem;
    font-size: 30rem;
    -webkit-text-stroke: 1.5px #333;
  }
}
.sec-blog__lead {
  font-size: 20rem;
  margin-bottom: 50rem;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .sec-blog__lead {
    font-size: 14rem;
    margin-bottom: 0rem;
  }
}
.sec-blog__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 300rem;
  height: 93rem;
  background: url("../img/top/read_more.webp") center/100% 100% no-repeat;
  text-decoration: none;
  font-size: 22rem;
  font-weight: 700;
  color: #222;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-blog__button {
    transform: scale(0.5);
  }
}
.sec-blog__button span {
  transition: 0.3s;
}
.sec-blog__button:hover span {
  transform: translateX(8rem);
  transition: 0.3s;
}
.sec-blog__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rem;
}
@media screen and (max-width: 768px) {
  .sec-blog__list {
    display: flex;
    flex-direction: column;
    gap: 10rem;
  }
}
.sec-blog__list .blog-card {
  transition-delay: 0.3s;
}
.sec-blog__list .blog-card._fadeup {
  transform: translateY(100px);
}
.sec-blog__list .blog-card._show {
  transform: translate(0);
}
.sec-blog__list .blog-card a {
  text-decoration: none;
  color: inherit;
}
@media screen and (max-width: 768px) {
  .sec-blog__list .blog-card a {
    display: flex;
    gap: 15rem;
  }
}
.sec-blog__list .blog-card__image {
  overflow: hidden;
  border-radius: 20rem;
  margin-bottom: 18rem;
}
@media screen and (max-width: 768px) {
  .sec-blog__list .blog-card__image {
    width: 30%;
    margin-bottom: 0;
    border-radius: 10rem;
  }
}
.sec-blog__list .blog-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  transition: 0.5s;
}
.sec-blog__list .blog-card:hover img {
  transform: scale(1.08);
}
.sec-blog__list .blog-card .blog__info {
  padding-block: 5rem;
}
.sec-blog__list .blog-card__meta {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin-bottom: 12rem;
}
.sec-blog__list .blog-card__meta time {
  color: #52b7e9;
  font-size: 14rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec-blog__list .blog-card__meta time {
    font-size: 12rem;
  }
}
.sec-blog__list .blog-card__meta span {
  padding: 0rem 12rem;
  border: 1rem solid #555;
  border-radius: 999rem;
  font-size: 12rem;
}
@media screen and (max-width: 768px) {
  .sec-blog__list .blog-card__meta span {
    font-size: 9rem;
  }
}
.sec-blog__list .blog-card__title {
  font-size: 18rem;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .sec-blog__list .blog-card__title {
    font-size: 10rem;
  }
}

.sec-gallery {
  position: relative;
  background-color: #f9f8f3;
  height: 775rem;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec-gallery {
    height: 475rem;
    background-color: unset;
  }
}
.sec-gallery__group {
  animation: flow_gallery_PC 50s linear infinite;
}
@media screen and (max-width: 768px) {
  .sec-gallery__group {
    animation: flow_gallery_SP 50s linear infinite;
  }
}
.sec-gallery__inner {
  position: absolute;
  width: 1920rem;
  aspect-ratio: 1920/1050;
  top: -300rem;
  left: -100rem;
}
@media screen and (max-width: 768px) {
  .sec-gallery__inner {
    width: 750rem;
    top: 12.5rem;
  }
}
.sec-gallery__inner:nth-of-type(2) {
  left: 2700rem;
}
@media screen and (max-width: 768px) {
  .sec-gallery__inner:nth-of-type(2) {
    left: 1000rem;
  }
}
.sec-gallery__inner .obj {
  position: absolute;
  border-radius: 15rem;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  display: block;
  transition: 0.45s;
}
.sec-gallery__inner .obj:nth-of-type(1) {
  top: 5%;
  left: 0rem;
  width: 39%;
}
.sec-gallery__inner .obj:nth-of-type(2) {
  top: 0rem;
  left: 41.6%;
  width: 21%;
  height: 41%;
}
.sec-gallery__inner .obj:nth-of-type(3) {
  top: 2.5%;
  left: 65%;
  width: 29%;
}
.sec-gallery__inner .obj:nth-of-type(4) {
  top: 7.5%;
  left: 96.3%;
  width: 20%;
  height: 30%;
}
.sec-gallery__inner .obj:nth-of-type(5) {
  top: 2.5%;
  left: 118.8%;
  width: 24.4%;
}
.sec-gallery__inner .obj:nth-of-type(6) {
  top: 57.2%;
  left: 0%;
  width: 31.3%;
}
.sec-gallery__inner .obj:nth-of-type(7) {
  top: 57.2%;
  left: 34%;
  width: 13%;
  height: 28.5%;
}
.sec-gallery__inner .obj:nth-of-type(8) {
  bottom: 25rem;
  left: 49.5%;
  width: 39%;
  height: 54.7%;
}
@media screen and (max-width: 768px) {
  .sec-gallery__inner .obj:nth-of-type(8) {
    height: 48.7%;
  }
}
.sec-gallery__inner .obj:nth-of-type(9) {
  bottom: 0;
  left: 91.1%;
  width: 49.6%;
}

.sec-footer-map {
  width: 100vw;
  background-color: #f9f8f3;
  position: relative;
}
.sec-footer-map .back_map {
  width: 100vw;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .back_map {
    width: 150vw;
    max-width: none;
    transform: translateX(-40vw);
    background-color: #fff;
  }
}
.sec-footer-map .cloud {
  position: absolute;
  width: 150rem;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .cloud {
    width: 60rem;
    z-index: 3;
  }
}
.sec-footer-map .cloud--1 {
  top: 12%;
  left: 35%;
  animation: cloudMove 4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .cloud--1 {
    top: -90%;
    left: 10%;
  }
}
.sec-footer-map .cloud--2 {
  top: 7%;
  left: 65%;
  animation: cloudMove 7s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .cloud--2 {
    top: -120%;
  }
}
.sec-footer-map .cloud--3 {
  top: 16%;
  left: 76%;
  animation: cloudMove 5.5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .cloud--3 {
    top: -100%;
    left: 85%;
  }
}
.sec-footer-map .bird {
  position: absolute;
  width: 150rem;
  top: 15%;
  left: 50%;
  animation: cloudMove 4.5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .bird {
    width: 50rem;
    top: -110%;
    z-index: 3;
  }
}
.sec-footer-map .truck {
  position: absolute;
  width: 200rem;
  left: 100rem;
  bottom: 190rem;
}
@media screen and (max-width: 768px) {
  .sec-footer-map .truck {
    width: 70rem;
    left: 3rem;
    bottom: 80rem;
  }
}

.sec-blog-kv {
  padding-top: 250rem;
  padding-bottom: 400rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv {
    padding-top: 110rem;
    padding-bottom: 30rem;
  }
}
.sec-blog-kv__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 1500px) {
  .sec-blog-kv__inner {
    width: 1300rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-kv__inner {
    width: 335rem;
  }
}
.sec-blog-kv__heading {
  flex: 0 0 45%;
}
.sec-blog-kv__title {
  font-size: 110rem;
  font-weight: 900;
  line-height: 1;
  color: #4DB9F2;
  -webkit-text-stroke: 2rem #333;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv__title {
    font-size: 50rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.sec-blog-kv__sub {
  margin-top: 18rem;
  font-size: 36rem;
  font-weight: 700;
  color: #4DB9F2;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv__sub {
    font-size: 16rem;
    margin-top: 8rem;
  }
}
.sec-blog-kv__image {
  position: absolute;
  top: 100rem;
  right: 200rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv__image {
    position: unset;
    transform: translateX(20rem);
  }
}
.sec-blog-kv__image img {
  display: block;
  width: 100%;
  max-width: 500rem;
  height: auto;
  margin-left: auto;
}
.sec-blog-kv-list {
  margin-top: 50rem;
  display: flex;
  flex-direction: column;
  gap: 30rem;
}
.sec-blog-kv-list .blog-item-group {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group {
    flex-direction: row;
    gap: 10rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item {
  display: flex;
  align-items: center;
  gap: 48rem;
  padding: 32rem 40rem;
  border: 2rem solid #58c3f6;
  border-radius: 70rem;
  background: #fff;
  text-decoration: none;
  transition: 0.35s;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item {
    flex-direction: column;
    gap: 10rem;
    border-radius: 30rem;
    padding: 20rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item:hover .blog-item__thumb img {
  transform: scale(1.5);
  filter: brightness(0.75);
}
.sec-blog-kv-list .blog-item-group .blog-item:hover .blog-item__arrow {
  background: #58c3f6;
  color: #fff;
  transform: translateX(6rem);
}
.sec-blog-kv-list .blog-item-group .blog-item__thumb {
  flex-shrink: 0;
  width: 240rem;
  height: 160rem;
  border-radius: 40rem;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__thumb {
    width: 140rem;
    height: 120rem;
    border-radius: 20rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
  display: block;
}
.sec-blog-kv-list .blog-item-group .blog-item__body {
  flex: 1;
}
.sec-blog-kv-list .blog-item-group .blog-item__meta {
  display: flex;
  align-items: center;
  gap: 18rem;
  margin-bottom: 16rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__meta {
    gap: 10rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item__date {
  color: #58c3f6;
  font-size: 22rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__date {
    font-size: 12rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item__category {
  padding: 5rem 16rem;
  border: 1rem solid #444;
  border-radius: 30rem;
  font-size: 16rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__category {
    font-size: 8rem;
    padding: 1rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item__title {
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 16rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__title {
    font-size: 14rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item__text {
  font-size: 20rem;
  line-height: 1.8;
  color: #444;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__text {
    font-size: 12rem;
  }
}
.sec-blog-kv-list .blog-item-group .blog-item__arrow {
  flex-shrink: 0;
  width: 74rem;
  height: 74rem;
  border: 2rem solid #58c3f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #58c3f6;
  transition: 0.35s;
}
.sec-blog-kv-list .blog-item-group .blog-item__arrow svg {
  transform: translateX(5rem);
}
@media screen and (max-width: 768px) {
  .sec-blog-kv-list .blog-item-group .blog-item__arrow {
    display: none;
  }
}
.sec-blog-kv .blog-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 100rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv .blog-pagination {
    margin-top: 50rem;
  }
}
.sec-blog-kv .blog-pagination__numbers {
  display: flex;
  align-items: center;
  gap: 50rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv .blog-pagination__numbers {
    gap: 30rem;
  }
}
.sec-blog-kv .blog-pagination__numbers a {
  position: relative;
  display: inline-block;
  font-size: 32rem;
  font-weight: 700;
  line-height: 1;
  color: #222;
  text-decoration: none;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv .blog-pagination__numbers a {
    font-size: 20rem;
  }
}
.sec-blog-kv .blog-pagination__numbers a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8rem;
  width: 0;
  height: 3rem;
  background: #59c2f3;
  transition: width 0.3s;
}
.sec-blog-kv .blog-pagination__numbers a:hover {
  color: #59c2f3;
}
.sec-blog-kv .blog-pagination__numbers a:hover::after {
  width: 100%;
}
.sec-blog-kv .blog-pagination__numbers a.is-active {
  color: #59c2f3;
}
.sec-blog-kv .blog-pagination__arrow {
  width: 72rem;
  height: 72rem;
  border-radius: 50%;
  border: none;
  background: #59c2f3;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-blog-kv .blog-pagination__arrow {
    width: 42rem;
    height: 42rem;
  }
}
.sec-blog-kv .blog-pagination__arrow svg {
  width: 24rem;
  height: auto;
}
.sec-blog-kv .blog-pagination__arrow:hover {
  background: #fff;
  color: #59c2f3;
  border: 2rem solid #59c2f3;
}
.sec-blog-kv .blog-pagination__arrow--prev svg {
  transform: translateX(-5rem);
}
.sec-blog-kv .blog-pagination__arrow--next svg {
  transform: translateX(5rem);
}

.sec-blog-detail {
  padding-top: 250rem;
  padding-bottom: 400rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail {
    padding-top: 90rem;
    padding-bottom: 30rem;
  }
}
.sec-blog-detail__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 1500px) {
  .sec-blog-detail__inner {
    width: 1300rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-detail__inner {
    width: 335rem;
  }
}
.sec-blog-detail__title {
  font-size: 75rem;
  font-weight: 900;
  line-height: 1;
  color: #4DB9F2;
  -webkit-text-stroke: 1rem #333;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail__title {
    font-size: 40rem;
  }
}
.sec-blog-detail__sub {
  margin-top: 18rem;
  font-size: 27rem;
  font-weight: 700;
  color: #4DB9F2;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail__sub {
    font-size: 14rem;
    margin-top: 2rem;
  }
}
.sec-blog-detail-content {
  margin-top: 100rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content {
    margin-top: 20rem;
  }
}
.sec-blog-detail-content .blog-detail__meta {
  width: 1040rem;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 30rem;
}
@media screen and (max-width: 1500px) {
  .sec-blog-detail-content .blog-detail__meta {
    width: 1040rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__meta {
    width: 300rem;
    gap: 10rem;
  }
}
.sec-blog-detail-content .blog-detail__date {
  color: #58c3f6;
  font-size: 24rem;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__date {
    font-size: 12rem;
  }
}
.sec-blog-detail-content .blog-detail__category {
  padding: 5rem 16rem;
  border: 1rem solid #444;
  border-radius: 30rem;
  font-size: 16rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__category {
    font-size: 8rem;
    padding: 3rem;
  }
}
.sec-blog-detail-content .blog-detail__title {
  font-size: 44rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 20rem;
  margin-bottom: 16rem;
  width: 1040rem;
  margin: auto;
}
@media screen and (max-width: 1500px) {
  .sec-blog-detail-content .blog-detail__title {
    width: 1040rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__title {
    width: 300rem;
    font-size: 14rem;
  }
}
.sec-blog-detail-content .blog-detail__thumb {
  margin-top: 100rem;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__thumb {
    margin-top: 10rem;
    width: 335rem;
  }
}
.sec-blog-detail-content .blog-detail__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 40rem;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
  display: block;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__thumb img {
    border-radius: 20rem;
  }
}
.sec-blog-detail-content .blog-detail__sub-title {
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.4;
  margin: auto;
  margin-top: 100rem;
  margin-bottom: 16rem;
  width: 1040rem;
}
@media screen and (max-width: 1500px) {
  .sec-blog-detail-content .blog-detail__sub-title {
    width: 1040rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__sub-title {
    width: 300rem;
    font-size: 14rem;
    margin-top: 20rem;
  }
}
.sec-blog-detail-content .blog-detail__text {
  font-size: 20rem;
  line-height: 1.8;
  color: #444;
  width: 1040rem;
  margin: auto;
  margin-top: 30rem;
}
@media screen and (max-width: 1500px) {
  .sec-blog-detail-content .blog-detail__text {
    width: 1040rem;
    margin-top: 20rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-detail-content .blog-detail__text {
    width: 300rem;
    font-size: 12rem;
  }
}
.sec-blog-detail .sec-blog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 100rem;
  max-width: 1300rem;
}
@media screen and (max-width: 1500px) {
  .sec-blog-detail .sec-blog-nav {
    width: 1300rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-blog-detail .sec-blog-nav {
    width: 335rem;
    margin-top: 20rem;
  }
}
.sec-blog-detail .blog-nav {
  display: flex;
  align-items: center;
  gap: 24rem;
  text-decoration: none;
}
.sec-blog-detail .blog-nav__circle {
  width: 88rem;
  height: 88rem;
  border-radius: 50%;
  background: #56c0f2;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-blog-detail .blog-nav__circle {
    width: 30rem;
    height: 30rem;
  }
}
.sec-blog-detail .blog-nav__circle svg {
  transform: translateX(-5rem);
}
@media screen and (max-width: 768px) {
  .sec-blog-detail .blog-nav__circle svg {
    transform: translateX(-3rem);
  }
}
.sec-blog-detail .blog-nav--next {
  justify-self: end;
}
.sec-blog-detail .blog-nav--next svg {
  transform: translateX(5rem);
}
@media screen and (max-width: 768px) {
  .sec-blog-detail .blog-nav--next svg {
    transform: translateX(3rem);
  }
}
.sec-blog-detail .blog-nav__text {
  font-size: 24rem;
  font-weight: 700;
  color: #56c0f2;
  transition: 0.3s;
}
.sec-blog-detail .blog-nav:hover .blog-nav__circle {
  background: #fff;
  color: #56c0f2;
  border: 2rem solid #56c0f2;
}

.sec-contact {
  padding-top: 250rem;
  padding-bottom: 400rem;
}
@media screen and (max-width: 768px) {
  .sec-contact {
    padding-top: 110rem;
    padding-bottom: 30rem;
  }
}
.sec-contact__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 1500px) {
  .sec-contact__inner {
    width: 1300rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-contact__inner {
    width: 335rem;
  }
}
.sec-contact__heading {
  flex: 0 0 45%;
  margin-bottom: 25rem;
}
.sec-contact__title {
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif;
  font-size: 110rem;
  font-weight: bold;
  line-height: 1;
  color: #4DB9F2;
  -webkit-text-stroke: 2rem #333;
}
@media screen and (max-width: 768px) {
  .sec-contact__title {
    font-size: 50rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.sec-contact__sub {
  margin-top: 18rem;
  font-size: 36rem;
  font-weight: 700;
  color: #4DB9F2;
}
@media screen and (max-width: 768px) {
  .sec-contact__sub {
    font-size: 16rem;
    margin-top: 8rem;
  }
}
.sec-contact__image {
  position: absolute;
  top: 100rem;
  right: 200rem;
}
@media screen and (max-width: 768px) {
  .sec-contact__image {
    position: unset;
    transform: translateX(20rem);
    margin-block: 20rem;
  }
}
.sec-contact__image img {
  display: block;
  width: 100%;
  max-width: 500rem;
  height: auto;
  margin-left: auto;
}
.sec-contact .footer__tel:hover h4 {
  color: #1ec3f2;
}
.sec-contact .footer__tel h4 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 32rem;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec-contact .footer__tel h4 {
    font-size: 14rem;
    width: 100%;
  }
}
.sec-contact .footer__tel div {
  gap: 20rem;
}
.sec-contact .footer__tel div span {
  width: 55rem;
}
@media screen and (max-width: 768px) {
  .sec-contact .footer__tel div span {
    width: 25rem;
  }
}
.sec-contact .footer__tel div strong {
  font-size: 76rem;
}
@media screen and (max-width: 768px) {
  .sec-contact .footer__tel div strong {
    font-size: 26rem;
  }
}
@media screen and (max-width: 768px) {
  .sec-contact .footer__tel small {
    width: 100%;
    text-align: center;
  }
}
.sec-contact__main {
  max-width: 1300px;
  margin: auto;
  border: 2rem solid #55C2F2;
  border-radius: 70rem;
  padding: 80rem 90rem;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .sec-contact__main {
    padding: 40rem 15rem;
    margin-inline: 20rem;
    border-radius: 30rem;
  }
}
.sec-contact__main__title {
  font-size: 30rem;
  font-weight: 900;
  line-height: 1;
  color: #4DB9F2;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec-contact__main__title {
    font-size: 16rem;
    -webkit-text-stroke: 0rem #333;
  }
}
.sec-contact__main .contact-step {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 100rem 0 90rem;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-step {
    margin: 50rem 0 40rem;
  }
}
.sec-contact__main .contact-step__item {
  text-align: center;
  position: relative;
}
.sec-contact__main .contact-step__number {
  display: block;
  font-size: 42rem;
  font-weight: bold;
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-step__number {
    top: -80%;
    font-size: 18rem;
  }
}
.sec-contact__main .contact-step__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140rem;
  height: 77rem;
  border-radius: 999rem;
  border: 1rem solid #333;
  font-size: 20rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-step__label {
    width: 80rem;
    height: 44rem;
    font-size: 12rem;
    font-weight: bold;
  }
}
.sec-contact__main .contact-step__line {
  width: 80rem;
  border-top: 2rem dashed #999;
}
.sec-contact__main .contact-step .is-active .contact-step__number {
  color: #55C2F2;
}
.sec-contact__main .contact-step .is-active .contact-step__label {
  background: #55C2F2;
  color: #fff;
}
.sec-contact__main .contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30rem;
  margin-bottom: 30rem;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    margin-bottom: 0rem;
  }
}
.sec-contact__main .contact-form__item {
  margin-bottom: 30rem;
  font-size: 18rem;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form__item {
    font-size: 12rem;
    margin-bottom: 20rem;
  }
}
.sec-contact__main .contact-form label {
  display: block;
  font-weight: bold;
}
.sec-contact__main .contact-form input {
  width: 100%;
  height: 64rem;
  padding: 0 20rem;
  border: 1rem solid #444;
  border-radius: 10rem;
  font-size: 18rem;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form input {
    height: 38rem;
    margin-top: 10rem;
    font-size: 12.5rem;
  }
}
.sec-contact__main .contact-form textarea {
  width: 100%;
  height: 240rem;
  padding: 20rem;
  border: 1rem solid #444;
  border-radius: 10rem;
  resize: vertical;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form textarea {
    margin-top: 10rem;
    height: 150rem;
  }
}
.sec-contact__main .contact-form .contact-privacy {
  border: 1rem solid #444;
  border-radius: 10rem;
  padding: 50rem;
  margin-bottom: 30rem;
  font-size: 18rem;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form .contact-privacy {
    padding: 20rem;
    font-size: 12rem;
  }
}
.sec-contact__main .contact-form .contact-privacy__body {
  height: 180rem;
  overflow-y: scroll;
  overscroll-behavior: contain;
  line-height: 2;
  padding-right: 20rem;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form .contact-privacy__body {
    height: 130rem;
  }
}
.sec-contact__main .contact-form .contact-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sec-contact__main .contact-form .contact-check input {
  display: none;
}
.sec-contact__main .contact-form .contact-check .checkmark {
  width: 24px;
  height: 24px;
  border: 2px solid #bdbdbd;
  border-radius: 50%;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.sec-contact__main .contact-form .contact-check .checkmark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #6cc04a;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sec-contact__main .contact-form .contact-check input:checked + .checkmark {
  border-color: #6cc04a;
}
.sec-contact__main .contact-form .contact-check input:checked + .checkmark::after {
  opacity: 1;
}
.sec-contact__main .contact-form .contact-check .text {
  font-size: 16px;
  line-height: 1.5;
}
.sec-contact__main .contact-form .contact-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 220rem;
  height: 70rem;
  margin: auto;
  border: none;
  border: 1px solid #444;
  border-radius: 999rem;
  background: #4DB9F2;
  color: #fff;
  font-size: 18rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .sec-contact__main .contact-form .contact-submit {
    font-size: 16rem;
    width: 220rem;
    height: 45rem;
    margin-top: 30rem;
  }
}
.sec-contact__main .contact-form .contact-submit:hover {
  background: #fff;
  color: #4DB9F2;
}

@keyframes cloudMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes downMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(25%) translateY(20%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes upMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes s4Bird {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-10%, -14%) rotate(-4deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes s4CloudDrift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(16rem, -7rem);
  }
  50% {
    transform: translate(5rem, 7rem);
  }
  75% {
    transform: translate(-13rem, -3rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.page-gomibook {
  width: min(1500rem, 90%);
  margin: auto;
  padding-bottom: 300rem;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .page-gomibook {
    width: 100vw;
    padding-bottom: 50rem;
  }
}
.page-gomibook-intro {
  padding-top: 200px;
  padding-bottom: 120px;
  background-color: #fbf9f4;
  position: relative;
  z-index: 1;
}
.page-gomibook-intro.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro {
    padding-top: 120rem;
    padding-bottom: 0;
  }
}
.page-gomibook-intro--inner {
  position: sticky;
  top: 0;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner {
    margin-bottom: 50rem;
  }
}
.page-gomibook-intro--inner .trash {
  position: absolute;
  width: 18%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash {
    width: 35%;
  }
}
.page-gomibook-intro--inner .trash-1 {
  top: 48%;
  left: 8%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-1 {
    top: 51%;
    left: 6%;
  }
}
.page-gomibook-intro--inner .trash-2 {
  top: 47%;
  left: 21%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-2 {
    top: 50%;
    left: 34%;
  }
}
.page-gomibook-intro--inner .trash-3 {
  top: 4%;
  left: 21%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-3 {
    top: 14%;
    left: 56%;
  }
}
.page-gomibook-intro--inner .trash-4 {
  top: 5%;
  left: 7%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-4 {
    top: 13%;
    left: 21%;
  }
}
.page-gomibook-intro--inner .trash-5 {
  top: 25%;
  left: 0%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-5 {
    top: 28%;
    left: 2%;
  }
}
.page-gomibook-intro--inner .trash-6 {
  top: 25%;
  left: 13%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-6 {
    top: 30%;
    left: 27%;
  }
}
.page-gomibook-intro--inner .trash-7 {
  top: 41%;
  left: 30%;
  transform: rotateX(180deg);
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-7 {
    top: 48%;
    left: 56%;
  }
}
.page-gomibook-intro--inner .trash-8 {
  top: 25%;
  left: 27%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .trash-8 {
    top: 33%;
    left: 54%;
  }
}
.page-gomibook-intro--inner .book-title {
  position: absolute;
  width: 35%;
  top: 2%;
  right: 7%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .book-title {
    width: 85%;
    right: 9%;
  }
}
.page-gomibook-intro--inner p {
  position: absolute;
  width: 33%;
  top: 59%;
  right: 9%;
  font-size: 17.5rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner p {
    right: 50%;
    transform: translateX(50%);
    font-size: 11.5rem;
    width: 66%;
  }
}
.page-gomibook-intro--inner .ticket {
  position: absolute;
  width: 5%;
  top: -5%;
  right: 3%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .ticket {
    width: 13%;
  }
}
.page-gomibook-intro--inner .ticket p {
  position: absolute;
  top: 10%;
  right: 16%;
  width: 20rem;
  font-size: 17rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1.05em;
  text-align: center;
  transform: none;
}
.page-gomibook-intro--inner .ticket p:nth-of-type(2) {
  right: 55%;
}
@media screen and (max-width: 768px) {
  .page-gomibook-intro--inner .ticket p {
    width: 14rem;
    font-size: 12rem;
  }
}
.page-gomibook .page-garbage-guide {
  padding: 150rem 20rem 250rem;
  background: url("../img/other/book_l_bottom.webp") no-repeat;
  background-size: contain;
  background-position: bottom;
  background-color: #fff;
  border: 1px solid #333;
  border-left: none;
  border-bottom: none;
  position: relative;
  z-index: 2;
  border-radius: 0 80rem 0 0;
  box-shadow: 0 -24rem 50rem rgba(0, 0, 0, 0.06);
  position: relative;
}
.page-gomibook .page-garbage-guide::before {
  content: "";
  width: 1.2%;
  height: calc(100% - 30rem);
  position: absolute;
  top: -1rem;
  left: 0;
  border-right: 1px solid #333;
  background: linear-gradient(to bottom, #fbf9f4 0%, #fbf9f4 25rem, #f9e387 25rem, #f9e387 100%);
}
.page-gomibook .page-garbage-guide.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide {
    padding: 60rem 20rem 100rem;
    border-radius: 0 40rem 0 0;
    box-shadow: 0 -10rem 24rem rgba(0, 0, 0, 0.08);
  }
  .page-gomibook .page-garbage-guide::before {
    height: calc(100% - 5rem);
  }
}
.page-gomibook .page-garbage-guide {
  /* ===========================
    Header
  =========================== */
}
.page-gomibook .page-garbage-guide .guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
  margin-bottom: 170rem;
  position: relative;
  max-width: 1300rem;
  position: relative;
  width: calc(100% + 120rem);
  margin: 0 auto 150rem;
}
@media screen and (max-width: 1500px) {
  .page-gomibook .page-garbage-guide .guide-header {
    gap: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .guide-header {
    display: block;
    width: 100%;
    transform: none;
    margin-bottom: 70rem;
  }
}
.page-gomibook .page-garbage-guide .guide-header .header-img {
  width: 370rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .guide-header .header-img {
    width: 260rem;
  }
}
.page-gomibook .page-garbage-guide .guide-header .header-img-1 .person {
  position: absolute;
  width: 20%;
}
.page-gomibook .page-garbage-guide .guide-header .header-img-1 .person-1 {
  width: 24%;
  top: 33%;
  left: 69%;
  animation: upMove 5s ease-in-out infinite;
}
.page-gomibook .page-garbage-guide .guide-header .header-img-1 .person-2 {
  top: 32%;
  left: 23%;
  animation: downMove 6s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .guide-header .header-img-2 {
    transform: translateX(110rem);
  }
}
.page-gomibook .page-garbage-guide .guide-header .header-img-2 .person {
  position: absolute;
  width: 20%;
  top: 23%;
  left: 35%;
  animation: upMove 7s ease-in-out infinite;
}
.page-gomibook .page-garbage-guide .guide-header .header-title {
  text-align: center;
  flex: 1;
}
.page-gomibook .page-garbage-guide .guide-header .sub-title {
  font-size: 44rem;
  font-weight: bold;
  line-height: 1.05em;
  color: #231815;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .guide-header .sub-title {
    font-size: 24rem;
  }
}
.page-gomibook .page-garbage-guide .guide-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70rem;
  font-weight: 800;
  color: #43b3e8;
  margin-bottom: 20rem;
  -webkit-text-stroke: 1rem #333;
}
.page-gomibook .page-garbage-guide .guide-header h2 span {
  font-size: 50rem;
  padding: 0 2rem 0 6rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .guide-header h2 {
    font-size: 36rem;
  }
  .page-gomibook .page-garbage-guide .guide-header h2 span {
    font-size: 26rem;
  }
}
.page-gomibook .page-garbage-guide .guide-header .description {
  font-size: 18rem;
  font-weight: 500;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .guide-header .description {
    font-size: 13rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
  }
}
.page-gomibook .page-garbage-guide {
  /* ===========================
    Three Cards
    =========================== */
}
.page-gomibook .page-garbage-guide .category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100rem;
  max-width: 1300rem;
  margin: 0 auto 150rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .category-list {
    display: flex;
    flex-direction: column;
    gap: 30rem;
    margin-bottom: 130rem;
  }
}
.page-gomibook .page-garbage-guide .category {
  position: relative;
  border-top: 2rem solid #ccc;
  padding-top: 20rem;
  text-align: center;
}
.page-gomibook .page-garbage-guide .category h3 {
  font-size: 34rem;
  font-weight: 700;
  margin-bottom: 10rem;
  color: #231815;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .category h3 {
    font-size: 24rem;
  }
}
.page-gomibook .page-garbage-guide .category img {
  width: 240rem;
  margin: 0 auto 5rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .category img {
    width: 150rem;
  }
}
.page-gomibook .page-garbage-guide .category p {
  font-size: 16rem;
  line-height: 2;
  font-weight: 500;
  text-align: left;
  border-top: 2rem solid #ccc;
  padding-top: 20rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .category p {
    font-size: 12rem;
    font-weight: 500;
  }
}
.page-gomibook .page-garbage-guide .category-top {
  position: relative;
}
.page-gomibook .page-garbage-guide .ticket {
  position: absolute;
  width: 60rem;
  height: 290rem;
  top: -85rem;
  right: -3%;
  background: #333;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 100%);
}
.page-gomibook .page-garbage-guide .ticket::before {
  content: "";
  position: absolute;
  inset: 1.4rem;
  background: #6bc9ef;
  height: calc(100% - 4rem);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 100%);
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .ticket {
    width: 40rem;
    height: 200rem;
    top: -40rem;
  }
  .page-gomibook .page-garbage-guide .ticket::before {
    inset: 1rem;
  }
}
.page-gomibook .page-garbage-guide .ticket p {
  position: absolute;
  z-index: 1;
  writing-mode: vertical-rl;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 4rem));
  font-size: 18rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1;
  border-top: none;
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .ticket p {
    font-size: 15rem;
  }
}
.page-gomibook .page-garbage-guide .ticket--pink::before {
  background: #f4cdd9;
}
.page-gomibook .page-garbage-guide {
  /* ===========================
    Bottom Section
  =========================== */
}
.page-gomibook .page-garbage-guide .not-collected {
  position: relative;
  margin-top: 220rem;
  background: #54c3ef;
  color: #fff;
  border: 1rem solid #333;
  padding: 90rem 40rem 40rem;
  max-width: 1300rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected {
    margin-top: 150rem;
    padding: 15rem 16rem 30rem;
  }
}
.page-gomibook .page-garbage-guide .not-collected__head {
  position: absolute;
  top: -135rem;
  left: 50%;
  transform: translateX(-50%);
  width: 350rem;
  height: 180rem;
  background: #54c3ef;
  border: 1rem solid #333;
  border-bottom: none;
  border-radius: 180rem 180rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 34rem;
  z-index: 1;
}
.page-gomibook .page-garbage-guide .not-collected__head::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 104%;
  bottom: -2rem;
  height: 47rem;
  background: #54c3ef;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected__head {
    top: -100rem;
    width: 200rem;
    height: 100rem;
    border-radius: 100rem 100rem 0 0;
    padding-top: 20rem;
  }
  .page-gomibook .page-garbage-guide .not-collected__head::after {
    height: 1rem;
  }
}
.page-gomibook .page-garbage-guide .not-collected__ttl {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 32rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected__ttl {
    font-size: 18rem;
  }
}
.page-gomibook .page-garbage-guide .not-collected .item-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected .item-list {
    display: flex;
    flex-direction: column;
  }
}
.page-gomibook .page-garbage-guide .not-collected .item-list .item {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected .item-list .item {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 5rem;
  }
}
.page-gomibook .page-garbage-guide .not-collected .item-list .item:nth-of-type(1) img {
  transform: unset;
}
.page-gomibook .page-garbage-guide .not-collected .item-list .item img {
  height: 100rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 20rem;
  transform: scale(1.7);
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected .item-list .item img {
    height: 60rem;
    width: 100%;
  }
}
.page-gomibook .page-garbage-guide .not-collected .item-list .item h4 {
  font-size: 22rem;
  margin-bottom: 5rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected .item-list .item h4 {
    font-size: 14rem;
    text-align: start;
  }
}
.page-gomibook .page-garbage-guide .not-collected .item-list .item p {
  font-size: 14rem;
  line-height: 1.6;
  border-top: 1px solid #000;
  padding-top: 5rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .not-collected .item-list .item p {
    font-size: 10rem;
    font-weight: 500;
    text-align: start;
  }
}
.page-gomibook .page-garbage-guide .link {
  margin-top: 60rem;
  text-align: center;
  font-size: 14rem;
  font-weight: 600;
  margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .link {
    margin-top: 20rem;
    font-size: 12rem;
    text-align: start;
  }
}
.page-gomibook .page-garbage-guide .link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 5rem 15rem;
  border-radius: 999rem;
  font-size: 12rem;
  border: 1px solid #333;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-guide .link-btn {
    flex-direction: column;
    gap: 0;
    border-radius: 15rem;
    font-weight: 500;
    width: 100%;
    margin-top: 30rem;
  }
}
.page-gomibook .page-garbage-guide .link-btn span {
  color: #54c3ef;
  font-size: 12rem;
}
.page-gomibook .page-garbage-point {
  padding: 120rem 20rem 200rem;
  background: url("../img/other/book_r_bottom.webp") no-repeat;
  background-size: contain;
  background-position: bottom;
  background-color: #f9d0da;
  border: 1px solid #333;
  border-right: none;
  border-bottom: none;
  position: relative;
  z-index: 3;
  border-radius: 80rem 0 0 0;
  box-shadow: 0 -24rem 50rem rgba(0, 0, 0, 0.06);
  position: relative;
}
.page-gomibook .page-garbage-point::before {
  content: "";
  width: 1.2%;
  height: calc(100% - 30rem);
  position: absolute;
  top: -1rem;
  right: 0;
  border-left: 1px solid #333;
  background: linear-gradient(to bottom, #fbf9f4 0%, #fbf9f4 25rem, #f9e387 25rem, #f9e387 100%);
}
.page-gomibook .page-garbage-point.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point {
    padding: 60rem 20rem 100rem;
    border-radius: 40rem 0 0 0;
    box-shadow: 0 -10rem 24rem rgba(0, 0, 0, 0.08);
  }
  .page-gomibook .page-garbage-point::before {
    height: calc(100% - 5rem);
  }
}
.page-gomibook .page-garbage-point {
  /*--------------------
    Heading
  ---------------------*/
  /*-------------------- Cards ---------------------*/
}
.page-gomibook .page-garbage-point .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30rem;
  max-width: 1300rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards {
    flex-direction: column;
  }
}
.page-gomibook .page-garbage-point .cards .title {
  width: 40%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .title {
    width: 100%;
  }
}
.page-gomibook .page-garbage-point .cards .title .sub {
  font-size: 35rem;
  font-weight: bold;
  margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .title .sub {
    font-size: 24rem;
  }
}
.page-gomibook .page-garbage-point .cards .title h2 {
  font-size: 72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  -webkit-text-stroke: 2rem #333;
  paint-order: stroke fill;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .title h2 {
    font-size: 38rem;
  }
}
.page-gomibook .page-garbage-point .cards .title span {
  font-size: 4rem;
}
.page-gomibook .page-garbage-point .cards .title .lead {
  margin-top: 30rem;
  line-height: 2;
  font-size: 18rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .title .lead {
    font-size: 14rem;
    text-align: start;
  }
}
.page-gomibook .page-garbage-point .cards .card {
  background: #fffdf7;
  padding: 55rem 40rem;
  position: relative;
  min-height: 341.5rem;
  width: 31%;
  background: url(../img/other/Asset\ 16@2x.webp) no-repeat;
  background-size: contain;
  margin-bottom: 50rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .card {
    width: 100%;
    background-size: 100% 100%;
    padding: 40rem 30rem;
    min-height: unset;
    margin: 0;
  }
}
.page-gomibook .page-garbage-point .cards .card.large {
  margin-right: 140rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .card.large {
    margin: 0;
  }
}
.page-gomibook .page-garbage-point .cards .card-head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 20rem;
}
.page-gomibook .page-garbage-point .cards .card-head .point_num {
  background: url(../img/other/Asset\ 5@2x.webp) no-repeat;
  background-size: contain;
  background-position-y: bottom;
  width: 60rem;
  text-align: center;
  padding-bottom: 10rem;
}
.page-gomibook .page-garbage-point .cards .card-head .point_num p {
  font-size: 12rem;
  color: #ef9fb2;
  font-weight: bold;
}
.page-gomibook .page-garbage-point .cards .card-head .point_num .number {
  font-size: 38rem;
  color: #ef9fb2;
  font-weight: bold;
  line-height: 0.9em;
  margin-bottom: 1rem;
}
.page-gomibook .page-garbage-point .cards .card-head h3 {
  font-size: 22rem;
  font-weight: 900;
  line-height: 1.5;
  color: #333;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .card-head h3 {
    font-size: 14rem;
  }
}
.page-gomibook .page-garbage-point .cards .card hr {
  border: none;
  border-top: 1px solid #999;
  margin: 18rem 0;
}
.page-gomibook .page-garbage-point .cards .card p {
  font-size: 16rem;
  line-height: 1.5;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-point .cards .card p {
    font-size: 12rem;
  }
}
.page-gomibook .page-garbage-tips {
  padding: 150rem 20rem 250rem;
  background: url("../img/other/book_l_bottom.webp") no-repeat;
  background-size: contain;
  background-position: bottom;
  background-color: #fff;
  border: 1px solid #333;
  border-left: none;
  border-bottom: none;
  position: relative;
  z-index: 4;
  border-radius: 0 80rem 0 0;
  box-shadow: 0 -24rem 50rem rgba(0, 0, 0, 0.06);
}
.page-gomibook .page-garbage-tips::before {
  content: "";
  width: 1.2%;
  height: calc(100% - 30rem);
  position: absolute;
  top: -1rem;
  left: 0;
  border-right: 1px solid #333;
  background: linear-gradient(to bottom, #fbf9f4 0%, #fbf9f4 25rem, #f9e387 25rem, #f9e387 100%);
}
.page-gomibook .page-garbage-tips.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips {
    padding: 60rem 20rem 100rem;
    border-radius: 0 40rem 0 0;
    box-shadow: 0 -10rem 24rem rgba(0, 0, 0, 0.08);
  }
  .page-gomibook .page-garbage-tips::before {
    height: calc(100% - 5rem);
  }
}
.page-gomibook .page-garbage-tips > .title,
.page-gomibook .page-garbage-tips > .tip-main {
  max-width: 1300rem;
  margin-inline: auto;
}
.page-gomibook .page-garbage-tips .title {
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  margin: auto;
  margin-bottom: 120rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .title {
    margin-bottom: 50rem;
  }
}
.page-gomibook .page-garbage-tips .title .sub {
  font-size: 35rem;
  font-weight: bold;
  margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .title .sub {
    font-size: 24rem;
  }
}
.page-gomibook .page-garbage-tips .title h2 {
  font-size: 72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f2cc72;
  -webkit-text-stroke: 1rem #333;
  paint-order: stroke fill;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .title h2 {
    font-size: 38rem;
  }
}
.page-gomibook .page-garbage-tips .title span {
  font-size: 4rem;
}
.page-gomibook .page-garbage-tips .title .lead {
  margin-top: 30rem;
  line-height: 2;
  font-size: 18rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .title .lead {
    font-size: 14rem;
    text-align: start;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips {
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 100rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title {
  text-align: start;
  margin: 10rem auto 0;
  align-self: start;
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title {
    text-align: center;
    position: static;
    transform: none;
    align-self: auto;
    margin: 0 auto 20rem;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title .sub {
  font-size: 22rem;
  font-weight: bold;
  color: #f2cc72;
  margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title .sub {
    font-size: 18rem;
    color: #333;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title h2 {
  font-size: 72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f2cc72;
  -webkit-text-stroke: 2rem #333;
  paint-order: stroke fill;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title h2 {
    font-size: 38rem;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title span {
  font-size: 4rem;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title .lead {
  margin-top: 30rem;
  line-height: 2;
  font-size: 16rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .title .lead {
    font-size: 12rem;
    font-weight: 500;
    text-align: start;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip {
  display: flex;
  width: 100%;
  max-width: 900rem;
  border: 2rem solid #333;
  border-radius: 18rem;
  overflow: hidden;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip {
    flex-direction: column;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__title {
  width: 150rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e2b74c;
  font-size: 26rem;
  font-weight: 700;
  line-height: 1.2;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.08em;
  padding: 20rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__title {
    width: 100%;
    font-size: 18rem;
    writing-mode: unset;
    align-items: center;
    justify-content: center;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__content {
  flex: 1;
  background: #f7d26b;
  display: flex;
  align-items: center;
  gap: 40rem;
  padding: 10rem 40rem;
  padding-right: 40rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__content {
    gap: 10rem;
    padding: 10rem 10rem;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__image {
  flex-shrink: 0;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__image img {
  width: 170rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__image img {
    width: 100rem;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__text {
  color: #333;
  font-size: 16rem;
  font-weight: 600;
  line-height: 2em;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__text {
    font-size: 13rem;
    font-weight: 500;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips .tips-list .tip__text p {
  margin: 0;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) {
  margin-top: 40rem;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .title .sub {
  color: #54b8e0;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .title .sub {
    color: #333;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .title h2 {
  color: #54b8e0;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .title .keyword {
  margin-top: 30rem;
  font-size: 13rem;
  font-weight: 700;
  padding: 10rem 15rem;
  border: 1px solid #333;
  border-radius: 10rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .title .keyword {
    font-size: 11rem;
    font-weight: 500;
    padding: 10rem 15rem;
    border-radius: 999rem;
    margin-top: 10rem;
    margin-bottom: 30rem;
  }
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .tips-list .tip__title {
  color: #50b7e2;
}
.page-gomibook .page-garbage-tips .tip-main .kitchin-tips:nth-of-type(2) .tips-list .tip__content {
  background: #50b7e2;
}
.page-gomibook .page-recycle-guide {
  padding: 120rem 20rem 200rem;
  background: url("../img/other/book_r_bottom.webp") no-repeat;
  background-size: contain;
  background-position: bottom;
  background-color: #fcf9f2;
  border: 1px solid #333;
  border-right: none;
  border-bottom: none;
  position: relative;
  z-index: 5;
  border-radius: 80rem 0 0 0;
  box-shadow: 0 -24rem 50rem rgba(0, 0, 0, 0.06);
}
.page-gomibook .page-recycle-guide.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.page-gomibook .page-recycle-guide::before {
  content: "";
  width: 1.2%;
  height: calc(100% - 30rem);
  position: absolute;
  top: -1rem;
  right: 0;
  border-left: 1px solid #333;
  background: linear-gradient(to bottom, #fbf9f4 0%, #fbf9f4 25rem, #f9e387 25rem, #f9e387 100%);
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide {
    padding: 60rem 20rem 100rem;
    border-radius: 40rem 0 0 0;
    box-shadow: 0 -10rem 24rem rgba(0, 0, 0, 0.08);
  }
  .page-gomibook .page-recycle-guide::before {
    height: calc(100% - 5rem);
  }
}
.page-gomibook .page-recycle-guide__header,
.page-gomibook .page-recycle-guide .guide-card {
  max-width: 1300rem;
  margin-inline: auto;
}
.page-gomibook .page-recycle-guide__header {
  text-align: center;
  margin-bottom: 46rem;
}
.page-gomibook .page-recycle-guide__sub-title {
  margin: 0;
  font-size: 44rem;
  font-weight: 700;
  -webkit-text-stroke: 1rem #333;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide__sub-title {
    font-size: 24rem;
    -webkit-text-stroke: 1px #333;
  }
}
.page-gomibook .page-recycle-guide__sub-title .yellow {
  color: #f6c23d;
}
.page-gomibook .page-recycle-guide__sub-title .blue {
  color: #3fa8e5;
}
.page-gomibook .page-recycle-guide__title {
  margin: 8rem 0 20rem;
  font-size: 64rem;
  font-weight: 900;
  color: #222;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide__title {
    font-size: 34rem;
  }
}
.page-gomibook .page-recycle-guide__description {
  max-width: 610rem;
  margin: 0 auto 38rem;
  line-height: 1.8;
  font-size: 18rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide__description {
    font-size: 14rem;
    text-align: start;
  }
}
.page-gomibook .page-recycle-guide__legend {
  display: flex;
  justify-content: center;
  gap: 24rem;
}
.page-gomibook .page-recycle-guide .legend {
  display: flex;
  align-items: center;
  font-size: 24rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .legend {
    font-size: 14rem;
  }
}
.page-gomibook .page-recycle-guide .legend::before {
  content: "";
  width: 24rem;
  aspect-ratio: 1/1;
  margin-right: 8rem;
  border: 1px solid #999;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .legend::before {
    width: 14rem;
  }
}
.page-gomibook .page-recycle-guide .legend--burn {
  color: #f3cd6d;
}
.page-gomibook .page-recycle-guide .legend--burn::before {
  background: #f3cd6d;
}
.page-gomibook .page-recycle-guide .legend--recycle {
  color: #4fc2f1;
}
.page-gomibook .page-recycle-guide .legend--recycle::before {
  background: #4fc2f1;
}
.page-gomibook .page-recycle-guide .guide-card {
  margin-bottom: 46rem;
  border: 1rem solid #bbb;
  border-radius: 14rem;
  overflow: hidden;
  background: white;
}
.page-gomibook .page-recycle-guide .guide-card__category {
  height: 58rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rem;
  font-weight: 700;
  background: #fff;
  border-bottom: 1rem solid #ccc;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__category {
    height: 40rem;
    font-size: 20rem;
  }
}
.page-gomibook .page-recycle-guide .guide-card__category:last-child {
  margin-bottom: 0;
}
.page-gomibook .page-recycle-guide .guide-card__body {
  display: flex;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__body {
    display: grid;
    grid-template-columns: 50% 1fr;
  }
}
.page-gomibook .page-recycle-guide .guide-card__column {
  flex: 1;
  text-align: center;
  padding: 34rem 28rem 28rem;
  background: #fcf9f2;
  transition: background-color 0.7s ease;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__column {
    padding: 15rem 5rem;
  }
}
.page-gomibook .page-recycle-guide .guide-card__column h3 {
  font-size: 24rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__column h3 {
    font-size: 13rem;
    font-weight: 900;
  }
}
.page-gomibook .page-recycle-guide .guide-card__column p {
  font-size: 16rem;
  font-weight: 600;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__column p {
    font-size: 12rem;
    text-align: start;
    letter-spacing: -0.05em;
    font-weight: 500;
    margin-bottom: 5rem;
  }
}
.page-gomibook .page-recycle-guide .guide-card__column img {
  width: 250rem;
  height: auto;
  margin: 0rem auto 0rem;
  display: block;
}
.page-gomibook .page-recycle-guide .guide-card__column button {
  width: 300rem;
  height: 40rem;
  border-radius: 999rem;
  border: 1rem solid rgba(0, 0, 0, 0.2);
  background-color: unset;
  font-size: 16rem;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  height: -moz-max-content;
  height: max-content;
  padding-block: 5rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__column button {
    padding-left: 40rem;
    text-align: start;
    width: 100%;
    font-size: 12rem;
    border-radius: 10rem;
    font-weight: 500;
  }
}
.page-gomibook .page-recycle-guide .guide-card__column button::before {
  content: "!";
  position: absolute;
  top: 50%;
  left: 12rem;
  width: 20rem;
  transform: translateY(-50%);
  padding-block: 3rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-recycle-guide .guide-card__column button::before {
    top: 0;
    transform: translateY(3rem);
    padding: 0%;
    width: 18rem;
  }
}
.page-gomibook .page-recycle-guide .guide-card.is-colored .guide-card__column--yellow {
  background: #f3cd6d;
}
.page-gomibook .page-recycle-guide .guide-card.is-colored .guide-card__column--blue {
  background: #4fc2f1;
}
.page-gomibook .page-bulky-waste {
  position: relative;
  z-index: 6;
  padding: 250rem 0 90rem;
  background: #fcf9f2;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste {
    padding: 150rem 0 50rem;
    border-radius: 40rem 40rem 0 0;
    box-shadow: 0 -10rem 24rem rgba(0, 0, 0, 0.08);
  }
}
.page-gomibook .page-bulky-waste__inner {
  position: relative;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #555;
  border-radius: 60rem;
  padding: 90rem 60rem 120rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__inner {
    width: 335rem;
    border-radius: 40rem;
    padding: 60rem 18rem 40rem;
  }
}
.page-gomibook .page-bulky-waste__head {
  position: absolute;
  top: -210rem;
  left: 50%;
  transform: translateX(-50%);
  width: 455rem;
  height: 210rem;
  background: #fff;
  border: 1px solid #555;
  border-bottom: none;
  border-radius: 210rem 210rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80rem;
  z-index: 1;
}
.page-gomibook .page-bulky-waste__head::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: -2rem;
  height: 4rem;
  background: #fff;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__head {
    top: -100rem;
    width: 200rem;
    height: 100rem;
    border-radius: 100rem 100rem 0 0;
    padding-top: 40rem;
  }
}
.page-gomibook .page-bulky-waste__ttl {
  margin: 0;
  font-size: 36rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__ttl {
    font-size: 18rem;
  }
}
.page-gomibook .page-bulky-waste__tree {
  position: absolute;
  bottom: -30rem;
  width: 120rem;
  height: auto;
  z-index: 0;
}
.page-gomibook .page-bulky-waste__tree--l {
  left: -210rem;
}
.page-gomibook .page-bulky-waste__tree--l._pc {
  left: -340rem;
}
.page-gomibook .page-bulky-waste__tree--r {
  right: -210rem;
  transform: scaleX(-1);
}
.page-gomibook .page-bulky-waste__tree--r._pc {
  right: -340rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__tree {
    width: 70rem;
    bottom: -20rem;
  }
  .page-gomibook .page-bulky-waste__tree--l {
    left: -70rem;
  }
  .page-gomibook .page-bulky-waste__tree--r {
    right: -70rem;
  }
}
.page-gomibook .page-bulky-waste__bird {
  position: absolute;
  bottom: 120rem;
  right: -120rem;
  width: 90rem;
  height: auto;
  z-index: 0;
  animation: s4Bird 4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__bird {
    width: 50rem;
    bottom: 80rem;
    right: -40rem;
  }
}
.page-gomibook .page-bulky-waste__cloud {
  position: absolute;
  height: auto;
  z-index: 0;
  pointer-events: none;
  animation: s4CloudDrift 9s ease-in-out infinite;
}
.page-gomibook .page-bulky-waste__cloud--1 {
  width: 90rem;
  right: -230rem;
  bottom: 145rem;
  animation-duration: 9.5s;
  animation-delay: -1.5s;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__cloud--1 {
    width: 70rem;
    right: 5rem;
    bottom: 115rem;
  }
}
.page-gomibook .page-bulky-waste__cloud--2 {
  width: 100rem;
  left: -270rem;
  bottom: 150rem;
  animation-duration: 12s;
  animation-delay: -5s;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__cloud--2 {
    width: 80rem;
    left: -40rem;
    bottom: 120rem;
  }
}
.page-gomibook .page-bulky-waste__text {
  max-width: 780rem;
  margin: 0 auto 50rem;
  line-height: 2;
  font-size: 18rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__text {
    line-height: 1.6;
    font-weight: 500;
    font-size: 14rem;
  }
}
.page-gomibook .page-bulky-waste__grid {
  max-width: 1300rem;
  margin-inline: auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rem 20rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24rem 10rem;
  }
}
.page-gomibook .page-bulky-waste__cell {
  text-align: center;
}
.page-gomibook .page-bulky-waste__cell img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 14rem;
}
.page-gomibook .page-bulky-waste__cell span {
  display: block;
  font-size: 17rem;
  font-weight: 700;
  color: #231815;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__cell span {
    font-size: 13rem;
  }
}
.page-gomibook .page-bulky-waste__recycle {
  position: relative;
  max-width: 1300rem;
  margin: 220rem auto 0;
  background: #4fc2f1;
  border-radius: 40rem;
  padding: 90rem 40rem 40rem;
  border: 1px solid #555;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle {
    margin-top: 150rem;
    border-radius: 30rem;
    padding: 15rem 16rem 30rem;
  }
}
.page-gomibook .page-bulky-waste__recycle-head {
  position: absolute;
  top: -135rem;
  left: 50%;
  transform: translateX(-50%);
  width: 350rem;
  height: 180rem;
  background: #4fc2f1;
  border-radius: 180rem 180rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 34rem;
  border: 1px solid #555;
  border-bottom: none;
  z-index: 1;
}
.page-gomibook .page-bulky-waste__recycle-head::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 104%;
  bottom: -2rem;
  height: 47rem;
  background: #4fc2f1;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle-head {
    top: -100rem;
    width: 200rem;
    height: 100rem;
    border-radius: 100rem 100rem 0 0;
    padding-top: 20rem;
  }
  .page-gomibook .page-bulky-waste__recycle-head::after {
    height: 1rem;
  }
}
.page-gomibook .page-bulky-waste__recycle-ttl {
  margin: 0;
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle-ttl {
    font-size: 18rem;
    font-weight: bold;
  }
}
.page-gomibook .page-bulky-waste__recycle-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20rem;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20rem 6rem;
  }
}
.page-gomibook .page-bulky-waste__recycle-grid .page-bulky-waste__cell img {
  height: 200rem;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle-grid .page-bulky-waste__cell img {
    height: 90rem;
  }
}
.page-gomibook .page-bulky-waste__recycle-grid .page-bulky-waste__cell span {
  color: #231815;
}
.page-gomibook .page-bulky-waste__recycle-button {
  display: flex;
  align-items: center;
  gap: 20rem;
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin: 40rem auto 0;
  padding: 12rem 30rem 12rem 10rem;
  border-radius: 30rem;
  border: 1px solid #000;
  background: #ffd55d;
  font-weight: bold;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle-button {
    border-radius: 10rem;
    padding-block: 10rem;
    padding-left: 30rem;
    position: relative;
  }
}
.page-gomibook .page-bulky-waste__recycle-button p {
  width: 20rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-bulky-waste__recycle-button p {
    position: absolute;
    top: 5rem;
    left: 5rem;
  }
}
.page-gomibook .page-pickup-banner {
  max-width: 1500px;
  margin: 0px auto;
  padding-bottom: 150rem;
  padding-top: 120rem;
  background-color: #fcf9f2;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-pickup-banner {
    padding: 90rem 15rem 20rem;
  }
}
.page-gomibook .page-pickup-banner__card {
  position: relative;
  background: #f3cd6d;
  border: 2rem solid #bfbfbf;
  border-radius: 28rem;
  text-align: center;
  padding: 70rem 60rem 90rem;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-pickup-banner__card {
    padding-inline: 30rem;
    border-radius: 20rem;
    padding-block: 60rem;
  }
}
.page-gomibook .page-pickup-banner__truck {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -60%);
  z-index: 2;
}
.page-gomibook .page-pickup-banner__truck img {
  width: 220rem;
  display: block;
  animation: carShake 0.5s infinite;
}
.page-gomibook .page-pickup-banner__title {
  margin: 0;
  font-size: 36rem;
  font-weight: 800;
  color: white;
  line-height: 1.3;
  -webkit-text-stroke: 1rem #333;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-pickup-banner__title {
    font-size: 20rem;
    -webkit-text-stroke: 1px #333;
  }
}
.page-gomibook .page-pickup-banner__text {
  margin-top: 10rem;
  font-size: 16rem;
  line-height: 1.8;
  color: #333;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-pickup-banner__text {
    font-size: 12rem;
    font-weight: 500;
  }
}
.page-gomibook .page-pickup-banner__button {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 300rem;
  height: 93rem;
  background: url("../img/top/read_more.webp") center/100% 100% no-repeat;
  text-decoration: none;
  font-size: 22rem;
  font-weight: 700;
  color: #222;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .page-gomibook .page-pickup-banner__button {
    transform: scale(0.5) translate(-100%, 100%);
  }
}
.page-gomibook .page-pickup-banner__button span {
  transition: 0.3s;
}
.page-gomibook .page-pickup-banner__button:hover span {
  transform: translateX(8rem);
  transition: 0.3s;
}

@keyframes cloudMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes downMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(25%) translateY(20%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes truckMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes truckRattle {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-3rem);
  }
  30% {
    transform: translateY(2rem);
  }
  45% {
    transform: translateY(-2rem);
  }
  60% {
    transform: translateY(3rem);
  }
  75% {
    transform: translateY(-2rem);
  }
  90% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes flow_gallery_PC {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-3640rem);
  }
}
@keyframes flow_text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1380rem);
  }
}
@keyframes flowMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1560rem);
  }
}
@keyframes carShake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-2rem, 1rem) rotate(-1deg);
  }
  40% {
    transform: translate(2rem, -1rem) rotate(1deg);
  }
  60% {
    transform: translate(-2rem, 0) rotate(-1deg);
  }
  80% {
    transform: translate(2rem, 1rem) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.page-workbook {
  margin: auto;
  margin-bottom: 300rem;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .page-workbook {
    width: 100vw;
    margin-bottom: 0;
  }
}
.page-workbook-intro {
  padding-block: 200rem;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro {
    padding-top: 220rem;
    padding-bottom: 0;
  }
}
.page-workbook-intro--inner {
  width: 100%;
  margin-bottom: 150rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner {
    margin-bottom: 200rem;
  }
}
.page-workbook-intro--inner .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 600rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .content {
    width: 400rem;
  }
}
.page-workbook-intro--inner .content .catch-copy {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .content .catch-copy {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .content .hero-title {
    width: 70%;
  }
}
.page-workbook-intro--inner .content .text {
  width: 80%;
  font-size: 17.5rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .content .text {
    font-size: 13rem;
    font-weight: 500;
  }
}
.page-workbook-intro--inner .hero-img {
  width: 400rem;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .hero-img {
    width: 270rem;
  }
}
.page-workbook-intro--inner .hero-img .truck {
  position: absolute;
  width: 50%;
}
.page-workbook-intro--inner .hero-img.left-top {
  top: 0rem;
  left: -30rem;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .hero-img.left-top {
    top: -190rem;
    left: -70rem;
  }
}
.page-workbook-intro--inner .hero-img.left-top .truck {
  top: 40%;
  left: 30%;
  animation: truckRattle 1.2s infinite;
}
.page-workbook-intro--inner .hero-img.right-top {
  top: 100rem;
  right: 10rem;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .hero-img.right-top {
    top: -160rem;
    right: -100rem;
  }
}
.page-workbook-intro--inner .hero-img.right-top .truck {
  top: 30%;
  left: 40%;
  animation: truckRattle 1.21s infinite;
}
.page-workbook-intro--inner .hero-img.left-bottom {
  top: 400rem;
  left: 20rem;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .hero-img.left-bottom {
    top: 360rem;
    left: -60rem;
  }
}
.page-workbook-intro--inner .hero-img.left-bottom .truck {
  top: 40%;
  left: 30%;
  animation: truckRattle 1.25s infinite;
}
.page-workbook-intro--inner .hero-img.right-bottom {
  top: 400rem;
  right: 0rem;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .hero-img.right-bottom {
    top: 320rem;
    right: -80rem;
  }
}
.page-workbook-intro--inner .hero-img.right-bottom .truck {
  top: 44%;
  left: 33%;
  animation: truckRattle 1.3s infinite;
}
.page-workbook-intro--inner .ticket {
  position: absolute;
  width: 5%;
  top: -5%;
  right: 3%;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .ticket {
    width: 13%;
  }
}
.page-workbook-intro--inner .ticket p {
  position: absolute;
  top: 10%;
  right: 16%;
  width: 20rem;
  font-size: 17rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1.05em;
  text-align: center;
  transform: none;
}
.page-workbook-intro--inner .ticket p:nth-of-type(2) {
  right: 55%;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro--inner .ticket p {
    width: 14rem;
    font-size: 12rem;
  }
}
.page-workbook-intro .flow-images {
  width: 100%;
  overflow-x: clip;
  position: relative;
  display: flex;
  gap: 5rem;
}
.page-workbook-intro .flow-images .gallery {
  display: flex;
  gap: 15rem;
  animation: flow_gallery_PC 60s linear infinite;
}
.page-workbook-intro .flow-images .gallery figure {
  flex-shrink: 0;
  width: 400rem;
  height: 300rem;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro .flow-images .gallery figure {
    width: 210rem;
    height: 160rem;
  }
}
.page-workbook-intro .flow-images .gallery figure img {
  border-radius: 20rem;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 768px) {
  .page-workbook-intro .flow-images .gallery figure img {
    border-radius: 12rem;
  }
}
.page-workbook-intro .flow-images .wave-bg {
  max-width: unset;
  width: 110%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .page-workbook-intro .flow-images .wave-bg {
    width: 210%;
  }
}
.page-workbook .page-service h2.sec-title {
  font-size: 70rem;
  font-weight: 600;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  color: #54c3ef;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service h2.sec-title {
    font-size: 32rem;
    padding-top: 30rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.page-workbook .page-service .swiper {
  padding: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .swiper {
    padding: 0;
  }
}
.page-workbook .page-service .swiper-wrapper {
  display: flex;
}
.page-workbook .page-service .swiper-slide {
  transition: 0.5s;
  transform: scale(0.82);
  width: 460rem;
}
.page-workbook .page-service {
  /*--------------------------
    Card
    ---------------------------*/
}
.page-workbook .page-service .card {
  width: 100%;
  margin: auto;
  border: 1rem solid #bbb;
  border-radius: 12rem;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card {
    width: 80%;
  }
}
.page-workbook .page-service .card:hover .card-main .card-body .card-image img {
  transform: scale(1.5);
}
.page-workbook .page-service .card .card-main {
  display: grid;
  grid-template-columns: 80% 1fr;
  background: #48b8ea;
}
.page-workbook .page-service .card .card-main .card-body {
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 230rem;
}
.page-workbook .page-service .card .card-main .card-body .card-image {
  height: 370rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  overflow: clip;
  border-bottom-right-radius: 20rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card .card-main .card-body .card-image {
    height: 220rem;
  }
}
.page-workbook .page-service .card .card-main .card-body .card-image img {
  border-bottom-right-radius: 20rem;
  transition: transform 0.4s ease;
}
.page-workbook .page-service .card .card-main .card-body p {
  font-size: 18rem;
  line-height: 2;
  font-weight: 500;
  padding: 15rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card .card-main .card-body p {
    font-size: 13rem;
    font-weight: 500;
    padding: 15rem;
  }
}
.page-workbook .page-service .card .card-main .card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 44rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card .card-main .card-title {
    font-size: 32rem;
  }
}
.page-workbook .page-service .card .card-main .card-title .number {
  width: 100%;
  padding: 20rem 10rem;
  border-bottom: 1rem solid #333;
  line-height: 1.1em;
}
.page-workbook .page-service .card .card-main .card-title h3 {
  writing-mode: vertical-rl;
  font-size: 36rem;
  color: #fff;
  line-height: 1.2;
  padding: 20rem 10rem;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card .card-main .card-title h3 {
    font-size: 28rem;
  }
}
.page-workbook .page-service .card {
  /*--------------------------
        More
      ---------------------------*/
}
.page-workbook .page-service .card .more {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #000;
  font-size: 24rem;
  font-weight: bold;
  padding-block: 30rem;
  margin-right: 10rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card .more {
    font-size: 14rem;
    padding-block: 10rem;
  }
}
.page-workbook .page-service .card .more:hover span {
  transform: translateX(10rem);
  transition: 0.3s;
}
.page-workbook .page-service .card .more img {
  width: 110rem;
  position: absolute;
  top: -7%;
  left: 70%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .card .more img {
    width: 50rem;
    top: -37%;
  }
}
.page-workbook .page-service .service-prev,
.page-workbook .page-service .service-next {
  position: absolute;
  top: 45%;
  width: 76rem;
  height: 76rem;
  border-radius: 50%;
  background: #fff;
  border: 1rem solid #333;
  cursor: pointer;
  z-index: 20;
  font-weight: bold;
}
.page-workbook .page-service .service-prev:hover,
.page-workbook .page-service .service-next:hover {
  background-color: #4db8e9;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .service-prev,
  .page-workbook .page-service .service-next {
    width: 42rem;
    height: 42rem;
  }
}
.page-workbook .page-service .service-prev {
  left: 32%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .service-prev {
    left: 3%;
  }
}
.page-workbook .page-service .service-next {
  right: 32%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .service-next {
    right: 3%;
  }
}
.page-workbook .page-service .flow-text {
  display: flex;
  align-items: center;
  gap: 50rem;
  animation: flow_text 20s linear infinite;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .flow-text {
    gap: 20rem;
    animation: flow_text 40s linear infinite;
  }
}
.page-workbook .page-service .flow-text span {
  flex-shrink: 0;
  font-size: 100rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  color: #54c3ef;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .flow-text span {
    font-size: 50rem;
  }
}
.page-workbook .page-service .flow-text div {
  flex-shrink: 0;
}
.page-workbook .page-service .flow-text div img {
  width: -moz-max-content;
  width: max-content;
  height: 140rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-service .flow-text div img {
    height: 60rem;
  }
}
.page-workbook .page-professional {
  width: min(1500rem, 90%);
  margin: auto;
  padding: 100rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional {
    padding: 20rem;
    width: 100%;
  }
}
.page-workbook .page-professional__title {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 60rem;
  padding: 18rem 48rem;
  border-radius: 999rem;
  background: #49b9ea;
  color: #fff;
  font-size: 40rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  paint-order: stroke fill;
  -webkit-text-stroke: 3rem #333;
  border: 1px solid #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional__title {
    padding: 6rem 14rem;
    font-size: 15rem;
    -webkit-text-stroke: 1rem #333;
    margin-bottom: 20rem;
  }
}
.page-workbook .page-professional__list {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}
.page-workbook .page-professional-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 55rem 80rem;
  border: 1rem solid #999;
  border-radius: 20rem;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional-card {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    padding: 35rem 25rem;
  }
}
.page-workbook .page-professional-card__content {
  width: 58%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional-card__content {
    width: 100%;
  }
}
.page-workbook .page-professional-card__content h3 {
  margin-bottom: 28rem;
  color: #4bb7ea;
  font-size: 44rem;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional-card__content h3 {
    font-size: 18rem;
    margin-bottom: 10rem;
    font-weight: bold;
  }
}
.page-workbook .page-professional-card__content p {
  font-size: 20rem;
  line-height: 2.2;
  color: #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional-card__content p {
    font-size: 13rem;
    line-height: 1.8;
  }
}
.page-workbook .page-professional-card__image {
  width: 32%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-professional-card__image {
    width: 60%;
  }
}
.page-workbook .page-professional-card__image img {
  width: 100%;
  display: block;
}
.page-workbook .page-vehicle {
  position: relative;
  width: min(1500rem, 90%);
  margin: 120rem auto;
  padding: 120rem 70rem 70rem;
  background: #fff;
  border: 1rem solid #999;
  border-radius: 40rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle {
    padding: 60rem 20rem 20rem;
    margin-bottom: 40rem;
  }
}
.page-workbook .page-vehicle__head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 300rem;
  height: 140rem;
  background: #fff;
  border: 1rem solid #999;
  border-bottom: none;
  border-radius: 150rem 150rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle__head {
    width: 180rem;
    height: 85rem;
    transform: translate(-50%, -99%);
  }
}
.page-workbook .page-vehicle__head p {
  font-size: 20rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle__head p {
    font-size: 14rem;
  }
}
.page-workbook .page-vehicle__head h2 {
  color: #4db8ea;
  font-size: 36rem;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle__head h2 {
    font-size: 22rem;
  }
}
.page-workbook .page-vehicle__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35rem 20rem;
  }
}
.page-workbook .page-vehicle {
  /*--------------------------
      Card
      --------------------------*/
}
.page-workbook .page-vehicle .page-vehicle-card {
  position: relative;
  padding: 25rem;
  border: 1rem solid #aaa;
  border-radius: 22rem;
  text-align: center;
  transition: 0.3s;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .page-vehicle-card {
    padding: 10rem;
  }
}
.page-workbook .page-vehicle .page-vehicle-card:hover img {
  animation: carShake 0.5s infinite;
}
.page-workbook .page-vehicle .page-vehicle-card img {
  width: 100%;
  height: 110rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 18rem;
}
.page-workbook .page-vehicle .page-vehicle-card h3 {
  font-size: 14rem;
  font-weight: bold;
  line-height: 1.05;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .page-vehicle-card h3 {
    font-size: 13rem;
  }
}
.page-workbook .page-vehicle .page-vehicle-card {
  /*--------------------------
        Plus Button
        --------------------------*/
}
.page-workbook .page-vehicle .page-vehicle-card .page-vehicle-card__plus {
  position: absolute;
  top: 12rem;
  right: 12rem;
  width: 28rem;
  height: 28rem;
  border: none;
  border-radius: 50%;
  background: #4db8ea;
  color: #fff;
  font-size: 28rem;
  line-height: 28rem;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .page-vehicle-card .page-vehicle-card__plus {
    font-size: 16rem;
    width: 14rem;
    height: 14rem;
    line-height: 1;
  }
}
.page-workbook .page-vehicle .popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  transition: all ease-in-out 0.5s;
}
.page-workbook .page-vehicle .popup.active {
  display: flex;
  transition: all ease-in-out 0.5s;
}
.page-workbook .page-vehicle .popup__content {
  position: relative;
  width: min(500rem, 90%);
  padding: 40rem;
  border-radius: 20rem;
  background: #fff;
  text-align: start;
  border-radius: 20rem;
  border: 5rem solid #54c3ef;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .popup__content {
    padding: 20rem;
    width: 250rem;
  }
}
.page-workbook .page-vehicle .popup__content img {
  width: 80%;
  margin: auto;
  margin-bottom: 30rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .popup__content img {
    width: 60%;
  }
}
.page-workbook .page-vehicle .popup__content h3 {
  font-size: 32rem;
  font-weight: 700;
  paint-order: stroke fill;
  -webkit-text-stroke: 1rem #333;
  margin-bottom: 20rem;
  color: #54c3ef;
  text-align: start;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .popup__content h3 {
    font-size: 16rem;
  }
}
.page-workbook .page-vehicle .popup__content p {
  font-size: 18rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .popup__content p {
    font-size: 12rem;
  }
}
.page-workbook .page-vehicle .popup__close {
  position: absolute;
  top: 15rem;
  right: 15rem;
  width: 40rem;
  height: 40rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24rem;
  transition: all ease-in-out 0.3s;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-vehicle .popup__close {
    width: 30rem;
    height: 30rem;
    font-size: 20rem;
  }
}
.page-workbook .page-oneday {
  /*-----------------------
    Hero
    -----------------------*/
}
.page-workbook .page-oneday .page-oneday__hero {
  position: relative;
}
.page-workbook .page-oneday .page-oneday__hero img {
  width: 100%;
  height: 520rem;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .page-oneday__hero img {
    height: 300rem;
    max-width: unset;
    width: 200%;
    -o-object-position: bottom;
       object-position: bottom;
  }
}
.page-workbook .page-oneday .page-oneday__title {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  width: 620rem;
  height: 310rem;
  background: #fbf9f4;
  border: 1rem solid #888;
  border-bottom: none;
  border-radius: 310rem 310rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .page-oneday__title {
    width: 100vw;
    height: 50vw;
    bottom: 0;
  }
}
.page-workbook .page-oneday .page-oneday__title p {
  font-size: 26rem;
  font-weight: bold;
  margin-bottom: 8rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .page-oneday__title p {
    font-size: 14rem;
  }
}
.page-workbook .page-oneday .page-oneday__title p.sub {
  margin-top: 12rem;
  font-size: 32rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .page-oneday__title p.sub {
    margin-top: 0rem;
    font-size: 16rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
  }
}
.page-workbook .page-oneday .page-oneday__title p.sub span {
  color: #54c3ef;
  font-size: 48rem;
  font-weight: 900;
}
.page-workbook .page-oneday .page-oneday__title h2 {
  font-size: 84rem;
  color: #45b8ea;
  font-weight: 700;
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: 3rem #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .page-oneday__title h2 {
    font-size: 52rem;
    -webkit-text-stroke: 2rem #333;
  }
}
.page-workbook .page-oneday {
  /*-----------------------
  Timeline
  -----------------------*/
}
.page-workbook .page-oneday .timeline {
  width: min(1500rem, 90%);
  margin: auto;
  margin-top: 100rem;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .timeline {
    margin-top: 0;
    width: 100%;
  }
}
.page-workbook .page-oneday {
  /* 固定時計 */
}
.page-workbook .page-oneday .clock {
  position: relative;
  margin: auto;
  margin-top: 50rem;
  width: 100rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #55b9eb;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .clock {
    margin-top: 25rem;
    width: 90rem;
  }
}
.page-workbook .page-oneday .clock__face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12rem;
  height: 12rem;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #333;
}
.page-workbook .page-oneday .clock__hour,
.page-workbook .page-oneday .clock__minute {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: #fff;
  border-radius: 10rem;
}
.page-workbook .page-oneday .clock__hour {
  width: 8rem;
  height: 35rem;
  transform: translateX(-50%) rotate(232.5deg);
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .clock__hour {
    width: 6rem;
    height: 30rem;
  }
}
.page-workbook .page-oneday .clock__minute {
  width: 4rem;
  height: 45rem;
  transform: translateX(-50%) rotate(270deg);
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .clock__minute {
    width: 3rem;
    height: 40rem;
  }
}
.page-workbook .page-oneday {
  /* 横スクロール */
}
.page-workbook .page-oneday .timeline__wrap {
  display: flex;
  gap: 50rem;
  padding: 60rem 80rem;
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .timeline__wrap {
    gap: 20rem;
    padding: 35rem 20rem;
    margin-top: 25rem;
  }
}
.page-workbook .page-oneday .timeline__wrap::-webkit-scrollbar {
  display: none;
}
.page-workbook .page-oneday {
  /* dotted line */
}
.page-workbook .page-oneday .timeline__wrap::before {
  content: "";
  position: absolute;
  left: 100rem;
  right: 100rem;
  top: 50%;
  border-top: 2rem dashed #cfcfcf;
}
.page-workbook .page-oneday {
  /*-----------------------
  Card
  -----------------------*/
}
.page-workbook .page-oneday .timeline-card {
  position: relative;
  flex-shrink: 0;
  width: 400rem;
  background: #fff;
  text-align: center;
  padding: 60rem 25rem 30rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .timeline-card {
    width: 260rem;
    padding: 40rem 18rem 24rem;
  }
}
.page-workbook .page-oneday .timeline-card img {
  width: 100%;
  height: 230rem;
  margin-bottom: 20rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .timeline-card img {
    height: auto;
  }
}
.page-workbook .page-oneday .timeline-card h3 {
  color: #45b8ea;
  font-size: 28rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 15rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .timeline-card h3 {
    font-size: 18rem;
    font-weight: 600;
  }
}
.page-workbook .page-oneday .timeline-card p {
  font-size: 14rem;
  font-weight: 500;
  text-align: start;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .timeline-card p {
    font-size: 13rem;
  }
}
.page-workbook .page-oneday {
  /*-----------------------
  Time
  -----------------------*/
}
.page-workbook .page-oneday .time {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  background: #45b8ea;
  color: #fff;
  font-weight: bold;
  font-size: 36rem;
  padding: 0rem 40rem;
  border-radius: 8rem;
  border: 1px solid #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-oneday .time {
    padding: 0rem 18rem;
  }
}
.page-workbook .page-oneday {
  /*-----------------------
  Arrow
  -----------------------*/
}
.page-workbook .page-oneday .timeline__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 55rem;
  height: 55rem;
  border: none;
  border-radius: 50%;
  background: #45b8ea;
  color: #fff;
  font-size: 25rem;
  cursor: pointer;
  z-index: 5;
}
.page-workbook .page-oneday .prev {
  left: 10rem;
}
.page-workbook .page-oneday .next {
  right: 10rem;
}
.page-workbook .page-dx {
  padding-bottom: 100rem;
  background-color: #fff;
  /*------------------------
    Hero
    -------------------------*/
}
.page-workbook .page-dx .dx__hero {
  position: relative;
}
.page-workbook .page-dx .dx__hero img {
  display: block;
  width: 100%;
  height: 500rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .dx__hero img {
    height: 250rem;
  }
}
.page-workbook .page-dx {
  /*------------------------
    Half Circle
    -------------------------*/
}
.page-workbook .page-dx .dx__title {
  position: absolute;
  left: 50%;
  bottom: -35rem;
  transform: translateX(-50%);
  width: 380rem;
  height: 180rem;
  background: #fff;
  border: 1rem solid #333;
  border-bottom: none;
  border-radius: 180rem 180rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .dx__title {
    width: 180rem;
    height: 85rem;
    bottom: -20rem;
  }
}
.page-workbook .page-dx .dx__title p {
  font-size: 48rem;
  font-weight: bold;
  color: #48b8ea;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .dx__title p {
    font-size: 22rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.page-workbook .page-dx {
  /*------------------------
   Background Text
  -------------------------*/
}
.page-workbook .page-dx .flow_dx {
  display: flex;
  gap: 30rem;
  animation: flowMove 10s linear infinite;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .flow_dx {
    animation: flowMove 30s linear infinite;
  }
}
.page-workbook .page-dx .flow_dx .dx__bg {
  padding-top: 50rem;
  display: flex;
  align-items: center;
  gap: 30rem;
  white-space: nowrap;
  background: #fff;
}
.page-workbook .page-dx .flow_dx .dx__bg span {
  font-size: 110rem;
  color: #fff;
  flex-shrink: 0;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .flow_dx .dx__bg span {
    font-size: 50rem;
  }
}
.page-workbook .page-dx .flow_dx .dx__bg img {
  width: 220rem;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .flow_dx .dx__bg img {
    width: 120rem;
  }
}
.page-workbook .page-dx {
  /*------------------------
   Contents
  -------------------------*/
}
.page-workbook .page-dx .dx__content {
  width: min(1500rem, 90%);
  margin: auto;
  margin-top: 70rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .dx__content {
    margin-top: 0;
    padding-inline: 20rem;
    width: 100%;
  }
}
.page-workbook .page-dx .dx__content h2 {
  margin-bottom: 35rem;
  color: #48b8ea;
  font-size: 48rem;
  font-weight: bold;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .dx__content h2 {
    font-size: 22rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.page-workbook .page-dx .dx__content p {
  width: min(820rem, 90%);
  margin: auto;
  font-size: 19rem;
  font-weight: 600;
  line-height: 1.8;
  color: #333;
  text-align: start;
  margin-bottom: 100rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .dx__content p {
    width: 100%;
    margin: 0;
    margin-bottom: 50rem;
    font-size: 14rem;
    font-weight: 500;
  }
}
.page-workbook .page-dx {
  /*=========================
      Top
      =========================*/
}
.page-workbook .page-dx .cloud-merit__top {
  width: min(1500rem, 90%);
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 70rem;
  margin-bottom: 90rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .cloud-merit__top {
    flex-direction: column;
    padding-inline: 20rem;
    width: 100%;
  }
}
.page-workbook .page-dx {
  /*=========================
    Left
    =========================*/
}
.page-workbook .page-dx .cloud-merit__content {
  width: 38%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .cloud-merit__content {
    width: 100%;
  }
}
.page-workbook .page-dx .cloud-merit__movie {
  width: 100%;
  aspect-ratio: 4/3;
  border: 1rem solid #888;
  border-radius: 18rem;
  background: #ddd;
  margin-bottom: 40rem;
}
.page-workbook .page-dx .cloud-merit__content h2 {
  display: inline-block;
  margin-bottom: 30rem;
  padding: 12rem 24rem;
  background: #49b9ea;
  color: #fff;
  font-size: 34rem;
  font-weight: bold;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  border: 1px solid #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .cloud-merit__content h2 {
    width: 100%;
    text-align: center;
    font-size: 16rem;
    padding: 5rem 14rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.page-workbook .page-dx .cloud-merit__content p {
  font-size: 18rem;
  line-height: 2.2;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .cloud-merit__content p {
    font-size: 14rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
.page-workbook .page-dx {
  /*=========================
      Right
    =========================*/
}
.page-workbook .page-dx .cloud-merit__image {
  position: relative;
  width: 58%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .cloud-merit__image {
    width: 100%;
  }
}
.page-workbook .page-dx .image-box {
  width: 100%;
  aspect-ratio: 4/3;
  background: #ddd;
  border: 1rem solid #888;
  border-radius: 18rem;
}
.page-workbook .page-dx .house {
  position: absolute;
  left: 16%;
  bottom: -7%;
  width: 30%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .house {
    width: 150rem;
    left: -2%;
    bottom: -16%;
  }
}
.page-workbook .page-dx .truck {
  position: absolute;
  right: 10%;
  bottom: -10%;
  width: 25%;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .truck {
    width: 150rem;
    right: -3%;
    bottom: -20%;
  }
}
.page-workbook .page-dx {
  /*=========================
    Title
    =========================*/
}
.page-workbook .page-dx .merit-title {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 80rem;
  padding: 14rem 40rem;
  background: #49b9ea;
  color: #fff;
  font-size: 30rem;
  font-weight: bold;
  paint-order: stroke fill;
  -webkit-text-stroke: 1rem #333;
  border: 1px solid #333;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .merit-title {
    padding: 10rem 28rem;
    font-size: 20rem;
  }
}
.page-workbook .page-dx {
  /*=========================
      Merits
      =========================*/
}
.page-workbook .page-dx .merit-list {
  width: min(1500rem, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .merit-list {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 20rem;
    gap: 50rem 15rem;
    width: 100%;
  }
}
.page-workbook .page-dx .merit-list .merit-card {
  position: relative;
  border: 1rem solid #bbb;
  padding: 60rem 20rem 35rem;
  text-align: center;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .merit-list .merit-card {
    padding: 40rem 10rem 15rem;
  }
}
.page-workbook .page-dx .merit-list .number {
  position: absolute;
  top: -46rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 85rem;
  height: 85rem;
  border-radius: 50%;
  background: #4fc2f1;
  border: 1rem solid #555;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 2rem #555;
  paint-order: stroke fill;
}
.page-workbook .page-dx .merit-list .number .num {
  font-size: 32rem;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .merit-list .number {
    width: 55rem;
    height: 55rem;
    font-size: 10rem;
    top: -35rem;
  }
  .page-workbook .page-dx .merit-list .number .num {
    font-size: 22rem;
  }
}
.page-workbook .page-dx .merit-list .merit-card h4 {
  color: #49b9ea;
  font-size: 26rem;
  line-height: 1.5;
  font-weight: 800;
}
@media screen and (max-width: 768px) {
  .page-workbook .page-dx .merit-list .merit-card h4 {
    font-size: 16rem;
  }
}

@keyframes cloudMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes downMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-15%) translateY(10%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes shake {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes walk {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8rem);
  }
}
@keyframes flow_text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.page-recruit {
  margin-bottom: 420rem;
}
@media screen and (max-width: 768px) {
  .page-recruit {
    width: 100vw;
    margin-bottom: 0;
  }
}
.page-recruit .flow-marquee {
  overflow: hidden;
  width: 100%;
  background: #fff;
  padding: 50rem 0;
}
.page-recruit .flow-text {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 50rem;
  padding-right: 50rem;
  animation: flow_text 20s linear infinite;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .page-recruit .flow-text {
    background-color: #fff;
    gap: 20rem;
    padding-right: 20rem;
    animation: flow_text 40s linear infinite;
  }
}
.page-recruit .flow-text span {
  flex-shrink: 0;
  font-size: 100rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  color: #54c3ef;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .page-recruit .flow-text span {
    font-size: 50rem;
  }
}
.page-recruit .flow-text div {
  flex-shrink: 0;
}
.page-recruit .flow-text div img {
  width: -moz-max-content;
  width: max-content;
  height: 140rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  .page-recruit .flow-text div img {
    height: 60rem;
  }
}
.page-recruit-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: clip;
  background-color: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero {
    height: 700rem;
  }
}
.page-recruit-hero .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.page-recruit-hero .hero-title h3 {
  font-size: 114rem;
  font-weight: bold;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  color: #54c3ef;
  width: 100%;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .hero-title h3 {
    font-size: 52rem;
    padding-top: 30rem;
    -webkit-text-stroke: 1rem #333;
  }
}
.page-recruit-hero .hero-title p {
  font-size: 32rem;
  font-weight: 600;
  color: #54c3ef;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .hero-title p {
    font-size: 18rem;
  }
}
.page-recruit-hero .road {
  width: 100%;
  transform: scaleX(-1.15);
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .road {
    max-width: unset;
    width: 150%;
    transform: scaleX(-1);
  }
}
.page-recruit-hero .cloud {
  width: 130rem;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .cloud {
    width: 70rem;
  }
}
.page-recruit-hero .cloud--1 {
  top: 7%;
  left: 11%;
  animation: cloudMove 5s infinite;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .cloud--1 {
    display: none;
  }
}
.page-recruit-hero .cloud--2 {
  top: 17%;
  right: 25%;
  animation: cloudMove 7s infinite;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .cloud--2 {
    z-index: 3;
    right: 45%;
  }
}
.page-recruit-hero .bird {
  width: 130rem;
  position: absolute;
  top: 17%;
  right: 11%;
  animation: cloudMove 4s infinite;
}
.page-recruit-hero .tree {
  width: 70rem;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .tree {
    width: 30rem;
  }
}
.page-recruit-hero .tree-1 {
  top: 20%;
  left: 14%;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .tree-1 {
    top: 23%;
    left: 18%;
  }
}
.page-recruit-hero .tree-2 {
  top: 20%;
  left: 9%;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .tree-2 {
    top: 23%;
    left: 10%;
  }
}
.page-recruit-hero .tree-3 {
  top: 20%;
  left: 4%;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .tree-3 {
    top: 23%;
    left: 2%;
  }
}
.page-recruit-hero .tree-4 {
  top: 67%;
  left: 44%;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .tree-4 {
    top: 57%;
    left: 64%;
  }
}
.page-recruit-hero .tree-5 {
  top: 68%;
  left: 49%;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .tree-5 {
    top: 57.5%;
    left: 72%;
  }
}
.page-recruit-hero .photo {
  width: 200rem;
  position: absolute;
  top: 50%;
  overflow: hidden;
}
.page-recruit-hero .photo img {
  border-radius: 10rem;
}
.page-recruit-hero .photo-1 {
  position: absolute;
  top: 9%;
  left: 26%;
  width: 270rem;
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .photo-1 {
    width: 120rem;
    top: 32%;
    left: 6%;
  }
}
.page-recruit-hero .photo-2 {
  position: absolute;
  top: 34%;
  left: 10%;
  width: 350rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit-hero .photo-2 {
    width: 280rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .photo-2 {
    width: 120rem;
    top: 54%;
    left: 1%;
  }
}
.page-recruit-hero .photo-3 {
  position: absolute;
  top: 60%;
  left: 18%;
  width: 450rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit-hero .photo-3 {
    width: 400rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .photo-3 {
    width: 300rem;
    top: 68%;
  }
}
.page-recruit-hero .photo-4 {
  position: absolute;
  top: 26%;
  right: -8%;
  width: 760rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit-hero .photo-4 {
    top: 26%;
    right: -14%;
    width: 660rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit-hero .photo-4 {
    top: -4%;
    right: -54%;
    width: 390rem;
  }
}
.page-recruit .page-message {
  position: relative;
  background-color: #fbf9f4;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message__inner {
    transform: translateY(210rem);
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message__inner {
    transform: unset;
  }
}
.page-recruit .page-message {
  /*====================
      Left
      ====================*/
}
.page-recruit .page-message__content {
  width: 43%;
  position: absolute;
  top: 0;
  left: 300rem;
  z-index: 10;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message__content {
    left: 150rem;
    width: 52%;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message__content {
    position: unset;
    width: 100%;
    left: 0;
    padding-inline: 30rem;
  }
}
.page-recruit .page-message__title {
  margin-bottom: 60rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message__title {
    margin-top: -80rem;
    margin-bottom: 30rem;
  }
}
.page-recruit .page-message__title span {
  display: inline-block;
  margin-bottom: 18rem;
  padding: 12rem 18rem;
  background: #47b9ea;
  color: #fff;
  font-size: 48rem;
  font-weight: bold;
  paint-order: stroke fill;
  line-height: 1;
  -webkit-text-stroke: 2rem #333;
  border: 1px solid #333;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message__title span {
    line-height: 1.5;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message__title span {
    padding: 10rem;
    font-size: 24rem;
    margin-bottom: 10rem;
  }
}
.page-recruit .page-message__content p {
  font-size: 24rem;
  font-weight: 500;
  line-height: 2.3;
  width: 730rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message__content p {
    font-size: 18rem;
    width: 630rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message__content p {
    width: 100%;
    font-size: 14rem;
  }
}
.page-recruit .page-message {
  /*====================
    Map
    ====================*/
}
.page-recruit .page-message__map {
  position: relative;
  width: 100%;
  min-height: 900rem;
}
.page-recruit .page-message .map {
  position: absolute;
  inset: 0;
  max-width: unset;
  width: 113vw;
  left: 50%;
  top: -15%;
  transform: translateX(-50%);
}
.page-recruit .page-message {
  /*====================
    Buildings
    ====================*/
}
.page-recruit .page-message .shop {
  position: absolute;
  width: 230rem;
  top: -10%;
  right: 30%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .shop {
    top: -12%;
    right: 32%;
  }
}
.page-recruit .page-message .house {
  position: absolute;
  width: 210rem;
}
.page-recruit .page-message .house01 {
  top: -10%;
  right: 19%;
  transform: scaleX(-1);
}
.page-recruit .page-message .house02 {
  top: -5%;
  right: 14%;
  transform: scaleX(-1);
}
.page-recruit .page-message .house03 {
  bottom: 30%;
  right: 19%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .house03 {
    bottom: 20%;
  }
}
.page-recruit .page-message .house04 {
  bottom: 27%;
  right: 25%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .house04 {
    bottom: 17%;
  }
}
.page-recruit .page-message .box {
  position: absolute;
  width: 60rem;
}
.page-recruit .page-message .box-1 {
  top: 7%;
  right: 26%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .box-1 {
    top: 5%;
  }
}
.page-recruit .page-message .box-2 {
  top: 8%;
  right: 28%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .box-2 {
    top: 6%;
    right: 29%;
  }
}
.page-recruit .page-message .box-3 {
  transform: scaleX(-1);
  bottom: 26%;
  right: 32%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .box-3 {
    bottom: 16%;
  }
}
.page-recruit .page-message .box-4 {
  transform: scaleX(-1);
  bottom: 25%;
  right: 34%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .box-4 {
    bottom: 15%;
  }
}
.page-recruit .page-message {
  /*====================
      Trees
    ====================*/
}
.page-recruit .page-message .tree {
  position: absolute;
  width: 160rem;
}
.page-recruit .page-message .tree--1 {
  top: 23%;
  right: 20%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .tree--1 {
    right: 27%;
  }
}
.page-recruit .page-message .tree--2 {
  top: 27%;
  right: 15%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .tree--2 {
    right: 20%;
  }
}
.page-recruit .page-message .tree--3 {
  top: 42%;
  right: 2%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .tree--3 {
    top: 53%;
  }
}
.page-recruit .page-message .tree--4 {
  top: 47%;
  right: 6%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .tree--4 {
    top: 59%;
  }
}
.page-recruit .page-message {
  /*====================
  Truck
  ====================*/
}
.page-recruit .page-message .truck {
  position: absolute;
  width: 200rem;
  transition: 0.4s;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .truck {
    width: 130rem;
  }
}
.page-recruit .page-message .truck-1 {
  top: -3%;
  right: 5%;
  animation: downMove 5s infinite;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .truck-1 {
    top: -1%;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .truck-1 {
    width: 100rem;
    top: 4.8%;
    right: 2%;
  }
}
.page-recruit .page-message .truck-2 {
  left: 70%;
  bottom: 16%;
  animation: downMove 4s infinite;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .truck-2 {
    left: 65%;
    bottom: 3%;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .truck-2 {
    left: 40%;
    bottom: 23%;
  }
}
.page-recruit .page-message .truck-3 {
  width: 230rem;
  left: 40%;
  bottom: 7%;
  animation: downMove 6s infinite;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .truck-3 {
    left: 40%;
    bottom: -3%;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .truck-3 {
    width: 110rem;
    left: 5%;
    bottom: 21.7%;
  }
}
.page-recruit .page-message {
  /*====================
      People
      ====================*/
}
.page-recruit .page-message .person {
  position: absolute;
  width: 110rem;
  animation: walk 2s ease-in-out infinite alternate;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .person {
    width: 50rem;
  }
}
.page-recruit .page-message .person01 {
  top: 3%;
  right: 18%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .person01 {
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .person01 {
    top: 4%;
    right: 53%;
  }
}
.page-recruit .page-message .person02 {
  top: -6%;
  right: 34%;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .person02 {
    top: 7%;
  }
}
.page-recruit .page-message .person03 {
  width: 96rem;
  bottom: 27%;
  right: 36%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .person03 {
    bottom: 19%;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .person03 {
    bottom: 27%;
    right: 50%;
    width: 50rem;
  }
}
.page-recruit .page-message .person04 {
  width: 80rem;
  bottom: 20%;
  right: 15%;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-message .person04 {
    bottom: 8%;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-message .person04 {
    width: 50rem;
    bottom: 25%;
    right: 10%;
  }
}
.page-recruit .page-message .truck-bg {
  width: 100%;
  margin-top: -20%;
}
.page-recruit .page-infrastructure {
  /*=========================
    Top
  =========================*/
}
.page-recruit .page-infrastructure__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__inner {
    flex-direction: column-reverse;
    gap: 35rem;
  }
}
.page-recruit .page-infrastructure__inner.left {
  padding-left: 300rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-infrastructure__inner.left {
    padding-left: 150rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__inner.left {
    padding-left: 0;
  }
}
.page-recruit .page-infrastructure__inner.right {
  padding-right: 300rem;
  flex-direction: row-reverse;
  -o-object-position: right;
     object-position: right;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-infrastructure__inner.right {
    padding-right: 150rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__inner.right {
    padding-right: 0;
    flex-direction: column-reverse;
  }
}
.page-recruit .page-infrastructure__inner.right img {
  transform: translateX(-34%);
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__inner.right img {
    transform: unset;
  }
}
.page-recruit .page-infrastructure__content {
  width: 42%;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__content {
    width: 100%;
    padding-inline: 30rem;
  }
}
.page-recruit .page-infrastructure__image {
  width: 58%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__image {
    width: 90%;
    align-self: flex-end;
  }
}
.page-recruit .page-infrastructure__image img {
  max-width: unset;
  width: 150%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 25rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure__image img {
    border-radius: 10rem;
  }
}
.page-recruit .page-infrastructure {
  /*=========================
  Title
  =========================*/
}
.page-recruit .page-infrastructure .section-title {
  display: inline-block;
  margin-bottom: 40rem;
  padding: 6rem 20rem;
  background: #39b3e6;
  color: #fff;
  font-size: 54rem;
  font-weight: bold;
  line-height: 1.5;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
  border: 1px solid #333;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-infrastructure .section-title {
    font-size: 58rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .section-title {
    font-size: 28rem;
    padding: 0rem 14rem;
    margin-bottom: 20rem;
  }
}
.page-recruit .page-infrastructure .section-title span {
  font-size: 44rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-infrastructure .section-title span {
    font-size: 40rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .section-title span {
    font-size: 20rem;
  }
}
.page-recruit .page-infrastructure .lead {
  line-height: 2.2;
  font-size: 17rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .lead {
    font-size: 13rem;
    font-weight: 500;
    line-height: 1.8;
  }
}
.page-recruit .page-infrastructure {
  /*=========================
  License
  =========================*/
}
.page-recruit .page-infrastructure .license {
  width: -moz-max-content;
  width: max-content;
  min-width: 60%;
  margin-top: 30rem;
  border: 1px solid #666;
  border-radius: 20rem;
  padding: 30rem 34rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .license {
    margin-top: 20rem;
    padding: 20rem;
  }
}
.page-recruit .page-infrastructure .license h3 {
  color: #4fc2f1;
  font-weight: 700;
  font-size: 20rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .license h3 {
    font-size: 16rem;
    margin-bottom: 0;
  }
}
.page-recruit .page-infrastructure .license ul {
  list-style: none;
}
.page-recruit .page-infrastructure .license li {
  position: relative;
  padding-left: 1.2em;
  font-size: 16rem;
  line-height: 1.9;
  font-weight: 500;
}
.page-recruit .page-infrastructure .license li::before {
  content: "・";
  position: absolute;
  left: 0;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .license li {
    font-size: 13rem;
    margin-bottom: 0;
  }
}
.page-recruit .page-infrastructure {
  /*=========================
  Interview
  =========================*/
}
.page-recruit .page-infrastructure .interview {
  margin-top: 120rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-left: 120rem;
  margin-bottom: 120rem;
  padding-inline: 300rem;
}
@media screen and (max-width: 1500px) {
  .page-recruit .page-infrastructure .interview {
    padding-inline: 150rem;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview {
    padding: 30rem;
    margin-top: 0;
    margin-bottom: 60rem;
  }
}
.page-recruit .page-infrastructure .interview.right {
  flex-direction: row-reverse;
}
.page-recruit .page-infrastructure .interview.right img {
  right: unset;
  left: 1%;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview.right img {
    width: 50rem;
  }
}
.page-recruit .page-infrastructure .interview.right .interview__balloon {
  background: url(../img/recruit/message_box-right.webp) no-repeat;
  background-size: contain;
  background-position-x: right;
  padding: 45rem 170rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview.right .interview__balloon {
    padding: 30rem;
    background: #1cbaed;
  }
}
.page-recruit .page-infrastructure .interview__staff {
  width: 10%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview__staff {
    position: absolute;
    width: 65rem;
    bottom: 0%;
    right: 5%;
  }
}
.page-recruit .page-infrastructure {
  /*=========================
  Balloon
  =========================*/
}
.page-recruit .page-infrastructure .interview__balloon {
  position: relative;
  width: 85%;
  background: url(../img/recruit/message_box.webp) no-repeat;
  background-size: 100% 100%;
  padding: 45rem 170rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview__balloon {
    width: 100%;
    background: #1cbaed;
    border-radius: 30rem;
    padding: 30rem 10rem;
  }
}
.page-recruit .page-infrastructure .interview__balloon h3 {
  margin-bottom: 25rem;
  color: #f3cd6d;
  font-size: 22rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview__balloon h3 {
    font-size: 14rem;
    margin-bottom: 10rem;
  }
}
.page-recruit .page-infrastructure .interview__balloon p {
  line-height: 2.2;
  font-size: 17rem;
  color: #fff;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-infrastructure .interview__balloon p {
    font-size: 12rem;
  }
}
.page-recruit .page-interview {
  padding: 0;
}
.page-recruit .page-interview .page-interview__inner {
  position: relative;
  margin: auto;
  padding: 90rem 0 120rem;
  background: #34b5e9;
  border-radius: 45rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview__inner {
    padding: 50rem 20rem 50rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.page-recruit .page-interview {
  /*======================
  Title
  =======================*/
}
.page-recruit .page-interview .page-interview__title {
  color: #fff;
  text-align: center;
  font-size: 90rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  paint-order: stroke fill;
  -webkit-text-stroke: 2rem #333;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview__title {
    font-size: 42rem;
    font-weight: 600;
  }
}
.page-recruit .page-interview .page-interview__title span {
  display: block;
  margin-top: 15rem;
  font-size: 36rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview__title span {
    font-size: 18rem;
  }
}
.page-recruit .page-interview {
  /*======================
  Question
  =======================*/
}
.page-recruit .page-interview .page-interview__question {
  width: -moz-fit-content;
  width: fit-content;
  margin: 45rem auto 20rem;
  padding: 25rem 30rem 25rem 60rem;
  background: url(../img/recruit/interview-y.webp) no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 38rem;
  font-weight: 900;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview__question {
    font-size: 15rem;
    background-size: 100% 100%;
    padding: 10rem;
    padding-left: 30rem;
  }
}
.page-recruit .page-interview .page-interview__sub {
  color: #f3cd6d;
  text-align: center;
  font-size: 28rem;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview__sub {
    font-size: 14rem;
  }
}
.page-recruit .page-interview {
  /*======================
    Swipe
    =======================*/
}
.page-recruit .page-interview .swiper {
  margin-top: 50rem;
}
.page-recruit .page-interview .circle {
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: #34b5e9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rem;
}
.page-recruit .page-interview .swiper-slide {
  width: 70%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30rem;
  overflow: visible;
}
.page-recruit .page-interview .swiper-slide::before {
  content: "";
  flex-shrink: 0;
  width: 82rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .swiper-slide::before {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .swiper-slide {
    width: 100%;
    gap: 20rem;
  }
}
.page-recruit .page-interview {
  /*======================
    Navigation
  =======================*/
}
.page-recruit .page-interview .nav-prev,
.page-recruit .page-interview .nav-next {
  position: absolute;
  z-index: 3;
  top: 258rem;
  width: 78rem;
  height: 78rem;
  padding: 0;
  border: none;
  font-size: 0;
  cursor: pointer;
  background: url("../img/recruit/interview_arrow.webp") no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .nav-prev,
  .page-recruit .page-interview .nav-next {
    top: unset;
    width: 55rem;
    height: 55rem;
  }
}
.page-recruit .page-interview .nav-prev:hover,
.page-recruit .page-interview .nav-next:hover {
  background-image: url("../img/recruit/interview_arrow_on.webp");
}
.page-recruit .page-interview .nav-prev {
  left: 288rem;
  transform: scaleX(-1);
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .nav-prev {
    left: unset;
    right: 10rem;
    bottom: 0;
  }
}
.page-recruit .page-interview .nav-next {
  right: 288rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .nav-next {
    right: 10rem;
    bottom: 70rem;
  }
}
.page-recruit .page-interview {
  /*======================
    Employee
  =======================*/
}
.page-recruit .page-interview .employee {
  flex-shrink: 0;
  width: 82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .employee {
    width: 60rem;
  }
}
.page-recruit .page-interview .employee figure {
  flex-shrink: 0;
  width: 72rem;
  height: 72rem;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 12rem;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .employee figure {
    width: 52rem;
    height: 52rem;
    margin-bottom: 8rem;
  }
}
.page-recruit .page-interview .employee figure img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.page-recruit .page-interview .employee--left {
  left: 20rem;
}
.page-recruit .page-interview .employee--right {
  right: 20rem;
}
.page-recruit .page-interview .employee__info {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  font-size: 18rem;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .employee__info {
    font-size: 14rem;
  }
}
.page-recruit .page-interview {
  /*======================
  Card
  =======================*/
}
.page-recruit .page-interview .page-interview-card {
  flex: 1;
  min-width: 0;
  padding: 70rem;
  background: #fff;
  border-radius: 95rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview-card {
    padding: 30rem 18rem;
    border-radius: 40rem;
  }
}
.page-recruit .page-interview .page-interview-card::after {
  content: "";
  position: absolute;
  top: 55rem;
  width: 55rem;
  height: 50rem;
  background: #fff;
  right: -35rem;
  clip-path: polygon(0 0, 100% 5%, 0 100%);
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview-card::after {
    width: 25rem;
    height: 25rem;
    right: -20rem;
  }
}
.page-recruit .page-interview .page-interview-card h3 {
  color: #34b5e9;
  font-size: 32rem;
  font-weight: 800;
  margin-bottom: 30rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview-card h3 {
    font-size: 20rem;
    font-weight: 600;
    margin-bottom: 15rem;
  }
}
.page-recruit .page-interview .page-interview-card p {
  color: #34b5e9;
  font-weight: 500;
  line-height: 2.2;
  font-size: 18rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-interview .page-interview-card p {
    font-size: 14rem;
  }
}
.page-recruit .page-recruit-person {
  padding: 120rem 0;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person {
    padding: 60rem 0;
  }
}
.page-recruit .page-recruit-person__inner {
  max-width: 1400rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 70rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person__inner {
    flex-direction: column;
    gap: 30rem;
  }
}
.page-recruit .page-recruit-person {
  /*====================
      Left    
    ====================*/
}
.page-recruit .page-recruit-person__left {
  width: 540rem;
  flex-shrink: 0;
  text-align: center;
  position: sticky;
  top: 20rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person__left {
    position: unset;
    width: 100%;
  }
}
.page-recruit .page-recruit-person__left h2 {
  margin-bottom: 40rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person__left h2 {
    margin-bottom: 0;
  }
}
.page-recruit .page-recruit-person__left h2 span {
  display: block;
  color: #34b5e9;
  font-size: 60rem;
  font-weight: bold;
  line-height: 1.25;
  paint-order: stroke fill;
  -webkit-text-stroke: 1rem #333;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person__left h2 span {
    font-size: 38rem;
  }
}
.page-recruit .page-recruit-person__left figure {
  width: 460rem;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person__left figure {
    width: 80%;
  }
}
.page-recruit .page-recruit-person__left img {
  width: 100%;
  display: block;
}
.page-recruit .page-recruit-person {
  /*====================    Right    ====================*/
}
.page-recruit .page-recruit-person__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person__right {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-inline: 20rem;
    gap: 20rem 10rem;
  }
  .page-recruit .page-recruit-person__right figure {
    width: 90%;
    margin: auto;
  }
}
.page-recruit .page-recruit-person {
  /*====================    Speech    ====================*/
}
.page-recruit .page-recruit-person .speech {
  position: relative;
  padding: 24rem 45rem;
  width: 100%;
  background: url(../img/recruit/interview-b.webp) no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 24rem;
  font-weight: bold;
  line-height: 3;
  text-align: center;
  transition: 0.35s;
  cursor: default;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruit-person .speech {
    padding: 10rem;
    font-size: 14rem;
    line-height: 1.8;
    width: calc(50% - 5rem);
    background-size: 100% 100%;
    background: #34b5e9;
    border-radius: 50rem;
  }
  .page-recruit .page-recruit-person .speech::after {
    content: "";
    position: absolute;
    bottom: -10rem;
    width: 35rem;
    height: 15rem;
    background: #34b5e9;
    left: 30rem;
    clip-path: polygon(10% 0, 100% 0%, 0% 100%);
  }
  .page-recruit .page-recruit-person .speech.w-100 {
    width: 100%;
  }
  .page-recruit .page-recruit-person .speech.r-bg {
    background-size: 100% 100%;
  }
  .page-recruit .page-recruit-person .speech.r-bg::after {
    bottom: unset;
    top: -10rem;
    clip-path: polygon(0% 0%, 10% 100%, 100% 100%);
  }
}
.page-recruit .page-recruit-person .speech:hover::before {
  border-right-color: #28a6d8;
}
.page-recruit .page-recruitment {
  padding-bottom: 120rem;
  padding-inline: 20rem;
  position: relative;
  z-index: 1;
}
.page-recruit .page-recruitment.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment {
    padding-bottom: 60rem;
  }
}
.page-recruit .page-recruitment__inner {
  position: relative;
  max-width: 1200rem;
  margin: 0rem auto 0;
  padding-top: 120rem;
}
.page-recruit .page-recruitment__inner::before {
  content: "";
  position: absolute;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 340rem;
  height: 180rem;
  background: #fbf9f4;
  border: 1rem solid #777;
  border-radius: 180rem 180rem 0 0/180rem 180rem 0 0;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__inner::before {
    width: 200rem;
    height: 108rem;
    border-radius: 108rem 108rem 0 0/108rem 108rem 0 0;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__inner {
    padding-top: 70rem;
  }
}
.page-recruit .page-recruitment__title {
  position: absolute;
  top: 100rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 335rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 28rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #231815;
  pointer-events: none;
  border-radius: 50%;
  background: #fbf9f4;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__title {
    width: 195rem;
    font-size: 20rem;
    top: 55rem;
  }
}
.page-recruit .page-recruitment__box {
  position: relative;
  z-index: 2;
  background-color: #fbf9f4;
  border: 1rem solid #777;
  border-radius: 60rem;
  padding: 0rem 80rem 80rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__box {
    padding: 0rem 20rem 80rem;
    border-radius: 20rem;
  }
}
.page-recruit .page-recruitment__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #31b5e9;
  color: #fff;
  font-size: 24rem;
  font-weight: bold;
  padding: 10rem 55rem;
  border-radius: 999rem;
  border: 1rem solid #777;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__label {
    padding: 0rem 25rem;
    font-size: 20rem;
  }
}
.page-recruit .page-recruitment .table-box {
  margin-top: 100rem;
  width: 100%;
  padding: 100rem;
  background-color: #fff;
  border-radius: 30rem;
  border: 1px solid #333;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment .table-box {
    margin-top: 60rem;
    padding: 20rem;
    padding-top: 40rem;
  }
}
.page-recruit .page-recruitment__table {
  width: 100%;
  border-collapse: collapse;
}
.page-recruit .page-recruitment__table th,
.page-recruit .page-recruitment__table td {
  padding: 24rem 0;
  border-top: 2rem solid #cfcfcf;
  vertical-align: top;
  font-size: 20rem;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__table th,
  .page-recruit .page-recruitment__table td {
    font-size: 12rem;
  }
}
.page-recruit .page-recruitment__table .space {
  width: 50rem;
  border: none !important;
}
.page-recruit .page-recruitment__table tr:last-child th,
.page-recruit .page-recruitment__table tr:last-child td {
  border-bottom: 1rem solid #cfcfcf;
}
.page-recruit .page-recruitment__table th {
  width: 180rem;
  text-align: left;
  font-weight: 700;
  padding-right: 40rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__table th {
    width: 100rem;
  }
}
.page-recruit .page-recruitment__table td {
  padding-left: 40rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .page-recruitment__table td {
    padding-left: 0;
  }
}
.page-recruit .page-recruitment__table ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-recruit .page-recruitment__table ul li {
  margin-bottom: 12rem;
}
.page-recruit .page-recruitment__table ul li::before {
  content: "・";
}
.page-recruit .sec-contact {
  position: relative;
  z-index: 2;
  box-shadow: 0 -24rem 50rem rgba(0, 0, 0, 0.06);
  border-radius: 30rem;
  border: 1px solid #333;
  width: min(1500px, 90%);
  margin: auto;
  background-color: #fbf9f4;
  padding-top: 120rem;
  padding-bottom: 100rem;
  margin-bottom: 100rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .sec-contact {
    width: 100%;
    padding-top: 50rem;
  }
}
.page-recruit .sec-contact__heading {
  margin-bottom: 25rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .sec-contact__heading {
    margin-bottom: 0;
  }
}
.page-recruit .sec-contact__title {
  color: #f2cc72;
  font-weight: bold;
}
.page-recruit .sec-contact__sub {
  color: #f2cc72;
  margin-top: 0;
}
.page-recruit .sec-contact__image {
  top: 0rem;
}
.page-recruit .sec-contact .footer__tel {
  background: #f2cc72;
  border: 2px solid #f2cc72;
}
.page-recruit .sec-contact .footer__tel:hover {
  background-color: #fff;
  color: #f2cc72;
}
.page-recruit .sec-contact .footer__tel:hover h4 {
  color: #f2cc72;
}
.page-recruit .sec-contact .footer__tel:hover strong {
  color: #f2cc72;
}
.page-recruit .sec-contact .footer__tel small {
  font-size: 16rem;
}
@media screen and (max-width: 768px) {
  .page-recruit .sec-contact .footer__tel small {
    font-size: 13rem;
  }
}
.page-recruit .sec-contact .footer__tel:hover small {
  color: #f2cc72;
}
.page-recruit .sec-contact__main {
  border: 2rem solid #f2cc72;
}
.page-recruit .sec-contact__main__title {
  color: #f2cc72;
}
.page-recruit .sec-contact__main .contact-step .is-active .contact-step__number {
  color: #f2cc72;
}
.page-recruit .sec-contact__main .contact-step .is-active .contact-step__label {
  background: #f2cc72;
}
.page-recruit .sec-contact__main .contact-form input {
  background-color: #fbf9f4;
}
.page-recruit .sec-contact__main .contact-form textarea {
  background-color: #fbf9f4;
}
.page-recruit .sec-contact__main .contact-form .contact-privacy {
  background-color: #fbf9f4;
}
.page-recruit .sec-contact__main .contact-form .contact-submit {
  background: #f2cc72;
}
.page-recruit .sec-contact__main .contact-form .contact-submit:hover {
  color: #f2cc72;
}/*# sourceMappingURL=style.css.map */