/* <system section="theme" selected="98012380861710503"> */
/*
Responsive: yes
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
*, *:before, *:after {box-sizing:border-box;}
body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: var(--color10);
	font-family: "Montserrat", sans-serif;
	font-feature-settings : "pwid" 1;
	line-height: 1.8;
}

/**** カラー設定 ****/
@supports(--css: variables) {
:root {
--color0: #fff;	/* color1上にあるテキストカラー */
--color1: #333;	/* 濃い色（枠線など） */
--color2: #eee;	/* 薄い色 */
--colorlink: #4285f4;	/* リンクカラー */
--color10: #252525;	/* メインのテキストカラー */
--color20: #fff;	/* メインの背景カラー */
}
}


::selection {
	background: var(--color10);
	color: var(--color20);
}
::-moz-selection {
	background: var(--color10);
	color: var(--color20);
}
a{
	outline: none;
	color: var(--color10);
	text-decoration: none;
	transition: all 0.2s ease;
}
a:hover{
	text-decoration: underline;
}
a img,img{
	border: none;
	vertical-align: bottom;
}
p{
	margin :1.5rem 0;
	padding: 0 0 0 0;
}
h1,h2,h3,h4,h5,h6{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 100%;
}
small{
	font-size: 0.75rem;
}
b{
	font-weight: bold;
}
ul, ol{
	margin: 1.5rem 0;
	padding: 0 0 0 1.5rem;
}
li{
	margin-bottom: 0.5em;
}
dt{
	margin-top: 1rem;
}
p:first-child,
ul:first-child,
ol:first-child,
li:first-child{
	margin-top: 0;
}
p:last-child,
ul:last-child,
ol:last-child,
li:last-child{
	margin-bottom: 0;
}
p:empty{
	display: none;
}

hr{
	border-style: solid;
	border-width: 0;
	border-top: 3px solid var(--color1);
}
hr.dot{
	border-top: 6px dotted var(--color1);
}
hr.dash{
	border-top: 4px dashed var(--color1);
}

#globalheader-container{
	background: var(--color1);
	color: var(--color0);
}


/**** レイアウト ****/
#container-inner{
	position: relative;
	padding: 0 1rem;
}
#content{
	padding: 0 0 0 0;
}
#wrapper{
	padding: 0 0 0 0;
}
#box2{
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 0 0;
}
#box2-inner{
	width: 100%;
}


/* ブログタイトル */
#blog-title{
	border: 6px solid var(--color1);
	margin: 2rem auto;
	background: var(--color20);
	box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
	max-width: 1060px;
}
.header-image-enable #blog-title #blog-title-inner{
	background-size: cover;
	height: auto;
}
#blog-title-content{
	padding: 1rem;
	text-align: center;
}
#title{
	font-size: 1.8rem;
	font-weight: bold;
}
#title a{
	color: var(--color10);
}
#blog-description{
	font-size: .85rem;
	color: var(--color10);
}

#top-editarea{}
#top-box{
	position: relative;
	border: 6px solid var(--color1);
	margin: 0 0 2rem 0;
	padding: 1rem;
	background: var(--color20);
	box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
}

/* エントリー */

.entry,
.archive-entry{
	position: relative;
	border: 6px solid var(--color1);
	margin: 0 0 2rem 0;
	padding: 0 1rem 1rem 1rem;
	background: var(--color20);
	box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
}
.entry-content{}
.page-entry .breadcrumb{
	margin: 0 0 0 0;
}

.entry-header{
	margin-bottom: 1.5rem;
}
.entry-header a{
	color: var(--color10);
}
.date{
	margin: 0 0 0.8rem -1rem;
	font-size: 0.8rem;
	color: var(--color0);
}
.date a{
	display: inline-block;
	color: var(--color0);
	font-weight: bold;
	padding: 0 0.5rem;
	background: var(--color1);
	border-right: 6px solid var(--color1);
	border-bottom: 4px solid var(--color1);
}
.date a::before{
	content: '\f043';
	font-family: blogicon;
	font-weight: normal;
}
.entry-title{
	margin: 0 0 0.3rem 0;
	text-align: center;
}
.entry-title-link{
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.3;
	word-break: break-all;
}
.page-entry .entry-title-link{
	font-size: 2rem;
}
.entry-categories{
	text-align:center;
}
.categories a{
	display: inline-block;
	background: var(--color2);
	color: var(--color1);
	font-size: 0.7rem;
	margin:0 2px 0 0;
	padding:2px 8px;
}
.categories a:last-of-type{
	margin:0 0 0 0;
}
.entry-content a.entry-see-more{
	display: block;
	background:var(--color1);
	border:6px solid var(--color1);
	font-size: 0.8rem;
	font-weight: bold;
	color: var(--color0);
	text-decoration: none;
	text-align: center;
	line-height: 3;
}
.entry-content a.entry-see-more::before{
	content: '\f024';
	font-family: blogicon;
	color: var(--color0);
	margin-right: 0.4em;
}
.entry-content a.entry-see-more:hover{
	color: var(--color1);
	background: var(--color20);
	text-decoration: none;
}
.entry-content a.entry-see-more:hover::before{
	color: var(--color1);
}
.page-index .comment-box,.page-index .author,.page-index .entry-footer-time,.page-index .entry-footer{
	display: none;
}

/* 記事編集ボタン */
.entry-header-menu a{
	position: absolute;
	z-index: 2;
	display: inline-block;
	padding: .2rem 1.5rem;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	background: #333;
	line-height: 3;
} 
.entry-header-menu a{
	color: #fff;
}

:not(.page-index) .social-buttons{
	margin-bottom: 2rem;
}

