@charset "utf-8";
@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed');

/*---------------------------------------レスポンシブPC用---------------------------------------*/

@media screen and (min-width: 750px) {

	#mobile_header,.mobile_header,#mobile_list,#mobile_menutitle,.mobile_wrap,#mobilefooter {
		display: none;
	}
	body {
		width: 100%;
		margin: 0 auto;
		background-color: #e3e6e8;
	}

	/*   ◆ヘッダー   */

	header {
		width: 100%;
		margin: 0 auto;
		height: 0.8vw;
		color: #fff;
		background-color: #22a6ff;
	}
	.header {
		width: 90%;
		display: block;
		margin: 0 auto;
	}
	#header {
		width: 90%;
		margin: auto;
	}
	.box {
		float: left;
		width: 40%;
	}
	.box:last-child {
		float: left;
		width: 60%;
	}
	.boxContainer {
		overflow: hidden;
	}
	.boxContainer:before,
	.boxContainer:after {
		content: "";
		display: table;
	}
	.boxContainer:after { clear: both; }
	.boxContainer { zoom: 1; }
	.box p {
		color: #f48d47;
		text-align: right;
	}
	@media screen and (min-width: 750px)
	.headtel {
		font-size: 0.92vw;
	}
	.box .telicon {
		float: right;
	}
	#headwrap {
		background-color: #fff;
		padding: 15px 0px 25px 0px;
	}
	#headwrap img {
		width: 35%;
	}
	#mainvisual {
		width: 100%;
		margin: auto;
		padding-bottom: 1.5vw;
		background-color: #fff;
	}
	#mainvisual .maintext {
		position: absolute;
		z-index: 10000;
		width: 90%;
		top: 20vw;
		margin: 10px 80px;
	}
	#mainvisual .maintext01 {
		font-size: 60px;
		font-weight: bold;
		line-height: 1.3;
		letter-spacing: 5px;
		text-shadow: 1px 1px 0 #fff,
					 1px 1px 0 #fff,
					 1px 1px 0 #fff,
					 1px 1px 0 #fff;
	}
	#mainvisual .maintext02 {
		font-size: 30px;
		font-weight: bold;
		line-height: 1.3;
		letter-spacing: 5px;
		text-shadow: 1px 1px 0 #fff,
					 1px 1px 0 #fff,
					 1px 1px 0 #fff,
					 1px 1px 0 #fff;
	}
	
	/*   ◆メインコンテンツ   */

	#menutitle {
		width: 95%;
		margin: auto;
		padding-bottom: 20px;
		background: #fff;
	}
	#menutitle p {
		font-size: 1.5rem;
		font-weight: bold;
		letter-spacing: 3px;
	}
	#menutitle p span {
		padding-left: 20px;
		font-size: 0.8rem;
		font-weight: normal;
		letter-spacing: 3px;
		vertical-align: middle;
	}
	.wrap {
		width: 90%;
		margin: 15px auto 35px;
		font-size: 1vw;
	}
	.wrap .wraptext {
		padding: 5vw 2vw;
		margin: 5vw 0;
		line-height: 1.75;
		background-color: #fff;
		box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	}
	.wrap .wraptext .top_business {
		margin: auto;
		width: 95%;
		font-weight: bold;
		font-size: 20px;
		padding: 10px 10px 0 30px;
	}
	.wrap .wraptext h2 span {
		font-weight: bold;
		font-size: 20px;
		border-right: 3px solid #28a0dd;
		padding-left: 15px;
		margin-right: 15px;
	}
	.wrap .wraptext .toptext_business {
		margin: auto;
		width: 95%;
		font-size: 15px;
	}
	.wrap .wraptext .toptext_business img {
		width: 100%;
	}
	.wrap .wraptext .toptext_business th {
		text-align: left;
		Width: 30%;
		padding: 15px 10px 15px 0;
		vertical-align: middle;
	}
	.wrap .wraptext .toptext_business td {
		font-weight: bold;
		Width: 50%;
		padding: 15px 10px 15px 30px;
	}
	.wrap .wraptext .toptext_business td p{
		text-align: right;
		margin-top: 20px;
	}
	.wrap .wraptext .toptext_business td p a{
		text-decoration:none;
		color: #22a6ff;
		font-size: 16px;
	}
	.wrap .wraptext .toptext_company {
		margin: auto;
		width: 95%;
		font-size: 15px;
		border-collapse: separate;
		border-spacing: 0px 10px;
	}
	.wrap .wraptext .toptext_company th {
		text-align: left;
		font-weight: bold;
		Width: 18%;
		padding: 20px 10px 20px 30px;
		vertical-align: middle;
		background-color: #ebf7fc;
	}
	.wrap .wraptext .toptext_company td {
		font-weight: bold;
		Width: 60%;
		padding: 20px 10px 20px 30px;
		background-color: #ebf7fc;
	}
	.wrap .wraptext .toptext_privacy p {
		margin: auto;
		padding: 1px;
		width: 92%;
		font-size: 15px;
	}
	.wrap .wraptext .toptext_privacy ol {
		counter-reset: count 0;
		padding-left: 20px;
		font-size: 15px;
	}
	.wrap .wraptext .toptext_privacy ol li {
		margin: auto;
		padding: 1px;
		width: 90%;
		list-style-type: decimal-leading-zero;
		content: counter(count) ".";
		counter-increment: count 1;
		font-size: 15px;
	}
	.wrap .wraptext .toptext_privacy h2 {
		width: 93%;
		font-weight: bold;
		font-size: 17px;
		border-left: #1e7aad solid 5px;
		border-bottom: #1e7aad solid 1px;
		padding-left: 10px;
		margin: 30px;
	}
	.wrap .wraptext .toptext_privacy h3 {
		font-weight: bold;
		font-size: 13px;
		color: #1e7aad;
		padding-left: 35px;
	}

	/*   ◆フッダー   */

	footer small p {
		Width: 100%;
		text-align: center;
		bottom: 10px;
		left: 0;
		right: 0;
		line-height: 30px;
	}
	
}



