/******変更部分******/
/*************************
共通
*************************/


:root{
    --navy:#0F2747;
    --gold:#B89B5E;
    --ivory:#FAF8F3;
    --text:#333;
    --border:#e5e5e5;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    background:#fff;
    color:var(--text);
    line-height:1.8;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

section{
    padding:100px 20px;
}

h2{
    text-align:center;
    font-size:42px;
    color:var(--navy);
    margin-bottom:50px;
    font-weight:500;
}


.page-top{

    height:500px;

    display:grid;

    grid-template-columns:50% 50%;

    align-items:center;

    background:var(--ivory);

    overflow:hidden;

    padding:0;

}



.page-top-text{

    padding-left:120px;

}



.page-en{

    font-size:16px;

    letter-spacing:5px;

    color:var(--gold);

    margin-bottom:20px;

}



.page-top h1{

    font-size:58px;

    color:var(--navy);

    font-weight:500;

    margin-bottom:30px;

}



.page-top-text p:last-child{

    font-size:22px;

    color:#666;

}



.page-top-image{

    height:100%;

    position:relative;

}



.page-top-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* 左側を白に溶かす */

.page-top-image::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:45%;

    height:100%;

    z-index:2;


    background:linear-gradient(
        to right,
        var(--ivory),
        transparent
    );

}


/*************************
ヘッダー
*************************/
.header{
    background:#fff;
    position:sticky;
    top:0;
    z-index:999;
    border-bottom:1px solid #eee;
    transition:.3s;
}

.header.scrolled{
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.header-inner{
    max-width:1500px;
    margin:auto;
    padding:40px 40px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}


.logo-area h1{
    font-size:50px;
    color:var(--navy);
    font-weight:600;
    margin:0;
    line-height:1.2;
    text-align: left;
}

.header-contact{
    display:flex;
    align-items:center;
    gap:20px;
    margin-left:auto;
}

.header-tel{
    color:var(--navy);
    font-weight:bold;
    font-size: 25px;
    padding: 0 20px;
}

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

    padding:12px 24px;
    border-radius:3px;

    transition:.3s;
    font-size: 25px;
}

.header-btn:hover{
    opacity:.85;
}


/*************************
ナビ
*************************/


.global-nav ul{
    max-width:1200px;
    margin:auto;

    display:flex;
    justify-content:center;
    gap:50px;
}

.global-nav a{
    display:block;
    padding:20px 0;

    color:#333;

    font-size:24px;

    transition:.3s;
}

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


/*************************
メインビジュアル
*************************/
.hero-main{
    min-height:650px;
    max-width:auto;
    margin:auto;

    padding:0;

    display:grid;
    grid-template-columns:55% 45%;

    align-items:center;

    position:relative;
    overflow:hidden;
}

.hero-content{
    padding:80px;
    position:relative;
    z-index:2;
    padding-left: 120px;
}

.hero-content::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(15,39,71,.08),
        rgba(15,39,71,.02)
    );

    z-index:-1;

}

.hero-content h1{
    font-size:58px;
    color:var(--navy);
    line-height:1.5;
    margin-bottom:30px;

}

.hero-content p{
    font-size:22px;
    color:#666;
}

.hero-image{
    position:relative;
    height:650px;
}

.hero-image img{
    height:600px;
    object-fit:cover;
    object-position:right center;
}

.hero-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.hero-image::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:2;

    background:
    linear-gradient(
        to left,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,.3) 50%,
        rgba(255,255,255,.85) 80%,
        rgba(255,255,255,1) 100%
    );
    z-index:2;
}


/*************************
特徴
*************************/
.feature-bar{
    background:var(--navy);

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

    gap:1px;

    padding:0;
}

.feature-item{
    color:#fff;
    text-align:center;

    padding:50px 20px;
}

.feature-item i{
    font-size:34px;
    color:var(--gold);
    margin-bottom:20px;
}

.feature-item h3{
    margin-bottom:15px;
    font-size:28px;
}

.feature-item p{
    font-size:18px;
}

/*************************
サービス
*************************/
.service-home{
    max-width:1600px;
    margin:auto;
}

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

