@charset "utf-8";
/*------------------------------------------------------------
	Contents css
------------------------------------------------------------*/

/* 記事詳細 */

.cover{
	width:100%;
	position:relative;
	overflow:hidden;
	margin-bottom:10px;
}

.cover a{
	position:absolute;
	bottom:15px;
	left:15px;
}

.cover a img{
	display:inline-block;
	width:40px;
	height:40px;
	margin-right:10px;
	border-radius:50%;
}

.cover a span{
	display:inline-block;
	vertical-align:middle;
	color:#fff;
	font-size:109%;
	word-bwrap:normal;
	word-break:normal;
	text-shadow:1px 1px 0 #333;
}

.detail-hd-date{
	color:#666;
	margin-bottom:15px;
}

.detail-hd-ttl{
	color:#333;
	font-size:150%;
	font-weight:bold;
}

.detail-hd-txt{
	color:#333;
	line-height:1.5;
	margin-top:5px;
	padding-bottom:10px;
}

.warning-button{
	width:auto;
	padding:0 10px;
	margin-top:10px;
	text-align:right;
}

.warning-button a{
	display:inline-block;
	color:#EA66A4;
	line-height:22px;
	padding-right:18px;
	background:url(../img/icon-more.png) no-repeat right 50%;
}



/* 記事コメント */

.comment-list li{
	width:auto;
	padding:15px 10px;
	border-bottom:1px solid #ccc;
}

.comment-list li > div{
	padding:15px 0 30px;
}

.comment-user{
	width:85px;
	text-align:left;
}
.comment-user.fr{ text-align:right;}

.comment-num{
	display:inline-block;
	width:50px;
	height:20px;
	margin:0 5px 10px;
	text-align:center;
	line-height:20px;
	color:#333;
	background:#F0F0F0;
	border-radius:10px;
}

.comment-user img{
	width:60px;
	height:60px;
	border-radius:50%;
	margin-bottom:15px;
}

.comment-user a{ color:#EA66A4;}

.comment-info{
	width:100%;
	margin-left:-105px;
}

.comment-info.fl{ margin:0 -105px 0 0;}

.comment-inner{
	width:auto;
	padding-left:85px;
}

.comment-info.fl .comment-inner{ padding:0 85px 0 0;}

.comment-text{
	width:auto;
	padding:20px;
	min-height:60px;
	font-size:117%;
	line-height:1.4;
	color:#333;
	margin-bottom:10px;
	border-radius:10px;
	background:#F0F0F0;
}

.comment-return a{
	display:block;
	padding-left:35px;
	line-height:25px;
	color:#595757;
	font-size:109%;
	background:url(../img/icon-return.png) no-repeat left 50%;
}

.comment-return a:hover{ color:#333;}

.comment-date{
	font-size:109%;
	color:#595757;
	text-align:right;
}

.past-comment{
	text-align:right;
	margin-top:15px;
}

.past-comment a{
	display:inline-block;
	color:#EA66A4;
	padding-right:18px;
	background:url(../img/icon-more.png) no-repeat right 50%;
}

.comment-login{
	width:100%;
	padding:30px 0 20px;
	overflow:hidden;
}

.comment-login-user{
	float:left;
	color:#595757;
	font-size:117%;
}

.comment-login-user a{ color:#FF6699;}

.comment-logout{ float:right;}
.comment-logout a{
	display:block;
	color:#EA66A4;
	padding-right:18px;
	background:url(../img/icon-more.png) no-repeat right 50%;
}

#comment-area{
	width:100%;
	height:150px;
	padding:10px;
	background:#F0F0F0;
	border:1px solid #ccc;
	resize:none;
	overflow:hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#comment-btn{
	width:100%;
	height:40px;
	margin-top:10px;
}

#comment-btn a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:40px;
	color:#fff;
	font-size:134%;
	background:#EA66A4;
	border-radius:5px;
}


/* まとめ記事のテキスト */

.article-area{
	margin-top:30px;
	word-break:break-all;
}

.matome-txt1{
	font-size:92%;
	line-height:1.5;
}

.matome-txt2{
	font-size:117%;
	line-height:1.5;
}

.matome-txt3{
	font-size:134%;
	line-height:1.5;
}

.matome-txt4{
	font-size:117%;
	font-weight:bold;
	line-height:1.5;
}

.matome-txt5{
	font-size:134%;
	font-weight:bold;
	line-height:1.5;
}

.quote-txt{
	padding: 20px 15px 18px 40px;
	line-height:1.5;
	font-size:117%;
    background: #f5f5f5 url(../img/bg-quote.png) no-repeat 10px 10px;
}

.quote-url{
	margin-top:5px;
	color:#999;
	font-size:92%;
}

.quote-url a{
	color:#999;
	text-decoration:underline;
}

.quote-url a:hover{ text-decoration:none;}

.article-hd{
	font-size:150%;
	color:#333;
	font-weight:bold;
	padding: 0 10px 18px 0;
	margin-bottom: -18px;
	position:relative;
}

.article-hd:before{
	display:block;
	content:"";
	width:18px;
	height:18px;
	background:url(../img/bg-article-hd.png) no-repeat right 50%;
	background-size:18px 72px;
	position:absolute;
	right:0;
	bottom:0;
	z-index:2;
}

.article-hd:after{
	display:block;
	content:"";
	width:100%;
	height:2px;
	position:absolute;
	left:0;
	bottom:8px;
}

.article-sub-hd{
	font-size:125%;
	color:#333;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	padding-bottom:8px;
	margin-bottom:-10px;
}

.link-title{
	padding: 0 0 2px 8px;
    border-left: 3px solid #eee;
	line-height:1.5;
}

.link-title a{
    color: #666;
	font-size:134%;
	text-decoration:underline;
}

.link-title a:hover{ text-decoration:none;}

.link-description{
	margin-top:5px;
	color:#999;
	font-size:92%;
	line-height:1.5;
}

.link-comment{
	margin-top:5px;
	font-size:117%;
	line-height:1.5;
}

.insta-user2{
	width:100%;
	height:30px;
	line-height:30px;
	color:#333;
	margin-top:5px;
	overflow:hidden;
}

#editor .insta-user2 img{
	width:30px!important;
	height:30px!important;
	border-radius:50%;
	margin-right:5px;
}

