@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
@import url("https://fonts.googleapis.com/earlyaccess/notoserifjapanese.css");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
@import url(reset.css);
@import url(base.css);
@import url(adjust.css);
.primary {
  color: #688AB8; }

.mincho {
  font-family: "Noto Serif Japanese", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

.gothic {
  font-family: "Noto Sans Japanese", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }

.oswald {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }

.futura {
  font-family: "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }

.tc {
  text-align: center; }

.center {
  margin-right: auto;
  margin-left: auto; }

.bold {
  font-weight: bold; }

p {
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  color: #555;
  font-weight: normal; }
  @media screen and (max-width: 520px) {
    p {
      font-size: 12px;
      text-align: left;
      letter-spacing: 1px; } }

a {
  cursor: pointer;
  transition: .3s ease; }
  a:hover {
    filter: brightness(120%);
    cursor: pointer; }
  a span {
    cursor: pointer; }

img {
  border-style: none;
  max-width: 100%;
  vertical-align: bottom;
  outline: none;
  margin: auto;
  line-height: 1; }

.clearfix::after {
  content: "";
  display: block;
  clear: both; }

.pagination {
  text-align: center;
  padding-top: 0px; }
  .pagination li {
    display: inline-block;
    color: #fff; }
    .pagination li a {
      font-size: 15px;
      background-color: #688AB8;
      padding: 8px 16px;
      margin: 0px 6px; }
      .pagination li a:hover {
        color: #fff;
        transition: 0.3s ease; }

button {
  display: block;
  width: 260px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;
  background-color: #688AB8;
  color: #fff;
  transition: 0.25s ease; }
  button:hover {
    filter: brightness(110%); }
  button:focus {
    outline: none; }

section {
  padding: 8% 0px;
  z-index: 5; }
  @media screen and (max-width: 520px) {
    section {
      padding: 10% 0px; } }

/*pagenation*/
.pagenation {
  margin: 0;
  text-align: center;
  padding-bottom: 70px;
  font-size: 0; }
  .pagenation li {
    display: inline-block;
    list-style: none outside none;
    margin: 0 9px;
    color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 24.5px;
    vertical-align: middle; }
    .pagenation li a {
      display: block;
      color: #fff;
      background-color: #CDD6D5;
      min-width: 30px;
      height: 30px;
      padding: 4px 4px 0 4px; }
      .pagenation li a:hover {
        text-decoration: none;
        background-color: #c09f6c;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s; }
  .pagenation li.pagenation-active {
    background-color: #688AB8;
    min-width: 30px;
    height: 30px;
    padding: 4px 4px 0 4px; }
  .pagenation li.pagenation-next a,
  .pagenation li.pagenation-prev a {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-color: transparent;
    position: relative;
    width: 30px; }
  .pagenation li.pagenation-next a:before,
  .pagenation li.pagenation-prev a:before {
    content: "";
    display: block;
    position: absolute;
    top: 44%;
    margin-top: -6px;
    border-top: 1px solid #CDD6D5;
    border-right: 1px solid #CDD6D5;
    width: 14px;
    height: 14px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg); }

.pagenation li.pagenation-prev {
  margin-left: 11px; }

.pagenation li.pagenation-prev a:before {
  top: 50%;
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
  right: -2px; }

.pagenation li.pagenation-next {
  margin-left: 11px; }

.pagenation li.pagenation-next a:before {
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: -5px; }

.pagenation li .page-numbers dots {
  color: #CDD6D5; }

.containerM {
  width: 100%;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .containerM {
      width: 100%;
      padding: 0 10px; } }

.containerS {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 0 10px; }
  @media screen and (max-width: 768px) {
    .containerS {
      width: 100%; } }

.containerL {
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    .containerL {
      width: 100%; } }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .ie_none {
    display: none !important; } }
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .is_ie {
    display: block; } }
.bg_none {
  background: none !important; }

html {
  width: 100%;
  height: 100%;
  background-color: #fff; }

body {
  font-size: 14px;
  width: 100%;
  height: 100%;
  position: relative;
  font-family: "Noto Sans Japanese", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  color: #555;
  line-height: 1.4;
  font-weight: normal;
  margin: 0px; }

.wrap {
  display: block;
  overflow-x: hidden;
  width: 100%;
  z-index: 1;
  background: -webkit-linear-gradient(90deg, #f8f8f8 0% 50%, #fcfcfc 50% 100%);
  background: -moz-linear-gradient(90deg, #f8f8f8 0% 50%, #fcfcfc 50% 100%);
  background: linear-gradient(90deg, #f8f8f8 0% 50%, #fcfcfc 50% 100%); }

_:lang(x) + _:-webkit-full-screen-document,
.wrap {
  background: #f5f5f5; }

main {
  width: 100%; }

.tag-yellow {
  background-color: #c09f6c; }

.tag-blue {
  background-color: #3D7DF5; }

.tag-red {
  background-color: #F26835; }

.tag-green {
  background-color: #3ACB34; }

img {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }

#header {
  position: absolute;
  top: 0;
  z-index: 9;
  height: 60px;
  width: 100%;
  background-color: #688AB8;
  background-size: cover; }
  @media screen and (max-width: 768px) {
    #header {
      height: 60px; } }
  @media screen and (max-width: 520px) {
    #header {
      height: 60px; } }
  #header .header-inner {
    width: 100%;
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding-left: 10px;
    margin: 0 auto; }
    @media screen and (max-width: 520px) {
      #header .header-inner {
        height: 60px; } }
    #header .header-inner .logo {
      display: flex;
      align-items: center; }
      #header .header-inner .logo a {
        display: flex;
        align-items: center; }
        #header .header-inner .logo a:hover {
          filter: none; }
        #header .header-inner .logo a img:hover {
          transform: scale(0.98);
          transition: 0.25s ease;
          filter: none; }
    #header .header-inner .header-nav ul {
      display: flex; }
      @media screen and (max-width: 520px) {
        #header .header-inner .header-nav ul {
          display: none; } }
      #header .header-inner .header-nav ul li {
        padding: 0 20px;
        display: flex;
        align-items: center;
        height: 60px; }
        @media screen and (max-width: 520px) {
          #header .header-inner .header-nav ul li {
            padding: 0 10px;
            height: 60px; } }
        #header .header-inner .header-nav ul li a {
          color: #fff;
          font-size: 16px;
          font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
          transition: .05s ease;
          cursor: pointer; }
          #header .header-inner .header-nav ul li a:hover {
            transform: scale(0.96, 0.96); }

