/* 全体設定 */
body {
    margin: 0;
    padding: 0;
    background-color: #ffc0cb;
    font-family: 'DotGothic16', sans-serif;

    background-image: url("e17-bg-polkadot.gif");
    background-repeat: repeat;
}

/* 一番上のフリル帯 */
.frill-bar {
    background-image: url("q01-bg-frill.gif");
    background-repeat: repeat-x;
    height: 51px;
}

/* レイアウト用テーブル */
.table-container {
    width: 1000px;
    margin: 0 auto;
    background-color: #ffffff;
    border-collapse: collapse;
    border: 4px double #ffb6c1;
}

/* テーブルのセル共通 */
.table-container td {
    background-color: #ffffff;
    vertical-align: top;
    padding: 10px;
    border: 3px double #ffb6c1;
}

/* 各カラムの見た目 */
.header-cell {
    background-image: url("e17-bg-polkadot.gif");
    background-repeat: repeat;
}

.main-column {
    width: 600px;
    background-color: #ffffff;
    background-image: url("w01-bg-ribbon.gif");
    background-repeat: repeat;
}

.sidebar-left,
.sidebar-right {
    background-image:
        url("h10-bg-jewelry.gif"),   /* 上の飾りライン（横リピート） */
        url("ya06-bg-star.png");     /* 下レイヤー（全面リピート） */

    background-repeat:
        repeat-x,                    /* 上：横方向だけ */
        repeat;                      /* 下：全面 */

    background-position:
        top center,                  /* 上：一番上・中央揃え */
        top left;                    /* 下：普通の背景 */
}

.sidebar-left {
    width: 200px;
}

.sidebar-right {
    background-color: #f5fff5;  /* ←色つけるならOK。いらなければ消してもよし */
    width: 200px;
}

/* 中だけスクロールするボックス */
.scroll-box {
    /* width: 100%; ←ここ削除 or コメントアウト */
    max-height: 180px;
    padding: 8px;
    margin-top: 10px;
    border: 3px double #ff99cc;
    background-color: #fff0f8;
    font-size: 12px;
    line-height: 1.4;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #ff99cc #ffe4f0;
}

.welcome-animate
{
    font-family: 'DotGothic16', sans-serif;
    font-size: 60px;
    color: #ff8cd6;
    text-align: center;
    margin-top: 20px;
    text-shadow:
        0 0 5px #ffb3e6,
        0 0 10px #ff8cd6,
        0 0 20px #ff4fb8;
    animation: neonblink 1.6s infinite alternate;
}

@keyframes neonblink {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes popin {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    60% {
        opacity: 1;
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}


/* ───── スクロールバーのカスタマイズ（主にChrome / Edge / Safari） ───── */

.scroll-box::-webkit-scrollbar {
    width: 10px;                      /* スクロールバーの太さ */
}

.scroll-box::-webkit-scrollbar-track {
    background: #ffe4f0;              /* 溝の色 */
    border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-thumb {
    background: #ff99cc;              /* つまみの色 */
    border-radius: 10px;
    border: 2px solid #ffe4f0;        /* 周りを少し白っぽくしてふわっと見せる */
}

.scroll-box::-webkit-scrollbar-thumb:hover {
    background: #ff66aa;              /* ホバー時ちょっと濃く */
}

/* scroll-box 内の行をパステルカラーでローテーション */
.scroll-box .scroll-line:nth-child(4n+1) {
    color: #ff9bd6;   /* パステルピンク */
}

.scroll-box .scroll-line:nth-child(4n+2) {
    color: #c79bff;   /* パステルラベンダー */
}

.scroll-box .scroll-line:nth-child(4n+3) {
    color: #9bcaff;   /* パステルライトブルー */
}

.scroll-box .scroll-line:nth-child(4n+4) {
    color: #55d9a1;   /* パステルミント */
}

/* ───── Firefox向け（完全一致はしないけど、色を合わせる） ───── */

.scroll-box {
    scrollbar-width: thin;            /* Firefox用：細めバー */
    scrollbar-color: #ff99cc #ffe4f0; /* つまみ色 と 溝色 */
}

.sidebar-right {
    background-color: #f5fff5;
    width: 200px;
}

/* リンク・画像など */
a {
    color: #003399;
    text-decoration: underline;
}

.header-img {
    width: 100%;
    display: block;
}

/* マーキーまわり */
.marquee-wrap {
    background:
        url("ribbon2.png") top center repeat-x,
        url("ribbon2.png") bottom center repeat-x,
        linear-gradient(to bottom, #d3a8ff, #f3cfff, #ffd6e8);
    background-size:
        400px auto,
        400px auto,
        cover;
    padding-top: 30px;
    padding-bottom: 30px;
}

.welcome-text {
    color: #ffffff;
    font-weight: 900;
    -webkit-text-stroke: 1px #ff69b4;
    -webkit-text-fill-color: #ffffff;
    display: inline-block;
}

/* 2段目全体の雰囲気（少しだけ背景を変える） */
.second-row td {
    background-color: #fff7ff; /* ほんのりピンク寄りの白 */
}

/* 左カラム：説明用のテキスト調整 */
.gallery-info {
    font-size: 12px;
    line-height: 1.5;
}

/* メインカラム：写真ギャラリー */
.gallery-column {
    /* そのまま main-column の幅設定を利用 */
}

.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.photo-gallery img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 2px solid #ffb6c1;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
}

/* マウスを乗せたときの平成的ハイライト */
.photo-gallery img:hover {
    border-color: #ff66aa;
    filter: brightness(1.05);
}

/* 右カラム：バナー置き場 */
.banner-column {
    text-align: center;
    font-size: 12px;
}

.banner-list img {
    display: block;
    margin: 0 auto 8px auto;
    width: 160px;   /* バナーサイズに合わせて調整 */
    height: auto;
    border: 1px solid #ffb6c1;
    background-color: #ffffff;
}


/* フッターの「最終更新」 */
.footer-text {
    text-align: center;
    margin-top: 10px;
}