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

/*--------------------------------------------------
  body
--------------------------------------------------*/
	
.sp-no01 {
  display: none;
}

.pc-no01 {
  display: block;
}

/*--------------------------------------------------
   header
--------------------------------------------------*/
#header {
	position: fixed;
	z-index: 999;
	min-width: inherit;
}

	#header .inner {
		padding: 0 15px;
		width: inherit;
		height: 50px;
	}

		#header .h-logo {
			float: left;
			display: table;
			height: 50px;
		}

			#header .h-logo h1 {
				display: table-cell;
				vertical-align: middle;
				width: 30%;
			}


			#header .h-logo h2 {
				padding: 0 0 0 10px;
				font-size: 11px;
			}


/*----------hb-menu----------*/

#hb-menu {
	width: 30px;
	height: 50px;
	display: table;
  cursor: pointer;
	z-index: 998;
	position: fixed;
	top: 0;
	right: 10px;
}
	
	#hb-menu .hb-inner {
		display: table-cell;
		vertical-align: middle;
	}


		#hb-menu span {
			display: block;
			margin: auto;
			height: 2px;
			width: 100%;
			background: #34beea;
			border-radius: 2px;
			-webkit-transition: all .5s ease-in-out;
			-moz-transition: all .5s ease-in-out;
			transition: all .5s ease-in-out;
		}

		#hb-menu span:nth-of-type(2),
		#hb-menu span:nth-of-type(3) {
						margin-top: 5px;
		}

  
/* ナビゲーションアイコン：アクティブ */

.hb-open #hb-menu {
}
	
	.hb-open #hb-menu span {
		background: #fff;
	}

	
		.hb-open span:nth-of-type(1) {
						-webkit-transform: translateY(7px) translateX(0) rotate(45deg);
						-ms-transform: translateY(7px) translateX(0) rotate(45deg);
						transform: translateY(7px) translateX(0) rotate(45deg);
		}
	
		.hb-open span:nth-of-type(2) {
						margin-top: 5px;
						opacity: 0;
						-webkit-transform: translateY(9px);
						-ms-transform: translateY(9px);
						transform: translateY(9px);
		}
	
		.hb-open span:nth-of-type(3) {
						-webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
						-ms-transform: translateY(-7px) translateX(0) rotate(-45deg);
						transform: translateY(-7px) translateX(0) rotate(-45deg);
		}

.overlay {
  background: transparent;
  position: fixed;
  pointer-events: none;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
  transition: 0.2s;
}

	.hb-open .overlay {
		background: rgba(255, 255, 255, 0.8);
		pointer-events: auto;
	}

/*----------  sp-g-nav ----------*/
  
  .sp-g-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 888;
  }

	.hb-open .sp-g-nav .g-nav-inner {
		transform: translateX(0);
		-ms-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateZ(0);
		-ms-transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}

		.sp-g-nav .g-nav-inner {
			padding: 36px 0 12px 0;
			width: 75%;
			height: 100%;
			box-sizing: border-box;
			-ms-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			font-size: 14px;
			position: fixed;
			top:0;
			right: 0;
			z-index: 888;
			overflow-x: hidden;
			overflow-y: auto;
			transition: .5s;
			transform: translateX(100%);
			-ms-transform: translateX(100%);
			-webkit-transform: translateX(100%);
			transform: translateZ(0%);
			-ms-transform: translateZ(0%);
			-webkit-transform: translateZ(0%);
			z-index: 10;
			background: #34beea;
		}

				.sp-g-nav .nav01 a {
					padding: 12px 24px;
					display: block;
					font-size: 14px;
					color: #fff;
					font-weight: bold;
				}

	
				.sp-g-nav .nav02 {
					padding: 24px 24px 12px 24px;
				}
	
					.sp-g-nav .nav02 .h-btn {
						display: block;
						line-height: 40px;
						text-align: center;
						font-size: 14px;
						position: relative;
						color: #fff;
						font-weight: bold
					}

						.sp-g-nav .nav02 .h-btn::before {
							position: absolute;
							margin: -4px 0 0 0;
							top: 50%;
							right: 14px;
							display: block;
							content: '';
							width: 6px;
							height: 6px;
							border-top: 1px solid;
							border-right: 1px solid;
							-webkit-transform: rotate(45deg);
							transform: rotate(45deg);
						}
	
	
						.sp-g-nav .nav02 .h-btn01 {
							line-height: 38px;
							border: solid 2px;
							border-color: #fff;
						}


						.sp-g-nav .nav02 .h-btn02 {
							background: #fff;
							color: #34beea;
						}

							.sp-g-nav .nav02 .h-btn02::before {
								border-color: #34beea;
								right: 16px;
							}
	
	

