@charset "utf-8";

/* iPhone Safari 横はみ出し防止 */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100vw;
  max-width: 100dvw;
}

/* 引用符の向き調整（縦書き対応） */
.quote-open,
.quote-close {
  text-orientation: upright;
}
.quote-open {
  position: relative;
  left: 0.4em;
  top: 0.2em;
}
.quote-close {
  position: relative;
  left: -0.4em;
}

/* ==================================================
   NEW DESIGN - Header & Hero
================================================== */

/* ----- Header ----- */
#header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #000;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  padding: 0 !important;
}

#header-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  height: 60px;
}

#header-box #logo {
  width: auto !important;
  height: auto !important;
  padding-left: 30px;
  margin: 0 !important;
}

#header-box #logo a {
  display: flex;
  align-items: center;
}

#header-box #logo svg {
  display: block;
  width: 180px;
  height: auto;
}

/* ハンバーガーボタン */
/* ハンバーガーボタン */
.hamburger-btn {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 60px;
  height: 60px;
  background: #000;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.hamburger-btn span {
  display: block;
  width: 28px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: opacity 0.3s;
}

.hamburger-btn__close {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hamburger-btn__close svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hamburger-btn.is-active span {
  display: none;
}

.hamburger-btn.is-active .hamburger-btn__close {
  display: block;
}

/* フルスクリーンメニュー */
.drawer-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  visibility: hidden;
}

.drawer-nav.is-open {
  pointer-events: auto;
  visibility: visible;
}

.drawer-nav__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}

.drawer-nav.is-open .drawer-nav__overlay {
  opacity: 1;
}

.drawer-nav__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  overflow-y: auto;
}

.drawer-nav.is-open .drawer-nav__content {
  opacity: 1;
}

/* PC版メニュー */
.drawer-nav__pc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 180px;
}

.drawer-nav__pc-left svg {
  width: 200px;
  height: auto;
  display: block;
}

.drawer-nav__pc-right {
  position: relative;
}

.drawer-nav__pc-right > svg {
  width: 100px;
  height: auto;
  display: block;
}

/* SP版メニュー */
.drawer-nav__sp {
  position: relative;
  padding: 40px 0 30px;
}

.drawer-nav__sp-inner {
  position: relative;
}

.drawer-nav__sp-inner > svg {
  width: 150px;
  height: auto;
  display: block;
}

/* リンクオーバーレイ（共通） */
.drawer-nav__link-area {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  z-index: 2;
  transition: opacity 0.2s;
}

.drawer-nav__link-area:hover {
  opacity: 0.5;
  background: rgba(0,0,0,0.02);
}

/* 旧ヘッダー要素の非表示 */
#spHeaderMenuBox,
#gnav-area,
#header-r,
#spHeaderTelBtn,
#spHeaderMenuOpenBtnBox,
#slidenav {
  display: none !important;
}


/* ----- Hero Section ----- */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 12vh;
  overflow: hidden;
  background: #fff;
}

/* 左サイド SCROLL */
.hero__scroll {
  position: absolute;
  left: 20px;
  bottom: 70px;
  z-index: 10;
}

