@charset "UTF-8";
/* CSS Document */
/*------------------------------
f-view
------------------------------*/
.f-view{
	position: relative;
}
.f-view img{
	vertical-align: top;
}
.f-view::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
	display: block;
}
.letter{
	color: white;
	font-size: 3rem;
	font-weight: 500;
	position: absolute;
    top: 53%;
	text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}
/*------------------------------
ベース大タイトル &　説明
------------------------------*/
.base-ex {
	margin: 5rem 10rem;
}
.base-ex h2{
	margin-bottom: 5rem;
}
.name-eng{
	margin-left: 5px;
	color: #E86D40;
	font-family: "futura", Gadget, "sans-serif";
}
.name-jp{
	font-size: 4.3rem;
	margin-top: -1rem;
}
.base-ex h3{
	font-size: 2.5rem;
	font-weight: 400;
	margin-bottom: 2rem;
}
.basepoint-ttl{
	text-align: center;
	margin-bottom: -2.2rem;
}
.basepoint-ttl>p{
	display: inline-block;
	color: #E86D40;
    font-family: "futura", Gadget, "sans-serif";
    font-size: 6rem;
    font-weight: 400;
}
.basepoint-ttl>p>span{
	display: block;
	font-size: 1.6rem;
	margin-top: -26px;
}

/*------------------
自慢ポイント
-------------------*/

