@charset "utf-8";

/* CSS Document */


.loading {
  width: 100%;
  height: 100lvh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.loading-logo {
  width: clamp(150px,50%, 160px);
  margin: 0 auto 5vh;
  opacity: 0;
}
body.is-loaded .loading-logo {
  opacity: 1;
  transition: opacity 1.5s ease 0.5s;
}

.loading-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 1200px;
  height: 30lvh;
  min-height:150px;
  max-height:300px;
  margin-bottom:-7px; /*Fix for safari gap*/
  filter: blur(5px);
}


.loading-parallax > use {
  animation: anim-forever 15s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.loading-parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.loading-parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.loading-parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.loading-parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes anim-forever {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}


body.is-started .loading {
  opacity: 0;
  visibility: hidden;
  transition: all 2s ease 0.5s;
}


/***********
mainVisual
************/

.mainVisual {
  position: relative;
  height: 100lvh;
  margin-top: -100lvh;
  padding: var(--header-height) var(--side-padding) 0;
  overflow: hidden;
  user-select: none;
  opacity: 0;
  transition: 1s;
  z-index: 1;
  background: linear-gradient(to bottom, #fff 20%, transparent 100%);
}
body.is-loaded .mainVisual {
  opacity: 1;
}

/*
visual
*/

.mainVisual-visual {
  width: 100%;
  height: 100%;
  user-select: none;
}

/*
container
*/

.mainVisual-container {
  position: absolute;
  left: 80px;
  top: 50%;
  translate: 0 -50%;
  padding-top: var(--header-height);
  z-index: 99;
  white-space: nowrap;
  color: var(--color-brand03);
}

.mainVisual-block {
}

.mainVisual-lead {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: clamp(270%,2.1vw, 354%);
}
.mainVisual-lead span {
  display: inline;
  line-height: 1.9em;
  padding: 0.4em 0.1em 0.4em;
  background: linear-gradient(transparent 0%, var(--color-base) 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

}

/*
slider
*/

.mainVisual-slider{
  opacity: 0;
  transition: all 0.5s ease 0s;
  overflow: hidden;
  display: flex;
}
body.is-started .mainVisual-slider{
  opacity: 1;
}
.mainVisual-slider :not(.slick-dots) li{
  position: relative;
  width: 100%;
  height: calc(100lvh - var(--header-height));
}
.mainVisual-img{
  width: 100%;
  height: calc(100lvh - var(--header-height));
  background-position: center center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.mainVisual-img > img {
  width: 100%;
  height: calc(100lvh - var(--header-height));
  object-fit: cover;
}

.mainVisual-img.-zoom{
  transform-origin: center center;
}
.slick-animation .mainVisual-img.-zoom{
  animation: amin-mainVisual-zoom 12s linear forwards;
}
.mainVisual-img.-left{
  width: 120%;
  transform-origin: left center;
}
.slick-animation .mainVisual-img.-left{
  animation: amin-mainVisual-left 12s linear forwards;
}
.mainVisual-img.-right{
  width: 120%;
  transform-origin: right center;
}
.slick-animation .mainVisual-img.-right{
  animation: amin-mainVisual-right 12s linear forwards;
}


@keyframes amin-mainVisual-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes amin-mainVisual-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10%);
  }
}
@keyframes amin-mainVisual-right {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0);
  }
}



@media screen and (max-width:1440px) {

  .mainVisual-container {
    left: 10px;
  }

}
@media screen and (max-width:834px) {

  .mainVisual-container {
    left: 0;
  }

}

@media screen and (max-width:520px) {

  /*
  container
  */

  .mainVisual-container {
    position: absolute;
    left: 0;
    top: auto;
    bottom: clamp(100px,18lvh, 300px);
    translate: 0 0;
    padding-top: 0;
  }

  .mainVisual-block {
  }

  .mainVisual-lead {
    -webkit-writing-mode: horizontal-lr;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    font-weight: 700;
    font-size: clamp(185%,4vw, 254%);
  }
  .mainVisual-lead span {
    display: inline;
    line-height: 1.8em;
    padding: 0.1em 0.5em 0.1em 1em;

  }

}


/***********
home
************/

.homeContents {
}

