*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Yu Gothic',sans-serif;
}

body{
background:#0b0b0b;
color:#fff;
line-height:1.8;
accent-color:d4af37;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

header{

    position:fixed;

    top:0;

    width:100%;

    z-index:9999;

    background:#000;

}

.top-bar{

    background:#111;

    color:#ccc;

    font-size:20px;

    padding:10px 30px;

}

.header-main{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0;

    background:#000;

}

.logo-area img{

    height:250px;

}

.header-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.tel-box{

    color:#d4af37;

    font-size:22px;

    font-weight:bold;

    display:flex;

    flex-direction:column;

}

.tel-box span{

    color:#fff;

    font-size:15px;

    font-weight:normal;

}

.tel-box a{
    color:#d4af37;
    text-decoration:none;
    font-weight:bold;
}

.tel-box a:hover{
    color:#fff;
}

.contact-btn{

    background:#d4af37;

    color:#000;

    text-decoration:none;

    padding:12px 20px;

    font-weight:bold;

    transition:.3s;

}

.contact-btn:hover{

    background:#fff;

}
.contact-btn{

    position:relative;

    overflow:hidden;

    animation:contactPulse 3s infinite;

}

.contact-btn::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.15);

    opacity:0;

    transition:.5s;

}

.contact-btn:hover::after{

    opacity:1;

}

@keyframes contactPulse{

    0%{

        box-shadow:

        0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:

        0 0 18px rgba(212,175,55,.65),

        0 0 35px rgba(212,175,55,.35);

    }

    100%{

        box-shadow:

        0 0 0 rgba(212,175,55,0);

    }

}



nav{

    background:#111;

}

nav ul{

    display:flex;

    justify-content:center;

    gap:70px;

    list-style:none;

    margin:0;

    padding:15px 0;

}

nav a{

    color:#fff;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    font-weight:700;

    font-size:20px;

    line-height:1.2;

    transition:.3s;

}

nav a span{

    color:#d4af37;

    font-size:12px;

    margin-top:6px;

    letter-spacing:1px;

}

nav a:hover{

    color:#d4af37;

}
.tel{
    font-size:28px;
    font-weight:bold;
    color:#d4af37;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:3px 0;
}

