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

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


/* 画像ブロックは以下で画面幅に */
.cstm-blk-fullwide {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

/*参考 画像ブロックの高さ調整 */
.cstm-blk-fullwide.cstm-blk-img-height img{
  height: 50vmin;
}

/* フッター背景色カスタム（参照：子テーマのCSSでカスタマイズしたい場合） */
.skin-grayish .footer {
    background-color: #465362;
    overflow-x: clip;
    margin-top: 0;
}

/* ヘッダー・フッター文字色カスタム（参照：子テーマのCSSでカスタマイズしたい場合） */
.skin-grayish :where(.navi-in, .navi-footer-in) a {
    color: #ffffff;
    font-size: clamp(14px, 1.37vw, 16px);
    min-height: 0vw;
}

/* パンくずリストアイコンまとめて非表示(Font Awesome 5)*/
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file
{ display: none; }

/* FAQの背景色 */
.is-style-accordion > .faq > .faq-question {
    padding: 0.5em;
    margin: 0;
    cursor: pointer;
    position: relative;
    background-color: #ffffff;
    border-color: var(--cocoon-three-d-border-colors);
}

/* コンテンツのボトムライン非表示 */
.skin-grayish .content .main .entry-content {
    border-bottom: solid 0px var(--skin-grayish-site-main-hover);
}

/* 会社概要　table01 */
#table01 tr {
  background-color: #ffffff;
}

#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
	text-align: left;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}

table th {
    background-color: #fff;
}

/*「詳しくはこちら」ボタン*/
a.btn_24 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 320px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: regular;
	border-radius: 4px;
	border: 1px solid #ffffff; /* 外枠のカラー */
	color: #ffffff;/* 通常時の文字色 */
	position: relative;
 	overflow: hidden;
 	z-index: 1;
	transition: all 0.2s ease-in;
}
a.btn_24:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}
 
a.btn_24:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #011936; /* 下から色が変わる初めのカラー */
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}
 
a.btn_24:hover {
 color: #ffffff;
 border: 1px solid #011936;/* ホバー時の外枠カラー */
}
 
a.btn_24:hover:before {
 top: -35%;
 background-color: #011936;/* 下から色が変わる後半のオーラカラー */
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
 
a.btn_24:hover:after {
 top: -45%;
 background-color: #011936;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/*トップページの「詳しくはこちら」ボタン*/
a.btn_23 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 330px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: regular;
	border: 1px solid #011936;
	color: #011936;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
}
a.btn_23::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #011936;
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}
a.btn_23:hover::before {
	transform: translateX(0);
}
a.btn_23:hover {
	color: #ffffff;
}

/*事業案内の「○○はこちら」ボタン（3カラム）*/
a.btn_27 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 330px;
	margin: auto;
	padding: 1rem 4rem;
	color: #fff;
	font-weight: regular;
	background: #011936;
	position: relative;
	transition: 0.3s ease-in-out;
}
a.btn_27:hover {
    background: #fff;
    color: #011936;
}
a.btn_27:before, a.btn_27:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 1px solid transparent;
  width: 0;
  height: 0;
}
a.btn_27:before {
  top: 0;
  left: 0;
}
a.btn_27:after {
  bottom: 0;
  right: 0;
}
a.btn_27:hover:before, a.btn_27:hover:after {
  width: 100%;
  height: 100%;
}
a.btn_27:hover:before {
  border-top-color: #011936;
  border-right-color: #011936;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
a.btn_27:hover:after {
  border-bottom-color: #011936;
  border-left-color: #011936;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}

/*事業案内の「○○はこちら」ボタン*/
a.btn_02 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 330px;
	margin: 0; /* ← これで本文と同じ左揃え */
	padding: 1rem 4rem;
	font-weight: regular;
	border: 1px solid #011936;
	background: #011936;
	color: #fff;
	transition: 0.5s;
}
a.btn_02:hover {
	color: #011936;
	background: #fff;
}


/* 投稿下部の関連記事を非表示 */
.related-entries {
    display: none !important;
}

/* 投稿下部のページ送りナビを非表示 */
.pager-post-navi {
    display: none !important;
	
/* メインビジュアルのロゴ調整 */
.logo-image span, .logo-image a {
    /* display: inline-block; */
    max-width: 10%;
}

/*トップページ以外のヘッダーロゴ*/
.skin-grayish:not(.front-top-page) .header-in .logo-header img {
    width: auto;
    height: 70px;
}
	

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


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

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