@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/

/*タイトル部分　共通部分はbase*/
#wrap .lp_title_box{background: url("/images/pa_title.png")repeat , url("/buy/images/buy_tbg.jpg")no-repeat center center;background-size:auto,cover;}

#main{padding:50px 0 0;font-family: 'Noto Sans JP', sans-serif;}
@media only screen and (max-width: 767px) {
#main{padding:10px 0 0;}
}

/*-------------------------
__不動産購入の流れ
-------------------------*/
#main .ctitle_box_out{padding:0 20px;box-sizing:border-box;}
#main .ctitle_box{max-width:1000px;margin:auto;box-sizing:border-box;padding:20px 20px 40px;border-radius:20px;}
#main .ctitle_box .ctitle_box_in1{background:url("/images/lp_ct_pattern_l@2x.png")no-repeat top left,url("/images/lp_ct_pattern_r@2x.png")no-repeat top right,#fff;background-size:142px 95px;box-sizing:border-box;padding:30px 0 15px;}
#main .ctitle_box .ctitle_box_in1 .ctitle{font-size:3.0em;font-weight:700;color:#1A1A1A;}
#main .ctitle_box .ctitle_box_in1 .ctitle::before{content:"";display:inline-block;background:url("/images/flag@2x.png")no-repeat;width:56px;height:46px;background-size:cover;vertical-align:middle;margin-right:20px;}
#main .ctitle_box .ctitle_box_in1 .ctitle::after{content:"";display:inline-block;background:url("/images/8step@2x.png")no-repeat;width:187px;height:72px;background-size:cover;vertical-align:middle;margin-left:10px;}
@media screen and (max-width: 980px) {
}
@media only screen and (max-width: 767px) {
#main .ctitle_box{padding:10px 10px 20px;border-radius:10px;}
#main .ctitle_box .ctitle_box_in1{background-size:100px 67px;padding:10px 20px 15px;}
#main .ctitle_box .ctitle_box_in1 .ctitle{font-size:2.0em;}
#main .ctitle_box .ctitle_box_in1 .ctitle::before{display:block;margin:0 auto 10px;}
#main .ctitle_box .ctitle_box_in1 .ctitle::after{margin:5px 0 0 10px;width:149px;height:57px;}
}
/*-------------------------
__不動産購入の流れ_下部イラスト
-------------------------*/
#main .ctitle_box .ctitle_box_in2{background-color:#FFF;box-sizing:border-box;padding:0 0 10px;position:relative;}
#main .ctitle_box .ctitle_box_in2::after{content:"";display:block;background:url("/images/wave.png")repeat-x;width:100%;height:20px;position: absolute;bottom:-20px;}
#main .ctitle_box .ctitle_box_in2 ul{display:flex;justify-content:space-between;padding:0 36px;}
#main .ctitle_box .ctitle_box_in2 ul li{display:block;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(1),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(4),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(8){width:14%;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(2),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(7){width:12%;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(3),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(5){width:11%;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(6){width:10%;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(1),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(3),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(7){margin-top:52px;margin-top:6%;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(2),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(6){margin-top:15px;margin-top:2%;}
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(3),
#main .ctitle_box .ctitle_box_in2 ul li:nth-of-type(5){margin-top:74px;margin-top:9%;}
#main .ctitle_box .ctitle_box_in2 ul li img{width:100%;}

@media only screen and (max-width: 767px) {
#main .ctitle_box .ctitle_box_in2::after{background-size:198px 10px;height:10px;bottom:-10px;}
#main .ctitle_box .ctitle_box_in2 ul{padding:0 10px;}	
}
/*-------------------------
__ステップ1-7
-------------------------*/

#main .step_nav{max-width:900px;margin:auto;padding:84px 20px 105px;box-sizing: border-box;}
#main .step_nav ul{display:flex;justify-content:space-between;}
#main .step_nav ul li a{text-decoration:none;display:block;position:relative;-webkit-transition:.2s cubic-bezier(0.25, 0, 0, 1);-moz-transition:.2s cubic-bezier(0.25, 0, 0, 1);transition:.2s cubic-bezier(0.25, 0, 0, 1);}
#main .step_nav ul li a .step{display:block;width:71px;height:71px;border-radius:50%;color:#FFF;font-size:1.4em;font-weight:700;line-height:1;box-sizing:border-box;padding-top:12px;position:absolute;top:-44px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
#main .step_nav ul li a .step .fs_u{display:block;font-size:2.1em;}
#main .step_nav ul li a .nav_text{-ms-writing-mode:tb-rl;writing-mode:vertical-rl;text-align:left;font-size:2.6em;display:block;height:425px;font-weight:700;width:66px;line-height:1;border-radius:10px;}
#main .step_nav ul li a .nav_text span{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:50px;}
#main .step_nav ul li:nth-of-type(1) a .nav_text{background-color:#E6F4EE;}
#main .step_nav ul li:nth-of-type(2) a .nav_text{background-color:#FBF9DD;}
#main .step_nav ul li:nth-of-type(3) a .nav_text{background-color:#F0E8F6;}
#main .step_nav ul li:nth-of-type(4) a .nav_text{background-color:#F0F6E9;}
#main .step_nav ul li:nth-of-type(5) a .nav_text{background-color:#E8F3F7;}
#main .step_nav ul li:nth-of-type(6) a .nav_text{background-color:#F9EEDF;}
#main .step_nav ul li:nth-of-type(7) a .nav_text{background-color:#E8ECF8;}
#main .step_nav ul li:nth-of-type(8) a .nav_text{background-color:#EFD4DD;}
#main .step_nav ul li a .nav_text::before{content:"";display:block;width:54px;height:54px;background: url("/images/arrow@2x.png")no-repeat;background-size:cover;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:-40px;}


