@charset "UTF-8";
/* ----------------------------------------------------------------

	00. Clearfix

----------------------------------------------------------------- */
.grid-container:before, .grid-container .grid-row:before,
.grid-container .grid-col:before,
.grid-container .grid-clr:before,
.grid-container .grid-group:before, .grid-container:after, .grid-container .grid-row:after,
.grid-container .grid-col:after,
.grid-container .grid-clr:after,
.grid-container .grid-group:after {
}
.grid-container:after, .grid-container .grid-row:after,
.grid-container .grid-col:after,
.grid-container .grid-clr:after,
.grid-container .grid-group:after {
}

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

	01. Normalize

----------------------------------------------------------------- */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{scroll-behavior: smooth;}
body {
  line-height: 2;
  font-size: 100%;
  font-family: apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  padding: 0;
  margin: 0;
  color: #444f58;
}

a {
  color: #444f58;
  background: transparent;
	transition: 0.3s;
}
a:visited {
  color: #444f58;
}
a:hover {
  opacity: 0.5;
}
a:active, a:focus {
  color: #444f58;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

p {
  margin: 10px 0 10px 0;
  padding: 0;
}
p:first-child {
  margin-top: 0;
}

strong {
  font-weight: bold;
}

b {
  font-style: normal;
  font-weight: bold;
}

abbr[title] {
  border-bottom: 1px dotted;
}

dfn {
  font-style: italic;
}

hr {
  display: none;
}

mark {
  background: #ff0;
  color: #000;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

small {
  font-size: 62.5%;
}

sub, sup {
  position: relative;
  line-height: 1;
  vertical-align: baseline;
  font-size: 62.5%;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

menu, ul, ol, dl {
  margin: 10px 0 20px 0;
  padding: 0;
  list-style: none;
}
menu > :first-child, menu:first-child, ul > :first-child, ul:first-child, ol > :first-child, ol:first-child, dl > :first-child, dl:first-child {
  margin-top: 0;
}
menu p, menu ul, menu ol, menu dl, menu table, ul p, ul ul, ul ol, ul dl, ul table, ol p, ol ul, ol ol, ol dl, ol table, dl p, dl ul, dl ol, dl dl, dl table {
  margin-top: 0;
  font-size: 100%;
}

ol {
  margin-left: 2em;
  list-style-type: decimal;
}

dl dd {
  margin: 0;
}

table {
  margin: 20px 0 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: inherit;
}
table p, table ul, table ol, table dl, table table {
  margin-bottom: 5px;
}
table td > :first-child {
  margin-top: 0;
}

td,
th {
  padding: 0;
}

img {
  border: 0;
  line-height: 1;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

form {
  margin: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

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

	02. Layout

----------------------------------------------------------------- */
.header {
}
.header a {
  text-decoration: none;
}
.header a:hover, .header a:active, .header a:focus {
  text-decoration: underline;
}
.header .global {
  display: table;
  border-left: 1px solid #878787;
  margin: 5px 0 0 auto;
  position: relative;
  width: 100%;
  max-width: 600px;
}
.header .global > li {
  display: block;
  border-right: 1px solid #878787;
}
.js-on .header .global > li {
  display: table-cell;
}
.header .global > li.panel div > a {
  position: relative;
}
.header .global > li.panel div > a:after {
  content: "";
  width: 2px;
  height: 2px;
  border-left: 2px solid #D90013;
  border-right: 2px solid #D90013;
  position: absolute;
  right: 10px;
  top: .5em;
}
.header .global > li.panel div > a:before {
  content: "";
  width: 2px;
  height: 2px;
  background: #D90013;
  position: absolute;
  right: 12px;
  margin-top: 2px;
  top: .5em;
}
.header .global > li.panel:last-child > div:after {
  width: 200%;
}
.header .global > li.panel > div {
  position: relative;
}
.header .global > li.panel > div:after {
  content: "";
  position: absolute;
  width: 300%;
  height: 200%;
  top: 20px;
  left: -100%;
}
.header .global > li.panel > div:hover:after {
  z-index: 10;
}
.header .global > li.panel.select .wrap {
  position: relative;
}
.js-on .header .global > li.panel.select .wrap:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 10px 7px;
  border-color: transparent transparent #000 transparent;
  opacity: .75;
  top: 33px;
  left: 50%;
  margin-left: -7px;
  z-index: 10;
  position: absolute;
}
.header .global > li > a,
.header .global > li > div > a {
  padding: 2px 2px 0 18px;
  line-height: 1.2;
  font-weight: bold;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  display: block;
	font-size: 90%;
}
.header .global > li > a:hover, .header .global > li > a:active, .header .global > li > a:focus,
.header .global > li > div > a:hover,
.header .global > li > div > a:active,
.header .global > li > div > a:focus {
  text-decoration: none;
}
.header .global > li ul {
  z-index: 10;
  top: 43px;
  display: none;
  left: -10px;
  width: 100%;
  background: rgba(0, 0, 0, 0.75);
  padding: 10px 0;
}
.js-on .header .global > li ul {
  position: absolute;
  padding: 5px;
}
.header .global > li ul.col5 > li {
  width: 20%;
}
.header .global > li ul.col4 > li {
  width: 25%;
}
.header .global > li ul.col3 > li {
  width: 33.3333%;
}
.header .global > li ul.col2 > li {
  width: 50%;
}
.header .global > li ul > li {
  display: table-cell;
  text-align: center;
}
.header .global > li ul > li + li {
  position: relative;
}
.header .global > li ul > li + li:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 0;
  height: 70%;
  background: #d9d9d9;
  width: 1px;
}
.header .global > li ul > li a {
  color: #fff;
  dispaly: block;
  padding: 3px 5px;
  font-size: .75em;
}
.header .utility {
  text-align: right;
  font-size: 75%;
}
.header .utility > li {
  display: inline-block;
  margin-left: 20px;
}
.header .utility > li img {
  vertical-align: middle;
  margin-left: 5px;
}
.header .frame > * {
  display: table-cell;
  vertical-align: middle;
}
.header button.more {
  display: none;
}
@media screen and (max-width: 960px) {
  .header .logo {
    position: absolute;
    width: 200px;
    display: block;
  }
  .header .close {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  .header {
    padding-top: 15px;
    padding-bottom: 25px;
    position: relative;
  }
  .header .logo {
    position: static;
  }
  .header.open:before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: rgba(0, 0, 0, 0.8);
  }
  .js-on .header.open .nav {
    display: block;
  }
  .js-on .header.open .nav a {
    color: #fff
  }
  .header.open button.more {background-color: #000; color: #fff}
  .js-on .header.open button.more:before, .js-on .header.open button.more:after {
    content: '';
    height: 4px;
    width: 20px;
    display: block;
    background: #ccc;
    border-radius: 3px;
    position: absolute;
    top: 12px;
    left: 12px;
    transform: rotate(-45deg);
    box-shadow: none;
  }
  .js-on .header.open button.more:after {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .header .logo {
	  width: 80%
  }
  .header .logo img {
    max-width: 100%;
  }
  .header .nav {
    position: absolute;
    z-index: 10;
    width: 98%;
    box-sizing: border-box;
    left: 1%;
    margin: 20px 0 0;
    padding: 10px;
    background: #707070;
    box-sizing: border-box;
  }
  .js-on .header .nav {
    display: none;
  }
  .header button.close {
    display: none;
    position: relative;
    padding: 0 15px;
    text-align: center;
    border: 0 none;
    width: 100%;
    margin-top: 20px;
    color: #fff;
  }
  .header button.close:before, .header button.close:after {
	  display: none;
    height: 2px;
    width: 10px;
    display: inline-block;
    background: #fff;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -2em;
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .header button.close:after {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .header button.more {
    display: block;
    position: absolute;
    top: 3px;
    right: 1%;
    background: #fff;
    border: 1px solid #f3f3f3;
    width: 48px;
    height: 46px;
    z-index: 999999;
    font-size: 62.5%;
	  transition: 0.5s;
  }
  .header button.more > span {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 48px;
    text-align: center;
	  transition: 0.5s;
  }
  .header button.more:before {
    content: "";
    height: 4px;
    width: 28px;
    background: #ccc;
    border-radius: 2px;
    display: block;
    position: absolute;
    top: 5px;
    left: 10px;
    box-shadow: 0 8px #ccc, 0 16px #ccc;
	  transition: 0.5s;
  }
  .header .frame > * {
    display: block;
  }
  .header .global {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-left: 0 none;
    padding: 0;
    position: relative;
    text-align: left;
  }
  .header .global > li {
    display: block !important;
    border-right: 0;
    margin: 0;
  }
  .header .global > li + li {
    border-top: 1px solid #ddd;
  }
  .header .global > li ul {
    position: static !important;
    display: block;
    box-sizing: border-box;
    background: transparent;
    color: #444f58;
    padding: 0 !important;
  }
  .js-on .header .global > li ul:before {
    content: none;
  }
  .header .global > li ul > li {
    display: inline-block;
    width: auto !important;
    text-align: left;
  }
  .header .global > li ul > li + li:before {
    content: none !important;
  }
  .header .global > li ul > li a {
    text-align: left;
    padding-left: 16px;
    padding-right: 8px;
    position: relative;
  }
  .header .global > li ul > li a:after {
    content: "";
    width: 2px;
    height: 2px;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    position: absolute;
    left: 5px;
    top: .5em;
  }
  .header .global > li ul > li a:before {
    content: "";
    width: 2px;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 7px;
    margin-top: 2px;
    top: .5em;
  }
  .header .global > li > a,
  .header .global > li > div > a {
    padding: 13px 5px;
  }
  .header .global > li > a:before,
  .header .global > li > div > a:before {
    margin-top: 12px !important;
  }
  .header .global > li > a:after,
  .header .global > li > div > a:after {
    margin-top: 10px;
  }
  .header .global > li > div:after {
    content: none !important;
  }
  .header .global > li a {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    border: 0 none !important;
	  color: #fff;
  }
}

.footer {
  position: relative;
  z-index: 1;
  background: #444f58;
  color: #fff;
  margin-top: 60px;
}
.lyt-idx + .link-top + .footer {
  margin-top: 0;
}
.footer > .frame > dl {
  display: table;
  width: 100%;
  padding: 20px 0 20px 10px;
  box-sizing: border-box;
}
.footer > .frame > dl > * {
  float: left;
}
.footer > .frame > dl > dt {
  padding: 0 20px;
  text-align: center;
}
.footer > .frame > dl > dd {
  font-size: 87.5%;
}
.footer > .frame > dl > dd > ul > li > a {
  font-weight: bold;
}
.footer > .frame > dl > dd > ul {
  display: table;
  width: 100%;
	margin: 10px
}
.footer > .frame > dl > dd > ul > li ul {
  margin-top: 5px;
	margin-bottom: 0
}
.footer > .frame > dl > dd .col {
  float: left;
  margin-right: 40px;
}
.footer > .frame > dl > dd .col.banner {
  margin-right: 0;
}
.footer a {
  color: #fff;
  text-decoration: none;
}
.footer a img {
  vertical-align: middle;
  margin-left: 5px;
}
.footer a:hover, .footer a:active, .footer a:focus {
  text-decoration: underline;
}
.footer .utility {
  background: #d90013;
  padding: 8px 0 20px;
  font-size: 87.5%;
}
.footer .utility small {
  font-size: 100%;
  float: right;
}
.footer .utility ul {
  float: left;
}
.footer .utility ul > li {
  display: inline-block;
}
.footer .utility ul > li + li {
  margin-left: 25px;
}
.footer .utility a {
  padding-left: 12px;
  position: relative;
}
.footer .utility a:before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  width: 2px;
  height: 2px;
}
.footer .utility a:after {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  margin-top: 2px;
  margin-left: 2px;
  width: 2px;
  height: 2px;
  background: #fff;
}
@media screen and (max-width: 960px) {
  .footer > .frame > dl > dt {
    text-align: center;
    float: none;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .footer {
    margin-top: 20px;
  }
  .footer > .frame > dl > dt {
    text-align: center;
    float: none;
    margin-bottom: 0;
  }
  .footer > .frame > dl > dd {
    float: none;
  }
  .footer > .frame > dl > dd > ul > li {
    display: none;
  }
  .footer > .frame > dl > dd > ul > li.banner {
    display: block;
    text-align: center;
    width: 100%;
  }
  .footer .utility ul {
    float: none;
  }
  .footer .utility ul > li {
    display: block;
  }
  .footer .utility ul > li + li {
    margin-left: 0;
  }
  .footer .utility small {
    float: none;
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 75%;
  }
}

.frame {
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  display: table;
}

.normal .container {
  border-top: 2px solid #ddd;
  padding-top: 20px;
}

.container + .lyt-idx {
  margin-top: 100px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.lyt-idx .products {
  background: url(../img/idx-bg-products.jpg) center center;
  background-size: 100%;
  text-align: center;
  position: relative;
}
.lyt-idx .products:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.lyt-idx .products .hdg {
  position: relative;
  display: table;
  margin: 0 auto;
  padding: 0 20px;
}
.lyt-idx .products .hdg:before {
  content: "";
  position: absolute;
  right: 20px;
  top: .6em;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  width: 4px;
  height: 4px;
}
.lyt-idx .products .hdg:after {
  content: "";
  position: absolute;
  right: 16px;
  top: .6em;
  margin-top: 4px;
  width: 4px;
  height: 4px;
  background: #FFF;
}
.lyt-idx .products a {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%;
  font-weight: bold;
  padding: 70px 0;
  position: relative;
  z-index: 1;
  line-height: 1.4;
  font-size: 375%;
}
.lyt-idx .products a .sub {
  font-weight: normal;
  padding: 0 20px;
  vertical-align: middle;
  font-size: 50%;
}
.lyt-idx .more {
  display: table;
  margin: 0 auto;
  padding: 10px 40px 10px 20px;
  font-weight: normal;
  position: relative;
  font-size: 37.5%;
}
.lyt-idx .more:before {
  content: "";
  position: absolute;
  right: 20px;
  top: .9em;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  width: 4px;
  height: 4px;
}
.lyt-idx .more:after {
  content: "";
  position: absolute;
  right: 16px;
  top: .9em;
  margin-top: 4px;
  width: 4px;
  height: 4px;
  background: #FFF;
}
.lyt-idx .other {
  background: #f3f3f3;
  padding: 20px 0;
}
.lyt-idx ul.column {
  width: 100%;
  display: table;
}
.lyt-idx ul.column > * {
  display: table-cell;
  box-sizing: border-box;
}
.lyt-idx ul.column.col2 > * {
  width: 50%;
  padding: 20px;
}
.lyt-idx ul.column.col3 > * {
  width: 33.3%;
  padding: 20px 10px;
}
.lyt-idx ul.column.col3 li.box a {
  padding: 30px 15px;
}
.lyt-idx ul.column.col3 li.box > a:first-child {
  min-height: 260px;
}
@media screen and (max-width: 768px) {
	.frame { padding: 0 15px;}
  .lyt-idx ul.column.col3 li.box > a:first-child {
    height: unset;
  }
}
.lyt-idx ul.column.col4 > * {
  width: 25%;
  padding: 20px 10px;
}
.lyt-idx ul.column.col4 li.box a {
  padding: 30px 15px;
}
.lyt-idx ul.column.col4 li.box a dl > dt {
  padding: 0 15px 0 0;
  font-size: 140%;
}
.lyt-idx ul.column li.box a {
  display: block;
  background: #fff;
  text-decoration: none;
  text-align: center;
  padding: 30px;
}
.lyt-idx ul.column li.box a * + dl {
  margin-top: 20px;
}
.lyt-idx ul.column li.box a dl > dt {
  padding: 0 10px;
  display: table;
  position: relative;
  margin: 0 auto;
  line-height: 1.4;
  font-size: 135%;
}
.lyt-idx ul.column li.box a dl > dt:before {
  content: "";
  position: absolute;
  right: 0;
  top: .5em;
  width: 4px;
  height: 4px;
  border-top: 4px solid #d90013;
  border-bottom: 4px solid #d90013;
}
.lyt-idx ul.column li.box a dl > dt:after {
  content: "";
  position: absolute;
  right: -4px;
  top: .5em;
  margin-top: 4px;
  width: 4px;
  height: 4px;
  background: #d90013;
}
.lyt-idx ul.column li.box a dl > dd {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .lyt-idx ul.column li.box a {
    padding: 20px;
    position: relative;
  }
  .lyt-idx ul.column li.box a img {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -30px;
    width: 42px;
  }
  .lyt-idx ul.column li.box a dl {
    margin-top: 0;
    padding: 0 60px 0 0;
  }
  .lyt-idx ul.column li.box a dl > dt {
    text-align: left;
    padding-left: 0;
    margin: 0;
    line-height: 1.4;
    font-size: 125%;
  }
  .lyt-idx ul.column li.box a dl > dd {
    margin-top: 0;
    text-align: left;
  }
  .lyt-idx ul.column li.box a dl > dd br {
    display: none;
  }
}
.lyt-idx ul.column div.box {
  max-width: 460px;
  margin: 0 0 0 auto;
  text-align: center;
  padding: 20px 0;
}
.lyt-idx ul.column div.box a {
  display: table;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  text-decoration: none;
  font-weight: bold;
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.7);
  position: relative;
  line-height: 1.4;
  font-size: 225%;
}
.lyt-idx ul.column div.box a span.hdg {
  position: relative;
}
.lyt-idx ul.column div.box a span.hdg:before {
  content: "";
  position: absolute;
  right: 4px;
  top: .5em;
  width: 4px;
  height: 4px;
  border-top: 4px solid #d90013;
  margin-top: -4px;
  border-bottom: 4px solid #d90013;
}
.lyt-idx ul.column div.box a span.hdg:after {
  content: "";
  position: absolute;
  right: 0;
  top: .5em;
  width: 4px;
  height: 4px;
  background: #d90013;
}
.lyt-idx ul.column div.box a .sub {
  font-weight: normal;
  vertical-align: middle;
  padding: 0 20px;
  font-size: 62.5%;
}
@media screen and (max-width: 768px) {
  .lyt-idx ul.column div.box {
    margin: 0 auto !important;
    font-size: 87.5%;
  }
  .lyt-idx ul.column div.box a {
    width: 100%;
  }
  .lyt-idx ul.column div.box a .hdg {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
  }
  .lyt-idx ul.column div.box a .hdg:before, .lyt-idx ul.column div.box a .hdg:after {
    top: 0.6em !important;
  }
  .lyt-idx ul.column div.box .sub {
    display: block;
  }
}
.lyt-idx ul.column li + li div.box {
  margin: 0 auto 0 0;
}
.lyt-idx ul.column .recruit {
  background-size: 100%;
  position: relative;
}
.hamamatsu .lyt-idx ul.column .recruit {
  background: url(../img/hamamatsu/idx-bg-recruit.jpg) center center/100%;
}
.hamamatsu .lyt-idx ul.column .recruit:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.65);
}
@media screen and (max-width: 768px) {
  .hamamatsu .lyt-idx ul.column .recruit {
    background-size: 180%;
  }
}
.lyt-idx ul.column .company {
  background: url(../img/idx-bg-company.jpg);
  background-size: 100%;
  position: relative;
}
.hamamatsu .lyt-idx ul.column .company {
  background: url(../img/idx-bg-company.jpg) center center/100%;
}
.hamamatsu .lyt-idx ul.column .company:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 768px) {
  .hamamatsu .lyt-idx ul.column .company {
    background-size: 250%;
    background-position: center;
  }
}

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

	03. Modules

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  headings
----------------------------------------------------------------- */
/* .hdg-l1
----------------------------------------------- */
.hdg-l1 > .frame,
.hdg-img > .frame {
  font-weight: normal;
  line-height: 1.4;
}

.business .hdg-img {
  background: url(../img/ram-img_business-main.webp) no-repeat center center;
  background-size: 100%;
  color: #fff;
  text-shadow: 0 0 5px #333;
}
.business .hdg-img:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}

.company .hdg-img {
  background: url(../img/idx-img-01.jpg) no-repeat center;
  background-size: 100%;
}
.hamamatsu .company .hdg-img {
  background: url(../img/ram-img_company-main.webp) no-repeat center 15%/100%;
}
.hamamatsu .company .hdg-img:before {
  background: rgba(255, 255, 255, 0.5);
}
.company .hdg-img:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.3);
}

.csr .hdg-img {
  background: url(../img/bg-csr.jpg) no-repeat center right;
  background-size: 100%;
  position: relative;
}
.csr .hdg-img:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 960px) {
	.hamamatsu .company .hdg-img {
	 background-size: cover
	}
  .csr .hdg-img.lv2 {
    background-position: center right;
    background-size: 150%;
  }
}