.hero__scroll img {
  width: 11px;
  height: auto;
  animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* 右サイド About ラベル */
.hero__about-label {
  position: absolute;
  right: 20px;
  top: 120px;
  z-index: 10;
}

.hero__about-label img {
  width: 20px;
  height: auto;
}

/* メインSVG */
.hero__main-text {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  transform: translateY(42%);
  transition: transform 0.8s ease;
}

.hero__main-text.is-moved-up {
  transform: translateY(0);
}

.hero__main-text svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ヒーローキャッチフレーズ（HTMLテキスト）
   元SVG: 12文字が700px幅のviewBox内で x=4〜694 (690px) に配置
   46px × 12文字 + 12.9px × 11間隔 = 694px ≈ 700px */
.hero__catch {
  font-family: 'Noto Serif JP', serif;
  font-size: 46px;
  font-weight: 500;
  color: #231815;
  letter-spacing: 0.28em;
  text-align: center;
  margin: 0;
  padding-left: 0.28em;
  padding-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

.hero__catch .catch-char {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hero__catch .catch-char.is-visible {
  opacity: 1;
}

/* SVGアニメーション用トランジション */
#anim-lifeis,
#anim-arrow,
#anim-entertainment-black {
  transition: opacity 0.6s ease;
}

/* Join Us ボタン */
/* 全ページ共通: 固定 Join Us ボタン */
.fixed-joinus {
  position: fixed !important;
  left: 20px;
  bottom: 45px;
  z-index: 9000 !important;
  animation: joinus-bounce 3s ease-in-out 1s infinite;
}

@keyframes joinus-bounce {
  0%, 85%, 100% { transform: translateY(0); }
  90% { transform: translateY(-6px); }
  95% { transform: translateY(0); }
  97% { transform: translateY(-3px); }
}

.fixed-joinus a {
  display: block;
  text-decoration: none;
}

.fixed-joinus img {
  width: 216px;
  height: auto;
}

/* 全ページ共通: 固定 SCROLL / About / Join Us 初期フェードイン */
.fixed-side,
.fixed-joinus {
  opacity: 0 !important;
  transition: opacity 0.8s ease !important;
}

.fixed-side.is-visible,
.fixed-joinus.is-visible {
  opacity: 1 !important;
}

/* 固定 SCROLL / About (SVG画像版 - デザイン完全一致) */
.fixed-side {
  position: fixed !important;
  z-index: 9000 !important;
}

.fixed-side.is-fixed {
  position: fixed !important;
}

.fixed-side img {
  display: block;
  height: auto;
}

/* SCROLL: 元CSS .hero__scroll と同一 */
.fixed-side--scroll {
  left: 20px;
  bottom: 100px;
}

.fixed-side--scroll img {
  width: 13px;
}

/* About: 元CSS .hero__about-label と同一 */
.fixed-side--about {
  right: 0;
  top: 120px;
  width: 60px;
  display: flex;
  justify-content: center;
}

.fixed-side--about img {
  width: 20px;
}

.fixed-page-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: #231815;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  letter-spacing: 0.1em;
  line-height: 1;
}


/* ----- Second Section (About Visual) ----- */
.sec-visual {
  background: #F5F3F2;
  overflow: visible;
  padding-top: 40px;
}

/* Full-width layout container matching design aspect ratio */
.sec-visual__layout {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 725;
}

/* SVG decorative layer (grid + colored squares + text labels) */
.sec-visual__layout > svg,
.sec-visual__layout .composition-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Photo cards - positions from original clipPath coordinates / 1920x725 */
.photo {
  position: absolute;
  z-index: 2;
  margin: 0;
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FITNESS: clipPath x=507.23 y=84.19 w=252.1 h=222.07 */
.photo--fitness {
  left: 26.42%;
  top: 11.61%;
  width: 13.13%;
  height: 30.63%;
}

/* WORK: clipPath x=825.74 y=149.67 w=323.93 h=223.81 */
.photo--work {
  left: 43.01%;
  top: 20.64%;
  width: 16.87%;
  height: 30.87%;
}

/* COMMUNITY: clipPath x=593.29 y=405.88 w=232.45 h=166.04 */
.photo--community {
  left: 30.90%;
  top: 55.98%;
  width: 12.11%;
  height: 22.90%;
}

/* AMUSEMENT: clipPath x=858.94 y=472.29 w=230.62 h=133.1 */
.photo--amusement {
  left: 44.74%;
  top: 65.14%;
  width: 12.01%;
  height: 18.36%;
}

/* Machino vertical text - positioned to the right of photos */
.sec-visual__machino {
  position: absolute;
  right: 22%;
  top: 4%;
  width: 8%;
  z-index: 2;
}

.sec-visual__machino svg {
  width: 100%;
  height: auto;
  display: block;
}

.sec-visual__machino .text-line,
.sec-visual__text--sp .text-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sec-visual__machino .text-line.is-visible,
.sec-visual__text--sp .text-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----- Third Section (Vision / Mission / Value) ----- */
.sec-vmv {
  background: #fff;
  padding: 40px 0 50px;
}

.sec-vmv__inner {
  max-width: 683px;
  margin: 0 auto;
  padding: 0 30px;
}

.sec-vmv__item {
  padding: 25px 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.sec-vmv__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sec-vmv__item svg {
  width: 100%;
  height: auto;
  display: block;
}

.sec-vmv__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* VMV HTML layout - 元SVGの比率を完全再現 */
/* 元SVG viewBox: 683 x 157, 比率: num18.3% | gap5.9% | graphic21.3% | gap11.6% | text43.9% */
.sec-vmv__row {
  display: flex;
  align-items: center;
  width: 100%;
}

.sec-vmv__num-label {
  flex: 0 0 18.3%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sec-vmv__num {
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px #231815;
  color: transparent;
}

.sec-vmv__label {
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  font-weight: 500;
  color: #231815;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  letter-spacing: 0.15em;
  margin-top: 6px;
  margin-left: 8px;
}

.sec-vmv__graphic {
  flex: 0 0 21.3%;
  margin-left: 5.9%;
}

.sec-vmv__graphic img {
  width: 100%;
  height: auto;
  display: block;
}

.sec-vmv__text {
  flex: 0 0 auto;
  margin-left: 11.6%;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  color: #231815;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.sec-vmv__divider {
  border: none;
  border-top: 1px solid #231815;
  margin: 0;
  width: 100%;
}


/* ----- Fourth Section (About WAN STYLE) ----- */
.sec-about {
  background: #fff;
}

/* Marquee bar */
.sec-about__marquee {
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
  overflow: hidden;
  padding: 12px 0;
  white-space: nowrap;
}

.sec-about__marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marquee-scroll 40s linear infinite;
}

.sec-about__marquee-item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 50px;
}

.sec-about__marquee-item svg {
  display: block;
  width: 200px;
  height: auto;
  font-style: italic;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* WAN meaning */
.sec-about__meaning {
  padding: 50px 0 40px;
  text-align: center;
}

.sec-about__meaning svg {
  width: 380px;
  height: auto;
  display: block;
}

/* meaning line-by-line animation (SVG groups) */
.sec-about__meaning .meaning-line {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: translate(0, 15px);
}

.sec-about__meaning .meaning-line.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Photo slider */
.sec-about__slider {
  position: relative;
  overflow: hidden;
  padding: 0 0 10px;
}

.sec-about__slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s ease;
  cursor: grab;
}

.sec-about__slider-track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.sec-about__slide {
  flex: 0 0 calc((100% - 32px) / 3);
  overflow: hidden;
}

.sec-about__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 2;
}

/* Slider controls */
.sec-about__slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 20px 0 30px;
}

.sec-about__slider-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-about__slider-btn svg {
  width: 18px;
  height: auto;
  fill: #231815;
  transition: opacity 0.2s;
}

.sec-about__slider-btn:hover svg {
  opacity: 0.6;
}


/* ----- Fifth Section (ロゴに込めた想い) ----- */
.sec-logo {
  background: #fff;
  padding: 100px 0 40px;
}

.sec-logo__inner {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
}

.sec-logo__inner svg {
  width: 100%;
  height: auto;
  display: block;
}

.sec-logo__inner .s5-block {
  opacity: 0;
  transform: translate(0, 30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.sec-logo__inner .s5-block.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}


/* ----- Sixth Section (CTA) ----- */
.sec-cta {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}

.sec-cta__bg-wrap {
  position: relative;
  width: 100%;
  z-index: 0;
}

.sec-cta__bg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.sec-cta__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 38%;
  max-width: 540px;
}

.sec-cta__inner .s6-text {
  opacity: 0;
  transform: translate(0, 30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.sec-cta__inner .s6-text.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.sec-cta__inner svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Vertical line loop animation (top→bottom) */
#s6-vline {
  stroke-dasharray: 57.38;
  stroke-dashoffset: 57.38;
}

.sec-cta__inner.is-visible #s6-vline {
  animation: vline-draw 2s ease-in-out 0.6s infinite;
}

