@charset "UTF-8";
/* 
@include m.tpc {

}

@include m.tab {

}

@include m.sspc {

} */
/* =============  header TOP  ================ */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent; /* FVに重ねたいなら */
  background-color: rgba(255, 255, 255, 0.4);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__logo img {
  height: 22px;
  width: auto;
  display: block;
}

/* PC用ナビ */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav a {
  text-decoration: none;
  color: #013187;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.site-nav a:hover {
  opacity: 1;
}
.site-nav .is-cta {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* ハンバーガー（PCは非表示） */
.hamburger {
  display: none;
  flex-direction: column;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: #111;
  border-radius: 99px;
  transition: transform 0.25s, opacity 0.2s;
}

/* SPメニュー（初期はhiddenで非表示） */
.sp-menu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  padding: 72px 16px 16px;
  z-index: 1100;
}
.sp-menu__nav {
  max-width: 400px;
  height: 50vh;
  margin-left: auto;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sp-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-menu__list a {
  display: block;
  padding: 14px 10px;
  text-decoration: none;
  color: #111;
  font-weight: 600;
  border-radius: 10px;
}
.sp-menu__list a:hover {
  background: rgba(0, 0, 0, 0.04);
}
.sp-menu__list .is-cta {
  margin-top: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-align: center;
  border-radius: 999px;
}

/* 開いた時（JSで .is-open を付ける） */
.site-header.is-open .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .hamburger__bar:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ====== ここがレスポンシブの肝 ====== */
/* 例：1024px以下はハンバーガーにする */
@media (max-width: 768px) {
  .site-nav {
    display: none;
  }
  .hamburger {
    display: inline-flex;
  }
}
/* =======================  header-sub  ========================== */
.site-header--sub {
  background-color: rgba(255, 255, 255, 0.4);
}
.site-header--sub .site-nav a {
  color: #013187;
}

/* ===== FV上にいる間だけ（TOPページでJSが付ける） ===== */
.site-header.is-on-fv {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.site-header.is-on-fv .site-nav a {
  color: #fff;
}
.site-header.is-on-fv .site-nav .is-cta {
  border-color: rgba(255, 255, 255, 0.65);
}
.site-header.is-on-fv .hamburger {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
}
.site-header.is-on-fv .hamburger__bar {
  background: #fff;
}

/* ============common
=============================================== */
html, body {
  overflow-x: hidden;
  width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

html {
  font-size: 100%;
}

body {
  overflow-x: clip; /* 対応ブラウザならこれが一番キレイ */
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

a:hover {
  opacity: 0.6;
}

ul,
ol {
  list-style-type: none;
}

.wrapper {
  margin: 0 auto;
}
.flex {
  display: flex;
}

body {
  margin: 0 auto;
}

@media (max-width: 430px) {
  .br-pc {
    display: none;
  }
}

.tab-br {
  display: none;
}
@media (max-width: 768px) {
  .tab-br {
    display: block;
  }
}

.sp-br {
  display: none;
}
@media (max-width: 430px) {
  .sp-br {
    display: block;
  }
}

@media (max-width: 430px) {
  .none-sp-br {
    display: none;
  }
}

/* フォント */
/* =============  main  ================ */
/* =============  top-fv  ================ */
#top {
  margin-top: -55px;
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(../img/top-bgi.png);
  background-position: center center;
  background-size: cover;
}
@media (max-width: 768px) {
  #top {
    margin-top: -73px;
  }
}
#top .fv-div {
  position: absolute;
  width: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
#top .fv-div .fv-logo {
  width: 85%;
  max-width: 490px;
  margin: 10px auto;
}
#top .fv-div h1 {
  text-align: center;
  color: #fff;
}
#top .fv-div h2 {
  text-align: center;
  color: #fff;
}

/* =============  section1-topic  ================ */
#section1 {
  position: relative;
}
#section1 .sec1-title {
  position: absolute;
  top: 10%;
  left: 0;
  background-color: #013187;
  color: #fff;
  padding: 14px 50px;
}
#section1 .sec1-title h2 {
  font-size: 22px;
}
#section1 .sec1-inner {
  margin: 50px auto;
  padding: 50px;
  border: 1px solid rgba(207, 207, 207, 0.7);
  width: 90%;
  max-width: 1000px;
  box-shadow: 2px 2px 4px rgba(145, 145, 145, 0.6);
}
#section1 .sec1-inner .text-area {
  max-width: 600px;
  width: 85%;
  display: block;
  margin: 0 auto;
}
#section1 .sec1-inner .text-area dl {
  margin: 20px auto;
}

/* =============  section2-強み  ================ */
#section2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/sec2-bgi.png);
  background-size: contain;
  /* === 背景 ===*/
  background-position: center;
}
#section2 .sec2-inner {
  margin: 220px auto;
  padding: 25px 35px 50px;
  background-color: rgba(255, 255, 255, 0.4);
}
#section2 .sec2-inner .sec2-titles {
  display: flex;
  align-items: baseline;
}
#section2 .sec2-inner .sec2-titles h2 {
  color: #013187;
  font-size: 34px;
  font-weight: 900;
}
#section2 .sec2-inner .sec2-titles h3 {
  color: #013187;
  font-size: 20px;
  margin-left: 20px;
}
#section2 .sec2-inner .sec2-catch {
  text-align: center;
  margin: 20px auto;
  font-size: 22px;
  color: #fff;
  text-shadow: 1px 1px 2px #444444;
}
#section2 .sec2-inner p {
  line-height: 1.9;
}

@media (max-width: 768px) {
  .sec2-inner {
    margin: 55px auto;
    padding: 25px 15px 50px;
  }
  h2 {
    font-size: 24px;
    font-weight: 900;
  }
  h3 {
    font-size: 17px;
    margin-left: 10px;
  }
  .sec2-catch {
    margin: 20px auto;
    font-size: 18px;
  }
}
/* =============  section3-事業内容  ================ */
.biz {
  padding: 80px 0;
}

.biz__inner {
  max-width: 980px;
  /* ← 1100 → 980 */
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 45% 55%;
}

/* 左 */
.biz__left {
  display: grid;
  grid-template-rows: auto 1fr;
}

.biz__title {
  margin: 0 0 20px;
  font-weight: 800;
}

.biz__en {
  font-size: 40px;
  line-height: 1;
  color: #013187;
}

.biz__jp {
  display: inline-block;
  margin-left: 10px;
  font-size: 24px;
  color: #013187;
}

/* 左下 正方形 */
.biz__listBox {
  width: 100%;
  aspect-ratio: 1/1;
  background: #f3f5f7 url("../img/sec3-bgi.png") center/cover no-repeat;
  padding: 30px;
  display: flex;
  align-items: center;
}

.biz__listBox ul {
  margin: 0;
  padding-left: 1.2em;
  font-weight: 700;
  line-height: 2;
  font-size: 18px;
}

/* 右 正方形 */
.biz__right {
  display: flex;
}

.biz__textBox {
  width: 100%;
  aspect-ratio: 1/1;
  background: #013187;
  color: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.biz__textBox p {
  margin: 0;
  line-height: 1.8;
  padding: 15px;
  font-size: 18px;
}

.biz__textBox span {
  font-weight: 700;
  font-size: 18px;
}

/* ======================
   SP
====================== */
@media screen and (max-width: 900px) {
  .biz__inner {
    grid-template-columns: 1fr;
    gap: 0px;
  }
  .biz__left {
    padding-right: 0;
  }
  .biz__listBox,
.biz__textBox {
    aspect-ratio: auto;
  }
  .biz__en {
    font-size: 36px;
  }
}
@media (max-width: 430px) {
  .biz__listBox ul {
    font-size: 16px;
  }
  .biz__textBox p {
    font-size: 16px;
  }
  .biz__textBox span {
    font-size: 16px;
  }
}
/* =============  section4-bgi  ================ */
#section4 img {
  width: 100%;
}

