@charset "UTF-8";

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    color:#333;
    font-family:'Noto Sans JP',sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
    transition:.3s;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* ========================================
   COLOR
======================================== */

:root{
    --black:#0D0D0D;
    --gold:#C9A64B;
    --white:#FFFFFF;
    --gray:#F5F5F5;
    --text:#333333;
}

/* ========================================
   RESET
======================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* ========================================
   COMMON
======================================== */

.inner {
    width: min(90%, 1200px);
    margin: 0 auto;
}

section {
    padding: 120px 0;
}

h2 {
    font-size: clamp(2rem,4vw,3rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    color: var(--black);
    letter-spacing: .08em;
}

h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background: var(--gold);
    margin: 20px auto 0;
}

.more-btn,
.contact-btn a{
    display:inline-block;
    padding:15px 40px;
    border:1px solid var(--gold);
    color:var(--gold);
    transition:all .35s ease;
    transform:translateY(0);
}

.more-btn:hover,
.contact-btn a:hover{
    background:var(--gold);
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(201,166,75,.25);
}

.company-btn{
    text-align:center;
    margin-top:30px;
}

.fade-up{
    opacity: 0;
    transform: translateY(80px);
}

/* ========================================
   HEADER
======================================== */

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(13,13,13,.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    border-bottom: 1px solid rgba(201,166,75,.3);
}

header .inner {
    height: 80px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img{
    width:200px;
    max-width:100%;
}

@media(max-width:768px){

    .logo img{
        width:180px;
    }

}

.logo a {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .15em;
}

nav ul {
    display: flex;
    gap: 40px;
}

nav a {
    color: var(--white);
    font-size: .95rem;
}

nav a:hover {
    color: var(--gold);
}

/* ========================================
   HAMBURGER
======================================== */

.hamburger{
    display:none;
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
    position:relative;
    z-index:1001;
}

.hamburger span{
    display:block;
    width:28px;
    height:2px;
    background:#fff;
    position:absolute;
    left:6px;
    transition:.3s;
}

.hamburger span:nth-child(1){
    top:12px;
}

.hamburger span:nth-child(2){
    top:19px;
}

.hamburger span:nth-child(3){
    top:26px;
}

/* OPEN */

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

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

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

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

    .hamburger{
        display:block;
    }

    .nav{
        position:fixed;
        top:0;
        right:-100%;
        width:100%;
        height:100vh;
        background:#0D0D0D;
        transition:.4s;
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:1000;
    }

    .nav.active{
        right:0;
    }

    .nav ul{
        flex-direction:column;
        gap:35px;
        text-align:center;
    }

    .nav a{
        color:#fff;
        font-size:1.1rem;
        letter-spacing:.1em;
    }

    .nav a:hover{
        color:#C9A64B;
    }
}

/* ========================================
   FV
======================================== */

#fv{
    position:relative;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;

    background:
    url("../img/fv.jpg") center center / cover no-repeat;
}

.fv-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.seo-title{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

#fv .inner{
    position:relative;
    z-index:2;
}

#fv .sub-copy{
    color:var(--gold);
    letter-spacing:.2em;
    margin-bottom:20px;
    font-size:clamp(.9rem,2vw,1.1rem);
    text-shadow:0 0 10px rgba(255,255,255,.2);
}

#fv h2{
    font-size:clamp(4rem,8vw,7rem);
    color:#fff;
    margin-bottom:30px;
    letter-spacing:.08em;
    text-shadow:
        0 0 20px rgba(255,255,255,.2),
        0 0 40px rgba(0,0,0,.5);
}

#fv h2::after{
    display:none;
}

.lead{
    max-width:700px;
    margin:auto;
    color:#f5f5f5;
    font-size:clamp(1rem,2vw,1.2rem);
    text-shadow:0 0 10px rgba(0,0,0,.5);
}
/* ========================================
   ABOUT
======================================== */
#about{
    background:var(--white);
}

