@charset "UTF-8";
/* ==========================================================================

	common style
	
========================================================================== */
@media screen and (min-width: 860px) {
	.pc{ display: block;}
	.sp{display: none;}
html {height: 100%;overflow: hidden;}
body { margin:0;padding:0;perspective: 1px;transform-style: preserve-3d;height: 100%;overflow-y: scroll;overflow-x: hidden;font-family: Nunito; -webkit-overflow-scrolling: touch;}
h2{font-size: 28px;padding-bottom: 15px;letter-spacing: 1px;}
p{font-size: 12px;letter-spacing: 1px;line-height: 21px;padding: 6px 0;}
	
	
	
/* ========================================
 * flex box 
  ========================================*/

.flex-center{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: center; /* Safari */
    align-items: center;
}
.flex-start{
	display: -webkit-flex; /* Safari */ 
	display: flex;
}
.flex-end{
	display: -webkit-flex; /* Safari */ 
	display: flex;
	-webkit-justify-content: space-between; /* Safari */
    justify-content:         space-between;
    -webkit-align-items: flex-end; /* Safari */
    align-items: flex-end;
}
/* pcのみ　*/
.flex-center-pc{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: center; /* Safari */
    align-items: center;
}
.flex-start-pc{
	display: -webkit-flex; /* Safari */ 
	display: flex;
    -webkit-align-items: flex-start; /* Safari */
    align-items: flex-start;
}
.flex-end-pc{
	display: -webkit-flex; /* Safari */ 
	display: flex;
	-webkit-justify-content: space-between; /* Safari */
    justify-content:         space-between;
    -webkit-align-items: flex-end; /* Safari */
    align-items: flex-end;
}
/* spのみ　*/
.flex-center-sp{
	display: block;
}
.flex-start-sp{
	display: block;
}
.flex-end-sp{
	display: block;
}

.flex-row-reverse{
	-webkit-flex-direction: row-reverse; /* Safari */
  	flex-direction:         row-reverse;
}
.flex-row-reverse-pc{
	-webkit-flex-direction: row-reverse; /* Safari */
  	flex-direction:         row-reverse;
}
.flex-space{
	-webkit-justify-content: space-between; /* Safari */
    justify-content:         space-between;
}
.flex-space-end{
	-webkit-justify-content: flex-end; /* Safari */
    justify-content:         flex-end;
}
.flex-space-start{
	-webkit-justify-content: flex-start; /* Safari */
    justify-content:         flex-start;
}
.flex-space-center{
	-webkit-justify-content: center; /* Safari */
    justify-content:         center;
}
.flex-wrap {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
@media only screen and (max-width: 767px){
	.flex-center-pc{
		display: block;
	}
	.flex-start-pc{
		display: block;
	}
	.flex-end-pc{
		display: block;
	}
	.flex-center-sp{
		display: -webkit-flex; /* Safari */ 
		display: flex;
		-webkit-align-items: center; /* Safari */
		align-items: center;
	}
	.flex-start-sp{
		display: -webkit-flex; /* Safari */ 
		display: flex;
		-webkit-align-items: flex-start; /* Safari */
		align-items: flex-start;
	}
	.flex-end-sp{
		display: -webkit-flex; /* Safari */ 
		display: flex;
		-webkit-justify-content: space-between; /* Safari */
		justify-content:         space-between;
		-webkit-align-items: flex-end; /* Safari */
		align-items: flex-end;
	}
	.flex-row-reverse-pc{
		-webkit-flex-direction: row; /* Safari */
		flex-direction:         row;
	}
}

/* ========================================
 *  天地中央
  ========================================*/

.center_layout{
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
}
.center_layout_2{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}
.top_center{
	top: 50%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);
}
.left_center{
	left: 50%;
	-webkit-transform: translate(-50%, 0%); /* Safari用 */
	transform: translate(-50%, 0%);
}

/* ========================================
 *  よく使うリスト
  ========================================*/

/* 孫要素まで高さを一致させるリスト */
.flex-list-hightmatch {
	display: flex;
	justify-content: space-between;
}
.flex-list-hightmatch-inner {
	display: flex;
	align-items: stretch;
}
/* 孫要素　センター合わせ */
.flex-list-hightmatch-inner_c {
	width: 100%;
	justify-content: center;
    align-items: center;
	display: flex;
}



/* profile
============================================*/
	
.profile{
	width: 100%;
	position: relative;
	height: auto;
}
.profile .title {
	width: 400px;
    padding: 40px 50px;
	border-radius: 5px;
	background: rgba(255,255,255, .7); 
}
.profile_ja{
	width: 100%;
	position: relative;
}
.profile_en{
	width: 100%;
	position: relative;
}
.profile_txtarea{
	width: 100%;
	position: relative;
}
.profile_txtarea .leftbox{
	margin: 30px 0 0;
}


/* paralax 
---------------------------- */

#topics .para {position: relative;height: 300px;z-index: 9999;}
#topics .para h2 { position: absolute;top: 300px; left: 0px; height: 300px;  width: 640px;}
}

@media screen and (max-width: 860px) {
	.profile{
		display: none !important;
	}s
	.pc{ display: none;}
	.sp{display: block;}
	#sp_prof{ width: 100%;}
	.jp{ position: relative;}
	.jp .txt{
		position:relative; 
		border-radius: 5px;
		background: rgba(255,255,255, .7); 
		padding: 60px 40px; 
		box-sizing: border-box;
		width: 100%;
	}
	.en{ 
		position: relative; 
		margin: -10px 0 0 0;
	}
	.en .txt{ 
		position:relative; 
		border-radius: 5px;
		background: rgba(255,255,255, .7); 
		padding: 40px 40px; 
		box-sizing: border-box;
		width: 100%;
	}
	h2{font-size: 28px;padding-bottom: 15px;letter-spacing: 1px;}
	p{font-size: 11px;letter-spacing: 1px;line-height: 18px;padding: 6px 0;}
}