@charset "utf-8";

@import url(normalize.css);

*{
    max-width: 100%;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: rgb(1, 26, 51);
    font-family:serif;
    margin: 0;
    line-height: 1.5;
}

/* main{
    overflow: hidden;
} */

html{
    scroll-behavior: smooth;
}

h1,h2,h3,h4{
    margin: 0;
    text-align: center;
    font-size:min(6vw,25px)
}

p{
font-size:min(4vw,16px)
}

img{
    vertical-align: middle;
    /* margin-top: 10%; */
    /* width: 90%; */

}

/* ----------------------- */

body{
    background-color: #01050d;
    background-image: repeating-linear-gradient(0deg, #01050d, #62c3ff);
    background-image: url(../img/sea/pc_sea.png);
    background-size: 230%;
    background-position: top;
    background-repeat: no-repeat;
}

section{
    padding: 4% 6%;
}

h1{
    font-family:serif;
    font-weight: bold;
    color:rgba(3, 20, 75, 0);
    text-align:center;
    padding: 4% 0;
    -webkit-text-stroke: 1px #ffffff;
    margin-top: 12%;
    font-size:min(6vw,50px)
}

.h1c{
    -webkit-text-stroke: 1px #ffffff;
    /* color: #070057; */
}

h2{
    margin-top: 4%;
}

.main1{
    margin-top: 1%;
    padding: 4%;
}

.main2 p{
    /* background-color: rgba(255, 255, 255, 0.7); */
    font-size:min(4vw,20px);
    font-weight: bolder;
}

h3{
    text-align: center;
    font-size:min(8vw,20px);
    margin: 4% 0;
}

.shark1{
    /* background-color: rgba(240, 248, 255, 0.278); */
    margin: 4%;
    /* border: #1c366d 2px dotted; */
    border-radius: 10px; 
}

h3{
    color: #ffffff77;
}

footer{
    background-image: linear-gradient(#00c8ff00, #cbe9ffa3);
    color: aliceblue;
    padding: 8% 0;
}

footer p,a{
    color: aliceblue;
}

.bt{
    text-align: center;
    margin-top: 10%;
}

.main2 p{
    /* -webkit-text-stroke: 1px #ffffff; */
    color: #ffffff;
    text-align: center;
}

.abt{
    display: inline-block;
    background: linear-gradient(to right, #29c9ff 0%, #2e80fa 45%, #e9f688 100%);
    background-size: 200% auto;  
    color: #fff;
    border-radius: 20px;
    padding: 4% 8%;
    text-decoration: none;
    transition: .5s;
}

.abt:hover{
    color: #000000;
    background-position: right center;
}

/* ーーーーーーーーーーサメーーーーーーーーーーーー */

.pt{
    text-align: center;
    -webkit-text-stroke: 1px #ffffff;
    font-size:min(4vw,18px)
}

.imgt{
    width: 100%;
}

.c1,.c2,.c3 {
    margin-top: 16%;
    text-align: center;
}

.sht1{
    text-align: center;
}

.sht2{
    text-align: right;
}

.c3{
    text-align:right;
    display: inline-block;
}

.sss{
    width: 24%;
}

.ss{
    width: 34%;
}

.s{
    width: 44%;
}

.m{
    width: 40%;
}

.mm{
    width: 54%;
}

.l{
    width: 64%;
}

.ll{
    width: 72%;
}

.za{
    width: 90%;
}

/* 潜水艦 */

.sf{
    position: fixed;
    padding: 0 0 2% 2%;
    /* width: 16%; */
}


/* ーーーーーーーーPCーーーーーーーーーーー */

@media screen and (min-width:768px){

    body{
        background-image: url(../img/sea/pc_sea.png);
        background-position: top ;
        background-size: 200%;
}


.sssw{
    width: 24%;
}

.ssw{
    width: 34%;
}

.sw{
    width: 44%;
}

.mw{
    width: 40%;
}

.mmw{
    width: 54%;
}

.lw{
    width: 64%;
}

.llw{
    width: 72%;
}

.zaw{
    width: 80%;
}

}

@media screen and (max-width:500px){

    body{
        background-size: 350%;
    }

}



/* ーーーーーーー画像上下ーーーーーーーーーー */

.animation0{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1s;
}

.animation1{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.2s;
}

.animation2{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.animation3{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.8s;
}

.animation4{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.0s;
}

.keyframe1{
  animation-name: anim_v;
  bottom: 0;
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 25px);
  }
}



/* ーーーーーーーーー左右移動ーーーーーーーーーーーーー */

/*ーーーーーーーーー ハンバーガーメニュー ーーーーーーー*/

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color:rgba(255, 255, 255, 0.4);
    color: rgb(255, 255, 255);
    position: fixed; /* ヘッダーを画面に固定 */
    top: 0; /* 上からの位置 */
    left: 0; /* 左からの位置 */
    width: 100%; /* 幅を画面全体に */
    z-index: 1000; /* 他の要素より手前に表示 */
    height: 10%;
}

.nav-menu li{
    font-size: 2rem;
}

.logo a {
    color: rgb(12, 37, 82);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.hamburger-menu-icon {
    cursor: pointer;
    z-index: 1000;
    /* 新しい変更点 */
    position: fixed; /* 画面に固定 */
    /* top: 2rem; 上からの位置 */
    right: 2rem; /* 右からの位置 */
    transition: 0.4s; /* アニメーションを追加 */
}

.hamburger-menu-icon .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: rgb(4, 12, 48);
    margin: 5px 0;
    transition: 0.4s;
}

/* メニューリスト（右からスライドイン） */
.nav-menu {
    position: fixed;
    top: 0;
    right: -300px; /* 初期状態では右側に非表示 */
    width: 300px; /* メニューの幅 */
    height: 100%;
    background-color: rgba(12, 30, 69, 0.5);
    z-index: 999;
    padding-top: 60px;
    box-sizing: border-box;
    transition: right 0.5s ease-in-out; /* スライドのアニメーション */
}

.nav-menu ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

.nav-menu li {
    margin-bottom: 20px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 10px 0;
    display: block;
    transition: 0.3s;
}

.nav-menu a:hover {
    background-color: #575757;
}

/* JavaScriptで追加されるクラス */
.nav-menu.active {
    right: 0; /* クリックされたら右端から表示 */
}

/* ハンバーガーアイコンのアニメーション */
.hamburger-menu-icon.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu-icon.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu-icon.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ーーーーーーーーーーーーーーーーーー */