@charset "UTF-8";
@import "reset.css";

/* color set */
body {
  --color-main : rgb(68, 0, 153);
  --color-op: rgb(157, 84, 249);
  --color-op2: rgb(175, 113, 255);
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
}

/* font set */
html {
  --fsize: clamp(14px, 1.2903vw, 20px); /* 1.3559vw 1180px -> 16px */
  font-size: var(--fsize);
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}


._f26 { font-size: calc(26 / 16 * var(--fsize));}
._f24 { font-size: calc(24 / 16 * var(--fsize));}
._f20 { font-size: calc(20 / 16 * var(--fsize));}
._f18 { font-size: calc(18 / 16 * var(--fsize));}
._f16_5 { font-size: calc(16.5 / 16 * var(--fsize));}
._f15 { font-size: calc(15 / 16 * var(--fsize));}
._f14 { font-size: calc(14 / 16 * var(--fsize));}
._f12 { font-size: max(12px, calc(12 / 16 * var(--fsize)));}
._f10 { font-size: max(10px, calc(10 / 16 * var(--fsize)));}

._wt_e { font-weight: 200; }
._wt_r { font-weight: 400; }
._wt_b { font-weight: 700; }

/* tool */
.bgt {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

._txt_c { text-align: center;}
._nols { letter-spacing: 0 !important;}
._ls01 { letter-spacing: .1em !important;}
._idt_125 {
 text-indent: -1.25em;
  padding-left: 1.25em;
}
._idt_100 {
  text-indent: -1em;
  padding-left: 1em;
}
._mt_1em {
  margin-top: 1em;
}
._flex { display: flex; }
._flex_col { flex-direction: column; }
._f00a { flex: 0 0 auto; }
._f11a { flex: 1 1 auto; }
._g05r { gap: .5rem; }
._g1r { gap: 1rem; }
._g2r { gap: 2rem; }

._hide {
  display: none !important;
}

img {
  width: 100%;
  height: auto;
}

/* layout */
body {
  background-color: var(--color-white);
  color: var(--color-black);
  line-height: 1.5;
}
.wrapper {
  display: flex;
  flex-direction: column;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
}
.container {
  height: 100%;
}
.error_view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* header */
.header { display: flex; align-items: center; height: 4rem; }
.logo { height: 4rem; padding: .5rem 1rem; }
.logo_img > svg { width: auto; height: 3rem; }

.welcome .header { display: none; }

/* footer */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
}
.welcome .footer { display: none; }

/* welcome */
.welcome .btn_start {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: var(--color-black);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/index.webp);
}

/* main */
.main {
  position: relative;
  height: calc(100dvh - 6rem);
  overflow-y: auto;
}
.welcome .main {
  height: 100dvh;
  overflow: hidden;
}
.sc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  /* visibility: hidden; */
  z-index: 100;
  overflow: hidden;
}

/* sc change */
.agreement .sc.agreement { visibility: visible; z-index: 200;}
.q1 .sc.q1 { visibility: visible; z-index: 200; }
.q2_1 .sc.q2_1 { visibility: visible; z-index: 200; }
.q2_2 .sc.q2_2 { visibility: visible; z-index: 200; }
.q3 .sc.q3 { visibility: visible; z-index: 200; }
.tool .sc.tool { visibility: visible; z-index: 200; }

/* sc change photo */
.qdone .qdone { visibility: visible; z-index: 200; }
.photo .photo { visibility: visible; z-index: 200; }
.job .job { visibility: visible; z-index: 200; }

/* MAIN */
/* sec_header */
.sec_header {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  height: 4.5rem;
  background-color: var(--color-main);
  color: var(--color-white);
}
.step_box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  margin-bottom: .5rem;
  gap: .25rem;
}
.step_box .step {
  display: block;
  width: 6rem;
  aspect-ratio: 24/1;
  border-radius: .125rem;
  background-color: var(--color-op);
}
.step_box .step._act {
  aspect-ratio: 24/2;
  border-radius: .25rem;
  background-color: var(--color-op2);
}

