@charset "UTF-8";

@import url('./bootstrap/bootstrap.less');

@white: #ffffff;
@black: #000000;
@light_orange: #ffcc00;
@yellow: #ffff00;

.uc {
	opacity: .5;
}

.nowrap {
	white-space: nowrap;
}

.fa-gray {
	color: #B0B7BE;
}

.alignright {
	float:right;
	margin-bottom:10px;
}

.alignleft {
	float:left;
	margin-bottom:10px;
}

.b1px {
	border:1px solid #ccc;
}

.center,
.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.hr {
	clear: both;
	display: block;
	height: 0;
	line-height: 0;
	position: relative;
	margin-left: -4%;
	margin-right: -4%;
	&.hr-gray {
		border-bottom: 7px solid #eee;
	}
	&.hr-justify {
		margin-left: 0;
		margin-right: 0;
	}
	@media screen and (max-width: 468px) {
		margin-left: 0;
		margin-right: 0;
	}
}

.text-red {
	color: #dc092a;
}

//フォント
@font-face {
	font-family: 'sofachrome';
	src:	url('../font/sofachrome.eot') format('eot'),
				url('../font/sofachrome.woff') format('woff'),
				url('../font/sofachrome.ttf') format('truetype');
}

.generate-mgt(100);

.generate-mgt(@n, @i: -100) when (@i =< @n) {
	.mgt@{i} {
		margin-top: (@i * 1px)!important;
	}
	.generate-mgt(@n, (@i + 5));
}

.generate-mgb(100);

.generate-mgb(@n, @i: 0) when (@i =< @n) {
	.mgb@{i} {
		margin-bottom: (@i * 1px)!important;
	}
	.generate-mgb(@n, (@i + 5));
}

.generate-mgr(130);

.generate-mgr(@n, @i: -100) when (@i =< @n) {
	.mgr@{i} {
		margin-right: (@i * 1px)!important;
	}
	.generate-mgr(@n, (@i + 5));
}

.generate-mgl(100);

.generate-mgl(@n, @i: -100) when (@i =< @n) {
	.mgl@{i} {
		margin-left: (@i * 1px)!important;
	}
	.generate-mgl(@n, (@i + 5));
}

.generate-w(100);

.generate-w(@n, @i: 10) when (@i =< @n) {
	.width@{i} {
		width: (@i * 1%);
		@media screen and (max-width: 468px) {
			width: 100%;
		}
	}
	.generate-w(@n, (@i + 5));
}

body {
	color: lighten(@black,30%);
	font-size: 100%;
	@media screen and (max-width: 468px) {
		font-size: 90%;
		line-height: 1.5;
	}
}

a:link {
	color: @brand-primary;
	text-decoration: none;
}

a:hover {
	color: @brand-primary;
	text-decoration: underline;
}

a:visited {
	color: @brand-primary;
	text-decoration: underline;
}

a:active {
	color: @brand-primary;
	text-decoration: none;
}

a,a:link,a:visited {
	&.btn {
		color: @white;
	}
}

a:hover img {
	.opacity(.8);
}

a:hover img.noopacity {
	.opacity(1);
}

.tal {
	text-align: left!important;;
}

.tar {
	text-align: right!important;;
}

.tac {
	text-align: center!important;;
}


@menuwidth: 50px;
@menuheight: 50px;

/* header */
header {
	position: relative;
	.clearfix;
	.MenuBtnWrapper {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 200;
		width: @menuwidth;
		height: @menuheight;
		border-left: 1px solid @white;
		background-color: @brand-primary;
		@media screen and (min-width: 468px) {
			display: none;
		}
		a {
			display: block;
			width: @menuwidth;
			height: @menuheight;
			color: @white;
			text-align: center;
		}
		.MenuBtn__icon {
			display: block;
			position: absolute;
			top: 35%;
			left: 50%;
			width: 32px;
			height: 2px;
			margin: 0 0 0 -16px;
			background: @white;
			transition: .2s;
			&:before, &:after{
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 32px;
				height: 2px;
				background: @white;
				transition: .3s;
			}
			&:before{
				margin-top: -8px;
			}
			&:after{
				margin-top: 6px;
			}
			&.close {
				background: transparent;
				&:before,&:after{
					margin-top: 0;
				}
				&:before {
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}
				&:after {
					transform: rotate(-135deg);
					-webkit-transform: rotate(-135deg);
				}
			}
		}
		.MenuBtn__text {
			position: absolute;
			bottom: 3px;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 11px;
			font-weight: normal;
		}
	}
}

#backtotop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	font-size: 4em;
	line-height: 1;
	z-index: 100;
	.opacity(.6);
	color: @white;
	display: none;
	padding: 8px 12px;
	background-color: @black;
	.border-top-radius(5px);
	.border-bottom-radius(5px);
}

