@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Lola|Alex+Brush|Shadows+Into+Light');
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}
/* ---------- Kina Sales Agency ---------------
-- Index
HOME
SERVICE
SYSTEM
CASE STUDY
HEADER
ASIDE
FOOTER

-- Setting Color
#8B7348 hsla(39, 32%, 41%) main-color
#332717 darkbrown
#FF370F orange
#f9f9f7
#9DBCBC
#958e27

-- Headline Subtext
font-family: 'Alex Brush', cursive;

-- KSA LOGO
font-family: 'Shadows Into Light', cursive;

font-family: 'Lora', serif;
-------------------------------------------- */

/* ----- GLOBAL ----- */


body,
.pure-g [class*=pure-u] {
	background: #fff;
	color: #333;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

h1,
h2,
h3,
h4,
.pure-menu-item span,
footer {
	margin-top: 0;
	font-family: Lora,Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-weight: normal;
}

h3,
h4 {
	font-size: 1.17em;
}

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

img {
	vertical-align: middle;
	width: 100%;
	height: auto;
}

a {
	color: #8b7348;
}

a:visited {}

a:hover {
	color: #332717;
	text-decoration:  none;
}

/* ----- HEADER ------------------------------- */

header {}

header h1 {
	font-size: 24px;
	margin: 0;
	padding-top: 8px;
	text-align: center;
	position: relative;
}

header h1::before {
	content: "KSA";
	font-family: "Shadows Into Light", cursive;
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	color: #129fea;
	opacity: 0.2;
	display: block;
	position: absolute;
	top: 24px;
	left: 50%;
	margin-left: -40px;
}

header a {
	color: #332717;
}

.custom-brand span {
	display: block;
	letter-spacing: .25em;
}

.custom-brand .subtitle {
	font-weight: normal;
	font-size: 15px;/*12px*/
	letter-spacing: normal;
	margin-top: 8px;
}

.pure-menu-heading {
	color: #332717;
}
.pure-menu-heading:hover {
	color: #8F8262;
}

.pure-menu-item span {
	display: block;
	text-transform: uppercase;
	font-size: .85em;
}

.pure-menu-disabled,
.pure-menu-heading {
	padding: 1.5em 2em;
}
.pure-menu-link {
	padding: 1.6em 1.7em;
	color: #333;
}

.open li .pure-menu-link {
	border-bottom: 1px dotted #ccc;
}
.open li:last-child .pure-menu-link {
	border-bottom: none;
}
.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
	color: #8B7348;
}
body:not(#home) .pure-menu-selected .pure-menu-link,
body:not(#home) .pure-menu-active > .pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
	background: hsla(39, 32%, 41%, 0.35);
	background: linear-gradient(0deg, #c3bdad 0, #f9f9f7 100%);/* W3C */
	background: linear-gradient(0deg, #c3bdad 0, #F9F9F7 50%, #dad6ce 100%);/* W3C */
	color: #332717;
}

.custom-wrapper {
	background-color: #f9f9f7;
	-webkit-font-smoothing: antialiased;
	padding-top: .5em;
	height: 14.3em;
	/* header fixed height */
	overflow: hidden;
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
}

.custom-wrapper.open {
	height: 35em;
	/*23.9em*/
}

.custom-menu-3 {
	text-align: right;
}

.custom-toggle {
	width: 34px;
	height: 38px;
	position: absolute;
	top: 26px;
	right: 15px;
	display: none;
}
.custom-toggle::after {
	content: "MENU";
	font-family: Arial,sans-serif;
	font-size: 8px;
	position: absolute;
	bottom: -4px;
	right: 0px;
	color: #8b7348;
}
.custom-toggle.x::after {
	content: "CLOSE";
}
.custom-toggle .bar {
	background-color: #8F8262;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 100px;
	position: absolute;
	top: 18px;
	right: 5px;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.custom-toggle .bar:first-child {
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
}

.custom-toggle.x .bar {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

nav {
	text-align: center;
	border-top: 3px double #d8d1c4;
	border-bottom: 3px double #d8d1c4;
}
@media screen and (min-width:980px) {
	/* PC */
	.pure-menu-link {
		padding: 1.6em 3em;
	}

}

/* ----- MAIN VISUAL -------------------------------- */
body:not(#home) .mainVisual {
	min-height: 200px;
	background-color: #eee;
}
#home .mainVisual {
	background-image: url(../images/damask.jpg);
}
.mainVisual {
	padding-bottom: 1px;
	padding-top:1px;
	-webkit-box-shadow: 0px 1px 9px #8B7348 inset;
	box-shadow: 0px 1px 9px #8B7348 inset;
}
.mainVisual li {
	margin: 10px;
}

.slick-slide {
	background: #eee;
}
.slick-dotted.slick-slider {
	margin-bottom: 55px;
}
.slick-dots {
	bottom: -44px;
}

.slick-dots li button:before {
	font-size: 14px;
	color: #332717;
}

.slick-dots li.slick-active button:before {
	color: #332717;
}

.mainVisual h2 {}

body:not(#home) .mainVisual {
	position: relative;
}

.mainVisual h2 {
	padding: .5em 0 .25em;
	line-height: 1;
	width: 100%;
	position: absolute;
	bottom: 16px;
	left: 0em;
	background: rgba(0, 0, 0, .3);
	margin-bottom: 0;
	color: #fff;
	font-size: 30px;
	letter-spacing: .2em;
	text-shadow: 0 1px 5px #000000;
}

.mainVisual h2 span {
	max-width: 980px;
	margin: auto;
	display: block;
	padding: .5em .7em;
}
.mainVisual h2 span::after {
	display: inline-block;
	padding-left: .7em;
	font-family: 'Alex Brush', cursive;
	font-size: 80%;
	letter-spacing: normal;
}

/* ----- CONTENTS -------------------------------- */
.container {
	max-width: 980px;
	margin: 2em auto 3em;
}
#home .container {
	margin-top: 0;
}
/* ----- MAIN ------------------------------------ */

.main h2,
.main h3 {
	padding: 1em 0 .5em .7em;
	border-bottom: 3px double #d8d1c4;
	line-height: 1.2;
	color: #8b7348;
}
.main h3 {
	line-height: 1.5;
}

.main > .content {
	padding: 0 0 1em 1em;
}

@media screen and (min-width: 980px) {
	/* PC */
	.main h2,
	.main h3,
	.main > .content {
		padding-left: 0;
		padding-right: 0;
	}
}

.main h2::after,
.main h3::after {
	color: #ccc;
	display: inline-block;
	margin-left: 1em;
	font-size: 80%;
	font-family: 'Alex Brush', cursive;
}
.content {
	padding: 0 1em;
}
.content + h3 {
	margin-top: 1.5em;
}
.contents-block {
	margin-bottom: 2em;
}

/* ----- INDEX:INDEXNAV ------------ */
.indexNav {
	margin: 2em 0;
}
.indexNav ul {}
.indexNav li {
	padding:5px;
	box-sizing: border-box;
}

.indexNav .pure-g li:nth-child(1) a {
	background: #eee url(../images/mv_service.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.indexNav .pure-g li:nth-child(2) a {
	background: #eee url(../images/mv_system.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.indexNav .pure-g li:nth-child(3) a {
	/*background: #eee url(../images/mv_case.jpg) no-repeat 45% 35%;*/
	background: #eee url(../images/mv_case2.jpg) no-repeat 59% 35%;
	background-size: cover;
}
.indexNav .pure-g li:nth-child(4) a {
	background: #eee url(../images/mv_contact.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.indexNav li a {
	display: block;
	color: #000;
	text-decoration: none;
	height: 160px;
	position: relative;
}
.indexNav li a:hover {}
.indexNav li a span {
	display: block;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	padding: .5em;
	bottom: 10px;
	color: #FFF;
	text-shadow: 0 1px 5px #000;
	background: rgba(0, 0, 0, 0.4);
	text-indent: 0em;
	transition: background .3s linear,
							text-indent .3s linear;
}
.indexNav li a:hover span {
	background: rgba(0, 0, 0, 0.65);
	text-indent: .5em;
	transition: background .3s linear,
							text-indent .3s linear;
}
.indexNav li a span::after {
	font-family: "FontAwesome";
	content: "\f0da";
	margin-left: .5em;
}

@media screen and (max-width:567px){
	/* 1column layout */
	.indexNav {
		margin: 1em 0;
	}
	.indexNav li {
		margin-bottom: 2em;
	}
	.indexNav li a {
		/*height: 120px;*/
	}
}

/* ----- INDEX:TOPICS ------------------ */

.topics {}

.topics h2::after {
	content: "````` Case Studies `````";
}

.topics ul {
	line-height: 1.5;
	margin-top: 0;
}

.topics li {}

.topics li > span,
.topics li > a {
	text-decoration: none;
	display: block;
	color: #333;
	padding: .5em 1em;
}

.topics li a:hover,
.topics li:nth-child(odd) a:hover {
	background: #ddd;
	color: #000;
}

.topics li,
.topics li a {
	clear: left;
}

.topics li time {
	display: block;
	width: 8.5em;
	float: left;
}

.topics li time + span {
	display: block;
	margin-left: 8.5em;
}

.topics .btn {
	text-align: right;
}
.topics .btn a::after {
	font-family: "FontAwesome";
	content: "\f054";
	margin-left: .5em;
	color: #666;
}

/* ----- OUR SERVICE ------------------------------- */
#service .mainVisual {
	background: #eee url(../images/mv_service.jpg) no-repeat 50% 62%;
}

#service .mainVisual h2 span::after {
	content: "````` Our Service `````";
}
#service figure {
	margin: 3em 0px;
}
ul.question {
	padding-left: .5em;
}
ul.question li {
	margin-left: 1.25em;
	text-indent: -1.25em;
	margin-bottom: .25em;
}
ul.question li::before {
	font-family: "FontAwesome";
	content: "\f29c";
	color: #8B7348;
	margin-right: .25em;
}