/* agreement */
.agreement .text_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2.5rem;
  height: calc(100dvh - 14.5rem);
}
.agreement .text_box > div {
  width: 48rem;
}
.agreement .text_box .text {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.agreement .text_box .notice_box {
  background-color: rgba(231,231,231);
  padding: 1rem 2rem;
  border-radius: .5rem;
}
.agreement .text_box .notice_box a {
  text-decoration: underline;
}

/* input */
.input_field {
  height: calc(100dvh - 14.5rem);
  padding: 2rem 4rem 0;
}
/* input 1 column */
.input_box._col1c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  height: calc(100dvh - 18.5rem);
}

/* input 2 columns */
.input_box._col2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1.75rem 4rem;
  height: calc(100dvh - 18.5rem);
  max-height: 40rem;
}

.sc.q2_1 .input_field {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 4rem;
}
.sc.q2_1 .input_box {
  width: calc(50% - 2rem);
}
.sc.q2_1 .input_box.q2_1_1 {
  width: 100%;
}


.input_box fieldset {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.input_box._col2 fieldset {
  width: calc(50% - 2rem);
}
.input_box fieldset::before {
  content: '';
  position: absolute;
  top: -1.625rem;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-op);
  z-index: 10;
}
fieldset > legend {
  position: relative;
  margin-bottom: .75rem;
  padding-right: 1rem;
  background-color: var(--color-white);
  font-size: calc(18 / 16 * 1rem);
  color: var(--color-main);
  font-weight: 700;
  z-index: 20;
}
fieldset > div {
  position: relative;
}
.input_box label {
  position: relative;
  font-size: calc(18 / 16 * 1rem);
  padding-left: 2rem;
}



.sc.q1 .input_box label {
  width: 10rem;
  padding-left: 0;
  font-size: calc(26 / 16 * 1rem);
}
.sc.q3 .input_box label {
  font-size: calc(17 / 16 * 1rem);
}

label[for] {
  display: flex;
  align-items: center;
  gap: .5rem;
}


/* radio */
.radio label[for]:has(input[type="radio"]) {
  gap: 1rem;
}
.radio input[type="radio"] {
  flex: 0 0 1.25rem;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  margin-top: .125rem;
  border-radius: .625rem;
  border: 1px solid var(--color-op2);
}
.radio input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--color-main);
}

/* radio_slider */
.radio_slider {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 3rem;
}
.radio_slider::before {
  content: '';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(100% - 6em);
  height: 6px;
  border-radius: 3px;
  border: 1px var(--color-main) solid;
  background-color: var(--color-op2);
  opacity: .2;
}
.radio_slider .marker {
  position: absolute;
  top: .375rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(100% - 10.5em);
  height: 1.75rem;
  z-index: 10;
}
.radio_slider .marker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1.75rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--color-main);
  box-shadow: rgba(0, 0, 0, .2) 2px 2px;
  transition: left .4s ease-in-out;
}
.radio_slider label[for="q2-1-1-1"]:has(input:checked) ~ .marker::before {
  left: 2.8%;
}
.radio_slider label[for="q2-1-1-2"]:has(input:checked) ~ .marker::before {
  left: 34.1%;
}
.radio_slider label[for="q2-1-1-3"]:has(input:checked) ~ .marker::before {
  left: 65.9%;
}
.radio_slider label[for="q2-1-1-4"]:has(input:checked) ~.marker::before {
  left: 97.2%;
}
.input_box .radio_slider label {
  position: relative;
  justify-content: center;
  width: 10em;
  margin-top: -4rem;
  padding-top: 4rem;
  padding-left: 0;
  z-index: 20;
}
.q2_1_1 label {
  font-size: calc(22 / 16 * 1rem);
}
.q2_1_2 label {
  font-size: calc(22 / 16 * 1rem);
}
.q2_1_3 label {
  font-size: calc(22 / 16 * 1rem);
}

