@charset "UTF-8";
 /* Custom Styles */
html.lp-service { 
  scroll-behavior: smooth; 
  box-sizing: border-box;
}

body.lp-service { 
  font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  width: 100%;
  margin:0px;
  line-height:inherit;
  box-sizing: border-box;
}
body.lp-service *, body.lp-service *::before, body.lp-service *::after { box-sizing: inherit; }
.lp-service .cta-button { 
    transition: all 0.3s ease; 
}
.lp-service .cta-button:hover { 
    transform: translateY(-3px) scale(1.05); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
}
.lp-service .tab-button.active { 
    border-bottom-color: #EF4444; 
    color: #EF4444; 
}
.lp-service .risk-card.active { 
    border-color: #EF4444; 
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); 
    transform: scale(1.05); 
}
.lp-service .benefit-card { 
    transition: all 0.3s ease; 
}
.lp-service .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 48px; 
    width: 2px;
    height: calc(100% - 48px);
    background-color: #D1D5DB;
}

.lp-service .loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #EF4444;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}


.lp-service hr{height:0;color:inherit;border-top-width:1px}
.lp-service a{color:inherit;text-decoration:inherit}
.lp-service h1,.lp-service h2,.lp-service h3,.lp-service h4,.lp-service h5,.lp-service h6,.lp-service hr,.lp-service p,.lp-service pre{margin:0}
.lp-service fieldset{margin:0;padding:0}
.lp-service legend{padding:0}
.lp-service .container{width:100%}
.lp-service .absolute{position:absolute}
.lp-service .relative{position:relative}
.lp-service .sticky{position:sticky}
.lp-service .-left-5{left:-1.25rem}
.lp-service .top-0{top:0px}
.lp-service .z-50{z-index:50}
.lp-service .mx-2{margin-left:0.5rem;margin-right:0.5rem}
.lp-service .mx-auto{margin-left:auto;margin-right:auto}
.lp-service .mb-1{margin-bottom:0.25rem}
.lp-service .mb-2{margin-bottom:0.5rem}
.lp-service .mb-4{margin-bottom:1rem}
.lp-service .mb-6{margin-bottom:1.5rem}
.lp-service .mb-8{margin-bottom:2rem}
.lp-service .mb-10{margin-bottom:2.5rem}
.lp-service .mb-12{margin-bottom:3rem}
.lp-service .mb-16{margin-bottom:4rem}
.lp-service .mt-1{margin-top:0.25rem}
.lp-service .mt-4{margin-top:1rem}
.lp-service .mt-6{margin-top:1.5rem}
.lp-service .mt-8{margin-top:2rem}
.lp-service .mt-16{margin-top:4rem}
.lp-service .h-10{height:2.5rem}
.lp-service .h-24{height:6rem}
.lp-service .w-10{width:2.5rem}
.lp-service .w-24{width:6rem}
.lp-service .w-wide{width:90%}
.lp-service .w-full{width:100%}
.lp-service .max-w-2xl{max-width:42rem}
.lp-service .max-w-3xl{max-width:48rem}
.lp-service .max-w-4xl{max-width:56rem}
.lp-service .max-w-5xl{max-width:64rem}
.lp-service .max-w-6xl{max-width:72rem}
.lp-service .gap-10{gap:2.5rem}
.lp-service .gap-12{gap:3rem}
.lp-service .gap-8{gap:2rem}
.lp-service .space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}
.lp-service .overflow-x-auto{overflow-x:auto}
.lp-service .rounded-full{border-radius:9999px}
.lp-service .rounded-lg{border-radius:0.5rem}
.lp-service .border{border-width:1px}
.lp-service .border-2{border-width:2px}
.lp-service .border-b{border-bottom-width:1px}
.lp-service .border-l-2{border-left-width:2px}
.lp-service .border-blue-500 { border-color: rgb(59, 130, 246); }
.lp-service .border-red-200 { border-color: rgb(254, 202, 202); }
.lp-service .border-red-500 { border-color: rgb(239, 68, 68); }
.lp-service .border-slate-300 { border-color: rgb(203, 213, 225); }
.lp-service .border-yellow-500 { border-color: rgb(234, 179, 8); }
.lp-service .bg-blue-50 { background-color: rgb(239, 246, 255); }
.lp-service .bg-blue-600 { background-color: rgb(37, 99, 235); }
.lp-service .bg-gray-50 { background-color: rgb(249, 250, 251); }
.lp-service .bg-gray-100 { background-color: rgb(243, 244, 246); }
.lp-service .bg-gray-200 { background-color: rgb(229, 231, 235); }
.lp-service .bg-gray-800 { background-color: rgb(31, 41, 55); }
.lp-service .bg-red-100 { background-color: rgb(254, 226, 226); }
.lp-service .bg-red-600 { background-color: rgb(220, 38, 38); }
.lp-service .bg-slate-100 { background-color: rgb(241, 245, 249); }
.lp-service .bg-white { background-color: rgb(255, 255, 255); }
/* スラッシュを含むクラス名 \/ はエスケープ不要な場合が多いですが、念のためそのままにしています */
.lp-service .bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.lp-service .p-6{padding:1.5rem}
.lp-service .p-8{padding:2rem}
.lp-service .px-4{padding-left:1rem;padding-right:1rem}
.lp-service .px-6{padding-left:1.5rem;padding-right:1.5rem}
.lp-service .px-10{padding-left:2.5rem;padding-right:2.5rem}
.lp-service .py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.lp-service .py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.lp-service .py-4{padding-top:1rem;padding-bottom:1rem}
.lp-service .py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.lp-service .py-20{padding-top:5rem;padding-bottom:5rem}
.lp-service .pb-8{padding-bottom:2rem}
.lp-service .pb-24{padding-bottom:6rem}
.lp-service .pl-12{padding-left:3rem}
.lp-service .pt-20{padding-top:5rem}
.lp-service .block{display:block}
.lp-service .inline-block{display:inline-block}
.lp-service .flex{display:flex}
.lp-service .grid{display:grid}
.lp-service .hidden{display:none}
.lp-service .items-center{align-items:center}
.lp-service .justify-center{justify-content:center}
.lp-service .justify-between{justify-content:space-between}
.lp-service .text-left{text-align:left}
.lp-service .text-center{text-align:center}
.lp-service .text-sm{font-size:0.875rem;line-height:1.25rem}
.lp-service .text-xs{font-size:0.75rem;line-height:1rem}
.lp-service .text-lg{font-size:1.125rem;line-height:1.75rem}
.lp-service .text-xl{font-size:1.25rem;line-height:1.75rem}
.lp-service .text-2xl{font-size:1.5rem;line-height:2rem}
.lp-service .text-3xl{font-size:1.875rem;line-height:2.25rem}
.lp-service .text-4xl{font-size:2.25rem;line-height:2.5rem}
.lp-service .font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
.lp-service .font-bold{font-weight:700}
.lp-service .font-extrabold{font-weight:800}
.lp-service .font-semibold{font-weight:600}
.lp-service .uppercase{text-transform:uppercase}
.lp-service .leading-tight{line-height:1.25}
.lp-service .tracking-tight{letter-spacing:-0.025em}
.lp-service .text-blue-600 { color: rgb(37, 99, 235); }
.lp-service .text-gray-400 { color: rgb(156, 163, 175); }
.lp-service .text-gray-500 { color: rgb(107, 114, 128); }
.lp-service .text-gray-600 { color: rgb(75, 85, 99); }
.lp-service .text-gray-700 { color: rgb(55, 65, 81); }
.lp-service .text-gray-800 { color: rgb(31, 41, 55); }
.lp-service .text-gray-900 { color: rgb(17, 24, 39); }
.lp-service .text-green-700 { color: rgb(21, 128, 61); }
.lp-service .text-red-100 { color: rgb(254, 226, 226); }
.lp-service .text-red-600 { color: rgb(220, 38, 38); }
.lp-service .text-red-700 { color: rgb(185, 28, 28); }
.lp-service .text-red-800 { color: rgb(153, 27, 27); }
.lp-service .text-slate-600 { color: rgb(71, 85, 105); }
.lp-service .text-slate-900 { color: rgb(15, 23, 42); }
.lp-service .text-white { color: rgb(255, 255, 255); }
.lp-service .text-yellow-600 { color: rgb(202, 138, 4); }
.lp-service .text-yellow-700 { color: rgb(161, 98, 7); }
.lp-service .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; }

