@charset "UTF-8";
/*
see: http://html5doctor.com/html-5-reset-stylesheet/
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  color: #333; /* RGB */
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  letter-spacing: 0.1rem;
  text-align: center;
}

a {
  text-decoration: none;
  color: #333;
}
@media screen and (max-width: 480px) {
  a {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
}
a:hover {
  opacity: 1;
}

p {
  letter-spacing: 0.1rem;
  line-height: 3rem;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  p {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 480px) {
  p {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
}

li {
  list-style: none;
}
@media screen and (max-width: 480px) {
  li {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
}

table {
  width: 100%;
}

img {
  width: 100%;
  vertical-align: middle;
}

/*　上に上がる動き　*/
#page-top.UpMove {
  -webkit-animation: UpAnime 0.5s forwards;
          animation: UpAnime 0.5s forwards;
}

@-webkit-keyframes UpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes UpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove {
  -webkit-animation: DownAnime 0.5s forwards;
          animation: DownAnime 0.5s forwards;
}

@-webkit-keyframes DownAnime {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}

@keyframes DownAnime {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}
.fadein {
  opacity: 0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.fadein.fadein-bottom {
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
}
.fadein.scrollin {
  opacity: 1 !important;
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;
}

.inner {
  overflow: hidden;
}

#header {
  position: fixed;
  z-index: 9999;
  inset: 0;
  height: 80px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#header.active {
  height: 130px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), color-stop(76%, rgba(0, 0, 0, 0.03)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.03) 76%, rgba(0, 0, 0, 0) 100%);
}

.section-header {
  position: relative;
  margin: 0 auto;
  padding-top: 20px;
  height: 60px;
}
.section-header .header-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.section-header .menu-list-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 140px;
  z-index: 9999;
}
.section-header .menu-list-icon li {
  width: 100px;
}
.section-header .menu-list-icon li + li {
  border-left: 1px solid #fff;
  pointer-events: none;
}
.section-header .menu-list-icon span {
  display: block;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  padding-top: 10px;
}
.section-header .icon-img {
  width: 30px;
}

@media screen and (max-width: 1080px) {
  .section-header .menu-list-icon {
    margin-left: 20px;
  }
}
@media screen and (max-width: 768px) {
  #header {
    padding: 0 20px;
  }
  .section-header {
    padding-top: 15px;
  }
  .section-header .header-menu {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .section-header .menu-list-icon {
    margin-right: 50px;
  }
  .section-header .menu-list-icon li {
    width: 80px;
  }
  .section-header .menu-list-icon li + li {
    pointer-events: auto;
  }
}
#footer {
  background: url("/cmn/img/footer.png");
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.footer-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  row-gap: 30px;
  margin-top: 20px;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.footer-menu li a {
  font-size: 1.4rem;
  position: relative;
  padding-top: 25px;
}
.footer-menu li a::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  background: #333;
  left: 50%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.footer-menu li a:hover {
  opacity: 0.6;
}

address {
  font-style: inherit;
}

.copylight {
  font-size: 1.2rem;
  padding-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .footer-content {
    padding: 60px 15px;
  }
  .footer-menu {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    display: inline-block;
    margin-top: 0;
    text-align: left;
  }
  .footer-menu li {
    margin-bottom: 10px;
  }
  .footer-menu li a {
    padding-top: 0;
    padding-left: 25px;
  }
  .footer-menu li a::before {
    width: 10px;
    height: 1px;
    top: 50%;
    left: 0%;
  }
}
.main {
  background-image: url("/cmn/img/bg.png");
}

.page {
  max-width: 1100px;
  padding: 0 30px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .page {
    padding: 0 15px;
  }
}
.br {
  display: none;
}

.br-block {
  display: block;
}

