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

.link--youtube::after {
    display: inline-block;
    content: url("/common/img/icon_youtube.svg");
    margin: 0 0.3em;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
}

/* ----------------------------------------------------------------------------
  Header
---------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 5px 4% 4px;
    background: #fff;
    border-bottom: 1px solid #333;
    z-index: 100;
}
.logo {
    flex: 0 0 50px;
    margin-right: auto;
}
.logo img {
    width: 50px;
}

/*  ナビゲーション
----------------------------------------------------------------------- */
.nav {
    display: none;
}
.navbtn:checked ~ .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 4% 4% 8%;
    background: #333;
    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;
}

/*  言語選択  */
.language_list {
    display: flex;
    flex-flow: row nowrap;
    margin: 40px -1% 0;
}
.language_list > li {
    flex: 1 1 auto;
    margin: 0 1%;
}
.language {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.9);
    background: #777;
    border-radius: 4px;
}

/*  サイト内検索  */
.search_area {
    margin-top: 40px;
}
.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;
}

/*  グローバルナビ  */
.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 {
    padding: 0 0 16px;
    background: linear-gradient(to top, #fff 60%, #e8eaeb);
}

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

/*  フッターメニュー  */
.fmenu_list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 24px 4% 0;
}
.fmenu_list > li {
    flex: 0 1 48%;
    margin-top: 8px;
}
.fmenu {
    padding: 8px 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.2;
}

/*  ©Copyright  */
.copyright {
    margin-top: 40px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

/* ----------------------------------------------------------------------------
  コンテンツエリアのレイアウト
---------------------------------------------------------------------------- */
.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;
    padding-top: 16px;
}
.group::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: -4%;
    right: -4%;
    height: 1px;
    background: #e8eaeb;
}
.group::after {
    position: absolute;
    display: block;
    content: "";
    top: 2px;
    left: -4%;
    right: -4%;
    height: 40px;
    background: linear-gradient(to top, rgba(255,255,255,0) 40%, #f0f2f5);
}

/*  章（グラデーションなし）  */
.group--normal {
    margin: 64px 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;
}

/*  コンテンツリスト（ESGトップページなど）  */
.card--contentslist .card__ttl {
    background: #fff;
}
.card--contentslist .card__txt {
    line-height: 1.8;
}
.card--contentslist .link--txt {
    text-decoration: none;
}

/* ----------------------------------------------------------------------------
  パーツ：画像・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"; }

/* ----------------------------------------------------------------------------
  パーツ：アコーディオン
---------------------------------------------------------------------------- */
.acco {
    display: block;
    margin-top: 24px;
}
.input--acco {
    display: none;
}
.acco__btn label {
    position: relative;
    display: block;
    padding-left: 2em;
    cursor: pointer;
}
.acco__btn label::before {
    position: absolute;
    content: "\e90b";
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 4px;
    text-align: center;
    color: rgba(0,0,0,0.6);
    background: #e8eaeb;
}
.acco__item {
    display: none;
}

/*  開  */
.input--acco:checked + .acco__btn {
    background: #f0f2f5;
}
.input--acco:checked + .acco__btn label::before {
    content: "\e902";
}
.input--acco:checked ~ .acco__item {
    display: block;
    margin: 24px 0 0 1.6em; 
}

/* ----------------------------------------------------------------------------
  汎用スタイル：本文（見出し、テキスト）
---------------------------------------------------------------------------- */
/*  見出し  */
.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;
}

/*  SP縦方向  */
.table--vertical th,
.table--vertical td {
    display: block;
    padding: 4px 8px 4px 1.4em;
    width: 100%;
    text-align: left;
}
.table--vertical tr > *:first-child {
    padding-left: 8px;
}

/*  SP横スクロール  */
.table--scroll {
    padding-bottom: 16px;
    overflow-x: scroll;
    white-space: nowrap;
}
.table--scroll::-webkit-scrollbar {
    height: 16px;
    background: #ddd;
}
.table--scroll::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 4px;
}
.table--scroll_fixed {
    position: sticky;
    left: 0;
    background: #f0f2f5;
}

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

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

/* ----------------------------------------------------------------------------
  汎用スタイル：グラフ
---------------------------------------------------------------------------- */
.graph {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin-top: 24px;
    padding: 24px 16px 16px;
    font-size: 1.2rem;
    line-height: 1.2;
    border: 1px solid #e8eaeb;
}
.graph__ttl {
    flex: 1 0 100%;
    margin-top: -8px;
    padding-bottom: 8px;
    font-size: 1.4rem;
    text-align: center;
}
.graph__cap {
    flex: 1 0 100%;
    margin-top: 0;
    padding: 8px 0 0;
    text-align: center;
    color: rgba(0,0,0,0.6);
}