.top {
	width: 100%;
	position: relative;
	z-index: 200;
	background-color: @brand-primary;
	.box-shadow(0 0 5px rgba(0,0,0,.6));
	@media ( max-width: 468px ) {
		z-index: 90;
	}
	.top-info {
		color: @white;
		width: 980px;
		margin: 0 auto;
		padding-top: 55px;
		height: 100px;
		@media ( max-width: 468px ) {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: @menuheight;
			background-color: @brand-primary;
			padding-top: 10px;
			.box-shadow(0 0 5px rgba(0,0,0,.6));
		}
		h1 {
			margin: 0 20px 0 0;
			float: left;
			@media ( max-width: 468px ) {
				width: 100px;
				float: none;
				margin-left: auto;
				margin-right: auto;
			}
			a {
				display: block;
				margin-top: -30px;
				@media ( max-width: 468px ) {
					margin-top: 0;
				}
				img {
					vertical-align: top;
					.img-responsive;
				}
			}
		}
		.inquiries {
			font-size: 1.8em;
			float: right;
			text-decoration: underline;
			margin: 0;
			@media ( max-width: 468px ) {
				font-size: 1.2em;
			}
			a {
				color: #fff;
			}
		}
	}
}

.site-theme {
	font-size: 1.8em;
	display: inline-block;
	margin: 0;
	color: @white;
	@media ( max-width: 468px ) {
		font-size: 1.2em;
		font-weight: bold;
		display: block;
		padding: 10px 0;
		width: 100%;
		color: @brand-primary;
		text-align: center;
	}
	&&-pc {
		@media ( max-width: 468px ) {
			display: none;
		}
	}
	&&-smp {
		background: @white;
		padding-top: @menuheight+10px;
		@media ( min-width: 469px ) {
			display: none;
		}
	}
}

.topnavi {
	position: relative;
	color: @brand-primary;
	background-color: @brand-success;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	display: table;
	.clearfix;
	text-align: center;
	z-index: 190;
	@media ( max-width: 468px ) {
		display: none;
		position: fixed;
		top: @menuheight;
		margin-top: 0;
		height: 100%;
		background-color: fade(@black,80%);
	}
	ul {
		padding: 0;
		margin: 0;
		@media ( max-width: 468px ) {
			margin: 20px 0 0;
		}
		li {
			list-style-type: none;
			display: inline-block;
			margin-right: 5px;
			@media ( max-width: 468px ) {
				display: block;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 10px;
			}
			&.current-menu-item {
				background-color: inherit;
				a {
					background-color: @brand-primary;
					color: @white;
				}
			}
			a {
				display: block;
				.button;
				@media ( max-width: 468px ) {
					font-size: 2.2em;
				}
				i {
					font-size: 80%;
					vertical-align: middle;
				}
			}
			&:last-child {
				margin-right: 0;
				@media ( max-width: 468px ) {
					margin-right: auto;
				}
			}
		}
	}
}

.button {
	font-size: 1.8em;
	line-height: 1.6;
	border-radius: 5px;
	position: relative;
	font-weight: bold;
	padding: .2em .5em;
	text-decoration: none;
	color: @brand-primary;
	background: @brand-success;
	transition: .4s;
	&:hover {
		background: @brand-primary;
		color: @white;
		text-decoration: none;
	}
}

.top-feature-area {
	.clearfix;
}

.top-feature-area-left {
	width: 686px;
	height: 491px;
	float: left;
	.slider {
		margin: 0;
		padding: 0;
	}
	@media ( max-width: 468px ) {
		width: 109%;
		height: inherit;
		float: none;
		margin-top: -4.3%;
		margin-left: -4.2%;
		margin-right: -4.2%;
	}
}

.top-feature-area-right {
	float: right;
	width: 270px;
	@media ( max-width: 468px ) {
		float: none;
		width: 100%;
		text-align: left;
		.top-banner-vass,
		.top-banner-event,
		.top-banner-win {
			width: 48%;
			display: inline-block;
			margin-top: 0;
		}
		.top-banner-vass {
			float: none;
		}
	}
}

@media ( max-width: 468px ) {
	.main {
		border-top: 1px solid @brand-primary;
		.home & {
			border-top: none;
		}
	}
}

.menu {
	padding: 0;
	margin: 0;
	text-align: left;
	.clearfix;
	li {
		font-size: 1.4em;
		color: #95989A;
		display: inline;
		text-align: left;
		@media ( max-width: 468px ) {
			font-size: 1.2em;
		}
		&:after {
			content: '>';
			margin: 0 7px;
		}
		&:hover {
			color: @brand-primary;
		}
		&:last-child:after {
			content: '';
		}
	}
}

.content-back {
	background-color: #EFF3F7;
}

.content-area {
	padding: 25px 30px 40px;
	width: 1040px;
	background-color: @white;
	text-align: center;
	margin-right: auto;
	margin-left : auto;
	margin-top: 0;
	margin-bottom: 0;
	@media ( max-width: 468px ) {
		width: 100%;
		padding: 4% 4% 6%;
		overflow: hidden;
	}
}

