@charset "utf-8";

/*============================================================
base
============================================================*/

body { padding-top: 17.733333333vw; /* 133px */ }

.pc { display: none; }
.mb { display: block; }
br.mb,span.mb { display: inline; }

.mb-2,.mb-mb-2 { margin-bottom: 2.666666667vw !important; /* 20px */ }
.mb-3,.mb-mb-3 { margin-bottom: 4vw !important; /* 30px */ }
.mb-4,.mb-mb-4 { margin-bottom: 5.333333333vw !important; /* 40px */ }
.mb-6,.mb-mb-6 { margin-bottom: 8vw !important; /* 60px */ }
.mb-8,.mb-mb-8 { margin-bottom: 10.666666667vw !important; /* 80px */ }

/*============================================================
main
============================================================*/

.global-main {
  background-color: #d2e1f7;
  padding-top: 8vw; /* 60px */
}

/* 見出し ***************************************************/

.ttl-main {
  height: 12vw; /* 90px */
  font-size: 4.533333333vw; /* 34px */
  text-align: center;
  color: #000;
}

.ttl-primary {
  font-size: 4.266666667vw; /* 32px */
  color: #003587;
}

.ttl-secondary {
  font-size: 4.266666667vw; /* 32px */
  color: #000;
}

.ttl-tertiary {
  font-size: 4vw; /* 30px */
  color: #000;
}

.ttl-hide {
  font-size: 0%;
  line-height: 0%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* コンテンツ ***********************************************/

.area-content {
  position: relative;
  width: 100%;
  min-height: 70vw;
  margin: 0 auto;
  padding: 8vw 4.666666667vw 16vw 4.666666667vw; /* 60px 35px 120px 35px */
  background-color: #fff;
}

.area-content::before {
  content: '';
  display: block;
  width: 24vw; /* 180px */
  height: 20.8vw; /* 156px */
  position: absolute;
  top: -17.333333333vw; /* -130px */
  left: 4.666666667vw; /* 35px */
  background-image: url( ../img/pattern-01.svg );
  background-size: 24vw 20.8vw;
}

/* テキスト ***********************************************/

.txt-middle {
  font-size: 3.733333333vw; /* 28px */
  line-height: 6.4vw; /* 48px */
  text-align: justify;
  text-justify: inter-character;
  margin: -1.333333333vw 0; /* -10px 0 */
}

.txt-large {
  font-size: 4vw; /* 30px */
  line-height: 6.133333333vw; /* 46px */
  text-align: justify;
  text-justify: inter-character;
  margin: -1.066666667vw 0; /* -8px 0 */
}

/* DLリスト ***********************************************/

.list-dl-common {
  border-top: 0.266666667vw dashed #ccc; /* 2px */
  line-height: 5.333333333vw; /* 40px */
  font-size: 3.733333333vw; /* 28px */
}

.list-dl-common dt {
  margin-bottom: .25em;
  padding: 0 5.333333333vw; /* 0 40px */
  padding-top: 3.866666667vw; /* 29px */ 
  color: #333;
}

.list-dl-common dd {
  padding: 0 5.333333333vw; /* 0 40px */
  padding-bottom: 3.866666667vw; /* 29px */
  border-bottom: 0.266666667vw dashed #ccc; /* 2px */
  text-align: justify;
  text-justify: inter-character;
}

/*============================================================
contact お問い合わせ
============================================================*/

#form {
  padding-top: 18.666666667vw; /* 140px */
  margin-top: -18.666666667vw; /* -140px */
}

.list-form {
  width: 90.666666667vw; /* 680px */
  margin: 0 auto;
}

.list-form dt {
  border-top: 0.266666667vw dashed #ccc; /* 2px */
  padding: 4vw 5.333333333vw  5.333333333vw 5.333333333vw; /* 30px 40px 40px 40px */;
}

.list-form dt label {
  font-size: 3.733333333vw; /* 28px */
}

