/*
  フロントページ専用（#front_* / section.front_content 等）
読み込み: header.php（is_front_page のみ）
  更新: 2026年7月28日
*/

/* フロントページコンテンツセクション */
section.front_content {
    padding: 0 0 45px;
}

/* フロントページの最初のセクション */
section.front_content:first-of-type,
#front_products {
    background-color: #DDE7ED !important;
    background-image: none !important;
    padding: 45px 0 0;
    margin: 50px 0 0;
}

/* フロントページの最初のセクション内コンテナ */
section.front_content:first-of-type .container {
    background: rgba(255, 255, 255, 0.68);
}

/* フロントページの最初のセクション内タイトル */
section.front_content:first-of-type .container h2.ttl {
    text-align: center;
    color: #1a7a4c;
}

/* フロントページの最初のセクション内タイトルのアクセント線を非表示 */
section.front_content:first-of-type .container h2.ttl:before {
    content: none;
}

/* フロントページの最初のセクション内タイトルのサブテキスト */
section.front_content:first-of-type .container h2.ttl span {
    display: block;
    margin: 10px 0 0;
    color: #000;
}

/* クリーム色の背景セクション */
section.cleam {
    background-color: #f9f6ef;
}

/* グレー色の背景セクション */
section.gray {
    background-color: #DDE7ED;
}

/* グレーセクション内のコンテナ */
section.gray .container {
    background-color: #fff;
    padding: 30px;
}

/* セクションタイトル */
section h2.ttl {
    display: block;
    margin: 0 0 30px;
    letter-spacing: 1px;
    font-size: 18px;
    font-weight: 600;
}

/* セクションタイトルのアクセント線 */
section h2.ttl:before {
    content: "";
    border-left: 5px solid #48b587;
    position: relative;
    left: -30px;
}

/* セクションタイトルのサブテキスト */
section h2.ttl span {
    color: #595959;
    font-family: 'bebas';
    margin-left: 1em;
    font-size: 16px;
    font-weight: bold;
}

/* フロントページニュースセクション */
#front_news {
    background-color: #fff;
}

/* フロントページニュースのタブメニュー */
#front_news .tab-menu li {
    display: inline-block;
    background-color: #efefef;
    border-radius: 3px 3px 0 0;
    margin-right: 10px;
    padding: 0 10px;
    line-height: 2.5;
    text-align: center;
    cursor: pointer;
}

/* フロントページニュースのタブメニューのフォントウェイト */
#front_news .tab-menu li {
    font-weight: bold;
}

/* フロントページニュースのアーカイブボタン */
#front_news .tab-menu li.btn-archive {
    width: 3em;
    min-width: 0;
    margin-left: 20px;
    padding: 3px 10px 5px;
    border-radius: 0;
    background-color: #1a7a4c;
    line-height: 1;
}

/* フロントページニュースのアーカイブボタンのホバー効果 */
#front_news .tab-menu li.btn-archive:hover {
    opacity: .8;
}

/* フロントページニュースのアクティブタブ */
#front_news .tab-menu li.active {
    background-color: #1a7a4c;
}

/* フロントページニュースの注意タブ */
#front_news .tab-menu li.caution {
    color: #e60012;
}

/* フロントページニュースのアクティブタブとアーカイブボタンのリンク */
#front_news .tab-menu li.active,
#front_news .tab-menu li.btn-archive a {
    color: #fff;
}

/* フロントページニュースのアーカイブボタンのリンクテキスト */
#front_news .tab-menu li.btn-archive a {
    font-size: 12px;
    font-weight: normal;
}

/* フロントページニュースの非表示タブコンテンツ */
#front_news .tab-content.hide {
    display: none;
}

/* フロントページニュースのタブコンテンツリスト */
#front_news .tab-content li {
    padding: 10px 0;
}

/* フロントページニュースのタブコンテンツ内スパン */
#front_news .tab-content li span {
}

/* フロントページニュースの相対位置 */
#front_news {
    position: relative;
}

/* フロントページニュースとトピックスの「もっと見る」ボタン */
#front_news a.btn_more,
#front_topics a.btn_more {
    position: absolute;
    top: 30px;
    right: 30px;
    display: block;
    width: 82px;
    background-color: #eee;
    line-height: 2;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* フロントページトピックスの「もっと見る」ボタン */