.logo img{
height: 80px;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav a{
color:#fff;
text-decoration:none;
}

.hero{
    min-height:100vh;
    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('images/hero.jpeg');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
}



.hero-overlay{
background:rgba(0,0,0,.6);
padding:60px;
width:100%;
}

.hero h1{
font-size:72px;
margin-bottom:20px;
}

.hero p{
font-size:24px;
margin-bottom:30px;
}

.btn{
display:inline-block;
padding:15px 40px;
border:1px solid #fff;
color:#fff;
text-decoration:none;
margin-right:10px;
}

.gold{
background:#d4af37;
color:#000;
border:none;
}

section{
padding:100px 10%;
}

h2{
text-align:center;
font-size:42px;
margin-bottom:60px;
color:#d4af37;
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.card{
background:#111;
border:1px solid #333;
}

.card img{
width:100%;
height:250px;
object-fit:cover;
}

.card h3{
padding:20px;
}

.card ul{
padding:0 20px 20px;
}

.gallery{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.gallery img{
width:100%;
height:250px;
object-fit:cover;
}

.strength-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.strength-grid div{
background:#111;
padding:30px;
}

.company table{
width:100%;
border-collapse:collapse;
}

.company th,
.company td{
border:1px solid #333;
padding:20px;
}

.contact form{
max-width:800px;
margin:auto;
}

.contact input,
.contact textarea{
width:100%;
padding:15px;
margin-bottom:20px;
background:#111;
border:1px solid #444;
color:#fff;
}

.contact button{
background:#d4af37;
color:#000;
border:none;
padding:15px 40px;
font-weight:bold;
cursor:pointer;
}

footer{
    background:#050505;
    text-align:center;
    padding:70px 0 20px;
    border-top:1px solid rgba(212,175,55,.3);
}

.footer-container{

    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr 1.5fr;
    gap:60px;

}

.footer-logo{
    height:70px;
    width:auto;
    margin-bottom:20px;
}

footer p{
    color:#ccc;
    line-height:2;
    margin-bottom:10px;
}

footer a{
    color:#d4af37;
    text-decoration:none;
}

footer a:hover{
    color:#fff;
}

.footer-info{
    color:#ddd;
    line-height:2;
}

.footer-info a{
    color:#d4af37;
    text-decoration:none;
}

.footer-info a:hover{
    text-decoration:underline;
}

.footer-copy{
    margin-top:30px;
    color:#777;
    font-size:13px;
}

.footer-logo-area img{

    height:100px;

    width:auto;

    margin-bottom:20px;

}

.footer-catch{

    color:#bbb;

    line-height:2;

}

.footer-nav h4,

.footer-contact h4{

    color:#d4af37;

    margin-bottom:20px;

    font-size:18px;

}

.footer-nav ul{

    list-style:none;

    padding:0;

}

.footer-nav li{

    margin-bottom:12px;

}

.footer-nav a,

.footer-contact a{

    color:#ddd;

    text-decoration:none;

    transition:.3s;

}

.footer-nav a:hover,

.footer-contact a:hover{

    color:#d4af37;

}

.footer-contact p{

    color:#bbb;

    margin-bottom:10px;

}

.footer-bottom{

    margin-top:50px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#777;

    font-size:13px;

}

.footer-badge{

    margin-top:15px;
    color:#d4af37;

    font-size:14px;
    letter-spacing:1px;

}

@media(max-width:768px){

.hero h1{
    font-size:clamp(50px,7vw,90px);
    line-height:1.2;
    margin-bottom:25px;
}

.cards,
.gallery,
.strength-grid{
grid-template-columns:1fr;
}

nav{
display:none;}

}

.access-wrap{
display:grid;
grid-template-columns:350px 1fr;
gap:40px;
align-items:center;
}
.access-info{
background:#111;
color:#fff;
padding:30px;
border-left:5px solid #ffcc00;
}
.access-info h3{
color:#ffcc00;
margin-bottom:20px;
}
.map-area{
overflow:hidden;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}
@media(max-width:768px){
.access-wrap{
    grid-template-columns:1fr;
}
}
.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}
.slider{
position:absolute;
width:100%;
height:100%;
}
.slide{
position:absolute;
width:100%;
height:100%;
opacity:0;

background-size:cover;
background-position:center center;

transform:scale(1);

transition:opacity 2s ease-in-out;

animation:kenburns 12s linear infinite;

}

.slide.active{
opacity:1;
}

@keyframes kenburns{

0%{
    transform:scale(1);
}

100%{
    transform:scale(1.15);
}

}

.slide:nth-child(1){
background-image:url('images/top1.jpeg');
animation:zoomLeft 16s linear infinite;
}
.slide:nth-child(2){
background-image:url('images/top2.png');
animation:zoomRight 16s linear infinite;
}
.slide:nth-child(3){
background-image:url('images/top3.jpeg');
animation:zoomTop 16s linear infinite;
}
.slide:nth-child(4){
background-image:url('images/hero.jpeg');
animation:zoomBottom 16s linear infinite;
}
@keyframes zoomLeft{
from{
transform:scale(1) translateX(0);
}
to{
transform:scale(1.08) translateX(-15px);
}
}
@keyframes zoomRight{
from{
transform:scale(1) translateX(0);
}
to{
transform:scale(1.15) translateX(30px);
}
}
@keyframes zoomTop{
from{
transform:scale(1) translateY(0);
}
to{
transform:scale(1.15) translateY(-20px);
}
}
@keyframes zoomBottom{
from{
transform:scale(1) translateY(0);
}
to{
transform:scale(1.15) translateY(20px);
}
}

.slide.active{
opacity:1;
}
.hero-content{
position:relative;
z-index:100;
width:100%;
text-align:center;
color:#fff;
text-align:center;
top:50%;
transform:translateY(-50%);
text-shadow:0 3px 15px rgba(0,0,0,.7);
}
.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
z-index:1;
}

.hero{

    animation:heroFade 1.5s ease;

}

.hero-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90%;
    max-width:1200px;

    text-align:center;

    z-index:10;

}

