.intro {
  width: auto;
  max-width: 1070px;
  margin: 0 auto;
  padding: 100px 0;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .intro {
      padding: 70px 0; } }
  @media screen and (max-width: 480px) {
    .intro {
      padding: 40px 0; } }
  .intro h2 {
    max-width: 710px;
    margin: 0 auto 3%;
    line-height: 0; }
    @media screen and (max-width: 768px) {
      .intro h2 {
        max-width: 80%; } }
    .intro h2 + p {
      font-size: 18px;
      letter-spacing: .15em; }
      @media screen and (max-width: 768px) {
        .intro h2 + p {
          padding: 0 50px;
          font-size: 1.8vw; } }
      @media screen and (max-width: 480px) {
        .intro h2 + p {
          padding: 0 20px;
          font-size: 3.2vw; } }
  .intro .mv {
    margin: 0 auto 8%;
    line-height: 0; }

.rarity {
  width: 100%;
  padding: 100px 0;
  background: url("../images/4ldk/rarity-back.jpg") repeat-y center top/100% auto; }
  @media screen and (max-width: 768px) {
    .rarity {
      padding: 70px 0; } }
  @media screen and (max-width: 480px) {
    .rarity {
      padding: 40px 0; } }
  .rarity ul {
    max-width: 670px;
    margin: 0 auto 5%; }
    @media screen and (max-width: 480px) {
      .rarity ul {
        max-width: 90%; } }
    .rarity ul li img {
      width: 100%; }
    .rarity ul li h3 {
      text-align: center;
      font-size: 20px;
      letter-spacing: .05em; }
      @media screen and (max-width: 768px) {
        .rarity ul li h3 {
          font-size: 2vw; } }
      @media screen and (max-width: 480px) {
        .rarity ul li h3 {
          font-size: 3.2vw; } }
      .rarity ul li h3 em {
        padding: 0 0 2px;
        border-bottom: 1px solid #b3292c;
        color: #b3292c;
        font-style: normal;
        font-size: 22px;
        font-weight: 700; }
        @media screen and (max-width: 768px) {
          .rarity ul li h3 em {
            font-size: 2.2vw; } }
        @media screen and (max-width: 480px) {
          .rarity ul li h3 em {
            font-size: 3.5vw; } }
      .rarity ul li h3 + p {
        margin: 5% auto 0;
        padding: 0 80px;
        font-size: 10px; }
        @media screen and (max-width: 480px) {
          .rarity ul li h3 + p {
            padding: 0 20px;
            font-size: 2.5vw; } }
    .rarity ul li:nth-child(1) {
      margin: 0 auto 10%; }
    .rarity ul:nth-of-type(1) {
      height: 360px;
      position: relative; }
      @media screen and (max-width: 480px) {
        .rarity ul:nth-of-type(1) {
          height: 200px; } }
      .rarity ul:nth-of-type(1) li {
        position: absolute; }
        .rarity ul:nth-of-type(1) li:nth-child(2) {
          width: 65%;
          left: 0;
          bottom: 0; }
        .rarity ul:nth-of-type(1) li:nth-child(3) {
          width: 40%;
          right: 0;
          bottom: 0; }
    .rarity ul:nth-of-type(2) li:nth-child(2) {
      margin: 0 auto 5%;
      text-align: center; }
      .rarity ul:nth-of-type(2) li:nth-child(2) img {
        max-width: 450px; }
        @media screen and (max-width: 480px) {
          .rarity ul:nth-of-type(2) li:nth-child(2) img {
            max-width: 90%; } }
    .rarity ul:nth-of-type(3) {
      margin: 0 auto; }
      .rarity ul:nth-of-type(3) li:nth-child(2) {
        margin: 0 auto 5%;
        text-align: center; }
        .rarity ul:nth-of-type(3) li:nth-child(2) img {
          max-width: 450px; }
          @media screen and (max-width: 480px) {
            .rarity ul:nth-of-type(3) li:nth-child(2) img {
              max-width: 90%; } }

