@charset "utf-8";
/*-----------------------------
背景
-------------------------*/
#mv .slider-wrap .mv_slider .mv0{ background: url("../img/top/mv0.jpg") 20% 0% no-repeat; background-size: cover;}
#mv .slider-wrap .mv_slider .mv2{ background: url("../img/top/mv2.jpg") 70% 0% no-repeat; background-size: cover;}
#mv .slider-wrap .mv_slider .mv3{ background: url("../img/top/mv3.jpg") 50% 0% no-repeat; background-size: cover;}
#mv .slider-wrap .mv_slider .mv4{ background: url("../img/top/mv4.jpg") 50% 0% no-repeat; background-size: cover;}
#mv .slider-wrap .mv_slider .mv5{ background: url("../img/top/mv5.jpg") 50% 0% no-repeat; background-size: cover;}
@media screen and (max-width: 600px) {
#mv .slider-wrap .mv_slider .mv0{ background-size: auto 100%;}
#mv .slider-wrap .mv_slider .mv2{ background-size: auto 100%;}
#mv .slider-wrap .mv_slider .mv3{ background-size: auto 100%;}
#mv .slider-wrap .mv_slider .mv4{ background-size: auto 100%;}
#mv .slider-wrap .mv_slider .mv5{ background-size: auto 100%;}
}

/*-----------------------------
mv
-------------------------*/
#mv { width: 100%; display: flex; justify-content: center; overflow:hidden;}
#mv .slider-wrap{ width: 100%; display: flex; justify-content: center; overflow: hidden; position: relative;}
#mv .slider-wrap .mv_slider{ width: calc(950px * 3);  display: flex; justify-content: center;}
#mv .slider-wrap .mv_slider .slid-item{ min-width: 900px; width: 900px; height: 500px; margin:0 25px; padding: 30px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner{ width: 100%; height: 100%; display: flex; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl{ display: block; vertical-align: baseline; color: #fff; font-size: 36px; line-height: 1.6em; font-weight: 800; letter-spacing: 0.3em;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl br.sp{ display: none;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl .big{ display: inline-block; color: #fff; font-size: 60px; font-weight: 800; vertical-align: baseline;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl.indent_minus{ text-indent: -0.4em;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .mvBtn{ display: flex; justify-content: flex-start;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .mvBtn a{ display: flex; justify-content: center; align-items: center; min-height:40px; padding: 10px 15px; border-radius: 4px; background: var(--color1); color: #fff;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .mvBtn a:hover{ background: #fff; color: var(--color1);}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .mvBtn.red a { background: var(--color4_2);}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .mvBtn.red a:hover{ background: #fff; color: var(--color4_2);}
/**/
#mv .slider-wrap .mv_slider .slid-item .movie{ width: 100%; height: 100%; position: absolute; z-index: -1; left:0; top: 0; display: flex; justify-content: flex-start; align-items: flex-start; background: #000; border-radius: 10px;}
#mv .slider-wrap .mv_slider .slid-item .movie video{ width: 900px; opacity: 1; display: block;}
/*mv-slider*/
#mv .slider-wrap .slick-dots { bottom: auto; top: 100%; margin-top: 6px; max-width: 900px; display: flex; flex-direction: row;}
#mv .slider-wrap .slick-dots li { height: 8px; width:calc(100% - 4px); margin: 0 4px; padding: 0; cursor: pointer; display: flex; background: #ccc; transition: 0.4s;}
#mv .slider-wrap .slick-dots li:hover{ background: #999;}
#mv .slider-wrap .slick-dots li.slick-active, 
#mv .slider-wrap .slick-dots li.slick-active:hover{ background: var(--color2);}
#mv .slider-wrap .slick-dots li button{ height: 100%; width: 100%; display: none !important;}
#mv .slider-wrap .slick-dots li.slick-active button:before{ display: none;}
@media screen and (max-width: 950px) {
#mv { width: 94%; margin: 0 3%; border-radius: 15px; overflow: hidden;}
#mv .slider-wrap .mv_slider{ margin: 0;}
#mv .slider-wrap .slick-dots li { height: 14px;}
/**/
#mv .slider-wrap .mv_slider .slick-prev, 
#mv .slider-wrap .mv_slider .slick-next { width: 80px; height: 80px; opacity: 0.5; z-index: 100000000000000000000000000000; position: absolute; top:50%; display: flex; flex-direction: row; align-items: center;}
#mv .slider-wrap .mv_slider .slick-next{ justify-content: flex-end;} 
#mv .slider-wrap .mv_slider .slick-prev{ justify-content: flex-start;} 
#mv .slider-wrap .mv_slider .slick-prev:before, 
#mv .slider-wrap .mv_slider .slick-next:before { display: none !important;}
#mv .slider-wrap .mv_slider .slick-prev::after, 
#mv .slider-wrap .mv_slider .slick-next::after { width: 11px; height: 11px; display: block; border-left: 2px solid #000; border-bottom: 2px solid #000; content: "";}
#mv .slider-wrap .mv_slider .slick-next::after { transform: rotate(-135deg); margin-right: 20px;}
#mv .slider-wrap .mv_slider .slick-prev::after { transform: rotate(45deg); margin-left: 20px;}
#mv .slider-wrap .mv_slider .slick-next { left: 50%; margin-left: calc(50vw - 100px); background: none;}
#mv .slider-wrap .mv_slider .slick-prev{ right: 50%; margin-right: calc(50vw - 100px); background: none;}
}
@media screen and (max-width: 900px) {
#mv { margin: 50px 2% 0; min-height: 350px; height: calc(60vh - 50px); }
#mv .slider-wrap .mv_slider .slid-item{ min-height: 350px; height: calc(60vh - 50px); }
#mv .slider-wrap .mv_slider .slid-item .slid-inner{ width: 100vw; padding: 0 5vw;}
}
@media screen and (max-width: 650px) {
#mv .slider-wrap .mv_slider .slid-item{ margin:0; padding:0; border-radius: 0;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner{ padding-bottom: 50px;}
#mv .slider-wrap .slick-dots { width: 90vw; bottom: 10px; top:auto; margin-top: 0; max-width: 90%; display: flex; flex-direction: row; z-index: 100;}
#mv .slider-wrap .slick-dots li { border-radius: 10px;}
#mv .slider-wrap .mv_slider .slid-item .movie{ left: 50%; margin-left: -50vw;}
#mv .slider-wrap .mv_slider .slid-item .movie video{ width: auto; min-width: 100vw; height:auto; min-height: 100%; }
}
@media screen and (max-width: 650px) {
#mv { height: calc( 60vh - 50px);}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl{ font-size: 7.6vw; line-height: 1.4em; letter-spacing: 1px; padding: 2vw;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl .big{ font-size: 14.0vw; margin-left: -5px;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl.indent_minus{ text-indent: -0.4em;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .ttl br.sp{ display: block;}
#mv .slider-wrap .mv_slider .slid-item .slid-inner .mvBtn{ margin: 4px 10px;}
}

