@charset "utf-8";

/* ------------------------------------------
	- COMMON SETTING
			- ANIMATION
		- HEADER
			- NAV MENU
		- FOOTER
		- FORM
			- CONFIRM
			- THANKS

	- TOP PAGE

	- WHAT WE DO PAGE

	- ARCHIVES
			- PAGER

	- DETAIL
			- TEXTAREA
			- BUTTON

	- COMPANY

	- CONTACT

	- RECRUIT
			- ACCORDION

	- PRIVACY

------------------------------------------ */

/* ==============================================================
	COMMON SETTING
============================================================== */
body{
	width:100%;
	box-sizing: border-box;
	font-family: YuGothic,'Yu Gothic','Yu Gothic UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
h1,h2,h3,h4,h5,h6{ line-height: 1.5;}
h1{
	font-size: 22px;
	line-height: 1.5em;
	letter-spacing: 1rem;
	margin:40px auto;
	font-family: 'Noto Serif JP',"Hiragino Mincho ProN","游明朝","Yu Mincho","YuMincho","HGS明朝E","メイリオ","Meiryo",serif;
	font-weight: 200;
}
h1 img{	height:28px;}
p,a,li,th,td{ line-height: 1.5; font-size: 14px; letter-spacing: 0.1rem;}
a{ text-decoration: none;	color: inherit;}
img {  max-width: 100%;  height: auto;}
iframe { width:100%; height:100%;}
.mincho{
	font-family: 'Noto Serif JP',"Hiragino Mincho ProN","游明朝","Yu Mincho","YuMincho","HGS明朝E","メイリオ","Meiryo",serif;
	font-weight: 200;
}
:focus{
	outline:0;
  outline-color: none;
  outline-style: none;
  outline-width: 0;
}
main{ width: 100%;}
.pc{ display: none;}
.flexbox{ display: block;;}
.contents{ 	width:100%;	margin:30px auto 50px;}
.tel a{	pointer-events: auto;}
.page_title{ padding-top:80px; text-align: center;}
img.title_logo{ width:60%; max-width: 307px;}

@media screen and (min-width:751px){
	h1,h2,h3,h4,h5,h6{ line-height: 1.8;}
	h1{
		font-size: 30px;
		line-height: 2em;
		letter-spacing: 1.2rem;
		margin:80px auto;
	}
	h1 img{	height:auto;}
	p,a,li,th,td{ line-height: 1.8; letter-spacing: 0.3rem;}
	main{ min-width: 1200px;}
	.sp{ display: none;}
	.pc{display: block;;}
	.flexbox{ display: flex;}
	.contents{ 	min-width:1100px;	max-width:1200px;	margin:30px auto 200px;}
	.tel a{	pointer-events: none;}
	.page_title{ padding-top:120px;}
	iframe { width:100%; height:100vh;}

}

/*-------	ANIMATION -------- */
.slowFadeIn {
	-webkit-transition: opacity 1000ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1000ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1000ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1000ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: translate(0px, 30px);
          transform: translate(0px, 30px);
  opacity: 0;
}
.slowFadeIn.active {
	-webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  opacity: 1;
}

/*	HEADER
------------------------------------------------ */
header {
	text-align: center;
	display: flex;
	justify-content: space-between;
	background: #202020;
	padding: 25px;
	width:900px;
	height:20px;
	left:0;
	right:0;
	margin:auto;
	position: fixed;
	z-index: 999;
}
header:before,header:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 70px solid #202020;
}
header:before{	right: 100%;	border-left: 30px solid transparent;}
header:after {  left: 100%;  border-right: 30px solid transparent;}
header .logo {  font-size: 20px;}

