@charset "UTF-8";

/* ==========================================
   Noto Sans JP
========================================== */

@font-face{
font-family:"Noto Sans JP";
src:url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

/* ==========================================
   Shippori Mincho
========================================== */

@font-face{
font-family:"Shippori Mincho";
src:url("../fonts/ShipporiMincho-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

/* ==========================================
   Zen Kaku Gothic
========================================== */

@font-face{
font-family:"Zen Kaku Gothic";
src:url("../fonts/ZenKakuGothic-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

/* ==========================================
   Poppins
========================================== */

@font-face{
font-family:"Poppins";
src:url("../fonts/Poppins-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

body{ font-family:"Noto Sans JP",sans-serif; font-size:16px; line-height:2; color:#444; }
ul { margin:0 auto; padding:0; list-style-type:none; }
ol { margin:0 auto; padding:0; list-style-type:none; }
h1{ font-family:"Shippori Mincho",serif; font-size:42px; line-height:1.5; font-weight:400; }
h2{ font-family:"Zen Kaku Gothic",sans-serif; font-size:30px; font-weight:700; }
/* ==========================================
   Header
========================================== */
.header { position:sticky; top:0; z-index: 999; background: #ffffff; box-shadow: 0 2px 20px rgba(0,0,0,.04); }

/* ==========================================
   Brand Message
========================================== */
.header__message { padding:8px 20px; text-align: center; border-bottom: 1px solid #f2f2f2; }
.header__message-text { font-family: "Zen Kaku Gothic", sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .08em; color: #777; }

/* ==========================================
   Header Inner
========================================== */
.header__inner { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1250px; margin:0 auto; padding:22px 32px; }

/* ==========================================
   Logo
========================================== */
.header__logo { width:190px; flex-shrink: 0; }
.header__logo-link { display: block; }
.header__logo-image { display: block; width: 170px; height: auto; }

/* ==========================================
   Navigation
========================================== */
.header__nav { flex:1; margin:0 25px; }
.header__nav-list { display: flex; justify-content:center; align-items:cener; gap:32px; }
.header__nav-item { list-style: none; }
.header__nav-link { display:flex; flex-direction:column; align-items:center; text-decoration:none; }
.header__nav-ja { font-family:"Zen Kaku Gothic",sans-serif; font-size:12px; font-weight:700; line-height:1.6; white-space: nowrap; color:#333; }
.header__nav-en { margin-top:6px; font-family:"Poppins",sans-serif; font-size:10px; letter-spacing:.15em; color:#999; text-transform:uppercase; }
.header__nav-link:hover .header__nav-ja { color:#e88fa4; }
.header__nav-link:hover .header__nav-en { color:#e88fa4; }

/* ==========================================
   CTA
========================================== */
.header__cta { display:flex; gap:16px; margin-left:auto; }

/* ==========================================
   Button
========================================== */
.button { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-width:90px; min-height:30px; padding:8px 15px; font-family: "Zen Kaku Gothic", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-align: center; text-decoration: none; border-radius: 8px; transition: .25s ease; }
.button small { margin-top: 2px; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: .04em; }

/* ==========================================
   Button - LINE
========================================== */
.button--line { color: #ffffff; background: #06c755; border: 1px solid #06c755; }
.button--line:hover { color: #06c755; background: #ffffff; }

/* ==========================================
   Button - Entry
========================================== */
.button--entry { color: #ffffff; background: #e88fa4; border: 1px solid #e88fa4; }
.button--entry:hover { color: #e88fa4; background: #ffffff; }


/* ==========================================
   Hamburger
========================================== */
.header__toggle { display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: none; cursor: pointer; }







@media (max-width: 1024px) {

    .header__inner { position: relative; display: flex; align-items: center; padding: 18px 24px; }
    .header__logo { width: auto; }
    .header__toggle {
position: absolute;
top: 70%;
right: 24px;
transform: translateY(-50%);

display: flex; flex-direction: column; justify-content: center; align-items: center;

width: 44px; height: 44px; padding: 0;

background: transparent; border: none; cursor: pointer;
}

    .header__toggle-line {
display: block;
width: 24px;
height: 2px;
margin: 3px 0;
background: #333;
border-radius: 999px;
transition: .25s ease;
}

    .header__nav,
    .header__cta {
display: none;
}

    .header.is-open .header__nav {
position: absolute;
top: 100%;
left: 0;
right: 0;

display: block;
margin: 0;
padding: 24px;

background: #fff;
box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

    .header.is-open .header__nav-list {
display: flex;
flex-direction: column;
gap: 20px;
}
}