@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: normal;
    font-family: "Zen Kurenaido", sans-serif;
}

:root {
    --white: #FFFFFF;
    --another: #FFFFFF26;
    --green: #68CE81;
    --red: #FF6565;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        /* 開始時点では透明 */
    }

    to {
        opacity: 1;
        /* 終了時点では不透明 */
    }
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(to right bottom, #71DD8C, var(--red))no-repeat;
    padding-top: 100px;
    animation: fadeIn 1.5s ease-out forwards;

}

header {
    height: 100px;
    background-color: var(--another);
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    /* 重なり順を念の為指定 */
}

#header_wrap {
    width: 1080px;
    display: flex;
    justify-content: space-between;
}


/* -------------------------------------------------
   トップへ戻るボタンの修正（初期非表示・フェードイン）
   -------------------------------------------------
*/
#scroll {
    position: fixed;
    right: 5%;
    bottom: 20px;
    z-index: 100;

    /* 初期状態は透明にしてクリックもできないようにする */
    opacity: 0;
    pointer-events: none;

    /* 滑らかに表示させるためのトランジション */
    transition: opacity 0.3s ease-in-out;
}

/* クラスが付与されたら表示する */
#scroll.is-show {
    opacity: 1;
    pointer-events: auto;
    /* クリック可能に戻す */
}

/* *********************** */


footer {
    background-color: var(--another);
    height: 400px;
    position: relative;
    margin-top: 185px;
}

h5 {
    margin-right: auto;
    margin: 0 0 15px 180px;
    padding-top: 150px;
}

footer a {
    color: var(--white);
    font-size: 20px;
    text-decoration: underline;
    text-decoration-color: var(--white);
    margin-left: 330px;
}

footer p {
    color: var(--white);
    font-size: 16px;
    margin-top: 15px;
    margin-left: 210px;
    line-height: 1.5;
}

h1 {
    /* margin-left: 10%; */
    padding: 23px 0 26px;
}


/* -------------------------------------------------
   ロゴアニメーションの追加部分
   -------------------------------------------------
*/

/* アニメーションのキーフレーム定義 */
@keyframes logoSway {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(5deg);
    }

    /* 右に5度 */
    20% {
        transform: rotate(-5deg);
    }

    /* 左に5度 */
    30% {
        transform: rotate(5deg);
    }

    /* もう一度右に */
    40% {
        transform: rotate(0deg);
    }

    /* 元の位置に戻る */
    100% {
        transform: rotate(0deg);
    }

    /* 残りの時間は停止（待機） */
}

header h1 img {
    /* アニメーションの設定 */
    /* logoSway: 定義したアニメーション名 */
    /* 5s: 1サイクルの時間（動いている時間＋止まっている時間） */
    /* ease-in-out: ゆっくり動き出し、ゆっくり止まる */
    /* infinite: 無限に繰り返す */
    animation: logoSway 4s ease-in-out infinite;

    /* 回転の軸を中心に設定 */
    transform-origin: center center;

    /* 少し滑らかに動くように設定 */
    will-change: transform;
}

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


ul {
    display: flex;
    gap: 55px;
    line-height: 100px;
    margin-left: auto;
    /* margin-right: 180px; */

    li {
        color: var(--white);
        font-size: 20px;


        a {
            position: relative;
        }

        a::after {
            content: "";
            position: absolute;
            display: block;
            left: 0;
            bottom: -3px;
            width: 100%;
            height: 2px;
            background-color: #FFFFFF;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.4s ease-in-out;
        }

        a:hover::after {
            transform: scaleX(1);
        }
    }
}

#map iframe {
    position: absolute;
    height: 350px;
    top: 7%;
    right: 10%;
    width: 600px;
}

#sns {
    display: flex;
    padding-top: 48px;
    justify-content: center;
}

.p_title {
    text-align: center;
    /* margin: 50px 0 50px; */
    margin: 50px 0 30px;
    color: var(--white);

    &::before {
        content: url(../img/stage_kazari_01.png);
        vertical-align: middle;
        margin-right: 1em;
    }

    &::after {
        content: url(../img/stage_kazari_01.png);
        vertical-align: middle;
        margin-left: 1em;
    }
}


#deco {
    display: flex;
    justify-content: center;
    gap: 120px;
    padding-top: 49px;
    position: relative;
}

.circle {
    width: 200px;
    height: 200px;
    /* background: linear-gradient(#8AFAA6, #FF6666); */
    /* border-radius: 50%; */
    /* filter: blur(15px); */
    background: url(../img/sns_10.png) no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    p {
        color: var(--white);
        text-align: center;
    }

    &:first-child::after,
    &:last-child::before {
        content: "";
        display: block;
        width: 1px;
        height: 100px;
        background-color: var(--white);
        position: absolute;
        top: 50px;
    }

    &:first-child::after {
        right: -60px;
    }

    &:last-child::before {
        left: -60px;
    }
}

.tate {
    width: 1px;
    height: 100px;
    background-color: var(--white);
    position: absolute;
    top: -150px;
}

