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

/*｀｀｀｀｀｀｀｀｀｀｀｀｀｀カタログ用CSSここから｀｀｀｀｀｀｀｀｀｀｀｀｀｀*/

/*関連商品のずれを削除*/
@media screen and (max-width: 819px) {
	.related{padding-top:50px;}
}

@media screen and (min-width: 820px) {
	.related{
		padding-top:500px;
		position:static;
	}

}

/*●●見出し初期化ここから*/
h2.woocommerce-loop-product__title{
	padding: 0;
	margin: 0!important;
	background:none;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
	font-weight:normal!important;
}
/*●●見出し初期化ここまで*/
	
	
/* タイトルを黒色の太字にする */
h2.woocommerce-loop-product__title{
	/*border-left: solid 1px #389838!important;*/
	padding: 0;
}

.woocommerce-Price-amount{
	font-weight:bold!important;
	font-size:120%!important;
}

.woocommerce-Price-amount::before {
	content: "税抜";
	color: #FFFFFF;
	font-weight:normal;
	background:#424242;
	padding-left:5px;
	padding-right:5px;
	margin-right:10px;
	font-size: 90%; 
}

.color_red{
	background:#e68e8e;
	
	margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:30px;
	padding-bottom:20px;
	
	margin-top:30px;
	margin-bottom:0px;
}

.color_yellow{
	background:#fffee6;
	
	margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:30px;
	padding-bottom:20px;
	
	margin-top:30px;
	margin-bottom:0px;
}

.color_blue{
	background:#c2d5e8;
	
	margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:30px;
	padding-bottom:20px;
	
	margin-top:0px;
	margin-bottom:30px;
}

.web_01_daitokka{
	background:#fffee6;
	
	margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:30px;
	padding-bottom:20px;
	
	margin-top:30px;
	margin-bottom:0px;
}

.web_02_sinnyuuka{
	background:#c2d5e8;
	
	margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:30px;
	padding-bottom:20px;
	
	margin-top:0px;
	margin-bottom:30px;
}
/*｀｀｀｀｀｀｀｀｀｀｀｀｀｀カタログ用CSSここまで｀｀｀｀｀｀｀｀｀｀｀｀｀｀*/


/*テーブルレイアウト（インボイス用）*/
.tbl-r03{
	font-size:80%;
}
@media screen and (max-width: 640px) {
  .tbl-r03 {
    width: 90%;
  }
  .tbl-r03 tr {
    display: block;
    float: left;
  }
  .tbl-r03 tr td, 
  .tbl-r03 tr th {
    border-left: none;
    display: block;
    height: 50px;
  }
  .tbl-r03 thead {
    display: block;
    float: left;
    width: 30%;
  }
  .tbl-r03 thead tr {
    width: 100%;
  }
  .tbl-r03 tbody {
    display: block;
    float: left;
    width: 70%;
  }
  .tbl-r03 tbody tr {
    width: 50%;
  }
  .tbl-r03 tr td + td {
    border-left: none;
  }
  .tbl-r03 tbody td:last-child {
    border-bottom: solid 1px #ccc;
  }
}
 


/*【超重要】横揺れ防止*/
@media screen and (max-width : 767px){
html,
body {
	overflow-x: hidden!important;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	}
}

/*枠がおかしい対策*/
.tab-caption-box,
.label-box {
	border:none;
}

/*スマホのときの会社ロゴ*/
@media screen and (max-width: 480px){
.logo img {
height: 38px !important; /* スマホ時のロゴの画像タテサイズ */

}
}


/************************************
** 目次
************************************/
/**目次**/
@media screen and (min-width: 481px){
	.toc {
		max-width: 300px;
	}
}
@media screen and (max-width: 480px){
	.toc {
		max-width: 200px;
	}
}

.toc {
  display: block;
  padding: 0px;
  border: 1.2px #d2b48c solid !important;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #d2b48c;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
	font-size: 95%;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 90%;
  color: #696969;
  margin-left: 0px;
}

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

