@charset "UTF-8";
/*----------------------------
recommendes
----------------------------*/
/* marksdownにも使う共通エディタ読み込み 
@import url(../../editor-style.css);*/
#lv{
	& section{
		padding:0;
	}
}
.visual-bg{
	background:url(../images/recommended/visual-bg.png) no-repeat;
    background-size:cover;
    background-position: center;
}
.visual-bg:before{
		display:none;
}

@media screen and (max-width: 767.98px){
	.article-list{
		& .ratio-29x35{
			aspect-ratio: 4 / 3;
		}
	}
	
}
.py-3 strong{
	color: #f96503;
}

.recommended_article div[data-type="recommended"]{
	>*{
		margin-bottom: 1em;
		&:last-child{
			margin-bottom: 0;
		}
	}
	.tag{
		font-size: .9rem;
		ul{
			display: block;
			li{
				display: inline-block;
				border: 1px solid #000;
				border-radius: 100px;
				padding: 0 10px;
				margin: 0 5px 10px;
			}
		}
	}
	
	*+.section-subtitle3{
		margin-top: 2em;
	}
	
	.box{
		border: 13px solid #f4f4f4;
		margin: 2em auto;
		>*:last-child{
			margin-bottom: 0;
		}
	}
	h2+.box,
	h3+.box,
	h4+.box,
	h5+.box{
		margin-top: 1em;
	}
	.box_head{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		background: #d9f2f2;
		border-left: 7px solid #01c1c0;
		padding: 15px;
		position: relative;
		overflow: clip;
		h3{
			font-size: 1.3rem;
			margin-bottom: 0;
			padding-right: 10px;
		}
		h3.pr{
			&:before{
				content: "";
				display: block;
				width: 0;
				height: 0;
				border: solid transparent;
				border-width: 23px;
				border-top-color: #01c2c1;
				border-right-color: #01c2c1;
				position: absolute;
				top: 0;
				right: 0;
			}
			&:after{
				content: "PR";
				color: #fff;
				position: absolute;
				top: 4px;
				right: 4px;
				font-size: 0.8rem;
				line-height: 1;
			}
		}
		.sns{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			a{
				width: 22px;
				height: 22px;
				margin: 5px 10px 5px 0;
				overflow: hidden;
				object{
					width: 100%;
					height: 100%;
					display: block;
				}
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	
	.box_content{
		padding: 1.2em 1em;
		>*:last-child{
			margin-bottom: 0;
		}
		.general-slider1{
			margin-bottom: 2em;
		}
	}
	
	.box_foot{
		text-align: center;
		padding-bottom: 0.2em;
	}
	
	iframe[src*="google.com/maps"]{
		width: 100%;
	}
	
	>table{
		width: 100%;
		border-top: 1px dashed #000;
		th,
		td{
			font-weight: normal;
			padding: 9px;
			border-bottom: 1px dashed #000;
			vertical-align: middle;
		}
		th{
			width: 35%;
		}
	}
}
@media screen and (max-width: 600px){
	div[data-type="recommended"]{
		.box{
			border: 1px solid #ccc;
			margin: 2.5em auto;
			.box_content{
				padding: 1rem;
			}
		}
	}
}