@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("//cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanrp.css");
/*
  *  変数
  */
:root {
  --color-bg: #fffbf1;
  --color-main: #31302f;
  --color-orange: #ee7631;
  --color-red: #b04a2f;
  --color-brown: #7a514a;
  --color-text: #434643;
}

/*
  *  mixin
  */
html,
body {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto !important;
  }
}

html {
  font-size: 62.5%;
}

body {
  position: relative;
  font-family: YakuHanRP, "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin: 0;
  background-color: var(--color-bg);
  font-size: clamp(0rem, 1.21vw, 1.5rem);
}
body * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
body .wrapper {
  overflow: hidden;
}
@media print {
  body .wrapper {
    overflow: visible;
  }
}
@media print {
  body #luxy {
    position: relative !important;
    transform: translate3d(0px, 0px, 0px);
  }
}
body.is-loaded #wrapper {
  opacity: 1;
}
body.is-loaded .loading {
  opacity: 0;
  pointer-events: none;
}

@keyframes rotateYAnime {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.totop {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}
@media print {
  .totop {
    display: none;
  }
}

.loading {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000;
  position: fixed;
  z-index: 90000;
  transition: opacity 1s ease-in-out 1s;
  background-color: #fff;
  flex-direction: column;
  gap: 20px;
  top: 0;
  left: 0;
}
@media print {
  .loading {
    display: none;
  }
}
.loading img {
  backface-visibility: visible;
  max-width: 60%;
}
.loading p {
  font-family: "Bodoni Moda", serif;
  font-size: 5.625em;
  text-align: center;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.1em;
}
.loading .dots {
  width: 50px;
  aspect-ratio: 7;
  --_g: no-repeat radial-gradient(circle closest-side, #31302f 90%, #31302f00);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: 33.3333333333% 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
  33% {
    background-size: 33.3333333333% 0%, 33.3333333333% 100%, 33.3333333333% 100%;
  }
  50% {
    background-size: 33.3333333333% 100%, 33.3333333333% 0%, 33.3333333333% 100%;
  }
  66% {
    background-size: 33.3333333333% 100%, 33.3333333333% 100%, 33.3333333333% 0%;
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

.pc-hidden {
  display: none;
}
@media screen and (max-width: 1000px) {
  .pc-hidden {
    display: block;
  }
}

@media screen and (max-width: 1000px) {
  .sp-hidden {
    display: none;
  }
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}
@media screen and (max-width: 1400px) {
  .container {
    max-width: 1000px;
  }
}

@keyframes linepan {
  0% {
    transform: scaleX(0);
    transform-origin: left top;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left top;
  }
}
a.readmore {
  font-size: 0.75em;
  padding: 10px 100px 10px 0;
  position: relative;
  display: inline-block;
  font-weight: 500;
}
@media screen and (max-width: 650px) {
  a.readmore {
    font-size: 12px;
  }
}
a.readmore:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #999;
  transform-origin: left top;
}
a.readmore:hover:before {
  animation: linepan 0.5s forwards;
}

a.square-button {
  font-size: 0.8125em;
  padding: 10px 50px;
  position: relative;
  display: inline-block;
  text-align: center;
  border: 1px solid #000;
  overflow: hidden;
  transition: 0.5s;
}
@media screen and (max-width: 650px) {
  a.square-button {
    font-size: 12px;
  }
}
a.square-button span {
  position: relative;
  z-index: 2;
}
a.square-button:hover {
  color: white;
}
a.square-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #000;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
a.square-button:hover:before {
  transform-origin: left top;
  transform: scale(1, 1);
}
a.square-button.--pdf {
  display: inline-flex;
  gap: 50px;
  align-items: center;
  padding: 10px 30px;
}
a.square-button.--pdf:after {
  position: relative;
  z-index: 2;
  content: "";
  width: 12px;
  height: 17px;
  background: url(../images/common/ic-pdf.svg) no-repeat center center/contain;
}
a.square-button.--youtube {
  display: inline-flex;
  gap: 50px;
  align-items: center;
  padding: 10px 30px;
}
a.square-button.--youtube:after {
  position: relative;
  z-index: 2;
  content: "";
  width: 17px;
  height: 17px;
  background: url(../images/common/ic-youtube.svg) no-repeat center center/contain;
}

.header-nav-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 20px;
  z-index: 9999;
  justify-content: flex-end;
  transition: 0.5s;
  transform: translateY(-100%);
}
@media print {
  .header-nav-scroll {
    display: none;
  }
}
.header-nav-scroll.scrolled {
  transform: translateY(0%);
}
.header-nav-scroll .title {
  transition: 0.5s;
  display: flex;
  align-items: center;
}
.header-nav-scroll .title a {
  display: flex;
  text-indent: -9999px;
  margin-left: 20px;
  overflow: hidden;
  width: 160px;
  height: 33px;
  background: url(../images/common/logo.svg) no-repeat center center/contain;
}
@media screen and (max-width: 650px) {
  .header-nav-scroll .title a {
    background: url(../images/common/logo-mark.svg) no-repeat center center/contain;
    width: 50px;
  }
}
.header-nav-scroll .hamburger-btn {
  margin: 0;
}

/* header nav on PC */
.header-nav {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  gap: 20px;
  z-index: 10000;
  justify-content: flex-end;
  transition: 0.5s;
}
.header-nav .navs {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
.header-nav .navs .pcnavs {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column-reverse;
  transition: 0.5s;
}
@media screen and (max-width: 1000px) {
  .header-nav .navs .pcnavs {
    display: none;
  }
}
.header-nav .navs .pcnavs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0px;
}
.header-nav .navs .pcnavs ul li a {
  font-size: 0.875em;
}
.header-nav .navs .pcnavs ul.main-nav li a {
  padding: 0 30px 5px;
  border-left: 1px solid #ccc;
  position: relative;
}
.header-nav .navs .pcnavs ul.main-nav li a:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  transition: 0.5s transform;
  transform: scale(0, 1);
  transform-origin: right top;
  pointer-events: none;
  background-color: #007928;
}
.header-nav .navs .pcnavs ul.main-nav li a:hover:after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.header-nav .navs .pcnavs ul.main-nav li:last-child a {
  border-right: 1px solid #ccc;
}
.header-nav .navs .pcnavs ul.sub-nav {
  gap: 15px;
  margin-bottom: 7px;
}
.header-nav .navs .pcnavs ul.sub-nav li a {
  font-size: 0.75em;
  padding: 0px 15px 2px;
  border-radius: 50px;
  transition: 0.5s;
}
.header-nav .navs .pcnavs ul.sub-nav li a.guide {
  background-color: #b2f5ff;
}
.header-nav .navs .pcnavs ul.sub-nav li a.recruit {
  background-color: #e9eaea;
}
.header-nav .navs .pcnavs ul.sub-nav li a.inquiry {
  color: white;
  background-color: #555b5b;
}
.header-nav .navs .pcnavs ul.sub-nav li a:hover {
  color: white;
  background-color: var(--color-brown) !important;
}

/*
  *  hamburger
  */
.hamburger-btn {
  height: 85px;
  width: 85px;
  margin: auto;
  padding-top: 0px;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 650px) {
  .hamburger-btn {
    width: 60px;
    height: 60px;
  }
}
.hamburger-btn .bar {
  height: 4px;
  width: 46px;
  display: block;
  margin: 10px auto;
  background-color: var(--color-main);
  border-radius: 0px;
  transition: 0.4s;
  position: absolute;
  left: 18px;
}
@media screen and (max-width: 650px) {
  .hamburger-btn .bar {
    left: 12px;
    width: 40px;
  }
}
.hamburger-btn .bar:nth-of-type(1) {
  top: 15px;
  transition: top 0.3s ease 1s, transform 0.3s ease-out 0.5s;
}
@media screen and (max-width: 650px) {
  .hamburger-btn .bar:nth-of-type(1) {
    top: 10px;
  }
}
.hamburger-btn .bar:nth-of-type(2) {
  top: 30px;
  transition: top 0.3s ease 1s, opacity 0.3s ease 1s, transform 0.3s ease-out 0.5s;
}
@media screen and (max-width: 650px) {
  .hamburger-btn .bar:nth-of-type(2) {
    top: 20px;
  }
}
.hamburger-btn .bar:nth-of-type(3) {
  top: 45px;
  transition: top 0.3s ease 1s, opacity 0.3s ease 1s, transform 0.3s ease-out 0.5s;
}
@media screen and (max-width: 650px) {
  .hamburger-btn .bar:nth-of-type(3) {
    top: 30px;
  }
}

/*
  *  drawer
  */
#drawer {
  display: block;
  transition: 1s;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: white;
  padding-bottom: 30px;
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
}
#drawer .drawer-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1;
}
#drawer .drawer-body {
  margin-left: auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 375px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: var(--color-bg);
  color: #000;
  font-weight: 500;
  padding: 10vw 50px;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body {
    width: 100%;
    min-width: 0px;
    justify-content: center;
  }
}
#drawer .drawer-body .drawer-logo {
  position: absolute;
  bottom: 3vw;
  left: 3vw;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-logo {
    position: relative;
    bottom: auto;
    left: 0;
    width: 100%;
    text-align: left;
  }
}
#drawer .drawer-body .drawer-logo a {
  display: block;
  line-height: 1;
}
#drawer .drawer-body .drawer-logo img {
  width: 8vw;
  height: auto;
  min-width: 130px;
  margin-left: -20px;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-logo img {
    width: 100px;
    min-width: 0;
  }
}
#drawer .drawer-body .drawer-nav {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
}
#drawer .drawer-body .drawer-nav nav {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 30px;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-nav nav ul li {
    line-height: 2;
  }
}
@media screen and (max-width: 1000px) {
  #drawer .drawer-body .drawer-nav nav ul li a {
    font-size: 18px;
  }
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-nav nav ul li a {
    font-size: 14px;
  }
}
#drawer .drawer-body .drawer-nav nav > ul > li ul {
  margin: 0 0 0.5em 1.5em;
  padding: 0 0 0 1.5em;
}
#drawer .drawer-body .drawer-nav nav > ul > li ul li {
  line-height: 1.8;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-nav nav > ul > li ul li {
    font-size: 1em;
  }
}
#drawer .drawer-body .drawer-nav nav > ul > li ul li a {
  padding: 0;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-nav nav > ul > li ul li a {
    font-size: 12px;
  }
}
#drawer .drawer-body .drawer-nav nav > ul > li ul li a:after {
  transform: scaleX(0);
}
#drawer .drawer-body .drawer-nav nav > ul > li ul li a:hover:after {
  transform: scaleX(1);
}
#drawer .drawer-body .drawer-nav .sns {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-nav .sns {
    gap: 10px;
  }
}
#drawer .drawer-body .drawer-nav .sns li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#drawer .drawer-body .drawer-nav .sns li a {
  display: block;
  line-height: 1;
}
#drawer .drawer-body .drawer-nav .sns li a img {
  width: 40px;
  height: auto;
}
@media screen and (max-width: 650px) {
  #drawer .drawer-body .drawer-nav .sns li a img {
    width: 25px;
    height: 25px;
  }
}