#nav-open {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-color: #688AB8;
  cursor: pointer; }
  @media screen and (min-width: 521px) {
    #nav-open {
      display: none; } }
  @media screen and (max-width: 520px) {
    #nav-open {
      width: 60px;
      height: 60px; } }
  #nav-open span {
    position: absolute;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out; }
  #nav-open span:nth-child(1) {
    width: 50%;
    top: calc(50% - 20px);
    right: 0;
    left: 0;
    margin: auto; }
    @media screen and (max-width: 520px) {
      #nav-open span:nth-child(1) {
        top: calc(50% - 14px);
        width: 34px; } }
  #nav-open span:nth-child(2) {
    top: calc(50% - 20px / 2);
    left: 28px;
    letter-spacing: 2px;
    line-height: 1.3;
    color: #fff;
    font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    font-size: 16px;
    border: none; }
    @media screen and (max-width: 520px) {
      #nav-open span:nth-child(2) {
        font-size: 12px;
        line-height: 1.1;
        top: calc(50% - 14px / 2);
        left: 14px; } }
  #nav-open span:nth-child(3) {
    width: 50%;
    bottom: calc(50% - 20px);
    right: 0;
    left: 0;
    margin: auto; }
    @media screen and (max-width: 520px) {
      #nav-open span:nth-child(3) {
        bottom: calc(50% - 14px);
        width: 34px; } }

#nav-open.active span:nth-child(1) {
  top: calc(50% - 1px);
  left: 0px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg); }
  @media screen and (max-width: 520px) {
    #nav-open.active span:nth-child(1) {
      top: calc(50% - 2px); } }

#nav-open.active span:nth-child(2) {
  opacity: 0; }

#nav-open.active span:nth-child(3) {
  bottom: calc(50% - 1px);
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); }
  @media screen and (max-width: 520px) {
    #nav-open.active span:nth-child(3) {
      bottom: calc(50% - 2px); } }

.nav-content {
  display: block;
  transform: translateX(-105%);
  transition: 1s ease;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: transparent;
  z-index: 7;
  backdrop-filter: blur(20px) saturate(0.8); }
  .nav-content .nav-inner {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between; }
    .nav-content .nav-inner .nav-image {
      width: 100px;
      height: 100%; }
      @media screen and (max-width: 520px) {
        .nav-content .nav-inner .nav-image {
          display: none; } }
    .nav-content .nav-inner ul {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      width: calc(100% - 100px);
      padding: 160px 40px 40px 40px;
      background-color: #F5F4EF; }
      @media screen and (max-width: 520px) {
        .nav-content .nav-inner ul {
          flex-direction: column;
          width: 100%;
          padding: 100px 40px 40px 40px; } }
      .nav-content .nav-inner ul li {
        margin-bottom: 6%; }
        .nav-content .nav-inner ul li a {
          width: 100%;
          color: #688AB8;
          font-weight: bold; }
          .nav-content .nav-inner ul li a span {
            color: #fff;
            font-size: 24px; }
            @media screen and (max-width: 520px) {
              .nav-content .nav-inner ul li a span {
                font-size: 16px;
                color: #688AB8;
                font-weight: bold; } }

.nav-content.active {
  transform: translateX(0%); }

#header.scroll {
  background-color: #688ab8;
  position: fixed;
  top: 0;
  transition: 1s ease; }

.under-header {
  width: 100%;
  height: 60px;
  background-color: transparent; }
  @media screen and (max-width: 768px) {
    .under-header {
      height: 60px; } }
  @media screen and (max-width: 520px) {
    .under-header {
      height: 60px; } }

.js-top {
  opacity: 0;
  visibility: hidden;
  transition: all 5s; }

.js-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(80px);
  transition: all 1s; }

.js-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-80px);
  transition: all 1s; }

.js-down {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
  transition: all 1s; }

.js-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px);
  transition: all 1s; }

.js-top.show {
  opacity: 1;
  visibility: visible; }

.js-right.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px); }

.js-left.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px); }

.js-up.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px); }

