@charset "UTF-8";

/*
Theme Name: hoc-template01-kn
Theme URI: 
Version: 1.1
Author: OWNDMEDIA.LAB
*/

/* ************************************************************************************************
  common（共通）
************************************************************************************************ */
:root {
  --color-main: 114 166 3;  /*黄緑*/
  --color-sub: 23 79 17; /*深緑*/
  --color-bg: 241 246 229; /*薄い緑*/
  --color-accent: 115 96 73; /*茶*/
  --color-base: 255 255 255; /*白*/
  --color-text: 42 42 42; /*黒*/
  --color-line: 221 221 221; /*グレー*/
  --color-red: 255 0 0; /*赤*/
  --color-blue: 0 0 255; /*青*/
}
html,body {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  letter-spacing: .02em;
  font-weight: 400;
  line-height: 1.8;
  font-family: "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-base));
}
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth body {
  overflow: hidden;
}
h2 {font-size: 3.2rem;}
h3 {font-size: 2.8rem;}
h4 {font-size: 2.5rem;}
h5 {font-size: 2rem;}
p {
  font-size: 1.6rem;
  font-weight: 400;
}
a {
  font-size: 1.6rem;
  text-decoration: none;
}
::selection {
  background-color: rgb(var(--color-accent));
  color: rgb(var(--color-base));
}
#page {
  overflow: hidden;
  width: 100%;
}
.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.br-sp{display: none}

/***** 下層ページ見出し *****/
.page__ttl {
  text-align: center;
  margin-bottom: 8rem;
  position: relative;
  z-index: 1;
}
.page__ttl::before {
  content: "";
  background-color: rgb(var(--color-main));
  border-radius: 50%;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 3rem;
}
.page__ttl span {
  color: rgb(var(--color-sub));
  display: block;
  font-size: 1.6rem;
  margin-bottom: 3rem;
  text-transform: uppercase;
}
.page__txt {
  color: rgb(var(--color-base));
  margin-bottom: 8rem;
  text-align: center;
}

/***** ヘッダー *****/
header {
  height: 90px;
  border-bottom: 1px solid rgb(var(--color-base));
  color: rgb(var(--color-base));
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  transition: .4s;
}
header.hide {
  top: -90px;
}
header.show {
  background-color: rgb(var(--color-main) / .8);
  backdrop-filter: blur(20px);
  border-bottom: none;
  z-index: 9999999999;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}
.header-nav__list,
.header-nav__list--single {
  display: inline-block;
  text-align: center;
  margin: 0 1rem;
  transition: .5s;
}
.header-nav__list:nth-child(8) {
  background-color: rgb(var(--color-sub));
  border-radius: 32px;
  color: rgb(var(--color-base));
}
.header-nav__list:nth-child(8):hover {
  background-color: rgb(var(--color-accent));
}
.header-nav__list:nth-child(8) a {
  width: 180px;
  height: 35px;
  line-height: 35px;
  display: block;
  color: rgb(var(--color-base));
}
.header-nav__list:nth-child(8) a:hover {
  color: rgb(var(--color-base));
}
.header-nav__item,
.header-nav__item--single {
  display: block;
  margin: .5rem 0;
  position: relative;
}
.header-nav__item::after,
.header-nav__item--single::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: rgb(var(--color-sub));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.header-nav__item:hover::after,
.header-nav__item--single:hover::after {
  transform: scaleX(1);
}
.header-nav__list:nth-child(8) .header-nav__item::after {
  content: none;
}
.scroll_down {
  position:absolute;
  bottom: 2%;
  right: 4%;
  z-index: 2;
}
.scroll_down::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background-color: rgb(var(--color-base) / .3);
}
.scroll_down::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background-color: rgb(var(--color-base));
  transform: scaleY(0);
  transform-origin: top;
  animation: scrollLine 2s ease-in-out infinite;
}
.scroll_down p {
  position: absolute;
  left: -8px;
  bottom: 110px;
  color: rgb(var(--color-base));
  font-size: 1rem;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-wrap: nowrap;
}
@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50.1% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

#nav-drawer {
  display: none;
}

/***** 下層ページヘッダー *****/
.header-sub {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 80vh;
  position: relative;
}
.header-sub::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(var(--color-sub) / 0),
    rgb(var(--color-sub) / .3)
  );
  z-index: 1;
}
.header-sub.--news {
  background-image: url("./images/subpage/header_news.jpg");
  background-image: image-set(
    url("./images/subpage/header_news.webp"),
    url("./images/subpage/header_news.jpg")
  );
}
.header-sub.--product {
  background-image: url("./images/subpage/header_product.jpg");
  background-image: image-set(
    url("./images/subpage/header_product.webp"),
    url("./images/subpage/header_product.jpg")
  );
}
.header-sub.--calendar {
  background-image: url("./images/subpage/header_calendar.jpg");
  background-image: image-set(
    url("./images/subpage/header_calendar.webp"),
    url("./images/subpage/header_calendar.jpg")
  );
}
.header-sub.--recruit {
  background-image: url("./images/subpage/header_recruit.jpg");
  background-image: image-set(
    url("./images/subpage/header_recruit.webp"),
    url("./images/subpage/header_recruit.jpg")
  );
}
.header-sub.--company {
  background-image: url("./images/subpage/header_company.jpg");
  background-image: image-set(
    url("./images/subpage/header_company.webp"),
    url("./images/subpage/header_company.jpg")
  );
}
.header-sub.--order {
  background-image: url("./images/subpage/header_order.jpg");
  background-image: image-set(
    url("./images/subpage/header_order.webp"),
    url("./images/subpage/header_order.jpg")
  );
}
.header-sub.--contact {
  background-image: url("./images/subpage/header_contact.jpg");
  background-image: image-set(
    url("./images/subpage/header_contact.webp"),
    url("./images/subpage/header_contact.jpg")
  );
}
.header-sub.--404 {
  background-image: url("./images/subpage/header_404.jpg");
  background-image: image-set(
    url("./images/subpage/header_404.webp"),
    url("./images/subpage/header_404.jpg")
  );
}
.header-sub__item {
  text-align: center;
  position: absolute;
  width: 70%;
  height: 100px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 2;
}
.header-sub__ttl {
  color: rgb(var(--color-base));
  font-size: 4rem;
  font-weight: 600;
}
.header-sub__txt {
  color: rgb(var(--color-base));
  text-transform: uppercase;
  letter-spacing: .3rem;
}

