@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: 1601px) {
 html {
  font-size: 100%;
 }
}

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

@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.4rem;
 letter-spacing: .18rem;
 font-feature-settings: "palt";
 background: #fff;
}

p {
 font-size: 1.4rem;
 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;
 transition: all .2s ease-in-out;
}

a:hover {
 color: #39B68E;
}

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

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


/* ----------------------------------------------------------------------
 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 .f-box {
 width: 74rem;
 margin: 0 auto;
}

footer .f-box>ul {
 display: flex;
}

footer li.left {
 padding-top: 7rem;
 padding-right: 9rem;
}

footer .contact {
 font-size: 1.4rem;
 margin-bottom: 3.5rem;
}

footer .contact .sp_br {
 display: none;
}

footer li.left .f-city {
 font-size: 1.4rem;
}

footer li.left .pp {
 font-size: 1.4rem;
}

footer li.left .pp a {
 color: #fff;
 text-decoration: underline;
}

footer li.right {
 padding-top: 7rem;
}

footer li.right .menu-f-nav-container {
 padding-left: 1rem;
}

footer li.right li {
 padding-bottom: 2rem;
}

footer li.right li a {
 color: #fff;
 font-weight: 500;
}

footer li.right li a:hover {
 text-decoration: underline;
}

footer .c-btn {
 cursor: pointer;
 display: inline-flex;
 align-items: end;
 background-color: #EC789B;
 border-radius: 5rem;
 padding: 1.4rem 1.6rem 1.45rem 1.6rem;
 margin-bottom: 4.5rem;
 box-shadow: 0.3rem 0.4rem 0rem rgba(0, 0, 0, .16);
 transition: all .2s ease-in-out;
}

footer .c-btn:hover {
 background: #39B68E;
 box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, .48);
 transform: translate3d(0, 0.2rem, 0);
}

footer .c-btn p {
 line-height: 1.6rem;
 padding-right: 1rem;
}

footer .c-btn p a {
 color: #fff;
 font-weight: 500;
}

footer .c-btn img {
 width: auto;
 height: 1.5rem;
}


@media screen and (max-width: 740px) {
 footer .f-box {
  width: 100%;
 }

 footer .f-box>ul {
  display: inline-block;
  padding-left: 3rem;
 }

 footer li.right {
  padding-top: 4rem;
 }

 footer .contact .sp_br {
  display: block;
 }
}


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

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

#f-logo {
 margin-bottom: 2rem;
}

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

#fukuoka {
 padding-bottom: 1.5rem;
}

#fukuoka img {
 width: 12.5rem;
 height: auto;
}


/* ----------------------------------------------------------------------
 navigation
---------------------------------------------------------------------- */

/*========= h-nav ===============*/

.menu-h-nav-container {
 position: absolute;
 top: 4.1rem;
 right: 19.5rem;
}

.menu-h-nav-container ul {
 zoom: 1;
}

.menu-h-nav-container ul:after {
 content: ' ';
 display: table;
 clear: both;
}

.menu-h-nav-container ul li {
 float: left;
 font-size: 1.4rem;
 margin-left: 2rem;
}

.menu-h-nav-container ul li.current-menu-item a,
.search-results .menu-h-nav-container ul li:nth-of-type(3) a,
.case .menu-h-nav-container ul li:nth-of-type(4) a {
 color: #39B68E;
 text-decoration: underline;
}

.menu-h-nav-container ul li a:hover {
 text-decoration: underline;
}

#header .c-btn {
 cursor: pointer;
 display: inline-flex;
 align-items: end;
 background-color: #EC789B;
 border-radius: 5rem;
 padding: 1.4rem 1.6rem 1.45rem 1.6rem;
 position: absolute;
 top: 2.6rem;
 right: 3rem;
 box-shadow: 0.3rem 0.4rem 0rem rgba(0, 0, 0, .16);
 transition: all .2s ease-in-out;
}