@keyframes vline-draw {
  0% { stroke-dashoffset: 57.38; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -57.38; }
}


/* ----- HTML Text Sections (Noto Serif JP) ----- */

/* Section 2: 町の至る所で〜 (machino text) */
.machino-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #231815;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100%;
}

.machino-text__line {
  margin: 0;
}

/* Section 4: WAN meaning text */
.wan-meaning-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.2;
  color: #231815;
}

.wan-meaning-text__line {
  margin: 0;
}

.wan-meaning-text .sp-br {
  display: none;
}

/* Section 5: ロゴに込めた想い */
.sec-logo-html__header {
  background: #231815;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 40px;
}

.sec-logo-html__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: 0.15em;
}

.sec-logo-html__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.sec-logo-html__logo-area {
  flex: 0 0 auto;
  width: 180px;
  text-align: center;
}

.sec-logo-html__logo-img {
  width: 100%;
  height: auto;
  display: block;
}

.sec-logo-html__divider {
  width: 1px;
  height: 180px;
  background: #231815;
  flex-shrink: 0;
}

.sec-logo-html__text-area {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.2;
  color: #231815;
  text-align: center;
}

.sec-logo-html__text-area p {
  margin: 0;
}

/* Section 6: CTA (HTML version) */
.sec-cta__inner--html {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 50%;
  max-width: 600px;
  text-align: center;
}

.sec-cta-html__text {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #231815;
  margin: 0 0 15px;
}

.sec-cta-html__vline {
  width: 2px;
  height: 50px;
  margin: 0 auto 30px;
}

.sec-cta-html__vline-svg {
  width: 2px;
  height: 100%;
  display: block;
}

.sec-cta__inner--html.is-visible .sec-cta-html__vline-svg {
  animation: vline-clip 2.5s ease-in-out infinite;
}

@keyframes vline-clip {
  0%   { clip-path: inset(0 0 100% 0); }
  40%  { clip-path: inset(0 0 0% 0); }
  60%  { clip-path: inset(0 0 0% 0); }
  100% { clip-path: inset(100% 0 0 0); }
}

.sec-cta-html__btn {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #231815;
  background: #fff;
  text-decoration: none;
  border: 1px solid #231815;
  padding: 14px 40px;
  letter-spacing: 0.1em;
  transition: background 0.3s, color 0.3s;
}

.sec-cta-html__btn:hover {
  background: #231815;
  color: #fff;
}

/* CTA HTML s6-text animation */
.sec-cta__inner--html .s6-text {
  opacity: 0;
  transform: translate(0, 30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.sec-cta__inner--html .sec-cta-html__vline {
  opacity: 0;
  transform: none !important;
  transition: opacity 0.8s ease;
}

.sec-cta__inner--html.is-visible .s6-text {
  opacity: 1;
  transform: translate(0, 0);
}

.sec-cta__inner--html.is-visible .sec-cta-html__vline {
  opacity: 1;
  transform: none !important;
}


/* ----- New Footer ----- */
.new-footer__nav {
  background: #fff;
  padding: 50px 0 60px;
  text-align: center;
}

.new-footer__links--pc {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 30px;
}

.new-footer__links--pc svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SP版フッターリンク（PC時非表示） */
.new-footer__links--sp {
  display: none;
}

.new-footer__bottom {
  text-align: center;
}

.new-footer__cr {
  width: 100%;
  background: #000;
  padding: 15px 0 25px;
}

.new-footer__cr svg {
  width: 100%;
  height: auto;
  display: block;
}

.footer-cr-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.1em;
}

/* メニュー: 今いるページをグレーにする（PC） */
.home #menu-about path { fill: #666; }
.page-slug-message #menu-message path { fill: #666; }
.page-slug-service #menu-service path { fill: #666; }
.page-slug-company #menu-company path { fill: #666; }
.page-slug-topics #menu-topics path { fill: #666; }
.page-slug-recruit #menu-recruit path { fill: #666; }
.page-slug-contact #menu-contact path { fill: #666; }

/* メニュー: 今いるページをグレーにする（SP） */
.home #sp-menu-about path { fill: #959596; }
.page-slug-message #sp-menu-message path { fill: #959596; }
.page-slug-service #sp-menu-service path { fill: #959596; }
.page-slug-company #sp-menu-company path { fill: #959596; }
.page-slug-topics #sp-menu-topics path { fill: #959596; }
.page-slug-recruit #sp-menu-recruit path { fill: #959596; }
.page-slug-contact #sp-menu-contact path { fill: #959596; }

/* Footer PC: SVGリンクをクリック可能に */
#footer-link-about,
#footer-link-message,
#footer-link-service,
#footer-link-company,
#footer-link-topics,
#footer-link-recruit,
#footer-link-contact,
#footer-link-facebook,
#footer-link-instagram {
  cursor: pointer;
}

#footer-link-about:hover path,
#footer-link-message:hover path,
#footer-link-service:hover path,
#footer-link-company:hover path,
#footer-link-topics:hover path,
#footer-link-recruit:hover path,
#footer-link-contact:hover path {
  fill: #666;
  transition: fill 0.2s;
}

/* Footer PC: 今いるページをグレーにする */
.home #footer-link-about path { fill: #999; }
.page-slug-message #footer-link-message path { fill: #999; }
.page-slug-service #footer-link-service path { fill: #999; }
.page-slug-company #footer-link-company path { fill: #999; }
.page-slug-topics #footer-link-topics path { fill: #999; }
.page-slug-recruit #footer-link-recruit path { fill: #999; }
.page-slug-contact #footer-link-contact path { fill: #999; }

/* ----- PC / SP 切り替え ----- */
.sp-only {
  display: none !important;
}

/* 旧フッター・ページトップボタン非表示 */
#footer,
#page-top {
  display: none !important;
}