/* box-shadowの値を直接記述 */
.lp-service .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.lp-service .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.lp-service .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.lp-service .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

/* backdrop-filterの値を直接記述 */
.lp-service .backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.lp-service .hover\:text-white:hover { color: rgb(255, 255, 255); }
.lp-service .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* focus:ring-2 と focus:ring-red-500 は、単純な色と影の指定に変換 */
.lp-service .focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* 青色系のリングを想定 */
}
.lp-service .focus\:ring-red-500:focus {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5); /* 赤色系のリング */
}
/******** Contact ********/
.lp-service .contact {
  padding-top: 50px;
  width: 100%;
  max-width: 1920px;
  height: auto;
  justify-content: center;
}
.lp-service .contact-top {
  width: 100%;
  font-size: clamp(20px, 3vw, 35px);
  color: #000;
  text-align: center;
  font-weight: 700;
  margin: 0 auto;
}
.lp-service .contact-title {
  width: 100%;
  font-size: clamp(24px, 4vw, 65px);
  color: #ed171e;
  text-align: center;
  font-weight: 700;
  margin: 0 auto;
}
.lp-service .contact-sub-title {
  width: 100%;
  font-size: clamp(24px, 4vw, 50px);
  color: #000;
  text-align: center;
  font-weight: 700;
  margin: 0 auto;
}

