@charset "UTF-8";
strong, dt, h1, h2, h3, h4, h5, h6, th { font-weight: 700;}

/* chat fv非表示 ここから*/
#chat_inquity{
	position:fixed;
	right:20px;
	bottom:20px;
	opacity:0;
	transform:translateY(20px);
	pointer-events:none;
	transition:.35s;
}
#chat_inquity.show_btn{
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
}
/* chat fv非表示 ここまで*/
#footer .footer_inner .footer_on_text p { max-width: 1140px; margin: 0 auto;}

:root{

  /* Main */
  --navy: #1B2A41;

  /* Gold / Beige */
  --gold: #D4B483;
  --beige: #DCC7A1;
  --light-beige: #E8DDCB;

  /* Accent */
  --wine: #8D2D32;

  /* Text */
  --text: #333333;

}

html{ font-size:62.5%;}
#content{ font-family: "Noto Serif JP", serif; line-height: 1; color: var(--text); font-weight: 700; letter-spacing: .03em; -webkit-font-smoothing: antialiased; background: #fff!important;}
#content img{ width: 100%; height: auto; vertical-align: top;}
.flex{ display: flex;}
.sec_ttl{}
.sec_ttl .en{ font-size: 1.5rem; color: var(--gold); position: relative; padding-left: 10px;}
.sec_ttl .en::before{ content: ""; position: absolute; background: var(--gold); width: 5px; height: 5px; top: 6px; left: 0;}
.sec_ttl h2{ font-size: 3.2rem; margin-top: 12px;}

@media screen and (max-width: 1024px){
.sec_ttl h2{ font-size: 2rem;}
}

/*-------------------------
__mv
-------------------------*/
#mv{ position: relative;}
#mv::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(20deg,rgba(27,42,65,.5) 0%,rgba(27,42,65,0) 100%), url(/brokerage/images/mv_bg.webp) center center/cover no-repeat; z-index: 0;}
#mv .mv_inner{ height: 100vh; min-height: 750px; max-height: 1000px; position: relative;}
#mv .mv_logo{ position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 100%;}
#mv .mv_logo .mv_ttl{ font-size: 2.8rem; width: 665px; margin: auto; line-height: 1.6;}
#mv .mv_logo .mv_ttl.logo4{ width: 320px;}
#mv .mv_logo .lead{ font-size: 1.6rem; margin-top: 40px; padding-top: 56px; border-top: 1px solid #fff; line-height: 1.6;}
#mv .support{ position: absolute; left: 20px; bottom: 10px; max-width: 345px; width: 25%;}
#mv .mv_count{ position: absolute; bottom: 0; right: 0; color: #fff; padding: 30px; box-sizing: border-box; gap: 24px;}
#mv .mv_count::before{ content:""; position:absolute; inset:0; background:rgba(27,42,65,.7); mix-blend-mode:multiply; z-index:0;}
#mv .mv_count dl{ font-size: 1.4rem; position: relative; line-height: 1.2;}
#mv .mv_count dl dt{}
#mv .mv_count dl dd{}
#mv .mv_count dl dd span{ font-size: 2.8rem;}
#mv .mv_count .total{ font-size: 3rem; position: relative; padding-left: 20px; box-sizing: border-box; border-left: 1px solid #fff; line-height: 1;} 
#mv .mv_count .total span{ font-size: 5rem; color: var(--gold); padding: 0 10px;}
#mv .mv_member{ position: relative; gap: 30px; padding: 30px; box-sizing: border-box; color: #fff; justify-content: center;}
#mv .mv_member a{ color: #fff;}
#mv .mv_member::before{ content:""; position:absolute; inset:0; background:rgba(27,42,65,.7); mix-blend-mode:multiply; z-index:0;}
#mv .mv_member .type_count{ position: relative; width: calc(100% - 510px); max-width: 1000px;}
#mv .mv_member .type_count p{ font-size: 2.4rem; writing-mode: vertical-rl; margin-right: 10px;}
#mv .mv_member .type_count_wrap{ background-color: #fff; padding: 20px 10px; width: 100%; justify-content: center; align-items: center;}
#mv .mv_member .type_count_wrap dl{ font-size: 1.8rem; padding: 0 25px;}
#mv .mv_member .type_count_wrap dl + dl{ border-left: 1px solid var(--text);}
#mv .mv_member .type_count_wrap dl dt{ color: var(--text); text-align: left;}
#mv .mv_member .type_count_wrap dl dd{ color: var(--text);}
#mv .mv_member .type_count_wrap dl dd a{ font-size: 3.2rem; color: var(--gold); transition: .3s;}
#mv .mv_member .type_count_wrap dl dd a span{}
#mv .mv_member .member_wrap{ position: relative; width: 480px;}
#mv .mv_member .member_wrap a.member_btn{ font-size: 2.1rem; background: var(--wine); padding: 12px; box-sizing: border-box; text-decoration: none; width: 100%; margin-bottom: 10px; position: relative;	display: flex; align-items: center; justify-content: space-between; transition: .3s;}
#mv .mv_member .member_wrap a.member_btn .icon{	width:3.2rem; height:3.2rem; background:#fff; border-radius:.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
#mv .mv_member .member_wrap a.member_btn .icon svg{ width:2.8rem; height:2.8rem; overflow:visible;}
#mv .mv_member .member_wrap a.member_btn .icon line{ stroke: var(--wine); stroke-width:2; stroke-linecap:square; vector-effect:non-scaling-stroke; transition: .3s;}
#mv .mv_member .member_wrap .login{ font-size: 1.4rem; align-items: center; gap: 30px;}
#mv .mv_member .member_wrap .login .login_txt{ display: flex; align-items: center; gap: 20px;}
#mv .mv_member .member_wrap .login .login_txt span{ line-height: 1.2;}
#mv .mv_member .member_wrap .login .login_txt a{ font-size: 1.6rem; padding: 7px 20px; text-decoration: none; border: 1px solid #fff; box-sizing: border-box; transition: .3s; width: auto;}
#mv .mv_member .member_wrap .login .reminder_txt{}
#mv .mv_member .member_wrap .login .reminder_txt a{ transition: .3s;}

