@charset "UTF-8";
/*==============================
 || 共通
==============================*/
#childheadWrap {
  position: relative;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 400px; }
  #childheadWrap > img {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -2px; }
  @media screen and (max-width: 600px) {
    #childheadWrap {
      height: 200px; }
      #childheadWrap > img {
        width: 110%;
        left: -5%; } }

#childmidashiWrap {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1000px;
  padding: 100px 0 200px;
  margin: 0 auto;
  text-align: center; }
  #childmidashiWrap > h2 {
    font-size: 50px;
    color: #595757; }
  #childmidashiWrap > h4 {
    font-size: 20px;
    color: #898989; }
  @media screen and (max-width: 600px) {
    #childmidashiWrap {
      padding: 50px 0 50px; }
      #childmidashiWrap > h2 {
        font-size: 30px; }
      #childmidashiWrap > h4 {
        font-size: 15px; } }

.breadList {
  position: absolute;
  top: 0;
  right: 0;
  display: flex; }
  .breadList > li {
    position: relative;
    margin-right: 30px; }
    .breadList > li a, .breadList > li p {
      font-size: 11px;
      color: #000;
      display: block; }
    .breadList > li::after {
      content: "";
      width: 10px;
      height: 1px;
      background-color: #000;
      position: absolute;
      top: 10px;
      right: -20px; }
    .breadList > li:last-of-type {
      margin-right: 0; }
      .breadList > li:last-of-type::after {
        display: none; }

#backBtn {
  padding: 100px 20px 0;
  background-color: #fff;
  text-align: center; }
  #backBtn > a {
    display: inline-block;
    position: relative; }
    #backBtn > a::after {
      position: absolute;
      content: "";
      width: 50px;
      height: 1px;
      background-color: #828282;
      left: -60px;
      top: 12px; }
    #backBtn > a::before {
      position: absolute;
      content: "";
      width: 10px;
      height: 1px;
      background-color: #828282;
      transform: rotate(-45deg);
      top: 9px;
      left: -61px; }
  @media screen and (max-width: 600px) {
    #backBtn {
      padding: 50px 20px 0; } }

/*==============================
 || 挙式、披露宴について
==============================*/
#reseptionWrap01 {
  position: relative;
  padding: 100px 20px;
  background-image: url("../img/reseption/reseptionImg01.png");
  background-position: center center;
  background-size: cover; }
  #reseptionWrap01 > div {
    display: flex;
    flex-direction: row-reverse;
    text-align: left;
    background-color: rgba(236, 233, 220, 0.8);
    padding: 30px;
    width: 380px;
    height: 540px;
    position: relative;
    left: 60vw; }
    #reseptionWrap01 > div > h3 {
      font-size: 26px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      margin-left: 30px; }
    #reseptionWrap01 > div > p {
      font-size: 15px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl; }
  @media screen and (max-width: 1000px) {
    #reseptionWrap01 > div {
      left: 40vw; } }
  @media screen and (max-width: 600px) {
    #reseptionWrap01 {
      background-image: none;
      padding: 0; }
      #reseptionWrap01 > img {
        width: 100%; }
      #reseptionWrap01 > div {
        left: 0;
        justify-content: center;
        width: calc(100% - 40px);
        height: 470px;
        margin: 0 auto;
        top: -50px; }
        #reseptionWrap01 > div > h3 {
          font-size: 18px;
          line-height: 24px;
          margin-left: 10px; }
        #reseptionWrap01 > div > p {
          font-size: 14px;
          letter-spacing: 0;
          line-height: 24px; } }

#reseptionWrap02 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px; }
  #reseptionWrap02 > img {
    position: absolute;
    width: 90%;
    max-width: 900px;
    z-index: 2; }
  @media screen and (max-width: 600px) {
    #reseptionWrap02 {
      margin-top: 0; } }

.flowimgBox {
  position: relative;
  z-index: 1; }

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0); } }
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden; }

/*----------------------------*/
.d-demo__wrap {
  display: flex;
  overflow: hidden; }

.d-demo__list {
  display: flex;
  list-style: none; }

