@charset "UTF-8";
/*# sourceMappingURL=test.css.map */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: url("./font/NotoSerifCJKjp-Regular.woff2") format("woff2"), url("./font/NotoSerifCJKjp-Regular.woff") format("woff");
  font-display: swap; }

/*Font Awesome5---------------------------------------------*/
@media screen and (min-width: 981px) {
  /*PC*/ }

@media screen and (max-width: 560px) {
  /*SP*/ }

@media screen and (max-width: 980px) and (min-width: 561px) {
  /*TB*/ }

@media screen and (max-width: 560px) {
  /*SP*/
  body {
    -webkit-text-size-adjust: 100%;
    font-size: 75%; } }

@-webkit-keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -5px); }
  100% {
    -webkit-transform: translate(0, 0); } }

@-moz-keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -5px); }
  100% {
    -webkit-transform: translate(0, 0); } }

@keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -5px); }
  100% {
    -webkit-transform: translate(0, 0); } }

@-webkit-keyframes buruburu2 {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -20px); }
  100% {
    -webkit-transform: translate(0, 0); } }

@-moz-keyframes buruburu2 {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -20px); }
  100% {
    -webkit-transform: translate(0, 0); } }

@keyframes buruburu2 {
  0% {
    -webkit-transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -20px); }
  100% {
    -webkit-transform: translate(0, 0); } }

@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  30% {
    opacity: 70%; }
  70% {
    opacity: 50%; }
  100% {
    opacity: 100%; } }

@-moz-keyframes fadein {
  0% {
    opacity: 0; }
  30% {
    opacity: 70%; }
  70% {
    opacity: 50%; }
  100% {
    opacity: 100%; } }

@keyframes fadein {
  0% {
    opacity: 0; }
  30% {
    opacity: 70%; }
  70% {
    opacity: 50%; }
  100% {
    opacity: 100%; } }

@-webkit-keyframes gradAnimeTime {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@-moz-keyframes gradAnimeTime {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes gradAnimeTime {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.fade {
  opacity: 0;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -o-transition: all 0.7s;
  -ms-transition: all 0.7s;
  transition: all 0.7s; }
  .fade.effect {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

.slidein {
  opacity: 0;
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -o-transition: all 0.7s;
  -ms-transition: all 0.7s;
  transition: all 0.7s; }
  .slidein.effect {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

.slideright {
  opacity: 0;
  -webkit-transform: translateX(300px);
  -ms-transform: translateX(300px);
  transform: translateX(300px);
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -o-transition: all 0.7s;
  -ms-transition: all 0.7s;
  transition: all 0.7s; }
  .slideright.effect {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-moz-keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

.fade-list > * {
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -o-transition: all 0.7s;
  -ms-transition: all 0.7s;
  transition: all 0.7s;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  position: relative; }

.fade-list.effect > *:nth-child(1) {
  -webkit-animation: fadeUp 0.5s 0.3s 1 ease normal forwards;
  animation: fadeUp 0.5s 0.3s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(2) {
  -webkit-animation: fadeUp 0.5s 0.6s 1 ease normal forwards;
  animation: fadeUp 0.5s 0.6s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(3) {
  -webkit-animation: fadeUp 0.5s 0.9s 1 ease normal forwards;
  animation: fadeUp 0.5s 0.9s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(4) {
  -webkit-animation: fadeUp 0.5s 1.2s 1 ease normal forwards;
  animation: fadeUp 0.5s 1.2s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(5) {
  -webkit-animation: fadeUp 0.5s 1.5s 1 ease normal forwards;
  animation: fadeUp 0.5s 1.5s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(6) {
  -webkit-animation: fadeUp 0.5s 1.8s 1 ease normal forwards;
  animation: fadeUp 0.5s 1.8s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(7) {
  -webkit-animation: fadeUp 0.5s 2.1s 1 ease normal forwards;
  animation: fadeUp 0.5s 2.1s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(8) {
  -webkit-animation: fadeUp 0.5s 2.4s 1 ease normal forwards;
  animation: fadeUp 0.5s 2.4s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(9) {
  -webkit-animation: fadeUp 0.5s 2.7s 1 ease normal forwards;
  animation: fadeUp 0.5s 2.7s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(10) {
  -webkit-animation: fadeUp 0.5s 3s 1 ease normal forwards;
  animation: fadeUp 0.5s 3s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(11) {
  -webkit-animation: fadeUp 0.5s 3.3s 1 ease normal forwards;
  animation: fadeUp 0.5s 3.3s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.fade-list.effect > *:nth-child(12) {
  -webkit-animation: fadeUp 0.5s 3.6s 1 ease normal forwards;
  animation: fadeUp 0.5s 3.6s 1 ease normal forwards;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.move-img {
  position: relative;
  overflow: hidden;
  z-index: 1; }
  .move-img:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #fff;
    z-index: 1;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -o-transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s; }
  .move-img img {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
    left: -100%;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s; }
  .move-img.effect img {
    opacity: 1;
    left: 0; }
  .move-img.effect:before {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    width: 100%; }

.blur {
  -ms-filter: blur(6px);
  -webkit-filter: blur(6px);
  filter: blur(6px);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95); }
  .blur.effect {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    filter: blur(0); }

/*# sourceMappingURL=test.css.map */
/*共通------------------------------------------*/
/*=============================================================================*/
/*ページ内コンテンツ===============================================================*/
/*=============================================================================*/
#top_catch {
  padding: 25vw 0; }
  @media screen and (max-width: 560px) {
    #top_catch {
      padding: 15em 0; } }
  #top_catch #catchcopy {
    display: block;
    width: 100%;
    padding-left: 70%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0; }
    @media screen and (max-width: 560px) {
      #top_catch #catchcopy {
        padding-left: 40%; } }
    #top_catch #catchcopy p {
      padding: 1em 2em;
      color: #fff;
      background: rgba(17, 108, 45, 0.8); }
      #top_catch #catchcopy p span, #top_catch #catchcopy p strong {
        display: block; }
      #top_catch #catchcopy p strong {
        letter-spacing: 0.1em;
        font-weight: bold;
        font-size: 150%; }
        #top_catch #catchcopy p strong.en-title {
          font-size: 180%; }

#top_message {
  width: 100%;
  background: url("../img/top-message-bg.jpg") no-repeat left top;
  padding: 5em 0;
  background-attachment: fixed; }
  #top_message .cont {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row; }
    #top_message .cont header {
      padding: 2em 3%; }
      @media screen and (max-width: 980px) and (min-width: 561px), screen and (max-width: 560px) {
        #top_message .cont header {
          display: none; } }
    #top_message .cont #message-cont {
      width: 85%;
      background: rgba(255, 255, 255, 0.85);
      padding: 3em 5%;
      position: relative; }
      #top_message .cont #message-cont h2 {
        font-size: 200%;
        margin-bottom: 1em; }
        #top_message .cont #message-cont h2 span {
          color: #9f1f1f;
          font-size: 50%;
          display: block; }
      #top_message .cont #message-cont dl {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        -webkit-box-align: stretch;
        align-items: stretch;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row; }
        #top_message .cont #message-cont dl dt {
          width: 45%;
          -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
          order: 2; }
        #top_message .cont #message-cont dl dd {
          width: 50%;
          -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
          order: 1;
          position: relative;
          padding-bottom: 3em; }
          #top_message .cont #message-cont dl dd .more {
            position: absolute;
            bottom: 0;
            right: 0; }
      #top_message .cont #message-cont p {
        line-height: 2; }
      #top_message .cont #message-cont p.more {
        font-size: 130%;
        text-align: right; }

