@charset "UTF-8";
/*----------------------------------------------------
 Reset
----------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
  margin-left: 0;
  margin-top: 0;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*----------------------------------------------------
 Base
----------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #fff;
  font-size: .875rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  font-family:"メイリオ",Meiryo,Meiryo UI,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","Osaka－等幅","Osaka-Mono",Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
}
@media (min-width: 768px) {
  body {
    font-size: 1rem;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}

input, button, select, textarea {
  font-family: inherit;
  line-height: inherit;
  font-size: inherit;
}

caption,
th {
  text-align: left;
}

th {
  vertical-align: top;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

/*----------------------------------------------------
 flex
----------------------------------------------------*/
.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink{flex-shrink:1}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.order-first{order:-9999}.order-last{order:9999}.order-none{order:0}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.content-center{align-content:center}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-evenly{align-content:space-evenly}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}

@media (min-width: 768px) {
  .md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-nowrap{flex-wrap:nowrap}.md\:flex-grow-0{flex-grow:0}.md\:flex-grow{flex-grow:1}.md\:flex-shrink-0{flex-shrink:0}.md\:flex-shrink{flex-shrink:1}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-3{order:3}.md\:order-4{order:4}.md\:order-5{order:5}.md\:order-6{order:6}.md\:order-7{order:7}.md\:order-8{order:8}.md\:order-9{order:9}.md\:order-10{order:10}.md\:order-11{order:11}.md\:order-12{order:12}.md\:order-first{order:-9999}.md\:order-last{order:9999}.md\:order-none{order:0}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:justify-center{justify-content:center}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:justify-evenly{justify-content:space-evenly}.md\:items-start{align-items:flex-start}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:items-baseline{align-items:baseline}.md\:items-stretch{align-items:stretch}.md\:content-center{align-content:center}.md\:content-start{align-content:flex-start}.md\:content-end{align-content:flex-end}.md\:content-between{align-content:space-between}.md\:content-around{align-content:space-around}.md\:content-evenly{align-content:space-evenly}.md\:self-auto{align-self:auto}.md\:self-start{align-self:flex-start}.md\:self-end{align-self:flex-end}.md\:self-center{align-self:center}.md\:self-stretch{align-self:stretch}
}
@media (min-width: 1024px) {
  .lg\:block{display:block}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:flex-wrap{flex-wrap:wrap}.lg\:flex-nowrap{flex-wrap:nowrap}.lg\:flex-grow-0{flex-grow:0}.lg\:flex-grow{flex-grow:1}.lg\:flex-shrink-0{flex-shrink:0}.lg\:flex-shrink{flex-shrink:1}.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:order-3{order:3}.lg\:order-4{order:4}.lg\:order-5{order:5}.lg\:order-6{order:6}.lg\:order-7{order:7}.lg\:order-8{order:8}.lg\:order-9{order:9}.lg\:order-10{order:10}.lg\:order-11{order:11}.lg\:order-12{order:12}.lg\:order-first{order:-9999}.lg\:order-last{order:9999}.lg\:order-none{order:0}.lg\:justify-start{justify-content:flex-start}.lg\:justify-end{justify-content:flex-end}.lg\:justify-center{justify-content:center}.lg\:justify-between{justify-content:space-between}.lg\:justify-around{justify-content:space-around}.lg\:justify-evenly{justify-content:space-evenly}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:items-baseline{align-items:baseline}.lg\:items-stretch{align-items:stretch}.lg\:content-center{align-content:center}.lg\:content-start{align-content:flex-start}.lg\:content-end{align-content:flex-end}.lg\:content-between{align-content:space-between}.lg\:content-around{align-content:space-around}.lg\:content-evenly{align-content:space-evenly}.lg\:self-auto{align-self:auto}.lg\:self-start{align-self:flex-start}.lg\:self-end{align-self:flex-end}.lg\:self-center{align-self:center}.lg\:self-stretch{align-self:stretch}
}
@media (min-width: 1280px) {
  .xl\:block{display:block}.xl\:flex{display:flex}.xl\:inline-flex{display:inline-flex}.xl\:flex-wrap{flex-wrap:wrap}.xl\:flex-nowrap{flex-wrap:nowrap}.xl\:flex-grow-0{flex-grow:0}.xl\:flex-grow{flex-grow:1}.xl\:flex-shrink-0{flex-shrink:0}.xl\:flex-shrink{flex-shrink:1}.xl\:order-1{order:1}.xl\:order-2{order:2}.xl\:order-3{order:3}.xl\:order-4{order:4}.xl\:order-5{order:5}.xl\:order-6{order:6}.xl\:order-7{order:7}.xl\:order-8{order:8}.xl\:order-9{order:9}.xl\:order-10{order:10}.xl\:order-11{order:11}.xl\:order-12{order:12}.xl\:order-first{order:-9999}.xl\:order-last{order:9999}.xl\:order-none{order:0}.xl\:justify-start{justify-content:flex-start}.xl\:justify-end{justify-content:flex-end}.xl\:justify-center{justify-content:center}.xl\:justify-between{justify-content:space-between}.xl\:justify-around{justify-content:space-around}.xl\:justify-evenly{justify-content:space-evenly}.xl\:items-start{align-items:flex-start}.xl\:items-end{align-items:flex-end}.xl\:items-center{align-items:center}.xl\:items-baseline{align-items:baseline}.xl\:items-stretch{align-items:stretch}.xl\:content-center{align-content:center}.xl\:content-start{align-content:flex-start}.xl\:content-end{align-content:flex-end}.xl\:content-between{align-content:space-between}.xl\:content-around{align-content:space-around}.xl\:content-evenly{align-content:space-evenly}.xl\:self-auto{align-self:auto}.xl\:self-start{align-self:flex-start}.xl\:self-end{align-self:flex-end}.xl\:self-center{align-self:center}.xl\:self-stretch{align-self:stretch}
}

