/* /////////////////////////////////

  top.scss

///////////////////////////////// */
/*---------------------------------
  Base
---------------------------------*/
.container {
  background: #eee;
}

.content {
  width: 100%;
  padding: 0;
  background: #eee;
}

@media screen and (max-width: 768px) {
  .content {
    background: #fafafa;
  }
}

/*---------------------------------
  Keyvisual
---------------------------------*/
.keyvisual {
  height: auto/*calc(100vh - 80px)*/;
  position: relative;
  width: 96vw;
  margin: 0 auto;
/* padding-bottom: 24.5%;
 margin-bottom: -24.5%;*/
}

.keyvisual .catchCopy {
  color: #ffffff;
  text-align: center;
  z-index: 999;
  font-weight: bold;
  text-shadow: 0 0 9px rgba(0, 0, 0, 1);
  font-family: "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.keyvisual .catchCopy {
  font-size: 4.3rem;
  letter-spacing: 0.4rem;
}
.keyvisual .catchCopy [class^="catchCopy--slide"] {
  white-space: nowrap;
}

.keyvisual .catchCopy--slide1 {
  position: absolute;
  top: 33%;
  left: 75%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.keyvisual .catchCopy--slide2 {
  position: absolute;
  top: 40%;
  left: 28%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.keyvisual .catchCopy--slide3_01 {
  position: absolute;
  top: 18%;
  left: 38%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.keyvisual .catchCopy--slide3_02 {
  position: absolute;
  top: 26%;
  left: 58%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.keyvisual .catchCopy--slide4 {
  position: absolute;
  top: 25%;
  left: 75%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.keyvisual .companyLogo {
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
  z-index: 999;
}

.keyvisual .keyvImage {
  height: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.keyvisual .keyvImage img {
  /* max-width: none;*/
  height: 100%;
  width: auto;
  object-fit: cover;
  margin: 0 auto;
}
.keyvisual2{
	position: relative;
}
.keyvisual .scrollAnnounce,
.keyvisual2 .scrollAnnounce {
  height: 60px;
  letter-spacing: 2px;
  font-family: "Lato", sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  color: #000000;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  -webkit-animation: flash 1.5s ease-in infinite alternate;
          animation: flash 1.5s ease-in infinite alternate;
}
.keyvisual .scrollAnnounce::after,
.keyvisual2 .scrollAnnounce::after {
  content: '';
  display: block;
  visibility: visible;
  width: 1px;
  height: 60px;
  background: #000000;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

@-webkit-keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.swiper-container {
  height: 100% !important;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  width: 97% !important;
  text-align: right;
}

.swiper-pagination-bullet-active {
  background: #4cb921 !important;
}

/* キービジュアル：動画  */

.keyvisual #video-area{
    /*position: fixed;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;*/
}
.keyvisual #video-area #video {
    /*天地中央配置*/
    position: absolute;
    /*z-index: -1;*/
    top: 50%;
    left: 49.9%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25%*/
    min-height: 100%;
    min-width: 100%;
}
.fadein-box{
	height: 200px;
	position: relative;
}
.movie {
  margin: 0 auto 0;
  width: 43%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

/*--- フェードイン2　--*/

.--fadein {
  opacity: 0;
}
.--fadein.done {
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}

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

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .keyvisual {
    height: calc(100vh - 100px);
	width: 100%;
	/*height: 56vw;
	margin-right: 0.1px;*/
  }
  .keyvisual .keyvImage img{
  	width: 100%;
	max-width: 100%;
  }
  .keyvisual .companyLogo {
    position: absolute;
    top: auto;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
  }
  .keyvImage img {
    /* max-width: none; */
    height: 100%;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
  }
  .keyvImage .swiper-slide{
  	width: 100%;
  }

  .keyvisual .catchCopy {
    font-size: 2.2rem;
    letter-spacing: 0.2rem;
  }

  .keyvisual .catchCopy--slide1 {
    top: 50%;
    left: 50%;
  }

  .keyvisual .catchCopy--slide2 {
    top: 35%;
    left: 30%;
  }

  .keyvisual .catchCopy--slide3_01 {
    top: 15%;
    left: 45%;
  }
  .keyvisual .catchCopy--slide3_02 {
    top: 24%;
    left: 55%;
  }

  .keyvisual .catchCopy--slide4 {
    top: 25%;
    left: 65%;
  }

  .lower--unit {
    display: block;
  }
.keyvisual #video-area #video {
    /*縦横幅指定*/
    width: 49.778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    /*height: 36.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25%*/
}
.fadein-box{
	height: 150px;
}
.movie {
  margin: 0 auto 0;
  width: 90%;
}
}
/*---------------------------------
  carousel
---------------------------------*/
.carousel{
	overflow: hidden;
	width: 100%;
	display: flex;
	/*height: 253px;*/
}
.carousel .photos{
	display: flex;
	width: 400%;
}
.carousel .photos li{
	line-height: 1;
	flex: 0 0 auto;
	width: calc(100vw / 2.8);
}
.keyvisual3  .photos li{
	width: calc(100vw / 3.2);
}
.carousel .scroll-r{
	-webkit-animation: scroll-right 79s linear infinite .5s both;
    animation: scroll-right 79s linear infinite .5s both;
}
.carousel .scroll-l{
	-webkit-animation: scroll-left 90s linear infinite .5s both;
    animation: scroll-left 90s linear infinite .5s both;
}
@keyframes scroll-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes scroll-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.main-text{
  text-align: center;
  padding: 20px 0;
  font-family: "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 30px;
  background: #fff;
  letter-spacing: 15px;
}
.keyvisual3 .main-text{
	padding: 70px 0;
  font-size: 45px;
}
.keyvisual4 .main-text{
	padding: 45px 0;
  font-size: 40px;
}
@media screen and (max-width: 768px) {
	.main-text{
		font-size: 150%;
		letter-spacing: 10px;
		padding: 30px 0;
	}
	.keyvisual3 .main-text{
		padding: 50px 0;
		font-size: 180%;
	}
	.keyvisual4 .main-text{
		padding: 40px 0;
	}
	.carousel .photos li{
		line-height: 1;
		flex: 0 0 auto;
		width: calc(100vw / 1);
	}
	.carousel{
		height: auto;
	}

}


/*---------------------------------
  Lower Area
---------------------------------*/
.lower--unit {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: 96vw;
  height: 460px;
  margin: 50px auto 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.lower--titleArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 36%;
  color: #4cb921;
  position: relative;
}

.lower--titleArea::before {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  right: calc(-30px - 2vw);
  transform: translateY(-50%);
  z-index: 2;
}
.lower--unit:nth-child(1) .lower--titleArea::before {
  content: none;
}

.lower--titleEn {
  letter-spacing: 3px;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 2.4rem;
}

.lower--titleJp {
  display: block;
  text-align: center;
  letter-spacing: 2px;
}

.lower--btn a {
  min-width: 190px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4rem;
}

.lower--imageArea {
  width: calc(64% + 2vw);
  height: 90%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: calc(36% + 2vw);
  transform: translateY(-50%);
}

.lower--imageArea img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lower--imageArea.image001 img {
	top: 53%;
}
.lower--imageArea.image003 img {
	top: 37%;
	left:47%;
}
.lower--imageArea.image005 img {
	top: 60%;
	left: 48%;
}
.lower--unit.imgLeft .lower--titleArea {
  order: 2;
}

.lower--unit.imgLeft .lower--titleArea::before {
  left: -30px;
}

.lower--unit.imgLeft .lower--imageArea {
  order: 1;
  left: -2vw;
}

@media screen and (max-width: 768px) {
  .lower--unit {
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0 15px;
  }
  .lower--titleArea {
    order: 2;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding-left: 25px;
  }
  .lower--titleArea::before {
    width: 25px;
    left: -8px;
    right: auto;
  }
  .lower--titleAreaNews {
    position: absolute;
    top: 30px;
  }
  .lower .lower--unit.imgLeft .lower--titleArea::before {
    left: -8px;
  }
  .lower--titleEn, .lower--titleJp {
    letter-spacing: 2px;
  }
  .lower--titleJp {
    text-align: left;
  }
  .lower--imageArea {
    order: 1;
    width: 100%;
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  .lower--imageArea img,
.lower--imageArea.image001 img,
.lower--imageArea.image003 img,
.lower--imageArea.image005 img {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
  .lower--btn {
    position: absolute;
    top: -45px;
    right: -15px;
  }
  .lower--btnNews {
    top: 11px;
    right: -1px;
	margin-top: 0!important;
  }
  .lower--btn a {
    min-width: auto;
  }
  .lower--btn a::after {
    right: 15px;
  }
}

/*---------------------------------
  FAQ Area
---------------------------------*/
.faq {
  margin: 80px 0;
}

.faq .inner {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.faq .inner::after {
  content: none;
}

.faq--titleArea {
  width: 14%;
}

.faq--titleEn {
  display: block;
  letter-spacing: 3px;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 2.4rem;
}

.faq--titleJp {
  letter-spacing: 1px;
}

.faq--list {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: 86%;
}

.faq--list::after {
  content: none;
}

.faq--unit {
  width: 47%;
  height: 190px;
  padding: 30px 50px;
  background: #ffffff;
  position: relative;
}

.faq--unitTitle {
  letter-spacing: 2px;
}

.faq--unitTitle a {
  text-decoration: none;
  font-weight: bold;
  font-size: 2.0rem;
  color: #4cb921;
}

.faq--desc {
  margin: 10px 0 0 !important;
}

.faq--btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.faq--btn a {
  min-width: 190px;
  height: 50px;
  line-height: 50px;
  font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
  .faq {
    margin: 50px 0 0;
    padding: 0 15px 40px;
  }
  .faq .inner {
    display: block;
  }
  .faq--titleArea {
    width: 100%;
  }
  .faq--title {
    text-align: center;
  }
  .faq--list {
    display: block;
    width: 100%;
  }
  .faq--unit {
    width: 100%;
    height: auto;
    margin: 20px 0 0;
    padding: 20px;
  }
  .faq--unitTitle {
    position: relative;
  }
  .faq--unitTitle::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-top: solid 2px #4cb921;
    border-right: solid 2px #4cb921;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: rotate(45deg) translateY(-50%);
  }
  .faq--btn,
  .faq--btn a {
    display: none;
  }
  .faq--btn {
    position: static;
    right: auto;
    bottom: auto;
  }
  .faq--btn a {
    position: static;
  }
}