/*●●見出し初期化ここから*/
.article h1{
	padding: 0;
	margin: 0;
	background:none;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}
/*●●見出し初期化ここまで*/


/*★★★見出し修正ここから*/
.article h1 {
  background: #B7CEBB;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}/*★★★見出し修正ここまで*/


/*●●見出し初期化ここから*/
/*（補足）ふつーなら.articleの指定でいいのだが、今回はwoocommerceを使うので、.articleの指定を使うと*/
/*カタログ部分の名称もh2でそれにも指定がかかってしまうので、特別にcss指定方法を変更した*/
h2.wp-block-heading{
	padding: 0;
	margin: 0;
	background:none;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}
/*●●見出し初期化ここまで*/


/*★★★見出し修正ここから*/
h2.wp-block-heading{
	/*background: #eaf5f9;*/
	border-left: solid 10px #389838;
	padding: 0.75rem 1.5rem;
	
	margin-top:80px;
	margin-bottom:40px;
}
/*★★★見出し修正ここまで*/



/*●●見出し初期化ここから*/
.article h3{
	padding: 0;
	margin: 0;
	background:none;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}
/*●●見出し初期化ここまで*/

/*★★★見出し修正ここから*/
.article h3 {
  position: relative;padding-left: 1.6em;/*アイコン分のスペース1.2em*/
  line-height: 1.4;
	margin-top:80px;
	margin-bottom:10px;
}

.article h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f150";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: -4px;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  font-weight: 900;
}/*★★★見出し修正ここまで*/


/*●●見出し初期化ここから*/
.article h4{
	padding: 0;
	margin: 0;
	background:none;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}
/*●●見出し初期化ここまで*/


/*★★★見出し修正ここから*/
.article h4{
  color: #005B25;/*文字色*/
  padding-top: 0.5em;/*上の余白*/
  padding-bottom: 0.5em;/*下の余白*/
  border-top: solid 3px #005B25;/*上線*/
  border-bottom: solid 3px #005B25;/*下線*/padding-left:5px;
  margin-bottom:10px;
}/*★★★見出し修正ここまで*/


/*topページのタイトルを全非表示 (全てをまとめて非表示)*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}


/*固定ページのタイトルを非表示*/
.page .entry-title{
  display: none;
}

/*固定ページのシェアボタンを非表示*/
.page .sns-share{
  display: none;
}

/*固定ページのフォローボタンを非表示*/
.page .sns-follow{
  display: none;
}

/*固定ページの投稿日を非表示*/
.page .post-date{
  display: none;
}

/*固定ページの更新日を非表示*/
.page .post-update{
  display: none;
}

/*固定ページの投稿者名を非表示*/
.page .author-info{
  display: none;
}

/*ヘッダレイアウトの変更（ロゴを左に寄せて、メニューはその下に来るように）*/
/*wordpressのバージョンアップに伴い、別HPで作った機能が動かないので、今回作り直したよん*/
.logo{
	text-align:left;
}

/*ロゴ iPad・スマホ系対策*/
@media screen and (min-width:599px) and (max-width:1024px){
	.logo{
	}
}

@media (max-width: 599px){
	.site-logo-image {
		text-align:center;
		padding-top:10px;
		width:80%;
	}
}
	
.logo-header{
display:inline-block;
width:50%;
	margin-left:-25px;/*よくわからんがずれるので手動で修正*/
}

/*もとからあるヘッダーの*/
.header-in{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.logo-header{
}


/*フッターロゴサイズ修正*/
.footer-bottom-logo .logo-image {
	max-width: 100%;
}
.footer-bottom-logo img {
	height: auto;
}

/*お知らせをシンプルに　ここから*/
.new-entry-card-thumb .widget-entry-card-thumb-no-image {
	display:none;
}

.new-entry-card{
}

.widget-entry-cards{
	
}

.new-entry-card-content{
	margin-bottom:0px!important;
}

.new-entry-cards .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: right;
	margin-bottom:-3px!important;
}
.new-entry-card-update-date {
	display: none;
}

