/*! Writen  by SCSS */
.ttl_wrap .ttl {
  margin-bottom: 110px; }
  @media screen and (max-width: 480px) {
    .ttl_wrap .ttl {
      margin-bottom: 50px; } }
.ttl_wrap .sec_sub {
  /*font-size: clamp(23px, calc(33vw / 12), 33px);
  letter-spacing: 0.28em;
  line-height: 1.8;*/
  margin-bottom: 25px;
  text-align: center; }
  @media screen and (max-width: 480px) {
    .ttl_wrap .sec_sub {
      /* font-size: clamp(15px, calc(23vw / 4.8), 23px);
       letter-spacing: 0.2em;
       line-height: 1.6;*/
      margin-bottom: 25px;
      margin-right: -20px;
      margin-left: -20px; } }
.ttl_wrap .sec_read {
  /*font-size: clamp(13px, calc(18vw / 12), 18px);
  letter-spacing: 0.05em;
  line-height: 2.3;*/
  text-align: center; }
  @media screen and (max-width: 480px) {
    .ttl_wrap .sec_read {
      margin-right: -20px;
      margin-left: -20px; } }

.inner {
  width: calc(100% - 40px);
  padding: 0;
  box-sizing: border-box; }

.sec .main_copy {
  font-size: clamp(23px, calc(33vw / 12), 33px);
  letter-spacing: 0.28em;
  line-height: 1.8;
  margin-bottom: 30px;
  text-align: center; }
  @media screen and (max-width: 480px) {
    .sec .main_copy {
      font-size: clamp(15px, calc(23vw / 4.8), 23px);
      letter-spacing: 0.2em;
      line-height: 1.6;
      margin-bottom: 25px; } }
.sec .main_read {
  font-size: clamp(12px, calc(15vw / 12), 15px);
  letter-spacing: 0.05em;
  line-height: 2.5;
  text-align: center; }

.sec01 .sec01_top_image {
  position: relative;
  z-index: 2; }
.sec01 .sec01_bg_wrap {
  padding-top: 110px;
  background: #eeeeee;
  position: relative; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_bg_wrap {
      padding-top: 80px; } }
  .sec01 .sec01_bg_wrap .outer_image {
    max-width: 1600px;
    margin: 0 auto; }
    .sec01 .sec01_bg_wrap .outer_image .t_cap_b_l {
      left: auto;
      right: 20.63%;
      bottom: 3.45%;
      bottom: 0;
      text-align: right; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_bg_wrap .outer_image .t_cap_b_l {
          left: auto;
          right: calc(5% + 10px);
          bottom: 1%;
          bottom: 3px;
          text-align: right; } }
  .sec01 .sec01_bg_wrap .text_box {
    position: absolute;
    max-width: 1200px;
    width: 100%;
    left: 23.44%;
    top: 23.57%; }
    @media screen and (max-width: 1600px) {
      .sec01 .sec01_bg_wrap .text_box {
        left: calc((100% - 860px) / 2); } }
    @media screen and (max-width: 900px) {
      .sec01 .sec01_bg_wrap .text_box {
        left: 20px; } }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_bg_wrap .text_box {
        margin-bottom: 30px;
        position: static;
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto; } }
    .sec01 .sec01_bg_wrap .text_box .box_head {
      max-width: 375px;
      width: 31.25%;
      margin-bottom: 4.17%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_bg_wrap .text_box .box_head {
          max-width: none;
          width: 100%;
          margin-bottom: 30px; } }
    .sec01 .sec01_bg_wrap .text_box .box_text {
      max-width: 338px;
      width: 28.17%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_bg_wrap .text_box .box_text {
          max-width: none;
          width: 100%; } }

.sec02 {
  background: #141514;
  color: #fff;
  padding-top: 170px;
  padding-bottom: 200px; }
  @media screen and (max-width: 480px) {
    .sec02 {
      padding-top: 80px;
      padding-bottom: 120px; } }
  .sec02 .sec02_head {
    text-align: center;
    margin-bottom: 45px; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_head {
        margin-bottom: 20px; } }
    .sec02 .sec02_head img {
      margin-left: auto;
      margin-right: auto; }
  .sec02 .sec02_wrap {
    max-width: 740px;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_wrap {
        flex-direction: column;
        gap: 25px 0;
        justify-content: center;
        margin-top: 60px; } }
    .sec02 .sec02_wrap .text_box {
      max-width: 375px;
      width: 50.68%; }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap .text_box {
          max-width: none;
          width: 100%; } }
    .sec02 .sec02_wrap .image_box {
      position: relative;
      max-width: 320px;
      width: 43.25%; }
      .sec02 .sec02_wrap .image_box .icon_later {
        position: absolute;
        max-width: 98px;
        width: 30.63%;
        right: -19.68%;
        bottom: -25.23%; }
        @media screen and (max-width: 480px) {
          .sec02 .sec02_wrap .image_box .icon_later {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            margin: auto; } }
      .sec02 .sec02_wrap .image_box .t_cap {
        bottom: -18px;
        right: 0; }
  .sec02 .sec02_outer_top {
    margin-bottom: 250px; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_outer_top {
        margin-bottom: 120px; } }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_outer_top .sec02_wrap .image_box {
        width: 70%; } }
  @media screen and (max-width: 480px) {
    .sec02 .sec02_outer_bottom .sec02_wrap .image_box {
      max-width: none;
      width: 65%;
      margin: 0 auto; } }

