@charset "UTF-8";

 /* トップニュースとヘッドライン2件をグループ化する要素に適用するスタイル
 */
.top-content {
    font-family: Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,Helvetica Neue,Helvetica,Arial,Roboto,sans-serif;
    line-height: 1.8;
    position: static;
    padding: 0;
    color: #1c1b1a;
    background-color: #fafafa;
    align-content: center;
} 

#content-top {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 20px;
}

#content-top .article {
    display: grid;
    grid-template: "date"
                    "image"
                    "title";

}

#content-top .article .title ,
#content-top .article .subtitle,
#content-top .article .content ,
#content-top .article .genre-list {
    display: none;
}

#content-top .article .concat-title {
    grid-area: title;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    color: #1c1b1a;

    font-size: 0.8rem;
    line-height: 1.6;
}

#content-top .article .article_date {
    grid-area: date;
    font-size: 1.0rem;
    font-weight: 700;
    display: flex;
    width: 100%;
    margin: 0 0 15px;
    align-items: center;
    justify-content: center;
}

#content-top .article .image {
    grid-area: image;
/*        align-items: center;*/
    margin: 0 auto 0 auto;
}


/* トップニュース下のヘッドライン記事をグループ化する要素に適用するスタイル
 * 2つの記事を左右に均等に配置する
 */
#content-top-headline {
    margin-bottom: 30px;
    padding-bottom: 0;
    border-bottom: 1px solid #595652;
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}


/* トップニュース下のひとつ目のヘッドライン記事をグループ化する要素に適用するスタイル
 */
#content-top-headline-1,
#content-top-headline-2 {
    width: 100%;
    margin: 0 0 10px;
    padding-top: 10px;
    border-top: 1px solid #e6e6e6;
}


/* トップニュース下のふたつ目のヘッドライン記事をグループ化する要素に適用するスタイル
 * ひとつ目の要素との境界のボーダーラインはここで指定しています。
 */
#content-top-headline-2 {
    grid-column: 2;
    border-left: 1px solid #e6e6e6; /* 左右の見出しの区切りの線 */

    display: grid;
    grid-template-areas: "c b";
}

/*  トップニュース下のヘッドライン記事の画像に適用するスタイル
 */
#content-top-headline img {
    display: block;
    min-width: 100px;
    margin-right: 10px;
    grid-area: image;

    box-sizing:content-box;
    display: block;
    /*
    height: 100px;
    width: auto;*/
    height: auto;
    width: 100px;
    margin: auto;

    aspect-ratio: auto;
}

#content-top-headline .top-headline-titles-1,
#content-top-headline .top-headline-titles-2 {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    display: grid;
    grid-template: "image title";
    grid-template-columns: 100px auto;

}

#content-top-headline .title,
#content-top-headline .subtitle,
#content-top-headline .article_date {
    display: none;
}

#content-top-headline .concat-title {
    grid-area: title;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    display: block;
}

/* ヘッドライングループのグループ要素に適用されるスタイル*/
.content-menu-group {
    margin: 20px 0 20px 0;
    --arrow-width: 30px;
}

/* ヘッドライン一覧の見出し */
.content-menu-header {
    font-size: 1.0rem;
    font-weight: 700;
    display: flex;
    width: 100%;
    margin: 0 0 15px;
    align-items: center;
    justify-content: center;
}


.content-menu-header a:hover {
    text-decoration-line: underline;
}

/* ヘッドライン一覧とスクロールボタンを格納するコンテナ
 */
.content-menu-container {
    --content-menu-height: 240px;

    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0;

    display:grid;
    grid-template-areas: "arrow1 list arrow2";
    grid-template-columns: var(--arrow-width) auto var(--arrow-width);
}

/* ヘッドライン一覧のグループ要素に適用するスタイル
 */
.content-menu {
    grid-area: list;
    margin: 10px 0 5px 0;

}


.content-menu-list {
    /* メニュー表示要素の幅と間隔を値として定義しておく */
    --item-margin: 10px;

    overflow: hidden;
    list-style-type: none;
    margin-left: 0;
    margin-right: 0;
    /* border: solid 1px #0000;*/
}

.content-menu-list li {
    float: left;
    height: 230px;

    width: var(--item-width);
    margin-top: var(--item-margin);
    margin-bottom: var(--item-margin);
    margin-left: var(--item-margin);
    margin-right: var(--item-margin);
}

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

    font-size: 0.9rem;
}

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

.content-menu a .title:hover {
    text-decoration-line: underline;
}

/* ヘッドライン記事内の記事要素の小見出しに適用するスタイル
 */
 .content-menu a .subtitle {
    grid-area: subtitle;
}

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

.content-menu .headline-footer {
    grid-area: date;

    display: flex;
    justify-content: flex-end;

    min-height: 30px;
    flex-wrap: wrap;

    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
}


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

/*    line-height: 1.2;*/
    display: block;
    white-space: nowrap;
    color: #8c8c8c;    
}

.content-menu .headline-footer .lock {
    background-image: url('/image/lock.svg');
}

.new-label {
    font-size: 0.6rem;
    display: inline-block;
    margin-left: 5px;
    content: "New";
    color: #f02f2f;
    box-sizing: inherit;
    line-height: 1;
    margin-right: 5px;
    content: "New";
    color: #f02f2f;    
}

.arrow-prev, .arrow-next {
    height: 60px;
    width: var(--arrow-width);
    background-repeat: no-repeat;
    cursor: pointer;
    /* background-imageが縦方向中央に表示されるように */
 /*   margin-top: calc(var(--content-menu-height) / 2 - 44px / 2);*/
   margin-top: calc(var(--content-menu-height)/2 - var(--arrow-width));


/*    border: 1px solid #595652;*/
    border-radius: 50%;
    background-color: #fff;
    display: block;
    /*
    background-image: url("/image/arrow.svg");
    background-size: contain auto;
    background-origin: content-box;*/

}

.arrow-prev,
.arrow-next {
/*    width: 55px; */
    scale: 0.6;
}

.arrow-prev {
    grid-area: arrow1;
    transform: rotate(180deg);
}

.arrow-next {
    grid-area: arrow2;
}

.content-menu-allow-prev, .content-menu-allow-next {
    display: block;
    height: var(--arrow-width);
    width: var(--arrow-width);
    border-top: 5px solid var(--arrow-color);
    border-right: 5px solid var(--arrow-color);
}

.content-menu-allow-prev {
    transform: translateY(20%) rotate(-315deg);
}

.content-menu-allow-next {
    transform: translateY(20%) rotate(45deg);
}

.content-menu-footer {
    margin: 20px auto 0;
    text-align: center;
}


.content-menu-footer a {
    font-size: 0.9rem;
    line-height: 1.4;
    display: inline-block;
    padding: 8px 30px;
    text-align: center;
    color: #fff;
    background-color: #595652;
    box-shadow: 0 0 1px 1px rgb(1 1 1/10%);

}