@charset "utf-8";
body {
  overflow-x: hidden;
}
/*
   MV
--------------------------------------------------------------*/
.mv {
  /* SPのヘッダーは 57px（common.css で上下6pxの余白を追加）*/
  height: calc(100svh - 57px);
  background-image: linear-gradient(180deg, #F3E7DA, #FBF2E8 50%, #FFF9F2);
}
.mv-img > * {
  width: 100%;
  height: calc(100svh - 75px);
  object-position: top;
}
/* .mv-catch-inner > * {
  opacity: 0;
  filter: blur(15px);
  transition:
    opacity 0.8s ease,
    filter 1s ease,
    transform 0.8s ease;
} */

body.mv-start .mv-catch-inner > * {
  opacity: 1;
  /* filter: blur(0); */
}
.caption-flex {
  display: flex;
  column-gap: 12px;
  flex-direction: column;
}
/* .mv-catch-inner::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
     rgba(255, 255, 255, .85) 0%,
     rgb(255,255,255, .85) 90%, 
     rgba(255, 255, 255, 0) 100%
  );
  border-radius: 50%;
  filter: blur(50px);
} */
/* .mv-cta{
  height: calc(100dvh - 45px);
} */
.mv-cta {
  right: 0;
  bottom: 10px;
}
.body.mv-start .mv-cta {
  width: 100%;
  max-width: 1120px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  opacity: 1;
  transition:
    opacity 0.8s ease 1s,
    bottom 0.8s ease 1s,
    transform 0.8s ease 1s;
}
.mv-cta li {
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.mv-cta-actions {
  background-color: rgba(107, 90, 78, 0.82);
}
/* .mv-cta-actions li + li::before{
  content: '';
  position: absolute;
  height: calc(100% - 30px);
  width: 1px;
  background-color: #fff;
  left: 0;
  top: 15px;
} */

.mv-cta-actions {
  border-radius: 10px;
  padding-top: 36px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  background-color: rgba(255, 249, 242, 0.92);
  border: 2px solid var(--color-accent);
}

.mv-point {
  width: 90.4vw;
  margin-top: 40px;
  /* transition: opacity 1.2s ease 0.2s; */
  gap: 2px;
}
body.mv-start .mv-point {
  opacity: 1;
}
.mv-point .ls {
  letter-spacing: -0.05rem;
}

/* 小関追加 */
.gold-color {
  background: linear-gradient(
    180deg,
    #A54B12 0%,
    #C25E1B 16%,
    #F2994A 34%,
    #FFE0BC 48%,
    #F7B267 60%,
    #E07B2A 74%,
    #C25E1B 88%,
    #F2994A 100%
  );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(120, 60, 15, 0.5))
    drop-shadow(0 4px 10px rgba(194, 94, 27, 0.25));
}

.va {
  vertical-align: -10%;
}
.mv-bg {
  line-height: 33px;
}
.line-cta {
  background-color: var(--color-cta-line);
  height: 45px;
  line-height: 45px;
}
.mail-cta {
  background-color: var(--color-cta-mail);
  height: 35px;
  line-height: 35px;
}
.tel-cta {
  background-color: var(--color-cta-tel);
  height: 35px;
  line-height: 35px;
}
.cta-caption {
  color: #FFE08A;
}

.arrow_box {
  top: 25px;
  padding: 10px 0;
  height: 52px;
  border-radius: 50px;
  position: relative;
  background: #ffffff;
  border: 2px solid var(--color-accent);
  max-width: 660px;
  margin: 0 auto;
}
.arrow_box:after,
.arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ffffff;
  border-width: 7px;
  margin-left: -7px;
}
.arrow_box:before {
  border-color: rgba(194, 94, 27, 0);
  border-top-color: var(--color-accent);
  border-width: 10px;
  margin-left: -10px;
}

.shokai-caption {
  max-width: 300px;
  background-image: url(../img/shokai-marker-sp.png);
  background-position: bottom;
  background-position-y: 110px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
}

/* 文字の上に点 */
.dots {
  background-image: radial-gradient(
    circle at center,
    #FBD3B6 20%,
    transparent 20%
  ); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.4em; /* 点の間隔とサイズ調整 */
  padding-top: 5px; /* 縦方向の位置調整 */
  color: var(--color-red);
}
.fw-600 {
  font-weight: 600;
}
.prime2 {
  max-width: 591px;
  margin-left: auto;
  margin-right: auto;
}
.shokai-keyaku {
  width: 122px;
}
.chosa-limit {
  width: 200px;
  border-radius: 50px;
}

.t__r {
  text-align: right;
}
.caption2 {
  color: #fff;

  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.65);
}