.recruit .hdg-img {
  background-size: 100%;
  position: relative;
}
.hamamatsu .recruit .hdg-img {
  background: url("../img/ram-img_recruit-main.webp") no-repeat center bottom / cover; margin: 0 auto; max-width: 1120px;
}
.hamamatsu .recruit .hdg-img:before {
}
.recruit .hdg-img:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.3) 80%, rgba(255, 255, 255, 1) 100%);
}

.breadcrumb {
  margin-bottom: 20px;
  font-size: 87.5%;
	color: #666
}

.breadcrumb a {
	color: #666
}
.breadcrumb .mark {
  padding: 0 10px;
  display: inline-block;
}

.hdg-img {
  background: #f3f3f3;
  margin-bottom: 20px;
  position: relative;
}
.hdg-img.idx {
  background: url(../img/idx-bg-01.jpg) no-repeat;
  font-weight: normal;
  background-size: 100%;
  color: #444f58;
	padding-top: 70px;
}
.hdg-img.idx .nowrap {
  white-space: nowrap;
}
.hdg-img.idx {
  background: url(../img/index-img-ram-main.webp) no-repeat center bottom/100%;
}
.hdg-img.idx > .frame {
  padding: 80px 60px 100px;
}
.hdg-img.idx > .frame > * {
  font-weight: normal;
	text-shadow: 0 1px 5px rgba(255,255,255,0.8);
	color: #111;
}
@media screen and (max-width: 960px) {
	.breadcrumb { font-size: 0.7rem; margin-bottom: 0;}
}
.hdg-img.lv2 {
  margin-bottom: 0;
}
.hdg-img.lv2 > .frame {
  padding: 80px 10px;
	margin-top: 68px;
	font-size: 140%;
	font-weight: bold;
}
.hdg-img > .frame {
  display: block;
  padding: 40px 60px;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.hdg-img > .frame > * {
  text-align: center;
}
.hdg-img > .frame > * .sub {
  font-weight: normal;
  font-size: 36%;
}

.hdg-img + .lead,
.header + .lead {
  background: #efefef url(../img/bg.png) repeat-y center;
  margin-bottom: 10px;
  color: #0074aa;
  position: relative;
}
.hdg-img + .lead:before,
.header + .lead:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 0;
}
.hdg-img + .lead .frame,
.header + .lead .frame {
  padding: 40px 60px;
  position: relative;
  z-index: 1;
  font-weight: normal;
  line-height: 1.4;
  font-size: 187.5%;
}
.hdg-img + .lead .frame .sub,
.header + .lead .frame .sub {
  display: block;
  margin-top: 20px;
  font-size: 62.5%;
}

