@charset "utf-8";
/*=====================================

L2L3共通CSS

=======================================*/
/* clearfix */

.contents-container::after,
.nav-category::after,
.box-general::after,
.box-relation::after,
.position-rss::after,
.rss_container::after,
.box-news-container::after,
.panel-news::after,
.news-group-list::after,
.news-group-list li::after,
.box-col2-l::after,
.box-col2-m::after,
.box-col2-s::after,
.box-col2-img::after{
    content: "";
    display: block;
    clear: both;
}

/*===================
汎用クラス
===================*/
/*--------------------------------------
リンク文字色
--------------------------------------*/

a {
  color: #333;
}
a:link {
  color: #333;
}
a:hover {
  text-decoration: underline;
}
/*--------------------------------------
インデント
--------------------------------------*/

.indnt01 {
    text-indent: -1em;
    padding-left: 1em;
}
/*--------------------------------------
padding
--------------------------------------*/

.pt0 {
    padding-top: 0 !important;
}
/*--------------------------------------
border
--------------------------------------*/

.no-border-b {
    border-bottom: 0 !important;
}
/*--------------------------------------
text-align
--------------------------------------*/

.ta-L {
    text-align: left !important;
}
.ta-R {
    text-align: right !important;
}
.ta-C {
    text-align: center !important;
}


/*===================
ボックス
===================*/
/*--------------------------------------
flexbox共通ボックス
--------------------------------------*/

.box-rspnsv {
    align-content: space-around;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
   overflow:hidden;
}
/*--------------------------------------
汎用ボックス
--------------------------------------*/

.box-general {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto;
    padding: 4% 0 3%;
    text-align: left;
}
/*--------------------------------------
インフォボックス
--------------------------------------*/

.box-info {
    background-color: #eeeeee;
    margin: 3% auto;
    padding: 1.5em;
}
/*--------------------------------------
ボーダーボックス
--------------------------------------*/

.box-border {
    border: #e7e9e9 solid 1px;
    padding: 1.5em;
}
/*--------------------------------------
カラムボックス
--------------------------------------*/
/*---- 1カラム用スタイル ----*/

.box-col1 {
    max-width: 960px;
    margin: 0 auto;
}
.box-col1 .list-news li {
    padding: 3% 6em 3% 0;
}
.box-col1 .category-news {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.box-col1 .position-rss {
    margin-right: 0;
}
/*---- 2カラム用スタイル ----*/

.box-col2 {
    box-sizing: border-box;
    float: left;
    width: 50%;
}
.box-col2:nth-of-type(odd) {
    border-right: #d4d4d4 solid 1px;
    padding: 0 3% 0 0;
}
.box-col2:nth-of-type(2n) {
    padding: 0 0 0 3%;
}
/*2カラム用スタイル（大）*/

.box-col2-l {
    flex-grow:3;
    flex-shrink:0;
    flex-basis:0;
    float:left;
    width:70%;
}
/*2カラム用スタイル（中）*/

.box-col2-m {
    flex-grow:2;
    flex-shrink:0;
    flex-basis:0;
    float:left;
    width:50%;
}
/*2カラム用スタイル（小）*/

.box-col2-s {
    flex-grow:1;
    flex-shrink:0;
    flex-basis:0;
    float:left;
    width:30%;
}
/*2カラム用画像*/

.box-col2-img{
    float:left;}

.box-col2-img img {
    max-width: 100%;
}
/*===================
見出し
===================*/
/*--------------------------------------
カテゴリ見出し
--------------------------------------*/

.hdg-category-container {
    background-color: #e6e6e7;
    width: 100%;
}
.hdg-category-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.2% 0;
    position: relative;
}
.hdg-category {
    color: #010101;
    font-size: 180%;
    border-bottom: none;
    letter-spacing: 5px;
    text-align: left;
}
.hdg-category span {
    color: #ababac;
    display: inline-block;
    font-size: 65%;
    font-weight: normal;
    padding-left: 2em;
    position: relative;
    vertical-align: middle;
}
.hdg-category span::before {
    border-bottom: 1px solid #ababac;
    content: "";
    display: block;
    height: 1px;
    left: 5px;
    position: absolute;
    top: 43%;
    transform: rotate(-50deg);
    width: 18px;
    -webkit-transform: rotate(-50deg);
}
/*---- menuボタン ----*/

.nav-category-toggle {
    background-color: #000;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 65%;
    height: 44px;
    padding: 9px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 44px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.nav-category-toggle div {
    position: relative;
}
.nav-category-toggle span:nth-child(1) {
    top: 1px;
}
.nav-category-toggle span:nth-child(2) {
    top: 9px;
}
.nav-category-toggle span:nth-child(3) {
    top: 16px;
}
.nav-category-toggle span:nth-child(4) {
    top: 18px;
}
.nav-category-toggle span {
    background: #fff none repeat scroll 0 0;
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: all 0.35s ease-in-out 0s;
    width: 100%;
    -webkit-transition: all 0.35s ease-in-out 0s;
}
.nav-category-toggle span.menu-type {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    text-align: center;
}
.nav-category-toggle.cross span {
    height: 2px;
}
.nav-category-toggle.cross span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
    -webkit-transform: translateY(5px) rotate(45deg);
}
.nav-category-toggle.cross span:nth-child(2) {
    left: 50%;
    opacity: 0;
}
.nav-category-toggle.cross span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    -webkit-transform: translateY(-10px) rotate(-45deg);
}
/*--------------------------------------
メインビジュアル見出し
--------------------------------------*/

.hdg-mainvisual {
    display: inline-block;
    font-size: 320%;
    font-weight: normal;
    line-height: 1.3em;
    margin: 8% 0 2%;
}
.hdg-mainvisual img {
    max-width: 100%;
}
/*--------------------------------------
汎用見出し(太字)
--------------------------------------*/

.hdg-general {
    color: #010101;
    font-size: 157%;
    font-weight: bold;
    letter-spacing: 3px;
    margin: 0 0 1.5em;
}
/*--------------------------------------
汎用見出し(細字)
--------------------------------------*/

.hdg-general-fw-n {
    color: #010101;
    font-size: 157%;
    font-weight: normal;
    letter-spacing: 3px;
    margin: 0 0 1.5em;
}
/*--------------------------------------
汎用見出し(背景グレー)
--------------------------------------*/

.hdg-gray {
    background-color: #dfe2e2;
    color: #010101;
    font-size: 125%;
    letter-spacing: 3px;
    padding: 0.5em 1.5em;
    margin: 0 0 1.5em;
}
/*--------------------------------------
重要なお知らせ見出し
--------------------------------------*/