body.drawer-open #drawer {
  z-index: 9998;
  opacity: 1;
  pointer-events: all;
}
body.drawer-open .header-nav {
  transform: translateY(0%);
}
body.drawer-open .header-nav-scroll {
  transform: translateY(0%);
}
body.drawer-open .hamburger-btn .bar:nth-of-type(1) {
  top: 30px;
  transform: rotate(45deg);
  transition: top 0.3s ease 0.5s, transform 0.3s ease-out 1s;
}
@media screen and (max-width: 650px) {
  body.drawer-open .hamburger-btn .bar:nth-of-type(1) {
    top: 20px;
  }
}
body.drawer-open .hamburger-btn .bar:nth-of-type(2) {
  opacity: 0;
}
body.drawer-open .hamburger-btn .bar:nth-of-type(3) {
  top: 30px;
  transform: rotate(-45deg);
  transition: top 0.3s ease 0.5s, transform 0.3s ease-out 1s;
}
@media screen and (max-width: 650px) {
  body.drawer-open .hamburger-btn .bar:nth-of-type(3) {
    top: 20px;
  }
}
body.drawer-open .hamburger-btn.--reverse .bar {
  background-color: #007928 !important;
}

nav {
  position: absolute;
  bottom: 4vw;
  right: 5%;
  z-index: 10;
}
nav > ul {
  margin: 0;
  padding: 0;
}
nav > ul > li {
  line-height: 2.7;
  list-style: none;
}
nav > ul > li a {
  transform: rotate(0.05deg);
  font-size: 1.25em;
  letter-spacing: 0.05em;
}
nav > ul > li > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
nav > ul > li > a::before {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  border: 2px solid var(--color-red);
  border-radius: 1em;
  margin-bottom: 0;
  transition: 0.5s;
}
nav > ul > li > a:hover::before {
  background-color: var(--color-red);
}
nav > ul > li ul {
  margin: 0 0.5em;
  padding: 1.5em 0 0 0;
}
nav > ul > li ul li {
  list-style: disc;
  font-size: 0.8em;
  margin: 0;
  line-height: 1.8;
}
nav > ul > li ul li a {
  font-size: 1.125em;
  letter-spacing: 0;
  position: relative;
  transition: 0.3s;
  padding: 0;
}
nav > ul > li ul li a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.3;
  background-color: var(--color-red);
  transform: scaleY(0);
  transform-origin: top left;
  transition: 0.3s;
}
nav > ul > li ul li a:hover::after {
  transform: scaleY(1);
}

#fv {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
}
#fv #fv-copy {
  text-align: center;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  color: white;
  letter-spacing: 0.2em;
  z-index: 10;
  transition: 0.5s;
  font-size: max(35px, 1.8vw);
}
#fv #fv-copy span {
  opacity: 0;
}
@media screen and (max-width: 1920px) {
  #fv #fv-copy {
    font-size: 35px;
  }
}
@media screen and (max-width: 1400px) {
  #fv #fv-copy {
    font-size: 30px;
  }
}
@media screen and (max-width: 1000px) {
  #fv #fv-copy {
    left: 0;
    top: 7%;
    font-size: 25px;
    transform: translate(0, 0);
    width: 100%;
  }
}
@media screen and (max-width: 650px) {
  #fv #fv-copy {
    font-size: 4.375em;
  }
}
#fv #fv-logo {
  position: absolute;
  bottom: 4vw;
  left: 3vw;
  z-index: 11;
  opacity: 0;
  width: 8.5vw;
  height: auto;
  transition: 0.5s;
  min-width: 163px;
}
@media screen and (max-width: 650px) {
  #fv #fv-logo {
    min-width: 0;
    left: 15px;
    bottom: 30px;
    width: 25%;
    height: auto;
  }
}
#fv #fv-logo a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
}
#fv #fv-logo a img {
  width: 100%;
  height: auto;
}
#fv #fv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(../images/home/fv2.webp) no-repeat center center/cover;
  opacity: 0;
}
#fv nav {
  width: 25vw;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 650px) {
  #fv nav {
    width: 212px;
    right: 30px;
    bottom: 30px;
  }
}
#fv nav ul {
  writing-mode: vertical-lr;
}
@media screen and (max-width: 1000px) {
  #fv nav ul li {
    line-height: 2.2;
  }
}
#fv nav ul li a {
  font-size: 1.5625em;
}
@media screen and (max-width: 1920px) {
  #fv nav ul li a {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 1000px) {
  #fv nav ul li a {
    font-size: 16px;
  }
}
@media screen and (max-width: 650px) {
  #fv nav ul li a {
    font-size: 16px;
  }
}

