@charset "utf-8";

/* *****************************
 * SiteCommerce : root
 * **************************** */

:root {
	--col-r1: 255, 0, 0;
	--col-r2: 255, 0, 95;
	--col-r3: 255, 0, 239;
	--col-rb: 127, 0, 255;
	--col-b1: 0, 47, 255;
	--col-b2: 0, 111, 255;
	--col-b3: 0, 191, 255;
	--col-bg: 0, 255, 255;
	--col-g1: 0, 255, 111;
	--col-g2: 63, 255, 0;
	--col-g3: 207, 255, 0;
	--col-gr: 255, 159, 0;
	--col-white: 255, 255, 255;
	--col-palewhite: 251, 251, 253;
	--col-bluewhite: 227, 237, 247;
	--col-whitegray: 223, 223, 223;
	--col-lightgray: 191, 191, 191;
	--col-gray: 127, 127, 127;
	--col-darkgray: 63, 63, 63;
	--col-black: 0, 0, 0;
	--col-lavender: 230, 230, 250; 
	--col-ghostwhite: 248, 248, 255;
	--col-transparent: transparent;
	--col-primary: var(--col-b2);
	--col-secondary: var(--col-gray);
	--col-success: 109, 217, 0;
	--col-danger: var(--col-r1);
	--col-warning: var(--col-gr);
	--col-info: var(--col-bg);
	--ft-col: var(--col-black);
	--bd-col: var(--col-whitegray);
	--bg-col: var(--col-white);
	--bgb-col: var(--col-white);
	--bg-grad: linear-gradient(var(--bg-col), var(--bgb-col));

	--alpha: 0.3;

}

/* *****************************
 * 透明度
 * **************************** */ 
:root {
	--opa-0: 0;
	--opa-1: 10%;
	--opa-2: 20%;
	--opa-3: 30%;
	--opa-4: 40%;
	--opa-5: 50%;
	--opa-6: 60%;
	--opa-7: 70%;
	--opa-8: 80%;
	--opa-9: 90%;
	--opa-10: 100%;
	--opa: var(--opa-10);
}
.opa-0 {
	--opa: var(--opa-0);
	opacity: var(--opa);
}
.opa-1 {
	--opa: var(--opa-1);
	opacity: var(--opa);
}
.opa-2 {
	--opa: var(--opa-2);
	opacity: var(--opa);
}
.opa-3 {
	--opa: var(--opa-3);
	opacity: var(--opa);
}
.opa-4 {
	--opa: var(--opa-4);
	opacity: var(--opa);
}
.opa-5 {
	--opa: var(--opa-5);
	opacity: var(--opa);
}
.opa-6 {
	--opa: var(--opa-6);
	opacity: var(--opa);
}
.opa-7 {
	--opa: var(--opa-7);
	opacity: var(--opa);
}
.opa-8 {
	--opa: var(--opa-8);
	opacity: var(--opa);
}
.opa-9 {
	--opa: var(--opa-9);
	opacity: var(--opa);
}
.opa-10 {
	--opa: var(--opa-10);
	opacity: var(--opa);
}


/* *****************************
 * クラス：境界色スタイル
 * **************************** */ 

.bd {
	border-color: rgba(var(--bd-col), 1);
}
.bd-light {
	border-color: rgba(var(--bd-col), .75);
}
.bd-lighter {
	border-color: rgba(var(--bd-col), .5);
}
.bd-lightest {
	border-color: rgba(var(--bd-col), .25);
}
.bd-ultralight {
	border-color: rgba(var(--bd-col), .1);
}
.bd-col-white {
	--bd-col: var(--col-white);
}
.bd-col-palewhite {
	--bd-col: var(--col-palewhite);
}
.bd-col-whitegray {
	--bd-col: var(--col-whitegray);
}
.bd-col-lightgray {
	--bd-col: var(--col-lightgray);
}
.bd-col-gray {
	--bd-col: var(--col-gray);
}
.bd-col-darkgray {
	--bd-col: var(--col-darkgray);
}
.bd-col-black {
	--bd-col: var(--col-black);
}
.bd-col-r1 {
	--bd-col: var(--col-r1);
}
.bd-col-r2 {
	--bd-col: var(--col-r2);
}
.bd-col-r3 {
	--bd-col: var(--col-r3);
}
.bd-col-rb {
	--bd-col: var(--col-rb);
}
.bd-col-b1 {
	--bd-col: var(--col-b1);
}
.bd-col-b2 {
	--bd-col: var(--col-b2);
}
.bd-col-b3 {
	--bd-col: var(--col-b3);
}
.bd-col-bg {
	--bd-col: var(--col-bg);
}
.bd-col-g1 {
	--bd-col: var(--col-g1);
}
.bd-col-g2 {
	--bd-col: var(--col-g2);
}
.bd-col-g3 {
	--bd-col: var(--col-g3);
}
.bd-col-gr {
	--bd-col: var(--col-gr);
}
.bd-col-lavender {
	--bd-col: var(--col-lavender);
}
.bd-col-ghostwhite {
	--bd-col: var(--col-ghostwhite);
}