/*-----------------------------
bukken_link
-------------------------*/
#bukken_link{ margin: 30px 0;}
#bukken_link .inner1200{ display: flex; align-items: flex-start; justify-content: space-between;}
#bukken_link .inner1200 .buy_links{ width: 810px;}
#bukken_link .inner1200 .sell_links{ width: 360px; height: 100%;}
#bukken_link .inner1200 .innerBox{ display: flex; flex-direction: column; position: relative; overflow-x: hidden; overflow-y: visible; align-items: flex-start;}
#bukken_link .inner1200 .innerBox .ttl-area{ display: flex; align-items: center; justify-content: flex-start;}
#bukken_link .inner1200 .innerBox .ttl-area h2{ display: flex; width: 120px; height: 60px; justify-content: center; align-items: center; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.1); position: relative; z-index: 10;}
#bukken_link .inner1200 .innerBox .ttl-area h2::after{ width: 100%; height: 10px; content: ""; background: #fff; position: absolute; top: 100%; left: 0; margin-top: -1px;}
#bukken_link .inner1200 .innerBox .ttl-area h2 b{ padding-right: 5px; font-size: 15px; display: flex; align-items: center;}
#bukken_link .inner1200 .innerBox .ttl-area h2 b::before{ width: 10px; height: 10px; display: block; margin-right: 5px; border-radius: 100%; border: solid 5px var(--color2); content: "";}
#bukken_link .inner1200 .innerBox .ttl-area h2 b .sp-area{ display: none;}
/*tab*/
#bukken_link .inner1200 .innerBox .ttl-area ul {display: flex; margin-left: 10px;}
#bukken_link .inner1200 .innerBox .ttl-area ul li{ display: flex; align-items: center; padding: 0 5px; border-right: solid 1px #ccc; }
#bukken_link .inner1200 .innerBox .ttl-area ul li:last-child{ border-right:none;} 
#bukken_link .inner1200 .innerBox .ttl-area ul li span{ display: flex; align-items: center; padding: 5px 15px; border-radius: 30px; font-weight: bold; font-size: 12px; letter-spacing: 0; border: solid 1px rgba(0,0,0,0); transition: 0.3s; cursor: pointer; word-break: keep-all;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span::before{ width: 7px; height: 3px; display: block; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); content: ""; margin-right: 5px; opacity: 0; transition: 0.3s;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span:hover{ border: solid 1px rgba(0,0,0,0.3);}
#bukken_link .inner1200 .innerBox .ttl-area ul li span:hover::before{ opacity: 0.4;}
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span::before, 
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span:hover::before{ opacity: 1;}
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span{ background: var(--color2); border: solid 1px var(--color2);} 
/*tab-box*/
#bukken_link .inner1200 .innerBox .tabBox{ width: 100%; display: flex; position: absolute; left: -110%; bottom: 0; z-index: 100; padding: 12px; background: #fff; transition: 0.8s;}
#bukken_link .inner1200 .innerBox .tabBox.view{ position: relative; left: 0; z-index: 10; display: flex; justify-content: space-between; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: 0s;}
#bukken_link .inner1200 .innerBox .tabBox .bukken_type{ width: 70%; display: flex; flex-wrap: wrap; padding-right: 15px;  justify-content: space-between;}
#bukken_link .inner1200 .innerBox .tabBox .select_type{ width: 30%; border-left:solid 1px #ddd; padding-left: 15px; display: flex; flex-direction: column;}