//--- content ----------------------------------------------------------------------------------------------------------------

.content {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	body:not(.home) & {
		min-height: 200px;
	}
	@media screen and (max-width: 468px) {
		width: 100%;
	}
	p {
		font-size: 1.8em;
		margin-bottom: 1em;
	}
	.font-xlarge {
		font-size: 2.2em;
	}
	.font-large {
		font-size: 2em;
	}
	.label {
		padding: .2em .6em;
		vertical-align: middle;
	}
	img {
		.img-responsive;
		margin-top: 1.5em;
		margin-bottom: 1.5em;
		&.marginNo {
			margin-top: 0;
			margin-bottom: 0;
		}
		&.marginS {
			margin-top: .5em;
			margin-bottom: .5em;
			@media screen and (max-width: 468px) {
				margin-top: 1.5em;
				margin-bottom: 1.5em;
			}
		}
		&.marginL {
			margin-top: 3em;
			margin-bottom: 3em;
			@media screen and (max-width: 468px) {
				margin-top: 1.5em;
				margin-bottom: 1.5em;
			}
		}
		&.marginLL {
			margin-top: 6em;
			margin-bottom: 6em;
			@media screen and (max-width: 468px) {
				margin-top: 1.5em;
				margin-bottom: 1.5em;
			}
		}
	}
	.content-inner {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		@media screen and (max-width: 468px) {
			width: 100%;
		}
		& + .cat_title {
			margin-top: 45px;
			@media screen and (max-width: 468px) {
				margin-top: 30px;
			}
		}
	}

	//ギャラリー
	.gallery.gallery-columns-2.gallery-size-thumbnail {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 1.6em auto;
		&:last-child {
			margin: 1.6em auto 0;
		}
		.gallery-item {
			width: 150px;
			margin: 10px;
			@media ( max-width: 468px ) {
				width: 30%;
				margin: 1.5%;
			}
			a {
				display: block;
				img {
					width: 100%;
					height: auto;
					margin-top: 0;
					margin-bottom: 0;
				}
			}
		}
		.wp-caption-text.gallery-caption {
			font-size: 1.2em;
			margin: 5px 0;
			text-align: left;
		}
		.gallery-icon {
			border: 1px solid #e8e8e8;
		}
	}
	.gallery.gallery-columns-1 {
		margin: 1.6em -1.5%;
		width: 103%;
		&:last-child {
			margin: 1.6em -1.5% 0;
		}
		.gallery-item {
			margin: 1.5%;
			a {
				display: block;
			}
			img {
				width: 100%;
				height: auto;
				margin: 0;
			}
		}
		.wp-caption-text.gallery-caption {
			font-size: 1.4em;
			margin: 5px 0;
			text-align: left;
		}
		.gallery-icon {
			border: 1px solid #e8e8e8;
		}
	}
	.gallery.gallery-columns-2,
	.gallery.gallery-columns-3 {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 1.6em -1.5%;
		width: 103%;
		&:last-child {
			margin: 1.6em -1.5% 0;
		}
		.gallery-item {
			a {
				display: block;
			}
			img {
				width: 100%;
				height: auto;
			}
		}
		.wp-caption-text.gallery-caption {
			font-size: 1.4em;
			margin: 5px 0;
			text-align: left;
		}
		.gallery-icon {
			width: 100%;
			height: 0;
			padding-top: 65%;
			border: 1px solid #e8e8e8;
			overflow: hidden;
			position: relative;
			img {
				position: absolute;
				margin-top: 0;
				margin-bottom: 0;
				width: 115%;
				height: auto;
				left: 50%;
				top: 50%;
				-webkit-transform: translate3d(-50%, -50%, 0);
				transform: translate3d(-50%, -50%, 0);
			}
		}
	}
	.gallery.gallery-columns-2 {
		.gallery-item {
			width: 47%;
			margin: 1.5%;
		}
	}
	.gallery.gallery-columns-3 {
		.gallery-item {
			width: 30.3333%;
			margin: 1.5%;
		}
	}
	.gallery-no-fit {
		.gallery-icon {
			height: inherit!important;
			padding-top: inherit!important;
			img {
				position: relative!important;
				width: 100%!important;
				height: auto!important;
				left: inherit!important;
				top: inherit!important;
				-webkit-transform: inherit!important;
				transform: inherit!important;
			}
		}
	}
	.gallery-no-gutters {
		margin: 1.6em 0;
		.gallery .wp-caption-text {
			display: none;
		}
		.wp-caption-text {
			font-size: 1.4em;
			margin: 5px 0;
			text-align: left;
		}
		.gallery.gallery-columns-1,
		.gallery.gallery-columns-2,
		.gallery.gallery-columns-3,
		.gallery.gallery-columns-4 {
			width: 100%;
			margin: 0;
			.gallery-item {
				margin: 0;
			}
			.gallery-icon {
				border: none;
			}
		}
		.gallery.gallery-columns-2 {
			.gallery-item {
				width: 50%;
				margin: 0;
			}
		}
		.gallery.gallery-columns-3 {
			.gallery-item {
				width: 33.3333%;
				margin: 0;
			}
		}
		.gallery.gallery-columns-4 {
			.gallery-item {
				width: 25%;
				margin: 0;
			}
		}
	}
}