/* ----- SYSTEM ------------------------------------ */
#system .mainVisual {
	background: #eee url(../images/mv_system.jpg) no-repeat 50% 50%;
}
#system .mainVisual h2 span::after {
	content: "````` System & Charge `````";
}
.flow {
	border-top: 3px double #d8d1c4;
}
.flow h3 {
	cursor: pointer;
	margin: 0;
	padding: .75em 1em .5em;
	background: linear-gradient(0deg, #E9E5DC 0, #f9f9f7 100%);/* W3C */
}
.flow h3.active {
}
.flow h3::after,
.flow h3.active::after {
	color: #8b7348;
	vertical-align: middle;
}

.flow h3::after {
	content: "▶︎";
}
.flow h3.active::after {
	content: "▼";
}
.flow h4 {
	margin-top: 1em;
	color: #8b7348;
	font-weight: bold;
}
.flow p + h4,
.flow small + h4{
	margin-top: 4em;
}
.flow .acPanel {
	border-bottom: 3px double #d8d1c4;
	padding: 1em 1em 2em;
}
.acPanel figure {
	margin: 1em 0 2.5em;
}
.acPanel p + figure {
	margin-top: 4em;
}
.flow .acPanel ul {
	padding-left: .5em;
}
.flow .acPanel li {
	margin-left: 1.25em;
	text-indent: -1.25em;
	margin-bottom: .25em;
}
.flow .acPanel li::before {
	font-family: "FontAwesome";
	content: "\f046";
	color: #8B7348;
	margin-right: .25em;
}
.flow .btn {
	text-align: center;
	margin: 4em auto;
}
/* ----- CASE STUDY -------------------------------- */
#case_study .mainVisual {
	/*background: #eee url(../images/mv_case.jpg) no-repeat 50% 50%;*/
	background: #eee url(../images/mv_case2.jpg) no-repeat 60% 50%;
}
#case_study .mainVisual h2 span::after {
	content: "````` Case Study `````";
}

