@charset "utf-8";
/* ===================================================================
CSS information

 file name  : sp.css
 style info : スマートフォン用
=================================================================== */

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

	/* -----------------------------------------------------------
			convertion-wrap
	----------------------------------------------------------- */
	.contact-wrap {
		padding: 2.5% 5% 5%;
	}
	.contact-wrap > .title {
		margin: 0 auto 10%;
	}
	.contact-wrap > .title > .blue {
		color: #001a7c;
	}
	.contact-wrap > .title > .red {
		color: #ff0000;
	}
	.contact-wrap > .content {
		padding: 28.9062% 5% 5%;
	}
	.contact-wrap > .content > .woman {
		position: absolute;
		top: -20px;
		left: 5%;
		width: 90%;
	}

	/* -----------------------------------------------------------
			top
	----------------------------------------------------------- */
	.flow-wrap > .flowitem {
		margin: 0 0 5%;
	}
	.price-wrap > .content {
    display: block;
	}
	.price-wrap > .content > .basicprice {
    margin: 0 0 10%;
	}

}

@media screen and (max-width: 414px){
	#header {
    padding: 10px 5%;
	}
	#header > .title {
    font-size: 1.6rem;
	}
	.contact-wrap > .title {
    font-size: 2.5rem;
	}
	.contact-wrap > .title:before, 
	.contact-wrap > .title:after {
    width: 20px;
    height: 32.56px;
	}
	.contact-wrap > .title:before {
    left: -25px;
	}
	.contact-wrap > .title:after {
    right: -25px;
	}
	.worry-wrap > .worryitem > .item > .title > .copy {
    font-size: 1.6rem;
	}
	.worry-wrap > .worryitem {
    padding: 0 5px 10%;
	}
	.worry-wrap > .worryitem > .item:first-of-type > .title > .copy {
		right: 30px;
    top: 15px;
	}
	.worry-wrap > .worryitem > .item > .detail {
    margin: -60px 0 0 0;
	}
	.worry-wrap > .worryitem > .item > .detail > p {
    font-size: 1.6rem;
    top: 45px;
    left: 35px;
	}
	.worry-wrap > .worryitem > .item:first-of-type > .detail > p {
    left: 55px;
    top: 50px;
	}
	.worry-wrap > .worryitem > .item:nth-of-type(2) > .title > .copy {
    left: 15px;
    top: 20px;
	}
	.worry-wrap > .worryitem > .item:nth-of-type(3) > .title > .copy {
    right: 7px;
    top: 16px;
	}
	.worry-wrap > .saleswrap:after {
    width: 135px;
    height: 37.14px;
	}
	.worry-wrap > .saleswrap > .content {
    width: 100%;
		margin: 0 auto;
		padding: 5%;
	}
	.worry-wrap > .saleswrap > .content > .salesitem {
    font-size: 3.25rem;
	}
	.worry-wrap > .saleswrap > .content > .freecopy > span span {
    font-size: 10rem;
    font-weight: 900;
    font-style: italic;
    padding: 0 20px 0 0;
	}
	.worry-wrap > .saleswrap > .content > .freecopy > span {
    font-size: 6rem;
    color: #ff0101;
	}
	.voice > .title {
    font-size: 2.5rem;
	}
	.voice > .title:before, 
	.voice > .title:after {
    width: 20px;
    height: 32.56px;
	}
	.voice > .title:before {
    left: -25px;
	}
	.voice > .title:after {
    right: -25px;
	}
	.voice > .item > .title:before {
    width: 20px;
    height: 30px;
    left: 10px;
	}
	.voice > .item > .title {
    font-size: 1.6rem;
    padding: 20px 20px 20px 40px;
	}
	.voice > .item > .title > span {
		font-size: 1.4rem;
		display: block;
	}
	.flow-wrap > .flowitem > .item {
    padding: 15px;
	}
	.flow-wrap > .flowitem > .item > .title {
    font-size: 2.0rem;
	}
	.flow-wrap > .flowitem > .item > .title > span {
    font-size: 4rem;
	}
	.flow-wrap > .flowitem > .item > .copy {
    font-size: 2rem;
	}
	.flow-wrap > .flowitem > .item:not(:first-of-type):before {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 50px 0 50px;
		border-color: #fff transparent transparent transparent;
	}
	.flow-wrap > .flowitem > .item:nth-of-type(even):before {
    border-color: #3b59cc transparent transparent transparent;
	}
	.flow-wrap > .flowitem > .item:not(:first-of-type) {
    padding: 30px 15px 15px;
	}
	.qa-wrap > .qaitem {
    padding: 10px;
	}
	.qa-wrap > .qaitem > .title:before, .qa-wrap > .qaitem > .detail:before {
    content: "";
    margin: 0 10px 0 0;
    width: 30px;
    flex: 0 0 30px;
	}
	.qa-wrap > .qaitem > .title {
    padding: 0 0 15px;
    margin: 0 0 15px;
	}
}