@keyframes heroFade{

    from{

        transform:scale(1.08);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes heroText{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* 施工実績スライダー */

.worksSwiper{

    width:100%;

    padding:80px 0;

}

.swiper-slide{

    transition:0.5s;

    transform:scale(0.8);

    opacity:0.5;

}

.swiper-slide-active{

    transform:scale(1.2);

    opacity:1;

    z-index:10;

}

.swiper-slide img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:15px;

    border:3px solid rgba(212,175,55,.3);

    transition:.5s;

}

.swiper-slide-active img{

    border-color:#d4af37;

    box-shadow:

    0 0 20px rgba(212,175,55,.5),

    0 0 50px rgba(212,175,55,.3);

}


.works-slider:hover .works-track{

    animation-play-state:paused;

}


.works-track img{

    width:420px;

    height:280px;

    object-fit:cover;

    border-radius:15px;

    border:2px solid #d4af37;

    transition:.5s;

    flex-shrink:0;

}

.works-track img:hover{

    transform:scale(1.15);

    border-color:#d4af37;

    box-shadow:
    0 0 20px rgba(212,175,55,.5),
    0 0 40px rgba(212,175,55,.3);

    z-index:10;

}

@keyframes scrollWorks{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

body{
     background:#0b0b0b;
     color:#fff;
     line-height:1.8;
     accent-color:#d4af37;
}
section{
    padding:120px 0;
}

.service-section{

    background:#0b0b0b;

    position:relative;

    padding:120px 0;

}

.bg-title{

    position:absolute;

    top:20px;

    left:0px;

    width:100%;

    text-align:center;

    font-size:clamp(60px,10vw,120px);

    font-weight:900;

    color:rgba(255,255,255,0.03);

    pointer-events:none;

}

.service-grid{

    display:grid;

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

    gap:40px;

}

.service-card{
     position:relative;
     background:#111;
     border:1px solid rgba(212,175,55,.3);
     overflow:hidden;
     transition:transform .4s ease,
                box-shadow .4s ease;

}

.service-card::before{
     content:"";
     position:absolute;
     top:0;
     left:0;
    
     width:100%;
     height:4px;
    
     background:#d4af37;
    
     z-index:5;
}


.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(212,175,55,.3);

}

.service-card img{

    width:100% !important;

    height:260px !important;

    object-fit:cover !important;

    object-position:center center !important;

    display:block !important;

}

.service-icon{

    position:absolute;

    top:20px;

    left:20px;
    
    width:70px;

    height:70px;

    background:#d4af37;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2;

    box-shadow:0 5px 15px rgba(0,0,0,.4);

}

.service-image{
    position:relative;
    overflow:hidden;
    height:260px;
}

.service-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
   
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-icon i{
    font-size:30px;
    color:#111;
    transition:.3s;
}

.service-card:hover .service-image img{
    transform:scale(1.08);
}
.service-img img{
    transition:.5s;    
} 
.service-card:hover .service-icon{
    transform:rotate(8deg);
}   
.service-icon{
    transition:.4s;
}
.service-card h3{

    text-align:center;
    color:#fff;
    font-size:28px;
    margin:25px 0;
    letter-spacing:1px;
}


.service-card ul{

    list-style:none;

    padding:0 40px 30px;

}

.service-card li{

    margin-bottom:12px;

}

.card-btn{

    display:block;

    margin:30px;

    text-align:center;

    padding:15px;

    border:1px solid #d4af37;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.card-btn:hover{

    background:#d4af37;

    color:#000;

}
.strength-grid{

display:grid;

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

gap:50px;

text-align:center;

}

.strength-item{

padding:40px;

border-right:1px solid rgba(255,255,255,.1);

}

.strength-item h3{

margin:20px 0;

color:#d4af37;

}
.section-title-bg{
    position:absolute;
    font-size:120px;
    font-weight:bold;
    color:rgba(255,255,255,0.03);
    top:20px;
    left:50px;
    z-index:0;
}

@media(max-width:768px){
    .service-grid{
        grid-template-columns:1fr;
    }
    .strength-grid{
        grid-template-columns:1fr;
    }
}

.works-track img:hover{
    transform:scale(1.08);
    box-shadow:0 10px 25px rgba(212,175,55,.6);
    z-index:10;
    position:relative;    
}

@media(max-width:768px){
    .works-track img{
        width:280px;
        height:200px;
    }
    .bg-title{
        font-size:60px;
    }
}

.hero{
    margin-top:210px;
    transition:.4s;
}

.section{

    position:relative;

    padding:120px 10%;

    overflow:hidden;

}

.bg-word{

    position:absolute;

    top:20px;

    left:0;

    width:100%;

    text-align:center;

    font-size:8rem;

    font-weight:900;

    letter-spacing:10px;

    color:rgba(212,175,55,0.05);

    z-index:0;

    pointer-events:none;

}

.section h2,

.section p{

    position:relative;

    z-index:1;

}


.service-card{
    display:flex;
    flex-direction:column;
}

.service-card ul{
    flex-grow:1;
}

.service-icon i{
    transition:0.3s;

}

.service-card:hover .service-icon i{
    transform:scale(1.15);

}

.company{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:#050505;

}

.bg-word{

    position:absolute;

    top:20px;

    left:0;

    width:100%;

    text-align:center;

    font-size:8rem;

    font-weight:900;

    letter-spacing:10px;

    color:rgba(212,175,55,0.05);

    z-index:0;

    pointer-events:none;

}

.company .container{
    position:relative;
    z-index:1;
}


.company-layout{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    margin-top:50px;

}

.company-cards{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.office-card{

    background:#111;

    border:1px solid rgba(212,175,55,.25);

    border-radius:12px;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
    
    position:relative;

    overflow:hidden;

    padding:30px;
}

.office-card:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

    box-shadow:
        0 0 25px rgba(212,175,55,.25),
        0 0 40px rgba(212,175,55,.12),
        0 20px 40px rgba(0,0,0,.50);
}

.office-title{

    color:#d4af37;

    font-size:24px;

    font-weight:bold;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    gap:12px;

}

.office-title i{

    font-size:22px;

}

.office-card p{

    color:#ddd;

    margin-bottom:15px;

    line-height:1.9;

}

.office-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#d4af37;
    z-index:2;
}

.company-map{

    overflow:hidden;

    border-radius:12px;

    border:1px solid #333;

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

    position:relative;

}

.company-map::before{

    content:'';

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#d4af37;

    z-index:10;

}

.company-map iframe{

    width:100%;

    height:100%;

    min-height:520px;

    border:none;

}

@media(max-width:900px){

    .company-layout{

        grid-template-columns:1fr;

    }

    .company-map iframe{

        min-height:400px;

    }

}

.office-card a{
    color:#d4af37;
    text-decoration:none;
    font-weight:600;
}

.office-card a:hover{
    color:#fff;
}

.section p{
    text-align:center;
}

.footer-logo{
    height:250px !important;
    width:auto !important;
}

.work-item{
    width:320px;
    height:220px;
    transition:all .6s ease;
    opacity:.5;
    transform:scale(.85);
}

.work-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:15px;

    border:2px solid rgba(212,175,55,.3);

}

