@charset "UTF-8";
/* リセット */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ol,
ul,
li,
figure,
dl,
dd,
dt,
hr,
table,
tr,
td,
th {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

:root {
  -webkit-text-size-adjust: 100%;
  font-size: 10px;
}
@media screen and (min-width: 1401px) {
  :root {
    font-size: calc(0.2857142857vw + 6px);
    font-size: min(0.2857142857vw + 6px, 1.5vh);
  }
}
@media screen and (min-width: 1025px) and (max-width: 1400px) {
  :root {
    font-size: min(0.7142857143vw, 1.5vh);
  }
}
@media screen and (max-width: 1024px) {
  :root {
    font-size: min(0.9765625vw, 1.5vh);
  }
}
@media screen and (max-width: 640px) {
  :root {
    font-size: 2.6666666667vw;
  }
}

body {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  word-break: break-all;
  font-size: 1.6rem;
  width: 100%;
}
@media screen and (max-width: 640px) {
  body {
    font-size: 1.2rem;
  }
}

a {
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}
a:hover {
  opacity: 0.7;
}

.forPC {
  display: inline-block;
}
@media screen and (max-width: 640px) {
  .forPC {
    display: none;
  }
}

.forSP {
  display: none;
}
@media screen and (max-width: 640px) {
  .forSP {
    display: inline-block;
  }
}

.container {
  letter-spacing: 0.07em;
  overflow-x: hidden;
}
@media screen and (max-width: 640px) {
  .container {
    letter-spacing: 0;
  }
}

@-webkit-keyframes scrollSudgest {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
  }
  15%, 35% {
    opacity: 1;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  60%, 100% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
  }
}

