@charset "utf-8";

html {
  scroll-behavior: smooth;
}

body{
  margin: auto 0;
  background-color:#bdd5db;
  font-family: serif;
}

h1{ margin: 0; }

h2{ margin: 0; }

h3{ margin: 0;}

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

ul{
  margin: 0;
  padding: 0;
}

li{ 
  list-style-type: none;
  margin: 0;
}

header{
  width: 100%;
  height: 66px;
}

.body{
  margin: 0 auto;
}

@media screen and (min-width: 960px){
  .body{ width: 70%;
         text-align: center;
  }
}


section + section { margin-top: 30px;}




nav{
  background-color: #576d74;
  width: 100%;
  height: 66px;
  position: fixed;
  z-index: 1;
  filter: opacity(80%);
}

.pcmenu{
  display: flex;
  justify-content: space-around;
  margin-top: 18px;
}

.pcmenu a{
  color: #fff4ff;
  font-size: 20px; 
  text-decoration: none;
}

@media screen and (max-width: 960px){
 .pcmenu { display: none;}
}

@media screen and (min-width: 960px){
  #overlay-button { display: none;}
}



@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
  position: absolute;
  right: 2em;
  top: 0;
  padding: 30px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #fff;
}

input[type=checkbox] {
  display: none; 
  
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible; 
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
  
  
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);

}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);


}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #576d74;
  z-index: 2;
  visibility: hidden;
  position: fixed;
}

#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #000!important;
}





.headerpng{
  filter: opacity(95%);
}


footer{
  background: linear-gradient(to top,#889ca1,#bdd5db);
  margin: 80px auto 0;
  display: flex;
  justify-content: center;
  text-align: center;
}

.copyright{ margin-top: 8px;
            font-size: medium;
}

.bold{ font-weight: bold;
       font-size: larger;
}



/*ここからAboutusページ*/



.aisatsu{ margin-top: 30px;
          margin-bottom: 60px;
          margin-left: auto;
          margin-right: auto;
}

.staff{ border-bottom: 1px dotted #576d74;}

.staffimg h3{ margin-top: 24px;}

#map h1{ border-bottom: 1px dotted #576d74;}

.map-p{ margin-bottom: 16px;}

.map-grid{
  display: grid;
  grid-template-columns: 45% 45%;
  grid-template-rows: auto auto;
  justify-content: center;
}

#map-img{ grid-area: "b";}
#omise-img{ grid-area: "a";}


.yajirushi{ position: fixed;
            right: 2px;
            bottom: 0;
            filter: opacity(86%);                   
}

.yajirushi img{  border-radius: 20%;}


@media screen and (min-width: 550px){
  .staffimg ul li{ width: 50%;}
  .staffimg ul{ display: flex;
                align-items: flex-end;
                flex-wrap: wrap;
  }  
}


@media screen and (min-width: 960px){
 .aisatsu{ width: 62%;
           text-align: center;
  }
}



/*ここからHousingページ*/



.click{ margin-top: 30px;}

.housing{
  font-size: large;
  display: flex;
  justify-content: center;
}

.housing a{
  color: #000;
  text-decoration: none;
}

.credit{ font-size: small;
}



/*ここから家主様ページ*/



.daiboshuu{
   font-size: 32px;
   border-bottom: 1px dotted #576d74;
   margin-top: 2px;
   margin-bottom: 28px;
}


.catch{ margin-top: 100px;
       margin-bottom: 36px;
}

.catch p{
  font-size: 24px;
  font-weight: bold;
}

.madeinjapan{ margin-left: 2ex;}

.catch3{ text-align: right;
         margin-right: 1em;
}

.access{ 
  display: flex;
  align-items: center; 
  margin-top: 4px;
}

.access ul{ 
  text-align: center;
  margin: 3px;
}

.access ul li{ 
  font-size: larger;
}


@media screen and (min-width: 520px){
  .catch2{ width: 360px;
          margin-left: auto;
          margin-right: auto;
        }
  .catch3{ text-align: center;
           margin: 0;
        }
  .yokosukade{ text-align: left;}
  .madeinjapan{ text-align: right;}
  .access{ justify-content: center;}
}

@media screen and (min-width: 960px){
  .access ul li{ font-size: x-large;}
  .nagare{ width: 50%;}
   .chizu{ width: 45%;}
 }