@charset "UTF-8";
/* CSS Document */

:root{
--base-font-color: #543e21;
--light-brown01: #86643b;
--light-brown02: #a87939;
--beige: #dabf83;
--comp-620: calc(620cqw / 740 * 100);
--comp-580: calc(580cqw / 740 * 100);
--comp-500: calc(500cqw / 740 * 100);
--comp-450: calc(450cqw / 740 * 100);
--comp-310: calc(310cqw / 740 * 100);
--comp-300: calc(300cqw / 740 * 100);
--comp-280: calc(280cqw / 740 * 100);
--comp-270: calc(270cqw / 740 * 100);

--comp-200: calc(200cqw / 740 * 100);
--comp-195: calc(195cqw / 740 * 100);
--comp-190: calc(190cqw / 740 * 100);
--comp-185: calc(185cqw / 740 * 100);
--comp-180: calc(180cqw / 740 * 100);
--comp-175: calc(175cqw / 740 * 100);
--comp-170: calc(170cqw / 740 * 100);
--comp-165: calc(165cqw / 740 * 100);
--comp-160: calc(160cqw / 740 * 100);
--comp-155: calc(155cqw / 740 * 100);
--comp-150: calc(150cqw / 740 * 100);
--comp-145: calc(145cqw / 740 * 100);
--comp-140: calc(140cqw / 740 * 100);
--comp-135: calc(135cqw / 740 * 100);
--comp-130: calc(130cqw / 740 * 100);
--comp-125: calc(125cqw / 740 * 100);
--comp-120: calc(120cqw / 740 * 100);
--comp-115: calc(115cqw / 740 * 100);
--comp-110: calc(110cqw / 740 * 100);
--comp-105: calc(105cqw / 740 * 100);
--comp-100: calc(100cqw / 740 * 100);
--comp-95: calc(95cqw / 740 * 100);
--comp-90: calc(90cqw / 740 * 100);
--comp-85: calc(85cqw / 740 * 100);
--comp-80: calc(80cqw / 740 * 100);
--comp-75: calc(75cqw / 740 * 100);
--comp-70: calc(70cqw / 740 * 100);
--comp-65: calc(65cqw / 740 * 100);
--comp-60: calc(60cqw / 740 * 100);
--comp-55: calc(55cqw / 740 * 100);
--comp-50: calc(50cqw / 740 * 100);
--comp-45: calc(45cqw / 740 * 100);
--comp-40: calc(40cqw / 740 * 100);
--comp-35: calc(35cqw / 740 * 100);
--comp-30: calc(30cqw / 740 * 100);
--comp-25: calc(25cqw / 740 * 100);
--comp-20: calc(20cqw / 740 * 100);
--comp-15: calc(15cqw / 740 * 100);
--comp-10: calc(10cqw / 740 * 100);
--comp-05: calc(5cqw / 740 * 100);

--comp-36: calc(36cqw / 740 * 100);
--comp-28: calc(28cqw / 740 * 100);
--comp-26: calc(26cqw / 740 * 100);
--comp-24: calc(24cqw / 740 * 100);
--comp-22: calc(22cqw / 740 * 100);
--comp-18: calc(18cqw / 740 * 100);
}


