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

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

/* tailwind上書き */

.container {
  max-width: 100% !important;
}

/*cocoon打消し */

.home .content {
  margin-top: 0;
}

.home .main {
  padding: 0;
  border: none;
}

.home .content-in {
  width: 100%;
}

.logo-menu-button {
  height: 56px;
}

@media screen and (max-width: 834px) {
  .home main.main {
    padding: 0;
    margin: 0;
  }
}

#navi .navi-in > ul li {
  width: auto;
  padding: 0 12px;
}

#navi .navi-in > ul li .item-label::after {
  margin-left: 6px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  color: #5b9aff;
}

/* footer */

.footer {
  margin-top: 0;
}

.footer-bottom {
  margin-top: 0;
}

.copyright {
  margin-top: 0;
  font-size: 14px;
}

/* form */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  background-color: #f0f0f0;
  border: none !important;
  border-radius: 0 !important;
  font-size: 16px;
  padding: 12px 24px !important;
}

.wpcf7 input[type="submit"] {
  background-color: #1a69c6;
  border-radius: 10px;
  color: #fff;
}

.wpcf7 input[type="submit"]:disabled {
  opacity: 0.5;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline-color: #1c4388;
}

.wpcf7 label {
  color: #0e2c62;
  margin-bottom: 27px;
  display: block;
}

.wpcf7 label span:first-child {
  margin-bottom: 4px;
  display: inline-block;
}

.wpcf7 label.require span:first-child::after {
  content: "※";
  color: red;
  margin-left: 4px;
}

/* モバイルヘッダーメニューボタン */

.mobile-header-menu-buttons {
  flex-direction: row-reverse;
}

.mobile-header-menu-buttons .search-menu-button {
  visibility: hidden;
}

label.menu-button-in {
  color: white;
}

.navi-menu-button {
  background-color: #003f7f;
}

.navi-menu-content {
  right: 0;
  left: auto;
  transform: translateX(105%);
}

/* モバイルメニューボタン */
.menu-drawer li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.menu-drawer li a::after {
  margin-left: 6px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  color: #5b9aff;
  position: absolute;
  right: 33px;
}

/* 固定バナー */
.bottom-fixed-button {
  letter-spacing: 0.05em;
  position: fixed;
  font-size: 14px;
  right: 0;
  height: 190px;
  padding: 0 12px;
  text-align: center;
  color: #fff;
  z-index: 1000;
  writing-mode: vertical-rl;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
}

.bottom-fixed-button:hover {
  opacity: 0.8;
  color: #fff;
}

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

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

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