/* ==========================================================
   Reset
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    line-height:1.7;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

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

ul{
    list-style:none;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    border:none;
    background:none;
    font:inherit;
    cursor:pointer;
}


/* ==========================================================
   Variables
========================================================== */

:root{

    /* Layout */

    --container:1400px;

    --header-height:110px;
    --header-height-sp:80px;

    --submenu-width:250px;

    /* Color */

    --color-main:#005cab;
    --color-text:#222;
    --color-border:#e5e5e5;
    --color-bg:#ffffff;

    /* Radius */

    --radius:6px;

    /* Animation */

    --speed:.3s;
    --ease:cubic-bezier(.4,0,.2,1);

}


/* ==========================================================
   Base
========================================================== */

/*body{

    font-family:
        "Noto Sans JP",
        sans-serif;

    background:#fff;

    color:var(--color-text);

}

main{

    display:block;

}
*/

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

.header{

    /*position:sticky;*/
  
  position:fixed;

    top:0;

    width:100%;

    background:#fff;

    /*border-bottom:1px solid var(--color-border);*/
  box-shadow: 0px 0px 20px 0px #ddd;

    z-index:1000;

}

.header_inner{

    width:min(var(--container),92%);

    margin:auto;

    min-height:var(--header-height);

    display:grid;

    grid-template-columns:auto 1fr;

    grid-template-areas:

        "logo contact"
        "logo menu";

    align-items:center;

    column-gap:60px;
  position: relative;
  

}


/* ==========================================================
   Logo
========================================================== */

.logo{

    grid-area:logo;

    align-self:center;
  

}

.logo a{
  /* [disabled]display:inline-block; */
}

.logo h1{
  /* [disabled]font-size:2rem; */
  /* [disabled]line-height: 1.2; */
}

.logo p{

    margin-top:6px;

    font-size:.85rem;

    color:#666;

}


/* ==========================================================
   Contact
========================================================== */

.contact{

    grid-area:contact;

    justify-self:end;

}

.contact a{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:230px;

    height:46px;

    padding:0 30px;

    background:var(--color-main);

    color:#fff;

    border-radius:0 0 var(--radius) var(--radius);

    letter-spacing:.08em;

    transition:
        transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        background var(--speed) var(--ease);

}

.contact a:hover{

    /*transform:translateY(-2px);

    box-shadow:

        0 10px 24px rgba(0,0,0,.15);*/

}


/* ==========================================================
   Navigation
========================================================== */

.gnav{

    grid-area:menu;

    justify-self:end;
  

}

.menu{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:30px;

}

.menu>li{

    position:relative;

}


/* ==========================================================
   Menu Link
========================================================== */

.menu>li>a{

    position:relative;

    display:flex;

    align-items:center;

    min-height:52px;

    white-space:nowrap;

    transition:

        color var(--speed);

}

.menu>li.contact>a{
  min-height:48px;

}


/* ==========================================================
   Current
========================================================== */

.menu > li.navi > a::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:var(--color-main);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform var(--speed) var(--ease);

}

.menu > li.navi:hover > a::before,
.menu > li.navi.current > a::before{

    transform:scaleX(1);

}

.menu > li.navi:hover > a,
.menu > li.navi.current > a{

    color:var(--color-main);
}




/* ==========================================================
   Has Child
========================================================== */

.has-child > a{

    display:flex;

    align-items:center;

    gap:8px;

}

.has-child > a::after{

    content:"";

    width:7px;

    height:7px;

    margin-top:-4px;

    border-right:2px solid currentColor;

    border-bottom:2px solid currentColor;

    transform:rotate(45deg);

}


/* ==========================================================
   Hover Area
========================================================== */

.has-child::after{

    content:"";

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    height:24px;

}


/* ==========================================================
   Submenu
========================================================== */

.submenu{

    position:absolute;

    top:calc(100% + 18px);
  
  left:-4px;

    /*right:-10px;*/

    width:var(--submenu-width);

    background:#fff;

    border:1px solid var(--color-border);

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

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:
        opacity var(--speed),
        transform var(--speed),
        visibility var(--speed);

    z-index:20;

}

.has-child:hover > .submenu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.submenu li{

    border-bottom:1px solid var(--color-border);

}

.submenu li:last-child{

    border-bottom:none;

}

