@charset "UTF-8";
/*---------------------------*/
* {
  margin: 0px;
  padding: 0px;
  font-family: 'Questrial', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif; }

html, 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,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; }

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
  display: block; }

body {
  margin: 0px;
  padding: 0px; }

/* LINK --------------------------- */
a:link,
a:active {
  text-decoration: none; }

a:visited {
  text-decoration: none; }

a:focus {
  outline: none; }

a {
  -webkit-tap-highlight-color: transparent; }

/* TEXT --------------------------- */
p {
  text-align: left;
  color: #7f7f7f;
  font-family: 'Questrial', sans-serif; }

.mincho {
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'HG明朝E', Sans-Serif;
  font-weight: 500;
  font-feature-settings: 'palt'; }
  .mincho strong {
    font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'HG明朝E', Sans-Serif;
    font-weight: 500;
    font-feature-settings: 'palt'; }

/* OTHER --------------------------- */
ul,
li {
  list-style: none; }

img {
  display: block;
  width: 100%; }

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

/* PC/SP ------------------- */
.only_sp {
  display: block; }

.only_pc {
  display: none; }

.Pnum {
  position: absolute;
  bottom: 10px;
  right: 1em;
  font-size: 10px;
  color: #444444; }

/* --------------------------------------
SP ここから
----------------------------------------- */
.bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden; }
  .bg span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 25vh;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 0.8s; }
    .bg span.hide {
      opacity: 0; }
  .bg.bg1 span {
    background-image: url(../images/01.jpg);
    background-position: center 50%; }
  .bg.bg2 span {
    background-image: url(../images/16.jpg);
    background-position: 40% center; }
  .bg.bg3 span {
    background-image: url(../images/37.jpg);
    background-position: 50% 20%; }
  .bg.bg4 span {
    background-image: url(../images/53.jpg);
    background-position: 50% center; }

/* bg */
header {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  /* line */ }
  header h1 {
    position: absolute;
    bottom: 12vh;
    left: 0;
    right: 0;
    margin: 0 auto 0 auto;
    width: 50%; }
  header .Pnum {
    position: absolute;
    bottom: 5px;
    right: 10px; }
  header .line {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    margin-left: -20px;
    width: 40px;
    height: 60px;
    transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    transition-delay: .4s;
    opacity: 1; }
    header .line > span {
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -.5px;
      width: 1px;
      height: 100%;
      transform: scaleY(0);
      -webkit-transform: scaleY(0);
      transform-origin: top left;
      -webkit-transform-origin: top left;
      animation: scroll-bar 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite forwards;
      -webkit-animation: scroll-bar 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite forwards;
      background-color: #f5f5f5;
      pointer-events: none; }

@-webkit-keyframes scroll-bar {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left; }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top left;
    transform-origin: top left; }
  75% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left; }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left; } }

@keyframes scroll-bar {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left; }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top left;
    transform-origin: top left; }
  75% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left; }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left; } }
  header.fade {
    opacity: 0;
    transition: opacity 0.6s 0.2s ease-in; }
    header.fade h1 {
      opacity: 0;
      transition: opacity 0.8s 1s ease-in; }
  header.fadein {
    opacity: 1; }
    header.fadein h1 {
      opacity: 1; }