.homeWrapper {
  position: relative;
}
.homeBg {
  position: sticky;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100lvh;
  background-color: #ebf4fe;
  transition: background-color 3s ease;
  opacity: 0;
}
body.is-started .homeBg {
  opacity: 1;
  transition: 1s ease 0.2s;
}
.homeBg::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, #c1d9f3 0%, #fbe8ec 30% ,#fbe8ec 60% ,#3171af 100%);
  transition: 3s ;
  opacity: 0;
  z-index: 2;
}
.homeBg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, #001670 0%,#80529b 30%, #9d261e 90% ,#0d0a1d 100%);
  transition: 3s ;
  opacity: 0;
  z-index: 2;
}
body.is-color01 .homeBg {
  background-color: #ebf4fe;
}
body.is-color02 .homeBg {
  background-color: #bcd8f7;
}
body.is-color03 .homeBg::before {
  opacity: 1;
}
body.is-color04 .homeBg::after {
  opacity: 1;
}


.homeBase {
  max-width: 3000px;
  margin: 0 auto;
  padding-left: 7vw;
  padding-right: 7vw;
}

.l-more.homeMore {
  font-size: clamp(124%,2vw, 170%);
}


@media screen and (max-width:1440px) {

  .homeBase {
    padding-left: min(4vw,30px);
    padding-right: min(4vw,30px);
  }


  .homeBg::before {
    background: linear-gradient(to bottom, #c1d9f3 0%, #fbe8ec 20% ,#fbe8ec 75% ,#3171af 100%);
  }

}


/***********
homeLead
************/

.homeLead {
  position: relative;
  z-index: 99;
  text-align: center;
}
.homeLead-text {
  font-size: clamp(200%,1.3vw, 300%);
  font-weight: 700;
  color: var(--color-brand01);
  padding-top: 3em;
}
.homeLead-text::after {
  content: "";
  display: block;
  width: 7.5em;
  height: 0.3em;
  margin: 0.8em auto 0;
  background: url(../../img/wave01.png) repeat-x center center / auto 100%;
  clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 100%, 0 100%);
}

/*
scroll
*/

.homeLead-scroll {
  position: absolute;
  left: 50%;
  top: -12svh;
  translate: -50% 0 ;
  z-index: 100;
  /* opacity: 0; */
  transition: 1.5s;
  transition-delay: 0.8s;
}
body.is-started .homeLead-scroll {
  opacity: 1;
}

.homeLead-scroll a {
  display: block;
  position: relative;
  color: var(--color-base);
  text-decoration: none;
}
.homeLead-scroll-text {
  font-family: var(--font-family-gothic-en01);
  font-weight: 400;
  font-size: clamp(60%,0.6vw, 100%);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.homeLead-scroll-bar {
  display: block;
  width: 1px;
  margin: 0.8em auto 0;
  height: clamp(60px,15svh, 200px);
  background-color: var(--color-base);
  position: relative;
}
.homeLead-scroll-bar::after {
  content: "";
  display: block;
  width: 1px;
  height: 35%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform-origin: left;
  background-color: var(--color-brand04);
  animation: anim-homeLeadScroll 2s linear infinite 0.1s;
  opacity: 0;
}

@keyframes anim-homeLeadScroll {
  15% {
    top: 0;
    opacity: 0;
  }
  40% {
    top: 0;
    opacity: 1;
  }
  65% {
    top: 65%;
    opacity: 1;
  }
  90% {
    top: 65%;
    opacity: 0;
  }
}

@media screen and (max-width:640px) {


  .homeLead-text {
    font-size: clamp(139%,5vw, 200%);
    padding-top: 4em;
  }

}

/***********
homeNews
************/

.homeNews {
  padding-top: min(22vw,12em);
  position: relative;
  z-index: 9;
  overflow: hidden;
}
.homeNews-container {
  position: relative;
  padding: 0 0 6em 6%;
}
.homeNews-container::after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-base);
  border-radius: 20px 0 0 20px;
}
.homeNews-container-inner {
  position: relative;
  z-index: 9;
}

.homeNews-heading {
  font-size: clamp(300%,2.5vw, 600%);
  padding-bottom: 1.5em;
}
.homeNews-heading-subTitle {
  color: var(--color-brand02);
  font-family: var(--font-family-gothic-en01);
  line-height: 1;
  letter-spacing: 0.04em;
  translate: 0 -50%;
  margin-bottom: -0.5em;
}
.homeNews-heading-title {
  font-size: max(40%,14px);
  padding-top: 0.5em;
  padding-left: 0.2em;
  letter-spacing: 0.05em;
}

.homeNews-link {
  text-align: right;
}


