@charset "utf-8";

/* ============================================================================
 * ブログ用統合 CSS (reset + WP 移植 base + 新ブログレイアウト)
 *
 * 構成:
 *   1. RESET    - ブラウザデフォルトスタイルのリセット (旧 reset.css 由来)
 *   2. LEGACY   - WP 時代のヘッダー/フッター/タイポグラフィ (旧 assets/css/blog.css 由来、
 *                 partials の <header class="cf"> / <footer> 等で使用)
 *   3. ARTICLE  - 新ブログ記事一覧/詳細レイアウト (旧 keis-blog/blog.css 由来、
 *                 list.html / detail.html 等の .blog-main / .blog-list で使用)
 *
 * 編集時の方針:
 *   - 新規スタイルは ARTICLE 区画に追加する
 *   - LEGACY 区画は WP 移植時の互換維持なので原則触らない
 *   - 不要になった LEGACY セレクタは partials/HTML で使われていないことを確認してから削除
 *
 * 旧分離の経緯と廃止: docs/reviews/2026-04-26/blog-css-consolidation.md (本セッションで作成予定)
 * ============================================================================ */

/* ─── 1. RESET (旧 reset.css) ──────────────────────────────────────────── */


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
abbr,acronym{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
a{text-decoration:none;}
li{list-style:none;}

html{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:13px;
	line-height:26px;
	color:#595757;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
html,body{
	height:100%;
}
#wrapper{ position:relative; min-height:100%; }
#top{ padding-bottom:0; }
#page{ padding-bottom:392px; }

a{ color:#595757; }
a:hover{ opacity:0.7; }
a:hover img{ opacity:0.9; }

.none{ display:none; }

.cover{
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover; }

/* X.Clearfix
----------------------------------------*/

.cf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.cf {
  min-height: 1px;
}

* html .cf {
  height: 1px;
  /*ﾂ･*//*/
  height: auto;
  overflow: hidden;
  /**/
}


/* ─── 2. LEGACY: WP 移植 (旧 assets/css/blog.css) ──────────────────────── */


/*
General
----------------------------------------*/

@font-face {
  font-family: 'KEIS_icon';
  src: url('../icon_font/keis_icon.eot');
  src: url('../icon_font/keis_icon.eot') format('embedded-opentype'), url('../icon_font/keis_icon.woff') format('woff'), url('../icon_font/keis_icon.ttf') format('truetype'), url('../icon_font/keis_icon.svg?') format('svg');
  font-weight: normal;
  font-style: normal;
}

i.icon{ font-family:KEIS_icon; font-style:normal; font-weight:normal; vertical-align:middle; }
  
.i_keis:before{ content:"\e600"; }
.i_fb:before{ content:"\e601"; }
.i_tw:before{ content:"\e602"; }
.i_rss:before{ content:"\e603"; }
.i_search:before{ content:"\e604"; }
.i_cat:before{ content:"\e605"; }
.i_entry:before{ content:"\e606"; }
.i_author:before{ content:"\e607"; }
.i_tag:before{ content:"\e608"; }
.i_want:before{ content:"\e609"; }
.i_gplus:before{ content:"\e60a"; }

#wrapper{ background-color:#EDEEF1; overflow:hidden; }
#blog_wrapper{ height:100%; width:980px; margin:25px auto 0; padding-bottom:392px; }

article strong{ font-weight:bold; }
article a{ text-decoration:underline; }
article a:hover{ text-decoration:none; }

pre {
background: #f4f4f4;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 1.625em;
overflow: auto;
padding: 0.75em 1.625em;
}

/*
HEADER
----------------------------------------*/

header{ position:relative; width:100%; height:90px; background-color:#fff; z-index:100; }

header .header_top{ position:fixed; top:0; left:0; width:100%; height:40px; background-color:#8EC21F; }
header .header_top .top_wrapper{ width:980px; margin:0 auto; font-size:11px; line-height:40px; }
header .header_top .top_p{ float:left; width:500px; height:40px; overflow:hidden;
-webkit-transition:0.7s ease;
-moz-transition:0.7s ease;
-o-transition:0.7s ease;
-ms-transition:0.7s ease;
transition:0.7s ease;}
header .header_top .top_p p{ float:left; color:#fff;
-webkit-transition:0.7s ease;
-moz-transition:0.7s ease;
-o-transition:0.7s ease;
-ms-transition:0.7s ease;
transition:0.7s ease;}
header .header_top .top_p a{ display:none; float:left; width:86px; height:20px; margin:7px 0 0 0; }
header  .header_top .top_p a img{ width:100%; height:100%; }
header .header_top ul{ float:right; height:40px; }
header .header_top ul li{ float:left; margin-left:10px; font-size:19px; }
header .header_top ul li a{ color:#fff; }

header .headline{ width:980px; height:50px; margin:40px auto 0; }
header .headline h1{ float:left; margin-top:20px; }
header .headline h1 img{ width:218px; height:50px; }
header .headline .nav{ float:right; }

header .headline .nav a{ display:none; float:left; width:51px; height:16px; margin-top:37px; background:url(../img/blog_about.png) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
header .headline .nav form{ float:right; margin:32px 0 0 25px; }
header .headline #s{ width:159px; height:25px; padding-left:10px; background-color:#EFEFEF; border:none; color:#595757; font-size:13px; line-height:13px; }
header .headline #searchsubmit{ margin-left:-5px; font-family:KEIS_icon; font-style:normal; font-weight:normal; font-size:18px; color:#595757; border:none; background-color:transparent; cursor:pointer; vertical-align:sub; }
header .headline #searchsubmit:hover{ color:#898989; }

@media screen and (max-width: 957px) {
    header{ width:957px; }
}

/*
MAIN
----------------------------------------*/

#page{ float:left; width:592px; padding-bottom:0; }

#page article{ width:100%; padding:40px; background-color:#fff; color:#040000; border-bottom:20px solid #F7F8F8; }
#page article:last-of-type{ border:none; }
#page article h2 a{ color:#040000; text-decoration:none; }
#page article h2{ font-size:25px; line-height:36px; }
#page article ul li{ float:left; margin:10px 20px 5px 0; }
#page article .category span{ font-family:"Gill Sans", sans-serif; }
#page article .category a{ text-decoration:none; }
#page article .content{  font-size:14px; line-height:26px; clear:both; }
#page article .content p{ margin:20px 0; }
#page article .content li{ float:none; list-style-type:disc; margin-left:1.5em; }
#page article .content img{ max-width:592px; height:auto; margin:20px 0; }

#page i{ color:#666; font-size:18px; margin-right:3px; }

#page > p{ margin-bottom:10px; }

#page .blog_nav{ width:672px; margin:20px 0 0; background-color:#F7F8F8; }

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:12px;
line-height:16px;
text-align:center;
}
 
.pagination span, .pagination a {
display:inline-block;
margin: 2px 2px 2px 0;
padding:5px 10px 4px 10px;
text-decoration:none;
border:1px solid #666;
width:auto;
color:#666;
}
 
.pagination span,.pagination a:hover{
background-color:#666;
color:#fff;
}
 
.pagination .current{
background-color:#666;
color:#fff;
}

/*
SOCIAL BOOKMARK
----------------------------------------*/

.wp_social_bookmarking_light{
    border: 0 !important;
    padding: 10px 0 20px 0 !important;
    margin: 0 !important;
}
.wp_social_bookmarking_light div{
    float: left !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 5px 0px 0 !important;
    min-height: 30px !important;
    line-height: 18px !important;
    text-indent: 0 !important;
}
.wp_social_bookmarking_light img{
    border: 0 !important;
    padding: 0;
    margin: 0 !important;
    vertical-align: top !important;
}
.wp_social_bookmarking_light_clear{
    clear: both !important;
}
#fb-root{
    display: none;
}
.wsbl_twitter{
    width: 100px;
}
.wsbl_facebook_like iframe{
    max-width: none !important;
}

/*
SIDE BAR
----------------------------------------*/
@media only screen and (max-width: 768px) {
    //#side{ display: none; }
	#page{ width: auto;}
	header .header_top .top_wrapper {width: auto; margin: 0 20px;}
}

#side{ float:right; width:283px; }

#side .wanted img{ display:block; width:284px; height:277px; }

#side h3{ position:relative; display:block; width:283px; height:15px; margin:20px 0 20px; }
#side h3 i{ font-size:18px; }
#side h3 span{ display:inline-block; position:absolute; top:5px; left:24px; width:283px; height:15px; text-indent:-9999px; overflow:hidden; }
#side h3.cat span{ background:url(../img/blog_cat.png) 0 0 no-repeat; }
#side h3.entry span{ background:url(../img/blog_entry.png) 0 0 no-repeat; }
#side h3.tag span{ background:url(../img/blog_tag.png) 0 0 no-repeat; }

#side p a{ display:block; background-color:#fff; color:#040000; }
#side p.cat a{ width:259px; height:44px; margin:6px 0; padding-left:24px; font-size:14px; line-height:44px;
box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 1px 1px;
-webkit-box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 1px 1px;
-moz-box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 1px 1px; }
#side p.cat:nth-of-type(6){ display:none; }

#side div.entry{ width:290px; height:141px; margin:12px 0; background:url(../img/blog_entry_bg.png) 0 0 no-repeat; background-size: cover;}
#side div.entry a{ display:block; width:250px; height:120px; padding:13px 20px 8px 20px; color:#040000; }
#side div.entry p.date{ height:29px; font-family:"Univers LT Std", sans-serif; font-size:18px; color:#595757; border-bottom:1px solid #EFEFEF; }
#side div.entry h4{ height:45px; margin-top:7px; font-size:13px; line-height:18px; border-bottom:1px solid #EFEFEF; }
#side div.entry p.category{ height:34px; margin-top:9px; font-size:13px; line-height:18px; }
#side div.entry p.category i{ color:#666; font-size:14px; margin-right:3px; }

#side div.tag{ width:283px; }
#side div.tag a{ float:left; display:block; margin:3px; padding:7px 10px; line-height:13px; background-color:#fff; color:#040000;
box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 1px 1px;
-webkit-box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 1px 1px;
-moz-box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 1px 1px; }

/*
FOOTER
----------------------------------------*/

footer{ position:absolute; bottom:0; width:100%; height:272px; background-color:#284000;}
footer a{ color:#fff; }
footer .footer_wrapper{ width:980px; margin:0 auto; }

footer .left{ float:left; padding:35px; }
footer .left ul li{ position:relative; margin:0 25px 6px 7px; }
footer .left ul li a:before{ content:""; position:absolute; top:9px; left:-7px; width:0; height:0; border:transparent solid 3px; border-left-color:#fff; }
//footer .left ul li small{ display:block; width:135px; height:9px; margin:-3px 0 0 -7px; background:url(../img/copyright_w.png) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
footer .left p{ font-size:14px; color: #ffffff }
footer .left p span{ font-size:12px; }

footer .right{ float:right; padding:35px; }
footer .right a{ display:block; width:177px; height:28px; background:url(../img/blog_keis.png) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
footer .right a:hover{ opacity:0.8; }

@media screen and (max-width: 957px) {
    footer{ width:957px; }
}

/** 引用*/
blockquote{
position: relative;
padding: 1em;
border: 1px solid #E6E6E6;
background-color: #E6E6E6;
z-index: 1;
}
blockquote p{
position: relative;
z-index: 1;
}
blockquote:before{
content: "“";
font-size: 500%;
line-height: 1em;
color: #BDBDBD;
position: absolute;
left: 0;
top: 0;
}
blockquote:after{
content: "”";
font-size: 500%;
line-height: 0em;
color: #BDBDBD;
position: absolute;
right: 0;
bottom: 0;
}

/** 2019/06/17 h3~h6タグとolタグが正常に動かなかったので追加 **/
h1 { font-size: 2em; margin: .67em 0; font-weight: bolder; }
h2 { font-size: 1.5em; margin: .75em 0; font-weight: bolder; }
h3 { font-size: 1.17em; margin: .83em 0; font-weight: bolder; }
h4 { margin: 1.12em 0; font-weight: bolder; }
h5 { font-size: .83em; margin: 1.5em 0; font-weight: bolder; }
h6 { font-size: .75em; margin: 1.67em 0; font-weight: bolder; }

small {
	 color: #ffffff;
}
#wpstats {
	display: none;
}
.wanted{
	width: 283px;
	height: 283px;
	margin: 0 auto;
	max-width: 100%;
	background: url('../images/pho_recruit.jpg')  no-repeat;
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: end;
	font-weight: bold;
	background-size: auto 100%;
	background-position: 66%;
}
.wanted-txt01{
	background-color: #FFFFFF;
	font-size: 13px;
	box-sizing: border-box;
	padding: 4px 10px;
	position: relative;
	line-height: 1;
}
.wanted-txt01:before{
	position: absolute;
	width: 0;
	height: 0;
	content: "";
	top: 0;
	left: -10px;
	border-style: solid;
	border-color: transparent transparent #FFFFFF transparent;
	border-width: 0px 0px 21px 10px;
}
.wanted-txt02{
	background-color: #FFFFFF;
	font-size: 25px;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	position: relative;
}
.wanted-txt02-inner{
	display: block;
	width: fit-content;
	margin: auto;
	background: linear-gradient(to right, #21ff00 0%, #ffff00 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 25%;
}
@media screen and (max-width: 768px){
#blog_wrapper {
	width: 100%;
	padding-bottom: 70vw;
}
#page {
	width: 100%;
}
#page article{
	width: auto;
}
#page .blog_nav {
	width: 100%;
	margin: 5vw 0 15vw;
}
header .headline h1 {
	margin: 5vw;
}
#page article h2 {
	font-size: 4vw; 
}
html{
	font-size: 3vw;
}
#side {
	float: none;
	width: auto;
	padding: 0 3vw;
}
#side .wanted img {
width: 70%;
height: auto;
margin: 0 auto 15vw;
}
#side p.cat a{
	width: auto;
}
#side div.entry a{
	width: auto;
}
#side h3 {
	margin: 9vw 0 3vw 2vw;
}
#side div.entry {
	width: 100%;
}
footer {
	height: auto;
}
}

