@charset "utf-8";

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url("../fonts/NotoSerifJP-Medium_ss.woff") format('woff'),
			 url("../fonts/NotoSerifJP-Medium_ss.otf") format('opentype');
}


body {
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-family: 'Noto Sans Japanese'/*, serif*/;
	font-size:125%;
  font-feature-settings: "palt";
	line-height:1.8;
	color: #333;
}
h1 {
	height:695px;
	background:url(../images/header.jpg) center top no-repeat;
	text-indent:-9999px;
	}
h2 {
	display: flex;
	justify-content: space-between;
	margin: 0 auto 50px;
	padding: 0 1em 0.75em;
	border-bottom: 1px solid #000;
	color: #350103;
	line-height: 1;
	text-align: center;
	text-transform: capitalize;
	font-size: larger;
	}

h2 span {
	display: inline-block;
}

h3 {
	color: #350103;
}

img {
	display:block;
	margin:0 auto;
}

.large {
	font-size:120%;
	}

.xlarge {
	font-size:144%;
	}

.xxlarge {
	font-size:172.8%;
	}
.small {
	font-size:82.5%;
	}
.xsmall {
	font-size:62.5%;
	}
.xxsmall {
	font-size:56.25%;
	}	
.u {
	text-decoration:underline;
}
.red {
	color:red;
}
.highlight {
	background-color:#FFFF00;
}
.redhigh {
	color:red;
	background-color:#FFFF00;
	}
.pconly {display: block;}
.sponly {display: none;}
strong {
	font-weight:bold;
	}
#wrapper {
	margin:0 auto;
}
main {
	margin:0 auto;
}
.container{
	margin: 0 auto;
	padding: 4em 0;
	width: 100%;
	max-width: 980px;
}
footer {
	margin: 2em auto 0;
	padding: 1em 0;
	text-align:center;
	font-size: 80%;
}
footer a {
	color:#222;
}

footer a:hover {
	text-decoration:underline;
}
address {
	font-style:normal;
}




/*
 *		Header
 */

header {
}

header .wrap_logonmenu {
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	background: #fffcf7;
	z-index: 99999;
}
header .logonmenu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 90%;
	max-width: 980px;
	height: 60px;
	background: #fffcf7;
}

header img.logo {
	display: inline;
	margin: 0;
}

header ul.menu {
	display: flex;
	justify-content: space-between;
	list-style: none;
	font-size: 80%;
}

.btn-trigger {
	display: none;
}


header ul.menu li {
	margin-right: 1em;
	line-height: 1.2;
	text-align:center;
}

header ul.menu li a,
header ul.menu li a:hover {
	color: #350103;
}


header ul.menu li span.jp {
	display: block;
}

header ul.menu li span.en {
	text-transform: capitalize;
	font-size: 87.5%;
}



/*
 *		main
 */

section:nth-of-type(even){
	background-color: #f6f1eb;
}
main .container span.jp {
	font-weight: normal;
	font-size: 75%;
}

main .container p {
	padding: 0 1em;
}

.main_img {
	position: relative;
	margin-top: 60px;
	height: 25em;
	background: url("../images/main_img.jpg") center center;
	background-size: cover;
}

.main_img img:first-of-type {
	position: absolute;
	top: 63%;
	width: 22em;
	left: calc( 50% - 12em );
	z-index: 9999;
}


/*
 *		concept
 */
.concept h3 {
	margin: 2em auto 1em;
	font-size: 120%;
	color: #350103;
	text-align: center;
	line-height: 1.4;
}

.concept p {
	text-align: center;
}

.concept p .xlarge {
	color: #350103;
}

/*
 *		service
 */

.service h3 {
	margin: 2em auto 1em;
	font-size: 120%;
	color: #350103;
	text-align: center;
	line-height: 1.4;
}

.service p {
	text-align: center;
}

.service p .xlarge {
}


/*
 *		message
 */

.message h3 {
	margin: 2em auto 1em;
	font-size: 120%;
	color: #350103;
	text-align: center;
	line-height: 1.4;
}

