.secTtl .subTtl {
  /*font-family: "Barlow Condensed", sans-serif;*/
  font-weight: 500;
  color: var(--main-color);
  text-transform: uppercase;
  font-size: 18px;
}
.secTtl h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 2px;
}
@media (min-width: 768px) {
  .secTtl .subTtl {
    font-size: 24px;
  }
  .secTtl h3 {
    font-size: 28px;
  }
}
/*mission*/
.mission {
    background-color: var(--main-color);
    color: #FFF;
    gap: 15px;
}
.mission .missionConts {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 767px) {
.mission .missionConts {
  padding-bottom: 50px;
  gap: 30px;
}
.mission .missionConts .text {
    font-size: calc(100vw / 20);
}
}
@media (min-width: 768px) {
.mission {
    background-image: url(../img_n/missionBg.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-size: auto 445px;
}
.mission .missionConts {
    height: 445px;
}
.mission .missionConts .text {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: calc(100vw / 50);
}
}
/*message*/
.message {
  margin-bottom: 30px;
}
.messageConts {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
  .messageText {
    display: flex;
    flex-direction: column;
    gap: 15x;
  line-height: 2.2;
  text-align: justify;
}
@media (max-width: 767px) {
  .messageText {
    padding: 15px;
  }
  .messagePhoto {
    margin-left: 30px;
  }
}
@media (min-width: 768px) {
.message {
    background-image: url(../img_n/messageBg.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    min-height: 657px;
    background-size: auto 657px;
    margin-bottom: 100px;
}
.messageConts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 740px);
  gap: 70px;
  align-items: center;
}
  .messageText {
    width: 80%;
    max-width: 750px;
    margin-left: auto;
  }
  .messageText .comment {
  font-size: 18px;
    margin-left: 1em;
  }
}

/*会社概要*/
.gaiyo .secTtl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.gaiyo .secTtl .subTtl {
  position: relative;
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
  text-transform: capitalize;
  font-weight: 600;
}
.gaiyo .secTtl .subTtl::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  width: 15px; /* 丸の直径 */
  height: 15px; /* 丸の直径 */
  background-color: var(--main-color); /* 丸の色 */
  border-radius: 50%; /* 角を丸くして正円にする */
}
.gaiyo dl {
  margin-inline: auto;
  border-top: 1px solid #ccc;
}
.gaiyo dl dt {
  font-weight: 600;
  padding: 8px 8px 8px;
}
.gaiyo dl dd {
  border-bottom: 1px solid #ccc;
  padding: 0 8px 8px;
}
@media (min-width: 768px) {
  .gaiyo dl {
    width: 80%;
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
  }
  .gaiyo dl dt {
    flex-basis: 30%;
    padding: 15px;
    border-bottom: 1px solid #ccc;
  }
  .gaiyo dl dd {
    flex-basis: 70%;
    padding: 15px;
  }
}
/*経営理念*/
.pholosophy {
  background-image: url(../img_n/pholosophyBg.jpg);
  background-repeat: no-repeat;
  background-size: auto 25%;
  background-position: center top -30px;
  min-height: 400px;
  padding-block: 120px 30px;
}
.pholosophy .philConts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.pholosophy .philConts .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left 50px bottom 0;
  height: 260px;
}
.pholosophy .philConts .card.phil01 {
  background-image: url(../img_n/phil01.jpg);
}
.pholosophy .philConts .card.phil02 {
  background-image: url(../img_n/phil02.jpg);
}
.pholosophy .philConts .card .text_wrap {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.pholosophy .philConts .card .text_wrap .num {
  font-family: "Barlow Condensed", sans-serif;
  color: var(--main-color);
  font-size: 30px;
}
.pholosophy .philConts .card .text_wrap .text_block {
  background-color: #fff;
  padding: 0.5em 1em;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.pholosophy .philConts .card .text_wrap .text_block p {
  font-weight: 600;
  font-size: 18px;
}
@media (min-width: 768px) {
  .pholosophy {
    min-height: 760px;
    padding-block: 400px 80px;
    background-size: 100% auto;
  }
  .pholosophy .philConts {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .pholosophy .philConts .secTtl {
    grid-area: 1 / 1 / 2 / 2;
  }
  .pholosophy .philConts .phil01 {
    grid-area: 1 / 2 / 3 / 3;
  }
  .pholosophy .philConts .phil02 {
    grid-area: 2 / 1 / 4 / 2;
  }
  .pholosophy .philConts .card {
    height: 480px;
  }
  .pholosophy .philConts .card .text_wrap {
    margin-bottom: 50px;
  }
  .pholosophy .philConts .card .text_wrap .num {
    font-size: 40px;
}
.pholosophy .philConts .card .text_wrap .text_block p {
    font-size: 26px;
    letter-spacing: 2px;
  }
}

/*基本方針*/
.value {
  background-color: var(--main-color);
}
.value .ttlWrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.value .secTtl .subTtl {
  color: #fff;
}
.value .ttlWrap .lead {
  color: #fff;
}
.value .valueConts {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.value .valueConts .item {
  flex-basis: calc(50% - 8px);
  background-color: #fff;
  border-radius: 999px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 30px 50px;
  font-weight: 500;
}
.value .valueConts .item .icon {
    flex-basis: calc(45% - 30px);
}
@media (min-width: 768px) {
  .value {
    padding-block: 80px;
  }
  .value .ttlWrap {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
  }
  .value .valueConts {
    flex-direction: row;
    gap: 15px;
    width: 80%;
    max-width: 1200px;
    margin-inline: auto;
  }
  .value .valueConts .item {
    flex-basis: calc(20% - 12px);
    flex-direction: column;
    gap: 45px;
    padding: 60px 30px;
  }
}
/*店舗情報*/
.locations {
  background-image: url(../img_n/locationBg.jpg);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: #b7d2d9;
  padding-block: 50px;
}
.locations .secTtl {
  margin-bottom: 30px;
}
.locations .locConts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.locations .locConts .item {
  display: flex;
  flex-direction: column;
}
.locations .locConts .item span,
.locations .locConts .item a {
  display: block;
  background-color: rgba(51, 51, 56, 0.8);
  color: #fff;
  padding: 15px;
}
.locations .locConts .item h4 {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 0.5em;
}
.locations .locConts .item p {
  color: #c9c9c9;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 767px) {
}
@media (min-width: 768px) {
.locations {
  padding-block: 100px;
}
  .locations .secTtl {
    margin-bottom: 50px;
  }
  .locations .locConts {
    width: 650px;
  }
  .locations .locConts .item a:hover {
    background-color: rgba(51, 51, 56, 1);
  }
  .locations .locConts .item h4 {
    font-size: 16px;
  }
  .locations .locConts .item p {
    font-size: 14px;
  }
}

/* ==================================================
 company main visual：PC SVG 2ファイル版
================================================== */

/* ── PC：基本レイアウト ─────────────────────────── */
.company_mv {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: -82px;
  overflow: visible;
  background: #fff;
  z-index: 1;
}

.company_mv_inner {
  position: relative;
  width: 100vw;
  max-width: none;
  aspect-ratio: 1914.67 / 1501.56;
  margin: 0;
  background-image: url("../img_n/bg_pc.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  z-index: 10;
}

.company_mv_svg {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.company_mv_svg_img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 左上の線を少し左上へ移動 */
.company_mv_svg01 {
  transform: translate(-34px, -28px);
}

/* ── SVG線・ロゴ ────────────────────────────────── */
.company_mv_svg_img .pc01-cls-2,
.company_mv_svg_img .pc02-cls-2 {
  fill: none;
  stroke: #c9171d;
  stroke-width: 6px;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

.company_mv_svg_img .pc01-cls-3 {
  fill: #c9171d;
  opacity: 1;
}

/* ── PC：線描画アニメーション ───────────────────── */
.company_mv.is-active .company_mv_svg_pc01 .pc01-cls-2 {
  animation: companyMvDraw 1.25s ease-out forwards;
}

.company_mv.is-active .company_mv_svg_pc02 .pc02-cls-2 {
  animation: companyMvDraw 1.8s ease-out 0.9s forwards;
}

@keyframes companyMvDraw {
  to { stroke-dashoffset: 0; }
}

/* ── PC：写真ブロック ────────────────────────────── */
.company_mv_photo {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
}

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

.company_mv_photo.photo01 { left: 3%;  top: 20%; width: 30%; height: 30%; }
.company_mv_photo.photo02 { right: 0;  top: 2.5%; width: 25vw; max-width: 390px; height: 21%; border-radius: 18px 0 0 18px; }
.company_mv_photo.photo03 { right: 11%; top: 32%; width: 22%; height: 24%; }
.company_mv_photo.photo04 { left: 27%; top: 70%; width: 15%; height: 17%; z-index: 50; }


/* ── PC：テキスト ────────────────────────────────── */
.company_mv_text {
  position: absolute;
  top: 31.5%;
  left: 50%;
  z-index: 5;
  width: clamp(320px, 25vw, 380px);
  transform: translateX(-50%);
  text-align: center;
  color: #111;
  font-size: clamp(9px, 0.72vw, 10.5px);
  line-height: 2.05;
  font-weight: 600;
}

.company_mv_text,
.company_mv_text * {
  font-size: inherit;
  line-height: inherit;
  font-weight: 600;
}

.company_mv_text p {
  margin: 0 0 2em;
}

/* ── CSSの補助線は使わない ──────────────────────── */
.company_mv::after,
.mission::before,
.mission::after {
  content: none !important;
  display: none !important;
}

/* missionをMVに少し重ねる */
.mission {
  position: relative !important;
  z-index: 2 !important;
}


/* ==================================================
 スマホ専用MV
================================================== */
.company_mv_sp {
  display: none;
}

@media (max-width: 767px) {

  /* PC用MVは非表示 */
  .company_mv {
    display: none !important;
  }

  /* ── SP：ラッパー ──────────────────────────────── */
  .company_mv_sp {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .company_mv_sp_inner {
    position: relative !important;
    width: 100% !important;
    min-height: 1800px !important;
    padding-top: 0 !important;
  }

  /* ── SP：共通 absolute 配置 ────────────────────── */
  .sp_photo,
  .sp_svg,
  .sp_text {
    position: absolute !important;
  }

  /* ── SP：写真共通 ──────────────────────────────── */
  .sp_photo {
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #fff !important;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .sp_photo01,
  .sp_photo02,
  .sp_photo03,
  .sp_photo04 {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .sp_photo img,
  .sp_svg img {
    display: block !important;
    width: 100% !important;
  }

  .sp_photo img {
    height: 100% !important;
    object-fit: cover !important;
  }

  .sp_svg img {
    height: auto !important;
  }

  /* ── SP：写真位置 ──────────────────────────────── */
  .sp_photo01 {
    left: 13% !important;
    top: 28px !important;
    width: 34% !important;
    z-index: 4 !important;
  }

  .sp_photo02 {
    right: 9% !important;
    top: 82px !important;
    width: 34% !important;
    z-index: 4 !important;
    transition-delay: 0.25s;
  }

  /* ── SP：上部SVG（人と車）────────────────────────  */
  .sp_svg01 {
    left: 50% !important;
    top: 185px !important;
    width: 128% !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
  }

  /* ── SP：テキスト ──────────────────────────────── */
  .sp_text {
    left: 50% !important;
    top: 700px !important;
    width: 95% !important;
    transform: translateX(-50%) translateY(12px) !important;
    z-index: 5 !important;
    text-align: center !important;
    color: #111 !important;
    font-size: 13px !important;
    line-height: 2 !important;
    font-weight: 600 !important;
    opacity: 0;
    transition: opacity 0.8s ease 0.55s, transform 0.8s ease 0.55s;
  }

  .sp_text p {
    margin: 0 0 22px !important;
  }

  /* ── SP：下部エリア ────────────────────────────── */
  .sp_lower {
    position: absolute !important;
    left: 0 !important;
    top: 770px !important;
    width: 100% !important;
    height: 620px !important;
  }

  /* ── SP：下部SVG ───────────────────────────────── */
  .sp_svg02 {
    left: 50% !important;
    top: 0 !important;
    width: 128% !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
  }

  /* ── SP：下部写真 ──────────────────────────────── */
  .sp_photo03 {
    right: 8% !important;
    bottom: -208px !important;
    width: 36% !important;
    z-index: 4 !important;
    transition-delay: 0.55s;
  }

  .sp_photo04 {
    left: 8% !important;
    bottom: -315px !important;
    width: 35% !important;
    z-index: 50 !important;
    transition-delay: 0.8s;
  }

  /* ── SP：mission帯との接続 ─────────────────────── */
  .company_mv_sp::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 82px;
    width: 2px;
    height: 160px;
    background: #c9171d;
    transform: translateX(-50%);
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
  }

  .company_mv_sp + .mission,
  .mission {
    margin-top: -200px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* ── SP：初回表示アニメーション ────────────────── */
  .company_mv_sp.is-sp-first-active .sp_svg01 {
    animation: spLineDraw01 1.4s ease-out 0.2s forwards;
  }

  .company_mv_sp.is-sp-first-active .sp_photo01,
  .company_mv_sp.is-sp-first-active .sp_photo02 {
    opacity: 1;
    transform: translateY(0) !important;
  }

  .company_mv_sp.is-sp-first-active .sp_text {
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* ── SP：スクロール後アニメーション ────────────── */
  .sp_lower.is-sp-lower-active .sp_svg02 {
    animation: spLineDraw02 1.5s ease-out 0.1s forwards;
  }

  .sp_lower.is-sp-lower-active .sp_photo03,
  .sp_lower.is-sp-lower-active .sp_photo04 {
    opacity: 1;
    transform: translateY(0) !important;
  }

  /* ── SP：キーフレーム ──────────────────────────── */
  @keyframes spLineDraw01 {
    from { opacity: 1; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }

  @keyframes spLineDraw02 {
    from { opacity: 1; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }
}


/* ── 480px以下の微調整 ──────────────────────────── */
@media (max-width: 480px) {
  .company_mv_sp_inner {
    min-height: 1415px !important;
  }

  .sp_photo01 { top: 38px !important; }
  .sp_photo03 { top: 150px !important; }
  .sp_photo04 { top: 345px !important; }

  .sp_svg01   { top: 185px !important; }
  .sp_text    { top: 455px !important; font-size: 12px !important; }
  .sp_lower   { top: 770px !important; }
}