@media screen and (max-width:750px){
	header {
		width:50%;
		height:10px;
		padding: 15px 0;
		background: #000;
		display: block;
		position: fixed;
		right:0;
		left:0;
		margin: auto;
		z-index: 999;
	}
	header:before,header:after {	border-top: 40px solid #000;}
}

/*--------	NAV MENU ---------- */
.nav-button {  display: none;}
.nav_menu {	margin:0 auto;}
.nav li {  display: inline-block; 	}
.nav a {	color: #fff;	letter-spacing: 0.3rem; padding: 0 10px 0 17px;}
.nav li a {	border-left: 1px solid #fff;}
.nav li:first-child a{	border-left:none;}
.nav-wrap.open {  display: block;}
.nav-wrap.close {  display: none;}

@media screen and (min-width: 751px) {
  .nav-wrap {  display: block !important;}
}

@media screen and (max-width:750px){
  .nav-wrap {
		position: fixed;
		left: 0;
		top: 30px;
		display: none;
		z-index: -1;
		background-color: #343434;
		width: 100%;
		height: auto;
		animation-name: fadein;
		animation-duration: 0.5s;
  }
	@keyframes fadein {
		from {
		    opacity: 0;
		    transform: translateY(-20px);
		}
		to {
		    opacity: 1;
		    transform: translateY(0);
		}
	}
  .nav-wrap .nav {
		height: 100%;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
  }
  .nav-wrap li {  width:100%; display: block;  padding:1.5em 0; border-bottom:1px solid #000;}
  .nav-wrap li a {  padding:1em 0;color: #fff;  font-size: 18px; border-left: none;}

  /* メニューボタン */
  .nav-button,
  .nav-button span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
		right:0;
		left:0;
		margin: auto;
		position: absolute;
	}
  .nav-button {
		cursor: pointer;
		z-index: 20;
		display: block;
		width: 100%;
		height: 40px;
		background: #000000;
		top:0;
  }
	/* トグルボタン */
  .nav-button span {
		width: 30px;
		height: 3px;
		background-color: #fff;
		border-radius: 4px;
  }
  .nav-button span:nth-of-type(1) {  top: 10px;}
  .nav-button span:nth-of-type(2) {  top: 19px;}
  .nav-button span:nth-of-type(3) {  top: 28px;}
  .nav-button.active span:nth-of-type(1) {
		-webkit-transform: translateY(9px) rotate(-45deg);
		transform: translateY(9px) rotate(-45deg);
  }
  .nav-button.active span:nth-of-type(2) {  opacity: 0;}
  .nav-button.active span:nth-of-type(3) {
		-webkit-transform: translateY(-9px) rotate(45deg);
		transform: translateY(-9px) rotate(45deg);
  }
}


/*	FOOTER
------------------------------------------------ */
footer{	text-align: center; }

@media screen and (min-width:751px){
	footer{	width:100%; min-width: 1200px;}
}
footer .flexbox{	align-items: stretch; }
footer .flexbox__item{	width:50%; max-height:100vh;}
footer .text{	align-self:center;}
footer .text img{	margin:120px auto 40px;}
footer .text h2{	font-size: 24px;	font-weight: bold;	margin-bottom:5px;}
footer .text .sub{	font-weight: bold;}
footer .text p,footer .text a,footer .text li{letter-spacing:normal;}
footer .text p.note{	font-size: 18px;	margin:20px auto 40px;}
footer .text p.note2{	font-size: 18px; margin-top:30px; margin-bottom: 200px;}
footer .text p.tel{	margin-top:5px;}
footer .text ul{	display: flex;	justify-content: center;	margin: 10px auto;}
footer .text li{
	padding:5px 10px;
	border:1px solid #000;
	margin:0 5px;
	border-radius: 5px;
}
footer .copyright{	padding:30px 0;	background: #202020;	color: #fff; }
footer .copyright p{	margin-top:10px; letter-spacing: normal;}
footer .copyright a{ letter-spacing: normal;}


@media screen and (max-width:750px){
	footer .flexbox__item{	width:100%;}
	footer .text img{	width:50%; margin: 40px auto 30px;}
	footer .text{	align-self:center;}
	footer .text h2{	font-size: 18px;}
	footer .text p{	width:90%; margin:0 auto;}
	footer .text p.note{	font-size: 14px; margin:0 auto 25px;}
	footer .text p.note2{	font-size: 14px; margin-bottom: 30px}
	footer .text .sub{	margin:20px auto;}
	footer .text li{ font-size: 12px;	margin:0 2px; padding: 3px 5px;}
	footer .copyright{	padding:25px 0;	}
	footer .copyright p{	margin-top:5px; font-size: 8px; }

}


/*	FORM
------------------------------------------------ */
.form_entry p{	letter-spacing: normal;	font-size: 14px;}
.form_entry table th,.form_entry table td{
	display: block;
	text-align: left;
	width: 95%;
	padding:0 2.5%;
}
.form_entry table th{
	margin:10px 0 5px 0;
	font-size: 14px;
	font-weight: bold;
}
.form_entry p span,.form_entry table th .must{	color:#ff0000;}
.form_entry table td{
	margin-bottom: 20px;
	border-bottom: #b5b5b5 solid 1px;
	padding:10px 0 20px 10px;
	display: block;
}
.form_entry table .flexbox{
	width:100%;
	display: flex;
	align-items: center;
	padding-bottom:8px;
	flex-wrap: wrap;
}
.form_entry table .mail_box{
	/*padding-bottom:0;*/
}
.form_entry table td .kome{	padding:0 5px;}
.form_entry table th .note{	font-size: 12px; padding-left:5px;}
.form_entry table td .b_size{	padding-bottom:8px;}
.form_entry table td .note.r_sp{width:100%; padding-bottom:5px;}
.form_entry table td .note.l_sp{padding-left: 5px;}

@media screen and (min-width:750px){
	.form_entry table{
		margin:0 auto;
		display: flex;
		align-items: center;
	}
	.form_entry table tr{	display: flex;}
	.form_entry table th,
	.form_entry table td{
		display: block;
		text-align: left;
		padding:15px 0;
	}
	.form_entry table th{	width:280px;}
	.form_entry table td{	margin-bottom: 0;	border-bottom: 0;}
	.form_entry table th .note{padding-left:0;}
	.form_entry table td .kome{	padding:0 10px;}
	.form_entry table td .note{	font-size: 14px; padding-left:5px;}
	.form_entry table .flexbox{	justify-content: flex-start;	padding-bottom:5px;}
	.form_entry table .mail_box{ padding-bottom:0;}
	.form_entry table td .note.r_sp{padding-right: 8px;}
	.form_entry table td .note.sp_size{padding-right: 32px; padding-bottom: 5px;}
}

.form_entry input[type="text"].long{	width:95%;}
.form_entry input[type="text"].short{	width:95%;}
.form_entry textarea{ width:94%; }
.form_entry input[type="text"],.form_entry textarea,.form_entry select{
  outline: none;
	font-size: 14px;
  border: 1px solid #b3b3b3;
	padding:10px 0 10px 10px;
	background: #eeeeee;
  -webkit-transition: all .3s;
  transition: all .3s;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Chrome, Safari */
}
.form_entry input[type="text"]:focus,.form_entry textarea:focus {
  box-shadow: 0 0 7px #87cefa;
  border: 1px solid #87cefa;
	background: #ffffff;
}
/* 送信ボタン */
		/* ▼▼ iOSでのデフォルトスタイルをリセット ▼▼ */
		input[type="submit"],
		input[type="button"] {
		  border-radius: 0;
		  -webkit-box-sizing: content-box;
		  -webkit-appearance: button;
		  appearance: button;
		  border: none;
		  box-sizing: border-box;
		  cursor: pointer;
		}
		input[type="submit"]::-webkit-search-decoration,
		input[type="button"]::-webkit-search-decoration { display: none;}
		input[type="submit"]::focus,
		input[type="button"]::focus {  outline-offset: -2px;}
		/* ▲▲ iOSでのデフォルトスタイルをリセット ここまで ▲▲ */

.form_entry input[type="submit"],
.form_entry input[type="button"],
.thanks .text_area p.btn{
	width:200px;
	padding:10px 30px;
	background: #1b1b1b;
	color: #ffffff;
	margin: 40px auto;
	font-size: 16px;
	border-radius: 5px;
}
.form_entry input[type="submit"]:hover,
.form_entry input[type="button"]:hover,
.thanks .text_area p.btn:hover{opacity: 0.8; cursor: pointer;}
/* 送信ボタン - 押せないとき */
.form_entry input[type="submit"][disabled],
.form_entry input[type="submit"][disabled]:hover {
	background-color: #b3b3b3; cursor: default; opacity: 1;}
.form_entry .check{	padding-top: 25px;	text-align: center;}
.form_entry .check a{	padding-left: 5px; font-size: 16px; letter-spacing: normal;}

@media screen and (min-width:750px){
	.form_entry input[type="text"].long{	width:90%; max-width: 504px;}
	.form_entry input[type="text"].short{	width:68%; max-width: 380px;}
	.form_entry textarea{ width:90%; max-width: 504px;}
	.form_entry input[type="submit"],
	.form_entry input[type="button"],
	.thanks .text_area p.btn{	margin: 20px auto;}
	.form_entry .check{	padding-top: 15px;}
	.form_entry .check input[type=checkbox] {	transform: scale(1.2);}
	.form_entry .check a:hover{opacity: 0.7;}
}

/* ----- CONFIRM ----- */
.confirm .confirm_area{width:85%; margin:0 auto;}
.confirm .confirm_area table{ width:100%; margin-bottom:5em;}
.confirm .confirm_area p.btn{	text-align: center;	margin:0 auto;}
.confirm .form_entry input[type="submit"],
.confirm .form_entry input[type="button"]{	margin: 10px;}
.confirm .form_entry p.lead,.confirm .form_entry ul.lead li{ font-size: 16px;}

@media screen and (min-width:750px){
	.confirm .confirm_area{ width:700px;}
	.confirm .confirm_area th,.confirm .confirm_area td{ vertical-align: top;}
	.confirm .confirm_area th{margin:0;}
	.confirm .confirm_area table td p.note{width:auto; padding-bottom:0;}
	.confirm .confirm_area table td .note.r_sp{padding-right: 15px;}
	.confirm .confirm_area table td .note.sp_size{padding-right: 42px;}
	.confirm .confirm_area p.btn{	text-align: center;}
	.confirm .confirm_area input[type="submit"],
	.confirm .confirm_area input[type="button"]{　margin:20px 10px;}
	.confirm .confirm_area p.knowing{ font-size: 18px; text-align: center; margin-bottom: 2em;}
}

/* ----- THANKS ----- */
.thanks .text_area{	text-align: center;}
.thanks .text_area p.mailer_msg{	width:85%; margin:0 auto;}
.thanks .text_area p.gototop{	margin-top:5em;}

@media screen and (min-width:750px){
	.thanks .text_area{	margin-bottom: 200px;}
	.thanks .text_area p,.thanks .text_area a{	letter-spacing: normal;}
	.thanks .text_area p.mailer_msg{	margin-bottom: 3em;}
}


/* ==============================================================
	TOP PAGE
============================================================== */
#toppage{ text-align: center;}
#toppage p{
	line-height: 2.5em;
	letter-spacing: 0.5rem;
	margin-bottom: 4em;
	font-size: 13px;
}
#toppage p.big{line-height: 2em; font-size: 17px; letter-spacing: 0.65rem;}
#toppage .favorite a:hover,#toppage .archives a:hover{ opacity: 0.7;}
#toppage .top{	background: url(../img/top_bg.jpg) no-repeat;}
#toppage .intro{
	margin-top:-2px;
	background: url(../img/intro_bg.jpg) no-repeat;
	color: #fff;
	padding:10% 20%;
}
#toppage .archives {
	background: url(../img/bg_archives.jpg) no-repeat;
	padding:10% 20%;
}
#toppage .top,#toppage .intro,#toppage .archives {
	background-size: cover;
	background-position: center;
}
#toppage .top img{	padding:15% 20% 28% 20%;}
#toppage .intro h1{	font-size: 45px;	letter-spacing: 2rem;}
#toppage .favorite { background:#202020; color:#fff; padding:5em 0; margin-top:-2px;}
#toppage .favorite p{margin-top: 4em;}
#toppage .archives img{	margin-bottom:4em;}

@media screen and (max-width:750px){
	#toppage{ margin-top:0;}
	#toppage .intro{
		background: url(../img/intro_bg_sp.jpg) no-repeat;
		padding:0;
	}
	#toppage .archives {
		background: url(../img/bg_archives_sp.jpg) no-repeat;
		padding:100px 0;
	}
	#toppage .top,#toppage .intro,#toppage .archives {
		background-size: cover;
		background-position: center;
	}
	#toppage .intro h1{	font-size: 24px;	letter-spacing: 0.8rem;}
	#toppage p{	line-height: 2em; letter-spacing: 0.3rem;}
	#toppage p.big{font-size: 16px;}
	#toppage .top img{	width:80%; padding:18% 2% 25% 2%;}
	#toppage .intro{	padding:10% 1.5%;}
	#toppage .favorite img{width:80%;}
	#toppage .favorite p{width:80%; margin-left: auto; margin-right: auto;}
	#toppage .favorite .btn{width:80%; margin:0 auto;}
	#toppage .archives img{	margin-top:2em;}
	#toppage .archives img:first-child{	width:60%; margin-bottom: 0;}
	#toppage .archives p{	line-height: normal; width:20%; margin-top:0; margin-left: auto; margin-right: auto;}

}


