@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: 73px auto 0;
    text-align: center;
  }
  #contentsmain h2 {
    font-size: 48px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 12px;
    letter-spacing: 2px;
  }
  .contentsmain-img {
    margin-bottom: 70px;
  }
  #contentsmain .contentsmain-underbox {
    margin-bottom: 95px;
  }
  #contentsmain .contentsmain-underbox p {
    font-size: 20px;
    line-height: 2.3;
    font-weight: 400;
  }
  .contentsmain-underbox p:first-of-type {
    margin-bottom: 30px;
  }
  .contentsmain-list {
    display: flex;
    justify-content: center;
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 60px;
    li {
      width: 438px;
      background-color: #fff;
      padding: 37px 20px 20px;
      position: relative;
      margin: 0 22.5px;
      p {
        color: var(--text-color);
      }
      .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 90px;
    .contents01-list {
      display: flex;
      justify-content: space-between;
    }
    h3 {
      font-size: 36px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 55px;
      text-align: center;
      letter-spacing: 0.04em;
    }
    .contents01-textarea {
      margin-left: 35px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      p:not(:last-child) {
        margin-bottom: 10px;
      }
    }
    .contents01-secondblock {
      margin-top: 141px;
    }
  }
  #contents02 {
    width: 1100px;
    margin: 0 auto 140px;
    h2 {
      margin-bottom: 50px;
      padding-bottom: 15px;
    }
    .change figure {
      order: 2;
    }
    .change .contents01-2column-r {
      margin-left: 0;
      margin-right: 35px;
    }
    .block3-firstdiv {
      margin-bottom: 70px;
      .contents01-2column-r {
        margin-left: 65px;
      }
    }
    .block03 .change .contents01-2column-r {
      margin-right: 65px;
    }
    .block03 .contents01-2column:last-of-type {
      margin-bottom: 70px;
    }
    .block03 {
      margin-bottom: 70px;
    }
  }
  .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: 60px;
  }
  .contents01-2column-r {
    margin-left: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p:not(:last-child) {
      margin-bottom: 14px;
    }
  }
  .contents01-2column h3 {
    color: #dc7c37;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 26px;
    letter-spacing: 0.09em;
  }
  .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 4px; /* 横方向の間隔を調整 */
    background-repeat: repeat-x;
  }
  .whitebgtext {
    background-color: #b1cc76;
    color: #fff;
    font-size: 25px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    display: inline-block;
    padding: 0 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -15px;
    white-space: nowrap; /* ← 折り返し禁止 */
    width: fit-content; /* ← 内容に合わせた幅 */
    max-width: 100%; /* ← 親幅を超えない保険 */
  }
  .whitebgarea {
    position: relative;
    background-color: #fff;
    padding: 90px 50px 30px 105px;
    text-align: left;
    margin: 0 auto;
  }
  .block04 .contents01-2column {
    margin-bottom: 80px;
  }
  .comicomi-list {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 62%;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 50px;
      font-size: 20px;
      color: #543926;
      line-height: 1.4;
      p {
        margin-left: 20px;
        span.sub {
          font-size: 19px;
        }
        span.note {
          font-size: 16px;
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 400;
          line-height: 1.4;
          display: block;
        }
      }
    }
    li:nth-child(odd) {
      width: 38%;
    }
  }
  #contents03 {
    margin-bottom: 200px;
    background: url(../images/cocotie/contents03_img.png);
    background-repeat: repeat-x;
    background-size: auto 368px;
    height: 368px;
    animation: bg-slide 30s linear infinite; /* 30秒でループ */
  }
