@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */

/* =====================================================================
*    intro
* =================================================================== */
.intro {
	padding: calc(120 / 750 * 100%) 0 calc(160 / 750 * 100%);
}

.intro::before {
	content: "";
	display: block;
	width: calc(218 / 750 * 100%);
	padding-top: calc(572 / 750 * 100%);
	background: url(../images/common/bg_deco3.webp) no-repeat left top;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	margin: calc(-128 / 750 * 100%) 0 0;
}

.intro::after {
	content: "";
	display: block;
	width: calc(323 / 750 * 100%);
	padding-top: calc(514 / 750 * 100%);
	background: url(../images/common/bg_deco5.webp) no-repeat center top;
	background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	margin: 0 0 calc(-103 / 750 * 100%);
}

.intro .inner {
	z-index: 3;
}


.intro_box {
	width: calc(750 / 750 * 100%);
	margin: 0 auto calc(85 / 750 * 100%);
	/* padding-bottom: calc(92 / 750 * 100%); */
}


@media screen and (min-width: 768px) {
	.intro {
		padding: calc(100 / 1400 * 100%) 0 calc(150 / 1400 * 100%);
        background-color: transparent;
	}
    
    .intro::before {
        width: calc(233 / 1400 * 100%);
        padding-top: calc(551 / 1400 * 100%);
        margin: calc(-80 / 1400 * 100%) 0 0;
    }

    .intro::after {
        width: calc(323 / 1400 * 100%);
        padding-top: calc(514 / 1400 * 100%);
        margin: 0 0 calc(-140 / 1400 * 100%);
    }
    
        
    .intro_box {
        width: calc(900 / 1200 * 100%);
        margin: 0 auto calc(165 / 1200 * 100%);
        /* padding-bottom: calc(92 / 750 * 100%); */
    }
    
            }

@media screen and (min-width: 1400px) {
	.intro {
		padding: 100px 0 150px;
	}
    
    .intro::before {
        width: 233px;
        padding-top: 551px;
        margin: -80px 0 0;
    }

    .intro::after {
        width: 268px;
        padding-top: 513px;
        margin: 0 0 -140px;
    }
}

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