/* コメント */
.comment-box{
	position: relative;
	margin: 1.5rem 0 0 0;
}
.comment{
	margin: 0 0 0 0;
	padding:0 0 0 0;
}
.comment li{
	list-style-type: none;
	margin: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.comment li .comment-user-name{
	width: 100%;
	display: flex;
	margin: 0 0 0 0;
}
.comment li .hatena-id-icon{
	width: 64px;
	height: 64px;
	margin: 0 8px 12px 0;
}
.comment li .comment-user-id{
	font-size: .75rem;
	display: block;
	line-height: 1.3;
}

.comment li .comment-content{
	position: relative;
	background: var(--color2);
	border-radius: .8em;
	width: 100%;
	padding: 0 1em;
}
.comment li .comment-content::before{
	position: absolute;
	top: -12px;
	left: 32px;
	content: '';
	border-top: 16px solid transparent;
	border-left: 16px solid var(--color2);
}
.comment li .comment-content p{
	margin: 1em 0;
	line-height: 1.6;
}
.comment li .comment-metadata{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 0.8rem;
	text-align: right;
	width: 100%;
}
.leave-comment-title{
	display: inline-block;
	padding: 0.8em 1em 1.0em 1em;
	line-height: 1;
	background: var(--color0);
	color: var(--color1);
	border: 4px solid var(--color1);
}
.leave-comment-title:hover{
	background: var(--color1);
	color: var(--color0);
	text-decoration: none;
}
.leave-comment-title::before{
	position: relative;
	top: 0.3rem;
	content: "\f01d";
	font-family: blogicon;
	font-size: 1.5rem;
	line-height: 1rem;
	margin: 0 0.2em 0 0;
}

@media screen and (min-width: 900px){
.comment li .comment-user-name{width:64px;display:block;}
.comment li .hatena-id-icon{margin:0 0 0.2em 0;}
.comment li .comment-user-id .user-name-nickname{display:block;}
.comment li .comment-user-id{text-align:center;}
.comment li .comment-content{width:calc(100% - 80px);}
.comment li .comment-content::before{top:32px;left:-12px;border-top:16px solid var(--color2);border-left:12px solid transparent;}
}

.page-entry .entry-footer{margin:1.5rem 0 0 0;}
.page-entry .entry-footer-section{text-align:right;margin: 0 0 0 0;}

/* 見出し */
.entry-content h2{font-size:1.5rem;padding:0.7rem 0.5rem;margin:4rem 0 1.6rem 0;text-align:center;background:var(--color1);color:var(--color0);}
.entry-content h3{font-size:1.5rem;margin:1.8rem 0 1rem 0;padding:0 0 0 1.2em;position:relative;line-height:1.4;}
.entry-content h3::before{content:'';position:absolute;top:0;left:0;display:block;background:var(--color1);width:0.6em;height:0.6em;}
.entry-content h3::after{content:'';position:absolute;top:0.25em;left:0.25em;display:block;background:var(--color1);width:0.6em;height:0.6em;filter: opacity(50%);}

.entry-content h4{font-size:1.1rem;margin-top:1.5rem;padding:0 0 0 0.5em;border-left:6px solid var(--color1);}
.entry-content h5{margin-top:1.5rem;}
.entry-content h6{margin-top:1.5rem;}

.entry-content h3 + p{margin-top:1rem}
.entry-content h4 + p{margin-top:0.75rem}
.entry-content h5 + p{margin-top:0.5rem}
.entry-content h6 + p{margin-top:0.5rem}

.entry-content p{overflow:hidden;}
.entry-content a{color:var(--colorlink);text-decoration:underline;}

.entry-content .hatena-image-left,
.entry-content .hatena-image-right{
	max-width: 60%;
}


/* 目次 */
.table-of-contents{
	position:relative;
	border:3px solid var(--color1);
	padding:1rem 2rem;
}
.table-of-contents::before{
	content:'INDEX';
	position:absolute;
	top:-0.9rem;
	left:1rem;
	padding:0 0.6rem;
	font-weight:bold;
	background:var(--color20);
}
.table-of-contents li{
	margin: 0 0 0 0;
}
.table-of-contents ul{
	margin: 0 0 0 0;
}
.table-of-contents a{
	text-decoration:none;
}


.hatena-asin-detail{border: 3px solid var(--color1);position: relative;padding:0.8em 0.6em 0.8em 0.6em;}
.hatena-asin-detail .hatena-asin-detail-image{float: right;}
.hatena-asin-detail .hatena-asin-detail-info{flex: 1;}
.hatena-asin-detail .hatena-asin-detail-info li{margin: 0 0 0 0;}
.hatena-asin-detail::before{position:absolute;top:-2px;right:-2px;content:'\f034';font-family:blogicon;width:1.5rem;height:1.5rem;line-height:1.6rem;text-align:center;font-size:0.8rem;background:var(--color1);color:var(--color0);}
.hatena-rakuten-detail::before{content:'\f722';}

@media screen and (min-width: 900px){
.hatena-asin-detail{display: flex;padding:0.8em 1.5em 0.8em 0.6em;}
.hatena-asin-detail .hatena-asin-detail-image{float: none;}
}

blockquote{margin:1.5rem 0;padding:1.5em 1.5em 1.5em 3em;position:relative;font-size:90%;background-color:var(--color1);filter: brightness(470%);}
blockquote p{margin:1.5em 0;filter: brightness(26%);}
blockquote cite{display:block;font-style:oblique;font-size:0.8em;filter: brightness(26%);}
blockquote::before{
	position: absolute;
	top: 0;
	left: 0.4em;
	z-index: 2;
	font-family: blogicon;
	content:'\f704';
	font-size: 2em;
	color: var(--color1);
	height: 100%;
	filter: brightness(90%);
}

table{width:100%;border-collapse:collapse;margin:0 0 1.8em 0;}
th{border:1px solid #ccc;background:#eee;padding:0.5em;}
td{border:1px solid #ccc;padding:0.5em;}

pre.code{margin:1.5rem 0;padding:2.5em 1em 1em 1em;border:4px solid var(--color1);line-height:1.2;position:relative;
background: -webkit-linear-gradient(var(--color1), var(--color1) 2em, var(--color20) 2em, var(--color20) 100%);
background: linear-gradient(var(--color1), var(--color1) 2em, var(--color20) 2em, var(--color20) 100%);
}
pre.code::before{content:'\f038\0020'attr(data-lang);font-family:blogicon;position:absolute;top:0;left:0.5em;color:var(--color20);line-height:2;}

.exlink{border:1px solid #ccc;background:#f8f8f8;padding:0.7em;margin:0 0 1em 0;}
.exlink::before{content:"\f009";font-family:blogicon;margin-right:0.3em;}
.flexbox{-webkit-display:flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
.flexbox span:not(:first-of-type){margin-left:1%;}
.waku{border:1px solid #ccc;padding:1em;margin:1em 0;border-radius:2px;}
.animecite{display:block;font-size:80%;color:#666;margin-bottom:1.5em;}
.page-index .entry-content .animecite{display:none;}


/* 一覧表示形式 */
.archive-header-category{
	border: 6px solid var(--color1);
	margin: 0 0 2rem 0;
	padding: 1rem;
	background: var(--color20);
	box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
}
.archive-header-category .archive-heading{
	margin:0 0 0 0;
}
.archive-header-category .archive-heading::before{
	font-family: blogicon;
	font-weight: normal;
	content: '\f022';
	margin-right:0.3em;
}
.archive-entry-header .entry-title{
	text-align: left;
}
.archive-entry .categories{
	margin-bottom: 1rem;
}
.page-archive .entry-thumb{
	float: right;
	margin: 0 0 0 10px;
}




/* ページャー */
.pager a{display:block;border:6px solid var(--color1);margin:1.5rem 0;padding:1rem 1rem 1rem 3rem;background:var(--color20);box-shadow:8px 8px 0 rgba(0,0,0,0.2);}
.page-index .pager a{text-align:center;font-size:0;text-decoration:none;color:var(--color1);padding:1rem 1rem 1rem 1rem;}
.page-index .pager a::before{display:inline-block;font-family: blogicon;content:'\f008';font-size:0.8rem;margin-right:0.3em;}
.page-index .pager a::after{display:inline-block;content:'MORE POSTS';font-size:0.8rem;padding:1em 0;font-weight:bold;}
.page-index .pager a:hover{background:var(--color1);color:var(--color0);}

.pager-arrow{display:none;}
.pager-prev, .pager-next{position:relative;display:block;}
.page-entry .pager-prev::before, .page-entry .pager-next::before{position:absolute;top:calc(50% - 0.8em);left:1rem;font-family: blogicon;font-size:3rem;opacity:0.1;}
.page-entry .pager-prev::before{content:'\f005';}
.page-entry .pager-next::before{content:'\f006';}

@media screen and (min-width: 768px){
.page-entry .pager{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin:1.5rem 0;
}
.page-entry .pager a{
	margin:0 0;height:100%;padding:1rem 1rem 1rem 1rem;
}
.page-entry .pager-prev, .page-entry .pager-next{width:48.5%;}
.page-entry .pager-prev{}
.page-entry .pager-next::before{left: auto;right:1.5rem;}
.page-entry .pager .pager-next{text-align:right;}
}


/* サイドバー */
.hatena-module{border:6px solid var(--color1);margin:0 0 2rem 0;background:var(--color20);box-shadow:8px 8px 0 rgba(0,0,0,0.2);}
.hatena-module:last-of-type{position: sticky;top:1rem;}
.hatena-module-title{color:var(--color0);font-size:1.2rem;background:var(--color1);border-bottom:2px solid var(--color1);font-weight:bold;margin:0 0 1rem 0;padding:0 0.5rem;line-height:2;text-transform:uppercase;text-align:center;letter-spacing:2px;}
.hatena-module-title a{color:var(--color0);}
.hatena-module-title::before{font-family: blogicon;font-weight:normal;}
.hatena-module-profile .hatena-module-title::before{content: '\f016';}
.hatena-module-search-box .hatena-module-title::before{content: '\f01a';}
.hatena-module-category .hatena-module-title::before{content: '\f022';}
.hatena-module-recent-comments .hatena-module-title::before{content: '\f01d';}
.hatena-module-archive .hatena-module-title::before{content: '\f039';}
.hatena-module-entries-access-ranking .hatena-module-title::before{content: '\f050';}
.hatena-module-links .hatena-module-title::before{content: '\f042';}
.hatena-module-recent-entries .hatena-module-title::before{content: '\f031';}
.hatena-module-related-entries .hatena-module-title::before{content: '\f019';}
.hatena-module-body{margin:1rem;line-height:1.5;}
.hatena-module-body a{}
.hatena-module-body a:hover{}


.search-form{position:relative;overflow:hidden;background:var(--color2);}
.search-form:after{content:"\f01a";font-family:blogicon;position:absolute;right:0;height:3rem;width:3rem;text-align:center;font-size:0.9rem;line-height:3rem;color:var(--color1);}
.search-module-input{border:0px;width:calc(100% - 3rem);height:3rem;font-size:0.9rem;line-height:3rem;padding:0 1em;background:var(--color2);}
.search-module-button{border:0px;background:transparent;color:transparent;position:absolute;right:0;height:3rem;width:3rem;z-index:2;}
.search-module-button:hover{cursor:pointer;}

.hatena-module-profile .profile-icon{float:left;margin:0 .5em 0 0;}
.profile-activities, .profile-description{clear:both;}

.hatena-urllist{margin:0 0 0 0;padding:0 0 0 1.4em;}
.hatena-urllist li{}
.hatena-urllist li a{color:var(--color10);}
.hatena-urllist li:first-child{}
.hatena-urllist li:last-child{}
.urllist-item-inner{}
.urllist-image{}
.urllist-date-link{}
.urllist-date-link a{display:block;overflow:hidden;font-weight:bold;font-size:1rem;line-height:1;border-bottom:2px solid var(--color1);margin-bottom:0.3em;}
.urllist-title{display:block;overflow:hidden;word-break:break-all;font-size:0.9rem;}
.recent-entries-item{}
.recent-entries-item:last-of-type{}
.urllist-with-thumbnails{padding:0 0 0 0;}
.archive-module-months{margin-top:0;}

.recent-comments{padding-left: 0;list-style-type:none;}
.recent-comments a{font-size:90%;}
.recent-comments .user-id{display:block;}
.recent-comments .hatena-id-icon{width:32px;height:32px;}

/* 関連記事 */
.entry-footer .hatena-module-related-entries{border:0;box-shadow:0 0 0;}
.entry-footer .hatena-module-related-entries .hatena-module-title{font-size:0;border-bottom:0;}
.entry-footer .hatena-module-related-entries .hatena-module-title::before{font-size:1.5rem;}
.entry-footer .hatena-module-related-entries .hatena-module-title::after{content:'Related entries';font-family: "Montserrat", sans-serif;font-weight:bold;font-size:1.5rem;}
.entry-footer .hatena-module-related-entries .hatena-module-body{margin:0 0 0 0;}
.entry-footer .related-entries-title{font-weight:bold;font-size:110%;}
.entry-footer .related-entries-item a{}
.entry-footer .related-entries-item a:hover{}
.entry-footer .related-entries-entry-body{}


/* アーカイブ */



/* フッター */
#footer{background:var(--color1);text-align:center;padding:2rem 0;color:var(--color0);}
#footer a{color:var(--color0);}
#footer a:hover{color:var(--color0);}
#footer-inner{}
.footer-address{}
.footer-address img{vertical-align:baseline;}
.services{margin:0 0 0 0;padding:0 0 0 0;}


/* ********メディアクエリ******** */


@media screen and (min-width: 768px){
#content-inner{display:flex;justify-content:space-between;}
#wrapper{width:calc(100% - 330px);}
#box2{width:300px;}
#blog-title-content{
	padding-top: calc(1rem + (100vw - 768px) * 0.1);
	padding-bottom: calc(1rem + (100vw - 768px) * 0.1);
}
.page-archive .entry-thumb{
	width: 180px;
	height: 180px;
}
}

@media screen and (min-width: 900px){
.entry,
.archive-entry{
	padding: 0 1.5rem 1.5rem 1.5rem;
}
.date{
	margin: 0 0 0.8rem -1.5rem;
}
}

@media screen and (min-width: 1112px){
#content{max-width:1060px;margin:0 auto;}
#content-inner{}
#wrapper{width:730px;}
#main{}
#box2{width:300px;}
#blog-title-content{
	padding-top: calc(1rem + 32.4px);
	padding-bottom: calc(1rem + 32.4px);
}
#top-box{max-width:1060px;margin-right: auto;margin-left: auto;}
.entry,
.archive-entry{
	padding: 0 2rem 2rem 2rem;
}
.date{
	margin: 0 0 0.8rem -2rem;
}
.hatena-module-body a{}
.hatena-module-body a:hover{}

}


/* </system> */

.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*アンダーラインで段落分け目次*/
.entry-content .table-of-contents {
    position: relative;
    margin: 0;
    padding: .5em 1.2em 1em;
    background: #fff;
    font-size: 100%;
    border-top: solid 40px #000;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    border-left: solid 2px #000;
    border-radius: 8px;
    color: #000;
}
.entry-content .table-of-contents::before {

content: "目次";
    position: absolute;
    top: -36px;
    left: 38px;
    margin: 0;
    color: White;
    background: #000;
    border: 0;
    font-size: 120%;
    font-weight: bold;
}

.entry-content .table-of-contents::after {
    content: "\f039";
    font-family: blogicon;
    position: absolute;
    top: -35px;
    left: 13px;
    color: #fff;
    font-weight: bold;
    font-size: 120%;
}
.entry-content .table-of-contents li {
    margin: .2em 0 1em 1em;
    list-style-type: decimal;
    line-height: 1.6em;
    font-weight: bold;
}
.entry-content .table-of-contents li ul {
    margin: 0 0 1em .5em;
    padding: 0;
}
.entry-content .table-of-contents li ul li {
    margin: .2em 0 0 1em;
    font-weight: normal;
    font-size: 100%;
}
.entry-content .table-of-contents li ul li ul li {
    font-size: 90%;
}
.entry-content .table-of-contents a {
    color: #000;
    display: block;
    text-decoration: none;
    border-bottom: solid 2px #000;
}
.entry-content .table-of-contents ul li a {
    border-bottom: dashed 1px #000;
}




                /*隠すボタン*/
                .show-code-block {
                    text-align: center;
                }
                .show-code {
                    display: inline-block;
                    text-align: center;
                    display: inline-block;
                    width: 200px;
                    height: 54px;
                    cursor: pointer; 
                    text-decoration: none;
                    line-height: 54px;
                    outline: none;
                    position: relative;
                    z-index: 2;
                    border: 2px solid #333;
                    color: #fff;
                    line-height: 50px;
                    -webkit-perspective: 300px;
                    perspective: 300px;
                    -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                }
                .show-code::before,
                .show-code::after {
                    position: absolute;
                    z-index: -1;
                    display: block;
                    content: '';
                }
                .show-code,
                .show-code::before,
                .show-code::after {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    -webkit-transition: all .3s;
                    transition: all .3s;
                }
                .show-code:hover {
                    color: #333;
                    background:#fff;
                }
                .show-code::after {
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background:#333 ;
                    -webkit-transform-origin: center bottom;
                    transform-origin: center bottom;
                    -webkit-transform: rotateX(0);
                    transform: rotateX(0);
                }
                .show-code:hover::after {
                    -webkit-transform: rotateX(-180deg);
                    transform: rotateX(-180deg);
                }
                .hide-code {
                    display: none;
                    padding:5px;/*背景色部分の余白*/
                    background:#dcdcdc;/*背景色*/
                }

        


/****ネタバレ画像ぼかし***/
.image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.image-container img {
  filter: blur(9.3px); /* 画像にぼかしを適用 */
  transition: filter 0.3s ease; /* アニメーションを追加 */
}

.image-container:hover img {
  filter: blur(0); /* ホバー時にぼかしを解除 */
}


/****ネタバレ文字ぼかし***/
.spoiler-text {
  color: transparent; /* テキストのカラーを透明にする */
  text-shadow: 0 0 5px rgba(0, 0, 0, 9.3); /* テキストにぼかしを追加 */
  background-color: rgba(0, 0, 0, 0); /* テキストの背景色を設定 */
  padding: 5px; /* テキスト周りの余白を調整 */
  display: inline-block; /* テキストが必要な幅に合わせる */
  transition: text-shadow 0.3s ease; /* アニメーションを追加 */
}

.spoiler-text:hover {
  color: initial; /* ホバー時にテキストのカラーを元に戻す */
  text-shadow: none; /* ホバー時にぼかしを解除 */
  background-color: transparent; /* ホバー時に背景色を透明にする */
}



/****画像海苔****/
.spoiler-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.spoiler-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.93); /* 半透明の黒 */
  opacity: 1; /* 初期状態では完全に表示 */
  transition: opacity 0.3s ease;
  pointer-events: none; /* オーバーレイをクリック可能にしない */
}

.spoiler-container:hover .spoiler-overlay {
  opacity: 0; /* マウスホバー時にオーバーレイを非表示にする */
}


/****海苔****/
.inked {
  background-color: black;
  color: transparent;
  display: inline;
  cursor: pointer;
  transition: background-color 0.3s;
}

.inked:hover {
  background-color: transparent;
  color: initial;
}

.inked::before {
  content: "ネタバレ内容を表示";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0,8.5);
  color: white;
  padding: 10px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.inked:hover::before {
  opacity: 1;
}


/***フォローボタンラベル部分***/
.follow-label {
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    line-height: 1.5;
}
/***ここからフォローボタンカラー***/
.follow-btn-list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 0 1em;
}
.follow-btn-item a {
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    margin: .15em;
    padding: .1em;
    color: #fff;
    font-size: 26px;
    line-height: 40px;
    border-radius: 20px;
    box-sizing: border-box;
    transition: .2s;
}
.follow-btn-item a:hover {
    transform: translateY(-4px);
    box-shadow: 1px 10px 8px -4px rgba(0,0,0,.2);
    opacity: .8;
    color: #fff;
}
/*** 読者登録 ***/
.follow-btn-item .hatena {
    background: #333;
}
/*** ツイッター ***/
.follow-btn-item .twitter {
    background: #1da1f2;
}
/*** feedly ***/
.follow-btn-item .feedly {
    background: #2bb24c;
}
/*** pinterest ***/
.follow-btn-item .pinterest {
    background: #e60023;
}
/*** youtube ***/
.follow-btn-item .youtube {
    background: #ff0000;
}
/*** instagram ***/
.follow-btn-item .instagram {
    background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat;
    position: relative;
    overflow: hidden;
}
.follow-btn-item .instagram::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -14px;
    width: 53px;
    height: 53px;
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.blogicon-instagram {
    position: relative;
    z-index: 1;
}
/*** instagramここまで ***/
.follow-btn-item i {
    vertical-align: 7%;
}
/*** blogmura ***/
.follow-btn-item .blogmura {
background:#b22222 ;
}




/**
 * シェアボタンここから
 */
.share-btn-type1 {
  margin: 1.2em 0;
  display: flex;
}
.share-btn-type1 .share-btn__item {
  width: 25%;
  height: 40px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  transition: all .3s;
}
.share-btn-type1 .share-btn__item--hatebu {
  background-color: #00A4DE;
}
.share-btn-type1 .share-btn__item--facebook {
  background-color: #1778F2;
}
.share-btn-type1 .share-btn__item--twitter {
  background-color: #1BA1F3;
}
.share-btn-type1 .share-btn__item--pocket {
  background-color: #EF4155;
}
.share-btn-type1 .share-btn__item:hover {
  opacity: .8;
}
/**
 * シェアボタンここまで
 */

/* あわせて読みたい
<div class="js-htnpsne-awasete-module"

data-count="3"
data-mode="Popular"
data-title="こちらもどうぞ"
data-more-btn="true"
data-subscribe-btn="true">
</div>
<!-- 描画用コード -->
<script src="//niyari.github.io/hatenablog-modules/also-read.min.js" charset="utf-8" async></script>
*/

/* 続きを読む */
a.entry-see-more{
    display: inline-block;
    width: 200px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    font-weight:bold;
    outline: none;
    position: relative;
    background-color: #1abc9c;
    border-radius: 4px;
    color: #fff;
    line-height: 40px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #0e8c73;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
a.entry-see-more::before,
a.entry-see-more::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
a.entry-see-more,
a.entry-see-more::before,
a.entry-see-more::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
a.entry-see-more:hover {
    background-color: #31c8aa;
    box-shadow: 0 3px 0 #23a188;
}
a.entry-see-more:active {
    top: 3px;
    box-shadow: none;
}


/* ネタバレCSS */
.netabarebtn {
       width:220px;
       padding: 2px 15px;
       font-weight: bold;
       color: #CC3300;
       cursor: pointer;
}
.netabarebtn i {
       transition: all .5s;
       cursor: pointer;
}
.netabaretxt {
       padding: 5px;
       display: none;
       background-color:#EFEFEF;
}






/* ----- NEW_ENTRY ----- */
.htbl_new_entries {
  height: 100%;
  width: 100%;
}
.htbl_new_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.htbl_new_entry_img { position: relative; top: -9px; min-height: 118px;}
.htbl_new_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(15, 15, 15, 0.60);
  width: 100%;
  height: 100px;
  margin-top: 0px;
  padding: 0 5%;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_new_entry_text:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
}
.htbl_new_entry_text span.entry_title {
  display: table-cell;
  vertical-align: middle;
  text-align: center; 
  height: 100px;
  font-size: 14px;
  font-weight: lighter;
}
.htbl_new_entry_text span.entry_date {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: none;
}


.hatena-urllist {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.hatena-urllist li {
  padding: 0;
  border-bottom: 0;
  line-height: 1.5;
  position: relative;
}
.hatena-urllist li a {
  text-decoration: none;
}

.urllist-item-inner.entries-access-ranking-item-inner {
height: 100%;
}

img.urllist-image.entries-access-ranking-image {
position: relative;
margin: 0;
}

a.urllist-title-link.entries-access-ranking-title-link.urllist-title.entries-access-ranking-title {
position: absolute;
top: 0%;
left: 0;
word-break: break-all;
overflow: hidden;
background: rgba(77, 77, 77, 0.42);
width: 100%;
height: 100%;
margin-top: 0;
padding: 5%;
color: rgba(255, 255, 255, 0.985);
font-size: 14px;
text-align: center;
text-shadow: -1px 1px rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}

a.urllist-title-link.entries-access-ranking-title-link.urllist-title.entries-access-ranking-title:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
  text-decoration: none;
}
.urllist-date-link.entries-access-ranking-date-link a time {
position: absolute;
bottom: 0;
right: 5px;
font-size: 10px;
color: white;
text-shadow: none;
}
a.bookmark-widget-counter img {
position: absolute;
left: 0px;
bottom: 0px;
}

.urllist-categories.entries-access-ranking-categories {
position: absolute;
bottom: 15px;
right: 0px;
font-size: 10px;
padding: 0;
margin: 0;
}

a.urllist-category-link.entries-access-ranking-category-link {
color: white;
text-shadow: none;
}


/*-------------*/
/*  追尾する目次  */
/*-------------*/
#stoc-module {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#stoc-module.tracking {
  margin-bottom: 0;
}
#stoc-module.fixed {
  position: fixed;
}
#stoc-module.absolute {
  position: absolute;
}
#stoc-module.sticky {
  position: -webkit-sticky;
  position: sticky;
}
#stoc-module.fade-in {
  animation: fadeIn 300ms;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