#mv .mv_member .member_wrap .member_name_box{ font-size: 1.4rem; margin-bottom: 10px;}
#mv .mv_member .member_wrap .member_name_box .welcome{ margin-bottom: 5px;}
#mv .mv_member .member_wrap .member_name_box .member_name{ background-color: #fff; padding: 8px; color: var(--text); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#mv .mv_member .member_wrap .login_btn{ margin-bottom: 0; text-align: center; background: none; border: 1px solid #fff; width: 100%; display: block; padding: 8px; font-size: 1.4rem; text-decoration: none; box-sizing: border-box;
}
.modal_content.member .btn a {background: var(--navy)!important;}


@media screen and (max-width: 1299px){
#mv .mv_logo .mv_ttl{ font-size: 2rem; padding-left: 170px;}
#mv .mv_logo .lead{ font-size: 1.4rem; padding-left: 170px;}
#mv .support{ width: 28%;}
#mv .mv_count{ padding: 20px; gap: 20px;}
#mv .mv_count dl dd span{ font-size: 2rem;}
#mv .mv_count .total{ font-size: 2.8rem; padding-left: 20px;} 
#mv .mv_count .total span{ font-size: 4rem; padding: 0 10px;}

#mv .mv_member .type_count{ width: calc(100% - 440px);}
#mv .mv_member .type_count p{ font-size: 2rem;}
#mv .mv_member .type_count_wrap{ padding: 20px 0;}
#mv .mv_member .type_count_wrap dl{ font-size: 1.6rem; padding: 0 20px;}
#mv .mv_member .type_count_wrap dl dd a{ font-size: 2.7rem;}

#mv .mv_member .member_wrap{ width: 410px;}
#mv .mv_member .member_wrap a.member_btn{ font-size: 1.6rem; padding: 8px;}
#mv .mv_member .member_wrap a.member_btn .icon{ width:2.4rem; height:2.4rem;}
#mv .mv_member .member_wrap a.member_btn .icon svg{ width:2rem; height:2rem;}
#mv .mv_member .member_wrap .login{ gap: 20px;}
#mv .mv_member .member_wrap .login .login_txt{ gap: 10px;}
#mv .mv_member .member_wrap .login .login_txt a{ font-size: 1.4rem; padding: 7px 15px;}
}
@media screen and (max-width: 1099px){
#mv .mv_member .type_count_wrap dl{ font-size: 1.4rem;}
#mv .mv_member .type_count_wrap dl dd a{ font-size: 2.4rem;}
}
@media screen and (max-width: 1024px){
#mv .mv_logo .mv_ttl{ width: 475px;}
#mv .mv_logo .mv_ttl.logo4{ width: 200px;}
#mv .mv_inner{ height: 570px; min-height: auto;}
#mv .mv_logo{ top: 38%;}
#mv .mv_logo .lead{ padding: 40px 20px 0 230px;}
#mv .mv_count{ padding: 20px 20px 0; gap: 20px; width: 100%; justify-content: center;}
#mv .mv_member{ gap: 20px; padding: 20px;}
#mv .mv_member{ flex-wrap: wrap;}
#mv .mv_member .type_count{ width: 100%;}
#mv .mv_member .type_count_wrap dl dd a{ font-size: 2rem;}
#mv .mv_member .member_wrap{ width: 100%; display: flex; gap: 20px; justify-content: center;}
#mv .mv_member .member_wrap a.member_btn,
#mv .mv_member .member_wrap a.login_btn{ width: 330px;}
#mv .mv_member .member_wrap a.login_btn{ display: flex; justify-content: center; align-items: center;}
#mv .mv_member .member_wrap .login{ justify-content: center; font-size: 1.2rem;}
#mv .mv_member .member_wrap .login .login_txt a{ padding: 7px 10px;}
#mv .mv_member .member_wrap .member_name_box{  margin-bottom: 0;}
#mv .support{ bottom: 80px;}

}
@media screen and (min-width: 768px){
#mv .mv_member .type_count_wrap dl dd a:hover{ color: var(--beige);}
#mv .mv_member .member_wrap a.member_btn:hover{  background: var(--gold);}
#mv .mv_member .member_wrap a.member_btn:hover .icon line{ stroke: var(--gold);}
#mv .mv_member .member_wrap .login .login_txt a:hover{ background: #fff; color: var(--text);}
#mv .mv_member .member_wrap .login .reminder_txt a:hover{ text-decoration: none;}
}

