/* Theme Name: 外壁PLUS  */

*{
	margin: 0;
	padding: 0;
}
html{ font-size: 62.5%; }
body {
	background: #FFF;
	text-align: left;
	line-height: 2;
	font-family: Helvetica,Arial,’Hiragino Kaku Gothic Pro’,'ヒラギノ角ゴ Pro W3','Droid Sans',sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	font-feature-settings : "palt";
	color: #000;
	margin: 0;
}
a{ color: #2b55b0; }
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
p, maih h3, main h4{ margin: 20px 0; }
table{
	margin: 20px 0;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
th, td{ border: 1px solid #999; }
th{ background: #eee; }
ul, ol{ padding-left: 20px; }

@media screen and (min-width: 641px){
	a:hover{
		text-decoration: none;
		-webkit-transition: .3s;
		transition: .3s;
	}
	a:hover img{
		opacity: .7;
		-webkit-transition: .3s;
		transition: .3s;
	}
	.inner{
		margin: auto;
		width: 800px;
		overflow: hidden;
	}
	th, td{
		padding: 5px 10px;
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 640px){
	.inner{
		padding: 0 15px;
		width: 100%;
		box-sizing: border-box;
	}
	th, td{
		padding: 8px 5px;
		font-size: 1.4rem;
	}
	.balloonl:after{
		top: 5%;
	}
	.balloonl:before{
		top: 5%;
	}
}

/* ------------------------------------------------
 header
------------------------------------------------ */
header{ border-bottom: 1px solid #eee; }
#logo{
	display: inline-block;
	padding-top: 2px;
	height: 50px;
	box-sizing: border-box;
	font-size: 2.4rem;
}
#logo a{
	text-decoration: none;
	color: #000;
}

/* ------------------------------------------------
 main
------------------------------------------------ */
main h1, main h2{
	text-align: center;
	line-height: 1.2;
	font-weight: bold;
}
.eyecatch{
	position: relative;
	background: url(images/eyecatch.jpg) center no-repeat;
	background-size: cover;
	height: 30vh;
}
main .eyecatch h1{
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 10px 30px;
	width: 100%;
	background: rgba(0, 0, 0, .3);
	box-sizing: border-box;
	color: #fff;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
main h2{
	position: relative;
	padding: 15px;
	background: #fff;
	border: 1px solid #999;
	box-shadow: 3px 3px 0 #999;
}
main h2:before, main h2:after{
	position: absolute;
	content: "";
	left: 50%;
	border: 10px solid transparent;
	border-top: 16px solid;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
main h2:before{
	bottom: -29px;
	border-top-color: #999;
}
main h2:after{
	bottom: -26px;
	border-top-color: #fff;
}
main h3{
	position: relative;
	padding: 0 0 10px 20px;
	border-bottom: 2px solid #999;
}
main h3:before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
	background: #b99768;
}
table.hikaku{
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
table.hikaku th, table.hikaku td{
	border: 0;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
table.hikaku thead th{
	background: #999;
	color: #fff;
}
table.hikaku tbody th{ background: none; }
table.hikaku tr:nth-of-type(even){ background: #efefef;}
table.hikaku td{
	position: relative;
	padding-top: 50px;
}
table.hikaku td:before{
	position: absolute;
	top: 0;
	left: 50%;
	line-height: 1;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
table.hikaku td.maru2:before{
	content: "◎";
	top: 10px;
	font-size: 4.2rem;
	color: #F44336;
}
table.hikaku td.maru:before{
	content: "○";
	font-size: 6.4rem;
	color: #EF9A9A;
}
table.hikaku td.sankaku:before{
	content: "△";
	top: 20px;
	font-size: 3.6rem;
	color: #FFC107;
}
table.hikaku td.batsu:before{
	content: "×";
	font-size: 6.4rem;
	color: #BBDEFB;
}
table.hikaku th.no1{ background: #eab820; }
table.hikaku td.no1{ background: #fffde7; }
table.hikaku tr:nth-of-type(even) td.no1{ background: #f4ee98; }

@media screen and (min-width: 641px){
	main{ background: #f2f2f2; }
	article{ margin: 100px 0; }
	.index{
		padding: 0 50px;
		background: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	}
	main h1, main h2{ font-size: 3.6rem; }
	main h2{ margin: 80px 0 50px; }
	main h3{ font-size: 2.4rem; }
	main h4{ font-size: 2rem; }
}
@media screen and (max-width: 640px){
	article{ margin: 50px 0; }
	main h1, main h2{ font-size: 2.4rem; }
	main h2{ margin: 50px 0 30px; }
	main h3{ font-size: 2rem; }
	main h4{ font-size: 1.8rem; }
}

/* ------------------------------------------------
 refine-search
------------------------------------------------ */
#refine{
	padding: 50px;
	background:
		-webkit-linear-gradient(45deg, #666 5px, transparent 5px),
		-webkit-linear-gradient(135deg, #666 5px, transparent 5px),
		-webkit-linear-gradient(225deg, #666 5px, transparent 5px),
		-webkit-linear-gradient(315deg, #666 5px, transparent 5px);
	background:
		linear-gradient(45deg, #666 5px, transparent 5px),
		linear-gradient(135deg, #666 5px, transparent 5px),
		linear-gradient(225deg, #666 5px, transparent 5px),
		linear-gradient(315deg, #666 5px, transparent 5px);
	border: 1px solid #666;
}
#refine h2{
	padding: 0;
	border: 0;
	box-shadow: none;
}
#refine h2:before, #refine h2:after{
	position: static;
	border: 0;
}
#searchform section{
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}
#searchform section h3{
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 20px 0 10px;
	background: #b99768;
	box-shadow: 1px 1px 3px #ccc;
	line-height: 1.4;
	font-weight: normal;
	font-size: 1.8rem;
	color: #fff;
}
#searchform section label{
	position: relative;
	display: inline-block;
	font-size: 1.6rem;
	cursor: pointer;
}
#searchform section label:before, #searchform section label:after{
	position: absolute;
	content: ""
}
#searchform section label:before{
	top: 6px;
	left: 5px;
	width: 10px;
	height: 10px;
	border: 1px solid #999;
}
#searchform section label.checked:after{
	top: 1px;
	left: 8px;
	width: 5px;
	height: 12px;
	border-bottom: 3px solid #e2574c;
	border-right: 3px solid #e2574c;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#searchform section input[type=checkbox], #searchform section input[type=radio]{ display: none; }
.refine_btn{
	display: block;
	margin: auto;
	padding: 0 20px;
	background: #666;
	border: 0;
	border-radius: 5px;
	font-size: 1.8rem;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
}
@media screen and (min-width: 641px){
	#refine{ margin: 50px 0; }
	#refine .inner{
		padding: 10px 50px 15px;
		width: 600px;
	}
	#refine h2{
		margin-bottom: 10px;
		font-size: 2.4rem;
	}
	#searchform section label{ padding: 0 25px; }
	#searchform section label:hover{
		background: #f2f2f2;
		border-radius: 5px;
	}
	.refine_btn{ width: 60%; }
	.refine_btn:hover{
		position: relative;
		top: 1px;
	}
}
@media screen and (max-width: 640px){
	#refine{
		margin: 30px 0;
		padding: 20px 15px;
	}
	#refine h2{ font-size: 5vw; }
	#refine .inner{ padding: 20px 15px; }
	#searchform section .contents{ font-size: 0; }
	#searchform section label{
		margin: 0 2% 5px 0;
		padding: 0 10px 0 30px;
		width: 49%;
		border: 1px solid #ddd;
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 1.4rem;
	}
	#searchform section label:nth-of-type(even){ margin-right: 0; }
	.refine_btn{ width: 100%; }
}

/* ------------------------------------------------
 ranking
------------------------------------------------ */
.store_box, #search section{ position: relative; }
.store_box .rank{
	position: absolute;
	top: 0;
}
.store_box .rank:before{
	position: absolute;
	text-align: center;
	color: #fff;
}
.store_box .rank:after{
	position: absolute;
	content: "";
	bottom: -15px;
	border: 15px solid transparent;
}
.store_box h3, #search section h3{
	margin-bottom: 10px;
	font-weight: normal;
}
.store_box h3:before, #search section h3:before{
	position: static;
	width: 0;
}
.store_box h3 a, #search section h3 a{
	position: relative;
	display: block;
	color: #000;
}
.store_box h3 a:before, #search section h3 a:before{
	position: absolute;
	content: "";
	top: 50%;
	right: 7px;
	width: 10px;
	height: 10px;
	border-top: 2px solid;
	border-right: 2px solid;
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%);
}
#ranking section:nth-of-type(1), .store_box.rank1, #search section:nth-of-type(1){ border-color: #FDD835; }
#ranking section:nth-of-type(1) .rank:before, .store_box.rank1 .rank:before{ content: "1"; background: #fdd724; }
#ranking section:nth-of-type(1) .rank:after, .store_box.rank1 .rank:after{ border-left-color: #fdd835; border-right-color: #fdd835; }
#ranking section:nth-of-type(2), .store_box.rank2{ border-color: #E0E0E0; }
#ranking section:nth-of-type(2) .rank:before, .store_box.rank2 .rank:before{ content: "2"; background: #e0e0e0; }
#ranking section:nth-of-type(2) .rank:after, .store_box.rank2 .rank:after{ border-left-color: #e0e0e0; border-right-color: #e0e0e0; }
#ranking section:nth-of-type(3), .store_box.rank3{ border-color: #D7CCC8; }
#ranking section:nth-of-type(3) .rank:before, .store_box.rank3 .rank:before{ content: "3"; background: #d7ccc8; }
#ranking section:nth-of-type(3) .rank:after, .store_box.rank3 .rank:after{ border-left-color: #d7ccc8; border-right-color: #d7ccc8; }

.store_box .catchcopy, #search section .catchcopy{
	margin-bottom: 30px;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	line-height: 1.2;
}
.store_box .feature li, #search section .feature li{
	position: relative;
	margin: 15px 0;
	padding-left: 30px;
}
.store_box .feature li:before, .store_box .feature li:after,
#search section .feature li:before, #search section .feature li:after{
	position: absolute;
	content: "";
}
.store_box .feature li:before, #search section .feature li:before{
	top: 3px;
	left: 0;
	width: 16px;
	height: 16px;
}
.store_box .feature li:after, #search section .feature li:after{
	top: 0;
	left: 5px;
	width: 8px;
	height: 15px;
	border-bottom: 5px solid #ffd27f;
	border-right: 5px solid #ffd27f;
	-webkit-transform: rotate(45deg);
}
.store_box th, .store_box td,
#search section th, #search section td{
	border: 0;
	text-align: center;
}

