@charset "UTF-8";
@media screen and (min-width: 768px), print {
  :root {
    --main-color: #b98560;
    --accent-color: #b79333;
    --text-color: #543926;
    --blue-color: #608db9;
  }
  main p {
    color: #3a3934;
    letter-spacing: 0.05em;
    line-height: 2;
  }
  .flex {
    display: flex;
    justify-content: space-between;
  }
  #contentsmain {
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 64px;
    padding-bottom: 160px;
    text-align: center;
    background: url(../images/company/contentsmain_bg.png) center -80px no-repeat;
  }
  .commonttl {
    font-size: 50px;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
    position: relative;
    margin-bottom: 80px;
    line-height: 1.56;
    color: var(--text-color);
    letter-spacing: 0.05em;
  }
  .commonttl::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px; /* 文字の下から20px */
    transform: translateX(-50%); /* 中央揃え */
    width: 70px;
    height: 6px;
    background: linear-gradient(to right, #7aca76, #ffdf7f);
    border-radius: 3px; /* 角丸にしたい場合 */
  }
  .contentsmain-block {
    background-color: #fff;
    padding: 73px;
    width: 754px;
    margin: 0 auto;
    box-shadow: 20px 20px 0 #9b9571; /* X方向 20px, Y方向 20px, ぼかし0, 色 */
    h3 {
      color: #9b9571;
      margin-bottom: 18px;
      font-size: 38px;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    h4 {
      color: #b98560;
      margin-bottom: 7px;
      font-size: 24px;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    p {
      font-size: 22px;
      font-weight: 500;
      line-height: 2.3;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    .contentsmain-block-text {
      font-size: 18px;
      line-height: 2.2;
    }
    .contentsmain-block-text:not(:last-child) {
      margin-bottom: 20px;
    }
  }
  .contentsmain-block:first-of-type {
    margin-bottom: 60px;
  }
  #contents01 {
    padding: 130px 0 140px;
    background-color: #eae3c6;
    max-width: 1920px;
    margin: 0 auto;
    ol {
      padding: 75px 90px 75px;
      background-color: #fff;
      margin: 0 auto;
      position: relative;
      width: 1280px;
      line-height: 2.5;
      font-size: 20px;
      span {
        color: #297f60;
      }
    }
    ol::before {
      background: url(../images/company/contents01_bg01.png) no-repeat;
      position: absolute;
      content: "";
      display: block;
      left: 20px;
      top: -110px;
      width: 163px;
      height: 164px;
    }
    ol::after {
      background: url(../images/company/contents01_bg02.png) no-repeat;
      position: absolute;
      content: "";
      display: block;
      right: -90px;
      bottom: -50px;
      width: 156px;
      height: 157px;
    }
  }
  #contents02 {
    width: 1100px;
    padding: 130px 0;
    margin: 0 auto;
    .flex {
      gap: 76px;
    }
    .flex:not(:last-child) {
      margin-bottom: 80px;
    }
    .flex:nth-child(odd) {
      flex-direction: row-reverse;
    }
    .contents02-ttl {
      color: #b98560;

      font-size: 24px;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      letter-spacing: 0.05em;
    }
    .contents02-ttl:not(:first-child) {
      margin-top: 30px;
    }
    .contentsmain-img {
      text-align: right;
      margin-bottom: 10px;

      figcaption {
        margin-top: 20px;
        letter-spacing: 0.08em;
        span {
          font-size: 18px;
        }
      }
    }
  }
  #contents03 {
    max-width: 1920px;
    background-color: #fff;
    margin: 0 auto;
    padding: 130px 0 128px;
    table {
      width: 1100px;
      margin: 0 auto 100px;
      background-color: #fff;
      border: 0;
      border-collapse: collapse;
      th {
        background-color: #ecc867;
        width: 250px;
        color: #fff;
        padding: 18px 25px;
        border-bottom: 1px solid #ffffff;
        text-align: left;
        line-height: 2;
      }
      td {
        padding: 18px 25px;
        border-bottom: 1px solid #d5d0c4;
        line-height: 2;
      }
    }
    .contents-ttl {
      background: #faf6f2;
      border-left: 10px solid #b98560;
      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;
      letter-spacing: 0.05em;
    }
    .contents03-inner {
      width: 1100px;
      margin: 0 auto;
    }
    .contents03-innerttl {
      color: #b98560;
      margin-bottom: 16px;
      font-size: 24px;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    .contents03-list {
      display: flex;
      justify-content: space-between;
      li {
        width: 527px;
      }
    }
  }
  #contents04 {
    padding: 130px 0 85px;
    width: 1100px;
    margin: 0 auto;
  }
  .common-bnrBox {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    flex-wrap: wrap;
    li {
      width: 350px;
      font-size: 16px;
      margin-bottom: 25px;
    }
    p {
      margin-top: 25px;
    }
  }
}
@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 {
    max-width: 100%;
    padding: 9vw 5.8vw 0;
    margin: 0 auto;
    padding-bottom: 24vw;
    text-align: center;
    background: url(../images/company/sp-contentsmain_bg.png) no-repeat center;
    background-size: 100%;
  }
  .commonttl {
    font-size: 7.73vw;
    font-weight: 500;
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
    position: relative;
    margin-bottom: 15vw;
    line-height: 1.5;
    color: #543926;
  }
  .commonttl::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4.83vw; /* 文字の下から20px */
    transform: translateX(-50%); /* 中央揃え */
    width: 12.08vw;
    height: 1.45vw;
    background: linear-gradient(to right, #7aca76, #ffdf7f);
    border-radius: 0.72vw; /* 角丸にしたい場合 */
  }
  .contentsmain-block {
    background-color: #fff;
    padding: 10vw 0vw 13vw;
    width: 100%;
    margin: 0 auto;
    box-shadow: 2.5vw 2.5vw 0 #9b9571; /* X方向 20px, Y方向 20px, ぼかし0, 色 */
    h3 {
      color: #9b9571;
      margin-bottom: 2.5vw;
      font-size: 6.28vw;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    h4 {
      color: #b98560;
      margin-bottom: 1vw;
      font-size: 4.83vw;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    p {
      font-size: 3.86vw;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    .contentsmain-block-text {
      font-size: 3.86vw;
    }
    .contentsmain-block-text:not(:last-child) {
      margin-bottom: 7.25vw;
    }
  }
  .contentsmain-block:first-of-type {
    margin-bottom: 7vw;
  }
  #contents01 {
    padding: 130px 0 140px;
    background-color: #eae3c6;
    max-width: 100%;
    margin: 0 auto;
    padding: 22vw 2.9vw 26vw;
    ol {
      padding: 7vw;
      background-color: #fff;
      margin: 0 auto;
      position: relative;
      width: 100%;
      line-height: 2;
      font-size: 4.35vw;
      li {
        margin-bottom: 3vw;
      }
      span {
        color: #297f60;
      }
    }
    ol::before {
      background: url(../images/company/sp-contents01_bg01.png) no-repeat;
      position: absolute;
      content: "";
      display: block;
      left: -3vw;
      top: -18vw;
      width: 26.57vw;
      height: 26.57vw;
      background-size: 100%;
    }
    ol::after {
      background: url(../images/company/sp-contents01_bg02.png) no-repeat;
      position: absolute;
      content: "";
      display: block;
      right: -3vw;
      bottom: -8vw;
      width: 25.36vw;
      height: 25.36vw;
      background-size: 100%;
    }
  }
  #contents02 {
    width: 100%;
    padding: 22vw 5.8vw;
    margin: 0 auto;
    .flex {
      gap: 6vw;
    }
    .flex:not(:last-child) {
      margin-bottom: 10vw;
    }
    .flex:nth-child(odd),
    .flex:nth-child(even) {
      flex-direction: row-reverse;
      flex-direction: column-reverse;
    }
    .contents02-ttl {
      color: #b98560;
      margin-bottom: 1vw;
      font-size: 5.31vw;
      font-weight: 500;
      line-height: 1.5;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    .contents02-ttl:not(:first-child) {
      margin-top: 40px;
    }
    .contentsmain-img {
      text-align: right;
      figcaption {
        display: block;
        margin-top: 1vw;
        letter-spacing: 0.05em;
      }
    }
  }
  #contents03 {
    max-width: 100%;
    background-color: #fff;
    margin: 0 auto;

    padding: 20vw 5.8vw 25vw;
    table {
      width: 100%;
      margin: 0 auto 10vw;
      background-color: #fff;
      border: 0;
      border-collapse: collapse;
      th {
        background-color: #ecc867;
        width: 100%;
        display: block;
        color: #fff;
        padding: 2.5vw 5vw;
        letter-spacing: 0.05em;
        line-height: 2;
        font-size: 3.86vw;
        text-align: left;
      }
      td {
        padding: 2.5vw 5vw;
        width: 100%;
        letter-spacing: 0.05em;
        line-height: 2;
        font-size: 3.86vw;
        display: block;
      }
    }
    .contents-ttl {
      background: #faf6f2;
      border-left: 10px solid #b98560;
      font-size: 6.28vw;
      font-weight: 500;
      font-family: "Zen Maru Gothic", sans-serif;
      display: flex;
      align-items: center;
      padding: 1vw 4vw;
      margin-bottom: 6vw;
      color: #3a3934;
    }
    .contents03-inner {
      width: 100%;
      margin: 0 auto;
    }
    .contents03-innerttl {
      color: #b98560;
      font-size: 4.83vw;
      font-weight: 500;
      margin-top: 3vw;
      font-family: "Zen Maru Gothic", sans-serif;
    }
    .contents03-list {
      display: flex;
      gap: 7vw;
      flex-direction: column;
      justify-content: space-between;
      li {
        width: 100%;
      }
      iframe {
        width: 100%;
        height: 57vw;
      }
    }
  }

  #contents04 {
    padding-top: 20vw;
  }

  .common-bnrBox {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    padding: 0 7.73vw 26.57vw;
    gap: 3.4vw;
    li {
      width: 100%;
      font-size: 3.86vw;
    }
    p {
      margin-top: 6.04vw;
    }
  }
}