/* ========================================
   TKGene Fonts
======================================== */

:root {
  --font-body: "Zen Kaku Gothic New", sans-serif;
  --font-heading: "Shippori Mincho", serif;
  --font-en: "Jost", sans-serif;
  --font-nav: "Cormorant Garamond", serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

/* ========================================
   TKGene Header Navigation
======================================== */

/* ----------------------------------------
   Navigation / 全デバイス共通
---------------------------------------- */

#header .c-gnav {
  flex-direction: column !important;
  width: 80px;
  align-items: stretch;
  gap: 0;
}

#header .c-gnav > li {
  margin: 0 !important;
}

/* SERVICE / PROFILE / CONTACT */
#header .c-gnav > li:nth-child(-n+3) > a {
  position: relative;

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

  height: 16px;
  padding: 0;

  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  text-align: center;
}

/* PROFILE / CONTACT */
#header .c-gnav > li:nth-child(2),
#header .c-gnav > li:nth-child(3) {
  margin-top: 16px !important;
}

/* SERVICE / PROFILE */
#header .c-gnav > li:nth-child(1) > a,
#header .c-gnav > li:nth-child(2) > a {
  letter-spacing: 0.16em;
}

/* CONTACT */
#header .c-gnav > li:nth-child(3) > a {
  letter-spacing: 0.04em;
  transform: translateX(-1px);
}

/* Instagram */
#header .c-gnav > li.nav-instagram {
  width: 24px;
  height: 24px;

  margin-top: 24px !important;
  margin-left: auto !important;

  align-self: flex-end;
  transform: translateX(-4px);
}

#header .nav-instagram > a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 24px;
  height: 24px;
  padding: 0;
}


/* ========================================
   HEADER / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  /* ヘッダー全体 */
  #header .l-header__inner {
    width: 100%;
    max-width: none;
    box-sizing: border-box;

    padding-top: 40px;
    padding-right: 160px;
    padding-left: 160px;

    align-items: flex-start;
  }

  /* ナビを右側へ */
  #header .l-header__gnav {
    margin-left: auto;
  }

  #header .c-gnav {
    display: flex;
  }

  /* ロゴ周りのSWELL標準余白をリセット */
  #header .l-header__logo,
  #header .c-headLogo,
  #header .c-headLogo__link {
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .l-header__logo {
    align-self: flex-start;
  }

  #header .c-headLogo__link {
    display: block;
  }

}


/* ========================================
   HEADER / TAB・SP 共通
   ～1199px
======================================== */

@media (max-width: 1199px) {

  #header .l-header__inner {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
  }

  /* ロゴ */
  #header .l-header__logo {
    position: absolute !important;
    top: 40px;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 2;
  }

  #header .c-headLogo,
  #header .c-headLogo__link {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #header .c-headLogo__link {
    line-height: 0;
  }

  /* PC型ナビを表示 */
  #header .l-header__gnav {
    display: block !important;

    position: absolute !important;
    top: 40px;

    width: 80px;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* ハンバーガーメニューを非表示 */
  #header .l-header__menuBtn {
    display: none !important;
  }

  #header .c-gnav {
    display: flex !important;
  }

}


/* ========================================
   HEADER / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  #header .l-header__inner {
    height: auto !important;
    min-height: 0 !important;

    padding: 40px 44px 0 !important;

    box-sizing: border-box;
    align-items: flex-start !important;
  }

  #header .l-header__logo {
    left: 44px;
  }

  #header .c-headLogo__img {
    width: auto;
    height: 60px;
    margin: 0;
  }

  #header .l-header__gnav {
    right: 44px;
  }

}


/* ========================================
   HEADER / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  #header .l-header__inner {
    padding: 0 !important;
  }

  #header .l-header__logo {
    left: 43px;
  }

  #header .c-headLogo,
  #header .c-headLogo__link {
    width: auto !important;
  }

  #header .c-headLogo__img {
    width: auto !important;
    height: 44px !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0;
  }

  #header .l-header__gnav {
    right: 43px;
    z-index: 2;
  }

}

/* 通常ヘッダー */
	#header:not(.-transparent) .c-gnav > li > a {
  color: #111111;
}


/* HOME透過ヘッダー */
.home #header.-transparent .c-gnav > li > a {
  color: #f7f7f7;
}

/* SERVICE / PROFILE / CONTACT 透過ヘッダー */
body:has(.lower-hero) #header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  background: transparent;
  box-shadow: none;
  border-bottom: 0;

  z-index: 100;
}

/* Heroをページ上端へ寄せる */
body:has(.lower-hero) #content {
  padding-top: 0;
}

/* Hero前の本文標準余白をなくす */
body:has(.lower-hero) .l-mainContent__inner > .post_content {
  margin-top: 0;
}

/* ナビを白に */
body:has(.lower-hero) #header .c-gnav > li > a {
  color: #f7f7f7;
}

/* SERVICE / PROFILE / CONTACT：Hero上のロゴを白に */
body:has(.lower-hero) #header .c-headLogo__img {
  filter: brightness(0) invert(1);
}

/* ナビ・Instagram共通トランジション */
#header .c-gnav > li > a {
  transition: color 0.3s ease;
}

/* SERVICE / PROFILE / CONTACT：現在ページ */
body:has(.lower-hero) #header .c-gnav > li.current-menu-item > a,
body:has(.lower-hero) #header .c-gnav > li.current_page_item > a,
body:has(.lower-hero) #header .c-gnav > li > a[aria-current="page"] {
  color: rgba(247, 247, 247, 0.5) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* hover */
#header .c-gnav > li > a:hover,
#header .c-gnav > li:hover > a {
  color: #96abbb !important;
  background: transparent !important;
}


/* Instagram：文字を非表示 */
#header .nav-instagram > a .ttl {
  display: none;
}


/* Instagramアイコン */
#header .nav-instagram > a::before {
  content: "\f16d";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
}

/* ナビのクリック・タップ領域を少し拡張 */
#header .c-gnav > li:nth-child(-n+3) > a::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  bottom: -4px;
  left: 0;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}


/* Instagramのクリック・タップ領域を拡張 */
#header .nav-instagram > a::after {
  content: "";
  position: absolute;
  inset: -6px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}


/* ========================================
   TKGene Fixed Header
======================================== */

/* ========================================
   Fixed Header / PC・TAB 共通
   960px～
======================================== */

@media (min-width: 960px) {

  /* 追従ヘッダー全体 */
  #fix_header {
    --swl-fix_headerH: 80px;

    height: 80px !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* SWELL標準の追従ヘッダー背景 */
  #fix_header::before {
    background: rgba(102, 102, 102, 0.9) !important;
    opacity: 1 !important;
  }

  /* Inner */
  #fix_header .l-fixHeader__inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: none !important;
    height: 80px !important;

    margin: 0 !important;

    box-sizing: border-box;

    background: transparent !important;
  }

  /* Logo */
  #fix_header .l-fixHeader__logo {
    flex: 0 0 auto !important;

    width: 163px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(3px) !important;
  }

  #fix_header .c-headLogo,
  #fix_header .c-headLogo__link {
    display: block !important;

    width: 163px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0;
  }

  #fix_header .c-headLogo__img {
    display: block;

    width: 163px !important;
    height: 50px !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  /* Navigation */
  #fix_header .l-fixHeader__gnav {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 50px !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  #fix_header .c-gnav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;

    width: auto !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 24px !important;
  }

  #fix_header .c-gnav > li {
    width: auto !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

  /* SERVICE / PROFILE / CONTACT */
  #fix_header .c-gnav > li:nth-child(-n+3) > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: auto !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f7f7f7 !important;

    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    background: transparent !important;
    box-shadow: none !important;

    transform: none !important;

    transition: color 0.3s ease;
  }

  /* SERVICE / PROFILE */
  #fix_header .c-gnav > li:nth-child(1) > a,
  #fix_header .c-gnav > li:nth-child(2) > a {
    letter-spacing: 2.56px;
  }

  /* CONTACT */
  #fix_header .c-gnav > li:nth-child(3) > a {
    letter-spacing: 0.32px;
  }

  /* Instagram */
  #fix_header .nav-instagram {
    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

  #fix_header .nav-instagram > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f7f7f7 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  #fix_header .nav-instagram > a .ttl {
    display: none !important;
  }

  #fix_header .nav-instagram > a::before {
    content: "\f16d";

    display: block;

    font-family: "Font Awesome 6 Brands";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
  }

}


/* ========================================
   Fixed Header / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  /* PC固有：左右160px */
  #fix_header .l-fixHeader__inner {
    padding: 15px 160px !important;
  }

  /* PC固有の補正 */
  #fix_header .c-gnav > li {
    align-self: auto !important;
  }

  #fix_header .c-gnav > li:nth-child(-n+3) > a {
    font-style: normal;
    text-align: center;
    text-decoration: none !important;
  }

  #fix_header .nav-instagram > a {
    transition: color 0.3s ease;
  }

  /* Hover */
  #fix_header .c-gnav > li:nth-child(-n+3) > a:hover,
  #fix_header .nav-instagram > a:hover {
    color: #96abbb !important;
  }

}


/* ========================================
   Fixed Header / TAB
   960px～1199px
======================================== */

@media (min-width: 960px) and (max-width: 1199px) {

  /* TAB固有：左右44px */
  #fix_header .l-fixHeader__inner {
    padding: 15px 44px !important;
  }

  /* TAB側で明示していた継承色を維持 */
  #fix_header .nav-instagram > a::before {
    color: inherit;
  }

}


/* ========================================
   SWELL Mobile Header Parts OFF
   ～959px
======================================== */

@media (max-width: 959px) {

  /* PC用追従ヘッダーは使わない */
  #fix_header {
    display: none !important;
  }

  /* SWELL標準のスマホ用横ナビを非表示 */
  #header .l-header__spNav,
  #header .p-spHeadMenu {
    display: none !important;
  }

}


/* ========================================
   Fixed Header / TAB・SP 共通
   ～959px
======================================== */

@media (max-width: 959px) {

  /* 追従ヘッダー全体：共通 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    background: rgba(102, 102, 102, 0.9) !important;

    border: 0 !important;
    box-shadow: none !important;

    z-index: 1000 !important;

    transform: translateY(0) !important;
    transition:
      transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
  }

  /* Inner：共通 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__inner {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    box-sizing: border-box;
  }

  /* Logo：共通 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__logo {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo,
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo__link {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo__img {
    display: block;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    filter: brightness(0) invert(1);
  }

  /* ハンバーガー非表示 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__menuBtn {
    display: none !important;
  }

  /* Navigation：共通 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__gnav {
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 24px !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li {
    flex: 0 0 auto !important;

    width: auto !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: auto !important;

    transform: none !important;
  }

  /* SERVICE / PROFILE / CONTACT */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li:nth-child(-n+3) > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: auto !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f7f7f7 !important;

    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    transform: none !important;
  }

  /* SERVICE / PROFILE */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li:nth-child(1) > a,
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li:nth-child(2) > a {
    letter-spacing: 2.56px;
  }

  /* CONTACT */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li:nth-child(3) > a {
    letter-spacing: 0.32px;
  }

  /* Instagram */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .nav-instagram {
    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .nav-instagram > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f7f7f7 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

}


