/* ======== 基本設定 ======== */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Google Fontsで読み込んだフォントを指定 */
    font-family: 'Noto Sans JP', sans-serif;
}

/* ======== 全画面の背景とレイアウト ======== */
.link-page {
    /* 背景画像を指定 */
    background-image: url('haikei2.JPG');
    
    /* 画像を画面いっぱいに表示 (縦横比維持) */
    background-size: cover;
    /* 画像を中央に配置 */
    background-position: center center;
    /* スクロールしても背景画像を固定 */
    background-attachment: fixed; 
    
    /* 画面の高さピッタリに設定 */
    min-height: 100vh;
    width: 100%;
    
    /* --- ここからがレイアウトの核 --- */
    /* Flexboxを使ってコンテンツを配置 */
    display: flex;
    /* コンテンツを「縦」に並べる */
    flex-direction: column;
    /* コンテンツを「左右中央」に揃える */
    align-items: center;
    /* コンテンツを「上下は上寄り」に配置 */
    justify-content: flex-start;
    
    /* コンテンツが画面上部に詰まりすぎないよう、上から余白を空ける */
    padding-top: 15vh; /* 画面の高さの15%分、上を空ける */
    box-sizing: border-box; /* paddingを含めて高さを計算 */

    /* 背景を少し暗くする */
    background-color: rgba(0, 0, 0, 0.3); /* 30%の黒を重ねる */
    background-blend-mode: darken; /* 色を暗く合成 */
}

/* ======== 1. ロゴ ======== */
.logo {
    width: 200px; /* ロゴの幅（お好みで調整） */
    max-width: 60%; /* 画面幅が狭くてもはみ出ないように */
    margin-bottom: 20px; /* ロゴとテキストの間隔 */
}

/* ======== ロゴ下テキスト ======== */
.logo-text {
    width: 200px; /* ロゴの幅と合わせる */
    max-width: 60%;
    margin-bottom: 50px; /* テキストとリンクボタンの間隔 */
    color: #ffffff; /* 背景が暗くなったので白文字に */
    text-align: center;
    line-height: 1.4; /* 行間 */
    font-family: 'Noto Sans JP', sans-serif;
}

.logo-text p {
    margin: 0; /* pタグのデフォルト余白をリセット */
}

.logo-text-main {
    font-size: 1.2rem; /* 1行目 */
    font-weight: 700; /* 太字 */
}

.logo-text-sub {
    font-size: 1rem; /* 2行目 */
    font-weight: 400; /* 標準 */
}


/* ======== 2 & 3. リンクボタン共通 ======== */
.icon-link {
    display: flex; /* アイコンとテキストを横並びにする */
    align-items: center; /* アイコンとテキストの縦位置を中央に */
    
    /* ボタンの見た目 */
    background-color: rgba(255, 255, 255, 0.7); /* 70%透過 */
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 25px;
    border-radius: 50px; /* 角を丸くしてカプセル型に */
    margin-bottom: 25px; /* ボタン同士の間隔 */
    width: 280px; /* ボタンの幅を固定（お好みで調整） */
    max-width: 80%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 薄い影をつける */
    
    /* アニメーション効果 */
    transition: transform 0.2s ease-out;
    
    box-sizing: border-box; 
}

/* マウスホバー（タップ）時に少し浮き上がる */
.icon-link:hover {
    transform: scale(1.05);
}

/* Font Awesomeアイコンのスタイル */
.icon-link i {
    font-size: 2rem; /* アイコンの大きさ */
    margin-right: 15px; /* アイコンとテキストの間隔 */
    width: 40px; /* アイコンの幅を確保 */
    text-align: center;
}

/* ======== アイコン個別の色設定 ======== */
.icon-link.instagram i {
    /* インスタグラムのブランドカラー */
    color: #E1306C; 
}

.icon-link.amazon i {
    /* Amazonのブランドカラー */
    color: #FF9900;
}


/* ======== 4. 店舗情報ボタン ======== */
.store-toggle {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7); /* 70%透過 */
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 25px;
    border-radius: 50px;
    margin-bottom: 25px; /* ボタン同士の間隔 */
    width: 280px; /* 他ボタンと幅を統一 */
    max-width: 80%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-out;
    
    /* buttonタグのデフォルトスタイルをリセット */
    border: none;
    cursor: pointer;
    
    box-sizing: border-box; 
}

.store-toggle:hover {
    transform: scale(1.05);
}

.store-toggle i {
    font-size: 1.8rem; /* アイコンサイズを少し調整 */
    margin-right: 15px;
    width: 40px;
    text-align: center;
    color: #4a69bd; /* アイコンの色（任意で変更可） */
}


/* ======== 5. 店舗リスト ======== */
.store-list {
    display: none; /* ★初期状態は非表示 */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 280px;
    max-width: 80%;
    background-color: rgba(255, 255, 255, 0.95); /* リストの透明度 (ボタンより濃いめ) */
    border-radius: 16px; /* ボタンより少し角張らせる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 角丸を内側のliにも効かせるため */
    margin-bottom: 25px; /* 下に余白を追加 */

    /* アニメーション（任意） */
    transition: all 0.3s ease-out;
    transform: translateY(-10px);
    opacity: 0;
}

/* ★JSによってこのクラスが付くと、リストが表示される */
.store-list.is-visible {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

/* リスト内の各項目 */
.store-list li {
    color: #333;
    font-size: 1rem;
    font-weight: normal; /* ボタンと区別するため標準の太さに */
    padding: 15px 25px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

/* 最後の項目の線は消す */
.store-list li:last-child {
    border-bottom: none;
}