@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/**
 * layout
 */
 body{
	font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese', sans-serif;
 }
 
/** header **/

.header .header-top {
	color:#fff;
	overflow:hidden;
	background-color:#333;
}

.header .header-top h1{
	float:left;
	font-size:11px;
	font-weight:normal;
}

.header .header-top ul{
	float:right;
}

.header .header-top ul li{
	display:inline-block;
}

.header .header-top ul li a{
	color:#fff;
	display:block;
	width:100px;
	text-align:center;
}

.header {...}
	
	/* 480px以上用（タブレット/PC）の記述 */
	@media screen and (min-width: 480px) {
  		.headerBox1220 {
    		width:1220px;
			margin:0 auto;
			overflow:hidden;
  		}
		
		.headerBox1220 h2{
			padding:10px 0 20px 0;
		}
		
		.header-middle .headerBox1220 .LeftBox,
		.header-middle .headerBox1220 .menu{
			display:none;
		}
		
	}
	
	/* 479px以下用（スマートフォン用）の記述 */
	@media screen and (max-width: 479px) {
		.header .header-top {
			display:none;
  		}
		
		.header-middle{
			background-color:#fff;
		}
		
		.header-middle .headerBox1220{
			overflow:hidden !important;
			margin:0;
		}
		
		.header-middle .headerBox1220 h2{
			float:left;
			padding:5px 0;
		}
		
		.header-middle .LeftBox{
			float:right;
			padding:18px 10px 0 0;
		}
		
		.LeftBox .button-toggle{
			padding:5px 10px;
			display:block;
			border:#ccc solid 1px;
		}
		
		.LeftBox .button-toggle:hover{
			cursor:pointer;
		}
		
		.header-middle .menu{
			clear:both;
		}
		
		.header-middle ul li a{
			display:block;
			padding:15px 10px;
			background-color:#333;
			border-bottom:#ccc solid 1px;
			color:#fff;
		}
	}

/**  slider_contents  **/

.slider_contents {...}

	/* 480px以上用（タブレット/PC）の記述 */
	@media screen and (min-width: 480px) {
		.barnnerBox{
			height:700px;
			background: url(../img/slider/2.jpg) no-repeat center center;
			background-size: 100% 100%;
			text-align:center;
			color:#fff;
			margin-bottom:50px;
		}
		
		.barnnerBox div{
			text-align:center;	
			width:1220px;
			margin:0 auto;
		}

		.barnnerBox span:first-child{
			display:block;
			font-size:58px;
			position:relative;
			top:150px;
			font-weight:100; 
			letter-spacing:0.1em;
		}

		.barnnerBox span:last-child{
			font-family: 'Open Sans Condensed', sans-serif;
			display:block;
			font-size:20px;
			position:relative;
			top:200px;
		}
	}
	
	/* 479px以下用（スマートフォン用）の記述 */
	@media screen and (max-width: 479px) {
		.barnnerBox{
			width: 100%;
			padding:10% 0;
			background: url("../img/slider/2.jpg") no-repeat center center;
			background-size: 100% 100%;
			text-align:center;
			color:#fff;
			font-size:22px;
			margin-bottom:10%;
		}
		
		.barnnerBox span:first-child{
			display:block;
		}

		.barnnerBox span:last-child{
			font-family: 'Open Sans Condensed', sans-serif;
			font-size:12px;
		}
		
	}