/* ===== Responsive (tablet) ===== */

@media screen and (max-width: 768px) {
  #header-box {
    height: 50px;
  }

  #header-box #logo {
    padding-left: 10px;
  }

  #header-box #logo svg {
    width: 140px;
    height: auto;
  }

  .hamburger-btn {
    width: 50px;
    height: 50px;
    gap: 5px;
  }

  .hamburger-btn span {
    width: 22px;
    height: 1.5px;
  }

  .hero {
    padding-top: 50px;
    padding-bottom: 10vh;
    min-height: 100svh;
  }

  .hero__scroll {
    left: 12px;
    bottom: 58px;
  }

  .hero__scroll img {
    width: 9px;
  }

  .hero__about-label {
    right: 15px;
  }

  .hero__about-label img {
    width: 16px;
  }

  .hero__main-text {
    max-width: 500px;
  }

  .hero__catch {
    font-size: 34px;
    letter-spacing: 0.25em;
    padding-left: 0.25em;
  }

  .fixed-joinus {
    left: 12px;
    bottom: 25px;
  }

  .fixed-joinus img {
    width: 168px;
  }

  .fixed-side--scroll {
    left: 12px;
    bottom: 70px;
  }

  .fixed-side--scroll img {
    width: 11px;
  }

  .fixed-side--about {
    right: 0;
    width: 50px;
  }

  .fixed-side--about img {
    width: 16px;
  }

  .fixed-page-label {
    font-size: 22px;
  }

  .sec-visual__machino {
    right: 5%;
    top: 3%;
    width: 15%;
  }

  .sec-vmv {
    padding: 30px 0 40px;
  }

  .sec-vmv__inner {
    padding: 0 15px;
  }

  .sec-vmv__item {
    padding: 18px 0;
  }

  .sec-vmv__text {
    font-size: 12px;
  }

  .sec-vmv__num {
    font-size: 32px;
  }

  .sec-about__marquee {
    padding: 8px 0;
  }

  .sec-about__marquee-item {
    margin-right: 30px;
  }

  .sec-about__marquee-item svg {
    width: 140px;
  }

  .sec-about__meaning {
    padding: 30px 0 25px;
    text-align: center;
  }

  .sec-about__meaning svg {
    width: 280px;
  }

  .wan-meaning-text {
    font-size: 13px;
  }

  .sec-logo-html__body {
    gap: 25px;
  }

  .sec-logo-html__logo-area {
    width: 150px;
  }

  .sec-logo-html__divider {
    height: 150px;
  }

  .sec-logo-html__text-area {
    font-size: 13px;
  }

  .sec-cta__inner--html {
    width: 60%;
  }

  .sec-about__slide {
    flex: 0 0 calc((100% - 10px) / 2);
  }

  .sec-about__slider-track {
    gap: 10px;
  }

  .sec-about__slider-btn svg {
    width: 16px;
  }

  .sec-logo {
    padding: 40px 0 0;
  }

  .sec-logo__inner {
    width: 85%;
  }

  .sec-cta__inner {
    width: 70%;
  }

  .new-footer__nav {
    padding: 35px 0 40px;
  }

  .new-footer__links--pc {
    max-width: 90%;
    padding: 0 15px;
  }

  .new-footer__bottom {
    padding: 30px 0;
  }

  .new-footer__cr {
    max-width: 80px;
  }
}


/* ===== Responsive (phone) ===== */

