@charset "utf-8";

/*!
Theme Name: Colors
Theme URI:
Author:
Author URI:
Description:
*/

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*input */
input[type="text"] {
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
}

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
}

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    background: #ff0000;
}

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + label {
    background: #ff0000;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
}

button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

/* Colors-------------------------*/
html {
  background: rgba(0,0,0,.025);
  font-size: 16px;
}

/* BASIC-------------------------*/
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, article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  /*font-family: 'Oswald',Helvetica Neue,Yu Gothic,YuGothic,Hiragino Sans,sans-serif;*/
  font-family: YakuHanJP, dnp-shuei-gothic-gin-std, "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Lucida Grande", "Osaka","Verdana", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.5;
}

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

a:hover {
  transition: all ease-out .5s;
}

img {
  width: 100%;
}

.clearfix::after {
  clear: both;
  content: "";
  display: block;
}

li {
list-style-type: none;
}

input {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
}

textarea {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
}

/* HEADER-------------------------*/
.colors {
  /*background: rgba(2,72,150,.95);*/
  background: rgba(2,72,150,.75);
  height: 100vh;
  position: relative;
}

.colors h1 img {
  height: auto;
  left: 50%;
  position: absolute;
  top: 14.639%;
  transform: translateX(-50%);
  width: 70.721vw;
}

.colors h1 .active:hover {
  opacity: 0;
  transition: 1s;
}

@media all and (min-width: 568px) {
.colors h1 img {
  width: 53.040vw;
}
}

@media all and (min-width: 768px) {
.colors h1 img {
  width: 35.360vw;
}
}

@media all and (min-width: 1024px) {
.colors h1 img {
  width: 29.279vw;/*29.279%*/
  width: 299.81px;
}
}

/* SUB HEADER-------------------------*/
.subheader{
  height: auto;
}

/*BULLETIN-------------------------*/
.bulletin {
  bottom: 29.279vh;/*silver ratio*/
  position: absolute;
  width: 100%;
}

.bulletin div {
  overflow: hidden;
  margin-bottom: .5em;
  width: auto;
}

.bulletin span,time {
  color: #fff;
  font-size: .9rem;
}

.bulletin .first span {
  animation-name: marquee;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
}

.bulletin .second span {
  animation-name: marquee;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
}

.bulletin .third span {
  animation-name: marquee;
  animation-duration: 25s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
}

.bulletin time {
  display: inline-block;
  margin-right: .5em;
}

@-moz-keyframes marquee {
  from {-ms-transform: translate(0%);}
  99%,to {-ms-transform: translate(-100%);}
}

@-ms-keyframes marquee {
  from {-ms-transform: translate(0%);}
  99%,to {-ms-transform: translate(-100%);}
}

@-o-keyframes marquee {
  from {-o-transform: translate(0%);}
  99%,to {-o-transform: translate(-100%);}
}

@-webkit-keyframes marquee {
  from {-webkit-transform: translate(0%);}
  99%,to {-webkit-transform: translate(-100%);}
}

@keyframes marquee {
  from {transform: translate(0%);}
  99%,to {transform: translate(-100%);}
}

@media all and (min-width: 768px) {
.bulletin .first span {
  animation-duration: 22.5s;
}

.bulletin .second span {
  animation-duration: 27.5s;
}

.bulletin .third span {
  animation-duration: 32.5s;
}
}

/* CATEGORY HEAD-------------------------*/
.content_category header {
  border-bottom: 2.5px solid #000;
  padding: 1em;
}

.content_category header .ttl {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 1.7072rem;
  font-weight: bold;
}

/* TAG HEAD-------------------------*/
.content_tag header {
  border-bottom: 2.5px solid #000;
  padding: 1em;
}

.content_tag header .ttl {
  font-size: 1.7072rem;
  font-weight: bold;
}

/* PAGE HEAD-------------------------*/
.content_page header {
  border-bottom: 2.5px solid #000;
  padding: 1em;
}

.content_page header .ttl {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 1.7072rem;
  font-weight: bold;
}

/* OFFICE HEAD-------------------------*/
.content_office header {
  border-bottom: 2.5px solid #000;
  padding: 1em;
}

