/*! Writen  by SCSS */
.inner_main {
  background-image: url("../images/main.jpg"); }

.sec_detail {
  padding: clamp(40px, 7.084vw, 85px) 0 clamp(80px, 9.167vw, 110px);
  background-image: url("../images/detail/bg.jpg");
  background-position: top left;
  background-repeat: no-repeat; }
  .sec_detail .inner {
    max-width: 960px; }
  .sec_detail .ttl_wrap {
    display: flex;
    column-gap: 3.13%;
    align-items: center;
    margin-bottom: clamp(20px, 3.334vw, 40px); }
    @media screen and (max-width: 480px) {
      .sec_detail .ttl_wrap {
        flex-direction: column; } }
    .sec_detail .ttl_wrap .type_wrap {
      width: 20.84%;
      aspect-ratio: 200/110;
      padding-inline: 10px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: url("../images/detail/type.bg.jpg") center center/cover no-repeat;
      filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 0.15)); }
      @media screen and (max-width: 480px) {
        .sec_detail .ttl_wrap .type_wrap {
          width: 100%;
          aspect-ratio: auto;
          padding: 10px 10px 20px;
          margin-bottom: 25px;
          flex-direction: row;
          column-gap: 10px;
          align-items: flex-end;
          background-image: url("../images/detail/type.bg_sp.jpg"); } }
      .sec_detail .ttl_wrap .type_wrap .type_head {
        color: #161e40;
        font-size: clamp(20px, 2.25vw, 27px);
        line-height: 1;
        margin-bottom: clamp(10px, 1.25vw, 15px);
        font-weight: 500; }
        @media screen and (max-width: 480px) {
          .sec_detail .ttl_wrap .type_wrap .type_head {
            font-size: 30px;
            margin-bottom: 0; } }
        .sec_detail .ttl_wrap .type_wrap .type_head .big {
          font-size: 170%; }
      .sec_detail .ttl_wrap .type_wrap .icon_value {
        background: linear-gradient(90deg, #7f6e38 0%, #b8a677 50%, #7f6e38 100%);
        color: #fff;
        width: 100%; }
        @media screen and (max-width: 480px) {
          .sec_detail .ttl_wrap .type_wrap .icon_value {
            width: fit-content;
            padding: 0px 20px; } }
        .sec_detail .ttl_wrap .type_wrap .icon_value.menu_icon {
          background: linear-gradient(90deg, #161e40 0%, #151c3a 100%);
          color: #fff0ba; }
    .sec_detail .ttl_wrap .text_wrap {
      width: 76.05%;
      display: flex;
      gap: clamp(10px, 1.25vw, 15px) 4.11%;
      flex-wrap: wrap;
      align-items: baseline; }
      @media screen and (max-width: 480px) {
        .sec_detail .ttl_wrap .text_wrap {
          width: 100%;
          justify-content: center; } }
      .sec_detail .ttl_wrap .text_wrap .text {
        font-size: clamp(26px, 3.334vw, 40px);
        line-height: 1; }
      .sec_detail .ttl_wrap .text_wrap .text01 {
        color: #82713b;
        width: 100%;
        letter-spacing: -0.05em; }
        @media screen and (max-width: 480px) {
          .sec_detail .ttl_wrap .text_wrap .text01 {
            letter-spacing: 0;
            text-align: center; } }
        .sec_detail .ttl_wrap .text_wrap .text01 .small {
          font-size: 70%; }
      .sec_detail .ttl_wrap .text_wrap .text02 .small_01 {
        font-size: 50%; }
      .sec_detail .ttl_wrap .text_wrap .text02 .small_02 {
        font-size: 70%; }
      .sec_detail .ttl_wrap .text_wrap .text02 .small_03 {
        font-size: 40%; }
      .sec_detail .ttl_wrap .text_wrap .text03 {
        font-size: clamp(12px, 1.5vw, 18px); }
        @media screen and (max-width: 480px) {
          .sec_detail .ttl_wrap .text_wrap .text03 {
            font-size: 14px; } }
  .sec_detail .read_wrap {
    margin-bottom: clamp(40px, 5.834vw, 70px);
    display: flex;
    flex-direction: column;
    row-gap: clamp(5px, 0.834vw, 10px); }
    @media screen and (max-width: 480px) {
      .sec_detail .read_wrap {
        row-gap: 10px; } }
    .sec_detail .read_wrap .read {
      letter-spacing: -0.02em; }
  .sec_detail .img_wrap {
    margin-bottom: clamp(30px, 4.167vw, 50px); }
    .sec_detail .img_wrap .change_btn {
      display: flex;
      justify-content: center;
      column-gap: 4.17%;
      margin-bottom: clamp(20px, 2.5vw, 30px); }
      @media screen and (max-width: 480px) {
        .sec_detail .img_wrap .change_btn {
          margin-bottom: 15px; } }
      .sec_detail .img_wrap .change_btn li {
        width: 27.09%;
        max-width: 260px;
        cursor: pointer;
        text-align: center;
        position: relative;
        transition: 0.3s color ease-in-out,0.3s background-color ease-in-out;
        font-size: clamp(16px, 1.667vw, 20px);
        padding: clamp(10px, 0.834vw, 10px) 0;
        border: 1px solid #151c39;
        color: #151c39; }
        @media screen and (max-width: 480px) {
          .sec_detail .img_wrap .change_btn li {
            font-size: 14px;
            width: 48%; } }
        .sec_detail .img_wrap .change_btn li.active {
          background: #151c39;
          color: #dcc381; }
        @media (hover: hover) {
          .sec_detail .img_wrap .change_btn li:hover {
            background: #151c39;
            color: #dcc381; } }
    .sec_detail .img_wrap .plan_box .plan_box_in {
      position: relative; }
      .sec_detail .img_wrap .plan_box .plan_box_in > div {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        pointer-events: none;
        transition: 0.3s all ease-in-out 0s; }
        .sec_detail .img_wrap .plan_box .plan_box_in > div.active {
          position: relative;
          pointer-events: all;
          opacity: 1; }
      .sec_detail .img_wrap .plan_box .plan_box_in .image_item .img_in,
      .sec_detail .img_wrap .plan_box .plan_box_in .plan_item .img_in {
        position: relative; }
        .sec_detail .img_wrap .plan_box .plan_box_in .image_item .img_in .hanrei,
        .sec_detail .img_wrap .plan_box .plan_box_in .plan_item .img_in .hanrei {
          position: absolute;
          width: 77.5%;
          bottom: 2%;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 1; }
          @media screen and (max-width: 480px) {
            .sec_detail .img_wrap .plan_box .plan_box_in .image_item .img_in .hanrei,
            .sec_detail .img_wrap .plan_box .plan_box_in .plan_item .img_in .hanrei {
              width: 76%;
              max-width: none; } }
        .sec_detail .img_wrap .plan_box .plan_box_in .image_item .img_in .hanrei_kagu,
        .sec_detail .img_wrap .plan_box .plan_box_in .plan_item .img_in .hanrei_kagu {
          position: absolute;
          width: 40%;
          bottom: 2%;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 1; }
          @media screen and (max-width: 480px) {
            .sec_detail .img_wrap .plan_box .plan_box_in .image_item .img_in .hanrei_kagu,
            .sec_detail .img_wrap .plan_box .plan_box_in .plan_item .img_in .hanrei_kagu {
              width: 76%;
              max-width: none; } }
    .sec_detail .img_wrap .plan_box .img_in {
      text-align: center; }
  .sec_detail .btn {
    display: block;
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
    border: 1px solid #151c39;
    padding: clamp(10px, 1.667vw, 20px) 10px;
    line-height: 1;
    text-align: center;
    font-size: clamp(14px, 1.334vw, 16px);
    color: #151c39;
    background-color: #fff;
    transition: 0.3s color ease-in-out,0.3s background-color ease-in-out; }
    @media (hover: hover) {
      .sec_detail .btn:hover {
        background: #151c39;
        color: #dcc381; } }

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