.d-demo__list--left {
  animation: infinity-scroll-left 100s infinite linear 0.5s both; }

.d-demo__item {
  width: 100vw; }

.d-demo__item > img {
  width: 100%; }

.d-demo__item {
  position: relative; }

.d-demo__list {
  align-items: center;
  height: 60vw; }
  @media screen and (max-width: 600px) {
    .d-demo__list {
      height: 120vw; } }

.d-demo__list > .d-demo__item {
  position: relative;
  width: 17vw; }
  .d-demo__list > .d-demo__item.flowimgH {
    width: 21vw; }
  .d-demo__list > .d-demo__item:nth-of-type(1) {
    top: -14vw; }
  .d-demo__list > .d-demo__item:nth-of-type(2) {
    bottom: -11vw;
    left: -8vw; }
  .d-demo__list > .d-demo__item:nth-of-type(3) {
    top: -17vw; }
  .d-demo__list > .d-demo__item:nth-of-type(4) {
    bottom: -12vw;
    left: -8vw; }
  .d-demo__list > .d-demo__item:nth-of-type(5) {
    bottom: -10vw; }
  .d-demo__list > .d-demo__item:nth-of-type(6) {
    top: -15vw;
    left: -12vw; }
  .d-demo__list > .d-demo__item:nth-of-type(7) {
    left: -0vw;
    bottom: -8vw; }
  .d-demo__list > .d-demo__item:nth-of-type(8) {
    top: -15vw;
    right: -5vw; }
  .d-demo__list > .d-demo__item:nth-of-type(9) {
    bottom: -10vw;
    left: 0; }
  @media screen and (max-width: 600px) {
    .d-demo__list > .d-demo__item {
      width: 34vw; }
      .d-demo__list > .d-demo__item.flowimgH {
        width: 42vw; }
      .d-demo__list > .d-demo__item:nth-of-type(1) {
        top: -28vw; }
      .d-demo__list > .d-demo__item:nth-of-type(2) {
        bottom: -22vw;
        left: -16vw; }
      .d-demo__list > .d-demo__item:nth-of-type(3) {
        top: -34vw; }
      .d-demo__list > .d-demo__item:nth-of-type(4) {
        bottom: -24vw;
        left: -16vw; }
      .d-demo__list > .d-demo__item:nth-of-type(5) {
        bottom: -20vw; }
      .d-demo__list > .d-demo__item:nth-of-type(6) {
        top: -30vw;
        left: -24vw; }
      .d-demo__list > .d-demo__item:nth-of-type(7) {
        left: -0vw;
        bottom: -16vw; }
      .d-demo__list > .d-demo__item:nth-of-type(8) {
        top: -30vw;
        right: -10vw; }
      .d-demo__list > .d-demo__item:nth-of-type(9) {
        bottom: -20vw;
        left: 0; } }

#reseptionWrap03 {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 100px 0; }
  #reseptionWrap03 > img:nth-of-type(1) {
    position: relative;
    z-index: 1;
    width: 35vw;
    align-self: center;
    bottom: -100px; }
  #reseptionWrap03 > img:nth-of-type(2) {
    position: relative;
    z-index: 1;
    width: 35vw;
    align-self: center;
    top: -100px; }
  #reseptionWrap03 > div {
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: #fff;
    width: 300px;
    height: 400px;
    padding: 30px;
    z-index: 2; }
    #reseptionWrap03 > div > h3 {
      font-size: 26px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      margin-left: 30px; }
    #reseptionWrap03 > div > p {
      font-size: 15px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl; }
  @media screen and (max-width: 600px) {
    #reseptionWrap03 {
      flex-wrap: wrap;
      padding: 0; }
      #reseptionWrap03 > div {
        padding: 15px;
        width: 60%;
        position: relative;
        height: 350px;
        margin-bottom: 20px; }
        #reseptionWrap03 > div > h3 {
          font-size: 18px;
          margin-left: 10px; }
        #reseptionWrap03 > div > p {
          font-size: 14px;
          letter-spacing: 0; }
      #reseptionWrap03 > img:nth-of-type(3) {
        display: block;
        width: 40%;
        object-fit: cover; }
      #reseptionWrap03 > img:nth-of-type(4) {
        display: block;
        width: 100%; } }

