@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

html {
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    word-break: normal;

    font-size: 16px; /* このfont-sizeを基準としてremで各要素のフォントサイズを指定する */
    
}

body {
    --max-width: 1200px;
    font-family: Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,Helvetica Neue,Helvetica,Arial,Roboto,sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
/*    position: relative;*/
    position: relative;
    z-index: 5;
    padding: 0;
    color: #1c1b1a;
    background-color: #fff;

    --article-title-font-size: 1.7rem;
    --article-subtitle-font-size: 1.2rem;
    --article-text-font-size: 1.0rem;

    --arrow-color: #595652;
}

a {
    /* <a>タグのデコレーションをキャンセルする */
    text-decoration: none;
    color: #1c1b1a;
}


header {
    position: relative;
}

/* <header>タグ内でnewsサイト機能のナビゲーション要素をグループ化したタグに適用するスタイル
 */
.header-nav {
/*    height: 100px;*/
    background-color: #fff;

    margin: 0 auto;
    border-bottom: 1px solid #e6e6e6;
    z-index: 100;
    position: relative;
    flex-flow: row nowrap;
    box-sizing: content-box;    
    border-bottom: 1px solid #595662; /* navの下のアンダーライン */
    max-width: var(--max-width);
    /*
    display: -webkit-box;
    display: -ms-flexbox;*/
    display: flex;
    -ms-flex-pack: justify;
    height: 100%;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* newsサイト機能のナビゲーション要素内のナビゲーション機能要素に共通して適用するスタイル
 */
.header-nav-unit {
    width: 100%;
    height: 100%;
    user-select: none;

    /* タイトル文字っぽいのはこのスタイルで */
    font-size: 1.0rem;
    font-weight: 600;
    color: #1c1b1a;

    display: block;
    height: 100%;
    padding-top: 20px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    margin: 10px 0 10px 0;
}    

.header-logo {
    margin: 10px 0 10px 0;
    padding-top: 20px;
}

.m-header-drawer {
    position: absolute;
    margin: 2px 13px 0 4px;
    display: none;
}

.m-header-drawer__btn {
    display: flex;
    flex-direction: column;
    box-sizing: content-box;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 6px 0;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}

.m-header-drawer__btn span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-color: #111;
}

.m-header-drawer__btn-menu {
    font-size: 0.8rem;
    line-height: 1;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    color: #333;
}

.header-nav-unit-body {
    display: none;
    position: absolute;
    z-index: 30;
    top: 60px;
    left: calc(50% - 600px);
    width: 1200px;
    border: 1px solid #595652;
    background-color: #e8e8e8;
    opacity: 1;
}

.header-nav-unit-body-contents {
    display: grid;
    grid-template-areas: "top close"
                         "select select"
                         "items items";
    margin: 1% 5% 3% 5%;
}

.header-nav-unit-body-title {
    display: grid;
    grid-area: top;
    grid-auto-columns: max-content;
    font-size: 1.0rem;
    font-weight: 600;
    color: #1c1b1a;
}

/* ヘッダのアコーディオンメニューの閉じるボタン */
.header-nav-unit-body-close {
    display: grid;
    grid-area: close;
    /* grid-auto-columns: min-content;*/
}

.header-nav-unit-body-close a {
    font-size: 1.0rem;
    color: #1c1b1a;
    border: 1px solid #595652;
    margin: 0 0 0 auto;
    padding: 1% 4% 1% 2%;
}

.header-nav-unit-body-close a:hover {
    background: #1c1b1a;
    color: #fff;
}

.header-nav-unit-body-close a:after,
.header-nav-unit-body-close a:before {
    position: absolute;
    z-index: 30;
    top: 30px;
    right: 66px;
    display: inline-block;
    width: 12px;
    height: 2px;
    content: "";
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #595652;
}

.header-nav-unit-body-close a:after {
    transform: rotate(135deg);
}

