/*
Theme Name: LP CREATOR
Author: Shintsu Kyoto
Description: LPサイト作成テーマ（レスポンシブ・クリッカブルマップ・プレビュー・GA4/GTM・ファビコン・SEO対策・フォーム設定 他）
Version: 2.0
Text Domain: lp-site-theme
*/

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}

#lp-page {
  min-height: 100vh;
  overflow: visible !important;
  background: #fff;
}

.lp-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
  box-sizing: border-box;
}

body.admin-bar #lp-page {
  margin-top: 0 !important;
}

@media (hover:hover) and (pointer:fine){
  a.lp-btn{
    transition: background 0.35s ease-out;
  }
  a.lp-btn:hover{
    background: var(--lpbtn-bg-hover) !important;
  }
}

/* =====================================================
   CF7
===================================================== */
#lp-page .cf7-actions p{
  text-align: center;
  margin: 0 !important;
}

#lp-page .cf7-actions .cf7-confirm-btn{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
  border: none !important;
  outline: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  max-width: 300px;
  box-sizing: border-box !important;

  background: #007cba !important;
  color: #fff !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;

  padding: 12px 18px !important;
  border-radius: 6px !important;

  cursor: pointer;
}

@media (hover:hover) and (pointer:fine){
  #lp-page .cf7-actions .cf7-confirm-btn:hover{
    background:#006ba1 !important;
  }
}

/* =====================================================
   CF7：CSS
===================================================== */
.cf7-confirm-modal .cf7-confirm-list,
.cf7-confirm-modal .cf7-confirm-list th,
.cf7-confirm-modal .cf7-confirm-list td:first-child,
.cf7-confirm-modal .cf7-confirm-list dt{
  text-align: left !important;
}
.cf7-confirm-modal .cf7-confirm-list th *,
.cf7-confirm-modal .cf7-confirm-list td:first-child *,
.cf7-confirm-modal .cf7-confirm-list dt *{
  text-align: left !important;
}

.cf7-confirm-modal .cf7-confirm-acceptance{
  margin-bottom: 10px !important;
}

.cf7-confirm-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}

.cf7-confirm-modal .cf7-confirm-cancel{
  background:#fff;
  color:#333;
  border:1px solid #999;
  border-radius:6px;
  padding:10px 18px;
  font-size:14px;
  cursor:pointer;
}
.cf7-confirm-modal .cf7-confirm-cancel:hover{
  background:#f5f5f5;
}

.cf7-confirm-modal .cf7-confirm-send:not([disabled]){
  background:#007cba;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:10px 18px;
  font-size:14px;
  cursor:pointer;
}
.cf7-confirm-modal .cf7-confirm-send:not([disabled]):hover{
  background:#006ba1;
}

.cf7-required{
  color:#d40000;
  font-size:0.7em;
  font-weight:normal;
  margin-left:6px;
  vertical-align:middle;
  white-space:nowrap;
}

.cf7-form-boarder {
  border:none;
  border-top:1px solid #ccc;
  margin:30px 0;
}

.wpcf7 .wpcf7-not-valid {
  background: rgba(255, 0, 0, 0.06);
  border-color: #d63638;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
}

.cf7-email-mismatch-msg{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #d63638;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 input.is-invalid{
  background: rgba(255, 0, 0, 0.06);
  border-color: #d63638 !important;
}

.wpcf7 input.wpcf7-not-valid:focus,
.wpcf7 input.is-invalid:focus{
  border-color: #d63638 !important;
  box-shadow: 0 0 0 2px rgba(214, 54, 56, .18) !important;
  outline: none !important;
}

.wpcf7 form .wpcf7-not-valid,
.wpcf7 form input[aria-invalid="true"],
.wpcf7 form textarea[aria-invalid="true"],
.wpcf7 form select[aria-invalid="true"]{
  background: rgba(255, 0, 0, 0.06) !important;
  border-color: #d63638 !important;
}

.wpcf7 form .wpcf7-not-valid:focus,
.wpcf7 form input[aria-invalid="true"]:focus,
.wpcf7 form textarea[aria-invalid="true"]:focus,
.wpcf7 form select[aria-invalid="true"]:focus{
  border-color: #d63638 !important;
  box-shadow: 0 0 0 2px rgba(214, 54, 56, .18) !important;
  outline: none !important;
}

.wpcf7 form .wpcf7-not-valid-tip{
  color: #d63638 !important;
}

.wpcf7 form .cf7-email-mismatch-msg{
  color: #d63638 !important;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.wpcf7 form .wpcf7-not-valid-tip{
  font-size: 12px !important;
  line-height: 1.4;
}

.wpcf7 form .wpcf7-not-valid-tip,
.wpcf7 form .cf7-email-mismatch-msg{
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #d63638 !important;
  font-weight: normal;
}

.cf7-form-name-title {
  text-align: center;
}

.cf7-form-name-text {
  justify-self: auto;
}

.cf7-required-note {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* =====================================================
  CF7：入力内容確認ボタン
===================================================== */
#cf7-preview-open.is-disabled,
#cf7-preview-open[aria-disabled="true"],
.cf7-actions .cf7-confirm-btn.is-disabled,
.cf7-actions .cf7-confirm-btn[aria-disabled="true"]{
filter: grayscale(1) brightness(1.5)!important;
}

/* =====================================================
  CF7：下部表示制御
===================================================== */
.wpcf7 form .wpcf7-response-output {
   display:none !important;
}

/* =====================================================
  CF7：メッセージ制御
===================================================== */
.cf7-msg-text{
  white-space: pre-line;
}

/* ==============================
   PC時：フォーム幅600px固定
============================== */
@media (min-width: 769px){

  .wpcf7 {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}