/*=================================
画像付きリンク一覧枠。
===============
====================================================*/
/*-------------------------
専用枠。
------------------------------*/
.text-link-with-image-frame{
margin:35px 0 0;
}
.text-link-with-image-frame img{
	margin:0;
	border-radius:0;
}
/*-------------------------
画像リンク一覧箱。
------------------------------*/
.text-link-with-image-box{
	max-width:100%;
	/*height:415px;*/
	margin:40px 0 0;
	/*color:#3a3a3a;*/
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:7px;
	box-shadow:0 0 12px 1px rgba(0, 0, 0, 0.07);
	word-break:break-all;
	position:relative;
	/*background-image:url(../../images/yubi.png);*/
	background-repeat:no-repeat;
	background-position-x:right;
	cursor:pointer;
}
.text-link-with-image-box:first-child{
	margin-top:45px;
}
/*-------------------------
画像リンク一覧箱の装飾。
------------------------------*/
.text-link-with-image-box::before{
	content:"";
	border-left:1px solid #ddd;
	/*height:10px;*/
	position:absolute;
	right:-3px;
	top:13px;
	bottom:13px;
}
.text-link-with-image-box::after{
	content:"";
	border-top:1px solid #ddd;
	width:8px;
	/*height:90%;*/
	position:absolute;
	right:0px;
	top:50%;
	/*bottom:12px;*/
}
/*-------------------------
枠にカーソルを当てた時のスタイル。
------------------------------*/
.text-link-with-image-box:hover .text-link-with-image-box-title,.text-link-with-image-box:hover .text-link-with-image-box-tag{
	text-decoration:underline;
}
.text-link-with-image-box:hover .text-link-with-image-box-title{
	color:#0D72AE;
}
/*-------------------------
リンクを枠全体に広げる。
------------------------------*/
.text-link-with-image-box a{
	color:#3a3a3a;
	width:100%;
	height:100%;
	text-decoration:none;
	display:flex;
}


/*=================================
サムネイル。
===============
====================================================*/
/*-------------------------
ボックス内のサムネイル調整。
------------------------------*/
.text-link-with-image-box-thumbnail{
	width:137px;
	overflow:hidden;
	border-radius:7px 0 0 7px;
}
/*-------------------------
サムネイル画像の設定。
------------------------------*/
.text-link-with-image-box-thumbnail img{
	width:100%;
	height:auto;
	user-select:none;
	/*background-image:url();*/
	/*background-size:cover;*/
}
/*-------------------------
サムネイル画像の変形に要する時間を設定。
------------------------------*/
.itext-link-with-image-box-thumbnail img{
	transition:0.15s;
}
/* ボックスにカーソルを合わせた時の画像変形スタイル指定 */
.itext-link-with-image-box:hover .text-link-with-image-box-thumbnail img{
	transform: scale(1.05, 1.05);
	/*transform: scale(1.05, 1.05) rotate(-0.6deg);*/
}


/*=================================
リンク先の頁情報。
===============
====================================================*/
/*-------------------------
リンク先サイトの情報。
------------------------------*/
.text-link-with-image-box-content{
	font-size:16px;
	line-height:1.6;
	font-weight:bold;
	text-decoration:none;
	letter-spacing:0.7px;
	padding:20px 27px 0 27px;
	flex:1;
	position:relative;
}
/*-------------------------
リンクサイト情報箱。
------------------------------*/
.text-link-with-image-box-tag-box{
	width:100%;
	display:flex;
	/*height:35px;
	line-height:35px;*/
	padding:0 0 0;
	/*position:absolute;
	left:0;
	bottom:15px;*/
	/*background:skyblue;*/
}
/*-------------------------
リンクサイト属性。
------------------------------*/
.text-link-with-image-box-tag{
	padding:0 25px 0 0;
	font-size:14px;
	font-weight:bold;
	color:#0D72AE;
	letter-spacing:0.7px;
	flex-grow:1;
	/*background-color:tomato;*/

}
/*-------------------------
おすすめ度。
------------------------------*/
.text-link-with-image-box-recommendation img{
	width:15px;
	height:auto;
	margin-left:4px;
}

/*-------------------------
リンク先のサイト題名枠。
------------------------------*/
.text-link-with-image-box-title{
	padding-bottom:6px;
}
/*-------------------------
リンク先のサイト解説枠。
------------------------------*/
.text-link-with-image-box-description{
	font-size:12px;
	font-weight:normal;
	line-height:1.7;
	padding-bottom:6px;
}
/*-------------------------
ボタン枠。
------------------------------*/
.text-link-with-image-box-button{
	width:100%;
	padding:16px 16px 17px;
	font-size:12px;
	text-align:center;
	margin:15px 0 0;
	/*color:#3a3a3a;*/
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:7px;
	box-shadow:0 0 12px 1px rgba(0, 0, 0, 0.07);
	word-break:break-all;
	position:relative;
	display:flex;
	justify-content:space-between;
}
.text-link-with-image-box-button::before{
	content:"";
	height:15px;
	border-left:1px solid #ddd;
	position:absolute;
	left:50%;
	top:-15px;
}
.text-link-with-image-box-button::after{
	content:"";
	border-bottom:1px solid #ddd;
	position:absolute;
	left:10px;
	right:10px;
	bottom:-3px;
}

/*=================================
リンク先の補足情報。
===============
====================================================*/
.text-link-with-image-box-supplement{
	position:absolute;
	top:-170px;
	/*left:113px;
	right:auto;*/
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, 0);
    /*-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
	width:360px;

	/*margin:0 auto;*/
	/*margin-bottom:35px;*/
	background-color:#fff;
	border:0px solid #ddd;
	border-radius:7px;
	box-shadow:0px 0px 20px 1px rgba(0, 0, 0, 0.4);
	word-break:break-all;
	z-index:10;
	display:none;
	/*cursor:pointer;*/
}
.text-link-with-image-box-supplement-close{
	position:absolute;
	top:5px;
    right:5px;

	height:25px;
	width:25px;
	line-height:25px;
	text-align:center;
	color:#ccc;
	background:#222;
	border-radius:50%;
	z-index:11;
	cursor:pointer;
}
/*-------------------------
ボックス内のサムネイル調整。
------------------------------*/
.text-link-with-image-box-supplement-thumbnail{
	overflow:hidden;
	border-radius:7px 7px 0 0;
}
/*-------------------------
サムネイル画像の設定。
------------------------------*/
.text-link-with-image-box-supplement-thumbnail img{
	width:100%;
	height:auto;
	user-select:none;
}
/*-------------------------
サムネイル画像の変形に要する時間を設定。
------------------------------*/
.text-link-with-image-box-supplement-thumbnail img{
	transition:0.15s;
}
/* ボックスにカーソルを合わせた時の画像変形スタイル指定 */
.text-link-with-image-box-supplement:hover .text-link-with-image-box-supplement-thumbnail img{
	transform: scale(1.05, 1.05);
	/*transform: scale(1.05, 1.05) rotate(-0.6deg);*/
}
.text-link-with-image-box-supplement-button{
	width:100%;
	padding:5px 16px 17px;
	font-size:12px;
	text-align:center;
	/*border-top:1px solid #ddd;*/
	border-radius:0 0 7px 7px;
	word-break:break-all;
	display:flex;
	justify-content:space-between;
}
.text-link-with-image-box-supplement-text{
	line-height:1.8;
	text-decoration:none;
	letter-spacing:0.2px;
	padding:25px 27px 0 27px;
}
.text-link-with-image-box-supplement-text p{
	margin-bottom:20px;
	font-size:12px;
}