/* ===================================================================
CSS information
 file name  :  common.css
 style info :  基本構造（common.css）
=================================================================== */
body {
	background-color:#FFFFFF;
}


/* PC用のスタイル記述 */
@media screen and (min-width: 760px) {
	#wrapper {
		width: 100%;
		margin: 0;
	}
	
	/* ヘッダー */
	#header {
		width: 1140px;
		height: 100px;
		margin: 0 auto 10px auto;
	}
	#header h1 {
		float: left;
		width: 317px;
		height: 100px;
		margin-right: 40px;
		font-size: 10px;
	}
	#header p#no1 {
		float: left;
		width: 264px;
		height: 60px;
		margin-top: 40px;
		margin-right: 10px;
		line-height: 120%;
	}
	#header img#no2 {
		float: right;
		/* --- width: 159px; --- */
		height: 53px;
		margin-top: 44px;
		margin-right: 30px;
	}
	#header p#no3 {
		float: left;
		margin-top: 35px;
		margin-right: 40px;
		line-height: 160%;
	}
	#header p#no3 strong {
		font-size: 24px;
	}
	#header p#no4 {
		float: left;
		margin-top: 20px;
	}
	#header a:hover img {
		opacity: 0.5;
	}
	#header .logo img {
		margin-top: 20px;
	}

	
	
	
	
	
	/* グローバルナビ */
	#navToggle {
		display: none;
	}
	
	#nav {
		background-color: #f2f2f2;
		width: 100%;
		height: 62px;
	}
	#nav ul {
		width: 1120px;
		height: 60px;
		margin: 0 auto;
		/* --- padding: 10px; --- */
	}
	#nav ul li {
		width: 180px;
		height: 60px;
		float: left;
	}
	.nav01, .nav02, .nav03, .nav04, .nav05 {
		margin-right:2px;
	}
	#nav a:hover img {
		opacity: 0.5;
	}
	#nav_ph {
		display: none;
	}
	
	/* メインビジュアル */
	#main {
		position: relative;
		margin: 0;
		width: 100%;
		height: 400px;
		background: url(../images/mainvisual.png) top center;
		color: #fff;
		font-weight: bold;
	}
	#main div {
		position: relative;
		margin: 0 auto;
		width: 1140px;
		height: 527px;
	}
	#main div .main01 {
		position: absolute;
		top: 180px;
		left: 94px;
		font-size: 20px;
	}
	#main div .main02 {
		position: absolute;
		top: 425px;
		left: 425px;
	}
	#main p span {
		color: #ff0000;
	}
	#main_ph {
		display: none;
	}
	
	/* トップページコンテンツ */
	#contents {
		width: 100%;
	}
	.bg_gray {
		width: 100%;
		background-color: #f2f2f2;
	}
	.sub_content {
		width: 980px;
		margin: 0 auto;
		padding: 80px;
		font-size: 24px;
		font-weight: bold;
		line-height: 150%;
	}
	.sub_content2 {
		width: 1028px;
		margin: 0 auto;
		padding: 80px;
	}
	.sub_content3 {
		width: 1028px;
		margin: 0 auto;
		/* --- padding: 80px 0; --- */
	}
	.sub_content4 {
		width: 980px;
		margin: 0 auto;
		padding: 0 40px;
	}
	.sub_content h2 {
		font-family: 'HG明朝B', sans-serif;
		margin-bottom: 40px;
		padding: 15px;
		border-left: #3477C0 3px solid;
		font-size: 32px;
		font-weight: bold;
		line-height:120%;
	}
	