/* =============  section5-スキャナ  ================ */
/* =========================
   3D Scanner Section
========================= */
.scanner {
  padding: 80px 0;
}

.scanner__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: stretch;
}

/* 左（タイトル + グレーbox） */
.scanner__left {
  display: grid;
  grid-template-rows: auto 1fr;
}

.scanner__title {
  margin: 0 0 18px;
  color: #002c76;
  font-weight: 800;
  line-height: 1.15;
}

.scanner__titleText {
  font-size: 30px;
}

.scanner__infoBox {
  width: 100%;
  aspect-ratio: 1/1;
  /* PCは正方形（スマホは解除） */
  background: #6f6f6f;
  color: #fff;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.scanner__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
  font-weight: 700;
}

.scanner__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  text-align: center;
}

.scanner__list li {
  position: relative;
  padding-left: 0;
}

.scanner__list li::before {
  content: "・";
}

/* 右（見出し + 画像 + ボタン） */
.scanner__right {
  display: flex;
}

.scanner__visual {
  width: 100%;
  aspect-ratio: 1/1;
  /* PCは正方形（スマホは解除） */
  background: #d9d9d9;
  padding: 26px 26px;
  position: relative;
  overflow: hidden;
  /* 画像がはみ出す場合に綺麗に */
}

.scanner__visualTitle {
  display: block;
  width: 320px;
  margin: 35px auto 10px;
  font-size: 26px;
  line-height: 1.45;
  font-weight: 800;
  color: #111;
}
.scanner__visualTitle span {
  color: #fff;
}

.visualtitle-w {
  color: #fff;
}

.scanner__imageWrap {
  margin: auto;
  width: 78%;
  max-width: 520px;
}

.scanner__image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.scanner__btn {
  position: absolute;
  right: 26px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 42px;
  background: #002c76;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: -3px -3px 0 #fff;
}

/* =========================
   SP
========================= */
@media screen and (max-width: 900px) {
  .scanner__inner {
    grid-template-columns: 1fr;
  }
  .scanner__left {
    padding-right: 0;
  }
  /* スマホでは正方形を維持しない */
  .scanner__infoBox,
.scanner__visual {
    aspect-ratio: auto;
  }
  .scanner__infoBox {
    padding: 20px;
  }
  .scanner__visual {
    padding: 20px;
    min-height: 420px;
    /* 画像が入る高さ確保 */
  }
  .scanner__imageWrap {
    position: static;
    width: 100%;
    margin: 14px auto 40px;
  }
  .scanner__btn {
    margin-top: 14px;
    margin-left: auto;
  }
  .scanner__titleText {
    font-size: 24px;
  }
}
/* =============  section6-求人  ================ */
#section6 {
  position: relative;
}
#section6 .sec6-title {
  position: absolute;
  top: 30px;
  left: 0;
}
#section6 .sec6-title h2 {
  background-color: #013187;
  color: #fff;
  padding: 10px;
}
#section6 .sec6-inner {
  width: 85%;
  margin: 30px 0 30px auto;
}
#section6 .sec6-inner img {
  width: 100%;
}
#section6 .sec6-inner h2 {
  position: absolute;
  width: 84%;
  text-align: center;
  top: 62%;
  left: 58%;
  transform: translate(-50%, -50%);
  color: #fff;
  line-height: 2.5;
  font-size: 32px;
}
#section6 .sec6-inner .sec6-btn {
  position: absolute;
  bottom: 10%;
  right: 12%;
  background-color: #013187;
  color: #fff;
  font-weight: 900;
  padding: 10px 35px;
  box-shadow: -5px -5px 0 #fff;
}

/* =============  section7-bgi  ================ */
#section7 img {
  width: 100%;
}

/* =============  section8-ギャラリー  ================ */
.section8 {
  padding: 60px 0;
}
.section8__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ギャラリー本体 */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery__item {
  overflow: hidden;
  background: #f2f2f2;
  /* ギャラリーっぽく比率を揃える（お好みで変更OK） */
  aspect-ratio: 4/4;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* SP：横2 */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gallery__item {
    aspect-ratio: 1/1;
  }
}
/* =======================  campany  ========================== */
/* =============  top-fv  ================ */
#campany-fv {
  position: relative;
  /* height: 45vw; を廃止 → 比率固定で安定 */
  aspect-ratio: 16/7;
  width: 100%;
  overflow: hidden;
  /* ======================
  SP
  ====================== */
  /* ======================
  SmallSP
  ====================== */
}
#campany-fv h1 {
  position: absolute;
  top: 5%;
  left: 10%;
  z-index: 100;
  font-size: clamp(32px, 3.8vw, 64px);
  color: #013187;
  line-height: 1;
  margin: 0;
}
#campany-fv .campany-fv01 {
  position: absolute;
  top: 14%;
  right: 4%;
  width: 47%;
  height: auto;
  z-index: 10;
  display: block;
  max-width: 100%;
}
#campany-fv .campany-fv02 {
  position: absolute;
  top: 22%;
  left: 4%;
  width: 47%;
  height: auto;
  z-index: 5;
  display: block;
  max-width: 100%;
}
@media (max-width: 768px) {
  #campany-fv {
    aspect-ratio: 16/9;
  }
  #campany-fv .campany-fv01 {
    top: 20%;
  }
  #campany-fv .campany-fv02 {
    top: 33%;
  }
}
@media (max-width: 430px) {
  #campany-fv {
    aspect-ratio: 1/1;
  }
  #campany-fv .campany-fv01 {
    top: 19%;
    width: 60%;
    right: 3%;
  }
  #campany-fv .campany-fv02 {
    top: 53%;
    width: 60%;
    left: 3%;
  }
  #campany-fv h1 {
    left: 5%;
    top: 6%;
    text-align: center;
  }
}

/* =============  company-profile  ================ */
.company-profile {
  padding: 80px 0;
  background: #fff;
  /* PC：2カラム / SP：1カラム */
}
.company-profile__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.company-profile__title {
  margin: 0 0 28px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #163a8a;
}
.company-profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 60px;
  align-items: start;
}

/* dl */
.profile-list {
  margin: 0;
}

/* dt/dd 1行セット */
.profile-item {
  display: grid;
  grid-template-columns: 140px 1fr; /* dt幅はここで調整 */
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.profile-item dt {
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.profile-item dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.86);
  word-break: break-word; /* 長い住所や社名のはみ出し対策 */
}

