@charset "UTF-8";
/*
	Title	   : 長谷工
	URI            : 長谷工
	Designer       : GRAPHNETWORK
	Designer's URI : http://graphnetwork.com/
*/

.container .mainvisual {
	background: #8ed1e3;
}

.container .mainvisual .img-mv {
	width: 100%;
	display: block;
}
.container .ttl-img {
	width: 100%;
}

/* modaal上書き */
.modaal-video-wrap {
	margin: auto 0 !important;
	position: relative;
}


/* アイコン */
.link-pack {
	position: relative;
}
.osusume,
.new-pack {
	position: absolute;
	top: 22%;
	right: 0;
	z-index: 10;
	animation: flash 1s ease infinite alternate;
}
.osusume .icon,
.new-pack .icon {
	width: 92px !important;
	height: 57px;
}

.pack-b .new-pack {
	position: absolute;
	top: 22%;
	right: 6%;
	z-index: 10;
	animation: flash 1s ease infinite alternate;
}
.pack-c .new-pack {
	position: absolute;
	top: 11%;
	right: 10%;
	z-index: 10;
	animation: flash 1s ease infinite alternate;
}
.pack-b .new-pack .icon, .pack-c .new-pack .icon {
	width: 42px !important;
	height: 27px;
}




/* アイコンアニメーション */
@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}


/* mainvisual */
.container .mainvisual .slide-image  {
	width: 100%;
}
.container .swiper-wrapper {
	height: auto !important;
}
.container .swiper-slide {
	height: auto !important;
}

	
/* cts */
.container .cts {
	width: 94%;
	margin: auto;
}


/* comfortable */
.container .comfortable {
	background-color: #8ed1e3;
}
.container .comfortable .ttl-comfortable {
	text-align: center;
}
.container .comfortable .ttl-comfortable img {
	width: 90%;
}
.container .comfortable .cts {
	padding: 30px 0;
}
.container .comfortable .cts .link-pack {
	width: 46%;
	margin: 2%;
}
.container .comfortable .cts .link-pack img,
.container .comfortable .cts .ttl-movie-bath img,
.container .comfortable .cts .movie img {
	width: 100%;
	display: block;
}
.container .comfortable .cts .ttl-check {
	text-align: center;
	margin-bottom: 20px;
}
.container .comfortable .cts .ttl-check img {
	width: 80%;
}
.container .comfortable .cts .movie {
	width: 48%;
	position: relative;
}
.container .comfortable .cts .block-movie .flex {
	justify-content: space-between;
}
.container .comfortable .cts .block-movie {
	margin: 80px 0 0;
}


/* voice */
.container .voice {
	background-color: #f7f0ec;
	padding: 40px 0;
}
.container .voice .voice-image {
	text-align: center;
}
.container .voice .voice-image img {
	width: 100%;
}


