@charset "UTF-8";

$color-bg: #F9F9F9;
$color-main: #e1e0d9;
$color-y: #faf7dd;
$color-b: #0F0F0E;
$color-gold: #817252;

$font-YuGo:  cardo, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium" , sans-serif;

/* ==========================================================================

	common style
	
========================================================================== */
html {
  font-size: 62.5%; }

body {
  font-size: 1.2rem;
  background: #fff; 
}

main {
  position: relative; 
}

input:-internal-autofill-selected {
	background-color: #fbfbfd !important; }

a:hover {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
	transition: all  1s; }


body {
	width: 100%;
	margin: 0;
	font-family: cardo, ryo-display-plusn,"游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium" , sans-serif;
	line-height: calc(33 / 14);
	letter-spacing: 0.1em;
	font-size: 1.4rem;
	color: #231815;
	-webkit-text-size-adjust: 100%;
	transition: .25s ease-out;
	background: url("../img/bg.jpg");
}

.linkbox{
	background-color: #acb7cc;
	border: 2px solid #acb7cc;
	align-items: center;
	padding: 13px 31px;
	color: #fff;
	font-size: 12px;
	z-index: 10;
	position: relative;
	cursor: pointer;
    border-radius: 0;
	@media only screen and (max-width: 768px) {
	    align-items: center;
		padding: 15px 30px;
		border-radius: 0;
		font-size: 12px;
		z-index: 10;
		position: relative;
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
	&:before{
		content: '';
		width: 20px;
		height: 2px;
		position: absolute;
		left: 82%;
		z-index: 10;
		top: 49%;
		background: #fff;
		-webkit-transform: translate(0%, -50%); /* Safari用 */
		transform: translate(0%, -50%);
		-webkit-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
		  -moz-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
		  -o-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
		  transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
		@media only screen and (max-width: 768px) {
			right: 20px;
		}
	}
	@media only screen and (min-width: 769px){
		&:hover{
			color: #acb7cc;
			background-color: rgba(255,255,255,0.37);
			border: 2px solid #acb7cc;
		}
		&:hover::before{
			background: #acb7cc;
			width: 30px;
		}
	}
}


/* ================================================================================

 *  page top
　
   ================================================================================ */


.pagetop{
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index:99999;
	background: rgba(255,255,255,0.20);
	width: 60px;
	height: 60px;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all  1s;
	@media only screen and (max-width: 768px){
		width: 45px;
		height: 45px;
	}
	@media only screen and (min-width: 769px){
		&:hover{
			background: rgba(255,255,255,0.80);
		}
	}
	&:after{
		content: "";
		width: 10px;
		height: 10px;
		border-top: 2px solid #262626;
		border-right: 2px solid #262626;
		position: absolute;
		top: 54%;
		left: 44%;
		-webkit-transform: translateY(-50%) rotate(-45deg);
		-moz-transform: translateY(-50%) rotate(-45deg);
		-ms-transform: translateY(-50%) rotate(-45deg);
		-o-transform: translateY(-50%) rotate(-45deg);
		transform: translateY(-50%) rotate(-45deg);
		@media only screen and (max-width: 768px){
			left: 41%;
		}
	}
}

/* ================================================================================

 *  header
　
   ================================================================================ */
header{
	width: 100%;
	padding: 30px 0 30px;
	margin: 0 auto;
	position: fixed;
    top: 0;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 9999;
	@media only screen and (max-width: 768px){
		padding: 16px;
		position: relative;
	}
	.site_inner{
		padding: 0 50px;
		height: 100%;
		margin: 0 auto;
		position: relative;
		@media only screen and (max-width: 768px){
		    padding: 0;
		}
	}
	.logo{
		width: 228px;
		cursor: pointer;
		img{
			vertical-align: top;
		}
		margin: 0 auto;
		@media only screen and (max-width: 768px){
			margin: 2px auto 0;
   			width: 112px;
			height: auto;
		}
	}
	.site-gnav{
		margin: 20px 0 0 0;
		position: relative;
		@media only screen and (max-width: 768px){
			display: none;
		}
		li{
			font-size: 12px;
			line-height: 1;
			font-weight: bold;
			font-style: normal;
			margin: 0 10px;
			&::after {
				position: absolute;
				bottom: -5px;
				left: 47%;
				content: '';
				width: 0;
				height: 1px;
				background-color: #262626;
				transition: .3s;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
			}
			@media only screen and (min-width: 769px){
				&:hover::after{
					width: 100%;
				}
			}
		}
		.learning_menu{
			background-size: contain;
			background-repeat: no-repeat;
			background-position: left top;
		}
	}
	.bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 103px;
		height: 55px;
		background-color: #fff;
	}
}

@media only screen and (min-width: 769px){
	header.is-animation {
		background-color: rgba(255, 255, 255, 0.9);
		padding: 10px 0 10px;
		.site_inner{
			height: 33px;
		}
		.logo{
			position: absolute;
			top: -11px;
			left:60px;
			width: 102px;
			display: none;
		}
	}
}


/* ================================================================================

 *  footer
　
   ================================================================================ */

footer{
	background: #383838;
	padding: 100px 0px 30px;
	position: relative;
	margin: 150px auto 0;
	overflow: hidden;
	@media only screen and (max-width: 768px){
		margin: 100px auto 0;
		padding: 100px 0px 30px;
	}
	.footer_img{
		position: absolute;
		right: -1px;
		top: 60px;
	}
	.footer_contents{
		margin:200px 0 0;
		.logo{
			width: 208px;
			cursor: pointer;
		}
		.address{
			font-size: 12px;
			line-height: 1.5;
		}
		.tel{
			font-size: 12px;
		}
		.copy{
			font-size: 10px;
			margin: 30px 0 0;
		}
		*{
			color: #ffffff;
		}
	}
}


/* ================================================================================

 *  overlay_menu 
　
   ================================================================================ */

.side_menu{
	display: none;
    pointer-events: none;
	@media only screen and (max-width: 768px){
		z-index: 199999 !important;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	&__bar{
		display: none;
		@media only screen and (max-width: 768px){
			position: fixed;
			top: 6px;
    		left: 2px;
			width: 55px;
			height: 55px;
			display: flex;
			pointer-events: all;
			z-index: 199999;
			align-items: center;
		}
	}
}

.overlay_menu{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: -100%;
	-webkit-transition: all 440ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 440ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 440ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 440ms cubic-bezier(0.165, 0.84, 0.44, 1);
	pointer-events: auto;
	overflow: hidden;
	.overlay_menu_inner{
		width: 100%;
		height: 100vh;
		background: url("../img/bg.jpg");
		z-index: 1000;
		position: relative;
	}
	.contents{
		width: 100%;
		height: 100%;
		z-index: 1000;
		position: relative;
		.bg{
			bottom: 0;
			width: 100%;
			position: absolute;
		}
	}
	.menu_bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 129px;
   	    height: 67px;
		background-color: #fff;
	}
	.nav__menu{
		width: auto;
		padding: 90px 15% 30px;
		li{
			font-size: 1.1rem;
			position: relative;
			width: 100%;
			display: block;
			border-bottom: 1px solid rgba(255, 255, 255, 0.9);
			padding: 22px 0 22px 0;
			box-sizing: border-box;
			color: #262626;
			font-size: 13px;
			font-weight: 700;
			line-height: 120%;
			p{
				display: inline-block;
				position: relative;
				line-height: 1;
				&:after{
					height: 2px;
					left: 0;
					bottom: -5px;
					width: 0;
					content: '';
					position: absolute;
					z-index: 100;
					background: #000;
				}
			}
		}
	}
	.copy{
		padding: 20px 15% 30px;
		font-size: 10px;
	}
}

.nav-open .overlay_menu{
	transform: translate3d(100%, 0, 0);
	@media only screen and (max-width: 768px){
		transform: translate3d(100%, 0, 0);
	}
}


/* hamburger seting */
.hamburger{
	position: relative;
	display: block;
	width: 1.5vw;
	height: 14px; 
	left: 1vw;
	@media only screen and (max-width: 768px){
		position: relative;
		display: block;
		width: 20px;
		height: 14px;
		left: 16px;
	}
	.bdr{
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 4px;
		background: #000;
		transition: all .5s; 
		&:nth-child(1) {
			top: 0; 
		}
		&:nth-child(2) {
			top: 6px; 
		}
		&:nth-child(3) {
			bottom: 0; 
		}
	}
	&.is-active .bdr{
		background: #000;
		&:nth-child(1) {
			transform: translateY(7px) rotate(-45deg);
		}
		&:nth-child(2) {
			opacity: 0; 
		}
		&:nth-child(3) {
			transform: translateY(-5px) rotate(45deg);
		}
	}
}



/* ================================================================================

 *  hero_area
　
   ================================================================================ */

.hero_area{
	width: 100%;
	position: relative;
	overflow: hidden;
	max-height: 80vh;
	&__img{
		img{
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			opacity: 0;
			-webkit-filter: blur(10px) brightness(1.7);
			filter: blur(10px) brightness(1.7);
		}
	}
	&__txt{
		position: absolute;
		top: 36%;
		left: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		opacity: 0;
		-webkit-filter: blur(5px) brightness(1);
		filter: blur(5px) brightness(1);
		width: 100%;
		height: 100%;
		.title{
			width: 20%;
			margin: 0 auto;
			max-width: 320px;
			@media only screen and (max-width: 768px){
				width: 47%;
			}
		}
		.title_en{
			width: 13%;
			margin: 20px auto 0;
			max-width: 201px;
			@media only screen and (max-width: 768px){
			    width: 32%;
				margin: -1px auto 0;
				max-width: 201px;
			}
		}
	}
}

.is-load {
	.hero_area{
		width: 100%;
		position: relative;
		&__img{
			img{
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				opacity: 1;
				-webkit-filter: blur(0px) brightness(1);
				filter: blur(0px) brightness(1);
				-webkit-transition: opacity 1.2s ease 0s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0s, -webkit-filter 1.2s ease 0s;
				transition: opacity 1.2s ease 0s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0s, -webkit-filter 1.2s ease 0s;
				transition: transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0s, opacity 1.2s ease 0s, filter 1.2s ease 0s;
				transition: transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0s, opacity 1.2s ease 0s, filter 1.2s ease 0s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0s, -webkit-filter 1.2s ease 0s;
			}
		}
		&__txt{
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			opacity: 1;
			-webkit-filter: blur(0px) brightness(1);
			filter: blur(0px) brightness(1);
			-webkit-transition: opacity 1.5s ease 1.3s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1.3s, -webkit-filter 1.5s ease 1.3s;
			transition: opacity 1.5s ease 1.3s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1.3s, -webkit-filter 1.5s ease 1.3s;
			transition: transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1.3s, opacity 1.5s ease 1.3s, filter 1.5s ease 1.3s;
			transition: transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1.3s, opacity 1.5s ease 1.3s, filter 1.5s ease 1.3s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1.3s, -webkit-filter 1.5s ease 1.3s;
		}
	}
}


.site_inner{
	width: 100%;
	padding: 0 50px;
	max-width: 1280px;
	margin: 0 auto;
	@media only screen and (max-width: 768px){
		padding: 0 20px;
	}
}


main{
	margin-top: 156px;
	@media only screen and (max-width: 768px){
		margin-top: 5px;
	}
	.category_title{
		font-size: 23px;
		font-weight: bold;
		@media only screen and (max-width: 768px){
			font-size: 20px;
		}
	}
	.category_title_en{
		font-size: 12px;
		margin: 0 0 30px;
		position: relative;
		&::after {
			content: "";
			width: 20px;
			height: 1px;
			background: #000;
			position: absolute;
			bottom: -20px;
			left: 50%;
			margin-left: -13px;
		}
	}
	.category_title_ja{
		font-size: 14px;
		@media only screen and (max-width: 768px){
			font-size: 12px;
		}
	}
	.lead_title{
		font-size: 18px;
		line-height: 2;
		@media only screen and (max-width: 768px){
			font-size: 14px;
		}
	}
}

.lead_box{
	position: relative;
	background: #fff;
	padding: 80px 50px;
	margin: -10% auto 10%;
	@media only screen and (max-width: 768px){
		padding: 40px 30px 50px;
		margin: -10% auto 40px;
	}
	*{
		text-align: center;
	}
	.lead_title{
		margin: 60px auto 0;
		@media only screen and (max-width: 768px){
			margin: 50px auto 0;
		}
	}
	.lead_txt{
		margin: 30px auto 0;
		@media only screen and (max-width: 768px){
			font-size: 11px;
			line-height: 2;
		}
	}
}


.business{
	position: relative;
	background: #fff;
	padding: 100px 50px;
	@media only screen and (max-width: 768px){
		padding: 50px 30px 70px;
	}
	.business_img{
		width: 45%;
		position: absolute;
		top: -4%;
		@media only screen and (max-width: 768px){
			top: -1%;
			width: 60%;
		}
	}
	.category_title{
		text-align: center;
	}
	.category_title_en{
		text-align: center;
	}
	.lead_title{
		text-align: center;
		font-size: 23px;
		font-weight: bold;
		margin: 16px 0 0;
		@media only screen and (max-width: 768px){
			text-align: center;
			font-size: 20px;
			margin: 10px 0;
			line-height: 1.5;
		}
	}
	.lead_txt_01{
		font-size: 15px;
		text-align: center;
		@media only screen and (max-width: 768px){
			font-size: 13px;
			max-width: 404px;
			margin: 0 auto;
		}
	}
	.business_list{
		width: 80%;
		margin: 50px auto 0;
		@media only screen and (max-width: 768px){
			width: 100%;
		}
		li{
			.number{
				width: 60px;
				margin: 0 30px 0 0;
				@media only screen and (max-width: 768px){
					width: 40px;
					margin: 0 auto 0px;
				}
			}
			.txtbox{
				width: calc(100% - 90px);
				@media only screen and (max-width: 768px){
					width: 100%;
				}
			}
			.title{
				font-size: 23px;
				font-weight: bold;
				margin: 16px 0 0;
				@media only screen and (max-width: 768px){
					text-align: center;
					font-size: 20px;
					margin: 10px 0;
					line-height: 1.5;
				}
			}
			.txt{
				font-size: 15px;
				@media only screen and (max-width: 768px){
					font-size: 12px;
					max-width: 404px;
					margin: 0 auto;
				}
			}
			&:not(:last-child) {
				margin-bottom: 70px;
				@media only screen and (max-width: 768px){
					margin-bottom: 50px;
				}
			}
		}
	}
	.linkbox{
		width: 320px;
		margin: 10px 0 0;
		@media only screen and (max-width: 768px){
			width: 100%;
		}
	}
}

.maprocess{
	position: relative;
	background: #fff;
	padding: 100px 50px;
	margin: 80px auto;
	@media only screen and (max-width: 768px){
		padding: 50px 30px 0;
		margin: 40px auto;
	}
	.maprocess_img{
		width: 50%;
		position: absolute;
		top: -0.7%;
		@media only screen and (max-width: 768px){
			top: -10px;
			width: 77%;
		}
	}
	.category_title{
		text-align: center;
	}
	.category_title_en{
		text-align: center;
	}
	.lead_title{
		text-align: center;
	}
	.maprocess_line{
		width: 80%;
		margin: 50px auto 0;
		@media only screen and (max-width: 768px){
			width: 100%;
			margin: 20px auto 30px;
			max-width: 400px;
		}
	}
	.our_role_line{
		border-bottom: 1px solid rgba(64,64,64,0.60);
	}
	.our_role{
		width: 80%;
		margin: 40px auto 0;
		padding: 0 0 20px;
		@media only screen and (max-width: 768px){
			width: 100%;
			margin: 0;
			padding: 60px 0 30px;
		}
		.right{
			width: calc(100% - 500px);
			position: relative;
			@media only screen and (max-width: 1000px){
				width: 100%;
				margin: 0 0 10px;
			}
			h2{
				font-size: 23px;
				font-weight: bold;
				position: relative;
				z-index: 10;
				line-height: 1;
				@media only screen and (max-width: 768px){
					font-size: 20px;
					text-align: center;
					line-height: 1;
				}
			}
			h3{
				font-size: 12px;
				position: relative;
				margin: 0 0 0 9px;
				@media only screen and (max-width: 768px){
					text-align: center;
					margin: 0;
				}
			}
			
			.img{
				position: absolute;
				z-index: 9;
				top: 20px;
				left: 20px;
				width: 200px;
				@media only screen and (max-width: 768px){
					left: 50%;
					margin-left: -100px;
					opacity: 0.7;
				}
			}
			.img_2{
				position: absolute;
				z-index: 9;
				top: 24px;
				left: 20px;
				width: 220px;
				@media only screen and (max-width: 768px){
					left: 50%;
					margin-left: -37%;
				}
			}
		}
		.ourrole_list{
			width: 500px;
			@media only screen and (max-width: 1000px){
				width: 100%;
			}
			li{
				padding:10px 0 30px;
			}
			li:not(:last-child) {
				border-bottom: 1px solid #dbdbdb;
				margin: 0 0 20px;
			}
			.icon{
				width: 50px;
				margin: 0px;
				@media only screen and (max-width: 768px){
					width: 38px;
					margin: 0 auto;
				}
			}
			.ourrole_title{
				font-size: 20px;
				font-weight: bold;
				line-height: 1.5;
				@media only screen and (max-width: 768px){
					font-size: 15px;
					text-align: center;
				}
			}
			.ourrole_txt{
				font-size: 13px;
				@media only screen and (max-width: 768px){
					font-size: 12px;
					margin: 10px 0 0;
				}
			}
			.ourrole_txt_center{
				font-size: 13px;
				@media only screen and (max-width: 768px){
					font-size: 12px;
					margin: 10px 0 0;
					text-align: center;
				}
			}
			.ourrole_txt_2{
				font-size: 15px;
				@media only screen and (max-width: 768px){
					font-size: 14px;
					margin: 0px 0 0;
					text-align: center;
				}
			}
		}
	}
}

.company{
	position: relative;
	background: #fff;
	padding: 100px 100px 60px;
	margin: 80px auto;
	width: 80%;
	margin: 0;
	@media only screen and (max-width: 768px){
		padding: 50px 30px;
		width: 100%;
	}
	.company_img{
		width: 28%;
		position: absolute;
		top: -5%;
		@media only screen and (max-width: 768px){
			width: 55%;
			position: absolute;
			top: -2.3%;
			max-width: 300px;
		}
	}
	.company_photo{
		position: absolute;
		width: 44%;
		@media only screen and (min-width: 769px){
			right: -19%;
			top: 10%;
		}
		@media only screen and (max-width: 768px){
			position: relative;
			width: 100%;
			margin: 40px 0;
			max-width: 400px;
		}
	}
	dl{
		z-index: 100;
		position: relative;
		margin: 5% 0 30px;
		width: 434px;
		@media screen and (max-width: 768px) {
			width: 100%;
			margin: 16px 0 0;
		}
		dd{
			width: calc(30% - 10px);
			margin: 0 0px 10px 0;
			padding: 10px 10px 10px 5px;
			font-size: 13px;
			font-weight: bold;
			border-bottom: 1px solid #ddd;
			@media screen and (max-width: 768px) {
				width: 100%;
				padding:0;
				font-size: 13px;
				font-weight: bold;
				margin: 0;
			}
		}
		dt{
			width: 70%;
			margin: 0 0 10px 0;
			padding: 10px 10px 10px 5px;
			font-size: 13px;
			border-bottom: 1px solid #ddd;
			@media screen and (max-width: 768px) {
				width: 100%;
				padding: 12px 10px;
				font-size: 11px;
				border-bottom: 0px solid #ddd;
			}
		}
	}
}

.movie_area{
	position: relative;
	background: #fff;
	padding: 100px 50px;
	margin: 180px auto 40px;
	@media only screen and (max-width: 768px){
		padding: 50px 30px 50px;
		margin: 40px auto;
	}
	.movie_area_img{
		width: 50%;
		position: absolute;
		top: -0.7%;
		@media only screen and (max-width: 768px){
			top: -10px;
			width: 77%;
		}
	}
	.category_title{
		text-align: center;
		line-height: 1.5;
	}
	.category_title_en{
		text-align: center;
	}
	.lead_title{
		text-align: center;
	}
	.lead_txt{
		text-align: center;
	}
	.link_txt{
		text-align: center;
		a{
			color: #000;
			text-decoration: underline;
		}
	}
	.movie_list{
		width: 100%;
		margin: 30px auto 0;
		li{
			position: relative;
			padding-top: 18.25%;
			width: calc(33.3333% - 10px);
			@media only screen and (max-width: 768px){
				width: 100%;
				padding-top: 56.25%;
				margin-bottom: 10px;
			}
		    iframe {
			  position: absolute;
			  top: 0;
			  right: 0;
			  width: 100% !important;
			  height: 100% !important;
			}
		}
	}
}

.contact{
	position: relative;
	background: #fff;
	padding: 80px 50px 80px 48%;
	margin: 120px 0 0 auto;
	width: 80%;
	@media only screen and (max-width: 768px){
		padding: 50px 30px;
		width: 100%;
		margin: 50px 0 0 auto;
	}
	@media only screen and (max-width: 768px){
		.category_title{
			text-align: center;
		}
		.category_title_ja{
			text-align: center;
		}
	}
	.contact_img{
		width: 30%;
		position: absolute;
		bottom: -8%;
		@media only screen and (max-width: 768px){
			width: 80%;
			max-width: 400px;
		}
	}
	.contact_photo{
		position: absolute;
		width: 75%;
		@media only screen and (min-width: 769px){
			left: -25%;
			top: 10%;
		}
		@media only screen and (max-width: 768px){
			position: relative;
			width: 100%;
			margin: 20px auto 0;
			max-width: 400px;
		}
	}
	.txt{
		font-size: 12px;
		margin: 20px 0 20px;
		@media only screen and (max-width: 768px){
			text-align: center;
		}
	}
}

/* ==========================================

   パンくずリスト

========================================== */

/* パンくず　リスト */
.pankuzu{
	padding: 0;
	width: 100%;
	margin: 0 auto;
}
.pankuzu li{
	display: inline-block;
	letter-spacing: 1px;
	color: #262626;
	font-size: 10px;
	&:not(:last-child){
		position: relative;
		margin-right:20px;
		&:after {
			content: "";
			width: 4px;
			height: 4px;
			border-top: 1px solid #262626;
			border-right: 1px solid #262626;
			position: absolute;
			top: 54%;
    		right: -13px;
			-webkit-transform: translateY(-50%) rotate(45deg);
			-moz-transform: translateY(-50%) rotate(45deg);
			-ms-transform: translateY(-50%) rotate(45deg);
			-o-transform: translateY(-50%) rotate(45deg);
			transform: translateY(-50%) rotate(45deg);
		}
	}
}
.pankuzu li a{
	display: inline-block;
	letter-spacing: 1px;
	color: #262626;
	font-size: 10px;
}
.pankuzu li :hover{
	color: #B4B4B4;
}
.pankuzu li::after, .cd-multi-steps li::after {
	content: '';
	height: 0px;
	width: 0px;
	display: inline-block;
	background-size: contain;
	vertical-align: middle;
}

.pankuzu.custom-separator i.icon, 
.cd-multi-steps.custom-separator i.icon {
	height: 16px;
	width: 16px;
	display: inline-block;
	position: relative;
}
.pankuzu.custom-separator i.icon img{
	vertical-align: baseline;
}
.title_icon{
	width: 50px;
	margin: 0 auto 12px;
}

@media only screen and (max-width: 860px){
	.pankuzu {
		padding: 0px;
		width: 100%;
		margin: 0px auto 0;
	}
	.pankuzu li{
		display: inline-block;
		font-size: 10px;
	}
	.pankuzu.custom-separator i.icon img{
		vertical-align: baseline;
	}
	.pankuzu.custom-separator i.icon, 
	.cd-multi-steps.custom-separator i.icon {
		height: 13px;
		width: 15px;
		margin: 0 0 0 2px;
		display: inline-block;
		position: relative;
	}
}

/* ================================================================================

 *  privacy
　
   ================================================================================ */


.privacy_page{
	position: relative;
	.privacy_area{
		position: relative;
		background: #fff;
		padding: 80px 50px 100px;
		width: 100%;
		margin: 200px 0 0;
		.pankuzu{
			width: 87%;
			@media only screen and (max-width: 768px){
				width: 100%;
				margin: 0 auto 40px;
			}
		}
		@media only screen and (max-width: 768px){
			padding: 30px 30px;
			width: 100%;
			margin: 0px 0 0 auto;
		}
		.category_title{
			text-align: center;
		}
		.category_title_ja{
			text-align: center;
		}
		.txtarea{
			width: 87%;
			margin: 20px auto;
			@media only screen and (max-width: 768px){
				width: 100%;
			}
			li{
				h2{
					font-size: 18px;
					@media only screen and (max-width: 768px){
						font-size: 16px;
					}
				}
				h3{
					font-size: 12px;
					line-height: 1.8;
					@media only screen and (max-width: 768px){
						font-size: 11px; 
					}
				}
			}
			li:not(:last-child) {
				margin-bottom: 20px;
			}
		}
	}
	
}


/* ================================================================================

 *  contact
　
   ================================================================================ */


.contact_page{
	position: relative;
	.site_inner{
		@media only screen and (max-width: 768px){
			padding: 0;
		}
	}
	footer{
		@media only screen and (max-width: 768px){
			margin: 100px auto 0;
		}
	}
	.contact_lead{
		position: relative;
		background: #fff;
		padding: 100px 50px;
		width: 88%;
		margin: 173px 0 0;
		@media only screen and (max-width: 960px){
			padding: 30px 30px 40px;
			width: 100%;
			margin: 0px 0 0 auto;
		}
		.txt{
			font-size: 12px;
			margin: 40px 0 0;
			@media only screen and (max-width: 768px){
			    font-size: 11px;
				margin: 10px 0 0;
				line-height: 1.8;
			}
		}
		.contact_photo{
			position: absolute;
			width: 80%;
			@media only screen and (min-width: 961px){
				right: -12%;
				top: -5%;
			}
			@media only screen and (max-width: 960px){
				position: relative;
				width: 100%;
				margin: 20px auto 0;
			}
		}
	}
	.contact_area{
		position: relative;
		background: #fff;
		padding: 80px 50px 100px;
		margin: 5% auto 0;
		@media only screen and (max-width: 960px){
			padding: 30px 20px 60px;
		}
		@media only screen and (max-width: 768px){
			padding: 30px 30px;
			width: 100%;
			margin: 20px 0 0 auto;
		}
		
}
}

.contact_page{
	.step{
		list-style-type: none;
		display: table;
		width: 87%;
		padding:0;
		margin: 0px auto 0;
		overflow: hidden;
		@media only screen and (max-width: 960px){
			width: 100%;
		}
		@media only screen and (max-width: 768px){
			display: none;
		}
		li{
			display:table-cell;
			position:relative;
			background: #AFAFAF;
			padding: 1em 0.5em 1em 2em;
			color: #fff;
			font-size: 1.1rem;
			&:last-child{
				padding-right: 1em;
			}
			&:last-child:before,&:last-child:after{
				display:none;
			}
			&:before,&:after{
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				margin: auto;
			}
			&:before{
				top:-15px;
				right:-1em;
				border-style: solid;
				border-color: transparent transparent transparent #fff;
				border-width: 40px 0 40px 1em;
				z-index: 10;
			}
			&:after{
				top:-15px;
				right:-.8em;
				border-style: solid;
				border-color: transparent transparent transparent #AFAFAF;
				border-width: 40px 0 40px 1em;
				z-index: 10;
			}
			&.is-current{
				background: #b2c1c1;
				font-weight: bold;
				&:after{
					border-color: transparent transparent transparent #b2c1c1;
				}
				@media only screen and (max-width: 768px){
					background: #fff;
				}
			}
		}
	}
}

.contact_page{
	.contact-list{
		width: 87%;
		position: relative;
		margin: 40px auto;
		@media only screen and (max-width: 960px){
			width: 100%;
			margin: 20px auto 0;
		}
		li{
			width: 100%;
			margin: 0 0 1rem;
			@media only screen and (max-width: 768px){
				width: 100%;
				margin: 0 0 30px;
			}
		}
		&__left{
			width: 200px;
			padding: 1rem 1.5rem;
			position: relative;
			margin-right: 20px;
			@media only screen and (max-width: 768px){
				width: 100%;
				padding:0;
			}
			.txt{
				font-size: 1.1rem;
				letter-spacing: 1px;
				@media only screen and (max-width: 768px){
					font-size: 13px;
					font-weight: bold;
				}
			}
		}
		&__right{
			width: calc(100% - 220px);
			padding: 1rem 3rem;
			font-size: 1.3rem;
			@media only screen and (max-width: 768px){
				width: 100%;
				padding: 6px 0px 0px;
				font-size: 16px;
				font-weight: bold;
			}
			*{
				font-size: 14px;
				@media only screen and (max-width: 768px){
					font-size: 16px;
				}
			}
			span{
				font-size: 12px !important;
				width: 20px;
    			display: inline-block;
			}
			.txt_box{
				margin: 5px 0 0 2px;
   				opacity: 0.6;
				font-size: 11px;
			}
		}
		.required{
			color: #DD1B73;
			text-align: center;
			border: 2px solid #DD1B73;
			font-size: 10px;
			padding: 5px 5px;
			margin: 0 0 0 5px;
			line-height: 1;
			position: absolute;
			right: 1rem;
			top: 1rem;
			@media only screen and (max-width: 768px){
				top: 50%;
				-webkit-transform: translate(0%, -50%); /* Safari用 */
				transform: translate(0%, -50%);
				right: 10px;
			}
		}
		.error_box{
			margin: 1rem 0 0 0;
			.error_txt{
				color: #DD1B73;
				font-size: 0.9rem;
				font-weight: bold;
				@media only screen and (max-width: 768px){
					font-size: 11px
				}
			}
		}
	}
	.contact_complete{
		width: 100%;
		position: relative;
		margin: 13% auto 10%;
		background: #fff;
		padding: 0;
		@media only screen and (max-width: 768px){
			margin: 0 auto;
    		padding: 50px 0;
		}
		.txt{
			text-align: center;
			font-size: 1.7rem;
			font-weight: bold;
			@media only screen and (max-width: 768px){
				font-size: 16px
			}
		}
		.txt_2{
			text-align: center;
			font-size: 1.2rem;
			letter-spacing: 1px;
			line-height: 2;
			@media only screen and (max-width: 768px){
				font-size: 12px;
				margin: 2rem 0 0 0;
			}
		}
	}
}

.contact_page_confirm{
	.contact-list{
		&__right{
			padding: 10px 15px; 
			text-align: left;
			background: #f2f2f2;
		}
	}
}

.control-group {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	padding: 10px;
	margin: 10px;
}
.control {
	display: block;
    position: relative;
    padding: 6px 0 0 30px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: #000;
	input {
		position: absolute;
		z-index: -1;
		opacity: 0;
	}
	@media only screen and (max-width: 768px){
		height: auto;
		margin: 0;
		padding: 6px 0 0 30px;
		font-size: 1.7rem !important;
	}
}
.control__indicator {
	position: absolute;
	top: 8px;
	left: 0;
	height: 20px;
	width: 20px;
	background: #e6e6e6;
}
.control--radio .control__indicator {
	border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
	background: #ccc;
}
.control input:checked ~ .control__indicator {
	background: #DD1B73;
}
.control:hover input:not([disabled]):checked .control__indicator,
.control input:checked:focus .control__indicator {
	background: #0e647d;
}
.control input:disabled .control__indicator {
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
}
.control__indicator:after {
	content: '';
	position: absolute;
	display: none;
}
.control input:checked ~ .control__indicator:after {
	display: block;
}
.control--checkbox .control__indicator:after {
	left: 7px;
	top: 4px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #fff;
}
.control--radio .control__indicator:after {
	left: 7px;
	top: 7px;
	height: 6px;
	width: 6px;
	border-radius: 50%;
	background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
	background: #7b7b7b;
}
.control:hover {
}
.select {
	position: relative;
	display: inline-block;
	margin-bottom: 15px;
	width: 100%;
}
.select select {
	display: inline-block;
	width: 100%;
	cursor: pointer;
	padding: 10px 15px;
	outline: 0;
	border: 0;
	border-radius: 0;
	background: #e6e6e6;
	color: #7b7b7b;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.select select::-ms-expand {
	display: none;
}
.select select:hover,
.select select:focus {
	color: #000;
	background: #ccc;
}
.select select:disabled {
	opacity: 0.5;
	pointer-events: none;
}
.select__arrow {
	position: absolute;
	top: 16px;
	right: 15px;
	width: 0;
	height: 0;
	pointer-events: none;
	border-style: solid;
	border-width: 8px 5px 0 5px;
	border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
	border-top-color: #ccc;
}
.select select:disabled ~ .select__arrow {
	border-top-color: #ccc;
}

.contact_page{
	/* input 系　共通設定  =========================*/
	input[type="text"] {
		padding: 10px 15px; 
		text-align: left;
		background: #f2f2f2;
	}
	input[type="date"] {
		padding: 10px 15px; 
		text-align: left;
		background: #f2f2f2;
	}
	input[type="password"] {
		padding: 10px 15px; 
		text-align: left;
		background: #f2f2f2;
	}
	input[type="text"]:focus {
	  outline: 0;
	  border-color: $color-main;
	}
	input[type="date"]:focus {
	  outline: 0;
	  border-color: $color-main;
	}
	input[type="password"]:focus {
	  outline: 0;
	  border-color: $color-main;
	}
	textarea{
		width: 100%;
		padding: 10px 15px; 
		text-align: left;
		background: #f2f2f2;
	}
	textarea:focus {
	  outline: 0;
	  border-color: $color-main;
	}

	/* ラジオボタン =========================*/
	.radio_btn input[type="radio"] {
		display: none;
	}
	.radio_btn label {
		position: relative;
		display: block;
		padding: 3px 3px 3px 20px;
		cursor: pointer;
	}
	.radio_btn label::before {
		position: absolute;
		content: '';
		top: 55%;
		left: 0;
		width: 14px;
		height: 14px;
		margin-top: -8px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 100%;
	}
	.radio_btn input[type="radio"]:checked + label::after {
		position: absolute;
		content: '';
		top: 55%;
		left: 4px;
		width: 6px;
		height: 6px;
		margin-top: -4px;
		background: $color-main;
		border-radius: 100%;
	}
	input[type="radio"]:focus {
	  outline: 0;
	  border-color: $color-main;
	}
	/* セレクトボタン =========================*/
	.select_label {
		position: relative;
		display: inline-block;
		background: #fff;
		margin: 0 5px 0 0;
	}
	.select_lap {
		width:100%;
		@media only screen and (max-width: 768px){

		}
	}
	.select_label:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		display: block;
		width: 0;
		height: 0;
		margin: -3px 0 0 0;
		border: 5px solid transparent;
		border-top: 6px solid #595757;
		z-index: 10;
	}
	select {
		cursor: pointer;
		position: relative;
		-webkit-appearance: none;
		appearance: none;
		display: block;
		padding: 10px 15px; 
		color:  #595757;
		border: none;
		background: transparent;
		background: #f2f2f2;
	}

	/* 参加者氏名 ふりがな */
	.name_input_box_sei{
		width: calc(50% - 28px);
		display: inline-block;
		margin: 0 10px 5px 0;
		@media only screen and (max-width: 768px){
			width: calc(100% - 26px);
			margin: 0 0 5px 6px;
		}
	}
	.name_input_box_mei{
		width: calc(50% - 28px);
		display: inline-block;
		margin: 0 0 5px 0px;
		@media only screen and (max-width: 768px){
			width: calc(100% - 26px);
			margin: 0 0 5px 6px;
		}
	}
	.contact_txt01{
		text-align: center;
		font-size: 1.2rem;
		letter-spacing: 0px;
		margin: 0 auto 0;
		@media only screen and (max-width: 768px){
			font-size: 12px;
		}
		a{
			position: relative;
			display: inline-block;
			font-weight: 800;
			letter-spacing: 0px;
			font-size: 1.2rem;
			cursor: pointer;
			padding: 0;
			line-height: 1;
			font-weight: normal;
			text-decoration: none;
			color: #000;
			margin-right: 23px;
			@media only screen and (max-width: 768px){
				font-size: 12px;
			}
			&:after{
				height: 1px;
				left: 0;
				bottom: -5px;
				width: 100%;
				content: '';
				position: absolute;
				z-index: 1;
				background: #000;
			}
			&:before {
				content: "";
				position: absolute;
				right: -20px;
				bottom: 2px;
				width: 15px;
				height: 10px;
				background-image: url("../img/link_blank.svg");
				background-size: contain;
				background-repeat: no-repeat;
				transition: transform .6s;
				z-index: 10;
			}
			@media only screen and (min-width: 769px){
				&:hover::after{
					width: 100%;
				}
				&:hover::before{
					background-size: contain;
					background-repeat: no-repeat;
				}
			}
		}
	}
	.contact_txt02{
		text-align: center;
		font-size: 1.2rem;
		letter-spacing: 0px;
		margin: 10px auto 0;
		@media only screen and (max-width: 768px){
			font-size: 13px;
		}
	}
	.contact_txt03 .control{
		display: block;
		position: relative;
		padding: 4px 0 0 30px;
		margin: 0 auto;
		cursor: pointer;
		font-size: 13px;
		color: #000;
		width: 98px;
		@media only screen and (max-width: 768px){
			font-size: 12px!important;
		}
	}
	
	.contact_submit_area{
		width: 87%;
		margin: 70px auto 0;
		@media only screen and (max-width: 768px){
		    width: 100%;
			margin: 50px auto 0;
			padding: 0;
		}
	}
	
	.form_input_box{
		width: 100%;
		margin: 0 3px;
	}
	.submit_list_box{
		width: 100%;
		margin: 0;
		@media only screen and (max-width: 768px){
		    width: 100%;
			margin: 0;
			padding: 0;
		}
		li{
			@media only screen and (max-width: 768px){
				width: 100%;
				padding: 0;
			}
		}
	}
	.submit_btn{
		text-align: center;
		margin: 30px auto 0;
		max-width: 280px;
		@media only screen and (max-width: 768px){
			margin: 20px auto 0;
		}
	}
	.submit{
		margin: 0 auto;
		position: relative;
		width: 280px;
	}
	/* 確認ボタン */
	.submit{
		width: 280px;
		margin: 17px 0 0;
		background: #000;
		padding: 15px 0;
		font-size: 13px;
		border: 2px solid #000 !important;
		color:#fff;
		text-align: center;
		display: block;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all  1s;
		letter-spacing: 2px;
		&:focus{
			outline: 0;
		}
		@media only screen and (max-width: 768px){
			margin: 5rem 2px 0;
		}
	}
	.submit_grey{
		width: 280px;
		margin: 17px 0 0;
		background: #cecece;
		padding: 15px 0;
		font-size: 13px;
		border: 1px solid #cecece !important;
		color: #fff;
		text-align: center;
		display: block;
		letter-spacing: 2px;
		&:focus{
			outline: 0;
		}
		@media only screen and (max-width: 768px){
			margin: 0 2px 0;
			width: 100%;
		}
	}
	@media screen and (min-width: 769px){
		.submit:hover, .submit_confirm:hover {
			width: 280px;
			margin: 17px 0 0;
			background: #fff;
			padding: 15px 0;
			font-size: 13px;
			border: 2px solid #000 !important;
			color: #000;
			text-align: center;
			display: block;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-o-transition: all 1s;
			transition: all  1s;
		}
	}
	@media screen and (max-width: 768px){
		.submit, .submit_confirm { 
			width: 100%;
			margin: 0rem 2px 0;
			background:  #b2c1c1;
			padding: 15px 0;
			font-size: 13px;
			letter-spacing: 2px;
			border: 2px solid #b2c1c1 !important;
			color:#fff;
			text-align: center;
			display: block;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-o-transition: all 1s;
			transition: all  1s;
		}
	}
	/* 戻るボタン */
	.submit_back{
		width: 280px;
		margin: 17px 5px 0;
		background: #c9c9c9;
		padding: 15px 0;
		font-size: 13px;
		border: 2px solid #c9c9c9 !important;
		color:#fff;
		text-align: center;
		display: block;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all  1s;
		letter-spacing: 2px;
		&:focus{
			outline: 0;
		}
	}
	@media screen and (min-width: 769px){
		.submit_back:hover{
			width: 280px;
			margin: 17px 5px 0;
			background: #fff;
			padding: 15px 0;
			font-size: 13px;
			border: 2px solid #c9c9c9 !important;
			color: #c9c9c9;
			text-align: center;
			display: block;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-o-transition: all 1s;
			transition: all  1s;
		}
	}
	@media screen and (max-width: 768px){
		.submit_back{ 
			width: 100%;
			margin: 20px 0 0;
			background: #c9c9c9;
			padding: 15px 0;
			font-size: 13px;
			letter-spacing: 2px;
			border: 2px solid #c9c9c9 !important;
			color:#fff;
			text-align: center;
			display: block;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-o-transition: all 1s;
			transition: all  1s;
			font-family: a-otf-gothic-bbb-pr6n, sans-serif;
		}
	}
}