/* ===== 全体 ===== */

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

body{
font-family:sans-serif;
background:#fafafa;
}

a{
text-decoration:none;
color:black;
}



/* ===== TOP ===== */

.hero{

height:100vh;

background-image:
url("images/top.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}



.overlay{

height:100%;

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

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}



.overlay h1{

color:white;

font-size:75px;

text-align:center;

line-height:1.2;

}



.hero-sub{

color:white;

font-size:20px;

margin-top:25px;

text-align:center;

line-height:1.8;

}



/* ===== 上メニュー ===== */

.top-nav{

position:absolute;

top:0;
left:0;

width:100%;

padding:35px 60px;

display:flex;

justify-content:space-between;

align-items:center;

}



.site-logo{

color:white;

font-size:16px;

font-weight:600;

letter-spacing:2px;

}



.top-nav nav{

display:flex;

gap:40px;

}



.top-nav nav a{

color:white;

font-size:13px;

transition:.3s;

}



.top-nav nav a:hover{

opacity:.7;

}



/* ===== TOPボタン ===== */

.contents{

padding:100px 0;

}



.menu{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:30px;

max-width:450px;

margin:auto;

}



.card{

background:white;

width:180px;

height:120px;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

font-size:12px;

font-weight:500;

line-height:1.5;

letter-spacing:.5px;

box-shadow:
0 4px 15px rgba(0,0,0,.08);

transition:.3s;

}



.card:hover{

transform:
translateY(-5px);

}



/* ===== ページ共通 ===== */

.top{

padding:30px;

}



.top a{

font-size:16px;

}



.app-section{

max-width:900px;

margin:40px auto;

padding:30px;

}



.app-section h1{

font-size:42px;

text-align:left;

margin-bottom:10px;

}



.sub{

color:gray;

margin-bottom:50px;

}



/* ===== アプリ ===== */

.app-card{

background:white;

display:flex;

align-items:center;

justify-content:
space-between;

padding:25px;

margin-bottom:25px;

border-radius:20px;

box-shadow:
0 5px 15px rgba(0,0,0,.08);

}



.app-card img{

width:70px;

height:70px;

object-fit:contain;

margin-right:30px;

}



.app-text{

width:350px;

}



.app-text h2{

font-size:24px;

margin-bottom:8px;

}



.app-text p{

font-size:14px;

line-height:1.7;

color:#555;

}



.app-card span{

font-size:22px;

color:red;

}



/* ===== エリア・スポット ===== */

.place{

background:white;

padding:30px;

margin-bottom:25px;

border-radius:20px;

box-shadow:
0 5px 15px rgba(0,0,0,.08);

transition:.3s;

}



.place:hover{

transform:
translateY(-5px);

}



.place h2{

font-size:26px;

margin-bottom:15px;

}



.place p{

font-size:15px;

line-height:1.8;

color:#555;

}




/* ===== 写真 ===== */

.spot-img{

width:220px;
/* 少し大きく */

height:160px;

object-fit:cover;

border-radius:15px;

margin:
15px 15px 0 0;

display:inline-block;

transition:.3s;

}



.spot-img:hover{

transform:
scale(1.03);

}
.map-link{

color:#2db400;
/* Naverっぽい緑 */

font-weight:600;

}



.map-link:hover{

text-decoration:underline;

}

/* ===== アプリ ===== */

.app-card{

background:white;

display:flex;

align-items:center;

justify-content:
space-between;

padding:25px;

margin-bottom:25px;

border-radius:20px;

box-shadow:
0 5px 15px rgba(0,0,0,.08);

}



.app-card img{

width:70px;

height:70px;

object-fit:contain;

margin-right:30px;

}



.app-text{

width:350px;

}



.app-text h2{

font-size:24px;

margin-bottom:8px;

}



.app-text p{

font-size:14px;

line-height:1.7;

color:#555;

}



.app-card span{

font-size:22px;

color:red;

}