/*  Y軸  */
.graph__y {
    flex: 0 2 auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding-right: 4px;
    height: 160px;
    font-size: 1.0rem;
    text-align: right;
    border-right: 1px solid #e8eaeb;
}
.graph__y > p {
    flex: 0 0 25%;
    position: relative;
    margin-top: 0;
}
.graph__y > p::after {
    position: absolute;
    content: "";
    top: 0;
    right: -8px;
    width: 7px;
    height: 1px;
    background: #e8eaeb;
}

/*  プロットエリア  */
.graph__plot {
    flex: 1 1 80%;
    display: flex;
    flex-flow: column nowrap;
    max-height: 100%;
    text-align: center;
}
.graph__data {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: flex-end;
    height: 160px;
    border-bottom: 1px solid #e8eaeb;
}
.graph__bar {
    position: relative;
    flex: 0 1 4em;
    margin: 0 8px;
    padding-top: 2px;
    background: #bee1f0;
}
.graph__label {
    position: absolute;
    top: -1.4em;
    left: -15%;
    width: 130%;
}

/*  X軸  */
.graph__x {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
.graph__x > p {
    flex: 0 1 4em;
    margin: 4px 8px 0;
}

/*  グラフの配置：sp 横1 → pc 横2  */
.graphs {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0 -1%;
}
.graphs .graph {
    flex: 0 1 100%;
    margin: 24px 1% 0;
}

/* ----------------------------------------------------------------------------
  専用Component：リリース・MORI NOW記事
---------------------------------------------------------------------------- */
/*  ヘッドライン（公開日・配信元・タイトル）
----------------------------------------------------------------------- */
.headline {
    padding-bottom: 8px;
    border-bottom: 2px solid #e8eaeb;
}
.headline__date {
    display: block;
    text-align: right;
}
.headline__source {
    margin-top: 0;
    text-align: right;
}
.headline__ttl {
    margin-top: 24px;
    line-height: 1.4;
    font-size: 2.0rem;
    font-weight: bold;
}
.headline__subttl > p {
    margin-top: 16px;
    line-height: 1.4;
}

/*  本文（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;
}
/*  改修前クラス★  */
.photo {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(0,0,0,0.6);
}
.photo > span {
    flex: 0 1 50%;
}
.photo > span > br {
    display: none;
}
.photo > img {
    margin: 0 auto;
}

/*  お問い合わせ先
----------------------------------------------------------------------- */
.inquiry {
    margin: 32px 0;
    font-size: 1.4rem;
    border-top: 2px dotted #e8eaeb;
}
.inquiry__ttl {
    font-weight: bold;
}
.inquiry__item {
    margin-bottom: 24px;
}
.inquiry__item > p {
    margin-top: 0;
}
.inquiry__item a {
    display: inline-block;
}

/* ----------------------------------------------------------------------------
  専用Component：MORI NOW（トップページ）
---------------------------------------------------------------------------- */
.morinow {
    margin-bottom: 32px;
    background: #333;
    overflow: hidden;
}

/*  スライドエリア
----------------------------------------------------------------------- */
.slider {
    position: relative;
    animation: slider 20s ease-in-out infinite;
    display: flex;
    flex-flow: row nowrap;
    background: #333;
    cursor: pointer;
}
.slide {
    flex: 0 0 100%;
}
.slide__cap {
    padding: 10px 4%;
    height: 72px;
    color: rgba(255,255,255,0.9);
    overflow: hidden;
}

/*  各スライド連動の●  */
.slide::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    background: #777;
    border-radius: 50%;
}
.slide--1::after { right: calc(50% + 44px); bottom: -22px; }
.slide--2::after { right: calc(-50% + 10px); bottom: -22px; }
.slide--3::after { right: calc(-150% - 24px); bottom: -22px; }
.slide--4::after { right: calc(-250% - 58px); bottom: -22px; }

