/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
*/

/***************************
 見出し
/***************************/

/* 大見出し */
.lp_h3 {
    border-bottom: 3px solid #009966; /*下線（太さ 実線 色）*/
}
/* 大見出しの最初の1文字 */
.lp_h3:first-letter {
    color: #009966; /* 文字色 */
    font-size: 1.3em; /* 文字サイズ */
}

/* 大見出し（矢印付き） */
.lp_h3_arrow {
    padding-top: 45px; /* 上に余白を設定 */
    background-image: url(http://uloca2.local/wp-content/uploads/2025/06/arrow2.png); /* 画像を配置 */
    background-repeat: no-repeat; /* 画像の繰り返し */
    background-position: top center; /* 配置位置 */
}
/* 大見出し（矢印付き）の最初の1文字 */
.lp_h3_arrow:first-letter {
    color: #009966; /* 文字色 */
    font-size: 1.3em; /* 文字サイズ */
}

/* 小見出し */
h4 {
    color: #009966; /* 文字色 */
}

/***************************
 CTAボタン
/***************************/

/* 緑のCTAボタン（マウスオン） */
.lp_cta_green > a:hover {
    background-color: #FFFFFF !important; /* 背景色 */
    color: #009966 !important; /* 文字色 */
    outline: 3px solid #009966 !important; /* 外枠 */
}
/* オレンジのCTAボタン（マウスオン） */
.lp_cta_orange > a:hover {
    background-color: #FFFFFF !important; /* 背景色 */
    color: #FC8E00 !important; /* 文字色 */
    outline: 3px solid #FC8E00 !important; /* 外枠 */
}

/***************************
 ウロカにお任せくださいブロック
/***************************/

/* リストにチェックボックスをつける */
.lp_checklist li {
    list-style-image: url(http://uloca2.local/wp-content/uploads/2025/06/checkbox.png);  /* リスト画像 */
}

/***************************
 ご利用の流れブロック
/***************************/

/* リストに数字をつける */
.step1,
.step2,
.step3,
.step4 {
    position: relative; /* 子要素をabsoluteで配置したいとき、その基準にする親にrelativeをつける */
}
/* HTMLに書いていない要素をCSSで追加する */
.step1::before,
.step2::before,
.step3::before,
.step4::before {
    position: absolute; /* 親要素から見て位置を決める */
    bottom: 0; /* 下から見た位置、0は下寄せ */
    left: 0; /* 左から見た位置、0は左寄せ*/
    z-index: -1; /* 要素の重なり、-1は一枚裏に回る */
    color: #c3e8e1; /* 文字色 */
    font-size: 2.2em; /* 文字サイズ、3emは親要素の3倍 */
    line-height: 1; /* 行の高さ、親要素を基準に1倍 */
}

.step1::before {
    content: 'STEP.1'; /* お問い合わせの前に文字を書く */
}

.step2::before {
    content: 'STEP.2';
}

.step3::before {
    content: 'STEP.3';
}

.step4::before {
    content: 'STEP.4';
}

/***************************
 よくある質問ブロック
/***************************/

/* 余白をリセットする */
dl.lp_faq,
dt.lp_faq_q,
dd.lp_faq_a {
    margin: 0;
    padding: 0;
}

/* 質問 */
dl.lp_faq > dt {
    font-size: 18px; /* 文字の大きさ */
    font-weight: bold; /* 文字の太さ */
}

/* 回答 */
dl.lp_faq > dd {
    margin-bottom: 20px; /* 下側の間隔 */
}

/* 質問の前にQマークをつける*/
dt.lp_faq_q::before {
    margin-right: 10px; /* 右側の間隔 */
    font-size: 18px; /* 文字の大きさ */
    font-weight: bold; /* 文字の太さ */
    color: #009966; /* 文字色 */
    content: "Q."; /* Qマーク */
}

/* 回答の前にAマークをつける*/
dd.lp_faq_a::before {
    margin-right: 10px; /* 右側の間隔 */
    font-size: 18px; /* 文字の大きさ */
    font-weight: bold; /* 文字の太さ */
    color: #c23a2c; /* 文字色 */
    content: "A."; /* Aマーク */
}

/***************************
 お問い合わせフォーム
/***************************/

/* テキストボックス、テキストエリア */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%; /* 幅 */
  padding: 10px; /* 内側の余白 */
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 4px; /* 枠線の角丸 */
  font-size: 16px; /* フォントサイズ */
  margin-bottom: 15px; /* 下側の間隔 */
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  display: block; /* 要素の種類をblockにする */
  margin: 20px auto; /* 中央寄せ */
}