.input_box .radio_slider label::before {
  content: '';
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  width: 1px;
  height: .75rem;
  background-color: var(--color-op);
  opacity: .8;
}
.input_box .radio_slider label::after {
  content: '';
  position: absolute;
  top: .5rem;
  left: 50%;
  width: 1px;
  height: .75rem;
  background-color: var(--color-op);
  opacity: .8;

}

.radio_slider label[for] {
  gap: 0;
}

/* checkbox */
input[type="checkbox"] {
  flex: 0 0 1.25rem;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  margin-top: .125rem;
  border-radius: .125rem;
  border: 1px solid var(--color-op2);
}

input[type="checkbox"]:checked::before {
  position: absolute;
  top: -.25rem;
  left: .25rem;
  transform: rotate(50deg);
  width: .75rem;
  height: 1.5rem;
  border-right: 4px solid var(--color-main);;
  border-bottom: 4px solid var(--color-main);
  content: '';
}
.checkbox label:has(input:disabled) {
  opacity: .5;
}
.checkbox label:has(input:checked)::before {
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translate(0, -50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-main);
}
.checkbox label:has(input[data-number="1"])::before {
  content: '①';
}
.checkbox label:has(input[data-number="2"])::before {
  content: '②';
}
.checkbox label:has(input[data-number="3"])::before {
  content: '③';
}

/* input text */
input[type="text"] {
  border-radius: .25rem;
  border: 1px var(--color-main) solid;
  padding: .5rem 1rem;
}
input.job_other {
  margin-left: 4rem;
}
input[type="text"]:disabled {
  opacity: .3;
}

.q2_2 .sc.q2_2 label {
  font-size: calc(22 / 16 * 1rem);
}

/* tool select */
.tool_select {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  height: 36rem;
}
.tool_select label {
  /* width: 85%; */
  height: 6.75rem;
  border: 2px transparent solid;
  transition: border-color .2s;
  font-size: calc(22 / 16 * 1rem);
}
.tool_select label > input {
  width: 1px;
}

