@charset "UTF-8";

@import "index-mobile.css";

.main-division {
    background-color: #fafafa;
}


.genre-nav {
    line-height: 1.8;
    position: static;
    padding: 0;
    color: #1c1b1a;
    background-color: #fafafa;
    align-content: center;

}

/* ジャンル名のスタイル
 */
.genre-nav h1 {
    font-size: 1.3rem;
}


#content-top {
    color: #1c1b1a;

    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 20px;
    align-self: center;

/*    padding: 20px 20px 20px 20px;*/
    margin: 0 auto;
    box-sizing: content-box;
    max-width: var(--max-width);
}

#content-top .title {
    font-weight: 600;
}

#content-top .image {
    margin: 10px auto 0 auto;
    grid-area: img;
}


.content-top-item {
    display: grid;
    grid-template-areas: "img img"
                        "title title"
                        "none date"
                        "none  genre"
                        "content content";
}

.content-top-item .image {
    grid-area: img;
    margin: 0 auto 0 auto;
}
.content-top-item .title {
    grid-area: title;
    font-size: 1.2rem;
}
.content-top-item .article_date,
.content-top-item .genre-list-item {
    font-size: 0.8rem;
}

.content-top-item .content {
    font-size: 0.9rem;
}


/* トップニュースの記事の日付け要素に適用するスタイル
 */
 #content-top .article_date {
    grid-area: date;
}

/* トップニュースの記事のジャンルの一覧
 */
.genre-list {
    grid-area: genre;
    display: flex;
    flex-direction: row;
    font-size: 1.0rem;
}

#content-top .content {
    font-size: 0.9rem;
    grid-area: content;
}



/* ヘッドライン一覧のグループ要素に適用するスタイル
 */
.content-menu {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 5px;

    max-width: var(--max-width);
    margin: 0 auto;
}


/* ヘッドライン記事の記事要素に適用するスタイル
 * 見出しや画像などの配置はここでgrid-templateで定義しています。
 */
.content-menu a {
    display: grid;
    grid-template-areas: "title title img"
                        "date genre img";
    width: auto;
    border-bottom: 1px solid #e6e6e6;
}
.content-menu a {
    margin: 10px 7px 0 7px;
}


/* ヘッドライン記事内の記事要素の見出しに適用するスタイル
 */
.content-menu a .title {
    grid-area: title;
    font-weight: 600;
    /* line-height: 1.4;*/
}
.content-menu a .title {
    font-size: 0.8rem;
}
.content-menu a .title:hover {
    text-decoration-line: underline;
}


/* ヘッドライン記事内の記事要素の画像に適用するスタイル
 */
 .content-menu a .image {
    grid-area: img;
    height: 105px;
    justify-content: right;
}

/* ヘッドライン記事内の記事要素の日付けに適用するスタイル
 */
 .content-menu a .article_date {
    grid-area: date;
    justify-content: right;
}
.content-menu a .article_date {
    font-size: 0.7rem;
}