.hero {
  min-height: 100vh;
  background-color: #fff;
  position: relative; }
  .hero .element1 {
    position: absolute;
    z-index: 3;
    width: 31%;
    left: 0%;
    top: 0%; }
  .hero .element2 {
    position: absolute;
    z-index: 3;
    width: 20%;
    left: -10%;
    bottom: -10%; }
    @media screen and (max-width: 520px) {
      .hero .element2 {
        bottom: 0%; } }
  .hero .hero-content {
    min-height: 100vh;
    max-width: 100vw;
    position: relative;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 520px) {
      .hero .hero-content {
        min-height: 100vh; } }
    .hero .hero-content .clip-cover {
      background-image: url(../img/bg-clip.png);
      background-size: auto 100%;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-position: 100% 0;
      background-repeat: no-repeat;
      z-index: 2; }
      @media screen and (max-width: 520px) {
        .hero .hero-content .clip-cover {
          height: 56%;
          bottom: 0; } }
    .hero .hero-content .hero-cliping {
      position: absolute;
      right: 0;
      width: 100vh;
      padding-top: 100vh;
      top: 0;
      overflow: hidden;
      z-index: 1; }
      @media screen and (max-width: 520px) {
        .hero .hero-content .hero-cliping {
          padding-top: 56vh; } }
      .hero .hero-content .hero-cliping ul {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover; }
        .hero .hero-content .hero-cliping ul li .bg-hero {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          object-fit: cover; }
          @media screen and (max-width: 520px) {
            .hero .hero-content .hero-cliping ul li .bg-hero {
              height: 70%; } }
    .hero .hero-content .hero-text {
      z-index: 3;
      margin-left: 4%;
      max-width: 500px; }
      @media screen and (max-width: 520px) {
        .hero .hero-content .hero-text {
          padding-top: 62vw; } }
      .hero .hero-content .hero-text .hero-logo {
        display: block; }
        @media screen and (max-width: 520px) {
          .hero .hero-content .hero-text .hero-logo {
            display: inline-block; } }
      .hero .hero-content .hero-text .hero-copy {
        display: inline-block; }

.top-under {
  padding-top: 10%;
  background-color: #fff; }

.top-about {
  position: relative; }
  .top-about .element4 {
    position: absolute;
    z-index: 3;
    width: 20%;
    right: 0%;
    bottom: 10%; }
    @media screen and (max-width: 520px) {
      .top-about .element4 {
        right: -10%; } }
  .top-about h2 {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 80vw; }
  .top-about .vision-content {
    position: relative;
    margin-left: 24%;
    display: inline-block; }
    @media screen and (max-width: 520px) {
      .top-about .vision-content {
        margin-left: 5%;
        margin-right: 5%; } }
    .top-about .vision-content h3 {
      position: relative;
      display: inline-block;
      font-size: 24px;
      color: #688AB8;
      margin-bottom: 4%; }
      .top-about .vision-content h3::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #c09f6c;
        height: 2px;
        width: 60vw;
        right: 0;
        transform-origin: left;
        transform: scaleX(1); }
    .top-about .vision-content p {
      font-size: 16px;
      line-height: 1.8; }
      @media screen and (max-width: 520px) {
        .top-about .vision-content p {
          font-size: 16px; } }
      .top-about .vision-content p strong {
        font-size: 18px; }
    .top-about .vision-content .element3 {
      position: absolute;
      z-index: 3;
      width: 20%;
      right: -30%;
      top: 20%; }

.top-growth {
  position: relative; }
  .top-growth .element3 {
    position: absolute;
    z-index: 3;
    left: 10%;
    bottom: 0%; }
    @media screen and (max-width: 768px) {
      .top-growth .element3 {
        display: none; } }
  .top-growth .growth-content {
    display: flex;
    width: 80%;
    margin: auto; }
    @media screen and (max-width: 768px) {
      .top-growth .growth-content {
        flex-direction: column;
        width: 90%; } }
    .top-growth .growth-content .textbox {
      width: 50%; }
      @media screen and (max-width: 520px) {
        .top-growth .growth-content .textbox {
          width: 100%;
          margin-bottom: 8%; } }
      .top-growth .growth-content .textbox h2 {
        font-size: 4.8vw;
        font-weight: bold;
        margin-bottom: 4%; }
        @media screen and (max-width: 520px) {
          .top-growth .growth-content .textbox h2 {
            font-size: 10vw; } }
      .top-growth .growth-content .textbox h3 {
        margin-bottom: 4%; }
        .top-growth .growth-content .textbox h3 span {
          display: inline-block;
          color: #fff;
          font-size: 24px;
          background-color: #555;
          margin-bottom: 1%;
          padding: 0 4px; }
          @media screen and (max-width: 520px) {
            .top-growth .growth-content .textbox h3 span {
              font-size: 20px; } }
      .top-growth .growth-content .textbox p {
        font-size: 16px; }
    .top-growth .growth-content .imagebox {
      width: 50%; }
      @media screen and (max-width: 520px) {
        .top-growth .growth-content .imagebox {
          width: 100%; } }