.tool_select label::before {
  content: '';
  width: 4.5rem;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.tool_select label[for="tool-1"]::before { background-image: url(../images/tool1.svg); }
.tool_select label[for="tool-2"]::before { background-image: url(../images/tool2.svg); }
.tool_select label[for="tool-3"]::before { background-image: url(../images/tool3.svg); }
.tool_select label[for="tool-4"]::before { background-image: url(../images/tool4.svg); }
.tool_select label:has(input:checked) {
  border-color: var(--color-main);
}
/* tool select text */
.tool_select label::after {
  content: '';
  position: relative;
  /*
  position: absolute;
  top: 50%;
  left: 18rem;
  transform: translate(0, -50%);
  */
  height: 6.5rem;
  aspect-ratio: 25/4;
  margin-left: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
.tool_select label[for="tool-1"]:has(input[data-number="1"])::after { background-image: url(../images/text/text1_1.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="1"])::after { background-image: url(../images/text/text2_1.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="1"])::after { background-image: url(../images/text/text3_1.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="1"])::after { background-image: url(../images/text/text4_1.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="2"])::after { background-image: url(../images/text/text1_2.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="2"])::after { background-image: url(../images/text/text2_2.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="2"])::after { background-image: url(../images/text/text3_2.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="2"])::after { background-image: url(../images/text/text4_2.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="3"])::after { background-image: url(../images/text/text1_2.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="3"])::after { background-image: url(../images/text/text2_2.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="3"])::after { background-image: url(../images/text/text3_2.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="3"])::after { background-image: url(../images/text/text4_2.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="4"])::after { background-image: url(../images/text/text1_3.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="4"])::after { background-image: url(../images/text/text2_3.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="4"])::after { background-image: url(../images/text/text3_3.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="4"])::after { background-image: url(../images/text/text4_3.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="5"])::after { background-image: url(../images/text/text1_4.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="5"])::after { background-image: url(../images/text/text2_4.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="5"])::after { background-image: url(../images/text/text3_4.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="5"])::after { background-image: url(../images/text/text4_4.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="6"])::after { background-image: url(../images/text/text1_6.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="6"])::after { background-image: url(../images/text/text2_6.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="6"])::after { background-image: url(../images/text/text3_6.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="6"])::after { background-image: url(../images/text/text4_6.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="7"])::after { background-image: url(../images/text/text1_7.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="7"])::after { background-image: url(../images/text/text2_7.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="7"])::after { background-image: url(../images/text/text3_7.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="7"])::after { background-image: url(../images/text/text4_7.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="8"])::after { background-image: url(../images/text/text1_8.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="8"])::after { background-image: url(../images/text/text2_8.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="8"])::after { background-image: url(../images/text/text3_8.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="8"])::after { background-image: url(../images/text/text4_8.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="9"])::after { background-image: url(../images/text/text1_9.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="9"])::after { background-image: url(../images/text/text2_9.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="9"])::after { background-image: url(../images/text/text3_9.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="9"])::after { background-image: url(../images/text/text4_9.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="10"])::after { background-image: url(../images/text/text1_10.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="10"])::after { background-image: url(../images/text/text2_10.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="10"])::after { background-image: url(../images/text/text3_10.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="10"])::after { background-image: url(../images/text/text4_10.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="11"])::after { background-image: url(../images/text/text1_11.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="11"])::after { background-image: url(../images/text/text2_11.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="11"])::after { background-image: url(../images/text/text3_11.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="11"])::after { background-image: url(../images/text/text4_11.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="12"])::after { background-image: url(../images/text/text1_12.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="12"])::after { background-image: url(../images/text/text2_12.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="12"])::after { background-image: url(../images/text/text3_12.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="12"])::after { background-image: url(../images/text/text4_12.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="13"])::after { background-image: url(../images/text/text1_13.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="13"])::after { background-image: url(../images/text/text2_13.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="13"])::after { background-image: url(../images/text/text3_13.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="13"])::after { background-image: url(../images/text/text4_13.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="14"])::after { background-image: url(../images/text/text1_14.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="14"])::after { background-image: url(../images/text/text2_14.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="14"])::after { background-image: url(../images/text/text3_14.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="14"])::after { background-image: url(../images/text/text4_14.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="15"])::after { background-image: url(../images/text/text1_15.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="15"])::after { background-image: url(../images/text/text2_15.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="15"])::after { background-image: url(../images/text/text3_15.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="15"])::after { background-image: url(../images/text/text4_15.svg); }

.tool_select label[for="tool-1"]:has(input[data-number="16"])::after { background-image: url(../images/text/text1_16.svg); }
.tool_select label[for="tool-2"]:has(input[data-number="16"])::after { background-image: url(../images/text/text2_16.svg); }
.tool_select label[for="tool-3"]:has(input[data-number="16"])::after { background-image: url(../images/text/text3_16.svg); }
.tool_select label[for="tool-4"]:has(input[data-number="16"])::after { background-image: url(../images/text/text4_16.svg); }

/* btn_box */
.btn_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  padding: 0 4rem;
}
.btn_box._rel {
  position: relative;
  padding: 0;
}
.btn_box.col1i,
._input .btn_box.col1,
body.confirm .btn_box.col1 {
  justify-content: center;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 12.5rem;
  height: 3rem;
  padding: 0 2rem;
  border-radius: .5rem;
  background-color: var(--color-main);
  color: var(--color-white);
}
.btn:disabled {
  opacity: .5;
}
.btn.btn_reset {
  border: 1px var(--color-main) solid;
  background-color: var(--color-white);
  color: var(--color-main);
}
._input .btn_cansel {
  display: none;
}
._edit._edit_q1_q2 .q.q2 .btn_cansel {
  display: none;
}
._edit .btn_back {
  display: none;
}
._edit._edit_q1_q2 .q.q2 .btn_back {
  display: flex;
}



/* confirm */
.confirm_box {
  display: flex;
  gap: 1rem;
  position: relative;
}
.confirm_box::before {
  content: '';
  position: absolute;
  top: 1.625rem;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-op);
  opacity: .5;
}
.confirm_box.tool {
  margin-top: -.75rem;
  margin-left: 4rem;
}

