/* Scss Document */

/*=======================================================
    reset
========================================================*/

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;

}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

*{
margin:0;
padding:0;
}

/*=======================================================
    font
========================================================*/

// font宣言
.yu-mincho{
  font-family: "Yu Mincho", "YuMincho";//nomalは400 boldは700
}
.font_en{
	font-family: Copperplate,Copperplate Gothic Light,fantasy;
}

// Noto Sans


//ベースカラー 変数

$color-mainTxt: #000;
$color-main:#b25332;
$color-black:#000;
$color-green:#559000;
$color-thinGlay:#f4f4f4;
$color-thinGlay01:#f4f2f0;
$color-footerBottom:#4c4c4c;

//フォントサイズ　基準16px
@mixin fontSize($fontSize, $baseFontSize:16){
	font-size: percentage($fontSize / $baseFontSize);
}

/*=======================================================
	
    ブレークポイント
========================================================*/
// min-width ×××× px以上の場合
$breakpoint-up: (
  'xs': 'screen and (min-width: 321px)',
  'sm': 'screen and (min-width: 400px)',
  'md': 'screen and (min-width: 768px)',
  'lg': 'screen and (min-width: 1101px)',
  'xl': 'screen and (min-width: 1400px)', 
) !default;

// max-width ×××× px未満の場合
$breakpoint-down: (
  'xs': 'screen and (max-width: 320px)',
  'sm': 'screen and (max-width: 399px)',
  'md': 'screen and (max-width: 767px)',
  'lg': 'screen and (max-width: 1101px)',
  'xl': 'screen and (max-width: 1399px)',
) !default;

// @mixinの定義
@mixin mq-up($breakpoint: md) {
	@media #{map-get($breakpoint-up, $breakpoint)} {
    	@content;
  	}
}
@mixin mq-down($breakpoint: md) {
  	@media #{map-get($breakpoint-down, $breakpoint)} {
    	@content;
  	}
}

/*-------------- calc mixin ここから ----------------*/
@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
}
/*-------------- calc mixin ここまで ----------------*/

@mixin opacity($opacity) {
     opacity: $opacity;
     $opacityIE: $opacity * 100;
     filter: alpha(opacity=$opacityIE);
}

/*
 * Mixin for placeholder
 * @include placeholderColor(#00ff00);
 */
@mixin placeholderColor($color) {
    &:placeholder-shown {
        color: $color;
    }
    &::-webkit-input-placeholder {
        color:$color;
    }
    &:-moz-placeholder {
        color:$color;
        opacity: 1;
    }
    &::-moz-placeholder {
        color:$color;
        opacity: 1;
    }
    &:-ms-input-placeholder {
        color:$color;
    }
}