body{
    position: relative;
    margin: 0;
    font-family: 'Montserrat', '游ゴシック体','游ゴシック', YuGothic, Yu Gothic, sans-serif;
    font-weight: normal;
    display: grid;
    grid-template:
        "... container-top ..."
        "... container-vision ..."
        "... container-activities ..."
        "... container-parallax ..."
        "... footer ..."
        / auto minmax(800px,1920px) auto;
}
.background-blue{
    grid-column: 1/-1;
    grid-row: 1/3;
    background-color:#191970;
    z-index: -2;
}

.container-top{
    grid-area: container-top;
    display: grid;
    grid-template: 
        "......... ......... ......... ......... ......... ........." calc(150px * var(--window_ratio))
        "......... ......... ......... top-image ......... ........." calc(160px * var(--window_ratio))
        "......... main-word ......... top-image ......... ........." calc(120px * var(--window_ratio))
        "......... main-word ......... top-image pager     ........." calc(265px * var(--window_ratio))
        "......... ......... ......... ......... ......... ........." calc(70px * var(--window_ratio))
        "progress  progress  progress  progress  progress  progress " calc(2px * var(--window_ratio))
        "......... news      news      news      scroll    ........." calc(135px * var(--window_ratio))
        / calc(130px * var(--window_ratio)) calc(380px * var(--window_ratio)) calc(120px * var(--window_ratio)) calc(400px * var(--window_ratio)) calc(490px * var(--window_ratio)) calc(80px * var(--window_ratio));
        color: #ffffff;
}

.header-area{
    grid-area: header-area;
}
.main-word{
    grid-area: main-word;
}
.top-image{
    grid-area: top-image;
}
.pager,.contents{
    grid-area: pager;
    display: flex;
}
.progress{
    grid-area: progress;
}
.news{
    grid-area: news;
    display: flex;
}
.scroll-area{
    grid-area: scroll;
    display: flex;
}
.background-img{
    grid-column: 1/-1;
    grid-row: 1/-1;
    position: absolute;
    z-index: -1;
    overflow-y: hidden;
}
.background-img img{
    opacity: 0.1;
    width: 100vw;
}