#front_topics a.btn_more {
    float: none;
}

/* フロントページ重要情報の「もっと見る」ボタン */
#front_important a.btn_more_other {
    position: absolute;
    margin-left: 25rem;
    display: block;
    width: 82px;
    background-color: #eee;
    line-height: 2;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}


/* フロントページニュースの全要素のボックスサイジング */
#front_news * {
    box-sizing: border-box;
}

/* フロントページニュースと重要情報のコンテナ */
#front_news .container,
#front_important .container {
    width: 100%;
}

/* フロントページニュースのタブコンテンツの日付 */
#front_news .tab-content .date {
    display: inline-block;
    width: 20%;
    font-size: 14px;
    line-height: 1.5;
    color: #595959;
    vertical-align: top;
    font-weight:400;
}

/* フロントページニュースの新着マーク */
#front_news .tab-content .date.new:after {
    display: block;
    content: 'NEW';
    margin: 1px 1em 0 0;
    padding: 2px 15px 1px;
    color: #fff;
    background-color: #e83828;
    font-size: 10px;
    float: left;
}

/* フロントページニュースのタイトル */
#front_news .tab-content .news-title {
    display: inline-block;
    width: 78%;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1.5px;
    vertical-align: top;
}

/* フロントページ重要情報セクション */
#front_important {
    background-color: #fff;
}

/* フロントページナビゲーションブロックのリスト */
#front_navBlock li {
    border-bottom: 1px solid #efefef;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

/* フロントページナビゲーションブロックのリストのホバー効果 */
#front_navBlock li:hover {
    opacity: .8;
}

/* フロントページナビゲーションブロックの最後のリスト（特別な背景色） */
#front_navBlock li:last-child {
    border-bottom: none;
    background-color: #e83828;
}

/* フロントページナビゲーションブロックのリストのアイコン */
#front_navBlock li:before {
    display: block;
    width: 20px;
    margin-right: 50px;
    float: left;
}

/* フロントページナビゲーションブロックのメニュー1のアイコン */
#front_navBlock li.menu1:before {
    content: url(../img/front/icon_01.png);
}

/* フロントページナビゲーションブロックのメニュー2のアイコン */
#front_navBlock li.menu2:before {
    content: url(../img/front/icon_02.png);
}

/* フロントページナビゲーションブロックのメニュー3のアイコン */
#front_navBlock li.menu3:before {
    content: url(../img/front/icon_03.png);
}

/* フロントページナビゲーションブロックのメニュー4のアイコン */
#front_navBlock li.menu4:before {
    content: url(../img/front/icon_04.png);
}

/* フロントページナビゲーションブロックのリンク */
#front_navBlock li a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}

/* フロントページナビゲーションブロックの最後のリンク（白文字） */
#front_navBlock li:last-child a {
    color: #fff;
}

/* フロントページサービスのカラムラッパー */
#front_service .col-wrap {
    position: relative;
    max-width: 430px;
    margin: 20px auto 0;
    padding-bottom: 10px;
    background-color: #1a7a4c;
    text-align: center;
}

/* フロントページサービスのタイトル */
#front_service .col-wrap h3 {
    margin: 10px 0;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* フロントページサービスのリンク */
#front_service .col-wrap a {
    display: inline-block;
    border: 1px solid #fff;
    padding: 10px 10px 9px 14px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 3px;
}

/* フロントページセカンドセクション */
#front_second {
    padding: 45px 0;
}

/* フロントページセカンドセクションの右ボックス */
#front_second .right-box {
    display: inline-block;
    width: 360px;
}

/* フロントページセカンドセクションの右ボックスのタイトル */
#front_second .right-box h3 {
    margin: 0 0 20px;
    color: #1a7a4c;
    border-left: 5px solid #48b587;
    padding: 0 0 0 30px;
    font-size: 18px;
    font-weight: bold;
}

/* フロントページセカンドセクションの右ボックスのリスト */
#front_second .right-box ul {
    padding-left: 35px;
}

#front_second .right-box li {
    margin-bottom: 15px;
}

/* フロントページセカンドセクションの右ボックスのリンク（チェックアイコン付き） */
#front_second .right-box li a {
    display: block;
    background-image: url(../img/front/icon-check.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0 0 0 2em;
}



