/*-------------------------------
    共通
--------------------------------*/
.test {
padding: 1000px 0;
}
html,
main {
    width: 100%;
    height: 100%;
}

html {scroll-behavior: smooth;}

body {
    width: 100%;
    font-family:"IBM Plex Sans JP" , Sans-serif;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

h1 { font-size: 26px; }
h2 { font-size: 24px; }

a {
    display: block;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

img {
    width: 100%;
    max-width: 100%;
    border: none;
    vertical-align: top;
}

ul {
    list-style: none;
    margin: 0 0;
    padding: 0 0;
}

.inner {
    max-width: 1240px;
    margin: 0 auto;
    width: 90%;
}

.sp-1024 {display: none;}
.sp-768 {display: none;}
.sp-478 {display: none;}
.sp-378 {display: none;}


/*-------------------------------
    共通レスポンシブ
--------------------------------*/
@media(max-width: 1200px) {
    .inner {width: 90%;}
}
@media(max-width: 1024px) {
    h1 { font-size: 26px; }

    .pc-1024 {display: none;}
    .sp-1024 {display: block;}
}

@media(max-width: 768px) {
    h1 { font-size: 24px; }

    .pc-768 {display: none;}
    .sp-768 {display: block;}
}

@media(max-width: 478px) {
    h1 { font-size: 19px; }
    p { font-size: 16px; }

    .pc-478 {display: none;}
    .sp-478 {display: block;}
}

@media(max-width: 378px) {
    h1,
    h2 {font-size: 18px;}
    p { font-size: 15px; }
    .pc-378 {display: none;}
    .sp-378 {display: block;}
}


/*-------------------------------
    ヘッダー
--------------------------------*/
.l-wrap { 
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    min-width: 1040px;
    max-width: 1240px;
    margin: 0 auto;
} 

.l-logo {
    width: 280px;
}
.l-logo a {display: inline-block; }
.l-logo a:hover {
    opacity: .7;
    transition: .5s;
}

.l-nav-list {
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    gap: 35px;
}

.l-nav-list-item a {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
}
.l-nav-list-item a:hover {
    opacity: .8;
    transition: .5s;
}

.l-hm {
    position: fixed;
    width: 35px;
    height: 35px;
    padding: 3px 2px;
    z-index: 1000;
    cursor: pointer;
    top: -100%;
}

.l-cover {
    display: none;
}
/*-------------------------------
    ヘッダーレスポンシブ
--------------------------------*/
@media(max-width: 1500px) {
    .l-wrap,
    .l-logo img,
    .l-nav-list-item a  {
        height: 90px;
    }
}
@media(max-width: 1200px) {
    .l-wrap,
    .l-logo img,
    .l-nav-list-item a  {
        height: 80px;
    }
    .l-nav-list-item a {
        font-size: 15px;
    }
}

@media(max-width: 1024px) {
    .l-nav-list {
        position: fixed;  
        top: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
    }
    
    .l-nav-list.js-nav-open {
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        transition: .8s;
        z-index: 1000;
        min-width: auto;
        visibility: visible;
        transition-delay: .3s;
    }
    
    .l-nav-list-item {
        width: 100%;
        min-width: 220px;
        max-width: 400px;
        height: 10%;
        margin: 0 auto;
        text-align: center;
        flex-grow: 0;
    }
    
    .l-nav-list-item a {
        background-position: 0 0;
        background-size: 200% auto;
        align-items: center;
        text-shadow: 0 0 0;
        color:#000;
    }
    .l-nav-list-item:nth-child(6)  a{ color: #fff; }
    
    .l-nav-list-item a:hover {
        background-position: -100%, 0;
        transform:calc(1, 1);
    }

    .l-hm {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        background: #ee7a00;
        height: 80px;
        width: 80px;
    } 
    
    .l-hm-line {
        display: block;
        position: relative;	
        height: 2.5px;
        background: #fff;
        transition: .5s;
        width: 30px;
        margin: 10px auto 0;
    }
    
    .l-hm-line::before,
    .l-hm-line::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #fff;
        transition: .5s;
        width: 30px;
    }
    
    .l-hm-line::before {
        transform: translateY(-9px);	
        -webkit-transform: translateY(-9px);
    }
    
    .l-hm-line::after {
        transform: translateY(9px);
        -webkit-transform: translateY(9px);
    } 
    
    .l-hm-txt {
        display: block;
        text-align: center;
        margin-top: 15px;
        font-size: 14px;
        color: #fff;
    }
    .js-hm-display { display: none; }
    
    .l-hm-line.js-nav-open {
        background: transparent;
    }
    
    .l-hm-line.js-nav-open::before,
    .l-hm-line.js-nav-open::after {
        content: "";
        transition: .5s;
    }
    
    .l-hm-line.js-nav-open::before {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        background: #fff;
    }
    
    .l-hm-line.js-nav-open::after {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        background: #fff;
    }

    .l-cover {
        display: block;
        position: fixed;
        width: 100%;
        height: 0;
        top: 0;
        right: 0;
        z-index: 900;
        opacity: 0;
        transition: .8s;
        visibility: hidden;
    }

    .js-l-cover {
        background: #fff;
        opacity: .7;
        visibility: visible;
        height: 100vh;
    }
}
    
@media(max-width: 600px) {
    .l-wrap,
    .l-logo img,
    .l-nav-list-item a{
        height: 70px;
    }
    
    .l-logo {
        width: 100%;
        background: #fff;
        text-align: center;
    }
    
    .l-hm {
        top: 70px;
        transform: translateY(0);
        height: 70px;
        width: 70px;
    }
}
    
@media(max-width: 478px) {
    .l-wrap,
    .l-logo img,
    .l-nav-list-item a{
        height: 60px;
    }
    .l-nav-list {
        width: 90%;
        right: 5%;
    }
    .l-nav-list-item { min-width: 190px; }
    .l-hm {
        top: 60px;
        height: 60px;
        width: 60px;
    }
    .l-hm-txt { font-size: 12px; }
    
    .l-hm-line,
    .l-hm-line::before,
    .l-hm-line::after {
        height: 2px;
        width: 25px;
        width: 25px;
    }
}


/*-------------------------------
    head
--------------------------------*/
.head {
    background-color: #f7f7f7;
}
.head-wrap {
    display: flex;
    justify-content: space-between;
    min-width: 1040px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px;
}
.head-txt span,
.head-tel span{
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1;
}
.head-tel p{
    font-size: 24px;
    font-weight: bold;
}
.head-tel p:before {
    content: '';
    background: url(../images/img-tel.png) no-repeat 0 0;
    content: '';
    display: inline-block;
    width: 18px;
    height: 24px;
    margin: 0 7px 0 0;
    background-size: contain;
    vertical-align: middle;
}
.head-web {
    padding: 5px 10px;
    margin-top: 10px;
    border: 1px solid #eaccac;
    border-radius: 3px;
    background-color: #ffecd8;
    color: #ef6d22;
    font-size: 14px;
}
.head-web a {
    color: #ef6d22;
}

/*-------------------------------
    店舗情報
--------------------------------*/
.store {
    background-color: #f9f8f5;
    padding: 60px 0;
}

.store-wrap {
    max-width: 1040px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.store-l {
    width: 710px;
}

.store-l-item,
.store-features {
    margin-bottom: 35px;
}

.store-message h2{
    position: relative;
    margin-bottom: 25px;
    padding: 20px 0;
    border-bottom: 2px solid #d7d2cb;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    letter-spacing: .05em;
}
.store-message h2:before {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    width: 100px;
    height: 2px;
    background-color: #ef6d22;
}

.store-l-item li {
    display: flex;
    align-items: center;
    padding: 12px 5px 10px 5px;
    border-top: 1px solid #cec9c3;
}
.store-l-item li div:nth-of-type(1) {
    width: 135px;
    padding: 20px 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}

.store-l-tel {
    color: #ef6d22;
    font-family: Arial;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.5!important;
}

.store-l-item li div:nth-of-type(2) {
    line-height: 1.8;
    text-align: left;
    letter-spacing: .04em;
}
.store-l-item li div:nth-of-type(2) span {
    display: block;
    color: #707070;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.store-l-item li div:nth-of-type(2) a {
    color: #eb6c05;
}
.store-l-item li div:nth-of-type(2) img {
    width: 32px;
}
.store-r {
    width: 280px;
}
.store-r div {
    margin-bottom: 30px;
}

.store-r-map {
    position: relative;
    overflow: hidden;
    height: 0;
    margin-bottom: 15px;
    padding-top: 280px;
}
.store-r-map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*-------------------------------
    スタッフ
--------------------------------*/
.staff {
    width: 1040px;
    margin: 0 auto;
    padding: 70px 0;
}
.sec-ttl {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 50px;
}
.staff-item {
    display: flex;
    justify-content: center;
}
.staff-item li {
    width: 190px;
    margin: 0 30px;
    line-height: 1;
}
.staff-item li figure {
    position: relative;
    width: 100%;
    height: 0;
    margin-bottom: 12px;
    padding-top: 100%;
    background: #e9e7e7;
}
.staff-item li figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    transform: translate(-50%, -50%);
}
.staff-item .position {
    margin-bottom: 5px;
    color: #707070;
    font-size: 13px;
    letter-spacing: .02em;
    display: block;
}
.staff-item .name {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    display: block;
}

/*-------------------------------
    施工事例
--------------------------------*/
.works {
    padding: 70px 0;
    background-color: #f9f8f5;
}
.works-wrap {
    width: 1040px;
    margin: 0 auto;
}


/*-------------------------------
    電話
--------------------------------*/
.tel {
    padding: 40px 0;
    text-align: center;
}
.tel-item span{
    display: block;
    margin: 0 auto 8px;
    font-size: 20px;
    line-height: 1;
}
.tel-item p {
    font-size: 42px;
    font-weight: bold;
}
.tel-item p:before {
    content: '';
    background: url(../images/img-tel.png) no-repeat 0 0;
    content: '';
    display: inline-block;
    width: 28px;
    height: 34px;
    margin: 0 7px 0 0;
    background-size: contain;
    vertical-align: middle;
}

/*-------------------------------
    追従ボタン
--------------------------------*/
.side-btn {
    position: fixed;
    bottom: 2%;
    right: 2%;
    transform: translate(-2%,-2%);
    z-index: 500;
    width: 90px;
    transition: .5s;
}

.side-btn-contact,
.side-btn-tel {
    transition: .5s;
}

.side-btn-contact:hover,
.side-btn-tel:hover {
    transform: scale(1.2);
}
@media(max-width: 768px) {
    .side-btn { width: 80px; }
}
@media(max-width: 478px) {
    .side-btn { width: 65px; }
}


/*-------------------------------
    fv
--------------------------------*/
footer {
    padding: 45px 0;
    background-color: #505050;
}

.ft-nav {
    display: flex;
    justify-content: center;
    color: #fff;
}
.ft-nav li {
    padding: 5px 15px;
}
.ft-nav li + li {
    border-left: 1px solid #fff;
}
footer p {
    color: #fff;
    text-align: center;
    margin-top: 10px;
}



/*-------------------------------
    フォント・背景色
--------------------------------*/
.txt-center {text-align: center!important;}
.txt-left {text-align: left!important;}
.txt-right {text-align: right!important;}
.txt-just {text-align: justify!important;}

.txt-14 {font-size: 14px!important;}
.txt-16 {font-size: 16px!important;}
.txt-18 {font-size: 18px!important;}
.txt-20 {font-size: 20px!important;}
.txt-22 {font-size: 22px!important;}
.txt-24 {font-size: 24px!important;}
.txt-26 {font-size: 26px!important;}
.txt-28 {font-size: 28px!important;}

@media(max-width: 768px) { 
    .txt-20 {font-size: 18px!important;}
}
@media(max-width: 475px) { 
    .txt-20 {font-size: 16px!important;}
    .txt-18 {font-size: 16px!important;}
}

/* --- フォントカラー --- */
.txt-white {color: #fff!important;}
.txt-pink {color: #d1268c!important;}
.txt-orange {color: #ee7a00;}

/* --- 背景色 --- */
.bg-black {background: #000;}
.bg-white {background: white;}
.bg-orange {background: #ee7a00;}
.bg-beige {background: #F9F7F1;}

/*-------------------------------
    margin ・ padding
--------------------------------*/
/* --- マージン上 --- */
.mt-50 {margin-top: 50px!important;}
.mt-40 {margin-top: 40px!important;}
.mt-30 {margin-top: 30px!important;}
.mt-20 {margin-top: 20px!important;}
.mt-10 {margin-top: 10px!important;}
.mt-0 {margin-top: 0!important;}

/* --- マージン下 --- */
.mb-50 {margin-bottom: 50px!important;}
.mb-40 {margin-bottom: 40px!important;}
.mb-30 {margin-bottom: 30px!important;}
.mb-20 {margin-bottom: 20px!important;}
.mb-10 {margin-bottom: 10px!important;}
.mb-0 {margin-bottom: 0!important;}

/* --- マージン右 --- */
.mr-50 {margin-right: 50px!important;}
.mr-40 {margin-right: 40px!important;}
.mr-30 {margin-right: 30px!important;}
.mr-20 {margin-right: 20px!important;}
.mr-10 {margin-right: 10px!important;}
.mr-0 {margin-right: 0!important;}

/* --- マージン左 --- */
.ml-50 {margin-left: 50px!important;}
.ml-40 {margin-left: 40px!important;}
.ml-30 {margin-left: 30px!important;}
.ml-20 {margin-left: 20px!important;}
.ml-10 {margin-left: 10px!important;}
.ml-0 {margin-left: 0!important;}

/* --- パディング上 --- */
.pt-50 {padding-top: 50px!important;}
.pt-40 {padding-top: 40px!important;}
.pt-30 {padding-top: 30px!important;}
.pt-20 {padding-top: 20px!important;}
.pt-10 {padding-top: 10px!important;}
.pt-0 {padding-top: 0px!important;}

/* --- パディング下 --- */
.pb-50 {padding-bottom: 50px!important;}
.pb-40 {padding-bottom: 40px!important;}
.pb-30 {padding-bottom: 30px!important;}
.pb-20 {padding-bottom: 20px!important;}
.pb-10 {padding-bottom: 10px!important;}
.pb-0 {padding-bottom: 0!important;}

/* --- パディング右 --- */
.pr-50 {padding-right: 50px!important;}
.pr-40 {padding-right: 40px!important;}
.pr-30 {padding-right: 30px!important;}
.pr-20 {padding-right: 20px!important;}
.pr-10 {padding-right: 10px!important;}
.pr-0 {padding-right: 0!important;}

/* --- パディング左 --- */
.pl-50 {padding-left: 50px!important;}
.pl-40 {padding-left: 40px!important;}
.pl-30 {padding-left: 30px!important;}
.pl-20 {padding-left: 20px!important;}
.pl-10 {padding-left: 10px!important;}
.pl-0 {padding-left: 0!important;}

/*------------------------------
    js用 css
-------------------------------*/
.scrollanime { opacity: 0;}

.js-fadein {
    animation: fadein 1s forwards;
    -webkit-animation: fadein 1s forwards;
}

@keyframes fadein {
    0% { opacity: 0; }
    
    100% {
        opacity: 1;
        transform: translate(0);
        -webkit-transform: translate(0);
    }
}

.updown {
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
}
.downup {
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
}

.sect02{ overflow: hidden; }
.slide-right {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
}
.slide-left {
    transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
}

.js-l-up {
    transform: translateY(-100px);
}

.js-hidden {
    visibility: hidden;
    opacity: 0;
    transition: .5s;
}