@charset "UTF-8";

html { font-size: 62.5%; overflow-x: hidden;}
body { padding: 0; margin: 0; box-sizing: border-box;font-size: 1.6rem; font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; color: #584d2e;;}
img {margin: 0; padding: 0; max-width: 100%; height: auto; display: block;}
a {text-decoration: none; color: inherit; display: block;}
header,.wrapper{ max-width: 650px; margin: 0 auto;box-shadow: 0px 0px 27px 0px rgba(185, 185, 185, 0.5); position: relative;}
.relative { position: relative;}
.absolute {position: absolute;}
li { list-style-type: none;}
.garamond { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-style: normal;}
.pcBg { position: fixed;background: url(../img/pcbg.webp);background-size: cover;background-repeat: no-repeat;width: 100%;height: 100%;z-index: -1;background-position: center bottom;}  
/* fadeUpアニメーション */
.fadeUp{ animation-name:fadeUpAnime; animation-duration:0.7s; animation-fill-mode:forwards; opacity:0;}
.fadeUpTrigger{ opacity: 0; top: 0;}
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(40px);}
    to { opacity: 1; transform: translateY(0);}
}

/* -----------------------------------------------------
    floatingBarBlock
----------------------------------------------------- */
.floatingBarBlock {
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 700;
  max-width: 650px;
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: none;  /* 初期状態では非表示 */
}

.floatingBarBlock.active {
  opacity: 1;
  display: block;  /* 表示 */
}

.floatingBarBlock a {
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s;
}

.floatingBarBlock a:hover {
  opacity: 0.7;
}

@media (max-width: 649px) {
  .floatingBarBlock {
    width: 100%;
  }
}



/* ----------------------------------------------------- 
FV
----------------------------------------------------- */
#banner { max-width: 650px; margin: 0 auto;}
header#fv { max-width: 650px; aspect-ratio: 750/1200; margin: 0 auto; position: relative;  overflow-y: hidden;}
header#fv .txt {z-index: 100; position: absolute;}
header#fv .slider { margin-inline: auto; overflow: hidden; /* 画像がはみ出ないようにする */ width: 650px;}
header#fv .slick-img .item02 {max-width: none; width:111%; margin-left: -10%;}
header#fv .slick-img .item03 {max-width: none; width:104%; margin-bottom: -10px; margin-left: -3%;}
/* ズームアップアニメーション */
@keyframes fvzoomUp {
  0% { transform: scale(1);}
  100% { transform: scale(1.15);}
}
header#fv .add-animation {animation: fvzoomUp 10s linear forwards;}

/* 左から右にスライド */
@keyframes slideRight {
  0% {transform: translateX(0px);}
  100% {transform: translateX(80px);}
}
header#fv .slide-right { animation: slideRight 14s linear forwards;}
header#fv  .slide-left {animation: slideLeft 10s linear forwards;}
header#fv .slick-list { max-width: 650px; aspect-ratio: 750 / 1200; width: 100%;}

@media (max-width: 649px) {
header#fv  .slider { margin-inline: auto; overflow: hidden; /* 画像がはみ出ないようにする */ width: 100%!important;}
}


/* -----------------------------------------------------
 コンセプト
----------------------------------------------------- */
.filter {filter: blur(35px);  transition: .8s;}
.filter.active {filter: blur(0px);}
#concept .absolute.ph1 { width: 70%; top: 37%; right: 0;}
#concept .absolute.ph2 { width: 65%; top: 17%; left: 0; z-index: 1;}
#concept .absolute.ph3 { width: 48%; top: 50.5%; right: 0;}
#concept .absolute.ph4 { width: 100%; bottom: 0; left: 0;}
#concept .absolute.txt { width: 100%; top: 0; left: 0;}



/* -----------------------------------------------------
 CTA
----------------------------------------------------- */
#cta .absolute { top: 0;}
#cta .ctaBtnCont.absolute { width: 100%; top: 0; left: 50%; transform: translateX(-50%);}
#cta .ctaBtnCont.absolute .absolute { width: 72%; top: -36%; left: 50%; transform: translateX(-50%);}
.ctaBtnCont img { animation: anime1 0.75s ease 0s infinite alternate; transform-origin:center;}
@keyframes anime1 {
  from {transform: scale(0.9,0.9);}
  to {transform: scale(1,1);}
}