/* ========================================
   Fixed Header / TAB
   768px～959px
======================================== */

@media (min-width: 768px) and (max-width: 959px) {

  /* 追従ヘッダー全体 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] {
    --swl-headerH: 80px;
    height: 80px !important;
  }

  /* Inner */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    height: 80px !important;

    padding: 15px 44px !important;
  }

  /* Logo */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__logo {
    flex: 0 0 auto !important;

    width: 163px !important;
    height: 50px !important;

    transform: translateY(3px) !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo,
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo__link {
    width: 163px !important;
    height: 50px !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo__img {
    width: 163px !important;
    height: 50px !important;

    object-fit: contain;
  }

  /* Navigation */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__gnav {
    position: absolute !important;

    top: 15px !important;
    right: 44px !important;

    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 50px !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav {
    justify-content: flex-end !important;
    width: max-content !important;
  }

  /* TAB側で明示していたSWELL装飾リセット */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li:nth-child(-n+3) > a {
    background: transparent !important;
    box-shadow: none !important;
  }

}


/* ========================================
   Fixed Header / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  /* 追従ヘッダー全体 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] {
    --swl-headerH: 101px;
    height: 101px !important;
  }

  /* Inner
     18 + 35 + 14 + 24 + 10 = 101px */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__inner {
    display: grid !important;

    grid-template-columns: 1fr !important;
    grid-template-rows: 35px 24px !important;

    justify-items: center !important;
    align-items: center !important;
    align-content: start !important;

    row-gap: 14px !important;

    height: 101px !important;

    padding-top: 18px !important;
    padding-right: clamp(28px, calc((100vw - 304px) / 2), 43px) !important;
    padding-bottom: 10px !important;
    padding-left: clamp(28px, calc((100vw - 304px) / 2), 43px) !important;
  }

  /* Logo */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__logo {
    grid-row: 1 !important;

    width: auto !important;
    height: 35px !important;

    transform: none !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo,
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo__link {
    width: auto !important;
    height: 35px !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-headLogo__img {
    width: auto !important;
    height: 35px !important;
  }

  /* Navigation */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .l-header__gnav {
    position: static !important;

    grid-row: 2 !important;

    display: block !important;

    width: 100% !important;
    height: 24px !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav {
    justify-content: center !important;
    width: 100% !important;
  }

}


/* ========================================
   Fixed Header / SP 360px
======================================== */

@media (max-width: 374px) {

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav {
    gap: 16px !important;
  }

}


/* ========================================
   Fixed Header / Scroll Direction
======================================== */

/* PC / TAB 960px～ */
#fix_header {
  transform: translateY(0) !important;

  transition:
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) !important;

  will-change: transform;
}

html.tkg-scroll-down #fix_header {
  transform: translateY(-100%) !important;
}


/* TAB / SP ～959px */
@media (max-width: 959px) {

  html[data-scrolled="true"].tkg-scroll-down
  #body_wrap:not(.home)
  #header[data-spfix="1"] {
    transform: translateY(-100%) !important;
  }

}


/* ========================================
   Fixed Header / Hover
   ～1199px
======================================== */


/* ----------------------------------------
   TAB 960px～1199px
   #fix_header
---------------------------------------- */

@media (min-width: 960px) and (max-width: 1199px) {

  /* SERVICE / PROFILE / CONTACT + Instagram 共通 */
  #fix_header .c-gnav > li > a,
  #fix_header .nav-instagram > a {
    transition:
      color 0.3s ease,
      background-color 0.3s ease !important;
  }

  #fix_header .c-gnav > li > a:hover,
  #fix_header .nav-instagram > a:hover {
    color: #96abbb !important;
    background: transparent !important;
  }

  /* SWELL側の背景・装飾を消す */
  #fix_header .nav-instagram > a::after {
    display: none !important;
    content: none !important;
  }

}


/* ----------------------------------------
   TAB / SP ～959px
   #header
---------------------------------------- */

@media (max-width: 959px) {

  /* SERVICE / PROFILE / CONTACT + Instagram 共通 */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li > a,
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .nav-instagram > a {
    transition:
      color 0.3s ease,
      background-color 0.3s ease !important;
  }

  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .c-gnav > li > a:hover,
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .nav-instagram > a:hover {
    color: #96abbb !important;
    background: transparent !important;
  }

  /* SWELL側の背景・装飾を消す */
  html[data-scrolled="true"]
  #body_wrap:not(.home)
  #header[data-spfix="1"] .nav-instagram > a::after {
    display: none !important;
    content: none !important;
  }

}


/* =========================
   LOWER PAGE
========================= */

/* 下層Heroページ：標準タイトル・パンくずを非表示 */
body:has(.lower-hero) .c-pageTitle,
body:has(.lower-hero) .p-breadcrumb {
  display: none;
}

/* ========================================
   LOWER PAGE Hero 共通
======================================== */

.lower-hero {
  height: 800px;
  position: relative;
}

.lower-hero > .swell-block-fullWide__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Hero copy layout */
.lower-hero__inner {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block !important;
}

/* 英語タイトル：Heroの天地中央 */
.lower-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: max-content;
  max-width: calc(100% - 80px);
  margin: 0 !important;

  font-family: var(--font-nav);
  font-size: 58px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1.16px;

  color: #f7f7f7;
  text-align: center;
  white-space: nowrap;
}

/* PC：英語タイトルの改行を非表示 */
@media (min-width: 1200px) {
  .lower-hero__title br {
    display: none;
  }
}

/* 日本語コピー */
.lower-hero__jp {
  position: absolute;
  top: calc(50% + 94.5px);
  left: 50%;
  transform: translateX(-50%);

  width: 100%;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  margin: 0 !important;
}

/* 日本語リード */
.lower-hero__lead {
  width: 100%;
  margin: 0 !important;

  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.48px;

  color: #f7f7f7;
  text-align: center !important;

  white-space: nowrap;
}

/* 小本文 */
.lower-hero__body {
  width: 100%;
  margin: 0 !important;

  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.32px;

  color: #f7f7f7;
  text-align: center !important;

  white-space: nowrap;
}

/* PC・TAB：leadは1行、bodyは2行 */
@media (min-width: 768px) {

  /* leadのShift + EnterをPC・TABでは無効化 */
  .lower-hero__lead br {
    display: none;
  }

  /* bodyの2個目のShift + EnterだけPC・TABでは無効化 */
  .lower-hero__body br:nth-of-type(2) {
    display: none;
  }
}

	/* CONTACT：PCではbodyを2行にする */
@media (min-width: 1200px) {

  .contact-hero .lower-hero__body br:nth-of-type(1) {
    display: none;
  }

}

/* Hero overlay */
.lower-hero.has-bg-img::before {
  background: linear-gradient(
    180deg,
    rgba(85, 85, 85, 0) 0%,
    #555 100%
  );
  opacity: 1;
  mix-blend-mode: multiply;
}


/* ========================================
   LOWER PAGE Hero / Background Position
======================================== */

/* CONTACT：TAB / SP共通トリミング */
@media (max-width: 1199px) {

  .contact-hero {
    background-size: auto 135% !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

}



/* ----------------------------------------
   TAB
   768px～1199px

   1200pxとの境界で画像サイズを変えない。
   1440px基準の背景サイズを維持し、
   画面幅だけを狭くして左右をトリミングする。
---------------------------------------- */

@media (min-width: 768px) and (max-width: 1199px) {

  /* SERVICE */
  .service-hero {
    background-size: 1440px auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }


  /* PROFILE */
  .profile-hero {
    background-size: 1440px auto !important;
    background-position: center calc(50% + 80px) !important;
    background-repeat: no-repeat !important;
  }



}


/* ----------------------------------------
   PC
   1200px～

   1200～1440px：
   1440px基準の画像サイズを維持

   1440px超：
   画面幅に合わせて中央基準で拡大
---------------------------------------- */

@media (min-width: 1200px) {

  /* SERVICE */
  .service-hero {
    background-size: max(1440px, 100vw) auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }


  /* PROFILE */
  .profile-hero {
    background-size: max(1440px, 100vw) auto !important;
    background-position: center calc(50% + 80px) !important;
    background-repeat: no-repeat !important;
  }


  /* CONTACT */
  .contact-hero {
    background-size: auto max(1080px, 75vw) !important;
    background-position: center calc(50% - 140px) !important;
    background-repeat: no-repeat !important;
  }

}


/* ----------------------------------------
   SP
   ～767px

   SERVICE / PROFILE：
   Figmaの1116px幅画像を基準に表示

   CONTACT：
   現在のSPトリミングを維持
---------------------------------------- */

@media (max-width: 767px) {

  /* SERVICE
     1116px幅 / 左右中央 / 天地中央 */
  .service-hero {
    background-size: 1116px auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }


  /* PROFILE
     1116px幅 / 左右中央 / 上基準 */
  .profile-hero {
    background-size: 1116px auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }



}


/* ========================================
   LOWER PAGE Hero / Background Position ここまで
======================================== */


/* ========================================
   LOWER PAGE Hero Animation
======================================== */


/* ----------------------------------------
   SERVICE Hero：光エフェクトなし
---------------------------------------- */

.page-id-148 .lower-hero.subhero::after {
  content: none !important;
  display: none !important;
}


/* ----------------------------------------
   SERVICE / PROFILE / CONTACT 共通
   Animation準備中
   JSが動いた場合だけ一度非表示にする
---------------------------------------- */

:is(.page-id-148, .page-id-150, .page-id-152)
.lower-hero.subhero.hero-anim-prep
.subhero-en,

:is(.page-id-148, .page-id-150, .page-id-152)
.lower-hero.subhero.hero-anim-prep
.subhero-ja {
  opacity: 0;
}


/* ----------------------------------------
   SERVICE / PROFILE / CONTACT 共通
   English
   1文字ずつ静かにFade
---------------------------------------- */

:is(.page-id-148, .page-id-150, .page-id-152)
.lower-hero.subhero.hero-anim-run
.subhero-en {
  opacity: 1;
}


:is(.page-id-148, .page-id-150, .page-id-152)
.lower-hero.subhero
.subhero-char {
  opacity: 0;
}


:is(.page-id-148, .page-id-150, .page-id-152)
.lower-hero.subhero.hero-anim-run
.subhero-char {
  animation:
    subheroCharFade
    0.40s
    ease-out
    var(--char-delay)
    both;
}


/* ----------------------------------------
   SERVICE / PROFILE / CONTACT 共通
   日本語コピー
   英文の終盤からゆっくりFade
---------------------------------------- */

:is(.page-id-148, .page-id-150, .page-id-152)
.lower-hero.subhero.hero-anim-run
.subhero-ja {
  animation:
    subheroJaFade
    1.20s
    ease-in-out
    var(--ja-delay, 0.90s)
    both;
}


/* ----------------------------------------
   English：1文字Fade
---------------------------------------- */

@keyframes subheroCharFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ----------------------------------------
   日本語コピー：Fadeのみ
---------------------------------------- */

@keyframes subheroJaFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ----------------------------------------
   動きを減らす設定
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  :is(.page-id-148, .page-id-150, .page-id-152)
  .lower-hero.subhero
  .subhero-en,

  :is(.page-id-148, .page-id-150, .page-id-152)
  .lower-hero.subhero
  .subhero-ja,

  :is(.page-id-148, .page-id-150, .page-id-152)
  .lower-hero.subhero
  .subhero-char {
    opacity: 1 !important;
    animation: none !important;
  }

}


