@charset "UTF-8";
/****************************************

目次 
1.ベース
2.ヘッダー
3.フッター
4.トップページ
5.CONCEPT
6.MOVIE
7.GALLERY
8.ACCESS

*****************************************/
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
/****************************************


1.ベース


*****************************************/
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure {
  border: 0 none;
  font-size: 16px;
  font-style: normal;
  margin: 0;
  outline: 0 none;
  padding: 0;
  vertical-align: top;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 500;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: auto;
  color: #000000;
  -webkit-text-size-adjust: none; }

html {
  width: 100%;
  height: 100%; }

.inner {
  width: 80%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }
  @media all and (max-width: 768px) {
    .inner {
      width: 90%; } }

.tit {
  display: flex;
  justify-content: center; }

h1 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Anton', sans-serif;
  font-size: 300px;
  color: #28557D;
  line-height: 0.93; }
  @media all and (max-width: 1280px) {
    h1 {
      font-size: 21vw;
      line-height: 0.93; } }
  @media all and (max-width: 768px) {
    h1 {
      font-size: 21vw;
      line-height: 0.83; } }

h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 34px;
  font-weight: bold;
  font-style: italic;
  color: #28557D;
  letter-spacing: 1px;
  border-bottom: 4px solid #28557D;
  display: inline-block;
  margin-bottom: 70px;
  margin-left: auto;
  margin-right: auto; }
  @media all and (max-width: 768px) {
    h2 {
      font-size: 24px;
      margin-bottom: 30px; } }

@media all and (max-width: 768px) {
  .spBr {
    display: none; } }

/*インビュー関係*/
.inview {
  transition: all 5000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform,opacity;
  opacity: 0; }
  .inview.left {
    transform: translateX(-30px); }
  .inview.right {
    transform: translateX(30px); }
  .inview.bottom {
    transform: translateY(20px); }
  .inview.delay {
    transition-delay: 350ms; }
  .inview.action {
    opacity: 1;
    transform: translate(0px); }

