@charset "UTF-8";
/*============================================================
common
==============================================================*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #30653c;
  font-family: "Zen Maru Gothic", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1rem;
  color: #333333;
  letter-spacing: 0.05rem;
  animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: auto;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
a:hover {
  opacity: 0.5;
}
a:link, a:visited, a:active {
  color: #333333;
}

.inner {
  width: 100%;
  margin: auto;
  padding: 0 20px;
}

.sec {
  padding: 40px 0;
}

.flex-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.head-ttl {
  font-family: "Zen Maru Gothic", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(24px, 24px + 4 * (100vw - 375px) / 185, 28px);
  color: #333333;
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(20px, 20px + 20 * (100vw - 375px) / 185, 40px);
}
.head-ttl .en {
  display: block;
  font-size: clamp(12px, 12px + 4 * (100vw - 375px) / 185, 16px);
  letter-spacing: 0.05rem;
  color: #368B50;
}

.head-ttl-white {
  color: #fff;
}
.head-ttl-white .en {
  color: #fff;
}

.line-up, .line-under {
  background-color: #F2F1E8;
}
.line-up img, .line-under img {
  width: 100%;
}

.line-up {
  margin-bottom: 40px;
}

/* container */
.container {
  background: url(../img/bg.jpg) no-repeat center/cover;
  background-attachment: fixed;
}

.main-wrap {
  position: relative;
  background-color: #F2F1E8;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  z-index: 10;
}

/* side */
.side {
  display: none;
}

@media (min-width: 1120px) {
  .side {
    display: inherit;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
  }
  .side-logo {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 140px;
  }
  .side-menu {
    position: absolute;
    left: 30px;
    top: 160px;
    width: 25%;
  }
  .side-menu li {
    font-weight: 700;
    font-size: 1rem;
    margin: 24px 0;
  }
  .side-menu li a:link, .side-menu li a:visited, .side-menu li a:active {
    color: #fff;
  }
}
/* header */
header {
  background: #F2F1E8;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
}

.header-logo img {
  width: clamp(60px, 60px + 30 * (100vw - 375px) / 185, 90px);
}

#navi {
  position: fixed;
  z-index: -1;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #F2F1E8;
  transition: all 0.3s;
}
#navi ul {
  display: none;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#navi li {
  list-style: none;
  text-align: center;
}
#navi li a {
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}
#navi li .btn {
  width: 280px;
  padding: 12px 20px 12px 20px;
  margin-top: 10px;
}
#navi li .btn::after {
  right: 20px;
  margin-top: -13px;
}

#navi.panelactive {
  opacity: 1;
  z-index: 999;
}

#navi.panelactive ul {
  display: block;
}

.openbtn {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: calc(50% - 280px); /* 560px の半分 = 280px */
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: #F2F1E8;
  border-radius: 0 0 0 6px;
}
.openbtn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 10px;
  height: 2px;
  border-radius: 2px;
  background-color: #368B50;
  width: 60%;
}
.openbtn span:nth-of-type(1) {
  top: 12px;
}
.openbtn span:nth-of-type(2) {
  top: 20px;
}
.openbtn p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-size: 0.625rem;
  color: #368B50;
}

.openbtn.active span:nth-of-type(1) {
  top: 10px;
  left: 15px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}

.openbtn.active span:nth-of-type(2) {
  top: 22px;
  left: 15px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

/* 560px以下のとき */
@media (max-width: 560px) {
  .openbtn {
    right: 0;
  }
}
/* 1120px以上のとき */
@media (min-width: 1120px) {
  #navi {
    display: none;
  }
  .openbtn {
    display: none;
  }
}
/*　kv　*/
#kv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 4% 15%;
}

.kv-ill {
  position: relative;
  width: 100%;
}

