@import "bower_components/preboot/less/normalize.less";
@import "bower_components/preboot/less/preboot.less";

// Color
// -----
@white: #FFFFFF;
@black: #151515;
@red: #9D2428;
@blue-grey: #92AAB7;
@pale-red: #CC98A5;
@pale-green: #C0D292;

@light-text-color: @white;
@dark-text-color: fade(@black, 75%);

// Font
// ----
@font-size-base: 62.75%;
@font-family-sans-serif: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
@font-family-serif: 'Hiragino Mincho Pro','MS PMincho', serif;
@font-family-base: @font-family-sans-serif;

// Size
// ----
@grid-float-breakpoint: 720px;
@mobile-width: @grid-float-breakpoint;

// Base Rule
// ---------
* {
	.box-sizing(border-box);
}

html {
	height: 100%;
	font-size: @font-size-base;
}

body {
	font-size: 1.6rem;
	font-family: @font-family-base;

	@media only screen (max-width: @mobile-width) {
		& {
			font-size: 3vw;
		}
	}

	@media only screen (max-width: 480px) {
		& {
			font-size: 1.3rem;
		}
	}
}

pre {
	font-family: @font-family-base;
}

ul {
	padding-left: 0;
	list-style-position: inside;
}

dl {
	dd {
		margin-bottom: 1em;
	}
}

img {
	touch-callout:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
}

.font-family-serif {
	font-family: @font-family-serif;
}

.font-family-sans-serif {
	font-family: @font-family-sans-serif;
}

// WP Native Class
// ---------------
.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
img[class*="wp-image-"], img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}

.clearfix {
	.clearfix();
}

// Grid Classes
// ------------
.col1 { .make-column(1); }
.col2 { .make-column(2); }
.col3 { .make-column(3); }
.col4 { .make-column(4); }
.col5 { .make-column(5); }
.col6 { .make-column(6); }
.col7 { .make-column(7); }
.col8 { .make-column(8); }
.col9 { .make-column(9); }
.col10 { .make-column(10); }
.col11 { .make-column(11); }
.col12 { .make-column(12); }

