@charset "utf-8";

@import "mixin";

/* -----------------------------------------------
common css [Scalable and Modular Architecture for CSS]
0. Normalize(ノーマライズ)#gnavi-inner
1. Reset(リセット) + Base(ベース)
2. Module(モジュール)
3. Layout(レイアウト)
-------------------------------------------------- */

/* -----------------------------------------------
 [0. Normalize(ノーマライズ)]
-------------------------------------------------- */
/* Base
--------------------------------------------------*/
html {
	font-family: sans-serif; /* 1 */
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

body {
	margin: 0;
}

/* Links
--------------------------------------------------*/

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
	background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
	outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
	outline: 0;
}

/* Typography
--------------------------------------------------*/

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
	border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
	font-weight: 600;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
	font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
	background: #ff0;
	color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
	white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* Embedded content
--------------------------------------------------*/

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
	border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
	overflow: hidden;
}

/* Figures
--------------------------------------------------*/

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
	margin: 0;
}

/* Forms
--------------------------------------------------*/

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
	border: 0; /* 1 */
	padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 2 */
	margin: 0; /* 3 */
	background-color: transparent;
	border: none;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
	line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
	text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
	cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* 2 */
	box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
	overflow: auto; /* 1 */
	vertical-align: top; /* 2 */
}

/* Tables
--------------------------------------------------*/

/**
 * Remove most spacing between table cells.
 */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -----------------------------------------------
 [1. Reset(リセット) + Base(ベース)]
-------------------------------------------------- */

// @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400';

@import 'https://fonts.googleapis.com/css?family=Cormorant:400,700';

@import 'https://fonts.googleapis.com/css?family=Quattrocento';


@font-face {
	font-family: 'Muli-ExtraBold';
	font-style: bold;
	font-weight: 600;
	src: local('Muli-ExtraBold'),
	url("../fonts/Muli-ExtraBold.ttf");

}

html * {
	/*-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;*/
	-webkit-font-smoothing: antialiased;
	-webkit-appearance: none;
	outline: none;
	-moz-osx-font-smoothing:grayscale;
	text-rendering : optimizeLegibility;
	-webkit-text-rendering : optimizeLegibility;
	-webkit-text-size-adjust: 100%;
}

html {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
	/* ゴシック */
	@include font-gothic;
	/* 明朝 */
	// @include font-mityou;
	font-size: 14px;
	line-height: 1.77;
	color: $font-color;
	-webkit-text-size-adjust: 100%;
	background-color: #fff;
}
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,code,del,em,img,strong,
dl,dt,dd,ol,ul,li,
fieldset,form,label,
table,caption,tbody,tfoot,thead,tr,th,td{
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	font-style: normal;
	font-weight: normal;
}
article,aside,figure,footer,header,hgroup,menu,nav,section{
	margin: 0;
	padding: 0;
	border: none;
	display: block;
	outline: none;
}
h1,h2,h3,h4,h5,h6,dt {
	line-height: 1.47;
}
p {
	line-height: 1.67;
}
dd,li,th,td,input,textarea {
	line-height: 1.67;
	text-align: left;
}
ul,ol {
	list-style-type: none;
}
img {
	width: 100%; height: auto;
	vertical-align: top;
}
strong {

}
em {

}
a,input,button,textarea{
	outline : none;
	color: $font-color;
}
/* a:visited {
	color: $font-color;
} */
a:active {
	color: $font-color;
}
img{
	width: 100%; height: auto;
}
::-moz-selection {
	background-color: #a7bbfe;
}
::selection {
	background-color: #a7bbfe;
}

body.other{
	.d_tablet,.d_smp{
		display: none !important;
	}
}

body.tablet,body.smp{
	.d_pc{
		display: none !important;
	}
}

@media #{$smp} {
	br.pc{
		display: none;
		}
	.sns_wrap{
		margin-top: 45px;
		text-align: center;
		p{
			font-size: 12px;
			font-weight: bold;
		}
		ul{
			display: -webkit-flex;
		  display: flex;
		  -webkit-justify-content: center;
		  justify-content: center;
		  -webkit-align-items: center;
		  align-items: center;
		  margin-top: 10px;
		  li{
		  	a{
					display: block;
					width: 45px;
					height: 45px;
					text-indent: -999999px;
					white-space: nowrap;
					background-repeat: no-repeat;
					background-size: 45px;
					margin-right: 14px;
				}
				a.fb_btn{
					background-image: url(../img/sns_icon_sp01.png);
				}
				a.tw_btn{
					background-image: url(../img/sns_icon_sp02.png);
				}
				a.line_btn{
					background-image: url(../img/sns_icon_sp03.png);
				}
				a.g_btn{
					margin-right: 0;
					background-image: url(../img/sns_icon_sp04.png);
				}
				a.fb_btn:active{
					background-image: url(../img/sns_icon_on_sp01.png);
				}
				a.tw_btn:active{
					background-image: url(../img/sns_icon_on_sp02.png);
				}
				a.line_btn:active{
					background-image: url(../img/sns_icon_on_sp03.png);
				}
				a.g_btn:active{
					background-image: url(../img/sns_icon_on_sp04.png);
				}
			}
		}
	}
}


@media #{$pc-all} {
	br.sp{
		display: none;
		}
	.sns_wrap{
		margin-top: 115px;
		text-align: center;
		p{
			width: 77px;
			height: 11px;
			text-indent: -999999px;
			white-space: nowrap;
			margin: 0 auto;
			background-repeat: no-repeat;
			background-image: url(../img/sns_title.png);
		}
		ul{
			display: -webkit-flex;
		  display: flex;
		  -webkit-justify-content: center;
		  justify-content: center;
		  -webkit-align-items: center;
		  align-items: center;
		  margin-top: 20px;
		  li{
		  	a{
					display: block;
					width: 50px;
					height: 50px;
					text-indent: -999999px;
					white-space: nowrap;
					background-repeat: no-repeat;
					background-size: 50px;
					margin-right: 14px;
				}
				.fb_btn{
					background-image: url(../img/sns_icon01.png);
				}
				.tw_btn{
					background-image: url(../img/sns_icon02.png);
				}
				.line_btn{
					background-image: url(../img/sns_icon03.png);
				}
				.g_btn{
					margin-right: 0;
					background-image: url(../img/sns_icon04.png);
				}

				.fb_btn:hover{
					background-image: url(../img/sns_icon_on01.png);
				}
				.tw_btn:hover{
					background-image: url(../img/sns_icon_on02.png);
				}
				.line_btn:hover{
					background-image: url(../img/sns_icon_on03.png);
				}
				.g_btn:hover{
					margin-right: 0;
					background-image: url(../img/sns_icon_on04.png);
				}
			}
		}
	}
}


/* [1. Reset(リセット) + Base(ベース)] --> End */

/* -----------------------------------------------
 [2. Module(モジュール)]
-------------------------------------------------- */

#document{
	overflow: hidden;
	// transform: translate(-200%, 0%) matrix(1, 0, 0, 1, 0, 0);
	// position: relative;
	// @include opacity(0);
}
// #body{
// 	position: relative;
// }