@media (max-width: 1024px) {
  .company-profile__grid {
    grid-template-columns: minmax(0, 440px); /* 最大幅を制限 */
    justify-content: center; /* 中央寄せ */
  }
}
/* ===== SP：1カラムに落とす ===== */
@media (max-width: 450px) {
  .company-profile {
    padding: 56px 0;
  }
  .company-profile__title {
    font-size: 32px;
    margin-bottom: 22px;
  }
  .company-profile__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .profile-item {
    grid-template-columns: 100px 1fr; /* SPは少し詰める */
    gap: 10px;
    padding: 12px 0;
  }
}
/* =============  company-access  ================ */
.access {
  padding: 80px 0;
}
.access__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 0.5fr 1fr; /* 右の地図を少し大きく */
  gap: 28px 48px;
  align-items: center;
}
.access__title {
  margin: 0 0 18px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #163a8a;
}
.access__addr {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.14em; /* 画像の雰囲気に寄せる */
  color: rgba(0, 0, 0, 0.78);
  line-height: 1.9;
}
.access__tel {
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.78);
  line-height: 2;
}
.access__tel a {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}
.access__btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 999px;
  background: #163a8a;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.access__btn:hover {
  opacity: 0.92;
}
.access__left {
  max-width: 350px;
  margin-left: auto;
}
.access__map {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  /* 地図の比率を固定（PC） */
  aspect-ratio: 16/9;
}
.access__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* SP：縦積み（地図→下） */
@media (max-width: 768px) {
  .access {
    padding: 56px 0;
  }
  .access__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .access__title {
    font-size: 34px;
    margin-bottom: 14px;
    text-align: center;
  }
  .access__addr, .access__tel {
    text-align: center;
    letter-spacing: 0.1em;
  }
  .access__btn {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
  .access__left {
    margin-left: auto;
    margin-right: auto;
  }
  .access__map {
    aspect-ratio: 4/3; /* SPは少し縦長でも見やすい */
    border-radius: 12px;
  }
}
/* =======================  Philosophyページ  ========================== */
/* =========================
  Philosophy FV
========================= */
.ph-fv {
  background: #fff;
  padding: 110px 0 70px; /* ヘッダー重ねなら上を少し厚めに */
}

.ph-fv__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

/* タイトル */
.ph-fv__title {
  margin-bottom: 35px;
}

.ph-fv__jp {
  margin: 0 0 4px;
  font-size: 36px;
  font-weight: 800;
  color: #163a8a;
  letter-spacing: 0.02em;
}

.ph-fv__en {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.02em;
}

/* 本文＋縦書き（PCは横並び） */
.ph-fv__content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 50px; /* ← 比率調整はここが一番効く */
}

/* 本文 */
.ph-fv__text {
  max-width: 480px; /* ← 本文の横幅調整 */
}

.ph-fv__text p {
  margin: 0;
  font-size: 18px;
  line-height: 2.2;
  color: rgba(0, 0, 0, 0.75);
}

/* 縦書き */
.ph-fv__vertical {
  display: flex;
  flex-direction: row-reverse;
  gap: 18px; /* ← 縦書き3本の間隔 */
}

.ph-fv__vertical span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #111;
}

.ph-fv__vertical b {
  color: #163a8a;
  font-size: 30px;
}

/* ===== SP：縦並び ===== */
@media (max-width: 768px) {
  .ph-fv {
    padding: 65px 0 56px;
  }
  .ph-fv__title {
    margin-bottom: 45px;
  }
  .ph-fv__jp {
    font-size: 26px;
  }
  .ph-fv__en {
    font-size: 14px;
  }
  .ph-fv__content {
    flex-direction: column;
    gap: 28px;
  }
  .ph-fv__vertical {
    order: -1; /* 縦書きを本文より上に */
    justify-content: center;
  }
  .ph-fv__text {
    max-width: 100%;
  }
  .ph-fv__text p {
    line-height: 2.1;
  }
}
@media (max-width: 430px) {
  .ph-fv {
    padding: 35px 0 30px;
  }
  .ph-fv__content {
    gap: 35px;
  }
  .ph-fv__text p {
    font-size: 16px;
  }
}
/* =============  Philosophy-valuse  ================ */
.values {
  padding: 80px 0;
  background: #fff;
}
.values__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}
.values__sectionTitle {
  margin: 0 0 26px;
  font-size: 28px;
  font-weight: 800;
  color: #163a8a;
  letter-spacing: 0.02em;
}
.values__list {
  display: grid;
  gap: 22px;
}

/* ===== カード ===== */
.value-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 30px 26px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 240px 1fr; /* PC：左タイトル/右本文 */
  gap: 22px 30px;
  align-items: center;
}

/* 左：タイトルブロック */
.value-card__head {
  padding-right: 18px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.value-card__small {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(22, 58, 138, 0.85);
  letter-spacing: 0.02em;
}

.value-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #163a8a;
  letter-spacing: 0.02em;
}

/* 右：本文 */
.value-card__lead {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: #111;
  line-height: 1.6;
}

.value-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0, 0, 0, 0.78);
}

/* ===== SP：縦並び ===== */
@media (max-width: 768px) {
  .values {
    padding: 60px 10px;
  }
  .values__sectionTitle {
    font-size: 24px;
    margin-bottom: 18px;
  }
  .value-card {
    grid-template-columns: 1fr; /* 縦並び */
    padding: 26px 20px;
    gap: 14px;
  }
  .value-card__head {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 12px;
    text-align: center;
  }
  .value-card__lead {
    text-align: left; /* 画像の雰囲気に合わせて left。centerでもOK */
  }
}
/* =========================
  代表あいさつ
========================= */
.greeting {
  padding: 90px 0;
  background: #fff;
}

.greeting__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px 44px;
  align-items: start;
  grid-template-areas: "content photo" ".       sign";
}

/* 左：タイトル＋本文 */
.greeting__content {
  grid-area: content;
}

.greeting__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #113a8f; /* お好みで */
  width: 90%;
  margin: 0 auto 18px;
}

.greeting__message {
  font-size: 16px;
  line-height: 2;
  color: #222;
  width: 90%;
  margin: 0 auto;
}
.greeting__message p {
  margin: 0 0 14px;
}

/* 右：写真（切り取り無しで全体表示） */
.greeting__photo {
  grid-area: photo;
  margin: auto;
}
.greeting__photo img {
  width: 100%;
  height: auto; /* ←これが重要：高さ固定しない */
  display: block;
  /* object-fit: contain; ←不要（高さ固定してないので切り取り発生しません） */
}

/* 右下：署名＋印鑑 */
.greeting__sign {
  grid-area: sign;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.greeting__name {
  display: flex;
  gap: 14px;
  align-items: baseline;
  white-space: nowrap;
}

.greeting__role {
  font-size: 12px;
  color: #222;
}

.greeting__person {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #222;
}

.greeting__seal {
  width: 60px; /* 印鑑画像に合わせて調整OK */
  height: auto;
  display: block;
}

/* ======================
SP：写真 → タイトル → 本文 → 署名（横並び）
====================== */
@media (max-width: 768px) {
  .greeting {
    padding: 70px 0;
  }
  .greeting__inner {
    grid-template-columns: 1fr;
    gap: 22px;
    grid-template-areas: "photo" "content" "sign";
  }
  .greeting__photo {
    width: 85%;
  }
  .greeting__title {
    font-size: 28px;
    margin-bottom: 14px;
  }
  /* SPで署名を左寄せにしたい場合は start に */
  .greeting__sign {
    justify-self: end;
    margin-top: 2px;
  }
  .greeting__seal {
    width: 56px;
  }
}
@media (max-width: 430px) {
  .greeting__photo {
    width: 95%;
  }
}
/* =========================
  社名スライド
========================= */
.marquee {
  /* ===== 調整用 ===== */
  --band-h: 160px; /* 帯の高さ */
  --speed: 240s; /* 速度（短いほど速い） */
  --font-size: 90px; /* 文字サイズ */
  --text-opacity: 0.90; /* 文字の薄さ */
  --gap: 0px; /* グループ間に余白を作りたい時 */
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  height: var(--band-h);
  background-image: url("../img/marquee-bgi.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.marquee__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 1本のトラックだけでOK（中身が2回入ってる） */
.marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* スムーズ化の要 */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-animation: marqueeMove var(--speed) linear infinite;
          animation: marqueeMove var(--speed) linear infinite;
}

.marquee__group {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--gap);
}

.marquee__text {
  font-size: var(--font-size);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 2px 2px 2px rgba(126, 126, 126, 0.1215686275);
  color: rgba(255, 255, 255, var(--text-opacity));
  /* text-transform: lowercase; */ /* 必要なら */
}

/* 2回並べた全体幅の “半分” 動かせば、綺麗にループする */
@-webkit-keyframes marqueeMove {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes marqueeMove {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .marquee {
    --band-h: 120px;
    --font-size: 78px;
    --speed: 140s;
  }
}
@media (max-width: 768px) {
  .marquee {
    --band-h: 90px;
    --font-size: 58px;
    --speed: 140s;
  }
}
/* 省エネ設定の人には止める（任意・推奨） */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    -webkit-animation: none;
            animation: none;
  }
}
/* =======================  採用情報ページ  ========================== */
/* =========================
　recruit-FV
========================= */
/* =========================
  FV
========================= */
.fv {
  background: #fff;
  padding: 28px 0 40px;
}

