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

#page_title{
background-image: url(images/pagetitle_bg.jpg);
background-image: -webkit-image-set(url(images/pagetitle_bg.jpg) 1x, url(images/pagetitle_bg@2x.jpg) 2x);
}

/* 中身-モバイルファースト======================================================================================================== */
#introduction .alpha h3{
font-size: 24px;
font-weight: 700;
color: #ea5504;
}
#introduction .alpha .illust{
width: 60%;
margin-left: auto;
}

#introduction .beta ol{
display: flex;
flex-wrap: wrap;
}
#introduction .beta li{
width: 45%;
margin-right: 10%;
margin-top: 10%;
}
#introduction .beta li:nth-child(2n){
margin-right: 0;
}
#introduction .beta .inner{
border-radius: 50%;
aspect-ratio: 1/1;
background-color: #f3f9e8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
#introduction .beta .inner::before{
content: "";
display: block;
background-image: url(../images/img_character.svg);
background-repeat: no-repeat;
background-position: left top;
aspect-ratio: 100/78;
width: 12vw;
position: absolute;
top: 0;
right: 2vw;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
#introduction .beta .inner em{
display: block;
font-size: 4vw;
line-height: 1;
font-weight: 700;
color: #8dc21f;
text-align: center;
margin-bottom: 2vw;
}
#introduction .beta .inner em span{
display: block;
font-size: 10vw;
}
#introduction .beta .inner .icon{
height: 12vw;
}
#introduction .beta .inner .icon img{
height: 10vw;
}
#introduction .beta li:nth-child(4) .inner .icon img{
height: 12vw;
}
#introduction .beta h4{
font-size: 18px;
font-weight: 700;
color: #8dc21f;
}




/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){
#introduction .alpha{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
}
#introduction .alpha h3{
font-size: 40px;
}
#introduction .alpha p{
font-size: 20px;
}
#introduction .alpha .illust{
width: auto;
margin: 0;
}

#introduction .beta ol{
justify-content: space-between;
}
#introduction .beta li{
width: 22%;
margin-right: 0;
margin-top: 0;
}
#introduction .beta .inner{
margin-bottom: 10px;
}
#introduction .beta .inner::before{
width: 80px;
right: 10px;
}
#introduction .beta .inner em{
font-size: 16px;
margin-bottom: 20px;
}
#introduction .beta .inner em span{
font-size: 60px;
}
#introduction .beta .inner .icon{
height: 60px;
}
#introduction .beta .inner .icon img{
height: 50px;
}
#introduction .beta li:nth-child(4) .inner .icon img{
height: 60px;
}
#introduction .beta h4{
font-size: 24px;
}







}

