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

/************************************
** 子テーマ用のスタイルを書く
************************************/
body.custom-background { background-image: none!important; background-color: #ffffff!important; }
.page-main-in{ 
    width: 1000px;
    margin: 0 auto;
}


/************************************
** ヘッダー
************************************/
.logo{
	width:330px;
	text-align:left;
}
#header-in{ width:1000px; margin:0 auto;}

#header-fixed{padding-top:90px!important;}

.h-contact{ float:right; margin-top:-55px;}
.fixed-header{ height:70px;}
.header-container-in.hlt-top-menur{position:relative;}
.header-container-in.hlt-top-menu .logo{ position:absolute;top:10px;left:0; }
/*.header-container-in.hlt-top-menu .h-submenu{ position:absolute;bottom:10%;right:50px; }
.header-container-in.hlt-top-menu .navi-in{ position:absolute;left:25%; top:20px;}*/


/* ナビ位置 */
.header-container-in.hlt-top-menu .navi-in {
    position: absolute;
    left: 25%;
    top: 20px;
    display: flex;
    align-items: center;
}

.header-container-in.hlt-top-menu .navi-in .item-label { font-size: 14px; }

/* submenu位置 */
.header-container-in.hlt-top-menu .h-submenu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}

.h-submenu-inner {
    display: flex;
    align-items: center;    /* 縦中央揃え */
    justify-content: flex-end;
    gap: 10px;
    margin-top: -55px;
}

.h-tel a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #2eaa5a;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 14px;
    border-radius: 10px;
    line-height: 1.4;
    white-space: nowrap;
    height: 50px; /* h-contactの画像と高さを合わせる */
    box-sizing: border-box;
	font-weight:bold;
}
.tel-hours{font-size:12px;}
.h-tel .tel-icon-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h-tel .tel-icon {
    width: 28px;
    height: auto;
    filter: brightness(0) invert(1); /* 白く反転 */
}

.h-submenu .h-contact {
    float: none !important;
    margin-top: 0 !important;
    margin-bottom: 0;
    line-height: 1;
}


/* PC 見積ボタン（画像非表示→CSS） */
.h-contact .pc-img {
    display: none !important;
}

.h-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ff8a00;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 18px;
    border-radius: 10px;
    height: 50px;
    box-sizing: border-box;
    white-space: nowrap;
}

.h-contact a::before {
    content: "✉";
    font-size: 20px;
    line-height: 1;
}

.h-contact a::after {
    content: "相談・見積もり";
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/************************************
** 追従ヘッダー時
************************************/

/* 通常ボタンを非表示 */
.fixed-header .h-submenu-inner {
    display: none;
}

/* 追従用ボタンエリア */
.h-fixed-btns {
    display: none;
}

.fixed-header .h-submenu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}

.fixed-header .h-fixed-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fixed-header .h-submenu::before,
.fixed-header .h-submenu::after {
    display: none;
}

/* 追従 電話ボタン */
.fixed-tel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: #2eaa5a;
    color: #ffffff !important;
    border-radius: 5px;
    text-decoration: none !important;
    gap: 2px;
}

.fixed-tel-btn .fixed-btn-icon {
    width: 22px;
    height: auto;
    filter: brightness(0) invert(1);
}

.fixed-tel-btn span {
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

/* 追従 見積ボタン */
.fixed-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: #ff8a00;
    color: #ffffff !important;
    border-radius: 5px;
    text-decoration: none !important;
    gap: 2px;
}

.fixed-mail-icon {
    font-size: 24px;
    line-height: 1;
}

.fixed-contact-btn span:last-child {
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

@media screen and (max-width: 1023px) {
    .h-fixed-btns { display: none !important; }
    /* スマホではh-contactのCSSボタンを無効化 */
    .h-contact a::before,
    .h-contact a::after {
        display: none;
    }
    .h-contact a {
        background: none;
        padding: 0;
        height: auto;
    }
}


/* ナビとsubmenuを横並びに */
.header-container-in.hlt-top-menu .navi-in {
    position: absolute;
    left: 25%;
    top: 20px;
    display: flex;
    align-items: center;
}

.header-container-in.hlt-top-menu .h-submenu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}


