@charset "UTF-8";
html {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #000;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  vertical-align: bottom;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width:768px) {
  html {
    font-size: 14px;
  }
}

body::after {
  content: "";
  display: block;
  width: 200%;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%);
  z-index: 100;
  pointer-events: none;
  transition: transform 600ms;
}
.wf-active body::after {
  transform: translateX(100%);
}

body,
body *,
body *:before,
body *:after {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  box-sizing: inherit;
  vertical-align: inherit;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  font-feature-settings: inherit;
  outline: none;
}

html,
body {
  height: 100%;
}

a,
a img,
button {
  outline: none;
  border: none;
  cursor: pointer;
}

button {
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
}

input,
textarea {
  padding: 0;
  border: none;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}

input[type=text]:focus,
textarea:focus {
  outline: 0;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: baseline;
  font-size: 0.7em;
}

img,
video,
svg {
  vertical-align: bottom;
  height: auto;
  width: 100%;
}

a,
button {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:hover,
button:hover {
  outline: none;
}

a:disabled,
button:disabled,
input:disabled {
  pointer-events: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

main {
  display: block;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width:768px) {
  main {
    padding-top: 40px;
  }
}

section {
  position: relative;
}

small {
  font-size: 13px;
}
@media screen and (max-width:768px) {
  small {
    font-size: 12px;
  }
}

strong,
b {
  font-weight: 700;
}

.naname1 {
  position: absolute;
  top: 200px;
  left: -50%;
  background-color: #fabd00;
  width: 200%;
  height: 330px;
  transform: rotate(-30deg);
  z-index: -1;
}
.naname1.ex {
  height: 470px;
}
@media screen and (max-width:768px) {
  .naname1.ex {
    height: 200px;
  }
}
@media screen and (max-width:768px) {
  .naname1 {
    height: 200px;
  }
}

.naname2 {
  position: absolute;
  top: 200px;
  left: -50%;
  background-color: #fabd00;
  width: 200%;
  height: 330px;
  transform: rotate(30deg);
  z-index: -1;
}
@media screen and (max-width:768px) {
  .naname2 {
    height: 200px;
    transform: rotate(-30deg);
  }
}

.text,
.text2 {
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 2;
}

.t1 {
  text-align: justify;
  text-justify: inter-ideograph;
}

.mds1 {
  font-size: 25px;
  letter-spacing: 0.1em;
}
.mds1 i {
  display: block;
  font-size: 90px;
  font-family: "Outfit";
  padding-bottom: 20px;
  letter-spacing: 0em;
}
@media screen and (max-width:768px) {
  .mds1 {
    font-size: 16px;
  }
  .mds1 i {
    font-size: 42px;
    padding-bottom: 15px;
  }
}
.mds1.ex i {
  font-size: 150px;
}
@media screen and (max-width:768px) {
  .mds1.ex i {
    font-size: 65px;
  }
}

.mds2 {
  font-size: 20px;
  letter-spacing: 0.1em;
  padding-bottom: 50px;
}
.mds2 i {
  display: block;
  font-size: 60px;
  font-family: "Outfit";
  padding-bottom: 20px;
  letter-spacing: 0em;
}
@media screen and (max-width:768px) {
  .mds2 {
    font-size: 16px;
    padding-bottom: 30px;
  }
  .mds2 i {
    font-size: 35px;
    padding-bottom: 10px;
  }
}

.btn0 {
  color: #fff;
  font-size: 20px;
  position: relative;
  height: 50px;
  background: #427935;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.btn1 {
  color: #fff;
  font-size: 20px;
  position: relative;
  height: 50px;
  background: #fabd00;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.btn2 {
  font-size: 20px;
  position: relative;
  height: 50px;
  background: #fff;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  font-weight: bold;
  letter-spacing: 0.1em;
  border: 1px solid #000;
}
.btn2:hover {
  background-color: #ccc;
}

.btn3 {
  display: block;
  width: 120px;
  height: 50px;
  margin: auto;
  font-size: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #fabd00;
  border: 1px solid #fabd00;
  border-radius: 50px;
}
.btn3:hover {
  opacity: 1;
  color: #fff;
  background-color: #fabd00;
}
@media screen and (max-width:768px) {
  .btn3 {
    width: 100px;
    height: 40px;
    font-size: 15px;
  }
}

.btn4 {
  display: block;
  width: 400px;
  height: 50px;
  margin: auto;
  font-size: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  font-weight: bold;
  letter-spacing: 0.1em;
  border: 1px solid #fabd00;
  border-radius: 50px;
}
.btn4:hover {
  opacity: 1;
  color: #fff;
  background-color: #fabd00;
}
@media screen and (max-width:768px) {
  .btn4 {
    width: 100%;
    font-size: 18px;
  }
}

ol {
  padding-left: 1.5em;
  line-height: 1.8;
}
ol li {
  padding-bottom: 10px;
  list-style-type: decimal;
}

.effect4 {
  overflow: hidden;
  transform: translate(0, -100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.effect4 img {
  display: block;
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.effect4.on {
  transition-delay: 1s;
  transform: translate(0, 0);
}
.effect4.on img {
  transition-delay: 1s;
  transform: translate(0, 0);
}

@keyframes first {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}
@keyframes second {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}
#zone_title::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1800px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1000px 2000px 0 0;
  border-color: #fabd00 transparent transparent transparent;
  z-index: -1;
}
@media screen and (max-width:768px) {
  #zone_title::before {
    left: calc(50% - 1880px);
  }
}
#zone_title h1 {
  max-width: 1240px;
  margin: auto;
  padding: 300px 20px 80px;
  color: #427935;
  font-size: 20px;
  letter-spacing: 0.1em;
}
#zone_title h1 i {
  display: block;
  font-family: "Passion One", cursive;
  font-size: 110px;
}
@media screen and (max-width:768px) {
  #zone_title h1 {
    padding: 50px 20px 50px;
    font-size: 16px;
  }
  #zone_title h1 i {
    font-size: 70px;
  }
}

header {
  position: fixed;
  width: 100%;
  line-height: 1;
  z-index: 1000;
  top: 0px;
  left: 0px;
  background: #fff;
  transition: 0.5s;
}
header.on {
  opacity: 0;
}
@media print, screen and (min-width:769px) {
  header.fade {
    background: none;
  }
  header.fade .pc {
    opacity: 0;
    pointer-events: none;
  }
}
header .gnav {
  height: 60px;
  padding-left: 20px;
  padding-right: 10%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header .gnav li {
  position: relative;
  transition: 0.5s;
}
header .gnav li a {
  font-size: 18px;
  font-weight: 700;
  color: #427935;
}
header .gnav .logo {
  width: 40px;
}
@media screen and (max-width:768px) {
  header .gnav {
    height: 40px;
  }
  header .gnav .logo {
    width: 30px;
  }
}

#menubtn {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10000;
}
#menubtn svg {
  width: 25px;
  height: 50px;
}
#menubtn svg .cls-1 {
  fill: #427935;
  transition: 0.2s;
}
#menubtn .hm_button.active svg .cls-1 {
  fill: none;
  stroke: #427935;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
@media screen and (max-width:768px) {
  #menubtn {
    width: 40px;
    height: 40px;
  }
  #menubtn svg {
    width: 25px;
    height: 38px;
  }
}

#menu {
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0;
  transition-duration: 0.3s;
  z-index: 0;
  line-height: 1;
  pointer-events: none;
  overflow-y: auto;
}
@media screen and (max-width:768px) {
  #menu {
    width: 100%;
  }
}
#menu.on {
  opacity: 1;
  pointer-events: auto;
  z-index: 9999;
}
#menu .in {
  position: relative;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-left: 1px solid #427935;
  border-bottom: 1px solid #427935;
}
@media screen and (max-width:768px) {
  #menu .in {
    display: block;
    border-left: 0;
    padding-top: 30px;
  }
}
#menu .in .gnav li {
  position: relative;
  border-bottom: 1px solid #427935;
}
#menu .in .gnav li a {
  display: block;
  color: #427935;
  font-size: 13px;
  vertical-align: baseline;
  padding: 20px;
  padding-right: 40px;
}
#menu .in .gnav li a i {
  font-size: 40px;
  font-family: "Passion One", cursive;
  letter-spacing: 0.25em;
}
@media print, screen and (min-width:769px) {
  #menu .in .gnav li a:hover {
    background-color: #427935;
    color: #fff;
  }
}
@media screen and (max-width:768px) {
  #menu .in .gnav li a {
    padding: 10px 20px;
  }
  #menu .in .gnav li a i {
    font-size: 30px;
    letter-spacing: 0.1em;
    margin-right: 10px;
  }
}
#menu .in .sec {
  background-color: #ecf2eb;
  padding: 30px 10px 30px 10px;
  width: 400px;
  flex: 1;
}
@media screen and (max-width:768px) {
  #menu .in .sec {
    padding: 20px;
    width: 100%;
  }
}
#menu .in .sec .t1 {
  font-weight: 900;
  font-size: 30px;
  line-height: 2;
}
@media print, screen and (min-width:769px) {
  #menu .in .sec .t1 {
    writing-mode: vertical-rl;
    margin: auto;
  }
}
@media screen and (max-width:768px) {
  #menu .in .sec .t1 {
    line-height: 1.5;
    font-size: 20px;
  }
}
#menu .in .sec .link {
  padding-bottom: 20px;
}
#menu .in .sec .link .btn1 {
  font-size: 22px;
}
#menu .in .sec .t2 {
  line-height: 1.5;
  font-size: 15px;
}
#menu .in .sec .t2 a {
  text-decoration: underline;
}
#menu .in .sec .t2 i {
  display: block;
  padding-top: 10px;
  font-size: 20px;
}
#menu .in .sec .t2 i a {
  text-decoration: none;
}
@media print, screen and (min-width:769px) {
  #menu .in .sec .set {
    max-width: 280px;
    margin: auto;
  }
}
@media screen and (max-width:768px) {
  #menu .in .sec .set {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0;
    letter-spacing: 0;
    gap: 20px 8px;
  }
  #menu .in .sec .set .flex {
    display: flex;
    gap: 20px 8px;
    width: 100%;
    margin-top: 20px;
  }
  #menu .in .sec .set .link {
    flex: 1;
    width: calc(33.3333333333% - 5.3333333333px);
    align-items: flex-end;
    width: 100px;
    padding-bottom: 0;
  }
  #menu .in .sec .set .link .btn0,
  #menu .in .sec .set .link .btn1 {
    font-size: 13px;
    line-height: 1.4;
  }
  #menu .in .sec .set .t2 {
    font-size: 11px;
  }
  #menu .in .sec .set .t2 i {
    font-size: 14px;
  }
}

footer {
  position: relative;
  border-top: 20px solid #fabd00;
}
footer .sec {
  max-width: 1240px;
  margin: auto;
  padding: 50px 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width:768px) {
  footer .sec {
    display: block;
  }
}
footer .sec .set1 {
  width: 260px;
}
footer .sec .set1 ul {
  padding-top: 10px;
}
footer .sec .set1 ul li {
  padding-top: 10px;
}
@media screen and (max-width:768px) {
  footer .sec .set1 {
    width: 100%;
  }
  footer .sec .set1 .logo {
    width: 260px;
    margin: auto;
  }
}
footer .sec .set2 {
  width: calc(100% - 320px);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}
footer .sec .set2 > li {
  width: 25%;
  padding-left: 20px;
}
@media screen and (max-width:1200px) {
  footer .sec .set2 > li {
    width: 50%;
  }
}
footer .sec .set2 > li a {
  display: block;
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 20px;
}
@media screen and (max-width:768px) {
  footer .sec .set2 > li a {
    font-size: 18px;
  }
}
footer .sec .set2 > li .sub {
  margin-top: -10px;
  padding-bottom: 30px;
}
footer .sec .set2 > li .sub a {
  display: block;
  padding-top: 15px;
  font-weight: 500;
  font-size: 16px;
  padding-bottom: 0;
}
@media screen and (max-width:768px) {
  footer .sec .set2 > li .sub a {
    font-size: 13px;
  }
}
@media screen and (max-width:768px) {
  footer .sec .set2 {
    width: 100%;
    padding-top: 40px;
  }
  footer .sec .set2 > li {
    padding-left: 0;
    width: 50%;
    white-space: nowrap;
  }
}
@media screen and (max-width:768px) and (max-width:350px) {
  footer .sec .set2 > li {
    width: auto;
  }
}
footer .copyright {
  font-size: 14px;
  letter-spacing: 0.1em;
  border-top: 1px solid #000;
  padding: 30px 20px;
}
@media screen and (max-width:768px) {
  footer .copyright {
    font-size: 10px;
    padding: 10px;
    text-align: center;
  }
}
footer #pagetop {
  position: absolute;
  bottom: 25px;
  right: 20px;
  z-index: 1;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
}
@media screen and (max-width:768px) {
  footer #pagetop {
    bottom: 55px;
  }
}