.top-product {
  text-align: center;
  position: relative; }
  @media screen and (max-width: 520px) {
    .top-product {
      padding: 10% 0px 40%; } }
  .top-product .under-title {
    position: absolute;
    top: 33%;
    left: 0;
    z-index: 0;
    width: 80%; }
    @media screen and (max-width: 520px) {
      .top-product .under-title {
        top: 0;
        width: 100%; } }
  .top-product h2 {
    display: block;
    text-align: center;
    margin-bottom: 4%; }
    .top-product h2 span {
      position: relative;
      font-size: 4.8vw;
      font-weight: bold;
      margin: 0 auto 4%;
      display: inline-block;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .top-product h2 span {
          font-size: 10vw; } }
      .top-product h2 span::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #688AB8;
        height: 2px;
        width: 100%; }
  .top-product .product-content1 {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 8%; }
    @media screen and (max-width: 520px) {
      .top-product .product-content1 {
        width: 100%;
        margin: 0 auto 70%; } }
    .top-product .product-content1 .imagebox {
      text-align: right; }
      @media screen and (max-width: 520px) {
        .top-product .product-content1 .imagebox {
          text-align: center; } }
    .top-product .product-content1 .textbox {
      position: absolute;
      top: 12%;
      left: 0;
      width: 540px;
      height: 320px;
      padding: 40px;
      background-color: rgba(255, 255, 255, 0.9); }
      @media screen and (max-width: 520px) {
        .top-product .product-content1 .textbox {
          width: 95%;
          padding: 20px;
          top: 80%;
          left: 0;
          right: 0;
          height: auto;
          margin: auto; } }
      .top-product .product-content1 .textbox h3 {
        font-size: 24px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 4%; }
      .top-product .product-content1 .textbox p {
        font-size: 16px;
        text-align: left;
        margin-bottom: 4%; }
      .top-product .product-content1 .textbox .button {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #688AB8;
        width: 300px;
        height: 40px;
        text-align: center;
        font-size: 20px;
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 2px 0;
        margin: auto; }
        @media screen and (max-width: 520px) {
          .top-product .product-content1 .textbox .button {
            margin: 4% auto 0; } }
  .top-product .product-content1 .element1 {
    position: absolute;
    z-index: 3;
    width: 20%;
    right: -20%;
    top: -40%; }
  .top-product .product-content2 {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 8%; }
    @media screen and (max-width: 520px) {
      .top-product .product-content2 {
        width: 100%;
        margin: 0 auto 70%; } }
    .top-product .product-content2 .imagebox {
      text-align: left; }
      @media screen and (max-width: 520px) {
        .top-product .product-content2 .imagebox {
          text-align: center; } }
    .top-product .product-content2 .textbox {
      position: absolute;
      top: 12%;
      right: 0;
      width: 540px;
      height: 280px;
      padding: 40px;
      background-color: rgba(255, 255, 255, 0.9); }
      @media screen and (max-width: 520px) {
        .top-product .product-content2 .textbox {
          width: 95%;
          padding: 20px;
          top: 80%;
          left: 0;
          right: 0;
          height: auto;
          margin: auto; } }
      .top-product .product-content2 .textbox h3 {
        font-size: 24px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 4%; }
      .top-product .product-content2 .textbox p {
        font-size: 16px;
        text-align: left;
        margin-bottom: 4% }
      .top-product .product-content2 .textbox .button {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #688AB8;
        width: 300px;
        height: 40px;
        text-align: center;
        font-size: 20px;
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 2px 0; }
        @media screen and (max-width: 520px) {
          .top-product .product-content2 .textbox .button {
            margin: 4% auto 0; } }
  .top-product .product-content1 .element1 {
    position: absolute;
    z-index: 3;
    width: 20%;
    right: -20%;
    top: -40%; }
  .top-product .product-content3 {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 8%; }
    @media screen and (max-width: 520px) {
      .top-product .product-content3 {
        width: 100%;
        margin: 0 auto 70%; } }
    .top-product .product-content3 .imagebox {
      text-align: right; }
      @media screen and (max-width: 520px) {
        .top-product .product-content3 .imagebox {
          text-align: center; } }
    .top-product .product-content3 .textbox {
      position: absolute;
      top: 12%;
      left: 0;
      width: 540px;
      height: 320px;
      padding: 40px;
      background-color: rgba(255, 255, 255, 0.9); }
      @media screen and (max-width: 520px) {
        .top-product .product-content3 .textbox {
          width: 95%;
          padding: 20px;
          top: 80%;
          left: 0;
          right: 0;
          height: auto;
          margin: auto; } }
      .top-product .product-content3 .textbox h3 {
        font-size: 24px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 4%; }
      .top-product .product-content3 .textbox p {
        font-size: 16px;
        text-align: left;
        margin-bottom: 4%; }
      .top-product .product-content3 .textbox .button {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #688AB8;
        width: 300px;
        height: 40px;
        text-align: center;
        font-size: 20px;
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 2px 0;
        margin: auto; }
        @media screen and (max-width: 520px) {
          .top-product .product-content3 .textbox .button {
            margin: 4% auto 0; } }
  .top-product .product-content1 .element1 {
    position: absolute;
    z-index: 3;
    width: 20%;
    right: -20%;
    top: -40%; }
  .top-product .product-content4 {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 8%; }
    @media screen and (max-width: 520px) {
      .top-product .product-content4 {
        width: 100%;
        margin: 0 auto 70%; } }
    .top-product .product-content4 .imagebox {
      text-align: left; }
      @media screen and (max-width: 520px) {
        .top-product .product-content4 .imagebox {
          text-align: center; } }
    .top-product .product-content4 .textbox {
      position: absolute;
      top: 12%;
      right: 0;
      width: 540px;
      height: 280px;
      padding: 40px;
      background-color: rgba(255, 255, 255, 0.9); }
      @media screen and (max-width: 520px) {
        .top-product .product-content4 .textbox {
          width: 95%;
          padding: 20px;
          top: 80%;
          left: 0;
          right: 0;
          height: auto;
          margin: auto; } }
      .top-product .product-content4 .textbox h3 {
        font-size: 24px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 4%; }
      .top-product .product-content4 .textbox p {
        font-size: 16px;
        text-align: left; }
      .top-product .product-content4 .textbox .button {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #688AB8;
        width: 300px;
        height: 40px;
        text-align: center;
        font-size: 20px;
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 2px 0; }
        @media screen and (max-width: 520px) {
          .top-product .product-content4 .textbox .button {
            margin: 4% auto 0; } }
  .top-product .product-content1 .element1 {
    position: absolute;
    z-index: 3;
    width: 20%;
    right: -20%;
    top: -40%; }

