@charset "utf-8";
/* CSS Document */

/* ==============================
/* TOP
============================== */
body#top h2 {margin-bottom: 20px; text-align: center; font-size: 1.4em;}
/* 新着情報 NEWS
----------------------------- */
body#top .news {max-width: 700px;}
body#top .news .wrap {height: 6.5em; overflow: auto;}
body#top .news dl {display: flex; justify-content: flex-start; margin-bottom: 10px; flex-wrap: wrap; border-bottom: #666 1px solid;}
body#top .news dt {width: 26%; padding: 10px; font-weight: normal;}
body#top .news dd {width: 72%; padding: 10px;}
body#top .news dd a {display: block;}
/* 会社の強み COMPANY
----------------------------- */
body#top .company .box {margin-bottom: 20px;}
/* ブログ BLOG
----------------------------- */
body#top .blog .secList {margin-bottom: 20px; padding-bottom: 10px; border-bottom: #333 2px dotted;}
body#top .blog .secList a {display: flex; justify-content: center;}
body#top .blog .secList .thumb {padding: 0 10px;}
body#top .blog .secList .box {padding: 0 10px;}
body#top .blog .secList .box dl {display: flex; justify-content: flex-start; margin-bottom: 5px;}
body#top .blog .secList .box .date {padding-right: 10px; font-size: 1.2em; font-weight: normal;}
body#top .blog .secList .box .cat {display: inline-block; padding: 5px; color: #fff; text-align: center; font-size: 0.7em; font-weight: bold;}
body#top .blog .secList .box .cat.red {background-color: #c00;}
body#top .blog .secList .box .cat.blue {background-color: #06c;}
body#top .blog .secList .box .tit {margin-bottom: 2px; font-weight: bold;}
body#top .blog .secList .box .txt {line-height: 1.2;}


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

/* ==============================
/* 設備
============================== */
body#equipment .sec01 {display: flex; justify-content: space-around; align-items: flex-start; margin-bottom: 20px;}
body#equipment .sec01 .box {width: 48%;}
body#equipment .sec01 .box p {margin-bottom: 10px; line-height: 1.4; text-align: center;}
body#equipment .sec01 .box p:nth-child(n+2) {padding: 0 10px 10px 10px; border-bottom: #000 1px solid;}
body#equipment .sec01 .box p:last-child {text-align: left;}
body#equipment .sec02 {padding: 20px;}
body#equipment .sec02 .sec02In {padding: 20px; background-color: #ffffdc;}
body#equipment .sec02 .tit {display: inline-block; margin-bottom: 15px; border-bottom: #000 1px solid; font-weight: bold; font-size: 25px;}
body#equipment .sec02 .box {display: flex; justify-content: space-between; margin-bottom: 20px;}
body#equipment .sec02 .sec02-2 .box {margin-bottom: 0;}
body#equipment .sec02 .box p {width: 50%; line-height: 1.5;}
body#equipment .sec02 .note {margin-top: 10px; padding: 10px; border: #000 1px solid;}
body#equipment .sec03 .box {width: 80%; margin: 40px auto 0;}
body#equipment .sec03 .box p {margin-bottom: 10px; line-height: 1.4; text-align: center;}
body#equipment .sec03 .box p:nth-child(n+2) {padding: 0 10px 10px 10px; border-bottom: #000 1px solid;}
body#equipment .sec03 .box p:last-child {text-align: left;}


/* ==============================
/* 採用情報
============================== */
body#recruit .staff,
body#recruit .jobList {width: 90%; margin: 20px auto 40px;}
body#recruit .staff p, body#recruit .jobList p {padding: 10px;}
body#recruit .staff p.tit,
body#recruit .jobList p.tit {padding-left: 0; font-weight: bold; font-size: 25px;}
body#recruit .staff dt.label {
	position: relative;
	cursor: pointer;
}
body#recruit .staff dt.label p {padding-left: 50px; font-size: 18px; cursor: pointer;}
body#recruit .staff dt.label + dd {
	display: none;
	padding: 8px;
	border: 1px solid #d9d9d9;
	font-size: 14px;
}
body#recruit .staff dt.label + dd > div {display: flex; justify-content: space-between;}
body#recruit .staff dt.label + dd > div div {width: 48%;}
body#recruit .staff dt.label + dd > div .txt dd {line-height: 1.4; margin-bottom: 20px;}
body#recruit .staff .icon-wrap {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translatey(-50%);
	width: 30px;
	height: 30px;
	background: #000;
}
body#recruit .staff .icon {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
}
body#recruit .staff .icon:before,
body#recruit .staff .icon:after {
	position: absolute;
	content: "";
	display: block;
	transition: all 0.4s;
	background: #fff;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 2px;
	transform: translate(-50%, -50%);
}
body#recruit .staff .icon:before {
	transform: translate(-50%, -50%) rotate(90deg);
}
/*＋、－切り替え*/
body#recruit .staff .icon.open:before {
	transform: translate(-50%, -50%) rotate(0deg);
}


