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

body{
  position: relative;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template: 
      "... container-top ..."
      "... container-middle ..."
      "... container-bottom ..."
      "... footer ..."
      / auto minmax(800px,1920px) auto;
}



/* MAIN PAGE(背景：青) */
.container-top{
  grid-area: container-top;
  display: grid;
  grid-template: 
    "... ....... ... .... img  img" calc(260px * var(--window_ratio))
    "... service ... .... img  img" calc(100px * var(--window_ratio))
    "... line    ... .... img  img" calc(80px * var(--window_ratio))
    "... top     ... .... img  img" calc(40px * var(--window_ratio))
    "... ....... ... .... img  img" calc(130px * var(--window_ratio))
    "... ....... ... .... img  img" calc(130px * var(--window_ratio))
    "... ....... ... .... .... ..." calc(240px * var(--window_ratio))
    "... ....... ... .... .... ..." calc(150px * var(--window_ratio))
    /calc(80px * var(--window_ratio)) calc(20px * var(--window_ratio)) calc(30px * var(--window_ratio)) calc(250px * var(--window_ratio)) calc(1145px * var(--window_ratio)) calc(75px * var(--window_ratio));
  color: #ffffff;
  background-color:#191970;
  overflow-x: hidden;
}
.service-side-service{
  grid-area: service;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateX(-200%);
  color: #f3f4f5;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.service-side-line{
  grid-area: line;
  display: flex;
  border-top: 1px solid #ffffff;
  opacity: 0.5;
  width: calc(0px * var(--window_ratio));
  height: calc(40px * var(--window_ratio));
  transform: translateY(25%);
}
.service-side-top{
  grid-area: top;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateX(-50%);
  color: rgba(243, 244, 245, 0.5);
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.service-top-img-bg{
  grid-area: img;
  opacity: 0.5;
  background-color: #191970;
  z-index: 3;
}
.service-top-img{
  grid-area: img;
  width: 100%;
  z-index: 3;
}
.service-bg-parent{
  grid-column: 1/-1;
  grid-row: 6/9;
  overflow-y: hidden;
  z-index: 1;
}
.service-bg{
  margin: 0;
  color: #ffffff;
  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(550px); }
  100% { transform:translateX(-100%); }
}
.service-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.service-bg li {
  display:inline-block;
}
.service-info-parent{
  grid-area: info;
}


