@charset "UTF-8";
/* CSS Document */
:root {
  /* PC と SP でヘッダー高さを変える */
  --header-height-pc: 96px;
  --header-height-sp: 72px;
}


body {margin: 0;font-family: kozuka-gothic-pr6n, sans-serif;font-style: normal;font-weight: 400;}



/* ------------------------------
   Header
------------------------------ */
#header {position: absolute;top: 0;left: 0;width: 100%;height: var(--header-height-pc, 96px);z-index: 1000;border-bottom: 1px solid rgba(0,0,0,0.04);background: #fff;overflow: visible;}
#header .header_inner {width: 90%;margin: 0 auto;height: 100%;padding: 0;display: flex;align-items: flex-start;justify-content: space-between;}

/* グランデロゴ相当 ----------------------------------- */
#header .header_info {display: flex;flex-direction: column;z-index: 1000;}
#header .header_brand {display: flex;flex-direction: column;text-decoration: none;color: #221714;transform: translateY(24px);}
#header .header_company {margin: 0;font-size: 16px;letter-spacing: 0.14em;}
#header .header_en {margin: 0;font-size: 52px;letter-spacing: 0.15em;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;}

/* ナビゲーション ----------------------------------- */
#header .header_nav {display: flex;align-items: flex-start;font-size: 13px;letter-spacing: 0.18em;text-transform: uppercase;margin-top: 48px;}
#header .nav-links {display: flex;align-items: center;gap: 32px;}
#header .header_nav_list {display: flex;gap: 40px;list-style: none;margin: 0;padding: 0;}
#header .header_nav_list a {text-decoration: none;color: #221714;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;font-size:16px;}
#header .header_nav_list a:hover {opacity: 0.7;}

/* SNSアイコン ------------------------------------ */
#header .header_sns {display: flex;gap: 20px;margin-top: 0;align-items: center;}
#header .header_sns .sns_icon {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;text-decoration: none;transition: opacity 0.2s ease;}
#header .header_sns .sns_icon img {width: 100%;height: auto;display: block;}
#header .header_sns .sns_icon:hover {opacity: 0.7;}

/* ハンバーガーボタン ------------------------------ */
#header .nav-toggle {position: relative;width: 34px;height: 24px;padding: 0;border: 0;background: none;cursor: pointer;display: none;}
#header .nav-toggle span {position: absolute;left: 0; height: 2px;background: #221815;border-radius: 999px;transition: transform .25s ease, opacity .2s ease, width .25s ease, top .25s ease;}
#header .nav-toggle span:nth-child(1){ top: 0;  width: 34px; }
#header .nav-toggle span:nth-child(2){ top: 10px; width: 34px; }
#header .nav-toggle span:nth-child(3){ top: 20px; width: 28px; }

/* ×（閉じるボタン） */
body.nav-open #header .nav-toggle span:nth-child(1){top: 11px;width: 34px;transform: rotate(45deg);}
body.nav-open #header .nav-toggle span:nth-child(2){opacity: 0;}
body.nav-open #header .nav-toggle span:nth-child(3){top: 11px;width: 34px;transform: rotate(-45deg);}


@media (max-width: 960px) {
/* ヘッダー通常時（メニュー閉じてる状態） ------------------------------ */ 
#header {height: var(--header-height-sp, 72px);}
#header .header_brand {transform: translateY(12px);}
#header .header_company {font-size: 15px;margin-bottom: -16px;}
#header .header_en {font-size: 48px;}
#header .header_nav {margin-top: 24px;}
/* ハンバーガー表示 --------------------------------------------- */
#header .nav-toggle{display: block;z-index: 1100;}
/* ハンバーガーメニュー本体（開いた時） ------------------------------ */    
#header .nav-links {position: fixed;inset: 0;background: #fff;padding-top: calc(var(--header-height-sp, 72px) + 80px);
display: none;flex-direction: column;align-items: flex-start;gap: 80px;overflow: auto;z-index: 900;}
#header .header_nav_list,
#header .nav-links-sns {width: 90%;margin: 0 auto;}
#header .header_nav_list {flex-direction: column;gap: 24px;list-style: none;padding: 0;}
#header .header_nav_list a {font-size: 18px;letter-spacing: 0.12em;}
#header .header_sns {gap: 24px;}
/*nav-links を表示 ------------------------------------------- */
body.nav-open #header .nav-links {display: flex;}
}