.caption {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
  background-color: #ffffff;
  width: 137px;
  height: 42px;
  text-align: center;
  border: solid 1px var(--color-accent);
}
.mv-catch-titlebg {
  width: 100%;
  height: 200px;
  background-image: url("../img/mv-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; /* coverからcontainに変更 */
}
.mv-cta-actions {
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
  padding-top: 10px;
}
.mv-catch-copy {
  top: 0;
  left: 0;
}
.line-cta {
  width: 100%;
  /* height: 45px;
  line-height: 45px; */
}
.mail-cta {
  width: 48.5%;
  /* height: 35px;
  line-height: 35px; */
}
.tel-cta {
  width: 48.5%;
  /* height: 35px;
  line-height: 35px; */
}
.mv-cta li {
  margin-left: 0;
  margin-right: 0;
}

.mv-catch-inner {
  top: 0px;
}

.chosa-limit {
  width: 148px;
}
.mv-catch-inner::before {
  display: none;
}
.mv-catch-inner h1,
.mv-catch-inner p,
.mv-catch-inner span {
  box-shadow: 0px 5px 5px 0px rgba(0, 4px, 4px0, 0.65);
}

.chosa-caption {
  max-width: 300px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  .mv-bg {
    width: 307px;
    top: 28px;
    height: 172px;
    line-height: 1.5;
  }
  .mv-catch-titlebg {
    height: 280px;
  }
  .mv-point {
    margin-top: 20px;
    width: 65vw;
    gap: 2%;
  }
  .mv-catch-copy {
    top: 0;
  }
  .mv-catch-inner {
    left: 0px;
    top: 0px;
  }
  .line-cta {
    background-color: var(--color-cta-line);
    height: initial;
    line-height: initial;
  }
  .mail-cta {
    background-color: var(--color-cta-mail);
    height: initial;
    line-height: initial;
  }
  .tel-cta {
    background-color: var(--color-cta-tel);
    height: initial;
    line-height: initial;
  }
  .arrow_box {
    top: 0;
  }

  .caption2 {
    color: var(--color-base2);
    text-shadow: initial;
  }
  .caption {
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    background-color: #ffffff;
    width: 173px;
    height: 53px;
    text-align: center;
    border: solid 1px var(--color-accent);
  }
  .chosa-caption {
    max-width: 591px;
  }
  .shokai-caption {
    max-width: 564px;
    background-image: url(../img/shokai-marker.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
  }
  .mv-catch-inner h1 {
    margin-top: 30px;
    margin-left: 20px;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .caption-flex {
    flex-direction: row;
  }
  .arrow_box {
    top: 25px;
  }
  .mv-bg {
    width: 400px;
    top: 23px;
    height: 184px;
  }
  .promise-container {
    max-width: 869px;
  }
  .flex-right-text {
    display: flex;
    align-items: baseline;
  }
  .mv-catch-titlebg {
    width: 724px;
    height: 299px;
    column-gap: 24px;
    padding-left: 40px;
    background-image: url("../img/mv-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; /* coverからcontainに変更 */
  }
  .mv {
    /* ヘッダー92px + グローバルナビ46px */
    height: calc(100vh - 138px);
    min-height: 620px;
  }
  .mv-img > * {
    width: 73vw;
    height: calc(100vh - 188px);
    min-height: 570px;
    margin-left: auto;
  }
  .mv-catch-copy {
    height: calc(100vh - 188px);
    min-height: 570px;
    top: 52%;
    transform: translateY(-50%);
    bottom: initial;
  }
  .mv-catch-inner {
    position: absolute;
    top: -50px;
    left: 0;
    width: 700px;
  }
  .mv-catch-inner h1 {
    margin-top: 30px;
    margin-left: 80px;
  }

  .va {
    vertical-align: -20%;
  }
  .mv-cta {
    right: -40px;
    bottom: 0;
    opacity: 0;
  }
  body.mv-start .mv-cta {
    max-width: 1120px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    opacity: 1;
    transition:
      opacity 0.8s ease 0.8s,
      right 0.8s ease 0.8s,
      transform 0.8s ease 0.8s;
  }
  .mv-cta-actions {
    border-radius: 10px;
    padding-top: 36px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    column-gap: 22px;
    background-color: rgba(255, 249, 242, 0.92);
    border: 2px solid var(--color-accent);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .mv-cta-actions li + li::before {
    height: calc(100% - 40px);
    top: 20px;
  }
  .mv-point {
    width: 668px;
    margin-top: 20px;
  }
  .mv-point .pc {
    display: inline-block;
  }
}
/*
   CERTAINTY
--------------------------------------------------------------*/
.certainty-list > li::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 2px;
  background-color: var(--color-base2);
  flex-shrink: 0;
  margin: 0.3em;
}
.certainty-list > li {
  border-bottom: solid 1px var(--color-line);
}
.empathy-catch-comment {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 22px;
  height: 10px;
  transform: translateX(-50%);
  background-color: var(--color-base2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.empathy-catch-comment::before {
  position: relative;
  bottom: 2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: var(--color-base);
}
/* バナーの絵柄は写真（/img/empathy-img.jpg 750x360）を背景画像で敷く。
   人物が左、右は明るい余白なので、右にコピーを重ねる構成に合わせて left 寄せ。 */
.empathy-bnr-img,
.empathy-bnr-title {
  height: 48vw;
}
.empathy-bnr-img {
  width: 100%;
  background-image: url("../img/empathy-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* PCは高さ540px固定で上下がトリミングされるため、頭部が切れないよう上寄りに */
  background-position: left 30%;
}
@media (max-width: 767px) {
  /* .empathy-bnr-title{
    padding-left: 30vw;
  } */
}
@media (min-width: 768px) {
  .certainty-list > li::before {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    margin: 0.2em;
  }
}
@media (min-width: 1024px) {
  .empathy-bnr-cts {
    margin-left: 22vw;
  }
  .empathy-goal-line {
    width: 550px;
  }
  .empathy-bnr-img,
  .empathy-bnr-title {
    height: 540px;
  }
}
/* PROMISE */
.promise {
  background-color: var(--color-surface-deep);
}
.promise-list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.promise-item {
  display: flex;
  background-color: var(--color-fff);
  border-left: 3px solid var(--color-accent-mid);
  padding-top: 8px;
  padding-bottom: 8px;
  justify-content: space-between;
  padding-right: 25px;
}
.item-left {
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.item-right {
  font-weight: 800;
}
.item-left-text {
  border-right: 0.5px solid rgba(242, 153, 74, 0.55);
  padding-right: 12px;
  text-align: center;
  line-height: 1.5;
}
.cap1 {
  display: block;
  background-color: var(--color-accent-mid);
  color: var(--color-badge-ink);
  padding: 2px 4px;
  border-radius: 2px;
  text-align: center;
}
.cap2 {
  display: block;
  background-color: initial;
  color: var(--color-accent-mid);
}
@media screen and (min-width: 768px) {
  .cap1 {
    padding: 3px 8px;
    border-radius: 5px;
  }
  .cap2 {
    margin-top: 4px;
  }
}
/*
   PRICE
--------------------------------------------------------------*/
.price {
  background-color: #FFF4EA;
}
.price-main-list,
.price-main-list > li,
.price-notes > li {
  border-color: rgba(242, 153, 74, 0.5);
}
.price-info-grids > li.bg-gray {
  background-color: #F7F1E9;
}
.popularity::before {
  position: absolute;
  z-index: 50;
  content: "";
  background-image: url(../img/price-popular.png);
  width: 43px;
  height: 43px;
  background-size: cover;
  top: -8px;
  left: -8px;
}
.comparison-table img {
  width: 100%;
}
@media (max-width: 1023px) {
  .tab-list {
    display: none;
  }
  .price-cts-wrap {
    background-color: #FFFCF8;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: none;
  }
  .price-title-sp {
    background-color: #FFFFFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .price-title-sp .accordion-icon {
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
  }
  .price-title-sp .accordion-icon > span {
    display: block;
    width: 16px;
    height: 16px;
  }
  .price-title-sp .accordion-icon > span::before,
  .price-title-sp .accordion-icon > span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transition: all 0.5s;
  }
  .price-title-sp .accordion-icon > span::after {
    transform: translate(-50%, -50%) rotate(90deg);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
  }
  .price-title-sp.active .accordion-icon > span::after {
    transform: translate(-50%, -50%) rotate(360deg);
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media (min-width: 1024px) {
  .item-left {
    padding-left: 32px;
  }
  .item-left-text {
    padding-right: 32px;
  }
  .item-left {
    column-gap: 32px;
  }
  .band {
    max-width: 771px;
  }
  .promise-item {
    padding-right: 64px;
    padding-top: 9px;
    padding-bottom: 10px;
  }
  .price .tab-list > li {
    width: 260px;
  }
  .tab-list > li {
    background-color: #F5EDE3;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
  }
  .tab-list > li.active {
    background-color: rgba(255, 249, 242, 0.62);
  }
  .tab-cts {
    visibility: hidden;
    opacity: 0;
    background-color: rgba(255, 249, 242, 0.62);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .tab-cts.active {
    position: relative;
    visibility: visible;
    opacity: 1;
  }
  .price-cts-inner {
    width: 590px;
  }
  .popularity::before {
    width: 46px;
    height: 46px;
    top: -8px;
    left: -8px;
  }
  .popularity > span {
    padding-left: 35px;
  }
  .price-info-grids > li.bg-gray {
    background-color: #F9F4ED;
  }
  .tab-cts[data-tabName="trial"] .price-info-grids > li {
    max-width: 590px;
  }
}
/*
-----------------------------------VOICE*/
.voice-container {
}
.voice-color {
  color: var(--color-accent);
}
.voice {
  background-color: #FDF1E6;
}
.voice-list {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding-left: 16px;
  padding-right: 16px;
}
.voice-item {
  border-top: 3px solid var(--color-accent-mid);
  background-color: #FFF9F2;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.top-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: dashed 1px rgba(242, 153, 74, 0.35);
}
.voice-heading {
  display: flex;
  column-gap: 18px;
}
.name-icon {
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  width: 38px;
  height: 38px;
  color: var(--color-accent-deep);
  line-height: 36px;
}
.voice-wrapper {
}
.voice-heading-tag {
  column-gap: 8px;
  display: flex;
}
.voice-tag1 {
  color: var(--color-accent-deep);
  background-color: var(--color-accent-soft);
  padding: 5px 8px;
}
.voice-tag2 {
  color: var(--color-base2);
  border: 1px solid var(--color-accent);
  padding: 4px 8px;
}
.svg-icon {
  width: 24px;
}
.voice-item-title {
  border-left: 2px solid var(--color-accent-mid);
  padding-left: 4px;
}
.annotation {
  margin-top: 8px;
  padding-right: 16px;
}
@media screen and (min-width: 768px) {
  .voice-item-title {
    padding-left: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .vocie-container {
    max-width: 1170px;
  }
  .voice-list {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .voice-item {
    padding: 32px;
  }
  .name-icon {
    width: 61px;
    height: 61px;
    line-height: 60px;
  }
  .voice-tag1 {
    padding: 8px 16px;
  }
  .voice-tag2 {
    padding: 7px 16px;
  }
  .svg-icon {
    width: 44px;
    height: 69px;
  }
  .top-item {
    padding-bottom: 20px;
  }
}
/*
   REASON
--------------------------------------------------------------*/
.reason {
  background-color: var(--color-base1);
}
.reason-title {
  height: 42px;
  width: 49vw;
}
.reason-card-head .icon {
  width: 17.6vw;
  max-width: 66px;
}
.reason-card .title h4 {
  min-height: 58px;
}
.female-interviewer-img {
  width: 19.4vw;
  max-width: 103px;
  right: 0;
  bottom: -7.4vw;
}
@media (max-width: 1023px) {
  .reason-card + .reason-card {
    border-top: solid 1px var(--color-base2);
  }
  .reason-cards .reason-card:last-child {
    padding-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .reason-title {
    width: 240px;
  }
  .reason-card-head .icon {
    width: 66px;
  }
  .interviewer {
    grid-column: 2 / 4;
  }
  .female-interviewer-img {
    width: 98px;
    bottom: -23px;
  }
  .reason-cards .reason-card:nth-child(3n + 1)::after,
  .reason-cards .reason-card:nth-child(3n + 2)::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 20px;
    width: 1px;
    height: calc(100% - 20px);
    background-color: var(--color-base2);
  }
  .reason-cards:has(.reason-card:nth-child(n + 4))
    .reason-card:nth-child(n + 4)::after,
  .reason-cards:has(.reason-card:nth-child(n + 4))
    .reason-card:nth-child(3n + 5)::after {
    bottom: 0;
  }
  .reason-cards:has(.reason-card:nth-child(n + 7))
    .reason-card:nth-child(n + 4)::after,
  .reason-cards:has(.reason-card:nth-child(n + 7))
    .reason-card:nth-child(3n + 5)::after {
    height: calc(100% - 20px);
    bottom: 10px;
  }

  .reason-cards .reason-card:nth-child(n + 4)::before {
    content: "";
    position: absolute;
    top: -20px;
    height: 1px;
    background-color: var(--color-base2);
  }

  /* 4,7,10... */
  .reason-cards .reason-card:nth-child(3n + 4)::before {
    left: 0;
    width: calc(100% - 10px);
  }

  /* 5,8,11... */
  .reason-cards .reason-card:nth-child(3n + 5)::before {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
  }

  /* 6,9,12... */
  .reason-cards .reason-card:nth-child(3n + 6)::before {
    right: 0;
    width: calc(100% - 10px);
  }
}
/*
   SURVEY
--------------------------------------------------------------*/
/* カードの下地（2026-09-09 追加）
   白を敷いていたのは中身の .survey-card-body だけで、.survey-card 自身は
   背景が transparent だった。そのため
     ・写真が lazy 読み込みで届く前
     ・スクロールアニメーション（.animation.move-bottom）の途中
     ・写真の読み込みに失敗したとき
   にアクセントの枠線の中へセクションのベージュが透け、カードが
   「空洞」に見えていた。カード自身にも白を敷いて常に白面にする。 */
.survey-card {
  background-color: var(--color-fff);
}
.survey-card-icon {
  margin-top: -35px;
  width: 65px;
  height: 65px;
}
.survey-card-img {
  width: 101%;
}
@media (min-width: 1024px) {
  .survey-card-icon {
    margin-top: -40px;
    width: 75px;
    height: 75px;
  }
  .survey-cards {
    gap: 24px;
  }
  .survey-cards .survey-card {
    flex: 0 0 calc(50% - 12px);
  }
}
/*
   FLOW
--------------------------------------------------------------*/
.flow-card {
  width: 74.66vw;
  max-width: 335px;
  height: auto;
}
.flow-number {
  margin-top: -25px;
}
.flow-slide .swiper-scrollbar {
  height: 5px;
  opacity: 1 !important;
  bottom: 0 !important;
}
.flow-slide .swiper-scrollbar {
  background-color: #F0E7DB;
}
.flow-slide .swiper-scrollbar-drag {
  background-color: var(--color-base2);
  cursor: grab;
}
.flow-slide .swiper-scrollbar-drag:active {
  cursor: grabbing;
}
.flow-slide > .swiper-scrollbar {
  left: 2% !important;
  width: 95% !important;
}
.flow-text {
  font-weight: 300;
}
@media (min-width: 1024px) {
  .flow-card {
    width: 23.2vw;
  }
  .flow-slide {
    cursor: pointer;
  }
  .flow-slide > .swiper-scrollbar {
    left: 14% !important;
    width: 70% !important;
  }
}
/*
   FAQ
--------------------------------------------------------------*/
.faq-item-question .accordion-icon {
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}
.faq-item-question .accordion-icon > span {
  display: block;
  width: 22px;
  height: 22px;
}
.faq-item-question .accordion-icon > span::before,
.faq-item-question .accordion-icon > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  width: 100%;
  height: 2px;
  border-radius: 3px;
  background-color: var(--color-accent);
  transition: all 0.5s;
}
.faq-item-question .accordion-icon > span::after {
  transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item-question.active .accordion-icon > span::after {
  transform: translate(-50%, -50%) rotate(360deg);
  -webkit-transform: translate(-50%, -50%) rotate(360deg);
}
@media (min-width: 768px) {
  .faq-item-question {
    cursor: pointer;
  }
  .faq-item-question .accordion-icon {
    right: 33px;
  }
  .faq-item-question .accordion-icon > span {
    width: 24px;
    height: 24px;
  }
}
/*
   CTA
--------------------------------------------------------------*/
.cta-title {
  background-color: rgba(194, 94, 27, 0.88);
  width: 100px;
  height: 100px;
  box-shadow: var(--shadow-pop);
  letter-spacing: 0.03rem;
}
.cta .cta-actions {
  width: 62vw;
}
@media (min-width: 1024px) {
  .cta-title {
    width: 124px;
    height: 124px;
  }
  .cta .cta-actions {
    width: 100%;
  }
  .cta .cta-actions li {
    width: 310px;
  }
  .cta .cta-item-inner {
    height: 70px;
  }
}

/*
   HOVER
--------------------------------------------------------------*/
@media (min-width: 1024px) {
  .menu-drawer-link,
  .footer-nav-link {
    transition: all 0.3s;
  }
  .menu-drawer-link:hover,
  .footer-nav-link:hover {
    color: var(--color-accent);
  }
  .faq-item-question .faq-text {
    transform: translateX(0);
    transition: all 0.3s;
  }
  .faq-item-question .faq-text:hover {
    transform: translateX(20px);
  }
  .cta-actions .cta-item .cta-item-arrow {
    transform: translateX(0);
    transition: all 0.3s;
  }
  .cta-actions .cta-item:hover .cta-item-arrow {
    transform: translateX(5px);
  }
}

/* ============================================================
   CASUAL REDESIGN OVERRIDES — 2026-08-27
   方向性：やわらか親しみ系
   丸ゴシック(Zen Maru Gothic) / ウォームオレンジ / 大きめ角丸 / ふわっと影
   色・角丸・影のトークンは css/base.css の :root に定義
   ============================================================ */

/* --- 1. 角丸を全体的に大きく（custom.css のユーティリティを上書き） --- */
body.p-index .br-3  { border-radius: 8px; }
body.p-index .br-5  { border-radius: var(--radius-s); }
body.p-index .br-8  { border-radius: 14px; }
body.p-index .br-10 { border-radius: var(--radius-m); }
body.p-index .br-15 { border-radius: var(--radius-l); }
body.p-index .br-20 { border-radius: var(--radius-xl); }

@media screen and (max-width: 1023px) {
  body.p-index .br-3-sp  { border-radius: 8px; }
  body.p-index .br-5-sp  { border-radius: var(--radius-s); }
  body.p-index .br-8-sp  { border-radius: 14px; }
  body.p-index .br-10-sp { border-radius: var(--radius-m); }
  body.p-index .br-15-sp { border-radius: var(--radius-l); }
  body.p-index .br-20-sp { border-radius: var(--radius-xl); }
}
@media screen and (min-width: 768px) {
  body.p-index .br-3-tpc  { border-radius: 8px; }
  body.p-index .br-5-tpc  { border-radius: var(--radius-s); }
  body.p-index .br-8-tpc  { border-radius: 14px; }
  body.p-index .br-10-tpc { border-radius: var(--radius-m); }
  body.p-index .br-15-tpc { border-radius: var(--radius-l); }
  body.p-index .br-20-tpc { border-radius: var(--radius-xl); }
}
@media screen and (min-width: 1024px) {
  body.p-index .br-3-pc  { border-radius: 8px; }
  body.p-index .br-5-pc  { border-radius: var(--radius-s); }
  body.p-index .br-8-pc  { border-radius: 14px; }
  body.p-index .br-10-pc { border-radius: var(--radius-m); }
  body.p-index .br-15-pc { border-radius: var(--radius-l); }
  body.p-index .br-20-pc { border-radius: var(--radius-xl); }
}

/* --- 2. 暗色セクション上のアクセント文字を明るいオレンジへ ---------
   --color-accent (#C25E1B) は暗色背景上でコントラスト 1.8〜2.2 と
   判読できないため、暗色面では var(--color-accent-on-dark)（4.6〜5.8）に差し替える     */
/* CTAもベージュ面にしたので、accent-on-dark は暗色面の .bgc-base2 だけに残す */
.bgc-base2 .fc-accent {
  color: var(--color-accent-on-dark);
}
.promise .fc-accent,
.promise-item .fc-accent,
.bgc-navy .fc-accent,
.footer-copy .fc-accent,
.cta .fc-accent,
.cap2 {
  color: var(--color-accent-deep);
}

/* --- 3. 主要ブロックの丸みと影をやわらかく --- */
.band {
  border-radius: var(--radius-m);
}
.promise-item {
  border-radius: var(--radius-s);
  border-left-width: 6px;
}
.mv-cta-actions {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.voice-item {
  border-radius: var(--radius-m);
  border-top-width: 4px;
}
.arrow_box {
  box-shadow: var(--shadow-soft);
}
.name-icon {
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.cap1 {
  border-radius: var(--radius-s);
  font-weight: 700;
}
.voice-tag1,
.voice-tag2 {
  border-radius: var(--radius-pill);
}
.cta-title {
  box-shadow: var(--shadow-pop);
}

/* --- 4. ボタンをふわっと・押したくなる形に --- */
.cta-item {
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.cta-item-arrow {
  box-shadow: 0 2px 6px rgba(194, 94, 27, 0.35);
}
.line-cta,
.mail-cta,
.tel-cta {
  border-radius: var(--radius-pill);
}
@media (min-width: 1024px) {
  .cta-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
  }
}

/* --- 5. ヘッダー・ハンバーガー --- */
.modal-btn {
  border-bottom-left-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}

/* --- 6. 罫線をやわらかい暖色グレーへ --- */
.top-item {
  border-bottom-color: rgba(242, 153, 74, 0.35);
}
.reason-card + .reason-card,
.certainty-list > li {
  border-color: var(--color-line);
}

/* --- 7. 旧デザインのゴールド系アセットの後始末 ---------------------
   単色PNG（survey アイコン・下線マーカー・ロゴ下地）は画像自体を再着色済み。
   MVのコインはフラットなSVG（img/illust/mv-point.svg）へ差し替えたため
   フィルターは不要になった。残るグラデーション画像は人気バッジのみ。
   ※ .shokai-caption には filter を掛けないこと（内包テキストまで変色する） */
.popularity::before {
  filter: hue-rotate(-16deg) saturate(1.05);
}

/* ロゴPNGは濃紺の下地が焼き込まれているため、角丸バッジとして見せる */
.header-logo img,
.footer-logo img {
  border-radius: var(--radius-s);
}

/* --- 8. 冷たいグレーのユーティリティを暖色寄りに --- */
body.p-index .bgc-eee {
  background-color: #F6EFE6;
}
body.p-index .bc-eee {
  border-color: var(--color-line);
}

/* --- 9. 英字ラベルを丸みのある欧文書体（Quicksand）に --- */
.ruby,
.survey-card-en {
  font-family: var(--en);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --- 10. ファーストビューの専門領域訴求（強調版） ------------------
   旧: 11〜18pxの1行テキスト＋小バッジ。写真の上で埋もれていた。
   新: 淡色プレートに「専門バッジ／対応エリア／実績数値／肩書き」を
       ひとかたまりで載せ、FVを開いた瞬間に業種と実績が伝わるようにする。
   ・数値（30年 / 97.5%）は見出しの中で最大級に大きく取る
   ・PCでは写真（右73%）に被らないよう左カラム幅に収める
   ・下の .mv-point にも同じ実績（30年 / 97.5%）を小さいカードで併記している（index.php）                */
.mv-specialty {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  z-index: 60;
  padding: 0 3vw;
  pointer-events: none;
}
.mv-specialty-inner {
  padding: 12px 14px 14px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(194, 94, 27, 0.32);
  border-left: 6px solid var(--color-accent);
  background-image: linear-gradient(
    135deg,
    rgba(255, 249, 242, 0.97) 0%,
    rgba(253, 232, 214, 0.94) 100%
  );
  box-shadow: var(--shadow-card);
  animation: mv-specialty-in 0.7s ease 0.15s both;
}
@keyframes mv-specialty-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mv-specialty-inner {
    animation: none;
  }
}
.mv-specialty-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mv-specialty-badge {
  display: inline-block;
  background-image: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-accent-deep) 100%
  );
  color: var(--color-fff);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
}
.mv-specialty-area {
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background-color: var(--color-fff);
  border: 1px solid var(--color-accent);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.mv-specialty-lede {
  margin-top: 10px;
  font-family: var(--jp-accent);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-base2);
}
.mv-specialty-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.mv-specialty-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.mv-specialty-stat + .mv-specialty-stat::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 20px;
  margin-right: 7px;
  background-color: rgba(194, 94, 27, 0.3);
}
.mv-specialty-stat-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-base3);
  letter-spacing: 0.02em;
}
.mv-specialty-stat-value {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}
.mv-specialty-stat-unit {
  font-size: 15px;
  font-weight: 700;
  margin-left: 1px;
}
.mv-specialty-title {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-base2);
}
.mv-specialty-title em {
  font-style: normal;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent-mid);
  padding-bottom: 1px;
}

@media (min-width: 768px) {
  /* タブレット以上はプレートを内容幅に収め、実績を1行に畳む */
  .mv-specialty {
    top: 14px;
    padding: 0 0 0 4vw;
  }
  .mv-specialty-inner {
    display: inline-block;
    padding: 14px 24px 16px;
  }
  .mv-specialty-badge {
    font-size: 14px;
    padding: 8px 16px;
  }
  .mv-specialty-area {
    font-size: 12px;
    padding: 7px 12px;
  }
  .mv-specialty-lede {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 12px;
    font-size: 15px;
  }
  .mv-specialty-stat-label {
    font-size: 13px;
  }
  .mv-specialty-stat-value {
    font-size: 38px;
  }
  .mv-specialty-stat-unit {
    font-size: 18px;
  }
  .mv-specialty-title {
    margin-top: 0;
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .mv-specialty {
    top: 20px;
  }
  .mv-specialty-inner {
    max-width: 62vw;
    padding: 16px 28px 18px;
  }
  .mv-specialty-stat-value {
    font-size: 44px;
  }
  .mv-specialty-stat-unit {
    font-size: 20px;
  }
  .mv-specialty-title {
    font-size: 18px;
  }
}

/* 強調したヘッダーぶん、キャッチコピー以下を下へ逃がす
   （プレートと「証拠がとれなければ…0円」が重ならないように）
   SP/タブレットは position:relative のため top ではなく margin で送る
   （top だと後続のキャッチ・実績だけが取り残されて重なる）
   2026-09-09: 実績プレートとの間が詰まって見えたので +24px 下げた
   （80→104 / 74→98）。下に続くキャプション・実績カードも同じ量だけ
   下がるが、固定CTAまでの余白は残る。画面の低い端末はファイル下部の
   「max-height: 740px」の指定（88px）が勝つので、そちらは詰めたまま。 */
.mv-catch-inner {
  margin-top: 104px;
}
@media (min-width: 768px) {
  .mv-catch-inner {
    margin-top: 98px;
  }
}
/* 縦の低いタブレット幅（ウィンドウを縮めたデスクトップなど）は、+24px ぶんが
   そのまま固定CTAへの食い込みになるので、下げる前の 74px に戻す。
   ・実績カードの下端 ≒ 621px（98px時）／597px（74px時）
   ・固定CTAの上端 ≒ 画面高 − 153px
   → 98px のままだと画面高 774px 未満で重なる。しきい値は余裕を見て 820px。 */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 820px) {
  .mv-catch-inner {
    margin-top: 74px;
  }
}
@media (min-width: 1024px) {
  /* PCは「コピー＋キャプション＋実績」を1つの流れとして縦中央に置く。
     旧: コピーだけ position:absolute で上端付近に固定していたため、
     ヘッダーを大きくするとウィンドウの低いPCでキャプションと重なった。
     relative に戻すことで、プレートを強調しても重なりが起きない。   */
  .mv-catch-inner {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 0;
  }
  .mv-catch-wrap .caption-flex {
    /* 旧 .mt-90-pc（90px）ぶんの空きを詰めて、実績カードを固定CTAの上に残す */
    margin-top: 40px;
  }
}

/* SPの「24時間対応／ご相談無料／匿名OK」は縦3段で166pxも使っていた。
   横1列のコンパクトなチップに変更し、強調したヘッダーぶんの高さを回収する。
   （小さい端末=iPhone SE等でも「初回調査2時間0円」が固定CTAの上に収まる） */
@media (max-width: 767px) {
  .caption-flex {
    flex-direction: row;
    column-gap: 6px;
    margin-left: 12px;
    margin-right: 12px;
  }
  .caption-flex .caption {
    flex: 1 1 0;
    width: auto;
    height: 34px;
    line-height: 32px;
    font-size: 13px;
    margin-top: 0;
    white-space: nowrap;
  }
}

/* --- 11. LP内「調査報告書」セクション（お客様の声の上） -------------- */
.report-lead {
  background-color: var(--color-base1);
}
.report-lead-cards {
  align-items: stretch;
  /* 旧: g-20-sp / g-24-tpc に依存していたが g-24-tpc は存在しない（gapは5px刻みのみ）。
     そのためPCでカード間の余白が消え、3枚が1枚の帯のように見えていた。
     レイアウトは g-container-1-sp（1列・〜1023px）と f-container-pc（横並び・1024px〜）で決まる。 */
  gap: 20px;
}
@media (min-width: 1024px) {
  .report-lead-cards {
    gap: 24px;
  }
}
.report-lead-cards > li {
  flex: 1 1 0;
  min-width: 0;
}
.report-lead-card {
  height: 100%;
  border-radius: var(--radius-l);
  background-color: var(--color-fff);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.report-lead-card-head {
  gap: 10px;
  padding: 12px 16px;
  background-color: var(--color-surface-mid);
}
.report-lead-card-no {
  font-family: var(--en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-accent-deep);
  white-space: nowrap;
}
.report-lead-card-tag {
  font-family: var(--jp-accent);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-mid);
  color: var(--color-badge-ink);
  white-space: nowrap;
}
.report-lead-card-body {
  padding: 16px;
}
.report-lead-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-navy);
}
/* メタ行は「調査種別／日数・点数」と「サンプルを見る」の2要素。
   カード幅が足りないときは折り返して、リンクを右寄せのまま次行へ逃がす。 */
.report-lead-card-meta {
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-line);
  font-family: var(--jp-accent);
  font-size: 12px;
  color: var(--color-base3);
}
.report-lead-card-meta-text {
  min-width: 0;
}
.report-lead-card-link {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-accent);
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.report-lead-more {
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-accent);
  background-color: var(--color-fff);
  font-family: var(--jp-accent);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-accent);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
@media (min-width: 1024px) {
  .report-lead-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
  }
  .report-lead-card:hover .report-lead-card-link {
    background-color: var(--color-accent);
    color: var(--color-fff);
  }
  .report-lead-more:hover {
    background-color: var(--color-accent);
    color: var(--color-fff);
  }
}

/* --- 12. 料金比較表（画像 → 実テーブル） ---------------------------
   旧: comparison-table.svg（明朝・角ばった罫線）
   新: 丸ゴシック・角丸・暖色。SPは横スクロールで全列を保持する      */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.cmp {
  border-collapse: separate;
  border-spacing: 8px;
  min-width: 640px;
  margin: 0 auto;
  font-family: var(--jp-accent);
}
.cmp-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cmp th,
.cmp td {
  padding: 14px 16px;
  text-align: center;
  vertical-align: middle;
  border-radius: var(--radius-s);
  background-color: var(--color-fff);
  line-height: 1.5;
}
/* 行見出し */
.cmp tbody th {
  background-color: var(--color-base1);
  color: var(--color-base2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
/* 列見出し */
.cmp thead th {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-base2);
  background-color: var(--color-base1);
}
.cmp-corner {
  background-color: transparent !important;
}
.cmp .cmp-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--color-base3);
}
/* 列見出しの補足（B社の「大手」）は通常フローから外し、主ラベルの
   真下に置く。こうすると「B社」自体が A社 と同じ高さ（セルの上下
   中央）に揃い、補足のぶんだけ持ち上がることがない            */
.cmp thead .cmp-th-main {
  position: relative;
  display: inline-block;
}
.cmp thead .cmp-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.cmp .cmp-tax {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--color-base3);
}
.cmp td {
  font-size: 15px;
  color: var(--color-font);
}