/**/
#bukken_link .inner1200 .innerBox .tabTtl{ width: 100%; display: block; padding: 0 5px 10px;}
#bukken_link .inner1200 .innerBox .tabTtl span{ display: inline-block; line-height: 1em; padding: 2px 5px 3px; font-size: 13px; color: #fff; font-weight: 500; position: relative; z-index: 11;}
#bukken_link .inner1200 .innerBox .tabTtl span::before, 
#bukken_link .inner1200 .innerBox .tabTtl span::after{ height: 100%; content: ""; position: absolute; left: 0; top: 0;}
#bukken_link .inner1200 .innerBox .tabTtl span::before{ z-index: -10; background: #eee; width: 100%;} 
#bukken_link .inner1200 .innerBox .tabTtl span::after{ z-index: -1; background: #000; transition: 0.2s; width: 0;}
#bukken_link .inner1200 .innerBox.setView .tabTtl span::after{ width: 100%;}
/**/
#bukken_link .inner1200 .innerBox p{ display: block; margin: 0 0 12px;}
#bukken_link .inner1200 .innerBox .bukken_type p{ width: 49%;}
#bukken_link .inner1200 .innerBox .select_type p, 
#bukken_link .inner1200 .sell_links .bukken_type p{ width: 100%;}
#bukken_link .inner1200 .innerBox p a{ height: 70px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; border: solid 4px #e0e0e0; border-radius: 8px;}
#bukken_link .inner1200 .innerBox p a img{ width: 40px; margin: 0 20px; opacity: 0.7; transition: 0.4s;}
#bukken_link .inner1200 .innerBox p a b{ font-size: 15px; flex: 1; text-align: center; transition: 0.4s;}
#bukken_link .inner1200 .innerBox p.long a{ height: 150px; flex-direction: column; justify-content: center; align-items: center;}
#bukken_link .inner1200 .innerBox p.long a img{ width:60px; margin-bottom: 10px;}
#bukken_link .inner1200 .innerBox p.long a b{ flex: none;}
#bukken_link .inner1200 .innerBox p a b .sp-area{ display: none;}
#bukken_link .inner1200 .innerBox p a:hover{ border: solid 4px var(--color2); background: #f0f0f0;}
#bukken_link .inner1200 .innerBox p a:hover img{ opacity: 1;}
#bukken_link .inner1200 .innerBox p a.select_type b{ font-size: 15px; flex: 1; text-align: center; transition: 0.4s;}
/**/
#bukken_link .inner1200 .sell_links .bukken_type{ width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; background: #fff;}
#bukken_link .inner1200 .sell_links .bukken_type p a span{ font-size: 11px; line-height: 1.3em; padding-top:3px; text-align: center;}
#bukken_link .inner1200 .sell_links .bukken_type p a span br{ display: none;}
@media screen and (max-width: 1260px) {
#bukken_link { padding: 0 2%;}
#bukken_link .inner1200 .buy_links{ width: 69%;}
#bukken_link .inner1200 .sell_links{ width: 29%;}
}
@media screen and (max-width: 960px) {
#bukken_link{ padding: 0 3%; margin-bottom: 0;}
#bukken_link .inner1200{ width: 100%; min-width: 100%; flex-wrap: wrap;}
#bukken_link .inner1200 .buy_links{ width: 100%; border-radius: 0 0 10px 10px;}
#bukken_link .inner1200 .sell_links{ width: 100%; height: auto; margin-top: 30px;}
/**/
#bukken_link .inner1200 .innerBox .ttl-area{ width: auto; align-items: stretch; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.3); margin-top: 15px;}
#bukken_link .inner1200 .innerBox .ttl-area h2{ border-radius: 10px 10px 0 0; background: none; box-shadow:none;}
#bukken_link .inner1200 .innerBox .ttl-area h2::after{ display: none;}
/*tab*/
#bukken_link .inner1200 .innerBox .ttl-area ul { margin-right: 10px;}
#bukken_link .inner1200 .innerBox .ttl-area ul li{ padding: 0; border-right:none; padding:5px; align-items: stretch;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span{ padding:0 20px; border-radius: 4px; position: relative;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span, 
#bukken_link .inner1200 .innerBox .ttl-area ul li span:hover{ border: solid 1px #ccc;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span::before, 
#bukken_link .inner1200 .innerBox .ttl-area ul li span:hover::before{ display: none; margin-right: 0px;}
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span::before, 
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span:hover::before{ display: block;}
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span{ background: var(--color2); border: solid 1px var(--color2);} 
/**/
#bukken_link .inner1200 .sell_links .bukken_type{ flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-radius: 0 0 10px 10px;}
#bukken_link .inner1200 .sell_links .bukken_type p{ width: 49%;}
}
@media screen and (max-width: 800px) {
#bukken_link .inner1200 .innerBox .tabBox{ flex-direction: column;}
#bukken_link .inner1200 .innerBox .tabBox .bukken_type{ width: 100%; padding-right: 0; margin-bottom: 10px;}
#bukken_link .inner1200 .innerBox .tabBox .select_type{ width: 100%; border-left:none; padding-left: 0; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#bukken_link .inner1200 .innerBox .select_type p{ width: 49%;}
#bukken_link .inner1200 .innerBox p a b { display: flex; justify-content: flex-start; align-items: center; padding-left: 5%;}
#bukken_link .inner1200 .innerBox p.long a b { flex-direction: column; padding-right: 0; justify-content: center;}
#bukken_link .inner1200 .innerBox p a b .sp-area{ display: block; font-size: 12px; margin: 0 5px; font-weight: bold;}
}
@media screen and (max-width: 680px) {
#bukken_link .inner1200 .innerBox .ttl-area{ flex-direction: column; width: 100%; box-shadow: none;}
#bukken_link .inner1200 .innerBox .ttl-area h2{ width: 100%; padding: 0 15px; height: auto; margin: 20px 0 0px; justify-content: flex-start; align-items: baseline;}
#bukken_link .inner1200 .innerBox .ttl-area h2::after{ display: none;}
#bukken_link .inner1200 .innerBox .ttl-area h2 b .sp-area{ display: block; font-size: 12px; padding-left: 5px;}
/**/
#bukken_link .inner1200 .innerBox p a img{ width: 30px;}
#bukken_link .inner1200 .innerBox p.long a img{ width:40px; margin-bottom: 10px;}
#bukken_link .inner1200 .innerBox .select_type p.long a img{ width:30px;}
#bukken_link .inner1200 .innerBox .select_type p.long a{ height: 120px;}
/*tab*/
#bukken_link .inner1200 .innerBox .ttl-area ul { width: 100%; margin:0; padding: 10px 10px 0;}
#bukken_link .inner1200 .innerBox .ttl-area ul li{ width: 19%; height: 50px; padding: 0; margin: 0 0.5%;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span{ width: 100%; justify-content: center; padding:0 20px; border-radius: 4px; }
#bukken_link .inner1200 .innerBox .ttl-area ul li span, 
#bukken_link .inner1200 .innerBox .ttl-area ul li span:hover{ border: solid 1px #ccc;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span::before, 
#bukken_link .inner1200 .innerBox .ttl-area ul li span:hover::before{ display: none;}
#bukken_link .inner1200 .innerBox .ttl-area ul li span::before{ position: absolute; left: 50%; top: 50%; margin: -3px 0 0 -30px;}
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span::before, 
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span:hover::before{ display: block;}
#bukken_link .inner1200 .innerBox .ttl-area ul li.view span{ background: var(--color2); border: solid 1px var(--color2);} 
/**/
#bukken_link .inner1200 .innerBox .tabBox .bukken_type p{ width: 100%;}
#bukken_link .inner1200 .innerBox .tabBox .bukken_type .long{ width: 49%;}
/**/
#bukken_link .inner1200 .sell_links{ margin-top: 15px;}
#bukken_link .inner1200 .sell_links .bukken_type p a span br{ display: block;}
}
/*-=========================
movie-section 新着物件
===========================-*/
#movie-section{ padding: 20px 2% ;}
#movie-section .inner1200{ padding: 30px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.1); border-radius: 10px;}
#movie-section .inner1200 .movie-wrap { width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: space-between;}
#movie-section .inner1200 .movie-wrap .movieBox{ width: 46%; height: auto; aspect-ratio: 16 / 9; background: #aaa; border-radius: 4px; overflow: hidden; position: relative;}
#movie-section .inner1200 .movie-wrap .movieBox iframe { width: 100% !important; height: 100% !important; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}