#stoc {
  overflow-y: auto;
}
#stoc.shadow {
  /* Shadows */
  background:
    radial-gradient(farthest-side at top, rgba(0,0,0,.17), transparent) top / 100% 11px,
    radial-gradient(farthest-side at bottom, rgba(0,0,0,.17), transparent) bottom / 100% 11px;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
#stoc ol {
  margin: 0;
  padding: 0 0 0 1em;
  list-style-type: none;
}
#stoc > ol {
  padding-left: 0;
}
#stoc.shadow > ol {
  /* Shadow covers */
  background:
    linear-gradient(#fff 30%, transparent) top / 100% 40px,
    linear-gradient(transparent, #fff 70%) bottom / 100% 40px;
  background-repeat: no-repeat;
  background-attachment: local;
  overflow-y: hidden;
}
/*
#stoc li {
  margin: 3px 0; 
}
*/
#stoc a {
  padding: 2px 2px 2px 6px;
  display: block;
  text-decoration: none;
  /* color: #777; */
}
#stoc:not(.touch) a:hover {
  background-color: rgba(0,0,0,.05);
  font-weight:bold;
  /* text-decoration: underline; */
  /* color: #222; */
}
#stoc .active {
  background-color: rgba(0,0,0,.05);
  /* color: #222; */
}