.fv__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (max-width: 768px) {
  .fv__inner {
    padding: 0;
  }
}

/* キャッチ（PC） */
.fv__catch {
  margin: 0 0 18px;
  font-size: 32px;
  /* ←ここだけ調整（catch専用） */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #111;
}
.fv__catch span {
  font-size: 36px;
}
@media (max-width: 1180px) {
  .fv__catch {
    font-size: 27px;
  }
  .fv__catch span {
    font-size: 32px;
  }
}
@media (max-width: 768px) {
  .fv__catch {
    font-size: 24px;
    margin-bottom: 14px;
  }
  .fv__catch span {
    font-size: 28px;
  }
}
@media (max-width: 430px) {
  .fv__catch {
    font-size: 22px;
  }
  .fv__catch span {
    font-size: 26px;
  }
}

/* 画像ブロック（PCは左寄せ） */
.fv__media {
  display: block;
}

/* 画像 + 重ねテキスト */
.fv__photo {
  position: relative;
  margin: 0;
  width: 860px;
  /* ←PCの画像サイズ（独立調整） */
  max-width: 100%;
}

.fv__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* 画像の“硬さ”をスクショに寄せる */
  border-radius: 2px;
  /* 角が完全な四角なら 0 に */
}

/* 右下に重なるサブテキスト（PC） */
.fv__sub {
  position: absolute;
  right: 0;
  /* ←位置微調整（sub専用） */
  bottom: 18px;
  /* ←位置微調整（sub専用） */
  margin: 0;
  padding: 20px 26px;
  font-size: 20px;
  /* ←subの文字サイズ（独立調整） */
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
  background: rgba(198, 198, 198, 0.55);
  /* ←濃さ調整 */
  border-radius: 2px;
  /* 文字が少し沈む感じ */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

/* =========================
  レスポンシブ
========================= */
/* Tablet以下：画像を横いっぱいに（＝親幅100%） */
@media (max-width: 768px) {
  .fv {
    padding: 22px 0 34px;
  }
  .fv__photo {
    width: 100%;
    /* SPは横いっぱい */
  }
  .fv__sub {
    bottom: 14px;
    font-size: 18px;
    /* ←SPのsub文字（独立調整） */
    padding: 16px 20px;
  }
}
/* SmallSP：さらに詰める */
@media (max-width: 430px) {
  .fv__sub {
    bottom: 14px;
    font-size: 16px;
    padding: 16px 18px;
    letter-spacing: 0.06em;
  }
}
/* =========================
　社員さんお写真
========================= */
.recruit-intro {
  padding: 80px 0;
  background: #fff;
  /* ===== 1180以下 ===== */
  /* ===== SP ===== */
}
.recruit-intro .recruit-intro__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 左右同率で伸縮 */
  gap: 40px;
  align-items: start;
  /* ←中央寄せ禁止 */
  /* 右：写真 */
}
.recruit-intro .recruit-intro__inner .text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #efefef;
  padding: 20px 10px;
  min-height: 350px;
  /* ←写真高さに合わせて段違い成立 */
  transform: translateY(60px);
  /* ←段違い */
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
  /* 左：テキスト */
}
.recruit-intro .recruit-intro__inner .text-area .recruit-intro__copy {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 2;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.78);
  text-align: center;
}
.recruit-intro .recruit-intro__inner .text-area .recruit-intro__name {
  margin: 0 0 22px;
  margin-right: 9%;
  font-size: 15px;
  opacity: 0.7;
  text-align: end;
}
.recruit-intro .recruit-intro__inner .recruit-intro__photo {
  margin-left: -48px;
  /* 被せ */
  z-index: 3;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.recruit-intro .recruit-intro__inner .recruit-intro__photo img {
  width: 100%;
  aspect-ratio: 16/10;
  /* ←表示形状を統一（超重要） */
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 1180px) {
  .recruit-intro .recruit-intro__inner {
    gap: 26px;
  }
  .recruit-intro .recruit-intro__photo {
    margin-left: -28px;
  }
  .recruit-intro .recruit-intro__text {
    transform: translateY(34px);
    min-height: 270px;
  }
}
@media (max-width: 768px) {
  .recruit-intro .recruit-intro__inner {
    gap: 0;
  }
  .recruit-intro .recruit-intro {
    padding: 48px 0;
  }
  .recruit-intro .recruit-intro__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 2%;
  }
  .recruit-intro .text-area {
    transform: none;
    /* ←段違い */
    padding: 10px;
    min-height: 300px;
  }
  .recruit-intro .recruit-intro__photo {
    margin-left: 0;
    order: -1;
  }
  .recruit-intro .recruit-intro__text {
    transform: none;
    min-height: auto;
    padding: 0;
  }
  .recruit-intro .recruit-intro__name {
    margin-right: 7%;
  }
}

/* =========================
　recruit-インタビュー
========================= */
.interview {
  position: relative;
  padding: 90px 0 40px;
  background: #fff;
}

.interview__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ✅ 全体で1つの透かし */
.interview__wm {
  position: absolute;
  left: 10px;
  /* 画面外に出さない */
  top: 150px;
  /* 見出しの少し下から */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 120px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 5px rgba(0, 0, 0, 0.45);
  opacity: 0.12;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 0;
}

/* 中身を透かしより前に */
.interview__head,
.iv-item {
  position: relative;
  z-index: 1;
}

/* 見出し */
.interview__head {
  margin-bottom: 22px;
}

.interview__h2 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.interview__en {
  font-size: 34px;
  font-weight: 900;
  color: #163a8a;
  letter-spacing: 0.02em;
}

.interview__jp {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}

/* ====== 1人分 ====== */
.iv-item {
  padding: 18px 0 50px;
  margin: 0 0 40px;
}