@media screen and (max-width: 767px){
#mv .mv_inner { height: 470px;}
#mv .mv_logo { top: 45%;}
#mv .mv_logo .mv_ttl{ padding-left: 0; width: 400px; font-size: 1.6rem;}
#mv .mv_logo .lead{ padding: 30px 20px 0 280px; margin-top: 20px; text-align: left;}
#mv .mv_logo .lead br{ display: none;}
#mv .mv_count .total{ font-size: 2.7rem;} 
#mv .support{ width: 240px;}
#mv .mv_member .member_wrap{ width: 100%; display: block;}
#mv .mv_member .member_wrap a.member_btn,
#mv .mv_member .member_wrap a.login_btn{ width: 100%;}
#mv .mv_member .member_wrap a.login_btn{ display: block;}
#mv .mv_member .member_wrap .member_name_box{ margin-bottom: 10px;}
}
@media screen and (max-width: 579px){
#mv .mv_inner { height: 670px;}
#mv .mv_logo { top: 25%;}
#mv .mv_logo .mv_ttl{ width: 100%; padding: 0 20px; box-sizing: border-box;}
#mv .mv_logo .lead{ padding: 30px 20px 0; font-size: 1.2rem;}
#mv .support { bottom: 150px;}
#mv .mv_count { flex-wrap: wrap;}
#mv .mv_count .total{ width: 100%; text-align: center; border-left: none; border-top: 1px solid #fff; padding-left: 0;        padding-top: 20px; font-size: 2.2rem;}
#mv .mv_member .type_count{ align-items: center;}
#mv .mv_member .type_count_wrap{ flex-wrap: wrap; background: none; padding: 0; gap: 1px;}
#mv .mv_member .type_count_wrap dl{ width: calc(50% - 1px); padding: 10px; background: #fff; box-sizing: border-box;}
#mv .mv_member .type_count_wrap dl + dl{ border-left: none;}
}
@media screen and (max-width: 419px){
#mv .mv_logo .mv_ttl.logo4{ width: 160px;}
#mv .mv_member .member_wrap .login { flex-wrap: wrap;}
#mv .mv_member .member_wrap .login .login_txt{ width: 100%; justify-content: center;}
#mv .mv_member .member_wrap .login .login_txt span br{ display: none;}
#mv .mv_member .member_wrap .login .reminder_txt{ width: 100%; text-align: center;}
}
@media screen and (max-width: 374px){
#mv .mv_count .total{ font-size: 1.8rem;}
#mv .mv_member .member_wrap a.member_btn{ font-size: 1.3rem;}
}

