@charset "utf-8";




/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("inview.css");





html,body {
	margin: 0;padding: 0;
	height: 100%;
	font-size: 13px;
}

body {
	font-family: dnp-shuei-nmincho-std, '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: #fff;
	color: #000;	
	line-height: 1.85;	
	overflow-x: hidden;s
}

/*リセット*/
figure, .figure {margin: 0 0 10px 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;
	margin: 0 auto;
	}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*ul,olタグ*/
ul, ol {margin-bottom: 30px;padding-inline-start: 0px;
	margin-block-start: 0em;
	margin-block-end: 0em;
	}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	text-decoration:none;
	border-bottom: 1px solid #000;
	transition: all 1s ease-out;
}

a:hover {
	background-color: #d5c6df;
}

#home-names a:link, #home-names a:visited,footer a,footer a:visited{
	color: #fff;
	text-decoration:none;
	border: none;
	font-feature-settings: "palt";
	letter-spacing:0.02em;
	}
#home-names a:hover{
	color: #fff;
	background:#802a2e;
	}



/*containerブロック
---------------------------------------------------------------------------*/
#container {
	/*display: flex;
	flex-direction: column;	
	justify-content: space-between;	*/
}

body.n03 #container, body.n04 #container{
	background: url("/images/bg.jpg") no-repeat;
	background-size: cover;
}

body.home #container {
	background: url("/images/img_oniroku-top_sp.jpg") center -15px no-repeat;
	background-size: contain;
}

section {
	margin: 0;
/*	border: 1px dotted #ff00ff;*/
}





/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: relative;
	box-sizing: border-box;
}


/*トップページのロゴ画像*/
.home header #logo {
	position: absolute; z-index: 1;
	width: 75%;		/*ロゴの幅*/
	left: 15%;		/*headerに対して、左からの配置場所*/
	top: 0px;		/*headerに対して、上からの配置場所*/
}



#mainimg{
	width: 100%;
	height: 500px/*50vh*/;
	text-align: center;
}

@media screen and (max-width:800px) {
	#mainimg img{
		height: 500px;
		object-fit:contain;
		object-position: 50% 40%
	}
}

/*menubarブロック初期設定
---------------------------------------------------------------------------*/

#menubar {display: none;font-size: 1.3rem;}

#menubar.db {display: block;}
#menubar.dn {display: none;}

/*メニュー１個あたりの設定*/
#menubar nav ul a {
	display: block;text-decoration: none;
	text-align: center;	
	padding: 6px 12px 4px;
	font-feature-settings: "palt";
	color: #fff;
	text-decoration:none;
	border: none;
}

#menubar ul li a:hover {
	opacity: 1;
	background: #fff;
	color: #802a2e;
}

#menubar span.en{font-size: 14px;}

#menubar a:hover, #menubar li.now a,
body.home #menubar li.n01 a,
body.n02 #menubar li.n02 a,
body.n03 #menubar li.n03 a,
body.n04 #menubar li.n04 a,
body.n05 #menubar li.n05 a{
	background: #fff;
	color: #802a2e;
}
#menubar li.twitter a:hover{
	background: none;
	opacity: 0.6;
}

/*小さな端末用の設定（開閉ブロック）
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.db {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 70px 0;	
	background: rgba(0,0,0,0.9);		
	animation: animation1 0.2s both;	/*animation.cssの、animation1を実行する。*/
	text-align: center;
}

/*メニュー１個あたりの設定*/
.s #menubar.db a {
	display: block;text-decoration: none;
	text-align: center;		
	padding: 20px;
}



/*ハンバーガー
---------------------------------------------------------------------------*/
/*開閉用のスタイル*/
#menubar_hdr.db {
display: flex;
}
#menubar_hdr.dn {display: none;}

/*３本バーを囲むブロック*/
#menubar_hdr {
	position: absolute;
	z-index: 101;
	cursor: pointer;
	right: 0.5%;			/*左からの配置場所指定*/
	top: 0px;			/*上からの配置場所指定*/
	padding: 18px 14px;	/**/
	width: 52px;		/*幅（３本バーが出ている場合の幅になります）*/
	height: 52px;		/*高さ*/
	display: flex;
	flex-direction: column;			/*子要素（３本バー）を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	transform: scale(1.2);			/*元々準備していたサイズの1.2倍にしました。お好みでサイズ調整して下さい。*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	border-top: 2px solid #fff;
	box-shadow: 1px 1px 2px #000;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 26px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3px, 7px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3px, -7px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main, nav {	
	max-width: 940px;	/*●●*/
	margin: 0 auto;
	padding-top: 5px;
	padding-bottom: 5px;
}
.main {	
	margin-bottom: 80px;
	opacity: 0.80;
	padding-left: 14px;
	padding-right: 14px;
}
body.home .main {	
	background-color: #fff;
}