@media screen and (max-width: 480px) {

  /* --- PC/SP切り替え --- */
  .pc-only {
    display: none !important;
  }

  .sp-only {
    display: block !important;
  }

  /* SPではサイド要素のフェードインアニメーション無効化 */
  [data-anim="side"] {
    opacity: 1 !important;
    transition: none !important;
  }

  /* --- Drawer Nav (SP) --- */
  .drawer-nav__sp > svg {
    width: 160px;
  }

  /* --- Hero (SP: sp-hero.svg 560x906.16) --- */
  .hero {
    min-height: 100svh;
    padding-top: 50px;
    padding-bottom: 60px;
  }

  .hero__main-text--sp {
    width: 78%;
    max-width: none;
    margin: 0 auto;
    transform: none !important;
    transition: none !important;
  }

  .hero__main-text--sp svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .fixed-joinus img {
    width: 132px;
  }

  .hero__scroll {
    left: 10px;
    bottom: 55px;
  }

  .hero__scroll img {
    width: 8px;
  }

  .hero__about-label {
    right: 15px;
  }

  .hero__about-label img {
    width: 16px;
  }

  .fixed-joinus {
    left: 10px;
    bottom: 20px;
  }

  .fixed-side--scroll {
    left: 10px;
    bottom: 58px;
  }

  .fixed-side--scroll img {
    width: 9px;
  }

  .fixed-side--about {
    right: 0;
    width: 50px;
  }

  .fixed-side--about img {
    width: 16px;
  }

  .fixed-page-label {
    font-size: 20px;
  }


  /* --- Section 2 SP版（縦積み: テキスト上 → 4画像グリッド下） --- */

  /* 町の至る所で テキスト（中央揃え・縦書き） */
  .sec-visual__text--sp {
    padding: 15px 0 0;
    margin-bottom: -15px;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .sec-visual__text--sp svg {
    width: 42%;
    height: auto;
    display: inline-block;
  }

  /* SP版: machino text 縦書き表示（デザイン通り） */
  .machino-text--sp {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.2em;
    height: 420px;
    display: inline-block;
  }

  /* 4画像グリッド (4画像.svg viewBox=0 0 780 661.81) */
  .sec-visual__layout--sp {
    position: relative;
    width: 100%;
    aspect-ratio: 780 / 661.81;
  }

  .sec-visual__layout--sp > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  /* 写真位置: 4画像.png精密配置 (780x661.81)
     グリッドセル=32.38px
     COMMUNITYとAMUSEMENTの間にセル1個分の隙間
     COMMUNITY右端≈x370, gap≈30, AMUSEMENT左端≈x400
     FITNESS:   x≈75  y≈60  → x≈340  y≈305
     WORK:      x≈358 y≈85  → x≈710  y≈340
     COMMUNITY: x≈162 y≈365 → x≈370  y≈545
     AMUSEMENT: x≈400 y≈400 → x≈590  y≈565 */
  .sec-visual__layout--sp .photo--fitness {
    left: 9.6%;
    top: 9.1%;
    width: 34%;
    height: 37%;
  }

  .sec-visual__layout--sp .photo--work {
    left: 45.9%;
    top: 12.8%;
    width: 45.1%;
    height: 38.5%;
  }

  .sec-visual__layout--sp .photo--community {
    left: 20.8%;
    top: 55.2%;
    width: 25.3%;
    height: 27.2%;
  }

  .sec-visual__layout--sp .photo--amusement {
    left: 50.2%;
    top: 60.4%;
    width: 25.5%;
    height: 24.9%;
  }


  /* --- Section 3 (VMV) --- */
  .sec-vmv {
    padding: 30px 0 35px;
  }

  .sec-vmv__inner {
    max-width: 80%;
    padding: 0 20px;
  }

  .sec-vmv__item {
    padding: 20px 0;
  }

  .sec-vmv__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    width: 100%;
  }

  .sec-vmv__num-label {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .sec-vmv__num {
    font-size: 40px;
  }

  .sec-vmv__label {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    margin-top: 0;
    margin-left: 0;
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .sec-vmv__graphic {
    flex: 0 0 auto;
    width: 140px;
    margin-left: 0;
  }

  .sec-vmv__text {
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: 15px;
    font-size: 16px;
    text-align: center;
    white-space: normal;
  }


  /* --- Section 4 (About WAN STYLE) --- */

  /* マーキー: SP版もPC同様に左へループスクロール */
  .sec-about__marquee {
    padding: 8px 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .sec-about__marquee-track {
    animation: marquee-scroll 30s linear infinite;
  }

  .sec-about__marquee-item {
    margin-right: 30px;
  }

  .sec-about__marquee-item svg {
    width: 140px;
  }

  .sec-about__meaning {
    padding: 30px 20px 25px;
    text-align: center;
  }

  .sec-about__meaning svg {
    width: 58%;
    max-width: 230px;
    margin: 0;
  }

  /* スライダー: SP版は1枚ずつ（左右に少しpadding） */
  .sec-about__slider {
    padding: 0 3.5% 10px;
  }

  .sec-about__slide {
    flex: 0 0 100%;
  }

  .sec-about__slide img {
    aspect-ratio: 16 / 10;
  }

  .sec-about__slider-track {
    gap: 12px;
  }

  .sec-about__slider-controls {
    padding: 10px 0 14px;
    gap: 24px;
  }

  .sec-about__slider-btn svg {
    width: 14px;
  }


  /* --- Section 4: WAN meaning (SP) --- */
  .wan-meaning-text {
    font-size: 14px;
    line-height: 2;
  }

  .wan-meaning-text .sp-br {
    display: inline;
  }

  .sec-about__meaning .meaning-line {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translate(0, 15px);
  }

  .sec-about__meaning .meaning-line.is-visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* --- Section 5 (Logo: SP) --- */
  .sec-logo {
    padding: 30px 0 40px;
  }

  .sec-logo__inner {
    width: 85%;
  }

  .sec-logo-html__header {
    margin-bottom: 30px;
  }

  .sec-logo-html__body {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .sec-logo-html__logo-area {
    width: 120px;
    margin: 0 auto;
  }

  .sec-logo-html__divider {
    width: 80%;
    height: 1px;
    margin: 0 auto;
  }

  .sec-logo-html__text-area {
    width: auto;
    font-size: 14px;
    text-align: center;
    line-height: 2;
  }

  /* --- Section 6 (CTA: SP HTML版 - SVG背景の上にオーバーレイ) --- */
  .sec-cta__inner--html {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .sec-cta-html__text {
    font-size: 16px;
    line-height: 2.2;
    margin: 0 0 10px;
  }

  .sec-cta-html__vline {
    height: 45px;
    margin: 0 auto 25px;
  }

  .sec-cta-html__btn {
    font-size: 16px;
    padding: 14px 36px;
    letter-spacing: 0.1em;
  }


  /* --- Footer (SP版: HTMLテキスト) --- */
  .new-footer__links--pc {
    display: none;
  }

  .new-footer__links--sp {
    display: block;
    padding: 0 25px;
  }

  .new-footer__nav {
    padding: 30px 0 35px;
    text-align: left;
  }

  .new-footer__sp-cols {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .new-footer__sp-col {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .new-footer__sp-col li {
    margin-bottom: 12px;
  }

  .new-footer__sp-col li a {
    font-family: 'URW DIN', 'DIN', sans-serif;
    font-size: 13px;
    color: #231815;
    text-decoration: none;
    letter-spacing: 0.03em;
  }

  .home #sp-footer-about a,
  .page-slug-message #sp-footer-message a,
  .page-slug-service #sp-footer-service a,
  .page-slug-company #sp-footer-company a,
  .page-slug-topics #sp-footer-topics a,
  .page-slug-recruit #sp-footer-recruit a,
  .page-slug-contact #sp-footer-contact a {
    color: #999 !important;
  }

  .new-footer__sp-social {
    text-align: center;
  }

  .new-footer__sp-follow {
    font-family: 'URW DIN', 'DIN', sans-serif;
    font-size: 10px;
    color: #231815;
    margin: 0 0 10px;
    letter-spacing: 0.03em;
  }

  .new-footer__sp-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .new-footer__sp-icons a {
    display: block;
  }

  .new-footer__sp-icons svg {
    width: 26px;
    height: 26px;
    fill: #231815;
  }

  .new-footer__bottom {
    padding: 0;
  }

  .new-footer__cr {
    width: 100%;
    max-width: none;
  }

  .new-footer__cr--sp {
    background: #000;
    text-align: center;
    padding: 12px 0 20px;
  }

  .footer-cr-text {
    font-family: 'Noto Serif JP', serif;
    font-size: 10px;
    color: #fff;
    letter-spacing: 0.1em;
  }

}

/* ==================================================
   SERVICE PAGE
================================================== */

.service-hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 60px);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 60px 100px;
  box-sizing: border-box;
  border-bottom: 1px solid #231815;
}

.service-hero__label {
  position: absolute;
  right: 20px;
  top: 120px;
  z-index: 10;
}

.service-hero__label svg {
  width: 20px;
  height: auto;
}

.service-hero__content {
  max-width: 700px;
  width: 65%;
}

.service-hero__content--map {
  position: relative;
}

.service-hero__content img {
  width: 100%;
  height: auto;
  display: block;
}

/* 地図上のクリッカブルエリア */
.service-map__link {
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 5;
}

.service-map__link:hover {
  background: rgba(69, 147, 208, 0.15);
  border-radius: 3px;
}

/* SPリンクリスト */


.service-hero__cta {
  position: absolute;
  left: 20px;
  bottom: 30px;
  z-index: 10;
}

/* ----- Service Responsive 768px ----- */
@media screen and (max-width: 768px) {
  .service-hero {
    padding: 120px 30px 80px;
  }

  .service-hero__label {
    right: 15px;
  }

  .service-hero__label svg {
    width: 16px;
  }

  .service-hero__content {
    width: 75%;
    max-width: none;
  }
}

/* ----- Service Responsive 480px ----- */
@media screen and (max-width: 480px) {
  .service-hero {
    min-height: auto;
    padding: 100px 20px 70px;
    align-items: flex-start;
  }

  .service-hero__label {
    display: none;
  }

  .service-hero__cta {
    display: none;
  }

  .service-hero__content {
    width: 100%;
    max-width: 100%;
  }
}

/* ==================================================
   RECRUIT PAGE
================================================== */

/* ----- Recruit Hero ----- */
/* スクショ1: メッセージは画面右寄り・やや上中央、SCROLL左下縦書き、Recruit右上、JoinUs左下端 */
.recruit-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
  box-sizing: border-box;
}

.recruit-hero__scroll {
  position: absolute;
  left: 20px;
  bottom: 80px;
  z-index: 10;
}

.recruit-hero__scroll img,
.recruit-hero__scroll svg {
  width: 11px;
  height: auto;
  display: block;
}

.recruit-hero__scroll span {
  display: block;
}

.recruit-hero__label {
  position: absolute;
  right: 20px;
  top: 120px;
  z-index: 10;
}

.recruit-hero__label svg {
  width: 20px;
  height: auto;
}

/* Recruit ラベル HTMLテキスト版 - トップAboutと同じサイズ */
.recruit-hero__label-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #231815;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* Recruitラベルはfixed-aboutと同じ位置にあるため非表示にせず、
   fixed-aboutのAboutラベルを非表示にしてRecruitに切り替え */

.recruit-hero__message {
  max-width: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.recruit-hero__message svg {
  width: 100%;
  height: auto;
}

/* Recruit ヒーローメッセージ HTMLテキスト版
   元SVG: viewBox 175.91×276.72, max-width:220px で表示
   4列、文字サイズはデザインPDFに合わせて大きめ */
.recruit-hero__message-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 36px;
  font-weight: 400;
  color: #231815;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.7;
  letter-spacing: 0.12em;
  margin: 0 auto;
}

.recruit-hero__message-text .r-char {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.4s ease;
  -webkit-transform: translateZ(0);
}

.recruit-hero__message-text .r-char.is-visible {
  opacity: 1;
}

/* 1文字ずつ現れるアニメーション（JS直接制御） */

.recruit-hero__cta {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 10;
}

.recruit-hero__btn {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.recruit-hero__btn-black {
  background: #231815;
  color: #fff;
  padding: 7px 12px;
  display: flex;
  align-items: center;
}

.recruit-hero__btn-white {
  border: 1px solid #231815;
  color: #231815;
  padding: 7px 12px;
  display: flex;
  align-items: center;
}

/* ----- HUMAN EDUCATION ----- */
/* スクショ2: グレー背景、図は横幅60%程度で中央、上下余白控えめ */
.recruit-education {
  background: #f0eeeb;
  padding: 50px 20px;
}

.recruit-education__inner {
  position: relative;
}

.recruit-education__desc {
  position: absolute;
    top: 16%;
    left: 133px;
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 400;
    color: #231815;
    line-height: 2;
    margin: 0;
    text-align: center;
}

.recruit-education__inner {
  max-width: 620px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.recruit-education__inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.recruit-education__inner img,
.recruit-education__inner svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 汎用: 1行ずつ下からスライドイン */
.recruit-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.recruit-stagger.is-stagger-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 頑張る人がバカをみない職場 ----- */
/* スクショ3: 左寄せのテキストSVG + 横幅いっぱいの横長写真(約2.5:1) */
.recruit-workplace {
  padding: 80px 5% 0;
  background: #fff;
}

.recruit-workplace__inner {
  max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.recruit-workplace__text {
  margin: 0 0 30px;
}

.recruit-workplace__text img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

.recruit-workplace__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #231815;
  margin: 0 0 20px;
}

.recruit-workplace__desc {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.03em;
  color: #231815;
  margin: 0;
}

.recruit-workplace__photo {
  width: 100%;
}

.recruit-workplace__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: 60px;
}

/* ----- Photo Slider ----- */
/* スクショ4: 小テキスト中央、3枚+右端に4枚目が少し見える、矢印中央下 */
.recruit-slider {
  padding: 40px 0 30px;
  background: #fff;
}

.recruit-slider__desc {
  text-align: center;
  margin: 0 0 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.recruit-slider__desc.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.recruit-slider__desc img {
  height: auto;
  display: inline-block;
}

.recruit-slider__desc.pc-only img {
  width: 100%;
  max-width: 400px;
}

.recruit-slider__desc-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 400;
  color: #231815;
  letter-spacing: 0.1em;
  margin: 0;
  text-align: center;
  /*padding-left: 18%;*/
}

@media screen and (max-width: 480px) {
  .recruit-slider__desc-text {
    font-size: 14px;
    padding-left: 8%;
    letter-spacing: 0.05em;
  }
}

.recruit-slider__container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.recruit-slider__track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s ease;
  cursor: grab;
}

.recruit-slider__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.recruit-slider__slide {
  flex: 0 0 calc((100% - 32px) / 3);
  overflow: hidden;
}

.recruit-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 2;
}

/* ----- 半授半受 ----- */
/* スクショ5: 左40%が暗い写真+白SVGオーバーレイ(やや上寄り)、右60%テキスト */
.recruit-hanjyu {
  padding: 80px 5%;
  background: #fff;
}

.recruit-hanjyu__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

.recruit-hanjyu__image {
  position: relative;
  flex: 0 0 38%;
  overflow: hidden;
}

.recruit-hanjyu__image img {
  width: 100%;
  height: auto;
  display: block;
}

.recruit-hanjyu__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-hanjyu__overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.recruit-hanjyu__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.15em;
}

.recruit-hanjyu__ruby {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.1em;
}

.recruit-hanjyu__text {
	flex: 1;
	text-align: center;
}

.recruit-hanjyu__sp {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.recruit-hanjyu__sp.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.recruit-hanjyu__text p {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.03em;
  margin: 0;
  color: #231815;
}

/* ----- CTA (TOP sec-cta と同構造) ----- */
.recruit-cta {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}

.recruit-cta__bg-wrap {
  position: relative;
  width: 100%;
  z-index: 0;
}

.recruit-cta__bg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.recruit-cta__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 33%;
  max-width: 470px;
  opacity: 0;
  transition: opacity 0.8s ease, margin-top 0.8s ease;
  margin-top: 30px;
}

.recruit-cta__inner.is-visible {
  opacity: 1;
  margin-top: 0;
}

.recruit-cta__inner svg {
  width: 100%;
  height: auto;
  display: block;
}

#recruit-vline {
  stroke-dasharray: 57.38;
  stroke-dashoffset: 57.38;
}

