/* =================================
   TopPage
==================================== */

.cf {
    *zoom: 1;
}

.cf:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

form ::-webkit-input-placeholder {
    color: #C6C6C6;
}

form :-moz-placeholder {
    opacity: 1;
    color: #C6C6C6;
}

form ::-moz-placeholder {
    opacity: 1;
    color: #C6C6C6;
}

form :-ms-input-placeholder {
    color: #C6C6C6;
}

::-moz-selection {
    color: #FFF;
    background: rgba(66, 152, 141, 0.7);
}

::selection {
    color: #FFF;
    background: rgba(66, 152, 141, 0.7);
}

.top-ttl {
    position: relative;
    margin: 0 0 3.5em;
    text-align: center;
    font-weight: 700;
}

.top-ttl:after {
    position: absolute;
    content: '';
    width: 4.6875em;
    height: 4.6875em;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}

.top-ttl .top-ttl-en {
    position: relative;
    letter-spacing: .05em;
    padding-left: .05em;
    padding-top: .7em;
    line-height: 1;
    color: #a0cbc6;
    z-index: 1;
}

.top-ttl .top-ttl-jp {
    position: relative;
    margin-top: 0.4em;
    font-size: 1.625em;
    letter-spacing: .1em;
    line-height: 1.35;
    color: #614c3f;
    z-index: 1;
}

.mail-btn a {
    display: block;
    margin: auto;
    padding: 1em 0 1em 1.8em;
    max-width: 245px;
    font-weight: 700;
    letter-spacing: .075em;
    border-radius: .25em;
    background: url(../img/module/icon_mail.svg) no-repeat left 1em center, url(../img/module/icon_mail_arw.svg) no-repeat right 2px bottom 2px;
    background-color: #f5d980;
    transition: background .3s;
}

.mail-btn a:hover,
.mail-btn a:active {
    background-color: #a0cbc6;
}

.freecall {
    display: inline-block;
    line-height: 1.25;
}

.freecall a {
    padding: 0 0 0 1.43em;
    font-weight: 700;
    color: #0e0d67;
    background: url(../img/module/icon_fc.svg) no-repeat left center/1em 0.78em;
}

.freecall span {
    display: block;
    text-align: right;
    color: #0e0d67;
}


/*==============================
TOP contents
==============================*/

.l-header {
    position: absolute;
    z-index: 20;
    top: 0;
    width: 100%;
}

.l-mv {
    position: relative;
    padding: 0 0 3.125em 8.3%;
    margin: 0 0 4.375em;
}

.l-mv:after {
    content: '';
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 74%;
    background: #f5f0df;
    z-index: -1;
}

.l-mv .swiper-container {
    border-radius: 0 0 0 3em;
    max-height: 600px;
    height: 58vw;
    z-index: 1;
}

.l-mv .swiper-slide {
    background: no-repeat center top / cover;
}

.l-mv .swiper-pagination {
    left: 0;
    right: 0;
    bottom: 5.275em;
    margin: 0 8.3vw 0 auto;
    height: .3125em;
}

.l-mv .swiper-pagination-bullet {
    width: 2.8125em;
    height: .3125em;
    border-radius: 0;
    background: #faf7ef;
    opacity: .5;
    transition: opacity .3s;
}

.l-mv .swiper-pagination-bullet:hover,
.l-mv .swiper-pagination-bullet:active {
    opacity: 1;
}

.l-mv .swiper-pagination-bullet-active {
    background: #42988d;
    opacity: .9;
}

.l-mv .slide01 {
    background-image: url(../img/top/top_mv_01@2x.jpg);
}

.l-mv .slide02,
.l-mv .slide04 {
    background-color: #42988d;
}

.l-mv .slide03 {
    background-image: url(../img/top/top_mv_01@2x.jpg);
}

.l-mv .mv-txt {
    position: absolute;
    left: 11.5%;
    bottom: 7em;
    z-index: 15;
    max-width: 28%;
}

.top-side {
    position: absolute;
    width: 25%;
    padding: 6em 1.3% 1.3em;
    max-width: 360px;
    min-width: 240px;
    top: 0;
    right: 0;
    height: auto;
    z-index: 18;
    background: #42988d;
    opacity: 1;
    box-shadow: -9.642px 11.491px 16px 4px rgba(0, 0, 0, 0.1);
    transition: width .3s, height .3s, min-width .3s;
    overflow: hidden;
}

