/* =========================
   header
========================= */
header{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
height:11rem;
border:0px #FF0000 solid;
}


/* ------------------------
   logo
--------------------------- */
header .logo{
justify-self: start;
padding-left:2.3rem;
position: relative;
z-index: 10;
border:0px #FF0000 solid;
}
header .logo img{
display: block;
max-height: 7rem;
width:auto;
border:0px #FF0000 solid;
}

/* OPEN：ロゴ表示 */
@media (max-width:767px){
body.is-nav-open header .logo{
position: fixed;
z-index: 1001;
padding-left:0;
top:6rem;
left: 50%;
transform: translateX(-50%) translateY(-10px);
opacity: 0;
pointer-events: auto;
animation: logoFadeIn 0.4s ease-out forwards;
}
}

body.is-nav-open header .logo img{
display: block;
max-height: 7rem;
}

@keyframes logoFadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}


/* ============ */
@media (max-width:767px){
header{
grid-template-columns: 1fr auto;
}
header .logo img{
max-height: 5rem;
}
}


/* =========================
 nav
========================= */
header .nav{
justify-self: end;
padding-right: 1.8rem;
border:0px #FF0000 solid;
}

header nav ul {
display: grid;
grid-auto-flow: column;
align-items: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}

/* li : vertical dotted line */
header nav li {
position: relative;
padding: 0 2.3rem;
}

header nav li::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 3rem;
background-image: radial-gradient(circle, #999 1px, transparent 1px);
background-size: 1px 3px;
background-repeat: repeat-y;
}

/* last item no line */
header nav li:last-child {
padding-right: 0;
}
header nav li:last-child::after,
header nav li:nth-last-child(2)::after {
display: none;
}

/* ------------------------
  link
--------------------------- */
header nav a {
display: grid;
justify-items: center;
gap: 2px;
text-decoration: none;
color: #222;
font-size: 1.6rem;
line-height: 1.6;
}

/* Japanese */
header nav a span:first-child {
font-weight:700;
}

/* English */
header nav a span:nth-child(2) {
font-size: 1rem;
font-weight:700;
letter-spacing: 0.08em;
color: #FDA9B2;
}

/* hover アンダーライン */
header nav a span:first-child::after{
content: "";
position: absolute;
left: 50%;
bottom: -0.2em;
width: 0;
height: 2px;
background: #FDA9B2;
transform: translateX(-50%);
transition: width .3s ease;
}

header nav a:hover span:first-child::after{
width: 100%;
}

/* お問い合わせ  */
header nav a.nav-contact span:first-child::after{
display: none;
}


/* ------------------------
  contact
--------------------------- */
header nav li:last-child a {
display: grid;
grid-auto-flow: column;
align-items: center;
gap: 8px;
border-radius: 999px;
border:2px #FEAAB2 solid;
background:#FEAAB2;
padding: 1.2rem 4rem;
color:#FFF;
font-weight:700;
transition:.3s;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}

/* mail icon */
header nav li:last-child a::before {
content: "\e158";
font-family: 'Material Icons';
font-weight: 400;
font-style: normal;
border:0px #FF0000 solid;
font-size: 2.3rem;
line-height: 1;
}

/* contact hover */
header nav li:last-child a:hover {
background: #FFF;
color: #FEAAB2;
border:2px #FEAAB2 solid;
}

.nav-toggle {
display: none;
}


/* ============ */
@media (max-width:767px){
header .nav {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background: #fff;
z-index: 1000;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
justify-self: unset;
border:0px #FF0000 solid;
}

/* open state */
body.is-nav-open header .nav {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

/* center layout */
header nav {
height: 100%;
display: grid;
place-items: center;
padding: 7rem 2rem 0 2rem;
}

/* vertical list */
header nav ul {
grid-auto-flow: row;
gap: 0;
width: min(520px, 100%);
}

/* li: bottom border */
header nav li {
padding: 0;
}

header nav a {
width: 100%;
text-align: center;
justify-items: center;
padding: 1.5rem 0;
}

header nav li::after {
display: none;
}
header nav li {
border-bottom: 1px solid rgba(0,0,0,.12);
}

/* contact button */
header nav li:last-child {
padding-top: 3rem;
border: 0;
}
header nav li:last-child a {
width: auto;
justify-content: center;
}


/* =========================
   ハンバーガー
========================= */
/* toggle button */
.nav-toggle {
display: block;
width: 42px;
height: 42px;
border: none;
background: none;
cursor: pointer;
position: fixed;
top:1.1rem;
right:1.1rem;
z-index: 1100;
}

/* hamburger */
.nav-toggle::before,
.nav-toggle::after,
.nav-toggle span {
content: "";
position: absolute;
left: 50%;
width: 22px;
height: 2px;
background: #222;
transform: translateX(-50%);
transition: transform .25s ease, opacity .25s ease;
}

.nav-toggle::before {
top: 14px;
}
.nav-toggle span {
top: 20px;
}
.nav-toggle::after {
top: 26px;
}

/* open → close (×) */
body.is-nav-open .nav-toggle::before {
top: 20px;
transform: translateX(-50%) rotate(45deg);
}
body.is-nav-open .nav-toggle::after {
top: 20px;
transform: translateX(-50%) rotate(-45deg);
}
body.is-nav-open .nav-toggle span {
opacity: 0;
}

}