@media screen and (max-width: 768px) {
  .hdg-img + .lead,
  .header + .lead {
    margin-bottom: 20px;
  }
  .hdg-img + .lead .frame,
  .header + .lead .frame {
    padding: 15px 10px;
    line-height: 1.4;
    font-size: 125%;
  }
  .hdg-img + .lead .frame .sub,
  .header + .lead .frame .sub {
    margin-top: 0;
    font-size: 75%;
  }

  .hdg-img.idx {
  }
  .hdg-img.idx {
	  background-size: cover
  }
  .hdg-img.idx > .frame {
    padding: 20px 0 0;
    line-height: 1.2;
    font-size: 120%;
  }
  .hdg-img.lv2 {
    background-position: center;
    background-size: 250%;
  }
 .hdg-img.lv2 > .frame {
	margin-top: 48px;
	padding: 40px 10px;
}
  .hdg-img > .frame {
    padding: 20px;
    line-height: 1.4;
    font-size: 140%;
  }

  .hamamatsu .lyt-idx .products {
    background-size: 250%;
  }
  .lyt-idx .products a {
    padding: 40px 0;
    line-height: 1.4;
    font-size: 225%;
  }
  .lyt-idx .products a .hdg {
    padding-right: 40px;
    padding-left: 40px;
  }
  .lyt-idx .products a .sub {
    display: block;
  }

  .lyt-idx ul.column.col2 > *,
  .lyt-idx ul.column.col3 > *,
  .lyt-idx ul.column.col4 > * {
    display: block;
    width: 100%;
    padding: 0;
  }
  .lyt-idx .other {
    padding: 0;
  }
  .lyt-idx .other .frame {
    padding: 0;
  }
  .lyt-idx .other .frame ul.column.col2 > * + *,
  .lyt-idx .other .frame ul.column.col3 > * + *,
  .lyt-idx .other .frame ul.column.col4 > * + * {
    border-top: 1px solid #ddd;
  }
}
/* .hdg-l2
----------------------------------------------- */
.hdg-l2 {
  font-weight: normal;
  margin-bottom: 30px;
  line-height: 1.4;
  font-size: 212.5%;
}
* + .hdg-l2 {
  margin-top: 80px;
}
h1 + .hdg-l2 {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .hdg-l2 {
    margin-bottom: 20px;
    line-height: 1.4;
    font-size: 150%;
  }
}
/* .hdg-l3
----------------------------------------------- */
.hdg-lv3 {
  margin-bottom: 40px;
  font-weight: normal;
  position: relative;
  line-height: 1.4;
  font-size: 150%;
}
.hdg-lv3:after {
  content: "";
  position: absolute;
  width: 80px;
  height: 0;
  border-bottom: 2px solid #0074aa;
  bottom: -10px;
  left: 0;
}
* + .hdg-lv3 {
  margin-top: 60px;
}
.hdg-lv2 + .hdg-lv3 {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .hdg-lv3 {
    margin: 10px 0 30px;
    line-height: 1.4;
    font-size: 125%;
  }
  * + .hdg-lv3 {
    margin-top: 40px;
  }
}
/* .hdg-l4
----------------------------------------------- */
/* .hdg-l5
----------------------------------------------- */
/* .hdg-l6
----------------------------------------------- */
/* ----------------------------------------------------------------
  paragraph
----------------------------------------------------------------- */
/* .hoge
----------------------------------------------- */
.frame p.lead {
  line-height: 1.4;
  font-size: 150%;
}
.frame p.lead + p {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .frame p.lead {
    line-height: 1.4;
    font-size: 125%;
  }
}