#movie-section .inner1200 .movie-wrap .txtBox{ width: 46%; display: flex; flex-direction: column;}
#movie-section .inner1200 .movie-wrap .txtBox > *{ width: 100%; display: flex;}
#movie-section .inner1200 .movie-wrap .txtBox dt{ flex-direction: row; align-items: center; margin-bottom: 10px;}
#movie-section .inner1200 .movie-wrap .txtBox dt b{ margin-right: 10px; padding: 4px 10px; border-radius: 50px; background: var(--color1); color: #fff; font-size: 14px;}
#movie-section .inner1200 .movie-wrap .txtBox dt span{ font-size: 16px; color: var(--color1); font-weight: bold;}

#movie-section .inner1200 .movie-wrap .txtBox dd{ flex-direction: column; padding: 0 5px;}
#movie-section .inner1200 .movie-wrap .txtBox dd span{ font-size: 14px; line-height: 1.8em; color: #555; display: flex; justify-content: flex-start; margin: 5px 0;}
#movie-section .inner1200 .movie-wrap .txtBox dd span a{ font-size: 12px; background: #eee; border: solid 1px #ddd; color: #777; border-radius: 4px; padding: 0 10px;}
#movie-section .inner1200 .movie-wrap .txtBox dd span a:hover{ background: var(--color2); border: solid 1px #000; color: #000;}
@media screen and (max-width: 800px) {
#movie-section .inner1200{ padding: 30px 20px;}
#movie-section .inner1200 .movie-wrap { flex-direction: column; justify-content: flex-start; align-items: center;}
#movie-section .inner1200 .movie-wrap .movieBox { width: 100%;}
#movie-section .inner1200 .movie-wrap .txtBox{ width: 100%; margin: 15px 0 20px;}
}


/*======================
流れ一覧：家探しの強み
======================*/
#flow-point{ margin: 70px 0;}
#flow-point h2{ width: 100%; display: flex; align-items: flex-start; justify-content:center; margin-bottom: 40px;}
#flow-point h2 span{ width: 100%; text-align: center; display: block; padding: 10px 20px; background: var(--color1); color: #fff; font-size: 16px; border-radius: 3px;}
#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: 50px 0 0; border: solid 2px var(--color1); border-radius: 8px; overflow: hidden;}
#flow-point h2{ margin-bottom: 10px;}
#flow-point h2 span{ height: 50px; display: flex; justify-content: center; align-items: center; font-size: 3.6vw; padding: 0; margin-bottom: 0; border-radius: 0;}
#flow-point .point-list{ padding:0 15px; border-radius: 0px;}
#flow-point .strengthsBox{ flex-direction: column; padding:30px 0 50px;}
#flow-point .strengthsBox .ttl{ width: 100%; padding-right: 20px;}
#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;}
}




















