@charset "utf-8";

/*
Theme Name: IKESAN
Author: THREE / sugai
Version: ver 1.00
*/

/* -------------------------------------------------
    ---     COMMON     ---
   -------------------------------------------------  */

* {
	margin                : 0;
	padding               : 0;
	-webkit-font-smoothing: antialiased;
	-webkit-box-sizing    : border-box;
	-moz-box-sizing       : border-box;
	box-sizing            : border-box;
}

body {
	font-size               : 15px;
	font-family             : YuMincho, 游明朝, "Yu Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", HiraMinProN-W6, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman";
	color                   : #4C4C4C;
	margin                  : 0 auto;
	position                : relative;
	z-index                 : 0;
	line-height             : 1;
	-webkit-text-size-adjust: 100%;
	background-color        : #FFF;
	background-image        : url('images/ruler.png');
	background-repeat       : repeat-y;
	background-position     : top right;
}

::selection {
	background: #333;
	color     : #fff;
}

img {
	/*	width:100%; */
	margin : 0;
	padding: 0;
	border : 0;
}

ul {
	list-style: none;
}

a:hover img {
	opacity     : 0.7;
	filter      : alpha(opacity=70);
	-moz-opacity: 0.7;
}

.clearfix {
	*zoom: 1;
}

.clearfix:after {
	content: '';
	display: table;
	clear  : both;
}

a {
	color             : #4C4C4C;
	text-decoration   : none;
	-webkit-transition: all .3s ease-in;
	-moz-transition   : all.3s ease-in;
	-o-transition     : all .3s ease-in;
	transition        : all .3s ease-in;

	-webkit-transition: all .3s ease-out;
	-moz-transition   : all.3s ease-out;
	-o-transition     : all .3s ease-out;
	transition        : all .3s ease-out;
}

a:hover {
	color             : #666;
	text-decoration   : none;
	-webkit-transition: all .3s ease-in;
	-moz-transition   : all.3s ease-in;
	-o-transition     : all .3s ease-in;
	transition        : all .3s ease-in;

	-webkit-transition: all .3s ease-out;
	-moz-transition   : all.3s ease-out;
	-o-transition     : all .3s ease-out;
	transition        : all .3s ease-out;
}



/* --- GO TOP --- */

#go-top {
	display                        : block;
	position                       : fixed;
	z-index                        : 5000;
	bottom                         : 0;
	right                          : 20px;
	padding                        : 8px 0;
	background                     : rgba(0, 0, 0, 0.9);
	color                          : #fff;
	text-align                     : center;
	text-decoration                : none;
	width                          : 40px;
	height                         : 40px;
	-webkit-border-top-left-radius : 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft     : 5px;
	-moz-border-radius-topright    : 5px;
	font-size                      : 1.5em;
}

#go-top:hover {
	background: rgba(0, 0, 0, 0.5);
}


/* -------------------------------------------------
    ---     LAYOUT     ---
   -------------------------------------------------  */

/* section { overflow: hidden; } */
#message,
#description,
#facility,
#company,
#history,
#works {
	overflow: hidden;
}

h2 {
	font-size   : 2em;
	border-left : 1px solid #4C4C4C;
	border-right: 1px solid #4C4C4C;
	padding     : 5px 70px;
	text-align  : center;
	display     : inline-block;
}

p.en {
	font-size : 1em;
	color     : #CCC;
	display   : block;
	font-style: italic;
	padding   : 20px 40px;
}

.wrapper {
	width     : 96%;
	max-width : 1200px;
	margin    : 0 auto;
	padding   : 70px 2%;
	text-align: center;
}

.wrapper_full {
	width     : 100%;
	padding   : 70px 0;
	text-align: center;
}

.txt {
	line-height: 2;
}

#top {
	position        : relative;
	background-color: #FFF;
}

#top a.scroll {
	position   : absolute;
	bottom     : 80px;
	left       : 50%;
	margin-left: -20px;
	display    : block;
	color      : #CCC;
}


footer {
	width           : 100%;
	color           : #FFF;
	background-color: #4C4C4C;
	text-align      : center;
	padding         : 40px 1%;
	line-height     : 1.5;
}


/* -------------------------------------------------
    ---     MENU     ---
   -------------------------------------------------  */

nav {
	width     : 100%;
	height    : 60px;
	padding   : 0 20px;
	background: #4C4C4C;
	position  : absolute;
	bottom    : 0;
}

nav ul {
	width  : 100%;
	clear  : both;
	content: "";
	display: block;
}

nav ul li:first-child {
	float     : left;
	border    : none;
	margin-top: 5px;
}

nav ul li:first-child img {
	width: 220px;
}

nav ul li:first-child a:hover {
	background: #4C4C4C;
}

nav ul li {
	float      : right;
	padding    : 0 20px;
	margin-top : 18px;
	border-left: 1px solid #FFF;
}

nav ul li:nth-child(2) {
	border-right: 1px solid #FFF;
}

nav ul li a {
	color  : #FFF;
	display: block;
	padding: 3px 5px;
}