.box01, .box02, .box03, .box04, .box05, .box06, .box07, .box08 {
	width:180px;
	height:230px;
	background-color:#2CD1A5;
	float:left;
	margin-bottom:10px;
}
.box01, .box02, .box03, .box05, .box06, .box07 {
	margin-right:10px;
}
#aside {
	width:190px;
	height:620px;
	float:left;
}
	
	
	/* トップページ 申込み */
	.index_contact .ic01 {
		margin-bottom: 40px;
		padding: 260px 0 0 0;
		height: 111px;
		background-image: url(../images/cta_pc_bg.png);
		text-align: center;
	}
	.index_contact .ic01 .ic01_1 {
		margin-bottom: 20px;
		line-height: 150%;
	}
	.index_contact .ic01 .ic01_2 {
		margin-bottom: 20px;
	}
	.index_contact .ic01 .ic01_3, .index_contact .ic01 .ic01_4 {
		color: orange;
		font-weight: bold;
	}
	.index_contact .ic01 .ic01_3 {
		float: left;
		width: 45%;
		font-size: 18px;
	}
	.index_contact .ic01 .ic01_4 {
		float: right;
		width: 45%;
		margin-bottom: 20px;
		font-size: 32px;
	}
	.index_contact .ic01 .ic01_5 {
		float: right;
		width: 45%;
		margin-bottom: 20px;
		font-size: 14px;
	}
	.index_contact .ic01 .ic01_6 {
		width: 688px;
		height: 89px;
		display: block;
		margin: 0 170px;
		background-image: url(../images/cta_pc_btn.png);
	}
	.index_contact .ic01 .ic01_6:hover {
		opacity: 0.8;
	}
	.index_contact .ic01 .ic01_7 {
		text-align: center;
	}
	
	#footer {
		background-color: #324a57;
		width: 100%;
		float: left;
		color: #fff;
		font-size: 16px;
	}
	#footer #f_nav {
	}
	#footer #f_nav ul {
		margin: 20px 0;
		text-align: center;
	}
	#footer #f_nav ul li {
		display: inline-block;
		margin: 5px 0;
		padding: 5px 40px;
		line-height: 100%;
		border-left: solid 1px #FFFFFF;
	}
		#footer #f_nav ul li.end{
		display: inline-block;
		margin: 5px 0;
		padding: 5px 40px;
		line-height: 100%;
		border-left: solid 1px #FFFFFF;
		border-right: solid 1px #FFFFFF;
	}

	#footer #f_nav ul li a {
		color: #fff;
		text-decoration: none;
	}
	#footer #f_nav ul li a:hover {
		color: #ff0000;
		text-decoration: underline;
	}
	#footer small {
		display: block;
		margin: 0 auto 20px auto;
		text-align: center;
	}
	.top {
		position: fixed;
		bottom: 3px;
		right: 5px;
		z-index: 3;
	}

	.thanks {
		margin-top: 60px;
		text-align: center;
	}

}



/* スマートフォン用のスタイル記述 */
@media screen and (max-width: 760px) {
	#wrapper {
		width: 100%;
	}
	
	/* ヘッダー */
	#header {
		background-color: #f2f2f2;
		width: 100%;
		height: auto;
	}
	#header h1 a.logo img {
		padding-top: 10px;
		padding-left: 5px;
		width: 60%;
	}
	#header h1 span, #header p#no1, #header img#no2, #header p#no3, #header p#no3 strong, #header p#no4 {
		display: none;
	}
	
	/* グローバルナビ */
	#navToggle {
		display: block;
		position: absolute;
		right: 13px;
		top: 15px;
		padding: 5px;
		width: 70px;
		height: 25px;
		border: #999 1px solid;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		cursor: pointer;
	}
	#navToggle div {
		position: relative;
	}
	#navToggle span {
		display: block;
		position: absolute;
		right: 0;
		width: 40%;
		border-bottom: solid 3px #999;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	#navToggle span:nth-child(1) { top: 0; }
	#navToggle span:nth-child(2) { top: 11px; }
	#navToggle span:nth-child(3) { top: 22px; }
	
	/* ボタンがクリックされた時の動作 */
	.openNav #navToggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.openNav #navToggle span:nth-child(2),
	.openNav #navToggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.openNav #nav_ph {
		-webkit-transform: translateY(351px);
		-moz-transform: translateY(351px);
		transform: translateY(351px);
	}
	
	#nav {
		display:none;
	}
	#nav_ph {
		display: block;
		position: absolute;
		z-index: 10;
		right: 0;
		top: -280px;
		width: 96%;
		padding: 0 10px;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		text-align: left;
	}
	#nav_ph ul {
		width: 100%;
		float:left;
	}
	#nav_ph ul li {
		width: 100%;
		height: 35px;
		padding-left: 5px;
		float: left;
		background-color: #D4D4D4;
	}
	#nav_ph ul li a {
		display: block;
		line-height: 35px;
	}
	.nav01, .nav02, .nav03, .nav04, .nav05 {
		margin-bottom: 1px;
	}
	
	/* メインビジュアル */
	#main {
		display: none;
		z-index: 1;
	}
	#main_ph {
		display: block;
		position: relative;
		width: 100%;
		color: #fff;
		font-weight: bold;
	}
	#main_ph .main01 {
		position: relative;
		padding-top: 69.3%;
		width: 100%;
		height: 0;
		background: url(../images/mainvisual_sp1.png) 0 0 no-repeat;
		background-size: contain;
	}
	#main_ph .main01 p {
		text-indent: -9999px;
	}
	#main_ph .main02 {
		position: relative;
		padding-top: 31.6%;
		width: 100%;
		height: 0;
		background: url(../images/mainvisual_sp2.png) 0 0 no-repeat;
		background-size: contain;
	}
	#main_ph .main02 p {
		text-indent: -9999px;
	}
	
	/* トップページコンテンツ */
	#contents {
		width: 100%;
	}
	.bg_gray {
		background-color: #f2f2f2;
	}
	.sub_content {
		width: 90%;
		padding: 5%;
	}
	.sub_content h2 {
		font-family: 'HG明朝B', sans-serif;
		margin-bottom: 20px;
		padding: 10px;
		border-left: #3477C0 3px solid;
		font-size: 18px;
		font-weight: bold;
	}
	
	.sub_content p img {
		width:100%;
	}
