@charset "utf-8";
/* ================================================================
e-craft design
 admin  : Saori Otsuaka
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2026/01/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"くらい
------------------------------------------------------------ */

/* カテゴリー・日付*/
.tag{
	display: flex;
	flex-wrap:nowrap;
	align-items: center;
	justify-content: flex-start;
	border-bottom: solid 1px #E1E0E0;
	margin: 3rem auto;
	padding: 3rem 0;
	position: relative;
}


/* 詳細ページの日付  */
#up_ymd{ 
	display: block;
	font-size:1.3rem;
	margin: 0 1rem 0 0;
}


/* タイトル  */
.detailTitle{font-size:1.8rem; line-height:1.6; display: block;
	font-family: ten-mincho, serif; font-style: normal; font-weight: 400;}


/* カテゴリー  */

#cat{ 
	position: absolute;
	top:0.8rem;
	left:0rem;
	height: 20px;
	width: 100px;
	text-align:center;
	display:block;
	color:#666666;
	background: #F1F0EC;
	font-size: 1.3rem;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
	margin: 0 1rem 0 0;
}

.tag .cat-0{background: none; }
.tag .cat-1{background: none; }


/* 記事  */
#detail { 
	display: block;
	line-height: 1.4;
}

.detailUpfile{
	width: 49%;
	float: right;
	min-height: 200px;
	padding-bottom: 2rem;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
		overflow:hidden;
	margin: 4px 8px 4px 0px;
	padding:0px 0px;	
}


.detailText{
	width: 49%;
	float: left;
	background:none;
	padding: 0;
	font-size:1.6rem;
	line-height: 1.6;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.detailText b{font-weight: bold;}

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


@media screen and (max-width: 480px){
	.tag{ flex-wrap:wrap; padding: 4rem 1rem 1rem 1rem;}
	.detailTitle{width: 100%;}
	.detailUpfile { width: 100%; float: none; margin: 1rem auto;}
	.detailText {  width: 100%; float: none; margin: 1rem auto;}
}



/* ボタン */
.backORcloseBtn{ 
	position: relative; 
	width: auto; 
	max-width:200px;
	height: auto;
	min-height: 40px;
	font-size: 1.6rem; 
	line-height: 1.2; 
	background-color: #999084;
	padding:0.5rem 0rem 1rem  0px; 
	margin: 3rem auto 2rem auto;
}

.backORcloseBtn::before {
	position: absolute;
	content: '';
	top: 75%;
	right: 15%;
	width: 70%;
	height: 2px;
	border-top: 1px solid #FFF;
	margin-top: -1px;
}

.backORcloseBtn::after {
	position: absolute;
	content: '';
	top: 75%;
	left: 15%;
	width: 8px;
	height: 8px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	-webkit-transform: rotate(-135deg);
	    -ms-transform: rotate(-135deg);
	        transform: rotate(-135deg);
	margin-top: -5px;
}

.backORcloseBtn a{ display: block; text-decoration: none!important; color: #FFFFFF!important;}

.backORcloseBtn:hover { background-color: rgba(55,48,45,0.70);}
.backORcloseBtn:hover::after, .btn-bk:hover::before { -webkit-animation: arrow03 .4s; animation: arrow03 .4s;}


/* パンくずリスト  */
.pNav{ width: 90%; font-size: 1.2rem; margin:2rem auto; }
.pNav a:link, .pNav a:visited{ color: #978A84; text-decoration: underline;}
.pNav a:hover{ color: #000000;  }

/* ------------------------------------------------------------
	ニュース一覧　news.php	/ トップ　top-umekomi.php
------------------------------------------------------------ */
#newsWrap{
	width: 100%;
	margin:0 auto;
	padding:0;
}

ul#newsList{
	width: 100%;
	margin:1rem 0;
	padding:0;
}

ul#newsList li{
	display: flex;
	flex-wrap:nowrap;
	align-items: center;
	justify-content: space-between;
	margin:0;
	padding:3rem 1rem 2rem 1rem;
	width: 100%;
	height: auto;
	list-style-type:none;
	border-bottom: solid 1px #E1E0E0;
	position: relative;
}

ul#newsList li:first-child{
	border-top: solid 1px #E1E0E0;
}

.text_box{
	display: flex;
	flex-wrap:nowrap;
	align-items: center;
	justify-content: flex-start;
}

/* 一覧ページの日付  */
span.up_ymd{
	display: block;
	font-size:1.3rem;
	margin: 0 1rem 0 0;
}


/* newマークを付ける場合 */
.newMark{
	height: 20px;
	width: 50px;
	text-align:center;
	display:block;
	background:#999084; color:#FFFFFF;
	font-size: 1.3rem;
	line-height: 1.5;
	letter-spacing: 0.1rem;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
	margin: 0 1rem 0 0;
}

span.title{font-size:1.6rem; line-height:1.6; display: block;
	font-family: ten-mincho, serif; font-style: normal; font-weight: 400;}

/* ロールオーバー色 */
span.title a, .pNav a{ color: #000000; text-decoration: none; }
span.title a:hover, .pNav a:hover{ color: #666666; text-decoration:underline; }


/* お知らせマーク */
.catName{ 
	position: absolute;
	top:0.5rem;
	left:1rem;
	height: 20px;
	width: 100px;
	text-align:left;
	display:block;
	color:#666666;
	font-size: 1.3rem;
}
/* カテゴリ別色分けマーク　News Event */
.cat-0 .catName{background: none; }
.cat-1 .catName{background: none; }


/* サムネイル画像 */
.thumbNailWrap{
	display:block;
	width: 100px;
	height:100px;
	overflow:hidden;
	margin:0 1rem 0 2rem;
	padding:0;
}

.thumbNailWrap img, .thumbNailWrap a{
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover; /* 画像を中央の位置でトリミングする */
	-o-object-position: center top;
	   object-position: center top;
	-webkit-transition: -webkit-transform .6s ease;
	transition: -webkit-transform .6s ease;
	-o-transition: transform .6s ease;
	transition: transform .6s ease;
	transition: transform .6s ease, -webkit-transform .6s ease; /* ゆっくり変化させる */
}


/* トップ・ニュース一覧の本文の文字 */
.comment{
	position: absolute;
	top:7rem;
	left: 1rem;
	display: block;
	font-size:1.4rem;
	line-height:1.4;
	letter-spacing: 0.1em; 
}


@media(max-width: 900px){
}

@media(max-width: 768px){
	
}
	
@media screen and (max-width: 480px){
	.text_box{ flex-wrap:wrap;}
	.thumbNailWrap{ flex: 1 1 70%; }
}

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


.pager{
	width: 100%;
	max-width: 1024px;
	text-align:left;
	margin: 0 auto;
	padding:1rem;
	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 ;	
}