// .pace {
//   -webkit-pointer-events: none;
//   pointer-events: none;

//   -webkit-user-select: none;
//   -moz-user-select: none;
//   user-select: none;
// }

// .pace-inactive {
//   display: none;
// }

// .pace .pace-progress {
//   background: $key-color;
//   position: fixed;
//   z-index: 2000;
//   top: 0;
//   right: 100%;
//   width: 100%;
//   height: 2px;
// }

// #document{
// 	z-index: 10;
// }
// .pace{
// 	width:176px; height:54px;
// 	position:absolute;
// 	top:0; bottom:0;
// 	left:0; right:0;
// 	margin:auto;
// 	// z-index:100000;
// 	z-index:1;
// 	background: $key-color;
// 	&:before{
// 		width:176px; height:54px;
// 		position:absolute;
// 		top:0; bottom:0;
// 		left:0; right:0;
// 		content:"";
// 		margin:auto;
// 		background:url("../img/common/loader_cover.png") no-repeat center;
// 		background-size:cover;
// 	}
// 	.pace-progress{
// 		width:100%; height:100%;
// 		position:relative;
// 		background: #fff;
// 		.pace-progress-inner{
// 			width:100%; height:100%;
// 			position:relative;
// 			right:100%;
// 		}
// 	}
// }
// .pace-inactive{
// 	display:none !important;
// }

// #lodear{
// 	width:176px; height:54px;
// 	position:absolute;
// 	top:0; bottom:0;
// 	left:0; right:0;
// 	margin:auto;
// 	z-index:100000;
// }


/* Clearfix [ModernType]
-------------------------------------------------- */
.clearfix:after {
	display: block;
	clear: both;
	content: "";
}

/* Layout Module
-------------------------------------------------- */
.fll{
	float: left;
}
.flr{
	float: right;
}
.d_none{
	display: none;
}

/* PC =================================== */

@media #{$pc-all} {
	body .sp{
		display: none !important;
	}
} // [ $pc-all END ]

/* SMP =================================== */

@media #{$smp} {
	body .pc{
		display: none !important;
	}
} // [ $smp END ]



/* Text Module
-------------------------------------------------- */

/* input Module
-------------------------------------------------- */

input,
textarea{
	border: 1px solid #d3d7d9;
	@include radius(1);
	box-sizing: border-box;
}

.select{
	display: block;
	position: relative;
	overflow-x: hidden;
	border: 1px solid $border-color-light;
	box-sizing: border-box;
	select{
		width: 130%;
		padding-left: 15px;
		padding-right: 15px;
		-webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    @include radius(1);
	}
	&:after{
    	content: "";
    	display: block;
    	position: absolute;
    	right: 15px; top: 0; bottom: 0;
    	margin: auto;
    	background: url("../img/common/_icon/arrow_select.svg") no-repeat center center;
		background-size: cover;
    }
}

.note{
	font-size: 12px;
	padding-top: 20px;
}

/* PC =================================== */

/* PC　ALL */
@media #{$pc-all} {

	input,
	textarea{
		padding: 15px 20px;
		width: 100%;
	}

	.select{
		select{
			height: 55px;
			line-height: 55px;
		}
		&:after{
	    	width: 11px; height: 5px;
	    }
	}

} // [ $pc-all END ]

/* PC　サイズ別 */
@media #{$pc-small} {



} // [ $pc-small END ]

/* SMP =================================== */

@media #{$smp} {

	input,
	textarea{
		padding: 12px 15px;
		width: 100%;
	}

	.select{
		width: 100%;
		select{
			height: 50px;
			line-height: 50px;
		}
		&:after{
	    	width: 9.5px; height: 4px;
	    }
	}

} // [ $smp END ]

/* Link Module
-------------------------------------------------- */
a {
	text-decoration: none;
	&:hover{
		text-decoration: underline;
	}
}

.link-color{
	color: #38e15c;
}
.blank{
	&.text-link{
		width: 7px; height: 5px;
		display: inline-block;
		margin-left: 4px;
		border: 1px solid #38e15c;
		position: relative;
		top: -1px;
		&:after{
			content: "";
			width: 7px; height: 5px;
			border-right: 1px solid #38e15c;
			border-bottom: 1px solid #38e15c;
			position: absolute;
			right: -3px; bottom: -3px;
		}
		&.black{
			border: 1px solid #3f3a3c;
			&:after{
				border-right: 1px solid #3f3a3c;
				border-bottom: 1px solid #3f3a3c;
			}
		}
		&.white{
			border: 1px solid #ffffff;
			&:after{
				border-right: 1px solid #ffffff;
				border-bottom: 1px solid #ffffff;
			}
		}
	}
}

/* Icon Module
-------------------------------------------------- */


/* Button Module
-------------------------------------------------- */


/* Normal Button */
.btn{
	cursor: pointer;
	position: relative;
	>*{
		font-size: 11px;
		display: block;
		text-align: center;
		vertical-align: middle;
		position: relative;
		text-decoration: none;
		box-sizing: border-box;
		background-color: #2f323c;
		font-weight: 600;
		font-size: 13px;
		@include easing-original(.25);
	}
	&.white{
		>*{
			color: #fff;
		}
		&.blank{
			&:before{
				top: 14px;
				width: 11px; height: 10px;
				background-image: url("../img/common/_icon/blank.svg");
			}
		}
	}
	&:hover{
		a{
			text-decoration: none;
		}
		>*{
			&::before,
			&::after{
				width: 100%;
				height: 100%;
			}
		}
		&:after{
			//border-bottom-color: $key-color;
		}
	}
	&.arrow{
		position: relative;
		&:after{
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 20px;
			margin: auto;
			display: block;
			width: 14px;
			height: 8px;
			background: url("../img/arrow_white.svg") no-repeat center;
			background-size: cover;
		}
	}
	&.center{
		margin-left: auto;
		margin-right: auto;
	}
}

/* PC =================================== */

/* PC　ALL */
@media #{$pc-all} {

	.btn{
		width: 220px;
		height: 50px;
		>*{
			width: 100%; height: 50px;
			line-height: 50px;

		}
	}


} // [ $pc-all END ]

/* PC　サイズ別 */
@media #{$pc-small} {



} // [ $pc-small END ]

/* SMP =================================== */

@media #{$smp} {
	.btn{
		height: 50px;
		>*{
			width: 100%; height: 50px;
			line-height: 50px;
		}
	}
} // [ $smp END ]


/* Animation Module
-------------------------------------------------- */
@keyframes m-bg-hover {
	0% {
		width: 0; height: 1px;
		@include opacity(0);
	}
	50% {
		width: 100%;
		@include opacity(100);
	}
	70% {
		width: 100%;
		@include opacity(0);
	}
	80% {
		width: 100%;
		@include opacity(100);
	}
	100% {
		width: 100%;
		height: 100%;
		@include opacity(100);
	}
}

@keyframes point-hover {
	0% {
		width: 0; height: 1px;
		@include opacity(0);
	}
	50% {
		width: 100%;
		@include opacity(100);
	}
	70% {
		width: 100%;
		@include opacity(0);
	}
	80% {
		width: 100%;
		@include opacity(100);
	}
	100% {
		width: 100%;
		height: 100%;
		@include opacity(100);
	}
}

