@charset "UTF-8";
:root {
  --primary-color-1: #dc7492;
  --primary-color-1-rgb: 220, 116, 146;
  --primary-color-2: #88e8e8;
  --primary-color-2-rgb: 136, 232, 232;
  --primary-color-3: #828283;
  --primary-color-3-rgb: 130, 130, 131;
  --primary-color-4: #807ffe;
  --primary-color-4-rgb: 128, 127, 254;
  --primary-color-5: #ffff80;
  --primary-color-5-rgb: 255, 255, 128;

  /* --base-color: #f3f3f2;
  --base-color-rgb: 243, 243, 242;
  --accent-color: #ebd842;
  --accent-color-rgb: 235, 216, 66; */

  --text-color: #4b4b4b;
  --text-color-rgb: 75, 75, 75;

  --font-size: 16;
  --font-size-m3: 0.51rem;
  --font-size-m2: 0.64rem;
  --font-size-m1: 0.8rem;
  --font-size-0: 1rem;
  --font-size-p1: 1.25rem;
  --font-size-p2: 1.56rem;
  --font-size-p3: 1.95rem;
  --font-size-p4: 2.44rem;
  --font-size-p5: 3.05rem;
  --font-size-p6: 3.81rem;

  --font-family-jp: 'Noto Sans JP', sans-serif;
  --font-family-en: 'Doto', sans-serif;

  --transition: all 0.3s ease;

  /* --mobile-width: 100%; */
  --mobile-width: clamp(320px, 50vw, 480px);
  --section-padding-block: max(2vh, 40px);
  --section-padding-inline: clamp(.5rem, 10px, 2rem);

}

html {
  font-size: calc(var(--font-size) * 1px);
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-timeline: --myScrollTimeline block;
}

body {
  margin: 0;
  color: var(--text-color);
  line-height: 1.6;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 
  親テーマ　上書き
 */
.l-container {
  padding: 0;
  margin: 0;
}

/* モバイルレイアウト基本設定 */
.mobile-layout {
  position: relative;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}

.mobile-layout .__cover {
  position: fixed;
  display: grid;
  grid-template-columns: 1fr var(--mobile-width) 1fr;
  height: 100vh;
  width: 100%;
  z-index: 0;
}

.mobile-layout .__cover.open {
  grid-template-columns: 0 0 1fr;
  z-index: 9;
}
.mobile-layout .__cover.open .mobile-menu {
  transform: translateX(0);
}










.l-bg {
  /* 背景色 */
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(var(--text-color-rgb), .1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(var(--text-color-rgb), .1) 2px, transparent 2px);
  background-size: 50px 50px;
}

.u-glass {
  /* background-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px ); */

  background: rgba( 255, 255, 255, 0.025 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 3px );
  -webkit-backdrop-filter: blur( 4px );
}

.u-wave-box {
  position: relative;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.u-wave-box.wb-v1::before,
.u-wave-box.wb-v1::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 100%;
  background: url('../img/wave.svg') repeat-x bottom left / auto 15px;
}
.u-wave-box.wb-v1::before {
  top: 0;
  left: 0;
}

.u-wave-box.wb-v1::after {
  left: 0;
  bottom: 0;
}

.u-message-box {
  border-radius: 16px;
  padding: 1em;
}

.l-btn-cta {
  text-align: center;
}

.u-btn-cta {
  color: #fff;
  font-size: var(--font-size-p5);
  font-family: var(--font-family-en);
  font-weight: 900;
  padding: .2em .4em;
  border-radius: 32px;
  background-color: var(--primary-color-4);
  animation: bg-color 10s infinite forwards;
}


.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  top: -10px;
  z-index: 10;
}







/* メインコンテンツエリア */
.l-main {
  max-width: var(--mobile-width);
  margin-inline: auto;
  /* opacity: 1; */

  opacity: 0;
  transition: opacity .4s, transform .4s;
  z-index: 1;
}
.l-main.is-show {
  opacity: 1;
  transition: opacity 1s, transform 1s;
}

/* サイドバー（PCのみ表示） */
.mobile-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.mobile-sidebar--left {
  justify-content: center;
  width: 100%;
  z-index: 10;
}

.mobile-sidebar--center {
  position: relative;
  width: 100%;
  height: 100px;
  z-index: 999;
}

