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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.syouhin>ul>li{
    background:#F7F7F7;
    border:#DDDDDD 1px solid;
    border-radius: 20px;
    margin:1em 0 3em;
}

.syouhintitle{
    width:100%;
    background:#00afcc;
    padding:1em 5%;
    border-radius: 20px 20px 0 0;
    
}

.syouhintitle2{
    width:100%;
    background:#00afcc;
    padding:1em 5%;
    border-radius: 0 0 20px 20px;
    
}


.syouhinpoint{
    display: inline-block;
    vertical-align: middle;
    background:#FFBF00;
    padding:0.2em 2em;
    margin:0.2em;
}
.syouhintitle h4{
    padding:0 1em;
    display: block;
    vertical-align: middle;
    margin:0.2em;
    color:#FFFFFF;
}

.syouhintime{
    display: inline-block;
    vertical-align: middle;
    color:#FF6B13;
    background:#FFFFFF;
    padding:0.3em 2em;
    border-radius: 20px;
    margin:0.2em;
}

.syouhinl{/*1098 490*/
    width:90%;
    margin:2em 5% 0;
    float: none;
}
.syouhinr{/*1098 510*/
    width:90%;
    margin:0 5% 2em;
    float: left;
}


.syouhinl_01{
    width:80%;
    margin:0 5%;
    padding:0.5em 5%;
    background:#FFFFFF;
    border:#FF6B13 1px solid;
    color:#FF6B13;
}
.syouhinl_02{/*490 195*/
    width:39.7959%;
    margin:0 1.6%;
    float: left;
}
.syouhinl_03{/*490 260*/
    width:53.6122%;
    margin:0 1.6%;
    float: left;
}
.syouhinl_03_price{
    display:inline-block;
}
.syouhinl_03_price{
    display:inline-block;
}
.syouhinl_03_unit{
    display:inline-block;
    vertical-align: center;
    
}