/*--------------------------------------------------
  btn
--------------------------------------------------*/

.btn {
}

	.btn01 {
		height: 36px;
		width: 36px;
	}

		.btn01::before {
			margin: -4px 0 0 0;
			right: 15px;
		}

	
/*--------------------------------------------------
   main
--------------------------------------------------*/ 
#main {
	padding: 50px 0 0 0;
	min-width: inherit;
}

/*--------------------------------------------------
   mv
--------------------------------------------------*/

.top .mv {
}

	.top .mv .mv-img img {
		height: 300px;
	}

/*----------pager----------*/


.top .mv .slide-dots {
  position: absolute;
  text-align: center;
  margin: 0 0 0 -39px;
  z-index: 8888;
  bottom: -35px;
  left: 50%;
}

	.top .mv .slide-dots li {
		display: inline-block;
		padding: 0 8px;
	}

	.top .mv .slide-dots li button {
		width: 6px;
		height: 6px;
		background: #aaa;
		border-radius: 50%;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	.top .mv .slide-dots .slick-active button {
		width: 12px;
		height: 12px;
		background: #34beea;
		position: relative;
		top: -3px;
	}

	
/*----------scroll----------*/

.scroll {
	margin: -60px 0 0 0;
}

	.scroll a {
		font-size: 13px;
	}

		.scroll a span {
			position: absolute;
			top: 16px;
			left: 50%;
			width: 12px;
			height: 12px;
			margin-left: -6px;
		}

			.scroll a span:nth-of-type(2) {
				top: 24px;
			}
			.scroll a span:nth-of-type(3) {
				top: 32px;
			}


/*--------------------------------------------------
 top  sec01
--------------------------------------------------*/ 
.top .sec01 {
	margin: 85px 0 0 0;
}

	.top .sec01 .inner {
		padding: 30px 0 0 0;
	}

	.top .sec01 .sec-main {
		padding: 0 20px;
	}
	
		.top .sec01 .block-wrap {
			width: inherit;
			float: inherit;
		}

			.top .sec01 .block {
				margin: 0 0 20px 0;
			}

				.top .sec01 .block .img-area img {
					height: 240px;
				}

				.top .sec01 .block .text-area {
					padding: 15px;
				}

						.top .sec01 .block .block-ttl .ttl-sub {
							margin: 0 0 14px 0;
							font-size: 24px;
							line-height: 1.0em;
						}


								.top .sec01 .block .block-ttl .ttl-sub::before {

									left: 2px;
									bottom: -8px;
									width: 20px;
									height: 2px;
								}

	
/*--------------------------------------------------
  cv-area
--------------------------------------------------*/
.cv-area {
	top: -160px;
}

	.cv-area .img-area {
	}

		.cv-area .img-area img {
			width: 100%;
			height: 340px;
		}

		.cv-area .img-area .over-l-w {
			height: 340px;
		}

	
	.cv-area .btn-area {
		bottom : 20px;
	}


		.cv-area  .btn-area ul {
			display: inherit;
			width: inherit;
		}

			.cv-area .btn-area li {
				display: inherit;
				width: inherit;
			}

				.cv-area .cv-btn {
					line-height: 60px;
					font-size: 18px;
				}


					.cv-area .cv-btn::before {
						margin: -4px 0 0 0;
						top: 50%;
						right: 15px;
						width: 6px;
						height: 6px;
					}


						.cv-area .cv-btn01 {
							line-height: 56px;
							border: solid 2px;
							border-color: #34beea;
							color: #34beea;
						}

						.cv-area .cv-btn02 {
							background: #34beea;
							color: #fff;
						}

							.cv-area .cv-btn02::before {
								right: 17px;
								border-color: #fff;
							}

/*--------------------------------------------------
  footer
--------------------------------------------------*/

#footer {
	margin: -120px 0 0 0;
}

	#footer .inner {
	}

		#footer .f-logo {
			margin: auto;
			display: inherit;
		}

			#footer .f-logo h1 {
				margin: auto;
				display: inherit;
				width: 50%;
			}


			#footer .f-logo h2 {
				padding: 10px 0 0 0;
				display: inherit;
				text-align: center;
				line-height: 1.2em;
			}


		#footer .f-copy {
			margin: 20px 0 0 0;
			line-height: 50px;
			color: #34beea;
			text-align: center;
			border-top: #34beea solid 2px;
		}

			#footer .f-copy .copy-inner {
			}