.lp-service .contact .inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.lp-service .contact .inner p {
  text-align: center;
}

.lp-service .contact .error_message {
  color: #ff0000;
}

.lp-service .contact .required {
  font-size: 20px;
  color: #c8161d;
}

.lp-service .contact .bold {
  font-weight: bold;
}
.lp-service .contact table {
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse;
}
.lp-service .contact table tr {
  height: 80px;
  border-bottom: 1px dashed #d5b4bd;
}

.lp-service .contact table tr:last-child {
  border: 0;
}

.lp-service .contact table th, .contact table td {
  font-size: 14px;
  font-weight: normal;
  vertical-align: middle;
  text-align: left;
  padding: 5px 0 10px;
}

.lp-service .contact table th {
  font-weight: bold;
  width: 195px;
  padding-left: 15px;
}

.lp-service .contact table td {
  position: relative;
  padding-right: 15px;
}

.lp-service .contact table td.privacy {
  padding: 20px 0;
}

.lp-service .contact table td input {
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  height: 30px;
  background: #fff;
  padding: 0 15px;
  border: 1px solid #aaa;
  border-radius: 3px;
}

.lp-service .contact table td select {
  width: 100%;
  height: 30px;
  background: #fff;
  padding: 0 15px;
  border: 1px solid #aaa;
  border-radius: 3px;
}

.lp-service .contact table td textarea {
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  height: 300px;
  background: #fff;
  padding: 15px;
  border: 1px solid #aaa;
  border-radius: 3px;
}

.lp-service .contact .form_content th {
  vertical-align: 30px;
  padding-top: 30px;
}

.lp-service .contact table td select option {
  padding: 5px;
}

.lp-service .contact table td .anno,
.lp-service .contact table td .error {
  font-size: 12px;
  position: absolute;
  bottom: 10px;
  left: 0;
}

.lp-service .contact table td .error {
  color: #c8161d;
}

.lp-service .contact table td.privacy input {
  vertical-align: middle;
  width: auto;
  margin-right: 5px;
}

.lp-service .contact table td.privacy a {
  color: #6565F4;
  text-decoration: underline;
  margin-left: 10px;
}

.lp-service .contact .btn_submit {
  text-align: center;
}

