@media screen and (min-width: 0px) and (max-width: 700px) {

.sp-main-title-text-center {
text-align: center;
}

.box-01 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 96%;
margin: 2rem 0% 0% 0%;
border: 2px solid;
border-color: rgba(50,184,235,0.75);
padding: 0% 0% 0% 0%;
box-sizing: border-box;
}

.box-01:last-child {
margin: 2rem 0% 2rem 0%;
}

.box-01-inner-01 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 96%;
margin: 2rem 0% 2rem 0%;
}

.box-01-inner-01-inner {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
margin: 0rem 0% 0rem 0%;
position: relative;
}

.box-01-inner-02 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 96%;
margin: 0rem 0% 2rem 0%;
}

.link-box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 8rem;
box-sizing: border-box;
background: #00A2F2;
color: #FFFFFE;
}

.link-box-inner {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: underline;
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
}

.box--01-inner-02-inner {
text-align: left;
}

.arrow-01 {
position: relative;
display: block;
width: 10px;
height: 55px;
margin: 2rem 0% 0rem 0%;
border-radius: 5px;
background-color: #32B8EB;
}

.arrow-01::before {
content: "";
position: absolute;
bottom: 10px;
left: -4px;
display: block;
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #32B8EB;
transform: rotate(-45deg);
}

.arrow-01::after {
content: "";
position: absolute;
bottom: 10px;
right: -4px;
display: block;
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #32B8EB;
transform: rotate(45deg);
}


}


@media screen and (min-width: 701px) { 

.box-01 {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
width: 96%;
margin: 2rem 0% 0% 0%;
padding: 3rem 0% 3rem 4%;
border: 2px solid;
border-color: rgba(50,184,235,0.75);
box-sizing: border-box;
}

.box-01:last-child {
margin: 2rem 0% 2rem 0%;
}

.box-01-inner-01 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 45%;
}

.box-01-inner-01-inner {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
transition: 1s;
}

.box-01-inner-01-inner:hover {
box-shadow: 10px 15px 10px 0px rgba(0,0,0,0.3);
transform: translateY(-10px);
transition-duration: 0.3s;
}

.box-01-inner-02 {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 55%;
margin: 0rem 0% 0rem 0%;
}

.link-box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
position: relative;
width: 60%;
height: 8rem;
box-sizing: border-box;
transition: 1s;
background: #00A2F2;
color: #FFFFFE;
}

.link-box-inner {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: underline;
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
}

.link-box:hover {
box-shadow: 10px 15px 10px 0px rgba(0,0,0,0.3);
transform: translateY(-10px);
transition-duration: 0.3s;
}

.box--01-inner-02-inner {
text-align: left;
}

.arrow-01 {
position: relative;
display: block;
width: 10px;
height: 55px;
margin: 2rem 0% 0rem 0%;
border-radius: 5px;
background-color: #32B8EB;
}

.arrow-01::before {
content: "";
position: absolute;
bottom: 10px;
left: -4px;
display: block;
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #32B8EB;
transform: rotate(-45deg);
}

.arrow-01::after {
content: "";
position: absolute;
bottom: 10px;
right: -4px;
display: block;
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #32B8EB;
transform: rotate(45deg);
}


}