/*
Theme Name: FlatBox
Theme URI: https://blog.hatena.ne.jp/-/store/theme/98012380861710503
Description: ** FlatBoxの特徴フラットで太めボーダーがかわいいテーマです。** デモサイト- <a href="https://flatbox.hatenablog.com/">https://flatbox.hatenablog.com/</a>** 更新履歴- 2019.02.08 とりあえずリリース
Author: c-miya
Author URI: http://blog.hatena.ne.jp/c-miya/
*/
/*
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;
	height:212px;
 
}
.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);}
h3 {
  background: #c2edff;/*背景色*/
  padding: 1em;/*文字まわり（上下左右）の余白*/
  font-size: 1.2em
}

h4 {
  color: #364e96;/*文字色*/
  padding: 1em;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}
h5 {
  color: #505050;/*文字色*/
  padding: 1em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  width: 100%;/*幅*/
}

h5:before {
  content: '●';
  color: white;
  margin-right: 15px;
}
.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 {
    position: relative;
    padding: 5px 15px 5px 55px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    background: #e8efff;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 8px;
    width: 38px;
    height: 30px;
    text-align: center;
    content: "\f704";
    font-family: blogicon;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #87a4e3;
    font-weight: 900;
}

blockquote:after{
    content: '';
    position: absolute;
    left: 8px;
    top: 30px;
    height: 0;
    width: 0;
    border-left: 19px solid #87a4e3;
    border-right: 19px solid #87a4e3;
    border-bottom: 10px solid transparent;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/* 引用おわり */

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{}

}




.entry-content p {
margin: 0.3em 0;
}

.marker-y {
  background: linear-gradient(transparent 60%, rgb(255,255,0) 60%);
}

/* このアイテムの特徴 */
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.table-of-contents {

    display:block;

    font-size:100%; /* 文字サイズ */

    line-height:1.3 !important; /* 行間 */

    border:none;

    border-radius:15px; /* 角丸 */

    background-color:#fffaf0; /* 背景色 */

    width:100%; /* テーブルの幅 */

    padding:15px 35px !important;

    margin-left: auto; /* テーブルの中央寄せ */

    margin-right: auto; /* テーブルの中央寄せ */

}



ul.table-of-contents a{ /* リンク設定 */

   text-decoration: none;

   color:#000;

}



ul.table-of-contents::before { /* CONTENTSの文字 */

    display:block;

    content:"CONTENTS";

    font-weight: bold; /* 太字 */

    font-size: 20px;

    border-bottom: 2px dashed #000; /* 下の点線 */

    text-align:center;

    margin: 5px 0px;

}



ul.table-of-contents li{

   margin: 5px 0px 5px 0px !important;

   list-style-type:none; /* 元のマーカー文字を消す */

}



ul.table-of-contents li::before { /* 鉛筆アイコン */

   font-family:'blogicon';

   content:'\f024';

   color:#000;

   position:relative;

   left:-0.5em;

}



ul.table-of-contents ul li::before { /* チェックアイコン */

   font-family:'blogicon';

   content:'\f029';

   color:#90ca3d;

}


ul.table-of-contents ul li ul li::before { /* スターアイコン */

   font-family:'blogicon';

   content:'\f02d';

   color:#00ff7f;

}


.box17{/* 囲み枠 */
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

/* 下線びょん */
.ani-marker.active{
    background-position: -100% .5em;
}
 
.ani-marker {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(232,115,131) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #444;/*７*/
}
#menu-inner{
    width: 1000px;/*１*/
    height: 40px;/*２*/
    margin: 0 auto;
    background: #444;/*８*/
}
#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;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*３*/
    padding-right: 15px;/*３*/
    line-height: 40px;/*２*/
    background: #444;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #555;/*11*/
    color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;/*2*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;/*４*/
    height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;/*５*/
    background: #444;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #555;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #555;/*17*/
    color: #fff;/*18*/
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;/*６*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;/*６*/
    padding: 0;
    text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}
/* グローバルおわり */

/* 青いボックスのCSS　*/
.box14{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}
.box14 p {
    margin: 0; 
    padding: 0;
}

/*--------------------------------------
  もしもの簡単リンクのカスタマイズ
--------------------------------------*/
.easyLink-box {
	margin-bottom: 1.5em!important;
}
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-btn a{
	margin: 5px 10px 5px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: 100%!important;
	box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
	font-size: 1em!important;
}
.easyLink-info-btn-amazon{
	background:#ffb36b!important;
}
.easyLink-info-btn-rakuten{
	background:#ea7373!important;
}
.easyLink-info-btn-yahoo{
	background:#73c1ea!important;
}
.easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    padding-right: 3px;
}
@media screen and (max-width: 480px){
	div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
		width: 100%!important;
		position: relative;
	}
	.easyLink-info-btn a:before {
		padding-right: 5px;
		right: 5px;
		position: absolute;		
	}
}



