@charset "utf-8";


/* index1 */
#index1{background: url(../images/top/bg-index1.jpg) center center /cover no-repeat;}
#index1 .container{max-width: 1500px;padding: 0;}

#index1 h2{ line-height: 1; text-align: center; font-weight: bold; color:#FFF; border-bottom: 4px solid #fff; margin-bottom: 45px;}
#index1 h2 span{ font-size:21px; font-weight:bold; color:#ab987a;}
#index1 p{ line-height:2.8; color:#FFF;}


.balloon{background: url(../images/common/bg-balloon.png) center center /contain no-repeat;color:#fff;width: 100px;height: 96px;margin: 0 auto 5px;font-size: 16px;line-height: 18px;padding: 25px 5px;text-shadow:none;}


section h2{text-align: center;font-size: 42px;margin-bottom: 75px;font-weight: normal}
	@media only screen and (max-width:991px)	{section h2{font-size: 24px;margin-bottom: 30px;}}

section h3{text-align: center;font-size: 18px;margin-bottom: 45px;font-weight: normal;}


#index2{padding:0;}
#index2 h2{
	text-align:left;
	font-size: 60px;
	font-weight:bold;
	margin-bottom: 30px;
	}
	@media only screen and (max-width:991px)	{#index2{ padding:45px 0;}
		#index2 h2{font-size: 29px;font-weight: bold;margin-bottom: 15px;}}

#index2 .inner{ padding:0px 20px;}
@media only screen and (max-width:991px)	{#index2 .inner{ padding:0px;}}

#index3{}


.tit-mini{color:#666;}
.tit-light{color:#0093d3;position: relative;}
.tit-standard{color:#f4e603;}
.tit-advance{color:#cc006b;}




#index3 .balloon{width: 50px;height: 48px;text-align: center;font-size: 12px;line-height: 14px;padding: 7px 5px 10px;position: absolute;left: 180px;bottom: 10px;display: block;}
	@media only screen and (max-width:991px)	{#index3 .balloon{left: 150px;bottom: 5px;}}

.square-content{ display: block; height: 0; width: 100%; padding-bottom: 75%; position:relative; overflow:hidden; margin-bottom:20px;}
.square-content h3{font-size:36px;color:#fff;line-height: 30px;padding:10px;position:absolute;top:0;bottom:0;}
.square-content h3 span{ font-size:18px; display:block; padding-top:15px;}

.bg_appeal01{
	background: url(../images/top/image1.jpg) no-repeat center center;
	background-size: auto 100%;
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	-ms-transition:0.5s ease-in-out;
	-o-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;
	overflow:hidden;
}

.bg_appeal02{
	background: url(../images/top/image2.jpg) no-repeat center center;
	background-size: auto 100%;
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	-ms-transition:0.5s ease-in-out;
	-o-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;
	overflow:hidden;
}

.square-content > div { position: absolute; top: 37%;}
.square-content-inner { display: flex; justify-content: center; align-items: center; width: 100%;}
.square-content:hover {
    background-size: auto 110%;
    transition: all 0.5s ease-in;
}

#index4{background: url(../images/top/bg-index1.jpg) center center /cover no-repeat;}
	@media only screen and (max-width:991px)	{#index4{background: url(../images/top/bg-index1.jpg) 20% bottom /250% no-repeat;padding-bottom: 100%;}}

#index4 h2{color:#0e2f49;}

#index4 h3{text-align: left;font-weight: bold;color:#0e2f49;margin-bottom: 30px;}

#index5{background: url(../images/top/bg-index2.jpg) center center /cover no-repeat #00c1ff;color:#fff;}
	@media only screen and (max-width:991px)	{#index5{background: url(../images/top/bg-index2.jpg) center center /cover no-repeat;}}

#index5 h2{color:#fff;text-align: left;font-size: 60px;font-weight: bold;margin-bottom: 30px;}
	@media only screen and (max-width:991px)	{#index5 h2{font-size: 29px;font-weight: bold;margin-bottom: 15px;}}

.index5-copy img{}
	@media only screen and (max-width:991px)	{.index5-copy img{width: 290px;height: auto;}}

#index5 .lead{font-size: 30px;line-height: 36px;margin: 30px 0;}
	@media only screen and (max-width:991px)	{#index5 .lead{font-size: 21px;line-height: 27px;margin: 15px 0;}}


.check{list-style: none;}
.check li{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 24px;padding-left: 24px;}}

.check li:before{content: "";background: url(../images/common/checkmark.png) left center /30px no-repeat;width: 30px;height: 48px;display: block;position: absolute;top: 0;left: 0;right: 0;}
	@media (max-width:991px)	{.check li:before{width: 30px;height: 24px;background-size:20px;}}

.comment{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 24px;padding-left: 24px;}}

#index6{}
#index6 h2{color:#fff;}

#index6 h3{
	text-align: center;
	font-size: 20px;
	margin-bottom: 10px;
}
#index6 h3 small{font-size: 12px;display: block;color:#333;}

.point{color:#ab987a;}

#index7{}
#index7 h2{color:#0e2f49;}

.qabox{position: relative;word-wrap: break-word;background: #fff;}
	@media only screen and (max-width:991px)	{.qabox{}}

.qabox dt{background: #f6f6f6;display: block;position: relative;overflow: hidden;font-size: 24px;line-height: 30px;padding:45px 0 45px 60px;color:#00c1ff;font-weight: normal;}
	@media only screen and (max-width:991px)	{.qabox dt{font-size: 15px;line-height: 1.25;padding:15px 0 15px 45px;}}

.qabox dt .container:before{content: "Q.";display: inline-block;width: 60px;font-size: 30px;margin-left: -60px;}
	@media only screen and (max-width:991px)	{.qabox dt .container:before{width: 45px;margin-left: -45px;}}


.qabox dd{background: #fff;display: block;position: relative;overflow: hidden;padding:45px 0 45px 60px;font-weight: normal;}
	@media only screen and (max-width:991px)	{.qabox dd{line-height: 1.25;padding:15px 0 15px 45px;}}

.qabox dd .container:before{content: "A.";display: inline-block;width: 60px;font-size: 30px;margin-left: -60px;color:#00c1ff;}
	@media only screen and (max-width:991px)	{.qabox dd .container:before{width: 45px;margin-left: -45px;}}




.qabox dd p{margin-top: -25px;}

.qabox + .qabox{margin-top: 45px;}
	@media only screen and (max-width:767px)	{.qabox + .qabox{margin-top: 10px;}}

#index8{}
#index8 h2{color:#0e2f49;}

.news-box{}

.news-article{display: table;width: 100%;align-items:center;}
	@media only screen and (max-width:991px)	{.news-article{display: block;}}

.news-article + .news-article{margin-top: 15px;}

.news-date,.news-comment{display: table-cell;vertical-align: top;}
	@media only screen and (max-width:575px)	{.news-date,.news-comment{display: block;}}

.news-date{width: 110px;text-align: center;padding: 9px 0;}
	@media only screen and (max-width:991px)	{.news-date{width: auto;}}

.news-date.shp{border-bottom: 1px solid #f12795;}
.news-date.tpc{border-bottom: 1px solid #00c1ff;}

.news-comment{border-bottom: 1px solid #999;padding: 9px 15px;}
	@media only screen and (max-width:991px)	{.news-comment{}}



#index9{}
#index9 h2{color:#0e2f49;}

#index10{}
#index10 h2{color:#fff;}

#index11{background: url(../images/top/bg-index3.jpg) center center /cover no-repeat #00c1ff;color:#fff;}
	@media only screen and (max-width:991px)	{#index11{background: url(../images/top/bg-index3-sp.jpg) center center /cover no-repeat;padding-bottom: 90%;}}

#index11 h2{color:#fff;text-align: left;font-size: 60px;font-weight: bold;margin-bottom: 30px;}
	@media only screen and (max-width:991px)	{#index11 h2{font-size: 29px;font-weight: bold;margin-bottom: 15px;}}

.index11-copy img{}
	@media only screen and (max-width:991px)	{.index11-copy img{width: 290px;height: auto;}}

#index11 .lead{font-size: 30px;line-height: 36px;margin: 30px 0;}
	@media only screen and (max-width:991px)	{#index11 .lead{font-size: 21px;line-height: 27px;margin: 15px 0;}}


.check{list-style: none;}
.check li{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 24px;padding-left: 24px;}}

.check li:before{content: "";background: url(../images/common/checkmark.png) left center /30px no-repeat;width: 30px;height: 48px;display: block;position: absolute;top: 0;left: 0;right: 0;}
	@media (max-width:991px)	{.check li:before{width: 30px;height: 24px;background-size:20px;}}

.comment{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 18px;padding-left: 24px;}}