@charset "UTF-8";

/* style.css */

/* -------------------------------------------------------------------------- */
/*  @font-face 
 * -------------------------------------------------------------------------- */

@font-face {
	font-family: 'icomoon';
	src: url('/css/fonts/icomoon.eot?vokktb');
	src: url('/css/fonts/icomoon.eot?vokktb#iefix') format('embedded-opentype'),
	     url('/css/fonts/icomoon.ttf?vokktb') format('truetype'),
	     url('/css/fonts/icomoon.woff?vokktb') format('woff'),
	     url('/css/fonts/icomoon.svg?vokktb#icomoon') format('svg');
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: 'YuGothic R';
	src: local('Yu Gothic Regular'),
	     local('Yu Gothic');
	font-weight: 400;
}
@font-face {
	font-family: 'YuGothic M';
	src: local('Yu Gothic Medium'),
	     local('Yu Gothic');
	font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/*  common 
 * -------------------------------------------------------------------------- */

:root {
	font-size: 16px;
}

html {
	overflow-y: scroll;
}

body {
	position: relative;
	background: #f0edde url(/img/bg_body.png);
	color: #444241;
	font-family:
		'Scope One',				/* 欧文フォント */
		'YuGothic M', 'Yu Gothic', YuGothic,	/* 和文フォント */
		'Noto Sans Japanese',			/* 和文代替フォント */
		'Hiragino Kaku Gothic ProN', Meiryo,	/* 標準フォント */
		sans-serif;
	font-size: .9375rem; /* 15px */
	 -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
/* デバッグ中はコメントアウト */
	-webkit-animation: fade-in 1600ms ease;
	        animation: fade-in 1600ms ease;
}
@keyframes fade-in {
	  0% {opacity: 0;}
	100% {opacity: 1;}
}

/*  -- link  
 ---------------------------------------------------------------------------- */

a {
	color: #e96f8d;
	text-decoration: none;
	transition: 400ms;
}

a::before,
a::after {
	transition: inherit;
}

a:hover {
	color: rgba(68, 66, 65, .9);
}

a:focus {
	outline: none;
}

/*  -- block contents  
 ---------------------------------------------------------------------------- */

p {
	margin-bottom: 72px;
	text-align: justify;
}

p + p {
	margin-top: -40px;
}

table {
	width: 100%;
	margin-bottom: 72px;
	border-top: 1px solid transparent;
	border-image: url(/img/bg_border_img.png) 1 / 1 0 0 repeat;
}

table caption {
	padding-left: 4px;
	text-align: left;
}

table th,
table td {
	padding: 8px;
	border-bottom: 1px solid transparent;
	border-image: url(/img/bg_border_img.png) 1 / 0 0 1 repeat;
	font-weight: normal;
	vertical-align: top;
}

/*  -- fonts  
 ---------------------------------------------------------------------------- */

small {
	color: rgba(68, 66, 65, .8);
	font-size: .8125rem; /* 13px */
}

em {
	font-style: normal;
	font-weight: 900;
}

cite {
	font-style: normal;
}

ruby {
	display: inline;
}

rp,
rt {
	display: inline;
	font-size: .8em;
}

::selection {
	background: #f3a2b6;
	background: #7ed4d3;
	color: #f6f3ec;
	text-shadow: none;
}

::-moz-selection {
	background: #f3a2b6;
	background: #7ed4d3;
	color: #f6f3ec;
	text-shadow: none;
}

/* -------------------------------------------------------------------------- */
/*  header 
 * -------------------------------------------------------------------------- */

.header {			/* headerHeight: 2px + 68px + 48px + 48px == 166px */
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 68px 0 48px;
	border-top: 2px solid #f0edde;
	background: url(/img/bg_header.png) repeat-x left -100px, transparent; /* 120px - 20px */
}

.header_inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	padding: 0 calc(50% - 500px) 0 32px;
	padding: 0 calc(50% - 500px);
}

/*  -- .header_logo  
 ---------------------------------------------------------------------------- */

.header_logo {
	margin: -16px;
}

.header_logo a {
	display: block;
	padding: 16px;
}

.header_logo svg {
	opacity: .98;
	width: auto;
	height: 48px;
	vertical-align: bottom;
	fill: #eb7993;
	transition: 400ms;
}

.header_logo a:hover svg {
	fill: rgba(68, 66, 65, .9);
}

/*  -- .header_nav  
 ---------------------------------------------------------------------------- */

.header_nav {
	margin: -16px -24px -8px;
	transition: 400ms;
}

.header_nav ul {
	display: flex;
	justify-content: flex-end;
}

.header_nav li {
	padding: 0 8px;
}

.header_nav a {
	display: block;
	position: relative;
	padding: 16px;
	font-family: 'Asap', Arial, sans-serif;
	font-weight: 600;
	font-size: 1.0625rem; /* 17px */
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.header_nav a::before {
	content: '\f0dd';
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	color: transparent;
	font-family: 'icomoon';
	font-weight: normal;
	text-align: center;
	transition: color 400ms, bottom 200ms;
}

.header_nav a:hover::before {
	bottom: -2px;
	color: #eb7993;
}

#service .header_nav_service a,
#works .header_nav_works a,
#about .header_nav_about a,
#contact .header_nav_contact a {
	color: rgba(68, 66, 65, .6);
	cursor: default;
	pointer-events: none;
}

#service .header_nav_service a::before,
#service .header_nav_service a:hover::before,
#works .header_nav_works a::before,
#works .header_nav_works a:hover::before,
#about .header_nav_about a::before,
#about .header_nav_about a:hover::before,
#contact .header_nav_contact a::before,
#contact .header_nav_contact a:hover::before {
	bottom: -2px;
	color: rgba(68, 66, 65, .6);
}

#works_item .header_nav_works a {
	color: rgba(68, 66, 65, .6);
}

#works_item .header_nav_works a:hover {
	color: #444241;
}

/* -------------------------------------------------------------------------- */
/*  header.is_fixed 
 * -------------------------------------------------------------------------- */

#home .header,
.header.is_fixed {
	position: fixed;
	z-index: 1000;
	padding: 16px 0;
	border-top: 0;
	border-bottom: 2px solid transparent;
	border-image: url(/img/bg_border.png) 2 / 0 0 1 repeat;
	background: url(/img/bg_header.png) repeat-x center -122px, #f0edde url(/img/bg_body.png);
	box-shadow: 0 0 4px rgba(0, 0, 0, .12);
}

#home .header .header_inner,
.header.is_fixed .header_inner {
	align-items: center;
}

/*  -- .header_logo  
 ---------------------------------------------------------------------------- */

#home .header_logo svg,
.header.is_fixed .header_logo svg {
	height: 36px;
}

/*  -- .header_nav  
 ---------------------------------------------------------------------------- */

#home .header_nav,
.header.is_fixed .header_nav {
	margin-top: -26px;
	margin-bottom: -25px;
}

#home .header_nav a,
.header.is_fixed .header_nav a {
	padding-top: 26px;
	padding-bottom: 25px;
}

#home .header_nav a::before,
.header.is_fixed .header_nav a::before {
	bottom: 15px;
}

#home .header_nav a:hover::before,
.header.is_fixed .header_nav a:hover::before,
#service .header.is_fixed .header_nav_service a::before,
#service .header.is_fixed .header_nav_service a:hover::before,
#works .header.is_fixed .header_nav_works a::before,
#works .header.is_fixed .header_nav_works a:hover::before,
#about .header.is_fixed .header_nav_about a::before,
#about .header.is_fixed .header_nav_about a:hover::before,
#contact .header.is_fixed .header_nav_contact a::before,
#contact .header.is_fixed .header_nav_contact a:hover::before {
	bottom: 8px;
}

/* -------------------------------------------------------------------------- */
/*  main 
 * -------------------------------------------------------------------------- */

.main {
	overflow: hidden;
	min-height: calc(100vh - 178px);	/* footerHeight == 178px */
	padding-top: 166px;			/* headerHeight == 166px */
	line-height: 2;
}

.main article {
	margin-bottom: 144px;
}

/*  -- generic style  
 ---------------------------------------------------------------------------- */

:lang(en) {
	letter-spacing: 1px;
}

.txt_capital {
	text-transform: capitalize;
}

.txt_small {
	font-size: .8em;
}

.txt_plain {
	text-transform: none;
}

.txt_nowrap {
	white-space: nowrap;
}

