/* TOP CSS */
/* --------------------------------------
Base settings
---------------------------------------*/
.pc-hyde {
  display: block;
}

.sp-hyde {
  display: none;
}

.wrapper {
  max-width: 100%;
  padding: 0 20px;
}

.bottom20 {
  margin-bottom: 10px;
}

.bottom30 {
  margin-bottom: 15px;
}

.bottom35 {
  margin-bottom: 17.5px;
}

.bottom40 {
  margin-bottom: 20px;
}

.bottom50 {
  margin-bottom: 25px;
}

.bottom60 {
  margin-bottom: 30px;
}

.bottom70 {
  margin-bottom: 35px;
}

.bottom80 {
  margin-bottom: 40px;
}

.conts-padding {
  padding: 30px 0;
}

.wrapper {
  max-width: 100%;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
}

body {
  background-size: 200%;
}

.conts-padding {
  padding: 25px 0;
}

table {
  width: 100%;
}
table th {
  text-align: left;
  font-weight: normal;
}
table th.title {
  width: 100%;
}
table th.text-center {
  width: 55px;
}
table th,
table td {
  display: block;
  width: 100%;
  background: #fff;
  padding: 15px;
  border-bottom: 1px solid #a9c2d6;
  border-right: 1px solid #a9c2d6;
}
table.detail th,
table.detail td {
  display: table-cell;
}

.anchor .flexbox {
  display: block;
  border-left: 1px solid #002553;
  border-bottom: 1px solid #002553;
  width: auto;
}
.anchor .flexbox:after {
  content: none;
}
.anchor .flexbox .item {
  width: 100%;
  font-size: 14px;
  border-bottom: 0;
}

/*===============================
common CONTACT AREA
===============================*/
.contact-tel {
  padding: 15px;
  font-size: 26px;
}
.contact-tel span {
  font-size: 14px;
}
.contact-tel span.detail {
  font-size: 15px;
}
.contact-tel img {
  width: 10px;
}

.contact-form {
  padding: 15px;
}
.contact-form form .flexbox {
  display: block;
  min-height: inherit;
}
.contact-form form .flexbox .title {
  display: flex;
  width: 100%;
  padding-top: 5px;
}
.contact-form form .flexbox .form-box {
  width: 100%;
}
.contact-form form .flexbox .form-box .wpcf7-list-item {
  margin-right: 20px;
}

/*===============================
common HEADING
===============================*/
.bg-grad-heading {
  margin-bottom: 15px;
  padding: 10px 15px 12px;
}

