@charset "utf-8";

/*共通*/
img {
    width: 100%;
    height: auto;
}
body {
    line-height: 1.5;
    color: #333;
}
h2 {
    font-size: 6.2vw;
    font-weight: bold;
    text-align: center;
    line-height: 130%;
    letter-spacing: 0.05em;
}
p.note {
    font-size: 12px;
    color: #333;
    padding-top: 3%;
}
a.link{
    display: inline;
    text-decoration: underline;
    color: #0073A8;
}

/*--------------------------------------
   .missionセクション
--------------------------------------*/
.mission {
    padding: 12% 0;
    background-color: #F5F5F5;
}
/* かんたん3ステップ */
.white_block {
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 93.5%;
    margin: 0 auto;
    box-sizing: border-box;
}
.three_step {
    position: relative;
    padding: 10% 0 3%;
    margin-bottom: 12%;
}
.three_step h2 {
    background-color: #FFFFFF;
    border: 2px solid #CC0033;
    border-radius: 50px;
    padding: 2% 3% 1.5%;
    text-align: center;
    color: #CC0033;
    font-size: 4.36vw;
    font-weight: bold;
    width: 65%;
    box-sizing: border-box;
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.three_step_img_wrap {
    display: grid;
    place-content: center;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 7%;
    padding: 0 3%;
}
.three_step_img_wrap img {
    align-self: start;
}
.step {
    position: relative;
    width: 93.5%;
    margin: 12% auto 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 3% 3%;
    background-color: #FFFFFF;
}
.step .stepNum {
    position: absolute;
    top: -8vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 14vw;
}
.step .step_inner {
    background-color: #F9F9F9;
}
.step .step_inner img {
    display: block;
    background-color: #F9F9F9;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 4%;
}
.step .step_inner .note {
    text-align: center;
    margin-top: -3%;
    padding-top: 0;
    padding-bottom: 4%;
}
.step .text {
    padding-top: 5%;
    font-size: 15px;
    text-align: left;
}
@media (min-width: 641px) {
    .mission .white_block {
        margin-bottom: 65px;
        padding: 50px 25px 25px;
    }
    .mission h2 {
        font-size: 40px;
    }
    .three_step h2 {
        font-size: 20px;
    }
    .step .stepNum {
        top: -49px;
        width: 85px;
    }
}

/*--------------------------------------
   .info_areaセクション
--------------------------------------*/
.info_area {
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
    background: #FFFFFF;
    padding-bottom: 8%;
}
.info_area .info_text {
    font-size: 4.68vw;
    font-weight: bold;
    line-height: 150%;
    text-align: center;
    color: #5B3E1B;
    padding: 4% 0 3%;
}
.info_area .next {
    background-color: #CC0033;
    border: 2px solid #CC0033;
    margin-top: 0;
    margin-bottom: 0;
}
.info_area .next p {
    color: #FFFFFF;
}
.info_area .next p::after {
    border-top: solid 2px #FFFFFF;
    border-right: solid 2px #FFFFFF;
}
section + .next {
    margin-top: 10%;
}
@media (min-width: 641px) {
    .info_area .info_text {
        font-size: 24px;
    }
}

/*--------------------------------------
   フローティングボタン
--------------------------------------*/
.float_btn {
	position: fixed;
	bottom: 2%;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 10;
    background-color: #CC0033;
    border: 2px solid #ffffff;
    border-radius: 3px;
	opacity: 0;
    visibility: hidden;
	transition-duration: .3s;
    -webkit-box-shadow: 0 2px 4px 0 rgba(51, 51, 51, .30);
    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, .30);
	width: 93%;
}
.float_btn a {
    padding: 16px 25px;
}
.float_btn.isActive {
	transition-duration: .3s;
	opacity: 1;
	visibility: visible;
}
.float_btn p {
    color: #ffffff;
    position: relative;
    padding: 0;
    font-size: 3.9vw;
}
.float_btn p::after {
	border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
}
/* PC */
@media (min-width: 641px) {
    .float_btn p {
        font-size: 16px;
    }
}