/****************************************


2.ヘッダー


*****************************************/
header {
  width: 100%;
  position: absolute;
  top: calc( 100vh - 84px );
  left: 0;
  z-index: 3;
  /***ナビボタン***/
  /**javascript**/ }
  @media all and (max-width: 768px) {
    header {
      position: absolute;
      top: 0;
      left: 0; } }
  header.fixed {
    position: fixed;
    top: 0; }
  header nav {
    background: #28557D;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-top: 30px;
    padding-bottom: 30px; }
    @media all and (max-width: 768px) {
      header nav {
        background: rgba(40, 85, 125, 0.95);
        display: block;
        width: 100%;
        height: 0;
        padding-top: 115px;
        padding-bottom: 0;
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all .5s ease-in-out; } }
  header nav.open {
    height: 100%;
    z-index: 99;
    opacity: 1; }
  header nav li {
    line-height: 14px;
    margin-right: 30px; }
    @media all and (max-width: 768px) {
      header nav li {
        width: 60%;
        line-height: 1;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px; } }
  header nav li:last-child {
    margin-right: 0;
    margin-left: 30px; }
    @media all and (max-width: 768px) {
      header nav li:last-child {
        margin-left: auto;
        margin-right: auto; } }
  header nav li:last-child a {
    padding: 5px 15px;
    background: #FFFFFF;
    border-radius: 30px;
    transition: all 0.8s; }
    @media all and (max-width: 768px) {
      header nav li:last-child a {
        padding: 5px 20px;
        background: none;
        border: 1px solid #FFFFFF;
        border-radius: 30px; } }
  header nav li:last-child a:hover {
    opacity: 0.8; }
  header nav li:last-child a span {
    color: #28557D;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 2px; }
    @media all and (max-width: 768px) {
      header nav li:last-child a span {
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 400; } }
  header nav li a {
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px; }
    @media all and (max-width: 768px) {
      header nav li a {
        font-size: 20px;
        font-weight: 300; } }
  header nav li a span {
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px; }
    @media all and (max-width: 768px) {
      header nav li a span {
        font-size: 22px;
        font-weight: 300; } }
  @media all and (max-width: 768px) {
    header nav li:nth-child(3) {
      border-bottom: 1px solid #FFFFFF;
      padding-bottom: 60px; } }
  header nav li:nth-child(4) {
    margin-right: 0; }
    @media all and (max-width: 768px) {
      header nav li:nth-child(4) {
        margin-right: auto;
        margin-bottom: 20px; } }
  @media all and (max-width: 768px) {
    header nav li:nth-child(5) {
      margin-bottom: 30px; } }
  header .tel {
    background-image: url("img/iconTel.svg");
    background-repeat: no-repeat;
    background-position: top 0px left 15px;
    background-size: 11%;
    padding-left: 40px;
    padding-top: 1px;
    padding-bottom: 1px; }
    @media all and (max-width: 768px) {
      header .tel {
        background-position: top 2px right 100%;
        padding-left: 30px; } }
  header .instagram {
    background-image: url("img/iconInsta.svg");
    background-repeat: no-repeat;
    background-position: top 0px left 15px;
    background-size: 11%;
    padding-left: 40px;
    padding-top: 1px;
    padding-bottom: 1px; }
    @media all and (max-width: 768px) {
      header .instagram {
        background-position: top 2px right 100%;
        padding-left: 30px; } }
  header .navBtn {
    display: none; }
    @media all and (max-width: 768px) {
      header .navBtn {
        display: block;
        width: 30px;
        position: absolute;
        top: 30px;
        right: 30px;
        cursor: pointer;
        z-index: 999; } }
  @media all and (max-width: 768px) {
    header .navBtn span {
      display: block;
      height: 2px;
      width: 100%;
      background: #28557D;
      border-radius: 2px;
      transition: all .5s ease-in-out; } }
  @media all and (max-width: 768px) {
    header .navBtn span:nth-child(1) {
      margin-bottom: 10px; } }
  @media all and (max-width: 768px) {
    header .navBtn span:nth-child(2) {
      margin-bottom: 10px; } }
  @media all and (max-width: 768px) {
    header .navBtn.active span:nth-child(1) {
      -webkit-transform: translateY(12px) translateX(0) rotate(45deg);
      -ms-transform: translateY(12px) translateX(0) rotate(45deg);
      transform: translateY(12px) translateX(0) rotate(45deg);
      background: #FFFFFF; } }
  @media all and (max-width: 768px) {
    header .navBtn.active span:nth-child(2) {
      margin-top: 5px;
      opacity: 0;
      -webkit-transform: translateY(12px);
      -ms-transform: translateY(12px);
      transform: translateY(12px); } }
  @media all and (max-width: 768px) {
    header .navBtn.active span:nth-child(3) {
      -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
      -ms-transform: translateY(-12px) translateX(0) rotate(-45deg);
      transform: translateY(-12px) translateX(0) rotate(-45deg);
      background: #FFFFFF; } }

/****************************************


3.フッター


*****************************************/
.footerBg {
  background-image: url("img/footerBg.jpg");
  background-repeat: no-repeat;
  background-size: cover; }
  @media all and (max-width: 768px) {
    .footerBg {
      background-size: 118%;
      background-position: bottom;
      margin-top: 175px; } }

footer {
  margin-top: 100px; }
  footer .contactBtn {
    display: flex;
    justify-content: center; }
  footer .contactBtn a {
    font-family: 'Roboto', sans-serif;
    font-size: 38px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: 4px;
    background: rgba(0, 0, 0, 0);
    border: 2px solid #FFFFFF;
    border-radius: 40px;
    padding: 10px 45px;
    transition: all 0.8s; }
    @media all and (max-width: 768px) {
      footer .contactBtn a {
        font-size: 24px;
        padding: 10px 35px; } }
  footer .contactBtn a:hover {
    background: rgba(0, 0, 0, 0.3); }
  footer .footerContact {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 230px; }
    @media all and (max-width: 768px) {
      footer .footerContact {
        margin-top: 55px; } }
  footer .footerLogo {
    margin-right: 50px;
    width: 93px; }
    @media all and (max-width: 768px) {
      footer .footerLogo {
        width: 15%; } }
  footer .footerLogo a {
    width: 100%; }
  footer .footerLogo a img {
    width: 100%; }
  footer .telInsta ul li a {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #FFFFFF; }
    @media all and (max-width: 768px) {
      footer .telInsta ul li a {
        font-size: 18px; } }
  footer .tel {
    background-image: url("img/iconTel.svg");
    background-repeat: no-repeat;
    background-position: top 0px left 15px;
    background-size: 11%;
    padding-left: 65px;
    margin-bottom: 20px; }
    @media all and (max-width: 768px) {
      footer .tel {
        background-position: top 2px right 100%;
        padding-left: 30px;
        margin-bottom: 10px; } }
  footer .instagram {
    background-image: url("img/iconInsta.svg");
    background-repeat: no-repeat;
    background-position: top 5px left 15px;
    background-size: 11%;
    padding-left: 65px; }
    @media all and (max-width: 768px) {
      footer .instagram {
        background-position: top 2px right 100%;
        padding-left: 30px; } }
  footer .weddingCircus {
    display: flex;
    justify-content: center;
    margin-top: 100px; }
    @media all and (max-width: 768px) {
      footer .weddingCircus {
        margin-top: 40px; } }
  footer .weddingCircus a {
    width: 20%; }
    @media all and (max-width: 768px) {
      footer .weddingCircus a {
        width: 55%; } }
  footer .copy {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    margin-top: 20px;
    padding-bottom: 100px; }
    @media all and (max-width: 768px) {
      footer .copy {
        font-size: 14px;
        padding-bottom: 50px; } }

/****************************************


4.トップページ


*****************************************/
.topImg {
  width: 100%;
  height: calc( 100vh - 70px );
  background-image: url("img/TOP.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative; }
  @media all and (max-width: 768px) {
    .topImg {
      height: calc( 100vh - 50px );
      border-bottom: 50px solid #28557D; } }

.logo {
  margin-bottom: 350px;
  display: flex;
  justify-content: center;
  padding-top: 80px; }
  @media all and (max-width: 768px) {
    .logo {
      width: 21%;
      margin-left: auto;
      margin-right: auto;
      padding-top: 60px; } }

/****************************************


5.CONCEPT


*****************************************/
.concept {
  margin-top: 210px; }
  @media all and (max-width: 768px) {
    .concept {
      margin-top: 50px; } }
  .concept .conceptImg1 {
    width: 100%;
    height: 685px;
    background-image: url("img/CONCEPT_01.jpg");
    background-repeat: no-repeat;
    background-position: left; }
    @media all and (max-width: 1024px) {
      .concept .conceptImg1 {
        height: 600px; } }
    @media all and (max-width: 768px) {
      .concept .conceptImg1 {
        height: 380px;
        background-position: center;
        background-size: 153%; } }
  .concept .imgTxtWrap {
    display: flex;
    justify-content: center; }
    @media all and (max-width: 768px) {
      .concept .imgTxtWrap {
        display: block; } }
  .concept .conceptImg2 {
    margin-top: 50px;
    margin-left: 220px; }
    @media all and (max-width: 768px) {
      .concept .conceptImg2 {
        width: 60%;
        margin-top: 40px;
        margin-left: 40px; } }
  .concept .txt {
    height: 1000px;
    background-color: #FFFFFF;
    background-image: url("img/conceptBg.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 68%;
    padding: 90px 70px;
    transform: translateY(-250px); }
    @media all and (max-width: 768px) {
      .concept .txt {
        height: auto;
        background-position: right;
        background-size: 45%;
        padding: 60px 45px;
        margin-right: 40px;
        transform: translateY(0px); } }
  .concept .txt p {
    font-size: 18px;
    letter-spacing: 1.5px;
    margin-bottom: 30px; }
    @media all and (max-width: 768px) {
      .concept .txt p {
        font-size: 16px; } }

/****************************************


6.MOVIE


*****************************************/
.movie {
  transform: translateY(-540px);
  height: 22vw; }
  @media all and (max-width: 1024px) {
    .movie {
      height: 15vw; } }
  @media all and (max-width: 768px) {
    .movie {
      transform: translateY(0px);
      height: auto; } }
  .movie .iframe {
    position: relative;
    padding-top: 45.25%;
    overflow: hidden; }
    @media all and (max-width: 768px) {
      .movie .iframe {
        padding-top: 50.25%; } }
  .movie .iframe iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; }

/****************************************


7.GALLERY


*****************************************/
.gallery {
  position: relative;
  padding-top: 84px;
  /* swiperボタン */
  /* swiper青矢印消す */
  /* swiper大きさ調整 */ }
  .gallery .swiper-button-prev,
  .gallery .swiper-button-next {
    width: 48px;
    /* ボタンの幅 */
    height: 48px;
    /* ボタンの高さ */
    background-size: 48px 48px;
    /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
    margin-top: -24px;
    /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */ }
  .gallery .swiper-button-next {
    background-image: url("img/slideBtn.svg");
    background-repeat: no-repeat;
    transform: scale(-1, 1);
    right: 13.8%; }
    @media all and (max-width: 768px) {
      .gallery .swiper-button-next {
        right: 7%; } }
  .gallery .swiper-button-prev {
    background-image: url("img/slideBtn.svg");
    background-repeat: no-repeat;
    left: 13.8%; }
    @media all and (max-width: 768px) {
      .gallery .swiper-button-prev {
        left: 7%; } }
  .gallery .swiper-button-prev:after,
  .gallery .swiper-button-next:after {
    display: none; }
  .gallery .swiper-container {
    width: 100%;
    padding: 45px 0; }
  .gallery .swiper-slide {
    opacity: 0.8;
    overflow: hidden;
    transition: .7s; }
  .gallery .swiper-slide img {
    width: 100%; }
  .gallery .swiper-slide-active {
    opacity: 1;
    z-index: 1;
    transform: scale(1.1);
    /* スライドの大きさ調整 */ }
    @media all and (max-width: 768px) {
      .gallery .swiper-slide-active {
        transform: scale(1.3); } }
  .gallery .swiper-scrollbar {
    background: none; }
  .gallery .tit h1 {
    width: 100%;
    position: absolute;
    bottom: -145px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; }
    @media all and (max-width: 768px) {
      .gallery .tit h1 {
        bottom: -72px; } }
    @media all and (max-width: 576px) {
      .gallery .tit h1 {
        bottom: -25px; } }
  .gallery .tit h1 img {
    width: 100%; }

/****************************************


8.ACCESS


*****************************************/
.access {
  padding-top: 84px;
  padding-bottom: 300px;
  margin-top: 230px; }
  @media all and (max-width: 768px) {
    .access {
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 100px; } }
  .access h2 {
    margin-bottom: 150px; }
    @media all and (max-width: 768px) {
      .access h2 {
        margin-bottom: 50px; } }
  .access .inner {
    display: flex;
    justify-content: space-between; }
    @media all and (max-width: 768px) {
      .access .inner {
        display: block;
        width: 80%; } }
  @media all and (max-width: 768px) {
    .access .txtWrap {
      margin-bottom: 50px; } }
  .access .txtWrap span {
    display: inline-block;
    font-size: 20px;
    margin-bottom: 30px; }
    @media all and (max-width: 768px) {
      .access .txtWrap span {
        font-size: 18px; } }
  .access .txtWrap span a {
    font-size: 20px;
    margin-bottom: 30px; }
    @media all and (max-width: 768px) {
      .access .txtWrap span a {
        font-size: 18px;
        margin-bottom: 0; } }
  .access .txtWrap span:nth-child(2) {
    margin-bottom: 80px; }
  .access .txtWrap p {
    margin-bottom: 30px; }
  .access .map {
    position: relative;
    width: 65%;
    padding-top: 40.25%;
    overflow: hidden; }
    @media all and (max-width: 768px) {
      .access .map {
        width: 100%;
        padding-top: 84.25%; } }
  .access .map iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; }

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