.kv-brid {
  position: absolute;
  top: 0;
  left: 10%;
  animation: fly 5s ease-in-out infinite;
}
.kv-brid img {
  width: clamp(82px, 82px + 42 * (100vw - 375px) / 185, 124px);
}
@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, 0px) rotate(6deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.kv-cloud {
  position: absolute;
  top: 0;
  right: 15%;
  animation: float 6s ease-in-out infinite;
}
.kv-cloud img {
  width: clamp(55px, 55px + 18 * (100vw - 375px) / 185, 73px);
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(8px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
.kv-ttl {
  writing-mode: vertical-rl;
  font-size: clamp(12px, 12px + 4 * (100vw - 375px) / 185, 16px);
  margin-top: -100px;
  opacity: 0;
  transform: translateY(-30px);
  animation: dropIn 1s ease-out forwards;
}
.kv-ttl span {
  background-color: #fff;
  padding: 6px;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.kv-txt {
  font-size: clamp(16px, 16px + 4 * (100vw - 375px) / 185, 20px);
  text-align: center;
  line-height: 2.4;
  margin-top: 20px;
}

.kv-house {
  position: absolute;
  right: 5%;
  top: clamp(-67px, -32px - 35 * (100vw - 375px) / 185, -32px);
}
.kv-house img {
  width: clamp(104px, 104px + 96 * (100vw - 375px) / 185, 200px);
}

.kv-slideshow {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 0.907; /* 高さが無ければこれを追加 */
  overflow: hidden;
}

.kv-slideshow img {
  width: 100%;
  height: auto;
  display: block;
}

.kv-slideshow figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: slideShow 15s infinite;
  opacity: 0;
}

.kv-slideshow figure:nth-child(1) {
  animation-delay: 0s;
}

.kv-slideshow figure:nth-child(2) {
  animation-delay: 3s;
}

.kv-slideshow figure:nth-child(3) {
  animation-delay: 6s;
}

.kv-slideshow figure:nth-child(4) {
  animation-delay: 9s;
}

.kv-slideshow figure:nth-child(5) {
  animation-delay: 12s;
}

@keyframes slideShow {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* greeting */
#greeting {
  position: relative;
  background-color: #368B50;
  color: #fff;
}
#greeting figure {
  background: linear-gradient(to bottom, transparent 50%, #F2F1E8 50%);
}

.greeting-txt {
  max-width: clamp(285px, 285px + 115 * (100vw - 375px) / 185, 400px);
  font-size: clamp(13px, 13px + 3 * (100vw - 375px) / 185, 16px);
  margin: auto;
}

.comment {
  line-height: 2;
}

.signature {
  text-align: right;
  margin-top: 20px;
}
.signature .job {
  display: block;
  font-size: clamp(10px, 10px + 6 * (100vw - 375px) / 185, 16px);
}
.signature .name {
  display: block;
  font-size: clamp(18px, 18px + 6 * (100vw - 375px) / 185, 24px);
}

/* sevices */
#sevices ul {
  max-width: clamp(320px, 320px + 30 * (100vw - 375px) / 185, 350px);
  margin: 0 auto;
}
#sevices li {
  display: flex;
  justify-content: left;
  align-items: center;
  margin: clamp(3px, 3px + 7 * (100vw - 375px) / 185, 10px) 0;
}
#sevices li figure {
  margin-right: clamp(10px, 10px + 6 * (100vw - 375px) / 185, 16px);
}
#sevices li p {
  font-size: clamp(16px, 16px + 2 * (100vw - 375px) / 185, 18px);
}

/* works */
#works {
  background-color: #368B50;
  color: #fff;
}
#works .line-up {
  transform: scaleX(-1);
}

.works-wrap {
  margin-bottom: 30px;
}
.works-wrap h3 {
  text-align: center;
  font-size: clamp(14px, 14px + 4 * (100vw - 375px) / 185, 18px);
  margin-top: 10px;
}

.works-item {
  padding: 0 20px;
}
.works-item .before, .works-item .after {
  position: relative;
  min-width: clamp(300px, 300px + 130 * (100vw - 375px) / 185, 430px);
}
.works-item .before {
  margin-bottom: 15px;
}
.works-item h4 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F2F1E8;
  color: #91A832;
  padding: 0 16px 1px;
  border-radius: 10px 0 10px 0;
}

.icon-arr {
  position: relative;
  min-width: clamp(30px, 30px + 10 * (100vw - 375px) / 185, 40px);
  margin: 0 10px 0 -8px;
}

/* ===== Works slider (vanilla) ===== */
.works-slider {
  position: relative;
  overflow: hidden;
  padding: 0 0 30px;
}

.works-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* 既存の .works-wrap を「スライド」にする */
.works-wrap {
  flex: 0 0 80%;
}

/* 矢印ボタンの見た目 */
.works-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.works-prev {
  left: 8px;
}

.works-next {
  right: 8px;
}

.works-nav[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* アイコン画像のサイズ */
.works-nav img {
  width: 18px;
  height: auto;
  display: block;
}

/* 左矢印は水平反転 */
.works-prev img {
  transform: scaleX(-1);
}

/* お好み：ホバー時に少し明るく */
.works-nav:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* ドット */
.works-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.works-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.works-dots button[aria-selected=true] {
  background: #fff;
}

/* company */
.company-img {
  position: relative;
  margin-bottom: 10%;
}
.company-img .photo {
  width: clamp(186px, 186px + 74 * (100vw - 375px) / 185, 260px);
  margin: 0 auto;
}
.company-img .tree {
  position: absolute;
  top: 0;
  right: 0;
}
.company-img .tree img {
  width: clamp(130px, 130px + 50 * (100vw - 375px) / 185, 180px);
}
.company-img .flower {
  position: absolute;
  bottom: -18px;
  left: 10%;
  animation: sway 4s ease-in-out infinite;
}
.company-img .flower img {
  width: clamp(68px, 68px + 40 * (100vw - 375px) / 185, 108px);
}

@keyframes sway {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.company-list {
  max-width: clamp(295px, 295px + 65 * (100vw - 375px) / 185, 360px);
  margin: 0 auto;
}

.company-item {
  display: flex;
  justify-content: normal;
  align-items: normal;
  font-size: clamp(13px, 13px + 3 * (100vw - 375px) / 185, 16px);
  margin: 16px 0;
}
.company-item dt {
  width: clamp(56px, 56px + 14 * (100vw - 375px) / 185, 70px);
  margin-right: 12px;
}

/* footer */
.footer-copy {
  background-color: #368B50;
  color: #fff;
  text-align: center;
  font-size: 0.75rem;
  padding: 20px 0;
}/*# sourceMappingURL=style.css.map */