.work-item.active{

    opacity:1;

    transform:scale(1.1);

}

.work-item.active img{

    border:2px solid #d4af37;

    box-shadow:

    0 0 20px rgba(212,175,55,.4),

    0 0 40px rgba(212,175,55,.25),

    0 20px 50px rgba(0,0,0,.4);

}

/* ---------- HERO ---------- */

.hero-content{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    z-index:100;

    width:90%;

}

.hero-subtitle{

    font-size:18px;

    letter-spacing:12px;

    color:rgba(255,255,255,.15);

    font-weight:800;

    margin-bottom:30px;

    text-transform:uppercase;

}

.hero h1{

    font-size:clamp(50px,7vw,92px);

    font-weight:900;

    margin-bottom:25px;

    line-height:1.2;

    letter-spacing:2px;

}

.hero p{

    font-size:24px;

    color:#eee;

    line-height:2;

    margin-bottom:45px;

}

.hero-btns{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:40px;

}

.hero-btns a{

    min-width:240px;

    padding:18px 40px;

    border-radius:50px;

    text-align:center;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:all .35s ease;

}

/* 電話 */

.btn-yellow{

    background:#d4af37;

    color:#111;

    border:2px solid #d4af37;

}

.btn-yellow:hover{

    transform:translateY(-6px);

    box-shadow:0 0 30px rgba(212,175,55,.6);

}

/* お問い合わせ */

.btn-outline{

    background:transparent;

    color:#fff;

    border:2px solid #fff;

}