#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
#canvas canvas {
  display: block;
  margin: 0px auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main {
  padding-left: 50px;
  padding-right: 50px;
}
@media screen and (max-width: 650px) {
  main {
    padding-left: 30px;
    padding-right: 30px;
  }
}
main.page-recipes {
  background: url(../images/pages/recipes/bg-recipes.webp) no-repeat center top;
  background-size: 100% auto;
}
main .page-header {
  padding-top: 6vw;
  padding-bottom: 6vw;
  text-align: center;
  color: #382120;
}
main .page-header .mark img {
  width: 100%;
  max-width: 122px;
  height: auto;
  margin-bottom: -25px;
}
@media screen and (max-width: 1000px) {
  main .page-header .mark img {
    width: 100px;
    margin-bottom: -10px;
  }
}
@media screen and (max-width: 650px) {
  main .page-header .mark img {
    width: 80px;
  }
}
main .page-header .title .ja {
  display: inline-block;
  font-size: 2.9375em;
  font-weight: 600;
  border-bottom: 3px solid #382120;
  margin-bottom: 0.2em;
  letter-spacing: 0.1em;
  padding-bottom: 0.1em;
}
@media screen and (max-width: 650px) {
  main .page-header .title .ja {
    font-size: 5em;
  }
}
main .page-header .title .en {
  font-size: 1.375em;
  font-weight: 600;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 650px) {
  main .page-header .title .en {
    font-size: 2.1875em;
  }
}
main .page-header.--left .title {
  text-align: left;
}
main .page-header.--left .title .ja {
  font-size: 2.5em;
}
@media screen and (max-width: 650px) {
  main .page-header.--left .title .ja {
    font-size: 4.375em;
  }
}
main section {
  margin-bottom: 10vw;
}
main section.mb0 {
  margin-bottom: 0;
}
main .message {
  color: var(--color-brown);
}
main .message img {
  width: 100%;
  height: auto;
}
main .message .animated {
  transition: 0.5s;
}
main .message .ph1 {
  width: 45%;
  float: right;
  margin-left: 2vw;
}
@media screen and (max-width: 1000px) {
  main .message .ph1 {
    width: 40%;
  }
}
main .message .ph2 {
  width: 25%;
  float: left;
  margin-top: 1vw;
  margin-right: 2vw;
  margin-bottom: 2vw;
}
main .message .ph3 {
  width: 25%;
  float: right;
  margin-top: -4em;
  margin-left: 2vw;
}
@media screen and (max-width: 650px) {
  main .message .ph1,
  main .message .ph2,
  main .message .ph3 {
    width: 100%;
    float: none;
    margin: 0;
  }
  main .message .ph2 {
    margin: 5em 0;
  }
  main .message .ph3 {
    margin-bottom: 5em;
  }
}
main .message p {
  font-size: 1.5625em;
  line-height: 2.7;
  margin-top: 0;
  margin-bottom: 2em;
  text-align: justify;
}
@media screen and (max-width: 1400px) {
  main .message p {
    font-size: 1.125em;
  }
}
@media screen and (max-width: 1000px) {
  main .message p {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 650px) {
  main .message p {
    font-size: 2.8125em;
  }
}
main .message p.primary {
  font-size: 2.3125em;
  padding-top: 1em;
  letter-spacing: 0.25em;
}
@media screen and (max-width: 1400px) {
  main .message p.primary {
    font-size: 1.75em;
  }
}
@media screen and (max-width: 1000px) {
  main .message p.primary {
    font-size: 1.875em;
  }
}
@media screen and (max-width: 650px) {
  main .message p.primary {
    font-size: 3.4375em;
  }
}
main ul.feature-list {
  margin: 0 0 3vw;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows: auto auto;
}
@media screen and (max-width: 1000px) {
  main ul.feature-list {
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list {
    display: block;
  }
}
main ul.feature-list li {
  position: relative;
  padding: 30px;
}
@media screen and (max-width: 1000px) {
  main ul.feature-list li {
    padding: 5vw !important;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list li {
    padding: 5vw 0 !important;
  }
}
main ul.feature-list li:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/3;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  background-image: radial-gradient(circle, #434643 2px, transparent 2px);
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 4px 16px;
}
@media screen and (max-width: 1000px) {
  main ul.feature-list li:nth-child(1) {
    grid-column: 1/-1;
    grid-row: 1/2;
    background-image: radial-gradient(circle, #434643 2px, transparent 2px);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 16px 4px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list li:nth-child(1) {
    background: none;
    border-bottom: 3px dotted var(--color-text);
  }
}
main ul.feature-list li:nth-child(1) p {
  margin-bottom: 3em;
}
main ul.feature-list li:nth-child(2) {
  background-image: radial-gradient(circle, #434643 2px, transparent 2px), radial-gradient(circle, #434643 2px, transparent 2px);
  background-position: right top, left bottom;
  background-repeat: repeat-y, repeat-x;
  background-size: 4px 16px, 16px 4px;
  padding-top: 0;
}
@media screen and (max-width: 650px) {
  main ul.feature-list li:nth-child(2) {
    background: none;
    border-bottom: 3px dotted var(--color-text);
  }
}
main ul.feature-list li:nth-child(3) {
  background-image: radial-gradient(circle, #434643 2px, transparent 2px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 16px 4px;
  padding-top: 0;
}
@media screen and (max-width: 650px) {
  main ul.feature-list li:nth-child(3) {
    background: none;
    border-bottom: 3px dotted var(--color-text);
  }
}
main ul.feature-list li:nth-child(4) {
  background-image: radial-gradient(circle, #434643 2px, transparent 2px);
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 4px 16px;
}
@media screen and (max-width: 650px) {
  main ul.feature-list li:nth-child(4) {
    background: none;
    border-bottom: 3px dotted var(--color-text);
  }
}
main ul.feature-list li:nth-child(4), main ul.feature-list li:nth-child(5) {
  padding-bottom: 0;
}
main ul.feature-list li .baloon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, 50%);
  z-index: 10;
  border-radius: 300px;
  background-color: #f7debd;
  color: var(--color-orange);
  font-size: 12px;
  text-align: center;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  main ul.feature-list li .baloon {
    transform: translate(20%, 100%);
    width: 100px;
    height: 100px;
    font-size: 10px;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list li .baloon {
    transform: translate(20%, 20%);
    font-size: 12px;
    width: 120px;
    height: 120px;
  }
}
main ul.feature-list li .mov {
  position: relative;
  right: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  margin-left: auto;
}
main ul.feature-list li .label {
  color: #ee7631;
  padding: 2px 20px 5px;
  border-radius: 50px;
  background-color: #ffeb00;
  display: inline-block;
  margin-bottom: 0.5em;
  font-size: 1.125em;
  font-weight: 700;
}
@media screen and (max-width: 1400px) {
  main ul.feature-list li .label {
    padding: 2px 10px 5px;
    font-size: 0.875em;
  }
}
@media screen and (max-width: 1000px) {
  main ul.feature-list li .label {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list li .label {
    font-size: 2.8125em;
  }
}
main ul.feature-list li h2 {
  font-size: 1.75em;
  letter-spacing: 0.1em;
  color: var(--color-brown);
  line-height: 1.8;
  margin-top: 0;
}
@media screen and (max-width: 1400px) {
  main ul.feature-list li h2 {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 1000px) {
  main ul.feature-list li h2 {
    font-size: 2.8125em;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list li h2 {
    font-size: 4.375em;
  }
}
main ul.feature-list li p {
  line-height: 2;
  text-align: justify;
  color: var(--color-text);
  font-size: 1.125em;
}
@media screen and (max-width: 1400px) {
  main ul.feature-list li p {
    font-size: 0.875em;
  }
}
@media screen and (max-width: 1000px) {
  main ul.feature-list li p {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 650px) {
  main ul.feature-list li p {
    font-size: 2.8125em;
  }
}
main ul.feature-list img {
  width: 100%;
  height: auto;
}
main .btn-daiwa-youtube {
  text-align: center;
}
main .btn-daiwa-youtube img {
  max-width: 100%;
  height: auto;
}
main section#documents {
  background: url(../images/pages/belief/bg-documents.webp) no-repeat center center/cover;
  margin: 0 -50px;
  padding: 5vw;
}
@media screen and (max-width: 1400px) {
  main section#documents {
    padding: 100px 50px;
  }
}
@media screen and (max-width: 650px) {
  main section#documents {
    padding: 50px 30px;
    margin: 0 -30px;
  }
}
main section#documents .row {
  display: flex;
  gap: 5vw;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  main section#documents .row.--outer {
    flex-direction: column;
  }
}
main section#documents .row img.ebook {
  width: 250px;
  height: auto;
  filter: drop-shadow(0px 0px 5px rgb(235, 222, 196));
}
@media screen and (max-width: 650px) {
  main section#documents .row img.ebook {
    width: 150px;
    height: auto;
  }
}
main section#documents .row img.hikaku {
  width: 250px;
  height: 200px;
}
@media screen and (max-width: 650px) {
  main section#documents .row img.hikaku {
    height: 120px;
    width: auto;
  }
}
main section#documents .row img.shiyou {
  width: 150px;
  height: 200px;
}
@media screen and (max-width: 650px) {
  main section#documents .row img.shiyou {
    height: 120px;
    width: auto;
  }
}
main section#documents .row ul {
  list-style: none;
}
@media screen and (max-width: 650px) {
  main section#documents .row ul {
    padding-left: 0;
  }
}
main section#documents .row ul li {
  margin-bottom: 3em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
