@charset "utf-8";
/* ================================================================
 カサナル保険
 admin  : Masako Yoshimoto
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2025/11/16
 
 新着情報　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; }/* 詳細ページの文字の幅 */


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

/* カテゴリー・日付 */
.tag{
	width: 100%;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	display: flex;
	flex-wrap: wrap; /* 折り返しあり */
}

/* 詳細ページの日付  */
.tag #up_ymd{
  display: inline-block;
  font-size: 14px!important;
  min-width: 80px; /* 日付の幅 */
  margin: 1rem 1rem 1rem 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: #B5D100; }
.tag .cat-1 {background: #0CAC49; }
.tag .cat-2 {background: #00A1AF; }


/* 詳細ページ・記事  */
#detail { 
	display: block;
	line-height: 1.4;
	display: flex;
}

/* 詳細ページ・画像  */
.detailUpfile{
	max-width: 250px;
	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: #0CAC49; 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: #0CAC49; text-decoration: underline;}
.pNav a:hover{ color: #666;  }

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

ul#newsList{
	flex: 8;
}

ul#newsList li{
  position: relative;
  display: block;
  display: flex;
  flex-direction: column;
  border-bottom: 1px dotted #CCC;
  padding-top: 15px;
  padding-bottom: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* お知らせマーク */
.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;
  left: 240px;
  top: 8px;
  width: 50px;
  height: 20px;
  font-size: 10px;
  background-color: #FFC926;
  color: #FFF;
  text-align: center;
  padding-top: 0;
  padding-bottom: 3px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 25px
}

ul#newsList li .title{
	margin-top: 0;
}

ul#newsList li .title h2{
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-left: 0; 
}

ul#newsList li .title h2 a {
  color: #0CAC49;
  text-decoration: none;
}

ul#newsList li .title h2 a:hover {
  text-decoration: underline!important;
}

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

/* 一覧ページの日付  */
ul#newsList li #up_ymd{
  display: inline-block;
  min-width: 80px; /* 日付の幅 */
  margin-bottom: 10px;
}

/* サムネイル画像 */
.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;
}

ul#newsList li span.title{
	font-size:1.6rem; 
	line-height:1.6;
	display: block; 
	margin-top: 10px;
	font-weight: bold!important;
}

ul#newsList li .txt-box .comment{
  width: 100%;
  margin-top: 10px;
  margin-left: 10px;
}

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

@media(max-width: 768px){
	ul#newsList li .txt-box {flex-direction: column;}
	ul#newsList { width:90%; margin: auto; }
	ul#newsList li{ 
		width:100%;
		flex-direction: column;
		align-items: flex-start;
	}
	#up_ymd{
    padding-right: 10px;
    margin-right: 0;
	display: block;
    }
	ul#newsList li .title h2{ margin-left: -10px;}
	.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 ;	
}