/*-=========================
new-bukken 新着物件
===========================-*/
#new-bukken{ padding: 50px 0 20px;}
#new-bukken .inner1200 { }
#new-bukken .inner1200 .new-bukken-wrap { padding: 10px 10px 0; display: flex; justify-content: flex-start; position: relative;}
#new-bukken .no_meaning { width: 1px; height: 1px; display: block; opacity: 0;}
/**/
#new-bukken .inner1200 .new-bukken_ttl{ height: 60px; display: flex; position: sticky; top:0px; border-bottom: solid 1px #555;}
#new-bukken .inner1200 .new-bukken_ttl#new-ms::after{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; background: #f3f3f3; content: "";}
#new-bukken .inner1200 .new-bukken_ttl#new-ms{ width: 100%; left: 0; z-index: 1; }
#new-bukken .inner1200 .new-bukken_ttl#new-shinchiku{ width: 75%; left: 28%; z-index: 3;}
#new-bukken .inner1200 .new-bukken_ttl#new-chuko{ width: 44%; left: 50%; z-index: 5; margin-top: -1px;}
#new-bukken .inner1200 .new-bukken_ttl#new-land{ width: 25%; left: 75%; z-index: 8;}
#new-bukken .inner1200 .new-bukken_ttl h2{ width: 30vw; margin-top: 10px; display: flex; justify-content: flex-start; font-weight: bold; font-size: 14px; position: relative; z-index: 10;}
#new-bukken .inner1200 .new-bukken_ttl h2 a{ width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding-left: 60px; border: solid 1px #555; border-bottom: none; border-radius: 8px 8px 0 0; background: #fff; }
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a .txt{ color: #222;}
#new-bukken .inner1200 .new-bukken_ttl h2 a:hover, 
#new-bukken .inner1200 .new-bukken_ttl h2 a:hover .txt{ color:#555;}
#new-bukken .inner1200 .new-bukken_ttl h2 span.ribon{ width: 30px; height: 90%; display: block; background: #e0e0e0; position: absolute; left: 20px; top: 1px; pointer-events: none;}
#new-bukken .inner1200 .new-bukken_ttl h2 a:hover span.ribon{ background: var(--color2) !important;}
#new-bukken .inner1200 .new-bukken_ttl h2 span.ribon::before{ width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #fff; content: ""; position: absolute; left: 0; bottom: -1px;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a{ background: #eee !important; color: #555;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a .txt{ color: #555;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 span.ribon{ background: #777;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a span.ribon{ background: #ddd !important;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 span.ribon::before{ border-bottom: 10px solid #eee ;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a:hover span.ribon{ background: var(--color2) !important;}
#new-bukken .inner1200 .new-bukken_ttl.now h2 span.ribon{ background: var(--color2);}
#new-bukken .inner1200 .new-bukken_ttl.now h2 a{ background: var(--color2) !important; color: #000;}
#new-bukken .inner1200 .new-bukken_ttl.now h2 a .txt{ color: #000;}
#new-bukken .inner1200 .new-bukken_ttl.now h2 a span.ribon, 
#new-bukken .inner1200 .new-bukken_ttl.now h2 a:hover span.ribon{ background: #111 !important;}
#new-bukken .inner1200 .new-bukken_ttl.now h2 span.ribon::before{ border-bottom: 10px solid var(--color2) ;}
/*------------------*/
@media screen and (max-width: 1150px) {
#new-bukken .inner1200 .new-bukken_ttl h2 a, 
#new-bukken .inner1200 .new-bukken_ttl h2 a span{ font-size: 12px;}
#new-bukken .inner1200 .new-bukken_ttl h2 a{ padding-left: 40px;}
#new-bukken .inner1200 .new-bukken_ttl h2 span.ribon{ width: 20px; height: 84%; left: 12px;}
#new-bukken .inner1200 .new-bukken_ttl h2 span.ribon::before{ border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;}
}
@media screen and (max-width: 700px) {
#new-bukken .inner1200 .new-bukken_ttl{ height: 40px;}
#new-bukken .inner1200 .new-bukken_ttl h2 { height: 100%; width: 100%; margin-top: 0;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 , 
#new-bukken .inner1200 .new-bukken_ttl.now h2 { width: 30vw;}
#new-bukken .inner1200 .new-bukken_ttl h2 *{ transition: 0s !important;}
#new-bukken .inner1200 .new-bukken_ttl h2 a{ font-size: 18px; border-radius:0; flex-direction: row; justify-content: flex-start; align-items: center; padding-left: 28px;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a, 
#new-bukken .inner1200 .new-bukken_ttl.now h2 a{ font-size: 12px; flex-direction: column; justify-content: center; align-items: flex-start;}
#new-bukken .inner1200 .new-bukken_ttl h2 a .txt{ font-size: 16px; color: #777; line-height: 1em;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a .txt, 
#new-bukken .inner1200 .new-bukken_ttl.now h2 a .txt{ font-size: 8px;}
#new-bukken .inner1200 .new-bukken_ttl h2 span.ribon{width:14px; height: 80%; left: 3px;}
#new-bukken .inner1200 .new-bukken_ttl h2 span.ribon::before{ border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff;}
/**/
#new-bukken .inner1200 .new-bukken_ttl h2 a{ border: none;}
#new-bukken .inner1200 .new-bukken_ttl.fin h2 a, 
#new-bukken .inner1200 .new-bukken_ttl.now h2 a{ border: solid 1px #555; border-bottom: none;}
#new-bukken .inner1200 .new-bukken_ttl{ border: none;}
#new-bukken .inner1200 .new-bukken_ttl.fin, 
#new-bukken .inner1200 .new-bukken_ttl.now{ border-bottom: solid 1px #555;}
/**/
#new-bukken .inner1200 .new-bukken_ttl#new-ms, 
#new-bukken .inner1200 .new-bukken_ttl#new-shinchiku, 
#new-bukken .inner1200 .new-bukken_ttl#new-chuko, 
#new-bukken .inner1200 .new-bukken_ttl#new-land{ width: 100%; left: 0; padding:0 10px; z-index: 10;}
#new-bukken .inner1200 .new-bukken_ttl.fin#new-ms, 
#new-bukken .inner1200 .new-bukken_ttl.now#new-ms{ left: 0%; padding-left: 0; z-index: 100;}
#new-bukken .inner1200 .new-bukken_ttl.fin#new-shinchiku, 
#new-bukken .inner1200 .new-bukken_ttl.now#new-shinchiku{ width: 75%; left: 28%; padding-left: 0; z-index: 110;}
#new-bukken .inner1200 .new-bukken_ttl.fin#new-chuko, 
#new-bukken .inner1200 .new-bukken_ttl.now#new-chuko{ width: 44%; left: 50%; padding-left: 0; z-index: 120;}
#new-bukken .inner1200 .new-bukken_ttl.fin#new-land, 
#new-bukken .inner1200 .new-bukken_ttl.now#new-land{ width: 25%; left: 75%; padding-left: 0; z-index: 130;}
/**/
#new-bukken .inner1200 .new-bukken_ttl#new-ms::after{ display: none;}
#new-bukken .inner1200 .new-bukken_ttl.fin#new-ms::after, 
#new-bukken .inner1200 .new-bukken_ttl.now#new-ms::after{ display: block;}
}
/*------------------*/
#new-bukken .inner1200 .list-new-bukken{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; padding: 20px 0; border: solid 1px #555; background: #fff; border-radius: 0 0 6px 6px; margin-top: -1px;}
#new-bukken .inner1200 .list-new-bukken:last-child{ border-radius: 0;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item{ width: 22%; margin: 8px 1.5%; display: flex;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a{ width: 100%; height: 100%; display: flex; flex-direction: column; border-radius:3px; border: solid 1px #fff; overflow: hidden;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .image{ width: 100%; height: auto;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea{ width: 100%; display: flex; padding: 10px; flex-direction: column;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea > *{ display: flex;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea h3{ min-height: 55px; font-size: 14px; line-height: 1.3em; align-items: center; font-weight: 500;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea h4{ display: flex; align-items: baseline; font-size: 12px; line-height: 1em;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea h4 span{ font-size: 18px; letter-spacing: 1px; padding-right: 2px;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl{ display: flex; flex-direction: row; padding: 4px 0 5px;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl dt{ display: block; font-size: 10px; padding-right: 5px; margin-right: 10px; border-right: solid 1px #ddd; transition: 0.3s;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl dd{ display: flex; flex-wrap: wrap;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl dd span{ display: block; line-height: 1.2em; font-size: 12px; letter-spacing: 0;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea p{ font-size: 11px; line-height: 1.2em; display: block; min-height: 30px;}
@media screen and (min-width: 700px) {
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.2); border: solid 1px #111; background: var(--color2);}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a:hover .txtArea dl dt{ border-right: solid 1px #999;}
}
@media screen and (max-width: 950px) {
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item{ width: 29%; margin: 15px 2%;}
}
@media screen and (max-width: 700px) {
#new-bukken .inner1200 .list-new-bukken{ margin-bottom: 40px; position: relative; border-top: none;}
#new-bukken .inner1200 .list-new-bukken::after{ width: 100%; height: 40px; position: absolute; left: -1px; top: -40px; content: ""; background: #fff; border: solid 1px #555; border-radius: 4px 4px 0; z-index: -1;}
/**/
#new-bukken .inner1200 .list-new-bukken{ padding-top: 0;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item{ width: 46%; margin: 15px 2%;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a{ box-shadow: 0 8px 18px rgba(0,0,0,.2); border: solid 1px #ccc; border-radius: 6px;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea h3{ min-height: 0; font-size: 14px; padding: 2px 0 10px;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea h4{ font-size: 13px; margin-bottom: 2px;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl{ flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 2px;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl dt{ width: auto; background: #ddd; display: block; font-size: 10px; padding-right: 5px; margin-right: 10px; border-right: solid 1px #ddd; transition: 0;}
#new-bukken .inner1200 .list-new-bukken .slider-new-bukken .item a .txtArea dl dd span{ padding-right: 10px;}
}
/*-=========================
new-bukken 新着物件
===========================-*/
#new-bukken .inner1200 .area-links{ width: calc(100% - 20px); margin: 0 10px 40px; display: flex; flex-direction: column; background: #fff; border: solid 1px #555; border-top: none; padding:40px 20px; border-radius: 0 0 12px 12px;}
#new-bukken .inner1200 .area-links .area-links-ttl{ width: 100%; display: flex; justify-content: flex-start; margin-bottom: 20px;}
#new-bukken .inner1200 .area-links .area-links-ttl b{ display: inline-block; font-size: 14px; padding: 4px; position: relative;}
#new-bukken .inner1200 .area-links .area-links-ttl b::after{ width: 0; height: 2px; background: #111; border-radius: 2px; transition: 1.4s; content: ""; position: absolute; left: 0; bottom: 0;}
#new-bukken .inner1200 .area-links .area-links-ttl.setView b::after{ width: 100%;}
/**/
#new-bukken .inner1200 .area-links .areaLists{ width: 100%; display: flex; flex-direction: row; padding: 15px 0 5px; border-top: dashed 1px #ccc;}
#new-bukken .inner1200 .area-links .areaLists.noline{ border-top:none;}
#new-bukken .inner1200 .area-links .areaLists .ttl{ min-width: 100px; font-weight: bold; font-size: 12px; line-height: 26px;}
#new-bukken .inner1200 .area-links .areaLists ul{ flex: 1; display: flex; flex-wrap: wrap;}
#new-bukken .inner1200 .area-links .areaLists ul li{ display: block; margin: 0 6px 6px 0;}
#new-bukken .inner1200 .area-links .areaLists ul li a{ display: flex; align-items: center; justify-content: center; background: #fff; border: solid 1px #ccc; border-radius: 3px; padding: 4px 6px;}
#new-bukken .inner1200 .area-links .areaLists ul li a:hover{ background: var(--color2); border: solid 1px #000; color: #000;}
@media screen and (max-width: 700px) {
#new-bukken .inner1200 .area-links{ border: solid 1px #555; border-radius: 20px; padding:25px 15px;}
#new-bukken .inner1200 .area-links .area-links-ttl{ justify-content: center; margin-bottom: 10px;}
#new-bukken .inner1200 .area-links .area-links-ttl b{ font-size: 20px; padding-bottom: 15px;}
#new-bukken .inner1200 .area-links .area-links-ttl b::after{ left: 50%; height: 4px; border-radius: 4px;}
#new-bukken .inner1200 .area-links .area-links-ttl.setView b::after{ left: 0;}
}
@media screen and (max-width: 600px) {
#new-bukken{ padding: 50px 0 0;}
#new-bukken .inner1200 .area-links .area-links-ttl b{ font-size: 5.0vw;}
#new-bukken .inner1200 .area-links .areaLists{ flex-direction: column;}
#new-bukken .inner1200 .area-links .areaLists .ttl{ min-width: auto;}
#new-bukken .inner1200 .area-links .areaLists ul{ width: 100%; margin-bottom: 15px;}
#new-bukken .inner1200 .area-links .areaLists ul li { width: 25%; padding: 0 8px 8px 0; margin: 0;}
#new-bukken .inner1200 .area-links .areaLists ul li a{ height: 36px; border: solid 1px #555; padding:0; font-size: 2.8vw;}
#new-bukken .inner1200 .area-links .areaLists.syubetsu ul li{ width: 100%;}
#new-bukken .inner1200 .area-links .areaLists.syubetsu ul li a{ height: 50px; font-weight: bold; font-size: 4.0vw; justify-content: flex-start; padding-left: 20px;}
}

