@charset "utf-8";
/* CSS Document */

/* -------------------------
 コンテンツ枠
--------------------------*/
#contents{
	width: 96vw;
	margin: 0 auto 4vw;
}
 
.rpBlock{
	margin: 0 0 4vw;
	padding: 0 0 16px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #1e3a56;
	font-size: 14px;
	line-height: 1.5;
}
 
/* -------------------------
 見出し・進捗
 見出しは街並カテゴリー（サイドの「街並画像」と同じ色・アイコン）
--------------------------*/
.rpHead h1{
	margin: 0 0 12px;
	padding: 4.5vw 0 4.5vw 2vw;
	font-size: 20px;
	font-weight: bold;
	line-height: 20px;
	text-indent: 40px;
	color: #fff;
	background: #2aa9ca url("../img/common/icon_menu01.png") 2vw center /32px no-repeat;
}
 
.rpBar span{
	display: block;
	height: 100%;
	background: #2aa9ca;
}
 
/* -------------------------
 路線の線と駅の丸
 塗りつぶし＝撮影済み／白抜き＝未撮影
--------------------------*/
.rpLine{
	position: relative;
	margin: 0 12px;
	padding: 0 0 0 28px;
}
 
.rpLine::before{
	content: "";
	position: absolute;
	left: 9px;
	top: 22px;
	bottom: 22px;
	width: 3px;
	background: #2aa9ca;
}
 
.rpSt{
	position: relative;
	margin: 0 0 12px;
}
 
.rpSt:last-child{
	margin-bottom: 0;
}
 
.rpSt::before{
	content: "";
	position: absolute;
	left: -26px;
	top: 18px;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #2aa9ca;
	border: 3px solid #fff;
}
 
.rpSt.rpNo::before{
	background: #fff;
	border-color: #2aa9ca;
}
 
/* -------------------------
 駅カード
--------------------------*/
.rpCard{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	background: #fff;
	border: 1px solid #e3e3de;
	border-radius: 6px;
}
 
/* 街並サムネイル */
.rpMachi{
	flex-shrink: 0;
	width: 112px;
	height: 112px;
}
 
.rpMachi a,
.rpMachi span{
	display: block;
}
 
.rpMachi img{
	display: block;
	width: 112px;
	height: 112px;
	object-fit: cover;
}
 
/* 駅名・街並リンク */
.rpInfo{
	flex: 1;
	min-width: 0;
}
 
.rpInfo h2{
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	color: #222;
}
 
.rpInfo p{
	margin: 0 0 4px;
}
 
.rpMuted{
	color: #6b6b6b;
}
 
/* 投稿画像 */
.rpPosts{
	flex-basis: 100%;
	padding: 12px 0 0;
	border-top: 1px solid #ecece8;
}
 
.rpThumbs{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 8px;
}
 
.rpThumbs a,
.rpThumbs span{
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 3px;
	background: #eee;
}
 
.rpThumbs img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 
/* 「投稿画像○枚を見る」「投稿募集中」 */
.rpPosts p{
	text-align: right;
}
 
/* 街並サムネイル・投稿画像のマウスオーバー */
.rpMachi a:hover img,
.rpThumbs a:hover img{
	opacity: 0.8;
}
 
.rpBack{
	margin: 20px 12px 0;
}

.rpSum{
	margin: 0 12px 20px;
	padding: 14px 12px;
	background: #fff;
	border: 1px solid #e3e3de;
	border-radius: 6px;
	color: #1e3a56;
}
 
.rpSum h2{
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: bold;
	color: #1e3a56;
}
 
.rpSumRow{
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"label track num"
		".     note  note";
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0 0 10px;
}
 
.rpSumRow:last-child{
	margin-bottom: 0;
}
 
.rpSumLabel{
	grid-area: label;
	font-size: 13px;
	font-weight: bold;
}
 
.rpSumTrack{
	grid-area: track;
	display: block;
	height: 10px;
	background: #e0e4e8;
	border-radius: 5px;
	overflow: hidden;
}
 
.rpSumTrack span{
	display: block;
	height: 100%;
}
 
.rpSumMachi .rpSumTrack span{ background: #2aa9ca; }
.rpSumPost  .rpSumTrack span{ background: #4ac9b4; }
 
.rpSumNum{
	grid-area: num;
	font-size: 13px;
	white-space: nowrap;
}
 
.rpSumNum strong{
	font-size: 17px;
}
 
.rpSumNote{
	grid-area: note;
	font-size: 11px;
	color: #5a6b7b;
}
 
 
/* -------------------------
 以下PC
--------------------------*/
@media
screen and (min-width: 980px){
 
#contents{
	float: left;
	width: 840px;
	margin: 0 20px 0 0;
}
 
.rpBlock{
	margin: 0 0 24px;
	padding: 0 0 24px;
}
 
.rpHead h1{
	margin: 0 0 16px;
	padding: 20px 0 16px 0;
	line-height: 26px;
	text-indent: 64px;
	background: #2aa9ca url("../img/common/icon_menu01.png") 15px 10px /40px no-repeat;
}
 
.rpLead p{
	white-space: nowrap;
}
 
.rpLine{
	margin: 0 24px;
	padding-left: 34px;
}
 
.rpLine::before{
	left: 12px;
	top: 26px;
	bottom: 26px;
}
 
.rpSt{
	margin-bottom: 14px;
}
 
.rpSt::before{
	left: -29px;
	top: 22px;
	width: 18px;
	height: 18px;
}
 
.rpCard{
	flex-wrap: nowrap;
	gap: 18px;
	padding: 16px;
}
 
.rpMachi,
.rpMachi img{
	width: 160px;
	height: 160px;
}
 
.rpInfo h2{
	margin-bottom: 8px;
	font-size: 20px;
}
 
.rpPosts{
	flex-basis: auto;
	flex-shrink: 0;
	width: 300px;
	align-self: stretch;
	padding: 0 0 0 18px;
	border-top: 0;
	border-left: 1px solid #ecece8;
}
 
.rpBack{
	margin: 24px 24px 0;
}

.rpSum{
	margin: 0 24px 28px;
	padding: 16px 20px;
}
 
.rpSumRow{
	grid-template-columns: 80px minmax(0, 1fr) 110px 190px;
	grid-template-areas: "label track num note";
	column-gap: 16px;
}
 
.rpSumLabel{ font-size: 14px; }
.rpSumNote { font-size: 12px; }
 
}
 
}