/*
Theme Name: tapros
Theme URl: https://www.tapros.co.jp/wp/
Author: バウハウス
Description: タプロスのオリジナルテーマ
tags: テーマのタグ
License: テーマのライセンス
License URl: テーマのライセンスURL
Version: バージョン
*/



@charset "UTF-8";


/* ●●●●●●●●●●共通設定（PC）●●●●●●●●●● */


#wrap{
position: relative;
}

.pc{display: block;}
.smp{display: none;}
@media only screen and (max-width:767px) {
.pc{display: none;}
.smp{display: block;}
}

h2{
font-size: 50px;
font-weight: 700;
line-height: 130%;
    & span{
    font-size: 28px;
    font-weight: 700;
    display: block;
    }
}
@media only screen and (max-width:767px) {
h2{
font-size: 2.3rem;
    & span{
    font-size: 1.35rem;
    }
}
}

h3{
font-size: 28px;
font-weight: 700;
line-height: 40px;
}
@media only screen and (max-width:1024px) {
h3{
font-size: 1.5rem;
}
}

.linkmore{
position: relative;
padding-right: 40px;
display: block;
    
    &:after{
    content: '';
    position: absolute;
    top: 50%;
    right: 12.5px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translate(0,-60%);
    }
    
    &:before{
    content: "";
    display: inline-block;
    background: #0068ab;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    }
    
    &:hover{opacity: 0.6;}
}

.link_btm{
min-width: 350px;
display: inline-flex;
align-items: center;
text-align: left;
font-size: 20px;
border: 2px solid #0068ab;
border-radius: 50px;
background: #fff;
padding: 20px 70px 20px 30px;
position: relative;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    
    &:before, &:after{
    content: "";
    display: inline-block;
    position: absolute;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    &:before{
    background: #0068ab;
    border-radius: 100%;
    width: 45px;
    height: 45px;
    top: 50%;
    right: 15px;
    transform: translate(0,-53%);
    }
    &:after{
    top: 47%;
    right: 37px;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translate(0,-53%);
    }
}

.link_btm:hover{
color: #fff;
background: #0068ab;
opacity: 1;
    
    &:before{background: #fff;}
    &:after{
    border-top-color: #0068ab;
    border-right-color:#0068ab;
    }
}

.gas .link_btm{
border-color: #E60012;
    &:hover{background: #E60012;}
    &:before{background: #E60012;}
    &:hover:after{
    border-top-color: #E60012;
    border-right-color: #E60012;
    }
}
.elect .link_btm{
border-color: #FF9200;
    &:before{background: #FF9200;}
    &:hover{background: #FF9200;}
    &:hover:after{
    border-top-color: #FF9200;
    border-right-color: #FF9200;
    }
}
.equ .link_btm{
border-color: #00B896;
    &:before{background: #00B896;}
    &:hover{background: #00B896;}
    &:hover:after{
    border-top-color: #00B896;
    border-right-color: #00B896;
    }
}
.coin .link_btm{
border-color: #898889;
    &:before{background: #898889;}
    &:hover{background: #898889;}
    &:hover:after{
    border-top-color: #898889;
    border-right-color: #898889;
    }
}

.gas .link_btm,
.elect .link_btm,
.equ .link_btm,
.coin .link_btm{
    &:hover:before{background: #fff;}
}

@media only screen and (max-width:1024px) {
.link_btm{
width: 100%;
min-width: auto;
max-width: 400px;
font-size: 1.15rem;
}
}



/*---------------------------------------------------

　　ヘッダー

　---------------------------------------------------*/
header{
width: 100%;
background: #fff;
position: fixed;
z-index: 1000;
}

.submenu{
display: flex;
justify-content: flex-end;
align-items: center;
}

.main_menu_box{
display: inline-block;
position: relative;
}

.head_menu{
display: flex;
align-items: center;
height: 100%;
margin-top: 10px;
}

.head_menu > li a,
.nav-button{
line-height: 100%;
display: block;
padding: 15px 20px;
font-weight: 500;
}
.head_menu > li a:hover{
opacity: 1;
}

/*メニュー下部で動くバー*/
.nav-indicator{
position: absolute;
bottom: -22px;
left: 0;
height: 3px;
background-color: #0068ab;
width: var(--indicator-width, 0px);
transform: translateX(var(--indicator-left, 0px));
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
            width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
}
@media only screen and (max-width:1024px) {
.nav-indicator{
display: none;
}
}

.hed_tel_box{
display: flex;
flex-direction: column;
margin: 0 30px;
}

.tel_num a{
color: #0068ab;
font-weight: 700;
}

.tel_num a > span{
font-size: 28px;
font-weight: 700;
}

.tel_acc{
text-align: right;
font-size: 13px;
}

.hed_tel_box .linkmore{
padding-right: 20px;
}
.hed_tel_box .linkmore:after{
right: 7.5px;
width: 3px;
height: 3px;
}
.hed_tel_box .linkmore:before{
width: 15px;
height: 15px;
}

.head_menu_sub{
display: flex;
}

.head_menu_sub > li{
width: 110px;
height: 95px;
}

.head_menu_sub > li a{
width: 100%;
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #0068ab;
font-size: 13px;
}
.head_menu_sub > li.recruit a{
background: #33a98a;
}

.head_menu_sub img{
width: 35px;
}
.head_menu_sub span{
margin-top: 5px;
}



/* ----------------------------------------

	#　メガメニュー

---------------------------------------- */
.nav-item {
display: flex;
align-items: center;
border-right: 1px dashed #b2b2b2;
}

.nav-button{
background: none;
border: none;
font-size: 16px;
cursor: pointer;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
}

/* 矢印アイコン */
.arrow {
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(45deg);
transition: transform 0.3s;
}

.nav-item.is-active .arrow{
transform: rotate(-135deg);
}

/* メガメニュー（サブメニュー領域） */
.mega-menu{
position: absolute;
top: 75px;
left: 0;
width: 197%;
background-color: #0068b7;
border-bottom-left-radius: 50px;

/* 初期状態：非表示 */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* 開いた状態のスタイル */
.nav-item.is-active .mega-menu{
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* メガメニュー内部のレイアウト */
.mega-menu-inner{
padding: 70px;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 50px;
}

.menu_image{
max-width: 300px;
flex: 1;
flex: 1;

    & img{border-radius: 20px;}
}

.mega-menu-inner ul {
  max-width: 300px;
  width: 100%;
}

.mega-menu-inner ul li{
border-bottom: 1px solid rgba(255,255,255,0.5);
}

.mega-menu-inner .linkmore{
    color: rgba(255,255,255,0.5);
    transition: background-color 0.2s ease, color 0.2s ease;

    &:before{
    background: rgba(255,255,255,0.5);
    transition: background-color 0.2s ease, color 0.2s ease;
    }
    &:after{
    border-color: #0068b7;
    transition: background-color 0.2s ease, color 0.2s ease;
    }

    &:hover{
    color: #fff;
        &:before{
        background: #fff;
        }
    }
    &.service:hover:after{border-color: #fff;}
    &.gas:hover:before{background: #DC0008;}
    &.wat:hover:before{background: #60a9e0;}
    &.ele:hover:before{background: #FF9200;}
    &.equ:hover:before{background: #00B694;}
    &.coin:hover:before{background: #888788;}
}



/* ----------------------------------------

	#　スマホメニュー

---------------------------------------- */
@media only screen and (max-width:1024px) {
header{
background-color: transparent;
}

.submenu{
flex-direction: column;
justify-content: flex-start;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 2;
padding: 70px 5%;
overflow: scroll;
}

.open  .submenu{
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}

.main_menu_box{
width: 100%;
margin-bottom: 50px;
}

.head_menu{
width: 100%;
flex-direction: column;
}

.head_menu > li{
border-right: none;
border-bottom: 1px solid #b2b2b2;
width: 100%;
flex-direction: column;
align-items: flex-start;

    & a, .nav-button{
    padding: 20px;
    width: 100%;
    text-align: left;
    }
}

.mega-menu {
    position: static;
    width: 100%;
    background-color: #f9f9f9;

    /* アコーディオン開閉のアニメーション設定 */
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-radius: 0;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease, visibility 0.3s;
  }

  /* アコーディオンが開いたとき */
  .nav-item.is-active .mega-menu {
    max-height: 1000px;
    transition: max-height 0.35s cubic-bezier(0.9, 0, 0.8, 0.2), opacity 0.35s ease;
  }

  .mega-menu-inner {
    flex-direction: column;
    gap: 0;
    padding: 0;

        & ul{max-width: 100%;}
        & ul li{
        border-bottom: none;
        border-top: 1px dotted #b2b2b2;
        }

        & .linkmore {
        color: #767676;
            &:before, &:after{display: none;}
            &:hover{color: #767676;}
        }
  }

  .menu_image {
  display: none;
}

.hed_tel_box{
width: 100%;
margin: 0 0 50px;
align-items: center;
}

.tel_num a{
font-size: 1.5rem;
    & > span{font-size: 2.5rem;}
}

.tel_acc{
border: 1px solid #0068ab;
padding: 10px 20px;
border-radius: 30px;
margin-top: 10px;
}

.head_menu_sub{
width: 100%;
justify-content: space-between;
}

.head_menu_sub > li{
width: 49%;
height: auto;

    & a{
    padding: 30px;
    }
}
}



/* ----------------------------------------

	#　スマホメニューのアイコン

---------------------------------------- */

.head_img{
display: none;
width: 200px;
padding: 10px 20px;
}
@media only screen and (max-width:1024px) {
.head_img{
display: block;
}
}

#menu{
display: none;
}

@media only screen and (max-width:1024px) {
#menu{
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
z-index: 1000;
top: 13px;
right: 10px;
width: 50px;
height: 50px;
transition: all .3s ease 0s;
}

#menu span{
display : block;
position: absolute;
width: 30px;
height: 3px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #000;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#menu span:nth-of-type(1) {top: 30%;}
#menu span:nth-of-type(3) {top: 70%;}
#menu span{
width: 30px;
height: 3px;
}
  
/*メニューボタン　展開後*/
.open #menu span{
top: 50%;
left: 20%;
background : #1c385a;
}
.open #menu span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.open #menu span:nth-child(2),
.open #menu span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
}



/*---------------------------------------------------

　　メインイメージ・スライダー

　---------------------------------------------------*/
#top_contents{
padding-top: 110px;
display: flex;
}

#catchcopy{
width: 35%;
display: flex;
flex-direction: column;
justify-content: center;
}

#catchcopy > div{
width: 15vw;
margin: 0 auto;
}
#catchcopy > div.logo{
max-width: 170px;
}
#catchcopy > div.copy{
width: 20vw;
max-width: 200px;
margin-bottom: 30px;
margin-top: 30px;
}
#catchcopy > div.aniva70{
max-width: 190px;
}

#slider{
flex: 1;
}

#slider .splide{
height: calc(100vh - 110px);
max-height: 800px;
width: 100%;
overflow: hidden;
}

#slider .splide__track,
#slider .splide__list,
#slider .splide__slide{
height: 100%;
}

#slider .splide__slide img{
transition: 10s ease-out;
object-fit: cover;
width: 100%;
height: 100%;
}
#slider .splide__slide.is-active img{
transform: scale(1.15);
transition-delay: 0s;
}

@media only screen and (max-width:1024px) {
#top_contents{
padding-top: 0;
}
}

@media only screen and (max-width:767px) {
#top_contents{
display: block;
position: relative;
}

#catchcopy{
width: auto;
position: absolute;
z-index: 10;
top: 100px;
left: 10vw;
}

#catchcopy > div,
#catchcopy > div.copy{
width: 30vw;
}

#slider{
width: 100%;
}

#slider .splide{
max-height: 650px;
}
}


