@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$main-color: #E63E15;
$sub-color: #972D1C;
$bg-color: #FADCD5;
//共通
#main {
    text-align: justify;
    letter-spacing: 0.2rem;
    font-feature-settings: "palt";
    @include xs {
        letter-spacing: 0.1rem;
    }
}
.breadcrumb{
    padding-top: 0!important;
	margin-bottom: 1.5rem!important;
}
h3 {
    font-weight: 600;
	font-family: "Josefin Sans";
    font-size: 50px;
    font-size: 5rem;
    color: #333;
    text-align: center;
    margin-bottom: 4rem;
    letter-spacing: 0.08em; 
    @include xs {
        font-size: 40px;
        font-size: 4rem;
    }
    span {
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        display: block;
    }
}

.color-blue {
    color: $main-color;
}
.color-pink {
    color: #ff7b80;
}

header {
    .header-box {
        display: none;
    }
}

.websolution-header-box {
	position: fixed;
	top: 120px;
	right: -1px;
    z-index: 20;
    @include sm {
        display: none;
    }
	a {
        position: relative;
		font-family: "Josefin Sans";
		display: inline-block;
		color: #fff;
		font-size: 15px;
		font-size: 1.5rem;
		font-weight: 600;
		text-align: center;
		background-color: #ff7b80;
		border: solid 1px #ff7b80;
		width: 45px;
		height: 170px;
		transition: 0.3s;
		padding-right: 1rem;
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		&::before {
		font-family: "Font Awesome 5 Free";
		content: "\f0e0";
		font-size: 22px;
		font-weight: 400;
		margin-bottom: 0.5rem;
		line-height: 0;
		color: #fff;
		vertical-align: middle;
        letter-spacing: 0.1rem;
		}
		&:hover {
		background-color: #fff;
		border: solid 1px #ff7b80;
		color: #ff7b80;
		}
		&:hover::before {
		color: #ff7b80;
		}
	}
}

#lower-header {
    h1 {
        font-size: 23px;
        font-size: 2.3rem;
        font-weight: 400;
        color: #1a1a1a;
        letter-spacing: 0.05em;
        @include md {
            font-size: 20px;
            font-size: 2rem;
        }
        @include xs {
            font-size: 18px;
            font-size: 1.8rem;
        }
        span {
            font-family: "Josefin Sans";
            font-size: 76px;
            font-size: 7.6rem;
            font-weight: 500;
            @include lg {
                font-size: 70px;
                font-size: 7rem;
            }
            @include md {
                font-size: 65px;
                font-size: 6.5rem;
            }
            @include sm {
                font-size: 60px;
                font-size: 6rem;
            }
            @include xs {
                font-size: 50px;
                font-size: 5rem;
            }
        }
    }
}

#lower-header .lh-inner{
	background-image: url("../img/website-top.jpg");
}

