@charset "UTF-8";
/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}
*,
:after,
:before {
  background-repeat: no-repeat;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
:after,
:before {
  text-decoration: inherit;
  vertical-align: inherit;
}
* {
  padding: 0;
  margin: 0;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
hr {
  overflow: visible;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
summary {
  display: list-item;
}
small {
  font-size: 80%;
}
[hidden],
template {
  display: none;
}
abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
  outline-width: 0;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}
b,
strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ff0;
  color: #000;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
input {
  border-radius: 0;
}
[role='button'],
[type='button'],
[type='reset'],
[type='submit'],
button {
  cursor: pointer;
  border: none;
}
[disabled] {
  cursor: default;
}
[type='number'] {
  width: auto;
}
[type='search'] {
  -webkit-appearance: textfield;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  resize: vertical;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
}
optgroup {
  font-weight: bold;
}
button {
  overflow: visible;
}
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
[type='reset'],
[type='submit'],
button,
html [type='button'] {
  -webkit-appearance: button;
}
button,
select {
  text-transform: none;
}
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
}
select::-ms-expand {
  display: none;
}
select::-ms-value {
  color: currentColor;
}
legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
img {
  max-width: 100%;
  border-style: none;
}
progress {
  vertical-align: baseline;
}
svg:not(:root) {
  overflow: hidden;
}
audio,
canvas,
progress,
video {
  display: inline-block;
}
[aria-busy='true'] {
  cursor: progress;
}
[aria-controls] {
  cursor: pointer;
}
[aria-disabled] {
  cursor: default;
}
::-moz-selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}
::selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}
a {
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
.pc-br {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc-br {
    display: none !important;
  }
}
.sp-br {
  display: block;
}
@media (min-width: 768px) {
  .sp-br {
    display: none !important;
  }
}
.fc-green {
  color: #72a003;
}
.gradation-round {
  content: '';
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  -webkit-filter: blur(4rem);
  filter: blur(4rem);
}
@media screen and (max-width: 767px) {
  .gradation-round {
    opacity: 0.6;
    will-change: filter;
  }
}
.gradation-round.green {
  background: #72a003;
}
p.txt {
  font-size: 1rem;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  p.txt {
    font-size: 0.9rem;
  }
}
.vertical-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.btn.fream a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.btn.fream.vertical {
  width: 3.5rem;
  height: 17rem;
  background-image: url('../img/btn_waku_h.png');
  background-size: 100% 100%;
  background-position: center;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.btn.fream.horizontal {
  width: 17rem;
  height: 3.5rem;
  background-image: url('../img/btn_waku_w.png');
  background-size: 100% 100%;
  background-position: center;
}
.btn.fream.horizontal.green {
  background-image: url('../img/btn_waku_gr.png');
}
.btn.fream.horizontal.green a {
  color: #20620e;
}
#scroll-top {
  z-index: 100;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 3rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #scroll-top {
    width: 3rem;
    right: 1rem;
    bottom: 1rem;
  }
}
#scroll-top a {
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
}
#scroll-top a img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  scroll-behavior: 190px;
}
@media screen and (min-width: 1025px) {
  html {
    font-size: 1.1vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: min(1.171875vw, 20px);
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: min(4.2666666667vw, 26px);
    scroll-behavior: auto;
    scroll-padding-top: 1rem;
  }
}
body {
  width: 100%;
  min-width: 375px;
  background: #000;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 0.9rem;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome,
  body {
    -webkit-font-feature-settings: 'pkna';
    font-feature-settings: 'pkna';
  }
}
#contents-area {
  color: #fff;
  font-family:
    'Shippori Mincho', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', '游明朝',
    'Yu Mincho', 'ＭＳ 明朝', 'MS Mincho', serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  color: #fff;
  cursor: pointer;
}
a:hover {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  opacity: 0.8;
}
ol li,
ul li {
  list-style: none;
}
img {
  vertical-align: bottom;
}
.lb-details {
  display: none;
}
.load-fadeIn {
  opacity: 0;
}
@-webkit-keyframes load-fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes load-fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
.blur {
  opacity: 0;
}
.blur.anime {
  -webkit-animation: blur 1s ease-in-out 0s forwards;
  animation: blur 1s ease-in-out 0s forwards;
}
@media screen and (max-width: 767px) {
  .blur.anime {
    -webkit-animation: blur 0.5s ease-in-out 0s forwards;
    animation: blur 0.5s ease-in-out 0s forwards;
  }
}
@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes blur {
  0% {
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
.fadeIn {
  opacity: 0;
}
.fadeIn.anime {
  -webkit-animation: fadeIn 0.8s ease-out forwards;
  animation: fadeIn 0.8s ease-out forwards;
}
@media screen and (max-width: 767px) {
  .fadeIn.anime {
    -webkit-animation: fadeIn 0.4s ease-out forwards;
    animation: fadeIn 0.4s ease-out forwards;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
    @media screen and (max-width: 767px) {
      -webkit-transform: translateY(0.5rem);
      transform: translateY(0.5rem);
    }
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
    @media screen and (max-width: 767px) {
      -webkit-transform: translateY(0.5rem);
      transform: translateY(0.5rem);
    }
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeDown {
  opacity: 0;
}
.fadeDown.anime {
  -webkit-animation: fadeDown 0.8s ease-out forwards;
  animation: fadeDown 0.8s ease-out forwards;
}
@media screen and (max-width: 767px) {
  .fadeDown.anime {
    -webkit-animation: fadeDown 0.4s ease-out forwards;
    animation: fadeDown 0.4s ease-out forwards;
  }
}
@-webkit-keyframes fadeDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
    @media screen and (max-width: 767px) {
      -webkit-transform: translateY(-0.5rem);
      transform: translateY(-0.5rem);
    }
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
    @media screen and (max-width: 767px) {
      -webkit-transform: translateY(-0.5rem);
      transform: translateY(-0.5rem);
    }
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* header {
  width: 100%;
  z-index: 999;
  margin: 0;
  position: absolute;
  left: 4rem;
  top: 3rem;
  width: 8.5rem;
}
@media screen and (max-width: 767px) {
  header {
    width: 6rem;
    height: 4rem;
    left: 1rem;
    top: 1rem;
  }
}
header .header-inner #logo img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
  -webkit-filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.8));
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.8));
} */
footer {
  width: 100%;
}
footer .footer-inner {
  background-image: url('../img/footer_back.jpg');
  background-size: cover;
  background-position: center;
  padding: 4rem 0 2rem;
}
@media screen and (max-width: 767px) {
  footer .footer-inner {
    padding: 4rem 1rem 1rem;
  }
}
footer .footer-inner > figure {
  width: 10rem;
  height: 10rem;
  margin: auto;
}
footer .footer-inner > figure img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
  -webkit-filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.8));
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.8));
}
footer .footer-inner > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 2rem auto 3rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  row-gap: 0.5rem;
}
footer .footer-inner > ul li {
  border-left: 0.1rem solid #fff;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  footer .footer-inner > ul li {
    font-size: 0.8rem;
    width: 50%;
    text-align: center;
    margin-bottom: 1rem;
    border-left: none;
  }
}
@media screen and (max-width: 767px) {
  footer .footer-inner > ul li:nth-child(odd) {
    border-right: 0.1rem solid #fff;
  }
}
footer .footer-inner > ul li:last-of-type {
  border-right: 0.1rem solid #fff;
}
@media screen and (max-width: 767px) {
  footer .footer-inner > ul li:last-of-type {
    border: none;
  }
}
footer .footer-inner > ul li a {
  padding: 0 1.5rem;
}
@media screen and (max-width: 767px) {
  footer .footer-inner > ul li a {
    padding: 0.3rem 0;
    display: block;
    width: 100%;
    height: 100%;
  }
}
footer .footer-inner p.copy {
  color: #fff;
  opacity: 0.6;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  footer .footer-inner p.copy {
    font-size: 0.8em;
  }
}
body#top {
  width: 100%;
  min-width: 375px;
  overflow: hidden;
  height: auto;
  margin: auto;
  font-family:
    'Shippori Mincho', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', '游明朝',
    'Yu Mincho', 'ＭＳ 明朝', 'MS Mincho', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #000;
  position: relative;
}
body#top img {
  width: 100%;
  vertical-align: bottom;
}
body#top main #mv {
  background: #000;
  height: 100vh;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #mv {
    height: 65rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #mv {
    height: 90vh;
  }
}
body#top main #mv:after {
  content: '';
  height: 100%;
  width: 100%;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(0, 0, 0)),
    color-stop(20%, rgba(255, 255, 255, 0))
  );
  background: linear-gradient(
    360deg,
    rgb(0, 0, 0) 0%,
    rgba(255, 255, 255, 0) 20%
  );
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  body#top main #mv:after {
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(rgb(0, 0, 0)),
      color-stop(5%, rgba(255, 255, 255, 0))
    );
    background: linear-gradient(
      360deg,
      rgb(0, 0, 0) 0%,
      rgba(255, 255, 255, 0) 5%
    );
  }
}
body#top main #mv .mv_ttl {
  position: absolute;
  z-index: 2;
  left: 8rem;
  top: 0;
  bottom: 0;
  margin: auto;
  letter-spacing: 0.2rem;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (max-width: 767px) {
  body#top main #mv .mv_ttl {
    left: 1rem;
    top: 8rem;
    bottom: auto;
  }
}
body#top main #mv .mv_ttl h2 {
  opacity: 0;
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: 2rem;
  -webkit-animation: load-fadeIn 0.6s ease-out 0.6s forwards;
  animation: load-fadeIn 0.6s ease-out 0.6s forwards;
}
@media screen and (max-width: 767px) {
  body#top main #mv .mv_ttl h2 {
    font-size: 1.7rem;
    margin-bottom: 2rem;
  }
}
body#top main #mv .mv_ttl p {
  opacity: 0;
  font-size: 1.1rem;
  line-height: 2;
  -webkit-animation: load-fadeIn 0.6s ease-out 1.2s forwards;
  animation: load-fadeIn 0.6s ease-out 1.2s forwards;
}
@media screen and (max-width: 767px) {
  body#top main #mv .mv_ttl p {
    font-size: 0.9rem;
  }
}
body#top main #mv .mv_visual {
  opacity: 0;
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  -webkit-animation: load-fadeIn 0.6s ease-out 0.3s forwards;
  animation: load-fadeIn 0.6s ease-out 0.3s forwards;
}
@media screen and (max-width: 767px) {
  body#top main #mv .mv_visual {
    height: 25rem;
    bottom: 0;
  }
}
body#top main #mv .mv_visual img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  body#top main #mv .mv_visual img {
    -o-object-position: bottom;
    object-position: bottom;
  }
}
body#top main .menu > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 3rem auto 3rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 8rem;
  row-gap: 0.5rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main .menu > ul {
    padding: 0 4rem;
    margin: 3rem auto 1rem;
    row-gap: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main .menu > ul {
    padding: 0 1rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    row-gap: 0;
  }
}
body#top main .menu > ul li {
  border-left: 0.1rem solid #fff;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  body#top main .menu > ul li {
    font-size: 0.8rem;
    width: 50%;
    text-align: center;
    margin-bottom: 1rem;
    border-left: none;
  }
}
@media screen and (max-width: 767px) {
  body#top main .menu > ul li:nth-child(odd) {
    border-left: 0.1rem solid #fff;
    border-right: 0.1rem solid #fff;
  }
}
@media screen and (max-width: 767px) {
  body#top main .menu > ul li:nth-child(2n) {
    border-right: 0.1rem solid #fff;
  }
}
body#top main .menu > ul li:last-of-type {
  border-right: 0.1rem solid #fff;
}
body#top main .menu > ul li a {
  padding: 0 1.5rem;
}
@media screen and (max-width: 767px) {
  body#top main .menu > ul li a {
    padding: 0.3rem 0;
    display: block;
    width: 100%;
    height: 100%;
  }
}
body#top main #mattya {
  background-image: url('../img/black_back.jpg');
  background-size: cover;
  background-position: top center;
  padding: 10rem 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  body#top main #mattya {
    padding: 4rem 0 6rem;
  }
}
body#top main #mattya:after {
  content: '';
  height: 100%;
  width: 100%;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgb(0, 0, 0)),
    color-stop(10%, rgba(255, 255, 255, 0))
  );
  background: linear-gradient(
    180deg,
    rgb(0, 0, 0) 0%,
    rgba(255, 255, 255, 0) 10%
  );
  pointer-events: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  body#top main #mattya:after {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgb(0, 0, 0)),
      color-stop(5%, rgba(255, 255, 255, 0))
    );
    background: linear-gradient(
      180deg,
      rgb(0, 0, 0) 0%,
      rgba(255, 255, 255, 0) 5%
    );
  }
}
body#top main #mattya .mattya_ttl {
  text-align: center;
  position: relative;
  z-index: 2;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_ttl {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #mattya .mattya_ttl .gradation-round {
  top: -8rem;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  width: 6rem;
  height: 6rem;
  -webkit-filter: blur(3rem);
  filter: blur(3rem);
  opacity: 0.7;
}
body#top main #mattya .mattya_ttl span.en {
  font-size: 6rem;
  color: rgba(143, 160, 95, 0.3);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -4rem;
  margin: auto;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_ttl span.en {
    font-size: 2.6rem;
    white-space: nowrap;
    top: -2rem;
  }
}
body#top main #mattya .mattya_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_ttl h2 {
    font-size: 2rem;
  }
}
body#top main #mattya .mattya_ttl h2:after {
  content: '';
  margin: auto;
  background-image: url('../img/vector/ttl_line.svg');
  background-size: contain;
  background-position: center;
  height: 2rem;
  width: 18rem;
  display: block;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_ttl h2:after {
    margin-top: 1rem;
    height: 1rem;
    width: 12rem;
  }
}
body#top main #mattya p.heading {
  font-size: 1.2rem;
  line-height: 3;
  text-align: center;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  body#top main #mattya p.heading {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0 1rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #mattya .mattya_contents-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap {
    margin-top: 8rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 1rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont p.en {
  position: absolute;
  z-index: 4;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #72a003;
  white-space: nowrap;
}
body#top main #mattya .mattya_contents-wrap .mattya-cont p.en span.no {
  font-style: italic;
  font-size: 4rem;
  margin-right: 2rem;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont p.en span.no {
    font-size: 2rem;
    margin-right: 1rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont p.en span.txt {
  font-size: 1.1rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont p.en span.txt {
    font-size: 0.85rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .imgarea {
  width: 50%;
  height: 28rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont .imgarea {
    width: 100%;
    height: 16rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .imgarea .front {
  position: absolute;
  -webkit-filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.8));
  filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.8));
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .imgarea .front img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .imgarea .back {
  height: 100%;
  overflow: hidden;
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .imgarea .back img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(0.5rem);
  filter: blur(0.5rem);
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .txtarea {
  width: 50%;
  height: 25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont .txtarea {
    width: 100%;
    height: auto;
    margin-bottom: 3rem;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont
  .txtarea
  .vertical-text {
  margin: auto;
  height: 100%;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont
    .txtarea
    .vertical-text {
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont
  .txtarea
  .vertical-text
  span.small {
  letter-spacing: -0.2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont
    .txtarea
    .vertical-text
    span.small {
    letter-spacing: normal;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .txtarea h3 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.4rem;
  margin-left: 2rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont .txtarea h3 {
    font-size: 1.6rem;
    margin: 0 0 1rem;
    letter-spacing: 0.2rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont .txtarea p {
  letter-spacing: 0.2rem;
  margin: 0 1rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont .txtarea p {
    font-size: 0.9rem;
    margin: 0.5rem 0;
    line-height: 1.8;
    letter-spacing: 0;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.made {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.made {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.made .gradation-round {
  left: 27rem;
  top: -4.5rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.made
    .gradation-round {
    left: auto;
    right: 0;
    top: 12rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.made p.en {
  left: 25rem;
  top: -1rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.made p.en {
    left: 1rem;
    top: -3rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.made .imgarea {
  width: 80%;
  margin: 0;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.made .imgarea {
    width: 100%;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.made .imgarea .back {
  width: 60%;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.made .imgarea .back {
    width: 90%;
    margin: 0 auto 0 0;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.made .imgarea .front {
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 24rem;
  height: 18rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.made
    .imgarea
    .front {
    width: 18rem;
    height: 12rem;
    bottom: auto;
    top: -1rem;
    right: -1rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.grades {
  margin-top: 16rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.grades {
    margin-top: 10rem;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.grades
  .gradation-round {
  left: 40rem;
  top: -11rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.grades
    .gradation-round {
    left: 0rem;
    top: -3rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.grades p.en {
  left: 27rem;
  top: -6rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.grades p.en {
    left: 1rem;
    top: -3rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.grades .imgarea .back {
  width: 80%;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.grades
    .imgarea
    .back {
    width: 90%;
    margin: 0 0 0 auto;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.grades
  .imgarea
  .front {
  left: 0;
  top: -8rem;
  width: 28rem;
  height: 18rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.grades
    .imgarea
    .front {
    width: 18rem;
    height: 12rem;
    bottom: auto;
    top: -1rem;
    left: 0;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.difference {
  margin-top: 20rem;
  height: 35rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.difference {
    margin-top: 8rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    height: auto;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .gradation-round {
  left: 40rem;
  top: -11rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .gradation-round {
    left: auto;
    right: 0;
    top: 2rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.difference p.en {
  right: 17rem;
  top: -8rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.difference p.en {
    left: 1rem;
    right: 0;
    top: -2.5rem;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.difference .txtarea {
  height: 28rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.difference .txtarea {
    height: auto;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .txtarea
  h3 {
  white-space: nowrap;
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .txtarea
  .vertical-text
  dl {
  background-image: url('../img/mattya_fream.png');
  background-size: 100% 100%;
  background-position: center;
  padding: 1.5rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .txtarea
    .vertical-text
    dl {
    background-image: url('../img/mattya_fream_w.png');
    padding: 1.5rem 1rem;
    margin: 1rem 0;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .txtarea
  .vertical-text
  dl
  > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 0 0.5rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .txtarea
    .vertical-text
    dl
    > div {
    margin: 0;
    font-size: 0.85rem;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .txtarea
    .vertical-text
    dl
    > div
    + div {
    margin: 0.5rem 0 0;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .txtarea
  .vertical-text
  dl
  > div
  dt {
  white-space: nowrap;
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .txtarea
  .vertical-text
  dl
  > div
  dt
  span {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  display: inline-block;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .txtarea
    .vertical-text
    dl
    > div
    dt
    span {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .txtarea
  .vertical-text
  dl
  > div
  dd {
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .txtarea
    .vertical-text
    dl
    > div
    dd {
    letter-spacing: 0;
  }
}
body#top main #mattya .mattya_contents-wrap .mattya-cont.difference .imgarea {
  top: -10rem;
}
@media screen and (max-width: 767px) {
  body#top main #mattya .mattya_contents-wrap .mattya-cont.difference .imgarea {
    top: 0;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .imgarea
  .back {
  width: 90%;
  height: 100%;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .imgarea
    .back {
    margin: auto;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .imgarea
  .front {
  width: 20rem;
  height: 14rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .imgarea
    .front {
    width: 12rem;
    height: 8rem;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .imgarea
  .front.top {
  right: 3rem;
  top: -2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .imgarea
    .front.top {
    right: 0;
    top: -1rem;
  }
}
body#top
  main
  #mattya
  .mattya_contents-wrap
  .mattya-cont.difference
  .imgarea
  .front.bottom {
  left: 8rem;
  bottom: -6rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #mattya
    .mattya_contents-wrap
    .mattya-cont.difference
    .imgarea
    .front.bottom {
    left: 0;
    bottom: -1rem;
  }
}
body#top main #charm {
  background-image: url('../img/charm_back.jpg');
  background-size: cover;
  background-position: center;
  padding: 10rem 8rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #charm {
    padding: 10rem 4rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #charm {
    padding: 6rem 1rem;
    background-position: 40% 0;
  }
}
body#top main #charm .charm_ttl {
  text-align: center;
  position: relative;
}
body#top main #charm .charm_ttl span.en {
  font-size: 8.5rem;
  color: rgba(255, 255, 255, 0.06);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -4rem;
  margin: auto;
  line-height: 0.9;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_ttl span.en {
    font-size: 2.6rem;
    top: -2rem;
  }
}
body#top main #charm .charm_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_ttl h2 {
    font-size: 2rem;
  }
}
body#top main #charm .charm_ttl h2:after {
  content: '';
  margin: auto;
  background-image: url('../img/vector/ttl_line.svg');
  background-size: contain;
  background-position: center;
  height: 2rem;
  width: 18rem;
  display: block;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_ttl h2:after {
    margin-top: 1rem;
    height: 1rem;
    width: 12rem;
  }
}
body#top main #charm p.heading {
  font-size: 1.2rem;
  line-height: 3;
  text-align: center;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #charm p.heading {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #charm .charm_contents-wrap {
  width: 100%;
  margin-top: 4rem;
}
body#top main #charm .charm_contents-wrap .charm-cont {
  position: relative;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #charm .charm_contents-wrap .charm-cont > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
body#top main #charm .charm_contents-wrap .charm-cont > ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 30%;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont > ul li {
    width: 100%;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont > ul li:last-of-type {
    margin-bottom: 0;
  }
}
body#top main #charm .charm_contents-wrap .charm-cont > ul li .imgarea {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont > ul li .imgarea {
    width: 12rem;
    height: 12rem;
    margin: auto;
  }
}
body#top main #charm .charm_contents-wrap .charm-cont > ul li .imgarea img {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
body#top main #charm .charm_contents-wrap .charm-cont > ul li .imgarea p.no {
  background-image: url('../img/vector/leave.svg');
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -2rem;
  height: 5rem;
  width: 5.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont > ul li .imgarea p.no {
    height: 3rem;
    width: 3.5rem;
  }
}
body#top
  main
  #charm
  .charm_contents-wrap
  .charm-cont
  > ul
  li
  .imgarea
  p.no
  > span.en {
  font-style: italic;
  font-size: 1.9rem;
  padding: 0 0.5rem 0.5rem 0;
  font-weight: 400;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #charm
    .charm_contents-wrap
    .charm-cont
    > ul
    li
    .imgarea
    p.no
    > span.en {
    font-size: 1.1rem;
    padding: 0 0 0.5rem 0;
  }
}
body#top main #charm .charm_contents-wrap .charm-cont > ul li .txtarea {
  margin-top: 3rem;
}
body#top main #charm .charm_contents-wrap .charm-cont > ul li .txtarea h3 {
  font-size: 1.6rem;
  text-align: center;
  white-space: nowrap;
  position: relative;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  body#top main #charm .charm_contents-wrap .charm-cont > ul li .txtarea h3 {
    font-size: 1.2rem;
  }
}
body#top
  main
  #charm
  .charm_contents-wrap
  .charm-cont
  > ul
  li
  .txtarea
  h3:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1.5rem;
  height: 0.1rem;
  background-color: #51a601;
}
body#top main #about {
  padding: 8rem 13rem 30rem;
  position: relative;
  background-image: url('../img/about_back.jpg');
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #about {
    padding: 8rem 6rem 16rem;
    min-height: 80rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #about {
    padding: 4rem 1rem 6rem;
    min-height: 75rem;
  }
}
body#top main #about:after,
body#top main #about:before {
  content: '';
  position: absolute;
}
body#top main #about:after {
  width: 20rem;
  height: 20rem;
  background-image: url('../img/about_logo.png');
  background-size: cover;
  background-position: center;
  top: 5rem;
  right: 5rem;
}
@media screen and (max-width: 767px) {
  body#top main #about:after {
    top: 3rem;
    right: 1rem;
    width: 15rem;
    height: 15rem;
  }
}
body#top main #about:before {
  width: 10rem;
  height: 40rem;
  background-color: #0e2f05;
  left: 0;
  top: 15rem;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 767px) {
  body#top main #about:before {
    display: none;
  }
}
body#top main #about .about_ttl {
  text-align: center;
  position: absolute;
  z-index: 3;
  right: 23rem;
  top: 10rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_ttl {
    position: relative;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
body#top main #about .about_ttl span.en {
  font-size: 1rem;
  color: #fff;
  line-height: 0.9;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_ttl span.en {
    white-space: nowrap;
  }
}
body#top main #about .about_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_ttl h2 {
    font-size: 2rem;
  }
}
body#top main #about .about_contents-wrap {
  width: 100%;
  margin: 4rem auto 0;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_contents-wrap {
    margin: 2rem auto 0;
  }
}
body#top main #about .about_contents-wrap .about-cont {
  position: relative;
  z-index: 2;
}
body#top main #about .about_contents-wrap .about-cont .imgarea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 40rem;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_contents-wrap .about-cont .imgarea {
    height: 15rem;
    width: 12rem;
  }
}
body#top main #about .about_contents-wrap .about-cont .imgarea > div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_contents-wrap .about-cont .imgarea > div {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
}
body#top main #about .about_contents-wrap .about-cont .imgarea > div img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top
  main
  #about
  .about_contents-wrap
  .about-cont
  .imgarea
  > div:nth-child(2) {
  top: 8rem;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #about
    .about_contents-wrap
    .about-cont
    .imgarea
    > div:nth-child(2) {
    position: absolute;
    height: 15rem;
    width: 12rem;
    right: 0;
    top: 4rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #about .about_contents-wrap .about-cont .txtarea {
  position: absolute;
  bottom: -22rem;
  height: 27rem;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #about .about_contents-wrap .about-cont .txtarea {
    position: relative;
    bottom: 0;
    height: auto;
    margin-top: 6rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #about
    .about_contents-wrap
    .about-cont
    .txtarea
    .vertical-text {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
body#top
  main
  #about
  .about_contents-wrap
  .about-cont
  .txtarea
  .vertical-text
  p.txt {
  line-height: 2;
  margin: 0 1rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #about
    .about_contents-wrap
    .about-cont
    .txtarea
    .vertical-text
    p.txt {
    height: 24rem;
    width: auto;
    margin: 0 0.5rem;
  }
}
body#top
  main
  #about
  .about_contents-wrap
  .about-cont
  .txtarea
  .vertical-text
  p.txt
  + p.txt {
  margin: 0 1rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #about
    .about_contents-wrap
    .about-cont
    .txtarea
    .vertical-text
    p.txt
    + p.txt {
    margin: 0 0.5rem;
  }
}
body#top
  main
  #about
  .about_contents-wrap
  .about-cont
  .txtarea
  .vertical-text
  .btn {
  margin: auto 3rem 0 0;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #about
    .about_contents-wrap
    .about-cont
    .txtarea
    .vertical-text
    .btn {
    margin: 3rem auto 0;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #about
    .about_contents-wrap
    .about-cont
    .txtarea
    .vertical-text
    .btn.fream.vertical {
    background-image: url('../img/btn_waku_w.png');
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    width: 17rem;
    height: 3.5rem;
  }
}
body#top main #movie {
  padding: 10rem 13rem;
  position: relative;
  background-image: url('../img/black_back.jpg');
  background-size: cover;
  background-position: left top;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #movie {
    padding: 8rem 6rem 8rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #movie {
    padding: 5rem 1rem 6rem;
  }
}
body#top main #movie p.en {
  font-size: 11rem;
  color: rgba(255, 255, 255, 0.1);
  position: absolute;
  z-index: 1;
  left: 4rem;
  right: 0;
  top: 0;
  margin: auto;
  letter-spacing: -0.1rem;
}
@media screen and (max-width: 767px) {
  body#top main #movie p.en {
    font-size: 5rem;
    top: 1rem;
    left: 1rem;
  }
}
body#top main #movie .movie_ttl {
  text-align: center;
  position: absolute;
  z-index: 3;
  left: 10rem;
  top: 10rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #movie .movie_ttl {
    left: 6rem;
    top: 8rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #movie .movie_ttl {
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
  }
}
body#top main #movie .movie_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  z-index: 3;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media screen and (max-width: 767px) {
  body#top main #movie .movie_ttl h2 {
    font-size: 2rem;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
  }
}
body#top main #movie .movie_ttl .gradation-round {
  top: -8rem;
  left: -5rem;
  top: 0;
  right: 0;
  margin: auto;
  width: 8rem;
  height: 8rem;
  -webkit-filter: blur(4rem);
  filter: blur(4rem);
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  body#top main #movie .movie_ttl .gradation-round {
    top: 0;
    left: -10rem;
  }
}
body#top main #movie p.txt {
  line-height: 2;
}
body#top main #movie .movie_contents-wrap {
  width: 70%;
  margin: 0 auto 0;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #movie .movie_contents-wrap {
    width: 100%;
    margin: 3rem auto 0;
  }
}
body#top main #movie .movie_contents-wrap .movie-cont {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 30rem;
  margin: 3rem auto 0;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  body#top main #movie .movie_contents-wrap .movie-cont {
    height: 15rem;
  }
}
body#top main #movie .movie_contents-wrap .movie-cont img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top main #flow {
  background-image: url('../img/green_back.jpg');
  background-size: cover;
  background-position: top right;
  padding: 10rem 10rem 6rem;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #flow {
    padding: 10rem 6rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #flow {
    padding: 5rem 1rem 6rem;
  }
}
body#top main #flow:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  height: 20%;
  width: 100%;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(0, 0, 0)),
    color-stop(5%, rgb(0, 0, 0)),
    to(rgba(255, 255, 255, 0))
  );
  background: linear-gradient(
    360deg,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 5%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 767px) {
  body#top main #flow:after {
    height: 5%;
  }
}
body#top main #flow .flow_ttl {
  text-align: center;
  position: relative;
  z-index: 2;
}
body#top main #flow .flow_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #flow .flow_ttl h2 {
    font-size: 2rem;
  }
}
body#top main #flow .flow_ttl h2:after {
  content: '';
  margin: auto;
  background-image: url('../img/vector/ttl_line.svg');
  background-size: contain;
  background-position: center;
  height: 2rem;
  width: 18rem;
  display: block;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  body#top main #flow .flow_ttl h2:after {
    margin-top: 1rem;
    height: 1rem;
    width: 12rem;
  }
}
body#top main #flow p.heading {
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  body#top main #flow p.heading {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0 1rem;
    margin-top: 1rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #flow .flow_contents-wrap {
  width: 100%;
  margin-top: 4rem;
}
body#top main #flow .flow_contents-wrap .flow-cont {
  position: relative;
  z-index: 2;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  padding: 2rem 8rem;
  margin-bottom: 4rem;
  position: relative;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #flow .flow_contents-wrap .flow-cont > ul li {
    padding: 2rem 2rem;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    margin-bottom: 2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li:after {
  content: '';
  position: absolute;
  width: 2rem;
  height: 1.5rem;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -1.3rem;
  background-image: url('../img/flow_triangle.png');
  background-size: contain;
  background-position: center;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li:last-of-type {
  margin-bottom: 0;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li:last-of-type:after {
  display: none;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li .imgarea {
  width: 30%;
  height: 10rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #flow .flow_contents-wrap .flow-cont > ul li .imgarea {
    width: 100%;
    margin-top: 1rem;
  }
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li .imgarea img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li .txtarea {
  width: 65%;
}
@media screen and (max-width: 767px) {
  body#top main #flow .flow_contents-wrap .flow-cont > ul li .txtarea {
    width: 100%;
  }
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li .txtarea p.txt {
  width: 100%;
  margin-top: 0;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li .txtarea .lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
body#top
  main
  #flow
  .flow_contents-wrap
  .flow-cont
  > ul
  li
  .txtarea
  .lead
  p.step {
  font-size: 2rem;
  color: #b39852;
  line-height: 2;
  position: relative;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #flow
    .flow_contents-wrap
    .flow-cont
    > ul
    li
    .txtarea
    .lead
    p.step {
    font-size: 1.8rem;
  }
}
body#top
  main
  #flow
  .flow_contents-wrap
  .flow-cont
  > ul
  li
  .txtarea
  .lead
  p.step
  span {
  font-size: 0.9rem;
  display: block;
  position: absolute;
  top: -0.5rem;
}
body#top main #flow .flow_contents-wrap .flow-cont > ul li .txtarea .lead h3 {
  font-size: 1.6rem;
  text-align: center;
  position: relative;
  padding: 0 0 0 2rem;
  margin: 0 0 0 2rem;
  font-weight: 500;
  color: #b39852;
}
@media screen and (max-width: 767px) {
  body#top main #flow .flow_contents-wrap .flow-cont > ul li .txtarea .lead h3 {
    font-size: 1.4rem;
    padding: 0 0 0 1.5rem;
    margin: 0 0 0 1.5rem;
  }
}
body#top
  main
  #flow
  .flow_contents-wrap
  .flow-cont
  > ul
  li
  .txtarea
  .lead
  h3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 0.1rem;
  height: 80%;
  background-color: #b39852;
}
body#top main #hexagonal {
  background-image: url('../img/hexagonal_back.jpg');
  background-size: cover;
  background-position: top left;
  padding: 10rem 0 0;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #hexagonal {
    padding: 10rem 0 0;
  }
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal {
    padding: 5rem 1rem 6rem;
  }
}
body#top main #hexagonal .hexagonal_ttl {
  text-align: center;
  position: relative;
  z-index: 2;
}
body#top main #hexagonal .hexagonal_ttl .gradation-round {
  top: 1rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 18rem;
  height: 18rem;
  -webkit-filter: blur(4rem);
  filter: blur(4rem);
  opacity: 0.4;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_ttl .gradation-round {
    width: 10rem;
    height: 10rem;
    opacity: 0.5;
    top: 0;
  }
}
body#top main #hexagonal .hexagonal_ttl h2 {
  font-weight: 500;
  width: 27rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
  margin: 0 auto 3rem;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_ttl h2 {
    width: 18rem;
  }
}
body#top main #hexagonal .hexagonal_ttl h2 img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
body#top main #hexagonal p.heading {
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal p.heading {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0 1rem;
    margin-top: 1rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap {
  width: 100%;
  margin-top: 6rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #hexagonal .hexagonal_contents-wrap {
    margin: 6rem auto;
  }
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap {
    margin-top: 5rem;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap h2 {
  position: relative;
  text-align: center;
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
body#top main #hexagonal .hexagonal_contents-wrap h2 span.gradient {
  font-size: 3.2rem;
  background: linear-gradient(
    120deg,
    rgb(149, 140, 193) 0%,
    rgb(58, 121, 157) 25%,
    rgb(84, 155, 85) 55%,
    rgb(154, 179, 74) 73%,
    rgb(193, 176, 90) 84%,
    rgb(119, 179, 131) 100%
  );
  font-weight: 400;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap h2 span.gradient {
    font-size: 2.8rem;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap h2 span.ruby {
  position: absolute;
  right: 0.5rem;
  top: -0.5rem;
  color: #bfb15d;
  font-size: 0.95rem;
}
body#top main #hexagonal .hexagonal_contents-wrap p.subttl {
  font-size: 1.4rem;
  color: #6a6a6a;
  text-align: center;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap p.subttl {
    font-size: 1rem;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 6rem auto 0;
  padding: 0 10rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont {
    padding: 0 4rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont {
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .chart {
  width: 28rem;
  position: absolute;
  right: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .chart {
    width: 80%;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .chart img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .imgarea {
  width: 50%;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .imgarea {
    width: 60%;
    padding: 0;
    margin: 0 0 1rem;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .imgarea img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 95%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont
    .imgarea
    img {
    width: 100%;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .txtarea {
  width: 50%;
  padding: 0 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .txtarea {
    width: 100%;
    padding: 0;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont .txtarea h3 {
  padding: 0 0 0.5rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont
    .txtarea
    h3 {
    margin-bottom: 1rem;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont
  .txtarea
  h3
  span.gradient {
  font-size: 2.4rem;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont
    .txtarea
    h3
    span.gradient {
    font-size: 1.8rem;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont
  .txtarea
  h3
  span.en {
  font-size: 1.1rem;
  margin-left: 1rem;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont
    .txtarea
    h3
    span.en {
    font-size: 1rem;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont
  .txtarea
  .btn {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont
    .txtarea
    .btn {
    margin: 2rem auto 0;
  }
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont.komakage {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont.komakage {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.komakage
  .chart {
  right: 25%;
  top: -6rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont.komakage
    .chart {
    top: -13%;
    right: 0;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.komakage
  .txtarea
  h3 {
  border-bottom: 0.1rem solid #918437;
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.komakage
  .txtarea
  h3
  span.gradient {
  background: linear-gradient(
    91deg,
    rgb(38, 144, 71) 0%,
    rgb(104, 165, 69) 30%,
    rgb(145, 132, 55) 61%,
    rgb(103, 142, 72) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.komakage
  .txtarea
  h3
  span.en {
  color: #918437;
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont.housyun {
  margin: 10rem auto 0;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont.housyun {
    margin: 8rem auto 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.housyun
  .chart {
  left: 25%;
  top: -6rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont.housyun
    .chart {
    top: -13%;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont.housyun
    .imgarea {
    margin: 0 0 1rem auto;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.housyun
  .txtarea
  h3 {
  border-bottom: 0.1rem solid #67b66d;
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.housyun
  .txtarea
  h3
  span.gradient {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgb(158, 226, 176)),
    color-stop(30%, rgb(37, 163, 43)),
    color-stop(61%, rgb(109, 175, 68)),
    color-stop(82%, rgb(142, 169, 68)),
    to(rgb(179, 173, 0))
  );
  background: linear-gradient(
    90deg,
    rgb(158, 226, 176) 0%,
    rgb(37, 163, 43) 30%,
    rgb(109, 175, 68) 61%,
    rgb(142, 169, 68) 82%,
    rgb(179, 173, 0) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.housyun
  .txtarea
  h3
  span.en {
  color: #67b66d;
}
body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont.asatsuyu {
  margin: 10rem auto 0;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .hexagonal_contents-wrap .hexagonal-cont.asatsuyu {
    margin: 8rem auto 0;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.asatsuyu
  .chart {
  right: 25%;
  top: -6rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .hexagonal_contents-wrap
    .hexagonal-cont.asatsuyu
    .chart {
    top: -13%;
    right: 0;
  }
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.asatsuyu
  .txtarea
  h3 {
  border-bottom: 0.1rem solid #1999ba;
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.asatsuyu
  .txtarea
  h3
  span.gradient {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgb(146, 145, 199)),
    color-stop(30%, rgb(91, 139, 200)),
    color-stop(52%, rgb(25, 153, 186)),
    color-stop(79%, rgb(139, 177, 172)),
    to(rgb(165, 195, 172))
  );
  background: linear-gradient(
    90deg,
    rgb(146, 145, 199) 0%,
    rgb(91, 139, 200) 30%,
    rgb(25, 153, 186) 52%,
    rgb(139, 177, 172) 79%,
    rgb(165, 195, 172) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
body#top
  main
  #hexagonal
  .hexagonal_contents-wrap
  .hexagonal-cont.asatsuyu
  .txtarea
  h3
  span.en {
  color: #1999ba;
}
body#top main #hexagonal .brand_contents-wrap {
  width: 100%;
  padding: 10rem 4.5rem;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #hexagonal .brand_contents-wrap {
    padding: 10rem 3rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap {
    padding: 6rem 0 0;
  }
}
body#top main #hexagonal .brand_contents-wrap:before {
  content: '';
  position: absolute;
  left: -0.1rem;
  top: -0.3rem;
  background-image: url('../img/brand_back.png');
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap:before {
    display: none;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto 0;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont .imgarea {
  width: 50%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont .imgarea {
    width: 100%;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont .imgarea img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
body#top main #hexagonal .brand_contents-wrap .brand-cont .txtarea {
  position: absolute;
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont .txtarea {
    width: 100%;
    position: relative;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont .txtarea h2 {
  margin-bottom: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.3;
  margin: 0 auto 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
body#top
  main
  #hexagonal
  .brand_contents-wrap
  .brand-cont
  .txtarea
  h2
  span.gradient {
  font-size: 2.6rem;
  font-weight: 400;
  display: inline-block;
  margin: auto;
  background: linear-gradient(
    190deg,
    rgb(149, 140, 193) 0%,
    rgb(58, 121, 157) 25%,
    rgb(84, 155, 85) 55%,
    rgb(154, 179, 74) 73%,
    rgb(193, 176, 90) 84%,
    rgb(119, 179, 131) 100%
  );
  font-weight: 400;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #hexagonal
    .brand_contents-wrap
    .brand-cont
    .txtarea
    h2
    span.gradient {
    font-size: 1.8rem;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont .txtarea p.txt {
  margin: 0 auto;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont .txtarea p.txt {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont.design .imgarea {
  margin: 0.2rem 0 0 auto;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.design .imgarea {
    margin: 0 auto;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont.design .txtarea {
  left: 6%;
  top: 8%;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.design .txtarea {
    left: 3%;
    top: 8%;
  }
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.design .txtarea {
    padding: 0 0 1rem;
    width: 100%;
    left: 0;
    top: 0;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: -0.5rem;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku {
    margin-top: 4rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku .imgarea {
  margin: 0 auto 0 0;
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku .imgarea {
    width: 100%;
    margin: 0 auto;
  }
}
body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku .imgarea img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku .txtarea {
  right: 6%;
  top: 8%;
  padding: 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku .txtarea {
    right: 3%;
    top: 8%;
  }
}
@media screen and (max-width: 767px) {
  body#top main #hexagonal .brand_contents-wrap .brand-cont.rokkaku .txtarea {
    padding: 0 0 1rem;
    width: 100%;
    right: 0;
    top: 0;
  }
}
body#top main #product {
  background-image: url('../img/product_back.jpg');
  background-size: cover;
  background-position: top left;
  padding: 10rem 12rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #product {
    padding: 10rem 6rem;
  }
}
@media screen and (max-width: 767px) {
  body#top main #product {
    padding: 5rem 1rem 6rem;
  }
}
body#top main #product .product_ttl {
  text-align: center;
  position: relative;
}
body#top main #product .product_ttl span.en {
  font-size: 8.5rem;
  color: rgba(255, 255, 255, 0.15);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -4rem;
  margin: auto;
  line-height: 0.9;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_ttl span.en {
    font-size: 2.8rem;
    top: -1rem;
  }
}
body#top main #product .product_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
  color: #000;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_ttl h2 {
    font-size: 2rem;
  }
}
body#top main #product p.heading {
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  color: #000;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #product p.heading {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0 1rem;
    margin-top: 1rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #product .product_contents-wrap {
  width: 100%;
  margin-top: 8rem;
  background-color: #fff;
  padding: 6rem 3rem 6rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_contents-wrap {
    padding: 4rem 1rem;
    margin-top: 7rem;
  }
}
body#top main #product .product_contents-wrap h3 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -5.5rem;
  letter-spacing: 0.5rem;
  z-index: 3;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0.5rem;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_contents-wrap h3 {
    font-size: 1.4rem;
    top: -5rem;
  }
}
body#top main #product .product_contents-wrap h3:before {
  content: '';
  width: 0.06rem;
  height: 89%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #000;
}
body#top main #product .product_contents-wrap .product-cont {
  position: relative;
}
body#top main #product .product_contents-wrap .product-cont .product-cont-ttl {
  background-image: url('../img/product_line.png');
  background-size: 150% auto;
  background-position: center;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #product
    .product_contents-wrap
    .product-cont
    .product-cont-ttl {
    background-size: 280% auto;
    margin-bottom: 1.5rem;
  }
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  .product-cont-ttl.rokkaku {
  background-size: 170% auto;
  background-position: center;
  margin-bottom: 1.5rem;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #product
    .product_contents-wrap
    .product-cont
    .product-cont-ttl.rokkaku {
    background-size: 280% auto;
    margin-bottom: 1.5rem;
    background-repeat: no-repeat;
  }
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  .product-cont-ttl
  h4 {
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 0;
  position: relative;
  letter-spacing: 0.1rem;
  z-index: 3;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #product
    .product_contents-wrap
    .product-cont
    .product-cont-ttl
    h4 {
    font-size: 1.2rem;
  }
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  .product-cont-ttl
  h4
  span.en {
  font-size: 0.9rem;
  text-align: center;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgb(149, 140, 193)),
    color-stop(25%, rgb(58, 121, 157)),
    color-stop(53%, rgb(84, 155, 85)),
    color-stop(73%, rgb(154, 179, 74)),
    color-stop(84%, rgb(193, 176, 90)),
    to(rgb(119, 179, 131))
  );
  background: linear-gradient(
    90deg,
    rgb(149, 140, 193) 0%,
    rgb(58, 121, 157) 25%,
    rgb(84, 155, 85) 53%,
    rgb(154, 179, 74) 73%,
    rgb(193, 176, 90) 84%,
    rgb(119, 179, 131) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #product
    .product_contents-wrap
    .product-cont
    .product-cont-ttl
    h4
    span.en {
    font-size: 0.7rem;
  }
}
body#top main #product .product_contents-wrap .product-cont > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_contents-wrap .product-cont > ul {
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
}
body#top main #product .product_contents-wrap .product-cont > ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 23%;
  margin: 0 1rem 2rem 0;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_contents-wrap .product-cont > ul li {
    width: 48%;
    margin: 0 0 1rem;
  }
}
body#top main #product .product_contents-wrap .product-cont > ul li .item {
  width: 100%;
  height: 15rem;
  position: relative;
  z-index: 3;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_contents-wrap .product-cont > ul li .item {
    height: 10rem;
  }
}
body#top main #product .product_contents-wrap .product-cont > ul li .item img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #product
    .product_contents-wrap
    .product-cont
    > ul
    li
    .detail
    p.tag {
    min-height: 1.5rem;
    font-size: 0.75rem;
  }
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag
  span {
  text-align: center;
  width: 4rem;
  line-height: 2;
  border-radius: 1rem;
  margin-right: 0.5rem;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag
  span.dgreen {
  background-color: #20620e;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag
  span.brown {
  background-color: #62480e;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag
  span.beige {
  background-color: #a68b44;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag
  span.green {
  background-color: #72a003;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.tag
  span:last-of-type {
  margin-right: 0;
}
body#top
  main
  #product
  .product_contents-wrap
  .product-cont
  > ul
  li
  .detail
  p.name {
  color: #000;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #product
    .product_contents-wrap
    .product-cont
    > ul
    li
    .detail
    p.name {
    font-size: 0.85rem;
  }
}
body#top main #product .product_contents-wrap .btn {
  margin: auto;
}
@media screen and (max-width: 767px) {
  body#top main #product .product_contents-wrap .btn {
    margin: 3rem auto 0;
  }
}
body#top main #howto {
  background-image: url('../img/black_back.jpg');
  background-size: cover;
  background-position: top left;
  padding: 10rem 12rem 0;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top main #howto {
    padding: 10rem 6rem 0;
  }
}
@media screen and (max-width: 767px) {
  body#top main #howto {
    padding: 4rem 1rem 0;
  }
}
body#top main #howto .howto_ttl {
  text-align: center;
  position: relative;
}
body#top main #howto .howto_ttl h2 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_ttl h2 {
    font-size: 2rem;
  }
}
body#top main #howto .howto_ttl h2:after {
  content: '';
  margin: auto;
  background-image: url('../img/vector/ttl_line.svg');
  background-size: contain;
  background-position: center;
  height: 2rem;
  width: 18rem;
  display: block;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_ttl h2:after {
    margin-top: 1rem;
    height: 1rem;
    width: 12rem;
  }
}
body#top main #howto p.heading {
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #howto p.heading {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0 1rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #howto .howto_contents-wrap {
  width: 100%;
  margin-top: 4rem;
  position: relative;
  text-align: center;
}
body#top main #howto .howto_contents-wrap .howto-cont {
  position: relative;
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont {
    margin-bottom: 4rem;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont span.backtxt {
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.1);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -5rem;
  margin: auto;
  line-height: 0.9;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont span.backtxt {
    font-size: 2.5rem;
    top: -2.5rem;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 2;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin: 0 auto 8rem;
  padding: 2rem 0 0;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto 2rem;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe.column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .gradation-round {
  bottom: -4rem;
  left: -5rem;
  margin: auto;
  width: 8rem;
  height: 8rem;
  -webkit-filter: blur(3rem);
  filter: blur(3rem);
  opacity: 0.8;
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .imgarea {
  width: 60%;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe .imgarea {
    width: 90%;
    margin: 0 auto 0 0;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .imgarea img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea {
  width: 45%;
  position: relative;
  z-index: 2;
  background-color: #f7f2e2;
  padding: 3rem 1rem 3rem 2rem;
  text-align: left;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea {
    width: 90%;
    margin: 0 0 0 auto;
    padding: 1rem;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea h2 {
  font-weight: 600;
  font-size: 2.2rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea h2 {
    font-size: 2rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea
  h2
  > span.en {
  font-weight: 500;
  font-size: 1rem;
  margin-left: 1rem;
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea p.tag {
  border-radius: 2rem;
  line-height: 2;
  text-align: center;
  width: 10rem;
  margin: 1.5rem 0 1rem;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea p.tag {
    margin: 1rem 0 0.5rem;
    width: 8rem;
    line-height: 1.8;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea ol {
  margin: 0 0 0;
}
body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea ol li {
  color: #000;
  text-align: left;
  padding: 0 0 0 1.5rem;
  position: relative;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont .recipe .txtarea ol li {
    padding: 0 0 0 1rem;
    font-size: 0.9rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea
  ol
  li
  > span {
  font-size: 0.9rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    .recipe
    .txtarea
    ol
    li
    > span {
    font-size: 0.8rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea
  ol
  li:before {
  content: '●';
  font-size: 0.8rem;
  position: absolute;
  left: 0;
  top: 0.2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    .recipe
    .txtarea
    ol
    li:before {
    font-size: 0.6rem;
    top: 0.3rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea
  ol
  li:last-of-type {
  margin-bottom: 0;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thin-style {
  left: -2rem;
  bottom: -2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    .recipe
    .txtarea.thin-style {
    left: 0rem;
    top: -2rem;
    bottom: auto;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thin-style
  h2 {
  color: #8fa05f;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thin-style
  p.tag {
  background-color: #72a003;
  border: 0.1rem solid #20620e;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thin-style
  ol
  li:before {
  color: #8fa05f;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thick-style {
  right: -2rem;
  bottom: -2rem;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    .recipe
    .txtarea.thick-style {
    right: 0rem;
    top: -2rem;
    bottom: auto;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thick-style
  h2 {
  color: #20620e;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thick-style
  p.tag {
  background-color: #20620e;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  .recipe
  .txtarea.thick-style
  ol
  li:before {
  color: #20620e;
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  background-size: 100% 100%;
  background-position: top left;
  padding: 3rem 0.5rem 3rem 0;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li {
    padding: 3rem 1rem 3rem;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li p.no {
  background-size: contain;
  background-position: top left;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -2.5rem;
  height: 5rem;
  width: 5.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li p.no {
    height: 3rem;
    width: 3.5rem;
    top: -1rem;
  }
}

body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li
  p.no
  > span.en {
  font-style: italic;
  font-size: 1.9rem;
  padding: 0 0.5rem 0.5rem 0;
  font-weight: 400;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list
    li
    p.no
    > span.en {
    font-size: 1.1rem;
    padding: 0 0 0.5rem 0;
  }
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li h3 {
  font-size: 1.3rem;
  text-align: center;
  position: relative;
  margin: 0 0 0.5rem;
  font-weight: 500;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li h3 {
    font-size: 1.1rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li
  h3:after {
  content: '';
  margin: auto;
  background-image: url('../img/vector/howto_line.svg');
  background-size: contain;
  background-position: center;
  height: 1rem;
  width: 10rem;
  display: block;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li
  .imgarea {
  z-index: 3;
  margin: 0 auto 0;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li
  .imgarea
  img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._01 {
  background-image: url('../img/vector/howto_waku_01.svg');
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._01 {
    background-image: url('../img/vector/howto_waku_01_sp.svg');
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li._01
  p.no {
  background-image: url('../img/vector/leave.svg');
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._02 {
  background-image: url('../img/vector/howto_waku_02.svg');
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._02 {
    background-image: url('../img/vector/howto_waku_02_sp.svg');
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li._02
  p.no {
  background-image: url('../img/vector/leave_02.svg');
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._03 {
  background-image: url('../img/vector/howto_waku_03.svg');
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._03 {
    background-image: url('../img/vector/howto_waku_03_sp.svg');
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li._03
  p.no {
  background-image: url('../img/vector/leave_03.svg');
}
body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._04 {
  background-image: url('../img/vector/howto_waku_04.svg');
  padding: 3rem 0 3rem 0;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto_contents-wrap .howto-cont ul.howto-list li._04 {
    padding: 3rem 0 2rem 0;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list
  li._04
  p.no {
  background-image: url('../img/vector/leave_04.svg');
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thin-style
  li {
  width: 25%;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thin-style
    li {
    width: 25%;
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thin-style
    li {
    margin: 0 auto 2rem;
    width: 18rem;
    height: 19rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thin-style
  li
  p.no {
  top: -1.5rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list
    .thin-style
    li
    p.no {
    top: -1.5rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thin-style
  li
  .imgarea {
  width: 86%;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thin-style
    li
    .imgarea {
    margin: auto;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thin-style
  li:last-of-type {
  width: 25%;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thin-style
    li:last-of-type {
    width: 25%;
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thin-style
    li:last-of-type {
    width: 18.6rem;
    height: 19rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thick-style
  li {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 30%;
  aspect-ratio: 1/1;
  padding: 2rem 0.5rem 1rem 0;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thick-style
    li {
    width: 30%;
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thick-style
    li {
    margin: 0 auto 2rem;
    width: 18rem;
    height: 19rem;
    padding: 2rem 1rem 2rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thick-style
  li
  .imgarea {
  width: 80%;
}
@media screen and (max-width: 767px) {
  body#top
    main
    #howto
    .howto_contents-wrap
    .howto-cont
    ul.howto-list.thick-style
    li
    .imgarea {
    width: 13rem;
    height: 9rem;
  }
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thick-style
  li._03 {
  background-image: none;
  border: 0.1rem solid #0c8438;
}
body#top
  main
  #howto
  .howto_contents-wrap
  .howto-cont
  ul.howto-list.thick-style
  li._03
  p.no {
  background-image: url('../img/vector/leave_03.svg');
}
body#top main #howto .howto-movie {
  width: 70%;
  margin: 0 auto 6rem;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto-movie {
    width: 100%;
  }
}
body#top main #howto .howto-movie .howto-movie-cont {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 30rem;
  margin: 3rem auto 0;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  body#top main #howto .howto-movie .howto-movie-cont {
    height: 15rem;
  }
}
body#top main #howto .howto-movie .howto-movie-cont img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body#top main #howto .footer-btnarea {
  background-image: url('../img/more_back.jpg');
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  padding: 5rem 3rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 3;
  position: relative;
  margin: auto;
  bottom: -2rem;
}
@media screen and (max-width: 767px) {
  body#top main #howto .footer-btnarea {
    padding: 3rem 1.5rem;
    background-position: 30% 50%;
  }
}
body#top main #howto .footer-btnarea p.lead {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: left;
}
@media screen and (max-width: 767px) {
  body#top main #howto .footer-btnarea p.lead {
    font-size: 1.4rem;
  }
}
body#top main #howto .footer-btnarea .btn {
  margin: 2rem 0 0;
}
@media screen and (max-width: 767px) {
  body#top main #howto .footer-btnarea .btn {
    margin: 2rem auto 0;
  }
}