@charset "UTF-8";
/*設定読み込み
-------------------------------*/
/*共通
-------------------------------*/
.clearfix:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*/ /*/ /*MAC IE5*/
  height: auto;
  overflow: hidden;
  /**/
}

a {
  text-decoration: none;
  color: #646464;
}

a:hover {
  transition: 0.2s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
}

.clear {
  clear: both;
}

/*コンテンツ幅設定*/
/*レスポンシブ設定*/
html {
  font-size: 62.5%;
}
@media screen and (max-width: 767px) {
  html {
    font-size: 57%;
  }
}

body {
  padding: 0;
  margin: 0 auto;
  border: 0 none;
  color: #646464;
  font-size: 1.4rem;
}

.right {
  float: right;
}

.left {
  float: left;
}

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

.sp-zone {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-zone {
    display: block;
  }
}

/* ヘッダーに適用 */
header {
  width: 100%;
}

.recapcha_snone {
  text-align: center;
  line-height: 1.5em;
  font-size: 1rem;
}

.errorpage {
  background-image: linear-gradient(90deg, rgba(168, 202, 240, 0.52), rgba(255, 255, 255, 0.52));
  color: #646464;
  height: 80vh;
  width: 100%;
  padding: 20vh 10% 0;
  line-height: 2em;
}
.errorpage__title {
  font-size: 5vw;
  margin-bottom: 70px;
  font-weight: bold;
}
.errorpage__title span {
  font-size: 6vw;
}
.errorpage__text strong {
  font-weight: bold;
  display: block;
  margin-bottom: 15px;
  font-size: 145%;
}
.errorpage__text a {
  display: inline-block;
  margin-block-start: 10px;
  font-weight: bold;
  text-decoration: underline;
}
.errorpage__text a:hover {
  opacity: 0.7;
}

header #keren-logo .txt__g {
  overflow: hidden;
}
header #keren-logo .logotxt {
  opacity: 0;
}
header #keren-logo .logotxt01 {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.3s;
  fill: #ffffff;
}
header #keren-logo .logotxt02 {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.5s;
  fill: #ffffff;
}
header #keren-logo .logotxt03 {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.7s;
  fill: #ffffff;
}
header #keren-logo .logotxt04 {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.9s;
  fill: #ffffff;
}
header #keren-logo .logotxt05 {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 1.1s;
  fill: #ffffff;
}
header #keren-logo .logoimg {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade02;
  animation-delay: 2.1s;
  fill: #ffffff;
}
header .page__header__content h1 {
  width: 50%;
  max-width: 180px;
  margin: 40px auto;
}
header .page__header__content h1 #keren-logo .logotxt {
  fill: #333 !important;
}
@media screen and (max-width: 767px) {
  header .page__header__content .head__menu {
    margin-bottom: 15%;
  }
}
header .page__header__content .head__menu ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  header .page__header__content .head__menu ul {
    display: block;
  }
}
header .page__header__content .head__menu ul li {
  margin: 0 25px;
}
@media screen and (max-width: 767px) {
  header .page__header__content .head__menu ul li {
    text-align: center;
    margin-bottom: 5%;
  }
}
header .page__header__content .head__menu ul li a {
  display: block;
  position: relative;
  padding-bottom: 5px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 1.6rem;
  letter-spacing: 1px;
  opacity: 0;
}
header .page__header__content .head__menu ul li a:after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid #aaa;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: translatey(45.5%);
}
header .page__header__content .head__menu ul li a:hover:after {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade02;
  transform: translatey(0%);
}
header .page__header__content .head__menu ul li:nth-child(1) a {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.1s;
}
header .page__header__content .head__menu ul li:nth-child(2) a {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.3s;
}
header .page__header__content .head__menu ul li:nth-child(3) a {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.5s;
}
header .page__header__content .head__menu ul li:nth-child(4) a {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.7s;
}
header .page__header__content .head__menu ul li:nth-child(5) a {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.9s;
}
header .page__header__content .head__menu ul li:nth-child(6) a {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 1.1s;
}

