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

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

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


/*ロゴ 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%;
	}
}
/*ロゴ iPad・スマホ系対策（ロゴ上にちょっと空白）ここまで*/
	

/*タップ時にハイライトなし*/
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

/*固定ページのタイトルを非表示*/
.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;
}

/*[キービジュアル用]セクション区切りの色を指定*/
.change-topmainvisual{
	background: #FFFFFF;/*画像の色に合わせる(白色)*/
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
	
	/*上下余白*/
	margin-top:-70px;
	
	padding-bottom:0px;
	
}

/*[キービジュアル用]セクション区切り(トップの石3つ並んでるやつ)の色を指定*/
.change-topmainvisual_backpics{
	background: #FFFFFF;/*画像の色に合わせる(白色)*/
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
    padding-right: calc(50vw - 49%);
    padding-left: calc(50vw - 49%);
}


/*[キービジュアル用]セクション区切りの「幅のみ」を指定（画像を後で指定するため）*/
.change-topmainvisual_no_top{
	background: #0f6e37;/*画像の色に合わせる(緑色)*/
    margin-right: calc(49% - 50vw);
    margin-left: calc(49% - 50vw);
	padding-right: calc(50vw - 29%);
    padding-left: calc(50vw - 29%);
	
	/*上下余白*/
	margin-top:-50px;
}

/*モバイル用のキービジュアル後ろの色*/
.mobile_main_visual{
	background:#FFFFFF;
}

/*TOPキービジュアルくんの背景画像*/
.ctb_top{
	background-image:url("https://okanosekizai.jp/wp-content/uploads/top_keyvisual02_ishi.jpg");
	background-repeat: no-repeat;
	background-position: top;
	background-size: auto 100%;
}

/*======== 見出し装飾各種ここから ========*/

/*見出し初期化...せずに、そのまま利用*/
/*.article h2{
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)　特殊バージョン*/
.article h1.top_h2 {
	font-size:1.5em;
  position: relative;
  padding-top:60px;
  padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;
  text-align: center;
	background-color: transparent; /*背景の色に合わせるため透明を指定*/
}

.article h1.top_h2:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #006934;
}


/*h2見出しの設定（元のcocoon見出しをそのまま利用）*/
.article h2 {
  padding-left: 55px;
  position: relative;
}
.article h2:before {
  content: "";
  position: absolute;
  border-right: 20px solid transparent;
  border-top: 28.6025px solid #b2ce54;
  border-left: 20px solid transparent;
  left: 10px;
}

.article h2:after{
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 14.6025px solid #829e24;
  border-left: 10px solid transparent;
  left: 15px;
  top: 30px;
}

/*======== 見出し装飾各種ここまで ========*/

/*お問い合わせ（電話）の画像の位置*/
.mb_tel_02_up{
	display: inline-block; /*inline-block要素、もしくはblock要素にする*/
	margin-top:-30px;
}



/**/
/*========= divで作るボタンちゃん（ここから） ==========*/
/*その他主な共通部分は省略*/

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

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

a.btn--orange_usui {
  color: #fff;
  background-color: #d08732;
}

a.btn--orange_usui:hover {
  color: #fff;
  background:#f56500;
}


a.btn--blue {
  color: #fff;
  background-color: #0074eb;
}

a.btn--blue:hover {
  color: #fff;
  background: #3b8cdf;
}

a.btn--blue_usui {
  color: #fff;
  background-color: #7aa6ef;
}

a.btn--blue_usui:hover {
  color: #fff;
  background:#93b4eb;
}

a.btn-c {
  font-size: 1.5rem;
  position: relative;
  width:300px;
  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
  border-radius:40px;
}

a.btn-c_usui {
  font-size: 1.1rem;
  position: relative;
  width:200px;
  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
  border-radius:40px;
}

a.btn-d_usui {
  font-size: 0.8rem;
  position: relative;
  width:160px;
  /*padding: 1.5rem 2.2rem 1.5rem 2rem;*/
  border-radius:40px;
}


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

.btn_centers{
	text-align:center;
}

.btn_centers02{
	text-align:center;
	margin-top:-10px;
	margin-bottom:15px;
}


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

/*834px以上*/
@media screen and (min-width: 835px){
	
	/*会社概要用*/
	.table_company {
	  border-collapse: collapse;
	}
	.table_company td, table th {
	  padding: 20px;
	}
	.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;
	}
	
	
}

/*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;
	}
	
}

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

/*モバイルメニューを「右から左」に受け流す（激古）*/
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
/*モバイルメニューを「右から左」に受け流す（激古）ここまで*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1024px以上(パソコン)*/
@media screen and (min-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	.change-topmainvisual{
		/*height:calc(100vw / 3.1);/*高さ調節*/
		height:349px;
	}
	
	.change-topmainvisual_backpics{
		height:calc(46vw);
	}
	
	
	.mobile_main_visual{
		display:none;
	}
	
	.mobile_main_visual02{
		display:none;
	}
	
	.mobile_main_visual03{
		display:none;
	}
	
	
	
	.pc_main_visual{/*サイズの明示*/
		
	}
	
	
	.max-img_pc {
		margin-top:-40px;
		margin-left: -150px;
		margin-right: -150px;

    }
	
	.max-img_pc_column {
		margin-top:-40px;
    }
	
	
}


/*フッターのロゴサイズがおかしいよなぁ！？*/
.footer-bottom-logo img {
	height: auto;
}




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


/*835～1023pxのときだけ（iPad専用）*/
@media screen and (min-width: 835px) and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	/*画像がでかすぎなので、ちょっと小さくする*/
	/*.max-img_pc > img{
		width:80vw;
	}*/
	
	
	
	.mobile_main_visual{
		display:none;
	}
	
	.mobile_main_visual02{
		display:none;
	}
	
	.mobile_main_visual03{
		display:none;
	}
	
	.pc_main_visual{/*サイズの明示*/
		
	}
	
	.max-img_pc {
		margin-top:-40px;
		margin-left: -50px;
		margin-right: -50px;

    }
	
	.max-img_pc_column {
		margin-top:-40px;
    }
	
}



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

	
	.pc_main_visual{
		display:none;
	}
	
	.mobile_main_visual{/*サイズを明示的に変更*/
		/*width:100vw;*/
		height:calc(100vw / 1.19);
	}
	
	.mobile_main_visual02{
		height:calc(100vw / 2);
	}
	
	.mobile_main_visual03{
		margin-bottom:-50px;
	}
	
	.max-img {
		margin-top:-60px;
		margin-left: -29px;
		margin-right: -29px;
    }
	
	
	.max-img02 {
		margin-top:-120px;
    }
	
	.max-img_column {
		margin-top: -190px;
		margin-left: -29px;
		margin-right: -29px;
		margin-bottom:100px;
    }
	
	
}

/*599px以下*/
@media (max-width: 599px){
	
	.mobile_main_visual{/*サイズを明示的に変更*/
		/*width:100vw;*/
		height:calc(100vw / 1.19);
	}
	
	.mobile_main_visual02{
		height:calc(100vw / 2);
	}
	
	.max-img {
		margin-top:-40px;
		margin-left: -20px;
		margin-right: -20px;
    }
	
	.max-img02 {
		margin-top:-120px;
    }
	
	/*※class「max-img」は、画像をｐタグで囲ったときにつけたクラスです。*/
	/*参考：https://wp-cocoon.com/community/customs/%E7%94%BB%E5%83%8F%E3%82%92%E6%8A%95%E7%A8%BF%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AE%E5%B9%85%E3%81%84%E3%81%A3%E3%81%B1%E3%81%84%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84%E3%81%A7/*/
	
	
}

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