.dl {
	.clearfix;
	&.products-chara {
		@media screen and (max-width: 468px) {
			width: 100%;
		}
		dt {
			width: 40%;
			text-align: left;
			font-size: 2.2em;
			@media screen and (max-width: 468px) {
				font-size: 1.8em;
				padding-bottom: 5px;
			}
		}
		dd {
			width: 60%;
			min-height: 50px;
			@media screen and (max-width: 468px) {
				min-height: inherit;
			}
		}
		dt,dd {
			vertical-align: middle;
			@media screen and (max-width: 468px) {
				float: none;
				width: 100%;
				.text-justify;
			}
		}
	}
	&.products-off {
		@media screen and (max-width: 468px) {
			width: 100%;
		}
		dt {
			width: 30%;
			color: @brand-primary;
			font-size: 1.8em;
			@media screen and (max-width: 468px) {
				padding-bottom: 5px;
			}
		}
		dd {
			width: 60%;
			margin-left: 5%;
			padding-bottom: 0;
			margin-bottom: 30px;
			border-left: 1px solid #ccc;
			font-size: 1.6em;
			@media screen and (max-width: 468px) {
				min-height: inherit;
				border-left: none;
				margin-left: 0;
			}
		}
		dt,dd {
			vertical-align: middle;
			line-height: 1.75;
			@media screen and (max-width: 468px) {
				float: none;
				width: 100%;
				.text-justify;
			}
		}
	}

	dt {
		width: 18%;
		text-align: right;
	}
	dd {
		width: 82%;
		padding-left: 5%;
		margin: 0;
		&.dd100 {
			width: 100%;
			padding-left: 0;
		}
	}
	dt,dd {
		float: left;
		font-size: 1.8em;
		padding-bottom: 10px;
		@media screen and (max-width: 468px) {
			float: none;
			width: 100%;
			.text-justify;
		}
	}
}

.ul {
	padding-left: 2em;
	list-style-type: none;
	&.ul-inline {
		li {
			display: inline-block;
			padding-left: 1.2em;
			padding-right: .2em;
			margin-right: .5em;
		}
	}
	&.ul-large {
		li {
			font-size: 2.2rem;
		}
	}
	li {
		font-size: 1.8em;
		line-height: 1.6;
		&:before {
			content: '●';
			font-size: 110%;
			color: @brand-primary;
			margin-left: -1em;
		}
	}
}

.current-menu-item {
	.highlight-yellow;
}

