@charset "utf-8";

/* アイコンフォント */
@font-face {
	font-family: 'H&S iconfont';
	src:url('../font/hs_iconfont/hs_iconfont.ttf');
	src:url('../font/hs_iconfont/hs_iconfont.eot?#iefix') format('embedded-opentype'),
		url('../font/hs_iconfont/hs_iconfont.ttf') format('truetype'),
		url('../font/hs_iconfont/hs_iconfont.woff') format('woff'),
		url('../font/hs_iconfont/hs_iconfont.svg#hs_iconfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
.iconfont{
	/* フォントファミリー */
	font-family: 'H&S iconfont';
	/* リガチャ有効化 */
	font-feature-settings: "liga" 1 ;
	-webkit-font-feature-settings: "liga" 1 ;
	/* アンチエイリアシング */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
	/* フォントサイズ（初期） */
	font-size: 24px;
	font: #555;
}
.iconfont a{
	color: #555;
}
.iconfont a:hover{
	opacity: 0.8;
}


/* 英語フォント */
.en{
	font-family: 'Sorts Mill Goudy', 'Times New Roman', sans-serif;
	font-weight: normal;
	}


HTML,BODY{
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
	font-family: 'Open Sans', 'Lucida Grande', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

.pure-pusher-container{
	min-height: 100%;
}

/* ドロワー用要素を非表示する */
.pure-toggle,.pure-toggle-label, .pure-overlay{
	display: none;
}

#all{
	margin: 60px 0 0;
	padding: 0; /* メインコンテンツボックスの位置調整 */
	height: auto;
}

#main{
	margin: 0 auto;
	padding: 0;
	min-height: 100%;
	width: 960px;
	overflow: auto;
	/* border-bottom: 1px solid #333333; */
	overflow: hidden; /* 何故かスクロールバーが出る対策 非推奨 */
}
#contents{
	margin: 0 auto 200px;
	padding: 0;
	width: 840px;
}

/* ヘッダー */
HEADER{
	position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	margin: 0 0 40px;
	padding: 0;
}

/* ヘッダーTOP用 */
#toppic_wrap{
	/* sitetitle の後の行に <div id="toppic_wrap"><span id="toppic"></span></div> を挿入 */
	display: block;
	position: relative;
}
#toppic{
	display: block;
	margin: 72px auto 0;
	padding: 0;
	background: url(../top/toppic.png) no-repeat; /* ロゴを背景に設定 */
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 360px;
	z-index: 1;
}
#toppic:before{
	content: "";
	display: block;
	background: rgba(0, 0, 0, .4);
	width: 100%;
	height: 100%;
	z-index: 2;
}
#toppic:after{
	content: "";
	display: block;
	position: absolute;
	 top: 0;
	 left: 0;
	z-index: 3;
}

/* サイトロゴ */
#sitetitle{
	position: relative;
	margin: 22px auto 3px;
	background: url(../top/hl3m.png) no-repeat; /* ロゴを背景に設定 */
	background-position: center;
	max-width: 360px;
}
#sitetitle:before{
	/* アス比固定① */
	padding-top: calc(75 / 360 * 100%);
	display: block;
	content: "";
}

#sitetitle a{
	position: absolute; /* アス比固定② */
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
	display: block;
	color: transparent;
}

#sitetitle-top{
	position: relative;
	margin: 32px auto 3px;
	background: url(../top/hl3.png) no-repeat; /* ロゴを背景に設定 */
	background-size: contain;
	background-position: center;
	max-width: 240px;
}
#sitetitle-top:before{
	/* アス比固定① */
	padding-top: calc(180 / 240 * 100%);
	display: block;
	content: "";
}

#sitetitle-top a{
	position: absolute; /* アス比固定② */
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
	display: block;
	color: transparent;
}


/* ここからメニュー */
NAV{
	width: 100%;
	height: 150px;
	margin: 0 auto;
	position: relative;
	}
