@charset "UTF-8";

:root {
  --color-01: #ffffff;
  --color-02: #FAFAFA;
  --color-03: #F5F5F5;
  --color-04: #E5E5E5;
  --color-05: #D4D4D4;
  --color-06: #A3A3A3;
  --color-07: #737373;
  --color-08: #525252;
  --color-09: #404040;
  --color-10: #262626;
  --color-11: #171717;
  --color-12: #0A0A0A;

  --c-color-02: #FAFAFA;
  --c-color-12: #0A0A0A;

  --noto-sans: "Noto Sans JP", sans-serif;
  --inter: "Inter", sans-serif;

  --e_xxxl: 11rem;
  --e_xxl: 9rem;
  --e_xl: 8rem;
  --e_l: 6.4rem;
  --e_m: 5.8rem;
  --e_s: 5.2rem;
  --e_xs: 4.2rem;
  --e_xxs: 2.8rem;
  --e_xxxs: 2.2rem;


  --n_xxxl: 5rem;
  --n_xxl: 4.4rem;
  --n_xl: 3.9rem;
  --n_l: 3.4rem;
  --n_m: 3rem;
  --n_s: 2.2rem;
  --n_xs: 1.8rem;
  --n_xxs: 1.6rem;
  --n_xxxs: 1.4rem;
  --n_small: 1.2rem;

  --b: 700;
  --m: 500;

  --grad02: linear-gradient(90deg, rgba(163, 163, 163, 1) 0%, rgba(115, 115, 115, 1) 100%);
  --grad03: linear-gradient(135deg, rgba(245, 245, 245, 1) 0%, rgba(212, 212, 212, 1) 100%);
}

:root.darkmode {
  --color-01: #000000;
  --color-02: #0A0A0A;
  --color-03: #171717;
  --color-04: #262626;
  --color-05: #373737;
  --color-06: #525252;
  --color-07: #8A8A8A;
  --color-08: #A3A3A3;
  --color-09: #D4D4D4;
  --color-10: #E5E5E5;
  --color-11: #F5F5F5;
  --color-12: #FAFAFA;

  --c-color-02: #FAFAFA;
  --c-color-12: #0A0A0A;
}

h2.n_subHd.under {
    color: var(--c-color-02);
    background-color: #000000;
    padding: 1rem 2rem;
}

.indent{
    padding-left: 2rem;
    text-indent: -2rem;
}



/*================================================
 *  order-entry
 ================================================*/
.order-entry,
.order-entry-form{
    font-size: var(--n_xxs);
    padding-top: 12.4rem;
}
.order-entry h3{
    background-color: var(--c-color-12);
    color: var(--c-color-02);
    font-size: var(--n_s);
    font-weight: var(--b);
    padding: 1rem 2rem;
}
.order-entry h3 span{
    font-size: var(--n_xxxs);
    margin-left: 2rem;
}
@media screen and (max-width:767px){
    .order-entry h3{ 
        padding: 1rem;
        font-size: var(--n_xs);
    }
    .order-entry h3 span{
        display: block;
        margin-left: 0;
    }
}

.order_about{
    border: 1px solid var(--c-color-12);
    margin-bottom: 5rem;
}
.order_about dt,
.order_about dd{
    border-bottom: 1px solid var(--c-color-12);
    font-size: var(--n_xxs);
    padding: 1rem 2rem;
}
.order_about dt{
    background-color: var(--color-05);
    color: var(--color-12);
}
.order_about ul,
.order_flow ol{
    padding: 1rem 2rem;
}
.order_about li,
.order_flow_list li,
.policy-check-txt ul li.indent
{
    list-style-type: disc;
    list-style-position: inside;
}

.order_flow{
    margin-bottom: 5rem;
}
.order_flow ol{
    padding: 1rem;
}
.order_flow_list li{
    list-style-type: none;
}
.order_flow_list li.indent{
    text-indent: -1rem;
}
.order_flow_list li::before{
   display: inline-block;
   width: 1rem;
}
.order_flow_list li.list1::before{content: "①"; }
.order_flow_list li.list2::before{content: "②"; }
.order_flow_list li.list3::before{content: "③"; }
.order_flow_list li.list4::before{content: "④"; }
.order_flow_list li.list5::before{content: "⑤"; }
.order_flow_list li.list6::before{content: "⑥"; }
.order_flow_img{
    display: block;
    margin-bottom: 1rem;
}