.top-side ul {
    opacity: 1;
    transition: opacity .3s .3s;
}

.top-side .top-side-main {
    margin: 0 0 1.2em;
}

.top-side .top-side-main li {
    margin-bottom: .625em;
}

.top-side .top-side-main a {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background: #fff;
}

.top-side .top-side-main a:hover:after,
.top-side .top-side-main a:active:after {
    bottom: -7px;
    right: -7px;
}

.top-side .top-side-main a:after {
    position: absolute;
    bottom: -5px;
    right: -5px;
    margin: auto;
    transform: rotate(45deg);
    content: '';
    width: 14px;
    height: 7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid;
    transition: border-color .3s;
    transition: right .3s, bottom .3s;
}

.top-side .top-side-main .top-side-img {
    width: 5.25em;
}

.top-side .top-side-main p {
    padding: 0 0 0 1.3em;
    font-size: 1.125em;
    font-weight: 700;
    transition: color .3s;
}

.top-side .top-side-gas a:after {
    border-left-color: #2e3be7;
}

.top-side .top-side-gas a:hover p,
.top-side .top-side-gas a:active p {
    color: #2e3be7;
}

.top-side .top-side-store a:hover p,
.top-side .top-side-store a:active p,
.top-side .top-side-store a:after {
    color: #19b411;
}

.top-side .top-side-oil a:after {
    border-left-color: #d92938;
}

.top-side .top-side-oil a:hover p,
.top-side .top-side-oil a:active p {
    color: #d92938;
}

.top-side .top-side-electric a:after {
    border-left-color: #ffb033;
}

.top-side .top-side-electric a:hover p,
.top-side .top-side-electric a:active p {
    color: #ffb033;
}

.top-side .top-side-contact {
    padding: 1.9em 3% 1em;
    text-align: center;
    background: #fff;
}

.top-side .top-side-contact h3 {
    margin: 0 0 1em;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.35;
}

.top-side .top-side-mail {
    margin: 0 0 1.8em;
}

.top-side .top-side-telno {
    line-height: 1em;
}

.top-side .top-side-telno a {
    font-size: 1.75em;
}

.top-side .top-side-telno span {
    font-size: .75em;
    letter-spacing: .075em;
    line-height: 1.5;
}

.top-side .top-side-note {
    font-size: .6875em;
    display: inline-block;
}

.top-side .ta-right {
    display: block;
    text-align: right;
}

.top-side .top-side-time {
    display: inline-block;
    padding: 0 .4em;
    color: #42988d;
    font-size: .75em;
    letter-spacing: .075em;
    background: #e2efee;
    white-space: nowrap;
}

.top-side.small {
    position: fixed;
    min-width: 0;
    width: 2.8vw;
    height: 100%;
    transition: width .3s, height .3s, min-width .3s;
}

.top-side.small:after {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: 'OPEN';
    color: #fff;
    z-index: 1;
    transform: rotate(90deg);
    transform-origin: right top;
    height: 2.8vw;
    font-size: .875em;
    line-height: 1.35;
    font-family: 'Roboto', sans-serif;
    background: url(../img/module/icon_arw_02.svg) no-repeat center bottom 0.35vw/0.857em;
}

.top-side.small ul {
    visibility: hidden;
    opacity: 0;
}

.top-side.small:hover {
    width: 25%;
    padding-top: 1em;
    min-width: 240px;
}

.top-side.small:hover:after {
    display: none;
}

.top-side.small:hover ul {
    transition: opacity .3s .3s;
    visibility: visible;
    opacity: 1;
}

.top-side.bottom {
    width: 0;
    padding: 0;
}

.top-side.bottom:after {
    display: none;
}

.top-side.bottom:hover {
    opacity: 0;
    transition: opacity .3s;
}

.top-info {
    overflow: hidden;
}

.top-info a {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 6.25em;
    letter-spacing: .1em;
    background: url(../img/top/top_info_bg.svg) no-repeat left center/contain;
}

.top-info a:before {
    position: absolute;
    left: 0;
    bottom: -4px;
    content: '';
    width: 100%;
    height: 2px;
    background: #e2efee;
}