/* 自社列を目立たせる */
.cmp thead .cmp-us {
  position: relative;
  background-color: var(--color-accent);
  color: var(--color-fff);
  border-radius: var(--radius-m) var(--radius-m) var(--radius-s) var(--radius-s);
  padding-top: 26px;
}
.cmp-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-mid);
  color: var(--color-badge-ink);
  box-shadow: var(--shadow-soft);
}
.cmp-us-name {
  display: block;
  font-size: 16px;
}
.cmp tbody .cmp-us {
  background-color: var(--color-accent-soft);
}
.cmp tbody .cmp-us b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-deep);
}
.cmp tbody .cmp-us .cmp-tax {
  color: var(--color-accent-deep);
  opacity: 0.75;
}

@media (min-width: 768px) {
  .cmp {
    min-width: 0;
    width: 100%;
    max-width: 1000px;
  }
  .cmp th,
  .cmp td {
    padding: 18px 20px;
  }
  .cmp td {
    font-size: 17px;
  }
  .cmp tbody .cmp-us b {
    font-size: 26px;
  }
  .cmp-us-name {
    font-size: 18px;
  }
  /* 注釈は表の右端（セルの端）に揃える。.cmp と同じ 1000px 幅の箱に
     収め、border-spacing:8px ぶんを padding で戻す。                */
  .cmp-note {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 8px;
  }
}