/* form_list */
.indent-l{
    padding-left: 1.8rem;
}
.form_list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.form_list li{
    width: 100%;
    display: flex;
    gap: 2rem;
}
@media screen and (max-width:767px){
    .form_list li {
        flex-direction: column;
        gap: 0;
    }
}
.form_list > li:not(:last-child) {
    margin-bottom: 2rem;
    max-width: 114rem;
    margin: 0 auto;
    padding: 2rem 0 0;
}
.form_list .policy-check-txt{
    width: 100%;
}
.form_list .policy-check-txt ul{
    padding-left: 1.8rem;
}
.form_list .policy-check-txt label {
    display: inline-block;
}
.form_list_last{
    width: 100%;
    margin-top: 5rem;
    padding: 2rem 1rem;
    background-color: var(--c-color-12);
    color: var(--c-color-02);
    text-align: center;
}
@media screen and (max-width:767px){
    .form_list_last{
        text-align: left;
    }
}
.form_list_last a {
    background-color: unset;
    color: #fff;
    text-decoration: underline;
}
.form_list_last a:hover{
    cursor: pointer;
    text-decoration: none;
}
.form_list_last .policy-check-txt2{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.submitBtn{
    width: 100%;
    background-color: unset;
    color: #d4d4d4;
    display: inline-block;
    font-size: 2rem;
    margin-top: 2rem;
    padding-right: 5rem;
    pointer-events: none;
    position: relative;
    text-align: right;
}

.submitBtn.active{
    color: var(--c-color-12);
    pointer-events: auto;
}

.form_list input:not(.resetBtn) {
  background: #E5E5E5;
  border: 1px solid #E5E5E5;
  padding: 2.2rem;
  border-radius: 1rem;
  display: block;
  width: 20px;
  font-weight: 400;
  font-size: 1em;
  font-weight: inherit;
  font-family: inherit;
}


/* radio_box */
.form_list .radio_box {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 0 3.2rem;
}

.form_list .radio_box>div {
  display: flex;
  align-items: center;
}

.form_list .radio_box input[type="radio"] {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  accent-color: var(--c-color-12);
  position: relative;
  border: 1px solid #E5E5E5;
  background: #E5E5E5;
  border-radius: 50%;
  margin: 0 1.5rem 0 0;
  appearance: none;
  padding: 0;
  vertical-align: sub;
}

.form_list .radio_box input[type="radio"]::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  background-color: var(--c-color-02);
  border: 7px solid var(--c-color-12);
  border-radius: 50%;
  transition: .2s;
}

.form_list .radio_box input[type="radio"]:checked::before {
  opacity: 1;
}



/*================================================
 *  order-entry-form
 ================================================*/
.form_list.m-b{
    margin-bottom: var(--n_m);
}
.order-entry-form .form_list dd p.small{
        margin-left: 0;
}

.order-entry-form .form_inner {
  max-width: 95rem;
  margin: 0 auto;
}
.order-entry-form .form_desc {
    justify-content: left;
    margin-top: 6.4rem;
    margin-bottom: 2rem;
    padding-left: 1rem;
}
.order-entry-form h3{
    background-color: var(--color-08);
    color: var(--color-01);
    margin-bottom: 2rem;
    padding: 1rem;
}
.order-entry-form .form_list{
    padding: 1rem;
}
.order-entry-form .form_list select, .order-entry-form .form_list textarea, .order-entry-form .form_list input:not(.resetBtn) {
    width: 100%;
}
.order-entry-form .form_list .clm.unit {
    align-items: end;
    gap: 1rem;
}

.form_list .radio_box input[type="radio"] {
    width: 3rem;
    height: 3rem;
}
.order-entry-form .submit_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.order-entry-form .submit_wrap .submitBtn{
    padding-right: 0;
}

@media screen and (max-width: 767px) {

    .order-entry-form .form_desc {
        margin-top: 3rem;
    }
    .form_desc p {
        width: 100%;
        text-align: left;
    }
}