#top_product {
  padding: 5em 3%;
  background: url("../img/bg_product.jpg") repeat left top; }
  #top_product header {
    padding: 3em 0;
    text-align: center; }

#product-list {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row; }
  #product-list li {
    width: 33.3%;
    padding: 1em;
    text-align: center; }
    @media screen and (max-width: 980px) and (min-width: 561px), screen and (max-width: 560px) {
      #product-list li {
        width: 50%; } }
    #product-list li h2 {
      font-size: 130%; }
      #product-list li h2 span {
        display: block;
        color: #d42e2d;
        font-size: 130%; }
    #product-list li a {
      display: block;
      padding: 5em;
      max-width: 100%;
      position: relative; }
      @media screen and (max-width: 980px) and (min-width: 561px) {
        #product-list li a {
          padding: 3em; } }
      @media screen and (max-width: 560px) {
        #product-list li a {
          padding: 1em; } }
      #product-list li a dl {
        display: block; }
        #product-list li a dl dt {
          text-align: center;
          width: 100%;
          height: 100%;
          margin-bottom: 2em;
          overflow: hidden; }
          #product-list li a dl dt img {
            max-width: inherit;
            max-width: initial;
            width: 100%;
            height: auto; }
        #product-list li a dl dd {
          font-size: 120%; }
        #product-list li a dl:before, #product-list li a dl:after {
          display: block;
          content: "";
          width: 1em;
          height: 1em;
          z-index: -1;
          border: 1px solid #a19774;
          position: absolute;
          -webkit-transition: all 0.7s;
          -moz-transition: all 0.7s;
          -o-transition: all 0.7s;
          -ms-transition: all 0.7s;
          transition: all 0.7s; }
        #product-list li a dl:before {
          top: 0;
          left: 0;
          border-right: none;
          border-bottom: none; }
        #product-list li a dl:after {
          bottom: 0;
          right: 0;
          border-left: none;
          border-top: none; }
      #product-list li a:hover {
        text-decoration: none;
        background: rgba(255, 255, 255, 0.5); }
        #product-list li a:hover img {
          opacity: 1;
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -o-transform: scale(1.2);
          -ms-transform: scale(1.2);
          transform: scale(1.2); }
        #product-list li a:hover dl:before, #product-list li a:hover dl:after {
          width: 100%;
          height: 100%;
          border-color: #a19774; }

#top-access {
  display: block;
  position: relative;
  margin-bottom: 5em;
  overflow: hidden; }
  #top-access header {
    display: block;
    position: absolute;
    height: 100%;
    top: 0;
    left: 10%;
    width: 23%;
    background: #fff;
    -webkit-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
    -moz-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
    -ms-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
    padding: 1em; }
    @media screen and (max-width: 980px) and (min-width: 561px), screen and (max-width: 560px) {
      #top-access header {
        width: 50%;
        left: 0; } }
    @media all and (-ms-high-contrast: none) {
      #top-access header {
        -webkit-box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.1); } }
    #top-access header h1 {
      padding: 1em; }
      #top-access header h1:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f0c8";
        color: #116c2d;
        font-size: 80%;
        margin-right: 10px; }
    #top-access header dl dt {
      text-align: center;
      margin-bottom: 1em; }
    #top-access header dl dd {
      padding: 0 1em; }
      #top-access header dl dd p {
        margin-bottom: 10px;
        font-weight: bold; }
      #top-access header dl dd .more {
        text-align: center;
        padding-top: 1em; }
        #top-access header dl dd .more a {
          border: 1px solid #c1c1c1; }
          #top-access header dl dd .more a:hover {
            background: #116c2d;
            color: #fff; }
  #top-access #access_map {
    margin-bottom: 0; }
    @media screen and (max-width: 980px) and (min-width: 561px), screen and (max-width: 560px) {
      #top-access #access_map {
        padding-left: 50%; } }

/*# sourceMappingURL=page.css.map */