/*----------------------------------------------------
 display
----------------------------------------------------*/
.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.inline-flex{display:inline-flex}

@media (min-width: 768px) {
  .md\:block{display:block}.md\:inline{display:inline}.md\:inline-block{display:inline-block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}
}
@media (min-width: 1024px) {
  .lg\:block{display:block}.lg\:inline{display:inline}.lg\:inline-block{display:inline-block}.lg\:hidden{display:none}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}
}
@media (min-width: 1280px) {
  .xl\:block{display:block}.xl\:inline{display:inline}.xl\:inline-block{display:inline-block}.xl\:hidden{display:none}.xl\:flex{display:flex}.xl\:inline-flex{display:inline-flex}
}

/*----------------------------------------------------
  Component
----------------------------------------------------*/
/* clearfix */
.clearfix {
  clear: both;
  zoom: 1;
}

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* rollover */
.rollover {
  animation: horizontalY 1s ease-in-out infinite alternate;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.rollover:hover {
  animation: horizontalY 0.5s ease-in-out infinite alternate;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  filter: alpha(opacity=70);
  opacity: 0.7;
}

/* innerlink */
.innerlink {
  display: block;
  height: 1px;
  position: relative;
  top: -60px;
}
@media (min-width: 768px) {
  .innerlink {
    top: -120px;
  }
}

/* pc/sp */
.pc {
  display: none;
}

.pc-i {
  display: none;
}

.sp {
  display: block;
}

.sp-i {
  display: inline;
}

@media (min-width: 768px) {
  .pc {
    display: block;
  }

  .pc-i {
    display: inline;
  }

  .sp,
  .sp-i {
    display: none;
  }
}

.indent {
  display: block;
  margin-left: 1.125rem;
  text-indent: -1.125rem;
}

/*----------------------------------------------------
 header
----------------------------------------------------*/
.header {
  background: #fff;
  min-height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.header-in {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 10px;
  max-width: 1650px;
}
.header-logo img {
  display: block;
  height: 17px;
}
.header-nav {
  text-align: right;
}
@media (min-width: 768px) {
  .header-in {
    padding: 2rem 0;
    width: 86%;
  }
  .header-logo {
    width: 11.12121212121212%;
  }
  .header-logo img {
    height: auto;
  }
  
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}

/*----------------------------------------------------
 gmenu toggle
----------------------------------------------------*/
.gmenu-toggle {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  position: relative;
  width: 40px;
  vertical-align: middle;
  z-index: 10;
}
.gmenu-toggle span {
  background: #131D40;
  display: block;
  height: 2px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  left: 8px;
  transition: .2s;
  width: 24px;
}
.gmenu-toggle span::before,
.gmenu-toggle span::after{
  background: #131D40;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transition: .3s;
  width: 24px;
}
.gmenu-toggle span::before{
  margin-top: -10px;
}
.gmenu-toggle span::after{
  margin-top: 8px;
}

/* open */
.gmenu-open .gmenu-toggle span {
  background: transparent;
}

.gmenu-open .gmenu-toggle span::before,
.gmenu-open .gmenu-toggle span::after{
  background: #131D40;
  margin-top: 0;
}

.gmenu-open .gmenu-toggle span::before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.gmenu-open .gmenu-toggle span::after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

@media (min-width: 768px) {
  .gmenu-toggle {
    display: none;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}

/*----------------------------------------------------
 gmenu
----------------------------------------------------*/
.gmenu,
.gmenu * {
  -webkit-transition: all .5s;
  transition: all .5s;
}

.gmenu {
  background: #fff;
  height: 0;
  overflow-y: hidden;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.gmenu-open .gmenu {
  height: auto;
  overflow-y: scroll;
}
.gmenu-in {
  height: 100%;
}

.gmenu li a {
  border-bottom: 1px solid #000;
  color: #000;
  display: block;
  font-size: 1.5rem;
  padding: 0;
  text-align: center;
  text-decoration: none;
}
.gmenu li:first-child a {
  border-top: 1px solid #000;
}

.gmenu-open .gmenu li a {
  padding: 1rem;
}

@media (min-width: 768px) {
  .gmenu {
    background: transparent;
    height: auto;
    overflow-y: visible;
    position: relative;
    top: auto;
  }

  .gmenu-open .gmenu {
    height: auto;
    overflow-y: visible;
  }
  .gmenu-in {
    height: auto;
  }
  .gmenu ul {
    font-size: 1rem;
    display: flex;
    justify-content: space-around;
  }
  .gmenu li {
    margin-left: 2rem;
  }
  .gmenu li a,
  .gmenu li:first-child a {
    border-top: 0;
    border-bottom: 0;
    font-size: .825rem;
  }

  .gmenu-open .gmenu li a {
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .gmenu li {
    margin-left: 4rem;
  }
  .gmenu li a,
  .gmenu li:first-child a {
    font-size: 1rem;
  }
}
@media (min-width: 1280px) {
}

/*----------------------------------------------------
 main-visual
----------------------------------------------------*/
.main-visual {
  margin-top: 60px;
  position: relative;
  z-index: 1;
}
.main-visual img {
  width: 100%;
}
.main-visual-text {
  color: #fff;
  font-size: 4vw;
  position: absolute;
  left: 5.625%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.main-visual-text strong {
  font-weight: bold;
}

@media (min-width: 768px) {
  .main-visual {
    margin-top: 90px;
  }
  .main-visual-text {
    font-size: 1.2vw;
    left: 16.1%;
  }
}

/*----------------------------------------------------
 main
----------------------------------------------------*/
.main {
  position: relative;
  z-index: 2;
}

/*----------------------------------------------------
 title
----------------------------------------------------*/
.title {
  color: #131D40;
}
.title img {
  max-height: 40px;
}
.title img.title-row2 {
  max-height: 90px;
}

.title span {
  display: block;
  font-size: 1.125rem;
  margin-bottom: .5rem;
}

@media (min-width: 768px) {
  .title span {
    font-size: 1.25rem;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}

.subtitle {
  color: #131D40;
  font-size: 1rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .subtitle {
    font-size: 1.125rem;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}
/*----------------------------------------------------
 about
----------------------------------------------------*/
.about {
  margin: 0 auto 5rem;
  max-width: 1200px;
  padding: 4rem 1rem 0;
  z-index: 2;
}
/* title */
.about-title {
  margin-top: 2rem;
}
/* subtitle */
.about-subtitle {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .about {
    margin-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .about-main {
    align-items: center;
    display: flex;
  }
  .about-img {
    order: 2;
    width: 48.8%;
  }
  .about-text {
    flex-shrink: 100;
    order: 1;
    padding-right: 2rem;
  }
  /* title */
  .about-title {
    margin-top: 0;
  }
  /* subtitle */
  .about-subtitle {
    margin-top: 3rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  .about {
    margin-top: -12.29167vw;
  }
}
@media (min-width: 1280px) {
  .about {
    margin-top: -160px;
  }
}

/*----------------------------------------------------
 allinone
----------------------------------------------------*/
.allinone {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  max-width: 1201px;
  padding: 0 1rem;
}

/* title */
.allinone-title {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* each */
.allinone-main-each {
  margin-top: 2.5rem;
}

/* subtitle */
.allinone-subtitle {
  margin-top: 1rem;
  margin-bottom: .5rem;
}

/* remark */
.allinone-remark {
  background: #0DAA96;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: .5rem;
  padding: .5rem .5rem .25rem;
}

@media (min-width: 768px) {
  .allinone {
    margin-bottom: 8rem;
    padding: 0 2rem;
  }
  /* catch */
  .allinone-catch {
    max-width: 63%;
  }
  /* title */
  .allinone-title {
    margin-top: 0;
    margin-bottom: 3rem;
  }
  /* main */
  .allinone-main {
    margin-top: 3rem;
    position: relative;
  }
  /* each */
  .allinone-main-each {
    color: #fff;
    font-size: 1.1vw;
    margin-top: 0;
    position: absolute;
    max-width: 255px;
    width: 23%;
  }
  .allinone-main-each:nth-child(1) {
    left: 2.08333333333333%;
    top: 16.3996229971725%;
  }
  .allinone-main-each:nth-child(2) {
    left: 75.8333333333333%;
    top: 2.26201696512724%;
  }
  .allinone-main-each:nth-child(3) {
    left: 75.8333333333333%;
    top: 37.7002827521206%;
  }
  .allinone-main-each:nth-child(4) {
    left: 75.8333333333333%;
    top: 73.138548539114%;
  }
  .allinone-main-each:nth-child(5) {
    left: 2.08333333333333%;
    top: 51.4608859566447%;
  }
  /* subtitle */
  .allinone-subtitle {
    color: #fff;
    font-size: 1.198vw;
    margin-top: 0;
    margin-bottom: .5rem;
  }
  
  /* remark */
  .allinone-remark {
    font-size: 1.14583vw;
    padding-left: .25rem;
    padding-right: .25rem;
  }
  
}
@media (min-width: 1024px) {
}
@media (min-width: 1200px) {
  /* each */
  .allinone-main-each {
    font-size: 13px;
  }
  /* subtitle */
  .allinone-subtitle {
    font-size: 18px;
  }
  /* remark */
  .allinone-remark {
    font-size: 14px;
    padding-top: .25rem;
  }
}

/*----------------------------------------------------
 products-systems
----------------------------------------------------*/
.products-systems {
  background: url(img/products-systems-bg-sp.png) no-repeat center left;
  background-size: cover;
  margin-bottom: 5rem;
  padding: 2rem 1rem;
}
/* title */
.products-systems-title {
  color: #fff;
  margin-bottom: 2rem;
}
/* list */
.products-systems-list {
  color: #fff;
}
.products-systems-list li {
  text-indent: -1.5rem;
  padding-left: 2rem;
}
.products-systems-list li + li {
  margin-top: .5rem;
}
.products-systems-list li::before {
  background: #fff;
  border-radius: 100%;
  content: '';
  display: inline-block;
  height: .75rem;
  margin-right: .5rem;
  width: .75rem;
}

@media (min-width: 768px) {
  .products-systems {
    background-image: url(img/products-systems-bg.png);
    border-radius: 40px;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 8rem;
    padding: 2rem 3rem;
  }
  /* list */
  .products-systems-list li {
    text-indent: -1.5rem;
    padding-left: 2rem;
  }
  .products-systems-list li::before {
    height: .875rem;
    width: .875rem;
  }
}
@media (min-width: 1024px) {
  .products-systems {
    padding: 3rem 4rem;
  }
}
@media (min-width: 1280px) {
  .products-systems {
    margin-bottom: 15rem;
  }
  .products-systems {
    margin-left: auto;
    margin-right: auto;
    width: 1136px;
  }
}

/*----------------------------------------------------
 contact
----------------------------------------------------*/
.contact {
  margin-bottom: 5rem;
  text-align: center;
}

.contact-title {
  margin-bottom: 2rem;
}
.contact-link a {
  background: #131D40;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1;
  padding: 1.5rem 1rem;
  width: 70.25%;
}

@media (min-width: 768px) {
  .contact {
    margin-bottom: 8rem;
    position: relative;
  }
  
  .contact-title {
    margin-bottom: 3rem;
  }
  .contact-link a {
    border-radius: 40px;
    padding: 1.5rem 1rem;
    max-width: 280px;
  }
  .contact-bg {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    max-width: 396px;
    width: 20.625%;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
  .contact {
    margin-bottom: 15rem;
  }
}

/*----------------------------------------------------
 footer
----------------------------------------------------*/
.footer {
  background: #F2F2F2;
  padding: 3rem 1rem 2rem;
  text-align: center;
}

.footer-logo {
  max-width: 228px;
  width:  57.125%;
}

.footer-address {
  margin-bottom: 4rem;
}
.footer-address p {
  margin-top: 2rem;
}

.copyright {
  font-size: .75rem;
}

@media (min-width: 768px) {
  .footer {
    padding-top: 5rem;
  }
  .footer-address {
    padding-top: 1rem;
    margin-bottom: 6rem;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}