/* ==============================================================
	WHAT WE DO PAGE
============================================================== */
#what img.intro_img{ width:100%;}
#what p{	line-height: 2em;}
#what .intro p{	width:750px;	margin:80px auto;	font-weight: bold;}
#what .contents{	flex-wrap: wrap;	justify-content: center;}
#what .contents .flexbox__item{
	width:29%;
	margin:30px 0;
	padding:30px 2.1%;
	border-right: 1px solid #000;
	text-align: center;
}
#what .contents .flexbox__item p{	letter-spacing: normal; text-align: left;}
#what .contents .flexbox__item:nth-child(3),
#what .contents .flexbox__item:last-child{	border-right: none;}
#what .contents .flexbox__item:nth-child(4){	flex-grow: 2;}
#what .contents .flexbox__item:nth-child(4) p{	margin-top: 50px;}
#what img.item_img{	margin-top:10px;}

@media screen and (max-width:750px){
	#what .intro p{	width:85%;	margin:30px auto;}
	#what .contents p{	text-align: left;}
	#what .contents .flexbox__item{
		width:85%;
		margin:30px auto;
		padding:30px 2.1%;
		border-right: none;
		text-align: center;
	}
	#what .contents .flexbox__item img.item_title{
		width:55%;
	}
}


/* ==============================================================
	ARCHIVES
============================================================== */
#archives .flexbox{
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: space-between;
}
#archives .flexbox__item{
	width:30%;
	max-width: 390px;
	text-align: center;
	margin:20px 20px 50px;
}
#archives .text_area{	width:90%;	margin:0 auto;}
#archives .text_area h2{	margin:10px auto;	font-size: 18px;	font-weight: bold;}
#archives .text_area h3{	font-size: 18px; margin-top:15px ;}
#archives .text_area p{
	padding:5px 0;
	width: 120px;
	color: #fff;
	border-radius: 5px;
	margin: 0 auto;
}
#archives .text_area p.reno{	background: #67b3b0;	letter-spacing: normal;}
#archives .text_area p.new{	background: #009fe6;}

