@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-news ..."
      "... container-bottom ..."
      "... footer ..."
      / auto minmax(800px,1920px) auto;
}
/* MAIN PAGE(背景：青) */
.container-top{
  grid-area: container-top;
  display: grid;
  grid-template: 
    "... .... ... ... img" calc(234px * var(--window_ratio))
    "... news ... ... img" calc(150px * var(--window_ratio))
    "... .... ... ... img" calc(20px * var(--window_ratio))
    "... line ... ... img" calc(40px * var(--window_ratio))
    "... .... ... ... img" calc(20px * var(--window_ratio))
    "... top  ... ... img" calc(37px * var(--window_ratio))
    "... .... ... ... img" calc(115px * var(--window_ratio))
    "... .... ... ... ..." calc(125px * var(--window_ratio))
    "... .... ... ... ..." calc(135px * var(--window_ratio))
    "... .... ... ... ..." calc(150px * var(--window_ratio))
    /* 80 16  145 130 1220  */
    /calc(80px * var(--window_ratio)) calc(16px * var(--window_ratio)) calc(145px * var(--window_ratio)) calc(130px * var(--window_ratio)) calc(1220px * var(--window_ratio));
  color: #ffffff;
  background-color:#191970;
  overflow-x: hidden;
}
.news-side{
  grid-area: news;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateY(-18%);
  color: #f3f4f5;
  width: max-content;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.news-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%);
}
.news-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;
}
.news-top-img-bg{
  grid-area: img;
  opacity: 0.5;
  background-color: #191970;
  z-index: 3;
}
.news-top-img{
  grid-area: img;
  width: 100%;
  z-index: 3;
}
.news-bg-parent{
  grid-column: 1/-1;
  grid-row: 8/10;
  z-index: 1;
}
.news-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(250px); }
  100% { transform:translateX(-100%); }
}
.news-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.news-bg li {
  display:inline-block;
}
.news-info-parent{
  grid-area: info;
}

