/* "Inter", sans-serif */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap");
/* ここまで */

/* Zen Kaku Gothic */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200&family=Zen+Kaku+Gothic+Antique&family=Zen+Kaku+Gothic+New&display=swap");

/* ---ここまで---- */

:root {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #606060;
}

main {
  /* width: 85%; */
  /* margin: 0 auto; */
  padding: 0 5%;
}

header {
  width: 100%;
  margin: 0 auto;
  background-color: rgb(207, 204, 173);
}
p,
ol li {
  font-size: 0.8em;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
ol li {
  line-height: 2em;
}
nav li {
  border-right: solid 1px white;
  border-left: solid 1px white;
  font-size: 25%;
}

h1,
h2,
h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.keyvisual img {
  max-width: 100%;
}

.keyvisual h1 {
  position: absolute;
  top: 5%;
  left: 50%;
  font-size: 2em;
  transform: translateX(-50%);
  font-family: "Inter", sans-serif;
}

ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a.widelink {
  display: block;
  text-decoration: none;
}
ul a {
  display: inline-block;
  width: 15vw;
  background-color: rgb(207, 204, 173);
  padding: 1.3em 0.7em;
  /* border-right: solid 1px white;
  border-left: solid 1px white; */
  text-decoration: none;
  text-align: center;
  color: white;
}

.keyvisual {
  /* text-align: center; */
  margin: 0 auto;
}
.keyvisual img {
  width: 100%;
}
.keyvisual {
  position: relative;
  color: white;
}
.keyvisual img:nth-of-type(3) {
  position: absolute;
  top: 22%;
  right: 28%;
  width: 43%;
}
.keyvisual p {
  position: absolute;
  top: 71%;
  left: 50%;
  width: 75%;
  text-align: left;
  transform: translateX(-50%);
  font-size: 0.5em;
}
h2 {
  display: inline-block;
  position: relative;
  padding: 15px;
  border-left: solid 3px #93d0d0;
  /* margin: 70px 0 0 0; */
  color: #9a7953;
  font-size: 1.2em;
}
h2::before {
  content: "";
  display: block;
  width: calc(100%+8px);
  height: 100%;
  position: absolute;
  left: -12px;
  top: 0px;
  border-left: solid 5px #93d0d0;
}
.center {
  text-align: center;
}
.block {
  border: solid 8px #f4f1eb;
  border-radius: 20px;
  width: 100%;
  display: flex;
  margin-bottom: 30px;
  padding: 0 15px;
  box-sizing: border-box;
}
.block img {
  width: 30%;
  padding-right: 3%;
  object-fit: scale-down;
}
.group1 img {
  width: 1.5em;
  height: 1.5em;
}
.group1 {
  display: flex;
  align-items: center;
}

/* .group1 {
  margin-top: 100px;
  font-size: 2em;
} */
/* .block2 {
  display: flex;
  justify-content: space-between;
} */
.flex {
  display: flex;
  flex-direction: column-reverse;
  background-color: #f4f1eb;
  border-radius: 20px;
  padding: 35px 0;
  align-items: end;
  margin-bottom: 30px;
}

footer {
  background-color: #af9c83;
}

.section img {
  width: 100%;
  margin: 55px 0 0 0;
}

.section {
  border-radius: 50%;
  margin-right: 70px;
  width: 80%;
  margin: 0 auto;
}

.section + img {
  width: 27%;
  margin: 0 auto;
  object-fit: scale-down;
  order: 0;
}
/* footer {
  margin-top: 235px;
  padding: 14px;
} */

main h1 {
  text-align: center;
  color: #af9c83;
  margin: 35px 0 70px 0;
  font-size: 1em;
}

.sp {
  display: block !important;
}
.pc {
  display: none;
}
.order0 {
  order: 0;
}
.order1 {
  order: 1;
}
/* .section h2 {
  margin: 174px 0 0 0;
} */

.boxes {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 600px) {
  ul a {
    padding: 0.3em 0.7em;
  }
  header {
    width: 80%;
  }
  main {
    width: 80%;
    margin: 0 auto;
  }
  nav li {
    font-size: 1.3em;
  }

  .sp {
    display: none !important;
  }
  .pc {
    display: block;
  }
  .keyvisual .pc {
    width: 80%;
    margin: 0 auto;
  }
  .keyvisual img:nth-of-type(3) {
    position: absolute;
    top: 10%;
    right: 20%;
    width: 15%;
  }
  .keyvisual h1 {
    position: absolute;
    top: 30%;
    left: 39%;
    width: 45%;
    font-size: 4.5vw;
  }
  .keyvisual p {
    position: absolute;
    top: 66%;
    left: 39%;
    width: 45%;
    text-align: left;
    font-size: 1vw;
  }
  h2 {
    font-size: 2.5em;
  }
  p,
  ol li {
    font-size: 1.5em;
  }
  main h1 {
    font-size: 30px;
    margin: 150px 0 70px 0;
  }

  .block {
    border: solid 8px #f4f1eb;
    border-radius: 20px;
    display: flex;
    margin-bottom: 30px;
    padding: 20px;
    width: 45%;
    box-sizing: border-box;
  }
  .group1 {
    margin-top: 100px;
    font-size: 2em;
  }
  .section h2 {
    font-size: 2em;
  }
  /* .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #f4f1eb;
    border-radius: 20px;
    padding: 60px;
    align-items: end;
  } */
  .flex {
    display: flex;
    flex-direction: column-reverse;
    background-color: #f4f1eb;
    border-radius: 20px;
    /* padding: 60px; */
    align-items: end;
  }
  h2 {
    margin: 70px 0 0 0;
  }

  footer {
    margin-top: 235px;
    padding: 14px;
  }
  .section {
    margin-right: 30px;
  }
  .section p {
    margin-bottom: 80px;
  }
  .section h2 {
    margin-bottom: 55px;
  }
  .boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
  }
}

