@charset "UTF-8";

/*
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --theme-color-lightest: #f9f9f9;
  --theme-color-lighter: #e5e5e5;
  --theme-color-light: #a8a8a8;
  --theme-color: #828282;
  --theme-color-dark: #5b5b5b;
  --theme-color-darker: #353535;
  --theme-color-darkest: #020202;

  --theme-color-pair-lightest: #fff9fb;
  --theme-color-pair-lighter: #ffb2c4;
  --theme-color-pair-light: #ff3262;
  --theme-color-pair: #e60033;
  --theme-color-pair-dark: #b20029;
  --theme-color-pair-darker: #7f001d;
  --theme-color-pair-darkest: #4c0011;
}

/* ▼▼▼ bootstrap hook */
.breadcrumb-item+.breadcrumb-item::before {
  display: none;
}

li label {
  display: initial;
}

/* ▲▲▲ bootstrap hook */

/* -------------------- 共通ルール ------------------------ */
body {
  text-align: justify;
  text-justify: inter-ideograph;
  overflow-x: hidden;
}

#header-container:not(.fixed-header) .header-in,
.page .article-header,
.breadcrumb-item .fa-folder,
.breadcrumb-item .fa-file,
.breadcrumb-item .fa-file-o,
.footer-meta {
  display: none;
}

/* 投稿ページのヘッダー画像 */
.single .article-header .eye-catch img {
  height: 150px;
  object-fit: cover;
}

/* 見出し リセット */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6 {
  background: none;
  border: none;
  font-weight: normal;
  border-radius: 0;
  padding: initial;
  margin: initial;
}

.theme_font {
  font-family: "Roboto Slab";
  font-weight: 500;
}

.rich_font {
  font-family: "リュウミン R-KL";
}

.rich_font_bold {
  font-family: "リュウミン B-KL";
}

.desc {
  font-size: 0.84rem;
}

.catch {
  font-size: 1.4rem;
}

.catch_large {
  font-size: 1.7rem;
}

.full-wide {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  padding: 0;
  margin: 0 -50vw;
}

.d-none {
  transition: 0.5s ease;
}

.sp_show {
  display: none;
}

.text-shadow {
  text-shadow: #333 1px 1px 1px, #333 1px 1px 1px;
}

.text_center {
  text-align: center;
}

a.button {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  color: white;
  height: 66px;
  background: var(--theme-color-darkest);
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: -0.3px;
  padding: 18px 33px 20px;
  margin: 20px 0;
  vertical-align: middle;
}

a.button:hover {
  background: var(--theme-color-darker);
}

ul.font-awesome {
  padding-left: 0;
  text-align: justify;
}

ul.font-awesome li {
  font-family: "Font Awesome 5 Free";
  list-style: none;
  padding-left: 0;
}

ul.font-awesome.check li:before {
  content: "\f00c";
  font-weight: 900;
  color: var(--theme-color-pair-darker);
  padding-right: 4px;
}

.phone {
  font-family: Jost;
  font-weight: 500;
  font-size: 1.5rem;
}

.phone a {
  text-decoration: none;
}

/* -------------------- 共通ルール ------------------------ */

/* header */
.header-container-in.hlt-top-menu {
  flex-direction: column;
}

.fixed-header .header-container-in.hlt-top-menu {
  flex-direction: initial;
}

#header_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 10px;
  background-color: black;
  color: white;
}

#header_inner #logo_laki {
  height: 32px;
}

#header_inner #logo {
  padding-right: 20px;
}

#header_inner #logo a {
  text-decoration: none;
  color: white;
  /* font-family: "Roboto Slab"; */
  /* font-weight: 500; */
  /* font-size: 2.4rem; */
  /* line-height: 1; */
}

#header_inner .header_text {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #ddd;
  height: auto;
  margin: 0;
}

/* navi */
.header-container-in.hlt-top-menu .site-name * {
  vertical-align: middle;
}

.header-container-in.hlt-top-menu .site-name-text {
  font-family: "Roboto Slab";
  font-weight: 500;
  font-size: 33px;
  margin-right: 6px;
}

.header-container-in.hlt-top-menu .site-name-text .sub {
  margin-left: 4px;
  font-size: 0.94rem;
}

.navi .item-label {
  font-family: "Roboto Slab";
  font-size: 1.2rem;
}

.navi-in>ul {
  text-align: left;
}

.navi-in>ul li {
  border-left: 1px solid #eee;
}

.navi-in>ul li,
.navi-in>ul .menu-item-has-description>a>.caption-wrap {
  height: 70px;
}

.navi-in>ul .menu-item-has-description>a>.caption-wrap {
  padding-left: 20px;
}

.navi-in>ul li:last-child {
  border-right: 1px solid #eee;
}

/* 現在の URL からメニューをハイライト */
/* active クラスは js にて設定 */
#navi .navi-in a.active {
  background-color: var(--theme-color-lightest);
  /*テーマカラーより若干濃く*/
  color: var(--theme-color-pair-darkest);
}

#navi .navi-in>ul li#menu-item-141 {
  width: auto;
  border-right: none;
}

#navi .navi-in>ul li#menu-item-141 i.fa-instagram {
  font-size: 1.7rem;
}

/* head-box */
.head-box {
  display: flex;
  flex-direction: row;
}