.homeNews-customArrows {
  position: relative;
}
.homeNews-customArrows-block {
  position: absolute;
  right: 0;
  bottom: 25px;
  display: flex;
  justify-content: end;
}
.homeNews-customArrows-block span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 50px;
  height: 50px;
  font-size: 14px;
  background-color: var(--color-sub03);
  color: var(--color-brand01);
  margin-left: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
}
body.is-pc .homeNews-customArrows-block span:hover {
  background-color: var(--color-brand01);
  color: var(--color-base);
}



@media screen and (max-width:834px) {

  .homeNews {
    padding-top: min(22vw,8em);
  }

  .homeNews-customArrows {
    display: none;
  }
}

@media screen and (max-width:640px) {

  .homeNews {
  }
  .homeNews-container {
    padding: 0 0 4em 5%;
  }
  .homeNews-container::after {
    border-radius: 15px 0 0 15px;
  }
  .homeNews-container-inner {
    position: relative;
    z-index: 9;
  }

  .homeNews-heading {
    font-size: clamp(254%,5vw, 400%);
    padding-bottom: 1em;
  }
  .homeNews-heading-subTitle {
  }
  .homeNews-heading-title {
    padding-top: 0.2em;
  }

  .homeNews-link {
    text-align: center;
    padding-top: 1em;
  }

}

/***********
homeSection
************/

.homeSection {
  padding: min(22vw,12em) 0 0 ;
  max-width: 3000px;
  margin: 0 auto;
  position: relative;
  z-index: 9;
}
.homeSection-headline {
  text-align: right;
  padding-right: 7vw;
  font-size: clamp(240%,2vw, 400%);
  margin-bottom: -0.5em;
  position: relative;
  z-index: 10;
}
.homeSection-headline span {
  display: inline;
  line-height: 1.9em;
  padding: 0.1em 0.5em 0.2em;
  color: var(--color-base);
  background: linear-gradient(transparent 0%, var(--color-brand04) 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

}


.homeSection-section {
  display: flex;
  align-items: start;
  font-size: clamp(100%,0.9vw, 170%);
  overflow: hidden;
  padding-bottom: min(18vw,10em);
}
.homeSection-section:last-child {
  padding-bottom: min(25vw,15em);
}

.homeSection-visual {
  width: 54%;
  position: relative;
}
.homeSection-img {
  border: 1px solid var(--color-brand02);
}
.homeSection-subImg {
  width: clamp(140px,28%, 500px);
  position: absolute;
  left: 0;
  bottom: 0;
  translate: -20% 40%;
}
.homeSection-secondImg {
  border: 1px solid var(--color-brand02);
  width: 60%;
  margin: 6em auto 0;
  translate: 3em 0;
}


.homeSection-inner {
  flex: 1;
  padding-top: 1.5em;
}
.homeSection-block {
}
.homeSection-heading {
  padding-bottom: 3em;
}
.homeSection-heading-subTitle {
  font-family: var(--font-family-serif-en);
  font-weight: 400;
  font-size: 770%;
  line-height: 1;
  color: var(--color-base);
  text-stroke: 0.8px var(--color-brand02);
  -webkit-text-stroke: 0.8px var(--color-brand02);
  padding-bottom: 0.2em;
}
.homeSection-heading-title {
  display: inline-block;
  color: var(--color-brand02);
  background-color: var(--color-base);
  font-size: 108%;
  padding: 0.2em 1em;
}

.homeSection-lead {
  font-size: 200%;
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 0.5em;
  margin-bottom: 1.2em;
  color: var(--color-brand02);
  border-bottom: 2px solid var(--color-brand02);
}
.homeSection-text {
  line-height: 2;
  font-weight: 500;
  font-size: max(100%,14px);
}



.homeSection-section.-reverse {
  flex-direction: row-reverse;
}
.homeSection-section.-reverse .homeSection-block{
  padding-right: 5em;
  padding-left: 7vw;
}
.homeSection-section.-reverse .homeSection-img{
  margin-right: -2vw;
}


.homeSection-section:not(.-reverse) {
}
.homeSection-section:not(.-reverse) .homeSection-block{
  padding-left: 7em;
  padding-right: 7vw;
}
.homeSection-section:not(.-reverse) .homeSection-img{
  margin-left: -2vw;
}

@media screen and (max-width:1440px) {

  .homeSection-headline {
    padding-right: 4vw;
  }

  .homeSection-visual {
    width: 50%;
    position: relative;
  }

  .homeSection-section.-reverse .homeSection-block{
    padding-right: 4em;
    padding-left: min(4vw,30px);
  }

  .homeSection-section:not(.-reverse) .homeSection-block{
    padding-left: 4em;
    padding-right: min(4vw,30px);
  }

}

@media screen and (max-width:834px) {

  .homeSection {
    padding: min(22vw,6em) 0 0 ;
  }
  .homeSection-headline {
    padding-right: 4vw;
    font-size: clamp(170%,6vw, 200%);
  }


  .homeSection-section {
    display: block;
    font-size: clamp(100%,2.5vw, 139%);
    padding-bottom: min(18vw,5em);
  }
  .homeSection-section:last-child {
    padding-bottom: min(25vw,15em);
  }

  .homeSection-visual {
    width: auto;
  }
  .homeSection-img {
    border: none;
  }
  .homeSection-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    max-height: 300px;
  }
  .homeSection-subImg {
    width: clamp(140px,33%, 300px);
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    translate: 10% 50%;
  }
  .homeSection-secondImg {
    border: 1px solid var(--color-brand02);
    width: 70%;
    margin: 3em auto 0;
    translate: 30% 0;
    display: none;
  }


  .homeSection-inner {
    padding-top: 0;
  }
  .homeSection-block {
  }
  .homeSection-heading {
    padding-bottom: 2em;
  }
  .homeSection-heading-subTitle {
    font-size: 600%;
    margin-top: -0.6em;
    padding-bottom: 0.2em;
  }
  .homeSection-heading-title {
    font-size: 124%;
    padding: 0.1em 1em;
  }

  .homeSection-lead {
    font-size: 147%;
  }
  .homeSection-text {
    line-height: 1.8;
  }



  .homeSection-section.-reverse .homeSection-block,
  .homeSection-section:not(.-reverse) .homeSection-block{
    padding-right: 4vw;
    padding-left: 4vw;
  }
  .homeSection-section.-reverse .homeSection-img,
  .homeSection-section:not(.-reverse) .homeSection-img{
    margin: 0;
  }

}


