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

/************************************
** CSS カスタムプロパティ（変数）
************************************/
:root {
  --color-primary: #3060B5;
  --color-primary-light: #749BE0;
  --color-primary-dark: #1C448B;
  --color-primary-darker: #0F316E;
  --color-accent: #121212;
}

/************************************
** 子テーマ用のスタイルを書く
************************************/
@media screen and (max-width: 768px) {
  .footer-widgets {
    display: block;
  }
}
*:hover {
  transition: all 0.2s ease;
}
* a img:hover {
  opacity: .8;
}
h1 {
  font-size: 1.5em;
  background: var(--color-primary);
  color: #fff;
  padding: .5em;
  border-radius: 15px;
}

/* ストライプボーダー付きh2（記事内・トップページ共通） */
.article h2,
#post-1567 .top_h2 {
  position: relative;
  padding: 1.5rem 1.5rem calc(1.5rem + 10px);
  border: 2px solid #000;
  margin: 0 0 3rem 0;
}
#post-1567 .top_h2 {
  margin: 0;
}
.article h2::before,
#post-1567 .top_h2::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #000;
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover, .navi-in a:hover, .navi-footer-in a:hover, .a-wrap:hover, .comment-reply-link:hover, .recent-comments .a-wrap:hover .recent-comment-content, .pagination a:hover, .pagination-next-link:hover, .comment-btn:hover, .pager-links a:hover span, .pager-links a:hover span, .mobile-menu-buttons .menu-button:hover, .menu-drawer a:hover, .bp-login-widget-register-link a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.navi-in a {
  align-items: center;
}

.menu-header li {
  border-left: 1px dashed #aaa;
}
.menu-header li:last-child {
  border-right: 1px dashed #aaa;
}
.header-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.logo-header {
  order: -2;
}
.tagline {
  order: -1;
}
.wc_topbox {
  padding: 10px 0;
  order: 0;
  flex-wrap: nowrap;
  height: 100px;
  font-size: .9em;
}
.wc_topbox a {
  text-decoration: none;
}
.wc_topbox a:hover {
  color: var(--color-primary-light);
}
.topbox_tel {
  text-align: center;
  white-space: nowrap;
}
.topbox_form {
  background: var(--color-primary);
  padding: .5em 1em;
  text-align: center;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
}
.topbox_form:hover {
  background: var(--color-primary-light);
}
.item-label span {
  font-size: .8em;
  color: var(--color-primary-light);
}
@media screen and (max-width: 1023px) {
  .menu-item span {
    display: none;
  }
}
#menu-footer li a {
  padding: 5px !important;
  margin-bottom: 10px !important;
}
.dv_mr {
  margin: 1rem 0 2rem 0;
}

/************************************トップ6連リフォームリスト*/
.reform_menu ul {
  display: flex;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  margin-bottom: 3rem;
}
.reform_menu li {
  position: relative;
  width: 210px;
  height: 230px;
  padding: 0;
  margin: 0 !important;
  color: #fff;
  background: #000;
}
@media screen and (max-width: 480px) {
  .reform_menu ul {
    display: block;
  }
  .reform_menu li {
    width: 100%;
    height: auto;
    background: #fff;
  }
}
.reform_menu li a:hover img {
  opacity: .3;
  transition: .7s;
}
.reform_menu li a {
  color: #fff;
  font-size: 1.2rem;
  text-shadow: #000 0 0 5px;
}
.reform_menu li img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.reform_menu_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/************************************RSSのデザイン設定*/
.ssr_area {
  margin-top: 4rem;
}
.rss_ul {
  list-style: none;
  margin: 1rem auto;
  padding: 0 !important;
}
@media screen and (max-width: 1023px) {
  .rss_ul {
    justify-content: center;
    margin-bottom: 1em;
  }
}
.rss_ul a {
  text-decoration: none;
}
.rss_li {
  position: relative;
  padding: 1em 0;
  border-bottom: 1px #000 dashed;
  margin: 0 auto !important;
}
.rss_li:first-child {
  border-top: 1px #000 dashed;
}
.rss_li:hover {
  background: #eee;
}

/* ストライプ装飾ライン（RSSリスト下・会社情報ボックス下共通） */
.rss_li_bottom,
.shine {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13px;
  content: '';
  border-top: 2px solid #000;
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen and (max-width: 480px) {
  .rss_li {
    max-width: 100%;
    width: 100%;
  }
  .article ul li, .article ol li {
    margin: 0;
    margin-bottom: 10px;
  }
}
.rss_title {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .rss_title {
    font-size: .8rem;
  }
}
.rss_desc {
  font-size: .8em;
}
.exp_new {
  position: relative;
}
.exp_new::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 4em solid transparent;
  border-left: 4em solid var(--color-accent);
  position: absolute;
  z-index: 100;
}
.exp_new::after {
  content: "New!";
  display: block;
  top: 10px;
  transform: rotate(-45deg);
  color: #fff;
  left: 5px;
  position: absolute;
  z-index: 101;
}

