@charset "utf-8";

@media screen and (max-width: 768px){
	.inner {
		width: 100%;
		padding: 0 2%;
		box-sizing: border-box;
	}

	#spNaviBtn, nav#spNavi {
		display:block;
		letter-spacing:normal;
	}

	nav#spNavi li span {
		display: none;
	}

	.fl, .fr { float: none; }

	.pc, #form, #gnav { display:none; }
	.sp, .f_btn { display:block; }

	* { box-sizing:border-box; }

	body { font-size:1.4rem; }

	.fz2rem {
		font-size: 1.7rem;
	}

	header {
		background: #FFF;
		z-index: 99999;
		width: 100%;
		padding: 10px 0;
	}
	header h1 {
		float: left;
		max-width: 35%;
	}
	header .tel {
		display: none;
	}


	.flexbox {
		display: block;
	}

	.flexbox.col2 li,
	.flexbox.col3 li,
	.flexbox.col4 li {
		width:auto;
		text-align: center;
	}

	footer {
		padding: 0 0 0 0;
		text-align: center;
	}
	footer nav ul:first-child {
		display: none;
	}
	footer nav ul.sns {
		margin: 10px 0;
	}
	footer nav ul.sns li {
		margin: 0 10px;
	}
	footer .content {
		background: #EEEEEE;
		padding: 25px 0 10px 0;
	}
	footer .content .left {
		padding-left: 0;
		margin-bottom: 10px;
	}
	footer .content .right {
		padding-right: 0;
	}
	footer .content .copy {
		text-align: center;
		font-size: 1.3rem;
		margin-top: 20px;
	}


	main table.company {
		width:100%;
		margin-top: 25px;
		border-collapse: collapse;
		border-top: none;
	}
	main table.company td, main table.company th {
		display: block;
		padding: 10px;
		border: none;
	}
	main table.company th {
		font-weight: bold;
	}

	.contact_area {
		border: 3px solid #52AB47;
		border-radius: 8px;
		padding: 15px 15px;
	}
	.contact_area .flexbox {
		align-items: center;
	}
	.contact_area .flexbox div:first-child {
		margin-bottom: 10px;
	}
	.contact_area .flexbox div:last-child {
		text-align: center;
	}


	#area1 .flexbox li {
		padding: 30px 15px 10px 15px;
		font-size: 1.5rem;
	}
	#area1 .flexbox li p:last-child {
		margin-top: 10px;
	}
	#area1 .flexbox li:nth-child(1),
	#area1 .flexbox li:nth-child(3) { background: #E2F8E4; }
	#area1 .flexbox li:nth-child(2) { background: #FFF8D9; }


	h2 {
		border: 1px solid #CDCDCD;
		background: -moz-linear-gradient(top, #EFEEEF, #FFF);
		background: -webkit-linear-gradient(top, #EFEEEF, #FFF);
		background: linear-gradient(to bottom, #EFEEEF, #FFF);
		padding: 10px;
		margin-bottom: 20px;
	}
	h2::after {
		content: "";
		width: 5px;
		height: 100%;
		background: #55AD4B;
		position: absolute;
		top: 0;
		margin-top: 0;
	}


	h3 {
		border-bottom: solid 5px #F1F1F1;
		position: relative;
		color: #408539;
		margin-bottom: 20px;
	}

	h3:after {
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 5px #93DD8A;
		bottom: -3px;
		width: 50%;
	}


	.point {
		margin-top: 20px;
	}
	.point dt {
		position: relative;
		padding-left: 0;
		border-bottom: none;
		padding-top: 10px;
	}
	.point dt::before {
		content: "";
		width: auto;
		height: auto;
		position: static;
		display: block;
	}
	.point dt:nth-of-type(1)::before { content: "STEP1"; }
	.point dt:nth-of-type(2)::before { content: "STEP2"; }
	.point dt:nth-of-type(3)::before { content: "STEP3"; }
	.point dt:nth-of-type(1)::before,
	.point dt:nth-of-type(2)::before,
	.point dt:nth-of-type(3)::before {
		background: none;
		font-weight: bold;
		font-size: 1.6rem;
		border-bottom: 1px solid #ccc;
		margin-bottom: 5px;
	}

	.point dd {
		padding: 10px 0 0 0;
		margin-bottom: 15px;
	}


	#area2 {
		padding: 0;
		align-items: center;
	}
	#area2 .left {
		text-align: center;
	}
	#area2 .right {
		width: auto;
		padding: 10px 0;
	}


	#area3 .block {
		transform:skew(0deg, 0deg);
		margin-top: 50px;
	}
	#area3 .block > .flexbox {
		transform:skew(0deg, 0deg);
	}
	#area3 .left {
		padding:0 0 0 0;
		text-align: center;
	}
	#area3 .right {
		padding:20px 10px 0 0;
		width: auto;
		color: #FFF;
	}
	#area3 .right dt {
		font-size: 2rem;
		padding: 0 0 0 20px;
	}
	#area3 .right dd {
		padding: 10px 20px;
		font-size: 1.5rem;
	}
	#area3 .block:last-child {
		margin-bottom: 0;
	}


	#faq li {
		position: relative;
		padding: 20px 0;
		font-weight: bold;
		font-size: 1.6rem;
		margin-top: 10px;
	}
	#faq li:nth-child(odd) {
		background:url(../images/baloon_l.png) no-repeat 110px center;
		padding-left: 150px;
	}
	#faq li:nth-child(even) {
		background:url(../images/baloon_r.png) no-repeat right 110px center;
		text-align: right;
		padding-right: 150px;
	}
	#faq li::before {
		content: "";
		position: absolute;
		top: 0;
		width: 105px;
		height: 72px;
		display: block;
		background:url(../images/icon_faq.png) no-repeat left center;
	}
	#faq li:nth-child(odd)::before {
		left: 0;
	}
	#faq li:nth-child(even)::before {
		right: 0;
	}


	.support {
		margin-top: 30px;
		background: #87C580;
		align-items: center;
	}
	.support img {
		width: 100%;
	}
	.support div:last-child {
		width: auto;
		padding: 10px;
		color: #FFF;
		font-size: 1.7rem;
		font-weight: bold;
	}

	#area5 {
		font-size: 1.6rem;
		margin-bottom: 20px;
	}
	#area5 .left {
		width: auto;
	}
	#area5 .left img {
		width: 100%;
	}
	#area5 .right {
		width: auto;
		margin-top: 10px;
	}


	#voice ul {
		display: block;
		margin-bottom: 30px;
	}
	#voice ul li {
		width:100%;
		margin-bottom: 20px;
	}
	#voice ul li .txt {
		border: 5px solid #55AD4B;
		padding: 15px;
		min-height: inherit;
	}


	#step ul li {
		background: none;
		padding: 0;
		display: block;
		justify-content: space-between;
		margin: 10px 0 40px 0;
		position: relative;
	}
	#step ul li .img {
		width: auto;
		text-align: center;
	}
	#step ul li .txt {
		width: auto;
		margin-top: 10px;
	}
	#step ul li .txt .ttl {
		border-bottom: 1px solid #55AD4B;
		padding: 27px 0 0 140px;
		font-size: 2.2rem;
		margin-bottom: 5px;
	}
	#step ul li .txt .ttl.step1 { background:url(../images/step1.png) no-repeat 10px bottom; }
	#step ul li .txt .ttl.step2 { background:url(../images/step2.png) no-repeat 10px bottom; }
	#step ul li .txt .ttl.step3 { background:url(../images/step3.png) no-repeat 10px bottom; }
	#step ul li .txt .ttl.step4 { background:url(../images/step4.png) no-repeat 10px bottom; }
	#step ul li .txt p:last-child {
		padding: 5px;
	}
	#step ul li::after {
		content: "";
		width: 0;
		height: 0;
		border-top: 13px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 13px solid transparent;
		border-left: 20px solid #FFCC00;
		transform: rotate(90deg);
		position: absolute;
		bottom: -43px;
		left: 50%;
		margin-left: -13px;
	}
	#step ul li:last-child::after {
		display: none;
	}
	#step ul li:last-child {
		margin-bottom: 0;
	}

	#area7 .left {
		text-align: center;
	}
	#area7 .right {
		width: auto;
	}
	#area7 .flexbox.col2 {
		font-size: 1.4rem;
		align-items: center;
		margin-top: 50px;
		margin-bottom: 15px;
	}


	#area8 .contact {
		border: 1px solid #ccc;
		margin-bottom: 35px;
	}
	#area8 .title {
		border: none;
		color: #FFF;
        background: #55AD4B;
		padding: 15px 0 10px 15px;
		position: relative;
		font-size: 2.6rem;
		font-weight: bold;
	}
	/*#area8 .pc .title { background: #55AD4B; }*/
    #area8 .title { background: #55AD4B; }
	/*#area8 .sp .title {
		background: #FFBF00;
		padding-left: 50px;
	}*/
