@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap");
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: .5; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*上から下*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FF5355;
  /*伸びる背景色の設定*/ }

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0); }
  50% {
    transform-origin: top;
    transform: scaleY(1); }
  50.001% {
    transform-origin: bottom; }
  100% {
    transform-origin: bottom;
    transform: scaleY(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger {
  opacity: 0;
  animation-duration: 1s; }

/*
* common setting
* @include var(tab) @include var(pc) 
*/
body {
  overflow: visible; }

body, p, h1, h2, h3, ul, li, dt, dd, a {
  font-family: 'Noto Sans JP', sans-serif;
  color: #222222;
  margin: 0; }

a:hover {
  color: #FF5355; }

::selection {
  color: white;
  background-color: #FF5355; }

.bp-pc {
  margin: 0 auto; }
  @media screen and (max-width: 1023px) {
    .bp-pc {
      display: none; } }
  @media screen and (max-width: 599px) {
    .bp-pc {
      display: none; } }

.bp-tab {
  display: none; }
  @media screen and (max-width: 1023px) {
    .bp-tab {
      display: inherit; } }
  @media screen and (max-width: 599px) {
    .bp-tab {
      display: none; } }

.bp-sp {
  display: none; }
  @media screen and (max-width: 1023px) {
    .bp-sp {
      display: none; } }
  @media screen and (max-width: 599px) {
    .bp-sp {
      display: inherit; } }

/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #FF5355;
  z-index: 9999999;
  text-align: center;
  color: #fff; }

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg {
  display: none; }

body.appear .splashbg {
  display: block;
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 50%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translateX(-300%) skewX(-45deg);
  background-color: #FF5355;
  /*伸びる背景色の設定*/ }

@keyframes PageAnime {
  0% {
    transform-origin: left;
    transform: translateX(-300%) skewX(-45deg); }
  100% {
    transform-origin: left;
    transform: translateX(500%) skewX(-45deg); } }
/*画面遷移の後現れるコンテンツ設定*/
.wrap {
  opacity: 0;
  /*はじめは透過0に*/ }

/*bodyにappearクラスがついたら出現*/
body.appear .wrap {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes PageAnimeAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/** section area start**/
section {
  width: 1024px;
  margin: 0 auto; }
  @media screen and (max-width: 1023px) {
    section {
      width: 556px; } }
  @media screen and (max-width: 599px) {
    section {
      width: 70%; } }
  section h2 {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    margin-bottom: 30px;
    position: relative;
    display: block; }
    @media screen and (max-width: 1023px) {
      section h2 {
        margin-bottom: 20px; } }
    section h2::before {
      content: "";
      width: 2px;
      height: 106px;
      background-color: #FF5355;
      transform: rotate(15deg);
      display: block;
      position: absolute;
      top: -50px;
      left: -30px; }
  section h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px; }
  section p {
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    color: #565656; }

/** keyvisual section start **/
#keyvisual {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 768px;
  background-image: url("../img/showcase.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: visible; }
  @media screen and (max-width: 1023px) {
    #keyvisual {
      background-image: url("../img/showcase_tab.jpg");
      height: 512px;
      transition: opacity 2s,transform 2s; } }
  @media screen and (max-width: 599px) {
    #keyvisual {
      background-image: url("../img/showcase_sp.jpg");
      height: 667px;
      transition: opacity 2s,transform 2s; } }

/** image section start**/
.image-area, .image-area2 {
  width: 100%;
  padding: 0 0;
  margin: 0; }
  .image-area section, .image-area2 section {
    width: 100%;
    margin: 0;
    padding: 0; }
    .image-area section .contents-wrap, .image-area2 section .contents-wrap {
      width: 100%;
      margin: 0;
      padding: 0; }
      .image-area section .contents-wrap figure, .image-area2 section .contents-wrap figure {
        width: 100%;
        margin: 0;
        padding: 0; }
        .image-area section .contents-wrap figure img, .image-area2 section .contents-wrap figure img {
          width: 100%; }
          @media screen and (max-width: 599px) {
            .image-area section .contents-wrap figure img, .image-area2 section .contents-wrap figure img {
              width: 80%;
              margin: 0 auto; } }

/** header section start  **/
header {
  width: 100%;
  padding: 55px 55px;
  position: fixed;
  top: 0;
  z-index: 5000;
  box-sizing: border-box; }
  @media screen and (max-width: 1023px) {
    header {
      padding: 26px 30px; } }
  @media screen and (max-width: 599px) {
    header {
      padding: 26px 30px; } }
  header h1 {
    color: #0000;
    line-height: 0;
    margin: 0;
    height: 1px;
    font-size: 0px; }
  header figure {
    margin: 0;
    padding: 0; }
  header nav {
    display: inline-block; }
  header .header-wrap {
    display: table;
    width: 100%; }
    header .header-wrap .header-logo, header .header-wrap .header-nav {
      display: table-cell;
      vertical-align: top; }
    header .header-wrap .header-logo {
      width: 30%; }
      @media screen and (max-width: 1023px) {
        header .header-wrap .header-logo img {
          width: 130px;
          height: 30px; } }
    header .header-wrap .header-nav {
      width: 70%;
      text-align: right; }
      header .header-wrap .header-nav ul {
        margin: 0;
        display: table;
        text-align: right; }
        @media screen and (max-width: 599px) {
          header .header-wrap .header-nav ul {
            display: none; } }
        header .header-wrap .header-nav ul li {
          list-style: none;
          display: table-cell;
          font-family: 'Inter', sans-serif;
          font-size: 14px;
          font-weight: normal;
          padding: 15px; }
          @media screen and (max-width: 1023px) {
            header .header-wrap .header-nav ul li {
              padding: 5px; } }
          header .header-wrap .header-nav ul li a {
            color: #000000;
            text-decoration: none;
            padding-bottom: 5px;
            position: relative;
            display: inline;
            margin-left: 50px; }
          header .header-wrap .header-nav ul li a {
            background: linear-gradient(to right, #56565600, #56565600), linear-gradient(to right, #ffc7c7, #ff7b7c, #ff2a2d);
            background-size: 100% 1px, 0 1px;
            background-position: 100% 100%, 0 100%;
            background-repeat: no-repeat;
            transition: background-size 400ms; }
          header .header-wrap .header-nav ul li a:hover {
            background-size: 0 2px, 100% 2px; }

/** message section start**/
#message,
#business {
  padding: 200px 0 200px; }
  @media screen and (max-width: 1023px) {
    #message,
    #business {
      padding: 115px 0; } }
  #message section,
  #business section {
    display: table; }
    #message section .contents-wrap,
    #business section .contents-wrap {
      display: table-cell; }
      @media screen and (max-width: 1023px) {
        #message section .contents-wrap,
        #business section .contents-wrap {
          display: contents; } }
      #message section .contents-wrap:first-child,
      #business section .contents-wrap:first-child {
        width: 350px; }
        @media screen and (max-width: 1023px) {
          #message section .contents-wrap:first-child,
          #business section .contents-wrap:first-child {
            width: 100%; } }
      @media screen and (max-width: 1023px) {
        #message section .contents-wrap:last-child,
        #business section .contents-wrap:last-child {
          margin-top: 50px;
          display: block; } }