.service-card{
    border:1px solid #ddd;

    background:#fff;

    text-align:center;

    padding:35px 20px;

    transition:.3s;
    min-height:320px;

    padding:50px 25px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.service-card i{
    font-size:38px;
    color:var(--gold);

    margin-bottom:20px;
}

.service-card h3{
    color:var(--navy);
    margin-bottom:15px;
    font-size:26px;

}

.service-card p{
    font-size:20px;
    color:#666;
    line-height:1.9;
}


/*************************
ご相談の流れ
*************************/
.flow-home{
    max-width:1200px;
    margin:auto;
}

.flow-sub{
    text-align:center;
    margin-bottom:50px;
    font-size: 22px;
}

.flow-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.flow-step{
    text-align:center;
    position:relative;
}

.flow-step h3{
    font-size:22px;
    color:var(--navy);
    margin-bottom:12px;
}

.flow-step p{
    font-size:22px;
    line-height:1.8;
}

.flow-step span{
    width:70px;
    height:70px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:auto auto 20px;

    border-radius:50%;

    background:var(--gold);
    color:#fff;

    font-size:22px;
    font-weight:bold;
}


/*************************
CTA
*************************/
.cta{
    background:#beaf8d3a;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
}


.cta-btn{
    background:var(--navy);
    color:#fff;

    padding:18px 50px;

    font-size:25px;

    transition:.3s;
}

.cta-btn:hover{
    background:var(--gold);
}

.cta-tel{
    font-size:32px;
    color:var(--navy);
    font-weight:bold;
}


/*************************
フッター
*************************/
.footer{
    background:var(--navy);
    color:#fff;
}

.footer-inner{
    max-width:1800px;
    margin:auto;

    padding:60px 30px;

    display:grid;
    grid-template-columns:
    2.5fr
    1fr
    1fr
    1fr;
    gap:60px;
}

.footer h2{
    color:#fff;
    text-align:left;
    margin-bottom:20px;
    font-size:32px;
}

.footer p,
.footer li,
.footer a{
    font-size:17px;
    line-height:2;
}

.footer h3{
    margin-bottom:22px;
}

.footer-menu li{
    margin-bottom:10px;
}

.footer-menu a{
    color:#fff;
}

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

.copyright{
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.15);
}


/*************************
フェードアップ
*************************/
.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:.8s;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}


/*************************
ハンバーガー
*************************/
.menu-btn{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-btn span{
    display:block;
    width:30px;
    height:3px;
    background:var(--navy);
    margin:6px 0;
}


/*************************
スマホ
*************************/
@media(max-width:768px){

    .header-inner{
        padding:15px 20px;
    }

    .logo-area h1{
        font-size:22px;
    }

    .header-contact{
        display:none;
    }

    .header.scrolled .logo-area h1{
        font-size:22px;
    }

    .menu-btn{
        display:block;
    }

    .global-nav{
        display:none;
    }

    .global-nav.show{
        display:block;
    }

    .global-nav ul{
        flex-direction:column;
        gap:0;
    }

    .global-nav a{
        text-align:center;
        border-top:1px solid #eee;
    }

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


    .feature-bar{
        grid-template-columns:1fr;
    }

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

    .flow-row{
        grid-template-columns:1fr;
    }

    .cta{
        flex-direction:column;
    }

    .cta-tel{
        font-size:24px;
    }

    .footer-inner{
        grid-template-columns:1fr;
    }

}





/* =========================
   office page
========================= */


/* 共通幅 */
.container{
    width:90%;
    max-width:1100px;
    margin:0 auto;
}


/* 小さめ文章用 */
.container-small{
    width:80%;
    max-width:850px;
    margin:0 auto;
}


/* =========================
   ページタイトル
========================= */



.page-subtitle{
    font-size:16px;
    letter-spacing:3px;
    color:#8b6f47;
    margin-bottom:20px;
}





/* =========================
   外観写真
========================= */

.office-photo{
    padding:100px 0;
}


.office-photo img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:20px;
}



/* =========================
   事務所理念
========================= */

.office-concept{
    padding:100px 0;
    background:#faf8f3;
}


.office-concept h2,
.office-info h2,
.access h2{

    text-align:center;
    font-size:42px;
    color:#4d3826;
    margin-bottom:60px;

}


.office-concept p{

    font-size:18px;
    line-height:2.2;
    margin-bottom:25px;
    color:#444;

}



/* =========================
   事務所情報
========================= */

.office-info{

    padding:100px 0;

}



.office-table{

    width:100%;
    border-collapse:collapse;
    font-size:18px;

}



.office-table th{

    width:30%;
    background:#eee7dc;
    color:#4d3826;
    padding:25px;
    text-align:left;
    border-bottom:1px solid #ddd;

}


.office-table td{

    padding:25px;
    border-bottom:1px solid #ddd;
    line-height:1.8;

}


/* =========================
   アクセス
========================= */

.access{

    padding:100px 0;

    background:#faf8f3;

}



.access h2{

    text-align:center;

    font-size:42px;

    color:#4d3826;

    margin-bottom:60px;

}



/* マップ外枠 */

.map-box{

    width:90%;

    max-width:1100px;

    height:450px;

    margin:0 auto;

    overflow:hidden;

    border-radius:20px;

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

}