/*---------------------------------------レスポンシブモバイル用---------------------------------------*/

@media screen and (max-width: 749px) {

	body {
		width: 100%;
		margin: 0 auto;
		background-color: #dde6ed;
	}
	header .header,#header,#topimage,#list,#menutitle,.wrap,.wrap02,.wrap03,.wrap04,footer {
		display: none;
	}
	
	/*   ◆ヘッダー   */
	
	header {
		width: 100%;
		margin: 0 auto;
		height: 20px;
		color: #fff;
		background-color: #22a6ff;
	}
	header .mobile_header {
		width: 90%;
		margin: 0 auto;
	}
	.headtext {
		font-size: 10px;
		font-weight: bold;
		color: #fff;
		padding-top: 10px;
	}
	.box {
		height: 67px;
		border-bottom: 1px solid #22a6ff;
	}
	.box a img.title {
		padding-left: 10px;
		padding-top: 5px;
		width: 38%;
	}
	.box p {
		color: #f48d47;
		text-align: right;
	}
	.headtel {
		padding-right: 5px;
		padding-top: 3px;
		font-size: 10px;
	}
	.box .telicon {
		padding-right: 5px;
		float: right;
	}
	#headwrap {
		background-color: #fff;
		padding-top: 10px;
	}
	#mobile_topimage img {
		width: 100%;
		height: auto;
	}

	/*   ◆メインコンテンツ   */

	.mobile_wrap {
		width: 95%;
		margin: 15px auto 25px;
		font-size: 3vw;
	}
	#mobile_menutitle p {
		font-size: 1.0rem;
		font-weight: bold;
		letter-spacing: 3px;
	}
	#mobile_menutitle p span {
		padding-left: 20px;
		font-size: 0.5rem;
		font-weight: normal;
		letter-spacing: 3px;
		vertical-align: middle;
	}
	.mobile_wrap .wraptext {
		padding: 20px;
		margin:20px 0;
		line-height: 1.75;
		background-color: #fff;
		box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
	}
	.mobile_wrap .wraptext .top_business {
		margin: auto;
		width: 85%;
		font-weight: bold;
		font-size: 3.5vw;
		padding: 10px 10px 0px 10px;
	}
	.mobile_wrap .wraptext h2 span {
		font-weight: bold;
		font-size: 4vw;
		border-right: #1e7aad solid 3px;
		padding-left: 15px;
		margin-right: 15px;
	}
	.mobile_wrap .wraptext .toptext_business {
		margin: auto;
		width: 90%;
		font-size: 2.3vw;
	}
	.mobile_wrap .wraptext .toptext_business img {
		width: 100%;
	}
	.mobile_wrap .wraptext .toptext_business th {
		text-align: left;
		Width: 30%;
		padding: 15px 0px 15px 0px;
		vertical-align: middle;
	}
	.mobile_wrap .wraptext .toptext_business td {
		font-weight: bold;
		Width: 50%;
		padding: 15px 0px 15px 30px;
	}
	.mobile_wrap .wraptext .toptext_business td p{
		text-align: right;
		margin-top: 2.3vw;
	}
	.mobile_wrap .wraptext .toptext_business td p a{
		text-decoration:none;
		color: #22a6ff;
		font-size: 2.3vw;
	}
	.mobile_wrap .wraptext .toptext_company {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0px 15px;
	}
	.mobile_wrap .wraptext .toptext_company th {
		text-align: left;
		background-color: #ebf7fc;;
		font-weight: bold;
		Width: 25%;
		padding: 8px;
		vertical-align: middle;
	}
	.mobile_wrap .wraptext .toptext_company td {
		font-weight: bold;
		Width: 50%;
		padding: 8px;
		background-color: #ebf7fc;
		vertical-align: middle;
	}
	.mobile_wrap .toptext_privacy p {
		margin: auto;
		width: 100%;
		font-size: 2.3vw;
	}
	.mobile_wrap .wraptext .toptext_privacy ol {
		counter-reset: count 0;
		font-size: 2.3vw;
		padding-left: 5vw;
	}
	.mobile_wrap .wraptext .toptext_privacy ol li {
		margin: auto;
		width: 100%;
		list-style-type: decimal-leading-zero;
		content: counter(count) ".";
		counter-increment: count 1;
	}
	.mobile_wrap .wraptext .toptext_privacy h2 {
		font-weight: bold;
		font-size: 3.5vw;
		border-left: #1e7aad solid 5px;
		border-bottom: #1e7aad solid 1px;
		margin: 15px 0;
		padding-left: 10px;
	}
	.mobile_wrap .wraptext .toptext_privacy h3 {
		font-weight: bold;
		font-size: 2.3vw;
		color: #1e7aad;
	}
	
	/*   ◆フッダー   */

	#mobilefooter {
		text-align: center;
	}
	#mobilefooter small p {
		line-height: 30px;
	}

}