.hdg-importantnot-notice {
    font-size: 157%;
    margin: 0 0 1.5em;
    padding: 0 0 2%;
    text-align: center;
}
/*--------------------------------------
関連リンク見出し
--------------------------------------*/

.hdg-relation {
    font-size: 157%;
    font-weight: normal;
    letter-spacing: 7px;
    padding: 0 0 2%;
    text-align: center;
}
/*--------------------------------------
ニュース見出し
--------------------------------------*/

.hdg-news {
    font-size: 157%;
    letter-spacing: 3px;
    margin: 0 0 1.5em;
    padding: 0 0 1em;
    text-align: center;
}
/*--------------------------------------
L3用大見出し
--------------------------------------*/

.hdg-l3 {
    display: inline-block;
    font-size: 180%;
    margin-bottom: 2em;
    padding: 0 0 1.5em;
    position: relative;
}
.hdg-l3::after {
    background-color: #e70014;
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 3vw;
    -webkit-transform: translateX(-50%);
}
/*--------------------------------------
矢印付き見出し
--------------------------------------*/

.hdg-arrow {
    display: inline-block;
    font-size: 120%;
    padding-left: 1em;
    position: relative;
}
.hdg-arrow::before {
    border-color: transparent #e70014 #e70014 transparent;
    border-style: solid;
    border-width: 4px;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    top: 45%;
    transform: rotate(-45deg) translateY(-50%);
    width: 0;
    -webkit-transform: rotate(-45deg) translateY(-50%);
}
/*===================
リンク矢印
===================*/
/*--------------------------------------
ノーマル矢印
--------------------------------------*/

.link-arrow-common-r,
.link-arrow-common-l,
.link-arrow-triangle,
.link-arrow-dotted{
    display: inline-block;
    position: relative;
}
.link-arrow-common-l,
.link-arrow-triangle {
    padding-left: 1em;
}
.link-arrow-dotted {
    padding-left: 2em;
}
.link-arrow-common-r::after,
.link-arrow-common-l::after {
    border-color: transparent #e70014 #e70014 transparent;
    border-width: 0 1px 1px 0;
    border-style: none solid solid none;
    content: '';
    display: block;
    height: 9px;
    position: absolute;
    right: 5%;
    top: 50%;
    width: 9px;
    transform: rotate(-45deg) translateY(-50%);
    -webkit-transform: rotate(-45deg) translateY(-50%);
}
.link-arrow-common-l::after {
    left: 0;
    right: auto;
}
/*--------------------------------------
リンク矢印（三角）
--------------------------------------*/

.link-arrow-triangle::after {
    border-color: transparent #c7c7c7 #c7c7c7 transparent;
    border-style: solid;
    border-width: 3px;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
    width: 0;
    -webkit-transform: rotate(-45deg) translateY(-50%);
}
/*--------------------------------------
リンク矢印（ドット）
--------------------------------------*/

.link-arrow-dotted::before {
    color: #000;
    content: "…";
    display: block;
    font-size: 80%;
    font-weight: normal;
    height: 0;
    left: 0;
    position: absolute;
    top: 0.1em;
    width: 0;
}
.link-arrow-dotted::after {
    border-color: transparent #000 #000 transparent;
    border-style: solid;
    border-width: 3px;
    content: "";
    display: block;
    height: 0;
    left: 0.7em;
    position: absolute;
    top: 0.5em;
    transform: rotate(-45deg);
    width: 0;
    -webkit-transform: rotate(-45deg);
}
/*===================
ボタン
===================*/
/*--------------------------------------
ノーマルボタン（背景黒）
--------------------------------------*/

.btn-common {
    background-color: #393939;
    color: #fff;
    display: inline-block;
    padding: 0.7em 2em;
    position: relative;
    text-align: center;
}
.btn-common[target="_blank"] {
    background-color: #393939;
    padding: 0.7em 2em;
}

.btn-common:hover {
    background-color: #4b4b4b;
}
.btn-common::after {
    border-color: transparent #e70014 #e70014 transparent;
    border-width: 0 1px 1px 0;
    border-style: none solid solid none;
    content: '';
    display: block;
    height: 8px;
    position: absolute;
    right: 5%;
    top: 50%;
    width: 8px;
    transform: rotate(-45deg) translateY(-50%);
    -webkit-transform: rotate(-45deg) translateY(-50%);
}
a.btn-common {
    color: #fff;
}
/*--------------------------------------
RSSボタン
--------------------------------------*/

.btn-rss {
    border: 1px solid #d4d4d4;
    display: inline-block;
    font-weight: bold;
    padding: 0.2em 1.5em 0.2em 2em;
    position: relative;
}
.btn-rss:hover {
    background-color: #d4d4d4;
}
.btn-rss::before {
    background-image: url("/share/images/icon_rss.svg");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 12px;
    left: 0.7em;
    position: absolute;
    top: 45%;
    transform: translateY(-45%);
    width: 12px;
    -webkit-transform: translateY(-45%);
}
/*--------------------------------------
メインビジュアル用ボタン
--------------------------------------*/

.btn-mainvisual {
    display: block;
    width: 15vw;
}
/*--------------------------------------
ニュース一覧用ボタン
--------------------------------------*/

.btn-newslist {
    width: 10vw;
}
.btn-newslist::after {
    border-color: transparent #fff #fff transparent;
}
/*--------------------------------------
関連リンク用ボタン
--------------------------------------*/

.more-relation {
    background-color: #393939;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 0.7em 2em;
    width: 12vw;
}
.more-relation:hover {
    background-color: #4b4b4b;
}
/*--------------------------------------
もっと知りたい方ボタン
--------------------------------------*/

.more-article {
    background-color: #393939;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 1em 2em;
    position: relative;
    width: 20vw;
}
.more-article:hover {
    background-color: #4b4b4b;
}
.more-article::after {
    border-color: transparent #fff #fff transparent;
    border-width: 0 1px 1px 0;
    border-style: none solid solid none;
    content: '';
    display: block;
    height: 8px;
    position: absolute;
    right: 7%;
    top: 45%;
    width: 8px;
    transform: rotate(45deg) translateY(-50%);
    -webkit-transform: rotate(45deg) translateY(-50%);
}

/*----------------------------------------------------------------------------
リンクボタン（2カラム）.box-rspnsvと併用
----------------------------------------------------------------------------*/

.box-link{
    overflow:hidden;}