/* *****************************
 * クラス：背景色スタイル
 * **************************** */ 

.bg {
	background: rgba(var(--bg-col), 1);
}
.bg-light {
	background: rgba(var(--bg-col), .75);
}
.bg-lighter {
	background: rgba(var(--bg-col), .5);
}
.bg-lightest {
	background: rgba(var(--bg-col), .25);
}
.bg-ultralight {
	background: rgba(var(--bg-col), .1);
}
.bg-grad {
	background: linear-gradient(rgba(var(--bg-col), 1), rgba(var(--bgb-col), 1));
}
.bg-grad-light {
	background: linear-gradient(rgba(var(--bg-col), .75), rgba(var(--bgb-col), .75));
}
.bg-grad-lighter {
	background: linear-gradient(rgba(var(--bg-col), .5), rgba(var(--bgb-col), .5));
}
.bg-grad-lightest {
	background: linear-gradient(rgba(var(--bg-col), .25), rgba(var(--bgb-col), .25));
}
.bg-grad-ultralight {
	background: linear-gradient(rgba(var(--bg-col), .1), rgba(var(--bgb-col), .1));
}
.bg-col-white {
	--bg-col: var(--col-white);
}
.bg-col-palewhite {
	--bg-col: var(--col-palewhite);
}
.bg-col-bluewhite {
	--bg-col: var(--col-bluewhite);
}
.bg-col-whitegray {
	--bg-col: var(--col-whitegray);
}
.bg-col-lightgray {
	--bg-col: var(--col-lightgray);
}
.bg-col-gray {
	--ft-col: var(--col-white);
	--bg-col: var(--col-gray);
}
.bg-col-darkgray {
	--ft-col: var(--col-white);
	--bg-col: var(--col-darkgray);
}
.bg-col-black {
	--ft-col: var(--col-white);
	--bg-col: var(--col-black);
}
.bg-col-transparent {
	--bg-col: var(--col-transparent);
}
.bg-col-r1 {
	--bg-col: var(--col-r1);
}
.bg-col-r2 {
	--bg-col: var(--col-r2);
}
.bg-col-r3 {
	--bg-col: var(--col-r3);
}
.bg-col-rb {
	--bg-col: var(--col-rb);
}
.bg-col-b1 {
	--bg-col: var(--col-b1);
}
.bg-col-b2 {
	--bg-col: var(--col-b2);
}
.bg-col-b3 {
	--bg-col: var(--col-b3);
}
.bg-col-bg {
	--bg-col: var(--col-bg);
}
.bg-col-g1 {
	--bg-col: var(--col-g1);
}
.bg-col-g2 {
	--bg-col: var(--col-g2);
}
.bg-col-g3 {
	--bg-col: var(--col-g3);
}
.bg-col-gr {
	--bg-col: var(--col-gr);
}
.bg-col-info {
	--bg-col: var(--col-bluewhite);
}
.bg-col-lavender {
	--bg-col: var(--col-lavender);
}
.bg-col-ghostwhite {
	--bg-col: var(--col-ghostwhite);
}

/* *****************************
 * クラス：文字色スタイル
 * **************************** */ 