main section#documents .row ul li:last-child {
  margin-bottom: 0;
}
main section#documents .row ul li.doc:before {
  content: "";
  display: block;
  width: 50px;
  height: 40px;
  background: url(../images/pages/belief/ic-doc.svg) no-repeat center center/contain;
}
@media screen and (max-width: 650px) {
  main section#documents .row ul li.doc:before {
    width: 30px;
    height: 30px;
  }
}
main section#documents .row ul li.pdf:before {
  content: "";
  display: block;
  width: 50px;
  height: 40px;
  background: url(../images/pages/belief/ic-pdf.svg) no-repeat center center/contain;
}
@media screen and (max-width: 650px) {
  main section#documents .row ul li.pdf:before {
    width: 30px;
    height: 30px;
  }
}
main section#documents .row ul li a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  color: var(--color-red);
  line-height: 2;
  position: relative;
  display: inline-block;
  gap: 5px;
  white-space: nowrap;
}
@media screen and (max-width: 650px) {
  main section#documents .row ul li a {
    font-size: 14px;
  }
}
main section#documents .row ul li a:after {
  content: "";
  position: absolute;
  border-top: 1px solid var(--color-red);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
}
main section#documents .row ul li a:hover:after {
  animation: linepan 0.5s forwards;
}
main section.bottom-slide {
  padding: 3vw 0;
}
main section.bottom-slide p {
  margin-top: 0;
}
@media screen and (max-width: 1000px) {
  main section.bottom-slide p {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 650px) {
  main section.bottom-slide p {
    font-size: 2.8125em;
  }
}
main section.bottom-slide .swiper-container {
  position: relative;
}
main section.bottom-slide .swiper-wrapper img {
  width: 100%;
  height: auto;
}
main section.bottom-slide .swiper-button-next,
main section.bottom-slide .swiper-button-prev {
  --swiper-navigation-color: #3d403d;
  --swiper-navigation-sides-offset: -2vw;
}
@media screen and (max-width: 1000px) {
  main section.bottom-slide .swiper-button-next,
  main section.bottom-slide .swiper-button-prev {
    --swiper-navigation-sides-offset: -4vw;
    --swiper-navigation-size: 30px;
  }
}
@media screen and (max-width: 650px) {
  main section.bottom-slide .swiper-button-next,
  main section.bottom-slide .swiper-button-prev {
    --swiper-navigation-size: 24px;
  }
}
main #recipes .recipe-intro h3 {
  font-size: 2.3125em;
  margin-top: 0;
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--color-brown);
}
@media screen and (max-width: 1400px) {
  main #recipes .recipe-intro h3 {
    font-size: 1.75em;
  }
}
@media screen and (max-width: 1000px) {
  main #recipes .recipe-intro h3 {
    font-size: 1.875em;
  }
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-intro h3 {
    font-size: 14px;
    letter-spacing: 0;
  }
}
main #recipes .recipe-intro p {
  font-size: 1.5625em;
  line-height: 2;
  margin-top: 0;
  margin-bottom: 2em;
  text-align: justify;
  color: var(--color-text);
}
@media screen and (max-width: 1400px) {
  main #recipes .recipe-intro p {
    font-size: 1.125em;
  }
}
@media screen and (max-width: 1000px) {
  main #recipes .recipe-intro p {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-intro p {
    font-size: 14px;
  }
}
main #recipes ul.recipe-categories {
  display: flex;
  gap: 4vw;
  margin: 0 0 3vw 0;
  padding: 0;
  list-style: none;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 650px) {
  main #recipes ul.recipe-categories {
    gap: 10px;
    margin-bottom: 30px;
  }
}
main #recipes ul.recipe-categories li a {
  display: block;
  text-align: center;
  position: relative;
  transition: 0.5s;
}
main #recipes ul.recipe-categories li a:before {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
  margin: auto;
}
@media screen and (max-width: 1400px) {
  main #recipes ul.recipe-categories li a:before {
    width: 150px;
    height: 150px;
  }
}
@media screen and (max-width: 1000px) {
  main #recipes ul.recipe-categories li a:before {
    width: 100px;
    height: 100px;
  }
}
@media screen and (max-width: 650px) {
  main #recipes ul.recipe-categories li a:before {
    width: 70px;
    height: 70px;
  }
}
main #recipes ul.recipe-categories li a span {
  display: block;
}
main #recipes ul.recipe-categories li a .label {
  font-size: 2.0625em;
  font-weight: 700;
  color: #382120;
  margin-bottom: 10px;
  white-space: nowrap;
  line-height: 1;
}
@media screen and (max-width: 650px) {
  main #recipes ul.recipe-categories li a .label {
    font-size: 13px;
  }
}
main #recipes ul.recipe-categories li a .sublabel {
  font-size: 1.25em;
  padding: 7px;
  text-align: center;
  border-radius: 50px;
  background-color: #382120;
  color: white;
  white-space: nowrap;
  line-height: 1;
}
@media screen and (max-width: 650px) {
  main #recipes ul.recipe-categories li a .sublabel {
    padding: 5px;
    font-size: 9px;
  }
}
main #recipes ul.recipe-categories li a.is-active .label, main #recipes ul.recipe-categories li a:hover .label {
  color: var(--color-red);
}
main #recipes ul.recipe-categories li a.is-active .sublabel, main #recipes ul.recipe-categories li a:hover .sublabel {
  background-color: var(--color-red);
}
main #recipes ul.recipe-categories li a.all::before {
  background: url(../images/pages/recipes/ic-all.svg);
}
main #recipes ul.recipe-categories li a.all.is-active:before, main #recipes ul.recipe-categories li a.all:hover:before {
  background: url(../images/pages/recipes/ic-all-ov.svg);
}
main #recipes ul.recipe-categories li a.taku::before {
  background: url(../images/pages/recipes/ic-taku.svg);
}
main #recipes ul.recipe-categories li a.taku.is-active:before, main #recipes ul.recipe-categories li a.taku:hover:before {
  background: url(../images/pages/recipes/ic-taku-ov.svg);
}
main #recipes ul.recipe-categories li a.yaku::before {
  background: url(../images/pages/recipes/ic-yaku.svg);
}
main #recipes ul.recipe-categories li a.yaku.is-active:before, main #recipes ul.recipe-categories li a.yaku:hover:before {
  background: url(../images/pages/recipes/ic-yaku-ov.svg);
}
main #recipes ul.recipe-categories li a.yusen::before {
  background: url(../images/pages/recipes/ic-yusen.svg);
}
main #recipes ul.recipe-categories li a.yusen.is-active:before, main #recipes ul.recipe-categories li a.yusen:hover:before {
  background: url(../images/pages/recipes/ic-yusen-ov.svg);
}
main #recipes .recipe-list-wrapper {
  border-top: 1px solid var(--color-text);
  padding-top: 3vw;
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-list-wrapper {
    padding-top: 30px;
  }
}
main #recipes .recipe-list-wrapper ul.recipe-list {
  display: flex;
  gap: 1vw;
  flex-wrap: wrap;
  margin: 0 0 2vw;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-list-wrapper ul.recipe-list {
    gap: 20px;
    margin-right: -20px;
    margin-bottom: 20px;
  }
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item {
  width: calc(25% - 1vw);
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item {
    width: calc(50% - 20px);
  }
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a {
  display: block;
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a:hover .ph span {
  transform: scale(1.1);
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a .ph {
  width: 100%;
  height: 0;
  padding-top: 80%;
  background-color: #fff;
  border-radius: 1.5vw;
  overflow: hidden;
  position: relative;
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a .ph:before {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 40px;
  height: 40px;
  z-index: 10;
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a .ph:before {
    width: 20px;
    height: 20px;
  }
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a .ph span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform-origin: center center;
  transition: 1s;
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a h2 {
  margin-top: 0.5em;
  color: var(--color-brown);
}
@media screen and (max-width: 650px) {
  main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item a h2 {
    font-size: 14px;
    margin-bottom: 0;
  }
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item.taku a .ph:before {
  background: url(../images/pages/recipes/cat-taku.svg) no-repeat center center/contain;
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item.yaku a .ph:before {
  background: url(../images/pages/recipes/cat-yaku.svg) no-repeat center center/contain;
}
main #recipes .recipe-list-wrapper ul.recipe-list li.recipe-item.yusen a .ph:before {
  background: url(../images/pages/recipes/cat-yusen.svg) no-repeat center center/contain;
}
main .info-slides {
  margin-bottom: 10vw;
}
@media screen and (max-width: 650px) {
  main .info-slides {
    margin-bottom: 50px;
  }
}
main .info-slides .swiper-container {
  position: relative;
  --swiper-pagination-bottom: -30px;
  --swiper-pagination-color: #3d403d;
  --swiper-bullet-inactive-color: #ccc;
}
main .info-slides .swiper-container .swiper {
  padding: 10px 0;
}
main .info-slides .swiper-wrapper.is-centered {
  justify-content: center;
}
main .info-slides .swiper-wrapper .swiper-slide {
  position: relative;
}
main .info-slides .swiper-wrapper .swiper-slide.empty {
  border: 1px solid #ccc;
}
main .info-slides .swiper-wrapper .swiper-slide.is-new:before {
  content: "NEW";
  position: absolute;
  top: -10px;
  right: 15px;
  background-color: var(--color-red);
  color: white;
  padding: 0px 15px 3px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50px;
}
main .info-slides .swiper-wrapper .swiper-slide .ph {
  line-height: 0;
}
main .info-slides .swiper-wrapper .swiper-slide .ph img {
  width: 100%;
  height: auto;
}
main .info-slides .swiper-button-next,
main .info-slides .swiper-button-prev {
  --swiper-navigation-color: #3d403d;
  --swiper-navigation-sides-offset: -2vw;
}
@media screen and (max-width: 1000px) {
  main .info-slides .swiper-button-next,
  main .info-slides .swiper-button-prev {
    --swiper-navigation-sides-offset: -4vw;
    --swiper-navigation-size: 30px;
  }
}
@media screen and (max-width: 650px) {
  main .info-slides .swiper-button-next,
  main .info-slides .swiper-button-prev {
    --swiper-navigation-size: 24px;
  }
}
main .info-intro .row {
  display: flex;
  gap: 2vw;
  margin-bottom: 3em;
}
@media screen and (max-width: 650px) {
  main .info-intro .row {
    display: block;
  }
}
main .info-intro .row .ph {
  width: 50%;
  transition: 1s;
}
@media screen and (max-width: 650px) {
  main .info-intro .row .ph {
    width: 100%;
  }
}
main .info-intro .row .ph img {
  width: 100%;
  height: auto;
}
main .info-intro .row .info {
  width: 50%;
  color: var(--color-brown);
}
@media screen and (max-width: 650px) {
  main .info-intro .row .info {
    width: 100%;
  }
}
main .info-intro .row .info h3 {
  font-size: 2.0625em;
  letter-spacing: 0.3em;
  line-height: 2.8;
  margin-top: 0;
  transition: 1s;
}
@media screen and (max-width: 1400px) {
  main .info-intro .row .info h3 {
    font-size: 1.75em;
    line-height: 2.5;
  }
}
@media screen and (max-width: 1000px) {
  main .info-intro .row .info h3 {
    line-height: 2.2;
  }
}
@media screen and (max-width: 650px) {
  main .info-intro .row .info h3 {
    margin-top: 1em;
    font-size: 3.75em;
  }
}
main .info-intro .row .info .subname {
  color: #ee7631;
  font-size: 1.5625em;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1400px) {
  main .info-intro .row .info .subname {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 650px) {
  main .info-intro .row .info .subname {
    font-size: 2.5em;
  }
}
main .info-intro .row .info .name {
  font-size: 1.875em;
}
@media screen and (max-width: 1400px) {
  main .info-intro .row .info .name {
    font-size: 1.5625em;
  }
}
@media screen and (max-width: 650px) {
  main .info-intro .row .info .name {
    font-size: 2.8125em;
  }
}
main .info-intro .row .info .enname {
  font-size: 0.8125em;
  margin-bottom: 1em;
}
@media screen and (max-width: 650px) {
  main .info-intro .row .info .enname {
    font-size: 1.25em;
  }
}
main .info-intro .row .info .category {
  font-size: 1em;
}
@media screen and (max-width: 650px) {
  main .info-intro .row .info .category {
    font-size: 1.5625em;
  }
}
main .info-intro .row .info .category span {
  color: var(--color-red);
}
main p {
  color: var(--color-brown);
  font-size: 1.4375em;
  line-height: 2;
  text-align: justify;
}
@media screen and (max-width: 650px) {
  main p {
    font-size: 2.8125em;
  }
}
main #faq {
  margin-bottom: 5vw;
}
@media screen and (max-width: 650px) {
  main #faq {
    margin-bottom: 50px;
  }
}
main #faq .faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
main #faq .faq-list li {
  margin-bottom: 2em;
}
main #faq .faq-list .label {
  color: var(--color-red);
  font-size: 2.375em;
  font-weight: 700;
  white-space: nowrap;
  padding: 10px 0;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 650px) {
  main #faq .faq-list .label {
    font-size: 3.4375em;
  }
}
main #faq .faq-list .answer {
  background: url(../images/pages/belief/bg-documents.webp) no-repeat center center/cover;
  margin-left: calc((100vw - 1400px) / 2 * -1);
  margin-right: calc((100vw - 1400px) / 2 * -1);
  border-top: 1px solid #c5b8ab;
}
@media screen and (max-width: 1600px) {
  main #faq .faq-list .answer {
    margin-left: calc((100vw - 1000px) / 2 * -1);
    margin-right: calc((100vw - 1000px) / 2 * -1);
  }
}
@media (max-width: 1100px) {
  main #faq .faq-list .answer {
    margin-left: -50px;
    margin-right: -50px;
  }
}
@media screen and (max-width: 1000px) {
  main #faq .faq-list .answer {
    margin-left: -50px;
    margin-right: -50px;
  }
}
@media screen and (max-width: 650px) {
  main #faq .faq-list .answer {
    margin-left: -30px;
    margin-right: -30px;
  }
}
main #faq .faq-list .answer .inner {
  padding: 5px 0;
  max-width: 1400px;
  margin: auto;
}
@media screen and (max-width: 1600px) {
  main #faq .faq-list .answer .inner {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1100px) {
  main #faq .faq-list .answer .inner {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media screen and (max-width: 1000px) {
  main #faq .faq-list .answer .inner {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media screen and (max-width: 650px) {
  main #faq .faq-list .answer .inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
main #faq .faq-list .answer p {
  position: relative;
  font-size: 1.25em;
  line-height: 2;
  color: #231815;
  text-indent: -1.5em;
  padding-left: 2em;
}
@media screen and (max-width: 1000px) {
  main #faq .faq-list .answer p {
    font-size: 1.5625em;
    line-height: 1.8;
  }
}
@media screen and (max-width: 650px) {
  main #faq .faq-list .answer p {
    font-size: 2.8125em;
  }
}
main #faq .faq-list .answer p:before {
  content: "A. ";
  font-size: 1.2em;
  color: var(--color-red);
}
main p.note {
  text-align: center;
  color: var(--color-text);
  font-size: 1.25em;
  line-height: 2.2;
  margin: 2vw 0;
}
@media screen and (max-width: 650px) {
  main p.note {
    font-size: 2.1875em;
    margin: 20px 0;
  }
}
main .inqbt {
  text-align: center;
}
main .inqbt a,
main .inqbt input[type=submit],
main .inqbt button {
  display: inline-block;
  padding: 2vw 5vw;
  color: white;
  font-weight: 600;
  background-color: var(--color-text);
  border-radius: 100px;
  font-size: 1.375em;
  transition: 1s;
  border: none;
  font-family: inherit;
}
@media screen and (max-width: 650px) {
  main .inqbt a,
  main .inqbt input[type=submit],
  main .inqbt button {
    font-size: 2.8125em;
    padding: 20px 30px;
  }
}
main .inqbt a:hover,
main .inqbt input[type=submit]:hover,
main .inqbt button:hover {
  background-color: var(--color-red);
}
main .inqbt p {
  text-align: center;
}
main #contact .page-header {
  padding-bottom: 2vw;
}
main #contact .contact-intro {
  margin-bottom: 5vw;
}
main #contact .contact-intro p {
  text-align: center;
  font-size: 1.25em;
}
@media screen and (max-width: 1000px) {
  main #contact .contact-intro p {
    font-size: 12px;
  }
}
main #contact .form-pane {
  max-width: 1000px;
  margin: 0 auto;
}
main #contact .mw_wp_form .error-message {
  padding: 10px 15px;
  background-color: #fff0f0;
  border: 1px solid red;
  color: red;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .error-message {
    font-size: 14px;
  }
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .error {
    font-size: 12px;
  }
}
main #contact .mw_wp_form h3 {
  margin-top: 50px;
  margin-bottom: 10px;
}
@media screen and (max-width: 650px) {
  main #contact .mw_wp_form h3 {
    margin-top: 20px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
  }
}
main #contact .mw_wp_form p.note {
  margin-bottom: 0;
}
main #contact .mw_wp_form .date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: -10px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .date-list {
    gap: 5px;
  }
}
main #contact .mw_wp_form .date-list .mwform-checkbox-field {
  width: calc(33.3% - 10px);
  border: 1px solid #999;
  background-color: #fff;
  padding: 10px 15px;
  white-space: nowrap;
  margin: 0;
  gap: 5px 10px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .date-list .mwform-checkbox-field {
    font-size: 14px;
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .date-list .mwform-checkbox-field {
    width: auto;
    font-size: 14px;
    padding: 5px 5px;
    background-color: transparent;
    border: none;
  }
  main #contact .mw_wp_form .date-list .mwform-checkbox-field input[type=checkbox] {
    width: 1em;
    height: 1em;
  }
}
main #contact .mw_wp_form .date-list .mwform-checkbox-field label {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
}
main #contact .mw_wp_form .date-list .mwform-checkbox-field label input[type=checkbox] {
  margin: 0;
}
main #contact .mw_wp_form .date-list .mwform-checkbox-field label .mwform-checkbox-field-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
main #contact .mw_wp_form .date-list .mwform-checkbox-field label .mwform-checkbox-field-text span {
  background-color: gray;
  color: white;
  font-size: 0.7em;
  padding: 5px 8px;
  line-height: 1;
  display: inline-block;
  border-radius: 3px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .date-list .mwform-checkbox-field label .mwform-checkbox-field-text span {
    padding: 5px;
    text-align: center;
    min-width: 10em;
  }
}
main #contact .mw_wp_form .courseSelect {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px 0;
}
main #contact .mw_wp_form input[type=checkbox] {
  width: 1.5em;
  height: 1.5em;
}
main #contact .mw_wp_form input[type=radio] {
  width: 1.5em;
  height: 1.5em;
}
main #contact .mw_wp_form .mwform-radio-field,
main #contact .mw_wp_form .mwform-checkbox-field {
  display: inline-block;
  margin-left: 0;
  margin-right: 10px;
}
main #contact .mw_wp_form .mwform-radio-field label,
main #contact .mw_wp_form .mwform-checkbox-field label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
main #contact .mw_wp_form input[type=text],
main #contact .mw_wp_form input[type=tel],
main #contact .mw_wp_form input[type=email],
main #contact .mw_wp_form select,
main #contact .mw_wp_form textarea {
  padding: 10px 15px;
  border: none;
  background-color: #fff;
  font-size: 1.05em;
  width: 100%;
}
main #contact .mw_wp_form input[type=text]:focus,
main #contact .mw_wp_form input[type=tel]:focus,
main #contact .mw_wp_form input[type=email]:focus,
main #contact .mw_wp_form select:focus,
main #contact .mw_wp_form textarea:focus {
  outline-color: dodgerblue;
}
@media screen and (max-width: 650px) {
  main #contact .mw_wp_form input,
  main #contact .mw_wp_form select,
  main #contact .mw_wp_form textarea {
    margin-bottom: 5px;
  }
}
main #contact .mw_wp_form textarea {
  width: 100%;
}
main #contact .mw_wp_form p,
main #contact .mw_wp_form div.note {
  margin-bottom: 10px;
}
main #contact .mw_wp_form table {
  border-top: 1px solid var(--color-text);
  border-collapse: collapse;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form table {
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
  }
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form table tr {
    display: block;
  }
}
main #contact .mw_wp_form table th {
  background-color: #f9f0e7;
  border-bottom: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
  text-align: left;
  padding: 15px 70px 15px 15px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: top;
  position: relative;
  color: var(--color-text);
}
main #contact .mw_wp_form table th::after {
  content: "任意";
  background-color: #999;
  color: white;
  font-size: 0.8em;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  margin-left: 10px;
  position: absolute;
  top: 10px;
  right: 15px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form table th {
    font-size: 12px;
    border-right: none;
    display: block;
  }
  main #contact .mw_wp_form table th br {
    display: none;
  }
}
main #contact .mw_wp_form table td {
  white-space: normal;
  border-bottom: 1px solid #000;
  padding: 15px;
  font-weight: 600;
  background-color: #fff;
  vertical-align: top;
  color: var(--color-text);
  width: 100%;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form table td {
    display: block;
    font-size: 12px;
  }
}
main #contact .mw_wp_form table th.required {
  justify-content: space-between;
}
main #contact .mw_wp_form table th.required::after {
  content: "必須";
  background-color: var(--color-red);
  color: white;
  font-size: 0.8em;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  margin-left: 10px;
}
main #contact .mw_wp_form .centered-buttons {
  text-align: center;
  font-size: 1.2em;
  padding: 20px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .centered-buttons {
    padding: 0px;
    font-size: 12px;
  }
}
main #contact .mw_wp_form span.required {
  background-color: #F07932;
  color: white;
  font-size: 0.8em;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 3px;
  margin-left: 10px;
}
main #contact .mw_wp_form .is-checked {
  background-color: #b3d7ff !important;
  border-color: dodgerblue !important;
}
main #contact .mw_wp_form .is-error input[type=text],
main #contact .mw_wp_form .is-error input[type=tel],
main #contact .mw_wp_form .is-error input[type=email],
main #contact .mw_wp_form .is-error .mwform-checkbox-field,
main #contact .mw_wp_form .is-error select {
  background-color: #fff0f0;
}
main #contact .mw_wp_form .is-error .error-message {
  color: var(--color-red);
  font-size: 0.8em;
  margin-top: 5px;
  margin-bottom: 10px;
}
main #contact .mw_wp_form .btnArea {
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}
main #contact .mw_wp_form .btnArea p {
  text-align: center;
}
main #contact .mw_wp_form .btnArea input[type=submit] {
  background-color: var(--color-red);
  color: white;
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1;
  padding: 1em 3em;
  border-radius: 5px;
  transition: 0.5s;
  border: none;
  cursor: pointer;
  margin: 0 20px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form .btnArea input[type=submit] {
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 600;
  }
}
main #contact .mw_wp_form .btnArea input[type=submit]:hover {
  background-color: var(--color-red);
}
main #contact .mw_wp_form #check-privacy-policy {
  text-align: center;
  padding: 30px 0;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form #check-privacy-policy .mwform-checkbox-field-text {
    font-size: 12px;
  }
}
main #contact .mw_wp_form #check-privacy-policy p {
  font-size: 1em;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form #check-privacy-policy p {
    font-size: 12px;
  }
}
main #contact .mw_wp_form #check-privacy-policy a {
  color: var(--color-red);
  text-decoration: underline;
}
main #contact .mw_wp_form #form-notice {
  background-color: #fff;
  padding: 1.3vw 2vw;
  border: 1px dotted var(--color-text);
  color: var(--color-text);
  border-radius: 10px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form #form-notice {
    padding: 15px 20px;
  }
}
main #contact .mw_wp_form #form-notice ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
main #contact .mw_wp_form #form-notice ul li {
  text-indent: -0.5em;
  padding-left: 1em;
  line-height: 1.7;
  margin-bottom: 5px;
}
@media screen and (max-width: 1000px) {
  main #contact .mw_wp_form #form-notice ul li {
    font-size: 11px;
  }
}
main #contact .mw_wp_form #form-notice ul li:before {
  content: "●";
  color: var(--color-red);
  display: inline-block;
}
main #contact .mw_wp_form_confirm .hide-confirm {
  display: none;
}
main #contact .mw_wp_form_confirm .centered-buttons {
  text-align: left;
  font-size: 1em;
}
main #contact .inqbt {
  margin: 2vw 0;
}
main #contact .inqbt div {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
main #contact .inqbt p.note {
  margin-bottom: 2vw;
}
main #news .page-header {
  padding-bottom: 2vw;
}
main #news .news-list {
  max-width: 700px;
  margin: 0 auto;
}
main #news .news-list ul {
  list-style: none;
  margin: 0 0 3em;
  padding: 0;
}
main #news .news-list ul li {
  margin-bottom: 0.5em;
}
main #news .news-list ul li a {
  font-size: 1.375em;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px dotted var(--color-text);
  padding: 5px 0;
  gap: 20px;
  align-items: flex-start;
  transition: 0.5s;
}
@media screen and (max-width: 650px) {
  main #news .news-list ul li a {
    font-size: 2.25em;
  }
}
main #news .news-list ul li a:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}
main #news .news-list ul li a span.date {
  white-space: nowrap;
}
main #news-single .page-header {
  padding-bottom: 2vw;
}
main #news-single .page-body {
  max-width: 900px;
  margin: 0 auto;
}
main #news-single .page-body .news-single-content {
  margin-bottom: 5vw;
}
main #recipe-single {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 0px;
  position: relative;
}
@media print {
  main #recipe-single {
    padding-top: 10px;
  }
}
main #recipe-single .btn-print {
  position: absolute;
  top: 50px;
  right: 0;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .btn-print {
    top: 100px;
    right: 0px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .btn-print {
    top: 75px;
    right: -10px;
  }
}
@media print {
  main #recipe-single .btn-print {
    display: none;
  }
}
main #recipe-single .btn-print a {
  border: 1px solid var(--color-brown);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: var(--color-brown);
  font-weight: 700;
  padding: 20px 50px;
  border-radius: 100px;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .btn-print a {
    padding: 10px 20px;
    font-size: 12px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .btn-print a {
    padding: 7px 15px;
    font-size: 10px;
  }
}
main #recipe-single .btn-print a:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/pages/recipes/ic-print.svg) no-repeat center center/contain;
}
main #recipe-single .page-header {
  margin-top: 70px;
  border-top: 4px solid var(--color-brown);
  border-bottom: 4px solid var(--color-brown);
  padding-top: 0;
  padding-bottom: 2em;
  position: relative;
}
main #recipe-single .page-header .mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -65px;
  width: 148px;
  margin: 0 auto -50px;
  padding-top: 20px;
}
main #recipe-single .page-header .mark:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 0;
  width: 148px;
  height: 148px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 44%, 0 44%);
          clip-path: polygon(0 0, 100% 0, 100% 44%, 0 44%);
  background: url(../images/pages/recipes/bg-recipe-mark.svg) no-repeat top center/contain;
}
main #recipe-single .page-header .mark:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 100%;
  width: 148px;
  height: 148px;
  background-color: var(--color-bg);
}
main #recipe-single .page-header .mark img {
  width: 63px;
  height: 70px;
  margin: 0;
  position: relative;
  z-index: 2;
}
main #recipe-single .page-header .mark span {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  position: relative;
  z-index: 2;
}
main #recipe-single .page-header .title .catch {
  color: var(--color-orange);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .page-header .title .catch {
    font-size: 14px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .page-header .title .catch {
    font-size: 12px;
  }
}
main #recipe-single .page-header .title .ja {
  margin: 0;
  border: none;
  color: var(--color-brown);
}
@media screen and (max-width: 1000px) {
  main #recipe-single .page-header .title .ja {
    font-size: 36px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .page-header .title .ja {
    font-size: 24px;
  }
}
main #recipe-single .page-header .desc {
  font-size: 1.25em;
  line-height: 1.8;
  color: var(--color-text);
  margin: 10px 0 0;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .page-header .desc {
    font-size: 14px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .page-header .desc {
    font-size: 12px;
    margin-bottom: 10px;
  }
}
main #recipe-single .recipe-body {
  display: flex;
  align-items: normal;
  font-family: "Noto Sans JP", sans-serif;
  border-bottom: 4px solid var(--color-brown);
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body {
    flex-direction: column;
  }
}
main #recipe-single .recipe-body #swiper-recipe-main {
  --swiper-pagination-color: #7a514a;
}
main #recipe-single .recipe-body #swiper-recipe-main img {
  border-radius: 20px;
  width: 100%;
  height: auto;
}
@media print {
  main #recipe-single .recipe-body #swiper-recipe-main img {
    height: 276px;
    width: 415px;
  }
}
main #recipe-single .recipe-body .lt {
  width: 70%;
  min-width: 70%;
  padding: 30px 30px 30px 0;
  border-right: 1px solid var(--color-brown);
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .lt {
    padding: 15px 15px 15px 0;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body .lt {
    width: 100%;
    padding: 25px 0 0;
    border-right: none;
  }
}
@media print {
  main #recipe-single .recipe-body .lt {
    padding: 15px 15px 15px 0;
  }
}
main #recipe-single .recipe-body .rt {
  width: 30%;
  min-width: 30%;
  padding: 30px 0 30px 30px;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .rt {
    padding: 15px 0 15px 15px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body .rt {
    width: 100%;
    padding: 15px 0 0;
  }
}
@media print {
  main #recipe-single .recipe-body .rt {
    padding: 15px 0 15px 15px;
  }
}
main #recipe-single .recipe-body .recipe-block {
  padding-bottom: 2vw;
}
@media print {
  main #recipe-single .recipe-body .recipe-block {
    padding-bottom: 0px;
  }
}
main #recipe-single .recipe-body .recipe-block h2 {
  color: var(--color-brown);
  font-size: 20px;
  letter-spacing: 0.1em;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-brown);
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .recipe-block h2 {
    font-size: 14px;
  }
}
@media print {
  main #recipe-single .recipe-body .recipe-block h2 {
    font-size: 14px;
  }
}
main #recipe-single .recipe-body .recipe-block h2:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
}
main #recipe-single .recipe-body #steps h2:before,
main #recipe-single .recipe-body #sp-steps h2:before {
  background: url(../images/pages/recipes/ic-steps.svg) no-repeat center center/contain;
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body #steps {
    display: none;
  }
}
main #recipe-single .recipe-body #sp-steps {
  display: none;
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body #sp-steps {
    display: block;
  }
}
main #recipe-single .recipe-body #zairyo h2:before {
  background: url(../images/pages/recipes/ic-zairyo.svg) no-repeat center center/contain;
}
main #recipe-single .recipe-body #jikan h2:before {
  background: url(../images/pages/recipes/ic-jikan.svg) no-repeat center center/contain;
}
main #recipe-single .recipe-body #tools h2:before {
  background: url(../images/pages/recipes/ic-tools.svg) no-repeat center center/contain;
}
main #recipe-single .recipe-body .meyasu {
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 1em;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .meyasu {
    font-size: 12px;
  }
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body .meyasu {
    font-size: 10px;
  }
}
main #recipe-single .recipe-body ul,
main #recipe-single .recipe-body ol,
main #recipe-single .recipe-body p {
  font-size: 16px;
  color: var(--color-brown);
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body ul,
  main #recipe-single .recipe-body ol,
  main #recipe-single .recipe-body p {
    font-size: 12px;
  }
}
@media print {
  main #recipe-single .recipe-body ul,
  main #recipe-single .recipe-body ol,
  main #recipe-single .recipe-body p {
    font-size: 12px;
  }
}
main #recipe-single .recipe-body ul {
  list-style: none;
  margin-bottom: 2em;
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body ul {
    margin-bottom: 1em;
  }
}
main #recipe-single .recipe-body ul li {
  display: flex;
  margin-left: 1.5em;
  margin-bottom: 10px;
  position: relative;
  line-height: 1.5;
  flex-wrap: wrap;
  gap: 5px;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body ul li {
    margin-bottom: 5px;
  }
}
@media print {
  main #recipe-single .recipe-body ul li {
    margin-bottom: 5px;
  }
}
main #recipe-single .recipe-body ul li:before {
  content: "";
  background-color: var(--color-orange);
  width: 10px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  top: 0.5em;
  left: -1em;
}
main #recipe-single .recipe-body ul li .name {
  display: block;
  white-space: nowrap;
}
main #recipe-single .recipe-body ul li .amount {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-grow: 1;
}
main #recipe-single .recipe-body ul li .amount:before {
  content: "";
  height: 0;
  width: 100%;
  border-top: 2px dotted var(--color-brown);
}
main #recipe-single .recipe-body ol {
  list-style: none;
  margin-bottom: 3em;
  counter-reset: my-counter;
}
main #recipe-single .recipe-body ol li {
  margin-left: 1.5em;
  margin-bottom: 15px;
  position: relative;
  line-height: 1.5;
  flex-wrap: wrap;
  padding-left: 10px;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body ol li {
    margin-bottom: 5px;
  }
}
@media print {
  main #recipe-single .recipe-body ol li {
    margin-bottom: 5px;
  }
}
main #recipe-single .recipe-body ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  width: 1.2em;
  height: 1.2em;
  border-radius: 10px;
  position: absolute;
  top: 0.2em;
  left: -1.8em;
  z-index: 0;
  color: white;
  font-size: 0.8em;
  text-align: center;
  width: 2em;
}
main #recipe-single .recipe-body ol li:after {
  content: "";
  background-color: var(--color-orange);
  width: 1.2em;
  height: 1.2em;
  border-radius: 10px;
  position: absolute;
  top: 0.2em;
  left: -1.3em;
  z-index: -1;
}
main #recipe-single .recipe-body ol li span.stars {
  color: var(--color-red);
  margin-left: 10px;
}
main #recipe-single .recipe-body .zairyo-numimg {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-brown);
  text-align: center;
}
main #recipe-single .recipe-body .zairyo-numimg img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 650px) {
  main #recipe-single .recipe-body .zairyo-numimg img {
    width: 50%;
    height: auto;
  }
}
main #recipe-single .recipe-body .zairyo-subimg {
  margin-bottom: 30px;
}
main #recipe-single .recipe-body .zairyo-subimg img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
main #recipe-single .recipe-body .osusume-block,
main #recipe-single .recipe-body .chuui-block {
  background-color: #f3edd8;
  padding: 20px 30px;
  position: relative;
  margin-bottom: 2em;
  border-radius: 20px;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .osusume-block,
  main #recipe-single .recipe-body .chuui-block {
    padding: 10px 15px;
    border-radius: 10px;
  }
}
@media print {
  main #recipe-single .recipe-body .osusume-block,
  main #recipe-single .recipe-body .chuui-block {
    padding: 10px 15px;
    border-radius: 10px;
  }
}
main #recipe-single .recipe-body .osusume-block h3,
main #recipe-single .recipe-body .chuui-block h3 {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .osusume-block h3,
  main #recipe-single .recipe-body .chuui-block h3 {
    top: -15px;
  }
}
@media print {
  main #recipe-single .recipe-body .osusume-block h3,
  main #recipe-single .recipe-body .chuui-block h3 {
    top: -15px;
  }
}
main #recipe-single .recipe-body .osusume-block h3 img,
main #recipe-single .recipe-body .chuui-block h3 img {
  height: 30px;
  width: auto;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .osusume-block h3 img,
  main #recipe-single .recipe-body .chuui-block h3 img {
    height: 15px;
  }
}
@media print {
  main #recipe-single .recipe-body .osusume-block h3 img,
  main #recipe-single .recipe-body .chuui-block h3 img {
    height: 15px;
  }
}
main #recipe-single .recipe-body .osusume-block p,
main #recipe-single .recipe-body .chuui-block p {
  color: var(--color-red);
  margin: 0;
  font-size: 14px;
}
@media screen and (max-width: 1000px) {
  main #recipe-single .recipe-body .osusume-block p,
  main #recipe-single .recipe-body .chuui-block p {
    font-size: 10px;
  }
}
@media print {
  main #recipe-single .recipe-body .osusume-block p,
  main #recipe-single .recipe-body .chuui-block p {
    font-size: 10px;
  }
}
main #recipe-single .recipe-body .chuui-block {
  background-color: #fbe3e0;
}
main #recipe-single .recipe-body .youtube-movie {
  width: 120px;
  height: 75px;
  margin-top: 1em;
  margin-left: auto;
}
main #recipe-single .recipe-body .youtube-movie a {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  position: relative;
}
main #recipe-single .recipe-body .youtube-movie a:before {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/pages/recipes/ic-youtube-play.svg) no-repeat center center/contain;
}
@media screen and (max-width: 650px) {
  main.single-recipes .bottom-slide {
    padding: 25px 0;
  }
}
@media print {
  main.single-recipes .bottom-slide {
    display: none;
  }
}
main.single-recipes .bottom-slide .container {
  max-width: 900px;
}

