@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500&display=swap');

body{
    position: relative;
    margin: 0;
    font-family: 'Montserrat', '游ゴシック体','游ゴシック', YuGothic, Yu Gothic, sans-serif;
    display: grid;
    grid-template: 
        "... container-top ..."
        "... container-middle ..."
        "... container-voice  ..."
        "... container-bottom ..."
        "... footer ..."
        / auto minmax(800px,1920px) auto;
}

/* MAIN PAGE(背景：青) */
.container-top{
  grid-area: container-top;
  display: grid;
  grid-template: 
      "......... ... ......... ......... ......... ........." calc(260px * var(--window_ratio))
      "main-side ... main-title main-title main-title ........." calc(475px * var(--window_ratio))
      "......... ... ......... ......... ......... ........." calc(135px * var(--window_ratio))
      "......... ... main-catchcopy main-catchcopy main-catchcopy ........." calc(90px * var(--window_ratio))
      "......... ... ......... ......... ......... ........." calc(60px * var(--window_ratio))
      "......... ... main-text-ja ......... main-text-en ........." calc(325px * var(--window_ratio))
      "......... ... main-text-ja ......... main-text-en ........." calc(840px * var(--window_ratio))
      / calc(135px * var(--window_ratio)) calc(80px * var(--window_ratio)) calc(570px * var(--window_ratio)) calc(50px * var(--window_ratio)) calc(570px * var(--window_ratio)) calc(195px * var(--window_ratio));
  color: #ffffff;
  background-color: #191970;
  font-size: calc(16px * var(--window_ratio));
  overflow-x: hidden;
}

