@charset "UTF-8";
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 0; font-weight: normal;}
h1,h2,h3,h4 {font-weight: bold;}
p {margin-bottom: 0; line-height: 1.6;}
a:link { text-decoration: none; color: #fff;}
a:visited { text-decoration: none; color: #fff;}
a:hover { text-decoration: none;}
a:active { text-decoration: none; color: #fff;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }
img { width: 100%; height: auto;vertical-align: bottom }
* {word-break: break-all; font-family: sans-serif; padding: 0; margin: 0; list-style-type: none;}

@media (min-width: 1000px) {
.pc { display: block !important;}
.sp { display: none !important;}
body { display: block; width: 100%; margin: 0 auto; max-width: 100%; position: relative; font-size: 1.5vw; }
button { cursor: pointer;}
.mb1 {margin-bottom: 1vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.w60 {width: 60vw; margin-left: auto; margin-right: auto;}
.btn { background: linear-gradient(to right,#005b9c 0%, #007fd8 100%); display: block; width: max-content; margin-left: auto; margin-right: auto; padding: .7vw 4vw; color: #fff; text-align: center; border-radius: 5vw;}
.text-blu { color: #005bac; font-size: 110%;}
.text-blu br {display: none;}
.stripebg { display: block; background: url(../images/bg.png); padding: 4vw; overflow: hidden;}
main { display: block; margin: 0px auto 0px; }
header { z-index: 2; position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;  padding: 1vw 2vw; box-sizing: border-box; background: transparent; transition: all .7s;}
header.active { background: rgba(0,91,156,.7); transition: all .7s;}
header h1 { display: block; width: 30%; text-align: left; color: #fff; font-size: 120%;}
header ul { display: flex; justify-content: flex-end; align-items: center; width: 70%;}
header ul li {margin-right: 1vw;}

.kv { position: relative; display: block; width: 100%; height: 50vw; background: url(../images/kv.jpg) no-repeat center bottom; background-size: 100% auto, cover; }
.kv .txt {position: absolute; top: 0; left: 0; z-index: 1; display: block; text-align: center; margin: 0 auto; width: 100%; height: 50vw; background: url(../images/scape.png) no-repeat center bottom; background-size: contain;}
.kv .txt h1 { color: #fff; font-size: 200%; margin-bottom: 1vw; margin-top: 20vw;}
.kv .txt p { color: #fff; }

section { display: block; width: 100%; margin: 10vw auto; text-align: center;}

section p {margin-bottom: 3vw; line-height: 1.5;}
section ul {margin-bottom: 3vw!important;}

h2 img {display: block; margin: 0 auto 3vw; width: auto; height: 6vw;}
#about {}
#about h2 { }
#about ul { list-style: none; display: flex; justify-content: space-between; width: 60%; margin-left: auto; margin-right: auto; padding: 0; }
#about ul li { width: 32.4%; }

#value {}
#value h2 {  }
#value ul { list-style: none; display: block; width: 70%; margin-left: auto; margin-right: auto; padding: 3vw; box-sizing: border-box; background: #fff; border-radius: 4vw;}
#value ul li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1vw; color: #005B9C; font-weight: bold; font-size: 110%;}
#value ul li:nth-last-of-type(1) {margin-bottom: 0;}
#value ul li P {margin-bottom: 0;}
#value ul li span {background: linear-gradient(transparent 60%, yellow 0%); display: inline;}
#value ul li img { display: inline-block; width: 1em; height: auto; margin-right: 1em;}

.servicebg {display: block; background: url(../images/bg1.jpg) no-repeat top center; overflow: hidden; padding-top: 10vw;}
#service { background: #fff; border-radius: 4vw; width: 80%; margin-right: auto; margin-left: auto; padding: 8vw 8vw 0; box-sizing: border-box;}
#service ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0; width: 100%; margin: 0 auto 0; }
#service ul li { width: 32%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right,#005b9c 0%, #007fd8 100%); color: #fff; padding: 2vw 1vw; margin: 0 2% 2vw 0; border-radius: 2vw; box-sizing: border-box; line-height: 1.4;}
#service ul li:nth-of-type(3n) {margin-right: 0;}
#service h3 {position: relative; font-size: 150%; margin-bottom: 5vw;}
#service h3::after {content: ""; display: block; position: absolute; width: 4vw; height: 3vw; bottom: -3vw; left: 0; right: 0; margin: auto; background: url(../images/triangle.png)no-repeat center center;   background-size: auto; background-size: contain;}


#contact { margin-top: 0; padding: 10vw 0; background: url(../images/scape.png) no-repeat center bottom,  url(../images/bg.png) repeat center; background-size: 100% auto, 90px 150px; }
#contact h2 { }
#contact ul { list-style: none; padding: 0; width: 30%; margin: 0 auto 1vw; }
#contact ul li { width: 100%; margin-bottom: 10px; }
#contact .note { display: block; width: 30%; margin-right: auto; margin-left: auto; background: #fff; padding: 3vw; text-align: left;}
#company {}
#company h2 { }
#company table { width: 70%; margin: 0 auto; border-collapse: collapse; border: solid 1px #333;}
#company table th {background: #005B9C; padding: 2vw; text-align: left; color: #fff; border: solid 1px #333;}
#company table td {background: #fff; padding: 2vw; text-align: left; border: solid 1px #333;}
footer { height: 33px; background: #005B9C; }
footer p { line-height: 33px; text-align: center; color: #fff; }
}





















@media (max-width: 999px) {
.sp { display: block !important;}
.pc { display: none !important;}
  body { display: block; width: 100%; margin: 0 auto; position: relative; font-size: 3.5vw; }
  button { cursor: pointer;}
  .mb1 {margin-bottom: 2vw!important;}
  .mb3 {margin-bottom: 6vw!important;}
  .mb5 {margin-bottom: 10vw!important;}
  .w60 {width: 80vw; margin-left: auto; margin-right: auto;}
  .btn { background: linear-gradient(to right,#005b9c 0%, #007fd8 100%); display: block; width: max-content; margin-left: auto; margin-right: auto; padding: 2vw 8vw; color: #fff; text-align: center; border-radius: 5vw; font-size: 150%;}
  .text-blu { color: #005bac; font-size: 120%; font-weight: bold;}
  .text-blu p {margin-bottom: 8vw;}
  .stripebg { display: block; background: url(../images/bg.png); padding: 4vw; overflow: hidden;}
  main { display: block; margin: 0 auto; }
  header { z-index: 3; position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;  padding: 2vw; box-sizing: border-box; background: rgba(0,91,156,.7); transition: all .7s;}
  header h1 { display: block; width: 50%; text-align: left; color: #fff; font-size: 120%; margin-top: 0; text-shadow: 0px 0px 8px rgba(0,0,0,0.5);}
  header ul {display: none;}
  header #spMenu { display: flex; justify-content: center; align-items: center; width: 5.5vw; height: 5.5vw; transition: all 1s; padding: 0; align-items: center; margin: 0; }
  header #spMenu .menu-trigger { position: relative; width: 5.5vw; height: 5.5vw; display: block; justify-content: center; align-items: center; margin: auto; top: 0vw; bottom: 0; left: 0; right: 0; }
  .menu-trigger,.menu-trigger p { display: block; transition: all .4s; box-sizing: border-box; opacity: 1; }
  .menu-trigger.down p { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; font-size: 0.1em; }
  .menu-trigger p { opacity: 1; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); }
  .menu-trigger p:nth-of-type(1) { top: 0; }
  .menu-trigger p:nth-of-type(2) { top: 2.7vw; }
  .menu-trigger p:nth-of-type(3) { top: 5.3vw; }
  .menu-trigger.active p:nth-of-type(1) { transform: translateY(1.9vw) rotate(-45deg); background: #fff; }
  .menu-trigger.active p:nth-of-type(2) { opacity: 0; }
  .menu-trigger.active p:nth-of-type(3) { transform: translateY(-.4vw) rotate(45deg); background: #fff; top: 2.4vw;}
  .spnavi { display: block; position: fixed; top: 0; right: -100vw; z-index: 2; background: rgba(0,91,156,.7); width: 100vw; height: 100%; padding: 16vw 5vw 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all 1s; }
  .spnavi.active { right: 0;}
  .spnavi a { color: #fff; display: block; padding: 2.4vh 0; border-bottom: dotted 1px rgba(255,255,255,.2); font-size: 120%;}



  .kv { position: relative; display: block; width: 100%; height: 70vw; background: url(../images/kv.jpg) no-repeat center bottom; background-size: cover; }
  .kv .txt {position: absolute; top: 0; left: 0; z-index: 1; display: block; text-align: center; margin: 0 auto; width: 100%; height: 70vw; background: url(../images/scape.png) no-repeat center bottom; background-size: contain;}
  .kv .txt h1 { color: #fff; font-size: 220%; margin-bottom: 3vw; margin-top: 20vw; line-height: 1.2!important;}
  .kv .txt p { color: #fff; font-size: 100%; font-weight: bold; display: block; width: 90%; margin: auto; }

  section { display: block; width: 95%; margin: 10vw auto; text-align: center;}

  section p {margin-bottom: 6vw; line-height: 1.5;}
  section ul {margin-bottom: 6vw!important;}

  h2 img {display: block; margin: 0 auto 6vw; width: auto; height: 14vw;}
  #about {}
  #about h2 { }
  #about ul { list-style: none; display: flex; justify-content: space-between; width: 90%; margin-left: auto; margin-right: auto; padding: 0; }
  #about ul li { width: 32.4%; }

  #value {}
  #value h2 {  }
  #value ul { list-style: none; display: block; width: 100%; margin-left: auto; margin-right: auto;}
  #value ul li { text-align: left; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 3vw; color: #005B9C; font-weight: bold; font-size: 100%; padding: 3vw; box-sizing: border-box; background: #fff; border-radius: 4vw;}
  #value ul li:nth-last-of-type(1) {margin-bottom: 0;}
  #value ul li p {margin-bottom: 0; font-size: 120%;}
  #value ul li span {background: linear-gradient(transparent 60%, yellow 0%); display: inline;}
  #value ul li img { display: inline-block; width: 1.4em; height: auto; margin-right: .6em;}

  .servicebg {display: block; background: url(../images/bg1.jpg) no-repeat top center; background-size: contain; overflow: hidden; padding-top: 10vw;}
  #service { background: #fff; border-radius: 4vw; width: 95%; margin-right: auto; margin-left: auto; padding: 8vw 2vw 0; box-sizing: border-box;}
  #service > p  {padding: 0 5vw;}
  #service ul { display: block; width: 100%; margin: 0 auto 0; }
  #service ul li { width: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right,#005b9c 0%, #007fd8 100%); color: #fff; padding: 3vw 2vw; margin: 0 0 4vw 0; border-radius: 2vw; box-sizing: border-box; line-height: 1.4; font-size: 110%; text-align: left;}
  #service h3 {position: relative; font-size: 150%; margin-bottom: 10vw;}
  #service h3::after {content: ""; display: block; position: absolute; width: 8vw; height: 6vw; bottom: -6vw; left: 0; right: 0; margin: auto; background: url(../images/triangle.png)no-repeat center center;   background-size: auto; background-size: contain;}


  #contact { margin-top: 0; width: 100%; padding: 15vw 0; background: url(../images/scape.png) no-repeat center bottom,  url(../images/bg.png) repeat center; background-size: 100% auto, 90px 150px; }
  #contact h2 + p { padding: 0 5vw; text-align: left; }
  #contact ul { list-style: none; padding: 0; width: 80%; margin: 0 auto 1vw; }
  #contact ul li { width: 100%; margin-bottom: 10px; }
  #contact .note { display: block; width: 80%; margin-right: auto; margin-left: auto; background: #fff; padding: 3vw; text-align: left;}
  #company {}
  #company h2 { }
  #company table { width: 100%; margin: 0 auto; border-collapse: collapse; border: solid 1px #333;}
  #company table th { width: 30%; background: #005B9C; padding: 2vw; text-align: left; color: #fff; border: solid 1px #333; box-sizing: border-box;}
  #company table td { width: 70%;background: #fff; padding: 2vw; text-align: left; border: solid 1px #333; box-sizing: border-box;}
  footer { height: 33px; background: #005B9C; }
  footer p { line-height: 33px; text-align: center; color: #fff; }
}