/* ─── 3. ARTICLE: 新ブログレイアウト (旧 keis-blog/blog.css) ──────────── */

/* ブログ共通スタイル */

.blog-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 16px 60px;
}

.blog-inner {
  max-width: 800px;
  margin: 0 auto;
}

.blog-page-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 2px solid #333;
}

/* 一覧 */

.blog-result-count {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
}

.blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-item {
  border-bottom: 1px solid #eee;
}

.blog-item a {
  display: block;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.blog-item a:hover {
  background-color: #f9f9f9;
}

.blog-item time {
  display: block;
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}

.blog-item-title {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.blog-item a:hover .blog-item-title {
  color: #0066cc;
}

.blog-empty {
  padding: 60px 0;
  text-align: center;
  color: #999;
}

/* ページネーション */

.blog-pagination {
  margin-top: 40px;
  text-align: center;
}

.blog-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 4px;
}

.blog-pagination li {
  display: inline-block;
}

.blog-pagination li a,
.blog-pagination li span {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0 8px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.blog-pagination li a:hover {
  background-color: #f5f5f5;
}

.blog-pagination li.active span {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

.blog-pagination li.prev a,
.blog-pagination li.next a {
  font-weight: 500;
}

/* パンくずリスト */

.blog-breadcrumb {
  padding: 12px 16px;
  font-size: 13px;
  color: #666;
  max-width: 800px;
  margin: 0 auto;
}

.blog-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.blog-breadcrumb li::before {
  content: ">";
  margin-right: 4px;
}

.blog-breadcrumb li:first-child::before {
  content: "";
  margin-right: 0;
}

.blog-breadcrumb a {
  color: #0066cc;
  text-decoration: none;
}

.blog-breadcrumb a:hover {
  text-decoration: underline;
}

/* 記事詳細 */

.blog-detail-header {
  margin-bottom: 32px;
}

.blog-detail-header time {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.blog-detail-title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  margin: 0;
}

.blog-detail-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.blog-detail-body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}

.blog-detail-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 32px 0 12px;
}

.blog-detail-body p {
  margin: 0 0 16px;
}

.blog-detail-body img {
  max-width: 100%;
  height: auto;
}

.blog-detail-body a {
  color: #0066cc;
}

.blog-detail-body a:hover {
  text-decoration: underline;
}

.blog-detail-body ul,
.blog-detail-body ol {
  padding-left: 24px;
  margin: 0 0 16px;
}

.blog-detail-body li {
  margin-bottom: 4px;
}

.blog-detail-body blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #ddd;
  color: #666;
  background: #f9f9f9;
}

