@charset "utf-8";


/* PCウィンドウ幅が1000px以上の場合に適用するCSS
==================================================================================*/
@media screen and ( min-width:768px ) {

/* ==================================================================================

common

================================================================================== */
body {
font-size: 13px;
}
.inner {
min-width: 1000px;
max-width: 1100px;
margin: 0 auto;
width: calc(100% - 50px);
}
.inner_mini {
min-width: 700px;
max-width: 800px;
margin: 0 auto;
width: calc(100% - 50px);
}
.inner_max {
padding: 0 5%;
}
.sp {display:none !important;}
a:link {color: #45534E;text-decoration: none;}
a:visited {color: #45534E;text-decoration: none;}
a:active {color: #45534E;text-decoration: none;}
img {vertical-align: bottom;}

.bg {background: #ECF0EF;}

.img img {width: 100%;}



/* ==================================================================================



================================================================================== */







/* ==================================================================================

面談日程予約フォーム

================================================================================== */
.reserve_page {
    margin: 0 0 100px 0;
	 text-align: center;
}

.reserve_page .btn_back {
width: 300px;
}

.reserve_page {}
.reserve_page {}
.reserve_page {}
.reserve_page {}
.reserve_page {}
.reserve_page {}












/* ==================================================================================

text_page

================================================================================== */
.text_page {
margin: 70px 0;
}
.text_page p,
.text_page ol,
.text_page ul {
margin: 1em 0 1.5em 0;
}

.text_page .tp_01 {
font-size: 1.6em;
font-weight: bold;
background: #eee;
padding: 5px 15px;
margin: 0 0 20px 0;
}
.text_page .tp_02 {
font-size: 1.4em;
font-weight: bold;
border-bottom: 1px solid #ccc;
padding: 10px 0;
margin: 0 0 20px 0;
}

.text_page ol {
list-style-type: decimal;
padding: 0 0 0 15px;
}
.text_page ul {}
.text_page ol li,
.text_page ul li {
margin: 15px 0;
    line-height: 1.5;
}

.text_page .enactment {
text-align: right;
    margin: 50px 0 0 0;
}



/* ==================================================================================

完了画面

================================================================================== */
.comp_area {
margin: 0 0 100px 0;
text-align: center;
}
.comp_area p {
    margin: 30px 0 50px 0;
    font-size: 1.2em;
}
.comp_area p b {
    font-size: 1.5em;
    display: block;
    line-height: 1.7;
    margin: 0 0 15px 0;
}



/* ==================================================================================

住所を教えて下さい step03

================================================================================== */
#step03,
#step04 {
text-align: center;
}

.confirm {
margin: 40px 0 -20px 0;
}
.confirm a {
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.confirm a:hover {
color: #7AA897;
}


/* ==================================================================================

特徴

================================================================================== */
.reg_02 {
background: #F1F7F5;
padding: 10px 0;
}

/* flow
======================================== */
.reg_02 {}
.reg_02 ul {
display: flex;
margin: 50px 0;
}

.reg_02 .img {
border-radius: 50%;
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}
.reg_02 .img img {}

.reg_02 li {
margin: 0 20px 0;
position: relative;
width: 100%;
}
.reg_02 li:last-child {
margin-right: 0;
}
.reg_02 li .font_e {
position: absolute;
    color: #7AA897;
    font-size: 2.3em;
    top: -15px;
    left: 0px;
}
.reg_02 li .font_m {
    text-align: center;
    font-size: 1.6em;
    margin: 15px 0 5px 0;
}


/* 
======================================== */
.reg_03 {}
.reg_03 ul {
display: flex;
flex-wrap:wrap;
}
.reg_03 li {
width:49%;
margin:0 2% 30px 0;
position: relative;
}
.reg_03 li:nth-child(2n) {
margin-right: 0;
}
.reg_03 li {
display: flex;
}
.reg_03 li .img {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.reg_03 li .img img {
width: 100%;
    height: 100%;
    object-fit: cover;
}

.reg_03 li .font_m {
font-size: 1.3em;
line-height: 1.5;
}

.reg_03 li .text {
position: absolute;
    left: 180px;
    top: 10%;
}

.reg_03 li .font_e {
color: #7AA897;
    font-size: 2em;
}

.register_page .reg_03 .btn_bace {
margin: 0 0 100px 0;
}



/* ==================================================================================

step_block　ステップ動作

================================================================================== */
.step_block {
	 float: left;
    width: 100vw;
    display: none;
}

.step_block--active {
	 float: left;
    width: 100vw;
    display: block;
}

.step_block--hidden {
	 float: left;
    width: 100vw;
    visibility: hidden;
}

.step_area {
max-width: 800px;
    min-width: 700px;
}

#slider_wrapper {
width: 400vw;
overflow: hidden;
position: relative;
}



/* ==================================================================================

登録フォーム

================================================================================== */
.register_page form {
overflow: hidden;
}

.reg_01 {
padding: 0 0 100px 0;
}

input,
select,
input,
textarea {
padding: 15px 20px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 0;
width: 500px;
outline: none;
}


/* ==================================================================================

登録ボタン

================================================================================== */
.register_page .btn_bace {
display: block;
text-align: center;
margin: 50px 0;
}
.btn_next--inactive {
pointer-events: none;
}



/* ==================================================================================

必須　任意

================================================================================== */
.req,
.any {
font-size: 0 !important;
width: 7px;
height: 7px;
display: inline-block;
border-radius: 50%;
}
.req {
background: #CBA597;
}
.any {
background: #BBCCC5;
}
.title_reg_title span .req {
position: absolute;
top: 19px;
right: -10px;
}
.title_reg_title span .req:before {
content: none;
}

.title_02 .req,
.title_02 .any {
vertical-align: 8px;
    margin: 0 0 0 6px;
}

.step + p {
text-align: center;
margin: 20px 0 0 0;
}
.step + p .req {
vertical-align: 8px;
    margin: 0 5px 0 0;
}


/* ==================================================================================

ボタン

================================================================================== */
.btn_bace {}
.btn_bace [class*="btn_"] {
border-radius: 100px;
padding: 12px 0 12px 10px;
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
letter-spacing: 1px;
background: #fff;
font-size: 1.5em;
cursor: pointer;
width: 500px;
border: none;
}
.btn_bace [class*="btn_"] span {
position: relative;
z-index: 1;
}
.btn_bace [class*="btn_"]:before,
.btn_bace [class*="btn_"]:after {
position: absolute;
content: "";
transition: all 500ms linear;
}
.btn_bace [class*="btn_"]:before {
width: 35px;
height: 35px;
background: #fff;
border-radius: 50%;
left: 10px;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(179,145,103,0.5);
}
.btn_bace [class*="btn_"]:after {
width: 9px;
height: 9px;
border: solid #7AA897;
border-width: 1px 1px 0 0;
transform: rotate(45deg) translateY(-50%);
left: 18px;
top: 48%;
}

/* btn_red
======================================== */
.btn_bace [class*="btn_next"] {
background: #B7C7C2;
color: #fff;
}
.btn_bace [class*="btn_next"]:before {
background: #fff;
box-shadow: 0 0 10px rgba(179,145,133,0.5) !important;
}
.btn_bace [class*="btn_next"]:after {
border: solid #B7C7C2;
border-width: 1px 1px 0 0;
}

.btn_bace .btn_next {
background: #CBA597;
color: #fff;
}
.btn_bace .btn_next:hover {
background: #D6B9AD;
}
.btn_bace .btn_next:before {
background: #fff;
}
.btn_bace .btn_next:hover:before {
background: #F6EFED;
}
.btn_bace .btn_next:after {
border: solid #CBA597;
border-width: 1px 1px 0 0;
}

/* btn_green
======================================== */
.btn_bace .btn_green {
background: #7AA897;
color: #fff;
}
.btn_bace .btn_green:hover {
background: #8DB4A6;
}
.btn_bace .btn_green:hover:before {
background: #DFE9E5;
}

/* btn_back
======================================== */
.register_page .btn_back {
    border: 1px solid #D2DCD9;
    margin: 50px 0 0 0;
    font-size: 1em;
    width: 200px;
}
.register_page .btn_back:hover {
background: #F2F5F5;
}
.register_page .btn_back:before {}
.register_page .btn_back:after {
    transform: rotate(-135deg);
    left: 25px;
    top: 42%;
}



/* ==================================================================================

checkbox

================================================================================== */
.check_area {
display: flex;
flex-wrap:wrap;
}
.check_area label {
width:49%;
margin:0 2% 20px 0;
}
.check_area label:nth-child(2n) {
margin-right: 0;
}

.checkbox input {
display:none;
}

.checkbox {
transition: all 0.5s linear;
display: inline-block;
width: 100%;
margin: 0 0 15px 0;
cursor: pointer;
}

.check_area label span {
background: #E4EAE8;
font-size: 1.1em;
padding: 18px 0 18px 50px;
position: relative;
display: block;
border-radius: 3px;
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.check_area label:hover span {
background: #C1D5CE;
}
.check_area label span::before {
content: "";
display: block;
position: absolute;
top: 17px;
left: 15px;
width: 25px;
height: 25px;
border-radius: 3px;
background: #FFFFFF;
}
.check_area label span::after {
content: "";
display: block;
position: absolute;
top: 20px;
left: 23px;
width: 10px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #7AA897;
border-right: 3px solid #7AA897;
opacity: 0;
}
.check_area input[type="checkbox"]:checked + span::after,
.check_area input[type="radio"]:checked + span::after {
opacity: 1;
}
.check_area input[type="checkbox"]:checked + span,
.check_area input[type="radio"]:checked + span {
background:#7AA897;
color: #fff;
}



/* ==================================================================================

title

================================================================================== */

/* メインタイトル
======================================== */
.register_main_title {
text-align: center;
font-size: 1.8em;
margin: 60px 0 -40px 0;
}
.register_main_title span {
color: #CBA597;
font-size: 0.8em;
}

/* title_01
======================================== */
.title_reg_title {
text-align: center;
margin: 50px 0 10px 0;
}
.title_reg_title span {
position: relative;
    font-size: 1.8em;
    margin: 0 0 50px 0;
    display: inline-block;
}
.title_reg_title span:before {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 50%;
height: 1px;
transform: translateX(-50%);
background:#ABBBB5;
}

/* title_01
======================================== */
.title_01 {
text-align: center;
margin: 50px 0 10px 0;
}
.title_01 .font_e {
color: #ACC9BF;
    position: relative;
    padding: 10px 0;
    margin: 0 0 10px 0;
    display: inline-block;
    letter-spacing: 3px;
}
.title_01 .font_e:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 120%;
    background: #D1DBD7;
}
.title_01 .font_m {
    font-size: 2em;
}

/* title_02
======================================== */
.title_02 {
font-size: 1.2em;
margin: 40px auto 10px;
text-align: left;
width: 500px;
}






/* ==================================================================================

step

================================================================================== */
.step {
text-align: center;
padding: 100px 0 20px 0;
}
.step ul {
display: flex;
justify-content: center;
position: relative;
}
.step ul:before {
position: absolute;
content: "";
width: 55%;
height: 1px;
background: #E4EAE8;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
.step li {
background: #E4EAE8;
width: 50px;
height: 50px;
line-height: 53px;
border-radius: 50%;
font-size: 1.3em;
letter-spacing: 2px;
margin: 0 90px 0 0;
z-index: 2;
}
.step li:last-child {
margin-right: 0;
}
.step li.active {
background: #7AA897;
color: #fff;
}



/* ==================================================================================

register_mv

================================================================================== */
.register_mv {
position: relative;
}
.register_mv .img {}
.register_mv .img img {
width: 100%;
height: 300px;
object-fit: cover;
}
.register_mv .text {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
text-align: center;
}
.register_mv .text img {
width: 80%;
margin: 0 0 20px 0;
}
.register_mv .text .title {
font-size: 2.8em;
font-weight: 100;
}
.register_mv .text .title span {
font-size: 0.5em;
font-weight: 100;
}



/* ==================================================================================

footer

================================================================================== */
.footer {
background: #ABBBB5;
padding: 30px 0 5px 0;
text-align: center;
font-size: 0.7em;
color: #fff;
}
.footer img {
width: 120px;
}
.footer .com {
margin: 10px 0;
}



/* ==================================================================================

pagetop

================================================================================== */
.pagetop {
position: fixed;
right: 20px;
bottom: 20px;
}
.pagetop a {
width: 60px;
height: 60px;
display: inline-block;
background: rgba(152,166,160,0.60);
position: relative;
vertical-align: bottom;
opacity: 0.8;
transition: all 1000ms cubic-bezier(0.215,0.610,0.355,1.000);
mix-blend-mode: multiply;
}
.pagetop a:before {
content: "";
height: 15px;
width: 15px;
border: solid #fff;
border-width: 1px 1px 0 0;
transform: rotate(-45deg);
position: absolute;
left: 24px;
top: 28px;
}
.pagetop a:hover {
opacity: 1;
}


}
/* 【PC】ウィンドウ幅が480px以上の場合に適用するCSS */