@charset "UTF-8";
/* novia_LP Global CSS */
/* リセットCSS */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,
legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

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

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

q:before, q:after {
  content: ""; }

abbr, acronym {
  border: 0;
  font-variant: normal; }

sup {
  vertical-align: text-top; }

sub {
  vertical-align: text-bottom; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  * font-size: 100%;
  -webkit-appearance: none;
  border-radius: 0; }

* {
  box-sizing: border-box; }

html, body {
  height: 100%; }

body {
  font-size: 62.5%;
  line-height: 1.8;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック",sans-serif; }

img {
  width: 100%;
  height: auto; }

.containner_box {
  max-width: 500px;
  margin: 0 auto;
  position: relative; }

.wide90 {
  width: 88%;
  margin: 9.2% auto 0; }
  .wide90.margin01 {
    margin-top: 20%; }

.first_view {
  width: 100%;
  background: #CEDDCF;
  position: relative;
  height: 177.400vw; }
  @media (min-width: 501px) {
    .first_view {
      max-height: 887px; } }
  .first_view h1 {
    width: 90.8%;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%); }
  .first_view .slider_top {
    width: 78.4%;
    z-index: 1;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%); }

.about_box .movie_box {
  width: 88%;
  margin: 0 auto 73px; }
.about_box .topocs_box {
  background: #F7F6F2;
  padding: 66px 5.2%; }
  .about_box .topocs_box h3 {
    max-width: 92px;
    margin: 0 auto 66px; }
  .about_box .topocs_box ul {
    margin-bottom: 40px; }
    .about_box .topocs_box ul li {
      margin-bottom: 32px;
      padding-bottom: 20px;
      border-bottom: 1px dotted #ccc; }
      .about_box .topocs_box ul li:last-child {
        margin-bottom: 0; }

.update_box.first {
  margin-bottom: 100px; }
  .update_box.first h2 {
    width: 58.4%;
    margin: 82px auto 22px; }
  .update_box.first ul {
    position: relative;
    height: 205.400vw;
    overflow: hidden; }
    @media (min-width: 500px) {
      .update_box.first ul {
        height: 1012px; } }
    .update_box.first ul li {
      opacity: 0;
      transition: all 2s;
      transition-timing-function: ease;
      position: absolute;
      margin: auto; }
      @media (min-width: 500px) {
        .update_box.first ul li {
          transition: all 1s; } }
      .update_box.first ul li.p01 {
        width: 75%;
        padding-top: 50px;
        left: 0;
        right: 0;
        z-index: 2; }
        .update_box.first ul li.p01.scrollin {
          padding-top: 0px; }
      .update_box.first ul li.p02 {
        width: 51.2%;
        padding-top: 90%;
        left: -50px;
        z-index: 4; }
        .update_box.first ul li.p02.scrollin {
          left: 6%; }
      .update_box.first ul li.p03 {
        width: 47.4%;
        padding-top: 115%;
        right: -50px;
        z-index: 5; }
        .update_box.first ul li.p03.scrollin {
          right: 0; }
      .update_box.first ul li.p04 {
        width: 60%;
        padding-top: 100%;
        left: 0;
        z-index: 1; }
        .update_box.first ul li.p04.scrollin {
          padding-top: 118%; }
      .update_box.first ul li.p05 {
        width: 68.2%;
        padding-top: 180%;
        left: 0;
        right: 0;
        z-index: 3; }
        .update_box.first ul li.p05.scrollin {
          padding-top: 163%; }
      .update_box.first ul li.scrollin {
        opacity: 1; }

.update_point_box {
  width: 88%;
  margin: 14% auto 0; }

.update_box.second h2 {
  width: 54.2%;
  margin: 82px auto 22px; }
.update_box.second ul {
  position: relative;
  height: 176vw;
  overflow: hidden; }
  @media (min-width: 500px) {
    .update_box.second ul {
      height: 880px; } }
  .update_box.second ul li {
    opacity: 0;
    transition: all 2s;
    transition-timing-function: ease;
    position: absolute;
    margin: auto; }
    @media (min-width: 500px) {
      .update_box.second ul li {
        transition: all 1s; } }
    .update_box.second ul li.p01 {
      width: 70%;
      left: 0;
      z-index: 5; }
      .update_box.second ul li.p01.scrollin {
        left: 10.8%; }
    .update_box.second ul li.p02 {
      width: 48%;
      padding-top: 40%;
      right: 6%;
      z-index: 4; }
      .update_box.second ul li.p02.scrollin {
        padding-top: 45%; }
    .update_box.second ul li.p03 {
      width: 42.4%;
      padding-top: 65%;
      left: -6%;
      z-index: 5; }
      .update_box.second ul li.p03.scrollin {
        left: 0; }
    .update_box.second ul li.p04 {
      width: 74.2%;
      padding-top: 120%;
      right: 6%;
      z-index: 5; }
      .update_box.second ul li.p04.scrollin {
        padding-top: 108%; }
    .update_box.second ul li.p06 {
      width: 94.2%;
      padding-top: 92%;
      right: 0;
      z-index: 1; }
      .update_box.second ul li.p06.scrollin {
        padding-top: 87%; }
    .update_box.second ul li.p05 {
      width: 72%;
      padding-top: 150%;
      left: 0;
      right: 0;
      z-index: 3; }
      .update_box.second ul li.p05.scrollin {
        padding-top: 133%; }
    .update_box.second ul li.scrollin {
      opacity: 1; }

.update_box.third {
  margin-bottom: 100px; }
  .update_box.third h2 {
    width: 33.2%;
    margin: 82px auto 22px; }
  .update_box.third ul {
    position: relative;
    height: 218.400vw;
    overflow: hidden; }
    @media (min-width: 500px) {
      .update_box.third ul {
        height: 1092px; } }
    .update_box.third ul li {
      opacity: 0;
      transition: all 2s;
      transition-timing-function: ease;
      position: absolute;
      margin: auto; }
      @media (min-width: 500px) {
        .update_box.third ul li {
          transition: all 1s; } }
      .update_box.third ul li.p01 {
        width: 88%;
        padding-top: 50px;
        left: 0;
        right: 0;
        z-index: 2; }
        .update_box.third ul li.p01.scrollin {
          padding-top: 0px; }
      .update_box.third ul li.p02 {
        width: 38%;
        padding-top: 52%;
        right: -5%;
        z-index: 3; }
        .update_box.third ul li.p02.scrollin {
          right: 0; }
      .update_box.third ul li.p03 {
        width: 56.6%;
        padding-top: 65%;
        left: -6%;
        z-index: 4; }
        .update_box.third ul li.p03.scrollin {
          left: 0; }
      .update_box.third ul li.p04 {
        width: 32%;
        padding-top: 100%;
        right: 0;
        z-index: 2; }
        .update_box.third ul li.p04.scrollin {
          right: 6%; }
      .update_box.third ul li.p05 {
        width: 76.4%;
        padding-top: 115%;
        right: 0;
        z-index: 1; }
        .update_box.third ul li.p05.scrollin {
          padding-top: 125%; }
      .update_box.third ul li.p06 {
        width: 76.4%;
        padding-top: 175%;
        left: 0;
        z-index: 3; }
        .update_box.third ul li.p06.scrollin {
          left: 6%; }
      .update_box.third ul li.scrollin {
        opacity: 1; }

.new3plan_box {
  background: #D9E8D6;
  padding: 0 6%;
  margin-bottom: 15%;
  position: relative; }
  .new3plan_box h2 {
    width: 54.2%;
    position: absolute;
    left: 0;
    right: 0;
    top: -1%;
    margin: 0 auto; }
  .new3plan_box ul {
    padding: 70% 0 20%; }
    .new3plan_box ul li {
      margin-bottom: 6%; }
      .new3plan_box ul li:last-child {
        margin-bottom: 0; }
  .new3plan_box .button_bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.5%;
    margin: 0 auto; }

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10000;
  /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.9); }

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 6%;
  background-color: #fff;
  line-height: 0; }
  @media (min-width: 500px) {
    .modalWrapper {
      max-height: 96vh; } }
  .modalWrapper img.margin01 {
    margin: 9.09% auto 5.45%; }
  .modalWrapper img.margin02 {
    margin-bottom: 9.09%; }
  .modalWrapper img.wide01 {
    width: 88.36%;
    margin: 9.09% auto 14% 7%; }