#toppage .m1 {
  font-weight: bold;
  font-size: 30px;
  color: #427935;
  padding-bottom: 20px;
}
@media screen and (max-width:768px) {
  #toppage .m1 {
    text-align: center;
    font-size: 20px;
  }
}
#toppage #zone1 .sec1 {
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  font-size: 0;
}
#toppage #zone1 .sec1 .over {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#toppage #zone1 .sec1 .p1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#toppage #zone1 .sec1 .p2 {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 52.5% 17.5%;
  z-index: 3;
}
@media screen and (max-width:768px) {
  #toppage #zone1 .sec1 .p2 {
    transform-origin: 47% 14%;
  }
}
#toppage #zone1 .sec1 .p3 {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 69.6% 40%;
}
@media screen and (max-width:768px) {
  #toppage #zone1 .sec1 .p3 {
    transform-origin: 76% 37%;
  }
}
#toppage #zone1 .sec1 .p4 {
  position: absolute;
  top: 0;
  left: 0;
}
#toppage #zone1 .sec1 .p5 {
  position: absolute;
  top: 0;
  left: 0;
}
#toppage #zone1 .sec2 {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  margin-top: -100px;
  color: #427935;
}
@media screen and (max-width:1200px) {
  #toppage #zone1 .sec2 {
    margin-top: -40px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone1 .sec2 {
    margin-top: 20px;
    margin-bottom: 80px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone1 .m1 {
    text-align: left;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone2 .naname1 {
    top: 290px;
  }
}
#toppage #zone2 h2 {
  position: absolute;
  top: 200px;
  left: calc(50% - 250px);
  width: 500px;
}
@media screen and (max-width:768px) {
  #toppage #zone2 h2 {
    top: 290px;
    left: calc(50% - 150px);
    width: 300px;
  }
}
@media print, screen and (min-width:769px) {
  #toppage #zone2 .p1 {
    position: absolute;
    top: 170px;
    left: calc(50% - 730px);
    width: 458px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone2 .p1 {
    width: 300px;
    margin: auto;
  }
}
#toppage #zone2 .p2 {
  position: absolute;
  top: 0px;
  left: calc(50% + 300px);
  width: 330px;
}
@media print, screen and (min-width:769px) {
  #toppage #zone2 .sec1 {
    position: absolute;
    bottom: 300px;
    left: calc(50% - 150px);
  }
}
@media screen and (max-width:768px) {
  #toppage #zone2 .sec1 {
    position: relative;
    padding: 270px 20px 0;
  }
}
#toppage #zone2 .sec2 {
  max-width: 1200px;
  margin: auto;
  padding: 450px 20px 250px;
}
@media print, screen and (min-width:769px) {
  #toppage #zone2 .sec2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone2 .sec2 {
    padding: 70px 20px 100px;
  }
}
#toppage #zone2 .sec2 li {
  width: 330px;
}
@media screen and (max-width:768px) {
  #toppage #zone2 .sec2 li {
    width: 280px;
    margin: auto;
    padding-bottom: 50px;
  }
  #toppage #zone2 .sec2 li .pic {
    width: 240px;
    margin: auto;
  }
}
#toppage #zone2 .sec2 li .set {
  background: url("../img/top/fuki.png") center top;
  background-size: 100%;
  width: 330px;
  height: 280px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 30px;
  margin-bottom: 15px;
}
@media screen and (max-width:768px) {
  #toppage #zone2 .sec2 li .set {
    width: 280px;
    height: 240px;
    padding: 25px;
  }
}
#toppage #zone2 .sec2 li .set .t1 {
  text-align: center;
  font-size: 20px;
  padding-bottom: 20px;
}
#toppage #zone2 .sec2 li .set .t2 {
  line-height: 2;
  padding-bottom: 20px;
}
#toppage #zone2 .sec2 li .set .btn3 {
  color: #fff;
  border: 1px solid #fff;
}
#toppage #zone2 .sec2 li .set .btn3:hover {
  color: #ea5452;
  background-color: #fff;
}
@media print, screen and (min-width:769px) {
  #toppage #zone2 .sec2 li:nth-of-type(2) {
    padding-top: 300px;
  }
  #toppage #zone2 .sec2 li:nth-of-type(3) {
    padding-top: 600px;
  }
}
@media print, screen and (min-width:769px) {
  #toppage #zone3 {
    height: 1400px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone3 .naname1 {
    top: 330px;
  }
}
#toppage #zone3 h2 {
  position: absolute;
  top: 200px;
  left: calc(50% - 250px);
  width: 500px;
}
@media screen and (max-width:768px) {
  #toppage #zone3 h2 {
    top: 330px;
    left: calc(50% - 150px);
    width: 300px;
  }
}
#toppage #zone3 .p1 {
  position: absolute;
  top: -88px;
  left: calc(50% + 50px);
  width: 385px;
}
#toppage #zone3 .p2 {
  position: absolute;
  top: 300px;
  left: calc(50% - 770px);
  width: 520px;
}
#toppage #zone3 .p3 {
  position: absolute;
  top: -80px;
  left: calc(50% - 340px);
  width: 220px;
}
@media print, screen and (min-width:769px) {
  #toppage #zone3 .p4 {
    position: absolute;
    top: -330px;
    left: calc(50% + 310px);
    width: 480px;
  }
  #toppage #zone3 .p5 {
    position: absolute;
    top: 550px;
    left: calc(50% - 230px);
    width: 700px;
  }
  #toppage #zone3 .sec1 {
    position: absolute;
    top: 1130px;
    left: calc(50% - 170px);
  }
  #toppage #zone3 .sec1 .link {
    position: absolute;
    bottom: 0;
    right: -150px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone3 {
    padding-bottom: 150px;
  }
  #toppage #zone3 .p4 {
    width: 300px;
    margin: auto;
  }
  #toppage #zone3 .p5 {
    width: 320px;
    margin: auto;
    padding: 240px 0 50px;
  }
  #toppage #zone3 .sec1 {
    padding: 0 20px;
  }
  #toppage #zone3 .sec1 .link {
    padding-top: 20px;
  }
}
@media print, screen and (min-width:769px) {
  #toppage #zone4 {
    height: 800px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone4 .naname2 {
    top: 230px;
  }
}
#toppage #zone4 h2 {
  position: absolute;
  top: 180px;
  left: calc(50% - 250px);
  width: 500px;
}
@media screen and (max-width:768px) {
  #toppage #zone4 h2 {
    top: 230px;
    left: calc(50% - 150px);
    width: 300px;
  }
}
#toppage #zone4 .p1 {
  position: absolute;
  top: -100px;
  left: calc(50% - 600px);
  width: 410px;
}
@media print, screen and (min-width:769px) {
  #toppage #zone4 .p2 {
    position: absolute;
    top: 250px;
    left: calc(50% + 120px);
    width: 422px;
  }
  #toppage #zone4 .sec1 {
    position: absolute;
    top: 510px;
    left: calc(50% - 560px);
  }
  #toppage #zone4 .sec1 .link {
    position: absolute;
    bottom: -70px;
    right: 0px;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone4 {
    padding-bottom: 100px;
  }
  #toppage #zone4 .p2 {
    width: 300px;
    margin: auto;
  }
  #toppage #zone4 .sec1 {
    position: relative;
    padding: 270px 20px 0;
  }
  #toppage #zone4 .sec1 .link {
    padding-top: 20px;
  }
}
#toppage #zone5 {
  background-color: #fabd00;
  padding: 40px 20px 10px;
  min-height: 160px;
}
#toppage #zone5 .in {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
#toppage #zone5 .in h2 {
  width: 220px;
  font-weight: bold;
  font-size: 25px;
  letter-spacing: 0.1em;
  padding-left: 20px;
}
@media screen and (max-width:768px) {
  #toppage #zone5 .in h2 {
    width: 100%;
    padding: 0;
    text-align: center;
  }
}
#toppage #zone5 .in .newslist {
  width: 100%;
}
@media print, screen and (min-width:769px) {
  #toppage #zone5 .in .newslist {
    flex: 1;
  }
}
#toppage #zone5 .in .newslist dl {
  line-height: 1.5;
  padding: 20px 0;
  border-bottom: 1px solid #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#toppage #zone5 .in .newslist dl:last-child {
  border-bottom: 0;
}
@media print, screen and (min-width:769px) {
  #toppage #zone5 .in .newslist dl {
    flex-direction: row;
    line-height: 1.5;
    padding-bottom: 10px;
    border-bottom: none;
    gap: 0;
  }
}
#toppage #zone5 .in .newslist dl .tag {
  font-size: 0.8em;
}
@media print, screen and (min-width:769px) {
  #toppage #zone5 .in .newslist dl .tag {
    padding-right: 1em;
  }
}
#toppage #zone5 .in .newslist dl .tag a {
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  justify-content: center;
  background-color: #fff;
  padding: 0.25em 0.75em 0.5em;
  border-radius: 100px;
  width: 6em;
}
#toppage #zone5 .in .newslist dl .tag a.information {
  background-color: #537f40;
  color: #fff;
}
#toppage #zone5 .in .newslist dl .tag a.announce {
  background-color: #fff;
  color: #ffbe2a;
}
#toppage #zone5 .in .newslist dl .date {
  font-size: 0.95em;
}
@media print, screen and (min-width:769px) {
  #toppage #zone5 .in .newslist dl .date {
    width: 8.5em;
  }
}
#toppage #zone5 .in .newslist dl .title {
  font-weight: bold;
  flex: 1;
}
@media print, screen and (min-width:769px) {
  #toppage #zone5 .in .link {
    position: absolute;
    top: 60px;
    left: 0;
  }
}
@media screen and (max-width:768px) {
  #toppage #zone5 .in .link {
    width: 100px;
    margin: auto;
    padding-top: 20px;
  }
}
#toppage #zone5 .in .link .btn3 {
  color: #fff;
  border: 1px solid #fff;
}
#toppage #zone5 .in .link .btn3:hover {
  color: #fabd00;
  background-color: #fff;
}

@media print, screen and (min-width:769px) {
  #achivement #zone_title .p1 {
    position: absolute;
    top: 40px;
    left: calc(50% + 100px);
    width: 680px;
    z-index: -1;
  }
}
@media screen and (max-width:768px) {
  #achivement #zone_title .p1 {
    padding-bottom: 30px;
  }
}
#achivement #zone1 {
  padding: 0 20px;
}
@media print, screen and (min-width:769px) {
  #achivement #zone1 {
    height: 490px;
  }
}
#achivement #zone1 .p1 {
  position: absolute;
  top: 0px;
  left: calc(50% - 830px);
  width: 422px;
  z-index: -1;
}
@media print, screen and (min-width:769px) {
  #achivement #zone1 .text {
    position: absolute;
    top: 30px;
    left: calc(50% - 280px);
    font-size: 18px;
    line-height: 3;
  }
}
@media screen and (max-width:768px) {
  #achivement #zone1 .text {
    padding-bottom: 50px;
  }
}
#achivement #zone2 {
  background-color: #e5e5e5;
  height: 1000px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