.ol {
	padding-left: 0;
	list-style-type: none;
	&.ol-inline {
		li {
			display: inline-block;
			padding-left: 5px;
			padding-right: 5px;
		}
	}
	&.ol-large {
		li {
			font-size: 2.2em;
			margin-bottom: .5em;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	&.ol-listmark {
		list-style-type:decimal;
		padding-left: 3em;
	}
	li {
		font-size: 1.8em;
		line-height: 1.6;
		&:before {
			font-size: 110%;
		}
		&::marker {
			font-weight: bold;
			color: @brand-primary;
		}
	}
}

.table {
	.table-responsive & {
		margin-bottom: 0;
	}
	th,td {
		font-size: 1.6em;
		line-height: 1.4 !important;
		p {
			font-size: 1em;
			margin-bottom: 0;
		}
		ol,ul {
			margin-bottom: 0;
		}
	}
	th {
		text-align: center;
		background-color: @brand-primary;
		color: @white;
	}
	&.table-align-middle {
		th,td {
			vertical-align: middle !important;
		}
	}
	&.table-small {
		th,td {
			font-size: 1.4em;
		}
	}
	&.table-fixed {
		table-layout: fixed;
	}
	&.table-xs-block {
		th,td {
			@media ( max-width: 468px ) {
				display: block;
				border-right: none !important;
				border-top: none !important;
				border-left: none !important;
			}
		}
	}
	&.table-comparison {
		tr {
			td:last-child {
				background-color: lighten(@yellow,35%);
			}
		}
		tr:nth-child(odd) {
			td:last-child {
				background-color: lighten(@yellow,25%);
			}
		}
	}
	&.table-pricelist {
		tr td:nth-child(5),
		tr td:nth-child(7),
		tr td:nth-child(8),
		tr td:nth-child(9),
		tr td:nth-child(10) {
			white-space: nowrap;
		}
	}
	&.table-circuitpad {
		td {
			text-align: center;
		}
	}
	&.table-nowrap {
		th,td {
			white-space: nowrap;
		}
	}
}

.smp-inline,
.smp-block,
.smp-inline-block {
	display: none;
}

@media screen and ( max-width: 468px ) {
	.table-responsive .table {
		width: inherit!important;
		max-width: inherit!important;
		table-layout: inherit!important;
	}
	.smp-inline {
		display: inline;
	}
	.smp-block {
		display: block;
	}
	.smp-inline-block {
		display: inline-block;
	}
	.btn-lg {
		font-size: 16px;
	}
}

.row.row-wide {
	margin-left: -20px;
	margin-right: -20px;
	div[class*=col-] {
		padding-left: 20px;
		padding-right: 20px;
	}
}

//--- title ----------------------------------------------------------------------------------------------------------------

.page_title {
	text-align: center;
	color: @brand-primary;
	font-size: 4.5em;
	line-height: 1;
	padding-top: 40px;
	margin: 60px 0 30px 0;
	background: url(../img/title-bar.jpg) center top no-repeat transparent;
	.home & {
		padding-top: 0;
		background: none;
	}
	@media ( max-width: 468px ) {
		font-size: 3em;
		padding-top: 25px;
		margin: 30px 0 15px 0;
	}
}

.cat_title {
	border: 2px solid @brand-primary;
	font-size: 3em;
	color: @brand-primary;
	vertical-align: middle;
	margin: 30px 0;
	.border-top-radius(6px);
	.border-bottom-radius(6px);
	i {
		font-size: 1.1em;
		display: inline-block;
		background: @brand-primary;
		padding: 10px;
		color: fade(@white,80%);
	}
	@media ( max-width: 468px ) {
		font-size: 2em;
		text-align: left;
		margin: 20px 0;
	}
}

.content_title {
	font-size: 2.8em;
	text-align: center;
	margin: 30px 0 20px 0;
	.well & {
		margin: 20px 0 15px 0;
	}
	.well &:last-child {
		margin: 20px 0 0 0;
	}
	@media ( max-width: 468px ) {
		font-size: 2em;
		text-align: left;
	}
}

	.content_title_small {
		.content_title;
		font-size: 2.2em;
	}

	.content_title_pink {
		.content_title;
		font-size: 2.6em;
		text-align: left;
		color: @brand-primary;
		&.text-center {
			text-align: center;
		}
		.well & {
			margin: 20px 0 15px 0;
		}
	}

	.content_title_sofachrome {
		font-size: 3.4em;
		text-align: left;
		font-family: 'sofachrome';
		line-height: 1;
		.grade {
			font-size: 35%;
			color: lighten(@brand-primary,30%);
		}
		.no {
			font-size: 60%;
			color: lighten(@brand-primary,30%);
		}
		.series {
			font-size: 50%;
			color: lighten(@black,50%);
		}
	}

	.content_title_border {
		border-bottom: 1px dotted #999999;
		padding-bottom: .75em;
	}

.day {
	font-style: oblique;
	font-family: 'Vollkorn', serif;
	font-size: 3em;
	margin: 20px 0 10px 0;
	color: lighten(@black,50%);
	line-height: 1;
}

.highlight-yellow {
	background-color: @yellow;
}

.information_title {
	font-size: 3em;
	line-height: 1.4;
	margin-bottom: 1.5em;
	@media screen and (max-width: 468px) {
		font-size: 2.4em;
		text-align: left;
	}
}

.information_lists {
	width: 90%;
	margin: 30px auto;
	text-align: left;
	@media ( max-width: 468px ) {
		width: 94%;
	}
	a {
		&:link,
		&:visited,
		&:active {
			color: lighten(@black,15%);
		}
		&:hover {
			color: @brand-primary;
			text-decoration: none;
		}
	}
	.information_list {
		display: table;
		width: 100%;
		padding: 25px 0;
		border-top: 2px solid lighten(@black,85%);
		.clearfix;
		@media ( max-width: 468px ) {
			display: block;
		}
		.information_day {
			display: table-cell;
			vertical-align: top;
			width: 18%;
			font-family: 'Vollkorn', serif;
			font-style: oblique;
			font-size: 2.6em;
			color: lighten(@black,50%);
			line-height: 1;
			@media ( max-width: 468px ) {
				display: block;
				width: 100%;
				margin-bottom: 5px;
			}
		}
		.information_contents {
			display: table-cell;
			vertical-align: top;
			width: 82%;
			@media ( max-width: 468px ) {
				display: block;
				width: 100%;
			}
			.information_thumbnail {
				position: relative;
				border: 1px solid lighten(@black,80%);
				width: 150px;
				height: 150px;
				float: right;
				margin: 0 0 0 15px;
				overflow: hidden;
				img {
					margin-top: 0;
					margin-bottom: 0;
				}
				@media ( max-width: 468px ) {
					float: left;
					width: 80px;
					height: 80px;
					margin: 0 3% 0 0;
					img {
						.img-responsive;
					}
				}
			}
			.information_detail {
				@media ( max-width: 468px ) {
					float: right;
					width: calc(~'97% - 80px');
				}
				h4 {
					font-size: 2em;
					margin: 0 0 15px;
					line-height: 1.4;
					@media ( max-width: 468px ) {
						font-size: 1.6em;
						margin: 0 0 5px;
					}
					.badge {
						display: inline-block;
						background-color: @brand-primary;
						padding: 3px 6px;
						margin-right: 8px;
						vertical-align: middle;
						font-size: .7em;
						line-height: 1;
						color: @white;
						.border-top-radius(3px);
						.border-bottom-radius(3px);
					}
				}
				p {
					font-size: 1.6em;
					margin-bottom: .5em;
					&:last-of-type {
						margin-bottom: 0;
					}
					&.excerpt {
						@media ( max-width: 468px ) {
							display: none;
						}
					}
					&.readmore {
						i {
							color: lighten(@black,50%);
						}
						@media ( max-width: 468px ) {
							text-align: right;
						}
					}
				}
			}
		}
	}
}

.information {
	margin: 50px 0 45px 0;
	p {
		margin-bottom: 0;
	}
	@media ( max-width: 468px ) {
		margin: 20px 0 15px 0;
	}
	.content & {
		&:last-child {
			margin-bottom: 0;
		}
	}
}

.information .gray-button {
	margin-bottom: 10px;
}

.information img {
	margin:  60px 0 45px 0;
}

.top-slider {
	margin: 0 0 0 0;
	float: left;
}

.top-banner-vass {
	margin: 0 0 0 0;
	float: right;
	top: 0;
}

.top-banner-event,
.top-banner-win {
	margin: 0 0 0 0;
	float: right;
	margin-top: 30px;
}

#temp-news-area {
	margin: 40px auto 0;
	width: 90%;
	@media ( max-width: 468px ) {
		width: 100%;
		margin: 20px auto;
	}
	.temp_news {
		border: 5px solid @light_orange;
		.border-top-radius(6px);
		.border-bottom-radius(6px);
		margin-bottom: 15px;
		padding: 2.5%;
		@media screen and ( max-width: 468px ) {
			padding: 3%;
		}
		h4,p {
			margin: 0 0 .4em 0;
			&:last-child {
				margin: 0;
			}
		}
		h4 {
			@media screen and ( max-width: 468px ) {
				font-size: @font-size-base;
			}
		}
		p {
			font-size: @font-size-base;
			@media screen and ( max-width: 468px ) {
				font-size: @font-size-small;
			}
		}
	}
}

.feature {
	margin: 40px auto 0;
	width: 90%;
	dl {
		display: flex;
		margin: 0;
		border: 5px solid @light_orange;
		border-radius: 6px;
		align-items: center;
		dt {
			font-size: 2.4em;
			width: 40%;
			a {
				background-color: @light_orange;
				color: black;
			}
		}
		dd {
			font-size: 1.8em;
			width: 60%;
			text-align: left;
			a {
				color: black;
			}
		}
		dt,dd {
			a {
				width: 100%;
				display: block;
				padding: .4em .8em;
			}
		}
	}
	@media ( max-width: 468px ) {
		width: 100%;
		margin: 20px auto 0;
		dl {
			display: flex;
			flex-direction: column;
			dt {
				font-size: 1.8em;
				width: 100%;
			}
			dd {
				width: 100%;
				font-size: 1.6em;
			}
			dt,dd {
				text-align: center;
			}
		}
	}
}


#banner-area {
	margin: 40px 0;
	overflow: hidden;
	width: 90%;
	text-align: center;
	line-height: 1;
	.center-block;
	.clearfix;
	@media ( max-width: 468px ) {
		width: 100%;
		margin: 20px auto;
	}
	ul {
		padding: 0;
		margin: 0;
		overflow: hidden;
		list-style-type: none;
		.clearfix;
		text-align: center;
		letter-spacing: -5px;
		li {
			display: inline-block;
			margin-right: 2%;
			margin-bottom: 2%;
			width: 23.5%;
			&.banner-2x {
				width: 49%;
				@media ( max-width: 468px ) {
					width: 100%;
					margin-right: 0;
				}
			}
			&:nth-child(3),
			&:nth-child(6),
			&:nth-child(10) {
				margin-right: 0;
			}
			@media ( max-width: 468px ) {
				display: block;
				float: left;
				margin-right: 4%;
				margin-bottom: 4%;
				width: 48%;
				&:nth-child(even) {
					margin-right: 0;
				}
				&.banner-area-large {
					width: 100%;
					margin-left: 0%;
					margin-right: 0%;
					margin-bottom: 4%;
				}
			}
			a,div {
				img {
					vertical-align: top;
					.img-responsive;
				}
			}
		}
	}
}