/* ----------投稿リスト--------- */
.postlist{ 
	list-style: none;
	padding: 0;
}
.postlist li{
	border-bottom: 1px solid #999;
}
.postlist li a{
	position: relative;
	padding: 10px 30px 10px 10px;
	text-decoration: none;
	font-weight: 400;
	color: #000;
	box-sizing: border-box;
	align-items: center;
}
.postlist li a:hover{
	background: #f7eee7;
}
.postlist li a:before, .more a:after{
	position: absolute;
	content: "\f105";
	top: 50%;
	right: 10px;
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	color: #b49268;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.postlist .thumb{
	flex: 0 0 80px;
	padding-right: 10px;
}
.postlist .thumb img{
	width: 80px;
	height: 80px;
	object-fit: cover;
}
.more a{
	position: relative;
	display: block;
	margin: 20px auto;
	padding: 15px;
	background: #aaa;
	border-radius: 5px;
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	font-size: 1.8rem;
	color: #fff;
}
.more a:after{ color: #fff; }

/* ----------pagenation--------- */
.pagenation{ margin: 20px 0; }
.pagenation ul{
	margin-left: 0;
	list-style: none;
	text-align: center;
	font-size: 0;
}
.pagenation li{
	display: inline-block;
	margin: 0 5px 5px 0;
	font-weight: 400;
	font-size: 1.4rem;
}
.pagenation li a, .pagenation li.active{
	padding: 8px 12px;
	border: 1px solid #b49268;
	line-height: 1;
	color: #b49268;
	font-weight: bold;
}
.pagenation li a{
	display: block;
	text-decoration: none;
}
.pagenation li.active{
	background: #b49268;
	color: #fff;
}

@media screen and (min-width: 641px){
	#search{ margin: 50px 0; }
	.store_box, #search section{
		margin-bottom: 50px;
		padding: 30px 40px;
		border: 5px solid #ddd;	
	}
	.store_box.bn{ margin-bottom: 30px; }
	.store_box .rank{
		left: 20px;
		width: 65px;
		height: 70px;
	}
	.store_box .rank:before{
		width: 65px;
		height: 70px;
		line-height: 1.6;
		font-size: 4.8rem;
	}
	.store_box .rank:after{
		border-left-width: 32.5px;
		border-right-width: 32.5px;
	}
	.store_box h3, #search section h3{ font-size: 3.6rem; }
	.store_box h3{ padding-left: 80px; }
	.store_box h3 a:hover, #search section h3 a:hover{
		background: #f2f2f2;
		border-radius: 3px;
	}
	.store_box .img{
		flex: 1 0 300px;
		padding-right: 20px;
	}
	.store_box .detail{ flex: 1 1 100%; }
	.store_box .catchcopy, #search section .catchcopy{ font-size: 3.6rem; }
	.store_box table, #search section table{
		border-collapse: separate;
		border-spacing: 5px;
	}
	.more a{ width: 60%; }
}
@media screen and (max-width: 640px){
	.store_box, #search section{
		margin-bottom: 50px;
		padding: 15px;
		border: 5px solid #ddd;
	}
	.store_box.bn{ margin-bottom: 20px; }
	.store_box .rank{
		left: 10px;
		width: 40px;
		height: 40px;
	}
	.store_box .rank:before{
		padding-top: 0;
		width: 40px;
		height: 40px;
		font-size: 3rem;
	}
	.store_box .rank:after{
		border-left-width: 20px;
		border-right-width: 20px;
	}
	.store_box h3, #search section h3{ font-size: 3rem; }
	.store_box h3{ padding-left: 50px; }
	.store_box .flx{ display: block; }
	.store_box .img{ text-align: center; }
	.store_box .tbl_l, #search section .tbl_l{
		margin-bottom: 10px;
		padding-right: 0;
		width: 100%;
		text-align: center;
	}
	.store_box .catchcopy, #search section .catchcopy{ font-size: 2.4rem; }
	.store_box thead, .store_box tbody,
	#search section thead, #search section tbody{
		display: table-cell;
		vertical-align: top;
	}
	.store_box tr, #search section tr{ display: block; }
	.store_box th, .store_box td,
	#search section th, #search section td{
		display: block;
		margin: 4px 0;
		height: 40px;
		line-height: 1.4;
	}
	.store_box td, #search section td{ border-bottom: 1px solid #ddd; }	
	.postlist li{ font-size: 15px; }
	.more a{ width: 100%; }
}