.sec03 {
  background: #eeeeee;
  position: relative;
  padding-top: 70px;
  padding-bottom: 180px; }
  @media screen and (max-width: 480px) {
    .sec03 {
      padding-top: 30px;
      padding-bottom: 100px; } }
  .sec03 .inner {
    position: relative;
    z-index: 2; }
    .sec03 .inner .sec03_lead_wrap {
      margin-bottom: 100px; }
      @media screen and (max-width: 480px) {
        .sec03 .inner .sec03_lead_wrap {
          margin-bottom: 60px; } }
      .sec03 .inner .sec03_lead_wrap .sec_head {
        margin-bottom: 50px; }
        @media screen and (max-width: 480px) {
          .sec03 .inner .sec03_lead_wrap .sec_head {
            margin-bottom: 25px; } }
    .sec03 .inner .sec03_1_wrap {
      max-width: 860px;
      margin: 0 auto 80px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      @media screen and (max-width: 480px) {
        .sec03 .inner .sec03_1_wrap {
          flex-direction: column;
          gap: 25px 0;
          justify-content: center;
          margin-bottom: 60px; } }
      .sec03 .inner .sec03_1_wrap .text_box {
        max-width: 350px;
        width: 40.7%; }
        @media screen and (max-width: 480px) {
          .sec03 .inner .sec03_1_wrap .text_box {
            max-width: none;
            width: 100%; } }
      .sec03 .inner .sec03_1_wrap .image_box {
        position: relative;
        max-width: 450px;
        width: 52.33%; }
        @media screen and (max-width: 480px) {
          .sec03 .inner .sec03_1_wrap .image_box {
            width: 80%;
            margin: 0 auto; } }
    .sec03 .inner .sec03_wrap {
      max-width: 830px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 480px) {
        .sec03 .inner .sec03_wrap {
          align-items: center;
          width: calc(100% + 40px);
          margin: 0 -10px 0 -30px; } }
      .sec03 .inner .sec03_wrap .outer_box {
        position: relative;
        max-width: 480px;
        width: 57.84%;
        line-height: 0; }
        @media screen and (max-width: 480px) {
          .sec03 .inner .sec03_wrap .outer_box {
            max-width: 425px;
            width: 51.21%; } }
        .sec03 .inner .sec03_wrap .outer_box .outer_plot {
          position: absolute;
          inset: 0;
          z-index: 2; }
          .sec03 .inner .sec03_wrap .outer_box .outer_plot .t_cap_b_l {
            bottom: -14px; }
            @media screen and (max-width: 480px) {
              .sec03 .inner .sec03_wrap .outer_box .outer_plot .t_cap_b_l {
                left: 13px;
                font-size: 7px; } }
      .sec03 .inner .sec03_wrap .text_list {
        width: 42.17%;
        display: flex;
        flex-direction: column;
        justify-content: space-between; }
        @media screen and (max-width: 480px) {
          .sec03 .inner .sec03_wrap .text_list {
            width: 48.8%;
            gap: 25px; } }
        .sec03 .inner .sec03_wrap .text_list .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-left: calc(26% / 3.5);
          border-left: solid 4px #8c8c8c; }
          @media screen and (max-width: 480px) {
            .sec03 .inner .sec03_wrap .text_list .item {
              padding-left: calc(18% / 3.8);
              border-left: solid 2px #8c8c8c; } }
          .sec03 .inner .sec03_wrap .text_list .item .text_box {
            font-size: clamp(10px, calc(17vw / 8.3), 18px);
            letter-spacing: 0.1em;
            line-height: 1.6;
            font-feature-settings: "palt";
            margin-bottom: clamp(3px, 1.81vw, 15px); }
            @media screen and (max-width: 767px) {
              .sec03 .inner .sec03_wrap .text_list .item .text_box {
                letter-spacing: 0.02em; } }
            @media screen and (max-width: 520px) {
              .sec03 .inner .sec03_wrap .text_list .item .text_box {
                line-height: 1.3;
                letter-spacing: -0.05em;
                margin-bottom: 7px; } }
            @media screen and (max-width: 480px) {
              .sec03 .inner .sec03_wrap .text_list .item .text_box {
                line-height: 1.5;
                letter-spacing: -0.09em;
                margin-bottom: 6px;
                font-size: 3.1vw; } }
          .sec03 .inner .sec03_wrap .text_list .item .image_box .t_cap_b {
            bottom: -1.8em;
            right: 0; }
            @media screen and (max-width: 480px) {
              .sec03 .inner .sec03_wrap .text_list .item .image_box .t_cap_b {
                font-size: 7px; } }

.cbtn_wrap {
  background: #141514; }

.view_cont {
  position: relative; }
  .view_cont .time {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    width: 100%;
    text-align: right;
    background: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.6);
    height: 23px;
    padding: 0;
    background: rgba(0, 0, 0, 0.8); }
    @media screen and (max-width: 767px) {
      .view_cont .time {
        background: rgba(0, 0, 0, 0.6); } }
    .view_cont .time img {
      height: 100%;
      width: auto;
      margin: 0 0 0 auto; }
    @media screen and (max-width: 1500px) {
      .view_cont .time {
        height: 20px;
        padding: 3px 0;
        width: 20%; } }

@media screen and (max-width: 480px) {
  .view img {
    width: 600px;
    max-width: 600px; }
    .sec01_top_image .view img {
      width: 540px;
      max-width: 540px; } }

.simplebar-track.simplebar-horizontal {
  height: 20px;
  bottom: -20px; }

.simplebar-track.simplebar-horizontal::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8); }
  @media screen and (max-width: 767px) {
    .simplebar-track.simplebar-horizontal::before {
      background: rgba(0, 0, 0, 0.6); } }

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  top: 5px;
  bottom: 5px; }

.simplebar-scrollbar {
  display: none; }

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  background: #fff !important;
  opacity: 1 !important; }

@media screen and (min-width: 1500px), print {
  .simplebar-track {
    display: none; }

  .simplebar-horizontal {
    display: none; } }

/*# sourceMappingURL=design.css.map */