/*-------------------------
__search
-------------------------*/
#search{ background: linear-gradient( 20deg, rgba(27, 42, 65, 1) 0%, rgba(27, 42, 65, .8) 100%);}
#search .inner{ padding: 100px; box-sizing: border-box;}
#search .inner .sec_ttl{ margin-bottom: 30px;}
#search .inner .sec_ttl h2{ color: #fff;}

#search .inner .flex{ gap: 50px; align-items: stretch; max-width: 1400px; margin: auto;}

#search .inner .flex .search_box.map{ flex: 7; min-width: 0;}
#search .inner .flex .search_box.map .map_wrap{ height: auto; background: url('/brokerage/images/map_all_bg.jpg') no-repeat; background-size: contain; background-position: top; margin: 0 auto; z-index: 1; position: relative;}
#search .inner .flex .search_box.map svg{ width: 100%; height: 100%;}
#search .inner .flex .search_box.map svg g .cls-1{ fill: #fff;stroke:#5C6A7B;stroke-linejoin:round;transition: all .3s;stroke-width: 1.4;cursor: pointer;}
#search .inner .flex .search_box.map svg g:hover .cls-1{ fill: var(--beige);}

#search .inner .flex .search_box.map .count_box{position: absolute; left: 0; top: 0; pointer-events: none; width: 100%; height: 100%;}
#search .inner .flex .search_box.map .count_box .count{ font-size: 1.6vw; text-align: center; color: var(--text); line-height: 2.8vw; font-weight: 700; width: 19%; box-sizing: border-box; position: absolute;}
#search .inner .flex .search_box.map .count_box .count.tokyo{ top: 32%; left: 10%;}
#search .inner .flex .search_box.map .count_box .count.chiba{ top: 40%; left: 57%;}
#search .inner .flex .search_box.map .count_box .count > span{ background: var(--navy); padding: 5px 10px; border-radius: 5px; box-sizing: border-box; display: inline; color: #fff; font-size: 1.5vw;}
#search .inner .flex .search_box.map .count_box .count span span{ font-size: 2vw;}

#search .inner .flex .search_box.type{ flex: 2.5; min-width: 0; display: flex; flex-direction: column;}
#search .inner .flex .search_box.type ul{ flex: 1; background: #fff; padding: 30px; box-sizing: border-box; display: flex; justify-content: center; height: calc(100% - 90px); flex-direction: column;}
#search .inner .flex .search_box.type ul li{ flex: 1; display: flex;}
#search .inner .flex .search_box.type ul li + li{ border-top: 1px solid #1B2A41;}
#search .inner .flex .search_box.type ul li a{ text-decoration: none; color: var(--text); flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 15px; box-sizing: border-box; transition: .3s;}
#search .inner .flex .search_box.type ul li a .icon{ width: 45%; max-width: 100px; margin: 0 auto;}
#search .inner .flex .search_box.type ul li a .icon img{ display: block;}
#search .inner .flex .search_box.type ul li a p{ font-size: clamp(1.4rem, 1.2vw, 1.8rem); margin-top: 10px;}


