@charset "UTF-8";

.column2506_pc-only {
  display: block !important;
}
.column2506_pc-only_inline {
  display: inline-block !important;
}
.column2506_sp-only {
  display: none !important;
}
.column2506_sp-only_inline {
  display: none !important;
}
.column2506_sp-only_499 {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .column2506_pc-only {
    display: none !important;
  }
  .column2506_pc-only_inline {
    display: none !important;
  }
  .column2506_sp-only {
    display: block !important;
  }
  .column2506_sp-only_inline {
    display: inline-block !important;
  }
}
@media screen and (max-width: 499px) {
  .column2506_sp-only_499 {
    display: block !important;
  }
}



#column2506 {
  padding-bottom: 50px;

  .column2506_img {
    width: 100%;
    vertical-align: bottom;
  }

  .mt0 {
    margin-top: 0;
  }

  .column2506_indent {
    text-indent: 1em;
  }

  .column2506_text_red {
    font-weight: 700;
    color: #e60012;
  }

  .column2506_body_anno_mark {
    vertical-align: super;
    font-size: 0.6em;
  }

  .column2506_text_small {
    font-size: 0.6em;
  }

  .column2506_dash {
    letter-spacing: -0.05em;
  }

  .column2506_nowrap {
    white-space: nowrap;
  }



  .column2506_wrap {
    margin-bottom: 160px;
  }
  @media screen and (max-width: 768px) {
    .column2506_wrap {
      margin-bottom: 80px;
    }
  }

  .column2506_sub-title_box {
    margin-bottom: 40px;
  }
  @media screen and (max-width: 768px) {
    .column2506_sub-title_box {
      margin-bottom: 30px;
    }
  }

  .column2506_sub-title_text {
    line-height: 1.5;
  }

  .column2506_text_big {
    font-size: 1.6em;
  }

  .column2506_intro {
    margin-bottom: 115px;

    .column2506_visual_box {
      .column2506_img {
        border: 1px solid #c8c8c8;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_intro {
      margin-bottom: 50px;
    }
  }

  .column2506_visual_box {
    margin-bottom: 48px;

    &.column2506_flex {
      display: flex;
      justify-content: center;

      .column2506_visual_small_box {
        width: 572px;
      }
    }

    &.column2506_img_box {
      margin-top: 40px;
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_visual_box {
      margin-bottom: 16px;
    }
  }

  .c-figure__caption {
    &.column2506__caption {
      display: block;
      width: 100%;
      text-align: justify;
      color: #808080;
      font-size: 12px;
      line-height: 1.74;
      letter-spacing: .03em;

      &.column2506__caption_title {
        font-weight: 600;  
      }
    }
  }

  .column2506_body_text {
    color: #000;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: justify;

    &+.column2506_body_text {
      margin-top: 0;
    }

    &.column2506_intro_text {
      font-weight: 600;
    }
  }

  .column2506_contents_box {
    .column2506_title {
      color: #000;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.05em;
      border-bottom: 1px solid #C8C8C8;
      padding-bottom: 24px;
      margin-bottom: 48px;

      &::after,
      &::before {
        content: none;
      }

      .column2506_title_deco {
        /* padding: 0 1em; */
        font-weight: 700;
        line-height: 1.44;
        display: block;
        position: relative;

        &.column2506_flex {
          display: flex;
          column-gap: 0.5em;
        }
    
        .column2506_title_deco_headmark {
          font-size: 0.5em;
          letter-spacing: 0.1em;
          display: flex;
          align-items: center;
          color: #fff;
          border: 1px solid #E60012;
          background-color: #E60012;
          border-radius: 5px;
          padding: 0.01em 0.5em;
          white-space: nowrap;
        } 
      }
      @media screen and (max-width: 768px) {
        .column2506_title_deco {
          &.column2506_flex {
            flex-direction: column;
            padding-right: 0;
            letter-spacing: 0.05em;
          }
          
          .column2506_title_deco_headmark {
            font-size: 0.7em;
            width: fit-content;
            margin-bottom: 0.3em;
          }
        }
      }  
    }
    @media screen and (max-width: 768px) {
      .column2506_title {
        font-size: 1.44rem;
        padding-bottom: 12px;
        margin-bottom: 30px;
      }
    }
  }

  .column2506_contents_body_box {
    font-size: 1rem;
    margin-bottom: 2em;
  }

  .column2506_btn_box {
    width: min-content;
    background-color: #000;
    border: 1px solid #000;
    margin-inline: auto;
    position: relative;
    transition: 0.3s;

    &.column2506_btn_red {
      background-color: #e60012;
      border: 1px solid #e60012;

      &:hover {
        background-color: #fff;

        .column2506_btn_link {
          color: #e60012;
        }

        &::before {
          border-top: 1px solid #e60012;
          border-right: 1px solid #e60012;
        }
      }
    }

    &::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      right: 15px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      translate: 0 -50%;
      rotate: 45deg;
      transition: 0.3s;
    }

    &:hover {
      background-color: #fff;

      .column2506_btn_link_text {
        color: #000;
      }

      &::before {
        border-top: 1px solid #000;
        border-right: 1px solid #000;
      }
    }

    .column2506_btn_link {
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 336px;
      padding-block: 0.6em;
      transition: 0.3s;
      min-height: 50px;

      /* NOTE:自動で挿入されるマークを消す */
      &::after {
        content: none;
      }

      .column2506_btn_link_text {
        line-height: 1.5;
        transition: 0.3s;
      }
    }
    @media screen and (max-width: 768px) {
      .column2506_btn_link {
        min-width: 325px;
        min-height: 45.3px;
        font-size: 0.82rem;
      }
    }
  }

  .column2506_btn_box_before_text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1em;
  }

  /***** プロフィール *****/
  .column2506_content_profile_warp {
    margin-bottom: 120px;
  }
  @media screen and (max-width: 768px) {
    .column2506_content_profile_warp {
      margin-bottom: 80px;
    }
  }

  .column2506_content_profile {
    margin-bottom: 34px;

    &.column2506_grid {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto 1fr;
      grid-template-areas:
      "item-01 item-02"
      "item-01 item-03"
      "item-01 item-04";
      column-gap: 2.4em;

      .column2506_content_profile_img_box {
        grid-area: item-01;
        width: 150px;
      }

      .column2506_content_profile_subheading_box {
        grid-area: item-02;
        font-size: min(1.2em, 16px);
        /* font-weight: 600; */
        /* border-bottom: 1px solid #c8c8c8; */
        padding: 0.1em 0.6em;
        height: fit-content;
        width: fit-content;
        background-color: #f3f3f3;
        border-radius: 5px;
      }
      @media screen and (max-width: 768px) {
        .column2506_content_profile_subheading_box {
          font-size: min(1em, 14px);
        }
      }

      .column2506_content_profile_school_box {
        grid-area: item-03;
        font-size: min(1.2em, 16px);
        line-height: 1.4;
        padding-top: 0.8em;
      }
      @media screen and (max-width: 499px) {
        .column2506_content_profile_school_box {
          padding-top: 0.4em;
        }
      }

      .column2506_content_profile_name_box {
        grid-area: item-04;
        font-size: min(2em, 25.6px);
        font-weight: 600;
        line-height: 1;
        padding-top: 0.3em;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_content_profile {
      /* padding: 1em; */
      margin-bottom: 30px;

      &.column2506_grid {
        column-gap: 1em;

        .column2506_content_profile_img_box {
          width: fit-content;
          max-width: 100px;
        }

        .column2506_content_profile_name_box {
          font-size: min(1.8em, 22.4px);
          font-weight: 600;

          .column2506_content_profile_name_small {
            font-size: 0.6em;
          }
        }
      }
    }
  }

  .column2506_contents_sub-sub-heading_box {
    margin-bottom: 120px;
  }
  @media screen and (max-width: 768px) {
    .column2506_contents_sub-sub-heading_box {
      margin-bottom: 80px;
    }
  }

  .column2506_content_comment {
    .column2506_content_title {
      position: relative;
      border: 1px solid #E60012;;
      margin-bottom: 40px;

      .column2506_content_title_text {
        font-size: 1.8em;
        font-weight: 600;
        color: #E60012;
        line-height: 1.5;
        padding: 0.6em 0.7em;
      }
    }
    @media screen and (max-width: 768px) {
      .column2506_content_title {
        margin-bottom: 30px;

        .column2506_content_title_text {
          font-size: 1.6em;
          padding: 0.4em 0.7em;
        }
      }
    }

    .column2506_body_text {
      margin-bottom: 120px;
      position: relative;

      &.mb0 {
        margin-bottom: 0;
      }
    }
    @media screen and (max-width: 768px) {
      .column2506_body_text {
        margin-bottom: 80px;
      }
    }
  }

  .column2506_visual_box_container {
    &:not(:nth-last-of-type(-n+2)) { /* 戻るボタン（div）があるため */
      margin-bottom: 8em;
      position: relative;

      &::before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #c8c8c8;
        position: absolute;
        bottom: -3.7em; /* テキストの下に空きスペースができてしまうため少しずらしている */
        left: 0;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_visual_box_container {
      &:not(:nth-last-of-type(-n+2)) {
        margin-bottom: 5em;

        &::before {
          bottom: -2.2em;
        }
      }
    }
  }
}



#p-worldnews-2506 {
  .column2506_visual_box {
    &.column2506_flex {
      display: flex;
      margin-bottom: 0;
      
      .column2506_img {
        border: none;
        
        &:first-of-type {
          width: 63.75%;
        }
        &:nth-of-type(2) {
          width: 36.25%;
        }
      }
    }
    @media screen and (max-width: 768px) {
      &.column2506_flex {
        flex-direction: column;

        .column2506_img {
          &:first-of-type {
            width: 100%;
          }
          &:nth-of-type(2) {
            width: 100%;
          }
        }
      }
    }
  }

  .column2506_btn_box {
    margin-top: 8em;
  }
  @media screen and (max-width: 768px) {
    .column2506_btn_box {
      margin-top: 4em;
    }
  }
}



#p-topics-2506 {
  .column2506_contents_intro {
    margin-bottom: 12em;
  }
  @media screen and (max-width: 768px) {
    .column2506_contents_intro {
      margin-bottom: 6em;
    }
  }

  .column2506_visual_box {
    .column2506_visual_box_comics {
      width: 50%;
      max-width: 500px;
      margin-inline: auto;

      &.column2506_flex {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_visual_box {
      margin-bottom: 3em;

      .column2506_visual_box_comics {
        width: 100%;
        max-width: 420px;

        &.column2506_flex {
          row-gap: 10px;
        }
      }
    }
  }

  .column2506_content_profile_warp:not(:last-of-type) {
    position: relative;
    margin-bottom: 240px;

    &::before {
      content: "";
      width: 100%;
      height: 1px;
      /* background-color: #c8c8c8; */
      background-color: #e60012;
      position: absolute;
      bottom: -120px;
      left: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_content_profile_warp:not(:last-of-type) {
      margin-bottom: 160px;
  
      &:not(:last-of-type)::before {
        bottom: -80px;
      }
    }
  }
}



#p-special-2506 {
  @media screen and (max-width: 768px) {
    .column2506_intro {
      padding-bottom: 16px;
    }
  }

  .column2506_contents_box {
    margin-bottom: 160px;

    &.column2506_contents_box_underline {
      padding-bottom: 100px;
      border-bottom: 1px solid #c8c8c8;
      margin-bottom: -60px;
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_contents_box {
      margin-bottom: 100px;

      &.column2506_contents_box_underline {
        padding-bottom: 80px;
        margin-bottom: 0px;
      }
    }

    .column2506_visual_box + .column2506_visual_box {
      margin-top: 32px;
    }
  }

  .column2506_contents_other_box {
    display: flex;
    column-gap: 50px;
    flex-direction: column;

    .column2506_contents_other_img {
      width: 50vw;
      max-width: 572px;
      align-self: center;
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_contents_other_box {
      margin-bottom: 1em;

      .column2506_contents_other_img {
        width: 100%;
      }
    }
  }
}



:root {
  --btn-color-01: #72b1e4;
  --btn-color-02: #6faf72;
  --btn-color-03: #d3787e;
  --btn-color-04: #ae70a7;
  --btn-color-05: #47B2E8;
  --btn-color-06: #41B06E;
  --btn-color-07: #fff;
}

#p-areanews-2506 {
  .column2506_area-select_title_box {
    width: 100%;
    background-color: #f3f3f3;
    margin-bottom: 30px;
  }
  @media screen and (max-width: 768px) {
    .column2506_area-select_title_box {
      margin-bottom: 25px;
    }
  }

  .column2506_area-select_title_text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.6em 1em;
  }
  @media screen and (max-width: 768px) {
    .column2506_area-select_title_text {
      font-size: 1.1rem;
    }
  }

  .column2506_area-select_btn-box {
    margin-bottom: 160px;
  }
  @media screen and (max-width: 768px) {
    .column2506_area-select_btn-box {
      margin-bottom: 80px;
    }
  }

  .column2506_area-select_ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    justify-content: center;
  }
  /* @media screen and (max-width: 768px) {
    .column2506_area-select_ul {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
  } */
  @media screen and (max-width: 499px) {
    .column2506_area-select_ul {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .column2506_area-select_li {
    margin: 0;
    padding: 0;
    border-radius: 8px;
    transition: all 0.3s;
    position: relative;

    &::after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      right: 15px;
      translate: 0 -65%;
      border-bottom: 2px solid #fff;
      border-right: 2px solid #fff;
      rotate: 45deg;
      transition: all 0.3s;
    }

    &:first-of-type {
      background-color: var(--btn-color-01);
      border: 1px solid var(--btn-color-01);
    }

    &:nth-of-type(2) {
      background-color: var(--btn-color-02);
      border: 1px solid var(--btn-color-02);
    }

    &:nth-of-type(3) {
      background-color: var(--btn-color-03);
      border: 1px solid var(--btn-color-03);
    }

    &:nth-of-type(4) {
      background-color: var(--btn-color-04);
      border: 1px solid var(--btn-color-04);
    }

    &:nth-of-type(5) {
      background-color: var(--btn-color-05);
      border: 1px solid var(--btn-color-05);
    }

    &:nth-of-type(6) {
      background-color: var(--btn-color-06);
      border: 1px solid var(--btn-color-06);
    }

    &:nth-of-type(7) {
      background-color: var(--btn-color-07);
      border: 1px solid var(--btn-color-07);
    }

    &:hover {
      background-color: #fff;

      &:first-of-type {
        &::after {
          border-bottom: 2px solid var(--btn-color-01);
          border-right: 2px solid var(--btn-color-01);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-01);
        }
      }

      &:nth-of-type(2) {
        &::after {
          border-bottom: 2px solid var(--btn-color-02);
          border-right: 2px solid var(--btn-color-02);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-02);
        }
      }

      &:nth-of-type(3) {
        &::after {
          border-bottom: 2px solid var(--btn-color-03);
          border-right: 2px solid var(--btn-color-03);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-03);
        }
      }

      &:nth-of-type(4) {
        &::after {
          border-bottom: 2px solid var(--btn-color-04);
          border-right: 2px solid var(--btn-color-04);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-04);
        }
      }

      &:nth-of-type(5) {
        &::after {
          border-bottom: 2px solid var(--btn-color-05);
          border-right: 2px solid var(--btn-color-05);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-05);
        }
      }

      &:nth-of-type(6) {
        &::after {
          border-bottom: 2px solid var(--btn-color-06);
          border-right: 2px solid var(--btn-color-06);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-06);
        }
      }

      &:nth-of-type(7) {
        &::after {
          border-bottom: 2px solid var(--btn-color-07);
          border-right: 2px solid var(--btn-color-07);
        }

        .column2506_area-select_btn-link {
          color: var(--btn-color-07);
        }
      }
    }

    &::before {
      content: none;
    }
  }

  .column2506_area-select_btn-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 1.2em;
    transition: all 0.3s;
  }

  .column2506_contents_sub-box {
    margin-bottom: 160px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .column2506_contents_sub-box {
      margin-bottom: 100px;
    }
  }

  .column2506_body_text_areanews {
    margin-bottom: 2em;
  }

  .column2506_back-top_btn-box {
    &.column2506_flex {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .column2506_back-top_btn-text {
      display: inline-block;
      color: #000;
      font-size: 1rem;
      font-weight: 600;
      text-align: right;
      text-decoration: none;
      transition: all 0.3s;
      position: relative;
  
      &::after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #000;
        position: absolute;
        bottom: 0.1em;
        right: 0;
        transition: all 0.3s;
      }
    }

    .column2506_back-top_btn-arrow {
      position: relative;
      font-size: 1rem;
      padding-right: 1.5em;
  
      &::after {
        content: "";
        display: inline-block;
        width: 0.6em;
        height: 0.6em;
        position: absolute;
        top: 50%;
        right: 0.2em;
        translate: 0 -25%;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
        rotate: 45deg;
        transition: all 0.3s;
      }
    }

    &:hover {
      .column2506_back-top_btn-text {
        color: #808080;

        &::after {
          background-color: #808080;
        }
      }
      
      .column2506_back-top_btn-arrow {
        &::after {
          border-top: 2px solid #808080;
          border-left: 2px solid #808080;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .column2506_visual_box {
      &.column2506_areanews {
        margin-bottom: 22px;
      }
    }
  }

  .column2506_title_area_glid {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 8px;

    &::after {
      content: none;
    }
  }

  .column2506_title_area_box {
    display: grid;
    place-content: center;
    border-radius: 5px;
    width: fit-content;

    &.column2506_area_01 {
      background-color: var(--btn-color-01);
    }
    
    &.column2506_area_02 {
      background-color: var(--btn-color-02);
    }

    &.column2506_area_03 {
      background-color: var(--btn-color-03);
    }

    &.column2506_area_04 {
      background-color: var(--btn-color-04);
    }

    &.column2506_area_05 {
      background-color: var(--btn-color-05);
    }

    &.column2506_area_06 {
      background-color: var(--btn-color-06);
    }

    &.column2506_area_07 {
      background-color: var(--btn-color-07);
    }
  }

  .column2506_title_area_text {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: 0.4em 2em;
  }
  @media screen and (max-width: 768px) {
    .column2506_title_area_text {
      font-size: 14px;
    }
  }
}