@media screen and (max-width: 768px) {
  .br {
    display: block;
  }
  .br-block {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .br {
    display: block;
  }
}
.btn {
  font-size: 1.4rem;
  border: 1px solid #000;
  background-color: #fff;
  text-align: center;
  display: block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  max-width: 80%;
  margin: 0 auto;
  margin-top: 50px;
  padding: 0;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn:hover {
  opacity: 0.6;
}
.btn::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  margin: auto;
}

.submit-btn {
  display: inline-block;
  width: 180px;
  height: 50px;
  line-height: 50px;
  background: #487c38;
  color: #fff;
  letter-spacing: 0.1rem;
  margin-top: 20px;
  border: 1px solid #fff;
  font-family: "Noto Serif JP", serif;
}
.submit-btn:hover {
  color: #487c38;
  background: #fff;
  border: 1px solid #487c38;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.submit-btn-link {
  display: inline-block;
  width: 180px;
  height: 50px;
  line-height: 50px;
  background: #fff;
  color: #487c38;
  margin-top: 20px;
  border: 1px solid #487c38;
  font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 480px) {
  .submit-btn-link {
    margin-right: 0;
  }
}
.link-btn {
  position: relative;
  background-color: transparent;
  border: 1px solid #00552e;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 5px;
}
.link-btn::after {
  position: absolute;
  content: "";
  top: -3px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #00552e;
  border-right: 1px solid #00552e;
}

.h-logo {
  width: 200px;
}

.f-logo {
  width: 160px;
}

@media screen and (max-width: 768px) {
  .h-logo {
    width: 70px;
  }
  .f-logo {
    width: 100px;
  }
}
.arrow {
  place-items: center;
}

.arrow img {
  width: 10px;
}

.main-title {
  font-size: 3.6rem;
  margin-bottom: 25px;
}

.sub-title {
  font-size: 2rem;
  position: relative;
  padding-left: 60px;
  display: inline-block;
}
.sub-title::before {
  position: absolute;
  content: "";
  width: 40px;
  height: 1px;
  background: #333;
  top: 50%;
  left: 0;
}

.title-vertical {
  font-size: 3.6rem;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  text-align: center;
  position: relative;
  width: 10%;
}
.title-vertical::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100px;
  background: #000;
  top: -50%;
  left: 90%;
}

.sub-title-vertical {
  font-size: 2rem;
  position: relative;
  padding-top: 60px;
  display: inline-block;
}
.sub-title-vertical::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 40px;
  background: #fff;
  top: 10px;
  left: 48%;
}

.title {
  font-size: 2.6rem;
  line-height: 32px;
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 768px) {
  .main-title {
    font-size: 2.8rem;
    margin-bottom: 15px;
  }
  .sub-title {
    font-size: 1.8rem;
    padding-left: 0;
    padding-left: 40px;
  }
  .sub-title::before {
    width: 30px;
    height: 1px;
    top: 52%;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  .title-vertical {
    font-size: 2.8rem;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 40px;
    margin-bottom: 50px;
  }
  .title-vertical::before {
    width: 100px;
    height: 1px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    top: 100%;
  }
  .sub-title-vertical {
    font-size: 1.8rem;
    padding-top: 0;
    padding-left: 40px;
  }
  .sub-title-vertical::before {
    width: 30px;
    height: 1px;
    top: 52%;
    left: 0;
  }
  .title {
    font-size: 2.4rem;
    line-height: 32px;
    letter-spacing: 0.1rem;
  }
}
@media (min-width: 768px) {
  .tell-number a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
.heading {
  margin-bottom: 30px;
  letter-spacing: 0.2rem;
}

.item-heading {
  font-size: 3.4rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-bottom: 40px;
  margin-bottom: 50px;
}
.item-heading::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  background-color: #000;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  bottom: 0;
}

.item-heading02 {
  font-size: 3.2rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .item-heading {
    font-size: 2.8rem;
  }
  .item-heading02 {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}
.box-wrap {
  background: #fafafa;
  padding: 30px;
  border: 10px solid #fff;
  outline: 1px solid #ece8e8;
  letter-spacing: 0.1rem;
  margin: 0 auto;
  max-width: 900px;
  margin-bottom: 120px;
}

@media screen and (max-width: 768px) {
  .box-wrap {
    padding: 30px 10px;
    margin-bottom: 80px;
  }
}
.box02-wrap {
  position: relative;
  padding: 30px 20px;
  max-width: 700px;
  margin: 0 auto;
  border-top: 2px solid #b3ada0;
  border-bottom: 2px solid #b3ada0;
  margin-bottom: 100px;
}
.box02-wrap::before, .box02-wrap::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 2px;
  height: calc(100% + 20px);
  background-color: #b3ada0;
}
.box02-wrap::before {
  left: 10px;
}
.box02-wrap::after {
  right: 10px;
}
.box02-wrap .title {
  font-size: 2.8rem;
  display: inline-block;
  margin-bottom: 10px;
}

.message {
  padding-bottom: 80px;
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .message {
    padding-bottom: 50px;
  }
}
.marker-animation.active {
  background-size: 100% 100%;
}

.marker-animation {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgb(255, 250, 153)));
  background: linear-gradient(transparent 50%, rgb(255, 250, 153) 50%);
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
  background-repeat: no-repeat;
  background-size: 0% 100%;
}

