@charset "UTF-8";
@import url(/css/root.css);
#container.under_page .topImage02 h1 .right .top {
  padding-left: 0;
}
#container.under_page .topImage02 h1 .right .top .yellow {
  color: var(--yellow02);
}

/* チャット風アクション用 */
.chat_row {
  display: none; /* 初期状態では非表示 */
  transition: all 1s;
  opacity: 0;
  transform: translateX(10%);
}

.reply_chat {
  display: none;
  transition: all 1s;
  opacity: 0;
  transform: translateX(-10%);
}

.chat_row:first-child {
  display: block; /* 最初のチャット行は表示 */
  opacity: 1;
  transform: translateX(0);
}

.block {
  display: block;
}

.block02 {
  transform: translateX(0);
  opacity: 1;
}

/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container.under_page .topImage02 figure img {
    transform: translateY(10%);
  }
  #container #contents {
    margin-bottom: var(--s32_48);
  }
  #container #contents .matching_detail .obi {
    font-size: var(--s18_22);
    padding: 0.5em 1em;
    margin-bottom: 1em;
  }
  #container #contents .matching_detail .obi.orange {
    background-color: rgba(251, 176, 59, 0.6);
    border-left: var(--s6_10) solid var(--orange03);
  }
  #container #contents .matching_detail .text {
    margin-bottom: var(--s32_48);
    padding: 0 1em;
  }
  #container #contents .matching_detail .text .br {
    line-height: 1.7;
    font-size: var(--s14_16);
  }
  #container #contents .matching_detail .text .br .emphasize {
    font-size: var(--s16_18);
    color: var(--orange03);
  }
  #container #contents .matching_detail .form_section form .form_area {
    box-shadow: 3px 3px 5px rgba(187, 187, 187, 0.75);
    padding: var(--s16_32) var(--s16_32);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat {
    border-radius: 15px;
    padding: var(--s16_24);
    width: 53%;
    min-width: 400px;
    margin-left: auto;
    margin-bottom: var(--s16_32);
    box-shadow: 3px 3px 5px rgba(187, 187, 187, 0.75);
    background-color: var(--green09);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .text_area {
    margin-bottom: var(--s16_20);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .text_area .br {
    font-size: var(--s14_16);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box input[type=text], #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box input[type=tel], #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box input[type=email] {
    padding: 0.5rem;
    background-color: #fff;
    width: 100%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.last input {
    margin-bottom: 1rem;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label {
    width: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #fff;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label:not(:has(.rdo)) {
    position: relative;
    z-index: 1;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label:not(:has(.rdo)) .bg {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: background-color 0.5s;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label:not(:has(.rdo)) .inp_rdo:checked + .bg {
    background-color: var(--yellow02);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.flex {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s4_8);
    align-items: stretch;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.flex label:has(input[type=radio]) {
    width: calc(50% - var(--s4_8) / 2);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label {
    margin-bottom: var(--s4_8);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) {
    flex-wrap: wrap;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) .txt {
    width: 30%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) input {
    width: calc(70% - 0.5rem);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) small {
    width: 100%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.last .inp_bt {
    margin-top: var(--s16_20);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .reply_chat {
    border-radius: 15px;
    padding: var(--s16_24);
    width: 53%;
    margin-bottom: var(--s16_32);
    box-shadow: 3px 3px 5px rgba(187, 187, 187, 0.75);
    background-color: var(--blue03);
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents {
    margin-bottom: var(--s32_48);
  }
  #container #contents .matching_detail .obi {
    font-size: var(--s18_22);
    padding: 0.5em 1em;
    margin-bottom: 1em;
  }
  #container #contents .matching_detail .obi.orange {
    background-color: rgba(251, 176, 59, 0.6);
    border-left: var(--s6_10) solid var(--orange03);
  }
  #container #contents .matching_detail .text {
    margin-bottom: var(--s32_48);
    padding: 0 1em;
  }
  #container #contents .matching_detail .text .br {
    line-height: 1.7;
    font-size: var(--s14_16);
  }
  #container #contents .matching_detail .text .br .emphasize {
    font-size: var(--s16_18);
    color: var(--orange03);
  }
  #container #contents .matching_detail .form_section form .form_area {
    box-shadow: 3px 3px 5px rgba(187, 187, 187, 0.75);
    padding: var(--s16_32) var(--s16_32);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat {
    border-radius: 15px;
    padding: var(--s16_24);
    width: 95%;
    margin-left: auto;
    margin-bottom: var(--s16_32);
    box-shadow: 3px 3px 5px rgba(187, 187, 187, 0.75);
    background-color: var(--green09);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .text_area {
    margin-bottom: var(--s16_20);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .text_area .br {
    font-size: var(--s14_16);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box input[type=text], #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box input[type=tel], #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box input[type=email] {
    padding: 0.5rem;
    background-color: #fff;
    width: 100%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.last input {
    margin-bottom: 1rem;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label {
    width: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #fff;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label:not(:has(.rdo)) {
    position: relative;
    z-index: 1;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label:not(:has(.rdo)) .bg {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: background-color 0.5s;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.last) label:not(:has(.rdo)) .inp_rdo:checked + .bg {
    background-color: var(--yellow02);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.flex {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s4_8);
    align-items: stretch;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.flex label:has(input[type=radio]) {
    width: calc(50% - var(--s4_8) / 2);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label {
    margin-bottom: var(--s4_8);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) {
    flex-wrap: wrap;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) .txt {
    width: 30%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) input {
    width: calc(70% - 0.5rem);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box:not(.flex) label:has(small) small {
    width: 100%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.last .inp_bt {
    margin-top: var(--s16_20);
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row .reply_chat {
    border-radius: 15px;
    padding: var(--s16_24);
    width: 95%;
    margin-bottom: var(--s16_32);
    box-shadow: 3px 3px 5px rgba(187, 187, 187, 0.75);
    background-color: var(--blue03);
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .matching_detail .form_section form .form_area .chat_row .input_chat .input_box.flex label:has(input[type=radio]) {
    width: 100%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row#last .input_chat .input_box:not(.flex) label {
    flex-wrap: wrap;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row#last .input_chat .input_box:not(.flex) label .txt {
    width: 100%;
  }
  #container #contents .matching_detail .form_section form .form_area .chat_row#last .input_chat .input_box:not(.flex) label input {
    width: 100%;
  }
}