@media screen and (max-width:768px) {
  #achivement #zone2 {
    height: 360px;
  }
}
#achivement #zone2 h2 {
  position: relative;
  font-size: 240px;
  font-family: "Outfit";
  z-index: 2;
}
@media screen and (max-width:768px) {
  #achivement #zone2 h2 {
    font-size: 80px;
  }
}
#achivement #zone2 .ap1 {
  position: absolute;
  top: -40px;
  left: calc(50% - 640px);
  width: 373px;
  z-index: 1;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap1 {
    top: -30px;
    left: calc(50% - 200px);
    width: 130px;
  }
}
#achivement #zone2 .ap2 {
  position: absolute;
  top: 110px;
  left: calc(50% - 220px);
  width: 278px;
  z-index: 1;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap2 {
    top: 50px;
    left: calc(50% - 60px);
    width: 95px;
  }
}
#achivement #zone2 .ap3 {
  position: absolute;
  top: 90px;
  left: calc(50% + 220px);
  width: 403px;
  z-index: 1;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap3 {
    top: 30px;
    left: calc(50% + 60px);
    width: 140px;
  }
}
#achivement #zone2 .ap4 {
  position: absolute;
  top: 350px;
  left: calc(50% - 600px);
  width: 350px;
  z-index: 3;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap4 {
    top: 140px;
    left: calc(50% - 190px);
    width: 120px;
  }
}
#achivement #zone2 .ap5 {
  position: absolute;
  top: 730px;
  left: calc(50% - 430px);
  width: 530px;
  z-index: 1;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap5 {
    top: 270px;
    left: calc(50% - 140px);
    width: 185px;
  }
}
#achivement #zone2 .ap6 {
  position: absolute;
  top: 450px;
  left: calc(50% + 90px);
  width: 410px;
  z-index: 3;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap6 {
    top: 170px;
    left: calc(50% + 30px);
    width: 140px;
  }
}
#achivement #zone2 .ap7 {
  position: absolute;
  top: 700px;
  left: calc(50% + 250px);
  width: 380px;
  z-index: 3;
}
@media screen and (max-width:768px) {
  #achivement #zone2 .ap7 {
    top: 260px;
    left: calc(50% + 60px);
    width: 130px;
  }
}
#achivement #zone3 {
  max-width: 1240px;
  margin: auto;
  padding: 70px 20px 100px;
}
@media screen and (max-width:768px) {
  #achivement #zone3 {
    padding: 50px 20px 70px;
  }
}
#achivement #zone3 h2 {
  font-size: 100px;
  font-weight: 900;
  line-height: 1.2;
  padding-bottom: 50px;
}
@media screen and (max-width:768px) {
  #achivement #zone3 h2 {
    font-size: 50px;
    padding-bottom: 30px;
  }
}
#achivement #zone3 .text {
  font-size: 18px;
}
@media screen and (max-width:768px) {
  #achivement #zone3 .text {
    font-size: 16px;
  }
}

#company #zone_title h1 i {
  line-height: 0.8;
  margin-bottom: 15px;
}
#company .copy {
  font-weight: 900;
  font-size: 65px;
  line-height: 1.8;
  writing-mode: vertical-rl;
  font-feature-settings: "palt";
  white-space: nowrap;
}
@media screen and (max-width:768px) {
  #company .copy {
    font-size: 25px;
  }
}
@media print, screen and (min-width:769px) {
  #company #zone_title .p1 {
    position: absolute;
    top: 0px;
    left: calc(50% - 30px);
    width: 1010px;
  }
}
@media screen and (max-width:768px) {
  #company #zone_title .p1 {
    margin: 0 -40px;
  }
}
#company #zone_title .t1 {
  max-width: 1240px;
  margin: auto;
  padding: 50px 20px 200px;
  line-height: 3;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width:768px) {
  #company #zone_title .t1 {
    font-size: 16px;
    line-height: 2;
    padding-bottom: 100px;
  }
}
#company #zone1 .in {
  max-width: 1240px;
  margin: auto;
  padding: 80px 20px 150px;
}
@media screen and (max-width:768px) {
  #company #zone1 .in {
    padding: 50px 20px 120px;
  }
}
#company #zone1 .in .sec1 {
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
@media print, screen and (min-width:769px) {
  #company #zone1 .in .sec1 .pos {
    width: calc(100% - 340px);
  }
  #company #zone1 .in .sec1 .pos .set1 {
    width: 650px;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics {
    width: 320px;
    margin: auto;
    margin-top: 140px;
    position: relative;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics .p1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics .p2 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics .p3 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #company #zone1 .in .sec1 .pos .set1 .t1 {
    font-size: 18px;
    font-weight: bold;
    line-height: 3;
  }
}
@media screen and (max-width:768px) {
  #company #zone1 .in .sec1 {
    margin-top: 50px;
  }
  #company #zone1 .in .sec1 .copy {
    white-space: nowrap;
    line-height: 1;
  }
  #company #zone1 .in .sec1 .pos {
    width: calc(100% - 60px);
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics {
    width: 220px;
    margin: auto;
    margin-top: 70px;
    position: relative;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics .p1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics .p2 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #company #zone1 .in .sec1 .pos .set1 .visionpics .p3 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #company #zone1 .in .sec1 .pos .set1 .t1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
  }
}
#company #zone2 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
@media print, screen and (min-width:769px) {
  #company #zone2 .in .mds1 {
    text-align: center;
  }
}
#company #zone2 .in .mds1 span {
  display: block;
}
#company #zone2 .in .sec1 {
  position: relative;
}
@media print, screen and (min-width:769px) {
  #company #zone2 .in .sec1 {
    margin-top: 80px;
    height: 1480px;
  }
  #company #zone2 .in .sec1 .copy {
    line-height: 1;
    position: absolute;
    top: 480px;
    left: calc(50% - 70px);
  }
  #company #zone2 .in .sec1 .t1 {
    position: absolute;
    top: 640px;
    left: calc(50% + 120px);
    font-size: 18px;
    font-weight: bold;
    line-height: 3;
  }
  #company #zone2 .in .sec1 .p1 {
    position: absolute;
    top: 80px;
    left: calc(50% - 670px);
    width: 570px;
  }
  #company #zone2 .in .sec1 .p2 {
    position: absolute;
    top: 170px;
    left: calc(50% + 70px);
    width: 600px;
  }
  #company #zone2 .in .sec1 .p3 {
    position: absolute;
    top: 740px;
    left: calc(50% - 630px);
    width: 500px;
  }
}
@media screen and (max-width:768px) {
  #company #zone2 .in .sec1 {
    margin-top: 50px;
    margin-bottom: 120px;
  }
  #company #zone2 .in .sec1 .copy {
    margin-left: calc(50% - 50px);
  }
  #company #zone2 .in .sec1 .p1 {
    position: absolute;
    top: 70px;
    left: calc(50% - 230px);
    width: 180px;
  }
  #company #zone2 .in .sec1 .p2 {
    position: absolute;
    top: 170px;
    left: calc(50% + 10px);
    width: 200px;
  }
  #company #zone2 .in .sec1 .t1 {
    padding-top: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
  }
  #company #zone2 .in .sec1 .p3 {
    width: 260px;
    margin: auto;
    padding-top: 30px;
  }
}
@media print, screen and (min-width:769px) {
  #company #zone3 {
    height: 2800px;
  }
}
#company #zone3 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone3 .in .mds1 {
  position: relative;
}
#company #zone3 .in .mds1 span {
  display: block;
}
@media print, screen and (min-width:769px) {
  #company #zone3 .in .mds1 .s1 {
    padding-bottom: 20px;
  }
  #company #zone3 .in .mds1 .s3 {
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
  }
}
#company #zone3 .in .copy {
  writing-mode: inherit;
  white-space: nowrap;
  margin-top: 50px;
}
@media screen and (max-width:768px) {
  #company #zone3 .in .copy {
    margin-top: 30px;
    margin-bottom: 50px;
  }
}
#company #zone3 .in .box {
  color: #fff;
  padding: 40px 50px;
}
@media print, screen and (min-width:769px) {
  #company #zone3 .in .box {
    width: 580px;
    height: 580px;
  }
}
@media screen and (max-width:768px) {
  #company #zone3 .in .box {
    padding: 30px 20px 20px;
    margin-bottom: 50px;
  }
}
#company #zone3 .in .box h3 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}
#company #zone3 .in .box h3 i {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 110px;
  height: 110px;
  border-radius: 60px;
  background-color: #fff;
  font-size: 70px;
  font-weight: bold;
}
@media screen and (max-width:768px) {
  #company #zone3 .in .box h3 i {
    width: 60px;
    height: 60px;
    font-size: 35px;
  }
}
#company #zone3 .in .box .t1 {
  font-size: 17px;
  font-weight: bold;
  line-height: 3;
}
@media screen and (max-width:768px) {
  #company #zone3 .in .box .t1 {
    font-size: 15px;
    line-height: 2;
  }
}
#company #zone3 .in .value1 {
  background-color: #fabd00;
}
@media print, screen and (min-width:769px) {
  #company #zone3 .in .value1 {
    position: absolute;
    top: 760px;
    left: calc(50% - 80px);
  }
  #company #zone3 .in .value1 .t1 {
    padding: 30px 50px 0;
  }
}
#company #zone3 .in .value1 h3 {
  color: #fabd00;
}
#company #zone3 .in .value2 {
  background-color: #ea5452;
}
@media print, screen and (min-width:769px) {
  #company #zone3 .in .value2 {
    position: absolute;
    top: 1480px;
    left: calc(50% - 500px);
  }
  #company #zone3 .in .value2 .t1 {
    padding: 70px 50px 0;
  }
}
#company #zone3 .in .value2 h3 {
  color: #ea5452;
}
#company #zone3 .in .value3 {
  background-color: #427935;
}
@media print, screen and (min-width:769px) {
  #company #zone3 .in .value3 {
    position: absolute;
    top: 2200px;
    left: calc(50% - 80px);
  }
}
#company #zone3 .in .value3 h3 {
  color: #427935;
}
#company #zone4 {
  padding: 430px 0 100px;
}
@media screen and (max-width:768px) {
  #company #zone4 {
    padding: 150px 0 0px;
  }
  #company #zone4 .naname1 {
    top: 110px;
    height: 150px;
  }
}
#company #zone4 .mds1 {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone4 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone4 .in .sec1 {
  max-width: 900px;
  margin: auto;
  padding-top: 140px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 {
    align-items: flex-start;
    padding-top: 80px;
  }
}
#company #zone4 .in .sec1 .copy {
  position: relative;
}
#company #zone4 .in .sec1 .copy::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 55px;
  height: 100%;
  background-color: #fabd00;
  z-index: -1;
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 .copy::before {
    top: -10px;
    left: 0;
    width: 20px;
  }
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 .set {
    width: calc(100% - 60px);
  }
}
#company #zone4 .in .sec1 .set h3 {
  font-size: 45px;
  font-weight: bold;
  line-height: 1.5;
  padding-bottom: 40px;
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 .set h3 {
    font-size: 27px;
    padding-bottom: 20px;
  }
}
#company #zone4 .in .sec1 .set .t1 {
  font-size: 20px;
  line-height: 3;
  padding-bottom: 60px;
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 .set .t1 {
    font-size: 16px;
    line-height: 2;
  }
}
#company #zone4 .in .sec1 .t2 {
  text-align: right;
  font-size: 14px;
  line-height: 1.4;
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 .t2 {
    font-size: 12px;
  }
}
#company #zone4 .in .sec1 .t2 i {
  display: inline-block;
  text-align: left;
}
#company #zone4 .in .sec1 .t2 i b {
  display: block;
  font-size: 30px;
  font-weight: bold;
  padding-top: 1px;
}
@media screen and (max-width:768px) {
  #company #zone4 .in .sec1 .t2 i b {
    font-size: 18px;
    padding-top: 10px;
  }
}
#company #zone5 {
  padding: 430px 0 100px;
}
@media screen and (max-width:768px) {
  #company #zone5 {
    padding: 150px 0 0px;
  }
  #company #zone5 .naname1 {
    top: 110px;
    height: 150px;
  }
}
#company #zone5 .mds1 {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone5 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone5 .in .copy {
  padding-top: 80px;
  writing-mode: inherit;
}
#company #zone5 .in .copy span {
  display: inline-block;
  position: relative;
}
#company #zone5 .in .copy span::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #fabd00;
  z-index: -1;
}
@media screen and (max-width:768px) {
  #company #zone5 .in .copy span::before {
    bottom: 5px;
    height: 15px;
  }
}
@media print, screen and (min-width:769px) {
  #company #zone5 .in .copy span.ex::before {
    width: 200%;
  }
}
#company #zone5 .in .set {
  max-width: 1000px;
  margin: auto;
  padding-top: 60px;
}
@media screen and (max-width:768px) {
  #company #zone5 .in .set {
    padding-top: 30px;
  }
}
#company #zone5 .in .set .t1 {
  max-width: 680px;
  margin: auto;
  font-size: 20px;
  line-height: 3;
  padding-bottom: 60px;
}
@media screen and (max-width:768px) {
  #company #zone5 .in .set .t1 {
    font-size: 16px;
    line-height: 2;
  }
}
#company #zone5 .in .set .t2 {
  text-align: right;
  font-size: 14px;
  line-height: 1.4;
}
@media screen and (max-width:768px) {
  #company #zone5 .in .set .t2 {
    font-size: 12px;
  }
}
#company #zone5 .in .set .t2 i {
  display: inline-block;
  text-align: left;
}
#company #zone5 .in .set .t2 i b {
  display: block;
  font-size: 30px;
  font-weight: bold;
  padding-top: 1px;
}
@media screen and (max-width:768px) {
  #company #zone5 .in .set .t2 i b {
    font-size: 18px;
    padding-top: 10px;
  }
}
#company #zone6 {
  padding: 430px 0 100px;
}
@media screen and (max-width:768px) {
  #company #zone6 {
    padding: 150px 0 20px;
  }
  #company #zone6 .naname1 {
    top: 110px;
    height: 150px;
  }
}
#company #zone6 .mds1 {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone6 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone6 .in .sec {
  max-width: 820px;
  margin: auto;
  padding-top: 80px;
}
#company #zone6 .in .sec dl {
  line-height: 2;
}
@media print, screen and (min-width:769px) {
  #company #zone6 .in .sec dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
}
#company #zone6 .in .sec dl dt {
  width: 160px;
  padding: 20px 0 30px;
  border-top: 2px solid #000;
  font-weight: bold;
}
@media screen and (max-width:768px) {
  #company #zone6 .in .sec dl dt {
    width: 100%;
    padding: 10px;
  }
}
#company #zone6 .in .sec dl dd {
  width: calc(100% - 180px);
  padding: 20px 0 30px;
  border-top: 1px solid #000;
}
@media screen and (max-width:768px) {
  #company #zone6 .in .sec dl dd {
    width: 100%;
    padding: 20px 10px;
  }
}
#company #zone6 .in .sec dl dd b {
  font-weight: bold;
}
#company #zone6 .in .sec dl dd.ex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 10px;
}
#company #zone6 .in .sec dl dd.ex b {
  width: 120px;
  padding-bottom: 20px;
}
#company #zone6 .in .sec dl dd.ex i {
  width: calc(100% - 120px);
  padding-bottom: 20px;
}
#company #zone6 .in .sec .bd dt {
  border-bottom: 2px solid #000;
}
#company #zone6 .in .sec .bd dd {
  border-bottom: 1px solid #000;
}
#company #zone6 .in .sec .map {
  padding-top: 80px;
}
@media screen and (max-width:768px) {
  #company #zone6 .in .sec .map {
    padding-top: 50px;
  }
}
#company #zone6 .in .sec .map iframe {
  width: 100%;
  height: 400px;
}
#company #zone7 {
  padding: 430px 0 100px;
}
@media screen and (max-width:768px) {
  #company #zone7 {
    padding: 150px 0 0px;
  }
  #company #zone7 .naname1 {
    top: 110px;
    height: 150px;
  }
}
#company #zone7 .mds1 {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone7 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#company #zone7 .in .sec {
  max-width: 1100px;
  margin: auto;
}
#company #zone7 .in .sec .lead {
  font-size: 20px;
  line-height: 3;
  padding: 50px 0;
}
@media screen and (max-width:768px) {
  #company #zone7 .in .sec .lead {
    font-size: 16px;
    line-height: 2;
  }
}
#company #zone7 .in .sec .set {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: 10px;
}
#company #zone7 .in .sec .set .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #dcdddd;
  width: 100%;
  height: calc(100% - 30px);
}
@media screen and (max-width:768px) {
  #company #zone7 .in .sec .set .bg {
    height: calc(100% - 18px);
  }
}
#company #zone7 .in .sec .set dl {
  position: relative;
}
@media print, screen and (min-width:769px) {
  #company #zone7 .in .sec .set dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
}
#company #zone7 .in .sec .set dl dt {
  width: calc(100% - 600px);
  font-size: 20px;
  letter-spacing: 0.1em;
  padding-left: 30px;
}
#company #zone7 .in .sec .set dl dt i {
  display: block;
  font-size: 70px;
  font-family: "Outfit";
}
#company #zone7 .in .sec .set dl dt span {
  display: block;
  line-height: 1.8;
}
@media screen and (max-width:768px) {
  #company #zone7 .in .sec .set dl dt {
    width: 100%;
    font-size: 14px;
    padding-left: 15px;
  }
  #company #zone7 .in .sec .set dl dt i {
    font-size: 35px;
  }
}
#company #zone7 .in .sec .set dl dd {
  width: 550px;
  line-height: 1.8;
  padding-top: 40px;
}
#company #zone7 .in .sec .set dl dd .t1 {
  font-weight: bold;
  font-size: 18px;
}
@media print, screen and (min-width:769px) {
  #company #zone7 .in .sec .set dl dd .p1 {
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 200px;
  }
}
@media screen and (max-width:768px) {
  #company #zone7 .in .sec .set dl dd {
    width: 100%;
    padding: 10px 10px 10px 60px;
  }
  #company #zone7 .in .sec .set dl dd .t1 {
    font-size: 15px;
  }
  #company #zone7 .in .sec .set dl dd .p1 {
    padding-top: 10px;
    width: 200px;
  }
}