/* トップページの本文-ヘッダー間余白の調整 */
/* ヘッダー高さ＋余白だけheightをとる */
.menu_nav_top{
	/* class="pure-drawer" に menu_nav_top を挿入 */
	height: 320px;
	/* margin-bottom: 460px; ヘッダー入れる場合 */
}
/* メインメニュー */
#mmenu{
	position: absolute;
	 bottom: 0;
	 left: 0;
	 right: 0;
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* justify-content */
	-webkit-box-pack: justify; /* Android 2~4 */
	-ms-flex-pack: justify; /* IE 10 */
	-webkit-justify-content: space-between;/* safari PC */
	justify-content: space-around;
	width: 920px;
	margin: 0 auto;
}
#mmenu li{
	flex-grow: 1;
	margin: 0; /* style.cssでliのmargin-leftに1emを指定しているので */
	padding: 0;
	height: auto;
}
#mmenu li a{
	display: block;
	width: 80%;
	color: #333;
	font-family: 'Sorts Mill Goudy', 'Times New Roman', serif;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	border-bottom: 2px solid transparent;
}
#mmenu li:hover a, #mmenu li:active a, #mmenu_here{
	border-bottom: 2px solid #333;
	transition: .2s;
}
/* アイコン系メニュー */
UL#imenu{
	position: absolute;
	 top: 20px;
	 right: 20px; /* calc()が効かない環境用 */
	 right: calc((100% - 960px) /2 + 20px);
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-direction */
	-ms-flex-direction: row; /* IE10 */
	-webkit-box-orient: normal; /* Safari */
	-webkit-flex-direction: row; /* Android 2~4 */
	flex-direction: row;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
	/* justify-content */
	-webkit-box-pack: justify; /* Android 2~4 */
	-ms-flex-pack: justify; /* IE 10 */
	-webkit-justify-content: space-between;/* safari PC */
	justify-content: space-between;
	width: 180px;
	margin: 0;
	z-index: 2;
	/* アイコンフォント */
	font-family: 'H&S iconfont';
	/* リガチャ有効化 */
	font-feature-settings: "liga" 1 ;
	-webkit-font-feature-settings: "liga" 1 ;
	/* アンチエイリアシング */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
UL#imenu li{
	display: block;
	/* flex-grow */
	-webkit-flex-grow: 1;  /* Safari*/
	-webkit-box-flex: 1;  /* Android */
	flex-grow: 1;
	display: block;
	margin: 2.5px;
}
UL#imenu li a{
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #555;
	color: #fff;
	font-size: 20px;
	line-height: 42px; /* 40pxで真ん中にくるが少し上にズレるので+3px */
	text-align: center;
	margin: 0 auto;
}
#imenu li a:hover{
	background: #777;
}
#imenu li a:hover img{
	opacity: 1;
}
#imenu li.webclap a:hover{ background: #f66700; }
#imenu li.reply a:hover{ background: #f39c12; }
#imenu li.mail a:hover{ background: #27ae60; }
#imenu li.twitter a:hover{ background: #55acee; }
#imenu li.pixiv a:hover{ background: #0096db; }


SECTION{
	margin: 2em 0;
}


/* 等幅マルチカラム */
.multicolumn{
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
	/* justify-content */
	-webkit-box-pack: justify; /* Android 2~4 */
	-ms-flex-pack: justify; /* IE 10 */
	-webkit-justify-content: space-between; /* safari PC */
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}
/* 2カラム子要素 */
.two_col{
	width: 46%;
	flex: none;
	flex-basis: 46%;
}

/* Link用 */
.link_col{
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
	margin: 0 auto;
	width: 100%;
}
.site_banner{
	flex-basis: 200px;
	margin-right: 20px;
}
.site_basic_info{
	flex-basis: 200px;
}
.site_overview{
	flex-basis: 300px;
	flex-grow: 1;
}
/* バナーURL用テキストボックス */
.banner_url{
	width: 200px;
}
.banner_col{
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
	margin: 0 auto;
	width: 100%;
}
.banner{
	flex-basis: 210px;
}
.banner p{
	margin: 0 auto;
	width: 200px;
	vertical-align: baseline;
}
.banner p img{
	display: block;
}