/*  スライドコントロール（SP）
----------------------------------------------------------------------- */
.slide_control--sp {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 8px 0;
}
.slide_control__btn {
    margin: 0 10px;
	width: 14px;
	height: 14px;
    border: 2px solid #777;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

/*  スライドの動き
----------------------------------------------------------------------- */
@keyframes slider {
    0% { left: 0; opacity: 0.5; }
    1% { left: 0; opacity: 1; }
    22% { left: 0; opacity: 1; }
    24% { left: 0; opacity: 0; }
    25% { left: -100%; opacity: 0; }
    26% { left: -100%; opacity: 1; }
    47% { left: -100%; opacity: 1; }
    49% { left: -100%; opacity: 0; }
    50% { left: -200%; opacity: 0; }
    51% { left: -200%; opacity: 1; }
    72% { left: -200%; opacity: 1; }
    74% { left: -200%; opacity: 0; }
    75% { left: -300%; opacity: 0; }
    76% { left: -300%; opacity: 1; }
    97% { left: -300%; opacity: 1; }
    99% { left: -300%; opacity: 0; }
    100% { left: 0; opacity: 0; }
}

/*  コントロールクリック時の動き  */
#control01:checked ~ .slider {
	animation: slider_1 20s ease-in-out infinite;
	animation-delay: 0s;
}
#control02:checked ~ .slider {
	animation: slider_2 20s ease-in-out infinite;
	animation-delay: -5s;
}
#control03:checked ~ .slider {
	animation: slider_3 20s ease-in-out infinite;
	animation-delay: -10s;
}
#control04:checked ~ .slider {
	animation: slider_4 20s ease-in-out infinite;
	animation-delay: -15s;
}
@keyframes slider_1 {
	0% { left: 0; opacity: 0.5; }
	1% { left: 0; opacity: 1; }
	22% { left: 0; opacity: 1; }
	24% { left: 0; opacity: 0; }
	25% { left: -100%; opacity: 0; }
	26% { left: -100%; opacity: 1; }
	47% { left: -100%; opacity: 1; }
	49% { left: -100%; opacity: 0; }
	50% { left: -200%; opacity: 0; }
	51% { left: -200%; opacity: 1; }
	72% { left: -200%; opacity: 1; }
	74% { left: -200%; opacity: 0; }
	75% { left: -300%; opacity: 0; }
	76% { left: -300%; opacity: 1; }
	97% { left: -300%; opacity: 1; }
	99% { left: -300%; opacity: 0; }
	100% { left: 0; opacity: 0; }
}
@keyframes slider_2 {
	0% { left: 0; opacity: 0.5; }
	1% { left: 0; opacity: 1; }
	22% { left: 0; opacity: 1; }
	24% { left: 0; opacity: 0; }
	25% { left: -100%; opacity: 0; }
	26% { left: -100%; opacity: 1; }
	47% { left: -100%; opacity: 1; }
	49% { left: -100%; opacity: 0; }
	50% { left: -200%; opacity: 0; }
	51% { left: -200%; opacity: 1; }
	72% { left: -200%; opacity: 1; }
	74% { left: -200%; opacity: 0; }
	75% { left: -300%; opacity: 0; }
	76% { left: -300%; opacity: 1; }
	97% { left: -300%; opacity: 1; }
	99% { left: -300%; opacity: 0; }
	100% { left: 0; opacity: 0; }
}
@keyframes slider_3 {
	0% { left: 0; opacity: 0.5; }
	1% { left: 0; opacity: 1; }
	22% { left: 0; opacity: 1; }
	24% { left: 0; opacity: 0; }
	25% { left: -100%; opacity: 0; }
	26% { left: -100%; opacity: 1; }
	47% { left: -100%; opacity: 1; }
	49% { left: -100%; opacity: 0; }
	50% { left: -200%; opacity: 0; }
	51% { left: -200%; opacity: 1; }
	72% { left: -200%; opacity: 1; }
	74% { left: -200%; opacity: 0; }
	75% { left: -300%; opacity: 0; }
	76% { left: -300%; opacity: 1; }
	97% { left: -300%; opacity: 1; }
	99% { left: -300%; opacity: 0; }
	100% { left: 0; opacity: 0; }
}
@keyframes slider_4 {
	0% { left: 0; opacity: 0.5; }
	1% { left: 0; opacity: 1; }
	22% { left: 0; opacity: 1; }
	24% { left: 0; opacity: 0; }
	25% { left: -100%; opacity: 0; }
	26% { left: -100%; opacity: 1; }
	47% { left: -100%; opacity: 1; }
	49% { left: -100%; opacity: 0; }
	50% { left: -200%; opacity: 0; }
	51% { left: -200%; opacity: 1; }
	72% { left: -200%; opacity: 1; }
	74% { left: -200%; opacity: 0; }
	75% { left: -300%; opacity: 0; }
	76% { left: -300%; opacity: 1; }
	97% { left: -300%; opacity: 1; }
	99% { left: -300%; opacity: 0; }
	100% { left: 0; opacity: 0; }
}

