@charset "utf-8";

article {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #1c1c1c;
	font-size: 16px;
	line-height: 1.618;
	padding: 0;
}

.tx_pink{
	color: #E4007F;
}
.tx_red{
	color: #E40000;
}
.tx_blue{
	color: #026FDB;
}
.tx_bold{
	font-weight: bold;
}

#detail{
	width: 100%;
	margin: 0;
	padding: 0;
	background: #EFEFEF;
}
#detail h1{
	max-width: 1920px;
	margin: 0 auto;
}
#detail p{
	padding: 32px 16px;
	font-size: 18px;
}
#detail .row{
	align-items: center;
	padding-bottom: 40px;
}
#detail .row .col-12{
	margin-bottom: 16px;
}
.detail_box{
	height: 100%;
	background: #fff;
	border: 1px solid #DFDFDF;
	border-radius: 16px;
	padding: 32px 0;
}
.detail_box img{
	display: block;
	margin: 0 auto 24px;
}
.detail_box span{
	font-size: 18px;
	font-weight: bold;
}
.conditions{
	background: #F8F8F8;
	padding: 48px 0;
}
.w_bicolor_bb{
	display: table;
	margin: 0 auto 40px;
	font-weight: bold;
	font-size: 20px;
	position: relative;
	padding-bottom: 16px;
}
.w_bicolor_bb:before{
	content: '';
	display: block;
	position: absolute;
	width: calc(100% + 2em);
	height: 5px;
	background-image: linear-gradient(to right, #E4007F 50%, #1C1C1C 50%);
	left: -1em;
	bottom: 0;
}
.conditions .col-12{
	margin-bottom: 16px;
}
.condi_box{
	background: #fff;
	border: 1px solid #DFDFDF;
	border-radius: 16px;
	padding: 24px 16px;
	text-align: center;
	height: 100%;
}
.condi_box h3{
	font-size: 20px;
	font-weight: bold;
	margin: 8px 0 16px;
}
.condi_box p{
	display: inline-block;
	text-align: left;
}
.condi_box a{
	text-decoration: underline;
}
.kome{
	position: relative;
	padding-left: 1em;
}
.kome:before{
	content: '※';
	position: absolute;
	left: 0;
}
.condi_box .kome{
	font-size: 0.8em;
	margin-top: 8px;
}
.condi_box ul{
	margin: 16px 0 40px;
	text-align: left;
}
.condi_box ul li{
	padding-left: 1em;
	position: relative;
	font-size: 14px;
}
.condi_box ul li:before{
	content: '・';
	position: absolute;
	left: 0;
}
.example h4{
	font-size: 14px;
	font-weight: bold;
	position: relative;
	padding-left: 1.5em;
	display: table;
	margin: 0 auto 16px;
}
.example h4:before{
	content: '';
	display: block;
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 3px;
	background: #1c1c1c;
	left: 0;
}
.exam_box{
	display: flex;
	flex-wrap: wrap;
}
.exam_box > div{
	width: 100%;
	font-weight: bold;
}
.day{
	border-radius: 10px;
	overflow:hidden;
	border: 2px solid #1C1C1C;
	padding: 0 0 16px;
}
.day h5{
	color: #fff;
	font-size: 18px;
	background: #1c1c1c;
	padding: 4px;
	margin-bottom: 16px;
	font-weight: bold;
}
.day_before{
	border-color: #E4007F;
}
.day_before h5{
	background: #E4007F;
}
.day_after{
	border-color: #026FDB;
}
.day_after h5{
	background: #026FDB;
}
.day p{
	font-size: 14px;
	text-align: center;
}
.change{
	margin: 4px 0;
	height: 44px;
	position: relative;
	padding-left: calc(50% + 32px);
	text-align: left;
}
.change:before{
	content: '';
	display: block;
	position: absolute;
	width: 50px;
	height: 44px;
	background: url(/static/img/feature/bus-change/arrow_v.svg) 50% 50% no-repeat;
	background-size: contain;
	top: 0;
	left: calc(50% - 22px);
}
.c_after:before{
	transform: rotate(180deg);
}
.change p{
	display: flex;
	align-items: center;
	height: 100%;
}
.example .kome{
	margin: 16px auto 0;
}
.condition_atten{
	text-align: center;
	margin-top: 32px;
}
.condition_atten h4{
	font-size: 18px;
	font-weight: bold;
	position: relative;
	display: table;
	margin: 0 auto 32px;
}
.condition_atten h4:before,
.condition_atten h4:after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	width: 22px;
	height: 20px;
	background: url(/static/img/feature/bus-change/icn_attention.svg) 50% 50% no-repeat;
	background-size: contain;
}
.condition_atten h4:before{
	left: -2em;
}
.condition_atten h4:after{
	right: -2em;
}
.condition_atten p{
	font-size: 14px;
}

.attention{
	background: #EFEFEF;
	padding: 48px 0;
}
.notes_box{
	background: #ffffff;
	padding: 40px 16px;
	border-radius: 16px;
}
.notes_box h3{
	font-size: 16px;
	font-weight: bold;
	display: table;
	position: relative;
	padding-left: 1.5em;
	margin: 0 auto 24px;
}
.notes_box h3:before{
	content: '';
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: #E4007F;
	top: -1px;
	left: 0;
}
.notes_box li{
	font-size: 14px;
	position: relative;
	padding-left: 1em;
	margin-bottom: 0.618em;
}
.notes_box li:before{
	content: '・';
	position: absolute;
	left: 0;
}
.notes_box li br{
	display: none;
}
@media (min-width:768px) {
	#detail .row,
	.conditions .row{
		align-items: stretch;
	}
	#detail .row .col-md-10{
		margin-bottom: 30px;
	}
	.conditions .col-12{
		margin-bottom: 30px;
	}
	.condi_box ul{
		display: inline-block;
	}
	.notes_box h3{
		display: block;
	}
}
@media (min-width:992px) {
	#detail .row .col-md-10{
		margin-bottom: 16px;
	}
	.condi_box{
		position: relative;
		text-align: left;
		padding-left: 96px;
	}
	.condi_box img{
		position: absolute;
		top: 20px;
		left: 20px;
	}
	.condi_box ul{
		display: block;
	}
	.example h4{
		display: block;
	}
	.exam_box{
		align-items: stretch;
	}
	.exam_box > .day{
		width: auto;
	}
	.day h5{
		text-align: center;
	}
	.day p{
		padding: 0 16px;
	}
	.exam_box > .change{
		padding: 0;
		width: 64px;
		height: auto;
		margin: 0;
	}
	.change:before{
		content: '';
		display: block;
		position: absolute;
		background: url(/static/img/feature/bus-change/arrow_h.svg) 50% 50% no-repeat;
		background-size: contain;
		width: 88px;
		height: 58px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.change.c_after:before{
		transform: translate(-50%, -50%) rotate(180deg);
	}
	.change p{
		display: block;
		color: #fff;
		width: 88px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: 13px;
		text-align: center;
	}
	.example .kome{
		margin: 16px 0;
		width: 100%;
	}
	.notes_box{
		padding: 64px 40px;
	}
	.notes_box li br{
		display: inline;
	}
}
@media (min-width:1200px){
	.notes_box{
		padding: 64px;
	}
}