@charset "utf-8";

/* ----------------------------------------
   home
---------------------------------------- */
/* area-mainvisual
---------------------------------------- */
#home .area-mainvisual{
display: flex;
justify-content: center;
align-items: center;
height: 420px;
background:url(/common/images/css/home-mainvisual-bg.jpg) no-repeat center top;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25) inset;
}

#home .area-mainvisual p{
text-align: center;
}

/* list-mainvisual */
#home ul.list-mainvisual{
position: relative;
width:678px;
margin:0 auto;
padding-left:22px;
}

#home ul.list-mainvisual.ceiling{
width:678px;
height: 0;
margin:0 auto;
margin-top: -191px;
padding-left: 15px;
}

#home ul.list-mainvisual.floor{
width:678px;
height: 0;
margin:0 auto;
padding-left:15px;
margin-top: 0;
z-index: 200;
}

#home ul.list-mainvisual li{
position: absolute;
margin-right:6px;
z-index:1;
}

#home ul.list-mainvisual li a {
width:220px;
height:41px;
display:block;
margin-top:127px;
}

#home ul.list-mainvisual.ceiling li a{
background:url(/common/images/css/list-mainvisual-ceiling.png) no-repeat left top;
}

#home ul.list-mainvisual.floor li a{
background:url(/common/images/css/list-mainvisual-floor.png) no-repeat left top;
margin-top: 0 !important;
}

#home ul.list-mainvisual li a:hover{
height:168px;
margin-top:0;
}
#home ul.list-mainvisual li a span{
padding:10px 10px 0;
width:151px;
height:20px;
overflow:hidden;
display:block;
}
#home ul.list-mainvisual li a:hover span {
padding-top: 22px;
}

#home ul.list-mainvisual li.ss a{background-position:-124px -20px;}
#home ul.list-mainvisual li.base a{background-position:-354px -20px;}
#home ul.list-mainvisual li.transport a{background-position:-584px -20px;}
#home ul.list-mainvisual li.service a{background-position:-124px -192px;}
#home ul.list-mainvisual li.lpgas a{background-position:-354px -192px;}
#home ul.list-mainvisual li.ep a{background-position:-584px -192px;}

#home ul.list-mainvisual li.ss a:hover{background-position:-124px -62px;}
#home ul.list-mainvisual li.base a:hover{background-position:-354px -62px;}
#home ul.list-mainvisual li.transport a:hover{background-position:-584px -62px;}
#home ul.list-mainvisual li.service a:hover{background-position:-124px -18px;}
#home ul.list-mainvisual li.lpgas a:hover{background-position:-354px -18px;}
#home ul.list-mainvisual li.ep a:hover{background-position:-584px -18px;}


#home ul.list-mainvisual.ceiling li.ss {
top: 22px;
left: 8px;
}
#home ul.list-mainvisual.ceiling li.base {
top: 22px;
left: 238px;
}
#home ul.list-mainvisual.ceiling li.transport {
top: 22px;
right: -1px;
}
#home ul.list-mainvisual.floor li.service {
top: 189px;
left: 8px;
}
#home ul.list-mainvisual.floor li.lpgas {
top: 189px;
left: 238px;
}
#home ul.list-mainvisual.floor li.ep {
top: 189px;
right: -1px;
}


/* lay-column-index
---------------------------------------- */
#home .lay-column-index{
width:968px;
margin-bottom:18px;
}

#home .lay-column-index.bg{
width: 950px;
background:url(/common/images/css/home-lay-bg-03.png) no-repeat left bottom;
}

#home .lay-column-index ul.list-link-01{
margin-left:11px;
}

#home .lay-column-index .col h2{
margin-bottom:10px;
}

#home .lay-column-index .col.left h2,
#home .lay-column-index .col.right h2{
margin-bottom:0;
}

#home .lay-column-index .col.left h2 > a,
#home .lay-column-index .col.right h2 > a{
display: block;
}

#home .lay-column-index .col{
margin:0 18px 0 0;
float:left;
width:224px;
background:url(/common/images/css/home-lay-bg-01.png) no-repeat left bottom;
padding:0 0 10px;
overflow:hidden;
}

#home .lay-column-index .col.twice-01{
width:466px;
background:url(/common/images/css/home-lay-bg-02.png) no-repeat left bottom;
}

