@charset "UTF-8";
a.th90-fixbtn {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2vw;
  margin: auto;
  width: 90%;
  z-index: 12;
}
@media screen and (min-width: 768px) {
  a.th90-fixbtn {
    width: 227px;
    left: auto;
    right: 30px;
    bottom: 30px;
    transition: all 0.3s;
  }
  a.th90-fixbtn:hover {
    transform: scale(1.06);
    opacity: 0.8;
  }
}

/*90周年追従ボタン追加時にページ下部調整*/
footer div.footer-area02 {
  padding: 10% 0 25%;
}
@media screen and (min-width: 768px) {
  footer div.footer-area02 {
    padding: 40px 0 100px;
  }
}

main {
  overflow: clip;
}

div.top-logo-bg {
  position: absolute;
  pointer-events: none;
}
div.top-logo-bg.top-logo-bg01 {
  width: 60%;
  top: 5%;
  right: -26%;
}
@media screen and (min-width: 768px) {
  div.top-logo-bg.top-logo-bg01 {
    width: 300px;
    right: auto;
    left: -150px;
    top: auto;
    bottom: -100px;
  }
}
@media screen and (min-width: 1280px) {
  div.top-logo-bg.top-logo-bg01 {
    width: 331px;
    left: -200px;
    bottom: -150px;
  }
}
div.top-logo-bg.top-logo-bg02 {
  width: 60%;
  top: -17%;
  right: -26%;
}
@media screen and (min-width: 768px) {
  div.top-logo-bg.top-logo-bg02 {
    width: 300px;
    right: -140px;
    top: 0;
    z-index: 2;
  }
}
@media screen and (min-width: 1280px) {
  div.top-logo-bg.top-logo-bg02 {
    width: 331px;
    right: -340px;
    top: 0;
  }
}
div.top-logo-bg.top-logo-bg03 {
  width: 60%;
  top: -5%;
  left: -35%;
}
@media screen and (min-width: 768px) {
  div.top-logo-bg.top-logo-bg03 {
    width: 600px;
    left: -400px;
    top: -200px;
  }
}
@media screen and (min-width: 1280px) {
  div.top-logo-bg.top-logo-bg03 {
    width: 794px;
    left: -600px;
    top: -250px;
  }
}
@media screen and (min-width: 768px) {
  div.top-logo-bg.top-logo-bg04 {
    width: 600px;
    right: -320px;
    top: 350px;
  }
}
@media screen and (min-width: 1280px) {
  div.top-logo-bg.top-logo-bg04 {
    width: 794px;
    right: -600px;
    top: 350px;
  }
}

div.hero-area {
  height: 133.336vw;
  position: relative;
  z-index: -1;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  div.hero-area {
    height: 54.78vw;
  }
}

div.hero-txt-box {
  position: relative;
  background: #fff;
  z-index: 10;
}

div.hero-txt-slide-wrap {
  overflow: hidden;
  z-index: 10;
  position: relative;
  transform: translate(0, -80%);
}
div.hero-txt-slide-wrap div.hero-txt-slide div.swiper-wrapper {
  transition-timing-function: linear;
}

