/*
	Theme: Parabellium
	Theme URI: none
	Author: parabell
	Author URL: https://www.parabell-life.net
	Description: ブログ「PARABELL LIFE」専用テーマ
	Responsive: yes
*/

/*  ↑ author Info
	===================================================================
	↓ normalize.css */

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	vertical-align: baseline;
	display: inline-block;
}

audio:not([controls]) {
	height: 0;
	display: none;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: .1rem dotted;
}

dfn {
	font-style: italic;
}

mark {
	color: #000;
	background: #ff0;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

hr {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	padding: .35em .625em .75em;
	border: .1rem solid #c0c0c0;
	margin: 0 .2rem;
}

legend {
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*  ↑ normalize.css
	===================================================================
	↓ エリア定義 */

#container {
	margin: 0 auto;
}

#blog-title {
	padding: 1.6rem 0;
	border: solid #000;
	border-width: .8rem 0 .1rem;
}

#blog-title-inner,
#content-inner,
#footer-inner {
	padding: 0 1.6rem;
	max-width: 65.6rem;
	margin: 0 auto;
}

#content {
	background-color: #fff;
	padding: 1.6rem 0 0;
	border-bottom: .3rem solid #e4e4e4;
	box-shadow: 0 .6rem .5rem rgba(0, 0, 0, .2);
	margin: 0 auto;
}

#content-inner {
	display: flex;
	flex-direction: column;
}

#wrapper {
	border-bottom: .1rem solid #e0e0e0;
	margin: 0 0 4.8rem;
}

#footer {
	color: #fff;
	text-align: center;
	background-color: #333;
	padding: 2.4rem 0;
}

@media screen and (min-width: 481px) {

#blog-title {
	padding: 2.2rem 0;
}

#blog-title-inner,
#content-inner,
#footer-inner {
	padding: 0 2.4rem;
}

#content {
	padding: 2.4rem 0 0;
}

}

@media screen and (min-width: 601px) {

#blog-title {
	padding: 2.8rem 0;
}

#blog-title-inner,
#content-inner,
#footer-inner {
	padding: 0 3.2rem;
}

#content {
	padding: 3.2rem 0 0;
}

}

@media screen and (min-width: 721px) {

#blog-title {
	padding: 3.4rem 0;
}

#blog-title-inner,
#content-inner,
#footer-inner {
	padding: 0 1.6rem;
}

#content {
	padding: 4rem 0 0;
}

}

@media screen and (min-width: 961px) {

#blog-title {
	padding: 4rem 0;
}

#content-inner,
#footer-inner {
	max-width: 108.9rem;
}

#content-inner {
	flex-direction: row;
}

#content {
	padding: 4.8rem 0 0;
}

#wrapper {
	background: linear-gradient(-90deg, rgba(0, 0, 0, .03) .1rem, rgba(0, 0, 0, 0) 1rem, rgba(0, 0, 0, 0) 100%);
	padding: 0 4.8rem 0 0;
	border: solid #e0e0e0;
	border-width: 0 .1rem 0 0;
	box-sizing: border-box;
	width: 70.5rem;
	box-shadow: -.1rem 0 #fff inset;
}

#box2 {
	padding: 0 0 0 4.8rem;
	width: 33.6rem;
}

}

/*  ↑ エリア定義
	===================================================================
	↓ 基本 */

html {
	font-size: 10px;
}

body {
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	color: #404040;
	line-height: 1.8;
	word-wrap: break-word;
	overflow-wrap: break-word;
	background-color: #fff;
	background-image: linear-gradient(135deg, #fff 25%, #e8e8e8 25%, #e8e8e8 50%, #fff 50%, #fff 75%, #e8e8e8 75%, #e8e8e8);
	background-size: .4rem .4rem;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.4;
	position: relative;
}

#blog-title-content {
	font-size: 0;
	text-align: center;
	line-height: 0;
	background: url('https://cdn-ak.f.st-hatena.com/images/fotolife/p/parabell/20190116/20190116181900.png') no-repeat;
	background-size: 100% auto;
	padding-bottom: calc(100% * 115 / 656);
}

#title,
#blog-description {
	line-height: 0;
	padding: 0;
	margin: 0;
	visibility: hidden;
}

a {
	color: inherit;
	text-decoration: none;
	transition: .2s linear;
}

a:hover,
a:focus {
	color: #48a0e8;
}

img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

ul,
ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

dl,
dt,
dd {
	margin: 0;
}

dt {
	font-weight: 500;
}

pre,
code {
	font-size: 1.4rem;
	color: #eee;
	line-height: 1.6;
	word-wrap: normal;
	background-color: #333;
	padding: 1.7rem 2.7rem;
	max-width: 100%;
	margin: 3.6rem 0;
}

input[type="text"] {
	font-size: 1.4rem;
	background: #fcfcfc;
	border: .1rem solid #dcdcdc;
	border-radius: 0;
	outline: 0;
	box-sizing: border-box;
	box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .1) inset;
	-webkit-appearance: none;
	transition: .3s ease;
}

input[type="text"]:hover,
input[type="text"]:focus {
	border-color: #48a0e8;
}

input[type="text"]:focus {
	background: #fff;
	box-shadow: 0 0 .5rem .1rem rgba(72, 160, 232, .5);
}

.lg[class*="blogicon-"] {
	font-size: 2rem;
}

/*  ↑ 基本 
	===================================================================
	↓ 未統合 */

.entry-content .hatena-image-left {
	margin: 0 1.6rem 3.6rem 0;
}

.entry-content .hatena-image-right {
	margin: 0 0 3.6rem 1.6rem;
}

table {
	font-size: 1.4rem;
	line-height: 1.5;
	border-top: .1rem solid #e0e0e0;
	width: 100%;
	margin: 3.6rem 0;
}

th,
td {
	padding: 1.4rem;
	border-bottom: .1rem solid #e0e0e0;
}

th {
	font-weight: 500;
}

hr {
	background-color: #e0e0e0;
	border: 0;
	height: .1rem;
	margin: 3.6rem 0;
}

/*  ↑ 未統合
	===================================================================
	↓ モーダルボタン */

#global-menu {
	display: none;
}

#modal-button {
	background: linear-gradient(rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, .05) 50%, rgba(255, 255, 255, 0) 100%);
	border-bottom: .3rem solid #000;
	box-shadow: 0 -.3rem .5rem rgba(0, 0, 0, .2), 0 .3rem .5rem rgba(0, 0, 0, .2);
	position: relative;
	display: flex;
	justify-content: center;
}

