// Breakpoints
$breakpoint-small: 768px;
$breakpoint-medium: 1024px;
$breakpoint-menu: 1230px;
$breakpoint-large: 1200px;

// FontFamily
$font-family: Raleway, "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, Arial, sans-serif;
$heading-font-family: $font-family;
$monospace-font-family: Consolas, Monaco, "Courier New", monospace;

// Font Weight
$font-weight-200: 200;
$font-weight-300: 300;
$font-weight-400: 400;
$font-weight-500: 500;
$font-weight-700: 700;
$font-weight-900: 900;


// Baseline
$base-unit: 4px;
$base-line: 26px;
$base-line-small: 20px;
$base-line-smaller: 16px;

// Grid
$grid-columns: 12;
$grid-width: 1128; // pixels
$grid-gutter: $base-line;
$grid-gutter-integer: ($grid-gutter / ($grid-gutter * 0 + 1));
$grid-gap: ($grid-gutter-integer / ($grid-width / 100)) * 1%;

// Z Indexes
$z-over-content: 100;
$z-over-control: 200;
$z-over-page: 300;
$z-over-screen: 400;
$z-over-all: 500;

// Text font size
$font-size-regular: 16px;

$font-size-big: $font-size-regular + 2px;
$font-size-small: $font-size-regular - 2px;
$font-size-smaller: $font-size-regular - 4px;

// UI font size
$ui-font-size: $font-size-small;
$ui-font-size-small: $font-size-smaller;
$ui-font-size-big: $font-size-big;

// Headings
$title-font-size: 60px;
$h1-font-size: 48px;
$h2-font-size: 44px;
$h3-font-size: 24px;
$h4-font-size: 20px;
$h5-font-size: 16px;
$h6-font-size: 12px;

$title-line-height: 64px;
$h1-line-height: 52px;
$h2-line-height: 48px;
$h3-line-height: 28px;
$h4-line-height: 24px;
$h5-line-height: $base-line;
$h6-line-height: 20px;

// Spaces
$heading-margin-bottom: 60px;
$paragraph-margin-bottom: 16px;

// Color
$body-text-color: #444;
$header-text-color: #111;
$key-color-blue: #0f3670;
$key-color-lightblue: #00b2c2;
$key-color-orange: #ff984a;
$color-red: #f34248;
$color-beige: #f9f8f7;
$color-feature-blue: #e3f1f4;
$input-text-color: #333;
$samp-text-color: #fff;
$input-append-text-color: #555;

// Color States
$color-default: #f4f4f4;
$color-primary: #0B9Bc1;
$color-success: #60ae4d;
$color-error:   #f34248;
$color-warning: #fed443;
$color-contact-button: #c1160b;

// Links
$link-color: $key-color-blue;
$link-hover-color: #4d7fb8;


// Background
$body-background-color: #fff;
$section-gray-background-color: #f7f9f9;
$pre-background-color: #f8f8f8;
$mark-background-color: $color-warning;
$code-background-color: $color-default;
$samp-background-color: lighten($color-primary, 7%);
$highlight-background-color: rgba($color-primary, .075);

// Kbd
$kbd-border: 1px solid rgba(0, 0, 0, .1);

// Table
$table-striped-background-color: #f1f1f1;
$table-border: 1px solid #c6c6c6;


// Label
$label-font-size: $ui-font-size;
$label-color: #111;
$label-font-weight: normal;

// Input
$input-disabled-opacity: 0.75;
$input-disabled-color: rgba(0, 0, 0, .5);
$input-border-size: 1px;
$input-border-color: #dfdfdf;
$input-focus-border-color: #bbb;
$input-background-color: #fff;
$input-focus-background-color: #fff;
$input-append-background-color: #eee;
$input-padding: 8px 10px;
$input-padding-big: 16px 10px;

// Fieldset
$fieldset-border-color: rgba(0, 0, 0, .1);
$fieldset-border-size: 1px;

// Button
$button-background-color: #eee;
$button-font-weight: normal;
$button-outline-font-weight: normal;
$button-outline-border-size: 1px;
$button-padding-small: 0 20px;
$button-padding: 0 40px;
$button-padding-big: 0 48px;

// Width
$base-width: 1000px;

// Height
$ui-height-small: 32px;
$ui-line-height-small: 32px;
$ui-height: 40px;
$ui-line-height: 38px;
$ui-height-big: 48px;
$ui-line-height-big: 46px;
$header-height: 66px;
$header-medium-height: 50px;

// Overlay
$overlay-background-color: rgba(255, 255, 255, .9);
.modal-box {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 110;

	.modal-overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  background:  rgba( 0, 0, 0,0.4);
	  width: 100%;
	  height: 100vh;
	}

	.modal-body {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background: #fff;
	  border: 1px solid $key-color-lightblue;
	  width: 500px;
		box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.30);
		
		.modal-inner {
			position: relative;
		}
	  
	  .modal-header {
	  	margin: 0;
	  	padding: 50px 15px 20px;
	  	border-bottom: 1px solid rgba(0, 0, 0, .05);
	  	color: $key-color-lightblue;
	  	font-size: 18px;
	  	font-weight: $font-weight-500;
	  	text-align: center;
	  }
		  
	  .modal-close {
	    position: absolute;
	  	top: 5px;
	  	right: 10px;
	  	text-align: right;
	  	cursor: pointer;
	  	
			&:before {
				margin-right: 0.5em;
				font-family: FontAwesome;
				content: '✕';
			}

	  	opacity: .7;
	  	
	  	&:hover {
	      	opacity: 1;
	  	}
	  }

		.modal-formarea {
	      padding: 20px 40px;
	      
	      p{
	      	font-size: 15px;
	      	line-height: 1.5;
	      }
	  }

		.modal-form{
			text-align: right;
			
		  input[type="text"],
		  input[type="email"],
		  input[type="url"] {
  	    font-size: 16px;
  	    line-height: 1.2;
  	    width: 100%;
  	    margin-bottom: 20px;
		  }

		  input.button{
		  	@include button(#fff, $key-color-lightblue);
		  }

		  .error{
		  	text-align: left;
		  	margin-top: -10px;
		  	margin-bottom: 15px;
		  }
		}
	}
}

@keyframes modal{
  0% {top: -100%}
  100% {top: 50%}
}
@keyframes modalClose {
  0% {top: 50%}
  100% {top: 100%}
}



// Responsive
@media (max-width: $breakpoint-small) {
	.modal-box{
		.modal-body{
			width: 90vw;

			.modal-formarea {
			  padding: 20px 15px;
			}
		}
  }
}