html {font-size:62.5%;}
body {
	color:#414141;
	font-family: 'Crimson Text', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

ol, ul {
	list-style: none;
}

h1 {
	display: block;
	font-size:1rem;
	margin-left: 58px;
	margin-top: -50px;
	width:190px;
	height:auto;
}
h1 img{
	width:100%;
	height:auto;
}
h2 {
	font-size:3.2rem;
	font-weight: normal;
	font-family: 'Crimson Text', serif;
}
h3 {
	font-size:2rem;
	font-weight: normal;
}
p {
	line-height:1.6;
}
.mg12{margin-top: 12px;}
.mg20{margin-top: 20px;}
.mg40{margin-top: 40px;}
.mg80{margin-top: 80px;}
.mg120{margin-top: 120px;}
.mg160{margin-top: 160px;}
.sp80{height: 80px;}

.inner {
	position: relative;
	height:100%;
	width:100%;
	display: flex;
}
.innerHome {
	align-items: center;
}
.innerFoot {
	height:auto;
}



/*for Loader*/
.flbackdrop {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #DEDEDE;
	z-index: 99999;
}


/*-----Layout (inner)-----*/
.flex_L{
	width:306px;
	height:auto;
}
.flex_R{
	position: relative;
	flex:1;
	height:100%;
}
.abs_Home{
	position: absolute;
	top:0;
	left:0;
}
.abs_Home h2{
	transform-origin: left bottom;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	font-family: 'Crimson Text', serif;
	font-size: 11px;
	letter-spacing: 0.14rem;
	margin-left: 8px;
	margin-top: -2px;
}
.flex_L h2{
	margin-left: 58px;
	margin-top: 80px;
}
.bg-switcher {
    background-position: center center;
    background-size: cover;
}



/**/
section {
	width:100%;
}
.panel1, .panel2 {
	height: 100vh;
}


/*Philosophy*/
.w_Philosophy p{
	width: 86%;
	min-width: 600px;
	font-size: 2.2rem;
	margin-top: 80px;
	line-height: 1.8;
	font-weight: normal;
}
.w_Philosophy h3{
	margin-top: 150px;
	font-size: 11rem;
	font-weight: normal;
	font-family: 'Crimson Text', serif;
	letter-spacing: -0.4rem;
	line-height: 0.8;
}

/*Works*/
.w_Works{
	position: relative;
	width: 100%;
	min-width: 740px;
	max-width: 900px;
	display: flex;
	justify-content: space-between;
}
.w_Works_in{
	width: 47%;
	min-width: 350px;
}
	.w_Works_in img{
		width: 100%;
		height: auto;
	}
.w_part{
	width: 100%;
	border-bottom: 1px solid #CCC;
	padding: 0.4rem 0 1rem 0;
	font-size: 1.4rem;
	text-align: center;
}
.w_title{
	width: 100%;
	margin-top: 2rem;
	font-size: 2rem;
	text-align: center;
	line-height: 1.2;
}
.w_state{
	width: 100%;
	margin-top: 2rem;
	font-size: 1.4rem;
	text-align: center;
}
.w_exp{
	width: 100%;
	margin-top: 4rem;
	font-size: 1.2rem;
	line-height: 1.6;
	text-align: left;
}
.w_btn{
	width: 100%;
	margin-top: 4rem;
	text-align: center;
}
	a.wBtn {
		display: block;
		width: 100%;
		color: #414141;
	    font-size: 1.4rem;
		border-radius: 0.4rem;
		background-color: #E2E2E2;
		padding: 1.2rem 0;
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
	}
	a.wBtn i {
		margin-left: 0.8rem;
	    font-size: 1.1rem;
		vertical-align: top;
		margin-top: 1px;
	}
	a.wBtn:visited{
		color:#414141;
	}
	a.wBtn:hover {
		color: #FFF;
		background-color: #666;
	}
.w_btn2{
	width: 100%;
	margin-top: 1rem;
	text-align: center;
}
	a.wBtn2 {
		display: block;
		width: 100%;
		color: #414141;
	    font-size: 1.4rem;
		border-radius: 0.4rem;
		background-color: #e7efd5;
		padding: 1.2rem 0;
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
	}
	a.wBtn2 i {
		font-family: “Font Awesome 5 Free”;
		margin-left: 0.8rem;
	    font-size: 1.1rem;
		vertical-align: top;
		margin-top: 1px;
	}
	a.wBtn2:visited{
		color:#414141;
	}
	a.wBtn2:hover {
		color: #FFF;
		background-color: #666;
	}

/*Company*/
.w_Company{
	position: relative;
	width: 100%;
	min-width: 740px;
	max-width: 900px;
}
.w_Company_logo{
	width: 100%;
	padding-bottom: 2rem;
}
	.w_Company_logo img{
		width: 100%;
		height: auto;
	}
.w_Company_dl { 
	width: 100%;
	border-bottom: 1px solid #CCC;
}
	.w_Company_dl dt, .w_Company_dl dd {
		display: block;
		margin: 0;
		padding: 1.3rem 0;
		font-size: 1.4em;
		line-height: 1.8;
		border-top: 1px solid #CCC;
	}
	.w_Company_dl dt {
		float: left;
		vertical-align: top;
		width: 10rem;
	}
	.w_Company_dl dd {
		margin-left: 10rem;
	}
	.w_Company_dl dt:first-child,
	.w_Company_dl dd:first-of-type { border-top: 0 none transparent; }

/*Contact*/
.w_Contact{
	position: relative;
	width: 100%;
	min-width: 740px;
	max-width: 900px;
	font-size: 1.4rem;
}

/*Foot*/
.w_Footer{
	width: 97%;
	margin: 0 auto;
	font-size: 1.4rem;
	text-align: right;
	display: block;
	padding-bottom: 50px;
}
	.w_Footer span{
		margin-left: 2rem;
	}
	.w_Footer span img{
		margin-top: 5px;
		width: 100px;
		height: auto;
	}

/*-----header-----*/
.header_area{
	position: fixed;
	width: 98.5%;
	z-index: 200;
	text-align: right;
	padding-top: 14px;
}
.header_btn{
	display: inline-block;
	margin-left: 34px;
	font-family: 'Crimson Text', serif;
	
	letter-spacing: 0.1rem;
}
.header_btn.firstBtn{
	margin-left: 0;
}
.header_btn a {
	color: #333;
	font-size: 1.4rem;
	text-decoration: none;
}
.header_btn a::after {
	content: '';
	display: block;
	width: 0;
	margin: 2px 0 0 0;
	border-bottom: 1px solid #333;
	transition: width 0.3s ease-in-out;
}
.header_btn a:hover::after {
	width: 100%;
}

.header_btn a i {
		margin-left: 0.6rem;
	    font-size: 1.1rem;
		vertical-align: top;
		margin-top: 1px;
	}

/*-----link-----*/
a.txtLink {
	color: #333;
	font-size: 1.1rem;
	text-decoration: none;
	margin-left: 1.5rem;
	display: inline-block;
	
}
a.txtLink::after {
	content: '';
	display: block;
	width: 100%;
	margin: 1px 0 0 0;
	border-bottom: 1px solid #333;
	transition: width 0.3s ease-in-out;
}
a.txtLink:hover::after {
	width: 0%;
}
a.txtLink i {
	color: #666;
	font-size: 1rem;
	margin-left: 0.8rem;
}



/*-----animation-----
.panel.is-show .inner .flex_L {
  opacity: 1;
  --webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.panel.is-show .inner .flex_R {
  opacity: 1;
}
.flex_L {
  opacity: 0;
  -webkit-transform: translate3d(0,40px,0);
  transform: translate3d(0,40px,0);
  transition: all 1s ease .75s;
}
.flex_R {
  opacity: 0;
  transition: all 1s ease .75s;
}*/


/*-----thanks.html-----*/
#thanks {
  
}
#thanks h2 {
  font-size: 2.4rem;
}
#thanks p {
  font-size: 1.6rem;
  line-height: 1.4;
}


