@charset "UTF-8";

/* --- 基本設定 --- */
body {
    background-color: #000;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; /* 雰囲気重視で明朝体 */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* --- ヘッダー --- */
header {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

h1 {
    font-size: 1.2rem;
    margin: 0;
    color: #fff;
    font-weight: normal;
    letter-spacing: 0.1em;
}

/* --- ナビゲーション --- */
nav {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    border-bottom: 2px solid #8b0000; /* 不気味な赤のライン */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

nav li {
    margin-right: 2px;
}

nav a {
    display: block;
    padding: 10px 30px;
    background-color: #1a1a1a;
    color: #888;
    border-radius: 5px 5px 0 0;
}

nav a:hover, nav a.active {
    background-color: #8b0000;
    color: #fff;
}

/* スマホ用ナビゲーション */
@media (max-width: 768px) {
    nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列 */
        gap: 10px;
        padding: 0 10px;
        border-bottom: none; /* スマホでは線を消してボタン化 */
    }

    nav li {
        margin: 0;
    }

    nav a {
        text-align: center;
        border-radius: 5px; /* 全角丸 */
        background-color: #333;
        color: #fff;
        border: 1px solid #8b0000;
    }
}

/* --- メインコンテンツ共通 --- */
main {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    min-height: 50vh;
}

/* --- フッター --- */
footer {
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #555;
    border-top: 1px solid #333;
}

footer p {
    margin: 5px 0;
}

/* --- ページ個別設定 --- */

/* Topページ */
.top-message {
    font-size: 2rem;
    text-align: center;
    margin-top: 0px;
    letter-spacing: 0.2em;
}

/* Contactページ */
.contact-info {
    text-align: center;
    margin-top: 50px;
    font-size: 1.2rem;
}

/* Accessページ */
.access-container {
    display: flex;
    flex-direction: row; /* PC: 左地図、右情報 */
    gap: 30px;
    align-items: flex-start;
}
.map-area {
    flex: 1;
    background-color: #222;
    height: 100px; /* ダミー画像の高さ */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #444;
}
.info-area {
    flex: 1;
}

/* style.css の最後に追記 */

.map-image {
    width: 100%;      /* 横幅を親要素(map-area)いっぱいにする */
    height: auto;     /* 横幅に合わせて縦幅を自動調整（比率を維持） */
    display: block;   /* 画像下の隙間を消す */
    object-fit: cover; /* 念のため（枠いっぱいに表示） */
}


@media (max-width: 768px) {
    .access-container {
        display: flex;
        flex-direction: column; /* スマホ: 上情報、下地図 */
    }
    /* 順序入れ替え: 情報(2番目)を上に持ってくる */
    .info-area { order: 1; }
    .map-area { order: 2; width: 100%; }
}

/* Profileページ */
.profile-container {
    display: flex;
    gap: 40px;
}

.profile-image-box {
    position: relative; /* ギミックの基準点 */
    width: 300px;
    height: 400px; /* 写真サイズ */
    background-color: #111;
    flex-shrink: 0;
    overflow: hidden; /* 揺れた的にはみ出さないように */
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ギミックのターゲット */
.click-target {
    position: absolute;
    cursor: pointer;
    border-radius: 0%;
    opacity: 0; /* 確認用に少し透けさせています。本番は0にして隠せます */
    z-index: 10;
}
#target-1 { top: 17%; left: 31%;width: 95px; height: 15px; background-color: #ff00ff; } /* ピンク */
#target-2-a { top: 25%; left: 65%; width: 15px; height: 30px;background-color: #ffa500; } /* オレンジ */
#target-2-b { top: 25%; left: 25%; width: 15px; height: 30px;background-color: #ffa500; } /* オレンジ */
#target-3-a{ top: 30%; left: 67%; width: 20px; height: 15px;background-color: #800080; } /* 紫 */
#target-3-b{ top: 30%; left: 25%; width: 20px; height: 15px;background-color: #800080; } /* 紫 */
#target-4 { top: 29%; left: 42%; width: 25px; height: 20px;background-color: #008000; } /*緑*/

.profile-text {
    flex: 1;
}
.p-name { font-size: 2.5rem; margin: 0 0 10px 0; color: #fff; }
.p-dob { font-size: 1.2rem; margin: 0 0 20px 0; color: #ccc; }
.p-bio { font-size: 1rem; line-height: 1.8; }

@media (max-width: 768px) {
    .profile-container {
        flex-direction: column;
        align-items: center;
    }
    .profile-text {
        text-align: center;
    }
}

/* --- アニメーション・ギミック --- */

/* 小さな揺れ */
@keyframes shake-small {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, -1px); }
    75% { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}
.shake-s {
    animation: shake-small 0.1s infinite;
}

/* 大きな揺れ＋グリッチ風 */
@keyframes shake-big {
    0% { transform: translate(0, 0) skew(0deg); opacity: 1; }
    20% { transform: translate(-3px, 3px) skew(-5deg); opacity: 0.9; }
    40% { transform: translate(3px, -3px) skew(5deg); opacity: 1; }
    60% { transform: translate(-3px, 0) skew(0deg); opacity: 0.8; }
    80% { transform: translate(3px, 3px) skew(-2deg); opacity: 1; }
    100% { transform: translate(0, 0) skew(0deg); opacity: 1; }
}
.shake-b {
    animation: shake-big 0.08s infinite;
    filter: sepia(100%) hue-rotate(-50deg) saturate(300%); /* 色が少し狂う */
}

/* 最終段階：崩壊（超高速振動＋色ずれ＋反転） */
@keyframes shake-extreme {
    0% { transform: translate(0, 0) scale(1); filter: invert(0); }
    10% { transform: translate(-10px, 5px) skew(20deg); filter: invert(0.2); }
    20% { transform: translate(10px, -10px) scale(1.1); filter: hue-rotate(90deg); }
    40% { transform: translate(-5px, 15px) skew(-20deg); opacity: 0.5; }
    60% { transform: translate(5px, -5px) rotate(5deg); filter: invert(1); text-shadow: 5px 0 red, -5px 0 blue; }
    80% { transform: translate(-10px, 0) scale(0.9); opacity: 1; }
    100% { transform: translate(0, 0) scale(1); filter: invert(0); }
}

.shake-max {
    animation: shake-extreme 0.04s infinite; /* 極めて高速 */
    color: #ff0000 !important; /* 文字自体も赤く変色 */
    text-shadow: 3px 0 #00ff00, -3px 0 #0000ff; /* RGBズレ */
}


/* Thanksページ用 */
.thanks-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 画面いっぱい */
    text-align: center;
    background: #000;
}

.fade-in-text {
    font-size: 3rem;
    color: #FFFFFF;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 3s ease-out forwards; /* 3秒かけてふわっと */
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.thanks-content {
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeUp 3s ease-out 1.5s forwards; /* 少し遅れて出る */
}

.x-share-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    opacity: 0;
    animation: fadeUp 3s ease-out 2.5s forwards; /* さらに遅れて出る */
}

/* PCなど（基本設定）：改行を無効化（非表示） */
.sp-br {
  display: none;
}

/* スマホ（画面幅が768px未満）の時：改行を有効化 */
@media screen and (max-width: 767px) {
  .sp-br {
    display: block;
  }
}