/*
 * Theme Name: 海街さんぽ ver.3.67
 * Theme URL: https://www.umimachi-sanpo.com/
 * Version: 3.67
 * Description: 26mar07 「海街ライド」にレンタサイクルアーカイブへのリンクボタン設置。「教育旅行」ガイドブックリンク削除、画像が縦に伸びる不具合調整。
 * Author: SHOKODO.Co.,Ltd
 * Author URI: http://shokodo.co.jp

 ※更新履歴はchange-log.txt参照
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	TOPページ専用CSS
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	Media Queryは以下の順に表示している
	max-width: 435px
	min-width: 436px max-width: 960px
	min-width: 961px
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*------------------------------------------------------------
	Headding
-------------------------------------------------------------*/
.ranking-area .title-area,
.plan-area .title-area,
.gift-area .title-area,
.spot-area .title-area,
.event-area .title-area,
.featured-area .title-area {
	display: block;
	margin: 0;
}
.ranking-area .title-area h2 {
	display: inline-block;
	width: 50%;
	margin: 5px 10px 8px 0;
}
	.ranking-area .title-area span {
		display: inline-block;
		width: 47%;
		line-height: 2.5;
	}
.plan-area .title-area h2,
.gift-area .title-area h2,
.spot-area .title-area h2,
.event-area .title-area h2,
.featured-area .title-area h2 {
	width: 100%;
	margin: 5px 0 0 0;
	display: inline-block;
	font-size: 131%;
	padding: 0;
}
@media screen and (min-width: 436px) {
	.ranking-area .title-area,
	.plan-area .title-area,
	.gift-area .title-area,
	.spot-area .title-area,
	.event-area .title-area,
	.featured-area .title-area {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
		.ranking-area .title-area h2,
		.plan-area .title-area h2,
		.gift-area .title-area h2,
		.spot-area .title-area h2,
		.event-area .title-area h2,
		.featured-area .title-area h2 {
			width: auto;
			margin: 5px 10px 8px 0;
		}
			.ranking-area .title-area span {
				width: auto;
			}
			/* btn右寄せ */
			.ranking-area .title-area .list-btn {
				margin-left: auto;
			}
}

/*===========================================================
	コンテンツ
===========================================================*/
.ec-area,
.plan-area,
.event-area {
	position: relative;
	min-height: 100%;
	margin: 30px 0 20px 0;
}
/*------------------------------------------------------------
	Ranking Area
-------------------------------------------------------------*/
.ranking-area {
	position: relative;
	width: 90%;
	margin: 20px 5% 20px 5%;
}
@media screen and (min-width: 436px) {
	.ranking-area {
		width: 100%;
		height: 100%;
		margin: 20px 0 0 0;
	}
}
	li.ranking-box .img {
		position: relative;
		z-index: -1; /*順位マークが下に入り込む為*/
	}
	li.ranking-box .img img {
		width: 100%;
		height: 310px;
		object-fit: cover;
		object-position: 50% 50%;
	}
	.rank-txt {
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		padding: 5px 10px;
		margin: 0;
		color: #fff;
		font-size: 90%;
		background: rgba(104,71,54,0.6);/*#684736;*/
	}

/* Grid */
ul.gred-frame {
	display: grid;
	gap: 0;
	grid-template-rows: 310px 310px;
	padding: 0;
	counter-reset: wpp-ranking;
}
@media screen and (min-width: 436px) {
	ul.gred-frame {
		margin: 0;
	}
}
li.ranking-box:nth-of-type(-n+5) {
	position: relative;
}
	li.ranking-box:first-child {
		grid-column: 1 / 3;
		grid-row: 1 / 1;
	}
	li.ranking-box:nth-child(2) {
		grid-column: 3 / 3;
		grid-row: 1 / 1;
	}
	li.ranking-box:nth-child(3) {
		grid-column: 1 / 1;
		grid-row: 2 / 3;
	}
	li.ranking-box:nth-child(4) {
		grid-column: 2 / 2;
		grid-row: 2 / 3;
	}
	li.ranking-box:nth-child(5) {
		grid-column: 3 / 3;
		grid-row: 2 / 3;
	}
/* ランキング順位マーク */
li.ranking-box:nth-of-type(-n+5):before {
	position: absolute;
	top: 7px;
	left: 8px;
	border-radius: 50%;
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	font-size: 16px;
	font-weight: 500;
	padding: 8px 15px;
}
li.ranking-box:nth-of-type(-n+3):before {
	color: #fff;
}
li.ranking-box:nth-of-type(n+4):before {
	color: #684736;
	background-color: #fff;
	border: 1px solid #ccc;
}
li.ranking-box:first-child:before {
	background: #f9ae3b;
}
li.ranking-box:nth-child(2):before {
	background: #b1b1b1;
}
li.ranking-box:nth-child(3):before {
	background: #bf272d;
}
@media screen and (min-width: 436px) {
		li.ranking-box {
			list-style-type: none;
			padding: 0 0 0 0;
			  position: relative;
		  }
		  li.ranking-box:nth-of-type(-n+5):before {
			top: 15px;
			left: 10px;
			padding: 10px 18px;
		}
}
/*------------------------------------------------------------
	EC
-------------------------------------------------------------*/
.ec-area {
	position: relative;
	margin: 0 0 0 0;
	padding: 20px;
	box-sizing: border-box;
	background: #e6f6f9;
}
@media screen and (min-width: 436px) {
	.ec-area {
		margin: 20px 0 0 0;
	}
}
/*------------------------------------------------------------
	Plan Area EC Area
-------------------------------------------------------------*/
.plan-area {
	width: 95%;
	height: 650px;
	margin: 20px 0 30px 5%;
	overflow-x: scroll;
	display: grid;
	gap: 0;
	grid-template-rows: [column-1] 50px [column-2] 1fr;
}
@media screen and (min-width: 436px) {
	.plan-area {
		width: 100%;
		margin: 20px 0 0 0;
		overflow-x: auto;
	}
}
	.plan-box {
		position: relative;
		width: 210px;
		height: 560px;
		flex-shrink: 0;

		display: grid;
		grid-template-rows: 220px auto 80px 60px 40px;
		gap: 10px;
	}
@media screen and (min-width: 436px) {
		.plan-box {
			position: relative;
			width: calc(100% / 3);
			min-height: 520px;
			/*height: 100%; */
			margin: 0;
			padding: 0;
			grid-template-rows: 220px minmax(100px, auto) minmax(40px, auto) 30px 40px;
		}
}
		.plan-photo {
			grid-row: 1 / 2;
		}
			.plan-photo img {
				width: 100%;
				height: 220px;
				object-fit: cover;
				object-position: 50% 50%;
			}
		.plan-box h2 {
			grid-row: 2 / 3;
		    width: 95%;
		    max-height: 100%;
		    line-height: 1.3;
			font-size: 110%;
		    margin: 0 auto 5px auto;
		    padding: 0;
		    white-space: pre-line;
		}
@media screen and (min-width: 436px) {
		.plan-box h2 {
			font-size: 130%;
			margin: 0 auto 10px auto;
		}
}
/*------------------------------------------------------------
	Gift + Spot
-------------------------------------------------------------*/
.gift-area,
.spot-area {
	width: 95%;
	height: 315px;
	margin: 20px 0 0 5%;
	overflow-x: scroll;
}
@media screen and (min-width: 436px) {
	.gift-area,
	.spot-area {
		width: 100%;
		height: 100%;
		margin: 20px 0 0 0;
		overflow-x: visible;
	}
}
	.gift-area .gift-box,
	.spot-area .spot-box {
		position: relative;
		width: 200px;
		height: 250px;
		flex-shrink: 0;
	}
	.gift-area .gift-box .photo,
	.spot-area .spot-box .photo {
		width: 100%;
		overflow: hidden;
	}
			.gift-area .gift-box .photo img,
			.spot-area .spot-box .photo img {
				width: auto;
				height: 250px;
				object-fit: cover;
				object-position: 50% 50%;
			}
		.gift-area .gift-box .photo h3,
		.spot-area .spot-box .photo h3 {
			position: absolute;
			bottom: 0;
			z-index: 70;
			display: block;
			width: 100%;
			margin: 0;
			padding: 10px;
			box-sizing: border-box;
			font-size: 16px;
			color: #fff;
			font-weight: 400;
			background-color: rgba(104, 71, 54, 0.6);/*#684736;*/
		}

@media screen and (min-width: 436px) {
	.gift-area .gift-box,
	.spot-area .spot-box {
		width: calc(100% / 4);
	}
	.gift-area .gift-box .photo h3,
	.spot-area .spot-box .photo h3 {
		z-index: 90;
	}
}
/*------------------------------------------------------------
	Event
------------------------------------------------------------*/
.event-back {
	position: relative;
	left: 0;
	transform: translateX(0);
	z-index: 0;
	width: 100%;
	height: 390px;
	margin: 20px 0 0 0;
	padding-bottom: 15px;
	padding-top: 15px;
	background: #e6f6f9;/*薄い水色*/
}
	.event-area {
		min-height: 350px;
		margin: 0 15px;
		padding-bottom: 10px;
	}
		.event-area ul {
			width: 100%;
			margin: 10px auto;
			padding: 0;
		}
			.event-area ul li {
				text-align: center;
			}
				.event-area ul li span {
					display: block;
					max-width: 100%;
					padding: 5px 10px;
					margin: 20px auto 10px auto;
					text-align: center;
					color: #fff;
					background: #3b7e8b;
				}
@media screen and (min-width: 436px) and (max-width: 959px) {
	.event-back {
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 210px;
		margin: 30px 0 0 0;
	}
	.event-area {
		width: 90%;
		margin: 0 auto;
	}
	.event-area ul li {
		margin: 0 0 5px 0;
		text-align: left;
	}
		.event-area ul li span {
			display: inline-block;
			margin: 0 10px 0 0;
		}
}
@media screen and (min-width: 960px) {
	.event-back {
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 210px;
	}
		.event-area {
			width: 1024px;
			min-height: 210px;
			margin: 0 auto;
			padding-bottom: 10px;
		}
		.event-area ul li {
			margin: 0 0 5px 0;
			text-align: left;
		}
			.event-area ul li span {
				display: inline-block;
				margin: 0 10px 0 0;
			}
}
/*------------------------------------------------------------
	Featured
-------------------------------------------------------------*/
.featured-area {
	position: relative;
	width: 90%;
	min-height: 100%;
	margin: 20px auto;
}
@media screen and (min-width: 436px) {
	.featured-area {
		width: 100%;
		height: 100%;
		margin: 30px 0 0 0;
	}
}
/*------------------------------------------------------------
	Bottom Banner
------------------------------------------------------------*/
.banner-area {
	width: 90%;
	height: auto;
	margin: 20px auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}
	.banner-area img {
		display: block;
		max-width: 330px;
		height: auto;
		margin: 0 auto;
	}
@media screen and (min-width: 436px) and (max-width: 959px) {
	.banner-area {
		width: 100%;
		height: auto;
		margin: 20px auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, 1fr);
		gap: 15px;
	}
		.banner-area img {
			display: block;
			max-width: 100%;
			height: auto;
			margin: 0 auto;
		}
}
@media screen and (min-width: 960px) {
	.banner-area {
		width: 100%;
		margin: 30px 0;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, 1fr);
	}
}