/* --- 13. 固定CTAバーぶんの下余白 ------------------------------------
   .mv-cta は position:fixed で画面下に常駐するため、その高さぶん
   本文の下に逃げを作らないと、最後のコンテンツが永続的に隠れる。
   実測: SP 114px / タブレット 241px / PC 188px（+ bottom:10px）      */
body.p-index {
  padding-bottom: 134px;
}
@media (min-width: 768px) {
  body.p-index {
    padding-bottom: 262px;
  }
}
@media (min-width: 1024px) {
  body.p-index {
    padding-bottom: 210px;
  }
}

/* --- 14. 調査の流れ：ステップ番号の見切れ修正 ----------------------
   .flow-number は margin-top:-25px でカードの上に張り出すが、
   Swiper（.flow-slide）が overflow:hidden なので上端で切れていた。
   overflow は横スクロールに必要なので外せない。
   → Swiper 側に padding-top を持たせ、クリップ境界の内側に逃げを作る。
     （overflow のクリップはパディングボックスで起きるため有効）      */
.flow-slide {
  padding-top: 34px;
}
.flow-cards {
  /* 上の逃げを作ったぶん、ラッパー側の pt-25 は不要 */
  padding-top: 0 !important;
}
.flow-number {
  /* カードからの張り出し量。34px の逃げの内側に収まる */
  margin-top: -26px;
}
/* 張り出した番号がカードの角丸に重なっても欠けないように */
.flow-card {
  overflow: visible;
}

