:root {
  --font-scale: 1;
  --padding-scale: 1;
  --padding-scale-2: 1;
  --position-scale: 1;
}
html.large-size {
  --font-scale: 1.3;
  --padding-scale: 0.6;
  --padding-scale-2: 0.8;
  --position-scale: 0.7;
}

.pageContainer{
  background-color: #6cc6f5;
}

.hdr{
  text-align: center;
  width: 100%;
  background-image: linear-gradient(to bottom, rgba(108, 198, 245, 0) 0%, rgba(108, 198, 245, 0) 80%, rgba(108, 198, 245, 1) 100%), url(/jp/contents/umideikiteiku/images/story1_001.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.hdr h2{
  font-size: calc(42px * var(--font-scale));
  padding: calc(120px * var(--padding-scale-2)) 0 calc(100px * var(--padding-scale-2)) 0;
  font-family: "minute", sans-serif;
  color: #0046ad;
}
.hdr p{
  font-size: calc(17px * var(--font-scale));
  margin: auto;
  font-family: "shippori-mincho", sans-serif;
}
.hdr div.font-size-selector{
  padding: 40px 100px 50px 0;
  text-align: end;
}
.hdr div.font-size-selector button{
  background-color: transparent;
  border: solid 1px #000;
}
.hdr div.font-size-selector button.active{
  background-color: #dddddd;
}
.hdr div.font-size-selector button#btn-small{
  font-size: 20px;
  margin-left: 10px;
}
.hdr div.font-size-selector button#btn-large{
  font-size: 25px;
}
.hdr div.font-size-selector span{
  font-size: 20px;
  font-family: "shippori-mincho", sans-serif;
}
.hdr h1{
  font-size: calc(50px * var(--font-scale));
  margin: auto;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: bold;
  line-height: 1.2;
}
.hdr h3{
  font-size: calc(30px * var(--font-scale));
  margin-top: 60px;
  font-family: "a-otf-gothic-mb101-pr6n", sans-serif;
}

.ocean{ 
  max-width: 740px;
  width: 100%;
  margin: auto;
  padding: 20px;
}
.ocean p{
  font-size: calc(16px * var(--font-scale));
  line-height: 2.3;
  font-family: "shippori-mincho", sans-serif;
}

main img.img{
  width: 100%;
  display: block;
}

.ftr{
  position: relative;
}
.ftr .po_ab{
  position: absolute;
  bottom: 40%;
  text-align: center;
  width: 100%;
}
.ftr p.author{
  font-size: calc(13px * var(--font-scale));
  max-width: 457px;
  width: 100%;
  margin:0 auto;
  padding: 0 20px;
  text-align: left;
}
.ftr p.credit{
  font-size: calc(12px * var(--font-scale));
  max-width: 600px;
  width: 100%;
  margin:0 auto;
  padding: 80px 20px 0 20px;
}

footer{
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
}
footer h4{
  font-size: calc(45px * var(--font-scale));
  margin: 40px auto 70px auto;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  line-height: 1.2;
}
footer p{
  font-size: calc(14px * var(--font-scale));
  margin: auto;
}
footer img.icon{
  width: 46px;
  margin: auto;
}
footer a{
  width: 250px;
  margin: 0 auto 90px auto;
}

.hdr h2,.hdr p,.hdr div.font-size-selector span,.hdr h1,.hdr h3,.ocean p,.ftr p.author,.ftr p.credit,footer h4,footer p{
  transition: all 0.5s ease;
}

@media screen and (max-width: 957px){
  .ftr{
    margin-top: 140px;
  }
}

@media screen and (max-width: 578px){
  .ftr{
    margin-top: 280px;
  }
}

@media screen and (max-width: 420px){
  .ftr{
    margin-top: 330px;
  }
}