.plan {
  width: auto;
  padding: 100px 0; }
  @media screen and (max-width: 768px) {
    .plan {
      padding: 70px 0; } }
  @media screen and (max-width: 480px) {
    .plan {
      padding: 40px 0; } }
  .plan .inner {
    max-width: 920px; }
    @media screen and (max-width: 768px) {
      .plan .inner {
        max-width: 90%; } }
    .plan .inner h3 {
      max-width: 670px;
      margin: 0 auto 12%; }
    .plan .inner h4 {
      margin: 0 auto 10%;
      padding: 50px 0;
      position: relative;
      text-align: center;
      color: #ae7e43;
      font-size: 40px;
      letter-spacing: .1em;
      line-height: 1.5; }
      @media screen and (max-width: 768px) {
        .plan .inner h4 {
          font-size: 4vw; } }
      @media screen and (max-width: 480px) {
        .plan .inner h4 {
          padding: 30px 0;
          font-size: 5vw; } }
      .plan .inner h4::before {
        content: "";
        width: 45%;
        padding: 140px 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: -1;
        display: block;
        opacity: 0.5;
        background: url("../images/4ldk/plan-back.png") no-repeat center/cover; }
        @media screen and (max-width: 480px) {
          .plan .inner h4::before {
            width: 80%;
            padding: 80px 0; } }
      .plan .inner h4 + p {
        margin: 0 auto 15%;
        text-align: center;
        font-size: 18px;
        letter-spacing: .15em; }
        @media screen and (max-width: 768px) {
          .plan .inner h4 + p {
            font-size: 1.8vw; } }
        @media screen and (max-width: 480px) {
          .plan .inner h4 + p {
            margin: 0 auto 30%;
            font-size: 3.2vw; } }
  .plan .planbox {
    margin: 0 auto 15%;
    padding: 50px;
    position: relative;
    background: rgba(196, 156, 67, 0.5); }
    @media screen and (max-width: 768px) {
      .plan .planbox {
        padding: 30px; } }
    @media screen and (max-width: 480px) {
      .plan .planbox {
        margin: 0 auto 30%;
        padding: 20px; } }
    .plan .planbox h5 {
      position: absolute;
      left: 0;
      top: -50px; }
      @media screen and (max-width: 480px) {
        .plan .planbox h5 {
          top: -30px; } }
    .plan .planbox h6 {
      padding: 10px 0;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .05em;
      background: #fff; }
      @media screen and (max-width: 768px) {
        .plan .planbox h6 {
          font-size: 1.8vw; } }
      @media screen and (max-width: 480px) {
        .plan .planbox h6 {
          font-size: 3.5vw;
          line-height: 1.5; } }
    .plan .planbox ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center; }
      .plan .planbox ul li:nth-child(1) {
        width: 50%; }
        @media screen and (max-width: 480px) {
          .plan .planbox ul li:nth-child(1) {
            width: 100%; } }
        .plan .planbox ul li:nth-child(1) figure {
          margin: 0 auto 5%; }
        .plan .planbox ul li:nth-child(1) dl {
          width: 100%;
          margin: 0 auto 3%;
          padding: 15px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          background: rgba(255, 255, 255, 0.5); }
          .plan .planbox ul li:nth-child(1) dl dt {
            width: 30%;
            position: relative;
            line-height: 0; }
            .plan .planbox ul li:nth-child(1) dl dt span {
              padding: 8px 5px;
              position: absolute;
              top: -5px;
              left: -5px;
              z-index: 1;
              display: inline-block;
              background: #ff4d32;
              color: #fff;
              font-size: 12px;
              font-weight: 700;
              line-height: 0; }
            .plan .planbox ul li:nth-child(1) dl dt.x2 span:nth-of-type(2) {
              left: 15px; }
          .plan .planbox ul li:nth-child(1) dl dd {
            width: 65%; }
            .plan .planbox ul li:nth-child(1) dl dd p.ttl {
              margin: 0 0 2%;
              border-bottom: 1px solid #000;
              font-size: 15px;
              font-weight: 700;
              letter-spacing: .05em; }
              @media screen and (max-width: 768px) {
                .plan .planbox ul li:nth-child(1) dl dd p.ttl {
                  font-size: 1.6vw; } }
              @media screen and (max-width: 480px) {
                .plan .planbox ul li:nth-child(1) dl dd p.ttl {
                  font-size: 2.8vw; } }
            .plan .planbox ul li:nth-child(1) dl dd p.comment {
              text-align: justify;
              font-size: 11px;
              letter-spacing: .03em;
              line-height: 1.5; }
              @media screen and (max-width: 768px) {
                .plan .planbox ul li:nth-child(1) dl dd p.comment {
                  font-size: 1.2vw; } }
              @media screen and (max-width: 480px) {
                .plan .planbox ul li:nth-child(1) dl dd p.comment {
                  font-size: 2.5vw; } }
      .plan .planbox ul li:nth-child(2) {
        width: 45%;
        margin: auto;
        display: block; }
        @media screen and (max-width: 480px) {
          .plan .planbox ul li:nth-child(2) {
            width: 100%; } }
        .plan .planbox ul li:nth-child(2) figure figcaption {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          line-height: 1; }
          .plan .planbox ul li:nth-child(2) figure figcaption .type_wrap {
            width: 100%;
            margin: 0 auto 3%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            color: #fff; }
            .plan .planbox ul li:nth-child(2) figure figcaption .type_wrap .type {
              display: flex;
              align-items: flex-end;
              font-size: clamp(28px, 4.03vw, 50px);
              letter-spacing: 0.1em; }
              .plan .planbox ul li:nth-child(2) figure figcaption .type_wrap .type .text_lg {
                font-size: 1.5em; }
              .plan .planbox ul li:nth-child(2) figure figcaption .type_wrap .type .text_min {
                font-size: 1.3em; }
            .plan .planbox ul li:nth-child(2) figure figcaption .type_wrap .space {
              font-size: clamp(24px, 3.54vw, 44px);
              margin-left: 0.5em;
              letter-spacing: 0.1em; }
          .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 15px; }
            .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_main {
              width: 100%;
              margin: 0 auto 2%;
              display: flex;
              justify-content: center;
              align-items: baseline; }
              .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_main .size_head {
                font-size: clamp(12px, 1.45vw, 18px);
                margin-right: 0.5em; }
              .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_main .size {
                display: flex;
                align-items: baseline;
                font-size: clamp(24px, 3.54vw, 44px); }
                .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_main .size .text_in {
                  display: flex;
                  align-items: baseline; }
                .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_main .size .text_min {
                  font-size: 0.65em; }
                .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_main .size .size_sub {
                  font-size: 0.45em; }
            .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_sub {
              width: 100%;
              display: flex;
              justify-content: center;
              font-size: clamp(8px, 0.8vw, 10px); }
              .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_sub li:nth-child(1), .plan .planbox ul li:nth-child(2) figure figcaption .size_wrap .size_sub li:nth-child(2) {
                width: 49%; }
        .plan .planbox ul li:nth-child(2) figure img {
          width: 100%; }
    .plan .planbox:last-of-type {
      margin: 0 auto; }

ul.contact-area {
  max-width: 660px;
  margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  line-height: 0; }
  @media screen and (max-width: 768px) {
    ul.contact-area {
      max-width: 70%; } }
  @media screen and (max-width: 480px) {
    ul.contact-area {
      max-width: 90%; } }
  ul.contact-area li {
    width: 42%; }
    @media screen and (max-width: 480px) {
      ul.contact-area li {
        width: 45%; } }
    ul.contact-area li a {
      width: 100%;
      padding: 30px 0;
      display: block;
      background: #000;
      color: #fff;
      font-size: 25px;
      letter-spacing: .2em; }
      @media screen and (max-width: 768px) {
        ul.contact-area li a {
          padding: 20px 0;
          font-size: 2vw; } }
      @media screen and (max-width: 480px) {
        ul.contact-area li a {
          padding: 20px 0;
          font-size: 4vw; } }
      ul.contact-area li a:hover {
        opacity: 0.7;
        transition: opacity .3s ease-out; }

.pc {
  display: inherit; }

.sp {
  display: none; }

@media screen and (max-width: 480px) {
  .pc {
    display: none; }

  .sp {
    display: block; } }