.txt_ellipsis {
	overflow: hidden;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.txt_mark {
	padding: 0 0 4px;
	background: 
		linear-gradient(
			#f0edde 50%,
			transparent 50%
		),
		linear-gradient(
			-45deg,
			rgba(240, 216, 130, 0) 25%,
			rgba(240, 216, 130, 1) 25%,
			rgba(240, 216, 130, 1) 50%,
			rgba(240, 216, 130, 0) 50%,
			rgba(240, 216, 130, 0) 75%,
			rgba(240, 216, 130, 1) 75%
		);
	background-size: 100%, 3px 3px;
}

.js__ellipsis .hide {
	font-size: 0;
}

.js__ellipsis .omit::after {
	content: '…';
}

.txt_symbol {
	font-family: 'Open Sans', Arial, sans-serif;
}

.code {
	font-family: 'Roboto Mono', 'Lucida Sans Unicode',
	             'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, monospace;
	font-weight: 300;
}

.closure {
	text-align: right;
}

.lede {
	width: 720px;
	margin: 0 auto 64px;
	font-size: 1.0625rem; /* 17px */
}

.external::after {
	content: '\e3e0';
	padding-left: .2em;
	font-family: 'Material Icons';
	line-height: 1;
	vertical-align: middle;
}

/*     .caution     
 -------------------- */

.caution {
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
	padding: 24px 32px;
	border: 3px solid transparent;
	font-size: 1.0625rem; /* 17px */
}

.caution::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #f3f1e5;
}

.caution::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	z-index: -2;
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	background: 
		linear-gradient(
			-45deg,
			rgba(68, 66, 65, 0) 25%,
			rgba(68, 66, 65, .3) 25%,
			rgba(68, 66, 65, .3) 50%,
			rgba(68, 66, 65, 0) 50%,
			rgba(68, 66, 65, 0) 75%,
			rgba(68, 66, 65, .3) 75%
		);
	background-size: 4px 4px;
}

.caution p + ul {
	margin-top: -56px;
	font-size: .9375rem; /* 15px */
}

.caution li {
	margin-bottom: 1em;
	margin-left: 1.2em;
	text-indent: -1.2em;
	text-align: justify;
}

.caution li:last-child {
	margin-bottom: 0;
}

.caution li::before {
	content: '※';
	display: inline-block;
	width: 1.2em;
	text-indent: 0;
}

/*  -- .eyecatch  
 ---------------------------------------------------------------------------- */

.eyecatch {
	margin-bottom: 72px;
	padding: 12px calc(50% - 500px);
	background: url(/img/bg_border.png);
}

.eyecatch figure,
#home .eyecatch .lightSlider > li {
	overflow: hidden;
	border: 6px solid #f7f6ee;
}

.eyecatch img {
	margin: 0 -6px;
}

/*  -- .inner__Box  
 ---------------------------------------------------------------------------- */

.inner_wrap {
	width: 1000px;
	margin: 0 auto 72px;
}

.inner_col_wrap {
	overflow: hidden;
	width: 1000px;
	margin: -72px auto 72px;
	padding: 72px 0 0;
}

.inner_col_main {
	float: right;
	width: 640px;
	text-align: left;
}

.inner_col_sub {
	float: left;
	width: 360px;
	padding-right: 72px;
}

/*  -- .ttl__Title  
 ---------------------------------------------------------------------------- */

.ttl_page {
	position: relative;
	z-index: 1;
	padding: 40px calc(50% - 500px);
	text-align: center;
}

.ttl_page::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	height: 76px;
	width: 100%;
	background: 
		radial-gradient(
			rgba(235, 121, 147, .12) 25%,
			transparent 25%
		) 0 50%,
		radial-gradient(
			rgba(235, 121, 147, .12) 25%,
			transparent 25%
		) 32px calc(50% - 32px);
	background-size: 64px 64px;
}

.ttl_headline {
	margin-bottom: 72px;
	padding: 0 calc(50% - 500px - .4em) 0 calc(50% - 500px);
	background: url(/img/bg_border.png);
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 900;
	font-size: 1.0625rem; /* 17px */
	line-height: 3;
	letter-spacing: .4em;
	text-align: right;
}

.ttl_chapter {
	position: relative;
	margin-bottom: 56px;
	margin-left: -3px;
	color: rgba(68, 66, 65, .9);
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: normal;
	font-size: 1.5rem; /* 24px */
	line-height: 1;
	text-align: right;
	text-transform: uppercase;
}

.ttl_chapter em {
	font-weight: 900;
	letter-spacing: 1px;
}

.ttl_chapter > span {
	display: inline-block;
	position: relative;
	padding-left: 20px;
}

.ttl_chapter > span:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background: url(/img/bg_body.png);
	-webkit-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	     -o-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	        transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	-webkit-transform-origin: right bottom;
	        transform-origin: right bottom;
}

