@charset "UTF-8";

:root{
  --seaStop: 99%;
}

body, html{
  overflow-x:unset;
}

#j-ship{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index:1;
  transform: translate(70%);
  top:50%;
}
.j-section-intro h1{
    
 font-family:"Poppins", sans-serif;
 font-size:10rem;
          line-height: 1.2;
  margin-bottom: 3rem;
  display: inline-block;
        font-weight: 600;
        padding-bottom: 1rem;
        background: linear-gradient(90deg, #f2a900 0%, #d70c18 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
            }

.h1-sub{ 
  font-size: 3rem;
    margin-top: 1rem;}
h2{
 font-size: 3rem;
  line-height: 2;
   margin-bottom: 2rem;
  position: relative;
  font-weight: 500;
  margin-top: 0;
  align-items: center; }

h3{
    background-color:#fff;
padding:0.7rem 2rem;
border-radius: 30px;
font-size:1.7rem;
    display: inline-flex;
    border:1.5px solid;
}
h3.j-riku{
    color:#f2a900;
}
h3.j-kai{
    color:#1F55B4;
}
.j-lead{
  font-size: clamp(1.7rem, 2.2vw, 2rem);
  line-height: clamp(5.5rem, 3.5vw, 6.4rem);
  font-weight: 400;
  color: #000; }

.text-center{
  text-align: center;
}
.text-center .j-role{
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.text-right{
  text-align: right;
}
.text-right .j-role{
  justify-content: end;
  float:right;
}

.j-container{
  position: relative;
  z-index:2;
}
.j-container-second{
  position: relative;
  z-index:2;
}
.j-section{
  /* width: 100vw; */
  height: 130vh;
}
.j-section-intro,
.j-section-outro{
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
    justify-content: flex-start;
}
.j-section-intro-out{
  position:relative;
  z-index:2;
  flex-direction: inherit;
  height: calc(100vh - 67px);
  min-height:400px;
}
.j-container.alert{
  animation: alert-rgba 2s linear infinite;
  margin: 0;
  border: none;
  padding: 0;
}
@keyframes alert-rgba {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  50% {
    background-color: rgba(255, 0, 0, 0.3);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
.j-section-02{
  position:relative;
  z-index:3;
}
.j-section-04{
  opacity: 0;
  height:150vh;

}
.j-section-05{
  opacity: 0;
  background-color:#ffffff;
  height:250vh;

}
.j-section-04 .j-box{
}
.j-section-05 .j-box{
  background-image: url(../images/town.svg);
  background-position: bottom center;
  background-repeat:no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  
}
.j-section-outro{
  position:relative;
  z-index:1;
  background-color:#1F55B4;
      background-image: url(../images/map-left.svg),url(../images/map-right.svg);
  background-position:left -20px center, right -20px center;
  background-repeat:no-repeat;
      background-size:30%;
    display: flex;
    justify-content: center;
}
.j-section-outro .h1-sub{
color:#F2A900;}

.j-box{
  position: sticky;
  top:0;
  height:100vh;
}

.j-section-outro .j-lead{color:#fff;
    margin-top: 2rem;}
.j-box-inner{
  padding:9vw 2rem 2rem;
        display: inline-block;
}
.j-box-inner > span{
  font-size:10rem;
  line-height:8rem;
  font-weight:600;
  opacity:0.4;
}
.j-box-inner > p{
  line-height:2;
    font-size:1.8rem;
}
 
.j-number{ font-family:"Poppins", sans-serif;}
.j-role{
  border:1px solid #000000;
  padding:2rem;
  display:flex;
  width:fit-content;
  margin-top:2rem;
  text-align:left;
    gap:30px;
}
.j-box-inner-bg{
      position: relative;  
}
.j-box-inner-bg::before{
    
  content: "";
  position: absolute;
  inset: 0px;                    /* 少しはみ出して余白を作る */
  background: rgba(255,255,255,.55);  /* 白の透過 */
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);     /* 背景をぼかす（効く環境のみ） */
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;                     /* j-role の背面へ */
  pointer-events: none;
}
.j-section-02 .j-box{  
    color:#ffffff;
}
.j-section-03 .j-box{  
    color:#ffffff;
}
.j-section-04 .j-box{
  color:#ffffff;
      display: flex;
    align-items: center;
}

.j-section-02 .j-role,
.j-section-03 .j-role,
.j-section-04 .j-role{
  border:1px solid #ffffff;
}
.j-role ul{
  text-align:left;
  list-style-type: none;
  padding:0;
  margin-right:1rem;
    padding-left:1.6rem;
}
.j-role li{
    list-style: disc;
}

.j-bird > div{
  position: fixed;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  z-index:2;
  left:-16px;
}
.j-bird.is-active > div{
  animation: moving 16s linear;
}
.j-bird.is-active .type2 {
  animation-delay: 1s;
}
.j-bird.is-active .type2:before,
.j-bird.is-active .type2:after {
  animation-delay: -2s;
}
.j-bird.is-active .type3 {
  animation-delay: 3s;
}
.j-bird > div:before, .j-bird > div:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #0E3E54;
  transform: rotate(-30deg);
  transform-origin: right bottom;
}
.j-bird > div:before {
  width: 100%;
  height: 1px;
  animation: leftWing 8s linear infinite;
}
.j-bird > div:after {
  width: 1px;
  height: 100%;
  animation: rightWing 8s linear infinite;
}
@keyframes moving {
  0% {
    top: 47vh;
    left: -2vw;
  }
  25% {
    top: 51vh;
    left: 23vw
  }
  100% {
    top: 47vh;
    left: 101vw;
  }
}
@keyframes leftWing {
  0%   { transform: rotate(-30deg); }
  2%   { transform: rotate(-110deg); }
  4%   { transform: rotate(-30deg); }
  6%   { transform: rotate(-110deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-110deg); }
  12%  { transform: rotate(-30deg); }
  30%  { transform: rotate(-30deg); }
  42%  { transform: rotate(-35deg); }
  72%  { transform: rotate(-35deg); }
  74%  { transform: rotate(10deg); }
  76%  { transform: rotate(-30deg); }
  78%  { transform: rotate(-110deg); }
  80%  { transform: rotate(-30deg); }
  82%  { transform: rotate(-110deg); }
  84%  { transform: rotate(-30deg); }
  86%  { transform: rotate(-110deg); }
  88%  { transform: rotate(-30deg); }
  90%  { transform: rotate(-110deg); }
  92%  { transform: rotate(-30deg); }
  94%  { transform: rotate(-110deg); }
  96%  { transform: rotate(-30deg); }
  98%  { transform: rotate(-110deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes rightWing {
  0%   { transform: rotate(30deg); }
  2%   { transform: rotate(110deg); }
  4%   { transform: rotate(30deg); }
  6%   { transform: rotate(110deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(110deg); }
  12%  { transform: rotate(30deg); }
  30%  { transform: rotate(30deg); }
  42%  { transform: rotate(35deg); }
  72%  { transform: rotate(35deg); }
  74%  { transform: rotate(0deg); }
  76%  { transform: rotate(30deg); }
  78%  { transform: rotate(110deg); }
  80%  { transform: rotate(30deg); }
  82%  { transform: rotate(110deg); }
  84%  { transform: rotate(30deg); }
  86%  { transform: rotate(110deg); }
  88%  { transform: rotate(30deg); }
  90%  { transform: rotate(110deg); }
  92%  { transform: rotate(30deg); }
  94%  { transform: rotate(110deg); }
  96%  { transform: rotate(30deg); }
  98%  { transform: rotate(110deg); }
  100% { transform: rotate(30deg); }
}

.j-sea{
  position:fixed;
  width:100%;
  height:0;
  bottom:0;
  transform-origin:0 0;
  z-index:1;
  background: radial-gradient(
    circle at 50vw 1000vw,
    #183FA5 0%,
    #183FA5 var(--seaStop),
    #175BE2 100%
  );
  clip-path: circle(1000vw at 50% 1000vw);
}
.j-land{
  position:fixed;
  width:100%;
  height:0;
  bottom:0;
}
.j-land div{
  position:absolute;
  top:13.8vw;
  left:-10vw;
  width:30vw;
  height:15.8vw;
  background-image:url(../images/yokohama.svg);
  background-repeat:no-repeat;
  background-position: center top;
}
.j-departure{
  position: fixed !important;
  width: 100vw;
  height: 10vh;
  background-color: #B5BBBD;
  display: block;
  bottom: -10vh;
  right:-110vw;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.j-rain{
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}
.j-r-cloud-left {
  position: fixed !important;
  width:376px;
  height:180px;
  display: block;
  z-index: 2;
  top: 10vh;
  left:-380px;
  opacity: 0.7;
  background-image:url(../images/cloud-2.svg);
  background-position: center center;
  background-size: cover;
}
.j-r-cloud-right {
  position: fixed !important;
  width:320px;
  height:152px;
  display: block;
  z-index: 2;
  top: 23vh;
  right:-330px;
  opacity: 0.7;
  background-image:url(../images/cloud-2.svg);
  background-position: center center;
  background-size: cover;
}
.j-cloud{
  position: fixed !important;
  width:312px;
  height:180px;
  display: block;
  z-index: 2;
  bottom: -80vh;
  left:30%;
  opacity: 0.7;
  background-image:url(../images/cloud-1.svg);
  background-position: center center;
}
.j-cloud-shadow{
  position: fixed !important;
  width:169px;
  height:98px;
  display: block;
  z-index: 1;
  bottom: -150px;
  left:25%;
  opacity: 0.5;
  background-image:url(../images/cloud-1-shadow.svg);
  background-position: center center;
}
.j-arrival{
  position: fixed !important;
  width: 300vw;
  height: 50vh;
  background-color: #B5BBBD;
  display: block;
  bottom: -200vh;
  z-index: 2;
  transform-origin: 0 0;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  transform: rotateZ(-30deg);
}

@media (max-width: 1200px) {
  .j-section-intro h1 {
    font-size: 9rem;
  } 
  h2 {
    font-size: 2.4rem;
  }
  .j-section-outro h2 {
    font-size: 2.4rem;
  }
}

@media (max-width: 992px) {
  .j-section-intro h1 {
    margin-bottom: 1.5rem;
    font-size: 7rem;
  }
}

@media (max-width: 768px) {
  .j-section-intro h1 {
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 5.6rem;
  } 
  .j-section-05 .j-box{
    height:150vh;
    background-image: url(../images/town-sp.svg);
  }
  h2 {
    font-size: 2rem;
  }
  .j-box{
    text-align: left !important;
  }
  .j-box-inner{
    width:100% !important;
  }
  .j-lead {
  line-height: 4.2rem;
  }
  .j-section-outro{
    height: auto;
    padding: 10rem 5vw;
  }
  .j-section-outro h2 {
    font-size: 2rem;
  }
  .j-land div{
    top:22.8vw;
    width:50vw;
    height:25.8vw;
  }
  .j-role{
    background: rgba(255, 255, 255, 0.6);
  }
  .j-section-02 .j-role,
  .j-section-03 .j-role,
  .j-section-04 .j-role{
    background: rgba(0, 0, 0, 0.3);
  }
}
@media (orientation: landscape) and (max-width: 768px){
  .j-section-05 .j-box{
    height:200vh;
  }
}

@media (max-width:576px) {
  .j-section-intro h1 {
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
  }
  .h1-sub{ 
    font-size:2.5rem;
    margin-top: 0rem;
  }
  .j-lead {
    line-height: 2;
  }
  .j-role{
    display: block;
    width: 100%;
  }
  .j-section-outro{
    background-image: none;
  }
  .j-box-inner > p {
    font-size:1.6rem;
  }
}
@media (max-height:700px) {
  .j-box-inner {
    text-align: left;
    line-height: 2.8rem;
  }
  .j-section-04 .j-box{
    align-items: flex-start;
    padding-top: 15vh;
  }
  .j-section-05 .j-box{
    align-items: flex-start;
    padding-top: 15vh;
  }
}