@charset "UTF-8";

/**************************************************************
* グロバルの要素
**************************************************************/

/* segment
********************************/
.segment {
  background: var(--base-bg);
}

/* scroll-indicator
**************************************************************/
.scroll-indicator {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
  width: 3rem;
  height: 8rem;
  padding-left: min(2.2vw + 1rem, 4rem);
  padding-right: min(2.2vw + 1rem, 4rem);
}

.scroll-indicator > span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--alphabetic-font-family);
  font-size: min(0.44vw + 1rem, 1.6rem);
  font-weight: bold;
  text-shadow: 0 0 1px currentColor;
}

.scroll-indicator__start::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-100% - 1.5rem);
  display: block;
  width: 1px;
  height: 100%;
  margin: auto;
  background: #000000;
  transform-origin: top;
}

.scroll-indicator__pagetop a {
  position: relative;
}
.scroll-indicator__pagetop a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-bottom: 0.5rem;
  border-color: #000000  transparent transparent transparent;
  border-width: 0.75rem 0.75rem 0 0.8rem;
  border-style: solid;
  transform: rotate(180deg) translateX(25%);
}

/* states */
.scroll-indicator__start[class*="is-visible"],
.scroll-indicator__pagetop[class*="is-visible"] {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* animations */
.scroll-indicator__start::after {
  animation: stretching-effect 2s ease-out infinite;
}

@keyframes stretching-effect {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

/* global-sns
********************************/
.global-sns__list {
  display: grid;
  align-items: center;
}

@media all and (max-width: 1023px) {
  .global-sns__list.u-hide-sp,
  .global-sns > h6 {
    display: none;
  }

  .global-sns__list {
    grid-template-columns: repeat(3, 5rem);
    height: 100%;
  }

  .global-sns__list > li {
    justify-self: center;
  }
}

@media all and (min-width: 1024px) {
  .global-sns {
    text-align: center;    
  }

  .global-sns > h6 {
    writing-mode: vertical-rl;
    font-family: var(--alphabetic-font-family);
    font-size: min(0.44vw + 1rem, 1.6rem);
    font-weight: bold;
  }

  .global-sns__list {
    gap: 4rem;
  }
}


/**************************************************************
* PARALLAX VISUALS
**************************************************************/
.parallax-visual {
  padding-bottom: 0;
  background-color: var(--base-bg);
}

.parallax-visual__inner {
  overflow: hidden;
  z-index: 10;
}

.parallax-visual[class*="--1"] .parallax-visual__bg {
  background-image: url(../images/parallax-bg/parallax_1_bg.jpg);
}

@media all and (min-width: 768px) {
  .parallax-visual {
    padding-bottom: 10%;
  }

  .parallax-visual[class*="--1"] .parallax-visual__bg {
    background-attachment: fixed;
  }
}


/**************************************************************
* SPLASH SCREEN
**************************************************************/
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.splash-screen__overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: var(--base-bg);
}

.splash-screen__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
}

@media all and (max-width: 767px) {
  #js-reduced-logo{
    height: 60px;
  }
}

.splash-screen__top-frame,
.splash-screen__bottom-frame {
  position: absolute;
  left: 10;
  z-index: inherit;
  width: 100%;
  height: 50%;
}
.splash-screen__top-frame::before,
.splash-screen__bottom-frame::before,
.splash-screen__top-frame::after,
.splash-screen__bottom-frame::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-blend-mode: color-dodge;*/
  /*background-color: rgba(255, 225, 255, 0.5);*/
  background: #fff;
}

.splash-screen__top-frame {
  transform: translateY(-100%);
}

.splash-screen__bottom-frame {
  transform: translateY(100%);
}

.splash-screen__top-frame::before {
  top: -2rem
}
.splash-screen__top-frame::after {
  top: -4rem
}

.splash-screen__bottom-frame::before {
  top: 2rem
}
.splash-screen__bottom-frame::after {
  top: 4rem
}

.splash-screen__top-frame {
  top: 0;
  /*background: var(--accent-2-background-color);*/
  background: #fff;
}
.splash-screen__bottom-frame {
  bottom: 0;
  /*background: var(--accent-1-background-color);*/
  background: #fff;
}

/* animations */