/* ----------------------------------------------------------------------------
  専用Component：緊急対応 A、A'、B、C対応
---------------------------------------------------------------------------- */
.emergency {
    margin: 24px 4% 32px;
    padding: 16px;
    background: #f0f2f5;
}
.logo--emergency img {
    width: 50px;
}
.ttl--emergency {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
}

/*  記事詳細  */
.emergency__article {
    margin-bottom: 48px;
}

/* ----------------------------------------------------------------------------
  その他：専用Component・専用スタイル
---------------------------------------------------------------------------- */
/*  主要プロジェクト
----------------------------------------------------------------------- */
/*  ヘッダー  */
.area--pjhd {
    display: flex;
    flex-flow: row wrap;
    margin: 24px -2% 0;
}
.pjhd__img {
    flex: 0 1 96%;
    margin: 0 2%;
}
.pjhd__txt {
    flex: 0 1 96%;
    margin: 16px 2% 0;
}
/*  データシート  */
.ul--datasheet > li > span {
    display: block;
}

/*  ソーシャルメディア一覧・SNSシェアボタン
----------------------------------------------------------------------- */
/*  ソーシャルメディア一覧  */
.snslist {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}
.snslist__img {
    flex: 0 0 1.6em;
    margin: auto 0;
    width: 1.6em;
    height: 1.6em;
}
.snslist__txt {
    flex: 1 1 auto;
    margin: auto 2%;
    line-height: 1.4;
    font-size: 1.4rem;
}
/*  SNSシェアボタン  */
.snsshare {
    display: flex;
    flex-flow: row nowrap;
    margin: 24px 0;
}
.snsshare__icon {
    flex: 0 1 48px;
    margin: 0 2%;
}
.snsshare__txt {
    flex: 0 1 auto;
    align-self: center;
    margin: 0 2% 0 0;
    font-size: 1.4rem;
}
.snsshare__btn {
    flex: 0 1 34px;
    margin: 0 1.5%;
}
/*  トップページ：SNS一覧  */
.sns_none {
    background: #fff;
}
.sns_none > .sub {
    flex-flow: row wrap;
}
.sns_none .sns_none--img {
    padding: 8px 0;
}

/*  お問い合わせフォーム
----------------------------------------------------------------------- */
.cform {
    display: flex;
    flex-flow: column wrap;
    margin-top: 16px;
}
.cform__ttl {
    margin: 0;
    padding: 4px 6px;
    background: #f0f2f5;
}
.cform__item {
    margin: 0;
    padding: 4px 6px;
}
.required {
    margin-right: 8px;
    padding: 0 6px 2px;
    color: rgba(255,255,255,0.9);
    background: #c8283c;
    border-radius: 2px;
}
.required::after {
    content: "必須";
    vertical-align: text-top;
    font-size: 1.1rem;
}
.required--en::after {
    content: "Required";
    font-size: 1.2rem;
}

.input__txt,
.input__txtarea {
    -webkit-appearance : none;
    padding: 4px 6px;
    width: 100%;
    font-size: 1.6rem;
    border: 1px solid #ddd;
    box-shadow:0 0 3px 0 #e8eaeb inset;
}
.input__txt {
    min-height: 2em;
}
.input__txtarea {
    min-height: 8em;
}
.input__txt:focus,
.input__txtarea:focus {
    border: 1px solid #3c8cc8;
    box-shadow:0 0 3px 0 #e6faff inset;
}
.input__select {
    min-height: 2em;
    border: 1px solid #ddd;
}
.input__checkbox {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.input__checkbox input {
    margin-right: 8px;
}
.input__submit {
    -webkit-appearance : none;
    padding: 8px;
    width: 100%;
    text-align: center;
    line-height: 1.2;
    color: rgba(255,255,255,0.9);
    background: #0064be;
    border: 1px solid #0064be;
    border-radius: 4px;
}
.input__submit--back {
    color: rgba(0,0,0,0.8);
    background: #ddd;
    border: 1px solid #ddd;
}

.postalcode {
    width: 10em;
}
.error_message {
    margin-top: 24px;
    padding: 8px 16px;
    background: #ffc6c6;
}
.error_txt {
    display: block;
    font-size: 0.82em;
    color: #c8283c;
}
.cform__notice {
    font-size: 0.82em;
    color: rgba(0,0,0,0.6);
}

/* クリッカブルマップ
----------------------------------------------------------------------- */
.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);
}