/* ----------------------------------------------------------------
  list
----------------------------------------------------------------- */
/* .list
----------------------------------------------- */
.list-img > li {
  display: inline-block;
  padding: 0 20px;
  margin-top: 20px;
  vertical-align: top;
}
.list-img.center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.list-img .banner img {
  border: 1px solid #848484;
}
@media screen and (max-width: 768px) {
  .list-img > li + li {
    margin-top: 20px;
  }
}

.list-unstyled .num {
  display: table-cell;
  padding-right: .5em;
}
.list-unstyled .num + * {
  display: table-cell;
}

.list > li {
  position: relative;
  padding-left: 15px;
}
.list > li:before {
  content: "";
  position: absolute;
  top: .9em;
  left: 0;
  width: 6px;
  height: 2px;
  background: #848484;
}

.def > dt {
  font-weight: bold;
}

dl.float > * {
  display: table-cell;
}
@media screen and (max-width: 768px) {
  dl.float > dt {
    white-space: nowrap;
  }
}

/* ----------------------------------------------------------------
  link
----------------------------------------------------------------- */
/* .link
----------------------------------------------- */
.link a,
.header .utility a,
.footer dd ul li li a {
  padding-left: 12px;
  position: relative;
}
.link a:before,
.header .utility a:before,
.footer dd ul li li a:before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  border-top: 2px solid #d90013;
  border-bottom: 2px solid #d90013;
  width: 2px;
  height: 2px;
}
.link a:after,
.header .utility a:after,
.footer dd ul li li a:after {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  margin-top: 2px;
  margin-left: 2px;
  width: 2px;
  height: 2px;
  background: #d90013;
}
.link a img,
.header .utility a img,
.footer dd ul li li a img {
  vertical-align: middle;
  margin-left: 5px;
}

a[target="_blank"] img.icon {
  vertical-align: middle;
  margin: 0 5px;
}

* + .link.float {
  margin-top: 20px;
}
.link.float > * {
  display: inline-block;
  margin-right: 20px;
}

.link-top {
  margin: 0;
}
.link-top a {
  font-size: 0;
  background: #444f58;
  width: 30px;
  height: 30px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  opacity: .8;
  z-index: 2;
  border: 1px solid #fff;
}
.link-top a:before {
  content: '';
  height: 10px;
  width: 10px;
  display: block;
  border: 2px solid #fff;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 12px;
  left: 9px;
}