#stoc .active:before {
 font-family: "Font Awesome 5 Free";
 content: '\f061　';/* 右矢印＋全角スペース */
 font-weight: 900;
 color: #1D3557;/* 右矢印の色 */
}

#stoc::-webkit-scrollbar {
  width: 8px;
  background: #ececec;
}
#stoc::-webkit-scrollbar-button {
  display: none;
}
#stoc::-webkit-scrollbar-thumb {
  background: #b1b1b1;
}


/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(255,254,249,1);
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -450px;
  }
}


.box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ffbb00;
    border-radius: 0 8px 8px 8px;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #ffbb00;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box p {
    margin: 0; 
    padding: 0;
}

.box ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.box ul li:before {/*疑似要素*/
  font-family: "FontAwesome";
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 2em;/*左端からのアイコンまでの距離*/
  color: #ffbb00;/*アイコン色*/
}


.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #df8182;
background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "あわせて読みたい";
background-color: #df8182;
color: #fff;
font-weight: bold;
}



.zakkuri{
position:relative;
margin:1em 0 2em;
padding:32px 0 0 0;
}
.zakkuri::before{
content:'ざっくり言うと';
position:absolute;
top:0;
left:0;
display:inline-block;
background:#51b8d6;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:20px;
padding:0 10px;
height:20px;
}
.zakkuri::after{
content:'';
position:absolute;
top:20px;
left:42px;
border-top:10px solid #51b8d6;
border-left:8px solid transparent;
}
.zakkuri ul{
list-style-type:none;
margin:0 0 0 1.5em;
padding:0 0 0 0;
}
.zakkuri li{
display:flex;
align-items:baseline;
margin:0.5em 0;
}
.zakkuri li::before{
content:'\f029';
font-family:blogicon;
color:#51b8d6;
margin-right:1em;
}
.zakkuri p:empty{
display:none;
}


