@charset "utf-8";

/***********************************************************************************************************************
* 横サイズ1080px以下
***********************************************************************************************************************/
@media screen and (max-width: 1100px){
	img{width: 100%;}

	.pc{ display:none !important; }
	.sp{ display: block !important; }


	a[href^="tel:"] {
		pointer-events: all;
	}

	.head-label>span{
		width: 100%;
		max-width: 167px;
		height: 30px;
		line-height: 23px;
		border:2px solid #222222;
	}

	.head-label>span img{
		height: 15px;
		width: auto;
	}

	.head-label2>span{
		display: inline-block;
		max-width: 150px;
		width:100%;
		height: 27px;
		line-height: 22px;
		border:2px solid #222222;
		-webkit-border-radius:2em;
		border-radius:2em;
		font-size: 1.3rem;
	}


	.wrap{
		padding: 0 20px;
	}

	main {
	    margin-top: 52px;
	}

	/**/

	.float-nav{
		display: block;
		position: fixed;
		left:0;
		bottom:0;
		width: 100%;
		z-index: 100;
	}
	.float-nav>ul{
		padding: 10px;
		background: #fffee6;
	}
	.float-nav>ul>li {
	    margin: 0 3px;
	    width: 33%;
	    max-width: 150px;
	}
	.float-nav>ul>li>a {
	    display: block;
	    padding: 16px 0px;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	    background: #ff2200;
	    color: #fff;
	    text-align: center;
	    font-size: 1rem;
	    white-space: nowrap;
	}

	.float-nav>ul>li>a.mail{
		background: #ff6600;
	}
	.float-nav>ul>li>a.line{
		background: #3bd42e;
	}
	.float-nav>ul>li>a img{height: 1.7rem; width: auto; vertical-align: middle; margin-right: 0.5em;}

	/*header*/

	header {
    	height: 52px;
	    padding-left: 10px;
	}

	header .logo img{
    	max-width: 225px;
	}
	header .logo p {
	    font-size: 1rem;
	    margin-top: 3px;
	}

	header .label,
	header .tel,
	header .line,
	header .mail {
	    display: none;
	}

	footer {
	    padding: 27px 0 100px;
	}

	footer .logo{
		display: block;
		max-width: 110px;
		margin:0 auto;
	}
	footer .heading{
		font-size: 1.2rem;
	}
	footer .para{
		font-size: 1rem;
	}

	footer .corp{
		font-size: 1.1rem;
	}
	footer .copyright{
		font-size: 1rem;
	}
	#pagetop>span {
	    width: 50px;
	    height: 50px;
	}

	#pagetop {
	    position: fixed;
	    right: 10px;
	    bottom: 68px;
	    width: 50px;
	    height: 50px;
	}

	#pagetop>span>a::after {
   		top: 38%;
	    -webkit-transform: rotate(45deg)  scale(0.8,0.8);
	    transform: rotate(45deg) scale(0.8,0.8);
	}



	/*メインヴィジュアル*/
	.top-main-visual{
		height: auto;
		background: none;
	}
	.top-main-visual img{
		width: 100%;
	}
	.top-main-visual .txt-layer {
		padding: 0;
	}
	.top-main-visual .txt-layer .inr {
	    width: 100%;
	    margin: 0 auto;
	}

	/*トップ概要*/
	#top-outline .infomation {
	    padding: 15px 0 24px;
	}


	#top-outline .point {
	    margin-bottom: 22px;
	}

	#top-outline .point>li {
	    margin: 0 5px;
	    height: 22px;
	    line-height: 18px;
	    color: #FF6600;
	    border: 2px solid #FF6600;
	    padding: 0 10px;
	    font-size: 1.3rem;
	    -webkit-border-radius: 2em;
	    border-radius: 2em;
	}
	#top-outline .catch {
	    font-size: 1.9rem;
	    text-align: center;
	    color: #FF6600;
	    margin: 8px 0 5px;
	}

	#top-outline .infomation .dial-box .ttl {
	    top: -15px;
	}

	#top-outline .infomation .dial-box .ttl>span {
	    display: inline-block;
	    padding: 5px 8px;
	    font-size: 1.2rem;
	    -webkit-border-radius: 0.5em;
	    border-radius: 0.5em;
	}

	#top-outline .infomation .dial-box {
	    position: relative;
	    -webkit-border-radius: 15px;
	    border-radius: 15px;
	    border: 2px solid #222222;
	    background: #fff;
	    padding: 20px 10px 5px;
	    text-align: center;
	}
	#top-outline .infomation .dial-box img{
		width: 229px;
	}
	#top-outline .infomation p {
	    margin: 5px 0 5px;
	    font-size: 	1rem;
	}
	#top-outline .contact-link {
	    margin: 10px auto 20px;
	    max-width: 273px;
	}
	#top-outline .line-head {
	    margin: 0;
	    padding: 10px;
	    color: #fff;
	}
	#top-outline .line-head .ttl {
	    font-size: 2rem;
	    line-height: 1.2em;
	    margin-bottom: 3px;
	}
	#top-outline .infomation p {
	    margin: 0;
	    font-size: 1.1rem;
	}

	#top-outline .before-after {
	    margin: 20px 0;
	}


	#top-outline .before-after .wrap {
	    padding: 0px 10px;
	}

	#top-outline .before-after .block {
	    margin: 30px 0%;
	}
	#top-outline .before-after .block p {
	    font-size: 1rem;
	    margin: 5px 0 5px;
	}

	#top-outline .before-after .block> .before-box,
	#top-outline .before-after .block> .after-box {
	    position: relative;
	    border: 2px solid #222222;
	    background: #FFFEE6;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;
	    width: 100%;
	    padding: 23px 2% 5px;
	    font-size: 1.6rem;
	}



	#top-outline .before-after .block> .arw-box {
	    width: 55px;
	    padding: 17% 5px 0px;
	    text-align: center;
	}

	#top-outline .before-after .block> .arw-box img{
	   width: 32px;
	   height: auto;
	}




	#top-outline .before-after .block .ttl {
    	top: -20px;
	}

	#top-outline .before-after .block .ttl>span img {
	    height: 17px;
	    width: auto;
	}


	#top-outline .before-after .block .ttl>span {
	    display: inline-block;
	    padding: 4px 0 8px;
	    max-width: 98px;
	    -webkit-border-radius: 6px;
	    border-radius: 6px;
	    font-weight: bold;
	}

	#top-outline .before-after .block p {
	    font-size: 1.1rem;
	    line-height: 1.3em;
	    margin: 8px 0 8px;
	}


	#top-outline .bottom {
	    padding-top: 20px;
	}

	#top-outline .bottom .head .ttl {
	    font-size: 1.6rem;
	    text-align: center;
	    line-height: 1.1em;
	    margin-bottom: 8px;
	}

	#top-outline .bottom .head p {
	   font-weight: bold;
    	font-size: 1.7rem;
    	margin-bottom: 10px;
	}

	#top-outline .bottom .wrap {
	    max-width: 1200px;
	    background-image: url(../img/img1.png);
	    background-position: 50% 100%;
	    background-repeat: no-repeat;
	    background-size: 238px auto;
	    padding-bottom: 212px;
	}

	#top-outline .bottom .block>.box {
	    padding-right: 0;
	}

	#top-outline .bottom .block>.box .ttl {
	    font-size: 1.4rem;
	    line-height: 1.3em;
	    margin-bottom: 10px;
	    text-align: center;
	}

	#top-outline .bottom .block>.box p {
	    font-size: 1rem;
	    padding-bottom: 10px;
	}

	.lowest .lowest-ttl {
	    font-size: 2.2rem;
	    margin-bottom: 5px;
	}

	.lowest {
	    padding: 20px 0px 20px;
	    text-align: center;
	}

	.lowest .exp1 {
	    font-size: 1.2rem;
	    margin-bottom: 15px;
	}

	.lowest .exp2 img {
	    width: 220px;
	}

	.lowest .exp3 {
	    font-size: 1.5rem;
	    margin: 15px 0 28px;
	}

	.lowest .price-box .head-label {
	    top: -16px;
	}

	.lowest .price-box .contact-tool {
		display: block;
	}


	.lowest .price-box .contact-tool> .tel-box,
	.lowest .price-box .contact-tool> .mail-box {
	    width: 100%;
	}

	#top-outline .infomation .dial-box .ttl>span {
	    display: inline-block;
	    padding: 5px 8px;
	    font-size: 1.2rem;
	    -webkit-border-radius: 0.5em;
	    border-radius: 0.5em;
	    font-weight:normal;
	}
	.lowest .price-box .contact-tool> .tel-box span {
	    display: block;
	    width: 120px;
	    height: auto;
	    line-height: 1.6em;
	    padding: 5px 8px;
	    margin: 0 auto 10px;
	    font-size: 1.3rem;
	}



	.lowest .price-box {
	    position: relative;
	    margin: 0 auto;
	    max-width: 936px;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;
	    padding: 35px 18px 18px;
	    border: 2px solid #222222;
	 }

	 .lowest .price-box .contact-tool {
	    display: block;
	    margin-bottom: 15px;
	}


	 .lowest .price-box .contact-tool> .tel-box img {
	    max-width: 230px;
	}
	.lowest .price-box .contact-tool> .tel-box p {
	    margin-top: 10px;
	    margin-bottom: 0px;
	    font-size: 1.4rem;
	    font-weight: bold;
	}
	.lowest .price-box .contact-tool .mail-box {
	    padding-top: 7px;
	}

	.lowest .price-box .contact-tool .mail-box span {
	    margin-bottom: 10px;
	    font-size: 1.3rem;
	}

	.lowest .price-box .contact-tool> .mail-box a{
	    max-width: 300px;
	    margin:  0 auto;
	}

	.lowest .price-box .line-area {
	    padding: 0px;
	    background: none;
	}

	.lowest .price-box .line-area .line-tool .url-box {
	    display: none;
	}



	.lowest .price-box .line-area .line-tool{
		display: block;
	}
	.lowest .price-box .line-area .line-tool>.mail-box{
		width: 100%;
	    padding: 0;
	    margin-right: 0;
	}
	.lowest .price-box .line-area .line-tool>.mail-box a{
		max-width: 300px;
		font-size: 1.5rem;
		display: block;
		margin:0 auto;
		/*padding: 10px 20px;*/
	}

	.lowest .price-box .line-area .exp {
	    font-size: 1rem;
	    margin: 10px 0;
	}

	#recomend {
	    padding-top: 20px;
	    padding-bottom: 35px;
	}

	.headline {
	    font-size: 2.1rem;
	}

	#recomend .local-nav {
	    margin-top: 15px;
	    max-width: 500px;
	    margin: 15px auto 0;
	}

	#recomend .local-nav>li>a {
	    position: relative;
	    display: block;
	    height: 412px;
	    background-position: 100% 100%;
	    background-repeat: no-repeat;
	    background-size: 100% auto;
	    border: 2px solid #222222;
	    -webkit-border-radius: 18px;
	    border-radius: 18px;
	}

	#recomend .local-nav>li p {
	    padding-top: 15px;
	    font-size: 1.2rem;
	}

	#recomend .local-nav>li>a {
	    position: relative;
	    display: block;
	    height: auto;
	    padding-bottom: 96%;
	}

	#recomend .local-nav>li>a::after {
	    content: "";
	    position: absolute;
	    display: block;
	    width: 23px;
	    height: 23px;
	    bottom: -12px;
	    left: 50%;
	    margin-left: -11px;
	    background-image: url(../img/under-arw.png);
	    background-repeat: no-repeat;
	    background-size: 23px auto;
	}

	#features {
	    padding-top: 20px;
	    padding-bottom: 20px;
	}

	#features .img-txt-block {
	    margin: 15px 0 20px;
	    display: block;
	}
	#features .img-txt-block .txt-box,
	#features .img-txt-block .img-box {
	    width: 100%;
	    padding:0;
	}
	#features .img-txt-block .img-box {
		width: 52%;
		margin: 0 auto 15px;
	}

	#features .img-txt-block .txt-box .ttl {
		font-size: 1.5rem;
	}

	#features .img-txt-block .txt-box p {
	    font-size: 1.1rem;
	}

	#features .asbest {
	    margin: 0px auto 0;
	    padding: 15px 15px 15px;
	    border: 2px solid #222222;
	    background: #fff;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;
	}

	#features .asbest .ttl {
	    font-size: 1.5rem;
	    margin-bottom: 10px;
	}

	#features .asbest p {
	    font-size: 1.1rem;
	}

	#nationwide {
	    padding: 20px 0;
	}

	#nationwide .img-txt-block ,
	#nationwide .img-txt-block .img-box,
	#nationwide .img-txt-block .txt-box {
	    width: 100%;
	    display: block;
    	margin-top: 0;
	    padding-left:0;
	}

		#nationwide .img-txt-block .img-box{
			width: 50%;
			margin:0 auto 15px;
		}

	#nationwide .img-txt-block .txt-box .ttl {
	    font-size: 1.8rem;
	}

	#nationwide .img-txt-block .txt-box p {
	    margin-bottom: 10px;
	    font-size: 1.1rem;
	}

	#nationwide .img-txt-block .txt-box p strong {
	    font-size: 1.5rem;
	    color: #202020;
	}

	#six-features {
	    padding: 20px 0 20px;
	}

	#six-features .features-list {
	    margin-top: 15px;
	}

	#six-features .features-list>li {
	    width: 48.5%;
	     padding: 15px 0px 10px;
	    margin-right: 2.5%;
	    margin-bottom: 10px;
	    border: 2px solid #202020;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;

	}


	#six-features .features-list>li:nth-child(3n) {
	   margin-right: 2.5%;
	}
	#six-features .features-list>li:nth-child(2n) {

    	margin-right: 0;
	}

	#six-features .features-list>li p {
	    font-size: 1.2rem;
	    line-height: 1.2em;
	    font-weight: bold;
	}

	#service {
	    padding: 20px 0;
	}
	#service .service-list>li {
	    font-size: 1.4rem;
	    padding: 0 10px 2px;
	    text-align: center;
	    display: inline-block;
	    -webkit-border-radius: 2em;
	    border-radius: 2em;
	    background: #222222;
	    color: #fff;
	    font-weight: bold;
	    margin: 0px 6px 10px;
	}

	#service .service-list {
	    max-width: 385px;
	    margin: 15px auto 0;
	}

	#flow {
	    padding-top: 20px;
	    padding-bottom: 15px;
	}

	#flow .flow-block {
	    padding: 15px 0;
	}

	#flow .flow-list {
		display: block;
	    margin-bottom: 15px;
	}
	#flow .flow-list>div{
		width:100% !important;
	}

	#flow .flow-list>.free .inner {
	    padding: 17px 15px 15px 15px;
	    background: #FFCDAC;
	}

	#flow .flow-list>.toll .inner {
	    padding: 17px 15px 15px 15px;
	    background: #AAFFFF;
	}

	#flow .flow-list .step-list>li>a::after {
	    right: -12px;
	    top: 50%;
	    margin-top: -15px;
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 12px 0 12px 11px;
	    border-color: transparent transparent transparent #222222;
	}