.link-list.grid-container {
	display: flex; flex-wrap: wrap; justify-content: space-around; 
}
.link-list.grid-container .grid-col {
	line-height: 1.5
}
.link-list .hdg {
  margin-top: 20px !important;
  max-width: 100% !important;
}
.link-list .hdg > a {
  background: #f3f3f3;
  display: block;
  padding: 5px 10px 5px 25px;
  text-decoration: none;
  position: relative;
  margin-bottom: 10px;
  box-sizing: border-box;
  line-height: 1.4;
  font-size: 125%;
}
.link-list .hdg > a:before {
  content: "";
  position: absolute;
  top: .5em;
  left: 10px;
  border-top: 2px solid #d90013;
  border-bottom: 2px solid #d90013;
  width: 2px;
  height: 2px;
  margin-top: 5px;
}
.link-list .hdg > a:after {
  content: "";
  position: absolute;
  top: .5em;
  left: 10px;
  margin-top: 7px;
  margin-left: 2px;
  width: 2px;
  height: 2px;
  background: #d90013;
}
.link-list ul {
  margin-left: 10px;
}

.link-more.center a {
  margin-left: auto;
  margin-right: auto;
}
.link-more a {
  text-decoration: none;
  border: 1px solid #444f58;
  padding: 2px 30px 2px 20px;
  font-weight: bold;
  position: relative;
  margin-right: 0;
  margin-left: auto;
  display: table;
}
.link-more a img {
  vertical-align: middle;
  margin-left: 5px;
}
.link-more a:before {
  content: "";
  position: absolute;
  top: .8em;
  right: 18px;
  border-top: 2px solid #d90013;
  border-bottom: 2px solid #d90013;
  width: 2px;
  height: 2px;
}
.link-more a:after {
  content: "";
  position: absolute;
  top: .8em;
  right: 16px;
  margin-top: 2px;
  margin-left: 2px;
  width: 2px;
  height: 2px;
  background: #d90013;
}
* + .link-more {
  margin-top: 20px;
}

/* ----------------------------------------------------------------
	nav
----------------------------------------------------------------- */
/* .nav-internal
----------------------------------------------- */
/* ----------------------------------------------------------------
	button
----------------------------------------------------------------- */
/* .btn
----------------------------------------------- */
/* ----------------------------------------------------------------
	banner
----------------------------------------------------------------- */
/* .bnr-list
----------------------------------------------- */
/* ----------------------------------------------------------------
	table
----------------------------------------------------------------- */
/* .tbl
----------------------------------------------- */
.news {
  border-collapse: separate;
  border-spacing: 0 20px;
}
.news caption {
  margin-bottom: 20px;
  line-height: 1.4;
  font-size: 212.5%;
}
.news th {
  padding: 5px 10px;
  background: #0074aa;
  color: #fff;
  position: relative;
}
.news th:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  right: -6px;
  margin-top: -6px;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #0074aa;
}
.news td {
  padding: 5px 20px;
}

.tbl {
  border-collapse: separate;
  border-spacing: 0 20px;
  position: relative;
  margin-top: 0;
  display: table;
  width: 100%;
}
.tbl:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 0;
  border-bottom: 1px solid #848484;
}
.tbl + dl.tbl {
  margin-top: -20px;
}
.tbl + dl.tbl > dt, .tbl + dl.tbl > dd {
  border-top: 0 none;
}
.tbl > dt, .tbl > dd {
  display: table-cell;
  vertical-align: middle;
}
.tbl > dt {
  text-align: center;
}
.tbl:before {
  content: none;
}
.tbl th, .tbl td, .tbl > dt, .tbl > dd {
  padding: 0 40px;
  position: relative;
}
.tbl th:before, .tbl td:before, .tbl > dt:before, .tbl > dd:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px solid #848484;
  padding-right: 1px;
}
.tbl th, .tbl > dt {
  position: relative;
  border-right: 1px solid #ddd;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .tbl > dt, .tbl > dd {
    display: block;
    text-align: left;
    width: 100% !important;
    border-right: 0 none;
    padding: 5px 10px;
    border-spacing: 0;
    border-top: 1px solid #848484 !important;
    box-sizing: border-box;
  }
  .tbl > dt:before, .tbl > dd:before {
    content: none;
  }
  .tbl > dt {
    background: #f3f3f3;
  }
  .tbl > dd + dd {
    position: relative;
  }
  .tbl > dd + dd:before {
    content: "";
    width: 100%;
    position: abolute;
    top: -1px;
    left: 0;
    height: 1px;
    background: #fff;
    border: 0 none;
  }
}

@media screen and (max-width: 768px) {
  dl.tbl {
    border-spacing: 0;
    box-sizing: border-box;
  }
  dl.tbl + dl.tbl {
    margin-top: 20px;
  }
  dl.tbl .right {
    text-align: center !important;
  }
}
/* ----------------------------------------------------------------
  image
----------------------------------------------------------------- */
 /* .image-left / .image-right
----------------------------------------------- */
.image-left {
  overflow: hidden;
}
.image-left > .image {
  float: left;
  text-align: center;
  padding-right: 4%;
}
.image-left > .image .caption {
  margin-top: 6.66667px;
  display: block;
  font-size: 75%;
}
.image-left > .col {
  overflow: hidden;
}
.image-left.wrap > .image {
  margin-bottom: 4%;
}

.image-right {
  overflow: hidden;
}
.image-right > .image {
  float: right;
  text-align: center;
  padding-left: 4%;
}
.image-right > .image .caption {
  margin-top: 6.66667px;
  display: block;
  font-size: 75%;
}
.image-right > .col {
  overflow: hidden;
}
.image-right.wrap > .image {
  margin-bottom: 4%;
}

 /* .lyt-image
----------------------------------------------- */
.lyt-img {
  display: table;
  width: 100%;
}
.lyt-img.left {
  direction: rtl;
}
.lyt-img.left > * {
  direction: ltr;
}
.lyt-img.left > * + * {
  padding-right: 20px;
  padding-left: 0;
  text-align: left;
  width: auto;
}
.lyt-img .banner img {
  border: 1px solid #848484;
}
.lyt-img > * {
  display: table-cell;
  vertical-align: top;
}
.lyt-img > * p.img {
  width: 100px;
  display: table;
}
.lyt-img > * p.img img {
  max-width: 1000px;
}
.lyt-img > * + * {
  padding-left: 20px;
  width: 100px;
}
.lyt-img > * + * p.img {
  text-align: right;
}
.lyt-img + .lyt-img {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .lyt-img > * {
    display: block;
    width: 100%;
    padding: 0;
  }
  .lyt-img > * + * {
    margin-top: 20px;
  }
  .lyt-img > *.w-10, .lyt-img > *.w-15, .lyt-img > *.w-20, .lyt-img > *.w-30, .lyt-img > *.w-60 {
    width: 100% !important;
    padding: 0;
  }
  .lyt-img > * p.img {
    width: 100%;
    display: block;
    text-align: center;
  }
  .lyt-img > * p.img img {
    max-width: 100%;
  }
}

img.border {
  border: 1px solid #848484;
}

