@charset "UTF-8";

.home-contents {
  max-width: 1280px;
  margin-top: 2vh;
  margin-bottom: 30vh;
/*  margin-left: 30vw; */
  margin-left: auto;
  margin-right: auto;
/*  display: flex;*/
  
  .basic-paper {
    padding: 0 18px 9px 18px;
  }
/*
  .contents{
    flex: 3;
    padding: 0 18px 9px 18px;
  }

  .side {
    flex: 1;
    padding: 9px;
    border-left: 1px solid rgb(223, 145, 0);
  }
*/
}

.home-carousel {
  margin-top: 126px;
} 

@media (max-width: 576px) {
  .home-carousel {
    margin-top: 116px;
  }
}

/*-- メイン --*/
.site-theme {
  max-width: 1280px;
  margin-top: 24vh;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 576px) {
  .site-theme {
    margin-top: 14vh;
  }
}

.home-section {
  max-width: 1280px;
  margin: 1.0rem auto 0.2rem auto;
  width: 98%;
  padding: 9px;

  .section-title {
    text-align: center;
    h2 {
      font-size: 1.4rem; 
	    color: #555;
	    border-bottom: solid 2px #d94b27;
/*	padding: 6px 0 6px 0; */
      letter-spacing: 0.13em;
      margin-bottom: 12px;
    }

    h3 {
      margin: 1.3rem 0;
      font-size: 1.3rem;
      display: inline-block;
      font-weight:bold;
      padding: 0 0 5px 0;
    }
  }
}

.head-links {
  display: flex;
  max-width: 72%;
  margin: auto;
  .link-button {
    border: 1px solid rgb(119, 165, 235);
    border-radius: 6px;
    width: 280px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
  }

  .hole-button {
    padding: 12px 6px 6px 6px;
  }

  .studio-button {
    padding: 6px 6px 6px 6px;    
  }

  
  @media screen and (max-width: 576px) {
    max-width: 100%;

    .link-button {
      width: 100%;
      padding: 6px 9px;
    }

  }
}

.hero {
/*
  border: 1px solid rgb(143, 207, 253); 
  border-radius: 6px;
*/
  text-align: center;
  h1 {
    font-size: 1.6rem;
    color: #555;

    position: relative;
    display: inline-block;
    margin-bottom: 1.6rem;

    &::before {
      content: '';
      position: absolute;
      bottom: -1.8rem;
      display: inline-block;
      width: 10vw;
      height: 3px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgb(183, 224, 78);
      border-radius: 2px;
    }
  }

  .context {
    text-align: left;
    margin: 2.0rem 0 0.6rem 0;
    padding: 18px;

  }

  @media screen and (max-width: 576px) {
    h1 {
      font-size: 1.3rem;

    }
  }

}

.access-map,
.floor {

  h2 {
    font-size: 1.3rem;
    position: relative;
    padding: 0.5rem 0 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, #b2d5de 0% 50%, #353535 50%);
    background-repeat: no-repeat;
    background-size: 4rem 0.2rem;
    background-position: bottom;
    color: #353535;
    text-align: center;

  }

  .address {
    font-size: 1.0rem;
    padding-bottom: 24px;
    dt {
      font-weight: normal;
      border-bottom: solid 1px #ad9b95;
    }
    dd {
      margin-left: 12px;
      margin-top: 3px;
      margin-bottom: 9px;
    }
  }

  .google-map {
    display: flex;
    max-width: 50%;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    margin: auto;
  }

  .floor-spec {
    padding: 9px;
  }

  .floor-map {
/*    position: relative; */
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100%; /* 親要素の高さを設定 */
    margin: auto;

    img {
/*      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      */
      max-width: 36vh;
      height: auto;
    }
  }  

}

