/* title-area */
#title-area {
}
#title-area .contents-block-in {
  padding-right: 0px;
  padding-left: 0px;
max-width: none;
max-width: initial;
}
.rokaen-logo {
margin: 0px auto 8%;
width: 45%;
max-width: 274px;
}
.rokaen-logo img {
	width: 100%;
	height: auto;
	display: block;
}
.contents-navi-out {
  display: none;
}
.contents-navi {
}
#contents-nav-list {
}
#contents-nav-list li {
}
#contents-nav-list li a {
transition: all 0.3s;
}
#contents-nav-list li a:hover {
  background-color: rgba(252,252,252,1.00);
}
#page-home #contents-nav-list li:nth-child(1) a {
  background-color: rgba(252,252,252,1.00);
}


@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {
.rokaen-logo {
margin: 0px auto 7%;
width: 40%;
}

.contents-navi-out {
  display: block;
  padding: 4% 0px 0px;
}
.contents-navi {
  background-color: rgba(245,245,245,1.00);
}
#contents-nav-list {
  display: table;
  margin: 0px auto;
}
#contents-nav-list li {
display: table-cell;
}
#contents-nav-list li a {
  display: block;
  padding: 11px 20px;
  color: rgba(0,0,0,1.00);
  font-size: 15px;
  line-height: 1.2em;
}

}


@media print, screen and (min-width: 1024px) {
.rokaen-logo {
margin: 0px auto 5%;
}
.contents-navi-out {
  padding: 3% 0px 0px;
}
#contents-nav-list li a {
  padding: 13px 25px;
  font-size: 16px;
  line-height: 1.2em;
}

}


@media print, screen and (min-width: 1200px) {
.rokaen-logo {
margin: 0px auto 4.5%;
}
.contents-navi-out {
  padding: 2.5% 0px 0px;
}
#contents-nav-list li a {
  padding: 15px 30px;
  font-size: 17px;
  line-height: 1.2em;
}

}

@media print, screen and (min-width: 1400px) {

}



















/* about recruit */
#about .graphic-img,
#recruit .graphic-img {
  max-width: 500px;
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}
#about .link-button-out,
#recruit .link-button-out,
#services .link-button-out {
  margin: 0px auto;
  width: 100%;
}


@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {
#about .link-button-out,
#recruit .link-button-out,
#services .link-button-out {
  width: 50%;
}

}


@media print, screen and (min-width: 1024px) {
#about .link-button-out,
#recruit .link-button-out,
#services .link-button-out {
  width: 40%;
}

}


@media print, screen and (min-width: 1200px) {
#about .link-button-out,
#recruit .link-button-out,
#services .link-button-out {
  width: 300px;
}

}


@media print, screen and (min-width: 1400px) {

}
















/* #services */
#services {
background-image: url(../../images/02_back.jpg);
background-position: center bottom;
background-size: 130% auto;
background-repeat: no-repeat;
padding-bottom: 50%;
}
section#services .contents-block-in {
max-width: 1200px;
}
.flex4block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex4block > li {
-ms-flex-preferred-size: calc(50% - 4px);
flex-basis: calc(50% - 4px);
padding: 0px 0px 15px;
}
.flex4block > li a {
}
.flex4block > li a .block-title {
font-size: calc(100vw / 25);
line-height: 1.3em;
font-weight: bold;
}


@media print, screen and (min-width: 375px) {
.flex4block > li a .block-title {
font-size: 14px;
line-height: 1.3em;
}

}


@media print, screen and (min-width: 768px) {
#services {
background-size: 100% auto;
padding-bottom: 34%;
}
.flex4block > li {
-ms-flex-preferred-size: calc(25% - 5px);
flex-basis: calc(25% - 5px);
padding: 0px;
}
.flex4block > li a {
}
.flex4block > li a .block-title {
font-size: 14px;
line-height: 1.3em;
}

}



@media print, screen and (min-width: 1024px) {
.flex4block > li {
-ms-flex-preferred-size: calc(25% - 7px);
flex-basis: calc(25% - 7px);
}
.flex4block > li a .block-title {
font-size: 15px;
line-height: 1.3em;
}

}


@media print, screen and (min-width: 1200px) {
.flex4block > li {
-ms-flex-preferred-size: calc(25% - 9px);
flex-basis: calc(25% - 9px);
}

}

@media print, screen and (min-width: 1400px) {

}