nav ul li a:hover {
	color     : #000;
	background: #666;
}

.sticky {
	position: fixed;
	top     : 0;
	z-index : 999;

	-webkit-transition: all .3s ease-in;
	-moz-transition   : all.3s ease-in;
	-o-transition     : all .3s ease-in;
	transition        : all .3s ease-in;

	-webkit-transition: all .3s ease-out;
	-moz-transition   : all.3s ease-out;
	-o-transition     : all .3s ease-out;
	transition        : all .3s ease-out;
}


#sp_Header {
	display   : none;
	width     : 100%;
	position  : fixed;
	top       : 0;
	left      : 0;
	z-index   : 9900;
	background: rgba(255, 255, 255, 0.8);
}

#sp_Logo {
	float  : left;
	width  : 200px;
	padding: 10px;
}

#sp_Logo img {
	width: 100%;
}


/* --- BAR --- */
#bar {
	float     : right;
	color     : #4C4C4C;
	text-align: center;
	cursor    : pointer;
	width     : 60px;
	padding   : 15px;
	z-index   : 9998;
}

#bar img {
	width: 100%;
}

#bar_menu {
	display   : none;
	width     : 100%;
	text-align: left;
	position  : fixed;
	top       : 0;
	left      : 0;
	z-index   : 9998;
	background: rgba(76, 76, 76, 0.9);
	padding   : 50px;
	font-size : 105%;
}


#close {
	background-color: #FFF;
	color           : #4C4C4C;
	text-align      : center;
	cursor          : pointer;
	height          : 65px;
	width           : 65px;
	position        : absolute;
	top             : 0;
	right           : 0;
	z-index         : 9999;
	font-size       : 40px;
	padding         : 10px;
}

#bar_menu ul {
	margin-top            : 30px;
	flex-direction        : column;
	-webkit-flex-direction: column;
}

#bar_menu ul li {
	display   : block;
	padding   : 15px 18px;
	border-top: 1px dotted #999;
}

#bar_menu ul li img {
	max-width: 300px;
}

#bar_menu ul li:first-child {
	border        : none;
	text-align    : center;
	padding-bottom: 30px;
}

#bar_menu ul li:last-child {
	border-bottom: 1px dotted #999;
}

#bar_menu ul li a {
	color  : #FFF;
	display: block;
}

#bar_menu ul li a:hover {
	color: #CCC;
}



/* -------------------------------------------------
    ---     TOP     ---
   -------------------------------------------------  */

/* --- SVG --- */
header {
	position: relative;
	width   : 100%;
	height  : 100%;
}

.canvas {
	width   : 60%;
	height  : 540px;
	position: absolute;
	top     : 0;
	bottom  : 80px;
	left    : 0;
	right   : 0;
	margin  : auto;
}

#ikesan {
	width : 100%;
	margin: auto;
}

#illust,
#ikesan {
	position: absolute;
	top     : 0;
	left    : 0;
}

#illust {
	display: none;
	width  : 100%;
	height : auto;
}

#illust img {
	width : 100%;
	height: auto;
}

table {
	border-left    : 1px solid #4C4C4C;
	border-top     : 1px solid #4C4C4C;
	margin         : 20px auto;
	border-collapse: separate;
	border-spacing : 0;
}

table tr td {
	padding      : 10px;
	border-right : 1px solid #4C4C4C;
	border-bottom: 1px solid #4C4C4C;
}

/* --- MESSAGE --- */
#message {
	margin-top: 50px;
}

/* --- DESCRIPTION --- */
#description table tr td:first-child {
	background: #EEE;
}

/* --- WORKS --- */
#works ul.photos {
	clear  : both;
	content: "";
	display: block;
}

#works ul.photos li {
	width      : 25%;
	float      : left;
	line-height: 0;
	position   : relative;
}

#works ul.photos li a {
	line-height: 0;
}

#works ul.photos li a img {
	width   : 100%;
	position: relative;
	z-index : 5;
}

#works ul.photos li a:hover img {
	opacity     : 0;
	filter      : alpha(opacity=00);
	-moz-opacity: 0;
}

#works ul.photos li a img.over {
	position    : absolute;
	top         : 0;
	left        : 0;
	z-index     : 0;
	opacity     : 1;
	filter      : alpha(opacity=100);
	-moz-opacity: 1;
}


/* --- COMPANY --- */
#company ul {
	margin-top: 20px;
}

#company ul li {
	line-height: 1.5;
}

#company ul li:first-child {
	width      : 42%;
	float      : right;
	margin-left: 2%;
}

#company ul li:last-child {
	width: 55%;
	float: left;
}

#company ul li img {
	width: 100%;
}

#company ul li table {
	margin-top: 0;
	width     : 100%;
}

#company table tr td:first-child {
	background: #EEE;
}

#company table tr td:last-child {
	text-align: left;
}

/* --- HISTORY --- */
img.imgHistory {
	display    : inline-block;
	margin-left: 170px;
}


/* --- ACCESS --- */
#map_canvas {
	width : 100%;
	height: 500px;
}