#main-visual {
    .main-bg {
        position: relative;
        background-image: url("../img/website-topimg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right;
        height: 685px;
		padding-top: 8rem;
        @include md {
			height: 500px;
			padding-top: 5rem;
			padding-left: 1rem;
        }
        @include sm {
        }
        @include xs {
			background-image: url("../img/website-xs-topimg.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: bottom;
			padding-left: 0.5rem;
			padding-right: 0.5rem;
        }
		h2{
			border: 0;
			color: #fff;
			line-height: 1.75;
			padding: 0;
			margin-bottom: 0;
			@include md {
				line-height: 1.5;
			}
			@include xs {
				font-size: 30px;
				font-size: 3.0rem;
				text-align: center;
				letter-spacing: 2px;
				margin-bottom: 1rem;
			}
		}
		p{
			font-size: 20px;
			font-size: 2rem;
			color: #fff;
			line-height: 2.5;
			@include md {
				font-size: 18px;
				font-size: 1.8rem;
				line-height: 2;
			}
			@include sm {
				font-size: 16px;
				font-size: 1.6rem;
				line-height: 1.75;
			}
			@include xs {
				text-align: justify;
			}
		}
		img{
			bottom: 0;
			left: 15%;
			position: absolute;
			width: 425px;
			@include lg {
				left: 5%;
			}
			@include md {
				width: 320px;
			}
			@include sm {
				width: 280px;
			}
		}
    }
}


/*---------- worries ----------*/
#worries {
    .worries-bg {
        background-color: $bg-color;
        padding-top: 3rem;
        padding-bottom: 3rem;
        @include md {
        }
        .worries-box {
            .maintext-box {
                position: relative;
                margin-bottom: 0;
                .worries-maintext {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					h3{
						font-size: 40px;
						font-size: 4rem;
						font-weight: 600;
						margin: 0;
						@include md {
							font-size: 35px;
							font-size: 3.5rem;
						}
						@include sm {
							margin: 2rem auto 3rem;
						}
						@include xs {
							font-size: 30px;
							font-size: 3.0rem;
							line-height: 1.5;
						}
						span{
							display: inline-block;
							color: $main-color;
							font-size: 40px;
							font-size: 4rem;
							font-weight: 600;
							@include md {
								font-size: 35px;
								font-size: 3.5rem;
							}
							@include xs {
								font-size: 30px;
								font-size: 3.0rem;
							}
						}
					}
					img{
						width: 25%;
						@include sm {
							display: none;
						}
					}
                }
            }
            ul {
                margin-bottom: 6rem;
                @include md {
                    justify-content: space-evenly;
					margin-bottom: 3rem;
                }
                @include sm {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 0rem;
                }
                li {
                    @include sm {
                        margin-bottom: 2rem;
                    }
                    .point {
                        background-color: #fff;
                        border-radius: 7px;
                        font-size: 20px;
                        font-size: 2rem;
                        font-weight: 600;
                        text-align: center;
                        padding: 2rem 1rem;;
                        box-shadow: 4.5px 4.5px 0px 0px rgba(230, 62, 21, 0.5);
                        line-height: 1.7;
						@include md {
							font-size: 19px;
							font-size: 1.9rem;
						}
						span{
							color: $main-color;
						}
                    }
                    p {
                        padding: 1rem;
                        padding-top: 2rem;
                    }
                }
            }
        }
    }
	.arrow{
		margin-top: -4rem;
		@include sm {
			margin-top: -2rem;
		}
		img{
			text-align: center;
			width: 370px;
			display: flex;
			margin: auto;
			margin-bottom: 5rem;
			@include md {
				width: 300px;
			}
			@include sm {
				width: 230px;
			}
			@include sm {
			   margin-bottom: 3rem;
			}
		}
	}
}


