@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*リンクのアンダーラインを非表示*/
a {
  text-decoration: none;
}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}
/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
padding: 0;
max-width: 300px;
}
.footer-bottom-logo img {
height: auto;
}

/* Cocoon skin 固有の背景画像削除 */
body {
	background:#fff url("") no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
body::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("") center no-repeat;
	background-size: auto;
	background-size: cover;
}
/* ヘッダー背景半透明化 */
#header-container {
	background-color: rgba(255, 255, 255, .60);
}
/* メインカラム・サイドバー背景半透明化 */
#main ,
#sidebar {
	background-color: rgba(255, 255, 255, .90);
}
/* キャッチフレーズ */
.tagline {
	background-color: rgba(15, 19, 80, .75);
	border-top:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	font-family:'Lobster', 'Kosugi Maru', sans-serif;
	font-size:14px;
	color: #fff;
}
/************************************
** コンテンツ下部　カスタマイズ
************************************/
/* コンテンツ下部ウィジェット背景半透明化 */
.container .widget {
	background-color: rgba(255, 255, 255, .75);
}

/************************************
** グローバルナビ　カスタマイズ
************************************/
/* ナビゲーションメニュー背景半透明化 */
#header-container .navi {
	background-color: rgba(15, 19, 80, .75);
	border-top:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
}
#header-container .navi a:hover{
	opacity: 0.8 ;
	background-color: rgba(255, 0, 0, .75);
	border-bottom:2px solid #fff;
	color: #0F1350;
}
#navi .navi-in a {
	color: #fff;
}
#navi .navi-in > .menu-header .sub-menu{
	background-color: rgba(15, 19, 80, .75);
}
#navi .navi-in > ul .sub-menu a:hover{
	opacity: 0.8 ;
	background-color: rgba(255, 0, 0, .75);
	border-bottom:2px solid #fff;
	color: #0F1350;
}
.navi-in a::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0;
  transition: all 0.3s ease-out;
  border-bottom: 2px solid currentColor;
  display: block;
}

.navi-in a:hover::after {
  width: 100%;
  border-bottom: 2px solid currentColor;
}

/************************************
** キャプションボックス　カスタマイズ
************************************/
.caption-box {
  border: 2px solid #eee;
  border-radius: 4px;
}
.caption-box.has-border-color .box-label {
  color: #fff;
}
.caption-box-label {
  padding: 0.2em 0.8em;
  background-color: #eee;
}
.caption-box-content {
  padding: 0.4em 0.8em;
}
.cb-darkblue.caption-box {
  border-color: rgba(15, 19, 80, .90);
}
.cb-darkblue .caption-box-label {
  background-color: rgba(15, 19, 80, .90);
  color: #fff;
}
/************************************
** ラベルボックス　カスタマイズ
************************************/
.lb-darkblue .label-box-content {
  border-color: rgba(15, 19, 80, .90);
}
/************************************
** サイドバーの見出し　カスタマイズ
************************************/
.sidebar h3 {
  color: #0F1350;
  background:none;
  position: relative;
  padding: 10px 0 2px 28px;
  border-bottom: 6px double #0F1350;
}
.sidebar h3:before, .sidebar h3:after {
  content: "";
  position: absolute;
  margin: auto;
}
.sidebar h3:before {
  width: 12px;
  height: 12px;
  top: 0;
  left: 14px;
  background: #0F1350;
  transform: rotate(50deg);
}
.sidebar h3:after {
  width: 8px;
  height: 8px;
  top: 18px;
  left: 6px;
  background: #FF0000;
  transform: rotate(20deg);
}

/************************************
** モバイルメニュー　カスタマイズ
************************************/
/* 文字色一括変更 */
/*アイコン色*/
.custom-menu-icon.menu-icon,
.navi-menu-icon.menu-icon,
.share-menu-icon.menu-icon,
.home-menu-icon.menu-icon,
.follow-menu-icon.menu-icon,
.search-menu-icon.menu-icon,
.toc-menu-icon.menu-icon,
.top-menu-icon.menu-icon,
.prev-menu-icon.menu-icon,
.next-menu-icon.menu-icon,
.comments-menu-icon.menu-icon,
.sidebar-menu-icon.menu-icon{
	color: #FFF;
}