/* ------------------------------------------------
 btn
------------------------------------------------ */
.bt_cv a {
	position: relative;
	display: block;
	border-radius: 5px;
	background: #FF9800;
	box-shadow: 1px 1px 3px #ccc;
	text-decoration: none;
	text-align: center;
	line-height: 1.4;
	color: #fff;
}
.bt_cv a:before {
	position: absolute;
	content: "";
	top: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid;
	border-right: 2px solid;
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%);
}

@media screen and (min-width: 641px){
	.bt_cv a{
		padding: 20px 40px;
		font-size: 2.4rem;
	}
	.bt_cv a:before { right: 30px; }
	.bt_cv a span{ font-size: 2rem; }
}
@media screen and (max-width: 640px){
	.bt_cv a{
		padding: 15px 5px;
		font-size: 5.5vw;
	}
	.bt_cv a:before { right: 15px; }
	.bt_cv a span{ font-size: 4vw; }
}

/* ------------------------------------------------
 postpage
------------------------------------------------ */
body .postpage{ word-wrap: break-word; }

#bread{
	margin-bottom: 30px;
	padding: 10px 0;
}
#bread li{
	display: inline-block;
	vertical-align: middle;
	font-size: 1.3rem;
}
#bread li:after{
	content: "＞";
	margin-left: 5px;
}
#bread li:last-child:after{ content: ""; }
.postpage .index{ padding-bottom: 50px; }
.postpage main h1{ line-height: 1.4; }
.postpage main h2{
	margin: 20px 0;
	padding: 15px 20px;
	border-top: 1px solid #666;
	border-bottom: 1px solid #ddd;
	text-align: left;
	font-size: 2.4rem;
}
#bread a{
	color: #000;
}
.postpage main h3{
	position: relative;
	margin: 20px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
	font-weight: bold;
}
.postpage main h3:before{
	position: absolute;
	content: "";
	bottom: -1px;
	left: 0;
	width: 50%;
	height: 1px;
	background: #666;
}
.postpage section{ margin: 50px 0; }
.indexlist{ border: 1px solid #ccc; }
.indexlist .ttl{
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	font-weight: bold;
}
.indexlist li:nth-of-type(even){ background: #f6f6f6; }
.indexlist li a{
	position: relative;
	display: block;
	padding: 10px 10px 10px 40px;
	text-decoration: none;
	color: #000;
}
.indexlist li a:before{
	position: absolute;
	top: 6px;
	left: 10px;
	font-style: italic;
	font-size: 2rem;
	color: #b99768;
}
.indexlist li:nth-of-type(1) a:before{ content: "1."; }
.indexlist li:nth-of-type(2) a:before{ content: "2."; }
.indexlist li:nth-of-type(3) a:before{ content: "3."; }
.indexlist li:nth-of-type(4) a:before{ content: "4."; }
.indexlist li:nth-of-type(5) a:before{ content: "5."; }
.indexlist li:nth-of-type(6) a:before{ content: "6."; }
.indexlist li:nth-of-type(7) a:before{ content: "7."; }
.indexlist li:nth-of-type(8) a:before{ content: "8."; }
.indexlist li:nth-of-type(9) a:before{ content: "9."; }
.indexlist li:nth-of-type(10) a:before{ content: "10."; }
@media screen and (min-width: 641px){
	.postpage .inner{ width: 700px; }
	.postpage main h1{ font-size: 3.6rem; }
	.indexlist{ padding: 20px 30px; }
	.indexlist li:hover{
		background: #ddd;
		-webkit-transition: .5s;
		transition: .5s;
	}
	.postpage main h3{ font-size: 2rem; }
}
@media screen and (max-width: 640px){
	.postpage .btn_koushiki a{ padding: 20px 15px 20px 5px; }
	#bread{
		padding: 5px 10px;
		background: #f6f6f6;
	}
	#bread li{
		display: inline;
		line-height: 1;
	}
	.postpage main h1{ font-size: 2.4rem; }
	.postpage main h3{ font-size: 1.8rem; }
	.indexlist{ padding: 10px 15px; }
}

