@charset "utf-8";
html {font-size: 62.5%;}
body {padding:0; margin:0;/* background-color: #eae5e3;*/}
a{text-decoration: none;}
img{width: 100%;}
a img:hover{opacity: 0.7;}
#HE_wrap p {padding:0;margin:0;}

#HE_content {
	width: 100%;
	margin:0 auto; 
	padding: 0;
	background-color: #EEF7FB;
}

#HE_wrap {
	clear: both;
	width:100%;
	max-width: 800px;
	padding: 0 0 10%;
	margin:0 auto 0;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	color: #252525;	
	background-color: #fff;
	/*font-family: "Jost", sans-serif;*/
	/* font-family: "Montserrat", sans-serif;*/
	font-weight: 100;
	font-style: normal;
}


/*.brand-header{background-color: #f9f4ea;}*/

.main {
	width: 36%;
	margin:0% auto 10%;
}

.sp {display:none;}	
.clear {clear:both;}

.Lead_pc {
	width: 100%;
	margin: 0 auto 10%;
	display: block;
	text-align:center;
	font-size:1.6rem;
	padding:0 ;
	line-height:2em;
}

.Lead_sp {display: none;}

h1{width: 100%; font-size: 55px; margin: 5% auto 3%; font-weight: 500; text-align: center; }
h2{margin: 10% auto 5%; padding: 5px 0; font-size: 18px; border-top: 1px solid #353535; border-bottom: 1px solid #353535; font-weight: 400; text-align: left; text-indent: 2em;}
h3{width: 100%; font-size: 28px; margin: 10% auto 7%; font-weight: 500; text-align: center; }
p.sub_txt{width: 100%; font-size: 25px; margin: 0 auto 3%; font-weight: 400; text-align: center; }
.sml{font-size: 65%;}
/*.UL{background:linear-gradient(transparent 60%, #eed5b4 60%);}*/

/*ITEM*/
	


/*.main_box{width: 100%; margin: 0 auto; }*/

/*.item_box{width: 100%; margin: 0 auto 10%; display:flex; flex-wrap:wrap; justify-content: space-between;}
.item1{width: 30%; margin: 0;}*/


.nov_wrapper{width: 70%; margin: 3% auto 20%; /*background-color: #EEF7FB;*/ border: 2px dashed #C3D6EB; padding: 7% 5%; box-sizing: border-box;}
.nov_wrap{width: 100%; margin: 3% auto 0;}
.subttl_nov{width: 20%; margin: 0 auto 3%;}
.nov_box{width: 100%; margin: 8% auto 0; display:flex; flex-wrap:wrap; justify-content: space-between;}
.nov1{width: 47%; margin: 0; box-sizing: border-box;}
.nov2{width: 47%; margin: 5% 0 0; box-sizing: border-box;}

.set_wrap{width: 70%; margin: 3% auto;}
.subttl_set{width: 25%; margin: 0 auto 3%;}
.set_box{width: 100%; margin: 8% auto; display:flex; flex-wrap:wrap; justify-content: space-between;}
.set1{width: 47%; margin: 0;}
.set2{width: 50%; margin: 10% auto 0;}

.cmt{width: 100%; margin: 1% auto 5%; font-size: 14px; text-align: center; line-height: 2em;}
.cmt2{width: 100%; margin: 3% auto 5%; font-size: 12px; text-align: center; line-height: 1.8em;}

.point1 p{font-size: 15px; text-align: center; margin-top: 2%; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.point1 img{display: block; margin-bottom: 4%;}



.item_wrap {width: 80%; margin: 0 auto 15%;}

.item_box1 {width: 100%; margin: 0 auto; position: relative; height: 920px;}
.subttl_1{ width: 40%; position: absolute; top: 0; left: 4%;}
.item1_1{ width: 45%; position: absolute; top: 0; right:0;}
.item1_3{ width: 45%; position: absolute; top: 30%; left: 0; z-index: 10;}
.item1_2{ width: 45%; position: absolute; bottom: 0; right:12%; z-index: 100;}


.item_box2 {width: 100%; margin: 0 auto; position: relative; height: 800px;}
.subttl_2{ width: 40%; position: absolute; top: 0; right: 5%;}
.item2_2{ width: 40%; position: absolute; top: 5%; left:0;}
.item2_1{ width: 50%; position: absolute; top: 30%; right: 0;}
.item2_3{ width: 40%; position: absolute; bottom: 0; left:0;}

.item_box3 {width: 100%; margin: 0 auto; position: relative; height: 800px;}
.subttl_3{ width: 40%; position: absolute; top: 0; left: 4%;}
.item3_2{ width: 40%; position: absolute; top: 5%; right:0;}
.item3_1{ width: 50%; position: absolute; top: 30%; left: 0;}
.item3_3{ width: 40%; position: absolute; bottom: 0; right:0;}

.item_box4 {width: 100%; margin: 0 auto; position: relative; height: 920px;}
.subttl_4{ width: 40%; position: absolute; top: 0; right: 5%;}
.item4_1{ width: 35%; position: absolute; top: 0; left:0; z-index: 100;}
.item4_2{ width: 50%; position: absolute; top: 27%; left: 25%; z-index: 10;}
.item4_3{ width: 35%; position: absolute; bottom: 0; right:0; z-index: 100;}

/*
.star1{ width: 3%; position: absolute; top: 2%; left: 18%;}
.star2{ width: 10%; position: absolute; top: 0; right: 0;}
.moon{ width: 4%; position: absolute; top: 2%; right: 20%;}
.zzz{ width: 5%; position: absolute; top: 45%; right: 15%;}



.mr_T10{margin-top: 10%;}
.mr_B10{margin-bottom: 8%;}

.anime1{
    transform-origin: center bottom;
    animation: yurayura 4s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(8deg);
  }
  50%{
      transform: rotate(-8deg);
  }
}

.anime2 {
    animation: shake-up 3s infinite ease-in-out;
}

@keyframes shake-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.anime3 {
    animation: shake-side 3s infinite ease-in-out;
}

@keyframes shake-side {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}


.anime4 img {
  animation: deka 3s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes deka {
  from {
    transform: scale(0.7,0.7);
  }
  to {
    transform: scale(1,1);
  }
}*/

/*WAVE*/
/*.sample {
	overflow:hidden;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	width:800px;
	height:800px;
	background-color:#fff;
}

	.sample svg path {
		fill:#3168dd;
		animation:wave linear 4s infinite;
	}

@keyframes wave {
	from {
		transform:translate(0);
	}
	to {
		transform:translate(-66.66%);
	}
}*/

/*WAVE2------------------------------------------------------------------*/
@import url(//fonts.googleapis.com/css?family=Lato:300:400);

body {
  margin:0;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

#HE_content .header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, #83b3de 0%, #3d7bb8 100%);
  color:white;
}
/*.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}*/

#HE_content .inner-header {
  height:2vh;
  width:100%;
  margin: 0;
  padding: 0;
}

#HE_content .flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#HE_content .waves {
  position:relative;
  width: 100%;
  height:12vh;
  margin-bottom:-10px; /*Fix for safari gap*/
  min-height:80px;
  max-height:150px;
}

#HE_content .content {
  position:relative;
  height:50vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 45s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 10s;
}
.parallax > use:nth-child(2) {
  animation-delay: -7s;
  animation-duration: 20s;
}
.parallax > use:nth-child(3) {
  animation-delay: -12s;
  animation-duration: 30s;
}
.parallax > use:nth-child(4) {
  animation-delay: -17s;
  animation-duration: 40s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:50px;
    min-height:50px;
  }
  .content {
    height:38vh;
  }
  h1 {
    font-size:24px;
  }
}


