@charset "utf-8";

/* -----------------------------------------
	エマージェンシー
----------------------------------------- */

#mainContents .container.emergency {
	padding-top: 50px;
}

.emergency .emergency_list01,
.emergency .emergency_list03 {
	margin-bottom: 30px;
}

.emergency .emergency_list01 li,
.emergency .emergency_list03 li {
	border-bottom: 1px solid #ddd;
	padding: 15px 20px;
	font-size: 1.3rem;
}
.emergency .emergency_list01 li.link,
.emergency .emergency_list03 li.link {
	border-bottom: 1px solid #ddd;
	padding: 0;
}

.emergency .emergency_list01 li.link a,
.emergency .emergency_list03 li.link a {
	display: block;
	font-size: 1.3rem;
	padding: 15px 20px;
	position: relative;
	color: #333;
}

.emergency .emergency_list01 li.link a:before,
.emergency .emergency_list03 li.link a:before {
	content: none;
}

.emergency .emergency_list01 li.caution,
.emergency .emergency_list03 li.caution {
	background: #fef2f2;
}

.emergency .emergency_list01 li.link a:after,
.emergency .emergency_list03 li.link a:after {
	content: "";
	display: block;
	background: url(/material/img/ico_link.svg) no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
}

.emergency .emergency_list01 li.info_box{
	border:solid 1px #FF0000 !important;
    background: #FFFFFF; 
    padding: 15px 20px; 
    font-size: 1.3rem; 
    margin-top:10px; 
    color:#FF0000;
}

.emergency .emergency_list01 li.link,
.emergency .emergency_list03 li.link {
	border-bottom: 1px solid #ddd;
	padding: 0;
}

.emergency .emergency_list02 {
	border: 1px solid #ddd;
	margin-bottom: 30px;
}
.emergency .emergency_list02 .emergency_list02_title {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 15px 20px;
}

.emergency .emergency_list02 .emergency_list02_list li {
	padding: 15px 20px;
	font-size: 1.3rem;
}

.emergency .emergency_list02 .emergency_list02_list li.caution,
.emergency .emergency_list02 .emergency_list02_list li.caution a {
	background: #fef2f2;
	color: #eb0000;
}
.emergency .emergency_list02 .emergency_list02_list li:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

.emergency .emergency_list02 .emergency_list02_list li.link {
	padding: 0;
}
.emergency .emergency_list02 .emergency_list02_list li.link a {
	display: block;
	font-size: 1.3rem;
	padding: 15px 20px;
	position: relative;
	color: #333;
}

.emergency .emergency_list02 .emergency_list02_list li.link.caution a {
	color: #eb0000;
}

.emergency .emergency_list02 .emergency_list02_list li.link a:before {
	content: none;
}

.emergency .emergency_list02 .emergency_list02_list li.link a:after {
	content: "";
	display: block;
	background: url(/material/img/ico_link.svg) no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
}

.emergency .emergency_list02 .emergency_list02_list li.blank a:after {
	content: "";
	display: block;
	background: url(/material/img/ico_blank.svg) no-repeat;
	background-size: contain;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
}

.emergency .emergency_list02 .emergency_list02_list li.blank a .pdfLink:after {
	content: "";
	display: inline-block;
	background: url(/material/img/ico_pdf.svg) no-repeat;
	background-size: contain;
	width: 12px;
	height: 12px;
	vertical-align: middle;
	margin-left: 5px;
}

.emergency .emergency_list01 li.link a:hover,
.emergency .emergency_list02 .emergency_list02_list li a:hover,
.emergency .emergency_list03 li.link a:hover{
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	transition-duration: .2s;
}

/* -----------------------------------------
	コンテンツメニュー
----------------------------------------- */

.top_contentsList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 70px;
}