.bg-hover{
	position: relative;
	cursor: pointer;
	&:after{
		width: 0; height: 1px;
		content: "";
		display: block;
		position: absolute;
		top: 0; bottom: 0;
		left: 0;
		margin-top: auto;
		margin-bottom: auto;
		// background-color: rgba(0,166,255,0.8);
		background-color: rgba(255,255,255,0.3);
		z-index: -1;
		@include opacity(0);
	}
	&:hover{
		&:after{
			animation: m-bg-hover 0.18s ease-in-out 0.18s both 1 alternate;
		}
	}
}


/* Animation Module
-------------------------------------------------- */



/* -----------------------------------------------
 [3. Layout(レイアウト)]
-------------------------------------------------- */
/* #Base
-------------------------------------------------- */
body{
}
#document {
	// @include opacity(0);
}


/* PC =================================== */

/* PC　ALL */
@media #{$pc-all} {
} // [ $pc-all END ]

/* PC　サイズ別 */
@media #{$pc-small} {
} // [ $pc-small END ]

/* SMP =================================== */

@media #{$smp} {
} // [ $smp END ]

/* #Header
-------------------------------------------------- */

#header{
	width: 100%;
	background-color: #fff;
	// transform: translateY(-100%);
	&.active{
		position: fixed;
		top:0;
		// transition: .3s;
		// transform: translateY(0);
		z-index: 1002;
	}
	#gnavi_container{
		width: 100%;
		background-color: #2f323c;
		&.active{
			position: fixed;
			top:0;
			// transition: .3s;
			// transform: translateY(0);
			z-index: 1002;
		}
	}
}

#kv-container{
	#kv-inner{
		position: relative;
		width: 100%;
		.kv-slide_item{
			float: left;
			background-repeat: none;
		}
		.text-container{
			.text-container-area{
				color: #fff;
				background: linear-gradient(135deg,#e04101,#cf0810);
			}
		}
	}
}


/* PC =================================== */

/* PC　ALL */
@media #{$pc-all} {
	#header{
		.header-inner{
		}
		.header-inner-top{
			padding-top: 20px;
			padding-bottom: 20px;
			@include pc-width;
			.header-area_left{
				float: left;
				display: flex;
				align-items: center;
				#header-site_logo{
					width: 100px;
					margin-right: 50px;
				}
				.page-profarm{
					width: 240px;
				}
			}
			.header-area_right{
				float: right;
				.category-profarm{
					width: 110px;
				}
			}
			#gnavi-trigger{
				width: 26px;
			}
		}
		.header-inner-bottom{
			background-color: #2f323c;
			.gnavi_inner{
				.gnavi_list{
					text-align: center;
					li{
						display: inline-block;
						color: #fff;
						font-size: 13px;
						font-weight: 600;
						position: relative;
						a{
							color: #fff;
							font-weight: 600;
							display: block;
							cursor: pointer;
							padding-top: 20px;
							padding-bottom: 20px;
							&:hover{
								text-decoration: none;
							}
						}
						&:before{
							content: "";
							display: block;
							position: absolute;
							bottom: 10px;
							left: 50%;
							//transform: taranslateX(-50%);
							width: 2px;
							height: 0;
							background-color: $key-color;
							@include easing-original(0.2);
						}
						&:not(:first-child){
							margin-left: 55px;
						}
						&.active{
							z-index: 1001;
							&:before{
								height: 20px;
								bottom: -10px;
							}
						}
					}
				}
			}
		}
	}
	#kv-container{
		height: 570px;
		#kv-inner{
			position: relative;
			width: 100%;
			.kv-slde{
				height: 570px;
			}
			.kv-slide_item{
				float: left;
				// height: 100%;
				height: 570px;
				background-repeat: none;
				background-size: cover;
				&.kv-slide_item01{
					background-image: url("../img/kv_bg01.jpg");
				}
				&.kv-slide_item02{
					background-image: url("../img/kv_bg02.jpg");
				}
				&.kv-slide_item03{
					background-image: url("../img/kv_bg03.jpg");
				}
			}
			.text-container{
				position: absolute;
				top: 40%;
				left: 54%;
				width: 490px;
				max-width: 490px;
				z-index: 1000;
				.text-container-area{
					margin-top: 70px;
					padding: 60px 50px;
					background: linear-gradient(135deg,#e04101,#cf0810);
					.text-container-title{
						margin-bottom: 20px;
						font-size: 34px;
						line-height: 1.32;
						letter-spacing: 0.04em;
					}
					.text-container-text{
						font-size: 15px;
					}
				}
			}
		}
	}

} // [ $pc-all END ]


@media #{$smp} {
	#header{
		.header-inner{
		}
		.header-inner-top{
			position: fixed;
			width:100%;
			height: 60px;
			display: flex;
			align-items: center;
			padding-top: 17.5px;
			padding-bottom: 20px;
			z-index: 49999;
			background-color: #fff;
			padding-left:15px;
			padding-right:15px;
			box-sizing: border-box;
			.header-area_left{
				float: left;
				display: flex;
				align-items: center;
				#header-site_logo{
					width: 65px;
					margin-right: 30px;
				}
				.page-profarm{
					width: 150px;
					vertical-align: baseline;
					>*{
						display: block;
					}
				}
			}
			.header-area_right{
				display: none;
			}
			#gnavi-trigger{
				margin-left: auto;
				width: 26px;
				position: relative;
				#gnavi-trigger-inner{
					position: relative;
					.line{
						width: 100%;
						height: 2px;
						background-color: #241f21;
						margin-bottom: 5px;
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
				&.open{
					opacity:0;
				}
			}
		}
		.header-inner-bottom{
			background-color: transparent;
			#gnavi_container{
				display: none;
				opacity: 0;
				background-color: rgba(47,50,60,0.98);
				position: fixed;
				width:100%;
				height:100%;
				top: 0;
				z-index: 100000;
				#gnavi-close{
					position: absolute;
					width:20px;
					height:20px;
					right:21px;
					top: 30px;
					#gnavi-trigger-inner{
						position: relative;
						.line{
							width: 25px;
							height: 2px;
							position: absolute;
							background-color: #fff;
							&:nth-child(1){
								@include rotate(45);
							}
							&:nth-child(2){
								@include rotate(-45);
							}
						}
					}
				}
				.gnavi_inner{
					position: absolute;
					width:100%;
					height:285px;
					top: 0;
					bottom: 0;
					margin:auto;
					.gnavi_list{
						text-align: center;
						li{
							display: block;
							text-align: center;
							a{
								display: block;
								color: #fff;
								font-size: 19px;
								font-weight: 600;
								padding: 13px 0;
								cursor: pointer;
								&:hover{
									text-decoration: none;
								}
							}
							&.active{
								//position: relative;
								//z-index: 1001;
							}
						}
					}
				}
			}
		}
	}
	#kv-container{
		margin-top: 60px;
		height: 255px;
		//padding-top:62.5px;
		#kv-inner{
			position: relative;
			width: 100%;
			.kv-slde{
				height: 255px;
			}
			.kv-slide_item{
				float: left;
				height: 255px;
				background-repeat: none;
				background-size: cover;
				&.kv-slide_item01{
					background-image: url("../img/kv_bg_sp01.jpg");
				}
				&.kv-slide_item02{
					background-image: url("../img/kv_bg_sp02.jpg");
				}
				&.kv-slide_item03{
					background-image: url("../img/kv_bg_sp03.jpg");
				}
			}
			.text-container{
				position: relative;
				@include sp-body-margin;
				width: calc(100% - 30px);
				z-index: 1000;
				margin-top: -150px;
				.title{
					text-align: right;
					margin-bottom: 80px;
					img{
						width: 245px;
					}
				}
				.text-container-area{
					margin-top: 20px;
					padding: 25px 27.5px 30px;
					background: linear-gradient(135deg,#e04101,#cf0810);
					.text-container-title{
						margin-bottom: 15px;
						font-size: 20px;
						line-height: 1.32;
						letter-spacing: 0.04em;
						font-weight: 600;
					}
					.text-container-text{
						font-size: 13px;
					}
				}
			}
			.slick-list{
				overflow: scroll !important;
			}
		}
	}
} // [ $smp END ]