.modal-button-content {
	list-style-type: none;
	width: calc(100% - 3.2rem);
	max-width: 65.6rem;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.modal-button-content li {
	width: calc(100% / 4);
}

.modal-button-content a {
	font-size: 1rem;
	text-shadow: 0 .1rem #fff;
	box-sizing: border-box;
	height: 2.4rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-button-content a:hover,
.modal-button-content a:focus,
.global-menu-content a:hover,
.global-menu-content a:focus {
	background: linear-gradient(125deg, rgba(255, 128, 0, .1) 0%, rgba(255, 0, 0, .1) 20%, rgba(128, 0, 255, .1) 40%, rgba(0, 0, 255, .1) 60%, rgba(0, 255, 255, .1) 80%, rgba(0, 255, 128, .1) 100%);
	box-shadow: 0 0 0 .1rem #fff inset;
}

a.mb_01,
a.mb_02,
a.mb_03 {
	border-left: .1rem solid #000;
}

a.mb_03,
a.mb_04 {
	border-right: .1rem solid #000;
}

@media screen and (min-width: 481px) {

.modal-button-content {
	width: calc(100% - 4.8rem);
}

.modal-button-content a {
	font-size: 1.2rem;
	height: 2.6rem;
}

}

@media screen and (min-width: 601px) {

.modal-button-content {
	width: calc(100% - 6.4rem);
}

.modal-button-content a {
	font-size: 1.4rem;
	height: 2.8rem;
}

}

@media screen and (min-width: 721px) {

.modal-button-content a {
	font-size: 1.6rem;
	height: 3rem;
}

}

/*  ↑ モーダルボタン
	===================================================================
	↓ モーダルメニュー */

#modal-menu:target {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

#modal-menu {
	background-color: rgba(255, 255, 255, .98);
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 980;
	opacity:0;
	display: block;
	visibility: hidden;
	transform: scale(1.1);
	transition: .4s ease;
}

.modal-menu-content {
	list-style-type: none;
	padding: 2rem;
	border: .1rem solid #808080;
	border-radius: .3rem;
	box-sizing: border-box;
	margin: 1.2rem;
	position: relative;
	z-index: 990;
	display: flex;
	flex-direction: column;
}

.modal-menu-content > div:nth-last-child(2) {
	margin: 0 0 1.6rem;
}

.modal-close-head {
	padding: 0 0 1.6rem;
	border-bottom: .1rem dotted #808080;
	margin: 0 0 1.6rem;
}

.modal-close-foot {
	padding: 1.6rem 0 0;
	border-top: .1rem dotted #808080;
}

.modal-close {
	color: #808080;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-close:hover,
.modal-close:focus {
	color: #404040;
}

.modal-close i {
	padding: 0 1rem 0 0;
	height: 1.8rem;
	border-right: .1rem dotted;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-close-text {
	font-size: 1.2rem;
	height: 1.8rem;
	margin: 0 0 0 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 481px) {

.modal-menu-content {
	padding: 3rem;
	margin: 1.8rem;
}

}

@media screen and (min-width: 601px) {

.modal-menu-content {
	padding: 4rem;
	margin: 2.4rem;
}

}

@media screen and (min-width: 721px) {

.modal-menu-content {
	padding: 5rem;
	margin: 3rem;
}

}

/*  ↑ モーダルメニュー
	===================================================================
	↓ グローバルメニュー・L1 */

@media screen and (min-width: 961px) {

#modal-button,
#modal-menu {
	display: none;
}

#global-menu {
	background: linear-gradient(rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, .05) 50%, rgba(255, 255, 255, 0) 100%);
	border-bottom: .3rem solid #000;
	box-shadow: 0 -.3rem .5rem rgba(0, 0, 0, .2), 0 .3rem .5rem rgba(0, 0, 0, .2);
	position: relative;
	display: flex;
	justify-content: center;
}

#global-menu::after,
#modal-button::after {
	content: "";
	background: linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .8) 100%);
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.global-menu-content {
	list-style-type: none;
	border: solid #000;
	border-width: 0 .1rem;
	box-sizing: border-box;
	width: 100%;
	max-width: 108.9rem;
	margin: 0 1.6rem;
	display: flex;
}

.global-menu-content > li {
	text-shadow: 0 .1rem #fff;
	border-right: .1rem solid #000;
	position: relative;
}

.gm-home,
.gm-twitter {
	font-size: 1.3rem;
	width: 4rem;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gm-items,
.gm-items::after {
	padding: .5rem 1.5rem;
	box-sizing: border-box;
	height: 4rem;
	display: flex;
	align-items: center;
}

.gm-items {
	font-weight: 500;
	font-size: 1.3rem;
	position: relative;
}

.gm-items::after {
	content: attr(data-text);
	font-weight: 600;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 25%, 0);
	transition: .4s cubic-bezier(.2, 1, .3, 1);
}

.gm-items:hover::after,
.gm-items:focus::after {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}

.gm-items span {
	transition: .4s cubic-bezier(.2, 1, .3, 1);
}

.gm-items:hover span,
.gm-items:focus span {
	opacity: 0;
	transform: translate3d(0, -50%, 0);
}

/*  ↑ グローバルメニュー・L1
	===================================================================
	↓ グローバルメニュー・L2 */

ul.second-level {
	list-style-type: none;
	background: #fff;
	border: .1rem solid #000;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	margin: 0;
	position: absolute;
	top: 4rem;
	left: -.1rem;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: scale(.9);
	transition: .3s ease;
}

li:hover ul.second-level {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

ul.second-level li {
	background: linear-gradient(rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, .05) 50%, rgba(255, 255, 255, 0) 100%);
	border-bottom: .1rem solid #000;
}

ul.second-level li a {
	width: 20rem;
	box-shadow: 0 0 0 .1rem #fff inset;
}

ul.second-level li:last-child {
	border: none;
}

}

/*  ↑ グローバルメニュー・L2
	===================================================================
	↓ メニュー直下 */

.header-info {
	border-bottom: .3rem solid #e4e4e4;
}

.header-info a {
	font-size: 1.1rem;
	color: #fff;
	text-align: center;
	text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .2);
	background: rgba(72, 160, 232, .6);
	padding: .3rem 0;
	box-sizing: border-box;
	width: 100%;
	display: block;
}

.header-info a:hover,
.header-info a:focus {
	background: rgba(255, 128, 224, .6);
}

@media screen and (min-width: 481px) {

.header-info a {
	font-size: 1.2rem;
	padding: .4rem 0;
}

}

@media screen and (min-width: 601px) {

.header-info a {
	font-size: 1.3rem;
	padding: .5rem 0;
}

}

@media screen and (min-width: 721px) {

.header-info a {
	padding: .6rem 0;
}

}

@media screen and (min-width: 961px) {

.header-info a {
	padding: .7rem 0;
}

}

/*  ↑ メニュー直下
	===================================================================
	↓ 編集ボタン */

@media screen and (max-width: 960px) {

.entry-header-menu {
	display: none !important;
}

}

@media screen and (min-width: 961px) {

.entry-header-menu {
	background: #fff;
	border-radius: 50%;
	width: 4.8rem;
	height: 4.8rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .2);
	position: absolute;
	top: 0;
	right: -7.2rem;
}

.entry-header-menu a {
	font-size: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.entry-header-menu a::before{
	content: "\f01e";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.6rem;
}

.entry-header-menu a:hover::before {
	transform: rotate(360deg);
	transition: .4s ease;
}

}

/*  ↑ 編集ボタン
	===================================================================
	↓ 記事領域全般 */

.entry {
	margin: 0 0 4.8rem;
}

.entry,
.entry-content {
	border-bottom: .1rem solid #e0e0e0;
}

.entry-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.customized-header {
	width: 100%;
	order: 3;
}

.entry-content {
	margin: 0 0 2.4rem;
}

h1.entry-title {
	font-size: 1.6rem;
	width: 100%;
	margin: 0 0 1.6rem;
	order: 0;
}

h1.entry-title a {
	padding: .5rem 1.6rem;
	box-sizing: border-box;
	display: block;
}

h1.entry-title a::before,
h1.entry-title a::after {
	content: "";
	border: solid #e0e0e0;
	box-sizing: border-box;
	width: .8rem;
	height: 100%;
	position: absolute;
}

h1.entry-title a::before {
	border-width: .1rem 0 .1rem .1rem;
	top: 0;
	left: 0;
}

h1.entry-title a::after {
	border-width: .1rem .1rem .1rem 0;
	bottom: 0;
	right: 0;
}

h3 {
	font-size: 2rem;
	color: #fff;
	text-shadow: 0 .1rem .1rem rgba(0, 0, 0, .3);
	background: #48a0e8;
	padding: 1.6rem 2rem;
	border-radius: .5rem 0;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1), 0 .1rem rgba(255, 255, 255, .5) inset, .1rem -.1rem rgba(0, 0, 0, .1) inset, -.1rem -.1rem rgba(0, 0, 0, .1) inset;
	margin: 6rem 0 2.4rem;
}

h3::before {
	content: "";
	border: .1rem dashed rgba(255, 255, 255, .3);
	border-radius: .3rem 0;
	box-shadow: 0 0 .1rem rgba(0, 0, 0, .1), 0 0 .1rem rgba(0, 0, 0, .1 ) inset;
	position: absolute;
	top: .6rem;
	right: .6rem;
	bottom: .6rem;
	left: .6rem;
}

h4 {
	font-size: 1.8rem;
	text-shadow: .1rem .1rem rgba(0, 0, 0, .15);
	padding: 1rem 1rem 1rem 1.8rem;
	border-top: .1rem dashed #b0b0b0;
	border-bottom: .4rem solid #7fbcef;
	box-shadow: 0 .3rem #f4f4f4;
	margin: 4.8rem 0 2.4rem;
}

h4::before {
	content: "";
	background: #48a0e8;
	border-radius: .4rem;
	width: .6rem;
	position: absolute;
	top: 1.2rem;
	bottom: 1.2rem;
	left: .2rem;
}

h4::after {
	content: "";
	background: #48a0e8;
	width: 20%;
	height: .4rem;
	position: absolute;
	bottom: -.4rem;
	left: 0;
	z-index: 2;
}

