@charset "UTF-8";

/* 基本設定 */
*{
margin: 0px;
padding: 0px;
}

html{
min-height: 100%;
}

body{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
background: linear-gradient(#9f6f55,#eae5e3);
font-size: 1em;
}

.head{
display: flex;
align-content:center;
justify-content: space-between;
align-items: center;
background:#fcc800;
padding: 1em 0;
}

.head img{
margin: 0.5em;
max-height: 80px;
}

.back{
margin: 1em 5em;
background: #fff;
text-align: center;
}
/* 基本設定 */

/* コンテンツ */
.block{
display: flex;
justify-content: center;
text-align: center;
flex-flow: wrap;
}

.title{
text-align: center;
background: #417038;
color: #fff;
padding: 20px 0 20px 0;
}

h1 {
position: relative;
display: inline-block;
margin-top: 1em;
margin-bottom: 1em;
}

h1:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #00a3af;
border-radius: 2px;
}

.box{
padding: 0.5em 3em;
margin: 2em 3em;
font-weight: bold;
font-size: 1.2rem;
color: #333333;/*文字色*/
text-align: left;
background: #FFF;
}

.font-green{
color: #4A9A30;
}

.box p{
display: inline-block;
text-align: left;
}

.access p{
padding: 1.5em 1em;
margin: 2em 0;
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.access img{
margin: 2em 2em;
max-width: 500px;
}

.google-map{
position: relative;
width: 45%;
height: 0;
padding-bottom: 30%;
overflow:auto; 
-webkit-overflow-scrolling:touch;
margin: 2em;
}

.google-map iframe{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border:none;
display:block;
}

.address{
text-align: left;
margin: 2em;
}

.address p{
margin: 0 1em;
}

.online{
padding: 1.5em 0.5em;
margin: 0 3em;
}

.online img{
width: 100%;
padding: 0.3em 0;
}

.online ul{
display:flex;
justify-content:center;
}

.online li {
list-style: none;
}

.online li:nth-child(2) {
margin: 0 10px;
}

.online li img {
width: 100%;
}

.btn {
  text-align: center;
  display: block;
}

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

.category{
padding: 1em 0.5em;
margin: 0 3em;
display: flex;
flex-wrap: wrap;
justify-content: center;

}

.category img{
margin: 0 0.1em;
max-width: 100%;
    
}

/* コンテンツ */

@media screen and (min-width:480px) { /*　for iPhone　*/
}

@media screen and (min-width:768px) and ( max-width:1024px) {/*　for iPad 　*/
}

@media screen and (min-width:1024px) {/*　for PC　*/
}