.btn-outline:hover{

    background:#d4af37;

    border-color:#d4af37;

    color:#111;

    transform:translateY(-6px);

    box-shadow:0 0 30px rgba(212,175,55,.6);

}

.scroll-down{

    margin-top:80px;

    color:#fff;

    font-size:13px;

    letter-spacing:5px;

    animation:scrollMove 2s infinite;

}

.scroll-down::after{

    content:"";

    display:block;

    width:2px;

    height:45px;

    background:#d4af37;

    margin:15px auto 0;

}

@keyframes scrollMove{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.62),

        rgba(0,0,0,.45),

        rgba(0,0,0,.62)

    );

    z-index:1;

}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:48px;
    color:#d4fa37;
}

.fadeUp{
    opacity:0;
    transform:translateY(60px);
    transition:1s;
}

.fadeUp.show{
    opacity:1;
    transform:translateY(0);
}

/*=========================

   Floating TEL

=========================*/

.floating-tel{

    position:fixed;

    right:30px;

    bottom:35px;

    width:220px;

    height:65px;

    border-radius:50px;

    background:#d4af37;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

    z-index:9999;

    box-shadow:

        0 12px 30px rgba(0,0,0,.45);

    transition:.35s;

    animation:telPulse 2.5s infinite;

}

.floating-tel i{

    font-size:22px;

}

.floating-tel:hover{

    background:#fff;

    color:#000;

    transform:translateY(-6px);

    box-shadow:

        0 0 30px rgba(212,175,55,.6);

}

@keyframes telPulse{

    0%{

        box-shadow:

        0 0 0 0 rgba(212,175,55,.45);

    }

    70%{

        box-shadow:

        0 0 0 18px rgba(212,175,55,0);

    }

    100%{

        box-shadow:

        0 0 0 0 rgba(212,175,55,0);

    }

}

/*=========================

   PAGE TOP

=========================*/

#pageTop{

    position:fixed;

    right:110px;

    bottom:120px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:#111;

    border:2px solid #d4af37;

    color:#d4af37;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:18px;

    z-index:9998;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

#pageTop.show{

    opacity:1;

    visibility:visible;

}

#pageTop:hover{

    background:#d4af37;

    color:#111;

    transform:translateY(-5px) rotate(360deg);

}

@media (max-width:768px){
.floating-tel{
    right:15px;
    left:15px;
    width:auto;
    bottom:15px;
}

#pageTop{
    right:20px;
    bottom:95px;
}
}

/*=========================

        Loading

=========================*/

#loading{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity 1s;

}

#loading img{

    width:240px;

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

}

#loading p{

    margin-top:25px;

    color:#d4af37;

    letter-spacing:8px;

    font-size:18px;

}

#loading.hide{

    opacity:0;

    pointer-events:none;

}

@keyframes logoFade{

    0%{

        opacity:.3;

        transform:scale(.95);

    }

    50%{

        opacity:1;

        transform:scale(1.05);

    }

    100%{

        opacity:.3;

        transform:scale(.95);

    }

}

/*==================================

        PREMIUM LOADING

==================================*/

#loading{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transition:opacity 1.2s ease,

               visibility 1.2s ease;

}

#loading.hide{

    opacity:0;

    visibility:hidden;

}

/* 中央 */

.loading-inner{

    text-align:center;

}

/* ロゴ */

.loading-inner img{

    width:240px;

    opacity:0;

    animation:

    logoFade .8s forwards,

    logoFloat 2.5s ease-in-out infinite;

}

/* 金ライン */

.loading-line{

    width:260px;

    height:3px;

    background:#222;

    margin:35px auto;

    overflow:hidden;

    border-radius:50px;

}

.loading-line span{

    display:block;

    width:0;

    height:100%;

    background:#d4af37;

    animation:goldLine 1.8s forwards;

}

/* 会社名 */

.loading-inner h2{

    color:#fff;

    font-size:28px;

    letter-spacing:6px;

    margin-bottom:12px;

    opacity:0;

    animation:textFade 1s forwards;

    animation-delay:.6s;

}

/* キャッチコピー */

.loading-inner p{

    color:#d4af37;

    letter-spacing:8px;

    font-size:14px;

    opacity:0;

    animation:textFade 1s forwards;

    animation-delay:1.0s;

}

/*=========================

    Animation

=========================*/