.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 650px) {
  .wp-pagenavi {
    gap: 0px;
  }
}
.wp-pagenavi span,
.wp-pagenavi a {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--color-text);
  border: none !important;
  width: 2em;
  height: 2em;
  line-height: 1;
  transition: 1s;
  border-radius: 50px;
}
@media screen and (max-width: 650px) {
  .wp-pagenavi span,
  .wp-pagenavi a {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
  background-color: var(--color-red);
  color: white;
}
.wp-pagenavi span.pages {
  display: none;
}

@media print {
  footer {
    display: none;
  }
}
@media screen and (max-width: 650px) {
  footer a.readmore {
    font-size: 9px;
    white-space: nowrap;
    padding-right: 50px;
  }
}
footer a.readmore::before {
  background-color: #fff;
}
footer a.square-button {
  border-color: #fff;
}
@media screen and (max-width: 650px) {
  footer a.square-button {
    font-size: 10px;
  }
}
footer .footer-main {
  background: #ccc;
  position: relative;
  padding: 30px;
}
footer .footer-main p.footer-logo {
  margin: 0;
}
@media screen and (max-width: 650px) {
  footer .footer-main p.footer-logo {
    width: 80%;
    text-align: center;
    margin: 0 auto !important;
  }
}
footer .footer-main p.footer-logo img {
  width: 100%;
  max-width: 500px;
  height: auto;
}
footer .footer-main .row {
  display: flex;
  max-width: 1600px;
  margin: auto;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row {
    display: block;
    margin: 0 auto;
    max-width: 700px;
  }
}
footer .footer-main .row .col.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
  width: 400px;
}
@media screen and (max-width: 1600px) {
  footer .footer-main .row .col.info {
    width: 300px;
  }
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row .col.info {
    margin-bottom: 20px;
    text-align: center;
    width: auto;
  }
  footer .footer-main .row .col.info img {
    max-width: 300px;
  }
}
footer .footer-main .row .col.info h2 {
  font-size: 1em;
  font-weight: 400;
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row .col.info h2 {
    font-size: 11px;
  }
}
footer .footer-main .row .col.info p {
  font-size: 1.125em;
  line-height: 1.7;
  margin: 0;
}
@media screen and (max-width: 1600px) {
  footer .footer-main .row .col.info p {
    font-size: 14px;
  }
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row .col.info p {
    font-size: 12px;
    text-align: center;
  }
}
footer .footer-main .row .col.info a {
  margin-bottom: 50px;
}
footer .footer-main .row .col.info .sns {
  margin: 20px 0 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row .col.info .sns {
    justify-content: center;
    margin: 10px 0;
  }
}
footer .footer-main .row .col.info .sns li {
  padding: 0;
  margin: 0;
  list-style: none;
}
footer .footer-main .row .col.info .sns li a {
  display: block;
  line-height: 1;
  margin: 0;
}
footer .footer-main .row .col.info .sns li a img {
  width: 32px;
  height: auto;
}
footer .footer-main .row .col .nav {
  display: flex;
  gap: 4vw;
  margin-bottom: 20px;
}
@media screen and (max-width: 1600px) {
  footer .footer-main .row .col .nav {
    gap: 30px;
  }
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .nav {
    flex-direction: column;
    gap: 0px;
    width: 300px;
    margin: 0 auto 30px;
  }
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .nav > ul > li {
    border-bottom: 1px dotted #000;
  }
}
footer .footer-main .row .col .nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  flex-grow: 1;
}
footer .footer-main .row .col .nav ul li {
  line-height: 2;
}
footer .footer-main .row .col .nav ul li a {
  white-space: nowrap;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.125em;
  letter-spacing: 0;
}
@media screen and (max-width: 1600px) {
  footer .footer-main .row .col .nav ul li a {
    font-size: 14px;
  }
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .nav ul li a {
    font-size: 12px;
    line-height: 3;
  }
}
footer .footer-main .row .col .nav ul li a:before {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  border: 2px solid var(--color-red);
  border-radius: 1em;
  margin-bottom: 0;
  transition: 0.5s;
}
footer .footer-main .row .col .nav ul li a:hover:before {
  background-color: var(--color-red);
}
footer .footer-main .row .col .nav ul li ul {
  margin-left: 3em;
  width: 8em;
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .nav ul li ul {
    width: auto;
    margin-bottom: 10px;
  }
}
footer .footer-main .row .col .nav ul li ul li {
  list-style: disc;
  line-height: 1.5;
}
footer .footer-main .row .col .nav ul li ul li a {
  font-size: 0.8em;
  line-height: 1.5;
  letter-spacing: 0;
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row .col .nav ul li ul li a {
    font-size: 10px;
  }
}
footer .footer-main .row .col .nav ul li ul li a:before {
  display: none;
}
footer .footer-main .row .col .bans {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
  footer .footer-main .row .col .bans {
    justify-content: center;
  }
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .bans {
    flex-direction: column;
    gap: 5px;
    max-width: 300px;
    margin: auto;
  }
}
footer .footer-main .row .col .bans a {
  display: block;
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .bans a {
    width: 100%;
  }
}
footer .footer-main .row .col .bans a img {
  height: 50px;
  width: auto;
}
@media screen and (max-width: 650px) {
  footer .footer-main .row .col .bans a img {
    width: 100%;
    height: auto;
  }
}
footer .footer-bottom {
  padding: 20px;
}
@media screen and (max-width: 650px) {
  footer .footer-bottom {
    padding-bottom: 80px;
  }
}
footer .footer-bottom .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75em;
  color: #666;
}
@media screen and (max-width: 650px) {
  footer .footer-bottom .row {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    font-size: 12px;
    gap: 20px;
  }
}
footer .footer-bottom .row a {
  color: #666;
  text-decoration: none;
}
footer .footer-bottom .row a:hover {
  text-decoration: underline;
}
footer .footer-bottom .row .col {
  width: 50%;
}
@media screen and (max-width: 650px) {
  footer .footer-bottom .row .col {
    width: 100%;
  }
}
footer .footer-bottom .row .col.copyright {
  text-align: right;
}
@media screen and (max-width: 650px) {
  footer .footer-bottom .row .col.copyright {
    text-align: center;
    font-size: 10px;
  }
}