/* SMP =================================== */


/* #Contents Module
-------------------------------------------------- */
.contents{
	.section-container{
		.secton-title-en{
			@include font-en-bold;
			color: $key-color;
		}
		.section-title-ja{
			font-weight: 600;
		}
		.icon-text{
			position: relative;
			font-weight: 600;
			color: $key-color;
			&:before,&:after{
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				display: block;
				width: 10px;
				height: 10px;
			}
			&:before{
				background-color: #ce0411;
				left: 0px;
			}
			&:after{
				background-color: #2ea438;
				left: 10px;
			}
		}
	}
}
.asirai-bg{
	position: absolute;
	z-index: -1;
}
.asirai-green{
	position: relative;
	&:after{
		display: block;
		content: "";
		position: absolute;
		background-color: #4db256;
		opacity: 0.85;
	}
}

#product{
	.product-content{
		position: relative;
		background: url("../img/product_img.png") no-repeat center;
		background-size: cover;
		.product-point{
			.product-point_item{
				&:hover{
					&:before{
						@include pointanimation1;
					}
					&:after{
						@include pointanimation2;
					}
				}
			}

		}
	}
}
#function{
	.section-col2{
		&.function-section_top{
			align-items: inherit;
			.function-section_left_bg{
				background: url("../img/function_img01.png") no-repeat center;
				background-size: cover;
			}
		}
	}
	.function-section_bottom{
		.function-section-block{
			border-bottom: 1px solid $border-color;
			.function_text{

				.function-section-title{
					position: relative;
					&:before{
						content: "";
						position: absolute;
						bottom: 0;
						display: block;
						background-color: $key-color;
					}
				}
			}
		}
	}
	.function-section-other{
		.function-other_title{
			position: relative;
			font-weight: 600;
			color: $key-color;
			&:before{
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 10px;
				height: 10px;
				background-color: $key-color;
			}
		}
		.function-section-col1{
			.function-section_bg{
				background-color: #f5f9f9;
				span{
					background: url("../img/function_bg.png") no-repeat center;
				}
			}
		}
	}
}

#feature{
	.feature-section{
		>*{
			text-align: center;
		}
		.feature-section_img{
			position: relative;
			text-align: center;
			.feature-section-caption{
				position: relative;
				margin: -15px auto 0;
				@include redgradation;
				@include font-en-bold;
				color: #fff;
				font-weight: 600;
				letter-spacing: 0.2em;
				z-index: 1;
			}
			.feature_movie{
			}
			.movie_time{
				position: absolute;
				top: 10px;
				right: 10px;
				padding: 0 5px;
				font-size: 14px;
				background-color: #fff;
			}
			iframe{
				border: 1px solid $border-color;
			}
		}
	}
}

#voice{
	&.section-container{
		margin-bottom: 0;

	}
	.voice-list-area{
		position: relative;
		z-index: 1;
	}
	.voice-section_bg{
		background: #f1f1ed url("../img/section_bg_gray.gif");
	}
	.voice-list{
		li{
			&:nth-child(even){
				.voice-list-top{
					position: relative;
					.voice-list-caption{
						&:before{
							content: "";
							display: block;
							position: absolute;
							top: 0;
							bottom: 0;
							right: inherit;
							margin: auto;
							background-color: #fff;
							z-index: 2;
						}
					}
					.voice-list-title{
						order: -1;
					}
				}
			}
		}
		.voice-list-top{
			display: -ms-flexbox;
			display: flex;
			.voice-list-caption{
				position: relative;
				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					background-color: #fff;
					z-index: 2;
				}
				&.voice-list-caption01{
					background: url("../img/voice_img01.jpg") no-repeat center;
				}
				&.voice-list-caption02{
					background: url("../img/voice_img02.jpg") no-repeat center;
				}
			}
			.voice-list-title{
				display:-ms-flexbox;
				display: flex;
				align-items: center;
				color: #fff;
				@include redgradation;
			}
		}
		.voice-list-bottom{
			background-color: #fff;
			.voice-list-subtitle{
				position: relative;
				font-weight: 600;
				color: $key-color;
				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 5px 0 5px 9px;
					border-color: transparent transparent transparent $key-color;
				}
			}
		}
	}
}


/* PC =================================== */

