@import url("https://fonts.googleapis.com/css?family=EB+Garamond&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MaterialIcons-Regular.eot"), url("../fonts/MaterialIcons-Regular.ttf") format("truetype"), url("../fonts/MaterialIcons-Regular.woff") format("woff"); }
a {
  cursor: pointer; }

.mv {
  background-image: url("../images/plan_terrace/mv.jpg");
  background-position: center !important;
  height: 813px; }
  @media print, screen and (max-width: 800px) {
    .mv {
      background-image: url("../images/plan_terrace/mv_sp.jpg"); } }

.plan_terrace_wrap {
  width: 90%;
  max-width: 1200px;
  margin: 100px auto 140px; }
  @media print, screen and (max-width: 800px) {
    .plan_terrace_wrap {
      margin: 60px auto 100px; } }
  .plan_terrace_wrap .main_img {
    position: relative; }
  .plan_terrace_wrap .main_title {
    text-align: left;
    width: 90%;
    margin: 90px auto 70px 0; }
    @media print, screen and (max-width: 800px) {
      .plan_terrace_wrap .main_title {
        margin: 50px auto 40px 0;
        width: 100%; } }
  .plan_terrace_wrap .sec_point {
    margin: 0 auto; }
    .plan_terrace_wrap .sec_point .box_point .point_img {
      position: relative; }
    @media print, screen and (max-width: 800px) {
      .plan_terrace_wrap .sec_point .point01 .title {
        margin-bottom: -15px !important; } }
    .plan_terrace_wrap .sec_point .point01 .point_img .img_title {
      text-align: center;
      font-size: 16px;
      margin-bottom: 10px; }
      @media print, screen and (max-width: 800px) {
        .plan_terrace_wrap .sec_point .point01 .point_img .img_title {
          text-align: left;
          margin-bottom: 3px;
          font-size: 14px; } }
    .plan_terrace_wrap .sec_point .flex_box {
      margin: 60px auto 0;
      display: flex;
      gap: 40px;
      justify-content: space-between; }
      @media print, screen and (max-width: 1100px) {
        .plan_terrace_wrap .sec_point .flex_box {
          gap: 30px; } }
      @media print, screen and (max-width: 800px) {
        .plan_terrace_wrap .sec_point .flex_box {
          flex-direction: column;
          margin-top: 45px;
          gap: 20px; } }
      .plan_terrace_wrap .sec_point .flex_box .box {
        width: calc(100% / 2);
        position: relative; }
        @media print, screen and (max-width: 800px) {
          .plan_terrace_wrap .sec_point .flex_box .box {
            width: 100%; } }
  .plan_terrace_wrap .sec_benefit {
    background-color: #d6d1ca;
    padding: 30px;
    margin: 80px auto 0; }
    @media print, screen and (max-width: 800px) {
      .plan_terrace_wrap .sec_benefit {
        margin: 60px auto 0;
        padding: 30px 15px; } }
    .plan_terrace_wrap .sec_benefit .benefit_title {
      margin: 0 auto; }
    .plan_terrace_wrap .sec_benefit .benefit01 {
      position: relative;
      margin: 30px auto 45px; }
      @media print, screen and (max-width: 800px) {
        .plan_terrace_wrap .sec_benefit .benefit01 {
          margin: 15px auto 30px; } }
    .plan_terrace_wrap .sec_benefit .flex_benefit {
      display: flex;
      gap: 40px;
      justify-content: space-between; }
      @media print, screen and (max-width: 1100px) {
        .plan_terrace_wrap .sec_benefit .flex_benefit {
          gap: 30px; } }
      @media print, screen and (max-width: 800px) {
        .plan_terrace_wrap .sec_benefit .flex_benefit {
          flex-direction: column;
          gap: 30px; } }
      .plan_terrace_wrap .sec_benefit .flex_benefit .box {
        width: calc(100% / 2);
        position: relative; }
        @media print, screen and (max-width: 800px) {
          .plan_terrace_wrap .sec_benefit .flex_benefit .box {
            width: 100%; } }
  .plan_terrace_wrap .plan_area .plan_list {
    margin: 60px auto 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media print, screen and (max-width: 640px) {
      .plan_terrace_wrap .plan_area .plan_list {
        flex-direction: column; } }
    .plan_terrace_wrap .plan_area .plan_list li {
      width: 48%;
      max-width: 580px;
      margin: 0 auto; }
      @media print, screen and (max-width: 640px) {
        .plan_terrace_wrap .plan_area .plan_list li {
          width: 100%; } }
      .plan_terrace_wrap .plan_area .plan_list li img {
        width: 100%; }