@charset "utf-8";

/*
	Theme Name: 常夜の観景のテンプレート2021
	Description: <a href="http://tokoyonomikage.com/">常夜の観景</a>個人用です。
	Theme URI: http://tokoyonomikage.com/
	Author: 花岡 みかげ
	Author URI: http://tokoyonomikage.com/
	Version: 4回目ぐらい？
	License: All Rights Reserved(PHP,一部のCSSを除く)
	License URI: http://tokoyonomikage.com/
	Tags:
*/

/*●●●●●共通classの設定●●●●●*/
.fontBold {
	font-weight: bold;
	}
.alignleft {
	float: left;
	}
.alignright {
	float: right;
	}

/*●●●●●基礎の設定●●●●●*/
* {
	margin: 0px;
	padding: 0px;
	}
html {
	overflow-y:scroll;
	}
html,body {
	width:100%;
	height: 100%;
	font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	}
/*p {
	color: #250d00;
	text-align: justify;
	word-break: break-word;
	hyphens: auto;
	}*/
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	color: #000000;
	}

/*●●●●●リンクの設定●●●●●*/
a {
	text-decoration: none;
	}
a:link,a:visited {
	color: #000000;/*未クリック・クリック済*/
	}
a:hover {
	color: #e2041b;/*カーソル触*/
	}
a:active {
	color: #4d5aaf;/*クリック中*/
	}

/*●●●●●リストの設定●●●●●*/
ul {
	list-style-type: none;
	}

/*●●●●●枠の設定●●●●●*/
#wrap {
	display: flex;
	flex-direction: column;
	min-width: 1200px;
	max-width: 1366px;
	min-height: 100%;
	margin: 0 auto;
	}

/*●●●●●headerの設定●●●●●*/
#header {
	background-color: #FFFFFF;
	position: sticky;
	top: 0px;
	z-index: 1;
	width: 100%;
	height: 55px;
	padding-top: 10px;
	line-height: 1;
	border-bottom: #e2041b solid thin;
	}
#header a,#header img {
	display: block;
	}
#headerLeft {
	margin-left:10px;
	}
#headerLeft,#headerLeft img,#headerTitle {
	float: left;
	margin-top: 2px;
	}
#headerLeft p {
	margin-top: 5px;
	font-size: 10px;
	}
#headerLeft h1 {
	font-family: "Sawarabi Mincho";
	margin-top: 5px;
	font-size: 25px;
	}
#headerRight {
	float: right;
	margin: 35px 10px 0px 0px;
	}
#headerRight li{
	display: inline-block;
	margin: 0px 5px;
	font-size:14px;
	}

/*●●●●●containerの設定●●●●●*/
#container {
	width: 100%;
	margin-top: 100px;
	}

/*●●●●●pageTitleの設定●●●●●*/
#pageTitle {
	text-align: center;
	float: left;
	position: -webkit-sticky;
	position: sticky;
	top: 150px;/*固定 */
	width: 21%;/*可変でcontainerの100%に対して*/
	height: 80vh;/*背景画像をウィンドウ可変下部固定*/
	}
#pageTitle h2 {
	font-family: "Kokoro";/*わさらびだと縦書きで崩れる、あとpagetitleはひらがな*/
	color: #ffffff;
	font-size: 25px;
	text-shadow: 2px 2px 5px #e2041b,-2px 2px 5px #e2041b,
				2px -2px 5px #e2041b,-2px -2px 5px #e2041b;
	display: inline;/*縦文字は中央寄せできないのでインラインにしておく*/
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;/*縦書きIE*/
	}

/*●●●●●mainの設定●●●●●*/
#main {
	float: left;
	width: 52%;
	min-height: 500px;/*日記の進む戻るボタンを下に固定する際の最低の高さ。可変はする*/
	position: relative;/*日記の進む戻るボタンのabsoluteに対して*/
	}
#main h3 {/*サルワカ様デザイン*/
	margin: 10px 0px;
	font-size: 20px;
	position: relative;
	}
#main h3:after {/*サルワカ様デザイン・h2要素の直後に以下の疑似要素を追加する。*/
	content: "";
	display: block;
	height: 3px;
	background: -moz-linear-gradient(to right, #250d00, transparent);
	background: -webkit-linear-gradient(to right, #250d00, transparent);
	background: linear-gradient(to right, #250d00, transparent);
	}
#main p{
	line-height: 1.3;
	font-size:14px;
	}
/*●●●●●sidebarの設定●●●●●*/
#sidebar {
	text-align: center;
	float: right;
	width: 27%;
	}
#sidebar h3 {
	margin: 10px 0px;
	font-size: 14px;
	font-weight: bold;
	}

/*●●●●●widgetの設定●●●●●*/
.widget {
	width: 200px;/*li分の位置調整*/
	margin: 0 auto;
	}
.widget h2 {
	font-size: 14px;
	font-weight: bolder;
	border-bottom: solid thin #e2041b;
	margin: 20px auto 5px;
	}
.widget a {
	font-size: 14px;
	text-decoration: underline;
	}
.widget ul {
	text-align: left;
	}

/*●●●●●footerの設定●●●●●*/
#footer {
	clear: both;
	margin-top: auto;
	border-top: #e2041b solid thin;
	height: 30px;
	text-align: center;
	font-size: 14px;
	}
#footer p {
	margin-top: 6px;
	text-shadow: 1px 1px 3px #c8c2be;
	}