@keyframes headfade {
  from {
    opacity: 0;
    transform: translatex(15.5%);
    fill: #707070;
  }
  to {
    opacity: 1;
    transform: translatex(0%);
    fill: #fff;
  }
}
@keyframes headfade02 {
  from {
    opacity: 0;
    transform: translatey(5.5%);
    fill: #707070;
  }
  to {
    opacity: 1;
    transform: translatex(0%);
    fill: #fff;
  }
}
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}
.fade-in.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.header__slide {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.header__slide img {
  max-width: 100%;
  height: auto;
}
.header__slide .main__photo {
  position: relative;
}
.header__slide .main__photo img {
  width: 100%;
  filter: grayscale(100%);
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: mainphoto;
  animation-delay: 0.5s;
}
.header__slide .header__slide__width__a {
  width: 72%;
  max-width: 1200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  height: 100%;
}
.header__slide .header__slide__width__a .header__slide__width__b {
  width: 84%;
  max-width: 980px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  height: 100%;
}
.header__slide .header__slide__width__a .header__slide__width__b h1 {
  max-width: 250px;
  width: 50%;
  position: absolute;
  top: 50%;
  right: 6.5%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}
.header__slide .header__slide__width__a .header__slide__width__b h1 .cls-1 {
  fill: #fff;
}
@media screen and (max-width: 767px) {
  .header__slide .header__slide__width__a .header__slide__width__b h1 {
    width: 40%;
  }
}

@keyframes mainphoto {
  from {
    filter: grayscale(100%);
  }
  to {
    filter: grayscale(0%);
  }
}
.contact__icon {
  max-width: 150px;
  width: 50%;
  position: fixed;
  bottom: 13.5%;
  right: 2%;
  z-index: 999;
  border-radius: 50%;
  box-shadow: 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35);
}
.contact__icon.fadeout {
  opacity: 0;
  pointer-events: none;
  transition: 1s;
}
@media screen and (max-width: 767px) {
  .contact__icon.fadeout {
    opacity: 1;
    pointer-events: initial;
  }
}
@media screen and (max-width: 767px) {
  .contact__icon {
    max-width: 110px;
    bottom: 10.5%;
  }
}
.contact__icon .cls-3 {
  fill: #fff;
  stroke: none;
}
.contact__icon .cls-4 {
  fill: #a8a8a8;
}
.contact__icon a {
  display: block;
}
.contact__icon:hover circle.cls-4 {
  fill: #a8a8a8;
}
.contact__icon circle.cls-4 {
  transition: 0.3s;
  fill: #333;
}

.lang__btn {
  max-width: 150px;
  width: 50%;
  position: fixed;
  bottom: 5%;
  right: 2%;
  z-index: 999;
  display: block;
  background: #333;
  padding: 10px 0;
  color: #fff;
  width: 100%;
  text-align: center;
  box-shadow: 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35);
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: bold;
  font-size: 1.6rem;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}
.lang__btn.fadeout {
  opacity: 0;
  pointer-events: none;
  transition: 1s;
}
@media screen and (max-width: 767px) {
  .lang__btn.fadeout {
    opacity: 1;
    pointer-events: initial;
  }
}
.lang__btn:hover {
  background: #a8a8a8;
}
@media screen and (max-width: 767px) {
  .lang__btn {
    max-width: 100%;
    width: 100%;
    position: fixed;
    bottom: -0.3%;
    right: 0%;
    z-index: 999;
    border-top: 1px solid #aaa;
    box-shadow: 0px -1px 15px 0px rgba(0, 0, 0, 0.32);
    font-size: 2.1rem;
    padding: 3% 0;
    background: #a8a8a8;
  }
}