.menu-trigger {
  display: block;
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(calc(-50% + 38vw));
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 999;
}
.menu-trigger > span {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--primary-color-1);
}
.menu-trigger > span.__open {
  top: 50%;
  left: 50%;
  width: calc(5px * 5);
  opacity: 1;
  transition: opacity .4s;
}

.menu-trigger > span.__open.__1 {
  transform: translate(-50%, calc(-50% - 5px));
}
.menu-trigger > span.__open.__2 {
  transform: translate(-50%, calc(-50% + 5px));
}

.menu-trigger.open > span.__open {
  opacity: 0;
  transition: opacity .4s;
}

.menu-trigger.open > span.__close {
  opacity: 1;
  transition: opacity .4s;
}

.menu-trigger > span.__close {
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  opacity: 0;
  transition: opacity .4s;
  opacity: 0;
  transition: opacity .4s;
}
.menu-trigger > span.__close.__1 {
  transform: translate(calc(-50% - 5px * 2), calc(-50% - 5px * 2));
}
.menu-trigger > span.__close.__2 {
  transform: translate(calc(-50% - 5px * 1), calc(-50% - 5px * 1));
}
.menu-trigger > span.__close.__3 {
  transform: translate(calc(-50% - 0px), calc(-50% - 0px));
}
.menu-trigger > span.__close.__4 {
  transform: translate(calc(-50% + 5px * 1), calc(-50% + 5px * 1));
}
.menu-trigger > span.__close.__5 {
  transform: translate(calc(-50% + 5px * 2), calc(-50% + 5px * 2));
}
.menu-trigger > span.__close.__6 {
  transform: translate(calc(-50% + 5px * 2), calc(-50% - 5px * 2));
}
.menu-trigger > span.__close.__7 {
  transform: translate(calc(-50% + 5px * 1), calc(-50% - 5px * 1));
}
.menu-trigger > span.__close.__8 {
  transform: translate(calc(-50% - 5px * 2), calc(-50% + 5px * 2));
}
.menu-trigger > span.__close.__9 {
  transform: translate(calc(-50% - 5px * 1), calc(-50% + 5px * 1));
}












.mobile-sidebar--right {
  justify-content: center;
  width: 100%;
  z-index: 10;
}

.site-logo {
  width: min(20vw, 240px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  transition: left .4s, transform .4s, opacity .4s;
  opacity: 1;
}
.site-logo.is-show {
  /* left: 15%; */
  transform: translate(-50%, -50%) scale(.8);
  transition: left 1s, transform 1s, opacity .1s;
  opacity: 0;
}

.mobile-menu {
  transform: translateX(100vw);
  opacity: 0;
  transition: opacity .4s, transform .4s;
}
.mobile-menu.is-show {
  opacity: 1;
  transition: opacity 1s, transform 1s;
}


/* セクション共通スタイル */
.section {
  position: relative;
  width: 100%;
  /* background-color: #ffffff; */
}
.section-inner {
  padding: var(--section-padding-block) var(--section-padding-inline);
}

.section__title {
  text-align: center;
  color: var(--primary-color-4);
  font-size: var(--font-size-p5);
  font-family: var(--font-family-en);
  font-weight: 900;
  margin-bottom: 1rem;
}

.section__subtitle {
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
  color: var(--accent-color);
}

.primary-menu a {
  color: var(--primary-color-4);
  font-size: var(--font-size-p4);
  font-weight: 900;
  font-family: var(--font-family-en);
}
.primary-menu li.__contact {
  margin-top: 2em;
}
.primary-menu li.__contact a {
  color: #fff;
  padding: .2em .4em;
  border-radius: 32px;
  background-color: var(--primary-color-4);
  animation: bg-color 10s infinite forwards;
}





/*
  共通 COMMON
 */
.width-full {
  margin: 0 calc(50% – 50vw);
  width: 100vw;
}

.u-hero-title {
  font-size: var(--font-size-0);
  font-weight: 600;
  border: 1px solid var(--text-color);
  letter-spacing: .1em;
  width: max-content;
  padding: .2em .8em;
  background-color: #fff;
}
.u-lbl-title {
  color: #fff;
  font-size: var(--font-size-p1);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .15em;
  padding: .2em .5em;
  width: max-content;
  background-color: var(--primary-color-4);
}
.u-num {
  position: relative;
  font-family: var(--font-family-en);
  font-size: var(--font-size-p4);
  font-weight: 900;
  padding-left: 1.5rem;
  letter-spacing: .1em;
}
.u-num::before {
  content: "POINT";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--font-size-m1);
  letter-spacing: 0;
}

