/* 外部スタイルシート */
@charset "utf-8";

/*//////////////////////////////////////////

	common.css
	サイト共通・基本設定

//////////////////////////////////////////*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Verdana, "ＭＳ Ｐゴシック", sans-serif;
    width: 0 auto;
    /*background:#f8f8f8;*/
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

a {
    text-decoration: none;
}

hr {
    border: none;
    height: 1px;
    color: #FFFFFF;
    margin: 0 6 0 6;
}

#parent {
    /*text-align:center;*/
}

.margin {
    /*padding:0.3em;*/
    margin: 0.5em 0.5em 0 0.75em;
}

/*------------------------------------------
			リストマーク
------------------------------------------*/
.list_mark {
    position: relative;
    margin: 0.4em 0 0 0.5px;
    /*0.2em;*/
    /*padding: 0 0.5em 0 0.5em;*/
}

.list_mark::before {
    position: absolute;
    content: '';
    top: 0.1em;
    left: 0.3em;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent #008080;
}

.list_mark_sp {
    padding: 0.5px 0 0 25px;
    /*18px;*/
}

.list_mark_nv {
    position: relative;
    margin: 0;
    padding: 0 0.5em 0 1.2em;
}

.list_mark_nv::before {
    position: absolute;
    content: '';
    top: 0.3em;
    left: 0.3em;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent #0000A0;
}

.list_mark_nv_m {
    position: relative;
    margin: 0;
    padding: 0 0.5em 0 1.0em;
}

.list_mark_nv_m::before {
    position: absolute;
    content: '';
    top: 0.3em;
    left: 0.3em;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 5px;
    /*7px 0 7px 10px;*/
    border-color: transparent transparent transparent #0000A0;
}

.list_mark_cc01::before {
    border-color: transparent transparent transparent #007bbb;
}

/*------------------------------------------
			リンクテキスト
------------------------------------------*/
.link_text {
    color: #000;
    text-decoration: none;
}

.link_text A {
    color: #000;
}

.link_text A:visited {
    color: #000;
}

/*------------------------------------------
			幅のリサイズ
------------------------------------------*/
.width_resize01 {
    width: 270px;
}

/*//////////////////////////////////////////

	ヘッダー共通・基本設定

//////////////////////////////////////////*/
/*------------------------------------------
	　　	　ヘッダーレイアウト
------------------------------------------*/
#header {
    margin: 0 auto;
    padding-bottom: 5px;
    width: 1024;
}

.header_text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #000000;
    /*background-color: #0168b3;*/
    font-size: 0.7em;
    font-weight: normal;
    margin-top: 0;
    /* 左側に余白*/
    margin-bottom: 10;
    /* 左側に余白*/
    padding-left: 0;
    text-align: left;
    width: 1024;
}

.header_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    vertical-align: bottom;
    width: 1024;
}

.header_bnr {
    margin-bottom: 0;
    /*border:2px solid red;*/
}

.header_link {
    margin-top: 5px;
    margin-bottom: 0;
}

.recruit_box {
    vertical-align: middle;
    /*border:2px solid red;*/
    margin-top: auto;
    margin-bottom: 10;
}

/*-------　TOPロゴ　縁取り　　-------------------*/
/*.img_main:visited{
    color:navy;
}*/
/*------------------------------------------
		グローバルナビ	
------------------------------------------*/
.center_01 {
    background-color: #1d4293;
}

.menu-container {
    margin: 0 auto 10px;
/*	margin: 0 0 10px 0; */
    padding: 0;
/*    background-color: #1d4293; */
    /*#0168b3;/*f5f5f5;*/
    width: 1024;
}

.menu-container .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
 /*   width: 1024; */
    background-color: #1d4293;
    overflow: hidden;
}

.menu-container .menu .menu-item {
    flex: 1;
    color: #000;
    border-bottom: 2px solid #1d4293;
    border-top: 2px solid #1d4293;
    padding: 0 2.5px;
}

.menu-container .menu .menu-item a {
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 0.8em 0.4em;
    text-align: center;
    text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
    background: #f4fbfe;
    color: #1d4293;
    font-weight: bold;
}

.menu-container .menu .menu-item:last-child,
.menu-container .menu .menu-item:first-child {
    padding: 0;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 10000;
}

.menu-container .fixed ul li a {
    padding: 0;
}


.menu_list ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 960px) {
    .menu-container .menu {
        width: 100%;
    }

    .menu-container .menu .menu-item {
        flex: 0 1 25%;
    }
}

@media screen and (max-width: 768px) {
    .menu-container .menu {
        flex-wrap: wrap;
        width: 100%;
    }

    .menu-container .menu .menu-item {
        flex: auto;
        width: 25%;
    }

    .menu-container .menu .menu-item:nth-child(4n) a {
        border-right: 1px solid #1d4293;
    }

    .menu-container .menu .menu-item:nth-child(n + 5) a {
        border-top: none;
    }

    .menu-container .menu .menu-item:first-child a:hover {
        border-left: 3px solid #1d4293;
    }

    .menu-container .menu .menu-item:nth-last-of-type(1) a:hover {
        border-right: 3px solid #1d4293;
    }
}

/*//////////////////////////////////////////

	コンテンツ共通・基本設定

//////////////////////////////////////////*/
/*------------------------------------------
			コンテンツメイン
------------------------------------------*/
#content {
    background-color: #f5f5f5;
    /* 背景色指定 */
    display: flex;
    /* フレックスボックスにする */
    padding: 5px;
    /* 余白指定 */
    width: 1024px;
    align-items: stretch;
    /* 縦の位置指定 */
    text-align: left;
    margin: 0 auto;
}

#main {
    background-color: #ffffff;
    /* 背景色指定 */
    width: 76%;
}

#side {
    background-color: #ffffff;
    /* 背景色指定 */
    width: 24%;
}

.content_item {
    padding: 10px;
    margin: 10px;
    /* 外側の余白 */
    border-radius: 5px;
    /* 角丸指定 */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 768px) {
    #content {
        flex-wrap: wrap-reverse;
        /* 折り返し指定 */
        flex-direction: column-reverse;
        /* 要素の並び順 */
        justify-content: flex-start;
        flex-direction: row;
        /* 要素の並び順 */
        width: 100%
    }

    #main {
        width: 100%;
    }

    #side {
        width: 100%;
    }
}

/*------------------------------------------
			サイドバー
------------------------------------------*/
/*--- サイドバナー　---*/
.side_bnr_bl {
    margin-top: 5px;
    padding: .3em;
    border: double 5px #90CAF9;
    box-shadow: 0px 0px 0px 5px #2196F3;
    width: 98%;
}

.side_bnr_bl:hover {
    background: rgba(2, 135, 96, 0.1);
}

.side_bnr_pi {
    padding: .3em;
    border: double 5px #ffb6c1;
    box-shadow: 0px 0px 0px 5px #e7609e;
    width: 98%;
}

.side_bnr_pi:hover {
    background: rgba(231, 96, 158, 0.1);
}