/* フロントページプロダクトセクション */

/* フロントページプロダクトのタイトルサブテキスト */
#front_products h2.ttl span {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, Arial, Meiryo, sans-serif;
}

/* フロントページプロダクトのリスト */
#front_products ul {
    font-size: 0;
}

#front_products li:nth-child(even) {
    margin: 0;
}

/* フロントページプロダクトのコンテンツリンク */
#front_products .content a {
    display: block;
    padding: 135px 10px 20px;
}

/* フロントページプロダクトのリンクホバー効果 */
#front_products li a:hover {
    transition: 1s;
}

/* フロントページプロダクトの1番目のリンク（背景画像付き） */
#front_products li:nth-of-type(1) a {
    background-image: url(../img/front/front_content-bg01-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの1番目のリンクのホバー効果 */
#front_products li:nth-of-type(1) a:hover {
    background-image: url(../img/front/front_content-bg01-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの2番目のリンク（背景画像付き） */
#front_products li:nth-of-type(2) a {
    background-image: url(../img/front/front_content-bg02-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの2番目のリンクのホバー効果 */
#front_products li:nth-of-type(2) a:hover {
    background-image: url(../img/front/front_content-bg02-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの3番目のリンク（背景画像付き） */
#front_products li:nth-of-type(3) a {
    background-image: url(../img/front/front_content-bg03-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの3番目のリンクのホバー効果 */
#front_products li:nth-of-type(3) a:hover {
    background-image: url(../img/front/front_content-bg03-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの4番目のリンク（背景画像付き） */
#front_products li:nth-of-type(4) a {
    background-image: url(../img/front/front_content-bg04-1.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトの4番目のリンクのホバー効果 */
#front_products li:nth-of-type(4) a:hover {
    background-image: url(../img/front/front_content-bg04-2.png);
    background-position: center top;
    background-repeat: no-repeat;
}

/* フロントページプロダクトのリンク内タイトル */
#front_products li a h4 {
    color: #1a7a4c;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 10px;
    line-height: 30px;
    padding: 0 0 0 30px;
}

/* フロントページプロダクトの1番目のリンク内タイトル（アイコン付き） */
#front_products li:nth-of-type(1) a h4 {
    background: url(../img/front/front_content-icon01.png) center left no-repeat;
}

/* フロントページプロダクトの2番目のリンク内タイトル（アイコン付き） */
#front_products li:nth-of-type(2) a h4 {
    background: url(../img/front/front_content-icon02.png) center left no-repeat;
}

/* フロントページプロダクトの3番目のリンク内タイトル（アイコン付き） */
#front_products li:nth-of-type(3) a h4 {
    background: url(../img/front/front_content-icon03.png) center left no-repeat;
}

/* フロントページプロダクトの4番目のリンク内タイトル（アイコン付き） */
#front_products li:nth-of-type(4) a h4 {
    background: url(../img/front/front_content-icon04.png) center left no-repeat;
}

/* フロントページプロダクトのリンク内テキスト */
#front_products li a p {
    text-align: left;
    font-size: 12px;
    line-height: 1.3;
}

/* フロントページプロダクトの黄色ボタン */
#front_products a.btn_yw {
    display: block;
    width: 100%;
    background-color: #efea3a;
    border-bottom: 5px solid #e6e02c;
    margin: 30px auto;
    padding: 20px 0;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #e83828;
}



/* フロントページトピックセクション */

/* フロントページトピックのラッパー */
#front_topics .wrapper {
    background-color: #fff;
    /* padding: 0 0 45px; */
}

/* フロントページトピックのヘッドブロック */
#front_topics .head_block {
    position: relative;
    padding: 30px 30px 0;
}

#front_topics .head_block h2.ttl {
    margin: 0;
}

/* フロントページトピックのコンテナ */
#front_topics .container {
    background-color: #fff;
    padding: 20px 20px;
}

/* フロントページトピックのコンテンツ */
#front_topics .topics_content {
    border-bottom: 1px solid #ededed;
    padding: 30px;
}

/* フロントページトピックのテキストブロック */
#front_topics .topics_content .text-block {
    margin: 0 auto;
    width: 320px;
}

/* フロントページトピックのテキストブロック内タイトル */
#front_topics .topics_content .text-block h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
}

