@charset "UTF-8";
/* CSS Document */
@media screen and (min-width: 1300px) {
h5 {
 background-size:100%;
}
#contact {
 background-size:100%;
}
#About_text_right_wrap {
 background-size:130%;
}
}
img {
	max-width: 100%;
	width /***/:auto;
	border-style:none;/*リンクの青枠の非表示*/
}
html {
	min-height:100%;/*最低サイズを100％に設定*/
	background-size:cover;/*「cover」指定でフルスクリーンに*/
}
body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	letter-spacing:2px;
	line-height:28px;
	background-image:url(images/back.jpg);
	background-repeat:repeat;
	background-size:100%;
	margin:0 auto;
	text-align:center;
	color:#666;
}
A:link {
	text-decoration:none;
}
A:visited {
	text-decoration:none;
}
A:hover {
	text-decoration: none;
}
a:focus {
	outline:none;/*リンククリック時の点線の非表示*/
}
h1 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin:0;
}
/* ---------- header ----------*/
#header {
	overflow: hidden;
	width:100%;
}
#gn_logo {
	width:230px;
	position:absolute;
	top:0;
	left:50px;
	z-index:10;
}
#gn_logo img {
	width:230px;
}
#header_back {
	float:left;
	width:100%;
	z-index:1;
	margin-bottom:30px;
}
#header_back_smart {
	display:none;
}
#header_text {
	position:absolute;
	line-height:45px;
	font-size:1.5rem;
	z-index:9;
	width:100%;
}
h2 {
	width:100%;
	background: rgba(250, 250, 250, 0.5);
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#80ffffff, EndColorStr=#80ffffff);/*IE8以前への透過*/
	letter-spacing:6px;
	padding:20px 0 5px 0;
	margin:42% auto 0 auto;
	line-height:75px;
	font-size:2rem;
	z-index:2;
	color:#fff;
	animation: bg-color 2s linear forwards;
	-webkit-animation: bg-color 2s linear forwards;
}
h2 img {
	width:80%;
	max-width:935px;
}
@-webkit-keyframes bg-color {
 0% {
background-color: rgba(250, 250, 250, 0.1);
}
 50% {
background-color: rgba(250, 250, 250, 0.3);
}
 100% {
background-color: rgba(250, 250, 250, 0.5);
}
}
@keyframes bg-color {
 0% {
background-color: rgba(250, 250, 250, 0.1);
}
 50% {
background-color: rgba(250, 250, 250, 0.3);
}
 100% {
background-color: rgba(250, 250, 250, 0.5);
}
}
#top_logo_smart {
	display:none;
}
h3 {
	font-size:40px;
	line-height:40px;
	padding:40px 0 20px 0;
	text-align:center;
	margin:0 auto;
	font-weight:600
}
h3 span {
	font-size:16px;
	padding-left:48px;
}
h3 img {
	width:50px;
}
.title_icon {
	padding:0 10px 0 0;
}
h4 {
	font-size:1.9rem;
	font-size:28px\9;
	padding:20px 0 10px 0;
	margin:0 auto;
	text-align:center;
	font-weight:100;
}
h5 {
	font-size:1.9rem;
	margin:0 0 20px 0;
}
.answer_number_smart {
	display:none;
}
dd {
	margin:0;
}
/* ---------- About ----------*/
#About_wrap {
	background-image:url(images/about_back.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	margin:0 0 40px 0;
	color:#FFF;
}
#About_text_wrap {
	width:1100px;
	margin:0 auto;
	padding:30px 0;
	text-align:center;
}
#About_text_left_wrap {
	width:600px;
	float:left;
	padding:20px auto;
}
#About_text_left {
	width:550px;
	margin:0 auto;
	padding-top:20px;
}
#About_text_title {
	font-size:1.3rem;
}
#About_text_right_wrap {
	width:40%;
	float:right;
	margin:0 auto;
}
#About_text_right {
	text-align:center;
}
#kizuku{
	margin:0 auto;
	}