.syouhinr_icon01,
.syouhinr_icon02,
.syouhinr_icon03{
    display: inline-block;
    vertical-align: middle;
    background:#FFFFFF;
    padding:0.3em 3em;
    border-radius: 30px;
    position: relative;
}
.syouhinr_icon01::after,
.syouhinr_icon02::after,
.syouhinr_icon03::after{
    content: url(../img/menu/menu_icon_01.png);
    position: absolute;
    top: 60%;
    left: 10%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.syouhinr_icon02::after{
    content: url(../img/menu/menu_icon_02.png);
    left: 20%;
}
.syouhinr_icon03::after{
    content: url(../img/menu/menu_icon_03.png);
}

.syouhinl_04 dl {
    width:90%;
    margin:0 5%;
}
.syouhinl_04 dl dt{
    width:20%;
    margin:0;
    float: left;
}
.syouhinl_04 dl dd{
    width:78%;
    margin:0 1%;
    float: left;
}

/** バックグランド・カラー　設定 **/

.back_EEEEEE{ background:rgba(238,238,238,1.0); }
.back_FFFFFF{ background:rgba(255,255,255,1.0); }
.back_E7E7E7{background:#E7E7E7;}
.back_F0F0E1{background:#F0F0E1;} 

.back_FFF1E8{
    background:#FFF1E8;
}
.back_FF9F60{
    background:#7EC230;
}
.back_FFBFBF{
    background:#FFBFBF;
}
.back_FFF0E1{
    background:#FFF0E1;
}
.back_F5A942{
    background:#F5A942;
}
.back_329B3C{
    background:#329B3C;
}
.back_FF9326{
    background:#FF9326;
}
.back_FF5C26{
    background:#FF5C26;
}
.back_FF7F00{
    background:#FF7F00;
}
.back_FFDC73{
    background:#FFDC73;
}
.back_50A402{
    background:#50A402;
}
.back_F7BD6D{
    background: #F7BD6D;
}
.head00s{background: rgba(255,255,255,0.8);}



/***  改行無しの操作  ***/
.com_inline1 { display:inline; }
.com_inline2 { display:block; }
.com_inline3 { display:inline-block; }

/*ホバーで動くcss*/

.hover a img{
	filter: alpha(opacity=100);
	-webkit-opacity:1.00;
	-moz-opacity:1.00;
	opacity:1.00;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-ms-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
}

.hover a:hover img{
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-ms-transform: scale(1.02);
	-o-transform: scale(1.02);
	-webkit-transform: translate(0,-6px);
	-moz-transform: translate(0,-6px);
	-ms-transform: translate(0,-6px);
	-o-transform: translates(0,-6px);
}


/*===========================================*/
/*基本設定　大西*/
/*===========================================*/
#sub01,
#sub02,
#sub03,
#sub04,
#sub05,
#sub06,
#sub07,
#sub08,
.sub00,
.sub00_100,
.foot_cont{
	width:90%;
	margin:0 auto;
	text-align:left;
	padding:3em 0;
}
.sub00{
	padding:0;
}
.sub00_100{
	width:100%;
	padding:0;
}

/*=====================
　　文字色
=====================*/
.colo_FFFFFF{color:#FFFFFF !important;}
.colo_FFFFFF a{color:#FFFFFF !important;}

/*赤*/
.colo_FF0000{color:#FF0000 !important;}
.colo_FF0000 a{color:#FF0000 !important;}

.colo_000000{ color:#000000;}
.colo_000000 a{color:#000000;}

.colo_666666{ color:#666666 !important;}
.colo_666666 a{color:#666666 !important;}

.colo_FF6B13{color:#FF6B13 !important;}
.colo_FF6B13 a{color:#FF6B13 !important;}

.colo_329B3C{color:#329B3C !important;}
.colo_329B3C a{color:#329B3C !important;}

.colo_DF7000{color:#DF7000 !important;}
.colo_DF7000 a{color:#DF7000 !important;}

.colo_8C4600{color:#8C4600 !important;}
.colo_8C4600 a{color:#8C4600 !important;}

.colo_0085B2{color:#0085B2 !important;}
.colo_0085B2 a{color:#0085B2 !important;}


.colo_FF7373{color:#FF7373 !important;}
.colo_FF7373 a{color:#FF7373 !important;}

.colo_329A3B{color:#329A3B !important;}
.colo_329A3B a{color:#329A3B !important;}

.colo_FF5B26{color:#FF5B26 !important;}
.colo_FF5B26 a{color:#FF5B26 !important;}

.colo_FF4C4C{color:#FF4C4C !important;}
.colo_FF4C4C a{color:#FF4C4C !important;}


/*aタグ　マーカーで引いたような下線をホバーで表示*/

.mark_FFFF99_a a{
    text-decoration: none;
}
.mark_FFFF99_a a:hover{
    background:-moz-linear-gradient(transparent 50%, #ffff99 0);
    background:-webkit-linear-gradient(transparent 50%, #ffff99 0);
    background:-ms-linear-gradient(transparent 50%, #ffff99 0);
    background:-o-linear-gradient(transparent 50%, #ffff99 0);
    background:linear-gradient(transparent 50%, #ffff99 0);
}
.mark_EEEEEE_a a{
    text-decoration: none;
}
.mark_EEEEEE_a a:hover{
    background:-moz-linear-gradient(transparent 50%, #EEEEEE 0);
    background:-webkit-linear-gradient(transparent 50%, #EEEEEE 0);
    background:-ms-linear-gradient(transparent 50%, #EEEEEE 0);
    background:-o-linear-gradient(transparent 50%, #EEEEEE 0);
    background:linear-gradient(transparent 50%, #EEEEEE 0);
}

.mark_555555_a a{
    text-decoration: none;
}
.mark_555555_a a:hover{
    background:-moz-linear-gradient(transparent 50%, #555555 0);
    background:-webkit-linear-gradient(transparent 50%, #555555 0);
    background:-ms-linear-gradient(transparent 50%, #555555 0);
    background:-o-linear-gradient(transparent 50%, #555555 0);
    background:linear-gradient(transparent 50%, #555555 0);
}

.mark_D6D6D6_a a{
    text-decoration: none;
}
.mark_D6D6D6_a a:hover{
    background:-moz-linear-gradient(transparent 50%, #D6D6D6 0);
    background:-webkit-linear-gradient(transparent 50%, #D6D6D6 0);
    background:-ms-linear-gradient(transparent 50%, #D6D6D6 0);
    background:-o-linear-gradient(transparent 50%, #D6D6D6 0);
    background:linear-gradient(transparent 50%, #D6D6D6 0);
}


.mark_786B34_a a{
    text-decoration: none;
}
.mark_786B34_a a:hover{
    background:-moz-linear-gradient(transparent 50%, #786B34 0);
    background:-webkit-linear-gradient(transparent 50%, #786B34 0);
    background:-ms-linear-gradient(transparent 50%, #786B34 0);
    background:-o-linear-gradient(transparent 50%, #786B34 0);
    background:linear-gradient(transparent 50%, #786B34 0);
}




.underline_tomato a,
.underline_FFFFFF a,
.underline_0085B2 a,
.underline_1F1F1F a{
    text-decoration: none;
  display: inline-block;
  padding-bottom: 1px;
  position: relative;
}

.underline_tomato a:hover::after,
.underline_FFFFFF a:hover::after,
.underline_0085B2 a:hover::after,
.underline_1F1F1F a:hover::after {
  width: 100%;
}

.underline_tomato a::after{
  background-color:#52C131;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .3s all;
  width: 0;
}

.underline_FFFFFF a::after{
  background-color: #FFFFFF;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .3s all;
  width: 0;
}

.underline_0085B2 a::after{
  background-color: #0085B2;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .3s all;
  width: 0;
}

.underline_1F1F1F a::after{
  background-color: #1F1F1F;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .3s all;
  width: 0;
}


.bord_D6D6D6_t1{
	border-top:#D6D6D6 solid 1px;
}
.bord_DBDBDB_t1{
	border-top:#DBDBDB solid 1px;
}
.bord_ECECEC_t4{
	border-top:#ECECEC solid 4px;
}

/*テキストインデント*/
.txt_ind01{padding-left: 0.7em;text-indent: -0.7em;}/*1文字分*/
.txt_ind01em{padding-left: 1em;text-indent: -1em;}/*1文字分*/
.txt_ind02{padding-left: 2em;text-indent: -2em;}/*2文字分*/
.txt_ind03{padding-left: 3em;text-indent: -3em;}/*3文字分*/

/*==スマホ時width設定=================*/
.w_100{width:100% !important;margin:0 !important;}
.w_96{width:96% !important;margin:0 2% !important;}
.w_90{width:90% !important;margin:0 5% !important;}
.w_80{width:80% !important;margin:0 10% !important;}
.w_70{width:70% !important;margin:0 15% !important;}
.w_60{width:60% !important;margin:0 20% !important;}
.w_50{width:50% !important;margin:0 25% !important;}
.w_30{width:30% !important; margin:0 35% !important;}

.w_100l{width:100% !important;margin:0 !important;}
.w_96l{width:96% !important;margin:0 4% 0 0 !important;}
.w_90l{width:90% !important;margin:0 10% 0 0 !important;}
.w_80l{width:80% !important;margin:0 20% 0 0 !important;}
.w_70l{width:70% !important;margin:0 30% 0 0 !important;}
.w_60l{width:60% !important;margin:0 40% 0 0 !important;}
.w_50l{width:50% !important;margin:0 50% 0 0 !important;}

/*===================*/
/*PCでのtextの幅設定（全サイズ縮める）*/
.p_w70,
.p_w80,
.p_w90,
.p_w94,
.p_w96,
.p_w98{width:94% !important; margin:0 3% !important;}

.bold{font-weight:bold;}
.nomal{font-weight:normal;}

.bold{font-weight:bold;}
.bold_900{font-weight:900;}
.bold_700{font-weight:700;}
.bold_500{font-weight:500;}
.bold_400{font-weight:400;}
.bold_300{font-weight:300;}
.bold_100{font-weight:100;}
.nomal{ font-weight:normal;}
.font_ital{
     font-style: italic;
}

.font10{
	font-size:10px;
	/*
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
	*/
}
.font11{font-size:80%;}
.font12{font-size:85%; line-height:1.3;}
.font13{font-size:93%;}
.font14{font-size:103%; line-height:1.5;}
.font15{font-size:107%; line-height:1.5;}
.font16{font-size:115%; line-height:1.5;}
.font17{font-size:125%;  line-height:1.4;}
.font18{font-size:140%; line-height:1.4;}
.font19{font-size:150%; line-height:1.1;}
.font19160{font-size:160%; line-height:1.1;}
.font20{font-size:180%; line-height:1.4;}

.line_height12{
	line-height:1.2;
}
.line_height14{
	line-height:1.4;
}
.line_height16{
	line-height:1.6;
}
.line_height18{
	line-height:1.8;
}
.le_sp01{letter-spacing: 1px;}
.le_sp02{letter-spacing: 2px;}
.le_sp03{letter-spacing: 3px;}
.le_sp04{letter-spacing: 4px;}
.le_sp05{letter-spacing: 5px;}
.le_sp06{letter-spacing: 6px;}
.le_sp07{letter-spacing: 7px;}
.le_sp08{letter-spacing: 8px;}
.le_sp09{letter-spacing: 9px;}
.le_sp10{letter-spacing: 10px;}

.le_sp01-1{letter-spacing: -1px;}

/*PCの場合brを付ける*/
.p_br br{
	display:none;
}

/*スマホの場合brを付ける*/
.s_br br{
	display:block;
}
/*スマホの場合左寄せ*/
.p_cen_s_le{
	text-align:left;
}
/*スマホの場合センター*/
.p_le_s_cen{
	text-align:center;
}


/*========================
繰り返しお問い合わせ誘導 こころリフォーム
========================*/

.repe01{
    margin:0;
    background:#FFFFFF;
    border:#FFD2B7 1px solid;
    border-radius: 10px;
}

.repe01_01{
    position: relative;
    width:90%;
    padding:0.5em 5%;
    background:#FF7807;
    border-radius: 10px 10px 0 0;
}
.repe01_01img{/*464 1100*/
    width:86%;
    margin:0 0 0 5%;
}
.repe01_01text{
    margin:0 5%;
    padding:0.3em 0 0 0;
}
.repe01_01textimg{/*682 166*/
    width:40%;
}


.repe_free{
    display: inline-block;
    vertical-align: middle;
}

.repe_free::before{
    content: url(../img/common/free_icon.png);
    display: inline-block;
    vertical-align: middle;
    padding:0 0.3em 0 0;
}

.repe01_02l{/*500 1100*/
    width:100%;
    margin:1.5em 0;
    padding:0 2.2727%;
    float: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
}
.repe01_02r{
    width:100%;
    margin:1.5em 0;
    padding:0 2.2727%;
    float: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.repe01_02btn a{
    text-decoration: none;
    display: block;
    color:#FFFFFF;
    padding:1em 0 1em 10%;
    border-radius: 10px;
    background: linear-gradient(to top,#FF6B15,#FF7F00);
    position: relative;
}

.repe01_02btn a::before{
    content: url(../img/common/cont_icon.png);
    position: absolute;
    top: 54%;
    left: 8.5%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.repe01_02btn a:hover{
    background: linear-gradient(to top,#FF7F00,#FFA56F);
    
}

.repe01_03 img { 
    width: auto;
    max-width: 75%;
    margin: 0 auto;
}

.repe02_01 ul li{
    width:48%;
    margin:1em 1%;
    float: left;
    
}

/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width : 768px) {

/***  改行無しの操作  ***/
.com_inline2 { display:inline-block; }


/*===========================================*/
/*基本設定　大西*/
/*===========================================*/

#sub01,
#sub02,
#sub03,
#sub04,
#sub05,
#sub06,
#sub07,
#sub08,
.sub00,
.sub00_100,
.foot_cont{
	width:100%;
}
.w_70l,
.w_80l,
.w_90l,
.w_96l,
.w_30,
.w_50,
.w_60,
.w_70,
.w_80,
.w_90,
.w_96,
.w_100{width:auto !important;margin:0 !important;}

.p_w70{width:70% !important; margin:0 15% !important;}
.p_w80{width:80% !important; margin:0 10% !important;}
.p_w90{width:90% !important; margin:0 5% !important;}
.p_w94{width:94% !important; margin:0 3% !important;}
.p_w96{width:96% !important; margin:0 2% !important;}
.p_w98{width:98% !important; margin:0 1% !important;}

.p_br br{
	display:block;
}
.s_br br{
	display:none;
}
/*スマホの場合左寄せ*/
.p_cen_s_le{
	text-align:center;
}
/*スマホの場合センター*/
.p_le_s_cen{
	text-align:left;
}

.font14{font-size:105%; line-height:1.5;}
.font15{font-size:110%; line-height:1.5;}
.font16{font-size:120%; line-height:1.5;}
.font17{font-size:130%;  line-height:1.4;}
.font18{font-size:140%; line-height:1.4;}
.font19{font-size:150%; line-height:1.5;}
.font20{font-size:200%; line-height:1.4;}

.le_sp01-1{letter-spacing: 0;}
    
    
    
/*========================
繰り返しお問い合わせ誘導 こころリフォーム
========================*/
    
.repe01{
    margin:3em 0 0 0;
}
.repe01_01img{/*464 1100*/
    position: absolute;
    width:42.1818%;
    left:5%;
    bottom:0;
    margin:0;
}
.repe01_01text{
    margin:0 0 0 30.90909%;
    padding:0.3em 0 0 0;
}
.repe01_01textimg{/*682 166*/
    width:24.34%;
}
    
.repe01_02l{/*500 1100*/
    width:50%;
    padding:0 2.2727%;
    float: left;
    border-right:#FFD2B7 1px solid;
    
}
.repe01_02r{
    width:50%;
    padding:0 2.2727%;
    float: left;
}
 
.repe01_02btn a::before{
    left: 15%;
}

.repe01_03 img { 
    max-width: 100%;
}
.repe02_01 ul li{/*720 340*/
    width:47.222222%;
    margin:1em 1.3888%;
    float: left;
    
}
    
}
/*=================================================================================*/
/** 1140px以上 PCサイズ画面 **/
@media (min-width : 1140px) {



/*===========================================*/
/*基本設定　大西*/
/*===========================================*/

#sub01,
#sub02,
#sub03,
#sub04,
#sub05,
#sub06,
#sub07,
#sub08{
	width:1140px;
	margin:0 auto;
	padding:3em 0;
}

.sub00,
.sub00_100{
	width:1140px;
	margin:0 auto;
	padding:0;
}
.foot_cont{
	width:1140px;
	margin:0 auto;
	padding:3em 0;
}


}
/*=================================================================================*/
/** 1450px以上 padding: ;PCサイズ画面 **/
@media (min-width : 1450px) {
/***  各ページ共通部  ***/
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* html */
html, body {
	overflow-x: hidden;
}

/* header ナビ */
#navi .navi-in a:hover {
	background: #0095d9;
	color: #fff;
}

/* footer *//*834px以上*/
@media screen and (min-width: 834px){
  #footer {
	padding-bottom: 120px;
  }
}

/* fixed-bottom-cta */
.fixed-bottom-cta {
	display: none;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10;
}
.fixed-bottom-cta-list {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	padding: 10px;
	margin: 0 auto;
}
.fixed-bottom-cta-list .item {
	max-width: 340px;
	width: 47%;
	margin: 0 1.5%;
    line-height: 1;
}

/*834px以下*/
@media screen and (max-width: 834px){
  .fixed-bottom-cta {
	bottom: auto;
	top: 0;
  }
}

/* top メインスライド */
.metaslider .flexslider .flex-viewport {
	overflow: visible !important;
}

/* contact */
#content .contact-form-table {
	width: 100%;
}
#content .contact-form-table tr {
	background: none;
}
#content .contact-form-table th,
#content .contact-form-table td {
	color: inherit;
	padding: 15px;
	border: 1px solid #ccc;
}
#content .contact-form-table th {
	text-align: left;
	width: 300px;
	background-color: #f4f5f7;
}
#content .contact-form-table td{
	background: none;

}
#content .contact-form-table th span {
	font-size: 80%;
}
#content .contact-form-submit {
	max-width: 400px;
	margin: 40px auto;
}
#content .contact-form-submit input[type='submit'] {
    -webkit-appearance: none;
    border: none;
    background-color: #e47748;
    color: #fff;
    height: 60px;
    font-size: 16px;
}

/*834px以下*/
@media screen and (max-width: 834px){
  #content .contact-form-table th,
  #content .contact-form-table td {
	display: block;
	width: 100%;
  }
  #content .contact-form-table th {
	border-bottom: none;
  }
}