.ttl_chapter:before {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 6px;
	background: url(/img/bg_border.png) bottom center;
	background: 
		linear-gradient(
			-90deg,
			rgba(68, 66, 65, .2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(68, 66, 65, .2) 50%,
			rgba(68, 66, 65, .2) 75%,
			transparent 75%
		);
	background-size: 12px 12px;
	-webkit-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	     -o-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	        transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	-webkit-transform-origin: left bottom;
	        transform-origin: left bottom;
}

.ttl_section {
	margin-bottom: 48px;
	margin-right: 72px;
	color: rgba(68, 66, 65, .4);
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 600;
	font-size: 3rem; /* 48px */
	line-height: 1;
	letter-spacing: 8px;
	text-align: left;
	text-transform: uppercase;
}

.ttl_sub {
	margin-bottom: 36px;
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 600;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.ttl_subsub {
	margin-bottom: 16px;
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 600;
	font-size: 1.0625rem; /* 17px */
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ttl_para {
	margin-bottom: 36px;
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 700;
	font-weight: 500;
	font-size: 1.25rem; /* 20px */
	line-height: 1.2;
	letter-spacing: 2px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/*  -- .button  
 ---------------------------------------------------------------------------- */

.button {
	display: block;
	position: relative;
	z-index: 2;
	width: 400px;
	margin: 0 auto;
	padding-left: 1em;
	border: 2px solid transparent;
	background: #eb7993;
	color: #f7f6ee;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 500;
	font-size: 1.0625rem; /* 17px */
	letter-spacing: .4em;
	line-height: 56px;
	text-align: center;
	text-transform: uppercase;
	transition: all 600ms, background 300ms, font-weight .0001ms;
}

.button:hover {
	border-color: rgba(68, 66, 65, .8);
	background: transparent;
	color: rgba(68, 66, 65, .8);
	font-weight: 700;
}

.button::after {
	content: '\f0da';
	position: absolute;
	top: 50%;
	left: 20px;
	font-family: 'icomoon';
	font-weight: normal;
	font-size: 1.1875rem; /* 19px */
	line-height: 1;
	-webkit-transform: translate(0, -50%);
	        transform: translate(0, -50%);
}

.button:hover::after {
	left: 28px;
	color: rgba(68, 66, 65, .8);
}

/*  -- .hover  
 ---------------------------------------------------------------------------- */

.hover_b,
.hover_a,
.works_url a,
.get_in_touch_inner address a,
.footer .footer_nav li a {
	position: relative;
	z-index: 1;
}

.hover_b::before,
.hover_a::after,
.works_url a::before,
.get_in_touch_inner address a::after,
.footer .footer_nav li a::after {
	content: '';
	position: absolute;
	top: calc(50% + .1em);
	right: -.2em;
	left: auto;
	z-index: -1;
	width: 0;
	height: .6em;
	background: 
		linear-gradient(
			-45deg,
			rgba(126, 212, 211, 0) 25%,
			rgba(126, 212, 211, .8) 25%,
			rgba(126, 212, 211, .8) 50%,
			rgba(126, 212, 211, 0) 50%,
			rgba(126, 212, 211, 0) 75%,
			rgba(126, 212, 211, .8) 75%
		);
	background-size: 2px 2px;
	transition: 300ms;
}

.hover_b:hover::before,
.hover_a:hover::after,
.works_url a:hover::before,
.get_in_touch_inner address a:hover::after,
.footer .footer_nav li a:hover::after {
	right: auto;
	left: -.2em;
	width: calc(100% + .4em);
}

/*  -- .breadcrumb  
 ---------------------------------------------------------------------------- */

.breadcrumb {
	padding: 0 calc(50% - 500px);
	background: rgba(235, 121, 147, .12);
	color: rgba(68, 66, 65, .6);
	font-family: 'Open Sans', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: .6875rem; /* 11px */
	line-height:  2.5rem;
	text-transform: uppercase;
}

.breadcrumb ol {
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
}

.breadcrumb li {
	position: relative;
	letter-spacing: 2px;
}

.breadcrumb li::after {
	content: '\edc6';
	padding-right: .4em;
	padding-left: .4em;
	font-family: 'icomoon';
	font-size: .875rem; /* 14px */
	letter-spacing: 0;
	vertical-align: middle;
}

.breadcrumb li:last-child {
	margin-right: -.7em;
}

.breadcrumb li:last-child::after {
	content: none;
}

.breadcrumb li a {
	display: inline-block;
	color: rgba(68, 66, 65, .6);
}

.breadcrumb li:first-child a::before {
	content: '\ecdb';
	position: relative;
	top: 2px;
	padding-right: .4em;
	font-family: 'icomoon';
	font-size: .8125rem; /* 13px */
}

.breadcrumb li a:hover {
	color: rgba(68, 66, 65, .96);
}

.breadcrumb li:first-child a:hover::before {
	color: rgba(68, 66, 65, .88);
}

/* -------------------------------------------------------------------------- */
/*  footer 
 * -------------------------------------------------------------------------- */

.footer {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	position: relative;
	height: 178px;		/* paddingTop: 48px + innerHeight: 16px + paddingBottom: 112px + border: 2px */
	padding: 48px calc(50% - 500px) 112px;
	border-bottom: 3px solid #f0edde;
	background: url(/img/bg_footer.png) repeat-x center 112px;	/* 64px */
	background-clip: padding-box;
	color: #e96f8d;
	font-family: 'Asap', Arial, sans-serif;
	font-size: .8125rem; /* 13px */
	line-height: 1rem; /* 16px */;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.footer small {
	color: #e96f8d;
}

/*  -- .footer_nav  
 ---------------------------------------------------------------------------- */

.footer .footer_nav {
	display: flex;
}

.footer .footer_nav li {
}

.footer .footer_nav li::after {
	content: '\ff5c';	/* ｜ */
	padding-right: .4em;
	padding-left: .5em;
	font-family: 'Open Sans', Arial, sans-serif;
	letter-spacing: normal;
}

.footer .footer_nav li:last-child::after {
	content: none;
}

/*  -- .to_top  
 ---------------------------------------------------------------------------- */

.footer .to_top {
	display: none;
	overflow: hidden;
	position: absolute;
	right: 0;
	bottom: 64px;
	z-index: 1000;
	width: 112px;
	height: 112px;
	padding: 24px;
}

.footer .to_top.is_floating {
	position: fixed;
	bottom: 0;
}

.footer .to_top a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transition: all 400ms, top 200ms;
}

.footer .to_top a::after {
	content: '\ec4e';
	position: absolute;
	top: 0;
	width: 100%;
	border-radius: 50%;
	font-family: 'icomoon';
	font-size: 2rem; /* 32px */
	line-height: 64px;
	text-align: center;
}

.footer .to_top a:hover::after {
	top: -12px;
}

/*  -- .get_in_touch  
 ---------------------------------------------------------------------------- */

.get_in_touch {
	padding: 40px 0;
	background: 
		radial-gradient(
			rgba(235, 121, 147, .12) 26%,
			transparent 26%
		) calc(50% - 56px) 50%,
		radial-gradient(
			rgba(235, 121, 147, .12) 26%,
			transparent 26%
		) 50% calc(50% - 56px);
	background-size: 112px 112px;
}

.get_in_touch_inner {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	width: 1000px;
	margin: 0 auto 16px;
}

.get_in_touch_inner p,
.get_in_touch_inner address {
	flex: 1;
	padding: 32px 0 30px;
	border: 2px solid rgba(68, 66, 65, .2);
	border-image: url(/img/bg_eyecatch.png) 2 repeat;
	background: #f1ede1;
	background: url(/img/bg_body.png);
	font-family: 'Open Sans', Arial, 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	line-height: 1;
	text-align: center;
}

.get_in_touch_inner b {
	display: block;
	position: relative;
	z-index: 0;
	color: rgba(68, 66, 65, .75);
	font-weight: 700;
	font-size: 1.0625rem; /* 17px */
	letter-spacing: .1em;
	text-indent: .1em;
}

.get_in_touch_inner b span {
	display: inline-block;
	position: relative;
	z-index: 1;
	padding: 0 16px;
}

.get_in_touch_inner b::before,
.get_in_touch_inner b::after,
.get_in_touch_inner b span::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	z-index: -1;
	height: 4px;
	-webkit-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	     -o-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	        transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
}

.get_in_touch_inner b::before {
	left: 48px;
	width: 50%;
	background: 
		linear-gradient(
			90deg,
			rgba(68, 66, 65, .2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(68, 66, 65, .2) 50%,
			rgba(68, 66, 65, .2) 75%,
			transparent 75%
		);
	background-size: 12px 12px;
	-webkit-transform-origin: left bottom;
	        transform-origin: left bottom;
}

.get_in_touch_inner b::after {
	right: 48px;
	width: 50%;
	background: 
		linear-gradient(
			-90deg,
			rgba(68, 66, 65, .2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(68, 66, 65, .2) 50%,
			rgba(68, 66, 65, .2) 75%,
			transparent 75%
		);
	background-size: 12px 12px;
	-webkit-transform-origin: right top;
	        transform-origin: right top;
}

.get_in_touch_inner b span::before {
	left: 0;
	width: 100%;
	background: url(/img/bg_body.png);
	-webkit-transform-origin: right top;
	        transform-origin: right top;
}

.get_in_touch_inner p {
	margin-bottom: 0;
}

.get_in_touch_inner p .button {
	width: auto;
	margin: 26px 40px 0;
	font-size: 1.125rem; /* 18px */
}

.get_in_touch_inner p .button::after {
	content: '\f1d8';
	top: 2px;
	left: 24px;
	font-size: 1.25rem; /* 20px */
	line-height: 56px;
	text-align: left;
	-webkit-transform: none;
	        transform: none;
	transition: top 200ms, left 200ms, color 400ms;
}

.get_in_touch_inner p .button:hover::after {
	top: 0;
	left: 28px;
}

.get_in_touch_inner address {
	margin-right: 32px;
	font-style: normal;
}

.get_in_touch_inner address a {
	display: inline-block;
	position: relative;
	margin-top: 24px;
	font-family: 'Asap', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.5rem; /* 24px */
	line-height: 56px;
	letter-spacing: .0625rem;
}

.get_in_touch_inner address a::before {
	content: '\f003';
	padding-right: .62em;
	font-family: 'icomoon';
	font-weight: normal;
}

.get_in_touch > p {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	padding: 16px 0;
	background: 
		linear-gradient(
			-45deg,
			rgba(240, 216, 130, 0) 25%,
			rgba(240, 216, 130, .6) 25%,
			rgba(240, 216, 130, .6) 50%,
			rgba(240, 216, 130, 0) 50%,
			rgba(240, 216, 130, 0) 75%,
			rgba(240, 216, 130, .6) 75%
		),
		#f0edde;
	background-size: 3px 3px, 100%;
	color: rgba(68, 66, 65, .6);
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 1rem; /* 16px */
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
}

/* -------------------------------------------------------------------------- */
/*  .single_page < body
 * -------------------------------------------------------------------------- */

.single_page .inner_wrap {
	width: 780px;
	padding: 0;
}

/* -------------------------------------------------------------------------- */
/*  #service 
 * -------------------------------------------------------------------------- */

#service .inner_wrap > p {
	margin-bottom: 56px;
}

#service .ttl_para em {
	margin-right: -.8em;
	float: right;
	color: rgba(68, 66, 65, .4);
	font-weight: 700;
	font-size: 1.0625rem; /* 17px */
}

.service_lineup {
	overflow: hidden;
	margin-bottom: 72px;
	border: 4px solid transparent;
	border-image: url(/img/bg_border.png) 4 repeat;
	background: rgba(247, 246, 238, .6);
	color: #3a3938;
}

.service_lineup .service_icon {
	position: relative;
	float: left;
	width: 308px;
	height: 308px;
	padding-top: 161px;
	padding-left: .1em;
	border: 41px solid rgba(68, 66, 65, .02);
	background: rgba(68, 66, 65, .02) url(/svg/service_icon.svg) no-repeat;
	background-clip: padding-box;
	color: rgba(68, 66, 65, .4);
	font-family: 'Asap', Arial, sans-serif;
	font-weight: 600;
	font-size: 1.25rem; /* 20px */
	line-height: 1;
	letter-spacing: .055555555em;
	text-align: center;
	text-transform: uppercase;
}

.service_lineup .service_icon:after {
	content: '';
	position: absolute;
	top: -41px;
	left: -41px;
	width: calc(100% + 82px);
	height: calc(100% + 82px);
	border: 2px solid #f7f6ee;
}

.service_lineup .service_webdesign {
	background-position: center -8px;
}

.service_lineup .service_coding {
	background-position: center -227px;
}

.service_lineup .service_graphic {
	background-position: center -460px;
}

.service_lineup .service_dtp {
	background-position: center -686px;
}

.service_lineup .service_desc {
	display: table-cell;
	height: 308px;
	padding: 2px 40px 0 48px;
	border-left: 2px solid transparent;
	border-image: url(/img/bg_border.png) 2 / 0 0 0 1 repeat;
	vertical-align: middle;
}

.service_lineup .service_desc .ttl_para {
	margin-top: -112px;
	padding-top: 112px;
	margin-bottom: 24px;
}

.service_lineup p {
	margin-bottom: 16px;
}

.service_lineup ul {
	list-style: none;
}

.service_lineup li {
	margin-left: 2px;
	color: rgba(68, 66, 65, .8);
	font-size: .875rem; /* 14px */
	line-height: 2.2;
}

.service_lineup li:before {
	content: '\eca0';
	padding-right: .3em;
	color: #eb7993;
	font-family: 'icomoon';
	font-size: 1.125rem; /* 18px */
	line-height: 1.711;
	vertical-align: bottom;
}

/* -------------------------------------------------------------------------- */
/*  #works 
 * -------------------------------------------------------------------------- */

.works_showcase li {
	overflow: hidden;
	margin-bottom: 72px;
	background: url(/img/bg_works_eyecatch.png) left top;
	transition: 400ms;
}

.works_showcase li:hover {
	background: url(/img/bg_border.png) left top;
}

.works_showcase a {
	display: block;
	overflow: hidden;
	position: relative;
	margin: 4px;
	border: 2px solid #f7f6ee;
}

.works_showcase a:hover {
	margin: 1px;
}

.works_showcase figure {
	overflow: hidden;
	position: relative;
	margin: -6px;
	isolation: isolate;
	transition: 400ms;
}

.works_showcase a:hover figure {
	margin: -3px;
}

.works_showcase figure::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #e96f8d;
	mix-blend-mode: screen;
	transition: 400ms;
}

.works_showcase a:hover figure::after {
	background: transparent;
}

.works_showcase img {
	-webkit-filter: brightness(0.9) saturate(0) sepia(.4);
	        filter: brightness(0.9) saturate(0) sepia(.4);
	transition: 400ms;
}

.works_showcase a:hover img {
	-webkit-filter: brightness(1) saturate(1) sepia(0);
	        filter: brightness(1) saturate(1) sepia(0);
}

.works_showcase figcaption {
	display: inline-block;
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 8px 16px;
	border-radius: 2px;
	background: #eb7993;
	color: #f7f6ee;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 700;
	font-size: 1rem; /* 16px */
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
	transition: 400ms;
}

.works_showcase a:hover figcaption {
	background: rgba(68, 66, 65, .8);
}

.works_showcase .rippler-effect {
	opacity: .3;
}

/* -------------------------------------------------------------------------- */
/*  #works_item 
 * -------------------------------------------------------------------------- */

#works_item .main article {
	margin-bottom: 0;
}

#works_item .ttl_chapter em:before {
	content: '/';
	padding-right: .6em;
	padding-left: .5em;
	font-weight: normal;
}

