/* ==========================================================================
	root
========================================================================== */
:root {
  --base-pc-width:1500;
  --base-sp-width:400;
  --vwPC: calc(100vw / 1500);
  --vwSP: calc(100vw / 400);
  --easeInQuad:cubic-bezier(.55, .085, .68, .53);
  --easeOutQuad:cubic-bezier(0.23, 1, 0.32, 1);
  --easeOutQuint:cubic-bezier(.25, .46, .45, .94);
  --easeOutSine:cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeOutCubic:cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
  --easeInOutCubic:cubic-bezier(0.65, 0, 0.35, 1);
  --easePopUp:cubic-bezier(0.17, 0.88, 0.30, 1.28);
  --easeInCirc:cubic-bezier(0.55, 0, 1, 0.45);
  --theme-color:#f55b96;
  --base-text-color:#333;
  --base-color-blue:#4bc3e5;
  --base-color-blue02:#00aae2;
  --base-color-green:#2bb063;
  --base-color-perple:#6367b0;
  --base-color-orange:#fb9b00;
  --base-color-yellow:#ffcf19;
  --base-color-beige:#f5f4ef;
  --base-color-gray:#a4a4a4;
  --base-color-gray02:#aeaaaf;
  --base-color-gray03:#b3b3b3;
  --base-color-gray04:#848484;
  --base-color-gray05:#c4c4c4;
  --base-color-gray06:#7e7e7e;
  --base-color-gray07:#666;
  --base-color-gray08:#bebebe;
  --base-color-gray09:#dfdfdf;
  --base-color-gray10:#676767;
  --base-color-tv:#22f2f2;
  --base-border-color:#cdc4c5;
  --base-border-color02:#d3d3d3;
  --base-border-color03:#a1a1a1;
  --base-border-color04:#bbb;
  --base-border-color05:#999;
  --hanten:scale(-1, -1);
  --hantenX:scale(-1, 1);
  --hantenY:scaleY(-1);
  --transition-scale:transform 0.8s var(--easeOutCubic); }

@media screen and (min-width: 801px) {
  :root {
    --vwPC: calc(100vw / 1500);
    --fz8: max(.8rem, 8px);
    --fz9: max(.9rem, 9px);
    --fz10: max(1rem, 9px);
    --fz11: max(1.1rem, 10px);
    --fz12: max(1.2rem, 11px);
    --fz13: max(1.3rem, 12px);
    --fz14: max(1.4rem, 12px);
    --fz15: max(1.5rem, 13px);
    --fz16: max(1.6rem, 14px);
    --fz17: max(1.7rem, 15px);
    --fz18: max(1.8rem, 16px);
    --fz19: max(1.9rem, 17px);
    --fz20: max(2.0rem, 18px);
    --fz21: max(2.1rem, 18px);
    --fz22: max(2.2rem, 18px);
    --fz23: max(2.3rem, 20px);
    --fz24: max(2.4rem, 20px);
    --fz25: max(2.5rem, 21px);
    --fz26: max(2.6rem, 22px);
    --fz27: max(2.7rem, 23px);
    --fz28: max(2.8rem, 24px);
    --fz29: max(2.9rem, 25px);
    --fz30: max(3rem, 26px);
    --fz32: max(3.2rem, 28px);
    --fz33: max(3.3rem, 29px);
    --fz34: max(3.4rem, 30px);
    --fz35: max(3.5rem, 31px);
    --fz36: max(3.6rem, 32px);
    --fz37: max(3.7rem, 33px);
    --fz38: max(3.8rem, 34px);
    --fz39: max(3.9rem, 35px);
    --fz40: max(4rem, 36px);
    --fz41: max(4.1rem, 37px);
    --fz42: max(4.2rem, 38px);
    --fz44: max(4.4rem, 40px);
    --fz45: max(4.5rem, 41px);
    --fz46: max(4.6rem, 42px);
    --fz48: max(4.8rem, 44px);
    --fz50: max(5rem, 48px);
    --fz52: max(5.2rem, 48px);
    --fz54: max(5.4rem, 50px);
    --fz55: max(5.5rem, 51px);
    --fz56: max(5.6rem, 52px);
    --fz58: max(5.8rem, 54px);
    --fz59: max(5.9rem, 55px);
    --fz60: max(6rem, 56px);
    --fz64: max(6.4rem, 60px);
    --fz72: max(7.2rem, 68px);
    --fz78: max(7.8rem, 74px);
    --fz96: max(9.6rem, 90px); } }
@media screen and (max-width: 800px) {
  :root {
    --vwSP: calc(100vw / 400);
    --fz7: clamp(7px, calc(7 * var(--vwSP)), 9px);
    --fz8: clamp(8px, calc(8 * var(--vwSP)), 10px);
    --fz9: clamp(9px, calc(9 * var(--vwSP)), 11px);
    --fz10: clamp(10px, calc(10 * var(--vwSP)), 12px);
    --fz11: clamp(11px, calc(11 * var(--vwSP)), 13px);
    --fz12: clamp(12px, calc(12 * var(--vwSP)), 14px);
    --fz13: clamp(13px, calc(13 * var(--vwSP)), 14px);
    --fz14: clamp(14px, calc(14 * var(--vwSP)), 16px);
    --fz15: clamp(15px, calc(15 * var(--vwSP)), 17px);
    --fz16: clamp(16px, calc(16 * var(--vwSP)), 18px);
    --fz17: clamp(17px, calc(17 * var(--vwSP)), 19px);
    --fz18: clamp(18px, calc(18 * var(--vwSP)), 20px);
    --fz19: clamp(19px, calc(19 * var(--vwSP)), 21px);
    --fz20: clamp(20px, calc(20 * var(--vwSP)), 22px);
    --fz21: clamp(21px, calc(21 * var(--vwSP)), 23px);
    --fz22: clamp(22px, calc(22 * var(--vwSP)), 24px);
    --fz23: clamp(23px, calc(23 * var(--vwSP)), 25px);
    --fz24: clamp(24px, calc(24 * var(--vwSP)), 26px);
    --fz25: clamp(25px, calc(25 * var(--vwSP)), 27px);
    --fz26: clamp(26px, calc(26 * var(--vwSP)), 28px);
    --fz27: clamp(27px, calc(27 * var(--vwSP)), 29px);
    --fz28: clamp(28px, calc(28 * var(--vwSP)), 30px);
    --fz30: clamp(30px, calc(30 * var(--vwSP)), 32px);
    --fz31: clamp(31px, calc(31 * var(--vwSP)), 33px);
    --fz32: clamp(32px, calc(32 * var(--vwSP)), 35px);
    --fz33: clamp(33px, calc(33 * var(--vwSP)), 35px);
    --fz34: clamp(34px, calc(34 * var(--vwSP)), 37px);
    --fz35: clamp(35px, calc(35 * var(--vwSP)), 39px);
    --fz37: clamp(37px, calc(37 * var(--vwSP)), 41px);
    --fz36: clamp(36px, calc(36 * var(--vwSP)), 40px);
    --fz38: clamp(38px, calc(38 * var(--vwSP)), 42px);
    --fz40: clamp(40px, calc(40 * var(--vwSP)), 44px);
    --fz42: clamp(42px, calc(42 * var(--vwSP)), 46px);
    --fz44: clamp(44px, calc(44 * var(--vwSP)), 48px);
    --fz45: clamp(45px, calc(45 * var(--vwSP)), 49px);
    --fz47: clamp(47px, calc(47 * var(--vwSP)), 51px);
    --fz48: clamp(48px, calc(48 * var(--vwSP)), 52px);
    --fz49: clamp(49px, calc(49 * var(--vwSP)), 53px);
    --fz51: clamp(51px, calc(51 * var(--vwSP)), 56px);
    --fz56: clamp(56px, calc(56 * var(--vwSP)), 60px);
    --fz64: clamp(64px, calc(64 * var(--vwSP)), 68px); } }
body {
  background: var(--base-color-blue); }

@-webkit-keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@-webkit-keyframes nyuSlideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.98);
            transform: translateX(-50%) scale(0.98); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(5%) scale(1.02);
            transform: translateX(5%) scale(1.02); }
  80% {
    -webkit-transform: translateX(0%) scale(1);
            transform: translateX(0%) scale(1); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%); } }
@keyframes nyuSlideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.98);
            transform: translateX(-50%) scale(0.98); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(5%) scale(1.02);
            transform: translateX(5%) scale(1.02); }
  80% {
    -webkit-transform: translateX(0%) scale(1);
            transform: translateX(0%) scale(1); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%); } }
@media screen and (max-width: 800px) {
  @-webkit-keyframes nyuSlideIn {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%) scale(0.98);
              transform: translateX(50%) scale(0.98); }
    60% {
      opacity: 1;
      -webkit-transform: translateX(-5%) scale(1.02);
              transform: translateX(-5%) scale(1.02); }
    80% {
      -webkit-transform: translateX(0%) scale(1);
              transform: translateX(0%) scale(1); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
              transform: translateX(0%); } }
  @keyframes nyuSlideIn {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%) scale(0.98);
              transform: translateX(50%) scale(0.98); }
    60% {
      opacity: 1;
      -webkit-transform: translateX(-5%) scale(1.02);
              transform: translateX(-5%) scale(1.02); }
    80% {
      -webkit-transform: translateX(0%) scale(1);
              transform: translateX(0%) scale(1); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
              transform: translateX(0%); } } }
@-webkit-keyframes bounceSimple {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); } }
@keyframes bounceSimple {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); } }
@-webkit-keyframes floatParachute {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); }
  25% {
    -webkit-transform: translateY(-10px) rotate(-3deg);
            transform: translateY(-10px) rotate(-3deg); }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); }
  75% {
    -webkit-transform: translateY(-10px) rotate(3deg);
            transform: translateY(-10px) rotate(3deg); }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); } }
@keyframes floatParachute {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); }
  25% {
    -webkit-transform: translateY(-10px) rotate(-3deg);
            transform: translateY(-10px) rotate(-3deg); }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); }
  75% {
    -webkit-transform: translateY(-10px) rotate(3deg);
            transform: translateY(-10px) rotate(3deg); }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); } }
@-webkit-keyframes floatShip {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg); }
  20% {
    -webkit-transform: translate(-4px, -5px) rotate(-2deg);
            transform: translate(-4px, -5px) rotate(-2deg); }
  40% {
    -webkit-transform: translate(4px, 0px) rotate(1.5deg);
            transform: translate(4px, 0px) rotate(1.5deg); }
  60% {
    -webkit-transform: translate(-4px, -5px) rotate(-1.5deg);
            transform: translate(-4px, -5px) rotate(-1.5deg); }
  80% {
    -webkit-transform: translate(4px, 0px) rotate(2deg);
            transform: translate(4px, 0px) rotate(2deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg); } }
@keyframes floatShip {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg); }
  20% {
    -webkit-transform: translate(-4px, -5px) rotate(-2deg);
            transform: translate(-4px, -5px) rotate(-2deg); }
  40% {
    -webkit-transform: translate(4px, 0px) rotate(1.5deg);
            transform: translate(4px, 0px) rotate(1.5deg); }
  60% {
    -webkit-transform: translate(-4px, -5px) rotate(-1.5deg);
            transform: translate(-4px, -5px) rotate(-1.5deg); }
  80% {
    -webkit-transform: translate(4px, 0px) rotate(2deg);
            transform: translate(4px, 0px) rotate(2deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg); } }
@-webkit-keyframes bounceGravity {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  30% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  70% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@keyframes bounceGravity {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  30% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  70% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@-webkit-keyframes bounceFast {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  20% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  40% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  60% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@keyframes bounceFast {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  20% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); }
  40% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  60% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@-webkit-keyframes swingWavy {
  0% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  25% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  50% {
    -webkit-transform: rotate(-2.5deg);
            transform: rotate(-2.5deg); }
  75% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  100% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); } }
@keyframes swingWavy {
  0% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  25% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  50% {
    -webkit-transform: rotate(-2.5deg);
            transform: rotate(-2.5deg); }
  75% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  100% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); } }
@-webkit-keyframes swingFast {
  0% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg); }
  50% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg); }
  100% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg); } }
@keyframes swingFast {
  0% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg); }
  50% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg); }
  100% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg); } }
@-webkit-keyframes swingRotate {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); } }
@keyframes swingRotate {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); } }
@-webkit-keyframes wandPoke {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); } }
@keyframes wandPoke {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); } }
@-webkit-keyframes wandPoke02 {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); } }
@keyframes wandPoke02 {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); } }
@-webkit-keyframes floatSoft {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px); } }
@keyframes floatSoft {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px); } }
@-webkit-keyframes btnRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg); } }
@keyframes btnRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg); } }
@-webkit-keyframes hopbtm {
  0% {
    -webkit-transform: translate(5rem, 0) scale(1);
            transform: translate(5rem, 0) scale(1); }
  30% {
    -webkit-transform: translate(5rem, 10px) scale(1.02);
            transform: translate(5rem, 10px) scale(1.02); }
  100% {
    -webkit-transform: translate(5rem, 0) scale(1);
            transform: translate(5rem, 0) scale(1); } }
@keyframes hopbtm {
  0% {
    -webkit-transform: translate(5rem, 0) scale(1);
            transform: translate(5rem, 0) scale(1); }
  30% {
    -webkit-transform: translate(5rem, 10px) scale(1.02);
            transform: translate(5rem, 10px) scale(1.02); }
  100% {
    -webkit-transform: translate(5rem, 0) scale(1);
            transform: translate(5rem, 0) scale(1); } }
@media screen and (max-width: 900px) {
  @-webkit-keyframes hopbtm {
    0% {
      -webkit-transform: translate(0) scale(1);
              transform: translate(0) scale(1); }
    30% {
      -webkit-transform: translate(0, 10px) scale(1.02);
              transform: translate(0, 10px) scale(1.02); }
    100% {
      -webkit-transform: translate(0) scale(1);
              transform: translate(0) scale(1); } }
  @keyframes hopbtm {
    0% {
      -webkit-transform: translate(0) scale(1);
              transform: translate(0) scale(1); }
    30% {
      -webkit-transform: translate(0, 10px) scale(1.02);
              transform: translate(0, 10px) scale(1.02); }
    100% {
      -webkit-transform: translate(0) scale(1);
              transform: translate(0) scale(1); } } }
