@charset "UTF-8";

*{
box-sizing: border-box;
}

h1{
	background: #269bc9;
background: linear-gradient(119deg, rgba(38, 155, 201, 1) 0%, rgba(53, 97, 184, 1) 15%, rgba(112, 17, 93, 1) 56%, rgba(221, 227, 45, 0.68) 100%);
}

/*---------- 半透明 ---------*/
.boxA{
	background-color: #f00;
	background-color: rgba(255, 0, 0, .5);/*rgba()関数*/
	background-color: hsla(0deg, 100%, 50%, .5);/*hsla()関数*/
	background-color: hsla(180deg, 100%, 50%, .5);/*hsla()関数*/
/*	opacity: 0.5;不透明度（値は0〜1.0）、opacityは要素全体を半透明にする*/
/*	opacity: .5;小数点の最初の0は省略できる*/
}

/*---------- 角丸 ----------*/
.boxB{
	background-color: #3ff;
	width: 400px;
	height: 100px;
/*	border-radius: 20px 40px 60px 0;左上　右上　右下　左下*/
/*	border-radius: 50%;楕円、正方形のボックスなら正円になる。*/
	
	/*ボックスの高さの半分か、大きめの数値を指定すると両サイドが正円になる。*/
/*	border-radius: 50px 50px 50px 50px;*/
/*	border-radius: 200px 200px 200px 200px;*/
/*	border-radius: 9999px;*/
	padding: 10px;
	/*
	左上をAとして時計回りにABCDとする
	AはB方向に20px,D方向に5pxの角丸
	BはA方向に40px,C方向に20pxの角丸
	CはD方向に60px,B方向に30pxの角丸
	DはC方向に0,A方向に50pxの角丸だがC方向が0なので角丸には見えない
	X軸→Y軸の順番
	*/
	border-radius: 20px 40px 60px 0 / 5px 20px 30px 50px;
}

/*---------- ボックスシャドウ ----------*/
.boxC{
	background-color: #f36;
	width: 200px;
	height: 200px;
	/*X軸オフセット　Y軸オフセット　ぼかし　広がり　色 内側指定*/
	box-shadow: 50px -20px 10px 30px #0ff;
	box-shadow: 0 0 10px 0 #3f3 inset, 50px -20px 10px 30px #0ff;
	box-shadow: 5px 5px 0 0 green;
}

/*---------- テキストシャドウ ----------*/
.boxD{
	/*X軸オフセット　Y軸オフセット　ぼかし　色、カンマ(,)で区切ることで効果を増やせる*/
	text-shadow: 5px 5px 10px pink, -3px -3px 0 #00f;
}

/*---------- グラデーション ----------*/
/* linear-gradient() */
.boxE{
	background-image: linear-gradient(to right,red,blue,#0f0,rgb(255, 255, 0),transparent);
	background-image: linear-gradient(to right, red 100px, blue 25%, #0f0 75%, rgb(255, 255, 0) 75%);
}

/* radial-gradient() */
.boxF{
	/*面倒だからCSS グラデーション ジェネレーターで検索*/
	background-image: radial-gradient(circle farthest-side at right bottom, red, blue, cyan);
	width: 400px;
	height: 300px;
}

/*---------- 変形 ----------*/
/* 拡大・縮小 */
.boxG1{
	background-color: #69f;
	width: 200px;
	height: 200px;
	
	transform: scale(0.5, 2);/*scale(X軸,Y軸)、scale(1, 1)は本来の大きさ*/
}


/* XとY軸移動 */
.boxG2{
	background-color: #69f;
	width: 200px;
	height: 200px;
	
	transform: translate(20px, -50px);/*translate(X軸方向,Y軸方向)*/
	transform: translate(100%, 50%);/*本来の大きさを基準*/
}

/* 回転 */
.boxG3{
	background-color: #69f;
	width: 200px;
	height: 200px;
	
	transform: rotate(-45deg);/*rotate(角度deg)*/
	transform: rotate(-45deg) translate(100%,50%) scale(0.5, 1);/*半角スペースで繋げる*/
	transform-origin: left top;/*変形させる要素の基準点・中心点の位置を指定*/
}

/*---------- 変化 ----------*/
/*変化前のスタイル*/
.boxH{
	background-color: #69f;
	padding: 16px;
	display: inline-block;
	border-radius: 9999px;
	cursor: pointer;
	
	transition-duration: 2s;
	transition-property: background-color;/*プロパティを指定*/
	transition-property: all;
	transition-timing-function: steps(5,start);
	transition-delay: 1s;
	transition: 2000ms all steps(5,start) 1s;
	transition: 1s;
}

/*変化後のスタイル*/
.boxH:hover{
	background-color: #96f;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	transform: translate(0,-5px);
}

/*---------- フィルター ----------*/
.boxI{
	filter: blur(5px);
	filter: grayscale(100%);
	filter: brightness(50%);
	filter: hue-rotate(180deg);
	filter: blur(5px) brightness(50%) hue-rotate(180deg);/*半角スペースで繋げる*/
}

/*---------- プロパティ関数 ----------*/
/* rgba() */
.boxJ{
	
}

/* calc() */
.boxK{
	background-color: #f69;
	width: 50%;
	width: calc(100% - 100px);
	width: calc(50% + 100px);
	width: calc(100px * 3);
	width: calc(100% / 3 * 2);
	font-size: calc(100vw / 50);
}