.about-lead{
    max-width:900px;
    margin:0 auto 50px;
    text-align:center;
    font-size:1.15rem;
    font-weight:500;
    line-height:2;
    color:var(--black);
}

.about-text{
    max-width:700px;
    margin:0 auto;
    text-align:left;
    line-height:2.2;
}

@media (max-width:768px){

    .about-lead{
        max-width:340px;
        font-size:1rem;
        line-height:1.8;
        margin-bottom:35px;
    }

    .about-text{
        font-size:.95rem;
        line-height:2;
    }

}

/* ==========================
ONE STOP SOLUTION
========================== */

/* ==========================
REAL ESTATE
========================== */

.realestate{
    padding:120px 0;

    background:
    linear-gradient(
        rgba(0,0,0,.5),
        rgba(0,0,0,.8)
    ),
    url("../img/realestate-bg.jpg")
    center center / cover no-repeat;

    color:#fff;
}

.realestate-copy{
    text-align:center;
    max-width:800px;
    margin:0 auto 60px;
}

.realestate-copy .sub{
    color:var(--gold);
    letter-spacing:.15em;
    margin-bottom:10px;
}

.realestate-copy h2{
    color:#fff;
    margin-bottom:25px;
}

.realestate-copy p{
    max-width:700px;
    margin:auto;
    color:#ddd;
}

@media(max-width:768px){

    .realestate-copy h2{
        font-size:2rem;
        line-height:1.5;
    }

    .realestate-copy p{
        font-size:.95rem;
    }
    

}

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

.realestate-grid div{

    background:#fff;

    color:#222;

    padding:45px 30px;

    text-align:center;

    border-top:4px solid var(--gold);

    transition:.35s;
}

.realestate-grid div:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.25);

}

.realestate-grid .num{

    display:block;

    font-size:3rem;

    font-weight:700;

    color:var(--gold);

    margin-bottom:15px;
}

.realestate-grid h3{

    color:#111;

    font-size:1.3rem;

    margin-bottom:12px;
}

.realestate-grid p{

    color:#666;

    font-size:.95rem;
}

@media(max-width:768px){

    .realestate-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .realestate-grid div{
    padding:25px 20px;
}

}

.solution-list{
    max-width:700px;
    margin:0 auto;
    border-top:1px solid rgba(255,255,255,.2);
}

.solution-item{
    display:flex;
    align-items:center;
    gap:40px;
    padding:45px 30px;
    border-bottom:1px solid rgba(255,255,255,.2);
}

.solution-item .num{
    font-size:3rem;
    font-weight:700;
    color:var(--gold);
    min-width:90px;
}

.solution-content h3{
    color:#fff;
    font-size:1.4rem;
    margin-bottom:8px;
}

.solution-content p{
    color:#cfcfcf;
    margin:0;
}

@media(max-width:768px){

.solution-item{
    gap:20px;
    padding:25px 0;
}

.solution-item .num{
    font-size:2rem;
    min-width:55px;
}

.solution-content h3{
    font-size:1.1rem;
}

.solution-content p{
    font-size:.9rem;
}

}

/* ========================================
   GROUP BRANDS
======================================== */

#brands {
    background: var(--gray);
}

.brand-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 30px;
}

.brand-card {
    background: var(--white);
    padding: 40px;
    border: 1px solid #e0e0e0;
    transition: .3s;
}

.brand-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.brand-card h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: var(--black);
}

.brand-card a {
    display: inline-block;
    margin-top: 20px;
    color: var(--gold);
    font-weight: 700;
}

.brand-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    margin-bottom:20px;
}

/* .brand-main{
    border:2px solid var(--gold);
    position:relative;
}

.brand-main::before{
    content:"MAIN BUSINESS";
    position:absolute;
    top:15px;
    right:15px;
    background:var(--gold);
    color:#fff;
    font-size:.7rem;
    letter-spacing:.1em;
    padding:6px 12px;
} */

.brand-main h3{
    color:var(--gold);
    font-size:1.5rem;
}

@media (max-width:768px){
    .brand-card img{
    height:180px;
}
}

