@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@300;600&display=swap");
/******************************************************

top

******************************************************/
.yokoku .yokoku_inner {
  max-width: 1000px;
  width: 94%;
  margin: auto;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  display: flex;
  align-items: center; }
  .yokoku .yokoku_inner .yokoku_ttl {
    font-size: 2rem;
    border: 1px solid #999;
    box-sizing: border-box;
    margin-right: 1.4rem;
    padding: 0.6rem 1rem; }
  .yokoku .yokoku_inner .txt {
    flex: 1;
    font-size: 1.3rem; }
@media screen and (max-width: 640px) {
  .yokoku .yokoku_inner {
    display: block; }
    .yokoku .yokoku_inner .yokoku_ttl {
      width: 100%;
      font-size: 1.4rem; }
    .yokoku .yokoku_inner .txt {
      width: 100%;
      margin-top: 1rem; } }

.merit {
  background: #00A0C8;
  text-align: center;
  padding: 10px 0; }
  .merit ul {
    width: 96%;
    max-width: 1400px;
    margin: auto;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    align-items: stretch; }
    .merit ul * {
      min-height: 0%; }
    .merit ul li {
      display: inline-block;
      width: 24%;
      padding: 1rem 2rem;
      text-align: center; }
      .merit ul li img {
        width: 100%;
        height: auto;
        max-width: 360px; }
  @media screen and (max-width: 640px) {
    .merit {
      padding: 0; }
      .merit ul li {
        width: 49%;
        border-left: none;
        padding: .5rem; }
        .merit ul li img {
          max-width: 260px;
          margin: auto; } }

.container {
  background: none;
  /*padding-top: 12rem;*/
  padding-top: 6rem; }
  .container > div.note {
    margin: 5px; }
  @media screen and (max-width: 640px) {
    .container {
      padding-top: 8rem; } }

.information {
  padding: 0 0 60px 0;
  text-align: center;
  font-feature-settings: "palt"; }
  .information .sc {
    font-size: 3.7rem;
    margin-bottom: 30px;
    letter-spacing: 0.1em; }
  @media screen and (max-width: 640px) {
    .information .sc {
      font-size: 3rem; } }

.schedule {
  width: 90%;
  max-width: 954px;
  margin: 0 auto 5rem;
  margin: 5rem auto 0; }
  .schedule img {
    width: 100%;
    height: auto; }

.news {
  margin-bottom: 70px; }
  .news h2 {
    text-align: center; }
  .news ul {
    max-width: 710px;
    width: 90%;
    margin: auto; }
    .news ul li {
      font-size: 14px;
      padding-left: 100px;
      position: relative;
      line-height: 1.7;
      margin-bottom: 20px; }
      .news ul li .date {
        position: absolute;
        top: 0;
        left: 0; }
      .news ul li a {
        text-decoration: underline; }
    @media screen and (max-width: 640px) {
      .news ul li {
        padding-left: 0; }
        .news ul li .date {
          position: static;
          margin-bottom: 10px; } }