/*---------------------------------------------------

　　お知らせ・求人情報

　---------------------------------------------------*/
.top_info_box{
display: flex;
justify-content: space-between;
width: 92%;
max-width: 1000px;
margin: 100px auto;
}

.top_info_inner{
width: 48%;
}

h3.top_tit{
font-size: 25px;
position: relative;
display: inline-block;
padding: 0 20px 15px;
}
h3.top_tit:after{
content: "";
position: absolute;
width: 100%;
height: 6px;
background-image: linear-gradient(90deg, #0068ab, #2abae5);
display: inline-block;
bottom: 0;
left: 0;
}

h3.top_tit > span{
font-size: 16px;
font-weight: 500;
margin-left: 15px;
}

.top_info_list{
margin: 0 15px;
}

.top_info_list li{
padding: 25px 0;
border-bottom: 1px solid #d9d9d9;
flex: 1;
    
    & a{
    display: flex;
    align-items: flex-start;
    }
    
    & .thum{
    width: 160px;
    background: #cce1ee;
    border-radius: 15px;
        & img{
        object-fit: contain;
        width: 160px;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 15px;
        }
    }
    
    & .txt{
    flex: 1;
    margin-left: 25px;
    word-break: break-all;
    }
    & .date{
    display: inline-block;
    font-size: 14px;
    margin-right: 7px;
    }
    & .cate{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    }
    & .tit{margin-top: 15px;}
}

.cat-name{
border: 1px solid #0068ab;
border-radius: 10px;
padding: 5px 10px;
line-height: 100%;
font-size: 10px;
color: #0068ab;
}

.info_link_box{
text-align: right;
margin: 30px;
}

@media only screen and (max-width:1024px) {
.top_info_box{
flex-direction: column;
margin: 80px auto;
}

.top_info_inner{
width: 100%;
margin-bottom: 50px;
}
}

@media only screen and (max-width:767px) {
.top_info_list{
margin: 0;
display: flex;
justify-content: space-between;
gap: 25px;
}

.top_info_list li{
width: calc((100% - 25px) / 2);
flex: none;

    & a{flex-direction: column;}
    
    & .thum{max-width: 100%;}

    & .txt{
    margin-left: 0;
    margin-bottom: 0;
    }
    & .date{
    margin-top: 7px;
    margin-bottom: 7px;
    }
    & .cate{
    display: flex;
    }
    & .tit{
    font-size: 0.95rem;
    line-height: 150%;
    }
}

.info_link_box{
margin: 15px 0px;
}
}


/*---------------------------------------------------

　　タプロスの取り組み

　---------------------------------------------------*/
#top_activity{
background: #CBEEFE;
position: relative;
max-height: 1000px;
min-height: 850px;
height: 60svw;
display: flex;
align-items: center;
}