@media (max-width: 768px) {
/* ヘッダー通常時（メニュー閉じてる状態） ------------------------------ */ 
#header .header_brand {transform: translateY(20px);}
#header .header_company {font-size: 14px;}
#header .header_en {font-size: 42px;}
#header .header_nav {margin-top: 24px;}
}

@media (max-width: 560px) {
/* ヘッダー通常時（メニュー閉じてる状態） ------------------------------ */ 
#header .header_brand {transform: translateY(28px);}
#header .header_company {font-size: 12px;}
#header .header_en {font-size: 38px;}
#header .header_nav {margin-top: 24px;}
}



/* ------------------------------
   Footer
------------------------------ */
#footer {background-color: #eaeae9;color: #221714;}
#footer .footer_inner {width: 90%;margin: 0 auto;padding: 72px 0 32px;display: flex;align-items: flex-start;justify-content: space-between;}

#footer .footer_info {display: flex;flex-direction: column;gap: 12px;}
#footer .footer_info .footer_company {margin: 0;font-size: 16px;letter-spacing: 0.14em;}
#footer .footer_info .footer_en {margin: 0;margin-top: -16px;font-size: 52px;letter-spacing: 0.15em;font-weight: 700;font-family: "mozaic-hum-variable", sans-serif;font-variation-settings: 'wght' 700;}
#footer .footer_info .footer_contact p {margin: 0;font-size: 16px;letter-spacing: 0.04em;}

#footer .footer_sns {display: flex;gap: 16px;margin-top: 8px;}
#footer .footer_sns .sns_icon {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;text-decoration: none;transition: opacity 0.2s ease;}
#footer .footer_sns .sns_icon img {width: 100%;height: auto;display: block;}
#footer .sns_icon:hover {opacity: 0.7;}

#footer .footer_nav ul {list-style: none;margin: 6px 0 0;padding: 0;display: flex;gap: 48px;}
#footer .footer_nav a {text-decoration: none;font-size: 16px;color: #221714;letter-spacing: 0.1em;transition: opacity 0.2s ease;}
#footer .footer_nav a:hover {opacity: 0.7;}

#footer .copyright_wrapper { width: 90%;margin: 0 auto;padding: 0 0 32px;text-align: center;}
#footer .copyright_wrapper .copyright {color: #fff;font-size: 12px;letter-spacing: 0.14em;}

@media (max-width: 960px) {
#footer .footer_inner {flex-direction: column;gap: 32px;}
#footer .footer_info .footer_company {font-size: 14px;margin-bottom: -4px;}
#footer .footer_info .footer_en {font-size: 46px;}
#footer .footer_info .footer_contact p {font-size: 15px;}
#footer .footer_nav ul { flex-wrap: wrap;gap: 20px;}
#footer .footer_nav a {font-size: 15px;}
}
@media (max-width: 450px) {
#footer .footer_inner {flex-direction: column;gap: 32px;padding: 56px 0 24px;}
#footer .footer_info {gap: 16px;}
#footer .footer_info .footer_company {font-size: 13px;margin-bottom: -8px;}
#footer .footer_info .footer_en {font-size: 40px;}
#footer .footer_info .footer_contact p {font-size: 14px;}
#footer .footer_nav ul { flex-wrap: wrap;gap: 20px;}
#footer .footer_nav a {font-size: 14px;}
#footer .copyright_wrapper { padding: 0 0 24px;}
}