/* lower */
.lower-header {
  text-align: center;
  color: var(--color-brown);
  padding-top: 3vw;
}
.lower-header .title .ja {
  font-size: 2em;
  font-weight: 500;
  margin: 0;
}
.lower-header .title .en {
  font-family: "Inter", sans-serif;
  font-size: 1.375em;
  font-weight: 300;
  margin: 0;
}

/* news list */
#news-topics {
  padding: 50px;
}
@media screen and (max-width: 650px) {
  #news-topics {
    padding: 20px;
  }
}
#news-topics .inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 5vw;
  padding: 3vw 2vw;
  border: 1px solid rgba(var(--color-brown), 0.3);
  border-left: none;
  border-right: none;
}
#news-topics .inner .news-content ul {
  padding: 0;
  margin: 0 0 3em;
}
#news-topics .inner .news-content ul li {
  list-style: none;
  margin-bottom: 2em;
}
@media screen and (max-width: 650px) {
  #news-topics .inner .news-content ul li {
    border-bottom: 1px solid #ccc;
  }
}
#news-topics .inner .news-content ul li a {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  line-height: 2;
  font-weight: 600;
}
@media screen and (max-width: 650px) {
  #news-topics .inner .news-content ul li a {
    font-size: 14px;
    flex-direction: column;
    gap: 0px;
    line-height: 1.5;
    padding-bottom: 1em;
  }
}
#news-topics .inner .news-content ul li a:hover {
  text-decoration: underline;
}
#news-topics .inner .news-content ul li a .date {
  white-space: nowrap;
  color: var(--color-brown);
}