#sen {
    position: relative;
}

main p {
    color: var(--white);
    font-size: 20px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 39px;
}

main {
    position: relative;
}
main p{
    font-size: 24px;
}

#live {
    width: 1079px;
    height: 578px;
    /* background: linear-gradient(#8AFAA6, #FF6666); */
    /* filter: blur(30px); */
    background: url(../img/sns_11.png) no-repeat center/cover;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    iframe {
        width: 960px;
        height: 494px;
        border-radius: 20px;
    }

}

#icon {
    position: relative;
}

.himejo {
    position: absolute;
    top: -170px;
}

#insta {
    position: absolute;
    /* top:-95%; */
    left: 22.8%;
}

#youtube {
    position: absolute;
    left: 46%;
}

#twitter {
    position: absolute;
    right: 24.9%;
}

#twitter img {
    height: 125px;
    width: 125px;
}

#insta p {
    position: absolute;
    top: 120px;
    left: 60px;
    color: var(--white);
}

#youtube p {
    position: absolute;
    top: 120px;
    left: 33px;
    color: var(--white);
}

#twitter p {
    position: absolute;
    top: 120px;
    left: 55px;
    color: var(--white);
}

#sen3 {
    position: absolute;
    top: 80%;
    right: 5%;
    position: fixed;
    z-index: 100;
}

/* =================================================
   レスポンシブ対応（SNSページ版）
   ================================================= */

img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------
   【iPad・タブレット】
   画面幅 1100px 以下
   ------------------------------------------------- */
@media screen and (max-width: 1100px) {

    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    #header_wrap,
    .centering,
    footer,
    #live {
        width: 100% !important;
        padding-left: 5%;
        padding-right: 5%;
        box-sizing: border-box;
    }
    
    .centering { margin: 0 auto; }
    
    /* YouTube動画エリアの調整 */
    #live {
        height: auto;
        aspect-ratio: 16/9; /* アスペクト比を維持 */
        padding: 0; /* 背景画像とのバランス調整 */
    }
    
    #live iframe {
        width: 90%;
        height: 90%;
    }

    /* アイコンエリアの調整 */
    #icon {
        width: 100%;
        padding-top: 200px; /* アイコンがヘッダーに被らないように */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        margin-bottom: 50px;
    }
    
    .himejo {
        position: static; /* 絶対配置を解除 */
        margin-bottom: 30px;
    }
    
    #insta, #x {
        position: static; /* 絶対配置を解除 */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        left: auto;
        top: auto;
    }

    /* Footer調整 */
    footer {
        height: auto;
        padding-bottom: 50px;
    }
    
    #map iframe {
        width: 40%;
        right: 5%;
    }
}

/* -------------------------------------------------
   【iPhone・スマホ】
   画面幅 768px 以下
   ------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* --- ヘッダー（全ページ共通） --- */
    header {
        height: auto !important;
        padding-bottom: 10px;
        position: relative;
    }

    body { padding-top: 0 !important; }

    #header_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h1 { padding: 10px 0; }
    h1 img { max-width: 200px; }

    /* メニュー */
    ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        line-height: 2;
        margin: 0;
    }
    ul li { font-size: 14px; }


    /* --- メインコンテンツ（SNSリンク） --- */
    .circle{
        background-image: none;
    }

    
    /* アイコン配置エリア */
    #icon {
        width: 100%;
        padding-top: 50px;
        display: flex;
        flex-direction: column; /* 縦積み */
        align-items: center;
        gap: 40px;
        position: static;
        margin-bottom: 80px;
    }

    /* 個別のアイコンブロック */
    .himejo, #insta, #x {
        position: static !important; /* 絶対配置を完全解除 */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* アイコン画像サイズ調整 */
    .himejo img { width: 120px; }
    #insta img, #x img { width: 60px; }

    /* テキスト調整 */
    .himejo p { font-size: 18px; padding: 10px 0; }
    #insta p, #x p { font-size: 16px; padding: 5px 0; }


    /* --- メインコンテンツ（YouTube） --- */
    
    h3.p_title {
        font-size: 32px;
        margin: 30px 0;
    }

    #live {
        width: 95% !important;
        height: auto;
        aspect-ratio: 16/9; /* 16:9の比率を維持 */
        margin: 0 auto 80px;
        background-size: contain; /* 背景画像も収める */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #live iframe {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }


    /* --- フッター（全ページ共通・修正版） --- */
    footer {
        height: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 50px;
        width: 100% !important;
        overflow: hidden;
    }

    h5 {
        margin: 0 !important;
        padding: 50px 0 20px 0;
        text-align: center;
        width: 100%;
    }
    
    footer a, footer p {
        margin: 0 0 20px 0 !important;
        text-align: center;
        width: 100%;
        padding: 0 10px;
    }

    /* 地図エリア */
    #map {
        position: static !important;
        width: 80% !important;
        max-width: 320px;
        height: 200px !important;
        margin: 0 auto !important;
    }
    
    #map iframe {
        width: 100% !important;
        height: 100% !important;
        position: static !important;
    }
}