/* -----------------------------------------------------
 USP common
----------------------------------------------------- */
.deco { top: 0; mix-blend-mode: screen;}
.sticky_Cont { position: relative;}
.sticky_item { position: -webkit-sticky; /* Safari対応 */ position: sticky; top: 0px; /* 上から10pxの位置に固定 */ z-index: -1; /* 他の要素よりも前面に表示 */}
.sticky_Item { position:  relative; z-index: 100;}
.sticky_bg::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0,.6); z-index: 99; opacity: 0; transition: opacity 0.5s ease;}
.sticky_bg::before {content: ""; display: block; background-image: url(../img/fix_txt.webp); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; transition: opacity 0.5s ease; background-size: contain;}



/* -----------------------------------------------------
 USP1
----------------------------------------------------- */
#usp1 .tabCont { position: relative;}
#usp1 .tabCont .tabBtn li {position: absolute; width: 50%; height: 80px; display: block; top: 0;}
#usp1 .tabCont .tabBtn li.tab_chapel { left: 0;}
#usp1 .tabCont .tabBtn li.tab_partyhall { right: 0;}
#usp1 .sticky_bg.inview::after,#usp1 .sticky_bg.inview::before { opacity: 1;}


/* -----------------------------------------------------
 USP2
----------------------------------------------------- */
#usp2 .sticky_bg::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0,.65); z-index: 99; opacity: 0; transition: opacity 0.5s ease;}
#usp2 .sticky_bg::before {content: ""; display: block; background-image: url(../img/fix_txt2.webp); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; transition: opacity 0.5s ease; background-size: contain;}
#usp2  .viewmoreBtn { width: 50%; margin: 0 auto; margin-bottom: 17%; margin-top: 5%; cursor: pointer;}
#usp2 .hideimg { display: none;}
#usp2 .viewmoreBtn { cursor: pointer; /* ボタンにカーソルを表示 */}
#usp2 .sticky_bg.inview::after,#usp2 .sticky_bg.inview::before { opacity: 1;}


/* -----------------------------------------------------
 USP3
----------------------------------------------------- */
#usp3 .sticky_bg::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0,.65); z-index: 99; opacity: 0; transition: opacity 0.5s ease;}
#usp3 .sticky_bg::before {content: ""; display: block; background-image: url(../img/fix_txt3.webp); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; transition: opacity 0.5s ease; background-size: contain;}
#usp3 .dressSlideArea { width: 650px; margin: 0 auto; position: absolute;}
#usp3 .dressSlideArea .dressslider { display: flex; justify-content: center; padding: 0; list-style: none; margin: 0;}
#usp3 .dressSlideArea .dressslider .slick-track { padding-bottom: 4%;}
#usp3 .dressSlideArea .dressslider li { width: 450px; transition: transform 0.3s ease;}
#usp3 .dressslider li.slick-center { transform: scale(1);}
#usp3 .dressslider li:not(.slick-center) { transform: scale(0.82);}
#usp3 .dressSlideArea .dressslider li img { display: block; width: 100%; height: auto ;}
.slick-prev:before, .slick-next:before { display: none;}
#usp3 .dressSlideArea .dressslider .slick-prev { left: 5.5%; background: url(../img/arrow_left.webp) no-repeat; background-size: 100% auto; cursor: pointer; width: 13.33%; height: 13%; z-index: 1;}
#usp3 .dressSlideArea .dressslider .slick-next { right: 5.5%; background: url(../img/arrow_right.webp) no-repeat; background-size: 100% auto; cursor: pointer; width: 13.33%; height: 13%; z-index: 1;}
#usp3 .sticky_bg.inview::after,#usp3 .sticky_bg.inview::before { opacity: 1;}
/* ドットのスタイルをリセット */
#usp3 .dressslider .slick-dots { position: absolute; bottom: -4%; /* ドットの位置調整 */ width: 450px; text-align: center; padding: 0; list-style: none; display: flex; justify-content: start; transform: scale(1);}
#usp3 .dressslider .slick-dots li { display: inline-block; width: 50px !important; transform: scale(1); margin: 0 6px 0 0;}
#usp3 .dressslider .slick-dots li button { background: transparent; /* 背景を透明に設定 */ border: none; /* ボーダーを削除 */ width: 50px !important; /* ドットの幅を設定 */ height: 4px; /* ドットの高さを設定 */ padding: 0; /* パディングを削除 */ cursor: pointer; /* カーソルをポインタに設定 */ transform: scale(1);}
/* ドットのスタイル */
#usp3 .dressslider .slick-dots li button::before { content: ''; /* 内容を空に設定 */ display: block; width: 50px; /* ドットの幅を設定 */ height: 4px; /* ドットの高さを設定 */ background-color: rgb(255, 255, 255,.5); /* 通常のドットの色 */ transition: background-color 0.3s ease; /* 色変更の遷移を設定 */}
/* アクティブなドットのスタイル */
#usp3 .dressslider .slick-dots li.slick-active button::before {background-color: #ffffff;}