.top_contentsList > li {
	max-width: 460px;
	width: 49%;
	margin-bottom: 30px;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.top_contentsList > li .top_contentsList_image {
	position: relative;
}

.top_contentsList > li .top_contentsList_image:before {
	content: "";
	display: block;
	background-size: contain;
	width: 90px;
	height: 90px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.top_contentsList > #top_train .top_contentsList_image:before {background: url(/material/img/ico_cont_train.svg) no-repeat;}
.top_contentsList > #top_travel .top_contentsList_image:before {background: url(/material/img/ico_cont_travel.svg) no-repeat;}
.top_contentsList > #top_service .top_contentsList_image:before {background: url(/material/img/ico_cont_service.svg) no-repeat;}
.top_contentsList > #top_suica .top_contentsList_image:before {background: url(/material/img/ico_cont_suica.svg) no-repeat;}
.top_contentsList > #top_company .top_contentsList_image:before {background: url(/material/img/ico_cont_company.svg) no-repeat;}
.top_contentsList > #top_adopt .top_contentsList_image:before {background: url(/material/img/ico_cont_adopt.svg) no-repeat;}


.top_contentsList > li .top_contentsList_h a {
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	padding: 15px 0;
	border-bottom: 1px solid #ddd;
	position: relative;
}

.top_contentsList > li .top_contentsList_h a:hover {
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	transition-duration: .2s;
}

.top_contentsList > li .top_contentsList_h a:after {
	content: "";
	display: block;
	background: url(/material/img/ico_link.svg) no-repeat;
	background-size: contain;
	width: 7px;
	height: 11px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 10px;
}

.top_contentsList > li .top_contentsList_list {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.top_contentsList > li .top_contentsList_list > li {
	position: relative;
	margin:0 30px 10px 0;
}

.top_contentsList > li .top_contentsList_list > li a:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 15px solid #e2f3e2;
	position: absolute;
	right: -35px;
	top: 0;
	bottom: 0;
	margin: auto;
}


.top_contentsList > li .top_contentsList_list > li a {
	display: block;
	background: #e2f3e2;
	color: #333;
	text-decoration: none;
	padding: 10px;
	font-size: 1.3rem;
}

.top_contentsList > li .top_contentsList_list > li a:hover {
	background: #008803;
	color: #fff;
}

.top_contentsList > li .top_contentsList_list > li a:hover:after  {
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 15px solid #008803;
}

/* -----------------------------------------
	お知らせ一覧
----------------------------------------- */

.informationBox {
	padding-bottom: 80px;
}

.informationBox .info_list {
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}

.informationBox .info_list li {
	padding: 10px 20px;
	border-bottom: 5px solid #ddd;
	font-weight: bold;
	color: #333;
	font-size: 1.8rem;
	cursor: pointer;
	transition-duration: .2s;
	transition-timing-function:ease-out;
}


.informationBox .info_list li.active {
	color: #008803;
	border-bottom: 5px solid #008803;
	transition-duration: .2s;
	transition-timing-function:ease-out;
}

.informationBox .tabCont {display: none;transition-duration: .2s;}
.informationBox .tabCont.on {display: block;transition-duration: .2s;}



.informationBox > p.active {
	color: #008803;
	border-bottom: 5px solid #008803;
	transition-duration: .2s;
	transition-timing-function:ease-out;
}

.informationBox .sp_title {display: none;}


.informationBox .cont_list {
	margin-bottom: 30px;
}

.informationBox .cont_list li {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 15px 20px;
	border-top: 1px solid #ddd;
	position: relative;
}

.informationBox .cont_list li:last-child {
	border-bottom: 1px solid #ddd;
}

.informationBox .cont_list li > .date {
	font-weight: bold;
	margin-right: 15px;
	width: 120px;
}

.informationBox .cont_list li > .icon {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 135px);
}


.informationBox .cont_list li > .icon span {
	margin-right: 5px;
	margin-bottom: 5px;
}

.informationBox .cont_list li > .icon .area {
	background: #333;
	color: #fff;
	padding: 2px 5px;
	font-size: 1.2rem;
}

.informationBox .cont_list li > .icon .genre {
	background: #ddd;
	color: #333;
	padding: 2px 5px;
	font-size: 1.2rem;
}
.informationBox .cont_list li > .icon .presi {
	background: #E0DEBC;
	color: #333;
	padding: 2px 5px;
	font-size: 1.2rem;
}

.informationBox .cont_list li .text {
	display: block;
	width: 100%;
	margin-top: 10px;
}

.informationBox .cont_list li:after {
	content: "";
	display: block;
	background: url(/material/img/ico_link.svg) no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
}

.informationBox .cont_list li.blank:after {
	content: "";
	display: block;
	background: url(/material/img/ico_blank.svg) no-repeat;
	background-size: contain;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
}

.informationBox .cont_list li.pdf .text a:after {
	content: "";
	display: inline-block;
	background: url(/material/img/ico_pdf.svg) no-repeat;
	background-size: contain;
	width: 12px;
	height: 12px;
	vertical-align: middle;
	margin-left: 5px;
}



.informationBox .cont_btn {
	width: 200px;
	margin: 0 auto;
}
.informationBox .cont_btn a {
	display: block;
	text-align: center;
	background: #008803;
	color: #fff;
	padding: 10px 20px;
	font-weight: bold;
	border-radius: 5px;
	text-decoration: none;
}

.informationBox .cont_btn a:hover {
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.5);
	transition-duration: .2s;
}