#contact #zone1 {
  max-width: 960px;
  margin: auto;
  padding: 0 20px 80px;
}
#contact #zone1 .t1 {
  font-size: 20px;
}
@media screen and (max-width:768px) {
  #contact #zone1 .t1 {
    font-size: 14px;
  }
}
#contact #zone1 .t2 {
  font-size: 130px;
  font-family: "Outfit";
  padding: 20px 0;
}
@media screen and (max-width:768px) {
  #contact #zone1 .t2 {
    font-size: 48px;
  }
}
#contact #zone1 .t3 {
  font-size: 30px;
  padding-bottom: 80px;
}
@media screen and (max-width:768px) {
  #contact #zone1 .t3 {
    font-size: 18px;
    padding-bottom: 50px;
  }
}
#contact #zone1 .text {
  font-size: 20px;
  padding-bottom: 50px;
}
@media screen and (max-width:768px) {
  #contact #zone1 .text {
    font-size: 14px;
  }
}
#contact #zone1 .text a {
  text-decoration: underline;
}
#contact #zone1 .sec {
  max-width: 700px;
  margin: auto;
}
#contact #zone1 .sec dl {
  margin-bottom: 50px;
}
@media screen and (max-width:768px) {
  #contact #zone1 .sec dl {
    margin-bottom: 30px;
  }
}
#contact #zone1 .sec dl dt {
  padding-bottom: 10px;
}
#contact #zone1 .sec dl dd .set1 {
  display: flex;
  align-items: center;
}
#contact #zone1 .sec dl dd .set1 button {
  border: 1px solid #000;
  padding: 4px;
  border-radius: 5px;
  margin-left: 10px;
  background-color: #ededed;
}
#contact #zone1 .sec dl dd small {
  display: inline-block;
  padding-bottom: 20px;
}
#contact #zone1 .textarea1 {
  width: 100%;
  background-color: #ededed;
  height: 40px;
  border-radius: 20px;
  padding: 5px 20px;
  margin-bottom: 10px;
}
#contact #zone1 .textarea2 {
  width: 100px;
  background-color: #ededed;
  height: 40px;
  border-radius: 20px;
  padding: 5px 20px;
  margin: 0 5px;
}
#contact #zone1 .textarea3 {
  width: 100%;
  background-color: #ededed;
  height: 300px;
  border-radius: 20px;
  padding: 5px 20px;
}
#contact #zone1 select {
  margin: 10px 0;
  padding: 5px;
  height: 40px;
}

#goods #zone_title .p1 {
  position: absolute;
  top: 120px;
  left: calc(50% + 210px);
  width: 460px;
}
#goods #zone1 {
  max-width: 1240px;
  margin: auto;
  padding: 0 10px 80px;
}
@media screen and (max-width:768px) {
  #goods #zone1 {
    padding-bottom: 50px;
  }
}
#goods #zone1 .sec1 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
#goods #zone1 .sec1 li {
  width: 25%;
  padding: 10px;
  margin-bottom: 50px;
  opacity: 0;
}
@media screen and (max-width:768px) {
  #goods #zone1 .sec1 li {
    width: 50%;
    margin-bottom: 30px;
  }
}
#goods #zone1 .sec1 li .text {
  padding-top: 10px;
}

#service .copy {
  font-weight: 900;
  font-size: 65px;
  line-height: 1.8;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
@media screen and (max-width:768px) {
  #service .copy {
    font-size: 25px;
  }
}
#service .mds1 {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
@media print, screen and (min-width:769px) {
  #service #zone1 {
    margin-top: -100px;
  }
}
@media screen and (max-width:768px) {
  #service #zone1 .naname1 {
    top: 290px;
  }
  #service #zone1 .copy {
    position: absolute;
    top: 0px;
    right: 10px;
  }
}
@media print, screen and (min-width:769px) {
  #service #zone1 .p1 {
    position: absolute;
    top: -310px;
    left: calc(50% + 100px);
    width: 510px;
  }
}
@media screen and (max-width:768px) {
  #service #zone1 .p1 {
    width: 300px;
    margin: auto;
  }
}
#service #zone1 .mds1 {
  padding-top: 330px;
}
@media screen and (max-width:768px) {
  #service #zone1 .mds1 {
    padding-top: 30px;
  }
}
#service #zone1 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#service #zone1 .in .sec1 {
  position: relative;
}
@media print, screen and (min-width:769px) {
  #service #zone1 .in .sec1 {
    margin-top: 120px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
  #service #zone1 .in .sec1 .pos {
    width: calc(100% - 340px);
  }
  #service #zone1 .in .sec1 .pos .set1 {
    width: 480px;
    padding-bottom: 220px;
  }
  #service #zone1 .in .sec1 .pos .set1 .p2 {
    width: 230px;
    margin: auto;
    padding: 50px 0;
  }
  #service #zone1 .in .sec1 .pos .set1 .t1 {
    font-size: 18px;
    font-weight: bold;
    line-height: 3;
    white-space: nowrap;
  }
  #service #zone1 .in .sec1 .pos .set2 {
    padding-bottom: 150px;
  }
  #service #zone1 .in .sec1 .pos .set2 .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #service #zone1 .in .sec1 .pos .set2 .box figure {
    width: 470px;
  }
  #service #zone1 .in .sec1 .pos .set2 .box .t2 {
    width: calc(100% - 520px);
    line-height: 3;
  }
  #service #zone1 .in .sec1 .pos .set2 h4 {
    font-size: 20px;
    font-family: "Outfit";
    padding: 30px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
  }
}
@media screen and (max-width:768px) {
  #service #zone1 .in .sec1 {
    margin-top: 30px;
  }
  #service #zone1 .in .sec1 .pos .set1 {
    padding-top: 120px;
    padding-bottom: 100px;
  }
  #service #zone1 .in .sec1 .pos .set1 .p2 {
    width: 130px;
    padding-bottom: 20px;
  }
  #service #zone1 .in .sec1 .pos .set1 .t1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
  }
  #service #zone1 .in .sec1 .pos .set2 {
    padding-bottom: 100px;
  }
  #service #zone1 .in .sec1 .pos .set2 .box figure {
    padding-bottom: 20px;
  }
  #service #zone1 .in .sec1 .pos .set2 .box .t2 {
    display: flex;
    justify-content: center;
    line-height: 3;
  }
  #service #zone1 .in .sec1 .pos .set2 h4 {
    font-size: 16px;
    font-family: "Outfit";
    padding: 40px 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
  }
}
@media screen and (max-width:768px) {
  #service #zone2 .naname1 {
    top: 100px;
  }
  #service #zone2 .copy {
    position: absolute;
    top: 0px;
    left: calc(50% - 70px);
  }
}
#service #zone2 .mds1 {
  padding-top: 380px;
}
@media screen and (max-width:768px) {
  #service #zone2 .mds1 {
    padding-top: 100px;
  }
}
#service #zone2 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px 100px;
}
@media print, screen and (min-width:769px) {
  #service #zone2 .in .sec1 {
    margin-top: 120px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
  #service #zone2 .in .sec1 .pos {
    width: calc(100% - 340px);
  }
  #service #zone2 .in .sec1 .pos .set1 {
    width: 540px;
  }
  #service #zone2 .in .sec1 .pos .set1 .p1 {
    width: 290px;
    margin: auto;
    padding-bottom: 120px;
  }
  #service #zone2 .in .sec1 .pos .set1 .t1 {
    font-size: 18px;
    font-weight: bold;
    line-height: 3;
  }
}
@media screen and (max-width:768px) {
  #service #zone2 .in {
    padding: 0px 20px 80px;
  }
  #service #zone2 .in .sec1 {
    margin-top: 30px;
    padding-top: 150px;
    position: relative;
  }
  #service #zone2 .in .sec1 .pos .set1 .p1 {
    width: 220px;
    margin: auto;
    padding-left: 100px;
    padding-bottom: 30px;
  }
  #service #zone2 .in .sec1 .pos .set1 .t1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
  }
}
#service #zone3 {
  background: url("../img/service/bg.png") center top;
  background-size: 255px auto;
  padding: 80px 20px 50px;
  margin-bottom: 100px;
}
#service #zone3 .p1 {
  width: 650px;
  margin: auto;
  padding-bottom: 50px;
}
@media screen and (max-width:768px) {
  #service #zone3 .p1 {
    width: 100%;
  }
}
#service #zone3 .sec1 {
  max-width: 1200px;
  margin: auto;
}
#service #zone3 .sec1 .text {
  font-weight: bold;
  padding-bottom: 20px;
}
#service #zone3 .sec1 .text.ex {
  padding-left: 5em;
  text-indent: -5em;
}

