@charset "utf-8";


/* 【SP】ウィンドウ幅が480px以下の場合に適用するCSS */
@media screen and (max-width: 768px) {


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

common

================================================================================== */
.pc {display:none !important;}
img{
	width:100%;
	vertical-align: bottom;
}
a:link {color: #46321e;text-decoration: none;}
a:visited {color: #46321e;text-decoration: none;}
a:active {color: #46321e;text-decoration: none;}
/*a:current {color: #333;text-decoration: none;}*/

.inner,
.inner_mini {
	margin:0 3%;
}







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

text_page

================================================================================== */
.text_page {
margin: 30px 0;
}
.text_page p,
.text_page ol,
.text_page ul {
margin: 1em 0 1.5em 0;
font-size: 0.9em;
}

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

.text_page ol {
list-style-type: decimal;
padding: 0 0 0 25px;
}
.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: 20px 0 0 0;
}



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

完了画面

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



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

住所を教えて下さい step03

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

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


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

特徴

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

/* flow
======================================== */
.reg_02 {}
.reg_02 ul {
margin: 20px 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 0 40px 0;
position: relative;
}
.reg_02 li:last-child {
margin-right: 0;
}
.reg_02 li .font_e {
position: absolute;
    color: #7AA897;
    font-size: 2.3em;
    top: -15px;
    left: 60px;
}
.reg_02 li .font_m {
    text-align: center;
    font-size: 1.6em;
    margin: 15px 0 5px 0;
}


/* 
======================================== */
.reg_03 {}
.reg_03 ul {
}
.reg_03 li {
position: relative;
margin: 30px 0 50px 0;
text-align: center;
}
.reg_03 li {
}
.reg_03 li .img {
}
.reg_03 li .img img {
width: 200px;
height: 200px;
border-radius: 50%;
}

.reg_03 li .font_m {
font-size: 1.1em;
    line-height: 1.5;
    margin: 10px 0 0 0;
}

.reg_03 li .text {
}

.reg_03 li .font_e {
color: #7AA897;
    font-size: 2em;
    position: absolute;
    top: -10px;
    left: 60px;
}

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



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

step_block　ステップ動作

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

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

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

.step_area {
padding: 30px 0;
}

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



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

登録フォーム

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

.reg_01 {
width: 100%;
    overflow: hidden;
padding: 0 0 100px 0;
}

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


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

登録ボタン

================================================================================== */
.register_page .btn_bace {
display: block;
text-align: center;
margin: 20px 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: 15px;
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;
font-size: 0.8em;
}
.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;
cursor: pointer;
border: none;
width: 100%;
}

.btn_bace button[class*="btn_"] {
font-size: 1.3em;
}

.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: 20px 0 0 0;
font-size: 0.9em;
width: 70%;
}
.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 {}
.check_area label {}

.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;
padding: 15px 0 15px 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.2em;
margin: 0 0 20px 0;
}
.register_main_title span {
color: #CBA597;
font-size: 0.8em;
}

/* title_01
======================================== */
.title_reg_title {
text-align: center;
margin: 20px 0 10px 0;
}
.title_reg_title span {
position: relative;
    font-size: 1.2em;
    margin: 0 0 30px 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: 20px 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: 1.3em;
}

/* title_02
======================================== */
.title_02 {
margin: 10px auto 0;
text-align: left;
}






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

step

================================================================================== */
.step {
text-align: center;
}
.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: 40px;
    height: 40px;
    line-height: 41px;
    border-radius: 50%;
    font-size: 1.1em;
    letter-spacing: 2px;
    margin: 0 30px 0 0;
    z-index: 2;
    display: inline-block;
}
.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: 120px;
object-fit: cover;
}

.register_mv .text {
position: absolute;
    top: 50%;
    color: #fff;
    transform: translate(0,-50%);
    text-align: center;
    width: 100%;
}
.register_mv .text img {
    width: 40%;
    margin: 0 0 10px 0;
}
.register_mv .text .title {
font-size: 1.2em;
font-weight: 100;
}
.register_mv .text .title span {
font-size: 0.7em;
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;
}


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