.box-link li {
    background-color: #fff;
    border: 1px solid #cdcfcf;
    box-sizing: border-box;
    flex:0 1 auto;
    flex-basis: calc(50% - 20px);
    float: left;
    margin-bottom: 20px;
    width: 50%;
}
.box-link a {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 1em 1.5em;
    position: relative;
    width: 100%;
}
.box-link a::after {
    right: 10px;
    height: 6px;
    width: 6px;
}
.box-link a:hover {
    background-color: #f7f8f8;
}
/*----------------------------------------------------------------------------
リンクボタン（1カラム）.box-rspnsvと併用
----------------------------------------------------------------------------*/

.box-link-col1 li {
    flex:0 1 auto;
    flex-basis: 100%;
    width: 100%;
}
/*----------------------------------------------------------------------------
リンクボタン（3カラム）.box-rspnsvと併用
----------------------------------------------------------------------------*/

.box-link-col3 li {
    flex:0 1 auto;
    flex-basis: calc(33.33% - 5px);
    width: 33%;
}
/*----------------------------------------------------------------------------
リンクボタン（タイトル有・2カラム）.box-rspnsvと併用
----------------------------------------------------------------------------*/

.box-link-02{
    overflow:hidden;}

.box-link-02 li {
    background-color: #fff;
    border: #909090 solid 1px;
    box-sizing: border-box;
    flex:0 1 auto;
    flex-basis: calc(50% - 20px);
    float: left;
    margin-bottom: 20px;
    width: 50%;
}
.box-link-02 a {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    position: relative;
    width: 100%;
}
.box-link-02 a::after,
.cont-box-link.link-arrow-common-r::after {
    right: 10px;
    height: 6px;
    width: 6px;
}
.ttl-box-link-02 {
    align-items: center;
    background-color: #909090;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    float:left;
    flex: 2;
    height: 100%;
    justify-content: center;
    padding: 1em 0.5em;
    text-align: center;
}
.cont-box-link-02 {
    box-sizing: border-box;
    flex: 3;
    padding: 1em 1.5em 1em 1em;
    text-align: left;
    width:100%;
}
/*---- リンク部分を縦並びにする ----*/
.box-link-length{
    display:flex;
}
.box-link-length-area > a:first-of-type{
    border-bottom:#909090 solid 1px;
}
.box-link-length a{
    height:auto;
    padding:1em 1.5em 1em 1em!important;
}
.box-link-length .ttl-box-link-02{
    min-width:4em;
}

/*--------------------------------------------
リンクボタン（タイトル有・背景グレー）
----------------------------------------------*/
.box-link-03{
    overflow:hidden;}

.box-link-03 a {
    align-items: center;
    background-color: #e5e5e5;
    display: flex;
    position: relative;
}
.box-contents .box-link-03 a {
    display: flex;
}
.ttl-box-link-03 {
    background-color: #828282;
    color: #fff;
    flex: 1;
    float:left;
    padding: 1em 1.5em;
    text-align: center;
}
.cont-box-link-03 {
    flex: 2;
    text-align: center;
    width: 100%;
}
.box-link-03 a::after {
    right: 10px;
    height: 6px;
    width: 6px;
}

/*----------------------------------------------------------------------------
リンクボタン（タイトル有）
----------------------------------------------------------------------------*/
.box-link-04{
    overflow:hidden;}

.box-link-04 a{
    display: flex;
    border: #909090 solid 1px;
}
.ttl-box-link-04 {
    align-items: center;
    background-color: #909090;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    float:left;
    flex: 2;
    justify-content: center;
    padding: 1em 0.5em;
    text-align: center;
}
.cont-box-link-04 {
    box-sizing: border-box;
    flex: 3;
    padding: 1em 1.5em 1em 1em;
    text-align: left;
    width:100%;
}

/*--------------------------------------
リンクボタンの装飾
--------------------------------------*/
/*---- ボタンの色変更 ----*/

.box-link-c-g li {
    background-color: #e5e5e5;
    border: none;
}
/*---- リンクを縦並びにする ----*/

.link-column {
    flex-direction: column;
    align-content: flex-start;
}
.link-column li {
    min-height:75px;
    min-width: 340px;
}
/*---- PDFアイコン ----*/

.box-link a[href$=".pdf"],
.box-link-02 a[href$=".pdf"],
.box-link-03 a[href$=".pdf"] {
    background-image: none;
    padding: 0;
}
.box-link a[href$=".pdf"]::before,
.box-link-02 a[href$=".pdf"]::before,
.box-link-03 a[href$=".pdf"]::before {
    content: url("../images/icon_pdf_s.gif");
    right: 5px;
    position: absolute;
    top: 5px;
    width: 12px;
    z-index: 1000;
}
/*---- 外部リンクアイコン ----*/
.box-link a.a_external i.icon-external,
.box-link-02 a.a_external i.icon-external,
.box-link-03 a.a_external i.icon-external,
.box-link-04 a.a_external i.icon-external {
    display: none;
}
.blink .box-link-03 a[target="_blank"]::before {
    top: 0;
}


/*===================
その他パーツ
===================*/
/*--------------------------------------
パンくず
--------------------------------------*/

#breadcrumb {
    background-color: #000;
}
#breadcrumb div {
    color: #d1d1d1;
    padding: 1% 0;
    max-width: 960px;
    width: auto;
    margin:0 auto;
}
/*#breadcrumb div a {
     color: #d1d1d1; 
}*/
#breadcrumb:has(+ footer) a {
    color: #d1d1d1;
}
/*===================
レイアウト
===================*/
/*--------------------------------------
メインビジュアル
--------------------------------------*/

.mainvisual-container {
    height: 400px;
    position: relative;
}
/*---- スライドありメインビジュアル ----*/

.list-mainvisual li.slick-slide {
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    position: relative;
    width: 100%;
}
.list-mainvisual li.slick-slide div.mainvisual-contents {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}
/* slickカスタマイズ */

.mainvisual-container .slick-slider {
    width: 100%;
}
.mainvisual-container .slick-dots {
    bottom: 15px;
}
.mainvisual-container .slick-dots li {
    width: 12px;
    height: 12px;
}
.mainvisual-container .slick-dots li button::before {
    background: #fd8f98 none repeat scroll 0 0;
    height: 12px;
    width: 12px;
}
.mainvisual-container .slick-dots li button {
    height: 12px;
    width: 12px;
}
.mainvisual-container .slick-dots li.slick-active button::before {
    background: #e70014 none repeat scroll 0 0;
}
.mainvisual-container .slick-prev,
.mainvisual-container .slick-next {
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
}
.mainvisual-container .slick-prev,
.mainvisual-container .slick-next {
    color: transparent;
    background-image: none;
    position: absolute;
}
.mainvisual-container .slick-prev {
    left: 5px;
}
.mainvisual-container .slick-next {
    right: 5px;
}
.main-arrow {
    height: 100%;
    position: relative;
    width: 100%;
}
.main-arrow::before {
    content: '';
    display: block;
    height: 30px;
    position: absolute;
    top: 50%;
    width: 30px;
    z-index: 10;
    transform: rotate(-45deg) translateY(-50%);
    -webkit-transform: rotate(-45deg) translateY(-50%);
}
.main-arrow._prev::before {
    border-color: #e70014 transparent transparent #e70014;
    border-width: 1px 0 0 1px;
    border-style: solid none none solid;
    left: 20px;
}
.main-arrow._next::before {
    border-color: transparent #e70014 #e70014 transparent;
    border-width: 0 1px 1px 0;
    border-style: none solid solid none;
    right: 0;
}
/*---- リード文 ----*/