@keyframes bg-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

  #contents04 {
    width: 1100px;
    margin: 0 auto;
    text-align: center;
  }
  #contents04 .contentsmain-underbox {
    position: relative;
    margin-bottom: 240px;
  }
  #contents04 .contentsmain-underbox h3 {
    font-size: 50px;
    font-family: "Montserrat";
    font-weight: 500;
    color: #b98560;
    margin-bottom: 39px;
  }
  #contents04 .contentsmain-underbox p:first-of-type {
    margin-bottom: 20px;
  }
  #contents04 .contentsmain-underbox::before {
    content: "";
    display: block;
    width: 550px;
    position: absolute;
    left: -170px;
    top: -250px;
    height: 550px;
    background: url(../images/performance/contentsmain_bg01.png) no-repeat 100%
      center;
  }
  #contents04 .contentsmain-underbox::after {
    content: "";
    display: block;
    width: 550px;
    position: absolute;
    right: -280px;
    bottom: -200px;
    height: 550px;
    background: url(../images/performance/contentsmain_bg02.png) no-repeat 100%
      center;
  }
  #contents04 .contentsmain-underbox p {
    font-weight: 700;
    font-size: 25px;
    color: #543926;
    font-family: "Zen Maru Gothic", sans-serif;
  }
  .common-underbox {
    background: url(../images/cocotie/common_footer_photo.png) center top
      no-repeat;
    margin: 0 auto 150px;
    text-align: center;
    max-width: 1920px;
    height: 600px;
    position: relative;
  }
  .common-underboxtext {
    background-color: #fff;
    height: 286px;
    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;
  }
  #contents06 {
    width: 1100px;
    margin: 0 auto 110px;
  }
  .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;
  }
  #contentsmain {
    margin-bottom: 14.49vw;
    padding: 0 2.9vw;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 12vw;
    margin-bottom: 27vw;
  }
  #contentsmain .contentsmain-underbox {
    padding: 0 2vw;
  }
  #contentsmain h2 {
    font-size: 6.52vw;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: #543926;
    margin-bottom: 2vw;
  }
  .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: 6.04vw;
    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: -4.83vw;
        left: 50%;
        transform: translateX(-50%);
        font-family: "Zen Maru Gothic", sans-serif;
      }
      .note {
        font-size: 3.62vw;
        font-weight: 400;
      }
    }
  }
  #contents01 {
    width: 100%;
    margin: 0 auto 21.74vw;
    padding: 0 5.31vw;
    .contents01-list {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      width: 58.45vw;
      margin: 0 auto;
      gap: 7.25vw;
    }
    h3 {
      font-size: 6.52vw;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 4vw;
      text-align: center;
      letter-spacing: 0.04em;
    }
    .contents01-textarea {
      display: flex;
      margin-top: 4.83vw;
      align-items: center;
      flex-direction: column;
      font-size: 3.86vw;
      text-align: left;
      line-height: 2.3;
      color: #543926;
      justify-content: center;
      p:not(:last-child) {
        margin-bottom: 5vw;
      }
    }
    .contents01-secondblock {
      margin-top: 24vw;
    }
  }
  #contents02 {
    width: 100%;
    margin: 0 auto 7.25vw;
    padding: 0 2.9vw;
    h2 {
      padding-bottom: 6vw;
      display: flex;
      align-items: end;
      margin: 0 2.9vw 4.83vw;
    }
    p {
      font-size: 3.86vw;
      text-align: left;
    }

    .block3-firstdiv {
      margin-bottom: 16.91vw;
    }
  }
  .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;
    padding: 0 2.9vw;
  }
  .block03 {
    margin-bottom: 18vw;
  }
  .block03 .contents01-2column {
    margin-bottom: 6vw;
  }
  .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;
  }
  .whitebgtext {
    background-color: #b1cc76;
    color: #fff;
    font-size: 5.31vw !important;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    display: inline-block;
    padding: 1vw 4vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -5vw;
    white-space: nowrap; /* ← 折り返し禁止 */
    width: fit-content; /* ← 内容に合わせた幅 */
    max-width: 100%; /* ← 親幅を超えない保険 */
  }
  .whitebgarea {
    position: relative;
    background-color: #fff;
    padding: 13.53vw 3vw 0.7vw;
    text-align: left;
    margin: 0 auto;
  }
  .block04 .contents01-2column {
    margin-bottom: 80px;
  }
  .comicomi-list {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 100%;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 7.25vw;
      font-size: 4.83vw !important;
      color: #543926;
      line-height: 1.4;
      figure {
        width: 24.64vw;
      }
      p {
        margin-left: 2.9vw;
        line-height: 1.25 !important;
        flex: 1;
        font-size: 4.83vw !important;
        color: var(--text-color);
        span.sub {
          font-size: 3.14vw;
          display: block;
          letter-spacing: 0;
          margin-bottom: 2vw;
        }
        span.note {
          font-size: 3.38vw;
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 400;
          line-height: 1.4;
          display: block;
          letter-spacing: 0;
          color: var(--black-color);
        }
      }
    }
  }
  #contents03 {
    margin-bottom: 26.57vw;
    background: url(../images/cocotie/sp-contents03_img.png);
    background-repeat: repeat-x;
    background-size: auto 40.34vw;
    height: 40.34vw;
    animation: bg-slide 30s linear infinite; /* 30秒でループ */
  }
  #contents03 img {
    height: 40.34vw;
    width: auto;
  }

@keyframes bg-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

  #contents04 {
    width: 100%;
    margin: 0 auto;
  }
  .common-underbox {
    background: url(../images/cocotie/sp-common_footer_photo.png) center top
      no-repeat;
    margin: 0 auto 25vw;
    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;
  }
  .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;
    }
  }
  #contents04 .contentsmain-underbox {
    position: relative;
    margin-bottom: 36.23vw;
    text-align: center;
    padding: 0 9vw;
  }
  #contents04 .contentsmain-underbox h3 {
    font-size: 10.63vw;
    font-family: "Montserrat";
    font-weight: 500;
    color: #b98560;
    margin-bottom: 4vw;
  }
  #contents04 .contentsmain-underbox::before {
    content: "";
    display: block;
    width: 90vw;
    position: absolute;
    left: -22vw;
    top: -16vw;
    height: 90vw;
    background: url(../images/performance/contentsmain_bg01.png) no-repeat 100%
      center;
    background-size: contain;
  }
  #contents04 .contentsmain-underbox::after {
    content: "";
    display: block;
    width: 90vw;
    position: absolute;
    right: -20vw;
    bottom: -50vw;
    height: 90vw;
    background: url(../images/performance/contentsmain_bg02.png) no-repeat 100%
      center;
    background-size: contain;
  }
  #contents04 .contentsmain-underbox p {
    font-weight: 700;
    line-height: 1.83;
    font-size: 5.56vw;
    color: #543926;
    font-family: "Zen Maru Gothic", sans-serif;
  }
  #contents04 .contentsmain-underbox p:first-of-type {
    margin-bottom: 10vw;
  }
  .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;
  }
}