@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* ==============================================================
  html要素
============================================================== */
/* html */
html{
	background: #eee;
	font-size:62.5%; /* 10px */	
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%
}

/* body */
body {
	width: 840px;
	padding: 20px;
	margin: 0 auto;
	background: #fff;
	border-top: solid 4px #337ab7;
	color: #444;
	line-height: 1.8;
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.8rem; /* 18px */
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-kerning: normal;
	font-kerning: normal;
}

/* h */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	margin-bottom:1.2rem;
}
h1, .h1 { font-size: 2.6rem; }
h2, .h2 { font-size: 2.4rem; }
h3, .h3 { font-size: 2.2rem; }
h4, .h4 { font-size: 2.0rem; }
h5, .h5 { font-size: 1.8rem; }
h6, .h6 { font-size: 1.6rem; }

/* a */
a {
	color: #337ab7;
	text-decoration: none;
}
a:hover, a:focus {
	color: #23527c;
	text-decoration: underline;
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
h1 > a:hover, h1 > a:focus, h2 > a:hover, h2 > a:focus,
h3 > a:hover, h3 > a:focus, h4 > a:hover, h4 > a:focus,
h5 > a:hover, h5 > a:focus, h6 > a:hover, h6 > a:focus {
	text-decoration: none;
	color: #444;
	font-weight: bold;
}

/* blockquote */
blockquote{
	background-color: #f5f5f5;
	padding: 1rem;
	position: relative;
	z-index: 1;
}
blockquote:before, blockquote:after{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 4rem;
	line-height: 4rem;
	color: #fff;
	position: absolute;
	z-index: -1;
}
blockquote:before{
	content: "\f10d";
	left: 5px;
	top: 5px;
}
blockquote:after{
	content: "\f10e";
	right: 5px;
	bottom: 5px;
}

/* input, textarea */
input, textarea {
	font-size: 100%;
	border-radius: 2px;
	border: solid 1px #ddd;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	color: #444;
	padding: 0.4rem;
	width: 100%;
	overflow: auto; /*for IE*/
}
input:focus,
textarea:focus {
	border-color: #83B6C2;
	box-shadow: 2px 2px 4px rgba(143,183,222,0.6),-2px -2px 4px rgba(143,183,222,0.6),inset 0 1px 2px rgba(0,0,0,0.1);
	outline: none;
}

/* select */
select {
	font-size:100%;
	border: solid 1px #ccc;
	padding: 1rem;
	width: 100%;
}

/* checkbox, radio */
input[type=checkbox], input[type=radio] {
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-right: 0.2rem;
	width: auto;
}

/* search */
input[type="search"] {
  -webkit-appearance: none;
}
input[type="search"]:focus {
  outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration  {
  -webkit-appearance: none;
}

/* button */
button {
	font-size: 100%;
	cursor: pointer;
}


/* ==============================================================
  header
============================================================== */
#head {
	margin-bottom: 4rem;
}
#head > h1 > span {
	display: block;
	font-size: 1.6rem;
}
#head > nav.menu > ul {
	font-size: 1.6rem;
}
#head > nav.menu > ul > li {
	margin: 8px;
}
#head > nav.menu > ul > li > a {
	display: block;
	padding: 5px;
	text-decoration: none;
}
#head > nav.menu > ul > li > a.current {
	border-bottom: solid 4px #337ab7;
}
#head > nav.menu > ul > li > a:hover,
#head > nav.menu > ul > li > a:focus {
	color: #23527c;
	border-bottom: solid 4px #337ab7;
}
#head > nav.menu > ul > li:first-child {
	margin-left: 0;
}
#head > nav.menu > ul > li:last-child {
	margin-right: 0;
}
#head > nav.menu > ul > li > a:first-child {
	padding-left: 0;
}
#head > nav.menu > ul > li > a:last-child {
	padding-right: 0;
}


/* ==============================================================
  main
============================================================== */
/* plugin title */
#main > article > section > h3 {
	padding: 0.45em 0;
	border-top: 1px solid #717171;
	border-bottom: 1px solid #717171;
}

/* comment */
#comment > .section {
	font-size: 1.6rem;
}
#comment > .section > ul.foot  {
	font-size: 1.4rem;
	align-items: flex-end;
}
#comment > .section > ul.foot > li  {
	margin: 0.5rem;
}
#comment > .section > ul.foot > li:first-child {
	margin-left: 0;
}
#comment > .section > ul.foot > li:last-child {
	margin-right: 0;
}
#comment > .section > ul.foot > li > a {
	text-decoration: none;
	font-size: 1.8rem;
}
#comment > .section > ul.foot > li > a.edit:before {
	content: "\f044";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
#comment > .section > ul.foot > li > a.del:before {
	content: "\f2ed";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