.readtxt-mainvisual {
    font-size: 130%;
    font-weight: bold;
    line-height: 2em;
    margin-bottom: 3%;
}
/*---- スライドなしメインビジュアル ----*/

.list-mainvisual-l3 li {
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    position: relative;
    width: 100%;
}

/*全体をリンクにする場合*/
a.list-mainvisual-href{
    display:inline-block;
    height:100%;
    width:100%;}

/*---- 文字色変更 ----*/

.list-mainvisual .txt-color-w {
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
/*--------------------------------------
コンテンツ枠
--------------------------------------*/

.contents-container {
    padding: 4% 0 3%;
}
.contents-inner {
    border-bottom: #dbdbdb solid 1px;
    margin: 0 auto;
    max-width: 960px;
    padding: 4% 0 3%;
}
/*--------------------------------------
カテゴリ用コンテンツ
--------------------------------------*/

.box-contents{
    overflow:hidden;}

.box-contents li {
    flex:0 1 auto;
    flex-basis: calc(50% - 20px);
    float: left;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    width: 50%;
}
.box-contents li a {
    display: block;
    position: relative;
    width: 100%;
}
.box-contents li img {
    width: 100%;
    vertical-align: bottom;
}
/*---- キャプション ----*/

.caption-contents {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 115%;
    font-weight: bold;
    left: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}
.caption-contents-inner {
    padding: 0.5em 1.5em 0.5em 1em;
}
.caption-contents-inner.link-arrow-common-r {
    display: block;
}
.caption-contents-inner.link-arrow-common-r::after {
    border-color: transparent #ffffff #ffffff transparent;
    right: 2%;
}
.caption-contents a {
    color: #fff;
    margin-bottom: 0.2em;
}
/*キャプション部分にリンクが複数ある場合*/

.caption-contents .link-plural.link-arrow-common-r {
    display: block;
}
.caption-contents .link-plural.link-arrow-common-r::after {
    border-color: transparent #ffffff #ffffff transparent;
    right: -1em;
    ;
}
.caption-contents .link-arrow-dotted::before {
    color: #fff;
}
.caption-contents .link-arrow-dotted::after {
    border-color: transparent #fff #fff transparent;
}
/*---- 隠しコンテンツ ----*/

.article-hide-container .hdg-general-fw-n {
    padding-top: 5%;
}
/*隠しコンテンツの表示・非表示*/

.article-hide-container {
    overflow: hidden;
    width:100%;
    max-height: 0;
    transition: max-height 0.35s ease 0s;
    -webkit-transition: max-height 0.35s ease 0s;
}
.article-hide-container.article-open {
    max-height: 1000vh;
}
/*--------------------------------------
重要なお知らせ
--------------------------------------*/

.important-notice-container {
    padding: 0 0 3%;
    width: 100%;
}
.important-notice-inner {
    border-top: #dbdbdb solid 1px;
    margin: 0 auto;
    max-width: 960px;
    padding: 4% 0 2%;
}
.list-important-notice-container {
    border: #e7e9e9 solid 1px;
    padding: 0 1.5em;
}
.list-important-notice li {
    border-bottom: #bfcbcb dotted 1px;
    text-align: left;
}
.list-important-notice li:last-child {
    border-bottom: none;
}
.list-important-notice li a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 2em 1.5em 2em 0;
}
.list-important-notice .link-arrow-common-r::after {
    border-color: transparent #000 #000 transparent;
    right: 0;
}
/*--------------------------------------
関連情報
--------------------------------------*/

.relation-container {
    background-color: #e6e4e4;
    padding: 2.5% 0 2%;
    width: 100%;
}
.box-relation {
    justify-content: center;
}
.box-relation li {
    background-color: #e6e4e4;
    flex:0 1 auto;
    flex-basis: 23.7%;
    float: left;
    margin: 0 6px 24px 6px;
    background-color: #fff;
    width: 23.7%;
}
.box-relation li img {
    width: 100%;
    vertical-align: bottom;
}
.ttl-relation {
    box-sizing: border-box;
    display: table;
    font-size: 95%;
    font-weight: bold;
    padding: 0.5em 1.5em;
    text-align: center;
    width: 100%;
}
.ttl-relation::after {
    height: 9px;
    right: 5%;
    width: 9px;
}
.link-arrow-common-r.ttl-relation > p {
    display: table-cell;
    height: 3em;
    vertical-align: middle;
}

/*---- 4つ以上関連情報がある場合の表示アニメーション ----*/

.box-relation li.hide {
    display: none;
    opacity: 0;
}
.box-relation li.visible {
    opacity: 1;
    animation-duration: 0.5s;
    animation-name: fade-in;
}
@keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
/*--------------------------------------
ニュース
--------------------------------------*/

.news-container {
    background-color: #f7f8f8;
    padding: 3% 0 4%;
    width: 100%;
}
.list-news {
    margin: 0 5% 2%;
}
.box-col1 .list-news {
    margin: 0 0 2%;
}
.list-news li {
    border-bottom: #d4d4d4 dotted 1px;
    padding: 3% 0;
    position: relative;
    text-align: left;
}
.list-news li:last-child {
    border-bottom: none;
}
.date-news {
    margin: 0 0 0.5em;
}

a.ttl-news[href$=".pdf"]{
    display:inline;}

.list-news .link-arrow-common-l::after {
    border-color: transparent #e70014 #e70014 transparent;
    height: 5px;
    top: 0.5em;
    width: 5px;
    transform: rotate(-45deg) translateY(0px);
    -webkit-transform: rotate(-45deg) translateY(0px);
}
.list-news .link-arrow-triangle::after {
    top: 0.5em;
    transform: rotate(-45deg) translateY(0px);
    -webkit-transform: rotate(-45deg) translateY(0px);
}
.category-news {
    border-bottom: #000000 solid 1px;
    font-size: 75%;
    position: absolute;
    right: 0;
    top: 1em;
}
.rss_container {
    margin-bottom: 5%;
}
.position-rss {
    float: right;
    margin-right: 5%;
}
/*--------------------------------------
カテゴリーナビ
--------------------------------------*/