#sales #orderlink {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #427935;
  color: #fff;
  font-size: 20px;
  text-align: center;
  height: 50px;
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: translate 0.3s;
  translate: 0 calc(100% + 30px);
}
#sales #orderlink br {
  display: none;
}
#sales #orderlink.show {
  translate: 0 0;
}
@media (min-width: 930px) {
  #sales #orderlink {
    bottom: 30px;
    right: 30px;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1.6;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
  }
  #sales #orderlink br {
    display: block;
  }
}
@media (max-width: 768px) {
  #sales .mds2 {
    margin-top: 180px;
  }
}
#sales .catalog {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2em;
  margin-top: 100px;
}
@media (max-width: 768px) {
  #sales .catalog {
    margin-top: 30px;
    flex-direction: column;
  }
}
#sales .catalog img {
  width: 280px;
}
@media (max-width: 768px) {
  #sales .catalog img {
    width: 400px;
    max-width: 100%;
  }
}
#sales .catalog h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1em;
}
#sales .catalog h4 mark {
  background: linear-gradient(transparent 70%, #fabd00 70%);
}
#sales .catalog ul {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  font-size: 1em;
  font-weight: bold;
}
#sales .catalog-link {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  margin-top: 3em;
}
#sales .catalog-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #427935;
  color: #fff;
  height: 3em;
  width: 18em;
  margin: auto;
}
#sales .info-list {
  width: calc(100% - 80px);
  max-width: 800px;
  margin: auto;
  margin-top: 100px;
}
@media (max-width: 768px) {
  #sales .info-list {
    width: 100%;
    margin-top: 40px;
  }
}
#sales .info-item {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}
#sales .info-item + .info-item {
  margin-top: 1.5em;
}
#sales .info-item img {
  width: 80px;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
#sales .info-item div {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#sales .info-item div h4 {
  font-size: 1em;
  font-weight: bold;
}
#sales .info-item div p {
  font-size: 1em;
  line-height: 1.6;
}
#sales .info-more {
  margin-top: 1.5em;
  text-align: right;
}
#sales .recommended-list {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 20px;
}
#sales .recommended-item {
  width: calc(33.3333333333% - 13.3333333333px);
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media (max-width: 768px) {
  #sales .recommended-item {
    width: calc(50% - 10px);
  }
}
#sales .recommended-item p {
  line-height: 1.6;
}
#sales .formlink {
  line-height: 2;
  margin: 300px auto;
  max-width: calc(100% - 40px);
  text-align: center;
}
@media (max-width: 768px) {
  #sales .formlink {
    margin: 100px auto;
  }
}
#sales .formlink p + p {
  margin-top: 50px;
}
#sales .formlink a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #427935;
  color: #fff;
  height: 3em;
  width: -moz-fit-content;
  width: fit-content;
  margin: 2em auto;
  padding: 0 4em;
}
#sales .copy {
  font-weight: 900;
  font-size: 65px;
  line-height: 1.8;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
@media screen and (max-width:768px) {
  #sales .copy {
    font-size: 25px;
  }
}
#sales .mds1 {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
@media print, screen and (min-width:769px) {
  #sales #zone1 {
    margin-top: -100px;
  }
}
@media screen and (max-width:768px) {
  #sales #zone1 .naname1 {
    top: 290px;
  }
  #sales #zone1 .copy {
    position: absolute;
    top: 0px;
    right: 10px;
  }
}
@media print, screen and (min-width:769px) {
  #sales #zone1 .p1 {
    position: absolute;
    top: -630px;
    left: calc(50% + 100px);
    width: 408px;
  }
}
@media screen and (max-width:768px) {
  #sales #zone1 .p1 {
    position: relative;
    width: 240px;
    top: -40px;
    margin: auto;
  }
}
#sales #zone1 .mds1 {
  padding-top: 330px;
}
@media screen and (max-width:768px) {
  #sales #zone1 .mds1 {
    padding-top: 30px;
  }
}
#sales #zone1 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px;
}
#sales #zone1 .in .sec1 {
  position: relative;
}
@media print, screen and (min-width:769px) {
  #sales #zone1 .in .sec1 {
    margin-top: 120px;
  }
  #sales #zone1 .in .sec1 .pos .set1 {
    width: 480px;
    padding-bottom: 220px;
  }
  #sales #zone1 .in .sec1 .pos .set1 .p2 {
    width: 230px;
    margin: auto;
    padding: 50px 0;
  }
  #sales #zone1 .in .sec1 .pos .set1 .t1 {
    font-size: 18px;
    font-weight: bold;
    line-height: 3;
    white-space: nowrap;
  }
  #sales #zone1 .in .sec1 .pos .set2 {
    padding-top: 150px;
  }
  #sales #zone1 .in .sec1 .pos .set2 .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sales #zone1 .in .sec1 .pos .set2 .box figure {
    width: 470px;
  }
  #sales #zone1 .in .sec1 .pos .set2 .box .t2 {
    width: calc(100% - 520px);
    line-height: 3;
  }
  #sales #zone1 .in .sec1 .pos .set2 h4 {
    font-size: 20px;
    font-family: "Outfit";
    padding: 30px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
  }
}
@media screen and (max-width:768px) {
  #sales #zone1 .in .sec1 {
    margin-top: 30px;
  }
  #sales #zone1 .in .sec1 .pos .set1 {
    padding-top: 120px;
    padding-bottom: 100px;
  }
  #sales #zone1 .in .sec1 .pos .set1 .p2 {
    width: 130px;
    padding-bottom: 20px;
  }
  #sales #zone1 .in .sec1 .pos .set1 .t1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
  }
  #sales #zone1 .in .sec1 .pos .set2 {
    padding-bottom: 100px;
  }
}
@media screen and (max-width:768px) and (max-width: 768px) {
  #sales #zone1 .in .sec1 .pos .set2 {
    padding-bottom: 0px;
  }
}
@media screen and (max-width:768px) {
  #sales #zone1 .in .sec1 .pos .set2 .box figure {
    padding-bottom: 20px;
  }
  #sales #zone1 .in .sec1 .pos .set2 .box .t2 {
    display: flex;
    justify-content: center;
    line-height: 3;
  }
  #sales #zone1 .in .sec1 .pos .set2 h4 {
    font-size: 16px;
    font-family: "Outfit";
    padding: 40px 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
  }
}
@media screen and (max-width:768px) {
  #sales #zone2 .naname1 {
    top: 100px;
  }
  #sales #zone2 .copy {
    position: absolute;
    top: 0px;
    left: calc(50% - 70px);
  }
}
#sales #zone2 .mds1 {
  padding-top: 380px;
}
@media screen and (max-width:768px) {
  #sales #zone2 .mds1 {
    padding-top: 200px;
  }
}
#sales #zone2 .in {
  max-width: 1240px;
  margin: auto;
  padding: 0px 20px 100px;
}
@media print, screen and (min-width:769px) {
  #sales #zone2 .in .sec1 {
    margin-top: 120px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
  #sales #zone2 .in .sec1 .pos {
    width: calc(100% - 340px);
  }
  #sales #zone2 .in .sec1 .pos .set1 {
    width: 540px;
  }
  #sales #zone2 .in .sec1 .pos .set1 .p1 {
    width: 290px;
    margin: auto;
    padding-bottom: 120px;
  }
  #sales #zone2 .in .sec1 .pos .set1 .t1 {
    font-size: 18px;
    font-weight: bold;
    line-height: 3;
  }
}
@media screen and (max-width:768px) {
  #sales #zone2 .in {
    padding: 0px 20px 80px;
  }
  #sales #zone2 .in .sec1 {
    margin-top: 30px;
    padding-top: 150px;
    position: relative;
  }
  #sales #zone2 .in .sec1 .pos .set1 .p1 {
    width: 220px;
    margin: auto;
    padding-left: 100px;
    padding-bottom: 30px;
  }
  #sales #zone2 .in .sec1 .pos .set1 .t1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
  }
}
#sales #zone3 {
  background: url("../img/service/bg.png") center top;
  background-size: 255px auto;
  padding: 80px 20px 50px;
  margin-bottom: 100px;
}
#sales #zone3 .p1 {
  width: 650px;
  margin: auto;
  padding-bottom: 50px;
}
@media screen and (max-width:768px) {
  #sales #zone3 .p1 {
    width: 100%;
  }
}
#sales #zone3 .sec1 {
  max-width: 1200px;
  margin: auto;
}
#sales #zone3 .sec1 .text {
  font-weight: bold;
  padding-bottom: 20px;
}
#sales #zone3 .sec1 .text.ex {
  padding-left: 5em;
  text-indent: -5em;
}

#privacy #zone1 {
  max-width: 840px;
  margin: auto;
  padding: 0 20px 100px;
}
@media screen and (max-width:768px) {
  #privacy #zone1 {
    padding-bottom: 50px;
  }
}
#privacy #zone1 .set {
  padding-top: 50px;
}
@media screen and (max-width:768px) {
  #privacy #zone1 .set {
    padding-top: 30px;
  }
}
#privacy #zone1 .set h2 {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 20px;
}
@media screen and (max-width:768px) {
  #privacy #zone1 .set h2 {
    font-size: 18px;
  }
}
#privacy #zone1 .set .text {
  padding-bottom: 20px;
}
#privacy #zone1 .set ol {
  padding-bottom: 20px;
}