.side_bnr_gr {
    padding: .3em;
    border: double 5px #7ebeab;
    box-shadow: 0px 0px 0px 5px #006e54;
    width: 98%;
}

.side_bnr_gr:hover {
    background: rgba(126, 190, 171, 0.2);
}

a.side_bnr_text01 {
    display: inline-block;
    border-bottom: 4px solid #dc143c;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.5px;
    vertical-align: middle;
}

.side_bnr_text02 {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
}

a.side_bnr_text01,
a.side_bnr_text01 :visited,
a.side_bnr_text02,
a.side_bnr_text02 :visited {
    color: #000000;
}

.side_list_box {
    border: 2px solid #0094D6;
}

.side_list_box_title {
    color: #0094D6;
    text-align: center;
    margin: .2em auto;
    width: calc(100% - 2em);
    border-bottom: 2px solid #0094D6;
    font-size: 1.4em;
    font-weight: bold;
}

.side_list_box .side_list_box_menu {
    background-color: #fff;
    /*background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
  */
    background-size: 8px 100%, 100% 2em;
    line-height: 2em;
    padding: 0.2em 0.2em 0.2em 0.5em;
    font-size: 0.85em;
}

.side_list_box .side_list_box_menu a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dashed #9F99A3;
    display: block;
}

.side_list_box .side_list_box_menu a:hover {
    color: #000;
    font-weight: bold;
    background-color: #f5f5f5;
    /*border-bottom:1px solid #9F99A3;*/
}

.side_list_box_menu .side_list_box_allow:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f138";
    /*アイコンの種類*/
    /*position: absolute;*/
    left: 5px;
    /*左端からのアイコンまでの距離*/
    color: #0094D6;
    /*アイコン色*/
    padding-right: 0.2em;
}

.side_list_box_reco {
    font-size: 0.85em;
    font-weight: bold;
    padding: 0.5px 0.2em 0.2em 0.4em;
    color: white;
    background-color: #0000a0;
    /*元々#f30100*/
    line-height: 0.9em;
    border-radius: 5px;
    margin-top: 0.5em;
}

/*------------------------------------------
    サイドメニュー（トラブル）
------------------------------------------*/
.side_list_box2 {
    border: 2px solid #ff0000;
    margin: 15px 0;
}

.side_list_box2_title {
    color: #ff0000;
    text-align: center;
    margin: .4em auto;
    width: calc(100% - 2em);
    border-bottom: 2px solid #ff0000;
    font-size: 1.0em;
    font-weight: bold;
}

.side_list_box2 .side_list_box2_menu a {
    color: #333;
    margin: .5em auto;
    text-decoration: none;
    border-bottom: 0px dashed #9F99A3;
    text-align: center;
    font-size: 0.9em;
    display: block;
}

/*------------------------------------------
    サイドメニューBOX（法人様向け）
------------------------------------------*/
.menu_box_co {
    border: solid 3px #0000a0;
    margin: 1em 0.1px 1em 0;
    position: relative;
}

.menu_title_co {
    background: #0000a0;
    /*#4DADA1;*/
    color: #FFF;
    font-size: 1.75em;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding-left: 5px;
    text-align: center;
}

.menu_title_co ul li a {
    padding: 0.5px 0 0 1.2em;
    font-size: 0.5em;
}

/*------------------------------------------
	サイドメニューBOX（工事メニュー関連）
------------------------------------------*/
.menu_box {
    border: solid 3px #008080;
    margin: 1em 0.1px 1em 0;
    position: relative;
}

.menu_title {
    background: #008080;
    /*4DADA1;*/
    color: #FFF;
    font-size: 1.75em;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding-left: 5px;
    text-align: left;
}

.menu_title ul li a {
    padding: 0.5px 0 0 1.2em;
    font-size: 0.5em;
}

/*------------------------------------------
			メニューリスト
------------------------------------------*/
.menu_box_co ul {
    background-color: #f8f8ff;
    /*#add8e6;/*#f8f8ff;*/
    border: none;
    color: #333;
    list-style-type: none;
    margin: 0;
    padding: 0 0.5em 0 0.5px;
}

.menu_box_co ul li {
    /*border-bottom: dashed 1px #4DADA1;*/
    line-height: 1.5;
    padding: 0.5em 0 0.5em 0.5px;
    /*    padding-top:1em; */
    /*    padding-bottom:1em;*/
}

.menu_box_co ul li:last-of-type {
    border-bottom: none;
}

.menu_box_co UL li a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dashed #9F99A3;
    display: block;
}

.menu_box_co UL li a:hover {
    color: #000;
    font-weight: bold;
    /*border-bottom:1px solid #9F99A3;*/
}

.menu_box_co UL li:before {
    /*疑似要素*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f138";
    /*アイコンの種類*/
    position: absolute;
    left: 5px;
    /*左端からのアイコンまでの距離*/
    color: navy;
    /*アイコン色*/
}

.menu_box ul {
    background-color: #f8f8ff;
    border: none;
    color: #333;
    list-style-type: none;
    margin: 0;
    padding: 0 0.5em 0 0.5px;
}

.menu_box ul li {
    line-height: 1.2;
    padding: 0.5em 0 0.5em 0.5px;
}

.menu_box ul li:last-of-type {
    border-bottom: none;
}

.menu_box UL li a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dashed #9F99A3;
    display: block;
}

.menu_box UL li a:hover {
    color: #333;
    font-weight: bold;
}

.menu_box .side_bnr li a {
    border-bottom: none;
}

.menu_box_ UL li:before {
    /*疑似要素*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f138";
    /*アイコンの種類*/
    position: absolute;
    left: 5px;
    /*左端からのアイコンまでの距離*/
    color: navy;
    /*アイコン色*/
}

/*------------------------------------------
	サイドメニュー（おすすめ） もう使わない消す
------------------------------------------*/
.side_reco_box01 {
    width: 100%;
    display: block;
    text-decoration: none;
    background: #f7f39c;
    color: #fff;
    line-height: 1.8em;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    padding: 0.5em 0 0.5em 1.5px;
    margin-left: 2.5px;
    top: 0;
}

.side_reco_box02 {
    width: 100%;
    display: block;
    text-decoration: none;
    background: #ddbcff;
    color: #fff;
    line-height: 1.8em;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.19);
    padding: 0.5em 0 0.5em 1.5px;
    margin-left: 2.5px;
    top: 0;
}

/*------------------------------------------
			LOOOPでんき
------------------------------------------*/
.box01 {
    padding: 1em;
    margin: 1.5em 0;
    font-weight: bold;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #000;
    /*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;
    /*線*/
    border-radius: 10px;
    /*角の丸み*/
    text-align: center;
}

.box01 p {
    margin: 0;
    padding: 0;
}

.box01 a {
    color: blue;
}

.box01 a:visited {
    color: blue;
}


/*------------------------------------------
	サイド：アコーディオンメニュー
------------------------------------------*/
.side_accordion {
    position: relative;
    overflow: hidden;
    width: 98%;
    margin: 0;
    color: #fff;
    /*00336D;/*#ffffff;*/
}

