@charset "utf-8";
#page-mv.under-mv .inner1200 .ttl .jpn-ttl .color1{ color: var(--sell_color);}
@media screen and (min-width: 900px) {
#under-main .under-main-inner .under-aside .wrap > div dl dd.now a{ background: var(--sell_color); color: #fff;}
#under-main .under-main-inner .under-aside .wrap > div dl dd.now a:before { border: solid 3px #fff;}
#under-main .under-main-inner .under-aside .wrap > div dl dd a:hover:before{ border: solid 3px var(--sell_color);}
}
@media screen and (max-width: 900px) {
#under-main .under-main-inner .under-aside .wrap > div dl dd.now a:before { border: solid 3px var(--sell_color);}
}
/*======================
家を売るトップMV：sell
======================*/
.sell-top#page-mv .inner1200 .innerDiv{ min-height: 400px; border-radius: 10px; background: #000;}
.sell-top#page-mv .inner1200 .innerDiv .image-back{ background: url(../../page_asset/sell/page_mv.jpg) 50% 50% no-repeat; background-size: cover; opacity: 0.8;}
.sell-top#page-mv .inner1200 .innerDiv .mv-type-list{ background: rgba(0,0,0,.5);}
.sell-top#page-mv .inner1200 .innerDiv .mv-type-list .bukken_type h3{ color: #fff;}
.sell-top#page-mv .inner1200 .innerDiv .mv-type-list .bukken_type p .open-dialogBtn{ transition: 0.3s; border: solid 4px var(--sell_color); cursor: pointer;}
@media screen and (max-width: 800px) {
.sell-top#page-mv .inner1200 .innerDiv .image-back{ opacity: 0.5;}
}

/*======================
家を売るトップ：/buy
======================*/
#top_buy_links{ padding: 50px 0;}
#top_buy_links .inner1200{ justify-content: center; align-items: stretch; flex-wrap: wrap;}
#top_buy_links .inner1200 .item{ width: 25%; padding:15px; display: flex; align-items: stretch;}
#top_buy_links .inner1200 .item a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 10px; border-radius: 8px; background: rgba(255,255,255,0); box-shadow: 0 4px 8px rgba(0,0,0,0);}
#top_buy_links .inner1200 .item a:hover{ background: rgba(255,255,255,1.0); box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#top_buy_links .inner1200 .item a > img{ width: 30px; height: auto; margin-top: 10px;}
#top_buy_links .inner1200 .item a h4{ display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; }
#top_buy_links .inner1200 .item a h4 span { display: flex; height: 70px; align-items: center; justify-content: center; font-size: 17px; text-align: center;}
#top_buy_links .inner1200 .item a h4 b{ display: flex; align-items: center; justify-content: center; padding: 2px 14px; border-radius: 30px; font-size: 12px; color: #fff; background: var(--sell_color);}
#top_buy_links .inner1200 .item a p{ display: block; margin: 10px 0 20px;}

@media screen and (max-width: 1000px) {
#top_buy_links .inner1200 { padding: 0 1%;}
#top_buy_links .inner1200 .item{ width: 50%; padding: 15px;}
#top_buy_links .inner1200 .item a{ background: rgba(255,255,255,1.0); box-shadow: 0 4px 8px rgba(0,0,0,.2); border: solid 3px var(--sell_color);}
#top_buy_links .inner1200 .item a h4 span { height: auto; margin: 10px 0;}
#top_buy_links .inner1200 .item a h4 b{ border-radius: 4px; background: #222; padding: 0 10px;}
#top_buy_links .inner1200 .item a h4 span br{ display: none;}
}

@media screen and (max-width: 800px) {
#top_buy_links{ padding: 20px 0;}
#top_buy_links .inner1200 { padding: 0;}
#top_buy_links .inner1200 .item{ padding: 10px;}
#top_buy_links .inner1200 .item a h4 b{ font-weight: 400; line-height: 20px; padding-top: 0; font-size: 11px; border-radius: 2px;}
#top_buy_links .inner1200 .item a h4 span{ font-weight: 500; font-size: 4.0vw; line-height: 1.4em;}
#top_buy_links .inner1200 .item a p{ margin: 20px 0 20px;}
#top_buy_links .inner1200 .item a h4 span br{ display: block;}
}

/*======================
流れ一覧・詳細： MV
======================*/
#flowTtl{}
#flowTtl .inner1200{ width: 96%; margin: 40px 2% 60px; padding: 20px; background: #fff; border-radius: 14px; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#flowTtl .inner1200 .right{ display: flex; flex-direction: column;}
#flowTtl .inner1200 .right h2, 
#flowTtl .inner1200 .right p{ display: block; font-size: 16px; line-height: 1.8em;}
#flowTtl .inner1200 h3{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-right: 50px; padding-bottom: 20px;}
#flowTtl .inner1200 h3 span.t{ font-size: 11px; padding: 4px 10px; border-radius: 30px; background: var(--sell_color); color: #fff; margin-bottom: 5px; white-space: nowrap;}
#flowTtl .inner1200 h3 b{ display: block; font-size: 17px; white-space: nowrap; font-weight: 500;}
#flowTtl .inner1200 h3 b span.pcnone{ display: none;}
@media screen and (max-width: 900px) {
#flowTtl .inner1200{ width: 100%; margin: 0 0 5dvh; border-radius: 0; flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; box-shadow:none; border: solid 8px var(--sell_color);}
#flowTtl .inner1200 .right h2, 
#flowTtl .inner1200 .right p{ font-size: 14px; line-height: 1.6em;}
#flowTtl .inner1200 h3{ flex-direction: row; justify-content: flex-start; align-items: center; margin-right:0px;}
#flowTtl .inner1200 h3 span.t{ margin:0 15px 0 0;}
#flowTtl .inner1200 h3 b{ display: inline-block; font-size: 20px; white-space: wrap; color: var(--color1); font-weight: bold;}
#flowTtl .inner1200 h3 b br{ display: none;}
#flowTtl .inner1200 h3 b span.pcnone{ display: inline-block; vertical-align: middle; font-weight: bold; font-size: 20px; color: var(--color1);}
}