h5 {
	font-size: 1.7rem;
	text-shadow: .1rem .1rem rgba(0, 0, 0, .15);
	background-image: linear-gradient(135deg, #f9f9f9 25%, #fcfcfc 25%, #fcfcfc 50%, #f9f9f9 50%, #f9f9f9 75%, #fcfcfc 75%, #fcfcfc);
	background-size: .6rem .6rem;
	padding: .9rem 1rem .9rem 1.8rem;
	border-bottom: .1rem solid #e0e0e0;
	box-shadow: 0 .3rem #f4f4f4, .6rem 0 #48a0e8 inset;
	margin: 4.8rem 0 2.4rem;
}

.entry-content a {
	text-decoration: underline;
}

.entry-content a:link,
.entry-content a:visited {
	color: #48a0e8;
}

.entry-content a:hover,
.entry-content a:focus {
	color: #e82000;
}

p {
	text-align: justify;
	margin: 0 0 2.4rem;
}

p.vertical {
	text-align: center;
}

b,
strong {
	font-weight: 600;
}

strong {
	background: linear-gradient(transparent 75%, #fce4e0 75%);
}

.one-point_01 {
	font-weight: 500;
	color: #e82000;
}

.eye-catch {
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	margin: 0 0 3.6rem;
}

img.image-frame {
	background: #f4f4f4;
	padding: .2rem;
	border: .1rem solid #e0e0e0;
	box-sizing: border-box;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1), 0 0 0 .1rem #fff inset;
}

img.vertical {
	width: 49.3rem;
}

img.map_i7 {
	width: 38.1rem;
}

figure {
	margin: 0 0 2.4rem;
}

figcaption {
	font-size: 1rem;
	color: #a0a0a0;
	text-align: center;
	margin: 1rem 0 0;
}

.entry-line {
	border-top: .1rem dashed #b0b0b0;
	margin: 4.8rem 20%;
	position: relative;
}

.entry-line::before,
.entry-line::after {
	content: "";
	border-radius: 50%;
	background: #fff;
	border: .1rem double #b0b0b0;
	box-sizing: border-box;
	width: 1.7rem;
	height: 1.7rem;
	box-shadow: 0 0 0 .1rem #fff inset, 0 0 0 .2rem #b0b0b0 inset;
	position: absolute;
	top: -.9rem;
}

.entry-line::before {
	left: 0;
}

.entry-line::after {
	right: 0;
}

twitter-widget {
    margin: 0 auto 2.4rem !important;
}

@media screen and (min-width: 481px) {

h1.entry-title {
	font-size: 1.8rem;
}

h1.entry-title a {
	padding: .6rem 2rem;
}

}

@media screen and (min-width: 601px) {

h1.entry-title {
	font-size: 2rem;
}

h1.entry-title a {
	padding: .7rem 2.4rem;
}

}

@media screen and (min-width: 721px) {

h1.entry-title {
	font-size: 2.2rem;
}

h1.entry-title a {
	padding: .8rem 3rem;
}

}

/*  ↑ 記事領域全般
	===================================================================
	↓ 目次・ボックス */

#contents-list,
.multi-box,
blockquote {
	font-size: 1.5rem;
	background-size: .4rem .4rem;
	padding: 2.1rem 2.5rem 1.7rem;
	border: .3rem solid;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1), 0 0 0 .1rem #fff inset;
	margin: 3.6rem 0;
}

.multi-box,
blockquote {
	border-radius: .8rem 0;
}

.simple-box {
	font-size: 1.5rem;
	padding: 1.7rem 2.7rem;
	border: .1rem solid;
	border-radius: .3rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	margin: 3.6rem 0;
}

#contents-list,
#contents-list div,
#contents-list div div::before,
#contents-list div div::after {
	border-color: #30bad0;
}

.sb-color_01,
.mb-color_01,
.mb-color_01 div,
.mb-color_01 div div::before,
.mb-color_01 div div::after {
	border-color: #48a0e8;
}

.sb-color_02,
.mb-color_02,
.mb-color_02 div,
.mb-color_02 div div::before,
.mb-color_02 div div::after {
	border-color: #e82000;
}

.sb-color_03,
.mb-color_03,
.mb-color_03 div,
.mb-color_03 div div::before,
.mb-color_03 div div::after {
	border-color: #ffa040;
}

.sb-color_04,
.mb-color_04,
.mb-color_04 div,
.mb-color_04 div div::before,
.mb-color_04 div div::after {
	border-color: #0060b0;
}

blockquote,
blockquote div,
blockquote div div::before,
blockquote div div::after {
	border-color: #707070 !important;
}

#contents-list {
	background-image: linear-gradient(135deg, #f3fbfc 25%, #f9fdfe 25%, #f9fdfe 50%, #f3fbfc 50%, #f3fbfc 75%, #f9fdfe 75%, #f9fdfe);
	border-radius: .5rem;
}

.mb-color_01,
.link-box {
	background-image: linear-gradient(135deg, #f4f9fe 25%, #f9fcfe 25%, #f9fcfe 50%, #f4f9fe 50%, #f4f9fe 75%, #f9fcfe 75%, #f9fcfe);
}

.mb-color_02 {
	background-image: linear-gradient(135deg, #fef2f0 25%, #fef8f7 25%, #fef8f7 50%, #fef2f0 50%, #fef2f0 75%, #fef8f7 75%, #fef8f7);
}

.mb-color_03 {
	background-image: linear-gradient(135deg, #fff9f4 25%, #fffcf9 25%, #fffcf9 50%, #fff9f4 50%, #fff9f4 75%, #fffcf9 75%, #fffcf9);
}

.mb-color_04 {
	background-image: linear-gradient(135deg, #f0f6fa 25%, #f7fafd 25%, #f7fafd 50%, #f0f6fa 50%, #f0f6fa 75%, #f7fafd 75%, #f7fafd);
}

blockquote {
	background-image: linear-gradient(135deg, #f7f7f7 25%, #fbfbfb 25%, #fbfbfb 50%, #f7f7f7 50%, #f7f7f7 75%, #fbfbfb 75%, #fbfbfb);
}

.contents-list-header,
.multi-box-header {
	padding: 0 0 1.6rem;
	border-bottom: .1rem dotted;
	margin: 0 0 1rem;
	display: flex;
}

.contents-list-header {
	flex-direction: column;
	align-items: center;
}

.contents-list-header-inner {
	font-weight: 600;
	width: 100%;
	max-width: 22.6rem;
	margin: 0 0 1.2rem;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.multi-box-header-inner {
	font-weight: 500;
	padding: 0 1.6rem;
	position: relative;
}

.contents-list-header-inner::before,
.contents-list-header-inner::after,
.multi-box-header-inner::before,
.multi-box-header-inner::after {
	content: "";
	border: solid;
	box-sizing: border-box;
	width: .5rem;
	height: 100%;
	position: absolute;
	top: 0;
}

.contents-list-header-inner::before,
.multi-box-header-inner::before {
	border-width: .1rem 0 .1rem .1rem;
	left: 0;
}

.contents-list-header-inner::after,
.multi-box-header-inner::after {
	border-width: .1rem .1rem .1rem 0;
	right: 0;
}

.contents-list-title {
	font-size: 1.8rem;
	color: #30bad0;
	display: flex;
	align-items: center;
}

.multi-box-title {
	font-size: 1.6rem;
	display: flex;
	align-items: center;
}

.contents-list-title::before,
.multi-box-title::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #fff;
	border-radius: 50%;
	margin: 0 .8rem 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contents-list-title::before {
	content: "\f0ca";
	background: #30bad0;
	width: 3.6rem;
	height: 3.6rem;
}

.multi-box-title::before {
	width: 3rem;
	height: 3rem;
}

.mb-color_01 div div span {
	color: #48a0e8;
}

.mb-color_02 div div span {
	color: #e82000;
}

.mb-color_03 div div span {
	color: #ffa040;
}

.mb-color_04 div div span {
	color: #0060b0;
}

blockquote div div span {
	color: #707070;
}

#contents-list li::before {
	background: #30bad0;
}

.sb-color_01 li::before,
.mb-color_01 li::before,
.mb-color_01 div div span::before {
	background: #48a0e8;
}

.sb-color_02 li::before,
.mb-color_02 li::before,
.mb-color_02 div div span::before {
	background: #e82000;
}

.sb-color_03 li::before,
.mb-color_03 li::before,
.mb-color_03 div div span::before {
	background: #ffa040;
}

.sb-color_04 li::before,
.mb-color_04 li::before,
.mb-color_04 div div span::before {
	background: #0060b0;
}

blockquote li::before,
blockquote div div span::before {
	background: #707070;
}

.mb-icon_star::before {
	content: "\f005";
}

.mb-icon_bad::before {
	content: "\f00d";
}

.mb-icon_exclamation::before {
	content: "\f12a";
}

.mb-icon_check::before {
	content: "\f00c";
}

.mb-icon_point::before {
	content: "\f0eb";
}

.mb-icon_memo::before {
	content: "\f303";
}

.mb-icon_mail::before {
	content: "\f0e0";
}

.mb-icon_quote::before {
	content: "\f10d";
}

.contents-list-note {
	font-weight: 500;
	font-size: 1rem;
	color: #30bad0;
	background: #fff;
	padding: 0 .6rem;
	border: .1rem solid #30bad0;
	border-radius: .5rem;
}

#contents-list a {
	text-decoration: none;
	display: block;
}

#contents-list a:link,
#contents-list a:visited {
	color: #404040;
}

#contents-list a:hover,
#contents-list a:focus {
	color: #e82000;
}

#contents-list ol {
	font-weight: 500;
}

#contents-list ol,
.simple-box ol,
.multi-box ol,
blockquote ol {
	counter-reset: number;
}

#contents-list > ol,
.simple-box > p,
.simple-box > ul,
.simple-box > ol,
.multi-box > p,
.multi-box > ul,
.multi-box > ol,
blockquote > p,
blockquote > ul,
blockquote > ol {
	margin: 0 0 1.6rem;
}

#contents-list > ol:last-child,
.simple-box > p:last-child,
.simple-box > ul:last-child,
.simple-box > ol:last-child,
.multi-box > p:last-child,
.multi-box > ul:last-child,
.multi-box > ol:last-child,
blockquote > p:last-of-type,
blockquote > ul:last-of-type,
blockquote > ol:last-of-type {
	margin: 0;
}

#contents-list li,
.simple-box li,
.multi-box li,
blockquote li {
	text-align: justify;
	padding: 0 0 .5rem 3rem;
	position: relative;
}

#contents-list li:last-child,
.simple-box li:last-child,
.multi-box li:last-child,
blockquote li:last-child {
	padding: 0 0 0 3rem;
}

#contents-list li::before,
.simple-box li::before,
.multi-box li::before,
blockquote li::before {
	border-radius: 50%;
	box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .1);
	position: absolute;
}