article.content:not(:last-of-type) {
	margin-bottom: 3em;
	padding-bottom: 4em;
	background: url(../images/deco_gold.png) no-repeat center bottom;
}
article.content:last-of-type {
	
}
article h3 {
	margin-bottom: 0;
}
article time {
	display: block;
	text-align: right;
	font-size: .9em;
	color: #999;
}
article figure {
	margin: 1em auto 0;
}
article figure ul {
	overflow: hidden;
	margin: 0;
}
article figure li {
	margin-bottom: 1em;
}
article dl {
	margin: 1em 0 2em;
}
article dt {
	border-bottom: 1px dashed #8b7348;
	color: #8b7348;
}
article dd {
	margin: 0;
}
article dd + dt {
	margin-top: 1.5em;
}
article p {
	background: hsla(39, 32%, 41%, 0.2);
	padding: 1em;
	border-radius: 8px;
}
@media screen and (min-width:768px) {
	/* Tablet and PC */
	article figure li {
		width: 48.75%;
		float: left;
		margin-right: 2.5%;
	}
	article dl {}
	article dt {}
	article dd {}

}
article figure li:nth-child(even) {
	margin-right: 0;
}
article figure .single li {
	width: 100%;
	margin-right: 0;
}
article figure img {}

.pager {
	clear:both;
	margin:30px 0;
	text-align:center;
}

