@charset "UTF-8";

.head{}
.head_inner{
    padding-top: 79px;
    padding-bottom: 100px;
}
.head_mes{
    text-align: center;
    font-size: 18px;
}
.head_img{
    margin: 62px auto 0;
    max-width: 744px;
}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 767px) {

    .head{
    overflow: hidden;
}
    .head_inner{
    padding-top: 6rem;
    padding-bottom: 6rem;
}
    .head_mes{
    text-align: left;
    font-size: 1.6rem;
}
    .head_img{
    margin: 4rem -3rem 0;
}
}

/*　
---------------------------------------------------------*/
.uniform{}
.uniform_inner{
    display: grid;
    gap: 62px 0;
    padding-bottom: 100px;
}

.uniform_box{
    background: #FFFFFF;
    border-radius: 10px;
    padding: 60px 8.6% 86px;
}
.uniform_ttl{
    text-align: center;
}
.uniform_ttl_inner{
    display: inline-block;
    position: relative;
    z-index: 1;
}
.uniform_ttl_inner:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: #00264B;
    height: 1px;
    bottom: 9px;
    right: -7px;
    left: -7px;
}
.uniform_ttl_en{
    font-weight: 300;
    font-size: 38px;
    line-height: 120%;
    display: block;
    margin-bottom: 3px;
}
.uniform_ttl_ja{
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    background: #fff;
    padding: 0 12px;
    position: relative;
    z-index: 5;
}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 767px) {
    .uniform{
    padding: 0;
}
    .uniform_inner{
    gap: 0;
    background: #fff;
    padding-bottom: 6rem;
    margin-bottom: 5.7rem;
}
    .uniform_box{
    border-radius: 0;
    padding: 6rem 5% 0rem;
}
    .uniform_ttl{}
    .uniform_ttl_inner{}
    .uniform_ttl_inner:before{
    right: 0;
    left: 0rem;
}
    .uniform_ttl_en{
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
}
    .uniform_ttl_ja{
    font-size: 1.4rem;
}

}

/*　
---------------------------------------------------------*/
.style{
    background: #F6F2FC;
    border-radius: 10px;
    display: flex;
    margin-top: 106px;
    padding: 45px 5.5% 32px;
}
.style.summer{
    background: #E6F0F8;    
}
.style_box{
    flex: 1;
    position: relative;
    z-index: 1;
}
.style_data{}
.style_box:nth-child(1) .style_data{
    padding-right: 51%;
}
.style_box:nth-child(2) .style_data{
    padding-left: 51%;
}

.style_img1{
    overflow: hidden;
    border-radius: 1000px;
    margin: 0 8%;
}
.style_ttl{
    text-align: center;
    margin-top: 16px;
    margin-bottom: 12px;
    font-weight: 400;
}
.style_mes{
    font-size: 14px;
    line-height: 1.5;
}

.style_img2{
    position: absolute;
    top: 44%;
    transform: translate(0px, -50%);
    width: 41.5%;
}
.style_box:nth-child(1) .style_img2{
    right: 3%;
}
.style_box:nth-child(2) .style_img2{
    left: 2%;
}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 767px) {

    .style{
    display: grid;
    margin-top: 4rem;
    padding: 7.4rem 6% 8rem;
    gap: 11.5rem 0;
}
    .style.summer{}
    .style_box{}
    .style_data{}
    .style_box:nth-child(1) .style_data{
    padding-right: 0;
    padding-left: 45.5%;
}
    .style_box:nth-child(2) .style_data{
    padding-left: 0;
    padding-right: 45.5%;
}
    .style_img1{
    margin: 0 10%;
}
    .style_ttl{
    font-size: 1.6rem;
    margin-top: 1.4rem;
    margin-bottom: .5rem;
}
    .style_mes{
    font-size: 1.4rem;
}
    .style_img2{width: 47.5%;top: 51.4%;}
    .style_box:nth-child(1) .style_img2{
    right: auto;
    left: -4%;
}
    .style_box:nth-child(2) .style_img2{
    left: auto;
    right: -4%;
}

}

/*　
---------------------------------------------------------*/
.item{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 59px;
    gap: 0 4%;
}
.item_box{
}
.item_img{}
.item_ttl{font-weight: 400;font-size: 16px;line-height: 1.5;text-align: center;margin: 20px 0 6px;}
.item_mes{
    font-size: 14px;
    line-height: 1.5;
}




/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 767px) {

    .item{
    grid-template-columns: 1fr 1fr;
    margin-top: 4rem;
    gap: 4rem 10%;
}
    .item_box{}
    .item_img{}
    .item_ttl{
    font-size: 1.6rem;
    margin: 1.3rem 0 .6rem;
    letter-spacing: .1em;
    text-align: left;
}
    .item_mes{
    font-size: 1.4rem;
}

}

/*　
---------------------------------------------------------*/


.fppt_img{}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 767px) {
    .fppt_img{
    overflow: hidden;
}
    .fppt_img img{}

}