.nav-category-container {
    background-color: #333333;
    width: 100%;
    padding-bottom:2%;
}
a.link-category-top {
    color: #fff;
    font-size: 120%;
    font-weight: bold;
    margin: 2.5% auto 1.5%;
    padding: 0.5% 0 0.2%;
}
.nav-category a {
    align-items: center;
    box-sizing: border-box;
    color: #d1d1d1;
    display: flex;
    font-size: 95%;
    justify-content: center;
    padding: 0.7em 1em;
    width: 100%;
    height: 100%;
}
.nav-category a:hover {
    background-color: #4b4b4b;
}
.link-category-top::after,
.nav-category a::after {
    height: 6px;
    width: 6px;
}
.link-category-top::after {
    right: -1em;
}
.nav-category a::after {
    right: 7px;
}
.nav-category {
    align-content: flex-start;
    align-items: stretch;
    border-left:#4b4b4b solid 1px;
    border-top:#4b4b4b solid 1px;
    justify-content: flex-start;
    box-sizing:content-box;
}
.nav-category li {
    border-bottom:#4b4b4b solid 1px;
    border-right:#4b4b4b solid 1px;
    box-sizing: border-box;
    flex:0 1 auto;
    flex-basis: calc(100% / 3);
    float: left;
    max-width: calc(100% / 3);
    width: 33.33%;
}
/*---- カテゴリーナビ表示・非表示 ----*/
.nav-category-slide {
    position: absolute;
    overflow: hidden;
    width: 100%;
    z-index: 11;
    max-height: 0;
    transition: max-height 0.35s ease 0s;
}
.nav-category-slide.nav-category-open {
    max-height: 150vh;
}
/*--------------------------------------
L3用リード文
--------------------------------------*/

.readtxt {
    font-size: 110%;
    line-height: 2em;
    margin-bottom: 3em;
}

/*===================
カテゴリごとの設定
===================*/
/*--------------------------------------
エネルギー・安定供給
--------------------------------------*/
/*---- L3用見出し ----*/

#energy_supply .hdg-l3::after {
    background-color: #3d9764;
}
/*---- メインビジュアル用ボタン ----*/

#energy_supply .btn-mainvisual::after {
    border-color: transparent #3d9764 #3d9764 transparent;
}
/*---- メインビジュアルのページャー ----*/

#energy_supply .mainvisual-container .slick-dots li button::before {
    background: #79d9a2 none repeat scroll 0 0;
}
#energy_supply .mainvisual-container .slick-dots li.slick-active button::before {
    background: #3d9764 none repeat scroll 0 0;
}
/*---- メインビジュアルの矢印 ----*/

#energy_supply .main-arrow._prev::before {
    border-color: #3d9764 transparent transparent #3d9764;
}
#energy_supply .main-arrow._next::before {
    border-color: transparent #3d9764 #3d9764 transparent;
}
/*---- カテゴリナビ矢印 ----*/

#energy_supply .nav-category-container .link-arrow-common-r::after {
    border-color: transparent #3d9764 #3d9764 transparent;
}

/*---- ニュース矢印 ----*/

#energy_supply .list-news .link-arrow-common-l::after {
    border-color: transparent #3d9764 #3d9764 transparent;
}

/*---- 電気の安全・安定供給用リンクボックス ----*/

#energy_supply .box-link-supply li {
    dispaly: flex;
}
#energy_supply .box-link-supply li span {
    display: inline-block;
    max-width: 45px;
    margin-right: 1em;
}
#energy_supply .box-link-supply li img {
    width: 100%;
    vertical-align: bottom;
}
#energy_supply .box-link-supply a {
    font-size: 115%;
    font-weight: bold;
    justify-content: flex-start;
    padding: 0.7em 1.5em;
    text-align: left;
}
#energy_supply .box-link-supply .link-arrow-common-r::after {
    border-color: transparent #3d9764 #3d9764 transparent;
}
/*--------------------------------------
IR情報
--------------------------------------*/
/*---- L3用見出し ----*/

#ir .hdg-l3::after {
    background-color: #0075c2;
}
/*---- 矢印付き見出し ----*/

#ir .hdg-arrow::before {
    border-color: transparent #0075c2 #0075c2 transparent;
}
/*---- メインビジュアル用ボタン ----*/

#ir .btn-mainvisual::after {
    border-color: transparent #0075c2 #0075c2 transparent;
}
/*---- メインビジュアルのページャー ----*/

#ir .mainvisual-container .slick-dots li button::before {
    background: #77b4dd none repeat scroll 0 0;
}
#ir .mainvisual-container .slick-dots li.slick-active button::before {
    background: #0075c2 none repeat scroll 0 0;
}
/*---- メインビジュアルの矢印 ----*/

#ir .main-arrow._prev::before {
    border-color: #0075c2 transparent transparent #0075c2;
}
#ir .main-arrow._next::before {
    border-color: transparent #0075c2 #0075c2 transparent;
}
/*---- カテゴリナビ矢印 ----*/

#ir .nav-category-container .link-arrow-common-r::after {
    border-color: transparent #0075c2 #0075c2 transparent;
}
/*---- ニュース矢印 ----*/

#ir .list-news .link-arrow-common-l::after {
    border-color: transparent #0075c2 #0075c2 transparent;
}
/*---- コンテンツ ----*/
/*株価用*/

.box-quote {
    background-color: #d9e4f3;
    box-sizing: border-box;
}
.box-contents li.box-quote img {
    max-width: 100%;
    width: auto;
}
.box-contents li.box-quote a {
    width: auto;
    height: auto;
    margin-bottom: 10%;
}
.box-contents li.box-quote a:hover {
    opacity: 0.8;
}
.box-quote > p {
    margin-top: 10%;
}
.box-quote .link-arrow-common-l {
    margin: 5% 0;
    padding-left: 2.5em;
}
.box-quote .link-arrow-common-l::after {
    border-color: transparent #0075c2 #0075c2 transparent;
    height: 8px;
    top: 35%;
    width: 8px;
}
.box-quote .link-arrow-common-l::before {
    background: url(../../ir/images/icon_chart.svg) no-repeat center center / contain;
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 1em;
}
.link-quote-container {
    background-color: #fff;
    margin: 0 auto;
    max-width: 258px;
}
/*--------------------------------------
CSR・環境
--------------------------------------*/
/*---- L3用見出し ----*/