.top-info a:after {
    position: absolute;
    bottom: -8px;
    right: -8px;
    margin: auto;
    transform: rotate(45deg);
    content: '';
    width: 20px;
    height: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #a0cbc6;
    transition: border-color .3s;
}

.top-info a:hover .top-info-ttl:after,
.top-info a:active .top-info-ttl:after {
    background: #f5f0df;
}

.top-info a:hover .top-info-body,
.top-info a:active .top-info-body {
    color: #42988d;
}

.top-info .top-info-ttl {
    width: 28%;
    line-height: 1.03em;
    font-size: 1.625em;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 1.7em 0 1.7em 13.5%;
    font-feature-settings: normal;
}

.top-info .top-info-ttl:after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 5.3em;
    height: 5.3em;
    background: #f5d980;
    z-index: -1;
    transition: background .3s;
}

.top-info .top-info-txt {
    width: 72%;
    padding: 0 1%;
}

.top-info .top-info-body {
    font-weight: 700;
    text-decoration: underline;
    transition: color .3s;
}

.top-info .top-info-note {
    font-size: .75em;
    letter-spacing: .075em;
}

.top-banner-content {
    display: flex;
    justify-content: center;
    padding-bottom: 4.25em;
}
.top-banner-content a {
    transition: .3s all;
}
.top-banner-content a:hover {
    opacity: 0.7;
}
.top-modal {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: .3s all;
    opacity: 0;
    visibility: hidden;
}
.top-modal.is-active {
    opacity: 1;
    visibility: visible;
}
.top-modal-close {
    position: absolute;
    cursor: pointer;
}
.top-modal-inner {
    width: 400px;
    z-index: 101;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.top-modal-content {
    position: relative;
}
.top-modal-close {
    position: absolute;
    right: 0;
    top: 0;
}
.top-modal-close span{
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.7);
    
}
.top-modal-close span::before,.top-modal-close span::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background: #FFF;
    display: block;
    top: 5px;
    right: 14px;
}
.top-modal-close span::before{
    transform: rotate(45deg);
}
.top-modal-close span::after{
    transform: rotate(-45deg);
}
.top-modal-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    transition: .3s all;
}

.top-service {
    position: relative;
    padding: 0 0 4.375em;
}

.top-service:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 96.875%;
    height: calc(100% - 14em);
    background: #e2efee;
    z-index: -1;
}

.top-service .top-ttl {
    margin-bottom: 4em;
}

.top-service .top-ttl:after {
    background: #eef5f5;
}

.top-service .top-ttl .top-ttl-jp {
    margin-top: -.8em;
}

.top-service .top-ttl .color {
    color: #42988d;
}

.top-service .top-ttl .no {
    font-size: 2em;
}

.top-service .top-service-list {
    counter-reset: number 0;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-width: 1000px;
    margin: auto;
}

.top-service .top-service-list>li {
    position: relative;
    width: 49.1%;
    margin: 0 0 1.875em;
    border-radius: .5em;
    overflow: hidden;
    background: #fff;
    box-shadow: 2.121px 2.121px 4.25px 0.75px rgba(0, 0, 0, 0.05);
}

.top-service .top-service-list>li:before {
    position: absolute;
    bottom: -.54em;
    right: 14%;
    font-size: 5em;
    color: #f1f7f7;
    counter-increment: number 1;
    content: "0" counter(number);
    font-family: 'Roboto', sans-serif;
}

.top-service .top-service-img {
    position: relative;
}

.top-service .top-service-img h3 {
    position: absolute;
    left: 9%;
    bottom: .5em;
    padding: .1em .5em;
    width: 3.75em;
    text-align: center;
    line-height: 1;
    font-size: 1.25em;
    font-weight: 700;
    color: #614c3f;
    letter-spacing: .15em;
    background: #fff;
}

.top-service .top-service-img img {
    width: 100%;
}

.top-service .top-service-img:after {
    position: absolute;
    content: '';
    left: 9%;
    top: 0;
    width: 3.75em;
    height: 6px;
    font-size: 1.25em;
}

.top-service .top-service-menu {
    padding: 1em 10%;
}