.simple-box ul li::before,
.multi-box ul li::before,
blockquote ul li::before {
	content: "";
	width: 1rem;
	height: 1rem;
	top: .9rem;
	left: .6rem;
}

#contents-list ol li::before,
.simple-box ol li::before,
.multi-box ol li::before,
blockquote ol li::before {
	content: counters(number, "-");
	counter-increment: number;
	font-family: Roboto, sans-serif;
	font-size: 1.1rem;
	color: #fff;
	width: 2rem;
	height: 2rem;
	top: .4rem;
	left: .1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

#contents-list ol ol {
	font-weight: 400;
}

#contents-list li ol {
	margin: .5rem 0 0;
}

#contents-list ol li ol li::before {
	font-size: .9rem;
}

#contents-list ol li ol li ol li::before {
	font-size: .8rem;
}

/*  ↑ 目次・ボックス
	===================================================================
	↓ リンクボックス */

a.link-box {
	font-size: 1.5rem;
	text-decoration: none;
	background-size: .4rem .4rem;
	padding: 1.6rem;
	border: .3rem solid #48a0e8;
	border-radius: .5rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1), 0 0 0 .1rem #fff inset;
	margin: 3.6rem 0;
	display: flex;
	transition: .3s ease;
}

a.link-box:hover,
a.link-box:focus {
	box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .2), 0 0 0 .1rem #fff inset;
	transform: translateY(-.3rem);
}

.link-box-header {
	padding: 0 1.6rem 0 0;
	border-right: .1rem solid rgba(0, 0, 0, .15);
	box-shadow: .1rem 0 rgba(255, 255, 255, .75);
	margin: 0 1.5rem 0 0;
	display: flex;
	align-items: center;
}

.link-box-title {
	font-weight: 600;
	color: #808080;
	background: rgba(255, 255, 255, .75);
	border: .3rem solid rgba(72, 160, 232, .4);
	border-radius: 50%;
	width: 7rem;
	height: 7rem;
	box-shadow: 0 0 .1rem #fff;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.link-box-title::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 4.6rem;
	color: #48a0e8;
	position: absolute;
	z-index: -1;
	opacity: .15;
}

.link-box-body {
	color: #404040;
	text-align: justify;
	line-height: 1.4;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.link-box-page {
	font-weight: 500;
	margin: 0 0 .5rem;
}

.link-box-info {
	color: #909090;
	word-break: break-all;
}

.lb-icon_page::before {
	content: "\f15c";
}

.lb-icon_link::before {
	content: "\f0c1";
}

/*  ↑ リンクボックス
	===================================================================
	↓ 会話形式 */

.talk-wrap {
	margin: 3.6rem 0;
}

.talk-wrap > div {
	display: flex;
	margin: 0 0 1.6rem;
}

.talk-wrap figure {
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border: .2rem solid #fff;
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .2);
	margin: 0 2rem 0 0;
}

.talk-wrap p {
	padding: 1.2rem .8rem;
	position: relative;
}

.talk-wrap p::before,
.talk-wrap p::after {
	content: "";
	border: solid #707070;
	box-sizing: border-box;
	width: 100%;
	height: .4rem;
	position: absolute;
	left: 0;
}

.talk-wrap p::before {
	border-width: .1rem .1rem 0;
	border-radius: .5rem .5rem 0 0;
	top: 0;
}

.talk-wrap p::after {
	border-width: 0 .1rem .1rem;
	border-radius: 0 0 .5rem .5rem;
	bottom: 0;
}

.icon_parabell {
	background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/p/parabell/20180421/20180421013848.png');
}

.icon_notes {
	background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/p/parabell/20180421/20180421014417.png');
}

.talk-name {
	font-weight: 500;
	color: #fff;
	padding: 0 1.4rem;
	border-radius: .5rem;
	box-sizing: border-box;
	width: calc(100% - 7.4rem);
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	position: relative;
	display: flex;
}

.talk-color_01 {
	background: #48a0e8;
	border: .1rem solid #48a0e8;
}

.talk-color_02 {
	background: #a0e000;
	border: .1rem solid #a0e000;
}

.talk-notes {
	background: #a0a0a0;
	border: .1rem solid #a0a0a0;
}

.talk-name span {
	display: flex;
	align-items: center;
}

.talk-name span::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	background-color: #fff;
	border-radius: 50%;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0 .8rem 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.talk-color_01 span::before {
	content: "\f130";
	color: #48a0e8;
}

.talk-color_02 span::before {
	content: "\f130";
	color: #a0e000;
}

.talk-notes span::before {
	content: "\f303";
	color: #a0a0a0;
}

.talk-name::before {
	content: "";
	border-width: 0 1.5rem 1.5rem;
	border-style: solid;
	position: absolute;
	top: 1.9rem;
	left: -3rem;
}

.talk-color_01::before {
	border-color: transparent #48a0e8 transparent transparent;
}

.talk-color_02::before {
	border-color: transparent #a0e000 transparent transparent;
}

.talk-notes::before {
	border-color: transparent #a0a0a0 transparent transparent;
}

/*  ↑ 会話形式
	===================================================================
	↓ レポートナビ */

.report-navi-box ul {
	font-size: 1.1rem;
	margin: 2.4rem 0;
	display: flex;
	flex-wrap: wrap;
}

.report-navi-box li {
	margin-right: .6rem;
}

.report-navi-box li:last-child {
	margin: 0;
}

.report-navi-box a {
	text-decoration: none;
	background: #fff;
	padding: 0 .5rem;
	border: .1rem solid #e0e0e0;
	border-radius: .3rem;
	display: inline-block;
}

.report-navi-box a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #48a0e8;
	margin: 0 .3rem 0 0;
}

a.rn-next::before {
	content: "\f0ab";
}

a.rn-prev::before {
	content: "\f0aa";
}