/* in */
.splash-screen[class*="is-animated-in"] .splash-screen__top-frame::before,
.splash-screen[class*="is-animated-in"] .splash-screen__top-frame::after,
.splash-screen[class*="is-animated-in"] .splash-screen__top-frame {
  animation: splash-screen-top-frame-in 0.65s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  will-change: animation;
}

.splash-screen[class*="is-animated-in"] .splash-screen__bottom-frame::before,
.splash-screen[class*="is-animated-in"] .splash-screen__bottom-frame::after,
.splash-screen[class*="is-animated-in"] .splash-screen__bottom-frame {
  animation: splash-screen-bottom-frame-in 0.65s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  will-change: animation;
}

/* out */
.splash-screen[class*="is-animated-out"] .splash-screen__top-frame::before,
.splash-screen[class*="is-animated-out"] .splash-screen__top-frame::after,
.splash-screen[class*="is-animated-out"] .splash-screen__top-frame {
  animation: splash-screen-top-frame-out 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
  will-change: animation;
}

.splash-screen[class*="is-animated-out"] .splash-screen__bottom-frame,
.splash-screen[class*="is-animated-out"] .splash-screen__bottom-frame::before,
.splash-screen[class*="is-animated-out"] .splash-screen__bottom-frame::after {
  animation: splash-screen-bottom-frame-out 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
  will-change: animation;
}

.splash-screen[class*="is-animated-in"] .splash-screen__top-frame::after
.splash-screen[class*="is-animated-out"] .splash-screen__top-frame::after {
  animation-delay: 0.05s;
}
.splash-screen[class*="is-animated-in"] .splash-screen__top-frame
.splash-screen[class*="is-animated-out"] .splash-screen__top-frame {
  animation-delay: 0.075s;
}

.splash-screen[class*="is-animated-in"] .splash-screen__bottom-frame::after,
.splash-screen[class*="is-animated-out"] .splash-screen__bottom-frame::after {
  animation-delay: 0.05s;
}
.splash-screen[class*="is-animated-in"] .splash-screen__bottom-frame,
.splash-screen[class*="is-animated-out"] .splash-screen__bottom-frame {
  animation-delay: 0.075s;
}


@keyframes splash-screen-bottom-frame-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes splash-screen-top-frame-in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes splash-screen-bottom-frame-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes splash-screen-top-frame-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}


/**************************************************************
* MV
**************************************************************/

.mv {
  position: relative;
  height: 100vh;
  padding-top: 8rem;
  background: var(--base-bg);
}

.mv__inner {
  height: 100%;
}
@media all and (max-width: 767px) {
  .mv__inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
  }
}

@media all and (max-width: 767px) {
  .mv {
    /* height: calc(100vh - 5rem); */
    height: 0;
    padding-top: 121.866%;
  }
}

/* mv-slidshow
********************************/
.mv-slideshow {
  position: relative;
}

.mv-slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: 100%;
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--accent-2-background-color);
}

.mv-slide__front-visual {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #bdbdbd;
}
@media all and (max-width: 767px) {
  .mv-slideshow__slide {
    height: 0;
    padding: 76.533% 0 0;
  }
  .mv-slide__front-visual {
    height: 0;
    padding: 32.333% 0;
    margin-top: -24%;
  }
}

.mv-slide__copy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  padding: 2.5%;
  font-family: 'Klee One', cursive;
  font-size: min(1.9vw + 1rem, 3.6rem);
  font-weight: bold;
  line-height: 1.9;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

@media all and (max-width: 1099px) {
  .mv-slideshow {
    height: 100%;
    overflow: hidden;
  }

  .mv-slide__copy {
    left: 10%;
    top: unset;
    bottom: 0;
  }
}
@media all and (max-width: 767px) {
  .--slide-1 .mv-slide__copy {
    transform: translateY(-23%);
    left: 6.666%;
  }
  .--slide-2 .mv-slide__copy {
    transform: translateY(-23%);
    left: auto;
    right: 6.666%;
  }
}