/* ========================================
   LOWER PAGE Hero Animation ここまで
======================================== */


/* ========================================
   LOWER PAGE Hero SP
======================================== */
@media (max-width: 767px) {

  /* Hero全体 */
  .lower-hero {
    height: 620px;
  }

	
	  /* ----------------------------------------
     SERVICE / SP Background
     Figma：1116 × 620px / left -260px
  ---------------------------------------- */

  .page-id-148 .lower-hero {
    background-size: auto 120.027% !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
  }


  /* ----------------------------------------
     PROFILE / SP Background
     Figma：1116 × 620px / left -175px
     上端基準
  ---------------------------------------- */

  .page-id-150 .lower-hero {
    background-size: auto 120.027% !important;
    background-position: 50% 0% !important;
    background-repeat: no-repeat !important;
  }
	
	
	/* 英語タイトル */
.lower-hero__title {
  width: 360px;
  max-width: calc(100% - 30px);

  font-size: 38px;
  letter-spacing: 0.76px;

  white-space: normal;
}

  /* 日本語コピー全体
     英語タイトル下端 → 32px
  */
	.lower-hero__jp {
  top: calc(50% + 76px);

  width: 360px;
  max-width: calc(100% - 30px);

  gap: 16px;
}

	
	/* PROFILE：英文が1行のためSERVICEと間隔を揃える */
.profile-hero .lower-hero__jp {
  top: calc(50% + 56px);
}
	
/* 日本語リード */
.lower-hero__lead {
  font-size: 17px;
  letter-spacing: 0.34px;
}

/* 小本文 */
.lower-hero__body {
  font-size: 14px;
  letter-spacing: 0.28px;
}
	
	/* CONTACT：SPタイトル幅 */
.contact-hero .lower-hero__title {
  width: 293px;
  max-width: 100%;
}


/* CONTACT：SPコピー幅 */
.contact-hero .lower-hero__lead {
  width: 245px;
  max-width: 100%;
}

.contact-hero .lower-hero__body {
  width: 334px;
  max-width: 100%;
}
	
}


/* ========================================
   LOWER PAGE Hero SP ここまで
======================================== */


/* ========================================
   CONTACT Hero / Responsive Adjustments
======================================== */


/* ----------------------------------------
   Title Line Break
   PC / TABでは改行しない
---------------------------------------- */

.contact-hero .lower-hero__title br {
  display: none;
}


/* ----------------------------------------
   Wide PC
   1440pxを超えたら画像を画面幅に追従
---------------------------------------- */

@media (min-width: 1441px) {

  .contact-hero {
    background-size: cover !important;
    background-position: center bottom !important;
  }

}


/* ----------------------------------------
   SP
   "Have something / in mind?" の2行
---------------------------------------- */

@media (max-width: 767px) {

  .contact-hero .lower-hero__title br {
    display: block;
  }

}


/* ========================================
   CONTACT Hero / Responsive Adjustments ここまで
======================================== */


/* ========================================
   SERVICE Contents
======================================== */

/* SERVICE本文を画面幅いっぱいで扱う */
.page-id-148 .service-stack {
  position: relative;

  width: 100vw;
  max-width: none;

  margin-top: 64px !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  padding: 0 !important;

  background: #f7f7f7;
}


/* SERVICE項目全体 */
.page-id-148 .service-items {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}


/* 各SERVICE項目 */
.page-id-148 .service-item {
  position: relative;
  isolation: isolate;

  width: 100%;

  margin: 0 !important;
  box-sizing: border-box;
}


/* rowはdisplay文字より前面 */
.page-id-148 .service-row {
  position: relative;
  z-index: 2;

  box-sizing: border-box;

  margin: 0 auto !important;
}


/* ----------------------------------------
   Title 共通リセット
---------------------------------------- */

.page-id-148 .service-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #111111;

  font-family: var(--font-nav);
  font-style: normal;
  font-weight: 400;
  line-height: 1;

  text-align: left;
}


/* SWELLの見出し装飾を解除 */
.page-id-148 .service-title::before,
.page-id-148 .service-title::after {
  content: none !important;
  display: none !important;
}


/* ----------------------------------------
   Content 共通
---------------------------------------- */

.page-id-148 .service-content {
  margin: 0 !important;
  padding: 0 !important;
}

.page-id-148 .service-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  gap: 16px;
}


/* lead */
.page-id-148 .service-lead {
  width: 100%;

  margin: 0 !important;

  color: #111111;

  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;

  text-align: left;
}


/* body */
.page-id-148 .service-body {
  width: 100%;

  margin: 0 !important;

  color: #111111;

  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;

  text-align: left;
}


/* meta */
.page-id-148 .service-meta {
  width: 100%;

  margin: 0 !important;

  color: #111111;

  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;

  text-align: left;
}


/* ----------------------------------------
   Display共通
---------------------------------------- */

.page-id-148 .service-display {
  position: absolute;
  z-index: 1;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(17, 17, 17, 0.07);

  font-family: var(--font-en);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;

  text-align: right;
  text-transform: uppercase;

  pointer-events: none;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}


/* Design：SHAPE */
.page-id-148 .service-item--design .service-display span {
  color: rgba(149, 142, 168, 0.25);
}

/* Photography：LIGHT */
.page-id-148 .service-item--photography .service-display span {
  color: rgba(150, 171, 187, 0.30);
}


/* Video：MOVING */
.page-id-148 .service-item--video .service-display span {
  color: rgba(215, 198, 166, 0.35);
}


/* Web：CLEAR */
.page-id-148 .service-item--web .service-display span {
  color: rgba(204, 218, 194, 0.48);
}


/* Social：ON */
.page-id-148 .service-item--social .service-display span {
  color: rgba(227, 216, 215, 0.60);
}

/* ========================================
   SERVICE Contents / PC・TAB 共通
   768px～
======================================== */

@media (min-width: 768px) {

  .page-id-148 .service-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }

  .page-id-148 .service-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 544px !important;
  }

  .page-id-148 .service-title {
    font-size: 36px;
    letter-spacing: 1.8px;
  }

  .page-id-148 .service-lead {
    font-size: 18px;
    letter-spacing: 0.9px;
  }

  .page-id-148 .service-body {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.32px;
  }

  .page-id-148 .service-meta {
    font-size: 13px;
    letter-spacing: 0.26px;
  }

}


/* ========================================
   SERVICE Contents / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  /* item間 */
  .page-id-148 .service-items {
    gap: 136px;
  }


  /* 1項目 */
  .page-id-148 .service-item {
    height: 158px;
  }


  /* PC：1120pxのrowを画面中央へ */

  .page-id-148 .service-row {
    width: 1120px !important;
    max-width: 1120px !important;
    height: 158px;

    gap: 32px !important;
  }

  .page-id-148 .service-title {
    flex: 0 0 256px !important;
    width: 256px !important;
    max-width: 256px !important;
  }

  .page-id-148 .service-content {
    flex: 0 0 544px !important;

    width: 544px !important;
    height: 158px;

    gap: 32px;
  }


  /*
   * PC display
   *
   * 1440px時：
   * item上端から約88pxの位置になるよう、
   * 141pxの文字に対してbottom:-71px。
   *
   * 右端は常に40px。
   * 幅不足時は単語単位で上方向へ折り返す。
   */
  .page-id-148 .service-display {
  right: 40px;

bottom: -106px;

  width: max-content;
  max-width: calc(100% - 80px);

  font-size: 140px;
}
	
}


/* ========================================
   SERVICE Contents / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* item間 */
  .page-id-148 .service-items {
    gap: 120px;
  }


  /* TAB：1項目 */
  .page-id-148 .service-item {
    height: 220px;
  }


  /*
   * 768px基準
   *
   * 44px + 680px + 44px
   *
   * 680px内：
   * title 200px
   * gap 24px
   * content 456px
   */
.page-id-148 .service-row {
  /* 768px時：左右44px → 680px
     それ以上では最大768pxで中央配置 */
  width: calc(100% - 88px) !important;
  max-width: 768px !important;
  height: 183px;

  gap: 24px !important;
}


  /* title */
.page-id-148 .service-title {
  flex: 0 0 200px !important;
  width: 200px !important;
  max-width: 200px !important;
}


  /*
   * contentは可変
   *
   * 768pxでは456px
   * 画面が広がれば544pxまで拡大
   */
.page-id-148 .service-content {
  flex: 1 1 0 !important;

  width: auto !important;
  min-width: 0 !important;

  gap: 24px;
}


  /*
   * TAB display
   *
   * 768px時：
   * 32 + 704 + 32
   *
   * 下端を固定。
   * 2行になれば上方向へ伸び、
   * 広くなって1行になっても下端は変えない。
   */
  .page-id-148 .service-display {
    right: 32px;
    bottom: 0;
    left: 32px;

    font-size: 105px;
  }
}



/* ========================================
   SERVICE Contents / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  /* SP：items間 */
  .page-id-148 .service-items {
    align-items: center;
    gap: 96px;
  }


  /*
   * SP item
   *
   * 390px基準：
   * 43 + 304 + 43
   */
  .page-id-148 .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-right: 43px;
    padding-left: 43px;

    gap: 10px;
  }


  /*
   * SPは横2段ではなく縦積み
   */
  .page-id-148 .service-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    max-width: 544px;

    gap: 20px;
  }


  /* title */
  .page-id-148 .service-title {
    width: 100%;

    font-size: 30px;
    letter-spacing: 1.5px;
  }


  /* content */
  .page-id-148 .service-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    gap: 24px;
  }


  /* lead */
  .page-id-148 .service-lead {
    font-size: 16px;
    letter-spacing: 0.8px;
  }


  /* body */
  .page-id-148 .service-body {
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.28px;
  }


  /* meta */
  .page-id-148 .service-meta {
    font-size: 12px;
    letter-spacing: 0.24px;
  }


  /*
   * SP display
   *
   * 390px時：
   * 28 + 334 + 28
   *
   * PC/TABと違い高さ120pxを固定。
   * 幅が広がって2行→1行になっても
   * displayの1行目の上端位置を維持する。
   */
  .page-id-148 .service-display {
  right: -8px;
  bottom: -10px;
  left: -12px;

  width: auto;
  max-width: none;
  height: 120px;

  font-size: 60px;
}
}

/* ========================================
   SERVICE Contents / SWELL Inner Wrapper
======================================== */

/*
 * SWELLのグループブロックが生成する
 * .wp-block-group__inner-container をリセット
 */
.page-id-148 .service-stack > .wp-block-group__inner-container,
.page-id-148 .service-items > .wp-block-group__inner-container,
.page-id-148 .service-item > .wp-block-group__inner-container,
.page-id-148 .service-row > .wp-block-group__inner-container,
.page-id-148 .service-content > .wp-block-group__inner-container,
.page-id-148 .service-text > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* itemsの実際の縦積み */
.page-id-148 .service-items > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}