a.rn-skip::before {
	content: "\f13a";
}

a.rn-back::before {
	content: "\f139";
}

/*  ↑ レポートナビ
	===================================================================
	↓ レポートボタン */

.report-button-box {
	text-align: center;
	margin: 3.6rem 0;
}

.report-button-list {
	padding: 0% 10%;
	margin: 3.6rem 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.report-button-list li {
	width: 100%;
}

.report-button-list li:first-child {
	margin: 0 0 1rem;
}

.report-button-list a {
	width: 100% !important;
}

.afi-1px img {
	display: none;
}

.report-button img,
.ec-link-site img {
	position: absolute;
	display: none;
}

.report-button a:link,
.report-button a:visited {
	font-weight: 500;
	font-size: 1.4rem;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 .1rem .1rem rgba(0, 0, 0, .3);
	text-align: center;
	padding: 1rem;
	border-radius: .5rem 0;
	box-sizing: border-box;
	width: 80%;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	display: inline-block;
	transition: .3s ease;
}

.report-button a:hover,
.report-button a:focus,
.ec-link-site a:hover,
.ec-link-site a:focus,
.share-box a:hover,
.share-box a:focus {
	box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .2);
	transform: translateY(-.3rem);
}

.report-button a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 .6rem 0 0;
}

.rb-icon_skip a::before {
	content: "\f103";
}

.rb-icon_check a::before {
	content: "\f00c";
}

.rb-icon_link a::before {
	content: "\f0c1";
}

.rb-color_01 a:link,
.rb-color_01 a:visited {
	background: #48a0e8;
}

.rb-color_02 a:link,
.rb-color_02 a:visited {
	background: #a0e000;
}

.rb-color_03 a:link,
.rb-color_03 a:visited {
	background: #ffa040;
}

@media screen and (min-width: 481px) {

.report-button-list {
	flex-direction: row;
}

.report-button-list li {
	width: calc(50% - .5rem);
}

.report-button-list li:first-child {
	margin: 0;
}

}

/*  ↑ レポートボタン
	===================================================================
	↓ EC紹介 */

.ec-link,
.ec-lite-link {
	padding: 1.8rem;
	border: .3rem solid #ececec;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .05);
	margin: 3.6rem 0;
}

.ec-link {
	display: flex;
	flex-direction: column;
}

.ec-link-image {
	text-align: center;
	width: 100%;
	margin: 0 0 1rem;
}

.ec-link-image a {
	padding: .8rem;
	border: .1rem solid #e0e0e0;
	border-radius: .3rem;
	display: block;
}

.ec-link-image img {
	max-width: 16rem;
	max-height: 16rem;
}

.ec-link-info {
	width: 100%;
}

.ec-link-name {
	font-size: 1.4rem;
	line-height: 1.4;
	margin: 0 0 .4rem;
}

.ec-link-name a {
	display: block;
}

.ec-link-detail {
	font-size: 1.2rem;
	color: #707070;
	margin: 0 0 .8rem;
}

.ec-link-search {
	font-size: 1.3rem;
	color: #707070;
	line-height: 1.6;
	margin: 0 0 .6rem;
	display: flex;
	justify-content: center;
}

.ec-link-search span {
	padding: 0 1.2rem;
	position: relative;
}

.ec-link-search span::before,
.ec-link-search span::after {
	content: "";
	border: solid #707070;
	box-sizing: border-box;
	width: .5rem;
	height: 100%;
	position: absolute;
	top: 0;
}

.ec-link-search span::before {
	border-width: .1rem 0 .1rem .1rem;
	left: 0;
}

.ec-link-search span::after {
	border-width: .1rem .1rem .1rem 0;
	right: 0;
}

.ec-link-site {
	font-size: 1.2rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
}

.ec-link-site li {
	width: 100%;
}

.ec-link-site a:link,
.ec-link-site a:visited {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 .1rem rgba(0, 0, 0, .2);
	text-align: center;
	padding: .5rem 1rem;
	border-radius: .3rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	margin: .6rem 0 0;
	display: block;
	transition: .3s ease;
}

.ec-link-site a::before {
	content: "\f07a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 .4rem 0 0;
}

.ec-link-site .not-found a:link {
	color: rgba(255, 255, 255, 0.3);
	text-shadow: none;
}

.ec-link-amazon a {
	background: #f90;
}

.ec-link-rakuten a {
	background: #bf0000;
}

.ec-link-yahoo a {
	background: #780099;
}

.ec-link-omni7 a {
	background: #00984b;
}

@media screen and (min-width: 481px) {

.ec-link {
	flex-direction: row;
}

.ec-link-image {
	width: 17.8rem;
	margin: 0 1.8rem 0 0;
}

.ec-link-info {
	width: calc(100% - 19.6rem);
}

}

@media screen and (min-width: 601px) {

.ec-link-site {
	flex-direction: row;
}

.ec-link-site li {
	width: calc((100% - .6rem) / 2);
}

}

/*  ↑ EC紹介
	===================================================================
	↓ 記事下・ページャー */

.entry-footer {
	margin: 0 0 2.4rem;
}

.social-buttons {
	display: none;
}

.hatena-star-container,
.star-container,
.pager a {
	background-image: linear-gradient(135deg, #f9f9f9 25%, #fcfcfc 25%, #fcfcfc 50%, #f9f9f9 50%, #f9f9f9 75%, #fcfcfc 75%, #fcfcfc);
	background-size: .4rem .4rem;
	border: .1rem solid #e0e0e0;
	border-radius: .5rem;
	box-shadow: 0 0 0 .1rem #fff inset;
}

.hatena-star-container,
.star-container {
	padding: 0 .7rem .4rem .7rem;
	margin: 0 0 2.4rem;
	display: block;
}

.hatena-star-add-button {
	margin: 0 .5rem 0 0 !important;
}

.pager {
	margin: 0 0 4.8rem;
}

.pager-arrow {
	display: none;
}

.pager > span {
	margin: 0 0 1rem;
	display: block;
}

.pager > span:last-child {
	margin: 0;
}

.pager a {
	font-size: 1.4rem;
	position: relative;
	display: block;
}

.pager-next a {
	text-align: right;
	padding: .8rem 3.4rem .8rem 1.2rem;
}

.pager-prev a {
	text-align: left;
	padding: .8rem 1rem .8rem 3.2rem;
}

.pager a:hover,
.pager a:focus {
	border: .1rem solid #48a0e8;
}

.pager a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.6rem;
	color: #404040;
	background: #e0e0e0;
	width: 2.2rem;
	position: absolute;
	top: -.1rem;
	bottom: -.1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: inherit;
}

.pager-next a::before {
	content: "\f054";
	border-left: .1rem solid #e0e0e0;
	border-radius: 0 .5rem .5rem 0;
	right: -.1rem;
}

.pager-prev a::before {
	content: "\f053";
	border-right: .1rem solid #e0e0e0;
	border-radius: .5rem 0 0 .5rem;
	left: -.1rem;
}

.pager-next a:hover::before,
.pager-next a:focus::before,
.pager-prev a:hover::before,
.pager-prev a:focus::before {
	color: #fff;
	background: #48a0e8;
	border-color: #48a0e8;
}

@media screen and (min-width: 961px) {

.pager {
	margin: 0;
}

}

/*  ↑ 記事下・ページャー
	===================================================================
	↓ シェア */

.share-box {
	margin: 2.4rem calc(1rem + 30 * (100% - 28.8rem) / (656 - 288));
	display: flex;
	justify-content: space-between;
}

.share-box a {
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 0 .1rem rgba(0, 0, 0, .2);
	overflow: hidden;
	border-radius: .3rem;
	width: calc((100% - 1.8rem) / 4);
	height: 2.6rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: .3s ease;
}

.share-twitter {
	background: #1da1f2;
}

.share-facebook {
	background: #3b5998;
}

.share-hatena {
	background: #00a4de;
}

.share-url {
	background: #ee4256;
}