#works_item .inner_col_main p:last-of-type {
	margin-bottom: 24px;
}

/*  -- .works_data  
 ---------------------------------------------------------------------------- */

.works_data {
	padding-top: 6px;
	font-family: 'Open Sans', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: .8125rem; /* 13px */
}

.works_data .ttl_sub {
	margin-bottom: 24px;
}

.works_data dl {
	margin-bottom: 18px;
	line-height: 1.8;
	text-align: justify;
}

.works_data dt {
	position: relative;
	color: rgba(68, 66, 65, .6);
	font-family: 'Asap', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.works_data dt:before {
	content: '\ee11';
	display: inline-block;
	position: relative;
	top: 0;
	left: 0;
	width: 16px;
	font-family: 'icomoon';
	font-size: .6875rem; /* 11px */
}

.works_data dd {
	margin-bottom: 12px;
	padding-left: 16px;
}

.works_data dd li {
	display: inline;
}

.works_data dd li::after {
	content: '/';
	padding-right: .2em;
	padding-left: .2em;
	color: rgba(68, 66, 65, .6);
	font-size: 1rem; /* 16px */
	line-height: 1.4625;
	vertical-align: bottom;
}

.works_data dd li:last-child::after {
	content: none;
}

.works_data p:last-of-type {
	margin-bottom: 24px;
}

/*  -- .works_tag  
 ---------------------------------------------------------------------------- */

#works_item .works_tag {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0 -4px 48px;
}

#works_item .works_tag li {
	position: relative;
	margin: 0 4px;
	padding: .5em 1em;
	border-radius: 2px;
	background: rgba(68, 66, 65, .6);
	color: #f7f6ee;
	font-family: 'Asap', 'Open Sans', sans-serif;
	font-size: .8125rem; /* 13px */
	line-height: 1;
	letter-spacing: 2px;
	text-indent: 2px;
	text-align: center;
	white-space:  nowrap;
}

/*  -- .works_fig  
 ---------------------------------------------------------------------------- */

#works_item .works_fig {
	width: 1000px;
	margin: 0 auto 72px;
}

#works_item .works_fig figure {
	margin-bottom: 120px;
}

#works_item .works_fig figcaption {
	position: relative;
	margin-bottom: 32px;
	font-family: 'Open Sans', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 700;
	font-size: 1rem; /* 16px */
	line-height: 1;
	letter-spacing: .2em;
	text-align: right;
}

#works_item .works_fig figcaption span {
	position: relative;
	padding-right: 3px;
	padding-left: 20px;
}

#works_item .works_fig figcaption:before,
#works_item .works_fig figcaption span:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 6px;
	-webkit-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	     -o-transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	        transform: matrix(1, 0, -0.57735026918963, 1, 0, 0);
	-webkit-transform-origin: left bottom;
	        transform-origin: left bottom;
}

#works_item .works_fig figcaption:before {
	background: 
		linear-gradient(
			-90deg,
			rgba(68, 66, 65, .16) 25%,
			transparent 25%,
			transparent 50%,
			rgba(68, 66, 65, .16) 50%,
			rgba(68, 66, 65, .16) 75%,
			transparent 75%
		);
	background-size: 8px 8px;
}

#works_item .works_fig figcaption span:after {
	background: url(/img/bg_body.png);
}

#works_item .works_fig img {
	margin: 0 auto;
	-webkit-filter: drop-shadow(1px 1px 4px rgba(68, 66, 65, .24));
	        filter: drop-shadow(1px 1px 4px rgba(68, 66, 65, .24));
}

#works_item .works_fig img.sp {
	padding-top: 8px;
}

#works_item .works_fig img + img {
	margin-top: 32px;
}

/*  -- .works_pager  
 ---------------------------------------------------------------------------- */

.works_pager {
	position: relative;
	margin-top: 144px;
	margin-bottom: 1px;
	border-bottom: 1px dotted rgba(68, 66, 65, .2);
	background: 
		linear-gradient(
			45deg,
			transparent 25%,
			rgba(68, 66, 65, .1) 25%,
			rgba(68, 66, 65, .1) 50%,
			transparent 50%,
			transparent 75%,
			rgba(68, 66, 65, .1) 75%
		);
	background-size: 2px 2px;
	background-clip: padding-box;
	font-family: 'Asap', 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: .875rem; /* 14px */
	line-height: 6rem; /* 96px */
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}

.works_pager li {
	display: inline-block;
}

.works_pager a {
	display: block;
	transition: all 400ms, padding 300ms;
}

.works_pager li.pager_next,
.works_pager li.pager_prev {
	position: fixed;
	top: 450px;	/* header + ttl_page + ((eyecatch / 2) - (works_pager / 2)) */
	z-index: 1;
	background: rgba(240, 237, 222, .8);
	transition: background 800ms;
}

.works_pager li.pager_next.is_transparent,
.works_pager li.pager_prev.is_transparent {
	background: transparent;
}

.works_pager li.pager_next.is_listed,
.works_pager li.pager_prev.is_listed {
	position: absolute;
	top: 0;
	background: transparent;
}

.works_pager li.pager_next {
	left: 0;
	border-radius: 0 8px 8px 0;
}

.works_pager li.pager_prev {
	right: 0;
	border-radius: 8px 0 0 8px;
}

.works_pager li.pager_next a {
	padding-right: 24px;
	padding-left: 36px;
}

.works_pager li.pager_prev a {
	padding-right: 34px;
	padding-left: 26px;
}

.works_pager li.pager_next a::after,
.works_pager li.pager_prev a::after {
	position:absolute;
	top: 0;
	display: inline-block;
	font-family: 'icomoon';
	font-weight: normal;
	font-size: 1.0625rem; /* 17px */
}

.works_pager li.pager_next a::after {
	content: '\f0d9';
	left: 16px;
}

.works_pager li.pager_prev a::after {
	content: '\f0da';
	right: 16px;
}

.works_pager li.pager_next a:hover {
	padding-left: 56px;
}

.works_pager li.pager_prev a:hover {
	padding-right: 56px;
}

.works_pager li.pager_back {
	position: relative;
}

.works_pager li.pager_back a {
	padding: 0 40px;
	transition: 600ms, padding 300ms;
}

.works_pager li.pager_back a::before,
.works_pager li.pager_back a::after {
	position: absolute;
	top: 0;
	font-family: 'icomoon';
	font-size: 1.125rem; /* 18px */
	font-weight: normal;
}

.works_pager li.pager_back a::before {
	content: '\ec56';
	left: -3px;
}

.works_pager li.pager_back a::after {
	content: '\ec57';
	right: 0;
}

.works_pager li.pager_back a:hover {
	padding: 0 56px;
}

.works_pager .last {
	visibility: hidden;
}

/* -------------------------------------------------------------------------- */
/*  #about
 * -------------------------------------------------------------------------- */

#about .inner_col_main table {
	margin-bottom: 0;
}