.open-btn {
  display: none;
}

#nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 50px;
     -moz-column-gap: 50px;
          column-gap: 50px;
  text-align: left;
}
#nav ul a {
  color: #fff;
  letter-spacing: 0.2rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#nav ul a:hover {
  opacity: 0.6;
}

@media screen and (max-width: 1080px) {
  #nav ul {
    -webkit-column-gap: 25px;
       -moz-column-gap: 25px;
            column-gap: 25px;
  }
  #nav ul a {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  #nav {
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    width: 100%;
    height: 100vh;
    background-color: rgba(17, 17, 17, 0.9);
    opacity: 0;
    visibility: hidden;
  }
  #nav ul {
    display: none;
  }
  #nav.panelactive {
    z-index: 999;
    opacity: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    visibility: visible;
  }
  #nav.panelactive ul {
    display: block;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    position: absolute;
    z-index: 999;
    top: 30%;
  }
  #nav.panelactive ul li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 20px;
  }
  #nav.panelactive ul li::after {
    position: absolute;
    content: "";
    width: 25px;
    height: 1px;
    background: #fff;
    top: 50%;
    left: 0;
  }
  #nav.panelactive #nav-list {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .open-btn span.active {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }
  .open-btn {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 65px;
    height: 75px;
    background: #000;
    display: inline-block;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .open-btn span {
    display: inline-block;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    position: absolute;
    right: 16px;
    height: 1px;
    background: #fff;
    display: inline-block;
    transition: all 0.4s;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .open-btn span:nth-of-type(1) {
    width: 30px;
    top: 25px;
  }
  .open-btn span:nth-of-type(2) {
    width: 20px;
    top: 35px;
  }
  .open-btn span:nth-of-type(2)::after {
    content: "Menu";
    position: absolute;
    top: 4px;
    right: -5px;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
  }
  .open-btn.active span {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }
  .open-btn.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
    width: 28px;
    top: 20px;
  }
  .open-btn.active span:nth-of-type(2) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
    width: 28px;
    top: 40px;
  }
  .open-btn.active span:nth-of-type(2)::after {
    content: "Close";
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
    top: 11px;
    left: 14px;
  }
}
#page-top {
  position: fixed;
  right: calc(50% - 530px);
  bottom: 10px;
  z-index: 999;
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}
#page-top a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50px;
  height: 50px;
  background-image: url("/cmn/img/top-btn.png");
  background-size: cover;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media screen and (max-width: 1080px) {
  #page-top {
    right: 10px;
  }
}
.mv {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}
.mv .h-logo {
  position: absolute;
  top: 30%;
  left: 5%;
  z-index: 9999;
}
.mv .main-mv {
  background-image: url("/img/mv-pc.jpg");
  background-size: cover;
  background-position: 0 60%;
  height: 800px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

@media screen and (max-width: 768px) {
  .mv .main-mv {
    background-image: url("/img/mv-sp.jpg");
    height: 400px;
    background-position: 70% 20%;
  }
  .mv .h-logo {
    position: fixed;
    top: 10px;
  }
}
#message {
  background-image: url("/img/message-bg.jpg");
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  position: relative;
}
#message::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(50%, rgba(255, 255, 255, 0)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#message .message-text {
  font-family: "Yuji Syuku", serif;
  padding: 100px 0;
  position: relative;
  font-size: 2.8rem;
  line-height: 4rem;
  letter-spacing: 0.1em;
}
#message .message-text .show {
  font-size: 5rem;
  color: #487c38;
  padding: 0 3px;
}