/*	#area8 .title::before {
		content: "";
		display: inline-block;
		position: absolute;
	}*/
	/*#area8 .pc .title::before {
		width: 52px;
		height: 45px;
		background:url(../images/icon_pc.png) no-repeat left center;
		left: 10px;
		top: 8px;
	}*/
  /*  #area8 .title::before {
        width: 52px;
        height: 45px;
        background:url(../images/icon_pc.png) no-repeat left center;
        left: 10px;
        top: 8px;
    }*/
	/*#area8 .sp .title::before {
		width: 23px;
		height: 45px;
		background:url(../images/icon_sp.png) no-repeat left center;
		left: 10px;
		top: 8px;
	}*/

    #area8 .con{
        display: block;
    }
    #area8 .con,
    #area8 tbody,
    #area8 tr,
    #area8 th,
    #area8 td
    {
        display: block;
    }

    #area8 textarea{
        width: 100% !important;
    }


	#area8 ol {
		border-bottom: 1px solid #ccc;
		margin: 10px;
		padding-bottom: 20px;
	}
	#area8 ol li {
		position: relative;
		padding: 30px 0 30px 65px;
	}
	#area8 ol li::before {
		position: absolute;
		width: 50px;
		height: 50px;
	}
	#area8 ol li::after {
		content: "";
		width: 0;
		height: 0;
		border-top: 13px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 13px solid transparent;
		transform: rotate(90deg);
		position: absolute;
		bottom: -25px;
		left: 60px;
	}
    #area8 ol li::after { border-left: 20px solid #FFCC00; }
    #area8 ol li:last-child::after {
        display: none;
    }
    #area8 ol li.c1 { background:url(../images/contact_sp1.png) no-repeat left center; }
    #area8 ol li.c2 { background:url(../images/contact_sp2.png) no-repeat left center; }

    #area8 ol li.c1,
    #area8 ol li.c2 {
        background-size: 50px auto;
    }
    /*#area8 .sp ol li::after { border-left: 20px solid #FFCC00; }
    #area8 ol li:last-child::after {
        display: none;
    }
    #area8 .sp ol li.c1 { background:url(../images/contact_sp1.png) no-repeat left center; }
    #area8 .sp ol li.c2 { background:url(../images/contact_sp2.png) no-repeat left center; }

    #area8 .sp ol li.c1,
    #area8 .sp ol li.c2 {
        background-size: 50px auto;
    }*/


	#area8 .bottom {
		padding: 0 10px 20px 10px;
	}

	#area8 .caution li.flexbox {
		align-items: center;
		background-position: left center;
		margin-top: 10px;
		line-height: 1;
	}
	#area8 .caution li {
		background:url(../images/icon_red.png) no-repeat left 2px;
		padding-left: 20px;
		margin-bottom: 10px;
	}
	#area8 .caution li.flexbox {
		background-position: left 2px;
	}
	#area8 .caution li.flexbox p:first-child {
		margin-bottom: 10px;
	}

	.f_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.f_btn {
		display: flex;
		background: #55AD4B;
		border-top: 1px solid #ccc;
	}
	.f_btn li {
		width: calc(100% / 2);
		text-align: center;
	}
	.f_btn li:first-child {
		border-right: 1px solid #ccc;
	}
	.f_btn li a {
		display: block;
		padding: 15px 0;
		color: #FFF
	}

}


@media screen and (max-width: 540px){


}

@media screen and (max-width: 480px){
	#faq li {
		font-size: 1.3rem;
	}

}

@media screen and (max-width: 320px){



}