@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;

    color: #1c1b1a;

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

/* トップニュースの記事をグループ化する要素に適用するスタイル
* 記事の各要素はgridで配置しています
*/
#content-top .article {
    display: grid;
    grid-template-areas: "top top"
                    "title img"
                    "subtitle img"
                    "content img";

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

/* トップニュースの記事の見出しに適用するスタイル 
*/
#content-top .article .title {
    font-size: var(--article-title-font-size);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    color: #1c1b1a;
    grid-area: title;
}

/* 見出しの上にマウスカーソルが来た時にアンダーラインを表示する */
#content-top .article .title:hover {
    text-decoration-line: underline;
}

/* トップニュースの記事の小見出しに適用するスタイル 
*/
#content-top .article .subtitle {
    font-size: var(--article-subtitle-font-size);
    line-height: 1.4;
    margin-bottom: 10px;
    grid-area: subtitle;
}

#content-top .article .concat-title {
    display: none;
}

/* トップニュースの記事の本文に適用するスタイル 
*/
#content-top .article .content {
    /* font-size: 80%; */
    font-size: var(--article-text-font-size);
    line-height: 1.8;
    margin: 12px 0 0;
    opacity: .7;
    grid-area:content;
}

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

/* トップニュースの記事の画像に適用するスタイル 
*/
#content-top .article .image {
    justify-self: right;
    padding: 30px 10px 10px ;
    /*
    width: 400px;
    height: 266px;*/
    border-style: none;
    grid-area: img;
}

/* トップニュースの記事のジャンルの一覧
*/
#content-top .article .genre-list {
    /* index.phpでは表示しない */
    display: none;
}

/* トップニュース下のヘッドライン記事をグループ化する要素に適用するスタイル
 * 2つの記事を左右に均等に配置する
 */
#content-top-headline {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    


/* トップニュース下のひとつ目のヘッドライン記事をグループ化する要素に適用するスタイル
 */
#content-top-headline-1 {
    grid-column: 1;
    display: grid;
    grid-template-areas: "c a";
}    

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

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


/*  トップニュース下のヘッドライン記事の画像に適用するスタイル
 */
#content-top-headline img {
    height: 105px;
    grid-area: c;

    padding: 10px 5px 5px;
}

.top-headline-titles-1 {
    grid-area: a;
}

.top-headline-titles-2 {
    grid-column: b;
}

#content-top-headline .title {
    font-size: 1.1rem;
    font-weight: 600;
}

#content-top-headline .title:hover {
    text-decoration-line: underline;
}


#content-top-headline .subtitle {
    font-size: 0.9rem;
}

#content-top-headline .concat-title {
    display: none;
}

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

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


/* ヘッドライン一覧の見出し */
.content-menu-header {
    font-size: 1.0rem;
    font-weight: 600;

    /* 境界線を入れる */
    border-bottom: 1px solid #e6e6e6;
}
    
.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-top: 10px;
    margin-bottom: 5px;

    margin: 0 auto;

}


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


    /* 要素５つ分の幅を確保する */
 /*   width: calc((var(--item-width) + var(--item-margin) * 2) * 5);*/
    /* height: var(--content-menu-height);*/
    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: 50px;
    width: var(--arrow-width);
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: calc(var(--content-menu-height) / 2 - 44px / 2);

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

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

.arrow-next {
    grid-area: arrow2;
    top: 50%;
}

.content-menu-allow-prev, .content-menu-allow-next {
    display: block;
    --allow-size: 25px;
    height: var(--allow-size);
    width: var(--allow-size);
    border-top: 3px solid #000;
    border-right: 3px solid #000;
}

.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 {
    display:none;
}

.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%);

}