@media screen and (max-width: 768px) {
  #message .message-text {
    font-size: 2rem;
    line-height: 3rem;
    padding: 50px 0;
  }
  #message .message-text .show {
    font-size: 3.2rem;
  }
}
#aboutus {
  position: relative;
}
#aboutus .about-img {
  position: relative;
  background-image: url("/img/about.jpg");
  background-size: cover;
  background-position: 20% 20%;
  height: 550px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
#aboutus .about-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#aboutus .sec-content {
  left: 40%;
}

@media screen and (max-width: 768px) {
  #aboutus .sec-content {
    left: 0;
  }
}
#business {
  padding: 160px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}
#business .business-guide {
  text-align: left;
  width: 50%;
}
#business .business-menu {
  display: grid;
  row-gap: 20px;
  width: 50%;
}

.business-landscaping, .business-exterior, .business-maintain {
  background-image: url("/img/high-place.jpg");
  background-size: cover;
  background-position: 20% 20%;
  padding-top: 25%;
  margin: 0 auto;
  position: relative;
}
.business-landscaping::before, .business-exterior::before, .business-maintain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(40, 40, 40, 0.6);
  outline: 1px solid #fff;
  outline-offset: -8px;
}

.business-maintain {
  background-image: url("/img/maintain.jpg");
}

.business-exterior {
  background-image: url("/img/exterior.jpg");
}

.business-kind {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.4rem;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  #business {
    display: block;
    padding: 100px 0;
  }
  #business .top-title {
    text-align: center;
    margin: 0 auto 20px;
  }
  #business .business-guide {
    width: 100%;
  }
  #business .business-guide .business_description {
    margin-bottom: 20px;
  }
  #business .business-menu {
    width: 100%;
    margin-top: 30px;
  }
  #business .business-landscaping::before, #business .business-maintain::before, #business .business-exterior::before {
    outline-offset: -5px;
  }
  .business-kind {
    font-size: 2rem;
  }
}
#example {
  position: relative;
}
#example .about-img {
  position: relative;
  background-image: url("/img/example01.jpg");
  background-size: cover;
  background-position: 20% 20%;
  height: 550px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
#example .about-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#example .sec-content {
  right: 40%;
}

@media screen and (max-width: 768px) {
  #example .sec-content {
    right: 0;
  }
}
#flow {
  padding: 160px 0;
}
#flow .flow-order {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
#flow .flow-order .flow-img {
  position: relative;
  z-index: 999;
  width: 100px;
}
#flow .flow-order p {
  position: relative;
  text-align: center;
  font-size: 2rem;
  margin-top: 5px;
  z-index: 999;
}

@media screen and (max-width: 768px) {
  #flow {
    padding: 100px 0;
  }
}
@media screen and (max-width: 480px) {
  #flow .flow-order .flow-img {
    width: 80px;
  }
  #flow .flow-order p {
    font-size: 1.6rem;
  }
}
#inquiry {
  position: relative;
  background-image: url("/cmn/img/flow.jpg");
  background-size: cover;
  background-position: center center;
  padding: 120px 30px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#inquiry::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(40, 40, 40, 0.6);
}

.inquiry-content {
  position: relative;
  z-index: 999;
  background: rgba(72, 124, 56, 0.9);
  padding: 30px 20px;
  border: 1px solid #fff;
  margin: 0 auto;
  max-width: 900px;
  color: #fff;
}

.inquiry-text {
  border-bottom: 1px solid #fff;
  padding-bottom: 40px;
  width: 80%;
  margin: 0 auto;
}
.inquiry-text h3 {
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  line-height: 4.6rem;
}
.inquiry-text h3 span {
  color: #6c2c2f;
  font-size: 3.4rem;
  font-weight: 900;
}
.inquiry-text p {
  font-size: 2.4rem;
}

.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 80px;
     -moz-column-gap: 80px;
          column-gap: 80px;
}
.contact h4 {
  font-size: 2rem;
}
.contact a {
  color: #fff;
}

.tell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 25px;
}
.tell img {
  width: 40px;
  padding-right: 10px;
}
.tell .tell-number a {
  font-size: 2.5rem;
}

