@charset "utf-8";


/*
	ぷらり！伊達の五感旅。index用CSS
	index.html

	create	20260109-
*/

/* ---------------------------------------------------------
	約560px未満の画面向けスタイル mobile first
--------------------------------------------------------- */



/* header
---------------------------------------- */

/* ----- .mainImage ----- */
main .mainImage {
	margin: 0 15px 20px;
}
main .mainImage  ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
}
main .mainImage  ul li {
	width: 50%;
}
main .mainImage  ul li a {
	width: 100%;
	height: 380px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(0, 0, 0, 0.2);
	background-blend-mode: soft-light;
	position: relative;
	display: block;
}
main .mainImage ul li a span img {
	width: 100%;
}
main .mainImage ul li.tori a {
	background-image: url(../img/top_datedori.jpg);
}
main .mainImage ul li.tori a span {
	width: 154px;
	position: absolute;
	bottom: 30px;
	right: calc(50% - 77px);
}
main .mainImage ul li.gori a {
	background-image: url(../img/top_gorira.jpg);
}
main .mainImage ul li.gori a span:first-of-type {
	width: 100px;
	position: absolute;
	top: 38px;
	right: calc(50% - 50px);
}
main .mainImage ul li.gori a span:last-of-type {
	width: 96px;
	position: absolute;
	bottom: 30px;
	right: calc(50% - 48px);
}
main .mainImage ul li.ino a {
	background-image: url(../img/top_ino.jpg);
}
main .mainImage ul li.ino a span:first-of-type {
	width: 100px;
	position: absolute;
	bottom: 100px;
	right: calc(50% - 50px);
}
main .mainImage ul li.ino a span:last-of-type {
	width: 154px;
	position: absolute;
	bottom: 30px;
	right: calc(50% - 77px);
}
main .mainImage ul li.course a {
	background-image: url(../img/top_model.jpg);
}
main .mainImage ul li.course a span {
	width: 144px;
	position: absolute;
	top: 38px;
	right: calc(50% - 72px);
}



/* main
---------------------------------------- */
/* ----- .mapSection ----- */
main .mapSection {
	margin: 0;
	padding: 50px 15px;
}
main .mapSection h2 {
	width: 234px;
	margin: 0 auto 20px;
}
main .mapSection h2 img {
	width: 100%;
}
main .mapSection .mapBlock {
	margin: 0;
	padding: 0;
	border: 3px solid #000;
	overflow-x: scroll;
}
main .mapSection .mapBlock .mapBox {
	width: 888px;
	height: 680px;
	position: relative;
}
main .mapSection .mapBlock .mapBox .map {
	margin: 0;
	padding: 10px 0 0;
/*	background-color: #F8F6E7; */
	background-color: #FFF;
}
main .mapSection .mapBlock .mapBox .map img {
	height: 666px;
}
main .mapSection .mapBlock .mapBox .area {
	width: 200px;
	position: absolute;
}
main .mapSection .mapBlock .mapBox .area img {
	width: 100%;
}
main .mapSection .mapBlock .mapBox .areaDate {
	top: 20px;
	left: 20px;
}
main .mapSection .mapBlock .mapBox .areaHobara {
	bottom: 20px;
	left: 20px;
}
main .mapSection .mapBlock .mapBox .areaYanagawa {
	top: 20px;
	right: 20px;
}
main .mapSection .mapBlock .mapBox .areaRyozen {
	top: calc(50% - 38px);
	right: 20px;
}
main .mapSection .mapBlock .mapBox .areaTukidate {
	bottom: 20px;
	right: 20px;
}


/* ----- .courseSection ----- */
main .courseSection {
	margin: 0;
	padding: 50px 15px;
	background-color: #fff;
}
main .courseSection h2 {
	width: 300px;
	margin: 0 auto 20px;
}
main .courseSection h2 img {
	width: 100%;
}
main .courseSection ul {
	list-style: none;
	margin: 0 0 30px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}
