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

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

:root {
--webgsss-kon-color: #222439;
--webgsss-aka-color: #9c091b;
}


/************************************
** 画像オンマウス色変更
************************************/
a img:hover{
    opacity: 0.5;
}


/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** 見出し
************************************/
.article h2{
margin: 3em 0 1em 0;
  padding: 0.5em;
  color: #fff;
  background-color: var(--webgsss-kon-color);
  border-left: solid 1em var(--webgsss-aka-color);
}
@media screen and (max-width:768px){
	.article h2{

	}
}

/************************************
** フォームとテーブルのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
form u.kotei {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}

/* 禁止マーク */
input:disabled {
    cursor: not-allowed;
}
label.disabled {
    cursor: not-allowed;color:#999;
}
/* 郵便番号 */
input[name="your_name"]{width:30%;}
input[name="your_name_furigana"]{width:30%;}
input[name="your_denwa"]{width:20%;}
input[name="your_email"]{width:40%;}
input[name="zip"]{width:20%;}
input[name="pref"]{width:30%;}
input[name="city"]{width:30%;}
input[name="addr"]{width:30%;}
input[name="addr2"]{width:100%;}

/* フォームオブジェクト */
input[type="submit"] {
    display:block;
    background-color: #bf0000;
    color:#fff;
    font-weight:bold;
    text-align:center;
    margin: 0 auto;
    width: 80%;
	font-size:1.5em;
}
input {border: 1px solid #808080 !important;margin:4px 0;}
textarea {border: 1px solid #808080 !important;margin:2px 0;}
input:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
textarea:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
input:focus[type="submit"] {background-color: #0000ff;}


/************************************
** テーブルのデザイン
************************************/
.table{
	background-color: #fff;
	font-size:0.9em;
	border-collapse: collapse;
}
.table .tr{
  display: table;
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 8px 13px;
  vertical-align:top;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}

/************************************
** アニメーション 文字アンダーライン
************************************/
/* アニメーション前のスタイル */
.marker-under {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションの場合は別々の色 */
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
  transition: all 2s ease-in-out; /* マーカーを引く速度を調整 */
  font-weight: bold; /* ついでに太字にしたい場合 */
}
/* アニメーション発火時 */
.marker-under.inview {
  background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
}


/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** あかねちゃん作成 サイドバーメニュー佐々木先生
************************************/
.sidebar h3 {
  background-color: #222439;
  font-size:0.97em;
  color: #FFFFFF;
  text-align: center;
  padding: 5px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  line-height: 2em;
  padding: 0;
  margin:0;
  font-weight:normal;
}
.sidebar li a {
  text-decoration: none;
  color:#333333;
  font-size:0.8em;
}
.sidebar li a:hover {
  color:#7c061e;
}
.sidebar .widget {
  border-top: none;
  font-size:0.97em;
  padding-top: 8px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 2em;
}
.sidebar .widget ul {
  list-style: none;
  padding: 0;
}
.sidebar .widget li {
  padding:0;
  margin:0;
  border-bottom: 1px solid #D9D9D9;
  padding-right: 0px;
  line-height: 2em;
  border-right: 1px solid #D9D9D9;
  border-left: 1px solid #D9D9D9;border-bottom: 1px solid #D9D9D9
}
.sidebar .widget li::before{
  font-family: FontAwesome;
  content: "\f01d";
  font-weight: 100;
  padding-right : 6px;
  padding-left : 6px;
  color: #7c061e;
}
 .widget_nav_menu ul li a{
  display:inline;
  text-decoration: none;
  color:#333333;
  font-size:0.8em;
 }
 .widget_nav_menu ul li a:hover {
  color:#7c061e;
  background-color: transparent;
 }

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

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

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