/*キャプション（文字）色*/
.custom-menu-caption.menu-caption,
.navi-menu-caption.menu-caption,
.share-menu-caption.menu-caption,
.home-menu-caption.menu-caption,
.follow-menu-caption.menu-caption,
.search-menu-caption.menu-caption,
.toc-menu-caption.menu-caption,
.top-menu-caption.menu-caption,
.prev-menu-caption.menu-caption,
.next-menu-caption.menu-caption,
.comments-menu-caption.menu-caption,
.sidebar-menu-caption.menu-caption{
	color: #FFF;
}
/* 背景色を変更 */
.mobile-menu-buttons {
	color: #ffffff;
	background: #0F1350;
	border-top:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
}
/* スライドメニューをカスタマイズ */
.navi-menu-content {
	background-color: rgba(30, 124, 209, .5);
	transform: translatez(101%);
}
.menu-drawer a{
	font-size: 1.1em;
	color: #fff;
	height: 2.5em; /*行の高さ*/
}
.menu-drawer a:hover {
	color: rgba(255, 255, 255, .7);
	background-color: rgba(30, 124, 209, 0);
}

/************************************
** 見出し　カスタマイズ
************************************/
.article h2 {
	background-color: transparent;
	padding: 0;
	font-size: 1.6rem;
	text-indent: .5em;
	border-bottom: solid 2px #ED1A3D;
}
.article h2::after {
	margin-top: .3em;
	content: "";
	display: block;
	height: 8px;
	position: relative;
	background-image: linear-gradient( 165deg, #4C83FF 0%, #0F1350 20%);
}

.article h3 {
	border-left: 8px solid #0F1350;
	border-right: none;
	border-top: none;
	border-bottom: none;
	font-size: 1.4rem;
	padding: .4em 1em;
	background-color: #ddd;
	background: linear-gradient(to right,#4C83FF 50%,#fff 100%);
}
.article h4 {
	font-size: 1.3rem;
	border-top: none;
	border-bottom: none;
}
.article h4:before {
	font-family: 'FontAwesome';
	content: "\f111";
	padding-right: .4em;
	color: #0F1350;
}
.article h5 {
	font-size: 1.2rem;
	border-bottom: none;
}
.article h5:before {
	font-family: 'FontAwesome';
	content: "\f061";
	padding-right: .4em;
	color: #0F1350;
}
.article h6 {
	font-size: 1.1rem;
	border-bottom: none;
}
.article h6:before {
	font-family: 'FontAwesome';
	content: "\f178";
	padding-right: .4em;
	color: #0F1350;
}

/************************************
** Font WESOME カスタマイズ
************************************/
.fab-truck::before {
	content: '\f4df';
}

/************************************
** テーブル カスタマイズ
************************************/
table {
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border: 3px solid rgba(15, 19, 80, .90);
font-size: 12px;
color:#0F1350;
}
table th {
padding: 10px;
font-weight: normal;
border-top: 2px solid #fff !important;
border-right: 1px solid #0F1350;
border-bottom: 1px solid #0F1350;
background: rgba(15, 19, 80, .90);
color:#fff;
font-size: 14px;
}
table td {
padding: 10px;
font-weight: bold;
border-top: 2px solid #0F1350 !important;
border-right: 1px solid #0F1350;
border-bottom: 2px solid #0F1350 !important;
font-size: 14px;
}
table tr:nth-child(even) {
background: #eee;
color:#0F1350;
}

/************************************
** ボタン色変更
************************************/
.btn-indigo {
	background-color: rgba(15, 19, 80, .90);
	color: silver;
}

/************************************
** MW WP Form カスタマイズ
************************************/
.form_tel {
	width: 5em!important;
}
::placeholder {
	font-size: 0.8rem;
}

/************************************
** コンテンツ下　表示切替
************************************/
.pc-contact {
	display: block !important; 
}
.sp-contact {
	display: none !important; 
}

/************************************
** フッターメニュー
************************************/
.navi-footer-in > .menu-footer {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: center;
  margin: 0;
}
.navi-footer-in > .menu-footer li {
  width: 120px;
  border-left: 1px solid #0F1350;
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 1px solid #0F1350;
}
.navi-footer-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
}
.navi-footer-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: #333;
}

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

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*モバイル用背景画像を表示*/
body {
	background:#fff url("") no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
body::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("/wp-content/uploads/mobile-background.jpg") center no-repeat;
	background-size: auto;
	background-size: cover;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
/*コンテンツ下　表示切替*/
.pc-contact {
	display: none !important; 
}
.sp-contact {
	display: block !important; 
}
}