#home .lay-column-index .col.left{
width:689px;
background: none;
padding: 0;
}

#home .lay-column-index .col.right{
width:243px;
background: none;
padding:0;
margin:0;
}

/* lay-column-index-02
---------------------------------------- */
#home .lay-column-index .col.left .lay-column-index-02,
#home .lay-column-index .col.right .lay-column-index-02{
overflow:hidden;
padding-left:17px;
margin:-18px 0 18px;
}
#home .lay-column-index .col.left .lay-column-index-02 .col,
#home .lay-column-index .col.right .lay-column-index-02 .col{
width:209px;
background:url(/common/images/css/home-lay-bg-04.png) no-repeat left bottom;
margin:18px 14px 0 0;
overflow:visible;
}
#home .lay-column-index .col.left .lay-column-index-02 .col .hdg,
#home .lay-column-index .col.right .lay-column-index-02 .col .hdg {
margin-bottom:7px;
}

/* list-home
---------------------------------------- */
#home ul.list-home{
padding-left:17px;
letter-spacing:0;
line-height:1.4;
margin-bottom:7px;
}
#home ul.list-home li{
width:139px;
margin-right:14px;
float:left;
position:relative;
padding-left:70px;
margin-bottom:1.0em;
}
#home ul.list-home li a{
display: block;
text-decoration: none;
color: inherit;
}
#home ul.list-home li span{
background:url(/common/images/css/arrow-01.png) no-repeat -4px center;
padding-left:14px;
display:block;
margin-bottom:0.5em;
text-decoration: underline;
color: #006EDB;
}
#home ul.list-home li a:hover span{
text-decoration: none;
}
#home ul.list-home li img{
position:absolute;
top:0;
left:0;
}

/* box-info
---------------------------------------- */
#home .area-info {
padding: 18px 0;
width: 950px;
margin: 0 auto;
text-align: center;
box-shadow: inset 0 0 0 1px #FFFFFF;
}

#home .area-info .list-link-01 > li > a[target=_blank] {
padding-left: 0;
}

#home .area-info .list-link-01 > li > a[target=_blank] > img {
position: relative;
top: -4px;
margin-left: 0;
margin-right: 10px;
}

#home .area-info .box{
background: #F5F5F5;
border: 2px solid #CCCCCC;
padding: 6px 10px 2px;
text-align: center;
position: relative;
box-shadow: inset 0 0 0 1px #FFFFFF;
}

/* content-business
---------------------------------------- */

#home #str .content-business {
margin: 0 auto 69px;
background: #F7F7F7;
}

#home #str .content-business > .inner {
margin-top: 0;
padding: 36px 0;
width: 950px;
}

#home #str .content-business > .inner .lyt-column{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% + 18px);
margin: -18px 0 0 -18px
}

#home #str .content-business > .inner .lyt-column .col{
border: 1px solid #CCCCCC;
margin: 18px 0 0 18px;
width: calc(33.3333% - 18px);
box-sizing: border-box;
}

#home #str .content-business > .inner .lyt-column .col a{
display: -webkit-flex;
display: flex;
text-decoration: none;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: stretch;
align-items: stretch;
height: 100%;
}

#home #str .content-business .lyt-column .col .img{
display: block;
padding-bottom: 4px;
position: relative;
}

#home #str .content-business .lyt-column .col .img:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient( 90deg, rgb(255,229,109) 0%, rgb(230,0,18) 50%, rgb(243,115,64) 74%, rgb(255,229,109) 100%);
}

#home #str .content-business .lyt-column .col .contents{
background: linear-gradient(#FFFFFF 25%, #F0F0F0);
padding: 10px 17px;
height: 100%;
}

#home #str .content-business .lyt-column .col .title{
display: block;
font-size: 16px;
padding-left: 14px;
position: relative;
text-decoration: underline;
}

#home #str .content-business .lyt-column .col a:hover .title{
text-decoration: none;
}

#home #str .content-business .lyt-column .col .title:before{
display: block;
content: "";
width: 0;
height: 0;
left: 0;
position: absolute;
top: 8px;
border-top: 4px solid transparent;
border-right: 6px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid #e64600;
}

#home #str .content-business .lyt-column .col a .text{
display: block;
color: #383838;
}