/*------------------------------------------------------------
	レイアウト調整
------------------------------------------------------------*/

@media only screen and (min-width: 813px) {
	
/*
	div#container div.contents {
		margin-bottom: 70px;
	}
*/
	
}


/*------------------------------------------------------------
	見出し部分
------------------------------------------------------------*/

h2 {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8;
	color: #000;
	padding: 0 0 7px;
	margin-bottom: 15px;
	position: relative;
	border-bottom: 1px solid #000;
}

h2:before {
	content: '';
	background: #000;
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
}

h2:before {
	bottom: -4px;
}

.categoryMark {
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	color: #fff;
	padding: 5px 15px;
	border-radius: 20px;
}

p.event,
dt.event,
p.web,
dt.web {
	background: #617846;
}

p.recommend,
dt.recommend,
p.blog,
dt.blog {
	background: #BEC358;
}

p.hawaii-store,
dt.hawaii-store,
p.tv,
dt.tv {
	background: #58BBC3;
}

p.others,
dt.others,
p.books,
dt.books {
	background: #C35865;
}

p.product-intro,
dt.product-intro {
	background: #EDDFC7;
	color: #68542F!important;
}

p.hawaii-info,
dt.hawaii-info {
	background: #89CBDF;
	color: #192441!important;
}

p.sale-info,
dt.sale-info {
	background: #E39DA6;
	color: #B7535F!important;
}

p.other-blog,
dt.other-blog {
	background: #AEC693;
	color: #334E19!important;
}

@media only screen and (min-width: 813px) {
	
	h2 {
		font-size: 2.1rem;
		letter-spacing: 0.5px;
		padding: 0 0 9px;
		margin-bottom: 20px;
	}
	
}

/*------------------------------------------------------------
	投稿日・SNSボタン
------------------------------------------------------------*/

div.dateCat {
	position: relative;
}

div.dateCat dl {
	font-size: 1.1rem;
	line-height: 19px;
	color: #9B9B9B;
	margin-bottom: 5px;
	display: flex;
	flex-wrap: nowrap;
}

div.dateCat dl dt {
	margin-right: 10px;
}

div.dateCat ul.socialBtn {
	margin-top: 10px;
}

div.dateCat ul.socialBtn li {
	float: left;
	margin-right: 5px;
}

div.dateCat ul.socialBtn li:first-child {
	width: 112px;
}


@media only screen and (min-width: 813px) {
	
	/*投稿日・SNSボタン*/
	div.dateCat dl {
		font-size: 1.2rem;
		margin-bottom: 10px;
	}
	
	div.dateCat ul.socialBtn {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
	}
	
	div.dateCat ul.socialBtn li {
		margin: 0 0 0 5px;
	}

}

/*------------------------------------------------------------
	投稿コンテンツ（本文）
------------------------------------------------------------*/

.postConts {
	padding: 20px 0 40px;
}

@media only screen and (min-width: 813px) {
	
	.postConts {
		padding: 30px 0 50px;
	}
			
}

/*------------------------------------------------------------
	PICK UP ITEM
------------------------------------------------------------*/

div.pickItem {
	background: #F6F6F6;
	margin-top: 20px;
	padding: 15px 15px 20px;
}

div.pickItem img {
	margin-bottom: 10px;
}

div.pickItem dl dt {
	font-size: 1.3rem;
	font-weight: 500;
	color: #000;
}

div.pickItem dl dd.text {
	margin-bottom: 10px;
}
	
div.pickItem dl dd a.button {
	width: 240px;
	margin-top: 20px;
}

@media only screen and (min-width: 813px) {
	
	div.pickItem {
		margin-top: 30px;
		padding: 20px;
	}
	
	div.pickItem img {
		width: 42%;
		height: auto;
		margin: 0!important;
		float: left;
	}
	
	div.pickItem img:hover {
		opacity: 0.85;
	}
	
	div.pickItem dl {
		width: 58%;
		padding-left: 25px;
		float: right;
	}
	
	div.pickItem dl dt {
		font-size: 1.6rem;
		margin-bottom: 12px;
	}
	
	div.pickItem dl dd.text {
		font-size: 1.3rem;
		margin-bottom: 0;
	}

}