/* ==============================
/* 会社概要
============================== */
body#company .greeting h2,body#company .overview h2,body#company .history h2,body#company .access h2 {margin-bottom: 20px; text-align: center; font-size: 1.4em;}
body#company .greeting .greetingIn {display: flex; justify-content: space-around; /* font-family: "Sawarabi Gothic"; */}
body#company .greeting .greetingIn div:first-child {font-family: 'Noto Serif JP', serif;}
body#company .greeting .greetingIn p {line-height: 1.5; font-size: 1.3rem;}
body#company .greeting .greetingIn p:first-child {padding-bottom: 10px; font-size: 1.5rem; font-weight: bold;}
body#company .overview table th {width: 35%; padding: 10px 0;border-bottom: #333 1px solid;}
body#company .overview table td {width: 65%; padding: 10px 0;border-bottom: #333 1px solid;}
body#company .history ul li {display: flex; justify-content: flex-start; flex-wrap: wrap;}
body#company .history ul li div:first-child {width: 30%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: #000 1px dotted;}
body#company .history ul li div + div {width: 70%;}
body#company .history ul li div + div p {margin-bottom: 10px; padding: 0 0 10px 10px; border-bottom: #000 1px dotted;}

/* ==============================
/* お問い合わせ
============================== */
body#contact .wrapper {width: 90%;}
body#contact .contents {line-height: 1.5; width: 70%; margin: 0 auto;}
body#contact .contents form dl {margin: 20px 0 10px;}
body#contact .contents form dt span {display: inline-block; margin-left: 10px; padding: 3px 5px; background-color: #ff6600; color: #fff; font-size: 0.9em; font-weight: bold;}
body#contact .contents form input,body#contact .contents form textarea {width: 100%; max-width: 400px; padding: 5px; border: #666 1px solid;}
body#contact .contents form p {width: 30%; margin: 0 auto; text-align: center;}

/* ==============================
/* 個人情報の取り扱いについて
============================== */
body#privacy .wrapper {width: 90%;}
body#privacy .contents {line-height: 1.5; font-size: 0.8rem;}
body#privacy .contents p {margin-bottom: 20px;}
body#privacy ol li {padding-bottom: 10px; list-style: decimal; list-style-position: inside;}
body#privacy .contents .signature {margin-top: 30px; text-align: right;}




/* ==============================
/* レスポンシブ
============================== */
/* == PC == */
/* @media (min-width: 1080px) {}
@media (max-width: 999px) {}
@media (max-width: 896px) {} */
@media (min-width: 767px) {  
  /* 会社の強み COMPANY
  ----------------------------- */
  body#top .company .box {overflow: hidden;}
  body#top .company .box p {width: 49%;}
  body#top .company .box .img {float: left;}
  body#top .company .box .txt {float: right;}
  body#top .company .box:nth-child(even) .img {float: right;}
  body#top .company .box:nth-child(even) .txt {float: left;}
  
  .secBoxWrap {display: flex; justify-content: space-between;}
  .secBoxWrap div.secBox {width: 46%;}
  
  /* 実績 ACHIEVEMENT
  ----------------------------- */
  body#top .achievement .box {overflow: hidden; margin-bottom: 20px;}
  body#top .achievement .box p {width: 49%;}
  body#top .achievement .box .img {float: left;}
  body#top .achievement .box .txt {float: right;}
  body#top .achievement .box:nth-child(even) .img {float: right;}
  body#top .achievement .box:nth-child(even) .txt {float: left;}


  /* ブログ BLOG
  ----------------------------- */
  body#top .blog .secList .box {padding: 20px 10px;}
  body#top .blog .secList .box .tit {margin-bottom: 10px;}


	/* ==============================
	/* 設備
	============================== */	
	body#equipment .sec02 .box p:first-child {width: 45%;}
 /* ==============================
 /* お問い合わせ
 ============================== */
 body#contact .contents form dl {display: flex;}
 body#contact .contents form dt {width: 40%;}
}
/* == タブレット == */
@media (max-width: 767px) {
  /* 会社の強み COMPANY
  ----------------------------- */
  body#top .company .box .txt {margin: 20px 0;}

  /* 実績 ACHIEVEMENT
  ----------------------------- */
  body#top .achievement .box .txt {margin: 20px 0;}

  /* ==============================
  /* お問い合わせ
  ============================== */
  body#contact .contents {width: 100%;}
  body#contact .contents form dt {margin-bottom: 10px;}
}
/* @media (max-width: 736px) {}
@media (max-width: 640px) {}
@media (max-width: 568px) {} */
/* == SP == */
@media (max-width: 479px) {
	/* ブログ BLOG
	----------------------------- */
	body#top .blog .secList .thumb {padding: 0 5px;}
	body#top .blog .secList .box {padding: 0 5px; font-size: 0.92em;}

	/* 会社概要 COMPANY
	----------------------------- */
	body#company .greeting {display: block;}
	body#company .greeting .greetingIn {display: block;}
	body#company .greeting div:first-child {margin-bottom: 10px;}
	body#company .greeting p {font-size: 0.95rem;}

	/* ==============================
	/* 設備
	============================== */
	body#equipment .sec01 {margin-bottom: 10px;}
	body#equipment .sec01 .box p {font-size: 12px;}
	body#equipment .sec02 .box {display: block;}
	body#equipment .sec02 .box p {width: 100%;}
	body#equipment .sec02 .box p:nth-of-type(2) {margin: 20px 0 30px;}

	/* ==============================
	/* 採用情報
	============================== */
	body#recruit .staff dt.label + dd > div {display: block;}
	body#recruit .staff dt.label + dd > div div {width: 100%; margin-bottom: 10px;}
}
@media (max-width: 414px) {
	/* ==============================
	/* 設備
	============================== */
	body#equipment .sec01 .box p {font-size: 10px;}
	body#equipment .sec02 .tit {font-size: 20px;}
}
@media (max-width: 390px) {}
@media (max-width: 375px) {}
@media (max-width: 360px) {}
@media (max-width: 320px) {}