/*ラインタイトル*/
.mb_line-title_box02,
.mb_line-title_box03 {
  text-align: left;
  position: relative;
  margin: 0 auto;
}
.mb_line-title_box03 {
  margin-bottom: 2rem;
}
.mb_line-title_box02::before,
.mb_line-title_box03::before {
  content: '';
  background-color: var(--color-accent);
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mb_line-title02,
.mb_line-title03 {
  color: var(--color-accent);
  font-weight: 600;
  margin: 0;
  font-size: 1.2em;
  position: relative;
  display: inline-block;
  background-color: #fff;
  padding-right: 10px;
}
.mb_line-title03 {
  background: #ededed;
}
.mb_line-title02 p {
  margin: 0;
  line-height: 2;
}

/***********************************Cocoonレスポンシブグローバルメニュー*/
.header-container-in.hlt-top-menu {
  display: block;
}
.navi-in > ul {
  display: table;
  width: 100%;
}
.navi-in > ul li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.navi-in > ul .sub-menu li {
  display: block;
  width: 100%;
  border-bottom: 1px dashed #333;
}
#navi .navi-in > ul .sub-menu {
  min-width: auto;
}
@media screen and (max-width: 1023px) {
  .header-container-in {
    display: none;
  }
}
#navi-menu-content {
  background: #efefef;
}
#navi-menu-content a {
  color: var(--color-primary);
  border-bottom: 1px dashed var(--color-primary);
  margin-bottom: 3px;
}
.caption-wrap {
  height: 60px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sub-menu .caption-wrap {
  height: 40px;
  line-height: 35px;
}
#navi .navi-in > ul .sub-menu {
  min-width: 100% !important;
}
.navi-in > ul .sub-menu a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***********************************ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button {
  background-color: #fff;
  color: var(--color-primary);
}
.logo-menu-button.menu-button {
  background-color: #fff;
}
.fa-phone-alt {
  color: var(--color-primary);
}
.cf::after {
  content: none;
}

/***********************************スライダー*/
@media screen and (max-width: 834px) {
  .ss_com {
    font-size: .7em !important;
  }
}

/***********************************トップページ装飾*/
#post-1567 .top_h3 {
  border: none;
  padding: 0;
  margin-top: 0;
  border-bottom: 3px dotted #000;
  padding-bottom: 10px;
}
#post-1567 .top_img_r .wp-block-media-text__content {
  padding-left: 0;
}
#post-1567 .top_img_l .wp-block-media-text__content {
  padding-right: 0;
}
.space {
  height: 30px;
}
@media screen and (max-width: 600px) {
  #post-1567 .top_h2 {
    margin-top: 1em;
  }
  #post-1567 .top_h3 {
    margin-top: 1em;
  }
  #post-1567 .wp-block-media-text__content {
    padding: 0;
  }
  .space {
    height: 0px;
  }
}

/***********************************会社情報ボタン*/
.company_info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 1.3rem;
  border: 2px solid #333;
  position: relative;
}
.company_info_box {
  margin-right: 1rem;
}
.company_subcom {
  color: #333;
  font-size: 1rem;
  font-weight: 600;
}
.company_tel {
  line-height: 2rem;
  background: var(--color-primary);
  color: #fff;
  padding: 10px;
  font-size: 1.3vw;
  text-align: center;
  border-radius: 15px;
}
.company_tel:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.company_img {
  text-align: center;
}

/*buttonのスタイル*/
.btn, a.btn, button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.btn-wrap {
  margin: 30px 0;
  text-align: center;
  width: 50%;
}
@media screen and (max-width: 834px) {
  .company_subcom {
    font-size: .8rem;
  }
  .company_info_box {
    margin-bottom: 3rem;
  }
  .company_info {
    display: block;
  }
  .btn-wrap {
    width: 100%;
    margin-bottom: 1rem;
  }
  .btn-main {
    font-size: 1.2rem;
  }
  .company_tel {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
a.btn-c {
  font-size: 2rem;
  position: relative;
  width: 100%;
  padding: 0.25rem 2rem 2rem 3.5rem;
  color: var(--color-primary);
  box-shadow: 0 5px 0 #B3B3B3;
  border: 2px solid #333;
  background-color: #dddddd;
}
a.btn-c .btn-sub {
  font-size: 1rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -60%);
  display: block;
  width: 75%;
  padding: 0.5rem 0;
  color: var(--color-primary);
  border: 2px solid #333;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 480px) {
  .company_info_box {
    margin-right: 0;
  }
  a.btn-c {
    padding: 0;
    padding-bottom: 2rem;
  }
  a.btn-c span {
    font-size: .8rem;
    width: 80%;
  }
  a.btn-c .btn-sub {
    width: 90%;
  }
}
a.btn-c:hover {
  transform: translate(0, 3px);
  color: var(--color-primary);
  background: #fff;
  box-shadow: 0 2px 0 var(--color-primary-darker);
}
a.btn-c:hover::before {
  left: 2rem;
}

/* 施工前後 比較レイアウト */
.before-after {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem 0;
}
.before-after__col {
  flex: 1;
  min-width: 0;
}
.before-after__col img {
  width: 100%;
  height: auto;
  display: block;
}
.before-after__label {
  text-align: center;
  font-weight: 600;
  color: #fff;
  padding: 4px 0;
  margin-bottom: 0.5rem;
  border-radius: 4px 4px 0 0;
}
.before-after__label--before { background: #888; }
.before-after__label--after  { background: var(--color-primary); }
.before-after__desc {
  font-size: .85em;
  margin-top: .5rem;
}
.before-after__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary);
  padding-top: 3rem;
  flex-shrink: 0;
}
@media screen and (max-width: 600px) {
  .before-after {
    flex-direction: column;
  }
  .before-after__arrow {
    transform: rotate(90deg);
    padding: 0;
    width: 100%;
  }
}

/* フロート画像の隣に見出しが回り込まないようにする */
.article h2, .article h3, .article h4, .article h5, .article h6 {
  clear: both;
}

.entry-content {
  margin-bottom: 0;
}

/* 固定ページにおける日付・作成者・タイトルの非表示化 */
.page .post-date,
.page .author-info,
.page .entry-title {
  display: none;
}