.side_accordion input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.side_accordion label {
    font-weight: bold;
    line-height: 2;
    position: relative;
    display: block;
    padding: 0 0 0 0.5em;
    cursor: pointer;
    margin: 0 0 1px 0;
    background: #000080;
    /*#60c5ba;/*EAEAE0;/*4DADA1;*/
    text-align: left;
    font-size: 1.1em;
}

.side_accordion .side_acc_content {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
    color: #333333;
    background: #f8f8ff;
    text-align: left;
    font-size: 0.85em;
}

.side_accordion .side_acc_content ul {
    list-style-type: none;
    margin: 0;
    padding: 0.5px 0 0.5px 1.5px;
}


/* :checked */
.side_accordion input:checked ~ .side_acc_content {
    max-height: 30em;
}

/* Icon */
.side_accordion label::after {
    line-height: 2;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 2em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center;
    vertical_align: bottom;
}

.side_accordion input[type="checkbox"] + label::after {
    content: '▼';
}

.side_accordion input[type=checkbox]:checked + label::after {
    transform: rotate(180deg);
}


/*------------------------------------------
	 協力会社バナー(BusinessPartner)
------------------------------------------*/
.bp {
    border: double 7px navy;
    margin: 0.5px;
    padding: 0.5em;
    font-weight: bold;
    color: #000;
}

.bp_font {
    font-size: 0.9em;
}

.bp a {
    text-decoration: none;
    color: #000;
}

.bp a:hover {
    opacity: 0.7;
}

/*//////////////////////////////////////////

	メイン共通・基本設定

//////////////////////////////////////////*/
/*------------------------------------------
	 パンくずリスト
------------------------------------------*/
.breadcrumb {
    font-size: 1.0em;
    margin: 0.5em;
    text-align: left;
    width: 900px;
}

.breadcrumb a {
    text-decoration: underline;
    /*none;*/
    color: #000;
}