@media(max-width:768px){

    .brand-list{
        grid-template-columns:1fr;
    }

}


/* ========================================
   BLOG
======================================== */

#blog {
    background: var(--white);
}

.blog-list {
    max-width: 900px;
    margin: auto;
}

.blog-list li {
    border-bottom: 1px solid #e5e5e5;
}

.blog-list a {
    display: block;
    padding: 25px 0;
}

.blog-list a:hover {
    color: var(--gold);
}

.blog-list time {
    display: block;
    color: #888;
    font-size: .9rem;
    margin-bottom: 8px;
}

/* ========================================
   COMPANY
======================================== */

#company {
    background: var(--white);
}

table {
    width: 100%;
    border-collapse: collapse;
    max-width: 900px;
    margin: auto;
}

th,
td {
    padding: 20px;
    border: 1px solid #ddd;
    word-break:break-word;
}

th {
    width: 220px;
    background: var(--black);
    color: var(--white);
    text-align: left;
}

@media(max-width:768px){

    table{
        font-size:.9rem;
    }

    td{
        line-height:1.8;
    }

}

/* ==========================
代表挨拶
========================== */

.president-message{
    background:#fff;
}

.president-message h2{
    margin-bottom:70px;
}

.message-wrap{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:70px;
    align-items:start;
}

.president-photo img{
    width:100%;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.1);
}

.message-text{
    text-align:left;
    max-width:650px;
}

.message-text h3{
    font-size:2rem;
    color:var(--gold);
    line-height:1.8;
    margin-bottom:35px;
}

.message-text p{
    color:#555;
    line-height:2.2;
    margin-bottom:20px;
}

.sign{
    margin-top:40px;
    text-align:right;
    font-weight:700;
    color:#222;
}

/* プロフィール */

.profile-box{
    margin-top:50px;
    background:#fafafa;
    padding:35px;
    border-left:4px solid var(--gold);
}

.profile-box h4{
    color:var(--gold);
    font-size:1.2rem;
    margin-bottom:25px;
}

.profile-box dl{
    display:grid;
    grid-template-columns:180px 1fr;
}

.profile-box dt,
.profile-box dd{
    padding:15px 0;
    border-bottom:1px solid #e5e5e5;
}

.profile-box dt{
    font-weight:700;
    color:#222;
}

.profile-box dd{
    color:#555;
}

/* SP */

@media(max-width:768px){

    .message-wrap{
        grid-template-columns:1fr;
        gap:40px;
    }

    .message-photo{
        max-width:280px;
        margin:0 auto;
    }

    .message-text h3{
        font-size:1.4rem;
        text-align:center;
    }

    .sign{
        text-align:right;
    }

    .profile-box{
        padding:25px;
    }

    .profile-box dl{
        grid-template-columns:1fr;
    }

    .profile-box dt{
        background:#f5f5f5;
        padding:12px;
    }

    .profile-box dd{
        padding:12px;
    }
}


/* ========================================
   CONTACT
======================================== */

#contact {
    background: var(--black);
    color: var(--white);
    text-align: center;
}

#contact h2 {
    color: var(--white);
}

#contact p {
    margin-bottom: 30px;
}

@media(max-width:768px){

    .contact-btn{
        width:100%;
        max-width:300px;
        margin:auto;
    }

}
/* =========================
SERVICE CTA
========================= */

.service-cta{
    padding:120px 0;
    background:#f5f5f5;
}

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

.cta-card{
    position:relative;
    min-height:420px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    color:#fff;
    transition:.4s;
}

.cta-card:hover{
    transform:translateY(-8px);
}

.cta-sumai{
    background:
    url("../img/cta-mimamori.jpg")
    center center / cover no-repeat;
}

.cta-souzoku{
    background:
    url("../img/cta-souzoku.jpg")
    center center / cover no-repeat;
}

.cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.cta-content{
    position:relative;
    z-index:2;
    padding:50px;
}

.cta-sub{
    color:var(--gold);
    font-size:.9rem;
    letter-spacing:.15em;
    margin-bottom:15px;
}