.top-service .top-service-menu li {
    line-height: 2;
}

.top-service .top-service-menu a {
    display: inline-block;
    width: 100%;
    padding: 0 0 0 10%;
    letter-spacing: .1em;
    background: url(../img/module/icon_arw_01.svg) no-repeat left 3% center;
    transition: background .3s, color .3s, border .3s;
}

.top-service .top-service-menu a:hover,
.top-service .top-service-menu a:active {
    background-position: left 4% center;
}

.top-service .top-service-gas .top-service-img:after {
    background: #2e3be7;
}

.top-service .top-service-gas a:hover,
.top-service .top-service-gas a:active {
    color: #2e3be7;
}

.top-service .top-service-oil .top-service-img:after {
    background: #d92938;
}

.top-service .top-service-oil a:hover,
.top-service .top-service-oil a:active {
    color: #d92938;
}

.top-service .top-service-electric .top-service-img:after {
    background: #ffb033;
}

.top-service .top-service-electric a:hover,
.top-service .top-service-electric a:active {
    color: #ffb033;
}

.top-service .top-service-construction .top-service-img:after {
    background: #17b410;
}

.top-service .top-service-construction a:hover,
.top-service .top-service-construction a:active {
    color: #17b410;
}

.top-contact {
    position: relative;
    margin: 2em 0;
    padding: 4.25em 0;
    background: url(../img/top/top_contact_bg.jpg) no-repeat center/cover;
}

.top-contact .top-ttl:after {
    background: #fff;
}

.top-contact .top-contact-list {
    max-width: 1000px;
    margin: auto;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start;
}

.top-contact .top-contact-list h3 {
    margin: 0 0 .8em;
    color: #42988d;
    font-size: 1.25em;
    letter-spacing: .1em;
    font-weight: 700;
}

.top-contact .top-contact-list .top-contact-mail, .top-contact .top-contact-list .top-contact-tel {
    padding: 1.5em 3%;
}

.top-contact .top-contact-list .l-base--txtlist {
    margin-top: 10px;
}

.top-contact .top-contact-list .l-base--txtlist a {
    text-decoration: underline;
}

.top-contact .top-contact-mail {
    width: 34%;
    border: 2px solid #42988d;
    border-radius: 1em;
    background: #fff;
    text-align: center;
    min-height: 225px;
}

.top-contact .top-contact-mail .mail-btn {
    margin: 0 auto 1.5em;
}

.top-contact .top-contact-note {
    font-size: .875em;
    letter-spacing: .05em;
}

.top-contact .top-contact-tel__wrap {
    width: 64%;
}

.top-contact .top-contact-tel {
    position: relative;
    text-align: center;
    border: 2px solid #42988d;
    border-radius: 1em;
    background: #f5f0df url(../img/module/contact_tel_bg.png) no-repeat center/100% 100%;
}

.top-contact .top-contact-tel:after {
    position: absolute;
    bottom: -4px;
    left: 1.6%;
    content: '';
    width: 5.25em;
    height: 7.3125em;
    background: url(../img/module/icon_operator.svg) no-repeat center/100%;
}

.top-contact .top-contact-tel .top-contact-note {
    max-width: 70%;
    margin: auto;
}

.top-contact .top-contact-telno {
    font-size: 2.875em;
    line-height: 1;
    margin-top: -.1em;
    margin-bottom: .3em;
}

.top-contact .top-contact-telno span {
    font-size: .347em;
}

.top-article {
    padding: 6.25em 0;
    background: #faf7ef;
}

.top-article .top-article-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.top-article .top-article-item {
    width: 49.1%;
}

.top-article .top-article-headline {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    padding: 0 0 1.2em .625em;
    border-bottom: 1px solid #42988d;
    z-index: 1;
}

.top-article .top-article-headline h2 {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: .1em;
    color: #614c3f;
}

.top-article .top-article-headline:after {
    position: absolute;
    left: 0;
    bottom: 1em;
    content: '';
    width: 3.3125em;
    height: 3.3125em;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
}

.top-article .top-article-en {
    padding: 0 0 .2em .9em;
    font-weight: 700;
    letter-spacing: .1em;
    color: #42988d;
}