#comment > .section > ul.foot > li > a > span {
	display: none;
}

/* comment form */
#comment-form > form {
	font-size: 1.6rem;
}
#comment-form > form > p {
	margin-bottom:0.8rem;
}
#comment-form > form > p > .label {
	display:block;
	font-size: 1.2rem;
}
#comment-form > form > p.labels > label {
	margin-right: 1.2rem;
}
#comment-form > form > p > textarea {
	height: 11rem;
}

/* comment form - foot */
#comment-form > form > div.foot {
	margin-bottom: 2rem;
}
#comment-form > form > div.foot > p {
	margin-right: 2rem;
	width: 30%;
}
#comment-form > form > div.foot > p:last-child {
	margin-right: 0;
}
#comment-form > form > div.foot > p > .label {
	display: block;
	font-size: 1.2rem;
	width: 100%;
}
#comment-form > form > div.foot > p > input {
	width: 100%;
}

/* pager */
#main > .pager > li  {
	margin: 0 1.5rem;
}
#main > .pager > li:first-child {
	margin-left: 0;
}
#main > .pager > li:last-child {
	margin-right: 0;
}


/* ==============================================================
  aside
============================================================== */
#aside {
	margin-top: 4.0rem;
}
#aside > section {
	margin-bottom: 4.0rem;
}
#aside > section:last-of-type {
	margin-bottom: 0;
}
#aside > section > h3 {
	padding: 0.45em 0;
	border-top: 1px solid #717171;
	border-bottom: 1px solid #717171;
}
#aside > section > ul {
	font-size: 1.6rem;
}

#aside.flex {
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content: space-between;
}
#aside.flex > section {
	width: 49%;
}



/* ==============================================================
  foot
============================================================== */
#foot {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid #717171;
	
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content: space-between;
}
#foot > ul:first-child {
	margin-right: auto;
}
#foot > small {
	font-size: 1.2rem;
}
#foot > ul > li {
	margin-right: 5px;
}


/* ==============================================================
  各コンテンツ
============================================================== */
/* ------------------------
  ホームページトップ
------------------------ */
.service-top > #main > article > h2 {
	padding: 0.25em 0;
	border-bottom: 1px solid #717171;
	font-size: 1.6rem;
	font-weight: bold;
}
.service-topb > #main > article > h2 > time {
	font-weight: bold;
}
.service-top > #main > article > h2 > time:before {
	content: "\f017";
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	padding-right: 0.2rem;
}
.service-top > #aside > img {
	width: 100%;
	object-fit: cover;
}


/* ------------------------
  ブログ、レビュー
------------------------ */
/* 記事タイトル */
.service-blog > #main > article > header > h2 {
	padding: 0.45em 0;
	border-top: 1px solid #717171;
	border-bottom: 1px solid #717171;
}
.service-blog > #main > article > header > time {
	font-size: 1.4rem;
}
.service-blog > #main > article > header > time:before {
	content: "\f017";
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	padding-right: 0.2rem;
}

/* 記事フッター */
.service-blog > #main > article > footer > ul.foot {
	font-size: 1.6rem;
}
.service-blog > #main > article > footer > ul.foot > li  {
	margin: 0.5rem;
}
.service-blog > #main > article > footer > ul.foot > li:first-child {
	margin-left: 0;
}
.service-blog > #main > article > footer > ul.foot > li:last-child {
	margin-right: 0;
}


/* ------------------------
  レビュー
------------------------ */
.service-review > #main > article > a {
	float: left;
	margin: 0.8rem 1.2rem 0 0;
}
.service-review > #main > article > a > img {
	border-radius: 0.4rem;
}
					

/* ------------------------
  ページズ
------------------------ */
.service-pages > #main > article > h2 {
	padding: 0.45em 0;
	border-top: 1px solid #717171;
	border-bottom: 1px solid #717171;
}


/* ------------------------
  ブックマーク
------------------------ */
/* カテゴリー */
.service-bookmark > #main > ul.category {
	width:100%;
	margin-bottom: -2rem;

	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content: space-between;
}
.service-bookmark > #main > ul.category > li {
	width:49%;
	margin-bottom: 2rem;
}
.service-bookmark > #main > ul.category > li > h2 {
	padding: 0.45em 0;
	border-top: 1px solid #717171;
	border-bottom: 1px solid #717171;
}

/* ブックマーク */
.service-bookmark > #main > ul.category > li > ul > li:before {
	content: "\f02e";
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	padding-right: 0.6rem;
}
.service-bookmark > #main > ul.category > li > ul > li.banner:before { /* バナー */
	content: "";
	padding-right: 0;
}
.service-bookmark > #main > ul.category > li > div.foot {
	margin-top: 0.8rem;
	font-size: 1.4rem;
	text-align: right;
}