.cta-content h3{
    font-size:1.7rem;
    line-height:1.5;
}

.cta-content p{
    line-height:2;
    margin-bottom:25px;
}

.cta-content span{
    display:inline-block;
    border:1px solid #fff;
    padding:12px 30px;
    transition:.3s;
}

.cta-card:hover span{
    background:#fff;
    color:#111;
}

/* SP */

@media(max-width:768px){

    .service-cta{
        padding:80px 0;
    }

    .cta-grid{
        grid-template-columns:1fr;
    }

    .cta-card{
        min-height:320px;
    }

    .cta-content{
        padding:30px;
    }

    .cta-content h3{
        font-size:1.5rem;
    }

}

/* ========================================
   FOOTER
======================================== */

footer {
    background: #000;
    color: #aaa;
    text-align: center;
    padding: 60px 20px;
}

.footer-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:20px 0;
}

.footer-nav li{
    display:flex;
    align-items:center;
}

.footer-nav li:first-child::after{
    content:"｜";
    margin:0 20px;
    color:#666;
}

.footer-nav a{
    color:#aaa;
    font-size:.95rem;
    transition:.3s;
}

.footer-nav a:hover{
    color:var(--gold);
}

/* SP */
@media (max-width:768px){

    .footer-nav{
        justify-content:center;
    }

    .footer-nav li:first-child::after{
        margin:0 12px;
    }

    .footer-nav a{
        font-size:.85rem;
    }

}
.footer-logo {
    font-size: 1.3rem;
    font-weight: 700;
    /* margin-bottom: 5px; */
    color: var(--white);
    letter-spacing: .15em;
}
.footer-copy {
    color: var(--white);
    margin-bottom: 30px;
}

footer small {
    display: block;
    margin-bottom: 10px;
}

.credit {
    margin-top: 15px;
    font-size: .85rem;
    color: var(--gold);
}

.credit a {
    color: var(--gold);
}

.credit a:hover {
    opacity: .7;
}

/* ========================================
   SP
======================================== */

@media (max-width: 768px) {

    header .inner {
        height: 70px;
    }

    nav ul {
        gap: 20px;
        font-size: .85rem;
    }

    section {
        padding: 80px 0;
    }

    th,
    td {
        display: block;
        width: 100%;
    }

    th {
        border-bottom: none;
    }
}

/* ========================================
   SP
======================================== */
.privacy{
    max-width:900px;
    margin:120px auto 80px;
    line-height:2;
}

.privacy h1{
    font-size:2rem;
    text-align:center;
    margin-bottom:50px;
}

.privacy h2{
    font-size:1.3rem;
    text-align:left;
    margin:50px 0 15px;
    padding-left:15px;
    border-left:3px solid var(--gold);
}

.privacy h2::after{
    display:none;
}

.privacy p{
    margin-bottom:20px;
}

.privacy table{
    margin-top:30px;
}

.privacy-list{
    max-width:600px;
    margin:20px 0;
}

.privacy-list li{
    padding-left:25px;
}

/* ========================================
   ABOUT.html
======================================== */

.page-fv{
    height:50vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(
        135deg,
        #111 0%,
        #1b1b1b 100%
    );
    color:#fff;
}

.page-fv h1{
    font-size:clamp(3rem,8vw,5rem);
    letter-spacing:.15em;
    margin-top: 50px;
}

.page-fv p{
    color:#d8d8d8;
    font-size:1.1rem;
}

/* MESSAGE */

.about-message{
    padding:120px 0;
    background:#fff;
    text-align:center;
}

.about-message h2{
    color:var(--gold);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.8;
}

.about-message p{
    max-width:800px;
    margin:0 auto 30px;
    line-height:2.2;
    color:#555;
}

/* SERVICE */

.business-area{
    background:#f7f7f7;
}

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

.business-card{
    background:#fff;
    padding:50px 35px;
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    border-radius:10px;
}

.business-card h3{
    color:var(--gold);
    margin-bottom:15px;
}

