/* ==========================================================
   Header
--------------------------------------------------------------
   サイト全体で共通して表示するヘッダー。

   主役になるのではなく、
   "安心して現在地が分かる存在" を目指す。

   漆喰のようなやわらかい背景と、
   建築雑誌のような余白を意識する。
========================================================== */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    

    background: rgba(250, 248, 244, 0.82);
    backdrop-filter: blur(10px);

    border-bottom:1px solid transparent;

    transition:
        background .5s ease,
        border-color .5s ease,
        backdrop-filter .5s ease;

}

.site-header.is-scrolled{

    background:rgba(250,248,244,.92);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(70,60,45,.08);

}

/* ----------------------------------------------------------
   Header Inner
---------------------------------------------------------- */

.header__inner{

    max-width:1280px;

    margin:0 auto;

    padding:20px 32px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ----------------------------------------------------------
   Logo
---------------------------------------------------------- */

.logo{

    text-decoration:none;

    color:#3f392f;

}

.logo{

    margin:0;

    line-height:1;

}

.logo a{

    display:block;

}

.logo img{

    display:block;

    width:170px;      /* お好みで調整 */

    height:auto;

}
.logo__title{

    display:block;

    font-family:"Noto Serif JP",serif;

    font-size:1.45rem;

    font-weight:400;

    letter-spacing:.08em;

    white-space: nowrap;


}

.logo__sub{

    display:block;

    margin-top:6px;

    font-size:.72rem;

    letter-spacing:.18em;

    color:#7a746c;

}

.logo__line{

    display:block;

    width:40px;

    height:1px;

    margin:10px 0 8px;

    background:rgba(143,127,99,.45);

}


/* ----------------------------------------------------------
   Navigation
---------------------------------------------------------- */

.global-nav__list{

    display:flex;

    gap:30px;

    list-style:none;

    margin:0;

    padding:0;

}

.global-nav__list a{

    position:relative;

    text-decoration:none;

    color:#40382f;

    font-size:.95rem;

    letter-spacing:.06em;

    transition:.3s;

    

}

/* 線が左から伸びる */

.global-nav__list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:#8f7f63;

    transition:.35s ease;

}

.global-nav__list a:hover{

    color:#2f2b27;

}

.global-nav__list a:hover::after{

    width:100%;

}

.global-nav a{
    white-space: nowrap;
}


.global-nav__list a{

    position:relative;

    display:inline-block;

    color:#5f564d;

    text-decoration:none;

    transition:
        color .35s ease,
        opacity .35s ease;

}

.global-nav__list a::before{

    content:"";

    position:absolute;

    left:-16px;

    top:50%;

    transform:
        translateY(-50%)
        scaleY(0);

    width:2px;

    height:18px;

    background:#8b7d69;

    transform-origin:center;

    transition:
        transform .35s ease;

}

.global-nav__list a:hover{

    color:#2f2b27;

}

.global-nav__list:hover a{

    opacity:.45;

}
.global-nav__list a:hover{

    opacity:1;

}

/* ==========================================
   Mobile Header
========================================== */

.menu-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

    width:42px;

    height:42px;

}


.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px auto;

    background:#3f392f;

    transition:.35s;

}

@media (max-width:768px){

.header__inner{

    padding:18px 24px;

}


.menu-toggle{

    display:block;

}

.logo__title{

    font-size:1.2rem;

}

.logo__sub{

    font-size:.65rem;

}

}



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


.menu-toggle{

    display:none;

    width:44px;
    height:44px;

    border:none;
    background:none;

    cursor:pointer;

    position:fixed;

    top:20px;
    right:22px;

    z-index:2000;

}



.menu-toggle span{

    display:block;

    width:28px;
    height:2px;

    margin:6px auto;

    background:#40382f;

    border-radius:10px;

    transition:.35s ease;

}


/*==========================================
 Access
==========================================*/

.access{

    padding:7rem 0;

    background:#f8f6f1;

}

.access h2{

    text-align:center;

    margin-bottom:3rem;

}

