@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body {
	font-size: 1rem;
	line-height: 1.5em;
	font-family:-apple-system, BlinkMacSystemFont,"Noto Sans Japanese","Helvetica Neue",Helvetica,Arial,"Lucida Grande","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, 'Segoe UI', 'Yu Gothic', sans-serif !important;
	color:#000000;
	height: 100%;
	margin: 0;
	background: #ffffff;
	}
html {
	height: 100%;
	}

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

.clear { clear: both; }
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

.align-center {
	text-align: center;
	}

/* link */
a { text-decoration: none; color: #000;}

a:hover img {
opacity: .6;
-webkit-opacity: .6;
-moz-opacity: .6;
filter: alpha(opacity=60);	/* IE lt 8 */
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
}
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}


/* list */
li { list-style: none; }


/* pc */
@media screen and (min-width: 751px ) {
.sp_only {
	display: none;
	}
body{
     min-width: 1000px;
 }
 .page-header {
	 background:url(../images/header_bg.jpg) center 0 no-repeat;
	 background-size: cover;
	 padding-bottom:50px;
	 }
	.page-header__inner {
		width: 1000px;
		margin: 0 auto;
		padding-top:30px;
		position: relative;
		}
		.page-header__title {
			width: 307px;
			}
			.page-header__title img {
				width: 100%;
				height: auto;
				}
	.page-header__catchcopy {
		margin:72px 0 30px 0;
		}
		.page-header__catchcopy img {
			width: 562px;
			height: auto;
			}
	.page-header__price {
		text-align: right;
		margin-bottom:40px;
		}

/* contact button */
.button-contact {
	width: 760px;
	margin: 0 auto;
	}
	.button-contact a {
		display: block;
		background: #ff9734 url(../images/button_contact_bg.svg) 20px 50% no-repeat;
		background-size:30px auto;
		color: #ffffff;
		text-align: center;
		border-radius: 5px;
		padding:30px 0;
		font-size: 150%;
		font-weight: bold;
		letter-spacing:2px;
		transition: background-color 0.5s ease-out;
		}
	.button-contact a:hover {
		background-color: #f9ad15;
		}

/* about */
.about {
	font-weight:bold;
	font-size: 140%;
	line-height: 1.3em;
	}
.section__title {
	background: url(../images/section_title_bg.svg) center bottom no-repeat;
	padding-bottom:30px;
	}
	.section__title--bg__none {
		background: none;
		padding-bottom: 0;
		}
.section__title span {
	width: 100%;
	display: inline-block;
	background:#1a50b2;
	text-align: center;
	color: #fff;
	font-size: 200%;
	line-height:1.5em;
	padding: 20px 0 ;
	font-weight: bold;
	}
	.about__example {
		border-radius: 5px;
		width: 1000px;
		margin: 20px auto;
		padding: 30px 0;
		background-repeat: none;
		}
		.about__example--resource {
			background-image:url(../images/about_illut_resource.svg);
			background-position: 0 0;
			background-size: 210px auto;
			}
			.about__example--resource li {
				margin-left: 250px;
				padding:7px 0 ;
				}
		.about__example--company {
			background-image: url(../images/about_illut_company.svg);
			background-position: 620px bottom;
			background-size: 252px auto;
			}
			.about__example--company li {
				padding:7px 0;
				margin-left:250px;
				}
				.about__example--company li span {
					color: #fff;
					background: #eb3e9d;
					}
		
		.about__text {
			text-align: center;
			margin-bottom:30px;
			}
			.about__text--pink {
				color: #eb8686;
				background:#ffff00;
				}
			.about__text--larger {
				font-size: 130%;
				line-height: 1.5em;
				margin-bottom: 50px;
				}
	.about__message {
		font-weight: normal;
		width: 740px;
		margin: 0 auto;
		font-size:90%;
		}
		.about__message p {
			margin-bottom: 40px;
			}
	
	
/* osusume */
.osusume {
	background:url(../images/osusume_bg.jpg) center 0 no-repeat;
	background-size:cover;
	color: #ffffff;
	padding:0 0 50px 0;
	}
	.osusume__title {
		text-align: center;
		font-size: 250%;
		line-height:1.5em;
		margin-bottom:40px;
		font-weight: bold;
		}
.osusume__list {
	width: 1000px;
	margin: 23px auto 0 auto;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	}
	.osusume__list li {
		width:300px;
		float: left;
		background: #72b743;
		color: #ffffff;
		text-align: center;
		padding:26px;
		margin:0 0 50px 50px;
		}
		.osusume__list li:nth-child(4), .osusume__list li:first-child {
			margin-left: 0;
			}
		.osusume__list li img {
			height: auto;
			margin-bottom:25px;
			}
		.osusume__list li:first-child img {
			width: 92px;
			}
		.osusume__list li:nth-child(2) img {
			width: 119px;
			}
		.osusume__list li:nth-child(3) img {
			width: 106px;
			}
		.osusume__list li:nth-child(4) img {
			width: 86px;
			}
		.osusume__list li:nth-child(5) img {
			width: 121px;
			}
		.osusume__list li:nth-child(6) img {
			width: 79px;
			}
		.osusume__list li dl {
			}
			.osusume__list li dt {
				font-size: 120%;
				line-height:1.3em;
				font-weight: bold;
				margin-bottom:20px;
				}
				.osusume__list li dt  span {
					color: #ffff00;
					}
				.osusume__list li dd {
					text-align: left;
					}

/* tokucho */
.tokucho {
	padding: 0 0 70px 0;
	color: #fff;
	}
	.tokucho__block {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center 0;
		border-top: solid 2px #fff;
		min-height:277px;
		}
	.tokucho01 {
		background-image: url(../images/tokucho01_bg.jpg);
		}
	.tokucho02 {
		background-image: url(../images/tokucho02_bg.jpg);
		}
	.tokucho03 {
		background-image: url(../images/tokucho03_bg.jpg);
		}
		.tokucho01 div {
			width: 700px;
			margin: 0 auto;
			padding: 50px 0 0 0;
			}
		.tokucho02 div {
			width: 900px;
			margin: 0 auto;
			padding: 60px 0 0 400px;
			}
		.tokucho03 div {
			width: 850px;
			margin: 0 auto;
			padding: 60px 0 0 0;
			}
			.tokucho__block h2 {
				font-size: 250%;
				font-weight: bold;
				line-height:1.2em;
				margin-bottom:10px;
				}
			.tokucho__block p {
				font-size: 120%;
				line-height: 1.5em;
				}
			.tokucho__note {
				font-size: 80%!important;
				}

.howto {
	background: #e2e2e2;
	margin-bottom:5px;
	padding-bottom:40px;
	}
	.howto__header {
		position: relative;
		min-height: 151px;
		}
		.howto__header p {
			position: absolute;
			top: -10px;
			left:70%;
			}
	.howto__steps {
		width: 1000px;
		margin: 0 auto;
		}
		.howto__steps li {
			background: url(../images/howto_arrow.svg) center bottom no-repeat;
			background-size: 48px;
			padding-bottom:24px;
			position: relative;
			margin-bottom: 10px;
			}
			.howto__steps li:last-child {
				background:none;
				}
		.howto__steps li div {
			background-color: #fff;
			border-radius: 5px;
			background-size: 79px auto;
			background-repeat: no-repeat;
			background-position:22px 22px;
			padding: 22px 22px 22px 150px;
			}
			.howto__step1 div {
				background-image: url(../images/howto_step01.svg);
				}
			.howto__step2 div {
				background-image: url(../images/howto_step02.svg);
				}
			.howto__step3 div {
				background-image: url(../images/howto_step03.svg);
				}
			.howto__step4 div {
				background-image: url(../images/howto_step04.svg);
				}
			.howto__step5 div {
				background-image: url(../images/howto_step05.svg);
				}
		.howto__steps li dl {
			padding-right: 240px;
			background-size: 90px auto;
			background-repeat: no-repeat;
			}
			.howto__steps li dt {
				font-size: 143.75%;
				line-height:1.3em;
				font-weight: bold;
				margin-bottom:10px;
				}
			.howto__step1 dl {
				background-image: url(../images/howto_step01_illust.svg);
				background-position:720px 50%;
				min-height:82px;
				}
			.howto__step2 dl {
				background-image: url(../images/howto_step02_illust.svg);
				background-position:715px 50%;
				min-height:72px;
				}
			.howto__step3 dl {
				background-image: url(../images/howto_step03_illust.svg);
				background-position:720px 50%;
				min-height:92px;
				}
			.howto__step4 dl {
				background-image: url(../images/howto_step04_illust.svg);
				background-position:720px 50%;
				min-height:115px;
				}
			.howto__step5 dl {
				background-image: url(../images/howto_step05_illust.svg);
				background-position:720px 50%;
				min-height:80px;
				}

/* qa */
.qa {
	padding-bottom: 50px;
	}
	.qa__contents {
		width: 1000px;
		margin: 0 auto;
		padding-bottom:30px;
		}
		.qa__contents dt {
			font-size: 143.75%;
			line-height:1.3em;
			font-weight: bold;
			margin-bottom:10px;
			background: url(../images/qa_icon_q.svg) 0 0 no-repeat;
			padding: 30px 0 0 70px;
			}
		.qa__contents dd {
			background: #efefef url(../images/qa_icon_a.svg) 20px 20px no-repeat;
			padding: 20px 20px 20px 50px;
			border-radius: 5px;
			margin-bottom:30px;
			}

/* footer */
.page-footer {
	text-align: center;
	}
	.page-footer h1 {
		margin-bottom: 5px;
		}
	.page-footer .copyright {
		background: #efefef;
		padding:10px 0;
		margin-top:20px;
		}
}