/* --- 15. FVのオファー＋実績数値 -------------------------------------
   「初回調査2時間0円」を主役に、実績（調査歴30年 / 証拠収集率97.5%）を
   横並びの白カードで見せる。
   ・カード幅は3枚とも統一する。grid の 1fr ＋ width:fit-content で、
     いちばん幅を食う中身（＝「初回調査 2時間」のラベル）に3列とも揃う。
     固定pxを置いていないので文言を変えても3枚の幅は崩れない。
   ・枠と余白は共通にし、数値の大きさだけで主役⇔補足の差を付けている。  */
.mv-point {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  /* 〜1023px は親（.mv-catch-copy / .mv-catch-wrap）が .w-100per-sp で
     画面幅いっぱいなので、auto マージンで画面に対して中央に置ける。
     PC（1024px〜）は左カラムの流れなので下で margin-left:0 に戻す。 */
  margin-left: auto;
  margin-right: auto;
}
.mv-point-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 10px;
  background-color: var(--color-fff);
  border: 3px solid var(--color-accent-mid);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
}
.mv-point-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-base2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mv-point-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  color: var(--color-accent);
}
.mv-point-value em {
  font-family: var(--jp);
  font-style: normal;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.mv-point-unit {
  font-size: 18px;
  font-weight: 700;
}
/* 実績カード（補足）。幅・枠・余白は主役と共通で、数値だけ小さくする。 */
.mv-point-item--stat .mv-point-label {
  font-size: 11px;
}
.mv-point-item--stat .mv-point-value em {
  font-size: 28px;
}
.mv-point-item--stat .mv-point-unit {
  font-size: 14px;
}

@media (min-width: 768px) {
  .mv-point {
    gap: 18px;
    margin-top: 28px;
  }
  .mv-point-item {
    padding: 16px 16px;
    border-width: 4px;
  }
  .mv-point-label {
    font-size: 15px;
  }
  .mv-point-value em {
    font-size: 60px;
  }
  .mv-point-unit {
    font-size: 24px;
  }
  .mv-point-item--stat .mv-point-label {
    font-size: 13px;
  }
  .mv-point-item--stat .mv-point-value em {
    font-size: 40px;
  }
  .mv-point-item--stat .mv-point-unit {
    font-size: 18px;
  }
}
@media (min-width: 1024px) {
  .mv-point {
    margin-left: 0;
  }
  .mv-point-item {
    padding: 18px 20px;
  }
  .mv-point-label {
    font-size: 16px;
  }
  .mv-point-value em {
    font-size: 72px;
  }
  .mv-point-unit {
    font-size: 28px;
  }
  .mv-point-item--stat .mv-point-label {
    font-size: 14px;
  }
  .mv-point-item--stat .mv-point-value em {
    font-size: 46px;
  }
  .mv-point-item--stat .mv-point-unit {
    font-size: 20px;
  }
}

/* --- 16. MV写真を背景へなじませるフェード ---------------------------
   写真は右73%に配置されるため左端に硬い切れ目ができ、
   その上に載るキャッチコピーも読みづらくなる。
   写真の上・コピーの下（z-index 10）に地色のグラデーションを重ねる。 */
.mv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
/* SP：コピーは写真の上部に載るので、上から下へフェード */
.mv::after {
  background: linear-gradient(
    180deg,
    var(--color-base) 0%,
    rgba(255, 249, 242, 0.9) 26%,
    rgba(255, 249, 242, 0.35) 46%,
    rgba(255, 249, 242, 0) 62%
  );
}
/* PCのみ：コピーが左に寄るので左から右へフェード。
   タブレットはコピーが中央寄りのため、上記の縦フェードのままにする */
@media (min-width: 1024px) {
  .mv::after {
    background: linear-gradient(
      90deg,
      var(--color-base) 0%,
      var(--color-base) 16%,
      rgba(255, 249, 242, 0.88) 32%,
      rgba(255, 249, 242, 0.45) 46%,
      rgba(255, 249, 242, 0) 62%
    );
  }
}

/* --- 17. タブレットの固定CTAを1段に ---------------------------------
   768〜1023px では3つのボタンが2段になり、バーが241pxまで伸びて
   FVの実績数値まで覆っていた。1段に収めて高さを抑える。          */
@media (min-width: 768px) and (max-width: 1023px) {
  .mv-cta-actions {
    flex-wrap: nowrap;
    column-gap: 10px;
    padding-top: 26px;
    padding-bottom: 8px;
  }
  .mv-cta-actions > li {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .line-cta,
  .mail-cta,
  .tel-cta {
    width: auto;
  }
  .arrow_box {
    height: 44px;
    padding: 6px 0;
  }
  .arrow_box .fs-28-tpc {
    font-size: 20px;
  }
  .cta-caption {
    font-size: 11px;
  }
  .cta-btn-text {
    font-size: 15px;
  }
  .cta-btn-text .fs-32-pc {
    font-size: 17px;
  }
  .mv-cta-actions svg {
    width: 24px;
    height: 24px;
  }
}

/* --- 18. タブレット（768〜1023px）のFVを画面内に収める --------------
   ・.mv の高さがヘッダー45px前提のまま（実際はヘッダー92＋ナビ46＝138）
     だったため、実績数値が画面外へ押し出されていた
   ・キャプション3枚が縦積みで約180px使っていたので横並びにする      */
@media (min-width: 768px) and (max-width: 1023px) {
  /* グローバルナビはPCのみ表示なので、引くのはヘッダー92pxだけ */
  .mv {
    height: calc(100svh - 92px);
    min-height: 540px;
  }
  .mv-img > * {
    height: calc(100svh - 92px);
    min-height: 540px;
  }
  /* 0円を少し抑えて、実績数値を固定CTAバーの上に収める */
  .mv-catch-titlebg .fs-220-pc {
    font-size: 84px;
  }
  .mv-catch-titlebg .fs-64-pc {
    font-size: 34px;
  }
  .mv-catch-inner h1 {
    margin-top: 12px;
  }
  .caption-flex {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 8px;
  }
  .caption-flex .caption {
    margin-top: 0;
    width: auto;
    min-width: 128px;
    height: 44px;
    line-height: 42px;
    font-size: 17px;
  }
  .mv-point {
    margin-top: 12px;
  }
  .mv-point-item {
    padding: 10px 12px;
    border-width: 3px;
  }
  .mv-point-label {
    font-size: 13px;
  }
  .mv-point-value em {
    font-size: 40px;
  }
  .mv-point-unit {
    font-size: 18px;
  }
  .mv-point-item--stat .mv-point-label {
    font-size: 12px;
  }
  .mv-point-item--stat .mv-point-value em {
    font-size: 30px;
  }
  .mv-point-item--stat .mv-point-unit {
    font-size: 15px;
  }
}

/* --- 17. 調査の流れ：横スクロールの担保 -----------------------------
   カードは Swiper（.flow-slide）で横スクロールさせている。
   ただし Swiper の JS が動かないと .swiper{overflow:hidden} だけが効いて
   カードが右端で切れたまま一切スクロールできない状態になる。
   → 初期化前／初期化に失敗したときはネイティブの横スクロールにフォールバックする。
     （Swiper は初期化時に .swiper-initialized を付与するので、それが無い間だけ適用） */
.flow-slide:not(.swiper-initialized) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.flow-slide:not(.swiper-initialized) .flow-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  padding-left: 50px;
  padding-right: 50px;
}
.flow-slide:not(.swiper-initialized) .flow-card {
  flex: 0 0 auto;
}
@media (min-width: 1024px) {
  .flow-slide:not(.swiper-initialized) .flow-cards {
    gap: 25px;
    padding-left: 160px;
    padding-right: 160px;
  }
}
/* 掴んで動かせることが伝わるように（PCのみ cursor: pointer だったのを grab に） */
@media (min-width: 1024px) {
  .flow-slide.swiper-initialized {
    cursor: grab;
  }
  .flow-slide.swiper-initialized:active {
    cursor: grabbing;
  }
}

/* --- 18. SPのファーストビュー：モデルの顔を隠さない ------------------
   旧: 写真がFV全体に敷かれ、顔（画面上 133〜402px）がバッジ・キャッチ・
       実績カードで完全に隠れていた。
   新: SPだけ写真を下側のバンドに置き、コンテンツの下・固定CTAの上に
       顔がちょうど収まるようにする。上端はマスクで地色へなじませる。

   ■ top の決め方（2026-09-09 実機Pixel 10a=412x808で再計算）
   object-position:top なので、画像の上端は常にバンドの上端に一致する。
   つまりマスク（上端から46px）が隠すのは常に元画像の y0〜約98px で、
   髪の上端（y≒100）はフェードの外に出る。top を変えても
   この関係は動かないので、top は「顔の下端が固定CTAに潜らないか」だけで決まる。

   元画像 880x1313。髪の上端 y≒100 / あご y≒600 / 首から下 y≒650。
   幅いっぱいなので倍率は width 基準（412/880≒0.468）。
   あご y600 の描画位置 = ヘッダー高 + top + 600*0.468
   旧 top:383 → 45+383+281 = 709px。固定CTAの上端 684px を 25px 超えて
   あごが隠れていた（実機で確認）。
   新 top:330 → 45+330+281 = 656px。CTA上端まで 28px の余裕ができる。
   2026-09-09: ヘッダーを 45px → 57px にしたので top も 12px 引いて 318px。
   57+318+281 = 656px のまま＝写真の帯は画面上の同じ位置に留まる。      */
@media (max-width: 767px) {
  .mv-img {
    position: absolute;
    top: 318px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 46px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 46px);
  }
  .mv-img > * {
    height: 100%;
    object-position: top center;
  }
  /* 実績カードは画面に対して中央揃え。
     3vw は左右の最小余白として max-width で確保する（2026-09-09に
     margin-left:3vw の左寄せから変更）。 */
  .mv-point {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 6vw);
  }
  /* 写真が下半分だけになったぶん、上からの白フェードは浅めでよい
     （深いままだと地色の面が単調に白飛びする） */
  .mv::after {
    background: linear-gradient(
      180deg,
      rgba(255, 249, 242, 0.6) 0%,
      rgba(255, 249, 242, 0.35) 30%,
      rgba(255, 249, 242, 0) 52%
    );
  }
}
/* 画面の低い端末（iPhone SE など）は要素を詰めて、顔の見える帯を確保する */
@media (max-width: 767px) and (max-height: 740px) {
  .mv-specialty {
    top: 6px;
  }
  .mv-specialty-inner {
    padding: 8px 12px 10px;
  }
  .mv-specialty-stat-value {
    font-size: 26px;
  }
  .mv-catch-titlebg {
    height: 150px;
  }
  .mv-catch-inner {
    margin-top: 88px;
  }
  .mv-point-item {
    padding: 8px 10px;
  }
  .mv-point-value em {
    font-size: 32px;
  }
  .mv-point-item--stat .mv-point-value em {
    font-size: 24px;
  }
  /* 低い画面はCTAまでの余白が足りないので、写真の帯を少し細く・上へ。
     顔（画面中央寄り）は左の実績カードとは重ならない位置に来る。
     top は 280px → 263px（2026-09-09）。375x667 で あご(元画像y600)が
     画面 535px、固定CTAの上端 543px と 8px しか離れておらず接触して
     見えていた。17px 上げて 26px の余裕を作る。
     フェードも 46px → 30px。この帯は幅が 82% しかなく倍率が 0.35 まで
     落ちるため、46px のフェードは元画像 y0〜132 を覆い、髪の上端
     （y≒100）まで白く飛んでいた。30px なら y0〜86 で髪の外に収まる。
     2026-09-09: ヘッダーを 45px → 57px にしたので top も 12px 引いて 251px。 */
  .mv-img {
    top: 251px;
    left: 18%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 30px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 30px);
  }
  /* 細くしたぶん左端に境目が出るので、画像側にも横方向のマスクをかける
     （親は上端マスク・子は左端マスクと分けることで mask-composite に依存しない） */
  .mv-img > * {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 44px);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 44px);
  }
}