#about .inner_col_main th {
	width: 20%;
	letter-spacing: .5em;
	text-align: center;
}

#about .inner_col_main td {
	width: 80%;
}

#about .about_skills .ttl_subsub {
	position: relative;
	color: rgba(68, 66, 65, .75);
	line-height: 2.15;
	text-align: left;
	text-transform: none;
}

#about .about_skills dl {
	width: 100%;
	margin-bottom: 48px;
	font-family: 'Asap', 'Open Sans', sans-serif;
	font-size: .8125rem; /* 13px */
	line-height: 1;
	letter-spacing: 1px;
}

#about .about_skills dt {
	margin-bottom: 4px;
}

#about .about_skills dd {
	position: relative;
	margin-bottom: 16px;
}

#about .about_skills progress[value] {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: 
		linear-gradient(
			-45deg,
			rgba(68, 66, 65, .2) 25%,
			rgba(68, 66, 65, 0) 25%,
			rgba(68, 66, 65, 0) 50%,
			rgba(68, 66, 65, .2) 50%,
			rgba(68, 66, 65, .2) 75%,
			rgba(68, 66, 65, 0) 75%
		);
	background-size: 2px 2px;
	color: #f398a9;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

#about .about_skills progress[value]::-moz-progress-bar {
	background: 
		linear-gradient(
			90deg,
			#f3a2b6 3px,
			#f0edde 3px
		) left top;
	background-size: 4px 4px;
}

#about .about_skills progress[value]::-webkit-progress-bar {
	background: 
		linear-gradient(
			-45deg,
			rgba(68, 66, 65, .1) 25%,
			rgba(68, 66, 65, 0) 25%,
			rgba(68, 66, 65, 0) 50%,
			rgba(68, 66, 65, .1) 50%,
			rgba(68, 66, 65, .1) 75%,
			rgba(68, 66, 65, 0) 75%
		);
	background-size: 2px 2px;
}

#about .about_skills progress[value]::-webkit-progress-value {
	background: 
		linear-gradient(
			90deg,
			#f3a2b6 50%,
			#f0edde 50%
		) left top;
	background-size: 4px 4px;
}

/* -------------------------------------------------------------------------- */
/*  #contact
 * -------------------------------------------------------------------------- */

#contact .main {
	min-height: calc(100vh - 178px);	/* .footerHeight == 178px */
}

#contact .breadcrumb {
	position: relative;
	margin-bottom: 128px;
}

#contact .breadcrumb::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 128px;
	background: 
		linear-gradient(
			240deg,
			transparent 80%,
			rgba(235, 121, 147, .12) 80%
		) 100% 100%,
		linear-gradient(
			120deg,
			transparent 80%,
			rgba(235, 121, 147, .12) 80%
		) 100% 100%,
		linear-gradient(
			240deg,
			transparent 80%,
			rgba(235, 121, 147, .12) 80%
		) calc(100% - 18px) calc(100% - 32px),
		linear-gradient(
			120deg,
			transparent 80%,
			rgba(235, 121, 147, .12) 80%
		) calc(100% - 18px) calc(100% - 32px);
	background-size: 36px 64px;
	background-clip: padding-box;
}

#contact p + .caution {
	margin-top: -40px;
}

/*  -- .contact_flow  
 ---------------------------------------------------------------------------- */

.contact_flow {
	display: flex;
	counter-reset: li;
	justify-content: space-between;
	list-style: none;
	width: 1000px;
	margin: 0 auto 72px;
}

.contact_flow li {
	flex: 1;
	position: relative;
	margin-right: 48px;
	background: rgba(68, 66, 65, .3);
	color: #f0edde;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 500;
	font-size: 1.0625rem; /* 17px */
	line-height: 64px;
	letter-spacing: .2em;
	text-align: center;
}

.contact_flow li:first-child {
	padding-left: 16px;
	border-radius: 2px 0 0 2px;
}

.contact_flow li:last-child {
	margin-right: 0;
	border-radius: 0 2px 2px 0;
	text-indent: -16px;
}

.contact_flow li::before {
	content: '';
	position: absolute;
	left: -32px;
	top: 0;	
	width: 0;
	height: 0;
	border-top: 32px solid rgba(68, 66, 65, .3);
	border-right: 16px solid rgba(68, 66, 65, .3);
	border-bottom: 32px solid rgba(68, 66, 65, .3);
	border-left: 16px solid transparent;
}

.contact_flow li:first-child::before {
	content: none;
}

.contact_flow li::after {
	content: '';
	position: absolute;
	right: -32px;
	top: 0;	
	width: 0;
	height: 0;
	border-top: 32px solid transparent;
	border-right: 16px solid transparent;
	border-bottom: 32px solid transparent;
	border-left: 16px solid rgba(68, 66, 65, .3);
}

.contact_flow li:last-child::after {
	content: none;
}

.contact_flow .active {
	background: #eb7993;
}

.contact_flow .active::before {
	border-top-color: #eb7993;
	border-right-color: #eb7993;
	border-bottom-color: #eb7993;
}

.contact_flow .active::after {
	border-left-color: #eb7993;
}

.contact_flow li span::before {
	content: counter(li) '.';
	counter-increment: li;
	position: relative;
	padding-right: .5em;
	letter-spacing: .2em;
	text-indent: 0;
}

/*  -- .contact_button  
 ---------------------------------------------------------------------------- */

.contact_button {
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.contact_button button {
	position: relative;
	flex: 1;
	max-width: 464px;
	height: 64px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	background: rgba(68, 66, 65, .6);
	color: #f7f6ee;
	font-family: 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 500;
	font-size: 1.0625rem; /* 17px */
	letter-spacing: .4em;
	text-indent: 1.5em;
	transition: opacity 300ms, background 600ms ease, color 300ms ease;
}

.contact_button button:hover,
.contact_button button:focus {
	border-color: rgba(68, 66, 65, .8);
	background: transparent;
	color: rgba(68, 66, 65, .8);
	cursor: pointer;
	font-weight: 700;
}

.contact_button button:focus {
	outline: none;
}

.contact_button button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.contact_button button::before {
	content: '\f0da';
	position: absolute;
	top: 50%;
	left: 0;
	font-family: 'icomoon';
	font-weight: normal;
	font-size: 1.1875rem; /* 19px */
	line-height: 1;
	transition: all 300ms ease;
	-webkit-transform: translate(0, -50%);
	        transform: translate(0, -50%);
}

.contact_button button:hover::before {
	left: 8px;
}

.contact_button button[type='submit'] {
	background: #eb7993;
	margin-left: 72px;
}

.contact_button button[type='submit']:hover,
.contact_button button[type='submit']:focus {
	border-color: #e96f8d;
	background: transparent;
	color: #e96f8d;
}

.contact_button button[type='submit']:disabled {
	opacity: .4;
	background: #f3a2b6;
	pointer-events: none;
}

/*  -- .contact_form  
 ---------------------------------------------------------------------------- */

.contact_form p.caution {
	margin-bottom: 40px;
}

.contact_form div.caution {
	margin-bottom: 72px;
	color: rgba(68, 66, 65, .8);
	font-size: .9375rem; /* 15px */
}

.contact_form table {
	position: relative;
	width: 900px;
	margin-bottom: 40px;
	margin: 0 auto 40px;
}

.contact_form th {
	position: relative;
	width: 320px;
	padding: 26px 0 26px 36px;
	text-align: left;
	line-height: 1.6;
}

.contact_form th::before {
	content: '\ee11';
	position: absolute;
	top: 26px;
	left: 16px;
	color: rgba(68, 66, 65, .4);
	font-family: 'icomoon';
	font-size: .8125rem; /* 13px */
	line-height: 24px;
}

.contact_form td {
	position: relative;
	width: 580px;
	padding: 12px 12px 12px 0;
	color: #000;
}

.contact_form small.required,
.contact_form small.optional {
	display: inline-block;
	position: absolute;
	top: 24px;
	right: 16px;
	padding: 8px 4px 8px 8px;
	border-radius: 2px;
	color: #f7f6ee;
	font-size: .75rem; /* 12px */
	font-family: 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 100;
	line-height: 1;
	letter-spacing: 4px;
}

.contact_form small.required {
	background: #eb7993;
}

.contact_form small.optional {
	background: rgba(68, 66, 65, .4);
}

.contact_form small.multiple {
	margin-left: -.4em;
}

.contact_form td small {
	display: block;
	margin-top: 1em;
	margin-left: 12px;
	line-height: 1;
}

/*      form widgets     
 ------------------------- */

.contact_form ::-webkit-input-placeholder {
	color: #444241;
	opacity: .6;
}

.contact_form :-moz-placeholder {
	color: #444241;
	opacity: .6;
}

.contact_form ::-moz-placeholder {
	color: #444241;
	opacity: .6;
}

.contact_form :-ms-input-placeholder {
	color: #444241;
	opacity: .6;
}

.contact_form :placeholder {
	color: #444241;
	opacity: .6;
}

.contact_form .msg_error,
.contact_form .msg_valid {
	position: absolute;
	line-height: 1;
	pointer-events: none;
}

.contact_form .msg_error {
	top: 30px;
	right: 26px;	/* 12px + 2px + 12px */
	color: #e55373;
	font-size: 1rem; /* 16px */
}

.contact_form .msg_valid {
	top: 28px;
	right: -20px;
	color: #12a08e;
	font-family: 'icomoon';
	font-size: 1.25rem; /* 20px */
}

.contact_form .msg_error::before {
	content: '\ee43';
	position: absolute;
	top: -2px;
	right: -46px;
	font-family: 'icomoon';
	font-size: 1.25rem; /* 20px */
	vertical-align: middle;
}

.contact_form .form_select .msg_valid,
.contact_form .form_select .msg_error {
	top: 18px;
	left: 0;
	width: 554px;		/* 580px - 26px */
	text-align: right;
}

.contact_form .form_select .msg_valid {
	width: 600px;		/* 580px + 20px */
}

.contact_form .form_checkable .msg_valid,
.contact_form .form_checkable .msg_error {
	top: calc(50% - .5em);
	right: 14px;
}

.contact_form .form_checkable .msg_valid {
	right: -32px;
}

/*      input forms     
 ------------------------ */

.contact_form input[type='email'],
.contact_form input[type='text'],
.contact_form select,
.contact_form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border: 2px solid rgba(68, 66, 65, .12);
	background: rgba(68, 66, 65, .02);
	color: #000;
	font-family: 'YuGothic R', 'Yu Gothic', YuGothic, 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-size: 1rem; /* 16px */
	line-height: 1.5;
	outline: 1px solid transparent;
	resize: none;
	transition: 300ms;
}

