@charset "UTF-8";
/*
common.css
*/

/* フッター追尾 */
#footer-btn {
  position: fixed;
  display: block;
  width: 100%;
  left: 0px;
  bottom: 0;
  z-index: 998;
  padding:15px 0;
  background: #ff3600;
}
#footer-btn .container {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
#footer-btn img {
  width: 100%;
}
#footer-btn .footer-btn-wrapper {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
#footer-btn .footer-btn-pc {
  position: relative;
  max-width: 1160px;
  width:96%;
  margin:auto;
  padding:15px 2% 5px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background-color:#fff;
  box-shadow:3px 3px 3px #ccc inset;
  border-radius:10px;
  z-index:2;
}
#footer-btn .footer-btn-pc h1{
  position:absolute;
  top:-19%;
  left:2%;
  max-width: 463px;
  width:41%;
  z-index:3;
}
#footer-btn .footer-btn-pc .img{
  position:absolute;
  bottom:10%;
  left:22%;
  max-width:250px;
  z-index:1;
}
#footer-btn .footer-btn-pc p {
  margin: 0 5px;
  font-weight: bold;
}
#footer-btn .footer-btn-pc .txt{
  position:relative;
  margin-right:5%;
  z-index: 2;
}
#footer-btn .footer-btn-pc .footer-tel {
  position: relative;
  max-width: 478px;
  width: 50%;
  text-align: center;
  z-index:2;
}
#footer-btn .footer-btn-pc .footer-tel span {
  display: block;
  font-weight: bold;
}
#footer-btn .footer-btn-pc .footer-tel .footer-tel-number {
  position:absolute;
  top:27%;
  left:0;
  right:0;
  width:90%;
  margin:auto;
  text-align: center;
  font-size: min(55px,4vw);
  font-family: Arial, sans-serif;
  color: #fff;
  -webkit-text-stroke: 6px #31b80d;
  line-height: 1;
  letter-spacing: 0.02em;
}
#footer-btn .footer-btn-pc .footer-tel .footer-tel-number::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  margin:auto;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}
#footer-btn .footer-btn-pc .footer-tel .footer-tel-time {
  position:absolute;
  bottom:14%;
  left:0;
  right:0;
  width:90%;
  margin:auto;
  text-align: center;
  font-size: min(16px,1.4vw);
  color:#fff;
  line-height: 1;
}
#footer-btn .footer-btn-sp {
  display: none;
}
@media only screen and (max-width: 760px) {
#footer-btn{
    padding:10px;
  }
  #footer-btn .footer-btn-pc {
    display: none;
  }
  #footer-btn .footer-btn-wrapper {
    width: 100%;
    margin: auto;
  }
  #footer-btn .footer-btn-sp {
    display: block;
    position: relative;
    height: auto;
  }
  #footer-btn .tit{
    position:absolute;
    top:-32px;
    left:0;
    right:0;
    width:96%;
    margin:auto;
    z-index:3;
  }
  #footer-btn .common-wrapper{
    width:100%;
    padding:5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    background-color:#fff;
    border-radius:8px;
  }
  #footer-btn .txt{
    position:relative;
    max-width: 180px;
    width:17%;
    z-index:2;
  }
  #footer-btn .footer-tel {
    position: relative;
    width: 60%;
    z-index:2;
  }
  #footer-btn .footer-tel .footer-tel-time {
    position:absolute;
    display: block;
    font-weight: bold;
    color:#fff;
    top:64%;
    left:0%;
    right:0;
    width:90%;
    margin:auto;
    text-align: center;
    font-size: min(16px,2.6vw);
  }
  #footer-btn .mail{
    width:20%;
  }
  #footer-btn .icon{
    position:absolute;
    bottom:0;
    left:0.5%;
    width:28%;
    max-width: 269px;
    z-index:1;
  }

  #footer-btn .icon{
    position:absolute;
    bottom:0;
    left:0.5%;
    width:28%;
    max-width: 269px;
    z-index:1;
  }

  .footer_cta-area {
  position: relative;
  max-width: 760px;  /* bg画像の幅に合わせる */
  margin: 0 auto;
}

.bg-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 共通 */
.footer_cta-area .btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  display: block;
  width: 80%;  /* ボタンのサイズ調整（画像サイズ基準） */
  max-width: 400px; /* 大きくなりすぎないように制御 */
}

/* 電話ボタンの位置（背景の中で調整） */
.footer_cta-area .tel-btn {
  bottom: 160px;  /* bg画像の下から120pxあたり */
}

@media only screen and (max-width: 420px) {
.footer_cta-area .tel-btn {
  bottom: 140px;  /* bg画像の下から120pxあたり */
}
}

/* メールボタンの位置 */
.footer_cta-area .mail-btn {
  bottom: 40px;   /* bg画像の下から30pxあたり */
}

/* フォーム全体 */
.wpcf7 {
  max-width: 500px;
}

.wpcf7-form { 
  background: url('/buybuy-dou-gakki.com/public_html/wp-content/themes/instrument-cms/images/form-bg.png') no-repeat center center; 
  background-size: cover; /* 画像を全体にフィット */ 
  padding: 30px; 
  box-shadow: 0 0 15px rgba(0,0,0,0.2); 
  color: #fff; /* テキストを白く（背景が濃い場合） */ 
}


/* サブタイトル（黒帯） */
.wpcf7-form h4 {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 8px;
  margin: 20px -20px 15px; /* 横いっぱいに広げる */
}

/* ラベル */
.wpcf7-form label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  color: #d00;
}

/* 必須マーク */
.wpcf7-form .req {
  color: red;
  font-weight: bold;
}