/* 幅の狭い端末（〜359px）。カードは等幅のまま3枚を1行に収めたいので、
   ラベルと左右余白を詰めて「初回調査 2時間」がはみ出さない幅にする。 */
@media (max-width: 359px) {
  .mv-point {
    gap: 8px;
  }
  .mv-point-item {
    padding: 10px 6px;
  }
  .mv-point-label {
    font-size: 11px;
  }
  .mv-point-item--stat .mv-point-label {
    font-size: 10px;
  }
  .mv-point-value em {
    font-size: 34px;
  }
  .mv-point-item--stat .mv-point-value em {
    font-size: 24px;
  }
}


/* --- 9. イラスト → 写真への差し替え（2026-08-31） --------------------
   調査項目カード5枚とCTA背景を、リポジトリ内の写真へ差し替えた。
   元写真はいずれも撮影トーンが寒色（青み）寄りなので、サイトの
   ベージュ〜オレンジのランプに寄せる暖色グレーディングをCSSで掛ける。
   ※ filter は img 要素にのみ掛ける（親に掛けると内包テキストまで変色する） */
.survey-card-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 880 / 350;
  object-fit: cover;
  /* 2026-09-09: 5枚のうち4枚を暖色の写真へ差し替えたので、共通の暖色補正は外す。
     旧値 sepia(.2) saturate(1.28) hue-rotate(-6deg) brightness(1.05) contrast(1.02)
     は「素材が寒色」である前提だったため、差し替え後は二重にかかって
     カードがオレンジへ転んでいた（特にマホガニーの浮気調査カード）。
     ベージュの地色から浮かないよう、わずかな明るさ・彩度の持ち上げだけ残す。
     まだ寒色のままの人探しカードは、下の src 指定で個別に強く当てている。 */
  filter: saturate(1.04) brightness(1.03);
}

