// ==================================================
//  typography
// ==================================================
// $baseFontFamily: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
@use "sass:math";

$baseFontFamily: 'Mplus 1p', 'Yu Gothic', YuGothic, '游ゴシック','游ゴシック体','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
$subFontFamily: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
$cormorantGaramond: 'Cormorant Garamond', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
$EBGaramond: 'EB Garamond', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
$baseFontSize: 63%;
$baseLineHeight: 1.6;

@mixin fs($size, $base: 10) {
	font-size: $size + px;
	font-size: math.div($size, $base) + rem;
}
// ==================================================
//  sizing
// ==================================================
$baseMinWidth: 1120px;
$mainContWidth: 980px;
$subContWidth: 750px;

// ==================================================
//  sidebar
// ==================================================
$sidebarWidth: 230px;

// ==================================================
//  colors
// ==================================================
$base:      #ff7f00;
$sub:       #861313;
$accent:    #450000;
$color1:    #917574;
$color2:    #5C95BC;
$color3:    #FC7081;
$color4:    #FA7B42;
$rgba1:     rgba(62,194,139,0.7);
$rgba2:     rgba(92,149,188,0.7);
$rgba3:     rgba(252,112,129,0.7);
$rgba4:     rgba(250,123,66,0.7);
$med1:      rgba(62,194,139,0.5);
$med2:      rgba(92,149,188,0.5);
$med3:      rgba(252,112,129,0.5);
$med4:      rgba(250,123,66,0.5);
$light1:    rgba(62,194,139,0.3);
$light2:    rgba(92,149,188,0.3);
$light3:    rgba(252,112,129,0.3);
$light4:    rgba(250,123,66,0.3);
$dark1:     #35A878;
$dark2:     #4F81A3;
$dark3:     #F03D5F;
$dark4:     #FB671E;
$bg1:       #ffffdd;
$bg2:       #93BEA6;
$bg2:       #90cfab;
$bg3:       #EC6971;

$prog:      #fff;
$progBg:    #39605E;


$cvColor:      #FE9300;
$cvSubColor:   #FF6100;
$cvHoverColor: #FF6100;

$white:     #fff;
$silver:    #F4F4F4;
$midsilver: #e9e9e9;
$lightgrey: #ccc;
$grey:      #999;
$midgrey:   #444;
$darkgrey:  #222;
$black:     #1A1A1A;
$trueblack: #000;
$bgColor:   #1A1A1A;

$baseFontColor: $darkgrey;
$subFontColor: $sub;
$accentFontColor: $accent;
$coral: #FF7F50;
$priceRed: #F90000;

// ==================================================
//  syntax
// ==================================================
// Cools
// --------------------------------------------------
$paleblue:   #BDDCDC;
$blue:       #92BFBF;
$slate:      #5F777E;
$palegreen:  #D0EDA7;
$green:      #B4D388;
$darkgreen:  #809161;

// Warms
// --------------------------------------------------
$paleyellow: #F5F5AE;
$yellow:     #EDE480;
$orange:     #F49D62;
$red:        #CF5340;
$darkred:    #893121;
$maroon:     #55201B;

// ==================================================
//  linkstyle
// ==================================================
$linkColor: $baseFontColor;
$linkFontWeight: bold;
$hoverColor: $sub;
$linkDecoration: none;
$hoverDecoration: none;
$linear: 0.15s all linear;
$ease: 0.15s all ease-in-out;

// ==================================================
//  whitespace
// ==================================================
$baseMargin: 20px;
$basePadding: 20px;
$tablePadding: 10px;

// ==================================================
//  borders
// ==================================================
$baseBorderStyle: solid;
$borderColor: $lightgrey;
$baseBorderRadius: 5px;
$baseBorderWidth: 1px;
$baseBorder: $baseBorderStyle $borderColor $baseBorderWidth;

// ==================================================
//  breakpoints
// ==================================================

// XS ( Extra small devices ) :
// iPhoneのポートレート（縦向き）：320px 〜
// SM ( Small devices ) :
// iPadのポートレート：768px〜

// MD ( Medium devices ) :
// 中間サイズデバイス・小型PC：992px〜

// LG ( Large devices ) :
// 一般的なPCのサイズ：1200px〜

$xsMinSize: 320px;
$smMinSize: 768px;
$mdMinSize: 992px;
$lgMinSize: 1200px;
$xlMinSize: 9999px;

$xsBreak: $smMinSize - 1px;
$smBreak: $mdMinSize - 1px;
$mdBreak: $lgMinSize - 1px;

// 対象サイズ未満のみ
// --------------------------------------------------
@mixin ltXXS() {
	@media screen and (max-width: 374px) {@content;}
}
@mixin ltXS() {
	@media screen and (max-width: $xsBreak) {@content;}
}
@mixin ltSM() {
	@media screen and (max-width: $smBreak) {@content;}
}
@mixin ltMD() {
	@media screen and (max-width: $mdBreak) {@content;}
}

// 対象サイズ以上のみ
// --------------------------------------------------
@mixin gtSM() {
	@media screen and (min-width: $smMinSize) {@content;}
}
@mixin gtMD() {
	@media screen and (min-width: $mdMinSize) {@content;}
}
@mixin gtLG() {
	@media screen and (min-width: $lgMinSize) {@content;}
}

// 対象サイズ範囲内のみ（ほぼ使わない）
// --------------------------------------------------
@mixin inXS() {
	@include ltXS;
}
@mixin inSM() {
	@media screen and (min-width:$smMinSize) and ( max-width:$smBreak) {@content;}
}
@mixin inMD() {
	@media screen and (min-width:$mdMinSize) and ( max-width:$mdBreak) {@content;}
}
@mixin inLG() {
	@include gtLG;
}