.top_activ_box{
width: 92%;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
    
    & h2{color: #0068ab;}
    & p{
    line-height: 200%;
    margin: 30px 0 60px;
    }
}

.house_img{
width: 55%;
max-width: 1000px;
position: absolute;
right: 0;
top: -50px;
z-index: 1;
}

@media only screen and (max-width:767px) {
#top_activity{
max-height: 100%;
min-height: 100%;
height: 100%;
flex-direction: column-reverse;
padding-bottom: 80px;
}

.house_img{
width: 95%;
max-width: 100%;
position: relative;
top: 0;
margin-left: auto;
margin-top: -50px;
}

.top_activ_btn{
text-align: center;
}
}


/*---------------------------------------------------

　　コンテンツメニュー

　---------------------------------------------------*/
#top_main_menu{
padding: 100px 0;
}

.top_content_box{
display: flex;
align-items: center;
    
    &.service{justify-content: flex-start;}
    &.company{justify-content: flex-end;}
    
    &:last-child{margin-top: 100px;}
}

.content_title{
width: 50%;
height: 520px;
display: flex;
align-items: center;
justify-content: center;
background-position: center center;
background-size: cover;
}
.service .content_title{
background-image: url("https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/top_serv_img.webp");
}
.company .content_title{
background-image: url("https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/top_com_img.webp");
}