// Front Page Style
// -----------------
.front-page-body {
	@base-color: @white;
	@main-color: @red;
	@footer-height: 32px;

	overflow: hidden;

	#background-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('images/front-page-intro-background.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-attachment: fixed;
	}

	#background-movie {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	#background-focus {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
	}

	.header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: @grid-column-padding / 2 0;
		background-color: rgba(255, 255, 255, .5);
		box-shadow: 0 0 10px rgba(0, 0, 0, .5);
		z-index: 2147483647;

		.clearfix();

		h1 {
			.make-column(3);
			margin: 0;

			#header-image-default {
				max-width: 80%;
				height: auto;
				vertical-align: middle;
			}
		}

		nav {
			.make-column(9);

			ul {
				position: absolute;
				right: @grid-column-padding;
				bottom: @grid-column-padding;
				list-style: none;
				margin: 0;
			}

			li {
				display: inline-block;
				margin-left: @grid-column-padding;
			}

			a {
				color: @main-color;
				text-decoration: none;
				font-weight: bold;
				padding: @grid-column-padding / 2;
				.transition(all .5s ease);

				&:hover {
					background-color: @pale-red;
				}
			}
		}
	}

	.bottom-nav {
		position: absolute;
		bottom: @footer-height;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .5);

		ul {
			.clearfix();
			margin: 0;
			list-style: none;
		}

		li {
			.make-column(3);
			padding: 0;
		}

		a {
			display: block;
			padding: 1em 0;
			text-align: center;
			text-decoration: none;
			font-weight: bold;
			color: @light-text-color;
			background-color: transparent;
			.transition(all .5s ease);

			&:hover {
				background-color: rgba(255, 255, 255, .25);
			}
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: @footer-height;
		background-color: @main-color;

		.footer-copyright {
			margin: 0;
			text-align: center;
			color: @light-text-color;
			line-height: @footer-height;
		}
	}

	@media (max-width: @mobile-width) {
		& {
			overflow: auto;
			position: relative;
  		min-height: 100%;
  		background-image: url('images/front-page-mobile-background.jpg');
  		background-attachment: fixed;
		}
		.container {
			padding-bottom: @footer-height + @grid-column-padding;
		}
		#background-image {
			display: none;
		}
		#background-movie {
			display: none;
		}
		#background-focus {
			display: none;
		}
		.header {
			position: static;
			box-shadow: none;
			padding: 0;
			background: none;
		}
		.header h1 {
			padding: 0;
			text-align: center;
			margin-bottom: @grid-column-padding;
		}
		#header-image-default {
			display: none;
		}
		#header-image-mobile {
			display: block!important;
			max-width: auto!important;
			width: 100%;
			height: auto;
		}
		.header nav {
			margin: 0 auto;
			padding: 0;
			width: 60%;		}
		.header nav ul {
			position: static;
		}
		.header nav ul li {
			display: block;
			margin: 0;
			.mobile-menu-item;
		}
		.header nav ul li a {
			display: block;
			padding: @grid-column-padding;

			&:hover {
				background: none;
			}
		}
		.bottom-nav {
			position: static;
			background: none;
			width: 60%;
			margin: 0 auto;
		}
		.bottom-nav {

		}
		.bottom-nav ul li {
			.mobile-menu-item;
		}
		.bottom-nav ul li a {
			padding: @grid-column-padding;
			color: @main-color;
			text-align: left;

			br {
				display: none;
			}
		}
		.mobile-menu-item {
			margin-bottom: @grid-column-padding;
			border-left: 3px solid @main-color;
			background-color: rgba(255, 255, 255, .75);
		}
	}

	// .section {
	// 	position: relative;
	// }

	// #intro-background {
	// 	position: relative;
	// }

	// #intro-foreground {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// }

	// #intro-logo {
	// 	position: absolute;
	// 	text-align: center;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	margin: 1em;
	// }

	// #intro-scroll {
	// 	position: absolute;
	// 	text-align: center;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	margin: 1em;
	// 	display: block;
	// }

	// #home-background {
	// 	position: relative;
	// 	display: none;
	// }

	// #home-foreground {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	display: none;
	// }

	// #home-header {
	// 	.clearfix();
	// 	position: absolute;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 32px;
	// 	padding: @grid-column-padding;
	// }

	// #home-logo {
	// 	.make-column(12);
	// 	margin-bottom: @grid-column-padding;

	// 	a {
	// 		display: block;
	// 		.make-column(3);
	// 		padding: 0;
	// 	}

	// 	img {
	// 		max-width: 100%;
	// 		min-width: 240px;
	// 		height: auto;
	// 	}
	// }

	// .home-nav-button {
	// 	display: block;
	// 	padding: .5em;
	// 	text-align: center;
	// 	text-decoration: none;
	// 	font-size: 120%;
	// 	// font-weight: bold;
	// 	color: @main-color;
	// 	background-color: rgba(255, 255, 255, 0.75);
	// 	border: 1px solid @main-color;
	// 	.transition(all .5s ease);

	// 	&:hover {
	// 		color: @light-text-color;
	// 		background-color: @main-color;
	// 	}
	// }

	// #home-nav-primary {
	// 	ul {
	// 		margin: 0;
	// 		padding: 0;
	// 		list-style: none;
	// 	}

	// 	li {
	// 		.make-column(4);
	// 	}

	// 	a {
	// 		.home-nav-button;
	// 	}
	// }

	// #home-nav-secondary {
	// 	.make-column(4);

	// 	position: absolute;
	// 	top: @grid-column-padding;
	// 	right: 0;

	// 	ul {
	// 		margin: 0;
	// 		padding: @grid-column-padding @grid-column-padding 0 0;
	// 		list-style: none;
	// 	}

	// 	li {
	// 		margin-bottom: @grid-column-padding;
	// 	}

	// 	a {
	// 		.home-nav-button;
	// 	}
	// }

	// #home-footer {
	// 	position: absolute;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	height: 32px;
	// 	line-height: 32px;
	// 	color: @light-text-color;
	// 	background: @main-color;

	// 	#home-footer-copyright {
	// 		margin: 0;
	// 		text-align: center;
	// 	}
	// }

	// #home-description {
	// 	position: absolute;
	// 	top: @grid-column-padding * 2;
	// 	left: @grid-column-padding * 2;
	// 	width: 50%;

	// 	.home-description-item {
	// 		display: none;
	// 		position: absolute;
	// 		top: 0;
	// 		left: 0;
	// 		padding: @grid-column-padding;
	// 		width: 100%;
	// 		color: @light-text-color;
	// 		// background-color: fade(@main-color, 50%);
	// 		background-color: @main-color;
	// 		border: 1px solid @main-color;
	// 		.clearfix();

	// 		.home-description-item-icon {
	// 			.make-column(4);

	// 			img {
	// 				width: 100%;
	// 				height: auto;
	// 			}
	// 		}

	// 		.home-description-item-text {
	// 			.make-column(8);
	// 		}
	// 	}
	// }

	// @media (max-width: @mobile-width) {
	// 	#home-foreground {
	// 	}
	// 	#home-header {
	// 		position: relative;
	// 		padding: 0;
	// 		margin: 0;
	// 		bottom: 0;
	// 	}
	// 	#home-logo {
	// 		a {
	// 			text-align: center;
	// 		}
	// 		img {
	// 			width: 80%;
	// 			min-width: auto;
	// 		}
	// 	}
	// 	#home-nav-primary {
	// 		margin: 0;
	// 		li {
	// 			margin-bottom: @grid-column-padding / 3;
	// 		}
	// 	}
	// 	#home-nav-secondary {
	// 		position: relative;
	// 		.make-column(12);
	// 		margin-top: -@grid-column-padding;

	// 		ul {
	// 			padding: 0;
	// 		}

	// 		li {
	// 			margin-bottom: @grid-column-padding / 3;
	// 		}
	// 	}
	// 	#home-description {
	// 		display: none;
	// 	}
	// 	.home-nav-button {
	// 		font-size: 100%;
	// 	}
	// }
}