/*イベント・キャンペーン*/
.informationBox #tab_eventCampaign .eventCampaignList {
	display: flex;
	flex-wrap: wrap;
}

.informationBox #tab_eventCampaign .eventCampaignList li {
	width: 23%;
	margin-right: 2.6%;
	margin-bottom: 20px;
}

.informationBox #tab_eventCampaign .eventCampaignList li:nth-child(4n) {
	margin-right: 0;
}

.informationBox #tab_eventCampaign .eventCampaignList li a {
	display: block;
	height: 100%;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.informationBox #tab_eventCampaign .eventCampaignList li a:hover {
	transition-duration: .2s;
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2);
	text-decoration: none;
}
.informationBox #tab_eventCampaign .eventCampaignList li a:hover img {
	opacity: 1;
}

.informationBox #tab_eventCampaign .eventCampaignList li a .cmp_date {
	color: #333;
	padding: 10px;
	font-weight: bold;
}


/*重要なお知らせ*/
.informationBox #tab_important .cont_list .text {
	width: calc(100% - 135px);
	margin-top: 0;
}


/*---------------------------
動画・SNS情報
-----------------------------*/

.top_socialInfo {
	padding-bottom: 80px;
}

.top_socialInfo .youtube {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

.top_socialInfo .youtube li {
	width: 49%;
	max-width: 460px;
	background: #fff;
	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
}

.top_socialInfo .youtube li .title {
	padding: 20px;
}

.top_socialInfo .youtube .video a {
	display: block;
	position: relative;
}
.top_socialInfo .youtube .video a:hover:before {
	content: "";
	display: block;
	background-color: rgba(0,0,0,0.4);
	position: absolute;
	width: 100%;
	height: 100%;
}
.top_socialInfo .youtube .video a:hover:after {
	content: "";
	position: absolute;
	background: url(/material/img/top/btn_playmovie.png) no-repeat;
	width: 50px;
	height: 50px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}



.top_socialInfo .top_socialInfo_linkList {
	display: flex;
	justify-content: space-between;
	width: 460px;
	margin: 0 auto;
}

.top_socialInfo .top_socialInfo_linkList .btn a {
	padding: 10px 15px;
	font-weight: bold;
}



@media screen and (max-width: 750px){

	.emergency .emergency_list01,
	.emergency .emergency_list03{
		margin-bottom: 8%;
	}

	.emergency .emergency_list01 li,
	.emergency .emergency_list03 li {
		padding: 3% 5% 3% 3%;
	}
	.emergency .emergency_list01 li.link,
	.emergency .emergency_list03 li.link {
		padding: 0;
	}
	.emergency .emergency_list01 li.link a,
	.emergency .emergency_list03 li.link a {
		padding: 3% 5% 3% 3%;
	}

	.emergency .emergency_list01 li.link a:after,
	.emergency .emergency_list03 li.link a:after {
		right: 2%;
	}
	.emergency .emergency_list02 {
		margin-bottom: 8%;
	}

	.emergency .emergency_list02 .emergency_list02_title {
		background: #333;
		color: #fff;
		font-weight: bold;
		padding: 3%;
	}
	.emergency .emergency_list02 .emergency_list02_list li.link a {
		padding: 3% 5% 3% 3%;
	}

	.emergency .emergency_list02 .emergency_list02_list li a:after {
		right: 2%;
	}


	/* -----------------------------------------
		コンテンツメニュー
	----------------------------------------- */

	.top_contentsList {
		display: block;
		padding-bottom: 10%;
	}

	.top_contentsList > li {
		max-width: 100%;
		width: 100%;
		margin-bottom: 8%;
	}


	.top_contentsList > li .top_contentsList_image:before {
		width: 90px;
		height: 90px;
	}


	.top_contentsList > li .top_contentsList_h a {
		padding: 3% 0;
	}

	.top_contentsList > li .top_contentsList_h a:after {
		right: 3%;
	}

	.top_contentsList > li .top_contentsList_list {
		padding: 4%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.top_contentsList > li .top_contentsList_list > li {
		position: relative;
		margin:0 30px 10px 0;
	}

	.top_contentsList > li .top_contentsList_list > li a:after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 15px solid #e2f3e2;
		position: absolute;
		right: -35px;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.top_contentsList > li .top_contentsList_list > li a {
		display: block;
		background: #e2f3e2;
		color: #333;
		text-decoration: none;
		padding: 10px;
		font-size: 1.3rem;
	}


	/* -----------------------------------------
		お知らせ一覧
	----------------------------------------- */
	.informationBox .info_list {
		display: none;
	}

	.informationBox .tabCont{
		display: none;
		margin-bottom: 10%;
		transition-duration: 0s;
	}

	.informationBox .sp_title {
		display: block;
		color: #fff;
		background: #444444;
		padding: 3% 5%;
		font-weight: bold;
		font-size: 1.8rem;
		text-align: center;
		margin-bottom: 3%;
		position: relative;
	}

	.informationBox .sp_title:before {
		content: "";
		display: block;
		width: 2px;
		height: 14px;
		background: #fff;
		position: absolute;
		right: 20px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.informationBox .sp_title:after {
		content: "";
		display: block;
		width: 14px;
		height: 2px;
		background: #fff;
		position: absolute;
		right: 14px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	
	.informationBox .sp_title.sp_active:before {
		content: none;
	}


	.informationBox .cont_list {
		margin-bottom: 8%;
	}

	.informationBox .cont_list li {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 5% 3%;
		border-top: 1px solid #ddd;
	}

	.informationBox .cont_list li:first-child {
		border-top: none;
	}

	.informationBox .cont_list li:last-child {
		border-bottom: 1px solid #ddd;
	}

	.informationBox .cont_list li > .date {
		font-weight: bold;
		margin-right: 0;
		margin-bottom: 0;
		width: 100%;
	}

	.informationBox .cont_list li > .icon {
		display: flex;
		margin-right: 0;
		margin-top: 3%;
		width: 100%;
	}


	.informationBox .cont_list li .text {
		display: block;
		width: 100%;
		position: relative;
		margin-top: 3%;
	}

	.informationBox .cont_list li .text a {
		display: block;
		padding-right: 3%;
	}

	.informationBox .cont_btn {
		width: 60%;
		margin: 0 auto;
	}
	.informationBox .cont_btn a {
		text-align: center;
		padding: 3%;
	}

	/*イベント・キャンペーン*/
	.informationBox #tab_eventCampaign .eventCampaignList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.informationBox #tab_eventCampaign .eventCampaignList li {
		width: 47%;
		margin-bottom: 20px;
		margin-right: 0;
	}


	.informationBox #tab_important .cont_list .text {
		width: 100%;
		margin-top: 3%;
	}


	/*---------------------------
	動画・SNS情報
	-----------------------------*/

	.top_socialInfo {
		padding-bottom: 15%;
	}

	.top_socialInfo .youtube {
		display: block;
		margin-bottom: 0;
	}

	.top_socialInfo .youtube li {
		width: 100%;
		max-width: 100%;
		margin-bottom: 10%;
	}

	.top_socialInfo .youtube li .title {
		padding: 3%;
	}


	.top_socialInfo .top_socialInfo_linkList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		margin: 0 auto;
	}
	.top_socialInfo .top_socialInfo_linkList .btn {
		width: 100%;
		margin-top: 8%;
	}
	.top_socialInfo .top_socialInfo_linkList .btn a {
		padding: 15px;
	}

}




/* --- modal --- */
#modal {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#modalBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.75);
	text-align: center;
	z-index: 9999;
}
#modalBox iframe {
	position: fixed;
	top: 50%;
	left: 50%;
}
#modalBox p {
	margin: 5%;
	width: 90%;
	height: 90%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
#modalBox .xbtn {
	position: absolute;
	top: 45px;
	right: 45px;
	display: block;
	width: 34px;
	height: 34px;
	background-image: url(/dokomadeikeruka/img/ico_close.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: auto auto;
}
@media screen and (max-width: 640px) {
	#modalBox iframe {
		width: 100%;
	}
}
@media screen and (min-width:641px) {
	#modalBox iframe {
		margin-top: -180px;
		margin-left: -320px;
		width: 640px;
		height: 360px;
	}
}



@media screen and (min-width: 751px){
	#side.show.close .sidebar {
		z-index: -1;
	}

	.top_contentsList,
	.informationBox,
	.top_socialInfo {
		position: relative;
		z-index: 2;
	}
}