.u-point-title {
  font-weight: 600;
  font-size: var(--font-size-p1);
  letter-spacing: .1em;
}


.u-ex {
  color: var(--text-color);
  font-size: var(--font-size-m1);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.8;
}
.u-scroll {
  font-family: 'Doto', sans-serif;
  font-weight: 900;
  font-size: var(--font-size-p2);
  letter-spacing: .1em;
}
.u-scroll > span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.u-bottom-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 2em;
}
.u-bottom-point > span {
  text-align: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-color);
}

.u-bottom-arrow {
  position: relative;
  width: 100%;
  height: .5rem;
  background-color: var(--primary-color-5);
}
.u-bottom-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.5rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--primary-color-5);
  transform: translateX(-50%) rotate(45deg);
}

@media (min-width: 768px) {
  .l-main {
    width: var(--mobile-width);
    margin-inline: auto;
  }


}

@media (min-width: 1024px) {
  .site-logo.is-show {
    left: 15%;
  }

  .u-ex {
    font-size: var(--font-size-0);
  }

}

@media (min-width: 1200px) {
  .site-logo.is-show {
    left: 20%;
    transform: translate(-50%, -50%) scale(1);
    transition: left 1s, transform 1s;
    opacity: 1;
  }

  .mobile-menu {
    transform: translateX(-10vw);
  }
  .mobile-menu.is-show {
    transform: translateX(0);
    opacity: 1;
  }
  
  .menu-trigger {
    display: none;
  }

}

@media (min-width: 1440px) {

}




/* 
  HERO VIEW
 */
.section-hero {
  padding-top: 50vh;
  margin-bottom: 6rem;
}

.hero-title {
  width: 200px;
  margin: 0 auto 2rem;
}

.hero-image {
  margin-bottom: 2rem;
}

.hero-subtitle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hero-scroll {
  position: absolute;
  right: 0;
  bottom: -4rem;
  color: var(--primary-color-4);
  font-size: var(--font-size-p1);
  font-weight: 900;
  text-align: center;
  width: 2em;
}

