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



/*common*/
:root {
  --color00_10: rgba(255,255,255,1.0);
  --color00_09: rgba(255,255,255,0.9);
  --color00_08: rgba(255,255,255,0.8);
  --color00_07: rgba(255,255,255,0.7);
  --color00_06: rgba(255,255,255,0.6);
  --color00_05: rgba(255,255,255,0.5);
  --color00_04: rgba(255,255,255,0.4);
  --color00_03: rgba(255,255,255,0.3);
  --color00_02: rgba(255,255,255,0.2);
  
  --color01_10: rgba(228,180,0,1.0);
  --color01_09: rgba(228,180,0,0.9);
  --color01_08: rgba(228,180,0,0.8);
  --color01_07: rgba(228,180,0,0.7);
  --color01_06: rgba(228,180,0,0.6);
  --color01_05: rgba(228,180,0,0.5);
  --color01_04: rgba(228,180,0,0.4);
  --color01_03: rgba(228,180,0,0.3);
  --color01_02: rgba(228,180,0,0.2);
  --color01_01: rgba(228,180,0,0.1);

  --color02_10: rgba(25,30,59,1.0);
  --color02_09: rgba(25,30,59,0.9);
  --color02_08: rgba(25,30,59,0.8);
  --color02_07: rgba(25,30,59,0.7);
  --color02_06: rgba(25,30,59,0.6);

  --color03_10: rgba(58,185,179,1.0);
  --color03_09: rgba(58,185,179,0.9);
  --color03_08: rgba(58,185,179,0.8);
  --color03_07: rgba(58,185,179,0.7);
  --color03_06: rgba(58,185,179,0.6);
  
  --color04: ;
  --color05: ;
  
  --color99_10: rgba(0,0,0,1.0);
  --color99_09: rgba(0,0,0,0.9);
  --color99_08: rgba(0,0,0,0.8);
  --color99_07: rgba(0,0,0,0.7);
  --color99_06: rgba(0,0,0,0.6);
  --color99_05: rgba(0,0,0,0.5);
  --color99_04: rgba(0,0,0,0.4);
  --color99_03: rgba(0,0,0,0.3);
  --color99_02: rgba(0,0,0,0.2);
  --color99_01: rgba(0,0,0,0.1);
  
  --com_px01: 1px;
  --com_px02: 2px;
}


html { font-size: 62.5%; font-feature-settings: "palt"; scroll-behavior: smooth;}
a { text-decoration: none;}
body { font-family: "Noto Sans TC", sans-serif; font-weight: 400; min-height: 100vh; color: var(--color00_10);}

.scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Background video styling */
html, body { background: transparent !important; }
#bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
.wrap { position: relative; }


a,
a::before,
a::after,
a:hover,
a:hover::before,
a:hover::after { transition: ease .5s;}

img { width: 100%; height: auto;}

a img { transform: scale(1); transition: ease .5s;}
a:hover img { transform: scale(1); transition: ease .5s; opacity: 0.7;}

.dela-gothic-one { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-style: normal;}
.bebas-neue { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-style: normal;}



.menu { display: block; visibility: hidden; position: fixed; inset: 0; z-index: 1000; background: var(--color02_10); opacity: 0; pointer-events: none; transform: translateY(-100%); transition: transform .5s ease, opacity .5s ease, visibility 0s linear .5s; overflow-y: auto;}
.menu.active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: transform .5s ease, opacity .5s ease;}
.menu.is-closing { visibility: visible; opacity: 0; pointer-events: none; transform: translateY(-100%); transition: transform .5s ease, opacity .5s ease, visibility 0s linear .5s;}
body.menu-open { overflow: hidden;}