.share-box a > i {
	padding: 0 0 0 .1rem;
	box-sizing: border-box;
	width: 38%;
	height: 1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.blogicon-bookmark {
	font-size: 2rem;
}

.share-box .share-count {
	font-family: Roboto, sans-serif;
}

.share-box .share-count,
.share-box .share-url-text {
	font-size: 1rem;
    border-left: .1rem solid rgba(255, 255, 255, .3);
	box-sizing: border-box;
	width: 62%;
	height: 1.8rem;
    box-shadow: -.1rem 0 rgba(0, 0, 0, .15);
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 481px) {

.share-box a {
	height: 2.8rem;
}

}

@media screen and (min-width: 601px) {

.share-box a {
	font-size: 1.4rem;
	height: 3rem;
}

}

@media screen and (min-width: 721px) {

.share-box a {
	font-size: 1.6rem;
	height: 3.2rem;
}

.blogicon-bookmark {
	font-size: 2.2rem;
}

}

/*  ↑ シェア
	===================================================================
	↓ フォロー */

.follow-box {
	padding: 1rem;
	border: .1rem dashed #e0e0e0;
	border-radius: .3rem;
}

.follow-me {
	text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	text-align: center;
	margin: .3rem 0 0;
}

.follow-button {
	box-sizing: border-box;
	max-width: 27rem;
	margin: .5rem auto;
	display: flex;
	justify-content: space-around;
}

.follow-button a {
	display: flex;
	flex-direction: column;
	transition: .3s ease;
}

.follow-button a:hover,
.follow-button a:focus {
	transform: scale(1.1);
}

.follow-button i {
	font-size: 1.8rem;
	color: #fff;
	border-radius: 50%;
	width: 3.7rem;
	height: 3.7rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.follow-twitter i {
	background: #1da1f2;
}

.follow-feedly i { 
	background: #70ca3b;
}

.follow-rss i { 
	background: #ed741a;
}

.follow-push7 i {
	background: #eeac00;
}

.follow-hatena i {
	font-size: 2.2rem;
	background: #3d3f44;
}

.follow-hatena i::before {
    width: 3.7rem;
    height: 3.7rem;
    display: flex;
    justify-content: center;
}

.follow-text {
	font-family: Roboto, sans-serif;
	font-size: 1rem;
	text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	height: 1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.follow-twitter span {
	color: #1da1f2;
}

.follow-feedly span {
	color: #70ca3b;
}

.follow-rss span {
	color: #ed741a;
}

.follow-push7 span {
	color: #eeac00;
}

.follow-hatena span {
	color: #3d3f44;
}

/*  ↑ フォロー
	===================================================================
	↓ プロフィール */

#entry-author-info {
	font-size: 1.4rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .05);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.author-info-box {
	background: rgba(255, 255, 255, .75);
	padding: 1.9rem;
	border: .2rem solid #e0e0e0;
	border-radius: .3rem;
}

.author-info-title {
	font-weight: 500;
	text-align: center;
	padding: .3rem 0;
	background: #f8f8f8;
	border: .1rem solid #e0e0e0;
	border-radius: .3rem;
	box-sizing: border-box;
	width: 100%;
	box-shadow: 0 0 0 .2rem #fff inset;
	margin: 0 0 1.9rem;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.author-info-title::before,
.author-info-title::after {
	content: "";
	background: #e0e0e0;
	border: .1rem solid #e0e0e0;
	border-radius: 50%;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	box-shadow: 0 0 0 .1rem #fff, 0 0 0 .1rem #fff inset;
}

.author-info-title::before {
	margin: 0 0 0 .8rem;
}

.author-info-title::after {
	margin: 0 .8rem 0 0;
}

.author-profile {
	background: rgba(0, 0, 0, .03);
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#author-info .author-profile,
#modal-author-info .author-profile,
#blog-info .author-profile {
	margin: 0 0 1.8rem;
}

#entry-author-info .author-profile {
	box-sizing: border-box;
	width: 100%;
}

.author-icon {
	background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/p/parabell/20180421/20180421013848.png');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border: .3rem solid #fff;
	border-radius: 50%;
	width: 10rem;
	height: 10rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .2);
	margin: 0 0 1rem;
	position: relative;
}

.author-icon::before {
	content: "";
	border: .1rem solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	box-shadow: 0 0 .1rem .1rem rgba(0, 0, 0, .2);
	position: absolute;
	top: .6rem;
	right: .6rem;
	bottom: .6rem;
	left: .6rem;
}

.author-name {
	font-weight: 600;
	font-size: 1.5rem;
	color: #48a0e8;
	text-shadow: 0 .1rem #fff;
	text-align: center;
	line-height: 1.7;
	border-bottom: .1rem dotted #d0d0d0;
}

.author-job {
	font-size: 1.1rem;
	color: #909090;
	text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	text-align: center;
	line-height: 1.6;
	padding: 0 2rem;
	margin: .8rem 0 0;
	position: relative;
}

.author-job::before,
.author-job::after {
	content: "";
	border: solid #d0d0d0;
	box-sizing: border-box;
	width: .4rem;
	height: 100%;
	position: absolute;
	top: 0;
}

.author-job::before {
	border-width: .1rem 0 .1rem .1rem;
	left: 0;
}

.author-job::after {
	border-width: .1rem .1rem .1rem 0;
	right: 0;
}

.author-description {
	color: #606060;
	line-height: 1.6;
}

.entry-author-link{
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.author-more {
	text-align: center;
}

#author-info .author-more,
#modal-author-info .author-more,
#blog-info .author-more {
	margin: 2.4rem 0 2.8rem;
}

#entry-author-info .author-more {
	margin: 2.8rem 0;
}

.author-more a {
	color: #fff;
	text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .2);
	text-align: center;
	background: linear-gradient(125deg, rgba(255, 128, 0, .2) 0%, rgba(255, 0, 0, .2) 20%, rgba(128, 0, 255, .2) 40%, rgba(0, 0, 255, .2) 60%, rgba(0, 255, 255, .2) 80%, rgba(0, 255, 128, .2) 100%);
	padding: .4rem 2rem .5rem;
	border-radius: 1.8rem;
	box-sizing: border-box;
	width: 70%;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	display: inline-block;
}

#entry-author-info .author-more a:first-child {
	margin: 0 0 1.4rem;
}

.author-more a:hover,
.author-more a:focus {
	box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .1);
}

.author-more a::before {
	content: "\f15c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 .6rem 0 0;
}

@media screen and (min-width: 481px) and (max-width: 600px) {

#entry-author-info .author-profile {
	flex-direction: row;
	justify-content: center;
}

#entry-author-info .author-icon {
	margin: 0 2rem 0 0;
}

}

@media screen and (min-width: 481px) and (max-width: 960px) {

#author-info .author-profile,
#modal-author-info .author-profile {
	flex-direction: row;
	justify-content: center;
}

#author-info .author-icon,
#modal-author-info .author-icon {
	margin: 0 2rem 0 0;
}

.author-info-box {
	padding: 2.8rem;
}

}

@media screen and (min-width: 601px) {

#entry-author-info {
	flex-wrap: wrap;
	flex-direction: row;
}

#entry-author-info .author-profile {
	width: 22.8rem;
}

.entry-author-link {
	width: calc(100% - 24.7rem);
}

#entry-author-info .author-more {
	margin: 0 0 1.9rem;
}

}

/*  ↑ プロフィール
	===================================================================
	↓ 広告枠 */

.entry-inner .ad-box {
	margin: 4.8rem 0;
}

.ad-title {
	font-weight: 500;
	font-size: 1.4rem;
	text-align: center;
	background: rgba(255, 255, 255, .75);
	padding: .1rem 0;
	border: .1rem solid #e0e0e0;
	border-radius: 1.5rem;
	box-shadow: 0 0 0 .1rem #fff inset;
	margin: 0 0 2rem;
}

.ad-box li {
	margin: 0 0 2rem;
	display: flex;
	justify-content: center;
}

.ad-box li:last-child {
	margin: 0;
}

.ad-box img {
	width: 100%;
	max-width: 33.6rem !important;
}

@media screen and (min-width: 601px) and (max-width: 960px) {

.ad-box {
	padding: 1.8rem;
	background: rgba(255, 255, 255, .75);
	border: .3rem solid #ececec;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .05);
}

.ad-title {
	margin: 0 0 1.4rem;
}

.ad-box ul {
	display: flex;
}

.ad-box li {
	max-width: 30rem;
	margin: 0;
}

.ad-box li:first-child {
	margin: 0 1.4rem 0 0;
}

}

