@charset "UTF-8";



.coming-soon-box{ width:80%; margin:0 auto; padding:20% 0; }
.coming-soon-box .c-txt{ font-size:8vw; color:#B98560; text-align:center; }





@media screen and (min-width: 768px), print {
  :root {
    --main-color: #b98560;
    --accent-color: #b79333;
    --text-color: #543926;
    --black-color: #3a3934;
    --blue-color: #608db9;
  }
  main p {
    color: #3a3934;
    letter-spacing: 0.05em;
    line-height: 2;
  }
  .flex {
    display: flex;
    justify-content: space-between;
  }
  #contentsmain {
    margin-bottom: 60px;
    width: 1100px;
    margin: 73px auto 100px;
    text-align: center;
  }
  #contentsmain h2 {
    font-size: 48px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 63px;
    letter-spacing: 0.05em;
  }
  .contentsmain-img {
    margin-bottom: 65px;
  }
  #contentsmain .contentsmain-underbox p {
    font-size: 20px;
    line-height: 2.3;
    color: #543926;
  }
  .contentsmain-underbox p:first-of-type {
    margin-bottom: 46px;
  }
  .contentsmain-list {
    display: flex;
    justify-content: center;
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 63px;
    color: #543926;
    li {
      width: 438px;
      background-color: #fff;
      padding: 37px 20px 20px;
      position: relative;
      margin: 0 22.5px;
      p {
        color: #543926;
      }
      .list-price {
        font-size: 32px;
      }
      .list-ttl {
        background-color: #ecc867;
        display: inline-block;
        padding: 4px 40px;
        border-radius: 40px;
        color: #fff;
        font-size: 20px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-family: "Zen Maru Gothic", sans-serif;
      }
      .note {
        font-size: 15px;
        font-weight: 400;
      }
    }
  }
  #contents01 {
    width: 1100px;
    margin: 0 auto 100px;
    background-color: #fff;
    padding: 40px 95px 50px;
    font-size: 18px;
    position: relative;
    .contents01-icon {
      display: inline-block;
    }
    .contents01-text {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 24px;
      font-weight: 500;
      color: #543926;
      text-align: center;
    }
    h3 {
      font-family: "Zen Maru Gothic", sans-serif;
      padding-bottom: 4px;
      font-size: 38px;
      font-weight: 500;
      margin-bottom: 29px;
      text-align: center;
      color: #543926;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    h3:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0; /* 下線の位置 */
      width: 100%;
      height: 2px; /* ドットの直径 */
      background-image: radial-gradient(circle, #b79333 1px, transparent 1px);
      background-size: 10px 2px; /* ドット直径2px + 間隔8px */
      background-repeat: repeat-x;
    }
    /* アイコン用 figure のリセット＆箱サイズを固定 */
    h3 .contents01-icon {
      margin: 0; /* ← figure のデフォルト上下余白を消す */
      flex: 0 0 auto;
      width: 48px; /* お好みで調整 */
      height: 48px; /* お好みで調整 */
      display: flex;
      align-items: center; /* picture/img を箱の中央へ */
      justify-content: center;
    }

    /* 画像を箱にフィット */
    h3 .contents01-icon img {
      display: block; /* 画像の下の隙間を防ぐ */
      width: 100%;
      height: 100%;
      object-fit: contain; /* はみ出し防止・比率維持 */
    }

    .contents01-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 48%;
        margin-bottom: 21px;
        background: url(../images/cosodate/listicon.png) left 6px no-repeat;
        padding-left: 30px;
      }
    }
    .contents01-img {
      text-align: center;
      margin: -20px auto 7px;
      display: block;
    }
  }
  #contents01::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 150px;
    height: 224px;
    background: url(../images/cosodate/contents01_bg.png) center;
  }
  #contents02 {
    width: 1100px;
    margin: 0 auto 100px;
    .flex {
      gap: 35px;
    }
    h2 {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 1.48;
      margin-bottom: 65px;
      text-align: center;
      color: #543926;
      letter-spacing: 0.05em;
    }
    .contents02-r {
      h3 {
        color: #dc7c37;
        font-size: 25px;
        font-family: "Zen Maru Gothic", sans-serif;
        font-weight: 500;
        margin-bottom: 30px;
        margin-top: 22px;
      }
      p {
        margin-bottom: 10px;
      }
    }
  }
  .contents-commonbox-num {
    font-size: 111px;
    font-family: "Montserrat";
    color: var(--accent-color);
    font-weight: 500;
    margin-right: 30px;
    line-height: 1;
  }
  .contents-commonbox-ttl {
    font-size: 38px;
    color: var(--text-color);
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  .contents01-2column {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .contents01-2column-r {
    margin-left: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    p {
      margin-bottom: 20px;
    }
  }
  .contents01-2column h3 {
    color: #dc7c37;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 26px;
  }
  .text-dotline {
    position: relative;
  }

  .text-dotline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; /* 下線の位置 */
    width: 100%;
    height: 3px; /* ドットの直径 */
    background-image: radial-gradient(circle, #b79333 1.5px, transparent 1.5px);
    background-size: 6px 3px; /* 横方向の間隔を調整 */
    background-repeat: repeat-x;
  }
  #contents03 {
    width: 1100px;
    margin: 0 auto 120px;
  }
  .contents-commonbox {
    margin-bottom: 50px;
  }
  .contetns03-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 19px;
    li {
      width: calc(33% - 10px);
      background: #fff;
      padding: 20px 10px;
      display: flex;
      align-items: center;
      gap: 18px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 20px;
      font-weight: 500;
      p {
        line-height: 1.5;
        color: #543926;
      }
    }
    li.last-text {
      background: none;
      width: 66%;
      font-size: 16px;
      font-weight: 400;
      line-height: 2;
      font-family: "noto sans", sans-serif;
    }
  }
  #contents03 .text-dotline {
    margin-bottom: 50px;
    padding-bottom: 15px;
  }
  .change figure {
    order: 2;
  }
  .change .contents01-2column-r {
    margin-left: 0;
    margin-right: 35px;
  }
  .common-underbox {
    background: url(../images/cosodate/common_footer_photo.png) center top
      no-repeat;
    margin: 0 auto 100px;
    text-align: center;
    max-width: 1920px;
    height: 600px;
    position: relative;
  }
  .common-underboxtext {
    background-color: #fff;
    height: 268px;
    width: 878px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    bottom: 0;
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    right: 0;
  }
  .common-underbox-ttl {
    color: var(--text-color);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.6;
  }
  #contents05 {
    width: 1100px;
    margin: 0 auto 120px;
  }
  .common-bnrBox {
    display: flex;
    justify-content: space-between;
    li {
      width: 350px;
      font-size: 16px;
    }
    p {
      margin-top: 25px;
    }
  }
  .basic-btn a {
    background-color: var(--main-color);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 60px;
    margin: 0 auto;
    position: relative;
  }
  .basic-btn a:after {
    content: ">";
    position: absolute;
    right: 30px;
    top: 47%;
    transform: translateY(-50%);
    font-family: "Zen Maru Gothic", sans-serif;
  }
  .basic-btn a:hover {
    text-decoration: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1450px) {
}