/* CTA背景。もとは濃いオレンジのスクリム（rgba(176,80,20,.88)→rgba(150,66,16,.93)）
   を重ねていたが、明るい写真をほぼ覆い隠すため面が茶色く濁って見えていた。
   他セクションと同じベージュ面へ寄せ、写真は淡いテクスチャとして残す（2026-09-04）。
   面がベージュになったぶん中身の文字色は下部「12.」で組み替えている。 */
.cta-bg {
  overflow: hidden;
  /* 画像は lazy 読み込みなので、読み込み前の下地もベージュにしておく */
  background-color: var(--color-surface-mid);
}
.cta-bg img {
  object-fit: cover;
  /* 暗いスーツが寒色のシミに見えるので、暗部を持ち上げつつ暖色へ寄せる。
     2026-09-09: ネイビーのスーツと青白い窓光がまだ寒色に見えたので強めた
     （sepia .35→.55／hue-rotate を追加）。この写真はベージュの膜（.cta-bg::after）
     の下に敷くテクスチャなので、sepia を強めて色味が単調になっても支障が少ない。 */
  filter: sepia(0.55) saturate(0.85) hue-rotate(-10deg) brightness(1.22)
    contrast(0.82);
}
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 背景写真にかぶせるベージュの膜。数値が小さいほど写真が濃く出る。
     .93/.95（ほぼ単色）→ .85/.88 → .60/.65 と段階的に下げた。
     .60/.65 で写真のコントラスト幅は 37→76 とほぼ倍。
     そのぶん文字が沈むので、CTA本文の文字色を下の「12.」で
     #5C524E → #332D2B に濃くして 5.1:1 を確保している。 */
  background: linear-gradient(
    180deg,
    rgba(253, 246, 236, 0.6) 0%,
    rgba(242, 231, 214, 0.65) 100%
  );
}

