@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: #F4F8FB; padding: 4rem 0; }
@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: #454d67; }
.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: #4585c2; font-size: 2.5rem; line-height: 1; letter-spacing: 0.1em; }
.plan-detail-container .type .em { font-size: 128%; }
.plan-detail-container .label { padding: 6px 12px; background-color: #4585c2; 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%); }
.plan-detail-container .area-info { padding-bottom: 6px; border-bottom: thin solid rgba(69, 77, 103, 0.64); 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; }
.plan-detail-container .fig { max-width: 600px; margin: 2.5rem auto 1.5rem; text-align: center; }
.plan-detail-container .fig .hanrei { display: inline-block; margin: 2rem auto 0; text-align: left; }
@media screen and (max-width: 600px) { .plan-detail-container { padding: 1.5rem; }
  .plan-detail-container .type-info { margin-bottom: 1rem; }
  .plan-detail-container .type { font-size: 2rem; }
  .plan-detail-container .label { font-size: 0.875rem; }
  .plan-detail-container .area-info { grid-template-columns: 1fr; gap: 0; }
  .plan-detail-container .layout { text-align: center; font-size: 1.5rem; }
  .plan-detail-container .areasize { text-align: center; font-size: 1rem; }
  .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 #000; 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: rgba(69, 133, 194, 0.24); }