/* フロントページトピックのテキストブロック内テキスト */
#front_topics .topics_content .text-block p {
    color: #666;
    line-height: 1.5;
}

/* フロントページトピックのテキストブロック内リンク */
#front_topics .topics_content .text-block a {
    display: block;
    width: 140px;
    margin: 10px auto 0;
    padding: 8px 0;
    color: #1a7a4c;
    font-weight: bold;
    text-align: center;
}

/* フロントページトピックのテキストブロック内リンクの矢印アイコン */
#front_topics .topics_content .text-block a:after {
    content: '›';
    display: inline-block;
    margin-left: 4px;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
}

/* フロントページトピックの「もっと見る」ゴーストボタン */
#front_topics a.more-btnGhost {
    display: block;
    width: 230px;
    margin: 20px auto 20px;
}

/* ターゲットリンクエリア */
.target-linkArea {
    background: url(../img/bk_note.jpg);
    padding: 40px 0 30px;
    overflow: hidden;
}

/* ターゲットリンクエリアのリスト */
.target-linkArea ul {
    width: 95%;
    max-width: 565px;
    margin: 0 auto;
}

.target-linkArea li {
    float: left;
    width: 20%;
    margin-right: 5%;
    vertical-align: bottom;
}
/* スライダープロの前へ・次へボタン共通スタイル */
.sp-slides .slick-prev,
.sp-slides .slick-next {
    z-index: 10;
    width: 80px!important;
    height: 80px!important;
}

/* スライダープロの前へボタンのアイコン */
.sp-slides .slick-prev:before {
    content: ''!important;
    opacity: 1!important;
    display: block;
    background: url(../img/for_home/prev.png) center no-repeat;
    width: 80px;
    height: 80px;
}

/* スライダープロの次へボタンのアイコン */
.sp-slides .slick-next:before {
    content: ''!important;
    opacity: 1!important;
    display: block;
    background: url(../img/for_home/next.png) center no-repeat;
    width: 80px;
    height: 80px;
}

/* フロントページ重要情報のリンク */
#front_important ul li a {
    display: block;
    background: url(../img/front/important-icon.png) left top 12px no-repeat;
    padding: 10px 0 10px 20px;
    color: #e71f19;
}



/* ============================================
   フロントページトップコンテンツ
   ============================================ */

/* トップコンテンツ */
#front_topContent {
    margin: 80px auto 60px;
}

/* ニュースセクション */
#front_news {
    width: 570px;
}

/* 重要なお知らせセクション */
#front_important {
    width: 390px;
}

/* 重要なお知らせタイトル - 左側赤線 */
#front_important h2.ttl:before {
    border-left: 5px solid #ff3333;
}

/* 重要なお知らせ - オフィス情報リンク */
#front_important a[href*="corporate/office"] {
    display: inline-block;
    background: #c62828;
    padding: 10px 10px 10px 30px;
    color: #fff;
    background-image: url(../img/front/icon-important.png);
    background-position: left 10px center;
    background-repeat: no-repeat;
    border-radius: 5px;
    margin: 20px 0 0;
}

/* ニュース - 新着日付マーク */
#front_news .tab-content .date.new:after {
    display: inline-block;
    float: right;
}

/* ============================================
   サービスセクション
   ============================================ */

/* サービス - カラムラッパー */
#front_service .col-wrap {
    position: relative;
    max-width: none;
    margin: 30px 0 0;
    padding: 0;
}

/* サービス - テキストブロック */
#front_service .col-wrap .text-block {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
}

/* サービス - 偶数項目のテキストブロック */
#front_service .col-wrap:nth-child(even) .text-block {
    left: 0;
}

/* サービス - 画像 */
#front_service .col-wrap img {
    width: 50%;
    float: left;
}

/* サービス - テキストブロック（再定義） */
#front_service .col-wrap .text-block {
    width: 50%;
    float: left;
}

/* サービス - 偶数項目の画像とテキストブロック */
#front_service .col-wrap:nth-child(even) img,
#front_service .col-wrap:nth-child(even) .text-block {
    float: right;
}

/* ============================================
   トピックスセクション
   ============================================ */

/* トピックスコンテンツ */
#front_topics .topics_content {
    position: relative;
    overflow: hidden;
}

