@charset "UTF-8";

:root {
 --mega-top: 0px; /* JSで更新（row2の下端の位置） */
 --header01-h: 80px;
 --header02-h: 64px;
}
@media (max-width: 1079px) {
 :root {
  --header01-h: 40px;
 }
}

header {
 position: relative;
 z-index: 6;
 background: #fff;
}

.header-row1 {
 width: 100%;
 height: var(--header01-h);
 display: flex;
 align-items: center;
 background: var(--color-white);
}

.header-row1 a img {
 position: relative;
 left: 2rem;
 height: 33px;
 object-fit: contain;
}

.header-row2 {
 background: var(--color-white);
}

.header-row2 .wrap {
 width: 100%;
 max-width: 100%;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 height: var(--header02-h);
}

.header-row2 h1 {
 position: relative;
 top: 2px;
 font-size: 0.7rem;
 font-weight: 400;
 white-space: nowrap;
 margin-left: 24px;
}

.header-logo-2 {
 margin-left: 2rem;
}

.header-logo-2 img {
 width: 240px;
}

/* sticky用スペーサー（JSで高さを入れる） */
.row2-spacer {
 height: 0;
}

/* sticky状態 */
.header-row2.is-sticky {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1001; /* ドロワーより下にしない（後述） */
 animation: slideDown 220ms ease;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@keyframes slideDown {
 from {
  transform: translateY(-100%);
 }
 to {
  transform: translateY(0);
 }
}

/* ===== PCナビ ===== */
nav {
 flex-basis: 80%;
}

nav ul:not(nav .mega-menu ul) {
 list-style: none;
 display: flex;
 justify-content: flex-end;
 height: var(--header02-h);
}

nav ul li a {
 display: flex;
 align-items: center;
 height: var(--header02-h);
 font-size: 1rem;
 line-height: var(--header02-h);
 color: var(--color-text);
 text-decoration: none;
 padding: 0 24px;
 transition: background 0.25s ease;
}

nav a:hover {
 background: var(--color-grey);
}

nav li.nav-home img {
 width: 16px;
}

.nav-contact a {
 background: var(--color-orange);
 color: var(--color-white);
}

.nav-contact a:hover {
 background: var(--color-text);
}

.mega-menu {
 position: fixed;
 left: 0;
 width: 100vw;
 top: var(--mega-top); /* JSでrow2の下端に追従 */
 background: var(--color-grey);
 display: none;
 box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
 box-sizing: border-box;
 z-index: 1;
}

/* ホバーで展開（PC） */
@media (hover: hover) {
 .has-mega:hover .mega-menu {
  display: block;
 }
}

.mega-inner {
 display: flex;
 justify-content: space-between;
 gap: 0;
 width: 1440px;
 max-width: 100%;
 margin: auto;
 padding: 56px 0 80px;
}

.mega-menu a {
 display: inline-block;
 padding: 0;
 height: 24px;
 line-height: 24px;
}

.mega-menu li a::before {
 content: "・";
}

.mega-menu .line {
 width: 1px;
 background: #ccc;
}

.mega-menu a:hover {
 background: none;
 color: var(--color-orange);
}

.mega-area-1 {
 min-width: 300px;
 padding: 0 40px;
}

.mega-area-2 {
 padding: 0 40px;
 flex-basis: 45%;
}

.mega-area-3 {
 min-width: 300px;
 padding: 0 40px;
}

.mega-menu .arrow::after {
 translate: 18px -4px;
}

.mega-menu .arrow:hover::after {
 translate: 22px -4px;
}

/* ===== ハンバーガー＆SPドロワー ===== */
.hamburger {
 display: none;
 position: fixed;
 right: 16px;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
 z-index: 99;
}
.hamburger span {
 display: block;
 width: 24px;
 height: 2px;
 background: var(--color-text);
 transition: transform 0.25s ease, opacity 0.2s ease;
 transform-origin: 50% 50%;
}

body:has(.drawer.open) .hamburger span:nth-child(1) {
 transform: translateY(7px) rotate(45deg); /* 7px = 2px(線) + 5px(gap) */
}
body:has(.drawer.open) .hamburger span:nth-child(2) {
 opacity: 0;
}
body:has(.drawer.open) .hamburger span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

.drawer {
 position: fixed;
 top: 0;
 right: -100%;
 width: 280px;
 height: 100%;
 background: #fff;
 box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
 transition: right 0.3s ease;
 z-index: 9;
 padding: 20px;
 overflow-y: auto;
}
.drawer.open {
 right: 0;
}
.overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.3);
 display: none;
 z-index: 8;
}
.overlay.active {
 display: block;
}

