@charset "UTF-8";
/* --------------------------------
[SCSSについて注意]
・/css-scss/styles.scss を /css/styles.css にコンパイルしてコーディングしているため、
  可能であればCSSを直接編集せずに、SCSS を編集＆コンパイルしてCSSを生成する
・または、CSSを直接編集した場合は、SCSS 内の記述も同様に編集する方法でも可
・もし、CSSのみ編集した形跡があった場合など、CSSとSCSSの保持ができなくなった場合はSCSS一式を削除しても良い
-------------------------------- */
/* --------------------------------
[コーディングルール]
・基本classのみ使用し、idはアンカーやJSで使用
・class名、フォルダ名、ファイル名はハイフン(-）区切り
・トップページはロゴを<h1>、他のページはロゴを<p>でページタイトルを<h1>にする
・メディアクエリーはPCファーストで、@media screen and (max-width: 767px) {}を使用
-------------------------------- */
/* reset -------- */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, th, td, address, small, i {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
}

ol, ul, dl, dt, dd {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

img, object, embed, video {
  border: 0;
  vertical-align: bottom;
}

img {
  max-width: 100%;
}

img[src$=".svg"] {
  width: 100%;
  height: auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

th {
  text-align: left;
}

em {
  font-style: normal;
  font-weight: bold;
}

a {
  color: #000;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  a:hover {
    color: #000;
  }
}

/* body -------- */
body {
  overflow-y: scroll;
  line-height: 1.5;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1.3rem;
  color: #333;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  text-align: justify;
  text-justify: inter-ideograph;
  -webkit-text-size-adjust: 100%;
}

body .body-inner {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.is-opening-end .body-inner {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  overflow: visible;
}

/* header -------- */
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .header {
    position: relative;
  }
}

@media screen and (max-width: 767px) {
  .header .header-inner {
    background-color: #fff;
    padding: 1px;
  }
}

.header .logo {
  position: absolute;
  left: 0;
  top: 0;
  margin: 1.95%;
}

@media screen and (max-width: 767px) {
  .header .logo {
    position: relative;
    right: 0;
    margin: 2.6% auto 4.5%;
  }
}

/* content -------- */
.content {
  line-height: 1.94;
  font-size: 16px;
}

/* footer -------- */
.footer .footer-inner {
  position: relative;
  text-align: center;
  padding-top: 4%;
}

.footer .contact {
  margin-bottom: 8%;
}

@media screen and (max-width: 767px) {
  .footer .contact {
    margin-bottom: 15%;
  }
}

.footer .logo {
  padding-bottom: 2.5%;
}

@media screen and (max-width: 767px) {
  .footer .logo {
    padding-bottom: 5%;
  }
}

.footer .gotop {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 10;
  padding-bottom: 2%;
}

@media screen and (max-width: 767px) {
  .footer .gotop {
    right: 3%;
    padding-bottom: 3%;
  }
}

.footer .copyright {
  padding: 30px 15px;
  background-color: #212121;
  color: #999;
  font-size: 1.1rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .footer .copyright {
    padding: 10px 5px;
    font-size: .9rem;
  }
}

/* --------------------------------
[module.cssについて]
・共通レイアウトと共通タグを記述
-------------------------------- */
/* all -------- */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.over {
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

@media screen and (min-width: 768px) {
  .over:hover {
    opacity: 0.7;
  }
}

.container {
  max-width: 1030px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.display-block {
  display: block;
}

.display-table {
  display: table;
}

.display-table-cell {
  display: table-cell;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.image-cover {
  display: block;
  height: 0;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

/* wordpress editor -------- */
.format .aligncenter {
  display: block;
  margin: 0 auto;
}

.format .alignright {
  float: right;
}

.format .alignleft {
  float: left;
}

.format img[class*="wp-image-"],
.format img[class*="attachment-"] {
  max-width: 100%;
  height: auto;
}

/* format -------- */
.format a {
  color: #03c;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .format a:hover {
    color: #69f;
  }
}

.format h2 {
  margin: 30px 0 20px;
  font-size: 24px;
  font-weight: bold;
}

.format h3 {
  margin: 30px 0 20px;
  font-size: 18px;
  font-weight: bold;
}

.format p, .format ul, .format ol, .format table {
  margin-bottom: 20px;
}

.format li {
  margin-bottom: 10px;
}

.format ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.format ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}

.format hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #999;
}

.format table {
  width: 100%;
}

.format th {
  width: 150px;
  padding: 10px 20px;
  border: 1px solid #999;
  background-color: #eee;
}

.format td {
  padding: 10px 20px;
  border: 1px solid #999;
}

/* format -------- */
body .remodal-wrapper {
  padding: 70px 0 20px;
}

body .remodal {
  width: 84.37%;
  max-width: 1280px !important;
  padding: 0;
  background: none;
  margin: 0;
}

body .remodal video {
  width: 100%;
}

body .remodal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

body .remodal-close {
  left: auto;
  top: -3.12vw;
  right: -3.12vw;
  width: 3.12vw;
  height: 3.12vw;
  background: url(../images/module/modal-close.svg) no-repeat center center;
  background-size: contain;
}

body .remodal-close:before {
  display: none;
}

/* --------------------------------
[page.cssについて]
・各ページごとのCSSを記述
・必ず.page-homeなど各ページごとのclassを付ける
-------------------------------- */
/* page-home -------- */
.page-home .opening-bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
}

.page-home .opening .logo {
  position: absolute;
  left: 50%;
  top: 50vh;
  z-index: 20;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.page-home .opening .logo1 {
  opacity: 1;
}

.is-opening-end1 .page-home .opening .logo1 {
  opacity: 0;
}

.page-home .opening .logo2 {
  opacity: 0;
}

.is-opening-end1 .page-home .opening .logo2 {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .is-opening-end1 .page-home .opening .logo {
    left: 81%;
    top: 2vw;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 17.11% !important;
  }
}

@media screen and (max-width: 767px) {
  .page-home .opening .logo {
    top: 0;
    margin-top: 70%;
  }
  .is-opening-end1 .page-home .opening .logo {
  }
}

.page-home .sec {
  min-height: 300px;
}

.page-home .sec-kv {
  position: relative;
  padding-top: 58.98vw;
  background-size: cover;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv {
    padding-top: 129.37%;
    background-image: url(../images/home/sp-bg1.jpg);
  }
}

.page-home .sec-kv .bg-movie-fix {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 100vh;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .bg-movie-fix {
    display: none;
    padding-top: 141.37%;
  }
}

.page-home .sec-kv .bg-movie {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec-kv .bg-movie video {
  width: auto;
  height: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.page-home .sec-kv .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec-kv .title {
  margin: 17% 0 3%;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .title {
    margin: 38% 0 5%;
  }
}

.page-home .sec-kv .contact {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0 4% 5.2% 0;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .contact {
    margin: 0 2% -3% 0;
  }
}

.page-home .sec1 {
  position: relative;
  z-index: 3;
  margin-top: -11.5%;
  padding-top: 67.79%;
  background: url(../images/home/sec1-bg1.png) no-repeat center center;
  background-size: cover;
}
.page-home .sec1 .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  padding-top: 71.5%;
}
.page-home .sec1 .bg span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: skewY(9deg) translateY(-16%);
}
.page-home .sec1 .bg span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/home/sec1-bg2.png) no-repeat center center;
  background-size: 100% auto;
  transform: skewY(-9deg) translateY(27.5%) translateX(5%);
  opacity: 0;
  transition: all .6s ease-out;
}
.page-home .sec1.is-fade .bg span:before {
  opacity: 1;
  transform: skewY(-9deg) translateY(27.5%) translateX(0);
}