/*======================
流れ一覧： flow-list
======================*/
#flow-list{ display: flex; flex-direction: column;}
#flow-list h2{ width: 100%; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px; padding: 0 2%;}
#flow-list h2 img{ width: 34px; height: auto; margin-right: 10px;}
#flow-list h2 span{ display: block; font-size: 22px; font-weight: 500;}
/*box*/
#flow-list .box{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 30px 0; padding:30px 20px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.1);}
#flow-list .box .txtArea{ flex: 1;}
#flow-list .box .txtArea p.nom{ display: flex;}
#flow-list .box .txtArea p.nom span{ display: flex; align-items: baseline; padding: 5px 12px 3px; border-radius: 4px; background: var(--sell_color); color: #fff; font-size: 12px;}
#flow-list .box .txtArea p.nom span b{ font-size: 18px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 500;}
#flow-list .box .txtArea h3{ display: block; margin: 15px 0 ;}
#flow-list .box .txtArea p.txt{ display: flex; flex-direction: column; margin-bottom: 10px;}
#flow-list .box .txtArea p.txt span{ display: block; margin: 10px 0;}
#flow-list .box .txtArea p.more{ display: flex; flex-direction: row; flex-wrap: wrap; margin: 10px 0;}
#flow-list .box .txtArea p.more a{ padding: 2px 12px; border: solid 1px #ccc; color: #777; font-size: 12px; margin: 0 10px 8px 0; border-radius: 4px;}
#flow-list .box .txtArea p.more a:hover{ background: var(--color2); border: solid 1px #222; color: #222;}
/**/
#flow-list .box .txtArea .point{ width: 100%; padding: 10px; border-radius: 10px; background: var(--color6);}
#flow-list .box .txtArea .point h4{ display: flex; align-items: baseline; justify-content: flex-start; margin-bottom: 5px;}
#flow-list .box .txtArea .point h4 .p{ font-size: 10px; margin-right: 5px; color: var(--color1); border-radius: 2px; padding: 0 4px; border: solid 1px var(--color1);}
#flow-list .box .txtArea .point h4 .t{ font-size: 12px; font-weight: 500; color: var(--color1);}
#flow-list .box .txtArea .point p{ display: flex; flex-direction: column; align-items: flex-start;}
#flow-list .box .txtArea .point p span{ display: block; font-size: 12px; color: #444;}
#flow-list .box .txtArea .point p a{ flex-shrink: 0; display: block; margin-top: 15px; border: solid 1px var(--color1-border); color: var(--color1-border); font-size: 12px; padding: 4px 8px; border-radius: 2px; line-height: 1.2em; background: #fff;}
#flow-list .box .txtArea .point p a:hover{ background: var(--color2); border: solid 1px #000; color: #000;}
/**/
#flow-list .box .imgArea{ width: 300px; height: 200px; display: block; margin-left: 40px;}
#flow-list .box .imgArea .img{ display: block;}
#flow-list .box .imgArea .img img{}
@media screen and (min-width: 900px) and (max-width: 1100px) {
#flow-list .box{ align-items: flex-end;}
#flow-list .box .imgArea{ width: 40%; aspect-ratio:3/2; margin-left: 20px;}
}
@media screen and (max-width: 900px) {
#flow-list{ padding: 0 3%;}
#flow-list .box{ align-items: flex-end; margin: 10px 0 40px; }
}
@media screen and (max-width: 680px) {
#flow-list .box{ flex-direction: column-reverse; padding:0; border-radius:20px; position: relative; box-shadow: 0 6px 20px rgba(0,0,0,.3);}
#flow-list .box .txtArea{ flex: auto; width: 100%; display: block;}
#flow-list .box .txtArea p.nom{ position: absolute; left: 0; top: 0;}
#flow-list .box .txtArea p.nom span{ padding: 10px 20px 6px; border-radius:20px 4px 20px 8px; font-size: 16px;}
#flow-list .box .txtArea p.nom span b{ font-size: 20px;}
#flow-list .box .txtArea h3{ padding: 0 3%; color: var(--color1); font-weight: bold;}
#flow-list .box .txtArea p.txt{ margin: 0; padding: 0 3%;}
#flow-list .box .txtArea p.txt span{ margin: 0 0 10px;}
#flow-list .box .txtArea p.more{ justify-content: center; margin-bottom: 30px;}
#flow-list .box .txtArea p.more a, 
#flow-list .box .txtArea p.more a:hover{ display: flex; height: 36px; width: 50%; border: solid 1px #777; color: #444; font-size: 12px; margin:0; justify-content: center; align-items: center; background: #fff;}
/**/
#flow-list .box .txtArea .point{ padding: 15px 3.5%; border-radius:0 0 20px 20px; border-top: solid 1px #ddd;}
#flow-list .box .txtArea .point p span{ line-height: 1.4em;}
#flow-list .box .txtArea .point h3 b { color: red;}
#flow-list .box .txtArea .point p a, 
#flow-list .box .txtArea .point p a:hover{ border: solid 1px var(--color1); color: #fff; background: var(--color1); padding: 8px 12px; border-radius: 4px;}
/**/
#flow-list .box .imgArea{ width: 100%; height: auto; margin-left: 0; border-radius: 0;}
#flow-list .box .imgArea .img{ width: 80%; margin: 0 10%;}
#flow-list .box .imgArea .img img{}
}