.main{
    clear:both;
}


	@media screen and (min-width: 480px)  {
		.as{
		position:relative;
			left:50%;
			margin-bottom:200px;
		}
		
		.grid {
  			transform: rotateX(-35deg) rotateY(-45deg);
			}
			
		.grid, .grid * {
			position: absolute;
			top: 10px;
			transform-style: preserve-3d;
		}
		.cube:nth-child(1) {
 		 transform: translate3d(-4.875em, 0, -4.875em);
		}
		.cube:nth-child(1) .squisher {
 		 animation-delay: 0.225s;
		}
		.cube:nth-child(2) {
 		 transform: translate3d(-1.625em, 0, -4.875em);
		}
		.cube:nth-child(2) .squisher {
 		 animation-delay: 0.3s;
		}
		.cube:nth-child(3) {
 		 transform: translate3d(1.625em, 0, -4.875em);
		}
		.cube:nth-child(3) .squisher {
		 animation-delay: 0.375s;
		}
		.cube:nth-child(4) {
 		 transform: translate3d(4.875em, 0, -4.875em);
		}
		.cube:nth-child(4) .squisher {
 		 animation-delay: 0.45s;
		}
		.cube:nth-child(5) {
		  transform: translate3d(-4.875em, 0, -1.625em);
		}
		.cube:nth-child(5) .squisher {
		  animation-delay: 0.15s;
		}
		.cube:nth-child(6) {
 		 transform: translate3d(-1.625em, 0, -1.625em);
		}
		.cube:nth-child(6) .squisher {
 		 animation-delay: 0.225s;
		}
		.cube:nth-child(7) {
 		 transform: translate3d(1.625em, 0, -1.625em);
		}
		.cube:nth-child(7) .squisher {
 		 animation-delay: 0.3s;
		}
		.cube:nth-child(8) {
 		 transform: translate3d(4.875em, 0, -1.625em);
		}
		.cube:nth-child(8) .squisher {
		  animation-delay: 0.375s;
		}
		.cube:nth-child(9) {
		  transform: translate3d(-4.875em, 0, 1.625em);
		}
		.cube:nth-child(9) .squisher {
 		 animation-delay: 0.075s;
		}
		.cube:nth-child(10) {
 		 transform: translate3d(-1.625em, 0, 1.625em);
		}
		.cube:nth-child(10) .squisher {
 		 animation-delay: 0.15s;
		}
		.cube:nth-child(11) {
 		 transform: translate3d(1.625em, 0, 1.625em);
		}
		.cube:nth-child(11) .squisher {
		  animation-delay: 0.225s;
		}
		.cube:nth-child(12) {
 		 transform: translate3d(4.875em, 0, 1.625em);
		}
		.cube:nth-child(12) .squisher {
 		 animation-delay: 0.3s;
		}
		.cube:nth-child(13) {
 		 transform: translate3d(-4.875em, 0, 4.875em);
		}
		.cube:nth-child(13) .squisher {
 		 animation-delay: 0s;
		}
		.cube:nth-child(14) {
 		 transform: translate3d(-1.625em, 0, 4.875em);
		}
		.cube:nth-child(14) .squisher {
 		 animation-delay: 0.075s;
		}
		.cube:nth-child(15) {
		  transform: translate3d(1.625em, 0, 4.875em);
		}
		.cube:nth-child(15) .squisher {
 		 animation-delay: 0.15s;
		}
		.cube:nth-child(16) {
 		 transform: translate3d(4.875em, 0, 4.875em);
		}
		.cube:nth-child(16) .squisher {
 		 animation-delay: 0.225s;
		}
		.cube__face {
 		 margin: -1.375em;
 		 width: 2.75em;
 		 height: 2.75em;
		}
		.cube__face:nth-child(1) {
 		 transform: rotateX(90deg) translateZ(1.375em);
 		 background: #fff;
		}
		.cube__face:nth-child(2) {
 		 transform: rotateY(90deg) translateZ(1.375em);
		  background: #a9a9a9;
		}
		.cube__face:nth-child(3) {
		  transform: translateZ(1.375em);
		  background: #dcdcdc;
		}

		.squisher {
 		 transform-origin: 0 1.375em;
 		 transform: scaleY(0);
		  animation: ani 1.5s ease-in-out infinite;
		}

		@keyframes ani {
 		 0%, 50%, 100% {
  		  transform: scaleY(0);
 		 }
 		 25% {
 		   transform: scaleY(0.5);
 		 }
		}
	}

.footer{
	padding:30px 0;
}

.footer .Copyright{
	text-align:center;
	color:#999;
	font-size:12px;
}