.message p {
	text-align: center;
}

.message p .xlarge {
	color: #350103;	
}

/*
 *		company
 */

.company table {
	margin: 0 auto;
	width: calc( 100% - 2em );
}

.company th {
	padding: 0.5em 1em;
	border-bottom: 1px solid #666;
	text-align: left;
	font-weight: normal;
}

.company td {
	padding: 0.5em 1em;
	border-bottom: 1px solid #666;
}


/*
 *		contact
 */

.contact h3 {
	margin-bottom: 0.3em;
}

.contact .wrap_input {
	display: flex;
	justify-content: space-between;
	padding: 0 1em;
}

.contact .div_left,
.contact .div_right {
	width: 48%;
}

.contact form {
}


.contact form input,
.contact form textarea {
	margin-bottom: 1em;
	padding: 0.2em;
	width: 100%;
	border: 1px solid #666;	
}


.contact form textarea {
	height: 12em;
}

.contact button {
	margin: 0.5em auto;
	padding: 0.5em 0;
	width: 100%;
	background: #111;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

.contact button:hover {
	opacity: 0.6;
}


/***	contact check 	***/

.contact_check .contactform {
	padding: 0 1em;
}

.contact_check .btn-area {
	display: flex;
	justify-content: space-between;
}

.contact_check .btn-area button {
	width: 48%;
}


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

	.pconly {display: none;}
	.sponly {display: block;}
	.xlarge {font-size: 125%;}
	
	body {word-break: break-all;}
	
	header ul.menu {
		display: none;
	  width: 100vw;
    position: absolute;
    top: 60px;
    left: 0;
		background: rgba(255,255,255,0.9);
		font-size: 100%;
	}
	
	header ul.menu li {
		margin-right: 0;
		padding: 0.5em 0;
	}

	header ul.menu li:nth-of-type(even) {
		background: rgba(255,252,247,0.5);
	}

	h2 {
			padding: 0 0.25em 0.5em;
	}
	
	.main_img {
		height: 30vh;
	}
	
	.main_img img:first-of-type {
    width: 50%;
		top: 65%;
    left: 23%;
	}

	main .container p {
			padding: 0 0.5em;
		text-align: left;
	}	
	
	.company table {width: 96%;}
	
	.company th {
		background: #fffcf7;
	}
	
	.company th,
	.company td {
		display: block;
		width: 100%;
		border: none;
	}
	
	.contact .wrap_input {
		flex-direction: column;
		padding:  0 0.5em;
	}

 	.contact .div_left,
	.contact .div_right	{
		width: 100%;
	}
	
	.contact button {
		display: block;
		margin: 0 auto;
		width: calc( 100% - 1em );
	}
	
	
	header .logonmenu {
		width: 96%;
	}
	
	.btn-trigger {
		display: block;
			position: absolute;
			top: 50%;
			right: 20px;
			width: 34px;
			height: 28px;
			transform: translateY(-50%);
			cursor: pointer;
	}
	.btn-trigger span {
			position: absolute;
			left: 0;
			width: 100%;
			height: 4px;
			background-color: #383838;
			border-radius: 4px;
	}
	.btn-trigger, .btn-trigger span {
			display: inline-block;
			transition: all .5s;
			box-sizing: border-box;
	}
	.btn-trigger span:nth-of-type(1) {
			top: 0;
	}
	.btn-trigger span:nth-of-type(2) {
			top: 12px;
	}
	.btn-trigger span:nth-of-type(3) {
			bottom: 0;
	}
	#btn.active span:nth-of-type(1) {
			transform: translateY(12px) rotate(-45deg);
	}
	#btn.active span:nth-of-type(2) {
			left: 50%;
			opacity: 0;
			animation: active-btn-bar02 .8s forwards;
	}
	@keyframes active-btn-bar02 {
			100% {
					height: 0;
			}
	}
	#btn.active span:nth-of-type(3) {
			transform: translateY(-12px) rotate(45deg);
	}

}