/* CONTAINER
-----------------------------------*/
.breadcrumbsWrap + .sec { padding-bottom: 0;}
.bridalWrap{ font-family: "Zen Old Mincho", serif; font-style: normal; color: var(--base-font-color); container-type: inline-size;}
.bridalWrap p{ letter-spacing: 0.05em; line-height: calc(50 / 28);}
#bridal-container-box{ background-image: url(../img/common/bg-base.webp); background-repeat: repeat-y; background-position: center top; background-size: 100% auto; padding-bottom: var(--comp-20);}
.bridal-leadtext{ text-align: center; font-size: var(--comp-26); }
.bridal-ttl-a{ width: var(--comp-580); margin: 0 auto var(--comp-30);}
.bridal-ttl-b{ margin: var(--comp-45) auto var(--comp-45); text-align: center;}
.bridal-ttl-b span{ display: block;}
.bridal-ttl-b .en{ font-size: var(--comp-36); color: var(--light-brown01); font-weight: bold;}
.bridal-ttl-b .ja{ color: var(--light-brown02); font-size: var(--comp-24); margin-top: var(--comp-15);}
.bridal-ttl-b .ja::before{ content: "─"; margin-right: 0.5em;}
.bridal-ttl-b .ja::after{ content: "─"; margin-left: 0.5em;}
.bridal-ttl-c{ margin: 0 auto var(--comp-30);}
.bridal-ttl-c span{ display: block;}
.bridal-ttl-c .en{ display: block; margin-bottom: var(--comp-30);}
.bridal-ttl-c .en img{ display: block; width: 100%;}
.bridal-ttl-c .ja{ color: var(--light-brown02); font-size: var(--comp-24); margin-top: var(--comp-15);}
.bridal-ttl-c .ja::before{ content: "─"; margin-right: 0.5em;}
.bridal-ttl-c .ja::after{ content: "─"; margin-left: 0.5em;}
.party-ttl-a{ font-size: var(--comp-40) !important; text-align: center !important; color: #644e13;}

/* animation
-----------------------------------*/
.scroll-flag{ opacity: 0; transform: translateY(var(--comp-10)); transition: all ease 0.8s;}
.scroll-flag.scrollin{ opacity: 1; transform: translateY(0); }

/* MV
-----------------------------------*/
#bridal-mv{ background-image: url(../img/common/img-main.webp); background-repeat: no-repeat; background-position: center; background-size: cover; aspect-ratio: 740 / 1100; width: 100%; display: flex; flex-direction: column; justify-content: space-between; animation: blur01 1.5s ease forwards; animation-delay: 0.5s; opacity: 0;}
#bridal-ttl{ width: var(--comp-620); margin-inline: auto; margin-top: var(--comp-60); animation: blur01 1.5s ease forwards; animation-delay: 1.5s; opacity: 0;}
#bridal-mv .bridal-lead-txt{ text-align: center; font-size: var(--comp-28); margin-bottom: var(--comp-75); animation: blur01 1.5s ease forwards; animation-delay: 2s; opacity: 0;}

@keyframes blur01{
from{ transform: scale(1.1); filter: blur(var(--comp-20)); opacity: 0; }
to{ transform: scale(1); filter: blur(0); opacity: 1;}
}

/* WEDDING RINGS
-----------------------------------*/
.wrap-bridal-wedding_rings{ position: relative; background-image: url(../img/common/bg-rose01-l.webp); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; padding-top: var(--comp-100);}
.wrap-bridal-wedding_rings::before{ content: ""; display: block; width: 100%; height: var(--comp-130); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type01-t.webp); background-size: 100cqw var(--comp-130);}
.wrap-bridal-wedding_rings::after{ content: ""; display: block; width: 100%; height: var(--comp-130); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type01-b.webp); background-size: 100cqw var(--comp-130);}
#bridal-wedding_rings{ position: relative; background-image: url(../img/common/bg-m.webp); background-repeat: repeat-y;background-position: center top; background-size: 100cqw auto; width: 100%; }
#bridal-wedding_rings > *{ width: var(--comp-580); margin-inline: auto;}
.ring-slider-box:has( + .bridal-ttl-b){ margin-bottom: var(--comp-100); }
.wrap-ring-slider-box{ position: relative;}
.wrap-ring-slider-box .slick-slider{ margin-bottom: 0;}
.wrap-ring-slider-box .slick-slide{ margin-inline: var(--comp-20);}
.wrap-ring-slider-box .slick-slide a{ display: block;}
.wrap-ring-slider-box .slick-slide a figure{ margin-bottom: var(--comp-35); overflow: hidden; aspect-ratio: 1 / 1;}
.wrap-ring-slider-box .slick-slide a figure img{ display: block; object-fit: cover; height: 100%; width: 100%; transform: scale(1.1); transition: all ease 1.2s; filter: blur(var(--comp-20));}
.wrap-ring-slider-box .slick-slide.slick-active a figure img{ transform: scale(1); transition: all ease 1.2s; filter: blur(0);}
.wrap-ring-slider-box .slick-slide a p{ text-align: center; color: var(--light-brown01); font-size: var(--comp-24);}
.wrap-ring-slider-box .arrow-box{ position: absolute; top: calc(var(--comp-450) / 2); width: 100%; pointer-events: none; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 var(--comp-10); transform: translateY(-50%);}
.wrap-ring-slider-box .arrow-box .slick-arrow{ pointer-events: all; aspect-ratio: 40 / 74; width: var(--comp-40); position: relative;}
.wrap-ring-slider-box .arrow-box .ring-slider-prev span{ position: absolute; top: 50%; left: 90%; display: block; width: var(--comp-50); aspect-ratio: 1 / 1;  border-top: 2px solid var(--beige); border-left: 2px solid var(--beige); transform: translate(-50%, -50%) rotate(-45deg);}
.wrap-ring-slider-box .arrow-box .ring-slider-next span{ position: absolute; top: 50%; left: 10%; display: block; width: var(--comp-50); aspect-ratio: 1 / 1;  border-top: 2px solid var(--beige); border-right: 2px solid var(--beige); transform: translate(-50%, -50%) rotate(45deg);}
.ring-slider-box .dot-box{ width: 100%; margin-top: var(--comp-50);}
.ring-slider-box .dot-box .slick-dots{ display: flex; justify-content: center; width: var(--comp-580); gap: var(--comp-30); position: relative; bottom: auto; left: auto; top: auto; right: auto; margin: 0;}
.ring-slider-box .dot-box .slick-dots li{ margin: 0; aspect-ratio: 1 / 1; width: var(--comp-20); height: var(--comp-20);}
.ring-slider-box .dot-box .slick-dots li button{ padding: 0; width: 100%; height: 100%; position: relative; background-color: #e0d0a2; border-radius: 50%; transition: all ease 0.5s;} 
.ring-slider-box .dot-box .slick-dots li button::before{ content: none;}
.ring-slider-box .dot-box .slick-dots li.slick-active button{ background-color: #ad9034;}

/* BRAND
-----------------------------------*/
.wrap-bridal-brand{ position: relative; background-image: url(../img/common/bg-rose01-r.webp); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; padding-top: var(--comp-140);}
.wrap-bridal-brand::before{ content: ""; display: block; width: 100%; height: var(--comp-130); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type01-t.webp); background-size: 100cqw var(--comp-130);}
.wrap-bridal-brand::after{ content: ""; display: block; width: 100%; height: var(--comp-130); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type01-b.webp); background-size: 100cqw var(--comp-130);}
#bridal-brand{ position: relative; background-image: url(../img/common/bg-m.webp); background-repeat: repeat-y;background-position: center top; background-size: 100cqw auto; width: 100%; }
#bridal-brand > *{ width: var(--comp-580); margin-inline: auto;}
#bridal-brands ul{ display: flex; flex-wrap: wrap; row-gap: var(--comp-45); column-gap: var(--comp-40); justify-content: center;}
#bridal-brands ul li{ width: var(--comp-270);}
#bridal-brands ul li a{ display: block;}
#bridal-brands ul li figure{ display: block; margin-bottom: var(--comp-20);}
#bridal-brands ul li figure:last-child{ margin-bottom: 0;}
#bridal-brands ul li h3{ position: relative; padding-bottom: var(--comp-10); text-align: center; font-size: var(--comp-24); color: var(--light-brown01); margin: 0 auto var(--comp-25);}
#bridal-brands ul li h3::after{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: var(--beige); height: 1px; width: var(--comp-50);}
#bridal-brands ul li p{ font-size: var(--comp-20); color: var(--base-font-color);}

