/*! Writen  by SCSS */
.plan_detail {
  position: relative;
  background: #fff;
  color: #333;
  padding-top: 8.34%;
  padding-bottom: 7.82%; }
  @media screen and (max-width: 480px) {
    .plan_detail {
      padding-top: 60px;
      padding-bottom: 120px; } }
  .plan_detail::before {
    content: "";
    display: block;
    position: absolute;
    width: 260.42%;
    padding-top: 260.42%;
    border-radius: 100%;
    background: #e9ebeb;
    top: 0; }
    @media screen and (max-width: 480px) {
      .plan_detail::before {
        width: 1500px;
        padding-top: 1500px; } }
  .plan_detail.plan_detail_a::before {
    left: -96.87%;
    margin-top: -194.79%; }
    @media screen and (max-width: 480px) {
      .plan_detail.plan_detail_a::before {
        margin-top: -600px;
        left: -800px; } }
  .plan_detail.plan_detail_b::before {
    left: -39.58%;
    margin-top: -177.08%; }
    @media screen and (max-width: 480px) {
      .plan_detail.plan_detail_b::before {
        margin-top: -500px;
        left: -300px; } }
  .plan_detail.plan_detail_c::before {
    left: -80%;
    margin-top: -196.87%; }
    @media screen and (max-width: 480px) {
      .plan_detail.plan_detail_c::before {
        margin-top: -650px;
        left: -550px; } }