/*吹き出しのCSS*/
.fuki{
  display: -webkit-flex;
  display: flex;
  margin: 0 0 1.5em 0;
}
.fukiR{
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.fukimg{
  width: 64px;
  height: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.fukitxt{
  padding: 1em;
  border: 3px solid #333;
  border-radius: 6px;
  position: relative;
}
.fukiL .fukitxt{
  margin: 0 0 0 15px;
}
.fukiR .fukitxt{
  margin: 0 15px 0;
}
.fukitxt::before,.fukitxt::after{
  content: '';
  position: absolute;
  top: 19px;
  font-size: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.fukiL .fukitxt::before{
  left: -16px;
  border-right: 16px solid #333;
}
.fukiL .fukitxt::after{
  left: -12px;
  border-right: 16px solid #fff;
}
.fukiR .fukitxt::before{
  right: -16px;
  border-left: 16px solid #333;
}
.fukiR .fukitxt::after{
  right: -12px;
  border-left: 16px solid #fff;
}
/*吹き出しのCSS終わり*/

/*SNSシェアボタン*/
.snsbtn24{display:-webkit-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;margin:0 0 1em 0;}
.snsbtn24 a{display:block;width:74px;height:74px;margin:0 0 12px 0;text-align:center;border-radius:8px;background:#fff;overflow:hidden;box-shadow:1px 1px 4px rgba(0,0,0,0.4);transition:0.5s;}
.snsbtn24 a:hover{box-shadow:1px 1px 5px rgba(0,0,0,0.55);}
.snsbtn24 a i{display:block;line-height:54px;font-size:24px;margin:0 0 0 0;vertical-align:middle;transition:0.5s;}
.snsbtn24 a i::before{margin:0 0 0 0;}
.snsbtn24 a span{display:block;margin:0 0 0 0;text-transform:uppercase;font-size:9.5px;font-family:'Montserrat';line-height:20px;color:#fff;transition:0.5s;}
.snsbtn24 .btn-fb span{background:#365899;}
.snsbtn24 .btn-tw span{background:#1b95e0;}
.snsbtn24 .btn-po span{background:#EF4056;}
.snsbtn24 .btn-hb span{background:#008fde;}
.snsbtn24 .btn-gp span{background:#DB4437;}
.snsbtn24 .btn-li span{background:#00B900;}
.snsbtn24 .btn-fd span{background:#2BB24C;}
.snsbtn24 .btn-bl span{background:#333333;}
.snsbtn24 .btn-fb:hover span{background:#4166B0;}
.snsbtn24 .btn-tw:hover span{background:#2EA1E9;}
.snsbtn24 .btn-po:hover span{background:#F64F64;}
.snsbtn24 .btn-hb:hover span{background:#009FF8;}
.snsbtn24 .btn-gp:hover span{background:#db6d63;}
.snsbtn24 .btn-li:hover span{background:#38ba38;}
.snsbtn24 .btn-fd:hover span{background:#60b375;}
.snsbtn24 .btn-bl:hover span{background:#505050;}
.snsbtn24 .btn-fb i{color:#365899;}
.snsbtn24 .btn-tw i{color:#1b95e0;}
.snsbtn24 .btn-po i{color:#EF4056;}
.snsbtn24 .btn-hb i{color:#008fde;}
.snsbtn24 .btn-gp i{color:#DB4437;}
.snsbtn24 .btn-li i{color:#00B900;}
.snsbtn24 .btn-fd i{color:#2BB24C;}
.snsbtn24 .btn-bl i{color:#333333;}
.snsbtn24 .btn-fb:hover i{color:#4166B0;}
.snsbtn24 .btn-tw:hover i{color:#2EA1E9;}
.snsbtn24 .btn-po:hover i{color:#F64F64;}
.snsbtn24 .btn-hb:hover i{color:#009FF8;}
.snsbtn24 .btn-gp:hover i{color:#db6d63;}
.snsbtn24 .btn-li:hover i{color:#38ba38;}
.snsbtn24 .btn-fd:hover i{color:#60b375;}
.snsbtn24 .btn-bl:hover i{color:#505050;}
/*SNSシェアボタンおわり*/

/*レビュー★レート*/
.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%);}
/*レビュー★レート*おわり*/  

/* 緑ボックス（オススメの方） */
.box00s {
    margin: 2em 0;
    border: solid 3px #9AE36F;
    border-radius: 20px;
}
.box00s .box-title {
    font-size: 1.2em;
    background: #9AE36F;
    padding: 3px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 15px 15px 0 0;
}
.box00s p {
    padding: 15px 20px;
    margin: 0;
}

.box00s ul {
  padding: 0 1em;
  position: relative;
}
.box00s ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.5em;
  list-style-type: none!important;
}
.box00s ul li:before {
  font-family: "blogicon";
  content: "\f050";/*アイコン種類*/
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #9AE36F; /*アイコン色*/
}
/* 緑ボックス（オススメの方）おわり */

/* 邪魔なキーワード下線を消す */
a.keyword {
    border: 0 !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default;
    color: #5A5A5A;
}
/* 邪魔なキーワード下線を消すおわり */

/* 合わせてどうぞのBOX */
.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: "blogicon";
  content: "\f029";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #ffbb00;/*アイコン色*/
}
/* 合わせてどうぞのBOXおわり */

/* 表スクロール */
#table-sc {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow: auto;
white-space: nowrap;
}
/* 表スクロールおわり */



/* ヘッダー画像をスマホでも正常に表示 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 68px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 130px;
}


/*更新日表示*/
.lastmod {
color: #FFF;
background-color: #EB8686;
border-radius:5px; /*背景角を丸くする*/
padding: 5px 6px;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}