/* contentの実際の縦積み */
.page-id-148 .service-content > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* lead / bodyの実際の縦積み */
.page-id-148 .service-text > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  gap: 16px !important;
}



/* ========================================
   SERVICE Inner Wrapper / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  .page-id-148 .service-items > .wp-block-group__inner-container {
    gap: 136px !important;
  }


  /*
   * ここが実際に
   * title + content を横並びにする要素
   */
  .page-id-148 .service-row > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    width: 100% !important;
    height: 100%;

    gap: 32px !important;
  }


  .page-id-148 .service-content > .wp-block-group__inner-container {
    gap: 32px !important;
  }
}



/* ========================================
   SERVICE Inner Wrapper / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  .page-id-148 .service-items > .wp-block-group__inner-container {
    gap: 120px !important;
  }


  .page-id-148 .service-row > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    width: 100% !important;
    height: 100%;

    gap: 24px !important;
  }


  .page-id-148 .service-content > .wp-block-group__inner-container {
    gap: 24px !important;
  }
}



/* ========================================
   SERVICE Inner Wrapper / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  .page-id-148 .service-items > .wp-block-group__inner-container {
    align-items: center !important;
    gap: 96px !important;
  }


  .page-id-148 .service-row > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 20px !important;
  }


  .page-id-148 .service-content > .wp-block-group__inner-container {
    gap: 24px !important;
  }
}

/* ========================================
   SERVICE / PROFILE CTA 共通
======================================== */

/* CTA配置 */
:is(.page-id-148, .page-id-150) .service-cta-wrap {
  display: flex;
  justify-content: flex-end;

  width: 100%;
  max-width: 1120px;

  margin: 96px auto 40px !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* ----------------------------------------
   CTA Card
---------------------------------------- */

:is(.page-id-148, .page-id-150) .service-cta-card {
  position: relative;
  isolation: isolate;

  display: block;

  width: 400px;
  height: 250px;

  margin: 0 !important;
  padding: 50px 28px 32px;

  box-sizing: border-box;
  overflow: hidden;

  background: #f7f7f7;
  color: #666666;

  box-shadow:
    2px 4px 8px 2px rgba(17, 17, 17, 0.14);

  text-decoration: none !important;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}


/* ----------------------------------------
   Decoration
---------------------------------------- */

:is(.page-id-148, .page-id-150) .service-cta__decoration {
  position: absolute;
  inset: 0;

  z-index: 0;

  color: rgba(17, 17, 17, 0.14);

  pointer-events: none;

  transition: color 0.3s ease;
}


/* SVG共通 */
:is(.page-id-148, .page-id-150) .service-cta__vector {
  position: absolute;

  display: block;

  margin: 0;
  padding: 0;
}


/* 左の装飾線 */
:is(.page-id-148, .page-id-150) .service-cta__vector--left {
  top: 0;
  left: 0;

  width: 98px;
  height: 250px;
}


/* 右の装飾線 */
:is(.page-id-148, .page-id-150) .service-cta__vector--right {
  top: 0;
  left: 0;

  width: 400px;
  height: 250px;
}


/* ----------------------------------------
   Content
---------------------------------------- */

:is(.page-id-148, .page-id-150) .service-cta__content {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 344px;

  gap: 18px;
}


/* ----------------------------------------
   Text
---------------------------------------- */

:is(.page-id-148, .page-id-150) .service-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  gap: 32px;
}


/* 日本語コピー */
:is(.page-id-148, .page-id-150) .service-cta__copy {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit;

  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.65px;

  text-align: center;
}


/* 英語リード */
:is(.page-id-148, .page-id-150) .service-cta__lead {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit;

  font-family: var(--font-nav);
  font-size: 33px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.66px;

  text-align: center;
}


/* ----------------------------------------
   CONTACT Link
---------------------------------------- */

:is(.page-id-148, .page-id-150) .service-cta__link {
  position: relative;

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

  width: 100%;
  height: 55px;

  margin: 0 !important;
  padding: 0 !important;
}


/* Arrow */
:is(.page-id-148, .page-id-150) .service-cta__arrow {
  position: absolute;

  top: 8px;
  left: 3px;

  display: block;

  width: 20px;
  height: 39px;

  margin: 0;
  padding: 0;

  color: inherit;
}


/* CONTACT */
:is(.page-id-148, .page-id-150) .service-cta__title {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit;

  font-family: var(--font-en);
  font-size: 55px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2.75px;

  text-align: center;
}


/* ----------------------------------------
   Hover
---------------------------------------- */

@media (hover: hover) {

  :is(.page-id-148, .page-id-150) .service-cta-card:hover {
    background-color: #666666;
    color: #f7f7f7;
  }

  :is(.page-id-148, .page-id-150) .service-cta-card:hover
  .service-cta__decoration {
    color: rgba(247, 247, 247, 0.50);
  }

}


/* ========================================
   CTA / PC
   1200px～
======================================== */

@media (min-width: 1200px) {
  :is(.page-id-148, .page-id-150) .service-cta-wrap {
    width: 1120px;
    margin-top: 202px !important;
  }
}


/* ========================================
   CTA / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {
  :is(.page-id-148, .page-id-150) .service-cta-wrap {
    width: calc(100% - 88px);
    max-width: none;
    margin-right: 44px !important;
  }
}


/* ========================================
   CTA / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  /* SP：360pxコンテンツ幅の中央 */
  :is(.page-id-148, .page-id-150) .service-cta-wrap {
    justify-content: center;

    max-width: 360px;
		
		margin-top: 80px !important;
  }


  /* CTA本体 */
  :is(.page-id-148, .page-id-150) .service-cta-card {
    width: 304px;
    height: 190px;

    padding:
      37.68px
      21.28px
      24.32px;
  }


  /* 左の装飾線 */
  :is(.page-id-148, .page-id-150) .service-cta__vector--left {
    width: 74.48px;
    height: 190px;
  }


  /* 右の装飾線 */
  :is(.page-id-148, .page-id-150) .service-cta__vector--right {
    width: 304px;
    height: 190px;
  }


  /* Content */
  :is(.page-id-148, .page-id-150) .service-cta__content {
    width: 261.44px;

    gap: 13.68px;
  }


  /* copy + lead */
  :is(.page-id-148, .page-id-150) .service-cta__text {
    gap: 24.32px;
  }


  /* 日本語コピー */
  :is(.page-id-148, .page-id-150) .service-cta__copy {
    font-size: 9.88px;
    letter-spacing: 0.494px;
  }


  /* 英語リード */
  :is(.page-id-148, .page-id-150) .service-cta__lead {
    font-size: 25.08px;
    letter-spacing: 0.502px;
  }


  /* CONTACT Link */
  :is(.page-id-148, .page-id-150) .service-cta__link {
    height: 42px;
  }


  /* Arrow */
  :is(.page-id-148, .page-id-150) .service-cta__arrow {
    top: 6.08px;
    left: 2.28px;

    width: 15.2px;
    height: 29.64px;
  }


  /* CONTACT */
  :is(.page-id-148, .page-id-150) .service-cta__title {
    font-size: 41.8px;
    letter-spacing: 2.09px;
  }

}


/* =========================
   PROFILE
========================= */


/* ========================================
   PROFILE Intro / 共通
======================================== */

/* Hero → Intro：全デバイス共通64px */
.page-id-150 .profile-intro {
  width: 100vw;
  max-width: none !important;

  margin-top: 64px !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  padding: 0 !important;

  box-sizing: border-box;
}


/* Intro Content */
.page-id-150 .profile-intro__content {
  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* SWELL Group内部リセット */
.page-id-150 .profile-intro__content > .wp-block-group__inner-container,
.page-id-150 .profile-info > .wp-block-group__inner-container,
.page-id-150 .profile-identity > .wp-block-group__inner-container,
.page-id-150 .profile-intro__body > .wp-block-group__inner-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* ----------------------------------------
   Info
---------------------------------------- */

.page-id-150 .profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 32px;
}


/* Info内部：全デバイス共通 */
.page-id-150 .profile-info > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100%;
}


/* identity */
.page-id-150 .profile-identity {
  margin: 0 !important;
  padding: 0 !important;
}

.page-id-150 .profile-identity > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100%;

  gap: 16px;
}


/* サイン */
.page-id-150 .profile-signature {
  display: block;

  width: 193px;
  height: 70px;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-8px);
}

.page-id-150 .profile-signature svg {
  display: block;

  width: 193px;
  height: 70px;
}


/* 名前 */
.page-id-150 .profile-name {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #111111;

  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.32px;
}


/* 肩書き */
.page-id-150 .profile-role {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #111111;

  font-family: var(--font-nav);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.32px;
}


/* Location */
.page-id-150 .profile-location {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #111111;

  font-family: var(--font-nav);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.32px;
}


/* ----------------------------------------
   Body
---------------------------------------- */

.page-id-150 .profile-intro__body {
  margin: 0 !important;
  padding: 0 !important;
}

.page-id-150 .profile-intro__body > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  gap: 24px;
}

.page-id-150 .profile-intro__body p {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #111111;

  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.32px;

  text-align: left;
}


/* ========================================
   PROFILE Intro / PC・TAB 共通
   768px～
======================================== */

@media (min-width: 768px) {

  .page-id-150 .profile-intro__content > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    width: 100%;
  }

  .page-id-150 .profile-info > .wp-block-group__inner-container {
    gap: 32px;
  }

}


/* ========================================
   PROFILE Intro / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  .page-id-150 .profile-intro {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }


  .page-id-150 .profile-intro__content {
    width: 1120px;
    max-width: 1120px;
    min-height: 535px;
  }

  .page-id-150 .profile-intro__content > .wp-block-group__inner-container {
    gap: 32px;
  }


  /* 左側 */
  .page-id-150 .profile-info {
    flex: 0 0 256px;

    width: 256px;
    max-width: 256px;
  }

  /* 右側本文 */
  .page-id-150 .profile-intro__body {
    flex: 0 0 544px;

    width: 544px;
    max-width: 544px;
  }

}


/* ========================================
   PROFILE Intro / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  .page-id-150 .profile-intro {
    padding-right: 44px !important;
    padding-left: 44px !important;
  }


  .page-id-150 .profile-intro__content {
    width: 100%;
    max-width: 768px;
  }

  .page-id-150 .profile-intro__content > .wp-block-group__inner-container {
    gap: 24px;
  }


  /* 左側 */
  .page-id-150 .profile-info {
    flex: 0 0 200px;

    width: 200px;
    max-width: 200px;
  }

  /* 右側は残り幅いっぱい */
  .page-id-150 .profile-intro__body {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
  }

}