/* --- 10. 濃色面をやめてベージュ面に（2026-08-31） -------------------
   ヘッダー・約束セクション・帯・カード見出し・フッターは白文字前提の
   濃色面だったので、面をベージュにしたぶん文字をやわらかい暖色ダークへ戻す。
   .fc-fff は単一クラスなので、2クラスのこの指定が素直に勝つ（!important不要）。 */
.bgc-navy,
.bgc-navy .fc-fff,
.promise,
.promise .fc-fff,
.promise-item,
.promise-item .fc-fff,
.report-lead-card-head,
.report-lead-card-head .fc-fff {
  color: var(--color-navy);
}

/* 帯見出し「初回限定 お試し調査プラン」。旧デザインは濃色面＋#F2994A で
   成立していたが、ベージュ面では 1.8:1 まで落ちるので濃色オレンジへ。 */
.bgc-navy .fc-gold2 {
  color: var(--color-accent-deep);
}
.bgc-navy.band h2 {
  border-color: var(--color-accent-deep);
}


/* 約束セクションの白カードに影と罫線を足して、ベージュ面から浮かせる */
.promise-item {
  box-shadow: var(--shadow-soft);
}


/* --- 12. CTAをベージュ面に（2026-09-04） ---------------------------
   背景を上部「9.」でベージュにしたので、白文字前提だった中身を
   ベージュ面用（暖色ダークの文字＋オレンジのアクセント）へ組み替える。
   .fc-fff は単一クラスなので、2クラスのこの指定が素直に勝つ（!important不要）。 */
.cta .fc-fff {
  /* 背景の膜を .60/.65 まで薄くしたぶん写真が透けるので、
     var(--color-navy) #5C524E では 2.85:1 まで落ちる。濃くして 5.1:1 を確保。 */
  color: #332D2B;
}
/* 「24時間受付」の丸は、ベージュ面ではアクセントの焦点になる。
   旧値の rgba(194,94,27,.88) は下のベージュが透けて白抜き文字が
   3:1 台まで落ちるので不透明にし、上（24＝30px）で約4.3:1、
   下（時間／受付＝16〜20px）で約5.8:1 になるよう縦グラデーションを掛ける。 */
.cta-title {
  background-color: var(--color-accent);
  background-image: linear-gradient(
    170deg,
    var(--color-accent) 0%,
    var(--color-accent-deep) 100%
  );
  color: var(--color-fff);
}
/* 白ボタンはベージュ面との明度差が 1.2:1 程度しかないので、暖色の罫線で形を立てる。
   box-shadow には触らない（.cta-item:hover と詳細度が並び、後勝ちで壊れる） */
.cta .cta-item {
  border: 1px solid rgba(160, 105, 60, 0.26);
}


/* --- 19. 差し替えない写真の色調補正（2026-09-09） -------------------
   写真をサイトのベージュ〜テラコッタのパレットへ寄せる作業のうち、
   「人物＋特定の構図」で暖色の代替素材が見つからなかった3枚は、
   素材を差し替えずCSSのフィルターだけで寄せる。
   ・cta-bg      … 上の「12.」の .cta-bg img で対応（sepia を強めた）
   ・empathy-img … 下の .empathy-bnr-img（これまでフィルター未適用だった）
   ・survey-missing-img … 下の属性セレクタで survey 共通値より強く当てる

   フィルターの当て方は「9.」の survey カードと同じ考え方
   （sepia で寒色を殺す → saturate で色味を戻す → hue-rotate で赤寄りに）。 */

/* empathy バナー。背景画像なのでフィルター未適用のまま残っており、
   ベージュの地色の上でいちばん青白く浮いていた。
   ・.empathy-bnr-title は「兄弟要素」なので、ここに filter を掛けても
     重ねているコピーの文字色には影響しない。
   ・元画像がすでに明るいので brightness は上げない（右の余白が白飛びする）。
     代わりに sepia を survey 共通の .2 より強い .28 にして、白をクリームへ寄せる。 */
.empathy-bnr-img {
  filter: sepia(0.28) saturate(1.22) hue-rotate(-8deg) contrast(0.98);
}

/* 人探しカードの写真だけ、survey 共通値より強く暖色へ寄せる。
   共通値（sepia .2 / hue-rotate -6deg）では、青白い窓光とオリーブ色の
   ニットが寒色のまま残っていた。hue-rotate を -12deg まで回すと
   オリーブがキャメル寄りに転ぶ。
   ※他の survey 4枚は暖色の写真へ差し替えるため、共通値は上げない
     （上げると差し替えた写真がオレンジに転ぶ）。src 指定で1枚だけに当てる。 */
.survey-card-img img[src$="survey-missing-img.jpg"] {
  filter: sepia(0.35) saturate(1.3) hue-rotate(-12deg) brightness(1.08)
    contrast(1);
}

/* --- 13. 調査報告書セクションに写真を追加（2026-09-04） -------------
   テキストだけのセクションだったので、報告書を封入した封筒を渡す写真を
   1枚入れる（「報告書を書面でお渡しします」というリード文に対応）。
   /img/report-img.jpg は 2000x800 に切り出し済みなので、CSS側は
   中央合わせのままでよい。グレーディングは「9.」の調査項目カードと同じ値。 */
.report-lead-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 330;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  /* 2026-09-09: 写真を暖色の木製デスクのカットへ差し替えたので、
     survey カードと同じ理由で共通の暖色補正を外す（二重掛かりの防止）。
     旧値 sepia(.2) saturate(1.28) hue-rotate(-6deg) brightness(1.05) contrast(1.02) */
  filter: saturate(1.04) brightness(1.03);
}
@media (min-width: 1024px) {
  .report-lead-img img {
    aspect-ratio: 1000 / 360;
  }
}