@charset "UTF-8";
/* =========================================================
O-BGSHAPE / 背景図形コンポーネント
レスポンシブ対応、再利用可能な背景装飾図形
========================================================= */
[class^="o-bgshape"] {
	position: absolute;
	z-index: 1;
	width: var(--size);
	height: var(--size);
	aspect-ratio: 1/1;
	display: block;
	object-fit: cover;

}
.o-bgshapeHero01 {
	top: 0;
	left: 0;
	--size: clamp(25px, 10vw, 50px);
}
.o-bgshapeHero02 {
	bottom: var(--postition);
	left: var(--postition);
	--size: clamp(25px, 1vw, 50px);
    --postition: -25px;
}


.o-bgshapeStrength01 {
	top: var(--postition);
	left: 0;
    --postition: -50px;
	--size: clamp(50px, 10vw, 100px);
}
.o-bgshapeStrength02 {
	bottom: -25px;
    right: 0;
    --size: clamp(100px, 20vw, 250px);
    aspect-ratio: auto;
    height: auto;
    z-index: -1;
}

.o-bgshapeStrength03 {
	bottom: 0;
    left: -3px;
	--size: clamp(160px, 30vw, 300px);
    aspect-ratio: auto;
    height: auto;
    z-index: -1;
}

.o-bgshapeCase01 {
	top: var(--postition);
	right: 0;
    --postition: -7.1vw;
	--size: clamp(50px, 10vw, 300px);
	z-index: 2;
    @media (max-width: 1024px) {
		display: none;
    }
}

.o-bgshapeFlow01 {
	top: -1px;
	right: -1px;
	--size: clamp(50px, 50vw, 300px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapeFlow02 {
	bottom: 0;
	left: 0;
	--size: clamp(50px, 30vw, 300px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapeFlow03 {
	bottom: -80px;
	right: 0;
	--size: clamp(50px, 50vw, 300px);
    z-index: 2;
    height: 80px;
    aspect-ratio: inherit;
}


/* 講座詳細ページ */
.o-bgshapePurcahse01 {
	top: -4vw;
	left: 0;
	--size: clamp(50px, 50vw, 200px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapePurcahse02 {
	top: -4vw;
	right: 0;
	--size: clamp(50px, 20vw, 300px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapePurcahse03 {
	bottom: -50px;
	right: 0;
	--size: clamp(50px, 50vw, 300px);
    z-index: 2;
    height: 50px;
    aspect-ratio: inherit;
}

/* =========================================================
O-BGSHAPE / base & bar
========================================================= */

/* 基本設定 */
.o-bgshape {
	--size: clamp(1.5rem, 2vw, 3rem);
	
	width: var(--size);
	height: var(--size);
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.o-bgshape img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* サイズバリエーション */
.o-bgshape.__small {
	--size: clamp(1rem, 1.5vw, 2rem);
}

.o-bgshape.__large {
	--size: clamp(2rem, 3vw, 4.5rem);
}

.o-bgshape.__xlarge {
	--size: clamp(3rem, 4vw, 6rem);
}

/* アニメーション（オプション） */
.o-bgshape.__animate {
	animation: bgshapeFloat 3s ease-in-out infinite;
}

@keyframes bgshapeFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10%) rotate(5deg);
	}
}

/* 位置パターン */
.o-bgshape.__topLeft,
.o-bgshape.__topRight,
.o-bgshape.__bottomLeft,
.o-bgshape.__bottomRight {
	position: absolute;
}

.o-bgshape.__topLeft {
	top: 0;
	left: 0;
}

.o-bgshape.__topRight {
	top: 0;
	right: 0;
}

.o-bgshape.__bottomLeft {
	bottom: 0;
	left: 0;
}

.o-bgshape.__bottomRight {
	bottom: 0;
	right: 0;
}