.recruit {
  background-color: #92d2e3;
  overflow: clip;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.6;
  font-feature-settings: "palt";
  text-align: justify;
  position: relative;
  z-index: 1;
  margin-bottom: -20px;
}
@media print, screen and (min-width:769px) {
  .recruit {
    font-size: 18px;
    padding-top: 100px;
  }
}
.recruit__kv-arrow {
  display: none;
  position: absolute;
  top: 100dvh;
  left: 50%;
  translate: -50% -110%;
  width: 20px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
@media (min-width: 800px) {
  .recruit__kv-arrow {
    display: block;
  }
}
.recruit__kv-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.recruit__kv-arrow span {
  font-size: 12px;
  line-height: 1;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 100%;
  translate: 0% -80%;
}
.recruit__kv-arrow img {
  animation: scrollarrow 2s infinite;
}
.recruit__kv {
  width: calc(100% - 36px);
  max-width: 1780px;
  margin: auto;
  margin-bottom: 75px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media print, screen and (min-width:769px) {
  .recruit__kv {
    width: calc(100% - 160px);
    flex-direction: row-reverse;
    align-items: center;
    gap: 70px;
    margin-bottom: 235px;
  }
}
.recruit__kv-image {
  cursor: pointer;
  position: relative;
  width: 80%;
  margin: 15vw auto 0;
}
@media print, screen and (min-width:769px) {
  .recruit__kv-image {
    margin: 0;
    margin-top: 80px;
    max-width: 760px;
    flex: 1;
  }
}
.recruit__kv-image .image {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -30%;
}
.recruit__kv-image .click {
  pointer-events: none;
  width: 25%;
  position: absolute;
  right: -5%;
  top: 15%;
  z-index: 1;
  animation: ill-float 2s ease-in-out alternate infinite;
}
.recruit__kv-text {
  display: flex;
  flex-direction: column;
  gap: 23px;
  max-width: 874px;
}
@media print, screen and (min-width:769px) {
  .recruit__kv-text {
    gap: 40px;
    flex: 1.2;
  }
}
.recruit__kv-text p {
  line-height: 2;
}
@media screen and (max-width:768px) {
  .recruit__kv-text p {
    font-size: 13px;
  }
}
.recruit__kv-roulette {
  position: relative;
}
.recruit__kv-roulette .roulette {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  translate: -50.1% -47.1%;
}
.recruit__menu-button {
  width: 113px;
  position: fixed;
  right: 15px;
  top: 100dvh;
  z-index: 1;
  translate: 0 100px;
  transition: translate 0.3s cubic-bezier(0.42, 0, 1, 1);
}
@media print, screen and (min-width:769px) {
  .recruit__menu-button {
    display: none;
  }
}
.recruit__menu-button.is-visible {
  translate: 0 calc(-100% - 15px);
  transition: translate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.recruit__menu {
  position: fixed;
  left: 0;
  top: 100dvh;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 13px;
  display: flex;
  flex-direction: row-reverse;
  gap: 30px;
  translate: 0 100px;
  transition: translate 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@media print, screen and (min-width:769px) {
  .recruit__menu {
    display: none;
  }
}
.recruit__menu.is-open {
  translate: 0 -100%;
}
.recruit__menu-close {
  width: 30px;
  height: 30px;
  position: relative;
}
.recruit__menu-close span {
  display: block;
  width: 110%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: 45deg;
}
.recruit__menu-close span + span {
  rotate: -45deg;
}
.recruit__menu-list {
  font-size: 17px;
  line-height: 1;
  text-align: center;
}
.recruit__menu-list li {
  border-top: 1px solid #fff;
}
.recruit__menu-list li:first-child {
  border: none;
}
.recruit__menu-list a {
  color: #fff;
  display: block;
  padding: 30px;
}
.recruit__section {
  background-color: #fff;
  position: relative;
  z-index: 0;
  width: calc(100% - 36px);
  max-width: 1780px;
  padding: 26px;
  padding-top: 90px;
  margin: auto;
  border-radius: 28px;
  border: 3px solid #5dc2d0;
}
@media print, screen and (min-width:769px) {
  .recruit__section {
    width: calc(100% - 160px);
    padding: 60px;
    padding-top: 180px;
    border-radius: 116px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__section {
    padding-top: 230px;
    padding-bottom: 130px;
  }
}
@media screen and (min-width:1600px) {
  .recruit__section {
    padding: 130px;
    padding-top: 230px;
  }
}
.recruit__section-next {
  background-color: #fff;
  overflow: hidden;
  position: relative;
  z-index: -1;
  opacity: 0.8;
  width: 43px;
  height: 90px;
  margin: auto;
}
@media print, screen and (min-width:769px) {
  .recruit__section-next {
    width: 108px;
    height: 170px;
  }
}
.recruit__section-next::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-right: 3px solid #92d2e3;
  border-bottom: 3px solid #92d2e3;
  position: absolute;
  top: 0;
  left: 50%;
  rotate: 45deg;
  translate: -50% -100%;
  animation: arrow 1.5s infinite;
}
.recruit__section-title {
  position: sticky;
  top: 40px;
  width: 297px;
  margin: -118px auto 20px;
  z-index: 1;
}
@media print, screen and (min-width:769px) {
  .recruit__section-title {
    translate: -60px 0;
    width: 592px;
    top: 20px;
    margin: -260px 0 40px;
  }
  .recruit__section-title img {
    transition: scale 0.4s;
    transform-origin: left top;
  }
  .recruit__section-title.is-stuck img {
    scale: 0.5;
  }
}
@media screen and (min-width:1200px) {
  .recruit__section-title {
    translate: -120px 0;
    margin-top: -310px;
    margin-bottom: 40px;
  }
}
.recruit__section-copy.a {
  height: 62px;
}
@media print, screen and (min-width:769px) {
  .recruit__section-copy.a {
    height: 79px;
  }
}
.recruit__section-copy.b {
  height: 62px;
}
@media print, screen and (min-width:769px) {
  .recruit__section-copy.b {
    height: 79px;
  }
}
.recruit__section-copy.c {
  height: 96px;
}
@media print, screen and (min-width:769px) {
  .recruit__section-copy.c {
    height: 193px;
  }
}
.recruit__section-copy.d {
  height: 26px;
}
@media print, screen and (min-width:769px) {
  .recruit__section-copy.d {
    height: 79px;
  }
}
.recruit__section-copy img {
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.recruit__whats-text {
  margin: 25px 0 20px;
  max-width: 1426px;
}
@media print, screen and (min-width:769px) {
  .recruit__whats-text {
    margin: 58px 0 90px;
  }
}
.recruit__whats-image {
  position: relative;
  overflow: hidden;
  z-index: 0;
  /*
  &::before {
  	content: '';
  	position: absolute;
  	top: 0; bottom: 0; left: -15%; right: -15%;
  	background: #92d2e3;
  	clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  	transform: translateX(-105%);
  	z-index: 1;
  	pointer-events: none;
  }
  img {
  	opacity: 0;
  	transform: scale(1.06) translateX(-12px);
  }
  &.is-visible {
  	&::before { animation: whats-bar 1.1s linear forwards; }
  	img {
  		animation:
  			whats-img-show 0s 0.52s step-end forwards,
  			whats-img-move 1.0s 0.52s cubic-bezier(0.3, 0, 0.1, 1) forwards;
  	}
  }
  @keyframes whats-bar {
  	0%   { transform: translateX(-105%); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  	47%  { transform: translateX(0%);    animation-timing-function: linear; }
  	53%  { transform: translateX(0%);    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  	100% { transform: translateX(105%); }
  }
  @keyframes whats-img-show { to { opacity: 1; } }
  @keyframes whats-img-move {
  	from { transform: scale(1.06) translateX(-12px); }
  	to   { transform: scale(1) translateX(0); }
  }
  */
}
.recruit__whats-image .whats-tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  z-index: 1;
  pointer-events: none;
}
.recruit__whats-image .whats-tiles span {
  background: #fff;
}
.recruit__whats-image.is-visible .whats-tiles span {
  animation: tile-fade 0.4s ease-out both;
}
@keyframes tile-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.recruit__interview {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  z-index: 0;
  margin-top: 40px;
  padding-top: 20px;
}
@media print, screen and (min-width:769px) {
  .recruit__interview {
    gap: 125px;
    margin-top: 103px;
    padding-top: 110px;
  }
}
.recruit__interview::before {
  content: "";
  display: block;
  width: 42px;
  height: 5px;
  background-color: #92d2e3;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
}
@media print, screen and (min-width:769px) {
  .recruit__interview::before {
    width: 82px;
  }
}
.recruit__interview .interview {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
@media print, screen and (min-width:769px) {
  .recruit__interview .interview {
    flex-direction: row;
  }
}
@media print, screen and (min-width:769px) {
  .recruit__interview.reverse .interview {
    flex-direction: row-reverse;
  }
}
.recruit__interview .schedule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
@media print, screen and (min-width:769px) {
  .recruit__interview .schedule {
    gap: 20px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__interview .schedule {
    gap: 50px;
  }
}
.recruit__interview-ill {
  display: flex;
  align-items: center;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-ill {
    flex-direction: column;
  }
}
.reverse .recruit__interview-ill {
  flex-direction: row-reverse;
}
@media print, screen and (min-width:769px) {
  .reverse .recruit__interview-ill {
    flex-direction: column;
  }
}
.recruit__interview-ill img {
  width: 170px;
  scale: 0;
  opacity: 0;
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.recruit__interview-ill img.is-popped {
  scale: 1;
  opacity: 1;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-ill img {
    width: 300px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__interview-ill img {
    width: 480px;
  }
}
.recruit__interview-ill p {
  font-size: 9px;
  vertical-align: baseline;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-ill p {
    font-size: 18px;
  }
}
.recruit__interview-ill p strong {
  font-size: 19px;
  line-height: 1;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-ill p strong {
    font-size: 39px;
  }
}
.recruit__interview-ill p strong small {
  font-size: 11px;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-ill p strong small {
    font-size: 23px;
  }
}
.recruit__interview-txt {
  max-height: 270px;
  overflow: auto;
  font-weight: normal;
  line-height: 2;
  padding-right: 1.5em;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-txt {
    flex: 1;
    max-height: 700px;
  }
}
.recruit__interview-txt h4 {
  font-size: 19px;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 1em;
}
@media print, screen and (min-width:769px) {
  .recruit__interview-txt h4 {
    font-size: 42px;
  }
}
.recruit__interview-txt h4::first-letter {
  color: #f39c64;
}
.recruit__interview-txt h4 + p {
  font-weight: bold;
}
.recruit__interview-txt h5 {
  color: #f39c64;
  font-weight: bold;
  margin-top: 2em;
}
.recruit__schedule-title {
  width: 94px;
  aspect-ratio: 1;
  border-radius: 500px;
  background-color: #fff;
  border: 1px solid #92d2e3;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  position: sticky;
  top: 160px;
  left: 0;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-title {
    position: static;
    font-size: 18px;
    width: 160px;
    translate: 0 -40px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__schedule-title {
    font-size: 24px;
    width: 215px;
    translate: 0 -60px;
  }
}
.recruit__schedule-table {
  flex: 1;
  font-weight: normal;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .recruit__schedule-table::after {
    content: "";
    display: block;
    width: calc(100% + 100px);
    height: 1px;
    background-color: #5dc2d0;
    position: absolute;
    top: 35px;
    right: 0;
  }
}
.recruit__schedule-table dl {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table dl {
    flex-direction: column;
    gap: 38px;
    max-width: 130px;
  }
}
.recruit__schedule-table.is-visible dl {
  opacity: 1;
  transform: none;
}
.recruit__schedule-table.is-visible dl:nth-child(1) {
  transition-delay: 0s;
}
.recruit__schedule-table.is-visible dl:nth-child(2) {
  transition-delay: 0.1s;
}
.recruit__schedule-table.is-visible dl:nth-child(3) {
  transition-delay: 0.2s;
}
.recruit__schedule-table.is-visible dl:nth-child(4) {
  transition-delay: 0.3s;
}
.recruit__schedule-table.is-visible dl:nth-child(5) {
  transition-delay: 0.4s;
}
.recruit__schedule-table.is-visible dl:nth-child(6) {
  transition-delay: 0.5s;
}
.recruit__schedule-table.is-visible dl:nth-child(7) {
  transition-delay: 0.6s;
}
.recruit__schedule-table.is-visible dl:nth-child(8) {
  transition-delay: 0.7s;
}
.recruit__schedule-table.is-visible dl:nth-child(9) {
  transition-delay: 0.8s;
}
.recruit__schedule-table.is-visible dl:nth-child(10) {
  transition-delay: 0.9s;
}
.recruit__schedule-table dt,
.recruit__schedule-table dd {
  padding: 10px 0;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table dt,
  .recruit__schedule-table dd {
    padding: 0;
  }
}
.recruit__schedule-table dt {
  font-size: 14px;
  line-height: 1;
  width: 3.25em;
  color: #92d2e3;
  font-weight: bold;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table dt {
    font-size: 18px;
    width: auto;
  }
}
.recruit__schedule-table dd {
  font-size: 9px;
  flex: 1;
  border-left: 1px solid #92d2e3;
  padding-left: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table dd {
    font-size: 12px;
    padding-left: 0;
    border: none;
  }
}
.recruit__schedule-table dd h5 {
  font-size: 14px;
  line-height: 1;
  color: #727171;
  font-weight: bold;
  position: relative;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table dd h5 {
    font-size: 16px;
  }
}
.recruit__schedule-table dd h5::before {
  content: "";
  width: 5px;
  aspect-ratio: 1;
  display: block;
  background-color: #000;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: -0.5em;
  translate: -100% -50%;
}
@media print, screen and (min-width:769px) {
  .recruit__schedule-table dd h5::before {
    width: 8px;
    top: -21px;
    left: 0;
    translate: 0% -50%;
    z-index: 1;
  }
}
.recruit__step {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 20px;
}
@media screen and (min-width:1200px) {
  .recruit__step {
    gap: 70px;
  }
}
.recruit__step li {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media print, screen and (min-width:769px) {
  .recruit__step li {
    font-size: 16px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__step li {
    width: calc(25% - 52.5px);
    gap: 30px;
    font-size: 14px;
  }
}
.recruit__career {
  margin: 25px -36px 0;
  position: relative;
}
@media print, screen and (min-width:769px) {
  .recruit__career {
    margin: 36px -55px 0;
  }
}
.recruit__career .ill {
  position: absolute;
}
.recruit__career .ill.a {
  width: 40%;
  top: -10%;
  left: 65%;
  animation: ill-float 4s ease-in-out infinite;
}
@media print, screen and (min-width:769px) {
  .recruit__career .ill.a {
    width: 35%;
    top: -600px;
    left: 70%;
  }
}
.recruit__career .ill.b {
  width: 35%;
  top: 45%;
  left: 8%;
  animation: ill-walk 0.55s ease-in-out infinite;
}
@media print, screen and (min-width:769px) {
  .recruit__career .ill.b {
    width: 30%;
    top: 30%;
    left: 15%;
  }
}
.recruit__career .ill.c {
  width: 35%;
  top: 47%;
  left: 41%;
  transform-origin: bottom center;
  animation: ill-sway 3.2s ease-in-out infinite;
}
@media print, screen and (min-width:769px) {
  .recruit__career .ill.c {
    width: 30%;
    top: 32%;
    left: 45%;
  }
}
.recruit__career .ill.d {
  width: 35%;
  top: 20%;
  left: 57%;
  animation: ill-walk 0.7s ease-in-out infinite;
  animation-delay: -0.3s;
}
@media print, screen and (min-width:769px) {
  .recruit__career .ill.d {
    width: 30%;
    top: 0%;
    left: 60%;
  }
}
.recruit__career .bln {
  position: absolute;
  width: 20%;
}
@media print, screen and (min-width:769px) {
  .recruit__career .bln {
    width: 15%;
  }
}
.recruit__career .bln.a {
  top: -5%;
  left: 55%;
}
@media print, screen and (min-width:769px) {
  .recruit__career .bln.a {
    top: -500px;
    left: 63%;
  }
}
.recruit__career .bln.b {
  top: 35%;
  left: 30%;
}
@media print, screen and (min-width:769px) {
  .recruit__career .bln.b {
    top: 25%;
    left: 35%;
  }
}
.recruit__career .bln.c {
  top: 60%;
  left: 65%;
}
@media print, screen and (min-width:769px) {
  .recruit__career .bln.c {
    top: 55%;
  }
}
.recruit__career .bln.d {
  top: 28%;
  left: 82%;
}
@media print, screen and (min-width:769px) {
  .recruit__career .bln.d {
    top: 20%;
  }
}
.recruit__number {
  margin-top: 20px;
  border: 3px solid #92d2e3;
  border-bottom: none;
}
@media print, screen and (min-width:769px) {
  .recruit__number {
    margin-top: 88px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__number-flex {
    display: flex;
  }
  .recruit__number-flex > div {
    flex: 1;
  }
  .recruit__number-flex > div:first-child {
    border-right: 3px solid #92d2e3;
  }
}
@media screen and (min-width:1200px) {
  .recruit__number-flex2 {
    display: flex;
  }
  .recruit__number-flex2 > div {
    flex: 1;
  }
  .recruit__number-flex2 > div:first-child {
    flex: 0.9;
    border-right: 3px solid #92d2e3;
  }
}
.recruit__number-item {
  border-bottom: 3px solid #92d2e3;
  padding: 20px 13px;
}
@media print, screen and (min-width:769px) {
  .recruit__number-item {
    padding: 50px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__number-item {
    padding: 50px;
  }
}
.recruit__number-item h4 {
  background-color: #a47eb6;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  margin: 0 auto 25px;
  border-radius: 100px;
  position: relative;
}
@media print, screen and (min-width:769px) {
  .recruit__number-item h4 {
    font-size: 22px;
    height: 66px;
    margin: 0 auto 65px;
  }
}
@media (min-width: 1480px) {
  .recruit__number-item h4 {
    font-size: 30px;
  }
}
.recruit__number-item h4::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 12px solid #a47eb6;
  border-bottom: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 100%;
}
@media print, screen and (min-width:769px) {
  .recruit__number-item h4::after {
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-top: 30px solid #a47eb6;
  }
}
.recruit__number-item .number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
}
.recruit__number-item .number strong {
  font-size: 99px;
  font-weight: normal;
  color: #a47eb6;
  display: inline-block;
  scale: 0;
  opacity: 0;
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.recruit__number-item .number strong.is-popped {
  scale: 1;
  opacity: 1;
}
@media print, screen and (min-width:769px) {
  .recruit__number-item .number strong {
    font-size: 150px;
  }
}
@media (min-width: 1480px) {
  .recruit__number-item .number strong {
    font-size: 230px;
  }
}
.recruit__number-item .number small {
  font-size: 31px;
  color: #727171;
  translate: 0.25em -0.2em;
}
@media print, screen and (min-width:769px) {
  .recruit__number-item .number small {
    font-size: 40px;
  }
}
@media (min-width: 1480px) {
  .recruit__number-item .number small {
    font-size: 80px;
  }
}
.recruit__number-illust {
  position: absolute;
  z-index: 1;
}
.recruit__number-illust.i {
  width: 156px;
  bottom: -30px;
  right: 0;
  animation: illust-chat 2.4s ease-in-out infinite;
}
@media print, screen and (min-width:769px) {
  .recruit__number-illust.i {
    width: 560px;
    bottom: -100px;
    right: -50px;
  }
}
.recruit__number-illust.b {
  width: 70px;
  bottom: 70px;
  right: -10px;
}
@media print, screen and (min-width:769px) {
  .recruit__number-illust.b {
    width: 222px;
    bottom: 260px;
  }
}
.recruit__pie-wrap {
  position: relative;
  margin-top: 15px;
}
@media print, screen and (min-width:769px) {
  .recruit__pie-wrap {
    margin-top: 25px;
  }
}
.recruit__pie {
  display: block;
  width: 60%;
  margin: auto;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.6s ease-out;
}
.recruit__pie.is-animated {
  transform: scale(1);
}
.recruit__pie-label {
  position: absolute;
  line-height: 1.2;
}
.recruit__pie-label small {
  display: block;
  font-size: 9px;
  font-weight: bold;
}
@media print, screen and (min-width:769px) {
  .recruit__pie-label small {
    font-size: 20px;
  }
}
.recruit__pie-label strong {
  display: block;
  font-size: 38px;
  font-weight: bold;
}
@media print, screen and (min-width:769px) {
  .recruit__pie-label strong {
    font-size: 80px;
  }
}
.recruit__pie-label.purple {
  color: #a47eb6;
}
.recruit__pie-label.gray {
  color: #888;
}
.recruit__pie-label.upper-left {
  top: 5%;
  left: 3%;
}
.recruit__pie-label.upper-right {
  top: 5%;
  right: 3%;
  text-align: right;
}
.recruit__pie-label.lower-left {
  bottom: 5%;
  left: 3%;
}
.recruit__pie-label.lower-right {
  bottom: 5%;
  right: 3%;
  text-align: right;
}
.recruit__bar-chart {
  margin-top: 15px;
  padding-right: 2em;
}
@media print, screen and (min-width:769px) {
  .recruit__bar-chart {
    margin-top: 30px;
    flex: 1;
  }
}
@media screen and (min-width:1200px) {
  .recruit__bar-chart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 231px);
    padding-right: 1em;
  }
}
.recruit__bar-chart .bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
@media print, screen and (min-width:769px) {
  .recruit__bar-chart .bar-row {
    gap: 18px;
    margin-bottom: 28px;
  }
}
@media screen and (min-width:1200px) {
  .recruit__bar-chart .bar-row {
    margin-bottom: 0;
  }
}
.recruit__bar-chart .bar-label {
  width: 28px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #727171;
  line-height: 1.2;
  flex-shrink: 0;
}
.recruit__bar-chart .bar-label small {
  display: block;
  font-size: 10px;
}
@media print, screen and (min-width:769px) {
  .recruit__bar-chart .bar-label {
    width: 55px;
    font-size: 22px;
  }
  .recruit__bar-chart .bar-label small {
    font-size: 22px;
  }
}
.recruit__bar-chart .bar-inner {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.recruit__bar-chart .bar-fill {
  height: 32px;
  width: 0;
  flex-shrink: 0;
  background: repeating-linear-gradient(45deg, #a47eb6 0px, #a47eb6 2px, #fff 2px, #fff 7px);
  border-radius: 3px;
  transition: width 1.2s ease-out;
}
@media print, screen and (min-width:769px) {
  .recruit__bar-chart .bar-fill {
    height: 60px;
  }
}
.recruit__bar-chart .bar-count {
  margin-left: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #a47eb6;
  flex-shrink: 0;
}
@media print, screen and (min-width:769px) {
  .recruit__bar-chart .bar-count {
    margin-left: 16px;
    font-size: 28px;
  }
}
.recruit__accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 65px;
  border-right: 3px solid #ec7aa4;
  border-bottom: 3px solid #ec7aa4;
  margin-bottom: 18px;
  line-height: 1;
  padding-right: 16px;
  cursor: pointer;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-button {
    gap: 30px;
    height: 120px;
    padding-right: 65px;
    margin-bottom: 30px;
  }
}
.recruit__accordion-button small {
  background-color: #ec7aa4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  width: 80px;
  height: 34px;
  border-radius: 100px;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-button small {
    font-size: 30px;
    width: 260px;
    height: 68px;
  }
}
.recruit__accordion-button span {
  flex: 1;
  font-size: 20px;
  font-weight: bold;
  color: #ec7aa4;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-button span {
    font-size: 45px;
  }
}
.recruit__accordion-button i {
  width: 28px;
  aspect-ratio: 1;
  border: 1px solid #ec7aa4;
  border-radius: 100px;
  position: relative;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-button i {
    width: 66px;
  }
}
.recruit__accordion-button i::before, .recruit__accordion-button i::after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #ec7aa4;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-button i::before, .recruit__accordion-button i::after {
    width: 35px;
    height: 2px;
  }
}
.recruit__accordion-button i::after {
  rotate: 90deg;
}
.recruit__accordion-button.open i::after {
  rotate: 0deg;
}
.recruit__accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.6s;
}
.recruit__accordion-body dl {
  border-bottom: 2px solid #5dc2d0;
  padding-bottom: 18px;
  margin-bottom: 18px;
  font-size: 14px;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-body dl {
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
  }
}
.recruit__accordion-body dl:last-child {
  margin-bottom: 28px;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-body dl:last-child {
    margin-bottom: 65px;
  }
}
.recruit__accordion-body dt::first-letter {
  color: #ec7aa4;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-body dt {
    width: 8em;
  }
}
.recruit__accordion-body dd {
  padding-left: 1em;
}
@media print, screen and (min-width:769px) {
  .recruit__accordion-body dd {
    width: 700px;
    max-width: calc(100% - 8em);
  }
}
.recruit__cloud {
  position: absolute;
  z-index: -1;
  width: 230px;
  top: 700px;
  right: -40px;
  animation: ill-float 6s ease-in-out infinite, cloud-flow 28s linear infinite alternate;
}
.recruit__cloud.b {
  animation: ill-float 7.5s -2.8s ease-in-out infinite, cloud-flow 32s -16s linear infinite alternate;
}
.recruit__cloud.c {
  animation: ill-float 5.2s -4.1s ease-in-out infinite, cloud-flow 25s -5s linear infinite alternate;
}
.recruit__cloud.d {
  animation: ill-float 8.8s -1.3s ease-in-out infinite, cloud-flow 35s -17s linear infinite alternate;
}
.recruit__cloud.e {
  animation: ill-float 6.5s -3.5s ease-in-out infinite, cloud-flow 30s -8s linear infinite alternate;
}
.recruit__cloud.f {
  animation: ill-float 7.2s -1.7s ease-in-out infinite, cloud-flow 27s -13s linear infinite alternate;
}
.recruit__cloud.g {
  animation: ill-float 5.8s -4.8s ease-in-out infinite, cloud-flow 33s -3s linear infinite alternate;
}
.recruit__cloud.h {
  animation: ill-float 9.2s -0.8s ease-in-out infinite, cloud-flow 29s -20s linear infinite alternate;
}
.recruit__cloud.i {
  animation: ill-float 6.8s -2.2s ease-in-out infinite, cloud-flow 26s -10s linear infinite alternate;
}
.recruit__cloud.j {
  animation: ill-float 8.1s -5.3s ease-in-out infinite, cloud-flow 31s -6s linear infinite alternate;
}
@media screen and (max-width:768px) {
  .recruit__cloud {
    width: 140px;
  }
  .recruit__cloud.a {
    right: -15px;
  }
  .recruit__cloud.b {
    right: auto;
    left: -10px;
    width: 120px;
  }
  .recruit__cloud.c {
    right: -15px;
  }
  .recruit__cloud.d {
    right: auto;
    left: -5px;
    width: 130px;
  }
  .recruit__cloud.e, .recruit__cloud.f, .recruit__cloud.g, .recruit__cloud.h, .recruit__cloud.i, .recruit__cloud.j {
    display: none;
  }
}
@media print, screen and (min-width:769px) {
  .recruit__cloud {
    right: auto;
    width: 300px;
  }
  .recruit__cloud.a {
    left: 20px;
  }
  .recruit__cloud.b {
    right: 80px;
    width: 260px;
  }
  .recruit__cloud.c {
    left: 60px;
    width: 220px;
  }
  .recruit__cloud.d {
    right: 80px;
    width: 280px;
  }
  .recruit__cloud.e {
    left: 40px;
    width: 240px;
  }
  .recruit__cloud.f {
    right: 100px;
    width: 260px;
  }
  .recruit__cloud.g {
    left: 30px;
    width: 200px;
  }
  .recruit__cloud.h {
    right: 90px;
    width: 300px;
  }
  .recruit__cloud.i {
    right: 120px;
    width: 350px;
  }
  .recruit__cloud.j {
    left: 80px;
    width: 320px;
  }
}
@media screen and (min-width:1200px) {
  .recruit.b, .recruit.c, .recruit.d {
    right: 200px;
  }
}
.recruit__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 0 140px;
  background-image: url(../img/recruit/bg_town.svg);
  background-repeat: repeat-x;
  background-size: 1257px auto;
  background-position: center bottom -1px;
  animation: bg-town 120s linear infinite;
}
@media print, screen and (min-width:769px) {
  .recruit__tel {
    gap: 18px;
    flex-direction: row;
    justify-content: center;
    padding: 150px 0 328px;
    background-size: 3516px auto;
  }
}
@media screen and (min-width:1200px) {
  .recruit__tel {
    gap: 28px;
  }
}
.recruit__tel img {
  width: 278px;
}
@media screen and (min-width:1200px) {
  .recruit__tel img {
    width: 557px;
  }
}
.recruit__tel a {
  font-size: 42px;
  line-height: 1;
  font-family: "Outfit", sans-serif;
}
@media print, screen and (min-width:769px) {
  .recruit__tel a {
    translate: 0 -15%;
    pointer-events: none;
  }
}
@media screen and (min-width:1200px) {
  .recruit__tel a {
    font-size: 98px;
  }
}

@keyframes bg-town {
  0% {
    background-position: 0 101%;
  }
  100% {
    background-position: -1257px 101%;
  }
}
@media print, screen and (min-width:769px) {
  @keyframes bg-town {
    0% {
      background-position: 0 101%;
    }
    100% {
      background-position: -3516px 101%;
    }
  }
}
@keyframes arrow {
  0% {
    top: -10%;
  }
  100% {
    top: 130%;
  }
}
@keyframes spin {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes cloud-flow {
  from {
    transform: translateX(-90px);
  }
  to {
    transform: translateX(90px);
  }
}
@keyframes ill-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes ill-walk {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  25% {
    translate: 0 -6px;
    rotate: -2deg;
  }
  50% {
    translate: 0 0;
    rotate: 0deg;
  }
  75% {
    translate: 0 -6px;
    rotate: 2deg;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes ill-sway {
  0%, 100% {
    rotate: 0deg;
  }
  30% {
    rotate: -2.5deg;
  }
  70% {
    rotate: 2.5deg;
  }
}
@keyframes illust-chat {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  20% {
    translate: 0 -5px;
    rotate: 0.4deg;
  }
  40% {
    translate: 0 -2px;
    rotate: -0.3deg;
  }
  60% {
    translate: 0 -7px;
    rotate: 0.5deg;
  }
  80% {
    translate: 0 -3px;
    rotate: -0.2deg;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes scrollarrow {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
}
@media screen and (max-width:768px) {
  .none, .pc {
    display: none;
  }
  main a {
    color: #000;
  }
}
@media print, screen and (min-width:769px) {
  .none, .sp {
    display: none;
  }
  a[href^="tel:"] {
    cursor: default;
    color: #000;
    text-decoration: none;
  }
  a[href^="tel:"]:hover {
    opacity: 1;
  }
  a {
    transition: 0.3s;
    color: #000;
  }
  a:hover {
    opacity: 0.7;
  }
}
.form-inner {
  width: calc(100% - 40px);
  max-width: 700px;
  margin: auto;
  margin-bottom: 80px;
}
.form-inner dl {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.form-inner dl + dl {
  margin-top: 2em;
}
@media print, screen and (min-width:769px) {
  .form-inner dl {
    flex-direction: row;
  }
}
.form-inner dl dt {
  padding: 0;
  line-height: 1.4;
  font-weight: bold;
  font-size: 0.9em;
}
@media print, screen and (min-width:769px) {
  .form-inner dl dt {
    width: 12em;
  }
}
.form-inner dl dd {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
@media print, screen and (min-width:769px) {
  .form-inner dl dd {
    flex: 1;
  }
}
.form-inner ol {
  margin-top: 3em;
}
@media screen and (max-width:768px) {
  .form-inner ol {
    padding-left: 0;
  }
  .form-inner ol li {
    list-style: none;
  }
}
.form-inner ol li:nth-child(n+6) {
  display: none;
}
.form-inner ol li div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-inner ol li div [placeholder=数量] {
  width: 3em;
  text-align: center;
}
.form-inner ol.open li:nth-child(n+6) {
  display: block;
}
.form-inner .more {
  margin-top: 1em;
  text-align: center;
  font-size: 0.8em;
}
.form-inner .more a {
  text-decoration: underline;
  color: #333;
}
.form-inner .more a::after {
  content: " ▼";
}
.form-inner .input-outer {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 3em;
}
.form-inner ::-moz-placeholder {
  color: #ccc;
}
.form-inner ::placeholder {
  color: #ccc;
}
.form-inner input[type=text],
.form-inner input[type=email],
.form-inner input[type=tel],
.form-inner textarea {
  display: block;
  width: 100%;
  border: 1px solid #427935;
  padding: 5px;
}
.form-inner textarea {
  min-height: 8em;
}
.form-inner input[type=file]::file-selector-button {
  background-color: #427935;
  color: #fff;
  outline: none;
  border: none;
  padding: 5px 10px;
  font-weight: bold;
}
.form-inner .text {
  padding: 50px 0;
}
.form-inner .text a {
  text-decoration: underline;
}
.form-inner .submit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.form-inner .submit input[type=submit],
.form-inner .submit button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #427935;
  color: #fff;
  font-weight: bold;
  width: 100%;
  height: 4em;
  max-width: 220px;
}
.form-inner .submit input[type=submit].back,
.form-inner .submit button.back {
  background-color: #ccc;
  color: #777;
}
.form-inner .submit .wpcf7-spinner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

article#announcement {
  padding: 0 20px;
  max-width: 1040px;
  margin: 0 auto 120px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media print, screen and (min-width:769px) {
  article#announcement {
    flex-direction: row;
  }
}
article#announcement section {
  flex: 1;
}
@media screen and (max-width:768px) {
  article#announcement section {
    display: none;
  }
  article#announcement section.active {
    display: block;
  }
}
article#announcement section h2 {
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.5em 1em;
  border-radius: 100px;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width:768px) {
  article#announcement section h2 {
    display: none;
  }
}
article#announcement section {
  /* お知らせの見出し色 */
}
article#announcement section.information h2 {
  background-color: #537f40;
}
article#announcement section {
  /* ご報告の見出し色 */
}
article#announcement section.announce h2 {
  background-color: #ffbe2a;
}
article#announcement {
  /* リストスタイル */
}
article#announcement .article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
article#announcement .article-list li {
  margin: 1.5em 0;
  width: auto;
}
article#announcement .article-list a {
  display: flex;
  align-items: center;
}
article#announcement .article-list .post-date {
  font-size: 0.8em;
  color: #555;
  width: 8.5em;
  min-width: 8.5em;
  margin-right: 10px;
}
article#announcement .article-list .post-title {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: normal;
  /* Strongタグのデフォルトスタイルを上書き */
}
article#announcement {
  /* 「前の記事を見る」リンク */
}
article#announcement .archive-link {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9em;
}
article#announcement .archive-link a {
  font-size: inherit;
  color: #888;
  text-decoration: underline;
}