/*--------------------------------------------------
   page-top
--------------------------------------------------*/
.page-top {
  width: 40px;
  height: 40px;
  right: 20px;
  bottom: 20px;
}
  
    .page-top a {
			padding: 16px 0 0 0;
      width: 40px;
      height: 24px;
			font-size: 10px;
			line-height: 1.2em;
    }
  
        .page-top a::before {
          margin: 0 0 0 -4px;
          top: 18px;
          left: 50%;
          width: 6px;
          height: 6px;
        }
  


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
lower
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*--------------------------------------------------
   main
--------------------------------------------------*/ 
.lower {
	min-width: inherit;
}


/*--------------------------------------------------
   lower mv
--------------------------------------------------*/

.lower .mv {
	margin: 0 0 10px 0;
	position: relative;
}

  .lower .mv .inner {
  }

		.lower .mv .mv-img {
			position: absolute;
			top: 0;
			background: #34beea;
			width: 100%;
		}

			.lower .mv .mv-img img {
				width: 100%;
				height: 180px;
				opacity: 0.3;
				filter: alpha(opacity=30);
				-ms-filter: "alpha(opacity=30)";
			}




		.lower .mv .mv-ttl {
			display: table;
			width: 100%;
			height: 180px;
			color: #fff;
			position: relative;
			z-index: 888;
		}

			.lower .mv .ttl-inner {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}


			.lower .mv .ttl-sub {
				font-size: 38px;
				line-height: 1.2em;
			}

				.lower .mv .ttl-sub p {
					font-weight: bold;
				}


			.lower .mv .ttl-main {
				margin: 4px 0 0 0;
				font-size: 16px;
				line-height: 1.5em;
			}

				.lower .mv .ttl-main h2 {
				}

/*--------------------------------------------------
 l-ttl
--------------------------------------------------*/

.l-ttl {
	color: #34beea;
}

	.l-ttl .ttl-main {
		margin: 0 0 40px 0;
		position: relative;
		font-size: 22px;
		line-height: 1.4em;
		text-align: center;
	}
	
	.l-ttl .ttl-main02 {
		font-size: 20px;
	}

		.l-ttl .ttl-main::before {
			position: absolute;
			margin: 0 0 0 -12px;
			left: 50%;
			bottom: -15px;
			display: block;
			content: '';
			width: 24px;
			height: 2px;
			background: #34beea;
		}

		.l-ttl .ttl-main h3 {
			font-weight: bold;
		}

	
	
/*--------------------------------------------------
 parts
--------------------------------------------------*/

/*--------------------------------------------------
 parts01
--------------------------------------------------*/

.parts01 {
	padding: 30px 0 25px 0;
	font-size: 14px;
	line-height: 2.0em;
}

	.parts01 .parts-main {
		padding: 0 20px;
		width: inherit;
	}

		.parts01 .parts-main h4 {
			font-size: 16px;
			margin: 10px 0;
			text-align: left;
		}
	
		.parts01 .parts-main p {
			margin: 10px 0;
		}

		.parts01 .parts-main ol {
			margin: 10px 0;
		}

		.parts01 .parts-main ol li{
			padding: 0 0 12px 22px;
			text-indent: -22px;
			line-height: 1.8em;
		}
	
		.parts01 .parts-main ul {
			margin: 10px 0;
		}

			.parts01 .parts-main ul li {
				padding: 0 0 12px 24px;
				line-height: 1.8em;
			}

				.parts01 .parts-main ul li::before {
					margin: 0 0 0 0;
					left: 0px;
					top: 6px;
					width: 16px;
					height: 16px;
					border-radius: 50%;
				}
	
	.parts01 .img-area {
		padding: 10px 0 10px 0;
	}


/*--------------------------------------------------
 parts02
--------------------------------------------------*/

.parts02 {
	padding: 30px 0 25px 0;
	font-size: 14px;
	line-height: 1.6em;
}

	.parts02 .parts-main {
		padding: 0 20px;
		width: inherit;
	}

		.parts02 .parts-main table {
			margin: 40px 0 15px 0;
		}

			.parts02 .parts-main th {
				display: block;
				font-weight: bold;
				width: inherit;
				padding: 15px 0 0 0;
			}

			.parts02 .parts-main td {
				display: block;
				padding: 5px 0 15px 0;
			}
	
/*--------------------------------------------------
 parts03
--------------------------------------------------*/