main .courseSection ul li {
	width: calc(50% - 5px);
}
main .courseSection ul li a {
	width: 100%;
	height: 248px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: 3px solid #000;
	position: relative;
	display: block;
}
main .courseSection ul li a span {
	position: absolute;
}
main .courseSection ul li a span img {
	width: 100%;
}
main .courseSection ul li a span.tori {
	width: 95px;
	bottom: -10px;
	right: -8px;
}
main .courseSection ul li a span.gori {
	width: 111px;
	top: -10px;
	left: -10px;
}
main .courseSection ul li a span.ino {
	width: 111px;
	top: -10px;
	left: 5px;
}
main .courseSection ul li a span.manzoku {
	width: 111px;
	bottom: -15px;
	left: -5px;
}



/* ----- .spotSection ----- */
main .spotSection {
	margin: 0;
	padding: 50px 15px;
}
main .spotSection h2 {
	width: 255px;
	margin: 0 auto 20px;
}
main .spotSection h2 img {
	width: 100%;
}

/* ----- .searchBlock ----- */
main .spotSection .searchBlock {
	width: 300px;
	margin: 0 auto 30px;
	padding: 0;
}
main .spotSection .searchBlock form {
	margin: 0 0 10px;
}
main .spotSection .searchBlock form p {
	width: 100%;
	border: 2px solid #000;
	background-color: #fff;
}
main .spotSection .searchBlock form p input {
	width: calc(100% - 30px);
	padding: 5px;
	border: none;
}
main .spotSection .searchBlock form p .searchBtn {
	width: 20px;
	height: 20px;
	margin: 6px 5px 5px;
	display: inline-block;
}
main .spotSection .searchBlock ul {
	list-style: none;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	gap: 5px;
}
main .spotSection .searchBlock ul li {
	width: calc((100% - 20px) / 5);
}
main .spotSection .searchBlock ul li a {
	color: var(--text-color);
	font-size: 1.4rem;
	text-decoration: none;
	margin: 0;
	padding: 8px 0;
	border: 2px solid #000;
	background-color: #fff;
	display: block;
}
main .spotSection .searchBlock ul li:nth-child(6),
main .spotSection .searchBlock ul li:nth-child(7),
main .spotSection .searchBlock ul li:nth-child(8) {
	width: calc((100% - 10px) / 3);
}
main .spotSection .searchBlock ul li.date a:hover {
	color: #fff;
	background-color: var(--area-date);
	border-color: var(--area-date);
}
main .spotSection .searchBlock ul li.hobara a:hover {
	color: #fff;
	background-color: var(--area-hobara);
	border-color: var(--area-hobara);
}
main .spotSection .searchBlock ul li.yanagawa a:hover {
	color: #fff;
	background-color: var(--area-yanagawa);
	border-color: var(--area-yanagawa);
}
main .spotSection .searchBlock ul li.ryozen a:hover {
	color: #fff;
	background-color: var(--area-ryozen);
	border-color: var(--area-ryozen);
}
main .spotSection .searchBlock ul li.tukidate a:hover {
	color: #fff;
	background-color: var(--area-tukidate);
	border-color: var(--area-tukidate);
}
main .spotSection .searchBlock ul li.cat a:hover {
	color: #fff;
	background-color: var(--cat-taberu);
	border-color: var(--cat-taberu);
}