/* PLACE・PARTY
-----------------------------------*/
.wrap-place{ position: relative; background-image: url(../img/common/bg-rose01-l.webp); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; padding-top: var(--comp-180); }
#bridal-place{ background-image: url(../img/common/bg-img-place.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; aspect-ratio: 740 / 772; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#bridal-place-inner{ background-image: url(../img/common/bg-place.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; aspect-ratio: 1000 / 1224; width: var(--comp-500); display: flex; flex-direction: column; justify-content: center; align-items: center;}
.bridal--place-ttl{ margin: 0 auto var(--comp-50);}
.bridal--place-ttl .en{ width: calc(214cqw / 740 * 100); display: block;margin-inline: auto; margin-bottom: var(--comp-15);}
.bridal--place-ttl .ja{ font-size: var(--comp-22); color: var(--light-brown01);}
#bridal-place-inner .bridal-leadtext{ font-size: var(--comp-26); margin-bottom: var(--comp-50); } 
#bridal-place-more a{ font-size: var(--comp-26); line-height: 1; color: var(--base-font-color); position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; aspect-ratio: 300 / 80; width: var(--comp-300); background-image: url(../img/common/btn-place.webp); background-size: cover; background-repeat: no-repeat; background-position: center center;}

/* CONTENTS
-----------------------------------*/
.wrap-bridal-content{ position: relative; background-image: url(../img/common/bg-rose02.webp); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; margin-top: var(--comp-100); }
#bridal-content-list{ display: flex; flex-direction: column; gap: var(--comp-60); width: var(--comp-580); margin-inline: auto;}
#bridal-content-list li a{ display: flex; justify-content: space-between; align-items: center;}
#bridal-content-list li a figure{ width: var(--comp-280); overflow: hidden; aspect-ratio: 1 / 1;}
#bridal-content-list li a figure img{ display: block; object-fit: cover; width: 100%; height: 100%; transform: scale(1.1); transition: all ease 1.5s; filter: blur(var(--comp-20));}
#bridal-content-list li.scrollin a figure img{ transform: scale(1); filter: blur(0);}
#bridal-content-list li a .textBox{ width: var(--comp-270);}
#bridal-content-list li a .textBox .bridal-content-ttl{ margin-bottom: var(--comp-15);}
#bridal-content-list li a .textBox .bridal-content-ttl span{ font-family: "Zen Old Mincho", serif !important; font-style: normal; text-align: left; }
#bridal-content-list li a .textBox .bridal-content-ttl .en{ font-size: var(--comp-36); font-weight: bold; color: var(--light-brown01);}
#bridal-content-list li a .textBox .bridal-content-ttl .ja{ font-size: var(--comp-24); color: var(--light-brown02); }
#bridal-content-list li a .textBox .bridal-content-ttl::after{ content: ""; display: block; width: 100%; aspect-ratio: 270 / 12; background-image: url(../img/common/arrow-r01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-top: var(--comp-15);}
#bridal-content-list li a .textBox p{ color: var(--base-font-color);}