/* ========================================
   PROFILE Intro / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  /* Intro全体：左右43px */
  .page-id-150 .profile-intro {
    padding-right: 43px !important;
    padding-left: 43px !important;
  }


  /* Intro Content */
  .page-id-150 .profile-intro__content {
    width: 100%;
    max-width: 544px;
  }


  /* Info ↔ Body：64px */
  .page-id-150
  .profile-intro__content
  > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100%;

    gap: 64px !important;
  }


  /* Info */
  .page-id-150 .profile-info {
    width: 100%;
  }

  .page-id-150
  .profile-info
  > .wp-block-group__inner-container {
    gap: 24px !important;
  }


  /* Identity */
  .page-id-150
  .profile-identity
  > .wp-block-group__inner-container {
    gap: 12px !important;
  }


  /* Signature */
  .page-id-150 .profile-signature,
  .page-id-150 .profile-signature svg {
    width: 165px;
    height: 60px;
  }


  /* Name */
  .page-id-150 .profile-name {
    font-size: 14px;
    letter-spacing: 0.28px;
  }


  /* Role / Location */
  .page-id-150 .profile-role,
  .page-id-150 .profile-location {
    font-size: 14px;
    letter-spacing: 0.28px;
  }


  /* Body全体 */
  .page-id-150 .profile-intro__body {
    width: 100%;
  }

  .page-id-150
  .profile-intro__body
  > .wp-block-group__inner-container {
    gap: 20px !important;
  }


  /* Body各段落 */
  .page-id-150 .profile-intro__body p {
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.28px;
  }

}

/* ========================================
   PROFILE Intro / SP ここまで
======================================== */


/* ========================================
   PROFILE About / 共通
======================================== */

/* Intro → About：56px */
.page-id-150 .profile-intro + .profile-about {
  margin-top: 56px !important;
  margin-block-start: 56px !important;
}


/* Cover本体 */
.page-id-150 .profile-about {
  position: relative;

  width: 100vw;
  max-width: none !important;

  height: 500px;
  min-height: 500px !important;

  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  padding: 0 !important;

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

  overflow: hidden;
	
	/* 固定画像をAbout領域内だけに表示 */
  -webkit-clip-path: inset(0);
  clip-path: inset(0);

  background: transparent !important;
  box-sizing: border-box;
}



/* ----------------------------------------
   Cover：背景画像
---------------------------------------- */

.page-id-150
.profile-about
> .wp-block-cover__image-background {
  position: fixed !important;

  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  /*
   Figma：
   元画像 2200 × 1467
   PC基準 1440px幅
   TAB / SPも1440px幅の画像を中央でクリップ
  */
  width: max(1440px, 100vw) !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  /*
   Figmaの
   y = -240.109px
   に近づけるため、中央より約10px上へ
  */
  transform: translate(-50%, -51.04%) !important;

  object-fit: initial !important;
  object-position: center !important;

  filter: none !important;
  opacity: 1 !important;

  z-index: 0;
}


/* ----------------------------------------
   Cover：標準オーバーレイを無効化
---------------------------------------- */

.page-id-150
.profile-about
> .wp-block-cover__background {
  display: none !important;

  background: transparent !important;
  opacity: 0 !important;
}


/* 旧形式Cover対策 */
.page-id-150
.profile-about.has-background-dim::before {
  display: none !important;
}


/* ----------------------------------------
   Cover：WordPress標準Inner Container
---------------------------------------- */

.page-id-150
.profile-about
> .wp-block-cover__inner-container {
  position: relative;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 2;
}


/* ----------------------------------------
   Content Wrap
---------------------------------------- */

