/* General Demo Style */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);


@font-face {
    font-family: 'AnimalsNormal';
    src: url('fonts/animals-webfont.eot');
    src: url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/animals-webfont.woff') format('woff'),
         url('fonts/animals-webfont.ttf') format('truetype'),
         url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
}


header {
	background-color:#FFFFFF;
}

a {
	color: #555;
	text-decoration: none;
}

.container {
	width: 100%;
	position: relative;
}

.container.demo-2 {
	background-color:#FFFFFF;
	border-bottom:2px solid #509ad1 #333;
}

.clr {
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}

.main {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.container > header,
.content-wrapper {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}

.content-wrapper p{
	padding-top: 30px;
	line-height: 26px;
}

.container > header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
}

.container > header h1 span {
	display: block;
	font-size: 20px;
	font-weight: 300;
}


/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	font-family: Cambria, Georgia, serif;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Demo Buttons Style */
.codrops-demos {
	float: right;
	padding-top: 10px;
}

.demo-1 .codrops-demos {
	position: absolute;
	z-index: 2000;
	top: 30px;
	left: 30px;
}

/* トップ 右上のコンタクトボタン群　*/


		.codrops-demos a {
			display: inline-block;
			margin: 10px;
			color: #333;
			font-weight: 700;
			line-height: 30px;
			border-bottom: 4px solid transparent;
		}
		
		.codrops-demos p {
			display: inline-block;
			margin: 10px;
			color: #333;
			font-weight: 700;
			line-height: 30px;
			border-bottom: 4px solid transparent;
		}


		.codrops-demos a {
			padding:5px 30px 5px 20px;;
			height:40px;
			float:left;
		}
		

		.codrops-demos p {
			padding:5px 10px 5px 0px;;
			height:40px;
			float:left;
		}
		
		.top_menu_btn_line {
			
			border-right:1px solid #666;
			padding-right:10px;
			
		}
		
			.codrops-demos a:hover {
				border-bottom:none;
				color:#33CCFF;
		}



/* section1 */

/* section2 */

/* section3 */

/* section4 */


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



/* section1 */

.w1000 {
	width:90%;
}

/* section2 */

/* section3 */

/* section4 */


/* スマホ用　プルダウンメニュー */
/* スマホ用　プルダウンメニュー */
/* スマホ用　プルダウンメニュー */

    ul,
    li {
      margin: 0;
      padding: 0;
    }

    .wrapper {
      box-sizing: border-box;
      padding: 0 15px;
    }

    header {
		  background-color:#fff;
		  color: #666;
		  padding: 5px;
		  position: relative;
		  height:65px;
    }

    footer {
      background: #fff;
      padding: 1rem;
    }
    /*nabi開閉部分*/

    .gnav li {
      border-bottom: 1px solid #333;
    }

    .gnav li a {
      display: block;
      text-decoration: none;
	  font-size:12px;
	  letter-spacing:0.1em;
      /* (44-16)/2=14px */
      padding: .875rem 1rem;
	  color:#333333;
	  
    }

	.gnav li a:hover {
		color:#13b4cf;
		padding-left:20px;
	}
	
	.gnav {
	
      list-style-type: none;
      background: #fff;
      display: block;
      width: 80%;
      overflow-x: hidden;
      overflow-y: auto;
	  position:absolute;
      left: 0;
      top: 0;
      z-index: 9999999;
      visibility: hidden;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -o-transform: translateX(-100%);
      transform: translateX(-100%);
      webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: all .5s linear;
      -moz-transition: all .5s linear;
      transition: all .5s linear;
    }

    .gnav.on {
      visibility: visible;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px);
    }

    .modal {
      background-color: rgba(255, 255, 255, .5);
      width: 100%;
      height: 100%;
      left: 0;
      opacity: .1;
      position: fixed;
      top: 0;
      z-index: 98;
      visibility: hidden;
      webkit-transition: visibility 0 linear .4s, opacity .4s;
      -moz-transition: visibility 0 linear .4s, opacity .4s;
      transition: visibility 0 linear .4s, opacity .4s;
      webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
    }

    .modal.on {
      opacity: 1;
      webkit-transition-delay: 0;
      -moz-transition-delay: 0;
      transition-delay: 0;
      visibility: visible;
    }
      /*ハンバーガーボタン*/

    .icon-animation {
      width: 44px;
      height: 44px;
      display: block;
      cursor: pointer;
      float: right;
      position: absolute;
      right: .5rem;
      text-align: center;
      top: .5rem;
    }

    .icon-animation span {
      width: 39px;
      height: 1px;
      display: block;
      background: #666;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-13px);
      -ms-transform: translateY(-13px);
      transform: translateY(-13px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(13px);
      -ms-transform: translateY(13px);
      transform: translateY(13px);
    }

    .is-open .middle {
      background: rgba(51, 51, 51, 0);
    }

    .is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }
	

/* スマホ版メニューの設定　header_sp.htmlの書式設定　*/
  
 a.res_menu {
	 color:#CCC;
	 text-decoration:none;
 }
  
/* スマホ用　プルダウンメニュー */
/* スマホ用　プルダウンメニュー */
/* スマホ用　プルダウンメニュー */