@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Muli');

* { box-sizing:border-box; }
html { overflow-y:scroll; }
body {
	width:100%; margin:0; padding:0;
	text-align:center; font-size:15px; line-height:1.7; letter-spacing:0.05em;
	color:#000;
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	background:#fff;
}

ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
img { border:0; }
li { list-style-type:none; }

a {
	overflow:hidden;
	-webkit-transition:.2s linear;
	-moz-transition:.2s linear;
	-o-transition:.2s linear;
  transition:.2s linear; }
a:link		{ color:#000; text-decoration:none; }
a:visited	{ color:#000; }
a:hover		{ color:#666; }
a:active	{  }
a img {
	-webkit-transition:.2s linear;
	-moz-transition:.2s linear;
	-o-transition:.2s linear;
	transition:.2s linear; }
a:hover img { opacity:0.7; }

a.underline { text-decoration:underline; color:#768865; }
a.underline:hover { color:#95b279; }
.blank:after {
	content:""; display:inline-block; width:12px; height:11px; margin-left:5px;
	background:url("../img/blank.png") 0 0 no-repeat; background-size:12px 11px; }

img { max-width:100%; height:auto; vertical-align:top; }

/* clearfix */
.clearfix:after {  
	visibility: hidden;
	display: block;  
	font-size: 0;  
	content: " ";  
	clear: both;  
	height: 0;  
}  
* html .clearfix { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  

.txt_c { text-align:center; }
.txt_l { text-align:left; }
.txt_r { text-align:right; }

.float_l { float:left; }
.float_r { float:right; }
.clear { clear:both; }

.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.bold  { font-weight:bold; }
.big   { font-size:120%; }
.small { font-size:88%; }
.red   { color:#df003a; }
.mt10  { margin-top:10px; }
.mt20  { margin-top:20px; }
.mt40  { margin-top:40px; }

/* header */
header { display:flex; justify-content:space-between; align-items:center; padding:5px 15px; }
header h1 { font-size:24px; }
header h1 a { color:#ff7e36!important; white-space:nowrap; }
header .lead { margin-bottom:0; padding:0 10px; font-size:12px; line-height:1.3; flex-grow:1; text-align:left; }
header .by { font-size:11px; white-space:nowrap; text-align:right; }
header .by img { vertical-align:middle; }

/*----- common -----*/
#wrapper { overflow:hidden; }

p { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* checkbox */
/*label { position: relative; display: block; word-break: break-all; }
label input[type="checkbox"] + span,
label input[type="radio"] + span { position: relative; padding: 0 20px 0 30px; }
input[type="checkbox"],
input[type="radio"] {
  margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; }
label span { display: inline-block; }
label input[type="checkbox"] { position: absolute; top: 0; left: 0; opacity: 0; }
label input[type="checkbox"] + span::before, label input[type="checkbox"] + span::after {
  position: absolute; top: 0; left: 0; display: inline-block; content: ''; box-sizing: border-box; }
input[type="checkbox"] + span::before {
  z-index: 0; background-color: #fff; width: 12px; height: 12px; border: 1px #a4a3a1 solid; border-radius: 2px; }
input[type="checkbox"] + span::after {
  z-index: 1; margin: 0 0 0 3px; width: 6px; height: 9px; }
input[type="checkbox"]:checked + span::before { background-color: #616161; border-color:#616161; }
input[type="checkbox"]:checked + span::after {
  border: 2px solid #fff; border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }*/

/* pager */
.pager { margin:30px 0; }
.pager li { display:inline-block; margin:0 5px; }
.pager li a { display: block; width:24px; height:24px; line-height:22px; font-size:13px; color:#000; background:#fff; border:1px solid #a4a3a1; }
.pager li a:hover,
.pager li.active a { color:#fff; background:#ff7e36; border-color:#ff7e36; }
.pager li.pages { display:none; }
.pager li.prev a, .pager li.next a { border:0; font-size:18px; color:#999; line-height:24px; }
.pager li.prev a:hover, .pager li.next a:hover { color:#ff7e36; background:none; border:0; }


/*----- menu -----*/
#menu { position:relative; float:left; width:380px; height:100vh; }
#menu > .page { visibility:hidden; position:absolute; top:0; left:0; width:100%; height:100%; }
#menu > .page.on { visibility:visible; }

/* page-1 */
.header { position:relative; padding:0 15px 15px; background:#ff7e36; color:#fff; text-align:center; overflow:hidden; }
.header h1 {
  display:block; width:182px; height:37px; margin:0 auto; padding-top:10px; color:#fff; font-size:14px; line-height:1;
  background:url("../img/h1_bg.png") top center no-repeat; background-size:182px 37px; }
#page-1 .header h1 { margin-bottom:8px; }
.header h1 span { font-size:16px; }
.header .total { width:310px; margin:auto; }
.header .total li { float:left; width:140px; }
.header .total li + li { margin-left:30px; }
.header .total li i { display:inline-block; }
.header .total li p { margin-top:10px; padding-bottom:6px; border-bottom:2px solid #fff; font-weight:bold; line-height:1; white-space:nowrap; }
.header .total li p span { font-size:19px; }
.header .btn { margin-top:14px; font-size:12px; }
.header .btn a { position:relative; display:inline-block; width:200px; height:26px; line-height:26px; background:#ffd8c1; border-radius:13px; }
.header .btn a:after {
  content:"\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position:absolute; top:3px; right:11px; color:#ff7e36; line-height:1; font-size:18px; }
.header .back { position:absolute; top:13px; left:15px; }

.scroll { overflow:auto; background:#fff; }
.scroll iframe { width:100%; height:100%; }

.sort { padding:5px; text-align:right; }
.sort button {
  padding:3px 10px; background:#efefef; font-size:11px; border:1px solid #ddd; border-radius:20px; cursor:pointer;
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; }
.sort button.active { border-color:#ff7e36; background:#ffe7d9; }
.sort button.up:after { content:"\f0d8"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left:3px; }
.sort button.down:after { content:"\f0d7"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left:3px; }

.bukken_list { border-top:1px solid #dedede; }
.bukken_list > li { min-height:100px; font-size:12px; border-bottom:1px solid #dedede; }
.bukken_list .photo { position:relative; float:left; width:100px; height:100px; background-size:cover; background-position:center; }
.bukken_list .photo a { display:block; width:100%; height:100%; position:absolute; top:0; left:0; }
.bukken_list .detail { margin-left:100px; padding:10px 15px; }
.bukken_list .detail .place { margin-bottom:5px; text-align:left; }
.bukken_list .detail .place:before {
  display:inline-block; content:""; width:4px; height:16px; margin-right:10px; border-radius:2px; background:#ccc; vertical-align:-3px; }
  .bukken_list .cat-house-all .detail .place:before  { background:#fd4b5a; }
  .bukken_list .cat-house-rest .detail .place:before { background:#00c0ee; }
  .bukken_list .cat-land .detail .place:before       { background:#43b374; }
.bukken_list .detail .lat,
.bukken_list .detail .lng { display:none; }
.bukken_list .detail .total { overflow:hidden; }
.bukken_list .detail .total li {
  position:relative; float:left; width:48%; padding-left:18px; padding-bottom:3px; line-height:20px;
  border-bottom:1px solid #000; white-space: nowrap; }
.bukken_list .detail .total li + li { margin-left:4%; }
.bukken_list .detail .total li i { position:absolute; top:0; left:0; }
.bukken_list .detail .total li span { font-size:16px; }
.bukken_list .detail .btn { margin-top:5px; text-align:right; font-size:11px; line-height:1; }
.bukken_list .detail .btn a:after { content:"\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-left:5px; color:#ff7e36; font-size:16px; vertical-align:-1px; }

/*.btn_reload {
  display:inline-block; cursor:pointer; margin:40px 0; padding:7px 15px;
  font-size:13px; line-height:1; background:#f4f3f1; border-radius:20px; }*/

/* page-2 */
.log { padding:30px 20px; }
.log:nth-child(2n) { background:#fbf7f1; }
.log table { width:100%; border-collapse:collapse; }
.log th, .log td { font-weight:normal; text-align:left; }
.log th { padding-bottom:3px; font-size:12px; border-bottom:1px solid #000; }
.log th span { font-size:15px; }
.log td { opacity:0.7; font-size:13px; }
.log tr:nth-child(2) td { padding-top:10px; }
.log .year, .log .month { width:5em; padding-right:15px; text-align:right; }
.log .year { font-size:16px; font-weight:bold; color:#ff7e36; border:0; }
.log .month { font-size:14px; }
.log i { margin-right:6px; vertical-align:-3px; }
.log i img { vertical-align:1px; }

.btn_more { font-size:12px; }
.btn_more a { position:relative; display:inline-block; width:200px; height:26px; line-height:26px; background:#ece6de; border-radius:13px; }
.btn_more a:after {
  content:"\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position:absolute; top:3px; right:11px; color:#ff7e36; line-height:1; font-size:18px; }
.btn_more.close a:after { content:"\f106"; }

.btn_back { font-size:12px; }
.btn_back a { position:relative; display:inline-block; width:200px; height:26px; line-height:26px; background:#ece6de; border-radius:13px; }
.btn_back a:after {
  content:"\f104"; font-family: "Font Awesome 5 Free"; font-weight: 900; position:absolute; top:3px; left:11px; color:#ff7e36; line-height:1; font-size:18px; }

#page-2 .btn_more { margin-top:-13px; }

/* gmap */
#gmap { margin-left:380px; height:100vh; }
#gmap .gm-style-iw { /*top:20px!important;*/ left:0!important; }
#gmap .infoWindow { background:#fff; }
#gmap .bukken_list { border:0; }
#gmap .bukken_list > li { border-bottom:0; }
#gmap .bukken_list .detail { padding:10px 13px; padding-right:0; /*padding-right:25px;*/ }
#gmap .bukken_list .detail .total li { font-size:10px; }
#gmap .bukken_list .detail .total li i { top:3px; }
#gmap .bukken_list .detail .total li span { font-size:14px; }
#gmap .closebtn { top:10px!important; right:10px!important; width:13px!important; height:13px!important; }
#gmap .closebtn img { margin:0!important; }

/* detail */
#detail .left  { float:left; width:20%; }
#detail .right { float:right; width:78%; }
#detail .bukken_list { border:0; }
#detail .bukken_list > li { border:0; font-size:14px; }
#detail .bukken_list .photo { float:none; width:100%; height:0; padding-top:100%; }
#detail .bukken_list .detail { margin:0; padding:15px 0 0 0; }
#detail .btn_back { margin:15px 0; }


@media (min-width: 1000px) {
  .con { width:1000px; margin:auto; padding:20px; }
}
@media (min-width: 641px) {
  .no-pc { display:none; }
}
@media (max-width: 999px) {
  .con { width:100%; padding:20px; }
}
@media (max-width: 768px) {
	header h1 { font-size:20px; }
	header .lead { display:none; }
}
@media (max-width: 640px) {
  .no-sp { display:none; }
	
	header .by { font-size:10px; }
	header .by img { width:80px; }
  
  #wrapper { width:100%; }
  #top #wrapper { height:100vh; }
  #menu { position:relative; float:none; width:100%; height:80px; }
  #gmap { margin-left:0; height:95vh; height:-webkit-calc(100% - 80px) ; height:calc(100% - 80px); }
  
  .header { padding:0 5px 10px; }
  .header h1 { margin:0; font-size:12px; }
  .header h1 span { font-size:14px; }
  .header .total li i img { width:20px; height:18px; margin-right:2px; vertical-align:-3px; }
  .header .total li p { display:inline-block; margin-top:0; padding:0 10px 5px; font-size:12px; }
  .header .total li p span { font-size:16px; }

  #menu .btn { z-index:3; position:absolute; top:10px; right:8px; font-size:11px; }
  #menu .btn a { position:relative; display:inline-block; width:auto; height:26px; padding:0 28px 0 15px; line-height:26px; background:#ffd8c1; border-radius:13px; }
  #menu .btn a:after {
    content:"\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position:absolute; top:3px; right:11px; color:#ff7e36; line-height:1; font-size:18px; }
  #menu.open { height:100vh; }
  #menu.open .btn a:after { content:"\f106"; }
  
  #page-1 { z-index:1; }
  #page-1 .header h1 { margin-bottom:5px; }
  #page-1 .scroll { display:none; }
  #page-2 { z-index:2; display:none; visibility:visible!important; height:100vh; }
  #page-2 .header { height:47px; }
  #page-2 .scroll { height:95vh; height:-webkit-calc(100% - 47px) ; height:calc(100% - 47px); }
  .log { padding:15px; }
	#gmap .bukken_list .photo { width:80px; height:80px; }
	#gmap .bukken_list .detail { margin-left:80px; }
	#gmap .bukken_list .detail .total li { float:none; width:100%; }
	#gmap .bukken_list .detail .total li + li { margin:5px 0 0; }
  #gmap .bukken_list .detail .total li span { font-size:13px; }
  
  #detail .con { padding:0; }
  #detail .left,
  #detail .right { float:none; width:100%; }
  #detail .left { padding:15px 15px 0; }
  #detail .bukken_list .photo { width:200px; height:200px; margin:auto; padding:0; }
  
}

/* animation */
@-webkit-keyframes rotateY {
	0% {
      -webkit-transform:rotateY(0deg);
      transform:rotateY(0deg);
  }
  25% {
      -webkit-transform:rotateY(90deg);
      transform:rotateY(90deg);
  }
  50% {
      -webkit-transform:rotateY(180deg);
      transform:rotateY(180deg);
  }
  75% {
      -webkit-transform:rotateY(270deg);
      transform:rotateY(270deg);
  }
  100% {
      -webkit-transform:rotateY(360deg);
      transform:rotateY(360deg);
  }
}
@keyframes rotateY {
	0% {
      -webkit-transform:rotateY(0deg);
      -moz-transform:rotateY(0deg);
      transform:rotateY(0deg);
  }
  25% {
      -webkit-transform:rotateY(90deg);
      -moz-transform:rotateY(90deg);
      transform:rotateY(90deg);
  }
  50% {
      -webkit-transform:rotateY(180deg);
      -moz-transform:rotateY(180deg);
      transform:rotateY(180deg);
  }
  75% {
      -webkit-transform:rotateY(270deg);
      -moz-transform:rotateY(270deg);
      transform:rotateY(270deg);
  }
  100% {
      -webkit-transform:rotateY(360deg);
      -moz-transform:rotateY(360deg);
      transform:rotateY(360deg);
  }
}
.rotateY {
    -webkit-animation:rotateY .6s linear 0s;
    -moz-animation:rotateY .6s linear 0s;
    animation:rotateY .6s linear 0s;
}