@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
*/

/************************************
** PC/SP 表示切替
************************************/

.blog-header-sp,
.blog-footer-sp,
.blog-key-sp { display: none; }

.blog-header-pc,
.blog-footer-pc { display: block; }

@media only screen and (max-width: 640px) {
  .blog-header-pc,
  .blog-footer-pc { display: none !important; }
  .blog-header-sp,
  .blog-footer-sp { display: block !important; }
}

/************************************
** PC ヘッダー
************************************/

.blog-header-bg {
  background: url(/shared/img/share/header_bg.png) repeat-x center top;
  min-width: 1080px;
  width: 100%;
}

.blog-header-inner {
  width: 1080px;
  position: relative;
  margin: 0 auto;
  height: 99px;
}

.blog-site-title {
  font-size: 13px !important;
  color: #fff !important;
  line-height: 28px !important;
  position: absolute;
  top: 14px;
  right: 0;
  text-shadow: 0px 2px #C30C0C;
  font-weight: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-logo-header {
  position: absolute;
  top: 0;
  left: -34px;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-logo-header img { display: block !important; vertical-align: top !important; border: 0; }
.blog-logo-header img:nth-child(2) { margin-top: -99px !important; display: none !important; }

.blog-tel-header {
  position: absolute;
  top: 36px;
  left: 740px;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-tel-header img { display: block !important; vertical-align: top !important; border: 0; }
.blog-tel-header img:nth-child(2) { margin-top: -63px !important; display: none !important; }

/* ナビゲーションバー */
.blog-gnavi {
  height: 59px;
  width: 100%;
  background: url(/shared/img/share/gnavi_bg.png) repeat center top;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.blog-gnavi-inner {
  width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  height: 59px;
}

/* Cocoon のリストスタイルを完全に上書き */
ul.blog-nav,
ul.blog-nav li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.blog-nav {
  margin-left: 30px !important;
  float: left;
  display: block !important;
}

ul.blog-nav li {
  float: left !important;
  display: block !important;
}

ul.blog-nav li::before,
ul.blog-nav li::after { content: none !important; display: none !important; }

ul.blog-nav li a {
  display: block !important;
  text-decoration: none !important;
  line-height: 0;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

ul.blog-nav li a img.nav-img {
  display: block !important;
  vertical-align: top !important;
  border: 0 !important;
  width: auto !important;
  height: 59px !important;
  max-width: none !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: opacity 0.2s;
}

ul.blog-nav li a:hover img.nav-img {
  opacity: 0.75;
}

.blog-header-line {
  background: url(/shared/img/share/header_line.jpg) repeat-x center top;
  height: 7px;
  margin: 0;
  padding: 0;
  display: block;
  clear: both;
  position: relative;
  z-index: 2;
}

.blog-key {
  width: 100%;
  height: 514px;
  background: url(/shared/img/index/key_01.jpg) no-repeat center center;
  background-size: cover;
  margin-top: -66px; /* gnavi(59px) + header-line(7px) 分だけ上に引き上げ */
  position: relative;
  z-index: 1;
}

/************************************
** PC フッター
************************************/

.blog-footer-pc {
  min-width: 1080px;
  width: 100%;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.blog-footer-nav {
  background: url(/shared/img/share/footer_bg_01.jpg) repeat-x center top;
  height: 77px;
  overflow: hidden;
}

/* Cocoon のリストスタイルを完全に上書き */
ul.blog-nav-footer,
ul.blog-nav-footer li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.blog-nav-footer {
  padding-top: 15px !important;
  text-align: center;
  display: block !important;
}

ul.blog-nav-footer li {
  display: inline !important;
  color: #fff;
  font-size: 16px;
  line-height: 44px;
}

ul.blog-nav-footer li::before,
ul.blog-nav-footer li::after { content: none !important; display: none !important; }

ul.blog-nav-footer li a {
  color: #fff !important;
  font-size: 16px;
  line-height: 44px;
  padding: 0 10px 0 5px;
  text-decoration: none !important;
}

ul.blog-nav-footer li a:hover { text-decoration: underline !important; }

.blog-footer-main {
  background: url(/shared/img/share/footer_bg_02.jpg) no-repeat center top;
  background-size: cover;
  position: relative;
  padding-bottom: 34px;
}

.blog-footer-inner {
  width: 1080px;
  margin: 0 auto;
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 22px;
  overflow: hidden;
}

.blog-logo-footer {
  display: table-cell;
  vertical-align: middle;
}

.blog-logo-footer img {
  display: block;
  border: 0;
}

.blog-txt-footer {
  display: table-cell;
  vertical-align: middle;
  padding-left: 15px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
}

.blog-txt-footer p {
  padding: 0 0 6px !important;
  color: #fff !important;
  font-size: 14px;
  margin: 0 0 6px !important;
}

.blog-txt-footer p.blog-tel-footer {
  margin-top: 21px !important;
  margin-left: -44px !important;
  padding: 0 !important;
}

.blog-tel-footer img { display: block !important; vertical-align: top !important; border: 0; }
.blog-tel-footer img:nth-child(2) { margin-top: -82px !important; display: none !important; }

/* 予約ボタン：メインサイトと同じく absolute 配置 */
.blog-reserve-bnr {
  position: absolute !important;
  right: 125px;
  top: 25px;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-reserve-bnr img { display: block; border: 0; }

.blog-footer-dl {
  padding: 0 0 0 5px !important;
  overflow: hidden;
  margin-bottom: 4px !important;
  font-size: 14px;
  line-height: 22px;
}

.blog-footer-dl dt {
  float: left;
  width: 80px;
  color: #fff !important;
  font-size: 14px;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-footer-dl dd {
  float: left;
  color: #fff !important;
  font-size: 14px;
  margin: 0 !important;
  padding: 0 !important;
}

.blog-footer-pc address {
  display: table-cell;
  vertical-align: bottom;
  text-align: right;
  white-space: nowrap;
  color: #fff !important;
  font-size: 14px;
  padding-bottom: 10px;
}

/************************************
** SP ヘッダー・フッター（iphone.css の必要部分）
************************************/

/* SP header は /sp/css/iphone.css と /sp/css/menu_btn.css を流用 */
/* ただし body への影響を最小限にするため key padding は上書き */

/************************************
** 固定バナー・トップへ戻る
************************************/

/* PC 版バナー（641px以上のみ表示） */
#recruit-banner-pc {
  position: fixed;
  right: 0;
  top: 60px;
  padding-top: 41px;
  z-index: 1000;
  display: block;
}
#recruit-banner-pc a img { display: block; border: 0; }

/* SP 版バナー（640px以下のみ表示・iphone.css がスタイル適用） */
#recruit-banner { display: none; }

@media only screen and (max-width: 640px) {
  #recruit-banner-pc { display: none !important; }

  #recruit-banner {
    display: block !important;
    background: url(/shared/img/share/recruit_bg.png) no-repeat left top !important;
    background-size: 100% auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 13% !important;
    padding-bottom: 5% !important;
    padding-left: 9% !important;
    padding-top: 6% !important;
    z-index: 1000 !important;
  }
  #recruit-banner a {
    box-sizing: content-box !important;
    width: 31px !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  #recruit-banner a img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border: 0 !important;
  }
}

#recruit-banner1 {
  position: fixed;
  right: 0;
  top: 400px;
  z-index: 999999;
}
#recruit-banner1 a img { display: block; border: 0; }

#topcontrol {
  z-index: 20000;
  display: block !important;
}

#topcontrol img {
  width: 82px !important;
  height: 82px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

@media only screen and (max-width: 640px) {
  #recruit-banner1 { display: none; }
}

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

  /* ── 基本レイアウト ── */
  body {
    min-width: 0 !important;
    background: #000 !important;
  }
  #container {
    min-width: 0 !important;
    padding-top: 80px !important; /* fixed header 分のオフセット */
  }
  #content-in.wrap {
    width: auto !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* Cocoon 固有要素・topcontrol を非表示 */
  .go-to-top,
  .mobile-header-menu-buttons,
  .mobile-footer-menu-buttons,
  #topcontrol { display: none !important; }

  /* ── SP キービジュアル：非表示 ── */
  .blog-key-sp {
    display: none !important;
  }

  /* ── SP ヘッダー内の Cocoon 上書きリセット ── */
  .blog-header-sp .global-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    height: 80px !important;
    z-index: 1000 !important;
    background: url(/sp/img/shared/header-bg.jpg) repeat-x top center !important;
    background-size: 100% !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .blog-header-sp .global-header h1 {
    font-size: 12px !important;
    color: #fff !important;
    line-height: 20px !important;
    padding-top: 5px !important;
    padding-left: 0 !important;
    text-shadow: 0px 2px #C30C0C !important;
    text-align: center !important;
    font-weight: normal !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
  }
  .blog-header-sp #logo {
    float: left !important;
    width: 170px !important;
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .blog-header-sp #logo img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: 0 !important;
  }

  /* ── #telnavi ── */
  .blog-header-sp #telnavi {
    background-image: url(/sp/img/shared/tel.png) !important;
    background-position: center 4px !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-left: 1px solid rgba(255,255,255,0.5) !important;
    border-right: 1px solid rgba(255,255,255,0.5) !important;
    line-height: 10px !important;
    position: absolute !important;
    right: 105px !important;
    top: 26px !important;
    text-align: center !important;
    display: block !important;
  }
  .blog-header-sp #telnavi a {
    color: #fff !important;
    display: block !important;
    font-size: 12px !important;
    padding: 38px 0 2px !important;
    text-decoration: none !important;
    width: 45px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── #mapnavi ── */
  .blog-header-sp #mapnavi {
    background-image: url(/sp/img/shared/map.png) !important;
    background-position: center 4px !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    line-height: 10px !important;
    position: absolute !important;
    right: 58px !important;
    top: 26px !important;
    text-align: center !important;
    display: block !important;
  }
  .blog-header-sp #mapnavi a {
    color: #fff !important;
    display: block !important;
    font-size: 12px !important;
    height: 19px !important;
    padding: 38px 0 2px !important;
    text-decoration: none !important;
    width: 45px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── .menu_btn ── */
  .blog-header-sp .menu_btn {
    background-color: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: block !important;
    height: 28px !important;
    line-height: 30px !important;
    padding: 7px 12px 11px !important;
    position: absolute !important;
    right: 5px !important;
    top: 28px !important;
    width: 25px !important;
    z-index: 100 !important;
    box-sizing: content-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .blog-header-sp .menu_btn span {
    background: #fff none !important;
    display: block !important;
    height: 4px !important;
    margin-top: 5px !important;
  }

  /* ── .menu_toggle — 初期非表示は menu-sp.js が制御、スタイルのみ上書き ── */
  .blog-header-sp .menu_toggle {
    position: absolute !important;
    top: 80px !important;
    right: 0 !important;
    width: 100% !important;
    background-color: rgba(0,0,0,0.8) !important;
    color: #999 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    z-index: 2000 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .blog-header-sp .menu_toggle ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 5px !important;
  }
  .blog-header-sp .menu_toggle li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
  }
  .blog-header-sp .menu_toggle li::before,
  .blog-header-sp .menu_toggle li::after { content: none !important; }
  .blog-header-sp .menu_toggle a {
    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 15px 0 !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.5) !important;
    font-size: 16px !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── SP フッター — nav-footer ── */
  .blog-footer-sp .nav-footer ul {
    display: block !important;
    padding: 20px 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    list-style: none !important;
  }
  .blog-footer-sp .nav-footer li {
    display: inline-block !important;
    padding: 0 8px !important;
    list-style: none !important;
    background: none !important;
  }
  .blog-footer-sp .nav-footer li::before,
  .blog-footer-sp .nav-footer li::after { content: none !important; }
  .blog-footer-sp .nav-footer a {
    background: url(/sp/img/shared/button.jpg) repeat 0 0 !important;
    color: #fff !important;
    display: block !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    padding: 8px 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 140px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── SP フッター — global-footer ── */
  .blog-footer-sp .global-footer {
    background: url(/sp/img/shared/footer.jpg) repeat-x top center,
                url(/sp/img/shared/footer-bg.jpg) top center repeat !important;
    background-size: 100% !important;
    color: #fff !important;
    text-align: center !important;
    padding: 5px 0 10px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .blog-footer-sp .global-footer * {
    color: #fff !important;
  }
  .blog-footer-sp .global-footer figure {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0;
  }
  .blog-footer-sp .global-footer figure img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border: 0 !important;
    margin: 0 auto !important;
  }
  .blog-footer-sp .global-footer p {
    color: #fff !important;
    margin-bottom: 1em !important;
  }
  .blog-footer-sp .global-footer dl {
    padding: 0 10px !important;
    margin: 0 0 5px !important;
    overflow: hidden;
  }
  .blog-footer-sp .global-footer dl.fdl {
    display: table !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .blog-footer-sp .global-footer dl.fdl dt {
    display: table-cell !important;
  }
  .blog-footer-sp .global-footer dl.fdl dd {
    display: table-cell !important;
  }
  .blog-footer-sp .global-footer .address {
    display: block !important;
    text-align: center !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
    white-space: normal !important;
  }
}