@charset "utf-8";

/*ここでは
	TOPページ
	などを記述します
*/

.top{ max-width: 100%; margin: 0 auto;}
.top::after { clear: both; content: " "; display: block;}

#contents .top_main{ text-align: center; position: relative;}
.top_main img{ max-width: 100%;}



.top_main .badge{
	position: absolute;
	right: 3%;
	bottom: 3%;
	max-width: 180px;
	}
	
@media screen and (max-width: 1280px) {
	.top_main .badge{
		right: 2%;
		max-width: 14%;
		}
}
@media screen and (max-width: 990px) {
	.top_main .badge{
		max-width: 15%;
		}
}
@media screen and (max-width: 680px) {
	.top_main .badge{
		max-width: 18%;
		bottom: -13%;
		}
}
@media screen and (max-width: 414px) {
	.top_main .badge{
		bottom: -10%;
		}
}


/*._2p3a{
        min-width: 100%!important;
}
iframe{
        width: 100%!important;
}
.fb-page{ display: block;}
.fb-page > span{
        display: block!important;
        width: 100%!important;
}
*/
#block-fb {
	max-width: 100%;
	width: auto;
	margin: 0 auto;
	overflow: hidden;
	max-height: 82%;
}
@media screen and (max-width: 990px) {
	#block-fb {
	max-height: 230px;
	}
}
@media screen and (max-width: 681px) {
	#block-fb {
	max-height: 300px;
	}
}



