@charset "utf-8";


/* index1 */
#index1{padding: 0;}
#index1 .container{max-width: 1500px;padding: 0;}

.appeal-tb,.appeal-top,.appeal-bottom{display: table;width: 100%;table-layout: fixed;}
	@media (max-width:991px)	{.appeal-tb,.appeal-top,.appeal-bottom{display: block;}}

.appeal-left,.appeal-right{display: table-cell;width: 50%;vertical-align: middle;overflow: hidden;}
	@media (max-width:991px)	{.appeal-left,.appeal-right{display: block;width: 100%;}}


.appeal1,.appeal2,.appeal3,.appeal4,
.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,
.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus
{text-align: center;padding:30px 15px;}

.appeal4,.appeal4:hover,.appeal4:active,.appeal4:focus{padding-left: 50%;display: table-cell;vertical-align: middle;}


.appeal1,.appeal2,.appeal3,.appeal4{position: relative;}

.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,
.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus{opacity:.75;overflow: hidden;}


.appeal1 *,.appeal2 *,.appeal3 *,.appeal4 *{position: relative;z-index: 1;}


.appeal1 h2,.appeal2 h2,.appeal3 h2,.appeal4 h2{font-size: 16px;line-height: 1;margin-bottom: 15px;font-weight: bold;}

.appeal1,.appeal2,.appeal3,.appeal4,
.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,
.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus{color:#fff;text-shadow: 0 0 3px #000;}

.appeal2,.appeal3,.appeal4,
.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal2:active,.appeal3:active,.appeal4:active,
.appeal2:focus,.appeal3:focus,.appeal4:focus{height: 300px;}

.appeal1:before,.appeal2:before,.appeal3:before,.appeal4:before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-position: center center;background-size:cover;background-repeat: no-repeat;transform-origin:50% 50%;transform:scale(1.0);transition:.5s;}

.appeal1:before,.appeal1:hover:before,.appeal1:active:before,.appeal1:focus:before{background-image: url(../images/top/appeal1.jpg);height: 600px;}
.appeal2:before,.appeal2:hover:before,.appeal2:active:before,.appeal2:focus:before{background-image: url(../images/top/appeal2.jpg);}
.appeal3:before,.appeal3:hover:before,.appeal3:active:before,.appeal3:focus:before{background-image: url(../images/top/appeal3.jpg);}
.appeal4:before,.appeal4:hover:before,.appeal4:active:before,.appeal4:focus:before{background-image: url(../images/top/appeal4.jpg);}

	@media (max-width:991px)	{.appeal1,.appeal2,.appeal3,.appeal4,.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus{height: auto;}}

	@media (max-width:991px)	{.appeal4,.appeal4:hover,.appeal4:active,.appeal4:focus{display: block;padding-left: 15px;}}

.appeal1:hover:before,.appeal1:active:before,.appeal1:focus:before,
.appeal2:hover:before,.appeal2:active:before,.appeal2:focus:before,
.appeal3:hover:before,.appeal3:active:before,.appeal3:focus:before,
.appeal4:hover:before,.appeal4:active:before,.appeal4:focus:before{transform-origin:50% 50%;transform:scale(1.1);transition:.5s;}