@media screen and (min-width:751px){
	#archives .flexbox__item img{
		width:360px;
		height:240px;
		object-fit: cover;
		object-position: center;
	}
}

@media screen and (max-width:750px){
	#archives .flexbox{
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-content: space-between;
	}
	#archives .flexbox__item{
		width:45%;
		margin:20px 2.5% 50px;
	}
	#archives .flexbox__item img{
		width:100%;
		height:30vw;
	}
	#archives .text_area h3{	font-size: 16px;}
}

/* PAGER
------------------------------------------------ */
.pager {	margin:4em auto 20px;}
.pager ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
.pager ul li {	margin: 0 5px;}
.pager ul li span,.pager ul li a {
	display: block;
	font-size: 16px;
	padding: 0.6em 1em;
	border-radius: 3px;
	letter-spacing: normal;
}
.pager ul li a {	color: #000;	border:1px solid #000;}
.pager ul li.current a{	background: #dbdbdb;}
.pager ul li.arrow a{	border:none;	font-size: 14px;}
.pager ul li a:hover {  opacity: 0.7;}

@media screen and (max-width:750px){
	.pager {	width:90%; margin-top:7em;}
	.pager ul li {	margin: 0 2px;}
	.pager ul li span,.pager ul li a {
		font-size: 14px;
		padding: 5px 8px;
		border-radius: 3px;
		letter-spacing: normal;
	}
	.pager ul li.arrow a{	letter-spacing: normal; font-size: 12px;}
}


/* ==============================================================
	DETAIL
============================================================== */
#detail .swiper-slide{	text-align: center;	margin:0 auto;}
#detail .b-mark,#detail .a-mark{
	position: absolute;
	width:96px;
	height:96px;
	top:0;
	right:100px;
	z-index: 10;
	background-size: 96px 96px;
	background-position: center;
	background-repeat: no-repeat;
}
#detail .b-mark{
	background-image: url(../img/before.png);
}
#detail .a-mark{
	background-image: url(../img/after.png);
}
#detail .caption{
	max-width:760px;
	position: absolute;
	bottom:2px;
	left:100px;
	background: #000;
	color: #fff;
	padding:10px 20px;
	text-align: left;
	font-size: 12px;
	letter-spacing: normal;
}
@media screen and (min-width:751px){
	#detail .swiper-container{
		width:1000px;
	}
	#detail .swiper-slide img{
	  width:800px;
		height:600px;
		background: #606060;
		object-fit: contain;
	}
}