.recruit-cta__inner.is-visible #recruit-vline {
  animation: vline-draw 2s ease-in-out 0.6s infinite;
}

#sp-recruit-vline {
  stroke-dasharray: 114.75;
  stroke-dashoffset: 114.75;
}

.recruit-cta__inner.is-visible #sp-recruit-vline {
  animation: vline-draw-sp 2s ease-in-out 0.6s infinite;
}

@keyframes vline-draw-sp {
  0%   { stroke-dashoffset: 114.75; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 114.75; }
}

/* ----- Recruit Responsive 768px ----- */
@media screen and (max-width: 768px) {
  .recruit-hero {
    padding: 80px 20px 60px;
    justify-content: center;
  }

  .recruit-hero__message {
    max-width: 180px;
  }

  .recruit-hero__message-text {
    font-size: 28px;
  }

  .recruit-education {
    padding: 30px 15px;
  }

  .recruit-workplace {
    padding: 60px 0 0;
  }

  .recruit-slider__slide {
    flex: 0 0 calc(50% - 8px);
  }

  .recruit-hanjyu {
    padding: 50px 20px;
  }

  .recruit-hanjyu__inner {
    flex-direction: column;
    gap: 24px;
  }

  .recruit-hanjyu__image {
    flex: none;
    width: 100%;
  }

  .recruit-cta__inner {
    width: 60%;
  }
}