.news {

  .news-titles {

/*  margin: 1.2rem auto; */
    position: relative;
    margin: 1.2rem 0 1.2rem 0;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgb(164, 176, 221);

    h2 {
      position: absolute;
      display: inline-block;
      top: -13px;
      left: 10px;
      padding: 0 9px;
      line-height: 1;
      font-size: 1.2rem;
      background: #FFF;
      color: #0f4355;
      font-weight: bold;
    }

    ul {
      margin-top: 9px;
      margin-bottom: 9px;
    }
 
    .title-with-icon {
      display: flex;
      align-items: center;
      font-size: 16px; /* フォントサイズ */
      color: #333; /* 文字色 */
    }

    .title-with-icon i {
      margin-right: 5px; /* アイコンの右マージン */
      color: #f4c03d; /* アイコンの色 */
    }

    .post-date {
      font-size: 0.9rem;
    }
  }

  .calendar {
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100%; /* 親要素の高さを設定 */
    margin: auto;
    text-align: ceter;
  }  
}


.home-price {
  h2 {
    font-size: 1.3rem;
    position: relative;
    padding: 0.5rem 0 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, #b2d5de 0% 50%, #353535 50%);
    background-repeat: no-repeat;
    background-size: 4rem 0.2rem;
    background-position: bottom;
    color: #353535;
    text-align: center;

  }

  h3 {
    font-size: 1.2rem;
    padding: 0.2rem 1.0rem 0.2rem 0;
    margin-bottom: 0.3rem;
    display: inline-block;
    border-bottom: 1px solid #000;

/*
    span {
      background: linear-gradient(transparent 60%, #000 10%);
    }
*/
  }

  .price-abstruct {
/*    width: 640px; */
    margin: 9px auto 18px auto;

    .flow-img {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 640px;
    }
    
  }

  .price-tables{
/*    width: 640px; */
    margin: 12px auto 24px auto;
  }

  table{
    width: 100%;
/*    width: 640px; */
    margin: 18px auto;
/*    border-radius: 10px; */
    border-collapse: separate;
    overflow: hidden;

    th {
      background-color: rgb(225, 234, 237);
      text-align: center;
      height: 2.6rem;
    }

    tr:first-child th:first-child{
      border-radius: 10px 0 0 0;
    }

    tr:first-child th:last-child{
      border-radius: 0 10px 0  0;
    }

    td {
      text-align: right;
      height: 2.4rem;
    }
    /*
    th, td {
      height: 2.4rem;
    }
    th{
      height: 2.4rem;
    }
    td{
      height: 2.4rem;
      background-color: rgb(255, 255, 255);
    }
  }
*/
  }

  /* スマートフォンなど、小さい画面の場合 */
  @media (max-width: 767px) {

    .price-tables{
/*      width: 420px; */
      margin: 12px auto 24px auto;
    }
  
    table {
      font-size: 0.9rem;
      width: 100%;
    }
  }
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* ボタンを均等に配置 */
   border: 1px solid #f00;
  /* PCの場合 */
  @media (min-width: 768px) {
    flex-direction: row; /* 横並び */
  }

  /* スマートフォンなど、小さい画面の場合 */
  @media (max-width: 767px) {
    flex-direction: column; /* 縦並び */
  }

  .button {
    display: inline-block; /* インラインブロック要素にすることで、他の要素と並べられる */
    padding: 15px 30px;
    background-color: #4CAF50; /* ボタンの色 */
    color: white;
    text-align: center;
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインターにする */
    box-sizing: border-box; /* パディングを含めたサイズで幅と高さを指定 */
    width: calc(25% - 10px); /* 4つで割って、間隔を10px空ける */
    height: calc(25% - 10px); /* 4つで割って、間隔を10px空ける */
  }

}

.home-message {
  background-color: #fcfcfc;
  padding: 9px;
/*  border: 1px solid #ddd; */
  border-radius: 9px;

  h2 {
    font-size: 1.2rem;
    padding: 0.2rem 1.0rem 0.2rem 0;
    margin-bottom: 0.3rem;
    display: inline-block;
    border-bottom: 1px solid #000;
  }

  h3 {
    font-size: 1,0rem;
    padding: 0.2rem 1.0rem 0.2rem 0;
    margin-bottom: 0.3rem;
    font-weight: bold;
  }
  p {
    font-size: 0.9rem;
  }
}