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

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

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

/*834px以下*/
@media screen and (max-width: 834px) {
.page-body {padding: 0 0px;}
.page .content .main {
  padding-left: 0px;
  padding-right: 0px;
}
}

/*782px以下*/
@media screen and (max-width: 782px) {
}

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

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#e0ffff;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff0000;  /* レッド */
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}


/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
    display: block;
    padding: 1em 0;
    margin-top: 30px;
    width: 100%;
    background: #ff9393;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px;
    border: none;

    /* アニメーション */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/*送信ボタンマウスホバー時*/
#formbtn:hover{
    background: #ff2626;
    color: #ffffff;
    transform: translateY(-2px); /* 少し浮き上がる */
    cursor: pointer;             /* 手のマークを表示 */
}

/*クリック時の演出*/
#formbtn:active{
    transform: translateY(0);
}

/*コンタクトフォーム*/
.wpcf7 input[name="your-name"] { /* 名前入力欄 */
	width: 30%;
}
.wpcf7 input[name="your-email"] { /* メール入力欄 */
	width: 50%;
}

/* ヘッダーメニュー */


#navi .navi-in > ul > li{
  border-bottom: 1px solid #eee;
}

#navi .navi-in > ul > li{
  border-left: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #eee;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 


/* アピールエリア本文余白 */
.page-id-74 .main {
    padding-top: 0;
}

/*全固定ページのメインカラムパディング設定*/
.page .content .main {
    padding-left: 35px;
	padding-right: 35px;
}

/* 見出しH1の設定 */
h1 {
  position: relative;
  background: #ffb6c1;
  padding: 3px 5px 3px 25px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

h1:before {
  font-family: "Font Awesome 6 Free";
  content: "\f553";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0.1em;
  color: white;
  background: #dc143c;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
  border-bottom: solid 2px #4967b4;
}

/* 見出しH2の設定 */
/*下線のみの吹き出し*/
h2 {
  --baloon-color: #333; /* 下線・矢印色 */
  position: relative; /* 基準要素 */
  padding: .5em 0; /* 余白 */
  border-bottom: 3px solid var(--baloon-color); /* 下線 */
  background: transparent; /* 背景なし */
  color: var(--baloon-color); /* 文字色 */
}

/* 吹き出し（共通） */
h2::before,
h2::after {
  content: ''; /* 擬似要素 */
  position: absolute; /* 絶対配置 */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形 */
}

/* 枠三角 */
h2::before {
  bottom: -12px; /* 下に配置 */
  left: 1.5em; /* 位置 */
  width: 22px; /* 幅 */
  height: 11px; /* 高さ */
  background: var(--baloon-color); /* 枠色 */
}

/* 白抜き三角 */
h2::after {
  bottom: -8px; /* 内側位置 */
  left: calc(1.5em + 2px); /* 枠分オフセット */
  width: 18px; /* 幅 */
  height: 9px; /* 高さ */
  background: #fff; /* 白抜き */
}

/* 見出しH3の設定 */
/*cocoonの見出し消す*/
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

main h3.wp-block-heading {
    color: #000;/*文字色（黒）*/
    display: block;
    position: relative;
    padding: 6px 30px;/*文字回りの余白（上下 左右）*/
}
main h3.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*矢印の太さ*/
    font-size: 30px;/*矢印のサイズ*/
    color: #000;/*矢印の色（黒）*/
    left: 0;
    top: 0;
    content:"\f054";
    position: absolute;
}


/*H4見出し*/
/*cocoonの見出し消す*/
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

main h4.wp-block-heading {
    color: #000;/*文字色（黒）*/

    display: block;
    position: relative;
    padding: 10px 35px;/*文字回りの余白（上下 左右）*/
}
main h4.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*チェックマークの太さ*/
    font-size: 30px;/*チェックマーク部のサイズ*/
    color: #8b0000;/*チェックマーク部の色（黒）*/
    left: 0;
    top: 0;
    content:"\f058";
    position: absolute;
}


/* モバイルフッターボタンの色 */
.mobile-menu-buttons,
.mobile-menu-buttons .menu-button > a {
    background-color: #ffb600;
    color: #fff;
}

#sidebar-menu-content {
    color: #333;
}

/* 見出し中央揃え */


/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}




/* 会員専用フォームカスタマイズ */
.member-form input[type="text"],
.member-form input[type="email"],
.member-form textarea {
    background-color: #f9f9f9; /* 背景色を薄いグレーに */
    border: 1px solid #ccc;    /* 枠線を細く */
    border-radius: 4px;        /* 角を少し丸める */
}

/* 送信ボタンのカスタマイズ */
.member-form input[type="submit"] {
    background-color: #87cefa; /* 背景色を青に */
    color: #ffffff;            /* 文字色を白に */
    font-weight: bold;         /* 太字 */
    border: none;
    border-radius: 6px;
    padding: 20px 30px;
}


/* 必須フィールドのラベルスタイル */
.member-form .CF7_req {
background-color: #ff0000; /* レッド */
color: #ffffff;
padding: 2px 5px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}

.member-form th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#e0ffff;
 border:solid 1px #d7d7d7;
}

.member-form td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}

/*送信ボタンマウスホバー時*/
.member-form input[type="submit"] {
    background-color: #87cefa;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    padding: 20px 30px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.member-form input[type="submit"]:hover {
    background-color: #0066cc;
    transform: translateY(-2px);
    cursor: pointer;
}

/*クリック時の演出*/
.member-form input[type="submit"]:active{
    transform: translateY(0);
}
/* 会員専用フォームカスタマイズ ここまで*/



/* 問い合わせフォームカスタマイズ */
.Inquiry-form input[type="text"],
.Inquiry-form input[type="email"],
.Inquiry-form textarea {
    background-color: #f9f9f9; /* 背景色を薄いグレーに */
    border: 1px solid #ccc;    /* 枠線を細く */
    border-radius: 4px;        /* 角を少し丸める */
}

/* 送信ボタンのカスタマイズ */
.Inquiry-form input[type="submit"] {
    background-color: #87cefa; /* 背景色を青に */
    color: #ffffff;            /* 文字色を白に */
    font-weight: bold;         /* 太字 */
    border: none;
    border-radius: 6px;
    padding: 20px 30px;
}


/* 必須フィールドのラベルスタイル */
.Inquiry-form .CF7_req2 {
background-color: #ff0000; /* レッド */
color: #ffffff;
padding: 2px 5px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}

.Inquiry-form th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#e0ffff;
 border:solid 1px #d7d7d7;
}

.Inquiry-form td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}

/*送信ボタンマウスホバー時*/
.Inquiry-form input[type="submit"] {
    background-color: #87cefa;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    padding: 20px 30px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.Inquiry-form input[type="submit"]:hover {
    background-color: #0066cc;
    transform: translateY(-2px);
    cursor: pointer;
}

/*クリック時の演出*/
.Inquiry-form input[type="submit"]:active{
    transform: translateY(0);
}