@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){
  /*必要ならばここにコードを書く*/
}

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

/*以下は追記箇所*/
/************************************
** 固定ページ、記事のタイトルを中央寄せ
************************************/
.entry-title {
text-align: center;
}

/*ContactForm7のカスタマイズ*/
/* フォーム全体のスタイル */
.wpcf7 {
background-color: #f0f0f0; /* ライトグレー */
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: auto;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
background-color: #007BFF; /* ブルー */
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
}

.wpcf7-form input[type="submit"]:hover {
background-color: #0056b3; /* 濃いブルー */
}

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

/* 例文の色を薄くする */
::placeholder{
  color: #999999;
  opacity: 0.;
}

/*
Chrome, Safari, Edge, Opera 
input::placeholder {
  color: #999999;
  opacity: 0.6;
}

Firefox
input::-moz-placeholder {
  color: #999999;
  opacity: 0.6;
}
*/

/* 以下はフローティングバナーの追加 */
.floating-banner {
  position: fixed;
  top: 50%; /* 縦位置 */
  right: 20px; /* 右端からの位置 */
  transform: translateY(-50%);
  z-index: 20;
}
.floating-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  font-weight: 700; /* 文字太さ */
  background-color: #197A80; /* 背景色 */
  letter-spacing: 0.1em; /* 文字間隔 */
  padding: 1.2em 0.7em; /* 上下左右余白 */
  border-radius: 10px 0 0 10px; /* 角丸 */
  transition: opacity 0.25s;
}
.floating-banner a:hover {
  opacity: 0.7;
}
.floating-banner i::before {
  padding-bottom:3px; /* フォントアイコンの余白調整 */
}

@media screen and (max-width: 600px) {
  .floating-banner {
    display: none; /* スマホで非表示 */
  }
}