.limited_contents {
  background: #f4f7f8;
  text-align: center;
  padding: 40px 0; }
  .limited_contents .txt01 {
    font-size: 3.7rem;
    margin-bottom: 30px;
    letter-spacing: 0.1em; }
    @media screen and (max-width: 640px) {
      .limited_contents .txt01 {
        font-size: 3rem; } }
  .limited_contents .limited_pickup {
    margin-top: 30px; }
    .limited_contents .limited_pickup li {
      display: inline-block;
      width: 46%;
      margin: 2%;
      max-width: 300px; }
      .limited_contents .limited_pickup li .pic img {
        width: 100%;
        height: auto; }
      .limited_contents .limited_pickup li p {
        font-size: 1.5rem;
        margin-top: 10px; }
      @media screen and (max-width: 640px) {
        .limited_contents .limited_pickup li p {
          font-size: 1.3rem; } }
  .limited_contents .flow {
    max-width: 800px;
    margin: 30px auto; }
    .limited_contents .flow .ttl {
      background: #404040;
      color: #fff;
      text-align: center;
      padding: 10px;
      font-size: 1.4rem; }
    .limited_contents .flow ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px; }
      .limited_contents .flow ul li {
        width: 28%;
        text-align: left; }
        .limited_contents .flow ul li.arrow {
          width: 2%;
          padding-top: 7%; }
          .limited_contents .flow ul li.arrow img {
            width: 100%;
            height: auto; }
        @media screen and (max-width: 640px) {
          .limited_contents .flow ul li {
            width: 100%;
            text-align: center; }
            .limited_contents .flow ul li.arrow {
              width: 100%;
              text-align: center; }
              .limited_contents .flow ul li.arrow img {
                width: 20px;
                transform: rotate(90deg); } }
      .limited_contents .flow ul h5 {
        font-size: 1.9rem; }
        .limited_contents .flow ul h5 .step {
          font-family: 'EB Garamond', serif;
          font-weight: 300;
          font-style: normal;
          letter-spacing: 0.05em;
          -webkit-font-smoothing: antialiased;
          color: #157294; }
          .limited_contents .flow ul h5 .step b {
            font-size: 2em; }
      .limited_contents .flow ul p {
        font-size: 1.2rem;
        margin-top: 15px;
        line-height: 1.6; }

.contentsLink {
  overflow: hidden;
  margin-bottom: 50px;
  margin-top: 50px;
  padding-bottom: 5px; }
  .contentsLink .picArea {
    width: 82%; }
    .contentsLink .picArea .pic {
      position: relative; }
      .contentsLink .picArea .pic img {
        width: 100%;
        height: auto; }
      .contentsLink .picArea .pic .note {
        position: absolute;
        bottom: 3px;
        text-shadow: 0 0 3px #fff,0 0 6px #fff,0 0 8px #fff,0 0 10px #fff, 0 0 3px #fff,0 0 6px #fff,0 0 8px #fff,0 0 10px #fff; }
    .contentsLink .picArea > div.note {
      width: 63%; }
    @media screen and (max-width: 640px) {
      .contentsLink .picArea {
        width: 100%; }
        .contentsLink .picArea > div.note {
          width: 100%; } }
  .contentsLink .txtArea {
    width: 45%;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px #ccc;
    position: relative;
    z-index: 2;
    margin-top: -240px; }
    .contentsLink .txtArea .inner {
      padding: 50px 30px; }
      .contentsLink .txtArea .inner h4 {
        font-size: 3rem;
        margin-bottom: 20px; }
        .contentsLink .txtArea .inner h4 small {
          display: block;
          font-size: 1.4rem;
          font-family: 'EB Garamond', serif;
          font-weight: 300;
          font-style: normal;
          letter-spacing: 0.05em;
          -webkit-font-smoothing: antialiased;
          color: #3EA6B2;
          margin-top: 10px; }
      .contentsLink .txtArea .inner p {
        font-size: 1.6rem;
        line-height: 1.8;
        letter-spacing: 0.05em; }
      .contentsLink .txtArea .inner .btn {
        width: 80%;
        margin: 20px auto 0; }
        .contentsLink .txtArea .inner .btn a {
          display: block;
          width: 100%;
          padding: 13px 0;
          color: #fff;
          font-size: 1.6rem;
          letter-spacing: 0.1em;
          position: relative;
          background: #c31831;
          transition: .3s; }
          .contentsLink .txtArea .inner .btn a span {
            display: inline-block;
            position: relative;
            z-index: 2; }
          .contentsLink .txtArea .inner .btn a::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: #333;
            transform-origin: 100% 50%;
            transform: scaleX(0);
            transition: transform ease .4s; }
          .contentsLink .txtArea .inner .btn a::after {
            content: "";
            display: block;
            position: absolute;
            right: 10px;
            top: 38%;
            width: 10px;
            height: 10px;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            z-index: 2; }
          .contentsLink .txtArea .inner .btn a:hover {
            /*filter: brightness(120%);*/ }
            .contentsLink .txtArea .inner .btn a:hover::before {
              transform-origin: 0% 50%;
              transform: scaleX(1); }
      .contentsLink .txtArea .inner .soon span {
        display: block;
        width: 100%;
        padding: 13px 0;
        color: #fff;
        font-size: 1.6rem;
        letter-spacing: 0.1em;
        position: relative;
        background: #555;
        transition: .3s; }
    @media screen and (max-width: 640px) {
      .contentsLink .txtArea {
        width: 98%;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto; } }

.contentsLinkBox .contentsLink .picArea {
  float: left; }
  .contentsLinkBox .contentsLink .picArea .pic .note {
    left: 3px; }
.contentsLinkBox .contentsLink .txtArea {
  float: right;
  margin-right: 5px; }
@media screen and (max-width: 640px) {
  .contentsLinkBox .contentsLink .picArea {
    float: none; }
  .contentsLinkBox .contentsLink .txtArea {
    float: none;
    margin-right: auto; } }
.contentsLinkBox .contentsLink:nth-of-type(2n) .picArea {
  float: right; }
  .contentsLinkBox .contentsLink:nth-of-type(2n) .picArea .pic .note {
    right: 3px; }
.contentsLinkBox .contentsLink:nth-of-type(2n) .txtArea {
  float: left;
  margin-left: 5px; }
@media screen and (max-width: 640px) {
  .contentsLinkBox .contentsLink:nth-of-type(2n) .picArea {
    float: none; }
  .contentsLinkBox .contentsLink:nth-of-type(2n) .txtArea {
    float: none;
    margin-left: auto; } }

#concept .picArea .note, #location .picArea .note {
  position: relative;
  margin-right: auto;
  margin-left: 0;
  right: auto;
  left: auto; }

#town .picArea img {
  border: solid 1px #ddd; }
#town .picArea .note {
  margin-right: 0;
  margin-left: auto;
  text-align: right; }
@media screen and (max-width: 640px) {
  #town .picArea .note {
    text-align: left; } }

#access .picArea .note {
  position: relative;
  display: block;
  text-align: right;
  left: auto;
  bottom: auto;
  right: auto; }
@media screen and (max-width: 640px) {
  #access .picArea .note {
    text-align: left; } }

/*#concept,
#house,
#access {
  .picArea {
    float: left;
    .pic {
      .note {
        left: 3px;
      }
    }
  }
  .txtArea { float: right; margin-right: 5px; }
  @media screen and (max-width: $s-size) {
    .picArea { float: none; }
    .txtArea { float: none; margin-right: auto; }
  }
}

#town,
#location,
#plan {
  .picArea {
    float: right;
    .pic {
      .note {
        right: 3px;
      }
    }
  }
  .txtArea { float: left; margin-left: 5px; }
  @media screen and (max-width: $s-size) {
    .picArea { float: none; }
    .txtArea { float: none; margin-left: auto; }
  }
}*/
.btn_sf {
  padding-bottom: 8rem; }
  @media screen and (max-width: 640px) {
    .btn_sf {
      padding-bottom: 4rem; } }