/* =====================================
   Base
===================================== */
*,
*::before,
*::after{
box-sizing:border-box;
}

.ukmiyako-lp{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
color:#111;
line-height:1.7;
background:#fff;
}

.ukmiyako-lp h1,
.ukmiyako-lp h2,
.ukmiyako-lp h3{
margin:0 0 20px;
font-weight:600;
}

.ukmiyako-lp section{
padding:100px 5%;
text-align:center;
}

.ukmiyako-lp img{
max-width:100%;
height:auto;
display:block;
}


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

.ukmiyako-lp .site-header{
position:absolute;
top:0;
left:0;
width:100%;
z-index:100;
padding:25px 5%;
background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
}

.site-title{
font-size:160% !important;
font-weight:700;
letter-spacing:3px;
color:#fff;
}


/* =====================================
   CTA Buttons
===================================== */

.cta-button{
display:inline-block;
padding:18px 40px;
background:#b22222;
color:#fff;
text-decoration:none;
font-weight:bold;
border-radius:4px;
transition:.3s ease;
margin-top:30px;
}

.cta-button:hover{
background:#8b1a1a;
transform:translateY(-3px);
}

.cta-center{
text-align:center;
margin-top:40px;
}


/* =====================================
   Fixed CTA
===================================== */

.fixed-cta{
position:fixed;
bottom:20px;
right:20px;
z-index:999;
}

.fixed-cta a{
display:block;
background:#b22222;
color:#fff;
padding:15px 25px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
box-shadow:0 10px 30px rgba(0,0,0,.2);
transition:.3s;
}

.fixed-cta a:hover{
background:#8b1a1a;
}


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

.p-fv-slider{
position:relative;
width:100%;
height:90vh;
overflow:hidden;
}

.slider{
position:relative;
width:100%;
height:100%;
}

/* スライド */

.slides{
position:relative;
width:100%;
height:100%;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity .8s ease;
}

.slide.active{
opacity:1;
z-index:2;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
}


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

.hero-cta{
position:absolute;
bottom:15%;
left:50%;
transform:translateX(-50%);
z-index:20;
text-align:center;
}

.hero-cta .cta-button{
max-width:320px;
width:100%;
}


/* =====================================
   Thumbnail Slider
===================================== */

.thumbnails{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:8px;
z-index:10;
overflow-x:auto;
padding-bottom:5px;
}

.thumb{
width:80px;
height:50px;
object-fit:cover;
cursor:pointer;
opacity:.6;
border:2px solid transparent;
transition:.3s;
flex-shrink:0;
}

.thumb:hover{
opacity:1;
}

.thumb.active{
opacity:1;
border:2px solid #fff;
}


/* =====================================
   Section Title
===================================== */

.section-title{
position:relative;
font-size:200% !important;
font-weight:600;
letter-spacing:2px;
margin-bottom:60px;
}

.section-title .en{
display:block;
font-size:60% !important;
letter-spacing:3px;
color:#888;
margin-bottom:10px;
}

.section-title::after{
content:"";
display:block;
width:60px;
height:2px;
background:#111;
margin:20px auto 0;
}


/* =====================================
   Land Plan
===================================== */

section img[src*="landplan"]{
max-width:800px;
width:100%;
height:auto;
margin:40px auto;
}

.price-detail{
font-size:100% !important;
color:#666;
margin-top:5px;
line-height:1.6;
}

/* =====================================
   Tabs
===================================== */

.tabs{
max-width:1000px;
margin:0 auto;
}

.tabs input{
display:none;
}

.tab-buttons{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:50px;
}

.tab-buttons label{
padding:15px;
background:#111;
color:#fff;
cursor:pointer;
transition:.3s;
}

.tab-buttons label:hover{
background:#555;
}

#tab-a:checked ~ .tab-buttons label[for="tab-a"],
#tab-b:checked ~ .tab-buttons label[for="tab-b"],
#tab-c:checked ~ .tab-buttons label[for="tab-c"],
#tab-d:checked ~ .tab-buttons label[for="tab-d"],
#tab-e:checked ~ .tab-buttons label[for="tab-e"],
#tab-f:checked ~ .tab-buttons label[for="tab-f"]{
background:#888;
}

.tab-content{
display:none;
}

#tab-a:checked ~ .content #content-a,
#tab-b:checked ~ .content #content-b,
#tab-c:checked ~ .content #content-c,
#tab-d:checked ~ .content #content-d,
#tab-e:checked ~ .content #content-e,
#tab-f:checked ~ .content #content-f{
display:block;
}

.plan-info{
margin-bottom:30px;
max-width:600px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

.plan-info h3{
font-size:160% !important;
}

.plan-info p{
margin:6px 0;
}

.plan-info .price{
color:#b22222;
font-weight:bold;
font-size:160% !important;
}


/* =====================================
   Location
===================================== */

.location{
background:#f8f8f8;
}

.location-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
max-width:1200px;
margin:0 auto 80px;
}

.location-item img{
width:100%;
height:200px;
object-fit:cover;
border-radius:6px;
margin-bottom:15px;
}


/* =====================================
   Map
===================================== */

.map-area{
max-width:1200px;
margin:0 auto;
}

.map-area iframe{
width:100%;
height:450px;
border:0;
}


/* =====================================
   Outline
===================================== */

.outline{
background:#f4f4f4;
}

.outline-table{
width:100%;
max-width:1000px;
margin:0 auto;
border-collapse:collapse;
background:#fff;
}

.ukmiyako-lp .outline-table th,
.ukmiyako-lp .outline-table td{
padding:15px 20px;
border-bottom:1px solid #ddd;
text-align:left;
vertical-align:top;
font-size:100% !important;
}

.outline-table th{
width:30%;
background:#fafafa;
font-weight:600;
}


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

@media(max-width:768px){

body{
font-size:14px;
}

section{
padding:60px 5%;
}

/* ヒーロー */

.p-fv-slider{
height:65vh;
}

/* CTA */

.hero-cta{
bottom:22%;
width:90%;
}

.hero-cta .cta-button{
width:100%;
max-width:none;
}

/* サムネイル */

.thumbnails{
bottom:8px;
gap:6px;
}

.thumb{
width:55px;
height:35px;
}

/* Tabs */

.tab-buttons{
grid-template-columns:repeat(2,1fr);
gap:6px;
}

/* Location */

.location-grid{
grid-template-columns:1fr;
gap:25px;
}

.location-item img{
height:170px;
}

/* Map */

.map-area iframe{
height:260px;
}

/* Outline */

.outline-table th,
.outline-table td{
display:block;
width:100%;
font-size:0.9rem;
}

.outline-table th{
background:none;
padding-top:20px;
font-weight:bold;
}

/* 固定CTA */

.fixed-cta{
bottom:0;
right:0;
width:100%;
}

.fixed-cta a{
width:100%;
padding:18px;
border-radius:0;
text-align:center;
}

}
/* =====================================
   Slider arrows
===================================== */

.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:30;

width:44px;
height:44px;

background:rgba(0,0,0,0.4);
color:#fff;

display:flex;
align-items:center;
justify-content:center;

font-size:26px;
cursor:pointer;

border-radius:50%;
}

.arrow.prev{
left:15px;
}

.arrow.next{
right:15px;
}


/* =====================================
   Mobile thumbnail gallery
===================================== */

@media(max-width:768px){

.thumbnails{
width:100%;
left:0;
transform:none;

padding:10px;

overflow-x:auto;
scroll-snap-type:x mandatory;

gap:10px;
}

.thumb{
width:80px;
height:50px;

scroll-snap-align:start;
}

}