@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))
    "... company ... .... 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(95px * var(--window_ratio))
    "... ....... ... info info ..." auto
    "... ....... ... .... .... ..." calc(65px * var(--window_ratio))
    "... ....... ... map  map  ..." calc(400px * var(--window_ratio))
    "... ....... ... .... .... ..." calc(200px * 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;
}
.company-side-company{
  grid-area: company;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateX(-200%);
  color: #f3f4f5;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.company-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%);
}
.company-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;
}
.company-top-img-bg{
  grid-area: img;
  opacity: 0.5;
  background-color: #191970;
  z-index: 3;
}
.company-top-img{
  grid-area: img;
  width: 100%;
  z-index: 3;
}
.company-bg-parent{
  grid-column: 1/-1;
  grid-row: 6/9;
  overflow-y: hidden;
  z-index: 1;
}
.company-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(120px); }
  100% { transform:translateX(-100%); }
}
.company-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.company-bg li {
  display:inline-block;
}
.company-info-parent{
  grid-area: info;
}
.company-info{
  display: grid;
  grid-template: 
    "... ... ... ... ... ... ... ... ..." calc(56px * var(--window_ratio))
    "... left-title left-title left-content left-content right-title right-title right-content right-content" calc(18px * var(--window_ratio))
    "... ... ... ... ... ... ... ... ..." calc(56px * var(--window_ratio))
    /calc(95px * var(--window_ratio)) calc(70px * var(--window_ratio)) calc(50px * var(--window_ratio)) calc(320px * var(--window_ratio)) calc(125px * var(--window_ratio)) calc(105px * var(--window_ratio)) calc(50px * var(--window_ratio)) calc(180px * var(--window_ratio)) calc(390px * var(--window_ratio));
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.company-info-narrow{
  display: grid;
  grid-template: 
    "... ... ... ... ... ... ... ... ..." calc(40px * var(--window_ratio))
    "... left-title left-title left-content left-content left-content left-content left-content left-content" calc(45px * var(--window_ratio))
    "... ... ... ... ... ... ... ... ..." calc(40px * var(--window_ratio))
    /calc(95px * var(--window_ratio)) calc(70px * var(--window_ratio)) calc(50px * var(--window_ratio)) calc(320px * var(--window_ratio)) calc(125px * var(--window_ratio)) calc(105px * var(--window_ratio)) calc(50px * var(--window_ratio)) calc(180px * var(--window_ratio)) calc(390px * var(--window_ratio));
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.company-info p{
  margin: 0;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  letter-spacing: -0.18px;
}
.company-info-narrow p{
  margin: 0;
  font-family: YuGothic;
  font-size: calc(18px * var(--window_ratio));
  letter-spacing: -0.18px;
}
.border-less{
  border-bottom: none;
}
.content-info-left-title{
  grid-area: left-title;
  line-height: 1.5;
  font-weight: bold;
  color: #ffffff;
}
.content-info-left-content{
  grid-area: left-content;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}
.content-info-right-title{
  grid-area: right-title;
  line-height: 1.5;
  font-weight: bold;
  color: #ffffff;
}
.content-info-right-content{
  grid-area: right-content;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}
.company-map{
  grid-area: map;
  display: grid;
  grid-template: 
    "... googlemap ..." auto
    /calc(220px * var(--window_ratio)) calc(1075px * var(--window_ratio)) calc(95px * var(--window_ratio));
}
.company-map iframe{
  grid-area: googlemap;
  width: 100%;
}



/* MAIN PAGE(背景：白) */
.container-middle{
  grid-area: container-middle;
  display: grid;
  grid-template: 
      "............... ............... ..................." calc(325px * var(--window_ratio))
      "activities-side ............... activities-contents" calc(570px * var(--window_ratio))
      "............... ............... activities-option  " calc(100px * var(--window_ratio))
      / calc(135px * var(--window_ratio)) calc(165px * var(--window_ratio)) calc(1300px * var(--window_ratio));
  background-color:#ffffff;
  z-index: 2;
  overflow-x: hidden;
}
.activities-side{
  grid-area: activities-side;
  color: #191970;
  writing-mode: vertical-rl;
}
.activities-sidecontent{
  font-size: calc(20px * var(--window_ratio));
  transform: rotate(180deg);
  display: inline-block;
  width: fit-content;
}
.activities-contents{
  grid-area: activities-contents;
  overflow: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.activities-frame{
  display: inline-block;
  width: calc(350px * var(--window_ratio));
  margin-right: calc(50px * var(--window_ratio));
  vertical-align: top;
}
.activities-frame img{
  width: 100%;
}
.activities-date{
  font-size: calc(14px * var(--window_ratio));
  color: #9c9ca8;
  margin-top: calc(40px * var(--window_ratio));
  margin-bottom: calc(20px * var(--window_ratio));
  padding: 0;
}
.activities-content{
  white-space: pre-wrap;
  text-decoration: none;
  color: #272d3d;
  font-size: calc(16px * var(--window_ratio));
}
.activities-content:hover{
  text-decoration: underline;
}
.activities-option{
  grid-area: activities-option;
}
.activities-left{
  width: calc(16px * var(--window_ratio));
  padding: calc(50px * var(--window_ratio)) 0;
  margin-right: calc(20px * var(--window_ratio));
}
.activities-right{
  width: calc(16px * var(--window_ratio));
  padding: calc(50px * var(--window_ratio)) 0;
  transform: scale(-1,1);
  margin-right: 0;
}
.learn-more-parent-activities{
  display: inline-block;
  vertical-align: top;
  padding: calc(24px * var(--window_ratio)) calc(45px * var(--window_ratio));
  margin: 0;
}

.container-bottom{
  grid-area: container-bottom;
}
.parent-container{
  height: calc(1500px * var(--window_ratio));
}
.child-container{
  position: relative;
  top: 0;
  display: grid;
  grid-template:
      "... ... ..... ... ... ... .... ..." calc(300px * var(--window_ratio))
      "... ... main  ... 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)));
}