@media screen and (max-width: 767px) {
  .page-home .sec1 {
    padding-top: 147.18%;
    background-image: url(../images/home/sec1-bg-sp.png);
  }
  .page-home .sec1 .bg {
    padding-top: 165.5%;
  }
  .page-home .sec1 .bg span {
    transform: skewY(9deg) translateY(-15.5%);
  }
  .page-home .sec1 .bg span:before {
    background: url(../images/home/sec1-bg2.png) no-repeat right center;
    background-size: 142% auto;
    transform: skewY(-9deg) translateY(34.5%) translateX(10%);
  }
  .page-home .sec1.is-fade .bg span:before {
    transform: skewY(-9deg) translateY(34.5%) translateX(0);
  }
}

.page-home .sec1 .contact {
  display: none;
  position: fixed;
  right: 2%;
  bottom: 0;
  z-index: 10;
  padding-bottom: 2%;
}

@media screen and (max-width: 767px) {
  .page-home .sec1 .contact {
    right: 3%;
    padding-bottom: 3%;
  }
}

.page-home .sec1 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec1 .title1 {
  margin-top: 16.5%;
  text-align: center;
  opacity: 0;
  transition: all .6s .6s;
}
.page-home .sec1.is-fade .title1 {
  opacity: 1;
}
.page-home .sec1 .title2 {
  margin-top: 2.5%;
  text-align: center;
  opacity: 0;
  transition: all .6s .8s;
}
.page-home .sec1.is-fade .title2 {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .page-home .sec1 .title1 {
    margin-top: 41%;
  }
  .page-home .sec1 .title2 {
    margin-top: 2.5%;
  }
}

