/* トップページの中身だけ。列幅・ナビ・円・目次は service.css の共通レイアウトを使う */
/* col2 の空は TOP 用。SERVICE より夜側で、ページが進むほど夜明けに近づく */

.p-tp__bg-shape,
.p-tp__bg-green {
  position: absolute;
  display: block;
  max-width: none;
}

.p-tp__bg-shape {
  left: calc(-42.9 / 1769 * 100%);
  top: calc(-128.8 / 1024 * 100%);
  width: calc(1877.9 / 1769 * 100%);
  height: auto;
}

.p-tp__bg-green {
  left: calc(629.2 / 1769 * 100%);
  top: calc(606.4 / 1024 * 100%);
  width: calc(1038 / 1769 * 100%);
  height: calc(1035 / 1024 * 100%);
  object-fit: cover;
  opacity: 0.25;
}

.p-tp__circle-title,
.p-tp__circle-sub {
  margin: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.p-tp__circle-title {
  color: #000;
  font-size: calc(19.87 * var(--u));
  line-height: calc(24 * var(--u));
}

.p-tp__circle-title--next {
  margin-top: calc(17.5 * var(--u));
}

.p-tp__circle-sub {
  margin-top: calc(8 * var(--u));
  color: #4c5e6f;
  font-size: calc(15.89 * var(--u));
  line-height: 1.2;
}

.p-tp__copy {
  position: absolute;
  top: calc(315 / 1024 * 100%);
  left: 0;
  margin: 0;
  color: #fff;
  font-size: calc(15.9 * var(--u));
  line-height: calc(41.57 * var(--u));
  white-space: nowrap;
}

.p-tp__copy p {
  margin: 0;
  color: #fff;
}

.p-tp__copy p + p {
  margin-top: calc(41.57 * var(--u));
}

#tp-jinryoku .p-tp__copy {
  top: calc(329 / 1024 * 100%);
}

#tp-kachi .p-tp__copy {
  top: calc(346 / 1024 * 100%);
}

#tp-junkan .p-tp__copy {
  top: calc(253 / 1024 * 100%);
}

#tp-village .p-tp__copy {
  top: calc(221 / 1024 * 100%);
}

#tp-torikumi .p-tp__copy {
  top: calc(228 / 1024 * 100%);
}

#tp-riyuu .p-tp__copy {
  top: calc(221 / 1024 * 100%);
}

#tp-taisetsu .p-tp__copy {
  top: calc(281 / 1024 * 100%);
}

#tp-village .p-tp__skill,
#tp-torikumi .p-tp__skill {
  top: calc(746 / 1024 * 100%);
}

#tp-riyuu .p-tp__skill {
  top: calc(753 / 1024 * 100%);
}

#tp-taisetsu .p-tp__skill {
  top: calc(743 / 1024 * 100%);
}

.p-tp__form {
  position: absolute;
  top: calc(253 / 1024 * 100%);
  left: 50%;
  width: min(100%, calc(418.89 * var(--u)));
  margin: 0;
  transform: translateX(-50%);
}

.p-tp__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(14.44 * var(--u));
  row-gap: calc(16 * var(--u));
}

.p-tp__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.p-tp__field.is-wide {
  grid-column: 1 / -1;
}

.p-tp__field span:not(.wpcf7-form-control-wrap) {
  color: rgba(255, 255, 255, 0.65);
  font-size: calc(15.9 * var(--u));
  line-height: calc(19 * var(--u));
}

.p-tp__field :is(input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  height: calc(34.75 * var(--u));
  margin: 0;
  padding: 0 calc(8 * var(--u));
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #001932;
  font: inherit;
  font-size: calc(15.9 * var(--u));
}

.p-tp__field textarea {
  height: calc(123.4 * var(--u));
  padding-top: calc(8 * var(--u));
  resize: vertical;
}

.p-tp__agree {
  display: flex;
  align-items: flex-start;
  gap: calc(8.1 * var(--u));
  margin-top: calc(6.7 * var(--u));
  color: #fff;
  font-size: calc(13.36 * var(--u));
  line-height: calc(16 * var(--u));
}
.p-tp__agree label {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
}
.p-tp__agree input {
  flex: 0 0 auto;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  accent-color: #fff;
}

.p-tp__agree span,
.p-tp__agree a {
  color: #fff;
}

.p-tp__agree a {
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--u));
}

.p-tp__send {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: calc(131.75 * var(--u));
  height: calc(50 * var(--u));
  margin: calc(49.9 * var(--u)) auto 0;
  padding: 0 calc(16 * var(--u)) 0 calc(27 * var(--u));
  border: 0;
  background: #fff;
  box-shadow: 0 0 calc(15.9 * var(--u)) rgba(0, 0, 0, 0.2);
  color: #000;
  font: inherit;
  font-size: calc(19.87 * var(--u));
  line-height: 1;
  cursor: pointer;
  overflow: visible;
}

