@charset "utf-8";

/* ----------------------------------------------------------------------------
  リセット
---------------------------------------------------------------------------- */
html, body, div, span, object, iframe, audio, video,
header, footer, nav, main, article, section, aside, menu,
h1, h2, h3, h4, h5, h6, p,
strong, b, em, small, i, time, mark, sub, sup,
q, blockquote, del, ins, pre, summary, details, abbr, kbd, address,
img, figure, figcaption, canvas,
dl, dt, dd, ol, ul, li,
form, input, button, label, fieldset, legend, select, option,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 1em;
    font-weight: normal;
    word-break: break-word;
    border: none;
}

header, footer, nav, main, article, section, aside, menu, figure, figcaption {
    display: block;
}

img, button {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    color: inherit;
}

ol, ul {
    list-style: none;
}

table, th, td {
    border-collapse: separate;
    border-spacing: 0;
}

/* ======================================================
  ベース：～480px
====================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.body {
    width: 100%;
    background: #fff;
}

/* ----------------------------------------------------------------------------
  フォント（基本サイズ：15px）
---------------------------------------------------------------------------- */
html {
    font-size: 62.5%; /*10px*/
}
body {
    font-family: "icon", sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    color: rgba(0,0,0,0.8);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
_:lang(x)::-ms-backdrop, body { font-family: "icon", Meiryo,"メイリオ", sans-serif; } /* IE */
_:-ms-lang(x)::backdrop, body { font-family: "icon", Meiryo,"メイリオ", sans-serif; } /* Edge */

/*  pタグ
----------------------------------------------------------------------- */
p {
    margin-top: 24px;
}

/*  リンク
----------------------------------------------------------------------- */
a {
    display: block;
    text-decoration: none;
    color: rgba(0,0,0,0.8);
}

/*  テキストリンク  */
.link--txt {
    position: relative;
    display: inline;
    text-decoration: underline;
    color: #0064be;
}
.link--txt:visited {
    color: #00498b;
}

/*  アイコン　IE：下線を削除するため1度下線を指定  */
.link--self::after,
.link--blank::after,
.link--pdf::after,
.link--down::after {
    text-decoration: underline;
}

/*  アイコン  */
.link--self::after,
.link--blank::after,
.link--pdf::after,
.link--down::after {
    display: inline-block;
    padding:0 0.3em;
    vertical-align: middle;
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.7;
}
.link--self::after { content: "\e90b"; }
.link--blank::after { content: "\e900"; }
.link--pdf::after { content: "\e904"; }
.link--down::after { content: "\e902"; }


/* ----------------------------------------------------------------------------
  Header
---------------------------------------------------------------------------- */
.header_cover {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
}
.header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 5px 4% 4px;
    border-bottom: 1px solid #41464f;
}
.logo {
    flex: 0 0 50px;
    margin-right: auto;
}
/*  ヘッダーの森ビルロゴsvgカラー指定  */
.cls-1{fill:#000;}

/*  ナビゲーション
----------------------------------------------------------------------- */
.nav {
    display: none;
}
.navbtn:checked ~ .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 4% 4% 8%;
    background: #41464f;
    overflow: scroll;
    z-index: 1000;
}

/*  ナビ開閉ボタン  */
.navbtn--open {
    display:block;
}
.navbtn--open img {
    width: 34px;
    height: 34px;
}
.navbtn--close {
    display: block;
    margin-left: auto;
    width: 42px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
}
.navbtn--close img {
    padding: 10px;
    width: 42px;
    height: 42px;
}

/*  グローバルナビ  */
.gnav_list {
    margin-top: 40px;
}
.gnav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: 24px;
    border: 2px solid rgba(255,255,255,0.3);
}
.gmenu {
    flex: 1 1 80%;
    padding: 0.8em 1em 1em;
    font-size: 1.8rem;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
}
.localnavbtn {
    flex: 0 1 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.3);
}
.localnavbtn::after {
    content: "\e909";
    font-size: 2.4rem;
}
.input--localnav:checked + .localnavbtn::after {
    content: "\e901";
}

/* ローカルナビ */
.localnav_list {
    display: none;
}
.input--localnav:checked ~ .localnav_list {
    display: block;
    width: 100%;
}
.localnav {
    border-top: 1px dotted rgba(255,255,255,0.3);
}
.localnav--ttl {
    padding: 0.8em 2em 1em 1.2em;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.2);
}
.localmenu {
    position: relative;
    padding: 0.8em 2em 1em 1.2em;
    color: rgba(255,255,255,0.9);
}
.localmenu::after,
.localmenu--blank::after {
    position: absolute;
    top: calc(50% - 0.5em);
    right: 1em;
    line-height: 1;
}
.localmenu::after { content: "\e90b"; }
.localmenu--blank::after { content: "\e900"; }

/* ----------------------------------------------------------------------------
  Footer
---------------------------------------------------------------------------- */
.footer_cover {
    background: #41464f;
}
.footer {
    margin: 0 auto;
    padding: 0 0 16px;
}