.main-side{
  grid-area: main-side;
  justify-self: right;
  margin-right: calc(25px * var(--window_ratio));
  color: #191970;
  writing-mode: vertical-rl;
}
.main-side-content{
  transform: rotate(180deg);
  display: inline-block;
  width: fit-content;
  margin: calc(40px * var(--window_ratio)) 0px 0px 0px;
  font-family: Montserrat;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
  color: #f3f4f5;
}
.main-title{
  grid-area: main-title;
    margin: 0px;
    font-family: Montserrat;
    font-size: calc(120px * var(--window_ratio));
    font-weight: 100;
    line-height: 1.31;
    letter-spacing: calc(-6px * var(--window_ratio));
    color: #ffffff;
}
.main-title span{
  padding-bottom: calc(18px * var(--window_ratio));
  border-bottom: calc(1px * var(--window_ratio)) solid #ffffff;
}
.main-catchcopy{
  grid-area: main-catchcopy;
  font-family: YuGothic;
  font-size: calc(30px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.73;
  color: #ffffff;
}
.main-text-ja{
  grid-area: main-text-ja;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  font-weight: 500;
  line-height: 2.11;
  text-align: justify;
  color: #ffffff;
}
.main-text-en{
  grid-area: main-text-en;
  font-family: Montserrat;
  font-size: calc(18px * var(--window_ratio));
  font-weight: 300;
  line-height: 2;
  text-align: justify;
  color: #ffffff;
}
.vision-bg-parent{
  grid-column: 1/-1;
  grid-row: 7/8;
  overflow-y: visible;
}
.vision-bg{
  margin: 0;
  color: rgba(255, 255, 255, 0.05);
  mix-blend-mode: normal;
  font-size: calc(400px * var(--window_ratio));
  font-weight: 100;
  line-height: calc(100px * var(--window_ratio));
  letter-spacing: calc(-32px * var(--window_ratio));
  white-space: nowrap;
  text-overflow: clip;
}
@keyframes hscroll {
  0% { transform:translateX(4px); }
  100% { transform:translateX(-100%); }
}
.vision-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.vision-bg li {
  display:inline-block;
}



/* MAIN PAGE(背景：白) */
.container-middle{
  grid-area: container-middle;
  display: grid;
  grid-template:
    "........... ........... ................ ................ ................ ................ ........... middle-img  middle-img " calc(300px * var(--window_ratio))
    "middle-side ........... middle-catchcopy middle-catchcopy middle-catchcopy middle-catchcopy ........... middle-img  middle-img " calc(135px * var(--window_ratio))
    "........... ........... ................ ................ ................ ................ ........... middle-img  middle-img " calc(60px * var(--window_ratio))
    "........... ........... middle-text      middle-text      middle-text      middle-text      ........... middle-img  middle-img " calc(210px * var(--window_ratio))
    "........... ........... ................ ................ ................ ................ ........... ..........  .......... " calc(60px * var(--window_ratio))
    "........... ........... ................ middle-ceo       ................ middle-name      middle-name ..........  .......... " calc(20px * var(--window_ratio))
    "........... middle-line middle-line      middle-line      middle-line      middle-line      middle-line middle-line middle-line" calc(90px * var(--window_ratio))
    "........... ........... ................ ................ ................ ................ ........... ..........  voice-img  " calc(210px * var(--window_ratio))
    /calc(135px * var(--window_ratio)) calc(80px * var(--window_ratio)) calc(380px * var(--window_ratio)) calc(90px * var(--window_ratio)) calc(30px * var(--window_ratio)) calc(65px * var(--window_ratio)) calc(220px * var(--window_ratio)) calc(180px * var(--window_ratio)) calc(420px * var(--window_ratio));
  font-size: calc(16px * var(--window_ratio));
  background-color:#ffffff;
}
.middle-side{
  grid-area: middle-side;
  justify-self: right;
  margin-right: calc(25px * var(--window_ratio));
  color: #191970;
  writing-mode: vertical-rl;
}
.middle-sidecontent{
  transform: rotate(180deg);
  display: inline-block;
  width: fit-content;
  margin: 0;
  font-family: Montserrat;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
  color: #191970;
}
.middle-catchcopy{
    grid-area: middle-catchcopy;
    margin: 0;
    font-family: YuGothic;
    font-size: calc(30.5px * var(--window_ratio));
    font-weight: 500;
    line-height: 1.73;
    color: #272d3d;
}
.middle-text{
    grid-area: middle-text;
    margin: 0;
    padding: 0;
    font-family: YuGothic;
    font-size: calc(18px * var(--window_ratio));
    font-weight: 500;
    line-height: 2.11;
    text-align: justify;
    color: #272d3d;
}
.middle-ceo{
  grid-area: middle-ceo;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  font-weight: bold;
  color: rgba(156, 156, 168, 0.5);
}
.middle-name{
  grid-area: middle-name;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  font-weight: bold;
  color: #272d3d;
}
.middle-line{
  grid-area: middle-line;
  width: 100%;
  border-bottom: 1px solid rgba(46, 46, 46, 0.03);
}
.middle-img{
  grid-area: middle-img;
  width: 100%;
  transform: translateY(calc(-120px * var(--window_ratio)));
}
.voice-img{
  grid-area: voice-img;
  width: 100%;
  transform: translateY(calc(50px * var(--window_ratio)));
}


/* Voice */
.container-voice{
  grid-area: container-voice;
  display: grid;
  grid-template:
    "voice-side  ... ............... ..." calc(240px * var(--window_ratio))
    "........... ... ............... ..." calc(70px * var(--window_ratio))
    "........... ... voice-container ..." calc(240px * var(--window_ratio))
    "........... ... voice-container ..." calc(70px * var(--window_ratio))
    "........... ... voice-container ..." calc(75px * var(--window_ratio))
    "........... ... voice-container ..." calc(75px * var(--window_ratio))
    "........... ... ............... ..." calc(50px * var(--window_ratio))
    "........... ... voice-option    ..." calc(8px * var(--window_ratio))
    "........... ... ............... ..." calc(100px * var(--window_ratio))
    /calc(135px * var(--window_ratio)) calc(75px * var(--window_ratio)) calc(1180px * var(--window_ratio)) calc(210px * var(--window_ratio));
  background-color:#f6f6fa;
}

.voice-side{
  grid-area: voice-side;
  justify-self: right;
  align-self: flex-end;
  margin-right: calc(30px * var(--window_ratio));
  color: #191970;
  writing-mode: vertical-rl;
}
.voice-sidecontent{
  transform: rotate(180deg);
  display: inline-block;
  width: fit-content;
  margin: 0;
  font-family: Montserrat;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
  color: #191970;
}
.voice-container{
  grid-area: voice-container;
  display: flex;
  overflow: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.voice-content{
  display: grid;
  grid-template: 
    "... name ... ..... ..." calc(25px * var(--window_ratio))
    "... .... ... ..... ..." calc(50px * var(--window_ratio))
    "... left ... right ..." calc(315px * var(--window_ratio))
    /calc(35px * var(--window_ratio)) calc(530px * var(--window_ratio)) calc(50px * var(--window_ratio)) calc(530px * var(--window_ratio)) calc(35px * var(--window_ratio));
  z-index: 2;
}
.voice-name{
  grid-area: name;
  font-family: YuGothic;
  font-size: calc(24px * var(--window_ratio));
  font-weight: 500;
  margin: 0;
  color: #272d3d;
}
.voice-left{
  grid-area: left;
  font-size: calc(16px * var(--window_ratio));
  font-weight: 500;
  color:#272d3d;
  margin: 0;
  line-height: 2.38;
  white-space: normal;
}
.voice-right{
  grid-area: right;
  font-size: calc(16px * var(--window_ratio));
  font-weight: 500;
  color:#272d3d;
  margin: 0;
  line-height: 2.38;
  white-space: normal;
}
.voice-option{
  grid-area: voice-option;
  display: grid;
  grid-template:
    "left ... right" calc(8px * var(--window_ratio))
    /calc(17px * var(--window_ratio)) calc(19px * var(--window_ratio)) calc(17px * var(--window_ratio));
  z-index: 2;
}
.voice-option-left{
  grid-area: left;
  width: 100%;
}
.voice-option-right{
  grid-area: right;
  width: 100%;
  transform: scale(-1,1);
}


.voice-bg-parent{
  grid-column: 1/-1;
  grid-row: 2/6;
  overflow: hidden;
  z-index: 1;
}
.voice-bg{
  margin: 0;
  color: rgba(39, 45, 61, 0.05);
  mix-blend-mode: normal;
  font-size: calc(400px * var(--window_ratio));
  font-weight: 100;
  line-height: calc(100px * var(--window_ratio));
  letter-spacing: calc(-32px * var(--window_ratio));
  white-space: nowrap;
  text-overflow: clip;
  opacity: 0.4;
}
@keyframes hscroll {
  0% { transform:translateX(4px); }
  100% { transform:translateX(-100%); }
}
.voice-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.voice-bg li {
  display:inline-block;
}








/*NEXT*/

.container-bottom{
  grid-area: container-bottom;
}
.parent-container{
  height: calc(1500px * var(--window_ratio))
}
.child-container{
  position: sticky;
  top: 0;
  display: grid;
  grid-template:
      "... ... ..... .... ... ... .... ..." calc(300px * var(--window_ratio))
      "... ... main  main sub sub sub  sub" calc(44px * var(--window_ratio))
      "... ... ..... .... ... ... next ..." calc(23px * var(--window_ratio))
      "... ... ..... .... ... ... next ..." calc(38px * var(--window_ratio))
      "... ... learn .... ... ... next ..." calc(52px * var(--window_ratio))
      "... ... ..... .... ... ... .... ..." calc(80px * var(--window_ratio))
      /calc(135px * var(--window_ratio)) calc(90px * var(--window_ratio)) calc(185px * var(--window_ratio)) calc(40px * var(--window_ratio)) calc(85px * var(--window_ratio)) calc(735px * var(--window_ratio)) calc(255px * var(--window_ratio)) calc(80px * var(--window_ratio));
  z-index: 1;
}
.child-bg{
  grid-column: 1/-1;
  grid-row: 1/2;
  width: 100%;
  transform: translateY(calc(20px * var(--window_ratio)));
}
.parallax-title{
  grid-area: main;
  font-size: calc(44px * var(--window_ratio));
  color: #272d3d;
  font-weight: 500;
  z-index: 2;
}
.parallax-subtitle{
  grid-area: sub;
  font-size: calc(21px * var(--window_ratio));
  color: #272d3d;
  margin: calc(11px * var(--window_ratio)) 0;
  width: max-content;
  z-index: 2;
}
.parallax-learnmore{
  grid-area: learn;
}
.child-container-image{
  display: grid;
  z-index: 1;
  grid-template:
      "... parallax-image" calc(495px * var(--window_ratio))
      / calc(215px * var(--window_ratio)) auto;
}
.parallax-bg{
  grid-area: parallax-image;
  background-color: #191970;
  height: calc(670px * var(--window_ratio));
  opacity: 0.5;
}
.parallax-image{
  grid-area: parallax-image;
}
.parallax-image img{
  width: 100%;
}
.parallax-bg-black{
  grid-column: 1/-1;
  grid-row: 1/1;
  background-color: #333;
  transform: translateY(calc(-495px * var(--window_ratio)));
}