/* フォーム */
INPUT, TEXTAREA{
	margin: 0;
	border: 1px solid #919191;
	color: #666;
	background-color: #FFF;
	border-radius: 2px;
	text-align: left;
	padding: 0.3em;
	}
/* フォーム（フォーカス時） */
input[type="text"]:focus, textarea:focus {
	border: 1px solid #E45252;
	transition: border-color .1s ease-in;
	outline: 0;  /* 自動フォーカスを切る */
	color: #333;
	}
/* submitのとき */
input[type="submit"], input[type="button"]{
	padding: 0.8em 3em;
	color: #FFF;
	border: none;
	background-color: #666;
	border-radius: 3px;
	text-align: center;
	outline: none;
	text-decoration: none;
}
input[type="submit"]:hover, input[type="button"]:hover{
	background-color: #333;
	color: #FFF;
	transition: .2s;
}

/* セレクトボックス */
label.select{
	position: relative;
	display: block;
	border: 1px solid #919191;
	border-radius: 2px;
	background-color: #FFF;
}
label.select::before{
	content: "";
	position: absolute;
	 top: 50%;
	 right: 8px;
	display: block;
	width: 0;
	height: 0;
	margin: -2px 0 0 0;
	border: 4px solid transparent;
	border-top: 5px solid #919191;
}
select{
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    padding: 0.35em 0.7em;
    color: #333;
    border: none;
    border-radius: 2px;
    background: transparent;
}
select:focus{
	outline: none;
}
::-ms-expand {
    display: none;
}

/* 更新履歴を表にする */
.renewal-log{
	display: table;
	margin-bottom: 1.5em;
}
.renewal-log DL{
	margin: 0;
	padding: 0;
	display: table-row;
}
.renewal-log DT{
	margin: 0;
	padding: 0.25em 0.5em 0.25em 0;
	display: table-cell;
	font-weight: normal;
}
.renewal-log DD{
	margin: 0;
	padding: 0.25em 0 0.25em 0.5em;
	display: table-cell;
}
/* サイトマップを表にする */
.sitemap{
	display: table;
}
.sitemap DL{
	margin: 0;
	padding: 0;
	display: table-row;
}
.sitemap DT{
	margin: 0;
	padding-right: 0.5em;
	display: table-cell;
	font-weight: normal;
}
.sitemap DD{
	margin: 0;
	padding-left: 0.5em;
	display: table-cell;
}

/* 各種見出し */
H1{
	text-align: center;
	margin: 20px;
	padding: 0;
	font-weight: normal;
	font-size: 200%;
	line-height: 1.5;
	color: #333;
}
H1.en{
	font-family: 'Sorts Mill Goudy', 'Times New Roman', serif;
}
/* タイトルをDIVで囲った時用 */
div#title{ margin: 20px; }
#title H1{ margin: 0; }
#title P + H1, #title DIV + H1{ margin-bottom: 0; }
#title H1 + P, #title H1 + DIV{ margin-top: 0; }
H2{
	border-bottom: 1px solid #333;
	margin: 3em -1% 1em -1%;
	padding: 0.5%;
	font-size: 170%; /* 約24px */
	font-weight: normal;
	}
H3{
	margin: 2em -0.5% 1em;
	padding: 0 0.5%;
	border-bottom: 1px dotted #333;
	font-size: 128%; /* 約18px */
	font-weight: normal;
}
H2 + H3{ /* H2のすぐ次にあるH3のみ */
	margin-top: 0;
}
H4{
	margin: 0;
	padding: 0 0.5%;
	font-size: 100%; /* 14px */
}
H5{
	margin: 0 1% 0;
	padding: 0 0.5%;
	font-size: 90%;
	font-weight: normal;
}

/* リスト */
UL{ list-style: none; }