@media screen and (max-width: 767px) {
  :root {
    --main-color: #b98560;
    --accent-color: #b79333;
    --text-color: #543926;
    --black-color: #3a3934;
    --blue-color: #608db9;
  }
  body {
    background: #faf6f2;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  main p {
    color: #3a3934;
    letter-spacing: 0.05em;
    line-height: 2;
    font-size: 3.86vw;
    margin-bottom: 2vw;
  }
  #contentsmain {
    margin-bottom: 14.49vw;
    padding: 0 2.9vw;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 12vw;
    margin-bottom: 27vw;
  }
  #contentsmain h2 {
    font-size: 6.52vw;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: #543926;
    margin-bottom: 8vw;
  }
  .contentsmain-img {
    margin-bottom: 10vw;
  }
  #contentsmain .contentsmain-underbox p {
    font-size: 3.86vw;
    text-align: left;
    line-height: 2;
    color: #543926;
  }
  .contentsmain-underbox p:first-of-type {
    margin-bottom: 2vw;
  }
  .contentsmain-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 6vw;
    gap: 10.14vw;
    li {
      width: 100%;
      background-color: #fff;
      padding: 5vw;
      position: relative;
      color: #543926;
      p {
        color: #543926;
        font-size: 4.35vw;
        line-height: 1.4;
      }
      .list-price {
        font-size: 7.73vw;
      }
      .list-ttl {
        background-color: #ecc867;
        display: inline-block;
        padding: 2vw 7vw;
        border-radius: 9.66vw;
        color: #fff;
        font-size: 4.35vw;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-family: "Zen Maru Gothic", sans-serif;
      }
      .note {
        font-size: 15px;
        font-weight: 400;
      }
    }
  }
  #contents01 .contents01-icon{
    width: 6vw;
    margin: 0 auto;
}
  #contents01 {
    width: calc(100% - 5.8vw);
    margin: 0 2.9vw 100px;
    background-color: #fff;
    padding: 7.25vw;
    font-size: 4.35vw;
    position: relative;
    .contents01-text {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 5.31vw;
      font-weight: 500;
      color: #543926;
      padding-right: 6.7vw;
      text-align: left;
      line-height: 1.73;
    }
    h3 {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 7.25vw;
      font-weight: 500;
      margin-bottom: 9.18vw;
      text-align: center;
      color: #543926;
      border-bottom: 1px dotted #543926;
      padding-bottom: 4vw;
    }
    .contents01-list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      li {
        width: 100%;
        margin-bottom: 5.07vw;
        font-size: 3.62vw;
        background: url(../images/cosodate/listicon.png) left 1vw no-repeat;
        padding-left: 7.25vw;
      }
    }
    .contents01-img {
      text-align: center;
      margin: 0 auto 3.38vw;
      display: block;
      width: 8.45vw;
    }
  }
  #contents01::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 23.67vw;
    height: 35.27vw;
    background: url(../images/cosodate/sp-contents01_bg.png) center;
    background-size: contain;
  }
  #contents02 {
    width: 100%;
    margin: 0 auto;
    padding: 0 5.31vw;
    .flex {
      gap: 35px;
    }
    h2 {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 6.28vw;
      font-weight: 700;
      line-height: 1.48;
      margin-bottom: 9.18vw;
      text-align: center;
      color: #543926;
    }
    .contents02-r {
      h3 {
        color: #dc7c37;
        font-size: 4.59vw;
        font-family: "Zen Maru Gothic", sans-serif;
        font-weight: 500;
        margin-top: 5vw;
        margin-bottom: 7.25vw;
      }
      p {
        margin-bottom: 5.31vw;
      }
    }
  }
  .common-underbox {
    background: url(../images/cosodate/sp-common_footer_photo.png) center top
      no-repeat;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 110.14vw;
    position: relative;
    padding: 0 2.9vw;
    display: flex;
    align-items: center;
    background-size: 100%;
  }
  .common-underboxtext {
    background-color: #fff;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
    padding: 7vw 4.83vw;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .common-underbox-ttl {
    color: var(--text-color);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 5.31vw;
    font-weight: 500;
    margin-bottom: 3.86vw;
    line-height: 1.6;
    text-align: center;
  }
  .common-bnrBox {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    padding: 0 7.73vw 26.57vw;
    gap: 9.66vw;
    li {
      width: 100%;
      font-size: 3.86vw;
    }
    p {
      margin-top: 6.04vw;
    }
  }
  .common-bnrBox {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    padding: 26.57vw 7.73vw 26.57vw;
    gap: 9.66vw;
    li {
      width: 100%;
      font-size: 3.86vw;
    }
    p {
      margin-top: 6.04vw;
    }
  }
  #contents03 {
    width: 100%;
    padding: 0 5.8vw;
    .text-dotline {
      display: flex;
      align-items: end;
    }
    h2 {
      padding-bottom: 6vw;
      display: flex;
      align-items: end;
      margin: 0 0 4.83vw;
    }
  }
  .contents-commonbox-num {
    font-size: 14.49vw;
    font-family: "Montserrat";
    color: var(--accent-color);
    font-weight: 500;
    margin-right: 4vw;
    line-height: 1;
  }
  .contents-commonbox-ttl {
    font-size: 5.31vw;
    color: var(--text-color);
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    line-height: 1.4;
  }
  .contents01-2column {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16vw;
    flex-direction: column;
  }
  .contents01-2column-r {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 4.83vw;
  }
  .contents01-2column h3 {
    color: #dc7c37;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 4.59vw;
    font-weight: 500;
    margin-bottom: 3.86vw;
  }
  .text-dotline {
    position: relative;
  }

  .text-dotline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; /* 下線の位置 */
    width: 100%;
    height: 3px; /* ドットの直径 */
    background-image: radial-gradient(circle, #b79333 1.5px, transparent 1.5px);
    background-size: 6px 3px; /* 横方向の間隔を調整 */
    background-repeat: repeat-x;
  }
  .contetns03-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 19px;
    margin-bottom: 16vw;
    li {
      width: 100%;
      background: #fff;
      padding: 4vw 3.2vw;
      display: flex;
      align-items: center;
      gap: 18px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 5.07vw;
      font-weight: 500;
      figure {
        width: 19.32vw;
        height: 19.32vw;
      }
      p {
        line-height: 1.5;
        color: #543926;
        font-size: 5.07vw;
      }
    }
    li.last-text {
      background: none;
      width: 100%;
      font-size: 3.86vw;
      font-weight: 400;
      line-height: 2;
      padding: 0;
      font-family: "noto sans", sans-serif;
    }
  }
  .basic-btn a {
    background-color: var(--main-color);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 3.86vw;
    font-weight: 500;
    color: #fff;
    border-radius: 7.25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 14.49vw;
    position: relative;
  }
  .basic-btn a:after {
    content: ">";
    position: absolute;
    right: 5vw;
    top: 47%;
    transform: translateY(-50%);
    font-family: "Zen Maru Gothic", sans-serif;
  }
  .basic-btn a:hover {
    text-decoration: none;
  }
}