#SNS {
	height: 418px;
	overflow: hidden;
	@media ( max-width: 468px ) {
		height: inherit;
	}
	.Facebook {
	}
	.Twitter {
	}
	.Instagram {
		overflow: hidden;
		#sbi_images {
			margin: -1%;
			height: 418px;
				.sbi_item {
					.sbi_photo_wrap {
						position: static;
					}
					width: 31.33333% !important;
					padding-bottom: 31.33333% !important;
					height: 0;
					float: left !important;
					margin: 1% !important;
					position: relative !important;
					display: block !important;
					overflow: hidden;
					img {
						position: absolute !important;
						width: 100% !important;
						height: auto !important;
						left: 50% !important;
						top: 50% !important;
						-webkit-transform: translate3d(-50%, -50%, 0) !important;
										transform: translate3d(-50%, -50%, 0) !important;
					}
				}
		}
	}
}

.facebook {
	.clearfix;
	width: 100%;
	.fb-vesrah {
		float: left;
		width: 49%;
	}
	.fb-brake-girl {
		float: right;
		width: 49%;
	}
	@media ( max-width: 468px ) {
		overflow: hidden;
		.fb-vesrah,
		.fb-brake-girl {
			float: none;
			width: 100%;
		}
		.fb-vesrah {
			margin-bottom: 30px;
		}
	}
}