/*-----------------------------
sells_fukuya　家を売る
-------------------------*/
#sells_fukuya{}
#sells_fukuya .inner1200{ }
#sells_fukuya .inner1200 .wrap{ width: calc(100% - 20px); display: flex; flex-direction: row; padding: 20px 40px; border-radius: 12px; border: solid 1px #555; background: #fff; justify-content: space-between; align-items: center;}
#sells_fukuya .inner1200 .wrap .left{ width: 65%; display: flex; flex-direction: column;}
#sells_fukuya .inner1200 .wrap .left h2{ display: block; font-size: 20px; font-weight: bold; letter-spacing: 0.1em;}
#sells_fukuya .inner1200 .wrap .left h3 { display: flex;}
#sells_fukuya .inner1200 .wrap .left h3 b{ display: block; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; position: relative; padding-bottom: 10px; margin-bottom: 10px;}
#sells_fukuya .inner1200 .wrap .left h3 b::after{ width: 0; height: 4px; background: var(--color2); border-radius: 4px; transition: 1.4s; content: ""; position: absolute; left: 0; bottom: 0;}
#sells_fukuya .inner1200 .wrap .left h3.setView b::after{ width: 100%;}
#sells_fukuya .inner1200 .wrap .left .backImage{ height: 200px; margin: 20px 0 15px; background: url("../img/top/selles.jpg") 0 0 repeat-x; background-size: auto 100%; background-position: 0 0; animation: sellesTop 300.0s infinite; }
@keyframes sellesTop{
0%{ background-position: 0 0;}
100%{ background-position: 300% 0;}
}
#sells_fukuya .inner1200 .wrap .left p.txt{ font-size: 12px; color: #555;}
/**/
#sells_fukuya .inner1200 .wrap .right{ width: 30%; display: flex; flex-direction: column;}
#sells_fukuya .inner1200 .wrap .right h3{ display: flex; align-items: center; font-size: 14px; margin-bottom: 5px; font-weight: bold; letter-spacing: 0.1em;}
#sells_fukuya .inner1200 .wrap .right h3 img{ width: 20px; height: auto; margin-right: 10px;}
#sells_fukuya .inner1200 .wrap .right ul{ width: 100%; display: flex; flex-direction: column;}
#sells_fukuya .inner1200 .wrap .right ul li{ width: 100%; display: flex; margin: 2px 0;}
#sells_fukuya .inner1200 .wrap .right ul li a{ width: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 4px 5%; border-radius: 2px; border: dashed 1px #ccc; background: #fff; font-size: 12px;}
#sells_fukuya .inner1200 .wrap .right ul li a:hover{ border: solid 1px #111; background: var(--color2);}
#cursor div.actF .l1{ animation: sellesTop 1.2s ease-in infinite forwards; }
@media screen and (max-width: 950px) {
#sells_fukuya .inner1200 .wrap .right h3{ font-size: 13px; letter-spacing: 0;}
}
@media screen and (max-width: 900px) {
#sells_fukuya .inner1200 .wrap{ padding: 0px; overflow: hidden;}
#sells_fukuya .inner1200 .wrap .left{ width: 60%; padding: 20px;}
#sells_fukuya .inner1200 .wrap .right{ width: 35%; padding: 20px;}
}
@media screen and (max-width: 800px) {
#sells_fukuya .inner1200 .wrap{ flex-direction: column;}
#sells_fukuya .inner1200 .wrap .right h3{ margin-bottom: 0px; color: #fff;}
#sells_fukuya .inner1200 .wrap .left h2{ padding: 10px;}
#sells_fukuya .inner1200 .wrap .right h3 img{ filter: invert(100%);}
#sells_fukuya .inner1200 .wrap .left h3 b::after{ background: var(--color1);}
#sells_fukuya .inner1200 .wrap .left p.txt{ font-size: 14px; margin-bottom: 20px;}
#sells_fukuya .inner1200 .wrap .left{ width: 100%; padding: 10px;}
#sells_fukuya .inner1200 .wrap .right{ width: 100%; padding: 10px; background: var(--color1); border-top: solid 1px #555;}
#sells_fukuya .inner1200 .wrap .right ul{ flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin: 10px 0;}
#sells_fukuya .inner1200 .wrap .right ul li{ width: 32.5%; margin: 4px 0;}
#sells_fukuya .inner1200 .wrap .right ul li a{ height: 40px; border: solid 1px #555; font-weight: bold; background: #fff;}
}
@media screen and (max-width: 600px) {
#sells_fukuya .inner1200 .wrap .left h2{ text-align: center; font-size:5.0vw; padding: 0;}
#sells_fukuya .inner1200 .wrap .right ul li{ width: 49%; margin: 4px 0;}
#sells_fukuya .inner1200 .wrap .right ul li a{ height: 50px;}
}