/* スクロール促進アニメーション */
.scroll-dots {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2px;
}
.scroll-dots > div {
  width: 100%;
}
.scroll-dot {
  display: block;
  width: 2px;
  height: 8px;
  background-color: var(--primary-color-4);
  opacity: 0;
  transform: scale(0);
  animation: dotAppear 4s infinite;
  margin-inline: auto;
}
.scroll-dots > div:nth-child(1) .scroll-dot {
  animation-delay: 0s;
}
.scroll-dots > div:nth-child(2) .scroll-dot {
  animation-delay: 0.4s;
}
.scroll-dots > div:nth-child(3) .scroll-dot {
  animation-delay: 0.8s;
}
.scroll-arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--primary-color-4);
  border-bottom: 2px solid var(--primary-color-4);
  border-radius: 4px;
  transform: rotate(45deg);
  opacity: 0;
  animation: arrowAppear 4s infinite;
  animation-delay: 1.2s;
  margin: 0 auto 0;
}
.scroll-arrow::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  width: 2px;
  height: 8px;
  border-radius: 0;
  background-color: var(--primary-color-4);
}
@keyframes dotAppear {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes arrowAppear {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
  15% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  60% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
}



/*
  MESSAGE VIEW
 */
.l-message {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.u-message__contents {
  position: relative;
  font-size: var(--font-size-m1);
  letter-spacing: .1em;
  width: max-content;
  /* width: max(80%, calc(var(--mobile-width) * .8)); */
  padding: 1em 2em;
  border: 3px solid var(--primary-color-1);
  border-radius: 64px;
  background-color: #fff;
}
.u-message__contents::before {
  content: "";
  position: absolute;
  right: 4rem;
  bottom: -1rem;
  transform: rotate(-45deg);
  width: 3px;
  height: 2rem;
  background-color: var(--primary-color-1);
}


.l-message > li:nth-child(odd) .u-message__contents {
  margin-inline: auto 0;
}
.l-message > li:nth-child(even) .u-message__contents {
  margin-inline: 0 auto;
}
.l-message > li:nth-child(even) .u-message__contents::before {
  left: 4rem;
  right: auto;
  transform: rotate(45deg);
}

.message__main {
  font-size: var(--font-size-0);
  font-weight: 600;
  text-align: center;
  letter-spacing: .1em;
  padding: 3rem 0;
  line-height:1.8;

  margin-bottom: 4rem;
}

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
  .message__main {
    font-size: var(--font-size-p1);
  }
  .u-message__contents {
    font-size: var(--font-size-0);
  }
}

@media (min-width: 1200px) {
}

@media (min-width: 1440px) {
}








.u-wave-box.wb-v2::before,
.u-wave-box.wb-v2::after{
  content:"";
  position:absolute;
  width:100%;
  height: 15px;
  left:0;
  background:
    repeating-conic-gradient(
       from 90deg at 15px 50%,
       var(--primary-color-2)  0 25%,
       transparent 0 50%
    );
  background-size: 30px 15px;
}
.u-wave-box.wb-v2::before{
  top:0;
  transform:translateY(-100%);
}
.u-wave-box.wb-v2::after{
  bottom:0;
  transform:translateY(100%) rotate(180deg);
}





/* 
  ABOUT VIEW
 */
.section-about .__message {
  margin-bottom: 2rem;
}
.l-slider {
  width: 100%;
  /* background-color: #fff; */
}
.slick-track {
  overflow: hidden;
}
.slick-slide {
  padding-inline: 1rem;
  height: 80px;
}
.slick-slide img {
  object-fit: cover;
}

















 /* 
  POINT VIEW
 */
.section-point {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}

.l-point {
  height: 100%;
  width: fit-content;
  display: flex;
  position: relative;
  background-color: #fff;
}

/* ポイントセクション関連の重要なスタイル */
.section-point {
  height: 100vh !important;
  overflow: visible !important;
  position: relative !important;
  background-color: #fff !important;
  z-index: 1 !important;
}

.l-point-content {
  /* margin-bottom: 6rem; */
}
.l-point-content .l-point-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 2rem;
  gap: 1em;
}
.l-point-content .l-point-title .__num {
  color: var(--primary-color-4);
  font-size: var(--font-size-p3);
}
.l-point-content .l-point-title .__title {
  display: block;
  font-size: var(--font-size-0);
}

.l-point-content .l-point-main {
  position: relative;
  width: 100%;
  height: calc(var(--mobile-width) * 1.1);
  overflow: hidden;
}

.l-point-content .l-point-main .__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mobile-width);
  height: var(--mobile-width);
  border-radius: 50%;
  margin-inline: auto;
  transform: translate(-50%, -50%) scale(1.1);
  overflow: hidden;
  z-index: 1;
}

.l-point-content .l-point-main .__ex {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  width: 80%;

  background-color: rgba(255, 255, 255, .8);
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );

  z-index: 2;
}

@media (min-width: 768px) {
}
@media (min-width: 1024px) {
  .l-point-content .l-point-title .__num {
    font-size: var(--font-size-p4);
  }
  .l-point-content .l-point-title .__title {
    font-size: var(--font-size-p2);
  }
}
@media (min-width: 1200px) {
}
@media (min-width: 1440px) {
}






/* 
  SERVICES VIEW
 */
.section-service {
  padding-bottom: 8rem;
}

.l-service-content {
  padding-block: var(--section-padding-block);
  margin-bottom: 4rem;
  overflow-x: hidden;
}

.l-service-content .l-service-title {
  position: relative;
  margin-bottom: 3rem;
}
.l-service-content .l-service-title .__img {
  position: relative;
  width: 90%;
  height: 160px;
  margin-inline: 0 auto;
}
.l-service-content .l-service-title .__title {
  position: absolute;
  top: -1.5rem;
  right: 5%;
  width: 240px;
  text-align: center;
}

.l-service > li:nth-child(even) .l-service-content .l-service-title .__img {
  margin-inline: auto 0;
}
.l-service > li:nth-child(even) .l-service-content .l-service-title .__title {
  top: auto;
  left: 5%;
  right: auto;
  bottom: -1.5rem;
}