@-webkit-keyframes slideLeftRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  50% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@keyframes slideLeftRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  50% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
/* ==========================================================================
	kv
========================================================================== */
#kv {
  position: relative;
  z-index: 50;
  width: 100%;
  height: auto;
  max-height: 1600px;
  aspect-ratio: 3000/2437;
  background: var(--base-color-blue); }
  #kv:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(30deg, #4bc3e5 45%, #89bf73 79%);
    top: 0;
    right: 0;
    z-index: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: right top;
            transform-origin: right top;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.05, 0.2, 1.4);
    transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.05, 0.2, 1.4);
    transition: transform 0.5s cubic-bezier(0.6, 0.05, 0.2, 1.4);
    transition: transform 0.5s cubic-bezier(0.6, 0.05, 0.2, 1.4), -webkit-transform 0.5s cubic-bezier(0.6, 0.05, 0.2, 1.4); }
  #kv .inr {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 2000px; }
  #kv h1 {
    position: relative;
    display: block;
    width: 88.5%;
    margin-left: 2.6%;
    top: 2.0106688551%;
    z-index: 10;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
  #kv h2 {
    position: absolute;
    display: block;
    width: 20.4%;
    left: 2.6%;
    top: 17.2343044727%;
    z-index: 10;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
  #kv h3 {
    position: absolute;
    width: 17.7333333333%;
    height: 10.8329913828%;
    left: 2.9333333333%;
    top: 69.1423881822%;
    z-index: 30;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
  #kv .kv-menu {
    position: absolute;
    text-align: right;
    width: 88.5%;
    left: 2.9333333333%;
    top: 17.0701682396%;
    z-index: 40;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
    #kv .kv-menu a {
      position: relative;
      padding: .5rem 1.3rem;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
      font-size: var(--fz15);
      color: #fff;
      line-height: 1;
      font-weight: 600; }
      #kv .kv-menu a:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 100%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        opacity: 0;
        -webkit-transition: opacity 0.4s var(--easeOutQuint);
        transition: opacity 0.4s var(--easeOutQuint); }
      #kv .kv-menu a:first-child {
        border-left: 1px solid rgba(255, 255, 255, 0.5); }
      #kv .kv-menu a:hover:after {
        opacity: 1; }
  #kv .kv_imgs {
    pointer-events: none;
    width: 94.4%;
    height: 107.8785391875%;
    left: 5.4666666667%;
    top: 6.8526877308%;
    max-width: 2000px;
    max-height: 1557px;
    z-index: 10;
    position: absolute;
    bottom: 0; }
    #kv .kv_imgs .img {
      z-index: 10;
      position: absolute;
      opacity: 0;
      opacity: 0;
      left: 50%;
      top: 50%;
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transition: opacity 0.1s ease, -webkit-transform 1s cubic-bezier(0.22, 1.3, 0.36, 1);
      transition: opacity 0.1s ease, -webkit-transform 1s cubic-bezier(0.22, 1.3, 0.36, 1);
      transition: transform 1s cubic-bezier(0.22, 1.3, 0.36, 1), opacity 0.1s ease;
      transition: transform 1s cubic-bezier(0.22, 1.3, 0.36, 1), opacity 0.1s ease, -webkit-transform 1s cubic-bezier(0.22, 1.3, 0.36, 1);
      will-change: transform, opacity;
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-transition-delay: 1s;
              transition-delay: 1s; }
    #kv .kv_imgs .-boy {
      width: 55.790960452%;
      height: 79.802206162%;
      top: 20.197793838%;
      left: 13.3121468927%;
      position: absolute;
      z-index: 5;
      -webkit-transition-duration: 0.6s, 0.1s;
              transition-duration: 0.6s, 0.1s; }
    #kv .kv_imgs .-girl {
      width: 45.7274011299%;
      height: 88.4747052111%;
      top: 0%;
      left: 38.8771186441%;
      position: absolute;
      z-index: 10; }
    #kv .kv_imgs .-chara-Y {
      -webkit-transform: scale(0.05) translate(150%, 100%);
              transform: scale(0.05) translate(150%, 100%);
      width: 28.7429378531%;
      height: 28.6801065044%;
      top: 17.6112590339%;
      left: 0.2118644068%;
      position: absolute;
      z-index: 5; }
    #kv .kv_imgs .-chara-R {
      -webkit-transform: scale(0.4) translate(0, 120%);
              transform: scale(0.4) translate(0, 120%);
      width: 32.2740112994%;
      height: 40.6238113351%;
      top: 3.6896158235%;
      left: 29.4491525424%;
      position: absolute;
      z-index: 5;
      z-index: 3; }
    #kv .kv_imgs .-chara-O {
      -webkit-transform: scale(0.1) translate(-200%, 80%);
              transform: scale(0.1) translate(-200%, 80%);
      width: 25.1412429379%;
      height: 24.572080639%;
      top: 19.7793837961%;
      left: 74.8587570621%;
      position: absolute;
      z-index: 5;
      -webkit-transition-duration: 0.8s, 0.1s;
              transition-duration: 0.8s, 0.1s; }
    #kv .kv_imgs .-chara-P {
      -webkit-transform: scale(0) translate(50%, 50%);
              transform: scale(0) translate(50%, 50%);
      width: 33.0508474576%;
      height: 28.0715100799%;
      top: 40.1673640167%;
      left: 0%;
      position: absolute;
      z-index: 5;
      -webkit-transition-duration: 0.6s, 0.1s;
              transition-duration: 0.6s, 0.1s; }
    #kv .kv_imgs .-chara-G {
      -webkit-transform: scale(0.3) translate(-150%, 30%);
              transform: scale(0.3) translate(-150%, 30%);
      width: 28.6016949153%;
      height: 28.3758082921%;
      top: 38.8740966147%;
      left: 71.3983050847%;
      position: absolute;
      z-index: 5; }
  #kv .bnr_area {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 31.8333333333%;
    height: auto;
    right: 1%;
    bottom: 15.8%;
    z-index: 40;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
    #kv .bnr_area p {
      display: block;
      width: 49.2146596859%; }
      #kv .bnr_area p a {
        position: relative;
        display: block; }
        #kv .bnr_area p a:after {
          content: "";
          display: block;
          position: absolute;
          inset: 0;
          -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
                  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
          mix-blend-mode: multiply;
          z-index: 0;
          pointer-events: none;
          border-radius: 15px; }
        #kv .bnr_area p a > img {
          position: relative;
          border-radius: 15px;
          z-index: 5; }
        #kv .bnr_area p a .arrow {
          position: absolute;
          width: 10.6382978723%;
          right: 4.6808510638%;
          top: 12.3076923077%;
          z-index: 10;
          --bg-color:var(--base-color-gray); }
        @media screen and (min-width: 801px) {
          #kv .bnr_area p a:hover .arrow {
            --bg-color:var(--theme-color); } }

.load #kv:before {
  -webkit-transform: scale(1);
          transform: scale(1); }
.load #kv h1, .load #kv h2, .load #kv h3, .load #kv .kv-menu, .load #kv .bnr_area {
  opacity: 1;
  -webkit-transition-delay: .4s;
          transition-delay: .4s; }
.load #kv .kv_imgs .img {
  -webkit-transform: scale(1) translate(0, 0);
          transform: scale(1) translate(0, 0);
  opacity: 1; }

@media screen and (max-width: 1000px) {
  #kv {
    max-height: 1600px;
    aspect-ratio: 800/1330; }
    #kv:before {
      height: 90%; }
    #kv .inr {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      max-width: 2000px; }
    #kv h1 {
      position: relative;
      display: block;
      width: 90.875%;
      margin: 0 auto;
      top: 2.6315789474%; }
    #kv h2 {
      position: absolute;
      display: block;
      width: 36.75%;
      left: 43.375%;
      top: 2.6315789474%; }
    #kv h3 {
      left: 0;
      right: 0;
      top: auto;
      bottom: 0;
      width: 41.75%;
      height: auto;
      margin: auto; }
    #kv .kv-menu {
      display: none; }
    #kv .kv_imgs {
      pointer-events: none;
      width: 142.75%;
      height: 81.954887218%;
      left: -11.375%;
      top: 19.6992481203%; }
      #kv .kv_imgs .img {
        z-index: 10;
        position: absolute;
        opacity: 0;
        opacity: 0;
        left: 50%;
        top: 50%;
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transition: opacity 0.1s ease, -webkit-transform 1s cubic-bezier(0.22, 1.3, 0.36, 1);
        transition: opacity 0.1s ease, -webkit-transform 1s cubic-bezier(0.22, 1.3, 0.36, 1);
        transition: transform 1s cubic-bezier(0.22, 1.3, 0.36, 1), opacity 0.1s ease;
        transition: transform 1s cubic-bezier(0.22, 1.3, 0.36, 1), opacity 0.1s ease, -webkit-transform 1s cubic-bezier(0.22, 1.3, 0.36, 1);
        will-change: transform, opacity;
        -webkit-transform-origin: center center;
                transform-origin: center center;
        -webkit-transition-delay: 1s;
                transition-delay: 1s; }
      #kv .kv_imgs .-boy {
        width: 58.1436077058%;
        height: 80.9174311927%;
        top: 19.0825688073%;
        left: 10.6830122592%;
        position: absolute;
        z-index: 8;
        -webkit-transition-duration: 0.6s, 0.1s;
                transition-duration: 0.6s, 0.1s; }
      #kv .kv_imgs .-girl {
        width: 47.2854640981%;
        height: 88.9908256881%;
        top: 0%;
        left: 32.3992994746%;
        position: absolute;
        z-index: 10; }
      #kv .kv_imgs .-chara-Y {
        -webkit-transform: scale(0.05) translate(150%, 100%);
                transform: scale(0.05) translate(150%, 100%);
        width: 33.4500875657%;
        height: 32.4770642202%;
        top: 17.5229357798%;
        left: 3.415061296%;
        position: absolute;
        z-index: 5; }
      #kv .kv_imgs .-chara-R {
        -webkit-transform: scale(0.4) translate(0, 120%);
                transform: scale(0.4) translate(0, 120%);
        width: 46.4098073555%;
        height: 41.0091743119%;
        top: 0.6422018349%;
        left: 22.3292469352%;
        position: absolute;
        z-index: 5;
        z-index: 3; }
      #kv .kv_imgs .-chara-O {
        -webkit-transform: scale(0.1) translate(-200%, 80%);
                transform: scale(0.1) translate(-200%, 80%);
        width: 34.238178634%;
        height: 30.8256880734%;
        top: 27.7064220183%;
        left: 65.761821366%;
        position: absolute;
        z-index: 5;
        -webkit-transition-duration: 0.8s, 0.1s;
                transition-duration: 0.8s, 0.1s; }
      #kv .kv_imgs .-chara-P {
        -webkit-transform: scale(0) translate(50%, 50%);
                transform: scale(0) translate(50%, 50%);
        width: 37.3029772329%;
        height: 30.9174311927%;
        top: 50.6422018349%;
        left: 0%;
        position: absolute;
        z-index: 4;
        -webkit-transition-duration: 0.6s, 0.1s;
                transition-duration: 0.6s, 0.1s; }
      #kv .kv_imgs .-chara-G {
        -webkit-transform: scale(0.3) translate(-150%, 30%);
                transform: scale(0.3) translate(-150%, 30%);
        width: 34.5008756567%;
        height: 33.0275229358%;
        top: 52.5688073394%;
        left: 61.3835376532%;
        position: absolute;
        z-index: 5; }
    #kv .bnr_area {
      display: none; } }
@media screen and (max-width: 800px) {
  #kv h2 {
    top: 3.7593984962%; } }