.taxonomy-title {
  font-weight: bold;
  padding: 0.25em 1em;
  border-radius: 100px;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #537f40;
}
.taxonomy-title.information {
  background-color: #537f40;
}
.taxonomy-title.announce {
  background-color: #ffbe2a;
}

.announcement-tab {
  display: flex;
  margin-bottom: 20px;
}
@media print, screen and (min-width:769px) {
  .announcement-tab {
    display: none;
  }
}
.announcement-tab li {
  flex: 1;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  opacity: 0.6;
  cursor: pointer;
}
.announcement-tab li.information {
  background-color: #537f40;
}
.announcement-tab li.announce {
  background-color: #ffbe2a;
}
.announcement-tab li.active {
  opacity: 1;
}

.sec1.mainpic {
  backface-visibility: hidden;
  overflow: hidden;
}
.sec1.mainpic * {
  overflow: hidden;
}

.moveset1,
.moveitem1,
.moveitem2,
.moveitem3,
.moveitem4,
.moveitem5,
.moveitem6,
.moveset2,
.moveitem1,
.moveitem2,
.moveitem3,
.move1,
.ef4,
.ef3,
.ef2b,
.ef2,
.ef1 {
  backface-visibility: hidden;
}
.moveset1 img,
.moveitem1 img,
.moveitem2 img,
.moveitem3 img,
.moveitem4 img,
.moveitem5 img,
.moveitem6 img,
.moveset2 img,
.moveitem1 img,
.moveitem2 img,
.moveitem3 img,
.move1 img,
.ef4 img,
.ef3 img,
.ef2b img,
.ef2 img,
.ef1 img {
  backface-visibility: hidden;
}

.accordion__btn {
  font-size: 0.9em;
  margin-top: 0.5em;
}
.accordion__btn span {
  cursor: pointer;
  text-decoration: underline;
}
/*# sourceMappingURL=style.css.map */