@charset "utf-8";

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

body{
	margin:0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	background:#f5f7fa;
	color:#333;
	padding-top:80px;
}

#wrap{
	max-width:1100px;
	margin:0 auto;
	background:white;
	box-shadow:0 0 20px rgba(0,0,0,0.08);
}


/* ===== ナビ===== */

/* 初期状態では非表示（PC） */
.hamburger {
    display: none;
}

nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120px;
	background:white;
	box-shadow:0 2px 12px rgba(0,0,0,0.08);
	z-index:1000;
}

#hamburger-nav {
    display: none;
}

nav ul{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:80px;
	margin:0 auto;
	padding:0 20px;
	list-style:none;
	box-sizing:border-box;
}

nav li{
	margin:0;
	padding:0;
	margin-right:30px;
	display:flex;
	align-items:center;
}

/* ロゴ */
nav li.logo{
	margin-right:40px;
}

nav li.logo img{
	height:50px;
	display:block;
}

/* リンク */
nav a{
	padding: 60px 0 0 0;
	text-decoration:none;
	color:#333;
	font-weight:bold;
	font-size:16px;
}

nav a:hover{
	color:#ff4d4d;
}

/* ===== 右側グループ ===== */


nav li.nav-right{
	margin-left:auto;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	text-align:right;
	margin-top: 36px;
}

/* 電話番号 */
nav li.nav-right .tel a{
	font-size:26px;
	text-decoration:none;
}

/* 営業時間 */
nav li.nav-right .time{
	font-weight:bold;
	font-size:14px;
	color:#666;
	margin-top:3px;
}


/* ===== トップ画像===== */

header#th{
	height:calc(150vh - 270px);
	background-image:url("../images/HP_top.jpg");
	background-size:cover;          /* ← 切れない＆全画面表示 */
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
}


/* テキスト中央表示 */

header#th .hero-text{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:white;
	text-align:center;
	z-index:2;
}



.hero-text a:hover{
	background:#cc0000;
	transform:translateY(-2px);
	box-shadow:0 5px 15px rgba(0,0,0,0.2);
}


/* ===== メイン ===== */

main{
	padding:40px;
}

section{
	margin-bottom:40px;
	padding:30px;
	background:white;
	border-radius:10px;
	box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

section h2{
	margin-bottom:20px;
	border-left:5px solid #ff4d4d;
	padding-left:10px;
	font-size:22px;
}


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

.price-btn{
	display:inline-block;
	margin-top:20px;
	padding:15px 30px;
	background:#ff4d4d;
	color:white;
	text-decoration:none;
	border-radius:5px;
	font-weight:bold;
	transition:0.3s;
}

.price-btn:hover{
	background:#cc0000;
	transform:translateY(-2px);
	box-shadow:0 5px 15px rgba(0,0,0,0.2);
}


/* ===== フッター ===== */

footer{
	text-align:center;
	padding:30px;
	background:#333;
	color:white;
	margin-top:40px;
}


/* ===== スクロールバー===== */

::-webkit-scrollbar{
	width:10px;
}

::-webkit-scrollbar-track{
	background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
	background:#ff4d4d;
	border-radius:5px;
}

::-webkit-scrollbar-thumb:hover{
	background:#cc0000;
}

/* =========================
   モバイル用
========================= */
@media screen and (max-width: 768px) {
	
main{
	padding:20px;
}
	

/* ===== トップ画像===== */

header#th{
	height:auto;
	min-height:calc(65vh - 100px);
	max-height:90vh;
	background-image:url("../images/HP_top.jpg");
	background-size:cover;          /* ← 切れない＆全画面表示 */
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
}

nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:60px;
	background:white;
	box-shadow:0 2px 12px rgba(0,0,0,0.08);
	z-index:1000;
}
nav ul {
    display: none;
}
/* ハンバーガー本体 */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 1200;
}

/* 線 */
.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ===== ×に変形 ===== */

/* 1本目 */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg);
    position: relative;
    top: 9px;
}

/* 2本目（消す） */
.hamburger.active span:nth-child(2) {
    opacity: 0;
}

/* 3本目 */
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -9px;
}

/* メニュー表示 */
#nav-menu.active {

    position: fixed;   /* ← absolute ではなく fixed */
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;     /* ← 画面全体の高さ */
    flex-direction: column;
    background: white;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
}

/* ハンバーガー表示 */
.hamburger {
    display: flex;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1100;
}

/* メニュー非表示 */
#nav-menu {
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
}

/* メニュー表示用 */
#nav-menu.active {
    display: flex;
}

/* メニュー項目 */
#nav-menu li {
    margin: 0;
    border-bottom: 1px solid #eee;
}

#nav-menu li a {
    padding: 15px;
    display: block;
}

}