/* ==========================================================================
	intro
========================================================================== */
.intro {
  position: relative;
  padding: 14rem 0 33.5rem;
  z-index: 100; }
  .intro .illust_area {
    position: absolute;
    left: 0;
    top: 2rem;
    aspect-ratio: 1153/3200;
    width: 38.4333333333%;
    max-width: 600px;
    --W:1153;
    --H:3000; }
    .intro .illust_area .chara {
      position: absolute;
      width: calc((var(--c_W)/var(--W))*100%);
      top: calc((var(--c_T)/var(--H))*100%);
      left: calc((var(--c_L)/var(--W))*100%);
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      opacity: 0; }
      .intro .illust_area .chara.move {
        -webkit-animation: nyuSlideIn 0.5s var(--easePopUp) forwards;
                animation: nyuSlideIn 0.5s var(--easePopUp) forwards; }
    .intro .illust_area .-O {
      --c_W:793;
      top: 0;
      --c_L:-90;
      z-index: 5; }
    .intro .illust_area .-P {
      --c_W:535;
      --c_T: 656;
      --c_L:-102;
      z-index: 3; }
    .intro .illust_area .-G {
      --c_W:777;
      --c_T:1044;
      left: auto;
      right: 0;
      z-index: 2; }
    .intro .illust_area .-Y {
      --c_W:709;
      --c_T: 1500;
      --c_L:-104;
      z-index: 5; }
    .intro .illust_area .-R {
      --c_W:1098;
      top: auto;
      bottom: 0;
      --c_L:-80;
      z-index: 3; }
      .intro .illust_area .-R:after {
        content: "";
        display: block;
        position: absolute;
        width: 36.5209471767%;
        top: calc((53/1036)* -100%);
        right: calc((110/1098) * -100%);
        aspect-ratio: 401/185;
        background: url(../img/top/intro-bubble.svg);
        background-size: cover;
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
        -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
        transition: opacity .3s ease, -webkit-transform .3s ease;
        transition: transform .3s ease, opacity .3s ease;
        transition: transform .3s ease, opacity .3s ease, -webkit-transform .3s ease;
        -webkit-transition-delay: .8s;
                transition-delay: .8s; }
      .intro .illust_area .-R.move:after {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0); }
  .intro .text_area {
    display: inline-block;
    padding-left: 41.1666666667%;
    padding-right: 50px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .intro h2 {
    font-size: var(--fz58);
    --lh: calc(108/59);
    position: relative;
    /*
    overflow: hidden;
    */
    line-height: calc(var(--lh)* 1em);
    padding-top: .1px;
    padding-bottom: .1px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 12.5rem; }
    .intro h2::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
      margin-top: calc((1 - var(--lh))* .5em); }
    .intro h2::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: calc((1 - var(--lh))* .5em); }
    @media screen and (max-width: 1200px) {
      .intro h2 {
        font-size: var(--fz50); } }
  .intro .texts {
    display: table;
    margin: 0 auto; }
    .intro .texts > p {
      font-size: var(--fz19);
      --lh:calc(88/38);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      color: #fff;
      font-weight: 500;
      letter-spacing: 0.06em;
      margin-bottom: 10rem; }
      .intro .texts > p::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .intro .texts > p::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
  .intro h3 {
    font-size: var(--fz34);
    --lh:1.2;
    position: relative;
    /*
    overflow: hidden;
    */
    line-height: calc(var(--lh)* 1em);
    padding-top: .1px;
    padding-bottom: .1px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em; }
    .intro h3::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
      margin-top: calc((1 - var(--lh))* .5em); }
    .intro h3::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: calc((1 - var(--lh))* .5em); }
    .intro h3 .en {
      font-size: var(--fz44);
      font-weight: 400; }
    .intro h3 .quote {
      margin: 0 .8rem; }
    .intro h3 + h3 {
      margin-top: 2.5rem;
      margin-left: -3rem; }
  .intro .link_wrap {
    position: relative;
    margin-left: 0;
    margin-top: 9.5rem;
    width: 100%;
    max-width: 400px; }
  .intro .link_btn-about {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 30px 33px 28px;
    border-radius: 26px;
    width: 100%;
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    z-index: 5; }
    .intro .link_btn-about .illust {
      width: 70px;
      position: absolute;
      right: -19px;
      top: -19px;
      z-index: 10;
      -webkit-transition: -webkit-transform .4s ease;
      transition: -webkit-transform .4s ease;
      transition: transform .4s ease;
      transition: transform .4s ease, -webkit-transform .4s ease; }
    .intro .link_btn-about .en {
      display: block;
      font-size: var(--fz16);
      font-weight: 600;
      color: var(--theme-color);
      letter-spacing: 0.04em;
      margin-bottom: 3.3rem; }
    .intro .link_btn-about .zen-maru {
      font-size: var(--fz25);
      font-weight: 600; }
      .intro .link_btn-about .zen-maru img {
        width: 140px;
        margin-right: .8rem; }
    .intro .link_btn-about .arrow {
      position: absolute;
      right: 2rem;
      bottom: 1.7rem; }
  @media screen and (min-width: 801px) {
    .intro a:hover .link_btn-about {
      -webkit-transform: translate(10px, 10px);
              transform: translate(10px, 10px); }
      .intro a:hover .link_btn-about .illust {
        -webkit-transform: translateX(-20px);
                transform: translateX(-20px); } }

@media screen and (max-width: 1000px) {
  .intro {
    padding-bottom: 15rem; }
    .intro .illust_area {
      width: 30%;
      top: 50%;
      -webkit-transform: translateY(-40%);
              transform: translateY(-40%); }
    .intro .text_area {
      width: 100%;
      padding-left: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
    .intro h2 {
      margin: 0 auto 10rem;
      display: table;
      padding-left: 50px; }
    .intro .texts {
      margin-left: 35%;
      margin-right: 0; } }
@media screen and (max-width: 800px) {
  .intro {
    padding-top: 16rem;
    background: var(--base-color-blue);
    padding-bottom: clamp(135px, 31.25vw, 200px); }
    .intro .text_area {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
    .intro .illust_area {
      position: relative;
      top: auto;
      left: auto;
      aspect-ratio: 329/869;
      width: 41.125%;
      --W:329;
      --H:869;
      max-width: 250px;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
      top: auto;
      margin-top: 10vw;
      -webkit-transform: translateX(2.75vw);
              transform: translateX(2.75vw); }
      .intro .illust_area .chara {
        -webkit-transform: translateX(50%);
                transform: translateX(50%); }
        .intro .illust_area .chara img {
          -webkit-transform: var(--hanten);
                  transform: var(--hanten); }
      .intro .illust_area .-O {
        --c_W:216;
        top: auto;
        bottom: 0;
        --c_L:108;
        z-index: 5; }
      .intro .illust_area .-P {
        --c_W:146;
        --c_T: 400;
        --c_L:183;
        z-index: 6; }
      .intro .illust_area .-G {
        --c_W:211;
        --c_T:361;
        left: 0;
        right: auto;
        z-index: 2; }
      .intro .illust_area .-Y {
        --c_W:193;
        --c_T: 231;
        --c_L:136;
        z-index: 5; }
      .intro .illust_area .-R {
        --c_W:299;
        top: 0;
        bottom: auto;
        --c_L:24;
        z-index: 3; }
        .intro .illust_area .-R:after {
          width: 48.8294314381%;
          top: calc((67/282)* -100%);
          right: calc((130/299) * 100%);
          -webkit-transition-delay: .5s;
                  transition-delay: .5s;
          background-image: url(../img/top/intro-bubble_sp.svg); }
    .intro h2 {
      width: 84%;
      margin: 0 auto 6.3rem;
      padding-left: 0;
      font-size: var(--fz24);
      --lh: calc(94/51);
      -webkit-box-ordinal-group: 1;
          -ms-flex-order: 0;
              order: 0; }
    .intro .texts {
      width: 58.875%;
      display: table;
      margin: 0;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
      -webkit-transform: translateX(2.75vw);
              transform: translateX(2.75vw);
      padding-left: 5vw;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .intro .texts > p {
        font-size: var(--fz14);
        --lh:calc(26/14);
        margin-bottom: 6rem; }
    .intro h3 {
      font-size: var(--fz20);
      white-space: nowrap; }
      .intro h3 .en {
        font-size: var(--fz26); }
      .intro h3 .quote {
        font-size: var(--fz20);
        margin: 0; }
      .intro h3 + h3 {
        margin-top: 1.5rem;
        margin-left: -.5rem; }
    .intro .link_wrap {
      margin-top: 4.5rem;
      width: 100%; }
    .intro .link_btn-about {
      padding: 18px 20px 15px;
      border-radius: 20px;
      width: 100%; }
      .intro .link_btn-about .illust {
        width: 40px;
        right: -11px;
        top: -11px; }
      .intro .link_btn-about .en {
        display: block;
        font-size: var(--fz9);
        margin-bottom: 2.5rem; }
      .intro .link_btn-about .zen-maru {
        font-size: var(--fz16); }
        .intro .link_btn-about .zen-maru img {
          width: 90px;
          margin-right: .6rem; }
      .intro .link_btn-about .arrow {
        position: absolute;
        right: 1.2rem;
        bottom: 1rem; } }
  @media screen and (max-width: 800px) and (min-width: 801px) {
    .intro a:hover .link_btn-about {
      -webkit-transform: translate(10px, 10px);
              transform: translate(10px, 10px); }
      .intro a:hover .link_btn-about .illust {
        -webkit-transform: translateX(-20px);
                transform: translateX(-20px); } }

/* ==========================================================================
----wave-slide_area
========================================================================== */
.wave-slide_area {
  position: relative;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 604px;
  z-index: 20;
  overflow: hidden; }
  .wave-slide_area:before {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    background: url(../img/common/wave-top.png) repeat-x 0 0;
    background-size: 1038px 42px;
    width: 100%;
    height: 42px;
    overflow: hidden;
    -webkit-animation: loop-wave 100s linear infinite;
            animation: loop-wave 100s linear infinite;
    z-index: 20; }
  .wave-slide_area:after {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: url(../img/common/wave-top.png) repeat-x 0 0;
    background-size: 1038px 42px;
    -webkit-transform: var(--hanten);
            transform: var(--hanten);
    width: 100%;
    height: 42px;
    overflow: hidden;
    -webkit-animation: loop-wave-rev 85s linear infinite;
            animation: loop-wave-rev 85s linear infinite;
    z-index: 20; }
  .wave-slide_area .slide_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: loop-slide 100s infinite linear 1s both;
    animation: loop-slide 100s infinite linear 1s both; }
  .wave-slide_area .slides {
    position: relative;
    width: 906px; }

@-webkit-keyframes loop-wave {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 1038px 0; } }

@keyframes loop-wave {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 1038px 0; } }
@-webkit-keyframes loop-wave-rev {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1038px 0; } }
@keyframes loop-wave-rev {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1038px 0; } }
@media screen and (max-width: 800px) {
  .wave-slide_area {
    height: 321px; }
    .wave-slide_area:before {
      background-size: 568px 23px;
      height: 23px; }
    .wave-slide_area:after {
      background-size: 568px 23px;
      height: 23px; }
    .wave-slide_area .slide_box {
      -webkit-animation: loop-slide 100s infinite linear 1s both;
      animation: loop-slide 100s infinite linear 1s both; }
    .wave-slide_area .slides {
      width: 482px; } }
/* ==========================================================================
----pickup
========================================================================== */
.pickup {
  padding-top: 12.5rem;
  padding-bottom: 17rem; }
  .pickup .en-tit {
    color: #fff;
    margin-bottom: 6rem; }
  .pickup .swiper-wrapper {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition-timing-function: var(--easeOutCubic);
            transition-timing-function: var(--easeOutCubic); }
  .pickup .swiper-slide {
    position: relative;
    width: 284px;
    padding-bottom: 15px; }
    .pickup .swiper-slide:after {
      content: "";
      display: block;
      position: absolute;
      left: 15px;
      top: 15px;
      background: rgba(0, 0, 0, 0.15);
      mix-blend-mode: multiply;
      width: 269px;
      -webkit-mask-position: center center;
      mask-position: center center;
      -webkit-mask-size: cover;
      mask-size: cover;
      pointer-events: none;
      z-index: 1; }
    .pickup .swiper-slide a {
      position: relative;
      display: block;
      background: #fff;
      -webkit-mask-position: center center;
      mask-position: center center;
      -webkit-mask-size: cover;
      mask-size: cover;
      width: 269px;
      z-index: 5; }
      .pickup .swiper-slide a .img {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto; }
      .pickup .swiper-slide a .illust {
        z-index: 5;
        position: absolute; }
        .pickup .swiper-slide a .illust img {
          -webkit-animation: swingRotateSmooth 3s ease-in-out infinite;
                  animation: swingRotateSmooth 3s ease-in-out infinite;
          -webkit-transform-origin: center center;
                  transform-origin: center center; }
      .pickup .swiper-slide a .arrow {
        position: absolute;
        z-index: 10; }
    .pickup .swiper-slide.-event a, .pickup .swiper-slide.-event:after {
      aspect-ratio: 538/726;
      -webkit-mask-image: url(../img/top/pickup-mask_event.svg);
              mask-image: url(../img/top/pickup-mask_event.svg); }
    .pickup .swiper-slide.-event .img {
      width: 89.219330855%;
      top: 10.7438016529%; }
    .pickup .swiper-slide.-event .illust {
      width: 40.7063197026%;
      right: 5.7620817844%;
      top: 72.4517906336%; }
      .pickup .swiper-slide.-event .illust img {
        -webkit-animation: floatWavy 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
                animation: floatWavy 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite; }
    .pickup .swiper-slide.-event .arrow {
      left: 68.029739777%;
      bottom: 22.0385674931%; }
    .pickup .swiper-slide.-staff a, .pickup .swiper-slide.-staff:after {
      aspect-ratio: 538/703;
      -webkit-mask-image: url(../img/top/pickup-mask_staff.svg);
              mask-image: url(../img/top/pickup-mask_staff.svg); }
    .pickup .swiper-slide.-staff .img {
      width: 100%;
      top: 11.9487908962%; }
    .pickup .swiper-slide.-staff .illust {
      width: 51.6728624535%;
      right: 24.907063197%;
      top: 60.7396870555%; }
      .pickup .swiper-slide.-staff .illust img {
        -webkit-animation: swingRotateRandomish 3s ease-in-out infinite;
                animation: swingRotateRandomish 3s ease-in-out infinite; }
    .pickup .swiper-slide.-staff .arrow {
      left: 76.2081784387%;
      bottom: 4.1251778094%; }
    .pickup .swiper-slide.-recipe a, .pickup .swiper-slide.-recipe:after {
      aspect-ratio: 538/760;
      -webkit-mask-image: url(../img/top/pickup-mask_recipe.svg);
              mask-image: url(../img/top/pickup-mask_recipe.svg); }
    .pickup .swiper-slide.-recipe .img {
      width: 90.1486988848%;
      top: 12.1052631579%; }
    .pickup .swiper-slide.-recipe .illust {
      width: 50%;
      height: 37.7631578947%;
      -webkit-mask-position: center center;
      mask-position: center center;
      -webkit-mask-size: cover;
      mask-size: cover;
      -webkit-mask-image: url(../img/top/pickup-slide_recipe-mask.svg);
              mask-image: url(../img/top/pickup-slide_recipe-mask.svg);
      right: 0.7434944238%;
      top: 28.1578947368%; }
      .pickup .swiper-slide.-recipe .illust img {
        position: absolute;
        width: 62.0817843866%;
        right: 9.6654275093%;
        top: 20.9059233449%;
        -webkit-transform-origin: left bottom;
                transform-origin: left bottom; }
    .pickup .swiper-slide.-recipe .arrow {
      left: 65.2416356877%;
      top: 21.0526315789%; }
    .pickup .swiper-slide.-careers a, .pickup .swiper-slide.-careers:after {
      aspect-ratio: 538/771;
      -webkit-mask-image: url(../img/top/pickup-mask_careers.svg);
              mask-image: url(../img/top/pickup-mask_careers.svg); }
    .pickup .swiper-slide.-careers .img {
      width: 100%;
      top: 1px; }
    .pickup .swiper-slide.-careers .illust {
      width: 102.6022304833%;
      right: calc((7/538)*-100%);
      top: calc((11/552)*-100%); }
      .pickup .swiper-slide.-careers .illust img {
        -webkit-animation: swingRotate 3s ease-in-out infinite;
                animation: swingRotate 3s ease-in-out infinite; }
    .pickup .swiper-slide.-careers .arrow {
      right: 8.1784386617%;
      bottom: 6.6147859922%; }
    .pickup .swiper-slide.-experience a, .pickup .swiper-slide.-experience:after {
      aspect-ratio: 538/731;
      -webkit-mask-image: url(../img/top/pickup-mask_experience.svg);
              mask-image: url(../img/top/pickup-mask_experience.svg); }
    .pickup .swiper-slide.-experience .img {
      width: 90.3345724907%;
      top: 3.830369357%; }
    .pickup .swiper-slide.-experience .illust {
      width: 28.624535316%;
      left: 77.3234200743%;
      top: 55.950752394%; }
      .pickup .swiper-slide.-experience .illust img {
        -webkit-animation: floatSmooth 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
                animation: floatSmooth 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite; }
    .pickup .swiper-slide.-experience .arrow {
      right: 8.1784386617%;
      bottom: 6.976744186%; }
    @media screen and (min-width: 801px) {
      .pickup .swiper-slide:hover a {
        -webkit-transform: translate(15px, 15px);
                transform: translate(15px, 15px); } }