/*---------- works ----------*/
#works{
    margin-bottom: 8rem;
    @include md {
        margin-bottom: 6rem;
    }
    @include xs{
        margin-bottom: 4rem;
    }
	h3{
		font-size: 40px;
		font-size: 4rem;
		font-weight: 600;
		line-height: 2;
		letter-spacing: 5px;
		margin-bottom: 2rem;
		@include md {
			font-size: 38px;
			font-size: 3.8rem;
			letter-spacing: 2px;
			margin-bottom: 0;
		}
		@include sm {
			line-height: normal;
		}
		@include xs {
			font-size: 25px;
			font-size: 2.5rem;
			line-height: 1.5;
			letter-spacing: normal;
		}
		span{
		font-size: 30px;
		font-size: 3rem;
		font-weight: 600;
			@include md {
				font-size: 25px;
				font-size: 2.5rem;
			}
			@include xs {
				font-size: 18px;
				font-size: 1.8rem;
				display: block;
				margin-bottom: 1rem;
			}
		}
	}
	ul{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		@include lg {
			justify-content: space-evenly;
		}
		@include sm {
			flex-wrap: wrap;
			margin-top: 3rem;
		}
		@include xs {
			flex-wrap: wrap;
			margin-top: 2rem;
		}
		li{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			width: 30%;
			@include sm {
				width: 100%;
				justify-content: center;
				align-items: center;
				margin-top: 0.5rem;
			}
			img{
				width: 12%;
				@include sm {
//					width: 6%;
					display: none;
				}
				@include xs {
//					width: 7%;
				}
			}
			p{
				font-size: 20px;
				font-size: 2rem;
				font-weight: 600;
				width: 75%;
				line-height: 1.75;
				text-align: center;
				color: $sub-color;
				@include md {
					font-size: 18px;
					font-size: 1.8rem;
				}
				@include sm {
					font-size: 20px;
					font-size: 2rem;
					box-shadow: 2.5px 2.5px 0px 0px rgba(230, 62, 21, 0.5);
					background-color: $bg-color;
					border-radius: 1rem;
					padding: 0.5rem 1rem;
					width: 90%;
//					width: 40%;
//					padding: 0 2rem;
				}
				@include xs {
//					font-size: 16px;
//					font-size: 1.6rem;
//					width: 55%;
//					padding: 0 2rem;
					width: 100%;
					font-size: 18px;
					font-size: 1.8rem;
				}
			}
		}
	}
	figure{
		text-align: center;
		margin: auto;
		margin-top: 5rem;
		@include md {
			margin-top: 3rem;
		}
		@include sm {
			margin-top: 2rem;
		}
		img{
			width: 100%;
		}
		figcaption{
			a{
				display: block;
				color: $main-color;
				transition: 0.3s;
				&:hover{
					color: $sub-color;
				}
				i{
					padding-left: 0.5rem;
				}
			}
		}
		& + p{
			text-align: center;
			font-size: 30px;
			font-size: 3rem;
			font-weight: 600;
			line-height: 1.75;
			margin: 3rem 0;
			@include xs {
				font-size: 25px;
				font-size: 2.5rem;
				line-height: 1.5;
				margin: 2rem 0;
			}
			span{
				color: $main-color;
			}
			& + div {
				text-align: center;
				margin-bottom: 12rem;
				@include xs {
					margin-bottom: 8rem;
				}
				a{
					width: 45%;
					display: inline-block;
					background: $sub-color;
					border: 1px solid $sub-color;
					color: #fff;
					text-align: center;
					border-radius: 1rem;
					font-size: 18px;
					font-size: 1.8rem;
					padding: 2rem;
					transition: 0.3s;
					@include xs {
						width: 70%;
					}
					&:hover{
						background: #fff;
						color: $sub-color;
					}
				}
			}
		}
	}
}