.pager span {
	margin:5px;
	padding:5px 8px;
	color:#000;
	background:#f8f8f8;
	border:1px solid #666;
}
.pager span:hover {
	cursor:pointer;
	background:hsla(39, 32%, 41%, 0.3);
}

.pager span.current {
	color: #fff;
	background: #8B7348;
}
.pager span.current:hover {
	cursor:default;
}

.pager span.invalid {
	display:none;
}
.pager span.invalid:hover {
	cursor:default;
}

.pager span.ellipsis {
	color:#000;
	background:none;
	border:none;
}
.pager span.ellipsis:hover {
	cursor:default;
}

.pager span.first,
.pager span.last,
.pager span.prev,
.pager span.next {
	background:#ddd;
}

.pager span.first:hover,
.pager span.last:hover,
.pager span.prev:hover,
.pager span.next:hover {
	background:#999;
}

.pageNum {
	margin:30px 0;
	text-align:center;
}

/* ----- CATERING ------------------------------- */

#catering h2 {}

/* ----- ASIDE ------------------------------- */

aside {}

.info,
.corp-info {
	margin: 0 0 1em 2em;
	border: 1px solid #d8d1c4;
	border-radius: 3px;
	text-align: center;
	background-color: #f9f9f7;
	background-image: url(../images/damask.jpg);
	padding-bottom: 2em;
}
.info h2,
.corp-info h2 {
	font-size: 18px;
	color: #8B7348;
	margin-top: 0;
	padding: 2em 0 2.2em;
	background: url(../images/deco_gold.png) no-repeat center bottom;
}

.info ul {
	padding: 0 1.5em;
	margin: 0 auto;
	max-width: 15em;
	line-height: 2;
	text-align: left;
}
.corp-info dl,
.corp-info ul {
	text-align: left;
	margin-bottom: 3em;
}

.corp-info dt {
	padding: 5px .5em;
	background: hsla(39, 32%, 41%, 0.1);
}
.corp-info dd {
	margin: 0;
	padding: 5px .5em;
}

.corp-info dd + dt {
	margin-top: 1.5em;
}
.corp-info li {
	padding: 5px .5em;
	font-size: 95%;
	text-indent: -0.7em;
	margin-left: 1em;
	margin-bottom: 1em;
}
.corp-info li::before {
	font-family: "FontAwesome";
	content: "\f0da";
	font-size: 1.2em;
	margin-right: .25em;
	color: #8B7348;
}
.info .btn {
	text-align: center;
	margin: 2em auto 1em;
}
#areaList p {
	text-align: left;
	padding: 1em;
}
.ad {
	margin: 1em;
}

/* ----- FOOTER ------------------------------- */

footer {
	text-align: center;
	color: #8b7348;
	background: #222;
	line-height: 3;
}
footer small {
	text-transform: uppercase;
	letter-spacing: .05em;
}
.footerNav {
	line-height: 1;
	margin: 0;
	padding: 2em 0 1em;
}
.footerNav li {
	display: inline-block;
	font-size: 14px;
	padding: 7px 0;
}
.footerNav li a {
	display: block;
	padding: 0 1em;
	text-decoration: none;
	color: #8b7348;
	border-right: 1px solid;
}
.footerNav li:last-child a {
	border-right: 0px;
}
.footerNav li a:visited {
	color: #8a7347;
}
.footerNav li a:hover {
	text-decoration: underline;
	color: #8a7347;
}