/*======================
流れ一覧：家探しの強み
======================*/
#flow-point{ margin: 0 0 100px; }
#flow-point .inner1200{ padding: 20px;}
#flow-point h2{ width: 100%; display: flex; align-items: flex-start; justify-content:center; margin-bottom: 25px;}
#flow-point h2 span{ display: block; padding: 10px 20px; background: var(--color1); border-right: 30px; color: #fff; font-size: 16px; border-radius: 30px;}
#flow-point .point-list{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
#flow-point .strengthsBox{ width: 30%; display: flex; flex-direction: column; padding: 0 10px;}
#flow-point .strengthsBox .ttl{ display: flex; flex-direction: column; align-items: center;}
#flow-point .strengthsBox .ttl h3,  
#flow-point .strengthsBox .ttl h4{ display: flex; flex-direction: row; align-items: baseline; position: relative;}
#flow-point .strengthsBox .ttl h3{ font-size: 20px;}
#flow-point .strengthsBox .ttl h3 .nom{ padding:0 5px 0 10px; position: relative; font-size: 32px; color: var(--color1); padding-top: 20px; letter-spacing: 0; font-weight: 500;}
#flow-point .strengthsBox .ttl h3 .nom::after{ width: 20px; height: 20px; content: ""; position: absolute; left: 50%; top: 0px; margin-left: -7px; background: url(../../page_asset/buy/point.gif) 50% 50% no-repeat; background-size: contain;}
#flow-point .strengthsBox .ttl h3 .notes{ font-size: 12px; position: absolute; right: -2em; bottom: 6px;}
/**/
#flow-point .strengthsBox .ttl h4{ font-size: 17px; margin-bottom: 20px; padding-bottom: 20px;}
#flow-point .strengthsBox .ttl h4 span{ font-size: 15px;}
#flow-point .strengthsBox .ttl h4::after{ width: 140px; height: 1px; content: ""; background: #aaa; border-radius: 2px; position: absolute; left: 50%; bottom: 0; margin-left: -70px;}
#flow-point .strengthsBox .ttl h4 .notes{ font-size: 12px; position: absolute; right: -2em; top: 2px;}
#flow-point .strengthsBox > p{ font-size: 15px; line-height: 1.6em; color: #111;}
#flow-point p.notesTxt{ width: 100%; display: flex; justify-content: center; margin-top: 40px;}
#flow-point p.notesTxt span.span-wrap{ display: block; padding: 4px 40px; border-radius: 30px; font-size: 11px; border: solid 1px #aaa;}

@media screen and (max-width: 1040px) {
#flow-point .point-list{ flex-direction: column; justify-content: center;}
#flow-point .strengthsBox{ width: 100%; flex-direction: row; align-items: center; padding:30px 10px; border-bottom: solid 1px #ddd;}
#flow-point .strengthsBox:last-child{border-bottom: none;}
#flow-point .strengthsBox .ttl{ width: 240px;}
#flow-point .strengthsBox .ttl *{white-space: nowrap}
#flow-point .strengthsBox > p{ width: calc(100% - 240px); padding-left: 30px;}
#flow-point .strengthsBox .ttl h4{ margin-bottom: 0px; padding-bottom: 0px;}
#flow-point .strengthsBox .ttl h4::after{ display: none;}
}
@media screen and (max-width: 650px) {
#flow-point{ margin: 0 0 40px; }
#flow-point h2{ margin-bottom: 10px;}
#flow-point h2 span{width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 3.6vw; padding: 0; }
#flow-point .point-list{ background: #fff; padding: 20px; border-radius: 20px;}
#flow-point .strengthsBox{ flex-direction: column; padding:30px 10px 50px;}
#flow-point .strengthsBox .ttl{ width: 100%;}
#flow-point .strengthsBox > p{ width:100%; padding-left: 0px;}
#flow-point .strengthsBox .ttl h4{ margin-bottom: 20px; padding-bottom: 20px; color: var(--color1); font-weight: bold;}
#flow-point .strengthsBox .ttl h4::after{ display: block;}
}

/*======================
流れ詳細：ステップ
======================*/
#flowStep{ margin-top: -1px; border-top: solid 1px #aaa;}
#flowStep .inner1200{ padding: 0 20px;}
#flowStep ol{ width: 100%; display: flex; flex-direction: row; border-radius:0 0 10px 10px; border: solid 1px #aaa; border-top: none; padding: 10px; background: #f9f9f9;}
#flowStep ol li{ width: 11%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
#flowStep ol li a{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#flowStep ol li a:hover span{ background: var(--sell_color); color: #fff;}
#flowStep ol li a:hover p{ color: var(--sell_color);}
#flowStep ol li span{ display: block; padding: 4px 8px; font-size: 11px; background: #eee; border-radius: 4px; margin-top: 10px; color: #555;}
#flowStep ol li p{ width: 100%; display: block; font-size: 13px; margin: 5px 0 10px; text-align: center; color: #555;}
#flowStep ol li.now{ background: var(--sell_color); border-radius: 10px;}
#flowStep ol li.now a{ pointer-events: none;}
#flowStep ol li.now span{ background: #fff; color: var(--sell_color); font-weight: bold;}
#flowStep ol li.now p{ color: #fff;}
@media screen and (max-width:900px) {
#flowStep{ margin-top:10px; border-top: none;}
#flowStep ol{ flex-direction: column; border-radius: 8px; border: solid 1px #aaa; padding: 5px;}
#flowStep ol li, 
#flowStep ol li a{ width: 100%; height: auto; display: flex; justify-content: flex-start; flex-direction: row;}
#flowStep ol li a p{ text-decoration: underline;}
#flowStep ol li{ margin: 4px 0;}
#flowStep ol li span{ width: 65px; display: flex; justify-content:center; padding: 2px 0; font-size: 11px; background: #ccc; border-radius: 2px; margin:0 20px 0 10px; color: #111;}
#flowStep ol li p{ width: auto; flex: 1; margin: 0; text-align: left; color: #111;}
#flowStep ol li p br{ display: none;}
#flowStep ol li.now{ background: none; border-radius: 0;}
#flowStep ol li.now a{ pointer-events: none;}
#flowStep ol li.now span{ background: var(--sell_color); color: #fff;}
#flowStep ol li.now p{ color: var(--sell_color); font-weight: bold; text-decoration: none;}
}
/*======================
流れ詳細：詳細
======================*/
#flow-detail .box{ width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 30px 0; padding:30px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.1);}
#flow-detail .box .wrap.box-ttl{ justify-content: flex-start; align-items: flex-start;}
#flow-detail .box .wrap.box-ttl .ttl{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#flow-detail .box .wrap.box-ttl .ttl p.nom, 
#flow-detail .box .wrap.box-ttl .ttl p.nom span{ display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;}
#flow-detail .box .wrap.box-ttl .ttl p.nom span { padding: 2px 10px; border-radius: 4px; background: var(--color2); color: #000; font-size: 12px;}
#flow-detail .box .wrap.box-ttl .ttl p.nom span b{ font-size: 16px; color: #000;}
#flow-detail .box .wrap.box-ttl .ttl h1{ margin: 15px 0; font-size: 24px;}
/**/
#flow-detail .box .column1{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px;}
#flow-detail .box .column2{ width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
/*column2*/
#flow-detail .box .column2 .left{ width: 35%;}
#flow-detail .box .column2 .left img{}
#flow-detail .box .column2 .right{ width: 60%; font-size: 16px; line-height: 2.2em;}
/**/
#flow-detail .box .wrap .box-subtti{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 50px 0 30px;}
#flow-detail .box .wrap .box-subtti span{ color: var(--color3); padding-bottom: 5px; margin-bottom: 14px; border-bottom: solid 2px var(--color3);}
#flow-detail .box .wrap .box-subtti b{ font-size: 22px; font-weight: 500;}
#flow-detail .box .wrap .txt{ display: flex; flex-direction: column; margin-bottom: 20px;}
#flow-detail .box .wrap .txt span{ display: block; margin-bottom: 30px; font-size: 16px; line-height: 1.8em;}
#flow-detail .box .wrap .h-txt{ line-height: 1.2em; display: block; padding: 5px 0; font-weight: bold;}
/*column1*/
#flow-detail .box .column1 .pointDl{ width: 100%; height: auto; display: flex; flex-direction: column; padding:10px 20px; margin: 0 5% 30px 0; border: solid 1px #444; border-radius: 20px;}
#flow-detail .box .column1 .pointDl dt{ font-size: 16px; padding:5px 10px 10px 20px; margin-bottom: 10px; border-bottom: solid 1px #aaa; position: relative; font-weight: 500;}
#flow-detail .box .column1 .pointDl dt::before{ width: 8px; height: 8px; border: solid 3px var(--color2); border-radius: 100%; position: absolute; left: 0; top:calc(50% - 8px); content: "";}
#flow-detail .box .column1 .pointDl dd{ padding:2px 0 2px 1em; text-indent: -1em;}
#flow-detail .box .column1 .pointDl dd .links{ display: flex; flex-direction: row; flex-wrap: wrap; margin: 10px 0;}
#flow-detail .box .column1 .pointDl dd .links a{ text-indent: 0; display: block; font-size: 12px; padding: 2px 8px 3px; border-radius: 4px; border: solid 1px var(--link-color); color: var(--link-color); margin: 0 10px 10px 0; white-space: nowrap;}
#flow-detail .box .column1 .pointDl dd .links a:hover{ border: solid 1px var(--color1); color: var(--color1);}