@media all and (min-width: 1100px) {
  .mv-slideshow {
    width: calc(100% - (11rem * 2));
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .mv-slide__front-visual {
    width: 82rem;
  }
}

@media all and (min-width: 1486px) {
  .mv-slide__copy {
    font-size: 4rem;
  }
}

/* slides */
.mv-slideshow__slide[class*="--slide-1"] {
  background-image: url(../images/main-visual/mv_slide_1_back_bg.jpg);
}
.mv-slideshow__slide[class*="--slide-2"] {
  background-image: url(../images/main-visual/mv_slide_2_back_bg.jpg);
}

.mv-slideshow__slide[class*="--slide-1"] .mv-slide__front-visual {
  right: 0;
  background-image: url(../images/main-visual/mv_slide_1_front_bg.jpg);
}
.mv-slideshow__slide[class*="--slide-2"] .mv-slide__front-visual {
  left: 0;
  background-image: url(../images/main-visual/mv_slide_2_front_bg.jpg);
}

@media all and (min-width: 1100px) {
  .mv-slideshow__slide[class*="--slide-1"] .mv-slide__front-visual {
    right: min(7.74vw, 15rem);
  }
  .mv-slideshow__slide[class*="--slide-2"] .mv-slide__front-visual {
    left: min(7.74vw, 15rem);
  }

  .mv-slideshow__slide[class*="--slide-1"] .mv-slide__copy {
    left: min(5.3vw + 1rem, 5rem);
  }
  .mv-slideshow__slide[class*="--slide-2"] .mv-slide__copy {
    right: min(5.3vw + 1rem, 10rem);
  }
}

/* animations */
.mv-slide {
  --mv-slide-anime-delay: 0.5;
  --mv-slide-anime-back-bg-offset: 0%;
  --mv-slide-anime-front-bg-value: 64%;
}

.mv-slide {
  opacity: 0;
}

@media all and (max-width: 767px) {
  .mv-slide {
    margin-top: 45.333%;
  }
}

.mv-slide .mv-slide__copy {
  opacity: 0;
}

.mv-slide .mv-slide__front-visual {
  width: 0;
}

.mv-slide[class*="--slide-2"],
.mv-slide[class*="--slide-2"] .mv-slide__front-visual,
.mv-slide[class*="--slide-2"] .mv-slide__copy {
  --mv-slide-anime-back-bg-offset: -50%;
}

.mv-slide[class*="is-animated"] {
  opacity: 0;
  animation: mv-slideshow-back-in 9.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  will-change: animation;
}

.mv-slide[class*="is-animated"] .mv-slide__front-visual {
  width: 0;
  animation: mv-slideshow-front-in 6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(var(--mv-slide-anime-delay) * 2s);
  will-change: animation;
  transform-origin: 100% 0;
}

.mv-slide[class*="is-animated"] .mv-slide__copy {
  opacity: 0;
  animation: mv-slideshow-copy-in 6s ease-out forwards;
  animation-delay: calc(var(--mv-slide-anime-delay) * 2s);
}

@media all and (min-width: 1100px) {
  .mv-slide {
    --mv-slide-anime-front-bg-value: 82rem;
  }
}

@keyframes mv-slideshow-back-in {
  0% {
    opacity: 0;
    background-position: var(--mv-slide-anime-back-bg-offset) 0%;
  }
  40% {
    opacity: 1;
    background-position: center 0%;
  }
  80% {
    opacity: 1;
    background-position: center 0%;
  }
  100% {
    opacity: 0;
    background-position: var(--mv-slide-anime-back-bg-offset) 0%;
  }
}

@keyframes mv-slideshow-front-in {
  0% {
    width: 0;
  }
  40% {
    width: var(--mv-slide-anime-front-bg-value);
  }
  80% {
    width: var(--mv-slide-anime-front-bg-value);
  }
  100% {
    width: 0;
  }
}

@keyframes mv-slideshow-copy-in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.splash-screen-progress-bar,
.splash-screen-progress-bar2
{
  position: fixed;
  top: 50%;
  left: 0;
  height: .1rem;
  margin-left: calc(50% - 150px);
}
.splash-screen-progress-bar {
  z-index: 99999;
  width: 0;
  background-color: var(--accent-1-background-color);
}

.splash-screen-progress-bar2 {
  z-index: 99998;
  width: 30rem;
  background-color: #ccc;
}


/**************************************************************
* NEWS
**************************************************************/

.news {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 40rem;
}

.news__body {
  display: grid;
  gap: 2rem;
  height: 100%;
}

@media all and (min-width: 768px) {
  .news {
    min-height: 51.5rem;
  }

  .news__body {
    grid-template-columns: 1fr 65%;
    align-items: center;
  }
}

/* news-list
********************************/
.news-list {
  position: relative;
}

@media all and (min-width: 768px) {
  .news-list {
    padding-right: min(10.9vw + 1rem, 16rem);
  }
}

/* news-item
********************************/
.news-item {
  display: grid;
  gap: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--extra-color);
}

