@charset "UTF-8";

/*!
Theme Name: 瞬速AIマスター用Cocoon子テーマ
Description: Cocoon専用の子テーマ
Theme URI: https://1w-web.biz
Author: 1w-web
Author URI: https://1w-web.biz
Template:   cocoon-master
Version:    1.1.3
*/
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*Contact Form 7custom*/
/*必須*/
.hissu{
font-size:.7em;
padding:5px;
background:#ff8282;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*フラットな押し込みボタン*/
.nomadBtn4 {
  display: inline-block;
  padding: .5em 2em;
  text-decoration: none !important;
  background: #676767;
  color: #FFF !important;
  border-bottom: solid 3px #323232;
  border-radius: 3px;
  text-decoration: none;
  margin: 15px 0;
}
.nomadBtn4:hover {
  /*ボタンを押したときの動作*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  border-bottom: none;
}
.nomadBtn4.blue{
	background: #55A8DC;
	border-bottom: solid 3px #306DB2;
}
.nomadBtn4.red{
	background: #E07487;
	border-bottom: solid 3px #B12D41;
}
.nomadBtn4.grn{
	background: #5E8B6D;
	border-bottom: solid 3px #426A4F;
}

.nomadBtn4:active {
  /*ボタンを押したときの動作*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  border-bottom: none;
}
.nomadBtn4.blue:active{
	background: #55A8DC;
	border-bottom: solid 3px #306DB2;
}
.nomadBtn4.red:active{
	background: #E07487;
	border-bottom: solid 3px #B12D41;
}
.nomadBtn4.grn:active{
	background: #5E8B6D;
	border-bottom: solid 3px #426A4F;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  .for-sp{display:none}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .sp_br{
display:block;
}
.btn_sp_lg{
width:90%
}
.sp_center{
text-align:center
}
.for-sp{display:none}
}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .sp-center{
text-align:center;
margin-left:auto;
margin-right:auto
}
.for-pc{
display:none
}
.for-sp{
display:block
}
}
/*固定*/
/* ===============================
   固定フッターCTA（スクロールしても常に表示）
   使い方：
   <div class="wp-fixed-cta"> ... </div>
   =============================== */

/* カスタム変数（色や影をまとめて変更） */
:root{
  --cta-bg: #111;                 /* 背景色 */
  --cta-fg: #fff;                 /* 文字色 */
  --cta-accent: #00A0D2;          /* ボタン色（WPのブルー系） */
  --cta-accent-hover: #008AB8;    /* ホバー時 */
  --cta-shadow: 0 -6px 24px rgba(0,0,0,.22);
  --cta-maxw: 1200px;             /* 中身の最大幅 */
  --cta-pad-x: 16px;              /* 左右余白 */
  --cta-pad-y: 12px;              /* 上下余白 */
  --cta-z: 9999;                  /* 最前面度合い */
}

/* 本体 */
.wp-fixed-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;                      /* 画面下に固定 */
  z-index: var(--cta-z);
　z-index: 99999; /* ← フッターより大きい値に */
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: var(--cta-shadow);
  /* iPhoneのホームバー（セーフエリア）対応 */
  padding: calc(var(--cta-pad-y) + env(safe-area-inset-bottom, 0px))
           var(--cta-pad-x) var(--cta-pad-y);
}

/* 中身をセンタリング＆横並び */
.wp-fixed-cta__inner{
  margin: 0 auto;
  max-width: var(--cta-maxw);
  display: grid;
  grid-template-columns: 1fr auto; /* 左テキスト / 右ボタン */
  gap: 12px;
  align-items: center;
}

/* テキスト */
.wp-fixed-cta__text{
  font-size: 15px;
  line-height: 1.6;
}

/* ボタン（aでもbuttonでもOK） */
.wp-fixed-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 12px 18px;
  border-radius: 9999px;
  background: var(--cta-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  border: none;
  cursor: pointer;
}
.wp-fixed-cta__btn:hover,
.wp-fixed-cta__btn:focus{
  background: var(--cta-accent-hover);
  text-decoration: none;
}

/* モバイル最適化 */
@media (max-width: 640px){
  .wp-fixed-cta__inner{
    grid-template-columns: 1fr;   /* 上：テキスト 下：ボタン */
    gap: 10px;
  }
  .wp-fixed-cta__btn{
    width: 100%;
    min-height: 48px;             /* タッチ領域確保 */
    min-width: 0;
  }
}

/* ダークモード（OS設定に追従・任意） */
@media (prefers-color-scheme: dark){
  :root{
    --cta-bg: #0b0b0b;
    --cta-shadow: 0 -6px 24px rgba(0,0,0,.45);
  }
}

/* 印刷時は非表示（任意） */
@media print{
  .wp-fixed-cta{ display: none !important; }
}

/* 重要：本分が隠れないように下余白を追加
   （テーマに応じてサイズ調整。ここでは高さ見込み=76px） */
body{
  --cta-spacer: 76px;
}
body.has-fixed-cta{
  padding-bottom: var(--cta-spacer);
}

/* WordPress管理バー（ログイン時）との競合回避
   ※下固定なので基本不要ですが、上固定に変える場合の参考
.admin-bar .wp-fixed-cta{ bottom: 0; } */