/*==================================================
 responsive.css
 成伯住設
==================================================*/


/*==================================
 Tablet
==================================*/

@media screen and (max-width:1024px){

.container{
    width:92%;
}

.header .container{
    height:80px;
}

.header .logo img{
    height:60px;
}

.logo img{
    height:52px;
}

.gnav a{
    font-size:14px;
}

.tel{
    display:none;
}

.hero{
    padding:100px 0 60px;
}

.hero-wrap{
    grid-template-columns:1fr;
    gap:40px;
    top: 47%;
}

.hero-text{
    text-align:center;
}

.hero h1{
    font-size:44px;
    margin-bottom: 20px;
}
.lead {
    margin-bottom: 10px;
}

.hero-btn{
    justify-content:center;
}

.hero-image{
    max-width:700px;
    margin:auto;
}

.trust-box{
    grid-template-columns:repeat(3,1fr);
}

}



/*==================================
 Smartphone
==================================*/

@media screen and (max-width:768px){

.container{
    width:90%;
}

/* Header */

.header{
    position:fixed;
    height:70px;
}

.header .container{
    height:70px;
}

.logo img{
    height:42px;
}

.header-contact{
    display:none;
}
.header.scrolled {
    height: 70px;
}


/* Hero */

.hero{

    margin-top:70px;

    padding:0px 0;

}

.hero-wrap {
    top: 40%;
}

.hero h1{

    font-size:32px;

    line-height:1.5;

    letter-spacing: 7px;

}

.catch-small{

    font-size:14px;

}

.lead{

    font-size:15px;

}

.hero-btn{

    flex-direction:column;

    gap:15px;

}

.btn-line,
.btn-mail,
.works-btn{

    width:100%;

    text-align:center;

}

.hero-image{

    margin-top:30px;

}


/* Trust */

.trust{

    margin-top:-120px;
    background: #fefefe;

}

.trust-box{

    grid-template-columns:1fr;

}

.trust-item{

    border-bottom:1px solid #eee;

}

.trust-item:last-child{

    border:none;

}


/* Worries */

.worries-grid{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:27px;

}


/* Reason */

.reason-item{

    flex-direction:column;

    text-align:center;

    padding:30px;

}

.reason-content h3{

    font-size:22px;

}

.reason-number{

    width:70px;

    height:70px;

    font-size:70px;

}

}




/*==================================
 Small Smartphone
==================================*/

@media screen and (max-width:480px){

.container{

    width:90%;

}

.hero h1{

    font-size:26px;
    letter-spacing: 6px;

}

.lead{

    font-size:14px;

}

.btn-line,
.btn-mail,
.works-btn{

    padding:16px;

    font-size:16px;

}

.trust-item strong{

    font-size:34px;

}

}



/* ==========================================
   Tablet & Smartphone
========================================== */

@media screen and (max-width:1024px){
    .hamburger.active span:nth-child(1){

    transform:translateY(11px) rotate(45deg);

}


.hamburger.active span:nth-child(2){

    opacity:0;

}


.hamburger.active span:nth-child(3){

    transform:translateY(-11px) rotate(-45deg);

}

    .header .container{
        display:flex;
        justify-content:space-between;
        align-items:center;
        position:relative;
    }

    /* 電話・ボタンを非表示 */

    .header-contact{
        display:none;
    }

    /* ハンバーガー */

    .hamburger{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        width:34px;
        height:26px;
        z-index:1002;
    }

    .hamburger span{
        width:100%;
        height:3px;
        background:#222;
        border-radius:10px;
        transition:.3s;
    }

    /* × */

    .hamburger.active span:nth-child(1){
        transform:translateY(11px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:translateY(-11px) rotate(-45deg);
    }

    /* メニュー */

    .gnav{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    height:100vh;

    background:#fff;

    padding:120px 35px 40px;

    transition:.4s ease;

    z-index:1001;

    box-shadow:-10px 0 30px rgba(0,0,0,.15);

    opacity:0;

}


.gnav.active{

display:block !important;

right:0 !important;

opacity:1;

}

.gnav ul{

display:flex;
flex-direction:column;
gap:0;
margin:0;
padding:0;
}


.gnav li{

list-style:none;

border-bottom:1px solid #e8e8e8;

}

.gnav a{
    
    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 10px;

    font-size:17px;

    font-weight:700;

    color:#222;

    text-decoration:none;

    transition:.3s;

}

/* 矢印 */

.gnav a::after{

    content:"";

    width:8px;

    height:8px;

    border-right:2px solid #0a8f3d;

    border-top:2px solid #0a8f3d;

    transform:rotate(45deg);

}


/* hover */

.gnav a:hover{

    color:#0a8f3d;

    padding-left:20px;

}



/* お問い合わせ強調 */

.gnav li:last-child a{

    margin-top:25px;

    background:#0a8f3d;

    color:#fff;

    border-radius:8px;

    justify-content:center;

}


.gnav li:last-child a::after{

    display:none;

}

    /* オーバーレイ */

    .menu-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.5);
        opacity:0;
        visibility:hidden;
        transition:.3s;
        z-index:1000;
    }

    .menu-overlay.active{
        opacity:1;
        visibility:visible;
        backdrop-filter:blur(3px);
    }
}