.top-article .top-article-more {
    margin: 0 0 .2em auto;
    letter-spacing: .1em;
    font-feature-settings: normal;
    font-size: .875em;
}

.top-article .top-article-more a {
	 font-size: 15px !important;
    padding: 0 2.125em 0 0;
    background: url(../img/module/icon_arw_01.svg) no-repeat right 0.7142em center/0.42em;
    transition: background .3s, color .3s;
}

.top-article .top-article-more a:hover,
.top-article .top-article-more a:active {
    color: #42988d;
    background-position: right .5em center;
}

.top-article .top-article-list li {
    border-bottom: 1px solid #d7d2cf;
}

.top-article .top-article-list a {
    padding: 1em 1.86em .6em .625em;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background: url(../img/module/icon_arw_01.svg) no-repeat right 0.625em center/0.3675em;
    transition: background .3s, color .3s;
}

.top-article .top-article-list a:hover,
.top-article .top-article-list a:active {
    background-color: #e2efee;
    background-position: right .4375em center;
}

.top-article .top-article-list+.top-article-more {
    display: none;
}

.top-article .top-article-date {
    font-size: .875em;
    line-height: 1.5;
    min-width: 8em;
    font-feature-settings: normal;
}

.top-article .top-article-cat {
    display: inline-block;
    margin: 0 0 0 .5em;
    padding: .2em .5em 0;
    min-width: 5.5em;
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    border-radius: .333em;
    vertical-align: middle;
    line-height: 1.5;
    background: #a0cbc6;
    color: #fff;
    font-feature-settings: normal;
}

.top-article .cat-gas {
    background: #2e3be7;
}

.top-article .cat-oil {
    background: #d92938;
}

.top-article .cat-electric {
    background: #ffb033;
}

.top-article .cat-construction {
    background: #17b410;
}

.top-article .cat-company {
    background: #42988d;
}

.top-article .top-article-ttl {
    margin-top: .3em;
    width: 100%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .05em;
}

.top-bnr {
    padding: 3.125em 0;
}

.top-bnr .top-bnr-list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

.top-bnr .top-bnr-list li {
    margin: 0 .834%;
    width: 49.1%;
    max-width: 490px;
}

.top-bnr .top-bnr-list a {
    display: block;
    border: 1px solid #eee;
    background: no-repeat center / cover;
}

.top-bnr .top-bnr-list a:hover .top-bnr-txt,
.top-bnr .top-bnr-list a:active .top-bnr-txt {
    background: rgba(160, 203, 198, 0.8);
}

.top-bnr .top-bnr-list a:hover .top-bnr-txt:after,
.top-bnr .top-bnr-list a:active .top-bnr-txt:after {
    border-left-color: rgba(160, 203, 198, 0.8);
}

.top-bnr .top-bnr-txt {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 0 0;
    width: 8.75em;
    height: 8.75em;
    background: rgba(255, 255, 255, 0.9);
    transition: background .3s;
}

.top-bnr .top-bnr-txt:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    margin: auto;
    content: '';
    width: 20px;
    height: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 0.9);
    transition: border-color .3s;
}

.top-bnr .top-bnr-message {
    padding: 0 0 1em;
    margin: 0 0 .4em;
    position: relative;
    font-size: .625em;
    line-height: 1.5;
    letter-spacing: .05em;
}

.top-bnr .top-bnr-message:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '';
    width: 60%;
    height: 1px;
    background: #b0a59f;
}

.top-bnr .top-bnr-en {
    font-size: 1.625em;
    letter-spacing: .05em;
    line-height: 1.35;
    font-weight: 700;
}

.top-bnr .top-bnr-jp {
    font-size: .75em;
    letter-spacing: .2em;
    font-feature-settings: normal;
    line-height: 1.35;
}

.top-bnr .top-bnr-company a {
    background-image: url(../img/top/top_bnr_01.jpg);
}

.top-bnr .top-bnr-recruit a {
    background-image: url(../img/top/top_bnr_02.jpg);
}

@media only screen and (min-width: 768px) and (max-width: 1295px) {
    .l-mv {
        padding-left: calc(-95.79px + 15.598vw);
    }
    .l-mv .mv-txt {
        left: calc(-189.26px + 25.946vw);
        bottom: calc(-138.65px + 19.355vw);
    }
    .top-side ul {
        font-size: calc(3.71px + 0.949vw);
    }
    .top-side.small:after {
        font-size: calc(9.09px + 0.38vw);
    }
}