.mail {
  background: #6c2c2f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 300px;
  height: 40px;
  margin-top: 15px;
  padding: 10px 0;
}
.mail img {
  width: 40px;
  padding-right: 10px;
}
.mail .mail-form {
  font-size: 2.2rem;
}

@media screen and (max-width: 768px) {
  #inquiry {
    padding: 100px 15px;
  }
  .inquiry-text {
    line-height: 3rem;
    width: 90%;
  }
  .inquiry-text h3 {
    font-size: 2rem;
  }
  .inquiry-text h3 span {
    font-size: 2.8rem;
  }
  .inquiry-text p {
    font-size: 2rem;
  }
  .contact {
    display: grid;
    row-gap: 40px;
  }
  .tell {
    padding-top: 10px;
  }
  .tell img {
    width: 30px;
  }
  .mail {
    width: 280px;
  }
  .mail img {
    width: 30px;
  }
  .mail .mail-form {
    font-size: 2rem;
  }
}
@media screen and (max-width: 480px) {
  .inquiry-text {
    width: 100%;
  }
}
.top-img {
  position: relative;
  background-size: cover;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-top: 55%;
}
.top-img::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.top-heading {
  position: absolute;
  top: 20%;
  right: 15%;
  color: #fff;
  font-size: 4rem;
  letter-spacing: 0.3rem;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
}
.top-heading::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  background: #fff;
  margin: auto;
  height: 80px;
  inset: calc(100% + 14px) 0 auto 0;
}

@media screen and (max-width: 768px) {
  .top-img {
    padding-top: 70%;
  }
  .top-heading {
    font-size: 2.8rem;
    top: 25%;
  }
  .top-heading::before {
    height: 50px;
  }
}
@media screen and (max-width: 480px) {
  .top-heading {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
  }
}
.sec-content {
  position: absolute;
  max-width: 700px;
  width: 60%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  top: 50%;
  color: #fff;
  text-align: left;
}
.sec-content .sub-title::before {
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .sec-content {
    width: 100%;
    left: 0;
    top: 70%;
  }
}
#breadcrumb {
  content: "";
  background-color: rgba(255, 255, 255, 0.7);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 10px 50px;
  display: block;
}
#breadcrumb ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.4rem;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#breadcrumb ul li {
  position: relative;
}
#breadcrumb .breadcrumb-next::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  position: absolute;
  left: -28px;
  top: 9px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#breadcrumb .breadcrumb-next {
  margin-left: 45px;
}

@media screen and (max-width: 768px) {
  #breadcrumb {
    padding: 10px 15px;
  }
}
.work-top {
  background-image: url("/work/img/work.jpg");
  background-position: 20% 40%;
}

#work {
  padding: 120px 0;
}
#work .work-wrap {
  position: relative;
  margin-bottom: 100px;
}
#work .work-wrap:nth-of-type(2)::before {
  content: "";
  position: absolute;
  background: rgba(121, 106, 58, 0.15);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  height: 450px;
  top: 50px;
  left: 0;
}
#work .work-wrap:nth-of-type(2) .work-img {
  right: 0;
  left: auto;
}
#work .work-wrap:nth-of-type(2) .work-title {
  left: 0;
}
#work .work-wrap:nth-of-type(2) .work-text {
  margin-left: 40%;
}
#work .work-title {
  position: absolute;
  top: 20%;
  right: 0;
  background-color: rgba(108, 44, 47, 0.8);
  width: 250px;
  height: 300px;
  color: #fff;
  font-size: 2.4rem;
  padding-top: 40px;
  letter-spacing: 0.3rem;
}
#work .work-content {
  padding-top: 350px;
}
#work .work-img {
  width: 85%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  position: absolute;
  left: 0;
  top: 0;
}
#work .work-text {
  width: 60%;
  text-align: left;
}

