@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
:root {
  --font-fam: "noto sans JP";
  --theme-color: #fff;
  --font-color: #111;
}
img {
  width: 100%;
}
.fv {
  background: url(../img/fv/fv_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: 30vw;
  position: relative;
}
@media (min-width: 768px) {
  .fv {
    background: url(../img/fv/fv_pc.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
    width: 100%;
    height: min(89.84vw, 799px);
  }
    
    .pc_none{
        display: none;
    }
}
.fv__btn__lst {
  background: url("../img/bgimg.png") top center;
  padding: 5vw 10vw;
    border-top: 5px solid #c39c38;
    border-bottom: 5px solid #c39c38;
}
.fv__btn__lst ul {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .fv__btn__lst {
    padding: 35px 0;
  }
  .fv__btn__lst ul {
    display: flex;
    justify-content: space-between;
  }
}
.fv__btn__lst li {
  width: 100%;
  transition: opacity 0.3s;
}
.fv__btn__lst li + li {
  margin-top: 3vw;
}
@media (min-width: 768px) {
  .fv__btn__lst li {
    width: calc((100% - clamp(2rem, 2.6vw, 4rem)) / 2);
  }
  .fv__btn__lst li + li {
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .fv__btn__lst li:hover {
    opacity: 0.6;
  }
}
.contents {
  background: url(../img/bg.png);
  background-repeat: repeat;
  background-size: auto;
  background-color: #FFF4D6;
  background-blend-mode: soft-light;
  padding-bottom: clamp(4rem, 5vw, 9rem);
}
@media (min-width: 1024px) {
  .contents {
    position: relative;
  }
}
@media (min-width: 1280px) {
  .contents::before {
    content: "";
    display: block;
    background: url(../img/contents/bg01_pc.png) no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
    mix-blend-mode: soft-light;
    width: min(61.61vw, 1183px);
    height: min(75.93vw, 1458px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
}
@media (min-width: 1280px) {
  .contents::after {
    content: "";
    display: block;
    background: url(../img/contents/bg02_pc.png) no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
    mix-blend-mode: soft-light;
    width: min(61.61vw, 1183px);
    height: min(74.27vw, 1426px);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
  }
}
.contents > * {
  padding-top: 10.66vw;
}
@media (min-width: 768px) {
  .contents > * {
    padding-top: clamp(4rem, 5vw, 10rem);
  }
}
.contents .inner {
  width: min(100% - 50px, 680px);
  margin-inline: auto;
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) {
  .contents .box {
    margin-top: 53px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
  }
}
.contents .post {
  margin-top: 25px;
  display: block;
  width: min(61.86vw, 310px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .contents .post {
    margin: 0;
  }
}
.contents h3 {
  width: min(64vw, 320px);
  margin-inline: auto;
}
.contents .txt {
  margin-top: 35px;
}
@media (min-width: 768px) {
  .contents .txt {
    margin-top: 12px;
    width: calc(100% - (min(61.86vw, 310px) + 30px));
  }
}
.contents .txt strong {
  display: block;
  width: min(43.06vw, 215px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .contents .txt strong {
    margin-left: 0;
  }
}
.contents .txt p {
  margin-top: clamp(2.5rem, 3.12vw, 4.6rem);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .contents .txt p {
    margin-left: 28px;
  }
}
.contents .txt ul {
  margin-top: clamp(2.3rem, 2.87vw, 4.6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.25vw, 2rem);
}
@media (min-width: 768px) {
  .contents .txt ul {
    margin-left: 28px;
  }
}
@media (min-width: 1024px) {
  .contents .btn_sp {
    display: none;
  }
}
.contents .btn_pc {
  display: none;
}
@media (min-width: 1024px) {
  .contents .btn_pc {
    display: block;
  }
}
.contents01 {
  position: relative;
}
.contents01::after {
  content: "";
  display: block;
  background: url(../img/contents/bg01.png) no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1);
  mix-blend-mode: soft-light;
  width: 375px;
  height: 713px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}
@media (min-width: 1280px) {
  .contents01::after {
    content: none;
  }
}
.contents01 p {
  width: min(47.2vw, 236px);
}
@media (min-width: 1024px) {
  .contents01 svg .cls-4 {
    fill: #427A54 !important;
    transition: fill 0.3s;
  }
}
@media (min-width: 1024px) {
  .contents01 li:hover svg .cls-4 {
    fill: #000000 !important;
  }
}
.contents02 {
  position: relative;
}
.contents02::after {
  content: "";
  display: block;
  background: url(../img/contents/bg02.png) no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1);
  mix-blend-mode: soft-light;
  width: 375px;
  height: 849.5px;
  position: absolute;
  top: -34.94vw;
  left: 0;
  z-index: 0;
}
@media (min-width: 1280px) {
  .contents02::after {
    content: none;
  }
}
.contents02 p {
  width: min(60.53vw, 303px);
}
@media (min-width: 1024px) {
  .contents02 svg .cls-4 {
    fill: #CA3935 !important;
    transition: fill 0.3s;
  }
}
@media (min-width: 1024px) {
  .contents02 li:hover svg .cls-4 {
    fill: #000000 !important;
  }
}