.news-item > dt {
  font-family: var(--alphabetic-font-family);
  font-size: min(0.73vw + 1rem, 2rem);
  font-weight: bold;
  line-height: 1;
  color: var(--accent-2-color);
}

.news-item > dd {
  font-size: min(0.44vw + 1rem, 1.6rem);
  letter-spacing: 0.04em;
}

@media all and (min-width: 768px) {
  .news-item {
    display: flex;
    gap: min(1.46vw + 1rem, 3rem);
  }
}


/**************************************************************
* CONCEPT
**************************************************************/

.concept {
  padding-top: 20%;
  padding-bottom: 20%;
  /* background: var(--accent-3-background-color); */
  position: relative;
  /* height: 100vh; */
}

.concept__body {
  display: grid;
  gap: 2rem;
}

/* @media all and (min-width: 768px) {
  .concept__body {
    gap: 25rem;
  }
} */

.concept__heading {
  font-size: min(3.9vw + 1rem, 4rem);
}
/* .concept__heading .c-heading__alphabetic {
  clip-path: inset(0px);
  transform: translateX(0);
} */

.concept .l-container{
  position: relative;
  z-index: 1;
}

.concept-movie {
  position: absolute;
  top: 0;
  height: 100%;
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; */
}
.concept-movie-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background: var(--accent-3-background-color);
  opacity: .8;
}