@media screen and (max-width: 800px) {
  .pickup {
    padding-top: clamp(58.8px, 24.5vw, 125.44px);
    padding-bottom: clamp(45.6px, 19vw, 97.28px); }
    .pickup .en-tit {
      margin-bottom: 2rem; }
    .pickup .swiper-slide {
      position: relative;
      width: 216px;
      padding-bottom: 8px; }
      .pickup .swiper-slide:after {
        left: 8px;
        top: 8px;
        width: 207px; }
      .pickup .swiper-slide a {
        width: 207px; } }
/* ==========================================================================
----world
========================================================================== */
.world {
  position: relative; }
  .world.-demo {
    padding-top: 15rem; }
  .world .text_area {
    position: relative;
    text-align: center;
    color: #fff;
    margin-bottom: 6.5rem;
    z-index: 5; }
  .world .read {
    font-size: var(--fz39);
    --lh: calc(128/78);
    font-weight: 700;
    letter-spacing: 0.02em;
    position: relative;
    /*
    overflow: hidden;
    */
    line-height: calc(var(--lh)* 1em);
    padding-top: .1px;
    padding-bottom: .1px;
    margin-bottom: 4.2rem; }
    .world .read::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
      margin-top: calc((1 - var(--lh))* .5em); }
    .world .read::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: calc((1 - var(--lh))* .5em); }
  .world .sub-tit {
    width: 325px;
    margin: 0 auto 1.9rem; }
  .world h2 {
    width: 80%;
    max-width: 840px;
    margin: 0 auto 5.5rem; }
  .world .zen-kaku {
    font-size: var(--fz20);
    --lh: calc(72/40);
    font-weight: 700;
    letter-spacing: 0.04em;
    position: relative;
    /*
    overflow: hidden;
    */
    line-height: calc(var(--lh)* 1em);
    padding-top: .1px;
    padding-bottom: .1px;
    margin-bottom: 3rem;
    margin: 0 auto 3rem; }
    .world .zen-kaku::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
      margin-top: calc((1 - var(--lh))* .5em); }
    .world .zen-kaku::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: calc((1 - var(--lh))* .5em); }
  .world .cloud_area {
    position: absolute;
    width: 105.4%;
    max-width: 1581px;
    top: 3.4rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    aspect-ratio: 3162/1641;
    z-index: 1;
    opacity: .3;
    --c_area_W:3162;
    --c_area_H:1641; }
    .world .cloud_area .cloud {
      display: block;
      position: absolute;
      width: calc((var(--c_W)/var(--c_area_W))*100%);
      top: calc((var(--c_T)/var(--c_area_H))*100%);
      left: calc((var(--c_L)/var(--c_area_W))*100%); }
    .world .cloud_area .-v2 {
      --c_W:137; }
    .world .cloud_area .-v3 {
      --c_W:207; }
    .world .cloud_area .-v4 {
      --c_W:278; }
    .world .cloud_area .-l01 {
      --c_T:76;
      --c_L:437;
      -webkit-animation: cloudDrift 10s steps(2) infinite;
              animation: cloudDrift 10s steps(2) infinite; }
    .world .cloud_area .-l02 {
      --c_T:572;
      left: 0;
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite;
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
    .world .cloud_area .-l03 {
      --c_T:837;
      --c_L:596;
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite;
      -webkit-animation-delay: 2s;
              animation-delay: 2s; }
    .world .cloud_area .-l04 {
      --c_T:1007;
      --c_L:424;
      -webkit-animation: cloudDrift 8s steps(2) infinite;
              animation: cloudDrift 8s steps(2) infinite; }
    .world .cloud_area .-l05 {
      --c_T:1549;
      --c_L:236;
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite; }
    .world .cloud_area .-r01 {
      top: 0;
      --c_L:2365;
      -webkit-animation: cloudFloatUpDown 4s steps(2) infinite;
              animation: cloudFloatUpDown 4s steps(2) infinite;
      -webkit-animation-delay: 1.5s;
              animation-delay: 1.5s; }
    .world .cloud_area .-r02 {
      --c_T:240;
      --c_L:2660;
      -webkit-animation: cloudDrift 12s steps(2) infinite;
              animation: cloudDrift 12s steps(2) infinite; }
    .world .cloud_area .-r03 {
      --c_T:962;
      --c_L:2423;
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite; }
    .world .cloud_area .-r04 {
      --c_T:1173;
      --c_L:2840;
      -webkit-animation: cloudDrift 8s steps(2) infinite;
              animation: cloudDrift 8s steps(2) infinite;
      -webkit-animation-delay: 2s;
              animation-delay: 2s; }
    .world .cloud_area .-r05 {
      --c_T:1561;
      --c_L:2710;
      -webkit-animation: cloudDrift 6s steps(2) infinite;
              animation: cloudDrift 6s steps(2) infinite; }
  .world .island {
    position: relative;
    width: 90%;
    max-width: 1127px;
    aspect-ratio: 1127/567;
    margin: 0 auto; }
    .world .island .area_wrap {
      position: absolute;
      width: 100%;
      aspect-ratio: 2254/2303;
      --W:2254;
      --H:2303; }
    .world .island .area {
      position: absolute;
      width: calc((var(--area_W)/var(--W))*100%);
      top: calc((var(--area_T)/var(--H))*100%);
      left: calc((var(--area_L)/var(--W))*100%);
      z-index: 3; }
      .world .island .area .chara {
        position: absolute;
        width: calc((var(--chara_W)/var(--area_W))*100%);
        top: calc((var(--chara_T)/var(--area_H))*100%);
        left: calc((var(--chara_L)/var(--area_W))*100%);
        z-index: 10; }
      .world .island .area .btn-wrap {
        position: absolute;
        width: calc((var(--btn_W)/var(--area_W))*100%);
        top: calc((var(--btn_T)/var(--area_H))*100%);
        left: calc((var(--btn_L)/var(--area_W))*100%);
        z-index: 15;
        -webkit-transform-origin: bottom right;
                transform-origin: bottom right;
        -webkit-transition: -webkit-transform 0.4s var(--easeOutCubic);
        transition: -webkit-transform 0.4s var(--easeOutCubic);
        transition: transform 0.4s var(--easeOutCubic);
        transition: transform 0.4s var(--easeOutCubic), -webkit-transform 0.4s var(--easeOutCubic); }
      .world .island .area .btn {
        display: block;
        -webkit-transform-origin: bottom right;
                transform-origin: bottom right;
        -webkit-animation: btnRotate 2.5s ease-in-out infinite;
                animation: btnRotate 2.5s ease-in-out infinite; }
      .world .island .area:hover .btn-wrap {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); }
    .world .island .parachute {
      --area_W:243;
      --area_T:620;
      --area_L:593;
      z-index: 5;
      -webkit-animation: floatParachute 4s steps(2) infinite;
              animation: floatParachute 4s steps(2) infinite; }
    .world .island .ship {
      --area_W:191;
      --area_T:348;
      --area_L:1083;
      z-index: 5;
      -webkit-animation: floatShip 6s steps(2) infinite;
              animation: floatShip 6s steps(2) infinite; }
    .world .island .-ugodemy {
      --area_W:610;
      --area_L:419;
      --area_H:614;
      top: 0; }
      .world .island .-ugodemy .chara {
        --chara_W:206;
        --chara_T:394;
        --char_L:3;
        -webkit-animation: bounceGravity 3s steps(2) infinite;
                animation: bounceGravity 3s steps(2) infinite; }
      .world .island .-ugodemy .btn-wrap {
        --btn_W:464;
        --btn_T:59;
        --btn_L:-160; }
    .world .island .-ugolab {
      --area_W:492;
      --area_H:698;
      --area_L:1312;
      --area_T:16; }
      .world .island .-ugolab .chara {
        --chara_W:71;
        --chara_T:312;
        --chara_L:261;
        -webkit-transform-origin: left bottom;
                transform-origin: left bottom;
        -webkit-animation: wandPoke02 2s steps(2) infinite;
                animation: wandPoke02 2s steps(2) infinite; }
      .world .island .-ugolab .btn-wrap {
        --btn_W:280;
        --btn_T:29;
        --btn_L:413; }
        .world .island .-ugolab .btn-wrap .btn {
          -webkit-transform-origin: bottom left;
                  transform-origin: bottom left; }
    .world .island .-ugonem {
      --area_W:818;
      --area_H:760;
      --area_L:106;
      --area_T:663; }
      .world .island .-ugonem .chara {
        --chara_W:116;
        --chara_T:221;
        --chara_L:509;
        -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
        -webkit-animation: slideLeftRight 4s steps(2) infinite;
                animation: slideLeftRight 4s steps(2) infinite; }
      .world .island .-ugonem .-p02 {
        --chara_W:95;
        --chara_T:454;
        --chara_L:643;
        -webkit-animation: wandPoke 3s steps(2) infinite;
                animation: wandPoke 3s steps(2) infinite; }
      .world .island .-ugonem .btn-wrap {
        --btn_W:280;
        --btn_T:96;
        --btn_L:-105; }
    .world .island .-ugogym {
      --area_W:718;
      --area_H:1000;
      --area_L:869;
      --area_T:493;
      z-index: 5; }
      .world .island .-ugogym .chara {
        --chara_W:232;
        --chara_T:162;
        --chara_L:320;
        -webkit-animation: swingWavy 5s steps(2) infinite;
                animation: swingWavy 5s steps(2) infinite;
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center; }
      .world .island .-ugogym .-p02 {
        --chara_W:91;
        --chara_T:424;
        --chara_L:513;
        -webkit-animation: swingFast 3s steps(2) infinite;
                animation: swingFast 3s steps(2) infinite; }
      .world .island .-ugogym .btn-wrap {
        --btn_W:280;
        --btn_T:183;
        --btn_L:-10; }
    .world .island .-ugomog {
      --area_W:594;
      --area_H:828;
      --area_L:1507;
      --area_T:646; }
      .world .island .-ugomog .chara {
        --chara_W:71;
        --chara_T:415;
        --chara_L:79;
        -webkit-animation: slideLeftRight 2s steps(2) infinite;
                animation: slideLeftRight 2s steps(2) infinite; }
      .world .island .-ugomog .-p02 {
        --chara_W:139;
        --chara_T:586;
        --chara_L:421;
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
        -webkit-animation: swingRotate 4s steps(2) infinite;
                animation: swingRotate 4s steps(2) infinite; }
      .world .island .-ugomog .btn-wrap {
        --btn_W:280;
        --btn_T:0;
        --btn_L:453; }
        .world .island .-ugomog .btn-wrap .btn {
          -webkit-transform-origin: bottom left;
                  transform-origin: bottom left; }
    .world .island .-entrance {
      --area_W:814;
      --area_H:1034;
      --area_L:732;
      --area_T:1270;
      z-index: 10;
      pointer-events: none; }
      .world .island .-entrance .chara {
        --chara_W:83;
        --chara_T:474;
        --chara_L:474;
        -webkit-animation: bounceFast 5s steps(2) infinite;
                animation: bounceFast 5s steps(2) infinite; }
      .world .island .-entrance .-p02 {
        --chara_W:95;
        --chara_T:722;
        --chara_L:405;
        -webkit-animation-delay: 1.5s;
                animation-delay: 1.5s; }
    .world .island .wave {
      position: absolute;
      top: calc((118/var(--H))*100%);
      left: 50%;
      width: 100vw;
      max-width: 2000px;
      z-index: 1;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }

@media screen and (max-width: 800px) {
  .world.-demo {
    padding-top: 10rem; }
  .world .text_area {
    margin-bottom: 2.5rem; }
  .world .read {
    font-size: var(--fz23);
    --lh: calc(38/23);
    margin-bottom: 2.2rem; }
  .world .sub-tit {
    width: 52.5%;
    max-width: 325px;
    margin: 0 auto 1.5rem; }
  .world h2 {
    width: 61.25%;
    margin: 0 auto 2.5rem; }
  .world .zen-kaku {
    font-size: var(--fz14);
    --lh: calc(26/14);
    letter-spacing: 0.02em;
    margin-bottom: 2rem; }
  .world .cloud_area {
    width: 105.375%;
    top: -6rem;
    left: -0.845vw;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    aspect-ratio: 843/992;
    max-height: 500px;
    --c_area_W:843;
    --c_area_H:992; }
    .world .cloud_area .-v2 {
      --c_W:55; }
    .world .cloud_area .-v3 {
      --c_W:83; }
    .world .cloud_area .-v4 {
      --c_W:113; }
    .world .cloud_area .-l01 {
      --c_T:1;
      --c_L:99; }
    .world .cloud_area .-l02 {
      --c_T:4;
      --c_L:613;
      left: calc((var(--c_L)/var(--c_area_W))*100%); }
    .world .cloud_area .-l03 {
      --c_T:883;
      --c_L:111; }
    .world .cloud_area .-l04 {
      --c_T:535;
      --c_L:696; }
    .world .cloud_area .-l05 {
      --c_T:621;
      left: 0; }
    .world .cloud_area .-r01 {
      --c_T:73;
      --c_L:358;
      top: calc((var(--c_T)/var(--c_area_H))*100%); }
    .world .cloud_area .-r02 {
      --c_T:708;
      --c_L:731; }
    .world .cloud_area .-r04 {
      --c_T:961;
      --c_L:694; }
    .world .cloud_area .-r03,
    .world .cloud_area .-r05 {
      display: none; }
  .world .island {
    position: relative;
    width: 119.25%;
    aspect-ratio: 800/453;
    -webkit-transform: translateX(-10.625vw);
            transform: translateX(-10.625vw);
    z-index: 10; }
    .world .island .area .btn-wrap {
      display: none; }
    .world .island .wave {
      position: absolute;
      top: calc((30/var(--H))*100%);
      left: 10.625vw;
      width: 100vw;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
/* ==========================================================================
	.grand_area
========================================================================== */
.grand_area {
  position: relative;
  width: 100%;
  padding-top: 590px;
  background: url(../img/top/grand-bg.webp) top center repeat-x;
  background-size: 1993px 550px;
  background-color: var(--base-color-beige);
  z-index: 1; }
  .grand_area:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    width: 100%;
    height: 50px;
    background: url(../img/top/grand-top.png) top center repeat-x;
    background-size: 3000px 50px; }
  @media screen and (max-width: 1200px) {
    .grand_area {
      padding-top: 49vw; } }

.world-slide_wrap {
  position: relative;
  z-index: 20;
  background-color: var(--base-color-beige); }

.world-swiper {
  -webkit-transform: translateY(-85px);
          transform: translateY(-85px);
  padding-top: 25px; }
  .world-swiper .swiper-wrapper {
    -webkit-transition-timing-function: var(--easeOutCubic);
            transition-timing-function: var(--easeOutCubic); }
  .world-swiper .swiper-slide {
    width: 623px;
    height: auto;
    background: #fff;
    border-radius: 220px;
    padding: 155px 1rem 128px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .world-swiper .swiper-slide a {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 220px; }
      @media screen and (min-width: 801px) {
        .world-swiper .swiper-slide a:hover .arrow {
          -webkit-transform: scale(1.05);
                  transform: scale(1.05); } }
    .world-swiper .swiper-slide .illust {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto; }
    .world-swiper .swiper-slide h3 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-bottom: 1rem; }
      .world-swiper .swiper-slide h3 img {
        width: 180px; }
      .world-swiper .swiper-slide h3 span {
        display: inline-block;
        font-size: 42px;
        margin-left: 10px;
        letter-spacing: 0.04em; }
    .world-swiper .swiper-slide .bg_txt {
      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;
      width: 71px;
      height: 28px;
      border-radius: 14px;
      color: #fff;
      background: var(--color);
      font-size: 14px;
      font-weight: 700;
      margin: 0 auto 3rem; }
    .world-swiper .swiper-slide h4 {
      color: var(--color);
      font-size: 26px;
      font-weight: 700;
      --lh: calc(84/52);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      margin-bottom: 3rem;
      text-align: center; }
      .world-swiper .swiper-slide h4::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .world-swiper .swiper-slide h4::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .world-swiper .swiper-slide .n_txt {
      max-width: 400px;
      font-weight: 600;
      margin: 0 auto; }
    .world-swiper .swiper-slide .arrow {
      bottom: 45px;
      left: 0;
      right: 0;
      margin: auto;
      -webkit-transition: -webkit-transform 0.4s var(--easeOutCubic);
      transition: -webkit-transform 0.4s var(--easeOutCubic);
      transition: transform 0.4s var(--easeOutCubic);
      transition: transform 0.4s var(--easeOutCubic), -webkit-transform 0.4s var(--easeOutCubic); }
    .world-swiper .swiper-slide.gym {
      --color:var(--theme-color); }
      .world-swiper .swiper-slide.gym .illust {
        width: 149px;
        top: -24px; }
    .world-swiper .swiper-slide.mog {
      --color:var(--base-color-orange); }
      .world-swiper .swiper-slide.mog .illust {
        width: 103px;
        top: 22px; }
    .world-swiper .swiper-slide.nem {
      --color:var(--base-color-perple); }
      .world-swiper .swiper-slide.nem .illust {
        width: 154px;
        top: 45px; }
    .world-swiper .swiper-slide.academy {
      --color:var(--base-color-green); }
      .world-swiper .swiper-slide.academy .illust {
        width: 120px;
        top: 14px; }
    .world-swiper .swiper-slide.labo {
      --color:var(--base-color-yellow); }
      .world-swiper .swiper-slide.labo .illust {
        width: 108px;
        top: 33px; }
  .world-swiper .world-pagination {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
    margin: 2.3rem auto 0; }
    .world-swiper .world-pagination span {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      height: auto !Important;
      padding-bottom: 22px;
      background: none;
      opacity: 1; }
      .world-swiper .world-pagination span:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 11px;
        height: 13px;
        background-size: cover;
        opacity: 0; }
      .world-swiper .world-pagination span.swiper-pagination-bullet-active:after, .world-swiper .world-pagination span:hover:after {
        opacity: 1; }
    .world-swiper .world-pagination img {
      display: inline-block;
      vertical-align: bottom; }
    .world-swiper .world-pagination .icon-01 {
      width: 49px; }
      .world-swiper .world-pagination .icon-01:after {
        background-image: url(../img/top/world-slide_arrow01.svg); }
    .world-swiper .world-pagination .icon-02 {
      width: 37px; }
      .world-swiper .world-pagination .icon-02:after {
        background-image: url(../img/top/world-slide_arrow02.svg); }
    .world-swiper .world-pagination .icon-03 {
      width: 50px; }
      .world-swiper .world-pagination .icon-03:after {
        background-image: url(../img/top/world-slide_arrow03.svg); }
    .world-swiper .world-pagination .icon-04 {
      width: 40px; }
      .world-swiper .world-pagination .icon-04:after {
        background-image: url(../img/top/world-slide_arrow04.svg); }
    .world-swiper .world-pagination .icon-05 {
      width: 39px; }
      .world-swiper .world-pagination .icon-05:after {
        background-image: url(../img/top/world-slide_arrow05.svg); }

@media screen and (max-width: 800px) {
  .grand_area {
    padding-top: 54.125vw;
    background-size: 1068px 301px; }
    .grand_area:before {
      background: var(--base-color-beige); }

  .world-slide_wrap {
    position: relative;
    z-index: 20;
    background-color: var(--base-color-beige); }

  .world-swiper {
    -webkit-transform: translateY(-7vw);
            transform: translateY(-7vw);
    padding-top: 25px; }
    .world-swiper .swiper-wrapper {
      -webkit-transition-timing-function: var(--easeOutCubic);
              transition-timing-function: var(--easeOutCubic); }
    .world-swiper .swiper-slide {
      width: 85vw;
      border-radius: 116px;
      padding: 9.75rem 1rem 11rem; }
      .world-swiper .swiper-slide a {
        border-radius: 116px; }
      .world-swiper .swiper-slide h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin-bottom: 1rem; }
        .world-swiper .swiper-slide h3 img {
          width: 120px; }
        .world-swiper .swiper-slide h3 span {
          font-size: 28px;
          margin-left: 5px; }
      .world-swiper .swiper-slide .bg_txt {
        width: 60px;
        height: 22px;
        border-radius: 11px;
        font-size: 11px;
        margin: 0 auto 1.5rem; }
      .world-swiper .swiper-slide h4 {
        font-size: 18px;
        --lh: calc(25/18);
        margin-bottom: 2rem; }
      .world-swiper .swiper-slide .n_txt {
        width: 75.2941176471%;
        margin: 0 auto; }
      .world-swiper .swiper-slide .arrow {
        width: 40px;
        bottom: 3rem; }
      .world-swiper .swiper-slide.gym .illust {
        width: 97px;
        top: -22px; }
      .world-swiper .swiper-slide.mog .illust {
        width: 68px;
        top: 1rem; }
      .world-swiper .swiper-slide.nem .illust {
        width: 102px;
        top: 2.2rem; }
      .world-swiper .swiper-slide.academy .illust {
        width: 80px;
        top: .7rem; }
      .world-swiper .swiper-slide.labo .illust {
        width: 71px;
        top: 1.6rem; }
    .world-swiper .world-pagination {
      gap: .6rem;
      margin: 2.6rem auto 0; }
      .world-swiper .world-pagination span {
        padding-bottom: 14px; }
        .world-swiper .world-pagination span:after {
          width: 7px;
          height: 8px; }
      .world-swiper .world-pagination .icon-01 {
        width: 32px; }
      .world-swiper .world-pagination .icon-02 {
        width: 24px; }
      .world-swiper .world-pagination .icon-03 {
        width: 33px; }
      .world-swiper .world-pagination .icon-04 {
        width: 25px; }
      .world-swiper .world-pagination .icon-05 {
        width: 25px; } }