footer {
  width: 100%;
  margin: auto;
  background: #e6e6e6;
  padding: 60px 0;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media screen and (max-width: 767px) {
  footer {
    display: block;
    padding: 10% 0 25% 0;
  }
}
footer .footer__content {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  footer .footer__content {
    display: block;
  }
}
footer .footer__content .title {
  width: 140px;
}
@media screen and (max-width: 767px) {
  footer .footer__content .title {
    display: block;
    width: 30%;
    margin: auto auto 7.5% auto;
  }
}
footer .footer__content .title .cls-1 {
  fill: #646464;
}
footer .footer__content .txt {
  text-align: right;
  font-size: 1.5rem;
  line-height: 1.8em;
}
@media screen and (max-width: 767px) {
  footer .footer__content .txt {
    text-align: center;
    font-size: 1.4rem;
  }
}
footer .footer__content .txt h3 {
  line-height: 1em;
  font-size: 2.1rem;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  footer .footer__content .txt h3 {
    font-size: 2.1rem;
  }
}

#topcontent.allcontent {
  font-size: 2rem;
  line-height: 1.5em;
  width: 100%;
  max-width: 100%;
  margin: 200px auto 300px auto;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent {
    margin: 15% auto;
  }
}
#topcontent.allcontent .topcontent__section {
  width: 1230px;
  max-width: 1230px;
  margin: auto;
  margin-bottom: 220px;
  padding-top: 20px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section {
    margin-bottom: 30%;
  }
}
#topcontent.allcontent .topcontent__section .content__a {
  width: 1100px;
  max-width: 1100px;
  margin: auto;
}
#topcontent.allcontent .topcontent__section .content__b {
  width: 1000px;
  max-width: 1000px;
  margin: auto;
}
#topcontent.allcontent .topcontent__section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 65px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section h2 {
    margin-bottom: 7.5%;
  }
}
#topcontent.allcontent .topcontent__section#greeting {
  max-width: 1230px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section#greeting {
    max-width: 100%;
  }
}
#topcontent.allcontent .topcontent__section#photo-gallery {
  max-width: 1230px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section#photo-gallery {
    max-width: 100%;
  }
}
#topcontent.allcontent .topcontent__section#about-the-product {
  max-width: 1100px;
  max-width: 1200px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section#about-the-product {
    max-width: 100%;
  }
}
#topcontent.allcontent .topcontent__section#news-and-topics {
  max-width: 1200px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section#news-and-topics {
    max-width: 96%;
  }
}
#topcontent.allcontent .topcontent__section#contact {
  max-width: 1100px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .topcontent__section#contact {
    max-width: 100%;
  }
}
#topcontent.allcontent .read__text {
  font-size: 1.6rem;
  text-align: center;
}
#topcontent.allcontent .read__text p {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .read__text p {
    margin-bottom: 10%;
    opacity: 1;
  }
}
#topcontent.allcontent .read__text p:last-child {
  margin-bottom: 0;
}
#topcontent.allcontent .gallery__list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
#topcontent.allcontent .gallery__list.opacity__list:hover img {
  opacity: 0.5;
  transition: 1s;
}
#topcontent.allcontent .gallery__list.opacity__list .gallery__list__item {
  filter: grayscale(0%);
}
#topcontent.allcontent .gallery__list.opacity__list .gallery__list__item img {
  opacity: 0.5;
  transition: 0.5s;
}
#topcontent.allcontent .gallery__list.opacity__list .gallery__list__item.active {
  filter: grayscale(0%);
}
#topcontent.allcontent .gallery__list.opacity__list .gallery__list__item.active a img {
  transition-duration: 1s;
  transform: scale(1.075);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .gallery__list.opacity__list:hover img {
    opacity: 1;
    transition: 1s;
  }
}
#topcontent.allcontent .gallery__list .gallery__list__item {
  max-width: 390px;
  margin-right: 30px;
  margin-bottom: 30px;
  transition: 0.5s;
}
#topcontent.allcontent .gallery__list .gallery__list__item:nth-child(3n) {
  margin-right: 0;
}
#topcontent.allcontent .gallery__list .gallery__list__item a {
  display: block;
  transition: 0.5s;
  background: #fff;
  overflow: hidden;
}
#topcontent.allcontent .gallery__list .gallery__list__item a img {
  max-width: 100%;
  height: auto;
  transition: 0.5s;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .gallery__list .gallery__list__item {
    margin-right: 0;
    max-width: 100%;
    margin-bottom: 5%;
    margin-top: 5%;
  }
  #topcontent.allcontent .gallery__list .gallery__list__item:nth-child(odd) {
    margin-left: 25%;
    width: 75%;
  }
  #topcontent.allcontent .gallery__list .gallery__list__item:nth-child(even) {
    margin-right: 25%;
    width: 75%;
  }
  #topcontent.allcontent .gallery__list .gallery__list__item:hover .gallery__list__item img {
    opacity: 1;
  }
}
#topcontent.allcontent .top__product__list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  align-items: normal;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__product__list {
    display: block;
  }
}
#topcontent.allcontent .top__product__list .top__product__list__item {
  width: 49%;
  max-width: 580px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: left;
}
#topcontent.allcontent .top__product__list .top__product__list__item:first-child {
  flex-direction: row-reverse;
  justify-content: right;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__product__list .top__product__list__item:first-child {
    flex-direction: initial;
  }
  #topcontent.allcontent .top__product__list .top__product__list__item:first-child .photo {
    margin-right: 0;
    margin-left: 3%;
  }
  #topcontent.allcontent .top__product__list .top__product__list__item:first-child .text {
    margin-left: 3%;
  }
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__product__list .top__product__list__item {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10%;
    align-items: center;
  }
}
#topcontent.allcontent .top__product__list .top__product__list__item .photo {
  width: 56%;
  margin-right: 6%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__product__list .top__product__list__item .photo {
    width: 51%;
    margin-right: 5%;
  }
}
#topcontent.allcontent .top__product__list .top__product__list__item .photo img {
  max-width: 100%;
  height: auto;
}
#topcontent.allcontent .top__product__list .top__product__list__item .photo:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  left: 0;
  position: absolute;
  transform: translatey(0%);
}
#topcontent.allcontent .top__product__list .top__product__list__item .text {
  position: relative;
  height: 100%;
  width: 38%;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__product__list .top__product__list__item .text {
    width: 42%;
  }
}
#topcontent.allcontent .top__product__list .top__product__list__item .text h4 {
  font-size: 1.4rem;
  line-height: 2em;
}
#topcontent.allcontent .top__product__list .top__product__list__item .text .caption {
  font-size: 1.4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 1.45em;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__product__list .top__product__list__item .text .caption {
    position: initial;
    margin-top: 30%;
  }
}
#topcontent.allcontent .top__product__list .top__product__list__item .text .caption h3 {
  font-size: 2rem;
  margin-bottom: 15px;
  line-height: 1em;
}
#topcontent.allcontent .top__product__list .top__product__list__item.scroll-in02 .photo:before {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: top__product01;
  animation-delay: 0.1s;
}
#topcontent.allcontent .top__product__list .top__product__list__item.scroll-in02 .text {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: top__product02;
  animation-delay: 0.5s;
}
@keyframes top__product01 {
  from {
    transform: translatey(0%);
  }
  to {
    transform: translatey(105%);
  }
}
@keyframes top__product02 {
  from {
    opacity: 0;
    transform: translatex(5%);
  }
  to {
    opacity: 1;
    transform: translatex(0%);
  }
}
#topcontent.allcontent .top__news__list .top__news__list__item a {
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #949494;
  transition: 0.3s;
  overflow-wrap: break-word;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__news__list .top__news__list__item a {
    display: block;
    margin-bottom: 3.5%;
    padding-bottom: 3.5%;
    font-size: 1.6rem;
    line-height: 1.3em;
  }
}
#topcontent.allcontent .top__news__list .top__news__list__item a span {
  display: block;
  width: 200px;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__news__list .top__news__list__item a span {
    width: 100%;
    margin-bottom: 2%;
  }
}
#topcontent.allcontent .top__news__list .top__news__list__item a:hover {
  opacity: 0.7;
}
#topcontent.allcontent .top__contact__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list {
    display: block;
  }
}
#topcontent.allcontent .top__contact__list.scroll-in02 .top__contact__list__item {
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-name: headfade;
  animation-delay: 0.1s;
}
#topcontent.allcontent .top__contact__list.scroll-in02 .top__contact__list__item:nth-child(2) {
  animation-delay: 0.3s;
}
#topcontent.allcontent .top__contact__list.scroll-in02 .top__contact__list__item:nth-child(3) {
  animation-delay: 0.5s;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item {
  opacity: 0;
  width: 30%;
  max-width: 300px;
  position: relative;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list .top__contact__list__item {
    width: 60%;
    max-width: 96%;
    margin: auto auto 5% auto;
  }
}
#topcontent.allcontent .top__contact__list .top__contact__list__item .rect.cls-1 {
  fill: #e6e6e6;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a {
  display: block;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a.noneitem {
  pointer-events: none;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item .cls-1.icon {
  fill: #969696;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item .cls-3 {
  stroke: none;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item .cls-5 {
  stroke: #646464;
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .allow {
  transition: 0.3s;
  transform: translateX(3%);
  fill: #fff;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .allow {
    fill: #646464;
  }
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .allow .cls-5 {
  stroke: #fff;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .allow .cls-5 {
    fill: #646464;
  }
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .cls-00 {
  transition: 0.3s;
  fill: #333;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .cls-00 {
    fill: #e6e6e6;
  }
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .cls-4 {
  transition: 0.3s;
  fill: #fff;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .cls-4 {
    fill: #646464;
  }
}
#topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .cls-1.icon {
  transition: 0.3s;
  fill: #fff;
}
@media screen and (max-width: 767px) {
  #topcontent.allcontent .top__contact__list .top__contact__list__item a:hover .cls-1.icon {
    fill: #646464;
  }
}