/*PAGETOP*/
#page-top {
    position: fixed;
    bottom: 0.8rem;
    right: 0.8rem;
}
	#page-top a {
	    width: 60px;
	    height: 60px;
	    text-align: center;
	    display: block;
	    -webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	#page-top a img {
	    width: 100%;
	    height: auto;
	}
	#page-top a:hover {
		opacity: 0.4;
	}



/*Modal*/
#modal-main {
  display: none;
  z-index: 301;
  width: 90%;
  max-width: 500px;
  margin: 0;
  padding: 2.8rem;
  position:fixed;
  background-color: #ffffff;
  color: #414141;
  font-size: 1.4rem;
  line-height: 1.6;
}

#modal-main h3 img {
  width: 100%;
  height: auto;
}

#modal-bg {
  display:none;
  width:100%;
  height:130%;
  background-color:rgba(0,0,0, 0.50);
  position:fixed;
  top:0;
  left:0;
  z-index: 300;
}




@media (max-width:940px) {
	.panel2 {
		height: auto;
	}
	.inner {
		/*flex-direction: column;*/
		display: block;
	}
	.flex_L{
		display: block;
		position: relative;
		width:100%;
		/*height:120px;*/
		height: 80px;
		text-align: center;
		padding-top: 6rem;
	}
	.innerHome .flex_L{
		display: block;
		position: relative;
		width:100%;
		background: none;
		z-index: 20; 
	}
	.flex_R{
		display: block;
		position: relative;
		width:100%;
		height: auto;
	}
	.flex_R.bg-switcher {
	    height: 100vh;
	    position: absolute;
	    z-index: -1;
	    top:0;
	}
	/**/
	.header_area{
		width: 100%;
		top:0;
		text-align: center;
	}
	.header_btn{
		margin-left: 20px;
		font-size: 1.6rem;
	}
	/*Home*/
	.abs_Home{
		display: none;
	}
	h1 {
		width: 200px;
		margin: 0 auto;
	}
	.flex_L h2 {
		width: 90%;
		text-align: left;
		font-size:3rem;
		margin: 20px auto 0 auto;
	}
	/*forPhilosophy*/
	.w_Philosophy p{
		width: 90%;
		min-width:300px;
		margin: 5rem auto;
		font-size: 1.6rem;
	}
	.w_Philosophy h3{
		width: 90%;
		font-size: 6rem;
		margin: 0 auto;
	}
	/*forWork*/
	.w_Works {
		min-width: 300px;
		/*flex-direction: column;*/
		display: block;
	}
	.w_Works.mg160{
		margin-top: 40px;
	}
	.worksImg{
		text-align: center;
		padding-bottom: 20px;
	}
	.w_Works_in{
		width: 90%;
		min-width: 300px;
		margin: 0 auto;
	}
	.w_Works_in img{
		width: 50%;
		height: auto;
		margin: 0 auto;
	}
	/*forCompany*/
	.w_Company{
		min-width: 300px;
		width: 90%;
		margin: auto;
	}
	/*forContact*/
	.w_Contact{
		min-width: 300px;
		width: 90%;
		margin: auto;
	}
	/*forFoot*/
	.w_Footer{
		text-align: center;
	}
	.w_Footer span img{
		margin-top: 20px;
		width: 160px;
		height: auto;
	}
}


@media (max-width:640px) {
	.header_btn a::after {
		display: none;
	}
	.header_btn a:hover::after {
		display: none;
	}
	#page-top a {
	    width: 40px;
	    height: 40px;
	}
}