.header-nav-unit-body-close a:after:hover,
.header-nav-unit-body-close a:before:hover {
    color: #595652;
}

#overlay-layer {
    position: absolute;
    z-index: 20;
    width: 100%;
/*    height: 100vh;*/
    height: 100%;
    background: rgba(0,0,0,.6);
    display: none;
    opacity: 0.3;
}

.header-nav-unit-body-subtitle {
    grid-area: select;
    display: grid;
    font-size: 1.0rem;
    font-weight: 600;
    color: #1c1b1a;
    grid-auto-columns: max-content;
}

.header-nav-unit-body-subcontent {
    grid-area: items;
    display: flex;
    flex-wrap: wrap;
}

.header-nav-unit-body-subcontent a {
    font-size: 1.0rem;
    line-height: 1.4;
    display: block;
    margin: 0 10px 10px 0;
    padding: 4px 8px;
    color: #fff;
    border: 1px solid #595652;
    border-radius: 2px;
    background: #595652;
    -webkit-box-shadow: 0 0 1px 1px rgb(1 1 1/10%);
    box-shadow: 0 0 1px 1px rgb(1 1 1/10%);
}

.header-nav-unit-body-subcontent a:hover {
    color: #595652;
    background: #fff;
}

#header-nav-unit-body-subcontent-area {
    display: grid;
    grid-template-areas: "left map first"
                         "left map second"
                         "left map third"
                         "left map fourth"
                         "left map fifth";
}

#header-nav-unit-body-subcontent-subarea-top {
    grid-area: left;
}

#header-nav-unit-body-subcontent-subarea-1 {
    grid-area: first;
}

#header-nav-unit-body-subcontent-subarea-2 {
    grid-area: second;
}

#header-nav-unit-body-subcontent-subarea-3 {
    grid-area: third;
}

#header-nav-unit-body-subcontent-subarea-4 {
    grid-area: fourth;
}

#header-nav-unit-body-subcontent-subarea-5 {
    grid-area: fifth;
}

#header-nav-unit-body-subcontent-subarea-1,
#header-nav-unit-body-subcontent-subarea-2,
#header-nav-unit-body-subcontent-subarea-3,
#header-nav-unit-body-subcontent-subarea-4,
#header-nav-unit-body-subcontent-subarea-5 {
    display: flex;
    flex-wrap: nowrap;
}


.header-nav-unit-body-subcontent-subarea-title {
    margin: 0 1% 0 1%;
}

.header-nav-unit-body-subcontent-subarea-body {
    display: flex;
    flex-wrap: wrap;
}

/* <main>タグのnewsサイト機能をグループ化する要素に適用するスタイル
 */
.main-division {
    position: relative;
    z-index: 10;
    --main-width: calc(100% - 350px);
    border-right: 1px solid #e4e1e1;
    margin: 0 auto;
    width: var(--main-width);
    /* padding-right: 25px; */
    max-width: var(--max-width);
}


/* <footer>タグのnewsサイト機能に関する要素をグループ化する要素に適用するスタイル */
.footer-division {
    z-index: 10;
    max-width: var(--max-width);
    margin: 0 auto;
    margin-top: 20px;
    border-top: 1px solid #e4e1e1;
}

 /* footerのロゴに適用するスタイル */
.footer-logo {
    margin: 20px 0 20px 0;
}


/* ジャンル */
.genre-list {
    grid-area: genre;
    display: flex;
/*     flex-direction: row; */
    justify-content: flex-end;
    align-items: center;
    font-size: 1.0rem;
}

.genre-list-item {
    display: block;
    line-height: 1.4;
    color: #00a8e9;
    background-color: #fff;
    border: 1px solid #00a8e9;
    border-radius: 2px;
    margin: 0 5px 5px 5px;
    font-size: 1.0rem;

    padding: 0.3% 1% 0.3% 1%;
}

.genre-list-item:hover {
    background-color: #00a8e9;
    color: #fff;
}

.genre-list-item a {
    color: inherit;
}