/** about section start**/
#about {
  padding: 150px 0 420px;
  position: relative;
  display: block; }
  @media screen and (max-width: 1023px) {
    #about {
      padding: 150px 0 0; } }
  #about section {
    display: table; }
    @media screen and (max-width: 599px) {
      #about section {
        display: block; } }
    #about section .contents-wrap {
      display: table-cell; }
      @media screen and (max-width: 1023px) {
        #about section .contents-wrap {
          display: block; } }
      #about section .contents-wrap:first-child {
        width: 470px; }
        @media screen and (max-width: 599px) {
          #about section .contents-wrap:first-child {
            width: auto; } }
      #about section .contents-wrap:last-child {
        padding: 40px;
        background-color: white; }
        @media screen and (max-width: 1023px) {
          #about section .contents-wrap:last-child {
            padding: 0;
            margin: 45px 0 80px; } }
        #about section .contents-wrap:last-child dl {
          display: table;
          width: 100%;
          line-height: 16px;
          margin: 0;
          padding: 0;
          padding-bottom: 30px; }
          #about section .contents-wrap:last-child dl:last-child {
            padding-bottom: 0px; }
          #about section .contents-wrap:last-child dl dt, #about section .contents-wrap:last-child dl dd {
            display: table-cell;
            font-size: 14px;
            line-height: 16px;
            color: #565656; }
            @media screen and (max-width: 599px) {
              #about section .contents-wrap:last-child dl dt, #about section .contents-wrap:last-child dl dd {
                display: block; } }
          #about section .contents-wrap:last-child dl dt {
            width: 112px;
            font-weight: bold; }
            @media screen and (max-width: 599px) {
              #about section .contents-wrap:last-child dl dt {
                margin-bottom: 10px; } }
  #about .about-image {
    width: 800px;
    height: 480px;
    margin: 0;
    padding: 0px;
    position: absolute;
    z-index: -1;
    left: 5vw;
    top: 360px; }
    @media screen and (max-width: 1023px) {
      #about .about-image {
        width: 100%;
        position: relative;
        top: 0;
        left: 0; } }
    @media screen and (max-width: 599px) {
      #about .about-image {
        width: 100%;
        height: 234px; } }
    #about .about-image figure {
      margin: 0; }
      #about .about-image figure img {
        width: 100%; }
    #about .about-image .bgUDextend::before {
      height: 480px; }