/* ----- .spotList ----- */
main .spotSection .spotList {
}
main .spotSection .spotList ul {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	gap: 10px;
}
main .spotSection .spotList ul li {
	width: calc((100% - 10px) / 2);
}
main .spotSection .spotList ul li a {
	color: var(--text-color);
	text-decoration: none;
	margin: 0 0 10px;
	display: block;
}
main .spotSection .spotList ul li a .photo {
	width: 100%;
	margin: 0 0 10px;
	padding: 66% 0 0 0;
	border: 2px solid #000;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	overflow: hidden;
}
main .spotSection .spotList ul li a h3 {
	font-size: 1.4rem;
	line-height: 1.3;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-all;
}
main .spotSection .spotList ul li a .setumei {
	font-size: 1.2rem;
	line-height: 1.3;
	text-align: left;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-all;
}
main .spotSection .spotList ul li a h4 {
	font-size: 1.2rem;
	text-align: left;
	margin: 0 0 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	word-break: break-all;
}
main .spotSection .spotList ul li a .catBox {
	display: flex;
	justify-content: left;
	gap: 5px;
}
main .spotSection .spotList ul li a .catBox span {
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0;
	padding: 2px 5px;
	border: 1px solid var(--cat-taberu);
}
main .spotSection .spotList ul li a .catBox span.area1 {
	background-color: var(--area-date);
	border-color: var(--area-date);
}
main .spotSection .spotList ul li a .catBox span.area2 {
	background-color: var(--area-hobara);
	border-color: var(--area-hobara);
}
main .spotSection .spotList ul li a .catBox span.area3 {
	background-color: var(--area-yanagawa);
	border-color: var(--area-yanagawa);
}
main .spotSection .spotList ul li a .catBox span.area4 {
	background-color: var(--area-ryozen);
	border-color: var(--area-ryozen);
}
main .spotSection .spotList ul li a .catBox span.area5 {
	background-color: var(--area-tukidate);
	border-color: var(--area-tukidate);
}
main .spotSection .spotList ul li a .catBox span.cat1 {
	color: var(--cat-taberu);
	background-color: #fff;
	border-color: var(--cat-taberu);
}
main .spotSection .spotList ul li a .catBox span.cat2 {
	color: var(--cat-kau);
	background-color: #fff;
	border-color: var(--cat-kau);
}
main .spotSection .spotList ul li a .catBox span.tori1 {
	color: var(--title-color);
	background-color: #fff;
	border-color: var(--title-color);
}
main .spotSection .spotList ul li a .catBox span.tori2 {
	color: #f08300;
	background-color: #fff;
	border-color: #f08300;
}
main .btnMore a {
	color: #fff;
	font-size: 1.6rem;
	text-decoration: none;
	width: 200px;
	margin: 0 auto;
	padding: 15px 0;
	background-color: var(--title-color);
	display: block;
}



/* footer
---------------------------------------- */



@media screen and (min-width: 375px){
	/*	約375px以上の画面向けスタイル second tablet */

}



@media screen and (min-width: 560px){
	/*	約560px以上の画面向けスタイル second tablet */

	/* header
	---------------------------------------- */
	main .mainImage {
		margin: 10px 15px 20px;
	}
	main .mainImage ul li {
		width: 25%;
	}
	main .mainImage ul li a {
		height: 444px;
	}

	/* main
	---------------------------------------- */
	/* ----- .mapSection ----- */
	main .mapSection h2 {
		width: 284px;
		margin: 0 auto 20px;
	}
	main .mapSection .mapBlock {
		overflow-x: unset;
	}
	main .mapSection .mapBlock .mapBox {
		width: 100%;
		height: auto;
	}
	main .mapSection .mapBlock .mapBox .map img {
		height: 555px;
	}
	main .mapSection .mapBlock .mapBox .area {
		width: 180px;
	}
	main .spotSection .spotList ul li {
		width: calc((100% - 30px) / 4);
	}

	/* ----- .courseSection ----- */
	main .courseSection h2 {
		width: 444px;
		margin: 0 auto 20px;
	}
	main .courseSection ul li {
		width: calc(25% - 8px);
	}

	/* ----- .spotSection ----- */
	main .spotSection .searchBlock {
		width: auto;
	}
	main .spotSection .searchBlock form {
		margin: 0 auto 10px;
		width: 300px;
	}
	main .spotSection h2 {
		width: 333px;
		margin: 0 auto 20px;
	}
	main .spotSection .searchBlock ul {
		justify-content: center;
	}
	main .spotSection .searchBlock ul li {
		width: 80px;
	}
	main .spotSection .searchBlock ul li:nth-child(6),
	main .spotSection .searchBlock ul li:nth-child(7),
	main .spotSection .searchBlock ul li:nth-child(8) {
		width: 80px;
	}
	main .spotSection .spotList ul li a h3 {
		font-size: 1.6rem;
	}
	main .spotSection .spotList ul li a .setumei {
		font-size: 1.4rem;
		margin: 0 0 15px;
	}
	main .spotSection .spotList ul li a h4 {
		font-size: 1.6rem;
	}
	main .spotSection .spotList ul li a .photo {
		border: 4px solid #000;
	}

}



@media screen and (min-width: 740px){
	/*	約740px以上の画面向けスタイル second tablet */

}



