@charset "utf-8";

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

html,
body {
  display: -webkit-box;
  display: flex;
}

body {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 1200px;
  width: 100%;
  min-height: 100vh;
}

header, footer {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  min-height: 1px;
}

a:link,
a:visited { color: #555; text-decoration: none; outline: none; }
a:hover,
a:active { color: #0098d8; text-decoration: none; outline: none; }

a,a::before,a::after,a * {
  -webkit-transition-property: color, fill, opacity, background-color;
  transition-property: color, fill, opacity, background-color;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

a[href^="tel:"] { pointer-events: none !important; }

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

.mb-2,.pc-mb-2 { margin-bottom: 20px !important; }
.mb-3,.pc-mb-3 { margin-bottom: 30px !important; }
.mb-4,.pc-mb-4 { margin-bottom: 40px !important; }
.mb-6,.pc-mb-6 { margin-bottom: 60px !important; }
.mb-8,.pc-mb-8 { margin-bottom: 80px !important; }

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

.global-main {
  position: relative;
  background-color: #d2e1f7;
  padding-top: 80px;
}

.global-main::after {
  content: '';
  display: block;
  position: absolute;
  top: 160px;
  bottom: 0;
  left: 50%;
  margin-left: -520px;
  width: 1040px;
  background-color: #fff;
}
#home .global-main::after { display: none; }

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

.ttl-main {
  width: 840px;
  height: 58px;
  margin: 0 auto;
  font-size: 3rem;
  color: #000;
}

.ttl-primary {
  font-size: 24px;
  color: #003587;
}

.ttl-secondary {
  font-size: 22px;
  color: #000;
}

.ttl-tertiary {
  font-size: 18px;
  color: #000;
}

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

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

.area-content {
  z-index: 2;
  position: relative;
  width: 1040px;
  margin: 0 auto;
  padding: 60px 100px 100px 100px;
  background-color: #fff;
}

.area-content::before {
  content: '';
  display: block;
  width: 180px;
  height: 156px;
  position: absolute;
  top: -78px;
  left: -80px;
  background-image: url( ../img/pattern-01.svg );
  background-size: 180px 156px;
}

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

.txt-middle {
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: justify;
  text-justify: inter-character;
  margin: -8px 0;
}

.txt-large {
  font-size: 2rem;
  line-height: 3.6rem;
  text-align: justify;
  text-justify: inter-character;
  margin: -8px 0;
}

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

.list-dl-common {
  position: relative;
  border-top: 1px dashed #ccc;
  line-height: 1.625;
  font-size: 1.6rem;
}

.list-dl-common dt {
  position: absolute;
  left: 0;
  width: 220px; 
  color: #000;
  padding: 12px 0 13px 40px;
}

.list-dl-common dd {
  padding-left: 170px;
  padding: 12px 10px 12px 240px;
  border-bottom: 1px dashed #ccc;
  text-align: justify;
  text-justify: inter-character;
}

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

.list-form {
  position: relative;
}

.list-form dt {
  position: absolute;
  left: 0;
  width: 280px;
  padding-left: 40px;
  padding-top: 26px;
  z-index: 1;
  line-height: 3.5rem;
}

.list-form dt label { font-size: 1.6rem; }

.list-form dt span {
  font-size: 1.4rem;
  color: #ce2e2e;
  margin-left: .5em;
}

.list-form dd {
  padding: 26px 40px 26px 280px;
  border-top: 1px dashed #ccc;
  font-size: 1.6rem;
  line-height: 3.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  height: 35px;
  border: 1px solid #bbb;
  border-radius: 2px;
  font-size: 1.6rem;
  line-height: 3.3rem;
  padding:  0 .5em;
}

#name,
#kana,
#phone { width: 180px; }
#zip { width: 100px; }

textarea {
  padding: .5em;
  line-height: 1.75;
  height: 240px;
}

.error { color: #ce2e2e; }

.list-form dd label.error {
  display: block;
  margin-top: .25em;
  font-size: 1.6rem;
}

.list-form dd.box-btn {
  padding-top: 60px;
  padding-bottom: 60px;
  display: -webkit-box;
  display: flex;
}

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: 220px;
  height: 60px;
  border: 2px solid #003587;
  font-size: 1.6rem;

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

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

button.btn-submit:hover,
button.btn-submit:active {
  background-color: #003587;
  color: #fff;
}

button.btn-return:hover,
button.btn-return:active {
  background-color: #999;
  color: #fff;
}

button + button { margin-left: 40px; }

.txt-privacypolicy {
  position: relative;
  padding-left: 20px;
  font-size: 1.6rem;
}

.txt-privacypolicy::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0098d8;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}

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

.list-privacypolicy dt {
  margin-top: 60px;
  margin-bottom: 20px;
  font-size: 2.2rem;
}

.list-privacypolicy dd {
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: justify;
  text-justify: inter-character;
  margin: -8px 0;
}

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

.list-privacypolicy dd li {
  display: -webkit-box;
  display: flex;
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: justify;
  text-justify: inter-character;
}

.list-privacypolicy dd li::before {
  content: '';
  display: block;
  min-width: 8px;
  width: 8px;
  min-height: 8px;
  height: 8px;
  margin-top: 12px;
  margin-right: 12px;
  border-radius: 50%;
  background-color: #999;
}

.list-privacypolicy dd a:hover,
.list-privacypolicy dd a:active { color: #ef8318; }

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

.notrecruiting {
  display: inline-block;
  font-size: 2.2rem;
  padding: 9px 19px;
  border: 1px solid #000;
}

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

.area-products > div + div { margin-top: 60px; }

.area-products .ttl {
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #000;
}

.area-products > div > div {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.area-products > div > div img {
  width: 300px;
  height: 216px;
  border: 1px solid #ccc;
}

.area-products > div > div ul {
  display: -webkit-box;
  display: flex;
  align-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 540px;
  padding-left: 40px;
  margin: -6px 0;
}

.area-products > div > div li {
  display: -webkit-box;
  display: flex;
  width: 50%;
  font-size: 1.6rem;
  line-height: 3rem;
  text-align: justify;
  text-justify: inter-character;
}
.area-products > div > div li:nth-of-type( even ){ padding-left: 1em; }

.area-products > div > div li::before {
  content: '';
  display: block;
  min-width: 8px;
  width: 8px;
  min-height: 8px;
  height: 8px;
  margin-top: 11px;
  margin-right: 12px;
  border-radius: 50%;
  background-color: #0098d8;
}

.area-products > div > div li a:hover,
.area-products > div > div li a:active { color: #ef8318; }

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

.box-images {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.box-images img {
  width: 400px;
  height: 280px;
}

.box-map {
  position: relative;
  width: 840px;
  height: 400px;
}

.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: 724px;
  padding-top: 100px;
  background-image: url( ../img/home-area-slider.jpg );
  background-size: cover;
}

.slider {
  width: 900px;
  height: 524px;
  margin: 0 auto;
  opacity: 0;
}

.loaded .slider { opacity: 1; }

.slider .slick-slide,
.slider .slick-slide img {
  width: 900px;
  height: 524px;
}

.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: 225px;
  width: 70px;
  height: 70px;
  background-color: #fff;
}
.slider .slick-arrow.slick-prev { left: -70px; }
.slider .slick-arrow.slick-next { right: -70px; }

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

.slider .slick-arrow:hover,
.slider .slick-arrow:active {
  background-color: #003587;
}

.slider .slick-arrow:hover svg,
.slider .slick-arrow:active svg {
  fill: #fff;
}

.area-catchphrase {
  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: relative;
  width: 1200px;
  height: 234px;
  margin: 0 auto;
  margin-top: -78px;
  padding-top: 78px;
  z-index: 1;
  background-image: url( ../img/pattern-04.svg );
  background-size: 270px 234px;
  background-position: 100% 0;
}

.area-catchphrase p {
  font-size: 2.4rem;
  text-align: center;
  color: #003587;
}

.area-catchphrase::before {
  content: '';
  display: block;
  width: 270px;
  height: 390px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url( ../img/pattern-03.svg );
  background-size: 270px 390px;
}

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

.area-introduction {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 1040px;
  height: 280px;
  margin: 0 auto;
  margin-top: 30px;
}

.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: 500px;
  height: 280px;
}

.area-introduction img {
  width: 500px;
  height: 240px;
}

.area-introduction p {
  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: 100%;
  height: 40px;
  background-color: #fff;
  padding-left: 20px;
  font-size: 2rem;
  color: #000;
}

.area-introduction span {
  font-size: 1.6rem;
  margin-left: 22px;
  padding-top: .15em;
  color: #333;
}

.area-introduction i {
  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: 40px;
  height: 40px;
  margin-left: auto;
  margin-right: 0;
}

.area-introduction i > svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.area-introduction a:link i,
.area-introduction a:visited i { background-color: #429cce; }
.area-introduction a:hover i,
.area-introduction a:active i { background-color: #003587; }

.section-home-info {
  width: 1200px;
  margin: 0 auto;
  margin-top: 14px;
  background-image: url( ../img/pattern-01.svg );
  background-size: 200px auto;
  background-position: 0 0;
}

.section-home-info > h2 {
  font-size: 2.4rem;
  color: #003587;
  text-align: center;
  padding-top: 64px;
  padding-bottom: 42px;
}

.section-home-info > div {
  width: 1040px;
  margin: 0 auto;
  padding: 60px 100px 100px 100px;
  background-color: #fff;
}

.section-home-info dl {
  position: relative;
  border-top: 1px dashed #ccc;
  line-height: 1.5;
  font-size: 1.6rem;
}

.section-home-info dt {
  position: absolute;
  left: 0;
  width: 170px; 
  color: #666;
  padding: 14px 0 15px 10px;
}

.section-home-info dd {
  padding-left: 170px;
  padding: 14px 10px 14px 170px;
  border-bottom: 1px dashed #ccc;
  text-align: justify;
  text-justify: inter-character;
}

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

.global-header {
  min-height: 115px;
  height: 115px;
  border-bottom: 1px solid #003587; 
}

.content-header {
  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: 1200px;
  height: 115px;
  margin: 0 auto;
}

.logo,
.logo > a {
  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: 350px;
  height: 96px;
  user-select: none;
}
.logo img:nth-of-type(1) { width: 120px; height: 96px; }
.logo img:nth-of-type(2) { width: 224px; height: 96px; }

.header-nav {
  height: 74px;
  padding-top: 42px;
}

.list-header-nav {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; 
}

.list-header-nav li + li { margin-left: 6px; }

.list-header-nav li a {
  position: relative;
  display: inline-block;
  height: 32px;
  padding: 9px 12px;
  font-size: 1.4rem;
}

.list-header-nav li a::after {
  content: '';
  display: block;
  height: 2px;
  background-color: #0068b6;
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.list-header-nav li a:hover::after,
.list-header-nav li a:active::after { opacity: 1; }

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

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

.footer-nav {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 100px 0 60px 0;
  height: 174px;
}

.footer-nav::before,
.footer-nav::after {
  position: absolute;
  content: '';
  display: block;
  width: 180px;
  height: 156px;
  background-size: 180px 156px;
  background-image: url( /img/pattern-01.svg );
}
.footer-nav::before { top: -156px; right: 0; }
.footer-nav::after  { top: -78px; right: 135px; }

.list-footer-nav {
  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;
  font-size: 1.4rem;
}

.list-footer-nav li + li { margin-left: 3em; }

.pagetop {
  position: absolute;
  left: 50%;
  top: 104px;
  margin-left: 530px;
  width: 70px;
  height: 70px;
}

.pagetop a {
  display: block;
  width: 70px;
  height: 70px;
  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;
}

.pagetop a:link,
.pagetop a:visited { background-color: #fff; }
.pagetop a:hover,
.pagetop a:active { background-color: #003587; }

.pagetop a svg {
  width: 40px;
  height: 40px;
  fill: #003587;
}

.pagetop a:hover svg,
.pagetop a:active svg { 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;
  height: 155px;
  border-top: 1px solid #003587;
  background-color: #fff;
}

.content-footer > img {
  width: 120px;
  height: 120px;
}

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

.content-footer address dt {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.content-footer address dd {
  font-size: 1.6rem;
  line-height: 2.2rem;
}

.copyright { height: 48px; }

.copyright small {
  font-size: 1.2rem;
  color: #555;
}