@media (max-width: 649px) {
  #usp3 .dressSlideArea { width: 100vw; top: 0;}
  #usp3 .dressSlideArea .dressslider li { width: 69.2vw; margin: 0;}
  #usp3 .dressslider .slick-dots { bottom: -5%; width: 69.2vw;}
  #usp3 .dressslider .slick-dots li { width: 6vw !important; margin: 0 3px 0 0;}
  #usp3 .dressslider .slick-dots li button { width: 6vw !important; /* ドットの幅を設定 */ height: 1px; /* ドットの高さを設定 */}
  /* ドットのスタイル */
  #usp3 .dressslider .slick-dots li button::before { width: 6vw; /* ドットの幅を設定 */ height: 2px; /* ドットの高さを設定 */}
}



/* -----------------------------------------------------
 フェア
----------------------------------------------------- */
#fair .absolute {top: 0;}
#fair .present .present_txtBox {top: 0; width: 100%; left: 50%; transform: translateX(-50%); aspect-ratio: 566/557; text-align: center;}
#fair .present .present_txtBox ul.absolute { top: 42%; width: 74%; left: 50%; transform: translateX(-50%); color: #196297; padding: 0; margin: 0;}
#fair .present .present_txtBox ul.absolute li { font-size: clamp(1rem, 3.7vw,2.4rem); padding: 7% 2%; background-image: -moz-linear-gradient( -148deg, rgb(244,245,245) 0%, rgb(237,245,246) 100%); background-image: -webkit-linear-gradient( -148deg, rgb(244,245,245) 0%, rgb(237,245,246) 100%); background-image: -ms-linear-gradient( -148deg, rgb(244,245,245) 0%, rgb(237,245,246) 100%);}
#fair .present .present_txtBox ul.absolute li:not(:last-child) { margin-bottom: 3%;}
#fair .present .present_txtBox ul.absolute li span { font-size: clamp(1.1rem, 4.9vw, 3.2rem);}

/* フェードアップ 位置調整 */
#fair ul.fadeUp{ animation-name:fairfadeUpAnime; animation-duration:0.7s; animation-fill-mode:forwards; opacity:0;}
#fair ul.fadeUpTrigger{ opacity: 0; top: 0;}
@keyframes fairfadeUpAnime{
  from { opacity: 0; transform: translateY(40px) translateX(-50%); left: 50%;}
    to { opacity: 1; transform: translateY(0) translateX(-50%); left: 50%;}
}

/* -----------------------------------------------------
 インタビュー
----------------------------------------------------- */
#interview .absolute { top: 0; left: 0;}



/* -----------------------------------------------------
 オーダーメイドプラン
----------------------------------------------------- */
#ordermade .absolute { top: 0; left: 0;}
.fadeImg { position:absolute; width: 95%; top: 0;  left: 50%; transform: translateX( -50%)}


/* -----------------------------------------------------
 アクセス
----------------------------------------------------- */
#access a.maplink { width: 50%; height: 100px; top: 0; left: 50%; transform: translateX( -50%);}
#access a.ctaBtn { width: 80%; top: 26px; left: 50%; transform: translateX( -50%);}
#access a.ctaBtn img { box-shadow: 0px 0px 20.4px 3.6px rgba(205, 205, 205, 0.67),inset 0px 0px 35.26px 7.74px rgba(59, 49, 22, 0.23);}
#access .ctaBtnCont img { animation: anime1 0.75s ease 0s infinite alternate; transform-origin:center;}
@media (max-width: 649px) {
  #access a.ctaBtn { top: 10%;}
}



/* -----------------------------------------------------
 〆
----------------------------------------------------- */
#end .absolute { width: 27.2%; left: 15%; top: 0px;}



/* -----------------------------------------------------
 cta2
----------------------------------------------------- */
#cta2 .absolute {top: 0; left: 0;}
#cta2 .ctaBtnCont.absolute { width: 100%; top: 13%; left: 50%; transform: translateX(-50%);}
#cta2 .ctaBtnCont.absolute .absolute { width: 67.3%; top: -30%; left: 50%; transform: translateX(-50%);}
#cta2 .caseArea { width: 650px; margin: 0 auto; position: absolute; top: 0;}
#cta2 .caseArea .caseslider { display: flex; justify-content: center; padding: 0; list-style: none; margin: 0;}
#cta2 .caseArea .caseslider li { width: 312px; margin: 0 13px;}
#cta2 .caseArea .slick-next { display: none!important;}
#cta2 .caseArea .slick-dots .slick-dots li,#cta2 .caseArea .slick-dots li button:before { display: none!important;}