.top-case {
  position: relative;
  max-width: 80%;
  margin: auto;
  padding: 0% 20px 8%; }
  @media screen and (max-width: 520px) {
    .top-case {
      max-width: 100%; } }
  .top-case .element2 {
    position: absolute;
    z-index: 3;
    width: 20%;
    left: -10%;
    top: -30%; }
    @media screen and (max-width: 520px) {
      .top-case .element2 {
        display: none; } }
  .top-case h2 {
    display: block;
    text-align: center;
    margin-bottom: 6%; }
    .top-case h2 span {
      position: relative;
      font-size: 4.8vw;
      font-weight: bold;
      margin: 0 auto 4%;
      display: inline-block;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .top-case h2 span {
          font-size: 10vw; } }
      .top-case h2 span::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #688AB8;
        height: 2px;
        width: 100%; }
  .top-case .case-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto 8%; }
    .top-case .case-content .case-box {
      width: 25%;
      padding: 1%;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      @media screen and (max-width: 520px) {
        .top-case .case-content .case-box {
          width: 50%;
          margin-bottom: 14%; } }
      .top-case .case-content .case-box .imagebox {
        padding-top: 70%;
        background-image: url(../img/case1.png);
        background-size: cover;
        margin-bottom: 4%; }
      .top-case .case-content .case-box .textbox {
        text-align: center; }
        .top-case .case-content .case-box .textbox h3 {
          display: block;
          text-align: left;
          font-weight: bold;
          margin-bottom: 8%;
          max-height: 54px;
          overflow: hidden; }
          @media screen and (max-width: 520px) {
            .top-case .case-content .case-box .textbox h3 {
              max-height: 47px; } }
          .top-case .case-content .case-box .textbox h3 span {
            position: relative;
            display: inline-block;
            font-size: 18px;
            text-decoration: underline;
            text-underline-position: under;
            line-height: 1.6; }
            @media screen and (max-width: 520px) {
              .top-case .case-content .case-box .textbox h3 span {
                font-size: 16px; } }
        .top-case .case-content .case-box .textbox p {
          font-size: 14px;
          margin-bottom: 8%; }
          @media screen and (max-width: 520px) {
            .top-case .case-content .case-box .textbox p {
              font-size: 12px; } }
        .top-case .case-content .case-box .textbox .button-box {
          display: block;
          color: #688AB8;
          width: 70%;
          text-align: center;
          font-size: 16px;
          margin: auto;
          border: 1px solid #688AB8;
          border-radius: 20px;
          padding: 2px 0; }
  .top-case .button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #688AB8;
    width: 300px;
    height: 40px;
    margin: auto;
    text-align: center;
    font-size: 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 2px 0; }

.top-recruit {
  max-width: 80%;
  margin: auto;
  padding: 8% 20px; }
  @media screen and (max-width: 520px) {
    .top-recruit {
      max-width: 100%; } }
  .top-recruit h2 {
    display: block;
    text-align: center;
    margin-bottom: 10%; }
    .top-recruit h2 span {
      position: relative;
      font-size: 4.8vw;
      font-weight: bold;
      margin: 0 auto 4%;
      display: inline-block;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .top-recruit h2 span {
          font-size: 10vw; } }
      .top-recruit h2 span::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #688AB8;
        height: 2px;
        width: 100%; }
  .top-recruit .recruit-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 8%; }
    @media screen and (max-width: 520px) {
      .top-recruit .recruit-content {
        width: 100%;
        margin: 0 auto 10%; } }
    .top-recruit .recruit-content .element5 {
      position: absolute;
      z-index: 0;
      width: 20%;
      right: -10%;
      bottom: -22%; }
      @media screen and (max-width: 520px) {
        .top-recruit .recruit-content .element5 {
          display: none; } }
    .top-recruit .recruit-content .imagebox {
      text-align: right; }
      @media screen and (max-width: 520px) {
        .top-recruit .recruit-content .imagebox {
          text-align: center;
          margin-bottom: 2%; } }
    .top-recruit .recruit-content .textbox {
      position: absolute;
      top: -20%;
      left: 0; }
      @media screen and (max-width: 520px) {
        .top-recruit .recruit-content .textbox {
          position: relative; } }
      .top-recruit .recruit-content .textbox .copy {
        margin-bottom: 4%; }
        @media screen and (max-width: 520px) {
          .top-recruit .recruit-content .textbox .copy {
            margin-bottom: 2%; } }
        .top-recruit .recruit-content .textbox .copy span {
          display: inline-block;
          color: #fff;
          font-size: 24px;
          background-color: #555;
          margin-bottom: 1%;
          padding: 0 6px; }
          @media screen and (max-width: 520px) {
            .top-recruit .recruit-content .textbox .copy span {
              font-size: 20px; } }
      .top-recruit .recruit-content .textbox .whitebox {
        width: 540px;
        height: 590px;
        padding: 40px;
        background-color: rgba(255, 255, 255, 0.9); }
        @media screen and (max-width: 520px) {
          .top-recruit .recruit-content .textbox .whitebox {
            width: 100%;
            padding: 20px;
            top: 80%;
            left: 0;
            right: 0;
            height: auto;
            margin: auto; } }
        .top-recruit .recruit-content .textbox .whitebox h3 {
          font-size: 24px;
          font-weight: bold;
          text-align: left;
          margin-bottom: 4%; }
        .top-recruit .recruit-content .textbox .whitebox p {
          font-size: 16px;
          text-align: left;
          margin-bottom: 6%; }
        .top-recruit .recruit-content .textbox .whitebox .button {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          background-color: #688AB8;
          width: 300px;
          height: 40px;
          text-align: center;
          font-size: 20px;
          border: 1px solid #fff;
          border-radius: 20px;
          padding: 2px 0; }