/* pack */
.container .pack {
	background: url(../img/bg-pack.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 30px 0;
}
.container .pack .pack-a .ttl-plan {
	position: relative;
}
.container .pack .pack-a .ttl-plan,
.container .pack .packa-price {
	text-align: center;
}
.container .pack .packa-price {
	margin: 30px 0;
}
.container .pack .ttl-plan img,
.container .pack .block-list .list img,
.container .pack .ttl-pack img,
.container .pack .btn-app {
	width: 100%;
}
.container .pack .packa-price img {
	width: 90%;
}
.container .pack .pack-a .ttl-pack {
	text-align: center;
	margin-bottom: 34px;
}
.container .pack .pack-cts-red,
.container .pack .pack-cts-blue {
	width: 100%;
	position: relative;
}
.container .pack .block-pack {
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
	padding: 32px 0;
	background: #fff;
	margin: auto;
}
.container .pack .blue {
	background: #fffded;
	border: 10px solid #d5c28b;
}
.container .pack .block-list {
	margin: auto;
}
.container .pack .block-list .list {
	width: 23%;
	margin: 1%;
	display: block;
}
.container .pack .btns {
	width: 66%;
	margin: 10px 0 0 0;
}
.container .pack .pack-a .bg {
	margin: auto;
	width: 94%;
	background: url(../img/bg-pack-a.jpg);
	background-size: 34%;
	background-repeat: no-repeat;
	background-position: right top 87px;
}
.container .pack .pack-b .bg {
	margin: auto;
	width: 94%;
	background: url(../img/bg-pack-b.jpg);
	background-size: 32%;
	background-repeat: no-repeat;
	background-position: right top 32px;
}
.container .pack .pack-c .bg {
	margin: auto;
	width: 94%;
	background: url(../img/bg-pack-c.jpg);
	background-size: 29%;
	background-repeat: no-repeat;
	background-position: right top 36px;
}
.container .pack .pack-d .bg {
	margin: auto;
	width: 94%;
	background: url(../img/bg-pack-d.jpg);
	background-size: 34%;
	background-repeat: no-repeat;
	background-position: right top 72px;
}
.container .pack .pack-a,
.container .pack .pack-c{
	margin-bottom: 50px;
}
.container .pack .pack-b {
	margin-bottom: 20px;
}
.container .pack .pack-b .ttl-pack {
	margin-bottom: 20px;
	text-align: center;
}
.container .pack .pack-b .ttl-pack img {
	width: 90%;
}


/* attent */
.container .attent {
	background: #f4f2f2;
	padding: 20px 0 40px;
}
.container .attent .txt {
	color: #5b5858;
	font-size: 14px;
	width: 90%;
	margin: auto;
	line-height: 1.6rem;
	text-align: justify;
}


/* アンカーリンク位置調整 */
#packB {
	padding-top: 50px;
	margin-top: -50px;
}
#packC {
	padding-top: 90px;
	margin-top: -90px;
}
#packD {
	padding-top: 80px;
	margin-top: -80px;
}
	


/* Swiper */
.swiper-parent {
	position: relative;
}
.container .comfortable .cts .swiper-container {
	padding-bottom: 30px;
	box-sizing: content-box;
}
.swiper-button-prev, .swiper-button-next {
	top: calc((100% - 0) * 0.5);
	opacity: 1 !important;
}
.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #648bc0;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	width: 10px;
	height: 10px;
	background: #fff9ac;
	opacity: 1;
}
.swiper-button-next:after, .swiper-button-prev:after {
	font-size: 16px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
	right: 0;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
	left: 0;
	right: auto;
}



    