/*  都市をつくる7つの手法  */
.method--1 { top: 17%; left: 3%; background: rgba(255,255,255,0.9); }
.method--2 { top: 72%; left: 56%; background: rgba(255,255,255,0.9); }
.method--3 { top: 28%; left: 52%; background: rgba(255,255,255,0.9); }
.method--4 { top: 37%; left: 7%; background: rgba(255,255,255,0.9); }
.method--5 { top: 45%; left: 70%; background: rgba(255,255,255,0.9); }
.method--6 { top: 63%; left: 22%; background: rgba(255,255,255,0.9); }
.method--7 { top: 50%; left: 17%; background: rgba(255,255,255,0.9); }

/*  都市づくりのコミュニケーション 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%; }

/* ----------------------------------------------------------------------------
  他部署サイト：body--environment、body--urbanlab、body--parking
---------------------------------------------------------------------------- */
/*  ヘッダー（共通）
----------------------------------------------------------------------- */
.body--environment > .header,
.body--urbanlab > .header,
.body--parking > .header {
    position: relative;
    z-index: 200;
}

.header--rs {
    position: sticky;
    top: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 5px 4% 4px;
    z-index: 100;
}
.rsttl {
    flex: 0 0 80%;
}
.rsttl__link {
    display: inline-block;
    line-height: 1.2;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.9);
}
.header--rs .navbtn:checked ~ .nav {
    padding: 60px 4% 8%;
}

/*  トップページヒーロー画像・スライド（共通）
----------------------------------------------------------------------- */
.hero {
    overflow: hidden;
}
.hero_slider {
    position: relative;
    animation: hero_slider 21s ease-in-out infinite;
    display: flex;
    flex-flow: row nowrap;
    cursor: pointer;
}
.hero__slide {
    flex: 0 0 100%;
}
.hero__img {
    position: relative;
}
.hero__caption {
    padding: 4px 12px 6px;
    min-height: 46px;
    line-height: 1.2;
    color: rgba(255,255,255,0.9);
    background: #333;
}

@keyframes hero_slider {
    0% { left: 0; opacity: 0.1; }
    1% { left: 0; opacity: 1; }
    30% { left: 0; opacity: 1; }
    33% { left: 0; opacity: 0; }
    34% { left: -100%; opacity:0.1; }
    37% { left: -100%; opacity: 1; }
    63% { left: -100%; opacity: 1; }
    66% { left: -100%; opacity: 0; }
    67% { left: -200%; opacity: 0.1; }
    70% { left: -200%; opacity: 1; }
    96% { left: -200%; opacity: 1; }
    99% { left: -200%; opacity: 0; }
    100% { left: 0; opacity: 0; }
}

/*  環境サイト：environment
----------------------------------------------------------------------- */
.header--rs.header--environment {
    background: #1d492c;
}
.header--environment .navbtn:checked ~ .nav {
    background: #1d492c;
}
.body--environment .wrap__sub {
    background: #e6f5eb;
}

/*  メディア企画サイト：urbanlab
----------------------------------------------------------------------- */
.header--rs.header--urbanlab {
    background: #555;
}
.header--urbanlab .navbtn:checked ~ .nav {
    background: #555;
}
.body--urbanlab .wrap__sub {
    background: #777;
}

/*  駐車場サイト：parking
----------------------------------------------------------------------- */
.header--rs.header--parking {
    background: #534537;
}
.header--parking .navbtn:checked ~ .nav {
    background: #534537;
}
.body--parking .wrap__sub {
    background: #f0f0e6;
}

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

/*  #付きリンクのスマホでのズレ解消  */
.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;
}

/* ----------------------------------------------------------------------------
  汎用スタイル：テーブル
---------------------------------------------------------------------------- */
/*  SP縦方向  */
.table--vertical th,
.table--vertical td {
    display: table-cell;
    padding: 8px;
    width: auto;
}
.table--vertical .width30--tabpc {
    width: 30%;
}

/* ----------------------------------------------------------------------------
  専用Component：リリース・MORI NOW記事
---------------------------------------------------------------------------- */
/*  画像配置  */
.imgs {
    flex-flow: row nowrap;
}