.top-info {
  max-width: 80%;
  margin: auto;
  padding: 0% 20px 8%;
  margin-top: 16%; }
  @media screen and (max-width: 520px) {
    .top-info {
      max-width: 100%; } }
  .top-info h2 {
    display: block;
    text-align: center;
    margin-bottom: 4%; }
    .top-info h2 span {
      position: relative;
      font-size: 4.8vw;
      font-weight: bold;
      margin: 0 auto 4%;
      display: inline-block;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .top-info h2 span {
          font-size: 10vw; } }
      .top-info h2 span::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #688AB8;
        height: 2px;
        width: 100%; }
  .top-info .info-content {
    margin-bottom: 4%; }
    .top-info .info-content .infobox {
      display: block;
      border-bottom: 1px solid #688AB8;
      padding: 2% 0; }
      .top-info .info-content .infobox time {
        margin-bottom: 2%;
        color: #c09f6c;
        font-size: 12px;
        font-weight: bold; }
      .top-info .info-content .infobox .title {
        color: #555;
        font-size: 14px;
        font-weight: bold; }
  .top-info .button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #688AB8;
    width: 300px;
    height: 40px;
    margin: auto;
    text-align: center;
    font-size: 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 2px 0; }

.top-history {
  width: 100%;
  max-width: 910px;
  margin: auto;
  padding: 8% 20px; }
  @media screen and (max-width: 520px) {
    .top-history {
      max-width: 100%; } }
  .top-history h2 {
    display: block;
    text-align: center;
    margin-bottom: 4%; }
    .top-history h2 span {
      position: relative;
      font-size: 4.8vw;
      font-weight: bold;
      margin: 0 auto 4%;
      display: inline-block;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .top-history h2 span {
          font-size: 10vw; } }
      .top-history h2 span::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #688AB8;
        height: 2px;
        width: 100%; }
  .top-history .history-content {
    width: 100%;
    text-align: center; }
    .top-history .history-content ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: relative;
      text-align: center;
      height: 100%;
      margin: auto; }
      .top-history .history-content ul::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 10px;
        background-color: #CDD6D5;
        margin: auto; }
      .top-history .history-content ul li {
        text-align: left;
        z-index: 1; }
        .top-history .history-content ul li .content-head {
          position: relative;
          background-color: #688AB8;
          color: #fff;
          padding: 10px; }
        .top-history .history-content ul li .content-body {
          background-color: #fff;
          border: 1px solid #CDD6D5;
          padding: 10px;
          line-height: 1.8; }
      .top-history .history-content ul .history-list1 {
        width: 350px; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list1 {
            width: 100%; } }
        .top-history .history-content ul .history-list1 .content-head {
          position: relative; }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list1 .content-head {
              margin-top: 10%; } }
          .top-history .history-content ul .history-list1 .content-head::after {
            content: "";
            border-style: solid;
            border-width: 5px 0 5px 10px;
            border-color: transparent transparent transparent #688AB8;
            position: absolute;
            top: 50%;
            right: -10px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
            @media screen and (max-width: 910px) {
              .top-history .history-content ul .history-list1 .content-head::after {
                display: none; } }
          .top-history .history-content ul .history-list1 .content-head::before {
            content: "";
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            top: 0;
            right: -104.5px;
            background-color: #688AB8; }
            @media screen and (max-width: 768px) {
              .top-history .history-content ul .history-list1 .content-head::before {
                display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list2 {
        width: 350px;
        margin-top: 10%; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list2 {
            width: 100%; } }
        .top-history .history-content ul .history-list2 .content-head::after {
          content: "";
          border-style: solid;
          border-width: 5px 10px 5px 0px;
          border-color: transparent #688AB8 transparent transparent;
          position: absolute;
          top: 50%;
          left: -10px;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list2 .content-head::after {
              display: none; } }
        .top-history .history-content ul .history-list2 .content-head::before {
          content: "";
          width: 40px;
          height: 40px;
          border-radius: 20px;
          position: absolute;
          top: 0;
          left: -104.5px;
          background-color: #688AB8; }
          @media screen and (max-width: 910px) {
            .top-history .history-content ul .history-list2 .content-head::before {
              display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list3 {
        width: 350px; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list3 {
            width: 100%; } }
        .top-history .history-content ul .history-list3 .content-head {
          position: relative; }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list3 .content-head {
              margin-top: 10%; } }
          .top-history .history-content ul .history-list3 .content-head::after {
            content: "";
            border-style: solid;
            border-width: 5px 0 5px 10px;
            border-color: transparent transparent transparent #688AB8;
            position: absolute;
            top: 50%;
            right: -10px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
            @media screen and (max-width: 910px) {
              .top-history .history-content ul .history-list3 .content-head::after {
                display: none; } }
          .top-history .history-content ul .history-list3 .content-head::before {
            content: "";
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            top: 0;
            right: -104.5px;
            background-color: #688AB8; }
            @media screen and (max-width: 768px) {
              .top-history .history-content ul .history-list3 .content-head::before {
                display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list4 {
        width: 350px;
        margin-top: 10%; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list4 {
            width: 100%; } }
        .top-history .history-content ul .history-list4 .content-head::after {
          content: "";
          border-style: solid;
          border-width: 5px 10px 5px 0px;
          border-color: transparent #688AB8 transparent transparent;
          position: absolute;
          top: 50%;
          left: -10px;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list4 .content-head::after {
              display: none; } }
        .top-history .history-content ul .history-list4 .content-head::before {
          content: "";
          width: 40px;
          height: 40px;
          border-radius: 20px;
          position: absolute;
          top: 0;
          left: -104.5px;
          background-color: #688AB8; }
          @media screen and (max-width: 910px) {
            .top-history .history-content ul .history-list4 .content-head::before {
              display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list5 {
        width: 350px; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list5 {
            width: 100%; } }
        .top-history .history-content ul .history-list5 .content-head {
          position: relative; }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list5 .content-head {
              margin-top: 10%; } }
          .top-history .history-content ul .history-list5 .content-head::after {
            content: "";
            border-style: solid;
            border-width: 5px 0 5px 10px;
            border-color: transparent transparent transparent #688AB8;
            position: absolute;
            top: 50%;
            right: -10px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
            @media screen and (max-width: 910px) {
              .top-history .history-content ul .history-list5 .content-head::after {
                display: none; } }
          .top-history .history-content ul .history-list5 .content-head::before {
            content: "";
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            top: 0;
            right: -104.5px;
            background-color: #688AB8; }
            @media screen and (max-width: 768px) {
              .top-history .history-content ul .history-list5 .content-head::before {
                display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list6 {
        width: 350px;
        margin-top: 10%; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list6 {
            width: 100%; } }
        .top-history .history-content ul .history-list6 .content-head::after {
          content: "";
          border-style: solid;
          border-width: 5px 10px 5px 0px;
          border-color: transparent #688AB8 transparent transparent;
          position: absolute;
          top: 50%;
          left: -10px;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list6 .content-head::after {
              display: none; } }
        .top-history .history-content ul .history-list6 .content-head::before {
          content: "";
          width: 40px;
          height: 40px;
          border-radius: 20px;
          position: absolute;
          top: 0;
          left: -104.5px;
          background-color: #688AB8; }
          @media screen and (max-width: 910px) {
            .top-history .history-content ul .history-list6 .content-head::before {
              display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list7 {
        width: 350px; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list7 {
            width: 100%; } }
        .top-history .history-content ul .history-list7 .content-head {
          position: relative; }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list7 .content-head {
              margin-top: 10%; } }
          .top-history .history-content ul .history-list7 .content-head::after {
            content: "";
            border-style: solid;
            border-width: 5px 0 5px 10px;
            border-color: transparent transparent transparent #688AB8;
            position: absolute;
            top: 50%;
            right: -10px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
            @media screen and (max-width: 910px) {
              .top-history .history-content ul .history-list7 .content-head::after {
                display: none; } }
          .top-history .history-content ul .history-list7 .content-head::before {
            content: "";
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            top: 0;
            right: -104.5px;
            background-color: #688AB8; }
            @media screen and (max-width: 768px) {
              .top-history .history-content ul .history-list7 .content-head::before {
                display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list8 {
        width: 350px;
        margin-top: 10%; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list8 {
            width: 100%; } }
        .top-history .history-content ul .history-list8 .content-head::after {
          content: "";
          border-style: solid;
          border-width: 5px 10px 5px 0px;
          border-color: transparent #688AB8 transparent transparent;
          position: absolute;
          top: 50%;
          left: -10px;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list8 .content-head::after {
              display: none; } }
        .top-history .history-content ul .history-list8 .content-head::before {
          content: "";
          width: 40px;
          height: 40px;
          border-radius: 20px;
          position: absolute;
          top: 0;
          left: -104.5px;
          background-color: #688AB8; }
          @media screen and (max-width: 910px) {
            .top-history .history-content ul .history-list8 .content-head::before {
              display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }
      .top-history .history-content ul .history-list9 {
        width: 350px; }
        @media screen and (max-width: 768px) {
          .top-history .history-content ul .history-list9 {
            width: 100%; } }
        .top-history .history-content ul .history-list9 .content-head {
          position: relative; }
          @media screen and (max-width: 768px) {
            .top-history .history-content ul .history-list9 .content-head {
              margin-top: 10%; } }
          .top-history .history-content ul .history-list9 .content-head::after {
            content: "";
            border-style: solid;
            border-width: 5px 0 5px 10px;
            border-color: transparent transparent transparent #688AB8;
            position: absolute;
            top: 50%;
            right: -10px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
            @media screen and (max-width: 910px) {
              .top-history .history-content ul .history-list9 .content-head::after {
                display: none; } }
          .top-history .history-content ul .history-list9 .content-head::before {
            content: "";
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            top: 0;
            right: -104.5px;
            background-color: #688AB8; }
            @media screen and (max-width: 768px) {
              .top-history .history-content ul .history-list9 .content-head::before {
                display: none; } }
      .top-history .history-content ul .history-list1 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list1 .content-head::after {
          border-color: transparent transparent transparent #999; }
        .top-history .history-content ul .history-list1 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list2 .content-head {
        background-color: #999; }
        .top-history .history-content ul .history-list2 .content-head::after {
          border-color: transparent #999 transparent transparent; }
        .top-history .history-content ul .history-list2 .content-head::before {
          background-color: #999; }
      .top-history .history-content ul .history-list3 .content-head::before {
        background-color: #c09f6c; }

.top-company {
  max-width: 80%;
  margin: auto;
  padding: 8% 20px; }
  @media screen and (max-width: 520px) {
    .top-company {
      max-width: 100%; } }
  .top-company h2 {
    display: block;
    text-align: center;
    margin-bottom: 4%; }
    .top-company h2 span {
      position: relative;
      font-size: 4.8vw;
      font-weight: bold;
      margin: 0 auto 4%;
      display: inline-block;
      text-align: center; }
      @media screen and (max-width: 520px) {
        .top-company h2 span {
          font-size: 10vw; } }
      .top-company h2 span::before {
        position: absolute;
        content: "";
        bottom: 0;
        background-color: #688AB8;
        height: 2px;
        width: 100%; }
  .top-company .company-content {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    margin-bottom: 60px; }
    .top-company .company-content tr {
      border: solid 1px #ddd; }
      @media screen and (max-width: 520px) {
        .top-company .company-content tr {
          display: block; } }
      .top-company .company-content tr th {
        width: 20%;
        color: #fff;
        padding: 20px;
        vertical-align: top;
        text-align: left;
        border: solid 2px rgba(255, 255, 255, 0.4);
        background-color: #688AB8;
        font-size: 14px; }
        @media screen and (max-width: 520px) {
          .top-company .company-content tr th {
            display: block;
            width: 100%; } }
      .top-company .company-content tr td {
        width: 80%;
        padding: 20px;
        vertical-align: top;
        text-align: left;
        border: 2px solid #f3f7f8;
        background-color: #fff;
        font-size: 14px; }
        @media screen and (max-width: 520px) {
          .top-company .company-content tr td {
            display: block;
            width: 100%; } }

.hero-case {
  padding: 40px;
  background-image: url(../img/hero-case.png);
  background-size: cover; }
  .hero-case h2 {
    text-align: center;
    color: #fff;
    font-size: 24px; }

.hero-info {
  padding: 40px;
  background-image: url(../img/hero-info.png);
  background-size: cover; }
  .hero-info h2 {
    text-align: center;
    color: #fff;
    font-size: 24px; }

.Detail {
  padding: 4% 0 12%; }
  @media screen and (max-width: 520px) {
    .Detail {
      padding: 22% 0; } }
  .Detail .Detail_container {
    position: relative;
    margin: 0 auto;
    width: 87.5vw; }
    .Detail .Detail_container .Detail_head {
      display: flex;
      flex-direction: column;
      margin-bottom: 4%; }
      .Detail .Detail_container .Detail_head .title {
        font-size: 24px;
        font-weight: bold; }
        @media screen and (max-width: 520px) {
          .Detail .Detail_container .Detail_head .title {
            font-size: 24px;
            margin-bottom: 4%; } }
      .Detail .Detail_container .Detail_head .date {
        font-size: 14px;
        font-family: "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
        font-weight: bold; }
    .Detail .Detail_container .Detail_body {
      position: relative;
      background-color: #fff;
      padding: 4%; }
      .Detail .Detail_container .Detail_body .category_head {
        color: #555;
        font-size: 12px;
        border-bottom: solid 1px #555;
        padding: 1% 0; }
      .Detail .Detail_container .Detail_body .category {
        padding: 1% 0; }
        @media screen and (max-width: 520px) {
          .Detail .Detail_container .Detail_body .category {
            padding: 4% 0; } }
        .Detail .Detail_container .Detail_body .category ul {
          display: flex;
          justify-content: flex-start; }
          .Detail .Detail_container .Detail_body .category ul #tag {
            border-radius: 4px;
            margin: 0 4px;
            transition: .3s ease; }
            .Detail .Detail_container .Detail_body .category ul #tag object a {
              font-size: 14px;
              padding: 2px 8px;
              color: #fff;
              pointer-events: none; }
          .Detail .Detail_container .Detail_body .category ul .blue {
            background-color: #3D7DF5; }
          .Detail .Detail_container .Detail_body .category ul .yellow {
            background-color: #c09f6c; }
          .Detail .Detail_container .Detail_body .category ul .red {
            background-color: #F26835; }
      .Detail .Detail_container .Detail_body .post {
        margin-top: 6%; }

footer {
  background-color: #688AB8;
  display: flex; }
  @media screen and (max-width: 520px) {
    footer {
      flex-direction: column; } }
  footer .footer-left {
    width: 70%;
    background-color: #F5F4EF;
    padding: 20px; }
    @media screen and (max-width: 520px) {
      footer .footer-left {
        width: 100%; } }
    footer .footer-left h2 {
      display: block;
      text-align: center;
      margin-bottom: 4%; }
      footer .footer-left h2 span {
        position: relative;
        font-size: 4.8vw;
        font-weight: bold;
        margin: 0 auto 4%;
        display: inline-block;
        text-align: center; }
        @media screen and (max-width: 520px) {
          footer .footer-left h2 span {
            font-size: 8vw; } }
        footer .footer-left h2 span::before {
          position: absolute;
          content: "";
          bottom: 0;
          background-color: #688AB8;
          height: 2px;
          width: 100%; }
    footer .footer-left .button {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: #555;
      width: 200px;
      height: 40px;
      margin: auto;
      text-align: center;
      font-weight: bold;
      font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
      border-radius: 20px; }
  footer .footer-right {
    padding: 20px;
    width: 30%;
    background-color: #688AB8;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; }
    @media screen and (max-width: 520px) {
      footer .footer-right {
        width: 100%; } }
    footer .footer-right .link {
      color: #fff;
      margin-bottom: 10px; }
    footer .footer-right .copyright {
      color: #fff; }

/*# sourceMappingURL=style.css.map */