.box01, .box02, .box03, .box04, .box05, .box06, .box07, .box08 {
	width:180px;
	height:230px;
	background-color:#2CD1A5;
	float:left;
	margin-bottom:10px;
}
.box01, .box02, .box04, .box05, .box07, .box08 {
	margin-right:10px;
}
#content_right {
	width:100%;
	float:left;
	background-color:#AAB67F;
	margin-bottom:0px;
}
#aside {
	width:100%;
	height:480px;
	float:left;
	margin-bottom:10px;
}
	
	
	/* トップページ 申込み */
	/* --- .index_contact .ic01 {
		margin-bottom: 40px;
		padding: 20px;
		border: cornflowerblue 1px solid;
	} --- */
	.index_contact .ic01 .ic01_1 {
		margin-bottom: 20px;
		line-height: 150%;
	}
	.index_contact .ic01 .ic01_2 {
		margin-bottom: 20px;
	}
	.index_contact .ic01 .ic01_3, .index_contact .ic01 .ic01_4 {
		color: orange;
		font-weight: bold;
	}
	.index_contact .ic01 .ic01_3 {
		margin-bottom: 20px;
		font-size: 18px;
	}
	.index_contact .ic01 .ic01_4 {
		margin-bottom: 20px;
		font-size: 32px;
	}
	.index_contact .ic01 .ic01_5 {
		margin-bottom: 20px;
		font-size: 14px;
	}
	/* --- .index_contact .ic01 .ic01_6 {
		display: block;
		margin: 0 auto 10px auto;
		width: 90%;
		height: 32px;
		background-color: #131E45;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		line-height: 32px;
		text-align: center;
		text-decoration: none;
	} --- */
	/* --- .index_contact .ic01 .ic01_6:hover {
		color: #ff0000;
	} --- */
	.index_contact .ic01 .ic01_7 {
		text-align: center;
	}
	
	#footer {
		background-color: #324a57;
		width: 100%;
		height: 40px;
		float: left;
	}
	#footer #f_nav {
		display: none;
	}
	#footer small {
		display: block;
		margin: auto;
		line-height: 40px;
		text-align: center;
		color: #fff;
	}


	.sub_content2 {
		width: 90%;
		margin: 5%;
		padding: 5% 0;
	}
	.index_contact .ic01 {
		width:100%;
		padding: 83% 0 16% 0;
		background-image: url(../images/cta_sp_bg.png);
		background-size:100% auto;
		background-repeat: no-repeat;
		text-align: center;
	}
	.index_contact .ic01 .ic01_6 {
		height: 70px;
		margin: 0 5% 0 5%;
		display: block;
		background-image: url(../images/cta_sp_btn.png);
		background-size:100% auto;
		background-repeat: no-repeat;
		text-align: center;
	}
}