/* =============================================
   CUSTOM HEADER
   配置場所: child-theme/assets/css/custom.css
   または WordPress 管理画面 > 追加 CSS
   ============================================= */

/* --- Reset for header scope --- */
#custom-header *,
#custom-header *::before,
#custom-header *::after {
  box-sizing: border-box;
}
body{
    background: #F5F5F5;
}
/* --- Header base --- */
#custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background: #F5F5F5;
  z-index: 9999;
}

.custom-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0;
}

/* --- Logo / Site name (左端) --- */
.custom-header__logo {
  padding-left: 24px;
  flex-shrink: 0;
  display: none;
}

.custom-header__logo a {
  display: none;
}

/* --- PC Navigation (右側) --- */
.custom-header__nav {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
}

.custom-header__nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-header__nav-list > li {
  height: 100%;
  display: flex;
  align-items: center;
}

.custom-header__nav-list > li > a {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #2E2E2E;
  text-decoration: none;
  letter-spacing: 0.6px;
  line-height: normal;
  font-style: normal;
  padding: 0 26px;
  display: flex;
  align-items: center;
  height: 100%;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

.custom-header__nav-list > li > a:hover {
  opacity: 0.45;
}

/* --- Instagram icon (右端) --- */
.custom-header__instagram > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px !important;
  height: 65px;
  padding: 0 !important;
  background: rgba(217, 217, 217, 0.3);
  transition: opacity 0.25s ease;
}

.custom-header__instagram > a:hover {
  opacity: 0.45;
}

/* --- Hamburger button (SP専用 / PC非表示) --- */
.custom-header__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 65px;
  height: 65px;
  min-width: 65px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.hamburger-line {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* =============================================
   SP FULL SCREEN MENU
   ============================================= */

.sp-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.sp-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* 閉じるボタン */
.sp-menu__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.25s ease;
}

.sp-menu__close:hover {
  opacity: 0.5;
}

/* メニュー内コンテンツ */
.sp-menu__inner {
  text-align: center;
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* サイト名 / 人名 */
.sp-menu__name {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 28px;
  font-style: normal;
  color: #2E2E2E;
  letter-spacing: 1.12px;
  line-height: normal;
  margin: 0;
}

/* ナビリスト */
.sp-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.sp-menu__list li a {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 15px;
  font-style: normal;
  color: #2E2E2E;
  text-decoration: none;
  letter-spacing: 0.6px;
  line-height: normal;
  text-align: center;
  display: block;
  transition: opacity 0.25s ease;
}

.sp-menu__list li a:hover {
  opacity: 0.45;
}

/* SP メニュー下部: Instagram + クレジット */
.sp-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sp-menu__instagram {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity 0.25s ease;
}

.sp-menu__instagram:hover {
  opacity: 0.45;
}

.sp-menu__credit {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 10px;
  font-style: normal;
  color: #2E2E2E;
  letter-spacing: 0.4px;
  line-height: normal;
  margin: 0;
}

/* =============================================
   BODY OFFSET (固定ヘッダー分の余白)
   ============================================= */

body {
  padding-top: 65px !important;
}

/* =============================================
   RESPONSIVE: SP (768px以下)
   ============================================= */

@media (max-width: 768px) {
  #custom-header {
    background: transparent;
    height: auto;
    position: fixed;
    pointer-events: none;
  }

  .custom-header__hamburger {
    pointer-events: auto;
  }

  .custom-header__nav {
    display: none;
  }

  .custom-header__hamburger {
    display: flex;
    margin-left: auto;
  }

  body {
    padding-top: 0 !important;
  }

  body.sp-menu-open {
    overflow: hidden;
  }
}

/* =============================================
   SWELL デフォルトヘッダーの非表示
   SWELLのヘッダーを完全に置き換える場合は
   以下のコメントアウトを解除してください
   ============================================= */

/*
.l-header {
  display: none !important;
}
*/

/* =============================================
   CUSTOM FOOTER
   ============================================= */

#custom-footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #E4E0E7;
  box-sizing: border-box;
}

/* --- PC: Grid 3行 × 2列
   [① name        ①        ]
   [② nav         ②        ]
   [③ instagram   ④ credit ]
   ------------------------------------------- */
.custom-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  height: 290px;
  padding: 40px 80px 20px;
  box-sizing: border-box;
}

/* ① Kagura Keiko: 左上 (col1, row1) */
.custom-footer__name {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 28px;
  font-style: normal;
  color: #2E2E2E;
  letter-spacing: 1.12px;
  line-height: normal;
  margin: 0;
}

/* ② nav: 左列のみ (col1, row2) */
.custom-footer__nav {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.custom-footer__nav-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 52px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-footer__nav-list li a {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 15px;
  font-style: normal;
  color: #2E2E2E;
  text-decoration: none;
  letter-spacing: 0.6px;
  line-height: normal;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

.custom-footer__nav-list li a:hover {
  opacity: 0.45;
}

/* ③ Instagram: 左下 (col1, row3) */
.custom-footer__instagram {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity 0.25s ease;
}

.custom-footer__instagram:hover {
  opacity: 0.45;
}

/* ④ Produce By nico: 右下 (col2, row3) */
.custom-footer__credit {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 28px;
  font-style: normal;
  color: #2E2E2E;
  letter-spacing: 1.12px;
  line-height: normal;
  margin: 0;
}

.custom-footer__credit a {
  color: inherit;
  text-decoration: none;
}

/* =============================================
   FOOTER RESPONSIVE: SP (768px以下)
   SP配置:
   [① name       ③ instagram ]  row1
   [② Home                   ]  row2
   [② Profile                ]
   [② Works                  ]
   [② Contact   ④ credit     ]  row3
   ============================================= */

@media (max-width: 768px) {
  .custom-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    height: 201px;
    padding: 28px 24px;
    box-sizing: border-box;
  }

  /* ① Kagura Keiko: 左上 */
  .custom-footer__name {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-size: 20px;
  }

  /* ③ Instagram: 右上 */
  .custom-footer__instagram {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  /* ② nav: 左中〜左下 */
  .custom-footer__nav {
    grid-column: 1;
    grid-row: 2 / 4;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 16px;
  }

  .custom-footer__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ④ Produce By nico: 右下 */
  .custom-footer__credit {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    font-size: 15px;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }
}