/*! Writen  by SCSS */
.ttl_wrap {
  padding: 200px 0 80px;
  text-align: center; }
  @media screen and (max-width: 860px) {
    .ttl_wrap {
      padding: calc(200vw / 8.6) 0 calc(80vw / 8.6); } }
  @media screen and (max-width: 480px) {
    .ttl_wrap {
      padding: 80px 0 40px; } }
  .ttl_wrap .ttl {
    margin-bottom: 110px; }
    @media screen and (max-width: 480px) {
      .ttl_wrap .ttl {
        margin-bottom: 50px; } }
  .ttl_wrap .main_copy {
    font-size: clamp(23px, calc(33vw / 12), 33px);
    letter-spacing: 0.28em;
    line-height: 1.8;
    margin-bottom: 25px; }
    @media screen and (max-width: 480px) {
      .ttl_wrap .main_copy {
        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 .main_read {
    font-size: clamp(13px, calc(18vw / 12), 18px);
    letter-spacing: 0.05em;
    line-height: 2.3; }
    @media screen and (max-width: 480px) {
      .ttl_wrap .main_read {
        margin-right: -20px;
        margin-left: -20px; } }

.ttl_wrap,
.sec1,
.sec2 {
  background: #eeeeee; }

.sec1 .inner {
  max-width: 1420px;
  padding: 130px 20px 120px; }
  @media screen and (max-width: 1390px) {
    .sec1 .inner {
      max-width: 1370px; } }
  @media screen and (max-width: 480px) {
    .sec1 .inner {
      padding: 60px 20px 50px; } }
  .sec1 .inner .c_ttl {
    margin-bottom: 15px;
    font-size: clamp(17px, calc(21vw / 12), 21px); }
    @media screen and (max-width: 480px) {
      .sec1 .inner .c_ttl {
        margin-bottom: 10px; } }
  .sec1 .inner .c_read {
    margin-bottom: 50px;
    font-size: clamp(14px, calc(17vw / 12), 17px); }
    @media screen and (max-width: 480px) {
      .sec1 .inner .c_read {
        margin: 0 -20px 20px; } }
  .sec1 .inner .box01 {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media screen and (max-width: 767px) {
      .sec1 .inner .box01 {
        flex-direction: column; } }
    @media screen and (max-width: 480px) {
      .sec1 .inner .box01 .uc {
        width: calc(100% + 40px);
        margin: 0 -20px; } }
    @media screen and (max-width: 480px) {
      .sec1 .inner .box01 .uc .t_cap {
        bottom: 2.5%;
        right: 2%; } }
    .sec1 .inner .box01 .l_cnt {
      width: calc(430% / 12.8); }
      @media screen and (max-width: 767px) {
        .sec1 .inner .box01 .l_cnt {
          width: 100%;
          margin: 0 auto 30px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between; } }
      @media screen and (max-width: 480px) {
        .sec1 .inner .box01 .l_cnt {
          display: block;
          max-width: 84%; } }
      .sec1 .inner .box01 .l_cnt .uc {
        width: calc(641% / 4.3);
        margin-right: calc(-211% / 4.3);
        margin-bottom: calc(70% / 4.3); }
      @media screen and (max-width: 767px) {
        .sec1 .inner .box01 .l_cnt .img_list {
          display: flex;
          flex-wrap: wrap;
          grid-gap: 2%;
          justify-content: space-between;
          width: calc(380%/7.27);
          height: fit-content; } }
      @media screen and (max-width: 480px) {
        .sec1 .inner .box01 .l_cnt .img_list {
          width: 100%;
          margin: 0 auto;
          flex-wrap: wrap; } }
      .sec1 .inner .box01 .l_cnt .img_list li {
        position: relative; }
        .sec1 .inner .box01 .l_cnt .img_list li:not(:last-child) {
          margin-bottom: 8%; }
          @media screen and (max-width: 767px) {
            .sec1 .inner .box01 .l_cnt .img_list li:not(:last-child) {
              margin-bottom: 1.2em; } }
        @media screen and (max-width: 767px) {
          .sec1 .inner .box01 .l_cnt .img_list li {
            width: 100%;
            height: fit-content; } }
        .sec1 .inner .box01 .l_cnt .img_list li .t_cap_b.list_cap {
          font-size: clamp(11px, calc(12vw / 11), 12px);
          bottom: -1.8em;
          text-shadow: none;
          color: #666; }
          @media screen and (max-width: 480px) {
            .sec1 .inner .box01 .l_cnt .img_list li .t_cap_b.list_cap {
              font-size: 9px; } }
      .sec1 .inner .box01 .l_cnt .img_list img {
        max-width: 100%;
        width: 100%; }
    .sec1 .inner .box01 .r_cnt {
      width: calc(800% / 12.8); }
      @media screen and (max-width: 480px) {
        .sec1 .inner .box01 .r_cnt {
          width: 100%;
          margin: 0 auto;
          display: flex;
          flex-direction: column; } }
      .sec1 .inner .box01 .r_cnt .r_cnt_in {
        position: relative; }
        .sec1 .inner .box01 .r_cnt .r_cnt_in .svg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
        .sec1 .inner .box01 .r_cnt .r_cnt_in img {
          max-width: 100%;
          width: 100%; }
        .sec1 .inner .box01 .r_cnt .r_cnt_in .cap1 {
          bottom: 11%;
          right: 16%; }
          @media screen and (max-width: 480px) {
            .sec1 .inner .box01 .r_cnt .r_cnt_in .cap1 {
              bottom: 6.5%;
              right: 6%; } }
    @media screen and (max-width: 767px) {
      .sec1 .inner .box01 .txts {
        width: calc(330%/7.27); } }
    @media screen and (max-width: 480px) {
      .sec1 .inner .box01 .txts {
        width: 100%;
        margin-bottom: 20px; } }
    .sec1 .inner .box01 .txts img {
      max-width: 100%;
      width: 100%; }
.sec1 .img06 {
  position: relative; }
  .sec1 .img06 .f3 {
    position: absolute;
    top: calc(86%/8.62);
    left: 0;
    right: 0;
    margin: auto;
    width: calc(32%/16);
    max-width: 90px; }
    .sec1 .img06 .f3 img {
      width: 100%; }
    @media screen and (max-width: 767px) {
      .sec1 .img06 .f3 {
        inset: 0;
        width: 100%;
        max-width: 100%; } }

.sec2 {
  background: #fff; }
  .sec2 .inner {
    max-width: 1280px;
    padding: 160px 20px 300px; }
    @media screen and (max-width: 768px) {
      .sec2 .inner {
        padding: calc(160%/7.67) 20px 250px; } }
    @media screen and (max-width: 480px) {
      .sec2 .inner {
        padding: 80px 20px 140px; } }
  .sec2 .sec2_ttl {
    margin-bottom: 108px;
    line-height: 0; }
    @media screen and (max-width: 1280px) {
      .sec2 .sec2_ttl {
        margin-bottom: calc(108%/12.8); } }
    .sec2 .sec2_ttl span {
      display: block;
      position: relative;
      max-width: 309px;
      margin: 0 auto;
      border-left: 1px solid #696766;
      border-right: 1px solid #696766;
      padding: 24px 0 23px;
      line-height: 0; }
      @media screen and (max-width: 767px) {
        .sec2 .sec2_ttl span {
          width: calc(309%/7.25);
          padding: 3% 0; } }
      @media screen and (max-width: 480px) {
        .sec2 .sec2_ttl span {
          width: 220px; } }
  .sec2 .plan_btns {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    justify-content: center; }
    @media screen and (max-width: 480px) {
      .sec2 .plan_btns {
        flex-direction: column; } }
    .sec2 .plan_btns li {
      width: 494px; }
      .sec2 .plan_btns li.none {
        display: none; }
      @media screen and (max-width: 1600px) {
        .sec2 .plan_btns li {
          width: calc(494%/12); } }
      @media screen and (max-width: 480px) {
        .sec2 .plan_btns li {
          width: 75%;
          margin: 0 auto; }
          .sec2 .plan_btns li:not(:last-child) {
            margin-bottom: 8%; } }
      .sec2 .plan_btns li:nth-child(1) {
        margin-right: 50px; }
        @media screen and (max-width: 1600px) {
          .sec2 .plan_btns li:nth-child(1) {
            margin-right: calc(50%/12); } }
        @media screen and (max-width: 480px) {
          .sec2 .plan_btns li:nth-child(1) {
            margin-right: auto; } }
      .sec2 .plan_btns li a {
        line-height: 0;
        padding: 0;
        border: 0;
        position: relative;
        display: block; }
        @media (hover: hover) {
          .sec2 .plan_btns li a:hover::before {
            opacity: 0.7;
            box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2); } }
        .sec2 .plan_btns li a::before {
          content: "";
          pointer-events: none;
          position: absolute;
          top: calc(12%/4.25);
          bottom: calc(12%/4.25);
          left: calc(12%/4.92);
          right: calc(12%/4.92);
          margin: auto;
          box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.4);
          border: 1px solid #636f6d;
          z-index: 2;
          display: block; }
        .sec2 .plan_btns li a .click {
          position: absolute;
          width: calc(386% / 4.92);
          left: 0;
          right: 0;
          bottom: calc(30% / 4.44);
          margin-inline: auto;
          animation: blinking 0.8s ease-in-out infinite alternate; }
          @media screen and (max-width: 480px) {
            .sec2 .plan_btns li a .click {
              width: calc(410% / 4.92);
              bottom: calc(38% / 4.44); } }
        .sec2 .plan_btns li a .icon {
          position: absolute;
          bottom: 0;
          bottom: calc(54% / 4.25);
          right: calc(105% / 4.93);
          z-index: 101;
          height: 1.8em;
          width: 6em;
          background: #fff;
          font-size: clamp(5px, calc(10vw / 10), 10px);
          margin: 0; }
          @media screen and (max-width: 480px) {
            .sec2 .plan_btns li a .icon {
              bottom: calc(55% / 4.25);
              font-size: calc(7vw / 3.9);
              height: 1.5em;
              width: 4.5em; } }
          .sec2 .plan_btns li a .icon div {
            background: #a5040d;
            animation: blinking 0.8s ease-in-out infinite alternate;
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-family: "EB Garamond",serif;
            letter-spacing: 0.15em;
            line-height: 1; }
      .sec2 .plan_btns li .base {
        overflow: inherit;
        box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.4); }
      .sec2 .plan_btns li.new a::after {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #262726;
        background: #fff;
        content: "UPDATE";
        font-family: "EB Garamond", serif;
        letter-spacing: -.02em;
        line-height: 1;
        z-index: 10000;
        font-size: 15px;
        height: 18px;
        width: 68px;
        left: calc(50% - 34px);
        top: 5%;
        padding-top: 1px; }
        @media screen and (max-width: 480px) {
          .sec2 .plan_btns li.new a::after {
            font-size: 10px;
            height: 12px;
            width: 50px;
            left: calc(50% - 18px);
            top: 4%;
            padding-top: 0; } }
      .sec2 .plan_btns li p {
        font-size: clamp(12px, calc(18vw / 12.2), 18px);
        line-height: 1.4;
        letter-spacing: 0.05em;
        font-feature-settings: "palt";
        text-align: center;
        margin-bottom: 0.8em;
        color: #a5040d; }
        @media screen and (max-width: 480px) {
          .sec2 .plan_btns li p {
            font-size: calc(12vw / 3.9);
            font-weight: 700; } }

.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: 520px;
    max-width: 520px; } }

.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; } }
.bnr_v a {
  margin-inline: auto;
  width: fit-content;
  display: block;
  position: relative; }
  .bnr_v a .click {
    position: absolute;
    width: calc(370% / 6.46);
    left: 0;
    bottom: calc(12% / 2);
    text-align: center;
    animation: blinking 0.8s ease-in-out infinite alternate; }
    .bnr_v a .click img {
      width: calc(320% / 3.7); }

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