@charset "UTF-8";
/* ---------------------------------------------
@mixin
--------------------------------------------- */
html {
  font-size: 62.5%; }

body {
  font-size: 1.6rem;
  font-family: 'Kosugi', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', "NotoSans", 'MS PGothic', arial, helvetica, sans-serif;
  color: #1D2B52;
  text-rendering: optimizeLegibility;
  -webkit-font-kerning: normal;
  font-kerning: normal; }

@media screen and (max-width: 640px) {
  html {
    font-size: 2.5vw; } }
img {
  max-width: inherit; }

@media screen and (max-width: 640px) {
  img {
    height: auto; } }
picture {
  display: inline-block; }

picture img {
  max-width: inherit; }

@media screen and (max-width: 780px) {
  picture img {
    max-width: 100%;
    height: auto; } }
* {
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: #41464c; }

a:hover {
  text-decoration: none; }

@media screen and (min-width: 640px) {
  a[href^="tel:"] {
    pointer-events: none; } }
button {
  outline: 0;
  border: 0; }

img {
  flex-shrink: 0; }

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  font-weight: inherit;
  line-height: 1.6em; }

@media screen and (min-width: 769px) {
  .show-sp {
    display: none; } }
@media only screen and (max-width: 768px) {
  .show-sp {
    display: inherit; } }

@media only screen and (max-width: 768px) {
  .show-pc {
    display: none; } }

.wrapper {
  width: 100%;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    .wrapper {
      min-width: 1024px; } }
  @media only screen and (max-width: 768px) {
    .wrapper {
      min-width: 100%; } }

.content {
  position: relative; }

.wrapper {
  position: relative; }
  .wrapper::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url(../../assets/images/bg_grid.gif);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3; }

/* HEADER
========================================================================== */
.header {
  position: relative; }
  .header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    border-style: solid;
    border-width: 200px 100vw 0 0;
    border-color: #1D2B52 transparent transparent transparent;
    z-index: -1; }
    @media only screen and (max-width: 768px) {
      .header:before {
        border-width: 80px 100vw 0 0; } }
  .header-inner {
    padding: 48px 20px 70px 80px; }
    @media only screen and (max-width: 768px) {
      .header-inner {
        padding: 12px 20px 27px 20px; } }
    @media only screen and (max-width: 768px) {
      .header-inner img {
        width: 80px;
        height: 23px; } }

@media screen and (min-width: 769px) {
  .content {
    position: relative; }
    .content::before {
      content: "";
      background: url(../../assets/images/bg_logo.svg) no-repeat;
      background-size: contain;
      width: 444px;
      height: 1440px;
      position: absolute;
      top: -10px;
      left: 0;
      z-index: 0; } }
/* MAINVISUAL
========================================================================== */
.mainvisual {
  margin-bottom: 300px; }
  @media only screen and (max-width: 1024px) {
    .mainvisual {
      margin-bottom: 100px; } }
  .mainvisual-inner {
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
    margin: auto;
    display: flex; }
    @media only screen and (max-width: 1024px) {
      .mainvisual-inner {
        width: 90%; } }
    @media only screen and (max-width: 1024px) {
      .mainvisual-inner {
        width: 100%; } }
  .mainvisual-Left {
    width: 50%; }
    @media only screen and (max-width: 1024px) {
      .mainvisual-Left {
        width: 60%; } }
    @media only screen and (max-width: 768px) {
      .mainvisual-Left {
        width: 100%;
        margin-top: 40px; } }
    .mainvisual-Left-title {
      position: relative; }
      @media screen and (min-width: 769px) {
        .mainvisual-Left-title {
          margin: 120px 0 90px; } }
      @media only screen and (max-width: 768px) {
        .mainvisual-Left-title {
          width: 50%;
          margin: 0 0 60px;
          min-height: 264px; }
          .mainvisual-Left-title::before {
            content: "";
            background: url(../../assets/images/fv_irrust.svg) no-repeat;
            background-size: contain;
            width: 400px;
            height: 512px;
            position: absolute;
            top: -120px;
            right: -400px; } }
      @media screen and (max-width: 425px) {
        .mainvisual-Left-title {
          margin: 0 0 30px; }
          .mainvisual-Left-title::before {
            width: 289px;
            height: 384px;
            top: -120px;
            right: -320px; } }
      @media only screen and (max-width: 1024px) {
        .mainvisual-Left-title img {
          max-width: 100%; } }
      .mainvisual-Left-title:before {
        content: ""; }
    .mainvisual-Left-lead {
      font-size: 1.8rem;
      line-height: 2; }
  @media screen and (min-width: 769px) {
    .mainvisual-Right {
      width: 50%;
      position: relative; } }
  @media only screen and (max-width: 1024px) {
    .mainvisual-Right {
      display: none; } }
  @media screen and (min-width: 769px) {
    .mainvisual-Right img {
      position: absolute;
      top: 0;
      left: 200px; } }
  @media screen and (min-width: 769px) and (min-width: 769px) {
    .mainvisual-Right img {
      transform: translateY(-150px); } }
  @media only screen and (min-width: 769px) and (max-width: 1024px) {
    .mainvisual-Right img {
      left: 50px; } }