#flow .flow-list .step-list>li .step {
    left: 0;
    top: 9px;
    font-size: 1.4rem;
}

#flow .flow-list {
    display: block;
    padding: 0 10px;
    max-width: 500px;
    margin: 0 auto 15px;
}

#flow .flow-list .bhead {
    font-size: 1.5rem;
}

#flow .flow-list .free .step-list>li, #flow .flow-list .toll .step-list>li {
    border: 2px solid #FF6600;
    max-width: 120px;
    height: 230px;
    margin-right: 13px;
    background: #fff;
    border-color: #222222;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#flow .flow-list .step-list>li .inline {
    display: inline-block;
    width: 1em;
    line-height: 1em;
    font-size: 1.1rem;
    font-weight: bold;
    vertical-align: top;
}

	#flow .flow-detail {
	    background: #fff;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;
	    border: 2px solid #222222;
	    padding: 5px 20px 0;
	}

	#flow .flow-list .step-list>li>a {
	    position: relative;
	    display: block;
	    padding: 35px 10px 10px;
	    height: 100%;
	}


	#flow .flow-detail ol>li .head .step {
	    font-size: 1.8rem;
	}

	#flow .flow-detail ol>li .head .inline {
	    font-size: 1.6rem;
	}

	#flow .flow-detail ol>li .fd-block>.img-box {
	    width: 25%;
	    padding-bottom: 10px;
	}

	#flow .flow-detail ol>li .fd-block>.text-box {
	    width: 75%;
	    padding: 0px 0px 10px 10px;
	}

	#flow .flow-detail ol>li .fd-block>.text-box p {
	    font-size: 1.1rem;
	}

	#flow .flow-detail ol>li .fd-block {
	    margin: 15px 0 5px;
	}

	#voice {
	    padding: 20px 0;
	}

	#voice .voice-area .voice-list {
	    margin-top: 15px;
	    display: block;
	    padding: 0 10px;
	}
	#voice .voice-area .voice-list>li{
		width: 100%;
		margin-bottom: 10px;
		padding: 15px;
	}

	#voice .voice-area .voice-list>li .head-block>i {
	    width: 22%;
	    padding: 0 0px 0 10px;
	}

	#voice .voice-area .voice-list>li .head-block>.heading-box>span {
	    font-size: 1.1rem;
	    margin-bottom: 5px;
	}

	#voice .voice-area .voice-list>li .head-block>.heading-box .ttl {
	    font-size: 1.4rem;	
	    line-height: 1.2em;
	}

	#voice .voice-area .voice-list>li .head-block>.heading-box {
	    width: 78%;
	    padding: 0 0 0 13px;
	    font-weight: bold;
	    margin-bottom: 10px;
	}
	#voice .voice-area .voice-list>li .txt-block p {
	    font-size: 1.1rem;
	}

	#faq {
	    padding: 20px 0;
	}
	#faq .faq-area {
	    margin-top: 15px;
	}

	#faq .faq-area .faq-list>li .drw-head p {
	    font-size: 1.1rem;
	    color: #202020;
	    font-weight: bold;
	    line-height: 1.3em;
	}

	#faq .faq-area .faq-list>li .drw-head>i {
	    position: absolute;
	    width: 23px;
	    height: 23px;
	    line-height: 23px;
	    left: 10px;
	    top: 12px;
	    font-size: 1.4rem;
	}

	#faq .faq-area .faq-list>li .drw-head {
	    position: relative;
	    padding: 17px 30px 10px 40px;
	    cursor: pointer;
	}

	#faq .faq-area .faq-list>li .drw-head::after {
	    content: "";
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    width: 18px;
	    height: 18px;
	    border-right: 3px solid #202020;
	    border-bottom: 3px solid #202020;
	    -webkit-transform: rotate(45deg) scale(0.5,0.5);
	    transform: rotate(45deg) scale(0.5,0.5);
	}

	#faq .faq-area .faq-list>li .drw-head.open::after {
	    content: "";
	    position: absolute;
	    top: 16px;
	    right: 10px;
	    -webkit-transform: rotate(225deg) scale(0.5,0.5);
	    transform: rotate(225deg) scale(0.5,0.5);
	}

	#faq .faq-area .faq-list>li {
	    border: 2px solid #222222;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;
	    margin-bottom: 10px;
	}

	#faq .faq-area .faq-list>li .drw-box {
	    padding: 10px 20px 20px 38px;
	    font-size: 1.1rem;
	}

	#contact {
	    padding: 20px 0 20px;
	}

	#contact .headline-contact {
	    font-size: 1.5rem;
	}


	#contact .top-box{
		margin: 15px 0;
	}
	#contact .top-box p {
	    font-size: 1.1rem;
	    margin-bottom: 1em;
	}

	#contact .tbl-caption {
	    margin-bottom: 15px;
	    font-size: 1.1rem;
	}


	#contact .tbl-caption {
	    margin-bottom: 10px;
	    font-size: 1.1rem;
	}

	.contact-block {
	    padding: 15px;
	    border: 2px solid #202020;
	    -webkit-border-radius: 8px;
	    border-radius: 8px;
	}


	.formTbl,
	.formTbl>tbody,
	.formTbl>tbody>tr,
	.formTbl>tbody>tr>th,
	.formTbl>tbody>tr>td {
		width:100%;
		display: block;
		font-size: 1.3rem;
	}

	.formTbl>tbody>tr>th {
	    padding: 5px 0 7px;
	}
	.formTbl .block2>label:nth-child(1), 
	.formTbl .block2>div:nth-child(1) {
	    border-right: 2px solid #fff;
	}
		.formTbl .block2>label:nth-child(2), 
	.formTbl .block2>div:nth-child(2) {
	    border-left: 3px solid #fff;
	}

	.formTbl .input {
	    height: 35px;
	    line-height: 35px;
	    width: 100%;
	    text-indent: 1em;
	    font-size: 1.4rem;
	    background: #EEEEEE;
	    /* padding: 0 20px; */
	}
	.formTbl>tbody>tr>td {
	    padding-bottom: 8px;
	}

	.formTbl .block2>label, .formTbl .block2>div {
	    height: 35px;
	}
	.radio-group span {
	    font-size: 1.2rem;
	}

	.formTbl input[type="radio"] + span,
	.formTbl input[type="checkbox"] + span {
	    position: relative;
	    display: block;
	    padding-left: 41px;
	    height: 50px;
	    line-height: 50px;
	    cursor: pointer;
	    padding-right: 10px;
	}

	#contact .formTbl textarea {
	    height: 80px;
	    font-size: 1.2rem;
	}

	.submit-area {
	    text-align: center;
	    padding-top: 10px;
	}

	.submit-area .confirm-btn {
		width: 170px;
	    height: auto;
	    line-height: 1.5em;
	    padding:1em 3em;
	    font-size: 1.2rem;
	}

	.contact-block {
	    padding: 15px 15px 30px;
	    border: 2px solid #202020;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	}



}/* 1100px完了*/

@media screen and (max-width: 425px){
	header .logo p {
	    font-size: 2.2vw;
	}
}

@media screen and (max-width: 350px){
	#flow .flow-list .step-list>li .step {
	    left: 0;
	    top: 9px;
	    font-size: 1.2rem;
	}
}