/* fv */
.fv{
    background: url(../img/step1/bg_fv.png) #FFF no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 1.5% 0 28.6%;
}

.fv .txt_fv{
    width: 76vw;
    margin: 34% auto 0;
    font-size: 1.9vw;
    text-align: center;
    line-height: 1.8;
}

@media screen and (max-width: 768px){
    .fv{
        background: url(../img/step1/bg_fv_sp.png) #FFF no-repeat;
        background-size: cover;
        background-position: center top;
        padding: 5% 0 86.8%;
    }
    .fv .txt_fv{
        width: 86vw;
        margin: 88% auto 0;
        font-size: 4.4vw;
        line-height: 1.7;
    }
}

/* menu */
.menu{
    background: url(../img/step1/bg_menu.png) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}

.menu_list{
    background: #D2EEF6;
}

.menu_list ul li.first::before{
    position: absolute;
    top:5%;
    left:0%;
    display: block;
    content: "";
    width: 3vw;
    height:3vw;
    background: url(../img/step1/icon_menu_02.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}
.menu_list ul li.second::before{
    position: absolute;
    top:5%;
    left:40%;
    display: block;
    content: "";
    width: 3vw;
    height:3vw;
    background: url(../img/step1/icon_menu_01.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}
.menu_list ul li.third::before{
    position: absolute;
    top:5%;
    left:72%;
    display: block;
    content: "";
    width: 3vw;
    height:3vw;
    background: url(../img/step1/icon_menu_03.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}

@media screen and (max-width: 768px){
    .menu{
        background: url(../img/step1/bg_menu_sp.png) no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 0 0 28%;
    }
    .menu_list ul li.first::before{
        position: absolute;
        top: 5%;
        left: 12%;
        display: block;
        content: "";
        width: 9vw;
        height: 9vw;
        background: url(../img/step1/icon_menu_01.svg) no-repeat;
        background-size: 100% auto;
        background-position: left center;
    }
    .menu_list ul li.second::before{
        position: absolute;
        top: 38%;
        left: 12%;
        display: block;
        content: "";
        width: 9vw;
        height: 9vw;
        background: url(../img/step1/icon_menu_02.svg) no-repeat;
        background-size: 100% auto;
        background-position: left center;
    }
    .menu_list ul li.third::before{
        position: absolute;
        top: 71%;
        left: 12%;
        display: block;
        content: "";
        width: 9vw;
        height: 9vw;
        background: url(../img/step1/icon_menu_03.svg) no-repeat;
        background-size: 100% auto;
        background-position: left center;
    }
}

/* reserve */
.reserve{
    background: url(../img/step1/bg_reserve.png) #D2EEF6 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding: 4% 0 16%;
    margin: -0.3% 0 0;
}

.reserve h2{
    width: 34vw;
    margin: 0 auto 2%;
}

.reserve .reserve_inner{
    width: 60vw;
    margin: 0 auto 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.reserve .left_area{
    width: 36%;
}
.reserve .right_area{
    width: 60%;
}

.reserve .right_area .txt_reserve{
    font-size: 1.4vw;
    line-height: 1.5;
    margin: 0 0 4%;
}

@media screen and (max-width: 768px){
    .reserve{
        background: url(../img/step1/bg_reserve_sp.png) #D2EEF6 no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 10% 0 15%;
        margin: -0.7% auto 0;
    }
    .reserve h2{
        width: 80vw;
        margin: 0 auto 4%;
    }
    .reserve .reserve_inner{
        width: 100%;
        margin: 0 auto 2%;
        display: block;
    }
    .reserve .left_area{
        width: 50%;
        margin: 0 auto 6%;
    }
    .reserve .right_area{
        width: 100%;
    }
    .reserve .right_area .txt_reserve{
        width: 80%;
        margin: 0 auto 4%;
        font-size: 4.3vw;
        line-height: 1.5;
    }
}

/* concierge */
.concierge{
    background: url(../img/step1/bg_concierge.png) repeat-y;
    background-size: 100% auto;
    padding:0 0 16%;
    margin: -0.3% 0 0;
}
.concierge h2{
    width: 34vw;
    margin: 0 auto 2%;
    padding: 3% 0 0;
}
.concierge .txt_concierge{
    width: 64vw;
    margin: 0 auto 2%;
    font-size:1.6vw;
    line-height: 1.5;
    text-align: center;
}
.concierge .img_concierge{
    width: 60vw;
    margin: 0 auto 2%;
}
.bg_cost{
    width: 100%;
    margin: -12% 0 0;
}
@media screen and (max-width: 768px){
    .concierge{
        background: url(../img/step1/bg_concierge_sp.png) repeat-y;
        background-size: 100% auto;
        padding: 0 0 24%;
    }
    .concierge h2{
        width: 78vw;
        margin: 0 auto 4%;
        padding:6% 0 0;
    }
    .concierge .txt_concierge{
        width: 78vw;
        margin: 0 auto 4%;
        font-size: 4.3vw;
        line-height: 1.5;
        text-align: left;
    }
    .concierge .img_concierge{
        width: 90vw;
        margin: 0 auto 6%;
    }
    .bg_cost{
        width: 100%;
        margin: -29% 0 0;
    }
}

/* voice */
.voice{
    background: url(../img/step1/bg_voice.png) #D2EEF6 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding: 3% 0 16%;
    margin:-0.3% 0 0;
}

.voice h2{
    width: 16vw;
    margin: 0 auto 6%;
}

.voice .voice_list{
    width: 62vw;
    margin: 0 auto;
}

.voice .voice_list li{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap:8%;
}

.voice .voice_list li .img_voice{
    width: 20%;
    margin: 0 auto 4%;
}

.voice .voice_list li .txt_voice{
    width: 72%;
    font-size: 1.2vw;
    line-height: 1.6;
}
.voice .comment_voice{
    width: 62vw;
    margin: 0 auto 2%;
    font-size: 1.2vw;
    text-align: right;
}
.voice .comment_voice_bottom{
    width: 62vw;
    margin: 1% auto 2%;
    font-size: 1.2vw;
    text-align:center;
}
.voice .btn_voice{
    width: 62vw;
    margin: 0 auto;
}

.bg_voice{
    width: 100%;
    margin: 0 0 0;
}

@media screen and (max-width: 768px){
    .voice{
        background: url(../img/step1/bg_voice_sp.png) #D2EEF6 no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 3% 0 26%;
    }
    
    .voice h2{
        width: 36vw;
        margin: 0 auto 6%;
    }
    .voice .voice_list{
        width: 90vw;
        margin: 0 auto 6%;
        padding: 4% 0;
        display: block;
        border-radius: 10px;
        background: #FBF4EB;
        border:1px solid #2f2f2f;
    }
    .voice .voice_list_bottom{
        margin: 14% auto 6%;
    }   
    .voice .voice_list li {
        width: 100%;
        display: block;
        padding: 6% 4% 0;
    }
    .voice .voice_list li:last-child{
        border: none;
    }
    .voice .voice_list li .img_voice{
        width: 36%;
        margin: -21% 0 3% 0%;
        padding: 0 0 0;
    }
    .voice .voice_list_bottom li .img_voice{
        width: 42%;
    }
    .voice .voice_list li .txt_voice{
        width: 100%;
        font-size: 3.9vw;
        line-height: 1.8;
    }
    .voice .comment_voice{
        width: 90vw;
        margin: 0 auto 6%;
        font-size: 3.9vw;
        text-align: left;
    }
    .voice .comment_voice_bottom{
        width: 90vw;
        margin: 4% auto 6%;
        font-size: 3.9vw;
        text-align:center;
    }
    .voice .btn_voice{
        width: 90vw;
        margin: 0 auto;
    }

    .bg_voice{
        width: 100%;
        margin: -28% 0 0;
    }
}

/* procedure */
.procedure{
    background: url(../img/step1/bg_procedure.png) repeat-y;
    background-size: 100% auto;
    padding:3% 0 12%;
    margin:-0.3% 0 0;
}
.procedure h2{
    width: 26vw;
    margin: 0 auto 2%;
}
.procedure .img_procedure{
    width: 60vw;
    margin: 0 auto 6%;
}
.procedure .img_procedure img{
    margin: 0 auto 2%;
}

@media screen and (max-width: 768px){
    .procedure{
        background: url(../img/step1/bg_procedure_sp.png) repeat-y;
        background-size: 100% auto;
        padding:10% 0 16%;
    }
    .procedure h2{
        width: 60vw;
        margin: 0 auto 6%;
    }
    .procedure .img_procedure{
        width: 84vw;
        margin: 0 auto 6%;
    }
    .procedure .img_procedure img{
        margin: 0 auto 2%;
    }
}

/* access */
.bg_access{
    width: 100%;
    margin: -11% 0 0;
}
.access{
    padding:7% 0 14%;
    background:url(../img/common/bg_link.png) #D2EEF6 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}
.access h2{
    width: 28vw;
    margin: 0 auto 3%;
}

.access .txt_access{
    width: 60vw;
    margin: 0 auto 5%;
    font-size:1.6vw;
    line-height: 1.5;
    text-align: center;
}

.access .img_access{
    width: 60vw;
    margin: 0 auto 2%;
}

/*タブ*/
.access .tab_box .btn_area {
	margin:0;
	display: -webkit-box;
	display: flex;
    justify-content: center;
}

.access .tab_box .tab_btn {
	width: 16vw;
	padding: 1.4% 0;
	color: #FFF;
    font-size: 1.5vw;
    font-weight: bold;
	background: #50B9E1;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease 0s;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top:2px solid #333;
    border-left:2px solid #333;
    border-right:2px solid #333;
}

.access .tab_box .tab_btn + .tab_btn {
	margin-left: 8px;
}

.access .tab_box .tab_btn:hover {
	background-color: #dce1e4;
}

.access .tab_box .tab_btn.active {
    background:#FBF4EB;
    color:#333;
}

.access .tab_box .panel_area {
    margin: -2px 0 0;
    border-top: 2px solid #2f2f2f;
    padding: 4% 0 0;
}

.access .tab_box .tab_panel {
    display:none;
    width: 58vw;
    margin: 0 auto 2%;
}

.access .tab_panel_inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.access .tab_panel_inner .left_area{
    width: 52%;
}
.access .tab_panel_inner .right_area{
    width: 44%;
}

.access .tab_box .tab_panel.active {
    display:block;
}

.access .tab_panel_inner .left_area p{
    font-size:1.6vw;
    line-height: 1.7;
}

.access .tab_panel_inner .left_area p span{
    font-weight: bold;
}
.access .tab_panel_inner .right_area .shop_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10% 0 0;
}
.access .tab_panel_inner .right_area .shop_list li{
    width: 46%;
    margin: 0 0 5%;
}

@media screen and (max-width: 768px){
    .bg_access{
        width: 100%;
        margin: -28% 0 0;
    }
    .access{
        padding:7% 0 22%;
        background:url(../img/common/bg_link_sp.png) #D2EEF6 no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
    }
    .access h2{
        width: 78vw;
        margin: 0 auto 6%;
    }
    .access .txt_access{
        width: 79vw;
        margin: 0 auto 4%;
        font-size: 4.3vw;
        line-height: 1.5;
        text-align: left;
        word-break: break-all;
    }
    
    .access .img_access{
        width: 78vw;
        margin: 0 auto 6%;
    }

    .access .tab_box .tab_btn {
        width: 48vw;
        padding: 4% 0;
        font-size: 3.8vw;
        border-top:1px solid #333;
        border-left:1px solid #333;
        border-right:1px solid #333;
    }
    .access .tab_box .panel_area{
        margin: -1px 0 0;
        padding: 10% 0 0;
        border-top: 1px solid #2f2f2f;
    }
    .access .tab_box .tab_panel{
        width: 74vw;
    }
    .access .tab_panel_inner{
        display: block;
    }
   
    .access .tab_panel_inner .left_area{
        width: 100%;
    }
    .access .tab_panel_inner .right_area{
        width: 100%;
    }
    .access .tab_panel_inner .left_area p{
        font-size:3.9vw;
        line-height: 1.7;
    }
    
}