/*------------------------------------------------------------
	関連商品
------------------------------------------------------------*/

#relatedItemArea {
	border-top: 1px solid #000;
	padding-top: 20px;
}



@media only screen and (min-width: 813px) {
	
	#relatedItemArea {
		padding-top: 30px;
	}
	
	#relatedItemArea .scrollItemItem img:hover {
		opacity: 0.85;
	}
}

/*------------------------------------------------------------
	関連投稿（NEWS/BLOG）
------------------------------------------------------------*/

.scrollItemPost figure {
	margin-bottom: 8px;
}

.scrollItemPost dl dt {
	font-size: 1.1rem;
	line-height: 1.4;
	color: #9B9B9B;
}

.scrollItemPost dl dd a {
	font-size: 1.2rem;
	color: #000;
	text-decoration: none;
}

@media only screen and (min-width: 813px) {
	
	.scrollItemPost dl dd a:hover {
		text-decoration: underline;
	}
	
}

/*------------------------------------------------------------
	関連投稿（MEDIA）
------------------------------------------------------------*/

div.relatedMedia {
	border: 1px solid #ddd;
	padding: 15px;
	margin-bottom: 15px;
	position: relative;
}

div.relatedMedia figure {
	width: 30%;
	height: auto;
	float: left;
}

div.relatedMedia dl {
	width: 70%;
	padding-left: 15px;
	float: right;
}

div.relatedMedia dl dt {
	margin: 5px 0 0;
}

div.relatedMedia dl dt a {
	font-weight: 500;
	color: #3B2D13;
	text-decoration: none;
}

div.relatedMedia dl dd {
	display: none;
}

div.relatedMedia p {
	background: #2E374F;
	font-size: 0.9rem;
	line-height: 20px;
	padding: 0 10px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: -5px;
	left: 10px;
}

div.relatedMedia p {
	left: auto;
	right: 10px;
}

div.relatedMedia p:after {
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 5px solid transparent;
	border-left: 5px solid #000;
}

/*WEB*/
div.relatedMedia p.web {
	background: #617846;
}

div.relatedMedia p.web:after {
	border-left: 5px solid #1C3104;
}

/*ブログ*/
div.relatedMedia p.blog {
	background: #BEC358;
}

div.relatedMedia p.blog:after {
	border-left: 5px solid #4D4F23;
}

/*書籍*/
div.relatedMedia p.books {
	background: #C35865;
}

div.relatedMedia p.books:after {
	border-left: 5px solid #67262E;
}

/*TV*/
div.relatedMedia p.tv {
	background: #58BBC3;
}

div.relatedMedia p.tv:after {
	border-left: 5px solid #25676C;
}

@media only screen and (min-width: 813px) {
	
	div.relatedMedia {
		border: 1px solid #ddd;
		padding: 20px;
		margin-bottom: 20px;
	}
	
	div.relatedMedia figure {
		width: 25%;
	}
	
	div.relatedMedia figure img:hover {
		opacity: 0.85;
	}

	div.relatedMedia p {
		font-size: 1rem;
		line-height: 24px;
		right: 25px;
	}
	
	div.relatedMedia dl {
		width: 75%;
		padding-left: 20px;
	}
	
	div.relatedMedia dl dt {
		font-size: 1.4rem;
		margin: 5px 0 10px;
	}
	
	div.relatedMedia dl dt a:hover {
		text-decoration: underline;
	}
	
	div.relatedMedia dl dd {
		display: block;
	}
}

/*------------------------------------------------------------
	PAGER （NEWX/PREVIEW）
------------------------------------------------------------*/

.postPager {
	border-top: 1px solid #000;
	position: relative;
	padding-top: 20px;
	margin: 20px 0 50px;
}

.postPager:after {
	content: '';
	background: #000;
	width: 100%;
	height: 2px;
	position: absolute;
	top: -4px;
	left: 0;
}

.postPager .next {
	width: 49%;
	float: left;
}

.postPager .prev {
	width: 49%;
	float: right;
}