/* スライダー全体 */
.slider-wrapper {
	display : flex;
	overflow: hidden;
	margin  : 80px 0;
}


.slider {
	animation: scroll-left 60s infinite linear .5s both;
	display  : flex;

}

.slide {
	flex  : 0 0 500px;
	/* 横幅を500pxに */
	width : 500px;
	height: 500px;
}

.slide img {
	width     : 500px;
	height    : 500px;
	object-fit: cover;
	/* 画像の比率が違っても切り抜きでフィット */
}

/* CSSアニメーション */
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}



/* -------------------------------------------------
    ---     LOADING     ---
   -------------------------------------------------  */
#loader {
	width      : 76px;
	height     : 20px;
	display    : none;
	position   : fixed;
	_position  : absolute;
	/* IE6対策 */
	top        : 50%;
	left       : 50%;
	margin-left: -40px;
	/* widthの半分のマイナス値 */
	z-index    : 100;
}

#fade {
	width           : 100%;
	height          : 100%;
	display         : none;
	background-color: #FFFFFF;
	position        : absolute;
	top             : 0px;
	left            : 0px;
	z-index         : 50;
}


/* ---------- LOADER ---------- */

.loader {
	display  : inline-block;
	font-size: 2em;
	margin   : 0 .5em;
	position : relative;
	height   : .5em;
	width    : 1em;
}

.loader:before,
.loader:after {
	content : "";
	display : block;
	height  : .5em;
	position: absolute;
	width   : .5em;
}

.loader:before {
	-webkit-animation: load-before 2s ease-in-out infinite, zoom-before .66s ease-in-out infinite;
	-moz-animation   : load-before 2s ease-in-out infinite, zoom-before .66s ease-in-out infinite;
	-ms-animation    : load-before 2s ease-in-out infinite, zoom-before .66s ease-in-out infinite;
	-o-animation     : load-before 2s ease-in-out infinite, zoom-before .66s ease-in-out infinite;
	animation        : load-before 2s ease-in-out infinite, zoom-before .66s ease-in-out infinite;
	background       : #cb4e87;
}

.loader:after {
	-webkit-animation: load-after 2s ease-in-out infinite, zoom-after .66s ease-in-out infinite;
	-moz-animation   : load-after 2s ease-in-out infinite, zoom-after .66s ease-in-out infinite;
	-ms-animation    : load-after 2s ease-in-out infinite, zoom-after .66s ease-in-out infinite;
	-o-animation     : load-after 2s ease-in-out infinite, zoom-after .66s ease-in-out infinite;
	animation        : load-after 2s ease-in-out infinite, zoom-after .66s ease-in-out infinite;
	background       : #eadf37;
}


.circle:before,
.circle:after {
	border-radius: 50%;
}


/* ------------------------------------------------------------------

 ****   SP対応   ****************************************************

   ------------------------------------------------------------------ */

/* Larger than Desktop HD */
@media (min-width: 1400px) {
	.canvas {
		height: 800px;
	}
}


@media (max-width: 1200px) {
	.canvas {
		height: 540px;
	}
}

@media (max-width: 960px) {
	img.imgHistory {
		margin-left: 0;
		width      : 100%;
	}

}

@media screen and (max-width:860px) {
	#sp_Header {
		display: block;
	}

	nav {
		display: none;
	}

	#works ul.photos li {
		width: 33.3333333333%;
	}

	header .canvas,
	header #ikesan,
	header #illust {
		width: 95%;
	}

	header .canvas {
		top   : 180px;
		bottom: 0;
	}

	#top a.scroll {
		bottom: 30px;
	}

	#company ul li:first-child,
	#company ul li:last-child {
		width      : 100%;
		float      : none;
		margin-left: 0;
	}

	table {
		width: 100%;
	}

	table tr td {
		width  : 100%;
		display: block;
	}

	#facility table tr td {
		width: 50%;
		float: left;
	}
}


@media screen and (max-width:630px) {

	.slider-wrapper {
		margin: 40px 0;
	}

	.slide {
		flex  : 0 0 280px;
		/* 横幅を500pxに */
		width : 280px;
		height: 280px;
	}

	.slide img {
		width     : 280px;
		height    : 280px;
		object-fit: cover;
		/* 画像の比率が違っても切り抜きでフィット */
	}
}

@media screen and (max-width:480px) {
	body {
		font-size       : 12px;
		background-image: none;
	}

	.wrapper_full {
		padding: 50px 0;
	}

	.wrapper {
		width  : 94%;
		padding: 50px 3%;
	}

	#bar_menu img {
		width: 100%;
	}

	#message .txt,
	#description .txt {
		text-align: left;
	}

	#works .wrapper_full {
		padding-bottom: 70px;
	}

	#works ul.photos li a:hover img {
		opacity     : 1;
		filter      : alpha(opacity=100);
		-moz-opacity: 1;
	}

	#works ul.photos li a img.over {
		display: none;
	}
}


@media screen and (max-width:380px) {}