/*---------- advantage ----------*/
#advantage {
    position: relative;
	&::after{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-color: $bg-color;
		z-index: -1;
		position: absolute;
		top: 22px;
	}
    h3 {
        margin-bottom: 8.5rem;
        @include lg {
            margin-bottom: 3rem;
        }
    }
    .bg-green {
        position: absolute;
        height: 698px;
        width: 100%;
        bottom: 0;
        background-image: linear-gradient(90deg, rgba(50, 119, 255, 1), rgba(98, 201, 255, 1));
        z-index: -1;
        @include md {
            height: 85%;
        }
        @include sm {
            height: 85%;
        }
        @include sm {
            height: 85%;
        }
    }
    ul.box-up {
        margin-bottom: 3.5rem;
        display: flex;
        justify-content:space-between;
        @include lg {
            justify-content:space-evenly;
        }
        @include sm {
			flex-wrap: wrap;
            margin-bottom: 1.5rem;
        }
        li {
			display: flex;
			flex-direction: column;
			max-width: 29%;
			@include sm {
				max-width: 75%;
				margin-top: 3rem;
			}
			@include xs {
				max-width: 90%;
				margin-top: 3rem;
			}
            p {
                margin-top: 3rem;
                @include sm {
                    margin-top: 1rem;
                }
            }
			img{
				max-width: 65%;
				margin: 0 auto 3rem;
				@include sm {
					max-width: 50%;
				}
			}
			dl{
				dt{
					font-size: 21px;
					font-size: 2.1rem;
					text-align: center;
					margin-bottom: 1rem;
					@include md {
						font-size: 19px;
						font-size: 1.9rem;
					}
					@include sm {
						font-size: 23px;
						font-size: 2.3rem;
					}
					@include xs {
						font-size: 20px;
						font-size: 2rem;
					}
				}
				dd{
					text-align: justify;
					a{
						color: $main-color;
						text-decoration: underline;
						transition: 0.3s;
						&:hover{
							color:$sub-color 
						}
					}
				}
			}
        }
		& + p{
			text-align: center;
			font-size: 20px;
			font-size: 2rem;
			font-weight: 600;
			line-height: 2;
			margin: 8rem 0 4rem;
			@include md {
				margin: 5rem 0 2rem;
			}
		}
    }
    ul.box-down {
        padding-bottom: 9rem;
        width: 100%;
        display: flex;
		flex-wrap: wrap;
        justify-content: space-between;
        margin: auto;
        @include md {
            justify-content:space-around;
        }
        @include xs {
            padding-bottom: 5rem;
        }
        li {
            border-radius: 10px;
            background-color: #fff;
            margin-top: 1.5rem;
            width: 23.8%;
            display: flex;
            flex-direction: column;
            padding: 2rem;
            box-shadow: 4.5px 4.5px 0px 0px rgba(230, 62, 21, 0.5);
            @include lg {
                width: 23.5%;
                height: revert;
            }
            @include md {
                width: 46%;
                height: revert;
                padding-top: 2.5rem;
                margin-bottom: 1.5rem;
            }
            @include xs {
                width: 90%;
            }
            img {
                height: 100px;
                margin-bottom: 1rem;
                @include xs {
                    height: 85px;
                    margin-bottom: 0;
                }
            }
            dl {
                dt {
                    font-size: 19px;
                    font-size: 1.9rem;
                    font-weight: 600;
                    text-align: center;
                    color: $sub-color;
                    line-height: 1.5;
					margin-top: 1rem;
                    margin-bottom: 1.5rem;
                    height: 49px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    @include xl {
                        font-size: 18px;
                        font-size: 1.8rem;
                        letter-spacing: 0rem;
                    }
                    @include lg {
                        font-size: 17px;
                        font-size: 1.7rem;
                        letter-spacing: revert;
                    }
                    @include xs {
                        margin-bottom: 1rem;
                    }
                }
                dd {
                    font-size: 15.4px;
                    font-size: 1.54rem;
					text-align: justify;
                    @include lg {
                        line-height: 1.6;
                    }
                }
            }
        }
    }
}


/*---------- flow ----------*/
#flow {
    margin-bottom: 14rem;
        @include xs {
             margin-bottom: 10rem;
        }
    h3 {
        padding-top: 12rem;
        @include lg {
            padding-top: 10rem;
        }
    }
    ul {
        margin-bottom: 0;
        li {
            position: relative;
            z-index: 5;
            .white-box {
                background-color:$bg-color;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 4rem 4rem;
                @include sm {
                    display: block;
                }
                .step-number {
                    font-family: "Josefin Sans";
                    font-weight: 600;
                    font-size: 20px;
                    font-size: 2rem;
                    width: 15%;
                    @include md {
                        margin-right: 2rem;
                    }
                    @include sm {
                        display: inline-block;
                        width: 18%;
                    }
                    @include xs {
                        width: 100%;
                    }
                    span {
                        font-size: 41px;
                        font-size: 4.1rem;
                        color: $main-color;
                        padding-right:2rem;
                        letter-spacing: 0rem;
                        padding-top: 1rem;
                        padding-left: 1rem;
                        @include md {
                            padding-left: 0.5rem;
                        }
                    }
                }
                h5 {
                    font-size: 22px;
                    font-size: 2.2rem;
                    width: 30%;
                    font-weight: 600;
                    @include md {
                        font-size: 18px;
                        font-size: 1.8rem;
                    }
                    @include sm {
                        display: inline-block;
                        font-size: 22px;
                        font-size: 2.2rem;
                        width: 60%;
                    }
                    @include xs {
                        width: 100%;
                    }
                }
                p {
                    width: 55%;
                    margin-bottom: 0;
                    line-height: 2;
                    @include md {
                        width: 65%;
                    }
                    @include sm {
                        display: block;
                        width: 100%;
                        margin-top: 1.5rem;
                        line-height: 1.6;
                    }
                    @include xs {
                        margin-top: 0.5rem;
                    }
                }
            }
            &::after {
                content: "";
                background-color: $sub-color;
                width: 5px;
                height: 3rem;
                display: flex;
                margin-left: 10%;
                @include xs {
                    margin-left: 50%;
                }
            }
        }
        li:last-child{
            &::after {
                content: "";
                display: none;
            }
        }
    }
    .flow-text {
		text-align: center;
        p {
            text-align: center;
            padding-top: 5rem;
            padding-bottom: 4rem;
			font-size: 22px;
			font-size: 2.2rem;
			font-weight: 600;
			line-height: 2;
			span{
				color: $main-color;
			}
            @include sm {
				font-size: 20px;
				font-size: 2rem;
				line-height: 1.75;
                text-align: justify;
            }       
            @include xs {
				font-size: 16px;
				font-size: 1.6rem;
                padding-top: 3rem;
                padding-bottom: 1rem;
            }       
        }
        a {
			display: inline-block;
			margin: auto;
            width: 950px;
			transition: 0.3s;
			border-radius: 2rem;
            &:hover {
                opacity: 0.5;
                
            }
            @include lg {
                width: 90%;
            }
            @include xs {
                width: 80%;
            }
			img{
				display: block;
				@include sm {
					display: none;
				}
				& + img{
					display: none;
					@include sm {
						display: block;
					}
				}
			}
        }
    }
}