/* PC　ALL */
@media #{$pc-all} {
	.contents.page{
		margin-top: 50px;
	}
	.contents{
		margin-top: 170px;
		.section-title{
			display:-ms-flexbox;
			display: flex;
			align-items: center;
		}
		.icon-text{
			padding-left: 40px;
			margin-bottom: 15px;
			font-size: 22px;
		}
		.section-container{
			&:not(:last-of-type){
				margin-bottom: 135px;
			}
			.section-inner{
				@include pc-width;
			}
			.section-title{
				margin-bottom: 50px;
			}
			.secton-title-en{
				margin-right: 45px;
				font-size: 50px;
				letter-spacing: 0.2em;
			}
			.section-title-ja{
				font-size: 16px;
			}
		}
	}
	.asirai-bg01{
		width: 1080px;
		height: 725px;
		background: url("../img/asirai01.png") no-repeat center;
		top: -425px;
		left: 50%;
		transform: translateX(-50%);
	}
	.asirai-bg02{
		width: 740px;
		height: 700px;
		background: url("../img/asirai02.png") no-repeat center;
		top: -40%;
		left: 35%;
		transform: translateX(-50%);
	}
	.asirai-bg03{
		width: 1400px;
		height: 540px;
		background: url("../img/asirai03.png") no-repeat center;
		top: -11%;
		left: 50%;
		transform: translateX(-50%);
	}
	.asirai-bg04{
		width: 1400px;
		height: 300px;
		background: url("../img/asirai04.png") no-repeat center;
		top: -1%;
		left: 50%;
		transform: translateX(-50%);
	}
	.asirai-bg05{
		width: 700px;
		height: 500px;
		background: url("../img/asirai05.png") no-repeat center;
		top: -35%;
		right: -5%;
	}
	#product{
		&.section-container{
			position: relative;
		}
		.products-text{
			margin-bottom: 40px;
			.icon-point{
				position: relative;
				height: 12px;
				padding-left: 50px;
				display: inline-block;
				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 26px;
					height: 26px;
					border-radius: 50%;
					opacity: 0.3;
					background-color: $key-color;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					border-radius: 50%;
					width: 32px;
					height: 32px;
					border: 1px dotted $key-color;
				}
			}
		}
		.product-content{
			padding-top: 49.5%;
			position: relative;
			.product-point_item{
				position: absolute;
				width: 38px;
				height: 38px;
				opacity: 0.3;
				cursor: pointer;
				a{
					display: block;
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 1;
				}
				&:before,
				&:after{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					border-radius: 50%;
				}
				&:before{
					width: 38px;
					height: 38px;
					border: 1px dotted $key-color;
				}
				&:after{
					width: 30px;
					height: 30px;
					background-color: $key-color;
				}
				&.product-point_item01{
					top: 50.3%;
					left: 39.4%;
				}
				&.product-point_item02{
					top: 52.5%;
					left: 45.6%;
				}
				&.product-point_item03{
					top: 36.5%;
					left: 50.6%;
				}
				&.product-point_item04{
					bottom: 11%;
					left: 54%;
				}
				&.product-point_item05{
					top: 54.5%;
					left: 60.9%;
				}
				&.product-point_item06{
					top: 54.5%;
					left: 74.4%;
				}
				&.product-point_item07{
					top: 59.5%;
					left: 79.6%;
				}

			}
		}
	}
	#function{
		.section-col2{
			display:-ms-flexbox;
			display: flex;
			align-items: center;
			&.function-section_top{
				align-items: inherit;
				.function-section_left{
					width: 51%;
					height: 426px;
					// padding-top: 39.5%;
					margin-right: 35px;
					position: relative;
				}
				.function-section_right{
					padding-top: 40px;
					.function-section-text{
						margin-bottom: 50px;
					}
				}
				.function-section_right{
					.icon-text{
						margin-bottom: 35px;

					}
					.function-section-text{
						font-size: 38px;
						line-height: 1.42;
					}
				}
			}
		}
		.function-section-toparea{
			position: relative;
			&:before{
				content: "";
				display: block;
				position: absolute;
				bottom: -60px;
				width: 100%;
				height: 210px;
				background: #f1f1ed url("../img/section_bg_gray.gif");
				z-index: -1;
			}
		}
		.function-section_bottom{
			margin-top: 150px;
			.function-section-monitor{
				margin-bottom: 100px;
			}
			.function-section-other{
				position: relative;
				.function-other_title{
					margin-bottom: 25px;
					padding-left: 30px;
					font-size: 22px;
				}
				.function-section-block{
					&:first-of-type{
						padding-top: 45px;
						border-top: 1px solid $border-color;
					}
					.function-section_img_row02{
						height: inherit;
						>*{
							width: 320px;
						}
						.function-section_img_top{
							float: left;
							margin-bottom: 30px;
						}
						.function-section_img_bottom{
							float: right;
						}

					}
				}
				.function-date{
					.function-date_title{
						margin-bottom: 10px;
					}
					.function-date-list{
						margin-bottom: 25px;
						li{
							&:not(:last-child){
								margin-bottom: 5px;
							}
						}
					}
					.function-date_text{
						margin-bottom: 30px;
					}
				}
				.function-section-col1{
					.function-section_bg{
						span{
							display: block;
							width: 100%;
							height: 250px;
							background-size: 645px 160px;
						}
					}
					.function-section-title{
						.section-title_sub{
							font-size: 16px;
						}
					}
				}
			}
			.function-section-block{
				padding: 0 80px 60px;
				&:not(:first-of-type){
					padding-top: 50px;
				}
				.function-section_left{
					margin-right: 60px;
				}
				.function-section_img{
					width: 400px;
					height: 245px;
				}
				.function_text{
					-ms-flex: 1;
					flex: 1;
					.function-section-title{
						padding-bottom: 10px;
						margin-bottom: 25px;
						font-size: 30px;
						&:before{
							width: 40px;
							height: 4px;
						}
					}
					.function-section-text{
						margin-bottom: 30px;
						font-size: 14px;
						.function-text_caution{
							display: block;
							font-size: 12px;
							margin-top: 10px;
						}
					}
				}
			}
		}
	}
	#feature{
		&.section-container{
			position: relative;
		}
		.section-col2{
			display:-ms-flexbox;
			display: flex;
			justify-content: space-between;
		}
		.feature-section{
			>*{
				width: 500px;
				text-align: center;
			}
			.feature-section_img{
				position: relative;
				margin-bottom: 25px;
				text-align: center;
				.feature-section-caption{
					width: 150px;
					height: 30px;
					line-height: 30px;
				}
				.feature_movie{
					position: relative;
					width: 100%;
					&:before{
						content:"";
						display: block;
						padding-top: 56.25%;
					}
					#content {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						// box-sizing: border-box;
					}
				}
			}
			.feature-section_text{
				dt{
					margin-bottom: 25px;
					font-size: 24px;
				}
			}
		}
	}
	#voice{
		&.section-container{
			margin-bottom: 0;

		}
		.voice-list-area{
			position: relative;
			z-index: 1;
		}
		.voice-section_bg{
			padding-top: 100px;
			padding-bottom: 40px;
		}
		.voice-list{
			li{
				&:first-child{
					margin-bottom: 50px;
				}
				&:nth-child(even){
					.voice-list-top{
						position: relative;
						float: right;
						.voice-list-caption{
							&:before{
								right: inherit;
								left: -17.5px;
								width: 35px;
								height: 5px;
								z-index: 2;
							}
						}
						.voice-list-title{
							-ms-flex-order: -1;
							order: -1;
							&.asirai-green{
								&:after{
									right: inherit;
									left: -7px;
								}
							}
						}
					}
					.voice-list-bottom{
						float: right;
						margin-left: inherit;
						margin-right: 100px;
					}
				}
			}
			.voice-list-top{
				display: flex;
				.voice-list-caption{
					width: 100px;
					height: 100px;
					position: relative;
					&:before{
						right: -17.5px;
						width: 35px;
						height: 5px;
						z-index: 2;
					}
				}
				.voice-list-title{
					display:-ms-flexbox;
					display: flex;
					align-items: center;
					height: 100px;
					padding: 0 60px;
					span{
						font-size: 20px;
					}
				}
			}
			.voice-list-bottom{
				margin-top: -45px;
				margin-left: 100px;
				padding: 75px 50px 50px;
				.voice-list-subtitle{
					position: relative;
					padding-left: 25px;
					margin-bottom: 25px;
					font-weight: 600;
					font-size: 16px;
					color: $key-color;
				}
			}
		}
		.voice_caution{
			margin-left: 35px;
		}
	}
	#contact{
		.contact-inner{
			width: 100%;
			position: relative;
			.contact-bg{
				height: 490px;
				background: url("../img/contact_bg.jpg") no-repeat center;
				background-size: cover;
			}
		}
		.contact-text{
			position: absolute;
			top: -30px;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			width: 670px;
			height: 270px;
			text-align: center;
			.section-title{
				display: block;
				margin-bottom: 35px;
				>*{
					color: #fff;
				}
				.secton-title-en{
					margin-right: inherit;
				}
			}
			.contact-text_info{
				padding: 35px 95px;
				@include redgradation;
				.contact-list{
					li{
						text-align: center;
						color: #fff;
					}
					.contact-company{
						font-size: 20px;

					}
					.contact-tel{
						font-size: 30px;
						span{
							font-size: 20px;
						}
					}
					.contact-info{
						font-size: 14px;
					}
				}
			}
		}
	}
	.asirai-green{
		&:after{
			width: 14px;
			height: 14px;
			right: -7px;
			bottom: -7px;
		}
	}

} // [ $pc-all END ]