a.gray-button {
	font-size: 1.4em;
	border-radius: 5px;
	position: relative;
	font-weight: bold;
	line-height: 1.2;
	padding: .5em;
	text-decoration: none;
	color: #666;
	background: #efefef;
	transition: .4s;
	width: 75%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: 3px solid darken(#efefef,7%);
	@media screen and (max-width: 468px) {
		font-size: 1.2em;
		width: 100%;
	}
	&:hover {
		background: @brand-primary;
		color: @white;
		border-color: darken(@brand-primary,10%);
	}
	&.gray-button-small {
		padding: .1em .3em;
		font-size: 1.1em;
	}
	&.yellow-button {
		background: @light_orange;
		color: @black;
		border: 3px solid darken(@light_orange,7%);
		&:hover {
			background: lighten(@light_orange,15%);
			border-color: darken(@light_orange,10%);
		}
	}
}

.quality-assurance {
	padding: 30px;
	border: 1px solid lighten(@black,75%);
	p:last-child {
		margin-bottom: 0;
	}
	.dl {
		dt {
			width: 10%;
			@media screen and (max-width: 468px) {
				text-align: left;
			}
		}
		dd {
			width: 85%;
			padding-left: 5%;
		}
		dt,dd {
			@media screen and (max-width: 468px) {
				padding-left: 0;
				float: none;
				width: 100%;
			}
		}
	}
	.quality-assurance_title {
		font-size: 3em;
		font-weight: bold;
		letter-spacing: 1em;
		margin-top: 0;
		text-align: center;
		padding-left: 1em;
		@media screen and (max-width: 468px) {
			letter-spacing: 0;
			padding-left: 0;
			font-size: 2em;
		}
	}
	.content_title {
		font-weight: normal;
		font-size: 2.2em;
		text-align: center;
		@media screen and (max-width: 468px) {
			font-size: 2em;
		}
	}
	.content_title.text-left {
		font-weight: bold;
		border-bottom: 1px solid lighten(@black,75%);
		padding-bottom: 10px;
	}
	@media screen and (max-width: 468px) {
		padding: 5%;
	}
}

.performanse {
	padding-top: 2em;
	@media screen and (max-width: 468px) {
		padding-top: .5em;
	}
	h3 {
		font-size: 3.5em;
		margin-top: 0;
		small {
			margin-left: .5em;
			font-size: 60%;
		}
		@media screen and (max-width: 468px) {
			margin-top: 14px;
		}
	}
	&&.performanse-trail h3,
	&&.performanse-orange h3 {
		color: #ec6900;
	}
	&&.performanse-cross-country h3,
	&&.performanse-green h3 {
		color: #76be52;
	}
	&&.performanse-cross-country-sl h3,
	&&.performanse-black h3 {
		color: #000000;
	}
	&&.performanse-down-hill h3,
	&&.performanse-blue h3 {
		color: #00539f;
	}
	&&.performanse-trial h3,
	&&.performanse-red h3 {
		color: #dc092a;
	}
	&&.performanse-road h3,
	&&.performanse-skyblue h3 {
		color: #0190dc;
	}
	&&.performanse-cyclo-cros h3,
	&&.performanse-yellowish-green h3 {
		color: #d0db01;
	}
	&&.performanse-gold h3 {
		color: #daa520;
	}
	&&.performanse-brown h3 {
		color: brown;
	}
	&&.performanse-gray h3 {
		color: gray;
	}
	&&.performanse-navy h3 {
		color: navy;
	}
	p {
		font-size: 1.7em;
		line-height: 1.6;
	}
}

.dl {
	dt:last-of-type,
	dd:last-of-type {
		padding-bottom: 0;
	}
}

.well {
	h1,h2,h3,h4,h5,h6 {
		&:first-child {
			margin-top: 0;
		}
	}
	h1,h2,h3,h4,h5,h6,p,.dl,.ol,.ul {
		&:last-child {
			margin-bottom: 0;
		}
	}
	> .well {
		background-color: @white;
		&:last-child {
			margin-bottom: 0;
		}
	}
	&&-pink {
		background-color: @brand-primary;
		border: none;
	}
}

#post_navigation {
	display: table;
	table-layout: fixed;
	width: 100%;
	.back,.next {
		width: 50%;
		display: table-cell;
		i {
			font-size: 2em;
			vertical-align: middle;
			color: @brand-primary;
		}
	}
	.back {
		i {
			margin-right: 8px;
		}
	}
	.next {
		text-align: right;
		i {
			margin-left: 8px;
		}
	}
}