/* smartphone */
@media screen and (max-width: 750px) {
.pc_only {
	display: none;
	}
.sp_only {
	display: block;
	}

 .page-header {
	  background:url(../images/header_bg.jpg) center 0 no-repeat;
	  background-size: cover;
	  padding: 20px 20px 30px 20px;
	 }
.page-header__title {
	width: 50%;
	}
	.page-header__inner  img{
		width: 100%;
		margin-bottom:10px;
		}
	
/* contact button */
.button-contact {
	width: 100%;
	margin: 0 auto;
	}
	.button-contact a {
		display: block;
		background: #ff9734 url(../images/button_contact_bg.svg) 10px 50% no-repeat;
		background-size:20px auto;
		color: #ffffff;
		text-align: center;
		border-radius: 5px;
		padding:20px 20px 20px 35px;
		font-size: 120%;
		font-weight: bold;
		letter-spacing:2px;
	}

.section__title {
	background: url(../images/section_title_bg.svg) center bottom no-repeat;
	padding-bottom:30px;
	}
	.section__title--bg__none {
		background: none;
		padding-bottom: 0;
		}
.section__title span {
	width: 100%;
	display: inline-block;
	background:#1a50b2;
	text-align: center;
	color: #fff;
	font-size: 120%;
	line-height:1.5em;
	padding: 10px 20px ;
	font-weight: bold;
	}
	
/* about */
.about {
	font-weight:bold;
	font-size: 110%;
	line-height: 1.3em;
	margin-bottom:50px;
	}
	.about__example {
		border-radius: 5px;
		padding: 20px;
		background-repeat: none;
		margin-bottom:20px
		}
		.about__example--resource {
			background-image:url(../images/about_illut_resource.svg);
			background-position: 95% 0;
			background-size: 152px auto;
			}
			.about__example--resource li {
				padding:7px 0 ;
				}
		.about__example--company {
			background-image: url(../images/about_illut_company.svg);
			background-position: 10px bottom;
			background-size: 152px auto;
			}
			.about__example--company li {
				padding:7px 0;
				}
				.about__example--company li span {
					color: #fff;
					background: #eb3e9d;
					}
		
		.about__text {
			text-align: center;
			margin-bottom:30px;
			}
			.about__text--pink {
				color: #eb8686;
				background:#ffff00;
				}
			.about__text--larger {
				font-size: 130%;
				line-height: 1.5em;
				margin-bottom: 50px;
				padding: 0 20px;
				}
				.about__text--larger br {
					display: none;
					}
	.about__message {
		font-weight: normal;
		margin: 0 10px;
		background: #f2f2f2;
		padding:20px;
		}
		.about__message p {
			margin-bottom: 20px;
			}

/* osusume */
.osusume {
	background:url(../images/osusume_bg.jpg) center 0 no-repeat;
	background-size:cover;
	color: #ffffff;
	padding:0 0 50px 0;
	}
	.osusume__title {
		text-align: center;
		font-size: 120%;
		line-height:1.5em;
		margin-bottom:40px;
		font-weight: bold;
		}
.osusume__list {
	padding: 0 20px;
	margin: 23px auto 0 auto;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	}
	.osusume__list li {
		background: #72b743;
		color: #ffffff;
		text-align: center;
		padding:26px;
		margin:0 0 20px 0;
		}
		.osusume__list li:nth-child(4), .osusume__list li:first-child {
			margin-left: 0;
			}
		.osusume__list li img {
			height: auto;
			margin-bottom:25px;
			}
		.osusume__list li:first-child img {
			width: 92px;
			}
		.osusume__list li:nth-child(2) img {
			width: 119px;
			}
		.osusume__list li:nth-child(3) img {
			width: 106px;
			}
		.osusume__list li:nth-child(4) img {
			width: 86px;
			}
		.osusume__list li:nth-child(5) img {
			width: 121px;
			}
		.osusume__list li:nth-child(6) img {
			width: 79px;
			}
			.osusume__list li dt {
				font-size: 120%;
				line-height:1.3em;
				font-weight: bold;
				margin-bottom:20px;
				}
				.osusume__list li dt  span {
					color: #ffff00;
					}
				.osusume__list li dd {
					text-align: left;
					}
	.osusume .button-contact, .qa .button-contact {
		margin: 0 20px;
		width: auto;
		}

/* tokucho */
.tokucho {
	padding: 0 0 70px 0;
	}
	.tokucho__block {
		background-size: cover;
		background-repeat: no-repeat;
		border-top: solid 2px #fff;
		}
		.tokucho__block div {
			background: url(../images/bg_white.png);
			padding: 30px 20px;
			}
	.tokucho01 {
		background-image: url(../images/tokucho01_bg.jpg);
		background-position: right 0;
		}
	.tokucho02 {
		background-image: url(../images/tokucho02_bg.jpg);
		background-position: 0 0;
		}
	.tokucho03 {
		background-image: url(../images/tokucho03_bg.jpg);
		background-position: right 0;
		}
			.tokucho__block h2 {
				font-size: 120%;
				font-weight: bold;
				line-height:1.2em;
				margin-bottom:10px;
				}
			.tokucho__block p {
				font-size: 120%;
				line-height: 1.5em;
				}
			.tokucho__note {
				font-size: 90%!important;
				}
			.tokucho__block br {
				display: none;
				}
.saitan {
	background: #eb3e9d;
	padding: 20px;
	color: #fff;
	text-align: center;
	margin:10px 0 20px 0;
	}
.howto {
	background: #e2e2e2;
	margin-bottom:5px;
	padding:0px 0px 20px 0;
	}
	.howto__title {
		background: url(../images/howto_title_bg.svg) center 0 no-repeat;
		background-size: cover;
		text-align: center;
		color: #fff;
		font-size: 200%;
		line-height:1.5em;
		padding: 20px 0 60px 0;
		margin-bottom:27px;
		font-weight: bold;
	}
	.howto__steps {
		margin: 0 10px;
		}
		.howto__steps li {
			background: url(../images/howto_arrow.svg) center bottom no-repeat;
			background-size: 48px;
			padding-bottom:24px;
			position: relative;
			margin-bottom: 10px;
			}
			.howto__steps li:last-child {
				background:none;
				}
		.howto__steps li div {
			background-color: #fff;
			border-radius: 5px;
			background-size: 59px auto;
			background-repeat: no-repeat;
			background-position:center 10px;
			padding: 80px 10px 20px 10px;
			}
			.howto__step1 div {
				background-image: url(../images/howto_step01.svg);
				}
			.howto__step2 div {
				background-image: url(../images/howto_step02.svg);
				}
			.howto__step3 div {
				background-image: url(../images/howto_step03.svg);
				}
			.howto__step4 div {
				background-image: url(../images/howto_step04.svg);
				}
			.howto__step5 div {
				background-image: url(../images/howto_step05.svg);
				}
		.howto__steps li dl {
			background-size: auto 90px ;
			background-repeat: no-repeat;
			background-position:center bottom;
			padding-bottom: 110px;
			}
			.howto__steps li dt {
				font-size: 143.75%;
				line-height:1.3em;
				font-weight: bold;
				margin-bottom:10px;
				text-align: center;
				}
			.howto__step1 dl {
				background-image: url(../images/howto_step01_illust.svg);
				
				}
			.howto__step2 dl {
				background-image: url(../images/howto_step02_illust.svg);
				background-position:720px 50%;
				}
			.howto__step3 dl {
				background-image: url(../images/howto_step03_illust.svg);
				background-position:720px 50%;
				}
			.howto__step4 dl {
				background-image: url(../images/howto_step04_illust.svg);
				background-position:720px 50%;
				}
			.howto__step5 dl {
				background-image: url(../images/howto_step05_illust.svg);
				background-position:720px 50%;
				}
	
/* qa */
.qa {
	padding-bottom: 20px;
	}
	.qa__contents {
		margin: 20px auto;
		}
		.qa__contents dt {
			font-size: 120%;
			line-height:1.3em;
			font-weight: bold;
			margin-bottom:10px;
			background: url(../images/qa_icon_q.svg) 10px 0px no-repeat;
			padding: 0px 0 0 80px;
			min-height:60px;
			}
		.qa__contents dd {
			background: #efefef url(../images/qa_icon_a.svg) 20px 20px no-repeat;
			padding: 20px 20px 20px 50px;
			margin: 0 10px 30px 0px;
			width: 100%;
			}

/* footer */
.page-footer {
	text-align: center;
	}
	.page-footer h1 {
		margin-bottom: 5px;
		}
	.page-footer .copyright {
		background: #efefef;
		padding:10px 0;
		margin-top:20px;
		}
}