@media screen and (max-width: 768px) {
  #work {
    padding: 80px 0 0;
  }
  #work .work-wrap:nth-of-type(2) .work-img {
    margin-right: calc(50% - 50vw);
  }
  #work .work-wrap:nth-of-type(2) .work-title {
    margin-left: calc(50% - 50vw);
  }
  #work .work-wrap:nth-of-type(2) .work-text {
    margin-left: 0;
  }
  #work .work-title {
    width: 200px;
    height: 200px;
    font-size: 2rem;
    margin-right: calc(50% - 50vw);
  }
  #work .work-img {
    margin-left: calc(50% - 50vw);
  }
  #work .work-text {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  #work .work-title {
    width: 180px;
    height: 150px;
    font-size: 1.8rem;
  }
  #work .work-img {
    width: 100%;
    height: auto;
  }
  #work .work-text {
    width: 100%;
  }
  #work .work-content {
    padding-top: 310px;
  }
}
#work02 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
}
#work02::before {
  position: absolute;
  content: "";
  background: rgba(121, 106, 58, 0.15);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  height: 700px;
  top: 80px;
  left: 0;
}
#work02 .work02-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: 150px;
  width: 90%;
  row-gap: 30px;
}
#work02 .item {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  z-index: 999;
}
#work02 .item-title {
  font-size: 2.4rem;
  border-bottom: 1px solid #fff;
  width: 50px;
  margin: 0 auto;
  padding-bottom: 20px;
}
#work02 .description {
  margin-top: 20px;
  line-height: 28px;
}

.technology, .cleaning {
  position: relative;
  background-image: url("/work/img/pruning.jpg");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 280px;
  padding: 60px 0;
}
.technology::after, .cleaning::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(40, 40, 40, 0.6);
}

.cleaning {
  background-image: url("/work/img/cleaning.jpg");
}

@media screen and (max-width: 768px) {
  #work02 {
    display: block;
  }
  #work02::before {
    top: -50px;
  }
  #work02 .work02-content {
    margin-top: 50px;
    width: 100%;
  }
  .technology,
  .cleaning {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .technology,
  .cleaning {
    height: 180px;
  }
}
#construction {
  padding: 120px 0;
}
#construction ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}
#construction .description {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}

.maintain, .plant, .example, .weeding, .herbicide, .disinfection, .special, .high-place {
  position: relative;
  background-image: url("/work/img/maintain.jpg");
  background-size: cover;
  background-position: 0 30%;
  background-repeat: no-repeat;
  width: 260px;
  height: 180px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
}
.maintain p, .plant p, .example p, .weeding p, .herbicide p, .disinfection p, .special p, .high-place p {
  background: #487c38;
  color: #fff;
  padding: 3px 0;
}

.high-place {
  background-image: url("/work/img/high-place.jpg");
}

.special {
  background-image: url("/work/img/special.jpg");
}

.disinfection {
  background-image: url("/work/img/disinfection.jpg");
}

.herbicide {
  background-image: url("/work/img/herbicide.jpg");
}

.weeding {
  background-image: url("/work/img/weeding.jpg");
}

.example {
  background-image: url("/work/img/example.jpg");
}

.plant {
  background-image: url("/work/img/plant.jpg");
}

.text-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
}

@media screen and (max-width: 768px) {
  #construction {
    padding: 80px 0;
  }
}
.example-top {
  background-image: url("/example/img/example.jpg");
  background-position: 20% 40%;
}

#construction-example {
  padding: 120px 0;
}
#construction-example .description {
  padding-bottom: 80px;
}
#construction-example .list-description {
  padding: 20px 0;
}
#construction-example .guest {
  position: relative;
}
#construction-example .guest::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  display: inline-block;
  width: 60px;
  height: 1px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #333;
}
#construction-example .example-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#construction-example .example-list li {
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  display: grid;
  margin-bottom: 20px;
}
#construction-example .example-list li img {
  width: 350px;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
#construction-example .example-list li:hover {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
#construction-example .example-list li:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
#construction-example .works {
  padding-top: 40px;
}

.zoom {
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #construction-example {
    padding: 80px 0;
  }
}
.flow-top {
  background-image: url("/flow/img/example.jpg");
  background-position: 20% 80%;
}