/* テキスト入力 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 入力フォーカス */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: #f90;
  outline: none;
  box-shadow: 0 0 5px rgba(255,153,0,0.5);
}

/* 注意書き */
.wpcf7-form .privacy-note {
  font-size: 12px;
  color: #333;
  margin: 10px 0;
  text-align: center;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
  background: #f90;
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
  margin-top: 10px;
}

.wpcf7-form input[type="submit"]:hover {
  background: #e68a00;
}

/* 白カード */
.custom-form {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 赤帯タイトル */
.form-title {
  background: #d00;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
  border-radius: 6px 6px 0 0;
  margin: -20px -20px 15px; /* 白カードの外に広げる */
}

/* 黒帯サブタイトル */
.form-subtitle {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 8px;
  margin: 0 -20px 20px;
  border-radius: 4px;
}

/* ラベル */
.custom-form label {
  font-weight: bold;
  color: #d00;
  display: block;
  margin-bottom: 10px;
}

/* 必須マーク */
.req {
  color: red;
  font-weight: bold;
}

/* 入力欄 */
.custom-form input[type="text"],
.custom-form input[type="tel"],
.custom-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
}

/* ボタン */
.custom-form input[type="submit"] {
  background: #f90;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
}

.custom-form input[type="submit"]:hover {
  background: #e68a00;
}



}


/* ===== PC (Desktop) ===== */
@media only screen and (min-width: 769px) {

  /* 共通：フッターボタン帯 */
  #footer-btn {
    padding: 12px;
  }
  #footer-btn .tit {
    top: -35px;
  }

  /* ===== フッターCTA ===== */
  .footer_cta-area {
    position: relative;
    max-width: 1200px; /* PC幅に拡大 */
    margin: 0 auto;
  }

  .bg-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .footer_cta-area .btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 420px;         /* PCは固定幅で視認性を確保 */
    max-width: none;
  }

  /* 電話ボタン → 背景画像に対し下から22% */
  .footer_cta-area .tel-btn {
    bottom: 22%;
  }

  /* メールボタン → 背景画像に対し下から8%（少し近づける） */
  .footer_cta-area .mail-btn {
    bottom: 8%;
    width: 380px;        /* メールはやや小さめ */
  }

  /* ===== CF7フォーム（背景画像カード） ===== */
  .wpcf7 {
    max-width: 820px;     /* PCで横幅拡大 */
    margin: 0 auto;
  }

  .wpcf7-form {
    background: url('https://buybuy-dou-gakki.com/wp-content/themes/instrument-cms/images/form-bg.png') no-repeat center center;
    background-size: cover;
    padding: 40px 48px;   /* 余白拡大 */
    box-shadow: 0 0 18px rgba(0,0,0,0.2);
    color: #fff;
    border-radius: 10px;
  }

  /* サブタイトル（黒帯） */
  .wpcf7-form h4 {
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 20px;
    padding: 10px 12px;
    margin: 24px -48px 18px; /* 横一杯に広げる */
  }

  /* ラベル */
  .wpcf7-form label {
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
    color: #d00;
    font-size: 15px;
  }

  /* 必須マーク */
  .wpcf7-form .req {
    color: red;
    font-weight: 700;
  }

  /* 入力系 */
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="email"],
  .wpcf7-form textarea,
  .wpcf7-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 16px;
    box-sizing: border-box;
    background: #fff;
    color: #333;
  }

  /* フォーカス */
  .wpcf7-form input:focus,
  .wpcf7-form textarea:focus,
  .wpcf7-form select:focus {
    border-color: #f90;
    outline: none;
    box-shadow: 0 0 6px rgba(255,153,0,0.45);
  }

  /* 注意書き */
  .wpcf7-form .privacy-note {
    font-size: 14px;
    color: #f0f0f0;
    margin: 12px 0 4px;
    text-align: center;
  }

  /* 送信ボタン */
  .wpcf7-form input[type="submit"] {
    background: #f90;
    color: #fff;
    border: none;
    padding: 16px 22px;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.3s, transform 0.06s ease;
    width: 100%;
    margin-top: 12px;
  }
  .wpcf7-form input[type="submit"]:hover {
    background: #e68a00;
  }
  .wpcf7-form input[type="submit"]:active {
    transform: translateY(1px);
  }

  /* ===== 白カード版フォーム ===== */
  .custom-form {
    background: #fff;
    border-radius: 10px;
    padding: 32px 36px;
    max-width: 840px;
    margin: 0 auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  }

  /* 赤帯タイトル */
  .form-title {
    background: #d00;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    padding: 14px 16px;
    border-radius: 10px 10px 0 0;
    margin: -32px -36px 20px; /* 外側へ広げる */
  }

  /* 黒帯サブタイトル */
  .form-subtitle {
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 10px 12px;
    margin: 0 -36px 24px;
    border-radius: 6px;
  }

  /* ラベル */
  .custom-form label {
    font-weight: 700;
    color: #d00;
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
  }

  /* 必須マーク */
  .req {
    color: red;
    font-weight: 700;
  }

  /* 入力欄 */
  .custom-form input[type="text"],
  .custom-form input[type="tel"],
  .custom-form input[type="email"],
  .custom-form textarea,
  .custom-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 16px;
    box-sizing: border-box;
  }

  /* ボタン */
  .custom-form input[type="submit"] {
    background: #f90;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s, transform 0.06s ease;
  }
  .custom-form input[type="submit"]:hover {
    background: #e68a00;
  }
  .custom-form input[type="submit"]:active {
    transform: translateY(1px);
  }

}