/*mainブロック内のh2タグ*/
main h2 {
	font-size: 2rem;
	line-height: 1.3em;
	text-align: center;
	margin: 1.8rem 0 1.8rem 0;
	letter-spacing: 0.1em;	
	-moz-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	-webkit-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	-ms-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
}

main h3 {
	font-size: 1.7rem;
	letter-spacing:0.05em;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
}

main h3.border {
	text-align: center;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	line-height: 1.5;
	padding: 10px 0 8px;
}
body.n05 main h3 {
	font-size: 1.6rem;
	margin-top: 0;
	line-height: 1.4;
	text-align: left;
	margin-bottom: 10px;
}

main p {
	margin: 0 20px 2em;	
}
main p + p {
	margin-top: -1em;
}


.c2 {
	display: flex;
	flex-direction: column;
}


section:nth-of-type(1) {
	margin-top:50px;
	margin-bottom:70px;
}
body.home section:nth-of-type(1) {
	margin-top:0px;
}
section:not(:nth-of-type(1)) {
	margin-top:40px;
	margin-bottom:40px;
}

.banner{
	width: 50%;
	margin: 0 auto;
}


.sub h3 {
	font-weight: normal;
	font-size: 1em;
	margin: 0;
	border: none;
	background: #555;	
	text-align: center;		/**/
}


ul.submenu {
	list-style: none;
	padding: 0;margin: 0;
	margin-bottom: 20px;		
	border-top: solid 1px #666;	
}

ul.submenu li {
	display: block;margin: 0;
	border-bottom: solid 1px #666;	/*下線の幅、線種、色*/
}
ul.submenu li a {
	text-decoration: none;display: block;
	padding: 5px 10px;	/*上下、左右へとる余白*/
}

/*マウスオンj時の背景色*/
ul.submenu li a:hover {
	opacity: 1;
	background: #000;
}


footer small {font-size: 100%;}

footer {
	font-size: 0.7rem;		/*文字サイズ*/
	text-align: center;		/*内容をセンタリング*/
	padding-bottom: 15px;
}



#footermenu {
	background-color: #802a2e;
	line-height: 1;
}
.footermenu-container{
	padding: 15px 20px;
}
#footermenu ul{
	padding: 5px 0 0 0;
}

#footermenu li {
	display: block;
	font-size: 1.2rem;	
	line-height: 1.5rem;
	padding: 10px 10px;
	text-align: left;
}

#footermenu li.x-logo {
	line-height: 1em;
	vertical-align: 3px;
}
footer .copy{
	font-size: 1.5em;	
	margin-top:15px;
	margin-bottom: 15px;
	}

/*お知らせブロック*/
.section-topics{
	margin: 20px 0 0 0;
	color: #000;
	padding-top: 10px;
}
#news {
	width: 70%;
	margin: 0 auto 20px auto;
	background: #ededed;
	opacity: 0.80;
	margin: 0;
	padding: 5px 25px 10px;	
	color: #000;
}
.section-topics dl {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #000;
}
.section-topics dl:first-child {
	border-top: 1px solid #000;
}
.section-topics dt {
	font-size: 1.25rem;
	width: 130px;
}
.section-topics dd {
	font-size: 1.15rem;
	line-height: 1.5;
	width: calc(100% - 130px);
}
.section-topics span a, span.link a {
	display: inline-block;
	background:#ffff00;
	border-radius:6px;
	color: #000;
	line-height: 1em;
	padding: 6px 8px 1px;
	text-decoration:none;
	border-bottom: 0px;
}
a.ul {
	display: inline-block;
	border-bottom: 1px solid #000;
}
.text p > a.ul {
	display: inline-block;
	line-height: 25px;
}

.section-topics span a:hover, span.link a:hover{
	background:#d5c6df;
}
.section-topics :nth-child(n + 5) {
/*	display: none;*/
}


