@charset "utf-8";
/* 下層ページのCSS */
/*＝＝＝＝＝＝＝topページのCSS＝＝＝＝＝＝＝*/

.top h1 {
  height: 500px;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-rl;
  font-size: 35px;
  position: absolute;
  right: 15%;
  margin-top: 100px;
    text-align: left;
}


.main-info {
  text-align: center;
}
.main-info img {
  width: 40%;
  padding-top: 200px;
}
.main-info-text {
  margin: 50px auto 0;
  width: 40%;
  text-align: left;
    font-size: 18px;
}
.main-info-text2 {
  margin: 20px auto 150px;
  width: 40%;
  text-align: left;
    font-size: 18px;
}
.main-info h2 {
  text-decoration: underline;
  margin: 20px auto 0;
  width: 40%;
  text-align: left;
}
.interior {
  background-color: #ECECEC;
  color: #000b1c;
  height: 100vh+300px;
}
.interior p {
  width: 40%;
  margin: 0 auto;
  padding-top: 250px;
  padding-bottom: 200px;
    font-size: 18px;
}
.dishes img {
  width: 60%;
  object-fit: cover;
}
.attention {
  height: 225px;
  color: #000b1c;
  background-color: #ECECEC;
  font-size: 20px;
  text-align: center;
}
.course dl{
    line-height: 40px;
}
/*========= 婚礼サイトはこちらボタンのCSS ===============*/
.link-button {
  display: block;
    margin-top: 50px;
}
.btnripple2 {
  /*波紋の基点とするためrelativeを指定*/
  position: relative;
  /*波紋の形状*/
  display: inline-block;
  background: #8E7823;
  margin-top: 50px;
  margin-bottom: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: #ccc;
  outline: none;
  /*アニメーションの設定*/
  transition: all .3s;
}
.btnripple2 span {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: 25%;
  left: 5%;
}
/*hoverした際の背景色の設定*/
.btnripple2:hover {
  background: #7B6922;
}
/*波形を2つ設定*/
.btnripple2::after, .btnripple2::before {
  content: '';
  /*絶対配置で波形の位置を決める*/
  position: absolute;
  left: -25%;
  top: -25%;
  /*波形の形状*/
  border: 1px solid #8E7823;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  /*はじめは不透明*/
  opacity: 1;
  /*ループするアニメーションの設定*/
  animation: 2s circleanime linear infinite;
}
/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnripple2::before {
  animation-delay: .6s;
}
/*波形のアニメーション*/
@keyframes circleanime {
  0% {
    transform: scale(0.68);
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
.menu p {
  margin-top: 20px;
}
.menu dt {
  font-size: 24px;
}
.menu dd {
  display: inline;
  border-bottom: solid 1px #fff;
}
.menu h3 {
  font-size: 24px;
}
.reservation {
  margin: 30px auto;
  width: 70%;
  height: 250px;
  background-color: #ECECEC;
  color: #000b1c;
  font-size: 20px;
}
.reservation2 {
  margin: 30px auto;
  width: 70%;
  height: 250px;
  background-color: #fff;
  color: #000b1c;
  font-size: 20px;
}
.reservation-text {
  text-align: center;
  margin: 20px auto;
  padding-top: 30px;
}
.howto {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 22px;
  margin: 20px auto;
  border-radius: 10px;
}
.howto li {
  width: 400px;
  height: 100px;
  border: solid 1px #8E7823;
  border-radius: 10px;
}
.form:hover {
  background: #7B6922;
  transform: scale(1.1);
  border: solid 1px #8E7823;
    transition : 0.5s;
}
.howto li a {
  display: block;
  text-align: center;
  position: relative;
  top: 20%;
}
.form {
  color: #fff;
  background-color: #8E7823;
}
.image {
  text-align: left;
}
.menu h1::after {
  content: "";
  display: block;
  width: 1px;
  height: 70px;
  background-color: #fff;
  margin: 20px auto;
}
/*＝＝＝＝＝＝＝婚礼topページのCSS＝＝＝＝＝＝＝*/
.header2 {
  background-color: #ECECEC;
  color: #8E7823;
}
.header2 p {
  font-weight: bold;
  font-size: 26px;
  margin-top: 40px;
}
.w-header-logo img {
  width: 230px;
  margin-left: 100px;
}
.pc-header-inner2 {
  display: flex;
}
.w-footer {
  color: #000b1c;
  background-color: #ECECEC;
}
.wedding-top {
  color: #000b1c;
  background-color: #ECECEC;
}

.wedding-top h1 {
  padding-top: 50px;
  height: 500px;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-rl;
  font-size: 35px;
    font-weight: bold;
  position: absolute;
  right: 20%;
}
.wedding-concept {
  padding-top: 100px;
  text-align: center;
  font-size: 18px;
}
.wedding-concept2 {
  padding-top: 50px;
    padding-bottom: 50px;
  text-align: center;
  font-size: 18px;
}
.fair {
  text-align: center;
}
.fair h2 {
  font-size: 30px;
  font-weight: bold;
  padding-top: 100px;
  padding-bottom: 70px;
}
.fair-text {
  text-align: left;
}
.fair-text dt{
    margin-top: 10px;
}
   .fair-text dd{
        font-size: 18px;
    }
.tag {
  display: inline-block;
  margin: 10px 5px;
  background-color: #fff;
}
.slide-container {
    width: 50%;
    margin: 50px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 30s infinite linear 1s both;
    padding-left: 40px;
}
.slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}
/*ここからのCSSは801px以上(pcなど)のときだけ適用*/
@media(min-width: 801px) {
  /*.business{
    position: absolute;
    right: 0;
}*/
    .attachment2{
     width: 100%;
  height: 800px;
  /*object-fit: cover;*/
  background-image: url("../img/business.jpeg");
  /* 画像のURLを指定       */
  background-repeat: no-repeat; /* 画像の繰り返しを指定  */
  background-position: center center; /* 画像の表示位置を指定  */
  background-size: cover; /* 画像のサイズを指定    */
  background-attachment: fixed;
}
    .attachment {
  width: 100%;
  height: 700px;
  /*object-fit: cover;*/
  background-image: url("../img/wedding/teien.png");
  /* 画像のURLを指定       */
  background-repeat: no-repeat; /* 画像の繰り返しを指定  */
  background-position: center center; /* 画像の表示位置を指定  */
  background-size: cover; /* 画像のサイズを指定    */
  background-attachment: fixed;
}
    .dishes{
        padding-top: 80px;
        padding-bottom: 80px; 
    }
  .dishes p {
    display: none;
  }
  .dishes img {
    height: 300px;
  }
  /*　画像の縮小＋テキスト出現　*/
  .zoomOutText { /*背景色とテキストの基点となる位置を定義*/
    position: relative;
      width: 600px;
  }
  .zoomOutText span.mask {
    position: relative;
    transition: 1s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
    display: block; /*画像をくくるspanタグをブロック要素にする*/
    line-height: 0; /*行の高さを0にする*/
    overflow: hidden; /*拡大してはみ出る要素を隠す*/
  }
  .zoomOutText:hover span.mask::before { /*hoverした時の変化*/
    content: "";
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    width: calc(700px - 20px);
    height: calc(100% - 20px);
    background: rgba(0, 0, 0, 0.5); /*背景色*/
  }
  .zoomOutText img {
      width: 65%;
    transform: scale(1.2);
    filter: blur(0);
    transition: 1s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
      padding-bottom: 15px;
  }
    .ivent{
        object-position: 90% 70%;
    }
  .zoomOutText:hover img { /*hoverした時の変化*/
    transform: scale(1); /*縮小の値を変更したい場合はこの数値を変更*/
    filter: blur(2px); /*ぼかし具合を変更したい場合はこの数値を変更*/
  }
  .zoomOutText span.cap {
    opacity: 0;
    transition: 1s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
    position: absolute;
    z-index: 3; /*テキストを前面に出す*/
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    color: #fff; /*テキストの色を変えたい場合はここを修正*/
    font-size: 28px;
    line-height: 1.5; /*行の高さを1.5にする*/
  }
  .zoomOutText:hover span.cap { /*hoverした時の変化*/
    opacity: 1;
  }
  /*　横幅　*/
  .zoomOutText {
    width: 60%;
    margin: 0 auto; /*中央揃え*/
  }
  /*＝＝＝＝＝＝＝menuページのCSS＝＝＝＝＝＝＝*/
  .menu {
    text-align: center;
  }
  .course {
    margin: 100px auto;
    display: flex;
    justify-content: center;
    gap: 30px;
  }
  .gallery {
    width: 1050px;
    display: grid;
    grid-template-columns: 400px 400px 200px;
    grid-template-rows: 265px;
    column-gap: 30px;
    object-fit: cover;
    margin: 100px auto;
  }
  .business-course {
    height: 333.33px;
    object-fit: cover;
  }
  .business-area p {
    width: 450px;
      text-align: center;
      margin: 20px auto 0;
  }
    .business-text{
        text-align: left;
    }
  .attention p {
    width: 600px;
    /*border-top: 2px solid #000b1c;
  border-bottom: 2px solid #000b1c;*/
    margin: 0px auto;
    align-items: center;
    position: relative;
    top: 30%;
  }
  .menu img {
    width: 500px;
  }
  .menu h1 {
    text-align: center;
    font-size: 40px;
    margin-top: 100px;
  }
  .event-area h2 {
    height: 100px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 35px;
    position: absolute;
    right: 28%;
    margin-top: 50px;
  }
  .event-area img {
    width: 50%;
  }
  .event {
    display: flex;
    justify-content: center;
    gap: 30px;
  }
  .event img {
    width: 500px;
  }
  .event-text {
    width: 450px;
  }
  .event-text {
    text-align: left;
  }
  .event h2 {
    font-size: 22px;
    padding-bottom: 50px;
  }
  .event h3 {
    margin-top: 80px;
  }
  .event p {
    margin-top: 50px;
  }

  /*＝＝＝＝＝＝＝婚礼topページのCSS＝＝＝＝＝＝＝*/
  .wedding-site {
    background-color: #ECECEC;
  }
    .pc-header-wedding-menu{
        align-items: center;
    }
  .pc-site-weeding-menu {
    width: 750px;
      padding-right: 100px;
  }
  .wedding-menu {
    display: flex;
    justify-content: space-between;
  }
  .ashirai-text {}
  .wrap3 {
    display: flex;
    justify-content: space-between;
  }
  .m-header-weddingsite-menu {
    display: none;
  }
  .wedding-menu {
    font-size: 20px;
    margin-top: 50px;
    margin-right: 20px;
  }
  .w-footer-logo img {
    width: 350px;
    margin-top: 80px;
  }
  .ashirai-text {
    text-align: center;
    font-size: 120px;
    color: rgba(142, 120, 35, 0.5);
  }
  .miryoku {
    text-align: center;
  }
  .miryoku h2 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .flex {
      width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 20px;
    font-size: 24px;
    color: #fff;
  }
  .flex a:hover {
    cursor: pointer;
    transform: scale(1.05);
      transition : 0.5s;
  }
  .wedding-link {
    display: block;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../img/wedding/wedding-filter.jpg");
    opacity: 0.8;
      
  }
  .menu-link {
    display: block;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../img/wedding/dishes-filter.jpg");
    opacity: 0.8;
  }
  .costume-link {
    display: block;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../img/wedding/costume-filter.jpg");
    opacity: 0.8;
  }
  .flex2 {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    column-gap: 100px;
  }
  .flex2 img {
    width: 600px;
    height: 400px;
    object-fit: cover;
  }
  .flex2 li:hover {
    cursor: pointer;
    transform: scale(1.05);
      transition : 0.5s;
  }
 
  .flex3 {
    display: flex;
    justify-content: center;
    column-gap: 30px;
  }
    .flex3 li:hover {
         cursor: pointer;
    transform: scale(1.05);
      transition : 0.5s;
    }
  .flex3 img {
    width: 600px;
    height: 400px;
    object-fit: cover;
  }
  .mitumori {
    text-align: center;
  }
  .mitumori h2 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .mitumori p {
    text-align: center;
    margin-bottom: 50px;
  }
}
/*ここからのCSSは800px以下（モバイルなど）のときだけ適用*/
@media (max-width: 800px) {
  .top h1 {
    height: 300px;
    font-size: 25px;
    writing-mode: horizontal-tb;
    text-align: left;
  }
  .main-info img {
    width: 80%;
    padding-top: 200px;
  }
  .main-info-text {
      width: 80%;
    margin: 100px auto 0;
      font-size: 16px;
  }

  .main-info-text2 {
    width: 80%;
      margin-bottom: 100px;
      font-size: 16px;
  }
  .main-info h2 {
    width: 80%;
  }
  .interior p {
    width: 80%;
      padding-bottom: 100px;
      font-size: 16px;
  }
  .private {
    padding-top: 220px;
  }
    .private-area li{
        text-align: center;
    }
    .business-area li{
        text-align: center;
    }
    .event-area{
        display: block;
        margin: 0 auto;
    }
    .event-area h1{
        text-align: center;
    }
    .wedding-img{
        width: 100%;
    }
    .ivent{
        height: 220px;
        object-fit: cover;
    }
  .dishes img {
    width: 80%;
  }
  .dishes {
    text-align: center;
  }
  .dishes h1 {
    text-align: left;
    padding-left: 40px;
  }
  .cap {
    display: none;
  }
  .m-none {
    padding-bottom: 50px;
  }
  .menu {
    display: block;
  }
  .private-area img {
    width: 331px;
    text-align: center;
      padding-top: 30px;
  }
    .business-area img{
        width: 331px;
    text-align: center;
      padding-top: 30px;
    }
    .event img{
             width: 331px;
    text-align: center;
      padding-top: 30px;
    }
    
  .attention {
    font-size: 18px;
  }
  .attention p {
    position: relative;
    top: 30%;
  }
  .menu {
    display: block;
    text-align: center;
  }
    .menu h3{
        font-size: 20px;
        padding-bottom: 30px;
    }
  .course, .event-area, .event-text p {
    width: 70%;
    text-align: left;
    margin: 10px auto;
  }
    .konrei-text p{
        text-align: left;
    }
  .menu h1 {
    font-size: 24px;
      padding-top: 50px;
  }
  .reservation {
    margin: 50px auto 30px;
    width: 100%;
    height: 250px;
    background-color: #ECECEC;
    color: #000b1c;
    font-size: 16px;
  }
  .reservation2 {
    margin: 30px auto;
    width: 100%;
    height: 250px;
    background-color: #fff;
    color: #000b1c;
    font-size: 16px;
  }
  .howto li {
    font-size: 18px;
    width: 80%;
    height: 115px;
    border: solid 1px #8E7823;
    border-radius: 10px;
  }
  .gallery {
    display: grid;
    grid-template-columns: 200px 100px 100px;
    column-gap: 10px;
  }
  .gallery img {
    height: 150px;
    object-fit: cover;
  }
  .link-button {
    text-align: center;
  }
  .business-course {
    height: 220px;
    object-fit: cover;
  }
  
  /*＝＝＝＝＝＝＝婚礼topページのCSS＝＝＝＝＝＝＝*/
  .header2 p {
    font-weight: bold;
    font-size: 18px;
    margin-top: 20px;
  }
  .w-header-logo img {
    width: 150px;
  }
  .pc-header-wedding-menu {
    display: none;
  }
  .m-weddingsite-menu {
    background-color: #ECECEC;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
  }
  .m-weddingsite-menu ul {
    display: flex;
    justify-content: space-around;
  }
  .m-weddingsite-menu li {
    width: 60px;
    height: 60px;
    border: 2px solid #8E7823;
    border-radius: 50%;
    text-align: center;
    margin: 15px 10px;
  }
  .m-weddingsite-menu a {
    display: block;
    text-align: center;
    position: relative;
    top: 25%;
  }
  .m-weddingsite-menu li:nth-child(2) {
    font-size: 14px;
    line-height: 1rem;
  }
  .m-weddingsite-menu li:nth-child(3) {
    font-size: 14px;
    line-height: 1rem;
  }
  .ashirai-text {
    writing-mode: vertical-rl;
    color: rgba(255, 255, 255, 0.5);
    font-size: 60px;
    position: absolute;
    top: 40%;
    left: -5%;
  }
  .wedding-site {
    background-color: #ECECEC;
  }
  .wedding-top h1 {
    padding-top: 30px;
    font-size: 25px;
    height: 250px;
    position: absolute;
    right: 40%;
  }
  .wedding-concept {
    padding-top: 250px;
    font-size: 16px;
    width: 80%;
    margin: 0 auto;
  }
  .wedding-concept2 {
    padding-top: 20px;
    font-size: 16px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .w-footer {
    padding-bottom: 90px;
  }
  .w-footer-logo img {
    max-width: 200px;
  }
  .wedding-link {
      margin: 0 auto;
      display: block;
    width: 80%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../img/wedding/wedding-filter.jpg");
      color: #fff;
      font-size: 20px;
      opacity: 0.8;
  }
  .menu-link {
      margin: 0 auto;
      display: block;
    width: 80%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../img/wedding/dishes-filter.jpg");
      color: #fff;
      font-size: 20px;
      opacity: 0.8;
  }
  .costume-link {
      margin: 0 auto;
      display: block;
    width: 80%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("../img/wedding/costume-filter.jpg");
      color: #fff;
      font-size: 20px;
      opacity: 0.8;
  }
  .flex2 {
    display: flex;
    column-gap: 30px;
    overflow: scroll;
    margin-left: 30px;
  }
  .flex2 li {
    flex-shrink: 0;
  }
  .flex2 img {
    width: 320px;
    height: 300px;
    object-fit: cover;
  }
  .fair-text {
    width: 300px;
  }
  .miryoku {
    text-align: center;
  }

  .flex3{
    display: block;
      margin: 0 auto;
  }
    .flex3 img{
        width: 80%;
        height: 200px;
        object-fit: cover;
    }
  .wedding-top h2 {
    font-size: 30px;
    font-weight: bold;
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .mitumori {
    text-align: center;
  }
  .mitumori p {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px;
  }
  .mitumori dd {
    padding-bottom: 40px;
      margin: 0 auto;
    width: 80%;
  }
    .slide-container {
    width: 80%;
    margin: 50px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
    .slide-wrapper{
        padding-left: 10px;
    }
    .w-header-logo img{
        margin-left: 0;
    }
    .attachment {
  width: 100%;
  height: 700px;
  /*object-fit: cover;*/
  background-image: url("../img/wedding/teien.png");
  /* 画像のURLを指定       */
  background-repeat: no-repeat; /* 画像の繰り返しを指定  */
  background-position: center center; /* 画像の表示位置を指定  */
  background-size: cover; /* 画像のサイズを指定    */
        z-index: -1;
}
    .attachment2{
     width: 100%;
  height: 800px;
  /*object-fit: cover;*/
  background-image: url("../img/business.jpeg");
  /* 画像のURLを指定       */
  background-repeat: no-repeat; /* 画像の繰り返しを指定  */
  background-position: center center; /* 画像の表示位置を指定  */
  background-size: cover; /* 画像のサイズを指定    */
  z-index: -1;
}
}