.submenu a{

    display:block;

    padding:16px 22px;

    transition:
        background var(--speed),
        color var(--speed);

}

.submenu a:hover{

    background:#f7f9fc;

    color:var(--color-main);

}


/* ==========================================================
   Hamburger（PCでは非表示）
========================================================== */

.menu-btn,
.submenu-btn,
.overlay{

    display:none;

}



/* ==========================================================
   Responsive
========================================================== */

@media (max-width:900px){

.header{

    /*position:relative;*/

}

.header_inner{

    min-height:var(--header-height-sp);

    grid-template-columns:1fr auto;

    grid-template-areas:
        "logo button"
        "nav nav";

    column-gap:20px;

}

/* ---------- Contact ---------- */

.contact{

    display:none;

}

/* ---------- Hamburger ---------- */

.menu-btn{

    grid-area:button;

    display:block;

    position:relative;

    width:46px;

    height:46px;

    z-index:1100;
  
  margin-top: 15px;

}

.menu-btn span{

    position:absolute;

    left:7px;
    width:32px;

    height:2px;

    background:var(--color-main);

    transition:.3s;

}

.menu-btn span:nth-child(1){top:13px;}
.menu-btn span:nth-child(2){top:22px;}
.menu-btn span:nth-child(3){top:31px;}

.menu-btn.open span:nth-child(1){

    top:22px;

    transform:rotate(45deg);

}

.menu-btn.open span:nth-child(2){

    opacity:0;

}

.menu-btn.open span:nth-child(3){

    top:22px;

    transform:rotate(-45deg);

}

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

.gnav{

    position:fixed;

    top:85px;

    right:0;

    width:min(360px,80vw);

    height:auto;

    /*padding-top:var(--header-height-sp);*/

    background:#fff;

    transform:translateX(100%);

    transition:transform .35s;

    overflow:auto;

    z-index:1000;
  

}

.gnav.open{

    transform:translateX(0);

}

.menu{

    display:block;

}

.menu > li{

    border-bottom:1px solid var(--color-border);

}

.menu > li > a{

    min-height:60px;

    padding:0 20px;

}

.menu > li > a::before{

    display:none;

}
  
  ul.menu li a{
    padding: 10px;
  }

/* ---------- Contact ---------- */

.contact{

    display:block;
  width:100%;
  text-align: left;

}

.contact a{

    width:100%;

    /*min-width:0;*/

    height:64px;

    border-radius:0;
  
  text-align: left;
  
  justify-content:flex-start;

}

/* ---------- Accordion ---------- */

.has-child::after{

    display:none;

}

.has-child > a::after{

    display:none;

}

.submenu-btn{

    display:block;

    position:absolute;

    top:6px;

    right:6px;

    width:48px;

    height:48px;

}

.submenu-btn::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:8px;

    height:8px;

    margin-left:-5px;

    margin-top:-7px;

    border-right:2px solid var(--color-main);

    border-bottom:2px solid var(--color-main);

    transform:rotate(45deg);

    transition:transform .3s;

}

.has-child.open > .submenu-btn::before{

    transform:rotate(-135deg);

}

.submenu{

    position:static;

    width:100%;

    opacity:1;

    visibility:visible;

    transform:none;

    border:none;

    box-shadow:none;

    max-height:0;

    overflow:hidden;

    transition:max-height .35s;

}

.submenu a{

    padding:15px 20px 15px 42px;

    background:#f8f8f8;

}

/* ---------- Overlay ---------- */

.overlay{

    display:block;

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:900;

}

.overlay.show{

    opacity:1;

    visibility:visible;

}

body.menu-open{

    overflow:hidden;

}

}


/* ==========================================================
   Accessibility
========================================================== */

a:focus-visible,
button:focus-visible{

    outline:2px solid var(--color-main);

    outline-offset:3px;

}


/* ==========================================================
   Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}




/* ==========================================================
   お問い合わせボタン処理
========================================================== */


.header_inner{
  position: relative;
}

li.contact{
  position: absolute;
  top:0; right:0;
}

@media (max-width:900px){
  li.contact{
  position: static;
}
}


/* ==========================================================
   追加（サブメニュー修正）
========================================================== */


@media (max-width:900px){

    .submenu-btn{
        pointer-events:none;
    }

}