#pagecontent {
  min-height: 400px;
}
#pagecontent.allcontent {
  width: 1000px;
  max-width: 96%;
  margin: 100px auto 180px auto;
}
@media screen and (max-width: 767px) {
  #pagecontent.allcontent {
    padding: 10% 0 25% 0;
    margin: 0 auto;
  }
}
#pagecontent.allcontent .title {
  text-align: center;
  margin-bottom: 100px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media screen and (max-width: 767px) {
  #pagecontent.allcontent .title {
    margin-bottom: 15%;
  }
}
#pagecontent.allcontent .title h1 {
  font-size: 4.2rem;
  margin-bottom: 10px;
  letter-spacing: 3px;
  line-height: 1.7em;
}
@media screen and (max-width: 767px) {
  #pagecontent.allcontent .title h1 {
    font-size: 3.7rem;
  }
}
#pagecontent.allcontent .title p {
  font-size: 1.6rem;
}

.contact__contentarea {
  width: 100%;
}
.contact__contentarea .contactarea {
  font-size: 1.4rem;
}
.contact__contentarea .contactarea dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  align-items: center;
  margin-bottom: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #d6d6d6;
}
@media screen and (max-width: 767px) {
  .contact__contentarea .contactarea dl {
    display: block;
    margin-bottom: 10%;
  }
}
.contact__contentarea .contactarea dl dt {
  width: 30%;
}
.contact__contentarea .contactarea dl dt span {
  display: inline-block;
  margin-left: 15px;
  font-size: 10px;
  background: #333;
  padding: 5px 10px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
}
@media screen and (max-width: 767px) {
  .contact__contentarea .contactarea dl dt {
    display: block;
    width: 100%;
    margin-bottom: 3%;
  }
}
.contact__contentarea .contactarea dl dd {
  width: 70%;
}
@media screen and (max-width: 767px) {
  .contact__contentarea .contactarea dl dd {
    display: block;
    width: 100%;
  }
}
.contact__contentarea .contactarea dl dd span {
  display: block;
  width: 100%;
}
.contact__contentarea .contactarea dl dd span input, .contact__contentarea .contactarea dl dd span textarea {
  width: 98%;
  padding: 1%;
  border: 1px solid #a8a8a8;
}
.contact__contentarea .contactarea .sectionlink .wpcf7-submit {
  display: block;
  border: none;
  padding: 15px 30px;
  font-size: 12px;
  letter-spacing: 1px;
  margin: auto;
  max-width: 200px;
  width: 60%;
  color: #fff;
  background: #333;
  font-weight: bold;
}
.contact__contentarea .multistep {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}
.contact__contentarea .multistep .contactarea dl {
  padding-bottom: 2%;
}
.contact__contentarea .multistep .contactarea dd span input, .contact__contentarea .multistep .contactarea dd span textarea {
  border: none;
}
.contact__contentarea .multistep .contactarea .sectionlink p {
  display: flex;
  justify-content: center;
}
.contact__contentarea .multistep .contactarea .sectionlink p .wpcf7-submit {
  display: block;
  border: none;
  padding: 15px 30px;
  font-size: 12px;
  letter-spacing: 1px;
  margin: auto;
  width: 45%;
  max-width: 200px;
  color: #fff;
  background: #333;
  font-weight: bold;
  margin: 0 10px;
}
.contact__contentarea .multistep .contactarea .sectionlink p .wpcf7-previous {
  display: block;
  border: none;
  padding: 15px 30px;
  font-size: 12px;
  letter-spacing: 1px;
  margin: auto;
  width: 45%;
  max-width: 200px;
  color: #fff;
  background: #333;
  font-weight: bold;
  margin: 0 10px;
}
.contact__contentarea .multistep .contactarea .sectionlink .wpcf7-spinner {
  display: none;
}

.contact-thanks {
  font-size: 1.4rem;
  line-height: 1.7em;
  text-align: center;
}

.ichiran {
  text-align: center;
  margin-top: 60px;
}
.ichiran a {
  display: block;
  width: 200px;
  border: 1px solid #aaa;
  padding: 5px;
  margin: auto;
  font-size: 1.4rem;
}

.top__contact__list__item.event-none a {
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .top__contact__list__item.event-none a {
    pointer-events: auto;
  }
}

#topcontent.allcontent .top__product__list .top__product__list__item.scroll-in02 .text h3 {
  margin-top: 15px;
}

.contact__icon.pc-zone {
  box-shadow: 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35), 0px 0px 2.5px 0px rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}/*# sourceMappingURL=free.css.map */