// 全体で使用する setting style を記述

//*****************************************
//	variable
//*****************************************

// Color =====
$BASE: #00011c;
$BLACK: #000;
$WHITE: #FFF;


// Width =====
$maxWidth: 1024px;

// Media queries
// ex): @media screen and (val) {}
// min-width : より大きい（ビューエリアの最小幅）/　max-width : より小さい（ビューエリアの最大幅）

$over-tab: 'min-width: 1025px';
$less-tab: 'max-width: 1024px';
$landscape: 'orientation: landscape';
$retina: '-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx';


//*****************************************
//	@Mixin
//*****************************************
@mixin clearfix {
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}
@mixin justify {
	text-align: justify;
	text-justify: inter-ideograph;
}

// CSS Document
$base_design_width : 2048;
$design_width: 2048;

// font size (rem) =====
// ex) @include fs(14, 24, 100);
@mixin fs($size, $line: 32, $space: 0) {
	font-size: calc($size / 2) + px;
	line-height: calc($line / $size);
	letter-spacing: calc($space / 1000) + em;
}
@mixin fsvw($size, $line: 32, $space: 0) {
	font-size: calc($size / 2) + px; /* legacy */
	font-size: calc($size / $design_width) * 100 * 1vw;
	line-height: calc($line / $size);
	letter-spacing: calc($space / 1000) + em;
}
@function fvw($design_width_psd) {
	$fvw: calc($design_width_psd / 1280 * 100);
	@return #{$fvw}vw;
}

// vw size (vw) =============
@mixin vww($size, $base: $design_width) {
	width: calc($size / $base * 100vw);
}
@mixin vwh($size, $base: $design_width) {
	height: calc($size / $base * 100vw);
}

// vw( designSIZE ) vw指定
@function vw($design_width_psd) {
	$vw: calc($design_width_psd / $design_width * 100);
	@return #{$vw}vw;
}

// pw( designSIZE ) %指定
@mixin pw($size, $base: $base_design_width) {
	width: calc($size / $base * 100 * 1%);
}
@function p($design_width_psd, $base: $base_design_width) {
	$pw: calc($design_width_psd / $base * 100%);
	@return #{$pw};
}