@charset "UTF-8";

.tab {
    display: flex;
    flex-direction: column;
    gap: 20px 4%;
}
.tab > a {
    margin: 0;
}
.tab.active {
    border-bottom: none;
}
.tab .green_button:link, .activity .green_button {
    color: #fff;
}
.tab .green_button:first-child {
    background-color: #fea1a1;
}
.tab .green_button:last-child {
    background-color: #a5a9e1;
}
.tab .green_button {
    position: relative;
}
.tab .green_button::after {
    position: absolute;
    content: "＞";
    font-weight: bold;
    transform: translateY(-50%) rotate(90deg) scale(0.5, 1.2);
    top: 50%;
    right: 20px;
    color: #fff;
    z-index: 0;
    font-size: 1.2rem;
}
.activity .appointment_btn {
    font-weight: bold;
}
.activity .appointment_btn, .apo_box:not(:last-of-type) {
    margin-bottom: 80px;
    position: relative;
}
.activity .appointment_btn::after, .apo_box:not(:last-of-type)::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 20px solid #d3d3d3;
}

/*エリアの表示非表示と形状*/
.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;
}

.apo_box {
    padding: 30px 20px;
    border: 2px solid;
    border-radius: 5px;
}
#appointment .apo_box {
    border-color: #fea1a1;
}
#non_appointment .apo_box {
    border-color: #a5a9e1;
}
.apo_box ul > li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 30px;
    position: relative;
    font-weight: normal;
}
.apo_box ul > li:not(:last-of-type) {
    margin-bottom: 5px;
}
.apo_box ul > li::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    border-radius: 50%;
}
#appointment .apo_box ul > li::before, #appointment .apo_box h4 span {
    background-color: #fea1a1;
}
#non_appointment .apo_box ul > li::before, #non_appointment .apo_box h4 span {
    background-color: #a5a9e1;
}
.apo_box h4 {
    text-align: center;
}
.apo_box h4 span {
    display: block;
    max-width: 100px;
    color: #fff;
    padding: 6px 0;
  border-radius: 5px;
  margin: 0 auto 15px;
}
#appointment .apo_box h4 {
    color: #fea1a1;
}
#non_appointment .apo_box h4 {
    color: #a5a9e1;
}


            @media only screen and (min-width:768px) {
                .apo_box {
                    padding: 30px 40px;
                }
                .tab {
                    flex-direction: row;
                    justify-content: space-between;
                }
                .tab > a {
                    width: 48%;
                }
			}


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