/* single */
#news-single {
  padding: 50px;
}
@media screen and (max-width: 650px) {
  #news-single {
    padding: 20px;
  }
}
#news-single .inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 5vw;
  padding: 3vw 5vw;
  background-color: #fff;
  border: 1px solid rgba(var(--color-brown), 0.3);
}
#news-single .date {
  font-weight: 600;
}
@media screen and (max-width: 650px) {
  #news-single .date {
    font-size: 12px;
  }
}
#news-single .description {
  font-size: 0.8em;
  padding-top: 20px;
}
#news-single h1 {
  margin-top: 0;
  color: var(--color-brown);
}
@media screen and (max-width: 650px) {
  #news-single h1 {
    font-size: 20px;
    line-height: 1.5;
    margin-top: 0;
  }
}
#news-single .news-single-content {
  margin-bottom: 5vw;
  font-weight: 500;
  line-height: 2;
}
@media screen and (max-width: 650px) {
  #news-single .news-single-content {
    font-size: 14px;
  }
}
#news-single .news-single-content p {
  font-size: 1.125em;
  color: var(--color-text);
}
#news-single .news-single-content .wp-block-image,
#news-single .news-single-content p {
  margin: 0 0 2em;
}
#news-single .news-single-content table {
  border-top: 1px solid #000;
}
#news-single .news-single-content table th,
#news-single .news-single-content table td {
  border-bottom: 1px solid #000;
}
#news-single .news-single-content .wp-block-group.bordered {
  margin-bottom: 2em;
  border: 1px solid #000;
  padding: 30px;
}
#news-single .news-single-content .wp-block-group.bordered h3 {
  margin: 0;
  line-height: 1.5;
  font-size: 1.5625em;
}
#news-single .news-single-content .wp-block-group.bordered p {
  font-size: 0.875em;
}
#news-single .news-single-content .wp-block-group.bordered p:last-of-type {
  margin-bottom: 0;
}
#news-single .news-single-content .wp-block-group.bordered p a:hover {
  text-decoration: underline;
}
#news-single .news-single-content .wp-block-button a {
  font-size: 0.875em;
}
#news-single .news-single-content .wp-block-button.--pdf a {
  display: inline-flex;
  gap: 50px;
  align-items: center;
  padding: 10px 30px;
  white-space: nowrap;
  justify-content: space-between;
}
#news-single .news-single-content .wp-block-button.--pdf a:after {
  position: relative;
  z-index: 2;
  content: "";
  width: 12px;
  height: 17px;
  background: url(../images/common/ic-pdf.svg) no-repeat center center/contain;
}

