/* =========================
  Recruit page (style-recruting.css)
  Responsive: 375px / 560px / 768px / 1024px / 1440px
========================= */

:root{
  --bg: #ffffff;
  --text: #0b0f14;
  --muted: #5b6675;
  --line: rgba(11,15,20,.12);
  --soft: #f4f7fb;
  --accent: #0b0f14;
  --shadow: 0 20px 60px rgba(0,0,0,.10);
  --radius: 18px;
  --container: 1120px;
  --container-padding: clamp(16px, 4vw, 60px);
  --header-padding-x: clamp(16px, 5vw, 60px);
  --section-padding-y: clamp(40px, 8vw, 80px);
  --section-padding-y-sm: clamp(32px, 6vw, 56px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{ overflow-x: hidden; }

html { background: #ffffff; }
body{
  margin: 0;
  color: var(--text);
  /* ヘッダー背面の白帯を防ぐ：画面上部220pxをヒーローと同じグラデーション、それ以外は白 */
  background:
    linear-gradient(135deg, #dceef8 0%, #e8f2f0 25%, #f5f4e8 50%, #fceee4 75%, #fae8e0 100%) 0 0 / 100% 220px no-repeat,
    #ffffff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.85;
  letter-spacing: .02em;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
p{ margin: 0 0 1em; }
button{ font: inherit; }

.container{
  width: min(var(--container), calc(100% - var(--container-padding) * 2));
  margin-inline: auto;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  background:#fff; padding:10px 12px; border:1px solid var(--line);
  border-radius: 10px; z-index: 9999;
}

/* Header */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.header-inner{
  width: min(1800px, calc(100% - var(--header-padding-x) * 2));
  margin-inline: auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: clamp(14px, 2.5vw, 28px) 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: clamp(6px, 1vw, 10px);
}

.brand img{
  height: clamp(44px, 8vw, 56px);
  width: auto;
}

.brand-text{
  font-weight: 700;
  letter-spacing: .03em;
}

.nav{
  display:flex;
  align-items:center;
  gap: clamp(20px, 3vw, 48px);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: .08em;
}
.nav a{
  padding: clamp(6px, 0.8vw, 10px) clamp(4px, 0.5vw, 6px);
  color: rgba(11,15,20,.78);
}
.nav a:hover{ color: var(--text); }
.nav-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.2vw, 10px) clamp(14px, 1.8vw, 20px) !important;
  background: linear-gradient(135deg, #F78523 0%, #e67a1e 100%);
  border: none;
  border-radius: 0;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  font-size: clamp(13px, 1.2vw, 16px);
}
.nav-cta:hover{
  background: linear-gradient(135deg, #ff9028 0%, #F78523 100%) !important;
  color: #fff !important;
}

.nav-toggle{
  display:none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  padding: 10px;
}
.nav-toggle span{
  display:block;
  height: 2px;
  background: var(--text);
  margin: 6px 0;
}
.spnav{
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px clamp(16px, 4vw, 24px) 18px;
}
.spnav a{
  display:block;
  padding: 12px 6px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  color: rgba(11,15,20,.86);
}
.spnav a.nav-cta{
  margin-top: 10px;
  text-align:center;
  border-bottom: none;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--text);
  background: var(--text);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 13px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover{
  background: var(--text);
  color: #fff;
}

/* Section head */
.section-head{
  margin-bottom: clamp(20px, 3vw, 26px);
}
.section-head.center{
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 62px);
}
.section-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 6.5vw, 96px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: .18em;
}
.section-sub{
  margin-top: clamp(8px, 1.5vw, 14px);
  color: #F78523;
  font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: .16em;
}

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   HERO（背景はヘッダー背面まで続く）
========================= */
.hero{
  position: relative;
  margin-top: 0;
  padding-top: 124px;
  min-height: min(calc(100vh - 20px), 900px);
  overflow-x: hidden;
  overflow-y: visible;
}

.hero .container{
  width: min(1800px, calc(100% - var(--container-padding) * 2));
  margin-inline: auto;
  overflow: visible;
}

.hero-bg{
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% + 200px);
  background: linear-gradient(135deg,
    #dceef8 0%,
    #e8f2f0 25%,
    #f5f4e8 50%,
    #fceee4 75%,
    #fae8e0 100%);
  z-index: 0;
}

.hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  gap: 0;
  min-height: min(calc(100vh - 120px), 800px);
  overflow: visible;
}

.hero-copy{
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: 0;
  padding-left: 0;
  text-align: center;
}
.hero-subline{
  padding-left: 0;
  margin-left: 0;
}
.hero-copy::before{
  display: none;
}

.hero-tag{ display: none; }

.hero-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 10vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  padding-left: 0;
  margin-left: 0;
  text-align: center;
}

.hero-sub{
  font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 36px);
  letter-spacing: 0.2em;
  margin-top: clamp(20px, 3vw, 40px);
  color: #F78523;
}

