/* ベースとなる色とフォント設定 */
:root {
    --white-bg: #ffffff;    /* 白背景 */
    --main-text-color: #333333; /* 濃いグレーの文字 */
    --date-color: #666666;   /* 日付用の中間グレー */
    --border-color: #dddddd; /* 薄いグレーの線 */
    --hover-bg: #f5f5f5;     /* ホバー時の背景色 */
}

/* トップ */

.main-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* 好きに変更 */
    height: min(80vh, 56.25vw);  /* 56.25vw = 16:9 の高さ */
    overflow: hidden;
    background: #fff;
    margin-top: 15px;
}

.main-visual img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    opacity: 0;                          /* 基本は0から */
    animation: fade 20s linear infinite;
    animation-fill-mode: both;  
}

.main-visual img:nth-child(1) {
    /*opacity: 1;*/
    animation-delay: 0s;
}

.main-visual img:nth-child(2) {
    animation-delay: 4s;
}

.main-visual img:nth-child(3) {
    animation-delay: 8s;
}

.main-visual img:nth-child(4) {
    animation-delay: 12s;
}

.main-visual img:nth-child(5) {
    animation-delay: 16s;
}

@keyframes fade {
    0%   { opacity: 0; }   /* 0%：完全に透明（次の画像の待機状態） */
    4%   { opacity: 1; }   /* 4%：ふわっと出てくる */
    30%  { opacity: 1; }   /* 30%：しっかり表示（この時間が“見せる”部分） */
    34%  { opacity: 0; }   /* 34%：次の画像にバトンタッチ（フェードアウト）*/
    100% { opacity: 0; }   /* 100%：透明のまま終了 → 次のループへ */
}




/* ニュース */

.news-section {
    /* 背景を白に変更 */
    background-color: var(--white-bg); 
    padding: 80px 5%; 
    font-family: sans-serif; 
}

/* メインタイトル "NEWS" のスタイル */
.section-title {
    /* 文字色を濃いグレーに変更 */
    color: var(--main-text-color); 
    font-size: 3rem; 
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 0.2em; 
    font-weight: bold;
}

/* ニュースリストのコンテナ */
.news-list {
    max-width: 900px; 
    margin: 0 auto; 
}

/* 各ニュース項目のスタイル (<a>タグ) */
.news-item {
    display: block; 
    text-decoration: none; 
    /* 文字色を濃いグレーに変更 */
    color: var(--main-text-color); 
    padding: 20px 0;
    
    /* 区切り線を薄いグレーに変更 */
    border-bottom: 1px solid var(--border-color); 
    
    transition: background-color 0.3s;
}

.news-item:hover {
    /* ホバーで薄いオフホワイトに変更 */
    background-color: var(--hover-bg); 
}

/* 日付のスタイル */
.news-date {
    font-size: 1rem;
    /* 日付の色を中間グレーに変更 */
    color: var(--date-color); 
    margin-bottom: 5px;
}

/* タイトルのスタイル */
.news-title {
    font-size: 1.2rem;
    font-weight: normal;
}


/* タレント */

.talent-container{
    display: flex;
    justify-content: center;

    /* 画像の大きさ */
    width: auto;
    max-width: 1000px;
    width: 90%;

    margin: 0 auto;

    gap: 15px;
}

.talent-container img{
    width: 100%;
    height: auto;

}

.talent-logo:hover {
    transform: scale(1.15);
}



/* グッズ */

.shop-section {
  /* 背景を白に変更 */
    background-color: var(--white-bg);
    padding: 80px 5%;
    font-family: sans-serif;
}

.shop-container{
    display: flex;
    justify-content: center;

    /* 画像の大きさ */
    width: auto;
    max-width: 1000px;
    width: 70%;

    margin: 0 auto;

    gap: 15px;
}

.shop-container img{
    width: 100%;
    height: auto;

}