@charset "utf-8";

/*********************************************************************
( ´w｀)σ ユーザー設定用CSS
----------------------------------------------------------------------
※「templates/header.html」23行目付近のコメントアウトを外すと有効になります。
----------------------------------------------------------------------
 1.0 背景・フォント
 2.0 横幅
*********************************************************************/

/*********************************************************************
	1.0 背景・フォント
*********************************************************************/

/********* 1.1 全体 *********/

body {
	background-color: #FFFFFF;
	line-height: 1.68;
	color: #473F3F;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 15px;
}

/********* 1.2 サイト名 *********/

.site-logo {
	margin: 0;
	padding: 0;
	font-family: "Vegur-Light", Klee, "Open Sans", "PingFangSC-Thin", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 44px;
	font-weight: 400;
	text-align: center;
}
 
.site-logo a {
	color: #473F3F;
}
.site-logo a:hover,
.site-logo a:active {
	color: #c9a691;
}

/********* 1.2 サイト説明 *********/

#header p {
	color: #7C7171;
	text-align: center;
}

/********* 1.3 記事タイトル *********/

.entry-title {
	font-size: 150%;
}

.entry-title a {
	color: #473F3F;
}
.entry-title a:hover,
.entry-title a:active {
	color: #606060;
}

/********* 1.4 主にスマホ用の文字サイズ *********/

@media only screen and (max-width: 580px) {
	body {
		font-size: 15px; /* 基本の文字サイズ */
	}
	.site-logo {
		font-size: 45px; /* サイト名の文字サイズ */
	}
	.entry-title {
		font-size: 140%; /* エントリー・ページの文字サイズ */
	}
}

/*********************************************************************
	2.0 横幅
*********************************************************************/

/********* 2.1 エントリーなど主要部分の横幅最大値 *********/

#main,
#header,
#footer,
.result,
.meta ul,
#comment,
#nav-page,
#trackback,
.post-list,
.page-file,
.page-edit,
.entry-file,
#entry_link,
#information,
#content-dark,
#comment_form,
#trackback_url,
.entry .content,
#search-content {
	max-width: 800px;
}

/********* 2.2 ギャラリーなどの横幅最大値 *********/

.container-large {
	max-width: 1200px;
}

/********* 2.3 添付ファイルの横幅を拡大 *********/

/* */
.page-file,
.entry-file {
	width: 100%;
	max-width: 1200px;
}
/* */

/********* 2.4 画像の加工 *********/

img {
	border: solid 1px #ccc;
	background-color: #fff;
	padding: 4px;
}

img.navi-icon {
	border: none;
	margin: -3px 0px 0px 0px;
	padding: 0px;
	border-radius: 5px;
}

p.icon img {
	border: solid 1px #ccc;
	padding: 0px;
	border-radius: 5px;
}

p.favicon img {
	border:solid 1px #F4F1EF;
	background-color:#F4F1EF;
	padding:4px;
	border-radius: 5px;
}

.my-page {
	color: #F4F1EF
}

/********* 2.5 見出し h3のみ *********/

.site h3{
	font-size: 100%;
}
.site main h3{
	margin: 5px auto;
	display: inline-block;
	background: rgba(80,80,80,0.1);
	position: relative;
	padding: 3px 18px 3px 5px;
	line-height: 1.3;
	z-index:-1;
}
.site main h3::before {
	position: absolute;
	content: '';
	right: -2px;
	top: -2px;
	border: none;
	border-right: solid 30px #fff;
	border-top: solid 40px transparent;
	z-index:-2
}

/********* 2.6 リンクカード-Ⅱ *********/

/* ここから */
.link-card-2 {
	width: 600px;
	max-width: 100%; /* リンクカード表示幅 */
	 margin: 0 auto;
	padding: 1.5em 1.5em 1.5em 2em; /* リンクカード中央寄せ */
	border: 1px solid rgb(129,247,243); /* リンクカード内周りの余白調整 */
	box-shadow: 0px 10px 20px rgba(0,0,0,.4);
	transition: .3s;
}
.link-card-2 a:hover {
	text-decoration: none;
}
.link-card-2:hover {
	box-shadow: 3px 3px 5px 2px rgb(0,0,0,.3);
	transform: translateY(-0.1875em);
}
.link-card-2 a {
	color: black;
}
/* アイキャッチ画像右寄せ表示 */
.link-card-2-image {
	display: inline-block;
	float: right;
	width: 160px;
	height: 90px;
	margin: 4px 5px 10px 10px;
}
.link-card-2-image img {
	width: 160px;
	height: 90px;
	object-fit: cover;
	object-position: center center;
	filter: drop-shadow(5px 5px 2px rgba(0,0,0,.3));
}
/* 記事タイトル表示 */
.link-card-2-title {
	margin: 0 !important;
	font-weight: bold;
	font-size: 15px;
	line-height: 1.4;
}
/* 記事要約文表示 */
.link-card-2-description {
	margin: 1em 0 !important;
	font-size: 13px;
	line-height: 1.5 !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.link-card-2-text {
	color: rgb(240,240,240) !important;
}
/* フッタードメイン表示 */
.link-card-2-footer {
	font-size: 12px;
}
/* 引用符マークや背景色やbox-shadow等デザインの非表示化 */
.link-card-2 blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none;
	color: rgb(240,240,240) !important;
}
.link-card-2 blockquote::before,
.link-card-2 blockquote::after {
	content: none;
}
/* アイキャッチ画像スマートフォン表示変態 */
@media ( max-width : 480px ) {
	.link-card-2-image {
	display: block;
	float: none;
	margin: 0.6em auto;
}
.link-card-2-title {
	text-align: center;
    }
}
/* リンクカードより上下の余白 必要な場合にクラス名 yohaku を手動追記して利用する */
.yohaku {
	margin-top: 50px;
	margin-bottom: 50px;
}
/* OSダークモード対応（任意）する場合にはここより下記も含める */
@media (prefers-color-scheme: dark) {
    .link-card-2 {
        box-shadow: 0px 10px 20px rgba(0,0,0,.4);
        border-color: rgb(129,247,243);
        background: hsl(196,21%,30%);
    }
    .link-card-2 > a,
    .link-card-2:hover > a {
        color: rgb(240,240,240) !important;
    }
    .link-card-2-description {
        color: rgb(240,240,240);
    }
}
@media (prefers-color-scheme: light) {
    .link-card-2 {
        border-color: rgba(0,0,0,.3);
    }
    .link-card-2 > a,
    .link-card-2:hover > a {
        box-shadow: 3px 3px 5px rgb(0,0,0,.3);
    }
}
/* リンクカード-Ⅱ ここまで */