.content_office header .ttl {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 1.7072rem;
  font-weight: bold;
}

/* JOB HEAD-------------------------*/
.content_job header {
  border-bottom: 2.5px solid #000;
  padding: 1em;
}

.content_job header h1 {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 1.7072rem;
  font-weight: bold;
}

.content_job header b {
  display: inline-block;
  font-weight: normal;
  margin: 0 .5em;
}

.content_job header span {
  display: none;
}

@media all and (min-width: 768px) {
.content_job header span {
  display: inline-block;
}
}

/* MOTION-------------------------*/
#motion {
  position: fixed;
  width: 100%;
  z-index: -9999;
}

#motion .layer {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

#motion .filter {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

#motion figure {
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#motion video {
  left: 50%;
  min-height: 100vh;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

@media all and (min-width: 1280px) {
#motion video {
  height: auto;
  width: 100%;
}
}

/* VIEW-------------------------*/
.view {
  content: "";
  display: inline-block;
  height: 100vh;
}


/* BREADCOMB-------------------------*/
.breadcomb {
  display: block;
  margin: 0 auto;
  padding: 1em;
}

.breadcomb ul {
}

.breadcomb li {
  display: inline-block;
  font-size: 0.7072rem;
}

.breadcomb li a {
  font-size: 0.7072rem;
}

.breadcomb li:after {
  content: ">";
  display: inline-block;
  padding: .5em;
}

.breadcomb li:last-child:after {
  display: none;
  padding: 0;
}

/* PAGER-------------------------*/

/* FOOTER-------------------------*/
footer {
  /*background: #024896;*/
  background: rgba(0,0,0,.75);
  border-top: 1px solid rgba(0,0,0,.1);
  margin: 0 auto;
  padding: 1em;
  text-align: center;
}

footer small {
  color: #fff;
  font-size: .7072rem;
}

footer span {
  font-size: .7072rem;
  margin-right: .5em;
}

footer ul {
  margin-bottom: 1em;
}

footer li {
  display: inline-block;
  line-height: 1.75;
  margin-right: .5em;
}

footer li:last-child {
  margin-right: 0;
}

footer li a {
  color: #fff;
  font-size: .9rem;
}

/* INSIDE-------------------------*/
.inside {
  margin: 0 auto;
}

@media all and (min-width: 1280px) {
.inside {
  margin: 0 auto;
  width: 1280px;
}
}

/* 404-------------------------*/
.not-found {
  height: calc(100vh - 12em);
  position: relative;
}