/* 写真の上に薄い斜めのハイライト（白い帯っぽい） */
.hero-visual::before{
  content:"";
  position:absolute;
  top: -160px;
  right: 8%;
  width: 45%;
  height: 180%;
  background: rgba(255,255,255,.55);
  transform: rotate(22deg);
  pointer-events:none;
}

/* 右端の斜めライン2本 */
.hero-line{
  position:absolute;
  top: -200px;
  right: 6%;
  width: 10px;
  height: 180%;
  background: rgba(0,0,0,.20);
  transform: rotate(22deg);
  pointer-events:none;
}
.hero-line-1{ right: 8%; opacity: .22; }
.hero-line-2{ right: 4.5%; opacity: .35; }

.hero-visual{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-left: clamp(-8%, -60px, -4%);
  overflow: visible;
  z-index: 25;
}

.hero-photo{
  width: min(78vw, 1300px);
  min-width: min(280px, 85vw);
  max-width: 1300px;
  height: min(95vh, 1400px);
  max-height: 1400px;
  margin-top: clamp(-120px, -15vw, -80px);
  margin-left: 0;
  margin-right: clamp(-120px, -12vw, -60px);
  overflow: visible;
  transform: rotate(-12deg);
  transform-origin: center center;
}

.hero-photo-inner{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.08);
  border-radius: 50% 50% 45% 55% / 48% 48% 52% 52%;
}

.hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity .8s ease;
  transform: rotate(12deg);
}
.hero-slide.is-active{
  opacity: 1;
  z-index: 1;
  transform: rotate(12deg);
}

/* PC以外：回転で見切れないようスライドを少し拡大（1440px以上は変更なし）※hero-004はレスポンシブでは通常表示 */
@media (max-width: 1439px){
  .hero-slide{
    width: 108%;
    height: 108%;
    left: -4%;
    top: -4%;
    right: auto;
    bottom: auto;
  }
  .hero-slide.is-active{
    width: 108%;
    height: 108%;
    left: -4%;
    top: -4%;
    right: auto;
    bottom: auto;
  }
  .hero-photo-inner .hero-slide:nth-child(4),
  .hero-photo-inner .hero-slide:nth-child(4).is-active{
    transform: rotate(12deg);
    object-position: center center;
  }
}
.hero-photo-inner img,
.hero-photo img{
  display: block;
}

