@charset "UTF-8";

@import "index.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.8rem;
}


#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: "title title img"
                    "date genre img"
                    "content content img"
}

#content-top .title {
    grid-area: title;
    font-size: 1.4rem;
}
#content-top .article_date {
    font-size: 1.0rem;
}


/* トップニュースの記事の日付け要素に適用するスタイル
 */
 #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: var(--article-text-font-size);
    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-right: 10px;
    margin-left: 10px;    
}


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

.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: 1.0rem;
}