/* ######################################################################################

　トップページ

###################################################################################### */



/* ====================================================
  メインイメージ
==================================================== */
.mainImg .animation {position:relative;}

.ani___static,
.ani___static img {display:block; width:100%; height:auto; }

.ani___movie {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1;
}
.ani___movie.is-fadeout {opacity:0;}






/* ====================================================
  共通
==================================================== */
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 767px) {
}

/*帯*/
#appeal-area { background: #99784f; padding: 10px; overflow: hidden;}
#appeal-area ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 1260px;
	margin: auto;
	font-family: 'Noto Serif JP', serif;
    font-weight:normal;
	color: #fff;
}
#appeal-area ul li { margin: 10px 0px; padding: 0 15px; border-left: 1px solid #fff; font-size: 200%; line-height: 1; }
#appeal-area ul li:first-child,
#appeal-area ul li:nth-child(5){ border-left: none;}
#appeal-area ul li .flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: baseline;
}
#appeal-area ul li .flex .left { font-size: 125%; text-align: left;}
#appeal-area ul li .flex .left i {
    display: block;
    font-size: 40%;
    font-style: normal;
    padding-top: 5px;
}
#appeal-area ul li .flex .right { margin-left: 10px;}
#appeal-area ul li .flex .right em {
	font-size: 220%;
	padding-right: 5px;
}

@media screen and (max-width: 767px) {
	#appeal-area ul li {
		margin: 2px 0px;
		padding: 0;
		border-left:none;
		font-size: 165%;
		width: 100%;
	}
	#appeal-area ul li .flex .left { text-align: center;}
}

#merit-area{font-family: 'Noto Serif JP', serif;}
#merit-area .bgocean {
	background: url("../../images/top/bg_ocean.jpg") 50% 50% no-repeat;
	color: #fff;
}
#merit-area .bggreen { background: linear-gradient(45deg, #047183, #398e9b 52%, #047183); color: #fff;}
#merit-area .bgocean a,
#merit-area .bggreen a { color: #fff; transition: 0.5s;}
#merit-area .bgocean a:hover,
#merit-area .bggreen a:hover {box-shadow: 0px 0px 0px #000; }

#merit-area .lefttext,
#merit-area .righttext { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;}

#merit-area .lefttext .photobox,
#merit-area .righttext .photobox { width: 50%;}

#merit-area .lefttext .photobox {margin-right:auto;}
#merit-area .righttext .photobox {margin-left:auto;}

#merit-area .lefttext .textbox,
#merit-area .righttext .textbox {
	width: 55%;
    position: absolute;
	padding: 4%;
	box-shadow: 0px 0px 20px #000;
    z-index: 1;
	transform: translateY(-50%);
    top: 50%;
}
#merit-area .lefttext .textbox{
    right: 0;
   	background: #fff;
	color: #222;
}
#merit-area .righttext .textbox{
    left: 0;
	background: #fff;
	color: #222;
}
#merit-area .morebtn { padding: 10px; width: 60%; margin:15px auto 0; letter-spacing: 0.085em;}
#merit-area .lefttext .textbox .morebtn { background: linear-gradient(45deg, #047183, #398e9b 52%, #047183); border: solid 1px #fff; color: #fff;}
#merit-area .righttext .textbox .morebtn { background: linear-gradient(45deg, #047183, #398e9b 52%, #047183); border: solid 1px #fff; color: #fff;}

#merit-area .textbox dl{ text-align: center;}
#merit-area .textbox dl dt { font-size: 200%; letter-spacing: 0.085em;}
#merit-area .textbox dl dt:after {
	content: "|";
	display:block;
	color: #222;
	font-size: 15px;
	line-height: 1;
	margin-bottom: 15px;
}
#merit-area .textbox dl dd { font-size: 135%;}

@media screen and (max-width: 767px) {
	#merit-area .lefttext .photobox,
	#merit-area .righttext .photobox { width: 100%;}
	#merit-area .lefttext .textbox, #merit-area .righttext .textbox { width: 80%; opacity: 0.9; top: 60%;}
	#merit-area .textbox dl dt { font-size: 190%; }
	#merit-area .textbox dl dd { font-size: 125%;}
}




/* end */