.new-entry-card-title{
	font-size:80%;
}

.no-post-date .post-date {display:block!important;}
/*お知らせをシンプルに　ここまで*/

/*お知らせの2カラムを調整*/
.column-wrap_oshirase > div {
width: 47%;
}

/*お知らせの見出しをちょっといじる*/
.oshirse_midashi{
	padding-bottom:0px;
}



/*施工事例くん*/
.skjr_pics{
	display:inline;
	line-height:30px;
}

.skjr_moji01{
	display:inline;
	background-color:#7BAA30;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:15px;
	padding-right:15px;
	color:white;
}

.skjr_moji02{
	padding-top:0px;
	padding-bottom:0px;
	padding-left:5px;
	color:#61665A;
	display:inline;
}




/*テーブルレイアウト（主に会社概要に使う）*/

/*834px以上*/
@media screen and (min-width: 835px){
	
	/*会社概要用*/
	.table_company {
	  border-collapse: collapse;
	}
	.table_company td, table th {
	  padding: 11px;
	}
	
	.table_company th {
	  background-color: #fff;
		text-align:left;
		border-left:#fff;
		border-right:#fff;
	}
	.table_company td {
	  background-color: #fff;
		border-left:#fff;
		border-right:#fff;
	}
	
	/*工場紹介用*/
	.table_kojo {
	  border-collapse: collapse;
	}
	.table_kojo td, table th {
	  padding: 8px;
		font-size:90%;
	}
	.table_kojo th {
	  background-color: #fff;
		text-align:left;
		border-left:#fff;
		border-right:#fff;
	}
	.table_kojo td {
	  background-color: #fff;
		border-left:#fff;
		border-right:#fff;
	}
	
	.table_kojo tr:nth-child(even) th {
		background: #f2f2f2;
	}
	
	.table_kojo tr:nth-child(even) td {
		background: #f2f2f2;
	}
	
}

/*834px以下*/
@media screen and (max-width: 834px){
	
	/*会社概要用*/
	.table_company {
	  border-collapse: collapse;
	}
	.table_company td, table th {
	  display: block;
	  padding-left:10px;
	}
	.table_company th {
		
	  padding-top: 10px;
	  padding-bottom:0px;
	  background-color: #fff;
      text-align:left;
	  font-size:1.1em;
		border-left:#fff;
		border-right:#fff;
		border-bottom:#fff;
	}
	.table_company td {
		
		padding-top: 0px;
		padding-bottom: 10px;
	  background-color: #fff;
		border-top:#fff;
		border-left:#fff;
		border-right:#fff;
		border-bottom:#fff;
		
		font-size:1.01em;
	}
	
	
	/*工場紹介用*/
	.table_kojo {
	  border-collapse: collapse;
	}
	.table_kojo td, table th {
	  display: block;
	  padding-left:10px;
	}
	.table_kojo th {
		
	  padding-top: 10px;
	  padding-bottom:0px;
	  background-color: #fff;
      text-align:left;
	  font-size:1.1em;
		border-left:#fff;
		border-right:#fff;
		border-bottom:#fff;
	}
	.table_kojo td {
		
		padding-top: 0px;
		padding-bottom: 10px;
	  background-color: #fff;
		border-top:#fff;
		border-left:#fff;
		border-right:#fff;
		border-bottom:#fff;
		
		font-size:1.01em;
	}
	
}

/*グローバルメニューの文字を太く*/
#navi .navi-in > ul li{
	font-weight:bold;
}


/*ヘッダの右の電話番号*/

/*ヘッダ（TEL）の表示を上にする*/
.header_tel{
display:inline-block;
text-align:right;
width:50%;
	padding-top:8px;
}