#sustainability .hdg-l3::after {
    background-color: #f9be00;
}
/*---- メインビジュアル用ボタン ----*/

#sustainability .btn-mainvisual::after {
    border-color: transparent #f9be00 #f9be00 transparent;
}
/*---- メインビジュアルのページャー ----*/

#sustainability .mainvisual-container .slick-dots li button::before {
    background: #fee080 none repeat scroll 0 0;
}
#sustainability .mainvisual-container .slick-dots li.slick-active button::before {
    background: #f9be00 none repeat scroll 0 0;
}
/*---- メインビジュアルの矢印 ----*/

#sustainability .main-arrow._prev::before {
    border-color: #f9be00 transparent transparent #f9be00;
}
#sustainability .main-arrow._next::before {
    border-color: transparent #f9be00 #f9be00 transparent;
}
/*---- カテゴリナビ横幅 ----*/
#sustainability .nav-category li{
    flex-basis:calc(100% / 2);
    max-width: calc(100% / 2);
    width:50%;
}
/*---- カテゴリナビ矢印 ----*/

#sustainability .nav-category-container .link-arrow-common-r::after {
    border-color: transparent #f9be00 #f9be00 transparent;
}
/*---- ページ下部のロゴ一覧 ----*/
#sri_bnr * {
  box-sizing: border-box;
}
#sri_bnr ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
#sri_bnr li > img {
  width: 100%;
}
#sri_bnr li {
  text-align: center;
  float: left;
  max-width: 24%;
}

/*--------------------------------------
トータルソリューション
--------------------------------------*/
/*---- L3用見出し ----*/

#group .hdg-l3::after {
    background-color: #7b4fc6;
}
/*---- メインビジュアル用ボタン ----*/

#group .btn-mainvisual::after {
    border-color: transparent #7b4fc6 #7b4fc6 transparent;
}
/*---- メインビジュアルのページャー ----*/

#group .mainvisual-container .slick-dots li button::before {
    background: #ae90e1 none repeat scroll 0 0;
}
#group .mainvisual-container .slick-dots li.slick-active button::before {
    background: #7b4fc6 none repeat scroll 0 0;
}
/*---- メインビジュアルの矢印 ----*/

#group .main-arrow._prev::before {
    border-color: #7b4fc6 transparent transparent #7b4fc6;
}
#group .main-arrow._next::before {
    border-color: transparent #7b4fc6 #7b4fc6 transparent;
}
/*---- カテゴリナビ矢印 ----*/

#group .nav-category-container .link-arrow-common-r::after {
    border-color: transparent #7b4fc6 #7b4fc6 transparent;
}
/*---- ニュース矢印 ----*/

#group .list-news .link-arrow-common-l::after {
    border-color: transparent #7b4fc6 #7b4fc6 transparent;
}
/*--------------------------------------
ブランドステートメント
--------------------------------------*/

.box-brand {
    background-color: #f7f8f8;
    border: #e7e9e9 solid 1px;
    padding: 2% 2% 0;
}
.image-policy-container {
    height: 450px;
    position: relative;
    text-align: left;
}

.image-policy-container a {
    color: #ffffff;
}

.image-policy{
    background: url("/corporate/policy/images/policy_img_02.png") no-repeat center center / contain;
    height: 387px;
    max-width: 396px;
    position: relative;
    margin:0 auto;
}

.link-policy {
    color: #fff;
    font-size: 200%;
    line-height: 1.2em;
    padding-left: 0.7em;
}
.link-policy::after {
    border-color: transparent #ffffff #ffffff transparent;
    border-width: 0 2px 2px 0;
    height: 7px;
    top: 0.4em;
    transform: rotate(-45deg);
    width: 7px;
    -webkit-transform: rotate(-45deg);
}
.hdg-policy {
    border-left: 3px solid #e72c3f;
    font-size: 110%;
    font-weight: bold;
    padding: 0.1em 0 0.1em 0.7em;
}
.hdg-policy-02 {
    color: #e70014;
    font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 160%;
    margin-bottom: 1em;
    text-align: left;
}
.readtxt-policy {
    font-size: 110%;
    line-height: 2em;
    margin-bottom: 1em;
    text-align: left;
}
.box-link-policy li {
    flex:0 1 auto;
    flex-basis: calc(50% - 15px);
    width: 47%;
}

.policy-01, 
.policy-02, 
.policy-03, 
.policy-04, 
.policy-05, 
.policy-06, 
.policy-07, 
.policy-08,
.policy-09 {
    display: block;
    position: absolute;
}

.policy-01 {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    top: 20%;
}
.policy-02 {
    font-size: 115%;
    left: 51%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    top: 39%;
    white-space: nowrap;
}
.policy-03 {
    left: 10%;
    top: 53%;
}
.policy-04 {
    right: 10%;
    top: 53%;
}
.policy-05 {
    border-color: #e9611d;
    left: 130px;
    top: 65px;
    width:183px;
}
.policy-05 p {
    position: relative;
}
.policy-05 p::after {
    background-color: #e9611d;
    bottom: -2em;
    box-shadow: 0 0 0 2px #fff;
    content: '';
    display: block;
    left: 50%;
    height: 1px;
    position: absolute;
    transform: rotate(25deg);
    width: 130px;
    -webkit-transform: rotate(25deg);
}
.policy-06 {
    right: 120px;
    top: 65px;
    width:167px;
}
.policy-07 {
    border-color: #0077bf;
    left: 45px;
    top: 210px;
    width:167px;
}
.policy-08 {
    border-color: #41963d;
    right: 65px;
    top: 210px;
    width:150px;
}
.policy-09 {
    background-color: #e9611d;
    bottom: -14%;
    left: 50%;
    transform: translateX(-50%);
    width: 20vw;
    -webkit-transform: translateX(-50%);
}
.policy-09::after {
    border-color: transparent #ffffff #ffffff transparent;
}
.policy-09:hover {
    background-color: #f58954;
}

/*=====================================

L2L3タブレット用CSS

=======================================*/

@media screen and (max-width: 800px) {
/*===================
ボックス
===================*/
/*--------------------------------------
汎用ボックス 
--------------------------------------*/
    
    .box-general {
        padding: 3%;
    }

/*===================
見出し
===================*/
/*--------------------------------------
カテゴリ見出し
--------------------------------------*/
    
    .hdg-category-inner {
        padding: 2% 3%;
    }
/*---- menuボタン ----*/
    
    .nav-category-toggle {
        right: 3%;
    }
    #breadcrumb div {
        padding: 2% 3%;
    }