.round-wrap {
  width: 200px;
  height: 200px;
}
.rotate {
  width: 100%;
  height: 100%;
  animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
    0%  {transform: rotate(0);}
  100%  {transform: rotate(-360deg);}
}
.round {
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
  animation: round_anime 5s linear infinite;
  background-color: #03A9F4;
}
@keyframes round_anime {
    0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
   50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}


/* General button style (reset) */
.btn {
	/* display: block;*/
    text-align: center;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 10px;
	border: none;
	color: #fff;
    background-color: #000;
	border: #000 1px solid;
}


/* Button 2 */
.btn-2 {
	display: block;
	width: 50%;
	margin: 15% auto 5%;
	padding: 10px 0;
    font-size: 17px;
	line-height: 1.5em;
	letter-spacing: 2px;
}

.btn:hover {
	color: #eee;
	background-color: #3d7bb8;
	border: solid 1px #3d7bb8;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}



.cmt{width: 100%; margin: 1% auto 0; text-align: center; font-size: 1.5rem;}

.coorde_box{width: 80%; margin: 0 auto;}


@media only screen and (max-width: 750px) {
	/*body {padding:0; margin:0; background-color: #fff;}*/
	.pc {display:none;}
	.sp {display:block;}

	.main {width: 62%; margin:0 auto 10%;}
	
	#HE_wrap {width:100%; padding: 0 0 10%; margin:0 auto -11%;}
	
	.Lead_pc {display: none;}

	.Lead_sp {
		width: 100%;
		display: block;
		text-align:center;
		font-size:15px;
		margin:2% auto 10%;
		line-height:1.8em;
	}

	
	h1{width: 100%; font-size: 40px; margin: 10% auto 3%; font-weight: 500; text-align: center; }
	h2{margin: 10% auto 5%; padding: 5px 0; font-size: 16px; border-top: 1px solid #353535; border-bottom: 1px solid #353535; font-weight: 400; text-align: left; text-indent: 2em;}
	h3{width: 100%; font-size: 22px; margin: 5% auto 3%; font-weight: 500; text-align: center; }
	p.sub_txt{width: 100%; font-size: 18px; margin: 0 auto 3%; font-weight: 400; text-align: center; }
/*ITEM*/
	.nov_wrapper{width: 90%; margin: 3% auto 20%; padding: 7% 5%; }

	.item_wrap {width: 100%; margin: 0 auto 25%;}
	.item_box1 {height: 160vw;}
	.item_box2 {height: 130vw;}
	.item_box3 {height: 130vw;}
	.item_box4 {height: 140vw;}
	
	.set_wrap{width: 90%; margin: 3% auto;}
	
	#HE_content .waves { position: relative; width: 100%; height: 7vh; margin-bottom: -9px;	 min-height: 50px; max-height: 110px;	}
/* Button */

	.btn-2 { width: 70%; margin: 20% auto; font-size: 15px; padding: 10px 0;	}



}