.zakkuri2{
position:relative;
margin:1em 0 2em;
padding:26px 0 0 0;
}
.zakkuri2::before{
content:'ざっくり言うと';
position:absolute;
top:0;
left:0;
display:inline-block;
background:#d66d51;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:22px;
padding:0 10px;
height:22px;
border-radius:3px;
}
.zakkuri2::after{
content:'';
position:absolute;
top:22px;
left:40px;
border-top:12px solid #d66d51;
border-left:12px solid transparent;
}
.zakkuri2 ul{
list-style-type:none;
margin:0 0 0 0.5em;
padding:0.5em 1em;
border:3px solid #d66d51;
border-radius:4px;
display:inline-block;
}
.zakkuri2 li{
display:flex;
align-items:baseline;
margin:0.5em 0 0.3em 0;
}
.zakkuri2 li::before{
content:'\f029';
font-family:blogicon;
color:#d66d51;
margin-right:1em;
}
.zakkuri2 p:empty{
display:none;
}


ul.point1{border:3px solid #333;margin:0 0 1em 0;padding:0 0 0 0;}
ul.point1::before{content:'この製品の特徴';display:inline-block;background:#333;color:#fff;padding:3px 6px 3px 4px;margin:0 0 0.3em 0;}
ul.point1 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;}
ul.point1 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point1 li.good::before{content:'\f029';color:#4caf50;}
ul.point1 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}

ul.point2{border:3px solid #df8182;padding:1.2rem 0 0 0;background: #fffbf5;margin:1.5em 0;position:relative;}
ul.point2::before{content:'この製品の特徴';position:absolute;top:calc(-0.7rem - 2px);left:2em;display:inline-block;background:#df8182;color:#fff;padding:0 0.8em 0 1.2em;font-size:0.8rem;font-weight:bold;line-height:1.4rem;border-radius:0.7rem;}
ul.point2::after{content:'\f041';font-family:blogicon;position:absolute;top:calc(-1rem - 2px);left:0.5em;display:inline-block;background:#df8182;color:#fff;font-size:1rem;line-height:2rem;width:2rem;text-align:center;border-radius:1rem;}
ul.point2 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;}
ul.point2 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point2 li.good::before{content:'\f029';color:#4caf50;}
ul.point2 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}


ul.point4{padding:0 0 0.2em 0;position:relative;background:rgba(0,0,10,0.4);margin:1em 1em 2em 0;}
ul.point4::before{content:'この製品の特徴';display:inline-block;background:#333;color:#fff;padding:3px 6px 3px 4px;margin:0 0 0.3em 0;position:relative;z-index:2;}
ul.point4::after{content:'';position:absolute;z-index:0;top:8px;left:8px;width:100%;height:100%;background:rgba(10,0,0,0.4);}
ul.point4 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;color:#fff;position:relative;z-index:2;}
ul.point4 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point4 li.good::before{content:'\f029';color:#29b6f6;}
ul.point4 li.bad::before{content:'\f001';color:#ef5350;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}










.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #FF6200;
background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "あわせて読みたい";
background-color: #FF6200;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #FF6200;
border-radius: 14px;
line-height: 25px;
text-align: center;
content: "\f010";
font-size: 18px;
font-family: "blogicon";
color: #fff;
}

.entry-content .chal-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #AE2B52;
background-color: #fffbf5;
}
.entry-content .chal-link p:last-child {
margin-bottom: 0;
}
.entry-content .chal-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "あわせて読みたい";
background-color: #AE2B52;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .chal-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #AE2B52;
border-radius: 14px;
line-height: 25px;
text-align: center;
content: "\f715";
font-size: 18px;
font-family: "blogicon";
color: #fff;
}


/* star1 * /
.star-rating2 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;}
.star-rating2 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip:text!important;-webkit-text-fill-color: transparent!important;}

/* star 2 */
.star-rating3 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;}
.star-rating3 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip: text!important;-webkit-text-fill-color: transparent!important;}
.star-rating3 .rate0{background: linear-gradient(to right, #f90 0%, #f90 0%, #ccc 0%);}
.star-rating3 .rate5{background: linear-gradient(to right, #f90 0%, #f90 5%, #ccc 5%);}
.star-rating3 .rate10{background: linear-gradient(to right, #f90 0%, #f90 10%, #ccc 10%);}
.star-rating3 .rate15{background: linear-gradient(to right, #f90 0%, #f90 15%, #ccc 15%);}
.star-rating3 .rate20{background: linear-gradient(to right, #f90 0%, #f90 20%, #ccc 20%);}
.star-rating3 .rate25{background: linear-gradient(to right, #f90 0%, #f90 25%, #ccc 25%);}
.star-rating3 .rate30{background: linear-gradient(to right, #f90 0%, #f90 30%, #ccc 30%);}
.star-rating3 .rate35{background: linear-gradient(to right, #f90 0%, #f90 35%, #ccc 35%);}
.star-rating3 .rate40{background: linear-gradient(to right, #f90 0%, #f90 40%, #ccc 40%);}
.star-rating3 .rate45{background: linear-gradient(to right, #f90 0%, #f90 45%, #ccc 45%);}
.star-rating3 .rate50{background: linear-gradient(to right, #f90 0%, #f90 50%, #ccc 50%);}
.star-rating3 .rate55{background: linear-gradient(to right, #f90 0%, #f90 55%, #ccc 55%);}
.star-rating3 .rate60{background: linear-gradient(to right, #f90 0%, #f90 60%, #ccc 60%);}
.star-rating3 .rate65{background: linear-gradient(to right, #f90 0%, #f90 65%, #ccc 65%);}
.star-rating3 .rate70{background: linear-gradient(to right, #f90 0%, #f90 70%, #ccc 70%);}
.star-rating3 .rate75{background: linear-gradient(to right, #f90 0%, #f90 75%, #ccc 75%);}
.star-rating3 .rate80{background: linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);}
.star-rating3 .rate85{background: linear-gradient(to right, #f90 0%, #f90 85%, #ccc 85%);}
.star-rating3 .rate90{background: linear-gradient(to right, #f90 0%, #f90 90%, #ccc 90%);}
.star-rating3 .rate95{background: linear-gradient(to right, #f90 0%, #f90 95%, #ccc 95%);}
.star-rating3 .rate100{background: linear-gradient(to right, #f90 0%, #f90 100%, #ccc 100%);}


/* star3 */
.star-rating4 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;}
.star-rating4 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip: text!important;-webkit-text-fill-color: transparent!important;}
.star-rating4 tr::after{content: attr(data-text);font-size:0.9rem;color:#333;padding:0.5rem 0 0 0.2rem;display:inline-block;}
.star-rating4 .rate00{background: linear-gradient(to right, #f90 0%, #f90 0%, #ccc 0%);}
.star-rating4 .rate05{background: linear-gradient(to right, #f90 0%, #f90 10%, #ccc 10%);}
.star-rating4 .rate10{background: linear-gradient(to right, #f90 0%, #f90 20%, #ccc 20%);}
.star-rating4 .rate15{background: linear-gradient(to right, #f90 0%, #f90 30%, #ccc 30%);}
.star-rating4 .rate20{background: linear-gradient(to right, #f90 0%, #f90 40%, #ccc 40%);}
.star-rating4 .rate25{background: linear-gradient(to right, #f90 0%, #f90 50%, #ccc 50%);}
.star-rating4 .rate30{background: linear-gradient(to right, #f90 0%, #f90 60%, #ccc 60%);}
.star-rating4 .rate35{background: linear-gradient(to right, #f90 0%, #f90 70%, #ccc 70%);}
.star-rating4 .rate40{background: linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);}
.star-rating4 .rate45{background: linear-gradient(to right, #f90 0%, #f90 90%, #ccc 90%);}
.star-rating4 .rate50{background: linear-gradient(to right, #f90 0%, #f90 100%, #ccc 100%);}
















.show-button{
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
}
.show-button:hover{
    background: black;
    color: white;
    transition: .3s;
}
.hide-area{
       padding: 5px;
       display: none;
       background-color:#f5f5f5;
       border-style: dotted 5px;
}



ul.point1{border:3px solid #333;margin:0 0 1em 0;padding:0 0 0 0;}
ul.point1::before{content:'この製品の特徴';display:inline-block;background:#333;color:#fff;padding:3px 6px 3px 4px;margin:0 0 0.3em 0;}
ul.point1 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;}
ul.point1 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point1 li.good::before{content:'\f029';color:#4caf50;}
ul.point1 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}

ul.point2{border:3px solid #df8182;padding:1.2rem 0 0 0;background: #fffbf5;margin:1.5em 0;position:relative;}
ul.point2::before{content:'この製品の特徴';position:absolute;top:calc(-0.7rem - 2px);left:2em;display:inline-block;background:#df8182;color:#fff;padding:0 0.8em 0 1.2em;font-size:0.8rem;font-weight:bold;line-height:1.4rem;border-radius:0.7rem;}
ul.point2::after{content:'\f041';font-family:blogicon;position:absolute;top:calc(-1rem - 2px);left:0.5em;display:inline-block;background:#df8182;color:#fff;font-size:1rem;line-height:2rem;width:2rem;text-align:center;border-radius:1rem;}
ul.point2 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;}
ul.point2 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point2 li.good::before{content:'\f029';color:#4caf50;}
ul.point2 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}


ul.point3{border:3px solid #009688;background:#e0f2f1;margin:3em 0 1em 0;padding:0.5em 0 0 0;position:relative;border-radius:0 16px 0px 16px;}
ul.point3::before{content:'この製品の特徴';position:absolute;top:-2.1em;left:-3px;display:inline-block;background:#009688;color:#fff;padding:0.1em 8px 0 8px;line-height:2em;font-weight:bold;}
ul.point3 li{list-style-type:none;margin:0 1em 0.2em 1em;padding:0.2em 0 0.2em 1em;}
ul.point3 li:not(:last-of-type){border-bottom:3px dotted #00796b;}
ul.point3 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point3 li.good::before{content:'\f029';color:#4caf50;}
ul.point3 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}








#top-editarea>a {
  float: left;
  line-height: 45px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding-left: 20px;
  font-size: 1.2em;
}
div#top-editarea {
  background: linear-gradient( rgba(0, 0, 0, .8), rgba(69, 69, 69, 0.8), rgba(0, 0, 0, .8));
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 1;
}
.nav>ul {
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 65%;
  float: right;
}
.nav>ul>li {
  box-sizing: border-box;
  float: left;
  list-style-type: none;
  width: 15%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  word-wrap: break-word;
  margin: 0 auto;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
  font-size: .7em;
  transition: box-shadow .3s ease-out;
}
.nav>ul>li>div, .global-nav-content>a {
  display: block;
  color: white;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
}
.nav>ul>li:hover {
  box-shadow: 0 0 50px 25px #262626 inset;
  cursor: pointer;
}
.global-contents {
  background: linear-gradient(#262626, #6f6f6f);
  padding-left: 0;
  margin-top: 70px;
  width: 300px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;
}
.global-contents>li {
  list-style-type: none;
  position: relative;
  width: 300px;
  height: 45px;
}
.global-contents>li:hover {
  background-color: #1c1c1c;
  transition: background-color .5s ease-in-out;
}
.global-contents>li>a {
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.global-show {
  visibility: inherit;
  opacity: 1;
  margin-top: 45px;
}


.global-nav {
margin: 0 0 30px;
padding: 0;
border-top: 1px solid #aaaaaa;
font-size: 15px;
font-weight: bold;
list-style-type: none;
}
.global-nav:after {
content: "";
clear: both;
display: block;
}
.global-nav li {
float: left;
width: 50%;
text-align: center;
border-bottom: 1px solid #aaaaaa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.global-nav li:nth-child(odd) {
border-right: 1px solid #aaaaaa;
}
.global-nav a {
display: block;
line-height: 44px;
color: #FFFFFF;
background: #000000;
text-decoration: none;
}
.global-nav a:hover {
color: #000000;
background: #FFFFFF;
}
@media screen and (min-width: 500px) {
.global-nav li:nth-child(odd) {
border-right: none;
}
.global-nav {
display: table;
table-layout: fixed;
width: 100%;
border-top: none;
border-collapse: collapse;
}
.global-nav li {
float: none;
display: table-cell;
width: 100%;
border-bottom: none;
border: 1px solid #aaaaaa;
}
}

/***グローバルメニュー***/
#menu{
 width: 100%;
 margin: 10px auto;
 background: #000;
}
#menu-inner{
 width: 1000px;
 height: 40px;/*メニューバーの太さ*/
 margin: 0 auto;
 background: #000;/*メニューバーの背景色*/
}
#menu-btn{display: none;}
#menu-content{
 padding-left: 0;
 margin: 0;
 width: 100%;
 height: 100%;
 list-style-type: none;
}
#menu-content > li{
 position: relative;
 float: left;
 height: 100%;
 text-align: center;
  width: 20%
}
#menu-content > li > a{
 position: relative;
 display: block;
 height: 100%;
 width: 100%;
 line-height: 40px;/*メニューバーの太さ*/
 background: #000;/*文字の背景*/
 color: #fff;/*文字の色*/
 font-size: 70%;
 text-decoration: none;
 z-index: 2;
}
#menu-content > li > a:hover{
 background: #fff;/*選択時の背景色*/
 color: #ff1493;/*選択時の文字色*/
}

/***横幅が狭いときのメニュー***/
@media screen and (max-width:960px){/*19*/
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #000;
    color: #fff;
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 50%;
    height: 40px;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;
    padding: 0;
    text-decoration: none;
}
}
.hatena-urllist {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.hatena-urllist li {
  padding: 0;
  border-bottom: 0;
  line-height: 1.5;
  position: relative;
}
.hatena-urllist li a {
  text-decoration: none;
}

.urllist-item-inner.recent-entries-item-inner {
height: 100%;
}

img.urllist-image.recent-entries-image {
position: relative;
margin: 0;
}

a.urllist-title-link.recent-entries-title-link.urllist-title.recent-entries-title {
position: absolute;
top: 0%;
left: 0;
word-break: break-all;
overflow: hidden;
background: rgba(77, 77, 77, 0.42);
width: 100%;
height: 110%;
margin-top: 0;
padding: 10% 5%;
color: rgba(255, 255, 255, 0.985);
font-size: 14px;
text-align: center;
text-shadow: -1px 1px rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}

a.urllist-title-link.recent-entries-title-link.urllist-title.recent-entries-title:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
  text-decoration: none;
}
.urllist-date-link.recent-entries-date-link a time {
position: absolute;
bottom: 0;
right: 5px;
font-size: 10px;
color: white;
text-shadow: none;
}
a.bookmark-widget-counter img {
position: absolute;
left: 0px;
bottom: 0px;
}

.urllist-categories.recent-entries-categories {
position: absolute;
bottom: 15px;
right: 0px;
font-size: 10px;
padding: 0;
margin: 0;
}

a.urllist-category-link.recent-entries-category-link {
color: white;
text-shadow: none;
}


/*まとめ吹き出し*/
.matome{
background:#c0d0f0; /* 背景色 */
margin-bottom:-0.8em; /* 画像にちょっぴりかぶせる */
padding:1.5em;
border-radius:0.8em; /* 角丸 */
position:relative;
}
.matome::after{
content:'';
position:absolute;
display:block;
bottom:-20px;
left:80px;
border-right:20px solid transparent;
border-top:20px solid #c0d0f0;
}
.matomec img{
position:relative;
z-index:2;
}

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
.hidari::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/L/LikeLife/20240807/20240807063919.png);}
.migi::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/L/LikeLife/20240420/20240420193129.png);}






/* 全体の設定 */
.balloon01 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
/* アイコンの場所 */
.balloon01 .icon01 {
float: left;
margin-right: -90px;
width: 80px; //アイコンの大きさ
}
/* アイコン画像の作成 */
.balloon01 .icon01 img{
width: 100%;
height: auto;
border-radius: 50%;
border: solid 2px #b8860b; //アイコンの枠の太さ、カラーはここで変更
}
.balloon01 .chat01 {
width: 100%;
}
/* 吹き出しの入力部分の作成 */
.talk01 {
display: inline-block; //この部分を外すと横幅いっぱいになります
position: relative; 
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px; //吹き出しの丸み具合を変更
background: #fffacd; //吹き出しのカラーはここで変更
}
/* 三角部分の作成 */
.talk01:after {
content: "";
display: inline-block;
position: absolute;
top: 18px; //三角の位置(高さ)を変更
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #fffacd; //三角部分のカラーはここで変更
}
.talk01 p {
margin: 0;
padding: 0;
}

/*↓----サルワカ風画像吹き出し----↓*/
.fukidesc {
  display: table;
  margin: 1,0em;
  width: 95%;
}
.fukicell {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  position: relative;
}
.fukiimg {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  padding-right: 10px;
}
.fukip {
  border: #ccc solid 4px;
  position: relative;
  background: white;
  padding: 12px 10px;
  border-radius: 13px;
}
.fukip:before {
  border-right: 23px solid #ccc;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  content: '';
  position: absolute;
  left: -23px;
}
.fukip p {
  margin: 0;
}
.fukip:after {
  content: '';
  position: absolute;
  border-right: 24px solid #fff;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  left: -17px;
}
@media screen and (max-width: 1024px){
  .fukidesc, .fukicell, .fukiimg, .fkip {
    display: block;
    width: 95%;
  }
  .fukicell {
    padding-right: 0;
  }
  .fukiimg {
    padding-right: 0;
    text-align: center;
  }
  .fukip {
    border-radius: 6px;
    background: white;
    margin-top: -10px;
    border: solid 3px silver;
  }
  .fukip:before {
    border-bottom: 20px solid silver;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -40px;
    content: '';
    position: absolute;
    left: 40%;
  }
  .fukip:after {
    border-bottom: 20px solid white;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -37px;
    content: '';
    position: absolute;
    left: 40%;
  }
}
/*↑----サルワカ風画像吹き出し----↑*/

/* 吹き出し全体のスタイル */
.balloon-right {
  display: flex;
  justify-content: flex-end;
  margin: 1em 0;
}

/* 吹き出しの中身 */
.balloon-right .balloon-text {
  position: relative;
  background: #e0f7fa;
  color: #333;
  padding: 1em;
  border-radius: 10px;
  max-width: 70%;
  font-size: 1em;
}

/* 吹き出しの三角形（右） */
.balloon-right .balloon-text::after {
  content: '';
  position: absolute;
  top: 10px;
  right: -10px;
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #e0f7fa;
}
✍️【使い方】記事内での記述例
はてなブログでは基本的にHTMLが使えるので、記事内で次のように書きます：

html
コピーする
編集する
<div class="balloon-right">
  <div class="balloon-text">
    こんにちは！これは右に表示される吹き出しです。
  </div>
</div>
✅ 補足
色や幅などは必要に応じて調整可能です（例：background: #e0f7fa; を変える）。

左側にも吹き出しを作りたい場合は balloon-left を別途定義して対話風にできます。

ご希望があれば、アイコン付きの吹き出しや、スマホ対応のスタイル調整も追加できます！興味ありますか？







あなた:
アイコン付きの吹き出しとスマホ対応もお願いします


ChatGPT:
了解です！では、「右横の吹き出し＋アイコン付き＋スマホ対応」のCSSと使い方をご紹介します。会話風ブログやレビュー記事などで大活躍しますよ！

🎨【CSS】デザインCSSに貼り付け
はてなブログの「デザイン → カスタマイズ（スパナ）→ デザインCSS」に以下を追加してください。

css
コピーする
編集する
/* 吹き出し全体（右側） */
.balloon-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 1em 0;
}

/* 吹き出し内（アイコン＋テキスト） */
.balloon-right .icon {
  margin-left: 10px;
  flex-shrink: 0;
}

.balloon-right .icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* 吹き出しテキスト */
.balloon-right .balloon-text {
  position: relative;
  background: #e0f7fa;
  color: #333;
  padding: 1em;
  border-radius: 10px;
  max-width: 70%;
  font-size: 1em;
  word-break: break-word;
}

/* 三角部分（右） */
.balloon-right .balloon-text::after {
  content: '';
  position: absolute;
  top: 10px;
  right: -10px;
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #e0f7fa;
}

/* モバイル対応（横幅狭くなったとき） */
@media screen and (max-width: 600px) {
  .balloon-right {
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  .balloon-right .balloon-text {
    max-width: 85%;
    font-size: 0.95em;
  }

  .balloon-right .icon {
    margin-left: 0;
    margin-right: 10px;
  }
}
/* 吹き出しベース */
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 2px solid #ddd;
  background-color: #fff;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  z-index: 1;
}

/* 左右位置 */
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}

/* 三角部分 */
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
}

/* アイコンの丸い背景 */
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}

/* 画面が広いとき（PC） */
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}

/* キャラごとのアイコン切り替え */
.char-angel::after {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/L/LikeLife/20250405/20250405230945.png");
}
.char-ragi::after {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/L/LikeLife/20250206/20250206032930.png");
}

/* ==== 名前ラベル（キャラ名） ==== */
.entry-content .fuki-name {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 4px;
  color: #555;
}

/* ==== LINE風の配色バリエーション ==== */
.entry-content .line-green {
  background-color: #dcf8c6;
  border-color: #cdebb0;
}
.entry-content .line-gray {
  background-color: #f0f0f0;
  border-color: #dcdcdc;
}

/* LINE風の三角形対応 */
.entry-content .line-green.r-fuki::before,
.entry-content .line-green.l-fuki::before {
  background-color: #dcf8c6;
  border-color: transparent transparent transparent #cdebb0;
}
.entry-content .line-gray.r-fuki::before,
.entry-content .line-gray.l-fuki::before {
  background-color: #f0f0f0;
  border-color: transparent transparent transparent #dcdcdc;
}

  #menu1 {
    display: none;
    clear: both;
    background-color: gray;
    transition: background-color 0.3s ease;
    padding: 10px;
  }

  #menu1:hover {
    background-color: white;
  }
  
  /* 記事サポートの編集 */
.dark-box {
	background-color: #EFF2F4;
}
.dark-box a.btn {
	margin: 10px;
	background-color: #334252;
}