/* ----------------------------------------------------------------------------
  その他：専用Component・専用スタイル
---------------------------------------------------------------------------- */
/*  主要プロジェクト
----------------------------------------------------------------------- */
/*  ヘッダー  */
.area--pjhd {
    flex-flow: row nowrap;
}
.pjhd__img {
    flex: 0 0 40%;
}
.pjhd__txt {
    flex: 1 1 56%;
    margin-top: 0;
}


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


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

.body {
    background: #ddd;
}

/* ----------------------------------------------------------------------------
  表示・非表示
---------------------------------------------------------------------------- */
.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 {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 8px 32px 0;
    max-width: 1024px;  /* internal_width 960px */
    background: linear-gradient(to bottom, #fff 60%, #e8eaeb);
    border-bottom: none;
}
.header::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: url("/common/img/bg_header.gif") repeat-x #666;
}
.logo {
    position: absolute;
    top: 8px;
    left: 32px;
}
.logo img {
    width: 64px;
}

/*  ナビゲーション
----------------------------------------------------------------------- */
.nav {
    display: flex;
    flex-flow: row wrap;
}

/*  言語選択  */
.language_list {
    flex:0 1 auto;
    margin: 0 16px 0 auto;
}
.language_list > li {
    margin: 0;
    border-left: 1px solid #e8eaeb;
}
.language {
    padding: 0 8px;
    min-height: 0;
    font-size: 1.1rem;
    color: rgba(0,0,0,0.8);
    background: #fff;
    border-radius: 0;
}
.language:hover {
    background: #e6faff;
}

/*  サイト内検索  */
.search_area {
    flex: 0 0 30%;
    margin-top: 0;
}
.search {
    min-height: 0;
    font-size: 1.1rem;
    border: 1px solid #ddd;
}
.search__box {
    padding: 4px 8px 2px;
    font-size: 1.1rem;
}
.search__btn {
    font-size: 1.4rem;
}
.search__btn:hover {
    background: #e6faff;
}

/*  グローバルナビ  */
.gnav_list {
    flex: 0 0 100%;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 24px 0 0;
}
.gnav {
    flex: 1 1 20%;
    display: block;
    margin-top: 0;
    border: none;
}
.gmenu {
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 6px 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.4;
    color: rgba(0,0,0,0.8);
}
.gmenu:hover  {
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ddd);
}

/*  ローカルナビ  */
.gnav:hover .gmenu {
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ddd);
}
.gnav:hover .localnav_list {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    padding: 16px 24px;
    width: 960px;
    min-height: 200px;
    background: rgba(204,204,204,0.9);
    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 {
    margin: 0 auto;
    padding: 8px 32px;
    max-width: 1024px;  /* internal_width 960px */
}

/*  Back to the top  */
.backtop {
    position: fixed;
    right: calc(50% - 568px);
    bottom: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 #777;
    z-index: 10;
}
.backtop:hover {
    box-shadow: 2px 2px 4px 2px #777;
}
.backtop__btn {
    width: 40px;
    height: 40px;
    min-height: 0;
}

/*  フッターメニュー  */
.fmenu_list {
    flex-flow: row nowrap;
    justify-content: flex-end;
    margin: 0;
}
.fmenu_list > li {
    flex: 0 1 auto;
    margin-top: 0;
    padding: 0 16px;
}

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

/* ----------------------------------------------------------------------------
  コンテンツエリアのレイアウト
---------------------------------------------------------------------------- */
.contents {
    margin: 0 auto;
    padding: 8px 32px 24px;
    min-height: calc(100vh - 160px);
    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: 8px 27px;
    border: 1px solid #ddd;
}
.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: 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;
}

/* ----------------------------------------------------------------------------
  汎用Component：パンくず（PCのみ）
---------------------------------------------------------------------------- */
.breadcrumb {
    margin: 0 0 8px;
    width: 100%;
}
.breadcrumb > li {
    display:inline;
    font-size: 1.2rem;
    line-height: 1;
}
.breadcrumb > li::after {
    content: "\e90b";
    padding: 0 4px;
    font-size:1rem;
    color:  rgba(0,0,0,0.3);
}
.breadcrumb > li:last-child::after {
    content: none;
}
.breadcrumb > li a {
    display:inline;
    color: #0064be;
}
.breadcrumb > li a:hover {
    color: #0388ff;
}