.ft {
	color: rgba(var(--ft-col), 1) !important;
}
.ft-shadow {
	text-shadow: 1px 1px 2px rgb(var(--bg-col));
}
.ft-shadow-2 {
	text-shadow: 
		1px 1px 1px rgb(var(--bg-col), 0.8),
		2px 1px 1px rgb(var(--bg-col), 0.8),
		1px 2px 1px rgb(var(--bg-col), 0.8);
}
.ft-shadow-2r {
	text-shadow: 
		-1px -1px 1px rgb(var(--bg-col), 0.8),
		-2px -1px 1px rgb(var(--bg-col), 0.8),
		-1px -2px 1px rgb(var(--bg-col), 0.8);
}
.ft-shadow-3 {
	text-shadow: 
		-1px -1px 1px rgb(var(--bd-col), 0.8),
		1px 1px 1px rgb(var(--bg-col), 0.8),
		2px 1px 1px rgb(var(--bg-col), 0.8),
		1px 2px 1px rgb(var(--bg-col), 0.8);
}
.ft-light {
	color: rgba(var(--ft-col), .75);
}
.ft-lighter {
	color: rgba(var(--ft-col), .5);
}
.ft-lightest {
	color: rgba(var(--ft-col), .25);
}
.ft-ultralight {
	color: rgba(var(--ft-col), .1);
}
.ft-col-white {
	--ft-col: var(--col-white);
}
.ft-col-whitegray {
	--ft-col: var(--col-whitegray);
}
.ft-col-lightgray {
	--ft-col: var(--col-lightgray);
}
.ft-col-gray {
	--ft-col: var(--col-gray);
}
.ft-col-darkgray {
	--ft-col: var(--col-darkgray);
}
.ft-col-black {
	--ft-col: var(--col-black);
}
.ft-col-r1 {
	--ft-col: var(--col-r1);
}
.ft-col-r2 {
	--ft-col: var(--col-r2);
}
.ft-col-r3 {
	--ft-col: var(--col-r3);
}
.ft-col-rb {
	--ft-col: var(--col-rb);
}
.ft-col-b1 {
	--ft-col: var(--col-b1);
}
.ft-col-b2 {
	--ft-col: var(--col-b2);
}
.ft-col-b3 {
	--ft-col: var(--col-b3);
}
.ft-col-bg {
	--ft-col: var(--col-bg);
}
.ft-col-g1 {
	--ft-col: var(--col-g1);
}
.ft-col-g2 {
	--ft-col: var(--col-g2);
}
.ft-col-g3 {
	--ft-col: var(--col-g3);
}
.ft-col-gr {
	--ft-col: var(--col-gr);
}
.ft-col-lavender {
	--ft-col: var(--col-lavender);
}
.ft-col-ghostwhite {
	--ft-col: var(--col-ghostwhite);
}

/* *****************************
 * クラス：透明度
 * **************************** */
.bright-0 {
	opacity: 100%;
}
.bright-1 {
	opacity: 80%;
}
.bright-2 {
	opacity: 60%;
}


/* *****************************
 * 装飾クラス：ブレンド
 * **************************** */
.blend {
	position: relative;
}

.blend-1 {
	--alpha:0.1;
}

.blend-3 {
	--alpha:0.3;
}

.blend-5 {
	--alpha:0.5;
}

.blend-7 {
	--alpha:0.7;
}

.blend-9 {
	--alpha:0.9;
}

.blend-alpha {
	position: relative;	
}
.blend-alpha:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(var(--bg-col), var(--alpha));
}

.blend:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(var(--bg-col), var(--alpha));
	z-index:-1;
}
.blend-edgedark:before {
	background: radial-gradient(farthest-side, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0) 50% /*, rgba(0,0,0, 0.2) 70%*/ , rgba(0, 0, 0, 0.3) 100%);
}
.blend-downdark:before {
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 1) 100%);
}
.blend-edgelight:before {
	background: radial-gradient(closest-side, rgba(var(--bg-col), 0) 0%, rgba(var(--bg-col), 0) 70%, rgba(var(--bg-col), 0.9) 80%, rgba(var(--bg-col), 0.99) 90%, rgba(var(--bg-col), 1.0) 100%);
}
.blend-uplight:before {
	background: linear-gradient(rgba(var(--bg-col), 1) 0%, rgba(var(--bg-col), 0.0) 30%, rgba(var(--bg-col), 0) 100%);
}
.blend-updown:before {
	background: linear-gradient(rgba(var(--bd-col), 1) 0%, rgba(var(--bd-col), 0) 30%, rgba(var(--bg-col), 0) 70%, rgba(var(--bg-col), 1) 100%);
}
.blend-leftright:before {
	background: linear-gradient(90deg, rgba(var(--bg-col), 1) 0%, rgba(var(--bg-col), 0) 20%, rgba(var(--bg-col), 0) 80%, rgba(var(--bg-col), 1) 100%);
}
.blend-topbottom:before {
	background: linear-gradient(0deg, rgba(var(--bg-col), 1) 0%, rgba(var(--bg-col), 0.2) 20%, rgba(var(--bg-col), 0.2) 80%, rgba(var(--bg-col), 1) 100%);
}
/* ブレンド対象が画像の場合、レイヤーを下げる */
.blend > img, .blend > video {
	position: inherit;
	z-index: -2;
}
.mix-softlight {
	mix-blend-mode: soft-light;
}

/* *****************************
 * 装飾クラス：簡易ブレンド
 * **************************** */
:root {
	--brightness-3 : 30%;
	--brightness-5 : 50%;
	--brightness-7 : 70%;
	
	--brightness : var(--brightness-5);
}

.dark {
	filter: brightness(var(--brightness));
}

.dark-3 {
	--brightness : var(--brightness-3);
}
.dark-5 {
	--brightness : var(--brightness-5);
}
.dark-7 {
	--brightness : var(--brightness-7);
}

.img-dark {
	--bg-col: var(--col-black);
	background-color: rgb(var(--bg-col));
}
.img-dark > img, .img-dark > video {
	opacity: 80%;
}