@charset "utf-8";




.list-container{
    background-color: #eee;     /* 背景色指定 */
    padding:  5px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
	flex-wrap: wrap;            /* 折り返し指定 */
}

.list {
    padding: 10px;
    margin:  5px .5%;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 16.3%;                 /* 幅指定 */
    background-color: #fff;     /* 背景色指定 */
}



.f-container { flex-wrap:wrap; }

/*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1〜option2、と、newアイコン共通（初期設定）*/
.option1,.option2,.new {
	text-align: center;display: inline-block;padding: 0;
	font-size: 10px;	/*文字サイズ*/
	line-height: 20px;	/*高さ*/
	width: 100px;		/*幅*/
	position: absolute;
	right: 0px;		/*右から0pxの場所に配置*/
	top: 0px;		/*上から0pxの場所に配置*/
	background: #999;	/*背景色*/
	color: #fff;		/*も地色*/
	transform: rotate(45deg) translate(27px,-10px);	/*45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
}
/*詳細ページで使う場合の変更設定*/
.item .option1, .item .option2, .item .new {
	position: static;transform: none;width: auto;
	padding: 0 10px;	/*上下、左右へのアイコン内の余白*/
	margin-left: 5px;	/*アイコン同士に空けるスペース*/
}
/*「new」への追加設定。色を変更します。*/
.new {
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
}
/*「option1」への追加設定。色を変更します。*/
.option1 {
	color: #FFF;			/*文字色*/
	background: #ff9000;	/*背景色*/
}

/*listブロック
---------------------------------------------------------------------------*/

/*最後のブロックに下線を入れる*/
.list:last-of-type {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
}
/*ブロック内の画像*/
.list p.img {
	padding: 0px !important;		/*左に回り込み*/
	width: 100%;
	margin-top: 0%;
	margin-right: 0%;
	margin-left: 0%;
}
/*右側ブロック*/
.list .text {
	padding :0 0px;
}
/*ブロック内の段落(p)タグ*/
.list p {
	padding: 0 !important; 
}
/*ブロック内の見出し(h4)*/
.list h4 {
	font-size: 13px;	/*文字サイズ*/
}
#contents #contents-in #main section .list a {
	text-decoration: none;
}
/*ブロック内の見出し(h4)にリンクを貼った場合の設定*/
.list h4 a {
	color: #6fbfd1;		/*文字色*/
}
/*ボックス内のサイト名*/
.list p.name {
	position: absolute;
	right: 20px;	/*ボックスの右から20pxの場所に配置*/
	bottom: 5px;	/*ボックスの下から5pxの場所に配置*/
}



/*サイト名（name）
---------------------------------------------------------------------------*/
p.name {
	overflow: hidden;
	font-size: 12px !important;	/*文字サイズ*/
	background: url(../tp_portal1_skyblue/images/icon_home.png) no-repeat left center/12px;
	padding-left: 15px !important;
	float: right;
}


#contents #contents-in #main section .interview a h4,
.interview h4 {
	font-size: 100%;
	padding: 0px;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	line-height: 110%;
	font-weight: 800;
	color: #2C4976;
}
#contents #contents-in #main section .list a .text h5 {
	font-size: 120%;
	margin: 2px 0px 0;
	padding: 0px;
	text-decoration: none;
	font-weight: bold;
}
#contents #contents-in #main section .list a .text h4 .small {
	font-size: 80%;
}
.interview p {
	font-size: small;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 110px;
}
#contents #contents-in #main section .list a .text p {
}
.interview  a {
	text-decoration: none;
	color: #000;
}
.interview  a:hover{
	color: #333;
}
.interview a h5 {
	font-size:100%;
	margin: 2px 0px 0;
}
#contents #contents-in #main section .list a .text p{
	margin: 0px 0px;
	padding: 0px;
	text-decoration: none;
	font-size: 80%;
}
#contents #contents-in #main section .list a .text h4 {
	font-size: 100%;
	font-weight: 800;
	color: #2C4976;
	text-decoration: none;
	line-height: 114%;
}


/*画面幅1000px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

/*４列タイプ(list-compact)のブロック
---------------------------------------------------------------------------*/
/*画像を共通サイズにする設定*/
.list-compact p.img {
	height: 50%;	/*高さ*/
}

}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

/*４列タイプ(list-compact)のブロック
---------------------------------------------------------------------------*/
/*画像を共通サイズにする設定*/
.list-compact p.img {
	height: 66%;	/*高さ*/
}

/*sub,sideコンテンツ内のlist-subボックス
---------------------------------------------------------------------------*/
/*画像（サイドコンテンツの全ての画像を共通で変更）*/
.list-sub .img {
	width: 25%;			/*画像の幅*/
	float: left;		/*左に回り込み*/
	margin-right: 10px;	/*画像右側に空ける余白*/
}
.list {
    width: 25%;                 /* 幅指定 */
}
}



/*画面幅750px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:750px){

/*４列タイプ(list-compact)のブロック
---------------------------------------------------------------------------*/
/*画像を共通サイズにする設定*/
.list-compact p.img {
	height: 55%;	/*高さ*/
}

}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*４列タイプ(list-compact)のブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list-compact {
	float: none;
	width: auto;
	height: auto;
}
/*ボックス内のh4タグと、p(段落)タグ設定*/
.list-compact h4,.list-compact h4 a, .list-compact p, .list-compact p.img, .list-compact img {
	height: auto;
}
.list-compact p.img {
	float: left;
	width: 25%;
	margin-right: 2%;
}

.list {
    width: 40%;                 /* 幅指定 */
}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1〜option2、と、newアイコン共通（初期設定）*/
.option1,.option2,.new {
	transform: rotate(45deg) translate(45px,-25px);	/*45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
}

/*listブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.list {
	padding: 5px 10px 25px;	/*上、左右、下へのブロック内の余白*/
}
/*ブロック内の見出し(h4)*/
.list h4 {
}

/*list2ボックス（２列並びのボックス）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 a {
	padding: 5px 10px;	/*上下、左右へのボックス内の余白*/
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list2 span {
	font-size: 12px;	/*文字サイズ*/
}

}



/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px){

/*list2ボックス（２列並びのボックス）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 li {
	float: none;width: auto;	/*１列にする設定*/
	margin: 0 0 10px;	/*上、左右、下に空けるボックスの外側の余白。*/
}
.list2 li a {
	height: auto;
}
/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
.list2 .img {
	height: auto;	/*高さをリセット*/
	width: 20%;		/*幅の指定に変更*/
}

}
#contents #contents-in #main section .list-container .list a:hover .text h4 {
	color: #D63447;
}