.parts03 {
	padding: 30px 0 25px 0;
	font-size: 14px;
	line-height: 1.6em;
}

	.parts03 .parts-main {
		padding: 0 20px 0 40px;
		width: inherit;
		max-width: inherit;
	}


		.parts03 dl {
			display: inherit;
			width: 100%;
			position: relative;
		}

			.parts03 dt {
				display: inherit;
				width: inherit;
				font-size: 28px;
				line-height: 1.0em;
			}

				.parts03 dt::before {
					top: 10px;
					right: inherit;
					left:-24px;
					width: 14px;
					height: 14px;
				}

				.parts03 dt::after {
					display: none;
				}

					.parts03 dl:last-of-type dt::after {
						top: -36px;
						height: 100%;
					}

				.parts03 dl::after {
					position: absolute;
					top: 10px;
					left: -18px;
					display: block;
					content: '';
					width: 2px;
					height: 100%;
					background: #34beea;
				}
	
					.parts03 dl:last-of-type::after {
						top: -30px;
						height: 100%;
					}
	

			.parts03 dd {
				display: inherit;
				padding: 2px 0 20px 0;
				width: inherit;
			}

			.parts03 .bg-area img {
				height: 2000px;
			}

/*--------------------------------------------------
 parts04
--------------------------------------------------*/

.parts04 {
	padding: 30px 0 25px 0;
	font-size: 14px;
	line-height: 1.6em;
}

	.parts04 .parts-main {
		padding: 0 20px;
		display: inherit;
	}

		.parts04 .box {
			width: inherit;
		}

			.parts04 .box-inner {
				margin: 0 0 20px 0;
			}

				.parts04 .box .text-area {
					padding: 20px;
				}

			.parts04 .bg-area img {
				height: 2000px;
			}

/*--------------------------------------------------
 parts05
--------------------------------------------------*/

.parts05 {
	padding: 30px 0 50px 0;
	line-height: 1.8em;
}

	.parts05 .parts-main {
		padding: 0 20px;
		width: inherit;
	}

		.parts05 .parts-ttl {
			margin: 0 0 20px 0;
			font-size: 18px;
			line-height: 1.6em;
			text-align: left;
		}


			.parts05 .block01 .img-area {
				float: inherit;
				width: inherit;
			}

				.parts05 .block01 .img-area img {
					width: 100%;
					height: 200px;
				}

			.parts05 .block01 .text-area {
				float: inherit;
				width: inherit;
			}

				.parts05:nth-of-type(even) .img-area,
        .parts05:nth-of-type(even) .text-area {
					width: inherit;
				}

				.parts05 .block01 .text-inner {
					padding: 15px;
				}

					.parts05 .block01 .text01 p {
						margin: 0 0 4px 0;
					}

					.parts05 .block01 .text02 p {
						margin: 0 0 0 0;
						font-size: 20px;
					}

					.parts05 .block01 .text03 p {
						margin: 0 0 10px 0;
						font-size: 14px;
					}
	
	

		.parts05 .block02 {
			padding: 20px 0 0 0;
		}

			.parts05 .block02 .text-more {
				padding: 0 0 10px 0;
			}


					.text-more-btn::before {
						margin: 0 0 0 -50px;
						font-size: 14px;
					}

					.text-more-btn.open::before {
						margin: 0 0 0 -40px;
						font-size: 14px;
					}


/*--------------------------------------------------
  l-cv-area
--------------------------------------------------*/
.l-cv-area {
	padding: 50px 0 0 0
}

	.l-cv-area .inner {
		padding: 0 20px;
		width: inherit;
	}

		.l-cv-area .inner ul {
			display: inherit;
			width: 100%;
		}

			.l-cv-area .inner li {
				display: inherit;
				width: inherit;
			}

				.l-cv-area .cv-btn {
					line-height: 60px;
					font-size: 18px;
				}


					.l-cv-area .cv-btn::before {
						margin: -4px 0 0 0;
						top: 50%;
						right: 15px;
						width: 6px;
						height: 6px;
					}


						.l-cv-area .cv-btn01 {
							line-height: 56px;
							border: solid 2px;
							border-color: #34beea;
							color: #34beea;
						}

						.l-cv-area .cv-btn02 {
							background: #34beea;
							color: #fff;
						}

							.l-cv-area .cv-btn02::before {
								right: 17px;
								border-color: #fff;
							}
/*--------------------------------------------------
  lower footer
--------------------------------------------------*/

	.lower #footer {
		margin: 40px 0 0 0;
	}
	
	
	
}