/* MARKIS WEDDING
-----------------------------------*/
.wrap-bridal-markis-wedding{ position: relative; background-image: url(../img/common/bg-rose01-r.webp), url(../img/common/bg-rose03-l.webp); background-size: 100% auto; background-position: center top, center bottom; background-repeat: no-repeat; padding-top: var(--comp-180); padding-bottom: var(--comp-180);}
.wrap-bridal-markis-wedding::before{ content: ""; display: block; width: 100%; height: var(--comp-80); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type02-t.webp); background-size: 100cqw var(--comp-80);}
.wrap-bridal-markis-wedding::after{ content: ""; display: block; width: 100%; height: var(--comp-80); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type02-b.webp); background-size: 100cqw var(--comp-80);}
#bridal-markis-wedding{ position: relative; background-image: url(../img/common/bg-m.webp); background-repeat: repeat-y;background-position: center top; background-size: 100cqw auto; width: 100%;}
#bridal-markis-wedding > *{ width: var(--comp-580); margin-inline: auto;}
.bridal-markis-wedding-lead{ text-align: center; font-size: var(--comp-26); margin-bottom: var(--comp-25)}
.bridal-markis-wedding-ttl img{ display: block; width: var(--comp-310); margin-inline: auto;}
.bridal-markis-wedding-ttl span{ display: block; font-size: var(--comp-20) !important; margin-top: var(--comp-30); font-weight: normal !important;}

