/**$txt:#333;
$txt2: #3e5059;**/
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
.plan-detail-wrap .page-wrapper {
  background-color: #dee4e6;
  padding: 4rem 0; }
  .plan-detail-wrap .page-wrapper .inner {
    width: 100% !important; }
@media screen and (max-width: 600px) {
  .plan-detail-wrap .page-wrapper {
    padding-top: 2rem;
    padding-bottom: 3rem; } }

.plan-detail-container {
  width: 100%;
  max-width: 800px;
  margin: auto;
  background-color: #fff;
  padding: 2.5rem;
  position: relative;
  color: #000; }
  .plan-detail-container .type-info {
    position: relative;
    margin-bottom: 1.5rem; }
  .plan-detail-container .type {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: #4f7a7e;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0.1em; }
    .plan-detail-container .type .em {
      font-size: 128%; }
    .plan-detail-container .type .menu {
      display: inline-block;
      font-size: 1rem;
      padding: 2px 12px 12px;
      line-height: 0.5;
      color: #4585c2;
      letter-spacing: 0; }
  .plan-detail-container .label {
    padding: 6px 12px;
    background-color: #879fa7;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.05em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: none !important; }
  .plan-detail-container .area-info {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: thin solid #879fa7;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    gap: 1rem;
    align-items: flex-end; }
  .plan-detail-container .layout {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.2; }
    .plan-detail-container .layout .em {
      font-size: 128%; }
  .plan-detail-container .areasize {
    font-size: 1.125rem;
    line-height: 1.2; }
    .plan-detail-container .areasize .digit {
      font-family: "EB Garamond", serif;
      font-optical-sizing: auto;
      font-style: normal;
      font-weight: 400;
      font-size: 2rem;
      letter-spacing: 0.05em; }
      .plan-detail-container .areasize .digit .em {
        font-size: 128%; }
    .plan-detail-container .areasize .unit {
      font-size: 1.5rem;
      margin-right: 4px; }
  .plan-detail-container .other-areasize {
    padding-top: 6px;
    font-size: 1rem; }
    .plan-detail-container .other-areasize li {
      line-height: 1.2;
      margin-top: 4px; }
  .plan-detail-container .fig {
    margin: 2.5rem auto 1.5rem;
    text-align: center; }
    .plan-detail-container .fig .hanrei {
      display: inline-block;
      margin: 2rem auto 0;
      text-align: left; }
      .plan-detail-container .fig .hanrei img {
        transform: translateY(-0.2rem); }
  @media screen and (max-width: 600px) {
    .plan-detail-container {
      padding: 1.5rem; }
      .plan-detail-container .type-info {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 1rem; }
      .plan-detail-container .type {
        text-align: center;
        font-size: 2rem; }
        .plan-detail-container .type .menu {
          padding: 5px 12px 12px;
          vertical-align: text-bottom; }
      .plan-detail-container .label {
        position: static;
        font-size: 0.875rem; }
      .plan-detail-container .area-info {
        grid-template-columns: 1fr;
        gap: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; }
      .plan-detail-container .layout {
        text-align: center;
        font-size: 1.5rem;
        margin: 0 2.5%; }
      .plan-detail-container .areasize {
        text-align: center;
        font-size: 1rem;
        margin: 0 2.5%; }
        .plan-detail-container .areasize .digit {
          font-size: 1.75rem; }
        .plan-detail-container .areasize .unit {
          font-size: 1.25rem; }
      .plan-detail-container .other-areasize {
        font-size: 0.875rem; } }

.plan-btn-container {
  padding: 1.5rem 0;
  text-align: center; }
  .plan-btn-container .btn {
    display: inline-block;
    max-width: 320px;
    margin: auto; }
    .plan-btn-container .btn a {
      display: block;
      border: thin solid #4f7a7e;
      padding: 0.75rem 1.5rem;
      transition: background .4s; }
      .plan-btn-container .btn a p {
        text-align: center;
        line-height: 1;
        font-size: 1rem;
        color: #000; }
      .plan-btn-container .btn a:hover {
        background-color: #4f7a7e; }
        .plan-btn-container .btn a:hover p {
          color: #fff; }

.plan_e .plan-detail-container .area-info {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 1rem; }
@media screen and (max-width: 600px) {
  .plan_e .plan-detail-container .area-info {
    flex-direction: column;
    align-items: center; } }

.merit-det {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2em; }
  .merit-det li {
    background: #7a959d;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    padding: 0.6em 1%;
    box-sizing: border-box;
    margin-bottom: 0.2em; }
    .merit-det li p {
      text-align: center;
      color: #fff;
      font-size: 1em; }
  @media screen and (max-width: 834px) {
    .merit-det li {
      width: 100%; } }

.plan-detail-wrap.gold-plan .page-wrapper {
  background-color: #ddd7c5; }
.plan-detail-wrap.gold-plan .merit-det li {
  background: #b2a169; }
.plan-detail-wrap.gold-plan .plan-detail-container .type {
  color: #896f19; }
  .plan-detail-wrap.gold-plan .plan-detail-container .type .menu {
    color: #7f0201; }
.plan-detail-wrap.gold-plan .plan-detail-container .area-info {
  border-bottom: thin solid #896f19; }