/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 0 0;
    padding: 0;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 10px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#taxitab a {
    background: #3fa36e;
    color: #FFFFFF;
    text-decoration: none;
	margin-left: 0;
}

#inntab a {
    background: #D7A86E;
    color: #FFFFFF;
    text-decoration: none;
}

div#taxi {
    border: solid 2px #3fa36e;
}

div#inn {
    border: solid 2px #D7A86E;
}

#taxi h2 {
    border-bottom: solid 3px #B0D9B1;
    position: relative;
    font-weight: bold;
	margin-bottom: 30px;
}

#taxi h2::before {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #3fa36e;
    bottom: -3px;
    width: 20%;
}

#inn h2 {
    border-bottom: solid 3px #FFEBC1;
    position: relative;
    font-weight: bold;
	margin-bottom: 30px;
}

#inn h2::before {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #D7A86E;
    bottom: -3px;
    width: 20%;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.m30{
	margin-top: 30px;
}
.m30.taxiBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.taxisabbox {
    width: 45%;
    margin: 20px auto;
}

p.taxi-text {
    font-size: 18px;
    line-height: 2.5rem;
    margin: 30px auto;
}

.m30.TaxiBox {
    display: flex;
    flex-direction: row-reverse;
	background: #D0E7D2;
    padding: 50px 0;
}

.box1 {
    padding: 1em 1em;
    margin: 2em 0;
    border: solid 3px #3fa36e;
	display: flex;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

#inn p.text {
    margin: 50px 30px;
}


.box2 {
    padding: 1em 1em;
    margin: 2em 0;
    border: solid 3px #D7A86E;
	display: flex;
}
.box2 p {
    margin: 0; 
    padding: 0;
}

@media (min-width: 996.98px) and (max-width: 1199.8px) {
	.m30.taxiBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
	padding: 30px 20px;
}
	.taxisabbox {
    width: 100%;
    margin: 20px auto;
}
	
	p.taxi-text {
    font-size: 18px;
    line-height: 2.5rem;
    margin: 15px auto;
}
	
	.m30.TaxiBox {
    display: flex;
    flex-direction: column;
    background: #D0E7D2;
    padding: 30px 20px;
}

}

@media (max-width:996.98px)  {
	.m30.taxiBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
	padding: 30px 20px;
}
	.taxisabbox {
    width: 100%;
    margin: 20px auto;
}
	
	p.taxi-text {
    font-size: 18px;
    line-height: 2.5rem;
    margin: 15px auto;
}
	
	.m30.TaxiBox {
    display: flex;
    flex-direction: column;
    background: #D0E7D2;
    padding: 30px 20px;
}
	
	.box1 {
    padding: 1em 1em;
    margin: 2em 0;
    border: solid 3px #3fa36e;
    display: flex;
    flex-direction: column;
}
	.box2 {
    padding: 1em 1em;
    margin: 2em 0;
    border: solid 3px #D7A86E;
    display: flex;
    flex-direction: column;
}
}