/*-----------------------------
oyakudachi　お役立ち情報
-------------------------*/
#oyakudachi{ margin: 50px 0;}
#oyakudachi .inner1200{ padding: 0 10px; display: flex; flex-direction: row; justify-content: space-between;}
#oyakudachi .inner1200 .itemBox{ width:49%; display: flex; flex-direction: column; background: #fff; border: solid 1px #555; border-radius: 12px; padding: 20px;}
#oyakudachi .inner1200 .itemBox h3.tit{ width: 100%; display: flex; justify-content: center; align-items: baseline; font-size: 16px; font-weight: 500; padding: 0px 0 15px; border-bottom: dashed 1px #ddd;}
#oyakudachi .inner1200 .itemBox h3.tit b{ font-size: 18px; position: relative; padding:0 3px;}
#oyakudachi .inner1200 .itemBox h3.tit b::after{ width: 0; height: 100%; background: #fff; border-radius: 1px; transition: 1.4s; content: ""; position: absolute; left: 0; top: 1px; mix-blend-mode: difference;}
#oyakudachi .inner1200 .itemBox h3.tit.setView b::after{ width: 100%;}
#oyakudachi .inner1200 .itemBox .itemList{ width: 100%; display: flex; flex-direction: column; padding: 5px 15px 0;}
#oyakudachi .inner1200 .itemBox .itemList a{ width: 100%; display: flex; align-items: center; padding: 10px; margin: 2px 0; background: #fff; border-radius: 3px; z-index: 1; position: relative; border: solid 2px #fff;}
#oyakudachi .inner1200 .itemBox .itemList a::before{ content: "▼"; font-size: 9px; width: 21px; height: 21px; display: flex; justify-content: center; align-items: center; border-radius: 100%; border: solid 2px var(--color2); color: var(--color2); position: absolute; right: 30px; top: 50%; margin-top: -10px; pointer-events: none; transition: 0.6s; opacity: 0; transform:rotate(-90deg); background:var(--color2);}
#oyakudachi .inner1200 .itemBox .itemList a .img{ width:40px; height: 40px; display: block; background: #aaa; border-radius: 2px; overflow:hidden; border: solid 1px #ccc;}
#oyakudachi .inner1200 .itemBox .itemList a .txt{ padding-left: 10px; display: flex; flex-direction: column;}
#oyakudachi .inner1200 .itemBox .itemList a .txt h4{ font-size: 14px; font-weight: bold;}
#oyakudachi .inner1200 .itemBox .itemList a .txt p{ font-size: 11px; color: #555;}
@media screen and (min-width: 800px) {
#oyakudachi .inner1200 .itemBox .itemList a:hover::before{ opacity: 1; right: 10px; background:#fff;}
#oyakudachi .inner1200 .itemBox .itemList a:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 10; border: solid 2px var(--color2);}
}
/*以下*/
@media screen and (max-width: 800px) {
#oyakudachi .inner1200 .itemBox{ padding: 20px 2px;}
#oyakudachi .inner1200 .itemBox .itemList{ width: 100%; display: flex; flex-direction: column; padding: 0;}
}
@media screen and (max-width: 700px) {
#oyakudachi .inner1200 .itemBox{ padding: 2 5px;}
#oyakudachi .inner1200{ width: calc(100% - 20px); margin: 0 10px; flex-direction: column;}
#oyakudachi .inner1200 .itemBox{ width:100%; padding: 0; overflow: hidden;}
#oyakudachi .inner1200 .itemBox.buyBox{ border-radius: 12px 12px 0 0; border-bottom: none; }
#oyakudachi .inner1200 .itemBox.sellBox{ border-radius: 0 0 12px 12px; }
#oyakudachi .inner1200 .itemBox h3.tit{ padding: 15px 0; border-bottom: solid 1px #777; color: #fff;}
#oyakudachi .inner1200 .itemBox h3.tit b{ color: #000; z-index: 1000; position: relative; margin-right: 5px;}
#oyakudachi .inner1200 .itemBox h3.tit b::after{ mix-blend-mode:multiply; z-index: -1;}
#oyakudachi .inner1200 .itemBox.buyBox h3.tit{ background: #888; }
#oyakudachi .inner1200 .itemBox.sellBox h3.tit{ background: #aaa; }
#oyakudachi .inner1200 .itemBox.buyBox h3.tit b::after{ background: var(--color2);}
#oyakudachi .inner1200 .itemBox.sellBox h3.tit b::after{ background: var(--color4_1);}
/**/
#oyakudachi .inner1200 .itemBox .itemList{  padding:10px 3% 20px;}
#oyakudachi .inner1200 .itemBox .itemList a{ border-bottom: dashed 1px #ddd;}
#oyakudachi .inner1200 .itemBox .itemList a:last-child{ border-bottom: none;}
}