/*--------------------------------------
メインビジュアル見出し
--------------------------------------*/
    
    .hdg-mainvisual img {
        max-width: 85%;
    }
/*--------------------------------------
ニュース見出し
--------------------------------------*/
    
    .hdg-news {
        padding: 0
    }
/*===================
ボタン
===================*/
/*--------------------------------------
メインビジュアル用ボタン
--------------------------------------*/
.btn-mainvisual {
    width: 20vw;
}

/*--------------------------------------
もっと知りたい方ボタン
--------------------------------------*/
    
    .more-article {
        width: 60vw;
    }
    .box-link-length{
        min-width:calc(100vw - 260px - 6% - 2em);
    }
    .box-link-length a{
        display:inline-block;
    }

    .box-link-length .ttl-box-link-02{
        max-width:20%;
    }
    .box-link-length-area{
        width:80%;
    }

/*===================
レイアウト
===================*/
/*--------------------------------------
メインビジュアル
--------------------------------------*/
    
    .mainvisual-container {
        height: 300px;
    }
    .list-mainvisual li.slick-slide {
        height: 300px;
    }
    .list-mainvisual li.slick-slide div.mainvisual-contents {
        padding: 0 8%;
    }
    .list-mainvisual-l3 li {
        height: 300px;
    }
/*--------------------------------------
カテゴリーナビ
--------------------------------------*/
    .nav-category-container{
        padding-bottom:1em;
    }
    .nav-category {
        margin: 0 3% 3%;
        padding: 0;
    }
    .nav-category li {
        flex-basis: calc(100% / 2);
        max-width: calc(100% / 2);
        width: 50%;
    }
/*--------------------------------------
コンテンツ枠
--------------------------------------*/
    
    .contents-container {
        padding: 4% 3% 0;
    }
/*--------------------------------------
カテゴリ用コンテンツ
--------------------------------------*/
    
    .box-contents li {
        flex-basis: calc(50% - 15px);
    }
/*--------------------------------------
重要なお知らせ
--------------------------------------*/
    
    .important-notice-inner {
        padding: 4% 3% 2%;
    }
/*--------------------------------------
関連情報 
--------------------------------------*/
    
    .relation-container {
        padding: 5% 1.8% 2%
    }
    .box-relation li {
        flex-basis: 23%;
        width: 23%;
    }
/*--------------------------------------
ニュース
--------------------------------------*/
    
    .news-container {
        padding: 3% 3% 4%;
    }
    .box-col2:nth-of-type(odd) .list-news {
        margin: 0 5% 2% 0;
    }
    .box-col2:nth-of-type(even) .list-news {
        margin: 0 0 2% 5%;
    }
/*--------------------------------------
ブランドステートメント
--------------------------------------*/

    .box-brand {
        padding: 3% 3% 0;
    }

    .image-policy-container{
        height:auto;}

    .image-policy {
        margin-bottom:15%;}

    .box-link-policy li {
        flex-basis: 100%;
        width: 100%;
    }

    .policy-05, 
    .policy-06, 
    .policy-07, 
    .policy-08 {
        bottom:auto;
        left:auto;
       margin-bottom:1em;
        position:relative;
        right:auto;
        top:auto;
        width:auto;}
   
    .policy-05 p::after{
        display:none;}

    .policy-09{width:50vw;}

}

/*=====================================

L2L3スマホ用CSS

=======================================*/

