@charset "UTF-8";
html {
  scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Kiwi Maru', serif;
  color: #423E38; }

a {
  text-decoration: underline; }
  a:hover, a:focus {
    text-decoration: none; }

a, button {
  transition: .25s all; }
  a:hover, a:focus, button:hover, button:focus {
    opacity: .8; }

::placeholder {
  color: rgba(66, 62, 56, 0.3); }

.title-font {
  font-family: 'Sacramento', cursive; }

.sub-font {
  font-family: 'Poiret One', cursive; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    visibility: hidden; } }
/* --- プリローダー ---*/
.audio-select {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 900;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EDEFE6; }
  .audio-select.animated {
    animation: fadeOut 1s ease 0s 1 normal both; }
  .different-color .audio-select {
    background-color: #F4D7DC; }
  .audio-select .audio-select-box {
    margin: 24px 0;
    text-align: center;
    border: 2px solid #697F18;
    padding: 32px 24px; }
    .different-color .audio-select .audio-select-box {
      border-color: #E8A0AA; }
    @media (min-width: 640px) {
      .audio-select .audio-select-box {
        width: 600px;
        margin: 40px auto; } }
    .audio-select .audio-select-box p {
      font-size: 90%; }
    .audio-select .audio-select-box .btns {
      display: flex; }
      .audio-select .audio-select-box .btns > div {
        width: 50%; }
        .audio-select .audio-select-box .btns > div:first-child {
          padding-right: 2%; }
        .audio-select .audio-select-box .btns > div:last-child {
          padding-left: 2%; }
      .audio-select .audio-select-box .btns .btn {
        font-size: 14px;
        padding: 16px 0;
        border-radius: 48px;
        background-color: rgba(105, 127, 24, 0.5);
        display: block;
        color: #fff;
        text-align: center;
        margin-top: 16px;
        text-decoration: none; }
        .different-color .audio-select .audio-select-box .btns .btn {
          background-color: #E8A0AA; }
        .audio-select .audio-select-box .btns .btn.btn-primary {
          background-color: #697F18; }
          .different-color .audio-select .audio-select-box .btns .btn.btn-primary {
            background-color: #6A66AD; }

audio {
  position: absolute;
  opacity: 0;
  visibility: hidden; }

/* --- キービジュアル --- */
header {
  text-align: center;
  background-size: cover;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }
  header .main-img {
    z-index: 10;
    opacity: 0;
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0; }
    header .main-img.main-img-2 {
      animation: bgAnimation2 12s 0s infinite; }
    header .main-img.main-img-3 {
      animation: bgAnimation3 18s 0s infinite; }
    header .main-img:nth-of-type(3) {
      animation-delay: 6s; }
    header .main-img:nth-of-type(4) {
      animation-delay: 12s; }
  header::after {
    content: "";
    display: block;
    background-color: rgba(35, 24, 21, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; }
  header .header-title {
    width: 70%;
    margin-bottom: 15%;
    z-index: 11; }
    @media (min-width: 640px) {
      header .header-title {
        width: 500px;
        margin-bottom: 24px; } }
  header .icon-scroll {
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 20%;
    left: 50%;
    margin-left: -16px;
    z-index: 30;
    background: url("../images/arrow_down.png") no-repeat;
    background-size: contain;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap; }
    @media (min-width: 640px) {
      header .icon-scroll {
        width: 40px;
        height: 40px;
        margin-left: -20px;
        bottom: 10%; } }
  header .bg-top-accent, header .bg-bottom-accent {
    position: absolute;
    z-index: 11; }
  header .bg-top-accent {
    width: 360px;
    left: -60px;
    top: -60px; }
    @media (min-width: 640px) {
      header .bg-top-accent {
        width: 690px;
        top: -150px; } }
  header .bg-bottom-accent {
    width: 350px;
    bottom: -60px;
    right: -60px; }
    @media (min-width: 640px) {
      header .bg-bottom-accent {
        width: 670px;
        bottom: -150px; } }
  header .video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    transform: translate(-50%, -50%); }

@keyframes bgAnimation2 {
  0% {
    opacity: 0; }
  32% {
    opacity: 1; }
  68% {
    opacity: 1; }
  90% {
    opacity: 0;
    transform: scale(1.1);
    z-index: 9; }
  100% {
    opacity: 0; } }
@keyframes bgAnimation3 {
  0% {
    opacity: 0; }
  16% {
    opacity: 1; }
  34% {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale(1.1);
    z-index: 9; }
  100% {
    opacity: 0; } }
/* --- メニュー --- */
.drawer-hamburger, .drawer-nav {
  z-index: 30; }

.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(105, 127, 24, 0.5); }

.drawer-nav {
  background-color: #697F18; }
  .different-color .drawer-nav {
    background-color: #E8A0AA; }

.drawer-brand, .drawer-menu-item {
  color: #fff; }
  .drawer-brand:hover, .drawer-menu-item:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none; }

/* --- カウントダウン --- */
.countdown {
  padding: 48px 0 32px;
  text-align: center;
  background-color: #EDEFE6;
  color: #697F18; }
  .different-color .countdown {
    color: #423E38;
    background-color: #F4D7DC; }
  @media (min-width: 640px) {
    .countdown {
      padding: 88px 0 40px; } }
  .countdown h1 {
    font-size: 32px;
    margin-bottom: 16px; }
    @media (min-width: 640px) {
      .countdown h1 {
        font-size: 40px; } }
  .countdown .countdown-values {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%; }
  .countdown .countdown-value {
    font-size: 56px; }
    @media (max-width: 640px) {
      .countdown .countdown-value {
        width: 40%; } }
    @media (min-width: 640px) {
      .countdown .countdown-value {
        margin: 0 24px; } }
  .countdown .countdown-unit {
    display: block;
    font-size: 24px; }

/* --- ご挨拶 --- */
.greeting {
  padding: 24px 24px 64px;
  background-color: #EDEFE6; }
  .different-color .greeting {
    background-color: #F4D7DC; }
  @media (min-width: 640px) {
    .greeting {
      padding: 88px 0 112px; } }
  .greeting .greeting-box {
    border: 2px solid #697F18;
    padding: 64px 24px 32px;
    position: relative; }
    @media (min-width: 640px) {
      .greeting .greeting-box {
        width: 700px;
        margin: 0 auto; } }
    .different-color .greeting .greeting-box {
      border-color: #E8A0AA; }
  .greeting .greeting-top {
    position: absolute;
    width: 70vw;
    left: 50%;
    margin-left: -35vw;
    top: -8vw; }
    @media (min-width: 640px) {
      .greeting .greeting-top {
        width: 400px;
        margin-left: -200px;
        top: -49px; } }
    .different-color .greeting .greeting-top {
      background-color: #F4D7DC;
      top: -10vw; }
      @media (min-width: 640px) {
        .different-color .greeting .greeting-top {
          width: 350px;
          margin-left: -175px;
          top: -60px; } }
  .greeting h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 16px;
    color: #697F18; }
    @media (min-width: 640px) {
      .greeting h2 {
        font-size: 48px;
        margin-bottom: 40px; } }
    .different-color .greeting h2 {
      color: #6A66AD; }
  .greeting p {
    line-height: 1.8; }
    @media (min-width: 640px) {
      .greeting p {
        text-align: center; } }
  .greeting .sending-date {
    margin-top: 1rem; }

/* --- 新郎新婦紹介 --- */
.groom-and-bride {
  padding: 48px 24px 32px; }
  @media (min-width: 640px) {
    .groom-and-bride {
      padding: 100px 0; }
      .groom-and-bride .column-groom, .groom-and-bride .column-bride {
        display: flex;
        align-items: center;
        width: 800px;
        margin-left: auto;
        margin-right: auto; }
        .groom-and-bride .column-groom .prof-groom, .groom-and-bride .column-bride .prof-groom {
          margin-left: 48px; }
        .groom-and-bride .column-groom .prof-bride, .groom-and-bride .column-bride .prof-bride {
          margin-right: 48px;
          margin-left: 16px; }
        .groom-and-bride .column-groom p, .groom-and-bride .column-bride p {
          margin-bottom: 0; }
      .groom-and-bride .column-groom {
        margin-bottom: 40px; }
      .groom-and-bride .face-bride {
        order: 2; }
      .groom-and-bride .prof-bride {
        order: 1; } }
  .groom-and-bride .face-groom, .groom-and-bride .face-bride {
    position: relative;
    padding-top: 24px; }
  .groom-and-bride .img-groom, .groom-and-bride .img-bride {
    position: relative;
    padding: 15px;
    width: 250px;
    margin: 0 auto 8px; }
    .groom-and-bride .img-groom::before, .groom-and-bride .img-bride::before {
      content: "";
      display: block;
      position: absolute; }
    .groom-and-bride .img-groom img, .groom-and-bride .img-bride img {
      width: 240px;
      height: 298px;
      object-fit: cover;
      object-position: 50% 100%; }
  .groom-and-bride .img-groom::before {
    width: 194px;
    height: 164px;
    background: url("../images/img_prof_1.png") no-repeat;
    background-size: 100% auto;
    left: -10%;
    top: -10%; }
    .different-color .groom-and-bride .img-groom::before {
      width: 154px;
      height: 130px;
      background: url("../images/dcolor/img_prof_1.png") no-repeat;
      background-size: 100% auto; }
  .groom-and-bride .img-bride::before {
    width: 196px;
    height: 152px;
    background: url("../images/img_prof_2.png") no-repeat;
    background-size: 100% auto;
    bottom: -5%;
    right: -15%; }
    .different-color .groom-and-bride .img-bride::before {
      width: 140px;
      height: 153px;
      background: url("../images/dcolor/img_prof_2.png") no-repeat;
      background-size: 100% auto; }
  @media (max-width: 640px) {
    .groom-and-bride .img-bride {
      margin-bottom: 5%; } }
  .groom-and-bride h2 {
    font-size: 24px;
    font-weight: 500;
    color: #697F18; }
    @media (min-width: 640px) {
      .groom-and-bride h2 {
        font-size: 32px; } }
    @media (max-width: 640px) {
      .groom-and-bride h2 {
        text-align: center; } }
    .different-color .groom-and-bride h2 {
      color: #6A66AD; }
  .groom-and-bride h3 {
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 8px;
    color: #697F18; }
    @media (max-width: 640px) {
      .groom-and-bride h3 {
        text-align: center; } }
    .different-color .groom-and-bride h3 {
      color: #6A66AD; }
  .groom-and-bride h4 {
    font-size: 18px;
    margin-bottom: 8px; }
    @media (min-width: 640px) {
      .groom-and-bride h4 {
        font-size: 24px; } }
    @media (max-width: 640px) {
      .groom-and-bride h4 {
        text-align: center; } }
  .groom-and-bride p {
    line-height: 1.8;
    margin-bottom: 36px;
    font-size: 14px; }
    @media (min-width: 640px) {
      .groom-and-bride p {
        font-size: 16px; } }

/* --- イベント詳細 --- */
.venue-informations {
  background-color: #697F18;
  color: #fff;
  padding: 48px 24px; }
  .different-color .venue-informations {
    background-color: #E8A0AA; }
  .venue-informations .venue-section {
    margin: 24px 0; }
    @media (min-width: 640px) {
      .venue-informations .venue-section {
        width: 800px;
        margin: 40px auto;
        padding: 40px 40px; } }
  .venue-informations h2 {
    font-size: 32px;
    margin-bottom: 16px;
    text-align: center; }
    @media (min-width: 640px) {
      .venue-informations h2 {
        font-size: 48px; } }
  .venue-informations h4 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.3;
    text-align: left; }
  @media (min-width: 640px) {
    .venue-informations .venue-box {
      display: flex; } }
  .venue-informations .times {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: center;
    margin-top: 16px; }
    .venue-informations .times > div {
      padding: 0 16px; }
      @media (min-width: 640px) {
        .venue-informations .times > div {
          padding: 0 24px; } }
    .venue-informations .times .reception-time {
      display: none; }
    .venue-informations .times .reception-time h3 {
      font-size: 16px;
      margin-bottom: 0; }
    .venue-informations .times .reception-time p {
      font-size: 24px; }
    .venue-informations .times .reception-time:has(> :nth-child(n)) {
      display: block; }
  .venue-informations .venue-list {
    margin-bottom: 24px; }
    .venue-informations .venue-list.w-100 {
      width: 100%; }
  .venue-informations .venue-date {
    padding: 0 24px 32px;
    text-align: center; }
    .venue-informations .venue-date h2 {
      margin-top: 36px; }
    .venue-informations .venue-date h3 {
      font-size: 16px;
      margin-bottom: 0;
      margin-top: 16px; }
    .venue-informations .venue-date p {
      font-size: 40px;
      font-weight: 500;
      margin-bottom: 8px; }
    .venue-informations .venue-date p.visiting-time, .venue-informations .venue-date p.online-guest {
      font-size: 16px;
      text-align: left;
      line-height: 1.8; }
    .venue-informations .venue-date p.visiting-time {
      margin: 16px 0 24px; }
    .venue-informations .venue-date p.online-guest {
      margin: 16px 0 0; }
  .venue-informations .online-venue, .venue-informations .venue-access {
    border: 2px solid #fff;
    padding: 32px 24px; }
  .venue-informations .online-venue p {
    line-height: 1.8; }
    @media (min-width: 640px) {
      .venue-informations .online-venue p {
        text-align: center; } }
  @media (max-width: 640px) {
    .venue-informations .online-venue br {
      display: none; } }
  .venue-informations .online-venue .btn {
    font-size: 18px;
    padding: 16px 0;
    border-radius: 48px;
    background-color: #fff;
    display: block;
    color: #697F18;
    text-align: center;
    margin-top: 16px;
    text-decoration: none; }
    .different-color .venue-informations .online-venue .btn {
      color: #6A66AD; }
    @media (min-width: 640px) {
      .venue-informations .online-venue .btn {
        width: 300px;
        margin: 16px auto 0; } }
  .venue-informations .venue-access p {
    line-height: 1.8; }
  .venue-informations .venue-access h4 {
    font-size: 18px;
    margin-bottom: 8px; }
  .venue-informations #map_canvas, .venue-informations #map2_canvas {
    margin: 1rem 0; }

/* --- ご出席情報 --- */
.invite-form {
  padding: 80px 24px 0; }
  @media (min-width: 640px) {
    .invite-form .invite-form-content {
      width: 800px;
      margin: 0 auto; } }
  @media (min-width: 640px) {
    .invite-form .invite-form-text {
      text-align: center; } }
  .invite-form .invite-form-text h2 {
    font-size: 48px;
    margin-bottom: 16px;
    font-weight: 500;
    text-align: center;
    color: #697F18; }
    .different-color .invite-form .invite-form-text h2 {
      color: #6A66AD; }
  .invite-form .invite-form-text p {
    font-size: 16px;
    line-height: 1.8; }
    .invite-form .invite-form-text p strong {
      font-size: 24px;
      font-weight: normal; }
  .invite-form .attend-radio {
    text-align: center;
    margin: 24px 0 16px; }
    .invite-form .attend-radio input[type="radio"] {
      position: absolute;
      opacity: 0; }
      .invite-form .attend-radio input[type="radio"] + label.check {
        position: relative;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        line-height: 150px;
        width: 150px;
        height: 150px;
        font-size: 24px;
        padding-right: 8px;
        transition: all 250ms ease;
        padding-left: 16px; }
        .different-color .invite-form .attend-radio input[type="radio"] + label.check {
          padding-left: 0; }
      .invite-form .attend-radio input[type="radio"]:checked + label.check {
        background: url("../images/bg_form_attend.png") no-repeat;
        background-size: 100% auto; }
        .different-color .invite-form .attend-radio input[type="radio"]:checked + label.check {
          background: url("../images/dcolor/bg_form_attend.png") no-repeat;
          background-size: 100% auto; }
  @media (min-width: 640px) {
    .invite-form .invite-form-input {
      flex: 1; } }
  .invite-form .invite-form-input input {
    background-color: #EDEFE6; }
    .different-color .invite-form .invite-form-input input {
      background-color: #DCF4EE; }
    .invite-form .invite-form-input input[type="text"], .invite-form .invite-form-input input[type="email"], .invite-form .invite-form-input input[type="tel"] {
      width: 100%;
      padding: 16px;
      border-radius: 4px;
      margin-bottom: 24px;
      border: 2px solid #EDEFE6;
      background-color: #EDEFE6; }
      .different-color .invite-form .invite-form-input input[type="text"], .different-color .invite-form .invite-form-input input[type="email"], .different-color .invite-form .invite-form-input input[type="tel"] {
        border: 2px solid #DCF4EE;
        background-color: #DCF4EE; }
      .invite-form .invite-form-input input[type="text"]:focus, .invite-form .invite-form-input input[type="email"]:focus, .invite-form .invite-form-input input[type="tel"]:focus {
        border: 2px solid #697F18; }
        .different-color .invite-form .invite-form-input input[type="text"]:focus, .different-color .invite-form .invite-form-input input[type="email"]:focus, .different-color .invite-form .invite-form-input input[type="tel"]:focus {
          border: 2px solid #6A66AD; }
  .invite-form .invite-form-input .form-2column {
    display: flex; }
    .invite-form .invite-form-input .form-2column input[type="text"] {
      width: 98%; }
    .invite-form .invite-form-input .form-2column input:first-child {
      margin-right: 2%; }
  .invite-form .invite-form-input .form-item-label {
    margin-bottom: 8px; }
  .invite-form .invite-form-input .form-check-box {
    display: flex; }
  .invite-form .invite-form-input .form-check {
    margin: 0.5rem 1rem 24px 0; }
    .invite-form .invite-form-input .form-check input[type="radio"] {
      position: absolute;
      opacity: 0; }
      .invite-form .invite-form-input .form-check input[type="radio"] + .form-check-label:before {
        content: "";
        background: #EDEFE6;
        border-radius: 100%;
        display: inline-block;
        width: 1.4em;
        height: 1.4em;
        position: relative;
        top: -0.2em;
        margin-right: .5em;
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease; }
        .different-color .invite-form .invite-form-input .form-check input[type="radio"] + .form-check-label:before {
          background: #DCF4EE; }
      .invite-form .invite-form-input .form-check input[type="radio"]:checked + .form-check-label:before {
        background-color: #697F18;
        border: 4px solid #EDEFE6; }
        .different-color .invite-form .invite-form-input .form-check input[type="radio"]:checked + .form-check-label:before {
          background-color: #6A66AD; }
        .different-color .invite-form .invite-form-input .form-check input[type="radio"]:checked + .form-check-label:before {
          border: 4px solid #DCF4EE; }
      .invite-form .invite-form-input .form-check input[type="radio"]:focus + .form-check-label:before {
        outline: none;
        border: 4px solid #EDEFE6; }
      .invite-form .invite-form-input .form-check input[type="radio"]:disabled + .form-check-label:before {
        border: 4px solid #b5bd98;
        background: #b5bd98; }
      .invite-form .invite-form-input .form-check input[type="radio"] + .form-check-label:empty:before {
        margin-right: 0; }
  .invite-form .invite-form-input .terms-check {
    font-size: 14px;
    margin-bottom: 32px; }
  .invite-form .invite-form-input .btn {
    font-size: 18px;
    padding: 16px 0;
    border-radius: 48px;
    background-color: #697F18;
    display: block;
    color: #fff;
    text-align: center;
    margin: 24px auto;
    text-decoration: none;
    width: 80%; }
    .different-color .invite-form .invite-form-input .btn {
      background-color: #6A66AD; }
    @media (min-width: 640px) {
      .invite-form .invite-form-input .btn {
        width: 300px;
        padding: 24px 0;
        margin: 24px auto;
        font-size: 32px; } }

/* --- フッター --- */
.footer {
  text-align: center;
  padding: 32px 24px; }
  @media (min-width: 640px) {
    .footer {
      width: 1024px;
      margin: 60px auto 0;
      display: flex;
      justify-content: space-between; } }
  .footer a {
    text-decoration: none; }
    .footer a:hover, .footer a:focus {
      text-decoration: underline; }
  .footer .footer-service {
    display: inline-block;
    margin-bottom: 16px; }
  .footer .footer-menu {
    display: flex;
    justify-content: center;
    font-size: 14px; }
    @media (min-width: 640px) {
      .footer .footer-menu {
        font-size: 16px; } }
    .footer .footer-menu li {
      margin-right: .75rem; }
      .footer .footer-menu li:last-child {
        margin-right: 0; }

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important; }

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