/* 本文レーン（画像のように細めで中央） */
.iv-item__catch,
.iv-qa,
.iv-item__sign {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* キャッチ */
.iv-item__catch {
  margin: 0 auto 30px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.9;
  text-align: center;
  color: #111;
}

/* QA */
.iv-qa {
  list-style: none;
  padding: 0;
  margin-top: 0;
  display: grid;
  gap: 22px;
}

.iv-qa__q {
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 900;
  color: #111;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.iv-qa__no {
  min-width: 26px;
  color: #163a8a;
  font-weight: 900;
}

.iv-qa__a {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: rgba(0, 0, 0, 0.72);
}

/* 署名 */
.iv-item__sign {
  margin: 34px auto 0;
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #111;
}

/* ===== 1180px以下 ===== */
@media (max-width: 1180px) {
  .interview {
    padding: 80px 0 30px;
  }
  .interview__wm {
    font-size: 104px;
    left: 6px;
    top: 170px;
  }
  .iv-item__catch {
    font-size: 20px;
  }
}
/* ===== SP ===== */
@media (max-width: 768px) {
  .interview {
    padding: 60px 0 25px;
  }
  .interview__en {
    font-size: 28px;
  }
  .interview__wm {
    font-size: 86px;
    left: 4px;
    top: 220px;
    opacity: 0.1;
  }
  .iv-item {
    padding-bottom: 36px;
    margin-bottom: 30px;
  }
  /* SPは読みやすさ優先 */
  .iv-item__catch,
.iv-qa,
.iv-item__sign {
    max-width: 100%;
  }
  .iv-item__catch {
    text-align: center;
    font-size: 18px;
  }
  .iv-item__sign {
    font-size: 18px;
    margin-right: 5%;
  }
}
@media (max-width: 430px) {
  .interview__wm {
    font-size: 76px;
    left: 2px;
  }
  .iv-item__catch {
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
  }
  .iv-item__sign {
    font-size: 18px;
    margin-bottom: 20px;
  }
}
/* =========================
  recruit overview
========================= */
.recruit-overview {
  background: #fff;
  padding: 50px 0 70px;
}

.recruit-overview__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 見出し */
.recruit-overview__head {
  text-align: center;
  margin-bottom: 34px;
}

.recruit-overview__title {
  margin: 0 0 10px;
  font-size: 34px;
  /* ←タイトルだけ調整 */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #0d2a70;
  /* ←青の濃さ調整 */
}

.recruit-overview__lead {
  margin: 0;
  font-size: 15px;
  /* ←リードだけ調整 */
  font-weight: 700;
  color: #111;
}

/* リスト全体 */
.recruit-overview__list {
  max-width: 650px;
  margin: 10px auto;
  display: grid;
  gap: 22px;
  /* ←行間 */
}

/* 1行 */
.recruit-overview__row {
  display: grid;
  grid-template-columns: 230px 1fr;
  /* ←左ラベル幅 */
  min-height: 110px;
  /* ←行の高さ感 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 左：青ラベル */
.recruit-overview__label {
  background: #13358a;
  /* ←青 */
  color: #fff;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.recruit-overview__en {
  margin: 0;
  font-size: 15px;
  /* ←英字だけ調整 */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.recruit-overview__jp {
  margin: 0;
  font-size: 19px;
  /* ←日本語ラベルだけ調整 */
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.95;
}

/* 右：本文（薄グレー） */
.recruit-overview__body {
  background: #f3f3f3;
  /* ←グレー */
  padding: 18px 26px;
  /* ←右側余白 */
  display: flex;
  align-items: center;
}

/* 箇条書き */
.recruit-overview__items {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 15px;
  /* ←本文だけ調整 */
  font-weight: 500;
  color: #111;
}

.recruit-overview__items li {
  line-height: 1.5;
}

/* 1行テキスト */
.recruit-overview__text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #111;
  line-height: 1.6;
}

/* =========================
  Responsive
========================= */
@media (max-width: 1180px) {
  .recruit-overview {
    padding: 60px 0 70px;
  }
  .recruit-overview__title {
    font-size: 32px;
  }
}
@media (max-width: 768px) {
  .recruit-overview {
    padding: 30px 0 50px;
  }
  .recruit-overview__head {
    margin-bottom: 30px;
  }
  .recruit-overview__title {
    font-size: 26px;
    line-height: 1.7;
  }
  .recruit-overview__row {
    grid-template-columns: 140px 1fr;
    /* ←SPで少し細く */
  }
  .recruit-overview__body {
    padding: 18px 18px;
  }
}
@media (max-width: 430px) {
  /* 430px以下は見やすさ優先で縦積み（必要なら外してOK） */
  .recruit-overview__inner {
    padding: 0 10px;
  }
  .recruit-overview__row {
    grid-template-columns: 130px 1fr;
    /* ←SPで少し細く */
  }
  .recruit-overview__label {
    padding: 16px 16px;
  }
  .recruit-overview__body {
    padding: 16px 12px;
  }
  .recruit-overview__en {
    font-size: 14px;
    /* ←英字だけ調整 */
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.02em;
  }
  .recruit-overview__jp {
    font-size: 17px;
    /* ←日本語ラベルだけ調整 */
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.95;
  }
  .recruit-overview__items {
    font-size: 14px;
    /* ←本文だけ調整 */
    font-weight: 500;
  }
  .recruit-overview__text {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    line-height: 1.6;
  }
}
/* =========================
  employment
========================= */
.employment {
  background: #f6f6f6;
  padding: 80px 0;
}

.employment__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

/* 見出し */
.employment__head {
  margin-bottom: 36px;
}

.employment__title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  color: #13358a;
}

.employment__en {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #13358a;
}

/* グリッド */
.employment__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 26px;
  align-items: stretch;
}

/* ピル型 */
.employment__item {
  min-height: 66px;
  border: 2px solid #13358a;
  border-radius: 999px;
  padding: 18px 26px;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 強調 */
.employment__big {
  font-size: 20px;
  margin-left: 6px;
}

.employment__note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

/* =========================
  Responsive
========================= */
@media (max-width: 768px) {
  .employment {
    padding: 60px 0;
  }
  .employment__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .employment__item {
    border-radius: 999px;
    /* ←SPでもピル */
    min-height: 64px;
    /* ←SP用高さ */
    padding: 14px 18px;
  }
}
@media (max-width: 430px) {
  .employment__item {
    font-size: 13px;
    padding: 14px;
  }
  .employment__big {
    font-size: 18px;
  }
}
/* =========================
 CTA（背景image版 / 完成図寄せ）
========================= */
.cta2__bg {
  position: relative;
  height: 50vw;
  min-height: 280px;
  max-height: 520px;
  background: url("../img/cta-bgi.jpg") top/cover no-repeat;
}

/* ★帯だけを中央寄せする */
.cta2__inner {
  position: absolute;
  left: 50%;
  top: 45%;
  /* ←完成図寄せ：50%より少し上/下にしたいならここ */
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 920px;
  text-align: center;
}

/* 青い帯 */
.cta2__panel {
  background: rgba(15, 40, 95, 0.6);
  padding: 40px 16px;
  /* ←高さ感はここ */
}

/* テキスト */
.cta2__catch {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.cta2__lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.85;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ===== application button（仕上がり画像寄せ） ===== */
.cta2__app {
  position: absolute;
  /* 位置は今のまま（right/bottomは既存を使用） */
  right: 3%;
  bottom: 5%;
  text-decoration: none;
  /* 土台を作るため */
  display: inline-block;
  z-index: 5;
}

/* 青い土台（右下にズレる） */
.cta2__app::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ボタンと同サイズ */
  background: #0f2f86;
  /* 濃紺 */
  transform: translate(8px, 10px);
  /* ←右下ズレ量（ここが肝） */
  z-index: -1;
}

/* 白いカード本体 */
.cta2__appCard {
  display: block;
  background: #fff;
  padding: 12px 18px;
  /* ←余白（画像っぽく少し厚め） */
  min-width: 250px;
  /* ←横幅（必要なら調整） */
  border-radius: 0;
  /* 角丸不要なら0 */
  box-shadow: none;
  /* 影は“土台”で表現するので基本なし */
}

/* application（英字） */
.cta2__appEn {
  display: block;
  font-size: 16px;
  /* ←大きめ */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #111;
}

/* 日本語 */
.cta2__appJp {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

/* hover（任意：少しだけ浮かせる） */
@media (hover: hover) {
  .cta2__app:hover::after {
    transform: translate(18px, 20px);
  }
  .cta2__app:hover {
    transform: translateY(-1px);
  }
}
/* =========================
 Responsive
========================= */
@media (max-width: 768px) {
  .cta2__bg {
    height: 70vw;
    min-height: 340px;
  }
  .cta2__inner {
    width: 92%;
    top: 46%;
  }
  .cta2__catch {
    font-size: clamp(18px, 2.9vw, 26px);
  }
  .cta2__appCard {
    padding: 12px 16px;
    /* ←余白（画像っぽく少し厚め） */
    min-width: 230px;
  }
  .cta2__appEn {
    font-size: 16px;
    /* ←大きめ */
    font-weight: 600;
  }
  .cta2__appJp {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
  }
}
@media (max-width: 430px) {
  .cta2__bg {
    height: 96vw;
    background-size: cover;
    background-position: right 20px;
  }
  .cta2__catch {
    font-size: 24px;
  }
  .cta2__appCard {
    padding: 8px 8px;
    /* ←余白（画像っぽく少し厚め） */
    min-width: 160px;
  }
  .cta2__appEn {
    font-size: 13px;
    /* ←大きめ */
    font-weight: 600;
  }
  .cta2__appJp {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
  }
}
/* =======================  3Dページ  ========================== */
/* =========================
  3D測定 FV
========================= */
.fv3d {
  position: relative;
  overflow: hidden;
  /* 背景グラデーション（完成図寄せ） */
  background: #013187;
}

/* 左のデザイン画像（3d-fv-bgi.png） */
.fv3d::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/3d-fv-bgi.png") left center/auto 100% no-repeat;
  pointer-events: none;
  opacity: 1;
  /* 必要なら薄くする */
}

.fv3d__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 520px;
  /* FV高さ */
  display: grid;
  grid-template-columns: 500px 1fr;
  align-items: center;
}