#single-below-nav {
  text-align: center;
}
#single-below-nav .next-prev {
  display: flex;
  margin: 0px auto;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  #single-below-nav .next-prev {
    margin: 0px auto;
    padding: 0 20px;
  }
}
@media screen and (max-width: 650px) {
  #single-below-nav .next-prev {
    margin-bottom: 20px;
  }
}
#single-below-nav .next-prev span,
#single-below-nav .next-prev a {
  padding: 5px 20px;
  display: inline-block;
  color: var(--color-brown);
  position: relative;
  height: 22px;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  #single-below-nav .next-prev span,
  #single-below-nav .next-prev a {
    padding: 5px 10px;
  }
}
@media screen and (max-width: 650px) {
  #single-below-nav .next-prev span,
  #single-below-nav .next-prev a {
    font-size: 12px;
  }
}
#single-below-nav .next-prev span[rel=prev]:before,
#single-below-nav .next-prev a[rel=prev]:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--color-brown);
  border-left: 1px solid var(--color-brown);
  transform: rotate(-45deg);
  top: 5px;
  left: -11px;
}
#single-below-nav .next-prev span[rel=next]:before,
#single-below-nav .next-prev a[rel=next]:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--color-brown);
  border-left: 1px solid var(--color-brown);
  transform: rotate(135deg);
  top: 5px;
  right: -11px;
}
#single-below-nav .next-prev span {
  color: #ccc;
}
#single-below-nav .next-prev span[rel=prev]:before, #single-below-nav .next-prev span[rel=next]:before {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

#animatedModal {
  color: var(--color-text);
  background-color: var(--color-bg);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: auto;
  z-index: -9999;
  opacity: 0;
  animation-duration: 0.6s;
}
#animatedModal .modal-wrapper {
  padding: 20px;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#animatedModal .modal-wrapper .close-animatedModal {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  margin-left: auto;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  cursor: pointer;
}
#animatedModal .modal-wrapper .close-animatedModal img {
  width: 100%;
}
#animatedModal .modal-wrapper .modal-body h3 {
  font-size: 1.75em;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
}
@media screen and (max-width: 650px) {
  #animatedModal .modal-wrapper .modal-body h3 {
    font-size: 2.5em;
  }
}
#animatedModal .modal-wrapper .modal-body ul {
  list-style: none;
  margin: 0 0 3em;
  padding: 0;
}
@media screen and (max-width: 650px) {
  #animatedModal .modal-wrapper .modal-body ul {
    margin-bottom: 30px;
  }
}
#animatedModal .modal-wrapper .modal-body ul li {
  margin-bottom: 0.5em;
}
#animatedModal .modal-wrapper .modal-body ul li a {
  font-size: 1.375em;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted var(--color-text);
  padding: 5px 0;
  gap: 50px;
  align-items: flex-start;
  transition: 0.5s;
}
@media screen and (max-width: 650px) {
  #animatedModal .modal-wrapper .modal-body ul li a {
    font-size: 2.25em;
  }
}
#animatedModal .modal-wrapper .modal-body ul li a:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}
#animatedModal .modal-wrapper .modal-body ul li a span {
  white-space: nowrap;
}/*# sourceMappingURL=disp.css.map */