@charset "utf-8";
/*----------------------------------------------------

アコーディオン
jQuery未使用
<link href="../css/acc.css" rel="stylesheet"><script src="../js/acc.js" defer></script>
/*-----------------------------------------------------*/

.acc-header::after { content: "▼"; position: absolute; right: 10px; transition: transform .3s ease; }
.acc-header.active::after { transform: rotate(180deg); }

/*--------------------------------------
小見出しを展開する
<div class="acc-wrap color-box-green">
<h3 class="acc-header">電車（JR）でお越しの方</h3>
<div class="acc-contents">
---------------------------------------- */
.acc-wrap{
	position: relative; font-size:95%; overflow: hidden;
	border-radius: 6px; box-shadow: 1px 1px 2px 1px #66666699; background-color: #fafafa99;
	margin-top: 1.5em; margin-bottom: 1.5em; }
.acc-wrap + .acc-wrap{ margin-top: 0; }
.acc-wrap .acc-header{
	padding: 10px; background-color:#eee; cursor: pointer; position: relative;
	font-size: calc( 95% + 0.2vw ); text-align: left; border: none; font-weight:normal; margin: 0;}

.acc-wrap .acc-contents{
	max-height: 0; overflow: hidden; transition: max-height .3s ease;
	padding: 0 calc( 8px + 0.5vw ) ; margin: 0;
	background-color: #ffffffaa; }

.acc-wrap .acc-contents > :first-child{ margin-top: 1em; }
.acc-wrap .acc-contents > :last-child{ margin-bottom: 1.5em; }

.acc-content .br::before{
	position: relative; content: ''; display: block; margin-top: 2.5rem;
	border-top:1px dotted; padding-top:1rem;  margin-left: -99px; margin-right: -99px; }
.acc-contents h4 ,
.acc-contents h5{ margin:1.5em 0 0.75em -0.2em !important; padding: 0.3em 0.2em; line-height: 150%; background-color: #aaaaaa33;  }
.acc-contents h4:first-child ,
.acc-contents h5:first-child{ margin-top: 0 !important; }