/*column2*/
#flow-detail .box .column2 .pointDl{ width: 44%; height: 100%; display: flex; flex-direction: column; padding:10px 20px; margin: 0 5% 10px 0; border: solid 1px #444; border-radius: 20px;}
#flow-detail .box .column2 .pointDl dt{ font-size: 16px; padding:5px 10px 10px 20px; margin-bottom: 10px; border-bottom: solid 1px #aaa; position: relative; font-weight: 500;}
#flow-detail .box .column2 .pointDl dt::before{ width: 8px; height: 8px; border: solid 3px var(--color2); border-radius: 100%; position: absolute; left: 0; top:calc(50% - 8px); content: "";}
#flow-detail .box .column2 .pointDl dd{ padding:2px 0 2px 1em; text-indent: -1em;}
/**/
#flow-detail .box #type-category{ padding: 20px; border: solid 1px #555; border-radius: 20px;}
#flow-detail .box #type-category .ttl{ font-size: 16px; font-weight: bold;}
#flow-detail .box #type-category ul{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; margin: 15px 0;}
#flow-detail .box #type-category ul li{ font-size: 13px; display: block; padding: 3px 15px; border-radius: 20px; border: solid 1px #555; margin: 0 5px 8px 0;}
/**/
#flow-detail .box .bacl-list{}
#flow-detail .box .bacl-list p{ width: 100%; display: flex; justify-content: center; align-items: center;}
#flow-detail .box .bacl-list p a{ min-width: 40%; min-height:60px; display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 6px; border: solid 1px #333; color: #111; background: var(--color6); margin: 50px 0 30px;}
#flow-detail .box .bacl-list p a:hover{ background: var(--color2);}

@media screen and (max-width: 1100px) {
#flow-detail .box .pointDl{ width: 47%; margin: 0 0 10px;}
#flow-detail .box .pointDl:nth-child(odd){ margin-right: 5.8%;}
}
@media screen and (max-width:900px) {
#flow-detail { padding: 0 20px;}
#flow-detail .box{ padding-bottom: 50px; margin-bottom: 0;}
#flow-detail .box .bacl-list p a{ min-width: 80%;}
}
@media screen and (max-width:650px) {
#flow-detail .box .column2{ flex-direction: column; justify-content: center; margin-bottom: 0;}
#flow-detail .box .column2 .left{ width: 100%;}
#flow-detail .box .column2 .left img{ margin:30px 0;}
#flow-detail .box .column2 .right{ width: 100%; line-height: 1.8em;}
#flow-detail .box .pointDl{ width: 100%; margin: 0 0 20px; border-radius: 10px;}
#flow-detail .box .pointDl:nth-child(odd){ margin-right: 0;}
#flow-detail .box .wrap .box-subtti{ padding: 80px 0 30px;}
}


