width: 300px; border-radius: 50px;width: 300px; border-radius: 50px;width: 300px; border-radius: 50px;width: 300px; border-radius: 50px;@charset "UTF-8";
/* CSS Document */

.impact{ color: #fff000; font-size: 1.5em;}
.orange{color: #ff8400;}
.green{ color: #7ac933;}
.yellow{color: #ffba00;}

#wrap{
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
}

.contents{ width: 95%; margin: auto;}
	
header{ width: 100%; margin: 0 0 30px;}
header h1{ width: 100%; text-align: center; background-position: center; padding: 20px 0; font-size: 1.1em; color: #fff000; background: #238ad3;}

.onayami{ width: 100%; text-align: center;}
.onayami h2{ color: #0cad72; font-size: 1.3em; margin-bottom: 30px;}
.onayami img{ vertical-align: bottom; width: 95%;}

.merit{ width: 100%; background: #0cad72; text-align: center; padding: 45px 0 0;}
.merit h2{ color: #FFF; font-size: 1.1em; line-height: 30px;}
.merit ul{ width:100%; display: block;}
.merit ul li.merit-1{ width: 100%; background: url("/common/images/img_merit1_spbg.jpg") no-repeat; position: relative; background-size: 95% auto; background-position: center; padding-bottom: calc(100%*262/462);}
.merit ul li.merit-1 p{ position: absolute; top:50%; left:50%; font-size: 2em; line-height: 45px; transform: translateX(-50%) translateY(-35%); width: 100%;}
.merit ul li.merit-2{ width: 100%; background: url("/common/images/img_merit2_spbg.jpg") no-repeat; position: relative; background-size: 95% auto; background-position: center; padding-bottom: calc(100%*262/462);}
.merit ul li.merit-2 p{ position: absolute; top:50%; left:50%; font-size: 2em; line-height: 45px; transform: translateX(-50%) translateY(-33%); width: 100%;}

.attract{ width: 100%; background: #f4efef; padding: 25px 0 0;}
.attract h2{ width: 95%; margin:0 auto 10px;}
.attract h2 img{ width: 100%;}
.attract ul{display: flex; justify-content:center; align-items: center; list-style: none;}
.attract ul li{ margin:0 2px 0; width: 32%; }
.attract ul li img{width: 100%;}
.attract img{ width: 100%;}

.application{ background: #0096ff; padding: 10px; color: #fff;}
.application h2{ font-size: 2em; background: url("/common/images/icon_app01.gif") no-repeat top left; padding-left: 50px; line-height: 45px; margin-bottom: 20px;}
.application p{ font-size: 1.3em; line-height: 35px; margin-bottom: 20px; display: inline-block; width: 100%; text-align: left; padding-left: 1em; text-indent: -1em;}
.application p:last-of-type{margin-bottom: 50px;}
.application ul{ display: block; text-align: center;}
.application ul li p{ font-size: 1.1em; line-height: 25px; margin-bottom: 10px; display: inline-block; width: 100%; padding-left: initial; text-indent: initial;}
.application ul li.down a{ width: 200px; height: 200px; border-radius: 50%; display: inline-block; margin: 0 0 20px; background: url("/common/images/icon_download_bt.gif") no-repeat;}
.application ul li.mail a{ width: 200px; height: 200px; border-radius: 50%; display: inline-block; margin: 0 0 20px; background: url("/common/images/icon_mail_bt.gif") no-repeat;}
.application ul li a:hover{ background-position: 0 -200px;}
.application a p{ font-size: 1.1em; text-align: center; color:#0096ff; line-height: 25px; padding-top: 20px; font-family: 'Noto Sans JP';}
.application a:hover p{color: #ff7e00;}

.contact{ background: #f5efef; padding: 10px; color: #0096ff;}
.contact h2{font-size: 2em; background: url("/common/images/icon_contact01.gif") no-repeat; padding-left: 50px; line-height: 48px; margin-bottom: 20px; background-position: top left; width: 100%;}
.contact p{ font-size: 1.5em; line-height: 35px; margin:0 0 20px 0; display: inline-block;}
.contact img{ margin:0 0 20px; width: 100%;}

footer{ width: 100%; background: #ff9000; padding: 55px 0 20px; font-family: 'Noto Sans JP';}
footer ul{ width: 90%; margin:0 auto 50px; background: #fff; border-radius: 10px; padding: 30px; color: #9c9c9c; font-size: 1em; overflow: hidden;}
footer ul li{border-bottom: 1px #9c9c9c dotted; margin-bottom: 10px; padding-bottom: 10px;}
footer ul li ul{ padding: 0; margin: 0; width: 100%;}
footer ul li ul li{ width: auto; border-bottom: none; margin: 0; padding: 0; margin-bottom: 5px; padding-bottom: 5px;}
footer ul li ul li:last-of-type{margin: 0;}
footer ul li ul li:last-child{border: none; padding-left:0.5em;}

.copy{ width: 90%; margin: auto; color: #fff; text-align: center;}

.sample{ width: 100%; display: flex; flex-wrap: wrap; justify-content:center; padding: 20px 0;}
.sample p{ width: 300px; border-radius: 50px; background: #0096ff; line-height: 60px; color:#fff; text-align: center; font-size: 1.2em;}
.sample p a{width: 300px; border-radius: 50px; line-height: 60px; display: block; color: #fff;}
.sample p a:link{color: #fff;}
.sample p:hover{ opacity: 0.5;}

/* PC用CSSをメディアクエリ内に記述する */
@media screen and (min-width: 960px) {
	.contents{ width: 1024px; margin: auto;}
	
	header{ width: 1024px; margin: 0 auto 50px; padding: 30px 0 30px;}
	header h1{ width: 100%; background: url("/common/images/img_title_bg.gif") no-repeat; text-align: center; height: 101px; background-position: center; padding: 20px 0; font-size: 2.1em; color: #fff000;}
	
	.onayami{ width: 1024px; margin: auto; text-align: center;}
	.onayami h2{ color: #0cad72; font-size: 2.3em; margin-bottom: 50px;}
	.onayami img{ vertical-align: bottom;}
	
	.merit{ width: 100%; background: #0cad72; text-align: center; padding: 45px 0 0;}
	.merit h2{ color: #FFF; font-size: 2.3em; line-height: 70px;}
	.merit ul{ width:1024px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.merit ul li.merit-1{ width: 488px; height: 296px; background: url("/common/images/img_merit1_bg.jpg") no-repeat; position: relative; padding-bottom: initial;}
	.merit ul li.merit-1 p{ position: absolute; top:100px; left:33px; font-size: 2em; line-height: 45px; width: auto; transform: none;}
	.merit ul li.merit-2{ width: 488px; height: 296px; background: url("/common/images/img_merit2_bg.jpg") no-repeat; position: relative; padding-bottom: initial;}
	.merit ul li.merit-2 p{ position: absolute; top:90px; left:33px; font-size: 2em; line-height: 45px; width: auto; transform: none;}
	
	.attract{ width: 100%; background: #f4efef; text-align: right; padding: 25px 0 0;}
	.att-obj{ background: url("/common/images/img_att_obj.png") no-repeat; background-position: bottom left;}
	.attract h2{ width: 100%; text-align: right; margin-bottom: 30px;}
	.attract h2 img{ width:auto;}
	.attract ul{display: flex; justify-content: flex-end; align-items: center; list-style: none;}
	.attract ul li{ margin:0 10px 0; width:initial;}
	.attract img{width: initial;}
	
	.application{ background: #0096ff; padding: 60px 0 0; color: #fff; text-align: left;}
	.app-obj{ background: url("/common/images/img_app_obj.png") no-repeat; background-position: bottom right;}
	.application h2{ font-size: 2.5em; background: url("/common/images/icon_app01.gif") no-repeat top left; padding-left: 50px; line-height: 45px; margin-bottom: 50px;}
	.application p{ font-size: 1.5em; line-height: 35px; margin-bottom: 10px; display: inline-block; width: 70%; padding-left: 1em; text-indent: -1em;}
	.application p:last-of-type{margin-bottom: 70px;}
	.application ul li p{ font-size: 1.1em; line-height: 25px; margin-bottom: 10px; display: inline-block; width: 100%; padding-left: initial; text-indent: initial;}
	.application ul{ display: flex; flex-wrap: wrap;}
	.application ul li.down a {width: 200px; height: 200px; border-radius: 50%; display: inline-block; margin: 0 0 150px 50px; background: url("/common/images/icon_download_bt.gif") no-repeat;}
	.application ul li.mail a {width: 200px; height: 200px; border-radius: 50%; display: inline-block; margin: 0 0 150px 50px; background: url("/common/images/icon_mail_bt.gif") no-repeat;}
	.application ul li a:hover{ background-position: 0 -200px;}
	.application a p{ font-size: 1.1em; text-align: center; color:#0096ff; line-height: 25px; padding-top: 20px; font-family: 'Noto Sans JP';}
	.application a:hover p{color: #ff7e00;}
	
	.contact{ background: #f5efef; padding: 60px 0 0; color: #0096ff;}
	.contact-obj{ background: url("/common/images/img_contact_obj.png") no-repeat; background-position: bottom left;}
	.contact h2{font-size: 2.5em; background: url("/common/images/icon_contact01.gif") no-repeat; padding-left: 50px; line-height: 48px; margin-bottom: 50px; text-align: right; background-position: top right 500px; padding-right: 170px;}
	.contact p{ font-size: 1.7em; line-height: 35px; margin:0 0 30px 473px; display: inline-block;}
	.contact p:last-of-type{margin-bottom: 50px;}
	.contact img{ margin:0 0 124px 546px; width: initial;}
	
	footer{ width: 100%; background: #ff9000; padding: 55px 0 20px; font-family: 'Noto Sans JP';}
	footer ul{ width: 700px; margin:0 auto 50px; background: #fff; border-radius: 10px; padding: 30px; color: #9c9c9c; font-size: 1em; overflow: hidden;}
	footer ul li{ width: 100%; margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px #9c9c9c dotted;}
	footer ul li:last-child{margin-bottom: 0;}
	footer ul li ul{ padding: 0; margin: 0; width: 100%;}
	footer ul li ul li{ float: left; width: auto; border-bottom: none; margin: 0; padding: 0;}
	
	.copy{ width: 700px; margin: auto; color: #fff; text-align: center;}
	
	.sample{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 50px 110px 0;}
	.sample p{ width: 300px; border-radius: 50px; background: #0096ff; line-height: 60px; color:#fff; text-align: center; font-size: 1.2em;}
	.sample p a{width: 300px; border-radius: 50px; line-height: 60px; display: block; color: #fff;}
	.sample p a:link{color: #fff;}
	.sample p:hover{ opacity: 0.5;}
}