@charset 'UTF-8';

.customer-form {
  max-width: 1260px;
  margin: 0 auto;

  @media screen and (max-width: 1260px) {
    /*    margin: 0 30px;*/
  }

  @media screen and (max-width: 768px) {
    /* 768px以下に適用されるCSS（スマホ用） */
    width: unset;
    margin: unset;
  }

  .registration-step {
    display: flex;
    margin-bottom: 25px;

    @media screen and (max-width: 768px) {
      width: 100%;
    }

    div.arrow {
      position: relative;
      width: calc(100% / 4);

      &.arrow3 {
        width: calc(100% / 3);
      }

      &.three-step {
        width: calc(100% / 3);
      }

      min-width: 72px;
      background-color: var(--global_clr_lightgray);
      padding: 10px 0 10px 10px;
      margin-right: 10px;
      text-align: center;

      br {
        display: none;
      }

      @media screen and (max-width: 768px) {
        height: 38px;
        padding: 3px 0px 3px 9px;
        font-size: var(--global_font_size_small3);

        br {
          display: unset;
        }
      }

      &:not(.first):before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;

        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 16px solid white;
      }

      &:after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;

        border-top: 19px solid transparent;
        border-bottom: 19px solid transparent;
        border-left: 10px solid var(--global_clr_lightgray);
      }

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

        &:not(.first):before {
          left: 0;
          border-left: 7px solid white;
        }

        &:after {
          right: -7px;
          border-left: 7px solid var(--global_clr_lightgray);
        }
      }

      &.current {
        color: white;
        background-color: var(--global_clr_black);

        &:after {
          border-left: 10px solid var(--global_clr_black);
        }

        @media screen and (max-width: 768px) {
          &:after {
            border-left: 7px solid var(--global_clr_black);
          }
        }
      }
    }
  }

  .customer-form-title {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 2px 5px;
    width: 100%;

    h1 {
      font-size: var(--global_font_size_large5);
      /* margin: 3px 0px; */
    }

    @media screen and (max-width: 768px) {
      /* 768px以下に適用されるCSS（スマホ用） */
      margin: 10px;
      width: 90%;
    }
  }

  .customer-form-error {
    border: 1px solid var(--global_clr_darkred);
    border-radius: 5px;
    /* background-color: rgb(252, 218, 203); */
    color: var(--global_clr_red);
    padding: 7px 14px;
    margin: 10px 0px;
    /* width: 100%; */

    @media screen and (max-width: 768px) {
      margin: 10px;
    }
  }

  h1 {
    /* margin: 10px 0px; */
    font-size: var(--global_font_size_large9);
    font-weight: 700;

    @media screen and (max-width: 768px) {
      /* 768px以下に適用されるCSS（スマホ用） */
      margin: 10px;
      width: 90%;
    }
  }

  h2 {
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 40%,
        #dcdcdc 40%,
        #dcdcdc 100%);
    padding: 6px;
    font-weight: bold;

    @media screen and (max-width: 768px) {
      /* 768px以下に適用されるCSS（スマホ用） */
      font-size: var(--global_font_size_large3);
    }
  }

  a {
    color: var(--global_clr_blue);
  }

  .validation {
    margin: 20px 0;

    display: grid;
    grid: "header header"
      "input  notice"
      / 55% 45%;

    /* https://www.site-convert.com/archives/1528 */
    @media screen and (max-width: 900px) {
      /* 768px以下に適用されるCSS（スマホ用） */
      margin: 10px;
      grid: "header"
        "input"
        "notice";
    }

    fieldset {
      /* display: contents; */
    }

    .customer-form-column {
      grid-area: header;
    }

    .efo-input-area {
      grid-area: input;

      margin-bottom: 5px;

      ul {
        margin: 7px 0;

        li {
          margin-bottom: 5px;
        }
      }

      @media screen and (max-width: 768px) {
        /* 768px以下に適用されるCSS（スマホ用） */
        /* width: 95%; */

        ul {
          margin: 10px 0;

          li {
            margin-bottom: 7px;
          }
        }
      }

      .efo-result {
        margin-right: 7px;
        width: 95%;

        @media screen and (max-width: 768px) {
          /* 768px以下に適用されるCSS（スマホ用） */
          margin-right: unset;
          width: 100%;
        }

        select.efo-birth:first-child {
          width: 151px !important;

          @media (max-width: 380px) {
            width: 142px !important;
          }
        }
      }

      .display_password_ {
        margin: 10px 0 10px 10px;
      }

      .receiving-availability {
        margin: 20px 0 7px;
        padding-inline-start: 10px;

        .receiving-availability-title {
          margin: 0px 0px 5px;
        }

        .label-radio {
          display: block;
          width: fit-content;
        }
      }
    }

    .customer-form-notice {
      grid-area: notice;
    }

    /* 必須項目の修飾 */
    &.required {

      .customer-form-column {
        span:first-child {
          background-color: var(--global_clr_darkred);
          color: white;
          padding: 3px 4px;
          font-size: var(--global_font_size_small2);
          margin-right: 3px;
          font-weight: initial;
        }
      }

    }

    /* 任意項目の修飾 */
    &.optional {

      .customer-form-column {
        span:first-child {
          /* background-color: #527d9b; */
          background-color: var(--global_clr_darkblue);
          color: white;
          padding: 3px 4px;
          font-size: var(--global_font_size_small2);
          margin-right: 3px;
          font-weight: initial;
        }
      }

    }

    /* 自動の修飾 */
    &.auto {

      .customer-form-column {
        span:first-child {
          /*          background-color: var(--global_clr_darkblue);*/
          background-color: #999;
          color: white;
          padding: 3px 4px;
          font-size: var(--global_font_size_small2);
          margin-right: 3px;
          font-weight: initial;
        }
      }

    }

    .customer-form-column {
      border-bottom: 1px solid #000;
      padding-bottom: 2px;
      margin-bottom: 10px;

      h2 {
        background: none !important;
        padding: 0px 0px 2px !important;

        @media screen and (max-width: 768px) {
          margin-bottom: 2px !important;
          font-size: var(--global_font_size_default) !important;
          font-weight: normal !important;
          padding: 0px 0px 2px !important;
        }
      }
    }

    h2.customer-form-column {
      background: none !important;

      @media screen and (max-width: 768px) {
        margin-bottom: 2px !important;
        font-size: var(--global_font_size_default) !important;
        font-weight: normal !important;
        padding: 0px 0px 2px !important;
      }
    }

    .customer-form-input {
      margin-bottom: 15px;
      margin-top: 5px;

      .customer-form-subcolumn {
        grid-area: customer-form-subcolumn;
        display: inline-block;
        width: 26px;
        /* top: 10px;
        position: relative; */
      }

      .efo-result {
        /* grid-area: efo-result; */
      }

      .validation-error-message {
        text-indent: -1.5em;
        padding-left: 1.5em;
      }

      .describe {
        /* grid-area: describe; */
        margin-top: 5px;
        font-size: var(--global_font_size_small3);
      }

      .sub_exists {
        margin-left: 30px;
      }
    }

    .customer-form-input-label {
      margin-bottom: 5px;
      margin-top: 5px;
      /* margin-left: 32px; */

      @media screen and (max-width: 768px) {
        margin-left: unset;
      }
    }

    .customer-form-notice {
      .customer-form-notice-area {
        background-color: var(--global_clr_lightgray);
        width: 99%;
        height: fit-content;
        border-radius: 8px;
        padding: 9px;
        margin-bottom: 8px;

        @media screen and (max-width: 768px) {
          /* 768px以下に適用されるCSS（スマホ用） */
          width: 95%;
        }

        .customer-form-notice-title {
          color: midnightblue;
        }

        .customer-form-notice-red {
          color: #c90e12;
        }

        span {
          /*          display: inline-block;
          text-indent: -1em;
          padding-left: 1em;*/
        }

        table {
          background-color: white;
          margin: 10px;

          tr {
            th {
              border: 1px solid var(--global_clr_black);
              text-align: center;
              padding: 2px 0;
              background-color: var(--global_clr_darkgray);
              color: white;
            }

            td {
              border: 1px solid var(--global_clr_black);
              vertical-align: middle;
              padding: 10px 5px;
            }
          }
        }
      }
    }

    .customer-form-attention {
      width: 80%;
      margin-top: 15px;

      @media screen and (max-width: 768px) {
        /* 768px以下に適用されるCSS（スマホ用） */
        width: 100%;

        div {
          width: 100%;
        }
      }

      /* ボタン */
      .button {
        margin-bottom: 15px;

        a {
          border-radius: 4em;
          background-color: gray;
          color: #fff !important;
          padding: 5px 15px;
          cursor: pointer;

          &:after {
            content: '';
          }
        }
      }
    }

  }

  fieldset.validation {
    &>legend {
      display: contents;
    }
  }

  /* キャプション調整 */
  .cmnNoticeMemoText {
    margin: 0 0 10px;
  }

  /* 氏名入力項目 */
  .validation.personal {
    .customer-form-input {
      .validation-error-message {
        text-indent: 1.25em;
      }

      .sub_exists {
        margin: 5px 3px 8px 40px !important;
      }
    }
  }

  /* 郵便番号項目 */
  #zip-description+.customer-form-input {
    .validation-error-message {
      letter-spacing: -1px;
      margin: 5px 3px 8px 40px !important;
    }
  }

  /* 二つ並びのボタン */
  .button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 60%;
    margin: 30px auto;

    @media screen and (max-width: 768px) {
      /* 768px以下に適用されるCSS（スマホ用） */
      display: block;
      height: 150px;
      width: 100%;
      margin: unset;
      margin-bottom: 10px;
    }

    div.button {
      width: calc(100% / 3 - 30px);
      margin-bottom: 30px;

      @media screen and (max-width: 768px) {
        /* 768px以下に適用されるCSS（スマホ用） */
        margin: 0 auto 10px auto;
        width: 200px;
      }

      text-align: center;

      a {
        width: 100%;
        display: inline-block;
        font-size: var(--global_font_size_large1);
      }

      &.next {
        a {
          border-radius: 4em;
          background-color: var(--global_clr_red);
          color: #fff !important;
          padding: 5px 15px;
          cursor: pointer;

          &::after {
            content: "" !important;
          }
        }
      }

      &.back {
        a {
          border-radius: 4em;
          background-color: var(--global_clr_darkgray);
          color: #fff !important;
          padding: 5px 15px;
          cursor: pointer;

          &::before {
            content: "";
          }

          &::after {
            content: "";
          }
        }
      }
    }
  }

  /*20260810
  .efo-input-area {
    label.label-radio {
      display: inline-block;
    }
  }
  */

  .customer-form-confirm {
    font-size: var(--global_font_size_large3);
    font-weight: bold;
    /* margin-right: 10px; */

    @media screen and (max-width: 768px) {
      margin: 0 auto 0 0px;
    }
  }

  label .customer-form-confirm {
    font-size: unset;
    /* font-weight: bold; */
    margin-right: 10px;
  }

  &.customer-form-done {
    /* margin-top: 50px; */

    section {
      margin: 0 auto;
      width: 50%;
      max-width: 700px;
      min-width: 300px;

      h1 {
        width: 270px;
        margin: 10px auto 0 auto;
        font-weight: bold;
        font-size: var(--global_font_size_large9);
        text-align: left;
        width: 100%;
        margin-bottom: 20px;

        border-bottom: 1px solid var(--global_clr_black);

        @media screen and (max-width: 768px) {
          margin-top: 20px;
        }
      }

      .name {
        margin-bottom: 10px;

        span {
          font-weight: bold;
          font-size: var(--global_font_size_large5);
        }
      }

      .anpass {
        .number {
          margin: 7px 0;
          font-weight: bold;
          font-size: var(--global_font_size_large5);
          color: var(--global_clr_red);
        }
      }
    }

    div.button-group {
      margin: 30px auto !important;
    }

    div.button {
      min-width: 140px;
    }
  }
}

/*----------------------------------------------------------
  会員情報登録受付
----------------------------------------------------------*/
.MK4CFR03001_01 {
  @media (max-width: 768px) {
    .customer-form-notice-area {
      margin: 30px 0 0;
    }
  }
}

/*----------------------------------------------------------
  会員登録
----------------------------------------------------------*/
.MK4CFR03004_01 {
  .coler-midnightblue {
    color: midnightblue;
  }
}

