@charset "utf-8";

:root {
	--color-main: #009fb9;
}



/*-----------------------------------------------------------------------------------------------*/
/* 瀬戸内国際芸術祭2025（コース） ---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.body a { color: var(--color-main); }
.body a:hover { color: #000; }

.body .sns,
.body .itemlist.relation { display: none; }

.body .wrapper { max-width: 680px; }

.body .indent {
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}

.body a.win,
.body a.insta {
	display: inline-block;
	padding-left: 18px;
	position: relative;
}
.body a.win::before,
.body a.insta::before {
	background-color: var(--color-main);
	-webkit-mask-size: 13px auto;
	mask-size: 13px auto;
	content: "";
	height: 13px;
	position: absolute;
	top: 2px;
	left: 0;
	transition: background-color 0.2s ease-out;
	width: 13px;
}
.body a.win::before {
	-webkit-mask-image: url("../images/icon_win.svg");
	mask-image: url("../images/icon_win.svg");
}
.body a.insta::before {
	-webkit-mask-image: url("../images/icon_insta.svg");
	mask-image: url("../images/icon_insta.svg");
}
.body a.win:hover::before,
.body a.insta:hover::before { background-color: #000; }


/* 見出し ---------------------------------------------------------------------------------------*/
.body .midashi .wrapper { width: 100%; }
.body .midashi h1,
.body .midashi .read {
	padding: 0 5%;
	max-width: 850px;
}
.body .midashi h1 {
	background-color: var(--color-main);
	color: #fff;
	font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", "Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 2.4rem;
	line-height: 1;
	padding-top: 100px;
	padding-bottom: 20px;
}
.body .midashi .read {
	font-size: 1.6rem;
	line-height: 1.6;
	margin-top: 20px;
	text-align: justify;
}

/* コンテナー */
.body .container {
	margin-top: 54px;
	padding-top: 66px;
}
.body .container:first-of-type,
.body .container.art + .container { padding-top: 0; }

.body .container.move + .container.move {
	margin-top: 0;
	padding-top: 0;
}

/* コンテンツ */
.body .container.move .contents {
	padding-bottom: 40px;
	position: relative;
}
.body .container.move .contents::before {
	background-color: #000;
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	left: 20px;
	width: 1px;
	z-index: -1;
}

.body .container.move .contents.last::before { content: none; }

/* 駅、港 */
.body .station {
	border: #000 solid 2px;
	background-color: #000;
	color: #fff;
	display: flex;
	justify-content: space-between;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1;
	padding: 8px 10px 7px;
}


/* Tips -----------------------------------------------------------------------------------------*/
.body .tips {
	margin-top: 20px;
	padding-left:40px;
}

/* ボタン */
.body .tips .button {
	padding-top: 68px;
	position: relative;
}
.body .tips .button::after {
	background-color: var(--color-main);
	border-radius: 50%;
	content: "";
	height: 29px;
	position: absolute;
	top: calc(50% + 34px);
	right: 10px;
	transform: translateY(-50%);
	width: 29px;
}

.body .tips .category {
	background-color: var(--color-main);
	background-image: url("../images/icon_tips.svg");
	background-size: 100% auto;
	border-radius: 50%;
	color: #fff;
	font-size: 1.4rem;/*1.8rem;*/
	font-weight: 600;
	height: 78px;/*98px;*/
	padding-top: 12px;/*15px;*/
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 78px;/*98px;*/
	z-index: 1;
}

.body .tips .catch {
	background-color: #dbf2f5;
	border-radius: 15px;
	color: var(--color-main);
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 600;
	min-height: 64px;
	padding: 13px 50px 10px 15px;
	position: relative;
	text-align: justify;
}
.body .tips .catch::before,
.body .tips .catch::after {
	background-color: #fff;
	content: "";
	height: 2px;
	position: absolute;
	top: 50%;
	right: 17px;
	transform: translateY(-50%);
	width: 15px;
	z-index: 1;
}
.body .tips .catch::after {
	top: calc(50% - 1px);
	transform: rotate(90deg);
	transition: transform 0.2s ease-out;
}
.body .tips .active .catch::after { transform: rotate(180deg); }

/*.body .tips .catch br { display: none; }*/


/* スポット -------------------------------------------------------------------------------------*/
.body .spot {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s linear;
}

.body .spot > ul {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
}
.body .spot > ul li:first-child { margin-top: 40px; }
.body .spot > ul li:last-child { padding-bottom: 90px; }

.body .spot > ul li.soon {
	font-size: 1.8rem;
	padding-left: 20px;
}

.body .spot .image { position: relative; }
.body .spot .image span {
	display: block;
	font-size: 1.1rem;
	margin-top: 5px;
	position: absolute;
	text-align: right;
	width: 100%;
}