/* PC　サイズ別 */
@media #{$smp} {
	.contents.page{
		margin-top: 30px;
	}
	.contents{
		margin-top: 230px;
		.icon-text{
			padding-left: 40px;
			margin-bottom: 15px;
			font-size: 17px;
		}
		.section-container{
			&:not(:last-of-type){
				margin-bottom: 90px;
			}
			.section-inner{
				@include sp-body-margin;
			}
			.section-title{
				margin-bottom: 35px;
			}
			.secton-title-en{
				font-size: 37px;
				letter-spacing: 0.2em;
			}
			.section-title-ja{
				font-size: 11px;
			}
		}
	}
	.asirai-bg01{
		width: 750px;
		height: 400px;
		background: url("../img/asirai01.png") no-repeat center;
		top: -260px;
		left: 50%;
		transform: translateX(-50%);
		background-size: cover;
	}
	.asirai-bg02{
		width: 600px;
		height: 460px;
		background: url("../img/asirai02.png") no-repeat center;
		top: -60%;
		left: 35%;
		transform: translateX(-50%);
		background-size: contain;
	}
	.asirai-bg03{
		width: 750px;
		height: 320px;
		background: url("../img/asirai03.png") no-repeat center;
		top: 27%;
		left: 50%;
		transform: translateX(-50%);
		background-size: cover;
	}
	.asirai-bg04{
		width: 750px;
		height: 200px;
		background: url("../img/asirai04.png") no-repeat center;
		top: -8%;
		left: 35%;
		transform: translateX(-50%);
		background-size: contain;
	}
	.asirai-bg05{
		width: 350px;
		height: 250px;
		background: url("../img/asirai05.png") no-repeat center;
		top: -15%;
		right: -5%;
		background-size: cover;
	}
	#product{
		&.section-container{
			position: relative;
		}
		.products-text{
			margin-bottom: 20px;
			.icon-point{
				position: relative;
				height: 12px;
				padding-left: 30px;
				display: inline-block;
				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 12px;
					height: 12px;
					border-radius: 50%;
					opacity: 0.3;
					background-color: $key-color;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					border-radius: 50%;
					width: 16px;
					height: 16px;
					border: 1px dotted $key-color;
				}
			}
		}
		.product-content{
			margin-bottom: 30px;
			padding-top: 49.5%;
			position: relative;
			.product-point_item{
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				opacity: 0.3;
				cursor: pointer;
				background-color: $key-color;
				a{
					display: block;
					width:100%;
					height:100%;
					position: relative;
					z-index: 1;
				}
				&:before{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					border-radius: 50%;
					width: 16px;
					height: 16px;
					border: 1px dotted $key-color;
				}
				&.product-point_item01{
					top: 51.5%;
					left: 40%;
				}
				&.product-point_item02{
					top: 52.5%;
					left: 46%;
				}
				&.product-point_item03{
					top: 36.5%;
					left: 51%;
				}
				&.product-point_item04{
					bottom: 11%;
					left: 54%;
				}
				&.product-point_item05{
					top: 54.8%;
					left: 61.4%;
				}
				&.product-point_item06{
					top: 54.8%;
					left: 74.9%;
				}
				&.product-point_item07{
					top: 59.5%;
					left: 79.6%;
				}

			}
		}
	}
	#function{
		.section-col2{
			&.function-section_top{
				display: block;
				align-items: inherit;
				.function-section_left{
					padding-top: 70.5%;
					position: relative;
					@include sp-body-margin;
				}
				.function-section_right{
					padding-top: 0px;
					.function-section-text{
						margin-bottom: 20px;
					}
				}
				.function-section_right{
					.icon-text{
						margin-bottom: 15px;
						font-weight: 600;

					}
					.function-section-text{
						font-size: 25px;
						line-height: 1.42;
						font-weight: 600;
					}
				}
			}
		}
		.function-section-toparea{
			position: relative;
			&:before{
				content: "";
				display: block;
				position: absolute;
				bottom: -55px;
				width: 100%;
				height: 360px;
				background: #f1f1ed url("../img/section_bg_gray.gif");
				z-index: -1;
			}
		}
		.function-section-bottomarea{
			.section-inner{
				margin: 0;
			}
		}
		.function-section_bottom{
			margin-top: 90px;
			.function-section-monitor{
				margin-bottom: 25px;
			}
			.function-section-other{
				position: relative;
				.function-other_title{
					margin-left: 15px;
					margin-bottom: 25px;
					padding-left: 30px;
					font-size: 17px;
					&:after{
						content: "";
						display: block;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 10px;
						margin: auto;
						width: 10px;
						height: 10px;
						background-color: #2ea438;
					}
				}
				.function-section-block{
					&:first-of-type{
						padding-top: 45px;
						border-top: 1px solid $border-color;
					}
					.function-section_img_row02{
						height: inherit;
						>*{
							width: 86%;
						}
						.function-section_img_top{
							float: left;
							margin-bottom: 15px;
						}
						.function-section_img_bottom{
							float: right;
						}

					}
				}
				.function-date{
					.function-date_title{
						margin-bottom: 10px;
					}
					.function-date-list{
						margin-bottom: 15px;
						li{
							&:not(:last-child){
								margin-bottom: 5px;
							}
						}
					}
					.function-date_text{
						margin-bottom: 30px;
					}
				}
				.function-section-col1{
					.function-section_bg{
						width: 100%;
						order: -1;
						padding: 0 20px;
						margin-bottom: 15px;
						span{
							display: block;
							width: 100%;
							padding-top: 50%;
							background-size: contain;
						}
					}
					.section-title_sub{
						font-size: 10px;
						font-weight: 600;
					}
				}
			}
			.function-section-block{
				display: flex;
				flex-wrap: wrap;
				padding-left: 42.5px;
				padding-right: 42.5px;
				padding-bottom: 35px;
				&:not(:first-of-type){
					padding-top: 35px;
				}
				&:nth-of-type(even){
					.function-section_right{
						order: -1;
						margin-bottom: 25px;
					}
				}
				.function-section_img{
					width: 100%;
					margin-bottom: 25px;
				}
				.function_text{
					width: 100%;
					.function-section-title{
						padding-bottom: 15px;
						margin-bottom: 15px;
						font-size: 20px;
						font-weight: 600;
						text-align: center;
						&:before{
							left: 50%;
							width: 40px;
							height: 4px;
							transform: translateX(-50%);
						}
					}
					.function-section-text{
						margin-bottom: 20px;
						font-size: 14px;
						.function-text_caution{
							display: block;
							font-size: 12px;
							margin-top: 10px;
						}
					}
				}
			}
		}
	}
	#feature{
		&.section-container{
			position: relative;
		}
		.section-col2{

		}
		.feature-section{
			.feature-section_left{
				margin-bottom: 45px;
			}
			>*{

				text-align: center;
			}
			.feature-section_img{
				margin-bottom: 25px;
				text-align: center;
				.feature-section-caption{
					width: 150px;
					height: 30px;
					line-height: 30px;
				}
				.feature_movie{
					// padding-top: 64%;
					position: relative;
					width: 100%;
					&:before{
						content:"";
						display: block;
						padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
					}
					#content {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
			.feature-section_text{
				dt{
					margin-bottom: 15px;
					font-weight: 600;
					font-size: 20px;
				}
			}
		}
	}
	#voice{
		&.section-container{
		}
		.section-title{
			.section-title-ja{
				display: inline-block;
				margin-right: 20px;
			}
			.voice_caution{
				display: inline-block;
			}
		}
		.voice-section{
			>.section-inner{
				margin:0;
			}
		}
		.voice-list-area{
			position: relative;
			z-index: 1;
		}
		.voice-section_bg{
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.voice-list{
			li{
				&:first-child{
					margin-bottom: 60px;
				}
				&:nth-child(even){
					.voice-list-top{
						position: relative;
						float: right;
						.voice-list-caption{
							margin-top: -10px;
							margin-left: -30px;
							margin-right: 0;
							&.voice-list-caption02{
								background-size: cover;
							}
							&:before{
								right: inherit;
								left: -10px;
								width: 20px;
								height: 2px;
								z-index: 2;
							}
						}
						.voice-list-title{
							flex: 1;
							order: -1;
							width: calc(100% - 60px);
							padding: 10px 50px 10px 25px;
							height: inherit;
							span{
								line-height: 1.33;
								font-size: 15px;
								font-weight: 600;
							}
							&.asirai-green{
								&:after{
									right: inherit;
									left: -7px;
								}
							}
						}
					}
					.voice-list-bottom{
						float: right;
						margin-left: inherit;
						margin-right: 45px;
					}
				}
			}
			.voice-list-top{
				display: flex;
				margin: 0  15px;
				.voice-list-caption{
					margin-top: -10px;
					margin-right: -30px;
					width: 60px;
					height: 60px;
					position: relative;
					z-index: 2;
					&.voice-list-caption01{
						background-size: cover;
					}
					&:before{
						right: -10px;
						width: 20px;
						height: 2px;
						z-index: 2;
					}
				}
				.voice-list-title{
					flex: 1;
					width: calc(100% - 60px);
					height: 85px;
					padding: 0 25px 0 50px;
					span{
						line-height: 1.33;
						font-size: 15px;
						font-weight: 600;
					}
				}
			}
			.voice-list-bottom{
				margin-top: -55px;
				margin-left: 45px;
				padding: 75px 22.5px 50px;
				.voice-list-subtitle{
					position: relative;
					padding-left: 25px;
					margin-bottom: 20px;
					font-weight: 600;
					font-size: 15px;
					color: $key-color;
					&:before{
						top: 7px;
						bottom: inherit;
					}
				}
			}
		}
		.voice_caution{
			font-size: 10px;
			// margin-top: 15px;
		}
	}
	#contact{
		margin-bottom: 50px;
		.contact-inner{
			width: 100%;
			position: relative;
			.contact-bg{
				height: 230px;
				background: url("../img/contact_bg_sp.jpg") no-repeat center;
				background-size: cover;
			}
		}
		.contact-text{
			margin-top: -150px;
			@include sp-body-margin;
			text-align: center;
			.section-title{
				display: block;
				margin-bottom: 25px;
				>*{
					color: #fff;
				}
				.secton-title-en{
					margin-right: inherit;
					font-size: 25px;
				}
			}
			.contact-text_info{
				margin: 0 10px;
				padding: 35px 37.5px;
				@include redgradation;
				.contact-list{
					li{
						text-align: center;
						color: #fff;
					}
					.contact-company{
						font-size: 15px;
						font-weight: 600;

					}
					.contact-tel{
						font-size: 25px;
						font-weight: 600;
						span{
							font-size: 19px;
							font-weight: 600;
						}
					}
					.contact-info{
						font-size: 11px;
					}
				}
				.btn_tel{
					margin-top: 25px;
					position: relative;
					height:  50px;
					line-height: 50px;
					border: 1px solid #fff;
					a{
						display: block;
						width: 100%;
						height: auto;
						color:#fff;
						font-size: 14px;
						font-weight: 600;
						text-decoration: none;
					}
					&:after{
						content: "";
						display: block;
						position: absolute;
						top: 0;
						right: 20px;
						bottom: 0;
						margin: auto;
						width: 10px;
						height: 15px;
						background: url("../img/icon_tel.svg") no-repeat center;
					}
				}
			}
		}
	}
	.asirai-green{
		&:after{
			width: 14px;
			height: 14px;
			right: -7px;
			bottom: -7px;
		}
	}
} // [ $pc-small END ]

