@charset "UTF-8";
/* ===================================================================
CSS information

 file name  :article.css
 style info :フィード/記事
=================================================================== */

 .acf-map {
           width: 100%;
           height: 400px;
           border: #ccc solid 1px;
           margin: 20px 0;
          }


.post{
	background-color: #fff;
}
.post .thumb{
	position: relative;
}

.top-index .post .thumb img,
.renovation-index .post .thumb img,
.spot-index .post .thumb img{
	width: 100%;
	width: 320px;
	height: 200px;
	object-fit: cover;
	float: inherit;
}


.post .thumb .cat{/*カテゴリ*/
	display: block;
	background-color: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.8em 1.2em;
	font-size: 12px;
	font-weight: bold;
}
.section-spot .post .thumb .cat{ color: #eb7a40;}
.section-renovation .post .thumb .cat{ color: #066e4c;}
.post .thumb .stamp{/*クーポンスタンプ*/
	display: block;
	background-color: #eb7a40;
	position: absolute;
	right: 5%;
	bottom: 5%;
	width: 25%;
	max-width: 200px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.post .thumb .num{/*ランキングナンバー*/
	display: block;
	background-color: #e6c62d;
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #fff;
	padding-top: 0.5em;
	font-family: 'Century Gothic';
	line-height: 100%;
}
.post:nth-child(2) .thumb .num{ background-color: #aba597;}
.post:nth-child(3) .thumb .num{ background-color: #b68b3c;}
.post:nth-child(n+4) .thumb .num{ background-color: #444;}
.post .thumb .num i{
	display: block;
	font-size: 10px;
	font-style: normal;
}
.item-feed .item-body{/*フィード一覧の記事コンテナ*/
	padding: 6%;
}
.post .item-body .date{
	color: #ccc;
	font-size: 10px;
	margin-bottom: 1em;
	text-align: right;
}
.item-feed .item-body h3{
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
	margin-bottom: 0.5em;
}
.item-feed .item-body .excerpt{
	font-size: 14px;
	color: #999;
	line-height: 150%;
	padding-bottom: 1em;
}
.unit-more{
	padding: 4%;
}
.item-feed .item-body .more{
	width: 40%;
}
@media (min-width: 769px) {/*PC*/
	.section-feed{
		position: relative;
		padding: 20px 0;
	}
	.section-feed:after{
		content: " ";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	.section-feed .unit-btn{
		position: absolute;
		right: 0;
		top: 0;
		width: 220px;
	}
	.item-feed{
		float: left;
		width: 32%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
	.item-feed:nth-child(3n){
		margin-right: 0;
	}
	
}
@media (max-width: 768px) {/*SP*/
	.post{
		margin-bottom: 20px;
		box-shadow: 0 2px 2px rgba(100,100,100,0.1);
	}
	.section-feed{
		padding: 20px 0;
	}
	.section-feed .unit-btn{
		width: 80vw;
		margin: 0 auto;
	}
}
/* ================個別記事================== */
.item-article{
	color: #666;
	line-height: 150%;
}
.item-article img{
	max-width: 100%;
}

.item-article .thumb img{
	width: 100%;
}
.item-article .item-body{
	padding: 6% 6% 3%;
}
.item-article h2,
.item-article h3{
	color: #333;
	line-height: 140%;
}
.item-article h3{
	border-left: solid 3px #eb7a40;
	padding:0.5em 1em;
	margin-bottom: 1.5em;
}
.item-article .entry > ul li:before{
	content: '';
	width: 12px;
	height: 12px;
	display: inline-block;
	border-radius: 100%;
	background: #eb7a40;
	position: relative;
	left: -6px;
	top: 0;
}
.item-article .item-detail{
	padding: 0 6% 6%;
}
.item-article .entry p,
.item-article .entry figure{
	margin-bottom: 1em;
}

.item-article .entry p:last-child,
.item-article .entry figure:last-child{
	margin-bottom: 3em;
}
.item-article .sns-share{/*SNSシェア*/
	padding: 6%;
	background-color: #e6e6e6;
}
.article-bnr{
	margin: 2% 0 4%;
}
.shop-info{/*基本情報*/
	background-color: #ffece2;
	padding: 6%;
}
.shop-info h4{
	border-bottom: solid 1px #eb7a40;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	color: #eb7a40;
	font-weight: bold;
}
.shop-info dl{/*基本情報*/
	overflow: hidden;
	border-bottom: dotted 1px #eb7a40;
	padding: 0.5em 0;
}
.shop-info dl dt{
	width: 80px;
	float: left;
	text-align: right;
}
.shop-info dl dd{
	margin-left: 80px;
}
.shop-info h4 i{
	margin-right: 0.5em;
}
@media (min-width: 769px) {/*PC*/
	.item-article{
		font-size: 16px;
		line-height: 160%;
		margin-bottom: 40px;
	}
	.item-article .thumb .cat{
		font-size: 16px;
	}
	.item-article .item-body .date{
		font-size: 16px;
		color: #666;
	}
	.item-article h2{
		position: relative;
		font-size: 32px;
		padding-bottom: 20px;
		margin-bottom: 40px;
	}
	.item-article h2:before{
		content: "";
		display: block;
		position: absolute;
		border-bottom: solid 2px #333;
		width: 15%;
		left: 0;
		top: 100%;
	}
	.item-article h3{
		font-size: 18px;
	}
	
	.item-article .sns-share ul{
		overflow: hidden;
		text-align: center;
	}
	.item-article .sns-share ul li{
		display: inline-block;
		width: 32%;
		margin-right: 2%;
	}
	.item-article .sns-share ul li:first-child{
		display: none;
	}
	.item-article .sns-share ul li:last-child{
		margin-right: 0
	}
}
@media (max-width: 768px) {/*SP*/
	.item-article .sns-share ul{
		margin-bottom: 1em;
	}
	.item-article .sns-share ul li{
		margin-bottom: 2%;
	}
	.item-article h2{
		margin-bottom: 1em;
	}
}
/* ================記事内クーポンバナー================== */
.cont-coupon{
	background-color: #fff8f4;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border: solid 3px #eb7a40;
	position: relative;
	margin-top: 50px;
}
.cont-coupon .ribbon{
	position: absolute;
	left: -20px;
	top: -20px;
	background-color: #eb7a40;
	color: #fff;
	padding: 0.5em 1em;
}
.cont-coupon .inner{
	overflow: hidden;
}
.cont-coupon .outline{
	padding: 7% 5% 3%;
	color: #eb7a40;
	text-align: center;
	font-weight: bold;
}
.cont-coupon .outline dl dt{
	border-bottom: dotted 1px #eb7a40;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}


.cont-coupon .coupon{
	margin-left: 22%;
}
.cont-coupon .coupon dl{
	margin-bottom: 1em;
}
.cont-coupon .coupon dl dt{
	border-bottom: dotted 1px #eb7a40;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}
.accordion{
	overflow: hidden;
	background-color: #066e4c;
}
.accordion h5{
	background-color: #eb7a40;
	color: #fff;
	padding: 1em;
	text-align: center;
}

.cont-coupon .body{
	background-color: #fff;
	overflow: hidden;
	padding: 3%;
	display: table;
	display: none;
	margin: 2%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;

  background-image: linear-gradient(
    -45deg,
    #fff 25%,
    #fff8f4 25%, #fff8f4 50%,
    #fff 50%, #fff 75%,
    #fff8f4 75%, #fff8f4
  );
  /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 16px 16px;
}
@media (min-width: 769px) {/*PC*/
	.cont-coupon .body .badge{
		display: table-cell;
		width: 15%;
		vertical-align: top;
		padding-right:2%;
	}
	.cont-coupon .body .text{
		display: table-cell;
		width: 85%;
		text-align: left;
		vertical-align: middle;
		padding-left: 2%;
		border-left: dashed 2px #066e4c;
	}
}
@media (max-width: 768px) {/*SP*/
	.cont-coupon .body .badge img{
		width: 30vw;
	}
	.cont-coupon .body .badge{
		text-align: center;
		margin: 0 auto;
		border-bottom: dotted 1px #066e4c;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	.cont-coupon .body .text{
	}
}


/*
.ribbon {
    position: relative;
    color: #ffffff ;
    background: #ec524e;
    font-size: 16pt ;
    letter-spacing: 0.2em;
    line-height: 1;
    margin: 10px -10px 10px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #ccc ;
    border-top:3px solid #ea9878;
    text-align: center;
    font-family: 'Century Gothic',sans-serif;
}
.ribbon:after,
.ribbon:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #bb2925;
}
.ribbon:after {
    left: 0;
    border-right: 5px solid #bb2925;
}
.ribbon:before {
    right: 0;
    border-left: 5px solid #bb2925;
}
*/
/* ================注意書き================== */
.attention{
	font-size: 12px;
	color: #999;
	padding-left: 1em;
	text-indent: -1em;
}
@media (min-width: 769px) {/*PC*/
	.cont-coupon .outline dl dt{
		font-size: 20px;
	}
	.cont-coupon .outline dl dd{
		font-size: 16px;
		font-weight: normal;
	}
}
@media (max-width: 768px) {/*SP*/
	.cont-coupon .coupon{
		font-size: 14px;
	}
	.cont-coupon .coupon dl dd{
		font-size: 14px;
		font-weight: normal;
	}
}