@charset "UTF-8";
/* CSS Document */

#trainingBenefitsContent{
padding: 0 0 8%;
}

@media screen and (max-width: 999px){
#trainingBenefitsContent{
padding: 0 0 15%;
}
}/*999*/





#tbTraining{
max-width: 1000px;
margin: 0 auto;
padding: 8% 0 0;
}
#trainingHead{
margin: 50px 0 0;
}
#trainingHead h3{
font-size: 2.25rem;
line-height: 1.5;
font-weight: 400;
}
#trainingHead p.lead{
font-size: 0.875rem;
line-height: 2;
margin: 2em 0 0;
}
#trainingList{
margin: 50px 0 0;
}
#trainingList ul{
display: flex;
flex-wrap: wrap;
margin: -30px 0 0 -30px;
}
#trainingList ul li{
width: 33.33%;
padding: 0 0 0 30px;
margin: 30px 0 0;
}
#trainingList ul li p{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
color: #ffffff;
background-color: #0080c3;
text-align: center;
height: 100px;
z-index: 1;
}
#trainingList ul li p::before{
content: '';
display: block;
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 1px solid #ffffff;
z-index: -1;
}
#trainingQualification{
display: flex;
flex-direction: column;
align-items: center;
margin: 50px 0 0;
padding: 60px;
background-color: #f1ebe5;
}
#trainingQualification h3{
color: #008773;
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
border-bottom: 2px solid #008773;
padding: 0 0 5px;
}
#trainingQualification p.lead{
width: 100%;
font-size: 0.875rem;
margin: 2.5em 0 0;
line-height: 2;
}
#trainingQualificationContent{
width: 100%;
/*display: flex;
justify-content: space-between;*/
margin: 40px 0 0;
}
.trainingQualificationBox{
/*width: calc(50% - 20px);*/
background-color: #ffffff;
padding: 30px;
}
.trainingQualificationBox h4{
color: #008773;
}
.trainingQualificationBox ul{
/*margin: 1em 0 0;*/
}
.trainingQualificationBox ul li{
font-size: 0.875rem;
line-height: 2;
margin: 0 0 0 20px;
list-style: disc;
}
#tbTraining .attention{
font-size: 0.875rem;
margin: 0.5em 0 0;
padding: 0 0 0 1em;
text-indent: -1em;
text-align: right;
}

@media screen and (max-width: 999px){
#tbTraining{
padding: 15% 20px 0;
}
#trainingHead{
margin: 30px 0 0;
}
#trainingHead h3{
font-size: 1.5rem;
}
#trainingHead p.lead{
font-size: 0.75rem;
}
#trainingList{
margin: 30px 0 0;
}
#trainingList ul{
display: block;
margin: 0;
}
#trainingList ul li{
width: auto;
padding: 0;
margin: 0;
}
#trainingList ul li+li{
margin: 20px 0 0;
}
#trainingQualification{
margin: 30px 0 0;
padding: 30px 20px;
}
#trainingQualification h3{
font-size: 1.125rem;
}
#trainingQualification p.lead{
font-size: 0.75rem;
}
#trainingQualificationContent{
display: block;
margin: 20px 0 0;
}
.trainingQualificationBox{
width: auto;
padding: 20px;
}
.trainingQualificationBox+.trainingQualificationBox{
margin: 20px 0 0;
}
.trainingQualificationBox h4{
font-size: 0.875rem;
}
.trainingQualificationBox ul li{
font-size: 0.75rem;
}
#tbTraining .attention{
font-size: 0.75rem;
text-align: left;
}
}/*999*/

#tbTraining.init{
opacity: 0;
transform: translateY(50px);
}
#tbTraining.init.active{
animation: commonShow01 800ms linear forwards, commonShow02 800ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}