.article-spot{ background-image:url(../img/icon-spot.png);}


.category-list{
	width:auto;
	padding:5px 10px;
}

.category-list li{
	width:auto;
	height:68px;
	padding:5px 0;
}

.category-list a{
	display:block;
	width:auto;
	height:50px;
	padding:8px;
	border:1px solid #F5F5F5;
	border-radius: 10px;
	overflow:hidden;
}

.category-info{
	float:left;
}

.category-ttl{
	color:#333;
	font-size:117%;
	margin:10px 0 5px;
}

.category-txt{
	color:#666;
}

.category-thumb{
	width:50px;
	float:right;
}

.tw-thumb{
	display:table-cell;
	vertical-align:top;
	width:48px;
	padding-top:30px;
}

.tw-info{
	display:table-cell;
	vertical-align:top;
	padding:30px 10px 0;
}

.tw-user{
	font-size: 14px;
	font-weight: 700;
}

.tw-user a{
	color:#333;
	font-weight:bold;
}

.tw-user span {
    padding-left:10px;
    color: #999;
    font-size:92%;
}

.tw-content{
    margin: 2px 0;
    font-size:117%;
    line-height: 1.5;
}

.tw-info img{
    display: block;
    max-width: 300px;
    margin-bottom: 3px;
}

.tw-date {
    color: #ccc;
    font-size:84%;
}

.iframe-wrapper{
	width:100%;
	position:relative;
	padding-top:56.25%;
}

.iframe-wrapper iframe{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}


.instagram-box .iframe-wrapper{
	padding:0;
	margin:0;
}

.instagram-box .iframe-wrapper iframe{
	position:static;
	height:auto;
	display: block;
	margin: 0 auto;
	max-width: 100%;
	box-sizing: border-box;
}


.link-button{
	width:auto;
	text-align:center;
}

.link-button a{
	display:inline-block;
	width:auto;
	min-width:240px;
	padding:0.8em 1em;
	text-align:center;
	font-size:117%;
	color:#fff;
	background:#EA66A4;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:18px;
}


/*------------------------------------------------------------
	tag
------------------------------------------------------------*/

.tag-ttl{
	font-size:134%;
	font-weight:bold;
	color:#333;
	padding:20px 10px 10px;
}

#tag-hd{
	width:auto;
	padding:15px 10px 10px;
	border-bottom:1px solid #ddd;
}

#tag-hd h3{
	font-size:134%;
	color:#333;
	font-weight:bold;
	margin-bottom:10px;
}

#tag-hd p{
	text-align:right;
	color:#333;
}

.iframe-wrapper,
.tw-thumb,
.tw-info,
.link-title,
.link-button,
.quote-txt,
.matome-txt1,
.matome-txt2,
.matome-txt3,
.matome-txt4,
.matome-txt5,
.matome-img,
.article-hd,
.instagram-box,
.article-sub-hd{
	margin-top:30px;
}

#editor > *:first-child{ margin-top:0;}