.confirm_box.tool::before {
  top: 0;
}
.confirm_box .ttl {
  flex: 0 0 2.25rem;
  width: 2.25rem;
}
.confirm_box .a {
  margin-top: .5rem;
  padding-left: 2rem;
}
.confirm_box .q2_1 .a {
  margin-top: .25rem;
}
.confirm_box .q2_1 .ttl_s {
  flex: 0 0 6.25rem;
  width: 6.25rem;
}

.confirm .input_field {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 4rem;
}

.confirm_box .item.top3 {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.confirm_box .item.top3::before {
  color: var(--color-main);
  font-size: 1rem;
}
.confirm_box .item.top3:nth-child(1)::before { content: '①'; }
.confirm_box .item.top3:nth-child(2)::before { content: '②'; }
.confirm_box .item.top3:nth-child(3)::before { content: '③'; }

.confirm_box .qa {
  flex-grow: 1;
}
.confirm_box.tool .qa {
  display: flex;
  padding-top: .25rem;
}
.confirm_box.tool .qa .tool_item {
  width: 3.5rem;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.confirm_box.tool .qa .tool_item.tool_1 { background-image: url(../images/tool1.svg); }
.confirm_box.tool .qa .tool_item.tool_2 { background-image: url(../images/tool2.svg); }
.confirm_box.tool .qa .tool_item.tool_3 { background-image: url(../images/tool3.svg); }
.confirm_box.tool .qa .tool_item.tool_4 { background-image: url(../images/tool4.svg); }
.confirm_box.tool .qa .tool_text {
  position: relative;
  height: 4.5rem;
  aspect-ratio: 1/1;
}
.confirm_box.tool .qa .tool_text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translate(0, -50%);
  height: 140%;
  aspect-ratio: 25/4;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}
.confirm_box.tool .qa .tool_text.text_1_1::before { background-image: url(../images/text/text1_1.svg); }
.confirm_box.tool .qa .tool_text.text_2_1::before { background-image: url(../images/text/text2_1.svg); }
.confirm_box.tool .qa .tool_text.text_3_1::before { background-image: url(../images/text/text3_1.svg); }
.confirm_box.tool .qa .tool_text.text_4_1::before { background-image: url(../images/text/text4_1.svg); }

.confirm_box.tool .qa .tool_text.text_1_2::before { background-image: url(../images/text/text1_2.svg); }
.confirm_box.tool .qa .tool_text.text_2_2::before { background-image: url(../images/text/text2_2.svg); }
.confirm_box.tool .qa .tool_text.text_3_2::before { background-image: url(../images/text/text3_2.svg); }
.confirm_box.tool .qa .tool_text.text_4_2::before { background-image: url(../images/text/text4_2.svg); }

.confirm_box.tool .qa .tool_text.text_1_3::before { background-image: url(../images/text/text1_3.svg); }
.confirm_box.tool .qa .tool_text.text_2_3::before { background-image: url(../images/text/text2_3.svg); }
.confirm_box.tool .qa .tool_text.text_3_3::before { background-image: url(../images/text/text3_3.svg); }
.confirm_box.tool .qa .tool_text.text_4_3::before { background-image: url(../images/text/text4_3.svg); }

.confirm_box.tool .qa .tool_text.text_1_4::before { background-image: url(../images/text/text1_4.svg); }
.confirm_box.tool .qa .tool_text.text_2_4::before { background-image: url(../images/text/text2_4.svg); }
.confirm_box.tool .qa .tool_text.text_3_4::before { background-image: url(../images/text/text3_4.svg); }
.confirm_box.tool .qa .tool_text.text_4_4::before { background-image: url(../images/text/text4_4.svg); }

.confirm_box.tool .qa .tool_text.text_1_5::before { background-image: url(../images/text/text1_5.svg); }
.confirm_box.tool .qa .tool_text.text_2_5::before { background-image: url(../images/text/text2_5.svg); }
.confirm_box.tool .qa .tool_text.text_3_5::before { background-image: url(../images/text/text3_5.svg); }
.confirm_box.tool .qa .tool_text.text_4_5::before { background-image: url(../images/text/text4_5.svg); }

.confirm_box.tool .qa .tool_text.text_1_6::before { background-image: url(../images/text/text1_6.svg); }
.confirm_box.tool .qa .tool_text.text_2_6::before { background-image: url(../images/text/text2_6.svg); }
.confirm_box.tool .qa .tool_text.text_3_6::before { background-image: url(../images/text/text3_6.svg); }
.confirm_box.tool .qa .tool_text.text_4_6::before { background-image: url(../images/text/text4_6.svg); }

.confirm_box.tool .qa .tool_text.text_1_7::before { background-image: url(../images/text/text1_7.svg); }
.confirm_box.tool .qa .tool_text.text_2_7::before { background-image: url(../images/text/text2_7.svg); }
.confirm_box.tool .qa .tool_text.text_3_7::before { background-image: url(../images/text/text3_7.svg); }
.confirm_box.tool .qa .tool_text.text_4_7::before { background-image: url(../images/text/text4_7.svg); }

.confirm_box.tool .qa .tool_text.text_1_8::before { background-image: url(../images/text/text1_8.svg); }
.confirm_box.tool .qa .tool_text.text_2_8::before { background-image: url(../images/text/text2_8.svg); }
.confirm_box.tool .qa .tool_text.text_3_8::before { background-image: url(../images/text/text3_8.svg); }
.confirm_box.tool .qa .tool_text.text_4_8::before { background-image: url(../images/text/text4_8.svg); }

.confirm_box.tool .qa .tool_text.text_1_9::before { background-image: url(../images/text/text1_9.svg); }
.confirm_box.tool .qa .tool_text.text_2_9::before { background-image: url(../images/text/text2_9.svg); }
.confirm_box.tool .qa .tool_text.text_3_9::before { background-image: url(../images/text/text3_9.svg); }
.confirm_box.tool .qa .tool_text.text_4_9::before { background-image: url(../images/text/text4_9.svg); }

.confirm_box.tool .qa .tool_text.text_1_10::before { background-image: url(../images/text/text1_10.svg); }
.confirm_box.tool .qa .tool_text.text_2_10::before { background-image: url(../images/text/text2_10.svg); }
.confirm_box.tool .qa .tool_text.text_3_10::before { background-image: url(../images/text/text3_10.svg); }
.confirm_box.tool .qa .tool_text.text_4_10::before { background-image: url(../images/text/text4_10.svg); }

.confirm_box.tool .qa .tool_text.text_1_11::before { background-image: url(../images/text/text1_11.svg); }
.confirm_box.tool .qa .tool_text.text_2_11::before { background-image: url(../images/text/text2_11.svg); }
.confirm_box.tool .qa .tool_text.text_3_11::before { background-image: url(../images/text/text3_11.svg); }
.confirm_box.tool .qa .tool_text.text_4_11::before { background-image: url(../images/text/text4_11.svg); }

.confirm_box.tool .qa .tool_text.text_1_12::before { background-image: url(../images/text/text1_12.svg); }
.confirm_box.tool .qa .tool_text.text_2_12::before { background-image: url(../images/text/text2_12.svg); }
.confirm_box.tool .qa .tool_text.text_3_12::before { background-image: url(../images/text/text3_12.svg); }
.confirm_box.tool .qa .tool_text.text_4_12::before { background-image: url(../images/text/text4_12.svg); }

.confirm_box.tool .qa .tool_text.text_1_13::before { background-image: url(../images/text/text1_13.svg); }
.confirm_box.tool .qa .tool_text.text_2_13::before { background-image: url(../images/text/text2_13.svg); }
.confirm_box.tool .qa .tool_text.text_3_13::before { background-image: url(../images/text/text3_13.svg); }
.confirm_box.tool .qa .tool_text.text_4_13::before { background-image: url(../images/text/text4_13.svg); }

.confirm_box.tool .qa .tool_text.text_1_14::before { background-image: url(../images/text/text1_14.svg); }
.confirm_box.tool .qa .tool_text.text_2_14::before { background-image: url(../images/text/text2_14.svg); }
.confirm_box.tool .qa .tool_text.text_3_14::before { background-image: url(../images/text/text3_14.svg); }
.confirm_box.tool .qa .tool_text.text_4_14::before { background-image: url(../images/text/text4_14.svg); }

.confirm_box.tool .qa .tool_text.text_1_15::before { background-image: url(../images/text/text1_15.svg); }
.confirm_box.tool .qa .tool_text.text_2_15::before { background-image: url(../images/text/text2_15.svg); }
.confirm_box.tool .qa .tool_text.text_3_15::before { background-image: url(../images/text/text3_15.svg); }
.confirm_box.tool .qa .tool_text.text_4_15::before { background-image: url(../images/text/text4_15.svg); }

.confirm_box.tool .qa .tool_text.text_1_16::before { background-image: url(../images/text/text1_16.svg); }
.confirm_box.tool .qa .tool_text.text_2_16::before { background-image: url(../images/text/text2_16.svg); }
.confirm_box.tool .qa .tool_text.text_3_16::before { background-image: url(../images/text/text3_16.svg); }
.confirm_box.tool .qa .tool_text.text_4_16::before { background-image: url(../images/text/text4_16.svg); }

.confirm_box .btn_edit {
  flex: 0 0 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 2rem;
  margin-top: 2rem;
  border-radius: .25rem;
  background-color: var(--color-op);
  color: var(--color-white);
}



/* photo_and_job */
/* qdone */
.photo_and_job .qdone > .sec_body {
  height: 100%;
}
.photo_and_job .qdone>.sec_body .input_field {
  height: 100%;
}
.photo_and_job .qdone .message_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  color: var(--color-main);
}
.photo_and_job .qdone .message_box .thanks_message {
  margin-bottom: 6rem;
}
.photo_and_job .qdone .message_box .request_message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 16rem;
  border: 1px var(--color-main) dashed;
  color: var(--color-black);
}
.photo_and_job .qdone .message_box .note {
  width: 100%;
  margin-top: 5rem;
  padding-bottom: 1rem;
}

/* photo */
.sc.photo .video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.job .sc.photo .video {
  display: none;
}
.sc.photo .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}
.sc.photo .btn_box {
  justify-content: flex-end;
}

/* job */
.sc.job .input_field {
  align-items: center;
}
.sc.job .result_inner {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  overflow: hidden;
}
.sc.job .result_inner #canvas,
.sc.job .result_inner .output {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16/9;
}

.sc.job .input_box {
  flex: 0 0 18rem;
}

.photo_and_job .flash_box {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 4rem);
  height: 4rem;
  margin: 2rem;
  background-color: rgba(255,222,222,1);
  border-radius: 1rem;
  border: 1px rgba(255,128,128,1) solid;
  padding: 0 2rem;
  color: rgb(255,0,0);
  z-index: 300;
}