@charset "UTF-8";
/* アニメーション
=========================================================== */
/* フェードイン
????????????????????????????????? */
.inview__anim--fade-in {
  opacity: 0;
  will-change: opacity;
  -webkit-transition: opacity .8s ease 0s;
  transition: opacity .8s ease 0s;
}

.inview__complete .inview__anim--fade-in, .inview__anim--fade-in.inview__complete {
  opacity: 1;
}

/* フェードインアップ
????????????????????????????????? */
.inview__anim--fade-in-up {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  will-change: opacity, transform;
  -webkit-transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s, -webkit-transform .8s ease 0s;
}

.inview__complete .inview__anim--fade-in-up, .inview__anim--fade-in-up.inview__complete {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* フェードイン X
????????????????????????????????? */
.inview__anim--fade-in-x {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  will-change: opacity, transform;
  -webkit-transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s, -webkit-transform .8s ease 0s;
}

.inview__complete .inview__anim--fade-in-x, .inview__anim--fade-in-x.inview__complete {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* フェードイン XX
????????????????????????????????? */
.inview__anim--fade-in-xx {
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  will-change: opacity, transform;
  -webkit-transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s, -webkit-transform .8s ease 0s;
}

.inview__complete .inview__anim--fade-in-xx, .inview__anim--fade-in-xx.inview__complete {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* スケールイン
????????????????????????????????? */
.inview__anim--scale-in {
  opacity: 0;
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
  will-change: opacity, transform;
  -webkit-transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, -webkit-transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s;
  transition: opacity .8s ease 0s, transform .8s ease 0s, -webkit-transform .8s ease 0s;
}

.inview__complete .inview__anim--scale-in, .inview__anim--scale-in.inview__complete {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* スケールY
????????????????????????????????? */
.inview__anim--scale-y {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .8s ease 0s;
  transition: -webkit-transform .8s ease 0s;
  transition: transform .8s ease 0s;
  transition: transform .8s ease 0s, -webkit-transform .8s ease 0s;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

.inview__complete .inview__anim--scale-y {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* スライドイン
????????????????????????????????? */
/* 文字
????????????????????????????????? */
/* タイピング
????????????????????????????????? */
/**
 * Visual Editor Styles
 */
/*
<div class="ve">

  <h3>大見出し（h3）<br>改行可<a href="/common/css/sample">リンク</a></h3>

  <h4>中見出し（h4）<br>改行可<a href="/common/css/sample">リンク</a></h4>

  <h5>小見出し（h5）<br>改行可<a href="/common/css/sample">リンク</a></h5>

  <h6>小見出し（h6）<br>改行可<a href="/common/css/sample">リンク</a></h6>

  <p>本文（p）<br>改行可<a href="/common/css/sample">リンク</a></p>

  <div class="image-wrap">
    <p class="img img-left"><img src="https://placehold.jp/400x300.png" alt=""></p>
    <p class="text">左寄せ画像の回り込みテキスト</p>
  </div>

  <div class="image-wrap">
    <p class="img img-right"><img src="https://placehold.jp/400x300.png" alt=""></p>
    <p class="text">右寄せ画像の回り込みテキスト</p>
  </div>

  <div class="image-wrap">
    <p class="img img-center"><img src="https://placehold.jp/400x300.png" alt=""></p>
    <p class="text">中央寄せ画像の回り込みテキスト</p>
  </div>

  <div class="link-wrap">
    <a href="/" target="_blank">リンクテキスト（div.link-wrap > a）</a>
  </div>

  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>

  <ol>
    <li>リスト1</li>
    <li>リスト2</li>
  </ol>

  <table>
    <thead>
      <tr>
        <th scope="col">横に並ぶ見出し</th>
        <th scope="col">横に並ぶ見出し</th>
        <th scope="col">横に並ぶ見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <th scope="row">縦にならぶ見出し</th>
        <td>セル</td>
        <td>セル</td>
      </tr>
      <tr>
        <th scope="row">縦にならぶ見出し</th>
        <td>セル</td>
        <td>セル</td>
      </tr>
    </tbody>
  </table>

</div>
*/
@media screen and (min-width: 768px), print {
  .ve > * {
    font-size: 15px;
  }
}

@media screen and (max-width: 767px) {
  .ve > * {
    font-size: 13px;
  }
}

@media screen and (min-width: 768px), print {
  .ve > * + * {
    margin-top: 30px;
  }
}

@media screen and (max-width: 767px) {
  .ve > * + * {
    margin-top: 20px;
  }
}

.ve h3 {
  font-family: "Open Sans", "YakuHanJPs", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  color: #111;
  line-height: 1.2;
  position: relative;
}

@media screen and (min-width: 768px), print {
  .ve h3 {
    font-size: 22px;
    font-size: 2.2rem;
    padding-left: 22px;
  }
}

@media screen and (max-width: 767px) {
  .ve h3 {
    font-size: 16px;
    font-size: 1.6rem;
    padding-left: 12px;
  }
}

@media screen and (min-width: 768px), print {
  .ve * + h3 {
    margin-top: 50px;
  }
}

@media screen and (max-width: 767px) {
  .ve * + h3 {
    margin-top: 40px;
  }
}

.ve h3:before {
  background-color: #7059b2;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

@media screen and (min-width: 768px), print {
  .ve h3:before {
    width: 6px;
  }
}

@media screen and (max-width: 767px) {
  .ve h3:before {
    width: 4px;
  }
}

.ve h4 {
  background-color: #ebebeb;
  line-height: 1.2;
  padding: 10px 19px;
  position: relative;
  font-family: "Open Sans", "YakuHanJPs", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  color: #111;
}

@media screen and (min-width: 768px), print {
  .ve h4 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 767px) {
  .ve h4 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 768px), print {
  .ve h4 + * {
    margin-top: 25px;
  }
}

@media screen and (max-width: 767px) {
  .ve h4 + * {
    margin-top: 20px;
  }
}

.ve h5 {
  line-height: 1.2;
  position: relative;
  font-family: "Open Sans", "YakuHanJPs", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  color: #111;
}

@media screen and (min-width: 768px), print {
  .ve h5 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 767px) {
  .ve h5 {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 768px), print {
  .ve h5 + * {
    margin-top: 15px;
  }
}

@media screen and (max-width: 767px) {
  .ve h5 + * {
    margin-top: 10px;
  }
}

.ve ul {
  margin-left: 1.5em;
}

.ve ul li {
  list-style-type: disc;
  margin-bottom: 4px;
}

.ve ul li:last-child {
  margin-bottom: 0;
}

.ve ol {
  counter-reset: list-decimal;
  list-style: none;
  position: relative;
}

.ve ol li {
  counter-increment: list-decimal;
  margin-bottom: 4px;
  padding-left: 1.5em;
  position: relative;
}

.ve ol li:before {
  content: counter(list-decimal) ".";
  font-family: "Open Sans", "YakuHanJPs", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-style: normal;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

.ve ol li:last-child {
  margin-bottom: 0;
}

.ve table {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 4.6511627907%;
  margin-bottom: 4.6511627907%;
  width: 100%;
}

.ve table > tbody th {
  width: 30%;
}

.ve table > tbody tr:last-child th[scope=row] {
  border-bottom-color: #ccc;
}

.ve table > thead + tbody th {
  width: auto;
}

.ve table th,
.ve table td {
  vertical-align: middle;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.ve table th:last-child,
.ve table td:last-child {
  border-right: none;
}

.ve table th {
  padding: 1.5% 3.4%;
  font-family: "Open Sans", "YakuHanJPs", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-style: normal;
  font-weight: 700;
}

@media screen and (min-width: 768px), print {
  .ve table th {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

.ve table td {
  padding: 1.5% 4.2%;
}

.ve table th[scope=col] {
  background-color: #ededed;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: none;
}

.ve table th[scope=row] {
  background-color: #ededed;
  border-bottom-color: #fff;
  text-align: left;
}

.ve .link-wrap {
  text-align: center;
}

.ve .link-wrap a {
  border-radius: 4px;
  display: inline-block;
  line-height: 1.5;
  padding: 14px 30px;
  text-align: center;
  text-decoration: none;
  background-color: #7364af;
  color: #FFF;
  position: relative;
  font-family: "Open Sans", "YakuHanJPs", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-style: normal;
  font-weight: 700;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.ve .link-wrap a:after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  position: absolute;
  top: 22px;
  right: 20px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ve .link-wrap a:hover {
  background-color: #5c508c;
  color: #FFF;
}

.ve .link-wrap a:visited {
  color: #FFF;
}

@media screen and (min-width: 768px), print {
  .ve .link-wrap a:hover {
    color: clr(link);
    text-decoration: none;
  }
}

.ve .link-wrap a[target="_blank"]:after {
  content: "?";
  color: #888;
  font-size: 0.8em;
  display: inline-block;
  margin-left: 5px;
  position: static;
  border: none;
  color: #FFF;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  top: 35%;
}

.ve .image-wrap {
  display: block;
}

.ve .image-wrap:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ve .image-wrap .img {
  overflow: hidden;
}

@media screen and (min-width: 768px), print {
  .ve .image-wrap .img {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  .ve .image-wrap .img {
    margin-bottom: 20px;
  }
}

.ve .image-wrap .img img {
  height: auto;
  max-width: 100%;
}

@media screen and (min-width: 768px), print {
  .ve .image-wrap .img-left {
    float: left;
    margin-right: 30px;
  }
}

@media screen and (min-width: 768px), print {
  .ve .image-wrap .img-right {
    float: right;
    margin-left: 30px;
  }
}

@media screen and (min-width: 768px), print {
  .ve .image-wrap .img-left,
  .ve .image-wrap .img-right {
    max-width: 50%;
  }
}

.ve .image-wrap .img-center {
  text-align: center;
}

.ve .bold {
  font-weight: 700;
}

.ve .italic {
  font-style: italic;
}

.ve .gray {
  color: #aaa;
}

.ve .red {
  color: red;
}

.ve .blue {
  color: #1a61b2;
}

.ve .highlight {
  background-color: #faff00;
}

@media screen and (min-width: 768px), print {
  .ve .font-big {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .ve .font-big {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px), print {
  .ve .font-small {
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .ve .font-small {
    font-size: 11px;
  }
}

/* ve */
.form-row .ve > * {
  font-size: 15px;
}

.form-row .ve > * + * {
  margin-top: 30px;
}

.form-row .ve h3 {
  font-size: 24px;
}

.form-row .ve h4 {
  font-size: 20px;
}

.form-row .ve h5 {
  font-size: 16px;
}

.form-row .ve table th,
.form-row .ve table td {
  padding: 10px;
}

.form-row .ve .image-wrap .img {
  margin-bottom: 30px;
}

.form-row .ve .image-wrap .img-left {
  margin-right: 30px;
}

.form-row .ve .image-wrap .img-right {
  margin-left: 30px;
}