.contact_form textarea {
	min-height: calc(12em + 16px);
	word-break: break-all;
	resize: vertical;
}

.contact_form input[type='email'].is_error,
.contact_form input[type='text'].is_error,
.contact_form select.is_error,
.contact_form textarea.is_error {
	border-color: rgba(233, 111, 141, .4);
	background: rgba(247, 246, 238, .4);
	outline-color: rgba(233, 111, 141, .4);
}

.contact_form input[type='email'].is_valid,
.contact_form input[type='text'].is_valid,
.contact_form select.is_valid,
.contact_form textarea.is_valid {
	border-color: rgba(18, 160, 142, .24);
	background: rgba(247, 246, 238, .4);
	outline-color: rgba(18, 160, 142, .24);
}

.contact_form input[type='email']:hover,
.contact_form input[type='text']:hover,
.contact_form select:hover,
.contact_form textarea:hover {
	border-color: rgba(68, 66, 65, .16);
	background: rgba(247, 246, 238, .4);
	outline-color: transparent;
}

.contact_form input[type='email']:focus,
.contact_form input[type='text']:focus,
.contact_form select:focus,
.contact_form textarea:focus {
	border-color: #7ed4d3;
	background: rgba(247, 246, 238, .6);
	outline-color: #7ed4d3;
}

/*     .form_select     
 ------------------------ */

.contact_form .form_select {
	display: inline-block;
	position: relative;
}

.contact_form .form_select::after {
	content: '\ec73';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 54px;
	border-left: 2px solid transparent;
	color: rgba(68, 66, 65, .8);
	font-family: 'icomoon';
	font-size: 1.125rem; /* 18px */
	line-height: 52px;
	text-align: center;
	pointer-events: none;
	transition: 300ms;
}

.contact_form .form_select:hover::after {
	border-left-color: rgba(68, 66, 65, .08);
	background: rgba(68, 66, 65, .04);
}

.contact_form .form_select select {
	counter-reset: select;
	min-width: 20em;
	padding-right: 70px;
	cursor: pointer;
}

.contact_form .form_select select option {
	counter-increment: select;
	padding-left: 8px;
	background: #f7f6ee;
}

.contact_form .form_select select option::before {
	content: counter(select) '.';
	padding: 0 .5em 0 6px;
	color: rgba(68, 66, 65, .6);
	font-family: 'Scope One', sans-serif;
	font-size: .9375rem!important; /* 15px */
}

.contact_form .form_select select option:first-of-type {
	counter-increment: none;
}

.contact_form .form_select select option:first-of-type::before {
	content: none;
}

.contact_form .form_select select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
	transition: none;
}

.contact_form .form_select select:-moz-focusring option::before {
	text-shadow: 0 0 0 rgba(68, 66, 65, .6);
}

/*     .form_checkable     
 --------------------------- */

.contact_form .form_checkable {
	position: relative;
}

.contact_form .form_checkable ol,
.contact_form .form_checkable ul {
	list-style: none;
	border: 2px solid transparent;
	outline: 1px solid transparent;
}

.contact_form .form_checkable ol.is_error,
.contact_form .form_checkable ul.is_error {
	border-color: rgba(233, 111, 141, .4);
	outline-color: rgba(233, 111, 141, .4);
}

.contact_form .form_checkable ol.is_error:hover,
.contact_form .form_checkable ul.is_error:hover {
	border-color: transparent;
	outline-color: transparent;
}

.contact_form .form_checkable li {
	position: relative;
}

.contact_form .form_checkable li:first-child {
	margin-top: -2px;
}

.contact_form .form_checkable li:last-child {
	margin-bottom: -2px;
}

.contact_form .form_checkable ol {
	counter-reset: checkable;
}

.contact_form .form_checkable ol li {
	counter-increment: checkable;
}

.contact_form .form_checkable ol li::before {
	content: counter(checkable) '.';
	position: absolute;
	top: 14px;
	left: 52px;
	color: rgba(68, 66, 65, .6);
	line-height: 1.6;
}

.contact_form .form_checkable input {
	display: block;
	position: absolute;
	opacity: 0;
	top: 16px;
	left: 16px;
	height: 20px;
	width: 20px;
	margin: 0;
	padding: 0;
}

.contact_form .form_checkable input + label {
	display: block;
	padding: 14px 0 14px 52px;
	font-size: 1.0625rem; /* 17px */
	line-height: 1.5rem;
	cursor: pointer;
	transition: 400ms;
}

.contact_form .form_checkable ol input + label {
	padding-left: 72px;
}

.contact_form .form_checkable input:hover + label,
.contact_form .form_checkable input:focus + label {
	background: rgba(68, 66, 65, .04);
}

.contact_form .form_checkable input + label::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 16px;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(68, 66, 65, .16);
	background: rgba(68, 66, 65, .02);
	transition: 400ms;
}

.contact_form .form_checkable input[type='radio'] + label::before,
.contact_form .form_checkable.radio input[type='checkbox'] + label::before {
	border-radius: 50%;
}

.contact_form .form_checkable input[type='checkbox'] + label::before {
	border-radius: 2px;
}

.contact_form .form_checkable input:hover + label::before {
	border-color: rgba(68, 66, 65, .24);
	background: rgba(247, 246, 238, .6);
}

.contact_form .form_checkable input:focus + label::before {
	border-color: rgba(69, 193, 191, .8);
}

.contact_form .form_checkable input:checked + label::before {
	border-color: #eb7993;
	background: #eb7993;
}

.contact_form .form_checkable input[type='radio']:checked + label::after,
.contact_form .form_checkable.radio input[type='checkbox']:checked + label::after {
	content: '';
	position: absolute;
	top: 23px;
	left: 23px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f0edde;
	transition: 400ms;
}

.contact_form .form_checkable input[type='checkbox']:checked + label::after {
	content: '';
	position: absolute;
	top: 18.22222px;
	left: 22.66667px;
	width: 6.66667px;
	height: 13.33333px;
	border-right: 2px solid #f0edde;
	border-bottom: 2px solid #f0edde;
	transform: rotate(45deg);
	transition: 400ms;
}

/*  -- .contact_form_error  
 ---------------------------------------------------------------------------- */

.contact_form_error .caution {
	margin-bottom: 72px;
	padding: 32px 40px;
}

.contact_form_error .caution > p {
	margin-bottom: 16px;
}

.contact_form_error .caution ul {
	margin-top: 0;
	margin-left: 16px;
}

.contact_form_error .caution li {
	color: #e55373;
	margin-bottom: 0;
}

.contact_form_error .caution li:before {
	content: '\f071';
	font-family: 'icomoon';
	font-size: 1.125rem; /* 18px */
	vertical-align: middle;
}

/*  -- .contact_form_confirm  
 ---------------------------------------------------------------------------- */

.contact_form_confirm .caution {
	margin-bottom: 40px;
}

.contact_form_confirm table {
	position: relative;
	width: 900px;
	margin: 0 auto 72px;
	border-top: 1px solid transparent;
	border-image: url(/img/bg_border_img.png) 1 / 1 0 0 repeat;
}

.contact_form_confirm th {
	position: relative;
	width: 320px;
	padding: 16px 32px 16px 36px;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-image: url(/img/bg_border_img.png) 1 / 0 1 1 0 repeat;
	background: rgba(68, 66, 65, .02);
	line-height: 2.2666;
	text-align: left;
	white-space: nowrap;
}