.slider {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.slider__inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.slider canvas {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div.op-area {
  background: #fff;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
          clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
  animation: op02 1.6s 2.2s cubic-bezier(0.68, 0, 0.19, 0.99) forwards;
  /*----正方形ver----*/
  /*@keyframes op02 {
    0%{
      clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
    }
    35%{
      clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    }
    45%{
      clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    }
    100%{
      clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
    }
  }*/
}
@keyframes op02 {
  0% {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
            clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
  }
  35% {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 15%, 75% 15%, 75% 85%, 25% 85%, 25% 100%, 100% 100%, 100% 0%);
            clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 15%, 75% 15%, 75% 85%, 25% 85%, 25% 100%, 100% 100%, 100% 0%);
  }
  45% {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 15%, 75% 15%, 75% 85%, 25% 85%, 25% 100%, 100% 100%, 100% 0%);
            clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 15%, 75% 15%, 75% 85%, 25% 85%, 25% 100%, 100% 100%, 100% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
            clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
  }
}
div.op-area div.logo-img {
  position: absolute;
  width: 283px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: op01 1.5s 1.8s ease forwards;
  overflow: hidden;
}
@keyframes op01 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.3);
  }
}
div.op-area div.logo-img img {
  position: relative;
  transform: translate(0, 100%);
  animation: op01-img 0.3s 1s cubic-bezier(0.68, 0, 0.19, 0.99) forwards;
}
@keyframes op01-img {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
div.op-area div.logo-img02 {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  overflow: hidden;
}
div.op-area div.logo-img02 img {
  position: relative;
}

div.hero-area {
  animation: op03 1s 1.8s cubic-bezier(0.68, 0, 0.19, 0.99) forwards;
}
@keyframes op03 {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

h2.top-cm-title {
  position: relative;
  z-index: 2;
  margin: 0 0 2em;
  -webkit-clip-path: ellipse(0% 0 at 50% 100%);
          clip-path: ellipse(0% 0 at 50% 100%);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  h2.top-cm-title {
    margin: 0 0 40px;
  }
}
h2.top-cm-title span {
  display: block;
  line-height: 1em;
}
h2.top-cm-title span.txt01 {
  text-align: center;
  font-size: 10.8vw;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  h2.top-cm-title span.txt01 {
    font-size: 60px;
  }
}
@media screen and (min-width: 1000px) {
  h2.top-cm-title span.txt01 {
    font-size: 70px;
  }
}
@media screen and (min-width: 1280px) {
  h2.top-cm-title span.txt01 {
    font-size: 79px;
  }
}
h2.top-cm-title span.txt01 span {
  display: inline-block;
  opacity: 0;
}
h2.top-cm-title span.txt02 {
  text-align: center;
  font-weight: 500;
  margin: 0.4em 0 0;
}
@media screen and (min-width: 768px) {
  h2.top-cm-title span.txt02 {
    font-size: 14px;
    margin: 1em 0 0;
  }
}
@media screen and (min-width: 1000px) {
  h2.top-cm-title span.txt02 {
    font-size: 16px;
  }
}
@media screen and (min-width: 1280px) {
  h2.top-cm-title span.txt02 {
    font-size: 20px;
  }
}

.top-cm-txt01 {
  text-align: justify;
  word-break: break-all;
  font-weight: 300;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 768px) {
  .top-cm-txt01 {
    font-size: 14px;
    line-height: 2em;
  }
}
@media screen and (min-width: 1000px) {
  .top-cm-txt01 {
    font-size: 16px;
  }
}

section.sec-about {
  padding: 0 0 20%;
}
@media screen and (min-width: 768px) {
  section.sec-about {
    padding: 0 0 180px;
  }
}
section.sec-about div.sec-about-inner {
  width: 85.2%;
  margin: auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner {
    width: 90%;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.txt-box {
    width: 40%;
  }
}
section.sec-about div.sec-about-inner div.txt-box h2.top-cm-title {
  width: 50%;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.txt-box h2.top-cm-title {
    width: 230px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-about div.sec-about-inner div.txt-box h2.top-cm-title {
    width: 250px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-about div.sec-about-inner div.txt-box h2.top-cm-title {
    width: 300px;
  }
}
section.sec-about div.sec-about-inner div.txt-box h2.top-cm-title span {
  text-align: left;
}
section.sec-about div.sec-about-inner div.txt-box p.about-copy {
  font-size: 1.28em;
  line-height: 1.8em;
  font-weight: 500;
  margin: 0 0 1em;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.txt-box p.about-copy {
    font-size: 28px;
    line-height: 1.6em;
    margin: 0 0 0.4em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-about div.sec-about-inner div.txt-box p.about-copy {
    font-size: 32px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-about div.sec-about-inner div.txt-box p.about-copy {
    font-size: 38px;
  }
}
section.sec-about div.sec-about-inner div.link-box {
  margin: 10% 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box {
    width: 52%;
    margin: 0;
  }
}
section.sec-about div.sec-about-inner div.link-box a {
  display: block;
  position: relative;
  margin-bottom: 5%;
  overflow: hidden;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box a {
    transform: translate(100px, 200px);
  }
  section.sec-about div.sec-about-inner div.link-box a:hover span.arrow-wrap span {
    transform: translate(100%, 0);
  }
  section.sec-about div.sec-about-inner div.link-box a:hover picture::after {
    transform: scale(0.7);
  }
  section.sec-about div.sec-about-inner div.link-box a:hover picture img {
    transform: scale(1.12);
  }
}
section.sec-about div.sec-about-inner div.link-box a picture {
  display: block;
  position: relative;
}
section.sec-about div.sec-about-inner div.link-box a picture::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #231815;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transition: 0.3s ease;
}
section.sec-about div.sec-about-inner div.link-box a picture img {
  transition: 0.3s ease;
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 2;
  width: 100%;
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p {
  text-align: center;
  color: #fff;
  margin-top: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p {
    margin-top: 6%;
  }
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p span {
  display: block;
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p span.txt01 {
  font-size: 2.14em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p span.txt01 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p span.txt01 {
    font-size: 54px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box a div.link-box-inner p span.txt02 {
    font-size: 16px;
    margin: 1em 0 0;
  }
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner span.arrow-wrap {
  display: block;
  position: relative;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box a div.link-box-inner span.arrow-wrap {
    overflow: hidden;
    width: 42px;
    border-radius: 50em;
    z-index: 0;
  }
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner span.arrow-wrap span {
  display: block;
  width: 42px;
  margin: auto;
  transition: all 0.3s;
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner span.arrow-wrap span img {
  width: 36px;
  margin: 0 0 0 auto;
}
section.sec-about div.sec-about-inner div.link-box a div.link-box-inner span.arrow-wrap span:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: -42px;
  display: none;
}
@media screen and (min-width: 768px) {
  section.sec-about div.sec-about-inner div.link-box a div.link-box-inner span.arrow-wrap span:nth-of-type(2) {
    display: block;
  }
}

section.sec-message {
  padding: 0 0 20%;
}
@media screen and (min-width: 768px) {
  section.sec-message {
    padding: 0 0 175px;
  }
}
section.sec-message a.top-message-img {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 0 20%;
}
@media screen and (min-width: 768px) {
  section.sec-message a.top-message-img {
    margin: 0 0 120px;
  }
}
section.sec-message a.top-message-img img {
  transform: scale(0.92);
  /* SPの長押し禁止 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}
section.sec-message h2 {
  width: 100%;
  text-align: center;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec-message h2 {
    width: 600px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-message h2 span.txt01 span:nth-of-type(5) {
    margin-right: 0.2em;
  }
}
section.sec-message h2 span.txt02 {
  margin: 1em 0 0;
}
section.sec-message p.message-copy {
  text-align: center;
  font-size: 1.28em;
  line-height: 1.8em;
  font-weight: 500;
  margin: 10% 0 1em;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  section.sec-message p.message-copy {
    font-size: 28px;
    line-height: 1.6em;
    margin: 40px 0 0.4em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message p.message-copy {
    font-size: 32px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-message p.message-copy {
    font-size: 38px;
  }
}
section.sec-message p.top-cm-txt01 {
  text-align: center;
}
section.sec-message a {
  margin: 10% auto 0;
}
@media screen and (min-width: 768px) {
  section.sec-message a {
    margin: 40px auto 0;
  }
}

@media screen and (min-width: 768px) {
  section.sec-uniform {
    overflow: clip;
  }
}
section.sec-uniform div.sec-uniform-inner {
  width: 85.4%;
  margin: 0 auto;
  border-radius: 1em;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner {
    width: 90%;
    max-width: 950px;
    margin: 0 auto 50px;
  }
}
section.sec-uniform div.sec-uniform-inner h2 {
  width: 100%;
  margin: 0;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner h2 {
    height: 120px;
  }
}
section.sec-uniform div.sec-uniform-inner div.uniform-txt-box {
  margin-top: 120%;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner div.uniform-txt-box {
    width: 50%;
    margin: 0;
    opacity: 1 !important;
  }
}
section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt01 {
  line-height: 1.6em;
  margin-bottom: 1em;
  font-size: 1.28em;
  letter-spacing: 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt01 {
    text-align: left;
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt01 {
    font-size: 23px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt01 {
    font-size: 28px;
  }
}
section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt02 {
  width: 81.2%;
  margin: auto;
  font-size: 1em;
  line-height: 2em;
  margin-bottom: 30px;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt02 {
    width: 100%;
    font-size: 1.8vw;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-uniform div.sec-uniform-inner div.uniform-txt-box p.txt02 {
    font-size: 15px;
  }
}
section.sec-uniform div.sec-uniform-inner .sticky-container {
  height: auto;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner .sticky-container {
    /*margin-bottom: 100px;*/
  }
}
section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 250vw;
  margin: auto;
  padding-top: 50vw;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item {
    padding-top: 300px;
    height: 90vh;
  }
}
section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item01::after {
  content: "";
  display: block;
  width: 100%;
  height: 85%;
  background: #d4e3e8;
  position: absolute;
  top: 15vw;
  left: 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item01::after {
    top: 50px;
    width: 115%;
    height: 800px;
    left: 50%;
    transform: translate(-50%, 0);
    transform: translate(-50%, 0) scale(0);
  }
}
section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item01 h2 {
  position: absolute;
  right: 0;
  top: 20vw;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item01 h2 {
    top: 140px;
  }
}
section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item01 div.slide-img {
  position: absolute;
  top: 50vw;
  left: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item01 div.slide-img {
    top: 300px;
    left: auto;
  }
}
section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item02, section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item.item03 {
  pointer-events: none;
}
section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item div.slide-img {
  width: 85.8%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner .sticky-container .sticky-item div.slide-img {
    width: 40%;
    margin: 0 0 0 auto;
  }
}
section.sec-uniform div.sec-uniform-inner a {
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec-uniform div.sec-uniform-inner a {
    margin: 0;
  }
}

section.sec-service div.sec-service-inner {
  width: 85.2%;
  margin: auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-service div.sec-service-inner {
    width: 90%;
    max-width: 975px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-service h2.top-cm-title {
    margin: 0 0 70px;
  }
}
section.sec-service div.service-box-wrap {
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-service div.service-box-wrap div.service-box {
    width: 43%;
    margin: 0 0 40% auto;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-service div.service-box-wrap div.service-box {
    width: 420px;
  }
}
section.sec-service div.service-box-wrap div.service-box div.txt-box p.service-copy {
  font-size: 1.28em;
  font-weight: 500;
  line-height: 1.8em;
  margin: 0 0 1em;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  section.sec-service div.service-box-wrap div.service-box div.txt-box p.service-copy {
    font-size: 2.5vw;
    line-height: 1.6em;
    margin: 0 0 0.4em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-service div.service-box-wrap div.service-box div.txt-box p.service-copy {
    font-size: 25px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-service div.service-box-wrap div.service-box div.txt-box p.service-copy {
    font-size: 28px;
  }
}
section.sec-service div.service-box-wrap div.service-box div.img-wrap {
  margin: 10% 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-service div.service-box-wrap div.service-box div.img-wrap {
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
}
section.sec-service div.service-box-wrap div.service-box div.img-wrap div.service-img {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  section.sec-service div.service-box-wrap div.service-box div.img-wrap div.service-img {
    transform: translate(-100px, 200px);
  }
}
section.sec-service div.service-box-wrap div.service-box a {
  margin: 15% auto 0;
}
@media screen and (min-width: 768px) {
  section.sec-service div.service-box-wrap div.service-box a {
    margin: 45px 0 0;
  }
}

section.sec-company {
  padding: 25% 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-company {
    padding: 110px 0 0;
  }
}
section.sec-company div.sec-company-inner {
  width: 85.2%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec-company div.sec-company-inner {
    width: 90%;
    max-width: 820px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
section.sec-company div.company-box p {
  text-align: center;
  font-size: 1.28em;
  line-height: 1.6em;
  margin: 0 0 1em;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box p {
    text-align: left;
    writing-mode: vertical-rl;
    width: 170px;
    font-size: 24px;
    margin-top: 0.8em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-company div.company-box p {
    font-size: 28px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul {
    width: calc(100% - 230px);
  }
}
section.sec-company div.company-box ul li a {
  display: block;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: #111;
  padding: 1.2em 0;
  border-bottom: solid 1px #111;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul li a {
    padding: 1.4em 0 1em;
    transition: all 0.3s;
    /*&::after{
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #d4e3e8;
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      transform: scalex(0);
      transform-origin: left;
      transition: all 0.3s;
    }*/
  }
  section.sec-company div.company-box ul li a:hover::after {
    transform: scalex(1);
  }
  section.sec-company div.company-box ul li a:hover span.autospan span {
    transform: translate(0, -110%);
  }
  section.sec-company div.company-box ul li a:hover span.arrow-wrap {
    transform: scale(1.3);
  }
  section.sec-company div.company-box ul li a:hover span.arrow-wrap::after {
    background: #14b9d7;
  }
  section.sec-company div.company-box ul li a:hover span.arrow-wrap span {
    transform: translate(100%, 0);
  }
}
section.sec-company div.company-box ul li a span.btn-txt-wrap {
  display: block;
  font-weight: 400;
  line-height: 1em;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul li a span.btn-txt-wrap {
    height: 1em;
    font-size: 17px;
    letter-spacing: 0;
    overflow: hidden;
  }
}
section.sec-company div.company-box ul li a span.btn-txt-wrap span.autospan {
  display: block;
}
section.sec-company div.company-box ul li a span.btn-txt-wrap span.autospan:nth-of-type(2) {
  display: none;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul li a span.btn-txt-wrap span.autospan:nth-of-type(2) {
    display: block;
  }
}
section.sec-company div.company-box ul li a span.btn-txt-wrap span.autospan span {
  display: inline-block;
  transition: all 0.3s;
  transition-delay: calc(0.02s * var(--text-index));
}
section.sec-company div.company-box ul li a span.arrow-wrap {
  display: block;
  position: relative;
  z-index: 0;
  border-radius: 50em;
  overflow: hidden;
  width: 1.6em;
  height: 1.6em;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul li a span.arrow-wrap {
    width: 26px;
    height: 26px;
    transition: all 0.3s;
  }
}
section.sec-company div.company-box ul li a span.arrow-wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #111;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s;
}
section.sec-company div.company-box ul li a span.arrow-wrap span {
  display: block;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul li a span.arrow-wrap span {
    width: 26px;
    height: 26px;
    transition: all 0.3s;
  }
}
section.sec-company div.company-box ul li a span.arrow-wrap span:nth-of-type(2) {
  display: none;
}
@media screen and (min-width: 768px) {
  section.sec-company div.company-box ul li a span.arrow-wrap span:nth-of-type(2) {
    display: block;
    position: absolute;
    top: 0;
    left: -26px;
  }
}

div.link-area {
  width: 85.2%;
  margin: 20% auto;
}
@media screen and (min-width: 768px) {
  div.link-area {
    width: 90%;
    max-width: 1025px;
    margin: 110px auto 145px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
div.link-area a {
  display: block;
  border: solid 1px #c0c0c0;
  text-align: center;
  color: #111;
  margin: 0 0 5%;
  position: relative;
}
@media screen and (min-width: 768px) {
  div.link-area a {
    width: 49%;
    margin: 0;
    overflow: hidden;
    /*&:hover{
      &::after{
        transform: translate(-100%,100%);
      }
    }*/
  }
}
@media screen and (min-width: 1000px) {
  div.link-area a {
    width: 48%;
  }
}
div.link-area a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.6em;
  height: 1.6em;
  background: #bebebe;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
          clip-path: polygon(0 0, 0% 100%, 100% 100%);
  transition: all 0.3s;
}
div.link-area a:nth-of-type(1) {
  padding: 10% 0 7%;
}
@media screen and (min-width: 768px) {
  div.link-area a:nth-of-type(1) {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
div.link-area a:nth-of-type(1):hover span.cm-btn {
  background: #fff;
}
div.link-area a:nth-of-type(1):hover span.autospan span {
  transform: translate(0, -100%);
}
div.link-area a:nth-of-type(1):hover span.arrow-wrap span {
  transform: translate(100%, 0);
}
@media screen and (min-width: 768px) {
  div.link-area a:nth-of-type(2) {
    overflow: hidden;
  }
  div.link-area a:nth-of-type(2):hover img {
    transform: scale(1.04);
  }
  div.link-area a:nth-of-type(2) img {
    transition: all 0.3s;
  }
}
div.link-area a span.cm-btn {
  border: none;
  margin: 0 auto 0 15%;
}
@media screen and (min-width: 768px) {
  div.link-area a span.cm-btn {
    margin: 0 auto;
  }
}
div.link-area a img {
  /* SPの長押し禁止 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}
div.link-area p.txt01 {
  font-size: 2.14em;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  div.link-area p.txt01 {
    font-size: 4vw;
  }
}
@media screen and (min-width: 1000px) {
  div.link-area p.txt01 {
    font-size: 39px;
  }
}
div.link-area p.txt02 {
  margin: 1em 0;
}
@media screen and (min-width: 768px) {
  div.link-area p.txt02 {
    font-size: 10px;
    line-height: 2em;
    margin: 2vw 0 0.6em;
  }
}
@media screen and (min-width: 1000px) {
  div.link-area p.txt02 {
    font-size: 13px;
    margin: 2em 0 0.6em;
  }
}/*# sourceMappingURL=style.css.map */