@media screen and (max-width:750px){
	#detail .b-mark{		right:0;	}
	#detail .a-mark{		right:0;	}
	#detail .caption{
		position: relative;
		max-width:96%;
		left:0;
		right:0;
		bottom:2px;
		padding:0;
		margin:10px 2% ;
		text-align: left;
		background: #fff;
		color: #000;
		height:auto;
	}
	#detail .swiper-slide img{
		width:100%;
		height:75vw;
		background: #606060;
		object-fit: contain;
	}
}

#detail .swiper-my-pagination .swiper-pagination-bullet {
	width: auto;
  height: auto;
  border-radius: 0;
	width:20%;
  background: transparent;
  opacity: 1;
	margin:10px 0;
}
#detail .swiper-my-pagination .swiper-pagination-bullet-active {
  background: transparent;
  opacity: 0.5;
}
#detail .swiper-container-horizontal > #detail .swiper-my-pagination.swiper-pagination-bullets .swiper-pagination-bullet {  margin: 0;}
#detail .swiper-my-pagination {
	width:800px;
  display: flex;
	flex-wrap: wrap;
	margin:10px auto 0;
}
#detail .swiper-my-pagination img { box-shadow: none; margin: 0; vertical-align: bottom; width:160px; height:106px; object-fit: cover;; object-position: center; background: #000;}