/*PC 1680*/
/*@media screen and (min-width: 1680px) {*/
@media screen and (min-width: 768px) {


/*----------------------------*/

body { font-size: 20px; line-height: 1.8; letter-spacing: 0.5px; display: flex; flex-direction: column;}
.wrap { width: 100%; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column;}

.pc { display: block;}
.sp { display: none;}
.pcBr { display: inline-block;}
.spBr { display: none;}

.spMenu { display: none;}
	
a[href^="tel:"] { pointer-events: none;}


/*----------------------------*/

html,
body { background: transparent !important;}
#bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none;}
.wrap { position: relative; z-index: 1; }

header {}
header .hamburger { position: fixed; top: 40px; right: 20px; cursor: pointer; z-index: 100;}
header .hamburger a { width: 52px; height: 18px; display: block; position: relative; z-index: 1600;}
header .hamburger a span { width: 100%; height: var(--com_px01); background: var(--color00_10); position: absolute; left: 0; transition: all 0.3s ease; transform-origin: 50% 50%;}
header .hamburger a span:nth-child(1) { top: 0;}
header .hamburger a span:nth-child(2) { top: 0; bottom: 0; margin: auto;}
header .hamburger a span:nth-child(3) {bottom: 0;}


header .lang { position: fixed; top: 80px; right: 20px; z-index: 100;}
header .lang ul { display: flex; justify-content: center; align-items: center; gap: 20px; font-family: "Noto Serif TC", serif;}
header .lang ul li {}
header .lang ul li:not(:first-child) { border-left: var(--com_px01) solid var(--color00_10); padding-left: 20px;}
header .lang ul li a { display: block; font-size: 15px; color: var(--color00_10); text-align: center;}


.menu .hamburger { position: fixed; top: 40px; right: 20px; cursor: pointer; z-index: 100;}
.menu .hamburger a { width: 52px; height: 18px; display: block; position: relative; z-index: 9100;}
.menu .hamburger a span { width: 100%; height: var(--com_px01); background: var(--color00_10); position: absolute; left: 0; transition: all 0.3s ease; transform-origin: 50% 50%;}
.menu .hamburger a span:nth-child(1) { top: 10px; left: 0; transform: rotate(-15deg);}
.menu .hamburger a span:nth-child(2) { top: 0; bottom: 0; margin: auto; transform: translateX(-100%); opacity: 0;}
.menu .hamburger a span:nth-child(3) { top: 10px; left: 0; transform: rotate(15deg);}
.menu .lang { position: fixed; top: 80px; right: 20px;}
.menu .lang ul { display: flex; justify-content: center; align-items: center; gap: 20px; font-family: "Noto Serif TC", serif;}
.menu .lang ul li {}
.menu .lang ul li:not(:first-child) { border-left: var(--com_px01) solid var(--color00_10); padding-left: 20px;}
.menu .lang ul li a { display: block; font-size: 15px; color: var(--color00_10); text-align: center;}


.menu nav { max-width: 800px; margin: 50px auto 0; position: relative;}
.menu nav ul {}
.menu nav ul li {}
.menu nav ul li a { font-family: "Cinzel", serif; font-weight: 400; font-style: normal; font-size: 40px; position: relative; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 30px; display: inline-block;}
.menu nav ul li a::after { content: attr(data-jp); font-size: 14px; line-height: 1.0; display: block; font-family: "Noto Sans TC", sans-serif; letter-spacing: normal; margin-top: -10px;}
.menu nav ul li a:hover { color: var(--color01_10);}

.menu nav .bnr { width: 250px; position: absolute; bottom: 0; right: -100px;}



footer.index { width: 100%; background: var(--color02_10); padding: 50px 10%; color: var(--color00_10); display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap;}
footer.index .logo { width: 340px; height: auto;}
footer.index .area { max-width: 810px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 30px;}
footer.index .area .box { max-width: 400px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px;}
footer.index .area .box h3 { font-size: 15px; line-height: 25px; font-weight: 400; color: var(--color01_10);}
footer.index .area .box p { line-height: 25px;}
footer.index .area .box .insta { width: 60px;}
footer.index .area .box .insta a { display: block; width: 100%; height: 100%;}
footer.index .area .box .insta a img { width: 100%; height: auto;}

footer.yumekagami { width: 100%; background: var(--color02_10); padding: 50px 10%; color: var(--color00_10); display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap;}
footer.yumekagami .logo { width: 267px; height: auto;}
footer.yumekagami .area { max-width: 735px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative;}
footer.yumekagami .area::before { content: ""; width: var(--com_px01); position: absolute; top: 0; bottom: 0; left: 222px; background: var(--color00_10);}
footer.yumekagami .area .box { max-width: 400px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
footer.yumekagami .area .box h3 { font-size: 15px; line-height: 25px; color: var(--color02_10); background: var(--color01_10); padding: 2px 5px; margin-bottom: 5px;}
footer.yumekagami .area .box p { line-height: 25px;}
footer.yumekagami .area .box .insta { width: 50px;}
footer.yumekagami .area .box .insta a { display: block; width: 100%; height: 100%;}
footer.yumekagami .area .box .insta a img { width: 100%; height: auto;}

.cp { width: 100%; background: var(--color02_10); padding: 20px 0; text-align: center; font-size: 15px; color: var(--color00_10); border-top: var(--com_px01) solid var(--color00_10);}

#page-top { width: 100px; height: auto; position: fixed; bottom: 80px; right: 50px; z-index: 999; }
#page-top { transition: bottom 0.25s ease; }

}



/*PC 1679*/
/*@media print, screen and (min-width: 768px) and ( max-width: 1679px) {
}*/




/*sp*/
@media only screen and (max-width: 767px) {





/*----------------------------*/
body { font-size: 20px; line-height: 1.8; letter-spacing: 0.5px; display: flex; flex-direction: column;}
.wrap { width: 100%; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column;}

.pc { display: none;}
.sp { display: block;}
.pcBr { display: none;}
.spBr { display: inline-block;}

.spMenu { display: none;}
	
a[href^="tel:"] { pointer-events: none;}

/*----------------------------*/

html,
body { background: transparent !important;}
#bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none;}
.wrap { position: relative; z-index: 1; }

header {}
header .hamburger { position: fixed; top: 6.2500vw; right: 3.1250vw; cursor: pointer; z-index: 100;}
header .hamburger a { width: 8.1250vw; height: 2.8125vw; display: block; position: relative; z-index: 1600;}
header .hamburger a span { width: 100%; height: var(--com_px01); background: var(--color00_10); position: absolute; left: 0; transition: all 0.3s ease; transform-origin: 50% 50%;}
header .hamburger a span:nth-child(1) { top: 0;}
header .hamburger a span:nth-child(2) { top: 0; bottom: 0; margin: auto;}
header .hamburger a span:nth-child(3) {bottom: 0;}


header .lang { position: fixed; top: 12.5000vw; right: 3.1250vw; z-index: 100;}
header .lang ul { display: flex; justify-content: center; align-items: center; gap: 3.1250vw; font-family: "Noto Serif TC", serif;}
header .lang ul li {}
header .lang ul li:not(:first-child) { border-left: var(--com_px01) solid var(--color00_10); padding-left: 3.1250vw;}
header .lang ul li a { display: block; font-size: 2.3438vw; color: var(--color00_10); text-align: center;}


.menu  { overflow-y: scroll;}
.menu .hamburger { position: fixed; top: 6.2500vw; right: 3.1250vw; cursor: pointer; z-index: 100;}
.menu .hamburger a { width: 8.1250vw; height: 2.8125vw; display: block; position: relative; z-index: 9100;}
.menu .hamburger a span { width: 100%; height: var(--com_px01); background: var(--color00_10); position: absolute; left: 0; transition: all 0.3s ease; transform-origin: 50% 50%;}
.menu .hamburger a span:nth-child(1) { top: 1.5625vw; left: 0; transform: rotate(-15deg);}
.menu .hamburger a span:nth-child(2) { top: 0; bottom: 0; margin: auto; transform: translateX(-100%); opacity: 0;}
.menu .hamburger a span:nth-child(3) { top: 1.5625vw; left: 0; transform: rotate(15deg);}
.menu .lang { position: fixed; top: 12.5000vw; right: 3.1250vw; z-index: 100;}
.menu .lang ul { display: flex; justify-content: center; align-items: center; gap: 3.1250vw; font-family: "Noto Serif TC", serif;}
.menu .lang ul li {}
.menu .lang ul li:not(:first-child) { border-left: var(--com_px01) solid var(--color00_10); padding-left: 3.1250vw;}
.menu .lang ul li a { display: block; font-size: 2.3438vw; color: var(--color00_10); text-align: center;}

.menu nav { max-width: 125.0000vw; margin: 20.3125vw 8.5938vw 42.1875vw; position: relative;}
.menu nav ul {}
.menu nav ul li {}
.menu nav ul li a { font-family: "Cinzel", serif; font-weight: 400; font-style: normal; font-size: 6.2500vw; position: relative; letter-spacing: 0.7813vw; text-transform: uppercase; margin-bottom: 4.6875vw; display: inline-block;}
.menu nav ul li a::after { content: attr(data-jp); font-size: 2.1875vw; line-height: 1.0; display: block; font-family: "Noto Sans TC", sans-serif; letter-spacing: normal; margin-top: -1.5625vw;}
.menu nav ul li a:hover { color: var(--color01_10);}

.menu nav .bnr { width: 39.0625vw; position: absolute; bottom: -34.3750vw; right: -3.1250vw;}



footer.index { width: 100%; background: var(--color02_10); padding: 7.8125vw 10%; color: var(--color00_10); display: flex; align-items: center; justify-content: center; gap: 6.2500vw; flex-wrap: wrap;}
footer.index .logo { width: 53.1250vw; height: auto;}
footer.index .area { max-width: 126.5625vw; font-size: 2.3438vw; display: flex;; flex-direction: column; align-items: center; gap: 4.6875vw;}
footer.index .area .box { width: 62.5000vw; font-size: 2.3438vw; display: flex; justify-content: space-between; align-items: center; gap: 3.1250vw;}
footer.index .area .box h3 { font-size: 2.3438vw; line-height: 3.9063vw; font-weight: 400; color: var(--color01_10);}
footer.index .area .box p { line-height: 3.9063vw;}
footer.index .area .box .insta { width: 9.3750vw;}
footer.index .area .box .insta a { display: block; width: 100%; height: 100%;}
footer.index .area .box .insta a img { width: 100%; height: auto;}

footer.yumekagami { width: 100%; background: var(--color02_10); padding: 7.8125vw 10%; color: var(--color00_10); display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 9.3750vw; flex-wrap: wrap;}
footer.yumekagami .logo { width: 41.7188vw; height: auto;}
footer.yumekagami .area { max-width: 65.6250vw; font-size: 2.3438vw; display: flex; flex-direction: column; align-items: center; gap: 5.0000vw; position: relative;}
footer.yumekagami .area::before { content: ""; height: var(--com_px01); position: absolute; top: 15.6250vw; left: 0; right: 0; background: var(--color00_10);}
footer.yumekagami .area .box { width: 100%; font-size: 2.3438vw; display: flex; justify-content: space-between; align-items: center; gap: 3.1250vw;}
footer.yumekagami .area .box h3 { font-size: 2.3438vw; line-height: 3.9063vw; color: var(--color02_10); background: var(--color01_10); padding: 0.3125vw 0.7813vw; margin-bottom: 0.7813vw; display: inline-block;}
footer.yumekagami .area .box p { line-height: 3.9063vw;}
footer.yumekagami .area .box .insta { width: 9.3750vw;}
footer.yumekagami .area .box .insta a { display: block; width: 100%; height: 100%;}
footer.yumekagami .area .box .insta a img { width: 100%; height: auto;}

.cp { width: 100%; background: var(--color02_10); padding: 3.1250vw 0; text-align: center; font-size: 2.3438vw; color: var(--color00_10); border-top: var(--com_px01) solid var(--color00_10);}

#page-top { width: 9.3750vw; height: auto; position: fixed; bottom: 12.5000vw; right: 4.6875vw; z-index: 999; }

}




@media screen and (width: 640px) {


/*----------------------------*/
body { font-size: 20px; line-height: 1.8; letter-spacing: 0.5px; display: flex; flex-direction: column;}
.wrap { width: 100%; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column;}

.pc { display: none;}
.sp { display: block;}
.pcBr { display: none;}
.spBr { display: inline-block;}

.spMenu { display: none;}
	
a[href^="tel:"] { pointer-events: none;}

/*----------------------------*/

html,
body { background: transparent !important;}
#bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none;}
.wrap { position: relative; z-index: 1; }

header {}
header .hamburger { position: fixed; top: 40px; right: 20px; cursor: pointer; z-index: 100;}
header .hamburger a { width: 52px; height: 18px; display: block; position: relative; z-index: 1600;}
header .hamburger a span { width: 100%; height: var(--com_px01); background: var(--color00_10); position: absolute; left: 0; transition: all 0.3s ease; transform-origin: 50% 50%;}
header .hamburger a span:nth-child(1) { top: 0;}
header .hamburger a span:nth-child(2) { top: 0; bottom: 0; margin: auto;}
header .hamburger a span:nth-child(3) {bottom: 0;}


header .lang { position: fixed; top: 80px; right: 20px; z-index: 100;}
header .lang ul { display: flex; justify-content: center; align-items: center; gap: 20px; font-family: "Noto Serif TC", serif;}
header .lang ul li {}
header .lang ul li:not(:first-child) { border-left: var(--com_px01) solid var(--color00_10); padding-left: 20px;}
header .lang ul li a { display: block; font-size: 15px; color: var(--color00_10); text-align: center;}


.menu  { overflow-y: scroll;}
.menu .hamburger { position: fixed; top: 40px; right: 20px; cursor: pointer; z-index: 100;}
.menu .hamburger a { width: 52px; height: 18px; display: block; position: relative; z-index: 9100;}
.menu .hamburger a span { width: 100%; height: var(--com_px01); background: var(--color00_10); position: absolute; left: 0; transition: all 0.3s ease; transform-origin: 50% 50%;}
.menu .hamburger a span:nth-child(1) { top: 10px; left: 0; transform: rotate(-15deg);}
.menu .hamburger a span:nth-child(2) { top: 0; bottom: 0; margin: auto; transform: translateX(-100%); opacity: 0;}
.menu .hamburger a span:nth-child(3) { top: 10px; left: 0; transform: rotate(15deg);}
.menu .lang { position: fixed; top: 80px; right: 20px; z-index: 100;}
.menu .lang ul { display: flex; justify-content: center; align-items: center; gap: 20px; font-family: "Noto Serif TC", serif;}
.menu .lang ul li {}
.menu .lang ul li:not(:first-child) { border-left: var(--com_px01) solid var(--color00_10); padding-left: 20px;}
.menu .lang ul li a { display: block; font-size: 15px; color: var(--color00_10); text-align: center;}

.menu nav { max-width: 800px; margin: 130px 55px 270px; position: relative;}
.menu nav ul {}
.menu nav ul li {}
.menu nav ul li a { font-family: "Cinzel", serif; font-weight: 400; font-style: normal; font-size: 40px; position: relative; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 30px; display: inline-block;}
.menu nav ul li a::after { content: attr(data-jp); font-size: 14px; line-height: 1.0; display: block; font-family: "Noto Sans TC", sans-serif; letter-spacing: normal; margin-top: -10px;}
.menu nav ul li a:hover { color: var(--color01_10);}

.menu nav .bnr { width: 250px; position: absolute; bottom: -220px; right: -20px;}



footer.index { width: 100%; background: var(--color02_10); padding: 50px 10%; color: var(--color00_10); display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;}
footer.index .logo { width: 340px; height: auto;}
footer.index .area { max-width: 810px; font-size: 15px; display: flex;; flex-direction: column; align-items: center; gap: 30px;}
footer.index .area .box { width: 400px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
footer.index .area .box h3 { font-size: 15px; line-height: 25px; font-weight: 400; color: var(--color01_10);}
footer.index .area .box p { line-height: 25px;}
footer.index .area .box .insta { width: 60px;}
footer.index .area .box .insta a { display: block; width: 100%; height: 100%;}
footer.index .area .box .insta a img { width: 100%; height: auto;}

footer.yumekagami { width: 100%; background: var(--color02_10); padding: 50px 10%; color: var(--color00_10); display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 60px; flex-wrap: wrap;}
footer.yumekagami .logo { width: 267px; height: auto;}
footer.yumekagami .area { max-width: 420px; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative;}
footer.yumekagami .area::before { content: ""; height: var(--com_px01); position: absolute; top: 100px; left: 0; right: 0; background: var(--color00_10);}
footer.yumekagami .area .box { width: 100%; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
footer.yumekagami .area .box h3 { font-size: 15px; line-height: 25px; color: var(--color02_10); background: var(--color01_10); padding: 2px 5px; margin-bottom: 5px; display: inline-block;}
footer.yumekagami .area .box p { line-height: 25px;}
footer.yumekagami .area .box .insta { width: 60px;}
footer.yumekagami .area .box .insta a { display: block; width: 100%; height: 100%;}
footer.yumekagami .area .box .insta a img { width: 100%; height: auto;}

.cp { width: 100%; background: var(--color02_10); padding: 20px 0; text-align: center; font-size: 15px; color: var(--color00_10); border-top: var(--com_px01) solid var(--color00_10);}

#page-top { width: 60px; height: auto; position: fixed; bottom: 80px; right: 30px; z-index: 999; }

}