@media screen and (min-width: 768px){
#main .step_nav ul li a:hover{-webkit-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01);box-shadow:0 0 30px rgba(0,0,0,0.2);border-radius:10px;}
}
@media only screen and (max-width: 767px) {
#main .step_nav{padding:30px 20px 30px;}
#main .step_nav ul{display:block;}
#main .step_nav ul li{box-sizing:border-box;padding-left:10px;}
#main .step_nav ul li:nth-of-type(n + 2){padding-top: 20px}
#main .step_nav ul li a .step{width:55px;height:55px;padding-top:9px;-webkit-transform:translateX(0%) translateY(-50%);-ms-transform:translateX(0%) translateY(-50%);transform:translateX(0%) translateY(-50%);left:-10px;top:50%;}
#main .step_nav ul li a .step .fs_u{font-size:1.6em;}
#main .step_nav ul li a .nav_text{-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;font-size:1.5em;height:auto;width:100%;line-height:1.5;box-sizing:border-box;padding:10px 50px 10px 55px;}
#main .step_nav ul li a .nav_text span{position:static;display:block;-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%);}
#main .step_nav ul li:nth-of-type(3) a .nav_text{font-size:1.5em;line-height:1.5;}
#main .step_nav ul li a .nav_text::before{width:35px;height:35px;left:auto;right:5px;top:50%;-webkit-transform:translateX(0%) translateY(-50%);-ms-transform:translateX(0%) translateY(-50%);transform:translateX(0%) translateY(-50%);;bottom:auto;}
}

/*-------------------------
__ステップ1-7　メインコンテンツ
-------------------------*/

#main .flow_box{padding:60px 20px;}
#main .flow_box .inner{max-width:1000px;margin:auto;text-align:left;}

#main .flow_box .inner .box:nth-of-type(n + 2){margin-top:30px;}
#main .flow_box .inner .flow_inner{position:relative;}
#main .flow_box .inner .flow_inner::before{content:"";display:block;width:154px;height:147px;background:url("images/buy_01@2x.png")no-repeat;background-size:cover;position:absolute;right:28px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:1;}

#main .flow_box .inner .box:nth-of-type(2) .flow_inner::before{background:url("images/buy_02@2x.png")no-repeat;background-size:cover;}
#main .flow_box .inner .box:nth-of-type(3) .flow_inner::before{background:url("images/buy_03@2x.png")no-repeat;background-size:cover;}
#main .flow_box .inner .box:nth-of-type(4) .flow_inner::before{background:url("images/buy_04@2x.png")no-repeat;background-size:cover;}
#main .flow_box .inner .box:nth-of-type(5) .flow_inner::before{background:url("images/buy_05@2x.png")no-repeat;background-size:cover;}
#main .flow_box .inner .box:nth-of-type(6) .flow_inner::before{background:url("images/buy_06@2x.png")no-repeat;background-size:cover;}
#main .flow_box .inner .box:nth-of-type(7) .flow_inner::before{background:url("images/buy_07@2x.png")no-repeat;background-size:cover;}
#main .flow_box .inner .box:nth-of-type(8) .flow_inner::before{background:url("images/buy_08@2x.png")no-repeat;background-size:cover;}

#main .flow_box .inner .box::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:30px 55px 0 55px;border-color:#184626 transparent transparent transparent;margin:auto;margin-top:30px;}
#main .flow_box .inner .box:last-child::after{display:none;}


#main .flow_box .inner .step_title_box{box-sizing:border-box;padding:25px 0 25px 180px;border-radius:20px 20px 0 0;position:relative;overflow:hidden;}
#main .flow_box .inner .step_title_box .step_box{width:120px;height:120px;background-color:#FFF;border-radius:50%;position:absolute;top:-60px;left:30px;box-shadow:0 0 10px rgba(0,0,0,0.3);box-sizing:border-box;padding: 70px 0 0 0;text-align:center;}
#main .flow_box .inner .step_title_box .step_box .step{font-size:1.5em;font-weight:700;letter-spacing:0.01em;}
#main .flow_box .inner .step_title_box .step_box .step .fs_u{font-size:2.0em;}
#main .flow_box .inner .step_title_box .step_title{font-size:2.8em;font-weight:700;letter-spacing:0.04em;color:#FFF;line-height:1.2;}
#main .flow_box .inner .step_text_box{background-color:#FFF;box-sizing:border-box;padding:40px 230px 40px 30px;border-radius:0 0 20px 20px;}
#main .flow_box .inner .step_text_box .step_text{font-size:1.6em;line-height:1.6;}


@media only screen and (max-width: 767px) {
#main .flow_box{padding:40px 20px;}
#main .flow_box .inner .box:nth-of-type(n + 2){margin-top:20px;}
#main .flow_box .inner .flow_inner::before{width:77px;height:73.5px;right:10px;top:8%;-webkit-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%);}
#main .flow_box .inner .box::after{border-width:15px 27.5px 0 27.5px;margin-top:20px;}
	
#main .flow_box .inner .step_title_box{padding:45px 90px 10px 10px;border-radius:10px 10px 0 0;}
#main .flow_box .inner .step_title_box .step_box{width:80px;height:80px;top:-40px;left:0;right:0;margin:auto;padding:45px 0 0 0;}
#main .flow_box .inner .step_title_box .step_box .step{font-size:1.4em;}
#main .flow_box .inner .step_title_box .step_box .step .fs_u{font-size:1.6em;}
#main .flow_box .inner .step_title_box .step_title{font-size:1.6em;color:#FFF;}
	
	
#main .flow_box .inner .step_text_box{padding:20px 10px 10px 10px;border-radius:0 0 10px 10px;}
#main .flow_box .inner .step_text_box .step_text{font-size:1.4em;}
}