/* SMP =================================== */

@media #{$smp} {

} // [ $smp END ]

#footer{

}

@keyframes topIcon {
	0% {

	}
	100% {
		width:300px;
	}
}

@media #{$pc-all} {
	#footer{

	}
	#page-top {
		&:hover{

		}
		#page-top-inner {
			position: relative;
			@include pc-width;
			.icon {
				position: absolute;
				top: -30px;
				right: 0;
				display: block;
				width: 60px;
				height: 60px;
				background-color: #2f323c;
				cursor: pointer;
				&:after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					@include rotate(-90);
					margin: auto;
					display: block;
					width: 14px;
					height: 8px;
					background: url("../img/arrow_white.svg") no-repeat center;
					background-size: cover;
				}
			}
		}
	}
	.contents-copy{
		p{
			height: 100px;
			line-height: 100px;
			text-align: center;
			font-size: 10px;
		}
	}
} // [ $pc-small END ]


@media #{$smp} {
	#footer{

	}
	#page-top-inner{
		position: relative;
		.icon{
			position: relative;
			display: block;
			width: 100%;
			height: 60px;
			background-color: #2f323c;
			&:after{
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				@include rotate(-90);
				margin: auto;
				display: block;
				width: 14px;
				height: 8px;
				background: url("../img/arrow_white.svg") no-repeat center;
				background-size: cover;
			}
		}
	}
	.contents-copy{
		p{
			height: 60px;
			line-height: 60px;
			text-align: center;
			font-size: 10px;
		}
	}

} // [ $smp END ]