@media screen and (min-width: 1025px) {
  .block {
    padding: 0;
  }
  header {
    width: 80%;
  }
  main {
    width: 80%;
    margin: 0 auto;
  }
  nav li {
    font-size: 1.3em;
  }
  .keyvisual img {
    width: 80%;
  }
  .sp {
    display: none !important;
  }
  .pc {
    display: block;
  }
  .keyvisual .pc,
  .keyvisual .sp {
    width: 80%;
    margin: 0 auto;
  }
  .keyvisual img:nth-of-type(3) {
    position: absolute;
    top: 10%;
    right: 20%;
    width: 15%;
  }
  .keyvisual h1 {
    position: absolute;
    top: 30%;
    left: 40%;
    font-size: 5vw;
  }
  .keyvisual p {
    position: absolute;
    top: 66%;
    left: 40%;
    width: 45%;
    text-align: left;
  }
  h2 {
    font-size: 2.5em;
  }

  p,
  ol li {
    font-size: 1.5em;
  }
  main h1 {
    margin: 150px 0 70px 0;
  }
  .block2 {
    display: flex;
    justify-content: space-between;
  }
  .block {
    border: solid 8px #f4f1eb;
    border-radius: 20px;
    width: 45%;
    display: flex;
    margin-bottom: 30px;
    padding: 0 15px;
  }
  .group1 {
    margin-top: 100px;
    font-size: 2em;
  }
  .section h2 {
    font-size: 2em;
  }
  .flex {
    display: flex;
    background-color: #f4f1eb;
    border-radius: 20px;
    padding: 60px;
    align-items: end;
    /* flex-wrap: wrap; */
    flex-direction: row;
    justify-content: space-between;
  }
  h2 {
    margin: 70px 0 0 0;
  }
  footer {
    margin-top: 235px;
    padding: 14px;
  }
  .section {
    margin-right: 30px;
  }
  .boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}