@media screen and (max-width:600px){
	.footerNav {
		text-align: left;
		line-height: 3;
	padding: 1em 0;
	}
	.footerNav li {
		display: block;
		font-size: 16px;
		padding: 0;
	}
	.footerNav li a {
		border-right: 0px;
	}
	.footerNav li a:hover {
		text-decoration: none;
		background: hsla(39, 32%, 41%, 0.1);
	}
	.footerNav li a::before {
		font-family: "FontAwesome";
		content: "\f101";
		margin-right: .25em
	}
}
/* ----- EXTRA ------------------------------- */

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
	background-color: #8B7348;
	color: #fff;
}

.content small {
	color: #666;
	display: block;
	margin: 1em 0;
}
.content small::before {
	content: "※";
	margin-right: .25em;
}

.info li i {
	margin-right: .5em;
}

.pagetop {
	position: fixed;
	bottom: 103px;
	right: 25px;
	margin: 0;
}
.pagetop a {
	display: block;
	padding: 1em;
	font-size: .8em;
	background: #222;
	color: #8B7348;
	border: 1px solid #8B7348;
	text-decoration: none;
}
.pagetop a i {
	font-size: 1.2em;
}
.pagetop a span {
	padding-left: .5em;
}

.orderBtn {
	font-size: 120%;
	color: #FFF;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: #ff8c00;/*darkorange*/
}
.orderBtn:hover {
	color: #FFF;
}
.attention {
	background: hsla(39, 32%, 41%, 0.2);
	padding: 1em;
	border-radius: 8px;
	margin: 1.5em 0;
}

@media screen and (max-width: 47.999em) {
	/* ---------------------- under 768 ---------------------- */
	.container {
		margin-bottom: 0;
		margin-top: 1em;
	}
	/* ----- HEADER ----- */
	.custom-brand span {
		letter-spacing: normal;
	}
	.custom-brand .subtitle {
		display: none;
	}
	.custom-wrapper {
		height: 6.4em;
		padding-top: 0;
	}
	.custom-toggle {
		display: block;
	}
	.pure-menu-link {
		padding: 1em 1.7em;
		font-size: 20px;
	}

	header h1 {
		padding-top: 0;
	}
	header h1::before {
		top: 14px;
	}
	.mainVisual li {
		margin: 5px;
	}
	.slick-slider {
		margin-bottom: 20px;
	}

	.topics .btn {
		text-align: center;
	}

	.corp-info + .info,
	.info + .info {
		margin-top: 0;
		border-top: 0px;
	}

	.info,
	.corp-info {
		margin: 1em 0 0;
		border-width: 1px 0 0 0;
		border-radius: 0;
	}
	.info ul {
		line-height: 3;
	}
	.info li i {
		margin-right: 0em;
	}
	.info i::after {
		margin-left: .5em;
	}
	.mail i::after {
		content: "メール：";
	}
	.fax i::after {
		content: "FAX：";
	}
	.call i::after {
		content: "電話：";
	}

	.hour i::after {
		content: "営業時間：";
	}

	.corp-info dt {
		padding: .5em 1em;
	}
	.corp-info dd {
		padding: .5em 1em;
	}

	.corp-info li {
		padding: 0em 1em;
		font-size: 100%;
	}

	.main h2,
	.main h3,
	.main > .content {
		padding-right: .7em;
	}

	.topics h2 {
		border-bottom: none;
		margin-bottom: 0;
	}
	.topics li {
		border-top: 1px dotted #ccc;
	}
	.topics li:last-child {
		border-bottom: 1px dotted #ccc;
	}
	.topics li a {
		position: relative;
	}
	.topics li a::after {
		font-family: "FontAwesome";
		content: "\f054";
		color: #999;
		display: block;
		position: absolute;
		top: 50%;
		right: 0.5em;
		margin-top: -.75em;
	}
	.topics time {
		font-size: 90%;
		display: block;
		width: auto;
	}
	.topics li time + span {
		margin-right: 1em;
	}
	.pagetop a {
		padding: 0.8em;
	}
	.pagetop a i {
		font-size: 2em;
	}
	.pagetop a span {
		display: none;
	}
	.orderBtn {
		font-size: 100%;
	}


}
@media screen and (max-width:425px){
	.topics li time {
		float: none;
	}
	.topics li time + span {
		margin-left:  0;
	}

	.topics li a {
		padding: 1.2em 1em;
	}
}