@charset "UTF-8";
/* CSS Document */

/*スマホ用スタイル*/
@media screen and (max-width: 767px){
	body{
		font-size:14px;
		line-height:1.4;
	}
	section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.rank_narrow{
		padding: 0;
	}
	.pagetop {
		bottom: 10px;
		right: 5px;
	}
	.white-box {
		padding: 15px;
	}
	.sp-text-left {
		text-align: left!important;
	}
	.container{
		width: 100%;
	}
	.spwd20{
		width: 20%;
	}

	/*header*/
header{
		padding: 10px 15px;
	}
header#lp4{
		padding: 0px;
	}
header #header_04 .clearfix{
		padding: 10px 15px;
	}
	.hl {
    	float: none;
    	width: 50%;
	}
	.hr {
    	float: none;
    	width: 100%;
    	margin-top: 0;
	}
	.hr h1{
		font-size: 12px;
		margin-bottom: 0;
	}
	.header_btm{
		height: 5px;
	}

	/*mv*/
	.mv{
		padding: 0;
		margin-bottom: 10px;
	}

	/*maincontent*/
	.maincontent{
		margin-bottom: 60px;
	}
	.mc_fl{
		float: right;
		width: 100%;
	}
	.mc_fr{
		float: left;
		width: 100%;
	}

	.rank_fl{
		float: left;
		width: 20%;
	}
	.rank_fl img{
		margin: 0px 0px 12px;
	}
	.rank_fr{
		float: right;
		width: 80%;
		padding: 10px 10px 10px;
	}
	.rank_fr h2{
		font-size: 17px;
		margin: 0;
	}
	.rank_fl02{
		float: none;
		width: 100%;
		margin-bottom: 10px;
		max-width: 330px;
		margin: 0 auto 20px;
	}
	.rank_fr02{
		float: none;
		width: 100%;
	}
	.rank_fl_03{
		padding: 10px 5px;
	}
	.rank_fr_03_fl{
		padding: 10px;
	}
	.rank_fr_03_fr{
		padding: 10px;
		font-size: 13px;
	}
	.tel_num{
		padding-left: 45px;
	}
	.big_tel_fl{
		width: 100%;
		padding: 15px;
	}
	.big_tel_fr{
		width: 100%;
	}
	.area_in01{
		font-size: 24px;
	}
	.tel_num{
		font-size: 6.5vw;
	}
	.point_fr{
		font-size: 4.5vw;
	}
	.spno01{
		background: url("../img/sp_rank01.png") no-repeat 5px center;
	}
	.spno02{
		background: url("../img/sp_rank02.png") no-repeat 5px center;
	}
	.spno03{
		background: url("../img/sp_rank03.png") no-repeat 5px center;
	}
	.spno04{
		background: url("../img/sp_rank04.png") no-repeat 5px center;
	}
	.spno05{
		background: url("../img/sp_rank05.png") no-repeat 5px center;
	}
	.comp .btn_inner a {
		width: 18%;
		bottom: 13px;
	}
	.comp .btn_inner a img{
		width: 100%;
	}
	.comp .comp_inner {
		overflow: auto;
		padding-left: 28vw;
	}
	.comp .btn_inner {
		width: 159vw;
		position: relative;
	}
	.comp .hyou_left img{
		display: block;
		height: auto;
		left: 0;
		position: absolute;
		top: 0;
		width: 30vw;
	}
	.comp .btn_inner img{
		width: 100%;
	}
	.comp .comp_inner {
		overflow: auto;
		padding-left: 30vw;
	}
	@media (min-width: 421px) and (max-width: 768px) {
		.comp .comp_inner {
			height: 800px;
			padding-left: 85px;
			overflow-y: hidden;
		}
		.comp .btn_inner {
			width: 450px;
			height: 800px;
		}
		.comp .hyou_left img {
			height: 100%;
			width: auto;
		}
	}
	.comp .btn_inner a:nth-of-type(1){
		right: 81%;
	}
	.comp .btn_inner a:nth-of-type(2){
		right: 61%;
	}
	.comp .btn_inner a:nth-of-type(3){
		right: 41.3%;
	}
	.comp .btn_inner a:nth-of-type(4){
		right: 21.3%;
	}
	.comp .btn_inner a:nth-of-type(5){
		right: 1.5%;
	}
	.comp-arrow-left,
	.comp-arrow-right {
		height: 20vw;
		margin-top: -10vw;
		opacity: 0.2;
		position: fixed;
		top: 50%;
		width: 20vw;
	}
	.comp-arrow-left {
		left: 31.5%;
	}
	.comp-arrow-right {
		right: 10%;
	}
	/*footer*/
	.f_top{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.f_link{
		font-size: 12px;
	}
	.f_link li{
		width: 100%;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #fff;
		margin-left: 0;
		margin-right: 0;
	}
	.f_btm{
		font-size: 12px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	/*sub*/
	.hr .txt{
		font-size: 12px;
		margin: 0.67em 0;
		margin-bottom: 0;
		font-weight: normal;
		letter-spacing: -0.05em;
    	line-height: 1.4;
	}
	.sub_h1{
		font-size: 20px;
		margin-bottom: 20px;
	}
	.sub_h2{
		margin-bottom: 15px;
		font-size: 18px;
	}
	.mcarea{
		padding-left: 15px;
		padding-right: 15px;
	}
	.company_dl dt{
		font-size: 14px;
		font-weight: bold;
	}
	/*detil*/
	.detail_area_dl dt{
		font-size: 18px;
	}
	.area_tit{
		width: 100%;
	}
	.price_box{
		padding: 10px;
	}
	.price li{
		font-size: 1em;
	}
	.price li span{
		font-size: 5vw;
		line-height: 1.3;
	}
	.voicebox{
		padding: 15px;
	}
	.voicebox dt{
		font-size: 18px;
	}

	/*トグル*/
	#nav_toggle {
    	width: 40px;
    	height: 60px;
    	margin-right: 0;
    	right: 15px;
    	float: right;
    	position: absolute;
    	display: block;
    	top: 10px;
	}
	#nav_toggle div {
    	position: relative;
	}
	#nav_toggle span:nth-child(1) {
    	top: 0;
	}
	#nav_toggle span:nth-child(2) {
    	top: 10px;
	}
	#nav_toggle span:nth-child(3) {
    	top: 20px;
	}
	#nav_toggle span {
    	display: block;
    	height: 4px;
    	background: #000;
   		position: absolute;
    	width: 100%;
    	left: 0;
    	-webkit-transition: 0.5s ease-in-out;
    	-moz-transition: 0.5s ease-in-out;
    	transition: 0.5s ease-in-out;
	}
