@charset "UTF-8";
#container.subpage .online .subpage_top .inner img {
  -o-object-position: center 75%;
     object-position: center 75%;
}

/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents .top_area .mv {
    margin: 0 auto var(--m65);
    position: relative;
    max-width: 1000px;
  }
  #container #contents .top_area .mv .flex {
    width: 42.4%;
    min-width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 5%;
    right: 4%;
  }
  #container #contents .top_area .mv .flex .fuyo {
    width: 58.2%;
  }
  #container #contents .top_area .mv .flex .free {
    width: 35%;
  }
  #container #contents .top_area .mv .main_catch {
    width: 68.3%;
    min-width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .top_area .mv .sub_catch {
    width: 47.5%;
    min-width: 280px;
    position: absolute;
    right: 2.5%;
    bottom: 5%;
  }
  #container #contents .top_area .text {
    margin-bottom: var(--m65);
    background-color: var(--brown01);
    padding: 2% 3.75%;
  }
  #container #contents .top_area .text .br {
    font-size: var(--s14_18);
    color: var(--brown04);
    line-height: 2.25;
    text-align: center;
  }
  #container #contents .top_area .emp {
    margin-bottom: var(--m65);
    font-size: var(--s18_28);
    color: var(--brown04);
    font-weight: 500;
    text-align: center;
  }
  #container #contents .detail_area {
    border: 1px solid var(--red05);
    padding: var(--s20_60) 3.75%;
    margin-bottom: var(--s20_30);
  }
  #container #contents .detail_area .tit {
    font-size: var(--s20_45);
    font-weight: 500;
    text-align: center;
    color: var(--red05);
    margin-bottom: 0.75em;
  }
  #container #contents .detail_area .top_text {
    margin-bottom: var(--m40);
  }
  #container #contents .detail_area .top_text .br {
    font-size: var(--s14_16);
  }
  #container #contents .detail_area .img {
    margin-bottom: var(--m65);
  }
  #container #contents .step_area .step_tit {
    margin-bottom: var(--m50);
    font-size: var(--s18_28);
    color: var(--brown04);
    font-weight: 500;
    text-align: center;
  }
  #container #contents .step_area .step_row {
    margin-bottom: var(--s16_28);
  }
  #container #contents .step_area .step_row dt {
    display: flex;
    align-items: center;
    grid-gap: var(--s8_16);
    margin-bottom: var(--s10_16);
  }
  #container #contents .step_area .step_row dt img {
    width: var(--s32_56);
  }
  #container #contents .step_area .step_row dt .txt {
    font-size: var(--s16_24);
    font-weight: 500;
    color: var(--brown04);
    width: calc(100% - var(--s32_56) - var(--s8_16));
    border-bottom: 2px solid var(--brown04);
  }
  #container #contents .step_area .step_row dd {
    margin-left: auto;
    width: calc(100% - var(--s32_56) - var(--s8_16));
  }
  #container #contents .step_area .step_row dd .br {
    font-size: var(--s14_16);
  }
  #container #contents .step_area .step_row .download {
    margin: var(--m24) 0;
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s16_20);
  }
  #container #contents .step_area .step_row .download .dl_img {
    display: block;
    width: 48%;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
  #container #contents .step_area .step_row .download .dl_img img {
    height: 47px;
  }
  #container #contents .other_area {
    margin-bottom: var(--m110);
    aspect-ratio: 2/1;
    background: url(/images/online_meeting/bottom_img.jpg) left center/auto 100% no-repeat;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  #container #contents .other_area::after {
    content: "";
    display: inline-block;
    width: 94%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  #container #contents .other_area .text_area {
    width: 70%;
    max-width: 620px;
    min-width: 300px;
    padding: var(--s16_24);
  }
  #container #contents .other_area .text_area .catch {
    margin-bottom: var(--s16_24);
  }
  #container #contents .other_area .text_area .catch .br {
    line-height: 2;
    font-size: var(--s18_28);
    color: var(--brown04);
    font-weight: 500;
  }
  #container #contents .other_area .text_area .check_list {
    margin-bottom: var(--m50);
  }
  #container #contents .other_area .text_area .check_list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #container #contents .other_area .text_area .check_list li:not(:last-of-type) {
    margin-bottom: var(--s16_22);
  }
  #container #contents .other_area .text_area .check_list li::before {
    content: "";
    display: inline-block;
    width: var(--s24_42);
    aspect-ratio: 1/1;
    background: url(/images/online_meeting/icon_check.svg) center/100% no-repeat;
  }
  #container #contents .other_area .text_area .check_list li .txt {
    font-size: var(--s14_18);
    width: calc(100% - var(--s24_42) - 1rem);
  }
  #container #contents .other_area .text_area .emp {
    font-size: var(--s18_28);
    color: var(--red05);
    font-weight: 500;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents .top_area .mv {
    margin: 0 auto var(--m65);
    position: relative;
    max-width: 1000px;
  }
  #container #contents .top_area .mv .flex {
    width: 42.4%;
    min-width: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 5%;
    right: 4%;
  }
  #container #contents .top_area .mv .flex .fuyo {
    width: 58.2%;
  }
  #container #contents .top_area .mv .flex .free {
    width: 35%;
  }
  #container #contents .top_area .mv .main_catch {
    width: 68.3%;
    min-width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .top_area .mv .sub_catch {
    width: 47.5%;
    min-width: 220px;
    position: absolute;
    right: 2.5%;
    bottom: 5%;
  }
  #container #contents .top_area .text {
    margin-bottom: var(--m65);
    background-color: var(--brown01);
    padding: 2% 3.75%;
  }
  #container #contents .top_area .text .br {
    font-size: var(--s14_18);
    color: var(--brown04);
    line-height: 2.25;
    text-align: center;
  }
  #container #contents .top_area .emp {
    margin-bottom: var(--m65);
    font-size: var(--s18_28);
    color: var(--brown04);
    font-weight: 500;
    text-align: center;
  }
  #container #contents .detail_area {
    border: 1px solid var(--red05);
    padding: var(--s20_60) 3.75%;
    margin-bottom: var(--s20_30);
  }
  #container #contents .detail_area .tit {
    font-size: var(--s20_45);
    font-weight: 500;
    text-align: center;
    color: var(--red05);
    margin-bottom: 0.75em;
  }
  #container #contents .detail_area .top_text {
    margin-bottom: var(--m40);
  }
  #container #contents .detail_area .top_text .br {
    font-size: var(--s14_16);
  }
  #container #contents .detail_area .img {
    margin-bottom: var(--m65);
  }
  #container #contents .step_area .step_tit {
    margin-bottom: var(--m50);
    font-size: var(--s18_28);
    color: var(--brown04);
    font-weight: 500;
    text-align: center;
  }
  #container #contents .step_area .step_row {
    margin-bottom: var(--s16_28);
  }
  #container #contents .step_area .step_row dt {
    display: flex;
    align-items: center;
    grid-gap: var(--s8_16);
    margin-bottom: var(--s10_16);
  }
  #container #contents .step_area .step_row dt img {
    width: var(--s32_56);
  }
  #container #contents .step_area .step_row dt .txt {
    font-size: var(--s16_24);
    font-weight: 500;
    color: var(--brown04);
    width: calc(100% - var(--s32_56) - var(--s8_16));
    border-bottom: 2px solid var(--brown04);
  }
  #container #contents .step_area .step_row dd {
    margin-left: auto;
    width: calc(100% - var(--s32_56) - var(--s8_16));
  }
  #container #contents .step_area .step_row dd .br {
    font-size: var(--s14_16);
  }
  #container #contents .step_area .step_row .download {
    margin: var(--m24) 0;
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s16_20);
  }
  #container #contents .step_area .step_row .download .dl_img {
    display: block;
    width: 48%;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
  #container #contents .step_area .step_row .download .dl_img img {
    height: 47px;
  }
  #container #contents .other_area {
    margin-bottom: var(--m110);
    aspect-ratio: 2/1;
    background: url(/images/online_meeting/bottom_img.jpg) left center/auto 100% no-repeat;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container #contents .other_area::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, rgb(255, 255, 255) 70%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #container #contents .other_area .text_area {
    width: 100%;
    max-width: 620px;
    min-width: 300px;
    padding: var(--s16_24);
  }
  #container #contents .other_area .text_area .catch {
    margin-bottom: var(--s16_24);
  }
  #container #contents .other_area .text_area .catch .br {
    line-height: 2;
    font-size: var(--s18_28);
    color: var(--brown04);
    font-weight: 500;
    text-align: center;
  }
  #container #contents .other_area .text_area .check_list {
    margin-bottom: var(--m50);
  }
  #container #contents .other_area .text_area .check_list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #container #contents .other_area .text_area .check_list li:not(:last-of-type) {
    margin-bottom: var(--s16_22);
  }
  #container #contents .other_area .text_area .check_list li::before {
    content: "";
    display: inline-block;
    width: var(--s24_42);
    aspect-ratio: 1/1;
    background: url(/images/online_meeting/icon_check.svg) center/100% no-repeat;
  }
  #container #contents .other_area .text_area .check_list li .txt {
    font-size: var(--s14_18);
    width: calc(100% - var(--s24_42) - 1rem);
  }
  #container #contents .other_area .text_area .emp {
    font-size: var(--s18_28);
    color: var(--red05);
    font-weight: 500;
    text-align: center;
  }
}
/* ----------------------------------------------
  SP設定
  ------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .top_area .text .br {
    text-align: left;
  }
  #container #contents .detail_area .top_text .br {
    text-align: left;
  }
  #container #contents .other_area .text_area .catch .br {
    display: inline;
  }
}