@media screen and (min-width: 961px) {

.entry-inner .ad-box {
	padding: 1.8rem;
	border: .3rem solid #ececec;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .05);
}

.entry-inner .ad-box ul {
	display: flex;
}

.entry-inner .ad-box li {
	max-width: 30rem;
	margin: 0;
}

.entry-inner .ad-box li:first-child {
	margin: 0 1.4rem 0 0;
}

.ad-title {
	margin: 0 0 1.4rem;
}

.footer-etc-box .ad-box .ad-title {
	margin: 0 0 2rem;
}

}

/*  ↑ 広告枠
	===================================================================
	↓ 記事一覧 */

#top-box {
	background-color: #f8f8f8;
	border-bottom: .1rem solid #e0e0e0;
	display: flex;
	justify-content: center;
}

.breadcrumb {
	font-size: .9rem;
	padding: 1rem 0 .6rem;
	width: 100%;
	max-width: 65.6rem;
	margin: 0 1.6rem;
}

.breadcrumb-inner {
	display: flex;
}

.breadcrumb-link,
.breadcrumb-child {
	background: #fff;
	padding: 0 .8rem .1rem;
	border: .1rem solid #e0e0e0;
	border-radius: .5rem;
	margin: 0 .4rem .4rem 0;
}

.breadcrumb-gt {
	margin: 0 1rem 0 .6rem;
}

h2.archive-heading,
.page-archive .archive-entry {
	padding: 1rem;
	box-shadow: 0 .3rem #f8f8f8;
	margin: 0 0 1.6rem !important;
	position: relative;
	display: flex;
}

h2.archive-heading {
	font-weight: 500;
	font-size: 1.2rem !important;
	color: #606060;
	border-top: .3rem double #e0e0e0;
	border-bottom: .2rem solid #e0e0e0;
	justify-content: center;
}

h2.archive-heading::before {
	content: "\f002";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 .6rem 0 0;
}

.archive-header-category,
.search-result {
	margin: 0;
}

.search-result-form,
.archive-entry-body {
	display: none;
}

.page-archive .archive-entry {
	border: .1rem solid #e0e0e0;
	border-radius: .3rem;
}

.archive-entry-header {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	order: 1;
}

.entry-thumb-link {
	order: 0;
}

.page-archive .entry-thumb {
    border-radius: 12%;
	width: 6.8rem;
	height: 6.8rem;
	margin: 0 1rem 0 0;
}

.archive-entry h1.entry-title {
	font-size: 1.4rem;
	margin: 0 0 1rem;
}

.date,
.categories {
	font-size: .9rem;
	color: #808080;
	display: flex;
}

.date {
	order: 1;
}

.categories {
	margin: 0;
	order: 2;
}

.archive-entry .categories {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}

.date a,
.categories a {
	padding: 0 .7rem;
	border: .1rem solid #e0e0e0;
	border-radius: 1.2rem;
	display: flex;
	align-items: center;
}

.entry-header .date a,
.entry-header .categories a {
	margin: 0 .6rem 0 0;
}

.archive-entry .categories a {
	display: none;
}

.archive-entry .categories a:first-child {
	display: flex;
}

.date a::before,
.categories a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #48a0e8;
	margin: 0 .4rem 0 0;
}

.date a::before {
	content: "\f017";
}

.categories a::before {
	content: "\f07b";
}

.page-archive span.highlight {
	font-weight: 600;
	color: inherit;
	padding: 0;
	background-color: #fff;
	border: none;
	border-radius: 0;
	margin: 0;
}

@media screen and (min-width: 481px) {

.breadcrumb {
	font-size: 1rem;
	padding: 1.1rem 0 .7rem;
	margin: 0 2.4rem;
}

h2.archive-heading,
.page-archive .archive-entry {
	padding: 1.3rem;
	margin: 0 0 2.4rem !important;
}

h2.archive-heading {
	font-size: 1.3rem !important;
}

.page-archive .entry-thumb {
	width: 8.8rem;
	height: 8.8rem;
	margin: 0 1.3rem 0 0;
}

.archive-entry h1.entry-title {
	font-size: 1.6rem;
}

.date,
.categories {
	font-size: 1rem;
}

.date a,
.categories a {
	padding: 0 .8rem;
}

.archive-entry .categories {
	bottom: 1.3rem;
	right: 1.3rem;
}

}

@media screen and (min-width: 601px) {

.breadcrumb {
	font-size: 1.1rem;
	padding: 1.2rem 0 .8rem;
	margin: 0 3.2rem;
}

h2.archive-heading,
.page-archive .archive-entry {
	padding: 1.6rem;
	margin: 0 0 3.2rem !important;
}

h2.archive-heading {
	font-size: 1.4rem !important;
}

.page-archive .entry-thumb {
	width: 10.8rem;
	height: 10.8rem;
	margin: 0 1.6rem 0 0;
}

.archive-entry h1.entry-title {
	font-size: 1.8rem;
}

.date,
.categories {
	font-size: 1.1rem;
}

.archive-entry .categories {
	bottom: 1.6rem;
	right: 1.6rem;
}

}

@media screen and (min-width: 721px) {

.breadcrumb {
	padding: 1.3rem 0 .9rem;
	margin: 0 1.6rem;
}

h2.archive-heading,
.page-archive .archive-entry {
	padding: 1.9rem;
	margin: 0 0 4rem !important;
}

h2.archive-heading {
	font-size: 1.5rem !important;
}

.page-archive .entry-thumb {
	width: 12.8rem;
	height: 12.8rem;
	margin: 0 1.9rem 0 0;
}

.archive-entry h1.entry-title {
	font-size: 2rem;
}

.archive-entry .categories {
	bottom: 1.9rem;
	right: 1.9rem;
}

}

@media screen and (min-width: 961px) {

.breadcrumb {
	padding: 1.4rem 0 1rem;
	max-width: 108.9rem;
}

h2.archive-heading,
.page-archive .archive-entry {
	padding: 2.2rem;
	margin: 0 0 4.8rem !important;
}

.page-archive .entry-thumb {
	margin: 0 2.2rem 0 0;
}

.archive-entry .categories {
	bottom: 2.2rem;
	right: 2.2rem;
}

}

/*  ↑ 記事一覧
	===================================================================
	↓ アバウトページ */

.page-about .entry-content {
	border: 0;
}

.page-about dd {
	font-size: 1.4rem;
	margin: 0 0 3.6rem;
}

.about-subscription-count {
	display: block;
}

img.profile-icon {
	border-radius: 0;
}

/*  ↑ アバウトページ
	===================================================================
	↓ サイドバー */

.hatena-module {
	font-size: 1.4rem;
	margin: 0 0 4.8rem;
}

.hatena-module-title,
.page-about dt {
	font-weight: 500;
	font-size: 1.5rem !important;
	color: #404040;
	text-shadow: 0 .1rem #fff;
	line-height: 1.6;
	background: linear-gradient(135deg, #fafafa 0%, #e5e5e5 20%, #f5f5f5 50%, #fff 50%, #ebebeb 65%, #e5e5e5 70%, #f0f0f0 100%);
	padding: .7rem 1.1rem;
	border-top: .3rem double #000;
	border-bottom: .2rem solid #000;
	box-shadow: 0 .3rem #f8f8f8, 0 .1rem #fff inset, 0 -.1rem #fff inset;
	margin: 0 0 2rem !important;
	position: relative;
}

.hatena-module-title::before,
.page-about dt::before {
	content: "";
	background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);
	position: absolute;
	top: .1rem;
	right: 0;
	bottom: 85%;
	left: 0;
}

.hatena-module-title::after,
.page-about dt::after {
	content: "";
	background: linear-gradient(rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, 0) 100%);
	position: absolute;
	top: 85%;
	right: 0;
	bottom: .1rem;
	left: 0;
}

.hatena-module-title a {
	color: inherit;
}

.search-form {
	position: relative;
}