.content_title h2{
color: #fff;
font-size: 55px;
text-align: center;

    & span{
    display: block;
    font-size: 16px;
    font-weight: 500;
    }
}

.content_item{
width: 50%;
max-width: 680px;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1;
gap: 25px;
position: relative;
z-index: 1;
}
.service .content_item{
margin-left: -30px;
margin-right: 4%;
}
.company .content_item{
margin-right: -30px;
margin-left: 4%;
}

.content_item li{
flex: 0 0 calc((100% - 25px * 2) / 3);
aspect-ratio: 1 / 1;
}

.content_item li a{
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(0,0,0,.3);
border-radius: 15px;
text-align: center;
transition: background-color 0.2s ease, color 0.2s ease;
}

.icon_item{
display: inline-block;
width: 60px;
height: 60px;
background-color: #0068ab;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background-color 0.3s ease;
}

i.icon_gas{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_gas.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_gas.svg');
background-color: #E60012;
}
i.icon_water{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_water.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_water.svg');
background-color: #0069BE;
}
i.icon_elect{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_elect.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_elect.svg');
background-color: #FF9200;
}
i.icon_equip{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_equip.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_equip.svg');
background-color: #00B896;
}
i.icon_laundry{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_coin.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_coin.svg');
background-color: #898889;
}
i.icon_company{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_com.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_com.svg');
}
i.icon_policy{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_policy.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_policy.svg');
}
i.icon_client{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_client.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_client.svg');
}
i.icon_access{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_acc.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_acc.svg');
}
i.icon_activity{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_act.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_act.svg');
}
i.icon_contact{
-webkit-mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_contact.svg');
mask-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_contact.svg');
}