/* MAIN PAGE(背景：白) */
.container-middle{
  grid-area: container-middle;
  display: grid;
  grid-template: 
    "... ...  ... ...   ... ..... .... .... ...  ...   .... ... ...   ..." calc(150px * var(--window_ratio))
    "... side ... sub1  ... img1  img1 img1 ...  ...   .... ... ...   ..." calc(72px * var(--window_ratio))
    "... ...  ... ...   ... img1  img1 img1 ...  ...   .... ... ...   ..." calc(50px * var(--window_ratio))
    "... ...  ... ...   ... img1  img1 img1 ...  main1 .... ... ...   ..." calc(50px * var(--window_ratio))
    "... ...  ... ...   ... img1  img1 img1 ...  ...   .... ... ...   ..." calc(67px * var(--window_ratio))
    "... ...  ... ...   ... img1  img1 img1 ...  text1 .... ... ...   ..." calc(40px * var(--window_ratio))
    "... ...  ... line1 ... img1  img1 img1 ...  text1 .... ... ...   ..." calc(66px * var(--window_ratio))
    "... ...  ... ...   ... img1  img1 img1 ...  text1 .... ... ...   ..." calc(270px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... .... ...  ...   .... ... ...   ..." calc(70px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... img2 img2 img2  img2 ... sub2  ..." calc(72px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... img2 img2 img2  img2 ... ...   ..." calc(20px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... img2 img2 img2  img2 ... line2 ..." calc(65px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... img2 img2 img2  img2 ... ...   ..." calc(15px * var(--window_ratio))
    "... ...  ... ...   ... main2 .... img2 img2 img2  img2 ... ...   ..." calc(26px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... img2 img2 img2  img2 ... ...   ..." calc(68px * var(--window_ratio))
    "... ...  ... ...   ... text2 .... img2 img2 img2  img2 ... ...   ..." calc(160px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... img2 img2 img2  img2 ... ...   ..." calc(174px * var(--window_ratio))
    "... ...  ... ...   ... ..... .... .... ...  ...   .... ... ...   ..." calc(90px * var(--window_ratio))
    "... ...  ... sub3  ... img3  img3 img3 ...  ...   .... ... ...   ..." calc(72px * var(--window_ratio))
    "... ...  ... ...   ... img3  img3 img3 ...  ...   .... ... ...   ..." calc(20px * var(--window_ratio))
    "... ...  ... line3 ... img3  img3 img3 ...  ...   .... ... ...   ..." calc(64px * var(--window_ratio))
    "... ...  ... ...   ... img3  img3 img3 ...  main3 .... ... ...   ..." calc(26px * var(--window_ratio))
    "... ...  ... ...   ... img3  img3 img3 ...  ...   .... ... ...   ..." calc(66px * var(--window_ratio))
    "... ...  ... ...   ... img3  img3 img3 ...  text3 .... ... ...   ..." calc(196px * var(--window_ratio))
    "... ...  ... ...   ... img3  img3 img3 ...  ...   .... ... ...   ..." calc(156px * var(--window_ratio))
    /* 80 20  160 12    17  340   125  130  95   340   30   20  12    200 */
    /calc(80px * var(--window_ratio)) calc(20px * var(--window_ratio)) calc(160px * var(--window_ratio)) calc(12px * var(--window_ratio)) calc(17px * var(--window_ratio)) calc(340px * var(--window_ratio)) calc(125px * var(--window_ratio)) calc(130px * var(--window_ratio)) calc(95px * var(--window_ratio)) calc(340px * var(--window_ratio)) calc(30px * var(--window_ratio)) calc(20px * var(--window_ratio)) calc(12px * var(--window_ratio)) calc(200px * var(--window_ratio));
  background-color: #ffffff;
  overflow: hidden;
}
.middle-side-service{
  grid-area: side;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transform: rotate(270deg) translateX(-150%);
  color: #191970;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.middle-sub-1{
  grid-area: sub1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transform: rotate(270deg) translateX(-150%);
  color: #191970;
  font-size: calc(12px * var(--window_ratio));
  font-weight: 500;
}
.middle-line-1{
  grid-area: line1;
  display: flex;
  border-top: 1px solid #191970;
  width: calc(0px * var(--window_ratio));
  height: calc(40px * var(--window_ratio));
}
.middle-img-1{
  grid-area: img1;
  width: 100%;
}
.middle-main-1{
  grid-area: main1;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(28px * var(--window_ratio));
  font-weight: 500;
  color: #272d3d;
}
.middle-text-1{
  grid-area: text1;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(15.8px * var(--window_ratio));
  line-height: 2.25;
  font-weight: 500;
  color: #272d3d;
}
.middle-sub-2{
  grid-area: sub2;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transform: rotate(270deg) translateX(-150%);
  color: #191970;
  font-size: calc(12px * var(--window_ratio));
  font-weight: 500;
}
.middle-line-2{
  grid-area: line2;
  display: flex;
  border-top: 1px solid #191970;
  width: calc(0px * var(--window_ratio));
  height: calc(40px * var(--window_ratio));
}
.middle-img-2{
  grid-area: img2;
  width: 100%;
}
.middle-main-2{
  grid-area: main2;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(28px * var(--window_ratio));
  font-weight: 500;
  color: #272d3d;
}
.middle-text-2{
  grid-area: text2;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(15.8px * var(--window_ratio));
  line-height: 2.25;
  font-weight: 500;
  color: #272d3d;
}
.middle-sub-3{
  grid-area: sub3;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transform: rotate(270deg) translateX(-150%);
  color: #191970;
  font-size: calc(12px * var(--window_ratio));
  font-weight: 500;
}
.middle-line-3{
  grid-area: line3;
  display: flex;
  border-top: 1px solid #191970;
  width: calc(0px * var(--window_ratio));
  height: calc(40px * var(--window_ratio));
}
.middle-img-3{
  grid-area: img3;
  width: 100%;
}
.middle-main-3{
  grid-area: main3;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(28px * var(--window_ratio));
  font-weight: 500;
  color: #272d3d;
}
.middle-text-3{
  grid-area: text3;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(15.8px * var(--window_ratio));
  line-height: 2.25;
  font-weight: 500;
  color: #272d3d;
}


.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  ... sub sub  sub" calc(60px * var(--window_ratio))
      "... ... ..... ... ... .... ..." calc(23px * var(--window_ratio))
      "... ... ..... ... ... .... ..." calc(38px * var(--window_ratio))
      "... ... learn ... ... .... ..." calc(52px * var(--window_ratio))
      "... ... ..... ... ... .... ..." calc(80px * var(--window_ratio))
      /calc(135px * var(--window_ratio)) calc(85px * var(--window_ratio)) calc(320px * var(--window_ratio)) calc(30px * var(--window_ratio)) calc(695px * var(--window_ratio)) calc(260px * 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(60px * 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(21px * 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(135px * 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(-500px * var(--window_ratio)));
}