/*----------------------------------------------------------
  ログイン
----------------------------------------------------------*/
.MK4CFRME110_00 {

  h1 {
    position: relative;
    border-bottom: 1px solid var(--global_clr_gray);
    font-size: var(--global_font_size_large5);
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 4px 20px 5px;

    @media (max-width: 768px) {
      width: inherit;
      margin: inherit;
    }

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 6px;
      left: 8px;
      height: 21px;
      border-right: 4px solid var(--global_clr_bluegray);
    }
  }

  .customer-form-error {
    margin: 30px auto !important;
  }

  .login-area {
    display: grid;
    grid: "login-member login-first"
      / 50% 50%;
    padding: 15px 20px;;

    @media screen and (max-width: 768px) {
      grid: "login-member"
        "login-first";
      margin: 10px 0;
      padding: inherit;
    }

    .login-member {
      grid-area: login-member;

      background-color: var(--global_clr_brightgray);
      border-radius: 8px;
      margin-right: 10px;

      @media screen and (max-width: 768px) {
        margin-right: unset;
        margin-bottom: 10px;
      }

      .login-body {
        >p {
          line-height: 1.5;
          margin: 0 0 15px;
        }

        .efo-area {
          margin: 0 0 15px !important;
          max-width: inherit !important;

          .customer-form-subcolumn {
            width: 110px;
            display: inline-block;
            margin: 3px 3px 3px 3px !important;
          }

          label {
            display: inherit;
            font-weight: bold;
            margin: 10px 2px 8px 2px;

            input#efo_view_password {
              left: 0px;
              top: -1px;
            }
          }

          input[type="text"],
          input[type="email"],
          input[type="password"],
          input[type="url"] {
            width: calc(100% - 165px) !important;

            @media screen and (max-width: 768px) {
              width: calc(100% - 40px) !important;
            }
          }

          .display_password_ {
            margin: 0;
            padding-top: 5px;
            padding-left: 120px;

            @media (max-width: 768px) {
              padding-left: 0;
            }
          }

          .customer-form-input {
            .validation-error-message {
              margin-left: 125px;

              @media (max-width: 768px) {
                margin-left: inherit;
              }
            }
          }
        }

        .login-forget {
          text-align: center;
          margin: 5px auto 25px;
          font-weight: bold;

          a:after {
            content: "";
          }
        }

        .renewal {
          border-radius: 4px;
          background-color: white;
          padding: 30px;

          .description {
            .red {
              color: var(--global_clr_darkred);
              font-size: var(--global_font_size_large2);
              font-weight: bold;
            }
          }
        }
      }
    }

    .login-first {
      grid-area: login-first;

      background-color: var(--global_clr_brightgray);
      border-radius: 8px;
      margin-left: 10px;

      @media screen and (max-width: 768px) {
        margin-top: 40px;
        margin-left: unset;
      }
    }

    .login-title {
      color: white;
      font-weight: normal;
      background: unset;
      background-color: var(--global_clr_black);
      border-radius: 8px 8px 0 0;
      text-align: center;
      padding: 5px 0;

      @media screen and (max-width: 768px) {
        font-size: var(--global_font_size_default);
      }
    }

    .login-body {
      padding: 10px 20px;;

      >p {
        line-height: 1.5;
        margin: 0 0 20px;
      }

      @media screen and (max-width: 768px) {
        padding: 7px;
      }

      .login-button {
        text-align: center;
        margin: 30px auto 0 auto;

        button {
          border-radius: 4em !important;
          background: var(--global_clr_red) !important;
          color: #fff !important;
          padding: 10px 50px !important;
          width: 320px !important;
          text-align: center !important;
          text-shadow: unset !important;
          border: unset !important;

          @media screen and (max-width: 840px) {
            /* width: 250px !important; */
            width: 70% !important;
            min-width: 250px;
          }
        }
      }

      .login-announcement {
        display: grid;
        grid:
          "login-announcement-description login-announcement-description"
          "login-announcement-description-memo login-announcement-description-memo"
          "login-announcement-sub-description login-announcement-img"
          / 50% 50%;

        br {
          display: none;
        }

        @media screen and (max-width: 768px) {
          grid:
            "login-announcement-description login-announcement-img"
            "login-announcement-description-memo login-announcement-description-memo"
            "login-announcement-sub-description login-announcement-sub-description"

            / 65% auto;
          br {
            display: unset;
          }
        }

        background-color: white;
        border-radius: 8px;
        padding: 20px;

        @media (max-width: 768px) {
          padding: 10px;
        }

        .login-announcement-description {
          grid-area: login-announcement-description;
          /* margin-bottom: 20px; */
          font-weight: bold;
          font-size: medium;
          line-height: 2em;

          span.emphasis-one {
            color: white;
            background-color: var(--global_clr_red);
            border-radius: 4px;
            margin: 0 5px 0 0;
            padding: 3px 5px;
          }

          span.emphasis-two {
            color: var(--global_clr_red);
          }

          span.emphasis-three {
            color: var(--global_clr_red);
            font-size: 25px;
          }
        }
        .login-announcement-description-memo {
          grid-area: login-announcement-description-memo;

          span.emphasis-normal {
            font-size: var(--global_font_size_normal);
          }

          .view_block {
            display: block;
            margin-bottom: 20px;
          }
        }

        .login-announcement-sub-description {
          grid-area: login-announcement-sub-description;
          line-height: 1.5em;
        }

        .login-announcement-img {
          grid-area: login-announcement-img;

          img {
            width: 100%;
            /* height: 90px; */

            @media screen and (max-width: 768px) {
              width: 112px;
              height: 90px;
              margin-top: 5px;
            }
          }
        }
      }
    }

    .head_block {
      padding: 10px;
    }
  }

  /*リニューアルアナウンス*/
  .renewal_announce {
    border-radius: 10px;
    background-color: white;
    padding: 0px;
    border: 1px solid var(--global_clr_red);

    .head_block {
      background-color: var(--global_clr_lightblue);
      border-radius: 10px 10px 0 0;
      padding: 5px;

      .cmnNoticeMemoIcon {
        display: block;
        font-size: 1.3rem !important;
        color: var(--global_clr_darkred) !important;
        background-size: 15px !important;
        padding-left: 18px !important;
        background-position: top 0 left 0 !important;
        line-height: 1.6rem;
      }

      .info_head {
        display: block;
        padding: 3px 2px 0 16px;
        font-size: 1.5rem;
        color: var(--global_clr_darkred);
        font-weight: bold;
      }
    }

    .body_block {
      padding: 10px 20px;

      .info_date {
        display: block;
        font-size: 1.3rem;
        font-weight: bold;
      }

      .info_title {
        display: block;
        font-size: 1.6rem;
        color: var(--global_clr_black);
        font-weight: bold;
        margin-bottom: 5px;
      }

      .info_body {
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .cmnAccentMemoText {
        font-weight: bold;
        color: var(--global_clr_red) !important;
        /* font-size: var(--global_font_size_large1); */
      }

      .cmnNoticeMemoText {
        display: block;
        font-size: 1.5rem;
      }
    }

    .foot_block {
      border-radius: 0 0 10px 10px;
      text-align: center;
      padding: 0 10px 10px
    }
  }
}

/*----------------------------------------------------------
  移行用パスワード再設定誘導ダイアログ
----------------------------------------------------------*/
.reset-guidance {
  .cmnBtnSubmit {
    margin-top: 20px !important;
  }
}

/*----------------------------------------------------------
  ログイン認証
----------------------------------------------------------*/
.MK4CFRME120_00 {
  /* max-width: 600px; */
  min-height: 240px;

  section {
    h1 {
      position: relative;
      border-bottom: 1px solid var(--global_clr_gray);
      font-size: var(--global_font_size_large5);
      font-weight: bold;
      letter-spacing: 1.5px;
      margin: 30px 0;
      padding: 4px 20px 5px;

      @media (max-width: 768px) {
        width: inherit;
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 6px;
        left: 8px;
        height: 21px;
        border-right: 4px solid var(--global_clr_bluegray);
      }
    }

    .auth {
      background-color: var(--global_clr_lightgray);
      border-radius: 8px;
      margin: 0 auto;
      max-width: 600px;

      h2 {
        color: white;
        background: unset;
        background-color: var(--global_clr_black);
        border-radius: 8px 8px 0 0;
        text-align: center;
        padding: 5px 0;
      }

      .action {
        padding: 20px;
        text-align: center;

        img {
          margin-top: 30px;
          margin-bottom: 30px;
        }

        #recaptcha-id {
          >div {
            margin: 15px auto;
          }
        }

        .login-button {
          margin-top: 30px;

          button {
            text-shadow: unset !important;
            border: unset !important;
            padding: unset !important;
          }
        }
      }
    }
  }
}

/*----------------------------------------------------------
  本人確認
----------------------------------------------------------*/
.MK4RFROD200_01 {
  .efo-are {
    margin: 35px 0 0 35px;

    @media screen and (max-width: 768px) {
      margin: 0 0 35px 20px;
    }

  }
}

/*----------------------------------------------------------
  欲しいもの・注文履歴
----------------------------------------------------------*/
/* favoriteList・orderHistoryList */
.customer-list {
  width: 1000px;
  margin: 0 auto;

  @media screen and (max-width: 768px) {
    width: 100%;
  }

  /* favoriteList・orderHistoryList */
  .customer-list-title {
    margin-bottom: 15px;

    h1 {
      font-size: var(--global_font_size_large5);
      font-weight: bold;
      margin: 3px 0px;
      padding-bottom: 5px;
      border-bottom: 1px solid black;
    }
  }

  /* favoriteList・orderHistoryList・couponList */
  .customer-list-no-item {
    border: 1px solid var(--global_clr_gray);
    border-radius: 8px;
    color: var(--global_clr_red);
    padding: 30px;
    margin-bottom: 15px;
    margin: 10px 10px 15px 10px;
  }

  /* favoriteList・orderHistoryList */
  .customer-list-sort {
    margin: 0 10px 20px 10px;

    .sort {
      grid-area: sort;
    }
  }

  /* favoriteList・orderHistoryList */
  .customer-list-items {
    background-color: var(--global_clr_lightgray);
    padding: 10px;

    @media (max-width: 768px) {
      margin-bottom: 10px;
    }

    /* orderHistoryList */
    .customer-list-item {
      display: grid;
      grid:
        "customer-item-img customer-item-name customer-item-action"
        "customer-item-img customer-item-price customer-item-action"
        "customer-item-img customer-item-icon customer-item-action"
      ;
      background-color: white;
      border-radius: 5px;
      grid-template-columns: 140px auto 200px;
      margin: inherit;
      padding: 20px 10px 10px;

      @media (max-width: 900px) {
        grid:
          "customer-item-img customer-item-name customer-item-name"
          "customer-item-img customer-item-price customer-item-action"
          "customer-item-img customer-item-icon customer-item-action"
        ;
        grid-template-columns: 140px auto 200px;
      }

      @media (max-width: 500px) {
        grid:
          "customer-item-img customer-item-name"
          "customer-item-img customer-item-price"
          "customer-item-icon customer-item-icon"
          "customer-item-action customer-item-action"
        ;
        grid-template-columns: 140px auto;
        grid-template-rows: 140px auto;
      }

      /* orderHistoryList */
      .customer-item-img {
        grid-area: customer-item-img;
      }

      /* orderHistoryList */
      .customer-item-name {
        grid-area: customer-item-name;
        margin-bottom: 5px;
      }

      /* favoriteList・orderHistoryList */
      .customer-item-action {
        grid-area: customer-item-action;
        background-color: var(--global_clr_lightgray);
        border-radius: 8px;
        padding: 5px;
        height: 113px;

        @media screen and (max-width: 768px) {
          flex-direction: column;
          padding: 0;
          font-size: var(--global_font_size_small3);
          padding: 5px;
          height: unset;
        }

        div {
          /* display: inline-block; */
          border: 1px solid var(--global_clr_darkgray);
          border-radius: 4px;
          margin: 5px;
          padding: 3px 5px;
          background-color: white;

          .cmnBtnCommon {
            width: 100% !important;
            min-width: 195px !important;
            font-size: var(--global_font_size_small2) !important;
          }

          @media screen and (max-width: 768px) {
            width: 160px;
            margin: 2px;
            text-align: center;
            display: inline-block;

            .cmnBtnCommon {
              padding: 10px 5px !important;
            }
          }
        }
      }

      /* orderHistoryList */
      .customer-item-price {
        grid-area: customer-item-price;
        text-align: right;
        margin-bottom: 5px;
        margin-right: 20px;
        font-size: var(--global_font_size_small2);

        @media screen and (max-width: 768px) {
          margin-right: unset;
        }

        div {
          display: inline-block;

          @media screen and (max-width: 768px) {
            display: block;
            margin: 5px auto;
          }

          &.tax-included {
            span {
              color: var(--global_clr_red);
              font-size: var(--global_font_size_large3);
              font-weight: bold;
            }
          }

          &.tax-excluded {
            font-size: small;

            @media screen and (max-width: 768px) {
              text-align: right;
            }
          }
        }
      }

      /* orderHistoryList */
      .customer-item-icon {
        span {
          display: inline-block;
          justify-content: center;
          align-items: center;
          height: 30px;
          font-size: var(--global_font_size_small1);
          font-weight: bold;
          white-space: nowrap;
          padding: 6px 10px;
          border-radius: 8px;
          margin: 0 0 5px 0;
          width: 90px;

          @media screen and (max-width: 768px) {
            margin-left: unset;
          }

          &.passport {
            width: 294px;
            padding: 8px 10px 0 38px;
            font-size: var(--global_font_size_small2);
            background: var(--global_clr_warmbeige) url(../img/icon/ico_passport_bg.svg) no-repeat;

            .emphasis {
              padding: unset;
              color: var(--global_clr_darkred);
            }
          }

          &.coupon {
            width: 283px;
            padding: 8px 10px 0 38px;
            font-size: var(--global_font_size_small2);
            background: white url(../img/icon/ico_coupon_bg.svg) no-repeat;
            outline: 1px solid var(--global_clr_darkred);
            outline-offset: -1px;
          }

          &.bopis {
            width: 283px;
            padding: 8px 10px 0 38px;
            font-size: var(--global_font_size_small2);
            background: white url(../img/icon/ico_shop_bg.svg) no-repeat;
            outline: 1px solid var(--global_clr_darkred);
            outline-offset: -1px;
          }

          &.warmbeige {
            background-color: var(--global_clr_warmbeige);
          }
        }
      }
    }
  }
}

/*----------------------------------------------------------
  モーダルの表示内容を格納しているタグ
----------------------------------------------------------*/
.modal-element {
  display: none;
}

/*----------------------------------------------------------
  モーダル共通設定
----------------------------------------------------------*/
.modal-contents {
  .modal-title {
    width: 100%;
    text-align: center;
    height: 52px;
    background: var(--global_clr_red);
    font-size: var(--global_font_size_large5);

    font-weight: bold;
    color: #ffffff;
    line-height: 55px;
    margin-bottom: 10px;
  }

  /*
  .modal-body {
  }
  */

  .modal-close {
    float: right;
    width: 27px;
    height: 28px;
    display: block;
    background: no-repeat left url(/excludes/KEC/common/img/icon/icn_modalclose.png);
    margin-top: 14px;
    margin-right: 15px;
    cursor: pointer;
  }
}

/*----------------------------------------------------------
  文字の注意モーダル
----------------------------------------------------------*/
.char-attention {

  .jBox-content {
    padding: unset;

    .modal_contents_ {
      margin: 10px;

      .attention_ {
        color: #c90e12;
      }
    }
  }
}

/*----------------------------------------------------------
  会員退会 MK4CFR09001_01 のモーダル
----------------------------------------------------------*/
.MK4CFR09001_01-modal {
  text-align: center;

  .cmnBtnSubmit {
    width: 150px !important;
  }

  .cmnBtnCancel {
    width: 150px !important;
  }
}

/*----------------------------------------------------------
  出張修理Web受付フォーム・お客様情報登録 MK4CFRRR002_01 のモーダル
----------------------------------------------------------*/
.MK4CFRRR002_01 {
  &.customer-popup {
    overflow: hidden;
    margin: 0 auto;

    .customer-popup-body {
      display: flex;
      flex-direction: column;
      padding: 0 20px;

      .customer-popup-body-data {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .customer-popup-body-data-group {
          dt {
            font-weight: normal;
            margin: 0px 0px 5px;
            padding: 0px 0px 2px;
            border-bottom: 1px solid var(--global_clr_black);
          }

          dd {
            font-weight: bold;
            font-size: var(--global_font_size_large3);
          }
        }
      }
    }

    .customer-popup-footer {
      display: flex;
      gap: 20px;
      justify-content: center;
      padding: 20px;
      text-align: center;
    }

    &.active {
      display: block;
    }

    @media screen and (max-width: 768px) {
      .customer-popup-footer {
        flex-direction: column;
        gap: 10px;
        padding: 30px 20px 10px;
      }
    }
  }
}