/* INTRO */
.intro{
  position: relative;
  z-index: 5;
  padding: 120px 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(20px, 3vw, 30px);
  align-items: start;
  width: 100%;
  max-width: 772px;
  height: auto;
  min-height: 0;
}
.intro-lead{
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
}
.intro-text{
  font-size: clamp(15px, 1.6vw, 18px);
}
.intro-text p{
  color: rgba(11,15,20,.88);
}
.intro-text p:nth-child(2),
.intro-text p:nth-child(3){
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
}
.intro-side{
  display:flex;
  justify-content:flex-end;
}
.vertical-copy{
  font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--text);
  font-size: clamp(28px, 4vw, 42px);
  border-left: 1px solid var(--line);
  padding-left: clamp(12px, 1.5vw, 16px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* MESSAGE */
.message{
  position: relative;
  overflow: hidden;
  padding: var(--section-padding-y) 0 var(--section-padding-y-sm);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.message-bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      #dceef8 0%,
      #e8f2f0 25%,
      #f5f4e8 50%,
      #fceee4 75%,
      #fae8e0 100%);
  z-index: 0;
}
.message .container{
  width: min(1600px, calc(100% - var(--container-padding) * 2));
}
.message-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(20px, 3vw, 30px);
  align-items: start;
}
.message-left{
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}
.message-body{
  padding: clamp(12px, 1.5vw, 18px) 0;
}
.message-body p{
  color: var(--text);
  font-weight: 800;
  letter-spacing: .08em;
}
.quote{
  font-size: clamp(16px, 2.1vw, 22px);
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.sign{
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  background: none !important;
  background-color: transparent !important;
}
.message-visual-wrap{
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
  margin-top: clamp(-80px, -10vw, -160px);
}
.message-sign-row{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: clamp(12px, 2vw, 24px);
  margin-top: 24px;
  justify-content: space-between;
}
.message-sign-row .interview-cta{
  flex-shrink: 0;
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.4;
  letter-spacing: .16em;
  color: #0b0f14;
  text-decoration: underline;
  cursor: pointer;
}
.message-sign-row .interview-cta:hover{
  opacity: .8;
}
.message-sign-row .sign{
  margin-top: 0;
}
.sign-role,
.sign-name,
.sign-company{
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text);
}
.message-visual{
  margin: 0;
}
.message-visual img{
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
  object-fit: cover;
  object-position: center top;
}

/* PC版：messageの下余白をやめ、message-gridのpadding下は0 */
@media (min-width: 768px){
  .message{
    padding-bottom: 0;
  }
  .message-grid{
    padding-bottom: 0;
  }
}

