@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/base.css");



/*----- CASE一覧 設定 ----------------------------------------------------*/


/*----- 各セクション 設定 ----------------------------------------------------*/

section.sectionWrap{ position:relative; width:100%; padding:30px 0; float:left; }
.sectionWrap2{ background:#f3f7ff; }
.sectionWrap3{ background:url('../../img/companyprolife/section_contact_bg.jpg') no-repeat; background-size:cover; background-position:top center;}

div.sectionArea{ width:1200px; margin:0 auto; }

h2.sectionTit{ width:100%; padding:30px 0; text-align:center; line-height:1.2em; float:left; }
h2.sectionTit2{ width:100%; padding:30px 0; text-align:left; line-height:1.2em; float:left; }
h2.sectionTit strong,
h2.sectionTit2 strong{ font-size:2em; font-weight:bold; }
h2.sectionTit small,
h2.sectionTit2 small{ font-size:1em; font-weight:normal; letter-spacing:0.2em; line-height:0em; }

.icon {
    margin-right: 10px;
    font-size: 1em;
    vertical-align: middle;
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.sectionArea{ width:96%; }
    
    h2.sectionTit{ padding:10px 0; text-align:center; line-height:1.2em; float:left; }
    h2.sectionTit2{ padding:10px 0; text-align:left; line-height:1.2em; float:left; }
    h2.sectionTit strong,
    h2.sectionTit2 strong{ font-size:1em; }
    h2.sectionTit small,
    h2.sectionTit2 small{ font-size:0.6em; }
    
}

/*----- NEWS一覧 設定 ----------------------------------------------------*/

div.introArea{ width:100%; padding:40px 0; text-align:center; float:left; }
.introArea_tit{ width:100%; padding-bottom:30px; font-size:1.6em; float:left; }
.introArea_text{ width:90%; padding:0 5%; flaot:left; }
.introArea_text p{ padding-bottom:1.7em; }

div.caseListArea{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:50px 0; width:90%; padding:0 5%; float:left; }
div.caseListArea::after{ content:""; width:32%; }

div.caseListBox{ width:32%; }
.caseListBox a{ text-decoration:none; }
.caseListBox a:hover{ text-decoration:underline; }
/* サムネイル全体の表示枠設定：元画像（フライヤー）に合わせて縦長1 / 1.414比率 */
.caseListBox_thumbnail {
	width: 100%;
    margin-top:15px;
	aspect-ratio: 1 / 1.414; /* フライヤー比率（A5縦） */
	overflow: hidden;
}

.caseListBox_thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* はみ出す部分を拡大してカバー */
	display: block;
}
.caseListBox_title {
	width: 100%;
	font-size: 1.6em;
	font-weight: normal;
	display: -webkit-box;           /* 多段表示用のレイアウト */
	-webkit-line-clamp: 1;          /* 2行で切る */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.caseListBox_date { display: flex; justify-content: flex-end; align-items: center; width: 100%; }
.caseListBox_date::before { content: ""; flex: 1; border-top: 1px solid #131c2e; margin-right:70px; }
.caseListBox_date time { font-weight: bold; font-size: 1em; white-space: nowrap; }

.caseListBox a:hover .caseListBox_title{ text-decoration:underline; }
.caseListBox a:hover .caseListBox_thumbnail{ opacity:0.9; }

/*ページャー設定*/
.paginationArea {
    width:100%;
	text-align: center;
	margin: 40px auto 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
    float:left;
}

.paginationArea .page-numbers {
	display: inline-block;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 9999px; /* ← ◯にするポイント */
	text-decoration: none;
	color: #333;
	transition: all 0.2s ease-in-out;
	font-size: 0.95em;
	padding: 0 12px;
	box-sizing: border-box;
}

.paginationArea .page-numbers.dots {
	pointer-events: none;        /* ← ホバーもクリックも無効 */
	color: #999;
	border: none;
	background: none;
	cursor: default;
}

.paginationArea .page-numbers:hover {
	background-color: #eee;
	color: #000;
    border-color: #333;
}

.paginationArea .current {
	border-color: #333;
	font-weight: bold;
}




/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

    div.caseListBox{ width:48%; }
    
    .caseListBox_date::before { margin-right:30px; }
    
}