/*======================
家を買うのサポート
======================*/
#supportTtl{}
#supportTtl .inner1200{ width: 96%; margin: 40px 2% 40px; padding: 20px; background: #fff; border-radius: 14px; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#supportTtl .inner1200 .right{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch;}
#supportTtl .inner1200 .right .column{ width: 46%; position: relative;}
#supportTtl .inner1200 .right .column h2{ display: block; font-size: 16px; line-height: 1.4em; font-weight: 500;}
#supportTtl .inner1200 .right .column p{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 16px; line-height: 1.6em; margin: 10px 0; padding-bottom: 40px;}
#supportTtl .inner1200 .right .column p a{ width: auto; height: 24px; display: flex; align-items: center; justify-content: center; border: solid 1px #aaa; color: #777; border-radius: 2px; font-size: 12px; position: absolute; left: 0; bottom: 0; padding: 0 10px 2px;}
#supportTtl .inner1200 .right .column p a::before{ content: "▼"; font-size: 8px; margin:2px 3px 0 0;}
#supportTtl .inner1200 .right .column p a:hover{ border: solid 1px var(--sell_color); color: var(--sell_color);}
#supportTtl .inner1200 h3{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-right: 50px; padding-bottom: 20px;}
#supportTtl .inner1200 h3 span.t{ font-size: 11px; padding: 4px 10px; border-radius: 30px; background: var(--sell_color); color: #fff; margin-bottom: 5px; white-space: nowrap;}
#supportTtl .inner1200 h3 b{ display: block; font-size: 17px; white-space: nowrap; font-weight: 500;}
#supportTtl .inner1200 h3 b span.pcnone{ display: none;}
@media screen and (max-width: 900px) {
#supportTtl .inner1200{ width: 100%; margin: 0 0 5dvh; border-radius: 0; flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; box-shadow:none; border: solid 8px var(--sell_color);}
#supportTtl .inner1200 .right .column h2{ color: var(--sell_color); font-size: 20px;}
#supportTtl .inner1200 .right .column p{ font-size: 14px; line-height: 1.6em; margin:5px 0;}
#supportTtl .inner1200 h3{ flex-direction: row; justify-content: flex-start; align-items: center; margin-right:0px;}
#supportTtl .inner1200 h3 span.t{ margin:0 15px 0 0;}
#supportTtl .inner1200 h3 b{ display: inline-block; font-size: 20px; white-space: wrap; color: var(--sell_color); font-weight: bold;}
#supportTtl .inner1200 h3 b br{ display: none;}
#supportTtl .inner1200 h3 b span.pcnone{ display: inline-block; vertical-align: middle; font-weight: bold; font-size: 20px; color: var(--sell_color);}
}
@media screen and (max-width: 700px) {
#supportTtl .inner1200 .right{ flex-direction: column;}
#supportTtl .inner1200 .right .column{ width: 100%; height: auto; position: relative;}
#supportTtl .inner1200 h3{ width: 100%; flex-direction: column; padding: 10px; border-radius: 4px; background: var(--sell_color); margin-bottom: 20px;}
#supportTtl .inner1200 h3 .t{ color: var(--sell_color); background: #fff; margin-top: 5px;}
#supportTtl .inner1200 h3 b{ color: #fff; font-size:4.8vw;}
#supportTtl .inner1200 .right .column p a{ position: relative; left: auto; bottom: auto; margin: 10px 0;}
}