.page-id-150 .profile-about__wrap {
  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* ----------------------------------------
   Content
---------------------------------------- */

.page-id-150 .profile-about__content {
  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* Group内部コンテナ */
.page-id-150
.profile-about__content
> .wp-block-group__inner-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* WordPress / Gutenberg標準の
   ブロック間余白をリセット */
.page-id-150
.profile-about__content
> .wp-block-group__inner-container
> .profile-about__title,
.page-id-150
.profile-about__content
> .wp-block-group__inner-container
> .profile-about__body {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ----------------------------------------
   Title
---------------------------------------- */

.page-id-150 .profile-about__title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #f7f7f7;

  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 1.8px;
}


/* SWELL標準H2装飾を無効化 */
.page-id-150 .profile-about__title::before,
.page-id-150 .profile-about__title::after {
  content: none !important;
  display: none !important;
}


/* ----------------------------------------
   Body
---------------------------------------- */

.page-id-150 .profile-about__body {
  margin: 0 !important;
  padding: 0 !important;

  color: #f7f7f7;

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 0.32px;

  text-align: left;
}


/* ========================================
   PROFILE About / PC・TAB 共通
   768px～
======================================== */

@media (min-width: 768px) {

  .page-id-150
  .profile-about__content
  > .wp-block-group__inner-container {
    flex-direction: row !important;
  }

  .page-id-150 .profile-about__body {
    max-width: 544px;
  }

}


/* ========================================
   PROFILE About / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  .page-id-150 .profile-about__wrap {
    width: 1120px;
    max-width: 1120px;
  }

  .page-id-150 .profile-about__content {
  width: 1120px;
}

.page-id-150
.profile-about__content
> .wp-block-group__inner-container {
  gap: 32px !important;
}

  .page-id-150 .profile-about__title {
    flex: 0 0 256px;

    width: 256px;
  }

  .page-id-150 .profile-about__body {
    flex: 0 0 544px;

    width: 544px;
  }

}


/* ========================================
   PROFILE About / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* Introと同じ左右44pxの基準に揃える */
  .page-id-150 .profile-about__wrap {
    width: 100% !important;
    max-width: none !important;

    padding-right: 44px !important;
    padding-left: 44px !important;
  }

  /* Intro Contentと同じ最大幅 */
  .page-id-150 .profile-about__content {
    width: 100% !important;
    max-width: 768px !important;

    margin: 0 auto !important;
  }

  .page-id-150
  .profile-about__content
  > .wp-block-group__inner-container {
    gap: 24px !important;
  }

  .page-id-150 .profile-about__title {
    flex: 0 0 200px;

    width: 200px;
  }

  .page-id-150 .profile-about__body {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
  }

}

/* ========================================
   PROFILE About / TABLET ここまで
======================================== */


/* ========================================
   PROFILE About / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  /* Introと同じ左右43pxの基準に揃える */
  .page-id-150 .profile-about__wrap {
    width: 100% !important;
    max-width: none !important;

    padding-right: 43px !important;
    padding-left: 43px !important;
  }

  /* Intro Contentと同じ最大544px */
  .page-id-150 .profile-about__content {
    width: 100% !important;
    max-width: 544px !important;

    margin: 0 auto !important;
  }

  .page-id-150
  .profile-about__content
  > .wp-block-group__inner-container {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .page-id-150 .profile-about__title {
    width: 200px;

    font-size: 30px;
    letter-spacing: 1.5px;
  }

  .page-id-150 .profile-about__body {
  width: 100%;
  max-width: 100%;

  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.28px;
}

}

/* ========================================
   PROFILE About / SP ここまで
======================================== */


/* ========================================
   PROFILE Concept / 共通
======================================== */

/* About → Concept：全デバイス共通56px */
.page-id-150 .profile-concept {
  position: relative;

  width: 100vw;
  max-width: none !important;

  margin-top: 56px !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  margin-block-start: 56px !important;

  padding: 0 !important;

  box-sizing: border-box;

background: #f7f7f7;

overflow-x: clip;
overflow-y: visible;
}


/* WordPress / Gutenberg標準Inner Container */
.page-id-150
.profile-concept
> .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* Gutenberg標準のブロック間余白をリセット */
.page-id-150
.profile-concept
> .wp-block-group__inner-container
> .profile-concept__body-wrap,
.page-id-150
.profile-concept
> .wp-block-group__inner-container
> .profile-concept__display-wrap {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ----------------------------------------
   Body Wrap
---------------------------------------- */

.page-id-150 .profile-concept__body-wrap {
  position: relative;
  z-index: 2;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* Body Wrap内部 */
.page-id-150
.profile-concept__body-wrap
> .wp-block-group__inner-container {
  display: flex;
  justify-content: center;

  width: 100%;
  height: 100%;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* ----------------------------------------
   Body
---------------------------------------- */

.page-id-150 .profile-concept__body {
  margin: 0 !important;
  padding: 0 !important;

  color: #111111;

  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;

  text-align: left;

  position: relative;
  z-index: 2;
}


/* ----------------------------------------
   Display Wrap
---------------------------------------- */

.page-id-150 .profile-concept__display-wrap {
  position: relative;
  z-index: 1;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* Display Wrap内部 */
.page-id-150
.profile-concept__display-wrap
> .wp-block-group__inner-container {
  display: flex;

  width: 100%;
  height: 100%;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* ----------------------------------------
   Display
---------------------------------------- */

.page-id-150 .profile-concept__display {
  max-width: none;

  margin: 0 !important;
  padding: 0 !important;

  color: #f7f7f7;

  font-family: var(--font-en);
  font-style: normal;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.03em;

  -webkit-text-stroke-color: rgba(17, 17, 17, 0.10);
-webkit-text-fill-color: #f7f7f7;
paint-order: stroke fill;

  pointer-events: none;

  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}


/* ========================================
   PROFILE Concept / PC・TAB 共通
   768px～
======================================== */

@media (min-width: 768px) {

  .page-id-150 .profile-concept__body {
    max-width: 544px;

    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.32px;
  }

  .page-id-150 .profile-concept__display {
    -webkit-text-stroke-width: 3.6px;
  }

}


/* ========================================
   PROFILE Concept / PC
   1200px～
======================================== */

@media (min-width: 1200px) {

  /* Concept全体 */
  .page-id-150 .profile-concept {
    height: 380px;
  }


  /* Body：1440px時に左右中央 */
  .page-id-150 .profile-concept__body-wrap {
    height: 180px;
  }

  .page-id-150
  .profile-concept__body-wrap
  > .wp-block-group__inner-container {
    align-items: flex-start;
  }

  .page-id-150 .profile-concept__body {
    flex: 0 0 544px;

    width: 544px;
    height: 180px;
  }


  /*
   * Display
   *
   * Figma：
   * 左 40px
   * 上 86px
   * 幅 1026px
   */
  .page-id-150 .profile-concept__display-wrap {
    position: absolute;

    top: 86px;
    left: 0;

    height: auto;

    padding-left: 40px !important;
  }

  .page-id-150
  .profile-concept__display-wrap
  > .wp-block-group__inner-container {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .page-id-150 .profile-concept__display {
    flex: 0 0 1026px;

    width: 1026px;

    font-size: 141px;
    letter-spacing: 4.23px;
  }

}


/* ========================================
   PROFILE Concept / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /*
   * Concept：
   * Body 192px
   * Display 200px
   * overlap 64px
   * → 328px
   */
  .page-id-150 .profile-concept {
    height: 328px;
  }


  /* Body Wrap */
  .page-id-150 .profile-concept__body-wrap {
    height: 192px;

    padding-right: 44px !important;
    padding-left: 268px !important;
  }

  .page-id-150
  .profile-concept__body-wrap
  > .wp-block-group__inner-container {
    align-items: center;
  }


  /* Body */
  .page-id-150 .profile-concept__body {
    flex: 1 1 0;

    width: auto;
    min-width: 0;
  }


    /* Display Wrap */
  .page-id-150 .profile-concept__display-wrap {
    height: 200px;

    margin-top: -64px !important;

    padding-left: 32px !important;
  }

  .page-id-150
  .profile-concept__display-wrap
  > .wp-block-group__inner-container {
    justify-content: center;
    align-items: center;

    gap: 10px;
  }


  /* Display */
  .page-id-150 .profile-concept__display {
    flex: 1 1 0;

    width: auto;

    font-size: 100px;
    letter-spacing: 3px;

    /* Figmaより上へ重ねるための視覚補正 */
    transform: translateY(-64px);
  }

}


/* ========================================
   PROFILE Concept / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  /*
   * Concept：
   * Body 156px
   * Display 100px
   * overlap 32px
   * → 244px
   */
  .page-id-150 .profile-concept {
  height: 244px;
}


  /* Body Wrap */
  .page-id-150 .profile-concept__body-wrap {
    height: 156px;

    padding-right: 43px !important;
    padding-left: 43px !important;
  }

  .page-id-150
  .profile-concept__body-wrap
  > .wp-block-group__inner-container {
    align-items: center;
  }


  /* Body */
  .page-id-150 .profile-concept__body {
    flex: 1 1 0;

    width: auto;
    max-width: 544px;
    min-width: 0;

    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.28px;
  }


    /* Display Wrap */
  .page-id-150 .profile-concept__display-wrap {
    height: 100px;

    margin-top: -32px !important;

    padding-left: 28px !important;
  }

  .page-id-150
  .profile-concept__display-wrap
  > .wp-block-group__inner-container {
    justify-content: flex-start;
    align-items: center;
  }


  /* Display */
  .page-id-150 .profile-concept__display {
    flex: 1 1 0;

    width: auto;

    font-size: 60px;
    letter-spacing: 1.8px;

    -webkit-text-stroke-width: 2.4px;

    /* Bodyへ重ねるための視覚補正 */
    transform: translate(-40px, -18px);
  }

}


/* ========================================
   PROFILE Concept / SP ここまで
======================================== */


/* ========================================
   PROFILE CTA
======================================== */

/* PC：1200px〜
   SERVICEと同じ1120pxコンテンツ幅を
   画面中央基準で配置 */
@media (min-width: 1200px) {

  .page-id-150 .profile-cta-wrap {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    width: 1120px !important;
    max-width: 1120px !important;

    margin-top: 71px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-block-start: 71px !important;

    justify-content: flex-end;
  }

}


/* TAB：768〜1199px
   画面右端から常時44px */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-id-150 .profile-cta-wrap {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    width: calc(100vw - 88px) !important;
    max-width: none !important;

    margin-top: 80px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-block-start: 80px !important;

    justify-content: flex-end;
  }

}



/* ========================================
   CONTACT Form
======================================== */

/* フォーム全体
   390px時：304px
   そこから可変 → 最大544px
   PC / TAB：544px
*/
.page-id-152 .snow-monkey-form {
  width: clamp(304px, calc(100vw - 86px), 544px) !important;
  max-width: calc(100% - 30px) !important;

  margin-top: 64px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-bottom: 96px !important;

  box-sizing: border-box;
}


/* ----------------------------------------
   CONTACT Form / Fields
---------------------------------------- */

/* 各大項目 */
.page-id-152 .snow-monkey-form .smf-item {
  margin: 0 !important;
}

.page-id-152 .snow-monkey-form .smf-item + .smf-item {
  margin-top: 30px !important;
}


/* 項目ラベル */
.page-id-152 .snow-monkey-form .smf-item__label {
  margin-bottom: 6px !important;

  color: #111111;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.7px;
}


/* 必須項目 */
.page-id-152
  .snow-monkey-form
  .smf-item:has([data-validations~="required"])
  .smf-item__label__text::after {
  content: " *";

  color: #666666;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}


/* テキスト入力欄 / textarea 共通 */
.page-id-152 .snow-monkey-form input[type="text"],
.page-id-152 .snow-monkey-form input[type="email"],
.page-id-152 .snow-monkey-form textarea {
  display: block;

  width: 100% !important;

  box-sizing: border-box;

  border: 1px solid rgba(102, 102, 102, 0.35) !important;
  border-radius: 0 !important;
  background: transparent !important;

  color: #111111;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.8px;

  box-shadow: none !important;
  transition: border-color 0.2s ease;
}


/* お名前・メールアドレス・会社名 */
.page-id-152 .snow-monkey-form input[type="text"],
.page-id-152 .snow-monkey-form input[type="email"] {
  height: 40px !important;
  padding: 0 16px !important;

  line-height: normal;
}


/* プレースホルダー
   ※基本はSnow Monkey Forms側で空欄にする */
.page-id-152 .snow-monkey-form input::placeholder,
.page-id-152 .snow-monkey-form textarea::placeholder {
  color: rgba(102, 102, 102, 0.5);
  opacity: 1;

  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.8px;
}


/* お問い合わせ内容 */
.page-id-152 .snow-monkey-form textarea {
  height: 160px !important;
  min-height: 160px;

  padding: 16px !important;

  line-height: 1.7;
  resize: vertical;
}


/* 入力中 */
.page-id-152 .snow-monkey-form input[type="text"]:focus,
.page-id-152 .snow-monkey-form input[type="email"]:focus,
.page-id-152 .snow-monkey-form textarea:focus {
  outline: none;
  border-color: #111111 !important;
  box-shadow: none !important;
}


/* ========================================
   CONTACT：SWELLの600px未満の可変フォントを無効化
======================================== */

@media (max-width: 599px) {

  html:has(#body_wrap.page-id-152) {
    --swl-fz--root: 16px !important;
    --swl-fz--content: 16px !important;
    font-size: 16px !important;
  }

}


/* チェックボックス */
.page-id-152 .snow-monkey-form .smf-checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
}


/* チェック項目タイトル → チェック項目ブロックの間隔を固定 */
.page-id-152
  .snow-monkey-form
  .smf-item:has(.smf-checkboxes-control) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0px !important;
}

/* Snow Monkey Forms標準のlabel / controls列の可変余白を解除 */
.page-id-152
  .snow-monkey-form
  .smf-item:has(.smf-checkboxes-control)
  > .smf-item__col {
  margin: 0 !important;
  padding: 0 !important;
}

/* 内側の標準余白も解除 */
.page-id-152
  .snow-monkey-form
  .smf-item:has(.smf-checkboxes-control)
  .smf-item__label,
.page-id-152
  .snow-monkey-form
  .smf-item:has(.smf-checkboxes-control)
  .smf-item__controls {
  margin: 0 !important;
  padding: 0 !important;
}


/* チェック項目全体：Snow Monkey Forms標準の可変指定を解除 */
.page-id-152
  .snow-monkey-form
  .smf-checkboxes-control__control {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;

  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* 各チェック項目の行高も固定 */
.page-id-152
  .snow-monkey-form
  .smf-checkboxes-control__control
  > .smf-label {
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.page-id-152 .snow-monkey-form .smf-checkbox-control__control {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;

  margin: 0 6px 0 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(102, 102, 102, 0.35) !important;
  border-radius: 0 !important;
  background: transparent !important;

  box-sizing: border-box;
  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.page-id-152 .snow-monkey-form .smf-checkbox-control__control:focus {
  outline: none;
  border-color: #111111 !important;
}

/* 選択時 */
.page-id-152 .snow-monkey-form .smf-checkbox-control__control:checked {
  border-color: #111111 !important;
  background-color: #111111 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3 3 7-7' fill='none' stroke='%23F7F7F7' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 8px !important;
}


/* チェック項目同士の間隔 */
.page-id-152
  .snow-monkey-form
  .smf-checkboxes-control__control
  > .smf-label
  + .smf-label {
  display: block;
  margin-top: 10px !important;
  margin-left: 0 !important;
}


/* チェック項目テキスト */
.page-id-152 .snow-monkey-form .smf-checkbox-control__label {
  color: #111111;
  font-family: var(--font-body);
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.7px;
}


/* プライバシーポリシー */
.page-id-152 .contact-form__privacy {
  margin: 30px 0 0 !important;

  color: #111111;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.7px;
}

.page-id-152 .contact-form__privacy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  transition: opacity 0.2s ease;
}

.page-id-152 .contact-form__privacy a:hover {
  opacity: 0.6;
}


/* ========================================
   CONTACT Form / Submit Button
======================================== */

/* Privacy Policy → 送信ボタン */
.page-id-152 .snow-monkey-form .smf-action {
  margin-top: 30px !important;
}


/* ----------------------------------------
   通常時
   白背景 + #666666の下線
---------------------------------------- */

.page-id-152
.snow-monkey-form
.smf-button-control__control {
  display: flex;

  width: 100% !important;
  min-height: 40px;

  padding: 10px 16px !important;

  justify-content: center;
  align-items: center;

  box-sizing: border-box;

  /* 上・左右は白、下のみ#666666 */
  border: 1px solid #ffffff !important;
  border-bottom-color: #666666 !important;
  border-radius: 0 !important;

  /* 下から上へせり上がる背景 */
  background-color: #ffffff !important;
  background-image:
    linear-gradient(#666666, #666666) !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  background-size: 100% 0% !important;

  color: #666666 !important;

  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    color 0.25s ease;
}


/* ----------------------------------------
   PC / TAB Hover
---------------------------------------- */

@media (hover: hover) {

  .page-id-152
  .snow-monkey-form
  .smf-button-control__control:hover {
    background-size: 100% 100% !important;

    border-color: #666666 !important;

    color: #f7f7f7 !important;
  }

}


/* ----------------------------------------
   Keyboard Focus / Tap / Click
---------------------------------------- */

.page-id-152
.snow-monkey-form
.smf-button-control__control:focus-visible,
.page-id-152
.snow-monkey-form
.smf-button-control__control:active {
  background-size: 100% 100% !important;

  border-color: #666666 !important;

  color: #f7f7f7 !important;
}

.page-id-152
.snow-monkey-form
.smf-button-control__control:focus-visible {
  outline: none;
}


/* ========================================
   CONTACT Form / Submit Button ここまで
======================================== */


/* ========================================
   CONTACT Form / Cloudflare Turnstile
======================================== */

.page-id-152 .snow-monkey-forms-turnstile {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}


/* 自動入力時の背景色を通常時と統一 */
.page-id-152 .snow-monkey-form input:-webkit-autofill,
.page-id-152 .snow-monkey-form input:-webkit-autofill:hover,
.page-id-152 .snow-monkey-form input:-webkit-autofill:focus,
.page-id-152 .snow-monkey-form textarea:-webkit-autofill,
.page-id-152 .snow-monkey-form textarea:-webkit-autofill:hover,
.page-id-152 .snow-monkey-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #111111 !important;
  -webkit-box-shadow: 0 0 0 1000px #f7f7f7 inset !important;
  box-shadow: 0 0 0 1000px #f7f7f7 inset !important;
  caret-color: #111111;
}

/* ========================================
   CONTACT Form - Validation Error
======================================== */

/* 未入力・入力エラー時の枠 */
.page-id-152 .snow-monkey-form
.smf-text-control__control[data-invalid="1"],
.page-id-152 .snow-monkey-form
.smf-textarea-control__control[data-invalid="1"] {
  border-color: #c83b5f !important;
  box-shadow: none !important;
}

/* エラーメッセージ */
.page-id-152 .snow-monkey-form .smf-error-messages {
  width: 100%;
  margin-top: 4px;

  color: #c83b5f;

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.6px;

  text-align: right;
}


/* ========================================
   CONTACT Complete
======================================== */

/* 完了画面：Snow Monkey Forms本体 */
.page-id-152 .snow-monkey-form[data-screen="complete"] {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 64px 0 !important;
}


/* 完了画面：Snow Monkey Forms内部 */
.page-id-152
  .snow-monkey-form[data-screen="complete"]
  .smf-complete-content {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ========================================
   完了メッセージカード
======================================== */

.page-id-152
  .snow-monkey-form[data-screen="complete"]
  .contact-complete-message {
  position: relative;

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

  box-sizing: border-box;

  width: 544px !important;
  height: 180px;

  max-width: calc(100vw - 86px) !important;

  margin: 0 auto !important;
  padding: 0 32px;

  overflow: hidden;

  background: #f7f7f7;
  box-shadow: 2px 4px 8px 2px rgba(17, 17, 17, 0.14);
}


/* ========================================
   装飾PNG 共通
======================================== */

.page-id-152
  .contact-complete-decoration {
  position: absolute;

  display: block;

  margin: 0;
  padding: 0;

  border: 0;

  pointer-events: none;

  z-index: 0;
}


/* PC / TAB 装飾
   元画像608×360px → 304×180pxで表示 */
.page-id-152
  .contact-complete-decoration--pc {
  top: 0;
  left: 0;

  width: 304px;
  height: 180px;

  object-fit: fill;
}


/* SP画像はPC / TABでは非表示 */
.page-id-152
  .contact-complete-decoration--sp {
  display: none;
}


/* ========================================
   完了メッセージ文字
======================================== */

.page-id-152
  .contact-complete-text {
  position: relative;

  z-index: 1;

  color: #666666;
  text-align: center;

  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;

  line-height: 2.1;
  letter-spacing: 0.8px;
}


/* PC / TAB用テキスト */
.page-id-152
  .contact-complete-text--pc {
  display: inline;
}


/* SP用テキスト */
.page-id-152
  .contact-complete-text--sp {
  display: none;
}


/* ========================================
   SP
======================================== */

@media (max-width: 767px) {

  .page-id-152
    .snow-monkey-form[data-screen="complete"]
    .contact-complete-message {
    width: 304px !important;
    height: 214px;

    padding: 0 24px;
  }


  /* PC / TAB装飾を非表示 */
  .page-id-152
    .contact-complete-decoration--pc {
    display: none;
  }


  /* SP装飾
     元画像608×428px → 304×214pxで表示 */
  .page-id-152
    .contact-complete-decoration--sp {
    display: block;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;
  }


  .page-id-152
    .contact-complete-text {
    font-size: 14px;
    letter-spacing: 0.7px;
  }


  .page-id-152
    .contact-complete-text--pc {
    display: none;
  }


  .page-id-152
    .contact-complete-text--sp {
    display: inline;
  }

}


/* ========================================
   完了画面のみ既存下余白を解除
======================================== */

.page-id-152
  #content:has(.snow-monkey-form[data-screen="complete"]),
.page-id-152
  #main_content:has(.snow-monkey-form[data-screen="complete"]),
.page-id-152
  .post_content:has(.snow-monkey-form[data-screen="complete"]),
.page-id-152
  .contact-form:has(.snow-monkey-form[data-screen="complete"]) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}


/* ========================================
   404 PAGE
======================================== */

/* ----------------------------------------
   404ページ：基本レイアウト
---------------------------------------- */

#body_wrap.error404 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* パンくず非表示 */
#body_wrap.error404 #breadcrumb {
  display: none !important;
}

/* 404ページのみヘッダー下の罫線を解除 */
#body_wrap.error404 #header,
#body_wrap.error404 #fix_header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}


/* MAIN領域共通リセット */
#body_wrap.error404 #content,
#body_wrap.error404 #main_content {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* MAIN領域をヘッダーとフッターの間いっぱいにする */
#body_wrap.error404 #content {
  flex: 1;
  display: flex;
}

/* MAIN領域中央に404本体を配置 */
#body_wrap.error404 #main_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#body_wrap.error404 .l-mainContent__inner {
  position: relative;

  width: 544px;
  height: 544px;
  max-width: 544px;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----------------------------------------
   404本体：SWELLヘッダー高さ切替の位置補正
---------------------------------------- */

/* PC：1200px以上 */
@media (min-width: 1200px) {
  #body_wrap.error404 .l-mainContent__inner {
    top: -64px;
  }
}

/* TAB：768〜959px */
@media (min-width: 768px) and (max-width: 959px) {
  #body_wrap.error404 .l-mainContent__inner {
    top: -25px;
  }
}


/* ----------------------------------------
   上部グレー帯
---------------------------------------- */

#body_wrap.error404 .c-ttl404 {
  display: flex;
  width: 100%;
  height: 43px;
  padding: 10px 0;
  justify-content: center;
  align-items: center;

  margin: 0 !important;
  box-sizing: border-box;

  background: #666666;

  /* SWELL標準文言を画面上では非表示 */
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 404メッセージ共通タイポグラフィ */
#body_wrap.error404 .c-ttl404::before,
#body_wrap.error404 .post_content > p.u-ta-c:first-of-type::before {
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

#body_wrap.error404 .c-ttl404::before {
  content: "指定されたURLのページは存在しません。";

  color: #f7f7f7;
  font-size: 18px;
  letter-spacing: 0.9px;
}


