@charset "utf-8";

/* ----------------------------------------------------------------------
 font
---------------------------------------------------------------------- */
@font-face {
 font-family: 'NotoSansJP';
 src: url('http://localhost:10013/wp-content/themes/kodomo-cafe/font/NotoSansJP-Thin.woff') format('woff');
 font-weight: 200;
}

@font-face {
 font-family: 'NotoSansJP';
 src: url('http://localhost:10013/wp-content/themes/kodomo-cafe/font/NotoSansJP-Light.woff') format('woff');
 font-weight: 300;
}

@font-face {
 font-family: 'NotoSansJP';
 src: url('http://localhost:10013/wp-content/themes/kodomo-cafe/font/NotoSansJP-Regular.woff') format('woff');
 font-weight: 400;
}

@font-face {
 font-family: 'NotoSansJP';
 src: url('http://localhost:10013/wp-content/themes/kodomo-cafe/font/NotoSansJP-Medium.woff') format('woff');
 font-weight: 500;
}

@font-face {
 font-family: 'NotoSansJP';
 src: url('http://localhost:10013/wp-content/themes/kodomo-cafe/font/NotoSansJP-Bold.woff') format('woff');
 font-weight: 600;
}

@font-face {
 font-family: 'NotoSansJP';
 src: url('http://localhost:10013/wp-content/themes/kodomo-cafe/font/NotoSansJP-Black.woff') format('woff');
 font-weight: 700;
}


/* ----------------------------------------------------------------------
 common
---------------------------------------------------------------------- */

@media screen and (min-width: 961px) and (max-width: 1700px) {
 html {
  font-size: 1vw;
 }
}

@media screen and (max-width: 960px) {
 html {
  font-size: 62.5%;
 }
}

@media screen and (max-width: 740px) {
 html {
  font-size: 1.8vw;
 }
}

body {
 /* font-family: 'Noto_Suns_JP_min', hiragino-kaku-gothic-pron, sans-serif; */
 font-family: 'Noto Sans JP', 'NotoSansJP', sans-serif;
 color: #333;
 font-size: 1.6rem;
 letter-spacing: .18rem;
 font-feature-settings: "palt";
 background: #D1F5EE;
}

p {
 line-height: calc(3.8 / 2);
 letter-spacing: .08rem;
}

h2,
h3 {
 line-height: calc(3.4 / 2);
 letter-spacing: .18rem;
}

a {
 color: #333;
 text-decoration: none;
}

#wrapper {
 background: #fff;
 padding-top: 10rem;
}

#container .sec1 {
 padding-top: 5rem;
}

@media screen and (min-width: 1901px) {
 #wrapper {
  width: 1900px;
  margin: 0 auto;
 }

 #h-logo {
  width: calc(24rem + 4vw);
 }
}


/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */

header {
 z-index: 10;
 width: 100%;
 height: 10rem;
 background: #fff;
 box-shadow: 0 0 0.1rem #ccc;
 position: fixed;
 top: 0;
 left: 0;
}


/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */
footer {
 color: #fff;
 background: #39B68E;
 padding-bottom: 8rem;
}

footer .infomation {
 text-align: center;
 width: 80rem;
 margin: 0 auto;
}

footer .contact {
 font-weight: 600;
 margin-bottom: 2rem;
}

footer .contact .sp_br {
 display: none;
}

@media screen and (max-width: 740px) {
 footer .contact .sp_br {
  display: block;
 }
}


/* ----------------------------------------------------------------------
 logo
---------------------------------------------------------------------- */
#h-logo {
 width: 24rem;
 height: fit-content;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 2rem;
 margin: auto;
}

#f-logo {
 text-align: center;
 padding-top: 4.8rem;
 margin-bottom: 4rem;
}

#h-logo img {
 width: auto;
 height: 4rem;
}

#f-logo img {
 width: 28rem;
 height: auto;
}


/* ----------------------------------------------------------------------
 navigation
---------------------------------------------------------------------- */
@keyframes bugfix {
 from {
  padding: 0;
 }

 to {
  padding: 0;
 }
}

@-webkit-keyframes bugfix {
 from {
  padding: 0;
 }

 to {
  padding: 0;
 }
}

#wrapper {
 animation: bugfix infinite 1s;
 -webkit-animation: bugfix infinite 1s;
}

#overlay-button {
 position: fixed;
 right: 2rem;
 top: 2rem;
 padding: 2.6rem 1.1rem;
 z-index: 5;
 cursor: pointer;
 user-select: none;
}

#overlay-button span {
 height: .4rem;
 width: 3.5rem;
 border-radius: .2rem;
 background-color: #39B68E;
 position: relative;
 display: block;
 transition: all .2s ease-in-out;
}

#overlay-button span:before {
 top: -1rem;
 visibility: visible;
}

#overlay-button span:after {
 top: 1rem;
}

#overlay-button span:before,
#overlay-button span:after {
 height: .4rem;
 width: 3.5rem;
 border-radius: .2rem;
 background-color: #39B68E;
 position: absolute;
 content: "";
 transition: all .2s ease-in-out;
}

#overlay-button:hover span,
#overlay-button:hover span:before,
#overlay-button:hover span:after {
 background: #F8A81D;
}

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

#overlay.vis {
 visibility: visible;
}

#overlay-button.vis:hover span {
 background: transparent;
}

#overlay-button.vis span:before,
#overlay-button.vis span:after {
 background: #fff;
}

#overlay-button.vis span:before {
 transform: rotate(45deg) translate(.7rem, .7rem);
}

#overlay-button.vis span:after {
 transform: rotate(-45deg) translate(.7rem, -.7rem);
}

#overlay-button:hover span:before,
#overlay-button:hover span:after {
 background: #F8A81D;
}

#overlay {
 height: 100vh;
 width: 100vw;
 background: #39B68E;
 z-index: 2;
 visibility: hidden;
 position: fixed;
 top: 0;
 left: 0;
}

#overlay.active {}

#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 {
 cursor: pointer;
 padding: 2rem 2rem;
}

#overlay ul li:hover {}

#overlay ul li a {
 color: #fff;
 text-decoration: none;
 font-size: 3.2rem;
 font-weight: 600;
 line-height: calc(3.2 / 2);
 border-bottom: 0.28rem solid transparent;
}

#overlay ul li:hover a {
 color: #F8A81D;
 border-bottom: 0.28rem solid #F8A81D;
 transition: all .2s ease-in-out;
}


/* 追加 */
#overlay.hid {
 visibility: hidden;
}