.grid-container .img {
  display: block;
	height: auto;
  margin-left: auto;
  margin-right: auto;
  font-size: 90%;
	margin-bottom: 0
}
.grid-container .img img {
  width: 100%; margin-bottom: 10px
}
.grid-container.idx {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}
.grid-container.idx .img {
  width: 100%;
  box-sizing: border-box;
}
.grid-container.idx .img img {
  max-width: 100%;
  width: 100%;
}
.grid-container.idx .grid-col {
  margin-top: 40px;
}
.grid-container.idx a {
  display: block;
  position: relative;
  text-decoration: none;
  margin-left: 15px;
  margin-right: 15px;
}
.grid-container.idx a .text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.4;
  font-size: 125%;
}
@media screen and (max-width: 768px) {
  .grid-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .grid-container .grid-col {
    margin: 0 auto;
  }
  .grid-container .grid-col .img {
    width: 100%;
  }
  .grid-container .grid-col img {
    width: 100%;
  }
}

/* ----------------------------------------------------------------
	box
----------------------------------------------------------------- */
/* .box
----------------------------------------------- */
.box-01 {
  background: #f3f3f3;
  padding: 40px;
  margin-left: -10px;
  margin-right: -10px;
}
* + .box-01 {
  margin-top: 80px;
}
.box-01 .hdg {
  font-weight: normal;
  line-height: 1.4;
  font-size: 187.5%;
}
@media screen and (max-width: 768px) {
  .box-01 {
    padding: 20px 15px;
  }
  .box-01 .hdg {
    line-height: 1.4;
    font-size: 125%;
  }
}

.box-02 {
  background: #e6f3f9;
  padding: 20px 40px;
  margin-top: 40px;
  background: #f8edf5;
}
@media screen and (max-width: 768px) {
  .box-02 {
    padding: 20px 15px;
  }
}

.box-aside {
  margin-top: 0;
  padding-top: 60px;
  position: relative;
}
.box-aside:before {
  /* content: ""; */
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 10%;
  width: 80%;
  height: 2px;
  border-top: 1px solid #848484;
  border-bottom: 1px solid #848484;
}
.box-aside > .hdg {
  text-align: center;
  font-weight: normal;
  color: #0074aa;
  margin-bottom: 40px;
  line-height: 1.4;
  font-size: 187.5%;
}
@media screen and (max-width: 768px) {
	.box-aside {
  margin-top: 0;
  padding-top: 5px;
}
  .box-aside > .hdg {
    text-align: left;
    line-height: 1.4;
    font-size: 150%;

  }
}

/* ----------------------------------------------------------------
	notice
----------------------------------------------------------------- */
/* .notice-list
----------------------------------------------- */
/* ----------------------------------------------------------------
	layout
----------------------------------------------------------------- */
/* list-col-2,list-col-3,list-col-4
----------------------------------------------- */
/* grid
----------------------------------------------- */
/*  12 COLUMN : RESPONSIVE GRID SYSTEM
DEVELOPER : DENIS LEBLANC
URL : http://responsive.gs
VERSION : 3.0
LICENSE : GPL & MIT */
[class^="grid-"] {
  box-sizing: border-box;
}

.grid-container {
  margin-left: auto;
  margin-right: auto;
	display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0;
}
.grid-container .grid-col {
  display: block; width: 30%; line-height: 1.5
}
@media screen and (max-width: 768px) {
	.grid-container { display: block; }
	.grid-container .grid-col {width: 100%; margin-bottom: 20px}
  .grid-container .grid-col a {
    width: 100%;
    margin: 0;
  }
}
.grid-container .grid-gutters .grid-col {
  margin-left: 4%;
}
.grid-container .grid-gutters .grid-col:first-child {
  margin-left: 0;
}
.grid-container .grid-span-1 {
  width: 8.33333%;
}
.grid-container .grid-span-2 {
  width: 16.66667%;
}
.grid-container .grid-span-3 {
  width: 25%;
}
.grid-container .grid-span-4 {
}
.grid-container .grid-span-5 {
  width: 41.66667%;
}
.grid-container .grid-span-6 {
  width: 50%;
}
.grid-container .grid-span-7 {
  width: 58.33333%;
}
.grid-container .grid-span-8 {
  width: 66.66667%;
}
.grid-container .grid-span-9 {
  width: 75%;
}
.grid-container .grid-span-10 {
  width: 83.33333%;
}
.grid-container .grid-span-11 {
  width: 91.66667%;
}
.grid-container .grid-span-12 {
  width: 100%;
}
.grid-container .grid-gutters .grid-span-1 {
  width: 4.66667%;
}
.grid-container .grid-gutters .grid-span-2 {
  width: 13.33333%;
}
.grid-container .grid-gutters .grid-span-3 {
  width: 22%;
}
.grid-container .grid-gutters .grid-span-4 {
  width: 30.66667%;
}
.grid-container .grid-gutters .grid-span-5 {
  width: 39.33333%;
}
.grid-container .grid-gutters .grid-span-6 {
  width: 48%;
}
.grid-container .grid-gutters .grid-span-7 {
  width: 56.66667%;
}
.grid-container .grid-gutters .grid-span-8 {
  width: 65.33333%;
}
.grid-container .grid-gutters .grid-span-9 {
  width: 74.0%;
}
.grid-container .grid-gutters .grid-span-10 {
  width: 82.66667%;
}
.grid-container .grid-gutters .grid-span-11 {
  width: 91.33333%;
}
.grid-container .grid-gutters .grid-span-12 {
  width: 100%;
}

/* ----------------------------------------------------------------
	component
----------------------------------------------------------------- */
/* .comp-step
----------------------------------------------- */
/* ----------------------------------------------------------------
	form
----------------------------------------------------------------- */
/* default
----------------------------------------------- */
/* ----------------------------------------------------------------
	common
----------------------------------------------------------------- */
/* マージン・パディング制御用クラス
----------------------------------------------- */
.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pl30 {
  padding-left: 30px !important;
}

/* Width制御
----------------------------------------------- */
.w-5 {
  width: 5% !important;
}

.w-10 {
  width: 10% !important;
}

.w-15 {
  width: 15% !important;
}

.w-20 {
  width: 20% !important;
}

.w-25 {
  width: 25% !important;
}

.w-30 {
  width: 30% !important;
}

.w-35 {
  width: 35% !important;
}

.w-40 {
  width: 40% !important;
}

.w-45 {
  width: 45% !important;
}

.w-50 {
  width: 50% !important;
}

.w-55 {
  width: 55% !important;
}

.w-60 {
  width: 60% !important;
}

.w-65 {
  width: 65% !important;
}

.w-70 {
  width: 70% !important;
}

.w-75 {
  width: 75% !important;
}

.w-80 {
  width: 80% !important;
}

.w-85 {
  width: 85% !important;
}

.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

.w-100 {
  width: 100% !important;
}

/* Line制御
----------------------------------------------- */
.line-top {
  border-top: 1px #000 solid !important;
}

.line-reset-top {
  border-top: none !important;
}

.line-right {
  border-right: 1px #000 solid !important;
}

.line-reset-right {
  border-right: none !important;
}

.line-bottom {
  border-bottom: 1px #000 solid !important;
}

.line-reset-bottom {
  border-bottom: none !important;
}

.line-left {
  border-left: 1px #000 solid !important;
}

.line-reset-left {
  border-left: none !important;
}

/* Display制御
----------------------------------------------- */
.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