.recommend{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10rem 10rem;
	list-style: none;
	text-align: center;
}
.recommend>li{
	width: 50%;
}
.recommend-comment{
	margin: 3rem;
	text-align: left;
}
.recommend-comment:first-of-type{
	margin-bottom: 5rem;
}
.recommend-comment h2{
	font-size: 26px;
	color: #E86D40;
	font-weight: bold;
}
.recommend-comment p:first-of-type{
	font-size: 20px;
	font-weight: bold;
} 
.point{
	margin: 5rem 0;
}
.point>h2{
	font-weight: 600;
	font-size: 3rem;
}
.point h2>span{
	color: #E86D40;
	margin: 1rem;
}
.contents-center{
	margin-top: 3rem;
	text-align: center;
}
.contents-center>p{
	display: inline-block;
	text-align: left;
}
.recommend-message>p>span{
	color: #E86D40;
	font-weight: 600;
	font-size: 3rem;
	margin-right: 1.5rem;
	vertical-align: middle;
}
.recommend-btn{
	margin: 0 20%;
}
.group-pic{
	margin: 5rem 10rem;
}
/*------------------------------
写真のスライド
------------------------------*/
/* スライドレールの枠 */
.content {
  width: 300px;
  height: 300px;
}
.wrap {
	overflow: hidden;
	display: flex;
	list-style: none;
	align-items: center;
	height: 340px;
	margin-bottom: 100px;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
	list-style: none;
  -webkit-animation: loop-slide 45s infinite linear 3s both;
  animation: loop-slide 45s infinite linear 3s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ホバー時に動きを止める（パターン2・3）*/
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* ホバー時の装飾（パターン3） */
.content-hover {
  transition: all 0.2s;
  margin-right: 20px;
}
.content-hover:hover {
  transform: translateY(-20px);
  opacity: 0.9;
  cursor: pointer;
}

/*------------------------------
各スペースの説明
------------------------------*/
.space-ex{
	margin: 10rem 0;
}
.space-1 ul{
	display: flex;
	list-style: none;
	margin: 3rem 10rem;
	width: 70%;
}
.space-1 ul li{
	margin-right: 1.5rem;
}
.space-2 ul{
	display: flex;
	justify-content: flex-end;
	list-style: none;
	margin: 3rem 10rem;
	padding-left: 20%;
}
.space-2 ul li{
	margin-right: 1.5rem;
}


/*------------------------------
写真
------------------------------*/
.pics{
	position: absolute;
}
.pic-1{
    position: relative;
    width: 47%;
    left: 45%;
}
.pic-2{
    position: relative;
    width: 40%;
    top: 15rem;
    right: 44%;
}
.pic-3{
	position: relative;
    width: 40%;
    top: 2.5rem;
    left: 55%;
}

/*------------------
フッター
-------------------*/
.base-footer{
	margin-top: 75%;
}



/*--------------------
中間サイズ
----------------------*/
@media screen and (max-width:1200px){
		.base-ex {
			margin: 5rem 3rem;
		}
		.base-ex h2{
		margin-bottom: 3rem;
		}
		.recommend{
		display: block;
		margin: 10rem 3rem;
		list-style: none;
		}
		.recommend>li{
			width: 100%;
		}
		.letter{
			color: white;
			font-size: 3rem;
			font-weight: 500;
			position: absolute;
			top: 53%;
			text-align: center;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	
		/*------------------------------
		各スペースの説明
		------------------------------*/
		.space-ex{
			margin: 10rem 0;
		}
		.space-1 ul{
			display: flex;
			list-style: none;
			margin: 3rem 3rem;
			width: 80%;
		}
		.space-1 ul li{
			margin-right: 1.5rem;
		}
		.space-2 ul{
			display: flex;
			justify-content: flex-end;
			list-style: none;
			margin: 3rem 3rem;
			padding-left: 20%;
		}
		.space-2 ul li{
			margin-right: 1.5rem;
		}

		/*------------------------------
		写真
		------------------------------*/
		.pics{
			position: absolute;
		}
		.pic-1{
			position: relative;
			width: 57%;
			left: 35%;
		}
		.pic-2{
			position: relative;
			width: 45%;
			top: 0.5rem;
			left: 5%;
		}
		.pic-3{
			position: relative;
			width: 35%;
			top: 2.5rem;
			left: 8%;
		}
		/*------------------
		フッター
		-------------------*/
		.base-footer{
			margin-top: 90%;
		}
}

/*-------------
*スマホ表示
--------------*/

@media screen and (max-width:750px){

		/*------------------------------
		f-view
		------------------------------*/

		.f-view{
			position: relative;
		}
		.f-view img{
			vertical-align: top;
		}
		.f-view::before {
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.4);
			display: block;
		}
		.letter{
			color: white;
			font-size: 2rem;
			font-weight: 500;
			position: absolute;
			top: 48%;
			text-align: center;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		/*------------------------------
		ベース大タイトル &　説明
		------------------------------*/
		.base-ex {
			margin: 3rem 2.5rem;
		}
		.base-ex h2{
			margin-bottom: 3rem;
		}
		.name-eng{
			margin-left: 0px;
			color: #E86D40;
			font-family: "futura", Gadget, "sans-serif";
		}
		.name-jp{
			font-size: 2.5rem;
			margin-top: -1rem;
		}
		.base-ex h3{
			font-size: 1.8rem;
			font-weight: 400;
			margin-bottom: 2rem;
		}
		.basepoint-ttl{
			text-align: center;
			margin-bottom: -2.2rem;
		}
		.basepoint-ttl>p{
			display: inline-block;
			color: #E86D40;
			font-family: "futura", Gadget, "sans-serif";
			font-size: 5rem;
			font-weight: 400;
		}
		.basepoint-ttl>p>span{
			display: block;
			font-size: 1.5rem;
			margin-top: -13px;
		}

		/*------------------
		自慢ポイント
		-------------------*/
		.recommend{
			margin: 5rem 2.5rem;
		}
		.recommend-comment{
			margin: 0rem;
		}
		.recommend-comment:first-of-type{
			margin-bottom: 3rem;
		}
		.recommend-comment:last-of-type{
			margin-bottom: 5rem;
		}
		.recommend-comment h2{
			font-size: 20px;
			color: #E86D40;
			font-weight: bold;
		}
		.recommend-comment p:first-of-type{
			font-size: 16px;
			font-weight: bold;
		} 
		.point{
			margin: 5rem 0;
		}
		.point>h2{
			font-weight: 600;
			font-size: 3rem;
		}
		.point h2>span{
			color: #E86D40;
			margin: 1rem;
		}
		.contents-center{
			margin-top: 3rem;
			text-align: center;
		}
		.contents-center>p{
			display: inline-block;
			text-align: left;
		}
		.recommend-message>p>span{
			color: #E86D40;
			font-weight: 600;
			font-size: 3rem;
			margin-right: 1.5rem;
			vertical-align: middle;
		}
		.recommend-btn{
			margin: 0 20%;
		}
	.point{
		margin: 0 2.5rem;
	}
	.group-pic{
	margin: 3rem 2.5rem;
}
		/*------------------------------
		写真のスライド
		------------------------------*/
		/* スライドレールの枠 */
		.content {
		  width: 230px;
		  height: 230px;
		}
		.wrap {
			overflow: hidden;
			display: flex;
			list-style: none;
			align-items: center;
			height: 340px;
			margin-bottom: 30px;
			pointer-events: none;
		}
		/* content4つをまとめたスライドブロック */
		.slideshow {
		  display: flex;
			list-style: none;
		  -webkit-animation: loop-slide 25s infinite linear 3s both;
		  animation: loop-slide 25s infinite linear 3s both;
		}

	

		/*------------------------------
		各スペースの説明
		------------------------------*/
		.space-ex{
			margin: 3rem 2.5rem;
		}
		.space-1{
			margin-bottom: 3rem;
		}
		.space-2{
			margin-bottom: 3rem;
		}
		.space-1 ul{
			display: flex;
			list-style: none;
			margin: 0rem;
			width: 100%;
			scroll-snap-type: x mandatory;
			overflow-x: scroll;
			 -webkit-overflow-scrolling: touch; /* スマホ対応のため必須 */
			overflow-scrolling: touch; /* スマホ対応のため必須 */
		}
		.space-1 ul li{
			margin: 2rem 5px;
			width: 85%;
		    scroll-snap-align: center;
			height: 100%;
			flex: none;
		}
		.space-1 ul li p{
			text-align: left;
		}
		.space-2 ul{
			display: flex;
			justify-content: flex-start;
			list-style: none;
			margin: 0rem;
			padding-left: 0%;
			scroll-snap-type: x mandatory;
			overflow-x: scroll;
			 -webkit-overflow-scrolling: touch; /* スマホ対応のため必須 */
			overflow-scrolling: touch; /* スマホ対応のため必須 */

		}
		.space-2 ul li{
			margin: 2rem 5px;
			width: 85%;
		    scroll-snap-align: center;
			height: 100%;
			flex: none;
		}
		.space-2 ul li p{
			text-align: left;
		}

		/*------------------------------
		写真
		------------------------------*/
		.pics-sp{
			margin: 5rem 2.5rem;
		}
		/*------------------
		フッター
		-------------------*/
	.base-footer{
		margin-top: 0;
	}
	
}