.contact_form_confirm th::before {
	content: '\eb18';
	position: absolute;
	top: 15px;
	left: 16px;
	color: rgba(68, 66, 65, .4);
	font-family: 'icomoon';
	font-size: .8125rem; /* 13px */
	line-height: 2.615384615;
}

.contact_form_confirm td {
	width: 580px;
	padding: 16px 30px 16px 18px;
	border-bottom: 1px solid transparent;
	border-image: url(/img/bg_border_img.png) 1 / 0 0 1 repeat;
	background: rgba(247, 246, 238, .5);
	color: #000;
	font-family: 'YuGothic R', 'Yu Gothic', YuGothic, 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 1rem; /* 16px */
	word-break: break-all;
}

/*  -- .contact_form_complete  
 ---------------------------------------------------------------------------- */

.contact_form_complete .caution {
	position: relative;
	padding: 68px 320px 64px 72px;
	margin-bottom: 72px;
}

.contact_form_complete .caution::before {
	background: #f3f1e5 url(/svg/contact_flamingo.svg) no-repeat calc(100% - 40px) calc(100% - 32px);
	background-size: 224px auto;
}

.contact_form_complete .caution p {
	margin-top: 0;
}

.contact_form_complete .caution .ttl_thanks {
	margin-bottom: 56px;
	margin-left: .2em;
	color: rgba(68, 66, 65, .9);
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 700;
	font-size: 1.25rem; /* 20px */
	line-height: 1;
	letter-spacing: 2px;
	text-shadow: 0 1px 0 rgba(247, 246, 238, .8);
}

.contact_form_complete .caution .ttl_thanks span {
	position: relative;
}

.contact_form_complete .caution .ttl_thanks span::after {
	content: '';
	position: absolute;
	top: 70%;
	left: -.2em;
	z-index: -1;
	width: calc(100% + .4em);
	height: 12px;
	background: 
		linear-gradient(
			-45deg,
			rgba(235, 121, 147, .0) 25%,
			rgba(235, 121, 147, .32) 25%,
			rgba(235, 121, 147, .32) 50%,
			rgba(235, 121, 147, .0) 50%,
			rgba(235, 121, 147, .0) 75%,
			rgba(235, 121, 147, .32) 75%
		);
	background-size: 12px 12px;
}

.contact_form_complete .caution ul {
	margin-top: -32px;
	color: rgba(68, 66, 65, .8);
	font-size: .8125rem; /* 13px */
}

.contact_form_complete .caution ul + p {
	margin: 48px 0 0;
}

.contact_form_complete .button {
	width: 464px;
}

/* -------------------------------------------------------------------------- */
/*  #privacy 
 * -------------------------------------------------------------------------- */

#privacy article ul {
	margin-top: -48px;
	margin-bottom: 72px;
	margin-left: 2.4em;
}

#privacy article li {
	margin-bottom: .5em;
	margin-left: 1.1em;
	text-indent: -1.1em;
	text-align: justify;
	line-height: 1.7;
}

#privacy article li::before {
	content: '\ee11';
	display: inline-block;
	width: 1.5em;
	color: rgba(68, 66, 65, .6);
	font-family: 'icomoon';
	font-size: .6875rem; /* 11px */
	text-indent: 0;
}

#privacy address.caution {
	margin-top: -48px;
	margin-bottom: 72px;
	font-style: normal;
}

#privacy address.caution span::before {
	content: '\f003';
	padding-right: .62em;
	color: rgba(68, 66, 65, .75);
	font-family: 'icomoon';
}

/* -------------------------------------------------------------------------- */
/*  #error 
 * -------------------------------------------------------------------------- */

.ttl_error {
	width: 1000px;
	margin: 0 auto 48px;
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 700;
	font-size: 1.25rem; /* 20px */
	letter-spacing: 2px;
}

#error .inner_col_wrap {
	display: flex;
	width: auto;
	min-width: 1000px;
	margin-right: 0;
	margin-left: calc(50% - 500px);
	margin-bottom: 144px;
}

#error .inner_col_main {
	float: none;
	width: 560px;
	margin-bottom: auto;
	font-size: 1.0625rem; /* 17px */
}

#error .inner_col_main p:last-of-type {
	margin-top: -16px;
	margin-bottom: 0;
}

#error .inner_col_main .button {
	margin-left: 0;
}

#error .inner_col_sub {
	float: none;
	width: calc(100% - 600px);
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-right: 0;
}

.error_camel svg {
	width: calc(100% - 72px);
	min-width: 600px;
	height: auto;
	vertical-align: bottom;
}

.error_camel path {
	fill: rgba(68, 66, 65, .6);
}

/* -------------------------------------------------------------------------- */
/*  #home 
 * -------------------------------------------------------------------------- */

#home .main {
	padding-top: 100vh;
	margin-bottom: 0;
}

#home .ttl_page {
	padding-top: 8px;
}

#home .ttl_page::after {
	content: '';
	position: absolute;
	top: 48px;
	left: 50%;
	width: 240px;
	height: 20px;
	background: 
		linear-gradient(
			-45deg,
			rgba(235, 121, 147, 0) 25%,
			rgba(235, 121, 147, .4) 25%,
			rgba(235, 121, 147, .4) 50%,
			rgba(235, 121, 147, 0) 50%,
			rgba(235, 121, 147, 0) 75%,
			rgba(235, 121, 147, .4) 75%
		);
	background-size: 8px 8px;
	-webkit-transform: translate(-50%) rotate(-3deg);
	        transform: translate(-50%) rotate(-3deg);
}

#home .button {
	margin-top: 56px;
}

.home_wrap {
	position: relative;
	z-index: 1;
	margin-top: -70px;
	padding-top: 70px;
	pointer-events: none;
}

.home_inner {
	margin-top: 32px;
	background: #f0edde url(/img/bg_body.png);
	pointer-events: auto;
}

.home_item {
	position: relative;
	margin: 0 auto 40px;
	padding-bottom: 160px;
}

.home_item:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 80px;
	height: 2px;
	background: url(/img/bg_eyecatch.png) bottom center;
	-webkit-transform: translate(-50%);
	        transform: translate(-50%);
}

/*  -- .home_header  
 ---------------------------------------------------------------------------- */

#home .header {
	top: calc(100vh - 68px);
	transition: 800ms;
}

#home .header .header_inner {
	padding-right: 24px;
	padding-left: 16px;
	transition: 400ms;
}

#home .header.is_fixed {
	top: 0;
}

#home .header.is_fixed .header_inner {
	padding: 0 calc(50% - 500px);
}

/*  -- .home_cover  
 ---------------------------------------------------------------------------- */

.home_cover {
	position: absolute;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	border-top: 2px solid #f0edde;
	background: url(/img/bg_header.png) repeat-x left -80px;	/* 40px */
}

.home_cover img {
	display: inline-block;
	margin: calc(50vh - 119px) calc(50% - 383px) calc(50vh - 59px);
	margin: calc(50vh - 102px) calc(50% - 383px) calc(50vh - 72px);
	vertical-align: bottom;
	transition: all 400ms ease;
}

.home_cover a:hover img {
	-webkit-filter: saturate(0) sepia(.2) brightness(.9);
	        filter: saturate(0) sepia(.2) brightness(.9);
}

.home_cover a::after {
	content: '\ec4b';
	position: absolute;
	top: calc(100vh - 134px);
	left: 50%;
	color: #eb7993;
	font-family: 'icomoon';
	font-size: 2rem; /* 32px */
	-webkit-transform: translate(-50%);
	        transform: translate(-50%);
}

.home_cover a:hover:after {
	color: rgba(68, 66, 65, .8);
	animation: Alice 1600ms ease 600ms infinite;
}
@keyframes Alice {
		  0% {transform: translate(-50%)}
		 50% {transform: translate(-50%, 12px)}
		 53% {transform: translate(-50%, 6px)}
		 80% {transform: translate(-50%)}
		100% {transform: translate(-50%)}
}

/*  -- .home_intro  
 ---------------------------------------------------------------------------- */

.home_intro {
	position: relative;
}

.home_intro h2 {
	position: absolute;
	top: 50px;
	left: 50%;
	z-index: -1;
}

.home_intro .lSSlideOuter {
	position: relative;
}

.home_intro ul.lightSlider {
	height: 288px;
}