/* -----------------------------------------------
 [2. liblary(ライブラリ)]
-------------------------------------------------- */

/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/



/*
CONTENTS:
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited).
	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar.
	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars.
	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars.
	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/


.modal_wrap{
	display: none;
}

.modal_inner{
	.modal_tab_btn{
		display: flex;
		margin-bottom: 25px;
		>*{
			width: 50%;
			text-align: center;
			border-top: 1px solid $border-color;
			border-bottom: 1px solid $border-color;
			color: $key-color;
			font-weight: 600;
		}
		.tab_btn{
			background-color: #f1f1ed;
			cursor: pointer;
			&.active{
				@include redgradation;
				color: #fff;
			}
		}
	}
	.modal_tab_area{
		display: none;
		&.tab01{
			display: block;
		}
	}
}

#colorbox {
	z-index: 50001;
	overflow: visible!important;
}

#cboxContent{
	background-color: #fff;
}

#cboxWrapper{
	//overflow-y: scroll;
	overflow-x: hidden;
	.pager{
		text-align: center;
		height:0px;
		position: relative;
		span{
			display: inline-block;
			width:5px;
			height:5px;
			background-color: #d9dade;
			margin-left:2px;
			margin-right:2px;
			&.active{
				background-color: $key-color;
			}
		}
	}
}

#cboxOverlay{
	background: rgba(89,91,99,0.8);
	position: fixed;
	left: 0; top: 0;
	display: none;
	opacity: 1;
	width: 100%; height: 100%;
	z-index: 50000;
}

.slick-arrow{
	position: absolute;
	border: 1px solid #a4a6ab;
	background: url("../img/common/_icon/arrow_white.svg") no-repeat center center;
	position: absolute;
	top: 50%;
	text-indent: -9999px;
	display: block;
}
.slick-prev{
	@include rotate(180);
}

.slick-dots{
	position: relative;
	@include pc-width;
	z-index: 1001;
	li{
		display: inline-block;
		text-indent: -9999px;
		background-color: $key-color;
		opacity: 0.7;
		vertical-align: bottom;
		&.slick-active{
			position: relative;
		}
	}
}

.slick-dots{
	position: absolute;
	left: 50%;
    bottom: -10px;
	margin-top: 48px;
	transform: translateX(-50%);
	li{
		width: 1px;
		height: 20px;
		margin-left: 7px;
		margin-right: 7px;
		&.slick-active{
			width: 4px;
			height: 40px;
			transition: all .2s cubic-bezier(0.075, 0.82, 0.565, 1);
			-moz-transition: all .2s cubic-bezier(0.075, 0.82, 0.565, 1);
			-webkit-transition: all .2s cubic-bezier(0.075, 0.82, 0.565, 1);
			-ms-transition: all .2s cubic-bezier(0.075, 0.82, 0.565, 1);
		}
		button{
			display: block;
			height: 100%;
			margin-left: -5px;
			text-indent: -9999px;
			padding-left: 5px;
			padding-right: 5px;
		}
	}
}

#cboxCurrent{
	display: none!important;
}
#cboxPrevious,
#cboxNext {
	position: absolute;
}

#cboxPrevious,
#cboxNext{
	background-color: #2f323c;
	top:50%;
	text-indent:-9999px;
	&:after{
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		display: block;
		background: url("../img/arrow_white.svg") no-repeat center;
		background-size: cover;
	}
}
#cboxPrevious{
	&:after{
		@include rotate(180);
	}
}

#cboxClose{
	position: absolute;
	width: 40px;
	height: 40px;
	top: -50px;
	z-index: 5001;
	text-indent:-9999px;
	cursor: pointer;
	&:before,&:after{
		content: "";
		display: block;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
		background-color: #fff;
		width: 30px;
		height: 1px;
	}
	&:before{
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
	&:after{
		transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}
}

/* PC =================================== */

/* PC　ALL */
@media #{$pc-all} {

	#cboxPrevious,
	#cboxNext{
		width:50px;
		height:50px;
		margin-top:-25px;
		&:after{
			width: 14px;
			height: 8px;
		}
	}
	#cboxPrevious{
		left: -25px;
	}
	#cboxNext{
		right: -25px;
	}

	#cboxClose {
		right: -40px;
	}

	.modal_inner{
		box-sizing: border-box;
		.modal_tab_btn{
			margin-bottom: 25px;
			>*{
				height: 60px;
				line-height: 60px;
			}
		}
		.modal_tilte{
			height: 80px;
			line-height: 80px;
			text-align: center;
			font-size: 24px;
		}
		.modal_img{
			margin: 0 auto;
		}
		.modal_info{
			width: 400px;
			margin: 25px auto 0;
			text-align: center;
			dt{
				margin-bottom: 10px;
				font-size: 24px;
			}
			dd{
				text-align: center;
			}
			.modal_info_sub{
				margin-top: 10px;
				li{
					text-align: center;
					font-size: 10px;
				}
			}
		}
		.pager {
			bottom: -5px;
		}
	}

	.product_modal_wrap {
		width: 660px;
		padding-bottom: 45px;
		.modal_img{
			margin: 0 auto;
			width: 400px;
			height: 260px;
		}
	}

	.function_modal_wrap{
		padding:50px 50px 45px;
		.modal_img{
			margin: 0 auto;
			width: 701px;
		}
	}

} // [ $pc-all END ]

/* PC　サイズ別 */
@media #{$pc-small} {
} // [ $pc-small END ]

/* SMP =================================== */

@media #{$smp} {

	#cboxPrevious,
	#cboxNext{
		width:35px;
		height:35px;
		margin-top:-17px;
		&:after{
			width: 14px;
			height: 8px;
		}
	}
	#cboxPrevious{
		left: -17px;
	}
	#cboxNext{
		right: -17px;
	}

	#cboxClose {
		right: -7px;
	}

	.modal_inner{
		box-sizing: border-box;
		.modal_tab_btn{
			margin-bottom: 25px;
			>*{
				height: 40px;
				line-height: 40px;
			}
		}
		.modal_tilte{
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 15px;
			font-weight: 600;
		}
		.modal_img{
			margin: 0 27px;
		}
		.modal_info{
			margin: 20px 27px 0;
			dt{
				margin-bottom: 5px;
				font-size: 15px;
				font-weight: 600;
			}
			dd{
				text-align: left;
			}
			.modal_info_sub{
				margin-top: 10px;
				li{
					text-align: center;
				}
			}
		}
		.pager {
			bottom: 5px;
		}
	}

	.product_modal_wrap {
		padding-bottom: 25px;
	}

	.function_modal_wrap{
		padding:25px 0 20px;
	}

	.slick-arrow{
		width: 44px;
		height: 44px;
		background-size: 4px 9px;
	}
	.slick-prev{
		left: 0px;
	}
	.slick-next{
		right: 0px;
	}

	.slick-dots{
		margin-top: 48px;
		li{
			margin-left: 7px;
			margin-right: 7px;
			height: 10px;
			&.slick-active{
				height: 15px;
				top: -2px;
			}
		}
	}

} // [ $smp END