@media screen and (max-width:750px){
	#detail .swiper-my-pagination,#detail .swiper-my-pagination img{
		display: none;
	}
}
/* ----- TAXT AREA ------ */
#detail .text_area{	width:700px;	margin:2em auto;	text-align: center;}
#detail .text_area h2{ font-size: 21px;	margin-bottom:15px;}
#detail .text_area h3{ font-size: 14px; font-weight: bold;	margin-bottom:15px;}
#detail .text_area p{
	padding:5px 0;
	width: 120px;
	color: #fff;
	border-radius: 5px;
	margin: 0 auto 15px;
}
#detail .text_area p.reno{ background: #67b3b0; letter-spacing: normal;}
#detail .text_area p.new{	background: #009fe6;}
#detail .t-block{ width:600px; background: #ededed; padding:20px; border-radius: 5px; margin:20px auto;}
#detail table{ text-align: left;}
#detail th,#detail td{	letter-spacing: normal;	padding-bottom:5px;}
#detail th:last-child,#detail td:last-child{	padding-bottom:0;}
#detail th{ width:80px; font-weight: bold;}

@media screen and (max-width:750px){
	#detail .text_area{	width:85%;}
	#detail .text_area h2{ font-size: 18px;	margin-bottom:15px;}
	#detail .t-block{ width:89%; }
}