.breadcrumb .breadcrumbs {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb li {
    display: inline-block;
    position: relative;
    padding-right: calc(16px + 8px);
    margin-right: 8px;
    color: #000;
}

.breadcrumb li::before {
    content: '›';
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2;
    text-align: center;
    font-size: 1.2em;
    color: inherit;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.breadcrumb li:last-child {
    margin-right: 0;
    padding-right: 0;
    color: #000;
    font-weight: bold;
}

.breadcrumb li:last-child::before {
    content: normal;
}

/*------------------------------------------
			H1タグ（ページタイトル）
------------------------------------------*/
h1 {
    color: #364e96;
    /*文字色*/
 /*   margin: 0 0.5em 20px 0.25em; */
 /*    padding: 0.5em 5px;  */ 
 /*   border-top: solid 3px #364e96;  */
    /*上線*/
 /*   border-bottom: solid 3px #364e96;  */
    /*下線*/
    margin: 0;
}

/*------------------------------------------
			H2タグ（中見出し）
------------------------------------------*/
h2 {
/*    color: #000;
    padding: 0.4em 1.2em;
    width: 99%;
    margin: 0 1.0em 10px 5px;
    font-size: 1.75em;
    position: relative;
    border-bottom: solid 3px #d7d7d7;
    background-color: #f7f7f7;*/
}

h2::before {
/*    background-color: #0168b3;*/
    /*#ef858c; /* 左側の線の色 */
/*    border-radius: 5px;
    content: '';
    position: absolute;
    top: 5px;
    left: 5px; */
    /* 左端からの位置 */
   /* width: 8px;*/
    /* 左側の線の幅 */
 /*   height: 80%;
    text-align: center;
}

h2::after {
    background-color: #D3EDFB;
    /*#f3cbd0; /* 右側の線の色 */
/*    border-radius: 5px;
    content: '';
    position: absolute;
    top: 5px;
    /*0;*/
/*    left: 18px;*/
    /* 左端からの位置 */
/*    width: 8px;*/
    /* 右側の線の幅 */
/*    height: 80%;*/
}

/*------------------------------------------
			H3タグ（小見出し）
------------------------------------------*/
h3 {
    position: relative;
    padding: 0.1em 2.2em;
    width: 95%;
    margin: 0 1.0em 15px 10px;
    border-bottom: 2px solid #D3EDFB;
    box-shadow: 0px 4px 0px 0px #0168b3;
    font-size: 1.5em;
}

h3::after {
    position: absolute;
    content: '';
    bottom: 35%;
    left: .8em;
    width: 12px;
    height: 12px;
    background-color: #0168b3;
    transform: rotate(45deg);
}

.h3 {
    color: #000;
    /* 文字色 */
    padding: 0.4em 1.2em;
    width: 95%;
    margin: 0 1.0em 10px 10px;
    position: relative;
    font-size: 1.5em;
    background-color: #f7f7f7;
    /*#ef858c; /* 左側の線の色 */
}

.h3::before {
    background-color: #51a1a2;
    /* 左側の線の色 */
    border-radius: 5px;
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    /* 左端からの位置 */
    width: 5px;
    /* 左側の線の幅 */
    height: 75%;
}

.h3::after {
    background-color: #c6e0d5;
    /* 右側の線の色 */
    border-radius: 5px;
    content: '';
    position: absolute;
    top: 2px;
    left: 18px;
    /* 左端からの位置 */
    width: 5px;
    /* 右側の線の幅 */
    height: 75%;
}

h4 {
    padding: 0.5em 0.3em;
    background: #dcdcdc;
    border-left: 12px double #a9a9a9;
    font-size: 1.5em;
    margin: 0.5em;
}

h5 {
    padding: 0.5em 0.3em;
    background: #c6e2f8;
    font-size: 1.2em;
    margin: 0.2em;
}

/*------------------------------------------
	見出し（メインページの吹き出し）
------------------------------------------*/
.section_title {
    position: relative;
    padding: 0.6em;
    background: #f2cf01;
    border-radius: 7px;
    color: red;
    width: 275;
    font-weight: bold;
    font-size: 1.5em;
    text-shadow: 0 0 3px 3px #0000A0;
}

.section_title::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 15px;
    border: 15px solid transparent;
    border-top: 15px solid #f2cf01;
    width: 0;
    height: 0;
}

/*------------------------------------------
	見出し（カテゴリー）
------------------------------------------*/
.category_box01 {
    position: relative;
    font-size: 1.1em;
    color: #ffffff;
    font-weight: bold;
    background: #0000A0;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 0 0 3px 3px #0000A0;
    padding: 0.4em 1.5em;
    text-align: center;
}

.category_box02 {
    padding: 0 1.0em;
}

.category_box03 {
    text-align: left;
    width: 480px;
}

/*------------------------------------------
	 サイト誘導リンク 
------------------------------------------*/
/*----------- カラー：Navyより薄め  ---------*/
.button_bl_m {
    display: block;
    text-decoration: none;
    height: 35px;
    width: 625px;
    text-align: left;
    color: #1e50a2;
    border: solid 1px #1e50a2;
    padding: 0.4em 1.2em;
    /*文字の上下 左右の余白*/
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_bl_m:hover {
    background: #1e50a2;
    color: #fff;
}

/*----------- カラー：navy  ---------*/
.button_gr_m {
    display: block;
    text-decoration: none;
    height: 35px;
    width: 315px;
    text-align: left;
    color: #0000A0;
    border: solid 1px #0000A0;
    font-size: 0.85em;
    padding: 0.5em 0.9em;
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_gr_m:hover {
    background: #0000A0;
    /*#008dd4;/*#00336D;/*#008080;*/
    color: #fff;
}

/*----------- カラー：green  ---------*/
.button_gr_l {
    display: block;
    text-decoration: none;
    height: 35px;
    width: 450px;
    text-align: left;
    color: #008080;
    border: solid 1px #008080;
    font-size: 1.0em;
    padding: 0.4em 1.2em;
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_gr_l:hover {
    background: teal;
    color: #fff;
}

/*----------- カラー：青系  ---------*/
.button_te_m {
    display: block;
    text-decoration: none;
    height: 35px;
    width: 530px;
    text-align: left;
    color: #3883c2;
    border: solid 1px #3883c2;
    font-size: 0.9em;
    padding: 0.4em 1.2em;
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_te_m:hover {
    background: #3883c2;
    color: #fff;
}

/*----------- カラー：ストロベリーピンク  ---------*/
.button_st_m {
    display: block;
    text-decoration: none;
    height: 35px;
    width: 470px;
    text-align: left;
    color: #bb1e5e;
    border: solid 1px #bb1e5e;
    font-size: 0.9em;
    padding: 0.4em 1.2em;
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_st_m:hover {
    background: #bb1e5e;
    color: #fff;
}

/*----------- カラー：ストロベリーピンク2  ---------*/
.button_st_m2 {
    display: inline-block;
    text-decoration: none;
    height: 35px;
    width: 300px;
    text-align: left;
    color: #bb1e5e;
    border: solid 1px #bb1e5e;
    font-size: 0.9em;
    padding: 0.4em 1.2em;
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_st_m2:hover {
    background: #bb1e5e;
    color: #fff;
}

/*----------- カラー：navy  ---------*/
.button_bl_m_ib {
    display: inline-block;
    text-decoration: none;
    height: 40px;
    width: 315px;
    text-align: left;
    color: white;
    border: solid 1px #0182e0;
    background: #0182e0;
    font-size: 0.95em;
    padding: 0.5em 0.9em;
    margin: 0.4em 0.8em;
    font-weight: normal;
}

.button_bl_m_ib:hover {
    background: white;
    color: #0182e0;
}

/*----------- カラー：green  ---------*/
.button_gr_m_ib {
    display: inline-block;
    text-decoration: none;
    height: 40px;
    width: 315px;
    text-align: left;
    color: white;
    border: solid 1px #3cb371;
    background: #3cb371;
    font-size: 0.95em;
    padding: 0.5em 0.9em;
    margin: 0.4em 0.8em;
    font-weight: normal;
}

.button_gr_m_ib:hover {
    background: white;
    color: #3cb371;
}

/*----------- ちょっと変更したいときの  ---------*/
.width_resize01 {
    width: 280px;
}

.width_resize02 {
    width: 530px;
}

.width_resize03 {
    width: 580px;
}

/*------------------------------------------
	 アイテムボックス
------------------------------------------*/
.item_box {
    width: 610px;
    position: relative;
    background: #f1f1f1;
    overflow: visible;
    margin: 0.5em;
    padding: 0.5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-weight: bold;
}

.item_box_maxi {
    width: 685px;
    position: relative;
    background: #f1f1f1;
    overflow: visible;
    margin: 0 0.5em 0.5em 0.5em;
    padding: 0.5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-weight: bold;
}

.item_box_mini {
    width: 95%;
    position: relative;
    background: #f1f1f1;
    overflow: visible;
    margin: 0 0.5em 0.5em 0.5em;
    padding: 0.5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-weight: bold;
}

/*------------------------------------------
	メニューボックス
------------------------------------------*/
.menu_box01 {
    border: solid 3px #4DADA1;
    margin: 1em 0.1px 1em 0;
    position: relative;
}

.menu_title01 {
    background: #4DADA1;
    color: #FFF;
    font-size: 1.75em;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding-left: 5px;
    text-align: left;
}

.menu_title01 ul li a {
    padding: 0.5px 0 0 1.2em;
    font-size: 0.5em;
}

/*------------------------------------------
	テキストボックス
------------------------------------------*/
/*  二重線囲み  */
.text_box01 {
    margin: 3em 0;
    /*border: solid 2px #ee8992;*/
    padding: 0.3em 0.5em;
    position: relative;
    color: #000000;
    /*#ee8992;*/
    /*background: #f9f9f9;*/
    width: 96%;
    border: 3px solid #000080;
    outline: 1px solid #000088;
    /* 線幅、線のスタイル、カラー */
    outline-offset: -10px;
    /* 対象の要素からの距離、マイナス(内側)にも対応 */
    /*  padding:2%;*/
}

.note_text01 {
    font-size: 0.8em;
    font-weight: bold;
}

.note_text02 {
    font-size: 1.2em;
    font-weight: bold;
}

.note_text03 {
    font-size: 0.8em;
}

.note_text04 {
    font-size: 0.8em;
    color: red;
}

/*------------------------------------------
	返済シミュレーションボタン
------------------------------------------*/
.button_simu {
    display: block;
    position: relative;
    text-decoration: none;
    height: 35px;
    width: 280px;
    text-align: left;
    color: #0000A0;
    border: solid 1px #0000A0;
    font-size: 0.85em;
    padding: 0.5em 1.2em;
    margin: 0.4em 0.8em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-weight: normal;
}

.button_simu:before {
    content: "";
    width: 3px;
    display: block;
    position: absolute;
    top: 0.5em;
    bottom: 0;
    left: 5px;
}

.button_simu:hover {
    background: #0000A0;
    /*#008dd4;/*#00336D;/*#008080;*/
    color: #fff;
}

/*------------------------------------------
	メモボックス
------------------------------------------*/
.memo_box {
    position: relative;
    margin: 0.5em 0.5em;
    padding: 2.5em 1em .8em;
    width: 90%;
    border-style: solid;
    border-width: 7px 0 0 0;
    border-color: navy;
    background-color: white;
    color: #666;
    box-shadow: 0 0 3px #999;
}

.memo_box_title {
    position: absolute;
    top: 8px;
    left: 15px;
    background-color: white;
    color: navy;
    font-size: 1.25em;
    font-weight: bold;
    border-style: none none double;
    border-color: #0168b3;
    border-width: 3px;
}

.memo_box p {
    font-size: 0.9em;
    text-align: left;
    padding-left: 0.5em;
}

.memo_box01 {
    margin: 2em 0;
    width: 95%;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
    /* inset; */
    font-weight: bold;
    border-style: solid;
    border-width: 7px 0 0 0;
    border-color: #0074bf;
    color: #666;
}

.memo_box01 p {
    font-size: 0.9em;
    text-align: left;
    padding: 0.5em 0.5em 1.5em 1.0em;
}

.memo_box02 {
    margin: 0.5em;
    border: 2px solid #2196f3;
    letter-spacing: .3px;
}

.memo_box_title02 {
    color: #fff;
    font-weight: bold;
    background-color: #2196f3;
    padding: 4px 6px;
    text-align: center;
}

.memo_box02 p {
    margin: 0;
    padding: 0.5em;
}

.memo_box03 {
    position: relative;
    margin: 0.5em 0.5em;
    padding: 2.5em 1em .8em;
    width: 90%;
    border-style: solid;
    border-width: 7px 0 0 0;
    border-color: #008080;
    background-color: white;
    color: #666;
    box-shadow: 0 0 3px #999;
}

.memo_box_title03 {
    position: absolute;
    top: 8px;
    left: 15px;
    background-color: white;
    color: #008080;
    font-size: 1.25em;
    font-weight: bold;
    border-style: none none double;
    border-color: #008080;
    border-width: 3px;
}

.memo_box03 p {
    font-size: 0.9em;
    text-align: left;
    padding-left: 0.5em;
}

/*------------------------------------------
	画像付き　メモボックス
------------------------------------------*/
.img_box {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    /* Safari etc. */
    -ms-flex-direction: row-reverse;
    /* IE10        */
    -webkit-justify-content: space-between;
    /* Safari etc. */
    -ms-justify-content: space-between;
    /* IE10        */
    justify-content: space-between;
}

.img_box_text {
    text-align: left;
    width: 60%;
    font-size: 0.9em;
    text-align: left;
    padding: 0.5em;
}

.img_box_pict {
    width: 30%;
    margin-left: 3%;
    margin-right: 1%;
    padding: 0 0 1.5em 0;
}

.img_box_pict img {
    width: 100%;
    height: auto;
}

/*------------------------------------------
	 左斜めがけリボン（赤ベタ白字）
------------------------------------------*/
.item_box_ribbon {
    width: 126px;
    height: 128px;
    overflow: hidden;
    position: absolute;
    top: -6px;
    left: -6px;
}

.item_box_ribbon .item_box_ribbon_t {
    font-size: 1em;
    line-height: 1.2em;
    position: relative;
    top: 32px;
    left: -35px;
    width: 170px;
    padding: 7px 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align: center;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: red;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.item_box_ribbon .item_box_ribbon_t::before,
.item_box_ribbon .item_box_ribbon_t::after {
    position: absolute;
    bottom: -4px;
    content: '';
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-color: #EF6C00 transparent transparent transparent;
}

.item_box_ribbon .item_box_ribbon_t::before {
    left: 0;
}

.item_box_ribbon .item_box_ribbon_t::after {
    right: 0;
}

.new_info {
    border: 1px solid gray;
}

.new_info_title {
    position: relative;
    padding: .3em;
    border-bottom: 1px solid #7986CB;
    margin: .5em;
}

.new_info_title::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 2;
    content: '';
    width: 15%;
    height: 5px;
    background-color: #303F9F;
}

.new_info > span {
    padding: 0.5em;
}

/*------------------------------------------
	 フローチャート(工事の流れページ)
------------------------------------------*/
ul.stepflow {
    border: none;
    margin: 1em 0.5em;
    padding: 0;
    list-style: none;
}

ul.stepflow > li:before,
ol.stepflow > li:before {
    background-color: #4dd0e1 !important;
    /*#6283c2;/*cccccc*/
}

.stepflow li {
    position: relative;
    padding: 0 0 1.5em 1.8em;
}

.stepflow > li:before {
    content: "";
    width: 3px;
    background: #4dd0e1;
    /*#6283c2;/*cccccc;*/
    display: block;
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 5px;
}

.stepflow-white {
    content: '';
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px #4dd0e1;
    /*#0168b3;/*#232F3E;*/
}

.stepflow-black {
    content: '';
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px #4dd0e1;
    /*#0168b3;/*232F3E;*/
    background-color: #4dd0e1;
    /*#0168b3;/*232F3E;*/
}

.stepflow_label {
    padding: 3px 0px 8px 0px;
    margin-bottom: 8px;
    color: #999999;
    font-size: .8em;
    font-weight: bold;
}

.stepflow_title {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 15px;
}

.stepflow_content {
    font-size: .9em;
    line-height: 1.5;
    margin-top: .5em;
    padding: 0 0 1.5em;
    border-bottom: dashed 1px #cccccc;
}

/*------------------------------------------
	 会社情報ナビ(会社概要・お客様の声・スタッフ紹介ページ)
------------------------------------------*/
.company_navi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.company_navi ul {
    align-items: center;
}

.company_navi li {
    list-style: none;
    margin-right: 15px;
    padding: 0 5px;
}

.company_navi li.current {
    border-bottom: 3px solid #7BCDFF;
    /*92D050;*/
}

.company_navi li:hover {
    color: #E7DA66;
    border-bottom: 3px solid #4D9BE8;
    /*008000;*/
}

.company_navi a {
    color: #000;
    font-weight: bold;
}


/*------------------------------------------
	 アイコン各種
------------------------------------------*/
/*-----------　アイコン(囲み)  ---------*/
.icon_type_lb1 {
    border: 5px #7fc2ef solid;
    /* シアン青色系　水色　*/
    display: inline-block;
    font-size: 1.5em;
    margin: 0 5px;
    padding: 0 0.5em;
}

.icon_type_lb {
    border: 5px #7fc2ef solid;
    /* 水色　*/
    border-radius: 0;
    /*background-color:#ffcfe6;*/
    display: inline-block;
    font-size: 1.5em;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_nv {
    border: 5px navy solid;
    /* ネイビー　*/
    display: inline-block;
    font-size: 1.5em;
    margin: 0 5px;
    padding: 0 0.5em;
}

.icon_type_nv1 {
    border: 5px navy solid;
    border-radius: 0;
    display: inline-block;
    font-size: 1.5em;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_mg_k {
    border: 5px #3cb371 solid;
    border-radius: 0;
    display: inline-block;
    font-size: 1.5em;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_pk_k {
    border: 5px #ffb5da solid;
    border-radius: 0;
    display: inline-block;
    font-size: 1.5em;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

/*-----------　 アイコン(角丸+背景色付き)  ---------*/
.icon_type_pi {
    border: 1px #d685b0 solid;
    /* マゼンタ色系ピンク色　*/
    border-radius: 20px;
    background-color: #d685b0;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_ye {
    border: 1px #e2eb11 solid;
    /* 黄色系のイエローグリーン */
    border-radius: 20px;
    background-color: #e2eb11;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_or {
    border: 1px #e4ad6d solid;
    /* 茶色系のオレンジ */
    border-radius: 20px;
    background-color: #e4ad6d;
    display: inline-block;
    font-size: 0.95em;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_pu {
    border: 1px #c4a6ca solid;
    /* マゼンダ色系の薄紫色 */
    border-radius: 20px;
    background-color: #c4a6ca;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_yg {
    border: 1px #c8d85b solid;
    /* 緑色系のイエローグリーン */
    border-radius: 20px;
    background-color: #c8d85b;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_bg {
    border: 1px #e5d57d solid;
    /* ベージュ系 */
    border-radius: 20px;
    background-color: #e5d57d;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_og {
    border: 1px #bee0ce solid;
    /* オパールグリーン */
    border-radius: 20px;
    background-color: #bee0ce;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_lm {
    border: 1px #e6f4ff solid;
    /* 薄い水色 */
    border-radius: 20px;
    background-color: #B0DCEE;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_rd {
    border: 1px #ff0000 solid;
    /* 赤 */
    border-radius: 20px;
    background-color: #ff0000;
    display: inline-block;
    padding: 0 0.5em;
    color: white;
}

.icon_type_si {
    border: 1px #c0c0c0 solid;
    /* シルバー */
    border-radius: 20px;
    background-color: #c0c0c0;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_pp {
    border: 1px #ffcfe6 solid;
    /*　薄いピンク（角丸） */
    border-radius: 20px;
    background-color: #ffcfe6;
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_pp1 {
    border: 1px #ffcfe6 solid;
    /* ピンク（角） */
    /*border-radius: 20px;*/
    /*background-color:#ffcfe6;*/
    display: inline-block;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

.icon_type_so {
    border: 1px #fac559 solid;
    /* サフランイエロー */
    border-radius: 20px;
    background-color: #fac559;
    display: inline-block;
    font-size: 0.95em;
    padding: 0 0.5em;
    margin: 0.25em 0 0 0;
}

/*------------------------------------------
	 左斜めがけリボン（赤ベタ白字）
------------------------------------------*/
.item_box_ribbon {
    width: 106px;
    height: 108px;
    overflow: hidden;
    position: absolute;
    top: -6px;
    left: -6px;
}

.item_box_ribbon .item_box_ribbon_t {
    font-size: 1em;
    line-height: 1.2em;
    position: relative;
    top: 26px;
    left: -33px;
    width: 150px;
    padding: 7px 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align: center;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: red;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.item_box_ribbon .item_box_ribbon_t::before,
.item_box_ribbon .item_box_ribbon_t::after {
    position: absolute;
    bottom: -4px;
    content: '';
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-color: #EF6C00 transparent transparent transparent;
}

.item_box_ribbon .item_box_ribbon_t::before {
    left: 0;
}

.item_box_ribbon .item_box_ribbon_t::after {
    right: 0;
}

/*------------------------------------------
	 NEWマークアイコン（赤字）
------------------------------------------*/
.new-icon {
    display: inline-block;
    background: #df002c;
    padding: 1px 5px;
    margin-left: 5px;
    /* 先行する文字列との間隔 */
    vertical-align: middle;
    /* 先行する文字列と上下中央揃え */
    font-size: 0.6em;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
    /* アイコンの角を丸める */
}

/*------------------------------------------
	 NEWマークアイコン（黄色字）
------------------------------------------*/
.new_icon_ye {
    display: inline-block;
    background: #ffff00;
    padding: 1px 5px;
    margin-left: 5px;
    /* 先行する文字列との間隔 */
    vertical-align: middle;
    /* 先行する文字列と上下中央揃え */
    font-size: 0.6em;
    font-weight: bold;
    color: #000;
    border-radius: 3px;
    /* アイコンの角を丸める */
}

/*------------------------------------------
		ライン（カラー：水色系）
------------------------------------------*/
.line_marker_bl {
    background: linear-gradient(#fff 60%, #D3EDFB 0%);
    font-weight: bold;
    font-size: 1.8em;
    /*margin-left:5px;*/
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
    color: #494949;
}

/*------------------------------------------
		ライン（カラー：赤系）
------------------------------------------*/
.line_marker_rd {
    background: linear-gradient(#fff 60%, #fbd3d3 0%);
    font-weight: bold;
    font-size: 1.8em;
    /*margin-left:5px;*/
    text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff;
    color: #494949;
}

/*------------------------------------------
		アコーディオンメニュー（カラー：green）
------------------------------------------*/
.accordion_g {
    position: relative;
    overflow: hidden;
    width: 98%;
    margin: 0 0 0 5px;
    color: #ffffff;
}

.accordion_g input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.accordion_g label {
    font-weight: bold;
    line-height: 2;
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    cursor: pointer;
    margin: 0 0 1px 0;
    background: #006400;
    /*4DADA1;*/
    text-align: left;
}

.accordion_g .acc_content_g {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
    color: #333333;
    background: white;
    text-align: left;
    padding-left: 5.5px;
}

.accordion_g .acc_content_g p {
    margin: 1em;
}

/* :checked */
.accordion_g input:checked ~ .acc_content_g {
    max-height: 30em;
}

/* Icon */
.accordion_g label::after {
    line-height: 2;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 2em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center;
}

.accordion_g input[type="checkbox"] + label::after {
    content: '+';
}

.accordion_g input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
}

/*------------------------------------------
		アコーディオンメニュー（カラー：緑系）
------------------------------------------*/
.accordion {
    position: relative;
    overflow: hidden;
    width: 98%;
    margin: 0 0 0 5px;
    color: #ffffff;
}

.accordion input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.accordion label {
    font-weight: bold;
    line-height: 2;
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    cursor: pointer;
    margin: 0 0 1px 0;
    background: #008dd4;
    /*4DADA1;*/
    text-align: left;
}

.accordion .acc_content {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
    color: #333333;
    background: white;
    text-align: left;
    padding-left: 5.5px;
}

.accordion .acc_content p {
    margin: 1em;
}

/* :checked */
.accordion input:checked ~ .acc_content {
    max-height: 30em;
}

/* Icon */
.accordion label::after {
    line-height: 2;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 2em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center;
}

.accordion input[type="checkbox"] + label::after {
    content: '+';
}

.accordion input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
}

/*------------------------------------------
		アコーディオンメニュー（カラー：赤系）
------------------------------------------*/
.accordion_r {
    position: relative;
    overflow: hidden;
    width: 98%;
    margin: 0 0 0 5px;
    color: #ffffff;
    border: 2px solid #dc143c;
}

.accordion_r input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.accordion_r label {
    font-weight: bold;
    line-height: 2;
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    cursor: pointer;
    margin: 0 0 1px 0;
    background: #dc143c;
    text-align: left;
}

.accordion_r .acc_content_r {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
    color: #333333;
    background: white;
    text-align: left;
    padding-left: 5.5px;
    padding-right: 5.5px;
}

.accordion_r .acc_content_r p {
    margin: 1em;
}

/* :checked */
.accordion_r input:checked ~ .acc_content_r {
    max-height: 30em;
}

/* Icon */
.accordion_r label::after {
    line-height: 2;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 2em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center;
}

.accordion_r input[type="checkbox"] + label::after {
    content: '+';
}

.accordion_r input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
}

/*------------------------------------------
		カードボックス
------------------------------------------*/
.card2 {
    width: 300px;
    margin: 20px;
    border-radius: 5px;
    background-color: red;
    /*#fff;*/
    box-shadow: 0 3px 6px #ccc;
    display: inline-block;
    text-align: center;
}

.box2 {
    display: flex;
}

.icon2 {
    width: 48px;
    height: 48px;
    margin: 10px;
    border-radius: 24px;
    object-fit: cover;
}

.name2 {
    font-size: 60%;
    margin-bottom: 10px;
    color: #888;
    background-color: #fff;
    height: 1.5em;
}

/*.image2 {
    width: 100%;
    height: 200px;
    object-fit: cover;
}*/
.title2 {
    font-size: 150%;
    margin: 10px 0;
    color: #444;
    background-color: #fff;
}

.content2 {
    padding: 10px;
    color: #666;
    background-color: #fff;
}

/*------------------------------------------
			トップへ戻るボタン
------------------------------------------*/
.top_btn {
    position: fixed;
    /*固定*/
    bottom: 50px;
    /*場所を右下に移動*/
    right: 20px;
    /*場所を右下に移動*/
    display: block;
    /*aタグをblock要素に変更*/
    background: rgba(128, 128, 128, 0.8);
    /*以下、デザインはご自由に！！*/
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 22px;
    border-radius: 50px;
    padding-top: 30px;
    box-sizing: border-box;
    outline: 0;
}

.top_btn:before {
    content: '\25B2';
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
}

.top_btn a {
    text-decoration: none;
    color: white;
    /*色*/
}

/*------------------------------------------
			お問い合わせおすすめマーク
------------------------------------------*/
.reco {
    font-family: 'Quicksand', 'Avenir', 'Arial', sans-serif;
    background: red;
    /*#008080;*/
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px 7px 3px;
    font-size: 0.7em;
}

.text03 {
    color: #000000;
    /*文字色*/
    padding: 0.5em 0;
    /*上下の余白*/
    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    /* 太字                    */
    font-size: 180%;
    /* 文字を大きくする        */
}

.text04 {
    color: #000000;
    /*文字色*/
    padding: 0.5em 0;
    /*上下の余白*/
    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    /* 太字                    */
    font-size: 120%;
    /* 文字を大きくする        */
}

.text05 {
    font-weight: bold;
    /* 太字                    */
    font-size: 0.9em;
    /* 文字を大きくする        */
}

.text03 a,
.text03 a:visited {
    color: navy;
}

/*------------------------------------------
			リクルート
------------------------------------------*/
.recruit {
    width: 200px;
    display: block;
    text-decoration: none;
    background: #0168b3;
    /*background-image: url(recruit.jpg);*/
    color: #fff;
    border-radius: 5px;
    border: 2px solid #0168b3;
    box-shadow: 1px 2px 4px #D3D3D3;
    padding: 0.5em 0 0.5em 1.5px;
    margin: 0.5px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.recruit:hover {
    font-weight: bold;
}

.recruit:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: none;
}

/*//////////////////////////////////////////

	フッター共通・基本設定

//////////////////////////////////////////*/
/*------------------------------------------
		対応地域リスト
------------------------------------------*/
.area_list {
    text-align: left;
    font-size: 0.85em;
    width: 95%;
}

.area_list a {
    margin: 20px 0px 20px 10px;
    padding: 0.5px;
}

.area_list_title {
    position: relative;
    padding: .1em .3em .1em 1em;
    border-bottom: 1px solid #00336D;
    font-size: 1.2em;
    width: 100%;
}

.area_list ul {
    padding: 0.3em 0.5em;
    list-style-type: none;
    border: none;
}

.area_list li {
    display: inline-block;
    position: relative;
    padding-left: 5px;
    width: 100%;
    /*auto;*/
    /*width:120px;*/
}

/*@media screen and (max-width: 414px) {*/
@media screen and (min-width: 990px) {

    /*幅990px以上に適用されるCSS（PCサイズ以上）*/
    .area_list li {
        /*width: auto;*/
        width: 130px;
    }
}

/*@media screen and (max-width: 767px) {*/
@media screen and (min-width: 768px) {

    /*幅768px以上に適用されるCSS（タブレットサイズ以上）*/
    .area_list li {
        width: 25%;
        /*50%;*/
    }
}

/*------------------------------------------
	フッターレイアウト
------------------------------------------*/
#footer {
/*   width: auto; */
    /*100%;*/
    font-size: 0.85em;
	width: 100%;
	margin: 0 auto;
}


.footer p {
    border-bottom: 2px solid navy;
    margin: 0;
}

.footer_m {
    display: flex;
    /*display:-webkit-box;*/
    display: -ms-flexbox;
    /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    /* IE10 */
    margin: 0;
}

.footer_bnr {
    display: inline-block;
    border: 2px solid red;
}

.footer_m_text01 {
    font-size: 1.1em;
}

.footer_m_text02 {
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 0.5em;
}

.footer_m > div {
    width: 30% 35% 35%;
    /*45% 55%;*/
    padding: 10px;
    text-align: left;
    margin: 0;
}

.footer_m > div > .footer_m > div a {
    color: #000000;
}

.footer a:hover {
    text-decoration: underline;
}

.footer a:visited {
    color: blue;
}

@media screen and (max-width: 960px) {
    .footer_m > div {
        width: 100%;
        margin: 0
    }

    .footer_m_text01 {
        font-size: 1em;
    }

    .footer_m_text02 {
        font-size: 1.25em;
        font-weight: bold;
        margin-left: 1.0em;
    }

    .footer_m > div > .footer_m > div {
        width: 30%;
        margin: 0
    }
}

@media screen and (max-width: 768px) {
    .footer_m > div > .footer_m > div {
        width: 100%;
        margin: 0
    }
}


/*------------------------------------------
 カード式　工事メニュー一覧	
------------------------------------------*/

.sample05 {
    width: 200px;
    /*300px;*/
    height: 300px;
    /*400px;*/
    vertical-align: top;
    margin: 10px 8px;
    border-radius: 6px;
    box-shadow: 0px 2px 4px #aaa;
    display: inline-block;
    position: relative;
}

.sample05 .card05 {
    width: 100%;
    height: 100%;
}

.sample05 h4 {
    font-size: 18px;
    padding: 4px 16px;
}

.sample05 p {
    padding: 4px 16px;
}

.sample05 .caption {
    font-size: 24px;
    text-align: center;
    padding-top: 80px;
    color: #fff;
}

.sample05 img {
    width: 200px;
    /*300px;*/
    height: 100px;
    /*200px;*/
    border-radius: 6px 6px 0 0;
}

.sample05 .mask {
    width: 200px;
    /*300px;*/
    height: 100px;
    /*200px;*/
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 6px;
    background: rgba(0, 0, 55, 0.5);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sample05:hover .mask {
    opacity: 0.7;
}

.sample06 {
    width: 200px;
    height: 300px;
    vertical-align: top;
    margin: 10px 8px;
    border-radius: 6px;
    box-shadow: 0px 2px 4px #aaa;
    position: relative;
    display: inline-block;
}

.sample06 h4 {
    font-size: 18px;
    padding: 4px 16px;
}

.sample06 p {
    padding: 4px 16px;
}

.sample06 img {
    width: 200px;
    height: 100px;
    border-radius: 6px 6px 0 0;
}

.sample06 .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 6px;
    background: rgba(0, 0, 55, 0.4);
}

.sample06:hover .mask {
    opacity: 0.7;
}

.sample07 {
    width: 200px;
    height: 300px;
    vertical-align: top;
    margin: 10px 8px;
    border-radius: 6px;
    box-shadow: 0px 2px 4px #aaa;
    display: inline-block;
}

.sample07 .card07 {
    width: 100%;
    height: 100%;
}

.sample07 h4 {
    font-size: 18px;
    padding: 4px 16px;
}

.sample07 p {
    padding: 4px 16px;
}

.sample07 img {
    width: 200px;
    height: 100px;
    border-radius: 6px 6px 0 0;
}

.sample07:hover {
    box-shadow: 0px 6px 8px #333;
    opacity: 0.6;
}

.line_ye {
    background: linear-gradient(transparent 70%, #FFFF00 0%);
}

/*------------------------------------------
 テキスト中央ぞろえ	
------------------------------------------*/

.text-center {
    font-size: 10px;
    text-align: center
}

/*------------------------------------------
 汎用横スライド
------------------------------------------*/

.loop02 {
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    overflow: hidden;
}

.loop02__box {
    display: flex;
    animation: loop-list 25s linear infinite;
}

.loop02__item a {
    width: calc(80vw / 7);
    display: block;
}

.loop02__item img {
    width: 90%;
}

@keyframes loop-list {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }

    a.disabled {
        pointer-events: none;
    }
}

/*------------------------------------------
 お問い合わせボタン
------------------------------------------*/

.background_btn01 {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    /* ボタン幅 */
    position: relative;
    background: #4D9BC1;
    /* 背景色 */
    border: 2px solid #4D9BC1;
    padding: 1em 2em;
    font-weight: bold;
    color: #fff;
    /* 文字色 */
    text-decoration: none;
    text-align: center;
    transition-duration: 0.3s;
}

.background_btn01:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 25px;
    margin-top: -6px;
}

/* マウスオーバーした際のデザイン */
.background_btn01:hover {
    background: #fff;
    /* 背景色 */
    color: #4D9BC1;
    /* 文字色 */
}

/*
-----------------------------------------------------
施工事例
sekourei、sekoureibtob、sekoureiインライン共通
-----------------------------------------------------
*/
#main .list {
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.1);
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

#main .list .kojiname {
    font-size: 20px;
    font-weight: bold;
    margin: 5px;
}

#main .list table:nth-of-type(1) {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#main .list p.link-wap {
    width: 650px;
    margin: 10px auto 0;
}

#main .list p.link-wap a {
    display: block;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-color: #E95414;
    border-radius: 50px;
}

#main .list p.link-wap a:hover {
    color: #E95414;
    font-weight: bold;
    background-color: #fff;
    outline: 3px solid #E95414;
    outline-offset: -3px;
}

#main .list p.text,
#main .list time,
#main .list aside {
    padding-left: 10px;
    padding-right: 10px;
}

#main .list .business {
    padding-top: 20px;
    font-weight: bold;
    color: green;
}

body {
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.point_box02 {
    position: relative;
    padding: 1.2em .3em .3em .3em;
    border: 3px double #dc143c;
    /*0097A7;*/
}

.point_box02::after {
    content: "Point！";
    position: absolute;
    top: -10px;
    left: 10px;
    background: white;
    font-size: 20px;
    color: #dc143c;
    padding: 0 10px;
    font-weight: bold;
}

a#rc_toiawase {
    width: 87px;
    /*画像の全体幅*/
    position: fixed;
    top: 200px;
    right: -50px;
    /*マウスを乗せた時に出てくる幅*/
    display: inline-block;
    transition: all .2s ease;
    z-index: 9999;
}

a#rc_toiawase:hover {
    right: 0;
}

a#rc_sekourei {
    width: 87px;
    /*画像の全体幅*/
    position: fixed;
    top: 400px;
    right: -50px;
    /*マウスを乗せた時に出てくる幅*/
    display: inline-block;
    transition: all .2s ease;
    z-index: 9999;
}

a#rc_sekourei:hover {
    right: 0;
}

a#rc_eqbanner {
    width: 87px;
    /*画像の全体幅*/
    position: fixed;
    top: 600px;
    right: -50px;
    /*マウスを乗せた時に出てくる幅*/
    display: inline-block;
    transition: all .2s ease;
    z-index: 9999;
}

a#rc_eqbanner:hover {
    right: 0;
}