#reseptionWrap04 {
  padding: 100px 20px; }
  #reseptionWrap04 > div {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; }
    #reseptionWrap04 > div > h3 {
      text-align: center;
      color: #878787;
      font-size: 20px;
      margin-bottom: 50px; }
    #reseptionWrap04 > div > p {
      font-size: 15px;
      letter-spacing: 0; }
  @media screen and (max-width: 600px) {
    #reseptionWrap04 {
      padding: 50px 20px; } }

#reseptionWrap05 {
  position: relative; }
  #reseptionWrap05 > img {
    position: absolute;
    width: 47vw;
    right: 0;
    top: 50px;
    z-index: 1; }
  #reseptionWrap05 > div {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 550px;
    z-index: 2; }
    #reseptionWrap05 > div > div {
      position: relative;
      width: 550px;
      height: 600px;
      z-index: 2;
      background-color: #ece9dc;
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      padding: 50px;
      padding-bottom: 100px; }
      #reseptionWrap05 > div > div > h3 {
        font-size: 26px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        margin-left: 30px; }
      #reseptionWrap05 > div > div > p {
        font-size: 15px;
        line-height: 35px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl; }
    #reseptionWrap05 > div > img:nth-of-type(1) {
      position: absolute;
      z-index: 3;
      width: 30%;
      left: 2vw;
      top: 550px; }
    #reseptionWrap05 > div > img:nth-of-type(2) {
      position: absolute;
      z-index: 3;
      width: 55%;
      right: 0;
      top: 650px; }
  @media screen and (max-width: 600px) {
    #reseptionWrap05 > img {
      position: relative;
      width: 100%; }
    #reseptionWrap05 > div {
      width: calc(100% - 40px);
      padding-bottom: 200px; }
      #reseptionWrap05 > div > div {
        padding: 20px;
        width: 100%;
        height: 400px;
        background-color: rgba(236, 233, 220, 0.8);
        z-index: 1; }
        #reseptionWrap05 > div > div > h3 {
          font-size: 18px;
          margin-left: 10px; }
        #reseptionWrap05 > div > div > p {
          font-size: 14px;
          line-height: 24px;
          letter-spacing: 0; }
      #reseptionWrap05 > div > img:nth-of-type(1) {
        display: block;
        width: 40%;
        z-index: 3;
        right: 0;
        left: auto;
        top: auto;
        bottom: 50px; }
      #reseptionWrap05 > div > img:nth-of-type(2) {
        position: relative;
        display: block;
        width: 300px;
        margin: 0 auto;
        top: -10px;
        right: auto;
        z-index: 2; } }
  @media screen and (max-width: 400px) {
    #reseptionWrap05 > div > div > p {
      line-height: 20px; } }

#reseptionWrap06 {
  position: relative;
  padding: 200px 0 150px;
  background-color: #ebeae9; }
  #reseptionWrap06 > img {
    position: absolute;
    transform: rotate(180deg);
    width: 100%;
    top: 0;
    left: 0; }
  #reseptionWrap06 > h2 {
    font-size: 50px;
    color: #595757;
    text-align: center; }
  #reseptionWrap06 > h4 {
    font-size: 20px;
    color: #898989;
    text-align: center;
    margin-bottom: 20px; }
  @media screen and (max-width: 600px) {
    #reseptionWrap06 {
      padding: 50px 0 50px; }
      #reseptionWrap06 > h2 {
        font-size: 30px; }
      #reseptionWrap06 > h4 {
        font-size: 15px; } }

.ryoriBox01 {
  width: 100%; }
  .ryoriBox01 > img {
    width: 100%; }