/* ------------------------
  ノベル
------------------------ */
.service-novel > #main > ul.category > li {
	width: 100%;
}
.service-novel > #main > ul.category > li > ul > li {
	margin-right: 1.8rem;
}
.service-novel > #main > ul.category > li > ul > li:last-child {
	margin-right: 0;
}
.service-novel > #main > ul.category > li > ul > li:before {
	content: "\f249";
}
.service-novel > #main > section.plug {
	font-size: 1.4rem;
	padding: 1.4rem;
	border: 1px dashed #717171;
	border-radius: 0.4rem;
	width: 100%;
}


/* ------------------------
  ギャラリー
------------------------ */
.service-gallery > #main > ul.category > li > ul > li:before {
	content: "";
	padding-right: 0;
}


/* ------------------------
  プロフィール
------------------------ */
/* プロフィール */
.service-profile > #main > .profile > div.flex > dl,
.service-profile > #main > .profile > div.flex > dl > dt,
.service-profile > #main > .profile > div.flex > dl > dd {
	box-sizing: border-box;
	border: 1px none #ccc;
}
.service-profile > #main > .profile > div.flex > dl > dt,
.service-profile > #main > .profile > div.flex > dl > dd {
	margin: 0;
	border-top-style: solid;
	padding: 0.8rem;
}
.service-profile > #main > .profile > div.flex {
	width: 100%;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content: space-between;
}
.service-profile > #main > .profile > div.flex > div.img {
	width: 40%;
}
.service-profile > #main > .profile > div.flex > div.img > img {
	width: 100%;
	object-fit: cover;
}
.service-profile > #main > .profile > div.flex > dl {
	width: 58%;
	border-style: none solid solid;
}
.service-profile > #main > .profile > div.flex > dl > dt {
	width: 30%;
	background: #eee;
}
.service-profile > #main > .profile > div.flex > dl > dd {
	width: 70%;
	border-left-style: solid;
}

/* インタビュー */
.service-profile > #main > .interview > dl > dt {
	padding-top: 1.6rem;
}
.service-profile > #main > .interview > dl > dt:before {
	content: "\f059";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 0.4rem;
}
.service-profile > #main > .interview > dl > dt:first-child {
	padding-top: 0;
}
.service-profile > #main > .interview > dl > dd {
	padding-bottom: 1.6rem;
	border-bottom: 1px dashed #717171;
}
.service-profile > #main > .interview > dl > dd:before {
	content: "\f27a";
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	padding-right: 0.4rem;
}
.service-profile > #main > .interview > dl > dd:last-child {
	padding-bottom: 0;
	border: none;
}


/* ------------------------
  フォーム関連
  - メールフォーム
  - 掲示板
------------------------ */
.service-form > #main > form {
	width: 80%;
	margin: 0 auto;
}
.service-form > #main > form > p {
	margin-bottom: 1.2rem;
}
.service-form > #main > form > p > .label {
	font-size: 1.6rem;
	display: block;
}
.service-form > #main > form > p > textarea {
	height: 18rem;
}

/* input, select, checkbox, radio */
.service-form > #main > form > p > input,
.service-form > #main > form > p > select,
.service-form > #main > form > p > input[type=checkbox],
.service-form > #main > form > p > input[type=radio] {
	width: 80%;
}

/* foot */
.service-form > #main > form > div.foot {
	margin-bottom: 1.2rem;
}
.service-form > #main > form > div.foot > p {
	margin-right: 2rem;
	width: 30%;
}
.service-form > #main > form > div.foot > p:last-child {
	margin-right: 0;
}
.service-form > #main > form > div.foot > p > .label {
	display: block;
	font-size: 1.6rem;
	width: 100%;
}
.service-form > #main > form > div.foot > p > input {
	width: 100%;
}

/* 文字回込のアイコン */
.service-form > #main > form > p > label.float0 > span:after {
	content: url('/site/img/common/ia_L.gif');
}
.service-form > #main > form > p > label.float1 > span:after {
	content: url('/site/img/common/ia_R.gif');
}
.service-form > #main > form > p > label.float2 > span:after {
	content: url('/site/img/common/ia_bottom.gif');
}
.service-form > #main > form > p > label.float > span:after {
	content: url('/site/img/common/ia_none.gif');
}


/* ------------------------
  掲示板
------------------------ */
.service-bbs > #main > form {
	margin: 0 auto 4rem auto;
}

/* 区切り線 */
.service-bbs > #main > article {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid #717171;
}
.service-bbs > #main > article > article {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px dashed #717171;
}