/************************************
** 追従ヘッダー時
************************************/
/* 通常ボタンを非表示 */
.fixed-header .h-submenu-inner {
    display: none;
}

/* 追従用ボタンエリア表示 */
.h-fixed-btns {
    display: none;
}

.fixed-header .h-submenu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}

.fixed-header .h-fixed-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 既存の疑似要素は削除 */
.fixed-header .h-submenu::before,
.fixed-header .h-submenu::after {
    display: none;
}

/* 共通ボタンスタイル */
.fixed-tel-btn,
.fixed-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 5px;
    text-decoration: none !important;
    gap: 2px;
}

/* 電話ボタン */
.fixed-tel-btn {
    background-color: #2eaa5a;
    color: #ffffff !important;
}

.fixed-tel-btn .fixed-btn-icon {
    width: 22px;
    height: auto;
    filter: brightness(0) invert(1);
}

.fixed-tel-btn span {
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

/* メール・見積ボタン */
.fixed-contact-btn {
    background-color: #ff8a00;
    color: #ffffff !important;
}

.fixed-mail-icon {
    font-size: 24px;
    line-height: 1;
}

.fixed-contact-btn span:last-child {
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

/* モバイル */
@media screen and (max-width: 1023px) {
    .h-fixed-btns {
        display: none !important;
    }
}

.header-container-in.hlt-top-menu .navi-in .item-label{ font-size:14px; }

/************************************
** Main
************************************/
#post-22 h1.entry-title{ display:none;}

/************************************
** フッター
************************************/
#footer{padding-top:0!important;margin-top:0;}
.article-footer{ display:none;}

/************************************
** Main
************************************/
.wp-block-cover{ min-height:590px;}


/************************************
** Menu
************************************/
#navi{ padding-bottom:10px;}
#menu-h-menu li{width:120px; text-align:center; line-height:2!important; height:50px;}
#menu-h-menu li a{ border-right:1px solid #fff;}
.navi-menu-caption{ color:#ffffff;}



/************************************
** カテゴリ
************************************/
#list a{border:1px solid #014797; margin-bottom:20px;}

.a-wrap{ margin-bottom:0;}

.entry-card-title,
.related-entry-card-title {
	font-weight: 600;
	font-size: 1.4em;
	line-height: 1.4;
	color: #040404a1;
	margin: 0 0 17px 5px;
}	

.cat-label{ color:#000;}
/************************************
** 共通
************************************/

/*投稿日を非表示にする*/
.post-date {
  display: none;
}

/*更新日を非表示にする*/
.post-update{
  display: none;
}

img.aligncenter {
display:block;
margin:5px auto 30px auto;
text-align:center;
}

img.alignright{
margin:5px 0 30px 30px;
}

img.alignleft{
margin:5px 30px 30px 0;
}

.alignright{ float:right; }
.alignleft{ float:left; }

.smt-img { display:none!important;}

/************************************
** margin / padding
************************************/
.mt10{ margin-top:10px;}

.mb0{ margin-bottom:0px!important;}
.mb15{ margin-bottom:15px;}
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}

.mb0{margin-bottom:0!important;}

/************************************
** Font
************************************/
.fs{font-size:80%;}
.fm{font-size:120%;}
.fl{font-size:140%;}
.fll{font-size:160%;}

.bold{ font-weight:bold; }
.uline{ text-decoration:underline;}

.orange{color:#ff6b39;}
.yellow{ color:#f9ef55;}
.red{ color:#ff0000;}
.white{ color:#ffffff;}


.center{ text-align:center;}
.right{ text-align:right;}
.left{ text-align:left;}

.text01{ line-height:1.4;}

strong{ font-weight:bold;}



/************************************
** Tittle
************************************/
/** 投稿ページ　**/
.single h2 {
 	color:#000!important;
	font-size: 20px !important;/*文字のサイズ*/
  border-bottom: 3px solid #014797!important;
	padding:15px 15px 15px 0;
}

.single h3{
  position: relative;
  padding: .75em 1em .75em 1.5em;
}
.single h3::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #014797;
  border-radius: 4px;
}


.ti01{ background-color:#034898!important; padding:10px 20px; margin-bottom:20px; text-align:center;}
.ti02{ background-color:#ff8a00!important; padding:10px 20px; margin-bottom:20px; text-align:center; color:#ffffff!important;}

h1.entry-title{padding: 1rem 2rem;
  border-left: 4px solid #014797;
}



/************************************
** List
************************************/
ul.listIcon01 li {
    padding: 10px 0 10px 40px;
    line-height: 1.6em;
    background: url(images/icon-arrow.png) left 0px top 10px no-repeat;
    margin-bottom: 7px;
    font-weight: bold;
    font-size: 1.2em;
	list-style:none
}

.listIcon02{padding-left:0px!important;}
ul.listIcon02 li {
    padding: 10px 0 10px 40px;
    line-height: 1.6em;
    background: url(images/icon-arrow02.png) left 0px top 10px no-repeat;
    margin-bottom: 7px;
    font-weight: bold;
    font-size: 1.2em;
	list-style:none
}

.dlfaq{background:url("images/line-dotte.png") repeat-x left bottom; margin-bottom:20px;}

.dlfaq dt{ 
	padding:5px 0px 5px 70px;
	margin-bottom:30px;
	font-size:1.4em; 
	font-weight:bold; 
	background:url("images/icon-q.png") no-repeat left center;
	color:#014797;
}

.dlfaq dd{
	margin-left:0!important;
	padding:5px 0px 30px 70px;
background:url("images/icon-a.png") no-repeat left 10%;
}
/************************************
** table
************************************/
table.table01 {
	margin:3% 0;
	border-top:#4e5978 1px solid;
	border-left:#4e5978 1px solid;
}
table.table01 th {
	background:#abe0f863;
	color:#000;
	padding:15px;
	text-align:left;
	border-bottom:#4e5978 1px solid;
	border-right:#4e5978 1px solid;
	width:30%;
}
table.table01 th.th01 { background-color:#e8f4ac; }
table.table01 th.th02 { background-color:#d8e78c; }

table.table01 td {
	border-bottom:#4e5978 1px solid;
	border-right:#4e5978 1px solid;
	padding:15px;
	text-align:left;
}
table.table01 td.td01 {
color:#ff1d1d;
font-size:24px;
}
table.table01 td.td01 span{
background:linear-gradient(transparent 60%, #ff6 60%);	
}


/************************************
** Clearfix
************************************/
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

/************************************
** form
************************************/
placeholder{color:#f6f6f6;}

/************************************
** section
************************************/
section{ margin:50px auto; width:1000px;}

/*---  top ------*/
.ti-sec09-01{background:url(images/toku01.jpg) no-repeat left center;}
.ti-sec09-02{background:url(images/toku02.jpg) no-repeat left center;}
.ti-sec09-03{background:url(images/toku03.jpg) no-repeat left center;}
.ti-sec09-04{background:url(images/toku04.jpg) no-repeat left center;}
.ti-sec09-05{background:url(images/toku05.jpg) no-repeat left center;}

@media only screen and (max-width:786px){
.ti-sec09-01{  background: url(images/toku01.jpg) no-repeat left top;}
.ti-sec09-02{  background: url(images/toku02.jpg) no-repeat left top;}
.ti-sec09-03{  background: url(images/toku03.jpg) no-repeat left top;}
.ti-sec09-04{  background: url(images/toku04.jpg) no-repeat left top;}
.ti-sec09-05{  background: url(images/toku05.jpg) no-repeat left top;}
}

/*---  contact ------*/
.seccontact{ margin:0 auto; padding:50px 0 0 0;  }
.bg-contact{ background-color: #014797; margin-bottom:0; padding:20px 50px;}
.seccontact .inner{background: url(images/bg-contact.png) no-repeat center top; padding:20px;}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1024px){
	
.page-main-in{
    width: 100%;
    margin: 0 auto;
}
.h-contact { margin-top: -55px; }	
	
}

/*1023px以下*/
@media screen and (max-width: 1023px){

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

#header-in{ width:100%; }	
.mobile-menu-buttons { background-color:#014797;}
.wp-block-cover{min-height:70vh;}
.logo-menu-button{flex-grow:40;}
.h-contact{flex-grow:2!important;margin-top:5px;margin-left:20px;}
.navi-menu-button{flex-grow:3!important; margin-top:10px;}
.search-menu-button{ display:none;}
.logo-menu-button img{ margin-top:15px!important; margin-left:10px; margin-right:10px;}
.fa-navicon::before, .fa-reorder::before, .fa-bars::before{ color:#ffffff;}

.has-logo-button .menu-button {
    width: 50px!important;
}	

img.alignright, img.alignleft{
display:block;
margin:5px auto 20px auto;	
}

.alignright,.alignleft{	float:none;}

	
/*------    section      -----*/
section{ margin:20px auto; width:100%;}


	
/*------    table      -----*/
table.table01 th,
table.table01 td{
width:100%!important;
display: block!important;}		
	
	
.pc-img { display:none !important;}
.smt-img { display:inline !important;}		
	
}

/************************************
** スマホヘッダー
************************************/
@media screen and (max-width: 1023px) {

    /* ロゴサイズ */
    .logo-menu-button img {
        width: 240px !important;
        margin-top: 20px !important;
        margin-left: 10px;
    }

    /* モバイルメニューバー背景 */
    .mobile-menu-buttons {
        background-color: #014797;
    }

    /* ハンバーガーアイコン色 */
    .fa-navicon::before,
    .fa-reorder::before,
    .fa-bars::before {
        color: #ffffff;
    }

    /* ナビボタン */
    .navi-menu-button {
        flex-grow: 3 !important;
        margin-top: 10px;
    }

    /* 検索ボタン非表示 */
    .search-menu-button {
        display: none;
    }

    /* ボタン幅 */
    .has-logo-button .menu-button {
        width: 50px !important;
    }

    /* ナビ・検索ボタン高さ */
    .search-menu-button.menu-button,
    .navi-menu-button.menu-button {
        height: 65px;
        padding-top: 10px;
    }

    /* PC用画像切り替え */
    .pc-img { display: none !important; }
    .smt-img { display: inline !important; }

    /* PC用電話バナー非表示 */
    .h-tel { display: none; }

    /* PC用submenuレイアウトをリセット */
    .h-submenu-inner {
        margin-top: 0;
    }
    .h-submenu .h-contact {
        float: right !important;
        margin-top: 10px !important;
    }

    /*------  スマホ 電話ボタン  ------*/
    .h-smt-tel {
        display: flex;
        align-items: center;
    }

    .h-smt-tel a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: #2eaa5a;
        border-radius: 10px;
        text-decoration: none !important;
        gap: 2px;
    }

    .h-smt-tel .smt-btn-icon {
        width: 24px;
        height: auto;
        filter: brightness(0) invert(1);
    }

    .h-smt-tel span {
        font-size: 10px;
        font-weight: bold;
        color: #ffffff;
        line-height: 1;
    }

    /*------  スマホ 見積ボタン  ------*/
    .h-contact .smt-img,
	.h-submenu .h-contact{
        display: none !important;
    }

    .h-contact {
        flex-grow: 2 !important;
        margin-top: 11px !important;
        margin-left: 10px!important;
    }

    .h-contact a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: #ff8a00;
        border-radius: 10px;
        text-decoration: none !important;
        gap: 2px;
    }

    .h-contact .smt-btn-icon {
        width: 24px;
        height: auto;
        filter: brightness(0) invert(1);
    }

    .h-contact span {
        font-size: 9px;
        font-weight: bold;
        color: #ffffff;
        line-height: 1;
    }
}

/*480px以下*/
@media screen and (max-width: 480px) {
    .logo-menu-button img {
        width: 200px !important;
    }
    .navi-menu-button { width: 50px !important; }
    .navi-menu-button img { margin-right: 0; }
}

/*375px以下*/
@media screen and (max-width: 375px) {
    .logo-menu-button { flex-grow: 45; }
}