@charset 'utf-8';

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}

@font-face {
  font-family: "NotoSansCJKjp";
  font-style: normal;
  font-weight: normal;
  src: url("../font/NotoSansCJKjp-Regular.eot"), url("../font/NotoSansCJKjp-Regular.woff") format("woff"), url("../font/NotoSansCJKjp-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Raleway-Bold";
  font-style: normal;
  font-weight: normal;
  src: url("../font/Raleway-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "YUGOTHR";
  font-style: normal;
  font-weight: normal;
  src: url("../font/YUGOTHR.TTC") format("truetype");
}

html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'YUGOTHR', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #000; }
a:hover { text-decoration: none; }
*{ box-sizing: border-box; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: ' ';
	display: table;
}
.clearfix:after { clear: both; }

@media screen and (min-width: 769px) {
	.sp{ display: none !important; }
	.wrap{ max-width: 1260px; padding: 0 20px; margin: 0 auto; }
}

@media screen and (max-width: 768px) {
	.pc{ display: none !important; }
	.wrap{ padding: 0 20px; }
}

/* container
------------------------------------------------ */
#container {
	position: relative;
}

.page-title{ font-family: "NotoSansCJKjp"; font-size: 3.6rem; font-weight: 600; text-align: center; letter-spacing: 0.1em; line-height: 1; }

@media screen and (max-width: 768px) {
	.page-title{ font-size: 1.4rem; }
}

/* header
------------------------------------------------ */
#header {}
.header-menu--panel{ padding: 13px 25px 13px 17px; background-color: #1e1e1e; }
.header__logo{ max-width: 40px; }
.header__logo a{ display: block; }
.header__nav--list{}
.header__nav--list li{ display: inline-block; vertical-align: middle; font-size: 1.7rem; font-family: "NotoSansCJKjp"; font-weight: 400; color:#fff; letter-spacing: 0.3em;  }
.header__nav--list li a{ padding: 2.5px 0; display: block; color:#fff; text-decoration: none; }
.header__nav--list li a.on{ color:#a30000; }
.header__nav--list li.employment-info a{ line-height: 1; }
.header__nav--list li.employment-info small{ margin: 4px 0 1px; display: block; font-size: 1rem; letter-spacing: 0.2em; }

@media screen and (min-width: 769px) {
	.header-menu--panel{ display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	.header__nav{ width: 100%; max-width: 675px; }
	.header__nav--list li:nth-child(n+2):nth-child(-n+3){ margin-left: 45px; }
	.header__nav--list li:nth-child(-n+3) a.on{ color:#a30000; }
	.header__nav--list li.employment-info{ margin-left: 50px; width: 118px; letter-spacing: 0.32em; text-align: center; font-size: 1.6rem; }
	.header__nav--list li.employment-info a{ border:1px solid transparent; }
	.header__nav--list li.contact-us{ margin-left: 33px; width: 118px; text-align: center; font-size: 1.6rem; letter-spacing: 0.1em; background-color: #fff; }
	.header__nav--list li.contact-us a{ color:#1e1e1e; }
	.header__nav--list li.contact-us a.on{ color:#a30000; }
	.header-menu--toggle{ display: none; }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
	.header__nav{ max-width: 600px; }
	.header__nav--list li:nth-child(n+2):nth-child(-n+3){ margin-left: 25px; }
	.header__nav--list li.employment-info{ margin-left: 30px; }
	.header__nav--list li.contact-us{ margin-left: 15px; }
}

@media screen and (max-width: 768px) {
	.header-menu--toggle{ position: fixed; top: 10px; right: 10px; z-index: 3; max-width: 38px; padding:11px 10px; background-color: #fff; }
	.header-menu--toggle span{ display: block; width: 18px; height: 3px; background-color: #1e1e1e; transition: all 0.3s ease-in-out; }
	.header-menu--toggle span:not(:last-child){ margin-bottom: 3px; }
	.header-menu--toggle.on span:first-child { transform: rotate(45deg); transform-origin: 0; margin-left: 3px; }
	.header-menu--toggle.on span:nth-child(2) { opacity: 0; }
	.header-menu--toggle.on span:nth-child(3) { transform: rotate(-45deg); transform-origin: 1px; margin-left: 2px; }
	.header-menu--panel{ z-index: 2; display: none; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; padding:60px 10px 60px; text-align: center; -webkit-overflow-scrolling: touch; overflow: auto; }
	.header__logo{ display: table; margin: 0 auto; max-width: 100px; width: 14%; }
	.header__nav--list{ display: table; margin: 40px auto 0; }
	.header__nav--list li{ font-size: 1.4rem; font-size: 3.0666vw; letter-spacing: 0.25em; display: block; line-height: 1; }
	.header__nav--list li:not(:nth-child(-n+1)){ margin-top: 40px; }
	.header__nav--list li a{ padding: 5px 0; }
	.header__nav--list li:not(:last-child):after{ display: table; margin: 0 auto; content: ''; width: 35px; height: 1.5px; background-color: #fff; }
	.body-gnav_open{ position: fixed; top: 0; left: 0; }
}

/* main
------------------------------------------------ */
#main {
	display: block;
	position: relative;
	width: 100%;
}

/* footer 
------------------------------------------------ */
#footer {
	padding: 25px 32px;
	position: relative;
	z-index: 1;
	text-align: center;
	background-color: #1e1e1e;
}
.footer--logo{ display: table; margin: 0 auto 10px; max-width: 54px; }
.footer--logo a{ display: block; }
.footer--copyright{ font-family: "Raleway-Bold"; font-size: 1.3rem; color:#fff; letter-spacing: 0.02em; line-height: 1.73; }
.footer--link{ position: absolute; right: 32px; bottom: 32px; display: inline-block; font-size: 1.5rem; font-weight: 400; color:#fff !important; letter-spacing: 0.32em; line-height: 1; }

@media screen and (max-width: 768px) {
	#footer{ padding: 2% 20px; }
	.footer--logo{ max-width: 45px; width: 7%; }
	.footer--copyright{ font-size: 0.7rem; font-size: 1.33vw; font-weight: 600; line-height: 1.81; }
	.footer--link{ right: 20px; bottom: 50%; margin-bottom: -4px; font-size: 1rem; font-size: 2.1333vw; }
}