#step {
  margin: 120px 0;
  position: relative;
}
#step::after {
  content: "";
  display: block;
  background-color: #2f5c3f;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 15%;
}
#step .step-wrap {
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #333;
  padding: 30px 50px;
  margin-bottom: 60px;
  position: relative;
  z-index: 999;
  max-width: 1000px;
}
#step .step-wrap .number {
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: -20px;
  left: -15px;
}
#step .step-wrap .step-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
#step .step-wrap .step-heading {
  width: 30%;
}
#step .step-wrap .icon {
  width: 140px;
  height: 140px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 20px;
}
#step .step-wrap .step-text {
  text-align: left;
  margin-left: 30px;
  width: 70%;
}
#step .step-wrap .description {
  text-align: left;
}

@media screen and (max-width: 768px) {
  #step {
    margin: 80px 0;
  }
  #step::after {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  #step .step-wrap {
    padding: 30px;
  }
  #step .step-wrap .step-content {
    display: block;
    text-align: center;
  }
  #step .step-wrap .number {
    width: 60px;
    height: 60px;
  }
  #step .step-wrap .icon {
    width: 120px;
    height: 120px;
  }
  #step .step-wrap .step-heading {
    width: 100%;
  }
  #step .step-wrap .step-text {
    margin-left: 0;
    margin-top: 20px;
    width: 100%;
  }
}
.aftercare .title {
  padding: 15px 30px;
  position: relative;
  display: inline-block;
  font-size: 2.2rem;
}
.aftercare .title::before, .aftercare .title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: #6c2c2f;
}
.aftercare .title::before {
  left: 10px;
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
}
.aftercare .title::after {
  right: 10px;
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
}
.aftercare .title .show {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.aftercare .title .show::before, .aftercare .title .show::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 50%;
  background: #6c2c2f;
}
.aftercare .title .show::before {
  left: 0;
  -webkit-transform: rotate(-42deg);
          transform: rotate(-42deg);
}
.aftercare .title .show::after {
  right: 0;
  -webkit-transform: rotate(42deg);
          transform: rotate(42deg);
}

@media screen and (max-width: 768px) {
  .aftercare .title {
    padding: 15px;
  }
  .aftercare .title::before {
    left: -5px;
  }
  .aftercare .title::after {
    right: -5px;
  }
  .aftercare .title .show::before {
    left: -15px;
  }
  .aftercare .title .show::after {
    right: -15px;
  }
}
@media screen and (max-width: 480px) {
  .aftercare .title {
    font-size: 1.8rem;
    line-height: 26px;
    padding: 15px 0;
  }
  .aftercare .title::before, .aftercare .title::after {
    display: none;
  }
  .aftercare .title .show::before, .aftercare .title .show::after {
    display: none;
  }
}
#case {
  padding: 120px 0;
}
#case .case-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
  margin-bottom: 40px;
}
#case .case-content {
  width: 50%;
}
#case .case-title {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
#case .case-title::before, #case .case-title::after {
  content: "";
  display: block;
  position: absolute;
}
#case .case-title::before {
  bottom: -5px;
  left: 1px;
  width: 8px;
  height: 14px;
  border-left: 2px solid #333;
  border-right: 2px solid #333;
  -webkit-transform: skewX(-35deg);
          transform: skewX(-35deg);
}
#case .case-title::after {
  left: 10px;
  bottom: 0;
  width: calc(100% - 10px);
  height: 1px;
  background: #333;
}

@media screen and (max-width: 768px) {
  #case {
    padding: 80px 0;
  }
  #case .case-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #case .case-content {
    width: 100%;
    margin-bottom: 30px;
  }
}
.recruit-top {
  background-image: url("/recruit/img/recruit.jpg");
  background-position: 20% 40%;
}

#recruit {
  padding: 120px 0;
}
#recruit .recruit-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 80px;
  position: relative;
}
#recruit .recruit-img img {
  width: 50%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}
#recruit .recruit-img::before {
  position: absolute;
  content: "";
  background: rgba(121, 106, 58, 0.15);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  height: 400px;
  top: -50px;
}
#recruit .message {
  position: relative;
}
#recruit .message .message-img {
  position: absolute;
  width: 105%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 10%;
  opacity: 0.6;
}
#recruit .item {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  #recruit {
    padding: 80px 0;
  }
  #recruit .recruit-img {
    display: block;
  }
  #recruit .recruit-img img {
    width: 100%;
  }
  #recruit .recruit-img::before {
    height: 680px;
    top: -40px;
  }
}
@media screen and (max-width: 480px) {
  #recruit .message .message-img {
    top: 0;
  }
}
.contact-top {
  background-image: url("/contact/img/contact.jpg");
  background-position: 20% 40%;
}