/* Googleマップ */

.map-box iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}



/* =========================
   スマホ対応
========================= */

@media(max-width:768px){


    .access{

        padding:60px 0;

    }



    .access h2{

        font-size:30px;

        margin-bottom:40px;

    }



    .map-box{

        width:90%;

        height:280px;

        border-radius:15px;

    }


}







/* =========================
   スマホ対応
========================= */

@media(max-width:768px){


    .container,
    .container-small{

        width:90%;

    }

    .page-top-text{

        padding-left:25px;
        padding-right:25px;

    }


    .page-hero{

        padding:80px 20px;

    }


    .page-hero h1{

        font-size:38px;

    }


    .page-hero p{

        font-size:16px;

    }



    .office-photo{

        padding:60px 0;

    }


    .office-photo img{

        height:250px;

    }



    .office-concept,
    .office-info,
    .access{

        padding:60px 0;

    }



    .office-concept h2,
    .office-info h2,
    .access h2{

        font-size:30px;
        margin-bottom:40px;

    }



    .office-concept p{

        font-size:16px;

    }



    .office-table{

        font-size:15px;

    }



    .office-table th{

        width:35%;
        padding:15px;

    }


    .office-table td{

        padding:15px;

    }






    .cta h3{

        font-size:24px;

    }


    .cta-tel{

        font-size:22px;

    }


}

/*************************
 president page
*************************/


/* ページタイトル */



.president-en{

    font-size:16px;
    letter-spacing:4px;
    color:var(--gold);
    margin-bottom:20px;

}







/* 代表挨拶 */

.president-profile{

    max-width:1300px;

    margin:0 auto;

    padding:100px 20px;

    display:grid;

    grid-template-columns:35% 65%;

    gap:70px;

    align-items:start;

}



.president-photo img{

    width:100%;

    height:600px;

    object-fit:cover;

    border-radius:20px;

    position:sticky;

    top:120px;

}



.president-message h2{

    text-align:left;

}



.president-message p{

    font-size:18px;

    line-height:2.2;

    color:#555;

    margin-bottom:15px;

}



.president-name{

    margin-top:50px;

    text-align:right;

    font-size:18px;

    color:var(--navy);

}





/* プロフィール */

.profile-detail{

    background:var(--ivory);

    padding:100px 20px;

}



.profile-detail h2{

    margin-bottom:60px;

}



.profile-table{

    max-width:900px;

    margin:0 auto;

    background:#fff;

    border-radius:10px;

    overflow:hidden;

}



.profile-table p{

    display:flex;

    font-size:18px;

    padding:25px;

    border-bottom:1px solid #ddd;

    line-height:2;

}



.profile-table strong{

    width:180px;

    color:var(--navy);

    flex-shrink:0;

}





/*************************
 スマホ
*************************/


@media(max-width:768px){


    .president-hero{

        padding:70px 20px;

    }



    .president-hero h1{

        font-size:36px;

    }



    .president-hero p:last-child{

        font-size:15px;

    }





    .president-profile{

        display:block;

        padding:60px 20px;

    }



    .president-photo img{

        height:350px;

        margin-bottom:40px;

        position:static;

    }



    .president-message h2{

        text-align:center;

        font-size:30px;

    }



    .president-message p{

        font-size:16px;

        line-height:2;

        margin-bottom:20px;

    }



    .president-name{

        text-align:center;

        font-size:16px;

    }




    .profile-detail{

        padding:60px 20px;

    }



    .profile-table p{

        display:block;

        font-size:15px;

        padding:18px;

    }



    .profile-table strong{

        display:block;

        width:auto;

        margin-bottom:8px;

    }


}


/*************************
 service page
*************************/


/* ページタイトル */




.service-en{

    font-size:16px;

    letter-spacing:4px;

    color:var(--gold);

    margin-bottom:20px;

}






/* サービス一覧 */

.service-list{

    max-width:1200px;

    margin:0 auto;

    padding:100px 20px;

}




/* 各サービス */

.service-detail{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:60px;

    align-items:center;

    padding:70px 50px;

    margin-bottom:50px;

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:20px;

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

}


/*************************
取扱業務 アイコン左固定
*************************/

.service-detail,
.service-detail.reverse{

    grid-template-columns:220px 1fr;

}


.service-detail.reverse .service-icon{

    order:initial;

}





/* アイコン */

.service-icon{

    width:160px;

    height:160px;

    margin:auto;

    border-radius:50%;

    background:#f3eee5;

    display:flex;

    justify-content:center;

    align-items:center;

}

.service-icon{

    width:160px;
    height:160px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

}


.service-icon img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.service-icon i{

    font-size:65px;

    color:var(--gold);

}





/* 内容 */