/***** パンくずリスト *****/
.breadcrumb {
  padding: 3rem 0 1.5rem;
  font-size: 1.6rem;
}
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}
.breadcrumb li::after {
  content: "/";
  margin-left: 2rem;
}
.breadcrumb li:last-child::after {
  display: none;
}
.breadcrumb a {
  color: rgb(var(--color-text) / .5);
  font-size: 1.6rem;
  text-decoration: none;
  position: relative;
}
.breadcrumb a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: rgb(var(--color-text) / .5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.breadcrumb a:hover::after {
  transform: scaleX(1);
}

/***** フッターのアクセス *****/
.access {
  position: relative;
  padding: 8rem 0 3rem;
  background-image: url("./images/common/footer_bg.jpg");
  background-image: image-set(
    url("./images/common/footer_bg.webp"),
    url("./images/common/footer_bg.jpg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.access::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--color-sub) / .7),
    rgb(var(--color-sub) / .7)
  );
}
.access__container {
  max-width: 1280px;
  width: 100%;
  background-color: rgb(var(--color-base));
  border-radius: 5px;
  margin: 0 auto;
  padding: 12rem 6rem;
}
.access__contents {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.access__ttl {
  color: rgb(var(--color-accent));
  font-size: 2.4rem;
  margin-bottom: 2rem;
}
.access__ttl::before {
  content: "";
  background-color: rgb(var(--color-main));
  border-radius: 5px;
  width: 40px;
  height: 1px;
  display: block;
  margin-bottom: 2rem;
}
.access__txt {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.access__tel {
  font-size: 2.4rem;
  text-align: left;
}

/***** フッター *****/
footer {
  text-align: center;
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}
.footer__sns {
  margin-bottom: 4rem;
}
.footer__icon {
  margin: 0 .7rem;
}
small {
  color: rgb(var(--color-base));
  font-size: 1.4rem;
}

/***** ページトップに戻るボタン *****/
#page_top-btn {
  width: 60px;
  height: 60px;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  background-color: rgb(var(--color-sub));
  border-radius: 50%;
  opacity: 0;
  transform: translateY(80px);
  transition: 0.4s;
  pointer-events: none;
  z-index: 999999999;
}
#page_top-btn.show {
  opacity: .9;
  transform: translateY(0);
  pointer-events: auto;
}
#page_top-btn:hover {
  background-color: rgb(var(--color-accent) / .8);
}
#page_top-btn a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
}
#page_top-btn a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f176';
  font-size: 2.4rem;
  color: rgb(var(--color-base));
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  display: grid;
  align-content: center;
}

/***** フッターバー（スマホ時のみ） *****/
#footer_bar-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 999999999;
}
#footer_bar-btn.show {
  transform: translateY(0);
}
#footer_bar-btn div {
  width: calc(100% / 2);
  text-align: center;
  color: rgb(var(--color-base));
}
#footer_bar-btn div a {
  display: block;
  padding: 1.25rem 0;
  opacity: .9;
}
#footer_bar-btn div:nth-child(1) a {
  background-color: rgb(var(--color-main));
}
#footer_bar-btn div:nth-child(2) a {
  background-color: rgb(var(--color-sub));
}

#footer_bar-btn {
  display: none;
}

/***** フォーム（ご注文・お問い合わせ） *****/
.wpcf7 { width: 100%; padding: 0;}
.wpcf7 form { margin: 0; position: relative;}
.wpcf7 input, .wpcf7 textarea { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1.5rem; background-color: rgb(var(--color-base)); margin: 1.5rem auto;}
.wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { width: auto; max-width: 97%; padding: 1.5rem; background-color: rgb(var(--color-base)); margin: 1.5rem auto;}
.wpcf7 select, .wpcf7 .wpcf7-list-item-label { line-height: 1.5;}
.wpcf7 .wpcf7-list-item { display: block; text-align: center; margin: 0;}
.wpcf7 textarea { height: 300px; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border: 1px solid rgb(var(--color-sub)); outline: none;}
.wpcf7 .wpcf7-submit { -webkit-transition: all .3s; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; width: 270px; height: 65px; border: none !important; border-radius: 32px; outline: none; background-color: rgb(var(--color-sub)); color: rgb(var(--color-base)); font-size: 1.6rem; text-align: center; text-decoration: none; cursor: pointer; transition: all .3s;}
.wpcf7 .wpcf7-submit:before, .wpcf7 .wpcf7-submit:after { -webkit-box-sizing: border-box; box-sizing: border-box;}
.wpcf7 .wpcf7-submit:hover { background-color: rgb(var(--color-accent));}
.wpcf7 .wpcf7-submit .wpcf7-not-valid { background-color: pink;}
.wpcf7 .wpcf7-submit .wpcf7-response-output { -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: 1rem 0 0; padding: .8rem 3.5rem .8rem 1.4rem; border-radius: 4px;}
.wpcf7 .wpcf7-submit .wpcf7-validation-errors { border: 1px solid #EED3D7; background-color: #F2DEDE; color: #B94A48;}
.wpcf7 .wpcf7-submit .wpcf7-mail-sent-ok { border: 1px solid #BCE8F1; background-color: #D9EDF7; color: #3A87AD;}
input.wpcf7-form-control.wpcf7-number.wpcf7-validates-as-required.wpcf7-validates-as-number.smallform {width: 11%;}
.wpcf7 input[type=checkbox]{margin: .5rem auto 1rem;}
.wpcf7-spinner {display: none;}
div#autozip {display: none !important;}
.wpcf7-not-valid-tip {position: relative;}
.wpcf7-not-valid-tip::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: rgb(var(--color-base));
  border-radius: 50%;
  margin-right: 1rem;
  margin-bottom: .25rem;
  display: inline-block;
  vertical-align: middle;
}
.wpcf7 form .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  background-color: rgb(var(--color-base));
  border-radius: 5px;
  font-size: 1.4rem !important;
  padding: 1rem !important;
  position: absolute;
  bottom: 1.5%;
  left: 0;
  width: 100%;
}