@keyframes logoFade{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes goldLine{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes textFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================

   Header Scroll Animation

=========================== */

header{

    transition:all .45s ease;

    background:rgba(0,0,0,.95);

}

header.scrolled{

    background:rgba(0,0,0,.92);

    backdrop-filter:blur(12px);

    box-shadow:0 8px 25px rgba(0,0,0,.45);

}

header::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:2px;

    background:#d4af37;

    transform:scaleX(0);

    transition:.4s;

}

header.scrolled::after{

    transform:scaleX(1);

}

/* ロゴ */

.logo-area img{

    height:250px;

    transition:.45s;

}

header.scrolled .logo-area img{

    height:120px;

}

/* 上部バー */

.top-bar{

    transition:.4s;

    overflow:hidden;

}

header.scrolled .top-bar{

    height:0;

    padding:0;

    opacity:0;

}

/* メニュー */

nav{

    transition:.4s;

}

header.scrolled nav{

    padding:5px 0;

}

header.scrolled nav a{

    font-size:18px;

}

/* 電話 */

.tel-box{

    transition:.4s;

}

header.scrolled .tel-box{

    font-size:18px;

}

/* お問い合わせ */

.contact-btn{

    transition:.4s;

}

header.scrolled .contact-btn{

    padding:10px 18px;

}

/* ===========================

   Mobile Menu

=========================== */

.hamburger{

    display:none;

    position:absolute;

    right:25px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:32px;

    cursor:pointer;

    z-index:10001;

}

.hamburger span{

    display:block;

    width:100%;

    height:3px;

    background:#d4af37;

    margin:8px 0;

    transition:.4s;

}

/* ×マーク */

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

    transform:rotate(45deg) translate(8px,8px);

}

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

    opacity:0;

}

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

    transform:rotate(-45deg) translate(7px,-8px);

}

/* メニュー */

.mobile-menu{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.97);

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:9998;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

}

.mobile-menu ul{

    position:relative;
    z-index:2;

    list-style:none;

    text-align:center;

}

.mobile-menu li{

    margin:28px 0;

}

.mobile-menu a{

    color:#fff;

    text-decoration:none;

    font-size:28px;

    font-weight:bold;

    transition:.3s;

}

.mobile-menu a:hover{

    color:#d4af37;

}

.mobile-contact{

    position:relative;

    z-index:2;

    margin-top:60px;
}

.mobile-contact a{

    display:block;

    margin:18px 0;

    font-size:20px;

}

/* スマホだけ */

@media(max-width:900px){

    nav{

        display:none;

    }

    .hamburger{

        display:block;

    }

}

/*=========================

  Background Typography

==========================*/

.mobile-bg-text{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    font-size:clamp(70px,18vw,220px);

    font-weight:900;

    line-height:.85;

    text-align:center;

    letter-spacing:8px;

    color:rgba(212,175,55,.045);

    user-select:none;

    pointer-events:none;

    white-space:nowrap;

    text-transform:uppercase;

    z-index:0;

}

.mobile-menu li{

    opacity:0;

    transform:translateY(25px);

    animation:menuFade .6s forwards;

}

.mobile-menu.active li:nth-child(1){animation-delay:.10s;}

.mobile-menu.active li:nth-child(2){animation-delay:.20s;}

.mobile-menu.active li:nth-child(3){animation-delay:.30s;}

.mobile-menu.active li:nth-child(4){animation-delay:.40s;}

.mobile-menu.active li:nth-child(5){animation-delay:.50s;}

@keyframes menuFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mobile-bg-text{

    animation:floatLogo 8s ease-in-out infinite;

}

@keyframes floatLogo{

    0%{

        transform:translate(-50%,-50%);

    }

    50%{

        transform:translate(-50%,-54%);

    }

    100%{

        transform:translate(-50%,-50%);

    }

}

@media(max-width:768px){

.top-bar{

    display:none;

}

.logo-area img{

    height:90px;

}

.header-main{

    padding:10px 20px;

}

}

@media(max-width:768px){

.hero-content{

    width:90%;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    text-align:center;

}

.hero h1{

    font-size:38px;

    line-height:1.4;

}

.hero p{

    font-size:17px;

    line-height:1.9;

}

.hero-subtitle{

    font-size:13px;

    letter-spacing:5px;

}

}

