/* --------------------------------------------------- */
#main-visual {
	width: 100%;
	height: 760px;
	position: relative;
	margin-bottom: 40px;
}
#main-visual .mv {
	width: 90%;
	height: 640px;
	background: url(../images/top/mv.jpg) no-repeat center center;
	background-size: cover;
	border-top-right-radius:40px;
	border-bottom-right-radius:40px;
}
#main-visual .mv_ttl {
	background-color: #FFA15C;
	color: #fff;
	width: 50%;
	position: absolute;
	right: 3%;
	bottom: 0;
	padding: 40px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
#main-visual .mv_ttl h2 {
	margin-bottom: 25px;
	font-size: 180%;
	font-family: kan48typos-std, sans-serif;
	font-weight: 400;
}
#main-visual .mv_ttl h2 br {
	display: none;
}
#main-visual .mv_ttl p {
}
#main-visual .point1,
#main-visual .point2 {
	display: block;
	background: url(../images/common/mizutama1.png) no-repeat center center;
	background-size: cover;
}
#main-visual .point1 {
	position: absolute;
	width: 160px;
	height: 160px;
	right: 10%;
	bottom: 30%;
	animation: fuwafuwa 4s infinite ease-in-out;
}
#main-visual .point2 {
	position: absolute;
	width: 70px;
	height: 70px;
	right: 5%;
	bottom: 25%;
	animation: fuwafuwa2 3s infinite ease-in-out;
}
@keyframes fuwafuwa {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -10px);}
  100% {transform: translate(0, 0);}
}
@keyframes fuwafuwa2 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -5px);}
  100% {transform: translate(0, 0);}
}
/* --------------------------------------------------- */
#top1 {
	max-width: 1100px;
	width: 100%;
	margin: 0px auto 50px;
	position: relative;
}
#top1 .inner {
	max-width: 650px;
	width: 85%;
	margin: 0px auto 100px;
	position: relative;
	z-index: 5;
}
#top1 .inner ul {
}
#top1 .inner li {
	width: 100%;
	display: table;
	margin-bottom: 10px;
}
#top1 .inner li p {
	display: table-cell;
	vertical-align: top;
}
#top1 .inner li p:first-child {
	width: 130px;
	font-family: kan48typos-std, sans-serif;
	font-weight: 400;
	font-size: 80%;
}
#top1 .inner li p a {
}
#top1 .inner li p a:hover {
}
#top1 .point1,
#top1 .point2 {
	display: block;
	background: url(../images/common/mizutama2.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	z-index: 0;
}
#top1 .point1 {
	width: 250px;
	height: 250px;
	left: 0%;
	top: -13%;
	animation: fuwafuwa3 5s infinite ease-in-out;
}
#top1 .point2 {
	width: 50px;
	height: 50px;
	left: 16%;
	bottom: 6%;
	animation: fuwafuwa3 4s infinite ease-in-out;
}
@keyframes fuwafuwa3 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -15px);}
  100% {transform: translate(0, 0);}
}
@keyframes fuwafuwa4 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, 5px);}
  100% {transform: translate(0, 0);}
}
/* --------------------------------------------------- */
#top2 {
	width: 100%;
	position: relative;
	margin-bottom: 130px;
}
#top2 .point1,
#top2 .point2 {
	display: block;
	background: url(../images/common/mizutama3.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	z-index: 5;
}
#top2 .point1 {
	width: 200px;
	height: 200px;
	right: 1%;
	top: 5%;
	animation: fuwafuwa6 3s infinite ease-in-out;
}
#top2 .point2 {
	width: 40px;
	height: 40px;
	right: 15%;
	top: -5%;
	animation: fuwafuwa6 4s infinite ease-in-out;
}
@keyframes fuwafuwa5 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -10px);}
  100% {transform: translate(0, 0);}
}
@keyframes fuwafuwa6 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -5px);}
  100% {transform: translate(0, 0);}
}
#top2 .back {
	width: 100%;
	background-color: #FFA15C;
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 45%;
	bottom: 4%;
}
#top2 .inner {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	max-width: 1000px;
	width: 90%;
	margin: 0px auto;
	position: relative;
	z-index: 10;
}
#top2 .inner dl {
	float: left;
	width: 47.5%;
	margin-right: 5%;
}
#top2 .inner dl:nth-child(2) {
	margin-right: 0;
}
#top2 .inner dt {
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
}
#top2 .inner dd {
	color: #fff;
}
#top2 .inner dd strong {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-family: kan48typos-std, sans-serif;
	font-weight: 400;
	font-size: 140%;
}
#top2 .inner dd strong br {
	display: none;
}
#top2 .inner dd p {
	margin-bottom: 20px;
}
#top2 .inner dd a {
	display: block;
	text-align: center;
	color: #FFA15C;
	border: #FFA15C 2px solid;
	background-color: #fff;
	font-weight: 400;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	padding: 10px 0;
}
#top2 .inner dd a:hover {
	background-color: #FFA15C;
	color: #fff;
	border: #fff 2px solid;
}
/* --------------------------------------------------- */
#top3 {
	width: 100%;
	position: relative;
	margin-bottom: 50px;
}
#top3 .point1,
#top3 .point2,
#top3 .point3 {
	display: block;
	background: url(../images/common/mizutama4.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	z-index: 0;
}
#top3 .point1 {
	width: 150px;
	height: 150px;
	left: 40%;
	top: 20%;
	animation: fuwafuwa7 5s infinite ease-in-out;
}
#top3 .point2 {
	width: 80px;
	height: 80px;
	right: 10%;
	bottom: 25%;
	animation: fuwafuwa8 3s infinite ease-in-out;
}
#top3 .point3 {
	width: 130px;
	height: 130px;
	left: 5%;
	bottom: 30%;
	animation: fuwafuwa9 6s infinite ease-in-out;
}
@keyframes fuwafuwa7 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(10px, -10px);}
  100% {transform: translate(0, 0);}
}
@keyframes fuwafuwa8 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -10px);}
  100% {transform: translate(0, 0);}
}
@keyframes fuwafuwa9 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(-5px, -20px);}
  100% {transform: translate(0, 0);}
}
#top3 .box1,
#top3 .box2 {
	width: 100%;
	position: relative;
	z-index: 10;
	overflow: hidden;
	margin-bottom: 50px;
}
#top3 .box1 .ph,
#top3 .box2 .ph {
	overflow: hidden;
	height: 300px;
	width: 45%;
}
#top3 .box1 .ph01 {
	background: url(../images/top/ph03.jpg) no-repeat center center;
	background-size: cover;
}
#top3 .box2 .ph02 {
	background: url(../images/top/ph04.jpg) no-repeat center center;
	background-size: cover;
}
#top3 .box1 .ph03 {
	background: url(../images/top/ph05.jpg) no-repeat center center;
	background-size: cover;
}
#top3 .box1 .ph {
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
	float: left;
	margin-right: 3%;
}
#top3 .box2 .ph {
	border-top-left-radius:30px;
	border-bottom-left-radius:30px;
	float: right;
	margin-left: 3%;
}
#top3 .box1 dl,
#top3 .box2 dl {
	max-width: 540px;
	width: 45%;
	margin-top: 5%;
}
#top3 .box1 dl {
	float: left;
}
#top3 .box2 dl {
	float: right;
}
#top3 .box1 dt,
#top3 .box2 dt {
	margin-bottom: 20px;
	font-family: kan48typos-std, sans-serif;
	font-weight: 400;
	font-size: 130%;
	color: #FFA15C;
	line-height: 160%;
}
#top3 .box1 dd,
#top3 .box2 dd {
}
/* --------------------------------------------------- */
#top4 {
	width: 100%;
	display: table;
	position: relative;
	background-color: #FFA15C;
}
#top4 .point1,
#top4 .point2 {
	display: block;
	background: url(../images/common/mizutama5.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	z-index: 10;
}
#top4 .point1 {
	width: 130px;
	height: 130px;
	left: 40%;
	bottom: -5%;
	animation: fuwafuwa10 5s infinite ease-in-out;
}
#top4 .point2 {
	width: 30px;
	height: 30px;
	left: 58%;
	bottom: -10%;
	animation: fuwafuwa11 3s infinite ease-in-out;
}
@keyframes fuwafuwa10 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -10px);}
  100% {transform: translate(0, 0);}
}
@keyframes fuwafuwa11 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, -5px);}
  100% {transform: translate(0, 0);}
}
#top4 .ph,
#top4 dl {
	position: relative;
	z-index: 0;
	display: table-cell;
}
#top4 .ph {
	width: 55%;
	background: url(../images/top/ph06.jpg) no-repeat center top 5%;
	background-size: cover;
}
#top4 dl {
	width: 45%;
	color: #fff;
	padding: 40px;
}
#top4 dt {
	font-family: kan48typos-std, sans-serif;
	margin-bottom: 20px;
	font-size: 90%;
	line-height: 160%;
}
#top4 dt strong {
	display: block;
	font-size: 180%;
	font-weight: 400;
}
#top4 dd {
}
#top4 dd p {
	margin-bottom: 15px;
}
#top4 dd a {
	display: block;
	text-align: center;
	color: #FFA15C;
	border: #FFA15C 2px solid;
	background-color: #fff;
	font-weight: 400;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	padding: 10px 0;
	max-width: 500px;
	width: 100%;
}
#top4 dd a:hover {
	background-color: #FFA15C;
	color: #fff;
	border: #fff 2px solid;
}
/* --------------------------------------------------- */