span.large {
	color:#F7931E;
	font-size:32px;
	font-weight:bold;
}
span.small {
	color:#F7931E;
	font-weight:bold;
}
.sub_title {
	font-size:1rem;
}
.clear {
	clear:both;
}
#qa {
	text-align:left;
	margin:0 auto;
	background-image:url(images/qa_back.png);
	background-repeat:no-repeat;
	background-position:center;
}
h4 img {
	vertical-align:-23px;
	padding:0 12px 0 0;
	width:70px;
}
h5 {
	background-image:url(images/about_title_back.png);
	background-position:center;
	background-repeat:no-repeat;
	padding:25px 0;
	text-align:center;
	font-size:26px;
}
.answer_number {
	vertical-align:-12px;
	padding:0 20px 0 0;
	width:50px;
}
.answer {
	margin:25px 0 45px 0;
	text-align:left;
}
#answer_contents {
	width:1200px;
	margin:0 auto;
}
.answer_contents_wrap {
	width:1200px;
	margin:0 auto;
	padding:0 0 20px 0;
}
.answer_img_left {
	float:left;
	width:580px;
}
.answer_img_right {
	float:right;
	width:580px;
}
.mask_title_smart, .mask2_title_smart, .mask_span_smart {
	display:none;
}
.answer:before {
	content:url(images/answer.png);
	float:left;
	padding:0 10px 0 0;
}
#mietekuru {
	margin:0 0 30px 0;
}
/* ---------- Fees ----------*/
#fees {
	background-image:url(images/fees_back.png);
	background-repeat:repeat;
	background-position:center;
	padding:1px 0 30px 0;
	color:#FFF;
	border-top:#FFF 2px solid;
	border-bottom:#FFF 2px solid;
	text-align:left;
}
#fees_contents_wrap {
	width:580px;
	margin:0 auto;
}
#fees_contents:before {
	content:url(images/fees_icon.png);
	float:left;
	padding:0 10px 30px 0;
}
#nyukai_wrap {
	width:500px;
	border-style:double;
	padding:10px 20px;
}
#nyukai_left {
	width:320px;
	float:left;
}
#nyukai_right {
	float:right;
	padding:23px 0 0 0;
}
#fees_comment {
	color:#F7931E;
	font-weight:900;
}
#fees_comment span {
	font-size:28px;
}
/* ---------- Contact ----------*/
#contact {
	background-image:url(images/flow_img2.png);
	background-repeat:no-repeat;
	background-position:bottom center;
	position: relative;
	width:100%;
}
#contact_box {
	background-image:url(images/contact_back.png);
	background-repeat:repeat;
	background-size:100%;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contact_back.png', sizingMethod='scale');/*IE8以前背景100％対応*/
	background-position:center;
	width:760px;
	width:780px\9;/*IE8*/
	padding:3px 0 45px 0;
	text-align:center;
	color:#666;
	font-weight:900;
	margin:0 auto 20px auto;
	border-radius:6px;
}
:root #contact_box {
	padding:3px 0 10px 0\0/;/*IE9*/
}
#contact_box {
	padding:3px 0 10px 0\9;/*IE8*/
}
#contact_box_title {
	font-size:24px;
	margin:0;
	padding:24px 0 0 0;
	line-height:32px;
}
#contact_box_inner {
	width:630px;
	height:170px;
	margin:0 auto;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#contact_box_inner {
	height:205px\9;/*IE10*/
}
}
#contact_box_left {
	float:left;
}
#contact_box_right {
	float:right;
}
#page-top {
	position: fixed;
	bottom:1%;
	right:1%;
	margin:0!important;
	z-index:10;
}
#page-top a {
	hight: 150px;
	display: block;
}
#page-top a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
address {
	font-style:normal;
	font-size:0.8rem;
	letter-spacing:1px;
	font-weight:100;
	padding:15px 0 30px 0;
}
/* ---------- About画像のホバーエフェクト ----------*/
.view {
	width: 550px;
	height: 290px;
	margin: 10px 10px 30px 10px;
	border: 10px solid #fff;
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .mask2, .view .content {
	width: 550px;
	height: 290px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0
}
.view img {
	display: block;
	position: relative
}
.view .mask_title {
	text-transform:capitalize;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 25px;
	font-weight:900;
	padding: 10px;
	background: rgba(241, 90, 36, 0.8);
	margin: 20px 0 0 0
}
#mask_span {
	line-height:35px;
	margin:0 auto;
	padding:20px 0 0 110px;
}
.view .mask2_title {
	text-transform:capitalize;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 25px;
	font-weight:900;
	padding: 10px;
	background: rgba(0, 145, 55, 0.8);
	margin: 20px 0 0 0
}
.view p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height:40px;
	position: relative;
	color: #fff;
	padding: 10px 20px 20px 20px;
	text-align:left;
}
.view a.info:hover {
	box-shadow: 0 0 5px #000
}
.view-first img {
	-webkit-transition: all 0.2s linear;/*GoogleChrome*/
	-moz-transition: all 0.2s linear;/*FireFox*/
	-o-transition: all 0.2s linear;/*Opera*/
	-ms-transition: all 0.2s linear;/*IE*/
	transition: all 0.2s linear;
}
.view-first .mask {/*ホバー時にオレンジ色になる*/
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(219, 127, 8, 0.7);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;/*transitionはIE10以降*/
	transition: all 0.4s ease-in-out;
}
.view-first .mask2 {/*ホバー時に緑色になる*/
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(140, 198, 63, 0.7);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;/*transitionはIE10以降*/
	transition: all 0.4s ease-in-out;
}
.view-first .mask_title, .view-first .mask2_title {
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	transform: translateY(-100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.view-first p {
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;/*transitionはIE10以降*/
	transition: all 0.2s linear;
}
.view-first:hover img {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}
.view-first:hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B3DB7F08, EndColorStr=#B3DB7F08);/*IE8以前への透過*/
}
.view-first:hover .mask2 {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B38CC63F, EndColorStr=#B38CC63F);/*IE8以前への透過*/
}
.view-first:hover .mask_title, .view-first:hover p {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}
.view-first:hover .mask_title {
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#CCF15A24, EndColorStr=#CCF15A24);/*IE8以前への透過*/
}
.view-first:hover .mask2_title {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#CC009137, EndColorStr=#CC009137);/*IE8以前への透過*/
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}
.view-first:hover p {
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;/*transitionはIE10以降*/
	transition-delay: 0.1s;
}
.view-first:hover a.info {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;/*transitionはIE10以降*/
	transition-delay: 0.2s;
}