/* ------------------------------------------------
 footer
------------------------------------------------ */
footer{
	padding: 30px 0;
	background: #ddd;
}
footer a{
	text-decoration: none;
	color: #000!important;
}
#copyright{
	text-align: center;
	font-size: 1.2rem;
}
#pagetop{
	position: fixed;
	right: 10px;
	width: 50px;
	height: 50px;
	background: #b99768;
	opacity: .7;
	cursor: pointer;
}
#pagetop:before{
	position: absolute;
	content: "";
	top: 50%;
	left: 45%;
	width: 10px;
	height: 10px;
	border-left: 3px solid #fff;
	border-top: 3px solid #fff;
	-webkit-transform: rotate(45deg) translate(-50%);
	transform: rotate(45deg) translate(-50%);
}
@media screen and (min-width: 641px){
	footer a:hover{ text-decoration: underline; }
	#pagetop:hover{ opacity: 1; }
}

/* ------------------------------------------------
 styles
------------------------------------------------ */
.box{
	border: 1px solid #ddd;
	border-radius: 3px;
}

.marker2{
	background: -webkit-linear-gradient(transparent 0%, #FFd700 0%);
	background: linear-gradient(transparent 0%, #FFd700 0%);
	font-weight: 700;
}
.red{ color: #f00; }

.flx{ display: flex; }
.aligncenter{ text-align: center; }
img.aligncenter{ display: block; margin: auto; }
.li-n{ list-style: none; }
.mt0{margin-top: 0;}
.mt10{ margin-top: 10px; }
.mt30{ margin-top: 30px; }
.mt50{ margin-top: 50px;}
.mt80{ margin-top: 80px; }
.mb0{margin-bottom: 0;}
.mb10{ margin-bottom: 10px; }
.mb30{ margin-bottom: 30px; }
.mb50{ margin-bottom: 50px;}
.mb80{ margin-bottom: 80px; }
.pl0{ padding-left: 0; }

.f08em{ font-size: .8em!important; }
.f12em{ font-size: 1.2em!important; }
.f14em{ font-size: 1.4em!important; }
.f17em{ font-size: 1.7em!important; }
.f20em{ font-size: 2em!important; }

@media screen and (min-width: 641px){
	.pc{ display: block; }
	.sp{ display: none; }
	.box{
		margin: 30px 0;
		padding: 0 30px;
	}
}
@media screen and (max-width: 640px){
	.pc{ display: none; }
	.sp{ display: block; }
	.box{
		margin: 20px 0;
		padding: 0 15px;
	}
}

/* ------------------------------------------------
 holiday visible
------------------------------------------------ */
.holiday-off,
.holiday-on {
	display: none;
}