@media screen and (max-width: 1024px){
#search .inner{ padding: 50px;}
#search .inner .sec_ttl{ margin-bottom: 20px;}
#search .inner .flex{ gap: 20px;}
}
@media screen and (min-width: 768px){
#search .inner .flex .search_box.type ul li a:hover{ background: var(--light-beige);}
}
@media screen and (max-width: 767px){
#search .inner{ padding: 30px 20px;}
#search .inner > .flex{ gap: 30px; align-items: center; flex-wrap: wrap; flex-direction: column;}
#search .inner .flex .search_box.map{ flex:auto; width: 100%;}
#search .inner .flex .search_box.map .count_box .count{ font-size: 1.4rem; line-height: 1.5; width: 95px;}
#search .inner .flex .search_box.map .count_box .count > span{  font-size: 1.2rem;}
#search .inner .flex .search_box.map .count_box .count span span{ font-size: 1.8rem;}
#search .inner .flex .search_box.type{ flex: auto; width: 100%;}
#search .inner .flex .search_box.type ul{ flex: auto; background: none; padding: 0; display: flex; height: auto; flex-direction: row; gap: 2px; flex-wrap: wrap;}
#search .inner .flex .search_box.type ul li{ flex: auto; display: flex; width: calc(50% - 1px); background: #fff; padding: 10px 0;}
#search .inner .flex .search_box.type ul li + li{ border-top: none;}
#search .inner .flex .search_box.type ul li a .icon{ width: 50%;}
#search .inner .flex .search_box.type ul li a p{ font-size: clamp(1.4rem, 1.2vw, 1.8rem); margin-top: 10px;}
}
@media screen and (max-width: 429px){
#search .inner .flex .search_box.map .count_box .count.tokyo{ top: 30%; left: 6%;}
#search .inner .flex .search_box.map .count_box .count.chiba{ top: 40%; left: 50%;}
}

/*-------------------------
__selection
-------------------------*/
#selection{}
#selection .inner{ padding: 50px; box-sizing: border-box;}
#selection .flex{ gap: 50px; align-items: center;}
#selection .flex .img_wrap{ width: calc(100% - 800px); height: 525px; overflow: hidden;}
#selection .flex .img_wrap img{ height: 100%; object-fit: cover;}
#selection .flex .selection_wrap{ width: 750px;}
#selection .flex .selection_list{ margin-top: 50px; gap: 0 30px; flex-wrap: wrap;}
#selection .flex .selection_list li{ width: calc(50% - 15px); border-top: 1px solid #D1D4D9;}
#selection .flex .selection_list li:last-child,
#selection .flex .selection_list li:nth-child(8){ border-bottom: 1px solid #D1D4D9;}
#selection .flex .selection_list li a{ font-size: 1.8rem; text-decoration: none; color: var(--text); padding: 20px 0 20px 20px; box-sizing: border-box; display: block; transition: .3s;}
@media screen and (max-width: 1299px){
#selection .flex .img_wrap{ width: calc(100% - 670px);}
#selection .flex .selection_wrap{ width: 620px;}
#selection .flex .selection_list li a{ font-size: 1.4rem;}
}
@media screen and (max-width: 1024px){
#selection .flex .img_wrap{ width: calc(100% - 350px);}
#selection .flex .selection_wrap{ width: 300px;}
#selection .flex .selection_list { margin-top: 20px; gap: 0 20px;}
#selection .flex .selection_list li{ width: 100%;}
#selection .flex .selection_list li a { padding: 15px 0 15px 10px;};
}
@media screen and (min-width: 768px){
#selection .flex .selection_list li a:hover{ background: #A4AAB3;}
}
@media screen and (max-width: 767px){
#selection .inner{ padding: 0;}
#selection .flex{ gap: 0; flex-wrap: wrap;}
#selection .flex .img_wrap{ width: 100%; height: 240px;}
#selection .flex .selection_wrap{ width: 100%; padding: 20px 20px 30px;}
#selection .flex .selection_list{ gap: 0 20px;}
#selection .flex .selection_list li a{ text-align: center; padding: 15px 0;}
#selection .flex .selection_list li:nth-child(8){ border-bottom: none;}
}

/*-------------------------
__swiper
-------------------------*/
#latest,
#price_down{ position: relative; padding-bottom: 50px; margin-bottom: 100px; box-sizing: border-box;}
#latest::before{ content: ""; position: absolute; background: linear-gradient(20deg, rgb(220, 220, 220), rgb(250, 250, 250)); width: 65%; height: 100%; top: 0; left: 0; z-index: 0;}
#price_down::before{ content: ""; position: absolute; background: linear-gradient(140deg, rgb(250, 249, 246), rgb(232, 221, 203)); width: 65%; height: 100%; right: 0; top: 0; z-index: 0;}
#latest .sec_ttl_wrap,
#price_down .sec_ttl_wrap{ padding: 50px 100px 30px; box-sizing: border-box; position: relative;}