.postPager a.buttonBox {
	display: block;
	width: 100%;
	padding: 0 15%;
	font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.postPager .next a.buttonBox:before {
	background: url(../common/img/left-arrow-gry.svg) left top no-repeat;
	background-size: cover;
	right: auto;
	left: 10px;
}

.postPager .prev a.buttonBox:before {
	right: 10px;
}

@media only screen and (min-width: 813px) {
	
	.postPager {
		padding-top: 30px;
		margin: 20px 0 70px;
	}

	.postPager .next,
	.postPager .prev {
		width: 320px;
	}
	
	.postPager a.buttonBox {
		font-size: 1.2rem;
		height: 50px;
		line-height: 50px;
	}
	
	.postPager .next a.buttonBox:before {
		top: 21px;
		left: 15px;
	}
	
	.postPager .prev a.buttonBox:before {
		top: 21px;
		right: 15px;
	}
	
	.postPager .next a.buttonBox:hover:before {
		background: url(../common/img/left-arrow-wht.svg) left top no-repeat;
		background-size: cover;
	}
	
	.postPager .next a.buttonBox::after {
		left: auto;
		right: -100%;
	}
	
	.postPager .next a.buttonBox:hover:after {
		right: 0;
	}
		
}


/*------------------------------------------------------------
	サイドナビ
------------------------------------------------------------*/

@media only screen and (min-width: 831px) {
	
	/*バナー*/
	#sideBnrRight .caruselSide div {
		background: #EDE9E2;
	}
	
	#sideBnrRight .caruselSide div img {
		max-width: calc(100% - 20px);
		margin: 10px;
	}
	
	#sideBnrRight .caruselSide .slick-prev,
	#sideBnrRight .caruselSide .slick-next {
		display: none!important;
		
	}
	
	#sideBnrRight .caruselSide .slick-dots {
		padding-top: 5px;
	}
	
	/*最近の投稿*/
	#sideRight aside {
		margin-bottom: 40px;
	}
	
	#sideRight aside h6 {
		font-family:'copperplate';
	font-weight: 700;
		font-size: 1.3rem;
		text-align: center;
		line-height: 1;
		color: #000;
		padding: 16px 0;
		margin-bottom: 20px;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
		position: relative;
	}
	
	#sideRight aside h6:before,
	#sideRight aside h6:after {
		content: '';
		background: #000;
		width: 100%;
		height: 2px;
		position: absolute;
		left: 0;
	}
	
	#sideRight aside h6:before {
		bottom: -4px;
	}
	
	#sideRight aside h6:after {
		top: -4px;
	}
	
	/*Instagram*/
	#sideRight section .oneThird:not(:nth-child(n+7)) {
		margin-bottom: 10px;
	}
	
	#recentPosts article {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 20px;
	}
	
	#recentPosts article figure {
		width: 37.5%;
		height: auto;
	}
	
	#sideRight section .oneThird:hover img,
	#recentPosts article figure:hover img {
		opacity: 0.85;
		background: #fff;
	}
	
	#recentPosts article dl {
		width: 62%;
		padding: 0 0 0 20px;
		line-height: 1.8;
	}
	
	#recentPosts article dl dt {
		font-size: 1rem;
		color: #fff;
		margin-bottom: 5px;
	}
	
	#recentPosts article dl dd {
		line-height: 1.7;
		margin-bottom: 5px;
	}
	
	#recentPosts article dl dd a {
		font-size: 1.2rem;
		text-decoration: none;
		color: #000;
	}
	
	#recentPosts article dl dd a:hover {
		text-decoration: underline;
	}
	
	#recentPosts article dl dd.date {
		font-size: 1.1rem;
		color: #9B9B9B;
	}
	
	/*BLOGタブ*/
	
	#tabSelect {
		margin-bottom: 20px;
	}
	
	#tabSelect li {
		width:calc(100% / 3);
		text-align: center;
		float: left;
	}
	
	#tabSelect li a {
		display: block;
		width: 100%;
		height: 40px;
		font-size: 1.3rem;
		font-family:'copperplate';
		font-weight: 700;
		color: #BBB;
		position: relative;
		text-decoration: none;
	}
	
	#tabSelect li a:after {
		content: '';
		background: #ddd;
		width: 100%;
		height: 5px;
		position: absolute;
		bottom: 4px;
		left: 0;
	}
	
	#tabSelect li.current a:before,
	#tabSelect li a.selected:before {
		content: '';
		border-top: 5px solid #B2A68B;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -5px;
	}
	
	#tabSelect li a:hover,
	#tabSelect li.current a,
	#tabSelect li a.selected {
		color: #3B2D13;
	}
	
	#tabSelect li a:hover:after,
	#tabSelect li.current a:after,
	#tabSelect li a.selected:after {
		background-image: linear-gradient(-116deg, #8D7B5A 0%, #D8CCB1 94%);
		color: #D8CCB1;
	}
	
	
	
	}