@media all and (max-width: 767px) {
  .concept__heading{
    font-size: min(3.9vw + 1rem, 4rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
}

@media all and (min-width: 768px) {
  .concept {
    padding-top: 6.25%;
    padding-bottom: 6.25%;
  }

  .concept__body {
    grid-template-columns: 1fr 65%;
    align-items: flex-start;
  }

  .concept__heading {
    /* display: grid;
    justify-content: flex-end;
    align-items: flex-end; */
    writing-mode: vertical-rl;
    font-size: min(2.2vw + 1rem, 4rem);
    font-feature-settings: "palt" 1, "trad" 1;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .concept__heading .c-heading__alphabetic{
    margin-left: 30px;
  }
}

/* concept-contents
********************************/
.concept-contents {
  width: 100%;
}

.concept-contents__txt-box {
  position: relative;
  z-index: 10;
  padding: 8% 0;
  /* max-width: 56rem;
  margin-left: auto;
  background: var(--base-bg); */
}

.concept-contents__txt-box > p {
  font-size: min(0.3vw + 1rem, 1.4rem);
  line-height: 2;
}
@media all and (min-width: 768px) {
  .concept-contents {
    padding-right: 8.5rem;
  }
  /* .concept-contents__txt-box {
    margin-top: -20%;
    transform: translateX(min(7.8125vw + 1rem, 8.5rem));
  } */
}

@media all and (min-width: 1023px) {
  .concept-contents {
    width: calc(100% + 8.5rem);
    max-width: calc(96rem + 8.5rem);
  }
}

@media all and (min-width: 1486px) {
  .concept-contents__txt-box > p {
    font-size: min(1.75vw + 1rem, 1.8rem);
  }
}

/* concept-slider
********************************/
.concept-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  box-shadow: 0px 7px 33px rgba(0, 0, 0, 0.16);
}

@media all and (min-width: 768px) {
  .concept-slider {
    min-height: 100%;
  }
}

/* slide
********************************/
.slide {
  position: relative;
}

.slide__bg-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide__bg-holder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}

.slide[class*="--1"] .slide__bg-holder::before {
  background-image: url(../images/concept/slide_1_img.jpg);
}
.slide[class*="--2"] .slide__bg-holder::before {
  background-image: url(../images/concept/slide_2_img.jpg);
}
.slide[class*="--3"] .slide__bg-holder::before {
  background-image: url(../images/concept/slide_3_img.jpg);
}

/* animations */
.slide[class*="is-active"] .slide__bg-holder::before {
  /*animation: slide-bg-animation 8s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;*/
}

@keyframes slide-bg-animation {
  0% {
    transform: scale3d(1, 1, 1);
    background-position: center 0;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
    background-position: 100% 0;
  }
  100% {
    transform: scale3d(1, 1, 1);
    background-position: center 0;
  }
}


/**************************************************************
* BUSINESS
**************************************************************/

.business {
  position: relative;
}

/* overrides */
.business .c-heading__title {
  text-align: center;
}

@media all and (max-width: 767px) {
  .business__body {
    display: grid;
    gap: 2rem;
  }
}

@media all and (max-width: 767px) {
  .business{
    padding-bottom: 10%;
  }
}

/* business-contents
********************************/
.business-contents {
  margin-top: min(7.24vw + 1rem, 10rem);
}

/* business-points
********************************/
.business-points {
  display: grid;
  counter-reset: business-points-counter;
}

.business-points__item {
  counter-increment: business-points-counter;
}

@media all and (min-width: 768px) {
  .business-points {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* business-point
********************************/
.business-point {
  position: relative;
}
.business-point::before {
  content: "";
  display: block;
  width: 100%;
  height: min(83.576867vw + 1rem, 45.5rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #e2e2e2;
}

.business-point:nth-child(1):before {
  background-image: url(../images/business/business_point_1_bg.jpg);
}
.business-point:nth-child(2):before {
  background-image: url(../images/business/business_point_2_bg.jpg);
}
.business-point:nth-child(3):before {
  background-image: url(../images/business/business_point_3_bg.jpg);
}

.business-point__data {
  padding-top: 2rem;
  padding-bottom: 8rem;
  padding-left: min(3.66vw + 1rem, 6rem);
  padding-right: min(3.66vw + 1rem, 6rem);
}
.business-point__data::before {
  content: counter(business-points-counter, decimal-leading-zero);
  display: block;
  padding-bottom: 3rem;
  text-align: center;
  font-family: var(--alphabetic-font-family);
  font-size: 6.5rem;
  font-style: italic;
  line-height: 0.75;
  color: var(--accent-1-color);
}

.business-point__data > dt {
  margin-bottom: 3rem;
  text-align: center;
  font-size: min(1.6vw + 1rem, 2.2rem);
  letter-spacing: 0.15em;
}

.business-point__data > dd {
  line-height: 2;
}

@media all and (min-width: 768px) {
  .business-point {
    opacity: 0;
    transition: transform 1s ease-in-out 0.5s,
                opacity 1s ease-in-out;
    transform: translateY(15%);
  }

.business-point__data {
  padding-bottom: 4rem;
}

  .business-point__data > dt {
    font-size: min(0.87vw + 1rem, 2.2rem);
  }

  .business-point__data::before {
  font-size: 9.5rem;
  }
}

/* states */
@media all and (min-width: 768px) {
  .business-point[class*="is-visible"] {
    opacity: 1;
  }
  .business-point[class*="is-visible"]:nth-child(1) {
    transform: translateY(-5rem);
  }
  .business-point[class*="is-visible"]:nth-child(2) {
    transform: translateY(0);
    transition-delay: 1s;
  }
  .business-point[class*="is-visible"]:nth-child(3) {
    transform: translateY(5rem);
    transition-delay: 2s;
  }
}


/**************************************************************
* ABOUT
**************************************************************/

.about {
  position: relative;
  background-image: linear-gradient(to bottom, var(--base-bg), var(--accent-2-background-color));
}

.about__body {
  position: relative;
  display: grid;
  gap: 2rem;
}

/* overrides */
.about .l-heading-block {
  justify-content: flex-start;
}

@media all and (max-width: 767px) {
  .about{
    padding-top: 0;
  }
}

@media all and (min-width: 768px) {
  .about {
    padding-bottom: 12rem;
  }
  .about__body {
    grid-template-columns: 50% 50%;
    align-items: flex-start;
  }

  /* overrides */
  .about .l-heading-block {
    position: sticky;
    top: 0;
    height: 100vh;
    align-items: center;
  }
}

/* about-contents
********************************/
.about-contents {
  position: relative;
}

/* about-list
********************************/
.about-list {
  display: grid;
  gap: 8rem;
}

/* about-item
********************************/
.about-item {
  position: relative;
}
.about-item::before {
  content: "";
  display: block;
  width: 100%;
  height: min(50vw + 1rem, 60rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #e2e2e2;
}

.about-item:nth-child(1):before {
  background-image: url(../images/about/item_1_bg.jpg);
}
.about-item:nth-child(2):before {
  background-image: url(../images/about/item_2_bg.jpg);
}
.about-item:nth-child(3):before {
  background-image: url(../images/about/item_3_bg.jpg);
}

.about-item__data {
  padding-top: 3.5rem;
}

.about-item__data > dt {
  margin-bottom: 2.5rem;
  text-align: center;
  font-size: min(1.6vw + 1rem, 2.2rem);
  letter-spacing: 0.15em;
}

@media all and (min-width: 768px) {
  .about-item__data > dt {
    font-size: min(0.87vw + 1rem, 2.2rem);
  }
}

/* about-tracker
********************************/
@media all and (max-width: 1023px) {
  .about-tracker {
    display: none;
  }
}

@media all and (min-width: 1024px) {
  .about-tracker {
    position: absolute;
    top: 0;
    right: -10%;
    width: 2rem;
    height: 100%;
    text-align: center;
  }
  
  .about-tracker__bullets {
    position: sticky;
    top: 50%;
    left: 0;
    transform: translateY(0);
  }
  
  .about-tracker__bullets > li {
    color: #bdbdbd;
    transition: color 0.5s ease-in-out;
  }
  
  /* states */
  .about-tracker__bullets > li[class*="is-active"] {
    color: var(--accent-1-background-color);
  }
}


/**************************************************************
* LOOPING GALLERY
**************************************************************/

.looping-gallery {
  position: relative;
  background-color: var(--base-bg);
}

.looping-gallery__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.looping-gallery__inner::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 76%;
}

.looping-gallery__row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  overflow: hidden;
  height: 100%;
  background-color: #e2e2e2;
}

.looping-gallery__col {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

}
.looping-gallery__col::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 3950px;
  background-repeat: repeat-y;
  background-position: center 0;
  background-size: 100% auto;
}

.looping-gallery__col[class*="--1"]::after {
  top: 0;
  background-image: url(../images/looping-gallery/gallery_column_1_bg.jpg);
}
.looping-gallery__col[class*="--2"]::after {
  bottom: 0;
  background-image: url(../images/looping-gallery/gallery_column_2_bg.jpg);
}
.looping-gallery__col[class*="--3"]::after {
  top: 0;
  background-image: url(../images/looping-gallery/gallery_column_3_bg.jpg);
}

.looping-gallery__vspacing-offset {
  height: 200px;
  background: #000;
}

@media all and (min-width: 768px) {
  .looping-gallery__inner::after {
    padding-top: 42.565%;
  }
}

@media all and (min-width: 1100px) {
  .looping-gallery__row {
    width: calc(100% - (11rem * 2));
    margin-left: auto;
    margin-right: auto;
  }
}

/* animations */
.looping-gallery__col::after {
  will-change: animation, transfrom;
}
.looping-gallery__col[class*="--1"]::after,
.looping-gallery__col[class*="--3"]::after  {
  animation: looping-gallery-column-up-animation 40s linear infinite alternate;
}
.looping-gallery__col[class*="--2"]::after {
  animation: looping-gallery-column-down-animation 40s linear infinite alternate;
}

@keyframes looping-gallery-column-up-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1975px);
  }
}