.page-home .sec2 {
  position: relative;
  margin-top: -16.2%;
  padding-top: 66.54%;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-home .sec2 {
    margin-top: -16.7%;
    padding-top: 159.53%;
    background-image: url(../images/home/sp-bg2.jpg);
  }
}

.page-home .sec2:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.page-home .sec2 .bg-movie {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-home .sec2 .bg-movie:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.page-home .sec2 .bg-movie video {
  width: auto;
  height: 100%;
  -webkit-transform: translateX(-5%);
  -ms-transform: translateX(-5%);
  transform: translateX(-5%);
}

@media screen and (max-width: 767px) {
  .page-home .sec2 .bg-movie video {
    -webkit-transform: translateX(-28%);
    -ms-transform: translateX(-28%);
    transform: translateX(-28%);
  }
}

.page-home .sec2 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec2 .texts {
  margin: 20% 0 0 0;
}
.page-home .sec2 .texts p {
  position: relative;
  overflow: hidden;
  margin-left: 10%;
  margin-bottom: 1.6%;
}
.page-home .sec2 .texts p:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  transform: translateX(-101%);
  transition: transform .8s, width .8s 1s;
}
.page-home .sec2 .texts p.is-fade-next:after {
  width: 0;
  transform: translateX(0);
}
.page-home .sec2 .texts img {
  display: block;
  transform: translateY(101%);
  transition: all .8s 1s;
}
.page-home .sec2 .texts p.is-fade-next img {
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .page-home .sec2 .texts {
    margin-top: 51%;
  }
  .page-home .sec2 .texts p {
    margin-bottom: 3%;
  }
}

.page-home .sec3 {
  position: relative;
  z-index: 2;
  margin-top: -16.7%;
  padding-top: 64.92%;
  background: url(../images/home/sec3-bg.svg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-home .sec3 {
    padding-top: 165%;
    background-image: url(../images/home/sec3-bg-sp.svg);
  }
}

.page-home .sec3 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec3 .title {
  position: relative;
  margin: 22.5% auto 0;
}

@media screen and (max-width: 767px) {
  .page-home .sec3 .title {
    margin-top: 59%;
  }
}

.page-home .sec3 .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec3 .mask span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f00;
}
.page-home .sec3 .mask span:nth-child(1) {
  left: -1%;
  top: -1%;
  height: 20%;
  width: 102%;
  transition: all .6s 0s;
}
.page-home .sec3.is-fade .mask span:nth-child(1) {
  opacity: 0;
}
.page-home .sec3 .mask span:nth-child(2) {
  left: -1%;
  top: 25%;
  height: 51%;
  width: 102%;
}
.page-home .sec3 .mask span:nth-child(3) {
  left: -1%;
  bottom: -1%;
  height: 20%;
  width: 102%;
  transition: all .6s 1.6s;
}
.page-home .sec3.is-fade .mask span:nth-child(3) {
  opacity: 0;
}

.page-home .sec3 .title2 {
  position: absolute;
  left: 34.8%;
  top: 0;
  margin: 29.5% 0 0;
}
@media screen and (max-width: 767px) {
  .page-home .sec3 .title2 {
    left: 19.5%;
    margin-top: 73%;
  }
}