/* ゴーストボタン */
/* 基本 */
.button a{
	display: inline-block;
	padding: 4px 16px;
	color: #333;
	font-size: 86%;
	border: 1px solid #333;
	border-radius: 5px;
	text-align: center;
	outline: none;
	text-decoration: none;
}
.button a:hover, .button a:active{
	background-color: #333;
	color: #fff;
}
/* ページ内ジャンプ（Novel用） */
.int-page-jump ul{
	list-style: none;
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
}
.int-page-jump li{
	display: inline-block;
	margin: 0;
}
.int-page-jump a{
	display: block;
	margin: 2.5px;
	padding: 0.8em 1.2em;
	border: 1px solid #d54b44;
	border-radius: 2px;
	text-align: center;
	outline: none;
	text-decoration: none;
	color: #d54b44;
	font-size: 100%;
	line-height: 1.0;
}
.int-page-jump li a:hover, .int-page-jump li a:active{
	background-color: #d54b44;
	color: #fff;
}
/* Page Top */
.page_top_wrap{
	position: relative;
}
.page_top_wrap p{
	margin: 0;
	padding: 0;
}
.page_top{
	position: fixed;
	 bottom: 20px;
	 right: 20px;
	 /* right: calc((100% - 960px) /2 + 20px); */ /* コンテンツ横幅内に入れ込む場合 */
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .6);
	color: transparent;
	margin: 0;
}
.page_top span{
	display: block;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
}
.page_top span::after{
	content: "";
	display: block;
	position: absolute;
	 top: 21px;
	 left: 20px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
}
a.page_top:hover, a.pagetop:active{
	opacity: .8;
}
/* パンくずリスト */
#headnav li, #footnav li{
	display: inline-block;
	}
#headnav li + li:before, #footnav li + li:before{
	margin: 0 0.5em;
	content: ">";
}

/* サムネイル */
.thumblist{
	/* サムネイルリスト（ボックス） */
	width: 810px;
	margin: 0 auto 1em;
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
}
.thumbnail{
	/* サムネイル */
	display: block;
	position: relative;
	width: 260px; /* 黄金比で約H160px */
	overflow: hidden;
	border-radius: 5px;
	margin: 5px;
	padding: 0;
	line-height: 1.0; /* 縦の隙間なくす */
}
.thumbnail:after{
	/* アス比固定① */
	padding-top: 61.8%; /* 黄金比 */
	/*padding-top: 100%;*/ /* 正方形 */
	display: block;
	content: "";
}
	/* アス比固定② */
.thumbnail > content{
	position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
}
.thumbnail span{
	/* 画像部分（backgroundで指定） */
	position: absolute;
	 top: 0;
	 left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: no-repeat center center;
	background-size: cover;     /* ボックスに合わせてリサイズ */
	}
.thumbnail span.new:before{
	/* Newアイコン */
	content: "New";
	position: absolute;
	 top: 5px;
	 left: 5px;
	margin: 0;
	padding: 5px 10px;
	font-family: 'Open Sans', serif;
	font-size: 14px;
	color: #fff;
	background-color: #d54b44;
	border-radius: 2px;
}
.thumbnail span.up:before{
	/* Upアイコン */
	content: "Up";
	position: absolute;
	 top: 5px;
	 left: 5px;
	margin: 0;
	padding: 5px 10px;
	font-family: 'Open Sans', serif;
	font-size: 14px;
	color: #fff;
	background-color: #f5a31f;
	border-radius: 2px;
}