#tbTrainingOnwards{
max-width: 1000px;
margin: 0 auto;
padding: 100px 0 0;
}
#tbTrainingOnwards h3{
font-size: 2.25rem;
line-height: 1.5;
font-weight: 400;
}
#trainingOnwardsList{
margin: 50px 0 0;
}
#trainingOnwardsList ul{
display: flex;
flex-wrap: wrap;
margin: -60px 0 0 -40px;
}
#trainingOnwardsList ul li{
width: 50%;
padding: 0 0 0 40px;
margin: 60px 0 0;
}
#trainingOnwardsList ul li figure{
position: relative;
padding: 66.66% 0 0;
overflow: hidden;
}
#trainingOnwardsList ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#trainingOnwardsList ul li .txt{
margin: 20px 0 0;
}
#trainingOnwardsList ul li .txt p.title{
font-size: 1.5rem;
line-height: 1.5;
}
#trainingOnwardsList ul li .txt p.body{
font-size: 0.875rem;
line-height: 2;
margin: 1em 0 0;
}
#trainingOnwardsPromotion{
display: flex;
flex-direction: column;
align-items: center;
margin: 70px 0 0;
padding: 60px;
background-color: #f1ebe5;
}
#trainingOnwardsPromotion h4{
color: #008773;
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
border-bottom: 2px solid #008773;
padding: 0 0 5px;
}
#trainingOnwardsPromotionContent{
display: flex;
justify-content: space-between;
width: 100%;
margin: 50px 0 0;
}
#trainingOnwardsPromotionContent figure{
width: 360px;
}
#trainingOnwardsPromotionContent .txt{
width: calc(100% - 400px);
}
#trainingOnwardsPromotionContent .txt p{
font-size: 0.875rem;
line-height: 2;
}

@media screen and (max-width: 999px){
#tbTrainingOnwards{
padding: 50px 20px 0;
}
#tbTrainingOnwards h3{
font-size: 1.5rem;
}
#trainingOnwardsList{
margin: 30px 0 0;
}
#trainingOnwardsList ul{
display: block;
margin: 0;
}
#trainingOnwardsList ul li{
width: auto;
padding: 0;
margin: 0;
}
#trainingOnwardsList ul li+li{
margin: 50px 0 0;
}
#trainingOnwardsList ul li .txt{
margin: 15px 0 0;
}
#trainingOnwardsList ul li .txt p.title{
font-size: 1.125rem;
}
#trainingOnwardsList ul li .txt p.body{
font-size: 0.75rem;
}
#trainingOnwardsPromotion{
margin: 40px 0 0;
padding: 30px 20px;
}
#trainingOnwardsPromotion h4{
font-size: min(4.6vw, 1.125rem);
}
#trainingOnwardsPromotionContent{
display: block;
margin: 30px 0 0;
}
#trainingOnwardsPromotionContent figure{
width: auto;
}
#trainingOnwardsPromotionContent .txt{
width: auto;
margin: 20px 0 0;
}
#trainingOnwardsPromotionContent .txt p{
font-size: 0.75rem;
}
}/*999*/

#tbTrainingOnwards.init{
opacity: 0;
transform: translateY(50px);
}
#tbTrainingOnwards.init.active{
animation: commonShow01 800ms linear forwards, commonShow02 800ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}





#tbBenefits{
max-width: 1000px;
margin: 0 auto;
padding: 8% 0 0;
}
#benefitsHead{
margin: 50px 0 0;
}
#benefitsHead h3{
font-size: 2.25rem;
line-height: 1.5;
font-weight: 400;
}
#benefitsHead p.lead{
font-size: 0.875rem;
line-height: 2;
margin: 2em 0 0;
}
#benefitsList{
margin: 50px 0 0;
}
#benefitsList ul{
display: flex;
flex-wrap: wrap;
margin: -50px 0 0 -40px;
}
#benefitsList ul li{
width: 33.33%;
padding: 0 0 0 40px;
margin: 50px 0 0;
}
#benefitsList ul li p.title{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
color: #ffffff;
background-color: #0080c3;
text-align: center;
height: 100px;
z-index: 1;
}
#benefitsList ul li p.title::before{
content: '';
display: block;
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 1px solid #ffffff;
z-index: -1;
}
#benefitsList ul li p.body{
font-size: 0.875rem;
line-height: 2;
margin: 1em 0 0;
}

@media screen and (max-width: 999px){
#tbBenefits{
padding: 15% 20px 0;
}
#benefitsHead{
margin: 30px 0 0;
}
#benefitsHead h3{
font-size: 1.5rem;
}
#benefitsHead p.lead{
font-size: 0.75rem;
}
#benefitsList{
margin: 30px 0 0;
}
#benefitsList ul{
display: block;
margin: 0;
}
#benefitsList ul li{
width: auto;
padding: 0;
margin: 0;
}
#benefitsList ul li+li{
margin: 30px 0 0;
}
#benefitsList ul li p.body{
font-size: 0.75rem;
}
}/*999*/

#tbBenefits.init{
opacity: 0;
transform: translateY(50px);
}
#tbBenefits.init.active{
animation: commonShow01 800ms linear forwards, commonShow02 800ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}