.search-form::before,
.search-module-button {
	width: 4rem;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search-form::before {
	content: "\f002";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.6rem;
	z-index: 1;
}

.search-module-button {
	background: none;
	border: 0;
	outline: 0;
	z-index: 2;
	opacity: 0;
}

.search-module-input {
	padding: 1.2rem 4rem 1.2rem 1.2rem;
	width: 100%;
	position: relative;
}

.hatena-urllist {
	line-height: 1.4;
	list-style: none;
	border: solid #e0e0e0;
	border-width: .1rem 0;
	box-shadow: 0 .3rem #f8f8f8;
}

.urllist-with-thumbnails li {
	border-bottom: .1rem solid #e0e0e0;
	padding: 1.6rem 0;
	width: 100%;
	position: relative;
}

.urllist-with-thumbnails li:last-child {
	border: 0;
}

.urllist-with-thumbnails li .urllist-image {
    border-radius: 12%;
	width: 8rem;
	box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
	margin: .2rem 1.1rem 0 0;
	transition: .3s ease;
}

.urllist-with-thumbnails li .urllist-image:hover,
.urllist-with-thumbnails li .urllist-image:focus {
	transform: scale(1.05);
}

.urllist-date-link {
	font-size: 1.2rem;
	color: #808080;
	margin: 0 0 .2rem;
	display: flex;
}

.urllist-date-link a {
	display: flex;
}

.urllist-date-link a::before {
	content: "\f017";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #48a0e8;
	margin: 0 .4rem 0 0;
}

.urllist-title-link {
	font-weight: 500;
	font-size: 1.4rem;
	color: #606060;
	text-align: justify;
	overflow: hidden;
	display: block;
}

.hatena-module-category ul.hatena-urllist {
	border-top: .1rem dotted #e0e0e0;
	border-bottom: 0;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.hatena-module-category .hatena-urllist li {
	border-bottom: .1rem dotted #e0e0e0;
	width: 100%;
	position: relative;
}

.hatena-module-category .hatena-urllist li a {
	padding: 1.2rem 2.1rem 1.2rem .3rem;
	box-sizing: border-box;
	width: 100%;
	height: 4.8rem;
	display: flex;
	align-items: center;
}

.hatena-module-category .hatena-urllist li a::before,
.archive-module-year-title::before,
.archive-module-month-title::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.6rem;
	color: #48a0e8;
	width: 2rem;
	position: absolute;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hatena-module-category .hatena-urllist li a::before {
	content: "\f054";
	transition: .2s ease;
}

.hatena-module-category .hatena-urllist li a:hover::before,
.hatena-module-category .hatena-urllist li a:focus::before {
	transform: translateX(.3rem);
}

.archive-module-year-title::before {
	content: "\f07b";
}

.archive-module-month-title::before {
	content: "\f15b";
	font-weight: 400;
}

.hatena-module-archive ul.hatena-urllist {
	border-top: .1rem dotted #e0e0e0;
	border-bottom: 0;
	box-shadow: none;
}

.archive-module-year {
	position: relative;
}

.archive-module-button {
	width: 100%;
	height: 4.8rem;
	position: absolute;
	z-index: 1;
	opacity: 0 !important;
	cursor: pointer;
}

.archive-module-hide-button,
.archive-module-show-button {
	position: relative;
	top: 1.3rem;
	left: .3rem;
}

.archive-module-year-title,
.archive-module-month-title {
	padding: 1.2rem 2rem 1.2rem .3rem;
	border-bottom: .1rem dotted #e0e0e0;
	box-sizing: border-box;
	width: 100%;
	height: 4.8rem;
	position: relative;
	display: flex;
	align-items: center;
}

.archive-module-months {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.hatena-urllist .archive-module-year .archive-module-month {
	width: calc((100% - 1.6rem) / 2);
	margin: 0;
	position: relative;
}

@media screen and (min-width: 561px) and (max-width: 960px) {

.hatena-module-category .hatena-urllist li {
	width: calc((100% - 1.6rem) / 2);
}

}

@media screen and (min-width: 721px) and (max-width: 960px) {

.urllist-with-thumbnails {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.urllist-with-thumbnails li {
	width: calc((100% - 1.6rem) / 2);
}

.urllist-with-thumbnails li .urllist-image {
	margin: .2rem 1.6rem 0 0;
}

.urllist-with-thumbnails li:nth-last-child(2):nth-child(odd) {
	border: 0;
}

}

@media screen and (min-width: 961px) {

.urllist-with-thumbnails li .urllist-image {
	margin: .2rem 1.8rem 0 0;
}

}

/*  ↑ サイドバー
	===================================================================
	↓ フッター */

#bottom-editarea {
	border-top: .1rem solid #fff;
	border-bottom: .8rem solid #000;
}

#page-to-top {
	position: fixed;
	bottom: 1.6rem;
	right: 1.6rem;
	z-index: 10;
}

#page-to-top a {
	font-size: 3.4rem;
	color: #707070;
	background: rgba(0, 0, 0, .15);
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	opacity: .8;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s ease;
}

#page-to-top a:hover,
#page-to-top a:focus {
	opacity: 1;
	transform: translateY(-.3rem);
}

#footer-content {
	border-top: .3rem solid #000;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footer-widget {
	font-size: 1.4rem;
	box-sizing: border-box;
	width: 100%;
	max-width: 65.6rem;
	margin: 4.8rem 1.6rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer-etc-box {
	width: 100%;
	display: flex;
	flex-direction: column;
}

#blog-info {
	margin: 4.8rem 0;
}

.footer-menu-box {
	color: #606060;
	width: 100%;
}

.footer-menu-box ul {
	background: rgba(255, 255, 255, .75);
	padding: 1.9rem;
	border: .2rem solid #e0e0e0;
	border-radius: .3rem;
	display: flex;
	flex-direction: column;
}

.footer-menu-box li {
	margin: 0 0 .5rem;
}

.footer-menu-box li:last-child {
	margin: 0;
}

.footer-menu-box li a {
	text-shadow: 0 .1rem #fff;
	background: rgba(0, 0, 0, .03);
	padding: .3rem 1.4rem;
	border-radius: 1.5rem;
	display: flex;
	align-items: center;
}

.footer-menu-box li a:hover,
.footer-menu-box li a:focus {
	color: inherit;
	background: rgba(0, 0, 0, .06);
}

.footer-menu-box li a::before {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 .6rem 0 0;
}

.copyright {
	font-size: 1.2rem;
	text-shadow: 0 .1rem rgba(0, 0, 0, .15);
	padding: 1.2rem 0;
	border-top: .3rem solid #000;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
}

.copyright::before,
.copyright::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	z-index: -1;
}

.copyright::before {
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
	top: 0;
	bottom: 50%;
}

.copyright::after {
	background: linear-gradient(rgba(0, 0, 0, .05), rgba(255, 255, 255, 0));
	top: 50%;
	bottom: 0;
}

@media screen and (min-width: 481px) {

.footer-widget {
	margin: 4.8rem 2.4rem;
}

.author-profile > img {
	width: 90%;
}

}

@media screen and (min-width: 601px) {

.footer-widget {
	margin: 4.8rem 3.2rem;
}

.author-profile > img {
	width: 80%;
}

}

@media screen and (min-width: 721px) {

.footer-widget {
	margin: 4.8rem 1.6rem;
}

}

@media screen and (min-width: 961px) {

.footer-widget {
	max-width: 108.9rem;
	flex-direction: row;
	justify-content: space-between;
}

.footer-etc-box {
	width: 33.6rem;
	display: flex;
	flex-direction: column;
	order: 2;
}

#blog-info {
	box-sizing: border-box;
	width: 33.6rem;
	margin: 0;
	order: 0;
}

.author-profile > img {
	width: 100%;
}

.footer-menu-box {
	width: calc(100% - 72.8rem);
	max-width: 32.1rem;
	min-width: 22.5rem;
	margin: 0;
	order: 1;
}

}

/*  ↑ フッター
	===================================================================
	↓オープン効果 */

#blog-title {
	animation: frame_01 1.2s ease 0s 1 normal;
}

@keyframes frame_01 {

0% {
	opacity: 0;
	transform: translateY(-3rem);
}

100% {
	opacity: 1;
}

}

#global-menu,
#modal-button,
.header-info {
	animation: frame_02 1.2s ease .2s 1 normal;
}

@keyframes frame_02 {

0% {
	opacity: 0;
	transform: translateY(3rem);
}

100% {
	opacity: 1;
}

}

#content-inner {
	animation: frame_03 1.2s ease .4s 1 normal;
}

@keyframes frame_03 {

0% {
	opacity: 0;
	transform: translateY(3rem);
}

100% {
	opacity: 1;
}

}

#bottom-editarea {
	animation: frame_04 1.2s ease 0s 1 normal;
}

@keyframes frame_04 {

0% {
	opacity: 0;
	transform: translateY(3rem);
}

100% {
	opacity: 1;
}

}

/*  ↑ オープン効果
	===================================================================
	EOF */