.page .head-box .title-box {
  display: grid;
  place-items: center;
  place-content: center;
  width: 150px;
  height: 150px;
  background-color: var(--theme-color-darkest);
  color: white;
}

.page .head-box .title-box .title {
  text-align: center;
  font-family: "Roboto Slab";
  font-size: 2rem;
  line-height: 0.8;
}

.head-box .title-box .sub-title {
  font-size: 0.9rem;
  vertical-align: middle;
}

.head-box .desc-box {
  width: calc(100% - 150px);
  padding: 16px;
}

/* 固定ページ 共通 -------------------- */
.page .content,
.page .entry-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

:not(.home).page .main {
  padding-top: 0;
}

.page .head_box {
  display: grid;
  place-items: center;
  place-content: center;
  height: 220px;
  width: 100vw;
  margin-bottom: 70px;
  background-size: cover;
  background-position: center;
}

.page .head_menu_box {
  position: absolute;
  display: grid;
  text-align: center;
  place-items: center;
  place-content: center;
  width: 150px;
  height: 150px;
  left: 40px;
  top: -40px;
  font-family: "Roboto Slab";
  color: white;
  background-color: var(--theme-color-pair-darkest);
  z-index: 1;
  transition: 0.5s ease;
}

.page .head_menu_box h1.title {
  font-size: 1.6rem;
  line-height: 1;
}

.page .head_menu_box .jp {
  font-size: 0.92rem;
}

/* 地図 ------------------- */
.map {
  position: relative;
  height: 450px;
  width: 100%;
  overflow: hidden;
}

.map iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + 150px + 150px);
  pointer-events: none;
}

.map--gray iframe {
  filter: grayscale(100%);
}

.map .balloon-pin {
  position: absolute;
  top: calc(50% - 125px);
  left: calc(50% - 55px);
  display: flex;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color-pair-darker);
  font-family: "Roboto Slab";
  font-weight: 500;
  font-size: 1.4rem;
  color: white;
  z-index: 99;
  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.9));
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: balloon-pin-fadeInOut;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}

.map .balloon-pin .img-logo {
  width: 100px;
  height: auto;
}

.map .balloon-pin:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: calc(50% - 10px);
  bottom: -20px;
  border-style: solid;
  border-width: 30px 8px 0 8px;
  border-color: var(--theme-color-pair-darker) transparent transparent transparent;
}

@keyframes balloon-pin-fadeInOut {
  0% {
    opacity: 0;
  }

  /* scale(横,縦) */
  30% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* footer -------------------------------------------------------- */
#footer {
  margin-top: 0;
  padding: 0;
  position: relative;
  display: flex;
  width: 100vw;
  left: 50%;
  right: 50%;
  padding: 0;
  margin: 0 -50vw;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color-darkest);
}

.footer-bottom {
  padding: 0;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin: 0 -50vw;
}

.navi-footer {
  background-color: #efefef;
}

.navi-footer li {
  border: none !important;
}

#footer .copyright {
  color: white;
  padding: 15px 0;
}

#footer li {
  border-left: none;
  overflow: hidden;
}

#footer a {
  display: block;
  padding: 18px;
  color: #555;
  transition: 0.5s linear;
}

#footer a:hover {
  transform: scale(1.1);
}

/* 先頭へ戻るボタン */
#go-to-top {
  position: fixed;
  display: none;
  right: 0;
  bottom: 0;
}

.go-to-top-button {
  width: 59px;
  height: 59px;
  color: var(--theme-color-lighter);
  background-color: var(--theme-color-darker);
  border-radius: 0;
  transition: 0.5s ease;
}

.go-to-top-button:hover {
  color: white;
  background-color: var(--theme-color-pair-darkest);
}

.font-biyousitu {
  font-family: "リュウミン B-KL";
  font-size: 2.2rem;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/* 1400px以下 Bootstrap使用時必須 */
@media (max-width: 1400px) {

  /* for bootstrap */
  #container.container {
    max-width: 1280px;
  }

  /* for bootstrap */
}

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .head_menu_box {
    top: auto !important;
    transition: 0.5s ease;
  }
}

/* 991px以下 */
@media screen and (max-width: 991px) {
  #container.container {
    max-width: 960px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  #container.container {
    margin: 0;
  }

  main.main {
    padding: 20px 0;
  }

  #header_inner #logo a {
    font-size: 1.3rem;
  }

  #header_inner #logo .font-biyousitu {
    font-size: 1.1rem;
  }
}

/* 768px以下 */
@media screen and (max-width: 768px) {
  #container.container {
    max-width: 768px;
  }

  .slide-media .image_right {
    display: none !important;
  }

  .head-box {
    flex-direction: column;
  }

  .head-box .title-box {
    width: 100%;
    height: 60px;
  }

  .home .head-box .desc-box {
    font-size: 0.84rem;
    width: 100%;
  }

  .sp_hide {
    display: none !important;
  }

  .sp_show {
    display: initial !important;
  }

  .sp_justify {
    text-align: justify !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .catch {
    font-size: 1.2rem;
  }

  .page .head-box .title-box {
    height: 90px;
  }

  #address-box .text-box {
    padding: 10px 20px;
  }

  #header_inner .header_text {
    font-size: 0.85rem;
    line-height: 1.7;
  }

  .sp_none {
    display: none;
  }

  .sp_justify {
    text-align: justify !important;
  }
}