.drawer ul li {
 font-size: 0.88rem;
 font-weight: 600;
}
.drawer a:not(.btn a) {
 display: block;
 padding: 4px;
 border-bottom: 1px solid #ddd;
}

.drawer .btn {
 border-radius: 0;
 min-width: 100%;
 margin-top: 16px;
}

.drawer .btn-1 {
 background: var(--color-text);
}

.drawer .btn a {
 display: block;
 color: #fff;
}

.drawer .btn a:active {
 background: var(--color-grey2);
 color: var(--color-text);
}

.drawer .btn a:focus {
 background: var(--color-grey);
 color: var(--color-text);
}

.sp-accordion-toggle {
 display: flex;
 align-items: center;
 justify-content: space-between;
 cursor: pointer;
 border-bottom: 1px solid #ddd;
 padding: 4px;
}

.sp-accordion-toggle::after {
 content: "＋";
}

.sp-accordion-toggle.active::after {
 content: "－";
}

.sp-sub {
 display: none;
 padding-left: 14px;
}

.sp-sub.open {
 display: block;
}

/* ===== レスポンシブ ===== */
@media (min-width: 1080px) {
 .header-logo-sp {
  display: none;
 }
}

@media (max-width: 1079px) {
 .header-row1 {
  display: none;
 }
 .header-logo-sp {
  height: 32px;
  display: flex;
  align-items: center;
 }
 .header-logo-sp a {
  position: relative;
  top: 4px;
  left: 1rem;
  width: 300px;
  max-width: 70vw;
 }

 .header-row2 h1 {
  margin-left: 1rem;
  font-size: 0.64rem;
 }

 .header-logo-2 {
  margin-left: 1rem;
  width: 160px;
 }

 .hamburger {
  top: 16px;
 }

 nav {
  display: none;
 }
 .hamburger {
  display: flex;
 }

 /* メガメニューはSPでは使わない（ハンバーガー側で） */
 .mega-menu {
  display: none !important;
 }
 .header-row2 .nav-container {
  height: 56px;
 }
}

main {
 min-height: calc(100vh - var(--header01-h) - var(--header02-h));
}
@media (max-width: 767px) {
 main {
  min-height: calc(100vh - var(--header01-h) - var(--header02-h));
 }
}

/* ===== パンくずリスト ===== */
.breadcrumb {
 font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", sans-serif;
 line-height: 1;
 padding: 8px 0;
 background: var(--color-grey);
 border-bottom: 1px solid #ccc;
}

.breadcrumb__list {
 margin: 0;
 padding: 4px 0;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 16px;
 font-size: 0.8rem;
}

.breadcrumb__item {
 display: flex;
 align-items: center;
 white-space: nowrap;
 gap: 16px;
}

.breadcrumb__list img {
 min-width: 16px;
}

.breadcrumb__list a:hover {
 color: var(--color-orange);
}

.breadcrumb__item + .breadcrumb__item:not(:last-child)::before {
 content: "";
 width: 8px;
 height: 8px;
 transform: rotate(-45deg);
 border-right: 1px solid #6b7280;
 border-bottom: 1px solid #6b7280;
 box-sizing: border-box;
}

@media (max-width: 480px) {
 .breadcrumb__list {
  gap: 4px;
  flex-wrap: wrap;
 }
 .breadcrumb__link,
 .breadcrumb__label {
  padding-left: 8px;
  padding-right: 8px;
 }
 .breadcrumb__item + .breadcrumb__item::before {
  width: 6px;
  height: 6px;
  margin-left: 4px;
  margin-right: 4px;
 }
}

/* ヘッダーの高さで隠れるのを防ぐ */
[id] {
 scroll-margin-top: 132px; /* SP */
}

@media (min-width: 768px) {
 [id] {
  scroll-margin-top: 80px; /* PC */
 }
}