/* トピックスコンテンツ内部 */
#front_topics .content-inside {}

/* トピックス - 画像ブロック */
#front_topics .topics_content .img-block {
    width: 260px;
    margin-right: 20px;
    float: left;
}

/* トピックス - テキストブロック */
#front_topics .topics_content .text-block {
    width: 100%;
}

/* トピックス - テキストブロック内リンク */
#front_topics .topics_content .text-block a {
    float: right;
}

/* フロントページプロダクト - レスポンシブレイアウト */
@media screen and (min-width: 769px) {
    #front_products ul {
        display: flex !important;
        gap: 10px;
        align-items: stretch;
        font-size: 0;
    }

    #front_products ul > li {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        overflow: visible;
        border-radius: 0;
        box-sizing: border-box;
    }

    #front_products ul > li .content {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    #front_products ul > li .content a {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column !important;
        height: 100%;
        min-height: 236px;
        padding-top: 14px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 134px !important;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        background-image: none !important;
    }

    #front_products ul > li .content a::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 126px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        pointer-events: none;
    }

    #front_products ul > li:nth-of-type(1) .content a::before {
        background-image: url(../img/front/front_content-bg01-1.png);
    }

    #front_products ul > li:nth-of-type(2) .content a::before {
        background-image: url(../img/front/front_content-bg02-1.png);
    }

    #front_products ul > li:nth-of-type(3) .content a::before {
        background-image: url(../img/front/front_content-bg03-1.png);
    }

    #front_products ul > li:nth-of-type(4) .content a::before {
        background-image: url(../img/front/front_content-bg04-1.png);
    }

    #front_products ul > li .content a::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 126px;
        left: 0;
        height: 1px;
        background-color: #48b587;
        pointer-events: none;
    }

    #front_products ul > li a h4 {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto;
        min-height: 28px !important;
        line-height: 1.35 !important;
        padding: 0 0 0 30px !important;
        margin: 0 0 12px !important;
        font-size: 13px !important;
        letter-spacing: -0.02em;
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
        background-position: left center !important;
        background-size: 22px auto !important;
    }

    #front_products ul > li:nth-of-type(2) a h4,
    #front_products ul > li:nth-of-type(4) a h4 {
        font-size: 12px !important;
    }

    #front_products ul > li a p {
        flex: 0 0 auto;
        min-height: 0;
        white-space: normal !important;
        word-break: break-word;
        overflow: visible;
        width: auto !important;
        max-width: 100%;
        margin: 0;
        font-size: 12px;
        line-height: 1.55;
    }

    #front_products ul > li.front-products-item--gas a p {
        font-size: 12px;
        line-height: 1.55;
        min-height: 0;
    }
}

@media screen and (max-width: 768px) {
    #front_products .container {
        padding: 20px 15px;
    }

    #front_products ul {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        font-size: 0;
    }

    #front_products ul > li {
        display: block !important;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        flex: none !important;
        border-radius: 0;
    }

    #front_products ul > li .content {
        display: block !important;
        height: auto !important;
    }

    #front_products ul > li .content a {
        display: block !important;
        position: relative;
        min-height: 96px;
        height: auto !important;
        padding: 12px calc(28% + 16px) 24px 12px !important;
        background-image: none !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    #front_products ul > li .content a::before {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: auto;
        width: 28%;
        height: auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        pointer-events: none;
    }

    #front_products ul > li .content a::after {
        content: '';
        position: absolute;
        top: 10px;
        right: calc(28% + 10px);
        bottom: 10px;
        left: auto;
        width: 1px;
        height: auto;
        background-color: #48b587;
        pointer-events: none;
    }

    #front_products ul > li:nth-of-type(1) .content a::before {
        background-image: url(../img/front/front_content-bg01-1.png);
    }

    #front_products ul > li:nth-of-type(2) .content a::before {
        background-image: url(../img/front/front_content-bg02-1.png);
    }

    #front_products ul > li:nth-of-type(3) .content a::before {
        background-image: url(../img/front/front_content-bg03-1.png);
    }

    #front_products ul > li:nth-of-type(4) .content a::before {
        background-image: url(../img/front/front_content-bg04-1.png);
    }

    #front_products ul > li a h4 {
        display: flex !important;
        align-items: center;
        gap: 8px;
        text-align: left !important;
        position: relative;
        z-index: 1;
        min-height: 28px !important;
        line-height: 1.4 !important;
        font-size: 14px !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        background: none !important;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    #front_products ul > li a h4::before {
        content: '';
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #front_products ul > li:nth-of-type(1) a h4::before {
        background-image: url(../img/front/front_content-icon01.png);
    }

    #front_products ul > li:nth-of-type(2) a h4 {
        font-size: 14px !important;
        letter-spacing: normal;
    }

    #front_products ul > li:nth-of-type(2) a h4::before {
        background-image: url(../img/front/front_content-icon02.png);
    }

    #front_products ul > li:nth-of-type(3) a h4::before {
        background-image: url(../img/front/front_content-icon03.png);
    }

    #front_products ul > li:nth-of-type(4) a h4::before {
        background-image: url(../img/front/front_content-icon04.png);
    }

    #front_products ul > li a p {
        position: relative;
        z-index: 1;
        white-space: normal !important;
        width: auto !important;
        max-width: 100%;
        min-height: 0 !important;
        flex: none !important;
        margin: 0;
        font-size: 12px;
        line-height: 1.55;
    }

    #front_products ul > li.front-products-item--gas a p {
        font-size: 12px;
        line-height: 1.55;
    }
}