.list-form dt span {
  font-size: 3.2vw; /* 24px */
  color: #ce2e2e;
  margin-left: .5em;
}

.list-form dd {
  padding: 0 5.333333333vw 4vw 5.333333333vw; /* 0 40px 30px 40px */;
  font-size: 3.733333333vw; /* 28px */
  line-height: 6.133333333vw; /* 46px */
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  height: 10.666666667vw; /* 80px */
  border: 0.266666667vw solid #bbb;
  border-radius: 0.533333333vw;
  font-size: 16px;
  line-height: 10.133333333vw;
  padding:  0 .5em;
}

textarea {
  padding: .5em;
  line-height: 1.75;
  height: 53.333333333vw; /* 400px */
}

.error { color: #ce2e2e; }

.list-form dd label.error {
  display: block;
  margin-top: .75em;
  font-size: 3.733333333vw; /* 28px */
}

.list-form dd.box-btn {
  padding-top: 8vw; /* 60px */
  padding-bottom: 8vw; /* 60px */
}

button.btn-submit,
button.btn-return {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  
  width: 100%;
  height: 13.333333333vw; /* 100px */
  border: 0.533333333vw solid #003587;
  font-size: 3.733333333vw; /* 28px */

  background-color: #fff;
  color: #003587;
}

button.btn-return {
  border-color: #999;
  color: #999;
}

button + button { margin-top: 5.333333333vw; /* 40px */ }

.txt-privacypolicy {
  position: relative;
  padding-left: 4vw; /* 30px */
  font-size: 3.733333333vw; /* 28px */
  line-height: 6.133333333vw; /* 46px */
}

.txt-privacypolicy::before {
  content: '';
  display: block;
  width: 2.133333333vw; /* 16px */
  height: 2.133333333vw; /* 16px */
  border-radius: 50%;
  background-color: #0098d8;
  position: absolute;
  left: 0;
  top: 2vw; /* 15px */
}

/*============================================================
privacypolicy プライバシーポリシー
============================================================*/

.list-privacypolicy dt {
  margin-top: 8vw; /* 60px */
  margin-bottom: 4vw; /* 30px */
  font-size: 4vw; /* 30px */
}

.list-privacypolicy dd {
  font-size: 3.733333333vw; /* 28px */
  line-height: 6.4vw; /* 48px */
  text-align: justify;
  text-justify: inter-character;
  margin: -1.333333333vw 0; /* -10px 0 */
}

.list-privacypolicy dd ul {
  margin-top: 1.6vw; /* 12px */
  margin-bottom: -8px;
}

.list-privacypolicy dd li {
  display: -webkit-box;
  display: flex;
  font-size: 3.733333333vw; /* 28px */
  line-height: 6.4vw; /* 48px */
  text-align: justify;
  text-justify: inter-character;
}

.list-privacypolicy dd li::before {
  content: '';
  display: block;
  min-width: 2.133333333vw; /* 16px */
  width: 2.133333333vw; /* 16px */
  min-height: 2.133333333vw; /* 16px */
  height: 2.133333333vw; /* 16px */
  margin-top: 2.133333333vw; /* 16px */
  margin-right: 2.4vw; /* 18px */
  border-radius: 50%;
  background-color: #999;
}

/*============================================================
recruit 採用情報
============================================================*/

.notrecruiting {
  display: inline-block;
  font-size: 4vw; /* 30px */
  padding: 3.733333333vw 5.066666667vw;
  border: 0.266666667vw solid #000; /* 2px */
}

/*============================================================
service 業務案内
============================================================*/

.area-products > div + div { margin-top: 8vw; /* 60px */ }

.area-products .ttl {
  margin-bottom: 4vw; /* 30px */
  font-size: 3.733333333vw; /* 28px */
  font-weight: 700;
  text-align: center;
  color: #000;
}

.area-products > div > div img {
  display: block;
  width: 40vw; /* 300px */
  height: 28.8vw; /* 216px */
  margin: 0 auto;
  margin-bottom: 4vw; /* 30px */
  border: 0.266666667vw solid #ccc; /* 2px */
}

.area-products > div > div ul {
  width: 80vw; /* 600px */
  margin: -1.866666667vw auto; /* -14px auto */
}

.area-products > div > div li {
  display: -webkit-box;
  display: flex;
  width: 100%;
  font-size: 3.733333333vw; /* 28px */
  line-height: 7.466666667vw; /* 56px */
  text-align: justify;
  text-justify: inter-character;
}

.area-products > div > div li::before {
  content: '';
  display: block;
  min-width: 2.133333333vw; /* 16px */
  width: 2.133333333vw; /* 16px */
  min-height: 2.133333333vw; /* 16px */
  height: 2.133333333vw; /* 16px */
  margin-top: 2.666666667vw; /* 20px */
  margin-right: 1.866666667vw; /* 14px */
  border-radius: 50%;
  background-color: #0098d8;
}

/*============================================================
company 会社案内
============================================================*/

.box-images {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 74.666666667vw; /* 560px */
  margin: 0 auto;
}

.box-images img {
  width: 74.666666667vw; /* 560px */
  height: 52.266666667vw; /* 392px */ 
}

.box-images img + img { margin-top: 5.333333333vw; /* 40px */ }

.box-map {
  position: relative;
  width: 80vw; /* 600px */
  height: 61.333333333vw; /* 460px */
  margin: 0 auto;
}

.box-map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.list-history.list-dl-common dt { color: #333; }

/*============================================================
home
============================================================*/

#home .global-main { padding-top: 0; }

.area-slider {
  width: 100%;
  height: 79.2vw; /* 594px */
  padding-top: 13.333333333vw; /* 100px */
  background-image: url( ../img/mb-home-area-slider.jpg );
  background-size: cover;
}

.slider {
  width: 90.666666667vw; /* 680px */
  height: 52.8vw; /* 396px */
  margin: 0 auto;
  opacity: 0;
}

.loaded .slider { opacity: 1; }

.slider .slick-slide,
.slider .slick-slide img {
  width: 90.666666667vw; /* 680px */
  height: 52.8vw; /* 396px */
}

.slider .slick-arrow {
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 22.266666667vw; /* 167px */
  width: 9.333333333vw; /* 70px */
  height: 9.333333333vw; /* 70px */
  background-color: #fff;
}
.slider .slick-arrow.slick-prev { left: 0; }
.slider .slick-arrow.slick-next { right: 0; }

.slider .slick-arrow svg {
  width: 5.333333333vw; /* 40px */
  height: 5.333333333vw; /* 40px */
  fill: #003587;
}

.area-catchphrase {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 31.466666667vw; /* 236px */
  margin-top: -13.066666667vw; /* -98px */
  padding-top: 13.066666667vw; /* 98px */
  padding-left: 10vw; /* 75px */
}

.area-catchphrase p {
  width: 49vw;
  font-size: 4vw; /* 30px */
  line-height: 6.133333333vw; /* 46px */
  color: #003587;
}

.area-catchphrase::before {
  content: '';
  display: block;
  width: 36vw; /* 270px */
  height: 31.2vw; /* 234px */
  position: absolute;
  top: 0;
  right: 0;
  background-image: url( ../img/pattern-04.svg );
  background-size: 36vw 31.2vw; /* 270px 234px */
}

.area-catchphrase::after {
  content: '';
  display: block;
  width: 16vw; /* 120px */
  height: 16vw; /* 120px */
  position: absolute;
  top: 2.4vw; /* 18px */
  right:4vw; /* 30px */
  background-image: url( ../img/logo.svg );
  background-size: 16vw 12.8vw; /* 120px 96px */
  background-position: 50% 50%;
}

.area-introduction {
  width: 80vw; /* 600px */
  margin: 0 auto;
  margin-top: 10.666666667vw; /* 80px */
}

.area-introduction > div > a {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 80vw; /* 600px */
  height: 46.4vw; /* 348px */
}
.area-introduction > div + div { margin-top: 5.333333333vw; /* 40px */ }

.area-introduction img {
  width: 80vw; /* 600px */
  height: 38.4vw; /* 288px */
}

.area-introduction p {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 8vw; /* 60px */
  background-color: #fff;
  padding-left: 3.2vw; /* 24px */
  font-size: 4vw; /* 30px */
  color: #000;
}

.area-introduction span {
  font-size: 3.733333333vw; /* 28px */
  margin-left: 4vw; /* 30px */
  padding-top: .15em;
  color: #333;
}

.area-introduction i { display: none; }

.section-home-info {
  width: 100%;
  margin-top: 2.666666667vw; /* 20px */
  background-image: url( ../img/pattern-01.svg );
  background-size: 26.666666667vw auto; /* 200px */
  background-position: 0 0;
}

.section-home-info > h2 {
  font-size: 4.266666667vw; /* 32px */
  color: #003587;
  text-align: center;
  padding-top: 8vw; /* 60px */
  padding-bottom: 5.066666667vw; /* 38px */
}

.section-home-info > div {
  width: 80vw; /* 600px */
  margin: 0 auto;
  padding: 5.333333333vw; /* 40px */
  padding-bottom: 10.666666667vw; /* 80px */
  background-color: #fff;
}

.section-home-info dl {
  border-top: 0.266666667vw dashed #ccc; /* 2px */
  line-height: 5.333333333vw; /* 40px */
  font-size: 3.733333333vw; /* 28px */
}

.section-home-info dt {
  margin-bottom: .25em;
  padding-top: 3.866666667vw; /* 29px */ 
  color: #666;
}

.section-home-info dd {
  padding-bottom: 3.866666667vw; /* 29px */
  border-bottom: 0.266666667vw dashed #ccc; /* 2px */
  text-align: justify;
  text-justify: inter-character;
}

/*============================================================
header
============================================================*/

.global-header {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 18.133333333vw; /* 136px */
  padding: 2.533333333vw 0; /* 19px */
}

.logo,
.logo > a {
  position: relative;
  z-index: 999;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 46.666666667vw; /* 350px */
  height: 12.8vw; /* 96px */
  margin: 0 auto;
}
.logo img:nth-of-type(1) { width: 16vw; /* 120px */ height: 12.8vw; /* 96px */ }
.logo img:nth-of-type(2) { width: 29.866666667vw; /* 224px */ height: 12.8vw; /* 96px */ }

.header-nav::before {
  content: '';
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 18.133333333vw; /* 136px */
  border-bottom: 0.266666667vw solid #003587; /* 2px */
  background-color: #fff;
}

.list-header-nav {
  position: fixed;
  top: -100%;
  right: 0;
  left: 0;
  padding: 10.666666667vw 0; /* 80px 0 */
  background-color: #fff;
  opacity: 0;
}

.loaded .list-header-nav {
  -webkit-transition: top .5s ease 0s;
  transition: top .5s ease 0s;
  opacity: 1;
}

.navopen .list-header-nav {
  top: 18.133333333vw; /* 136px */
  -webkit-transition: top .5s ease 0s;
  transition: top .5s ease 0s;
}

.list-header-nav li { text-align: center; }

.list-header-nav li + li { margin-top: 5.6vw; /* 42px */ }

.list-header-nav li a {
  position: relative;
  display: inline-block;
  height: 5.066666667vw; /* 38px */
  padding: 0 3.333333333vw 1.066666667vw 3.333333333vw; /* 0 25px 8px 25px */;
  font-size: 3.733333333vw; /* 28px */
  border-bottom: 0.266666667vw solid #0068b6; /* 2px */
}

.btn-nav {
  z-index: 999;
  position: absolute;
  top: 4.933333333vw; /* 37px */
  right: 4.666666667vw; /* 35px */
  width: 8vw; /* 60px */
  height: 8vw; /* 60px */
}

.btn-nav > a {
  position: relative;
  display: block;
  width: 8vw; /* 60px */
  height: 8vw; /* 60px */
}

.btn-nav i {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 8vw; /* 60px */
  height: 1.066666667vw; /* 8px */
  background-color: #003587;
  -webkit-transition: top .3s , -webkit-transform .3s ease 0s;
  transition: top .3s , transform .3s ease 0s;
}
.btn-nav i:nth-of-type(1) { top: 0.8vw; /* 6px */ }
.btn-nav i:nth-of-type(2) { top: 3.466666667vw; /* 26px */ }
.btn-nav i:nth-of-type(3) { top: 6.133333333vw; /* 46px */ }

.navopen .btn-nav i:nth-of-type(1) {
  top: 3.466666667vw; /* 26px */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navopen .btn-nav i:nth-of-type(2) { opacity: 0; }
.navopen .btn-nav i:nth-of-type(3) {
  top: 3.466666667vw; /* 26px */
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*============================================================
footer
============================================================*/

.global-footer {
  position: relative;
  background-color: #d2e1f7;
}

.footer-nav {
  position: relative;
  width: 90.666666667vw; /* 680px */
  margin: 0 auto;
  padding: 13.333333333vw 0 8vw 0; /* 100px 0 60px 0 */
}

.footer-nav::before,
.footer-nav::after {
  position: absolute;
  content: '';
  display: block;
  width: 24vw; /* 180px */
  height: 20.8vw; /* 156px */
  background-size: 24vw 20.8vw; /* 180px 156px */
  background-image: url( /img/pattern-01.svg );
}
.footer-nav::before { top: -5.333333333vw; /* -40px */ right: 0; }
.footer-nav::after  { top: 5.066666667vw; /* 38px */ right: 18vw; /* 135px */ }

.list-footer-nav li {
  height: 3.733333333vw; /* 28px */
  font-size: 3.733333333vw; /* 28px */
}

.list-footer-nav li a {
  display: inline-block;
  height: 3.733333333vw; /* 28px */
  padding-left: 6vw; /* 45px */
  background-image: url( /img/icon-list.svg );
  background-size: 2.933333333vw 3.466666667vw; /* 22px 26px */
  background-position: 0 50%;
}

.list-footer-nav li + li { margin-top: 5.333333333vw; /* 40px */ }

.pagetop {
  position: absolute;
  right: 0;
  margin-top: -13.333333333vw; /* 100px */;
  width: 13.333333333vw; /* 100px */
  height: 13.333333333vw; /* 100px */
}

.pagetop a {
  display: block;
  width: 13.333333333vw; /* 100px */
  height: 13.333333333vw; /* 100px */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #003587;
}

.pagetop a svg {
  width: 7.466666667vw; /* 56px */
  height: 7.466666667vw; /* 56px */
  fill: #fff;
}

.content-footer,
.copyright {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 4vw 0; /* 30px 0 */
  border-top: 0.266666667vw solid #003587; /* 2px */
  background-color: #fff;
}

.content-footer > img {
  width: 18.666666667vw; /* 140px */
  height: 18.666666667vw; /* 140px */
}

.content-footer address {
  margin-left: 3.333333333vw; /* 25px */
  font-style: normal;
}

.content-footer address dt {
  font-size: 4.266666667vw; /* 32px */
  margin-bottom: 1.6vw; /* 12px */
}

.content-footer address dd {
  font-size: 3.2vw; /* 24px */
  line-height: 4.8vw; /* 36px */
}

.copyright { padding: 2.666666667vw 0; /* 20px 0 */ }

.copyright small {
  font-size: 3.2vw; /* 24px */
  color: #555;
}