/*----------------------------------------------------------
  会員エリア全般
----------------------------------------------------------*/
/*TODO：order-detail-modal 要不要判定*/
#fwCms_wrapper,
.order-detail-modal {

  &.layout_011,
  &.layout_021,
  &.layout_031 {

    .frame_MB {

      /* アローナビゲーション */
      .registration-step {
        div.arrow {
          margin-right: 19px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:not(.first)::before {
            @media screen and (max-width: 768px) {
              left: -1px;
              border-left: 16px solid white;
            }
          }

          &:after {
            top: -2px;
            right: -19px;
            border-top: 22px solid transparent;
            border-bottom: 22px solid transparent;
            border-left: 20px solid var(--global_clr_lightgray);

            @media (max-width: 768px) {
              top: -1px;
              border-top: 20px solid transparent;
              border-bottom: 20px solid transparent;
            }
          }

          &.current {
            &:after {
              top: 0px;
              border-top: 20px solid transparent;
              border-bottom: 20px solid transparent;
              border-left: 20px solid var(--global_clr_black);

              @media (max-width: 768px) {
                top: -1px;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
              }
            }
          }
        }
      }

      /* パンくずナビゲーション */
      .breadcrumbList {
        padding: 0 0 10px;

        ul {
          display: flex;
          align-items: end;
          overflow-x: auto;
          flex-wrap: wrap;

          li {
            white-space: nowrap;
            height: 20px;
            margin: 4px 6px 6px 0;

            .homeLink {
              display: block;
              width: 23px;
              height: 23px;
              margin-top: -4px;
              background: url(../img/icon/bc_home.png) no-repeat;
            }
          }
        }
      }

      .customer-form-title,
      .customer-form-message,
      .customer-form-message-title,
      .customer-list-title {
        border: inherit;
        width: inherit;
        max-width: inherit;
        padding: inherit;

        @media (max-width: 768px) {
          width: 100%;
        }

        /* 見出し共通化 */
        h1,
        h2 {
          position: relative;
          border-bottom: 1px solid var(--global_clr_gray);
          font-size: var(--global_font_size_large5);
          font-weight: bold;
          letter-spacing: 1px;
          margin: 10px 0 20px;
          padding: 4px 20px 5px;

          &::before {
            content: '';
            display: block;
            position: absolute;
            top: 6px;
            left: 8px;
            height: 19px;
            border-right: 4px solid var(--global_clr_bluegray);
          }

          @media (max-width: 768px) {
            width: 100%;
            letter-spacing: 1px;
            margin: 0 0 20px;
          }
        }

        h1::before {
          height: 21px;
        }

        p {
          line-height: 1.5;
          padding: 20px;

          @media (max-width: 768px) {
            padding: 0 10px 10px;
          }

          span {
            display: inline-block;
            text-indent: -1em;
            padding-left: 1em;
          }
        }

      }

      /* 会員エリア時のレビュー一覧CPNT微調整 */
      .MK4PFRPM000_06 {
        max-width: 1260px;
        padding: initial;

        /* 見出し共通化 */
        h1,
        h2 {
          position: relative;
          border-bottom: 1px solid var(--global_clr_gray);
          font-size: var(--global_font_size_large5);
          font-weight: bold;
          letter-spacing: 1px;
          margin: 10px 0 20px;
          padding: 4px 20px 5px;

          &::before {
            content: '';
            display: block;
            position: absolute;
            top: 6px;
            left: 8px;
            height: 19px;
            border-right: 4px solid var(--global_clr_bluegray);
          }

          @media (max-width: 768px) {
            width: 100%;
            letter-spacing: 1px;
            margin: 0 0 20px;
          }
        }

        h1::before {
          height: 21px;
        }
      }

      .customer-form-error,
      .customer-list-no-item,
      .customer-delivery-none {
        border-radius: inherit;
        line-height: 1.5;
        width: calc(100% - 40px);
        margin: 0 auto 40px;
        padding: 10px 20px;

        span {
          display: inline-block;
        }

        @media (max-width: 768px) {
          width: inherit;
          padding: 5px 10px;
        }
      }

      .customer-list-no-item,
      .customer-delivery-none {
        border: 1px solid var(--global_clr_darkred);
        color: var(--global_clr_darkred);
        margin: 40px auto;
        padding: 15px 25px;
      }

      .customer-form-error {

        &.error_cnt_0,
        &.error_cnt_ {
          display: none;
        }

        background: var(--global_clr_lightyellow);
        border: 1px solid var(--global_clr_red);
        color: var(--global_clr_red);
        font-weight: bold;

        @media (max-width: 660px) {
          max-width: calc(100% - 20px);
          margin: 0 10px 40px;
          padding: 5px 10px 5px 10px;
        }
      }

      .efo-column-name {
        font-size: var(--global_font_size_large2);
      }

      .customer-form-column {
        border-bottom: 1px solid var(--global_clr_gray);
        margin: 0 0 10px;

        span:first-child {
          letter-spacing: 1px;
          margin-right: 10px;
          padding: 6px 10px;
        }
      }

      .efo-area {
        max-width: calc(100% - 40px);
        margin: 0 20px 35px 35px;
        padding: 0;

        @media (max-width: 768px) {
          max-width: inherit;
          margin: 0 10px 35px 5px;
          padding: 0;
        }

        &.field-birth .efo-input-area {
          width: 100%;

          @media (max-width: 840px) {
            width: 380px;
          }

          @media (max-width: 380px) {
            width: 100%;
          }
        }

        .efo-input-area {
          margin-left: 10px;

          &.noMarginLeft {
            margin-left: 0;
            padding-left: 0;
          }

          @media (max-width: 768px) {
            margin-left: 10px;
          }

          #kanjiCompanyName,
          #furiganaCompanyName,
          #model-number,
          #manufacturer-other {
            max-width: 310px;

            @media (max-width: 1010px) {
              width: calc(95% - 3.5rem);
            }

            @media (max-width: 890px) {
              width: calc(95% - 6rem);
            }

            @media (max-width: 820px) {
              width: calc(95% - 2.4rem);
              max-width: 400px;
            }
          }

          #kanjiLastName,
          #kanjiFirstName {
            max-width: 310px;

            @media (max-width: 1010px) {
              width: calc(95% - 5.3rem);
            }

            @media (max-width: 890px) {
              width: calc(95% - 6rem);
            }

            @media (max-width: 820px) {
              width: calc(95% - 2.2rem - 7px - 34px);
              max-width: 400px;
            }
          }

          #furiganaLastName,
          #furiganaFirstName {
            max-width: 310px;

            @media (max-width: 1010px) {
              width: calc(95% - 5.3rem);
            }

            @media (max-width: 890px) {
              width: calc(95% - 6rem);
            }

            @media (max-width: 820px) {
              width: calc(95% - 2.2rem - 7px - 34px);
              max-width: 400px;
            }
          }

          #efo-address2,
          #efo-address3,
          #P_DES_ADDRESS2,
          #P_DES_ADDRESS3 {
            width: 75%;

            @media (max-width: 768px) {
              width: calc(95% - 30px);
            }
          }

          #email,
          #email-comfirm,
          #email-cancel,
          #new-email,
          #new-email-comfirm,
          #password,
          #password-confirm,
          #password-reinput {
            width: 80%;

            @media (max-width: 768px) {
              width: 88%;
            }
          }

          #zip_input {
            width: 120px;
          }
        }
      }

      .cmnScreenBottomButtonsWrap {
        /* height: 120px;*/
      }

      .customer-form-input {
        .validation-error-message {

          @media (max-width: 768px) {
            margin-left: inherit;
          }
        }

        .describe,
        label {
          /* color: var(--global_clr_darkgray); */
          margin: 5px 3px 8px 5px;
        }

        .sub_exists {
          margin: 5px 3px 8px 5px;
        }
      }

      .addressSupportAttention {
        margin: 20px;

        @media (max-width: 768px) {
          width: 90%;
        }
      }

      .notSupportedNote {
        display: inline-block;
        text-indent: -1.3em;
        padding-left: 1.3em;
      }

      .customer-form-attention {
        div {
          font-size: var(--cmn_icon_font_size_S);
          line-height: 1.5;
          margin: 20px 30px 10px;

          @media (max-width: 768px) {
            margin: 20px 0 10px;
          }
        }
      }

      .customer-form-notice-area {
        background-color: var(--global_clr_brightgray);
        border: 1px solid var(--global_clr_gray);
        border-radius: inherit;
        font-size: var(--global_font_size_small1);
        letter-spacing: -0.2px;
        line-height: 1.5;
        margin: 6px 0;

        @media (max-width: 768px) {
          width: 100%;
        }

        .customer-form-notice-title {
          font-weight: bold;
        }

        .niticeAreaNote {
          font-size: var(--global_font_size_small2);
          display: inline-block;
          text-indent: -1em;
          padding-left: 1em;
          margin: 5px 0 0 5px;
        }

        .customer-form-notice-red {
          display: inline-block;
          margin: 10px 0 0;
        }

        a {
          position: relative;

          &::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 3px solid var(--global_clr_blue);
            border-bottom: 3px solid var(--global_clr_blue);
            bottom: -4.5px;
            /* right: 0; */
            transform: translate(0, -75%) rotate(-45deg);
            margin: 0 0 0 5px;
          }

          &.no-after-icon {
            &::after {
              border: inherit;
            }
          }
        }
      }

      /* マイページ */
      .MK4CFR01001_01 {
        line-height: 1.5;
        column-gap: 40px;
        row-gap: 40px;
        margin: 40px 0 0;
        display: grid;
        grid: "grid-my-page grid-coupon grid-closest-store"
          "grid-order-info grid-customer-info grid-favorite-list"
          " grid-passport grid-withdrawal grid-favorite-list"

          / 32% 32% 30%;
        @media screen and (max-width: 1100px) {
          grid: "grid-my-page grid-closest-store"
            "grid-coupon grid-order-info"
            "grid-customer-info grid-passport"
            "grid-customer-info grid-withdrawal"
            "grid-favorite-list grid-favorite-list"
            / 48% 48%;
        }

        @media screen and (max-width: 768px) {
          margin: 20px 0 0;
          grid: "grid-my-page"
            "grid-closest-store"
            "grid-coupon"
            "grid-order-info"
            "grid-customer-info"
            "grid-passport"
            "grid-withdrawal"
            "grid-favorite-list";

          &>section {
            margin: unset;
          }
        }


        &>section {
          /*box-shadow: 0 0 3px 0 #8592B8;  0 1px 5px 0 #8592B8; */
          border-radius: 0 0 10px 10px;
          color: var(--global_clr_black);

          h1,
          h2 {
            position: relative;
            /*        background: var(--global_clr_brightgray);*/
            border-bottom: 1px solid var(--global_clr_gray);
            font-size: var(--global_font_size_large5);
            font-weight: bold;
            letter-spacing: 0.8px;
            padding: 2px 20px 3px;

            &::before {
              content: '';
              display: block;
              position: absolute;
              top: 8px;
              left: 8px;
              height: 19px;
              border-right: 4px solid var(--global_clr_bluegray);
            }
          }

          ul {
            padding: 20px 15px 0;

            li {
              padding: 0 0 10px;

              &:last-child {
                margin: inherit;
                border-bottom: inherit;
              }

              .myInfoNumArea {
                font-size: var(--global_font_size_small1);
              }

              .description {
                margin: 0 0 15px;

                dt.passportTitle,
                dd.passport {
                  display: inline-block;
                }

                .passport {
                  font-size: var(--global_font_size_large1);
                  font-weight: bold;
                  color: var(--global_clr_red);
                }
              }

              .registration {

                .registrationTitle,
                .registrationDate {
                  display: inline-block;
                }
              }

              small {
                display: inline-block;
                line-height: 1.5;
              }
            }
          }

          .button {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;

            a {
              border: 1px solid var(--global_clr_black);
              border-radius: 16px;
              color: var(--global_clr_black) !important;
              padding: 10px 30px;
              font-weight: bold;
              width: 270px;
              display: inline-block;
              font-weight: bold;
            }
          }

          .pageLinkTxt {
            position: relative;
            text-align: right;
            font-weight: bold;
            letter-spacing: 1px;
            padding: 10px 10px 0;

            &::after {
              content: "";
              position: absolute;
              width: 9px;
              height: 9px;
              border-right: 2px solid var(--global_clr_blue);
              border-bottom: 2px solid var(--global_clr_blue);
              bottom: 1px;
              right: 0;
              transform: translate(0, -75%) rotate(-45deg);
            }
          }

          .myPageLink {
            position: relative;
            font-size: var(--global_font_size_large2);
            font-weight: bold;
            margin: 0 0 10px;

            a::after {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
              border-right: 3px solid var(--global_clr_blue);
              border-bottom: 3px solid var(--global_clr_blue);
              bottom: 0;
              transform: translate(0, -75%) rotate(-45deg);
              margin: 0 0 0 5px;
            }
          }

          &.grid-my-page {
            grid-area: grid-my-page;
            margin-bottom: 10px;

            .grid-area {
              display: grid;
              grid: "top-left"
                "bottom-right";

              .top-left {
                grid-area: top-left;
                margin: 0 0 20px;

                .name {
                  display: inline-block;
                  font-weight: bold;
                  font-size: var(--global_font_size_large5);
                  margin: 0 0 6px;
                }

                .honorificCharacter {
                  margin: 0 0 0 10px;
                }
              }

              .bottom-left {
                grid-area: bottom-left;
              }

              .top-right {
                grid-area: top-right;
              }

              .bottom-right {
                grid-area: bottom-right;

                .loginDateTitle {
                  display: block;
                  font-weight: bold;
                }
              }
            }
          }

          &.grid-coupon {
            grid-area: grid-coupon;

            h2 {
              span {
                font-size: var(--global_font_size_small2);
              }
            }

            .no-coupon {
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100px;
              color: var(--global_clr_brown);
              font-weight: bold;
              letter-spacing: 1px;
            }


            img {
              @media screen and (max-width: 1100px) {
                width: 80%;
              }

              @media screen and (max-width: 768px) {
                width: unset;
              }
            }
          }

          &.grid-order-info {
            grid-area: grid-order-info;

            section {
              margin: 10px 0;
            }
          }

          &.grid-customer-info {
            grid-area: grid-customer-info;

            .notice {
              color: var(--global_clr_red);
              margin-top: 10px;
              text-indent: -1em;
              padding-left: 1em;
              font-size: var(--cmn_icon_font_size_S);
            }
          }

          &.grid-passport {
            grid-area: grid-passport;

            h2 {
              &::before {
                border-right: 5px solid var(--global_clr_bluegray);
              }
            }

            .registrationTitle {
              font-weight: bold;
            }

            .registrationTitle,
            .registrationDate {
              font-size: var(--global_font_size_small1);
            }
          }

          &.grid-withdrawal {
            grid-area: grid-withdrawal;

            h2 {
              &::before {
                border-right: 5px solid var(--global_clr_bluegray);
              }
            }

            .notice {
              display: block;
              color: var(--global_clr_red);
              margin: 20px 0 0;
              width: 100%;
            }

            small {
              font-size: var(--cmn_icon_font_size_S);
            }
          }

          &.grid-favorite-list {
            grid-area: grid-favorite-list;
            box-shadow: inherit;

            h2 {
              background-color: var(--global_clr_darkgray);
              color: var(--global_clr_white);
              font-size: var(--global_font_size_large1);
              padding: 2px 0 0 10px;

              &::before {
                border-right: inherit;
              }
            }

            ul {
              border-left: 2px solid var(--global_clr_lightgray);
              border-bottom: 2px solid var(--global_clr_lightgray);
              border-right: 2px solid var(--global_clr_lightgray);
              padding: 10px 5px;

              li {
                /*width: 100%;*/
                border: unset;

                .itemBlock {
                  box-shadow: inherit;
                  display: flex;
                  border-bottom: 1px solid var(--global_clr_lightgray);
                  border-radius: inherit;
                  width: 100%;
                  margin: 0 0 10px;

                  &:last-child {
                    border-bottom: unset;
                  }

                  .itemBlockHeader {
                    width: 80%;
                    margin: 0 20px 0 0;

                    @media (max-width: 1100px) {
                      width: 25%;
                    }

                    @media (max-width: 768px) {
                      width: 40%;
                    }

                    @media (max-width: 600px) {
                      width: 80%;
                    }

                    .itemBlockImg {

                      img {
                        width: 100px;
                        height: 100px;
                        min-width: 100px;
                        min-height: 100px;
                        aspect-ratio: 1/1;

                        @media (max-width: 768px) {
                          width: 120px;
                          height: 120px;
                          min-width: 120px;
                          min-height: 120px;
                        }
                      }
                    }
                  }

                  .itemBlockBody {
                    width: 150%;
                    font-size: var(--global_font_size_small2);
                    line-height: 1.4;

                    .itemNameInfo,
                    .itemModelNum {
                      min-height: inherit;
                    }

                    .no-item-description {
                      color: var(--global_clr_brown);
                      font-weight: bold;
                    }

                    ul {
                      border: inherit;
                      padding: 5px;

                      li {
                        border: inherit;
                        margin: inherit;
                      }
                    }
                  }
                }
              }
            }

            .link {
              width: 100%;
              text-align: right;
            }
          }
        }

        .grid-closest-store {
          grid-area: grid-closest-store;

          @media (max-width: 768px) {
            padding: 0 10px;
          }

          ul {

            background: var(--global_clr_sandbeige);
            border-radius: 10px;
            border: 2px solid var(--global_clr_sandbeige);
            font-size: var(--cmn_icon_font_size_M);
            padding: 15px 15px 25px;

            .cmnBtnCheckStore {
              background-position: 14px 10px;
              text-shadow: inherit;
              margin: 5% auto 0;

              @media screen and (max-width: 768px) {
                margin: 15px auto 0;
              }
            }
          }

          .button {
            a {
              background-color: var(--global_clr_darkred);
              color: white !important;
              border: unset;
            }
          }
        }
      }

      /* 欲しいものリスト */
      .MK4CFRBM010_01 {
        &.customer-list {
          width: inherit;
          max-width: 1260px;

          .customer-list-sort {
            margin: 0 0 20px;
            padding: 0 20px;

            .sort {
              text-align: right;

              select {
                width: inherit !important;
                text-align: left;
              }
            }
          }

          .customer-list-items {
            background: inherit;
            padding: 0 20px;

            @media (max-width: 768px) {
              padding: 0 5px;
            }

            .itemBlock {
              display: grid;

              grid: "header body footer"
                "memo memo memo"
                / 230px auto 200px;
              padding: 10px 15px 0 0;

              @media (max-width: 850px) {
                grid: "header body"
                  "footer footer"
                  "memo memo"
                  / 230px auto !important;
                gap: 10px;
                margin: 0 0 30px;
              }

              @media (max-width: 680px) {
                grid: "header body"
                  "footer footer"
                  "memo memo"
                  / 135px auto !important;
                gap: 10px;
                margin: 0 0 20px;

                .itemNameInfo {
                  min-height: inherit;
                }
              }

              @media (max-width: 500px) {
                grid: "header"
                  "body"
                  "footer"
                  "memo"
              }

              .itemBlockHeader {
                grid-area: header;
                max-width: 230px;
                width: 100%;
                display: grid;
                grid: 0 auto / auto 0;
                padding-left: 5px;

                .itemBlockImg {
                  max-height: 180px;
                  margin-bottom: 60px;

                  @media (max-width: 850px) {
                    width: 180px;
                    height: 180px;
                  }

                  @media (max-width: 680px) {
                    width: 120px;
                    height: 120px;
                  }

                  img {

                    @media (max-width: 850px) {
                      width: 180px !important;
                      height: 180px !important;
                    }

                    @media (max-width: 680px) {
                      width: 120px !important;
                      height: 120px !important;
                    }
                  }
                }
              }

              .itemBlockBody {
                grid-area: body;
                overflow-wrap: break-word;

                @media (max-width: 768px) {
                  .itemIcoInfo {
                    .icoType_Passport {
                      margin-bottom: 4px;
                      justify-content: end;
                    }
                  }
                }

                @media (max-width: 500px) {
                  padding: 0 0 0 5px;
                }

                .icoType_Status {
                  justify-content: end;

                  @media (max-width: 500px) {
                    min-width: 200px;
                  }
                }

                .itemBlockName {
                  display: inline-block;
                }

                .no-item-delete {
                  font-size: var(--global_font_size_small2);
                  max-width: 200px;
                  margin: 15px 0 15px 0;

                  @media (max-width: 500px) {
                    left: -1em;
                  }
                }
              }

              .itemBlockFooter {
                grid-area: footer;

                @media (max-width: 850px) {
                  position: relative;
                  height: 0;
                  align-content: baseline;
                  margin-top: 10px;
                }

                @media (max-width: 680px) {
                  position: relative;
                }

                .customer-item-action {
                  display: block;

                  @media (max-width: 850px) {
                    display: flex;
                    column-gap: 30px;
                    margin-bottom: 10px;
                    margin-left: 15px;
                  }

                  @media (max-width: 680px) {
                    flex-wrap: wrap;
                  }

                  @media (max-width: 500px) {
                    flex-flow: unset;
                    flex-wrap: wrap;
                    column-gap: 0;
                    justify-content: space-between;
                  }

                  .review,
                  .contact-us {
                    margin-left: 15px;
                    margin-bottom: 15px;

                    @media (max-width: 850px) {
                      margin: 0;
                    }

                    @media (max-width: 500px) {
                      margin: 0;
                    }

                    a {
                      font-size: var(--global_font_size_normal);
                    }
                  }

                  button {
                    font-size: var(--global_font_size_small2);
                    max-width: 200px;
                    margin: 0 0 15px 0;

                    @media (max-width: 768px) {
                      /* max-width: inherit; */
                      margin: 0 0 15px;
                      height: 2.5em;
                    }
                  }
                }
              }

              .itemBlockMemoArea {
                grid-area: memo;

                padding: 0 10px 20px;

                @media (max-width: 850px) {
                  display: none;
                  margin-top: 32px;
                  padding-right: 0;
                  padding-left: 0;
                  margin-top: 0;
                }

                @media (max-width: 850px) {
                  margin: 0 5px 0 15px
                }

                dl {
                  display: grid;
                  grid: "grid-memo-title grid-memo-body grid-memo-button"
                    "grid-date-title grid-date-body grid-memo-button"
                    / 110px auto 140px;
                  gap: 15px;

                  @media (max-width: 850px) {
                    grid: "grid-memo-title grid-memo-title"
                      "grid-memo-body grid-memo-body"
                      "grid-memo-button grid-memo-button"
                      "grid-date-title grid-date-body"
                      / 110px auto;
                    gap: 2px;
                    margin-bottom: 0;
                  }

                  @media (max-width: 500px) {
                    grid: "grid-memo-title grid-memo-title"
                      "grid-memo-body grid-memo-body"
                      "grid-memo-button grid-memo-button"
                      "grid-date-title grid-date-body"
                      / 95px auto;
                    gap: 2px;
                  }

                  .grid-memo-title {
                    grid-area: grid-memo-title;
                    text-align: right;

                    @media (max-width: 850px) {
                      text-align: left;
                      align-content: end;
                    }
                  }

                  .grid-memo-body {
                    grid-area: grid-memo-body;

                    textarea {
                      max-width: calc(100% - 46px);
                      height: 8rem;
                    }

                    @media (max-width: 850px) {
                      text-align: left;
                      width: calc(100vw - 60px - 85px);
                      margin-bottom: 5px;

                      textarea {
                        width: 100%;
                        /* max-width: calc(100% - 36px); */
                        max-width: 100%;
                      }
                    }

                    @media (max-width: 760px) {
                      width: calc(100vw - 60px - 15px);
                    }

                    @media (max-width: 680px) {
                      width: calc(100vw - 65px);
                    }
                  }

                  .grid-memo-button {
                    grid-area: grid-memo-button;
                    margin-bottom: 10px;

                    button {
                      width: 140px;
                      font-size: var(--global_font_size_small2);

                      @media (max-width: 850px) {
                        height: 25px;
                        margin-right: 0;
                      }
                    }
                  }

                  .grid-date-title {
                    grid-area: grid-date-title;
                    text-align: right;
                    font-size: var(--global_font_size_small2);

                    @media (max-width: 850px) {
                      text-align: left;
                    }
                  }

                  .grid-date-body {
                    grid-area: grid-date-body;
                    font-size: var(--global_font_size_small2);

                    @media (max-width: 850px) {
                      text-align: left;
                    }
                  }
                }

                .itemBreadcrumbs {
                  margin: 0 0 0 15px;

                  @media (max-width: 850px) {
                    margin: 5px 0 0 0;
                  }

                  @media (max-width: 680px) {
                    width: calc(100vw - 70px);
                    margin: 10px 0 0 0;
                  }

                  @media (max-width: 500px) {
                    width: unset;
                    position: unset;
                    right: unset;
                    margin: 10px 0 0 0;
                  }

                  .itemBreadcrumbList {
                    display: flex;
                    align-items: end;
                    font-size: var(--cmn_icon_font_size_M);
                    white-space: nowrap;
                    overflow-x: auto;
                    margin: 0;
                    padding: 0 0 4px;

                    &::-webkit-scrollbar {
                      /*                  width: 6px;*/
                      height: 3px;
                    }

                    &::-webkit-scrollbar-thumb {
                      background: #00608d;
                      width: 10px;
                      border-radius: 3px;
                    }

                    &::-webkit-scrollbar-track {
                      background: var(--global_clr_iceblue);
                      border-radius: 3px;
                    }

                    li {
                      display: table;
                      position: relative;
                      margin: 0 5px 0 0;

                      a {
                        padding: 0 10px;

                        &::after {
                          content: "";
                          position: absolute;
                          width: 9px;
                          height: 9px;
                          border-right: 2px solid var(--global_clr_blue);
                          border-bottom: 2px solid var(--global_clr_blue);
                          bottom: -2px;
                          right: 0;
                          transform: translate(0, -75%) rotate(-45deg);
                        }

                        &.homeLink {
                          display: block;
                          width: 32px;
                          height: 26px;
                          margin-top: 0px;
                          background: url(../img/icon/bc_home.png) no-repeat;
                          background-size: 22px;
                          background-position: 0px 4px;
                          text-indent: -9999px;
                        }
                      }
                    }
                  }
                }
              }

              .no-item-description {
                color: var(--global_clr_brown);
                font-size: var(--global_font_size_small1);
                line-height: 1.5;
                text-indent: -1em;
                padding-left: 1em;
              }
            }
          }
        }

        .switch_outer {
          margin-left: 0;
          position: relative;
          transition: background-color .2s ease-in-out;
          display: none;

          @media (max-width: 850px) {
            display: flex;
            flex-direction: row;
            align-items: center;
            top: -20px;
            left: 15px;
          }

          @media (max-width: 680px) {
            top: -20px;
            left: 10px;
          }

          .cmnBtnCircleToggle.neoActToggle {
            @media (max-width: 850px) {
              display: inline-block;
              width: 26px;
              height: 26px;
              border-radius: 13px;
              top: -10px;
              left: 5px;
            }

            @media (max-width: 680px) {
              top: 0;
            }
          }

          .neoActToggleLabel {
            display: inline-block;
            color: var(--global_clr_linkblue);
            padding-left: 2px;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .delete-in-toggle {
          position: absolute;
          font-size: var(--global_font_size_small2);
          width: 145px;
          height: 36px;
          top: -45px;
          left: 70px;

          @media (max-width: 850px) {
            width: 145px;
            height: auto;
            top: -70px;
            left: 15px;
            border-radius: 16px;
          }

          @media (max-width: 680px) {
            width: 120px;
            height: auto;
            top: -70px;
            left: 5px;
          }

          @media (max-width: 500px) {
            top: -70px;
          }
        }
      }

      /* 注文履歴一覧 */
      .MK4HFR01001_01 {
        &.customer-list {
          margin: 0 auto;
          /* パディング分小さく */
          width: 1260px;

          @media (max-width: 1290px) {
            width: 100%;
          }
        }

        .customer-form {
          white-space: nowrap;
        }

        .customer-list-title {
          span {
            display: block;
            margin: 15px;
          }
        }

        .status {
          @media (max-width: 768px) {
            margin-bottom: 25px;
          }
        }

        .customer-list-sort {
          display: flex;
          justify-content: space-between;
          margin: 0 auto 15px;
          padding: 0 20px;

          &.no-count {
            justify-content: end;
          }

          @media (max-width: 768px) {
            padding: 0 10px;
          }

          .count {
            display: flex;
            align-items: center;

            @media (max-width: 550px) {
              display: grid;
            }
          }

          .sort {
            display: flex;
            align-items: center;
            white-space: nowrap;

            #sortLabel {
              padding-right: 2px;
              margin-right: 2px;

              @media (max-width: 550px) {
                width: 100px;
                white-space: normal;
              }

              br {
                display: none;

                @media (max-width: 550px) {
                  display: block;
                }
              }
            }

            select {
              max-width: initial;
              width: 180px;

              @media (max-width: 550px) {
                width: 130px;
              }
            }
          }
        }

        .customer-list-items {
          background: inherit;
          padding: 0 20px;

          @media (max-width: 768px) {
            padding: inherit;
          }

          .purchaseHeader {
            display: flex;
            background: var(--global_clr_brightgray);
            border: 2px solid var(--global_clr_darkgray);
            padding: 12px 20px 0;

            @media (max-width: 500px) {
              display: inherit;
              padding: 12px;
            }

            .purchaseHeaderInfo {
              display: flex;
              flex-wrap: wrap;

              .purchaseHeaderInfoGroup {
                display: flex;
                align-items: center;
                width: 50%;
                padding: 0 0 12px;

                @media (max-width: 1024px) {
                  width: 100%;
                }

                .purchaseLabel {
                  display: inline-block;
                  font-weight: bold;
                  margin: 0 10px 0 0;

                  &::after {
                    content: "：";
                    margin: 0 0 0 10px;
                  }
                }

                &:first-child .purchaseLabel::after {
                  margin: 0 0 0 40px;
                }

                @media (max-width: 1024px) {

                  &:nth-child(2) .purchaseLabel::after,
                  &:nth-child(4) .purchaseLabel::after {
                    margin: 0 0 0 40px;
                  }

                  .purchaseDate {
                    letter-spacing: -0.5px;
                  }
                }

                .purchaseAmountUnit {
                  font-size: 12px;
                  font-size: var(--global_font_size_small3);
                }
              }
            }

            a {
              min-width: 115px;
              text-align: center;
              padding: 6px 0 0;
              cursor: pointer;

              @media (max-width: 500px) {
                br {
                  display: none;
                }
              }
            }
          }

          .customer-list-item {

            .customer-item-img {
              img {
                width: 140px;
                height: 140px;
              }
            }

            .customer-item-name {
              margin: 0 15px 15px;

              @media (max-width: 500px) {
                grid-area: 1 / 2 / 2 / 4;
                margin: 0 0 15px 10px;
              }

              .itemMakerName {
                display: block;
              }
            }

            .itemBlockName {
              line-height: 1.4;

              .itemNameInfo {
                min-height: inherit;
              }

              .itemNameMain {
                font-size: 16px;
              }

              .itemModelNum {
                min-height: inherit;
              }
            }

            .tax-included {
              span {
                color: var(--global_clr_black);
                margin: 0 0 0 10px;
              }
            }

            .customer-item-action {
              background: inherit;
              width: 195px;
              height: inherit;
              text-align: center;
              padding: unset;

              @media (max-width: 500px) {
                display: flex;
                width: inherit;
                justify-content: center;
                grid-area: 2 / 1 / 3 / 4;
                padding-top: 10px;
              }

              div {
                border: inherit;

                @media (max-width: 768px) {
                  width: 210px;
                  margin: 0 auto 10px;
                }

                &.reviewDone {
                  margin-top: 0;
                  padding-top: 0;
                  text-align: left;

                  small {
                    font-size: 1.3rem;
                  }

                  @media (max-width: 500px) {
                    left: -50px;
                    position: relative;

                    small {
                      font-size: 1.3rem;

                      br {
                        display: none;
                      }
                    }
                  }
                }

                button {
                  min-width: 195px;

                  @media (max-width: 500px) {
                    min-width: 160px;
                  }
                }

                .reviewScoreGraph {
                  white-space: nowrap;
                  margin: 15px 0 0 15px;

                  @media (max-width: 500px) {
                    margin-left: 0;
                  }

                  li {
                    /* display: flex; */
                    align-items: center;

                    @media (max-width: 500px) {
                      small {
                        white-space: nowrap;
                      }
                    }
                  }
                }

                &.repurchase button {
                  background: var(--global_clr_red) 11px 7px url(../excludes/KEC/common/img/icon/ico_cart_2_w.svg) no-repeat;
                  background-size: 16%;
                  color: var(--global_clr_white);
                  text-shadow: inherit;
                  padding: 10px 0 10px 25px;

                  &:focus {
                    background: var(--global_clr_orange) 11px 7px url(../excludes/KEC/common/img/icon/ico_cart_2_w.svg) no-repeat !important;
                    background-size: 16% !important;
                  }
                }
              }
            }
          }

          .purchaseFooter {
            display: flex;
            justify-content: center;
            padding: 12px 0 0;
            margin: 0 0 40px;

            @media (max-width: 500px) {
              padding: 4px 10px 12px 10px;
            }

            .purchaseHeaderInfo {
              width: 100%;
              display: flex;
              justify-content: space-evenly;
              column-gap: 20px;
              row-gap: 20px;
              margin: 20px auto;

              @media (max-width: 768px) {
                display: grid;
                gap: 10px;
              }

              li {
                padding: 0 0 12px;
                text-align: center;

                @media (max-width: 768px) {
                  &.ksReciptNon {
                    display: none !important;
                  }
                }

                .purchaseLabel {
                  display: inline-block;
                  font-weight: bold;
                  margin: 0 5px 0 0;

                  &::after {
                    content: "：";
                    margin: 0 0 0 10px;
                  }
                }

                &:nth-child(4) .purchaseLabel::after {
                  margin: 0 0 0 40px;
                }

                .purchaseAmountUnit {
                  font-size: 12px;
                }

                .purchaseStatas {
                  font-size: 14px;
                  font-weight: bold;
                  background: var(--global_clr_white);
                  border: 2px solid var(--global_clr_lightgray);
                  padding: 6px 12px;

                  &.sReady {
                    border: 2px solid var(--global_clr_blue);
                    color: var(--global_clr_blue);
                  }

                  &.sWaiting {
                    border: 2px solid var(--global_clr_orange);
                    color: var(--global_clr_orange);
                  }
                }
              }
            }

            button {
              @media (max-width: 768px) {}
            }
          }
        }
      }

      /* 注文履歴・アイコン */
      .MK4HFR01001_01,
      .MK4HFR01002_01,
      .MK4RFRRD110_01 {

        /* アコーディオン関係 */
        details {
          padding: 10px 0 20px 25px;
          /* 追加アイコンの位置指定のため */
          position: relative;

          @media (max-width: 768px) {
            padding: 10px;
          }

          &[open] summary::before {
            content: url(/excludes/KEC/common/img/icon/ico_circle_large_minus_g.svg);
            /* アイコンを変更 */
            width: 20px;
            display: block;
          }

          summary {
            font-weight: bold;
            color: #333;
            cursor: pointer;
            /* フォーカスを表示させるためコメントアウト */
            /* outline: none; */
            /* フォーカス時のアウトラインを削除 */
            list-style: none;
            /* デフォルトの三角形を非表示に */
            display: inline-block;
            min-height: 24px;

            &::before {
              content: url(/excludes/KEC/common/img/icon/ico_circle_large_plus_g.svg);
              position: absolute;
              /* 絶対位置指定 */
              left: 0;
              /* 左端から配置 */
              width: 20px;
              display: block;
            }

            &:focus {
              background: var(--global_clr_brightgray);
              outline: 2px solid rgb(2, 167, 212);
            }

            @media (max-width: 768px) {
              left: 36px;
              position: absolute;

              &::before {
                left: -24px;
              }
            }

            &::-webkit-details-marker {
              display: none;
            }

            h2 {

              &:hover {
                border-bottom: 2px solid rgb(2, 167, 212);
              }

              &:focus-visible {
                border-bottom: 2px solid rgb(2, 167, 212);
              }
            }
          }
        }

        .status {
          padding: 0 15px;

          @media (max-width: 768px) {
            padding: unset;
          }

          .status-list {
            margin-top: 10px;
            display: grid;
            grid: "grid-left-top grid-right-top"
              "grid-middle grid-middle"
              "grid-left-bottom grid-right-bottom"
              / 50% 50%;
            gap: 10px;
            border: 1px solid var(--global_clr_darkgray);
            padding: 20px;

            @media (max-width: 768px) {
              grid: "grid-left-top"
                "grid-right-top"
                "grid-left-bottom"
                "grid-right-bottom";
              padding: 10px;
              margin-top: 36px;
            }

            /* 共通の設定 */
            dl {
              display: flex;
              margin-bottom: 5px;

              dt {
                height: 40px;
                align-content: center;
                margin-right: 15px;
              }

              dd {
                align-content: center;
                width: calc(100% - 120px);
                font-size: var(--global_font_size_small2);
                line-height: 1.5;
              }
            }

            .grid-left-top {
              grid-area: grid-left-top;
              border-right: 2px solid var(--global_clr_lightgray);
              padding-right: 10px;
              margin-right: 10px;

              @media (max-width: 768px) {
                border-right: unset;
              }
            }

            .grid-right-top {
              grid-area: grid-right-top;

              .status-waiting {
                border-bottom: 1px solid var(--global_clr_lightgray);
                padding-bottom: 10px;
                margin-bottom: 10px;

                @media (max-width: 768px) {
                  border-bottom: unset;
                }
              }

              .status-completion {}
            }

            .grid-middle {
              grid-area: grid-middle;
              border-bottom: 2px solid var(--global_clr_lightgray);
              margin-bottom: 10px;

              @media (max-width: 768px) {
                display: none;
              }
            }

            .grid-left-bottom {
              grid-area: grid-left-bottom;
              border-right: 2px solid var(--global_clr_lightgray);
              padding-right: 10px;
              margin-right: 10px;

              @media (max-width: 768px) {
                border-right: unset;
              }
            }

            .grid-right-bottom {
              grid-area: grid-right-bottom;

            }
          }
        }

        .purchaseStatas {
          display: inline-block;
          background: var(--global_clr_white);
          font-size: var(--global_font_size_small2);
          font-weight: bold;
          text-align: center;
          width: 100px;
          border: 2px solid var(--global_clr_lightgray);
          padding: 5px 0;

          &.sReady,
          &.order-sts-1,
          &.order-sts-3,
          &.order-sts-4,
          &.order-sts-5,
          &.order-sts-6,
          &.order-sts-2 {
            border: 2px solid var(--global_clr_blue);
            color: var(--global_clr_blue);
          }

          &.sWaiting,
          &.order-sts-7,
          &.order-sts-8 {
            border: 2px solid var(--global_clr_orange);
            color: var(--global_clr_orange);
          }

          &.sDone,
          &.order-sts-11,
          &.order-sts-12,
          &.order-sts-13 {
            border: 2px solid var(--global_clr_green);
            color: var(--global_clr_green);
          }

          &.sCanceled,
          &.order-sts-9,
          &.order-sts-10 {
            border: 2px solid var(--global_clr_darkgray);
            color: var(--global_clr_darkgray);
          }

          &.sReturn,
          &.order-sts-14 {
            border: 2px solid purple;
            color: purple;
          }
        }
      }

      /* 注文履歴詳細 */
      /* 注文キャンセル確認 */
      .MK4HFR01002_01,
      .MK4RFRRD110_01 {
        max-width: 1260px;
        margin: 0 auto;

        h2 {
          font-weight: bold;
          background-color: var(--global_clr_darkgray);
          color: var(--global_clr_white);
        }

        .bord {
          background-color: white;
          padding: 10px;
          margin: 0 10px;

          @media (max-width: 768px) {
            padding: 10px 0 0;
            margin: 0;
          }

          &:not(:last-child) {
            margin-bottom: 20px;
          }
        }

        &.order-flow {

          .titleSubArea {
            display: flex;
            flex-direction: row-reverse;
            align-items: baseline;
            position: relative;

            @media (max-width: 768px) {
              display: grid;
            }

            p {
              position: absolute;
              top: 11px;

              @media (max-width: 768px) {
                position: unset;
                top: unset;
                text-align: start !important;
              }

              a {
                white-space: nowrap;
              }
            }

            details {
              padding: 10px 0 0 25px;
              position: relative;

              @media (max-width: 900px) {
                margin: 5px 0 15px -5px;
              }
            }

            @media (max-width: 768px) {
              display: flex;
              flex-direction: column;
            }
          }

          section.status {
            width: 100%;

            @media (max-width: 768px) {
              width: inherit;
            }

            h2 {
              font-size: inherit;
              margin-bottom: inherit;
              background: inherit;
              color: inherit;
              padding: 1px 0 0 5px;
              border-radius: inherit;
            }
          }

          >div,
          >section {
            background: inherit;
            padding: 0 30px;

            @media screen and (max-width: 768px) {
              padding: inherit;
              margin-bottom: 15px;
            }

            section {
              margin-bottom: 20px;

              @media screen and (max-width: 768px) {
                margin-bottom: 20px;
              }

              h2 {
                font-size: var(--global_font_size_large3);
                letter-spacing: 1.5px;
                border-radius: initial;
                margin: 0 0 10px;
                padding: 5px 0 4px 12px;
              }

              .column {
                font-weight: normal;
                margin: 0 0 10px;
                padding: 0 0 2px;
              }

              .set {
                margin-left: 15px;
                margin-right: 15px;

                &:last-child {
                  margin-bottom: 12px;
                }

                &:not(:last-child) {
                  margin-bottom: 30px;
                }
              }

              .grid-item-price,
              .grid-item-enquete {
                .column {
                  font-weight: bold;
                  width: 95px;
                  margin: inherit;

                  span {
                    display: inline-block;
                    width: 70px;
                  }

                  &::after {
                    content: "：";
                    margin: 0 0 0 5px;
                    vertical-align: top;
                  }

                  dd {
                    line-height: inherit;
                  }
                }
              }

              .grid-item-enquete {
                .column {
                  width: 150px;

                  span {
                    width: 120px;
                    text-wrap: auto;
                  }
                }
              }

              .annotation {
                color: var(--global_clr_darkgray);
                font-size: var(--global_font_size_small2);
                text-align: right;
                margin: 0 0 15px;
              }

              .grid-item-return {
                text-align: center;

                .attention {
                  display: inline-block;
                  color: var(--global_clr_darkred);
                  font-weight: bold;
                  border: 2px solid var(--global_clr_darkred);
                  margin: 15px 18px 15px 0;
                  padding: 10px;
                }
              }

              &.grid-payment-detail {
                border: 1px solid var(--global_clr_darkgray);
                border-radius: initial;

                dl {
                  display: flex;
                  align-items: baseline;
                  margin: 0 15px;

                  .column {
                    border: none;
                    color: var(--global_clr_darkgray);
                    font-weight: bold;
                    width: 60%;
                    margin: 0 0 10px;
                    padding: 0 0 5px;

                    &::after {
                      content: "：";
                      margin: 0;
                    }

                    span {
                      display: inline-block;
                      width: 140px;
                      font-weight: bold;
                    }
                  }

                  dd {
                    display: inline-block;
                    width: 40%;
                    text-align: right;

                    &.down:before {
                      content: "-";
                      margin-right: 2px;
                    }

                    .unit {
                      font-size: small;
                    }
                  }
                }

                hr {
                  margin: 0px 15px 15px;
                }
              }

              @media screen and (max-width: 768px) {
                &:not(.title) {
                  border: inherit;
                  margin: inherit;
                  width: 100%;
                }
              }

              .set {
                .column {
                  border-bottom: 1px solid var(--global_clr_black);
                }

                .value {
                  margin-left: 0;
                  font-weight: bold;
                }
              }
            }
          }

          .title {
            margin: 0 0 10px;
            padding: 10px 0;

            @media screen and (max-width: 768px) {
              padding: 10px 0;
            }

            h1 {
              position: relative;
              border-bottom: 1px solid var(--global_clr_gray);
              font-size: var(--global_font_size_large5);
              font-weight: bold;
              letter-spacing: 1.5px;
              margin: inherit;
              padding: 4px 20px 5px;

              &::before {
                content: '';
                display: block;
                position: absolute;
                top: 6px;
                left: 8px;
                height: 21px;
                border-right: 4px solid var(--global_clr_bluegray);
              }

            }

            p {
              text-align: right;
              padding: 0 20px;

              @media (max-width: 768px) {
                padding: 0 5px 0 0;
                margin: 20px 0 0 auto;
              }

              a {
                display: inline-block;
                position: relative;
                font-size: var(--global_font_size_small1);
                text-align: right;
                padding: 0 10px;
                cursor: pointer;

                @media (max-width: 900px) {
                  margin: 0;
                }

                &::after {
                  content: "";
                  position: absolute;
                  width: 9px;
                  height: 9px;
                  border-right: 3px solid var(--global_clr_blue);
                  border-bottom: 3px solid var(--global_clr_blue);
                  bottom: -1.5px;
                  right: 0;
                  transform: translate(0, -75%) rotate(-45deg);
                }
              }
            }
          }
        }

        .grid-area {
          display: grid;
          grid: "grid-items grid-payment-detail"
            "grid-return grid-payment-detail"
            "grid-order grid-order"
            "grid-payment grid-payment"
            "grid-purchaser grid-purchaser"
            "grid-delivery-target grid-delivery-target"
            "grid-delivery-date grid-delivery-date"
            "grid-receiving-store-info grid-receiving-store-info"
            / auto 300px;

          @media screen and (max-width: 900px) {
            grid: "grid-payment-detail"
              "grid-items"
              "grid-return"
              "grid-order"
              "grid-payment"
              "grid-purchaser"
              "grid-delivery-target"
              "grid-delivery-date"
              "grid-receiving-store-info";
          }

          gap: 20px 15px;
        }

        .grid-payment-detail {
          position: inherit;
          align-self: start;

          grid-area: grid-payment-detail;

          @media screen and (max-width: 768px) {
            align-self: unset;
            top: unset;
          }

          dl {
            display: flex;
            align-items: baseline;
            margin: 0px 15px !important;
          }
        }

        .grid-order {
          grid-area: grid-order;
        }

        .grid-payment {
          grid-area: grid-payment;

          a {
            overflow-wrap: anywhere;
            word-break: break-all;
          }
        }

        .grid-purchaser {
          grid-area: grid-purchaser;
        }

        .grid-delivery-target {
          grid-area: grid-delivery-target;
        }

        .grid-delivery-date {
          grid-area: grid-delivery-date;
        }

        .grid-purchaser,
        .grid-delivery-target {
          .set:nth-child(2) {
            .value {
              line-height: 1.5;
            }
          }
        }

        .grid-receiving-store-info {
          grid-area: grid-receiving-store-info;
        }

        section.grid-items {
          grid-area: grid-items;

          .item {
            display: grid;
            grid: "grid-item-img grid-item-name"
              "grid-item-img grid-item-price"
              "grid-item-jan grid-item-price"
              "grid-item-return grid-item-enquete"
              "grid-item-return grid-item-coupon"
              / 175px auto;

            @media screen and (max-width: 768px) {
              grid: "grid-item-img"
                "grid-item-return"
                "grid-item-name"
                "grid-item-jan"
                "grid-item-price"
                "grid-item-enquete"
                "grid-item-coupon"
              ;
            }

            &:not(:last-child) {
              border-bottom: 1px solid var(--global_clr_black);
              border-radius: unset !important;
            }

            div.title {
              color: white;
              background-color: var(--global_clr_darkgray);
              border-radius: 5px;
              text-align: center;
            }

            .grid-item-img {
              grid-area: grid-item-img;

              img {
                width: 140px;
                height: 140px;
                margin-bottom: 10px;
              }

              @media screen and (max-width: 768px) {
                display: grid;
                justify-content: center;
              }
            }

            .grid-item-name {
              grid-area: grid-item-name;
              margin-bottom: 15px;
              font-size: var(--global_font_size_large1);
              font-weight: bold;
              line-height: 1.5;

              @media screen and (max-width: 768px) {
                margin-left: 10px;
              }
            }

            .grid-item-price {
              grid-area: grid-item-price;

              @media screen and (max-width: 768px) {
                margin-left: 10px;
                margin-bottom: 10px;
              }

              dl {
                display: flex;
                margin-bottom: 2px;

                .unit,
                .tax {
                  font-size: small;
                }
              }
            }

            .grid-item-jan {
              grid-area: grid-item-jan;
              font-size: smaller;
              display: flex;

              @media screen and (max-width: 768px) {
                margin-left: 10px;
                margin-bottom: 10px;
              }
            }

            .grid-item-enquete {
              grid-area: grid-item-enquete;

              >div,
              >dl {
                margin-bottom: 10px;

                &.title {
                  br {
                    display: none;

                    @media screen and (max-width: 768px) {
                      display: unset;
                    }
                  }
                }

                &:not(.title) {
                  margin-left: 10px;
                }
              }

              dl {
                display: flex;

                dt {
                  white-space: nowrap;
                }

                dd {
                  width: calc(100% - 130px);
                  word-break: break-all;

                  .unit,
                  .tax {
                    font-size: small;
                  }

                  .enqueteNote {
                    display: inline-block;
                    color: var(--global_clr_darkgray);
                    font-size: var(--global_font_size_small2);
                    text-indent: -1em;
                    padding-left: 1em;
                  }
                }
              }
            }

            .grid-item-coupon {
              grid-area: grid-item-coupon;

              ul {
                margin-left: 15px;

                li {
                  margin-bottom: 10px;

                  .description {
                    >div {
                      display: inline-block;
                    }

                    .text {
                      width: calc(100% - 20px);

                      @media screen and (max-width: 768px) {
                        width: unset;
                        font-size: unset;
                      }

                      #coupon_name {
                        overflow-wrap: break-word;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .cmnScreenBottomButtonsWrap {
          height: 120px;
        }
      }

      section.grid-return {
        grid-area: grid-return;
        border: 1px solid var(--global_clr_darkred) !important;
        border-radius: 0 0 8px 8px !important;
        margin-bottom: 40px !important;

        h2 {
          background: var(--global_clr_darkred);
          margin-bottom: 5px !important;
        }

        .item {
          margin: 0 10px;
          display: grid;
          grid: "grid-item-jan grid-item-name"
            "grid-item-return grid-item-price"
            / 175px auto;

          @media screen and (max-width: 768px) {
            grid: "grid-item-return"
              "grid-item-name"
              "grid-item-jan"
              "grid-item-price"
            ;
          }

          &:not(:last-child) {
            border-bottom: 1px solid var(--global_clr_darkred);
            border-radius: unset !important;
            margin-bottom: 5px;
          }

          .grid-item-name {
            grid-area: grid-item-name;
            margin-bottom: 15px;
            font-size: var(--global_font_size_large1);
            font-weight: bold;
            line-height: 1.5;

            @media screen and (max-width: 768px) {
              margin-left: 10px;
            }
          }

          .grid-item-price {
            grid-area: grid-item-price;

            @media screen and (max-width: 768px) {
              margin-left: 10px;
              margin-bottom: 10px;
            }

            dl {
              display: flex;
              margin-bottom: 2px;

            }
          }

          .grid-item-jan {
            grid-area: grid-item-jan;
            font-size: smaller;
            padding: 5px 0;
            display: flex;

            @media (max-width: 600px) {
              margin: 0 10px 10px;
            }
          }
        }
      }

      /* 注文キャンセル */
      .modal-cancel-confirm {
        text-align: center;

        div.button {
          display: inline-block;
          text-align: center;

          button {
            width: 100px !important;
            padding: 10px !important;
          }
        }
      }
    }

    /* クーポン帳 */
    .MK4CFR0D001_01 {
      max-width: 1260px;
      margin: 0 auto;

      /* 見出し共通化 */
      h1 {
        position: relative;
        /*        background: var(--global_clr_brightgray);*/
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large5);
        font-weight: bold;
        letter-spacing: 1.5px;
        margin: inherit;
        padding: 4px 20px 3px;

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 21px;
          border-right: 4px solid var(--global_clr_bluegray);
        }

        @media (max-width: 660px) {
          width: 100%;
          margin: 0 0 20px;
        }
      }

      section {
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 20px;

        @media screen and (max-width: 768px) {
          padding: inherit;
        }

        ul {
          display: grid;
          gap: 20px;

          li {
            display: flex;

            background-color: var(--global_clr_white);
            border-radius: 8px;
            padding: 20px;

            @media screen and (max-width: 768px) {
              padding: 15px 0;
            }

            dl {
              width: 100%;
              margin-left: 10px;

              display: grid;
              grid: "grid-name grid-name"
                "grid-img grid-text" 38px "grid-img grid-combination"
                "grid-img grid-attention"
                "grid-img grid-description"
                / 120px auto;

              @media screen and (max-width: 768px) {
                grid: "grid-name grid-name"
                  "grid-img grid-text" 72px "grid-img grid-combination"
                  "grid-attention grid-attention"
                  "grid-description grid-description"
                  / 110px auto;
              }

              dt {
                font-size: var(--global_font_size_large2);
                /* display: flex; */
                /* align-items: end; */

                &.grid-name {
                  border-bottom: 1px solid var(--global_clr_gray);
                  padding-bottom: 10px;
                  margin-bottom: 10px;

                  @media screen and (max-width: 500px) {
                    padding-bottom: 5px;
                    margin-bottom: 5px;
                  }

                  grid-area: grid-name;

                  span {
                    overflow-wrap: break-word;
                  }

                  .couponNameArea {
                    display: block;
                    width: 85%;
                  }

                  strong {
                    color: var(--global_clr_red);
                    font-weight: bold;
                    white-space: nowrap;
                    margin: 0 0 0 10px;
                  }
                }
              }

              dd {
                padding: 6px 0;

                .grid-img {
                  grid-area: grid-img;
                  width: 100px;
                  height: 100px;

                  @media screen and (max-width: 768px) {
                    /*                      width: 80px;
                      height: 80px;*/
                  }
                }

                &.grid-text {
                  grid-area: grid-text;

                  line-height: 1.4;
                }

                &.grid-combination {
                  grid-area: grid-combination;

                  display: flex;
                  align-items: center;

                  color: var(--global_clr_blue);
                  font-weight: bold;
                  letter-spacing: 1.5px;

                  @media (max-width: 768px) {
                    letter-spacing: inherit;
                  }

                  strong {
                    color: var(--global_clr_red);
                    font-weight: bold;
                    letter-spacing: 0.08em;
                    border: 1px solid var(--global_clr_red);
                    border-radius: 16px;
                    padding: 2px 10px;

                    &.allowed {
                      margin: 0 0 0 10px;
                      white-space: nowrap;
                    }

                    &.not-allowed {
                      color: var(--global_clr_darkgray);
                      border: 1px solid var(--global_clr_darkgray);
                      white-space: nowrap;
                      margin: 0 0 0 10px;
                    }
                  }
                }

                &.grid-attention {
                  grid-area: grid-attention;

                  color: var(--global_clr_darkblue);
                  font-size: var(--global_font_size_small2);
                  line-height: 1.5;

                }

                &.grid-description {
                  grid-area: grid-description;

                  font-size: var(--global_font_size_small1);
                  line-height: 1.5;
                }
              }
            }
          }
        }
      }

      /* 値引き５桁以上の場合 */
      .is-char-count-5plus {
        font-size: var(--global_font_size_large3) !important;
      }

      span.five-char {
        margin-left: -15px !important;
      }

      .use_flg-0 {
        opacity: 0.7;
        /* 半透明 */
        background-color: #cccc;
        /* 背景グレー化 */
      }

      .button {
        text-align: center;
      }
    }

    /* お届け先一覧 */
    .MK4CFR0A001_01 {

      .customer-delivery {
        padding: 0 20px;

        /*768より前に崩れ始めるので* 900pxでブレーク */
        @media (max-width: 900px) {
          width: 100%;
          padding: 0 5px;
        }

        .customer-delivery-list {
          .customer-delivery-list-item {

            /*768より前に崩れ始めるので* 900pxでブレーク */
            @media (max-width: 900px) {
              padding: 20px 15px;
            }

            .customer-delivery-list-item-func {
              gap: 10px;
              width: 260px;

              /*768より前に崩れ始めるので* 900pxでブレーク */
              @media (max-width: 900px) {
                justify-content: center;
                width: 100%;
                gap: 15px;
                margin: 15px auto 10px;
              }

              button {
                margin: 0 0 10px !important;

                &:last-child {
                  margin: 0 !important;
                }
              }
            }
          }
        }
      }

      .customer-delivery-list-item--default {
        background: var(--global_clr_sandbeige);
      }
    }

    /* お届け先登録 */
    .MK4CFR0A002_01 {
      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    /* お客様情報 */
    .MK4CFR07001_01 {

      .customer-info {
        margin: 40px auto 20px;

        @media (max-width: 768px) {
          width: inherit;
          margin: inherit;
        }

        div {
          margin: 0 0 30px;

          &.customer-info-group {
            .customer-info-group-title {
              border-bottom: 1px solid var(--global_clr_gray);
              padding: 0 0 5px;

              @media (max-width: 768px) {
                margin: 0 0 0 5px;
                padding: 0 0 5px 5px;
              }
            }

            .customer-info-group-data {
              font-size: var(--global_font_size_large3);
              padding: 10px 0 0 25px;

              @media (max-width: 768px) {
                padding: 10px 0 0 15px;
              }
            }
          }
        }
      }
    }

    /* お客様情報登録 */
    /* お客様情報変更 */
    .MK4CFR03004_01,
    .MK4CFR08001_01 {
      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 1.5px;
        margin: 0 20px 30px 20px;
        padding: 4px 20px 5px;

        @media (max-width: 768px) {
          margin: 0 auto 30px;
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }

      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }

      label[for="new-email-comfirm"] {
        display: inline-block;
        margin: 20px 0 5px;
      }

      @media (max-width: 360px) {
        .only_narrow_br {
          display: block !important;
        }

        #year {
          margin-bottom: 15px;
        }

        .field-birth .efo-result {
          span:nth-of-type(1) {
            top: -2px;
            position: relative;
          }
        }
      }
    }

    /* お客様情報登録 */
    /* お客様情報確認 */
    .MK4CFR03005_01,
    .MK4CFR08002_01 {
      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 1.5px;
        max-width: calc(100% - 40px);
        margin: 0 auto 30px;
        padding: 4px 20px 5px;

        @media (max-width: 768px) {
          max-width: inherit;
          margin: 0 auto 30px;
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }
    }

    /* お客様情報登録完了 */
    .MK4CFR03006_01 {
      .customerAnpassArea {
        max-width: inherit;
        margin: 30px;
        width: initial;

        @media (max-width: 768px) {
          margin: 20px;
        }

        .anpass {
          display: flex;
          align-items: baseline;

          @media (max-width: 768px) {
            display: inherit;
          }

          .number {
            margin: 10px;
          }
        }
      }
    }

    /* ショップからのお知らせの設定 */
    .MK4CFR0B002_01 {
      h2 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }

      .select-mailaddress {
        white-space: nowrap;
        margin: 7px 0 7px 15px;

        .mailAddressDisp {
          white-space: initial;
        }

      }
    }

    /* パスワード再設定 */
    .MK4CFR05004_01 {
      .customer-form-title {
        p {
          padding: 20px 20px 40px;

          @media (max-width: 768px) {
            padding: 0 20px 40px;
          }
        }
      }

      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    /* パスワード再設定完了 */
    /*移行用パスワード再設定完了*/
    .MK4CFR05005_01,
    .MK4CFRME205_01 {
      .cmnScreenBottomButtonsWrap li:first-child {
        display: none;
      }
    }

    /* パスワード再登録URL送信 */
    .MK4CFR05001_01 {
      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    /* 移行用パスワード再登録URL送信 */
    /* 移行用パスワード再設定 */
    /* パスワード再設定受付 */
    .MK4CFRME201_01,
    .MK4CFRME204_01,
    .MK4CFR05001_01 {
      #form-description {
        padding: 20px 20px 40px;

        @media (max-width: 768px) {
          padding: 0 20px 20px;
        }
      }

      .attentionArea {
        text-indent: -1em;
        padding-left: 1em;
        margin: 0 0 20px 20px;

        .attentionLabel {
          color: var(--global_clr_red);
          font-weight: bold;
        }
      }

      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    /* あんしんパスポート番号の登録 */
    .MK4CFR0C001_01 {

      /* リードテキスト段落除外対応 */
      .utl-txt-color-red {
        text-indent: inherit !important;
        padding-left: unset !important;
      }

      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 1.5px;
        margin: 0 0 30px;
        padding: 4px 20px 5px;

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }

      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }

      .customer-txt {
        padding: 0 40px;

        @media (max-width: 768px) {
          width: 100%;
          padding: 0 20px;
        }

        p {
          line-height: 1.5;
        }
      }

      .customer-form-terms {
        width: calc(100% - 40px);
        margin: 20px auto 0;

        @media (max-width: 768px) {
          width: 100%;
        }
      }
    }

    /* あんしんパスポート番号の登録完了 */
    .MK4CFR0C002_01 {
      h2 {
        border: inherit;

        &::before {
          content: unset;
        }
      }
    }

    /* あんしんパスポート番号の登録解除 */
    .MK4CFR0C008_01 {
      .customer-form-title {
        p {
          padding: 10px;
        }
      }

      .customer-anpass-text {
        p {
          line-height: 1.5;
        }
      }

      /* 解除ボタン文言対応 */
      .cmnScreenBottomButtonsWrap {
        .cmnBtnSubmit {
          width: 330px;
        }
      }
    }

    /* 退会依頼 */
    /* 
    .MK4CFR09001_01 {
             h3 {
          span:nth-child(2) {
            font-weight: bold;
          }
        }
    } 
    */

    /* ログイン履歴 */
    .MK4CFR0E001_01 {
      .customer-login-history {
        width: calc(100% - 40px);
        margin: 30px auto;

        thead {
          border: 1px solid var(--global_clr_darkgray);

          th {
            padding: 15px 0 12px 15px;

            &:first-child {
              width: 300px;

              @media (max-width: 768px) {
                width: inherit;
              }
            }
          }
        }

        td {
          padding: 20px 15px 15px;

          time {
            white-space: nowrap;

            br {
              display: none;

              @media (max-width: 500px) {
                display: block;
              }
            }
          }
        }
      }
    }

    /* ゲストメールマガジン登録・停止 + メールマガジン登録*/
    .MK4CFRRG001_01,
    .MK4CFR0B002_01 {

      .efo-area {
        .efo-input-area {
          ul {
            padding-left: 18px;

            &.no-padding {
              padding-left: 0;
            }

            li {
              margin-top: 2px;
              margin-bottom: 8px;
            }
          }
        }
      }

      .label-check {
        display: flex !important;
        align-items: center;
        margin: 0 3px 0 0 !important;
        column-gap: 5px;

        input[type="checkbox"] {
          flex-shrink: 0;
          margin: 0;
        }

        span {
          display: inline-block;
          /* flex: 1; */
        }
      }

      #explainMailMagazine {
        h2 {
          position: relative;
          background: inherit;
          border-bottom: 1px solid var(--global_clr_gray);
          font-size: var(--global_font_size_large3);
          font-weight: bold;
          letter-spacing: 1.5px;
          margin: 0 0 30px;
          padding: 4px 20px 5px;

          &::before {
            content: '';
            display: block;
            position: absolute;
            top: 6px;
            left: 8px;
            height: 19px;
            border-right: 4px solid var(--global_clr_bluegray);
          }
        }
      }

      h3 {

        span:nth-child(2),
        label {
          font-weight: bold;
        }
      }

      section p {
        display: block;

        @media (max-width: 768px) {
          padding: 0 20px 40px;
        }
      }

      #explainMailMagazine {
        padding: 0 20px;

        @media (max-width: 768px) {
          padding: 0 5px;
        }
      }

      a.bold {
        font-weight: bold;
      }

      .topic {
        padding: 20px 20px 40px;

        ol {
          display: flex;
          justify-content: space-around;
          /* max-width: 500px; */

          @media screen and (max-width: 768px) {
            display: grid;
            gap: 15px;
          }

          li {

            a {
              display: inline-block;
              position: relative;
              border: 1px solid var(--global_clr_darkgray);
              padding: 15px 30px 15px 15px;

              &::after {
                content: '';
                display: block;
                position: absolute;
                top: 16px;
                right: 10px;
                width: 11px;
                height: 11px;
                border-top: 3px solid;
                border-right: 3px solid;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
              }
            }
          }
        }
      }

      #subscribe {
        margin-top: 40px;
      }

      #unsubscribe {
        margin-top: 100px;
      }

      #subscribe,
      #unsubscribe {

        .cmnNoticeMemoIcon {
          margin-left: 20px;
          margin-bottom: 40px !important;

          @media (max-width: 768px) {
            background: url(/excludes/KEC/common/img/icon/ico_circle_info.svg) no-repeat top 0px left 1px;
            background-size: 17px;
            /* padding: 20px; */
          }
        }
      }

      .customer-detail-list {
        border: inherit;

        .customer-detail-list-item {
          border-top: inherit;
          border-bottom: 1px solid var(--global_clr_gray);
          padding: 15px 0;

          @media (max-width: 768px) {
            border-bottom: inherit;
          }

          .customer-detail-list-item-title {
            letter-spacing: 1px;
            width: 250px;

            @media (max-width: 768px) {
              width: 100%;
              font-size: var(--global_font_size_large2);
            }
          }

          /***不要になるはず***/
          &.only-title {
            padding: unset;
            border-bottom: unset;
          }

          dl {

            @media (max-width: 768px) {
              display: inherit;
              border: 1px solid var(--global_clr_gray);
            }

            dt {
              width: 175px;
              color: var(--global_clr_darkblue);
              /* font-weight: bold; */

              &:not(:nth-child(9)) {
                border-bottom: 1px dashed var(--global_clr_gray);
              }

              @media (max-width: 768px) {
                background: var(--global_clr_brightgray);
                border-bottom: inherit;
                width: inherit;
                font-size: inherit;
                padding: 6px 10px 5px;
              }
            }

            dd {
              width: calc(100% - 175px);
              border-bottom: 1px dashed var(--global_clr_gray);

              @media (max-width: 768px) {
                font-size: var(--global_font_size_small1);
                width: 100%;
                padding: 15px;
              }

              /* &:not(:last-child) {
                border-bottom: 1px dashed var(--global_clr_gray);

                @media (max-width: 768px) {
                  border-bottom: inherit;
                }
              }
              */
            }
          }
        }
      }

      .customer-txt {
        color: var(--global_clr_darkgray);
        font-size: var(--cmn_icon_font_size_M);
        text-indent: -1em;
        padding-left: 1em;

        p {

          @media (max-width: 768px) {
            padding: 0 0 40px;
          }
        }
      }

      label[for="email-comfirm"] {
        display: inline-block;
        margin: 20px 0 5px;
      }
    }

    /* お問い合わせ */
    .MK4CFRRF001_01 {
      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 1.5px;
        margin: 0 0 30px;
        padding: 4px 20px 5px;

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }

      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    /* お問い合わせ確認 */
    .MK4CFRRF002_01 {
      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 1.5px;
        margin: 0 0 30px;
        padding: 4px 20px 5px;

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }
    }

    /* ログインでパスワード再設定のモーダル */
    .reset-guidance {
      div.button-area {
        text-align: center;

        button {
          border-radius: 4em !important;
          background: var(--global_clr_red) !important;
          color: #fff !important;
          padding: 10px 50px !important;
          width: 320px !important;
          text-align: center !important;
          text-shadow: unset !important;
        }
      }
    }

    /* 確認コード入力エリアの共通 */
    .passcode {
      margin-top: 30px;

      input.inputPassCode {
        font-size: var(--global_font_size_large9) !important;
        font-weight: bold !important;
        width: 36px !important;
        padding: 4px !important;
        text-align: center;

        @media (max-width: 500px) {
          width: 36px !important;
        }
      }
    }

    /* 確認コード入力 */
    .MK4CFR03007_01 {
      min-height: 300px;
      margin: 0 auto 60px;

      @media (max-width: 768px) {
        margin: inherit;
      }

      .passcode {
        margin: 0 0 40px 20px;

        @media (max-width: 768px) {
          margin: 40px auto;
        }

        @media (max-width: 500px) {
          text-align: center;
        }

        input {
          font-size: var(--global_font_size_large9) !important;
          font-weight: bold !important;
          width: 36px;
          padding: 4px !important;

          @media (max-width: 500px) {
            width: 36px !important;
          }
        }
      }
    }

    /* 出張修理WEB受付フォーム・個人情報入力 MK4CFRRR001_01 */
    .MK4CFRRR001_01 {
      #reflect-btn {
        margin: 0 auto 30px;
      }

      .purcase-tel-radio {
        display: grid;

        /*20260810
        >.customer-form-input {
          .efo-result {
            label {
              display: block;
            }
          }
        }
        */
      }

      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 0.5px;
        margin: 0 0 30px;
        padding: 4px 20px 5px;
        margin: 0 20px 30px 20px;

        @media (max-width: 768px) {
          margin: 0 auto 30px;
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }

      h3 {
        &.repair-notice-h3 {
          position: relative;
          background: inherit;
          border-bottom: 1px solid var(--global_clr_gray);
          font-size: var(--global_font_size_large3);
          font-weight: bold;
          letter-spacing: 0.5px;
          margin: 0 0 30px;
          padding: 4px 20px 5px;

          &::before {
            content: '';
            display: block;
            position: absolute;
            top: 6px;
            left: 8px;
            height: 19px;
            border-right: 4px solid var(--global_clr_bluegray);
          }
        }

        span:nth-child(2) {
          font-weight: bold;
        }
      }

      .customer-form-announcement {
        background: var(--global_clr_brightgray);
        border: 1px solid var(--global_clr_gray);
        line-height: 1.5;
        margin: 0 20px 40px;
        padding: 10px 20px;

        @media (max-width: 768px) {
          width: 95%;
          margin: 0 10px 40px;
          padding: 10px 15px;
        }
      }

			/*個人法人選択*/
			.REGIST_NAME_KBN {
				font-size: var(--global_font_size_large1);
        display: flex;
        flex-direction: row;

				.label-radio {

					input {
						margin-top: 2px;
					}

					span {
						margin-top: 6px;
					}
				}
			}

      /*購入時の電話番号*/
			.purchase_tel_none {
        display: flex;
        flex-direction: column;

				.label-radio {

					input {
						margin-top: 2px;
					}

					span {
						margin-top: 6px;
					}
				}
			}

      #email-description {
        @media (max-width: 768px) {
          margin: 30px 0 0;
        }
      }

      .mailAddressAtention {
        font-size: var(--global_font_size_large2);
        font-weight: bold;
        color: var(--global_clr_white);
        background-color: var(--global_clr_red);
        padding: 10px;
        margin: 0 20px 30px 20px;
        line-height: 1.5;
        text-align: center;

        @media (max-width: 768px) {
          margin: 0 auto 30px;
        }

        @media(max-width: 500px) {
          text-align: inherit;
        }
      }

      .customer-form-terms {
        margin: 0 20px 10px;

        @media (max-width: 768px) {
          margin: 0 auto 30px;
        }
      }

      /* 修理に関するお願い */
      .customer-form-terms.repair {
        background-color: var(--global_clr_sandbeige);
        margin: 0 20px 40px;

        @media (max-width: 768px) {
          margin: 0 auto 30px;
        }
      }

      /*連絡先優先順位・連絡時間帯の入力欄*/
      @media (min-width: 500px) {
        #contact_priority,
        #contact_time {
          width: 40%;
        }
      }
    }

    /* 修理品情報 */
    .MK4CFRRR003_01 {
      .customer-form-announcement {
        background: var(--global_clr_brightgray);
        border: 1px solid var(--global_clr_gray);
        line-height: 1.5;
        margin: 0 20px 40px;
        padding: 10px 20px;

        @media (max-width: 768px) {
          width: 95%;
          margin: 0 10px 40px;
          padding: 10px 15px;
        }
      }

      h2 {
        position: relative;
        background: inherit;
        border-bottom: 1px solid var(--global_clr_gray);
        font-size: var(--global_font_size_large3);
        font-weight: bold;
        letter-spacing: 0.5px;
        margin: 0 0 30px;
        padding: 4px 20px 5px;
        margin: 0 20px 30px 20px;

        @media (max-width: 768px) {
          margin: 0 auto 30px;
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: 8px;
          height: 19px;
          border-right: 4px solid var(--global_clr_bluegray);
        }
      }

      h3 {
        span:nth-child(2) {
          font-weight: bold;
        }
      }

      select {
        max-width: 88%;
      }

      .fail-item-type-4 {
        margin-bottom: 15px;
      }

      .fail_symp_desc {
        margin-left: 1em;
        margin-top: 5px;
        color: var(--global_clr_darkgray);
        font-size: var(--global_font_size_small2);
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
        padding-left: 20px;
        position: relative;

        &::before {
          content: "※";
          /* margin-right: 0.2em; */
          position: absolute;
          left: 0;
        }
      }

      #purchaseType {
        margin-bottom: 25px;

        label {
          span {
            @media (max-width: 475px) {
              margin-right: unset;
              padding-right: unset;
            }
          }
        }

        /* ここの必須選択OK印は不要 */
        .efo-normally {

          &:after {
            display: none !important;
          }
        }
      }

      .validation {
        .customer-form-input {
          input:not([type="text"]) {
            position: absolute;
          }

          span:not(.efo-result) {
            display: block;
            margin-left: 29px;
          }

          .label-radio {
            span {
              top: 6px;
              position: relative;
            }
          }
        }
      }
    }
  }

  /* 出張修理WEB受付フォーム・入力内容確認 */
  .MK4CFRRR004_01 {
    h2 {
      position: relative;
      background: inherit;
      border-bottom: 1px solid var(--global_clr_gray);
      font-size: var(--global_font_size_large3);
      font-weight: bold;
      letter-spacing: 0.5px;
      margin: 0 0 30px;
      padding: 4px 20px 5px;
      margin: 0 20px 30px 20px;

      @media (max-width: 768px) {
        margin: 0 auto 30px;
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 6px;
        left: 8px;
        height: 19px;
        border-right: 4px solid var(--global_clr_bluegray);
      }
    }

    .customer-form-input-label[name="FAIL_SYMP"] {
      display: grid;
      gap: 20px;

      .customer-form-confirm {
        .fail-symp-title {
          color: var(--global_clr_darkgray);
          /* font-size: var(--global_font_size_small1); */
          font-weight: initial;
        }

        .fail-symp-answer {
          white-space: pre-line;
          font-weight: initial;
          /* font-size: var(--global_font_size_normal); */
          line-height: 1.6;
        }
      }
    }
  }

  .MK4RFRRS050_01 {
    h1 {
      margin: 0 0 40px !important;
    }
  }

  /* 簡易フッタ固定 */
  .MK4PFRDH200_02 {
    position: fixed;
    bottom: 0;
    z-index: 10;
  }

}