/** business section start**/
#business {
  padding: 160px 0 160px;
  position: relative;
  display: block; }
  @media screen and (max-width: 1023px) {
    #business {
      padding: 220px 0 100px; } }
  @media screen and (max-width: 599px) {
    #business {
      padding: 150px 0 100px; } }
  #business .cta-btn {
    margin-top: 20px; }
    #business .cta-btn:last-child .bgUDextend::before {
      width: 200px; }
    #business .cta-btn a {
      font-size: 14px;
      font-weight: bold;
      color: #222222;
      text-decoration: none;
      padding-bottom: 5px;
      position: relative;
      display: inline; }
      #business .cta-btn a:after {
        content: "";
        background-image: url("../img/arrow.svg");
        background-repeat: no-repeat;
        position: absolute;
        width: 12px;
        height: 15px;
        right: -30px;
        top: 5px; }
    #business .cta-btn a {
      background: linear-gradient(to right, #000000, #000000), linear-gradient(to right, #ffc7c7, #ff7b7c, #ff2a2d);
      background-size: 100% 1px, 0 1px;
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      transition: background-size 400ms; }
    #business .cta-btn a:hover {
      background-size: 0 2px, 100% 2px; }
  #business .business-image {
    text-align: center;
    margin-top: 115px; }
    #business .business-image .bgUDextend::before {
      height: 560px; }