/* ************************************************************************************************
  front-page.php（トップページ）
************************************************************************************************ */
/***** 余白 *****/
.header-main, .main, .news, .product, .schedule, .col2 {
  padding: 20rem 0;
}
.access {
  padding: 15rem 0 6.25rem;
}

/***** メインビジュアル *****/
.header-main {
  width: 100%;
  height: 100vh;
  position: relative;
}
.header-main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgb(var(--color-sub) / 0), rgb(var(--color-sub) / .3));
  z-index: 1;
  pointer-events: none;
}
.header-main__item {
  position: absolute;
  left: 10%;
  bottom: 10%;
  z-index: 2;
}
.header-main__item p {
  color: rgb(var(--color-base));
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS Mincho", serif;
  font-size: 5rem;
  font-weight: 600;
}
.swiper-slide div {
  width: 100%;
  height: 100%;
}
.slide-bg01 {
  background: url("./images/index/mv_img1.jpg") no-repeat 50% 50% / cover;
  background-image: image-set(
    url("./images/index/mv_img1.webp") type("image/webp"),
    url("./images/index/mv_img1.jpg") type("image/jpeg")
  );
}
.slide-bg02 {
  background: url("./images/index/mv_img2.jpg") no-repeat 50% 50% / cover;
  background-image: image-set(
    url("./images/index/mv_img2.webp") type("image/webp"),
    url("./images/index/mv_img2.jpg") type("image/jpeg")
  );
}
.slide-bg03 {
  background: url("./images/index/mv_img3.jpg") no-repeat 50% 50% / cover;
  background-image: image-set(
    url("./images/index/mv_img3.webp") type("image/webp"),
    url("./images/index/mv_img3.jpg") type("image/jpeg")
  );
}

/***** コンセプト *****/
.main__contents1,
.main__contents2,
.main__contents3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.main__contents1,
.main__contents2 {
  margin-bottom: 10rem;
}
.main .main__contents1 .main__icon img {
  width: 150px;
  height: 100%;
  position: absolute;
  right: 0;
  top: -25%;
  opacity: .3;
  object-fit: contain;
  pointer-events: none;
}
.main .main__contents2 .main__icon img {
  width: 125px;
  height: 100%;
  position: absolute;
  left: 0;
  top: -25%;
  opacity: .3;
  object-fit: contain;
  pointer-events: none;
}
.main .main__contents3 .main__icon img {
  width: 150px;
  height: 100%;
  position: absolute;
  right: 0;
  top: -25%;
  opacity: .3;
  object-fit: contain;
  pointer-events: none;
}
.main__img {
  z-index: 1;
}
.main__img img {
  width: 100%;
  height: 100%;
  max-width: 575px;
  border-radius: 5px;
}
.main__item {
  width: 46%;
}
.main__ttl {
  color: rgb(var(--color-accent));
  text-align: center;
}
.main__ttl::after {
  content: "";
  background-color: rgb(var(--color-main));
  border-radius: 50%;
  display: block;
  width: 1px;
  height: 20px;
  text-align: center;
  margin: 1rem auto;
}

/***** お知らせ *****/
.news {
  background-color: rgb(var(--color-main) / .2);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  position: relative;
}
.news__img img {
  width: 225px;
  height: 100%;
  position: absolute;
  left: 5%;
  top: -15%;
  opacity: .3;
  object-fit: contain;
}
.news__img2 img {
  width: 185px;
  height: 100%;
  position: absolute;
  right: 5%;
  bottom: -15%;
  opacity: .3;
  object-fit: contain;
}
.news__contents {
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}
.news__item a {
  display: block;
  transition: .3s all;
}
.news__item a:hover .news__txt {
  background-color: rgb(var(--color-base) / .7);
  transition: .3s all;
}
.news__date {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(var(--color-accent));
}
.news__ttl {
  font-size: 1.6rem;
}
.news__txt {
  background-color: rgb(var(--color-base));
  border-radius: 5px;
  padding: 2rem;
  text-align: left;
  margin-bottom: 1rem;
  transition: .3s all;
}