@media(max-width:768px){

.hero-btns{

    flex-direction:column;

    gap:15px;

}

.hero-btns a{

    width:100%;

    min-width:auto;

}

}

@media(max-width:768px){

.swiper-slide{

    transform:scale(1);

    opacity:1;

}

.swiper-slide-active{

    transform:scale(1);

}

.swiper-slide img{

    height:220px;

}

}

@media(max-width:768px){

.footer-container{

    grid-template-columns:1fr;

    gap:40px;

    text-align:center;

}

.footer-logo-area img{

    height:80px;

}

}

@media(max-width:768px){

.company-layout{

    grid-template-columns:1fr;

}

.company-map iframe{

    min-height:300px;

}

}

@media(max-width:768px){

.bg-word,

.bg-title{

    font-size:3rem;

    letter-spacing:3px;

}

}

@media(max-width:768px){

.floating-tel{

    bottom:20px;

    left:20px;

    width:60px;

    height:60px;

}

#page-top{

    bottom:20px;

    right:20px;

    width:60px;

    height:60px;

}

}

@media(max-width:768px){

section{

    padding:80px 20px;

}

h2{

    font-size:32px;

    margin-bottom:40px;

}

}

/* ==========================

   スマホ最終調整

========================== */

@media (max-width:768px){

    html,

    body{

        overflow-x:hidden;

    }

    /* ヘッダー */

    .top-bar{

        font-size:12px;

        padding:8px 15px;

        text-align:center;

        line-height:1.6;

    }

    .header-main{

        padding:10px 15px;

    }

    .logo-area img{

        height:70px;

    }

    .header-right{

        gap:10px;

    }

    .tel-box{

        display:none;

    }

    .contact-btn{

        padding:10px 15px;

        font-size:14px;

    }

    /* ヒーロー */

    .hero{

        margin-top:120px;

        height:85vh;

    }

    .hero-content{

        width:90%;

        top:50%;

        left:50%;

        transform:translate(-50%,-50%);

    }

    .hero-subtitle{

        font-size:12px;

        letter-spacing:5px;

        margin-bottom:20px;

    }

    .hero h1{

        font-size:38px;

        line-height:1.4;

        margin-bottom:20px;

    }

    .hero p{

        font-size:17px;

        line-height:1.8;

        margin-bottom:30px;

    }

    .hero-btns{

        flex-direction:column;

        gap:15px;

        align-items:center;

    }

    .hero-btns a{

        width:100%;

        max-width:300px;

        min-width:auto;

        padding:15px;

        font-size:16px;

    }

    .scroll-down{

        margin-top:40px;

    }

    /* 共通 */

    section{

        padding:80px 20px;

    }

    h2{

        font-size:30px;

        margin-bottom:40px;

    }

    .bg-word{

        font-size:50px;

        top:10px;

    }

    .bg-title{

        font-size:55px;

    }

    /* 事業内容 */

    .service-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .service-card h3{

        font-size:24px;

    }

    .service-card ul{

        padding:0 25px 25px;

    }

    /* 施工実績 */

    .worksSwiper{

        padding:40px 0;

    }

    .swiper-slide-active{

        transform:scale(1);

    }

    .swiper-slide img{

        height:220px;

    }

    /* 強み */

    .strength-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .strength-item{

        border-right:none;

        border-bottom:1px solid rgba(255,255,255,.1);

        padding:25px;

    }

    /* 会社概要 */

    .company-layout{

        grid-template-columns:1fr;

        gap:25px;

    }

    .company-map iframe{

        min-height:300px;

    }

    .office-card{

        padding:25px;

    }

    /* フッター */

    .footer-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .footer-logo{

        height:90px !important;

    }

    .footer-nav ul{

        padding:0;

    }

    .footer-nav li{

        margin-bottom:10px;

    }

    .footer-bottom{

        margin-top:30px;

        font-size:12px;

    }

    /* フローティング電話 */

    .floating-tel{

        width:60px;

        height:60px;

        font-size:12px;

        right:15px;

        bottom:90px;

    }

    /* TOPへ戻る */

    .page-top{

        width:50px;

        height:50px;

        right:20px;

        bottom:20px;

        font-size:20px;

    }

}

@media (max-width:768px){

.hero h1{
    font-size:34px;
}

.hero p{
    font: size 16px;
}

}