#header .c-btn:hover {
 background: #39B68E;
 box-shadow: 0.25rem 0.25rem 0rem rgba(0, 0, 0, .48);
 transform: translate3d(0, 0.2rem, 0);
}

#header .c-btn p {
white-space: nowrap;
 line-height: 1.6rem;
 padding-right: 1rem;
}

#header .c-btn p a {
 color: #fff;
 font-weight: 500;
}

#header .c-btn img {
 width: auto;
 height: 1.5rem;
}


/*========= hum-menu ===============*/

#g-nav {
 /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
 position: fixed;
 z-index: -1;
 opacity: 0;
 /*はじめは透過0*/
 /*ナビの位置と形状*/
 top: 0;
 /*ナビの高さ*/
 background: #39B68E;
 /*動き*/
 transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
 z-index: 999;
 position: fixed;
 opacity: 1;
 width: 100%;
 height: 100vh;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
 /*ナビの数が増えた場合縦スクロール*/
 position: fixed;
 z-index: 999;
 width: 100%;
 height: 100vh;
 /*表示する高さ*/
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
 display: none;
 width: 100%;
 /*ナビゲーション天地中央揃え*/
 position: absolute;
 z-index: 999;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

#g-nav.panelactive ul {
 display: block;
}

/*リストのレイアウト設定*/

#g-nav li {
 list-style: none;
 text-align: center;
}

#g-nav li a {
 font-size: 3.2rem;
 color: #fff;
 text-decoration: none;
 padding: 2rem;
 display: block;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1 {
 position: absolute;
 z-index: 9999;
 /*ボタンを最前面に*/
 top: 0;
 bottom: 0;
 right: 3rem;
 cursor: pointer;
 width: 5rem;
 height: 5rem;
 margin: auto;
}

/*×に変化*/
.openbtn1 span {
 display: inline-block;
 transition: all .4s;
 position: absolute;
 left: 0;
 right: 0;
 height: .3rem;
 border-radius: .02rem;
 background-color: #39B68E;
 width: 50%;
 margin: auto;
}

.openbtn1 span:nth-of-type(1) {
 top: 1rem;
}

.openbtn1 span:nth-of-type(2) {
 top: 2rem;
}

.openbtn1 span:nth-of-type(3) {
 top: 3rem;
}

.openbtn1.active span:nth-of-type(1) {
 transform: translateY(1rem) rotate(-45deg);
 background-color: #fff;
}

.openbtn1.active span:nth-of-type(2) {
 background-color: #fff;
 opacity: 0;
}

.openbtn1.active span:nth-of-type(3) {
 transform: translateY(-1rem) rotate(45deg);
 background-color: #fff;
}

@media screen and (min-width: 1201px) {
 .openbtn1 {
  display: none;
 }
}

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

 .menu-h-nav-container,
 #header .c-btn {
  display: none;
 }
}


/* ----------------------------------------------------------------------
 breadcrumb
---------------------------------------------------------------------- */
#breadcrumb {
 width: 100%;
 padding-left: 6rem;
 padding-bottom: 5rem;
 margin: 0 auto;
}

#breadcrumb ul {
 zoom: 1;
}

#breadcrumb ul:after {
 content: ' ';
 display: table;
 clear: both;
}

#breadcrumb ul li {
 float: left;
 font-size: 1.3rem;
}

#breadcrumb ul li a {
 text-decoration: underline;
}

@media screen and (max-width: 640px) {
 #breadcrumb ul li {
  padding-bottom: 1rem;
 }
}

/* ----------------------------------------------------------------------
 title
---------------------------------------------------------------------- */
.page_title {
 font-size: 3.6rem;
 font-weight: 600;
 text-align: center;
}

.page_title span {
 font-size: 2.4rem;
}

.p_s_t {
 color: #F8A81D;
 text-align: center;
 padding-bottom: 4.5rem;
}

.p-lead {
 text-align: center;
 width: 80rem;
 padding-bottom: 8rem;
 margin: 0 auto;
}

@media screen and (max-width: 640px) {
 .page_title {
  padding: 0 5%;
 }
}