// Default Style
// -------------
.default-page-body {
	@base-color: @white;
	@main-color: @red;
	@border-color: darken(@base-color, 20);

	@content-width: 978px;
	@footer-height: 64px;

	& {
		position: relative;
		min-height: 100%;
		color: @dark-text-color;
		background-color: @base-color;
	}

	input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
	input[type="email"], input[type="password"], input[type="datetime"], input[type="date"],
	input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"],
	input[type="number"], input[type="range"], input[type=""], input[type="file"],
	textarea, select {
	  padding: 4px;
	  border: 1px solid @border-color;
	  
	  @media (max-width: @mobile-width) {
	    & {
	      width: 100%!important;
	    }
	  }
	}

	input[type="submit"], input[type="button"], button {
	  .button;
	  // &:disabled { .button.disabled; }
	  &[disabled] {
	  	cursor: not-allowed;
	  	background: fade(@dark-text-color, 38%);
	  }
	}

	.link {
		color: @main-color;
		.transition(background .5s ease);

		&:hover {
			background: @pale-red;
			text-decoration: none;
		}
	}

	.center {
		.clearfix();
		position: relative;
		margin: 0 auto;
		width: 93.75%;
		max-width: @content-width;
	}

	.header {
		position: relative;
		z-index: 999;
		border-top: 8px solid @main-color;

		.header-logo {
			.make-column(4);
			float: none!important;
			margin: (@grid-column-padding * 2) auto;

			a {
			}

			img {
				display: block;
				margin: 0 auto;
				// width: 100%;
				max-width: 100%;
				min-width: 240px;
				height: auto;
			}
		}

		@media only screen (max-width: @mobile-width) {
			.header-logo {
				.make-column(12);

				img {
					min-width: auto;
				}
			}
		}

		@media print {
			img {
				width: 240px;
				height: auto;
			}
		}
	}

	.navmenu {
		position: relative;
		z-index: 1;
		background-color: @main-color;
		padding: (@grid-column-padding / 2) 0;

		ul {
			.clearfix();
			padding: 0;
			list-style: none;
			margin: 0;
		}

		li {
			text-align: center;
		}

		a {
			display: block;
			padding: 1em;
			color: @light-text-color;
			text-decoration: none;
			background:  saturate(@main-color, 20%);
			.transition(all .5s ease);

			&:hover {
				background-color: lighten(@main-color, 10%);
			}
		}

		.navmenu-primary {
			li {
				.make-column(4);
				padding: @grid-column-padding / 2;
			}
		}

		.navmenu-secondary {
			li {
				.make-column(3);
				padding: @grid-column-padding / 2;
			}
		}

		.navmenu-toggle, .navmenu-toggle-label {
			display: none;
		}

		@media (max-width: @mobile-width) {
			.center {
				width: 100%;
			}

			.navmenu-toggle-label {
				display: block;
				padding: @grid-column-padding 0;
				color: @light-text-color;
				text-align: center;
				cursor: pointer;

				&:after {
					position: absolute;
					right: 0;
					padding: 0 @grid-column-padding;
					content: '\002228';
				}
			}

			ul {
				display: block;
				overflow: hidden;
				margin: 0;
				max-height: 0;
			}

			.navmenu-primary li, .navmenu-secondary li {
				.make-column(12);

				& br {
					// display: none;
				}
			}

			a {
				// border: 1px solid @main-color;
			}

			.navmenu-toggle:checked {
				& ~ label {
					color: fade(@light-text-color, 75%);

					&:after {
						content: '\002227';
					}
				}

				& ~ label ~ ul {
					max-height: 1000px;
					.transition(max-height .5s ease);
				}
			}
		}

		@media print {
			& { display: none; }
		}
	}

	.bottom-nav {
		position: absolute;
		left: 0;
		right: 0;
		bottom: @footer-height;
		border-top: 1px solid @main-color;
		padding: .5em;

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			text-align: center;
		}

		li {
			display: inline-block;
			margin: 0 1em;
		}

		a {
			color: @main-color;
			.transition(background .5s ease);

			&:hover {
				background: @pale-red;
			}
		}
	}

	.footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: @footer-height;
		background: @main-color;

		.footer-copyright {
			margin: 0;
			line-height: @footer-height;
			color: @light-text-color;
			text-align: center;

			small {
				font-weight: normal;
			}
		}
	}

	.main {
		padding: @grid-column-padding 0 (@footer-height * 2 + (@grid-column-padding * 4)) 0;
		min-height: 100vh;
	}

	.content {
		.clearfix();
		// .make-column(12);
	}

	.child-navmenu + .content {
		display: table-header-group;
		width: 70%;
		float: left;

		@media (max-width: @mobile-width) {
			& {
				// .make-column(12);
				width: 100%;
			}
		}
	}

	.child-navmenu {
		display: table-row-group;
		width: 25%;
		float: right;

		ul {
			margin: @grid-column-padding @grid-column-padding 0 0;
			padding: 0;
			list-style: none;
			border: 1px solid @main-color;
		}

		li {
			//
		}

		a {
			display: block;
			color: @main-color;
			padding: 1em;
			text-decoration: none;
			border-bottom: 1px dotted @main-color;
			.transition(background-color .5s ease);

			&:hover {
				background-color: @pale-red;
			}
		}


		li:last-child a {
			border: none;
		}

		@media (max-width: @mobile-width) {
			& {
				// .make-column(12);
				width: 100%;
			}
			ul {
				.clearfix();
				margin-right: 0;
			}
			li {
				float: left;
				width: 100%;
				text-align: center;
			}
		}
	}

	.content-title {
		font-size: 150%;
		color: @main-color;
		border-bottom: 3px solid @main-color;

		br {
			display: none;
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		@media (max-width: @mobile-width) {
			& {
				text-align: center;
			}

			br {
				display: block;
			}
		}
	}

	.content-title1 {
		margin: 2em 0 1em 0;
		font-size: 150%;
		font-weight: bold;
		color: @main-color;
		text-align: center;

		br {
			display: none;
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		@media (max-width: @mobile-width) {
			br {
				display: block;
			}
		}
	}

	.content-title2 {
		font-size: 120%;
		font-weight: bold;
		color: @main-color;
		text-align: center;
	}

	.content-title3 {
		padding: .5em;
		font-size: 120%;
		font-weight: bold;
		border-left: 3px solid @main-color;
	}

	.content-description {
		padding: 1em;
		color: @light-text-color;
		background-color: @pale-red;
		border-radius: 4px;
	}

	.content-section {
		margin-bottom: 4em;
	}

	.releases {
		.post-header-meta {
			text-align: right;
		}

		section {
			.content-section;
		}

		h1 {
			.content-title1;
		}

		h2 {
			.content-title2;
			padding: .5em;
			color: @dark-text-color;
			border-bottom: 1px solid @border-color;
		}

		h3 {
			.content-title3;
		}

		hr {
   		border: dotted @border-color;
   		border-width: 1px 0 0 0;
   		height:1px;/* for IE6 */
   		clear:both;/* for IE6 */
		}

		blockquote {
			margin: 1em 0;
			padding: 1em;
			background: darken(@base-color, 10);
			border-left: 3px solid @border-color;
		}

		a {
			.link;
	    white-space: nowrap;
		}

		table {
			.table-list;
			border-left: 1px solid @border-color;
			border-top: 1px solid @border-color;

			th, td {
				padding: .5em;
				border-right: 1px solid @border-color;
			}
		}
	}

	.case-study {
		margin: 4em 0;
		border-bottom: 1px solid @border-color;

		section {
			.content-section;
		}

		h1 {
			.content-title1;
			color: @dark-text-color;
		}

		h2 {
			.content-title2;
			color: @dark-text-color;
		}

		h3 {
			.content-title3;
		}

		a {
			.link;
		}

		img {
			.fluid;
		}

		li {
			padding-left: 1em;
			text-indent: -1em;
			margin-bottom: .5em;
		}
	}

	.table-list {
		margin: @grid-column-padding 0;
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;

		th {
			padding: 1em 0;
			text-align: left;
			vertical-align: top;
			border-bottom: 1px solid @border-color;
			width: 6em;
		}

		td {
			padding: 1em;
			vertical-align: top;
			border-bottom: 1px solid @border-color;
		}

		@media (max-width: @mobile-width) {
			& {
				display: block;
				padding: 0;
			}

			tr, tbody {
				display: block;
				width: 100%;
        height: auto!important;
			}

			th {
				display: block;
				color: @main-color;
				border-left: 3px solid @main-color;
				border-bottom: 1px dotted @border-color;
				padding: .5em;
				width: 100%;
        height: auto!important;
			}

			td {
				display: block;
				border: none;
				padding: .5em;
				margin-bottom: 1em;
        height: auto!important;
			}
		}
	}

	.post-list {
		ul {
			list-style: none;
			padding: 0;
		}

		li {
			border-bottom: 1px solid @border-color;
		}

		li a {
			display: block;
			padding: 1em 0;
			color: inherit;
			text-decoration: none;
			.transition(background-color .5s ease);

			&:hover {
				background-color: @pale-red;
			}
		}

		.post-list-date {
			display: inline-block;
			padding: .5em 1em;
			background-color: @main-color;
			color: @light-text-color;
			font-size: 80%;
			margin-right: 1em;
		}

		.post-list-cat {
			.post-list-date;
			min-width: 12em;
			text-align: center;

			background-color: #F19800;

			&.event {
				background-color: #4472CE;
			}

			&.topics {
				background-color: #D14F5E;
			}
		}

		.post-list-title {
			color: @main-color;
		}

		.post-list-title2 {
			display: block;
			margin-top: 1em;
			color: @main-color;
		}
	}

	.pager {
		margin: 4em 0;
		display: table;
		width: 100%;
		table-layout: fixed;
		background-color: @main-color;

		a {
			display: table-cell;
			border: 6px solid @base-color;
			padding: 1em;
			color: @light-text-color;
			text-align: center;
			text-decoration: none;
			.transition(background-color .5s ease);

			&:hover {
				background-color: lighten(@main-color, 10);
			}	
		}
	}

	.contact-form {
		display: table;
		width: 100%;

		table {
			width: 100%;
		}

		th {
			max-width: 18em;
			padding: 1em;
			text-align: right;
			font-weight: normal;
			color: @main-color;
			border-bottom: 1px solid @border-color;

			&.required:after {
				content: '*';
				color: @brand-danger;
			}
		}

		td {
			padding: 1em 0;
			border-bottom: 1px solid @border-color;
		}

		.buttons {
			text-align: center;
		}

		input[type="submit"] {
			padding: .5em 2em;
			min-width: 10em;
		}

    input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
    input[type="email"], input[type="password"], input[type="datetime"], input[type="date"],
    input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"],
    input[type="number"], input[type="range"], input[type=""], input[type="file"],
    textarea, select {
      width: 100%;
      border-radius: 6px;
    }

	  .agreement {
	  	margin: (@grid-column-padding * 2) 0 @grid-column-padding 0;

			.agreement-message {
				margin: @grid-column-padding 0;
				padding: 1em;
				border-radius: 8px;
				background-color: lighten(@main-color, 50);
			}

	  	.agreement-title {
	  		margin: @grid-column-padding 0;
	  		font-weight: bold;
	  		font-size: 120%;
	  		text-align: center;
	  		color: @main-color;
			}

	  	.agreement-text {
	  		margin: @grid-column-padding 0;
	  		padding: @grid-column-padding;
	    	height: 300px;
	    	overflow-y: auto;
	    	border: 1px solid #ccc;

	    	dt {
	    		font-weight: bold;
	    		padding-left: 1em;
	    		border-left: 3px solid @main-color;
	    		margin-bottom: .5em;
	    	}

	    	dd {
	    		margin-bottom: @grid-column-padding;
	    	}
	    }

	    .agreement-check {
	    	text-align: center;

	    	input[type="checkbox"] { margin-right: .5em; }
	    }
	  }
	}

	.fluid {
		max-width: 100%;
		height: auto;
	}

	.button {
	  display: inline-block;
	  padding: 0 1em;
	  height: 32px;
	  line-height: 32px;
	  white-space: nowrap;
	  text-align: center;
	  text-decoration: none;
	  border: 0;
	  border-radius: 4px;
	  cursor: pointer;
	  font-weight: bold;
	  font-size: 80%;
	  color: @light-text-color;
	  background-color: @main-color;
	  #gradient > .vertical(lighten(@main-color, 10), @main-color);

	  .box-sizing(content-box);
	  .box-shadow(2px 2px 2px @light-text-color);

	  &.disabled {
	  	background: fade(@dark-text-color, 38%);
	  }
	}

	.image-button-fade {
		.transition(opacity .5s ease);

		&:hover {
			.opacity(.75);
		}
	}
}