.home_intro .lede {
	width: 620px;
	margin-bottom: 0;
	font-family: 'Asap', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/*  -- .home_service  
 ---------------------------------------------------------------------------- */

.home_service {
	width: 1000px;
}

.home_service ul {
	overflow: hidden;
	display: flex;
	margin: 0 -16px;
}

.home_service li {
	width: 226px;
	margin: 0 16px;
	background: rgba(247, 246, 238, .4);
}

.home_service li a {
	display: block;
	position: relative;
	border: 4px solid transparent;
	border-image: url(/img/bg_works_eyecatch.png) 4 repeat;
}

.home_service li a:hover {
	background: #f7f6ee;
}

.home_service li a:before {
	content: '';
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	width: 218px;
	height: 176px;
	border: 2px solid #f7f6ee;
	background: url(/svg/service_icon_home.svg) no-repeat;
}

.home_service li a:hover:before {
	opacity: 1;
	border-color: transparent;
}

.home_service .service_webdesign a:before {
	background-position: center -6px;
}

.home_service .service_coding a:before {
	background-position: center -231px;
}

.home_service .service_graphic a:before {
	background-position: center -460px;
}

.home_service .service_dtp a:before {
	background-position: center -686px;
}

.home_service dl {
	display: block;
	position: relative;
	margin-top: 176px;
	padding: 12px 0 16px;
	border-top: 2px solid transparent;
	border-image: url(/img/bg_works_eyecatch.png) 2 / 1 0 0 repeat;
	background: #f7f6ee;
	font-family: 'Open Sans', 'Noto Sans Japanese', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: bold;
	text-align: center;
}

.home_service dt {
	letter-spacing: .117647em;
	text-indent: .117647em;
	text-transform: uppercase;
	transition: 400ms;
	font-size: 1.0625rem; /* 17px */
}

.home_service a:hover dt {
	color: transparent;
}

.home_service dd {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: transparent;
	line-height: 58px;
	text-indent: .7em;
	white-space: nowrap;
	transition: 400ms;
}

.home_service a:hover dd {
	color: rgba(68, 66, 65, .8);
}

/*  -- .home_works  
 ---------------------------------------------------------------------------- */

.home_works {
	width: 1000px;
}

.home_works.home_item {
	margin-bottom: 0;
}

.home_works.home_item:after {
	content: none;
}

.home_works_slider {
	position: relative;
}

.home_works_slider ul {
	height: 276px;
}

.home_works_slider li {
	margin-bottom: 0;
}

.home_works_slider .lSSlideOuter::before,
.home_works_slider .lSSlideOuter::after {
	content: '';
	position: absolute;
	top: 4px;
	z-index: 1;
	width: 6px;
	height: calc(100% - 8px);
	pointer-events: none;
	transition: 400ms 400ms;
}

.home_works_slider .lSSlideOuter::before {
	left: 0;
	border-right: 2px solid #f7f6ee;
	background: url(/img/bg_works_eyecatch.png);
}

.home_works_slider .lSSlideOuter::after {
	right: 0;
	border-left: 2px solid #f7f6ee;
	background: url(/img/bg_works_eyecatch.png);
}

.home_works_slider .lSSlideOuter:hover::before,
.home_works_slider .lSSlideOuter:hover::after {
	opacity: 0;
	transition: none;
}

/*  -- .home_contact  
 ---------------------------------------------------------------------------- */

.home_contact h2 {
	border-top: 2px dotted rgba(233, 111, 141, .32);
	border-bottom: 2px dotted rgba(233, 111, 141, .32);
}

#home .home_contact .button {
	margin-top: 26px;
}

/* -------------------------------------------------------------------------- */
/*  jquery.rippler 
 * -------------------------------------------------------------------------- */

.rippler {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.rippler:focus,
.rippler:active {
	outline: none;
}

.rippler::-moz-focus-inner {
	border: 0;
}

.rippler-button {
	display: inline-block;
}

.rippler-img {
	display: block;
}

.rippler-circle-mask {
	border-radius: 50%;
	-webkit-mask: url(../svg/circle.svg) no-repeat;
	-webkit-mask-size: 100%;
}

.rippler-effect {
	position: absolute;
	opacity: .2;
	pointer-events: none;
}

.rippler-div {
	border-radius: 50%;
	background-color: #fff;
}

/* -------------------------------------------------------------------------- */
/*  jquery.lightSlider 
 * -------------------------------------------------------------------------- */

/*  -- core css  
 -------------------------------------------- */ /*  !!! Should not edit !!!  */

.lSSlideOuter {
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none
}

.lightSlider:before,
.lightSlider:after {
	content: ' ';
	display: table;
}

.lightSlider {
	overflow: hidden;
	margin: 0;
}

.lSSlideWrapper {
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.lSSlideWrapper > .lightSlider:after {
	clear: both;
}

.lSSlideWrapper .lSSlide {
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
	-webkit-transition: all 1s;
	-webkit-transition-property: -webkit-transform, height;
	   -moz-transition-property: -moz-transform, height;
	        transition-property: transform, height;
	-webkit-transition-duration: inherit !important;
	        transition-duration: inherit !important;
	-webkit-transition-timing-function: inherit !important;
	        transition-timing-function: inherit !important;
}

.lSSlideWrapper .lSFade {
	position: relative;
}

.lSSlideWrapper .lSFade > * {
	position: absolute !important;
	top: 0;
	left: 0;
	z-index: 9;
	margin-right: 0;
	width: 100%;
}

.lSSlideWrapper.usingCss .lSFade > * {
	opacity: 0;
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
	-webkit-transition-duration: inherit !important;
	        transition-duration: inherit !important;
	-webkit-transition-property: opacity;
	        transition-property: opacity;
	-webkit-transition-timing-function: inherit !important;
	        transition-timing-function: inherit !important;
}

.lSSlideWrapper .lSFade > *.active {
	z-index: 10;
}

.lSSlideWrapper.usingCss .lSFade > *.active {
	opacity: 1;
}

.lSSlideOuter .lightSlider,
.lSSlideOuter .lSPager {
	padding-left: 0;
	list-style: none outside none;
}

.lSSlideOuter .lightSlider > *,
.lSSlideOuter .lSGallery li {
	float: left;
}

/*  -- .lSPager  
 ---------------------------------------------------------------------------- */

.lSSlideOuter .lSPager.lSpg {
	overflow: hidden;
	position: absolute;
	top: calc(100% + 16px);
	left: 0;
	width: 100%;
	height: 32px;
	padding: 0;
	text-align: center;
}

.lSSlideOuter .lSPager.lSpg > li {
	cursor: pointer;
	display: inline-block;
	width: 36px;
	height: 100%;
}

.lSSlideOuter .lSPager.lSpg > li a {
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 99;
	width: 100%;
	height: 100%;
	text-indent: -999em;
}

.lSSlideOuter .lSPager.lSpg > li a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	border: 1px solid transparent;
	background: rgba(68, 66, 65, .6);
	-webkit-transition: all 200ms, background 300ms linear 0s;
	        transition: all 200ms, background 300ms linear 0s;
	-webkit-transform: translate(-50%, -50%) scale(1);
	        transform: translate(-50%, -50%) scale(1);
}

.lSSlideOuter .lSPager.lSpg > li:hover a::after,
.lSSlideOuter .lSPager.lSpg > li.active a::after {
	-webkit-transition: all 200ms, background 300ms linear 0s;
	        transition: all 200ms, background 300ms linear 0s;
	-webkit-transform: translate(-50%, -50%) scale(2);
	        transform: translate(-50%, -50%) scale(2);
}

.lSSlideOuter .lSPager.lSpg > li.active a::after {
	border-color: #eb7993;
	background: #eb7993;
}

.lSSlideOuter .lSPager.lSpg > li:hover a::after {
	border-color: rgba(68, 66, 65, .6);
	background: transparent;
}

.lSSlideOuter .media {
	opacity: 0.8;
}

.lSSlideOuter .media.active {
	opacity: 1;
}

/*  -- .lSAction  
 ---------------------------------------------------------------------------- */

.lSAction > a {
	display: block;
	position: absolute;
	top: 0;
	z-index: 99;
	width: 72px;
	height: 100%;
	cursor: pointer;
}

.lSAction > .lSPrev {
	left: -72px;
}

.lSAction > .lSNext {
	right: -72px;
}

.lSAction > .lSPrev::before,
.lSAction > .lSNext::before {
	position: absolute;
	top: 50%;
	width: 100%;
	font-family: 'icomoon';
	font-size: 1.5rem; /* 24px */
	text-align: center;
	-webkit-transform: translate(0, -50%);
	        transform: translate(0, -50%);
}

.lSAction > .lSPrev::before {
	content: '\ec4c';
}

.lSAction > .lSNext::before {
	content: '\ec4d';
}

.lSAction > .lSPrev:hover::before {
	text-indent: -16px;
}

.lSAction > .lSNext:hover::before {
	text-indent: 16px;
}

.lSAction > a.disabled {
	pointer-events: none;
}

.cS-hidden {
	height: 1px;
	opacity: 0;
	filter: alpha(opacity=0);
	overflow: hidden;
}

/*  -- .lsGrab  
 ---------------------------------------------------------------------------- */

.lightSlider.lsGrab > * {
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: -o-grab;
	cursor: -ms-grab;
	cursor: grab;
}

.lightSlider.lsGrabbing > * {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: -o-grabbing;
	cursor: -ms-grabbing;
	cursor: grabbing;
}

/* the end  
 ---------------------------------------------------------------------------- */