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

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

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

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

/************************************
**追加CSS（ここから）
************************************/
.boxb {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #0e7ac4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.boxb .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #0e7ac4; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.boxb p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}
.boxb ul {
  position: relative;
}
.boxb ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}
.boxb ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
.boxr {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #c40e4b;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.boxr .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #c40e4b; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.boxr p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}
.boxr ul {
  position: relative;
}
.boxr ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}
.boxr ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
/*テーブルをレスポンシブ化する */ 
.agn-left {
  text-align: left;/*thはセンター揃えなので左揃えにしたいthセルに適用*/
}
.pc-tablehead th{
  white-space: nowrap;/*セル内で改行しない*/
}
/*スマホ表示用*/
  @media screen and (max-width: 480px) {
    .pc-tablehead{
      display: none;/*【1】PCで1行目に表示されているタイトルを非表示に*/
    }
    .vertical-table th{
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの一列目を縦積みにする*/
      width: 100%;
    }
    .vertical-table td {
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの2列目以降も縦積みにする*/
      width: 100%;
    }
      .last td:last-child {
        border-bottom: solid 1px #8a9992;/*【4】表の一番下になるセルだけ下線を引く*/
     }
    .vertical-table td:before {
      content: attr(aria-label);/*【5】aria-labelで指定した値を表示させる*/
      display: inline-block;
      font-weight: bold;
      float: left;
      text-align: left;
      padding-right: 1em;
      white-space: nowrap;
    }
    .label br {
      display: none;/*【6】PCでセル内改行した箇所を改行させない*/
    }
/*スマホ表示用ここまで*/
}
/*テーブルをレスポンシブ化するここまで */

/* アイキャッチを中央寄せにする */
.eye-catch-wrap{
  text-align: center;
}

/*アイキャッチのキャプションを表示に */
.eye-catch-caption {
	top: 35%;
	text-align: center;
	background: rgba(0,0,0,.3);
	font-size: 15px;
	color: #fff;
	height: 80px;
	font-weight: bold;
}

/* 横スクロール */
.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex; 
  list-style: none;}

/* 画面幅が768px以上の場合、横スクロールを解除 */
@media screen and (min-width: 768px) {
  .horizontal_scroll {
    overflow-x: inherit;
    padding: 0 8px 6px; } }

.horizontal_scroll > li {
  width: 100%;
  min-width: 140px; }

@media screen and (min-width: 768px) {
  .horizontal_scroll > li {
    min-width: inherit; } }

.horizontal_scroll > li:not(:last-child) {
  margin-right: 5px; }

.horizontal_scroll > li:last-child {
  padding-right: 5px; }

@media screen and (min-width: 768px) {
  .horizontal_scroll > li:last-child {
    padding-right: 0; } }

.horizontal_scroll img {
  vertical-align: bottom; }

/* タイトル */
.slider_ttl {
  color: #333;
  text-align: inherit;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: inherit;
  margin: 0 0 20px 0;
  background-color: #e5e5e5;
  text-indent: 8px;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box; }

/* 価格 */
.price {
  color: #bf0000;
  line-height: 1.65;
  font-size: 15px;
  margin-top: 4px;
  padding-right: .5em; }

.price small {
  font-size: .45em;
  color: #000;
  margin-right: .5em; 
  margin-left: .10em; }

/* ボタンのマージンの設定変更 */
.btn-l > a {
  padding: 14px 20px;
  font-size: 18px;
  margin: ;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

/*特定ページのシェア・フォローボタン非表示*/
.page-id-512 .sns-share,
.page-id-646 .sns-share,
.page-id-652 .sns-share,
.page-id-680 .sns-share,
.page-id-512 .sns-follow,
.page-id-646 .sns-follow,
.page-id-652 .sns-follow,
.page-id-680 .sns-follow
{
    display: none;
}

/************************************
**追加CSS（ここまで）
************************************/