.not-found div {
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.not-found p {
  font-size: 1rem;
}

.not-found span {
  display: inline-block;
  font-size: 2.5rem;
  white-space: nowrap;
  width: 100%;
}

/* CONTENT-------------------------*/
.content {
  padding: 0 1em;
}

/* PAGE BASIC-------------------------*/
.page {
}

/* PRIVACY-------------------------*/
.privacy {
  margin-bottom: 5em;
}

.privacy p {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  margin-bottom: 2.5em;
}

.privacy strong {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: 1em;
}

.privacy ul {
  margin-bottom: 2.5em;
}

.privacy li {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  list-style: inside;
  list-style-type: decimal;
  margin-bottom: 1em;
}

.privacy .contact {
  border: 1px solid;
  border-radius: .25em;
  display: inline-block;
  font-size: .75rem;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  padding: 1em 2.5em 1em 1.5em;
  position: relative;
}

.privacy .contact::after {
  border-top: 1px solid;
  border-right: 1px solid;
  content: "";
  height: .5em;
  position: absolute;
  right: 1em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1.2em;
  width: .5em;
}

.privacy .contact:hover {
  background: #024896;
  border: 1px solid #024896;
  color: #fff;
}

@media all and (min-width: 768px) {
.privacy {
  margin-bottom: 2.5em;
  width: 70.721%;
}

.privacy .contact {
  width: 29.279%;
}
}

@media all and (min-width: 1024px) {
.privacy {
  width: 724.18px;
}
}

/* CONTACT-------------------------*/
.contact {
  margin-bottom: 7.5em;
}

.contact p {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  margin-bottom: 2.5em;
}

.contact .call {
  display: inline-block;
  font-size: 1.05rem;
  margin-bottom: 2.5em;
}

@media all and (min-width: 768px) {
.contact {
  margin-bottom: 5em;
  width: 70.721%;
}
}

@media all and (min-width: 1024px) {
.contact {
  width: 724.18px;
}
}

/* APPLY-------------------------*/
.apply {
  margin-bottom: 7.5em;
}

@media all and (min-width: 768px) {
.apply {
  margin-bottom: 5em;
  width: 70.721%;
}
}

@media all and (min-width: 1024px) {
.apply {
  width: 724.18px;
}
}


/* CONTACT FORM-------------------------*/
.contactform {
}

.contactform .item {
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: .25em;
}

.contactform .required:after {
  color: #0780AD;
  content: "*必須項目";
  font-size: .725rem;
  font-weight: normal;
  margin-left: .5em;
}

.contactform input {
  background: #fff;
  border: 1px solid rgba(0,0,0,.75);
  font-size: .9rem;
  margin-bottom: 2.5em;
  padding: .5em 1em;
  width: calc(100% - 2em);
}

.contactform textarea {
  background: #fff;
  border: 1px solid rgba(0,0,0,.75);
  font-size: .9rem;
  margin-bottom: 2.5em;
  padding: .5em 1em;
  width: calc(100% - 2em);
}

.contactform input[type="submit"] {
  border: 1px solid;
  border-radius: .25em;
  display: inline-block;
  font-size: .9rem;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  padding: .75em 0;
  position: relative;
  width: 100%;
}

.contactform input[type="submit"]:hover {
  background: #024896;
  border: 1px solid #024896;
  color: #fff;
}

.contactform div.wpcf7 .ajax-loader {
  display: block;
  margin: 0;
}

@media all and (min-width: 768px) {
.contactform input[type="submit"] {
  width: 29.279%;
}
}


/* OFFICE BASIC-------------------------*/
/* SERVICE INDEX-------------------------*/
.service-index {
  margin: 0 auto;
}

.service-index h2 {
  background: rgba(255,255,255,.95);
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-weight: bold;
  height: 320px;
  margin-bottom: 1em;
  position: relative;
  width: 100%;
}

.service-index h2 span {
  display: inline-block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.service-index h2 span {
  color: #024896;
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

.service-index h2 b {
  display: inline-block;
  font-size: .9rem;
  line-height: 1;
  width: 100%;
}

.service-index li {
  height: 320px;
  margin-bottom: 1em;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.service-index li a {
  background: rgba(255,255,255,.75);
  bottom: 0;
  color: #024896;
  left: 0;
  margin: 1em;
  position: absolute;
  right: 0;
  top: 0;
}

.service-index li a:hover {
  /*background: rgba(2,72,150,.95);*/
  background: rgba(2,72,150,.75);
  color: #fff;
}

.service-index li h3 {
  display: inline-block;
  font-size: 2.5rem;
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-weight: bold;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
}

.service-index li h3 span {
  display: inline-block;
  font-size: .9rem;
  line-height: 1.75;
  width: 100%;
}

@media all and (min-width: 375px) {
.service-index h2 {
  height: 375px;
}

.service-index li {
  height: 375px;
}
}

@media all and (min-width: 414px) {
.service-index h2 {
  height: 414px;
}

.service-index li {
  height: 414px;
}
}

@media all and (min-width: 568px) {
.service-index h2 {
  background: none;
  height: 284px;
  margin-bottom: 1em;
  width: 100%;
}

.service-index li {
  display: inline-block;
  height: 284px;
  margin-bottom: 0;
  margin-right: 0;
  width: calc(50% - .15em);
}
}

@media all and (min-width: 768px) {
.service-index li {
  height: 256px;
  width: calc(33% - .15em);
}
}

@media all and (min-width: 834px) {
.service-index li {
  height: 278px;
}
}

@media all and (min-width: 1024px) {
.service-index li {
  height: 341.33px;
  /*width: calc(25% - .25em);*/
}
}

@media all and (min-width: 1280px) {
.service-index li {
  height: 426.66px;
  /*width: calc(256px - .25em);*/
}
}

/* OFFICE-------------------------*/
.office {
  margin-bottom: 7.5em;
}

.office figure {
  margin-bottom: 1em;
}

.office address h3 {
  font-weight: bold;
  margin-bottom: 5em;
}

.office address p {
  font-size: .9rem;
  line-height: 1.75;
  margin-bottom: 5em;
}

.office address b {
  display: inline-block;
  font-size: .9rem;
  margin-bottom: 1em;
}

.office address dt {
  display: inline-block;
  float: left;
  font-size: .9rem;
  font-weight: normal;
  margin-bottom: 1em;
  margin-right: .5em;
}

.office address dd {
  font-size: .9rem;
  font-weight: normal;
  margin-bottom: 1em;
}

/* 20231107-------------------------*/
.office address span {
  font-size: .9rem;
  line-height: 1.75;
  margin-bottom: 5em;
}

.office address aside span {
	display: inline-block;
	font-size: .9rem;
	line-height: 1.75;
}

.office address div {
	font-size: .9rem;
	line-height: 1.75;
	margin-bottom: 2.5em;
}

.office address span {
	display: inline-block;
	font-size: .9rem;
	line-height: 1.75;
	margin-bottom: 2em;
}

@media all and (min-width: 768px) {
.office {
  margin-bottom: 5em;
  width: 70.721%;
}
}

@media all and (min-width: 1024px) {
.office {
  width: 724.18px;
}
}

/* PHOTOGRAPH-------------------------*/
/* GALLERY-------------------------*/
.gallery {
}

.gallery ul {
  padding: 1em;
}

.gallery li {
  display: inline-block;
  height: 120px;/*4:3*/
  margin-bottom: 1em;
  overflow: hidden;
  position: relative;
  width: calc(50% - .5em)
}

.gallery li:after {
  background-image: linear-gradient(-45deg, rgba(150,72,2,.25), rgba(150,72,2,.05));
  box-shadow: inset 0 0 50px rgba(0,0,0,.5),inset 0 0 100px rgba(0,0,0,.15);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.gallery li:nth-child(odd) {
  margin-right: .5em;
}

.gallery li:nth-child(even) {
  margin-left: .5em;
}

.gallery img {
  filter: brightness(150%) contrast(105%) saturate(100%);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 125%;
}

.gallery img:hover {
  filter: grayscale(0%);
  transition: .5s ease-in-out;
  width: 150%;
}

@media all and (min-width: 375px) {
.gallery li {
  height: 140.625px;
}
}

@media all and (min-width: 414px) {
.gallery li {
  height: 155.25px;
}
}

@media all and (min-width: 568px) {
.gallery li {
  height: 213px;
}
}

@media all and (min-width: 768px) {
.gallery li {
  display: inline-block;
  height: 144px;
  overflow: hidden;
  width: calc(25% - .75em)
}

.gallery li:nth-child(odd) {
  margin-right: 1em;
}

.gallery li:nth-child(even) {
  margin-left: 0;
  margin-right: 1em;
}

.gallery li:nth-child(4n) {
  margin-right: 0;
}
}

@media all and (min-width: 834px) {
.gallery li {
  height: 156.375px;
}
}

@media all and (min-width: 1024px) {
.gallery li {
  height: 192px;
}
}

@media all and (min-width: 1280px) {
.gallery .inside {
  display: block;
  width: 1280px;
}

.gallery li {
  height: 240px;
}
}

/* COMPANY BASIC-------------------------*/
.company-index {
  background: rgba(255,255,255,.95);
  padding: 7.5em 1em 0;
  text-align: center;
}

.company-index h2 {
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 2.5em;
}

.company-index h2 span {
  display: inline-block;
  font-size: .9rem;
  line-height: 1;
  width: 100%;
}

.company-index dl {
  margin-bottom: 5em;
}

.company-index dt {
  float: left;
  font-size: .9rem;
  line-height: 2;
  text-align: left;
  width: 29.279%;
}

.company-index dd {
  font-size: .9rem;
  line-height: 2;
  text-align: left;
}

.company-index button {
  background: none;
  border: solid 2px #000;
  border-radius: .25em;
  box-sizing: border-box;
  color: #000;
	font-size: 1rem;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 7.5em;
  padding: .75em;
  text-align: center;
  width: 100%;
}

.company-index button:hover {
  background: -webkit-linear-gradient(left, #029296, #024896);
  border: solid 2px rgba(70,143,227,.5);
  color: #fff;
  transition: all ease-out .5s;
  opacity: 1;
}

@media all and (min-width: 468px) {
.company-index dl {
}

.company-index button {
  width: 54.314%;
}
}

@media all and (min-width: 768px) {
.company-index .inside {
  width: 768px;
}

.company-index dd {
  white-space: nowrap;
}
}

@media all and (min-width: 1280px) {
.company-index .inside {
  width: 724.187px;
}
}

/* COMPANY SEACRET-------------------------*/

/* RECRUIT BASIC-------------------------*/
.recruit-index {
  background: rgba(70,143,227,.75);
  padding: 7.5em 1em 0;
  text-align: center;
}

.recruit-index h2 {
  color: #fff;
  font-family: 'Oswald', "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 2.5em;
}

.recruit-index h2 span {
  display: inline-block;
  font-size: .9rem;
  line-height: 1;
  width: 100%;
}

.recruit-index p {
  color: #fff;
  display: inline-block;
  font-size: .9rem;
  line-height: 2;
  margin-bottom: 5em;
  text-align: left;
}

.recruit-index button {
  background: none;
  border: solid 2px #fff;
  border-radius: .25em;
  box-sizing: border-box;
	color: #fff;
	font-size: 1rem;
	font-style: italic;
  font-weight: bold;
  margin-bottom: 7.5em;
  padding: .75em;
  text-align: center;
  width: 100%;
}

.recruit-index button:hover {
  background: -webkit-linear-gradient(left, #029296, #024896);
  border: solid 2px rgba(70,143,227,.5);
  color: #fff;
  transition: all ease-out .5s;
  opacity: 1;
}

@media all and (min-width: 568px) {
.recruit-index button {
  width: 54.314%;
}
}

@media all and (min-width: 768px) {
.recruit-index .inside {
  width: 768px;
}
}

@media all and (min-width: 1280px) {
.recruit-index .inside {
  width: 724.187px;
}
}

/* HIRING-------------------------*/
.hiring-list {
}

.hiring-post li {
  background: #fff;
  /*box-shadow: 1px 1px 5px rgba(0,0,0,.25);*/
  display: inline-block;
  margin-bottom: 1em;
  width: 100%;
}

.hiring-post figure {
  background: rgba(0,0,0,.05);
  height: 226.31px;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}

.hiring-post figure img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.hiring-post h2 {
  font-weight: bold;
  line-height: 1;
  margin: 0 0 .5em 1em;
}

.hiring-post p {
  color: rgba(0,0,0,.75);
  display: inline-block;
  font-size: .75rem;
  line-height: 1;
  margin: 0 0 0 1em;
}

.hiring-post p span {
  font-size: .75rem;
  line-height: 1;
  margin-right: .5em;
}

.hiring-post div {
  content: "";
  margin-bottom: 1em;
  width: 100%;
}

.hiring-post a {
  border: 1px solid;
  border-radius: .25em;
  display: inline-block;
  font-size: .75rem;
  line-height: 1;
  margin: 0 0 2em 1em;
  padding: .5em 2.5em .5em 1.5em;
  position: relative;
}

.hiring-post a::after {
  border-top: 1px solid;
  border-right: 1px solid;
  content: "";
  height: .5em;
  position: absolute;
  right: 1em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: .7em;
  width: .5em;
}

.hiring-post a:hover {
  background: #024896;
  border: 1px solid #024896;
  color: #fff;
}

@media all and (min-width: 375px) {
.hiring-post figure {
  height: 265.21px;
}
}

@media all and (min-width: 414px) {
.hiring-post figure {
  height: 292.79px;
}
}

@media all and (min-width: 568px) {
.hiring-post li {
  float: left;
  margin-right: 1em;
  width: calc(50% - .5em);
}

.hiring-post li:nth-child(2n) {
  margin-right: 0;
}

.hiring-post figure {
  height: 200.85px;
}
}

@media all and (min-width: 768px) {
.hiring-post figure {
  height: 271.57px;
}
}

@media all and (min-width: 834px) {
.hiring-post figure {
  height: 294.91px;
}
}

@media all and (min-width: 1024px) {
.hiring-post li {
  float: left;
  margin-right: 1em;
  width: calc(25% - .75em);
}

.hiring-post li:nth-child(2n) {
  margin-right: 1em;
}

.hiring-post li:nth-child(4n) {
  margin-right: 0;
}

.hiring-post figure {
  height: 181.05px;
}
}

@media all and (min-width: 1280px) {
.hiring-post figure {
  height: 226.31px;
}
}

/* JOB-------------------------*/
.content_job {
  position: relative;
}

.job {
  margin-bottom: 5em;
}

.job figure {
  background: rgba(0,0,0,.05);
  height: 226.31px;
  margin-bottom: 5em;
  position: relative;
  overflow: hidden;
}

.job h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2.5em;
}

.job-description p {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  line-height: 2;
  margin-bottom: 2.5em;
}

.job-description ul {
  margin-bottom: 5em;
}

.job-description li {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 1em;
}

.job-description li dt {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.job-description li dt:after {
  content: ":";
  display: inline-block;
  margin-left: .5em;
}

.job-description li dd {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  font-weight: normal;
  line-height: 2;
  margin-bottom: 1em;
}
.job .conditions dt {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  font-weight: bold;
  line-height: 2;
  margin-bottom: .5em;
}

.job .conditions dd {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  font-weight: normal;
  line-height: 2;
  margin-bottom: 2.5em;
}

.job .conditions dd aside {
  color: rgba(0,0,0,.75);
  font-size: .9rem;
  font-weight: normal;
  line-height: 2;
}

.job .conditions li {
  color: rgba(0,0,0,.95);
  font-size: .9rem;
  font-weight: normal;
  line-height: 2;
}

.job .conditions li span {
  color: rgba(0,0,0,.95);
  display: inline-block;
  font-size: .9rem;
  font-weight: normal;
  line-height: 2;
  padding-right: .5em;
}

.job .entry {
}

.job .entry .apply-btn:before {
  border-top: 1px solid;
  border-right: 1px solid;
  content: "";
  height: .5em;
  left: 1em;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1em;
  width: .5em;
}

.job .entry .apply-btn {
  background: #000;
  border: solid 2px #000;
  border-radius: .25em;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  padding: .5em 1em;
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  width: 100%;
}

.job .entry .apply-btn:hover {
  background: -webkit-linear-gradient(left, #029296, #024896);
  border: solid 2px rgba(70,143,227,.5);
  color: #fff;
  transition: all ease-out .5s;
  opacity: 1;
}

.job .entry .tel-btn:before {
  border-top: 1px solid;
  border-right: 1px solid;
  content: "";
  height: .5em;
  left: 1em;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1em;
  width: .5em;
}

.job .entry .tel-btn {
  background: #fff;
  border: solid 2px #000;
  border-radius: .25em;
  box-sizing: border-box;
  color: #000;
  display: inline-block;
  padding: .5em 1em;
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  width: 100%;
}

.job .entry .tel-btn:hover {
  background: -webkit-linear-gradient(left, #029296, #024896);
  border: solid 2px rgba(70,143,227,.5);
  color: #fff;
  transition: all ease-out .5s;
  opacity: 1;
}

@media all and (min-width: 375px) {
.job figure {
  /*height: px;*/
}
}

@media all and (min-width: 414px) {
.job figure {
  /*height: px;*/
}
}

@media all and (min-width: 568px) {
.job .job-description {
  margin-left: 5em;
  width: auto;
}

.job .conditions {
  width: auto;
}

.job .job-description dt {
  display: inline-block;
  float: left;
  width: 7.5em;
}

.job .job-description dd {
  padding-left: 7.5em;
  width: auto;
}

.job .conditions dt {
  display: inline-block;
  float: left;
  margin-bottom: .5em;
  width: 7.5em;
}

.job .conditions dd {
  margin-bottom: 2.5em;
  padding-left: 7.5em;
  width: auto;
}

.job .entry .apply-btn {
  width: 50.015%;
}

.job .entry .tel-btn {
  display: none;
}
}

@media all and (min-width: 768px) {
.job {
  /*float: left;
  margin: 0 1em 2.5em 0;*/
  width: calc(70.721% - 1em);
}

.job figure {
  /*height: px;*/
}
}

@media all and (min-width: 834px) {
.job figure {
  /*height: px;*/
}
}

@media all and (min-width: 1024px) {
.job figure {
  /*height: px;*/
}
}

@media all and (min-width: 1280px) {
.job figure {
  /*height: px;*/
}
}

/* SIMILAR JOB-------------------------*/
.similar-job {
  margin: 0 auto;
}

.similar-job .post {
  background: #fff;
  margin-bottom: 1em;
  padding: 1em 1em 1em 0;
}

.similar-job figure {
  float: left;
  height: 66.261px;
  height: 99.3915px;
  margin-right: 1em;
  overflow: hidden;
  position: relative;
  width: 29.279%;
}

.similar-job figure img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.similar-job .wrapup {
  margin-left: calc(29.279% + 1em);
}

.similar-job h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-weight: bold;
  line-height: 1;
  margin-bottom: .5em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}

.similar-job span {
  color: rgba(0,0,0,.75);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: .75rem;
  line-height: 1.5;
  margin-bottom: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}

.similar-job p {
  color: rgba(0,0,0,.75);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .75rem;
  line-height: 1.5;
  margin-bottom: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}

.similar-job ul {
	display: none
}

.similar-job a {
  border: 1px solid;
  border-radius: .25em;
  display: inline-block;
  font-size: .75rem;
  line-height: 1;
  padding: .5em 2.5em .5em 1.5em;
  position: relative;
}

.similar-job a::after {
  border-top: 1px solid;
  border-right: 1px solid;
  content: "";
  height: .5em;
  position: absolute;
  right: 1em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: .7em;
  width: .5em;
}

.similar-job a:hover {
  background: #024896;
  border: 1px solid #024896;
  color: #fff;
}

/*@media all and (min-width: 375px) {
.similar-job figure {
  height: px;
}
}

@media all and (min-width: 414px) {
.similar-job figure {
  height: px;
}
}

@media all and (min-width: 568px) {
.similar-job figure {
  height: px;
}
}

@media all and (min-width: 768px) {
.similar-job {
  /*margin-left: 70.721%;
}/*
}*/

/*@media all and (min-width: 834px) {
.similar-job figure {
  height: px;
}
}

@media all and (min-width: 1024px) {
.similar-job figure {
  height: px;
}
}

@media all and (min-width: 1280px) {
.similar-job figure {
  height: px;
}
}*/



















/* PHOTOGRAPH BASIC-------------------------*/
.photograph-list {
}

.photograph-post li {
  display: inline-block;
  margin-bottom: 1em;
  width: 100%;
}

.photograph-post figure {
  background: rgba(0,0,0,.05);
  height: 226.31px;
  position: relative;
  overflow: hidden;
}

.photograph-post figure img {
  bottom: 0;
  filter: grayscale(100%);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 125%;
}

@media all and (min-width: 375px) {
.photograph-post figure {
  height: 265.21px;
}
}

@media all and (min-width: 414px) {
.photograph-post figure {
  height: 292.79px;
}
}

@media all and (min-width: 568px) {
.photograph-post li {
  float: left;
  margin-right: 1em;
  width: calc(50% - .5em);
}

.photograph-post li:nth-child(2n) {
  margin-right: 0;
}

.photograph-post figure {
  height: 200.85px;
}
}

@media all and (min-width: 768px) {
.photograph-post figure {
  height: 271.57px;
}
}

@media all and (min-width: 834px) {
.photograph-post figure {
  height: 294.91px;
}
}

@media all and (min-width: 1024px) {
.photograph-post li {
  float: left;
  margin-right: 1em;
  width: calc(25% - .75em);
}

.photograph-post li:nth-child(2n) {
  margin-right: 1em;
}

.photograph-post li:nth-child(4n) {
  margin-right: 0;
}

.photograph-post figure {
  height: 181.05px;
}
}

@media all and (min-width: 1280px) {
.photograph-post figure {
  height: 226.31px;
}
}