/* === from misplaced city-gas block === */
/* ============================================
   フロントページコンテンツ
   ============================================ */

/* ニュースタブメニュー */
#front_news .tab-menu li {
    min-width: 80px;
    padding: 0 20px;
    font-size: 16px;
}

/* 重要なお知らせリンク */
#front_important li a {
    font-size: 15px;
    line-height: 1.5;
    font-weight: bold;
}

/* 商品一覧 */
#front_products li {
    display: inline-block;
    position: relative;
    width: 23.9%;
    background-color: #fff;
    border: solid 1px #48b587;
    border-radius: 5px;
    margin-right: 1%;
}

/* 商品一覧 - 偶数項目 */
#front_products li:nth-child(even) {
    margin-right: 1%;
}

/* 商品一覧 - 最後の項目 */
#front_products li:last-child {
    margin: 0;
}



/* ---- moved from responsive.css (front-only SP/tablet) ---- */
@media screen and (max-width: 979px) {
    .sp-slides {
        width: 100%;
    }
    .sp-slides .slick-prev,
    .sp-slides .slick-next {
        display: none!important;
    }
    .sp-slides .slick-list {
        padding: 0!important;
    }
    .sp-slides .slick-list {
        overflow: hidden!important;
    }
    section.front_content:first-of-type {
        padding: 2rem 0;
    }
    /* PC用 #front_products の margin/padding をSPで打ち消す */
    #front_products {
        margin: 0 !important;
        padding: 1rem 0 0 !important;
    }
    section.front_content {
        padding: 1rem;
    }
    section.front_content:first-of-type {
        padding: 2rem 0;
        margin: 0;
    }
    #front_products li {
        width: 48%;
        margin-right: 4%;
    }
    #front_products li:nth-child(even) {
        margin-right: 0;
    }
    #front_products li:nth-of-type(1),
    #front_products li:nth-of-type(2) {
        margin-bottom: 4%;
    }
    #front_products .content a {
        padding: 10rem 1rem 2rem;
    }
    #front_products .content a {
        background-size: contain, 8px;
    }
    #front_products li a h4 {
        font-size: 1.25rem;
        margin: 0 0 1rem;
        line-height: 1.5rem;
        padding: 0 0 0 0rem;
        text-align:center;
    }
    #front_products li:nth-of-type(1) a h4 {
        background: none;
}
    #front_products li:nth-of-type(1) a h4 {
        background: none;
        }
    #front_products li:nth-of-type(2) a h4 {
        background: none;
        }
    #front_products li:nth-of-type(3) a h4 {
        background: none;
        }
    #front_products li:nth-of-type(4) a h4 {
        background: none;
        }
    #front_second {
        padding: 2rem 1rem 1rem;
    }
    a.btn_support {
        margin: 0 0 2rem;
        width: 100%;
        padding: 2rem;
        float: none;
    }
    a.btn_support h3 {
        padding: 0 0 0 1.6em;
        font-size: 1.6rem;
        line-height: 1.3;
        margin: 0 0 1rem;
        background-position: top left;
        background-size: 2rem;
    }
    a.btn_support p {
        font-size: 1rem;
    }
    #front_second .right-box {
        width: 100%;
        float: none;
    }
    #front_second .right-box h3 {
        margin: 0 0 2rem;
        border-left: none;
        padding: 0;
        font-size: 1.8rem;
    }
    #front_second .right-box h3:before {
        content: "";
        border-left: 5px solid #48b587;
        position: relative;
        left: -2rem;
    }
    #front_second .right-box ul {
        padding-left: 0;
    }
    #front_second .right-box li {
        margin-bottom: 1.5rem;
    }
    #front_second .right-box li:last-child {
        margin-bottom: 0;
    }
    #front_second .right-box li a {
        font-size: 1.3rem;
    }
    #front_news .container,
    #front_important .container {
        margin: 0;
    }
    #front_news {
        width: 100%;
        float: none;
        margin: 0 0 2rem;
        background: #fff;
    }
    #front_news a.btn_more,
    #front_topics a.btn_more {
        top: 2rem;
        right: 2rem;
        width: 8rem;
        font-size: 1.2rem;
    }

    #front_important a.btn_more_other {
        right: 3rem;
        width: 8rem;
        font-size: 1.2rem;
    }

    #front_news .tab-content li {
        padding: 0 0 1rem;
    }
    #front_news .tab-content .date,
    #front_news .tab-content .news-title {
        width: 100%;
        font-size: 1.3rem;
    }
    #front_important {
        width: 100%;
        max-width: 100%;
        height: auto;
        float: none;
        margin: 0;
        background: #fff;
    }
    #front_important ul li {
        padding: 0 0 1rem;
    }
    #front_important ul li a {
        background: url(../img/front/important-icon.png) left top .2rem no-repeat;
        padding: 0 0 0 2rem;
        font-weight: bold;
    }
    #front_important a[href*="corporate/office"] {
        padding: 1rem 1rem 1rem 3rem;
        color: #fff;
        background-position: left 1rem center;
        margin: 0;
        width: 100%;
    }
    #front_topics {
        padding: 1rem 1rem 2rem;
    }
    #front_topics .head_block {
        padding: 2rem;
        margin: 0 0 1rem;
    }
    #front_topics .head_block h2.ttl {
        margin: 0;
    }
    #front_topics .head_block h2.ttl span {
        display: inline-block;
        margin: 0 0 0 1rem;
    }
    #front_topics .wrapper {
        padding: 0;
    }
    #front_topics .topics_content {
        margin: 0 0 2rem;
        padding: 0 1.5rem 2rem;
        overflow: visible;
    }
    #front_topics .topics_content:last-child {
        border: none;
    }
    #front_topics .topics_content .img-block {
        float: none;
        width: 10rem;
        max-width: 40%;
        margin: 0 0 1.2rem;
    }
    #front_topics .topics_content .img-block img {
        width: 100%;
        height: auto;
        display: block;
    }
    #front_topics .topics_content .text-block {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0;
    }
    #front_topics .topics_content .text-block h3 {
        margin: 0 0 1rem;
        font-size: 1.4rem;
        line-height: 1.5;
        padding: 0;
    }
    #front_topics .topics_content .text-block p {
        font-size: 1.2rem;
        line-height: 1.6;
        margin: 0 0 1rem;
    }
    #front_topics .topics_content .text-block a,
    #front_topics .topics_content .text-block a.more-btn {
        float: none !important;
        display: inline-block;
        width: auto;
        min-width: 14rem;
        margin: 0.5rem 0 0;
        padding: 0.8rem 1.4rem;
        text-align: center;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 641px) and (max-width: 979px) {
    #front_products li {
        display: inline-block;
        position: relative;
        width: 23.9%;
        background-color: #fff;
        border: solid 1px #48b587;
        border-radius: 5px;
        margin-right: 1%;
    }
    #front_products li:nth-child(even) {
        margin-right: 1%;
    }
    #front_products li:last-child {
        margin: 0;
    }
    #front_products .content a {
        padding: 60% 10px 20px;
    }
    #front_products li a p {
        text-align: left;
        font-size: 12px;
        line-height: 1.3;
    }
}