@media (max-width: 649px) {
  #cta2 .caseArea { width: 100vw; bottom: 1.4%;}
  #cta2 .caseArea .caseslider li { width: 48vw; margin: 0 4vw;}
 }
  



/* -----------------------------------------------------
 faq
----------------------------------------------------- */
#faq { background-color: #ffffff}
#faq .accordion { padding-bottom: 15%; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; letter-spacing: 0.04em; line-height: 1.55;}
#faq .accordion { margin: 0 auto;}
#faq .accordion dl { margin: 0 auto; margin: 0 6.65% 5%; padding: 5% 7.33%; box-sizing: border-box; border: 1px solid #584d2e;}
#faq .accordion dt {  font-size: clamp(1.5rem, 4vw, 2.6rem); cursor: pointer; position: relative;}
#faq .accordion dt::before { position: absolute; content: "Q"; display: block; font-family: "EB Garamond", serif; font-size: clamp(1.5rem, 4vw, 2.8rem); transform: translateY(-2px);}
#faq .accordion dt p { font-weight: normal; padding-left: 6.4%;}
#faq .accordion dd { width: 100%; padding: 0; margin: 5% 0 0; border-top: 1px solid #584d2e;}
#faq .accordion dd p { font-size: clamp(1.4rem, 3.38vw, 2.4rem); padding: 5% 8% 0 6.4%; position: relative;}
#faq .accordion dd p::before { position: absolute; content: "A"; display: block; font-family: "EB Garamond", serif; left: 0; font-size: clamp(1.7rem, 4vw, 3rem); transform: translateY(-4px);}
#faq .accordion dt .faqbtn { display: block; width: 22px; height: 22px; position: absolute; top: 10px; right: 5px;}
#faq .accordion dt .faqbtn span.open { content: ""; display: block; width: 22px; height: 2px; background-color: #584d2e; position: absolute; top: 10px; left: 0;}
#faq .accordion dt .faqbtn span.close { content: ""; display: block; width: 2px; height: 22px; background-color: #584d2e; position: absolute; top: 0; left: 10px;}
#faq .accordion .faqbtn span.close { opacity: 1; transition: opacity 0.5s ease-in-out;}
#faq .accordion .faqbtn span.close.hidden { opacity: 0;}

@media (max-width: 649px) {
  #faq .accordion dl { padding: 5% 5%;}
  #faq .accordion dt { background: url("../img/faq_Q.webp") no-repeat left 4px; background-size: 4.5%; }
  #faq .accordion dt .faqbtn { width: 16px; height: 17px; position: absolute; top: 3px; right: 0px;}
  #faq .accordion dt .faqbtn span.open { content: ""; display: block; width: 17px; height: 1px; top: 8px; left: 0;}
  #faq .accordion dt .faqbtn span.close { content: ""; display: block; width: 1px; height: 17px; top: 0; left: 8px;}
}



/* -----------------------------------------------------
 footer
----------------------------------------------------- */
footer { max-width: 650px;}
footer .wrapper { padding: 120px 6.65% 0; background-color: #FBF8F1; box-shadow: none;}
footer .txtBox { font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;letter-spacing: 0.06em; padding: 70px 4%; line-height: 1.8; border-bottom: 1px solid #7f7969;} 
footer .txtBox p.txt,footer .txtBox a { margin: 0 0 4.5% 0; font-size: clamp(1.4rem, 3.7vw, 2.2rem);}
footer .txtBox p.ttl { color: #7f7968;  font-size: clamp(1.2rem, 2.92vw, 1.9rem);}
footer .txtBox .garamond { font-size: clamp(1.5rem, 3.7vw, 2.4rem);}
footer ul { display: flex; justify-content: center; width: 100%; padding: 10% 0; margin: 0; gap: 40px;}
footer ul li a { font-size: clamp(1.24rem, 2.92vw, 1.9rem); transition: .6s; letter-spacing: .08em;}
footer ul li a:hover { opacity: .5;}
footer p.copyright { width: 100%; display: block; padding: 15px 0; background-color: #625636; color: #ffffff; letter-spacing: 0.08em; text-align: center; font-size: 1.3rem; margin: 0;}

@media (max-width: 649px) {
  footer .wrapper { padding: 20% 6.65% 0;}
  footer .txtBox { padding: 10% 0;}
  .txtBox p.txt,.txtBox a { margin: 0 0 4% 0; line-height: 1.7;}
  .txtBox p.ttl { font-size: 2.1rem; margin:0 0 1% 0;}
  footer ul { gap: 6%;}
  footer p.copyright { font-size: 1.1rem;}
}