.business-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:0 15px 40px rgba(201,166,75,.15);
}

.business-card h3{
    color:var(--gold);
    margin-bottom:15px;
    letter-spacing:.08em;
}

.business-card p{
    color:#666;
}

/* STRENGTH */

.strength{
    background:#fff;
}

.strength h2{
    color:var(--black);
}

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

.strength-box{
    background:#fff;
    padding:50px 35px;
    border-top:3px solid var(--gold);
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.strength-box span{
    color:var(--gold);
    font-size:3rem;
    font-weight:700;
}

.strength-box h3{
    color:var(--black);
    margin-bottom:20px;
}

.strength-box p{
    color:#666;
}

/* MISSION */

.mission{
    padding:120px 0 !important;
    background:linear-gradient(
        135deg,
        #111 0%,
        #1b1b1b 100%
    );
    text-align:center;
}

.mission h2{
    color:var(--gold);
    margin-bottom:30px;
    letter-spacing:.08em;
}

.mission p{
    color:#fff;
    font-size:clamp(1.2rem,2vw,1.8rem);
    line-height:2;
    font-weight:300;
}

/* SP */

@media(max-width:768px){

    .page-fv{
        height:50vh;
    }

    .page-fv h1{
        font-size:2.8rem;
    }

    .about-message,
    .business-area,
    .strength,
    .mission{
        padding:90px 0;
    }

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

}

/* ========================================
   real.html
======================================== */

.concept{
    padding:100px 0;
}

.concept h2{
    margin-bottom:40px;
    text-align:center;
}

.concept p, .rental-link p{
    max-width:800px;
    margin:15px auto;
    line-height:2;
}

.concept-sub, .rental-copy {
    margin-top:30px;
    font-size:1.4rem;
    color:#666;
    text-align:center;
}


/* SERVICE */

.service{
    background:#f7f7f7;
    padding:100px 0;
}

.service h2{
    text-align:center;
    margin-bottom:60px;
}

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

.card{
    background:#fff;
    padding:40px 30px;
    border:1px solid #eee;
}

.card h3{
    margin-bottom:20px;
    color:var(--gold);
}

.card p{
    line-height:2;
    margin-bottom:25px;
}


@media (max-width: 1024px){

    .service-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .related-links .inner{
        grid-template-columns:1fr;
        gap:20px;
    }

}

/* PROBLEM */

.problem{
    padding:100px 0;
}

.problem h2{
    text-align:center;
    margin-bottom:50px;
}
.problem-title {
    text-align:center;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.problem ul{
    max-width:700px;
    margin:0 auto;
    padding:0;
}

.problem li{
    list-style:none;
    padding:20px;
    border-bottom:1px solid #ddd;
    position:relative;
    padding-left:40px;
}

.problem li::before{
    content:"✓";
    color:var(--gold);
    position:absolute;
    left:10px;
}

.problem-text {
    margin: 30px auto;
    max-width:800px;
}

.problem-btn{
    text-align:center;
    margin-top:50px;
}

.rental-link {
    background:#f7f7f7;
}


/* ========================================
   COMPANY.html
======================================== */

.company-message{
    background:#fff;
    text-align:center;
}

.company-message h2{
    color:var(--gold);
    line-height:1.8;
    margin-bottom:40px;
}

.company-message p{
    max-width:800px;
    margin:auto;
    color:#555;
}

.company-info{
    background:#f8f8f8;
}

.company-table{
    max-width:900px;
    margin:auto;
    background:#fff;
    padding:60px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.company-table dl{
    display:grid;
    grid-template-columns:220px 1fr;
}

.company-table dt,
.company-table dd{
    padding:20px;
    border-bottom:1px solid #eee;
}

.company-table dt{
    font-weight:700;
    color:#222;
    background:#fafafa;
}

.company-philosophy{
    padding:120px 0;
    background:linear-gradient(
        135deg,
        #111 0%,
        #1b1b1b 100%
    );
    text-align:center;
}

.company-philosophy h2{
    color:var(--gold);
    margin-bottom:30px;
    letter-spacing:.08em;
}

.company-philosophy p{
    color:#fff;
    font-size:clamp(1.2rem,2vw,1.8rem);
    line-height:2;
    font-weight:300;
}


@media(max-width:768px){

    .company-table{
        padding:30px;
    }

    .company-table dl{
        grid-template-columns:1fr;
    }

    .company-table dt{
        background:#fafafa;
    }

}

/* ========================================
GROUP BRANDS PAGE
======================================== */

.section-lead{
    text-align:center;
    max-width:700px;
    margin:0 auto 80px;
    color:#666;
    line-height:2;
}

/* カテゴリー */

.brand-category{
    margin-bottom:120px;
}

.brand-category:last-child{
    margin-bottom:0;
}

.brand-category h3{
    text-align:center;
    color:var(--gold);
    font-size:.95rem;
    letter-spacing:.2em;
    margin-bottom:10px;
}

.category-title{
    text-align:center;
    font-size:2rem;
    font-weight:700;
    color:var(--black);
    margin-bottom:50px;
}

/* グリッド */

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

/* カード */

.brand-category .brand-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-top:4px solid var(--gold);
    overflow:hidden;

    display:flex;
    flex-direction:column;

    transition:.35s;
}

.brand-category .brand-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

/* 画像 */

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

/* タイトル */

.brand-category .brand-card h4{
    font-size:1.3rem;
    color:var(--black);
    padding:30px 30px 15px;
}

/* 本文 */

.brand-category .brand-card p{
    padding:0 30px 30px;
    color:#666;
    line-height:2;
    flex:1;
}

/* ボタン */

.brand-category .brand-card a{
    display:block;
    border-top:1px solid #eee;
    padding:20px 30px;
    color:var(--gold);
    font-weight:700;
    letter-spacing:.08em;
    transition:.3s;
    margin-top:auto;
}

.brand-category .brand-card a:hover{
    background:var(--gold);
    color:#fff;
}


/* SP */

@media(max-width:1024px){

    .brand-list{
        grid-template-columns:1fr;
    }

    .category-title{
        font-size:1.6rem;
    }

}

.group-vision{
    padding:120px 0;
    background:linear-gradient(
        135deg,
        #111 0%,
        #1b1b1b 100%
    );
    text-align:center;
}

.group-vision h2{
    color:var(--gold);
    margin-bottom:30px;
    letter-spacing:.08em;
}

.group-vision p{
    color:#fff;
    font-size:clamp(1.2rem,2vw,1.8rem);
    line-height:2;
    font-weight:300;
}

/* ========================================
SP
======================================== */

@media(max-width:768px){

.section-lead{
    margin-bottom:50px;
    font-size:.95rem;
}

.brand-category{
    margin-bottom:80px;
}

.category-title{
    font-size:1.5rem;
    margin-bottom:35px;
}

.brand-category .brand-list{
    grid-template-columns:1fr;
    gap:20px;
}

.brand-category .brand-card img{
    height:200px;
}

.brand-category .brand-card h4{
    padding:25px 20px 10px;
    font-size:1.15rem;
}

.brand-category .brand-card p{
    padding:0 20px 25px;
    font-size:.95rem;
}

.brand-category .brand-card a{
    padding:18px 20px;
}

}


/* ========================================
 CONTACT.html
 ======================================== */
.contact-message{ 
    background:#fff;
    text-align:center;
} 
.contact-message h2{
     color:var(--gold);

} 
 
.contact-message p{
     max-width:800px;
     margin:auto;
     line-height:2;
     color:#555;
}

/* CONTACT LINK */

.contact-links-area{
    background:#f8f8f8;
}
      
.contact-links-area .inner{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    max-width:800px;
    margin:auto;
}

.contact-card{
    background:#fff;
    padding:50px 30px;
    text-align:center;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.contact-card h3{ 
    color:var(--gold); 
    font-size:1.5rem; 
    margin-bottom:15px; 
} 

.contact-card p{ 
    margin-bottom:25px; 
    color:#666; 
} 

.contact-btn{
    display:inline-block;
    padding:15px 40px;
    min-width:220px;
    border-radius:5px;
    font-weight:700;
    transition:all .35s ease;
}

.contact-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

/* TEL */

.tel-btn{ 
    background:var(--gold); 
    color:#fff; 
} 

.tel-btn:hover{ 
    background:#b38f34; 
} 

/* LINE */ 
.line-btn{ 
    background:#06C755; 
    color:#fff; 
} 

.line-btn:hover{ 
    opacity:.9; 
} 


/* SP */ 

@media(max-width:768px){ 
.contact-links-area 
.inner{ 
    grid-template-columns:1fr;
} 

.contact-card{ 
    padding:40px 25px; 
} 

.contact-btn{ 
    width:100%;
    min-width:auto; 
} 
}


/* ========================================
NEWS PAGE
======================================== */

.news-page{
    background:#fff;
}

.news-list{
    max-width:1000px;
    margin:0 auto;
}

.news-item{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:40px;

    padding:35px 0;

    border-bottom:1px solid #e5e5e5;

    transition:.3s;
}

.news-item:hover{
    padding-left:15px;
}

.news-date{
    color:#888;
    font-size:.95rem;
}

.news-category{
    display:inline-block;

    padding:4px 12px;

    background:var(--gold);

    color:#fff;

    font-size:.75rem;

    letter-spacing:.08em;

    margin-bottom:15px;
}

.news-content h3{
    color:var(--black);
    font-size:1.2rem;
    font-weight:500;
}

.news-item:hover h3{
    color:var(--gold);
}


.commitment{
    padding:120px 0;
    background:linear-gradient(
        135deg,
        #111 0%,
        #1b1b1b 100%
    );
    text-align:center;
}

.commitment h2{
    color:var(--gold);
    margin-bottom:30px;
    letter-spacing:.08em;
}

.commitment p{
    color:#fff;
    font-size:clamp(1.2rem,2vw,1.8rem);
    line-height:2;
    font-weight:300;
}

/* SP */

@media(max-width:768px){

    .news-item{
        grid-template-columns:1fr;
        gap:15px;
    }

    .news-date{
        font-size:.85rem;
    }

    .news-content h3{
        font-size:1rem;
        line-height:1.8;
    }

}


/* ======================================== 
RELATED LINKS 
======================================== */ 
.related-links{ 
    padding:50px 0; 
    border-top:1px solid #eee; 
    border-bottom:1px solid #eee; 
} 

.related-title{ 
    text-align:center; 
    color:#888; 
    font-size:.9rem; 
    letter-spacing:.15em; 
    margin-bottom:25px; 
} 

.related-service{
    text-align:center;
    margin-bottom:30px;
}

.related-service h3{
    margin-bottom:12px;
    font-size:1.1rem;
    color:#333;
}

.related-btn{
    display:inline-block;
    padding:12px 30px;
    border:1px solid var(--gold);
    color:var(--gold);
    border-radius:5px;
    transition:.3s;
}

.related-btn:hover{
    background:var(--gold);
    color:#fff;
}


/* ======================================== 
CONTACT CTA 
======================================== */ 
.page-contact{ 
    padding:120px 0; 
    background:#f8f8f8; 
    text-align:center; 
} 

.page-contact h2{ 
    color:var(--gold); 
    margin-bottom:25px; 
} 

.page-contact p{ 
    max-width:800px; 
    margin:0 auto 20px; 
    line-height:2; 
    color:#555; 
} 

.page-contact .more-btn{ 
    margin-top:20px; 
} 

/* SP */ 
@media(max-width:768px){ 
    .service-links-grid{ 
        grid-template-columns:1fr; 
    } 
    
    .page-service-links{ 
        padding:70px 0; 
    } 
    
    .service-link-card{ 
        padding:35px 25px; 
    } 
    
    .page-contact{ 
        padding:80px 0; 
    } 
}