.dashed-border-heading {
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.border-bottom-heading {
  padding-bottom: 15px;
  border-bottom: dashed 1px #a9c2d6;
  margin-bottom: 10px;
}

main {
  /*top product*/
}
main .mainvisual {
  padding: 60px 0 30px;
}
main .mainvisual .mv-image {
  display: block;
  margin-bottom: 75px;
}
main .mainvisual .mv-image .catch {
  font-size: 25px;
  width: 100%;
  line-height: 1.3;
}
main .mainvisual .mv-image .img {
  display: none;
}
main .mainvisual .news {
  border: 1px solid #fff;
  display: flex;
  align-items: inherit;
  color: #fff;
  font-weight: bold;
}
main .mainvisual .news .flexbox {
  display: block;
}
main .mainvisual .news .heading {
  font-family: "BebasNeue", sans-serif;
  padding: 0 20px 0 0;
  font-size: 20px;
  border-right: 1px solid #fff;
  letter-spacing: 3px;
}
main .mainvisual .news .data {
  display: block;
  font-size: 15px;
  padding: 0 0 0 20px;
  margin-bottom: 10px;
}
main .mainvisual .news .title {
  padding-left: 20px;
}
main .top-product .heading {
  margin-bottom: 15px;
}
main .top-product .flexbox {
  display: block;
}
main .top-product .flexbox .item {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
main .top-product .flexbox .item:last-child {
  margin-bottom: 0;
}

#sub {
  /*===============================
  common
  ===============================*/
  /*===============================
  page : product
  ===============================*/
  /*===============================
  page : power-products-business
  ===============================*/
  /*===============================
  page : construction-and-industrial
  ===============================*/
  /*===============================
  page : jellafin
  ===============================*/
  /*===============================
  page : recruit
  ===============================*/
  /*===============================
  page : company
  ===============================*/
}
#sub .sub-common-heading {
  padding: 30px 0;
}
#sub .sub-common-heading .title {
  font-size: 20px;
}
#sub .sub-common-heading.detail .title span {
  font-size: 16px;
}
#sub .contents-area {
  padding-bottom: 25px;
}
#sub .contents-area .breadcrumb {
  padding-top: 20px;
  margin-bottom: 20px;
}
#sub .product .products-list .flexbox {
  display: block;
}
#sub .product .products-list .flexbox .item {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}
#sub .product .products-list .flexbox .item:last-child {
  margin-bottom: 0;
}
#sub .product .bg-lightblue .flexbox {
  display: block;
}
#sub .product .bg-lightblue .flexbox .item {
  width: 100%;
}
#sub .product .bg-lightblue .flexbox .item:first-child {
  margin-bottom: 10px;
}
#sub .power-products-business .products-list .flexbox {
  display: block;
}
#sub .power-products-business .products-list .flexbox .box {
  width: 100%;
  margin-bottom: 10px;
}
#sub .power-products-business .products-list .flexbox .box:last-child {
  margin-bottom: 0;
}
#sub .construction-and-industrial .contents-area {
  padding-bottom: 0;
}
#sub .construction-and-industrial .anchor {
  margin-bottom: 25px;
}
#sub .construction-and-industrial .anchor .flexbox .item:nth-child(4), #sub .construction-and-industrial .anchor .flexbox .item:nth-child(5), #sub .construction-and-industrial .anchor .flexbox .item:nth-child(6) {
  border-top: 1px solid #002553;
}
#sub .construction-and-industrial .flexbox {
  display: block;
}
#sub .construction-and-industrial .flexbox .list-box,
#sub .construction-and-industrial .flexbox .box {
  width: 100%;
}
#sub .construction-and-industrial .flexbox .list-box:not(:last-child),
#sub .construction-and-industrial .flexbox .box:not(:last-child) {
  margin-bottom: 10px;
}
#sub .construction-and-industrial #submerged-water {
  padding-bottom: calc(25px - 2%);
}
#sub .jellafin .jel-introduction .flexbox {
  display: block;
}
#sub .jellafin .jel-introduction .flexbox .item {
  max-height: auto;
  width: 100%;
}
#sub .jellafin .jel-introduction .flexbox .item.image {
  margin-bottom: 10px;
}
#sub .jellafin .jel-introduction .flexbox .item.image img {
  height: auto;
  width: 100%;
  display: block;
}
#sub .jellafin .jel-use .flexbox {
  display: block;
}
#sub .jellafin .jel-use .flexbox .item {
  width: 100%;
}
#sub .jellafin .jel-use .flexbox .item:not(:last-child) {
  margin-bottom: 10px;
}
#sub .recruit .breadcrumb {
  margin-bottom: 20px;
}
#sub .recruit .recruit-mainvisual {
  padding: 50px 0;
}
#sub .recruit .recruit-mainvisual .text-lh {
  font-size: 40px;
  line-height: 1;
}
#sub .recruit .rec-message .text-lh {
  text-align: left;
}
#sub .recruit .application-section {
  margin-bottom: 25px;
}
#sub .recruit .application-section:last-child {
  margin-bottom: 0;
}
#sub .recruit .application-section .btn a:after {
  transform: rotate(90deg);
}
#sub .company #overview table td .flexbox {
  display: block;
}
#sub .company #overview table td .flexbox .item {
  width: 100%;
}
#sub .company #overview table td .flexbox .item.detail {
  margin-bottom: 10px;
  width: 100%;
  margin-right: 0;
}/*# sourceMappingURL=sp-layout.css.map */