@keyframes looping-gallery-column-down-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(1975px);
  }
}


/**************************************************************
* MESSAGE
**************************************************************/

.message {
  margin-bottom: -6%;
  padding-top: 20%;
  padding-bottom: 20%;
  background: var(--accent-3-background-color);
}

/* overrides */
.message .l-heading-block {
  justify-content: flex-start;
}

.message__body {
  display: grid;
  gap: 2rem;
}

@media all and (min-width: 768px) {
  .message {
    padding-top: 6.25%;
    padding-bottom: 6.25%;
  }

  .message__body {
    grid-template-columns: 50% 50%;
  }
}

/* message-contents
********************************/
.message-contents {
  position: relative;
}

@media all and (min-width: 768px) {
  .message-contents {
    padding-right: min(5vw, 12rem);
  }
}

/* message-article
********************************/
.message-article {
  position: relative;
  margin-top: 2rem;
}

.message-article__heading {
  margin-bottom: 2.5rem;
  font-size: min(1.02vw + 1rem, 2.4rem);
  letter-spacing: 0.15em;
}

.message-article p + p {
  margin-top: 1rem;
}

@media all and (min-width: 768px) {
  .message-article p:last-child::after {
    content: "";
    display: block;
    height: 10rem;
  }
}

/* message-visual
********************************/
.message-visual {
  position: relative;
}
.message-visual::after {
  content: "";
  position: absolute;
  bottom: -10rem;
  right: 0;
  width: 26rem;
  display: block;
  padding-top: calc(260/420 * 100%);
  background-color: #e7e7e7;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../images/message/message_bg.jpg);
}