.blog-detail-body pre {
  margin: 16px 0;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
}

.blog-detail-body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 2px 4px;
  background: #f0f0f0;
  border-radius: 3px;
}

.blog-detail-body pre code {
  padding: 0;
  background: none;
}

/* 一覧に戻るリンク */

.blog-back-link {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

.blog-back-link a {
  color: #0066cc;
  text-decoration: none;
  font-size: 14px;
}

.blog-back-link a:hover {
  text-decoration: underline;
}

/* タグ戻りリンク */

.blog-tag-back {
  margin-bottom: 24px;
  font-size: 14px;
}

.blog-tag-back a {
  color: #0066cc;
  text-decoration: none;
}

.blog-tag-back a:hover {
  text-decoration: underline;
}

/* タグクラウド */

.blog-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.blog-tag-item {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.blog-tag-item:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
}

.blog-tag-count {
  font-size: 0.85em;
  color: #888;
}

.blog-tag-size-1 {
  font-size: 13px;
}
.blog-tag-size-2 {
  font-size: 15px;
}
.blog-tag-size-3 {
  font-size: 17px;
}
.blog-tag-size-4 {
  font-size: 20px;
}
.blog-tag-size-5 {
  font-size: 24px;
}

/* カテゴリ一覧 */

.blog-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-category-item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.blog-category-item a:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
}

.blog-category-name {
  font-size: 16px;
  font-weight: 500;
}

.blog-category-count {
  font-size: 0.85em;
  color: #888;
}