@keyframes scrollSudgest {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
  }
  15%, 35% {
    opacity: 1;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  60%, 100% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
  }
}
.mv {
  position: relative;
  background-color: #92d0dc;
}
@media screen and (max-width: 640px) {
  .mv {
    padding-top: 18rem;
    min-height: 100vh;
  }
  .mv::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: min(20rem, 100vh - 60rem);
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), color-stop(90%, #fff));
    background: linear-gradient(180deg, #e3e3e3 0%, #fff 90%);
    z-index: 0;
  }
}
.mv__catch {
  text-align: center;
  position: absolute;
  width: 37.8571428571vw;
  top: max(18vh, 24rem);
  left: calc(53.5% - (37.8571428571vw * 0.5));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(100deg, #fff 75%, transparent 95%);
          mask-image: linear-gradient(100deg, #fff 75%, transparent 95%);
  -webkit-mask-size: 200% 200%;
          mask-size: 200% 200%;
  -webkit-mask-position: 200% 100%;
          mask-position: 200% 100%;
}
@media screen and (max-width: 640px) {
  .mv__catch {
    width: 80vw;
    left: 13vw;
    top: 50vw;
    z-index: 100;
  }
}
.mv__name {
  position: absolute;
  z-index: 10;
  top: max(16vh, 20rem);
  left: 0;
  opacity: 0;
}
@media screen and (max-width: 640px) {
  .mv__name {
    top: 10rem;
    -webkit-filter: opacity(0.15);
            filter: opacity(0.15);
  }
}
.mv__name img,
.mv__name svg {
  display: block;
  max-height: 65vh;
  max-width: 30vw;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left top;
     object-position: left top;
  aspect-ratio: 420/504;
}
@media screen and (max-width: 640px) {
  .mv__name img,
.mv__name svg {
    max-width: 56vw;
  }
}
.mv__name .fill {
  display: block;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(100deg, #fff 75%, transparent 95%);
          mask-image: linear-gradient(100deg, #fff 75%, transparent 95%);
  -webkit-mask-size: 200% 200%;
          mask-size: 200% 200%;
  -webkit-mask-position: 200% 100%;
          mask-position: 200% 100%;
}
@media screen and (max-width: 640px) {
  .mv__name .fill {
    -webkit-mask-image: initial;
            mask-image: initial;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    opacity: 0;
  }
}
.mv__name .ol {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .mv__name .ol {
    stroke-width: 2;
  }
}
.mv__img {
  width: 100%;
  margin-top: min(10vh - 8.5vw, 0px);
  aspect-ratio: 2400/1677;
  position: relative;
}
@media screen and (max-width: 640px) {
  .mv__img {
    width: 190%;
    left: -45%;
  }
}
.mv__img span {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.mv__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mv__img .mvLayerGround {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.mv__sudgestscroll {
  position: absolute;
  top: calc(100vh - 6rem);
  top: min(calc(100vh - 6rem), 67.5vw);
  left: calc(50% - 4rem);
  width: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  flex-direction: column;
  z-index: 101;
  letter-spacing: 0.07em;
  opacity: 0;
}
@media screen and (max-width: 640px) {
  .mv__sudgestscroll {
    top: calc(100vh - 6rem);
    top: calc(100vh - 6rem);
    font-size: 1.2rem;
  }
}
.mv__sudgestscroll span {
  display: block;
  -webkit-animation: scrollSudgest 4s ease 0.1s infinite both;
          animation: scrollSudgest 4s ease 0.1s infinite both;
}
.mv__sudgestscroll img {
  max-width: 100%;
  display: block;
  -webkit-animation: scrollSudgest 4s ease infinite both;
          animation: scrollSudgest 4s ease infinite both;
}

.sec {
  position: relative;
}
.sec__heading {
  white-space: nowrap;
  top: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
  z-index: 20;
  -webkit-transform: translateZ(2px);
          transform: translateZ(2px);
  margin-bottom: 10rem;
  height: 15rem;
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width: 640px) {
  .sec__heading {
    height: 8rem;
    margin-bottom: 4rem;
  }
}
.sec__heading .scrolling-bg {
  position: absolute;
  left: 0;
  top: -0.85rem;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0;
}
.sec__heading .scrolling-bg span {
  display: inline-block;
  padding-right: 0.25em;
  font-size: 14.5rem;
  line-height: 15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 640px) {
  .sec__heading .scrolling-bg span {
    font-size: 7.8rem;
    line-height: 8rem;
  }
}
.sec__heading .ttl {
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  line-height: 15rem;
  font-weight: 700;
  text-indent: 0.5em;
  position: relative;
  z-index: 10;
  max-width: 120rem;
  width: calc(100% - 10rem);
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .sec__heading .ttl {
    line-height: 8rem;
    font-size: 2rem;
    width: calc(100% - 2rem);
  }
}

.lead {
  position: relative;
  z-index: 1;
  background-color: #e3e3e3;
  background-image: url(../images/about_bg_path.svg), url(../images/about_bg.svg);
  background-repeat: no-repeat;
  background-size: auto 100%, cover;
  background-position: top center;
  min-height: 75vh;
}
@media screen and (max-width: 640px) {
  .lead {
    background-color: #ebf5f6;
    background-image: url(../images/about_bg_path-sp.svg), url(../images/about_bg.svg);
  }
}
.lead .tree01,
.lead .tree02,
.lead .tree03 {
  position: absolute;
  opacity: 0.5;
}
.lead .tree01 {
  width: 32rem;
  top: 12.5rem;
  right: -15rem;
}
@media screen and (max-width: 640px) {
  .lead .tree01 {
    width: 16rem;
    top: 2.5rem;
    right: 0;
  }
}
.lead .tree01 .birds01 img {
  position: absolute;
}
.lead .tree01 .birds01 img:nth-child(1) {
  top: -15rem;
  left: 15rem;
}
.lead .tree01 .birds01 img:nth-child(2) {
  top: -1rem;
  left: -10rem;
}
.lead .tree01 .birds01 img:nth-child(3) {
  top: 8rem;
  left: -20rem;
}
.lead .tree01 .birds01 img:nth-child(4) {
  top: 12rem;
  left: -14rem;
}
.lead .tree02 {
  width: 39.6rem;
  left: 0rem;
  bottom: -10rem;
}
@media screen and (max-width: 640px) {
  .lead .tree02 {
    left: -5rem;
    width: 19.8rem;
    bottom: -22rem;
  }
}
.lead .tree03 {
  width: 32.2rem;
  right: -10rem;
  bottom: 5rem;
}
@media screen and (max-width: 640px) {
  .lead .tree03 {
    width: 16.1rem;
    right: -5rem;
    bottom: 110vw;
  }
}
.lead .birds02 {
  position: absolute;
  width: 20rem;
  height: 20rem;
  bottom: 10rem;
  left: 10rem;
  opacity: 0.5;
}
.lead .birds02 img {
  position: absolute;
}
.lead .birds02 img:nth-child(1) {
  top: -4rem;
  left: 2rem;
}
.lead .birds02 img:nth-child(2) {
  top: 9rem;
  left: -6rem;
}
.lead .birds02 img:nth-child(3) {
  top: 8rem;
  left: -12rem;
}
.lead__inner {
  max-width: 118rem;
  width: calc(100% - 10rem);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
@media screen and (max-width: 640px) {
  .lead__inner {
    width: calc(100% - 4rem);
  }
}
.lead__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  position: relative;
  justify-content: space-between;
}
@media screen and (max-width: 640px) {
  .lead__block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
  }
}
.lead__block-illust {
  position: relative;
}
.lead__block-illust img:nth-child(n+2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lead__block-01 {
  margin-bottom: 6rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 640px) {
  .lead__block-01 {
    margin-bottom: 20rem;
  }
}
.lead__block-01__illust {
  width: 56rem;
  margin-top: 35rem;
}
@media screen and (max-width: 640px) {
  .lead__block-01__illust {
    width: 100%;
    margin-top: 60vw;
  }
}
.lead__block-01__catch {
  position: relative;
  width: 22.6rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
  line-height: 1.75;
  font-weight: 700;
  margin-left: 6rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 30rem;
  margin-right: 4rem;
}
@media screen and (max-width: 640px) {
  .lead__block-01__catch {
    margin: 6rem auto 0;
    width: 17.8rem;
  }
}
.lead__block-01__catch img {
  display: block;
  max-width: 100%;
}
.lead__block-01__catch span {
  display: block;
  white-space: nowrap;
  opacity: 0;
}
.lead__block-02 {
  padding-bottom: 12rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 640px) {
  .lead__block-02 {
    padding-bottom: 8rem;
  }
}
.lead__block-02__illust {
  width: 55.8rem;
  left: -12rem;
}
@media screen and (max-width: 640px) {
  .lead__block-02__illust {
    width: 100%;
    left: 0;
  }
}
.lead__block-02__catch {
  position: relative;
  width: 32.4rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
  line-height: 1.75;
  font-weight: 700;
  margin-top: 5rem;
  margin-left: 55rem;
  margin-bottom: -5rem;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .lead__block-02__catch {
    width: 25.3rem;
    margin: 0 auto 8rem;
  }
}
.lead__block-02__catch img {
  display: block;
  max-width: 100%;
}
.lead__block-02__catch span {
  display: block;
  white-space: nowrap;
  opacity: 0;
}
.lead__message {
  font-size: 2rem;
  line-height: 2;
  text-align: center;
}
.lead__message img {
  margin-bottom: 4.5rem;
}

img[src$="bird01.png"] {
  width: 12rem;
  display: block;
}
@media screen and (max-width: 640px) {
  img[src$="bird01.png"] {
    width: 4.8rem;
  }
}

img[src$="bird02.png"] {
  width: 8.95rem;
  display: block;
}
@media screen and (max-width: 640px) {
  img[src$="bird02.png"] {
    width: 3.58rem;
  }
}

img[src$="bird03.png"] {
  width: 6.65rem;
  display: block;
}
@media screen and (max-width: 640px) {
  img[src$="bird03.png"] {
    width: 2.66rem;
  }
}

img[src$="bird04.png"] {
  width: 5.75rem;
  display: block;
}
@media screen and (max-width: 640px) {
  img[src$="bird04.png"] {
    width: 2.3rem;
  }
}

.about {
  position: relative;
  padding-top: 30rem;
  z-index: 10;
  background: #caf0f1;
}
@media screen and (max-width: 640px) {
  .about__heading {
    margin-bottom: 22px;
  }
}
.about .aboutTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.about .aboutTop__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  max-width: 88rem;
  padding-top: 10rem;
  margin: 0 auto;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .about .aboutTop__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.about .aboutTop__desc {
  font-size: 2rem;
  letter-spacing: 0.23em;
  line-height: 2;
}
.about .aboutTop__fig {
  max-width: 23rem;
  width: 50vw;
}
@media screen and (max-width: 640px) {
  .about .aboutBottom {
    width: calc(100vw - 40px);
    padding-top: 42px;
    height: auto;
    padding-bottom: 44px;
    margin-top: -50px;
  }
}
@media screen and (max-width: 640px) {
  .about .aboutBottom__catch {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
}
.about .aboutBottom__desc {
  text-align: center;
  margin-top: 56px;
}
@media screen and (max-width: 640px) {
  .about .aboutBottom__desc {
    margin-top: 16px;
  }
}
.about .aboutBottom::after {
  content: "";
  display: block;
}

.service {
  position: relative;
  padding-top: 10rem;
  opacity: 0;
  will-change: opacity;
  -webkit-transition: opacity 800ms;
  transition: opacity 800ms;
  --bgColor: #caf0f1;
  z-index: 2;
}
.service:before {
  content: "";
  display: block;
  position: absolute;
  top: calc(30rem - 130vh);
  left: 0;
  z-index: -1;
  width: 100%;
  height: 130vh;
  pointer-events: none;
  background: #caf0f1;
  background: var(--bgColor);
}
@media screen and (max-width: 640px) {
  .service:before {
    top: calc(10rem - 100vh);
    height: calc(100vh + 30rem);
  }
}
.service::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#caf0f1));
  background: linear-gradient(#fff, #caf0f1);
}
.service__heading {
  margin-bottom: 0;
  position: relative;
  z-index: 100;
}
@media screen and (max-width: 640px) {
  .service__heading {
    padding-bottom: 25rem;
  }
}
.service__heading .scrolling-bg {
  -webkit-text-stroke: 2px #feffd5;
  color: transparent;
}

@-webkit-keyframes balloonPop {
  0% {
    -webkit-transform: translate(-50%, -75%) scale(0.85, 0.75);
            transform: translate(-50%, -75%) scale(0.85, 0.75);
    opacity: 0;
  }
  6% {
    -webkit-transform: translate(-50%, -100%) scale(1);
            transform: translate(-50%, -100%) scale(1);
    opacity: 1;
  }
  65% {
    -webkit-transform: translate(-50%, -100%) scale(1);
            transform: translate(-50%, -100%) scale(1);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(-50%, -125%) scale(1.1, 1.25);
            transform: translate(-50%, -125%) scale(1.1, 1.25);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes balloonPop {
  0% {
    -webkit-transform: translate(-50%, -75%) scale(0.85, 0.75);
            transform: translate(-50%, -75%) scale(0.85, 0.75);
    opacity: 0;
  }
  6% {
    -webkit-transform: translate(-50%, -100%) scale(1);
            transform: translate(-50%, -100%) scale(1);
    opacity: 1;
  }
  65% {
    -webkit-transform: translate(-50%, -100%) scale(1);
            transform: translate(-50%, -100%) scale(1);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(-50%, -125%) scale(1.1, 1.25);
            transform: translate(-50%, -125%) scale(1.1, 1.25);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes bound-anim {
  0%, 55%, 100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  10% {
    -webkit-transform: scale(1) translateY(-5%);
            transform: scale(1) translateY(-5%);
  }
  20% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
@keyframes bound-anim {
  0%, 55%, 100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  10% {
    -webkit-transform: scale(1) translateY(-5%);
            transform: scale(1) translateY(-5%);
  }
  20% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
.serviceTown {
  position: relative;
  width: 100%;
  z-index: 0;
  aspect-ratio: 4200/2893;
}
.serviceTown.freezoom {
  cursor: -webkit-grab;
  cursor: grab;
}
.serviceTown.freezoom .balloon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: balloonPop 8000ms var(--delay) ease both infinite;
          animation: balloonPop 8000ms var(--delay) ease both infinite;
}
.serviceTown.freezoom.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.serviceTown #serviceTownMap {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4200/2893;
}
.serviceTown .serviceTownMapOverlay {
  opacity: 0;
}
.serviceTown .color {
  z-index: 0;
  position: relative;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.serviceTown .ol {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.serviceTown .balloon {
  position: absolute;
  z-index: 100;
  display: none;
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  --y-adjust: 3%;
  --b-width: 26rem;
  white-space: nowrap;
  width: 26rem;
  width: var(--b-width);
  -webkit-filter: drop-shadow(1px 1px 1px rgba(8, 21, 21, 0.4)) drop-shadow(1px 1px 3px rgba(35, 94, 96, 0.3));
          filter: drop-shadow(1px 1px 1px rgba(8, 21, 21, 0.4)) drop-shadow(1px 1px 3px rgba(35, 94, 96, 0.3));
}
@media screen and (max-width: 640px) {
  .serviceTown .balloon {
    --y-adjust: 2.5%;
    width: calc(var(--b-width) * 0.75);
  }
}
.serviceTown .balloon01 {
  top: 54.5%;
  top: calc(54.5% + var(--y-adjust));
  left: 14.25%;
  --delay: 5805ms;
  --b-width: 21.6rem;
}
.serviceTown .balloon02 {
  top: 34.75%;
  top: calc(34.75% + var(--y-adjust));
  left: 26.5%;
  --delay: 5487ms;
  --b-width: 21.6rem;
}
.serviceTown .balloon03 {
  top: 49%;
  top: calc(49% + var(--y-adjust));
  left: 23%;
  --delay: 4043ms;
  --b-width: 21.7rem;
}
.serviceTown .balloon04 {
  top: 64%;
  top: calc(64% + var(--y-adjust));
  left: 17.75%;
  --delay: 7818ms;
  --b-width: 24.9rem;
}
.serviceTown .balloon05 {
  top: 74.75%;
  top: calc(74.75% + var(--y-adjust));
  left: 15.5%;
  --delay: 5598ms;
  --b-width: 24.9rem;
}
.serviceTown .balloon06 {
  top: 64%;
  top: calc(64% + var(--y-adjust));
  left: 38.5%;
  --delay: 3162ms;
  --b-width: 26.5rem;
}
.serviceTown .balloon07 {
  top: 37%;
  top: calc(37% + var(--y-adjust));
  left: 40.75%;
  --delay: 4257ms;
  --b-width: 21.6rem;
}
.serviceTown .balloon08 {
  top: 34.5%;
  top: calc(34.5% + var(--y-adjust));
  left: 53.45%;
  --delay: 1574ms;
  --b-width: 26.5rem;
}
.serviceTown .balloon09 {
  top: 53%;
  top: calc(53% + var(--y-adjust));
  left: 55.5%;
  --delay: 2701ms;
  --b-width: 17.7rem;
}
.serviceTown .balloon10 {
  top: 64.5%;
  top: calc(64.5% + var(--y-adjust));
  left: 48.5%;
  --delay: 7702ms;
  --b-width: 23.8rem;
}
.serviceTown .balloon11 {
  top: 79.5%;
  top: calc(79.5% + var(--y-adjust));
  left: 41.85%;
  --delay: 5113ms;
  --b-width: 25rem;
}
.serviceTown .balloon12 {
  top: 75%;
  top: calc(75% + var(--y-adjust));
  left: 54%;
  --delay: 378ms;
  --b-width: 23.8rem;
}
.serviceTown .balloon13 {
  top: 59.25%;
  top: calc(59.25% + var(--y-adjust));
  left: 63.75%;
  --delay: 7023ms;
  --b-width: 25.2rem;
}
.serviceTown .balloon14 {
  top: 73.25%;
  top: calc(73.25% + var(--y-adjust));
  left: 65.85%;
  --delay: 1795ms;
  --b-width: 21.9rem;
}
.serviceTown .balloon15 {
  top: 87.5%;
  top: calc(87.5% + var(--y-adjust));
  left: 69%;
  --delay: 3314ms;
  --b-width: 27.2rem;
}
.serviceTown .balloon16 {
  top: 65.6%;
  top: calc(65.6% + var(--y-adjust));
  left: 78.5%;
  --delay: 1258ms;
  --b-width: 17.7rem;
}
.serviceTown .balloon17 {
  top: 53%;
  top: calc(53% + var(--y-adjust));
  left: 88.65%;
  --delay: 2908ms;
  --b-width: 27.6rem;
}
.serviceTown .balloon18 {
  top: 45.5%;
  top: calc(45.5% + var(--y-adjust));
  left: 73%;
  --delay: 8124ms;
  --b-width: 26.5rem;
}
.serviceTown .balloon19 {
  top: 77%;
  top: calc(77% + var(--y-adjust));
  left: 94%;
  --delay: 2367ms;
  --b-width: 23.7rem;
}
.serviceTown .balloon20 {
  top: 58%;
  top: calc(58% + var(--y-adjust));
  left: 30.75%;
  --delay: 6720ms;
  --b-width: 24.9rem;
}
.serviceTown .balloon21 {
  top: 49.5%;
  top: calc(49.5% + var(--y-adjust));
  left: 45.5%;
  --delay: 7100ms;
  --b-width: 25.1rem;
}
.serviceTown .balloon22 {
  top: 30.5%;
  top: calc(30.5% + var(--y-adjust));
  left: 82.75%;
  --delay: 7456ms;
  --b-width: 23.6rem;
}
.serviceTown .balloon23 {
  top: 27.5%;
  top: calc(27.5% + var(--y-adjust));
  left: 90.35%;
  --delay: 6257ms;
  --b-width: 23.6rem;
}
.serviceTown__container {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
  background: #fff;
}
.serviceTown__btn {
  width: 15rem;
  height: 15rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 9999px;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #fff;
  background: #3fa7aa;
  border: none;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 700;
  z-index: 100;
  -webkit-box-shadow: 4px 1px 0 #bae4e5;
          box-shadow: 4px 1px 0 #bae4e5;
  padding-top: 1.25em;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  -webkit-animation: bound-anim 3s ease infinite both;
          animation: bound-anim 3s ease infinite both;
}
.serviceTown__btn small {
  font-size: 1rem;
  letter-spacing: 0.07em;
  margin-top: 1rem;
}
@media screen and (max-width: 640px) {
  .serviceTown__btn small {
    margin-top: 0.75rem;
  }
}
.serviceTown__btn:nth-child(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.serviceTown__btn:nth-child(3) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.serviceTown__btn:after {
  content: "";
  display: block;
  width: 0.8em;
  height: 0.8em;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-top: 0rem;
}
@media screen and (min-width: 641px) {
  .serviceTown__btn {
    -webkit-transition: ease 200ms;
    transition: ease 200ms;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  .serviceTown__btn:hover {
    background-color: white;
    color: #3fa7aa;
  }
}
@media screen and (max-width: 640px) {
  .serviceTown__btn {
    width: 28vw;
    height: 28vw;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
  }
}
.serviceTown__btn-container {
  position: absolute;
  top: 34rem;
  left: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  z-index: 1000;
}
@media screen and (max-width: 640px) {
  .serviceTown__btn-container {
    top: 20rem;
    left: 2rem;
    width: calc(100% - 4rem);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.serviceTown__zoom-control {
  position: absolute;
  bottom: 5rem;
  right: 5rem;
  z-index: 2000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 640px) {
  .serviceTown__zoom-control {
    bottom: 1rem;
    right: 1rem;
    border-radius: 1rem;
  }
}
.serviceTown__zoom-control .notation {
  position: absolute;
  letter-spacing: 0.05em;
  padding: 1em;
  border-radius: 1em;
  background: #fff;
  border: 3px solid #3fa7aa;
  z-index: 100;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  bottom: calc(100% + 2rem);
  left: 0%;
  width: 100%;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: bottom ease 200ms, opaccity ease 200ms;
  transition: bottom ease 200ms, opaccity ease 200ms;
  -webkit-animation: bound-anim 2s ease infinite both;
          animation: bound-anim 2s ease infinite both;
}
@media screen and (max-width: 640px) {
  .serviceTown__zoom-control .notation {
    font-size: 1.2rem;
    border-width: 2px;
    left: unset;
    right: calc(100% + 1rem);
    bottom: 0;
    width: 125%;
    padding: 0.5em;
    white-space: nowrap;
  }
}
.serviceTown__zoom-control .notation::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: #fff;
  position: absolute;
  top: calc(100% + 1px);
  left: calc(50% - 0.5em);
  -webkit-transform: translateY(-40%) rotate(135deg);
          transform: translateY(-40%) rotate(135deg);
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: #3fa7aa;
}
@media screen and (max-width: 640px) {
  .serviceTown__zoom-control .notation::after {
    border-width: 2px 0 0 2px;
    -webkit-transform: translateX(-40%) rotate(135deg);
            transform: translateX(-40%) rotate(135deg);
    top: calc(50% - 0.5em);
    left: calc(100% + 0px);
  }
}
.serviceTown__zoom-control button {
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: none;
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
}
.serviceTown__zoom-control button:nth-child(1) {
  border-radius: 1rem 0 0 1rem;
}
.serviceTown__zoom-control button:nth-child(1):disabled ~ .notation {
  opacity: 0;
  bottom: calc(100% + 0rem);
  pointer-events: none;
}
.serviceTown__zoom-control button:nth-child(2) {
  border-radius: 0 1rem 1rem 0;
  border-width: 2px 2px 2px 0;
}
.serviceTown__zoom-control button img {
  -webkit-transition: ease 200ms;
  transition: ease 200ms;
  height: 9rem;
}
@media screen and (max-width: 640px) {
  .serviceTown__zoom-control button img {
    height: 5rem;
  }
}
.serviceTown__zoom-control button:not(:disabled):hover img {
  opacity: 0.75;
}
.serviceTown__zoom-control button:disabled img {
  opacity: 0.25;
  -webkit-filter: saturate(0.1);
          filter: saturate(0.1);
}
.serviceTown__zoomout {
  position: absolute;
  width: 8rem;
  height: 8rem;
  z-index: 10001;
  border: none;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 100vmax;
  background: #3fa7aa;
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  .serviceTown__zoomout {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    width: 4.5rem;
    height: 4.5rem;
    background-color: transparent;
  }
}
.serviceTown__zoomout:before, .serviceTown__zoomout:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 4px;
  border-radius: 100vmax;
  background-color: #fff;
}
@media screen and (max-width: 640px) {
  .serviceTown__zoomout:before, .serviceTown__zoomout:after {
    background-color: #3fa7aa;
  }
}
.serviceTown__zoomout:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.serviceTown__zoomout:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.pointer {
  position: fixed;
  z-index: 100001;
  top: 50%;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  width: 14rem;
  height: 14rem;
  border-radius: 100vmax;
  background-color: #3fa7aa;
  font-weight: 700;
  line-height: 1.1;
  font-size: 2rem;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity ease 100ms, -webkit-transform ease 75ms;
  transition: opacity ease 100ms, -webkit-transform ease 75ms;
  transition: opacity ease 100ms, transform ease 75ms;
  transition: opacity ease 100ms, transform ease 75ms, -webkit-transform ease 75ms;
}
@media screen and (max-width: 640px) {
  .pointer {
    display: none !important;
  }
}
.pointer.is-active {
  opacity: 1;
}
.pointer.is-active.is-grabbing {
  opacity: 0.95;
  -webkit-transform: translate(-50%, -50%) scale(0.7);
          transform: translate(-50%, -50%) scale(0.7);
}
.pointer .arrows span {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  border-width: 2px 2px 0 0;
  border-color: #fff;
  border-style: solid;
}
.pointer .arrows span:nth-child(1) {
  top: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}
.pointer .arrows span:nth-child(2) {
  bottom: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(135deg);
          transform: translateX(-50%) rotate(135deg);
}
.pointer .arrows span:nth-child(3) {
  left: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-135deg);
          transform: translateY(-50%) rotate(-135deg);
}
.pointer .arrows span:nth-child(4) {
  right: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

.serviceDetail {
  position: absolute;
}
@media screen and (max-width: 640px) {
  .serviceDetail {
    bottom: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
    max-height: calc(100% - 38vh);
    height: calc(100% - 40svh);
    background-color: #fff;
    padding: 1rem 2rem 2rem;
    width: 100%;
    right: 0;
    border-radius: 3rem 3rem 0 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity ease 600ms, -webkit-transform ease 600ms;
    transition: opacity ease 600ms, -webkit-transform ease 600ms;
    transition: opacity ease 600ms, transform ease 600ms;
    transition: opacity ease 600ms, transform ease 600ms, -webkit-transform ease 600ms;
  }
  .serviceDetail.is-active {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
.serviceDetail .ttl {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5em;
  color: #3fa7aa;
}
.serviceDetail .desc {
  font-size: 1.4rem;
  font-size: min(1.4rem, 3.2vw);
  line-height: 1.8;
}
@media screen and (max-width: 640px) {
  .serviceDetail .desc {
    font-size: min(1.4rem, 3.2vw);
  }
}
@media screen and (max-width: 640px) {
  .serviceDetail .txt {
    max-height: 20vh;
    max-height: 20svh;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.serviceDetail figure {
  display: block;
  max-width: 82.5%;
  margin: 0 auto 1rem;
}
@media screen and (max-width: 640px) {
  .serviceDetail figure {
    max-width: 65%;
    margin-bottom: 0;
  }
}
.serviceDetail a {
  display: block;
  margin-top: 1em;
}

@media screen and (min-width: 641px) {
  #service01 {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    top: 0;
    background-image: url(../images/modalbg01.png);
    background-size: contain;
    width: 62vw;
    max-width: 75rem;
    height: auto;
    top: 52.5%;
    right: 40%;
    aspect-ratio: 758/563;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
  #service01 {
    right: 36%;
  }
}
@media screen and (min-width: 641px) {
  #service01 figure {
    display: none !important;
  }
}
@media screen and (min-width: 641px) {
  #service01 .txt {
    position: absolute;
    top: 47%;
    left: 8%;
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  #service01 .txt .desc {
    font-size: min(3vw, 1.4rem);
  }
}
@media screen and (min-width: 641px) {
  #service01 .serviceTown__zoomout {
    left: auto;
    right: 2.5%;
    top: 2.5%;
  }
}
@media screen and (min-width: 641px) {
  #service01.is-active {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
  }
  #service01.is-active .txt {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
  }
}
@media screen and (min-width: 641px) {
  #service02 {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    top: 0;
    background-image: url(../images/modalbg02.png);
    background-size: contain;
    width: calc(48vw - 5vh);
    max-width: 75rem;
    height: auto;
    top: 55%;
    left: 48%;
    aspect-ratio: 768/563;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
  }
  #service02 figure {
    display: none !important;
  }
  #service02 .txt {
    position: absolute;
    top: 56%;
    left: 7.5%;
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  #service02 .txt .desc {
    font-size: min(3vw, 1.4rem);
  }
  #service02 .serviceTown__zoomout {
    left: auto;
    right: 1rem;
    top: 0rem;
  }
  #service02.is-active {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
  }
  #service02.is-active .txt {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
  }
}
@media screen and (min-width: 641px) {
  #service03 {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    top: 0;
    background-image: url(../images/modalbg03.png);
    background-size: contain;
    width: calc(47.5vw);
    max-width: 60rem;
    height: auto;
    top: 50%;
    left: 50%;
    aspect-ratio: 667/638;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
  }
  #service03 figure {
    display: none !important;
  }
  #service03 .txt {
    position: absolute;
    top: 62%;
    left: 10%;
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, -webkit-transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms;
    transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  #service03 .txt .desc {
    font-size: min(3vw, 1.4rem);
  }
  #service03 .serviceTown__zoomout {
    left: auto;
    right: 1.5rem;
    top: 1.5rem;
  }
  #service03.is-active {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
  }
  #service03.is-active .txt {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
  }
}
@-webkit-keyframes bgmove1 {
  0% {
    -webkit-transform: rotate(0deg) translate(8%, 2%) rotate(0deg) scale(1);
            transform: rotate(0deg) translate(8%, 2%) rotate(0deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(2%, 8%) rotate(-180deg) scale(0.95);
            transform: rotate(180deg) translate(2%, 8%) rotate(-180deg) scale(0.95);
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(8%, 2%) rotate(-360deg) scale(1);
            transform: rotate(360deg) translate(8%, 2%) rotate(-360deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
}
@keyframes bgmove1 {
  0% {
    -webkit-transform: rotate(0deg) translate(8%, 2%) rotate(0deg) scale(1);
            transform: rotate(0deg) translate(8%, 2%) rotate(0deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(2%, 8%) rotate(-180deg) scale(0.95);
            transform: rotate(180deg) translate(2%, 8%) rotate(-180deg) scale(0.95);
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(8%, 2%) rotate(-360deg) scale(1);
            transform: rotate(360deg) translate(8%, 2%) rotate(-360deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
}
@-webkit-keyframes bgmove2 {
  0% {
    -webkit-transform: rotate(0deg) translate(-6%, 4%) rotate(0deg) scale(1);
            transform: rotate(0deg) translate(-6%, 4%) rotate(0deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(-4%, 6%) rotate(-180deg) scale(0.9);
            transform: rotate(180deg) translate(-4%, 6%) rotate(-180deg) scale(0.9);
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-6%, 4%) rotate(-360deg) scale(1);
            transform: rotate(360deg) translate(-6%, 4%) rotate(-360deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
}
@keyframes bgmove2 {
  0% {
    -webkit-transform: rotate(0deg) translate(-6%, 4%) rotate(0deg) scale(1);
            transform: rotate(0deg) translate(-6%, 4%) rotate(0deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(-4%, 6%) rotate(-180deg) scale(0.9);
            transform: rotate(180deg) translate(-4%, 6%) rotate(-180deg) scale(0.9);
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-6%, 4%) rotate(-360deg) scale(1);
            transform: rotate(360deg) translate(-6%, 4%) rotate(-360deg) scale(1);
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
}
.kanri-message-container {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: url(../images/thoughts-message-bg.svg), url(../images/kanri-philosophy-bg.svg), -webkit-gradient(linear, left top, left bottom, color-stop(30rem, #fff), color-stop(30rem, #dceff3), to(#dceff3));
  background: url(../images/thoughts-message-bg.svg), url(../images/kanri-philosophy-bg.svg), linear-gradient(#fff 30rem, #dceff3 30rem, #dceff3);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom, center top, top;
}
@media screen and (max-width: 640px) {
  .kanri-message-container {
    margin-top: 6rem;
    background: url(../images/thoughts-message-bg-sp.svg), url(../images/kanri-philosophy-bg-sp.svg), -webkit-gradient(linear, left top, left bottom, color-stop(30rem, #fff), color-stop(30rem, #dceff3), to(#dceff3));
    background: url(../images/thoughts-message-bg-sp.svg), url(../images/kanri-philosophy-bg-sp.svg), linear-gradient(#fff 30rem, #dceff3 30rem, #dceff3);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom, center top, top;
  }
}
.kanri-message-container .leaf {
  animation: snowFall 4s linear infinite reverse;
  border-radius: 100vmax;
  background-color: #fff;
  position: absolute;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  width: 6rem;
  -ms-flex-item-align: 6/5;
      -ms-grid-row-align: 6/5;
      align-self: 6/5;
  opacity: 0.6;
  mix-blend-mode: multiply;
}
.kanri-message-container .leaf:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/fallen-leaf.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-animation: rotation 4000ms linear infinite both;
          animation: rotation 4000ms linear infinite both;
  -webkit-animation-duration: var(--rotate-time, 4000ms);
          animation-duration: var(--rotate-time, 4000ms);
  -webkit-animation-delay: var(--rotate-delay, 2000ms);
          animation-delay: var(--rotate-delay, 2000ms);
}
@media screen and (max-width: 640px) {
  .kanri-message-container .leaf {
    -webkit-animation-name: snowFallSp;
            animation-name: snowFallSp;
  }
}

.kanri {
  padding: 20rem 0 5rem;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .kanri {
    padding-top: 8rem;
    padding-bottom: 0;
  }
}
.kanri__head {
  font-size: 2.8rem;
  font-size: min(2.8rem, 5vw);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 auto 0.8em;
  max-width: calc(100% - 4rem);
}
.kanri__inner {
  border-radius: 4rem;
  max-width: 100rem;
  width: calc(100% - 2rem);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  background: #fefff5;
  padding: 4rem 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: #3fa7aa 2rem 2rem 0;
          box-shadow: #3fa7aa 2rem 2rem 0;
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .kanri__inner {
    padding: 14rem 2rem 2rem;
    display: block;
    border-radius: 2rem;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.kanri__inner .fig {
  width: 45%;
  display: block;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .kanri__inner .fig {
    width: calc(100% - 10rem);
    position: absolute;
    top: 3rem;
    left: 5rem;
  }
}
.kanri__inner .desc {
  font-size: 1.4rem;
}
@media screen and (max-width: 640px) {
  .kanri__inner .desc {
    font-size: 3vw;
    letter-spacing: 0.1em;
  }
}
.kanri__inner .ttl {
  font-size: 3.2rem;
}
@media screen and (max-width: 640px) {
  .kanri__inner .ttl {
    font-size: 6vw;
    letter-spacing: 0.085em;
  }
}
.kanri__inner .txt {
  padding-top: 2rem;
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.kanri .circ {
  position: absolute;
}
.kanri .circ01 {
  top: -28%;
  left: 50%;
  -webkit-animation: bgmove2 15s linear -3s infinite both;
          animation: bgmove2 15s linear -3s infinite both;
}
.kanri .circ02 {
  top: 20%;
  left: -10%;
  -webkit-animation: bgmove1 20s linear -5s infinite both;
          animation: bgmove1 20s linear -5s infinite both;
}
@media screen and (max-width: 640px) {
  .kanri .circ02 {
    left: -20%;
  }
}
.kanri .circ03 {
  top: 50%;
  left: 80%;
  -webkit-animation: bgmove2 12s linear -1s infinite both;
          animation: bgmove2 12s linear -1s infinite both;
}
@media screen and (max-width: 640px) {
  .kanri .circ03 {
    top: 30%;
    left: 60%;
  }
}
@media screen and (min-width: 641px) {
  .kanri .btn {
    border-radius: 0.625rem;
    background-color: #3fa7aa;
    color: #fff;
    width: 22.5rem;
    max-width: 100%;
    height: 5.6rem;
    font-size: 1.4rem;
    font-weight: 700;
    -webkit-filter: drop-shadow(0.5rem 0.5rem 0 #6f7e8f);
            filter: drop-shadow(0.5rem 0.5rem 0 #6f7e8f);
    border: 3px solid #3fa7aa;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    letter-spacing: 0.1em;
    -webkit-transition: ease 200ms;
    transition: ease 200ms;
    will-change: transform, opacity, filter;
    padding: 1.25rem 1.25rem 1.25rem 0.9375rem;
  }
}
@media screen and (min-width: 641px) and (max-width: 640px) {
  .kanri .btn {
    width: 100%;
  }
}
@media screen and (min-width: 641px) {
  .kanri .btn::after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-image: url(../images/icon_external_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: ease 200ms;
    transition: ease 200ms;
    margin-left: 0.5em;
  }
}
@media screen and (min-width: 641px) {
  .kanri .btn:hover {
    opacity: 1;
    background-color: #fff;
    -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
    color: #000;
    -webkit-filter: drop-shadow(0.4rem 0.4rem 0 #6f7e8f);
            filter: drop-shadow(0.4rem 0.4rem 0 #6f7e8f);
  }
  .kanri .btn:hover::after {
    -webkit-filter: invert(1);
            filter: invert(1);
  }
}
@media screen and (max-width: 640px) {
  .kanri .btn {
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 700;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    color: #000;
    letter-spacing: 0.1em;
  }
  .kanri .btn::after {
    content: "";
    width: 0.8em;
    height: 0.65em;
    background-image: url(../images/double-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-bottom: -0.125em;
  }
}
@media screen and (min-width: 641px) {
  .kanri .btn-container {
    padding-top: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media screen and (max-width: 640px) {
  .kanri .btn-container {
    margin-top: 0.75rem;
    padding-top: 1rem;
    background: radial-gradient(#000 1px, transparent 1px, transparent 2px);
    background-size: 6px 6px;
    background-repeat: repeat-x;
    background-position: top -2px left;
  }
}
.kanri .tree {
  position: absolute;
  left: -16rem;
  top: 65%;
  width: 41.6rem;
}
@media screen and (max-width: 640px) {
  .kanri .tree {
    display: none;
  }
}

.pin-spacer {
  pointer-events: none;
}

.promise {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 10rem;
  min-height: 100vh;
}
.promise__heading {
  white-space: nowrap;
}
.promise__cont {
  padding-top: 10rem;
  margin-right: auto;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.promise__cont-bird01 {
  position: absolute;
  width: 37.7rem;
  height: 30rem;
  left: 20rem;
  bottom: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.promise__cont-bird01 img:nth-child(1) {
  margin: 0 auto -2rem;
}
.promise__cont-bird01 img:nth-child(2) {
  margin: 0 auto 2rem 2em;
}
.promise__cont-bird01 img:nth-child(3) {
  margin: 0 auto 0 0;
}
.promise__cont-bird01 img:nth-child(4) {
  margin: -2rem auto 0 14rem;
}
.promise__cont-bird02 {
  position: absolute;
  width: 35rem;
  height: 30rem;
  right: 0rem;
  top: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.promise__cont-bird02 img:nth-child(1) {
  margin: 0 auto 5rem 2rem;
}
.promise__cont-bird02 img:nth-child(2) {
  margin: 0 auto 0 0rem;
}
.promise__cont-bird02 img:nth-child(3) {
  margin: 1rem auto 0 6rem;
}
.promise__cont-bird02 img:nth-child(4) {
  margin: -2rem auto 0 15rem;
}
.promise__box {
  width: 80rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6rem;
}
.promise__ttl {
  font-size: 8rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #efefae;
  text-align: center;
}
.promise__item img {
  display: block;
  margin: -4rem auto 2rem;
  height: 4rem;
  position: relative;
  z-index: 1;
}
.promise__item-txt {
  font-size: 2rem;
  line-height: 2;
  text-align: center;
  position: relative;
  z-index: 1;
}

@-webkit-keyframes bdrs {
  0% {
    border-radius: 57% 43% 74% 26%/65% 49% 51% 35%;
  }
  25% {
    border-radius: 70% 30% 75% 25%/37% 57% 43% 63%;
  }
  50% {
    border-radius: 48% 52% 58% 42%/72% 25% 75% 28%;
  }
  70% {
    border-radius: 51% 49% 58% 42%/33% 66% 34% 67%;
  }
  100% {
    border-radius: 57% 43% 74% 26%/65% 49% 51% 35%;
  }
}

@keyframes bdrs {
  0% {
    border-radius: 57% 43% 74% 26%/65% 49% 51% 35%;
  }
  25% {
    border-radius: 70% 30% 75% 25%/37% 57% 43% 63%;
  }
  50% {
    border-radius: 48% 52% 58% 42%/72% 25% 75% 28%;
  }
  70% {
    border-radius: 51% 49% 58% 42%/33% 66% 34% 67%;
  }
  100% {
    border-radius: 57% 43% 74% 26%/65% 49% 51% 35%;
  }
}
.philosophy {
  width: 100%;
  margin: 6rem auto 0vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
  z-index: 100;
  position: relative;
}
@media screen and (max-width: 640px) {
  .philosophy {
    margin: 0;
    pointer-events: auto;
  }
}
.philosophy__header {
  margin-bottom: 4rem;
}
@media screen and (max-width: 640px) {
  .philosophy__header {
    margin-bottom: 4rem;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
    -webkit-transition: ease 800ms;
    transition: ease 800ms;
  }
  .philosophy__header.frame-in {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}
.philosophy__header .en {
  font-size: 7.6rem;
  font-size: min(7.6rem, 12vw);
  font-weight: 700;
  text-transform: uppercase;
  -webkit-text-stroke: #c4dfe2 2px;
  color: transparent;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 2rem;
}
.philosophy__header .jp {
  line-height: 1;
  font-weight: 800;
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
  letter-spacing: 0.1em;
}
.philosophy__inner {
  position: relative;
  width: calc(100% - 10rem);
  max-width: 110rem;
  padding: 8.5rem 0;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .philosophy__inner {
    width: calc(100% - 2rem);
    padding: 6rem 2rem 0;
  }
}
@media screen and (max-width: 640px) {
  .philosophy .philosophy__inner {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
    -webkit-transition: opacity ease 800ms, -webkit-transform ease 1200ms;
    transition: opacity ease 800ms, -webkit-transform ease 1200ms;
    transition: opacity ease 800ms, transform ease 1200ms;
    transition: opacity ease 800ms, transform ease 1200ms, -webkit-transform ease 1200ms;
  }
  .philosophy .philosophy__inner::before {
    -webkit-transition: -webkit-transform ease 2000ms;
    transition: -webkit-transform ease 2000ms;
    transition: transform ease 2000ms;
    transition: transform ease 2000ms, -webkit-transform ease 2000ms;
    -webkit-transform: translate(0rem, 3rem);
            transform: translate(0rem, 3rem);
  }
  .philosophy .philosophy__inner::after {
    -webkit-transition: -webkit-transform ease 1800ms;
    transition: -webkit-transform ease 1800ms;
    transition: transform ease 1800ms;
    transition: transform ease 1800ms, -webkit-transform ease 1800ms;
    -webkit-transform: translate(0, 2rem);
            transform: translate(0, 2rem);
  }
  .philosophy.frame-in .philosophy__inner {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  .philosophy.frame-in .philosophy__inner::before {
    -webkit-transform: translate(1rem, 2rem);
            transform: translate(1rem, 2rem);
  }
  .philosophy.frame-in .philosophy__inner::after {
    -webkit-transform: translate(0, 0rem);
            transform: translate(0, 0rem);
  }
}
.philosophy__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 4rem;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .philosophy__body {
    gap: 3rem;
  }
}
@media screen and (max-width: 640px) {
  .philosophy__body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
}
.philosophy .detail {
  -ms-flex-negative: 0.6;
      flex-shrink: 0.6;
  width: 47.5rem;
  max-width: 100%;
}
.philosophy .fig {
  position: relative;
  overflow: hidden;
  background: #fff;
  position: relative;
  border-radius: 57% 43% 74% 26%/65% 49% 51% 35%;
  -webkit-animation: bdrs 16s linear infinite both;
          animation: bdrs 16s linear infinite both;
  width: 60rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0.0001px);
          transform: translate3d(0, 0, 0.0001px);
}
@media screen and (max-width: 640px) {
  .philosophy .fig {
    width: 60vw;
    margin: 0 auto;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
    -webkit-transition: ease 800ms;
    transition: ease 800ms;
  }
  .philosophy .fig.frame-in {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}
.philosophy .fig img {
  display: block;
  max-width: 100%;
  position: relative;
  z-index: 10;
}
.philosophy .fig img:nth-child(n+2) {
  position: absolute;
  top: 0;
  left: 0;
}
.philosophy .fig img:nth-child(2) {
  z-index: 9;
}
.philosophy .fig__container {
  position: relative;
  right: -7.5rem;
  -ms-flex-negative: 0.55;
      flex-shrink: 0.55;
}
@media screen and (max-width: 640px) {
  .philosophy .fig__container {
    right: auto;
    padding-bottom: 10rem;
  }
}
.philosophy__catch {
  display: block;
  max-width: 39.5rem;
  z-index: 10;
  position: absolute;
  top: -5rem;
  right: 0;
}
@media screen and (max-width: 640px) {
  .philosophy__catch {
    position: absolute;
    bottom: 0;
    top: auto;
    width: 100%;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
    -webkit-transition: ease 800ms;
    transition: ease 800ms;
  }
  .philosophy__catch.frame-in {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}
.philosophy .txt {
  max-width: 100%;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.032em;
  position: relative;
}
@media screen and (max-width: 640px) {
  .philosophy .txt {
    width: 100%;
    height: auto;
    font-size: 1.4rem;
  }
  .philosophy .txt p {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
    -webkit-transition: ease 800ms;
    transition: ease 800ms;
  }
  .philosophy .txt.frame-in p {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
  .philosophy .txt.frame-in p:nth-child(1) {
    -webkit-transition-delay: 0ms;
            transition-delay: 0ms;
  }
  .philosophy .txt.frame-in p:nth-child(2) {
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
  }
  .philosophy .txt.frame-in p:nth-child(3) {
    -webkit-transition-delay: 200ms;
            transition-delay: 200ms;
  }
  .philosophy .txt.frame-in p:nth-child(4) {
    -webkit-transition-delay: 300ms;
            transition-delay: 300ms;
  }
  .philosophy .txt.frame-in p:nth-child(5) {
    -webkit-transition-delay: 400ms;
            transition-delay: 400ms;
  }
}
.philosophy .txt__inner {
  padding-top: 4rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 640px) {
  .philosophy .txt__inner {
    padding: 0;
  }
}
.philosophy .txt p {
  margin-bottom: 1em;
  line-height: 2;
}
@media screen and (max-width: 640px) {
  .philosophy .txt p {
    margin-bottom: 2em;
  }
}

.thought {
  position: relative;
  padding: 10rem 0 30rem;
  margin-bottom: 0;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .thought {
    padding: 8rem 0 22rem;
  }
}
.thought__inner {
  position: relative;
  max-width: 100rem;
  width: calc(100% - 10rem);
  margin: 0 auto;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .thought__inner {
    width: calc(100% - 4rem);
  }
}
.thought__header {
  margin-bottom: 7rem;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .thought__header {
    margin-bottom: 0;
  }
}
.thought__header .en {
  font-size: 7.6rem;
  font-size: min(7.6rem, 12vw);
  font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: #b7d1d6 2px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 2rem;
}
.thought__header .jp {
  line-height: 1;
  font-weight: 800;
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
}
.thought__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9rem;
}
@media screen and (max-width: 640px) {
  .thought__body {
    display: block;
  }
}
.thought__body figure {
  display: block;
  max-width: 100%;
  width: 40.7rem;
}
.thought__body figure svg {
  display: block;
  max-width: 100%;
}
@media screen and (max-width: 640px) {
  .thought__body figure svg {
    width: 60%;
    height: 22rem;
  }
}
.thought__body .desc {
  font-size: 1.8rem;
  letter-spacing: 0.07em;
  line-height: 2.1;
  font-weight: 800;
  color: #090405;
}
@media screen and (max-width: 640px) {
  .thought__body .desc {
    font-size: 1.4rem;
  }
}
.thought__body .words {
  color: #090405;
  font-size: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1.5rem 0;
  gap: 1rem;
}
@media screen and (max-width: 640px) {
  .thought__body .words {
    font-size: 2.4rem;
  }
}
.thought__body .words span {
  display: inline-block;
  letter-spacing: 0.1em;
  position: relative;
  position: relative;
  z-index: 1;
  opacity: 0;
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
  -webkit-transition: ease 400ms;
  transition: ease 400ms;
}
.thought__body .words span img {
  height: 4.3rem;
  max-width: unset;
  position: absolute;
  left: 47.5%;
  -webkit-transform: translateX(-55%);
          transform: translateX(-55%);
  z-index: -1;
  top: 38%;
  -webkit-clip-path: inset(0% 100% 0% 0%);
          clip-path: inset(0% 100% 0% 0%);
  -webkit-transition: ease 800ms;
  transition: ease 800ms;
}
.thought__body .words i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: ease 0.4s;
  transition: ease 0.4s;
}
.thought__body .words.frame-in span {
  opacity: 1;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
}
.thought__body .words.frame-in span img {
  -webkit-clip-path: inset(0% 0% 0% 0%);
          clip-path: inset(0% 0% 0% 0%);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.thought__body .words.frame-in span:nth-of-type(1) {
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.thought__body .words.frame-in span:nth-of-type(1) img {
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
.thought__body .words.frame-in span:nth-of-type(2) {
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.thought__body .words.frame-in span:nth-of-type(2) img {
  -webkit-transition-delay: 700ms;
          transition-delay: 700ms;
}
.thought__body .words.frame-in span:nth-of-type(3) {
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
.thought__body .words.frame-in span:nth-of-type(3) img {
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
}
.thought__body .words.frame-in i {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: ease 0.6s 0.6s;
  transition: ease 0.6s 0.6s;
}
.thought__circ {
  position: absolute;
  bottom: -2.5rem;
  right: 5rem;
  z-index: 3;
}
@media screen and (max-width: 640px) {
  .thought__circ {
    width: 12rem;
    right: 2rem;
    bottom: -8rem;
  }
}
.thought__logo.cfi .thoughtLogo__part {
  opacity: 0;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transition: ease 800ms;
  transition: ease 800ms;
}
.thought__logo.cfi .thoughtLogo__txt {
  opacity: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: ease 800ms;
  transition: ease 800ms;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.thought__logo.cfi.frame-in .thoughtLogo__part {
  opacity: 1;
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
.thought__logo.cfi.frame-in .thoughtLogo__txt {
  opacity: 1;
  -webkit-clip-path: inset(0 0% 0 0);
          clip-path: inset(0 0% 0 0);
}
.thought__logo.cfi.frame-in #thought_main01__pt {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.thought__logo.cfi.frame-in #thought_main02__pt {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.thought__logo.cfi.frame-in #thought_main03__pt {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.thought__logo.cfi.frame-in #thought_main01__txt {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.thought__logo.cfi.frame-in #thought_main02__txt {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.thought__logo.cfi.frame-in #thought_main03__txt {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.thought .family {
  position: absolute;
  z-index: 10;
  right: 20rem;
  bottom: -5rem;
}
@media screen and (max-width: 640px) {
  .thought .family {
    right: -1rem;
    bottom: -7rem;
    width: 65vw;
  }
}
.thought .tree01 {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 5rem;
  width: 22.8rem;
}
@media screen and (max-width: 640px) {
  .thought .tree01 {
    top: 42%;
    left: auto;
    right: -3rem;
    width: 45vw;
  }
}
.thought .tree02 {
  position: absolute;
  z-index: 10;
  bottom: 16rem;
  right: -5rem;
  width: 24.1rem;
}
@media screen and (max-width: 640px) {
  .thought .tree02 {
    display: none;
  }
}

@-webkit-keyframes rotation {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#thoughtCircHoop {
  -webkit-animation: rotation 10000ms linear infinite both;
          animation: rotation 10000ms linear infinite both;
  -webkit-transform-origin: center;
          transform-origin: center;
}

@-webkit-keyframes shipMove01 {
  from {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  to {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}

@keyframes shipMove01 {
  from {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  to {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}
@-webkit-keyframes shipMove02 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes shipMove02 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@-webkit-keyframes wave {
  from {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
  }
  to {
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
}
@keyframes wave {
  from {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
  }
  to {
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
}
.message {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 5rem;
  min-height: 100vh;
}
@media screen and (max-width: 640px) {
  .message {
    padding-bottom: 0;
  }
}
.message__header {
  max-width: 110rem;
  width: calc(100% - 10rem);
  margin: 0 auto 10rem;
}
@media screen and (max-width: 640px) {
  .message__header {
    width: calc(100% - 4rem);
    margin-bottom: 6rem;
  }
}
.message__header .en {
  font-size: 7.6rem;
  font-size: min(7.6rem, 12vw);
  font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: #b7d1d6 2px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 2rem;
}
.message__header .jp {
  line-height: 1;
  font-weight: 800;
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
}
.message__inner {
  padding-left: 10rem;
  position: relative;
  z-index: 20;
}
@media screen and (max-width: 640px) {
  .message__inner {
    padding-left: 0;
  }
}
.message__cont {
  max-width: 110rem;
  margin: 0 auto;
  padding: 6rem 6rem 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5fr 0 3fr;
  grid-template-columns: 1.5fr 3fr;
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
  grid-auto-flow: row;
      grid-template-areas: "photo greeting";
}
@media screen and (max-width: 640px) {
  .message__cont {
    display: block;
    padding: 0 0 0;
    width: calc(100% - 4rem);
    margin: 0 auto;
  }
}
.message__cont .subttl {
  font-size: 3rem;
  color: #8db8be;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}
.message__profile {
  grid-area: profile;
  padding-top: 6rem;
  display: none;
}
.message__profile table tr:not(:last-child) td {
  padding-bottom: 0.5em;
}
.message__profile table td {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  vertical-align: top;
  font-weight: 700;
}
.message__profile table td:first-child {
  white-space: nowrap;
  padding-right: 1em;
}
.message__photo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: photo;
}
@media screen and (max-width: 640px) {
  .message__photo {
    padding-bottom: 4rem;
  }
}
.message__photo figure {
  width: calc(100% + 12rem);
  aspect-ratio: 1006/1200;
  margin: -2rem 0 0 -12rem;
  position: relative;
}
@media screen and (max-width: 640px) {
  .message__photo figure {
    width: 100%;
    margin: 0 0 0;
  }
}
.message__photo figure::after {
  content: "PROFILE +";
  position: absolute;
  font-size: 1.2rem;
  bottom: 3rem;
  right: 4rem;
  z-index: 10;
  border-radius: 100vmax;
  padding: 0.5em 0.5em 0.5em 0.75em;
  background: #fff;
  font-weight: 700;
  letter-spacing: 0.075em;
  -webkit-transition: ease 400ms;
  transition: ease 400ms;
}
@media screen and (max-width: 640px) {
  .message__photo figure::after {
    bottom: 2rem;
    right: 3rem;
  }
}
.message__photo figure .prof-card {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6rem;
  background: #3fa7aa;
}
.message__photo figure:hover::after {
  opacity: 0;
}
.message__photo figure:hover .prof-card {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.message__photo figure:hover img {
  opacity: 0;
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
  pointer-events: none;
}
.message__photo figure .prof-card {
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 6rem 4rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: ease 400ms;
  transition: ease 400ms;
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
  z-index: 1;
  color: #fff;
}
.message__photo figure .prof-card .name {
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
  font-weight: 700;
  margin-bottom: 4rem;
}
.message__photo figure .prof-card table tr:not(:last-child) td {
  padding-bottom: 0.5em;
}
.message__photo figure .prof-card table td {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  vertical-align: top;
  font-weight: 700;
}
.message__photo figure .prof-card table td:first-child {
  white-space: nowrap;
  padding-right: 1em;
}
.message__photo figure img {
  border-radius: 6rem;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  -webkit-transition: ease 400ms;
  transition: ease 400ms;
}
.message__greeting {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: greeting;
  font-size: 1.6rem;
  letter-spacing: 0.07em;
  line-height: 2.1;
  font-weight: 700;
  padding-left: 8rem;
}
@media screen and (max-width: 640px) {
  .message__greeting {
    padding-left: 0rem;
    font-size: 1.4rem;
  }
}
.message__greeting p {
  margin-bottom: 1em;
}
.message__greeting .words {
  color: #5c9ba2;
  font-size: 3rem;
  margin: 1.5rem 0;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
@media screen and (max-width: 640px) {
  .message__greeting .words {
    font-size: 2.4rem;
    white-space: nowrap;
  }
}
.message__greeting .words span {
  display: inline-block;
  letter-spacing: 0.1em;
  position: relative;
  position: relative;
  z-index: 1;
  opacity: 0;
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
  -webkit-transition: ease 600ms;
  transition: ease 600ms;
}
.message__greeting .words span::after {
  content: "";
  height: 0.35em;
  left: 1%;
  bottom: 10%;
  width: 0%;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate(-1.5deg);
          transform: rotate(-1.5deg);
  background-color: #fff;
  position: absolute;
  z-index: -1;
  -webkit-transition: ease 400ms;
  transition: ease 400ms;
}
.message__greeting .words.frame-in span {
  opacity: 1;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
}
.message__greeting .words.frame-in span::after {
  width: 95%;
}
.message__greeting .words.frame-in span:nth-child(1) {
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.message__greeting .words.frame-in span:nth-child(1)::after {
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
.message__greeting .signature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
  .message__greeting .signature {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}
.message__greeting .signature__ttl {
  line-height: 1.5;
  font-weight: 700;
  font-size: 2rem;
  text-align: right;
}
@media screen and (max-width: 640px) {
  .message__greeting .signature__ttl {
    font-size: 1.4rem;
  }
}
.message__greeting .signature img {
  width: 27rem;
  height: auto;
}
@media screen and (max-width: 640px) {
  .message__greeting .signature img {
    width: 18rem;
  }
}
.message .birds {
  position: absolute;
  top: 20%;
  left: 55%;
  width: 5rem;
  height: 5rem;
}
@media screen and (max-width: 640px) {
  .message .birds {
    top: 10%;
    width: 4rem;
    opacity: 0.5;
  }
}
.message .birds img {
  position: absolute;
  will-change: transform;
}
.message .birds img:nth-child(1) {
  top: -4rem;
  left: 2rem;
}
.message .birds img:nth-child(2) {
  top: 8rem;
  left: -12rem;
}
.message .birds img:nth-child(3) {
  top: 9rem;
  left: -6rem;
}
@media screen and (max-width: 640px) {
  .message::before {
    content: "";
    position: absolute;
    top: 3%;
    left: 32%;
    width: 29rem;
    height: 10rem;
    background-image: url(../images/wave01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-animation: wave 4s ease infinite alternate both;
            animation: wave 4s ease infinite alternate both;
  }
}
.message .ship {
  position: absolute;
  z-index: 2;
  top: 2rem;
  right: 10rem;
  width: 24rem;
  height: auto;
}
@media screen and (max-width: 640px) {
  .message .ship {
    width: 15rem;
    right: -4rem;
    top: -4rem;
  }
}
.message .ship__inner {
  -webkit-animation: shipMove01 3.1s ease infinite alternate both;
          animation: shipMove01 3.1s ease infinite alternate both;
}
.message .ship img {
  -webkit-animation: shipMove02 3s ease infinite alternate both;
          animation: shipMove02 3s ease infinite alternate both;
}
.message .wave01 {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 40%;
  width: 42rem;
  height: auto;
  -webkit-animation: wave 4s ease infinite alternate both;
          animation: wave 4s ease infinite alternate both;
}
@media screen and (max-width: 640px) {
  .message .wave01 {
    display: none;
  }
}
.message .wave02 {
  position: absolute;
  z-index: 1;
  top: 26rem;
  left: 75%;
  width: 38rem;
  height: auto;
  -webkit-animation: wave 4s ease 1.5s infinite alternate both;
          animation: wave 4s ease 1.5s infinite alternate both;
}
@media screen and (max-width: 640px) {
  .message .wave02 {
    width: 25rem;
    top: auto;
    left: 40%;
    bottom: 20rem;
  }
}

@-webkit-keyframes snowFall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5vw);
            transform: translateY(-5vw);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(min(100vw, 120vh)) scale(1.2);
            transform: translateY(min(100vw, 120vh)) scale(1.2);
  }
}

@keyframes snowFall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5vw);
            transform: translateY(-5vw);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(min(100vw, 120vh)) scale(1.2);
            transform: translateY(min(100vw, 120vh)) scale(1.2);
  }
}
@-webkit-keyframes snowFallSp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5vw);
            transform: translateY(-5vw);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(200vw) scale(1.2);
            transform: translateY(200vw) scale(1.2);
  }
}
@keyframes snowFallSp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5vw);
            transform: translateY(-5vw);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(200vw) scale(1.2);
            transform: translateY(200vw) scale(1.2);
  }
}
.recruit-container {
  position: relative;
  padding-top: 40rem;
  background-color: #fff;
  background: url(../images/recruit-area-bg.svg), -webkit-gradient(linear, left top, left bottom, from(#abdce1), color-stop(60%, #c7e7ee), to(#c8e7ee));
  background: url(../images/recruit-area-bg.svg), linear-gradient(#abdce1, #c7e7ee 60%, #c8e7ee 100%);
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .recruit-container {
    padding-top: 42rem;
    background: url(../images/recruit-area-bg.svg), -webkit-gradient(linear, left top, left bottom, from(#dceff3), color-stop(30rem, #dceff3)), -webkit-gradient(linear, left top, left bottom, from(#abdce1), color-stop(60%, #c7e7ee), to(#c8e7ee));
    background: url(../images/recruit-area-bg.svg), linear-gradient(#dceff3, #dceff3 30rem), linear-gradient(#abdce1, #c7e7ee 60%, #c8e7ee 100%);
    background-repeat: no-repeat;
    background-size: contain, 100% 30rem, cover;
    background-position: top 30rem center, top 0 center, center;
  }
}
.recruit-container .wave {
  position: absolute;
  top: 5rem;
  width: 37rem;
  left: 40%;
  -webkit-animation: wave 4s ease 1.5s infinite alternate both;
          animation: wave 4s ease 1.5s infinite alternate both;
}
@media screen and (max-width: 640px) {
  .recruit-container .wave {
    left: -5rem;
    width: 30rem;
    opacity: 0.5;
  }
}
.recruit-container .tree {
  position: absolute;
  top: 5rem;
  width: 54.5rem;
  left: 75%;
}
@media screen and (max-width: 640px) {
  .recruit-container .tree {
    width: 32rem;
    left: 45%;
  }
}
.recruit-container .snow {
  animation: snowFall 4s linear infinite reverse;
  border-radius: 100vmax;
  background-color: #fff;
  position: absolute;
  left: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 640px) {
  .recruit-container .snow {
    -webkit-animation-name: snowFallSp;
            animation-name: snowFallSp;
  }
}

.recruit {
  overflow: hidden;
  padding-top: 10rem;
  padding-bottom: 10rem;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .recruit {
    padding: 8rem 0 6rem;
  }
}
.recruit__header {
  margin-bottom: -8rem;
  text-align: center;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .recruit__header {
    margin-bottom: -6rem;
  }
}
.recruit__header .en {
  font-size: 7.6rem;
  font-size: min(7.6rem, 12vw);
  font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: #ffffff 2px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 2rem;
}
.recruit__header .jp {
  line-height: 1;
  font-weight: 800;
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
}
.recruit__catch {
  width: 36rem;
  max-width: 100%;
  position: absolute;
  left: 32.5%;
  top: -1%;
}
@media screen and (max-width: 640px) {
  .recruit__catch {
    width: 100%;
    margin: 0 0 -3rem;
    position: relative;
    left: auto;
    top: auto;
  }
}
.recruit__inner {
  position: relative;
  z-index: 1;
  padding-top: 8rem;
}
@media screen and (max-width: 640px) {
  .recruit__inner {
    padding-top: 6rem;
  }
}
.recruit__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  max-width: 108rem;
  width: calc(100% - 10rem);
  margin: 0 auto;
  gap: 0;
  position: relative;
  z-index: 10;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 640px) {
  .recruit__cont {
    width: calc(100% - 4rem);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    padding: 4rem 0 0;
  }
}
.recruit__fig {
  position: relative;
  width: 54%;
  max-width: 100%;
  margin-right: -9rem;
  padding: 2.5rem;
  background-image: url(../images/recruit-fig-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 640px) {
  .recruit__fig {
    width: 70vw;
    margin: 0 auto;
  }
}
.recruit__main {
  display: block;
  position: relative;
  width: 100%;
  bottom: -35%;
}
@media screen and (max-width: 640px) {
  .recruit__main {
    width: 100%;
  }
}
.recruit__main img {
  display: block;
  width: 100%;
  position: relative;
}
.recruit__main img:nth-child(n+2) {
  position: absolute;
  top: 0;
  left: 0;
}
.recruit__info {
  width: 50rem;
  max-width: 100%;
  padding-top: 8rem;
  padding-bottom: 8rem;
  -webkit-box-flex: 0.65;
      -ms-flex-positive: 0.65;
          flex-grow: 0.65;
}
@media screen and (max-width: 640px) {
  .recruit__info {
    padding-top: 0;
  }
}
.recruit__ttl {
  font-size: 2.8rem;
  font-size: min(2.8rem, 6vw);
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.7142857143;
  margin-bottom: 1em;
}
.recruit__detail {
  font-size: 1.6rem;
  line-height: 2.1;
  letter-spacing: 0.032em;
  font-weight: 700;
  width: 48rem;
}
@media screen and (max-width: 640px) {
  .recruit__detail {
    width: auto;
    font-size: 1.4rem;
  }
  .recruit__detail br {
    display: none;
  }
}
.recruit__btn {
  border-radius: 0.625rem;
  background-color: #3fa7aa;
  color: #fff;
  width: 22.5rem;
  max-width: 100%;
  height: 5.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  -webkit-filter: drop-shadow(0.5rem 0.5rem 0 #6f7e8f);
          filter: drop-shadow(0.5rem 0.5rem 0 #6f7e8f);
  border: 3px solid #3fa7aa;
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0.1em;
  -webkit-transition: ease 200ms;
  transition: ease 200ms;
  will-change: transform, opacity, filter;
  padding: 1.25rem 1.25rem 1.25rem 0.9375rem;
}
@media screen and (max-width: 640px) {
  .recruit__btn {
    width: 100%;
  }
}
.recruit__btn::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-image: url(../images/icon_external_w.svg);
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: ease 200ms;
  transition: ease 200ms;
  margin-left: 0.5em;
}
.recruit__btn:hover {
  opacity: 1;
  background-color: #fff;
  -webkit-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
  color: #000;
  -webkit-filter: drop-shadow(0.4rem 0.4rem 0 #6f7e8f);
          filter: drop-shadow(0.4rem 0.4rem 0 #6f7e8f);
}
.recruit__btn:hover::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.recruit__btn-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: 6rem;
}
@media screen and (max-width: 640px) {
  .recruit__btn-container {
    display: block;
  }
}
.recruit__btn-desc {
  width: 50%;
  padding-left: 1rem;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .recruit__btn-desc {
    width: 100%;
    padding-left: auto;
    margin-top: 2rem;
  }
}
.recruit__btn-desc img {
  mix-blend-mode: multiply;
  max-width: 90%;
}
@media screen and (max-width: 640px) {
  .recruit__btn-desc img {
    max-width: 60%;
  }
}
.recruit__btn-desc p > small {
  font-size: 1rem;
  line-height: 1.5;
  display: block;
}
.recruit .birds01 {
  position: absolute;
  width: 5rem;
  height: 5rem;
  top: 15rem;
  right: 15rem;
}
.recruit .birds01 img {
  position: absolute;
  will-change: transform;
}
.recruit .birds01 img:nth-child(1) {
  top: -4rem;
  left: 2rem;
}
.recruit .birds01 img:nth-child(2) {
  top: 9rem;
  left: -6rem;
}
.recruit .birds01 img:nth-child(3) {
  top: 8rem;
  left: -12rem;
}
.recruit .birds02 {
  position: absolute;
  width: 5rem;
  height: 5rem;
  right: 8rem;
  bottom: 20rem;
  opacity: 0.6;
}
@media screen and (max-width: 640px) {
  .recruit .birds02 {
    bottom: 10rem;
  }
}
.recruit .birds02 img {
  position: absolute;
  will-change: transform;
}
.recruit .birds02 img:nth-child(1) {
  top: 0rem;
  left: 2rem;
}
.recruit .birds02 img:nth-child(2) {
  top: 9rem;
  left: -4rem;
}
.recruit .birds02 img:nth-child(3) {
  top: 6rem;
  left: -10rem;
}
.recruit .birds03 {
  position: absolute;
  width: 4rem;
  height: 4rem;
  right: 24rem;
  bottom: 10rem;
  opacity: 0.3;
}
@media screen and (max-width: 640px) {
  .recruit .birds03 {
    display: none;
  }
}
.recruit .birds03 img {
  position: absolute;
  will-change: transform;
}
.recruit .birds03 img:nth-child(1) {
  top: 0rem;
  left: -2rem;
}
.recruit .birds03 img:nth-child(2) {
  top: 9rem;
  left: -6rem;
}
.recruit .birds03 img:nth-child(3) {
  top: 6rem;
  left: -12rem;
}

@-webkit-keyframes modalPop {
  from {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}

@keyframes modalPop {
  from {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000;
}
:checked + .modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: modalPop ease 0.3s both;
          animation: modalPop ease 0.3s both;
}
.modal__checkbox {
  display: none;
}
.modal__inner {
  background: #fff;
  border-radius: 6rem;
  padding: 8rem;
  position: relative;
  max-width: 80rem;
  width: calc(100% - 4rem);
  text-align: center;
}
@media screen and (max-width: 640px) {
  .modal__inner {
    padding: 10rem 2rem 4rem;
    border-radius: 4rem;
  }
}
.modal__inner p {
  font-size: 2.4rem;
  line-height: 4.4rem;
  letter-spacing: 0.1em;
  color: #3fa7aa;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .modal__inner p {
    font-size: 1.8rem;
    line-height: 2;
    letter-spacing: 0.025em;
  }
  .modal__inner p br.pc {
    display: none !important;
  }
}
.modal__closemodal {
  position: absolute;
  top: 2rem;
  right: 2rem;
  border-radius: 100vmax;
  display: block;
  background: #3fa7aa;
  z-index: 1;
  width: 7rem;
  height: 7rem;
  font-size: 0;
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  .modal__closemodal {
    top: 1rem;
    right: 1rem;
  }
}
.modal__closemodal::before, .modal__closemodal::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 60%;
  left: 20%;
  top: calc(50% - 1px);
  background-color: #fff;
}
.modal__closemodal::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.modal__closemodal::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media screen and (min-width: 641px) {
  .modal__closemodal {
    -webkit-transition: ease 200ms;
    transition: ease 200ms;
    will-change: transform, opacity;
  }
  .modal__closemodal:hover {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0.7;
  }
}
.modal__btn-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 5rem;
}
.modal__btn-area .recruit__btn {
  width: 26rem;
}

/************************************************************
/* Frame In
/************************************************************/
.cfi.cfi00 {
  opacity: 0;
  -webkit-transition: opacity ease 800ms;
  transition: opacity ease 800ms;
}
.cfi.cfi00.frame-in {
  opacity: 1;
}
.cfi.cfi01 {
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  opacity: 0;
  -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
  transition: opacity ease 800ms, -webkit-transform ease 800ms;
  transition: opacity ease 800ms, transform ease 800ms;
  transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
}
.cfi.cfi01.frame-in {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  opacity: 1;
}
.cfi.cfi02 {
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
  opacity: 0;
  -webkit-transition: opacity ease 800ms, -webkit-transform ease 800ms;
  transition: opacity ease 800ms, -webkit-transform ease 800ms;
  transition: opacity ease 800ms, transform ease 800ms;
  transition: opacity ease 800ms, transform ease 800ms, -webkit-transform ease 800ms;
}
.cfi.cfi02.frame-in {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  opacity: 1;
}

.header {
  margin-right: auto;
  margin-left: auto;
}
.header__logo {
  width: 17rem;
  position: fixed;
  z-index: 10001;
  top: 4rem;
  left: 2rem;
}
@media screen and (max-width: 640px) {
  .header__logo {
    top: 2rem;
    left: 1rem;
    width: 12rem;
  }
}
.header__logo img {
  display: block;
  max-width: 100%;
}
.header__nav {
  position: fixed;
  right: 4.2rem;
  top: 2.5rem;
  height: 7rem;
  width: 7rem;
  opacity: 0;
  z-index: 10001;
  border-radius: 100vmax;
  background: #fff;
}
@media screen and (max-width: 640px) {
  .header__nav {
    top: unset;
    bottom: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    right: 0.5rem;
    height: 5rem;
    width: 5rem;
  }
}
.header__nav.is-active {
  opacity: 1;
}

@-webkit-keyframes navWave {
  from {
    background-position: center left 0rem;
  }
  to {
    background-position: center left -2rem;
  }
}

@keyframes navWave {
  from {
    background-position: center left 0rem;
  }
  to {
    background-position: center left -2rem;
  }
}
.navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.9rem 9rem 0.9rem 4rem;
  gap: 2rem;
  height: 7rem;
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (max-width: 640px) {
  .navigation {
    gap: 1rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0.5rem 6rem 0.5rem 2rem;
    height: 5rem;
  }
}
.navigation a {
  display: block;
}
.navigation img {
  display: block;
}
.navigation__txt a {
  padding: 1rem 0;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #006177;
}
@media screen and (max-width: 640px) {
  .navigation__txt a {
    font-size: 1rem;
  }
}
.navigation__txt img {
  height: 1rem;
  width: auto;
}
@media screen and (max-width: 640px) {
  .navigation__txt img {
    height: 0.6rem;
  }
}
.navigation__contact img {
  width: 5rem;
  height: 5rem;
}
@media screen and (max-width: 640px) {
  .navigation__contact img {
    width: 4rem;
    height: 4rem;
  }
}
.navigation__toggle {
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 100vmax;
  background: -webkit-gradient(linear, left top, left bottom, from(#011855), to(#216a3c));
  background: linear-gradient(#011855, #216a3c);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  position: absolute;
  z-index: 10000;
  top: 1.4rem;
  right: 1.4rem;
  overflow: hidden;
}
@media screen and (min-width: 641px) {
  .navigation__toggle {
    -webkit-transition: opacity ease 200ms;
    transition: opacity ease 200ms;
  }
  .navigation__toggle:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 640px) {
  .navigation__toggle {
    top: 0.5rem;
    right: 0.5rem;
  }
}
.navigation__toggle .open {
  width: 80%;
  height: 2rem;
  position: absolute;
  top: calc(50% - 1rem);
  left: 10%;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
.navigation__toggle .open::before, .navigation__toggle .open::after {
  content: "";
  display: block;
  background-color: #fff;
  width: 80%;
  height: 2px;
  top: calc(50% - 1px);
  left: 10%;
  position: absolute;
  rotate: 0deg;
  -webkit-transition: ease 600ms;
  transition: ease 600ms;
}
.navigation__toggle .open::before {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.navigation__toggle .open::after {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}
.navigation__toggle .close {
  width: 80%;
  height: 2rem;
  position: absolute;
  top: calc(50% - 1rem);
  left: 10%;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
.navigation__toggle .close::before, .navigation__toggle .close::after {
  content: "";
  display: block;
  background-color: #fff;
  width: 80%;
  height: 2px;
  top: calc(50% - 1px);
  left: 10%;
  position: absolute;
  -webkit-transition: ease 600ms;
  transition: ease 600ms;
}
.navigation__toggle .close::before {
  -webkit-transform: rotate(20deg) translateX(100%);
          transform: rotate(20deg) translateX(100%);
  opacity: 0;
}
.navigation__toggle .close::after {
  -webkit-transform: rotate(-20deg) translateX(100%);
          transform: rotate(-20deg) translateX(100%);
  opacity: 0;
}
.is-open .navigation__toggle .open::before {
  -webkit-transform: translateY(0px) rotate(-20deg) translateX(-100%);
          transform: translateY(0px) rotate(-20deg) translateX(-100%);
  opacity: 0;
}
.is-open .navigation__toggle .open::after {
  -webkit-transform: translateY(0px) rotate(20deg) translateX(-100%);
          transform: translateY(0px) rotate(20deg) translateX(-100%);
  opacity: 0;
}
.is-open .navigation__toggle .close::before {
  width: 80%;
  left: 10%;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
  opacity: 1;
}
.is-open .navigation__toggle .close::after {
  width: 80%;
  left: 10%;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
  opacity: 1;
}

.info {
  padding-top: 4rem;
}
@media screen and (max-width: 640px) {
  .info {
    padding-top: 2rem;
    background: url(../images/footer_bird.png) no-repeat, url(../images/footer_cloud01.png) no-repeat, url(../images/footer_cloud02.png) no-repeat;
    background-size: 14rem, 30.5rem, 30.5rem;
    background-position: top 25rem right 0, top 10rem left 47.5vw, bottom 52.5rem right 45vw;
    background-position: top calc((1 - (var(--bg-move) / 100)) * -2rem + 25rem) right calc((1 - (var(--bg-move) / 100)) * -8rem), top 10rem left calc((1 - (var(--bg-move) / 100)) * 3rem + 47.5vw), bottom 52.5rem right calc((1 - (var(--bg-move) / 100)) * -6rem + 47.5vw);
  }
}
.info__heading {
  margin-bottom: 3.5rem;
}
.info__heading .scrolling-bg {
  -webkit-text-stroke: 2px #feffd5;
  color: transparent;
}
.info__header {
  max-width: 120rem;
  width: calc(100% - 10rem);
  margin: 6rem auto 4rem;
}
@media screen and (max-width: 640px) {
  .info__header {
    width: calc(100% - 4rem);
  }
}
.info__header h2 {
  letter-spacing: 0.1em;
  font-size: 2.8rem;
  color: #3c3c3c;
}
.info__cont {
  max-width: 110rem;
  width: calc(100% - 10rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  gap: 5rem;
}
@media screen and (max-width: 640px) {
  .info__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 25px;
    width: calc(100% - 4rem);
  }
}
.info__table {
  -ms-flex-negative: 0.75;
      flex-shrink: 0.75;
  width: 45rem;
  max-width: 100%;
}
.info__table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  line-height: 2;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.info__table dl a {
  text-decoration: underline;
  color: #3c3c3c;
  text-underline-offset: 0.2em;
}
.info__table dl + dl {
  margin-top: 0.85rem;
}
.info__table dl dt {
  width: 10rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}
.info__table dl dt.letter-2 {
  letter-spacing: 1em;
}
.info__table dl dt.letter-3 {
  letter-spacing: 0.5em;
}
.info__table dl dd {
  word-break: keep-all;
}
.info__table .logo {
  margin-right: 0.5em;
  max-height: 1.5em;
  vertical-align: bottom;
}
.info__map {
  width: 50%;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .info__map {
    width: 100%;
  }
}
.info__map p {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1.75rem;
}
.info__map iframe {
  display: block;
  width: 100%;
  height: 42rem;
}
@media screen and (max-width: 640px) {
  .info iframe {
    max-width: 100%;
    height: 20rem;
  }
}
.info__contact {
  max-width: 110rem;
  width: calc(100% - 10rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10rem auto;
  gap: 3rem;
}
@media screen and (max-width: 640px) {
  .info__contact {
    width: calc(100% - 4rem);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}
.info__contact li {
  width: 33%;
}
@media screen and (max-width: 640px) {
  .info__contact li {
    width: 100%;
  }
}
.info__contact a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #070707;
  font-size: 1.4rem;
  letter-spacing: 0.07em;
  font-weight: 700;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem;
}
@media screen and (max-width: 640px) {
  .info__contact a {
    padding: 1rem 2rem;
    font-size: 1.4rem;
    gap: 1rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.footer {
  --bg-move: 0;
  background: #c8e6ee;
  background: url(../images/info_bg.jpg), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)), -webkit-gradient(linear, left top, left bottom, from(#c8e6ee), to(#c8e6ee));
  background: url(../images/info_bg.jpg), linear-gradient(#fff, #fff), linear-gradient(#c8e6ee, #c8e6ee);
  background-size: 100% auto, 100% 10rem, cover;
  background-repeat: no-repeat;
  background-position: center bottom -6.5rem, center bottom, center;
  background-position: center bottom calc(-6.5rem + -6.5rem * (1 - var(--bg-move) / 100) * 2), center bottom, center;
  color: #3c3c3c;
  padding-bottom: 2.5rem;
}
@media screen and (max-width: 640px) {
  .footer {
    background-size: 100% auto, 100% calc(18rem + 18rem * (1 - var(--bg-move) / 100) * 3 + 1px), 100%;
    background-position: center bottom 18rem, center bottom 18rem, center bottom;
    background-position: center bottom calc(18rem + 18rem * (1 - var(--bg-move) / 100) * 3), center bottom, center bottom;
    padding-bottom: 0;
  }
}
.footer .copyright {
  font-size: 1.2rem;
  letter-spacing: 0.07em;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0.23em;
}
@media screen and (max-width: 640px) {
  .footer .copyright {
    font-size: 1rem;
  }
}
.footer__bottom {
  padding: 4rem 5rem;
  margin-top: 15rem;
}
@media screen and (max-width: 640px) {
  .footer__bottom {
    padding: 4rem 2rem 10rem;
  }
}
.footer__bottom-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 640px) {
  .footer__bottom-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 2em;
  }
}
.footer__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  gap: 5rem;
}
@media screen and (max-width: 640px) {
  .footer__link {
    gap: 1rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: 0;
  }
}
.footer__link li {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.footer__link a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #3c3c3c;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer__link a:after {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url(../images/icon_external.svg);
  background-repeat: no-repeat;
  background-size: contain;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 0.3em;
}
/*# sourceMappingURL=style.css.map */