/* main-word */
.main-word-top{
	font-size: calc(14px * var(--window_ratio));
	margin-bottom: calc(30px * var(--window_ratio));
    line-height: 1.65;
    text-align: left;
}
.main-word-center{
	font-size: calc(48px * var(--window_ratio));
	margin: 0;
	line-height: 1.20;
	letter-spacing: calc(-0.5px * var(--window_ratio));
	text-align: left;
}
.main-word-bottom{
    font-size: calc(14px * var(--window_ratio));
    margin-top: calc(30px * var(--window_ratio));
    line-height: 1.70;
    text-align: left;
    font-family: '游ゴシック体', yuGothic, sans-serif;
}
/* top-image */
#main-img{
    width: 100%;
    overflow: hidden;
}
/* pager */
.main-pager{
    width: calc(20px * var(--window_ratio));
    margin: 0 0 0 auto;
    font-size: calc(14px * var(--window_ratio));
}
#page-count{
    text-align: center;
    margin-bottom: 0px;
}
#page-count-total{
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 0px;
}
.page-progress{
    width: calc(20px * var(--window_ratio));
    height: calc(2px * var(--window_ratio));
    margin: 0;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
}
.page-progress::-webkit-progress-value,
.page-progress-wide::-webkit-progress-value{
    background-color: #ffffff;
}
.page-progress::-moz-progress-bar,
.page-progress-wide::-moz-progress-bar{
    background-color: #ffffff;
}
/* contents */
.main-contents{
    margin: auto 0 0 auto;
    width: calc(100x * var(--window_ratio));
    text-align: right;
    align-items: flex-end;
}
.main-content{
    margin: 0;
    font-size: calc(12px * var(--window_ratio));
    font-weight: 500;
    opacity: 0.5;
}
.main-category{
    margin-top: calc(10px * var(--window_ratio));
    font-size: calc(14px * var(--window_ratio));
    font-weight: 500;
    color: #ffffff;
}
/* progress */
.main-progress{
    margin: 0;
    padding: 0;
}
.page-progress-wide{
    width: 100%;
    transform: translateY(calc(-9px * var(--window_ratio)));
    height: calc(3px * var(--window_ratio));
    background-color: #ffffff;
}
/* news */
.news_title{
    align-self: center;
    opacity: 0.7;
    font-size: calc(14px * var(--window_ratio));
    font-weight: 500;
    line-height: 4.29;
    color: rgba(255, 255, 255, 0.5);
}
.news_posts{
    margin: 0 0 0 calc(45px * var(--window_ratio));
    align-self: center;
}
.news_post{
    display: block;
    margin: calc(4px * var(--window_ratio)) 0;
    color: #ffffff;
    font-size: calc(14px * var(--window_ratio));
    line-height: 1.68;
    text-decoration: none;
    font-family: '游ゴシック体', yuGothic, sans-serif;
}
.news_post:hover{
    text-decoration: underline;
}
/* scroll */
.scroll-down{
    width: auto;
    margin: 0 0 0 auto;
    align-self: center;
}
.scroll{
    display: inline-block;
    margin-right: calc(20px * var(--window_ratio));
    opacity: 0.7;
    font-size: calc(14px * var(--window_ratio));
    font-weight: 500;
    line-height: 4.29;
    color: rgba(255, 255, 255, 0.5);
}
.down-circle{
    display: inline-block;
    width: calc(50px * var(--window_ratio));
    height: calc(50px * var(--window_ratio));
    margin: 0;
    font-weight: 100;
    font-size: calc(48px * var(--window_ratio));
    line-height: calc(48px * var(--window_ratio));
    text-align: center;
    vertical-align: middle;
    background-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,1.0);
    border-radius: 50%;
}
.down-cursor{
    display: inline-block;
    width: calc(8px * var(--window_ratio));
    height: calc(16px * var(--window_ratio));
    margin: 0;
    padding: 0 0 calc(3px * var(--window_ratio)) 0;
    text-align: center;
    vertical-align: middle;
}
/* prev&next */
.main-prevarea{
    grid-column: 1/4;
    grid-row: 2/5;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.main-nextarea{
    grid-column: 5/7;
    grid-row: 2/5;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* vision */
.container-vision{
    grid-area: container-vision;
    display: grid;
    grid-template: 
        "........... ............. ......... ............... ........." calc(230px * var(--window_ratio))
        "vision-side vision-visual ......... vision-contents ........." calc(370px * var(--window_ratio))
        "........... ............. ......... ............... ........." calc(250px * var(--window_ratio))
        / calc(260px * var(--window_ratio)) calc(300px * var(--window_ratio)) calc(170px * var(--window_ratio)) calc(640px * var(--window_ratio)) calc(230px * var(--window_ratio));
        color: #ffffff;
    overflow-x: hidden;
}
.vision-bg-parent{
    grid-column: 1/-1;
    grid-row: 1/2;
    overflow-y: visible;
}
.vision-bg{
    margin: 0;
    color: rgba(255, 255, 255, 0.05);
    mix-blend-mode: overlay;
    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;
}
.vision-side{
    grid-area: vision-side;
    color: #ffffff;
    margin-left: calc(67px * var(--window_ratio));
    font-size: calc(20px * var(--window_ratio));
    font-weight: 500;
}
.vision-sidecontent{
    transform: rotate(270deg);
    display: inline-block;
    width: fit-content;
}
.vision-visual{
    grid-area: vision-visual;
    width: 100%;
}
.vision-contents{
    grid-area: vision-contents;
    color: #ffffff;
    font-weight: 500;
    font-family: '游ゴシック体', yuGothic, sans-serif;
}
.vision-title{
    margin: 0px;
    font-size: calc(27px * var(--window_ratio));
    font-weight: 500;
    font-family: '游ゴシック体', yuGothic, sans-serif;
    line-height: 1.7;
}
.vision-content{
    margin-top: calc(50px * var(--window_ratio));
    font-size: calc(17px * var(--window_ratio));
    font-weight: 500;
    font-family: '游ゴシック体', yuGothic, sans-serif;
    line-height: 2.0;
}
.learn-more-parent-vision{
    margin-top: calc(60px * var(--window_ratio));
}

/* activities */
.container-activities{
    grid-area: container-activities;
    display: grid;
    grid-template: 
        "............... ............... ..................." calc(125px * var(--window_ratio))
        "activities-side ............... activities-contents" auto
        "activities-side ............... ..................." calc(130px * var(--window_ratio))
        "............... ............... activities-option  " calc(250px * var(--window_ratio))
        "............... activities-line activities-line    "
        / calc(135px * var(--window_ratio)) calc(165px * var(--window_ratio)) calc(1300px * var(--window_ratio));
        background-color:white;
}
.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;
    padding-bottom: calc(100px * var(--window_ratio));
}
.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;
}
.activities-line{
    grid-area: activities-line;
    border-bottom: solid 1px #f6f6fa;
}

/* parallax */
.container-parallax{
    grid-area: container-parallax;
}
.parent-container{
    height: calc(1200px * var(--window_ratio))
}
.child-container{
    position: sticky;
    top: 0;
    display: grid;
    grid-template:
        "... .................. ..." calc(160px * var(--window_ratio))
        "... parallax-title     ..." calc(95px * var(--window_ratio))
        "... .................. ..." calc(80px * var(--window_ratio))
        "... parallax-learnmore ..." calc(80px * var(--window_ratio))
        "... .................. ..." calc(80px * var(--window_ratio))
        / calc(215px * var(--window_ratio)) auto calc(80px * var(--window_ratio));
    z-index: 1;
}
.child-container img{
    grid-column: 1/-1;
    grid-row: 1/-1;
    width: 100%;
}
.parallax-title{
    grid-area: parallax-title;
    font-size: calc(48px * var(--window_ratio));
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: calc(-0.48px * var(--window_ratio));
    text-align: left;
    color: #272d3d;
    z-index: 2;
}
.parallax-learnmore{
    grid-area: parallax-learnmore;
}
.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)));
}


/* 下から上に表示させるアニメーション */
.wrap_animation{
    overflow: hidden;
    position: relative;
}
.wrap_animation::before{
    content: '';
    animation: img-wrap 1s cubic-bezier(0.5,0,0,1) forwards;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    position: absolute;
    z-index: 20;
}
@keyframes img-wrap{
    100%{
        transform: translateY(100%);
    }
}

/* ふわっと表示させるアニメーション */
.fuwari_animation{
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 2s;
}
.fuwari_animation.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}