/*  Back to the top  */
.backtop {
    background: #e3e4e8;
}
.backtop__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    font-size: 2.4rem;
    line-height: 1;
    color: rgba(0,0,0,0.8);
}

/*  フッターメニュー  */
.fmenu_list {
    padding: 24px 0 0;
}
.fmenu_item {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.fmenu_item > li {
    flex: 0 1 auto;
    margin: 0 16px;
}
.fmenu {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
}

/*  サイト内検索  */
.search_area {
    margin: 32px auto;
    width: 70%;
}
.search {
    display: flex;
    flex-flow: row nowrap;
    min-height: 48px;
    background: #fff;
    border: 2px solid #ddd;
}
.search__box {
    flex: 1 1 80%;
    padding: 0 8px;
    font-size: 1.4rem;
}
.search__btn {
    flex: 0 1 20%;
    font-size: 2.4rem;
    line-height: 1;
    background: #ddd;
}

/*  ©Copyright  */
.copyright {
    margin-top: 40px;
    margin-left: auto;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}

/* ----------------------------------------------------------------------------
  コンテンツエリアのレイアウト
---------------------------------------------------------------------------- */
.contents {
    width: 100%;
    overflow-x: hidden;
}

/*  2カラムのみ使用：wrap__main・wrap__subの親要素  */
.wrap {
    width: 100%;
}

/*  mainコンテンツ
----------------------------------------------------------------------- */
.wrap__main {
    padding: 8px 4%;
}

/*  フレーム  */
.main_frame {
    margin-bottom: 48px;
}
.main_frame--aside {
    padding: 24px 16px;
    background: #f0f2f5;
}

/*  章（グラデーション）⇒　グラデーションなしに変更  */
.group {
    position: relative;
    margin: 64px 0;
}

/*  章（グラデーションなし）  */
.group--normal {
    margin: 64px 0;
}

/*  入れ子のマージンtop削除  */
.group > *:first-child,
.group > *:first-child {
    margin-top: 0;
}

/*  subコンテンツ
----------------------------------------------------------------------- */
.wrap__sub {
    padding: 40px 4% 32px;
    background: #ddd;
}

.sub_list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.sub_list > li {
    flex: 0 1 48%;
    margin-bottom: 24px;
    font-size: 1.4rem;
    line-height: 1.2;
}
.sub_list > li.sub__ttl {
    flex: 0 0 100%;
    text-align: center;
    font-size: 1.5rem;
}
.sub {
    display: flex;
    align-items: center; 
    padding: 8px;
    height: 100%;
    min-height: 48px;
    background: #fff;
}

/* ----------------------------------------------------------------------------
  汎用Component：ページヘッダー
---------------------------------------------------------------------------- */
.pageheader {
    margin-top: 24px;
    width: 100%;
}
.pageheader__ttl {
    margin-top: 0;
    padding: 0 8px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.2;
    border-left: 6px solid #3c8cc8;
}
.pageheader__img {
    margin-top: 16px;
}

/* ----------------------------------------------------------------------------
  汎用Component：記事一覧
---------------------------------------------------------------------------- */
.list {
    margin-top: 24px;
}
.list > li {
    display: flex;
    flex-flow: column wrap;
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #e8eaeb;
}
.list__data {
    flex: 0 0 100%;
    color: rgba(0,0,0,0.6);
}
.list__ttl {
    flex: 1 1 auto;
    margin: 0;
}

/*  画像付き  */
.list--img > li {
    flex-flow: row nowrap;
}
.list--img .list__img {
    flex: 0 0 24%;
    position: relative;
    margin: 0 24px 8px 0;
}
.list--img .list__img:before {
    display: block;
    content:"";
    padding-top: 75%;
}
.list--img .list__img img {
    position: absolute;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*  関連ニュースリリースタイトル  */
.ttl--aside {
    padding-bottom: 6px;
    font-weight: bold;
    line-height: 1.2;
    border-bottom: 2px solid #e8eaeb;
}

/*  絞り込み検索
----------------------------------------------------------------------- */
.filter {
    margin-top: 24px;
}
.filter > li {
    margin-top: 16px;
}
.filter__item {
    padding: 8px;
    width: 100%;
    border: 1px solid #ddd;
}

/*  ページネーション
----------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 32px -0.4% 0;
}
.pagination > li {
    flex: 0 1 10%;
    padding: 0 0.4%;
}
.page  {
    padding: 8px 0;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1;
    background: #f0f2f5;
}
.page--current,
.page--none {
    background: #ddd;
}

/* ----------------------------------------------------------------------------
  汎用レイアウト：アイテムの配置
---------------------------------------------------------------------------- */
.area--ll,
.area--lm,
.area--ls,
.area--mm,
.area--ms,
.area--mxs,
.area--wrap {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -2%;
}
.area--nowrap {
    display: flex;
    flex-flow: row nowrap;
    margin: 0 -2%;
}

/*  子要素センター寄せ  */
.flex--center {
    justify-content: center;
}
.flex--center > .item > img {
    margin-left: auto;
    margin-right: auto;
}

/*  子要素
----------------------------------------------------------------------- */
.item {
    position: relative;
    margin: 24px 2% 0;
}

/*  LL：sp 100% → pc 100%  */
/*  LM：sp 100% → pc 50%  */
/*  LS：sp 100% → pc 33.33%  */
.area--ll > .item,
.area--lm > .item,
.area--ls > .item {
    flex: 0 1 96%;
}

/*  MM：sp 50% → pc 50%  */
/*  MS：sp 50% → pc 33.33%  */
/*  MXS：sp 50% → pc 25%  */
.area--mm > .item,
.area--ms > .item,
.area--mxs > .item {
    flex: 0 1 46%;
}

/*  wrap  */
/*  nowrap  */
.area--wrap > .item,
.area--nowrap > .item {
    flex: 0 1 auto;
}

/* float：テキスト回り込み
----------------------------------------------------------------------- */
.area--float {
    margin-top: 24px;
}
.area--float::after { 
    content: "";
    display: block;
    clear: both;
}
.float {
    float: right;
    margin: 0 0 8px 1em;
    width: 40%;
}

/* ----------------------------------------------------------------------------
  パーツ：カード型ボタン
---------------------------------------------------------------------------- */
.card {
    display: flex;
    flex-flow: column nowrap;
    padding: 0 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.card__ttl {
    flex: 1 0 auto;
    margin-top: 0;
    padding: 8px 10px 0;
    line-height: 1.3;
    background: linear-gradient(to top, #fff, #e8eaeb);
    border-radius: 4px;
}
.card__img {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 8px 10px 0;
}
.card__txt {
    flex: 0 1 auto;
    margin-top: 0;
    padding: 8px 10px 0;
    line-height: 1.4;
    color: rgba(0,0,0,0.6);
}
.card__subttl {
    display: block;
    margin: 0 0 8px;
    color: rgba(0,0,0,0.8);
}

/*  LLサイズ  */
.area--ll .card__ttl {
    padding: 10px;
    font-size: 1.8rem;
    font-weight: bold;
}
.area--ll .card__txt {
    padding: 10px;
}


/* ----------------------------------------------------------------------------
  パーツ：画像・iframe
---------------------------------------------------------------------------- */
/*  画像キャプション  */
.img__cap {
    display: inline-block;
    margin-top: 0;
    padding: 4px 0;
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(0,0,0,0.6);
}

/*  画像の上に文字  */
.img__overlay {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    width: 90%;
    text-align: center;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.1rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 2px  2px 4px #333, -2px  2px 4px #333, 2px -2px 4px #333, -2px -2px 4px #333;
}

/* 画像拡大：modal
----------------------------------------------------------------------- */
.modal {
    position: relative;
    display: block;
    cursor: pointer;
}
.modal::after {
    position: absolute;
    content: "\e90c";
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    text-align: center;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.6);
}

.input--modal:checked ~ .modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
}
.input--modal:checked ~ .modal::after {
    position: absolute;
    content: "\e901";
    top: 4vw;
    right: 4vw;
    color: rgba(0,0,0,0.8);
    background: #777;
}
.input--modal:checked ~ .modal .modal__img {
    margin: 0 auto;
    max-height: 70vh;
    max-width: 80vw;
}
.input--modal:checked ~ .modal .img__cap {
    padding: 8px;
    width: 100%;
    max-width: 60vw;
    text-align: center;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.9);
}

/* iframe（動画など）
----------------------------------------------------------------------- */
.iframe {
    position:relative;
    width: 100%;
    overflow:auto;
}
.iframe--169 {
    padding-top: 56%;
}
.iframe--43 {
    padding-top: 75%;
}
.iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* ----------------------------------------------------------------------------
  パーツ：ボタン
---------------------------------------------------------------------------- */
.btn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 24px 8px 12px;
    font-size: 1.4rem;
    line-height: 1.2;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/*  目立つボタン  */
.btn--point {
    color: rgba(255,255,255,0.9);
    background: #0064be;
    border: 1px solid #0064be;
}

/*  アイコン  */
.btn--self::after,
.btn--blank::after,
.btn--pdf::after,
.btn--down::after,
.btn--word::after,
.btn--excel::after {
    position: absolute;
    top: calc(50% - 0.5em);
    right: 8px;
}
.btn--self::after { content: "\e90b"; }
.btn--blank::after { content: "\e900"; }
.btn--pdf::after { content: "\e904"; }
.btn--down::after { content: "\e902"; }
.btn--word::after { content: "\e905"; }
.btn--excel::after { content: "\e903"; }


/* ----------------------------------------------------------------------------
  汎用スタイル：本文（見出し、テキスト）
---------------------------------------------------------------------------- */
/*  見出し  */
.ttl {
    margin-top: 24px;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.2;
}

/*  見出し2（青線）  */
.ttl2 {
    position: relative;
    margin-top: 32px;
    padding: 6px 12px;
    font-weight: bold;
    line-height: 1.2;
    background: linear-gradient(to top, rgba(255,255,255,0) 20%, #f0f2f5);
    border: 1px solid #e8eaeb;
}
.ttl2::after {
    position: absolute;
    content: "";
    top: 4px;
    left: 0;
    bottom: 4px;
    width: 4px;
    background: #3c8cc8;
}

/*  見出しS  */
.ttl--s {
    position: relative;
    margin-top: 48px;
    padding: 6px 0;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
    border-bottom: 2px solid #e8eaeb;
}

/*  見出しSS  */
.ttl--ss {
    position: relative;
    margin-top: 48px;
    font-weight: bold;
    line-height: 1.2;    
}

.ttl + .ttl--s,
.ttl2 + .ttl--s,
.ttl + .ttl--ss,
.ttl--s + .ttl--ss {
    margin-top: 32px;  
}

/*  太字  */
strong,
b {
    font-weight: bold;
}

/*  文字サイズ大小  */
.font--l {
    font-size: 1.1em;
}
.font--s {
    font-size: 0.84em;
    font-weight: inherit;
    line-height: 1.4;
}

/*  テキスト揃え  */
.align--l {
    text-align: left;
}
.align--c {
    text-align: center;
}
.align--r {
    text-align: right;
}

/*  アイコン風装飾  */
.txt_icon {
    display: inline-block;
    padding: 0 12px 1px;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.9);
    background: #379ab2;
    border-radius: 8px;
}

/*  囲み  */
.box {
    margin-top: 24px;
    padding: 8px 16px;
    line-height: 1.4;
    background: #f0f2f5;
    border: 1px solid #f0f2f5;
}
.box--border {
    margin-top: 24px;
    padding: 8px 16px;
    line-height: 1.4;
    border: 2px solid #f0f2f5;
}

/* ----------------------------------------------------------------------------
  汎用スタイル：リスト
---------------------------------------------------------------------------- */
/*  ul：マーカー・■※  */
.ul {
    margin-top: 24px;
}
.ul > li {
    position: relative;
    padding: 0 0 0.2em 1em;
}
.ul > li::before {
    position: absolute;
    left: 0;
}
.ul--disc > li::before { content: "・"; }
.ul--square > li::before { content: "■"; }
.ul--note > li::before { content: "※"; }
.ul--note--en > li::before { content: "*"; }

/*  マーカー非表示：mark--none  */
.ul > li.mark--none { padding-left: 0; }
.ul > li.mark--none::before { content: none; }

/*  ol：マーカー算用数字  */
.ol {
    margin: 24px 0 0 2em;
}
.ol > li {
    padding: 0 0 0.2em;
}
.ol--decimal {
    list-style: decimal;
}

/*  dl：sp column → pc row  */
.dl {
    display: flex;
    flex-flow: column wrap;
    margin-top: 8px;
}
.dl > dt {
    margin-top: 16px;
    padding-left: 6px;
    border-left: 8px solid #e8eaeb;
}
.dl > dd {
    padding: 4px 0 0 16px;
}

/*  入れ子のマージンtop削除  */
.ul > li > *:first-child,
.ol > li > *:first-child,
.dl > dt > *:first-child,
.dl > dd > *:first-child {
    margin-top: 0;
}

/* ----------------------------------------------------------------------------
  汎用スタイル：テーブル
---------------------------------------------------------------------------- */
/*  基本：枠線付き  */
.table--line {
    margin-top: 24px;
    width: 100%;
    line-height: 1.5;
    border-top: 1px solid #e8eaeb;
    border-left: 1px solid #e8eaeb;
}
.table--line th,
.table--line td {
    padding: 8px;
    vertical-align: top;
    border-right: 1px solid #e8eaeb;
    border-bottom: 1px solid #e8eaeb;
}
.table--line th {
    background: #f0f2f5;
}

.table--line .indent--2em {
  padding-left: 2em;
}
.table__cap {
    margin-bottom: 0;
}

/*  入れ子のマージンtop削除  */
th > *:first-child,
td > *:first-child {
    margin-top: 0;
}

/*  nowrap  */
.nowrap {
  white-space: nowrap;
}


/* ----------------------------------------------------------------------------
  専用Component：リリース・MORI NOW記事
---------------------------------------------------------------------------- */

/*  本文（articlebody）内のスタイル
----------------------------------------------------------------------- */
.articlebody {
    margin: 32px 0;
}

/*  リンク  */
.articlebody a {
    display: inline-block;
    color: #0064be;
}
.articlebody  a.btn {
    display: flex;
}

/*  見出し  */
.articlebody h2 {
    margin-top: 48px;
    padding: 8px;
    line-height: 1.4;
    font-weight: bold;
    background: #e8eaeb;
}
.articlebody h3 {
    margin-top: 48px;
    padding: 6px 8px;
    line-height: 1.4;
    font-weight: bold;
    border: 2px solid #e8eaeb;
}
.articlebody h4 {
    margin-top: 32px;
    padding: 2px 8px 4px;
    line-height: 1.4;
    font-weight: bold;
    background: #f0f2f5;
}
.articlebody h2 + h3 {
    margin-top: 32px;
}

/*  囲み  */
.articlebody .box {
    margin-top: 24px;
    padding: 8px 16px;
    line-height: 1.4;
    background: #f0f2f5;
    border: 1px solid #f0f2f5;
}
.articlebody .box ul:first-child,
.articlebody .box ol:first-child,
.articlebody .box p:first-child {
    margin-top: 0;
}

/*  リスト  */
.articlebody ul {
    margin-top: 24px;
}
.articlebody ul > li {
    position: relative;
    padding: 0 0 0.2em 1em;
}
.articlebody ul > li::before {
    content: "・";
    position: absolute;
    left: 0;
}
.articlebody ul > li >ul:first-child {
    margin-top: 0;
}
.articlebody ul.ul--square > li::before {
    content: "■";
    position: absolute;
    left: 0;
}
.articlebody ul.ul--note > li::before {
    content: "※";
    position: absolute;
    left: 0;
}
.articlebody ul.ul--note--en > li::before {
    content: "*";
    position: absolute;
    left: 0;
}
.articlebody ul > li.mark--none { padding-left: 0; }
.articlebody ul > li.mark--none::before { content: none; }

.articlebody ol {
    margin: 24px 0 0 2em;
    list-style: decimal;
}
.articlebody ol > li {
    position: relative;
    padding: 0 0 0.2em;
}
.articlebody ol > li >ul:first-child {
    margin-top: 0;
}

/*  テーブル：枠線付き  */
.articlebody table {
    margin-top: 24px;
    width: 100%;
    line-height: 1.5;
    border-top: 1px solid #e8eaeb;
    border-left: 1px solid #e8eaeb;
}
.articlebody table th,
.articlebody table td {
    padding: 8px;
    vertical-align: top;
    border-right: 1px solid #e8eaeb;
    border-bottom: 1px solid #e8eaeb;
}
.articlebody table th {
    background: #f0f2f5;
}

/*  画像配置  */
.imgs {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -2%;
}
.imgs__item {
    flex: 0 1 100%;
    margin-top: 24px;
    padding: 0 2%;
    text-align: center;
}
.imgs__item > .img {
    margin: 0 auto;
}


/* ----------------------------------------------------------------------------
  その他：専用Component・専用スタイル
---------------------------------------------------------------------------- */
/* トップページ
----------------------------------------------------------------------- */
/*  スライドエリア  */
.hero {
    width: 100%;
    background: #333;
}
.hero_slider {
    position: relative;
    width: 100%;
    height: calc(40vw + 46px);
    cursor: pointer;
    overflow: hidden;
    z-index:10;
}

/* スライダー画像 */
.hero_slider .hero__slide {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slide-fade 15s ease-in-out infinite;
}
.hero__caption {
    padding: 4px 12px 6px;
    min-height: 46px;
    line-height: 1.2;
    color: rgba(255,255,255,0.9);
    background: #333;
}

/* アニメーション定義 */
.hero_slider .hero__slide:nth-of-type(2) {
	animation-delay: 5s;
}
.hero_slider .hero__slide:nth-of-type(3) {
	animation-delay: 10s;
}
@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

/*  about_us  */
.index_about {
    margin: 40px 0 24px;
    padding: 0 4%;
}

/* クリッカブルマップ
----------------------------------------------------------------------- */
.clickable {
    position: relative;
}
.clickablelink {
    position: absolute;
    padding: 0 4px;
    font-size: 1rem;
    line-height: 1.4;
}
.clickablelink:hover {
    background: rgba(230,250,255,0.6);
}

/*  about_us  */
.urbanlab--1 { width: 28%; height: 25%; top: 2%; right: 31%; }
.urbanlab--2 { width: 30%; height: 25%; top: 13%; right: 0; }
.urbanlab--3 { width: 24%; height: 25%; top: 47%; right: 0; }
.urbanlab--4 { width: 26%; height: 25%; top: 73%; right: 16%; }


/* JavaScriptスタイル
----------------------------------------------------------------------- */
/*  現在のページ：js_current  */
.sub_list .js_current {
    background: #edeef0;
}

/*  #付きリンクのスマホでのズレ解消  */
.js_anchor {
    margin-top: -40px;
    padding-top: 84px
}


/* ----------------------------------------------------------------------------
  非表示
---------------------------------------------------------------------------- */
.hide--all,
.hide--sp {
    display: none;
}


/* ------------------ @media：0px～480pxここまで ------------------ */


/* ======================================================
  スマホ横・タブレット：481px～1023px
====================================================== */
@media print, screen and (min-width: 481px) {

/* ----------------------------------------------------------------------------
  汎用レイアウト：アイテムの配置
---------------------------------------------------------------------------- */
.area--ll,
.area--lm,
.area--ls,
.area--mm,
.area--ms,
.area--mxs,
.area--nowrap {
    margin: 0 -1.5%;
}

/*  子要素
----------------------------------------------------------------------- */
.item {
    margin: 24px 1.5% 0;
}

/*  LL：sp 100% → pc 100%  */
.area--ll > .item {
    flex: 0 1 97%;
}

/*  LM：sp 100% → pc 50%  */
/*  MM：sp 50% → pc 50%  */
.area--lm > .item,
.area--mm > .item {
    flex: 0 1 47%;
}
_:lang(x)::-ms-backdrop, .area--lm > .item, .area--mm > .item { flex: 0 1 46.7%; max-width: 46.7%; }
_:-ms-lang(x)::backdrop, .area--lm > .item, .area--mm > .item { flex: 0 1 46.7%; max-width: 46.7%; }

/*  LS：sp 100% → pc 33.33%  */
/*  MS：sp 50% → pc 33.33%  */
.area--ls > .item,
.area--ms > .item {
    flex: 0 1 30.33%;
}
_:lang(x)::-ms-backdrop, .area--ls > .item, .area--ms > .item { flex: 0 1 30%; max-width: 30%; }
_:-ms-lang(x)::backdrop, .area--ls > .item, .area--ms > .item { flex: 0 1 30%; max-width: 30%; }

/*  MXS：sp 50% → pc 25%  */
.area--mxs > .item {
    flex: 0 1 22%;
}
_:lang(x)::-ms-backdrop, .area--mxs > .item { flex: 0 1 21.7%; max-width: 21.7%; }
_:-ms-lang(x)::backdrop, .area--mxs > .item { flex: 0 1 21.7%; max-width: 21.7%; }

/*  IE：nowrap  */
.area--nowrap > .item img {
    width: 100%;
}

/* ----------------------------------------------------------------------------
  パーツ：カード型ボタン
---------------------------------------------------------------------------- */
/*  LLサイズ  */
.area--ll .card__txt.hide--sp {
    display: block;
}
.area--ll .card {
    flex-flow: row wrap;
}
.area--ll .card__ttl {
    flex: 0 1 100%;
    padding: 10px 16px;
    order: 1;
}
.area--ll .card__img {
    flex: 0 0 32%;
    padding: 0 16px 8px;
    margin-left: auto;
    order: 3;
}
.area--ll .card__txt {
    flex: 1 1 58%;
    padding: 0 16px 8px;
    order: 2;
}



}  /* ------------------ @media：481px～1023pxここまで ------------------ */


/* ======================================================
  PC：1024px～
====================================================== */
@media print, screen and (min-width: 1024px) {

/* ----------------------------------------------------------------------------
  表示・非表示
---------------------------------------------------------------------------- */
.hide--pc {
    display: none;
}
.hide--sp {
    display: block;
}
table .hide--sp {
    display: table-cell;
}

/* ----------------------------------------------------------------------------
  フォント（基本サイズ：15px）
---------------------------------------------------------------------------- */
a:hover {
    color: #0064be;
}
.link--txt:hover {
    color: #0388ff;
}

/* ----------------------------------------------------------------------------
  Header
---------------------------------------------------------------------------- */
.header_cover {
    background: #41464f;
}
.header {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding: 12px 0;
    max-width: 960px;
    background: #41464f;
    border-bottom: none;
}
.logo {
    flex: 0 0 64px;
    align-self: flex-end;
}
.cls-1 { fill:#fff; }

/*  ナビゲーション
----------------------------------------------------------------------- */
.nav {
    flex: 0 0 auto;
    display: block;
    align-self: flex-end;
}

/*  グローバルナビ  */
.gnav_list {
    display: flex;
    flex-flow: row nowrap;
    margin-top: 0;
}
.gnav {
    flex: 0 1 auto;
    display: block;
    margin: 0 24px;
    text-align: center; 
    border: none;
    border-bottom: solid 1px #41464f;
}
.gnav:last-child {
    margin-right: 0;
}
.gnav:hover {
    border-bottom: solid 1px #fff;
}
.gmenu {
    padding: 0 4px;
    font-size: 1.4rem;
    line-height: 1.4;
}
.gmenu:hover {
    color: rgba(255,255,255,0.9);
}

/*  ローカルナビ  */
.gnav:hover .localnav_list {
    position: absolute;
    top: calc(100% - 12px);
    left: 0;
    right: 0;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    padding: 24px 24px 16px;
    min-height: 100px;
    background: #41464f;
    z-index: 100;
}

.localnav {
    flex: 0 1 23%;
    display: flex;
    align-items: center;
    margin: 0 1% 10px;
    background: #fff;
    border: none;
}
.localmenu {
    flex: 0 1 100%;
    padding: 6px 12px 6px 10px;
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(0,0,0,0.8);
}
.localmenu::after {
    display: none;
}
.localmenu--blank::after {
    display: block;
    right: 6px;
}
.localnav--ttl {
    flex: 0 0 100%;
    padding: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: rgba(0,0,0,0.8);
    background: none;
}

/* ----------------------------------------------------------------------------
  Footer
---------------------------------------------------------------------------- */
.footer {
    max-width: 960px;
}

/*  Back to the top  */
.backtop {
    position: fixed;
    right: calc(50% - 580px);
    bottom: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 6px;
    border-radius: 50%;
    z-index: 10;
}
.backtop__btn {
    width: 40px;
    height: 40px;
    min-height: 0;
}

/*  フッターメニュー  */
.fmenu_list {
    display: flex;
    flex-flow: row wrap;
}
.fmenu {
    padding-bottom: 4px;
    border-bottom: solid 1px #41464f;
}
.fmenu:hover {
    color: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #fff;
}

/*  サイト内検索  */
.search_area {
    margin: 0 0 0 auto;
    width: 400px;
}
.search {
    min-height: 32px;
}
.search__btn {
    font-size: 1.6rem;
}

/*  ©Copyright  */
.copyright {
    margin-top: 40px;
}

/* ----------------------------------------------------------------------------
  コンテンツエリアのレイアウト
---------------------------------------------------------------------------- */
.contents {
    margin: 0 auto;
    padding: 0 32px 24px;
    min-height: calc(100vh - 122px);
    max-width: 1024px;  /* internal_width 960px */
    background: #fff;
}

/*  2カラムのみ使用：wrap__main・wrap__subの親要素  */
.wrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

/*  mainコンテンツ
----------------------------------------------------------------------- */
.wrap__main {
    flex: 0 1 736px;
    padding: 0;
    overflow-x: hidden;
}

/*  フレーム  */
.main_frame {
    margin-bottom: 24px;
    padding: 24px 27px;
}
.main_frame--aside {
    padding: 16px 27px 24px;
    background: none;
}

/*  章（グラデーション）  */
.group::before,
.group::after {
    left: -27px;
    right: -27px;
}

/*  subコンテンツ
----------------------------------------------------------------------- */
.wrap__sub {
    flex: 0 1 200px;
    margin-left: 16px;
    padding: 48px 0 0;
    background: #fff;
}

.sub_list {
    display: block;
    margin-bottom: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.sub_list > li {
    margin-bottom: 0;
    border-bottom: 1px dotted #e8eaeb;
}
.sub_list > li:last-child {
    border-bottom: none;
}
.sub {
    display: block;
    min-height: 0;
    font-size: 1.3rem;
    line-height: 1.4;
    border-left: 4px solid #e8eaeb;
}
.sub_list > li.sub__ttl {
    padding: 6px;
    font-size: 1.4rem;
    background: linear-gradient(to top, rgba(255,255,255,0) 20%, #f0f2f5);
    border-bottom: 2px solid #3c8cc8;
}
.sub:hover {
    background: #e6faff;
    border-left: 4px solid #3c8cc8;
}
.sub--nolink:hover {
    background: #fff;
    border-left: 4px solid #e8eaeb;
}

/*  3階層目  */
.sublist__sub .sub  {
    padding: 4px 8px 4px 1.4em;
}
.sublist__sub li:last-child .sub {
    padding-bottom: 8px;
}

/* ----------------------------------------------------------------------------
  汎用Component：記事一覧
---------------------------------------------------------------------------- */
.list > li {
    flex-flow: row nowrap;
    font-size: 1.4rem;
}
.list__data {
    flex: 0 0 7em;
    margin-right: 8px;
}
.list__ttl {
    flex: 1 1 80%;
}

/*  絞り込み検索
----------------------------------------------------------------------- */
.filter {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 24px -2px 0;
}
.filter > li {
    flex: 1 1 auto;
    margin: 16px 2px 0;
}
.filter__item {
    padding: 8px 4px;
    font-size: 1.3rem;
}

/*  ページネーション
----------------------------------------------------------------------- */
.page:hover {
    background: #e6faff;
}
.page--current:hover,
.page--none:hover {
    background: #ddd;
}


/* ----------------------------------------------------------------------------
  パーツ：カード型ボタン
---------------------------------------------------------------------------- */
a.card:hover,
a.card:hover .card__ttl {
    background: #f0f2f5;
}

/* ----------------------------------------------------------------------------
  パーツ：ボタン
---------------------------------------------------------------------------- */
.btn:hover,
.btn--point:hover {
    color: #0064be;
    background: #e6faff;
    border-color: #0064be;
}
.btn--img:hover {
    opacity: 0.8;
}

/* ----------------------------------------------------------------------------
  汎用スタイル：リスト
---------------------------------------------------------------------------- */
/*  dl：sp column → pc row  */
.dl {
    flex-flow: row wrap;
}
.dl > dt {
    flex: 0 0 30%;
    padding: 4px 8px;
    background: #f0f2f5;
    border-left: none;
}
.dl > dd {
    flex: 1 1 64%;
    margin-top: 16px;
    padding: 4px 8px;
}

/*  リストをflexに（PCのみ）  */
.list--flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.list--flex > li {
    flex: 0 1 47%;
}

/* ----------------------------------------------------------------------------
  その他：専用Component・専用スタイル
---------------------------------------------------------------------------- */
/* トップページ
----------------------------------------------------------------------- */
/*  スライドエリア  */
.hero {
    background: #41464f;
}
.hero_slider {
    margin: auto;
    max-width: 2000px;
    height: calc(40vw + 28px);
}
/* スライダー画像 */
.hero__caption {
    min-height: 28px;
    background: #41464f;
}

/*  about_us  */
.index_about {
    margin: 0;
    padding: 40px 0;
    background: #f0f2f5;
}
.index_about * {
    margin-left: auto;
    margin-right: auto;
    max-width: 580px;
}


/* クリッカブルマップ
----------------------------------------------------------------------- */
.clickablelink {
    padding: 0 4px 2px;
    font-size: 1.6rem;
}
.clickablelink:hover {
    background: rgba(230,250,255,0.6);
}



/*  JavaScriptスタイル
----------------------------------------------------------------------- */
.js_current {
    background: #41464f;
}
.gnav:has(.js_current) {
    border-bottom: solid 1px #aaa;
}
.sub_list .js_current {
    border-left: 4px solid #3c8cc8;
}


}  /* ------------------ @media：1024px～ここまで ------------------ */



/* ----------------------------------------------------------------------------
  マージン削除・追加
---------------------------------------------------------------------------- */
/*  marginトップ：0  */
.mt--0,
.articlebody .mt--0 {
    margin-top: 0;
}
/*  marginトップ：24px  */
.mt--24,
.articlebody .mt--24 {
    margin-top: 24px;
}


/* ======================================================
  印刷CSS
====================================================== */
@media print {

html { font-size: 50%; }
.body { background: none; }
img { max-width: 100%; }

/*  印刷非表示  */
.header::after { display: none; }
.nav { display: none; }
.wrap__sub { display: none; }
.main_frame--aside { display: none; }
.breadcrumb { display: none; }
.modal::after { display: none;}
.slide::after { display: none;}

/*  その他調整  */
.header { display: block; padding: 5px 4% 4px; border-bottom: 1px solid #333; }
.logo { position: relative; top: 0; left: 0; }
.logo img { width: 48px; }

.backtop { display: none; }
.fmenu_list { display: none; }
.copyright { margin-top: 0; padding-top: 24px; }

.contents { padding: 0; }
.wrap { display: block; }
.wrap__main { width: 100%; }
.item { height: 100%; }
.morinowlist { padding: 0.5em; }
.morinowlist__ttl { height: 3.8em; }

/*  Firefox：flex→float対応  */
    @-moz-document url-prefix() {
        .area--ll, .area--lm, .area--ls,
        .area--mm, .area--ms, .area--mxs,
        .area--nowrap { display: block; }
        .area--ll::after, .area--lm::after, .area--ls::after,
        .area--mm::after, .area--ms::after, .area--mxs::after,
        .area--nowrap::after { display:block; content:""; clear:both; }

        .item { float: left; }
        .area--ll > .item { width: 96%; }
        .area--lm > .item, .area--mm > .item { width: 47%; }
        .area--ls > .item, .area--ms > .item { width: 30.33%; }
        .area--mxs > .item { width: 22%; }

        .area--ll > .card { display: block; }
        .area--ll > .card .card__img { float: right; width: 32%; }
        .area--ll > .card .card__txt { margin-right: 16px; }

        .btn { display: block; }

        .ul--datasheet > li { display: block; }
        .ul--datasheet > li::after { display:block; content:""; clear:both; }
        .ul--datasheet > li > span:first-child { float: left; width: 45%; }
    }

/*  Edge  */
    @supports (-ms-ime-align: auto) {
        /*  after要素非表示  */
        .group::after { display: none;}

        /*  flex→float対応  */
        .area--ll, .area--lm, .area--ls,
        .area--mm, .area--ms, .area--mxs,
        .area--nowrap { display: block; }
        .area--ll::after, .area--lm::after, .area--ls::after,
        .area--mm::after, .area--ms::after, .area--mxs::after,
        .area--nowrap::after { display:block; content:""; clear:both; }

        .item { float: left; }
        .area--ll > .item { width: 96%; }
        .area--lm > .item, .area--mm > .item { width: 47%; }
        .area--ls > .item, .area--ms > .item { width: 30.33%; }
        .area--mxs > .item { width: 22%; }

        .area--ll > .card { display: block; }
        .area--ll > .card .card__img { float: right; width: 32%; }
        .area--ll > .card .card__txt { margin-right: 16px; }

        .btn { display: block; }

        .ul--datasheet > li { display: block; }
        .ul--datasheet > li::after { display:block; content:""; clear:both; }
        .ul--datasheet > li > span:first-child { float: left; width: 45%; }
    }
}  /* ------------------ @media printここまで ------------------ */