.message-visual__fig {
  max-width: 20rem;
}

@media all and (min-width: 768px) {
  .message-visual__fig {
    max-width: 40rem;
  }
}


/**************************************************************
* COMPANY
**************************************************************/

.company {
  margin-top: 2.5%;
  padding-bottom: 6%;
}

/* overrides */
.company .l-heading-block {
  justify-content: flex-start;
}

.company__body {
  display: grid;
  gap: 2rem;
}

@media all and (max-width: 767px) {
  .company {
    padding-top: calc(50% - 2.5%);
  }
}

@media all and (min-width: 768px) {
  .company__body {
    grid-template-columns: 1fr 65%;
  }
}

/* company-contents
********************************/
.company-contents {
  position: relative;
}

@media all and (min-width: 768px) {
  .company-contents {
    padding-top: 11.5rem;
  }
}

/* company-info
********************************/
.company-info {
  position: relative;
  border-top: 1px solid var(--extra-color);
}
.company-info > li {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.company-info > li {
  border-bottom: 1px solid var(--extra-color);
}

.company-info__data { 
  display: flex;
  gap: 5%;
}

.company-info__data p > small {
  display: block;
  margin-top: 1.5rem;
  color: #79796a;
}

.company-info__data > dt {
  max-width: 10.5rem;
  min-width: 10.5rem;
  font-size: min(0.44vw + 1rem, 1.6rem);
  color: #79796a;
}

.company-info__data > dd,
.company-info__data > dd *{
  font-size: min(0.44vw + 1rem, 1.6rem);
}

.company-info__map {
  margin-top: 3rem;
}

@media all and (min-width: 768px) {
  .company-info__data {
    gap: 10%;
  }
  
  .company-info__data > dt {
    max-width: 12.5rem;
    min-width: 12.5rem;
    font-size: 1.6rem;
  }

  .company-info__data > dd {
    width: calc(100% - 12.5rem);
    font-size: 1.6rem;
  }
  /* .company-info__data .company-info__map-txt { */
  .company-info__data > dd * {
    font-size: 1.6rem;
  }
}

/* company-googlemap
********************************/
.company-googlemap {
  padding-top: 100%;
  margin-bottom: 1rem;
}

@media all and (min-width: 768px) {
  .company-googlemap {
    padding-top: 36%;
  }
}


/**************************************************************
* CONTACT
**************************************************************/

.contact {
  padding-top: 20%;
  padding-bottom: 20%;
  background: var(--accent-3-background-color);
}

.contact__body {
  max-width: 65rem;
  margin-left: auto;
  margin-right: auto;
}

@media all and (max-width: 767px) {
  .contact__body {
    margin-top: 2rem;
  }
}

@media all and (min-width: 768px) {
  .contact {
    padding-top: 4%;
    padding-bottom: 6.25%;
  }

  /* overrides */
  .contact .l-heading-block {
    justify-content: flex-end;
    margin-top: -15%;
  }
}


/**************************************************************
* SP的な対策
**************************************************************/

@media all and (max-width: 767px) {
  .l-heading-block {
    justify-content: center !important;
  }
}