.ryoriBox02 {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 2; }
  .ryoriBox02 > div {
    position: relative;
    width: 400px;
    z-index: 2;
    background-color: rgba(229, 225, 208, 0.8);
    display: flex;
    flex-direction: row-reverse;
    padding: 50px;
    margin-left: auto;
    margin-right: 0;
    top: -100px; }
    .ryoriBox02 > div > h3 {
      font-size: 26px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      margin-right: 30px; }
    .ryoriBox02 > div > p {
      font-size: 15px;
      line-height: 35px;
      letter-spacing: 0;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl; }
  .ryoriBox02 > img:nth-of-type(1) {
    position: absolute;
    width: 35%;
    left: 15%;
    bottom: 100px; }
  .ryoriBox02 > img:nth-of-type(2) {
    position: absolute;
    width: 40%;
    left: -5%;
    bottom: -150px; }
  @media screen and (max-width: 600px) {
    .ryoriBox02 > div {
      width: calc(100% - 40px);
      margin: 0 auto;
      justify-content: center;
      padding: 20px;
      height: 400px; }
      .ryoriBox02 > div > h3 {
        font-size: 18px;
        margin-right: 10px; }
      .ryoriBox02 > div > p {
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0; }
    .ryoriBox02 > img:nth-of-type(2) {
      position: absolute;
      width: 60%;
      left: 0;
      right: auto;
      bottom: -250px; }
    .ryoriBox02 > img:nth-of-type(3) {
      position: absolute;
      width: 60%;
      left: auto;
      right: 0;
      bottom: -100px; } }
  @media screen and (orientation: landscape) {
    .ryoriBox02 {
      height: 85vh;
      /* iPad横向き時の高さを設定 */ } }

.ryoriBox03 {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 500px;
  padding-bottom: 100px;
  z-index: 1; }
  .ryoriBox03 > div {
    width: 60%;
    margin-left: auto;
    margin-right: 0; }
    .ryoriBox03 > div > p {
      font-size: 15px;
      line-height: 35px;
      letter-spacing: 0; }
  .ryoriBox03 > img:nth-of-type(1) {
    position: absolute;
    width: 80%;
    top: 50px;
    right: 0; }
  .ryoriBox03 > img:nth-of-type(2) {
    position: absolute;
    width: 30%;
    left: -5%;
    bottom: -100px; }
  @media screen and (max-width: 600px) {
    .ryoriBox03 {
      padding-top: 300px;
      padding-bottom: 0; }
      .ryoriBox03 > div {
        width: 65%;
        padding: 20px; }
        .ryoriBox03 > div > p {
          font-size: 14px;
          line-height: 24px; }
        .ryoriBox03 > div br {
          display: none; }
      .ryoriBox03 > img:nth-of-type(1) {
        position: relative;
        width: 100%;
        top: -20px;
        right: 0; }
      .ryoriBox03 > img:nth-of-type(2) {
        position: absolute;
        width: 35%;
        left: 0%;
        bottom: 20px; } }

#reseptionWrap07 > img {
  width: 100%; }

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0); } }
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden; }

/*----------------------------*/
.r-demo__wrap {
  display: flex;
  overflow: hidden; }

.r-demo__list {
  display: flex;
  list-style: none; }

.r-demo__list--left {
  animation: infinity-scroll-left 95s infinite linear 0.5s both; }

.r-demo__list--right {
  animation: infinity-scroll-right 95s infinite linear 0.5s both; }

.r-demo__item {
  width: 100vw; }
  @media screen and (max-width: 600px) {
    .r-demo__item {
      width: 200vw; } }

.r-demo__item > img {
  width: 100%; }

.r-demo__item {
  position: relative; }

/*==============================
 || 当日までの流れ
==============================*/
#flowWrap01 {
  padding: 0 20px 100px; }

