/* Box Sizing Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Base Body Styles (adjust as needed) */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* Fallback font */
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto; /* 縦横比を維持 */
    display: inline-block; /* 画像を横に並べる */
/*display: block; */ /* 画像の下にできる余白をなくす */
}

/* bxsliderの画像にも適用されるため、個別に調整は不要ですが、
   もし別途固定幅が設定されている場合は、ここで上書きします。 */
.bxslider img {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    height: auto;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 のアスペクト比 (高さ / 幅 * 100)。YouTubeなどに多い */
    height: 0;
    overflow: hidden;
    max-width: 100%; /* 親要素の幅を超えないように */
    background: #000;
    margin-bottom: 1em; /* 下にスペースを追加 */
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Radiotalkのiframeが異なるアスペクト比の場合は、別のクラスでpadding-bottomを調整 */
/* 例えば、Radiotalkのiframeが width="460" height="176" の場合: (176 / 460) * 100% = 約 38.26% */
.radiotalk-responsive {
    padding-bottom: 100%;
}

/* 全体レイアウトの調整 */
#layput, #main,#footer {
    width: 90%; /* 画面幅の90%を使用 */
    max-width: 960px; /* デスクトップでの最大幅を制限 */
    margin: 0 auto; /* 中央寄せ */
    padding: 10px; /* 内側の余白 */
    /* 既存のCSSで固定幅（例: width: 760px;）が設定されている場合は、ここで上書きするか削除してください */
}

/* コンテンツカラムのレイアウト */
/* #main が flex コンテナになるように設定 */
#main {
    display: flex; /* flexboxを有効にする */
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
    justify-content: space-between; /* 要素間に均等なスペースを配置 */
}

#contents-left {
    flex: 2; /* 画面幅が広い時にcontents-rightの2倍の幅を取る */
    max-width: 65%; /* デスクトップ時の最大幅の例 */
    margin-top: 20px; /* 上にスペースを追加 */
    margin-right: 2%; /* 右側のカラムとの間隔 */
    /* 既存のCSSでfloatが使われている場合は、ここでfloat: none; を設定するか、flexboxに移行してください */
}

#contents-right {
    flex: 1; /* 画面幅が広い時にcontents-leftの0.5倍の幅を取る */
    max-width: 33%; /* デスクトップ時の最大幅の例 */
}


ul {
  list-style: none;          /* リストのマーカーを削除 */
  padding-left: 0;  		 /* デフォルトで付く左の余白も消す（好みで） */
}

/* PC/デフォルトのスタイル（横1列） */
#gloNav ul {
  display: flex;             /* Flexboxを有効にし、横並びにする（デフォルトでrow） */
  list-style: none;          /* リストのマーカーを削除 */
  padding: 0;                /* デフォルトのパディングを削除 */
  margin: 0;                 /* デフォルトのマージンを削除 */
  justify-content: center;   /* アイテムを中央揃えにする（任意） */
  flex-wrap: wrap;           /* アイテムが多すぎる場合に折り返す */
}

#gloNav li {
  /* PCでの各アイテムのスタイル */
  margin-right: 10px; /* 右隣の画像との間隔 */
  padding: 5px 5px;
  background-color: #f0f0f0; /* 背景色（任意） */
  border: 0px solid #ccc;    /* ボーダー（任意） */
  white-space: nowrap;       /* テキストの折り返しを防ぐ（ナビゲーションに適している場合） */
}

#gloNav li a {
  text-decoration: none;     /* リンクの下線を削除 */
  color: #333;               /* リンクの色 */
  display: block;            /* リンク全体をクリック可能にする */
}

#sns img {
    display: inline-block; /* 画像を横に並べる */
    margin-right: 15px; /* 右隣の画像との間隔 */
    margin-bottom: 15px; /* 下の行の画像との間隔 */
}

/* PC/デフォルトのスタイル（表示/非表示） */
#navIndex, #navNews, #navMemories {
  display: block; /* デフォルトで表示 */
}

#navLivespot {
  display: none; /* デフォルトで非表示 */
}

/* スマートフォンやタブレット向けのメディアクエリ */
@media (max-width: 768px) { /* 768px以下で適用 */
    #contents-left,
    #contents-right {
        flex: none; /* flexboxの比率を解除 */
        width: 100%; /* 幅を100%にする */
        max-width: 100%; /* 最大幅も100% */
        margin-right: 0; /* 右マージンをリセット */
        margin-bottom: 20px; /* 下にスペースを追加 */
    }

    /* 各セクション内の固定幅の調整 */
    #header h1, #header h2 {
        text-align: center;
        padding: 0 10px; /* 左右のパディング */
    }

    #gloNav ul {
        flex-direction: column; /* ナビゲーション項目を縦に並べる */
        width: 100%;
        margin-right: 5px; /* 右マージン */
        padding: 0;
    }
    #gloNav li {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    #gloNav a {
        display: block; /* リンク全体をクリック可能にする */
        padding: 10px 5px;
        border: 1px solid #eee; /* 区切り線 */
        margin: 0 10px;
    }

    #navIndex, #navNews, #navMemories {
      display: none; /* スマホ画面で非表示にする */
    }

    #navLivespot {
      display: block; /* スマホ画面で表示にする */
    }

    #sns, #line-stamp, #shop {
        text-align: center; /* SNSアイコンやショップ情報を中央寄せ */
        padding: 0 10px;
    }
    #line-stamp img, #shop img, #livespot img {
        display: inline-block; /* 画像を横に並べる */
        margin: 5px;
    }
    #sns img {
        display: inline-block; /* 画像を横に並べる */
        margin-right: 15px; /* 右隣の画像との間隔 */
        margin-bottom: 15px; /* 下の行の画像との間隔 */
    }

    .profile-photo {
        text-align: center; /* プロフィール画像を中央寄せ */
        padding: 0 10px;
    }
    .profile-photo img {
        max-width: 80%; /* 画像を少し小さく表示 */
    }
}

/* さらに小さいスマートフォン向けのメディアクエリ */
@media (max-width: 480px) { /* 480px以下で適用 */
    #layput, #main {
        width: 100%; /* 画面幅の100%を使用 */
        padding: 5px;
    }

    h1 {
        font-size: 1.5em; /* フォントサイズを調整 */
    }
    h2 {
        font-size: 1em;
    }
    #livespot img {
        height: auto;
        display: inline-block; /* 画像を横に並べる */
    }

    /* スケジュールリストの調整 */
    #schedule {
        padding: 10px;
    }
    #schedule img {
        width: 90px; /* スケジュール横の画像を小さく */
        height: auto;
        display: inline-block; /* 画像を横に並べる */
    }
}