/* 親記事 */
.service-bbs > #main > article > header > ul.head {
	font-size: 2rem;
	font-weight: bold;
	align-items: flex-end;
}
.service-bbs > #main > article > header > ul.head > li {
	margin: 0.5rem;
}
.service-bbs > #main > article > header > ul.head > li:first-child {
	margin-left: 0;
}
.service-bbs > #main > article > header > ul.head > li:last-child {
	margin-right: 0;
}
.service-bbs > #main > article > header > ul.head > li > a {
	text-decoration: none;
}
.service-bbs > #main > article > header > ul.head > li > a.mail:before {
	content: "\f0e0";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > header > ul.head > li > a.home:before {
	content: "\f015";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > header > ul.head > li:last-child {
	margin-left: auto;
}
.service-bbs > #main > article > header > ul.head > li > a > span {
	display: none;
}
.service-bbs > #main > article > header > ul.head > li > a.res:before {
	content: "\f3e5";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 0.2rem;
}
.service-bbs > #main > article > footer > ul.foot {
	font-size: 1.6rem;
	align-items: flex-end;
}
.service-bbs > #main > article > footer > ul.foot > li  {
	margin: 0.5rem;
}
.service-bbs > #main > article > footer > ul.foot > li:first-child {
	margin-left: 0;
}
.service-bbs > #main > article > footer > ul.foot > li:last-child {
	margin-right: 0;
}
.service-bbs > #main > article > footer > ul.foot > li > a {
	text-decoration: none;
	font-size: 1.8rem;
}
.service-bbs > #main > article > footer > ul.foot > li > a.edit:before {
	content: "\f044";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > footer > ul.foot > li > a.del:before {
	content: "\f2ed";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > footer > ul.foot > li > a > span {
	display: none;
}

/* 子記事 */
.service-bbs > #main > article > article {
	width: 95%;
	margin-left: auto;
	font-size: 1.6rem;
}
.service-bbs > #main > article > article > header > ul.head {
	font-size: 1.8rem;
	font-weight: bold;
	align-items: flex-end;
}
.service-bbs > #main > article > article > header > ul.head > li {
	margin: 0.5rem;
}
.service-bbs > #main > article > article > header > ul.head > li:first-child {
	margin-left: 0;
}
.service-bbs > #main > article > article > header > ul.head > li:last-child {
	margin-right: 0;
}
.service-bbs > #main > article > article > header > ul.head > li > a {
	text-decoration: none;
}
.service-bbs > #main > article > article > header > ul.head > li > a.mail:before {
	content: "\f0e0";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > article > header > ul.head > li > a.home:before {
	content: "\f015";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > article > header > ul.head > li > a > span {
	display: none;
}
.service-bbs > #main > article > article > footer > ul.foot {
	font-size: 1.6rem;
	align-items: flex-end;
}
.service-bbs > #main > article > article > footer > ul.foot > li  {
	margin: 0.5rem;
}
.service-bbs > #main > article > article > footer > ul.foot > li:first-child {
	margin-left: 0;
}
.service-bbs > #main > article > article > footer > ul.foot > li:last-child {
	margin-right: 0;
}
.service-bbs > #main > article > article > footer > ul.foot > li > a {
	text-decoration: none;
	font-size: 1.6rem;
}
.service-bbs > #main > article > article > footer > ul.foot > li > a.edit:before {
	content: "\f044";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > article > footer > ul.foot > li > a.del:before {
	content: "\f2ed";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.service-bbs > #main > article > article > footer > ul.foot > li > a > span {
	display: none;
}


/* ------------------------
  足跡
------------------------ */
.page-footmark > #main > ul > li > time {
	margin-right: 1.6rem;
	font-size: 1.6rem;
}
.page-footmark > #main > ul > li > a.user {
	margin-right: 0.6rem;
}
.page-footmark > #main > ul > li > a.user:before {
	content: "\f007";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.2rem;
}
.page-footmark > #main > ul > li > a > img {
	vertical-align: middle;
}


/* ------------------------
  フレンド一覧
------------------------ */
.page-friend > #main > ul.friend > li {
	width: 64px;
	font-size: 1.2rem;
	line-height: 1.2rem;
	text-align: center;
	margin: 0 0 1rem 1rem;
}
.page-friend > #main > ul.friend > li:first-child {
	margin-left: 0;
}


/* ------------------------
  フレンド一覧
------------------------ */
.page-addfriend > #main > form {
	width: 100%;
}


/* ------------------------
  フレンド申請
------------------------ */
.page-auth > #main > form {
	width: 100%;
	margin-top: 2.0rem;
}
.page-auth > #main > form > .error:before {
	content: "\f071";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 0.4rem;
}
.page-auth > #main > form > p > span.cookie-mes {
	display: block;
	font-size: 1.2rem;
	line-height: 1.4rem;
}


/* ------------------------
  エラー画面
------------------------ */
.page-error > #main > article {
	padding: 6rem 1rem 8rem 1rem;
	text-align: center;
}
.page-error > #main > article > h2.error {
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 3.4rem;
	font-weight: bold;
}