@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 {
    width: 1100px;
    margin: 60px auto 0;
    text-align: center;
    padding-top: 12px;
    .contentsmain-underbox {
      margin-bottom: 120px;
    }
  }
  #contentsmain h2 {
    font-size: 48px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 30px;
    letter-spacing: 0.05em;
  }
  .contentsmain-img {
    margin-bottom: 55px;
  }
  #contentsmain .contentsmain-underbox h3 {
    font-size: 36px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 17px;
    letter-spacing: 0.05em;
  }
  #contentsmain .contentsmain-underbox p {
    font-size: 20px;
    line-height: 2.3;
    font-weight: 400;
  }
  .contentsmain-underbox p:first-of-type {
    margin-bottom: 23px;
  }
  #contents01 {
    width: 1100px;
    margin: 0 auto 145px;
    .contents01-list {
      display: flex;
      justify-content: space-between;
    }
    h3 {
      font-size: 40px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 25px;
      text-align: left;
    }
    h4 {
      font-size: 25px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      color: #dc7c37;
      margin-bottom: 13px;
      text-align: left;
    }
    .contents01-textarea {
      margin-left: 55px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      p:not(:last-child) {
        margin-bottom: 16px;
      }
    }
    .contents01-secondblock {
      margin-top: 130px;
    }
    div.flex:first-of-type {
      margin-bottom: 86px;
    }
  }
  #contents02 {
    max-width: 1920px;
    background-color: #f1ecdb;
    margin: 0 auto 0;
    padding-top: 125px;
    padding-bottom: 145px;
    .contents-commonbox {
      width: 1100px;
      margin: 0 auto;
    }
    h2 {
      font-size: 36px;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 94px;
      text-align: center;
      letter-spacing: 0.05em;
    }
    .change figure {
      order: 2;
    }
    .change .contents01-2column-r {
      margin-left: 0;
      margin-right: 35px;
    }
    .contents01-2column-r-ttl {
      font-size: 40px;
      color: #543926;
    }
    .block3-firstdiv {
      margin-bottom: 115px;
    }
  }
  .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;
  }
  .contents01-2column {
    display: flex;
    justify-content: space-between;
    margin-bottom: 112px;
  }
  .contents01-2column-r {
    margin-left: 75px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    p:not(:last-child) {
      margin-bottom: 15px;
    }
  }
  .contents01-2column h3 {
    color: #dc7c37;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .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: 700;
    display: inline-block;
    padding: 0 50px;
    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;
    justify-content: space-between;
    li {
      width: 62%;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 50px;
      font-size: 21px;
      color: #543926;
      line-height: 1.4;
      p {
        margin-left: 20px;
        color: #543926;
        span.sub {
          font-size: 19px;
        }
        span.sub02 {
          font-size: 20px;
        }
        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 {
    width: 1100px;
    margin: 0 auto;
    text-align: center;
  }
  .contentsmain-underbox {
    position: relative;
    margin-bottom: 150px;
  }
  .contentsmain-underbox h3 {
    font-size: 50px;
    font-family: "Montserrat";
    font-weight: 500;
    color: #b98560;
    margin-bottom: 39px;
  }
  .contentsmain-underbox p {
    font-weight: 700;
    font-size: 25px;
    color: #543926;
    font-family: "Zen Maru Gothic", sans-serif;
  }
  .common-underbox {
    background: url(../images/cocotie-plus/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;
    width: 878px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 878px;
    padding: 72px 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;
    span {
      display: block;
      font-size: 20px;
    }
  }
  #contents05 {
    width: 1100px;
    margin: 0 auto 110px;
  }
  .common-bnrBox {
    display: flex;
    justify-content: space-between;
    li {
      width: 350px;
      font-size: 16px;
    }
    p {
      margin-top: 25px;
    }
  }
  .messagebox {
    position: relative;
    margin-top: 200px;
    margin-bottom: 250px;
    p:not(:last-child) {
      margin-bottom: 10px;
    }
  }
  .messagebox h3 {
    font-size: 50px;
    font-family: "Montserrat";
    font-weight: 500;
    color: #b98560;
    margin-bottom: 30px;
  }
  .messagebox::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;
  }
  .messagebox::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;
  }
  .messagebox p {
    font-weight: 700;
    font-size: 25px;
    color: #543926;
    font-family: "Zen Maru Gothic", sans-serif;
  }
}
@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;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  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: 25vw;
  }
  #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: 6vw;
  }
  #contentsmain .contentsmain-underbox {
    padding: 0 2.9vw;
  }
  #contentsmain .contentsmain-underbox h3 {
    font-size: 5.31vw;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 2vw;
    text-align: left;
  }
  #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;
  }
  #contents01 {
    padding: 0 5.8vw;
    width: 100%;
    margin: 0 auto 90px;
    .contents01-list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    h3 {
      font-size: 6.28vw;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 5vw;
      text-align: left;
    }
    h4 {
      font-size: 4.59vw;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      color: #dc7c37;
      margin-bottom: 3vw;
      text-align: left;
    }
    .contents01-textarea {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      margin-top: 5vw;
      p {
        font-size: 3.86vw;
      }
      p:not(:last-child) {
        margin-bottom: 5vw;
      }
    }
    .contents01-secondblock {
      margin-top: 130px;
    }
    div.flex:first-of-type {
      margin-bottom: 12vw;
    }
  }
  #contents02 {
    width: 100%;
    background-color: #f1ecdb;
    margin: 0 auto 0;
    padding: 21.74vw 2.9vw 26.57vw;
    .contents-commonbox {
      width: 100%;
      margin: 0 auto;
    }
    .contents01-2column-r-ttl {
      font-size: 6.28vw;
      color: #543926;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      padding: 0 2.9vw;
      margin-bottom: 5vw;
    }
    figure {
      margin-bottom: 5vw;
    }
    p {
      font-size: 3.86vw;
    }
    p:not(:last-child) {
      margin-bottom: 5vw;
    }
    h2 {
      font-size: 6.28vw;
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 7.25vw;
      text-align: center;
    }
    .contents01-2column {
      margin-bottom: 10vw;
      padding: 0 2.9vw;
    }
  }
  .contents01-2column h3 {
    color: #dc7c37;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 4.59vw;
    font-weight: 500;
    margin-bottom: 4.35vw;
  }
  .whitebgtext {
    background-color: #b1cc76;
    color: #fff;
    font-size: 5.31vw !important;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    display: inline-block;
    line-height: 1.45;
    padding: 3vw 4vw;
    letter-spacing: 0;
    margin-bottom: 0 !important;
  }
  .whitebgarea {
    position: relative;
    background-color: #fff;
    padding: 0;
    text-align: left;
    margin: 0 auto;
  }
  .block04 .contents01-2column {
    margin-bottom: 80px;
  }
  .comicomi-list {
    display: flex;
    flex-wrap: wrap;
    padding: 5.07vw;
    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;
        margin-bottom: 0 !important;
      }
      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);
        }
      }
    }
  }
  .common-underbox {
    background: url(../images/cocotie-plus/sp-contents_footer_photo.png) center
      top no-repeat;
    margin: 0 auto 0;
    text-align: center;
    width: 100%;
    height: 126vw;
    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;
    span {
      display: block;
      font-size: 4.11vw;
      margin-bottom: 2vw;
    }
  }
  p {
    font-size: 3.86vw;
  }
  .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;
    }
  }
  .messagebox {
    position: relative;
    margin-bottom: 36.23vw;
    text-align: center;
    padding: 29vw 9vw 0;
  }
  .messagebox h3 {
    font-size: 10.63vw;
    font-family: "Montserrat";
    font-weight: 500;
    color: #b98560;
    margin-bottom: 2.42vw;
  }
  .messagebox::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;
  }
  .messagebox::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;
  }
  .messagebox p {
    font-weight: 700;
    line-height: 1.83;
    font-size: 5.56vw;
    color: #543926;
    font-family: "Zen Maru Gothic", sans-serif;
  }
  .messagebox p:first-of-type {
    margin-bottom: 10vw;
  }
}