.p-tp__send span {
  position: relative;
  z-index: 1;
}

#tp-contact .wpcf7,
#tp-contact .wpcf7-form {
  margin: 0;
}

#tp-contact .wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
}

#tp-contact .wpcf7-not-valid-tip {
  color: #fff;
  font-size: calc(12 * var(--u));
}

#tp-contact .p-tp__agree .wpcf7-list-item,
#tp-contact .p-tp__agree .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: inherit;
  margin: 0;
}

#tp-contact .wpcf7-response-output {
  position: absolute;
  z-index: 3;
  top: calc(920 / 1024 * 100%);
  left: 50%;
  box-sizing: border-box;
  width: min(90%, calc(418.89 * var(--u)));
  margin: 0;
  transform: translateX(-50%);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

#tp-contact .wpcf7-spinner {
  margin: calc(8 * var(--u)) auto 0;
}

.p-sv__col--2 .p-tp__send,
.p-sv__col--2 .p-tp__send span {
  color: #000;
}

.p-tp__skill {
  position: absolute;
  box-sizing: border-box;
  top: calc(745 / 1024 * 100%);
  left: 0;
  display: flex;
  align-items: center;
  width: calc(271 * var(--u));
  height: calc(50 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(26 * var(--u));
  background: #fff;
  box-shadow: 0 0 calc(15.9 * var(--u)) rgba(0, 0, 0, 0.2);
  color: #000;
  font-size: calc(19.87 * var(--u));
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.p-sv__col--2 .p-tp__skill,
.p-sv__col--2 .p-tp__skill span {
  color: #000;
}

.p-tp__skill span {
  position: relative;
}

/* 右向き三角矢印（旧 btn-arrow.svg） */
.p-tp__skill::after,
.p-tp__send::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(4.35 * var(--u)) 0 calc(4.35 * var(--u)) calc(7.53 * var(--u));
  border-color: transparent transparent transparent #001932;
}

/* SPデザインのみのCTA（PCでは非表示） */
.p-tp__skill--sp-only {
  display: none;
}

/* プライバシーポリシー（既存 CONTACT モーダル本文をページ化） */
.page-privacy .p-pp {
  box-sizing: border-box;
  min-height: calc(100dvh - var(--sv-header));
  padding: calc(100 * var(--u)) calc(72 * var(--u)) calc(80 * var(--u));
}

.page-privacy .p-pp__article {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(540 * var(--u));
  margin: 0 auto;
  color: #fff;
}

.page-privacy .p-pp__title {
  margin: 0 0 1.1em;
  color: #fff;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}

.page-privacy .p-pp__lead,
.page-privacy .p-pp__section p,
.page-privacy .p-pp__section li {
  margin: 0;
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.page-privacy .p-pp__lead {
  margin-bottom: 1.35em;
}

.page-privacy .p-pp__section {
  margin: 0 0 1.25em;
}

.page-privacy .p-pp__section:last-child {
  margin-bottom: 0;
}

.page-privacy .p-pp__heading {
  margin: 0 0 0.65em;
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.page-privacy .p-pp__section p + p {
  margin-top: 0.75em;
}

.page-privacy .p-pp__section ul {
  margin: 0.65em 0 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
}

.page-privacy .p-pp__section li + li {
  margin-top: 0.2em;
}

.page-contact .p-sv__col--2,
.page-contact .p-sv__col--plain,
.page-contact .p-ct,
.page-contact .p-ct__article,
.page-contact .wpcf7,
.page-contact .wpcf7-form {
  opacity: 1;
  -webkit-mask: none !important;
  mask: none !important;
}

.page-contact .p-ct {
  box-sizing: border-box;
  min-height: calc(100dvh - var(--sv-header, 0px));
  padding: calc(200 * var(--u)) 0 0;
}

.page-contact .p-ct__article {
  width: min(100%, calc(640 * var(--u)));
  margin: 0 auto;
  color: #fff;
}

.page-contact .p-ct__title {
  margin: 0 0 0.4em;
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.page-contact .p-ct__lead {
  margin: 0 0 1.6em;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.page-contact .p-tp__form {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  transform: none;
}

.page-contact .p-tp__field span,
.page-contact .p-tp__agree,
.page-contact .p-tp__agree a,
.page-contact .p-tp__send {
  font-size: 16px;
}
.page-contact .p-tp__form span:not(.wpcf7-form-control-wrap),
.page-contact .p-tp__agree a {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}
.page-contact .p-tp__form,
.page-contact .p-tp__form span,
.page-contact .p-tp__field,
.page-contact .wpcf7-form-control-wrap {
  opacity: 1;
}

.page-contact .p-tp__field .wpcf7-form-control-wrap,
.page-contact .p-tp__field :is(input, select, textarea) {
  opacity: 1 !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #001932;
}

.page-contact .p-tp__field :is(input, select, textarea):-webkit-autofill {
  -webkit-text-fill-color: #001932;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #001932;
}

.page-contact .p-tp__field :is(input, select, textarea) {
  height: 44px;
  font-size: 12px !important;
}

.page-contact .p-tp__field textarea {
  height: 8rem;
  min-height: 8rem;
  resize: vertical;
}

.page-contact .wpcf7,
.page-contact .wpcf7-form {
  margin: 0;
}

.page-contact .wpcf7-not-valid-tip {
  color: #fff;
  font-size: 16px;
}

.page-contact .wpcf7-response-output {
  position: static;
  box-sizing: border-box;
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #001932;
  font-size: 16px;
  line-height: 1.5;
  transform: none;
}

.page-contact form.failed .wpcf7-response-output,
.page-contact form.aborted .wpcf7-response-output,
.page-contact form.spam .wpcf7-response-output,
.page-contact form.invalid .wpcf7-response-output,
.page-contact form.unaccepted .wpcf7-response-output {
  color: #8a1f1f;
}

@media (max-width: 720px) {
  /* 余白・背景・円は sp.css（has-sp-chrome）に委譲。白い隙間を出さない */

  /*
   * 旧: PC用の % 配置のままだと SVG 下端がフッター手前で切れ、
   * 透明の .p-sv__bg 越しに白帯が出る（前バージョンの名残り）。
   * 夜空色で下地を塗り、shape を枠いっぱいにカバーする。
   */
  body.has-sp-chrome.page-top .p-sv__bg,
  body.has-sp-chrome.page-contact .p-sv__bg {
    background-color: #0c204b;
  }

  body.has-sp-chrome.page-contact .p-sv__bg {
    top: 0;
    height: 100dvh;
  }

  body.has-sp-chrome.page-contact .p-tp__bg-shape {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  body.has-sp-chrome.page-top .p-tp__bg-shape {
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center center;
  }

  body.has-sp-chrome.page-top .p-tp__bg-green,
  body.has-sp-chrome.page-contact .p-tp__bg-green {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    width: min(100%, calc(1038 / 864 * 100vw));
    height: auto;
    max-height: 70%;
    object-fit: cover;
  }

  .p-tp__bg-shape {
    left: calc((-42.9 - 760) / 735 * 100%);
    width: calc(1877.9 / 735 * 100%);
  }

  .p-tp__bg-green {
    left: calc((629.2 - 760) / 735 * 100%);
    width: calc(1038 / 735 * 100%);
  }

  .p-tp__copy,
  .p-tp__skill,
  .p-tp__form {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    white-space: normal;
    transform: none;
  }

  /* 本文幅 440。左右パディングで本文・ボタンの左端を揃える */
  body.has-sp-chrome.page-top .p-sv__section {
    --tp-content-max: calc(440 / 864 * 100vw);
    align-items: flex-start;
    text-align: left;
    padding-left: max(0px, calc((100% - min(100%, var(--tp-content-max))) / 2)) !important;
    padding-right: max(0px, calc((100% - min(100%, var(--tp-content-max))) / 2)) !important;
  }

  .page-top .p-tp__copy {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    font-size: calc(17.01 / 864 * 100vw);
    line-height: calc(34 / 17.01);
    text-align: left;
  }

  .page-top .p-sv__col--2 .p-tp__copy,
  .page-top .p-sv__col--2 .p-tp__copy :is(p, span) {
    text-align: left;
  }

  .page-top .p-tp__copy p + p {
    margin-top: calc(40 / 864 * 100vw);
  }

  /* ボタン: 幅は中身／左端は本文と同じ（セクションの左右パディングで揃える） */
  .page-top .p-tp__skill {
    position: relative;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    height: calc(50 / 864 * 100vw);
    min-height: calc(50 / 864 * 100vw);
    margin-top: calc(28 / 864 * 100vw);
    margin-left: 0;
    margin-right: 0;
    padding: 0 calc(24 / 864 * 100vw);
    transform: none;
    gap: calc(12 / 864 * 100vw);
    font-size: calc(15.59 / 864 * 100vw);
    line-height: 1;
    white-space: nowrap;
  }

  .page-top .p-tp__skill--sp-only {
    display: inline-flex;
  }

  .page-top .p-tp__skill::after,
  .page-top .p-tp__send::after {
    border-width: calc(5 / 864 * 100vw) 0 calc(5 / 864 * 100vw) calc(7 / 864 * 100vw);
  }

  /*
   * コンタクト: 1画面の円下端〜フッター上に収める。
   * 円下端はヘッダー下 346.9sp。その下に余白を足してフォームを始める。
   */
  body.has-sp-chrome.page-top #tp-contact {
    justify-content: flex-start;
    align-items: center;
    height: var(--sp-stage-h);
    min-height: 0;
    max-height: var(--sp-stage-h);
    overflow: hidden;
    padding-top: calc(375 * var(--sp)) !important;
    padding-bottom: calc(8 * var(--sp)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-margin-top: var(--sp-header-h);
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: min(100%, calc(659 * var(--sp)));
    min-height: 0;
    margin: 0 auto;
    text-align: left;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__fields {
    display: grid !important;
    flex: 0 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    min-height: 0;
    column-gap: calc(23 * var(--sp)) !important;
    row-gap: calc(10 * var(--sp)) !important;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__field {
    gap: calc(4 * var(--sp));
    min-width: 0;
    min-height: 0;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__field.is-wide:has(textarea) {
    display: flex;
    flex-direction: column;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__field span {
    color: rgba(255, 255, 255, 0.65);
    font-size: calc(26.71 * var(--sp)) !important;
    line-height: 1.15 !important;
    text-align: left;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__field :is(input, select) {
    height: max(22px, calc(40 * var(--sp)));
    min-height: 0;
    padding: 0 calc(8 * var(--sp));
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #001932;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__field textarea {
    flex: 0 0 auto;
    height: calc(180 * var(--sp));
    min-height: 0;
    padding: calc(6 * var(--sp)) calc(8 * var(--sp));
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #001932;
    font-size: 16px !important;
    line-height: 1.3 !important;
    resize: none;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__agree {
    flex: 0 0 auto;
    align-items: center;
    gap: calc(8 * var(--sp));
    margin-top: calc(8 * var(--sp));
    font-size: calc(20.99 * var(--sp)) !important;
    line-height: 1.2 !important;
    text-align: left;
  }

  .page-top .p-tp__agree input {
    width: calc(11 / 864 * 100vw);
    height: calc(11 / 864 * 100vw);
    min-width: 10px;
    min-height: 10px;
    margin: 0;
  }

  .page-top .p-sv__col--2 .p-tp__agree,
  .page-top .p-sv__col--2 .p-tp__agree :is(span, a) {
    color: #fff;
    text-align: left;
  }

  .page-top .p-tp__agree a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  body.has-sp-chrome.page-top #tp-contact .p-tp__send {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: calc(132 * var(--sp)) !important;
    height: max(28px, calc(50 * var(--sp)));
    min-height: 0;
    margin: calc(10 * var(--sp)) auto 0 !important;
    padding: 0 calc(16 * var(--sp)) 0 calc(22 * var(--sp));
    transform: none;
    white-space: nowrap;
    font-size: 16px !important;
  }

  body.has-sp-chrome.page-top #tp-contact .wpcf7,
  body.has-sp-chrome.page-top #tp-contact .wpcf7-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: min(100%, calc(659 * var(--sp)));
    min-height: 0;
    margin: 0 auto;
  }

  body.has-sp-chrome.page-top #tp-contact .wpcf7-response-output {
    position: static;
    width: auto;
    margin: calc(8 * var(--sp)) 0 0;
    transform: none;
  }

  body.has-sp-chrome.page-privacy .p-pp {
    justify-content: flex-start;
    min-height: 0;
    padding: calc(40 * var(--sp)) 0 calc(80 * var(--sp)) !important;
  }

  body.has-sp-chrome.page-privacy .p-pp__article {
    max-width: none;
  }

  body.has-sp-chrome.page-privacy .p-pp__title {
    font-size: calc(22 * var(--sp));
    text-align: center;
  }

  body.has-sp-chrome.page-privacy .p-pp__lead,
  body.has-sp-chrome.page-privacy .p-pp__section p,
  body.has-sp-chrome.page-privacy .p-pp__section li {
    font-size: calc(14 * var(--sp));
  }

  body.has-sp-chrome.page-privacy .p-pp__heading {
    font-size: calc(16 * var(--sp));
  }

  .page-contact .p-ct {
    min-height: 0;
    padding: 2.5rem 1.25rem 4rem;
  }

  .page-contact .p-ct__article {
    width: 100%;
    max-width: none;
  }

  .page-contact .p-ct__title {
    font-size: 22px;
  }

  .page-contact .p-tp__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 12px;
    row-gap: 12px;
  }

  .page-contact .p-tp__field {
    grid-column: 1 / -1;
  }

  .page-contact .p-tp__field:has([name="your-name"]),
  .page-contact .p-tp__field:has([name="furigana"]) {
    grid-column: auto;
  }

  .page-contact .p-tp__field :is(input, select, textarea),
  .page-contact .p-tp__field span,
  .page-contact .p-tp__agree,
  .page-contact .wpcf7-response-output {
    font-size: 16px !important;
  }
}