.smallbox {
    position: relative;
    margin: auto;
    width: 130px;
    height: 25px;
    background: linear-gradient(0deg, #d5074e, #d5074e);
    border-radius: 5px;
    text-align: center;
}

.smallbox span {
    /* 前面の文字エリア */
    position: absolute;
    display: inline-block;
    background: rgba(255, 255, 255, 0.6);
    top: 50%;
    left: 50%;
    padding: 3px;
    color: #333;
    transform: translate(-50%, -50%);
    font-size: 12pt;
    border-radius: 10px;
}

.hr1 {
    border-top: 1px dashed #d3d3d3;
    /* 破線 */
}

.marker {

    /* マーカーを引く */
    background: linear-gradient(transparent 50%, rgba(175, 238, 238, 1) 50%);
    /* マーカーを引く */
    /* インライン属性を指定する */
    display: inline;
}

th.ta1 {
    background-color: #666;
    color: #FFF;
    text-align: left;
}

th.ta1:first-child {
    border-right: 1px solid #EEE;
}

table.ta1 {
    border-collapse: collapse;
    border: 1px solid #666;
}

th.ta2 {
    background-color: #4682b4;
    color: #FFF;
    text-align: left;
    font-size: small;
}

td.ta1,
th.ta1 {
    border: 1px solid #666;
    padding: 0.3em 0.5em;
    /* 文字周りのスペース（パディング） */
}

th.ta2:first-child {
    border-right: 1px solid #EEE;
}

table.ta2 {
    border-collapse: collapse;
    border: 1px solid #4682b4;
}

td.ta2,
th.ta2 {
    border: 1px solid #4682b4;
    padding: 0.3em 0.5em;
    font-size: small;
    /* 文字周りのスペース（パディング） */
}

.newicon {
    background: #F00;
    /*背景色*/
    color: #FFF;
    /*文字色*/
    font-size: 50%;
    /*文字サイズ*/
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 2px;
    margin: 0px 5px;
    vertical-align: text-top;
}