/* -------------------------
  Copy
------------------------- */
.fv3d__copy {
  padding-left: 10px;
}

.fv3d__catch {
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.fv3d__catchTop {
  display: block;
  font-size: 44px;
  /* ←上段だけ調整 */
  font-weight: 900;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.fv3d__catchBottom {
  display: block;
  margin-top: 16px;
  font-size: 42px;
  /* ←下段だけ調整 */
  font-weight: 900;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* -------------------------
  Visual（右側）
------------------------- */
.fv3d__visual {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 520px;
  /* ←右ビジュアル幅 */
  max-width: 100%;
}

/* 測定機画像 */
.fv3d__img {
  position: relative;
  z-index: 2;
  width: 520px;
  /* ←機械の見た目サイズ */
  max-width: 100%;
  height: auto;
  transform: translateX(-18px);
  /* ←六角内の寄せ（完成図寄せ） */
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.18));
}

/* =========================
  Responsive
========================= */
@media (max-width: 1180px) {
  .fv3d__inner {
    min-height: 480px;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
  }
  .fv3d__catchTop,
.fv3d__catchBottom {
    font-size: clamp(30px, 3.9vw, 38px);
  }
  .fv3d__visual {
    padding-top: 5%;
    width: 100%;
    margin: 0 auto;
  }
  .fv3d__plate {
    width: 100%;
    height: 390px;
  }
  .fv3d__img {
    padding-top: 3%;
    width: 100%;
  }
}
/* SP：縦積み（スマホ版画像寄せ） */
@media (max-width: 768px) {
  .fv3d::before {
    background-size: auto 100%;
    background-position: left center;
    opacity: 0.95;
  }
  .fv3d__inner {
    min-height: auto;
    padding: 44px 18px 24px;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  .fv3d__copy {
    padding-left: 0;
  }
  .fv3d__catchTop {
    font-size: 34px;
  }
  .fv3d__catchBottom {
    font-size: 34px;
    margin-top: 10px;
  }
  .fv3d__visual {
    margin: 0 0 0 auto;
    width: min(490px, 82vw);
  }
  .fv3d__img {
    width: 92%;
    transform: translateX(-8px);
  }
}
@media (max-width: 430px) {
  .fv3d__catchTop,
.fv3d__catchBottom {
    font-size: 30px;
  }
  .fv3d__visual {
    margin: 0 0 0 auto;
    width: min(330px, 70vw);
  }
}
/* =========================
  VL-800 section
========================= */
.vl800 {
  background: #fff;
  padding: 80px 0;
}

.vl800__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 上部テキスト */
.vl800__intro {
  margin: 0 0 36px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
}

/* 下：2カラム */
.vl800__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 画像｜テキスト */
  gap: 36px;
  align-items: center;
}

/* 画像 */
.vl800__media {
  margin: 0;
  display: flex;
  justify-content: center;
}

.vl800__media img {
  width: 100%;
  max-width: 460px;
  /* ←画像サイズ調整 */
  height: auto;
  display: block;
}

/* タイトル */
.vl800__title {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 900;
  color: #111;
  text-align: center;
}

/* 説明 */
.vl800__desc {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.9;
  color: #111;
}

/* =========================
  Responsive
========================= */
@media (max-width: 768px) {
  .vl800 {
    padding: 56px 0;
  }
  .vl800__intro {
    margin-bottom: 22px;
    font-size: 18px;
  }
  /* 縦並びへ */
  .vl800__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .vl800__media {
    justify-content: center;
    /* スマホ版は左寄せに寄る */
  }
  .vl800__media img {
    max-width: 460px;
    /* SPの見た目寄せ */
  }
  .vl800__title {
    font-size: 24px;
  }
  .vl800__desc {
    margin: 2px 0 18px;
    font-size: 16px;
  }
}
@media (max-width: 430px) {
  .vl800 {
    padding: 36px 0;
  }
  .vl800__intro {
    margin-bottom: 22px;
    font-size: 16px;
  }
  .vl800__media img {
    max-width: 280px;
  }
  .vl800__title {
    font-size: 22px;
  }
  .vl800__specRow dt {
    min-width: 120px;
  }
  .vl800__desc {
    margin: 2px 0 18px;
    font-size: 14px;
  }
}
/* =========================
  flow hex section
========================= */
.flowhex {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  /* セクション背景（1枚） */
  background: url("../img/3d-fv-bgi.png") center/cover no-repeat;
  /* ↑ もし専用背景が別なら差し替え */
}

/* 背景が明るい前提。必要なら薄く白膜 */
.flowhex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.flowhex__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* -------------------------
  上：白カード
------------------------- */
.flowhex__card {
  background: rgba(255, 255, 255, 0.92);
  padding: 34px 38px;
  max-width: 820px;
  margin: 0 auto 54px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}

.flowhex__cardTitle {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: #13358a;
}

.flowhex__cardSub {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.8;
  color: #111;
}

.flowhex__cardBody p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.9;
  font-weight: 600;
  color: #111;
}

.flowhex__cardFoot {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 700;
  color: #111;
}