/* ==========================================================================
	news
========================================================================== */
.news {
  background: var(--base-color-beige);
  padding-bottom: 16rem; }
  .news .inr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .news .inr .tit_area {
      width: 120px; }
      .news .inr .tit_area .icon {
        display: block;
        width: 84px;
        margin: 0 auto 2.7rem; }
      .news .inr .tit_area h2 {
        display: block;
        font-size: 73px;
        font-weight: 600;
        letter-spacing: 0.02em;
        margin: 0 auto 2rem; }
      .news .inr .tit_area p {
        display: block;
        position: relative;
        font-size: var(--fz20);
        font-weight: 700;
        padding-top: 2rem;
        margin: 0 auto 3rem; }
        .news .inr .tit_area p:before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 12px;
          height: 12px;
          background: url(../img/common/icon-title.svg);
          background-size: cover; }
      .news .inr .tit_area a {
        display: block;
        position: relative;
        font-size: var(--fz16);
        font-weight: 700;
        margin: 0 auto;
        text-align: center; }
        .news .inr .tit_area a .arrow {
          position: relative;
          margin: 0 auto 8px; }
  .news .link_area {
    width: 83.7209302326%;
    max-width: calc(100% - 150px); }
  @media screen and (min-width: 801px) {
    .news .event-links .swiper-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: 0 40px;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-bottom: 2rem; }
      .news .event-links .swiper-wrapper > div {
        width: calc((100% - 80px) / 3); } }
  .news .event-links .swiper-wrapper a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit; }
    .news .event-links .swiper-wrapper a .img_area {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: 60px; }
      .news .event-links .swiper-wrapper a .img_area img {
        -webkit-transition: -webkit-transform 0.4s var(--easeOutCubic);
        transition: -webkit-transform 0.4s var(--easeOutCubic);
        transition: transform 0.4s var(--easeOutCubic);
        transition: transform 0.4s var(--easeOutCubic), -webkit-transform 0.4s var(--easeOutCubic); }
    .news .event-links .swiper-wrapper a .text_area {
      position: relative;
      padding: 15px 0 15px 1rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .news .event-links .swiper-wrapper a .text_area .cate {
        font-size: var(--fz12);
        font-weight: bold;
        display: inline-block;
        padding: 6px 15px;
        background: var(--base-color-gray);
        border-radius: 12px;
        color: #fff; }
      .news .event-links .swiper-wrapper a .text_area .new {
        display: inline-block;
        margin-left: 5px;
        font-size: var(--fz9);
        font-weight: 500;
        color: var(--theme-color);
        padding: 5px 10px 4px;
        border: 1px solid var(--theme-color);
        border-radius: 50%; }
      .news .event-links .swiper-wrapper a .text_area .tit {
        display: block;
        font-size: var(--fz20);
        --lh:calc(28/20);
        position: relative;
        /*
        overflow: hidden;
        */
        line-height: calc(var(--lh)* 1em);
        padding-top: .1px;
        padding-bottom: .1px;
        font-weight: 600;
        margin-top: 13px;
        margin-bottom: 1.3rem;
        padding-right: 45px; }
        .news .event-links .swiper-wrapper a .text_area .tit::before {
          content: '';
          display: block;
          height: 0;
          width: 0;
          /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
          margin-top: calc((1 - var(--lh))* .5em); }
        .news .event-links .swiper-wrapper a .text_area .tit::after {
          content: '';
          display: block;
          height: 0;
          width: 0;
          margin-bottom: calc((1 - var(--lh))* .5em); }
      .news .event-links .swiper-wrapper a .text_area .day {
        font-size: var(--fz12);
        letter-spacing: 0.04em;
        font-weight: 600;
        color: var(--base-color-gray02); }
      .news .event-links .swiper-wrapper a .text_area .arrow {
        position: absolute;
        top: 48px;
        right: 0; }
    @media screen and (min-width: 801px) {
      .news .event-links .swiper-wrapper a:hover .img_area img {
        -webkit-transform: scale(1.08);
                transform: scale(1.08); } }
  .news .news-links > div {
    width: 100%;
    border-bottom: 1px solid var(--base-border-color); }
    .news .news-links > div a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      height: 100%;
      text-decoration: none;
      color: inherit;
      -ms-flex-direction: row;
          flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 30px;
      padding: 15px 5px; }
      .news .news-links > div a .img_area {
        position: relative;
        width: 90px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 20px; }
        .news .news-links > div a .img_area img {
          -webkit-transition: -webkit-transform 0.4s var(--easeOutCubic);
          transition: -webkit-transform 0.4s var(--easeOutCubic);
          transition: transform 0.4s var(--easeOutCubic);
          transition: transform 0.4s var(--easeOutCubic), -webkit-transform 0.4s var(--easeOutCubic); }
      .news .news-links > div a .text_area {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        position: relative;
        margin-left: 25px;
        padding-right: 165px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; }
        .news .news-links > div a .text_area .cate {
          font-size: var(--fz12);
          font-weight: bold;
          display: inline-block;
          padding: 6px 15px;
          background: var(--base-color-gray);
          border-radius: 12px;
          color: #fff; }
        .news .news-links > div a .text_area .new {
          display: inline-block;
          margin-left: 5px;
          font-size: var(--fz9);
          font-weight: 500;
          color: var(--theme-color);
          padding: 5px 10px 4px;
          border: 1px solid var(--theme-color);
          border-radius: 50%; }
        .news .news-links > div a .text_area .tit {
          display: block;
          font-size: var(--fz20);
          --lh:calc(28/20);
          position: relative;
          /*
          overflow: hidden;
          */
          line-height: calc(var(--lh)* 1em);
          padding-top: .1px;
          padding-bottom: .1px;
          margin-top: .8rem;
          padding-left: .5rem;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          font-weight: 600; }
          .news .news-links > div a .text_area .tit::before {
            content: '';
            display: block;
            height: 0;
            width: 0;
            /*
            margin-top: calc((1 - var(--lh)) * 0.5em);
            */
            margin-top: calc((1 - var(--lh))* .5em); }
          .news .news-links > div a .text_area .tit::after {
            content: '';
            display: block;
            height: 0;
            width: 0;
            margin-bottom: calc((1 - var(--lh))* .5em); }
        .news .news-links > div a .text_area .day {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          position: absolute;
          font-size: var(--fz12);
          letter-spacing: 0.04em;
          font-weight: 600;
          color: var(--base-color-gray02);
          right: 60px;
          top: 0;
          bottom: 0;
          margin: auto; }
        .news .news-links > div a .text_area .arrow {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto; }
      @media screen and (min-width: 801px) {
        .news .news-links > div a:hover .img_area img {
          -webkit-transform: scale(1.08);
                  transform: scale(1.08); } }

@media screen and (max-width: 800px) {
  .news {
    padding-top: clamp(18px, 7.5vw, 38.4px);
    padding-bottom: clamp(73.2px, 30.5vw, 156.16px); }
    .news .inr {
      display: block; }
      .news .inr .tit_area {
        position: absolute;
        left: 0;
        top: 0;
        width: 55px; }
        .news .inr .tit_area .icon {
          width: 100%;
          margin: 0 auto 2rem; }
        .news .inr .tit_area h2 {
          display: block;
          font-size: 47px;
          font-weight: 600;
          letter-spacing: 0.02em;
          margin: 0 auto 2rem; }
        .news .inr .tit_area p {
          font-size: var(--fz16);
          padding-top: 1.4rem;
          margin: 0 auto 2.2rem; }
          .news .inr .tit_area p:before {
            width: 8px;
            height: 8px; }
        .news .inr .tit_area a {
          font-size: var(--fz12); }
          .news .inr .tit_area a .arrow {
            position: relative;
            margin: 0 auto 7px; }
    .news .link_area {
      width: 100%;
      max-width: 100%; }
    .news .event-links {
      width: 76.4705882353%;
      margin-left: 27.5862068966%;
      --s_color:var(--base-color-yellow); }
    .news .event-links .swiper-wrapper {
      margin-bottom: 3.3rem; }
      .news .event-links .swiper-wrapper a .img_area {
        border-radius: 47px; }
      .news .event-links .swiper-wrapper a .text_area {
        padding: 10px 5px 0px 5px; }
        .news .event-links .swiper-wrapper a .text_area .cate {
          font-size: var(--fz10);
          padding: 5px 10px; }
        .news .event-links .swiper-wrapper a .text_area .new {
          margin-left: 4px;
          font-size: var(--fz8);
          padding: 5px 10px 4px; }
        .news .event-links .swiper-wrapper a .text_area .tit {
          font-size: var(--fz16);
          --lh:calc(22/16);
          margin-top: 10px;
          margin-bottom: .8rem;
          padding-right: 33px; }
        .news .event-links .swiper-wrapper a .text_area .day {
          font-size: var(--fz10); }
        .news .event-links .swiper-wrapper a .text_area .arrow {
          top: 37px; }
    .news .news-links {
      margin-top: 3rem; }
      .news .news-links > div a {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 0;
        padding: 25px 0; }
        .news .news-links > div a .img_area {
          position: relative;
          width: 20.5882352941%; }
        .news .news-links > div a .text_area {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          position: relative;
          margin-left: 16px;
          padding-right: 50px; }
          .news .news-links > div a .text_area .cate {
            font-size: var(--fz10);
            padding: 5px 10px; }
          .news .news-links > div a .text_area .new {
            margin-left: 4px;
            font-size: var(--fz8);
            padding: 5px 10px 4px; }
          .news .news-links > div a .text_area .tit {
            font-size: var(--fz16);
            --lh:calc(22/16);
            margin-top: 10px;
            margin-bottom: .8rem;
            padding-right: 33px; }
          .news .news-links > div a .text_area .day {
            display: block;
            position: relative;
            font-size: var(--fz10);
            right: auto;
            top: 0auto;
            bottom: auto; }
          .news .news-links > div a .text_area .arrow {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto; } }
/* ==========================================================================
	story
========================================================================== */
.story {
  position: relative;
  padding-top: 24.5rem;
  background: var(--base-color-beige); }
  .story .loop-text_area_wrap {
    position: absolute;
    left: 0;
    top: 16.5rem;
    width: 100%;
    height: 98px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .story .loop-text_area_wrap .loop-text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      -webkit-animation: loop-slide 40s infinite linear 1s both;
      animation: loop-slide 40s infinite linear 1s both; }
    .story .loop-text_area_wrap p {
      position: relative;
      width: 1377px;
      margin-right: 6rem; }
  .story .story-slide {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .story .slide-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-animation: loop-slide 40s infinite linear 1s both;
    animation: loop-slide 40s infinite linear 1s both;
    gap: 20px;
    margin-right: 2rem; }
  .story .swiper-slide {
    width: 290px; }
  .story .card {
    position: relative;
    overflow: hidden;
    height: 620px;
    width: 290px;
    padding-top: 240px;
    border-radius: 60px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .story .card .bg_area {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1; }
    .story .card .en {
      position: relative;
      display: table;
      margin: 0 auto 10px;
      font-size: 32px;
      line-height: 1;
      letter-spacing: 0;
      font-weight: 600;
      --lh:1;
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      z-index: 10; }
      .story .card .en::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .story .card .en::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .story .card .b_txt {
      position: relative;
      text-align: center;
      font-size: 57px;
      letter-spacing: 0.16em;
      z-index: 10; }
    .story .card div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      position: absolute;
      right: 50px;
      bottom: 52px;
      z-index: 10; }
      .story .card div p {
        font-size: 18px;
        font-weight: 700;
        margin-right: 7px; }
      .story .card div .arrow {
        position: relative; }
    @media screen and (min-width: 801px) {
      .story .card:hover .bg_area img {
        -webkit-transform: scale(1.05);
                transform: scale(1.05); } }
  .story .kiji {
    position: relative;
    width: 290px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .story .kiji .bg_area {
      position: relative;
      width: 100%;
      height: 430px;
      border-radius: 60px;
      overflow: hidden;
      margin-bottom: 20px; }
    .story .kiji .text_area {
      width: calc(100% - 30px);
      margin: 0 auto; }
    .story .kiji .b_txt {
      display: block;
      font-size: 18px;
      font-weight: 700;
      --lh:calc(52/36);
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      letter-spacing: 0.04em;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--base-border-color);
      margin-bottom: 10px; }
      .story .kiji .b_txt::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .story .kiji .b_txt::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .story .kiji .en {
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--base-color-gray03);
      margin-right: 10px; }
    .story .kiji .cate {
      display: inline-block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--theme-color);
      margin-right: 10px; }
    @media screen and (min-width: 801px) {
      .story .kiji:hover .bg_area img {
        -webkit-transform: scale(1.05);
                transform: scale(1.05); } }

@media screen and (max-width: 800px) {
  .story {
    padding-top: 15.5rem; }
    .story .loop-text_area_wrap {
      top: 9rem;
      height: 74px; }
      .story .loop-text_area_wrap .loop-text {
        -webkit-animation: loop-slide 40s infinite linear 1s both;
        animation: loop-slide 40s infinite linear 1s both; }
      .story .loop-text_area_wrap p {
        width: 1044px;
        margin-right: 4.5rem; }
    .story .slide-wrapper {
      gap: 15px;
      margin-right: 15px; }
    .story .swiper-slide {
      width: 215px; }
    .story .card {
      height: 480px;
      width: 215px;
      padding-top: 188px;
      border-radius: 46px; }
      .story .card .en {
        margin: 0 auto 15px;
        font-size: 24px; }
      .story .card .b_txt {
        font-size: 44px; }
      .story .card div {
        right: 40px;
        bottom: 40px; }
        .story .card div p {
          font-size: 14px;
          margin-right: 5px; }
    .story .kiji {
      width: 215px; }
      .story .kiji .bg_area {
        height: 340px;
        border-radius: 46px;
        margin-bottom: 14px; }
      .story .kiji .text_area {
        width: calc(100% - 20px); }
      .story .kiji .b_txt {
        font-size: 14px;
        --lh:calc(20/14);
        padding-bottom: 14px;
        margin-bottom: 10px; }
      .story .kiji .en {
        font-size: 11px;
        margin-right: 7px; }
      .story .kiji .cate {
        font-size: 10px;
        margin-right: 5px; } }