/* ----- BUTTON ------ */
#detail p.btn{ text-align: center; margin-top:5em;}
#detail p.btn a{
	width:200px;
	padding:15px 55px;
	background: #1b1b1b;
	color: #ffffff;
	font-size: 16px;
	border-radius: 5px;
	letter-spacing: normal;
}

@media screen and (max-width:750px){
	#detail p.btn{ margin-top:2em;}
}


/* ==============================================================
	COMPANY
============================================================== */
#company .flexbox{margin-bottom:100px;}
#company .flexbox__item{ width:50%;}
#company .text { margin-left:50px;}
#company .text h2{ font-size: 18px; font-weight: bold; margin:50px 0 30px;}
#company .text table{ width:90%;}
#company .text th,#company .text td{ letter-spacing: normal; padding-bottom:0.6em;}
#company .text th{width:120px; text-align: left; font-weight: bold;}

@media screen and (max-width:750px){
	#company .flexbox__item{ width:100%;}
	#company .text { width:90%; margin:0 auto;}
	#company .text table{ width:100%;}
}


/* ==============================================================
	CONTACT
============================================================== */
#contact .sidebar_left{ width:25%; margin-right:5%;}
#contact .sidebar_left p{ font-size: 12px; margin-bottom:3em; letter-spacing: normal;}
#contact .sidebar_left strong.tel a{ font-size: 18px; letter-spacing: 0.1rem;}
#contact .sidebar_left .lineid strong{ font-size: 16px;}
#contact .sidebar_left .lineid{ margin-bottom: 2em;}
#contact .sidebar_left .lineid p{ margin-bottom: 0;}
#contact .sidebar_left .lineid img{ width:40%; max-width: 200px;}
#contact .main_area{ width:70%;}
#contact p.note{ font-size: 12px;}
#contact span.must{ color: #c50018;}

