@charset "utf-8";

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

styling for Ryu Itadani
LastUpdate 2016/09/20

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

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top;}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}body {line-height:1;}ol,ul {list-style:none;}blockquote,q {quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}table {border-collapse:collapse;border-spacing:0;}

body {
	min-width: 1060px;
	width: 100%;
	font-size: 16px;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	line-height: 2.25;
	word-break: break-all;
	text-align: justify;
}

.krnL {
	margin-left: -0.5em;
}

.krnR {
	margin-right: -0.5em;
}

.krnC {
	margin-left: -0.2em;
	margin-right: -0.2em;
}

.pc {
	display: block;
}

.sp {
	display: none;
}

a {
	text-decoration: none;
	color: #000;
}

a[href]:hover {
	opacity: 0.5;
}

.ul {
	text-decoration: underline;
}

.cap {
	font-size: 14px;
	line-height: 2.1;
}

.inner {
	position: relative;
	width: 1060px;	
	padding: 80px 40px;
	margin: 0 auto;
	box-sizing: border-box;
}

.sansserif {
	font-family: Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

}

#wrapper {
	padding: 120px 0 0;
	position: relative;
	z-index: 2;
}

#header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	background: #fff;
	border-bottom: 1px solid #f2f2f2;
}

#header>.inner {
	height: 120px;
	padding-top: 30px;
	padding-bottom: 30px;
}

#header .id a {
	display: inline-block;
}

#nav {
	line-height: 1;
}

#nav li {
	position: relative;
}

#nav a {
	position: relative;
	display: block;
	z-index: 2;
}

#nav .bar {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 9px;
	background: #d7000f;
}

#contentNav {
	position: absolute;
	right: 40px;
	bottom: 30px;
}

#contentNav>* {
	float: left;
}

#contentNav>*+* {
	margin-left: 15px;
}

#langNav {
	position: absolute;
	top: 30px;
	right: 40px;
}

#langNav>* {
	float: left;
}

#langNav>*+* {
	margin-left: 10px;
}

#contents {
	display: block;
}

.content+.content {
	border-top: 1px solid #f2f2f2;
}

.content.uc {
	text-align: center;
}

.content.uc .txt {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.col {
	position: relative;
	top: 10px;
	opacity: 0;
}

.col>*+* {
	margin-top: 35px;
}

.content .header.col {
	float: left;
	width: 34%;
}

.content .header.col+.col {
	overflow: hidden;
}

#philosophy {
	background: url(../images/philosophy_bg.png) no-repeat center center;
	background-size: cover;
	text-align: center;
}

#philosophy .header.col {
	float: none;
	width: 100%;
}

#philosophy .header.col+.col {
	margin-top: 70px;
}

#philosophy .title {
	font-size: 24px;
}

#philosophy>.inner {
	padding: 160px 40px;
	overflow: hidden;
}

#service dl.list {
	margin-top: 50px;
}

#service *+dt {
	margin-top: 50px;
}

#service dd {
	margin-top: 20px;
	font-size: 14px;
	line-height: 2.1;
}

#clients .list {
	letter-spacing: -0.4em;
}

#clients .list>* {
	display: inline-block;
	min-width: 50%;
	box-sizing: border-box;
	padding-right: 10px;
	letter-spacing: normal;
}

#clients .cap {
	text-align: right;
}

#company #profile {
}

#company .sign {
	text-align: right;
}

#company #profile {
	max-width: 300px;
	float: right;
	font-size: 14px;
	line-height: 1.5;
}

#contact .col>*+* {
	margin-top: 0;
}

#footer {
	border-top: 1px solid #f2f2f2;
	font-size: 14px;
}

#footer>.inner {
	padding-top: 70px;
	padding-bottom: 70px;
}




@media only screen and (max-width: 30em){

	body {
		min-width: 0;
		font-size: 14px;
	}
	
	.pc {
		display: none;
	}
	
	.sp {
		display: block;
	}
	
	a[href]:hover {
		opacity: 1;
	}
	
	.inner {
		width: 100%;
		padding: 45px 20px;
		box-sizing: border-box;
	}
	
	.cap {
		font-size: 12px;
	}
	
	#wrapper {
		padding-top: 100px;
	}
	
	#header>.inner {
		height: 100px;
	}
	
	#header .id img {
		height: 40px;
		width: auto;
	}
	
	#nav {
		display: none;
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
		width: 100%;
		background: #fff;
		border-top: 1px solid #f2f2f2;
		border-bottom: 1px solid #f2f2f2;
	}
	
	#contentNav,
	#langNav {
		position: static;
		text-align: center;
	}
	
	#contentNav>*,
	#langNav>* {
		float: none;
		margin: 0;
	}
	
	#contentNav>*+* {
		margin: 0;
		border-top: 1px solid #f2f2f2;
	}
	
	#contentNav a {
		padding: 23px 0;
	}
	
	#langNav {
		padding: 23px 0;
		border-top: 1px solid #f2f2f2;
	}
	
	#langNav>* {
		display: inline-block;
	}
	
	#langNav>*+* {
		margin-left: 10px;
	}
	
	#nav .bar {
		display: none!important;
	}
	
	#menuBtn {
		position: absolute;
		top: 30px;
		right: 20px;
		display: block;
		width: 40px;
		height: 40px;
		background: url(../images/menu.png) no-repeat center center;
		background-size: contain;
	}
	
	#menuBtn:after {
		content: '';
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: url(../images/menu_close.png) no-repeat center center;
		background-size: contain;
		z-index: 2;
	}
	
	#menuBtn.open:after {
		display: block;
	}
	
	.col>*+* {
		margin-top: 20px;
	}
	
	.content .header.col {
		float: none;
		width: 100%;
	}
	
	.content .header.col .title {
		vertical-align: bottom;
	}
	
	.content .header.col+.col {
		margin-top: 20px;
	}
	
	#philosophy>.inner {
		padding: 70px 20px;
	}
	
	#philosophy .title {
		font-size: 20px;
	}
	
	#philosophy .header.col+.col {
		margin-top: 50px;
	}
	
	#service *+dt {
		margin-top: 30px;
	}
	
	#service dd {
		margin-top: 0px;
	}
	
	#company #profile {
		font-size: 12px;
	}
	
	#footer {
		font-size: 12px;
	}
	
	#footer>.inner {
	    padding-top: 40px;
	    padding-bottom: 40px;
	}


}