.success{ text-align: center; font-size: 1.6em; letter-spacing: 2px; padding: 0.9em 1em; font-weight: normal; line-height: 1.5;}
.success > span{ display: block; font-size: 0.9em;}
.success strong{ color: #FF3366;  font-size: 1.3em; display: inline-block; letter-spacing: 3px; margin-right: 0.1em;}
.success b{ color: #FF3366; display: inline-block; background: url(../img/top/komari.png) no-repeat right top; padding-right: 0.2em;}

@media screen and (max-width: 1024px) {
	.success{ font-size: 1.5em;}
	.success > span{ font-size: 0.9em;}
}
@media screen and (max-width: 990px) {
	.success{ font-size: 1.3em;}
	.success strong{}
}
@media screen and (max-width: 681px) {
	.success{ font-size: 1.1em; letter-spacing: 1px; padding: 1.1em 1em;}
	.success b{ background: url(../img/top/komari.png) no-repeat right top / auto 1em;}
}
@media screen and (max-width: 414px) {
	.success b{ background: url(../img/top/komari.png) no-repeat right top / auto 0.9em;}
}

.one_stop{ max-width: 1280px; margin: 0 auto; padding: 20px 0;}
.one_stop::after{ clear: both; content: " "; display: block;}
.one_stop .figure{ float: right; width: 500px;}
.one_stop .figure img{ max-width: 100%;}
.one_stop .textbox{ float: left; width: 690px; padding-top: 30px;}
.one_stop .textbox::after { clear: both; content: " "; display: block;}
.one_stop .textbox img{ display: block; float: left; max-width: 110px; margin-right: 15px;}
.one_stop .textbox img.img1{}
.one_stop .textbox img.img2{ display: none;}
.one_stop .textbox .text{ float: left; width: 530px;}
.one_stop .textbox h2{ border-bottom: 8px solid #FFFF00; padding-bottom: 15px; margin-bottom: 25px;}
.one_stop .textbox h2::after { clear: both; content: " "; display: block;}
.one_stop .textbox h2 strong{ font-size: 50px; float: left; display: inline-block; color: #FF3366; line-height: 1em; letter-spacing: 3px;}
.one_stop .textbox h2 span{ display: inline-block; float: right; font-size: 20px; line-height: 1.2em;}
.one_stop .textbox .text p{ line-height: 1.7em;}
.one_stop .textbox .clearfix a{ display: block; float: left;}
.one_stop .textbox .clearfix a:nth-of-type(1){ width: 47%; float: left;}
.one_stop .textbox .clearfix a:nth-of-type(2){ width: 37%; float: right;}

@media screen and (max-width: 1280px) {
	.one_stop{ max-width: 92%; padding: 40px 0 50px;}
	.one_stop .figure{ width: 37%;}
	.one_stop .textbox{ width: 61%; padding-top: 0;}
	.one_stop .textbox img{ max-width: 70px; margin-right: 10px;}
	.one_stop .textbox img.img1{ display: none;}
	.one_stop .textbox img.img2{ display: block;}
	.one_stop .textbox h2{ padding-bottom: 10px; margin-bottom: 20px;}
	.one_stop .textbox h2 strong{ font-size: 43px;}
	.one_stop .textbox h2 span{ font-size: 19px; line-height: 1.3em;}
	.one_stop .textbox .text{ width: 93%;}
}
@media screen and (max-width: 1024px) {
	.one_stop{ max-width: 94%;}
	.one_stop .textbox{ width: 58%;}
	.one_stop .figure{ width: 38%;}
	.one_stop .textbox img{ max-width: 60px;}
	.one_stop .textbox h2 strong{ font-size: 40px;}
	.one_stop .textbox .text{ width: 100%;}
}
@media screen and (max-width: 990px) {
	.one_stop .textbox h2 strong{ font-size: 35px;}
}
@media screen and (max-width: 681px) {
	.one_stop{ max-width: 86%; padding: 30px 0 40px;}
	.one_stop .figure{ float: none; width: 100%;}
	.one_stop .textbox{ float: none; width: 100%;}
	.one_stop .textbox img{ float: none; max-width: 100px;}
	.one_stop .textbox img.img1{ display: block; margin: 15px auto 10px;}
	.one_stop .textbox img.img2{ display: none;}
	.one_stop .textbox h2{ text-align: center; border-bottom: 6px solid #FFFF00; margin-bottom: 15px; line-height: 1.5em;}
	.one_stop .textbox h2 strong{ letter-spacing: 2px; float: none; max-width: 100%; font-size: 30px;}
	.one_stop .textbox h2 span{ font-size: 17px; float: none; max-width: 100%; font-weight: normal;}
	.one_stop .textbox .text p{ font-size: 14px; /*line-height: 1.6em;*/}
	.one_stop .textbox .clearfix a{ float: none;}
	.one_stop .textbox .clearfix a:nth-of-type(1){ width: 74%; margin: 0 auto 3%; float: none;}
	.one_stop .textbox .clearfix a:nth-of-type(2){ width: 74%; margin: 0 auto; float: none;}
	.one_stop .textbox .text .p_b_box{ font-size: 15px;}
}



.topics_area{ max-width: 100%;}
.topics_area::after{ clear: both; content: " "; display: block;}
.topics_area h3{ margin-bottom: 10px;}
.topics_area h3::after{ clear: both; content: " "; display: block;}
.topics_area h3 .b_p_arrow{ display: inline-block; border: 1px #FF3366 solid; float: right; background: #FFFFFF url(../img/icon/b_p_arrow.png) no-repeat center center; padding: 25px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;}
.topics_area h3 .f{ display: inline-block; float: right; background: #315096 url(../img/icon/w/f.png) no-repeat center center; padding: 25px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;}
.topics_area .facebook{ float: left; width: 47%; padding: 1% 1.5% 2%; background: #e0e5ef;}


.topics_area .topics{ float: left; width: 47%; padding: 1% 1.5% 2%; background: #f2eee3;}
.topics_area .box{ background:#FFFFFF; overflow-x: hidden; max-height: 350px; font-size: 15px; line-height: 1.6em;}
.topics_area .box dl{ border-bottom: 1px dotted #FF3366; padding: 2% 2% 2% 3%;}
.topics_area .box dl::after{ clear: both; content: " "; display: block;}
.topics_area .topics dl dt{ display: block; padding-bottom: 1em;}
.topics_area .topics dl dd{ display: block;}
.topics_area a{ text-decoration: underline;}
.topics_area a:hover{ text-decoration: none;}

@media screen and (max-width: 1280px) {
	.topics_area h3{ margin-bottom: 15px;}
	.topics_area .topics{ width: 44%; padding: 2% 3% 3%;}
	.topics_area .facebook{ width: 44%; padding: 2% 3% 3%;}
}

@media screen and (max-width: 1024px) {
	.topics_area h3 .b_p_arrow{ background: #FFFFFF url(../img/icon/b_p_arrow.png) no-repeat center center / 60% auto; padding: 20px;}
	.topics_area h3 .f{ background: #315096 url(../img/icon/w/f.png) no-repeat center center / 60% auto; padding: 20px;}
	.topics_area .box{ font-size: 14px;}
	.topics_area .box dl{ padding: 3% 3% 3% 4%;}
	.topics_area .topics dl dt{ padding-bottom: 0.5em;}
}
@media screen and (max-width: 990px) {
}
@media screen and (max-width: 681px) {
	/*.topics_area h3{ position: relative;}
	.topics_area h3 .b_p_arrow{ position: absolute; right: 0; top: 0; float: none;}*/
	.topics_area .topics{ width: auto; float: none; padding: 3% 6% 5%;}
	.topics_area .facebook{ width: auto; float: none; padding: 3% 6% 5%;}
}

.recruit{ padding-bottom: 50px;}
.recruit .recruit_area{ max-width: 1280px; margin: 0 auto;}
.recruit .recruit_area::after{ clear: both; content: " "; display: block;}
.recruit .recruit_area h3{ padding: 0.8em 0;}
.recruit .recruit_area h3::after{ clear: both; content: " "; display: block;}
.recruit .recruit_area h3 a{ display: inline-block; float: right;}
.recruit .recruit_area .textbox{ float: left; width: 420px;}
.recruit .recruit_area .textbox p{ color: #303030; font-size: 14px;}
.recruit_area .textbox ul{ max-width: 100%; margin: 0 auto; padding-top: 30px;}
.recruit_area .textbox ul::after{ clear: both; content: " "; display: block;}
.recruit_area .textbox ul li{ margin: 10px 10px 0 0; float: left;}
.recruit_area .textbox ul li img{ max-width: 100%;}
.recruit_area .office_box{ width: 860px; float: right;}
.recruit_area .office_box::after{ clear: both; content: " "; display: block;}
.recruit_area .office_box .office{ border: 1px solid #c1c1c1; width: 358px; margin-left: 30px; float: left;}
.recruit_area .office_box .yokohama{ background: #FFFFFF url(../img/top/yokohama.png) no-repeat top left / 100% auto; padding: 170px 10% 5%;}
.recruit_area .office_box .amami{ background: #FFFFFF url(../img/top/amami.png) no-repeat top left / 100% auto; padding: 170px 10% 5%;}
.recruit_area .office_box .office p{ line-height: 2em;}
.recruit_area .office_box .office p small{ line-height: 1.6em; display: inline-block;}

@media screen and (max-width: 1440px) {
	.recruit .recruit_area{ max-width: 94%;}
	.recruit .recruit_area .textbox{ width: 40%;}
	.recruit_area .textbox ul{ padding-top: 10px;}
	.recruit_area .textbox ul li{ max-width: 46%; margin: 3% 4% 0 0;}
	.recruit_area .office_box{ width: 60%;}
	.recruit_area .office_box .office{ margin-left: 2%; width: 47%;}
	.recruit_area .office_box .yokohama{ padding: 150px 9% 5%;}
	.recruit_area .office_box .amami{ padding: 150px 9% 5%;}
}
@media screen and (max-width: 1280px) {
	/*.recruit .recruit_area{ max-width: 94%;}
	.recruit .recruit_area .textbox{ width: 40%;}
	.recruit_area .textbox ul{ padding-top: 10px;}
	.recruit_area .textbox ul li{ max-width: 46%; margin: 3% 4% 0 0;}
	.recruit_area .office_box{ width: 60%;}
	.recruit_area .office_box .office{ margin-left: 2%; width: 47%;}
	.recruit_area .office_box .yokohama{ padding: 150px 9% 5%;}
	.recruit_area .office_box .amami{ padding: 150px 9% 5%;}*/
}
@media screen and (max-width: 1024px) {
	.recruit .recruit_area .textbox{ width: 37%;}
	.recruit_area .office_box{ width: 63%;}
	.recruit_area .office_box .yokohama{ padding: 150px 8% 5%;}
	.recruit_area .office_box .amami{ padding: 150px 8% 5%;}
}
@media screen and (max-width: 990px) {
}
@media screen and (max-width: 681px) {
	.recruit{ padding-bottom: 25px;}
	.recruit .recruit_area{ max-width: 90%;}
	.recruit .recruit_area h3 a{ margin-top: 0.5em;}
	.recruit .recruit_area h3 a::before{ clear: both;}
	.recruit .recruit_area .textbox{ float: none; width: 100%; padding-bottom: 20px;}
	.recruit_area .textbox ul li{ margin: 3% 1% 0; max-width: 48%;}
	.recruit_area .office_box{ width: 100%;}
	.recruit_area .office_box .office{ margin: 0 0.5%; width: 48%;}
	.recruit_area .office_box .yokohama{ padding: 47% 6% 10%;}
	.recruit_area .office_box .amami{ padding: 47% 6% 10%;}
	.recruit_area .office_box .office p{ line-height: 1.5em; font-size: 13px;}
}

.service{ padding: 40px 0;}
.service .service_area{ max-width: 1280px; margin: 0 auto;}
.service h4{ font-size: 20px; padding-bottom: 0.5em;}
.service ul{ max-width: 100%;}
.service ul::after{ clear: both; content: " "; display: block;}
.service ul li{ float: left; width: 292px; margin: 0 25px 25px 0;}
.service ul li a{ border: #a5a5a6 1px solid; display: block;}
.service ul li a:hover{ border: #FF3366 1px solid;}
.service ul li a img{ max-width: 100%;}

@media screen and (max-width: 1280px) {
	.service{ padding: 25px 0;}
	.service .service_area{ max-width: 92%;}
	.service ul li{ width: 25%; margin: 0 2% 2% 0;}
}
@media screen and (max-width: 1280px) {
	.service .service_area{ max-width: 94%;}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 990px) {
}
@media screen and (max-width: 681px) {
	.service .service_area{ max-width: 90%;}
	.service{ padding: 15px 0;}
	.service ul li{ width: 48%; margin: 0 1% 2%;}
}