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

/* 背景色 */
.bg__main {background-color: var(--main-color);}
.bg__sub01 {background-color: var(--sub-color_01);}

.bg__white {background-color: var(--white);}
.bg__black {background-color: var(--black);}
.bg__yellow {background-color: var(--yellow);}

/* 背景色(方眼紙風) */
.bg__graph {
	background: linear-gradient(0deg, transparent calc(100% - 1px), #e1f4f6 calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), #e1f4f6 calc(100% - 1px)) center repeat;
  background-size: 14px 14px;
}

/* 背景画像(リピート無し) */
.bg__img {
	background: url("../images/common/bg-img01.jpg") no-repeat center / cover;
}

/* 背景画像(Y軸リピート) */
.bg__img-y {
	background: url("../images/common/bg-img01.jpg") repeat-y center top / 100%;
}

/* 背景画像(X軸リピート) */
.bg__img-x {
	background: url("../images/common/bg-img01.jpg") repeat-x left center / 100%;
}

/* パララックス背景画像(全面) */
.bg__parallax-bg::before {
	content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-image: url("../images/common/bg-img02.jpg");
    background-size: cover;
}

/* パララックス背景画像(一部) */
.bg__parallax-box {
	position: relative;
    width: 100%;
    height: clamp(250px, 26.5vw, 500px);
}
.bg__parallax-box > div {
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
}
.bg__parallax-box > div > div {
	background: url("../images/common/bg-img01.jpg") no-repeat center / cover;
	position: fixed;
	top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}