/* 基本的なリセットと共通スタイル */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
.fa-instagram{
background: linear-gradient(to right, #405DE6, #C13584, #E1306c, #F56040, #FFDC80);
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 20px;
    color: white;
}
#home{
height: 500px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center;
}
.navbar .logo {
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* PC表示では横並び */
}

.nav-list li {
    margin-left: 20px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.nav-list a:hover {
    background-color: #555;
    border-radius: 4px;
}

/* ハンバーガーメニューのアイコン */
.openbtn{
display: none;
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	background:#D54884;
	cursor: pointer;
    width: 50px;
    height:50px;
	border-radius: 5px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
	background: #fff;
  	width: 45%;
  }


.openbtn span:nth-of-type(1) {
	top:13px;	
}

.openbtn span:nth-of-type(2) {
	top:19px;
}

.openbtn span:nth-of-type(3) {
	top:25px;
}

.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-2px;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
}

/* ★ここから追加★ */
/* PCサイズではSNSアイコンを非表示 */
.social-icons-mobile {
    display: none;
}
/* ★ここまで追加★ */
.wave-footer {
    position: relative;
    width: 100%;
    background-color: #007bff; /* フッターの背景色、波の色と合わせるか調整 */
    color: white;
    text-align: center;
    padding-top: 50px; /* 波が隠れないように調整 */
    overflow: hidden; /* 波がはみ出さないように */
}

.waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* 波の高さ */
    min-height: 100px;
    max-height: 200px;
    z-index: 0; /* フッターコンテンツの下に表示 */
}

/* 波のアニメーション */
.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.footer-content {
    position: relative;
    z-index: 999; /* 波の上に表示 */
    padding: 20px;
}


/* モバイル表示時のスタイル */
@media (max-width: 768px) {
    .openbtn {
        display: flex; /* モバイルでは表示 */
    }

    .nav-list {
        display: none; /* モバイルでは初期状態では非表示 */
        flex-direction: column;
        width: 100%;
        background-color: #444;
        position: absolute;
        top: 60px; /* ヘッダーの高さに合わせて調整 */
        left: 0;
        padding: 10px 0;
        z-index: 1000; /* 他の要素より手前に表示 */
    }

    .nav-list.active {
        display: flex; /* JavaScriptで.activeクラスが追加されたら表示 */
    }

    .nav-list li {
        margin: 0;
        text-align: center;
        padding: 10px 0;
    }

    .nav-list a {
        display: block;
        padding: 10px 0;
    }

    /* ハンバーガーメニューがアクティブになった時のアニメーション */
 .openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:5px;
	left:4px;
}

    /* ★ここから追加★ */
    /* モバイル表示時、メニューがアクティブな時にSNSアイコンを表示 */
    .social-icons-mobile {
        display: flex; /* 横並びにするためflex */
        justify-content: center; /* 中央寄せ */
        padding: 15px 0;
        border-top: 1px solid #555; /* 区切り線 */
        margin-top: 10px;
    }

    .social-icons-mobile a {
        color: white;
        font-size: 24px; /* アイコンのサイズ */
        margin: 0 10px; /* アイコン間のスペース */
        display: inline-block; /* アイコン自体をブロック要素にしてスペースを確保 */
    }

    .social-icons-mobile a:hover {
        color: #ddd; /* ホバー時の色 */
        background-color: transparent; /* 背景色は変化させない */
    }
    /* ★ここまで追加★ */
}