/*======================
サポートリスト
======================*/
#support-list{ display: flex; flex-direction: column;}
#support-list .box{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 30px 0; padding:30px 20px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.1);}
#support-list .box .txtArea{ flex: 1;}
#support-list .box .txtArea h3{ display: flex; align-items: center; justify-content: flex-start; font-size: 22px; color: #fff; padding: 20px; background: var(--color1); font-weight: 500; border-radius: 6px;}
#support-list .box .txtArea h3 .eng{ display: flex; height: 100%; align-items: baseline; padding: 5px 12px; border-radius: 4px; background: var(--color1-border); color: #fff; font-size: 12px; margin-right: 10px;}
#support-list .box .txtArea p.txt{ display: flex; flex-direction: column; margin: 10px 0 0;}
#support-list .box .txtArea p.txt span{ display: block; margin: 10px 0;}
#support-list .box .txtArea .sell-type { width: 100%; display: flex; justify-content: center; margin: 15px 0 25px;}
#support-list .box .txtArea .sell-type dl{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start;}
#support-list .box .txtArea .sell-type dl dt{ display: block; font-size: 14px; font-weight: bold; padding: 12px; background: var(--color1); color: #fff; border-radius: 8px; text-align: center; margin:0 20px 20px 0;}
#support-list .box .txtArea .sell-type dl dd{ display: flex; flex-direction: column; flex: 1;}
#support-list .box .txtArea .sell-type dl dd span{ display: block; padding: 4px 5px 4px 1em; position: relative; font-size: 14px;}
#support-list .box .txtArea .sell-type dl dd span::before{ content: "・"; margin-left: -1em;}
#support-list .box .txtArea .supportBox{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 10px 0; padding: 20px 0 30px; border-top: solid 1px #aaa;}
#support-list .box .txtArea .supportBox.sell_point{ align-items: flex-start;}
#support-list .box .txtArea .supportBox .support-ttl{ width: 30%; display: flex; flex-direction: row; align-items: center; justify-content: center;}
#support-list .box .txtArea .supportBox .support-ttl.pointImg { position: sticky; left: 0; top: 50px; margin-top: 20px;}
#support-list .box .txtArea .supportBox .support-ttl .icon{ width: 100%; min-height: 200px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
#support-list .box .txtArea .supportBox .support-ttl h4{ display: none;}
#support-list .box .txtArea .supportBox .support-txt { width: 65%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#support-list .box .txtArea .supportBox .support-txt h4{ display: flex; flex-direction: column; align-items:flex-start; justify-content: flex-start; margin: 20px 0 10px;}
#support-list .box .txtArea .supportBox .support-txt h4 span{ display: flex; align-items: center; justify-content: center; background: var(--color1); color: #fff; padding: 1px 8px ; border-radius: 2px; font-size: 12px; margin-bottom: 10px;}
#support-list .box .txtArea .supportBox .support-txt h4 b{ font-size: 20px; color: #000; font-weight: 500;}
#support-list .box .txtArea .supportBox .support-txt > p { display: flex; flex-direction: column; align-items: flex-start;}
#support-list .box .txtArea .supportBox .support-txt > p span{ width: 100%; display: flex; font-size: 14px; margin: 6px 0; color: #333;}
#support-list .box .txtArea .supportBox .support-txt > p span.row{ flex-wrap: wrap;}
#support-list .box .txtArea .supportBox .support-txt > p span.row a{ margin: 0 8px 8px 0; letter-spacing: 0;}
#support-list .box .txtArea .supportBox .support-txt > p a, 
#support-list .box .txtArea .supportBox .support-txt > p span.open-dialogBtn{ width: auto; flex-shrink: 0; display: block; margin: 15px 10px 6px 0; border: solid 1px var(--color1-border); color: var(--color1-border); font-size: 12px; padding: 4px 8px; border-radius: 2px; line-height: 1.2em; background: #fff; cursor: pointer; touch-action: manipulation;}
#support-list .box .txtArea .supportBox .support-txt > p a:hover, 
#support-list .box .txtArea .supportBox .support-txt > p span.open-dialogBtn:hover{ background: var(--color2); border: solid 1px #000; color: #000;}
/**/
#support-list .box .txtArea .supportBox .support-txt h5.h5ttl{ font-size: 14px; color: #000; font-weight: 500; padding:5px 0 5px 24px; line-height: 1.2em; position: relative;}
#support-list .box .txtArea .supportBox .support-txt h5.h5ttl::before{ width: 6px; height: 6px; content: ""; display: block; border-radius: 100%; border: solid 5px #000; position: absolute; left: 0; top: 6px;}
/**/
dl.pointDL{ width: 100%; display: flex; flex-direction: column; margin: 10px 0; padding:15px 8px 20px; background: #f0f0f0; border: solid 1px #ddd; border-radius: 4px;}
dl.pointDL dt{ width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: 4px;}
dl.pointDL dt span{ font-size: 12px; padding: 2px 10px 3px; border: solid 1px #999; background: #444; color: #fff; border-radius: 4px;}
dl.pointDL dd{ width: 100%; display: flex; flex-wrap: wrap;}
dl.pointDL dd span{ width: 50%; padding: 2px 5px 2px 1em; font-size: 12px;}
dl.pointDL.ddfull dd span{ width: 100%; padding: 3px 5px 3px 1em;}
dl.pointDL dd span::before{ content: "・"; margin-left: -1em;}
/**/
.numList{ width: 100%; display: block; margin: 10px 0; padding:15px 15px 20px 30px; background: #f0f0f0; border: solid 1px #ddd; border-radius: 4px; list-style: decimal !important; list-style-type: decimal !important;}
.numList li{ width: 100%; display:list-item !important; font-size: 12px; margin: 4px 0; list-style: decimal !important; list-style-type: decimal !important;}
/**/
#support-list .box .txtArea .supportBox .support-txt .point{ width: 100%; padding: 5px 10px 8px; border-radius: 10px; background: var(--color6); margin-top: 10px;}
#support-list .box .txtArea .supportBox .support-txt .point h5{ font-size: 12px; display: flex; align-items: baseline; justify-content: flex-start; margin-bottom: 2px; color: var(--color1);}
#support-list .box .txtArea .supportBox .support-txt .point p{ display: flex; flex-direction: column; align-items: flex-start;}
#support-list .box .txtArea .supportBox .support-txt .point p span{ display: block; font-size: 12px; color: #444; }
#support-list .box .txtArea .supportBox .support-txt .point p a{ flex-shrink: 0; display: block; margin-top: 15px; border: solid 1px var(--color1-border); color: var(--color1-border); font-size: 12px; padding: 4px 8px; border-radius: 2px; line-height: 1.2em; background: #fff;}
#support-list .box .txtArea .supportBox .support-txt .point p a:hover{ background: var(--color2); border: solid 1px #000; color: #000;}
@media screen and (min-width: 900px) and (max-width: 1100px) {
#support-list .box{ align-items: flex-end;}
#support-list .box .imgArea{ width: 40%; aspect-ratio:3/2; margin-left: 20px;}
}
@media screen and (max-width: 900px) {
#support-list{ padding: 0 3%;}
#support-list .box{ align-items: flex-end; margin: 10px 0 40px; }
#support-list .box .txtArea .supportBox .support-txt > p{ padding: 10px 3%;}
#support-list .box .txtArea .supportBox .support-txt > p > span{ line-height: 1.3em; margin: 4px 0;}
}
@media screen and (max-width: 680px) {
#support-list .box{ flex-direction: column-reverse; padding:0; border-radius:20px; position: relative; box-shadow: 0 6px 20px rgba(0,0,0,.3);}
#support-list .box .txtArea{ flex: auto; width: 100%; display: block;}
#support-list .box .txtArea h3{ flex-direction: column; align-items: flex-start; padding: 0 3% 20px; font-weight: 500; margin-bottom: 10px; border-radius:20px 20px 0 0 ; line-height: 1.2em;}
#support-list .box .txtArea h3 .eng{ margin-bottom: 10px;}
#support-list .box .txtArea p.txt{ margin: 0 0 30px; padding: 0 3%;}
#support-list .box .txtArea p.txt span{ margin: 0 0 10px;}
/**/
#support-list .box .txtArea .supportBox{ flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 3%; margin: 0;}
#support-list .box .txtArea .supportBox .support-ttl{ width: 100%; flex-direction: column; align-items: center;}
#support-list .box .txtArea .supportBox .support-ttl .icon{ padding: 0 20%;}
/**/
#support-list .box .txtArea .supportBox .support-ttl.pointImg { position: relative; left:auto; top:auto; margin-top: 0;}
#support-list .box .txtArea .supportBox .support-ttl.pointImg .icon { padding:20px 5% 0px;}
#support-list .box .txtArea .supportBox .support-ttl h4{ width: 100%; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; margin: 0;}
#support-list .box .txtArea .supportBox .support-ttl h4 span{ display: flex; align-items: center; justify-content: center; background: var(--color1); color: #fff; padding: 1px 8px ; border-radius: 4px; font-size: 12px; margin-right: 10px; white-space: nowrap}
#support-list .box .txtArea .supportBox .support-ttl h4 b{ font-size: 22px; color: #000; font-weight: 500;}
/**/
#support-list .box .txtArea .supportBox .support-txt { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#support-list .box .txtArea .supportBox .support-txt h4{ display: none;}
#support-list .box .txtArea .supportBox .support-txt > p{ align-items: center;}
#support-list .box .txtArea .supportBox .support-txt > p > a{ min-width: 60%; min-height: 40px;}
#support-list .box .txtArea .supportBox .support-txt > p a, 
#support-list .box .txtArea .supportBox .support-txt > p span.open-dialogBtn{ padding: 10px; display: flex; align-items: center; justify-content: center; border: solid 1px var(--color1-border); color: var(--color1-border); border-radius: 4px; font-size: 14px; font-weight: bold;}
#support-list .box .txtArea .supportBox .support-txt > p > span.row{ margin-top: 15px;}
#support-list .box .txtArea .supportBox .support-txt > p > span.row a{ width: 46%; height: 44px; margin: 0 2% 15px;}
/**/
#support-list .box .txtArea .sell-type dl{ display: flex; flex-direction: column; align-items: flex-start; padding: 0 3%;}
#support-list .box .txtArea .sell-type dl dt{ margin: 0 0 4px; border-radius: 2px; line-height: 1.2em;}
#support-list .box .txtArea .sell-type dl dt br{ display: none;}
#support-list .box .txtArea .sell-type dl dd{ display: flex; flex-direction: column; flex: 1;}
#support-list .box .txtArea .sell-type dl dd span{ display: block; padding: 4px 5px 4px 1em; position: relative; font-size: 14px;}
#support-list .box .txtArea .sell-type dl dd span::before{ content: "・"; margin-left: -1em;}
/**/
dl.pointDL dd span{ width: 100%;}
}
/*=============================
よくある質問
=============================*/
.c-tag{ width: 100%; height: 1px; display: block;}
#faq-main .box{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items:stretch; margin: 30px 0; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.1); position: relative;}
/*----------
page-left-wrap
*/
#faq-main .page-left-wrap{ width: 130px; padding-top: 150px;}
#faq-main .page-left-wrap #tag-menu{width: 100%; display: block; position: sticky; left: 0; top: 60px; margin: 0 0 80px; background: #fff;}
#faq-main .page-left-wrap #tag-menu li{ width: 100%; display: block;}
#faq-main .page-left-wrap #tag-menu li span{ display: block; font-size: 10.5px; letter-spacing: 0; font-weight: 400; padding:0 2px; margin-bottom: 4px; }
#faq-main .page-left-wrap #tag-menu li a{ display: block; font-size: 11px; padding:1px 2px; margin: 6px 0; border-radius: 2px; color: #777; font-weight: 500; position: relative;}
#faq-main .page-left-wrap #tag-menu li a::before{ content: "・"; letter-spacing: 0; color: #222;}
#faq-main .page-left-wrap #tag-menu li a:hover{ color: var(--sell_color); font-weight: bold;}
#faq-main .page-left-wrap #tag-menu li a::after{ width: 0; height: 100%; position: absolute; left: 0; top: 0; content: ""; background: var(--color1); transition: 0.4s; z-index: -1; border-radius: 0 4px 4px 0;}
#faq-main .page-left-wrap #tag-menu.tag1 li.t1 a::before, 
#faq-main .page-left-wrap #tag-menu.tag2 li.t2 a::before, 
#faq-main .page-left-wrap #tag-menu.tag3 li.t3 a::before, 
#faq-main .page-left-wrap #tag-menu.tag4 li.t4 a::before, 
#faq-main .page-left-wrap #tag-menu.tag5 li.t5 a::before, 
#faq-main .page-left-wrap #tag-menu.tag6 li.t6 a::before, 
#faq-main .page-left-wrap #tag-menu.tag7 li.t7 a::before, 
#faq-main .page-left-wrap #tag-menu.tag8 li.t8 a::before{ opacity: 0;}
#faq-main .page-left-wrap #tag-menu.tag1 li.t1 a::after, 
#faq-main .page-left-wrap #tag-menu.tag2 li.t2 a::after, 
#faq-main .page-left-wrap #tag-menu.tag3 li.t3 a::after, 
#faq-main .page-left-wrap #tag-menu.tag4 li.t4 a::after, 
#faq-main .page-left-wrap #tag-menu.tag5 li.t5 a::after, 
#faq-main .page-left-wrap #tag-menu.tag6 li.t6 a::after, 
#faq-main .page-left-wrap #tag-menu.tag7 li.t7 a::after, 
#faq-main .page-left-wrap #tag-menu.tag8 li.t8 a::after{ width: 10px;}
#faq-main .page-left-wrap #tag-menu.tag1 li.t1 a, 
#faq-main .page-left-wrap #tag-menu.tag2 li.t2 a,
#faq-main .page-left-wrap #tag-menu.tag3 li.t3 a,
#faq-main .page-left-wrap #tag-menu.tag4 li.t4 a,
#faq-main .page-left-wrap #tag-menu.tag5 li.t5 a,
#faq-main .page-left-wrap #tag-menu.tag6 li.t6 a,
#faq-main .page-left-wrap #tag-menu.tag7 li.t7 a,
#faq-main .page-left-wrap #tag-menu.tag8 li.t8 a { color: var(--color1);}
@media screen and (max-width: 800px){
#faq-main .box{ flex-direction: column; justify-content: flex-start; align-items:flex-start;}
/**/
#faq-main .page-left-wrap{ width: 100%; display: flex; padding: 0; position: sticky; left: 0; top: 0; margin: 0; z-index: 100; border-bottom: solid 1px #aaa;}
#faq-main .page-left-wrap #tag-menu{ padding:5px 50px 5px 5px; display: flex; position: relative; left: auto; top: auto; margin: 0;}
#faq-main .page-left-wrap #tag-menu li{ width: 20%; display: block; margin: 0; }
#faq-main .page-left-wrap #tag-menu li.tit{ display: none;}
#faq-main .page-left-wrap #tag-menu li a{ display: flex; align-items: center; justify-content: center; height: 30px; font-size: 2.4vw; letter-spacing: 0; padding:0 0 3px; border-radius: 0; font-weight: bold; margin: 0;}
#faq-main .page-left-wrap #tag-menu li a::before{ content: ""; display: none;}
#faq-main .page-left-wrap #tag-menu.tag1 li.t1 a, 
#faq-main .page-left-wrap #tag-menu.tag2 li.t2 a, 
#faq-main .page-left-wrap #tag-menu.tag3 li.t3 a, 
#faq-main .page-left-wrap #tag-menu.tag4 li.t4 a, 
#faq-main .page-left-wrap #tag-menu.tag5 li.t5 a, 
#faq-main .page-left-wrap #tag-menu.tag6 li.t6 a, 
#faq-main .page-left-wrap #tag-menu.tag7 li.t7 a, 
#faq-main .page-left-wrap #tag-menu.tag8 li.t8 a{ background:var(--sell_color); color: #fff; border-radius: 5px;}
}
/*-----------------------
FAQ
-------------------------*/
#faq-main .page-right-wrap{ width: calc(100% - 130px);}
#faq-main .page-right-wrap > .section{ padding: 60px 0;}
@media screen and (max-width: 800px){
#faq-main .page-right-wrap > .section{ padding: 50px 0;}
#faq-main .page-right-wrap{ width:100%; padding-left: 0px; margin-top: 0;}
#faq-main .page-right-wrap .titArea{ padding: 0 5% !important;}
}
#faq-main .page-right-wrap .section-faq{ width: 100%; display: block; padding: 10px 0;}
#faq-main .page-right-wrap .section-faq h2 { width: 100%; display: block; position: relative; margin: 60px 0 10px; padding: 10px 10px 10px 45px;}
#faq-main .page-right-wrap .section-faq h2::after{ width: 10px; height: 10px; content: ""; border: solid 8px var(--color1); border-radius: 100%; position: absolute; left: 10px; top: 50%; margin-top: -11px;}
#faq-main .page-right-wrap .section-faq h2 span{ display: block; line-height: 1.4em; font-size: 20px;}
/**/
#faq-main .page-right-wrap .section-faq dl{ width: 100%; display: block;} 
#faq-main .page-right-wrap .section-faq dl > * { width: 100%; display: block; position: relative; padding: 10px 10px 20px 54px;}
#faq-main .page-right-wrap .section-faq dl > * span{ width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-weight: 300; position: absolute; top: 18px; left: 10px; border-radius: 3px; font-size: 20px; font-family: 'Jost', sans-serif;}
#faq-main .page-right-wrap .section-faq dl dt{ font-size: 15px; border-bottom: solid 1px #ddd; border-radius: 4px; margin-top: 20px; transition: 0.4s; padding-right: 60px; cursor: pointer; padding-top: 20px;}
#faq-main .page-right-wrap .section-faq dl dt span{ background: var(--color1); color: #fff; margin-bottom: 2px;}
#faq-main .page-right-wrap .section-faq dl dd{ margin-bottom: 30px; line-height: 1.8em; display: flex; flex-direction: column;}
#faq-main .page-right-wrap .section-faq dl dd span{ background:#e0e0e0; color: var(--color1-border); top: 15px;}
#faq-main .page-right-wrap .section-faq dl dd a{ text-decoration: underline; color: #007AC8; transition: 0.2s;}
@media screen and (max-width: 600px) {
#faq-main .page-right-wrap .section-faq h2{ width: 96%; margin: 30px 2% 0; background: var(--color1); border-radius: 4px;}
#faq-main .page-right-wrap .section-faq h2::after{ border: solid 6px #fff;}
#faq-main .page-right-wrap .section-faq h2 span{ letter-spacing: 0; font-size: 4.6vw; color: #fff;}
#faq-main .page-right-wrap .section-faq dl dt{ font-size: 18px; line-height: 1.3em;}
#faq-main .page-right-wrap .section-faq dl dt span{ top: 18px;}
#faq-main .page-right-wrap .section-faq dl dd{ font-size: 15px; line-height: 1.6em;}
}

/*----------------
under-top
------------------*/
#under-main{ width: 100%; display: flex; justify-content: center; position: relative; margin-bottom: 80px;}
#under-main .under-main-inner { width: 96%; margin: auto 2%; max-width: 1200px; display: flex; flex-direction: row; justify-content: space-between; position: relative;}
#under-main .under-main-inner .under-wrapper{ flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
@media screen and (max-width: 900px) {
#under-main{ margin-bottom: 40px;}
#under-main .under-main-inner { flex-direction: column; justify-content: flex-start; align-items: flex-start;}
#under-main .under-main-inner .under-wrapper{ flex: auto; width: 100%; padding: 0;}
}



/*----------------
sellフォームボタン
------------------*/
#sell-form { padding: 0 1% 40px;}
#sell-form .inner1200{ background: var(--sell_color); padding: 20px 3%; flex-direction: row; justify-content: space-between; align-items: stretch; border-radius: 10px; border: solid 1px #555;}
#sell-form .inner1200 p { width: 32%; display: flex; flex-direction: column; }
#sell-form .inner1200 p .open-dialogBtn{ display: flex; flex-direction: column; align-items: center; border-radius: 8px; background: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.8); transition: 0.3s; padding: 20px 10px;  cursor: pointer; touch-action: manipulation;}
#sell-form .inner1200 p .open-dialogBtn:hover { background: rgba(255,255,255,1); box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#sell-form .inner1200 p .open-dialogBtn *{ color: #fff; transition: 0.3s;}
#sell-form .inner1200 p .open-dialogBtn:hover *{ color: #000; transition: 0.3s;}
#sell-form .inner1200 p .open-dialogBtn b{ height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
/*icon*/
#sell-form .inner1200 p .open-dialogBtn b .icon{ width: 30px; height: 30px; display: block; margin: 0 20px; opacity: 0.7; transition: 0.4s;}
#sell-form .inner1200 p .open-dialogBtn b .icon.satei{ background: url(../img/icon/sell_w.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn:hover b .icon.satei{ background: url(../img/icon/sell.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn b .icon.sumikae{ background: url(../img/icon/sell2_w.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn:hover b .icon.sumikae{ background: url(../img/icon/sell2.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn b .icon.soudan{ background: url(../img/icon/sell3_w.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn:hover b .icon.soudan{ background: url(../img/icon/sell3.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn span{ height: 50px; display: flex; align-items: center; justify-content: center; text-align: center;}


@media screen and (max-width: 700px) {
#sell-form .inner1200{  padding: 15px; flex-direction:column; justify-content: center;}
#sell-form .inner1200 p { width: 100%; flex-direction: row; margin-bottom: 10px;}
#sell-form .inner1200 p:last-child{ margin-bottom: 0;}
#sell-form .inner1200 p .open-dialogBtn{ width: 100%; height: 70px; padding: 0 10px; flex-direction: row; align-items: center; justify-content: flex-start; background: rgba(255,255,255,1); box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#sell-form .inner1200 p .open-dialogBtn *{ color: #000; transition: 0.3s;}
#sell-form .inner1200 p .open-dialogBtn span{ font-size: 14px; line-height: 1.1em; height: auto; justify-content: flex-start; text-align: left; margin-left: 30px;}
#sell-form .inner1200 p .open-dialogBtn span br{ display: none;}
#sell-form .inner1200 p .open-dialogBtn b{ flex-wrap: nowrap; white-space: nowrap; }
#sell-form .inner1200 p .open-dialogBtn b .icon{ margin: 0 10px 0 0; opacity: 1;}
#sell-form .inner1200 p .open-dialogBtn b .icon.satei{ background: url(../img/icon/sell.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn b .icon.sumikae{ background: url(../img/icon/sell2.gif) 50% 50% no-repeat; background-size: cover;}
#sell-form .inner1200 p .open-dialogBtn b .icon.soudan{ background: url(../img/icon/sell3.gif) 50% 50% no-repeat; background-size: cover;}
}