/* INTRO
========================================================================== */
.intro-inner {
  width: 100%;
  max-width: 675px;
  padding: 0 20px;
  margin: auto; }
.intro-title {
  font-size: 4rem;
  text-align: center;
  position: relative;
  padding-bottom: 150px; }
  @media only screen and (max-width: 768px) {
    .intro-title {
      font-size: 3.2rem;
      padding-bottom: 100px; } }
  .intro-title::before {
    content: "";
    background: url(../../assets/images/intro_title_deco.svg);
    background-size: contain;
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    height: 150px; }
    @media only screen and (max-width: 1024px) {
      .intro-title::before {
        height: 100px; } }
.intro-item {
  margin: 80px 0 160px; }
  @media only screen and (max-width: 768px) {
    .intro-item {
      margin: 80px 0 120px; } }
  .intro-item-title {
    font-size: 2.8rem;
    text-align: center;
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 35px; }
    @media only screen and (max-width: 768px) {
      .intro-item-title {
        font-size: 2.4rem; } }
    .intro-item-title::after {
      content: "";
      display: block;
      background: url(../../assets/images/title_deco.svg) no-repeat;
      background-size: contain;
      width: 637px;
      height: 38px;
      position: absolute;
      bottom: 0;
      left: 0; }
      @media only screen and (max-width: 768px) {
        .intro-item-title::after {
          width: 100%;
          height: 30px; } }
  .intro-item-lead span, .intro-item-text span {
    display: inline-block;
    background: #EBFA33;
    padding: 3px 5px;
    margin: 0 2px; }
  .intro-item-lead {
    font-size: 3.2rem;
    margin-bottom: 55px; }
    @media only screen and (max-width: 768px) {
      .intro-item-lead {
        font-size: 2.4rem;
        margin-bottom: 27px; } }
    .intro-item-lead span {
      padding: 0 5px;
      margin-bottom: 10px; }
  .intro-item-text {
    font-size: 2.2rem;
    margin-left: 2em; }
    @media only screen and (max-width: 768px) {
      .intro-item-text {
        font-size: 1.6rem;
        line-height: 2; } }

/* ABOUT
========================================================================== */
.about {
  position: relative; }
  .about::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 0;
    width: 0;
    height: 120%;
    border-style: solid;
    border-width: 200px 100vw 0 0;
    border-color: transparent  #F7F8F9 transparent  transparent;
    z-index: -1; }
    @media only screen and (max-width: 768px) {
      .about::before {
        border-width: 80px 100vw 0 0; } }
  .about-inner {
    width: 100%;
    max-width: 880px;
    padding: 150px 20px;
    margin: auto; }
    @media only screen and (max-width: 768px) {
      .about-inner {
        padding: 70px 20px; } }
  .about-logo, .about-title {
    text-align: center; }
  .about-title {
    font-size: 4rem;
    margin: 15px 0 60px; }
    @media only screen and (max-width: 768px) {
      .about-title {
        font-size: 3.2rem;
        margin: 15px 0 40px; } }
  .about-table {
    width: 100%;
    border-top: 2px solid #1D2B52; }
    .about-table tr th, .about-table tr td {
      padding: 25px 0 25px 30px;
      border-bottom: 1px dashed #1D2B52; }
      @media only screen and (max-width: 768px) {
        .about-table tr th, .about-table tr td {
          font-size: 1.4rem;
          padding: 25px 0 25px 0; } }
    @media only screen and (max-width: 768px) {
      .about-table tr td {
        padding-left: 15px; } }

/* FOOTER
========================================================================== */
footer {
  background: #1D2B52;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  padding: 15px 20px; }

/* ANIMATION
========================================================================== */
.slidein {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }

@keyframes slideIn {
  0% {
    transform: translateX(500px);
    opacity: 0; }
  100% {
    transform: translateX(0); }
  40%,100% {
    opacity: 1; } }
.fadeup {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; }

.mainvisual-Left-lead.fadeup {
  opacity: 0;
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: .2s; }

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 1;
    transform: translateY(0); } }
.scrollin {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; }

@keyframes fadeup {
  0% {
    transform: translateY(150px);
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 1;
    transform: translateY(0); } }

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