/*------------------------------------------------------------
	個別投稿エリアのスタイル（※editor-style.cssと連動）
------------------------------------------------------------*/

div.postConts h1,
div.postConts h2,
div.postConts h3,
div.postConts h4,
div.postConts h5,
div.postConts h6 {
	background: none;
	font-weight: 500;
	line-height: 1.7;
	color: #000;
	text-align:left;
	margin: 0 0 3px;
	padding: 0;
}

div.postConts>h5:before {
	content: none;
}

div.postConts h1 {
	font-size: 1.8rem;
}

div.postConts h2 {
	font-size: 1.6rem;
}

div.postConts h3 {
	font-size: 1.5rem;
}

div.postConts h4 {
	font-size: 1.4rem;
}

div.postConts h5 {
	font-size: 1.3rem;
}

div.postConts h6 {
	font-size: 1.2rem;
}

div.postConts p + h3,
div.postConts p + h4,
div.postConts p + h5,
div.postConts p + h6 {
	margin-top: 15px;
}

div.postConts img {
	margin-bottom: 8px;
}

div.postConts strong {
	font-weight: 600;
}

@media only screen and (min-width: 813px) {
	
div.postConts h1,
div.postConts h2,
div.postConts h3,
div.postConts h4,
div.postConts h5,
div.postConts h6 {
	line-height: 2;
	color: #000;
}
	
div.postConts h1 {
	font-size: 2.2rem;
}

div.postConts h2 {
	font-size: 2rem;
}

div.postConts h3 {
	font-size: 1.8rem;
}

div.postConts h4 {
	font-size: 1.6rem;
}

div.postConts h5 {
	font-size: 1.5rem;
}

div.postConts h6 {
	font-size: 1.4rem;	
}



div.postConts pre {
	display: block;
	max-width:100%;
}

div.postConts ul,
div.postConts ol {
	margin-left: 30px;
	margin-bottom: 10px;
}

div.postConts ul li {
	list-style: disc;
	font-weight: 400;
}

div.postConts ol li {
	list-style: decimal;
}

div.postConts hr {
	border: 1px solid #ddd;
	margin: 15px 0;
}

div.postConts p {
	margin-bottom: 10px;
}


div.postConts .alignleft {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;	
}

div.postConts .alignright {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;	
}




/* 引用 */

div.postConts blockquote {
  display:block;
  background: #f6f6f6;
  padding: 15px 20px 15px 70px;
  margin: 0 0 20px;
  position: relative;
  /*Font*/
  text-align: justify;
  /*Borders - (Optional)*/

}

div.postConts blockquote p {
  color: #000;
  font-weight: bold;
 }

div.postConts blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  /*Font*/
  font-family: Georgia, serif; /* フォントを変えると"マークが変わる*/
  font-size: 60px;
  font-weight: bold;
  color: #2D271D;
  /*Positioning*/
  position: absolute;
  left: 20px;
  top:5px;
}

div.postConts blockquote::after{
  /*Reset to make sure*/
  content: "";
}

div.postConts blockquote a {
  text-decoration: none;
  background: #eee;
  padding: 0 3px;
  color: #c76c0c;
}



/*インスタ埋め込み*/		
.postConts iframe.instagram-media {
margin: 0 auto!important;
}