/** contact section start　**/
#contact {
  padding: 200px 0 200px; }
  @media screen and (max-width: 1023px) {
    #contact {
      padding: 150px 0 100px; } }
  @media screen and (max-width: 599px) {
    #contact {
      padding: 150px 0 60px; } }
  #contact section {
    display: table; }
    @media screen and (max-width: 599px) {
      #contact section {
        display: block; } }
    #contact section .contents-wrap {
      display: table-cell; }
      @media screen and (max-width: 1023px) {
        #contact section .contents-wrap {
          display: block; } }
      #contact section .contents-wrap:first-child {
        width: 470px; }
        @media screen and (max-width: 1023px) {
          #contact section .contents-wrap:first-child {
            width: 100%; } }
        #contact section .contents-wrap:first-child p {
          margin-top: 40px;
          font-size: 14px;
          color: #565656; }
      #contact section .contents-wrap .contact-table dl {
        display: table;
        margin-bottom: 30px; }
        @media screen and (max-width: 599px) {
          #contact section .contents-wrap .contact-table dl {
            margin-bottom: 30px; } }
        #contact section .contents-wrap .contact-table dl dt, #contact section .contents-wrap .contact-table dl dd {
          display: table-cell;
          font-size: 14px;
          font-weight: normal;
          color: #565656; }
          @media screen and (max-width: 599px) {
            #contact section .contents-wrap .contact-table dl dt, #contact section .contents-wrap .contact-table dl dd {
              display: block;
              width: 100%; } }
        #contact section .contents-wrap .contact-table dl dt {
          width: 430px; }
          @media screen and (max-width: 599px) {
            #contact section .contents-wrap .contact-table dl dt {
              margin-bottom: 10px;
              width: inherit; } }
        #contact section .contents-wrap .contact-table dl dd a {
          font-size: 14px;
          font-weight: normal;
          color: #222222;
          text-decoration: none;
          padding-bottom: 5px;
          position: relative;
          display: inline; }
        #contact section .contents-wrap .contact-table dl dd a {
          background: linear-gradient(to right, #565656, #565656), linear-gradient(to right, #ffc7c7, #ff7b7c, #ff2a2d);
          background-size: 100% 1px, 0 1px;
          background-position: 100% 100%, 0 100%;
          background-repeat: no-repeat;
          transition: background-size 400ms; }
        #contact section .contents-wrap .contact-table dl dd a:hover {
          background-size: 0 2px, 100% 2px; }

/** footer section start **/
footer {
  padding: 80px 60px;
  border-top: solid 1px #D9D9D9; }
  @media screen and (max-width: 1023px) {
    footer {
      padding: 50px 60px; } }
  footer figure {
    margin: 0; }
  footer .footer-wrap {
    width: 100%;
    display: table; }
    footer .footer-wrap .contents-wrap {
      display: table-cell; }
      @media screen and (max-width: 1023px) {
        footer .footer-wrap .contents-wrap {
          display: block;
          text-align: center; } }
      footer .footer-wrap .contents-wrap:first-child p {
        font-size: 14px;
        color: #565656;
        margin-top: 30px; }
        @media screen and (max-width: 1023px) {
          footer .footer-wrap .contents-wrap:first-child p {
            margin-top: 10px; } }
      footer .footer-wrap .contents-wrap:last-child ul {
        text-align: right; }
        @media screen and (max-width: 1023px) {
          footer .footer-wrap .contents-wrap:last-child ul {
            text-align: center;
            margin: 55px 0; } }
        @media screen and (max-width: 599px) {
          footer .footer-wrap .contents-wrap:last-child ul {
            padding: 0px;
            margin: 35px 0; } }
        footer .footer-wrap .contents-wrap:last-child ul li {
          display: inline;
          margin-left: 25px; }
          @media screen and (max-width: 599px) {
            footer .footer-wrap .contents-wrap:last-child ul li {
              display: block;
              margin-left: 0px;
              margin-top: 20px; } }
          footer .footer-wrap .contents-wrap:last-child ul li:first-child {
            margin-left: 0px; }
            @media screen and (max-width: 599px) {
              footer .footer-wrap .contents-wrap:last-child ul li:first-child {
                margin-top: 0px; } }
          footer .footer-wrap .contents-wrap:last-child ul li a {
            font-size: 14px;
            font-weight: normal;
            color: #565656;
            text-decoration: none;
            padding-bottom: 5px;
            position: relative;
            display: inline; }
          footer .footer-wrap .contents-wrap:last-child ul li a {
            background: linear-gradient(to right, #565656, #565656), linear-gradient(to right, #ffc7c7, #ff7b7c, #ff2a2d);
            background-size: 100% 1px, 0 1px;
            background-position: 100% 100%, 0 100%;
            background-repeat: no-repeat;
            transition: background-size 400ms; }
          footer .footer-wrap .contents-wrap:last-child ul li a:hover {
            background-size: 0 2px, 100% 2px; }
      footer .footer-wrap .contents-wrap:last-child p {
        text-align: right;
        font-size: 14px;
        color: #565656;
        margin-top: 30px; }
        @media screen and (max-width: 1023px) {
          footer .footer-wrap .contents-wrap:last-child p {
            text-align: center; } }