@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@600;900&display=swap');

.reveals{
    opacity: 0;
    transition: 1s all;
}
.showup{
    opacity: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
.pc-flex{
    display: flex !important;
}
.sp-flex{
    display: none !important;
}

.bg1{
    background-image: url("img/bg1.png");
    width: 100vw;
    height: 139.84375vw;
    background-size: cover;
    background-position: center top;
}
.bg1 div{
    margin-top: 53.7109375vw;
    gap: 4.39453125vw;
    display: flex;
    justify-content: center;
}
.bg1 p{
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.7578125vw;
    line-height: 3.515625vw;
}
.bg1 p > span{
    font-weight: 900;
    font-size: 2.34375vw;
}
.bg1 img{
    width: 21.484375vw;
    height: 30.46875vw;
    margin-top: 8.30078125vw;
}


.bg2{
    background-image: url("img/bg2.png");
    width: 100vw;
    height: 102.05078125vw;
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ribbon{
    width: 82.03125vw;
    height: 4.19921875vw;
    line-height: 4.19921875vw;
    font-size: 2.34375vw; 
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    font-style: normal;
    color: white;
}

.blue{
    background-color: #0070C0;
}

.red{
    background-color: #D73A33;
}

.celebrate{
    display: flex;
    justify-content: center;
    gap: 4.39453125vw;
    margin-top: 4.8828125vw;
}
.celebrate p{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 1.3671875vw;
    line-height: 2.44140625vw;
    width: 53.380390625vw;
    text-align: justify;
}
.director{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.director img{
    width: 24.12109375vw;
    height: 29.78515625vw;
}
.director p{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    font-size: 1.3671875vw;
    line-height: 2.83203125vw;
    margin-top: 1.953125vw;
    letter-spacing: 0.07em;
    width: auto;
}
.director p span{
    font-size: 2.44140625vw;
    letter-spacing: -0.01em;
}



.bg3{
    background-image: url("img/bg3.png");
    width: 100vw;
    height: 394.40130859375vw;
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.future{
    margin-top: 2.44140625vw;
    margin-bottom: 5.859375vw;
    line-height: 2.9296875vw;
    font-size: 1.66015625vw; 
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
}

.future-list{
    display: flex;
    justify-content: space-between;
    width: 82.03125vw;
}
.future-image{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.future-image img{
    width: 35.9375vw;
}
.future-image p{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-size: 1.85546875vw;
    line-height: 2.34375vw;
    margin-top: 0.9765625vw;
    text-align: center;
}
.future-image p > span{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3671875vw;
}
.future-text{
    width: 43.9453125vw;
}
.future-text p:nth-of-type(1){
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-size: 1.85546875vw;
    line-height: 2.34375vw;
    padding-bottom: 1.46484375vw;
    border-bottom: 0.09765625vw solid #D73A33;
    color: #D73A33;
}
.future-text p:nth-of-type(2){
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin-top: 1.46484375vw;
    font-size: 1.3671875vw;
    line-height: 2.44140625vw;
}

.future-list:nth-of-type(3) {
    margin-top: 2.9296875vw;
}
.future-list:nth-of-type(3) .future-text {
    margin-top: 5.859375vw;
}
.future-list:nth-of-type(4){
    margin-top: 1.46484375vw;
}
.future-list:nth-of-type(4) .future-text{
    margin-top: 8.7890625vw;
}
.future-list:nth-of-type(5) {
    margin-top: 2.9296875vw;
}
.future-list:nth-of-type(5) .future-text {
    margin-top: 4.8828125vw;
}
.future-list:nth-of-type(6) {
    margin-top: 6.8359375vw;
}
.future-list:nth-of-type(6) .future-text {
    margin-top: 0.9765625vw;
}
.future-list:nth-of-type(7){
    margin-top: 4.8828125vw;
}
.future-list:nth-of-type(7) .future-text {
    margin-top: 7.8125vw;
}
.future-list:nth-of-type(8){
    margin-top: 7.32421875vw;
}
.future-list:nth-of-type(8) .future-text{
    margin-top: 2.9296875vw;
}
.future-list:nth-of-type(9) {
    margin-top: 8.7890625vw;
}
.future-list:nth-of-type(9) .future-text {
    margin-top: 0.9765625vw;
}

.bg4{
    background-image: url("img/bg4.png");
    width: 100vw;
    height: 249.0234375vw;
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flow-container{
    margin-top: 4.8828125vw;
    display: flex;
    justify-content: center;
}
.major{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    font-size: 1.66015625vw;
    line-height: 3.7109375vw;
    width: 20.5078125vw;
    height: 4.00390625vw;
    margin-top: 9.08203125vw;
    left: 10.05859375vw;
    border: 0.09765625vw solid ;
    position: absolute;
    background-color: white;
}
.founder{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 13.76953125vw;
    margin-top: 13.96484375vw;
}
.founder img{
    width: 10.041171875vw;
    height: 10.839980468750001vw;
}
.founder p{
    margin-top: 0.48828125vw;
    line-height: 1.7578125vw;
    font-size: 1.3671875vw; 
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
}
.founder p > span{
    font-size: 1.66015625vw; 
}
.left{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 0.9765625vw;
}
.left p{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 1.66015625vw;
}
.left p:nth-of-type(1) {
    margin-top: 7.51953125vw;
}
.left p:nth-of-type(2) {
    margin-top: 0.87890625vw;
}
.left p:nth-of-type(3) {
    margin-top: 18.26171875vw;
}
.left p:nth-of-type(4) {
    margin-top: 8.3984375vw;
}
.left p:nth-of-type(5) {
    margin-top: 0.9765625vw;
}
.left p:nth-of-type(6) {
    margin-top: 5.859375vw;
}
.left p:nth-of-type(7) {
    margin-top: 6.93359375vw;
}
.left p:nth-of-type(8) {
    margin-top: 2.9296875vw;
}
.left p:nth-of-type(9) {
    margin-top: 11.62109375vw;
}
.left p:nth-of-type(10) {
    margin-top: 1.85546875vw;
}
.left p:nth-of-type(11) {
    margin-top: 1.953125vw;
}
.left p:nth-of-type(12) {
    margin-top: 3.61328125vw;
}
.left p:nth-of-type(13) {
    margin-top: 1.171875vw;
}
.left p:nth-of-type(14) {
    margin-top: 17.1875vw;
}
.left p:nth-of-type(15) {
    margin-top: 3.80859375vw;
}
.left p:nth-of-type(16) {
    margin-top: 11.328125vw;
}
.left p:nth-of-type(17) {
    margin-top: 1.7578125vw;
}
.left p:nth-of-type(18) {
    margin-top: 4.39453125vw;
}
.left p:nth-of-type(19) {
    margin-top: 2.05078125vw;
}
.left p:nth-of-type(20) {
    margin-top: 1.66015625vw;
}
.left p:nth-of-type(21) {
    margin-top: 5.17578125vw;
}
.flow-image{
    width: 19.53125vw;
    height: 231.93359375vw;
}
.right{
    margin-left: 0.9765625vw;
}
.right p{
    line-height: 2.5390625vw;
    font-size: 1.66015625vw; 
    letter-spacing: 0.04em;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
}
.right p span{
    color: #0070C0;
}

.right p:nth-of-type(1){
    margin-top: 8.49609375vw;
}
.right p:nth-of-type(2){
    margin-top: 12.890625vw;
}
.right p:nth-of-type(3){
    margin-top: 8.7890625vw;
}
.right p:nth-of-type(4){
    margin-top: 3.41796875vw;
}
.right p:nth-of-type(5){
    margin-top: 1.3671875vw;
}
.right p:nth-of-type(6){
    margin-top: 3.515625vw;
}
.right p:nth-of-type(7){
    margin-top: 11.328125vw;
}
.right p:nth-of-type(8){
    margin-top: 2.05078125vw;
}
.right p:nth-of-type(9){
    margin-top: 8.10546875vw;
}
.right p:nth-of-type(10){
    margin-top: 17.67578125vw;
}
.right p:nth-of-type(11){
    margin-top: 1.26953125vw;
}
.right p:nth-of-type(12){
    margin-top: 4.1015625vw;
}
.right p:nth-of-type(13){
    margin-top: 12.59765625vw;
}
.right p:nth-of-type(14){
    margin-top: 0.87890625vw;
}
.right p:nth-of-type(15){
    margin-top: 1.26953125vw;
}
.right p:nth-of-type(16){
    margin-top: 2.24609375vw;
}


.last{
    line-height: 4.8828125vw;
    font-size: 2.34375vw; 
    margin-top: 3.90625vw;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
}

footer{
    margin-top: 9.765625vw;
    height: 20.5078125vw;
    width: 100%;
    background-color: #EBEBEB;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer a:nth-of-type(1){
    width: 38.37890625vw;
    height: 5.17578125vw;
    border-radius: 2.5797851562500003vw;
    font-size: 2.34375vw;
    line-height: 5.17578125vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    text-align: center;
    font-style: normal;
    text-decoration: none;
    color: white;
    background-color: #62B47D;
    opacity: 1;
}
footer a:nth-of-type(1):hover{
    transition: opacity 0.3s;
    opacity: 0.7;
}
footer a:nth-of-type(2){
    width: 8.59375vw;
    height: 8.59375vw;
    background-image: url("img/gotop.svg");
    position: absolute;
    right: 8.10546875vw;
    opacity: 1;
}
footer a:nth-of-type(2):hover{
    transition: opacity 0.3s;
    opacity: 0.7;
}

.copyright{
    width: 100%;
    height: 4.4921875vw;
    font-size: 1.171875vw;
    line-height: 4.4921875vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: center;
    font-style: normal;
    text-decoration: none;
    color: white;
    background-color: #0070C0;
}