/*モバイルメニュー調整*/
.menu-item > .sub-menu{
	font-size:12px;
	margin-top:-10px;
}


/*▲▲▲セクションに関する各種設定ここから▲▲▲*/

/*セクションの色（白）*/
.change-area-white-top {
	background: white;
	
	
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:40px;
	padding-bottom:20px;
	
	margin-top:-40px;
	margin-bottom:-100px;
	
}


/*セクションの色（白）*/
.change-area-white-bottom {
	background: white;
	
	border-bottom:solid #bed0bf 2px;
	
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:40px;
	padding-bottom:20px;
	
	margin-top:-40px;
	
}

/*セクションの色（白）*/
.change-area-white-bottom_other {
	background: white;
	
	border-bottom:solid #bed0bf 2px;
	
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:40px;
	padding-bottom:20px;
	
	margin-top:-40px;
	margin-bottom:-100px;
	
}

/*セクションの色*/
.change-area {
    background: #E2EDE6;
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	padding-top:40px;
	padding-bottom:20px;
	margin-bottom:30px;
	
}

/*セクションを上に上げる*/
.ue_ni_ageru{
	margin-top:-70px;
}
/*▲▲▲セクションに関する各種設定ここまで▲▲▲*/



/*■■■スライドショー(CSSのみ）ここから■■■*/
/*[参考HP] https://uonuma.biz/css-only-slide-show/　*/

 /*=== 画像の表示エリア ================================= */
.slide-show {
position: relative;
}
 
 /*=== 画像の設定 ======================================= */