/* ==========================================================================
	faq
========================================================================== */
.faq {
  position: relative;
  padding-top: 20rem;
  background: var(--base-color-beige);
  z-index: 10; }
  .faq:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    background: var(--base-color-beige);
    width: 100%;
    height: 15rem;
    border-radius: 0 0 16rem 16rem; }
  .faq .b-illust {
    position: absolute;
    left: 0;
    -webkit-transform: translateX(-120%);
            transform: translateX(-120%);
    top: 10rem;
    width: 23.3333333333%;
    max-width: 700px;
    min-width: 300px;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    -webkit-transition-delay: .4s;
            transition-delay: .4s; }
  .faq.move .b-illust {
    -webkit-transform: translateX(-42%);
            transform: translateX(-42%); }
  .faq .top_con {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-left: 135px;
    margin-bottom: 17.5rem; }
  .faq .tit_area {
    width: 240px; }
    .faq .tit_area h2 {
      font-size: 99px;
      font-weight: 500;
      margin-bottom: 2.5rem; }
    .faq .tit_area .b_txt {
      display: table;
      padding-left: 2.5rem;
      font-size: var(--fz19);
      margin-bottom: 6rem;
      b-xising: border-box; }
      .faq .tit_area .b_txt:before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        top: 2px;
        bottom: 0;
        left: 0;
        margin: auto;
        background: url(../img/common/icon-title.svg);
        background-size: cover; }
    .faq .tit_area a {
      position: relative;
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: var(--fz14);
      font-weight: 700;
      margin-bottom: 1.8rem;
      b-xising: border-box; }
      .faq .tit_area a .only-arrow {
        width: 12px;
        margin-right: .8rem;
        --color:var(--base-color-gray03);
        -webkit-transition: all .4s ease;
        transition: all .4s ease; }
        .faq .tit_area a .only-arrow path, .faq .tit_area a .only-arrow .cls-1 {
          fill: var(--color);
          -webkit-transition: all .4s ease;
          transition: all .4s ease; }
      @media screen and (min-width: 801px) {
        .faq .tit_area a:hover .only-arrow {
          --color:var(--theme-color);
          -webkit-transform: translateX(3px);
                  transform: translateX(3px); } }
  .faq .link_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-left: 3rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px; }
    .faq .link_area > div {
      border-radius: 50px;
      overflow: hidden; }
      .faq .link_area > div a {
        position: relative;
        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;
        gap: 16px;
        padding: 30px 50px;
        overflow: hidden;
        background: #fff; }
        .faq .link_area > div a:after {
          content: "";
          display: block;
          position: absolute;
          width: 74px;
          aspect-ratio: 74/67;
          right: 19.6111111111%;
          bottom: 0;
          opacity: 0;
          background: url(../img/top/faq_icon.svg);
          background-size: cover;
          -webkit-transform: translateY(15px);
                  transform: translateY(15px);
          -webkit-transition: opacity 0.2s ease, -webkit-transform 0.4s var(--easeOutSine);
          transition: opacity 0.2s ease, -webkit-transform 0.4s var(--easeOutSine);
          transition: transform 0.4s var(--easeOutSine), opacity 0.2s ease;
          transition: transform 0.4s var(--easeOutSine), opacity 0.2s ease, -webkit-transform 0.4s var(--easeOutSine); }
        .faq .link_area > div a .en {
          font-weight: 600;
          font-size: var(--fz42);
          color: var(--theme-color);
          -ms-flex-negative: 0;
              flex-shrink: 0;
          -webkit-transition: border 0.4s ease, color 0.4s ease;
          transition: border 0.4s ease, color 0.4s ease; }
        .faq .link_area > div a .b_txt {
          font-size: var(--fz18);
          font-weight: 700;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          color: #222;
          -webkit-transition: border 0.4s ease, color 0.4s ease;
          transition: border 0.4s ease, color 0.4s ease; }
        .faq .link_area > div a .cate {
          display: inline-block;
          font-size: 12px;
          padding: 6px 14px;
          border: 1px solid var(--base-color-gray05);
          border-radius: 9999px;
          white-space: nowrap;
          color: var(--base-color-gray04);
          -webkit-transition: border 0.4s ease, color 0.4s ease;
          transition: border 0.4s ease, color 0.4s ease; }
        @media screen and (min-width: 801px) {
          .faq .link_area > div a:hover {
            background: var(--base-color-green);
            color: #fff; }
            .faq .link_area > div a:hover:after {
              opacity: 1;
              -webkit-transform: translateY(0);
                      transform: translateY(0); }
            .faq .link_area > div a:hover .en, .faq .link_area > div a:hover .b_txt {
              color: #fff; }
            .faq .link_area > div a:hover .cate {
              color: #fff;
              border-color: #fff; } }
  .faq .more_con .en-tit {
    font-size: var(--fz20);
    margin-left: 2rem;
    margin-bottom: 3rem; }
  .faq .more_con .link_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; }
  .faq .more_con .b-box a {
    position: relative;
    display: block;
    border-radius: 2rem;
    background: var(--b-color);
    padding: 7rem 0 4.4rem 4rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .faq .more_con .b-box a .illust {
      position: absolute;
      -webkit-transition: -webkit-transform 0.4s var(--easePopUp);
      transition: -webkit-transform 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp); }
    .faq .more_con .b-box a p {
      font-size: var(--fz26);
      --lh:1.5;
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      font-weight: 700;
      margin-bottom: 1.5rem;
      letter-spacing: 0.04em;
      color: #fff; }
      .faq .more_con .b-box a p::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .faq .more_con .b-box a p::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .faq .more_con .b-box a .en {
      display: block;
      font-size: var(--fz14);
      color: #fff;
      font-weight: 500;
      letter-spacing: 0.04em;
      margin-bottom: 5rem;
      opacity: .6; }
    .faq .more_con .b-box a .img {
      width: 100px;
      border-radius: 10px;
      overflow: hidden; }
    .faq .more_con .b-box a .arrow {
      position: absolute;
      right: 4.5rem;
      bottom: 4.4rem;
      width: 28px;
      background: #fff !Important; }
    @media screen and (min-width: 801px) {
      .faq .more_con .b-box a:hover .illust {
        -webkit-animation: hopUp 0.4s ease-out;
                animation: hopUp 0.4s ease-out; }
      .faq .more_con .b-box a:hover .arrow {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); } }
  .faq .more_con .b-box:first-child a {
    --b-color:var(--theme-color); }
    .faq .more_con .b-box:first-child a .illust {
      width: 90px;
      right: 2.2rem;
      top: -70px; }
    .faq .more_con .b-box:first-child a .arrow.-white {
      --color:var(--theme-color); }
  .faq .more_con .b-box:nth-child(2) a {
    --b-color:var(--base-color-perple); }
    .faq .more_con .b-box:nth-child(2) a .illust {
      width: 105px;
      right: 2.3rem;
      top: -37px; }
    .faq .more_con .b-box:nth-child(2) a .arrow.-white {
      --color:var(--base-color-perple); }
  .faq .more_con .b-box:nth-child(3) a {
    --b-color:var(--base-color-green); }
    .faq .more_con .b-box:nth-child(3) a .illust {
      width: 84px;
      right: 3rem;
      top: -67px; }
    .faq .more_con .b-box:nth-child(3) a .arrow.-white {
      --color:var(--base-color-green); }
  .faq .more_con .s-box a {
    position: relative;
    display: block;
    border-radius: 2rem;
    background: var(--base-color-orange);
    padding: 5.5rem 0 6rem 12.4rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .faq .more_con .s-box a p {
      font-size: var(--fz26);
      --lh:1.5;
      position: relative;
      /*
      overflow: hidden;
      */
      line-height: calc(var(--lh)* 1em);
      padding-top: .1px;
      padding-bottom: .1px;
      font-weight: 700;
      margin-bottom: 1.5rem;
      letter-spacing: 0.04em;
      color: #fff; }
      .faq .more_con .s-box a p::before {
        content: '';
        display: block;
        height: 0;
        width: 0;
        /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
        margin-top: calc((1 - var(--lh))* .5em); }
      .faq .more_con .s-box a p::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
        margin-bottom: calc((1 - var(--lh))* .5em); }
    .faq .more_con .s-box a .en {
      display: block;
      font-size: var(--fz14);
      color: #fff;
      font-weight: 500;
      letter-spacing: 0.04em;
      opacity: .6; }
    .faq .more_con .s-box a .illust {
      position: absolute;
      width: 85px;
      left: 1.7rem;
      top: 3.6rem;
      -webkit-transition: -webkit-transform 0.4s var(--easePopUp);
      transition: -webkit-transform 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp); }
    .faq .more_con .s-box a .arrow.-white {
      position: absolute;
      right: 4.5rem;
      width: 28px;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff !Important;
      --color:var(--base-color-orange); }
    @media screen and (min-width: 801px) {
      .faq .more_con .s-box a:hover .illust {
        -webkit-animation: hopUp 0.4s ease-out;
                animation: hopUp 0.4s ease-out; }
      .faq .more_con .s-box a:hover .arrow {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); } }

@media screen and (max-width: 1300px) {
  .faq .more_con .s-box a {
    padding-left: 11rem; }

  .faq .more_con .b-box a .arrow {
    right: 2rem; }

  .faq .more_con .s-box a .arrow.-white {
    right: 2rem; }

  .faq .more_con .s-box a .illust {
    left: 0; } }
@media screen and (max-width: 1100px) {
  .faq .link_area {
    position: relative;
    display: block;
    margin-left: 0; }
    .faq .link_area > div {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      z-index: 10; }
      .faq .link_area > div a {
        display: block;
        padding: 20px 30px;
        margin-bottom: 1.5rem;
        border-radius: 10px; }
        .faq .link_area > div a .b_txt {
          display: block;
          margin-top: 1.5rem; }
        .faq .link_area > div a .cate {
          position: absolute;
          right: 2rem;
          top: 2rem; }
  .faq .more_con .link_box {
    grid-template-columns: repeat(1, 1fr); }
  .faq .more_con .b-box a {
    padding: 4.4rem 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .faq .more_con .b-box a .img {
      -webkit-box-ordinal-group: 1;
          -ms-flex-order: 0;
              order: 0;
      width: 100px;
      height: 100px; }
    .faq .more_con .b-box a .text {
      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;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      margin-left: 3rem; }
      .faq .more_con .b-box a .text .en {
        margin-bottom: 0; }
    .faq .more_con .b-box a .arrow {
      top: 0;
      bottom: 0;
      margin: auto; }
  .faq .more_con .b-box:first-child a .illust {
    width: 74px;
    right: 8.2rem;
    top: -62px; }
  .faq .more_con .b-box:nth-child(2) a .illust {
    width: 90px;
    right: 6.3rem;
    top: -31px; }
  .faq .more_con .b-box:nth-child(3) a .illust {
    width: 70px;
    right: 7rem;
    top: -62px; }
  .faq .more_con .s-box a {
    padding-left: calc(100px + 7rem); }
    .faq .more_con .s-box a .illust {
      top: 1.7rem; } }
@media screen and (max-width: 800px) {
  .faq {
    padding-top: clamp(81px, 33.75vw, 172.8px);
    padding-bottom: 5rem; }
    .faq:after {
      height: 40px;
      border-radius: 0 0 40px 40px; }
    .faq .b-illust {
      top: clamp(51px, 21.25vw, 108.8px);
      -webkit-transform: translateX(-120%);
              transform: translateX(-120%);
      width: 44.875%;
      min-width: 10px;
      max-width: 230px; }
    .faq.move .b-illust {
      -webkit-transform: translateX(-25%);
              transform: translateX(-25%); }
    .faq .top_con {
      display: block;
      padding-left: 0;
      margin-bottom: 11.5rem; }
      .faq .top_con.-w1220 {
        width: 90%; }
    .faq .tit_area {
      width: 100%;
      padding-left: clamp(10px, 44%, 180px);
      margin-bottom: clamp(46.2px, 19.25vw, 98.56px); }
      .faq .tit_area h2 {
        font-size: 7rem;
        margin-bottom: 2rem; }
      .faq .tit_area .b_txt {
        padding-left: 2rem;
        font-size: var(--fz16);
        margin-bottom: 4rem; }
        .faq .tit_area .b_txt:before {
          width: 8px;
          height: 8px;
          top: 2px; }
      .faq .tit_area a {
        font-size: var(--fz13);
        margin-bottom: 1.5rem; }
        .faq .tit_area a .only-arrow {
          width: 12px;
          margin-right: .7rem; }
    .faq .link_area:before {
      content: "";
      display: block;
      position: absolute;
      right: 13px;
      top: -65px;
      width: 74px;
      height: 71px;
      background: url(../img/common/chara-Y_04.svg);
      background-size: cover;
      z-index: 1;
      -webkit-transition: opacity 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp);
      transition: opacity 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp), opacity 0.4s var(--easePopUp);
      transition: transform 0.4s var(--easePopUp), opacity 0.4s var(--easePopUp), -webkit-transform 0.4s var(--easePopUp);
      opacity: 0;
      -webkit-transform: translateY(30px);
              transform: translateY(30px);
      -webkit-transition-delay: 1s;
              transition-delay: 1s; }
    .faq .link_area.move:before {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1; }
    .faq .link_area > div {
      border-radius: 12px; }
      .faq .link_area > div a {
        padding: 1.5rem 2rem 2.2rem;
        margin-bottom: .5rem; }
        .faq .link_area > div a:after {
          display: none;
          content: "";
          display: block;
          position: absolute;
          width: 74px;
          aspect-ratio: 74/67;
          right: 19.6111111111%;
          bottom: 0;
          opacity: 0;
          background: url(../img/top/faq_icon.svg);
          background-size: cover;
          -webkit-transform: translateY(15px);
                  transform: translateY(15px);
          -webkit-transition: opacity 0.2s ease, -webkit-transform 0.4s var(--easeOutSine);
          transition: opacity 0.2s ease, -webkit-transform 0.4s var(--easeOutSine);
          transition: transform 0.4s var(--easeOutSine), opacity 0.2s ease;
          transition: transform 0.4s var(--easeOutSine), opacity 0.2s ease, -webkit-transform 0.4s var(--easeOutSine); }
        .faq .link_area > div a .en {
          font-size: var(--fz37); }
        .faq .link_area > div a .b_txt {
          font-size: var(--fz16); }
        .faq .link_area > div a .cate {
          font-size: var(--fz10);
          font-size: 12px;
          padding: 3px 12px 4px;
          top: 1rem;
          right: 1rem; }
    .faq .more_con .en-tit {
      font-size: var(--fz16);
      margin-left: 3rem;
      margin-bottom: 2rem; }
    .faq .more_con .b-box a {
      border-radius: 1.2rem;
      padding: 2.4rem 0 2.4rem 2rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      .faq .more_con .b-box a .text {
        margin-left: 2.5rem; }
      .faq .more_con .b-box a p {
        font-size: var(--fz18);
        margin-bottom: 1rem; }
      .faq .more_con .b-box a .en {
        font-size: var(--fz11); }
      .faq .more_con .b-box a .img {
        width: 22.8613569322%;
        aspect-ratio: 1/1;
        min-width: 77px;
        height: auto; }
      .faq .more_con .b-box a .arrow {
        right: 2.6rem;
        width: 23px; }
    .faq .more_con .b-box:first-child a {
      --b-color:var(--theme-color); }
      .faq .more_con .b-box:first-child a .illust {
        width: 55px;
        right: 2.3rem;
        top: -40px; }
    .faq .more_con .b-box:nth-child(2) a {
      --b-color:var(--base-color-perple); }
      .faq .more_con .b-box:nth-child(2) a .illust {
        width: 65px;
        right: 2rem;
        top: -19px; }
    .faq .more_con .b-box:nth-child(3) a .illust {
      width: 52px;
      right: 2.6rem;
      top: -38px; }
    .faq .more_con .s-box a {
      border-radius: 1.2rem;
      padding: 2.35rem 0 1.9rem calc(22% + 4.5rem);
      overflow: hidden; }
      .faq .more_con .s-box a p {
        font-size: var(--fz18);
        margin-bottom: 1rem; }
      .faq .more_con .s-box a .en {
        font-size: var(--fz11); }
      .faq .more_con .s-box a .illust {
        position: absolute;
        width: 65px;
        left: 1.1rem;
        top: -0.35rem; }
      .faq .more_con .s-box a .arrow.-white {
        right: 2.7rem;
        width: 23px; } }
/* ==========================================================================
	friends
========================================================================== */
.friends {
  position: relative;
  background: #00a9e1;
  padding-top: 31.8rem;
  padding-bottom: calc(258px + clamp(155px,15.5rem,15.5rem)); }
  .friends:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    background: var(--base-color-beige);
    width: 100%;
    height: clamp(155px, 15.5rem, 15.5rem);
    border-radius: 16rem 16rem 0 0;
    z-index: 5; }
  .friends .inr {
    z-index: 10; }
  .friends .bg_txt {
    position: relative;
    display: table;
    line-height: 1;
    font-size: var(--fz36);
    color: var(--base-color-blue02);
    padding: 3px 0;
    margin-bottom: 1.5rem; }
    .friends .bg_txt span {
      position: relative;
      font-weight: 700;
      z-index: 5; }
    .friends .bg_txt:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: calc(100% - 14px);
      height: 100%;
      background: #fff;
      z-index: 1; }
    .friends .bg_txt + .bg_txt {
      margin-bottom: 80px; }
  .friends h2 {
    position: relative;
    width: 312px;
    font-size: 73px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 5rem; }
    .friends h2:after {
      content: "";
      display: block;
      position: absolute;
      background: url(../img/common/friends-tit_bubble.svg);
      background-size: cover;
      aspect-ratio: 205/115;
      width: 102px;
      top: -64px;
      left: -29px; }
    .friends h2 img {
      margin-bottom: 1.5rem; }
    .friends h2 > svg {
      fill: #fff; }
  .friends .link_wrap {
    margin: 0; }
  .friends .bg {
    width: 2648px;
    position: absolute;
    left: 50%;
    top: 30.5rem;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 1;
    opacity: .8; }
  .friends .cloud_area {
    position: absolute;
    top: 21.8rem;
    left: 0;
    width: 100%;
    z-index: 2;
    opacity: .3; }
    .friends .cloud_area .cloud {
      display: block;
      position: absolute; }
    .friends .cloud_area .-v3 {
      width: 232px; }
    .friends .cloud_area .-v4 {
      width: 287px; }
    .friends .cloud_area .-l01 {
      top: 0;
      right: calc(50% + 63.2rem);
      -webkit-animation: cloudDrift 10s steps(2) infinite;
              animation: cloudDrift 10s steps(2) infinite; }
    .friends .cloud_area .-l02 {
      top: 0;
      left: calc(50% - 26.8rem);
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite;
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
    .friends .cloud_area .-l03 {
      top: 1.3rem;
      left: calc(50% + 36.3rem);
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite;
      -webkit-animation-delay: 2s;
              animation-delay: 2s; }
    .friends .cloud_area .-l04 {
      top: 21rem;
      left: calc(50% - 4rem);
      -webkit-animation: cloudDrift 8s steps(2) infinite;
              animation: cloudDrift 8s steps(2) infinite; }
    .friends .cloud_area .-l05 {
      top: 21rem;
      left: calc(50% + 56.6rem);
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite; }
    .friends .cloud_area .-l06 {
      top: 35rem;
      left: calc(50% + 34rem);
      -webkit-animation: cloudDrift 10s steps(2) infinite;
              animation: cloudDrift 10s steps(2) infinite; }
    .friends .cloud_area .-l07 {
      top: 58.3rem;
      right: calc(50% + 56rem);
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite;
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
    .friends .cloud_area .-l08 {
      top: 54rem;
      left: calc(50% + 53.9rem);
      -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
              animation: cloudFloatUpDown 5s steps(2) infinite;
      -webkit-animation-delay: 2s;
              animation-delay: 2s; }
  .friends .character_area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(112px, 12.3rem, 12.3rem);
    margin: auto;
    width: 95%;
    max-width: 861px;
    aspect-ratio: 861/369;
    --c_area_W:861;
    --c_area_H:369;
    z-index: 3; }
    @media screen and (min-width: 900px) {
      .friends .character_area {
        -webkit-transform: translateX(5rem);
                transform: translateX(5rem); } }
    .friends .character_area.move {
      -webkit-animation: hopbtm ease 1.3s forwards;
              animation: hopbtm ease 1.3s forwards;
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
    .friends .character_area .chara {
      position: absolute;
      width: calc((var(--c_W)/var(--c_area_W))*100%);
      top: calc((var(--c_T)/var(--c_area_H))*100%);
      left: calc((var(--c_L)/var(--c_area_W))*100%); }
    .friends .character_area .c-01 {
      --c_W:155;
      --c_T:198;
      --c_L:-25;
      -webkit-transition-delay: .4s !Important;
              transition-delay: .4s !Important; }
    .friends .character_area .c-02 {
      --c_W:160;
      --c_T:150;
      --c_L:119;
      z-index: 3;
      -webkit-transition-delay: .2s !Important;
              transition-delay: .2s !Important; }
    .friends .character_area .c-03 {
      --c_W:298;
      top: 0;
      --c_L:252;
      z-index: 5;
      -webkit-transition-delay: .1s !Important;
              transition-delay: .1s !Important; }
      .friends .character_area .c-03:after {
        content: "";
        display: block;
        position: absolute;
        background: url(../img/common/friends-chara_bubble.svg);
        background-size: cover;
        aspect-ratio: 324/169;
        width: calc((324/596)*100%);
        top: calc((79/596)*100%);
        left: calc((606/596)*100%);
        -webkit-transform: translateY(30px);
                transform: translateY(30px);
        opacity: 0;
        -webkit-transition: opacity 0.7s var(--easeOutQuad), -webkit-transform 0.7s var(--easeOutQuad);
        transition: opacity 0.7s var(--easeOutQuad), -webkit-transform 0.7s var(--easeOutQuad);
        transition: opacity 0.7s var(--easeOutQuad), transform 0.7s var(--easeOutQuad);
        transition: opacity 0.7s var(--easeOutQuad), transform 0.7s var(--easeOutQuad), -webkit-transform 0.7s var(--easeOutQuad);
        -webkit-transition-delay: .6s;
                transition-delay: .6s; }
    .friends .character_area .c-04 {
      --c_W:182;
      --c_T:166;
      --c_L:534;
      z-index: 3;
      -webkit-transition-delay: .3s !Important;
              transition-delay: .3s !Important; }
    .friends .character_area .c-05 {
      --c_W:177;
      --c_T:257;
      --c_L:684;
      -webkit-transition-delay: .5s !Important;
              transition-delay: .5s !Important; }
    .friends .character_area.move .c-03:after {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1; }

@media screen and (max-width: 800px) {
  .friends {
    padding-top: 16rem;
    padding-bottom: 270px; }
    .friends:after {
      bottom: -2px;
      width: 100%;
      height: clamp(65px, 6.5rem, 6.5rem);
      border-radius: 40px 40px 0 0; }
    .friends .bg_txt {
      margin-left: auto;
      margin-right: auto;
      font-size: var(--fz23);
      padding: 3px 0;
      margin-bottom: 1rem; }
      .friends .bg_txt:before {
        width: calc(100% - 8px); }
      .friends .bg_txt + .bg_txt {
        margin-bottom: 70px; }
    .friends h2 {
      margin: 0 auto 3.3rem;
      width: 207px;
      font-size: 49px;
      margin-bottom: 3.3rem; }
      .friends h2:after {
        width: 70px;
        top: -45px;
        left: 0;
        right: 0;
        margin: auto; }
      .friends h2 img {
        margin-bottom: .8rem; }
    .friends .link_wrap {
      margin: 0 auto; }
    .friends .bg {
      width: 2648px;
      position: absolute;
      left: 50%;
      top: 30.5rem;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      z-index: 1;
      opacity: .8; }
    .friends .cloud_area {
      position: absolute;
      top: 21.8rem;
      left: 0;
      width: 100%;
      z-index: 2;
      opacity: .3; }
      .friends .cloud_area .cloud {
        display: block;
        position: absolute; }
      .friends .cloud_area .-v3 {
        width: 232px; }
      .friends .cloud_area .-v4 {
        width: 287px; }
      .friends .cloud_area .-l01 {
        top: 0;
        right: calc(50% + 63.2rem);
        -webkit-animation: cloudDrift 10s steps(2) infinite;
                animation: cloudDrift 10s steps(2) infinite; }
      .friends .cloud_area .-l02 {
        top: 0;
        left: calc(50% - 26.8rem);
        -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
                animation: cloudFloatUpDown 5s steps(2) infinite;
        -webkit-animation-delay: 1s;
                animation-delay: 1s; }
      .friends .cloud_area .-l03 {
        top: 1.3rem;
        left: calc(50% + 36.3rem);
        -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
                animation: cloudFloatUpDown 5s steps(2) infinite;
        -webkit-animation-delay: 2s;
                animation-delay: 2s; }
      .friends .cloud_area .-l04 {
        top: 21rem;
        left: calc(50% - 4rem);
        -webkit-animation: cloudDrift 8s steps(2) infinite;
                animation: cloudDrift 8s steps(2) infinite; }
      .friends .cloud_area .-l05 {
        top: 21rem;
        left: calc(50% + 56.6rem);
        -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
                animation: cloudFloatUpDown 5s steps(2) infinite; }
      .friends .cloud_area .-l06 {
        top: 35rem;
        left: calc(50% + 34rem);
        -webkit-animation: cloudDrift 10s steps(2) infinite;
                animation: cloudDrift 10s steps(2) infinite; }
      .friends .cloud_area .-l07 {
        top: 58.3rem;
        right: calc(50% + 56rem);
        -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
                animation: cloudFloatUpDown 5s steps(2) infinite;
        -webkit-animation-delay: 1s;
                animation-delay: 1s; }
      .friends .cloud_area .-l08 {
        top: 54rem;
        left: calc(50% + 53.9rem);
        -webkit-animation: cloudFloatUpDown 5s steps(2) infinite;
                animation: cloudFloatUpDown 5s steps(2) infinite;
        -webkit-animation-delay: 2s;
                animation-delay: 2s; }
    .friends .character_area {
      bottom: clamp(50px, 5rem, 5rem);
      width: 95%;
      right: auto;
      left: 5%; }
      .friends .character_area .c-03:after {
        width: calc((208/264)*100%);
        top: calc((23/327)*100%);
        left: calc((258/264)*100%); } }
/* ==========================================================================
	blog
========================================================================== */
.blog {
  position: relative;
  background: var(--base-color-beige);
  padding-bottom: 10rem;
  z-index: 20; }
  .blog .inr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .blog .inr .tit_area {
      width: 120px; }
      .blog .inr .tit_area .icon {
        display: block;
        width: 90px;
        margin: 0 auto 2.7rem; }
      .blog .inr .tit_area h2 {
        display: block;
        font-size: 73px;
        font-weight: 600;
        letter-spacing: 0.02em;
        margin: 0 auto 2rem; }
      .blog .inr .tit_area p {
        display: block;
        position: relative;
        font-size: var(--fz20);
        font-weight: 700;
        padding-top: 2rem;
        margin: 0 auto 3rem; }
        .blog .inr .tit_area p:before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 12px;
          height: 12px;
          background: url(../img/common/icon-title.svg);
          background-size: cover; }
      .blog .inr .tit_area a {
        display: block;
        position: relative;
        font-size: var(--fz16);
        font-weight: 700;
        margin: 0 auto;
        text-align: center; }
        .blog .inr .tit_area a .arrow {
          position: relative;
          margin: 0 auto 8px; }
  .blog .link_area {
    width: 83.7209302326%;
    max-width: calc(100% - 150px); }
  @media screen and (min-width: 801px) {
    .blog .blog-links .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px; }
      .blog .blog-links .swiper-wrapper .swiper-wrapper,
      .blog .blog-links .swiper-wrapper .swiper-slide {
        all: unset; } }
  @media screen and (min-width: 1001px) {
    .blog .blog-links .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px; }
      .blog .blog-links .swiper-wrapper .swiper-wrapper,
      .blog .blog-links .swiper-wrapper .swiper-slide {
        all: unset; } }
  .blog .blog-links .swiper-wrapper a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit; }
    .blog .blog-links .swiper-wrapper a .img_area {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      -webkit-mask-image: url(../img/common/blog-mask_hex.svg);
              mask-image: url(../img/common/blog-mask_hex.svg);
      -webkit-mask-position: center center;
      mask-position: center center;
      -webkit-mask-size: cover;
      mask-size: cover; }
      .blog .blog-links .swiper-wrapper a .img_area img {
        -webkit-transition: -webkit-transform 0.4s var(--easeOutCubic);
        transition: -webkit-transform 0.4s var(--easeOutCubic);
        transition: transform 0.4s var(--easeOutCubic);
        transition: transform 0.4s var(--easeOutCubic), -webkit-transform 0.4s var(--easeOutCubic); }
      .blog .blog-links .swiper-wrapper a .img_area.-cloud {
        -webkit-mask-image: url(../img/common/blog-mask_cloud.svg);
                mask-image: url(../img/common/blog-mask_cloud.svg); }
      .blog .blog-links .swiper-wrapper a .img_area.-moko {
        -webkit-mask-image: url(../img/common/blog-mask_moko.svg);
                mask-image: url(../img/common/blog-mask_moko.svg); }
      .blog .blog-links .swiper-wrapper a .img_area.-octa {
        -webkit-mask-image: url(../img/common/blog-mask_octa.svg);
                mask-image: url(../img/common/blog-mask_octa.svg); }
      .blog .blog-links .swiper-wrapper a .img_area.-oval {
        -webkit-mask-image: url(../img/common/blog-mask_oval.svg);
                mask-image: url(../img/common/blog-mask_oval.svg); }
      .blog .blog-links .swiper-wrapper a .img_area.-wave {
        -webkit-mask-image: url(../img/common/blog-mask_wave.svg);
                mask-image: url(../img/common/blog-mask_wave.svg); }
    .blog .blog-links .swiper-wrapper a .text_area {
      position: relative;
      padding: 15px 1rem 15px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .blog .blog-links .swiper-wrapper a .text_area .cate {
        font-size: var(--fz12);
        font-weight: bold;
        display: inline-block;
        padding: 6px 15px;
        background: var(--base-color-gray);
        border-radius: 12px;
        color: #fff; }
        .blog .blog-links .swiper-wrapper a .text_area .cate.-useful {
          background: var(--base-color-green); }
        .blog .blog-links .swiper-wrapper a .text_area .cate.-recipe {
          background: var(--base-color-orange); }
      .blog .blog-links .swiper-wrapper a .text_area .new {
        display: inline-block;
        margin-left: 5px;
        font-size: var(--fz9);
        font-weight: 500;
        color: var(--theme-color);
        padding: 5px 10px 6px;
        border: 1px solid var(--theme-color);
        border-radius: 50%; }
      .blog .blog-links .swiper-wrapper a .text_area .tit {
        position: relative;
        display: block;
        font-size: var(--fz20);
        --lh:calc(28/20);
        font-weight: 600;
        position: relative;
        /*
        overflow: hidden;
        */
        line-height: calc(var(--lh)* 1em);
        padding-top: .1px;
        padding-bottom: .1px;
        margin-top: 13px;
        margin-bottom: 1.3rem;
        padding-right: 45px; }
        .blog .blog-links .swiper-wrapper a .text_area .tit::before {
          content: '';
          display: block;
          height: 0;
          width: 0;
          /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
          margin-top: calc((1 - var(--lh))* .5em); }
        .blog .blog-links .swiper-wrapper a .text_area .tit::after {
          content: '';
          display: block;
          height: 0;
          width: 0;
          margin-bottom: calc((1 - var(--lh))* .5em); }
      .blog .blog-links .swiper-wrapper a .text_area .day {
        font-size: var(--fz12);
        letter-spacing: 0.04em;
        font-weight: 600;
        color: var(--base-color-gray02); }
      .blog .blog-links .swiper-wrapper a .text_area .arrow {
        position: absolute;
        top: -4px;
        right: 0; }
    @media screen and (min-width: 801px) {
      .blog .blog-links .swiper-wrapper a:hover .img_area img {
        -webkit-transform: scale(1.08);
                transform: scale(1.08); } }

@media screen and (max-width: 800px) {
  .blog {
    padding-bottom: clamp(45px, 18.75vw, 96px); }
    .blog .inr {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      .blog .inr .tit_area {
        width: 75px; }
        .blog .inr .tit_area .icon {
          width: 59px;
          margin: 0 auto 1.8rem; }
        .blog .inr .tit_area h2 {
          display: block;
          font-size: 47px;
          font-weight: 600;
          letter-spacing: 0.02em;
          margin: 0 auto 2rem; }
        .blog .inr .tit_area p {
          font-size: var(--fz16);
          padding-top: 1.4rem;
          margin: 0 auto 2.2rem; }
          .blog .inr .tit_area p:before {
            width: 8px;
            height: 8px; }
        .blog .inr .tit_area a {
          font-size: var(--fz12); }
          .blog .inr .tit_area a .arrow {
            position: relative;
            margin: 0 auto 7px; }
    .blog .link_area {
      width: 76.4705882353%;
      max-width: 100%;
      --s_color:var(--theme-color); }
    .blog .blog-links .swiper-wrapper a .text_area {
      padding: 10px 5px 0px 5px; }
      .blog .blog-links .swiper-wrapper a .text_area .cate {
        font-size: var(--fz10);
        padding: 5px 10px; }
      .blog .blog-links .swiper-wrapper a .text_area .new {
        margin-left: 4px;
        font-size: var(--fz8);
        padding: 5px 10px 4px; }
      .blog .blog-links .swiper-wrapper a .text_area .tit {
        font-size: var(--fz16);
        --lh:calc(22/16);
        margin-top: 10px;
        margin-bottom: .8rem;
        padding-right: 33px; }
      .blog .blog-links .swiper-wrapper a .text_area .day {
        font-size: var(--fz10); }
      .blog .blog-links .swiper-wrapper a .text_area .arrow {
        top: -6px; }
    .blog .swiper-pagination {
      margin-top: 3rem; } }

/*# sourceMappingURL=top.css.map */