#lp3 #nav_toggle span {
			background: #fff;
	}
	#nav_toggle:after {
    	content: "MENU";
    	color: #000;
    	display: block;
    	padding-top: 27px;
    	font-weight: bold;
    	letter-spacing: 0.06em;
    	text-align: center;
    	font-size: 80%;
	}
	#lp3 #nav_toggle:after {
			color: #fff;
	}
	.open:after {
    	content: "CLOSE"!important;
    	color: #000;
    	display: block;
    	padding-top: 27px;
    	font-weight: bold;
    	letter-spacing: 0.06em;
    	text-align: center;
    	font-size: 80%;
	}
	#lp3 .open:after {
			color: #fff;
	}


	.sp_nav .inner{
    	display:none;
	}
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
    	top: 12px;
    	-webkit-transform: rotate(135deg);
    	-moz-transform: rotate(135deg);
    	transform: rotate(135deg);
	}
	.open #nav_toggle span:nth-child(2) {
    	width: 0;
    	left: 50%;
	}
	.open #nav_toggle span:nth-child(3) {
    	top: 12px;
    	-webkit-transform: rotate(-135deg);
    	-moz-transform: rotate(-135deg);
    	transform: rotate(-135deg);
	}
	.sp_nav ul{
		display: inherit;
    	border-left: 0;
		flex-flow: row;
		margin: 0;
		padding: 0;
		justify-content: center;
		margin-left: -15px;
		margin-right: -15px;
		margin-top: 10px;
	}
	.sp_nav ul li{
		border-bottom: 1px solid #fff;
	}
	.sp_nav ul li a{
		display: block;
		width: 100%;
		background: #eee;
		padding: 10px 15px;
		text-decoration: none;
	}
	.sp_nav ul li a:hover{
		text-decoration: none;
		background: #fff45c;
	}
	.sp_nav ul li a:focus{
		text-decoration: none;
	}
	.nav_tit{
		background: #D44761;
		font-weight: bold;
		color: #fff;
		padding: 10px 15px;
	}
.voice {
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
	}
	.voice li{
		margin: 10px 0;
	}

}

/*スマホ用スタイルend*/