@charset "utf-8";

/* 全称セレクター */

body{
margin:0;
}


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

img{
vertical-align:bottom;  
}

body{
color:white;
font-family:serif;
/*background-image: url('images/ptn.jpg');*/
background-image: url('images/background.png');  /* ここに画像のパスを指定 */
background-repeat: no-repeat;
background-attachment:fixed;
background-size:cover;

}

a{
color:white;
}


ul li {
  list-style: none;
}

/* ～～～～～～～～～～～～～～～～～～～～～～～～～～～定義～～ */



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~header */

header{
width:100%;
background-color: rgba(0, 0, 0, 0.5); /* 背景を黒色で50%の透明度 */
position: fixed;
  top: 0;
  left:0;
z-index: 5;
}

header ul{
background:;
width:700px;     
max-width:700px;
height:100px;
margin:0 auto;
padding:10px 10px;
display:flex;
justify-content:space-around;
align-items:center;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~main */

main{
width:768px; /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
height:auto;
margin:0 auto;
}

@media screen and (max-width:400px){
width:400px;

}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~topimage */


#topimage{
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
max-width:;768px;
height:1408px;
object-fit:cover; 
margin:0 auto;
position:relative;
top:0;
left:0;

}


#topimage h1{
font-size:3rem;
position:absolute; 
top: 30%;
left:50%;
transform: translate(-50%, -50%);*/

}

#topimage h2{
font-size:2rem;
position:absolute; 
top: 98%;
left:50%;
transform: translate(-50%, -50%);*/

}

/*
#forestrogo{
position:absolute; 
top: 70%;
left:50%;
transform: translate(-50%, -50%);
z-index:2;

}*/



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~galleryA */

.gallery{
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
max-width:768px;
height:auto;
background:#d2b48c;
padding:20px 20px 40px 60px;
 display: grid;
    grid-template-columns: 30% 30% 30%;
    /* --- 変更 --- */
    grid-template-rows: 20% 10% 20% 20% 20%; 
    grid-template-areas:
        "A B C"
        "A B F"
        "A E F"
        "D E H"
        "D G H";
    /* ------------ */
    gap: 15px;
}

.gallery .photoA {
    grid-area: A;
}

.gallery .photoB {
    grid-area: B;
}

.gallery .photoC {
    grid-area: C;
}

.gallery .photoD {
    grid-area: D;
}

.gallery .photoE {
    grid-area: E;
}

.gallery .photoF {
    grid-area: F;
}

.gallery .photoG {
    grid-area: G;
}

.gallery .photoH {
    grid-area: H;
}

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



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~banquet */

#banquet{
background-image: url('images/eat.png');
/*background:pink;/*カラー*/
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
height:419px;
margin:0 auto;
padding:20px 20px;
position:relative;
top:0;
left:0;

}

#banquet h2{
font-size:2rem;
white-space: nowrap;
position:absolute; 
top: 50%;
left:50%;
transform: translate(-50%, -50%);*/



}


#banquet div{
text-align:center;

}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Plan */

#plan{
background-image: url('images/plan.png');
color:#d2b48c;
/*background:green;/*カラー*/
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
height:419px;
padding:30px 50px;
}


#plan h2{
font-size:3rem;
text-align:center;
margin:0 0 0 0;
text-align:left;
text-shadow:2px 2px 2px rgba(0,0,0,2);
}

#plan h3{
font-size:2rem;
text-align:center;
text-align:left;
margin:20px 0;
text-shadow:2px 2px 2px rgba(0,0,0,2);
}

#plan p{
font-size:1rem;
text-align:center;
text-align:left;
/*text-shadow:2px 2px 2px rgba(0,0,0,5);*/
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~予約 */
.yoyakubotan{
background:black;/*カラー*/
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
max-width:768px;
height:100px;
margin:0 auto;
padding:50px 0 0 0;
text-align:center;
}

.yoyakubotan h3 a{
font-size:1rem;
background:#d2b48c;
border:5px solid white;
width:300px;
height:50px;
border-radius:15px;
padding:10px 10px;
position:relative;
box-shadow:2px 2px 5px rgba(0,0,0,1);
}
.yoyakubotan h3 a:hover{
top:2px;
left:2px;
box-shadow:4px 4px 5px rgba(0,0,0,1);
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~アクセス*/
.access{
background:black;/*カラー*/
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
max-width:768px;
height:auto;
padding:50px 20px;
margin:0 auto;
display:flex;
justify-content:space-between;

}

.access div{
width:50%;
background:black;/*カラー*/
padding:;

}*/

.access div h2{
font-size:1.5rem;
}

.access div p{
font-size:1rem;
}

iframe{
width:350px;
margin:0 0 0 20px;
}


/*アンカーポイント*/

/*フッター*/

footer{
background:;/*カラー*/
width:768px;/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~width */
max-width:768px;
height:auto;
padding:;
margin:0 auto;
text-align:;
background:#d2b48c;
}


footer div{
background:;/*カラー*/
font-size:1rem;
width:700px;
max-width:700px;
height:auto;
padding:;
margin:0 0 0 10px;
text-align:;
background:;
line-height:15px;
}


footer p{
font-size:1rem;
text-align: center;
margin:10px 10px;

}




*/