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

/* #Reset Styles
================================================== */
/* clear style */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

/* resetter */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
a img{vertical-align: top;} a{text-decoration: none;} a:hover{ text-decoration: none;}

/* #Site Styles
================================================== */
/* basic styles */
body {
-webkit-text-size-adjust:none;
color: #333;
font: 13px/1.231 Verdana, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'HelveticaNeue', 'Helvetica Neue', Arial,sans-serif;
*font-size: small;
*font: x-small;
background: #fff;
background-attachment:fixed;
line-height: 1.7;
}
body.type2{background: #fff;}

/* for Win IE8 */
head~/* */body {font: 13px/1.231  Verdana, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'HelveticaNeue', 'Helvetica Neue', Arial,sans-serif;}
html:not(:target) body {font: 13px/1.231  Verdana, 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'HelveticaNeue', 'Helvetica Neue', Arial,sans-serif;}

a{color: #b60436; text-decoration: none;}
a:hover{color: #b60436; text-decoration: underline;}


.fixed{position: fixed; top: 0;}
.hide{display: none !important;}

.sp{display: none;}

#detail .share{display: none;}



#menu:not(.mm-menu)
{
display: none;
}
.mm-listview>li.sep:not(.mm-divider):after{border-width: 4px;}

.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.ac{text-align: center;}
.bold{font-weight: bold;}

.s{font-size: 0.9em !important;}
.l{font-size: 1.2em !important;}
.ll{font-size: 1.4em !important;}

.col1{color: #333;}
.col2{color: #444}
.col3{color: #fff;}
.col4{color: #aaa !important;}

ul.list_a{margin:10px 0;}
ul.list_a li{border-bottom:solid 1px #eee; padding: 6px 0;}
ul.list_a li .date{font-size: 0.9em; font-weight: bold; color: #888; margin-bottom: 0px; }
ul.list_a li .note{font-size: 1.2em; line-height: 1.3;}

.box_a{margin-bottom: 25px;}
.box_b{margin-bottom: 40px;}

.box_empty{ background: #eee; text-align: center; padding: 20px 20px; margin: 0 30px; border-radius: 5px;} 
.box_empty p{margin: 0 0 7px 0;}

.btn_a{letter-spacing: 1px; font-size: 115%; font-weight: bold; border:none; color: #fff; display:inline; margin: 0; padding:0px 20px; background: #fd2b5d; height: 35px; line-height: 35px; border-radius: 2px; display: block;}
.btn_a:hover{background: #b60436; text-decoration: none; color: #fff;}
.btn_a:after{content: "\f105"; font-family: 'FontAwesome'; padding-left: 3px; color: #fff; font-size: 1.3em; float:right; display:inline; }

.btn_b{background:#b60436; font-size: 115%; padding: 3px 7px; border-radius: 1px; display: inline-block; color: #fff; }
.btn_b:hover{color: #fff;}
.btn_b a{color: #fff;}

.btn_c{background:#333; padding: 3px 7px; border-radius: 1px; display: inline-block; color: #fff; }
.btn_c:hover{color: #fff;}
.btn_c a{color: #fff;}


hr.type_a{border:none; border-top:solid 2px #37393b; height:1px; color:#FFFFFF; margin: 0 0 40px 0;}



header{background: #222; height: 45px; text-align: center; position: relative;}
header span.logo_left{display: none;}
header span.logo{ background: url(../img/f/logo.png) no-repeat center center; display: inline-block; text-indent:-9999px;  background-size: 97px 21px; width: 97px; height: 21px; margin: auto;  position: absolute; top:0; bottom: 0; left: 0; right: 0;}
header span.byjapaaan{ background: url(../img/f/logo_byjapaaan.png) no-repeat center center; display: inline-block; text-indent:-9999px; background-size: 50px 8px; width: 50px; height: 8px; margin: auto auto 0px auto; position: absolute; top:0; bottom: 2px; left: 50px; right: 0px;}

header.simple{color:#fff; overflow: hidden; font-size: 15px; }
header.simple a{color: #fff;}
header.simple .header_title{font-size: 17px; font-weight: bold;  line-height: 45px;}
header.simple .header_left{ position:absolute;  left: 10px; top:15px;}
header.simple .header_right{ position:absolute; right: 10px; top:15px;}
header.simple  .menu{position: absolute; left: 0px; top: -5px;}
header.simple  .search{position: absolute; right: 0px; top: -5px; }

header.simple  .menu img{height: 30px;  width: auto;}
header.simple  .search  img{width: 26px; height: 26px; vertical-align: middle;  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px;}


#msearch{position: relative;}
#msearch { height: 200px;}

#msearch .bg{  background: url(../img/f/index_eyecatch.jpg); background-size: cover; background-position: center; text-align: center; height:100%; position: relative; }
#msearch .bg::before{
	/* 透過した黒を重ねる */
	background-color: rgba(0,0,0,0.3);
	/* どの範囲に重ねるかを指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}
#msearch .copy{font-family: 'Sawarabi Mincho'; position: relative; padding-top:20px; color: #fff; font-size: 17px; line-height: 1.5;}

#msearch .form{ position: relative; margin: 15px 35px 0 35px; text-align: center;}

#msearch .form form .cat.check{display: none;}
#msearch .form form .select{ width: calc( 50% - 7px ); position: relative; margin-bottom: 15px;}
#msearch .form form .select .pick{background: #f3f3f3; display: block; height:30px; line-height: 30px; font-size: 15px; color: #222; border-radius: 1px;}
#msearch .form form .select .pick:hover{background-color: #ddd; text-decoration: none;}

#msearch .form form .select .pick::after{ right:5px; line-height: 30px;  position: absolute; content: "\f078"; font-family: 'FontAwesome'; font-size: 9px;}
#msearch .form form .select .list{display: none;}
#msearch .form form .prefecture{float: left; margin-right: 7px;}
#msearch .form form .cat{float: right; margin-left: 7px;}

#msearch .form form .word{float: left; width:calc(100% - 45px);}
#msearch .form form .word input{ font-size: 16px; width: 100%; height: 35px;  padding: 3px 7px; border-radius: 1px 0 0 1px; box-sizing: border-box;border: solid 1px #f3f3f3; -webkit-appearance: none; }　
#msearch .form form .word input::-webkit-input-placeholder{position: relative; top:0px; font-size: 14px;}
#msearch .form form .btn{float: left;  width: 45px;}
#msearch .form form .btn input{ -webkit-appearance:none; font-size: 20px; background:#b60436; color:#fff; height: 35px; line-height: 35px; width:calc( 100% - 1px); border:none; padding: 0; border-radius: 0 1px 1px 0; font-family: 'FontAwesome';}

#msearch .form form .word, #msearch .form form .btn{margin-bottom: 5px;}


#msearch .form form .select select{background-color: #f3f3f3; display: block; height:35px; line-height: 35px; font-size: 16px; color: #222; border-radius: 1px; width: 100%; border: none; text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 7px;}

/* Thanx https://kodocode.net/design-css-selectlist/ */
#msearch .form form .select select {
	background-image:
	  linear-gradient(45deg, transparent 50%, #222222 50%),
	  linear-gradient(135deg, #222222 50%, transparent 50%);
	background-position:
	  calc(100% - 15px) calc(1em + 0px),
	  calc(100% - 10px) calc(1em + 0px),
	  calc(100% - 2.5em) 0.5em;
	background-size:
	  5px 5px,
	  5px 5px,
	  1px 1.5em;
	background-repeat: no-repeat;
  }
  

  
  select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
  }

#msearch.sizeM .form{ margin: 0px 0px 0 0px; text-align: center;}
#msearch.sizeM .form form .select{  margin-bottom: 5px; border-bottom: solid 1px #eee;}
#msearch.sizeM .form form .word input{border: solid 1px #ddd;}
	

#msearch.sizeM{height: auto; margin-bottom: 20px;}
#msearch.sizeM ul.tags{ display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding: 3px 0 10px 0;}
#msearch.sizeM ul.tags li{   margin: 0 5px 0 0; padding: 0px; box-sizing:border-box; white-space: nowrap;}
#msearch.sizeM ul.tags li a{ border-radius: 1px; background: #f3f3f3; display: inline-block; padding: 4px 7px; color: #888; text-decoration: none;}
#msearch.sizeM ul.tags li a.selected{background: #b60436; color: #fff; text-decoration: none;}

#msearch .form form .select .pick{background: #f3f3f3; display: block; height:30px; line-height: 30px; font-size: 15px; color: #222; border-radius: 1px;}

#msearch.sizeM .reset{text-align: right;}
#msearch.sizeM .reset a{color: #ccc;}

main{margin: 10px 7px; position: relative;}
main h1{color: #222; font-size: 1.4em; margin-bottom: 15px; letter-spacing:inherit; font-family: 'Sawarabi Mincho'; letter-spacing: -1px;}
main h2{color: #222; font-size: 1.3em; margin-bottom: 10px; letter-spacing:inherit; font-family: 'Sawarabi Mincho'; letter-spacing: -0.5px;}
main p{font-size: 1.25em; line-height: 1.5; color: #222;}
main p.explanation {color: #666; font-size: 1em; position: relative; margin-top: -15px; font-family: 'Sawarabi Mincho'; letter-spacing: -0.5px;}
main p.explanation.blank{margin-top:-5px;}
img{width: 100%}


div#nav{background-color: #eee; padding: 5px; margin: 0 0 30px 0; border-radius: 2px; position:relative; overflow: hidden;}

div#nav ul{float:left;}
div#nav li{display: inline-block; margin: 16px 15px;}
div#nav ul li a{color: #333; font-size: 1.3em; font-weight: bold;}
div#nav .preview{float: right; margin: 10px 15px; font-size: 1.2em; color: #333;  border:solid 1px #ccc; background:#ddd;border-radius: 2px; padding: 5px 7px;}
div#nav .preview:hover{text-decoration: none; background-color: #ccc;}

.boxA{margin-bottom: 30px;}

.itemsA{margin:10px 0 0 0; display:flex;  flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items: flex-start; flex-wrap:wrap;}
.itemsA article.item{ flex-basis: calc(50% - 3.5px);  position: relative; margin-bottom: 15px;}
.itemsA article.item a.thumb{display: block; position: relative; margin-bottom: 3px; height: calc(100vw / 3.5); overflow: hidden; background:url('/img/blank.png'); background-size: 100px 100px; background-position: center; background-repeat: no-repeat;} 
.itemsA article.item a.thumb img{height:auto; width: 100%;  }
.itemsA article.item .prefecture{position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.8); color: #fff; padding: 2px 5px; font-size: 0.9em; letter-spacing: 1px;}
.itemsA article.item .review{position: absolute; bottom: 0; right: 0; background: rgb(255, 196, 0); color: #fff; padding: 3px 3px 3px 6px; font-size: 24px; letter-spacing: 1px; border-radius: 2px 0 0 2px;}
.itemsA article.item .type, .itemsA article.item .era{font-size: 0.8em; margin: 0 0 3px 0;}
.itemsA article.item .type{display: inline-block; margin-right: 5px;  }
.itemsA article.item .era{display: inline-block; }
.itemsA article.item h2{font-size: 1.0em; margin: 0 0 0 0; }
.itemsA article.item h2 a{color: #222;}


.itemsB article.item{margin: 0 0 10px 0; padding: 0 0 5px 0; border-bottom: solid 1px #f3f3f3;}
.itemsB article.item:last-child{border-bottom: none; padding: 0 0 0px 0;}
.itemsB article.item a.author_pic{float: left; margin-right: 5px;}
.itemsB article.item a.author_pic img{width: 30px; height: 30px;}
.itemsB article.item div.author_date{float: left; }
.itemsB article.item div.author_date .author{display: block; font-size: 1em; color: #222;}
.itemsB article.item div.author_date .date{display: block; font-size: 0.9em; color: #999;}
.itemsB article.item div.right{float: right; }
.itemsB article.item div.editthis{text-align: right;}
.itemsB article.item div.editthis a{color: #555; padding-left: 20px;}
.itemsB article.item div.rate{color: #ccc; font-size: 1.2em; }
.itemsB article.item div.rate span{color: #feb505; }
.itemsB article.item .comment{margin: 10px 0; font-size: 1em;}

.itemsB article.item ul.files{overflow: hidden; margin:10px -2px 10px -2px; }
.itemsB article.item ul.files li{height: 60px; margin: 0 2px 2px 2px; float: left; }
.itemsB article.item ul.files li a{text-align: center;}
.itemsB article.item ul.files li a img{ height: 100%; width: auto;}

#SlideUp .in{position: fixed; bottom:0; left: 0; width: 100%; box-sizing: border-box; padding: 15px; z-index: 99 !important;}
#SlideUp .layer{position:fixed; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 90;}
#SlideUp  ul{ background: #333; margin-bottom: 10px; border-radius: 3px; }
#SlideUp  ul li{border-bottom: solid 1px #666; }
#SlideUp  ul li a{display: block; line-height: 50px; height: 50px; text-align: center; color: #fff; font-size: 15px; }
#SlideUp  ul li a:hover{text-decoration: none;}

.moreA{text-align: right; }
.moreA a{color: #222; display:block; border: solid 1px #222; border-radius: 1px; padding: 9px 0; text-align: center; width: 70%; margin: 0 auto; position: relative;}
.moreA a::after{margin-left: 5px;content: "\f054"; font-family: 'FontAwesome'; color: #b60436; position: absolute; right: 10px;}


.pos_top{display: block;}
.pos_bottom{display: none;}
#detail h1{font-size: 2.8em;}
#detail h2.place_type{margin: -10px 0 20px 0; font-size: 1.3em; color: #888; }
#detail h2 span{font-size: 0.9em; }

#detail .main_pic{ overflow: hidden;  max-height:400px;}
#detail .main_pic img{ width: auto; max-width:100%; max-height: 400px;  margin: auto auto;   display:block;   }



#detail ul.thumbs{ display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; margin: 2px 0 10px 0;}
#detail ul.thumbs li{ margin: 0 2px 0 0; padding: 0px; box-sizing:border-box; }
#detail ul.thumbs li a img{max-height: 20vw; min-height: 20vw; display: block; width: auto;}

.view_meta .action{margin: 0 0 10px 0; position: relative; overflow: hidden; }
.view_meta .action div{float: left; width:calc(50% - 2.5px); font-size: 1.2em; }
.view_meta .action div.want{margin-right: 2.5px;}
.view_meta .action div.went{margin-left: 2.5px;}
.view_meta .action div a{border-radius: 2px; background: #b60436; color: #fff; display: block; overflow: hidden; box-sizing: border-box; padding: 0 10px; height: 35px; line-height: 35px;}
.view_meta .action div a span.text{font-family: 'Sawarabi Mincho'; font-weight: bold;}
.view_meta .action div a span.row{float: right;}
.view_meta .action div a.checked{background: #bbb;}

.view_meta.pos_bottom .action{margin: 50px 0 0 10px;}
.view_meta.pos_bottom .action div{float: none; width: 100%; margin: 0 0 10px 0;}
.view_meta.pos_bottom .action div a{height: 50px; line-height: 50px;}

.view_meta .review_row{width: calc(50% - 2.5px); float: left; margin: 0 2.5px 10px 0; overflow: hidden; line-height: 22px;}
.view_meta .review_row div{display: inline-block; }
.view_meta .review_row div.rate{color: #ccc; font-size: 1.2em;}
.view_meta .review_row div.rate span{color: #feb505; }
.view_meta .review_row div.row{font-size: 0.9em;}
.view_meta .review_row div.row i{font-size: 1.2em; color: #777; padding-right: 1px;}

.view_meta .author{width: calc(50% - 2.5px); float: right; margin:0 0 0 2.5px; line-height: 22px; text-align: right;}
.view_meta .author img{width: 22px; height: 22px;}
.view_meta .author a{color: #222; font-size: 0.9em;}

#detail .note{line-height: 1.5; font-size: 1.0em; margin-bottom: 10px;}

#detail ul.tags::before{content: "\f02c"; font-family: 'FontAwesome'; display: inline-block; color: #999; }
#detail ul.tags li{display: inline-block; margin-right: 5px; }
#detail ul.tags li a{color: #999;}

#reviews{margin: 20px 0 30px 0;}
#meta{margin: 0px 0;}
#meta table{border-collapse: collapse; margin-bottom: 10px; width: 100%;}
#meta table tr{border-bottom: solid 1px #f3f3f3;}
#meta table th{color: #999; font-size: 0.8em; font-weight: bold; text-align: right;  padding: 10px 10px 10px 0; white-space: nowrap; width: 1%;}
#meta table td{ padding: 10px 0; line-height: 1.4; font-size: 1em;}
#meta table tr.first th, #meta table tr.first td{padding-top: 0;}
#meta p.caution{margin: 0 0 20px 0; font-size: 1em; line-height: 1.2;}
#meta .map{margin-bottom: 30px;}
#meta .map .gomap{color: #222; margin: 5px 0; display: inline-block;}


#editFoam h2{border-bottom: solid 1px #ddd;  padding: 5px 10px 15px 10px; margin: 0 -7px;}
#editFoam .form{margin: 15px 0;}
#editFoam .form textarea, #editFoam .form input, #editFoam .form select{-webkit-appearance:none; color: #333; border:solid 1px #999; font-size: 1.4em;  border-radius: 2px; width: 100%; box-sizing: border-box; margin-bottom: 15px; padding: 5px;}
#editFoam .form textarea{width: 100%; height: 200px;  line-height: 1.5; padding: 10px; font-size: 1.3em;}

#editFoam .form div.useLabel{display: flex; width: 100%; margin-bottom: 15px; align-items: center;}
#editFoam .form div.useLabel div select,#editFoam .form div.useLabel div input{margin-bottom: 0px; }
#editFoam .form div.useLabel div.label{flex-basis: 1px; white-space: nowrap; padding-right: 10px;}
#editFoam .form div.useLabel div.value{flex-basis: 100%;}
#editFoam .form .error-message{ color: #fd2b5d; font-size: 0.9em; margin-bottom: 3px; }


#editGallery .choose_image{  overflow-y:hidden; width: 100%; position: relative; height: 95px;}
#editGallery .choose_image .choose_block{width: 75px; position: absolute; top: 0; left: 0; height: 75px;}
#editGallery .choose_image .pics{overflow-x: scroll; width:calc(100% - 80px); position: absolute; left: 80px; top: 0;  display: flex; justify-content:flex-start; height: 75px; -webkit-overflow-scrolling:touch;}
#editGallery .choose_image .pics li{ margin-right: 5px;  position: relative; height: 75px;  border: solid 5px #338ffc; box-sizing:border-box}
#editGallery .choose_image .pics li.invalid{border-color: #ddd;}
#editGallery .choose_image .pics li.invalid img{opacity: 0.6;}

#editGallery .choose_image .pics li .remove{position: absolute; right: 5px; top: 0px; height: 25px; width: 25px; line-height: 25px; text-align: center; color: #777; background: rgba(255,255,255,0.6); font-size: 20px;}
#editGallery .choose_image .pics li span.num{position: absolute; right: 0px; top: 0px; background:#338ffc; color: #fff; height: 20px; width: 20px; text-align: center; line-height: 20px; border-radius: 0 0 0 3px;}


#editGallery .choose_image .thumb{background: #f5f5f5; line-height: 75px; text-align: center; height: 65px; width: 65px; overflow: hidden; color: #999; font-size: 20px; display: block; overflow: hidden; cursor: pointer;}
#editGallery .choose_image a.thumb{height: 75px;width: 75px;}
#editGallery .choose_image .thumb img{width: 100%; height: 100%; display: block;}


#editGallery .choose_image_single{ width: 75px; height: 75px; position: absolute; top: 0; left: 0;}
#editGallery .choose_image_r{margin-left: 85px;}
#editGallery .choose_image_single .thumb{background: #f5f5f5; line-height: 75px; text-align: center; height: 75px; width: 75px; border-radius: 2px; overflow: hidden; color: #999; font-size: 20px; display: block; overflow: hidden; position: relative;}
#editGallery .choose_image_single .thumb img{width: 100%; height: 100%; display: block;}
#editGallery .choose_image_single .remove{position: absolute; right: 0px; top: 0px; height: 25px; width: 25px; line-height: 25px; text-align: center; color: #777; background: rgba(255,255,255,0.6); font-size: 20px;}

#editGallery .choose_image_r .status label, #editGallery .choose_image_r .status input{display: inline-block;}
#editGallery .choose_image_r .status label{margin-right: 10px;}
#editGallery .choose_image_r .theme ul li{display: inline-block;}
#editGallery .choose_image_r .theme ul li a{display: inline-block; width: 34px; height: 34px; border-radius: 19px; border:solid 3px #fff;}
#editGallery .choose_image_r .theme ul li a.cur{border-color: #ddd;}

#editGallery.is_house .choose_image{ height: 130px;}
#editGallery.is_house .choose_block{width: 100px; height: 100px;}
#editGallery.is_house .choose_image .thumb{ line-height: 100px; height: 90px; width: 90px; }
#editGallery.is_house .choose_image a.thumb{height: 100px;width: 100px;}

#editGallery.is_house .choose_image .pics{ width:calc(100% - 110px);left: 110px; height: 100px; }
#editGallery.is_house .choose_image .pics li{  height: 100px; }




/* 古民家登録フォーム */

/* フォーム基本レイアウト */
#formA select input, #formA .text input, #formA .password input, #formA .text input, #formA .submit_a input{ -webkit-appearance: none; border-radius: 0; }
#formA textarea{ -webkit-appearance: none; border-radius: 0; }
#formA .caption{font-size: 1.1em; margin: 0 0 5px 0; color: #555;}
#formA .require{ color:#b60436;}

#formA .pref{padding: 0 15px 0 3px;}

#formA .select select {vertical-align:middle;}
#formA .select select:-ms-expand { display: none;}
#formA .select {margin: 0px 0 15px 0; padding: 0px; min-width: 180px; position: relative; display: inline-block; vertical-align: top;}
#formA .select select {width: 100%; font-size: 115%; padding: 0px 10px; height: 35px; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #333; background: none; z-index: 1; position: relative;
}
#formA .select:after{ content: "\f0d7"; font-family: 'FontAwesome'; position: absolute; height: 35px; line-height: 35px; right: 0px; color: #333; border-left: solid 1px #333; width: 20px; text-align: center;}
#formA .input.text input,#formA .input.password input{height: 35px; width: 100%; border: 1px solid #333; padding: 0px 10px; font-size: 1.35em;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; }

#formA .input.short{display: inline-block ; width: 100%;}
#formA .input.tiny{display: inline-block ; width: 50%;}

#note-editor{min-height: 240px; width: 100%; border-width: 0 1px 1px 1px; border-style:solid; border-color: #333; padding: 5px 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; }

 #formA .textarea textarea{font-size:1.35em; height: 165px; width: 100%;  border-width: 1px 1px 1px 1px; border-style:solid; border-color: #333; padding: 5px 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
 #formA .textarea.small textarea{height: 90px; width: 100%;}


#note-editor{ border-width:1px; border-style:solid; border-color: #333;}

form .input.text.error input, .form-error{background: #ffd7e1 !important;}

#formA .select_checkbox .checkbox{display: inline-block; margin: 0 5px 10px 0; font-size: 1.25em;}
form .checkbox label{display: inline;}
form .checkbox input{display: inline; width: auto !important;}

#formA .select_radio input{display: inline-block; margin: 0 2px 10px 0; font-size: 1.25em;}
#formA .select_radio label{display: inline-block; margin: 0 15px 10px 0; font-size: 1.25em;}


/* #formA 基本レイアウト */
#formA .tr{ margin-bottom: 25px; overflow: hidden; display: block;}
#formA .tr .label{font-weight: bold; float:none; display:block; width: auto; font-size: 1.1em; color: #777; margin-bottom: 3px; overflow: hidden;}
#formA .tr .value{float:none; display:block; width: auto; margin-left: 0px; overflow: hidden;}
#formA .tr .value:after{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
#formA .tr .value .caution{margin-bottom: 5px !important; color: #888;}
#formA .tr .value .val_label{display: inline-block;}
#formA .remove_card{display: inline-block; height: 35px; line-height: 35px; font-weight: normal; font-size: 0.9em; }

#formA .error-message{margin: 3px 0 0 0; color: #ff8c10; }

/* タイプ情報 */
#formA .choose_type{margin: 0px 0 30px 0; overflow: hidden; margin-left: -0.5%; margin-right: -0.5%;}
#formA .choose_type a{float:left; display:inline; width: 32.3%; margin: 0 0.5% 5px 0.5%; height: 50px; text-align: center; line-height: 50px; background: #333; color: #fff; border-radius: 2px; font-weight: bold; font-size: 12px;}
#formA .choose_type a.cur, #formA .choose_type a:hover{background:#fd2b5d; text-decoration: none; }


#formA .choose_type i {color: #333; font-size: 17px; padding: 0 30px; line-height: 32px; display: inline-block; height: 32px;}

/* サムネイル画像情報 */
#formA .choose_pic{float:left; display:inline; float:left; display:inline; width: 180px; margin-bottom: 20px;}
#formA .choose_pic .thumb{width: 100%; height: 180px; background: #eee; text-align: center; }
#formA .choose_pic .thumb i{font-size: 100px; line-height: 180px; color: #ccc;}
#formA .choose_pic .thumb img{width: 100%;}
#formA .choose_pic .choose, #formA .choose_pic .remove{margin-top: 5px; height: 35px; line-height: 35px; text-align: center; background: #333; color: #fff; display: block;}
#formA .choose_pic .choose:hover, #formA .choose_pic .remove:hover{cursor: pointer;}

#formA .choose_pic_r{overflow: hidden; float:left; display:inline; width: 480px; margin-left: 20px; margin-bottom: 25px;}
#formA .choose_pic_r .tr{margin-bottom: 15px;}
#formA .choose_pic_r .label{display: block; margin-bottom: 3px; line-height: inherit;}
#formA .choose_pic_r .value{display: block; margin-bottom: 0px; margin-left: 0;}
#formA .choose_pic_r .title input{font-weight: bold; font-size: 1.3em; border-color:  #333; height: 40px; line-height: 40px; }
#formA .choose_pic_r textarea{border-width: 1px 1px 1px 1px;}

/* 開催日情報 */
#formA .tr.date input.short{width: 120px !important;}
#formA .tr.date .text{float:left; display:inline;}
#formA .tr.date span{float:left; display:inline; margin: 0 10px; line-height: 35px; height: 35px;}
#formA .tr.date .choose_start_date, #formA .tr.date .choose_end_date, #formA .tr.date .choose_release_date{float:left; display:inline; height: 35px; width: 35px; background: #333; color: #fff; text-align: center; line-height: 35px; font-size: 17px;}
#formA .tr.date .use_end_date{height: 35px; line-height: 35px; margin-left: 5px; float:left; display:inline; }
#formA .tr.date .use_end_date .checkbox{display: inline;}

/* 場所情報 */


#formA #map-canvas{ margin: 5px 0px; }
#formA .tr.place .place_form {position: relative;}
#formA .tr.place #place_type_address .marker{position: absolute; bottom:140px; left: 50%; width: 20px; height: 20px; line-height: 20px; text-align: center; }
#formA .tr.place #place_type_address .marker i{ font-size: 20px; color: #fd2b5d;}
#formA .tr.place #place_type_address .move_map{text-align: center; margin: 10px 0;}
#formA .tr.place #place_type_address .move{ background: #333; border-radius: 2px; color: #fff; padding: 5px; display: inline-block;}
#formA .tr.place #place_type_address .move:hover{text-decoration: none; background: #444;}

/* キャンセル付き */
form .submit_a{text-align: left; position: relative; overflow: hidden;} 
form .submit_a input{letter-spacing: 1px; font-size: 115%; font-weight: bold; border:none; color: #fff; display:inline; margin: 0; padding:0px 20px; background: #fd2b5d; height: 32px; line-height: 32px; border-radius: 1px;}
form .submit_a input.draft{ background: #aaa; margin-left: 10px;}
form .submit_a a{ display:inline; line-height: 35px; padding:0px 0px; height: 35px; margin-left: 7px;}
form .submit_a input:hover{cursor: pointer;}
form .submit_a .remove_house{float: right; color: #777;}

#formA .tr.submit_btns .label{display: none;}
#formA .tr.submit_btns{position: fixed; bottom: 0; background-color: #ddd; width: calc(100% - 14px); left:0; right:0; margin: 0; padding: 7px 7px 7px 7px; z-index: 100; }
#formA .tr.submit_btns .inner{ margin: 0 auto;}


/* 古民家登録フォームここまで */


#editFoam .form .btn input{ -webkit-appearance:none; font-size: 18px; background:#b60436; color:#fff; height: 35px; line-height: 35px; width:calc( 100% - 0px); border-width: 0; border-style: solid; padding: 0; border-radius: 2px; font-family: 'FontAwesome';}

/* Broseの検索結果タイトル部分 */
#result{position: relative; border-bottom: solid 1px #f3f3f3; padding-bottom: 10px; margin-bottom: 10px;}
#result h1 {font-size: 1.3em; margin-bottom: 3px; width: calc(100% - 35px);}
#result h2 {font-size: 1em; font-weight: normal; margin-bottom: 0; width: calc(100% - 35px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#result .open_search{position: absolute; right: 0; top:0; bottom:0; margin: auto; font-size: 28px;}

.sort{overflow: hidden; margin-bottom: 10px;}
.sort .row{ float: left;}
.sort ul{float: right;}
.sort ul li{ display: inline-block; margin-left: 3px;}
.sort ul li a{color: #999; }
.sort ul li.current a{color: #222; font-weight: bold;}

/* ページング */
#pagination{text-align:center;padding:10px;}
#pagination a{border-style:solid; border-width: 0px; border-color:#DDDDDD; margin-right:4px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background: #333; color: #fff;}
#pagination .disabled {color:#666666; font-weight:bold; padding:3px 4px;}
#pagination a.next, #pagination a.previous {font-weight:bold; border:solid 1px #FFFFFF;}
#pagination .current{color:#333; font-weight:bold; padding:7px 9px;}
#pagination a:link, #pagination a:visited { padding:5px 8px; text-decoration:none; }
#pagination a:hover{border-style:solid; border-width: 0; border-color:#DDDDDD; background: #333;}

/* ユーザページ ヘッダー */

#user_info {margin: 0 0 25px 0;}
#user_info .icon{ width: 90px; height: 90px; border-radius: 45px; background: #eee; overflow: hidden; display: block; margin: 0 auto 7px auto; text-align: center;}
#user_info .icon img{width: 90px; height: 90px; }
#user_info .icon i{font-size: 50px; line-height: 90px; color: #ccc;}
#user_info h2.username{text-align: center; font-size: 1.8em; font-weight: bold; margin-bottom: 10px; letter-spacing: inherit; display: block; }
#user_info h2:after {content: none;}

#user_info div.sns{margin-bottom: 10px; text-align: center;}
#user_info div.sns .url{color: #333; margin-bottom: 5px; text-align: center; font-size: 0.9em; font-family: 'Questrial', sans-serif; }
#user_info div.sns .url:hover, #user_info div.sns i:hover{color: #b60436;}
#user_info div.sns a{padding: 0 5px; }
#user_info div.sns i{color: #aaa; font-size: 1.2em;}
#user_info div.sns a i{color: #333;}
#user_info div.message{text-align: center; color: #888; line-height: 1.4; font-size: 1.0em;}


#user_stat{margin:10px 0 0 0; display:flex;  flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items: flex-start; flex-wrap:wrap;}
#user_stat li{ flex-basis: calc(50% - 1px);  position: relative; margin-bottom: 10px; }

#user_stat li a{font-size: 1.3em; font-weight: bold; display: block; border-bottom:solid 1px #ddd; text-align: center; color: #333; padding-bottom: 5px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;
}
#user_stat li a span{display: block;  font-weight: normal; font-size: 0.7em; margin-bottom: 3px;}
#user_stat li.cur a, #user_stat li a:hover{border-color: #b60436; color: #b60436; text-decoration: none;}

footer{border-top: solid 1px #eee; margin: 10px 7px; padding: 10px 0;position: relative;}
footer .copyright{text-align: center; color: #888;}




/* ユーザページ ヘッダーここまで */

@media screen and (max-width: 319px) {
	.itemsA article.item{ flex-basis: 100%;  }

}

@media screen and (min-width: 568px) {
	.itemsA article.item{ flex-basis: calc(33% - 3.5px);  }
	.itemsA article.item a.thumb{height: calc(100vw / 5.5);}

}

/* iphone6s ランドスケープ以上 */
@media screen and (min-width: 667px) {
	

}

/* ipad 縦以上 */
@media screen and (min-width: 768px) {
	header.simple .header_left{ left: 10px; top:20px;}
	header.simple .header_title{line-height: 64px;}
	header.simple .header_right{right: 10px; top:25px;}
	header.simple  .menu img{height: 35px;  width: auto;}
	header.simple  .search  img{width: 32px; height: 32px; vertical-align: middle;  border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}

	header{ height: 64px; text-align: center; padding-right: 147px;}
	header.simple{padding-right: 0;}
	header span.logo_left{ background: url(../img/f/logo_left.png) no-repeat center center; display: inline-block; text-indent:-9999px; background-size: 202px 16px; width: 202px; height: 16px; position: relative; top:25px;}
	header span.logo{ background: url(../img/f/logo.png) no-repeat center center; display: inline-block; text-indent:-9999px;  background-size: 120px 27px; width: 120px; height: 27px; margin: 0px 7px 0 17px; position: relative; top:17px;}
	header span.byjapaaan{ background: url(../img/f/logo_byjapaaan.png) no-repeat center center; display: inline-block; text-indent:-9999px; background-size: 71px 11.5px; width: 71px; height: 11.5px; position: relative; top:30px; left:0;}

	#msearch{height: 500px;}
	#msearch .copy {padding-top: 90px; color: #fff; font-size: 27px; line-height: 1.7;}
	#msearch .form{ position: relative; margin: 15px auto 0 auto; text-align: center; }
	#msearch.top .form{ width: 600px;}

	#msearch .form form .word input{  height: 45px; font-size: 19px;}
	#msearch .form form .word{float: left; width:calc(100% - 45px);}
	#msearch .form form .btn input{height: 45px; }
	#msearch .form form .word, #msearch .form form .btn{margin-bottom: 15px;}

	#msearch .form form .select select{font-size: 18px; height: 40px;}

  .itemsA article.item{ flex-basis: calc(33% - 3.5px);  }
  .itemsA article.item a.thumb{height: calc(100vw / 5.5);}

  	#formA .input.short{display: inline-block ; width: 50%;}
	#formA .input.tiny{display: inline-block ; width: 20%;}
	#formA .textarea.small textarea{height: 90px; width: 50%;}


	#formA .tr .label{ float:left; display:inline; width: 110px;  margin-bottom: 0; }
	#formA .tr .value{float:left; display:inline; width: calc( 100% - 130px); margin-left: 20px; }
	

  #formA .choose_type a{ width: 15.5%; margin: 0 0.5% 15px 0.5%; font-size: 15px;}
  #formA .tr.submit_btns .value{ width: 100%; margin-left: 0; }

}

/* ipad ランドスケープ以上（ここからはパソコンと同様表示） */
@media screen and (min-width: 1020px) {
	main h1{font-size: 1.6em;}
main{margin: 0 auto; padding: 20px 10px; max-width: 1300px; position: relative;}
/* サイドバーが無い場合・主にユーザページで利用 */
main#single{margin: 0 auto; padding: 20px 10px; max-width: 900px; position: relative;}



.itemsA article.item{ flex-basis: calc(33% - 3.5px); margin-bottom: 20px; }
.itemsA article.item a.thumb{height: calc(100vw / 6.7);}
#view_right .itemsA article.item a.thumb{height: calc(100vw / 5.8) ;}

.itemsA article.item .type, .itemsA article.item .era{font-size: 1.1em;}
.itemsA article.item h2{font-size: 1.3em;}
.itemsA article.item .prefecture{font-size: 1.2em;}


.itemsB article.item div.author_date .author{ font-size: 1.2em;}
.itemsB article.item div.author_date .date{font-size: 1.1em; }
.itemsB article.item .comment{margin: 10px 0; font-size: 1.2em;}
.itemsB article.item div.editthis a{font-size: 1.6em;}
.itemsB article.item ul.files{overflow: hidden; margin:10px -5px 10px -5px; }
.itemsB article.item ul.files li{height: 100px; margin: 0 5px 5px 5px; float: left; }
.itemsB article.item ul.files li a{text-align: center;}
.itemsB article.item ul.files li a img{ height: 100%; width: auto;}

.moreA a{padding: 13px 0; font-size: 1.3em;}
#result h1{font-size: 1.6em;}
#result h2{font-size: 1.2em;}

#sideL{float: left; width: 270px;}
#sideR{float: right; width: calc(100% - 300px);}

#result .open_search{display: none;}
#msearch.sizeM{display: block !important;}
#msearch.sizeM .form form .word input{ font-size: 1.3em; }
#msearch.sizeM .form form .select{width: 100%; }
#msearch.sizeM .form form .select{margin-bottom: 35px; font-size: 1.2em;}
#msearch.sizeM .form form .prefecture{float:none;}
#msearch.sizeM .form form .cat{float:none; margin-left: 0;}
/*左サイドバーでの表示のときだけ */
#msearch.sizeM .form form .cat.select{display: none;} 
#msearch .form form .cat.check{display: block;}
#msearch .form form .check{margin-bottom: 30px; text-align: left; font-size: 1.3em;}
#msearch .form form .check div.checkbox{display: block; margin-bottom: 10px;}
#msearch.sizeM ul.tags{display: block; overflow-x:inherit; text-align: left; font-size: 1.3em;}
#msearch.sizeM ul.tags li{display: inline-block; margin: 0 12px 15px 0;}

#detail{ margin: 0 auto 40px auto;} 
.pos_top{display: none;}
.pos_bottom{display: block; margin-bottom: 60px;}
#view_left{float: left; width: calc(100% - 400px);}
#view_right{float: left; width: 360px; margin-left: 40px;}
#view_right .itemsA article.item{ flex-basis: 100%;  }

.view_meta.pos_bottom{position: relative;}
.view_meta.pos_bottom .fixed{top:110px; position:fixed; z-index: 10; width: 330px; padding: 15px;  background:rgba(247, 247, 247, 0.95);}
.view_meta.pos_bottom .action{margin:0px 0 0 0; padding: 20px 0 10px 0; }

.view_meta .review_row{width: auto; float: none; margin: 0px 0 10px 0; }
.view_meta .review_row div{display: inline-block; }
.view_meta .review_row div.rate{color: #ccc; font-size: 1.4em; margin-right: 10px;}

.view_meta .review_row div.row{font-size: 1.2em;}
.view_meta .review_row div.row i{font-size: 1.2em; color: #777; padding-right: 1px;}

.view_meta .author{width: auto; float: none; margin:0 0 0 2.5px; line-height: 22px; text-align: left;}
.view_meta .author a{font-size: 1.2em;}

.related{margin-top: 300px !important; position:inherit;}

#detail .note{line-height: 1.75; font-size: 1.4em; }
#detail ul.tags li a{font-size: 1.3em;}


#detail .main_pic{ overflow: hidden;  height:auto; max-height: inherit; }
#detail .main_pic img{ height: 400px;  width: 100%; max-height: 400px;  margin: auto auto;   display:block; object-fit: cover;  }



#detail ul.thumbs{margin-top:0; position: relative; padding: 10px 0px; background-color: none;}
#detail ul.thumbs li{margin: 0 10px 0 0px;}
#detail ul.thumbs li a img{max-height: 120px; min-height: 120px; display: block; width: auto;}

#meta table th{ font-size: 1em;  padding: 10px 20px 10px 0;}
#meta table td{ line-height: 1.55; font-size: 1.2em;}
#meta p.caution{ font-size: 1.2em; line-height: 1.55;}
#meta .googlemap {height: 400px !important;}
#meta .map .gomap{font-size: 1.2em;}


/* 古民家情報編集フォーム */
#editR .tr .label{ float:none; display:block; width: auto; }
#editR .tr .label{margin-bottom: 5px; font-weight: bold;}
#editR .tr .value{float:none; display:block; width: auto; margin-left: 0px; }
#editMeta{margin-bottom: 40px;}
#editR .input.short{display: inline-block ; width: 100%;}
#editR .input.tiny{display: inline-block ; width: 30%;}
#editR .textarea.small textarea{height: 90px; width: 100%;}
#formA .tr.submit_btns{width: calc(100% - 20px); padding: 20px 10px 20px 10px;}
#formA .tr.submit_btns .inner{max-width: 1300px; margin: 0 auto;}

#editL{float: left; width: calc(100% - 400px);}
#editR{float: right; width: 370px; }



}

@media screen and (min-width: 1200px) {
	#detail .main_pic img{ height: 550px;  width: 100%; max-height: 550px;}

}
/* 大型画面 */
@media screen and (min-width: 1400px) {
	.itemsA article.item a.thumb{height: 210px;}
	#view_right .itemsA article.item a.thumb{height: 210px;}

}