/*-------------------------------
選ばれる理由部分
--------------------------------*/
@media screen and (max-width:768px){

.section-text{

    color:#666;
    line-height:2;
    font-size: 16px;
    font-weight: 700;

}

}



/*-------------------------------
サービス部分
--------------------------------*/

/* Tablet */

@media screen and (max-width:1024px){


.service-list{

grid-template-columns:repeat(2,1fr);

}


}



/* Smartphone */

@media screen and (max-width:600px){


.service{

padding:60px 0;

}


.section-title{

font-size:16px;

}


.service-list{

grid-template-columns:1fr;

}


.service-card img{

height:200px;

}


}



/*==================================
SPONSOR
==================================*/

@media(max-width:768px){

.sponsor{

padding:80px 0;

}

.sponsor-top{

grid-template-columns:1fr;

padding:35px 25px;

gap:30px;

text-align:center;

}

.sponsor-logo img{

max-width:170px;

}

.sponsor-content h3{

font-size:28px;

}

.sponsor-content ul{

text-align:left;

display:inline-block;

}

.sponsor-btn{

width:100%;

text-align:center;

}

.sponsor-photo img{

height:250px;

}

}

/*==================================
ACCESS
==================================*/

@media(max-width:768px){

.access{

padding:80px 0;

}

.access-wrapper{

display:flex;

flex-direction:column-reverse;

}

.access-card{

position:relative;

width:92%;

margin:0 auto 25px;

top:auto;

left:auto;

transform:none;

padding:30px;

}

.access-map{

order:2;

height:300px;

}

}



/* ==========================================
   footer部分
========================================== */


/* ==========================================
   Tablet
========================================== */

@media screen and (max-width:1024px){


.footer-content{

grid-template-columns:1fr 1fr;

gap:15px;

}
.footer-content h3{

font-size: 15px;

}
.footer-content ul{

font-size:12px;
margin-bottom: 12px;

}
.footer-menu li, .footer-service li, .footer-license li{
    margin-bottom: 12px;
    font-size: 12px;
}

.footer-contact {
    max-width: 300px;
}


.footer-company{

grid-column:1 / 3;
max-width: 220px;

}


}




/* ==========================================
   Smartphone
========================================== */

@media screen and (max-width:600px){


.footer{

padding:45px 0 0;

}


.footer-content{

display:block;

}


.footer-company,
.footer-menu,
.footer-service,
.footer-contact{

margin-bottom:35px;

}
.footer-company {
    max-width: 600px;
}


.footer-company img{

width:150px;

}


.footer-contact{

padding:25px;
margin-top: 20px;
max-width: 600px;

}


.footer-tel a{

font-size:22px;

}


.footer-bottom{

padding:20px 15px 100px 15px;

}
.footer-menu li, .footer-service li, .footer-license li {
    margin-bottom: 12px;
    font-size: 14px;
}


}



/*=========================
 スマホ固定電話
=========================*/

.sp-fixed-contact{

    display:none;

}

@media(max-width:768px){

.sp-fixed-contact{

    position:fixed;

    left:0;

    bottom:15px;

    width:100%;

    padding:0 15px;

    z-index:9999;

    display:block;

}

.sp-tel{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    height:68px;

    border-radius:999px;

    background:linear-gradient(135deg,#0d8f48,#18b65d);

    color:#fff;

    text-decoration:none;

    box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    0 5px 10px rgba(0,0,0,.15);

    transition:.3s;

}

.sp-tel:hover{

    transform:translateY(-3px);

}

.tel-icon{

    font-size:28px;

}

.tel-text small{

    display:block;

    font-size:12px;

    opacity:.9;

    font-weight: 600;
    margin-top: 5px;

}

.tel-text strong{

    display:block;

    font-size:24px;

    font-weight:700;

}



/* 光が流れる */

.sp-tel::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70px;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );

    transform:skewX(-25deg);

    animation:shine 2.8s infinite;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:150%;

}

}



/* 軽く浮く */

.sp-tel{

animation:float 2s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

}



/*body{

padding-bottom:100px;

}*/

}