/*! Writen  by SCSS */
.mainvisual:before {
  padding-bottom: 41.75%; }
.mainvisual .mainimg {
  background-image: url("../images/main.jpg"); }

.inner {
  max-width: 1080px; }
  .lead_wrap .inner {
    max-width: 1200px; }

.lead_wrap {
  padding-top: clamp(60px, 8.34%, 100px); }
  .lead_wrap .page_ttl {
    letter-spacing: 0.1em; }
  .lead_wrap .sec_ttl {
    margin-bottom: clamp(25px, 4.17%, 50px); }
  .lead_wrap .read {
    margin-top: clamp(30px, 5%, 60px); }

.tab_wrap {
  margin-top: clamp(45px, 7.5%, 90px);
  margin-bottom: clamp(60px, 8.34%, 100px);
  display: grid;
  align-items: center;
  align-content: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 1.38%;
  position: relative; }
  @media screen and (max-width: 480px) {
    .tab_wrap {
      grid-template-columns: 1fr;
      gap: 14px 0; } }
  .tab_wrap .tab_head {
    width: 100%;
    padding: 10%;
    font-size: clamp(24px, 4.28vw, 48px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.3);
    grid-column: 2 / 3;
    display: grid;
    place-items: center;
    position: absolute; }
    @media screen and (max-width: 480px) {
      .tab_wrap .tab_head {
        position: static;
        grid-column: auto;
        padding: 20px; } }
    .tab_wrap .tab_head .text {
      text-align: center;
      color: #333;
      width: 100%;
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      line-height: 1.25;
      border-radius: 12px;
      background: #fff;
      box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5); }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_head .text {
          aspect-ratio: auto;
          padding: 15px;
          line-height: 1; } }
  .tab_wrap .tab_box {
    max-width: 350px;
    grid-row: span 2;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 0; }
    @media screen and (max-width: 480px) {
      .tab_wrap .tab_box {
        grid-template-rows: auto; } }
    .tab_wrap .tab_box a {
      grid-row: span 2;
      display: grid;
      grid-template-rows: subgrid;
      gap: 0;
      background: linear-gradient(90deg, #eae4d1 0%, white 50%, #eae4d1 100%);
      position: relative;
      border-radius: 12px;
      transition: opacity 0.3s ease-in-out;
      overflow: hidden;
      box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5); }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box a {
          grid-row: auto;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: auto; } }
      @media (hover: hover) {
        .tab_wrap .tab_box a:hover {
          opacity: 0.7; } }
      .tab_wrap .tab_box a::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        margin: 3.42%;
        z-index: 2;
        border-radius: 14px;
        border: 1px solid #231815; }
        @media screen and (max-width: 480px) {
          .tab_wrap .tab_box a::after {
            margin: 5px; } }
      .tab_wrap .tab_box a .text_box {
        text-align: center;
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2.85% 4.28% 1.42%; }
        @media screen and (max-width: 480px) {
          .tab_wrap .tab_box a .text_box {
            padding: 15px 10px; } }
        .tab_wrap .tab_box a .text_box .tab_box_head {
          font-size: clamp(18px, 3.21vw, 36px);
          line-height: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0.3em;
          letter-spacing: 0.1em; }
          .tab_wrap .tab_box a .text_box .tab_box_head .text {
            color: #8b694e; }
        .tab_wrap .tab_box a .text_box .tab_lead {
          margin-top: 0.6em;
          font-size: clamp(13px, 1.78vw, 20px);
          line-height: 1.5; }
      .tab_wrap .tab_box a .image_box {
        align-self: end; }
        @media screen and (max-width: 480px) {
          .tab_wrap .tab_box a .image_box {
            align-self: stretch; } }
        .tab_wrap .tab_box a .image_box .cap {
          right: 5.72%;
          bottom: 9.26%; }
        @media screen and (max-width: 480px) {
          .tab_wrap .tab_box a .image_box img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center; } }
    .tab_wrap .tab_box.tab_box_01 {
      grid-column: 1 / 2;
      grid-row: 2 / 4;
      align-self: end; }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box.tab_box_01 {
          grid-column: auto;
          grid-row: auto; } }
    .tab_wrap .tab_box.tab_box_02 {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      align-self: end;
      margin-bottom: clamp(-30px, -2.77vw, -7px); }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box.tab_box_02 {
          grid-column: auto;
          grid-row: auto;
          margin-bottom: 0; } }
    .tab_wrap .tab_box.tab_box_03 {
      grid-column: 3 / 4;
      grid-row: 2 / 4;
      align-self: end; }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box.tab_box_03 {
          grid-column: auto;
          grid-row: auto; } }
    .tab_wrap .tab_box.tab_box_04 {
      grid-column: 3 / 4;
      grid-row: 4 / 6;
      align-self: start; }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box.tab_box_04 {
          grid-column: auto;
          grid-row: auto; } }
    .tab_wrap .tab_box.tab_box_05 {
      grid-column: 2 / 3;
      grid-row: 5 / 7;
      align-self: start;
      margin-top: clamp(-30px, -2.77vw, -7px); }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box.tab_box_05 {
          grid-column: auto;
          grid-row: auto;
          margin-top: 0; } }
    .tab_wrap .tab_box.tab_box_06 {
      grid-column: 1 / 2;
      grid-row: 4 / 6;
      align-self: start; }
      @media screen and (max-width: 480px) {
        .tab_wrap .tab_box.tab_box_06 {
          grid-column: auto;
          grid-row: auto; } }