/* header */
.secBox {
  position: relative;
  z-index: 10;
  /* photo-bg */
  /* photoArea */
  /* photoCenter */
  /* twoCard */
  /* sideBlock */
  /* photo3card */
  /* photo2card */ }
  .secBox .bg-white {
    background: #fff; }
  .secBox h2 {
    padding: 100px 1em 40px 1em;
    box-sizing: border-box;
    background: #fff; }
  .secBox h3 {
    padding-top: 40px; }
  .secBox h2, .secBox h3 {
    text-align: center;
    line-height: 1.3;
    font-weight: normal;
    font-family: 'Questrial', sans-serif;
    font-feature-settings: 'palt';
    font-size: 18px;
    color: #7f7f7f;
    background: #fff; }
    .secBox h2 span, .secBox h3 span {
      font-weight: normal;
      font-family: 'Questrial', sans-serif;
      color: #5f5b59; }
    .secBox h2.fade, .secBox h3.fade {
      opacity: 0;
      transition: opacity 0.6s 0.2s ease-in; }
    .secBox h2.fadein, .secBox h3.fadein {
      opacity: 1; }
  .secBox .photo-bg {
    position: relative;
    width: 100%;
    height: 100vh; }
    .secBox .photo-bg .Pnum {
      position: absolute;
      bottom: 5px;
      left: 1em; }
      .secBox .photo-bg .Pnum.right {
        left: auto;
        right: 1em; }
  .secBox .photoArea {
    margin: 0 auto 60px auto; }
  .secBox .photoCenter {
    position: relative;
    margin: 0 auto 10px auto;
    max-width: 340px;
    height: 500px;
    width: 95%;
    /* imgBox */
    /* swiper-container */ }
    .secBox .photoCenter .imgBox {
      position: relative; }
      .secBox .photoCenter .imgBox > div {
        width: 100%;
        height: 481px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #efefef; }
    .secBox .photoCenter li .Pnum {
      bottom: 30px; }
    .secBox .photoCenter .swiper-container {
      height: 100%; }
      .secBox .photoCenter .swiper-container .swiper-pagination {
        bottom: 0;
        left: 0;
        width: auto; }
        .secBox .photoCenter .swiper-container .swiper-pagination .swiper-pagination-bullet {
          border-radius: 0;
          width: 20px;
          height: 6px;
          background-color: #7f7f7f; }
          .secBox .photoCenter .swiper-container .swiper-pagination .swiper-pagination-bullet:first-of-type {
            margin-left: 0; }
    .secBox .photoCenter.fade {
      opacity: 0;
      transition: opacity 0.4s 0.2s ease-in; }
    .secBox .photoCenter.fadein {
      opacity: 1; }
  .secBox .twoCard {
    height: 252px;
    /* imgBox */ }
    .secBox .twoCard .imgBox > div {
      height: 252px; }
  .secBox .sideBlock {
    margin: 0 auto 0 auto;
    width: 90%;
    /* imgBox */ }
    .secBox .sideBlock .imgBox {
      position: relative;
      max-width: 250px;
      height: 350px; }
      .secBox .sideBlock .imgBox > div {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #efefef; }
      .secBox .sideBlock .imgBox.right {
        margin: 0 0 0 auto; }
      .secBox .sideBlock .imgBox.left {
        margin: 0 auto 0 0; }
      .secBox .sideBlock .imgBox.top {
        margin-bottom: 5% !important; }
      .secBox .sideBlock .imgBox > div {
        width: 100%;
        height: 100%; }
    .secBox .sideBlock.fade .right {
      transform: translateY(-80px);
      opacity: 0;
      transition: opacity 0.4s 0.2s ease-in; }
    .secBox .sideBlock.fade .left {
      transform: translateY(-50px);
      opacity: 0;
      transition: opacity 0.4s 0.6s ease-in; }
    .secBox .sideBlock.fadein .right {
      transform: none;
      opacity: 1; }
    .secBox .sideBlock.fadein .left {
      transform: none;
      opacity: 1; }
  .secBox .photo3card {
    margin: 0 auto 0 auto;
    width: 90%; }
    .secBox .photo3card .imgBox {
      position: relative;
      margin: 0 auto 5% auto;
      max-width: 340px;
      height: 244px; }
      .secBox .photo3card .imgBox > div {
        max-width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #efefef; }
      .secBox .photo3card .imgBox.bottom {
        height: 500px; }
    .secBox .photo3card.fade .top {
      transform: translateY(-80px);
      opacity: 0;
      transition: opacity 0.4s 0.2s ease-in; }
    .secBox .photo3card.fade .center {
      transform: translateY(-50px);
      opacity: 0;
      transition: opacity 0.4s 0.6s ease-in; }
    .secBox .photo3card.fade .bottom {
      transform: translateY(-50px);
      opacity: 0;
      transition: opacity 0.4s 0.8s ease-in; }
    .secBox .photo3card.fadein .top {
      transform: none;
      opacity: 1; }
    .secBox .photo3card.fadein .center {
      transform: none;
      opacity: 1; }
    .secBox .photo3card.fadein .bottom {
      transform: none;
      opacity: 1; }
  .secBox .photo2card {
    margin: 0 auto 0 auto;
    width: 95%; }
    .secBox .photo2card .imgBox {
      position: relative;
      margin: 0 auto 5% auto;
      max-width: 260px;
      width: 100%;
      max-height: 368px;
      height: 141.92vw; }
      .secBox .photo2card .imgBox > div {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #efefef; }
    .secBox .photo2card.left {
      margin: 0 auto 0 auto; }
      .secBox .photo2card.left .imgBox {
        margin: 0 auto 0 0; }
    .secBox .photo2card.right {
      margin: 0 auto 0 auto; }
      .secBox .photo2card.right .imgBox {
        margin: 0 0 0 auto; }
    .secBox .photo2card.fade {
      transition: opacity 0.4s 0.6s ease-in;
      transform: translateY(-80px);
      opacity: 0; }
    .secBox .photo2card.fadein {
      transform: none;
      opacity: 1; }

/* secBox */
.sec1 {
  /* introArea */
  /* videoArea */
  /* area1 */
  /* area2 */
  /* area2 */
  /* area2 */ }
  .sec1 .introArea {
    margin: 0 auto 0 auto;
    padding: 30px 0 60px 0;
    width: 90%; }
    .sec1 .introArea .imgBox {
      display: flex;
      position: relative;
      margin: 0 auto 50px auto;
      width: 200px;
      height: 200px;
      background-image: url(../images/02.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center; }
      .sec1 .introArea .imgBox:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.4); }
      .sec1 .introArea .imgBox p {
        position: relative;
        z-index: 1;
        align-self: center;
        width: 100%;
        text-align: center;
        font-size: 20px; }
    .sec1 .introArea p {
      line-height: 1.3;
      font-family: 'Questrial', sans-serif;
      font-size: 15px; }
  .sec1 .videoArea {
    position: relative;
    margin: 0 0 60px 0;
    width: 100%;
    height: 84.26vw; }
    .sec1 .videoArea iframe {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%; }
  .sec1 .area1 {
    /* photoCenter */
    /* sideBlock */ }
    .sec1 .area1 .photoCenter .img1 {
      background-image: url(../images/05.jpg); }
    .sec1 .area1 .photoCenter .img2 {
      background-image: url(../images/06.jpg); }
    .sec1 .area1 .photoCenter .Pnum {
      color: #ffffff; }
      .sec1 .area1 .photoCenter .Pnum.bk {
        color: #444444; }
    .sec1 .area1 .sideBlock .img1 {
      background-image: url(../images/03.jpg); }
    .sec1 .area1 .sideBlock .img2 {
      background-image: url(../images/04.jpg); }
    .sec1 .area1 .sideBlock .bottom .Pnum {
      color: #ffffff; }
  .sec1 .area2 {
    /* photoCenter */
    /* sideBlock */ }
    .sec1 .area2 .photoCenter .img1 {
      background-image: url(../images/07.jpg); }
    .sec1 .area2 .photoCenter .Pnum {
      color: #ffffff; }
    .sec1 .area2 .sideBlock .img1 {
      background-image: url(../images/08.jpg); }
    .sec1 .area2 .sideBlock .img2 {
      background-image: url(../images/09.jpg); }
    .sec1 .area2 .sideBlock .bottom .Pnum {
      color: #ffffff; }
    .sec1 .area2 .sideBlock.fade .right {
      transition: opacity 0.4s 0.6s ease-in; }
    .sec1 .area2 .sideBlock.fade .left {
      transition: opacity 0.4s 0.2s ease-in; }
  .sec1 .area3 {
    /* photoCenter */
    /* sideBlock */ }
    .sec1 .area3 .photoCenter .img1 {
      background-image: url(../images/12.jpg); }
    .sec1 .area3 .photoCenter .Pnum {
      color: #ffffff; }
    .sec1 .area3 .sideBlock .img1 {
      background-image: url(../images/10.jpg); }
    .sec1 .area3 .sideBlock .img2 {
      background-image: url(../images/11.jpg); }
    .sec1 .area3 .sideBlock .bottom .Pnum {
      color: #ffffff; }
  .sec1 .area4 {
    margin-bottom: 0;
    padding-bottom: 80px;
    /* photoCenter */
    /* sideBlock */ }
    .sec1 .area4 .photoCenter .img1 {
      background-image: url(../images/13.jpg); }
    .sec1 .area4 .photoCenter .Pnum {
      color: #444444; }
    .sec1 .area4 .sideBlock .img1 {
      background-image: url(../images/14.jpg); }
    .sec1 .area4 .sideBlock .img2 {
      background-image: url(../images/15.jpg); }
    .sec1 .area4 .sideBlock.fade .right {
      transition: opacity 0.4s 0.6s ease-in; }
    .sec1 .area4 .sideBlock.fade .left {
      transition: opacity 0.4s 0.2s ease-in; }

/* sec1 */
.sec2 {
  /* catch */
  /* area1 */
  /* area2 */
  /* area3 */
  /* area4 */
  /* area5 */
  /* area6 */
  /* area7 */ }
  .sec2 h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0;
    background-color: transparent; }
  .sec2 .bgstart {
    padding-top: 30px; }
  .sec2 .catch {
    position: relative;
    margin: 0 auto 60px auto;
    padding: 0 0 100px 0;
    width: 90%; }
    .sec2 .catch p {
      position: relative;
      z-index: 1;
      margin: 0 auto 5px auto;
      width: 80%;
      line-height: 1.3;
      font-size: 15px; }
    .sec2 .catch .imgBox {
      margin: 30px 0 0 auto;
      width: 277px;
      height: 222px;
      background-image: url(../images/17.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #efefef; }
      .sec2 .catch .imgBox:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.4); }
  .sec2 .area1 {
    flex-direction: row-reverse;
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area1 .photoCenter .img1 {
      background-image: url(../images/21.jpg); }
    .sec2 .area1 .photoCenter .Pnum {
      color: #ffffff; }
    .sec2 .area1 .photo3card .img1 {
      background-image: url(../images/18.jpg); }
    .sec2 .area1 .photo3card .img2 {
      background-image: url(../images/19.jpg); }
    .sec2 .area1 .photo3card .img3 {
      background-image: url(../images/20.jpg); }
  .sec2 .area2 {
    flex-direction: row-reverse;
    margin: 0 0 20px 0;
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area2 .photoCenter .img1 {
      background-image: url(../images/23.jpg); }
    .sec2 .area2 .photo2card .img1 {
      background-image: url(../images/22.jpg); }
  .sec2 .area3 {
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area3 .photoCenter .img1 {
      background-image: url(../images/24.jpg); }
    .sec2 .area3 .photo2card .img1 {
      background-image: url(../images/25.jpg); }
  .sec2 .area4 {
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area4 .photoCenter .img1 {
      background-image: url(../images/26.jpg); }
    .sec2 .area4 .photoCenter .img2 {
      background-image: url(../images/27.jpg); }
    .sec2 .area4 .photoCenter .Pnum.wh {
      color: #ffffff; }
    .sec2 .area4 .sideBlock .img1 {
      background-image: url(../images/28.jpg); }
    .sec2 .area4 .sideBlock .img2 {
      background-image: url(../images/29.jpg); }
    .sec2 .area4 .sideBlock.fade .right {
      transition: opacity 0.4s 0.6s ease-in; }
    .sec2 .area4 .sideBlock.fade .left {
      transition: opacity 0.4s 0.2s ease-in; }
  .sec2 .area5 {
    margin-bottom: 15px !important;
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area5 .photoCenter .img1 {
      background-image: url(../images/31.jpg); }
    .sec2 .area5 .photoCenter .Pnum {
      color: #ffffff; }
    .sec2 .area5 .photo2card .img1 {
      background-image: url(../images/30.jpg);
      background-position: center right; }
  .sec2 .area6 {
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area6 .photoCenter .img1 {
      background-image: url(../images/32.jpg); }
    .sec2 .area6 .photo2card .img1 {
      background-image: url(../images/33.jpg); }
  .sec2 .area7 {
    margin-bottom: 0;
    padding-bottom: 80px;
    /* photoCenter */
    /* sideBlock */ }
    .sec2 .area7 .photoCenter .img1 {
      background-image: url(../images/36.jpg); }
    .sec2 .area7 .sideBlock .img1 {
      background-image: url(../images/34.jpg); }
    .sec2 .area7 .sideBlock .img2 {
      background-image: url(../images/35.jpg); }
    .sec2 .area7 .sideBlock.fade .right {
      transition: opacity 0.4s 0.6s ease-in; }
    .sec2 .area7 .sideBlock.fade .left {
      transition: opacity 0.4s 0.2s ease-in; }

/* sec2 */
.sec3 {
  /* area1 */
  /* area2 */
  /* area3 */
  /* area4 */ }
  .sec3 .bgstart {
    padding-top: 30px; }
  .sec3 h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0;
    background-color: transparent; }
  .sec3 .area1 {
    /* photoCenter */
    /* sideBlock */ }
    .sec3 .area1 .photoCenter .img1 {
      background-image: url(../images/38.jpg); }
    .sec3 .area1 .photoCenter .img2 {
      background-image: url(../images/39.jpg); }
    .sec3 .area1 .photoCenter .Pnum {
      color: #ffffff; }
    .sec3 .area1 .sideBlock .img1 {
      background-image: url(../images/40.jpg); }
    .sec3 .area1 .sideBlock .img2 {
      background-image: url(../images/41.jpg); }
    .sec3 .area1 .sideBlock .bottom .Pnum {
      color: #ffffff; }
  .sec3 .area2 {
    flex-direction: row-reverse;
    margin-bottom: 15px;
    /* photoCenter */
    /* sideBlock */ }
    .sec3 .area2 .photoCenter .img1 {
      background-image: url(../images/43.jpg); }
    .sec3 .area2 .photoCenter .Pnum {
      color: #ffffff; }
    .sec3 .area2 .photo2card .imgBox {
      height: 155.61vw; }
    .sec3 .area2 .photo2card .img1 {
      background-image: url(../images/42.jpg);
      background-position: center right; }
  .sec3 .area3 {
    /* photoCenter */
    /* sideBlock */ }
    .sec3 .area3 .photoCenter .img1 {
      background-image: url(../images/44.jpg); }
    .sec3 .area3 .photoCenter .Pnum {
      color: #ffffff; }
    .sec3 .area3 .photo2card .img1 {
      background-image: url(../images/45.jpg);
      background-position: center right; }
  .sec3 .area4 {
    /* photoCenter */
    /* sideBlock */ }
    .sec3 .area4 .photoCenter .img1 {
      background-image: url(../images/48.jpg); }
    .sec3 .area4 .photoCenter .img2 {
      background-image: url(../images/49.jpg); }
    .sec3 .area4 .sideBlock .img1 {
      background-image: url(../images/46.jpg); }
    .sec3 .area4 .sideBlock .img2 {
      background-image: url(../images/47.jpg); }
    .sec3 .area4 .sideBlock.fade .right {
      transition: opacity 0.4s 0.6s ease-in; }
    .sec3 .area4 .sideBlock.fade .left {
      transition: opacity 0.4s 0.2s ease-in; }
  .sec3 .area5 {
    margin-bottom: 0;
    padding-bottom: 80px;
    /* photoCenter */
    /* sideBlock */ }
    .sec3 .area5 .photoCenter .img1 {
      background-image: url(../images/50.jpg); }
    .sec3 .area5 .sideBlock .img1 {
      background-image: url(../images/51.jpg); }
    .sec3 .area5 .sideBlock .img2 {
      background-image: url(../images/52.jpg); }

/* sec3 */
.sec5 h2 {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  background-color: transparent; }

/* sec5 */
footer {
  position: relative;
  z-index: 10;
  padding-top: 85px;
  padding-bottom: 20px;
  background: #fff; }
  footer ul {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 90px auto;
    width: 80px; }
  footer li {
    width: 27px; }
  footer a {
    display: block; }
  footer > div {
    padding: 0 20px 0 20px;
    box-sizing: border-box; }
    footer > div a {
      margin: 0 auto 20px auto;
      max-width: 150px; }
  footer small {
    display: block;
    text-align: center;
    font-size: 10px;
    color: #7f7f7f; }

/* footer */
@media screen and (min-width: 641px) {
  /*---------------------------*/
  body {
    min-width: 1024px; }
    body p {
      font-family: 'Questrial', 'YuGothic', 'Yu Gothic', Hiragino Sans, 'ヒラギノ角ゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', Verdana, 'ＭＳ Ｐゴシック', sans-serif; }
  /* PC/SP ------------------- */
  .only_sp {
    display: none; }
  .only_pc {
    display: block; }
  .bg {
    min-width: 1024px; }
  header h1 {
    position: absolute;
    bottom: 85px;
    max-width: 369px;
    width: 100%; }
  header .Pnum {
    left: calc(100% - 150px); }
  header.ipad h1 {
    bottom: 170px; }
  header.ipad .line {
    bottom: 85px; }
  header.ipad::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 70px;
    left: 0;
    bottom: -1px;
    background: #fff; }
  /* header */
  .secBox {
    /* photoArea */
    /* photoCenter */
    /* twoCard */
    /* sideBlock */
    /* photo3card */
    /* photo2card */ }
    .secBox h2 {
      left: 0;
      right: 0;
      margin-top: -1px;
      padding: 160px 0 160px;
      text-align: center; }
    .secBox h2, .secBox h3 {
      line-height: 1.5;
      font-size: 30px; }
      .secBox h2 br, .secBox h3 br {
        display: none; }
    .secBox .photoArea {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-bottom: 100px; }
    .secBox .photoCenter {
      margin: 0px;
      max-width: 789px;
      width: 66%;
      max-height: 1135px;
      height: 94.91vw;
      /* imgBox */
      /* swiper-container */ }
      .secBox .photoCenter .imgBox > div {
        width: 100%;
        max-height: 1115px;
        height: 92.91vw; }
      .secBox .photoCenter li .Pnum {
        bottom: 30px; }
      .secBox .photoCenter .swiper-container .swiper-pagination {
        bottom: 0;
        left: 0;
        width: auto; }
      .secBox .photoCenter.fade {
        opacity: 0;
        transition: opacity 0.4s 0.2s ease-in; }
      .secBox .photoCenter.fadein {
        opacity: 1; }
    .secBox .twoCard {
      max-width: 804px;
      width: 70%;
      max-height: 558px;
      height: 46.5vw;
      /* imgBox */ }
      .secBox .twoCard .imgBox > div {
        max-height: 558px;
        height: 46.5vw; }
    .secBox .sideBlock {
      margin: 0;
      width: 33%;
      /* imgBox */ }
      .secBox .sideBlock .imgBox {
        max-width: 393px;
        max-height: 553px;
        height: 46.0833vw; }
        .secBox .sideBlock .imgBox.right {
          margin: 0; }
        .secBox .sideBlock .imgBox.left {
          margin: 0; }
        .secBox .sideBlock .imgBox.top {
          margin-bottom: 2% !important; }
        .secBox .sideBlock .imgBox > div {
          width: 100%;
          height: 100%; }
      .secBox .sideBlock.right .imgBox {
        margin: 0 0 0 auto; }
      .secBox .sideBlock.left .imgBox {
        margin: 0 auto 0 0; }
      .secBox .sideBlock.fade .right {
        transform: translateY(-80px);
        opacity: 0;
        transition: opacity 0.4s 0.2s ease-in; }
      .secBox .sideBlock.fade .left {
        transform: translateY(-50px);
        opacity: 0;
        transition: opacity 0.4s 0.6s ease-in; }
      .secBox .sideBlock.fadein .right {
        transform: none;
        opacity: 1; }
      .secBox .sideBlock.fadein .left {
        transform: none;
        opacity: 1; }
    .secBox .photo3card {
      margin: 0;
      width: 33%; }
      .secBox .photo3card .imgBox {
        margin: 0 auto 1.333vw auto;
        max-width: 394px;
        max-height: 267px;
        height: 22.25vw; }
        .secBox .photo3card .imgBox.center {
          max-height: 263px;
          height: 21.91vw; }
        .secBox .photo3card .imgBox.bottom {
          margin-bottom: 0;
          max-height: 552px;
          height: 46vw; }
    .secBox .photo2card {
      margin: 0;
      width: 30%; }
      .secBox .photo2card .imgBox {
        position: relative;
        margin: 0 auto 5% auto;
        max-width: 396px;
        max-height: 558px;
        height: 46.5vw; }
      .secBox .photo2card.left {
        margin: 0; }
        .secBox .photo2card.left .imgBox {
          margin: 0; }
      .secBox .photo2card.right {
        margin: 0; }
        .secBox .photo2card.right .imgBox {
          margin: 0; }
  /* secBox */
  .sec1 {
    /* introArea */
    /* videoArea */
    /* area1 */
    /* area4 */ }
    .sec1 .introArea {
      display: flex;
      justify-content: space-around;
      margin: 0 auto 0 auto;
      padding: 100px 0 80px 0;
      width: 90%; }
      .sec1 .introArea .imgBox {
        margin-bottom: 0;
        width: 330px;
        height: 330px; }
        .sec1 .introArea .imgBox p {
          font-size: 30px; }
      .sec1 .introArea > p {
        align-self: center;
        max-width: 540px;
        width: 50%;
        font-size: 21px; }
    .sec1 .videoArea {
      margin-bottom: 60px;
      max-height: 676px; }
    .sec1 .area1,
    .sec1 .area3 {
      flex-direction: row-reverse; }
    .sec1 .area4 {
      padding-bottom: 80px; }
  /* sec1 */
  .sec2 {
    /* catch */
    /* area4 */
    /* area7 */ }
    .sec2 h2 {
      padding: 0; }
    .sec2 .bgstart {
      padding-top: 80px; }
    .sec2 .catch {
      position: relative;
      margin: 0 auto 60px auto;
      padding: 0 0 100px 0;
      max-width: 1000px;
      width: 100%; }
      .sec2 .catch p {
        position: absolute;
        top: 15%;
        align-self: center;
        margin: 0;
        max-width: 726px;
        width: 100%;
        font-size: 18px; }
      .sec2 .catch .imgBox {
        position: relative;
        margin: 0 0 0 auto;
        width: 491px;
        height: 392px; }
    .sec2 .area2 {
      justify-content: space-between;
      flex-direction: row-reverse;
      margin-bottom: 15px !important; }
    .sec2 .area3 {
      justify-content: space-between; }
      .sec2 .area3 .photoCenter {
        max-width: 833px;
        width: 70%; }
        .sec2 .area3 .photoCenter .img1 {
          height: 553px; }
      .sec2 .area3 .photo2card {
        max-width: 367px; }
        .sec2 .area3 .photo2card .imgBox {
          max-width: 367px;
          max-height: 553px;
          height: 150vw;
          width: 100%; }
    .sec2 .area4 .sideBlock .imgBox {
      margin: 0 0 0 auto; }
    .sec2 .area5 {
      justify-content: space-between;
      flex-direction: row-reverse; }
      .sec2 .area5 .photoCenter {
        max-width: 832px;
        width: 70%; }
        .sec2 .area5 .photoCenter .img1 {
          height: 554px; }
      .sec2 .area5 .photo2card {
        max-width: 368px; }
        .sec2 .area5 .photo2card .imgBox {
          max-width: 368px;
          height: 554px; }
    .sec2 .area6 {
      justify-content: space-between; }
      .sec2 .area6 .photoCenter {
        max-width: 800px;
        height: 561px;
        width: 66.7%; }
        .sec2 .area6 .photoCenter .img1 {
          height: 561px; }
      .sec2 .area6 .photo2card {
        max-width: 400px;
        width: 33.3%; }
        .sec2 .area6 .photo2card .imgBox {
          max-width: 400px;
          height: 561px; }
    .sec2 .area7 {
      flex-direction: row-reverse;
      margin-bottom: 0;
      padding-bottom: 80px; }
  /* sec2 */
  .sec3 {
    /* area1 */
    /* .area2 */
    /* area4 */ }
    .sec3 h2 {
      padding: 0;
      line-height: 2.5; }
    .sec3 .area1 .sideBlock .imgBox,
    .sec3 .area5 .sideBlock .imgBox {
      margin: 0 0 0 auto; }
    .sec3 .area2 {
      justify-content: space-between;
      margin-bottom: 15px; }
      .sec3 .area2 .photoCenter {
        max-width: 840px;
        width: 70%; }
        .sec3 .area2 .photoCenter .img1 {
          height: 559px; }
      .sec3 .area2 .photo2card {
        max-width: 360px;
        width: 30%; }
        .sec3 .area2 .photo2card .imgBox {
          max-width: 360px;
          max-height: 559px; }
    .sec3 .area3 {
      justify-content: space-between; }
      .sec3 .area3 .photoCenter {
        max-width: 832px;
        width: 69.3%; }
        .sec3 .area3 .photoCenter .img1 {
          max-height: 555px; }
      .sec3 .area3 .photo2card {
        max-width: 368px;
        width: 30.7%; }
        .sec3 .area3 .photo2card .imgBox {
          max-width: 368px;
          max-height: 555px; }
    .sec3 .area4 {
      flex-direction: row-reverse; }
  /* sec3 */
  .sec5 h2 {
    padding: 0; }
  /* sec5 */
  footer {
    margin-top: 0;
    padding-bottom: 20px; }
    footer ul {
      margin-bottom: 100px;
      width: 96px; }
    footer li {
      width: 30px; }
  /* footer */ }

/* min-width: 641px */
@media screen and (min-width: 1200px) {
  .secBox .bg-white {
    width: 1200px;
    padding-left: calc(50% - 600px);
    padding-right: calc(50% - 600px); } }

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