#flowWrap01 > ul {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; }
  #flowWrap01 > ul > li {
    position: relative;
    width: 12%;
    text-align: center; }
    #flowWrap01 > ul > li > div {
      display: block;
      width: 80%;
      margin: 0 auto 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #a63739;
      text-align: center; }
      #flowWrap01 > ul > li > div > span {
        font-size: 14px;
        line-height: 12px;
        letter-spacing: 0; }
      #flowWrap01 > ul > li > div > p {
        position: relative;
        top: -10px;
        font-size: 28px;
        line-height: 20px;
        letter-spacing: 0; }
    #flowWrap01 > ul > li > h4 {
      display: inline-block;
      font-size: 20px;
      height: 200px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-align: left; }
    #flowWrap01 > ul > li > img {
      width: 100%; }
    #flowWrap01 > ul > li::before {
      position: absolute;
      top: 100px;
      right: -60%;
      content: "";
      width: 50px;
      height: 1px;
      background-color: #b2b2b3; }
    #flowWrap01 > ul > li::after {
      position: absolute;
      top: 96px;
      right: -60%;
      content: "";
      width: 10px;
      height: 1px;
      transform: rotate(45deg);
      background-color: #b2b2b3; }
    #flowWrap01 > ul > li:last-of-type::before, #flowWrap01 > ul > li:last-of-type::after {
      display: none; }
  @media screen and (max-width: 600px) {
    #flowWrap01 > ul > li {
      width: 18%; }
      #flowWrap01 > ul > li > h4 {
        font-size: 16px;
        line-height: 16px;
        height: 150px; }
      #flowWrap01 > ul > li::before {
        position: absolute;
        top: 100px;
        right: -22%;
        content: "";
        width: 20px;
        height: 1px;
        background-color: #b2b2b3; }
      #flowWrap01 > ul > li::after {
        position: absolute;
        top: 98px;
        right: -23%;
        content: "";
        width: 5px;
        height: 1px;
        transform: rotate(45deg);
        background-color: #b2b2b3; } }

#flowBack {
  width: 100%;
  height: 600px;
  background-image: url("../img/flow/flowImg01.png");
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center; }
  #flowBack > img {
    width: 180px; }
  @media screen and (max-width: 600px) {
    #flowBack {
      height: 300px;
      background-image: url("../img/flow/flowImg01sp.png"); }
      #flowBack > img {
        width: 100px; } }

#flowWrap02 {
  position: relative;
  padding: 100px 0 100px; }
  #flowWrap02 > img {
    position: absolute;
    width: 100%;
    top: -7vw; }
  @media screen and (max-width: 600px) {
    #flowWrap02 > img {
      width: 110%;
      left: -5%; } }

#flowWrap02 > ul > li {
  margin-bottom: 60px; }
  #flowWrap02 > ul > li > div:nth-of-type(1) {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; }
    #flowWrap02 > ul > li > div:nth-of-type(1) > div {
      margin-right: 10px; }
      #flowWrap02 > ul > li > div:nth-of-type(1) > div > span {
        position: relative;
        top: 2px;
        font-size: 12px;
        line-height: 12px;
        letter-spacing: 0; }
      #flowWrap02 > ul > li > div:nth-of-type(1) > div > p {
        position: relative;
        top: -8px;
        font-size: 28px;
        line-height: 20px;
        letter-spacing: 0; }
  #flowWrap02 > ul > li > div:nth-of-type(2) {
    display: flex;
    width: 100%; }
    #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(1) {
      align-self: flex-start;
      width: 45%;
      border-top: 2px solid #a63739;
      background: linear-gradient(to right, #f2eae3 60%, #fff 40%);
      display: flex;
      justify-content: flex-end; }
      #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(1) > img {
        width: 60%; }
    #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(2) {
      width: 55%;
      padding: 30px; }
      #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(2) > h3 {
        font-size: 20px;
        color: #a63739;
        margin-bottom: 10px; }
      #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(2) > p {
        font-size: 15px; }
  @media screen and (max-width: 600px) {
    #flowWrap02 > ul > li {
      margin-bottom: 30px; }
      #flowWrap02 > ul > li > div:nth-of-type(1) {
        display: block;
        text-align: center; }
      #flowWrap02 > ul > li > div:nth-of-type(2) {
        display: block; }
        #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(1) {
          width: 80%; }
          #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(1) > img {
            width: 90%; }
        #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(2) {
          padding: 20px;
          width: 100%;
          text-align: center; }
          #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(2) > h3 {
            font-size: 16px;
            letter-spacing: 0; }
          #flowWrap02 > ul > li > div:nth-of-type(2) > div:nth-of-type(2) > p {
            font-size: 12px;
            letter-spacing: 0; } }