/* PARTY
-----------------------------------*/
#party-mv{ background-image: url(../img/common/bg-party-main.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; aspect-ratio: 740 / 858; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: blur01 1.5s ease forwards; animation-delay: 0.5s; opacity: 0;}
#bridal-party-inner{ background-image: url(../img/common/bg-party.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; aspect-ratio: 1000 / 1394; width: var(--comp-500); display: flex; flex-direction: column; justify-content: center; align-items: center; animation: blur01 1.5s ease forwards; animation-delay: 1.2s; opacity: 0;}
#bridal-party-inner .bridal-leadtext{ font-size: var(--comp-26); animation: blur01 1.5s ease forwards; animation-delay: 2s; opacity: 0; line-height: 1.6; } 

.wrap-party-place:nth-child(odd){ position: relative; background-image: url(../img/common/bg-rose01-l.webp); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; padding-top: var(--comp-100);}
.wrap-party-place:nth-child(even){ position: relative; background-image: url(../img/common/bg-rose01-r.webp); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; padding-top: var(--comp-100);}
.wrap-party-place:nth-child(odd):last-child{ background-image: url(../img/common/bg-rose01-l.webp), url(../img/common/bg-rose03-r.webp); background-size: 100% auto; background-position: center top, center bottom; background-repeat: no-repeat; padding-bottom: var(--comp-180);}
.wrap-party-place:nth-child(even):last-child{ background-image: url(../img/common/bg-rose01-r.webp), url(../img/common/bg-rose03-l.webp); background-size: 100% auto; background-position: center top, center bottom; background-repeat: no-repeat; padding-bottom: var(--comp-180);}
.wrap-party-place::before{ content: ""; display: block; width: 100%; height: var(--comp-130); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type01-t.webp); background-size: 100cqw var(--comp-130);}
.wrap-party-place::after{ content: ""; display: block; width: 100%; height: var(--comp-130); aspect-ratio: 740 / 130; background-image: url(../img/common/bg-type01-b.webp); background-size: 100cqw var(--comp-130);}
.party-place{ position: relative; background-image: url(../img/common/bg-m.webp); background-repeat: repeat-y;background-position: center top; background-size: 100cqw auto; width: 100%; padding-bottom: var(--comp-30);}
.party-place > *{ width: var(--comp-580); margin-inline: auto;}
.party-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--comp-40); row-gap: var(--comp-80); grid-auto-flow: row dense;}
.party-list li { display: grid; grid-row: span 3; grid-template-rows: subgrid;}
.party-list li a{ display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--comp-25);}
.party-list li a .party-ttl{ text-align: center;}
.party-list li a .party-ttl .restaurant-place{ font-size: var(--comp-18); color: var(--light-brown02); margin-bottom: var(--comp-10);}
.party-list li a .party-ttl h3{ color: var(--light-brown01); padding-bottom: var(--comp-15); position: relative; font-size: var(--comp-22); margin-bottom: var(--comp-25); font-weight: bold;}
.party-list li a .party-ttl h3::after{ content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--comp-50); height: 1px; background-color: var(--beige);}
.party-list li a .party-ttl .type{ font-size: var(--comp-18); color: var(--light-brown02);}
.party-list li a figure{ width: 100%; aspect-ratio: 270 / 210; overflow: clip;}
.party-list li a figure img{ display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: all ease 1.5s; filter: blur(var(--comp-20));}
.party-list li.scrollin a figure img{ transform: scale(1); filter: blur(0);}
.party-detail-list{ display: flex; flex-direction: column; gap: var(--comp-20);}
.party-detail-list div{ border-bottom: 2px dotted var(--light-brown01); font-size: var(--comp-20); line-height: 1.75; padding-bottom: var(--comp-10);}
.party-detail-list div dt{ color: var(--light-brown02);}