@charset "UTF-8";

.box01 {
    margin-bottom: 70px;
}


.box01 .float_sb > div {
    width: 50%;
}

.box01 .float_sb .sb_r {
    height: 500px;
}

.box01 .float_sb .sb_r {
    background-image: url("../images/about/img_01.png");
    background-size: cover;
    background-repeat: no-repeat;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .box01 .float_sb .sb_r {
        background-image: url("../images/about/img_01@2x.png");
        background-size: cover;
    }
}

.box01 .sb_inner {
    max-width: 470px;
    margin-left: auto;
    padding-top: 170px;
}



.box02 {
    position: relative;
    background-image: url("../images/about/img_04.png");
    background-position: center bottom;
    padding-bottom: 60px;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .box02 {
        background-image: url("../images/about/img_04.png");
        background-size: 1402px 280px;
    }
}

.box02 .float_sb .sb_l {
    background-image: url("../images/about/img_02.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .box02 .float_sb .sb_l {
        background-image: url("../images/about/img_02@2x.png");
        background-size: 960px 496px;
    }
}

.box02 .float_sb > div {
    width: 50%;
}

.box02 .float_sb .sb_l {
    height: 500px;
}

.box02 .sb_inner {
    max-width: 470px;
    margin-right: auto;
    padding-top: 70px;
}


.box03 {
    margin-bottom: 100px;
}

.box03 .float_ce {
    margin-top: 33px;
}

.box03 .float_ce a {
    margin: 0 25px;
}

.box04 {
    margin-top: 130px;
    margin-bottom: 100px;
}

.box04 .ft_l {
    width: 570px;
}

.box04 .ft_l p {
    max-width: 450px;
}

.box04 .ttl_06 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.box04 .ttl_06 span {
    padding-right: 125px;
}

.box04 p {
    margin-bottom: 20px;
    font-size: 15px;
}




.box04 .youtube {
	text-align: center;
	margin: 100px 0 70px;
}

.box04 .youtube iframe {
	width: 700px;
	margin: 0 auto;
    padding: 5px;
    background-color: #ddd;
}



.box05{
    
}
.box05 h2{
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    line-height: 1.4em;

}
.box05 h2 .marker{
    font-size: 25px !important;
}

.box05 .main_cont p{
    margin-bottom: 15px;
    text-align: center;
}

.box05 .float_sb{
    margin-top: 15px;
    padding-top: 35px;
    background-image:url("../images/about/icon_01.jpg");
    background-position: center center;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .box05 .float_sb{
        background-image:url("../images/about/icon_01@2x.jpg");
        background-size: 25px 36px;
    }
}
.box05 .float_sb>div{
    width: 47.5%;
    text-align: center;
}
.box05 .float_sb>div img{
    width: 100%;
}

.box05 .float_sb>div span{
    display: block;
    margin-top: 10px;
}

/*-------------------------------
media
--------------------------------*/



@media (max-width: 767px) {
    .about {
        padding: 0 15px;
    }

    .box01 {
        margin-bottom: 70px;
        padding-bottom: 10px;
    }

    .box01 .float_sb > div {
        width: 100%;
    }

    .box01 .sb_inner {
        max-width: 100%;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 30px;
        padding-top: 70px;
    }

    .box01,
    .box02 {
        background-image: none;
    }

    .box01 .float_sb .sb_r {
        height: 150px;
    }


    .box02 .float_sb {
        display: flex !important;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .box02 .float_sb .sb_l {
        order: 2;
        height: 150px;
    }

    .box02 .float_sb .sb_r {
        order: 1;
        margin-bottom: 30px;
    }

    .box02 .float_sb > div {
        width: 100%;
    }

    .box02 .sb_inner {
        max-width: 100%;
    }


    .box03 .float_ce a {
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }

    .box04 .ft_l p {
        max-width: 100%;
    }

    .box04 .ft_l {
        width: 100%;
        margin-bottom: 30px;
    }

    .box04 .ft_r {
        text-align: center;
    }

	.box04 .youtube iframe {
		width: 100%;
		height: 300px !important;
		margin: 30px 0 50px;
	}
    
    .box04 .ttl_06 span {
        padding-right: 0;
    }
    
    .box05 .float_sb{
        background-image:url("../images/about/icon_02.jpg");
        background-position: center;
    }
    @media all and (-webkit-min-device-pixel-ratio: 1.5) {
        .box05 .float_sb{
            background-image:url("../images/about/icon_02@2x.jpg");
            background-size: 36px 25px;
        }
    }

    
    .box05 .float_sb>div{
        width: 100%;
    }
    .box05 .before{
        margin-bottom: 100px;
    }
    
}