/* CSS Document */


.tab-box{
	width: 100%;
}

.flow-btn {
	display: flex;
	width: 100%;
	margin: 20px auto 0;
	justify-content: center;
} 

.flow-btn a{
	background: #fff;
	border:1px solid #bc5e5e;
	padding: 20px 30px;
	width: 40%;
	display: flex;
	justify-content: space-between;
	border-radius: 30px;
	color: #bc5e5e;
	margin-right: 10px;
	min-width: 400px;
}

.flow-btn a span{
	font-size: 1.2rem;
	letter-spacing: 0.05rem;
	font-weight: 600;
	transition: ease-in-out 0.5s;
}

.flow-btn a:hover{
	background: #e88787;
	color: #fff;
}


.after-school-btn{
	border: 1px solid #d67747;
    color: #d67747;
}

.after-school-btn:hover{
    background: #d67747!important;
}


.flow-box{
    background: #fff5f5;
    border-radius: 60px;
    border: 3px dashed #b55050;
    padding: 0;
    margin: 20px auto 0;
    width: 100%;
}

.flow-box-title{
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}

.flow-box-title h3{
	position: absolute;
    top: -50%;
    left: 50%;
    display: inline;
    transform: translate(-50%, -50%);
    background: #b55050;
    color: #fff;
    padding: 10px 50px;
    border-radius: 50px;
	min-width: 520px;
	text-align: center;
}

#after-school .flow-box-title h3{
	min-width: 650px;
}
    


@media(max-width:1000px){
	
	
	
	.sub-box-quote p {
		line-height: 1.8rem;
	}

	.flow-btn a {
		padding: 10px 20px;
		border-radius: 20px;
		color: #bc5e5e;
		margin-right: 10px;
		min-width: 370px;
	}
	
	.flow-btn a span {
    	font-size: 1.1rem;
		letter-spacing: 0.04rem;
	}
	
	.flow-box-title h3 {
    	padding: 5px 10px;
		min-width: 400px;
	}
	
	.tab-box {
		padding-top: 10px;
	}
	
}



@media(max-width:900px){
	
	.flow-btn {
		flex-direction: column;
		align-items: center;
	}
	
	.flow-btn a{
		margin-bottom: 5px;
		margin-right: 0;
	}
	
	.flow-box-title {
    	margin-bottom: 30px;
	}
	
}

@media(max-width:800px){

	.flow-box {
			padding: 0 10px 10px;
		}
		
	.ps-delete {
		padding:20px 0;
		margin:20px 0;
	}
	
	
	
	
}


/* CSS Document */


.ps-delete {
	margin:80px 20px 20px;
	padding: 20px;
	text-align: center;
	color: #A62B2D;
	font-weight: 600;
}

#message .ps-delete{
	margin:0 0 20px!important;
	padding: 0!important;
}

.ps-delete span{
	display: inline!important;
	font-size: 2rem;
	position: relative;
	z-index: 2;
}

.ps-delete span::before{
	width: 100%;
	height: 50%;
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	background: #fff25d;
	left: 0;
	z-index: -1;
	opacity: 0;
	animation: 1s shining linear infinite;
}

@keyframes shining{
	
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	
	100%{
		opacity: 0;
	}
	
	
}



.sub-main-box {
	padding-bottom: 30px;
}


.sub-box-quote {
	position: relative;
}

.sub-box-quote::before{
	position: absolute;
	content: '';
    display: block;
    left: inherit;
    top: inherit;
    background: url(../img/squirrel-orange.png) center no-repeat;
	right: 40px;
    bottom: -50px;
    background-size: cover;
	aspect-ratio: 4 / 3;
    width: 13vw;
    min-width: 120px;
}

.message .sub-box-quote p span {
	display: block;
	text-align: center;
}


.flow-btn {
	display: flex;
	width: 100%;
	margin: 20px auto 0;
	justify-content: center;
} 

.flow-btn a{
	background: #fff;
	border:1px solid #bc5e5e;
	padding: 20px 30px;
	width: 40%;
	display: flex;
	justify-content: space-between;
	border-radius: 30px;
	color: #bc5e5e;
	margin-right: 10px;
	min-width: 400px;
}

.flow-btn a span{
	font-size: 1.2rem;
	letter-spacing: 0.05rem;
	font-weight: 600;
	transition: ease-in-out 0.5s;
}

.flow-btn a:hover{
	background: #e88787;
	color: #fff;
}