@media screen and (max-width: 375px){
	.contact-wrap > .title {
    font-size: 2rem;
	}
	.contact-wrap > .content > .detail > .formcontent > .copy {
    font-size: 1.4rem;
	}	
	.worry-wrap > .worryitem > .item > .title > .copy {
    font-size: 1.4rem;
	}
	.worry-wrap > .worryitem > .item > .detail > p {
    font-size: 1.4rem;
	}
	.worry-wrap > .saleswrap > .content > .salesitem {
    font-size: 3rem;
	}
	.worry-wrap > .saleswrap > .content > .subcopy {
    font-size: 1.4rem;
	}
	.worry-wrap > .saleswrap > .content > .subcopy br {
    display: none;
	}
	.voice > .title {
    font-size: 2rem;
	}
	.voice > .item > .detail {
    font-size: 1.6rem;
    padding: 15px;
	}
	.voice > .item {
    margin: 0 0 5%;
	}
	.flow-wrap > .title {
    font-size: 2.0rem;
	}
	.price-wrap > .content > .basicprice .nestdetail, 
	.price-wrap > .content > .optionprice .nestdetail {
    font-size: 1.4rem;
	}
	.qa-wrap > .qaitem > .title {
    font-size: 1.6rem;
	}
	.qa-wrap > .qaitem > .detail {
    font-size: 1.4rem;
	}
	.contact-wrap > .title:before {
    left: -15px;
	}
	.contact-wrap > .title:after {
    right: -15px;
	}
}

@media screen and (max-width: 320px){
	.contact-wrap > .title {
    font-size: 2rem;
	}
	.contact-wrap > .content > .detail > .formcontent > .copy {
    font-size: 1.2rem;
	}	
	.worry-wrap > .saleswrap:after {
		top: -3%;
		width: 90px;
    height: 37.14px;
	}
	.worry-wrap > .worryitem > .item > .title > .copy {
    font-size: 1.2rem;
	}
	.worry-wrap > .worryitem > .item > .detail > p {
    font-size: 1.2rem;
	}
	.worry-wrap > .saleswrap > .content > .salesitem {
    font-size: 3rem;
	}
	.worry-wrap > .saleswrap > .content > .subcopy {
    font-size: 1.4rem;
	}
	.worry-wrap > .saleswrap > .content > .subcopy br {
    display: none;
	}
	.worry-wrap > .worryitem > .item > .detail > p {
    top: 40px;
    left: 30px;
	}
	.worry-wrap > .worryitem > .item:first-of-type > .detail > p {
    left: 50px;
    top: 40px;
	}
	.worry-wrap > .worryitem > .item:nth-of-type(2) > .title > .copy {
    left: 10px;
    top: 15px;
	}
	.worry-wrap > .saleswrap > .content > .salesitem {
    font-size: 2.5rem;
	}
	.voice > .title {
    font-size: 2rem;
	}
	.voice > .item > .detail {
    font-size: 1.6rem;
    padding: 15px;
	}
	.voice > .item {
    margin: 0 s0 5%;
	}
	.flow-wrap > .title {
    font-size: 2.0rem;
	}
	.price-wrap > .content > .basicprice .nestdetail, 
	.price-wrap > .content > .optionprice .nestdetail {
    font-size: 1.4rem;
	}
	.qa-wrap > .qaitem > .title {
    font-size: 1.6rem;
	}
	.qa-wrap > .qaitem > .detail {
    font-size: 1.4rem;
	}
	.contact-wrap > .title:before {
    left: -15px;
	}
	.contact-wrap > .title:after {
    right: -15px;
	}
}