.container-news{
  grid-area: container-news;
  display: grid;
  grid-template: 
    "... all      post ..." calc(14px * var(--window_ratio))
    "... ........ post ..." calc(30px * var(--window_ratio))
    "... event    post ..." calc(14px * var(--window_ratio))
    "... ........ post ..." calc(30px * var(--window_ratio))
    "... activity post ..." calc(14px * var(--window_ratio))
    "... ........ post ..." auto
    /* 200 255    950  200 */
    /calc(200px * var(--window_ratio)) calc(250px * var(--window_ratio)) calc(950px * var(--window_ratio)) calc(200px * var(--window_ratio));
    color: #ffffff;
    background-color:#191970;
}
.news-post{
  grid-area: post;
}
.news-group{
  position: relative;
  opacity: 0.5;
}
.news-group:hover{
  opacity: 1.0;
}
.news-date{
  margin: 0 0 calc(26px * var(--window_ratio)) 0;
  font-size: calc(14px * var(--window_ratio));
  line-height: 1.71;
  color: #ffffff;
}
.news-text{
  font-size: calc(18px * var(--window_ratio));
  line-height: 2.11;
  letter-spacing: calc(-0.18px * var(--window_ratio));
  color: #ffffff;
  text-decoration: none;
  z-index: 2;
}
.news-text:hover{
  text-decoration: underline;
}
.news-group img{
  position: absolute;
  opacity: 0.3;
  display: none;
  z-index: 1;
}
.news-gap{
  width: 100%;
  height: calc(80px * var(--window_ratio));
}
.pagenation{
  margin-top: calc(75px * var(--window_ratio));
  margin-bottom: calc(225px * var(--window_ratio));
  text-align: center;
}
.pagenation a{
  color: #ffffff;
  opacity: 0.5;
  margin-left: calc(22px * var(--window_ratio));
  margin-right: calc(22px * var(--window_ratio));
  text-decoration: none;
}
.pagenation a:hover{
  text-decoration: underline;
}
.pagenation span{
  margin-left: calc(22px * var(--window_ratio));
  margin-right: calc(22px * var(--window_ratio));
}
/* MAIN PAGE(背景：青) */
.container_top{
  display: grid;
  grid-auto-flow: row dense;  /* gridで並べる方向を横方向にする(標準) denseをつけると隙間があれば埋める設定 */
  grid-template-columns: calc(135/1600 * 100%) calc(65/1600 * 100%) calc(179/1600 * 100%) calc(72/1600 * 100%) calc(233/1600 * 100%) calc(714/1600 * 100%) calc(124/1600 * 100%) calc(75/1600 * 100%);
  grid-template-rows: 736px 313px 1651px 350px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  font-size: 16px;
  background-color:midnightblue;
  z-index: 1;
  overflow: hidden;
}
.news_text_side{
  grid-column: 1/2;
  grid-row: 1/2;
  width: fit-content;
  writing-mode: vertical-rl;
  color: white;
  margin-top: 273px;
  margin-left: 83px;
  font-weight: 600;
}
.news_text_line{
  display: inline-block;
  vertical-align: middle;
  opacity: 0.4;
  padding:20px 5px 20px 0px;
  text-decoration: line-through;
}
.news_text_top_sidecontent{
  display: inline-block;
  opacity: 0.7;
  transform: rotate(180deg);
}
.news_text_news_sidecontent{
  display: inline-block;
  transform: rotate(180deg);
}
.news_top_img_background{
  grid-column: 4/-1;
  grid-row: 1/2;
  opacity: 0.3;
  background-color: #191970;
  z-index: 3;
}
.news_top_img{
  grid-column: 4/-1;
  grid-row: 1/2;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.news_top_text_range{
  grid-column: 4/-1;
  grid-row: 1/3;
  width: 100%;
}
.news_top_text{
  grid-column: 4/-1;
  grid-row: 1/3;
  font-size: 370px;
  font-family: Montserrat;
  font-weight: 100;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.25;
  letter-spacing: -32.04px;
  color: white;
  margin-top: 713px;
  margin-right: 80px;
  text-align: right;
  z-index: 1;
}
.news_block_side{
  grid-column: 3/4;
  grid-row: 3/4;
  opacity: 0.5;
  text-align: left;
}
.news_text_all{
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.22;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  margin-top: 0px;
}
.news_text_event_activity{
  font-size: 18px;
  opacity: 0.5;
  font-family: Montserrat;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.22;
  letter-spacing: normal;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
}
.news_block_main{
  grid-column: 5/7;
  grid-row: 3/4;
  height: 1400px;
  width: 948px;
  text-align: left;
}
.news_content_block{
  position: relative;
  height: 94px;
  width: 100%;
  z-index: 1;
  margin-top: 7px;
  margin-bottom: 90px;
}
.news_date{
  font-family: Montserrat;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.71;
  letter-spacing: normal;
  color: rgba(243, 244, 245, 0.5);
  z-index: 2;
}
.news_content{
  font-family: YuGothic;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.11;
  letter-spacing: -0.18px;
  color: rgba(243, 244, 245, 0.5);
  z-index: 2;
}
.news_content_block:hover a{
  text-decoration: underline;
  color: #f3f4f5;
  opacity: 1.0;
  z-index: 2;
}
.news_content_block img{
  display: none;
  position: absolute;
  opacity: 0.3;
  top:-55px;
  left: 136px;
  z-index: 1;
}
.news_content_block:hover img{
  display: block;
  z-index: 1;
}
.news_pagination{
  grid-column: -6/-3;
  grid-row: 4/6;
}
.news_text_left{
  display: inline-block;
  padding: 0;
  margin-left: 193px;
  color: white;
}
.news_text_margin{
  display: inline-block;
  padding: 0;
  font-family: Montserrat;
  font-size: 13.5px;
  margin-left: 30px;
  color: white;
}
.news_text_right{
  display: inline-block;
  padding: 0;
  margin-left: 739px;
}

/* 背景の罫線 */
.v-line-white-1{
  grid-column: 1/-1;
  grid-row: 1/5;
  width: calc(135/1600 * 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.v-line-white-2{
  grid-column: 1/-1;
  grid-row: 2/5;
  width: calc(685/1600 * 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.v-line-white-3{
  grid-column: 1/-1;
  grid-row: 2/5;
  width: calc(1524/1600 * 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.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)));
}




/* MAIN PAGE(背景：白) */
.container_bottom{
  display: grid;
  grid-auto-flow: row dense;  /* gridで並べる方向を横方向にする(標準) denseをつけると隙間があれば埋める設定 */
  grid-template-columns: calc(135/1600 * 100%) calc(1464/1600 * 100%);
  grid-template-rows: 480px 500px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  font-size: 16px;
  background-color:white;
  z-index: 1;
  overflow: hidden;
}
.news_bottom_text_contact{
  display: inline-block; 
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 172px;
  margin-left: 84px;
  font-family: Montserrat;
  font-size: 60px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.6px;
  text-align: left;
  vertical-align: middle; 
  color: #272d3d; 
}
.news_bottom_text_contact_jp{
  display: inline-block;
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 184px;
  margin-left: 436px;
  font-family: YuGothic;
  font-size: 22px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.73;
  letter-spacing: -0.22px;
  text-align: left;
  vertical-align: middle; 
  color: #272d3d; 
}
.news_learnmore{
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 297px;
  margin-left: 100px;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 7.14;
  letter-spacing: normal;
  text-align: left;
  color: #191970;
}
.news_next{
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 297px;
  margin-left:800px;
  font-family: Montserrat;
  font-size: 116px;
  font-weight: 900;
  color: transparent;
  text-align: center;
  background-image: url("<?php echo get_theme_file_uri() ?>/images/05_news/b-news_next_image.jpg");
  background-position: 0% 85%;
  -webkit-background-clip: text;
}
.news_bottom_img{
  grid-column: 2/3;
  grid-row: -2/-1;
  height: 100%;
  width: 100%;
}

/* 背景の罫線 */
.v-line-gray-1{
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: calc(135/1600 * 100%);
  border-right: 1px solid rgba(46, 46, 46, 0.08);
}
.v-line-gray-2{
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: calc(685/1600 * 100%);
  border-right: 1px solid rgba(46, 46, 46, 0.08);
}
.v-line-gray-3{
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: calc(1524/1600 * 100%);
  border-right: 1px solid rgba(46, 46, 46, 0.08);
}