/* リリースタイトルなどのbrを削除 */
.breadcrumb br {
 display: none;
}

/* ----------------------------------------------------------------------------
  パーツ：カード型ボタン
---------------------------------------------------------------------------- */
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%;
}

/* ----------------------------------------------------------------------------
  汎用スタイル：テーブル
---------------------------------------------------------------------------- */
/*  SP縦方向  */
.table--vertical th,
.table--vertical td {
    display: table-cell;
    padding: 8px;
    width: auto;
}
.table--vertical .width30--tabpc {
    width: 30%;
}

/*  SP横スクロール  */
.table--scroll {
    width: 100%;
    overflow-x: visible;
    white-space: normal;
}

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

/* ----------------------------------------------------------------------------
  汎用スタイル：グラフ
---------------------------------------------------------------------------- */
/*  グラフの配置：sp 横1→pc 横2  */
.graphs .graph {
    flex: 1 1 42%;
}

/* ----------------------------------------------------------------------------
  専用Component：MORI NOW（トップページ）
---------------------------------------------------------------------------- */
.morinow {
    position: relative;
    margin: 8px auto 32px;
    border: 8px solid #333;
}

/*  スライドエリア
----------------------------------------------------------------------- */
.slide__img {
    margin-right: 35%;
    border: 4px solid #555;
}

/*  各スライド連動の■  */
.slide::after {
    width: 35%;
    height: 87px;
    background: #555;
    border-radius: 0;
}
.slide--1::after { top: 0; right: 0; }
.slide--2::after { top: 87px; right: -100%; }
.slide--3::after { top: 174px; right: -200%; }
.slide--4::after { top: 261px; right: -300%; }

/*  スライドコントロール（PC）
----------------------------------------------------------------------- */
.slide_control--pc {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
    width: 35%;
    height: 100%;
}
.morinowlist {
    flex: 0 0 auto;
    display: flex;
    flex-flow: row nowrap;
    padding: 16px 10px;
    cursor: pointer;
}
.morinowlist__img {
    flex: 0 0 24%;
    height: 100%;
}
.morinowlist__ttl {
    flex: 1 1 76%;
    margin-top: 0;
    padding-left: 10px;
    height: 55px;
    font-size: 1.4rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.9);
    overflow: hidden;
}
.morinowlist__new {
    margin-right: 8px;
    padding: 0.2em 8px;
    font-size: 1.2rem;
    background: #0064be;
}
.morinowlist--link {
    margin: auto 0 8px;
}
.morinow__link {
    font-size: 1.1rem;
    line-height: 1;
    text-align: right;
    color: rgba(255,255,255,0.9);
}

/*  コントロールクリック時の動き（jsでjs_control00に#control00を挿入）  */
#control01:hover ~ .slider {
	animation: slider_1 20s ease-in-out infinite;
	animation-delay: 0s;
}
#control02:hover ~ .slider {
	animation: slider_2 20s ease-in-out infinite;
	animation-delay: -5s;
}
#control03:hover ~ .slider {
	animation: slider_3 20s ease-in-out infinite;
	animation-delay: -10s;
}
#control04:hover ~ .slider {
	animation: slider_4 20s ease-in-out infinite;
	animation-delay: -15s;
}

/* ----------------------------------------------------------------------------
  専用Component：緊急対応 A、A'、B、C対応
---------------------------------------------------------------------------- */
.emergency {
    margin: 24px 0 32px;
    padding: 24px 32px;
}
.logo--emergency img {
    padding-bottom: 12px;
    width: 64px;
}

/*  記事詳細  */
.emergency__article {
    margin: 32px auto 24px;
    padding: 24px 48px 40px;
    border: 1px solid #ddd;
}

/* ----------------------------------------------------------------------------
  その他：専用Component・専用スタイル
---------------------------------------------------------------------------- */
/*  主要プロジェクト
----------------------------------------------------------------------- */
/*  データシート  */
.ul--datasheet  {
    display: table;
}
.ul--datasheet > li {
    display:table-row;
}
.ul--datasheet > li > span {
    display:table-cell;
    padding-left: 1em;
}
.ul--datasheet > li > span:first-child {
    white-space: nowrap;
}

/*  ソーシャルメディア一覧・SNSシェアボタン
----------------------------------------------------------------------- */
/*  トップページSNS・SNSシェアボタン  */
.snsshare__icon {
    flex: 0 1 34px;
    margin: 0 8px;
}
.snsshare__btn {
    flex: 0 1 30px;
    margin: 0 8px;
}