/* ------------------------------ */
/* LINKIDS追記 */
/* ------------------------------ */

/* テキスト */
.customer-txt {
  margin: 20px auto;

  p {
    line-height: 1.5;

    &:not(:last-child) {
      margin-bottom: 1.6em;
    }
  }

  @media screen and (max-width: 768px) {
    width: 90%;
  }
}

/* フォーム関連 */
.customer-form {

  /* タイトル */
  .customer-form-title {

    @media screen and (max-width: 768px) {
      width: 90%;
      margin: 10px auto;
    }
  }

  /* アナウンス */
  .customer-form-announcement {
    margin: 10px auto;
    padding: 10px;
    background-color: var(--global_clr_lightgray);
    border-radius: 8px;

    @media screen and (max-width: 768px) {
      width: 90%;
    }
  }

  /* フォーム項目名 */
  .efo-column-name {
    font-weight: normal;
  }

  /* フォーム項目名のラベル */
  .customer-form-column-label {
    background-color: #527d9b;
    color: white;
    padding: 1px 2px;
    font-size: var(--global_font_size_small2);
    font-weight: normal;
    margin-right: 3px;
  }

  .customer-form-column-label--required {
    background-color: var(--global_clr_darkred);
  }

  /* 規約表示 */
  .customer-form-terms {
    margin: 20px 20px 40px;
    padding: 40px 40px 20px;
    background-color: var(--global_clr_lightgray);
    position: relative;

    .terms_icon {
      position: absolute;
      top: 7px;
      left: 7px;
      padding: 1px 10px;
      color: #666666;
      background-color: var(--global_clr_white);
      border: 1px solid var(--global_clr_bluegray);

      @media screen and (max-width: 768px) {
        top: 1px;
        left: 1px;
        padding: 2px 10px 1px;
        border: 0px solid var(--global_clr_bluegray);
        background-color: var(--global_clr_sandbeige);
      }
   }

    .customer-form-terms-title {
      font-size: var(--global_font_size_large3);
      margin: 0px 0px 20px;
      background: none;
      border-bottom: 1px solid var(--global_clr_gray);
    }

    .customer-form-terms-body {
      height: 300px;
      overflow-y: scroll;
      padding: 25px 30px;
      background-color: #fff;
      transition: all 0.4s;

      @media screen and (max-width: 768px) {
        height: 360px;
        padding: 5px;

        &.checked {
          height: 80px;
        }
      }

      ul {
        padding-left: 2.4em;
        list-style-type: decimal;

        @media (max-width: 768px) {
          padding-left: 2.0em;
        }

        li {
          &:not(:last-child) {
            margin-bottom: 10px;
          }

          ul {
            margin: 10px 0px 0px;
            padding-left: 3.2em;
            list-style-type: none;

            @media (max-width: 768px) {
              padding-left: 2.6em;
            }

            li {
              position: relative;
              counter-increment: cnt;

              &::before {
                content: "（" counter(cnt) "）";
                position: absolute;
                left: -3.2em;
              }

              @media (max-width: 768px) {
                &::before {
                  left: -2.6em;
                }
              }
            }
          }
        }
      }

      small {
        font-size: var(--global_font_size_small3);
      }

      .customer-form-terms-body-section {
        width: 100%;
        max-width: none;

        &:not(:first-child) {
          margin-top: 30px;
        }

        h2 {
          font-size: var(--global_font_size_large5);
          font-weight: bold;
          margin: 0px 0px 20px;
          background: none;
          border-bottom: 1px solid var(--global_clr_gray);
        }

        p {
          margin: 0px 0px 10px 5px;
        }

        dl {
          dt {
            font-weight: bold;

            @media (max-width: 768px) {
              width: 100%;
            }
          }

          dd {
            &:not(:last-child) {
              margin-bottom: 10px;
            }

            @media (max-width: 768px) {
              width: 100%;
            }

            .bordered {
              display: block;
              margin: 10px 0px 0px;
              padding: 10px;
              border: 1px solid var(--global_clr_gray);
              border-radius: 10px;
            }
          }
        }

        section {
          width: 100%;
          max-width: none;

          &:not(:first-child) {
            margin-top: 20px;
          }

          h3 {
            font-size: var(--global_font_size_large2);
            margin: 0px 0px 20px;
            background: none;
            border-bottom: 1px solid var(--global_clr_gray);
          }

          small {
            font-size: var(--global_font_size_small2);
            position: relative;
            display: block;
            margin: 10px 0px 0px;
            padding-left: 1.5em;

            strong {
              color: rgb(241, 53, 53);
            }

            &::before {
              content: "※";
              position: absolute;
              left: 0;
            }
          }
        }

        &#privacy-policy {
          h3 {
            font-weight: bold;
            /* border-bottom: none; */
          }

          ul {
            list-style-type: none;
            padding-left: 3.6em;

            @media (max-width: 768px) {
              padding-left: 2.6em;
            }

            li {
              position: relative;
              counter-increment: cnt;

              &::before {
                content: "（" counter(cnt) "）";
                position: absolute;
                left: -3.0em;
              }

              @media (max-width: 768px) {
                &::before {
                  left: -2.6em;
                }
              }
            }
          }
        }
      }

      #repair-notice.customer-form-terms-body-section {
        ul {
          li {
            position: relative;
            list-style-type: none;

            &::before {
              content: "■";
              position: absolute;
              left: -1.8em;
              font-weight: bold;
              margin-right: 5px;
            }

            a {
              display: block;
              width: fit-content;
              margin: 5px 0px 0px;
              text-decoration: underline;
            }
          }
        }
      }
    }

    .customer-form-terms-body--small {
      height: 240px;
    }

    .customer-form-terms-footer {
      width: 360px;
      max-width: 100%;
      margin: 20px auto 0px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid var(--global_clr_gray);

      .customer-form-terms-footer-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        input[type="checkbox"] {
          width: 20px !important;
          height: 20px !important;
        }
      }
    }

    @media screen and (max-width: 768px) {
      padding: 5px;
      /*        width: 90%;*/
      margin: 20px auto;

      .customer-form-terms-body {
        padding: 20px 10px;

        .customer-form-terms-body-section {
          min-width: auto;

          section {
            min-width: auto;

            h3 {
              font-size: var(--global_font_size_large1);
            }
          }
        }
      }

      .customer-form-terms-footer {
        margin: 10px auto 0px;
        padding: 10px 5px 10px;
      }
    }
  }

  /* リタゲ同意バージョン（一部style上書） */
  .customer-form-terms.mail {
    background-color: var(--global_clr_sandbeige);

    .customer-form-terms-body {
      height: auto;
      overflow-y: scroll;
      transition: all 0.4s;

      @media screen and (max-width: 768px) {
        /* height: auto; */
        height: 250px;

        &.checked {
          height: 80px;
        }
      }
    }
  }



  /* 会員登録確認 */
  .customer-form-mail-accept {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 20px auto;

    .customer-form-mail-accept-input {
      .customer-form-mail-accept-input-column {
        display: flex;
        align-items: center;
        gap: 5px;

        input[type="email"] {
          width: 400px;
          max-width: 100%;
        }

        &::after {
          flex-shrink: 0;
          margin: 0px;
        }
      }
    }

    @media screen and (max-width: 768px) {
      width: 90%;

      .customer-form-mail-accept-input {
        width: 100%;

        .customer-form-mail-accept-input-column {
          flex-wrap: wrap;
        }
      }
    }
  }

  /* メッセージ */
  .customer-form-attention-message {
    position: relative;
    margin: 20px auto;
    padding: 20px 20px 20px 40px;
    border: 2px solid var(--global_clr_red);

    p {
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }

    &::before {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      left: 10px;
      background-image: url(../img/icon/icon_note.svg);
      background-size: 100%;
    }

    @media screen and (max-width: 768px) {
      width: 90%;
      padding: 10px 10px 10px 40px;
    }
  }

  /* フォーム内のボタン */
  .customer-form-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    .customer-form-buttons-item {
      width: 100%;

      .cmnBtnCommon,
      .cmnBtnFunction {
        width: 420px !important;
        max-width: 100% !important;
        margin: 20px;

        @media (max-width: 768px) {
          margin: 20px auto;
        }
      }
    }

    @media screen and (max-width: 768px) {
      align-items: center;
    }
  }

  /* あんしんパスポート */
  .customer-form-passport {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .customer-form-passport-num,
    .customer-form-passport-date {
      display: flex;
      align-items: center;
      gap: 5px;

      dt {
        font-weight: normal;
      }
    }

    .customer-form-passport-num {
      dd {
        font-size: var(--global_font_size_large2);
        font-weight: bold;
        color: var(--global_clr_red);
      }
    }

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

      .customer-form-passport-num,
      .customer-form-passport-date {
        align-items: flex-start;
        /* flex-direction: column; */
      }
    }
  }

  /* ボタン */
  .button-group {
    div.button.disabled {
      a {
        background-color: var(--global_clr_lightgray) !important;
        color: #fff !important;
        cursor: not-allowed;
        pointer-events: none;
      }
    }

    /* 大きめのボタン */
    div.button--large {
      width: 300px;
      max-width: 90%;
    }
  }

  /* チェックボックスのレイアウト調整 */
  .customer-form-input-checkbox {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 5px;
    margin: 0px 0px 5px;

    input[type="checkbox"] {
      width: 20px !important;
      height: 20px !important;
    }

    @media screen and (max-width: 768px) {
      input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
      }
    }
  }

  .validation--full-width {
    display: block;

    .efo-input-area {
      width: 100% !important;
    }

    .efo-result {
      width: 100% !important;
    }
  }
}