.after-school-btn{
	border: 1px solid #d67747;
    color: #d67747;
}

.after-school-btn:hover{
    background: #d67747!important;
}


.flow-box{
	background: #fff5f5; 
	border-radius: 60px;
	border: 3px dashed #b55050;
	padding: 0 60px 60px;
	margin: 20px auto 0;
}

.flow-box-title{
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}

.flow-box-title h3{
	position: absolute;
    top: -50%;
    left: 50%;
    display: inline;
    transform: translate(-50%, -50%);
    background: #b55050;
    color: #fff;
    padding: 10px 50px;
    border-radius: 50px;
	min-width: 520px;
	text-align: center;
}

#after-school .flow-box-title h3{
	min-width: 650px;
}
    


.tab-box{
	padding-top: 30px;
}










@media(max-width:1100px){
	
	.sub-box-quote::before {
    	right: 0;
		width: 12vw;
	}
	

	
}

@media(max-width:1000px){
	
	

	
	
	.sub-box-quote p {
		line-height: 1.8rem;
	}

	.flow-btn a {
		padding: 10px 20px;
		border-radius: 20px;
		color: #bc5e5e;
		margin-right: 10px;
		min-width: 370px;
	}
	
	.flow-btn a span {
    	font-size: 1.1rem;
		letter-spacing: 0.04rem;
	}
	
	.flow-box-title h3 {
    	padding: 5px 10px;
		min-width: 400px;
	}
	
	#after-school .flow-box-title h3 {
		min-width: 500px;
	}
	
	.flow-box {
    	border-radius: 15px;
		padding:0 17px 20px;
	}
	
	
	.tab-box {
		padding-top: 10px;
	}
	
	
	.ps-delete span {
    	font-size: 1.5rem;
	}
	
	
}



@media(max-width:900px){
	.message .sub-box-quote p span {
		display: inline;
	}
	
	.flow-btn {
		flex-direction: column;
		align-items: center;
	}
	
	.flow-btn a{
		margin-bottom: 5px;
		margin-right: 0;
	}
	
	.flow-box-title {
    	margin-bottom: 30px;
	}
	
}

@media(max-width:800px){

	.flow-box {
			padding: 0 10px 10px;
		}
	
	#after-school .flow-box-title h3 {
        min-width: 450px;
    }
	
	.ps-delete {
		padding:20px 0;
		margin:20px 0;
	}
	
	.ps-delete span {
		font-size: 1.1rem;
		letter-spacing: 0;
	}
	
	.area {
        padding: 20px 10px;
    }
	
	.flow-item-title {
        font-size: 1.15rem;
        letter-spacing: 0.05rem;
    }
	
	
	
}

@media(max-width:500px){
	
	
	.flow-item-down{
		padding-right: 5px;
	}
	
	
	.flow-item-time {
		letter-spacing: 0.06rem !important;
	}
	
	
	.ps-delete {
		padding:20px 0;
		margin:20px 0;
	}
	
	.ps-delete span {
		font-size: 0.9rem;
		letter-spacing: 0;
	}
	
	
	.message .sub-box-quote p span {
        font-size: 0.9rem;
    }
	
	.sub-main-box {
		padding-bottom: 30px;
		margin-top: -70px;
		padding-top: 70px;
	}

    .flow-btn a {
        padding: 10px 20px;
		min-width: 100%;
	}

	.flow-btn a span {
        font-size: 1.0rem;
		letter-spacing: 0.01rem;
	}

	.sub-box-quote::before {
		display: none;
	}
	
	.sub-box-quote {
	    padding-bottom: 20px;
		margin-bottom: 0;
	}

	.flow-box-title h3 {
        padding: 5px 0;
		min-width: 100%;
		font-size: 1.08rem;
	}
	
	
	#after-school .flow-box-title h3 {
        min-width: 100%;
    }

	
}

@media(max-width:400px){
	
		
	
	.flow-item-title {
        letter-spacing: 0;
        padding: 0;
    }
	
	.flow-item-time {
		font-weight: 600;
		font-size: 0.75rem;
		letter-spacing: 0.05rem !important;
	}
	
	.flow-item-down ul {
		border-radius: 5px;
		padding: 10px 2px 10px 15px; 
	}
	
	  .flow-item-down ul li {
        font-size: 0.9rem;
        letter-spacing: 0rem;
        margin-left: 10px;
        line-height: 1.2rem;
    }
	
}