.service-content h2{

    text-align:left;

    font-size:36px;

    color:var(--navy);

    margin-bottom:25px;

}



.service-content p{

    font-size:18px;

    line-height:2;

    color:#555;

    margin-bottom:30px;

}



.service-content ul{

    list-style:none;

}



.service-content li{

    font-size:17px;

    margin-bottom:12px;

    padding-left:25px;

    position:relative;

}



.service-content li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--gold);

    font-weight:bold;

}





/*************************
 スマホ
*************************/


@media(max-width:768px){


    .service-hero{

        padding:70px 20px;

    }



    .service-hero h1{

        font-size:36px;

    }



    .service-hero p:last-child{

        font-size:15px;

    }




    .service-list{

        padding:60px 20px;

    }




    .service-detail,
    .service-detail.reverse{

        display:block;

        padding:40px 25px;

        margin-bottom:30px;

    }



    .service-detail.reverse .service-icon{

        order:initial;

    }



    .service-icon{

        width:120px;

        height:120px;

        margin-bottom:35px;

    }



    .service-icon i{

        font-size:45px;

    }



    .service-content h2{

        text-align:center;

        font-size:28px;

    }



    .service-content p{

        font-size:16px;

    }



    .service-content li{

        font-size:15px;

    }


}


/*************************
 スクロール後ヘッダー縮小
*************************/

.header.scrolled .header-inner{

    padding:15px 40px;

}


.header.scrolled .logo-area h1{

    font-size:32px;

}


.header.scrolled .header-btn{

    padding:8px 20px;

    font-size:18px;

}


.header.scrolled .header-tel{

    font-size:20px;

}


.header.scrolled .global-nav a{

    padding:10px 0;

    font-size:18px;

}

/* 固定ヘッダーによるアンカーずれ対策 */

.service-detail,
#inheritance,
#realestate,
#company,
#will,
#other{

    scroll-margin-top:200px;

}

/* =========================
 officeトップ修正
========================= */

.page-top{
    height:500px !important;
    display:grid !important;
    grid-template-columns:50% 50% !important;
    padding:0 !important;
    overflow:hidden;
    background:var(--ivory);
}


.page-top-text{
    padding-left:120px;
}


.page-top-image{
    height:500px;
    position:relative;
}


.page-top-image img{
    width:100%;
    height:500px;
    object-fit:cover;
}


/* 写真を左から透明化 */

.page-top-image::before{
    content:"";
    position:absolute;

    left:0;
    top:0;

    width:45%;
    height:100%;

    z-index:2;

    background:linear-gradient(
        to right,
        var(--ivory),
        transparent
    );
}


@media(max-width:768px){

.page-top{
    height:auto !important;
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:column !important;
}

.page-top-text{
    padding:60px 25px !important;
}

.page-top-image{
    width:100%;
    height:300px;
}

}

@media(max-width:768px){

    /* 下層ページのタイトル画像を非表示 */
    .page-top-image{
        display:none;
    }

    .page-top{
        height:auto !important;
        display:block !important;
    }

    .page-top-text{
        padding:60px 25px !important;
        text-align:center;
    }

    .page-top h1{
        font-size:36px;
    }

    .page-top-text p:last-child{
        font-size:16px;
    }

}

/*************************
 スマホ ホーム画像＋左膜デザイン
*************************/

@media(max-width:768px){

    .hero-main{

        height:550px;

        display:block;

        position:relative;

        overflow:hidden;

    }


    /* 写真を全面表示 */
    .hero-image{

        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:100%;

    }


    .hero-image img{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center;

    }


    /* 写真の上に白い膜 */
    .hero-image::before{

        content:"";

        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:100%;

        z-index:1;

        background:linear-gradient(
            to right,
            rgba(255,255,255,0.9),
            rgba(255,255,255,0.25)
        );

    }


    /* 左側の文章エリア */
    .hero-content{

        position:absolute;

        top:50%;

        left:0;

        transform:translateY(-50%);


        width:60%;


        padding:40px 25px;


        z-index:2;


        background:rgba(255,255,255,0.45);


        backdrop-filter:blur(4px);


    }


    .hero-content h1{

        font-size:32px;

        line-height:1.5;

        margin-bottom:20px;

    }


    .hero-content p{

        font-size:16px;

        line-height:2;

        color:#555;

    }


}

/*************************
スマホ スクロール後ロゴ固定
*************************/

@media(max-width:768px){

    .header.scrolled .logo-area h1{
        font-size:22px !important;
    }

}

.header-fax{
    font-size:16px;
    color:#333;
    margin:0;
}

.header-fax i{
    margin-right:6px;
}

.contact-number{
    display:flex;
    align-items:center;
    gap:30px;
}