.body .spot .title {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
.body .spot .text {
	flex: 1;
	margin-right: 10px;

	display: flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: space-between;
}

.body .spot .wide {
	margin-top: 40px;
	padding-bottom: 90px;
}
.body .spot > ul + .wide { margin-top: -50px; }

/* 場所 */
.body .spot .place {
	background-color: var(--color-main);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	padding: 4px 1em 3px;
}

/* 名前 */
.body .spot .name {
	font-size: 1.8rem;
	font-weight: 600;
	margin-top: 10px;
}
.body .spot .name span { font-size: 1.2rem; }

/* 時間 */
.body .spot .time {
	background-color: var(--color-main);
	border-radius: 50%;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	height: 70px;
	margin-bottom: 10px;
	padding-top: 13px;
	text-align: center;
	width: 70px;
}
.body .spot .time .minute {
	font-size: 1.2rem;
	line-height: 1;
}
.body .spot .time .minute span {
	font-size: 2.0rem;
	padding-right: 2px;
}

/* コメント */
.body .spot .comment {
	font-size: 1.4rem;
	line-height: 1.6;
	margin-top: 10px;
	text-align: justify;
}

/* サイト */
.body .spot .site { margin-top: 10px; }

/* スライド */
.body .spot .images { margin-top: 30px; }


/* 移動 -----------------------------------------------------------------------------------------*/
.body .transport {
	margin-top: 40px;
	margin-left: 40px;
	padding-left: 60px;
	position: relative;
}
.body .transport::before {
	background-image: url("../images/icon_jr.svg");
	background-size: 100% auto;
	content: "";
	height: 58px;/*73px;*/
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 44px;/*45px;*/
}

.body .transport .name {
	font-size: 1.6rem;
	font-weight: 600;
}

.body .transport .site { margin-top: 5px; }


/* カラー ---------------------------------------------------------------------------------------*/
.body .container.move .contents.ferry::before { background-color: var(--color-main); }
.body .ferry .station {
	background-color: #fff;
	border-color: var(--color-main);
	color: var(--color-main);
}
.body .ferry .transport::before { background-image: url("../images/icon_ferry.svg"); }

.body .bus .transport::before { background-image: url("../images/icon_bus.svg"); }


/* アート作品 -----------------------------------------------------------------------------------*/
.body .container.art {
	background-color: #ebf2f7;
	margin-top: 0;
	padding: 40px 0;
}

/* 見出し */
.body .art h2 {
	color: var(--color-main);
	font-size: 1.8rem;
	font-weight: 600;
}

/* コンテンツ */
.body .art .contents { margin-top: 40px; }
.body .art .contents:first-of-type { margin-top: 20px; }

.body .art .contents h3 {
	background-color: var(--color-main);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	padding: 8px 10px 7px;
}

.body .art .contents ul {
	margin-top: 10px;
	font-weight: 600;
}
.body .art .contents li {
	margin-top: 5px;
	padding-left: 1em;
	text-indent: -1em;;
}

.body .art .contents .image { margin-top: 20px; }
.body .art .contents .image span {
	display: block;
	font-size: 1.2rem;
	margin-top: 5px;
}

.body .art .notes {
	line-height: 1.6;
	margin-top: 40px;
}
.body .art .notes p { margin-top: 40px; }
.body .art .notes a {
	display: inline-block;
	line-height: 1.3;
	margin-top: 5px;
}


/* マップ ---------------------------------------------------------------------------------------*/
/* 見出し */
.body .map h2 {
	font-size: 1.8rem;
	font-weight: 600;
}

/* マップ */
.body .map .googlemap { margin-top: 10px; }
.body .map .googlemap iframe {
	display: block;
	height: 420px;
	width: 100%;
}
.wpgmza_infowindow_address { display: none; }

/* 注釈 */
.body .map .notes { margin-top: 40px; }
.body .map .notes li {
	font-size: 1.4rem;
	line-height: 1.6;
	margin-top: 5px;
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}

/* 混雑状況 */
.body .map .emergency {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.6;
	margin-top: 60px;
	text-align: justify;
}

.body .map .emergency .site {
	font-weight: 500;
	margin-top: 10px;
}
.body .map .emergency .site a::before { top: 5px; }


/* 宇野港エリア芸術祭シャトルバス ---------------------------------------------------------------*/
.body .transport.shuttlebus::before {
	background-image: url("../images/icon_bus2.svg");
	top: -10px;
	transform: translateY(0);
}
.body .transport.shuttlebus .comment,
.body .transport.shuttlebus .site { margin-top: 10px; }
.body .transport.shuttlebus .comment {
	line-height: 1.4;
	text-align: justify;
}
.body .transport.shuttlebus .images a {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}


/* ロッカーコンシェルジュ -----------------------------------------------------------------------*/
.body .transport.locker {
	margin-top: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
}
.body .transport.locker::before { content: none; }
.body .transport.locker .comment {
	margin-top: 10px;
	text-align: justify;
}
.body .transport.locker .comment.notes {
	padding-left: 1em;
	text-indent: -1em;
}
/*-----------------------------------------------------------------------------------------------*/










@media(min-width: 530px) {
	/* Tips -----------------------------------------------------------------------------------------*/
	.body .tips:not(:first-of-type) { margin-top: 30px; }
	/* ボタン */
	.body .tips .button { padding-top: 0; }
	.body .tips .button::after { top: calc(50%); }
	.body .tips .category {
		top: 50%;
		transform: translateY(-50%);
	}
	.body .tips .catch {
		margin-left: 39px;
		padding-left: 49px;
	}
	.body .tips .catch br { display: inline	; }
	/* 宇野港エリア芸術祭シャトルバス ---------------------------------------------------------------*/
	.body .transport.shuttlebus .images a { flex-direction: row; }
}





@media(min-width: 768px) {
	/* Tips -----------------------------------------------------------------------------------------*/
	.body .tips .catch br.sp { display: none; }
	/* スポット -------------------------------------------------------------------------------------*/
	.body .spot > ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 40px 20px;
	}
	.body .spot > ul li { width: calc((100% - 20px) / 2); }
	.body .spot > ul li:nth-child(2) { margin-top: 40px; }
	/* アート作品 -----------------------------------------------------------------------------------*/
	/* コンテンツ */
	.body .art .contents {
		margin-top: 60px;
		display: flex;
		column-gap: 20px;
	}
	.body .art .contents .text { flex: 1; }
	.body .art .contents .image {
		margin-top: 0;
		width: 57%;
	}
}





@media(min-width: 1024px) {
	/* スポット -------------------------------------------------------------------------------------*/
	.body .spot { gap: 60px 40px; }
	.body .spot > ul li { width: calc((100% - 40px) / 2); }
}