/*---------- qanda ----------*/
#qanda {
    position: relative;
    margin-bottom: 14rem;
    padding-bottom: 9rem;
    @include lg {
       padding-bottom: 10rem;
    }
    @include md {
       padding-bottom: 7rem;
        margin-bottom: 10rem;
    }
	&::after{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-color: $bg-color;
		z-index: -1;
		position: absolute;
		top: 22px;
	}
    h3 {
        margin-bottom: 6rem;
    }
}

//    モーダル
.modal-content {
    display: none;
}
.modaal-content-container {
    text-align: center;
}
body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
/*---------アコーディオン部分---------*/
.accordion-container {
  	position: relative;
  	width: 100%;
	cursor: pointer;
	& + p{
		font-weight: 600;
		color: #333333;
		font-size: 22px;
		font-size: 2.2rem;
		text-align: center;
		margin-top: 8rem;
		@include sm {
			line-height: 1.75;
			margin-top: 4rem;
		}
		@include xs {
			font-size: 18px;
			font-size: 1.8rem;
		}
	}
}
.accordion-container .accordion-title {
	display: block;
	position: relative;
	margin: 2rem 0;
	background: #fff;
	cursor: pointer;
	font-size: 16px;
	font-size: 1.6rem;
	color: #000;
	text-align: left;
	dl {
		display: flex;
	}
	dt {
		background-color: $main-color;
		display: flex;
		font-family: "Josefin Sans";
		font-size: 28px;
		font-size: 2.8rem;
		color: #fff;
		margin-right: 1rem;
		padding: 1rem;
		align-items: center;
        padding-top: 1.3rem;
	}
	dd {
		font-weight: 600;
		line-height: 1.3;
		padding-right: 5rem;
		text-align: justify;
		margin: auto 0;
        @include sm {
			padding: 1rem 5rem 1rem 0.5rem;
        }
        @include xs {
            letter-spacing: 0;
			line-height: 1.5;
        }
	}
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
}
.accordion-title,.accordion-content{
  position: relative;
}
.accordion-title::after {
	content: "＋";
    font-size: 22px;
	font-weight: bold;
    position: absolute;
    right: 25px;
    top: 20%;
    display: block;
    color: $main-color;
	@include sm {
		right: 10px;
	}
}
.accordion-title.open::after {
    content: "−";
    font-size: 31px;
    top: 18%;
    right: 27px;
    font-weight: 500;
	@include sm {
		right: 12px;
	}
}
.accordion-content {
	display: none;
    padding-left: 5rem;
	dl {
		display: flex;
	}
	dt {
		font-family: "Josefin Sans";
		font-size: 28px;
		font-size: 2.8rem;
		margin-right: 1rem;
        padding-top: 0.3rem;
	}
	dd {
		line-height: 1.8;
		padding-right: 5rem;
		font-size: 16px;
		font-size: 1.6rem;
		text-align: justify;
		margin: auto 0;
		a{
			color: $main-color;
			text-decoration: underline;
			transition: 0.3s;
			&:hover{
				color:$sub-color 
			}
		}
	}

}
/*---------アコーディオン部分---------*/