/*作家紹介と著書一覧*/
.age, .era {
	display: inline-block;
	width: auto;
	margin: 0 auto;
	border-top: 3px solid #222;
	border-bottom: 3px solid #222;
	width: 100%;
	margin-bottom: 40px;
}
.age ul, .era ul{
	display: flex;
	justify-content:space-between;
	align-items: center;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px 0 10px 0;
	width: 100%;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.age li, .era li {
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

.age li {
	width: 22%;
}
.era li {
	width: 19.5%;
}

.more_read45,
.more_read65,
.more_read80,
.more_read1990,
.more_read2000,
.more_read2010,
.more_read2020 {
	font-size: 1.6em;
	margin-top: 20px;
	margin-bottom: 20px;
}

.history h3{font-size: 20px;text-align: center;line-height: 20px ;margin: 30px 0;}
#to1980 h3{margin-top: 0px;}
/*ニュース*/0





/*listブロック
---------------------------------------------------------------------------*/
.list {
	margin-bottom: 40px;
	position: relative;
}

/*ボックス内のh4タグ*/
.list h4 {
	font-size: 1.2em;
}
.list h4 a {
	color: #666;	/*リンクテキストの文字色*/
}

/*ボックス内のpタグ*/
.list p {
	margin: 0;
}

/*list内のNEWマーク*/
.list .new {
	font-size: 0.6em;		/*文字サイズ*/
	background: #ff0000;	
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/**/
	position: absolute;
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	transform: rotate(-30deg);	/*回転。まっすぐ表示させたいならこの１行を削除。*/
}

/*list内でのbtn*/
.list .btn {
	margin-top: 1em;	/*ボタンの上に１文字分のスペースを空ける*/
}
.list .btn a {
	display: block;
}


/*FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#222, #000);	/*背景グラデーション*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
	border: 1px solid #555;		/*枠線の幅、線種、色*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f059";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #00b1d4;			/*アイコンの色*/
	padding-right: 1em;		/*アイコンとテキストの間の余白*/
}

/*回答*/
.faq dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq dt span {text-indent: 0;}


/*btnの設定
---------------------------------------------------------------------------*/
p.btn {margin: 0;}

/*ボタンを囲むブロック*/
.btn {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn a,
.btn input {
	display: inline-block;text-decoration: none;border: none;
	font-size: 1.5em;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: #bb0000;	
	color: #eee;			/*文字色*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くする指定*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 5px 2em;		/*余白*/
	border-radius:6px;
	margin: 0 auto 30px;	/*ボタンの外側に空けるスペース。上、左右、下への順番。*/
}

.btn a:hover,
.btn input:hover {
	cursor: pointer;
	opacity: 1;
	filter: brightness(1.2);
	transform: scale(1.02);	/*実寸の102%に拡大*/
}

/*listブロック内のボタン*/
.list .btn a {
	margin: 0;
}


/*テーブル
---------------------------------------------------------------------------*/
.ta1 caption {
	font-weight: bold;
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #555;		
	margin-bottom: 15px;
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #666;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #666;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}
.caption{
	line-height: 1.6;
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	color: #802a2e;
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	font-size: 1.5em;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}
color: #802a2e;


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #00b1d4 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb50 {margin-bottom: 50px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #666; color: #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: #ffcc00 !important;}
.small {font-size: 0.6em;}
.pc {display: none;}
.md {display: none;}





/*---------------------------------------------------------------------------
ここから下は画面幅400px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:400px) {

	#home-names{
		font-size: 24px;
		}

	.home header #logo {
		padding-top: 5%;	
	}
}

/*作家人生*/
.history dl{
	margin-bottom: 40px;
	display: block;
}
.history dt{
	padding-top: 9px;
	letter-spacing: -0.1px !important;
	font-size: 30px;
	line-height: 32px;
	width: 100%;
	letter-spacing:0.1em;
	margin-bottom: 10px;
	align-items: center;
}
.history dt small{
	letter-spacing: 0px !important;
	vertical-align: 4px;
	font-weight: bold;
}

.history dt small{
	font-size: 18px;
}
.history dd{
	width: calc(100%);
	font-size: 1.3rem;
}

/*アマゾン広告*/
.amazon{
	display: flex;
	justify-content: center;
}
.amazon.pc{
	display: none;
}
.amazon img.border{
	border: 1px solid #000;
}
.amazon .list{padding: 10px 10px;}
.amazon img{height: 220px;}

@media screen and (max-width:1119px) {
	#home-names-sp {
		position: relative
		left:0;
		width: 100%;
		background-color: #802a2e;
		padding: 5px 30px;
		font-size: 22px;
		}
	#home-names-sp a {
		color: #fff;
		text-decoration:none;
		border-bottom: none;
		}
}
@media screen and (max-width:700px) {
	#home-names-sp {
		font-size: 20px;
		}
}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}