.lp-service .contact .btn_submit input {
  font-size: 14px;
  display: inline-block;
  width: 80%;
  height: 50px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.lp-service .border_no {
  border: none;
}
.lp-service .border_b {
  border-color: black;
}
.lp-service .contact .table-wide{
  width: 90%;
}

/* 問い合わせ完了画面関係 */
.lp-service .complete .main-container {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 100px 50px;
    max-width: 700px;
    width: 100%;
    text-align: center;
    animation: fadeIn 0.8s ease-out;
}

.lp-service .complete .icon-success {
    width: 80px;
    height: 80px;
    margin-bottom: 25px;
    color: #28a745; /* 緑色 */
}

.lp-service .complete .message {
    font-size: 16px;
    margin-bottom: 30px;
    border-top: 1px solid #eee;
    padding-top: 25px;
}

.lp-service .complete .note {
    font-size: 14px;
    color: #777;
}

.lp-service .complete .button-home {
    display: inline-block;
    color: #ffffff;
    padding: 14px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    margin-top: 30px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.lp-service .complete .button-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}
        
/* スマートフォン用のスタイル調整 */
@media (min-width: 640px){
    .lp-service .container{max-width:640px}
    .lp-service .sm\:hidden{display:none}
    .lp-service .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
    .lp-service .sm\:py-24{padding-top:6rem;padding-bottom:6rem}
    .lp-service .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
    .lp-service .complete .main-container {padding: 30px 25px}
    .lp-service .complete .message {font-size: 15px;}
}
@media (min-width: 768px){
    .lp-service .container{max-width:768px}
    .lp-service .md\:block{display:block}
    .md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .lp-service .md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .lp-service .md\:text-6xl{font-size:3.75rem;line-height:1.25}
    .lp-service .contact .btn_submit input:hover {
        color: #fff;
        background: #aaa;
        border: 1px solid #aaa;
    }
    .lp-service .process-step:not(:last-child)::after {
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        width: calc(100% - 96px);
        height: 2px;
    }
}
@media (min-width: 1024px){
    .lp-service .container{max-width:1024px}
    .lp-service .lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .lp-service .lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .lp-service .lg\:px-8{padding-left:2rem;padding-right:2rem}
}
@media (min-width: 1280px){.lp-service .container{max-width:1280px}}

/* ========== フォームのモバイル対応 ========== */
@media screen and (max-width: 767px) {
  /* テーブルのtheadを非表示（今回は無いですが念のため） */
  .lp-service .contact table thead {
    display: none;
  }
  /* テーブルの行をブロック要素として扱い、上下に余白を設ける */
  .lp-service .contact table tr {
    display: block;
    margin-bottom: 24px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 24px;
  }
  .lp-service .contact table tr:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  /* thを非表示にする */
  .lp-service .contact table th {
    display: none;
  }
  /* tdをブロック要素として扱う */
  .lp-service .contact table td {
    display: block;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  /* tdの疑似要素としてラベルを表示する */
  .lp-service .contact table td::before {
    content: attr(data-label); /* data-label属性の内容を表示 */
    display: block;
    font-weight: bold;
    margin-bottom: 8px; /* ラベルと入力欄の間に余白 */
  }
  .lp-service .contact table td textarea {
    height: 100%;
  }
  /* エラーメッセージの調整 */
  .lp-service .contact table td .error_message {
    display: block;
    margin-top: 8px;
  }
  /* 同意チェックボックスの調整 */
  .lp-service .contact table td.privacy {
    padding: 0;
    margin-top: 60px;
  }
  .lp-service .contact table td.privacy a {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
  .lp-service .cta-button { 
    margin-top: 40px;
  }
  .lp-service .contact .table-wide{
    width: 100%;
  }
  .lp-service .text-xl{
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .lp-service .text-2xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .lp-service .text-3xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .lp-service .text-4xl{
    font-size: 2rem;
    line-height: 2.25rem;
  }
  .lp-service .-left-5{
    left: -0.5rem;
  }
}

/* botによるフォーム送信対策用style */
.hp-field {
  position: absolute;
  left: -5000px;
}