/*-----------------------------
news　ニュース
-------------------------*/
#news{ padding-bottom: 80px;}
#news .inner1200 { padding: 0 30px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
#news .inner1200 .news{ width: calc(100% - 250px); margin-right: 30px; display: flex; flex-direction: column;}
#news .inner1200 .news p{ width: 100%; display: flex; justify-content: space-between; padding:10px; }
#news .inner1200 .news p span{ font-size: 14px;}
#news .inner1200 .news p a{ display: flex; align-items: center; line-height: 1em; padding: 2px 5px; border: solid 1px #aaa; border-radius: 3px; text-decoration: none; color: #555; font-size: 10px; letter-spacing: 0;}
#news .inner1200 .news div{ width: 100%; height: 310px; display: block; border-top: solid 1px #555; border-bottom: solid 1px #555; padding: 5px 0;}
#news .inner1200 .news div ul{ width: 100%; max-height: 280px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 10px; margin: 10px 0;}
#news .inner1200 .news div ul li{ width: 100%; display: block;}
#news .inner1200 .news div ul li a{ width: 100%; display: flex; align-items: flex-start; padding: 8px 10px;}
#news .inner1200 .news div ul li a .data{ font-size: 13px; padding-right: 15px; white-space: nowrap; letter-spacing: 0; color: #888;}
#news .inner1200 .news div ul li a .txt{ font-size: 13px; display: block;}
/**/
#news .inner1200 .infoArea{ width: 250px; display: flex; flex-direction: column;}
#news .inner1200 .infoArea div{ width: 100%; display: flex; flex-direction: column; margin-top: 35px;}
#news .inner1200 .infoArea div a{ width: 100%; min-height: 70px; display: flex; justify-content: center; flex-direction: column; padding: 5px 10px; margin: 5px 0; border: dashed 1px #aaa;}
#news .inner1200 .infoArea div a h4{ font-size: 13px; font-weight: 500; padding-bottom: 5px;}
#news .inner1200 .infoArea div a p{ font-size: 10px; color: #555; line-height: 1.2em;}
@media screen and (min-width: 700px) {
#news .inner1200 .news p a:hover{ background: var(--color2); color: #111; border: solid 1px #111; border-radius: 30px;}
#news .inner1200 .news div ul li a:hover{ background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1);}
#news .inner1200 .news div ul li a:hover .data{ color: #000; text-decoration: underline;}
#news .inner1200 .infoArea div a:hover{ background: #fff; border: solid 1px var(--color2); box-shadow: 0 0 0 2px var(--color2) inset;}
}
@media screen and (max-width: 700px) {
#news .inner1200 { padding: 0 20px; flex-direction: column;}
#news .inner1200 .news{ width: 100%;}
/**/
#news .inner1200 .infoArea{ width: 100%; flex-direction: row; flex-wrap: wrap;}
#news .inner1200 .infoArea div{ width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-top: 30px;}
#news .inner1200 .infoArea div a{ width: 48%; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; margin: 15px 0;  border: solid 1px #555; border-radius: 4px; overflow: hidden;}
#news .inner1200 .infoArea div a h4{ width: 100%; height: 50%; display: flex; font-size: 13px; line-height: 1.2em; font-weight: 500; padding:15px 10px; background: #fff;}
#news .inner1200 .infoArea div a p{ font-size: 10px; color: #555; line-height: 1.2em; padding: 10px; background: var(--color1); color: #fff; margin: 0; border-bottom: solid 2px var(--color1);}

}