/***** 生産物紹介 *****/
.product {
  position: relative;
  background: linear-gradient(
    135deg,
    rgb(var(--color-accent)) 0%,
    rgb(var(--color-accent) / .9)
  );
  overflow: hidden;
}
.product .page__ttl,
.product .page__ttl span {
  color: rgb(var(--color-base));
}
.product-list ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 3rem;
}
.product-list ul li {
  width: calc(100% / 3 - 2rem);
  margin-bottom: 5%;
}
.product-list ul li:nth-child(2),
.product-list ul li:nth-child(5) {
  margin-top: 10%;
}
.product-list ul li a {
  display: block;
}
.product-item {
  position: relative;
}
.product-item div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.product-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.product-list ul li a:hover .product-item img {
  transform: scale(1.05);
  border-radius: 5px;
  opacity: 1;
}
.product-item h3 {
  background: linear-gradient(
    to right,
    rgb(var(--color-main) / 1),
    rgb(var(--color-base) / 0)
  );
  font-size: 2rem;
  position: absolute;
  top: 5%;
  left: 0;
  padding: 1rem 2rem;
  color: rgb(var(--color-base));
}
.product-item p {
  color: rgb(var(--color-base));
  width: 90%;
  text-align: left;
  margin: 1.5rem auto 0;
}
.product__img-btn {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.product__img-btn a {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  color: rgb(var(--color-base));
  font-size: 2.8rem;
  width: calc(100% / 2 - 1rem);
  height: 225px;
  display: grid;
  justify-items: center;
  align-items: center;
  z-index: 1;
  transition: transform .3s;
}
.product__img-btn a:hover {
  border-radius: 5px;
  transform: translateY(-6px);
}
.product__img-btn a::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: transform .6s ease;
  z-index: -2;
}
.product__img-btn a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(var(--color-main) / 1),
    rgb(var(--color-base) / 0)
  );
  border-radius: 5px;
  transition: opacity .4s ease;
  z-index: -1;
}
.product__img-btn a:hover::before {
  transform: scale(1.05);
}
.product__img-btn a:hover::after {
  opacity: .4;
}
.product__img-btn a.--list::before {
  background: url("./images/index/product_banner1.jpg") no-repeat 50% 50% / cover;
  background-image: image-set(
    url("./images/index/product_banner1.webp") type("image/webp"),
    url("./images/index/product_banner1.jpg") type("image/jpeg")
  );
}
.product__img-btn a.--order::before {
  background: url("./images/index/product_banner2.jpg") no-repeat 50% 50% / cover;
  background-image: image-set(
    url("./images/index/product_banner2.webp") type("image/webp"),
    url("./images/index/product_banner2.jpg") type("image/jpeg")
  );
}