.slide-show img {
animation: show 28s infinite backwards; /* 28秒のスライドショーを繰り返し(4秒×7) */
max-width: 100%;
height: auto;
opacity: 0;
position: absolute; /* 画像を重ねて表示 */
left: 0;
top: 0;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide-show img:nth-of-type(1) {
animation-delay: 0s;
}

.slide-show img:nth-of-type(2) {
animation-delay: 4s; /*4秒ずらして開始*/
}

.slide-show img:nth-of-type(3) {
animation-delay: 8s; /*8秒ずらして開始*/
}

.slide-show img:nth-of-type(4) {
animation-delay: 12s; /*12秒ずらして開始*/
}

.slide-show img:nth-of-type(5) {
animation-delay: 16s; /*16秒ずらして開始*/
}

.slide-show img:nth-of-type(6) {
animation-delay: 20s; /*20秒ずらして開始*/
}

.slide-show img:nth-of-type(7) {
animation-delay: 24s; /*24秒ずらして開始*/
}

 
 /*=== スライドのアニメーション ========================= */
@keyframes show {
0% {opacity: 0}
17% {opacity: 1}
33% {opacity: 1}
50% {opacity: 0}
}

/*■■■スライドショー(CSSのみ）ここまで■■■*/



/*■■■スライドショーの幅を決める処理ここから■■■*/

/*基本*/
.change-topmainvisual_backpics{ /*PC*/
	margin-right: calc(51% - 50vw);
	margin-left: calc(51% - 50vw);
	padding-right: calc(50vw - 51%);
	padding-left: calc(50vw - 51%);
	
	/*上下余白*/
	margin-top:-60px; /*スライドショーの位置を上げる*/
}

.change-topmainvisual_backpics_mb{ /*モバイル*/
	margin-right: calc(51% - 50vw);
	margin-left: calc(51% - 50vw);
	padding-right: calc(50vw - 51%);
	padding-left: calc(50vw - 51%);
	
	/*上下余白*/
	margin-top:-65px; /*スライドショーの位置を上げる*/
}

/*トップ以外のやつ*/
.change-no_topmainvisual_backpics{ /*PC*/
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-right: calc(50vw - 51%);
	padding-left: calc(50vw - 51%);
	
	background-color:#B7CEBB;
	
	/*上下余白*/
	margin-top:-65px; /*スライドショーの位置を上げる*/
}
/*■■■スライドショーの幅を決める処理ここまで■■■*/


/*施工事例の背景画像*/
.ctb_sekoujirei{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_sekoujirei.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*施工事例の背景画像（モバイル）*/
.ctb_sekoujirei_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報の背景画像*/
.ctb_shouhin{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報の背景画像（モバイル）*/
.ctb_shouhin_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（灯籠）の背景画像*/
.ctb_shouhin_tourou{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin_tourou.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（灯籠）の背景画像（モバイル）*/
.ctb_shouhin_tourou_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin_tourou.jpg");
	background-repeat: no-repeat;
	background-position: center;
}


/*製品情報（水鉢）の背景画像*/
.ctb_shouhin_mizubachi{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin_mizubachi.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（水鉢）の背景画像（モバイル）*/
.ctb_shouhin_mizubachi_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin_mizubachi.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（環境資材）の背景画像*/
.ctb_shouhin_kankyoshizai{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin_kanshi.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（環境資材）の背景画像（モバイル）*/
.ctb_shouhin_kankyoshizai_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin_kanshi.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（彫刻・石製品）の背景画像*/
.ctb_shouhin_chokoku{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin_chokoku.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（彫刻・石製品）の背景画像（モバイル）*/
.ctb_shouhin_chokoku_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_chokoku.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（鳥居・氏神）の背景画像*/
.ctb_shouhin_torii{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin_torii.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（鳥居・氏神）の背景画像（モバイル）*/
.ctb_shouhin_torii_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin_torii.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（墓石）の背景画像*/
.ctb_shouhin_boseki{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_01_shouhin_boseki.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*製品情報（墓石）の背景画像（モバイル）*/
.ctb_shouhin_boseki_mb{
	background-image:url("https://shibuyasekizai.com/wp-content/uploads/pagetitle_pics_mobile_01_shouhin_boseki.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/*TOPの会社情報の枠*/
.top_kaisya_waku{
	border:solid 9px #E2EDE6;
	padding:20px 30px;
}


/*電話番号をボタン化ここから*/

/*divで作るボタンちゃん*/
/*その他主な共通部分は省略*/
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

a.btn--orange:hover {
  color: #fff;
  background: #d09a32;
}


/*480px以上*/
@media screen and (min-width: 481px){
		
	
	
	a.btn-c {
	  font-size: 1.5rem;
	  position: relative;
	  width:300px;
	  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
	  border-radius:40px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	
	.btn_centers{
		text-align:center;
	}
	
	a.btn-c {
	  font-size: 1.3rem;
	  position: relative;
	  width:250px;
	  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
	  border-radius:40px;
	}
}

a.btn-c i.fa {
  margin-right: 1rem;
}

/*電話番号をボタン化ここまで*/

/*各ページタイトル（モバイル時限定）*/
.mobile_page_title {
position: relative;
display: inline-block;
font-weight:bold;
font-size:28px;
color: #FFFFFF;
left: 30px;
/*text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);*/
}
.mobile_page_title:before {
content: '';
position: absolute;
bottom: 2px;
display: inline-block;
width: 40px;
height: 2px;
left: 23px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #66B72F;
border-radius: 1px;
}




/**/


/*1024px以上(パソコン)じゃなくて666px以上*/
@media screen and (min-width: 666px){
	
/*施工事例の右カラムをちょっといじる*/
.sekourei_column_left{
	padding-right:30px;
}		
	
.bannar_container {
  display: flex;
  flex-direction: row;
}
	
	.pc_main_visual{
	}
	
	.mobile_main_visual{
		display:none;
	}
	
	.change-topmainvisual_backpics_mb{
		display:none; /*いらん*/
	}
	
	.tokushu_eyecatch_kun{
		/*border:1px solid red;*/
		
		position: relative;
		display: inline-block;
		padding-top:55px;
        font-weight:bold;
		font-size:34px;
		left:20px;
		
		color: #FFFFFF;
		/*text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);*/
		
	}
	
	.tokushu_eyecatch_kun:before {
		content: '';
		position: absolute;
		bottom: 4px;
		display: inline-block;
		width: 40px;
		height: 2px;
		left: 22px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #66B72F;
		border-radius: 1px;
	}
	
	.change-topmainvisual_backpics{
		height:calc(0.3125 * 100vw); /*現在のビューポイントを出しつつ、スライドショーの画像比率(600/1920=0.3125)で計算する*/
	}
	
	.change-no_topmainvisual_backpics{
		height:170px;
	}
	
	/*なんかちょっと狭くしたいお年頃*/
.chotto_semaku{
	text-align:center;
	padding-left:calc(0.16 * 100vw);
	padding-right:calc(0.16 * 100vw);
	padding-bottom:50px;
}
	
	
	.column_chosei_no1{
		padding-right:60px;
		margin-bottom:0px;
	}
	
	.column_chosei_no2{
		padding-left:60px;
		padding-right:60px;
		margin-bottom:0px;
	}
	
	.column_chosei_no3{
		padding-left:60px;
		margin-bottom:0px;
	}
	
	/*製品の強みくん*/
	.seihin_tsuyomi_n01{
		padding-top:30px;
		padding-left:150px;
	}
	
	.seihin_tsuyomi_n02{
		padding-top:30px;
		padding-left:80px;
		padding-right:80px;
	}
	
	.seihin_tsuyomi_n03{
		padding-top:30px;
		padding-right:150px;
	}
	
	.pc_dake_miseru{
		display:block;
	}
	
	.mb_dake_miseru{
		display:none;
	}
	
	/*トップの地図を隠す*/
	.top_chizu_mb{
		display:none;
	}
	
	/*トップのグーグルマップ付近*/
	.top_kaisya_migi{
		padding-left:30px;
		padding-right:10px;
	}
	
	
	/*イベントページの文章をちょとかえる*/
	.event_aisatsu_mozi{
		padding-left:20px;
		font-size:95%;
	}
	
}

/*1010px以上　1260px以下*/
@media screen and (min-width: 1024px) and (max-width: 1280px){
	.logo{
		margin-left:0px;
	}

	.header_tel{
		margin-right:20px;
	}
	
}


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

	.header_tel{
		display:none; /*いらん*/
	}
	
}


/*834pxじゃなくて666px以下*/
@media (max-width: 666px){

.bannar_container {
  display: flex;
  flex-direction: column;
}
	
	.pc_main_visual{
		display:none; /*いらん*/
	}
	
	.mobile_main_visual{/*サイズを明示的に変更*/
		/*width:100vw;*/
		height:calc(100vw / 1.9);
		/*text-align: center;*/
		padding-top:calc(100vw / 5.5);
		
		background-color:#B7CEBB;
	}
	
	
	.change-topmainvisual_backpics_mb{
		height:calc(0.3125 * 100vw); /*現在のビューポイントを出しつつ、スライドショーの画像比率(600/1920=0.3125)で計算する*/
	}
	
	
	.max-img {
		margin-top:-30px;
		margin-left: -29px;
		margin-right: -29px;
    }
	
	.column_chosei_no1{
		padding-right:20px;
		margin-bottom:0px;
	}
	
	.column_chosei_no2{
		padding-left:10px;
		padding-right:10px;
		margin-bottom:0px;
	}
	
	.column_chosei_no3{
		padding-left:20px;
		margin-bottom:0px;
	}
	
	
	/*製品の強みくん*/
	.seihin_tsuyomi_n01{
		padding-top:30px;
		padding-left:150px;
	}
	
	.seihin_tsuyomi_n02{
		padding-top:30px;
		padding-left:80px;
		padding-right:80px;
	}
	
	.seihin_tsuyomi_n03{
		padding-top:30px;
		padding-right:150px;
	}
	
	.pc_dake_miseru{
		display:none;
	}
	
	.mb_dake_miseru{
		display:block;
	}
	
	/*トップの地図を隠す*/
	.top_chizu_pc{
		display:none;
	}

}

/*599px以下*/
@media (max-width: 599px){
	
	.mobile_main_visual{/*サイズを明示的に変更*/
		/*width:100vw;*/
		height:calc(100vw / 1.9);
	}
	
	.max-img {
		margin-top:-45px;
		margin-left: -20px;
		margin-right: -20px;
		margin-bottom:200px;
    }
	
	
	.change-topmainvisual_backpics_mb{
		height:calc(0.15625 * 100vw); /*現在のビューポイントを出しつつ、スライドショーの画像比率(300/1920=0.15625)で計算する*/
	}
	
	.column_chosei_no1{
		margin-top:60px;
		padding-left:40px;
		padding-right:40px;
		margin-bottom:120px;
	}
	
	.column_chosei_no2{
		padding-left:40px;
		padding-right:40px;
		margin-bottom:120px;
	}
	
	.column_chosei_no3{
		padding-left:40px;
		padding-right:40px;
		margin-bottom:120px;
	}
	
	
	/*製品の強みくん*/
	.seihin_tsuyomi_n01{
		padding-left:50px;
		padding-right:50px;
	}
	
	.seihin_tsuyomi_n02{
		padding-left:50px;
		padding-right:50px;
	}
	
	.seihin_tsuyomi_n03{
		padding-left:50px;
		padding-right:50px;
	}
	
	.pc_dake_miseru{
		display:none;
	}
	
	.mb_dake_miseru{
		display:block;
	}
	
}


/*1024以上*/
@media screen and (min-width: 1024px){

	/*お知らせの囲み枠　ここから*/
	.oshirase_kakomi_oowaku{
		margin-top:-20px;
		position: relative;
		z-index: 998;
		margin-bottom:50px;
	}

	.oshirase_kakomi{
		position: relative;
		z-index: 999;
		margin: 0 auto; /*中央に寄せる*/
		padding-top:20px;
		padding-left:10px;
		padding-right:10px;
		border:solid 9px #E2EDE6;
		background:white;
		width:900px;
		margin-bottom:20px; /*インボイスのお知らせボタンのために*/
	}

	.oshirase_migi{
		padding-top:20px;
		padding-left:20px;
	}
	
	
	.oshirase_pc_title{
		display:inline;
	}
	
	.oshirase_mb_title{
		display:none;
	}
	/*お知らせの囲み枠　ここまで*/
	
	
	/*TOPの会社情報の枠*/
	.top_kaisya_oowaku{
		position: relative;
	}

	.top_kaisya_waku{
		width:80%;
		position: relative;
		margin: 0 auto; /*中央に寄せる*/
	}

}

/*1024以下*/
@media screen and (max-width: 1024px){
	/*お知らせの囲み枠　ここから*/
	.oshirase_kakomi_oowaku{
		margin-top:40px;
		position: relative;
		z-index: 998;
		margin-bottom:30px;
	}
	.oshirase_kakomi{
		position: relative;
		z-index: 999;
		margin: 0 auto; /*中央に寄せる*/
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		border:solid 9px #E2EDE6;
		background:white;
		width:80%;
		font-size:80%;
		line-height:140%;
		margin-bottom:20px;/*インボイスお知らせのために*/
	}
	.oshirase_migi{
		padding-top:0px;
		padding-left:10px;
		padding-right:10px;
	}
	.oshirase_pc_title{
		display:none;
	}
	
	.oshirase_mb_title{
		display:inline;
	}
	/*お知らせの囲み枠　ここまで*/
}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	/*ビューポイントで住所の文字の大きさを指定*/
	.vw_fonts{
		font-size: 3.8vw;
	}
	
}