@media screen and (min-width:751px){
	#contact .sidebar_left{ max-width: 300px;}
	#contact .main_area{ max-width: 840px;}
}
@media screen and (max-width:750px){
	#contact .flexbox__item{ width:85%; margin:0 auto;}
	#contact .sidebar_left{ width: 85%; margin:0 auto;}
	#contact .sidebar_left .lineid img{ width:90%; margin-top:20px; }

}
/* ==============================================================
	RECRUIT
============================================================== */
#recruit .intro{	text-align: center;}
#recruit h2{	font-size: 24px;}
#recruit .intro h2{	letter-spacing: 0.2rem; margin-bottom:1em;}
#recruit .intro p{	margin-bottom:2em;}
#recruit .job{	width:800px;	margin:0 auto;}
#recruit .j_category{	width:300px;	margin-right:4em;}
#recruit .desc{	margin-top:5em; margin-bottom: 80px;}
#recruit .desc h3{	font-size: 14px;	font-weight: bold;}
/*#recruit .desc p{
	width:160px;
	font-size: 18px;
	font-weight: bold;
	border:1px solid #000;
	border-radius: 5px;
	padding:10px 15px;
	margin-top:10px;
	letter-spacing: 0.1rem;
}*/
#recruit .desc table{	margin-top:10px;}
#recruit .desc th,#recruit .job td{
	letter-spacing: normal;
	padding-bottom: 8px;
}
#recruit .desc th{	font-weight: bold;	width:80px;	text-align: left;}
#recruit .main_area{	background: #f6f6f6;	padding:80px 0 200px;}
#recruit .main_area .top,#recruit .main_area form{
	width:800px;
	margin:0 auto;
}
#recruit .main_area .top{	text-align: center;}
#recruit .main_area .top h2{
	margin:30px auto 20px;
	letter-spacing: 0.4rem;
}
#recruit .main_area .top p.tel,#recruit .main_area .top p.tel a{
	font-size:36px;
	margin:20px auto 0;
	letter-spacing: 0.4rem;
}
#recruit .main_area .top p{ margin-bottom:30px; font-size: 18px;}
#recruit .main_area table{	width:90%; max-width: 720px;}
#recruit .main_area th{letter-spacing: normal;}

@media screen and (max-width:750px){
	#recruit h2{	font-size: 18px; }
	#recruit .job{	width:85%;}
	#recruit .j_category{	width:100%;	margin-right:0; margin-bottom:2em;}
	#recruit .main_area{ padding:2em 0 50px;}
	#recruit .main_area .top,#recruit .main_area form{
		width:90%;
		margin:0 auto;
	}
	#recruit .main_area .top{	margin-bottom:2em;}
	#recruit .main_area table{	width:100%;}
	#recruit .main_area .top p,#recruit .main_area .top a{
		font-size:15px;
		letter-spacing: normal;
	}
	#recruit .main_area .top p.tel,#recruit .main_area .top p.tel a{
		font-size:28px;
		margin:20px auto 10px;
		letter-spacing: 0.1rem;
	}
}
@media screen and (min-width:751px){
	#recruit .main_area{	width:100%; min-width: 1200px;}
}


/* ----- ACCORDION　------ */
#recruit .accbox {	margin: 2em 0 4em;	padding: 0;	width: 100%;}
#recruit .accbox label {/*ラベル*/
	width:200px;
	font-size: 18px;
	font-weight: bold;
	border:1px solid #000;
	border-radius: 5px;
	padding:20px 15px;
	margin-top:10px;
	letter-spacing: 0.1rem;
	display: block;
	cursor :pointer;
	transition: all 0.5s;
}
#recruit .accbox label:before {
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	padding-right: 8px;
}
#recruit .accbox input {	display: none;}
#recruit .accbox .accshow {/*中身を非表示にしておく*/
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}
#recruit .cssacc:checked + label + .accshow {	height: auto;	padding: 5px;	opacity: 1;}
#recruit .accbox .accshow p {	margin: 5px 0;	font-size: 14px;	letter-spacing: normal;}
#recruit .accbox .accshow p.mini {	font-size: 12px;}
#recruit .cssacc:checked + label:before {/*アイコンを入れ替える*/
	content: '\f078';
}


/* ==============================================================
	PRIVACY
============================================================== */
#privacy h1{
	font-size: 18px;
	font-weight: bold;
	letter-spacing: normal;
	font-family: YuGothic,'Yu Gothic','Yu Gothic UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
#privacy .inner{	width: 900px;	margin:30px auto 200px;}
#privacy .inner h2{
	font-size: 14px;
	font-weight: bold;
	margin-top:20px;
}
#privacy .inner p,#privacy .inner li{	letter-spacing: normal;}
#privacy .inner ul.add{	margin-top:20px;}

@media screen and (max-width:750px){
	#privacy .inner{	width: 85%;	margin:30px auto 100px;}

}