/***** 年間収穫スケジュール *****/
.schedule {
  position: relative;
  background-image: url("./images/index/schedule_bg.jpg");
  background-image: image-set(
    url("./images/index/schedule_bg.webp"),
    url("./images/index/schedule_bg.jpg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.schedule::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--color-sub) / .7),
    rgb(var(--color-sub) / .7)
  );
  z-index: 0;
}
.schedule .page__ttl,
.schedule .page__ttl span {
  color: rgb(var(--color-base));
}
.schedule__box p {
  color: rgb(var(--color-base));
  margin-bottom: 5rem;
  text-align: center;
}
.schedule .index__ttl,
.schedule .index__ttl span {
  color: rgb(var(--color-base));
}

/***** 採用情報と会社概要 *****/
.col2__box {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
.col2__box ul {
  width: 100%;
  height: 100%;
}
.col2__box li {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rem;
}
.col2__box li:nth-child(even) {
  flex-direction: row-reverse;
}
.col2__box li:last-child {
  margin-bottom: 0;
}
.col2__box li:nth-child(odd) .col2__img img {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.col2__box li:nth-child(even) .col2__img img {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.col2__img {
  width: 70%;
  height: 695px;
}
.col2__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.col2__txt {
  background-color: rgb(var(--color-base));
  padding: 5rem;
  max-width: 825px;
  width: 100%;
  text-align: center;
}
.col2__box li:nth-child(odd) .col2__txt {
  margin-left: -5%;
}
.col2__box li:nth-child(even) .col2__txt {
  margin-right: -5%;
  z-index: 1;
}
.col2__txt p {
  margin-bottom: 5rem;
}

/***** お問い合わせ *****/
.contact-us {
  background-color: rgb(var(--color-main) / .1);
}
.contact-us__box {
  height: 70vh;
  position: relative;
}
.contact-us__box--inner {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.contact-us__container--txt {
  width: 50%;
  margin: auto;
  text-align: center;
  z-index: 2;
}
.contact-us__container--txt-area {
  margin: 40px auto;
}
.contact-us__container--txt-area p {
  margin-bottom: 5rem;
}
.contact-us__container--gallery {
  width: 50%;
  overflow: hidden;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}
.contact-us__container--gallery-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  border-radius: 20px;
}
.contact-us__container--gallery-item img {
  width: 100%;
}
.vertical-down {
  animation: slideUp 50s linear infinite;
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}


/* ************************************************************************************************
  index.php&category&single.php（お知らせ）
************************************************************************************************ */
/***** アーカイブ（お知らせ一覧）ページ *****/
.news02 {
  margin: 20rem 0;
}
.news02 .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news02__thumbnail {
  overflow: hidden;
  border-radius: 5px;
}
.news02__thumbnail img {
  width: 100%;
  height: 325px;
  object-fit: cover;
  border-radius: 5px;
}
.news02__post:hover .news02__thumbnail img {
  transform: scale(1.05);
  border-radius: 5px;
  opacity: 1;
}
.news02__post {
  display: block;
  width: calc(100% / 3 - 1rem);
  text-align: center;
  margin-bottom: 3rem;
}
.news02__contents {
  padding: 2rem;
}
.news02__blog_info {
  text-align: right;
  font-size: 1.2rem;
}
.news02__ttl {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.news02__cal {
  color: rgb(var(--color-accent));
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.nav-below {
  max-width: 1280px;
  margin: 5rem auto 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.page-numbers {
  border-radius: 50%;
  font-size: 1.6rem;
  width: 50px;
  height: 50px;
  display: grid;
  align-items: center;
  justify-items: center;
}
.page-numbers.current {
  background-color: rgb(var(--color-main));
  color: rgb(var(--color-base));
  transform: scale(1.1);
}
a.page-numbers {
  background-color: rgb(var(--color-sub));
  color: rgb(var(--color-base));
  transition: .3s all;
}
a.page-numbers:hover {
  background-color: rgb(var(--color-accent));
  color: rgb(var(--color-base)) !important;
  transition: .3s all;
}

/***** シングル（お知らせ詳細）ページ *****/
.single02 {
  margin: 20rem 0;
}
.single .header-sub__item {
  padding-top: 6rem;
}
.single02__thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.single02__contents {
  width: 90%;
  margin: 3rem auto 6rem;
}
.single02__cal {
  color: rgb(var(--color-accent));
  font-size: 1.4rem;
  font-weight: 600;
  text-align: right;
  margin-bottom: 2rem;
}
.single02__cat {
  margin-bottom: 2rem;
}
.single02__txt p {
  font-size: 1.6rem;
}
.post-navigation {
  max-width: 1280px;
  width: 100%;
  margin: 5rem auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.post-navigation__prev,
.post-navigation__next {
  width: 45%;
}
.post-navigation__prev {
  text-align: left;
}
.post-navigation__next {
  text-align: right;
}
.post-navigation a {
  display: block;
  padding: 20px;
  background-color: rgb(var(--color-sub) / .1);
  border: 1px solid rgb(var(--color-sub));
  text-decoration: none;
  transition: .3s;
}
.post-navigation a:hover {
  background-color: rgb(var(--color-base));
  opacity: .9;
}
.post-navigation span {
  font-size: 1.4rem;
  color: rgb(var(--color-sub));
}
.post-navigation p {
  margin-top: 5px;
}


/* ************************************************************************************************
  page-product.php（生産物紹介）
************************************************************************************************ */
.product__feature {
  margin: 20rem 0;
}
.product__feature__list ul li {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 10rem;
}
.product__feature__list ul li:nth-child(even) {
  flex-direction: row;
}
.product__feature__list ul li .--img {
  width: calc(150% / 2);
}
.product__feature__list ul li .--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.product__feature__list ul li .--flex {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
.product__feature__list ul li:nth-child(even) .--flex {
  flex-direction: row-reverse;
}
.product__feature__list ul li .--wrap {
  width: calc(150% / 2);
  position: relative;
}
.product__feature__list ul li:nth-child(odd) .--wrap {
  margin-left: 6rem;
}
.product__feature__list ul li:nth-child(even) .--wrap {
  margin-right: 6rem;
}
.product__feature__list ul li .--en p {
  writing-mode: vertical-lr;
}
.product__feature__list ul li .--en span {
  color: rgb(var(--color-main));
  text-transform: uppercase;
  writing-mode: vertical-lr;
}
.product__feature__list ul li .--en span::after {
  content: "";
  background-color: rgb(var(--color-main));
  display: inline-block;
  width: 1px;
  height: 200px;
  margin-top: 1rem;
}
.product__feature__list ul li .--num {
  color: rgb(var(--color-main));
  font-size: 2rem;
}
.product__feature__list ul li .--num p {
  font-size: 5rem;
  font-weight: 600;
  line-height: 1.6;
}
.product__feature__list ul li .--txt h3 {
  color: rgb(var(--color-accent));
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.product__feature__list ul li .--txt h3 span {
  display: inline-block;
  font-size: 1.4rem;
  padding: 0rem 1.5rem;
}
.product__feature__list ul li .--txt p {
  font-size: 1.6rem;
}
.product__feature__list ul li .--txt p span {
  background-color: rgb(var(--color-main));
  border-radius: 32px;
  margin-right: 1rem;
  color: rgb(var(--color-base));
  font-size: 1.4rem;
  padding: .2rem 1.5rem;
}
.product__bg {
  background: url("./images/subpage/product_bg.jpg") no-repeat center center / cover;
  background-attachment: fixed;
  background-image: image-set(
    url("./images/subpage/product_bg.webp") type("image/webp"),
    url("./images/subpage/product_bg.jpg") type("image/jpeg")
  );
  width: 100%;
  height: 625px;
}
.product__item {
  background-color: rgb(var(--color-main) / .2);
  padding: 20rem 0;
}
.product__item__list ul.--img {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: 3rem;
}
.product__item__list ul.--img li {
  width: calc(100% / 3 - 2rem);
}
.product__item__list ul.--img li a {
  display: block;
}
.product__item__list ul.--img li a:hover {
  border-radius: 5px;
  opacity: 1;
}
.product__item__list--box {
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.product__item__list--box > div {
  text-align: center;
  overflow: hidden;
}
.product__item__list--box > div img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}
.product__item__list ul.--img li a:hover .product__item__list--box > div img {
  border-radius: 5px;
  opacity: 1;
  transform: scale(1.05);
}
.product__item__list--box h3 {
  background: linear-gradient(
    to right,
    rgb(var(--color-main) / 1),
    rgb(var(--color-base) / 0)
  );
  font-size: 2rem;
  position: absolute;
  top: 5%;
  left: 0;
  padding: 1rem 2rem;
  color: rgb(var(--color-base));
}
.product__item__list ul.--txt {
  border-radius: 10px;
  position: relative;
  transition: .3s;
  margin: 5rem 0;
}
.product__item__list ul.--txt::before {
  content: "";
  width: 1px;
  height: 100%;
  display: inline-block;
  background-color: rgb(var(--color-accent) / .8);
  position: absolute;
  left: 0;
}
.product__item__list ul.--txt li {
  padding: 2.5rem 0 2.5rem 5rem;
}
.product__item__list ul.--txt li:last-child {
  margin-bottom: 0;
}
.product__item__list ul.--txt li h4 {
  color: rgb(var(--color-sub));
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.product__item__list ul.--txt li p {
  font-size: 1.5rem;
}
.product__item__list--num1,
.product__item__list--num2,
.product__item__list--num3 {
  margin-bottom: 10rem;
}
.product__item__list--num1 > p,
.product__item__list--num2 > p,
.product__item__list--num3 > p,
.product__item__list--num4 > p {
  border-bottom: 1px dashed rgb(var(--color-accent));
  color: rgb(var(--color-accent));
  font-size: 2.8rem;
  font-weight: 600;
  padding-bottom: .5rem;
  margin-bottom: 3rem;
}
.product__item__list--num1 > p::before,
.product__item__list--num2 > p::before,
.product__item__list--num3 > p::before,
.product__item__list--num4 > p::before {
  content: "";
  background-color: rgb(var(--color-base));
  border-radius: 50%;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 1.5rem;
  margin-bottom: .25rem;
}
.product__item__box {
  background-color: rgb(var(--color-base));
  text-align: center;
  padding: 5rem;
  margin-top: 10rem;
}
.product__item__box h4 {
  margin-bottom: 1rem;
  position: relative;
}
.product__item__box h4::after {
  content: "";
  display: inline-block;
  background-color: rgb(var(--color-accent));
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
}
.product__item__box h4 span {
  background-color: rgb(var(--color-base));
  display: inline-block;
  padding: .5rem 4rem;
  position: relative;
  z-index: 1;
}
.product__item__box p {
  margin-bottom: 3rem;
}


/* ************************************************************************************************
  page-calendar.php（年間収穫スケジュール）
************************************************************************************************ */
.calendar {
  margin: 20rem 0;
}
.calendar__image {
  margin: 0 auto 10rem;
  text-align: center;
}
.calendar__image img {
  width: 80%;
  height: 495px;
  border-radius: 5px;
  object-fit: cover;
}
.calendar__list > p {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}
.calendar__list > p::before {
  content: "";
  background-color: rgb(var(--color-main));
  border-radius: 50%;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 1.5rem;
  margin-bottom: .25rem;
}
.calendar__list.--spring,
.calendar__list.--summer,
.calendar__list.--autumn,
.calendar__list.--winter {
  margin-bottom: 10rem;
}
.calendar__list--inner {
  overflow-x: auto;
}
.calendar__list--inner table {
  min-width: 780px;
  width: 100%;
  border-collapse: collapse;
}
.calendar__list--inner table th,
.calendar__list--inner table td {
  border: 1px solid rgb(var(--color-accent));
  padding: 1rem .5rem;
  font-size: 1.6rem;
}
.calendar__list--inner table th {
  text-align: center;
  background-color: rgb(var(--color-accent) / .1);
  position: sticky;
  top: 0;
}
.calendar__list--inner table th.--name {
  width: 20%;
  background-color: rgb(var(--color-base));
}
.calendar__list--inner table th.--name,
.calendar__list--inner table td:first-child {
  position: sticky;
  left: 0;
  background-color: rgb(var(--color-base));
}
.calendar__list--inner table td.--color {
  background-color: rgb(var(--color-main));
}
.calendar__list--inner table td.--color-b {
  background-color: rgb(var(--color-sub));
}

/***** スライダー *****/
.swiper-container {
  margin-bottom: 20rem;
  padding-bottom: 5rem !important;
  position: relative;
}
.swiper-button-next, .swiper-button-prev {
  display: none !important;
}
.swiper-pagination-bullet-active {
  background-color: rgb(var(--color-sub)) !important;
}
.swiper-slide img {
  width: 100%;
  max-width: 100%;
  height: 495px;
  object-fit: cover;
  border-radius: 5px;
}

/***** スクロールヒント *****/
.scroll-hint,
.scroll-hint-icon-wrap {
  position: relative;
  z-index: 99999999 !important;
}


/* ************************************************************************************************
  page-recruit.php（採用情報）
************************************************************************************************ */
.recruit__message {
  margin: 20rem 0;
}
.recruit__message--txt p {
  font-size: 1.8rem;
  margin-bottom: 5rem;
  text-align: center;
}
.recruit__message--img {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: center;
}
.recruit__message--img div {
  position: relative;
}
.recruit__message--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.recruit__message--img .g1 {
  aspect-ratio:1/1;
}
.recruit__message--img .g2 {
  aspect-ratio:4/3;
}
.recruit__message--img .g3 {
  aspect-ratio:3/2;
  grid-column: 2;
  justify-self: end;
  transform: translateX(-50%) !important;
}
.recruit__description {
  background-color: rgb(var(--color-main) / .2);
  padding: 20rem 0;
}
.recruit__description--table table {
  width: 100%;
  height: 100%;
  margin-bottom: 5rem;
}
.recruit__description--table table th,
.recruit__description--table table td {
  border-bottom: 1px solid rgb(var(--color-accent));
  font-size: 1.6rem;
  padding: 2rem 1rem;
}
.recruit__description--table table th {
  width: 30%;
  color: rgb(var(--color-accent));
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}
.recruit__description--table table td {
  width: 70%;
}
.recruit__description--table table td ul li::before {
  content: "";
  background-color: rgb(var(--color-main));
  border-radius: 50%;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 1.5rem;
  margin-bottom: .5rem;
  vertical-align: middle;
}
.recruit__description--table table td ol li::before {
  content: "";
  background-color: rgb(var(--color-sub));
  width: 30px;
  height: 1px;
  display: inline-block;
  margin-bottom: .25rem;
  margin-right: 1.5rem;
  vertical-align: middle;
}
.recruit__description--table table td div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}
.recruit__description--table table td div a {
  display: block;
  width: 185px;
  height: 35px;
  line-height: 35px;
  display: block;
  text-align: center;
  background-color: rgb(var(--color-sub));
  border-radius: 32px;
  color: rgb(var(--color-base));
  font-size: 1.2rem;
  transition: .4s all;
}
.recruit__description--table table td div a:hover {
  background-color: rgb(var(--color-accent));
  transition: .4s all;
}
.recruit__description--board {
  background-color: rgb(var(--color-base));
  padding: 5rem;
}
.recruit__description--board h3 {
  color: rgb(var(--color-accent));
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgb(var(--color-accent));
}
.recruit__description--board p {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.recruit__description--board .--wrap p {
  font-size: 1.4rem;
}
.recruit__description--board .--wrap p span {
  background-color: rgb(var(--color-main));
  border-radius: 32px;
  color: rgb(var(--color-base));
  display: inline-block;
  font-weight: 600;
  margin-right: 1.5rem;
  padding: 0 2rem;
  vertical-align: middle;
}


/* ************************************************************************************************
  page-company.php（会社概要）
************************************************************************************************ */
.company__message {
  margin: 20rem 0;
}
.company__message__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.company__message--img,
.company__message--txt {
  width: calc(100% / 2 - 4rem);
}
.company__message--img img {
  width: 100%;
  height: 725px;
  object-fit: cover;
  border-radius: 5px;
}
.company__message--txt p {
  font-size: 1.6rem;
  margin-bottom: 3rem;
}
.company__message--txt p:nth-child(1) span {
  display: block;
  margin-bottom: 1rem;
}
.company__message--txt p:nth-child(2),
.company__message--txt p:nth-child(3) {
  text-align: right;
  margin-bottom: 0;
}
.company__message--txt p:nth-child(3) span {
  font-size: 2.4rem;
  margin-left: 1rem;
}
.company__outline,
.company__history {
  padding: 20rem 0;
}
.company__outline--table table,
.company__history--table table {
  width: 100%;
  height: 100%;
}
.company__outline--table table th,
.company__outline--table table td,
.company__history--table table th,
.company__history--table table td {
  border-bottom: 1px solid rgb(var(--color-accent));
  font-size: 1.6rem;
  padding: 2rem 1rem;
}
.company__outline--table table th,
.company__history--table table th {
  width: 30%;
  color: rgb(var(--color-accent));
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}
.company__outline--table table td,
.company__history--table table td {
  width: 70%;
}
.company__history .page__txt {
  color: rgb(var(--color-text));
}
.company__bg {
  width: 100%;
  height: 625px;
  object-fit: cover;
}
.company__bg.--outline {
  background: url("./images/subpage/company_bg1.jpg") no-repeat center center / cover;
  background-attachment: fixed;
  background-image: image-set(
    url("./images/subpage/company_bg1.webp") type("image/webp"),
    url("./images/subpage/company_bg1.jpg") type("image/jpeg")
  );
}
.company__bg.--history {
  background: url("./images/subpage/company_bg2.jpg") no-repeat center center / cover;
  background-attachment: fixed;
  background-image: image-set(
    url("./images/subpage/company_bg2.webp") type("image/webp"),
    url("./images/subpage/company_bg2.jpg") type("image/jpeg")
  );
}


/* ************************************************************************************************
  page-order.php（ご注文）
************************************************************************************************ */
.order {
  margin-top: 20rem;
}
.order__form__stop {
  margin: 10rem 0;  
}
.order__form__stop p {
  color: rgb(var(--color-red));
  font-size: 2.4rem;
  text-align: center;
  padding: 2rem 0;
  border: 1px solid rgb(var(--color-red));
}
.order__form__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-bottom: 10rem;
  gap: 5rem;
}
.order__form__menu a {
  background-color: rgb(var(--color-sub));
  border-radius: 32px;
  color: rgb(var(--color-base));
  display: block;
  padding: 1.5rem 6rem;
  transition: .4s all;
}
.order__form__menu a:hover {
  background-color: rgb(var(--color-accent));
}
.order__form__menu a .arrow-down {
  padding-left: 1.5rem;
  display: inline-block;
}
.order__form__menu a:hover .arrow-down {
  animation: arrowBounce 0.8s infinite;
}
@keyframes arrowBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}
.order__form__process {
  background-color: rgb(var(--color-main) / .1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 20rem 3%;
}
.order__form__process--txt {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.order__form__process--txt ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}
.order__form__process--txt ul li {
  padding: 5rem 2.5rem;
  border-radius: 10px;
  box-shadow: 0 1px 6px 3px rgb(var(--color-text) / .05) inset;
  text-align: center;
  position: relative;
  transition: .3s;
}
.order__form__process--txt ul li h3 {
  color: rgb(var(--color-accent));
  font-size: 2rem;
  margin-bottom: 1rem;
}
.order__form__process--txt ul li h3 span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(var(--color-main));
  color: rgb(var(--color-base));
  font-size: 2rem;
  font-weight: 600;
}
.order__form__process--txt ul li p {
  font-size: 1.4rem;
  line-height: 1.8;
}
.order__form__box {
  background-color: rgb(var(--color-line) / .1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 20rem 3%;
}
.order__form__box--payment,
.order__form__box--postage {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.order__form__box--payment .order__form__box--item {
  margin-bottom: 5rem;
}
.order__form__box--payment .order__form__box--item ul {
  border-bottom: 1px dashed rgb(var(--color-accent));
  border-top: 1px dashed rgb(var(--color-accent));
  padding: 2rem 0;
}
.order__form__box--payment .order__form__box--item ul li {
  margin-bottom: 3rem;
}
.order__form__box--payment .order__form__box--item ul li:last-child {
  margin-bottom: 0;
}
.order__form__box--payment .order__form__box--item ul li p:nth-child(1) {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.order__form__box--payment .order__form__box--item ul li p:nth-child(1)::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: rgb(var(--color-sub));
  border-radius: 50%;
  display: inline-block;
  margin-bottom: .25rem;
  margin-right: 1.5rem;
  vertical-align: middle;
}
.order__form__box--payment .order__form__box--item ul li p:nth-child(2) {
  font-size: 1.6rem;
  margin-bottom: .5rem;
}
.order__form__box--postage .order__form__box--item p {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.order__form__box--postage .order__form__box--item div a {
  display: block;
  width: 295px;
}
.order__form__mail {
  background-color: rgb(var(--color-main) / .1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 20rem 3%;
}
.order__form__mail--wrap,
.order__form__mail--details {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.order__form__mail--wrap {
  margin-bottom: 5rem;
}
.order__form__mail--wrap > p,
.order__form__mail--details > p {
  font-size: 2.4rem;
  margin-bottom: 5rem;
  text-align: center;
  position: relative;
}
.order__form__mail--wrap > p::after,
.order__form__mail--details > p::after {
  content: "";
  display: inline-block;
  background-color: rgb(var(--color-accent));
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
}
.order__form__mail--wrap > p span,
.order__form__mail--details > p span {
  background-color: rgb(var(--color-bg));
  display: inline-block;
  padding: .5rem 4rem;
  position: relative;
  z-index: 1;
}
.order__form__mail--flex {
  display: flex;
  justify-content: flex-start;
  gap: 4.75rem;
}
.order__form__mail--list ul li {
  position: relative;
}
.order__form__mail--list ul li div img {
  border-radius: 5px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.order__form__mail--list ul li h3 {
  background: linear-gradient(to right, rgb(var(--color-main) / 1), rgb(var(--color-base) / 0));
  font-size: 2rem;
  position: absolute;
  top: 5%;
  left: 0;
  padding: 1rem 2rem;
  color: rgb(var(--color-base));
}
.order__form__mail--list ul li:nth-child(2) {
  margin-top: 2rem;
}
.order__form__mail--list ul li:nth-child(2) div {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.order__form__mail--list ul li div p:nth-child(1) {
  background-color: rgb(var(--color-accent));
  border-radius: 5px;
  color: rgb(var(--color-base));
  font-size: 1.4rem;
  padding: .25rem 3rem;
}
.order__form__mail--table table {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.order__form__mail--table table th,
.order__form__mail--table table td {
  border-bottom: 1px solid rgb(var(--color-base));
  box-sizing: border-box;
  font-size: 1.6rem;
  vertical-align: middle;
  padding: 2rem 0;
}
.order__form__mail--table table th {
  font-weight: 600;
  width: 30%;
  text-align: right;
}
.order__form__mail--table table th .required {
  background-color: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-red));
  border-radius: 3px;
  color: rgb(var(--color-red));
  display: inline-block;
  font-size: 1.4rem;
  padding: 0 1rem;
  margin: 0 2rem;
}
.order__form__mail--table table th .optional {
  background-color: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-blue));
  border-radius: 3px;
  color: rgb(var(--color-blue));
  display: inline-block;
  font-size: 1.4rem;
  padding: 0 1rem;
  margin: 0 2rem;
}
.order__form__mail--table table td {
  width: 70%;
}
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-ruby"],
.wpcf7 input[name="your-address"],
.wpcf7 input[name="your-tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100% !important;
  box-sizing: border-box;
}
.order__form__mail--policy {
  width: 100%;
  height: 100%;
}
.order__form__mail--box {
  background-color: rgb(var(--color-base));
  padding: 3rem;
  max-height: 325px;
  overflow: auto;
}
.order__form__mail--box h3 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgb(var(--color-accent));
}
.order__form__mail--box h4 {
  font-size: 1.8rem;
  margin-bottom: .5rem;
}
.order__form__mail--box p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
.order__form__mail--accept {
  font-size: 1.6rem;
  margin: 5rem auto 2.5rem;
}


/* ************************************************************************************************
  page-contact.php（お問い合わせ）
************************************************************************************************ */
.contact {
  margin-top: 20rem;
}
.contact__form--inner > p {
  font-size: 1.8rem;
  margin-bottom: 8rem;
}
.contact__form__mail {
  background-color: rgb(var(--color-main) / .1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 20rem 3%;
}
.contact__form__mail--details {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.contact__form__mail--table table {
  width: 100%;
  height: 100%;
}
.contact__form__mail--table table th,
.contact__form__mail--table table td {
  border-bottom: 1px solid rgb(var(--color-base));
  font-size: 1.6rem;
  vertical-align: middle;
  padding: 2rem 0;
}
.contact__form__mail--table table th {
  font-weight: 600;
  width: 30%;
  text-align: right;
}
.contact__form__mail--table table th .required {
  background-color: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-red));
  border-radius: 3px;
  color: rgb(var(--color-red));
  display: inline-block;
  font-size: 1.4rem;
  padding: 0 1rem;
  margin: 0 2rem;
}
.contact__form__mail--table table th .optional {
  background-color: rgb(var(--color-base));
  border: 1px solid rgb(var(--color-blue));
  border-radius: 3px;
  color: rgb(var(--color-blue));
  display: inline-block;
  font-size: 1.4rem;
  padding: 0 1rem;
  margin: 0 2rem;
}
.contact__form__mail--table table td {
  width: 70%;
}
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-address"],
.wpcf7 input[name="your-tel"],
.wpcf7 input[neme="your-email"],
.wpcf7 textarea {
  width: 100%;
}
.contact__form__mail--policy {
  width: 100%;
  height: 100%;
}
.contact__form__mail--box {
  background-color: rgb(var(--color-base));
  padding: 3rem;
  max-height: 325px;
  overflow: auto;
}
.contact__form__mail--box h3 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgb(var(--color-accent));
}
.contact__form__mail--box h4 {
  font-size: 1.8rem;
  margin-bottom: .5rem;
}
.contact__form__mail--box p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
.contact__form__mail--accept {
  font-size: 1.6rem;
  margin: 5rem auto 2.5rem;
}
.contact__form__mail--recapcha,
.order__form__mail--recapcha {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}


/* ************************************************************************************************
  404.php（404）
************************************************************************************************ */
.not-found {
  margin: 20rem 0;
}
.not-found p {
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
}
.not-found p a {
  color: rgb(var(--color-text) / .5);
  text-decoration: none;
  position: relative;
  margin: 0 1rem;
}
.not-found p a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: rgb(var(--color-text) / .5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.not-found p a:hover::after {
  transform: scaleX(1);
}