html, body { color:515151;background: #000;line-height:14px;font-family: 'Indie Flower'; }

.topspace {line-height:70px;}

/* H2---- */  
h2 {position: relative;padding: 0 0px;text-align: left;}
h2:before {position: absolute;top: calc(50% - 1px);left: 0;width: 100%;height: 2px;content: '';background: #c1c1c1;}
h2 span {position: relative;padding: 0em 1em 0em 0em;background: #fff;}
/* PHOTO animation---- */  
.keyframe{animation-name: anim_h;}
.animation{animation-timing-function: ease-in-out;animation-iteration-count: infinite;animation-direction: alternate;animation-duration: 8s;}
@keyframes anim_h {
0% {transform: translate(0px, 0);}
100% {transform: translate(-17px, 0);}}
/* PHOTO slides---- */  
.rslides {position: relative;list-style: none;overflow: hidden;width: 100%;padding: 0px;margin: -0%;}
.rslides li {position: absolute;display: none;width:100%;left:-2%;top: 0;}
.rslides li:first-child {position: relative;display: block;float: center;}
.rslides img {display: block;height: auto;float: center;width: 104%;border: 0;}
/* pc & sp---- */
.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }}
/* loading---- */
.loading {width: 100vw;height: 100vh;transition: all 1.5s;background-color: #000;position: fixed;top: 0;left: 0;z-index: 9999;opacity: 1;visibility: visible;}
.loading.is-active {opacity: 0;visibility: hidden;}
.loading-animation {width: 100vw;height: 100vh;transition: all 2s;background-color: #fff;z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;}
.loading-animation.is-active {opacity: 1;visibility: visible;}

/* link----------------------------------------------------------- */  
a:link {text-decoration:none;color:#414141;}
a.bk:link {text-decoration:none;color:#a1a1a1;}
a.bk2:link {text-decoration:none;color:#d1d1d1;}
a.bl:link {text-decoration:none;color:#ffffff;}
a:visited {text-decoration:none;color:#414141;}
a.bk:visited {text-decoration:none;color:#a1a1a1;}
a.bk2:visited {text-decoration:none;color:#d1d1d1;}
a.bl:visited {text-decoration:none;color:#ffffff;}
a:hover {text-decoration:none;color:#a1a1a1;}
a.bk:hover {text-decoration:none;color:#e1e1e1;}
a.bk2:hover {text-decoration:none;color:#f1f1f1;}
a.bl:hover {text-decoration:none;color:#eeeeee;}
a:active {text-decoration:none;color:#c1c1c1;}
a.bk:active {text-decoration:none;color:#a1a1a1;}
a.bk2:active {text-decoration:none;color:#d1d1d1;}
a.bl:active {text-decoration:none;color:#ffffff;}

/* inviewfadeIn----------------------------------------------------------- */  
.inviewfadeIn {opacity: 0;transition: 1.2s;}
.fadeIn {opacity: 1.0;}

/* LINE----------------------------------------------------------- */  
.pickuplogo2 {width:60%;}
table.pickupfont2 {border:none;background-color:f2f2f2;font-size:12px;width:00px;padding:0px;}
.pickuphr {align:left;border:none;border-top: solid 1px #aaa;width:100%;margin-left:0px}

/* TOP  PHOTO----------------------------------------------------------- */  
.topphoto {width:100%;}

/* MAIN----------------------------------------------------------- */  
.mainfontbig {color:000;text-align:left;font-size:43px;line-height:34px;letter-spacing:0px;font-family: 'Julius Sans One', sans-serif;}
.subtitle {text-align:left;font-family:sans-serif;font-size:11px;line-height:25px;}
.mainfontsub {color:c5b07f;text-align:left;font-family:Sorts Mill Goudy;font-size:12px;line-height:22px;}
.mainfont {text-align:left;font-family:serif;font-size:12px;line-height:21px;}
.mainfonts {text-align:left;font-family:sans-serif;font-size:12px;line-height:15px;}
.adr {font-size:11px;line-height:19px;}

/* MAP */
.map {width:200px;height:120px;}


/* list----------------------------------------------------------- */  
.menulist {color:676767;font-family:sans-serif;font-size:12px;line-height:16px;}
.listsmall {font-size:9px;font-style: italic;vertical-align:super;}
.listtd1 {width:90%;}
.listtd2 {width:10%;text-align:right;vertical-align:top;}

/* contact */
#formWrap {width:100%;margin:0 auto;color:#555;line-height:120%;font-size:80%;}
table.formTable{width:100%;margin:0 auto;border-collapse:collapse;}
table.formTable td,table.formTable th{font-size:11px;border:1px solid #ccc;padding:7px;}
table.formTable th{width:30%;font-weight:normal;background:#efefef;text-align:left;}


/* event */
.eventtd {width:33%;}.
.eventtd2 {width:10%;}
.eventtdl {width:49%;}
.eventtdimg {width:160px;padding-top:6px;}
.eventhr {border:none;border-top: solid 1px #eee;width:100%;}
.eventtitle {text-align:left;font-size:15px;line-height:30px;letter-spacing:0px;font-family:serif;}
.eventfont {text-align:left;font-size:12px;line-height:18px;letter-spacing:0px;font-family:sans-serif;}
.eventday {text-align:left;font-size:14px;line-height:30px;letter-spacing:1px;font-family: sans-serif;font-weight: 500;}
.eventimg {width:140px;}

/* btn link----------------------------------------------------------- */  
.link1 {background-color:#a1cfe6;width:70px; height:25px;display: inline-block; _display: inline}
.link2 {font-family:sans-serif;font-size:13px;line-height:25px}
.link3 {background-color:#e6b8a1;width:70px; height:25px;display: inline-block; _display: inline}
.link4 {background-color:#a1e6b8;width:70px; height:25px;display: inline-block; _display: inline}

/* HR */
hr{border-top: solid 1px #aaa;width:70%;}
.hrl {border:none;margin-left:0;text-align:left;height:1px;border-top: solid 1px #ccc;width:100%;}
.hrr {margin-right:0;text-align:right;}
.hrc {text-align:center;}
.hrside {border:none;margin-left:12px;text-align:left;height:1px;border-top: solid 1px #aaa;}

/* タイトル文----------------------------------------------------------- */  
.titletop {width:70%;}

/* インデックス----------------------------------------------------------- */  
.indext {width:310px;position: absolute ;top : -60px; left: 5%;z-index: 2;}
.menubar {width:0px;position: absolute ;top : 25px ; right: 5%;z-index: 2;}
.about {width:80px;position: absolute  ;top : -10px ;right: 38%;z-index: 2;}
.case {width:80px;position: absolute  ;top : -10px ;right: 31%;z-index: 2;}
.teq {width:80px;position: absolute  ;top : -10px ;right: 21%;z-index: 2;}
.contact {width:80px;position: absolute  ;top : -10px ;right: 5%;z-index: 2;}
.menu {width:80px;position: absolute  ;top : -10px ;right: 13%;z-index: 2;}

/* ２カラム----------------------------------------------------------- */  
.left2 {width:26%;float:left;text-align:left;margin-left:33%;}
.center2 {padding:2%;}
.right2 {width:26%;float:left;text-align:left;margin-left:2%;}
.text2 {font-family:serif;font-size:13px;line-height:20px;}

/* 3カラム----------------------------------------------------------- */  
.left3 {width:16.6%;float:left;text-align:left;margin-left:33%;}
.center2 {padding:2%;}
.right3 {width:16.6%;float:left;text-align:left;margin-left:2%;}
.text2 {font-family:serif;font-size:13px;line-height:20px;}

/* 3メインカラム----------------------------------------------------------- */  
.main3t {width:85%;float:left;text-align:left;margin-left:10%;margin-right:5%}
.main3tcenter {width:90%;float:left;text-align:center;margin-left:5%;margin-right:5%}
.main3 {width:54%;float:left;text-align:left;margin-left:33%;margin-right:13%}
.share {width:54%;float:left;text-align:left;margin-left:33%;margin-right:13%}
.main3t1{width:33%;}
.main3t2{width:54%;}
.main3t3{width:13%;}
.main3tt1{width:10%;}
.main3tt2{width:85%;text-align:left;}
.main3tt3{width:5%;}
.main3ttt1{width:33%;}
.main3ttt2{width:54%;}
.main3tttt3{width:13%;}
.centerm2 {padding:2%;}
.rightm3 {width:28.8%;float:left;text-align:left;margin-left:2%;}
.textm2 {font-family:serif;font-size:13px;line-height:20px;}

/* ムービーフレーム可変----------------------------------------------------------- */  
.iframe-content {position: relative;width: 90%;padding: 56.25% 0 0 0;}
.iframe-content iframe {position: absolute;top: 0;left: 5.5%;width: 100%;height: 90%;}
.iframe-content2 {position: relative;width: 60%;padding: 56.25% 0 0 0;}
.iframe-content2 iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* サイドバーフォント----------------------------------------------------------- */  
.sidefont {color:d1d1d1;width:auto;text-align:left;font-family:sans-serif;font-size:16px;line-height:19px;margin:15px;font-weight: 500;}
.sidefonts {text-align:left;font-size:12px;line-height:19px;font-weight: 400;}

/* PHOTO slides----------------------------------------------------------- */  
.rslidest {position: relative;list-style: none;overflow: hidden;width: 0%;padding: 0px;margin: -0%;}
.rslidest li {position: absolute;display: none;width:0%;left:0%;top: 0;}
.rslidest li:first-child {position: relative;display: block;float: center;}
.rslidest img {display: block;height: auto;float: center;width: 0%;border: 0;}

/* PHOTO slides----------------------------------------------------------- */  
.rslidesM {position: relative;list-style: none;overflow: hidden;width: 100%;padding: 0;margin: 0%;}
.rslidesM li {position: absolute;display: none;width: 100%;left: 0;top: 0;}
.rslidesM li:first-child {position: relative;display: block;float: center;}
.rslidesM img {display: block;height: auto;float: center;width: 100%;border: 0;}

/* TOP header要素 
----------------------------------------------------------- */  
div#header{width:100%;padding:0px;background: #000;border-bottom: 70px solid #000;opacity: 0.9;color:#000;position: fixed;top:0;left:0;}
* html div#header{position: absolute;top: expression(eval(document.documentElement.scrollTop+0));}
div#header h1 { width: 800px;margin: 0 auto;}

/* -----------------------------------
 * Slidebars
 * Version 0.10.3
 * http://plugins.adchsm.me/slidebars/
 * http://www.adchsm.me/
 * Released under MIT License
 * http://plugins.adchsm.me/slidebars/license.txt
 * -------------------
 * Slidebars CSS Index
 * 001 - Box Model, Html & Body
 * 002 - Site
 * 003 - Slidebars
 * 004 - Animation
 * 005 - Helper Classes
 * ----------------------------
 * 001 - Box Model, Html & Body
 */

html, body, #sb-site, .sb-site-container, .sb-slidebar {
	/* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

html, body {
	width: 100%;
	overflow-x: hidden; /* Stops horizontal scrolling. */
}

html {
	height: 100%; /* Site is as tall as device. */
}

body {
	min-height: 100%;
	height: auto;
	position: relative; /* Required for static Slidebars to function properly. */
}

/* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
html.sb-scroll-lock.sb-active:not(.sb-static) {
	overflow: hidden;
}

/* ----------
 * 002 - Site
 */

#sb-site, .sb-site-container {
	/* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
	width: 100%;
	min-height: 100vh;
	position: relative;
	z-index: 2; /* Site sits above Slidebars */
	background-color: #ffffff; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */
}

/* Micro clearfix by Nicolas Gallagher, ensures the site container hits the top and bottom of the screen. */
#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
	content: ' ';
	display: table;
}

#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
    clear: both;
}

/* ---------------
 * 003 - Slidebars 背景色
 */

.sb-slidebar {
	height: 100%;
	overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
	position: fixed;
	top: 0;
	z-index: 0; /* Slidebars sit behind sb-site. */
	display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
	background-color: #f2f2f2; /* Default Slidebars background colour, overwrite this with your own css. */
}

.sb-slidebar, .sb-slidebar * {
	-webkit-transform: translateZ( 0px ); /* Fixes issues with translated and z-indexed elements on iOS 7. */
}

.sb-left {
	left: 0; /* Set Slidebar to the left. */
}

.sb-right {
	right: 0; /* Set Slidebar to the right. */
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
	position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
	display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}

.sb-style-overlay {
	z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}

.sb-momentum-scrolling {
	-webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */
}

/* Slidebar widths for browsers/devices that don't support media queries. */
	.sb-slidebar {
		width: 30%;
	}
	
	.sb-width-thin {
		width: 15%;
	}
	
	.sb-width-wide {
		width: 45%;
	}

@media (max-width: 480px) { /* Slidebar widths on extra small screens. */
	.sb-slidebar {
		width: 70%;
	}
	
	.sb-width-thin {
		width: 55%;
	}
	
	.sb-width-wide {
		width: 85%;
	}
}

@media (min-width: 481px) { /* Slidebar widths on small screens. */
	.sb-slidebar {
		width: 55%;
	}
	
	.sb-width-thin {
		width: 40%;
	}
	
	.sb-width-wide {
		width: 70%;
	}
}

@media (min-width: 768px) { /* Slidebar widths on medium screens. */
	.sb-slidebar {
		width: 40%;
	}
	
	.sb-width-thin {
		width: 25%;
	}
	
	.sb-width-wide {
		width: 55%;
	}
}

@media (min-width: 992px) { /* Slidebar widths on large screens. */
	.sb-slidebar {
		width: 30%;
	}
	
	.sb-width-thin {
		width: 15%;
	}
	
	.sb-width-wide {
		width: 45%;
	}
}

@media (min-width: 1200px) { /* Slidebar widths on extra large screens. */
	.sb-slidebar {
		width: 30%;
	}
	
	.sb-width-thin {
		width: 5%;
	}
	
	.sb-width-wide {
		width: 35%;
	}
}

/* ---------------
 * 004 - Animation
 */

.sb-slide, #sb-site, .sb-site-container, .sb-slidebar {
	
	-webkit-transition: -webkit-transform 400ms ease;
	   -moz-transition:    -moz-transform 400ms ease;
	     -o-transition:      -o-transform 400ms ease;
	        transition:         transform 400ms ease;
	
	-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
	-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}


/* --------------------
 * 005 - Helper Classes
 */
 
.sb-hide { 
	display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}

/* --------------------
 * 006 - SIDE
 */


html.sb-active #sb-site, .sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close {
	cursor: pointer;
}

/* Fixed position examples */
#sb-site.top-padding {
	padding-top: 50px;
}

#fixed-top {
	position: fixed;
	top: 0;
	width: 100%;
	height: 50px;
	background-color: red;
	z-index: 4;
}

#fixed-top span.sb-toggle-left {
	float: left;
	color: white;
	padding: 10px;
}

#fixed-top span.sb-toggle-right {
	float: right;
	color: white;
	padding: 10px;
}