@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/********************************************************

setting

********************************************************/
:root {
  --margin-block: 200px; }

@media (min-width: 1101px) and (max-width: 1280px) {
  :root {
    --margin-block: 120px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  :root {
    --margin-block: 90px; } }
@media (max-width: 640px) {
  :root {
    --margin-block: 70px; } }
.rough {
  background: url("../images/online/online-meeting.jpg") no-repeat center;
  height: 4526px; }

.page_online .cv {
  width: min(90%, 1240px);
  margin: calc( var(--margin-block) / 2 ) auto 0;
  transition: filter 0.3s ease; }
  .page_online .cv:hover {
    filter: brightness(1.3); }

.page_online .mv_pc {
  position: relative;
  background: url("../images/online/img_mv.jpg") no-repeat center;
  height: 470px;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 600px) {
    .page_online .mv_pc {
      display: none; } }
  .page_online .mv_pc .mv_h2 {
    width: min(30%, 500px); }
.page_online .mv_sp {
  display: none; }
  @media screen and (max-width: 600px) {
    .page_online .mv_sp {
      display: block; } }

.page_online .intro {
  background: #FFF;
  padding: calc( var(--margin-block) / 2 ) 0; }
  .page_online .intro .h3_title {
    text-align: center;
    color: #1f4688;
    font-size: 24px;
    margin-bottom: calc( var(--margin-block) / 4 ); }
    @media screen and (min-width: 750px) {
      .page_online .intro .h3_title {
        font-size: calc(24px + 0.0136752137 * (100vw - 750px)); } }
    @media screen and (min-width: 1920px) {
      .page_online .intro .h3_title {
        font-size: 40px; } }
  .page_online .intro .h3_text {
    text-align: center;
    font-size: 14px;
    line-height: 2.5; }
    @media screen and (min-width: 750px) {
      .page_online .intro .h3_text {
        font-size: calc(14px + 0.0034188034 * (100vw - 750px)); } }
    @media screen and (min-width: 1920px) {
      .page_online .intro .h3_text {
        font-size: 18px; } }
    @media screen and (max-width: 600px) {
      .page_online .intro .h3_text {
        text-align: left;
        line-height: 2.0;
        width: 90%;
        margin: 0 auto; } }

.page_online .point {
  background: #FFF;
  text-align: center; }
  @media screen and (max-width: 600px) {
    .page_online .point {
      background: #f0f6fa;
      padding-top: 50px; } }
  .page_online .point .point_title {
    display: inline-block;
    font-size: 20px;
    color: #1f4688;
    position: relative;
    padding: 0 4rem; }
    @media screen and (min-width: 750px) {
      .page_online .point .point_title {
        font-size: calc(20px + 0.0085470085 * (100vw - 750px)); } }
    @media screen and (min-width: 1920px) {
      .page_online .point .point_title {
        font-size: 30px; } }
    @media screen and (max-width: 600px) {
      .page_online .point .point_title {
        width: 90%;
        margin: 0 auto;
        padding: 0 2rem;
        line-height: 1.4; } }
    .page_online .point .point_title::before, .page_online .point .point_title::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 1.2em;
      height: 2px;
      background-color: #1f4688;
      transform-origin: center; }
    .page_online .point .point_title::before {
      left: 0;
      transform: translateY(-50%) rotate(45deg); }
      @media screen and (max-width: 600px) {
        .page_online .point .point_title::before {
          transform: translateY(-50%) rotate(60deg); } }
    .page_online .point .point_title::after {
      right: 0;
      transform: translateY(-50%) rotate(-45deg); }
      @media screen and (max-width: 600px) {
        .page_online .point .point_title::after {
          transform: translateY(-50%) rotate(-60deg); } }
  .page_online .point .point_wrap {
    background: #f0f6fa;
    margin-top: 250px;
    padding-bottom: var(--margin-block); }
    @media screen and (max-width: 600px) {
      .page_online .point .point_wrap {
        margin-top: 50px; } }
  .page_online .point .point_group {
    width: min(90%, 1240px);
    margin: 0 auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .page_online .point .point_group .point_item {
      width: min(29.5%, 362px);
      margin-top: -200px; }
      @media screen and (max-width: 600px) {
        .page_online .point .point_group .point_item {
          width: 100%;
          margin: 0 auto 70px; } }

.page_online .flow {
  background: url("../images/online/bg_flow.jpg") no-repeat center;
  background-size: cover;
  padding: var(--margin-block) 0; }
  .page_online .flow .flow_title {
    text-align: center;
    font-size: 18px;
    color: #1f4688;
    margin-bottom: calc( var(--margin-block) / 2 ); }
    @media screen and (min-width: 750px) {
      .page_online .flow .flow_title {
        font-size: calc(18px + 0.0102564103 * (100vw - 750px)); } }
    @media screen and (min-width: 1920px) {
      .page_online .flow .flow_title {
        font-size: 30px; } }
    @media screen and (max-width: 600px) {
      .page_online .flow .flow_title {
        margin-bottom: 0; } }
  .page_online .flow .flow_group {
    width: min(90%, 1240px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .page_online .flow .flow_group .flow_item {
      width: min(48%, 595px); }
      @media screen and (max-width: 600px) {
        .page_online .flow .flow_group .flow_item {
          width: 100%; } }
      .page_online .flow .flow_group .flow_item:nth-child(odd) {
        margin-top: 0; }
        @media screen and (max-width: 600px) {
          .page_online .flow .flow_group .flow_item:nth-child(odd) {
            margin-top: calc(var(--margin-block) / 2); } }
      .page_online .flow .flow_group .flow_item:nth-child(even) {
        margin-top: calc(var(--margin-block) / 1.6); }
        @media screen and (max-width: 600px) {
          .page_online .flow .flow_group .flow_item:nth-child(even) {
            margin-top: calc(var(--margin-block) / 2); } }