@media screen and (min-width:767px) {
	
	/* アイコン */
	.link-pack .osusume,
	.link-pack .new-pack {
		top: 90px;
	}
	.pack-b .new-pack .icon,
	.pack-c .new-pack .icon {
		width: 132px !important;
		height: 87px;
	}
	.pack-b .new-pack {
		top: 23%;
	}
	.pack-c .new-pack {
		position: absolute;
		top: 8%;
		right: 10%;
		z-index: 10;
		animation: flash 1s ease infinite alternate;
	}
	
	.modaal-video-wrap {
		margin: auto 50px;
		position: relative;
	}
	
	/* mainvisual */
	.container .mainvisual .slide-mv {
		width: 90%;
		max-width: 1000px;
		margin: auto;
	}
	
	/* cts */
	.container .cts {
		width: 90%;
		max-width: 1000px;
		margin: auto;
	}
	
	
	/* comfortable */
	.container .comfortable .cts {
		padding: 30px 0;
	}
	.container .comfortable .cts .link-pack {
		width: 21%;
		margin: 2%;
	}
	.container .comfortable .cts .ttl-check {
		text-align: center;
		margin-bottom: 40px;
	}
	.container .comfortable .cts .ttl-check img {
		width: 60%;
	}
	.container .comfortable .cts .block-movie {
		margin: 160px 0 40px;
	}
	.container .pack {
		padding: 60px 0 30px;
	}
	.container .pack .ttl-pack {
		margin-bottom: 74px;
	}
	.container .pack .block-pack {
		padding: 72px 0 0;
	}
	.container .pack .pack-b .block-pack,
	.container .pack .pack-c .block-pack,
	.container .pack .pack-d .block-pack {
		padding: 72px 0;
	}
	.container .pack .packa-price img {
		width: 65%;
	}
	.container .pack .packa-price {
		margin: 50px 0;
	}
	.container .pack .pack-a .bg {
		width: 80%;
		background-size: 37%;
		background-position: right bottom 116px;
		height: 467px;
	}
	.container .pack .pack-b .bg {
		width: 80%;
		background-position: right top 87px;
	}
	.container .pack .pack-c .bg {
		width: 80%;
		background-size: 30%;
		background-position: right top 92px;
	}
	.container .pack .pack-d .bg {
		margin: auto;
		width: 80%;
		background: url(../img/bg-pack-d.jpg);
		background-size: 34%;
		background-repeat: no-repeat;
		background-position: right top 176px;
	}
	.container .pack .btns {
		margin: 30px 0 0 0;
	}
	.container .pack .pack-a,
	.container .pack .pack-c {
		margin-bottom: 100px;
	}
	.container .pack .pack-b,
	.container .pack .pack-d {
		margin-bottom: 50px;
	}
	.container .pack .pack-b .ttl-pack,
	.container .pack .pack-c .ttl-pack {
		margin-bottom: 34px;
	}
	.container .pack .pack-a .ttl-pack {
		margin: 30px 0px 80px;
	}
		
	
	/* voice */
	.container .voice .voice-image img {
		width: 80%;
	}
	.container .voice {
		padding: 110px 0;
	}
	
	
	/* attent */
	.container .attent {
		background: #f4f2f2;
		padding: 50px 0 80px;
	}
	.container .attent .txt {
		color: #5b5858;
		font-size: 15px;
		width: 80%;
		margin: auto;
		line-height: 1.6rem;
		text-align: justify;
	}
	
	
	/* アンカーリンク位置調整 */
	#packB {
		padding-top: 100px;
		margin-top: -100px;
	}
	#packC {
		padding-top: 190px;
		margin-top: -190px;
	}
	#packD {
		padding-top: 190px;
		margin-top: -190px;
	}
	
	
	/* Swiper */
	/*
		.container .comfortable .cts .swiper-button-prev, .swiper-button-next {
			top: calc((100% - 50px) * 0.5);
			margin-top: -22px;
		}
	*/
	.container .comfortable .cts .swiper-container {
		padding-bottom: 40px;
		box-sizing: content-box;
	}
	.swiper-button-next:after, .swiper-button-prev:after {
		font-size: 36px;
	}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
		right: 10px;
	}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
		left: 10px;
		right: auto;
	}
	
	/* Swiper IE対応 */
	.swiper-button-next,
	.swiper-button-prev {
	  position: absolute;
	  z-index: 10;
	  transform: translate(0%, -50%);
	  margin-top: 0;
	}
	.swiper-button-next.swiper-button-disabled,
	.swiper-button-prev.swiper-button-disabled {
	  opacity: .35;
	  cursor: auto;
	  pointer-events: none
	    }
	.swiper-button-prev::after,
	.swiper-button-next::after {
	  position: relative;
	  font-family: "Font Awesome 5 Free", sans-serif;
	  opacity: 1;
	  font-style: normal;
	  font-weight: 900;
	  font-size: 46px;
	}
	.swiper-button-prev::after {
	  content: "\f104";
	}
	.swiper-button-next::after {
	  content: "\f105";
	}
	.swiper-button-prev:after,
	.swiper-button-next:after{
	  color: #FFF;
	}
	.swiper-pagination {
		position: relative !important;
		margin: 30px 0;
	}
	.swiper-pagination-bullet,
	.swiper-pagination-bullet-activ {
		margin: 5px;
	}
	
	
}



@media only screen and (min-width: 767px) and (max-width: 999px) {
	.link-pack .osusume, .link-pack .new-pack {
		top: 16%;
	}
}


/* fadein animation */
.fadeIn {
  opacity: 0;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.7s ease-in, -webkit-transform 1s ease;
  transition: opacity 0.7s ease-in, -webkit-transform 1s ease;
  -o-transition: opacity 0.7s ease-in, transform 1s ease;
  transition: opacity 0.7s ease-in, transform 1s ease;
  transition: opacity 0.7s ease-in, transform 1s ease, -webkit-transform 1s ease;
}

.fadeIn.inview {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}