#form {
    padding-top: 12rem;
    margin-top: -12rem;
    @include md {
        padding-top: 15rem;
        margin-top: -15rem;
    }
    p {
        text-align: center;
        @include xs {
            text-align: justify;
        }
        span {
            font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background-color: $main-color;
            padding: 4px 8px;
            border-radius: 4px;
            margin-right: 5px;
        }   
    }
}
.bn-form {
    margin-top: 3rem;
}


/* ---------------------- for JavaScript ここから ---------------------- */
form#mail_form dl dt span.optional{
	display: none;
}
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{
	display : block;
	color : #ff0000;
	margin-top : 3px;
}
span.loading{
	width : 50px;
	height : 50px;
	border-radius : 50%;
	border-top : 5px solid rgba( 255, 255, 255, 0.2 );
	border-right : 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom : 5px solid rgba( 255, 255, 255, 0.2 );
	border-left : 5px solid #ffffff;
	-webkit-transform : translateZ( 0 );
	-ms-transform : translateZ( 0 );
	transform : translateZ( 0 );
	-webkit-animation : load-circle 1.0s linear infinite;
	animation : load-circle 1.0s linear infinite;
	position : absolute;
	top : 50%;
	left : 50%;
	margin-top : -25px;
	margin-left : -25px;
}
@-webkit-keyframes load-circle{
	0%{
		-webkit-transform : rotate( 0deg );
		transform : rotate( 0deg );
	}
	100%{
		-webkit-transform : rotate( 360deg );
		transform : rotate( 360deg );
	}
}
@keyframes load-circle{
	0%{
		-webkit-transform : rotate( 0deg );
		transform : rotate( 0deg );
	}
	100%{
		-webkit-transform : rotate( 360deg );
		transform : rotate( 360deg );
	}
}
/* ---------------------- for JavaScript ここから ---------------------- */

