@charset "UTF-8";
/* ============================
access_kyoto.css　もくじ
-------------------------------
1.ブレイクポイント
2.access_kyoto全体
3.access_kyoto_headline
4.access_kyoto_access
5.access_kyoto_route_guidance
============================== */


/* ===========================
1.ブレークポイント
============================== */
@media screen and (min-width: 20em) { /* 320px */
}
@media screen and (min-width: 23em) { /* 368px */
}
@media screen and (min-width: 25em) { /* 400px */
}
@media screen and (min-width: 30em) { /* 480px */
}
@media screen and (min-width: 40em) { /* 640px */
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
}
@media screen and (min-width: 64em) {/* 1024px */
}
@media screen and (min-width: 80em) {/* 1280px */
}
/* ===========================
2.access_kyoto全体
============================== */
section {
	margin: 0 20px 40px;
	width: auto;
	overflow: hidden;
}
section h2 {
	margin: 0 0 25px;
	font-size: 1.75rem;
	color: #801A00;
}
section h2 span {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 1.15rem;
	font-weight: normal;
	color: #000;
}
section p {
	font-size: 0.875rem;
	line-height: 1.5;
}
section li {
	word-break: break-all;
}


@media screen and (min-width: 40em) { /* 640px */
	.mb {
		display: none;
	}
}

@media screen and (min-width: 40em) { /* 640px */
	section h2 {
		font-size: 2.125rem;
	}
	section h2 span {
		font-size: 1.5rem;
	}
	section p {
		font-size: 1rem;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	section {
		margin: 0 auto 60px;
		width: auto;
		max-width: 960px;
	}
}
/* ===========================
3.access_kyoto_headline
============================== */
#access_kyoto_headline {
	height: 140px;
	margin: 0 0 50px;
	overflow: hidden;
	background: url(../img/access_kyoto/access_kyoto_headline.jpg) center top no-repeat;
	background-size:cover;
}
#access_kyoto_headline h1 {
	margin: 0 20px;
	padding: 10px 0 0;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: 0.3em;
	color: #fff;
}
#access_kyoto_headline ul {
	margin: 5px 20px 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #fff;
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#access_kyoto_headline {
		height: 200px;
	}
	#access_kyoto_headline h1 {
		padding: 20px 0 0;
		position: relative;
		right: 0;
		font-size: 2.125rem;
		animation: headline-h1 2s ease;
	}
	#access_kyoto_headline ul {
		margin: 10px 20px 0;
		position: relative;
		right: 0;
		font-size: 1rem;
		animation: headline-ul 2s ease;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#access_kyoto_headline h1 {
		margin: 0 auto;
		width: auto;
		max-width: 960px;
	}
	#access_kyoto_headline ul {
		margin: 10px auto 0;
		width: auto;
		max-width: 960px;
	}
}
@keyframes headline-h1 {
	0% {right: -300px; opacity: 0;}
	20% {opacity: 0;}
	50% {right: 0; opacity: 1;}
}
@keyframes headline-ul {
	0% {right: -300px; opacity: 0;}
	35% {opacity: 0;}
	65% {right: 0; opacity: 1;}
}
/* ============================
4.access_kyoto_access
============================== */
#access_kyoto_access {
	margin: 0 0 40px;
}
#access_kyoto_access h2 {
	margin: 0 20px 28px;
}
#access_kyoto_access div {
	width: 100%;
}
#access_kyoto_access iframe {
	width: 100%;
	height: 350px;
}

#kyoto_address {
	padding: 0 20px 28px;
}
#kyoto_address li {
	font-size: 1.15rem;
}
#kyoto_address .kyoto_address_number span {
	display: inline-block;
	margin-right: 0.5rem;
}

@media screen and (min-width: 40em) { /* 640px */
	#access_kyoto_access iframe {
		height: 450px;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#access_kyoto_access {
		margin: 0 auto 60px;
	}
	#access_kyoto_access h2 {
		margin: 0 auto 35px;
		width: auto;
		max-width: 960px;
	}
	#access_kyoto_access div  {
		display: flex;
		justify-content: space-between;
	}

	#access_kyoto_access #kyoto_address {
		width: 300px;
		height: auto;
		padding: 0;
	}
	#kyoto_address ul {
		display: flex;
		flex-direction: column;
	}
	#kyoto_address li {
		font-size: 1rem;
	}
	#kyoto_address .kyoto_address_number span {
		display: block;
		margin-right: 0;
		font-size: 1.75rem;
	}

	#access_kyoto_access #kyoto_googlemap {
		max-width: 620px;
		height: 317px;
	}
}

/* ============================
5.access_kyoto_route_guidance
============================== */
#route_guidance ul{
	display: flex;
	flex-direction: column;
	counter-reset: count 0;
}
#route_guidance li {
	margin-bottom: 3rem;
}
#route_guidance li img {
	width: 100%;
	height: auto;
}
#route_guidance li p {
	position: relative;
	margin: 0.25rem 0 0 3rem;
	min-height: 36px;
}
#route_guidance li p::before {
	position: absolute;
	top: 0;
	left: -3rem;
	width: 32px;
	height: 32px;
	border: 2px solid #801A00;
	border-radius: 17px;
	text-align: center;
	line-height: 32px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #801A00;
	counter-increment: count 1;
	content: counter(count);
	display: block;
}
@media screen and (min-width: 40em) { /* 640px */
	#route_guidance ul {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#route_guidance li {
		width: calc(50% - 10px);
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#route_guidance li {
		width: calc(50% - 20px);
		margin-bottom: 5rem;
	}
	#route_guidance li p {
		font-size: 1.2rem;
	}
}