/*  お問い合わせフォーム
----------------------------------------------------------------------- */
.cform_area {
    margin-top: 24px;
    border: 1px solid #ddd;
}
.cform {
    flex-flow: row nowrap;
    margin-top: 0;
    border-top: 1px solid #ddd;
}
.cform_area > .cform:first-child {
    border-top: none;
}
.cform__ttl {
    flex: 0 0 26%;
    padding: 8px;
}
.cform__item {
    flex: 1 1 64%;
    align-self: center;
    padding: 16px;
}

.input__submit:hover {
    opacity: 0.8;
}

.cform__notice {
    display: block;
}

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

/*  トップページ
----------------------------------------------------------------------- */
/*  sub_listの左線なし  */
.wrap--top .sub,
.wrap--top .sub:hover {
    border-left: none;
}

/* サイトマップ
----------------------------------------------------------------------- */
.table--sitemap {
    font-size: 1.4rem;
}

/* ----------------------------------------------------------------------------
  他部署サイト：body--environment、body--urbanlab、body--parking
---------------------------------------------------------------------------- */
/*  ヘッダー（共通）
----------------------------------------------------------------------- */
.header--rs {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 6px 0 0;
    max-width: 1024px;
    border-top: 1px solid #fff;
}
.rsttl {
    margin: 0 32px;
    padding-bottom: 4px;
}
.rsttl__link:hover {
    color: rgba(255,255,255,0.9);
}

.header--rs .gnav_list {
    margin: 0;
    padding: 0 32px;
}
_:lang(x)::-ms-backdrop, .header--rs .gnav_list { max-width: 1024px; } /* IE */
_:-ms-lang(x)::backdrop, .header--rs .gnav_list { max-width: 1024px; } /* IE */

.header--rs .gmenu {
    color: rgba(255,255,255,0.9);
}
.header--rs .gmenu:hover  {
    background: rgba(255,255,255,0.1);
}
.header--rs .gnav:hover .localnav_list {
    top: 100%;
    left: 32px;
    right: 32px;
}

/*  共通ヘッダーのメガメニュー非表示  */
.body--environment .header .gnav:hover .localnav_list,
.body--urbanlab .header .gnav:hover .localnav_list,
.body--parking .header .gnav:hover .localnav_list {
    display: none;
}

/*  トップページヒーロー画像・スライド（共通）
----------------------------------------------------------------------- */
.hero {
    margin-top: 8px;
}
.hero__caption {
    min-height: 0;
}

/*  環境サイト：environment
----------------------------------------------------------------------- */
.header--environment .gnav_list {
    background: #1d492c;
}
.header--environment .gnav:hover .localnav_list {
    background: rgba(29,73,44,0.6);
}
.body--environment {
    background: #e6f5eb;
}
.body--environment .wrap__sub {
    background: #fff;
}

/*  メディア企画サイト：urbanlab
----------------------------------------------------------------------- */
.header--urbanlab .gnav_list {
    background: #555;
}
.header--urbanlab .gnav:hover .localnav_list {
    background: rgba(85,85,85,0.6);
}
.body--urbanlab {
    background: #777;
}
.body--urbanlab .wrap__sub {
    background: #fff;
}

/*  駐車場サイト：parking
----------------------------------------------------------------------- */
.header--parking .gnav_list {
    background: #534537;
}
.body--parking {
    background: #f0ebe6;
}
.body--parking .wrap__sub {
    background: #fff;
}

/* ----------------------------------------------------------------------------
  JavaScriptスタイル
---------------------------------------------------------------------------- */
.js_current {
    background: #e6faff;
}
.gnav .js_current {
    background: -webkit-linear-gradient(to top, rgba(255,255,255,0), #ccf5ff);
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ccf5ff);
}
.gmenu.js_current {
    color: #0064be;
}
.sub_list .js_current {
    border-left: 4px solid #3c8cc8;
}

/*  他部署サイト  */
.header--rs .gnav .js_current {
    background: rgba(255,255,255,0.2);
}
.header--rs .gmenu.js_current {
    color: #fff;
}


}  /* ------------------ @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%; }
.main_frame { border: none;}
.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ここまで ------------------ */


/*  IE10・11対応（メディアクエリ入れ子不可）  */
@media print and (-ms-high-contrast: none), print and (-ms-high-contrast: active) {
    /*  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%; }
}  /* ------------------ IE10・11対応ここまで ------------------ */