.more { position: absolute; right: 100px; top: 106px; width: 280px;}
.more a{ text-decoration: none; color: var(--text); font-size: 1.6rem; padding: 20px; box-sizing: border-box; border-top: 1px solid #A4AAB3; border-bottom: 1px solid #A4AAB3; position: relative; display: flex; align-items: center; justify-content: space-between; transition: .3s;}
.more a .icon{ width:3.2rem; height:3.2rem; background: var(--navy); border-radius:.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.more a .icon svg{ width:2.8rem; height:2.8rem; overflow:visible;}
.more a .icon line{ stroke: #fff; stroke-width:2; stroke-linecap:square; vector-effect:non-scaling-stroke;}

/* 左右の矢印ナビゲーション */
.swiper_nav { display: flex; gap: 8px; margin-top: 30px;}
.swiper_prev,
.swiper_next{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#1B2A41; border:none; border-radius:6px; cursor:pointer; transition:.3s;}
.swiper_prev svg,
.swiper_next svg{ width:20px; height:20px;}
.swiper_prev path,
.swiper_next path{ fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:square; stroke-linejoin:miter; vector-effect:non-scaling-stroke;}
.swiper-slide{}
.swiper-slide .property_card{ display: flex; flex-direction: column; gap: 10px; font-size: 1.2rem; text-decoration: none; color: var(--text); transition: .3s;}
.swiper-slide .member_property .txt_wrap .card_ttl{ margin-bottom: 10px;}
.swiper-slide .member_property .txt_wrap .station{ line-height: 1.4;}



.swiper-slide .photo{ aspect-ratio: 4 / 3; overflow: hidden; width: 100%; height: 100%;}
#content .swiper-slide a .photo img{ width: 100%; height: 100%; object-fit: cover; transition: .3s;}
.swiper-slide .flex{ justify-content: space-between; flex-wrap: wrap; gap: 10px;}
.swiper-slide .flex .category{ background: var(--navy); padding: 5px 10px; box-sizing: border-box; color: #fff;}
.swiper-slide .flex .price{ font-size: 1.4rem;}
.swiper-slide .flex .price span{ font-size: 2.4rem; color: var(--wine);}
.swiper-slide .card_ttl{ font-size: 1.6rem; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.swiper-slide .station{ background: #fff; padding: 5px; box-sizing: border-box;}
@media screen and (max-width: 1024px){
#latest .sec_ttl_wrap,
#price_down .sec_ttl_wrap{ padding: 50px 50px 30px;}
.more { right: 50px; top: 100px; width: 220px;}
.more a{ font-size: 1.4rem; padding: 20px 10px;}
.more a .icon{ width:2.4rem; height:2.4rem;}
.more a .icon svg{ width:2rem; height:2rem;}
}
@media screen and (min-width: 768px){

.more a:hover{ background: #A4AAB3;}

.swiper_prev:hover,
.swiper_next:hover{ background:#A4AAB3;}

#content .swiper-slide .property_card:hover{ opacity: .8;}
#content .swiper-slide .property_card:hover .photo img{ transform: scale(1.06);}
}
@media screen and (max-width: 767px){
#latest,
#price_down{ padding-bottom: 20px; margin-bottom: 50px;}
#latest .sec_ttl_wrap,
#price_down .sec_ttl_wrap{ padding: 30px 20px; display: flex; justify-content: space-between; align-items: flex-end;}

.more { width: 100%; max-width: 400px; position: inherit; margin: 50px auto 10px; padding: 0 20px; box-sizing: border-box;}
.more a{ padding: 20px; color: #fff; background: var(--navy); border-top: none; border-bottom: none; }
.more a .icon{ background: #fff;}
.more a .icon line{ stroke: var(--navy);}

.swiper_nav { margin-top: 0;}
}

/*-------------------------
__staff_list
-------------------------*/
#staff .inner{ padding: 0 100px 50px;}
#staff .staff_list{ margin: 0 auto; max-width: 300px;}
#staff .staff_list a{ padding: 30px; box-sizing: border-box; background: var(--navy); color: #fff; font-size: 2rem; text-decoration: none; margin: 0 auto; display: block; text-align: center; transition: .3s;}
@media screen and (min-width: 768px){
#staff .staff_list a:hover{ background: var(--wine);}
}

@media screen and (max-width: 767px){
#staff .inner{ padding: 0 20px 30px;}
#staff .staff_list a{ padding: 20px 0; font-size: 1.6rem; background: var(--wine);}
}