/***********
homeLink
************/

.homeLink {
  padding: min(22vw,12em) 0;
  position: relative;
  background-color: var(--color-base);
}

.homeLink-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -3%;
  margin-bottom: -3%;
}
.homeLink-list li {
  width: 30.3%;
  margin-left: 3%;
  margin-bottom: 3%;
}
.homeLink-list li a {
  display: block;
  position: relative;
  color: var(--color-base);
  text-decoration: none;
}
.homeLink-img {
  position: relative;
}
.homeLink-img::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: 0.5s;
}
body.is-pc .homeLink-list li a:hover .homeLink-img::after{
  opacity: 0.1;
}
.homeLink-block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  z-index: 9;
}
.homeLink-icon {
  width: clamp(40px,15%, 70px);
  margin: 0 auto;
}
.homeLink-title {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: clamp(170%,1.4vw, 239%);
  font-weight: 700;
  color: var(--color-brand02);
  background-color: var(--color-base);
  border-right: 2px solid var(--color-brand02);
  padding: 1.8em 0.5em;
  letter-spacing: 0.08em;
  position: absolute;
  left: -0.5em;
  top: -0.5em;
  z-index: 9;
  pointer-events: none;
}
.homeLink-text {
  font-family: var(--font-family-gothic-en01);
  font-weight: 400;
  font-size: clamp(93%,0.9vw, 124%);
  padding-top: 0.5em;
}

@media screen and (max-width:1024px) {

  .homeLink {
    padding: min(18vw,6em) 0;
  }
  .homeLink-title {
    font-size: clamp(139%,2vw, 170%);
  }
}


@media screen and (max-width:640px) {

  .homeLink {
    padding: min(22vw,5em) 8vw;
  }

  .homeLink-list {
    display: block;
    margin: 0 0 -3em;
  }
  .homeLink-list li {
    width: auto;
    margin-left: 0;
    margin-bottom: 3em;
  }
  .homeLink-img img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .homeLink-block {
  }
  .homeLink-icon {
    width: clamp(40px,15%, 70px);
  }
  .homeLink-title {
    font-size: clamp(124%,4vw, 154%);
    border-right: 2px solid var(--color-brand02);
    padding: 1em 0.4em;
    letter-spacing: 0.04em;
    left: -0.5em;
    top: -0.5em;
  }
  .homeLink-text {
    font-family: var(--font-family-gothic-en01);
    font-weight: 400;
    font-size: clamp(93%,0.9vw, 124%);
    padding-top: 0.5em;
  }

}

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/