/* リンクの基本スタイル */
a {
    font-size: 100%;            /* フォントサイズを通常サイズに設定 */
    vertical-align: baseline;   /* 基準線に揃える */
    background: transparent;   /* 背景は透明 */
    text-decoration: none;      /* テキストの装飾（下線など）を削除 */
    color: #2c9ab7;             /* リンクの文字色を設定 */
}

/* リンクがホバー状態の時のスタイル */
a:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}

/* #master のスタイル */
#master {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; /* フォントファミリーを設定 */
    font-size: 60px;            /* フォントサイズを大きく設定 */
    line-height: 1;             /* 行間を1に設定 */
    font-weight: bold;          /* 太字に設定 */
    letter-spacing: 0;          /* 文字間の間隔を調整 */
    -webkit-font-smoothing: inherit;  /* Webkitベースのブラウザでフォントスムージングを設定 */
    text-rendering: optimizeLegibility; /* テキストの描画を最適化 */
}


/* モバイルサイズ（615px以下）のスタイル */
@media screen and (max-width: 615px) {
    #master-container {
        -webkit-animation: master-container-bg-mobile 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; /* モバイル用のアニメーション */
        animation: master-container-bg-mobile 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; /* モバイル用のアニメーション */
    }
    #master {
        font-size: 40px;           /* フォントサイズを小さくする */
        line-height: 1.2;          /* 行間を少し広げる */
    }
}

/* スクロールエリアのスタイル */
#master-container-scroller {
    height: 66px;               /* スクロールエリアの高さを設定 */
    margin-bottom: -6px;        /* 下部マージンを少し調整 */
    overflow: hidden;           /* オーバーフローを隠す */
    position: relative;         /* 相対位置に設定 */
    width: 100%;                /* 横幅100%に設定 */
}

/* スクロール項目のスタイル */
#master-container-scroller .master-container-scroller_item {
    display: block;             /* ブロック要素として表示 */
    padding-bottom: 6px;        /* 下部に余白を追加 */
    -webkit-animation: scroll 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; /* アニメーションを設定 */
    animation: scroll 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; /* アニメーションを設定 */
}

/* スクロール項目のリンクがホバー状態の時のスタイル */
#master-container-scroller .master-container-scroller_item[href]:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}

/* 各スクロール項目に異なる色を設定 */
#master-container-scroller .master-container-scroller_item:nth-child(1),
#master-container-scroller .master-container-scroller_item:nth-child(1) a {
    color: #E65F48;
}

#master-container-scroller .master-container-scroller_item:nth-child(2),
#master-container-scroller .master-container-scroller_item:nth-child(2) a {
    color: #E65F48;
}

#master-container-scroller .master-container-scroller_item:nth-child(3),
#master-container-scroller .master-container-scroller_item:nth-child(3) a {
    color: #76BCAD;
}

#master-container-scroller .master-container-scroller_item:nth-child(4),
#master-container-scroller .master-container-scroller_item:nth-child(4) a {
    color: #84719f;
}

#master-container-scroller .master-container-scroller_item:nth-child(5),
#master-container-scroller .master-container-scroller_item:nth-child(5) a {
    color: #d47787;
}

#master-container-scroller .master-container-scroller_item:nth-child(6),
#master-container-scroller .master-container-scroller_item:nth-child(6) a {
    color: #F09551;
}

#master-container-scroller .master-container-scroller_item:nth-child(7),
#master-container-scroller .master-container-scroller_item:nth-child(7) a {
    color: #349AB5;
}

#master-container-scroller .master-container-scroller_item:nth-child(8),
#master-container-scroller .master-container-scroller_item:nth-child(8) a {
    color: #e86042;
}

#master-container-scroller .master-container-scroller_item:nth-child(9),
#master-container-scroller .master-container-scroller_item:nth-child(9) a {
    color: #74bcae;
}

#master-container-scroller .master-container-scroller_item:nth-child(10),
#master-container-scroller .master-container-scroller_item:nth-child(10) a {
    color: #E65F48;
}

/* モバイルサイズ（615px以下）のスクロールエリアのスタイル */
@media screen and (max-width: 615px) {
    #master-container-scroller {
        height: 48px;              /* スクロールエリアの高さを小さくする */
        margin-bottom: 0;          /* 下部マージンを削除 */
    }
    #master-container-scroller .master-container-scroller_item {
        padding-bottom: 0;         /* 下部余白を削除 */
        -webkit-animation: scroll-mobile 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; /* モバイル用のアニメーション */
        animation: scroll-mobile 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; /* モバイル用のアニメーション */
    }
}

/* スクロールアニメーション（通常版） */
@keyframes scroll {
    0.0% {
        transform: translateY(0px);  /* 初期位置 */
    }
    11.111% {
        transform: translateY(-66px); /* スクロール位置 */
    }
    22.222% {
        transform: translateY(-132px);
    }
    33.333% {
        transform: translateY(-198px);
    }
    44.444% {
        transform: translateY(-264px);
    }
    55.555% {
        transform: translateY(-330px);
    }
    66.666% {
        transform: translateY(-396px);
    }
    77.777% {
        transform: translateY(-462px);
    }
    88.888% {
        transform: translateY(-528px);
    }
    100.0% {
        transform: translateY(-594px); /* 最終スクロール位置 */
    }
}

/* モバイル用スクロールアニメーション */
@keyframes scroll-mobile {
    0.0% {
        transform: translateY(0px);
    }
    11.111% {
        transform: translateY(-48px);
    }
    22.222% {
        transform: translateY(-96px);
    }
    33.333% {
        transform: translateY(-144px);
    }
    44.444% {
        transform: translateY(-192px);
    }
    55.555% {
        transform: translateY(-240px);
    }
    66.666% {
        transform: translateY(-288px);
    }
    77.777% {
        transform: translateY(-336px);
    }
    88.888% {
        transform: translateY(-384px);
    }
    100.0% {
        transform: translateY(-432px);
    }
}

body, html {
    margin: 0;
    padding: 0;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列のグリッド */
    gap: 5px; /* 画像間の間隔を小さく設定 */
    max-width: 800px; /* グリッド全体の最大幅 */
    margin: 0 auto; /* 中央寄せ */
}

        /* 画像のスタイル */
        .image-grid img {
            display: block; /* 画像をブロック要素にして余白を消す */
            width: 100%; /* 画像がグリッドセルの幅に合わせて拡大縮小 */
            height: auto; /* 高さは自動で調整 */
            margin: 0; /* 画像の周りの余白を削除 */
        }