.detail_wrap {
  position: relative;
  display: grid;
  align-items: start;
  align-content: start;
  grid-auto-flow: dense;
  z-index: 1; }
  @media screen and (max-width: 480px) {
    .detail_wrap .plan_head {
      margin-inline: auto; } }
  .detail_wrap .plan_head img {
    display: block;
    line-height: 0;
    border-radius: 100%; }
  .detail_wrap .space {
    font-size: clamp(28px, 4.51vw, 56px);
    display: flex;
    align-items: baseline;
    line-height: 1;
    margin-top: 1.42em; }
    @media screen and (max-width: 480px) {
      .detail_wrap .space {
        font-size: 32px;
        justify-content: center;
        margin-top: 0.6em; } }
    .detail_wrap .space .text_min {
      font-size: 0.5em; }
  .detail_wrap .size_wrap {
    display: flex;
    align-items: flex-start;
    font-size: clamp(28px, 4.51vw, 56px);
    line-height: 1;
    gap: 0.53em;
    margin-top: 1em; }
    @media screen and (max-width: 480px) {
      .detail_wrap .size_wrap {
        justify-content: center;
        font-size: 32px;
        margin-top: 0.8em; } }
    .detail_wrap .size_wrap .size_head {
      font-size: 0.28em;
      margin-top: 1.5em; }
    .detail_wrap .size_wrap .size_box .size_main {
      display: flex;
      align-items: baseline;
      margin-bottom: 0.26em; }
      .detail_wrap .size_wrap .size_box .size_main .text_min {
        font-size: 0.5em; }
      .detail_wrap .size_wrap .size_box .size_main .text_m_min {
        font-size: 0.21em; }
    .detail_wrap .size_wrap .size_box .size_cap {
      margin-top: 1em;
      font-size: clamp(10px, 0.96vw, 12px);
      line-height: 1.4; }
  .detail_wrap .size_sub {
    margin-top: 2em;
    font-size: clamp(12px, 1.29vw, 16px);
    line-height: 1; }
    @media screen and (max-width: 480px) {
      .detail_wrap .size_sub {
        text-align: center;
        margin-top: 1em; } }
  .detail_wrap .hanrei_wrap {
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2em; }
    @media screen and (max-width: 480px) {
      .detail_wrap .hanrei_wrap {
        gap: 1em; } }
    .detail_wrap .hanrei_wrap .item {
      display: flex;
      align-items: baseline;
      gap: 0.25em; }
      .detail_wrap .hanrei_wrap .item img {
        line-height: 0; }
    .detail_wrap .hanrei_wrap .item_light img {
      width: 4.59em; }
    .detail_wrap .hanrei_wrap .item_wind img {
      width: 4.7em; }
    .detail_wrap .hanrei_wrap .item_floor img {
      width: 3.8em; }
    .detail_wrap .hanrei_wrap .item_storage img {
      width: 3.8em; }
  .detail_wrap .cap_l {
    margin-top: 5em; }
    @media screen and (max-width: 480px) {
      .detail_wrap .cap_l {
        margin-top: 15px; } }
  @media screen and (max-width: 480px) {
    .detail_wrap .plan_figure {
      margin: 20px auto; } }
  .plan_detail_a .detail_wrap {
    display: grid;
    grid-template-columns: 35% 68.92%; }
    @media screen and (max-width: 480px) {
      .plan_detail_a .detail_wrap {
        grid-template-columns: 1fr; } }
    .plan_detail_a .detail_wrap .text_box {
      grid-column: 1 / 2;
      grid-row: 1 / 3; }
      @media screen and (max-width: 480px) {
        .plan_detail_a .detail_wrap .text_box {
          grid-column: auto;
          grid-row: auto; } }
      .plan_detail_a .detail_wrap .text_box .plan_head {
        max-width: 160px;
        width: 38.1%; }
        @media screen and (max-width: 480px) {
          .plan_detail_a .detail_wrap .text_box .plan_head {
            width: 100px; } }
    .plan_detail_a .detail_wrap .plan_figure {
      grid-column: 2 / 3;
      grid-row: 1 / 4; }
      @media screen and (max-width: 480px) {
        .plan_detail_a .detail_wrap .plan_figure {
          grid-column: auto;
          grid-row: auto; } }
    .plan_detail_a .detail_wrap .caption_wrap {
      grid-column: 1 / 2;
      grid-row: 3 / 4; }
      @media screen and (max-width: 480px) {
        .plan_detail_a .detail_wrap .caption_wrap {
          grid-column: auto;
          grid-row: auto; } }
    .plan_detail_a .detail_wrap .cap_l {
      grid-column: 1 / 3; }
      @media screen and (max-width: 480px) {
        .plan_detail_a .detail_wrap .cap_l {
          grid-column: auto;
          grid-row: auto; } }
  .plan_detail_b .detail_wrap {
    display: grid;
    grid-template-columns: 37.5% 60.25%; }
    @media screen and (max-width: 480px) {
      .plan_detail_b .detail_wrap {
        grid-template-columns: 1fr; } }
    .plan_detail_b .detail_wrap .text_box {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      align-self: center; }
      @media screen and (max-width: 480px) {
        .plan_detail_b .detail_wrap .text_box {
          grid-column: auto;
          grid-row: auto; } }
      .plan_detail_b .detail_wrap .text_box .plan_head {
        max-width: 160px;
        width: 38.1%; }
        @media screen and (max-width: 480px) {
          .plan_detail_b .detail_wrap .text_box .plan_head {
            width: 100px; } }
    .plan_detail_b .detail_wrap .plan_figure {
      grid-column: 2 / 3;
      grid-row: 1 / 4; }
      @media screen and (max-width: 480px) {
        .plan_detail_b .detail_wrap .plan_figure {
          grid-column: auto;
          grid-row: auto;
          width: 68.93%; } }
    .plan_detail_b .detail_wrap .caption_wrap {
      grid-column: 1 / 2;
      grid-row: 3 / 4; }
      @media screen and (max-width: 480px) {
        .plan_detail_b .detail_wrap .caption_wrap {
          grid-column: auto;
          grid-row: auto; } }
  .plan_detail_c .detail_wrap {
    max-width: 1000px;
    width: 83.34%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 40% 55.71%; }
    @media screen and (max-width: 480px) {
      .plan_detail_c .detail_wrap {
        width: 100%;
        grid-template-columns: 1fr; } }
    .plan_detail_c .detail_wrap .text_box {
      grid-column: 1 / 2;
      grid-row: 1 / 3; }
      @media screen and (max-width: 480px) {
        .plan_detail_c .detail_wrap .text_box {
          grid-column: auto;
          grid-row: auto; } }
      .plan_detail_c .detail_wrap .text_box .plan_head {
        max-width: 160px;
        width: 40%; }
        @media screen and (max-width: 480px) {
          .plan_detail_c .detail_wrap .text_box .plan_head {
            width: 100px; } }
    .plan_detail_c .detail_wrap .plan_figure {
      grid-column: 2 / 3;
      grid-row: 1 / 4; }
      @media screen and (max-width: 480px) {
        .plan_detail_c .detail_wrap .plan_figure {
          grid-column: auto;
          grid-row: auto;
          width: 67.36%; } }
    .plan_detail_c .detail_wrap .caption_wrap {
      grid-column: 1 / 2;
      grid-row: 3 / 4; }
      @media screen and (max-width: 480px) {
        .plan_detail_c .detail_wrap .caption_wrap {
          grid-column: auto;
          grid-row: auto; } }
    .plan_detail_c .detail_wrap .cap_l {
      grid-column: 1 / 3; }
      @media screen and (max-width: 480px) {
        .plan_detail_c .detail_wrap .cap_l {
          grid-column: auto;
          grid-row: auto; } }

/*# sourceMappingURL=detail.css.map */