.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{background: url(../images/top/bg-index1.jpg) bottom right no-repeat;}
@media (max-width:991px)	{#index2{background: none;text-align: left;}}
#index2 h2{font-size:32px;line-height: 1;color:#3567bf;font-weight: bold;margin-bottom: 45px; text-align:left;}
	@media (max-width:991px)	{#index2 h2{font-size:24px;padding-bottom: 15px;margin-bottom: 15px;}}

#index2 .h2-lead{font-size: 30px;text-align: left;font-weight: bold;}
	@media (max-width:991px)	{.h2-lead{font-size: 18px;}}

#index2 .h2-sublead{font-size: 24px;text-align: left; margin-bottom:20px;color: #000; font-weight:bold;}
	@media (max-width:991px)	{.h2-sublead{font-size: 16px;}}

	@media only screen and (max-width:991px)	{section h2{font-size: 24px;margin-bottom: 30px;}}
#index2 .inner{ padding:20px; border-radius:20px; background:rgba(255,255,255,0.4); display:inline-block;}

.hhh-1003{font-size: 36px;line-height: 1.25;position: relative; margin-top:45px; margin-bottom: 45px;color:#333;text-align: center;padding-bottom: 30px;}
	@media only screen and (max-width:991px)	{.hhh-1003{font-size: 18px;padding-bottom: 15px;margin-bottom: 20px;}}

.hhh-1003:after{content: "";width: 3.2em;height: 2px;position: absolute;left: 50%;right: 50%;bottom: 0;margin:0 -1.6em;background: #000;display: block;}
	@media only screen and (max-width:991px)	{.hhh-1003:after{display: block;}}

.lead{font-size:24px;margin:75px 0;}
	@media (max-width:991px)	{.lead{font-size:16px;line-height: 1.5;margin: 30px 0;}}

.lead:first-child{margin-top: 0;}

.icon-intro{ max-width:250px;}

.notes{font-size: 12px;color:#df241b;line-height: 1;margin-top: 15px;}


.plan-tb{}
.plan-tb th,.plan-tb td{border-bottom: 1px solid #ddd;padding: 7px;}
.plan-tb th{font-weight: normal;}
.plan-tb td{color:#333;font-weight: bold;text-align: right;}

.plan-tb.total td{font-size: 30px;}
.plan-tb.total td small{font-size: 14px;}

#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:#000;}
#index4 h2 span{font-size:56px; font-weight:bold; color:#1eb9c0;}

#index4 h3{text-align: left;font-weight: bold;color:#000;margin-bottom: 30px;}
#index4 h3 span{text-align: left;font-size:24px;font-weight: bold;color:#1eb9c0;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:#000;}

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

.point{color:#1eb9c0;}

#faq{}
/*#faq h2{color:#000;}*/

.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:#319299;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:#FBB202;}
	@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: #000; font-weight: bold;}

.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 #ff8a00;}
.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{display: block;}}

.red{ color:#F00; font-size:80%; font-weight:bold;}


#index9{}
#index9 h2{color:#000; position:relative; padding-top:50px;}
#index9 h2::before{background-image: url(../images/top/recommend.jpg);content: ""; background-size: 200px 200px; background-repeat: no-repeat; position: absolute; top: -75px; left: 50%;margin-left: -500px; width: 200px; height: 200px; }
#index9 h2::after{background-image: url(../images/top/line.jpg);content: "";position: absolute; height:2px; width:100%; left:0; right:0; top:125px;}

@media only screen and (max-width:991px)	{#index9 h2{ margin-bottom:255px;}
#index9 h2::before{margin-left:0; top:75px;margin-left: -80px;}
#index9 h2::after{top:275px;}}

#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;}}


#about{ background:#f9f9f9;}
#about h2{
	text-align:left;
	font-size: 42px;
	font-weight:bold;
	margin-bottom: 30px;
	color:#000;
	}
#about h2 span{ display:block;font-size:24px; color:#000}
	@media only screen and (max-width:991px)	{#about{ padding:45px 0;}
		#about h2{font-size: 28px;font-weight: bold;margin-bottom: 15px;}#about h2 span{ display:block;font-size:20px; }}
#about h3{
	text-align:left;
	font-size: 32px;
	font-weight:bold;
	color:#3567bf;
	margin-bottom: 30px;
	}
	@media only screen and (max-width:991px)	{#about{ padding:45px 0;}
		#about h3{font-size: 21px;font-weight: bold;margin-bottom: 15px;}
		#about .inner{ margin-bottom:40px;}}
#about .inner{ padding:0px 20px;}
@media only screen and (max-width:991px)	{#about .inner{ padding:0px;}}

#about2{background: url(../images/top/bg_about2.png) bottom center; padding:0;}
#about2 h2{
	text-align:left;
	font-size: 50px;
	font-weight:bold;
	margin-bottom: 30px;
	}
#about2 h2 span{ display:block;font-size:44px; color:#d50032}
	@media only screen and (max-width:991px)	{#about2{ padding:45px 0;}
		#about2 h2{font-size: 29px;font-weight: bold;margin-bottom: 15px;}#about2 h2 span{ display:block;font-size:22px; color:#0A6098}}
#about2 h3{
	text-align:left;
	font-size: 32px;
	font-weight:bold;
	color:#0A6098;
	margin-bottom: 30px;
	}
	@media only screen and (max-width:991px)	{#about2{ padding:45px 0;}
		#about2 h3{font-size: 21px;font-weight: bold;margin-bottom: 15px;}}
#about2 .inner{ padding:0px 20px;}
@media only screen and (max-width:991px)	{#about2 .inner{ padding:0px;}}


@media only screen and (max-width:991px)	{#about img{ margin-bottom:30px;}}
#business{}
#business h2{color:#000; font-weight:bold;}

#business h3{
	text-align: center;
	font-size: 28px;
	font-weight:bold;
	margin-bottom: 10px;
	color:#3567bf;
}
#business h3 small{font-size: 12px;display: block;color:#333;}

.step{color:#69B82D;}


#index3{ padding-bottom:100px;}


.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;}}
#index3 h2 { color: #000; font-weight: bold;}
.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;
}
@media only screen and (max-width:991px)	{.square-content > div { position: absolute; top: 30%;}}
.square-frame{ position:relative;margin-bottom: 100px;}
.index3-inner{ position:absolute;left: 50%;width: 90%; bottom: -80px;transform: translate(-50%, 0); background: #333333;text-align: center;padding: 18px; color:#fff;}