/* ----------------------------------------
   上部グレー帯より下
---------------------------------------- */

#body_wrap.error404 .post_content {
  position: relative;
  width: 100%;
  height: 501px; /* 544 - 43 */
  margin: 0 !important;
  padding: 0 !important;
}


/* 説明文 */
#body_wrap.error404 .post_content > p.u-ta-c:first-of-type {
  position: absolute;
  top: 24px;
  left: 0;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  /* SWELL標準文言を画面上では非表示 */
  font-size: 0 !important;
  line-height: 0 !important;
}

#body_wrap.error404 .post_content > p.u-ta-c:first-of-type::before {
  content: "ページが移動または削除されたか、URLが間違っている可能性があります。";

  color: #666666;
  font-size: 14px;
  letter-spacing: 0.7px;
}


/* SWELL標準の2つ目の説明文・検索フォームを非表示 */
#body_wrap.error404 .post_content > p.u-ta-c:nth-of-type(2),
#body_wrap.error404 .c-searchForm {
  display: none !important;
}


/* ----------------------------------------
   404グラフィック
---------------------------------------- */

#body_wrap.error404 .l-mainContent__inner::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 544px;
  height: 216px;

  background-image:
    url("https://tkgene.com/wp-content/uploads/2026/09/404-graphic-pc.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  pointer-events: none;
}


/* ----------------------------------------
   「トップに戻る」ボタン
---------------------------------------- */

#body_wrap.error404 .is-style-more_btn {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#body_wrap.error404 .is-style-more_btn > a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-height: 40px;
  padding: 10px 16px !important;
  box-sizing: border-box;

  border: 1px solid #ffffff !important;
  border-bottom-color: #666666 !important;
  border-radius: 0 !important;

  background:
    linear-gradient(to top, #666666 0 100%)
    no-repeat #ffffff;
  background-position: bottom;
  background-size: 100% 0;

  color: #666666 !important;

  font-family: "Zen Kaku Gothic New", sans-serif;
  /* SWELL標準の表示文を非表示（::beforeで「トップに戻る」を表示） */
  font-size: 0;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.8px;

  text-decoration: none !important;
  box-shadow: none !important;

  transition:
    background-size 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

/* SWELL標準の矢印を非表示 */
#body_wrap.error404 .is-style-more_btn > a::after {
  display: none !important;
}

#body_wrap.error404 .is-style-more_btn > a::before {
  content: "トップに戻る";

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.8px;
}

/* PC/TABのみhover */
@media (hover: hover) and (min-width: 768px) {

  #body_wrap.error404 .is-style-more_btn > a:hover,
  #body_wrap.error404 .is-style-more_btn > a:focus {
    background-size: 100% 100%;
    border-color: #666666 !important;
    color: #f7f7f7 !important;
  }
}


/* ========================================
   404 PAGE / SP
======================================== */

@media (max-width: 767px) {

  #body_wrap.error404 .l-mainContent__inner {
  width: clamp(304px, calc(100% - 86px), 544px);
  max-width: 100%;
  height: 408px;
}


  /* 上部グレー帯 */
  #body_wrap.error404 .c-ttl404 {
    padding: 0;
    gap: 10px;
  }

  #body_wrap.error404 .c-ttl404::before {
    content: "指定されたURLのページは\A存在しません。";
    white-space: pre-line;

    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0.8px;
  }


  /* グレー帯以下 */
  #body_wrap.error404 .post_content {
    height: 365px; /* 408 - 43 */
  }


  /* 説明文 */
  #body_wrap.error404 .post_content > p.u-ta-c:first-of-type {
    top: 12px;
  }

  #body_wrap.error404 .post_content > p.u-ta-c:first-of-type::before {
    content: "ページが移動または削除されたか、\AURLが間違っている可能性があります。";
    white-space: pre-line;

    font-size: 13px;
    line-height: 160%;
    letter-spacing: 0.65px;
  }


  /* SP用404グラフィック */
  #body_wrap.error404 .l-mainContent__inner::before {
    width: 304px;
    height: 120px;

    max-width: 100%;

    background-image:
      url("https://tkgene.com/wp-content/uploads/2026/09/404-graphic-sp.png");
  }

}


/* ----------------------------------------
   SP：グレー帯が408px以上になったら1行
   408px + 左右43px×2 = viewport 494px
---------------------------------------- */

@media (min-width: 494px) and (max-width: 767px) {

  #body_wrap.error404 .c-ttl404::before {
    content: "指定されたURLのページは存在しません。";
    white-space: nowrap;
  }
}


/* ----------------------------------------
   WordPressログイン中の確認用
---------------------------------------- */

.admin-bar #body_wrap.error404 {
  min-height: calc(100svh - 32px);
}

@media (max-width: 782px) {
  .admin-bar #body_wrap.error404 {
    min-height: calc(100svh - 46px);
  }
}


/* ========================================
   PRIVACY
======================================== */

/* ----------------------------------------
   SWELL標準表示の解除
---------------------------------------- */

/* パンくず */
.page-id-3 .p-breadcrumb {
  display: none;
}

/* SWELL標準のページタイトル */
.page-id-3 .c-pageTitle {
  display: none;
}

/* 通常ヘッダー下のSWELL標準罫線・シャドウを解除 */
.page-id-3 #header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* PRIVACYでは本文エリアをフル幅ベースに戻す */
.page-id-3 .l-content {
  max-width: none;

  margin: 0;
  padding: 0 !important;
}

.page-id-3 .l-mainContent,
.page-id-3 .l-mainContent__inner,
.page-id-3 .post_content {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0 !important;
}


/* ----------------------------------------
   PRIVACY 共通レイアウト
---------------------------------------- */

