body {
    font-family: serif;
    margin: 0;
    padding: 0;
    color: #fff;
    background:radial-gradient(#a54150,#561b24);
}

header.header {
    background-image:url(../image/S__7938051.png);
    background-repeat:no-repeat;
    background-size: 20vh;
    background-position:right;
    background-color: #bbbbbb;
    text-align: center;
    text-shadow: 1px 1px 4px #9d8c56;
    padding: 1rem;

}

h1 {
    color: #000000;
    font-size: 5vw;
    font-weight: bold;
    margin: 0;
    text-shadow: 2px 2px 2px #9d8c56;
    -webkit-text-stroke: 0.1px #ffffff;
}


.navigation{
    background-color: #000000;
    height: auto;
    padding: 10px;
}

.navigation ul {
    display: flex;
    list-style: none;
    font-size: 2.5vw;
    transform: translateY(15%) translateX(0%);
    margin: 0px;
    padding: 0px;
}

.navigation ul li a{
	color: #9b8c56;
    text-shadow: 1px 1px 5px #515151;
    -webkit-text-stroke: 0.1px #6f6f6f;
	padding-left:3vw;
    padding-right: 3vw;
}

.navigation ul li a:hover{
	color:#fff;
    text-shadow:1px 1px 5px #000000;	
}

.imgtitle{
    text-align: center;
    font-size: large ;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 27px;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000000;
}

section {
    padding: 2vw;
}

h2{
    font-size: 36px;
    text-align: center;
}

.button{
    color: #561b24;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 2px #333;
}

.button:hover{
    color: #9d8c56;    
}

p{
    margin: 0px;
    font-size: large;
}

footer {
    background-color: #9d8c56;
    color: #333;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 100%;
    height:auto;
}


.forms table th{
    background-color: #c5979c;
    text-decoration: underline;
}

.gallery-container {
    text-align: left;
    
}

.gallery-container img {
    width: 25%;
    border-radius: 10px;
    object-fit: cover; 
}
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
    columns: 4;/*段組みの数*/
    padding:0 15px;/*ギャラリー左右に余白をつける*/
    margin:0;

    }

.imatitle{
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    padding: 20px;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
    list-style:none;
    position: relative;
}
    /*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/
} 
    /*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
        .gallery{
        columns:3;
        }	
}
    
@media only screen and (max-width: 768px) {
        .gallery{
        columns: 2;
        }	
}