/* footer */

.footer {
	margin: 0 0 0 0;
	width: auto
}

.footer-list-area {
	border-top: 20px solid @brand-primary;
	background-color: @white;
	margin: 0 0 0 0;
	position: relative;
	width: 100%;
}

.footer-list {
	width: 980px;
	margin: 35px auto;
	.clearfix;
	@media ( max-width: 468px ) {
		width: 100%;
		padding: 0 8%;
		margin: 15px auto 0;
	}
	a {
		color: #2C2C2C;
		text-decoration: none;
		&:hover {
			color: @brand-primary;
		}
	}
	ul {
		padding: 0;
		li {
			line-height: 1.7em;
			list-style-type: none;
			font-size: 1.7em;
			ul {
				margin-bottom: 10px;
				padding-left: 20px;
				li {
					font-size: .85em;
				}
			}
		}
	}
}

.footer-list-1 {
	margin: 0 20px 0 0;
	display: block;
	float: left;
	width: 330px;
	@media ( max-width: 468px ) {
		width: 100%;
		margin: 0;
	}
}

.footer-list-2 {
	margin: 0 0 0 20px;
	display: block;
	float: left;
	width: 280px;
	@media ( max-width: 468px ) {
		width: 100%;
		margin: 0;
	}
}

.footer-list-3 {
	margin: 0 0 0 20px;
	display: block;
	float: left;
	width: 270px;
	@media ( max-width: 468px ) {
		width: 100%;
		margin: 0;
	}
}

.language {
	font-size: 1.4em;
	text-align: right;
	width: 980px;
	margin: 0 auto;
	@media ( max-width: 468px ) {
		width: 90%;
		margin: 0 auto 10px;
	}
}

.copyright p {
	font-size: 1.2em;
	text-align: center;
	color: @white;
	background-color: @brand-primary;
	padding: 15px 0;
	margin: 0 auto 0 auto;
}

.wp-pagenavi {
	clear: both;
	text-align: center;
	a, span {
		display: inline-block;
		font-size: 1.6em;
		text-decoration: none;
		line-height: 1.2em;
		padding: 7px 10px;
		border: 1px solid #e8e8e8;
	}
	a {
		background: #e8e8e8;
		&:hover {
			background: tint(@brand-primary,50%);
			color: @white;
			border-color: tint(@brand-primary,50%);
		}
	}
	span {
		background: #e8e8e8;
		&.current {
			font-weight: bold;
			color: @white;
			background: @brand-primary;
			border-color: @brand-primary;
		}
		&.pages {
			background: @white;
		}
	}
}

.winpad_image {
	padding-left: 3em;
	padding-right: 3em;
	@media screen and ( max-width: 468px ) {
		padding-left: 20%;
		padding-right: 20%;
	}
}

.indicator {
	width: 1em;
	height: 1em;
	margin-right: .15em;
	vertical-align: middle;
}

.circuit-pads {
	margin-top: 4em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	&_title {
		width: 45%;
		&.performanse {
			padding-top: 0;
		}
		@media screen and ( max-width: 468px ) {
			width: 100%;
		}
	}
	&_photo {
		width: 52%;
		margin-left: 3%;
		@media screen and ( max-width: 468px ) {
			width: 100%;
			margin-left: 0;
		}
	}
	&_body {
		width: 100%;
		margin-top: 2em;
	}
}

.chart {
	margin-top: 2em;
}

.pads {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	@pad_photo_width: 30%;
	.pad_photo {
		width: @pad_photo_width;
		padding: 0 5em;
		img {
			margin: 0!important;
		}
		@media screen and ( max-width: 468px ) {
			width: 100%;
		}
	}
	.pad_body {
		width: 100% - @pad_photo_width;
		p:last-child {
			margin-bottom: 0;;
		}
		@media screen and ( max-width: 468px ) {
			width: 100%;
		}
	}
}