/* ABOUT */
.about .container{
  width: min(1600px, calc(100% - var(--container-padding) * 2));
}
.about{
  position: relative;
  padding: var(--section-padding-y) 0;
  overflow:hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-slope{
  position:absolute;
  inset: -20% -30% auto -30%;
  height: 300px;
  background: rgba(11,15,20,.04);
  transform: rotate(-10deg);
  border-radius: 60px;
}
.about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px) clamp(20px, 2.5vw, 32px);
}
.about-grid article{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.about-grid article:first-child{
  padding-top: clamp(24px, 3vw, 36px);
  align-items: center;
  text-align: center;
}
.about-grid article:first-child .about-icon{
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.about-grid article:first-child p{
  text-align: left;
  align-self: stretch;
}
.about-icon{
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  display:grid;
  place-items:center;
  margin-bottom: 12px;
}
.about-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-grid article:nth-child(2){
  align-items: center;
}
.about-grid article:nth-child(2) p{
  text-align: left;
  align-self: stretch;
}
.about-grid article:nth-child(2) .about-icon{
  width: clamp(96px, 10vw, 128px);
  height: clamp(96px, 10vw, 128px);
}
.about-grid article h3{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: .06em;
}
.about-grid article p{
  color: var(--text);
  font-size: clamp(14px, 1.8vw, 19px);
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 1em;
}
.about-grid article p:last-child{
  margin-bottom: 0;
}

/* VOICE */
.voice{
  padding: var(--section-padding-y) 0;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    #dceef8 0%,
    #e8f2f0 25%,
    #f5f4e8 50%,
    #fceee4 75%,
    #fae8e0 100%);
}
.voice .container{
  width: min(1600px, calc(100% - var(--container-padding) * 2));
}
.voice-photos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 32px);
  min-height: 0;
}
.voice-photo{
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: opacity .25s ease;
}
.voice-photo:hover{
  opacity: .9;
}
.voice-photo-name{
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text);
}
.voice .voice-photo-inner{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: min(320px, 100%);
  max-height: none;
  overflow: hidden;
  border-radius: 50%;
}
.voice .voice-photo-inner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* GALLERY */
.gallery{
  padding: var(--section-padding-y) 0 clamp(40px, 6vw, 66px);
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
/* GALLERY・社内ギャラリーを中央配置、見出しを縦並びに */
.gallery .section-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .container{
  width: 100%;
  max-width: min(1600px, 100%);
  overflow: hidden;
}
.gallery-slider{
  width: 100%;
  margin-left: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.gallery-row{
  overflow: hidden;
  height: clamp(180px, 22vw, 316px);
  margin-bottom: 12px;
}
.gallery-row:last-child{
  margin-bottom: 0;
}
.gallery-track{
  display: flex;
  gap: 12px;
  height: 100%;
  width: max-content;
}
.gallery-track-right{
  animation: gallerySlideRight 30s linear infinite;
}
.gallery-track-left{
  animation: gallerySlideLeft 30s linear infinite;
}
@keyframes gallerySlideRight{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes gallerySlideLeft{
  0%{ transform: translateX(-50%); }
  100%{ transform: translateX(0); }
}
.gallery-item{
  flex-shrink: 0;
  width: clamp(280px, 39vw, 474px);
  height: 100%;
  min-height: clamp(180px, 22vw, 316px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: clamp(12px, 1.5vw, 18px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .35s ease;
}
.gallery-item[data-src*="gallery-004"] img{
  object-position: center bottom;
}
.gallery-item:hover img{
  transform: scale(1.04);
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display:grid;
  place-items:center;
  padding: 24px;
  z-index: 200;
}
.lightbox[hidden] { display: none !important; }

.lightbox-img{
  max-width: min(980px, 92vw);
  max-height: 86vh;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background:#111;
}
.lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 24px;
  cursor:pointer;
}

/* INTERVIEW PAGE */
.interview{
  position: relative;
  min-height: 0;
  padding: clamp(100px, 12vw, 140px) 0 clamp(56px, 8vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.interview-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg,
    #dceef8 0%,
    #e8f2f0 25%,
    #f5f4e8 50%,
    #fceee4 75%,
    #fae8e0 100%);
}
.interview-container{
  position: relative;
  z-index: 1;
  width: min(1800px, calc(100% - var(--container-padding) * 2));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
}
.interview-back{
  display: inline-block;
  margin-top: 24px;
  margin-bottom: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .06em;
  align-self: center;
}
.interview-back:hover{
  color: #F78523;
}
.interview-hero{
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
  width: 100%;
  max-width: 1800px;
  margin-bottom: clamp(32px, 4vw, 48px);
  text-align: left;
}
.interview-hero-left{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 780px;
  min-height: 0;
  padding: clamp(40px, 8vw, 100px) clamp(24px, 8vw, 133px) clamp(80px, 12vw, 160px) clamp(24px, 6vw, 100px);
  box-sizing: border-box;
}
.interview-hero .interview-header{
  margin-bottom: 24px;
}
.interview-hero .interview-header .interview-name,
.interview-hero .interview-header .interview-role{
  text-align: left;
  margin-left: 0;
}
.interview-catchphrase{
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 2;
  color: var(--text);
  margin: 0 0 24px;
}
.interview-photo-main{
  width: 100%;
  min-height: clamp(280px, 50vw, 520px);
  overflow: hidden;
  border-radius: 12px;
}
.interview-photo-main img{
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 50vw, 520px);
  object-fit: cover;
  object-position: center top;
  display: block;
}
.interview-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: min(900px, 100%);
}
.interview-photo-between{
  width: 100%;
  max-width: min(1000px, 100%);
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
  margin: 24px auto;
}
.interview-photo-between img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interview-name{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.interview-role{
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.interview-message-label{
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--text);
  margin: 24px 0 40px;
}
.interview-qas{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: left;
}
.interview-qa{
  width: 100%;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.interview-qa:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.interview-q{
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.9;
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 4px solid #F78523;
  color: var(--text);
}
.interview-a{
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0;
  line-height: 1.9;
}

/* FOOTER */
.site-footer{
  padding: clamp(20px, 3vw, 24px) 0 clamp(32px, 4vw, 42px);
  border-top: 1px solid var(--line);
  background: #fff;
}
.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 2vw, 18px);
}
.footer-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  letter-spacing: .08em;
}
.footer-nav a{
  padding: 10px 6px;
  color: rgba(11,15,20,.78);
}
.footer-nav a:hover{ color: var(--text); }
.footer-note{
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

/* =========================
   Media Query: ≤1023px（小型ノート・タブレット横）
========================= */
@media (max-width: 1023px){
  .hero-grid{
    grid-template-columns: 1fr;
    min-height: min(calc(100vh - 100px), 700px);
  }
  .hero-photo{
    width: min(95vw, 600px);
    min-width: 0;
    height: min(70vh, 600px);
    margin-top: clamp(-60px, -8vw, 0);
    margin-right: 0;
    margin-left: auto;
    margin-inline: auto;
  }
  .hero-visual{
    margin-left: 0;
    justify-content: center;
  }
  .hero-visual::before,
  .hero-line{ display: none; }
  .hero-slide,
  .hero-slide.is-active{
    transform: rotate(10deg);
  }
  .hero-photo-inner .hero-slide:nth-child(4),
  .hero-photo-inner .hero-slide:nth-child(4).is-active{
    transform: rotate(10deg);
  }
  .hero-photo{
    transform: rotate(-10deg);
  }

  .voice-photos{
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(32px, 5vw, 48px);
  }
  .voice .voice-photo-inner{
    max-width: min(280px, 100%);
  }

  .gallery-row{
    height: clamp(160px, 21vw, 260px);
  }
  .gallery-item{
    width: clamp(260px, 42vw, 380px);
    min-height: clamp(160px, 21vw, 260px);
  }
}

/* =========================
   Media Query: ≤767px（タブレット縦・大スマホ）
========================= */
@media (max-width: 767px){
  .nav{ display: none; }
  .nav-toggle{ display: block; }

  .hero{
    padding-top: clamp(88px, 22vw, 120px);
    min-height: min(calc(100vh - 80px), 700px);
  }
  .hero-grid{
    min-height: auto;
  }
  .hero-photo{
    width: min(90vw, 400px);
    height: min(55vh, 450px);
    margin-top: -40px;
  }

  .intro{
    display: block;
  }
  .intro-grid{
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  /* vertical-copy を intro-text の上に配置し、左右中央に */
  .intro-side{
    order: -1;
    justify-content: center;
  }
  .vertical-copy{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    font-size: clamp(22px, 6vw, 32px);
    margin-inline: auto;
  }

  /* 表示順: message-visual → message-sign-row → message-left（本文）※PCは従来どおり */
  .message-left{
    display: contents;
  }
  .message-grid{
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .message-visual-wrap{
    margin-top: 0;
    order: -1;
    overflow: visible;
    box-sizing: border-box;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
  }
  .message-visual{
    width: 100%;
  }
  .message-visual.reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .message-visual img{
    width: 100%;
    max-width: none;
    transform: scale(1.08);
  }
  /* sign を message-visual の下部で重ねる／View Interview はその下で左右中央（PCは変更なし） */
  .message-sign-row{
    flex-wrap: wrap;
    order: 0;
    margin-top: clamp(8px, 3vw, 32px);
    flex-direction: column;
    align-items: center;
  }
  .message-sign-row .interview-cta{
    margin-left: 0;
  }
  .message-body{
    order: 1;
    padding-left: 12px;
    padding-right: 12px;
  }

  .about-grid{
    grid-template-columns: 1fr;
  }
  .about{
    display: block;
  }

  .voice-photos{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .voice .voice-photo-inner{
    max-width: min(260px, 85vw);
    margin-inline: auto;
  }
  .voice{
    display: block;
  }

  .gallery-slider{
    padding-inline: var(--container-padding);
  }
  .gallery .container{
    padding-inline: 0;
  }
  .gallery-row{
    height: clamp(140px, 38vw, 200px);
  }
  .gallery-item{
    width: clamp(220px, 58vw, 320px);
    min-height: clamp(140px, 38vw, 200px);
  }

  /* interview-photo-main を interview-hero-left の上に配置（PCは変更なし） */
  .interview-hero{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .interview-photo-main{
    order: -1;
    min-height: clamp(240px, 55vw, 320px);
  }
  .interview-photo-main img{
    min-height: clamp(240px, 55vw, 320px);
  }
  .interview-hero-left{
    order: 0;
    padding: clamp(24px, 5vw, 40px) var(--container-padding) clamp(48px, 10vw, 80px);
  }
  /* interview-q / interview-a のフォントサイズを少し大きく（PCは変更なし） */
  .interview-q{
    font-size: clamp(15px, 1.8vw, 19px);
  }
  .interview-a{
    font-size: clamp(14px, 1.5vw, 17px);
  }
}

/* =========================
   Media Query: ≤559px（スマホ）
========================= */
@media (max-width: 559px){
  .container{
    width: calc(100% - var(--container-padding) * 2);
  }
  .section-title{
    font-size: clamp(32px, 9vw, 48px);
    letter-spacing: .12em;
  }
  .section-sub{
    font-size: clamp(16px, 4vw, 22px);
    letter-spacing: .1em;
  }
  .hero-title{
    font-size: clamp(52px, 14vw, 72px);
  }
  .hero-sub{
    font-size: clamp(22px, 5.5vw, 28px);
    letter-spacing: 0.15em;
    margin-top: clamp(16px, 3vw, 28px);
  }
  .message-sign-row{
    flex-direction: column;
    align-items: center;
  }
  .message-sign-row .interview-cta{
    margin-left: 0;
  }
  .footer-nav{
    gap: 24px;
  }
  .btn{
    width: 100%;
  }
}

/* フッターナビ（aria-label）を縦並びに ※PCは変更なし */
@media (max-width: 767px){
  .footer-nav{
    flex-direction: column;
    align-items: center;
  }
  /* Unleash Potential・可能性を解き放てを少し大きく（PCレイアウト影響なし） */
  .hero-title{
    font-size: clamp(56px, 11vw, 88px);
  }
  .hero-sub{
    font-size: clamp(20px, 3.2vw, 32px);
    margin-top: clamp(18px, 2.8vw, 36px);
  }
}

/* =========================
   Media Query: ≤374px（iPhone 375px等）
========================= */
@media (max-width: 374px){
  :root{
    --container-padding: 16px;
    --header-padding-x: 16px;
  }
  .header-inner{
    padding: 10px 0;
  }
  .brand img{
    height: 40px;
  }
  .section-title{
    font-size: 28px;
  }
  .gallery-item{
    width: min(260px, 88vw);
  }
  .gallery-row{
    height: 160px;
  }
  .gallery-item{
    min-height: 160px;
  }
}

/* =========================
   Media Query: ≥1440px（大画面・PC維持）
========================= */
@media (min-width: 1440px){
  :root{
    --container-padding: 60px;
    --header-padding-x: 60px;
  }
  .hero{
    padding-top: 124px;
    min-height: calc(100vh - 20px);
    overflow: hidden;
  }
  .hero-grid{
    min-height: calc(100vh - 120px);
  }
  .hero-photo{
    margin-right: -120px;
    margin-left: -40px;
  }
  .hero-visual{
    margin-left: -8%;
  }
  .gallery-slider{
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .gallery .container{
    max-width: 100%;
  }
}

/* =========================
   追加メディアクエリ一覧
   - max-width: 374px  (iPhone 375px等)
   - max-width: 559px  (スマホ)
   - max-width: 767px  (タブレット縦・大スマホ)
   - max-width: 1023px (小型ノート・タブレット横)
   - min-width: 1440px (大画面・PC維持)
========================= */