.map{

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.map iframe{

    display:block;

    width:100%;

    height:450px;

    border:0;

}


/* ===========================
   Menu Overlay
=========================== */

.menu-overlay{

    position:fixed;
    inset:0;

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

    backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;


    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    

    z-index:9998;

}

.menu-overlay.is-open{

    opacity:1;
    visibility:visible;

}

/* =========================
   Mobile
========================= */


@media(max-width:1100px){


.menu-toggle{

    display:block;

    position:fixed;

    top:24px;

    right:24px;

    z-index:10000;

}



.global-nav{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;


    display:flex;

    justify-content:center;

    align-items:flex-start;


    background:#f8f6f1;

    background:
    linear-gradient(
    rgba(248,246,241,.96),
    rgba(248,246,241,.96)
    );
    


    backdrop-filter:blur(12px);


    opacity:0;

    visibility:hidden;

    pointer-events:none;
    

    transition:.45s ease;

    z-index:9999;

    padding-top: 120px;

    transform: translateX(100%);

    transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);

}


.global-nav__list{

    display:flex;

    flex-direction:column;

    gap:38px;

    font-size:1.1rem;


    width:auto;

    margin:0;

    padding:0;


    text-align:center;
    

}


.global-nav__list a{

    display:block;

    white-space:nowrap;

    text-decoration:none;

    color:#40382f;

    font-size:1rem;

    letter-spacing:.08em;

}



/* 開いた状態 */

.global-nav.is-open{


    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform: translateX(0);


}

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

    .global-nav ul{
        gap:16px;
    }

    .global-nav a{
        font-size:15px;
    }

     .logo-title{
        white-space: nowrap;
    }

}

@media(max-width:768px){

    .access{

        padding:5rem 0;

    }

    .map iframe{

        height:320px;

    }

}




/* ハンバーガー → × */

.menu-toggle.is-active span:nth-child(1){

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

}



.menu-toggle.is-active span:nth-child(2){

    opacity:0;

}



.menu-toggle.is-active span:nth-child(3){

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

}


}

body{
    overflow-x:hidden;
}

body.menu-open{

    overflow:hidden;

}

.logo{

    z-index:1100;

}

.logo__title{

    font-size:1.2rem;

}

.logo__sub{

    margin-top:4px;

    font-size:.62rem;

    letter-spacing:.18em;

}


}



/* =========================
   Tablet
========================= */
@media (min-width:769px) and (max-width:1100px){

    .hero-title{

        font-size:clamp(32px,5vw,48px);

        line-height:1.3;

        white-space:nowrap;

    }

}

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

@media (min-width:769px) and (max-width:1100px){

    .header-inner{
        padding-left:30px;
        padding-right:30px;
    }


    .logo{
        font-size:28px;
    }


    .global-nav a{

        font-size:15px;

        margin-left:20px;

        white-space:nowrap;

    }

}

@media (min-width:769px) and (max-width:1100px){

header{
    padding:20px 30px;
}


.logo{
    max-width:150px;
}


.logo img{

    width:160px;

}


header{

    padding:20px 30px;

}




.global-nav a{

    font-size:13px;

}


.global-nav{

    gap:15px;

}

}

@media(max-width:768px){


body{

    font-size:12px;

    line-height:1.9;

}


h1{

    font-size:28px;

    line-height:1.5;

}


h2{

    font-size:24px;

    line-height:1.6;

}


p{

    font-size:16px;

}


}

@media(max-width:1024px){

.global-nav{

    position:fixed;

    top:0;
    right:0;
    left:auto;

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

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding-top:120px;



    align-items:center;

    background:rgba(248,246,241,.96);

    transform:translateX(100%);

    transition:transform .4s ease;

    z-index:9999;

}


.global-nav.open{

    transform:translateX(0);

}

}




@media (max-width:1024px){

.global-nav{

    width:380px;

    padding-top:120px;

    align-items:center;

}

.global-nav__list{

    gap:26px;

}

.global-nav__list a{

    font-size:1rem;

    letter-spacing:.05em;

}

}