@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html{ -webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%;}
html,body{ max-width:100%; width: 100vw !important;}
body,main { overflow-y: auto; overflow-x: visible !important;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; outline:0; list-style:none; vertical-align:middle; background:transparent;}
img {border-style: none;} 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul,ul,li{ list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
*{box-sizing: border-box;}
@media screen and (max-width: 320px){html, body { min-width:320px;}}
::selection { background: rgba(0,0,0,.1); color: #aaa;}
::-moz-selection { background: rgba(0,0,0,.1); color: #aaa;}
/*===================
 common
=====================*/
.mt0{ margin-top: 0px !important;}
.mt5{ margin-top: 5px !important;}
.mt10{ margin-top: 10px !important;}
.mt20{ margin-top: 20px !important;}
.mt30{ margin-top: 30px !important;}
.mt40{ margin-top: 40px !important;}
.mt50{ margin-top: 50px !important;}
.mt60{ margin-top: 60px !important;}
.mt70{ margin-top: 70px !important;}
.mt80{ margin-top: 80px !important;}
.mt90{ margin-top: 90px !important;}
.mt100{ margin-top: 100px !important;}
.mb0{ margin-bottom: 0px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb30{ margin-bottom: 30px !important;}
.mb40{ margin-bottom: 40px !important;}
.mb50{ margin-bottom: 50px !important;}
.mb60{ margin-bottom: 60px !important;}
.mb70{ margin-bottom: 70px !important;}
.mb80{ margin-bottom: 80px !important;}
.mb90{ margin-bottom: 90px !important;}
.mb100{ margin-bottom: 100px !important;}

.mr5{ margin-right: 5px;}
.mr10{ margin-right: 10px;}
.mr15{ margin-right: 15px;}
.mr20{ margin-right: 20px;}
.mr25{ margin-right: 25px;}
.mr30{ margin-right: 30px;}

.m15{ margin-left: 5px;}
.m110{ margin-left: 10px;}
.m115{ margin-left: 15px;}
.m120{ margin-left: 20px;}
.m125{ margin-left: 25px;}
.m130{ margin-left: 30px;}


/*===================
 LINK
=====================*/
a, a span, a img { -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none;}
a.link{ color: #019fe7; text-decoration: underline;}
a:hover { opacity:1; filter: alpha(opacity=100);}
@media screen and (max-width: 760px) {
a, a span, a img, a *{ -webkit-transition: none !important; -moz-transition:  none !important; -o-transition: none !important; transition: none !important;}
}

/*- style -*/
/*a.a*/
#cursor div.cursor_a{ transform: scale(4,4); opacity: 0.6; background: rgba(0,0,0,.2); transition: 0.4s;}
a.an{}/* ● */
a.af{}/* 大きな● */
a.al{ position:relative; text-decoration: none;}/*下線　要調整*/
a.al:hover{ color: #111 !important;}
a.al::after{ width: 0px; height: 2px; position: absolute; left: 50%; bottom: 0; background: #000; content: ""; -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
a.al:hover::after{ width: 100%; left: 0;}
a.ab{ position:relative; text-decoration: underline;}/*色と背景*/
a.ab:hover{ color: #fff !important; text-decoration: none; background: #222;}
/*- link -*/
a.link{ padding: 0px 60px 0px 10px; position: relative; display:inline-block; margin-top: 10px; line-height: 40px; text-decoration: none; color: #777; letter-spacing: 3px; transition:0.3s ease-out; box-shadow: 0 0 0 0 #ddd inset; z-index: 10;}
a.link span{ color: #777;}
a.link::after{ content: "→"; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; position: absolute; right: 25px; top: 5px; background: #ccc; color: #fff; transition:0.3s ease-out;}
a.link::before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0;}
a.link:hover::before{ opacity: 1;}
a.link:hover::after{ right: 10px; color: #999; background: #fff;}
a.link:hover, a.link:hover span{ color: #fff;}

/*btn*/
a.town_name, 
a.search_bukken { background:#eee; color: #aaa; pointer-events: none;}
.all_inquire_on a.search_bukken{ background:var(--color5); color: #fff; border: solid 2px var(--color5); pointer-events: all;}
.all_inquire_on a.town_name{ background:var(--color2); color: #000; border: solid 2px var(--color2); pointer-events: all;}
a.page_back{ background:#fff; color: #666; border: solid 2px #aaa; pointer-events: all; pointer-events: all;}
a.contact_form{ background: var(--color4); color: #fff;}

@media screen and (min-width: 700.01px) {
.all_inquire_on a.search_bukken:hover { background:#fff; color: var(--color5);}
.all_inquire_on a.town_name:hover { background:#fff; color: var(--color3); border: solid 2px var(--color3);}
a.page_back:hover { background:#fff; color: var(--color1); border: solid 2px var(--color1); pointer-events: all;}
a.contact_form:hover{ background: var(--color4_2); color: #fff;}

}


/*===================
 NONE
=====================*/
.pc{display: block;}
.sp{ display: none;}
@media screen and (max-width: 600px) {
.pc{display: none;}
.sp{ display: block;}
}
.touch-action{touch-action:none; pointer-events: none;}

/*===================
 FONT
=====================*/
*{ font-family:'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; font-weight: 400; color: #000;}
h1,h2,h3,h4,h5,h6 { font-size:18px; line-height:1.4em;}
p,li,dt,dl,span,td { font-size:14px; line-height:1.4em; letter-spacing: 0.1em;}
.b, b{font-weight: bold;}
@media screen and (max-width: 600px) {p,li,dt,dl,span,td { line-height:1.6em; font-weight: 400;}}
.eng{ font-family: "Jost", sans-serif;}
/*=====================================
	CONTENTS
=======================================*/
html, body { max-width: 100%; background: #f3f3f3;}
main{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x:hidden; overflow-y:visible; z-index: 1; position: relative;}
.section{ width: 100%; display: flex; flex-direction: column; align-items: center; position: relative;}
.inner1200, 
.inner1100, 
.inner1000, 
.inner900, 
.inner800, 
.inner700{ width:100%; display: flex; flex-direction: column; justify-content: flex-start; align-items:center;}
.inner1200{ max-width: 1200px;}
.inner1100{ max-width: 1100px;}
.inner1000{ max-width: 1000px;}
.inner900{ max-width: 900px;}
.inner800{ max-width: 800px;}
.inner700{ max-width: 700px;}
.wrap{ width: 100%; display: flex; flex-direction: column; align-items: center;}
.row{ flex-direction: row !important;}
.row-reverse{ flex-direction: row-reverse;}
.column{ flex-direction: column !important;}
.column-reverse{ flex-direction: column-reverse !important;}
img{ max-width: 100%; width: 100%; height: auto;}
.row-start{ flex-direction: row !important; justify-content: flex-start !important;}
.row-end{ flex-direction: row !important; justify-content: flex-end !important;}

@media screen and (min-width: 800px) {
body{overflow-x:hidden; overflow-y:visible;}
}
/*===================
 common
=====================*/
.mt5{ margin-top: 5px;}
.mt10{ margin-top: 10px;}
.mt15{ margin-top: 15px;}
.mt20{ margin-top: 20px;}
.mt25{ margin-top: 25px;}
.mt30{ margin-top: 30px;}
.mt35{ margin-top: 35px;}
.mt40{ margin-top: 40px;}
.mt45{ margin-top: 45px;}
.mt50{ margin-top: 50px;}
.mt55{ margin-top: 55px;}
.mt60{ margin-top: 60px;}
.mt65{ margin-top: 65px;}
.mt70{ margin-top: 70px;}
.mb5{ margin-bottom: 5px;}
.mb10{ margin-bottom: 10px;}
.mb15{ margin-bottom: 15px;}
.mb20{ margin-bottom: 20px;}
.mb25{ margin-bottom: 25px;}
.mb30{ margin-bottom: 30px;}
.mb35{ margin-bottom: 35px;}
.mb40{ margin-bottom: 40px;}
.mb45{ margin-bottom: 45px;}
.mb50{ margin-bottom: 50px;}
.mb55{ margin-bottom: 55px;}
.mb60{ margin-bottom: 60px;}
.mb65{ margin-bottom: 65px;}
.mb70{ margin-bottom: 70px;}

.color1{ color: var(--color1);}
.color2{ color: var(--color2);}
.color3{ color: var(--color3);}
.color4{ color: var(--color4);}
.color5{ color: var(--color5);}

/*==============================================
  cursor
================================================*/
@media screen and (max-width: 800px) {
#cursor, #cursor *{ display: none;}
}
#cursor{ opacity: 1; z-index: 10000001000000; position: fixed; pointer-events: none;}
#cursor div{ width:10px; height:10px; position: absolute; left: 0%; top: 0%; pointer-events: none;  border-radius: 100%; margin: -5px 0 0 -5px; background: #000;}
#cursor div::after{ width:10px; height:10px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: 30px 0 0 30px; pointer-events: none; content: ""; -webkit-transition:0.0s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; opacity: 0; mix-blend-mode: hard-light; }
#cursor div.act::after{ opacity: 1; width:60px; height:60px; margin: 0;}
#cursor div.act1::after{ opacity: 1; width:20px; height:20px; margin: 0;}
#cursor div.active{opacity: 0; background: none; margin: 0;}
#cursor div.act, 
#cursor div.act1, 
#cursor div.actF{ background: none}
#cursor.act{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; mix-blend-mode: multiply;}
#cursor.act1{ display: block; border-radius: 100%; margin: -10px 0 0 -10px; mix-blend-mode: hard-light;}
#cursor div.act .l1{ border: solid 1px #444; width: 60px; height: 60px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursorAct 1.2s ease-in infinite forwards; }
#cursor div.act1 .l1{ border: solid 1px #444; width: 20px; height: 20px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursorAct 1.2s ease-in infinite forwards; }
@keyframes cursorAct{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(1.4,1.4); opacity: 0;}
}
/* hover:円形 */
#cursor div.actF{ width: 90px !important; height: 90px !important; background: none;}
#cursor.actF{ display: block; border-radius: 100%; margin: -45px 0 0 -45px; mix-blend-mode:multiply;}
#cursor div.actF::after{ opacity: 0.8; width: 90px; height: 90px; margin: 0; margin: -45px 0 0 -45px; mix-blend-mode: hard-light;}
#cursor div.actF .l1{ border: solid 1px #fff; width: 90px; height: 90px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursoractF 1.2s ease-in infinite forwards; }
@keyframes cursoractF{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(0.4,0.4); opacity: 0;}
}
/* hover:「」*/
#cursor div span{}
#cursor div span.l1::before, 
#cursor div span.l1::after, 
#cursor div span.l2::before, 
#cursor div span.l2::after, 
#cursor div span.l3::before, 
#cursor div span.l3::after,
#cursor div span.l4::before, 
#cursor div span.l4::after{-webkit-transition:0.2s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; width: 0px; height: 0px; position: absolute; content: ""; background: none;}
#cursor div span.l1::before, 
#cursor div span.l1::after{left: 0; top: 0;}
#cursor div span.l2::before, 
#cursor div span.l2::after{ right: 0; top: 0;}
#cursor div span.l3::before, 
#cursor div span.l3::after{ left: 0; bottom: 0;}
#cursor div span.l4::before, 
#cursor div span.l4::after{ right: 0; bottom: 0; }
/* アクティブ */
#cursor div.active span.l1::before, 
#cursor div.active span.l2::before, 
#cursor div.active span.l3::before, 
#cursor div.active span.l4::before{ width: 1px; height: 10px; position: absolute; background: #f5dfc6; opacity: 0.5;}
#cursor div.active span.l1::after, 
#cursor div.active span.l2::after, 
#cursor div.active span.l3::after, 
#cursor div.active span.l4::after{width: 10px; height: 1px; position: absolute; background: #f5dfc6; opacity: 0.5;}

/*================================
ヘッダー
===================================*/
header { width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 10000;}
header .inner1200{ flex-direction: row; align-items: center; justify-content: space-between;}
/* logo */
header .inner1200 h1{ width: 150px; display: flex; margin-left: 15px; position: relative;}
header .inner1200 h1 > span:nth-child(1){ width:auto; height: 36px; margin-right:12px; min-width: 36px;}
header .inner1200 h1 > span:nth-child(1) img{ width: 36px; height: 36px; min-width: 36px;}
header .inner1200 h1 > span:nth-child(2){ height: 36px; display: flex; flex-direction: column; justify-content: space-between;}
header .inner1200 h1 > span:nth-child(2) img{ width:auto; max-width: 96px; height: 22px;}
header .inner1200 h1 > span:nth-child(2) strong{ margin-top: 2px; font-weight: 600; display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; line-height: 1em; letter-spacing: 4px; white-space: nowrap;}
header .inner1200 h1 > span:nth-child(2) strong span{ display: flex; align-items: baseline; font-weight: 500; line-height: 1em; font-size: 11px; white-space: nowrap;}
header .inner1200 h1 > span:nth-child(2) strong span::before, 
header .inner1200 h1 > span:nth-child(2) strong span::after{ content: "ー";}
/*menu*/
header .inner1200 nav{ flex: 1; display: flex; justify-content: flex-end; padding-right: 2%;}
header .inner1200 nav .logo{ display: none;}
header .inner1200 nav ul{ display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;}
header .inner1200 nav ul li{ display: block; margin: 0 7px; position: relative; z-index: 1000;}
header .inner1200 nav ul li > a, 
header .inner1200 nav ul li > span { display: flex; height: 36px; align-items: center; justify-content: center; padding: 0 8px; font-size: 13px; font-weight: 600; white-space: nowrap;}
header .inner1200 nav ul li > span{ position: relative; z-index: 100;}
/**/
header .inner1200 nav ul li div{ display: none; position: absolute; left: 0; top: 100%; background: #fff; flex-direction: row; flex-wrap: nowrap; border-radius: 0 0 4px 4px; box-shadow: 0 12px 14px rgba(0,0,0,.4); z-index: 1;}
header .inner1200 nav ul li.over div{ display: flex;}
header .inner1200 nav ul li.right-li div{ left: auto; right: 0;}
header .inner1200 nav ul li div *{ }
header .inner1200 nav ul li div dl{ display: flex; flex-direction: column; padding: 20px;}
header .inner1200 nav ul li div dl dt{ width: 100%; font-size: 12px; font-weight: 700; margin-bottom: 10px; padding-bottom: 10px; border-bottom: solid 1px #aaa;}
header .inner1200 nav ul li div dl dt a{ font-size: 12px; font-weight: 500;}
header .inner1200 nav ul li div dl dd{ margin: 1px 0;}
header .inner1200 nav ul li div dl dd a{ display: block; padding:8px 8px 8px 16px; position: relative; border-radius: 3px;}
header .inner1200 nav ul li div dl.iconDl dd a{ padding:8px 8px 8px 32px;}
header .inner1200 nav ul li div dl dd a::before{ content: "・"; font-size: 8px; line-height: 8px; position: absolute; left: 3px; top: 14px; font-weight: bold;}
header .inner1200 nav ul li div dl.iconDl dd a::before{ content: ""; display: none;}
header .inner1200 nav ul li div dl dd a img{ width: 20px; height: auto; position: absolute; left: 6px; top: 50%; margin-top: -10px; pointer-events: none;}
header .inner1200 nav ul li div dl dd a span{ display: block; font-size: 12px; font-weight: 400; flex-wrap: nowrap; white-space: nowrap;}
@media screen and (max-width: 1050px) {
header .inner1200 nav ul li{ margin: 0px; }
}
@media screen and (max-width: 900px) {
header{ width: 100%; height: 50px; position: absolute; left: 0; top: 0;}
header .inner1200{ width: 100%; height: 50px; position: relative; z-index: 10000;}
header .inner1200 h1{ width:auto; transform: scale(0.7,0.7); margin-left: 5px; position: relative; left: 0; top: 0; z-index: 1;}
header .inner1200 nav{ width: 100%; height: 100%; padding: 0; position: fixed; display: flex; justify-content: center; align-items: flex-start; left: 0; top: 0; z-index: 150; bottom: 0; right: 0; background: rgba(230,230,230,1); overflow-y: auto; overflow-x: hidden;}
header .inner1200 nav{clip-path: ellipse(0% 0% at 100% 0%); transition: 0.6s; pointer-events: none; z-index: 5000;}
.bodyfixed header .inner1200 nav {clip-path: ellipse(3000px 3000px at 100% 0%); transition: 1.6s; pointer-events: all;}
header .inner1200 nav .logo{ display: flex; width: 94%; height: 40px; justify-content: center; align-items: flex-end; position: absolute; left: 3%; top: 0;}
header .inner1200 nav .logo span{ width: 100%; max-width: 540px; display: flex; justify-content: flex-start;}
header .inner1200 nav .logo span img{ height: 20px; width: auto; margin-right: 10px;}
/**/
header .inner1200 nav ul{ width: 100%; max-width: 600px; display: block; padding: 50px 2%;}
header .inner1200 nav ul li{ display: flex; flex-direction: column; align-items: flex-start; border-bottom: none; margin: 15px 0;}
header .inner1200 nav ul li > a{ width: 100%; height: 60px; display: flex; justify-content: flex-start; padding:15px 8px; font-size: 18px; font-weight: 400; white-space:auto; position: relative; background: #fff; border: solid 1px #999; border-radius:6px;}
header .inner1200 nav ul li > a::before{ width:9px; height:9px; content: ""; position: absolute; right: 10px; top: 50%; margin-top: -4.5px; transform: rotate(-45deg); border-right: solid 3px #bbb; border-bottom: solid 3px #bbb;}
header .inner1200 nav ul li > span{ width: auto; height: auto; display: block; font-size: 12px; font-weight: bold; margin: 0; padding: 2px 10px; border-radius: 0 15px 0 0; background:#222; color: #fff;}
header .inner1200 nav ul li div{ display: flex; flex-direction: column; position: static; left: auto; top: auto; background: none; flex-wrap: nowrap; border-radius:0 4px 4px 4px; box-shadow: none; padding:10px 5px; background:none; border: solid 1px #999;}
header .inner1200 nav ul li div dl{ flex-direction: row; flex-wrap: wrap; padding: 0; margin: 0px 0 25px;}
header .inner1200 nav ul li div dl dt{ font-size: 16px; font-weight: 200; margin:0px; padding:0px 10px; border-bottom: none;}
header .inner1200 nav ul li div dl dt a{ font-size: 12px; font-weight: 500;}
header .inner1200 nav ul li div dl dd{ width: 50%; margin: 0; padding: 5px;}
header .inner1200 nav ul li div dl dd a{ height: 100%; min-height: 44px; border: solid 1px #aaa;  display: flex; align-items: center; justify-content: flex-start; padding:8px 14px 8px 5px; position: relative; border-radius: 3px; position: relative; background: #fff;}
header .inner1200 nav ul li div dl.iconDl dd a{ padding:8px 8px 8px 32px;}
header .inner1200 nav ul li div dl dd a::before{ width:7px; height:7px; content: ""; position: absolute; right: 5px; left: auto; top: 50%; margin-top: -3.5px; transform: rotate(-45deg); border-right: solid 3px #bbb; border-bottom: solid 3px #bbb;}
header .inner1200 nav ul li div dl.iconDl dd a::before{ content: ""; display: none;}
header .inner1200 nav ul li div dl dd a span{ font-size: 13px; white-space: wrap; line-height: 1.1em; letter-spacing: 0;}
}
@media screen and (max-width: 700px) {
header .inner1200 nav ul li > a{border: none; border-radius:6px;}
header .inner1200 nav ul li div{ border-radius:0 5px 5px 5px; padding:15px 5px; background: #fff; border: none;}
}
/*900以上の場合は以下*/
@media screen and (min-width: 900.1px) {
header .inner1200 nav ul li.over span::before{ width:100%; height: 100%; position: absolute; left: 0; bottom: 0; background: #fff; border-radius: 4px 4px 0 0; content: ""; z-index: -1;}
header .inner1200 nav ul li > a:hover{ background: var(--color2); border-radius: 5px;}
header .inner1200 nav ul li div dl dd a:hover{ background: var(--color2);}
header .inner1200 nav ul li div dl dt a:hover{ background: var(--color2);}
}

/*================================
menuBtn
===============================*/
@media screen and (min-width: 900.1px) {
#menuBtn{ display: none; pointer-events: none;}
}
@media screen and (max-width: 900px) {
#menuBtn{ width: 50px; height: 50px; position: fixed; right: 0; top: 0; z-index: 100000; cursor: pointer;}
#menuBtn, 
#menuBtn *{ box-sizing: border-box;}
#menuBtn::after{ width: 70px; height: 70px; content: ""; border-radius: 100%; position: fixed; right: -10px; top: -10px; z-index: -1; cursor: pointer; transition: 0.6s; }
.close#menuBtn::after{ background: rgba(255,255,255,.5); transform: scale(0,0);}
.scroll .close#menuBtn::after{ background: rgba(255,255,255,.8); filter: blur(0px); transform: scale(1,1);}
.close#menuBtn:hover::after{ box-shadow: -20px 40px 400px rgba(0,0,0,.2);}
.open#menuBtn::after{ background: #222; box-shadow: 0 4px 8px rgba(0,0,0,1) inset; transform: scale(1.4,1.4);}
#menuBtn .menuBtn-line{ width: 100%; height: 100%; display:block;}
#menuBtn .menuBtn-line::before{ font-weight: 400; font-size: 11px; width: 100%; text-align: center; position: absolute; left: 0; top: 8px; font-family: 'Josefin Sans', sans-serif; transition: 0.6s;}
.close#menuBtn .menuBtn-line::before{ content: "MENU";}
.open#menuBtn .menuBtn-line::before{ content: "CLOSE"; color: #fff;}
#menuBtn .menuBtn-line span{ width: 50%; height: 60%; position: absolute; bottom: 0;}
#menuBtn .menuBtn-line span.l1{ left: 0;}
#menuBtn .menuBtn-line span.l2{ right: 0;}
#menuBtn .menuBtn-line span.l3{ left: 0;}
#menuBtn .menuBtn-line span.l1::before, 
#menuBtn .menuBtn-line span.l1::after, 
#menuBtn .menuBtn-line span.l2::before, 
#menuBtn .menuBtn-line span.l2::after, 
#menuBtn .menuBtn-line span.l3::before { width: 14px; height: 1px; position: absolute; top: 37%; background: #000; content: ""; transition: 0.6s;}
#menuBtn .menuBtn-line span.l3::before{ width: 28px; left: 50%; margin-left: -2px; transition: 0.4s;}
.open#menuBtn .menuBtn-line span.l3::before{ width: 0; left: 105%; background: #fff; margin-top: 4px;}
/**/
#menuBtn .menuBtn-line span.l1::before{ right: 0; margin-top: -8px;}
#menuBtn .menuBtn-line span.l1::after{ right: 0; margin-top: 8px;}
#menuBtn .menuBtn-line span.l2::before{ left: 0; margin-top: -8px;}
#menuBtn .menuBtn-line span.l2::after{ left: 0; margin-top: 8px;}
.open#menuBtn .menuBtn-line span.l1::before, 
.open#menuBtn .menuBtn-line span.l1::after, 
.open#menuBtn .menuBtn-line span.l2::before, 
.open#menuBtn .menuBtn-line span.l2::after{ width: 20px;}
.open#menuBtn .menuBtn-line span.l1::before{ transform: rotate(45deg); margin-top: -4px; right: -3px; background: #fff;}
.open#menuBtn .menuBtn-line span.l1::after{ transform: rotate(-45deg); margin-top: 10px; right: -3px; background: #fff;}
.open#menuBtn .menuBtn-line span.l2::before{ transform: rotate(-45deg); margin-top: -4px; left: -3px; background: #fff;}
.open#menuBtn .menuBtn-line span.l2::after{ transform: rotate(45deg); margin-top: 10px; left: -3px; background: #fff;}
}















/*================================
フッター
===================================*/
footer{}
footer .fSection{ width: 100%; display: flex; flex-direction: column; padding: 0 3%; }
footer .fSection .inner1200{ background: #eaeaea; padding: 30px 3% 0; border-radius: 30px 30px 0 0; border: solid 1px #ddd; border-bottom: none;}
/**/
#f01{ display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom: 40px;}
#f01 .fTxt{ padding-right: 40px;}
#f01 .fTxt h1 { display: flex; flex-direction: column;}
#f01 .fTxt h1 .img { display: flex; flex-direction: row; margin-bottom: 15px; padding-left: 2px;}
#f01 .fTxt h1 .img img{ height: 26px; width: auto; display: block;}
#f01 .fTxt h1 .txt{ font-size: 11px; letter-spacing: 0; font-weight: 500; position: relative; color: #fff; z-index: 10; background: #222; padding: 3px 4px 4px;}
/*
#f01 .fTxt h1 .txt::after{ content: ""; background: #000; left: 0; top: 0; position: absolute; width: 100%; height: 100%; z-index: 1;}
*/
#f01 .fTxt h2 { font-size: 12px; font-weight: 500; letter-spacing: 2px;}
#f01 nav{ flex: 1; display: flex; justify-content: flex-end;}
#f01 nav .f-navBox{ display: flex; flex-direction: column; margin-right: 5%;}
#f01 nav .f-navBox h3{ font-size: 14px; font-weight: 500; color: #000; padding: 10px 0; margin-bottom: 10px; border-bottom: solid 1px #ddd;}
#f01 nav .f-navBox ul{ width: 100%; display: flex; flex-direction: column;}
#f01 nav .f-navBox ul li{ width: 100%; display: block;}
#f01 nav .f-navBox ul li a{ display: flex; align-items: baseline; padding: 8px 8px 8px 26px; font-size: 10px; color: #777; position: relative; border-radius: 2px;}
#f01 nav .f-navBox ul li a:hover{ color: #000;}
#f01 nav .f-navBox ul li a::before{ width: 14px; height: 14px; content: ""; position: absolute; left: 4px; top: 50%; margin-top: -6px; background: #ddd;}
#f01 nav .f-navBox ul li a::after{ content: "→"; width: 14px; font-size: 14px; text-align: center; line-height: 14px; position: absolute; left: 4px;  top: 50%; margin-top: -6px; opacity: 0; color: #fff; transition: 0.6s; font-weight: bold; text-indent:-10px; overflow: hidden;}
#f01 nav .f-navBox ul li a:hover::before{ background: var(--color3); border: solid 1px var(--color3);}
#f01 nav .f-navBox ul li a:hover::after{ text-indent: 0; opacity: 1;}
#f01 nav .f-navBox ul li a span{ font-size: 12px; color: #777; font-weight: bold;}
#f01 nav .f-navBox ul li a:hover span{ color: #000;}
/**/
#f02{ margin: 20px 0; display: flex; flex-direction: row; justify-content: space-between; border-top: solid 1px #d0d0d0;}
#f02 ul{ width: 100%; display: flex; padding: 6px;}
#f02 ul li{ display: block; padding: 0 5px;}
#f02 ul li a{ font-size: 10px; padding: 2px 5px; color: #777; word-break: keep-all;}
#f02 ul li a:hover{ color: #000;}
#f02 .copy{ font-size: 10px; color: #777; white-space: nowrap; letter-spacing: 1px;}
@media screen and (max-width: 900px) {
footer .fSection .inner1200{ padding: 30px 4% 0;}
#f01 .fTxt{ padding-right: 20px;}
#f01 nav .f-navBox{ margin-right: 2%;}
#f01 .fTxt h1 .txt{ transform-origin: 0 0%; transform: scale(0.8,0.8);}
}
@media screen and (max-width: 840px) {
#f01{ flex-direction: column-reverse; align-items: center;}
#f01 nav{ width: 100%; justify-content: space-between; align-items: flex-start; margin-bottom: 40px;}
#f01 nav .f-navBox{ margin:0;}
#f01 .fTxt{ padding-right: 0;}
}

@media screen and (max-width: 650px) {
footer .fSection .inner1200{ border-radius: 40px 40px 0 0; padding-top: 10px; border: solid 1px #aaa;}
#f01 nav{ flex-direction: column;}
#f01 nav .f-navBox{ width: 100%;}
#f01 nav .f-navBox h3{ width: 100%; margin: 20px 0 0; padding: 0;}
#f01 nav .f-navBox ul{ flex-direction: row; flex-wrap: wrap;}
#f01 nav .f-navBox ul li{ width: 50%; padding: 0; border: solid 1px #555; border-top: none;}
#f01 nav .f-navBox ul li:nth-child(even) { border-left:none;}
#f01 nav .f-navBox ul li:nth-child(1), 
#f01 nav .f-navBox ul li:nth-child(2) { border-top:solid 1px #555;}
#f01 nav .f-navBox ul li a{ height: 50px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding:0 5px 0 26px; font-size: 3.0vw; color: #000; line-height: 1.2em;}
#f01 nav .f-navBox ul li a::before{ border-radius: 10px; margin-top: -8px; background: var(--color1);}
#f01 nav .f-navBox ul li a::after{ font-size: 12px; margin-top: -8px; text-indent: 0; opacity: 1;}
#f01 nav .f-navBox ul li a span{ color: #000; font-size: 3.2vw; letter-spacing: 0; padding:0; line-height: 1em; margin-top: 3px;}
/**/
#f01 .fTxt{ padding: 40px 0 0;}
/**/
#f02{ flex-direction: column; justify-content: center; border-top: solid 1px #aaa; padding-top: 10px;}
#f02 ul{ padding: 0; justify-content: center;}
#f02 ul li{ display: block; padding: 0 5px;}
#f02 ul li a{ color: #555;}
#f02 .copy{ margin: 10px 0;}
}

/*================================
パンくず
===================================*/
#breadcrumbs{ width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: solid 1px #ddd; overflow-y: hidden; overflow-x: auto;}
#breadcrumbs .breadcrumbs{ width: 1200px; display: flex; justify-content: flex-start; align-items: center; padding: 0 1%;}
#breadcrumbs .breadcrumbs ul{ display: flex;}
#breadcrumbs .breadcrumbs ul li{ display: flex; align-items: center; justify-content: flex-start; margin-right: 5px; padding-right: 20px; position: relative; font-size: 11px; font-weight: 500;}
#breadcrumbs .breadcrumbs ul li > span{ display: block; font-size: 11px; font-weight: 500; white-space: nowrap;}
#breadcrumbs .breadcrumbs ul li::after{ width: 9px; height: 9px; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; content: ""; position: absolute; right: 5px; top: 50%; margin-top: -4.5px; transform: rotate(-45deg);}
#breadcrumbs .breadcrumbs ul li:last-child::after{ display: none;}
#breadcrumbs .breadcrumbs ul li a{ display: flex; align-items: center; justify-content: center; margin: 2px 0; white-space: nowrap;}
#breadcrumbs .breadcrumbs ul li a span{ display: flex; align-items: center; font-size: 11px; color: #777; line-height: 1em; padding: 2px; word-break: keep-all; white-space: nowrap;}
#breadcrumbs .breadcrumbs ul li:last-child a span{ color: #000; font-weight: bold;}
#breadcrumbs .breadcrumbs ul li a:hover span{ color: var(--color1);}
@media screen and (max-width: 1200px) {
#breadcrumbs .breadcrumbs{ max-width: none;}

}
@media screen and (max-width: 900px) {
#breadcrumbs{ border-top: solid 1px #ddd;}
#breadcrumbs .breadcrumbs{ margin-top: 50px;}
}
@media screen and (max-width: 600px) {
#breadcrumbs .breadcrumbs ul li a{ height: 20px;}
}

/*==============================================
 pageup
================================================*/
.pageup{ width: 100px; height: 100px; position:fixed; right: -20px; bottom: 10px; z-index: 9990; transition: 0.5s; transform: scale(0,0);}
.scroll .pageup{ transform: scale(1,1);}
.pageup a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0.5;}
.pageup a:hover{opacity: 1;}
.pageup a span{ width: 100%; display: block; line-height: 1.1em; color: #000; font-size: 14px; font-weight: 500; text-align: center;}
.pageup a img.cta_area{ width: 100px; height: 100px; position: absolute; right: 0%; top: 0%; transition: 0s !important; opacity: 0.5;}
.pageup a:hover span{ line-height: 1.3em;}
.pageup a:hover img.cta_area{transform: rotate(0deg) !important; transition: 2s !important; opacity: 1;}
@media screen and (max-width: 750px) {
.pageup, 
.pageup a img.cta_area{ width: 70px; height: 70px;}
.pageup a span{ font-size: 10px;}
}

/*================================
seoエリア
===================================*/
.seo-area{ width: 94%; margin: 20px 3%;}
.seo-area .section{ padding: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 11px; font-weight: 300; border-radius: 4px; background-color: #eee;}
.seo-area .section h3{ font-size: 11px; display: flex; margin-bottom: 2px;}
.seo-area .section p{ display: block; font-size: 11px; color: #888; letter-spacing: 0; line-height: 1.2em;}
@media screen and (min-width: 1200px) {
.seo-area{ width: 100%; margin: 20px 0%;}
}

/*================================
下層ページ下部　店舗一覧
===================================*/
#shop-list{ padding: 0 3%;}
#shop-list .inner1200{ display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; background: #f5f5f5; border: solid 5px #ddd; padding: 20px; border-radius: 6px; margin: 10px 0 40px;}
#shop-list .inner1200 .ttl{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; word-break: keep-all; font-size: 12px; margin:5px 20px 0 0;}
#shop-list .inner1200 .ttl span{ font-size: 10px; color: #777;}
#shop-list .inner1200 ul{ display: flex; flex-direction: row; flex-wrap: wrap;}
#shop-list .inner1200 ul li{ display: flex;  padding: 0 10px 10px 0;}
#shop-list .inner1200 ul li a{ display: flex; align-items: center; padding: 2px 8px; font-size: 12px; border-radius: 4px; border: solid 1px #ccc; background: #fff;}
#shop-list .inner1200 ul li a br{ display: none;}
#shop-list .inner1200 ul li a:hover{ border: solid 1px #111; color: #111; background: var(--color2);}

@media screen and (max-width: 800px) {
#shop-list .inner1200{ flex-direction:column; padding: 10px;}
#shop-list .inner1200 .ttl{ flex-direction: row; align-items: baseline; margin-bottom: 10px;}
#shop-list .inner1200 .ttl span{ margin: 0 5px;}
#shop-list .inner1200 ul li{ width: 33%; padding: 0 6px 6px 0;}
#shop-list .inner1200 ul li a{ width: 100%; height: 42px; display: flex; position: relative;}
#shop-list .inner1200 ul li a::after{ width: 6px; height: 6px; content: ""; border-bottom: solid 2px #aaa; border-right: solid 2px #aaa; transform: rotate(-45deg); position: absolute; right: 8px; top: 50%; margin-top: -3px;}
}
@media screen and (max-width: 700px) {
#shop-list .inner1200 ul li{ width: 50%; padding: 0 10px 6px 0;}

}
@media screen and (max-width: 600px) {
#shop-list .inner1200 ul li{ width: 100%; padding: 0; margin: 3px 0;}
#shop-list .inner1200{ border: solid 5px var(--color1);}
#shop-list .inner1200 ul li a{ font-size: 4.0vw; height:46px; border: solid 1px #999; }

}





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
・物件一覧：まとめて資料請求
・条件選択：町名orこの条件で探す
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝-*/
.on_madori #bukken_list .bukken-wrap{ z-index: -1;}
body.all_inquire_on #f02{ padding-bottom:60px;}
.input_lock { opacity: 0.3; pointer-events: none;}
.on_madori #all_inquire{ bottom: -50px !important;}
/**/
#all_inquire{ width: 100%; height: 50px; display: flex; justify-content: center; padding: 5px; position: fixed; left: 0; bottom: 0; background: rgba(0,0,0,.8); z-index: 999999; transition: 0.4s;}
#all_inquire .inner{ width: 100%; max-width: 1000px; display: flex; flex-direction: row; justify-content: center; align-items:baseline;}
#all_inquire .inner #all_inquire_view{ width: 80px; height: 30px; position:absolute; right: 10px; top: -30px; background: rgba(0,0,0,.8); border-radius: 6px 6px 0 0; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s;}
#all_inquire .inner #all_inquire_view:hover{ height: 40px; top: -40px; background: rgba(0,131,66,.9);}
#all_inquire .inner #all_inquire_view.close::before{ content: "▼ かくす"; font-size: 11px; color: #fff;}
#all_inquire .inner #all_inquire_view.open::before{ content: "▲ 表示"; font-size: 11px; color: #fff;}
/**/
#all_inquire .inner p.bulk_wrap{ width: 100%; height: 40px; display: flex; flex-direction: row; justify-content: center; align-items: center;}
#all_inquire .inner p.bulk_wrap .inqTxt{ display: flex; flex-direction: row; justify-content: center; align-items: baseline; color: #fff;}
#all_inquire .inner p.bulk_wrap .inqTxt .inqNum{ color: #ff912b; font-size: 18px; font-weight: 800; margin: 0 1px 0 4px;}
#all_inquire .inner p.bulk_wrap .inqTxt .mini{ color: #fff;}
#all_inquire .inner p.bulk_wrap .inqTxt .num{ color: #fff; font-size: 13px; margin-right: 4px;}
#all_inquire .inner p.bulk_wrap a{ width: 220px; height: 36px; display: flex;justify-content: center; align-items: center; text-align: center; font-size: 12px; font-weight: 500; border-radius: 3px; margin-left: 5%;}
#all_inquire .inner p.bulk_wrap a br{ display: none;}
/*OPEN*/
#all_inquire{ bottom: -50px; pointer-events: none;}
.all_inquire_on #all_inquire { bottom: 0px; pointer-events: all;}
.all_inquire_on #all_inquire.close { bottom: -50px;}
#all_inquire .inner #all_inquire_view{ opacity: 0;}
.all_inquire_on #all_inquire .inner #all_inquire_view{ opacity: 1;}

@media screen and (max-width: 800px) {
#all_inquire{ height: 60px;}
#all_inquire, 
.all_inquire_on #all_inquire.close{ bottom: -60px;}

#all_inquire .inner p.bulk_wrap{ height: 50px;}
#all_inquire .inner p.bulk_wrap .inqTxt{ width: 100px; flex-wrap: wrap; justify-content: center; font-size: 10px; letter-spacing: 0; line-height: 1.1em;}
#all_inquire .inner p.bulk_wrap .inqTxt .inqNum{ font-size: 17px; line-height: 1.1em;}
#all_inquire .inner p.bulk_wrap .inqTxt .mini{ width: 100%; text-align: center; font-size: 11px; letter-spacing: 0; line-height: 1.1em; font-weight: 300;}
/**/
#all_inquire .inner p.bulk_wrap a{ width: calc(48% - 50px); height: 50px; font-size: 16px; line-height: 1.1em; margin:0 1%; font-weight: bold;}
#all_inquire .inner p.bulk_wrap a.contact_form{ width: calc(90% - 100px); font-size: 15px;}
}
@media screen and (max-width: 700px) {
#all_inquire .inner p.bulk_wrap a br{ display: block;}
}
@media screen and (max-width: 560px) {
#all_inquire .inner p.bulk_wrap a{ font-size: 3.6vw;}
#all_inquire .inner p.bulk_wrap .inqTxt .mini{ width: 100%; text-align: center; font-size: 2.2vw; letter-spacing: 0; line-height: 1em; font-weight: 300;}

}
/*================================
お気に入り
===================================*/
.okiniiri{ width:50px; height: 44px; font-size: 7px; font-weight: 300; display: block; text-align:center; line-height: 16px; padding-top:28px; border: solid 1px #ccc; border-radius: 4px; letter-spacing: 0; color: #000; position: relative; cursor: pointer; transition: 0.4s; overflow: hidden; text-indent: -300px; background: url("../img/okiniiri.png") no-repeat 50% 95%; overflow: hidden;}
.okiniiri::after{ width: 24px; height: 24px; position: absolute; right: 50%; top: 50%; margin: -16px -12px 0 0; content: ""; pointer-events: none; transition: 0.4s;}
.okiniiri::after{ background: url("../img/hart_r.png"); background-size: 100% 100%; opacity: 0.2; filter: grayscale(1);}
.okiniiri.on{ background: url("../img/okiniiri_on.png") no-repeat 50% 90% #e84f4f; border: solid 1px #e84f4f; color: #fff;}
.okiniiri.on::after{ background: url("../img/hart_f.png"); background-size: 100% 100%; opacity: 1;}
/*一覧の指定*/
#bukken_list .bukkenBox .bukken-ttl .okiniiri{ position: absolute; right: 5px; top: 50%; margin-top: -22px; background: url("../img/okiniiri.png") no-repeat 50% 95%;}
#bukken_list .bukkenBox .bukken-ttl .okiniiri.on{ background: url("../img/okiniiri_on.png") no-repeat 50% 90% #e84f4f;}
/*詳細ページの指定*/
.bukken-main .page_ttl h1 .okiniiri{ margin-left: 15px; border: solid 1px #ddd; color: #999; font-weight: bold;}
.bukken-main .page_ttl h1 .okiniiri.on{ color: #fff;}
@media screen and (min-width: 750px) {
.okiniiri:hover::after{ opacity: 0.9; filter: grayscale(0);}
.okiniiri:hover{border: solid 1px #e84f4f; color: #e84f4f;}
.bukken-main .page_ttl h1 .okiniiri:hover{ border: solid 1px #e84f4f; color: #e84f4f;}
}
@media screen and (max-width: 750px) {
.okiniiri, 
.okiniiri.on{ border:none}
.okiniiri::after{ background: url("../img/hart_f.png"); background-size: 100% 100%; opacity: 0.6; filter: none;}
#bukken_list .bukkenBox .bukken-ttl .okiniiri{ background: url("../img/okiniiri_on.png") rgba(150,150,150,.2) no-repeat 50% 95%;}
/**/
#bukken_list .bukken-wrap .bukken-btn p .okiniiri{ width: 35%; height: 30px; border:none; border-radius: 0; padding:0 0 0 32px; background: url("../img/okiniiri.png") no-repeat 50% 50%;}
#bukken_list .bukken-wrap .bukken-btn p .okiniiri::after { width: 14px; height: 14px; right: auto; left: 10px; top: 50%; margin: -7px 0 0;}
#bukken_list .bukken-wrap .bukken-btn p .okiniiri.on{ background: url("../img/okiniiri_on.png") no-repeat 50% 50% #e84f4f;}
/**/
.bukken-main .page_ttl h1 .okiniiri{ background: url("../img/okiniiri_on.png") rgba(0,0,0,.2) no-repeat 50% 95%;}
.bukken-main .page_ttl h1 .okiniiri.on{ background: url("../img/okiniiri_on.png") no-repeat 50% 95% #e84f4f;}
}

/*詳細の指定*/
.aside .iine{ display: flex; width: 100%; padding: 0 0 10px;}
.aside .iine .okiniiri{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 30px !important; padding:0 5px 0 32px !important; font-size: 11px; font-weight: 500; background: #fff; text-indent:0}
.aside .iine .okiniiri span{ display: block; font-size: 9px; line-height: 1.2em; transition: 0.4s; font-weight: 400;}
.aside .iine .okiniiri:hover span{ color: #e84f4f;}
.aside .iine .okiniiri.on{ background: #e84f4f;}
.aside .iine .okiniiri.on span{ color: #fff;}
.aside .iine .okiniiri::after{ position: absolute; left: 5px; top: 50%; margin-top: -12px;}
/*------------------
matomete-aleat
お気に入りモーダル
----------------------*/
.matomete-aleat{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000000000; display: flex; justify-content: center; align-items: center; display: none; pointer-events: none;}
.matomete-aleat.on-open, 
.matomete-aleat.on-close{ display: flex; pointer-events: all;}
.matomete-aleat div.matomete-close{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: flex; z-index: 1; background: rgba(0,0,0,.4); cursor: pointer;}
.matomete-aleat span{ position:relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,.2); background: #fff; transition: 0.3s; margin-bottom: 20px;}
/**/
.matomete-aleat.on-open span::before{ content: "お気に入りに登録しました"; color: #222; font-size: 15px; font-weight: bold;}
.matomete-aleat.on-close span::before{ content: "お気に入りから削除しました"; color: #222; font-size: 15px; font-weight: bold;}
.matomete-aleat.on-close span{ margin-bottom: 0px;}
.matomete-aleat span p{ padding: 2px 10px; background: #ddd; border-radius: 2px; margin-top: 10px; cursor: pointer;}

/*==============================================
 ページャー
================================================*/
.pager { display: flex; flex-direction: row; align-items: center; justify-content: center;}
ul.page-numbers{ display: flex; direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 20px 0;}
ul.page-numbers li{ margin: 8px;}
ul.page-numbers li span{ min-width: 40px; height: 50px; border: solid 1px #ccc; display: block; line-height: 50px;text-align: center; border-radius: 4px; background: #fff; transition: 0.2s; margin: 0 5px;}
ul.page-numbers li a{ min-width: 40px; height: 50px; padding: 0 5px; display: block; line-height: 50px; text-align: center; background: #fff; border: solid 1px #ddd; box-shadow: 0 0 0 rgba(0,0,0,.2); border-radius: 4px; color: #555;}
ul.page-numbers li > span{ background: var(--color1); color: #fff; border: solid 1px var(--color1);}
ul.page-numbers li a:hover{ background: #666; color: #fff; border: solid 1px #666; box-shadow: 0 4px 6px rgba(0,0,0,.2);}
ul.page-numbers li.dot{ display: flex; align-items: flex-end; width: auto;}
ul.page-numbers li.prev span, 
ul.page-numbers li.next span{ width: 80px;}
ul.page-numbers li.prev > span, 
ul.page-numbers li.next > span{ background:#e5e5e5; color: #999; border: solid 1px #ccc;}

@media screen and (max-width: 850px) {
ul.page-numbers li{ margin: 5px;}
ul.page-numbers li span{ min-width: 34px; margin: 0 ;}
ul.page-numbers li a{ min-width: 34px; font-size: 14px; font-weight: bold;  box-shadow: 0 2px 4px rgba(0,0,0,.15); }
}
@media screen and (max-width: 650px) {
ul.page-numbers{ justify-content: flex-start;}
ul.page-numbers li span, 
ul.page-numbers li a{ height: 48px; line-height: 48px;}
}