/* =======================================================
   浮世亭 Official Website
   Style Sheet
======================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#0c0b09;

color:#f3efe8;

font-family:
"Hiragino Mincho ProN",
"Yu Mincho",
"Noto Serif JP",
serif;

line-height:2;

overflow-x:hidden;

font-size:16px;

}

img{

display:block;

width:100%;

}

a{

text-decoration:none;

color:inherit;

transition:.35s;

}

.container{

width:min(1180px,90%);

margin:auto;

}

/* =========================
   Header
========================= */

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:24px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(10,10,10,.45);

backdrop-filter:blur(14px);

z-index:999;

transition:.4s;

}

.logo{

font-size:30px;

letter-spacing:.45em;

color:#d7b16d;

font-weight:500;

}

nav{

display:flex;

gap:34px;

}

nav a{

position:relative;

font-size:15px;

letter-spacing:.08em;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-7px;

width:0;

height:1px;

background:#d7b16d;

transition:.35s;

}

nav a:hover{

color:#d7b16d;

}

nav a:hover::after{

width:100%;

}

/* =========================
   Hero
========================= */

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

rgba(0,0,0,.45),

rgba(0,0,0,.60)

),

url("B1EB4FC9-0597-4FD5-B269-CEF9D44FA545.png");

background-size:cover;

background-position:center;

animation:heroZoom 18s ease-in-out infinite alternate;

z-index:-2;

}

.hero::after{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.12);

z-index:-1;

}

@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

.hero-overlay{

max-width:900px;

padding:40px;

}

.hero-sub{

letter-spacing:.55em;

color:#d7b16d;

margin-bottom:25px;

font-size:15px;

}

.hero h1{

font-size:86px;

font-weight:400;

letter-spacing:.55em;

margin-bottom:25px;

text-shadow:

0 6px 20px rgba(0,0,0,.35);

}

.hero-copy{

font-size:19px;

margin-bottom:55px;

opacity:.95;

}/* =========================
   Button
========================= */

.button{

display:inline-block;

padding:16px 48px;

border:1px solid #d7b16d;

color:#d7b16d;

position:relative;

overflow:hidden;

transition:.45s;

letter-spacing:.15em;

}

.button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transition:.8s;

}

.button:hover::before{

left:160%;

}

.button:hover{

background:#d7b16d;

color:#111;

box-shadow:

0 0 25px rgba(215,177,109,.35);

}

/* =========================
   Intro
========================= */

.intro{

padding:130px 0;

}

.intro h2{

font-size:42px;

text-align:center;

margin-bottom:45px;

color:#d7b16d;

font-weight:400;

letter-spacing:.2em;

}

.intro p{

max-width:760px;

margin:auto;

text-align:center;

font-size:17px;

color:#ddd7cf;

}

/* =========================
   Feature
========================= */

.feature{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding:130px 8%;

}

.feature.reverse{

direction:rtl;

}

.feature.reverse .text{

direction:ltr;

}

.image{

overflow:hidden;

border-radius:6px;

}

.image img{

border-radius:6px;

box-shadow:

0 25px 70px rgba(0,0,0,.45);

transition:.6s;

}

.image:hover img{

transform:scale(1.04);

}

.text h2{

font-size:40px;

margin-bottom:28px;

color:#d7b16d;

font-weight:400;

}

.text p{

font-size:17px;

margin-bottom:30px;

color:#ddd7cf;

}

.text a{

display:inline-block;

color:#d7b16d;

letter-spacing:.15em;

}

.text a:hover{

opacity:.75;

transform:translateX(8px);

}

/* =========================
   Divider
========================= */

section{

position:relative;

}

section::after{

content:"";

display:block;

width:70px;

height:1px;

background:rgba(215,177,109,.45);

margin:80px auto 0;

}/* =========================
   News
========================= */

.news{

padding:130px 8%;

background:#14120f;

}

.news h2{

text-align:center;

font-size:42px;

font-weight:400;

letter-spacing:.2em;

margin-bottom:60px;

color:#d7b16d;

}

.news-list{

max-width:950px;

margin:auto;

}

.news-list div{

padding:35px 0;

border-bottom:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.news-list div:hover{

padding-left:18px;

border-color:#d7b16d;

}

.news-list span{

display:block;

margin-bottom:10px;

color:#b9965d;

font-size:14px;

letter-spacing:.12em;

}

.news-list h3{

font-size:23px;

font-weight:400;

margin-bottom:10px;

}

.news-list p{

color:#d3cdc5;

}

/* =========================
   Reserve
========================= */

.reserve{

padding:140px 8%;

text-align:center;

}

.reserve h2{

font-size:42px;

font-weight:400;

color:#d7b16d;

margin-bottom:28px;

letter-spacing:.18em;

}

.reserve p{

max-width:760px;

margin:0 auto 45px;

color:#d6d0c8;

}

/* =========================
   Footer
========================= */

footer{

background:#080808;

padding:90px 8%;

text-align:center;

border-top:1px solid rgba(255,255,255,.05);

}

.footer-logo{

font-size:34px;

letter-spacing:.45em;

color:#d7b16d;

margin-bottom:35px;

}

footer p{

margin:10px 0;

font-size:15px;

color:#aaa49d;

}

/* =========================
   Scrollbar
========================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#5d4a2c;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#8c6a37;

}

/* =========================
   Selection
========================= */

::selection{

background:#d7b16d;

color:#111;

}/* =========================
   Responsive
========================= */

@media (max-width:1100px){

header{

padding:20px 5%;

}

nav{

gap:22px;

}

.hero h1{

font-size:64px;

}

.feature{

gap:50px;

padding:100px 6%;

}

}



@media (max-width:900px){

header{

flex-direction:column;

padding:18px;

gap:18px;

}

.logo{

font-size:24px;

letter-spacing:.3em;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:16px;

}

nav a{

font-size:14px;

}

.hero{

height:85vh;

}

.hero h1{

font-size:46px;

letter-spacing:.25em;

}

.hero-copy{

font-size:16px;

}

.intro{

padding:80px 6%;

}

.intro h2{

font-size:32px;

}

.feature{

grid-template-columns:1fr;

gap:35px;

padding:80px 6%;

}

.feature.reverse{

direction:ltr;

}

.text{

text-align:center;

}

.text h2{

font-size:32px;

}

.news{

padding:80px 6%;

}

.news h2{

font-size:32px;

}

.reserve{

padding:80px 6%;

}

.reserve h2{

font-size:32px;

}

footer{

padding:60px 6%;

}

.footer-logo{

font-size:26px;

}

}



@media (max-width:500px){

.hero h1{

font-size:36px;

}

.hero-sub{

font-size:13px;

letter-spacing:.3em;

}

.hero-copy{

font-size:15px;

}

.button{

padding:14px 32px;

font-size:14px;

}

.logo{

font-size:22px;

}

}



/* =========================
   Fade Animation
========================= */

.feature,
.intro,
.news,
.reserve{

animation:fadeUp 1.1s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/* =========================
   Image Effects
========================= */

.image{

position:relative;

}

.image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(0,0,0,.08)

);

pointer-events:none;

}



/* =========================
   Fin
========================= */