.sec_outer {
  display: grid;
  gap: clamp(40px, 6.49vw, 70px) 0;
  margin-bottom: clamp(80px, 10%, 120px); }
  .sec_outer .sec {
    position: relative;
    background: linear-gradient(90deg, #8a6247 0%, #be9e7f 50%, #8a6247 100%);
    border-radius: 12px;
    padding-top: clamp(25px, 4.17%, 50px);
    padding-bottom: clamp(25px, 4.17%, 50px); }
    @media screen and (max-width: 480px) {
      .sec_outer .sec {
        padding-top: 30px;
        padding-bottom: 30px; } }
    .sec_outer .sec::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border: 12px solid #fff;
      border-radius: 12px; }
      @media screen and (max-width: 768px) {
        .sec_outer .sec::after {
          border: 6px solid #fff; } }
      @media screen and (max-width: 480px) {
        .sec_outer .sec::after {
          border: 3px solid #fff; } }
    .sec_outer .sec .sec_inner {
      max-width: 984px;
      width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto; }
      @media screen and (max-width: 480px) {
        .sec_outer .sec .sec_inner {
          width: calc(100% - 30px); } }
      .sec_outer .sec .sec_inner .sec_head_wrap {
        text-align: center;
        margin-bottom: 30px; }
        @media screen and (max-width: 480px) {
          .sec_outer .sec .sec_inner .sec_head_wrap {
            margin-bottom: 20px; } }
        .sec_outer .sec .sec_inner .sec_head_wrap .sec_head {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: clamp(19px, 2.417vw, 29px);
          line-height: 1;
          gap: 0.6em 0;
          letter-spacing: 0.1em;
          margin-bottom: 1em; }
          @media screen and (max-width: 480px) {
            .sec_outer .sec .sec_inner .sec_head_wrap .sec_head {
              font-size: 22px;
              gap: 0.4em;
              margin-bottom: 0.6em; } }
          .sec_outer .sec .sec_inner .sec_head_wrap .sec_head .text {
            font-size: 0.82em;
            letter-spacing: 0.1em; }
        .sec_outer .sec .sec_inner .sec_head_wrap .sec_lead {
          font-size: clamp(20px, 2.9vw, 36px);
          line-height: 1.6; }
      .sec_outer .sec .sec_inner .sec_wrap_outer {
        display: grid;
        gap: clamp(25px, 3.71vw, 40px) 0; }
        @media screen and (max-width: 480px) {
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap {
            flex-direction: column; } }
        .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .image_box {
          width: 50%;
          background: #fff; }
          @media screen and (max-width: 480px) {
            .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .image_box {
              width: 100%; } }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .image_box img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            object-position: center; }
        .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box {
          font-weight: 500;
          width: 50%;
          color: #333;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 1.01% 2.03%;
          background: linear-gradient(90deg, #eae4d1 0%, white 50%, #eae4d1 100%); }
          @media screen and (max-width: 480px) {
            .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box {
              width: 100%;
              padding: 15px; } }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box .box_lead {
            font-size: clamp(14px, 2.14vw, 24px);
            line-height: 1.4;
            margin-bottom: 0.5em; }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box .box_head {
            font-size: clamp(18px, 2.5vw, 28px);
            line-height: 1.4;
            margin-bottom: 0.6em; }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box .read {
            line-height: 1.69; }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box .more_box {
            text-align: right;
            font-size: clamp(14px, 2.14vw, 24px);
            margin-top: 0.5em; }
            .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box .more_box a {
              color: #ae0e16;
              display: flex;
              align-items: baseline;
              justify-content: flex-end;
              transition: opacity 0.3s ease-in-out; }
              @media (hover: hover) {
                .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wrap .text_box .more_box a:hover {
                  opacity: 0.7; } }
        .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap {
          background: #fff;
          border-radius: 12px;
          color: #333;
          text-align: center;
          padding: 4.06% 2.03%;
          font-weight: 500;
          position: relative; }
          @media screen and (max-width: 480px) {
            .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap {
              padding: 20px 15px; } }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .badge_text {
            position: absolute;
            top: -0.91em;
            right: 10.07%;
            border-radius: 50%;
            font-size: clamp(14px, 1.96vw, 22px);
            line-height: 1.19;
            width: 5.54em;
            height: 5.54em;
            padding-top: 0.2em;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #b41414;
            background: #fff;
            border: 1px solid;
            box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5); }
            @media screen and (max-width: 480px) {
              .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .badge_text {
                right: -10px; } }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .bg_head {
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            font-size: clamp(18px, 2.5vw, 28px);
            line-height: 1.4;
            padding: 0.3em 2.85em;
            border-radius: 12px;
            color: #fff;
            background: #ae0e16;
            line-height: 1;
            margin-bottom: 0.71em; }
            @media screen and (max-width: 480px) {
              .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .bg_head {
                width: 100%;
                padding: 0.5em 1em;
                margin-bottom: 0.6em; } }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .read {
            line-height: 1.69; }
          .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .wide_bottom_text {
            margin-top: 1.5em;
            font-size: clamp(16px, 1.96vw, 22px);
            line-height: 1; }
            @media screen and (max-width: 480px) {
              .sec_outer .sec .sec_inner .sec_wrap_outer .sec_wide_wrap .wide_bottom_text {
                margin-top: 1em; } }

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