/* ----- Recruit Responsive 480px (SP) ----- */
@media screen and (max-width: 480px) {

  /* --- Hero --- */
  .recruit-hero {
    min-height: 100svh;
    padding: 50px 20px 30px;
    justify-content: center;
    align-items: center;
  }

  .recruit-hero__message {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .recruit-hero__message-text {
    font-size: 28px;
    line-height: 1.7;
  }

  /* --- HUMAN EDUCATION --- */
  .recruit-education {
    padding: 40px 20px;
  }

  .recruit-education__desc {
    top: 17%;
    left: 74px;
    right: auto;
    text-align: center;
    font-size: 12px;
    line-height: 2;
  }

  .recruit-education__inner img,
  .recruit-education__inner svg {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --- 頑張る人がバカをみない職場 --- */
  .recruit-workplace {
    padding: 50px 20px 0;
  }

  .recruit-workplace__inner {
    max-width: 100%;
  }

  .recruit-workplace__text img {
    max-width: 100%;
  }

  .recruit-workplace__photo {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  .recruit-workplace__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 40px;
  }

  /* --- Slider --- */
  .recruit-slider {
    padding: 30px 0 20px;
  }

  .recruit-slider__desc.sp-only {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 16px;
  }

  .recruit-slider__desc.sp-only img {
    width: 70%;
    max-width: 260px;
    height: auto;
    display: inline-block;
  }

  .recruit-slider__track {
    gap: 0;
  }

  .recruit-slider__slide {
    flex: 0 0 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .recruit-slider__slide img {
    aspect-ratio: 3 / 2;
  }

  .sec-about__slider-btn svg {
    width: 20px;
    height: 20px;
  }

  /* --- 半授半受 (SP) --- */
  .recruit-hanjyu__title {
    font-size: 26px;
  }

  .recruit-hanjyu__ruby {
    font-size: 11px;
  }

  .recruit-hanjyu {
    padding: 40px 20px;
  }

  .recruit-hanjyu__inner {
    flex-direction: column;
    gap: 24px;
  }

  .recruit-hanjyu__image {
    flex: none;
    width: 100%;
  }

  .recruit-hanjyu__sp {
    width: 100%;
  }

  .recruit-hanjyu__sp img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --- CTA (SP) --- */
  .recruit-cta__inner--sp {
    width: 70%;
    max-width: none;
  }
}

/* ==================================================
   MESSAGE / COMPANY PAGE - Layout & Font Override
================================================== */

/* ヘッダー（60px PC / 50px SP）分の余白 */
#message-contents,
#company-contents {
  padding-top: 80px;
}

/* Message写真（縦長対応） */
#message-contents .img-box .message-photo {
  max-width: 300px;
  display: block;
  margin: 0 auto;
}

#message-contents .message-box {
  padding-top: 80px;
}