@media screen and (min-width: 980px){
	/*	約980px以上の画面向けスタイル pc style */

	/* main
	---------------------------------------- */
	main .mainImage ul li a {
		height: 555px;
	}
	main .spotSection .searchBlock ul li a {
		font-size: 1.6rem;
	}
	main .mapSection .mapBlock {
		border: 4px solid #000;
	}
	main .spotSection .searchBlock ul li a {
		border: 3px solid #000;
	}
}



@media screen and (min-width: 1200px){
	/*	約1200px以上の画面向けスタイル pc style */

	/* header
	---------------------------------------- */
	header {
		padding: 0 calc(50% - 560px);
	}

	/* main
	---------------------------------------- */
	/* ----- .mainImage ----- */
	main .mainImage {
		max-width: 1120px;
		margin: 10px auto 20px;
	}
	main .mainImage ul li a {
		height: 600px;
	}
	main .mainImage ul li.tori a span {
		width: 222px;
		bottom: 58px;
		right: calc(50% - 111px);
	}
	main .mainImage ul li.gori a span:first-of-type {
		width: 132px;
		top: 58px;
		right: calc(50% - 66px);
	}
	main .mainImage ul li.gori a span:last-of-type {
		width: 134px;
		bottom: 58px;
		right: calc(50% - 67px);
	}
	main .mainImage ul li.ino a span:first-of-type {
	width: 150px;
	bottom: 180px;
	right: calc(50% - 75px);
	}
	main .mainImage ul li.ino a span:last-of-type {
		width: 210px;
		bottom: 58px;
		right: calc(50% - 105px);
	}
	main .mainImage ul li.course a span {
		width: 180px;
		top: 58px;
		right: calc(50% - 90px);
	}

	/* ----- .mapSection ----- */
	main .mapSection {
		padding: 80px calc(50% - 512px);
	}
	main .mapSection h2 {
		width: 386px;
		margin: 0 auto 30px;
	}
	main .mapSection .mapBlock .mapBox .map img {
		height: 666px;
	}
	main .mapSection .mapBlock .mapBox .area {
		width: 222px;
	}

	/* ----- .courseSection ----- */
	main .courseSection {
		padding: 80px calc(50% - 512px);
	}
	main .courseSection h2 {
		width: 494px;
		margin: 0 auto 30px;
	}
	main .courseSection ul li {
		width: calc(25% - 16px);
	}
	main .courseSection ul {
		gap: 20px;
	}
	main .courseSection ul li a {
		height: 400px;
	}
	main .courseSection ul li a span.gori {
		width: 150px;
	}
	main .courseSection ul li a span.tori {
		width: 130px;
	}
	main .courseSection ul li a span.ino {
		width: 150px;
	}
	main .courseSection ul li a span.manzoku {
		width: 150px;
	}
	
	/* ----- .spotSection ----- */
	main .spotSection {
		padding: 80px calc(50% - 512px);
	}
	main .spotSection h2 {
		width: 444px;
		margin: 0 auto 10px;
	}
	main .spotSection .spotList ul {
		gap: 20px;
	}
	main .spotSection .searchBlock ul li a {
		font-size: 1.6rem;
	}
	main .spotSection .spotList ul li {
		width: calc((100% - 60px) / 4);
	}
	main .spotSection .spotList ul li a h3 {
		font-size: 2rem;
	}
	main .spotSection .spotList ul li a .setumei {
		font-size: 1.6rem;
	}
	main .spotSection .spotList ul li a .catBox span {
		font-size: 1.4rem;
		padding: 5px 8px;
	}
	main .btnMore a {
		width: 300px;
	}

}



@media screen and (min-width: 1366px){
	/*	約1200px以上の画面向けスタイル pc style */

	/* header
	---------------------------------------- */
	header {
		padding: 0 calc(50% - 660px);
	}

	/* main
	---------------------------------------- */
	/* ----- .mainImage ----- */
	main .mainImage {
		max-width: 1200px;
		margin: 10px auto 20px;
	}
	main .mainImage ul li a {
		height: 612px;
	}

	/* ----- .mapSection ----- */
	main .mapSection {
		padding: 80px calc(50% - 600px);
	}

	/* ----- .courseSection ----- */
	main .courseSection {
		padding: 80px calc(50% - 600px);
	}

	/* ----- .spotSection ----- */
	main .spotSection {
		padding: 80px calc(50% - 600px);
	}

}