@charset "UTF-8";
@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: 120px auto 0;
    text-align: center;
  }
  #contentsmain h2 {
    font-size: 58px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: var(--black-color);
    margin-bottom: 54px;
  }
  .contentsmain-img {
    margin-bottom: 136px;
  }
  #contentsmain-underblock {
    max-width: 1920px;
    margin: 0 auto;
    background: url(../images/reform/contentsunder_bg.png) no-repeat;
    background-position: center;
    .innerBox {
      padding: 144px 0;
      width: 1100px;
      margin: 0 auto;
      text-align: center;
    }
    h3 {
      font-size: 36px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      margin-bottom: 39px;
      letter-spacing: 0.05em;
      color: #fff;
    }
    p {
      line-height: 2.3;
      font-size: 20px;
    }
  }
  .commonttl {
    font-size: 50px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
    position: relative;
    margin-bottom: 90px;
    line-height: 1.72;
  }
  .commonttl::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -30px; /* 文字の下から20px */
    transform: translateX(-50%); /* 中央揃え */
    width: 70px;
    height: 6px;
    background-color: #ecc866; /* ラインの色はお好みで */
    border-radius: 3px; /* 角丸にしたい場合 */
  }
  #contents01 {
    width: 1100px;
    margin: 0 auto 140px;
    padding-top: 130px;
  }
  .contents01-inner {
    margin-bottom: 150px;
  }
  .contents-ttl {
    background: #fff;
    border-left: 10px solid #ecc866;
    font-size: 36px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    height: 85px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    margin-bottom: 60px;
    color: #3a3934;
  }
  .contents-subttl {
    font-size: 24px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    margin-bottom: 16px;
    span {
      color: #ecc866;
    }
  }
  .contents01-blockwrapper {
    margin-bottom: 60px;
  }
  .contents01-blockwrapper .mainphoto {
    margin-right: 35px;
  }
  .contents01-subwrapper {
    gap: 16px;
  }
  .contents01-right {
    gap: 36px;
    display: flex;
    flex-direction: column;
  }
  .contents01-right .contents01-subwrapper:nth-child(2) {
    .subtext {
      order: 2;
    }
  }
  .contents01-undertext {
    font-size: 20px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
  }
  #contents02 {
    text-align: center;
    width: 1100px;
    margin: 0 auto 150px;
  }
  .contents02-subttl {
    font-size: 24px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    margin-bottom: 70px;
  }
  .contents02-block {
    background-color: #fff;
    border-radius: 10px;
    padding-bottom: 84px;
    margin-bottom: 60px;
  }
  .contents02-block:nth-child(even) {
    flex-direction: row-reverse;
    .contents02-textarea {
      margin-right: 0;
      margin-left: 58px;
    }
  }
  .contents02-block:last-child {
    margin-bottom: 0;
  }
  .contents02-block.summer {
    background-color: #ecc867;
    color: #fff;
  }
  .contents02-blockttl {
    font-size: 20px;
    padding-bottom: 20px;
    font-weight: 500;
    text-align: left;
    border-bottom: 2px solid #eae3c6;
    margin-bottom: 27px;
    margin-top: 73px;
  }
  .contents02-textarea {
    margin-right: 58px;
  }
  .contents02-block {
    gap: 30px;
  }
  .contents02-blocktext {
    text-align: left;
  }
  .contents02-foottext {
    font-size: 24px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
  }
  #contents03 {
    width: 1100px;
    margin: 0 auto 150px;
  }
  .contents03-list {
    display: flex;
    justify-content: space-between;
    li {
      width: 525px;
      padding: 40px 44px 65px;
      background-color: #fff;
    }
    .contents03-list01 {
      font-size: 26px;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 30px;
      text-align: center;
    }
    .contents03-list-icon {
      font-size: 18px;
      font-weight: 500;
      background: url(../images/reform/listicon.png) left no-repeat;
      padding-left: 30px;
      margin-bottom: 10px;
    }
    .contents03-list02 {
      font-size: 20px;
      margin-top: 25px;
      color: #b79333;
      font-weight: 500;
    }
  }
  #contents04 {
    width: 1100px;
    margin: 0 auto 28px;
    .contents04-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    li {
      width: 513px;
      margin-bottom: 60px;
    }
    .photo {
      margin-bottom: 20px;
    }
    .flex {
      gap: 20px;
      align-items: center;
    }
  }
  #contents05 {
    width: 1100px;
    margin: 0 auto 150px;
    padding: 24px;
    text-align: center;
    background-color: #ecc867;
    border-radius: 10px;
    position: relative;
    .contents05-ttlimg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    .innerBox {
      background-color: #fff;
      border-radius: 10px;
      padding: 74px 91px 86px;
    }
    .contents05-ttl {
      font-size: 38px;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      text-align: center;
    }
    .contents05-ttl-box {
      display: flex;
      width: auto;
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      gap: 10px;
      width: 870px;
      position: relative;
      margin-bottom: 40px;
      width: fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
    }

    .contents01-icon {
      margin: 0;
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      align-items: center;
      display: flex;
    }
    .contents05-subttl {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 51px;
    }
  }
  .contents05-list {
    display: flex;
    width: 870px;
    margin: 0 auto;
    justify-content: space-between;
    li {
      width: 201px;
      text-align: left;
    }
  }

  #contents06 {
    width: 1280px;
    margin: 0 auto;
  }
  #contents07 {
    width: 1100px;
    margin: 0 auto;
  }

  .common-underbox {
    background: url(../images/reform/common_footer_photo.png) center top
      no-repeat;
    margin: 0 auto 150px;
    text-align: center;
    max-width: 1920px;
    height: 736px;
    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;
    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;
  }

  .common-bnrBox {
    display: flex;
    justify-content: space-between;
    padding-bottom: 115px;
    li {
      width: 350px;
      font-size: 16px;
    }
    p {
      margin-top: 25px;
    }
  }

  .text-dotline {
    position: relative;
    padding-bottom: 20px;
  }

  .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 4px; /* 横方向の間隔を調整 */
    background-repeat: repeat-x;
  }
}
@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;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  #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: 7.73vw;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    margin-bottom: 8vw;
    color: var(--black-color);
  }
  .contentsmain-img {
    margin-bottom: 10vw;
  }
  #contentsmain-underblock {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 5.8vw;
    background: url(../images/reform/sp-contentsunder_bg.png) no-repeat bottom
      #ecc867;
    background-size: 100%;
    .innerBox {
      padding: 17vw 0;
      width: 100%;
      margin: 0 auto;
      text-align: center;
    }
    h3 {
      font-size: 6.28vw;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      margin-bottom: 6.04vw;
      color: #fff;
    }
    p {
      line-height: 1.88;
      text-align: left;
      margin-bottom: 2vw;
    }
  }
  .commonttl {
    font-size: 6.76vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
    position: relative;
    margin-bottom: 19.32vw;
    line-height: 1.57;
    letter-spacing: 0;
  }
  .commonttl::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px; /* 文字の下から20px */
    transform: translateX(-50%); /* 中央揃え */
    width: 12.08vw;
    height: 1.45vw;
    background-color: #ecc866; /* ラインの色はお好みで */
    border-radius: 0.72vw; /* 角丸にしたい場合 */
  }
  #contents01 {
    width: 100%;
    margin: 0 auto;
    padding: 26.57vw 5.8vw;
  }
  .contents01-inner {
    margin-bottom: 22vw;
  }
  .contents-ttl {
    background: #fff;
    border-left: 2.42vw solid #ecc866;
    font-size: 6.28vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    height: auto;
    display: flex;
    align-items: center;
    padding-left: 6.28vw;
    margin-bottom: 10vw;
    color: #3a3934;
  }
  .contents-subttl {
    font-size: 5.31vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.5;
    margin-bottom: 7vw;
    display: flex;
    gap: 2vw;
    letter-spacing: 0;
    span {
      color: #ecc866;
    }
  }
  .contents01-blockwrapper {
    margin-bottom: 7vw;
    .mainphoto {
      margin-bottom: 5vw;
    }
  }
  .contents01-subwrapper {
    gap: 3.86vw;
  }
  .contents01-right {
    display: flex;
    flex-direction: column;
    p {
      font-size: 3.38vw;
    }
  }
  .contents01-right .contents01-subwrapper:nth-child(2) {
    .subtext {
      order: 2;
    }
  }
  .contents01-undertext {
    font-size: 4.11vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    margin-top: 7vw;
    line-height: 1.88;
  }
  #contents02 {
    text-align: center;
    width: 100%;
    margin: 0 auto 19.23vw;
    padding: 0 5.8vw;
  }
  .contents02-subttl {
    font-size: 4.35vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    margin-bottom: 30px;
  }
  .contents02-block {
    background-color: #fff;
    border-radius: 2.42vw;
    padding-bottom: 20.29vw;
    margin-bottom: 14.49vw;
    padding: 6.76vw;
  }
  .contents02-block:last-of-type {
    margin-bottom: 7vw;
  }
  .contents02-block:nth-child(even) {
    flex-direction: row-reverse;
    .contents02-textarea {
      margin-right: 0;
    }
  }
  .contents02-block:last-child {
    margin-bottom: 0;
  }
  .contents02-block.summer {
    background-color: #ecc867;
    color: #fff;
    margin-bottom: 14.49vw;
  }
  .contents02-blockttl {
    font-size: 4.35vw;
    text-align: center;
    padding-bottom: 3vw;
    font-weight: 500;
    border-bottom: 0.48vw solid #eae3c6;
    margin-bottom: 3vw;
  }
  .contents02-block {
    gap: 5vw;
  }
  .contents02-blocktext {
    text-align: left;
  }
  .contents02-foottext {
    font-size: 4.35vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: left;
    line-height: 1.88;
  }
  .contents02-block:nth-child(even) {
    flex-direction: column;
  }
  #contents03 {
    width: 100%;
    padding: 0 5.8vw;
    margin: 0 auto;
  }
  .contents03-list {
    display: flex;
    gap: 7vw;
    margin-bottom: 25vw;
    flex-direction: column;
    justify-content: space-between;
    li {
      width: 100%;
      padding: 12vw 7vw;
      background-color: #fff;
    }
    .contents03-list01 {
      font-size: 4.83vw;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 7.25vw;
      text-align: center;
    }
    .contents03-list-icon {
      font-size: 3.62vw;
      font-weight: 500;
      background: url(../images/reform/listicon.png) left no-repeat;
      padding-left: 7.25vw;
    }
    .contents03-list02 {
      font-size: 3.86vw;
      margin-top: 3.62vw;
      color: #b79333;
      font-weight: 500;
    }
  }
  #contents04 {
    width: 100%;
    margin: 0 auto;
    padding: 0 5.8vw;
    .contents04-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    li {
      width: 100%;
      margin-bottom: 14.49vw;
    }
    .photo {
      margin-bottom: 4.83vw;
    }
    .flex {
      gap: 4.83vw;
      align-items: center;
      flex-direction: unset;
      align-items: flex-start;
      p {
        flex: 1;
      }
    }
    .icon-num {
      width: 13.53vw;
    }
  }
  #contents05 {
    width: calc(100% - 10.6vw);
    margin: 0 auto;
    padding: 4.11vw;
    text-align: center;
    background-size: 100%;
    position: relative;
    background-color: #ecc867;
    border-radius: 10px;
    .contents05-ttlimg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 35vw;
    }
    .contents05-icon {
      width: 7vw;
      margin: 0 auto;
    }
    .innerBox {
      background-color: #fff;
      border-radius: 10px;
      padding: 14.49vw 6vw 14.49vw;
    }
    .contents05-ttl {
      font-size: 5.8vw;
      font-weight: 500;
      line-height: 1.58;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 9.66vw;
      text-align: center;
      position: relative;
      letter-spacing: 0;
      padding-bottom: 3vw;
    }
    .contents05-subttl {
      font-size: 3.86vw;
      font-weight: 500;
      margin-bottom: 12.32vw;
    }
  }
  .contents05-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    gap: 5vw;
    justify-content: space-between;
    li {
      width: 100%;
      text-align: left;
    }
    figure {
      margin-bottom: 2vw;
    }
    p {
      font-size: 3.38vw;
    }
  }
  #contents06 {
    padding-top: 20vw;
  }
  .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;
    }
  }
  .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;
  }
  .basic-btn a:hover {
    text-decoration: none;
  }
  .common-underbox {
    width: 100%;
    padding-bottom: 26.57vw;
    padding-top: 65vw;
    background: url(../images/reform/sp-common_footer_photo.png) no-repeat top;
    background-size: contain;
  }
  .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;
  }
  .common-underboxtext {
    background-color: #fff;
    margin: 0 2.9vw;
    padding: 7.25vw 4.83vw;
  }
  .text-dotline {
    position: relative;
    padding-bottom: 2.42vw;/
  }

  .text-dotline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; /* 下線の位置 */
    width: 100%;
    height: 0.72vw; /* ドットの直径 */
    background-image: radial-gradient(
      circle,
      #b79333 0.36vw,
      transparent 0.36vw
    );
    background-size: 1.45vw 0.72vw; /* 横方向の間隔を調整 */
    background-repeat: repeat-x;
  }
}