.l-service__main {
  padding-inline: var(--section-padding-inline);
}




/* 
  FLOW VIEW
 */
.section-flow {
  margin-bottom: 8rem;
}


.l-flow {
  padding: 0;
}

.l-flow-content {
  margin-bottom: 4rem;
}

.l-flow-content .l-flow-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1em;
}

.l-flow-main {
  margin-bottom: 2rem;
}


.l-flow-content .l-flow-title .__num {
  color: var(--primary-color-1);
}


@media (min-width: 768px) {
}
@media (min-width: 1024px) {
  .l-flow {
    padding: 0 2rem;
  }
  .l-flow-content .l-flow-title {
    justify-content: start;
    margin-bottom: 2rem;
  }
  
  .l-flow-main {
    margin-bottom: 3rem;
  }
}
@media (min-width: 1200px) {
}
@media (min-width: 1440px) {
}











/* 
  PROFILE VIEW
 */
.l-profile-content {
  color: var(--text-color);
  padding: 2rem 3rem 2rem 1rem;
  border: 1rem solid;
}
.l-profile-content.profile-color-red {
  border-color: var(--primary-color-1);
}
.l-profile-content.profile-color-green {
  border-color: var(--primary-color-2);
}
.l-profile-content.profile-color-black {
  border-color: var(--primary-color-3);
}
.l-profile-content.profile-color-blue {
  border-color: var(--primary-color-4);
}
.l-profile-content.profile-color-yellow {
  border-color: var(--primary-color-5);
}


.l-profile-main {
  margin-bottom: 1rem;
}

.l-profile-main .__img {
  width: 60px;
  margin-inline: auto 0;
}
.l-profile-main .__katagaki {
  font-size: var(--font-size-m1);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
}
.l-profile-main .__name-jp {
  font-size: var(--font-size-p1);
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 2;

}
.l-profile-main .__name-en {
  position: absolute;
  top: 180px;
  right: 1.5rem;
  transform: translateY(-50%);
  color: var(--primary-color-4);
  font-size: var(--font-size-p1);
  font-weight: 900;
  font-family: var(--font-family-en);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.l-profile-history {
  margin-bottom: 1rem;
}


@media (min-width: 768px) {
}
@media (min-width: 1024px) {
  .l-profile-content {
    padding: 2rem 3rem 2rem 2rem;
  }

  .l-profile-main {
    margin-bottom: 2rem;
  }

  .l-profile-main .__img {
    width: 120px;
  }

  .l-profile-main .__name-jp {
    font-size: var(--font-size-p2);
  }

  .l-profile-history {
    margin-bottom: 2rem;
  }

}
@media (min-width: 1200px) {
}
@media (min-width: 1440px) {
}





.l-history > li {
  position: relative;
  font-size: var(--font-size-m1);
  padding-left: 1.5rem;
  padding-bottom: 1em;
}
.l-history > li::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: .5em;
  left: 0;
  background-color: var(--text-color);
}
.l-history > li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  top: 1em;
  left: 6px;
  background-color: var(--text-color);
}
.l-history > li:last-child::after {
  display: none;
}

.l-profile-other {

}

.l-other {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
.l-other > dt {
  color: #fff;
  font-size: var(--font-size-m1);
  letter-spacing: .1em;
  width: max-content;
  height: max-content;
  padding: .2em .6em;
  border-radius: 4px;
  background-color: var(--text-color);
}
.l-other > dd {
  padding-top: .2em;
  padding-left: 1em;
  font-size: var(--font-size-m1);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
}
@media (min-width: 1024px) {
  .l-history > li {
    font-size: var(--font-size-0);
  }
  .l-other > dt,
  .l-other > dd {
    font-size: var(--font-size-0);
  }

  .l-other > dd {
    padding-left: 0;
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .l-other {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: .5rem 2rem;
  }
}
@media (min-width: 1440px) {
}









.horizontal-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* background-color: #fff; */
  width: var(--mobile-width);
  max-width: 480px;
  margin: 0 auto;
}

.pin-wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  width: var(--mobile-width);
  max-width: 480px;
}

.horizontal-container {
  height: 100%;
  width: fit-content;
  display: flex;
  position: relative;
}

.panel {
  width: var(--mobile-width);
  max-width: 480px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
  /* background-color: var(--primary-color-5); */
}