@media screen and (max-width: 480px) {
/*===================
ボックス
===================*/
/*--------------------------------------
汎用ボックス 
--------------------------------------*/
    
    .box-general {
        padding: 7% 5%;
    }
/*--------------------------------------
インフォボックス 
--------------------------------------*/
    
    .box-info {
        margin: 7% auto;
    }
/*--------------------------------------
カラムボックス
--------------------------------------*/
    
    .box-col2 {
        flex-basis: 100%;
        margin-bottom: 3em;
        width: 100%;
    }
    .box-col2 {
        flex-basis: 100%;
    }
    .box-col2:nth-of-type(2n+1) {
        border-right: none;
        padding: 0;
    }
    .box-col2:nth-of-type(2n) {
        padding: 0;
    }
    .box-col2-l,
    .box-col2-m,
    .box-col2-s{
        flex: 1;
        flex-basis: 100%;
        margin: 0!important;
    }
    .box-col2-img {
        margin: 0 auto 1em;
    }
/*===================
見出し
===================*/
/*--------------------------------------
カテゴリ見出し
--------------------------------------*/
    
    .hdg-category {
        font-size: 150%;
        letter-spacing: 2px;
        text-align: center;
    }
    .hdg-category-inner {
        padding: 5% 60px;
    }
    .hdg-category span {
        display: block;
        font-size: 50%;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .hdg-category span::before {
        display: none;
    }
    .nav-category-toggle {
        background: none;
        color: #000;
        font-size: 95%;
        height: 50px;
        padding: 5px;
        width: 50px;
    }
    /*---- menuボタン ----*/
    
    .nav-category-toggle span {
        background-color: #000;
    }
    .nav-category-toggle span:nth-child(1) {
        top: 1px;
    }
    .nav-category-toggle span:nth-child(2) {
        top: 12px;
    }
    .nav-category-toggle span:nth-child(3) {
        top: 22px;
    }
    .nav-category-toggle span:nth-child(4) {
        top: 24px;
    }
    .nav-category-toggle.cross span {
        height: 1px;
    }
    .nav-category-toggle.cross span:nth-child(3) {
        transform: translateY(-15px) rotate(-45deg);
        -webkit-transform: translateY(-15px) rotate(-45deg);
    }
/*--------------------------------------
メインビジュアル見出し
--------------------------------------*/
    
    .hdg-mainvisual {
        font-size: 210%;
        margin: 0 0 3%;
    }
    .hdg-mainvisual img {
        margin: 0 auto;
    }
/*--------------------------------------
重要なお知らせ見出し
--------------------------------------*/
    
    .hdg-importantnot-notice {
        padding: 0 0 5%;
    }
/*--------------------------------------
関連情報見出し
--------------------------------------*/
    
    .hdg-relation {
        padding: 0 0 5%;
    }
/*--------------------------------------
ニュース見出し
--------------------------------------*/
    
    .hdg-news {
        font-size: 130%;
    }
/*--------------------------------------
L3用見出し
--------------------------------------*/
    
    .hdg-l3 {
        font-size: 150%;
        padding: 0 0 1em
    }
    .hdg-l3::after {
        width: 7vw;
    }
/*===================
ボタン
===================*/
/*--------------------------------------
メインビジュアル用ボタン
--------------------------------------*/
    
    .btn-mainvisual {
        margin: 0 auto;
        width: 60vw;
    }
/*--------------------------------------
リンクボタン
--------------------------------------*/
    
    .box-link li {
        flex-basis: 100%;
        width: 100%;
    }
    .box-link a {
        justify-content: flex-start;
        text-align: left;
    }
    .box-link-02 li {
        flex-basis: 100%;
    }
    .box-link-04 a,
    .box-link-length,
    .box-link-02 a {
        display: block;
    }
    .box-link-length .ttl-box-link-02{
        max-width:100%;
    }
    .box-link-length-area{
        width:100%;
    }
    .ttl-box-link-02,
    .ttl-box-link-04 {
        float:none;
        height: auto;
    }
    .ttl-box-link-03 {
        text-align: left;
        white-space: nowrap;
    }
    .cont-box-link-03 {
        padding-left: 1em;
        text-align: left;
    }
    .link-column li {
        min-width: 100%;
    }
/*--------------------------------------
関連リンク用ボタン
--------------------------------------*/
    
    .more-relation {
        width: 50vw;
    }
/*===================
レイアウト
===================*/
/*--------------------------------------
メインビジュアル
--------------------------------------*/
    
    .mainvisual-container {
        height: 200px;
        margin-bottom: 10%;
    }
    .readtxt-mainvisual {
        display: none;
    }
    .list-mainvisual li.slick-slide {
        align-items: center;
        display: flex;
        height: 200px;
    }
    .list-mainvisual li.slick-slide div.mainvisual-contents {
        max-width:100%;
        text-align: center;
    }
    .list-mainvisual-l3 li {
        height: 200px;
    }
    .list-mainvisual .txt-color-w-sp {
        color: #fff;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    }
    /*---- slickカスタマイズ ----*/
    
    .main-arrow::before {
        width: 20px;
        height: 20px;
    }
    .main-arrow._prev::before {
        left: 15px;
    }
    .mainvisual-container .slick-dots {
        bottom: -15%;
    }
/*--------------------------------------
コンテンツ枠
--------------------------------------*/
    
    .contents-container {
        padding: 4% 5% 2%;
    }
    .contents-inner {
        padding: 10% 0 7%;
    }
/*--------------------------------------
カテゴリ用コンテンツ
--------------------------------------*/
    
    .box-contents li {
        flex-basis: 100%;
    }
    .caption-contents {
        background-color: #e6e6e7;
        color: #000;
        font-size: 100%;
        position: relative;
    }
    .caption-contents-inner {
        padding: 0.7em 1.5em 0.7em 1em;
    }
    .caption-contents-inner.link-arrow-common-r::after {
        border-color: transparent #e70014 #e70014 transparent;
    }
    .caption-contents .link-plural.link-arrow-common-r::after {
        border-color: transparent #e70014 #e70014 transparent;
    }
    .caption-contents a {
        color: #000;
    }
    .caption-contents .link-arrow-dotted::before {
        color: #000;
    }
    .caption-contents .link-arrow-dotted::after {
        border-color: transparent #000 #000 transparent;
    }
/*--------------------------------------
カテゴリーナビ
--------------------------------------*/
    
    .nav-category-container {
        text-align: left;
    }
    a.link-category-top {
        margin: 5% 0;
        padding-left: 5%;
    }
    .nav-category li {
        flex-basis: 100%;
        max-width: 100%;
        width:100%;

    }
    .nav-category a {
        justify-content: flex-start;
        padding: 0.7em 1.5em 0.7em 1em;
    }
    .nav-category-slide.nav-category-open {
        max-height: 1000vh;
    }
/*--------------------------------------
重要なお知らせ
--------------------------------------*/
    
    .important-notice-container {
        padding: 0 5% 3%;
    }
    .important-notice-inner {
        padding: 12% 0 15%;
    }
/*--------------------------------------
関連情報 
--------------------------------------*/
    
    .relation-container {
        padding: 8% 3.8% 7%;
    }
    .ttl-relation {
        justify-content: flex-start;
        padding: 0.5em 1.5em 0.5em 0.5em;
        text-align: left;
    }
    .box-relation{justify-content: flex-start;}

    .box-relation li {
        flex-basis: calc(50% - 12px);
        width: 50%;
    }
    .more_relation {
        width: 60vw;
    }
/*--------------------------------------
ニュース
--------------------------------------*/
    
    .box-col2:first-child {
        border-right: none;
    }
    .news-container {
        padding: 15% 5% 3%;
    }
    .news-container > div {
        margin-bottom: 5%;
        flex-basis: 100%;
        width: 100%;
    }
    .list-news {
        margin: 0 0 2%;
    }
    .list-news li,
    .box-col1 .list-news li {
        padding: 5% 0;
    }
    .btn-newslist {
        width: 60vw;
    }
    .rss_container {
        margin-bottom: 7%;
    }
    .position-rss {
        margin-right: 0;
    }
    .box-col1 .category-news {
        top: 10%;
        transform: translateY(0px);
    }
    .box-col2:nth-of-type(odd) .list-news {
        margin: 0 0 2%;
    }
    .box-col2:nth-of-type(even) .list-news {
        margin: 0 0 2%;
    }
/*--------------------------------------
L3用リード文 
--------------------------------------*/
    
    .readtxt {
        text-align: left;
    }
/*===================
カテゴリごとの設定
===================*/
/*--------------------------------------
企業情報
--------------------------------------*/
/*---- 発行冊子の順番 ----*/
.report-odr-01{order:1;}
.report-odr-02{order:2;}

/*--------------------------------------
エネルギー・安定供給
--------------------------------------*/
    
    #energy_supply .box-link-supply li {
        margin-bottom: 5px;
    }

/*--------------------------------------
CSR・環境
--------------------------------------*/

    #sri_bnr ul{flex-direction: column;}
    #sri_bnr li{
        margin-bottom:1.5em;
        max-width: 100%;}

/*--------------------------------------
トータルソリューション
--------------------------------------*/
    
    #group .hdg-category {
        font-size: 135%;
    }
    #group .news-group-container {
        margin-top: 15%;
    }
    #group .news-group-container .list-news > li{
        padding:12% 0 5%;
    }
/*--------------------------------------
ブランドステートメント
--------------------------------------*/
    
    .image-policy {
        height: 280px;
        margin-bottom: 30%;
       width:260px;
    }
    .link-policy {
        font-size: 120%;
        padding-left: 1em;
    }
    .link-policy::after {
        height: 5px;
        width: 5px
    }
    .policy-02 {
        font-size: 85%;
    }
}