/* =========================
  下：六角形エリア（PCは絶対配置で段々）
========================= */
/* =========================
  hexflow：3カラムで完成図寄せ
========================= */
.hexflow {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.hexflow__grid {
  display: grid;
  grid-template-columns: 330px 420px 330px;
  /* ←1fr禁止 */
  -moz-column-gap: 26px;
       column-gap: 26px;
  justify-content: center;
  align-items: start;
}

/* 左右列は中央寄せ（列内でズレない） */
.hexflow__col {
  justify-items: center;
}

/* 左列は上に寄る（完成図寄せ） */
.hexflow__col--left {
  padding-top: 110px;
  /* ←左列の開始位置 */
}

/* 右列はもう少し下げる（段違い） */
.hexflow__col--right {
  padding-top: 170px;
  /* ←右列の段違い量 */
}

/* 中央のメインは少し上寄り */
.hexflow__mainWrap {
  display: grid;
  place-items: start center;
  padding-top: 20px;
}

/* =========================
  HEX：形と中身（枠内に収める）
========================= */
.hex {
  width: 330px;
  height: 330px;
  -webkit-clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
          clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
  display: grid;
  overflow: hidden;
  /* ←はみ出しを物理的に防ぐ */
  padding: 48px 34px;
}

/* 中身は“枠内”に収める（重要） */
.hex > * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 色 */
.hex--blue {
  background: #13358a;
  color: #fff;
}

.hex--white {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

/* メインだけサイズ別（調整可能） */
.hex--main {
  width: 420px;
  height: 360px;
  padding: 64px 44px;
  place-items: center;
  text-align: center;
}

/* ステップ：番号→文章を枠内に収める */
.hex--step {
  grid-template-rows: auto 1fr;
  align-content: start;
}

/* 白は中央寄せ */
.hex--white.hex--step {
  place-items: start center;
  text-align: center;
}

/* 青は左寄せ + 文章幅を絞って枠内に収める */
.hex--blue.hex--step {
  place-items: start start;
  text-align: left;
}

/* 文章が外に出ないように“行幅”を強制 */
.hex--blue.hex--step .hex__text {
  max-width: 220px;
  /* ←これが効く：枠内に収める */
}

/* 番号 */
.hex__num {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

/* 文章 */
.hex__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  font-weight: 700;
}

/* 白背景の文字色 */
.hex__num--black,
.hex__text--black {
  color: #111;
}

/* メインテキスト */
.hex__mainTitle {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.hex__mainSub {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.95;
}

/* =========================
  SP：縦並び
========================= */
@media (max-width: 768px) {
  .hexflow__grid {
    grid-template-columns: 1fr;
    row-gap: 14px;
    justify-items: center;
  }
  .hexflow__col--left,
.hexflow__col--right,
.hexflow__mainWrap {
    padding-top: 0;
  }
  .hex {
    width: min(360px, 92vw);
    height: min(360px, 92vw);
  }
  .hex--main {
    width: min(380px, 92vw);
    height: min(380px, 92vw);
  }
  /* SPは文章幅制限を少し緩める */
  .hex--blue.hex--step .hex__text {
    max-width: 260px;
  }
}
/* =========================
  Responsive（SPは縦並び）
========================= */
@media (max-width: 768px) {
  .hexflow__main {
    width: min(380px, 92vw);
    height: 210px;
    margin-bottom: 18px;
  }
  .hexflow__cols {
    grid-template-columns: 1fr;
    row-gap: 14px;
    justify-items: center;
  }
  .hexflow__col {
    gap: 14px;
  }
  .hexflow__col--right {
    margin-top: 0;
    /* 段違い解除 */
  }
  .hex {
    width: min(360px, 92vw);
    height: 200px;
  }
}
.test-area {
  display: flex;
  width: 100%;
  height: 400px;
  background-color: #fffab3;
}
.test-area .flex-area1 {
  margin-left: auto;
  background-color: #ff6060;
  width: 400px;
  height: 300px;
  position: relative;
}
.test-area .flex-area1 .test-inner1 {
  position: absolute;
  background-color: #6080ff;
  width: 400px;
  height: 200px;
}
.test-area .flex-area2 {
  margin-right: auto;
  background-color: #60ff80;
  width: 400px;
  height: 300px;
  position: relative;
}
.test-area .flex-area2 .test-inner2 {
  position: absolute;
  background-color: #ff60fa;
  width: 400px;
  height: 200px;
}

/* =========================
   Works
========================= */
.works {
  padding: 90px 0;
  background: #fff;
}

.works__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- hero ---- */
.works-hero {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 44px;
  max-width: 900px;
  margin: 30px auto 70px;
}

.works-hero__title {
  width: 180px;
  background: #0b3a90;
  display: grid;
  place-items: start center;
  padding-top: 36px;
}

.works-hero__h2 {
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
}
.works-hero__h2 span {
  display: inline-block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
  opacity: 0.95;
}

.works-hero__media {
  margin: 0;
  flex: 1;
  min-width: 0;
  background: #eee;
}

.works-hero__media img {
  width: 100%;
  height: auto;
  /* 高さを画像比率に任せる */
  -o-object-fit: contain;
     object-fit: contain;
  /* ← 全体を見せる */
  display: block;
}

/* ---- cards ---- */
.works-cards {
  display: flex;
  flex-wrap: wrap;
  /* ←増えても折り返す */
  gap: 22px;
  justify-content: center;
  /* 余白が出ても中央寄せ */
  margin-bottom: 46px;
}

.works-card {
  flex: 1 1 300px;
  max-width: 340px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  /* ←追加 */
  flex-direction: column;
  /* ←追加 */
}

.works-card__img {
  margin: 0;
  background: #ddd;
}

.works-card__img img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.works-card__body {
  padding: 14px 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  flex: 1;
  /* ←これで全カード同じ高さになる */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.works-card__label {
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 13px;
  color: #111;
  display: flex;
  gap: 8px;
  align-items: center;
}
.works-card__label span {
  color: #0b3a90;
}

.works-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
}

/* ---- foot ---- */
.works__foot {
  text-align: center;
}

.works__catch {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.works__desc {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: rgba(0, 0, 0, 0.75);
}

/* =========================
   Responsive
========================= */
@media (max-width: 768px) {
  .works {
    padding: 70px 0;
  }
  /* SP：タイトル枠は画像の上で同幅 */
  .works-hero {
    position: relative;
    display: block;
    margin-bottom: 34px;
    max-width: 600px;
  }
  .works-hero__title {
    width: 100%;
    padding: 18px 0;
    place-items: center;
  }
  .works-hero__h2 {
    font-size: 22px;
  }
  .works-hero__h2 span {
    font-size: 16px;
  }
  /* 事例は縦1列 */
  .works-cards {
    gap: 16px;
  }
  .works-card {
    flex: 1 1 100%;
    max-width: 520px;
    /* 中央寄せで綺麗 */
  }
  .works__catch {
    font-size: 16px;
  }
}
@media (max-width: 430px) {
  .works__catch {
    font-size: 15px;
  }
}
/* =========================
   バナーセクション
========================= */
.banner {
  padding: 80px 0;
  background: linear-gradient(135deg, #8e8d8d 0%, #a9a9a9 35%, #f9f9f9 55%);
  position: relative;
  overflow: hidden;
}

.banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 40px;
  align-items: center;
  grid-template-areas: "title image text";
}

/* 各エリア指定 */
.banner__title {
  grid-area: title;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

.banner__image {
  grid-area: image;
}
.banner__image img {
  width: 100%;
  height: auto;
  display: block;
}

.banner__text {
  grid-area: text;
  line-height: 1.8;
}

/* ======================
Tablet（テキスト下段）
====================== */
@media (max-width: 1180px) {
  .banner__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title image" "text  text";
  }
  .banner__inner .banner__title {
    text-align: center;
  }
  .banner__inner .banner__text {
    max-width: 600px;
    margin: 0 auto;
  }
}
/* ======================
SP（完全縦並び）
====================== */
@media (max-width: 768px) {
  .banner__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "image" "text";
  }
  .banner__title {
    text-align: center;
  }
}
/* ======================
SmallSP 微調整
====================== */
@media (max-width: 430px) {
  .banner__title {
    font-size: 24px;
  }
}
.proof {
  padding: 90px 0;
  background: #fff;
}

.proof__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  gap: 34px 44px;
  align-items: center;
  /* PC：タイトル1段目 / 下段に text image cta */
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  grid-template-areas: "title title title" "text  image cta";
}

.proof__title {
  grid-area: title;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.proof__text {
  grid-area: text;
}

.proof__image {
  grid-area: image;
  display: flex;
  justify-content: center;
}

.proof__cta {
  grid-area: cta;
  margin-left: auto;
}

/* bottomはPCでは“展開”して、image/ctaをグリッドに流し込む */
.proof__bottom {
  display: contents;
}

/* 画像 */
.proof__image img {
  width: min(260px, 100%);
  height: auto;
  display: block;
}

/* 六角CTA（そのままでOKなら省略可） */
.proof__cta {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 1/0.92;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  background: #173a8f;
  color: #fff;
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
          clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  padding: 18px;
}
.proof__cta .proof__ctaTop,
.proof__cta .proof__ctaMain {
  font-size: 17px;
}
.proof__cta .proof__ctaSub {
  margin-top: 15px;
  font-size: 13px;
}

/* ======================
SP：縦並び 
====================== */
/* ======================
SP：完全縦並び
====================== */
@media (max-width: 768px) {
  .proof {
    padding: 60px 0;
  }
  .proof__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    grid-template-areas: "title" "text" "image" "cta";
  }
  .proof__title {
    font-size: 24px;
    text-align: center;
  }
  .proof__image {
    justify-content: center;
  }
  .proof__image img {
    width: 70%;
    max-width: 260px;
    margin: 0 auto;
  }
  .proof__cta {
    margin: -120px 3% 0 auto;
    width: 220px;
  }
}
@media (max-width: 430px) {
  .proof__image img {
    width: 70%;
    max-width: 260px;
    margin: 0 auto -20px 20px;
  }
  .proof__cta {
    margin: -120px 3% 0 auto;
    width: 220px;
  }
}
/* =======================  お問い合わせフォーム  ========================== */
.contact {
  padding: 90px 0;
  background: #fff;
}

.contact__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

.contact__head {
  margin-bottom: 26px;
}

.contact__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 900;
  color: #163a8a;
}

.contact__lead {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: rgba(0, 0, 0, 0.7);
}

/* フォーム枠 */
.contact-form {
  margin-top: 18px;
  padding: 28px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
}

/* 2カラム */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
}

