@charset"utf-8";
body{font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color:#4a2c2a;
margin:0;
padding:0;
line-height:1.6;
background:linear-gradient(180deg, #543210, #987654, #fedcba, #987654, #543210);}

h2{font-size:1.1rem;
background-color:#f7f7f7;
border-left:5px solid #d35400;
padding:8px 10px;
margin-top:30px;
clear:both;}

h3{margin-left:10px;}

#コンテナ{max-width:1200px;
width:95%;
margin:20px auto;
border:1px solid #987654;
background:linear-gradient(90deg, #321000, #543210, #765432, #543210, #321000);}

.ヘッダー{background:linear-gradient(180deg, #543210, #987654, #fedcba, #987654, #543210);}

#ヘッダー{padding:20px;
background-color:#ffffff;}

#ヘッダー h1{font-size:0.75rem;
color:#ffffff;
margin:0 0 10px 0;
font-weight:bold;}

#ぼたん_目印{list-style:none;
padding:0;
margin:0;
display:flex;
width:100%;}
#ぼたん_目印 li{flex:1;}
#ぼたん_目印 li a{display:block;
height:55px;
line-height:55px;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size:0.9rem;
color:#ffffff;
background:linear-gradient(to bottom, #543210, #987654);
border-right:1px solid rgba(255, 255, 255, 0.3);
transition:0.3s ease;}
#ぼたん_目印 li a:hover{background:#543210;
color:#ffffff;}
#コンテンツ{padding:20px;}
#コンテンツ::after{content:"";
display:block;
clear:both;}
#メイン_メニュー{float:left;
width:73%;}
#サブスティテューション{float:right;
width:23%;margin-top:-64px;}
#メイン_リスト{width:100%;
height:250px;
margin-bottom:20px;
overflow:hidden;
position:relative;
border:1px solid #dddddd;
background-color:#eeeeee;}
.スライド_エリア{width:100%;
height:100%;
position:relative;}
.すらいど_動き{position:absolute;
inset:0;
opacity:0;
transition:opacity 1.5s ease-in-out;
z-index:0;}
.すらいど_動き.あくてぃぶ{opacity:1;
z-index:1;}
.すらいど_動き img{width:100%;
height:100%;
object-fit:cover;}
.ニュース dl{border-bottom:1px dotted #cccccc;
padding:10px 0;
margin:0;
font-size:0.9rem;
overflow:hidden;}
.ニュース dt{float:left;
width:100px;
font-weight:bold;
color:#d35400;}
.ニュース dd{margin-left:100px;}
.サブ_メニュー{list-style:none;
padding:0;
margin:0 0 20px 0;
border-top:1px solid #dddddd;}
.サブ_メニュー li a{display:block;
padding:8px 10px;
border-bottom:1px solid #dddddd;
text-decoration:none;
color:#4a2c2a;
background:#fdfdfd;}
#フッター{clear:both;
padding:20px;
border-top:3px solid #4a2c2a;
text-align:center;
font-size:0.8rem;
background-color:#ffffff;}

#なび_とぐる{display:none;
position:absolute;
right:20px;
top:40px;
width:40px;
height:32px;
cursor:pointer;
z-index:100;}

#なび_とぐる span{display:block;
position:absolute;
width:100%;
height:4px;
background:#ffffff;
border-radius:2px;
transition:all 0.3s;}

#なび_とぐる span:nth-child(1) { top: 0px; }  /* 1本目：一番上 */
#なび_とぐる span:nth-child(2) { top: 10px; } /* 2本目：真ん中 */
#なび_とぐる span:nth-child(3) { top: 20px; } /* 3本目：一番下 */

#なび_とぐる.あくてぃぶ span:nth-child(1){transform:translateY(14px) rotate(-45deg);}
#なび_とぐる.あくてぃぶ span:nth-child(2){opacity:0;}
#なび_とぐる.あくてぃぶ span:nth-child(3){transform:translateY(-14px) rotate(45deg);}
.メニュー_サブ_レフト{list-style:none;
padding:0;
margin:0 0 20px 0;
border-top:1px solid #ddd;}
.メニュー_サブ_レフト li a{display:block;
padding:10px 15px;
border-bottom:1px solid #ddd;
text-decoration:none;
color:#4a2c2a;
background-color:#fdfdfd;
transition:background-color 0.3s ease, padding-left 0.3s ease;}
.メニュー_サブ_レフト li a:hover{background-color:#fce4ec;
color:#d35400;
padding-left:20px;}
.メニュー_グリッド{display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:20px;
margin-top:40px;}
.メニュー_アイテム{background-color:#f0f0f0;
border:solid 1px #543210;
border-radius:10px;
transition:transform 0.3s;}
.メニュー_アイテム:hover{transform:translateY(-5px);}
.メニュー_アイテム img{width:100%;
border-top-left-radius:8px;
border-top-right-radius:8px;
aspect-ratio:1/1;
object-fit:cover;}
.メニュー_コンテンツ{padding:20px;}
.メニュー_コンテンツ h3{margin:0 0 10px 0;
font-size:1.2rem;
color:#8e44ad;
border-left:4px solid #f39c12;
padding-left:10px;}

@media(max-width:840px){#コンテナ{width:100%;
margin:0;
border:none;}
#ヘッダー{position:relative;}
#なび_とぐる{display:block;}
#ぼたん_目印{display:none;
flex-direction:column;
width:100%;
background:linear-gradient(180deg, #543210, #987654, #fedcba, #987654, #543210);}
#ぼたん_目印.open{display:flex;}
#ぼたん_目印 li{width:100%;
border-bottom:1px solid rgba(255, 255, 255, 0.1);}
#ぼたん_目印 li a{border-right:none;
text-align:left;
padding-left:20px;}
#メイン_メニュー, #サブスティテューション{float:none;
width:100%;}
#メイン_リスト{width:100%;
height:auto;
aspect-ratio:16/9;}}