@media screen and (max-width: 1030px) {
	#main-visual .mv_ttl {
		padding: 35px;
	}
	#main-visual .mv_ttl h2 {
		font-size: 170%;
		margin-bottom: 15px;
	}
}
@media screen and (max-width: 900px) {
	/* --------------------------------------------------- */
	#main-visual {
		height: 550px;
	}
	#main-visual .mv {
		height: 480px;
	}
	#main-visual .mv_ttl {
		width: 80%;
		padding: 30px;
	}
	#main-visual .mv_ttl h2 {
		margin-bottom: 15px;
		font-size: 160%;
	}
	#main-visual .point1 {
		width: 120px;
		height: 120px;
		right: 7%;
		bottom: 30%;
	}
	#main-visual .point2 {
		width: 40px;
		height: 40px;
		right: 2%;
		bottom: 25%;
	}
	/* --------------------------------------------------- */
	#top3 .box1 dt,
	#top3 .box2 dt {
		font-size: 120%;
	}
	#top3 .box1 dt br,
	#top3 .box2 dt br {
		display: none;
	}
	/* --------------------------------------------------- */
}
@media screen and (max-width: 680px) {
	/* --------------------------------------------------- */
	#main-visual {
		height: 450px;
	}
	#main-visual .mv {
		height: 400px;
	}
	#main-visual .mv_ttl {
		width: 94%;
		padding: 25px 30px;
		right: 3%;
	}
	#main-visual .mv_ttl h2 {
		margin-bottom: 15px;
		font-size: 140%;
	}
	#main-visual .mv_ttl h2 br {
		display: block;
	}
	#main-visual .point1 {
		width: 90px;
		height: 90px;
		right: 7%;
		bottom: 35%;
	}
	#main-visual .point2 {
		width: 30px;
		height: 30px;
		right: 1%;
		bottom: 25%;
	}
	/* --------------------------------------------------- */
	#top1 .inner {
		margin: 0px auto 50px;
	}
	#top1 .inner ul {
	}
	#top1 .inner li,
	#top1 .inner li p {
		display: block;
	}
	#top1 .inner li {
		margin-bottom: 10px;
	}
	#top1 .inner li p {
	}
	#top1 .inner li p:first-child {
		width: 100%;
	}
	#top1 .point1,
	#top1 .point2 {
		background-color:rgba(255,255,255,0.8);
		background-blend-mode:lighten;
	}
	#top1 .point1 {
		width: 200px;
		height: 200px;
		left: 0%;
		top: 5%;
	}
	#top1 .point2 {
		left: 55%;
		bottom: 15%;
	}
	/* --------------------------------------------------- */
	#top2 .back {
		top: 35%;
		bottom: 4%;
	}
	#top2 .inner dd strong {
		margin-bottom: 20px;
		font-size: 130%;
		line-height: 140%;
	}
	#top2 .inner dd strong br {
		display: block;
	}
	/* --------------------------------------------------- */
	#top3 {
		margin-bottom: 0px;
	}
	#top3 .box1,
	#top3 .box2 {
		margin-bottom: 40px;
	}
	#top3 .box1 .ph,
	#top3 .box2 .ph {
		overflow: hidden;
		height: 250px;
		width: 30%;
	}
	#top3 .box1 dl,
	#top3 .box2 dl {
		width: 60%;
	}
	#top3 .box1 dl {
		padding-left: 4%;
	}
	#top3 .box2 dl {
		padding-right: 4%;
	}
	#top3 .point1,
	#top3 .point2,
	#top3 .point3 {
		background-color:rgba(255,255,255,0.8);
		background-blend-mode:lighten;
	}
	/* --------------------------------------------------- */
	#top4 .ph {
		width: 40%;
	}
	#top4 dl {
		width: 60%;
		padding: 30px;
	}
	#top4 .point1 {
		width: 100px;
		height: 100px;
		left: 20%;
		bottom: -5%;
	}
	#top4 .point2 {
		width: 20px;
		height: 20px;
		left: 38%;
		bottom: -10%;
	}
	/* --------------------------------------------------- */
}