.thumbcaption{
	/* 背景暗転 */
	position: absolute;
	 top: 0;
	 left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	border-radius: 5px;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
}
.thumbnail:hover .thumbcaption, .thumbcaption:active .thumbcaption{
	/* マウスオーバーでキャプション */
	opacity: 1;
	transition: .2s ease-in-out;
}
.tc-wrap{
	/* キャプションボックス */
	width: 90%;
	position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	margin: auto;
	padding: 0;
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-direction */
	-ms-flex-direction: column; /* IE10 */
	-webkit-box-orient: block-axis; /* Safari */
	-webkit-flex-direction: column; /* Android 2~4 */
	flex-direction: column;
	/* justify-content */
	-webkit-box-pack: center; /* Android 2~4 */
	-ms-flex-pack: center; /* IE 10 */
	-webkit-justify-content: center; /* safari PC */
	justify-content: center;
}
.tc-title{
	line-height: 1.2;
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.tc-date{
	line-height: 1.2;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 10px 0;
	margin: 0;
}
.thumbnail a:visited{
	opacity: .8;
}

.thumblist-offline{
	/* サムネイルリスト（ボックス） */
	width: 810px;
	margin: 0 auto 1em;
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
}
.thumbnail-offline{
	/* サムネイル */
	display: block;
	position: relative;
	max-width: 260px; /* 260px */
	overflow: hidden;
	border-radius: 5px;
	margin: 5px;
	padding: 0;
	line-height: 1.0; /* 縦の隙間なくす */
}
.thumbnail-offline a img{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}
.tc-title-offline{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-radius: 0 0 5px 5px / 0 0 5px 5px; /* 下だけ角丸（hover時に一瞬四角になるのを防止） */
	width: 100%;
	height: 30%;
	margin: 0;
	padding: 5%;
	background: rgba(0,0,0,.6);
	color: #fff;
	line-height: 1.5;
	transition: .2s ease-in-out;
}
.thumbnail-offline:hover a img{
	opacity: 1;
}
.thumbnail-offline:hover .tc-title-offline{
	opacity: .8
}

/* イラスト */
.gallery{
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: center;
}
.gallery a, .gallery p{
	/* リンクなしの場合はpで囲む */
	display: inline-block;
	position: relative;
}
/* ホバー時に枠 */
.gallery a:after{
	position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	content: "";
	box-sizing: border-box;
	border: 2px solid rgba(0, 0, 0, 0);
	transition: .3s ease-in-out;
}
.gallery a:hover:after{
	border: 2px solid rgba(0, 0, 0, .3);
}
.gallery img{
	margin: 0;
	vertical-align: bottom; /* 謎の余白を消す */
	display: inline-block;
	max-width: 100%;
	width: 100%; /* Firefoxバグ対策 */
	height: auto;
}
.gallery a:hover img{
	opacity: 1;
}
.gallery img{
}

/* 小タイトル */
.g_s_title{
	border: none;
	margin: 4em auto 1em auto;
	padding: auto;
	font-size: 128%; /* 約18px */
	font-weight: normal;
	text-align: center;
}

.caption{ margin: 2em auto 4em auto; max-width: 800px; } /* キャプション */
.caption2{ margin: 0 auto 4em auto; max-width: 400px; } /* ログのキャプション */
.caption3{ margin: 0 auto 4em auto; text-align: center; max-width: 680px; } /* ログのキャプション（中央寄せ） */


/* おまけ画像等のキャプションつきサムネイル用（Figure, Figcaption） */
.fig-thumb-box{
	/* flex */
	display: -webkit-box; /* Android 2~4*/
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* safari PC */
	display: flex;
	/* flex-wrap */
	-webkit-flex-wrap: wrap; /* Android 2~4 */
	-ms-flex-wrap: wrap; /* IE 10 */
	flex-wrap: wrap;
	/* align-items */
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}
.fig-thumb-box figure{
	flex-basis: 1;
	padding: 0;
	margin: 10px;
}
.fig-thumb-box figure img{
	max-width: 100%;
	width: 100%; /* Firefoxバグ対策 */
	height: auto;
}
/* フッター */
#analyzer{ max-width: 960px; margin: 0 auto; clear: both; }
.tdftad{ max-width: 960px; margin: 0; padding: 0; clear: both; text-align: center; background-color: #fff; position: relative; top:0; left: 0; z-index: 4; }
.tdftad ul li { margin: 0; padding: 0; display: inline; }