i.icon_mark,
a:hover .icon_item.icon_mark{
background-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_mark.svg');
background-color: transparent;
}
i.icon_info{
background-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_info.svg');
background-color: transparent;
}
i.icon_privacy{
background-image: url('https://www.tapros.co.jp/wp/wp-content/themes/tapros/img/icon_privacy.svg');
background-color: transparent;
}

.content_item li{
    & a:hover{
    background: #0068ab;
    color: #fff;
    opacity: 1;
    }
    
    &.gas a:hover{background: #E60012;}
    &.wat a:hover{background: #0069BE;}
    &.ele a:hover{background: #FF9200;}
    &.equ a:hover{background: #00B896;}
    &.coin a:hover{background: #898889;}
    
    & img{
    width: 60px;
    height: 60px;
    }
    
    & span{
    font-weight: 500;
    line-height: 120%;
    height: 40px;
    display: flex;
    align-items: center;
    }
}

a:hover .icon_item{
background: #fff;
}

@media only screen and (max-width:1024px) {
#top_main_menu{
padding-top: 0;
}

.top_content_box{
flex-direction: column;
    &:last-child{flex-direction: column-reverse;}
}

.content_title{
width: 100%;
height: 30vw;
min-height: 300px;
}

.content_item{
width: 90%;
}
.service .content_item,
.company .content_item{
margin: 0;
margin-top: -30px;
}
}

@media only screen and (max-width:767px) {
.content_item li{
width: 100%;
aspect-ratio: auto;
flex: initial;
    
    & a{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 25px;
    }
    
    & a > i{width: 35%;}
    & span{font-size: 18px;}
}

.content_item li.equ,
.content_item li.coin{
width: 46.5%;
    
    & a{
    flex-direction: column;
    padding: 10px;
    }
}

.company .content_item li a{
padding: 15px;
}
}


/*---------------------------------------------------

　　フッター

　---------------------------------------------------*/
.foot_bnr_box{
width: 92%;
max-width: 1000px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px;
}

.foot_bnr_box li{
width: calc((100% - 50px * 3) / 4);
}

#main_foot{
width: 100%;
padding: 100px 0 30px;
background: #d3edfb;
}

.foot_box{
width: 100%;
max-width: 900px;
margin: 0 auto;
}

.foot_com_box{
display: flex;
justify-content: center;
gap: 30px;
    & img{
    width: auto;
    height: 85px;
    }
}

.foot_menu_box{
display: flex;
justify-content: space-between;
gap: 40px;
margin: 50px 0 80px;
}

.foot_menu_list{
width: calc((100% - 40px *3) / 4);
}

.foot_menu_list li{
margin: 15px 0 15px 15px;
    
    & a, & span{
    display: block;
    line-height: 100%;
    font-size: 14px;
    }
    
    &.foot_maintit{
    border-bottom: 1px solid #b2b2b2;
    margin: 0;
        
        & a, & span{
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
        font-size: 15px;
        font-weight: 500;
        }
    }
}

p.copy{
text-align: center;
color: #4d4d4d;
font-size: 0.8rem;
}

@media only screen and (max-width:1024px) {
.foot_bnr_box{
gap: 30px;
justify-content: flex-start;
}

.foot_bnr_box li{
width: calc((100% - 30px *2) / 3);
}

#main_foot{
padding: 30px 4%;
}

.foot_box{
display: flex;
flex-direction: column-reverse;
}

.foot_com_box{
margin-bottom: 50px;
}

.foot_menu_box{
margin: 0
}

.foot_menu_box .pc{
display: none;
}

.foot_menu_list{
width: 100%;
display: flex;
justify-content: center;
border-bottom: 1px solid #b2b2b2;
margin-bottom: 50px;
}

.foot_menu_list li{
width: 50%;
text-align: center;
margin: 0 0 30px;
    
    &:last-child{border-left: 1px solid #b2b2b2;}
    
    & a{padding: 5px;}
}
}

@media only screen and (max-width:767px) {
.foot_bnr_box li{
width: calc((100% - 30px) / 2);
}

.foot_com_box{
flex-direction: column;
align-items: center;
}
}


/*---------------------------------------------------

　　トップに戻るボタン

　---------------------------------------------------*/
#topBtn {
position: fixed;
bottom: 20px;
right: 10px;
display: block;
z-index: 99;
}

.topBtn {
width: 120px;
height: 120px;
display: inline-block;
color:#fff;
vertical-align: middle;
}
@media only screen and (max-width:767px) {
.topBtn {
width: 80px;
height: 80px;
}
}



/*---------------------------------------------------

　　2層目　共通

　---------------------------------------------------*/
#second_title{
padding-top: 110px;
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}

.title_main_box{
flex: 1;
min-width: 400px;
margin: 0 auto;
padding: 0 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.title_img_box{
width: 55%;
display: flex;
    & img{
    object-fit: cover;
    max-height: 700px;
    min-height: 600px;
    }
    
    &.sub_content img{
    min-height: 330px;
    }
}

.title_main_box h1{
color: #0068ab;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
min-height: 350px;
    
    &.gas{color: #E60012;}
    &.water{color: #0069BE;}
    &.elect{color: #FF9200;}
    &.equip{color: #00B896;}
    &.laundry{color: #898889;}
}

.title_icon{
width: 60px;
height: 60px;
display: inline-block;
background-color: #0068ab;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.title_main{
font-size: 65px;
font-weight: 700;
line-height: 100%;
margin: 10px 0 15px;
}
.title_sub{
font-size: 25px;
font-weight: 700;
}
.title_main_box i img{
width: 60px;
height: 60px;
}

.title_txt{
margin: 0 auto;
max-width: 430px;
    
    & p{
    margin-top: 20px;
    line-height: 28px;
    }
}
#second_title > .title_txt{
flex: 1;
margin-left: 0;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

.content_box{
width: 92%;
max-width: 1000px;
margin: 100px auto 150px;
}

h2.color_tit{
flex: 1;
color: #0068ab;
line-height: 130%;
}
#service_gas h2.color_tit{color: #E60012;}
#service_elec h2.color_tit {color: #FF9200;}
#service_equipment h2.color_tit {color: #00B896;}
#service_laundry h2.color_tit {color: #898989;}

h4.sec_tit{
position: relative;
padding-bottom: 5px;
margin-bottom: 40px;
    
    &:before, &:after{
    content: "";
    position: absolute;
    rotate: 135deg;
    translate: -50% 0;
    width: 15px;
    height: 15px;
    z-index: 10;
    }
    &:before{
    bottom: -5px;
    left: 10px;
    }
    &:after{
    bottom: -13px;
    left: 10px;
    border: 2px solid;
    border-color: #333333 #333333 transparent transparent;
    }
    
    & > div{
    font-size: 1.7rem;
    position: relative;
    font-weight: 500;
        
        &:before{
        content: "";
        position: absolute;
        bottom: -10px;
        left: 21px;
        width: 100%;
        max-width: 320px;
        height: 2px;
        background: #000;
        }
    }
}

h4.sec_sub_tit{
font-size: 1.5rem;
font-weight: 700;
text-align: center;
color: #0068ab;
}

.content_hed_txt{
margin: 30px 0 50px;
}

@media only screen and (max-width:1024px) {
#second_title{
padding-top: 70px;
    & h1{
    margin-top: 0;
    margin-bottom: 0;
    }
}
}

@media only screen and (max-width:767px) {
.content_box{
margin-bottom: 100px;
}

#second_title{
flex-direction: column-reverse;
}

.title_img_box{
width: 100%;
    
    & img{
    min-height: 100% !important;
    max-height: 250px;
    height: 70vw;
    }
}

.title_main_box{
width: 92%;
min-width: auto;
padding: 0;
margin-top: 30px;
    
    & h1{
    margin-top: 30px;
    min-height: 100%;
    }
}

.title_icon{
width: 45px;
height: 45px;
}
.title_main{
font-size: 3.5rem;
}
.title_sub{
font-size: 1.2rem;
}

.title_txt{
max-width: 100%;
margin-top: 30px;
    & h3{text-align: center;}
    
    & > div{
    font-size: 1.5rem;
    line-height: 35px;
    }
}

h4.sec_tit{
    & > div{font-size: 1.5rem;}
}
}



/*---------------------------------------------------

　　2層目　お知らせ

　---------------------------------------------------*/
.info_news_list{
display: flex;
gap: 5px;
border-bottom: 5px solid #0068ab;
}

.info_news_list li{
flex: 1;
    
    & a{
    background: #d9d9d9;
    display: block;
    font-size: 1.15rem;
    text-align: center;
    padding: 15px;
    }
    &.current-cat a{
    background: #0068ab;
    color: #fff;
    font-weight: bold;
    }
}

.news_list_box{
margin: 50px 0;
    
    & li{
    border-bottom: 1px solid #d9d9d9;
    padding: 20px;
    }
    
    & li a{
    display: block;
    }
}

.info_cat_box{
display: flex;
margin-bottom: 5px;
gap: 7px;
}

.info_date{
font-size: 0.95rem;
font-weight: 500;
}

.info_main_tit{
font-size: 1.15rem;
margin-top: 15px;
}

.info_main_txt{
border-bottom: 1px solid #d9d9d9;
border-top: 1px solid #d9d9d9;
padding: 50px 15px;
margin-top: 20px;
}

.pagenation_single{
display: flex;
text-align: center;
margin: 50px 0;
    
    & li{
    width: calc(100% / 3);
    border-right: 1px solid #d9d9d9;
    }
    & li:nth-child(3){
    border-right: none;
    }
    
    & li a{
    display: block;
    padding: 20px;
    font-size: 0.95rem;
    line-height: 120%;
    }
}

@media only screen and (max-width:1024px) {
.news_list_box li{
padding: 20px 0;
}

.info_main_txt{
padding: 50px 0;
}
}




/*---------------------------------------------------

　　2層目　お問い合わせ

　---------------------------------------------------*/
#contact_form{
    & input, & textarea, & select,
    & .wpcf7-list-item-label{
    font-size: 1.05rem;
    padding: 5px;
    font-family: 'Noto Sans JP', sans-serif;
    }
    & textarea{width: 100%;}
    & select{width: 100%; max-width: 350px;}
    & .type_text{width: 100%; max-width: 400px;}
    & input[type="checkbox"]{
    transform: scale(1.5);
    margin-right: 5px;
    }
}

.contact_qu_box{
margin-bottom: 80px;
padding: 50px;
border-radius: 30px;
background: #d3edfb;
}

.contact_qu_link{
display: flex;
justify-content: center;
gap: 50px;
margin-top: 30px;
    
    & > div{
    display: flex;
    flex-direction: column;
    text-align: center;
    }
    & > div span{
    display: block;
    margin-bottom: 15px;
    font-weight: 700;
    }
    
    & a.link_btm{
    padding-top: 10px;
    padding-bottom: 10px;
    }
    
    & .icon_item{
    width: 45px;
    height: 45px;
    margin-right: 10px;
    }
}

.contact_input_box li{
display: flex;
}

.form_name{
font-weight: 500;
width: 30%;
max-width: 250px;
padding: 25px 5px;
border-bottom: 2px solid #0068ab;
display: flex;
justify-content: space-between;
align-items: baseline;
    
    & span{
    background: #de1e1e;
    color: #fff;
    font-size: 13px;
    line-height: 100%;
    padding: 5px;
    border-radius: 5px;
    }
}

.form_content{
flex: 1;
padding: 25px 50px;
border-bottom: 1px solid #999;
    

    & a{color: #0068ab;}
}

.form_privacy{
display: flex;
flex-direction: column;
    
    & p {margin-bottom: 5px;}
}

.wpcf7-turnstile{
text-align: center;
margin: 50px 0;
}

.contact_notes{
background: #f8f8f8;
padding: 30px;
margin-bottom: 50px;
    
    & p{
    display: flex;
    font-size: 0.9rem;
    margin: 7px 0;
    }
    & p:before{content: "※";}
}

.contact_button_box{
text-align: center;
    
    & input{
    width: 100%;
    max-width: 350px;
    padding: 15px 50px !important;
    font-size: 1.5rem !important;
    font-weight: 500;
    border: 1px solid #0068ab;
    border-radius: 50px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    }
    & input:hover{
    background-color: #0068ab;
    color: #fff;
    }
}

@media only screen and (max-width:1024px) {
.contact_qu_box,
.contact_notes{
padding-left: 5%;
padding-right: 5%;
}

.contact_qu_link{
    & > div{flex: 1;}
}
}

@media only screen and (max-width:767px) {
.contact_qu_link{
flex-direction: column;
}

.contact_input_box li{
flex-direction: column;
}

.form_name{
width: 100%;
max-width: 200px;
padding-bottom: 10px;
justify-content: flex-start;
align-items: center;
    
    & span{
    margin-left: 10px;
    }
}

.form_content{
padding: 25px 0;
}
}



/*---------------------------------------------------

　　2層目　プライバシーポリシー

　---------------------------------------------------*/
.privacy_box{
margin: 50px 0;
    
    & h5{
    font-size: 1.15rem;
    font-weight: 500;
    }
}

.privacy_txt{
margin: 15px 0;
}

.privacy_kojinjoho{
counter-reset: number katakana-count ;
}

.privacy_kojinjoho li{
margin: 3px 0;
    
    & div{display: flex;}
    & div:before{
    counter-increment: number;
    content: "(" counter(number) ") ";
    margin-right: 5px;
    }
    
    & p{
    display: flex;
    margin-left: 30px;
    }
    & p.nm_c:before{
    counter-increment: katakana-count;
    content: counter(katakana-count, katakana);
    margin-right: 5px;
    }

}

.privacy_notes{
margin: 15px 0;
font-size: 0.9rem;
}

#privacy_setumei{
width: 100%;
background-color: #d3edfb;
display: inline-block;
}

.privacy_mokuteki li{
margin: 3px 0;
    
    & div{display: flex;}
    & div:before{
    content: "●";
    margin-right: 5px;
    }
    
    & p{
    display: flex;
    margin-left: 30px;
    }
    & p:before{
    content: "・";
    margin-right: 5px;
    }
}

.tokutei_list{
display: flex;
justify-content: center;
gap: 30px;
margin: 50px 0;
    
    & li a{
    display: block;
    padding: 10px 20px;
    border: 1px solid #0068ab;
    border-radius: 30px;
    }
    & li a:hover{
    background: #0068ab;
    color: #fff;
    }
}

.tokutei_box{
max-width: 900px;
margin: 50px auto 100px;
    
    & h5{
    font-weight: 500;
    line-height: 120%;
    border: 1px solid #0068ab;
    padding: 10px;
    display: inline-block;
    }
}

.tokutei_table{
width: 100%;
margin: 15px auto 70px;

    & th{
    font-weight: 500;
    width: 25%;
    text-align: left;
    padding: 15px 5px;
    border-bottom: 2px solid #0068ab;
    }
    & td{
    padding: 15px 30px;
    border-bottom: 1px solid #999999;
    }
    
    & a{
    color: #0068ab;
    }
    
    &:last-of-type{
    margin-bottom: 30px;
    }

}

@media only screen and (max-width:767px) {
.tokutei_list{
gap: 10px;
    
    & li{flex: 1;}
    
    & li a{
    padding: 10px;
    line-height: 130%;
    text-align: center;
    }
}

.tokutei_table{
font-size: 0.9rem;
    
    & tbody, & tr, & th, & td{display: block;}
    & th{
    width: 200px;
    padding-bottom: 10px;
    }
    & td{
    padding: 15px;
    }
}
}