@charset "UTF-8";
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }

body {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-weight: bold; }

.btn-xl {
  text-transform: uppercase;
  padding: 1.5rem 3rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1rem; }

.bg-black {
  background-color: #000 !important; }

.rounded-pill {
  border-radius: 5rem; }

.navbar-custom {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(0, 0, 0, 0.7); }
  .navbar-custom .navbar-brand {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    font-weight: 700; }
  .navbar-custom .navbar-nav .nav-item .nav-link {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1rem; }

header.masthead {
  position: relative;
  overflow: hidden;
  padding-top: calc(10rem + 72px);
  padding-bottom: 20rem;
  background: url("../img/img_masthead.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-attachment: scroll;
  background-size: cover; }
  header.masthead .masthead-content {
    z-index: 1;
    position: relative; }
    header.masthead .masthead-content .masthead-heading {
      font-size: 2.2rem;
      color: #9f27ce;
      font-weight: 400; }
    header.masthead .masthead-content .masthead-subheading {
      font-size: 1.8rem;
      color: #343a40;
      font-weight: 400; }

@media (min-width: 992px) {
  header.masthead {
    padding-top: calc(14rem + 55px);
    padding-bottom: 20rem; }
    header.masthead .masthead-content .masthead-heading {
      font-size: 4.2rem; }
    header.masthead .masthead-content .masthead-subheading {
      font-size: 2.4rem; } }

.navbar-brand {
  text-transform: none !important; }

.nav-link {
  text-transform: none !important; }

.bg-primary {
  background-color: #9f27ce !important; }

.btn-primary {
  background-color: #9f27ce;
  border-color: #9f27ce; }
  .btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background-color: #7e1fa3 !important;
    border-color: #7e1fa3 !important; }
  .btn-primary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(159, 39, 206, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(159, 39, 206, 0.5); }

.btn-primary {
  color: #fff;
  background-color: #9f27ce;
  border-color: #9f27ce; }

.btn-primary:hover {
  color: #fff;
  background-color: color-mod(var(#9f27ce) shade(15%));
  border-color: color-mod(var(#9f27ce) shade(15%)); }

.btn-primary:focus, .btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(43, 43, 43, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(43, 43, 43, 0.5); }

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #9f27ce;
  border-color: #9f27ce; }

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: color-mod(var(#9f27ce) shade(15%));
  border-color: color-mod(var(#9f27ce) shade(15%)); }

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(43, 43, 43, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(43, 43, 43, 0.5); }

.font-color-primary {
  color: #9f27ce; }

.font-color-secondary {
  color: #0066ff; }

.xsmall {
  font-size: 50%; }

.border-bottom-1-gray-300 {
  border: 1px solid #dee2e6; }

.border-bottom-1-primay {
  border-bottom: 1px solid #9f27ce; }

.border-bottom-4-primay {
  border-bottom: 4px solid #9f27ce; }

.border-bottom-2-secondary {
  border-bottom: 2px solid #0066ff; }

.mt-50 {
  margin-top: 5rem; }

.mt-100 {
  margin-top: 10rem; }

.mb-30 {
  margin-bottom: 3rem; }

.background-about {
  background-image: url("../img/img_about_01.png");
  background-position: center left;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat; }

.background-pisecomment {
  background-image: url("../img/img_pisecomment_01.png");
  background-position: center left;
  background-size: cover;
  background-repeat: no-repeat; }

.background-pisecomment .card {
  opacity: 0.7; }

.background-company {
  background-color: #fafafa; }

.background-contact {
  background-color: #fff; }

.pisecon_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.masthead-heading {
  text-shadow: 0px 0px 2px #ffffff,0px 0px 5px #ffffff,0px 0px 5px #ffffff; }

/* ------------------------------------------------
 JsFlow 設定
------------------------------------------------*/
/* ----  フェードインパターン  ----*/
/* 基本のスタイル */
.flow_01.delighter {
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  opacity: 0; }

/* スタート時のスタイル */
.flow_01.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_02.delighter {
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
  opacity: 0; }

/* スタート時のスタイル */
.flow_02.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* ----  上スライド＆フェードインパターン  ----*/
/* 基本のスタイル */
.flow_step01.delighter {
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0; }

/* 基本のスタイル */
.flow_step02.delighter {
  -webkit-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0; }

/* 基本のスタイル */
.flow_step03.delighter {
  -webkit-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0; }

/* 基本のスタイル */
.flow_step04.delighter {
  -webkit-transition: all 1.6s ease-in-out;
  -o-transition: all 1.6s ease-in-out;
  transition: all 1.6s ease-in-out;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0; }

/* 基本のスタイル */
.flow_step05.delighter {
  -webkit-transition: all 1.8s ease-in-out;
  -o-transition: all 1.8s ease-in-out;
  transition: all 1.8s ease-in-out;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0; }

/* 基本のスタイル */
.flow_step06.delighter {
  -webkit-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 0; }

/* スタート時のスタイル */
.flow_step01.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_step02.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_step03.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_step04.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_step05.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_step06.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* ----  左右スライド＆フェードインパターン  ----*/
/* 基本のスタイル */
.flow_LR_05_ease-out.delighter {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: translateX(-10%);
  -ms-transform: translateX(-10%);
  transform: translateX(-10%);
  opacity: 0; }

/* 基本のスタイル */
.flow_RL_05_ease-out.delighter {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: translateX(10%);
  -ms-transform: translateX(10%);
  transform: translateX(10%);
  opacity: 0; }

/* スタート時のスタイル */
.flow_LR_05_ease-out.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

/* 基本のスタイル */
.flow_RL_05_ease-out.delighter.started {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

.fa-3x {
  min-width: 3rem;
  text-align: center; }