/* あんしんパスポート入力項目のスマホ表示対応 */
.efo-input-area {
  @media screen and (max-width: 768px) {
    input {

      &.efo-passport1,
      &.efo-passport2,
      &.efo-passport3,
      &.efo-passport4 {
        width: 60px !important;
      }
    }
  }
}

/* お客様情報 */
.customer-info {
  max-width: 1200px;
  margin: 20px auto;

  .customer-info-group {
    margin: 0px 0px 10px;

    .customer-info-group-title {
      font-weight: normal;
      margin: 0px 0px 5px;
      padding: 0px 0px 2px;
      border-bottom: 1px solid #000;
    }

    .customer-info-group-data {
      padding: 5px 0px 5px 32px;

      .customer-info-group-data-item {
        font-size: var(--global_font_size_large2);
        font-weight: bold;
      }

      .customer-info-group-data-item--zip {
        display: flex;
        align-items: center;
        margin: 0px 0px 5px;

        &::before {
          content: '〒';
          margin-right: 5px;
          font-weight: normal;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    width: 90%;

    .customer-info-group {
      .customer-info-group-data {
        padding: 5px 0px;
      }
    }
  }
}

/* あんしんパスポート */
.customer-anpass {
  max-width: 520px;
  margin: 0 auto;

  .customer-anpass-view {
    border: 1px solid var(--global_clr_red);

    .customer-anpass-view-title {
      padding: 10px;
      background-color: #e71f00;
      text-align: center;

      h2 {
        background: none;
        padding: 0px;
      }

      img {
        max-width: 100%;
      }
    }

    .customer-anpass-view-body {
      padding: 20px;

      .customer-anpass-view-body-passport {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;

        .customer-anpass-view-body-passport-title {
          font-weight: normal;
        }

        .customer-anpass-view-body-passport-num {
          font-size: var(--global_font_size_large5);
          font-weight: bold;
          color: var(--global_clr_red);
        }
      }
    }
  }

  .customer-anpass-notes {
    margin: 10px 0px 0px;

    small {
      position: relative;
      display: block;
      padding: 0px 0px 0px 1.6em;
      font-size: var(--global_font_size_small2);
      color: var(--global_clr_red);
      line-height: 1.5;

      &::before {
        content: '※';
        position: absolute;
        left: 0;
      }
    }
  }

  .customer-anpass-text {
    margin: 30px auto;
    text-align: center;
  }

  @media screen and (max-width: 768px) {
    margin: 20px auto;
  }
}

/* お届け先 MK4CFR0A001_01 */
.customer-delivery {
  margin: 20px auto;

  .customer-delivery-list {
    border-bottom: 1px solid var(--global_clr_gray);

    .customer-delivery-list-item {
      display: flex;
      align-items: center;
      gap: 0px 10px;
      border-top: 1px solid var(--global_clr_gray);
      padding: 30px 20px;

      .customer-delivery-list-item-name {
        flex-shrink: 0;
        width: 200px;
        padding: 0px;
        background: none;

        .customer-delivery-list-item-name-note {
          font-size: var(--global_font_size_small2);
          color: var(--global_clr_darkred);
          margin: 10px 0px 0px;
          display: block;
        }
      }

      .customer-delivery-list-item-detail {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;

        dt {
          display: flex;
          justify-content: space-between;
          font-weight: normal;
          width: 90px;

          &::after {
            content: ':';
          }
        }

        dd {
          width: calc(100% - 100px);
        }
      }

      .customer-delivery-list-item-func {
        flex-shrink: 0;
        display: grid;
        justify-content: flex-end;
        gap: 15px;
        width: 300px;
        max-width: 100%;

        .cmnBtnCommon {
          /* width: 33% !important; */
          margin: 0px !important;
          height: 35px;
        }
      }
    }

    .customer-delivery-list-item--default {
      background-color: var(--global_clr_warmbeige);
    }
  }

  .customer-delivery-none {
    margin: 40px auto 80px;
  }

  /*768より前に崩れ始めるので* 900pxでブレーク */
  @media screen and (max-width: 900px) {
    width: 90%;

    .customer-delivery-list {
      .customer-delivery-list-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px 0px;

        .customer-delivery-list-item-name {
          width: 100%;

          .customer-delivery-list-item-name-note {
            br {
              display: none;
            }
          }
        }

        .customer-delivery-list-item-func {
          width: 100%;

          .customer-delivery-list-item-func-btn {
            width: fit-content !important;
            height: auto !important;
          }
        }
      }
    }
  }
}

/* ログイン履歴 */
.customer-login-history {
  width: 100%;
  margin: 20px auto;

  tr {
    th:first-child {
      width: 220px;
    }
  }

  th,
  td {
    padding: 10px;
  }

  thead {
    background-color: var(--global_clr_lightgray);
  }

  tbody {
    tr {
      border-bottom: 1px solid var(--global_clr_gray);
    }
  }

  @media screen and (max-width: 768px) {
    width: 90%;

    tr {
      th {
        font-size: var(--global_font_size_small3);
      }

      th:first-child,
      th:nth-child(2) {
        width: 100px;
      }
    }
  }
}

/* 情報リスト */
.customer-detail-list {
  width: 100%;
  margin: 20px auto;
  border-bottom: 1px solid var(--global_clr_gray);
  padding-inline-start: 0 !important;

  .customer-detail-list-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0px;
    border-top: 1px solid var(--global_clr_gray);

    .customer-detail-list-item-title {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 300px;
      font-weight: bold;
      background: none;
      padding: 5px;

      input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
      }
    }

    dl {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      dt,
      dd {
        padding: 5px;
        font-size: var(--global_font_size_small1);
        line-height: 1.75;
      }

      dt {
        font-weight: normal;
        width: 200px;
      }

      dd {
        width: calc(100% - 200px);
      }
    }
  }

  @media screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .customer-detail-list-item {
      flex-direction: column;
      gap: 0px;

      .customer-detail-list-item-title {
        width: 100%;
      }

      dl {

        dt,
        dd {
          font-size: var(--global_font_size_small3);
        }

        dt {
          width: 100px;
        }

        dd {
          width: calc(100% - 100px);
        }
      }
    }
  }
}