#keyword-hd {
	width:auto;
    padding: 20px 10px 10px;
	overflow:hidden;
	border-bottom:1px solid #ddd;
}

#keyword-hd h2{
    font-size: 134%;
    color: #333;
    font-weight: bold;
	float:left;
	line-height:20px;
}

#keyword-hd p{
	float:right;
	line-height:20px;
	color:#666;
}

#close{
	position:absolute;
	top:10px;
	right:5px;
	width:36px;
	height:36px;
	text-align:center;
	line-height:36px;
	cursor:pointer;
	z-index:8040;
	color:#666;
	font-size:150%;
	font-family:Arial, Helvetica, sans-serif;
}

.instagram-box{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}



/*------------------------------------------------------------ 
    style:kimono
------------------------------------------------------------*/  

.style1 .keyword-list a,
.style1 .article-tag{ background-image:url(../img/icon-keyword-style01.png);}

.style1 .section-hd{ border-color:#E75197;}

.style1 .comment-logout a,
.style1 .past-comment a{
	background-image:url(../img/icon-more-down-style01.png);
	color:#EA66A4;
}

.style1 .more a:hover,
.style1 .more.arrow-down a,
.style1 .comment-user a,
.style1 .comment-login-user a{ color:#EA66A4;}

/*.style1 .article-hd{ background:url(../img/bg-article-hd-style01.png) no-repeat right bottom;}*/

.style1 .article-hd:before{ background-position:0 0;}

.style1 .article-hd:after{ background:#EA66A4;}


.style1 .more .arrow-down,
.style1 .warning-button a{ background-image:url(../img/icon-more-down-style01.png);}


/*------------------------------------------------------------ 
    style:hair nail
------------------------------------------------------------*/  

.style2 .keyword-list a,
.style2 .article-tag{ background-image:url(../img/icon-keyword-style02.png);}

.style2 .section-hd,
.style2 .link-button a{ border-color:#CC99FF;}

.style2 .comment-logout a,
.style2 .past-comment a{
	background-image:url(../img/icon-more-down-style02.png);
	color:#CC99FF;
}

.style2 .warning-button a,
.style2 .more a:hover,
.style2 .more.arrow-down a,
.style2 .comment-user a,
.style2 .comment-login-user a{ color:#CC99FF;}

/*.style2 .article-hd{ background:url(../img/bg-article-hd-style02.png) no-repeat right bottom;}*/
.style2 .article-hd:before{ background-position:0 -18px;}

.style2 .article-hd:after{ background:#CC99FF;}

.style2 .more .arrow-down,
.style2 .warning-button a{ background-image:url(../img/icon-more-down-style02.png);}


/*------------------------------------------------------------ 
    style:goods
------------------------------------------------------------*/  

.style3 .keyword-list a,
.style3 .article-tag{ background-image:url(../img/icon-keyword-style03.png);}

.style3 .section-hd,
.style3 .link-button a{ border-color:#99CCFF;}

.style3 .comment-logout a,
.style3 .past-comment a{
	background-image:url(../img/icon-more-down-style03.png);
	color:#99CCFF;
}

.style3 .warning-button a,
.style3 .more a:hover,
.style3 .more.arrow-down a,
.style3 .comment-user a,
.style3 .comment-login-user a{ color:#99CCFF;}

/*.style3 .article-hd{ background:url(../img/bg-article-hd-style03.png) no-repeat right bottom;}*/
.style3 .article-hd:before{ background-position:0 -36px;}

.style3 .article-hd:after{ background:#99CCFF;}

.style3 .more .arrow-down,
.style3 .warning-button a{ background-image:url(../img/icon-more-down-style03.png);}


/*------------------------------------------------------------ 
    style:spot
------------------------------------------------------------*/  

.style4 .keyword-list a,
.style4 .article-tag{ background-image:url(../img/icon-keyword-style04.png);}

.style4 .section-hd,
.style4 .link-button a{ border-color:#FFCC00;}

.style4 .comment-logout a,
.style4 .past-comment a{
	background-image:url(../img/icon-more-down-style04.png);
	color:#FFCC00;
}

.style4 .warning-button a,
.style4 .more a:hover,
.style4 .more.arrow-down a,
.style4 .comment-user a,
.style4 .comment-login-user a{ color:#FFCC00;}

/*.style4 .article-hd{ background:url(../img/bg-article-hd-style04.png) no-repeat right bottom;}*/
.style4 .article-hd:before{ background-position:0 -54px;}

.style4 .article-hd:after{ background:#FFCC00;}

.style4 .more .arrow-down,
.style4 .warning-button a{ background-image:url(../img/icon-more-down-style04.png);}




