@charset "utf-8";
/* ================================================================
 つなぎ手
 admin  : Masako Yoshimoto
 Author: Graphics Drive Inc.
 Author URI: https://www.graphics-drive.com/
 update : 2026/10/23
 
 新着情報　php工房　css
================================================================  */

/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { display:inline-block; }

/* for macIE \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }

/* ------------------------------------------------------------
	ニュース詳細ページ　news-detail.php
	
	詳細ページの文字サイズは入力で設定
	font size="3"くらい
------------------------------------------------------------ */

.detailText{ width: 100%; max-width: 1024px; margin: 0 auto 0; }
.detailText p{ margin-bottom: 1rem;color: #000; }
.detailText span.comment{width:90%; margin: 10px auto; color: #F000; }/* 詳細ページの文字の幅 */
.t12g{ font-size: 12px; color: #CCC; }

/* 詳細ページ　タイトル  */
.detailTitle{
	width: 100%;
	margin-bottom: 1rem;
	margin-left: 15px;
	display: block;
	box-sizing: border-box;
	padding-top: 10px;
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: 500;
	text-align: left;
}

/* 詳細ページ　カテゴリー・日付　.news-meta */
.tag{
	position: relative;
	width: 100%;
	display: flex;
	border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding: 10px 0;
    align-items: flex-start;
}

.tag .newMark{}

/* 詳細ページの日付  */
.tag #up_ymd{
  display: inline-block;
  font-size: 14px!important;
  min-width: 80px; /* 日付の幅 */
  margin: 17px 15px 10px 0;
}

/* カテゴリー　*/
#cat{ 
	display: inline-block;
	width: 120px;
	height: 20px;
	color:#FFF;
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: 0.1rem;
	padding:0  0.3rem 0.7rem 0.3rem;
	margin: 1rem 1rem 1rem 0;
	border-radius: 25px; 
}
/* カテゴリ別色分けマーク　お知らせ　イベント　セミナー　 */
.tag .cat-0 {background: #CEC1B7; }
.tag .cat-1 {background: #EA6101; }
.tag .cat-2 {background: #ED8017; }


/* 詳細ページ・記事  */
#detail { 
	width: 100%;
	display: block;
}

/* 詳細ページ・画像  */
.detailUpfile{
	max-width: 150px;
	display: block;
	margin: auto;
	padding-bottom: 10px;
}

/* 詳細ページ・本文  */
.detailText{
	width: 100%;
	margin-bottom: 20px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding-left: 20px;
}

/* ロールオーバー色 */
.detailText a{ color: #EA6101; text-decoration: underline;}
.detailText a:hover{ color: #CCC;  }


@media screen and (max-width: 768px){
	#detail { flex-direction: column; }
	.detailTitle{ width: 95%; }
	.detailUpfile { width: 100%; margin: auto;}
	.detailText { width: 90%; padding-left: 0; margin: auto;}
}

/* ボタン */
.backORcloseBtn{
	width: auto; 
	max-width:300px;
	height: auto; 
	margin: 20px  auto 30px auto; 
	text-align:center;
	font-size: 1.5rem; 
	line-height: 1.5; 
	clear: both;
}

.backORcloseBtn a{
	display:block;
	width: 100%;
	height: 100%;
	padding:1rem 0rem 1rem  0px; 
    background-color: #37302D;
	color: #FFFFFF;
	text-decoration:none;
}

.backORcloseBtn a:hover{
	background: rgba(55,48,45,0.70);
	color: #FFFFFF;
}

/* パンくずリスト  */
.pNav{ font-size: 1.2rem; margin:2rem 0px; }
.pNav a:link, .pNav a:visited{ color: #EA6101; text-decoration: underline;}
.pNav a:hover{ color: #666;  }

/* ------------------------------------------------------------
	ニュース一覧　news.php	/ トップ　top-umekomi.php
------------------------------------------------------------ */
/* トップページの枠  */
#newsWrap{
	width: 100%!important;
	margin:0;
	padding:0;
	overflow-y: scroll;
	height: 260px;
}

/* ニュース一覧ページの枠  */
#newsWrap-list{
	width: 100%;
	margin:0;
	padding:0;
	height: auto;
	display:block;
}

#newsList{
	width: 100%;
}

/* ループ枠・topページ  */
#newsList li{
    display: flex;
    border-bottom: 1px dotted #CCC;
    padding: 10px 0;
	flex-wrap: nowrap;
    align-items: flex-start;
}

/* ニュース一覧ページでは折り返す  */
#newsWrap-list li{
    display: flex;
    flex-direction: column;
	flex-wrap: wrap;
    border-bottom: 1px dotted #CCC;
    padding: 10px 0;
    align-items: flex-start;
}

/* カテゴリマーク　今回はナシ */
.catName{ 
  position: absolute;
  left: 110px;
  top: 8px;
  width: 120px;
  height: 20px;
  font-size: 10px;
  color: #FFF;
  text-align: center;
  padding-top: 0;
  padding-bottom: 3px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 25px
}
/* カテゴリ別色分けマーク　今回はナシ　 */
.cat-0 .catName{background: #B5D100; }
.cat-1 .catName{background: #0CAC49; }
.cat-2 .catName{background: #00A1AF; }

/* newマークを付ける場合 */
.newMark{
  position: absolute;
  top: 0;
  right: 0;
  background-color: #FFC926;
  color: #FFF;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 10px;
}

/* タイトル */
.title{
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0; 
}

.title a{
    pointer-events:auto !important;
    position:relative;
    z-index:9999;
}

.title a:hover {
  color: #EA6101;
  text-decoration: underline!important;
}

/* ニュース一覧ページでは太字  */
#newsWrap-list .title{
	font-size:1.6rem; 
	line-height:1.6;
	display: block; 
	margin-top: 10px;
	margin-left: 0;
	font-weight: bold!important;
}

/* サムネイルと本文が入る枠・高さを設定しない  */
.txt-box {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 1rem 0;
}

/* 　日付枠  */
.news-meta{
  position: relative;
  min-width: 150px; /* 日付＋NEW の幅 */
  font-size: 14px;
}

/* 　日付  */
.up_ymd time {
  display: block;
}

/* サムネイル画像 */
.thumbNailWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px; /* サムネイル画像のサイズ（今回は150角） */
  height: 150px;
  max-height: 170px;
  overflow: hidden;
  padding: 0;
  background: #FFF;
}

.thumbNailWrap img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 中央を切り抜いて拡大縮小 */
  object-position: center top;
}

.txt-box .tbox{
  width: 100%;
  margin-left: 10px;
}

.comment{
  width: 100%;
  margin-top: 10px;
  margin-left: 0;
}

/* トップ・ニュース一覧の本文の文字
.comment{
	font-size: 15px;
	letter-spacing: 0.1em;
	margin-left: 40px;
} */

@media(max-width: 768px){
	#newsList .txt-box {flex-direction: column;}
	#newsWrap { width:100%; margin-right: 0; }
	#newsList { 
      width:100%;
      flex-direction: column;
      align-items: flex-start;
	}
	.up_ymd{
      margin-left: 0;
      display: block; 
    }
	#newsList .title h2{ margin-left: 0;}
	.newMark {margin-left: 10px;}
	.thumbNailWrap{ width: 100%; text-align: center; margin: auto;}
	.thumbNailWrap img {transform: scale(0.8);}
	.comment{ margin-top: 10px; margin: auto;}

}

/* ----Pager style ページャー ----------------------- */


.pager{
	text-align:left;
	padding:1rem 0;
	clear:both;
}
/*ページャーボタン*/
.pager a{
	display: inline-block;
    border:none;
    border-radius: 5px;
    color: #FFFFFF;
	background: #C5C0BB;
    font-size: 12px;
    padding:0.3rem 1rem;
    text-decoration: none;
	margin:0.2rem ;
}

/*現在のページのボタン*/
.pager a.current{
    background: #37302D;
	border:none;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 12px;
     padding:0.3rem 1rem;
    text-decoration: none;
	margin:0.2rem ;
}

.pager a:hover{
    background:#A88476;
    color: #FFFFFF;
}

.overPagerPattern{
	padding:1rem ;	
}