@media only screen and (max-width: 767px) {
    .top-ttl {
        margin: 0 0 8.96vw;
    }
    .top-ttl:after {
        width: 12vw;
        height: 12vw;
        min-width: 60px;
        min-height: 60px;
    }
    .top-ttl .top-ttl-jp {
        font-size: calc(18.17px + 1.020vw);
    }
    .mail-btn a {
        padding: 1em 0 1em 1.8em;
        max-width: 400px;
        font-size: calc(12.26px + 1.531vw);
        background-size: 2em auto, .416em auto;
        background-position: left 7.5vw center, right 4px bottom 4px;
        background-color: #f5d980;
        transition: background .3s;
    }
    .mail-btn a:hover,
    .mail-btn a:active {
        background-color: #a0cbc6;
    }
    .freecall {
        display: inline-block;
        line-height: 1.25;
    }
    .freecall a {
        padding: 0 0 0 1.43em;
        font-weight: 700;
        color: #0e0d67;
        background: url(../img/module/icon_fc.svg) no-repeat left center/1em 0.78em;
    }
    .freecall span {
        display: block;
        text-align: right;
        color: #0e0d67;
    }
    .l-header {
        position: fixed;
        z-index: 50;
    }
    .l-mv {
        padding: 0 0 16vw 6.25%;
        margin: 0;
    }
    .l-mv .swiper-container {
        height: 140vw;
        max-height: 800px;
    }
    .l-mv .swiper-pagination {
        bottom: 15vw;
        left: auto;
        margin: 0 3.125% 0 auto;
    }
    .l-mv .swiper-pagination-bullet {
        background: #a0cbc6;
    }
    .l-mv .swiper-slide {
        background-position: center;
    }
    .l-mv .slide01 {
        background-image: url(../img/top/sp_top_mv_01@2x.jpg);
    }
    .l-mv .slide03 {
        background-image: url(../img/top/sp_top_mv_01@2x.jpg);
    }
    .l-mv .mv-txt {
        position: absolute;
        left: 1.125%;
        top: 7vw;
        z-index: 15;
        max-width: 450px;
        width: 76%;
    }
    .l-mv .mv-txt img {
        width: 100%;
    }
    .top-info a {
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 14vw auto 16vw;
        background-position: left top;
        background-size: 20vw;
    }
    .top-info .top-info-ttl {
        width: 100%;
        font-size: calc(22.9px + 0.51vw);
        padding: 7.44vw 12vw 4.42vw 12vw;
        text-align: center;
    }
    .top-info .top-info-ttl br {
        display: none;
    }
    .top-info .top-info-ttl:after {
        width: 18vw;
        height: 18vw;
    }
    .top-info .top-info-txt {
        width: 100%;
        padding: 0 6% 4vw;
        text-align: center;
    }
    .top-info .top-info-body {
        display: inline-block;
        text-align: left;
    }
    .top-info .top-info-note {
        margin-top: 1em;
        text-align: right;
    }
    .top-side {
        position: static;
        width: 100%;
        padding: 8vw 3.125%;
        margin-bottom: 16vw;
        max-width: 100%;
        min-width: 0;
        background: #e2efee;
        box-shadow: none;
        transition: opacity 1.2s;
        opacity: 0;
    }
    .top-side.active {
        opacity: 1;
    }
    .top-side ul {
        opacity: 1;
        transition: none;
    }
    .top-side .top-side-main {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 0 1vw;
    }
    .top-side .top-side-main li {
        width: 45.5vw;
    }
    .top-side .top-side-main a {
        position: relative;
        display: block;
        overflow: hidden;
    }
    .top-side .top-side-main .top-side-img {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        height: 30vw;
        margin: auto;
    }
    .top-side .top-side-main .top-side-img img {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
    }
    .top-side .top-side-main .top-side-sp-img {
        padding: 3vw 2% 1vw;
        text-align: center;
    }
    .top-side .top-side-main .top-side-sp-img img {
        width: 14vw;
    }
    .top-side .top-side-main .top-side-sp-img svg {
        width: 13.5vw;
        height: 10.5vw;
    }
    .top-side-store .top-side-sp-img svg * {
        fill: #19b411;
        stroke: #4C4239;
        stroke-width: 20px;
    }
    .top-side .top-side-main .top-side-sp-img .line {
        stroke: #4C4239;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }
    .top-side .top-side-main .top-side-sp-img .no-line {
        stroke: none;
    }
    .top-side .top-side-main .top-side-sp-img .no-color {
        fill: none;
    }
    .top-side .top-side-main p {
        padding: 1vw 2%;
        font-size: calc(6.26px + 1.531vw);
        text-align: center;
    }
    .top-side .top-side-gas .color {
        fill: #2e3be7;
    }
    .top-side .top-side-oil .color {
        fill: #d92938;
    }
    .top-side .top-side-electric .color {
        fill: #ffb033;
    }
    .top-side .top-side-contact {
        padding: 8vw 6%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .top-side .top-side-contact h3 {
        margin-bottom: 5vw;
        font-size: calc(10.35px + 2.041vw);
    }
    .top-side .top-side-mail {
        padding-top: 6vw;
        margin: 6vw 0 0;
        border-top: 1px solid #e2efee;
    }
    .top-side .top-side-telno {
        line-height: 1.35em;
    }
    .top-side .top-side-telno a {
        font-size: calc(12.78px + 4.592vw);
    }
    .top-side .top-side-telno span {
        font-size: .75em;
    }
    .top-side .top-side-note {
        font-size: .875em;
        display: inline-block;
    }
    .top-side .ta-right {
        display: block;
        text-align: right;
    }
    .top-side .top-side-time {
        padding: 0 .6em;
        margin: 3vw auto 2vw;
        font-size: .875em;
        display: block;
        max-width: 22em;
    }
    .top-side.small {
        position: static;
        width: 100%;
        height: auto;
        transition: auto;
    }
    .top-side.small:after {
        content: none;
    }
    .top-side.small ul {
        visibility: visible;
        opacity: 1;
    }
    .top-side.small:hover {
        width: 100%;
        padding-top: 8vw;
    }
    .top-side.small:hover ul {
        transition: auto;
    }
    .top-side.bottom {
        width: 100%;
        padding: 0;
    }
    .top-side.bottom:hover {
        opacity: 1;
    }
    .top-banner-content {
        padding: 0 3.125% 3em 3.125%;
    }
    .top-modal-inner {
        width: 100%;
        padding: 0 10%;
     }
    .top-service {
        padding: 0 0 11.2vw;
    }
    .top-service:after {
        width: 100%;
    }
    .top-service .top-ttl {
        margin-bottom: 10.24vw;
    }
    .top-service .top-ttl:after {
        bottom: auto;
    }
    .top-service .top-ttl .top-ttl-en {
        padding-top: 2vw;
        margin-bottom: -2vw;
    }
    .top-service .top-ttl .top-ttl-jp {
        line-height: .9;
        margin-top: 1em;
    }
    .top-service .top-ttl .sp-block {
        display: block;
    }
    .top-service .top-service-list>li {
        position: relative;
        margin: 0 0 2.4vw;
    }
    .top-service .top-service-list>li:before {
        right: 3%;
        font-size: calc(-34.31px + 18.815vw);
    }
    .top-service .top-service-img h3 {
        left: 5%;
    }
    .top-service .top-service-img:after {
        left: 5%;
    }
    .top-service .top-service-menu {
        padding: 2.56vw 6%;
        position: relative;
    }
    .top-service .top-service-menu a {
        padding: 0 0 0 6%;
        background: url(../img/module/icon_arw_01.svg) no-repeat left 0 center;
    }
    .top-service .top-service-menu a:hover,
    .top-service .top-service-menu a:active {
        background-position: left 2% center;
    }
    .top-contact {
        position: relative;
        margin: 5.12vw 0;
        padding: 10.88vw 0;
    }
    .top-contact .top-contact-list {
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .top-contact .top-contact-list h3 {
        margin: 0 0 .8em;
        font-size: 1.25em;
        margin-bottom: 4vw;
    }
    .top-contact .top-contact-list .top-contact-mail {
        padding: 3.84vw 4%;
    }
    .top-contact .top-contact-mail {
        width: 100%;
        margin-top: 4.8vw;
    }
    .top-contact .top-contact-mail .mail-btn {
        margin: 0 auto 3.84vw;
    }
    .top-contact .top-contact-note {
        font-size: .875em;
    }
    .top-contact .top-contact-tel__wrap {
        width: 100%;
    }
    .top-contact .top-contact-tel {
        width: 100%;
        background: #f5f0df url(../img/module/contact_tel_bg.png) no-repeat center/100% 100%;
        overflow: hidden;
    }
    .top-contact .top-contact-tel:after {
        left: -1.5%;
        width: 13.44vw;
        height: 18.72vw;
        background-size: contain;
    }
    .top-contact .top-contact-tel .top-contact-note {
        max-width: 74%;
    }
    .top-contact .top-contact-telno {
        font-size: calc(16.78px + 4.592vw);
        line-height: 1;
        margin-top: -.1em;
        margin-bottom: .3em;
    }
    .top-contact .top-contact-telno span {
        font-size: .347em;
    }
    .top-article {
        padding: 16vw 0;
    }
    .top-article .top-article-inner {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .top-article .top-article-item {
        width: 100%;
    }
    .top-article .top-article-headline {
        padding: 0 0 3.072vw 3%;
    }
    .top-article .top-article-headline h2 {
        font-size: calc(18.17px + 1.020vw);
    }
    .top-article .top-article-headline:after {
        bottom: 1em;
        width: 8.48vw;
        height: 8.48vw;
        min-width: 42px;
        min-height: 42px;
    }
    .top-article .top-article-headline .top-article-more {
        display: none;
    }
    .top-article .top-article-more {
        width: 100%;
        margin: 3vw 0 .2em auto;
        text-align: right;
    }
    .top-article .top-article-more a {
        color: #fff;
        padding: 0.5em 2.125em 0.5em 3%;
        border-radius: .5em;
        background: #42988d url(../img/module/icon_arw_01_w.svg) no-repeat right 0.7142em center/0.42em;
    }
    .top-article .top-article-more a:hover,
    .top-article .top-article-more a:active {
        color: #fff;
        background-color: #a0cbc6;
        background-position: right .5em center;
    }
    .top-article .top-article-list a {
        padding: 1em 5% .6em .625em;
    }
    .top-article .top-article-list+.top-article-more {
        display: block;
    }
    .top-article .top-article-ttl {
        margin-top: .5em;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.5;
    }
    .top-article .top-news {
        margin-bottom: 16vw;
    }
    .top-bnr {
        padding: 8vw 0;
    }
    .top-bnr .top-bnr-list {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .top-bnr .top-bnr-list li {
        margin: 0 auto;
        width: 100%;
        max-width: 560px;
    }
    .top-bnr .top-bnr-list li+li {
        margin-top: 4vw;
    }
}

@media only screen and (max-width: 480px) {
    .mail-btn a {
        background-position: left 8% center, right 4px bottom 4px;
    }
    .top-service .top-service-list>li {
        width: 100%;
        margin-bottom: 4.8vw;
    }
    .top-service .top-service-list>li:before {
        font-size: calc(14.73px + 16.071vw);
    }
    .top-contact .top-contact-list .top-contact-mail {
        padding: 7.68vw 4%;
    }
    .top-contact .top-contact-list h3 {
        margin-bottom: 8vw;
    }
    /* .top-contact .top-contact-tel {
        background: #fff;
    } */
    .top-contact .top-contact-tel .top-contact-note {
        max-width: 90%;
    }
    .top-bnr .top-bnr-list a {
        background-position: right 27% top;
        background-size: 142%;
    }
    .top-bnr .top-bnr-txt {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        margin-top: 40%;
        width: 100%;
        height: auto;
        padding: 3vw 3%;
    }
    .top-bnr .top-bnr-txt:after {
        content: none;
    }
    .top-bnr .top-bnr-message {
        width: 50%;
        padding: 0 0 0 3%;
        margin: 0;
    }
    .top-bnr .top-bnr-message:after {
        right: auto;
        top: 0;
        height: 60%;
        width: 1%;
    }
    .top-bnr .top-bnr-ttl {
        width: 50%;
    }
}