.closeModal {
  width: 46.36%;
  margin: 0 auto;
  cursor: pointer;
  line-height: 0; }

.wedding_box {
  margin: 40% auto 0; }
  .wedding_box h2 {
    width: 56.2%;
    margin: 0 auto 10%; }
  .wedding_box h3 {
    width: 68%;
    margin: 20% auto 10%; }

.slider_wedding01 .slick-slide, .slider_wedding02 .slick-slide {
  margin-right: 10px !important;
  margin-left: 10px !important; }

.message_box {
  margin: 20% auto 0;
  position: relative;
  overflow: hidden; }
  .message_box h2 {
    width: 89.4%;
    position: absolute;
    z-index: 2; }
  .message_box p {
    width: 94.2%;
    margin: 20% 0 0 auto; }

.company_box {
  margin: 30% auto 20%; }
  .company_box h2 {
    width: 29.2%;
    margin: 0 auto 10%; }
  .company_box .photo_box {
    width: 78%;
    margin: 0 auto 10%; }
  .company_box .address_box {
    width: 50.2%;
    margin: 0 auto 5%; }
  .company_box ul {
    width: 50.2%;
    margin: 0 auto 20%; }
    .company_box ul li {
      margin-bottom: 3%; }
  .company_box p {
    width: 38.2%;
    margin: 0 auto;
    padding-bottom: 20%; }

.side_button {
  position: fixed;
  top: 10px;
  right: -80px;
  z-index: 100;
  width: 16%;
  transition: all 0.7s ease; }
  @media (min-width: 500px) {
    .side_button {
      max-width: 80px; } }
  .side_button.open {
    right: 10px; }

.qr_box {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 100px; }
  @media (max-width: 500px) {
    .qr_box {
      display: none; } }

.sp {
  display: none; }
  @media (max-width: 500px) {
    .sp {
      display: block; } }

@media (max-width: 500px) {
  .pc {
    display: none; } }