#message-contents .img-box .message-photo {
  width: 100%;
  height: auto;
}

/* 全体フォント: Noto Serif JP */
#message-contents,
#message-contents .title-box h2,
#message-contents .title-box h2 .en,
#message-contents .message-box p,
#company-contents,
#company-contents .title-box h2,
#company-contents .title-box h2 .en,
#company-contents .company-box,
#company-contents .company-box table.office,
#company-contents .company-box table.office th,
#company-contents .company-box table.office td,
#company-contents .img-box h3,
#company-contents .map-box h3,
#company-contents .map-box p,
#company-contents .map-box span,
#company-contents .logoOrigin h3,
#company-contents .logoOrigin p {
  font-family: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
}

#message-contents .title-box h2,
#company-contents .title-box h2 {
  font-weight: 600;
}

#message-contents .title-box h2 .en,
#company-contents .title-box h2 .en {
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: capitalize;
}

#message-contents .message-box p,
#company-contents .company-box table.office td,
#company-contents .logoOrigin p {
  font-weight: 400;
	line-height: 2;
	margin: 0 25px;
}

#company-contents .company-box table.office th {
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  #message-contents,
  #company-contents {
    padding-top: 70px;
  }

  #message-contents .message-box {
    padding-top: 0;
  }

  #message-contents .img-box .message-photo {
    max-width: 60%;
    margin: 0 auto;
  }
}

/* ==================================================
   OFFICE PAGES (8事業所 統一テンプレート)
================================================== */

/* ----- Hero: 事業所名 ----- */
.office-hero {
  padding: 140px 40px 60px;
  text-align: center;
  background: #fff;
}

.office-hero__name h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #231815;
  line-height: 1.2;
}

/* ----- Marquee GALLERY テキスト ----- */
.office-marquee-gallery {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.15em;
  color: #231815;
}

/* ----- Catchcopy ----- */
.office-catchcopy {
  padding: 60px 40px;
  text-align: center;
  background: #fff;
}

.office-catchcopy p {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #231815;
}

/* ----- Photo Slider ----- */
.office-slider {
  background: #fff;
  padding: 0 0 40px;
  overflow: hidden;
}

.office-slider__container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  overflow: hidden;
}

.office-slider__track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s ease;
}

.office-slider__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.office-slider__slide {
  flex: 0 0 calc(33.333% - 11px);
  border-radius: 4px;
  overflow: hidden;
}

.office-slider__slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ----- Office Info ----- */
.office-info {
  background: #fff;
  padding: 60px 40px 80px;
}

.office-info__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

.office-info__inner .company-box {
  flex: 1;
}

.office-info__inner .img-box {
  flex: 1;
}

.office-info__inner table.office {
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
}

.office-info__inner table.office th {
  font-weight: 600;
  width: 30%;
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #f5f5f5;
  color: #333;
}

.office-info__inner table.office td {
  padding: 12px 16px;
  text-align: left;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

.office-info__inner .img-box h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #231815;
}

.office-info__inner .img-box img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

.office-info__inner .map-box {
  margin-top: 20px;
}

.office-info__inner .map-box p {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  margin-bottom: 10px;
}

.office-info__inner .google-map {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.office-info__inner .google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.office-info__inner .map-box span a {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  color: #231815;
}

/* ----- Office Responsive 768px ----- */
@media screen and (max-width: 768px) {
  .office-hero {
    padding: 110px 20px 40px;
  }

  .office-hero__name h1 {
    font-size: 32px;
  }

  .office-catchcopy {
    padding: 40px 20px;
  }

  .office-catchcopy p {
    font-size: 18px;
  }

  .office-slider__container {
    padding: 0 30px;
  }

  .office-slider__slide {
    flex: 0 0 calc(50% - 8px);
  }

  .office-info {
    padding: 40px 20px 60px;
  }

  .office-info__inner {
    flex-direction: column;
    gap: 30px;
  }
}

/* ----- Office Responsive 480px ----- */
@media screen and (max-width: 480px) {
  .office-hero {
    padding: 90px 15px 30px;
  }

  .office-hero__name h1 {
    font-size: 24px;
    letter-spacing: 0.05em;
  }

  .office-marquee-gallery {
    font-size: 18px;
  }

  .office-catchcopy {
    padding: 30px 15px;
  }

  .office-catchcopy p {
    font-size: 16px;
  }

  .office-slider__container {
    padding: 0 15px;
  }

  .office-slider__slide {
    flex: 0 0 calc(100% - 0px);
  }

  .office-info {
    padding: 30px 15px 50px;
  }

  .office-info__inner table.office th {
    font-size: 12px;
    padding: 8px 6px;
  }

  .office-info__inner table.office td {
    font-size: 13px;
    padding: 8px 10px;
  }
}


/* ==================================================
   旧テンプレートページ フォント統一
   (Contact, Topics, Message, Company 等)
================================================== */
#contents {
  font-family: 'Noto Serif JP', serif;
  padding-top: 70px;
}

#contents .title-box h2 {
  font-family: 'Noto Serif JP', serif;
}

#contents .title-box h2 .en {
  font-family: 'DM Sans', sans-serif;
}

#contents #contact-area-box,
#contents #topics-contents,
#contents #main,
#contents .inner,
#contents .text-box,
#contents .news-box,
#contents table {
  font-family: 'Noto Serif JP', serif;
}

#contents h2, #contents h3, #contents h4,
#contents p, #contents li, #contents dt, #contents dd,
#contents th, #contents td, #contents label, #contents input,
#contents textarea, #contents select, #contents button {
  font-family: 'Noto Serif JP', serif;
}