/* メッセージエリア */
.customer-form-message {
  max-width: 500px;
  margin: 0 auto 30px;
  min-height: 300px;

  .customer-form-message-title {
    font-size: var(--global_font_size_large9);
    font-weight: bold;
    margin: 0px 0px 20px;
    border-bottom: 1px solid var(--global_clr_black);
  }

  .customer-form-message-text {
    .customer-form-message-text-accent {
      font-weight: bold;
      font-size: var(--global_font_size_large5);
    }

    p {
      line-height: 1.75;

      &:not(:last-child) {
        margin-bottom: 1.4em;
      }
    }
  }

  @media screen and (max-width: 768px) {
    width: 90%;
    min-height: 100px;

    .customer-form-message-title {
      font-size: var(--global_font_size_large5);
      width: 100%;
    }
  }
}

/* ユーティリティ */
.utl-txt-color-red {
  color: var(--global_clr_red);
}

/* 開閉ブロック関連 */
.j-open-block-target {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.5s ease-out;
  margin: 0px 0px 10px;

  &.open {
    grid-template-rows: 1fr;
  }

  .j-open-block-target-inner {
    overflow-y: hidden;
  }
}

/* ユーティリティ */
.utl-txt-color-red {
  color: var(--global_clr_red);
}

.utl-show-non {
  opacity: 0;
  height: 0;
}

.utl-txt-center {
  text-align: center;
}

.utl-margin-top-xs {
  margin-top: 10px !important;
}

.utl-margin-top-s {
  margin-top: 20px !important;
}

.utl-margin-top-m {
  margin-top: 40px !important;
}

.utl-margin-top-l {
  margin-top: 60px !important;
}

.utl-margin-bottom-xs {
  margin-bottom: 10px !important;
}

.utl-margin-bottom-s {
  margin-bottom: 20px !important;
}

.utl-margin-bottom-m {
  margin-bottom: 40px !important;
}

.utl-margin-bottom-l {
  margin-bottom: 60px !important;
}

/* 各コンポーネント */
.mainArea {

  /* 規約同意 */
  .MK4CFR03000_01 {}
}

/* recaptcha */
.grecaptcha-badge {
  bottom: 65px !important;

  @media (max-width: 768px) {
    bottom: 125px !important;
  }
}