#contact {
  padding: 120px 0;
}
#contact .title {
  margin-bottom: 30px;
}
#contact .box-wrap {
  margin-bottom: 40px;
}
#contact .privacy-check a {
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#contact .privacy-check a:hover {
  opacity: 0.6;
}
#contact .form-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}
#contact img {
  width: 40%;
  -o-object-fit: cover;
     object-fit: cover;
}
#contact .description {
  padding: 30px 0;
}
#contact .description .error {
  color: #8b0000;
}

@media screen and (max-width: 768px) {
  #contact {
    padding: 80px 0;
  }
  #contact img {
    width: 60%;
  }
}
@media screen and (max-width: 480px) {
  #contact .item-heading {
    font-size: 2.4rem;
  }
  #contact .form-wrap {
    display: grid;
  }
}
.item {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 50px;
}
.item .label-required {
  color: #8b0000;
  font-size: 1.2rem;
  line-height: 1;
  display: block;
}
.item tr {
  border-bottom: 1px solid #ccc;
}
.item th {
  width: 30%;
  padding: 20px;
  font-size: 1.8rem;
}
.item td {
  padding: 20px;
  vertical-align: middle;
}
.item td,
.item th {
  text-align: left;
}
.item input,
.item textarea {
  width: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  font-family: "Noto Serif JP", serif;
  opacity: 0.8;
}
.item input[type=radio] {
  width: auto;
  vertical-align: baseline;
  margin: 0 0 0 15px;
}
.item input[type=radio]:first-of-type {
  margin: 0;
}
.item textarea {
  height: 300px;
}

@media screen and (max-width: 768px) {
  .item tr:last-of-type {
    border-bottom: none;
  }
  .item th {
    padding: 20px 10px 0;
  }
  .item td {
    padding: 10px 10px 20px;
  }
  .item td,
  .item th {
    display: block;
    width: auto;
    border: none;
  }
}
@media screen and (max-width: 480px) {
  .item th {
    font-size: 1.6rem;
  }
  label {
    font-size: 1.4rem;
  }
}
.company-top {
  background-image: url("/company/img/company.jpg");
  background-position: 20% 60%;
}

#company {
  padding: 120px 0;
}
#company .message {
  text-align: center;
}
#company .marker-animation {
  font-size: 2.6rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
}
#company .company-img {
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
#company .title {
  margin: 80px 0 40px;
}

@media screen and (max-width: 768px) {
  #company {
    padding: 80px 0;
  }
}
@media screen and (max-width: 480px) {
  #company .marker-animation {
    font-size: 2rem;
  }
}
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
  text-align: center;
  color: #fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#splash-logo img {
  width: 800px;
}

.privacy-top {
  background-image: url("/privacy/img/privacy.jpg");
  background-position: 20% 40%;
}
.privacy-top .top-heading {
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 60%;
  width: 100%;
}

#privacy {
  padding: 120px 0;
  text-align: left;
}
#privacy .privacy-manu {
  background: #fafafa;
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 20px;
}
#privacy .privacy-manu li {
  position: relative;
  padding-left: 30px;
}
#privacy .privacy-manu li::before {
  color: #6c2c2f;
  content: "・";
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
}
#privacy .title {
  padding-top: 30px;
  color: #6c2c2f;
  font-size: 2.4rem;
}
#privacy p {
  padding: 15px 0;
}

@media screen and (max-width: 768px) {
  .privacy-top .top-heading {
    left: 50%;
  }
  #privacy {
    padding: 80px 0;
  }
}
@media screen and (max-width: 480px) {
  #privacy .title {
    font-size: 2rem;
  }
  #privacy p {
    padding: 10px 0;
  }
}
#error {
  padding: 120px 0;
}

@media screen and (max-width: 768px) {
  #error {
    padding: 80px 0;
  }
}
.error-messeage {
  color: #ff0000;
}/*# sourceMappingURL=style.css.map */