.contact-form__field--full {
  grid-column: 1/-1;
}

.contact-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.8);
}

.contact-form__req {
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: #163a8a;
  padding: 2px 8px;
  border-radius: 999px;
}

/* 入力 */
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  font-size: 14px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: #fff;
  outline: none;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 160px;
}

/* フォーカス */
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: rgba(22, 58, 138, 0.55);
  box-shadow: 0 0 0 4px rgba(22, 58, 138, 0.12);
}

/* 罠フィールド（非表示） */
.contact-form__botcheck {
  display: none;
}

/* 同意 */
.contact-form__agree {
  margin-top: 4px;
}

.contact-form__checkbox {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.72);
}
.contact-form__checkbox input {
  width: 18px;
  height: 18px;
}

/* 送信 */
.contact-form__actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.contact-form__submit {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: #163a8a;
  cursor: pointer;
}

.contact-form__submit:hover {
  filter: brightness(1.05);
}

.contact-form__note {
  margin: 0;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .contact {
    padding: 60px 0;
  }
  .contact-form {
    padding: 20px;
  }
  .contact-form__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 430px) {
  .contact__title {
    font-size: 24px;
  }
}
/* =========================
   Thanks Page
========================= */
.thanks {
  min-height: 75svh; /* スマホ対応のvh */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
  background: #fff;
}

.thanks__inner {
  width: 100%;
  max-width: 720px;
}

.thanks__box {
  text-align: center;
  padding: 56px 48px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1294117647);
}

/* ===== Text ===== */
.thanks__title {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 900;
  color: #163a8a;
  line-height: 1.6;
}

.thanks__lead {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 2;
  color: rgba(0, 0, 0, 0.75);
}

/* ===== Info ===== */
.thanks__info {
  margin-bottom: 34px;
}

.thanks__info p {
  margin: 0;
}

.thanks__tel {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

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

/* ===== Button ===== */
.thanks__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 52px;
  padding: 0 24px;
  background: #163a8a;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: 0.25s;
}

.thanks__btn:hover {
  filter: brightness(1.08);
}

/* =========================
   Tablet
========================= */
@media (max-width: 768px) {
  .thanks {
    padding: 60px 16px;
  }
  .thanks__box {
    padding: 44px 28px;
  }
  .thanks__title {
    font-size: 24px;
  }
  .thanks__lead {
    font-size: 14px;
  }
  .thanks__tel {
    font-size: 18px;
  }
  .thanks__btn {
    min-width: 220px;
    height: 48px;
    font-size: 14px;
  }
}
/* =========================
   Small SP
========================= */
@media (max-width: 430px) {
  .thanks {
    padding: 48px 14px;
  }
  .thanks__box {
    padding: 36px 14px;
    border-radius: 14px;
  }
  .thanks__title {
    font-size: 18px;
  }
  .thanks__lead {
    font-size: 14px;
    line-height: 1.9;
  }
  .thanks__info p {
    font-size: 14px;
  }
  .thanks__tel {
    font-size: 17px;
  }
  .thanks__btn {
    width: 100%; /* ← スマホは横いっぱい */
    height: 48px;
    font-size: 14px;
  }
}
/* =============  fade  ================ */
/* ============= fade ================ */
/* =============  fade  ================ */
/* 共通：visibilityは使わず、opacity+transformのみ */
.js-fadeBottom,
.js-fadeTop,
.js-fadeLeft,
.js-fadeRight {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* 下から */
.js-fadeBottom {
  transform: translateY(80px);
  transition: opacity 1.2s ease, transform 2.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.js-fadeBottom.scroll {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 上から */
.js-fadeTop {
  transform: translateY(-60px);
  transition: opacity 1s ease, transform 2.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.js-fadeTop.scroll {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 左から */
.js-fadeLeft {
  transform: translateX(80px);
  transition: opacity 1s ease, transform 2.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.js-fadeLeft.scroll {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* 右から */
.js-fadeRight {
  transform: translateX(-80px);
  transition: opacity 1s ease, transform 2.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.js-fadeRight.scroll {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ===== delay utility ===== */
.delay-1 {
  transition-delay: 0ms !important;
}

.delay-2 {
  transition-delay: 400ms !important;
}

.delay-3 {
  transition-delay: 800ms !important;
}

.delay-4 {
  transition-delay: 1200ms !important;
}

.delay-5 {
  transition-delay: 1600ms !important;
}

.footer {
  background: #163a8a; /* 画像の濃いブルーに近い */
  color: rgba(255, 255, 255, 0.92);
}
.footer a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  opacity: 0.92;
}
.footer a:hover {
  opacity: 1;
}
.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 16px 28px;
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.4fr; /* 左少し広め */
  gap: 28px;
  align-items: start;
}
.footer__logo img {
  height: 32px;
  width: auto;
  display: block;
}
.footer__text {
  margin: 18px 0 16px;
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.9;
}
.footer__dl {
  margin: 0;
}
.footer__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__row dt {
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.footer__row dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.92;
}
.footer__ttl {
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin: 0 0 14px;
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer__list li a {
  display: inline-block;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
}
.footer__list .is-cta {
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  display: inline-block;
}
.footer__label {
  font-size: 12px;
  opacity: 0.85;
  margin: 0 0 6px;
}
.footer__addr {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.92;
}
.footer__tel {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.9;
}
.footer__tel a {
  font-weight: 700;
  opacity: 1;
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 14px 16px 18px;
  text-align: center;
}
.footer__copy {
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* ===== SP：縦積みで崩れない ===== */
@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 36px 26px 22px;
    width: 92%;
    margin: 0 auto;
  }
  .footer__row {
    grid-template-columns: 89px 1fr;
  }
  .footer__nav {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */