:root {
  --notoSans: "Zen Kaku Gothic New", "Noto Sans JP", "Source Sans 3", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --white: #FFF;
  --gray: #AFBFC7;
  --charcoal: #675454;
  --charcoal02: #5E4747;
  --black-1: #444648;
  --black-3: #2F3133;
  --footer: #666;
  --charcoalHover: #584646;
  --textcolor_gray: #888;
  --input_box_gray: #C4C4C4;
  --borderGray: #E4E4E4;
  --bgGray: #EBEBEB;
  --mainBackGround: #FAFAFA;
  --pcFullSize: 1440px;
  --green: #00AE83;
  --blue: #1000A1;
  --gradient: linear-gradient(90deg, #696CCE 0%, #00AE83 100%);
  --textcolor_B: #333;
  --bgRed: #FFCBCB;
  --error_important: #E60000;
  --Semantic-Error-1: #EC0000;
  --lime: #DDFAF3;
  --charcoalShadow: 1px -1px 5px 0 rgba(0, 0, 0, 0.15) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  --sp-w: 100vw / 375;
  --adminHeaderSize: 90px;
  --adminFooterSize: 60px;
  --footer_black: #000000;
  --O_Blue: #0B62AD;
  --O_LiteBlue: #DDEFFF;
  --O_BlueGreen: #52BCE3;
  --O_Orange: #F58C23;
}

body {
  color: var(--textcolor_B);
  font-family: var(--notoSans);
  line-height: 1.4;
  font-size: 16px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) {
    font-size: calc(15.5 * var(--sp-w));
  }
}

button,
select {
  cursor: pointer;
}

input[type="radio"] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--white);
  border: 1px solid var(--input_box_gray);
  border-radius: 100%;
  cursor: pointer;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) input[type="radio"] {
    width: calc(20 * var(--sp-w));
    height: calc(20 * var(--sp-w));
    border: calc(1 * var(--sp-w)) solid var(--input_box_gray);
  }
}

input[type="radio"]:checked {
  fill: var(--white);
  border: 5px solid var(--green);
  cursor: default;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) input[type="radio"]:checked {
    border: calc(5 * var(--sp-w)) solid var(--green);
  }
}

[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid var(--input_box_gray);
  border-radius: 2px;
  background-color: var(--white);
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) [type="checkbox"] {
    width: calc(20 * var(--sp-w)) !important;
    height: calc(20 * var(--sp-w)) !important;
    border: calc(1 * var(--sp-w)) solid var(--input_box_gray);
    border-radius: calc(2 * var(--sp-w));
    flex-shrink: 0;
  }

  body:has(main.responsivePage) [type="checkbox"]:checked {
    border: 0;
  }
}