/* Align Control
----------------------------------------------- */
.left,
table.left th,
table.left td,
thead.left > tr > *,
tbody.left > tr > * {
  text-align: left !important;
}

.center,
table.center th,
table.center td,
thead.center > tr > *,
tbody.center > tr > * {
  text-align: center !important;
}

.right,
table.right th,
table.right td,
thead.right > tr > *,
tbody.right > tr > * {
  text-align: right !important;
}

.middle,
table.middle th,
table.middle td,
thead.middle > tr > *,
tbody.middle > tr > * {
  vertical-align: middle !important;
}

/* ----- Margin Adjust ----- */
.mt00 {
  margin-top: 0px !important;
}

.mr00 {
  margin-right: 0px !important;
}

.mb00 {
  margin-bottom: 0px !important;
}

.ml00 {
  margin-left: 0px !important;
}

.mt05 {
  margin-top: 5px !important;
}

.mr05 {
  margin-right: 5px !important;
}

.mb05 {
  margin-bottom: 5px !important;
}

.ml05 {
  margin-left: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mt55 {
  margin-top: 55px !important;
}

.mr55 {
  margin-right: 55px !important;
}

.mb55 {
  margin-bottom: 55px !important;
}

.ml55 {
  margin-left: 55px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.mt05- {
  margin-top: -5px !important;
}

.mb05- {
  margin-bottom: -5px !important;
}

.mt10- {
  margin-top: -10px !important;
}

.mb10- {
  margin-bottom: -10px !important;
}

.mt15- {
  margin-top: -15px !important;
}

.mb15- {
  margin-bottom: -15px !important;
}

.mt20- {
  margin-top: -20px !important;
}

.mb20- {
  margin-bottom: -20px !important;
}

.mt25- {
  margin-top: -25px !important;
}

.mb25- {
  margin-bottom: -25px !important;
}

.mt30- {
  margin-top: -30px !important;
}

.mb30- {
  margin-bottom: -30px !important;
}

.mt35- {
  margin-top: -35px !important;
}

.mb35- {
  margin-bottom: -35px !important;
}

.mt40- {
  margin-top: -40px !important;
}

.mb40- {
  margin-bottom: -40px !important;
}

/* ----- Padding Adjust ----- */
.pt00 {
  padding-top: 0px !important;
}

.pt05 {
  padding-top: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pt55 {
  padding-top: 55px !important;
}

.pt60 {
  padding-top: 60px !important;
}

#cboxOverlay {
  background: #000;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 15;
}

#colorbox {
  z-index: 16;
}

.map {
  position: relative;
  padding-bottom: 45.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.map iframe,
.map object,
.map embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0 none;
}

.tabs .hide {
  display: none;
}
.tabs .tbl.bottom .link-tab li.active a:before {
  margin-top: 8px;
}
.tabs .tbl.bottom .link-tab li.active a:after {
  margin-top: 6px;
}
.tabs .tbl .link-tab {
  margin-bottom: 10px;
}
.tabs .tbl .link-tab > li {
  padding-right: 14px;
}
.tabs .tbl .link-tab > li.active {
  background: #f3f3f3;
}
.tabs .tbl .link-tab > li.active a {
  background: none;
}
.tabs .tbl .link-tab > li.active a:before {
  margin-top: 6px;
}
.tabs .tbl .link-tab > li.active a:after {
  margin-top: 8px;
}
.tabs .tbl .link-tab > li a {
  padding: 0 0 0 24px;
  border: 0 none;
}
.tabs .tbl .link-tab > li a:before {
  margin-top: 4px;
  left: 8px;
}
.tabs .tbl .link-tab > li a:after {
  margin-top: 6px;
  left: 8px;
}
.tabs .tbl + .tab-container {
  margin-top: 80px;
}
.tabs .link-tab {
  margin-bottom: 80px;
  letter-spacing: -1em;
}
.tabs .link-tab > li {
  display: inline-block;
  letter-spacing: 0;
  position: relative;
  margin: 10px 20px 0 0;
}
.tabs .link-tab > li a {
  display: block;
  text-decoration: none;
  padding: 5px 20px 5px 30px;
  position: relative;
  border: 1px solid #ddd;
}
.tabs .link-tab > li a:hover, .tabs .link-tab > li a:focus, .tabs .link-tab > li a:active {
  text-decoration: underline;
}
.tabs .link-tab > li a:before {
  content: "";
  position: absolute;
  top: .5em;
  left: 15px;
  border-top: 2px solid #d90013;
  border-bottom: 2px solid #d90013;
  width: 2px;
  height: 2px;
  margin-top: 8px;
}
.tabs .link-tab > li a:after {
  content: "";
  position: absolute;
  top: .5em;
  left: 15px;
  margin-top: 10px;
  margin-left: 2px;
  width: 2px;
  height: 2px;
  background: #d90013;
}
.tabs .link-tab > li.active a {
  cursor: text;
  background: #f3f3f3;
}
.tabs .link-tab > li.active a:hover, .tabs .link-tab > li.active a:focus, .tabs .link-tab > li.active a:active {
  text-decoration: none;
}
.tabs .link-tab > li.active a:before {
  border-left: 2px solid #d90013;
  border-right: 2px solid #d90013;
  border-top: 0 none;
  border-bottom: 0 none;
  margin-top: 10px;
}
.tabs .link-tab > li.active a:after {
  background: #d90013;
  margin-top: 12px;
}

/* ----------------------------------------------------------------
	SP
----------------------------------------------------------------- */

/*# sourceMappingURL=master.css.map */


/* ----------------------------------------------------------------
	Wrote cre_seki
----------------------------------------------------------------- */
/* text */
.container h2 {display: block; color: #444f58; font-size: 2.4rem; padding: 35px 0 0 0; margin: 0 auto 10px auto; }
.container h2::before {content:''; display: block; width: 100%; height: 2px; background-color: #444f58; margin: 0 0 25px 0; }
.container h3 {display: flex; color: #444f58; font-size: 1.6rem; margin: 25px auto 10px auto; align-items: center; gap: 1em;}
.container h3::after {content: ''; flex:1 1 auto; height: 1px; background: #ccc;}
.container h4 {display: block; color: #444f58; font-size: 1.4rem; margin: 40px auto 10px auto;}
.container p {}
.container .text_large {font-size: 1.4rem }
.container .text_small {font-size: 0.8rem }

.show_pc{display: inline}
.show_sp{display: none}

@media screen and (max-width: 768px) {
	.container h2 {font-size: 1.8rem; padding: 30px 0 0 0; margin: 0 auto 10px auto;}
	.container h3 {font-size: 1.3rem; margin: 30px auto 10px auto; line-height: 1.5 }
	.container h4 {font-size: 1.1rem; margin: 30px auto 5px auto;}
	.container p { margin: 0 0 20px 0; font-size: 14px;}
	.container .text_large {font-size: 1.0rem }
	.container .text_small {font-size: 0.8rem }
	
	.show_pc{display: none}
	.show_sp{display: inline}
}

/* HEADER */
.header {background: #fff; position: fixed; top: 0; left: 0; width: 100%; padding: 10px 0 10px 0; z-index:999; }
.logo { margin-bottom: 0; vertical-align: bottom; }
.logo a img { display: inline-block; vertical-align: middle; height: 24px; width: auto;}
.note_kome { display: inline-block; position: relative; padding-left: 12px;}
.note_kome::before {content:'※'; position: absolute; top: 0; left: 2px; line-height: 1.2}

@media screen and (max-width: 768px) {
	.logo a { display: block;}
	.logo a img { height: auto; width: 95%;}
	.header .global > li.panel div > a:before, .header .global > li.panel div > a:after {content: none;}
	.link a:before, .header .utility a:before{ border-color: #ccc;}
	.link a:after, .header .utility a:after {background-color: #ccc}
}

/* TOP */
.hdg-img.idx {}
.hdg-img.idx h1 { font-size: 2.0rem; line-height: 1.6}
.hdg-img.idx h1 strong {display: block; font-size: 2.4rem;}
.top_intro { text-align: center; margin: 40px auto 60px auto;}
.top_intro h3{ display: block; font-size: 1.6rem;  margin: 40px auto 10px auto;}
.top_intro h3::after {content: none; }
.top_intro p{ font-size: 14px; text-align: center;}

.top_mainlink{}
.top_mainlink ol{ list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0}
.top_mainlink ol li{ display: block; width: 30%; background-color: #ccc; padding: 60px 30px; box-sizing: border-box;}
.top_mainlink ol li:nth-child(1){ background: #ccc url(../img/index-img-ram-company.webp) center / cover no-repeat}
.top_mainlink ol li:nth-child(2){ background: #ccc url("../img/index-img-ram-business.webp") center / cover no-repeat}
.top_mainlink ol li:nth-child(3){ background: #ccc url("../img/index-img-ram-recruit.webp") center / cover no-repeat}
.top_mainlink ol li a{ display: flex; justify-content: center; align-items: center; color: #444f58; font-size: 16px; text-align: center; line-height: 1.4; text-decoration: none; background-color: rgba(255,255,255,0.8); padding: 20px 0; box-sizing: border-box; transition: 0.5s}
.top_mainlink ol li a strong{ display: block; position: relative; color: #444f58; font-size: 24px; transition: 0.5s}
.top_mainlink ol li a strong span{ display: block; font-size: 14px; font-weight: normal;}

.top_mainlink ol li a strong::before {
  content: ""; position: absolute; top: calc(50% - 10px); right: -20px; border-top: 4px solid #d90013; border-bottom: 4px solid #d90013; 
	width: 4px; height: 4px; margin-top: 5px;
}
.top_mainlink ol li a strong::after {
  content: ""; position: absolute; top: calc(50% - 10px); right: -24px; margin-top: 9px; margin-left: 0; 
	width: 4px; height: 4px; background: #d90013;
}
.top_mainlink ol li a:hover{ color: #d90013; background-color: rgba(255,255,255,1);}
.top_mainlink ol li a:hover strong{ color: #d90013; }

@media screen and (max-width: 768px) {
	.hdg-img.idx {padding-bottom: 40px}
	.hdg-img.idx h1 { font-size: 1.0rem;}
	.hdg-img.idx h1 strong { font-size: 1.4rem; line-height: 1.4; margin-top: 10px }
	.top_intro { margin: 0 auto 20px auto;}
	.top_intro h3{font-size: 1.2rem; margin: 10px auto 10px auto; line-height: 1.5 }
	.top_intro p{ font-size: 14px; text-align: left;}
	.top_mainlink ol{ display: block; }
	.top_mainlink ol li{ width: 100%;padding: 40px 30px; margin-bottom: 10px}
	.top_mainlink ol li a strong::before { }
	.top_mainlink ol li a strong::after { }
}

/* Company */
.company-prof {}
.company-prof dl { display: flex; justify-content: flex-start; flex-wrap: wrap; line-height: 1.4; margin: 10px 0 14px 0}
.company-prof dl dt { display: block; width: 29%; margin-right: 1%; padding: 5px 5px 15px 5px; font-weight: bold; border-bottom: 2px solid #ccc; box-sizing: border-box}
.company-prof dl dd { display: block; width: 70%; padding: 5px 5px 15px 5px; border-bottom: 1px solid #ccc; box-sizing: border-box}

.box_anchor { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.box_anchor a {display: inline-block; max-width: 25%; padding: 5px 30px 5px 35px; border-style: solid; border-width: 0 0 0 1px; border-color: #ccc; position: relative; font-size: 0.9rem; line-height: 1.2; text-decoration: none; box-sizing: border-box;}
.box_anchor a:last-child {border-width: 0 1px;}
.box_anchor a::before { content: ''; display: block; width: 12px; height: 8px; background-color: #ddd; clip-path: polygon(0 0, 50% 100%, 100% 0); position: absolute; top:calc(50% - 4px); left: 10px;}

.list_group {}
.list_group li { display: block; padding-left: 20px; position: relative; line-height: 1.4; margin-bottom: 15px;}
.list_group li::before { content: ''; display: block; width: 8px; height: 8px; position: absolute; top: 6px; left: 3px; background-color: #de6e78;}

.company-gmap { width: 100%; height: 40vh; max-height: 420px;}
.company-gmap iframe { width: 100%; height: 100%}

@media screen and (max-width: 768px) {
	.company-prof dl { display: block; }
	.company-prof dl dt { width: 100%; border-bottom: 1px solid #ccc; padding: 5px 5px 5px 5px; }
	.company-prof dl dd { width: 100%; border-bottom: 2px solid #ccc; font-size: 14px; }
	
	.box_anchor {justify-content: space-between;}
	.box_anchor a {width: 49%; max-width: 49%; padding: 5px 10px 5px 25px; border-width: 0 0 1px 0; font-size: 0.9rem; text-align: center}
	.box_anchor a:last-child {border-width: 0 0 1px 0}
	.box_anchor a::before { top:calc(50% - 4px); left: 10px;}
	
	.list_group li { font-size: 14px;}
}

/* Business */
.txt-rambis {}
.txt-rambis strong { font-size: 1.2rem}

.list_3clumn { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0}
.list_3clumn li { display: block; width: 30%; margin-bottom: 5px;}
.list_3clumn li img { display: block; max-width: 100%; height: auto; margin-bottom: 10px}
.list_3clumn li p { display: block; line-height: 1.5}
.list_3clumn li p strong { display: block; margin-bottom: 5px; font-size: 1.2rem;}

.list_2clumn_side { display: block; list-style: none; margin: 10px 0}
.list_2clumn_side li { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}
.list_2clumn_side li div { display: block; width: 40%;}
.list_2clumn_side li p { display: block; width: 58%; padding-top: 40px}
.list_2clumn_side li.side_imgright { flex-direction: row-reverse}
.list_2clumn_side li p strong { display: block; margin-bottom: 10px; font-size: 1.2rem}

@media screen and (max-width: 768px) {
	.list_3clumn { display: block;}
	.list_3clumn li { width: 100%; }
	.list_2clumn_side li { display: block;}
	.list_2clumn_side li div { width: 100%;}
	.list_2clumn_side li p { width: 100%; padding-top: 10px; line-height: 1.5}
	.list_2clumn_side li p strong { margin-bottom: 5px}
}

/* FOOTER */
h4.footer-logo {display: block; margin-top: 40px;}
h4.footer-logo img { display: inline-block; vertical-align: middle; height: 30px; width: auto; margin:0 10px 0 0}

@media screen and (max-width: 768px) {
	h4.footer-logo {margin: 20px auto;}
	h4.footer-logo img { display: block; height: auto; width: 100%; margin: 5px auto 10px auto}
	.footer > .frame > dl {display: none}
}