form#mail_form dt {
    margin-top: 2rem;
    padding-top: 2rem;
	font-weight: 600;
	color: #3e3c37;
}
form#mail_form dt:first-child{
	border-top: none;
}
form#mail_form dd:nth-child(2), {
    margin-bottom: 0;
	margin-top: 0.5rem;
	@include sm {
		margin-left: 0;
	}
}
form#mail_form dd:last-child{
	padding-bottom: 2rem;
}
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"],
form#mail_form textarea{
	width : 100%;
	padding : 0.5rem 1rem;
	border : 1px solid #bebebe;
	background : #f5f5f5;
	-webkit-appearance : none;
	font-size : 18px;
	margin-top : 5px;
}
form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus{
	border : 1px solid #b2b2b2;
	background-color: #fff;
	outline: none;
}
form#mail_form input[type="radio"],
form#mail_form input[type="checkbox"]{
	margin-right : 5px;
	accent-color:#000;
	@include xs {
		margin-left: 0;
	}
}
form#mail_form input:first-child[type="radio"],
form#mail_form input:first-child[type="checkbox"]{
	margin-right : 5px;
	margin-left: 0;
}
form#mail_form select{
	font-size : 100%;
	margin-top : 5px;
}
form#mail_form textarea{
	display : block;
	width : 100%;
	max-width : 100%;
	height : 200px;
	padding : 1rem;
	resize : vertical;
	border : 1px solid #bebebe;
	border-radius : 3px;
	background : #f5f5f5;
	-webkit-appearance : none;
	font-size : 100%;
	font-family : inherit;
}
form#mail_form ul{
	list-style-type : none;
}
form#mail_form ul li label:hover{
	cursor : pointer;
}
form#mail_form input#postal{
	width: 30%;
}
form#mail_form input#postal + a{
	display : inline-block;
	padding : 5px 15px;
	margin-left: 0.5rem;
	background : #FDEFF5;
	border : 1px solid #C7000B;
	border-radius : 3px;
	color : #C7000B;
	font-family : inherit;
	text-decoration : none;
	transition: 0.3s;
}
form#mail_form input#postal + a:hover{
	cursor : pointer;
	background : #C7000B;
	color: #fff;
}
form#mail_form ul.kind-list li{
	display: inline-block;
	min-width: 40%;
}
form#mail_form p#form_submit{
	width : 90%;
	margin : 0 auto;
	padding: 5rem 0 10rem 0;
}
form#mail_form input[type="button"]{
	font-weight: 600;
	font-size: 20px;
	font-size: 2rem;
	letter-spacing: 0.06em;
	padding : 1.4rem 6rem;
	vertical-align : middle;
	line-height : 1;
	border: 2px solid $sub-color;
	background : $sub-color;
	color: #fff;
	-webkit-appearance : none;
	border-radius: 6px;
	transition: 0.3s;
	@include xs {
		letter-spacing: 0;
		padding : 1.4rem 3.5rem;
	}
}
form#mail_form input[type="button"]:hover{
	cursor : pointer;
	border: 2px solid $sub-color;
	background : #fff;
	color: $sub-color;
}
form#mail_form dt.optional{
	position: relative;
}
form#mail_form dt.optional::before{
	content: "任意";
	display: inline-block;
    color: $main-color;
	border: 1px solid $main-color;
    line-height: 1;
    margin-right: 1rem;
    padding: 0.5rem;
    background-color: #fff;
    font-size: 90%;
    border-radius: 3px;
    font-weight: normal;
}
form#mail_form dt.required::before{
	content: "必須";
	display : inline-block;
	color : #fff;
	border: 1px solid $main-color;
	line-height : 1;
	margin-right: 1rem;
    padding: 0.4rem 0.5rem;
    background-color: $main-color;
    font-size: 90%;
    border-radius: 3px;
	font-weight: normal;
}

@media (max-width: 767px) {
    #mainarea section p:nth-child(1) {
        text-align: justify!important;
    }
    #mainarea section p:nth-child(1) br {
        display: none;
    }
	h3 br{
		display: inline-block;
	}
}
//privacypolicy-mini------------------------------------------------------------ここから
#privacypolicy-mini{
	border: 1px solid #c3c3c3;
    padding: 4rem 3rem;
    margin-top: 2rem;
    background-color: #fff;
	h4 {
		font-size: 22px;
		font-size: 2rem;
		font-weight: 600;
		margin-bottom: 2rem;
	}
	p{
		text-align: justify;
	}
}
/*----------thanks----------*/
#breadcrumb.thanks{
    padding-top: 11rem;
    @include sm {
        padding-top: 0;
    }
}
#thanks {
	h3 {
		font-size: 25px;
		font-size: 2.5rem;
		font-weight: 600;
		display: inline-block;
		color: $main-color;
		padding-bottom: 1rem;
		border-bottom: solid 1.5px $main-color;
	}
	.thanks-box {
		text-align: center;
		h4{
			color: $main-color;
			font-size: 40px;
			font-size: 4rem;
			@include xs {
				font-size: 35px;
				font-size: 3.5rem;
			}
		}
		p{
			padding: 5rem 0 10rem 0;
		}
	}
	.contact-button{
		font-weight: 600;
		padding : 1.5rem 5rem;
		vertical-align : middle;
		line-height : 1;
		border: solid 1.5px #ffffff;
		background : $main-color;
		border-radius : 0.5rem;
		color : #fff;
		-webkit-appearance : none;
	}
	.contact-button:hover{
		cursor : pointer;
		background : #fff;
		color: $main-color;
		border: solid 1.5px $main-color;
	}
}