[type="checkbox"]:checked {
  background: url("../img/icon_checkbox_checked_blue.png") no-repeat;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.radioLabel:has(input[type="radio"]:checked),
.checkboxLabel:has(input[type="checkbox"]:checked) {
  background: var(--O_LiteBlue);
  font-weight: 700;
}

.radioLabel:has(input[type="radio"]:checked) {
  cursor: default;
}

::placeholder,
select:has(option[value=""]:checked) {
  color: var(--textcolor_gray);
}

textarea {
  resize: vertical;
  min-height: 130px;
}

main {
  background-color: var(--white);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main.responsivePage {
  background-color: var(--mainBackGround);
}

@media (max-width: 1023px) {
  main.responsivePage {
    min-height: calc(100vh - calc(91.59 * var(--sp-w)));
  }
}

footer {
  background-color: var(--footer_black);
  color: var(--white);
  width: 100%;
  min-height: 28px;
  margin: 0 auto;
}

small {
  font-size: 12px;
  display: block;
  margin: auto;
  text-align: center;
  padding: 5.5px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) small {
    font-size: calc(11.54 * var(--sp-w));
    padding: calc(5.3 * var(--sp-w));
  }
}

/* ここから汎用クラス */
.flex,
.vert {
  display: flex;
}

.flex {
  align-items: center;
}

.vert {
  flex-direction: column;
}

.w100 {
  width: 100%;
}

.w169 {
  width: 169px;
}

.w268 {
  width: 268px;
}

.spaceBetween {
  justify-content: space-between;
}

.gap4 {
  gap: 4px;
}

.gap8 {
  gap: 8px;
}

.gap10 {
  gap: 10px;
}

.gap11 {
  gap: 11px;
}

.gap12 {
  gap: 12px;
}

.gap16 {
  gap: 16px;
}

.gap18 {
  gap: 18px;
}

.gap20 {
  gap: 20px;
}

.gap24 {
  gap: 24px;
}

.gap28 {
  gap: 28px;
}

.gap32 {
  gap: 32px;
}

.gap35 {
  gap: 35px;
}

.gap40 {
  gap: 40px;
}

.gap64 {
  gap: 64px;
}

.trackingWide {
  letter-spacing: 0.48px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .gap4 {
    gap: calc(5.7 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap8 {
    gap: calc(8 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap10 {
    gap: calc(10 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap11 {
    gap: calc(11 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap12 {
    gap: calc(12 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap16 {
    gap: calc(16 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap18 {
    gap: calc(18 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap24 {
    gap: calc(24 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap20 {
    gap: calc(20 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap28 {
    gap: calc(28 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap32 {
    gap: calc(32 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap35 {
    gap: calc(35 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap40 {
    gap: calc(40 * var(--sp-w));
  }

  body:has(main.responsivePage) .gap64 {
    gap: calc(64 * var(--sp-w));
  }

  body:has(main.responsivePage) form.gap16 {
    gap: calc(12 * var(--sp-w));
  }

  body:has(main.responsivePage) .mobile-gap18 {
    gap: calc(18 * var(--sp-w));
  }

  body:has(main.responsivePage) .mobile-no-gap {
    gap: 0;
  }

  body:has(main.responsivePage) .mobile-gap12 {
    gap: calc(12 * var(--sp-w));
  }
}

.lh12 {
  line-height: 1.2;
}

.lh13 {
  line-height: 1.3;
}

.lh15 {
  line-height: 1.5;
}

.lh16 {
  line-height: 1.6;
}

.size14 {
  font-size: 14px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .size14 {
    font-size: calc(14 * var(--sp-w));
  }
}

.bold,
.clear {
  font-weight: 700;
}

.clear {
  background-image: url("/img/icon_close.svg");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 24px;
  padding-left: 33px;
}

.charcoalButton,
.file:has(input[type="file"]) {
  background: var(--charcoal);
  box-shadow: 1px -1px 5px 0 rgba(0, 0, 0, 0.15) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: var(--white);
}

@media (max-width: 1023px) {

  body:has(main.responsivePage) .charcoalButton,
  body:has(main.responsivePage) .file:has(input[type="file"]) {
    box-shadow: calc(1 * var(--sp-w)) calc(-1 * var(--sp-w)) calc(5 * var(--sp-w)) 0 rgba(0, 0, 0, 0.15) inset, calc(1 * var(--sp-w)) calc(1 * var(--sp-w)) calc(2 * var(--sp-w)) 0 rgba(0, 0, 0, 0.15);
  }
}

.charcoalButton.trans:hover,
.file:has(input[type="file"]):hover {
  background-color: var(--charcoalHover);
}

.grayButton {
  background: var(--textcolor_gray);
  color: var(--white);
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .grayButton {
    box-shadow: calc(1 * var(--sp-w)) calc(2 * var(--sp-w)) calc(1 * var(--sp-w)) 0 rgba(0, 0, 0, 0.35);
  }

  body:has(main.responsivePage) .thanksPage .grayButton,
  body:has(main.responsivePage) .confirmPage .grayButton {
    box-shadow: none;
  }
}

.grayButton:hover {
  background-color: var(--textcolor_B);
}

.whiteButton {
  border: 1px solid var(--O_Orange);
  background-color: var(--O_Orange);
  color: var(--white);
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .whiteButton {
    border: calc(1 * var(--sp-w)) solid var(--O_Orange);
  }
}

.whiteButton:hover {
  background-color: var(--white);
  color: var(--O_Orange);
  border: 1px solid var(--O_Orange);
}

.whiteButton:hover::before {
  filter: brightness(0) saturate(100%) invert(67%) sepia(85%) saturate(2250%) hue-rotate(345deg) brightness(101%) contrast(92%);
}

.gradient {
  background-color: var(--O_Blue);
  color: var(--white);
}

.trans {
  transition: 0.3s ease;
}

.flexWrap {
  flex-wrap: wrap;
}

.w100 {
  width: 100%;
}

.flexStart {
  align-items: flex-start;
}

.flexEnd {
  align-items: flex-end;
}

.rightBlock,
.centerBlock {
  display: block;
}

.rightBlock {
  margin: 0 0 0 auto;
}

.centerBlock {
  margin: auto;
}

/* ここまで汎用クラス */

.headerWrap {
  background-color: var(--white);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, .25);
  width: 100%;
  max-width: var(--pcFullSize);
}

.headerCont {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preLoginHeader .headerCont {
  padding: 20px 33px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .headerCont {
    padding: calc(9.5 * var(--sp-w)) calc(19 * var(--sp-w));
  }
}

.formHeadlineWrap {
  padding: 22.5px 10px;
  align-items: center;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .formHeadlineWrap {
    padding: calc(10 * var(--sp-w)) calc(12.5 * var(--sp-w));
  }
}

.formHeadline {
  text-align: center;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.formHeadline-line2 {
  font-size: 32px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .formHeadline {
    font-size: calc(14 * var(--sp-w));
  }

  .formHeadline-line1 {
    font-size: calc(15.5 * var(--sp-w));
  }

  .formHeadline-line2 {
    font-size: calc(23 * var(--sp-w));
  }
}

/* -------------------------
    step
-------------------------- */
.stepCont {
  width: min(100%, 548px);
  margin: 0 auto;
}

.stepList {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 7px 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  text-align: center;
  color: var(--textcolor_B);
  font-size: 12px;
}

.circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  font-size: 24px;
  line-height: 1.4;
  border-radius: 50%;
  background: var(--O_LiteBlue);
  color: var(--O_Blue);
  font-weight: 700;
  padding-bottom: 4px;
}

.stepText {
  display: block;
  color: var(--O_Blue);
  font-weight: 700;
}

.stepText.topText {
  font-size: 12px;
  margin-bottom: 6px;
}

.stepText.endText {
  font-size: 14px;
  margin-top: 6px;
  white-space: nowrap;
}

.done {
  background-color: var(--O_Blue);
  color: var(--white);
}

.step:not(:last-child) .circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%);
  width: clamp(96px, 24vw, 134px);
  height: 3px;
  background: var(--O_LiteBlue);
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .stepCont {
    width: 100%;
    max-width: calc(343 * var(--sp-w));
    margin: 0 auto;
  }

  body:has(main.responsivePage) .stepList {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(69 * var(--sp-w));
    margin: calc(7 * var(--sp-w)) 0;
    padding: 0;
    list-style: none;
  }

  body:has(main.responsivePage) .step {
    position: relative;
    flex: 0 0 calc(48 * var(--sp-w));
    width: calc(48 * var(--sp-w));
    text-align: center;
    font-size: 12px;
    z-index: 1;
  }

  body:has(main.responsivePage) .circle {
    position: relative;
    z-index: 1;
    width: calc(48 * var(--sp-w));
    height: calc(48 * var(--sp-w));
    margin: 0 auto;
    font-size: calc(24 * var(--sp-w));
    line-height: 1.4;
  }

  body:has(main.responsivePage) .stepText.topText {
    font-size: calc(12 * var(--sp-w));
    margin-bottom: calc(6 * var(--sp-w));
  }

  body:has(main.responsivePage) .stepText.endText {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-top: calc(6 * var(--sp-w));
    font-size: calc(14 * var(--sp-w));
    white-space: nowrap;
  }

  body:has(main.responsivePage) .step:not(:last-child) .circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 8 * var(--sp-w));
    transform: translateY(-50%);
    width: calc(53 * var(--sp-w));
    height: calc(3 * var(--sp-w));
    background: var(--O_LiteBlue);
    z-index: 0;
  }
}

/* step　END */
/* -------------------------
    画像スライダー START
-------------------------- */
/* imageSample（PC） */
.sampleSection {
  max-width: 932px;
  width: 100%;
  padding: 14px 0;
  background-color: var(--O_LiteBlue);
  margin: 0 auto;
}

.sampleList {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  column-gap: 59px;
  align-items: start;
}

.sampleCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
}

.sampleThumbButton {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 12px;
  cursor: zoom-in;
}

.sampleThumbButton img {
  width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.sampleOpenButton {
  min-width: 130px;
  height: 40px;
  padding: 0 24px;
  border: 1px solid var(--O_Blue);
  background: #fff;
  color: var(--O_Blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
  margin-top: 8px;
  border-radius: 999px;
}

.sampleOpenButton:hover {
  background: var(--O_Blue);
  color: #fff;
}

/* imageSample（SP） */
@media (max-width: 1023px) {

  .sampleSection {
    padding: calc(24 * var(--sp-w)) 0;
    max-width: none;
  }

  .sampleList {
    grid-template-columns: repeat(3, max-content);
    column-gap: calc(21 * var(--sp-w));
  }

  .sampleCard {
    align-items: center;
  }

  .sampleThumbButton {
    margin-top: calc(8 * var(--sp-w));
  }

  .sampleThumbButton img {
    width: calc(100 * var(--sp-w));
    box-shadow: 0 calc(4 * var(--sp-w)) calc(4 * var(--sp-w)) 0 rgba(0, 0, 0, 0.15);
  }

  .sampleOpenButton {
    min-width: auto;
    width: auto;
    height: auto;
    margin-top: calc(12 * var(--sp-w));
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--O_Blue);
    font-size: calc(12 * var(--sp-w));
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: calc(2 * var(--sp-w));
  }

  .sampleOpenButton:hover {
    background: transparent;
    color: var(--O_Blue);
  }
}

/* Modal（PC） */
body.modalOpen {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.sampleModal,
.sampleModalStage,
.sampleModalBody,
.sampleSwiper,
.sampleSlide {
  overflow: hidden;
}

.sampleModal {
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.sampleModal::backdrop {
  background: #333333E5;
}

.sampleModalStage {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sampleModalFrame {
  position: relative;
  width: 1044px;
  height: 604px;
}

/* 画像エリア */
.sampleModalBody {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sampleSwiper {
  width: 100%;
  height: 100%;
}

.sampleSwiper .swiper-wrapper {
  height: 100%;
}

.sampleSlide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sampleSlide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* close */
.sampleModalClose {
  position: absolute;
  top: -56px;
  right: 0;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.sampleModalCloseText {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.sampleModalClose img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin: 13px;
}

/* arrows */
.sampleModalArrow {
  position: absolute;
  top: 50%;
  z-index: 30;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  width: auto;
  height: auto;
  color: transparent;
  display: flex !important;
}

.sampleModalArrowPrev {
  left: -92px !important;
}

.sampleModalArrowNext {
  right: -92px !important;
}

.sampleModalArrowPrev,
.sampleModalArrowNext {
  top: calc(50% + (12 * var(--sp-w))) !important;
}

.sampleModalArrow img {
  display: block;
  width: 58px;
  height: 83px;
  height: auto;
  object-fit: contain;
}

.sampleModalArrow::after {
  display: none !important;
}

.swiper-pagination {
  display: none !important;
}

/* Modal（SP） */
@media (max-width: 1023px) {
  .sampleModalStage {
    padding: calc(40 * var(--sp-w)) calc(24 * var(--sp-w));
    box-sizing: border-box;
  }

  .sampleModalFrame {
    width: calc(340 * var(--sp-w));
    height: auto;
    aspect-ratio: 1044 / 604;
    max-width: 100%;
  }

  .sampleModalBody {
    width: 100%;
    height: 100%;
  }

  .sampleSlide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  .sampleModalClose {
    top: calc(-40 * var(--sp-w));
    right: 0;
    gap: 0;
  }

  .sampleModalCloseText {
    font-size: calc(16 * var(--sp-w));
  }

  .sampleModalClose img {
    width: calc(20 * var(--sp-w));
    height: calc(20 * var(--sp-w));
    margin: calc(7 * var(--sp-w));
  }

  .sampleModalArrow {
    top: 50%;
    transform: translateY(-50%);
  }

  .sampleModalArrowPrev {
    left: calc(-22 * var(--sp-w)) !important;
  }

  .sampleModalArrowNext {
    right: calc(-22 * var(--sp-w)) !important;
  }

  .sampleModalArrow img {
    width: calc(15 * var(--sp-w));
  }
}

/* -------------------------
    画像スライダー END
-------------------------- */

.contentWrap {
  margin-bottom: calc(80.72 * var(--sp-w));
}

.confirmPage .contentWrap {
  margin-bottom: calc(103.64 * var(--sp-w));
}

@media (max-width: 1023px) {
  .contentWrap {
    margin-bottom: calc(305.76 * var(--sp-w));
  }

  .confirmPage .contentWrap {
    margin-bottom: calc(409.6 * var(--sp-w));
  }
}

.formWrap {
  width: 100%;
  max-width: 932px;
  margin: auto;
  padding: 42px 56px;
  border-radius: 16px;
  border: 1px solid var(--borderGray);
  background: var(--white);
  box-shadow: 2px 4px 7px 0 rgba(0, 0, 0, 0.10);
  position: relative;
}

.closePage .formWrap,
.errorPage .formWrap {
  padding: 16px 56px;
  border-radius: 0;
  border: 0 solid var(--borderGray);
  background: none;
  box-shadow: none;
}

.thanksPage .formWrap {
  padding: 8px;
  border-radius: 0;
  border: 0 solid var(--borderGray);
  background: none;
  box-shadow: none;
  margin-bottom: 8px;
}

.closePage .formWrap,
.errorPage .formWrap {
  padding: 40px 0;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .formWrap {
    width: 92.82%;
    max-width: none;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  body:has(main.responsivePage) .formWrap.gap8 {
    gap: calc(12 * var(--sp-w));
  }
}

.msgCont {
  padding: 9px 12px;
  border: 2px solid var(--error_important);
  background: var(--white);
  width: 100%;
  max-width: 932px;
  margin: auto;
}

.thanksPage .msgCont,
.closePage .msgCont,
.errorPage .msgCont {
  padding: 0;
  border: 0 solid var(--error_important);
  background: none;
  text-align: center;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .msgCont {
    padding: calc(7.7 * var(--sp-w));
    max-width: calc(348.08 * var(--sp-w));
    margin-top: calc(16 * var(--sp-w));
  }

  body:has(main.responsivePage) .closePage .msgCont {
    max-width: calc(348.08 * var(--sp-w));
    margin-top: 0;
    display: grid;
    place-items: center;
  }

  body:has(main.responsivePage) .errorPage .msgCont {
    max-width: calc(348.08 * var(--sp-w));
    margin-top: 0;
    display: grid;
    place-items: center;
    margin-top: calc(7.7 * var(--sp-w));
  }

  body:has(main.responsivePage) .thanksPage .msgCont {
    margin-top: 0;
  }

  body:has(main.responsivePage) .requestForm-msgCont {
    padding: 0;
  }
}

.closePage .msgCont,
.errorPage .msgCont,
.closePage .msgCont {
  min-height: 60px;
}

@media (max-width: 1023px) {

  body:has(main.responsivePage) .closePage .msgCont,
  body:has(main.responsivePage) .errorPage .msgCont,
  body:has(main.responsivePage) .closePage .msgCont {
    min-height: calc(60 * var(--sp-w));
  }
}

.msg.error {
  font-weight: 700;
  color: var(--error_important);
}

.fieldBlock {
  padding: 8px 0 12px 0;
  border-bottom: 1px solid var(--bgGray);
}

.fieldBlock:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.fieldBlock dd {
  letter-spacing: 0.48px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .fieldBlock {
    padding: calc(23 * var(--sp-w)) 0;
  }

  body:has(main.responsivePage) .checkPage .fieldBlock:first-child {
    padding-top: 0;
  }

  body:has(main.responsivePage) .checkPage .fieldBlock:last-child {
    padding-bottom: 0;
  }

  body:has(main.responsivePage) .confirmPage .fieldBlock {
    padding: 0;
  }

  body:has(main.responsivePage) .confirmPage .confirm-dl-block {
    padding: calc(23 * var(--sp-w)) 0 calc(23 * var(--sp-w)) 0;
    gap: calc(10 * var(--sp-w));
  }

  body:has(main.responsivePage) .confirmPage .confirm-dl-block:first-child {
    padding-top: 0;
  }

  body:has(main.responsivePage) .confirmPage .confirm-dl-block:last-child {
    padding-bottom: 0;
  }
}

.fieldTitle {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .fieldTitle {
    padding: calc(4 * var(--sp-w));
  }
}

.need {
  padding: 0.5px 3px;
  border-radius: 2px;
  border: 1px solid var(--error_important);
  color: var(--error_important);
  font-size: 12px;
  min-width: 32px;
  font-weight: 700;
  background-color: var(--white);
}

.optional {
  padding: 0.5px 3px;
  border-radius: 2px;
  border: 1px solid var(--O_Blue);
  color: var(--O_Blue);
  font-size: 12px;
  min-width: 32px;
  font-weight: 700;
  background-color: var(--white);
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .need {
    padding: calc(0.5 * var(--sp-w)) calc(3 * var(--sp-w));
    border-radius: calc(2 * var(--sp-w));
    border: calc(1 * var(--sp-w)) solid var(--error_important);
    font-size: calc(12 * var(--sp-w));
    min-width: calc(32 * var(--sp-w));
    font-weight: 700;
  }

  body:has(main.responsivePage) .optional {
    padding: calc(0.5 * var(--sp-w)) calc(3 * var(--sp-w));
    border-radius: calc(2 * var(--sp-w));
    border: calc(1 * var(--sp-w)) solid var(--O_Blue);
    font-size: calc(12 * var(--sp-w));
    min-width: calc(32 * var(--sp-w));
    font-weight: 700;
  }
}

.caution {
  margin: 8px 0;
}

.caution,
.example {
  color: var(--textcolor_gray);
  font-size: 14px;
  letter-spacing: 0.28px;
}

.subtext {
  font-size: 14px;
  line-height: 1.25
}

@media (max-width: 1023px) {
  .subtext {
    font-size: calc(14 * var(--sp-w));
  }
}

@media (max-width: 1023px) {

  body:has(main.responsivePage) .caution,
  body:has(main.responsivePage) .example {
    font-size: calc(14 * var(--sp-w));
  }
}

.input,
.smp-sf-body input[type="text"] {
  width: 100%;
  border-radius: 2px;
  border: 1px solid var(--input_box_gray);
  background: var(--white);
  padding: 9px 12px;
  margin-bottom: 4px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .input {
    border: calc(1 * var(--sp-w)) solid var(--input_box_gray);
    padding: calc(8 * var(--sp-w)) calc(12 * var(--sp-w));
    margin-bottom: calc(4 * var(--sp-w));
  }
}


.short60 {
  max-width: 60px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .short60 {
    max-width: calc(60 * var(--sp-w));
  }
}

.short80 {
  max-width: 80px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .short80 {
    max-width: calc(80 * var(--sp-w));
  }
}

.short167 {
  max-width: 167px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .short167 {
    max-width: calc(167 * var(--sp-w));
  }
}

.short195 {
  max-width: 195px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .short195 {
    max-width: calc(195 * var(--sp-w));
  }
}

.short272 {
  max-width: 272px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .input.short272 {
    max-width: none;
  }
}

.short343 {
  max-width: 343px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .short343 {
    max-width: calc(343 * var(--sp-w));
  }
}

.short552 {
  max-width: 552px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .short552 {
    max-width: calc(552 * var(--sp-w));
  }
}

.radio li {
  width: 100%;
}

.radio.flex li {
  max-width: 272px;
  width: 100%;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .radio.flex li {
    max-width: calc(167.5 * var(--sp-w))
  }
}

.radioLabel,
.checkboxLabel {
  width: 100%;
  border-radius: 2px;
  padding: 7px 8px;
  cursor: pointer;
}

@media (max-width: 1023px) {

  body:has(main.responsivePage) .radioLabel,
  body:has(main.responsivePage) .checkboxLabel {
    border-radius: calc(2 * var(--sp-w));
    padding: calc(7 * var(--sp-w)) calc(8 * var(--sp-w));
  }
}

.errorMsg {
  color: var(--error_important);
  padding: 4px 0;
}

.searchZipcode {
  width: 126px;
  padding: 10px 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .searchZipcode {
    width: calc(126 * var(--sp-w));
    padding: calc(9 * var(--sp-w)) calc(8 * var(--sp-w));
    border-radius: calc(4 * var(--sp-w));
    font-size: calc(16 * var(--sp-w));
  }
}

.headerLogoCont img {
  max-height: 59px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .headerLogoCont img {
    max-height: calc(42 * var(--sp-w));
    width: calc(127 * var(--sp-w));
  }
}

.pulldownIcon,
.calendarIcon {
  display: flex;
  align-items: center;
  position: relative;
}

.pulldownIcon::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(../img/icon_pulldown.svg);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  right: 4px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .pulldownIcon::after {
    width: calc(24 * var(--sp-w));
    height: calc(24 * var(--sp-w));
    right: calc(12 * var(--sp-w));
  }
}

.calendarIcon::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(../img/icon_calendar.svg);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  right: 20px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .calendarIcon::after {
    width: calc(24 * var(--sp-w));
    height: calc(24 * var(--sp-w));
    right: calc(12 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .dayCont.gap4 {
    gap: calc(8 * var(--sp-w));
    ;
  }
}

.file {
  margin-top: 8px;
}

[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.file:has(input[type="file"]) {
  display: block;
  padding: 9px 8px;
  width: 160px;
  min-width: 160px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .file:has(input[type="file"]) {
    padding: calc(9 * var(--sp-w)) calc(8 * var(--sp-w));
    width: calc(160 * var(--sp-w));
    min-width: calc(160 * var(--sp-w));
    border-radius: calc(4 * var(--sp-w));
  }
}

.file:has(input[type="file"])::before {
  content: "\30D5\30A1\30A4\30EB\3092\9078\629E";
  line-height: 1.5;
  font-weight: 700;
}

.termsBox {
  text-align: left;
  height: 246px;
  padding: 12px 11px;
  border: 1px solid var(--gray);
  background-color: var(--white);
  overflow-y: auto;
  font-size: 16px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .termsBox {
    height: calc(246 * var(--sp-w));
    padding: calc(12 * var(--sp-w)) calc(11 * var(--sp-w));
    border: calc(1 * var(--sp-w)) solid var(--gray);
    font-size: calc(16 * var(--sp-w));
  }
}

.submit {
  border-radius: 40px;
  padding: 14px 8px;
  width: 100%;
  text-align: center;
  margin: 25px 0;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .submit {
    border-radius: calc(40 * var(--sp-w));
    padding: calc(12.475 * var(--sp-w));
    margin: calc(12 * var(--sp-w)) 0;
  }

  body:has(main.responsivePage) .requestForm-button .submit {
    margin: 0;
  }

  body:has(main.responsivePage) a.submit {
    display: flex;
    width: 100%;
  }
}

.spiralSeal {
  max-width: 640px;
  background-color: var(--white);
  border: 1px solid var(--borderGray);
  margin: auto;
  margin-bottom: 24px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .spiralSeal {
    max-width: calc(345 * var(--sp-w));
    border: calc(1 * var(--sp-w)) solid var(--borderGray);
    margin-bottom: calc(24 * var(--sp-w));
  }
}

.spiralSeal td {
  vertical-align: middle;
}

.confirmData {
  padding: 6px 12px;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .confirmData {
    padding: calc(7.693 * var(--sp-w)) calc(11.6 * var(--sp-w));
  }
}

@media (max-width: 1023px) {

  body:has(main.responsivePage) .checkPage .fieldBlockCont,
  body:has(main.responsivePage) .confirmPage .fieldBlockCont {
    padding: calc(30.5 * var(--sp-w)) 0;
  }
}

.back {
  width: 45%;
  max-width: 180px;
  text-align: center;
  padding: 14px 34px;
  border-radius: 40px;
  margin: 12px 0;
}

@media (max-width: 1023px) {
  body:has(main.responsivePage) .back {
    max-width: calc(180 * var(--sp-w));
    margin: calc(9.1 * var(--sp-w)) 0;
    padding: calc(13.5 * var(--sp-w)) calc(32.6 * var(--sp-w));
    border-radius: calc(40 * var(--sp-w));
    width: calc(173.07 * var(--sp-w));
  }

  body:has(main.responsivePage) .requestForm-link .back {
    margin-top: calc(40 * var(--sp-w));
  }
}

.nav {
  float: left;
  width: 224px;
  padding: 40px 24px;
  color: var(--white);
  background: var(--black-1);
}

.headerNav {
  padding: 23px 24px;
  width: 224px;
  min-width: 224px;
}

.headerNav img {
  max-width: 176px;
  max-height: 26px;
  display: block;
  margin: auto;
}

.headerRightCont {
  letter-spacing: 0.48px;
}

.iconA::after,
.iconB::before {
  content: "";
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.arrow::after {
  background-image: url(../img/icon_arrow_up.svg);
  width: 20px;
  height: 20px;
}

.user::before {
  background-image: url(../img/icon_user.svg);
  width: 20px;
  height: 20px;
}

.logout::before {
  background-image: url(../img/icon_logout.svg);
  width: 20px;
  height: 20px;
}

.menu::before {
  background-image: url(../img/icon_menu.svg);
  width: 24px;
  height: 24px;
}

.tel::before {
  background-image: url(../img/icon_tel.svg);
  width: 16px;
  height: 16px;
}

.mail::before {
  background-image: url(../img/icon_mail.svg);
  width: 16px;
  height: 16px;
}

.sidebarPage {
  display: flex;
  flex-direction: row-reverse;
}

.exampleCont {
  padding: 8px 0;
}

.filedSubtext {
  padding: 4px 0;
}

.gradation,
.smp-search-form-table [type="submit"] {
  color: var(--white);
  background: linear-gradient(0deg, #474747 0%, #737373 100%);
  border-radius: 40px;
  min-width: fit-content;
  text-align: center;
  font-weight: 700;
  padding: 11px;
  letter-spacing: 0.48px;
}

.smp-search-form-table [type="submit"] {
  width: 153px;
}

.smp-row-1 {
  text-align: right;
}

.smp-table {
  width: 100%;
}

.smp-row-1 td:nth-last-child(2) {
  color: var(--textcolor_B) !important;
  font-size: 14px !important;
}

.smp-table tbody tr .smp-cell:last-child {
  display: none !important;
}

.smp-row-normal {
  height: 0 !important;
}

.smp-row-1 select {
  appearance: none;
  -moz-appearance: none;
  border-radius: 2px;
  border: 1px solid var(--input_box_gray);
  padding: 6px;
  line-height: 1.2;
  width: 68px;
  background: url('../img/icon_list_pulldown.svg') no-repeat right 6px center;
  background-color: var(--white);
  background-size: 6px;
  margin: 8px 13px;
  text-align: left;
}

.smp-row-1 input[type="submit"] {
  background-color: var(--green);
  border-radius: 3px;
  color: var(--white);
  width: 72px;
  padding: 5px 17px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.sidebarPage .smp-row-data:nth-child(2n-1) td {
  background-color: var(--white) !important;
}

.smp-row-data:nth-child(2n-1) td {
  background-color: var(--lime) !important;
}

.smp-row-data+.smp-row-normal td {
  display: block;
  border: none !important;
}

.smp-title {
  display: none;
}

.smp-pager {
  font-size: 14px;
  color: var(--textcolor_B);
  margin: 16px 0 0 auto;
}

.smp-row-2 .smp-pager {
  margin: 0 0 16px auto;
}

.smp-pager tr {
  display: flex;
  align-items: center;
  gap: 8px;
}

.smp-page {
  color: var(--white);
  background-color: var(--green);
  border: 1px solid var(--green);
  min-width: 30px;
  min-height: 32px;
  padding: 6px 0;
  text-align: center;
}

.smp-page.smp-current-page {
  color: var(--green);
  background-color: var(--white);
}

.smp-page.smp-page-space {
  background-color: unset;
  border: none;
  color: var(--textcolor_B);
  cursor: default;
}

.smp-row-3 td {
  padding: 9px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background-color: var(--black-1) !important;
  color: var(--white) !important;
  vertical-align: middle;
}

tr.smp-row-data.is-row-link td,
.smp-page:not(.smp-current-page),
[type="submit"] {
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.smp-cell-data {
  color: var(--textBlack) !important;
  padding: 21px 8px !important;
  text-align: center;
  vertical-align: middle;
  border: none !important;
  font-size: 16px !important;
  letter-spacing: 0.32px;
  background-color: var(--white) !important;
}

.smp-row-data .smp-cell {
  border-width: 0 !important;
  vertical-align: middle;
  text-align: center !important;
}

.smp-cell-data a {
  color: var(--blue);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 10%;
  text-underline-offset: 25%;
  transition: 0.3s ease-in-out;
  letter-spacing: 0.48px;
}

.smp-search-form-table {
  margin: 12px auto 48px auto;
  color: var(--textcolor_B);
  max-width: 751px;
}

.smp-sf-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.smp-sf-head {
  width: 193px !important;
  min-width: 193px;
  display: block;
  color: var(--textcolor_B) !important;
  border: none !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  background-color: transparent !important;
}

.smp-search-form .smp-sf-body {
  border: none !important;
  padding: 0 !important;
  background-color: transparent !important;
  font-size: 16px !important;
  width: 100% !important;
  letter-spacing: 0.32px;
}

.smp-search-form-table .smp-sf-body div {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.smp-search-form-table .smp-sf-body div:has(label) {
  gap: 24px 14px;
}

.smp-search-form-table .smp-sf-body table div:has(label) {
  gap: 32px;
}

.smp-search-form-table .smp-sf-body td div:has(span) {
  height: 9px !important;
  background-color: transparent !important;
}

.smp-sf-body:has(input[type="text"] + input[type="text"]) input[type="text"] {
  width: 180px !important;
}

.smp-sf-row+.smp-sf-row {
  margin-top: 24px;
}

.smp-search-form-table label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.smp-search-form-table table label {
  margin: 8px;
}

.smp-search-form-table select {
  width: 174px;
  font-size: 16px;
  border-radius: 2px;
  border: 1px solid var(--input_box_gray);
  padding: 9px 12px;
  background: url(../img/icon_pulldown.svg) no-repeat right 9px center;
  background-size: 24px;
  text-align: left;
  margin-left: 8px;
  background-color: var(--white);
}


.smp-search-form-table td:has(input[type="submit"]) {
  margin: auto;
  margin-top: 32px;
  width: 100%;
}

.cardHead {
  background-color: var(--lime);
  padding: 5.5px 18px;
}

.cardHeadTxt {
  font-size: 24px;
}

.cardSubHeadTxt {
  padding: 5px 12px;
  border-left: 6px solid var(--green);
}

.card {
  margin: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}

.cardTh,
.cardTd {
  padding: 14px 16px;
  border: 1px solid var(--input_box_gray);
  vertical-align: middle;
  word-break: break-all;
}

.cardTh {
  width: 380px;
  max-width: 380px;
  font-weight: 700;
  background: var(--lime);
  padding: 14px 16px;
}

.cardTd {
  padding: 14px 20px;
}

.link {
  color: var(--blue);
  text-decoration-line: underline;
  text-decoration-thickness: 10%;
  text-underline-offset: 25%;
  transition: 0.3s ease-in-out;
  letter-spacing: 0.28px;
}

.formFileCont {
  align-items: center;
  overflow-wrap: anywhere;
}

.smp-sf-body span:has([type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 273px;
}

@media (min-width: 1024px) {
  .display-grid-pc {
    display: grid;
    grid-template-columns: auto 560px;
    gap: 70px;
    padding: 0 0 16px 0;
    margin-bottom: 8px;
  }

  .display-grid-pc:last-of-type {
    margin-bottom: 0;
  }

  .confirmPage .display-grid-pc {
    align-items: baseline;
    padding: 13px 0 21px 0;
  }
}

.btnCont {
  width: 43.01%;
  margin: auto;
  position: absolute;
  bottom: -129px;
  left: 50%;
  transform: translateX(-50%);
}

.confirmPage .btnCont {
  bottom: -201px;
  align-items: center;
}

.thanksPage .btnCont {
  bottom: -105px;
  align-items: center;
}

@media (max-width: 1023px) {
  .btnCont {
    bottom: calc(-109 * var(--sp-w));
    width: calc(348 * var(--sp-w));
  }

  .confirmPage .btnCont {
    bottom: calc(-217 * var(--sp-w));
    gap: calc(30.7 * var(--sp-w));
  }

  .thanksPage .btnCont {
    bottom: calc(-86 * var(--sp-w));
  }
}

.column-flex-start {
  flex-direction: column;
  align-items: flex-start;
}

.requestFormWrap {
  margin: 0 auto;
}

.requestForm {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 56px;
  position: static;
  transform: none;
  text-align: center;
}

.requestForm-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: static;
  transform: none;
  text-align: center;
  margin-top: 106px;
}

.requestForm-button {
  display: grid;
  place-items: center;
  gap: 16px;
  padding-bottom: 24px;
}

.requestForm-button-name {
  font-size: 20px;
}

.requestForm-button .submit {
  margin: 0;
  width: 270px;
}

@media (max-width: 1023px) {
  .requestForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(23.125 * var(--sp-w));
    position: static;
    transform: none;
    text-align: center;
    padding: calc(17.5 * var(--sp-w)) 0 0 0;
  }

  .requestForm-button {
    display: grid;
    place-items: center;
    gap: calc(7.6 * var(--sp-w));
    padding-bottom: 0;
    width: calc(270 * var(--sp-w));
    margin: 0 calc(40 * var(--sp-w)) 0 calc(40 * var(--sp-w));
  }

  .requestForm-button-name {
    font-size: calc(15.5 * var(--sp-w));
  }

  .requestForm-link {
    margin-top: 0;
  }
}

.download-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.download-link::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("https://i02.smp.ne.jp/u/otsuka-cdp/BtoB/img/icon_pdf.svg") no-repeat center / contain;
  margin-right: 8px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .download-link::before {
    width: calc(24 * var(--sp-w));
    height: calc(24 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .form-bg {
    background-color: var(--mainBackGround);
  }
}

@media (min-width: 1024px) {
  .policyAgreeTitle {
    max-width: 134px;
  }
}