.page-home .sec3 .title2 svg .path{
  stroke:#ffffff;
  fill:rgba(0,0,0,0);
  /* stroke-width:1; */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.page-home .sec3.is-fade .title2 svg .path{
  -webkit-animation:DASH 1.5s linear .4s forwards;
  -o-animation:DASH 1.5s linear .4s forwards;
  animation:DASH 1.5s linear .4s forwards;
}
@keyframes DASH{
  0%{stroke-dashoffset:1000;}
  50%{fill:rgba(0,0,0,0);}
  100%{stroke-dashoffset:0;fill:#fff;}
}
@-moz-keyframes DASH{
  0%{stroke-dashoffset:1000;}
  50%{fill:rgba(0,0,0,0);}
  100%{stroke-dashoffset:0;fill:#fff;}
}
@-webkit-keyframes DASH{
  0%{stroke-dashoffset:1000;}
  50%{fill:rgba(0,0,0,0);}
  100%{stroke-dashoffset:0;fill:#fff;}
}
@-o-keyframes DASH{
  0%{stroke-dashoffset:1000;}
  50%{fill:rgba(0,0,0,0);}
  100%{stroke-dashoffset:0;fill:#fff;}
}
@-ms-keyframes DASH{
  0%{stroke-dashoffset:1000;}
  50%{fill:rgba(0,0,0,0);}
  100%{stroke-dashoffset:0;fill:#fff;}
}


.page-home .sec3 .sidetext {
  position: absolute;
  right: 0;
  top: 50%;
  margin-right: 5.45%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.page-home .sec4 {
  overflow: hidden;
  position: relative;
  margin-top: -14.5%;
  padding-top: 68.41%;
  background: url(../images/home/sec4-bg.png) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-home .sec4 {
    margin-top: -17.5%;
    padding-top: 165.12%;
    background-image: url(../images/home/sec4-bg-sp.png);
  }
}

.page-home .sec4 .bg-movie {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec4 .bg-movie video {
  width: auto;
  height: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.page-home .sec4 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec4 .texts {
  position: relative;
  margin: 13% auto 0;
  text-align: center;
}
.page-home .sec4 .texts p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: all .6s .6s;
}
.page-home .sec4 .texts p.is-fade-next {
  opacity: 1;
}
.page-home .sec4 .texts p:nth-child(1) {
  opacity: 1;
  transform: scale(.1);
  transition: all .8s;
}
.page-home .sec4.is-fade .texts p:nth-child(1) {
  transform: scale(1);
}

@media screen and (max-width: 767px) {
  .page-home .sec4 .texts {
    margin-top: 38%;
  }
}

.page-home .sec4 .sidetext {
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: 5.45%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.page-home .sec5 {
  position: relative;
  margin-top: -17%;
  padding-top: 181.06%;
  background: url(../images/home/sec5-bg.png) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-home .sec5 {
    padding-top: 233.49%;
    background-image: url(../images/home/sec5-bg-sp.png);
  }
}

.page-home .sec5 .bg-mask {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec5 .bg-mask span {
  display: block;
  position: absolute;
  width: 30%;
  padding-top: 30%;
  background-color: #fff;
  /*background-color: rgba(0,0,255,.5);*/
  opacity: 1;
  transition: all .8s;
}
/*.page-home .sec5 .bg-mask span.is-fade {
  opacity: 0;
}*/
.page-home .sec5 .bg-mask span:nth-child(1) { right: -3%; top: 1.25%; transform: rotate(-9.6deg); }
.page-home .sec5 .bg-mask span:nth-child(2) { left: 0; top: 14%; }
.page-home .sec5 .bg-mask span:nth-child(3) { right: 0; top: 27%; }
.page-home .sec5 .bg-mask span:nth-child(4) { left: 0; top: 40%; }
.page-home .sec5 .bg-mask span:nth-child(5) { right: 0; top: 60%; }
.page-home .sec5 .bg-mask span:nth-child(6) { left: 0; top: 75%; }
.page-home .sec5 .bg-mask span:nth-child(7) { right: 0; top: 88%; }

@media screen and (max-width: 767px) {
  .page-home .sec5 .bg-mask span:nth-child(1) { right: -3%; top: 1%; transform: rotate(-9.6deg); }
  .page-home .sec5 .bg-mask span:nth-child(2) { left: 0; top: 18%; }
  .page-home .sec5 .bg-mask span:nth-child(3) { right: 0; top: 25%; }
  .page-home .sec5 .bg-mask span:nth-child(4) { left: 0; top: 45%; }
  .page-home .sec5 .bg-mask span:nth-child(5) { right: 0; top: 58%; }
  .page-home .sec5 .bg-mask span:nth-child(6) { left: 0; top: 76%; }
  .page-home .sec5 .bg-mask span:nth-child(7) { right: 0; top: 91%; }
}


.page-home .sec5 .bg-icons {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page-home .sec5 .bg-icons span {
  display: block;
  position: absolute;
  width: 14%;
  padding-top: 14%;
  opacity: 0;
  transition: all .8s;
}
.page-home .sec5 .bg-icons span.is-fade {
  opacity: 1;
}

.page-home .sec5 .bg-icons span:nth-child(1) { right: 6.7%; top: 1.35%; }
.page-home .sec5 .bg-icons span:nth-child(2) { left: -2%; top: 18%; }
.page-home .sec5 .bg-icons span:nth-child(3) { right: -3%; top: 31%; }
.page-home .sec5 .bg-icons span:nth-child(4) { left: -7%; top: 44%; }
.page-home .sec5 .bg-icons span:nth-child(5) { right: -6%; top: 64.5%; }
.page-home .sec5 .bg-icons span:nth-child(6) { left: -2%; top: 79.5%; }
.page-home .sec5 .bg-icons span:nth-child(7) { right: 2%; top: 92%; }
@media screen and (max-width: 767px) {
  .page-home .sec5 .bg-icons span:nth-child(1) { right: 6.5%; top: 1%; }
  .page-home .sec5 .bg-icons span:nth-child(2) { left: -2%; top: 20%; }
  .page-home .sec5 .bg-icons span:nth-child(3) { right: -3%; top: 28%; }
  .page-home .sec5 .bg-icons span:nth-child(4) { left: -7%; top: 48%; }
  .page-home .sec5 .bg-icons span:nth-child(5) { right: -6%; top: 60.5%; }
  .page-home .sec5 .bg-icons span:nth-child(6) { left: -2%; top: 79.5%; }
  .page-home .sec5 .bg-icons span:nth-child(7) { right: 2%; top: 94%; }
}

.page-home .sec5 .bg-icons span:nth-child(1) i { background-color: #e9cfe8; }
.page-home .sec5 .bg-icons span:nth-child(2) i { background-color: #dee7b5; }
.page-home .sec5 .bg-icons span:nth-child(3) i { background-color: #ced1dc; }
.page-home .sec5 .bg-icons span:nth-child(4) i { background-color: #dea3b5; }
.page-home .sec5 .bg-icons span:nth-child(5) i { background-color: #dfb6bc; }
.page-home .sec5 .bg-icons span:nth-child(6) i { background-color: #e3bbad; }
.page-home .sec5 .bg-icons span:nth-child(7) i { background-color: #a9e2d3; }

.page-home .sec5 .bg-icons span i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: sec5-bg-icons 2s ease infinite alternate;
  animation: sec5-bg-icons 2s ease infinite alternate;
}
@keyframes sec5-bg-icons {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}
@webkit-keyframes sec5-bg-icons {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}

.page-home .sec5 .bg-icons span i:after {
  content: '';
  display: block;
  position: absolute;
  left: 11%;
  top: 11%;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background-color: rgba(255,255,255,1);
}

.page-home .sec5 .bg-icons span:nth-child(1) {
  overflow: hidden;
  transform: rotate(-10.5deg);
}

.page-home .sec5 .bg-icons span:nth-child(1) i {
  top: -17%;
}


.page-home .sec5 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec5 .image {
  margin-top: 22.5%;
  text-align: center;
}

.page-home .sec5 .texts {
  position: relative;
  margin: 22.5% auto 0;
}
@media screen and (max-width: 767px) {
  .page-home .sec5 .texts {
    width: 71.25% !important;
  }
}
.page-home .sec5 .texts p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 1;
  transition: all .8s 1s;
}
.page-home .sec5 .texts p:nth-of-type(1) {
  position: relative;
}

.page-home .sec5 .texts .mask3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec5 .texts .mask3 span {
  display: block;
  position: absolute;
  width: 30%;
  padding-top: 10%;
  background-color: rgba(0,255,0,.5);
  background-color: #fff;
  transform: rotate(205deg);
  transform-origin: left center;
  transition: all .8s .4s;
}
.page-home .sec5 .texts .mask3 span.is-fade {
  width: 0;
}
.page-home .sec5 .texts .mask3 span:nth-child(2n) {
  transform: rotate(-31deg);
}
.page-home .sec5 .texts .mask3 span:nth-child(1) { left: 62%; top: 13%; }
.page-home .sec5 .texts .mask3 span:nth-child(2) { left: 35%; top: 25%; }
.page-home .sec5 .texts .mask3 span:nth-child(3) { left: 62%; top: 38%; }
.page-home .sec5 .texts .mask3 span:nth-child(4) { left: 35%; top: 50%; }
.page-home .sec5 .texts .mask3 span:nth-child(5) { left: 62%; top: 63%; }
.page-home .sec5 .texts .mask3 span:nth-child(6) { left: 35%; top: 75%; }
.page-home .sec5 .texts .mask3 span:nth-child(7) { left: 62%; top: 86%; }

.page-home .sec5 .texts .mask2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec5 .texts .mask2 span {
  display: block;
  position: absolute;
  width: 44%;
  padding-top: 44%;
  background-color: rgba(0,0,255,.5);
  background-color: #fff;
  border-radius: 50%;
  transform: scale(.9);
  transition: all .4s .4s;
}
.page-home .sec5 .texts .mask2 span.is-fade {
  opacity: 0;
}
.page-home .sec5 .texts .mask2 span:nth-child(1) { left: 0; top: 0; }
.page-home .sec5 .texts .mask2 span:nth-child(2) { right: 0; top: 8.8%; }
.page-home .sec5 .texts .mask2 span:nth-child(3) { left: 0; top: 22.6%; }
.page-home .sec5 .texts .mask2 span:nth-child(4) { right: 0; top: 35%; }
.page-home .sec5 .texts .mask2 span:nth-child(5) { left: 0; top: 46.5%; }
.page-home .sec5 .texts .mask2 span:nth-child(6) { right: 0; top: 60.1%; }
.page-home .sec5 .texts .mask2 span:nth-child(7) { left: 0; top: 70.2%; }
.page-home .sec5 .texts .mask2 span:nth-child(8) { right: 0; top: 83.5%; }

.page-home .sec5 .texts .mask1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec5 .texts .mask1 span {
  display: block;
  position: absolute;
  width: 46%;
  padding-top: 46%;
  /*background-color: rgba(0,0,255,.5);*/
  transform: translate(-2.17%, -2.17%);
}
.page-home .sec5 .texts .mask1 span:nth-child(1) { left: 0; top: 0; }
.page-home .sec5 .texts .mask1 span:nth-child(2) { right: -2%; top: 8.8%; }
.page-home .sec5 .texts .mask1 span:nth-child(3) { left: 0; top: 22.6%; }
.page-home .sec5 .texts .mask1 span:nth-child(4) { right: -2%; top: 35%; }
.page-home .sec5 .texts .mask1 span:nth-child(5) { left: 0; top: 46.5%; }
.page-home .sec5 .texts .mask1 span:nth-child(6) { right: -2%; top: 60.1%; }
.page-home .sec5 .texts .mask1 span:nth-child(7) { left: 0; top: 70.2%; }
.page-home .sec5 .texts .mask1 span:nth-child(8) { right: -2%; top: 83.5%; }

.page-home .sec5 .texts .mask1 span i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg) scale(-1, 1);
}
.page-home .sec5 .texts .mask1 span i svg .path{
  fill:rgba(0,0,0,0);
  stroke: #fff;
  stroke-width: 15%;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  stroke-miterlimit: 10;
}
.page-home .sec5 .texts .mask1 span.is-fade i svg .path{
  -webkit-animation:sec5-mask1 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
  -o-animation:sec5-mask1 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
  animation:sec5-mask1 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes sec5-mask1{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:1000;}
}
@-moz-keyframes sec5-mask1{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:1000;}
}
@-webkit-keyframes sec5-mask1{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:1000;}
}
@-o-keyframes sec5-mask1{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:1000;}
}
@-ms-keyframes sec5-mask1{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:1000;}
}

/*.page-home .sec5 .texts .mask1 span i {
  display: block;
  position: absolute;
  right: 50%;
  top: 0;
  width: 51%;
  height: 50%;
  overflow: hidden;
  transform: scale(.5, 1);
  transform-origin: right bottom;
  transition: all .1s linear;
}
.page-home .sec5 .texts .mask1 span i:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: skew(45deg) translateX(50%);
}

.page-home .sec5 .texts .mask1 span i:nth-child(1) { transform: rotate(45deg); transition-delay: .0s; }
.page-home .sec5 .texts .mask1 span i:nth-child(2) { transform: rotate(90deg); transition-delay: .1s; }
.page-home .sec5 .texts .mask1 span i:nth-child(3) { transform: rotate(135deg); transition-delay: .2s; }
.page-home .sec5 .texts .mask1 span i:nth-child(4) { transform: rotate(180deg); transition-delay: .3s; }
.page-home .sec5 .texts .mask1 span i:nth-child(5) { transform: rotate(225deg); transition-delay: .4s; }
.page-home .sec5 .texts .mask1 span i:nth-child(6) { transform: rotate(270deg); transition-delay: .5s; }
.page-home .sec5 .texts .mask1 span i:nth-child(7) { transform: rotate(315deg); transition-delay: .6s; }
.page-home .sec5 .texts .mask1 span i:nth-child(8) { transform: rotate(0deg); transition-delay: .7s; }

.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(1) { transform: rotate(45deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(2) { transform: rotate(90deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(3) { transform: rotate(135deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(4) { transform: rotate(180deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(5) { transform: rotate(225deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(6) { transform: rotate(270deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(7) { transform: rotate(315deg) scale3d(0, 1, 1); }
.page-home .sec5 .texts .mask1 span.is-fade i:nth-child(8) { transform: rotate(0deg) scale3d(0, 1, 1); }*/


.page-home .sec5 .sidetext {
  position: absolute;
  right: 0;
  top: 11.5%;
  margin-right: 5.45%;
}

.page-home .sec5 .sidetext2 {
  position: absolute;
  left: 0;
  top: 58%;
  margin-left: 5.45%;
}


.page-home .sec6 {
  position: relative;
  margin-top: -14.1%;
  padding-top: 72.02%;
  background: url(../images/home/sec6-bg2.png) no-repeat center center;
  background-size: cover;
}
.page-home .sec6:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/home/sec6-bg.png) no-repeat center center;
  background-size: cover;
  opacity: 0;
  transition: all 1s;
}
.page-home .sec6.is-fade:before {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .page-home .sec6 {
    padding-top: 178.13%;
    background-image: url(../images/home/sec6-bg-sp.png);
  }
}

.page-home .sec6 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec6 .title2 {
  margin-top: 27.5%;
  margin-left: 16%;
  opacity: 0;
  transition: all .6s .6s;
}
.page-home .sec6.is-fade .title2 {
  opacity: 1;
}
.page-home .sec6 .texts {
  position: absolute;
  left: 0;
  top: 39.5%;
  width: 100%;
}
.page-home .sec6 .texts p {
  position: relative;
  overflow: hidden;
  margin-left: 43%;
  margin-bottom: 1.6%;
}
.page-home .sec6 .texts p:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  transform: translateX(-101%);
  transition: transform .8s, width .8s 1s;
}
.page-home .sec6 .texts p.is-fade-next:after {
  width: 0;
  transform: translateX(0);
}
.page-home .sec6 .texts img {
  display: block;
  transform: translateY(101%);
  transition: all .8s 1s;
}
.page-home .sec6 .texts p.is-fade-next img {
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .page-home .sec6 .title2 {
    margin: 51% auto 0;
  }
  .page-home .sec6 .texts {
    top: 54%;
  }
  .page-home .sec6 .texts p {
    margin: 0 auto 3.6%;
  }
  .page-home .sec6 .texts p img {
    display: block;
  }
}

.page-home .sec6 .sidetext {
  position: absolute;
  right: 0;
  top: 32%;
  margin-right: 5.45%;
}

.page-home .sec6 .icons {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.page-home .sec6 .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform-origin: 51.4% 38.6%;
  transition: all .8s;
}
.page-home .sec6 .icon1 {
  transform: rotate(-45deg);
}
.page-home .sec6 .icon1b {
  transform: rotate(135deg);
}
.page-home .sec6 .icon2 {
  opacity: 0;
  transition-delay: .8s;
}
.page-home .sec6 .icon3 {
  opacity: 0;
  transition-delay: .8s;
}
.page-home .sec6 .icon4 {
  opacity: 0;
  transition-delay: 1.2s;
}
.page-home .sec6 .sec-inner.is-fade .icon1 {
  transform: rotate(0);
}
.page-home .sec6 .sec-inner.is-fade .icon1b {
  transform: rotate(90deg);
}
.page-home .sec6 .sec-inner.is-fade .icon2 {
  opacity: 1;
}
.page-home .sec6 .sec-inner.is-fade .icon3 {
  opacity: 1;
}
.page-home .sec6 .sec-inner.is-fade .icon4 {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .page-home .sec6 .icons {
    top: 0.6%;
  }
}

.page-home .sec7 {
  position: relative;
  margin-top: -17.2%;
  padding-top: 110%;
  background: url(../images/home/sec7-bg.svg) no-repeat center top;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-home .sec7 {
    padding-top: 158%;
  }
}

.page-home .sec7 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-home .sec7 .title {
  margin: 23% auto 0;
  transform: scale(.75);
  transition: all .6s;
}
.page-home .sec7.is-fade .title {
  transform: scale(1);
}
.page-home .sec7 .title .mask {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec7 .title .mask span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  background-color: #f00;
  transition: all .6s;
}
.page-home .sec7.is-fade .mask span {
  opacity: 0;
}
.page-home .sec7 .title .mask span:nth-child(1) {
  left: 13%;
  top: 29%;
  width: 74%;
  height: 20%;
  transition-delay: .6s;
}
.page-home .sec7 .title .mask span:nth-child(2) {
  left: 30%;
  top: 52%;
  width: 40%;
  height: 5%;
  transition-delay: .8s;
}
.page-home .sec7 .title .mask span:nth-child(3) {
  left: 30%;
  top: 57%;
  width: 40%;
  height: 5%;
  transition-delay: 1s;
}
.page-home .sec7 .title .mask span:nth-child(4) {
  left: 30%;
  top: 62%;
  width: 40%;
  height: 5%;
  transition-delay: 1.2s;
}
.page-home .sec7 .title .mask span:nth-child(5) {
  left: 5%;
  top: 92%;
  width: 90%;
  height: 8%;
  transition-delay: 1.6s;
}

@media screen and (max-width: 767px) {
  .page-home .sec7 .title {
    margin-top: 31%;
  }
  .page-home .sec7 .title .mask span:nth-child(1) {
    left: 14%;
    top: 26%;
    width: 72%;
    height: 20%;
  }
  .page-home .sec7 .title .mask span:nth-child(2) {
    left: 24%;
    top: 48%;
    width: 52%;
    height: 8%;
  }
  .page-home .sec7 .title .mask span:nth-child(3) {
    left: 24%;
    top: 56%;
    width: 52%;
    height: 8%;
  }
  .page-home .sec7 .title .mask span:nth-child(4) {
    left: 24%;
    top: 64%;
    width: 52%;
    height: 8%;
  }
  .page-home .sec7 .title .mask span:nth-child(5) {
    left: 0;
    top: 92%;
    width: 100%;
    height: 8%;
  }
}

.page-home .sec7 .btn {
  margin-top: 4.5%;
  text-align: center;
  opacity: 0;
  transition: all .6s 1.8s;
}
.page-home .sec7.is-fade .btn {
  opacity: 1;
}

.page-home .sec7 .icon {
  position: absolute;
  left: 50%;
  top: 3%;
  transform: translateX(-50%);
  transition: all .6s;
}
.page-home .sec7 .icon1 {
  transform: translateX(-15%);
}
.page-home .sec7 .icon2 {
  transform: translateX(-85%);
}
.page-home .sec7 .sec-inner.is-fade .icon1 {
  transform: translateX(-50%);
}
.page-home .sec7 .sec-inner.is-fade .icon2 {
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .page-home .sec7 .icon {
    top: -2%;
  }
}

.page-home .sec8 {
  position: relative;
  padding-top: 76%;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .page-home .sec8 {
    padding-top: 112%;
  }
}

.page-home .sec8:before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  left: -5%;
  bottom: 0;
  width: 55%;
  height: 30%;
  background-color: #f00;
  transform: rotate(0deg);
  transform-origin: right bottom;
  transition: all .8s .4s;
}
.page-home .sec8.is-fade:before {
  transform: rotate(20deg);
}
.page-home .sec8:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  right: -5%;
  bottom: 0;
  width: 55%;
  height: 30%;
  background-color: #f00;
  transform: rotate(0deg);
  transform-origin: left bottom;
  transition: all .8s .4s;
}
.page-home .sec8.is-fade:after {
  transform: rotate(-20deg);
}

.page-home .sec8 .sec-inner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: url(../images/home/sec8-bg.svg) no-repeat center bottom;
  background-size: cover;
}

.page-home .sec8 .image {
  position: relative;
  margin: 0 auto;
}
.page-home .sec8 .image .mask {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-home .sec8 .image .mask span {
  display: block;
  position: absolute;
  width: 20%;
  height: 50%;
  background-color: #f00;
  opacity: 1;
  transition: all .6s;
}
.page-home .sec8 .image.is-fade .mask span {
  opacity: 0;
}
.page-home .sec8 .image .mask span:nth-child(1)  { left:  0%; top:  0%; transition-delay: 0.6s; }
.page-home .sec8 .image .mask span:nth-child(2)  { left: 20%; top:  0%; transition-delay: 0s; }
.page-home .sec8 .image .mask span:nth-child(3)  { left: 40%; top:  0%; transition-delay: 1.4s; }
.page-home .sec8 .image .mask span:nth-child(4)  { left: 60%; top:  0%; transition-delay: 0.4s; }
.page-home .sec8 .image .mask span:nth-child(5)  { left: 80%; top:  0%; transition-delay: 1s; }
.page-home .sec8 .image .mask span:nth-child(6)  { left:  0%; top: 50%; transition-delay: 1.2s; }
.page-home .sec8 .image .mask span:nth-child(7)  { left: 20%; top: 50%; transition-delay: 1.8s; }
.page-home .sec8 .image .mask span:nth-child(8)  { left: 40%; top: 50%; transition-delay: 0.8s; }
.page-home .sec8 .image .mask span:nth-child(9)  { left: 60%; top: 50%; transition-delay: 1.6s; }
.page-home .sec8 .image .mask span:nth-child(10) { left: 80%; top: 50%; transition-delay: 0.2s; }

.page-home .sec8 .texts {
  margin-top: 4.5%;
}
.page-home .sec8 .texts p {
  position: relative;
  overflow: hidden;
  margin: 0 auto 1.2%;
}
.page-home .sec8 .texts p:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-101%);
  transition: transform .8s, width .8s 1s;
}
.page-home .sec8 .texts p.is-fade-next:after {
  width: 0;
  transform: translateX(0);
}
.page-home .sec8 .texts img {
  display: block;
  transform: translateY(101%);
  transition: all .8s 1s;
}
.page-home .sec8 .texts p.is-fade-next img {
  transform: translateY(0);
}
@media screen and (max-width: 767px) {
  .page-home .sec8 .texts p {
    margin: 0 auto 2%;
  }
}

/* --------------------------------
[サンプルコード]
-------------------------------- */
/* 白文字が太いとき
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  */
/* 画像文字を縮小しべぼやけるとき
  backface-visibility;
  -webkit-backface-visibility;
  */