.page-id-3 .privacy-page {
  width: calc(100% - 86px);
  max-width: 544px;
  margin: 0 auto !important;

  /*
   * Figma：H1上端 y=216px
   * 現在の共通ヘッダーとの組み合わせを基準に初期値88px。
   * 実表示確認後、ここだけ微調整。
   *
   * 旧CSS内で誤ネストされていた
   * .privacy-page > .wp-block-group__inner-container のリセットは、
   * 現在の表示を変えないため有効化せず削除。
   */
  padding-top: 88px;
  padding-bottom: 88px;
}


/* ----------------------------------------
   H1
---------------------------------------- */

.page-id-3 .privacy-page h1 {
  margin: 0 0 64px;

  color: #111111;
  font-family: "Cormorant Garamond", serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
}


/* ----------------------------------------
   本文
---------------------------------------- */

.page-id-3 .privacy-page p,
.page-id-3 .privacy-page ul,
.page-id-3 .privacy-page li {
  color: #000000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.32px;
}

/* SWELL標準マージンを解除 */
.page-id-3 .privacy-page p {
  margin: 0;
}


/* ----------------------------------------
   H2
---------------------------------------- */

.page-id-3 .privacy-page h2 {
  margin: 48px 0 20px;
  padding: 0;

  color: #000000;
  background: none;
  border: 0;

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.4px;
}

/* SWELL見出し装飾を完全に解除 */
.page-id-3 .privacy-page h2::before,
.page-id-3 .privacy-page h2::after {
  content: none;
  display: none;
}


/* ----------------------------------------
   リスト
---------------------------------------- */

.page-id-3 .privacy-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-id-3 .privacy-page li {
  position: relative;
  margin: 0;
  padding-left: 1.5em;
}

.page-id-3 .privacy-page li::before {
  content: "・";
  position: absolute;
  left: 0.25em;
  top: 0;
}


/* ----------------------------------------
   先頭H2
---------------------------------------- */

/*
 * H1 → 導入文の64pxはH1のmargin-bottom。
 * 導入文 → 最初のH2は48px。
 */
.page-id-3 .privacy-page > h2:first-of-type {
  margin-top: 48px;
}


/* ----------------------------------------
   運営者
---------------------------------------- */

.page-id-3 .privacy-page .wp-block-group__inner-container > p:last-child {
  margin-top: 48px;

  color: #000000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.32px;
}


/* ========================================
   PRIVACY / TAB
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  .page-id-3 .privacy-page {
    padding-top: 216px;
  }

}


/* ========================================
   PRIVACY / SP
======================================== */

@media (max-width: 767px) {

  .page-id-3 .privacy-page {
    padding-top: 216px;
    padding-bottom: 72px;
  }

  .page-id-3 .privacy-page h1 {
    margin-bottom: 56px;

    font-size: 42px;
    font-weight: 500;
    letter-spacing: 0.84px;
  }

  .page-id-3 .privacy-page p,
  .page-id-3 .privacy-page ul,
  .page-id-3 .privacy-page li {
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.28px;
  }

  .page-id-3 .privacy-page h2 {
    margin-top: 40px;
    margin-bottom: 16px;

    font-size: 16px;
    letter-spacing: 0.32px;
  }

  .page-id-3 .privacy-page > h2:first-of-type {
    margin-top: 40px;
  }

  .page-id-3 .privacy-page .wp-block-group__inner-container > p:last-child {
    margin-top: 40px;

    font-size: 14px;
    letter-spacing: 0.28px;
  }

}

/* ========================================
   PRIVACY ここまで
======================================== */


/* ========================================
   TKGene Footer
======================================== */

/* Footer基本リセット */
#footer.l-footer,
#footer .l-footer__inner,
#footer .l-footer__foot {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer背景 */
#footer.l-footer,
#footer .l-footer__foot {
  background: #666666;
}

/* Footer下部 */
#footer .l-footer__foot {
  height: 60px;
}


/* Copyright + Privacy Policy */
#footer .l-footer__foot > .l-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;

  width: 100%;
  max-width: none;
  height: 60px;

  margin: 0 !important;
  padding: 0 160px !important;

  box-sizing: border-box;
}


/* Copyright / Privacy Policy 共通タイポグラフィ */
#footer .copyright,
#footer .l-footer__nav a {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.26px;
}


/* Copyright */
#footer .copyright {
  order: 1;

  margin: 0 !important;
  padding: 0 !important;

  color: #f7f7f7;

  text-align: left;
}


/* Footer Menu */
#footer .l-footer__nav {
  order: 2;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


#footer .l-footer__nav li {
  margin: 0 !important;
  padding: 0 !important;
}


/* Privacy Policy */
#footer .l-footer__nav a {
  display: block;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: #f7f7f7 !important;

  text-align: right;
  text-decoration: none !important;

  transition: color 0.3s ease;
}


/* Privacy Policy Hover */
@media (hover: hover) {

  #footer .l-footer__nav a:hover {
    color: #96abbb !important;
  }

}


/* ========================================
   TKGene Footer / TABLET
   768px～1199px
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  #footer .l-footer__foot > .l-container {
    padding-right: 44px !important;
    padding-left: 44px !important;
  }

}


/* ========================================
   TKGene Footer / SP
   ～767px
======================================== */

@media (max-width: 767px) {

  #footer .l-footer__foot > .l-container {
    padding-right: 43px !important;
    padding-left: 43px !important;
  }

}


/* ========================================
   Page Top Button
======================================== */

#pagetop {
  display: none !important;
}


/* ========================================
   HOME
======================================== */


/* ========================================
   HOME Opening
======================================== */


/* ========================================
   HOME Opening / Panel
======================================== */

#home-opening {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    width: 100%;
    height: 100%;

    background: #111111;

    overflow: visible;

    transform: translate3d(0, 0, 0);
    filter: blur(0);

    will-change: transform, filter;
}


/* ========================================
   HOME Opening / Line
======================================== */

.home-opening__line {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    /* 以前の背景指定を完全に無効化 */
    background: none !important;

    pointer-events: none;

    opacity: 1;
    filter: blur(0);

    transition:
        opacity 0.58s ease,
        filter 0.58s ease;
}

.home-opening__line img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 50% 50%;
}


/* ========================================
   HOME Opening / Soft Edge
======================================== */

#home-opening::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -18vh;

    width: 100%;
    height: 18vh;

    pointer-events: none;

    background: linear-gradient(
        to bottom,
        #111111 0%,
        rgba(17, 17, 17, 0.92) 18%,
        rgba(17, 17, 17, 0.68) 42%,
        rgba(17, 17, 17, 0.32) 70%,
        rgba(17, 17, 17, 0) 100%
    );
}

/* ========================================
   HOME Opening / Soft Edge ここまで
======================================== */


/* ========================================
   HOME Opening / Panel Out
======================================== */

#home-opening.is-panel-out {
    transform: translate3d(0, -106%, 0);
    transition:
        transform 0.44s cubic-bezier(0.55, 0, 0.25, 1);
}

/* ========================================
   HOME Opening / Panel Out ここまで
======================================== */


/* ========================================
   HOME Opening / Line Out
======================================== */

#home-opening.is-panel-out .home-opening__line {
    opacity: 0.18;
    filter: blur(3px);
}

/* ========================================
   HOME Opening / Line Out ここまで
======================================== */


/*
 * 黒背景の余韻
 */
#home-opening.is-panel-out::after {
    animation: homeOpeningTrail 0.62s ease-out both;
}

@keyframes homeOpeningTrail {
    0% {
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    68% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}


/* ========================================
   HOME Opening / Panel ここまで
======================================== */


/* ========================================
   HOME Opening / Movie Rise
======================================== */

body.has-home-opening #main_visual .p-mainVisual__imgLayer {
    transform: translate3d(0, 56px, 0) scale(1.08);
    transform-origin: 50% 50%;

    transition:
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/*
 * Opening退場と同時に
 * 動画の0秒フレームが本来位置へ上昇
 */
body.has-home-opening.is-home-video-rise
#main_visual .p-mainVisual__imgLayer {
    transform: translate3d(0, 0, 0) scale(1);
}


/* ========================================
   HOME Opening / Movie Rise ここまで
======================================== */


/* ----------------------------------------
   Opening Logo
---------------------------------------- */

.home-opening__logo {
  position: relative;
  z-index: 1;

  width: 230px;
  height: auto;

  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------
   Logo Exit
---------------------------------------- */

.home-opening.is-logo-out .home-opening__logo {
  animation: home-opening-logo-out
    0.38s
    cubic-bezier(0.4, 0, 0.2, 1)
    forwards;
}

@keyframes home-opening-logo-out {

  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-56px);
  }

}


/* ----------------------------------------
   Background + Line Exit
---------------------------------------- */


@keyframes home-opening-panel-out {

  0% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }

}


/* ----------------------------------------
   Opening中はスクロールさせない
---------------------------------------- */

html.is-home-opening,
body.is-home-opening {
  overflow: hidden;
}


/* ========================================
   HOME Opening / SP
======================================== */

@media (max-width: 767px) {

  .home-opening__logo {
    width: 170px;
  }

}


/* ========================================
   HOME Opening ここまで
======================================== */


/* ----------------------------------------
   Hero Copy
---------------------------------------- */

.hero-copy {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;

  animation: heroCopyFade 1s ease-out 0.3s both;
}

.hero-copy img {
  display: block;

  width: 601px;
  max-width: 100%;
  height: auto;

  margin: 0 auto;
}


/* ========================================
   HOME Hero Copy / Opening連動
======================================== */

body.has-home-opening .hero-copy {
    animation: none !important;
    opacity: 0;
    transform: translateY(10px);
}

body.has-home-opening.is-home-copy-in .hero-copy {
    animation: heroCopyFade 1s ease-out 0.3s both !important;
}


/* ========================================
   HOME Hero Copy / Opening連動 ここまで
======================================== */


/* ========================================
   HOME Hero Copy / SERVICE Link
======================================== */

.home .hero-copy-link {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  color: inherit;
  text-decoration: none !important;

  opacity: 1;

  cursor: pointer;

  transition:
    opacity 0.28s ease;
}


/* ----------------------------------------
   PC / Hover可能なデバイスのみ
---------------------------------------- */

@media (hover: hover) {

  .home .hero-copy-link:hover {
    opacity: 0.68;
  }

}


/* ========================================
   HOME Hero Copy / SERVICE Link ここまで
======================================== */


/* SP */
@media (max-width: 767px) {

  .hero-copy img {
    width: 288px;
  }

}


/* Hero Copy Fade */
@keyframes heroCopyFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

  .hero-copy {
    animation: none;
    opacity: 1;
  }

}


/* ----------------------------------------
   HOME Only
---------------------------------------- */

/* 固定ページ本文を使用しない */
.home .l-content {
  display: none;
}


/* Footerを表示しない */
.home #footer,
.home .l-footer {
  display: none;
}


/* PC用追従ヘッダーを表示しない */
.home #fix_header {
  display: none !important;
}


/* TAB / SP */
@media (max-width: 959px) {

  /* SP追従を解除 */
  #body_wrap.home #header[data-spfix="1"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    transform: none !important;
    transition: none !important;

    background: transparent !important;
    box-shadow: none !important;
  }


  /* スクロール後はヘッダーを完全に非表示 */
  html[data-scrolled="true"] #body_wrap.home #header {
    display: none !important;
  }

}