/* -------------------------------------
    style.css (最終版)
------------------------------------- */

/* 基本的なリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下部の余白対策 */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* 共通ユーティリティクラス */
/* デフォルト (SP版) ではSP画像を表示し、PC画像を非表示 */
.u-img-pc {
    display: none !important; /* !important で強制的に非表示 */
}
.u-img-sp {
    display: block !important; /* !important で強制的に表示 */
    width: 100%; /* SP版画像は基本的に幅いっぱい */
}

/* PC版 (768px以上) ではPC画像を表示し、SP画像を非表示 */
@media (min-width: 768px) {
    .u-img-pc {
        display: block !important; /* !important で強制的に表示 */
        width: 100%; /* PC版画像も基本的に幅いっぱい */
    }
    .u-img-sp {
        display: none !important; /* !important で強制的に非表示 */
    }
}


/* ------------------------------------- */
/* Layout: ヘッダー、フッターなどサイト全体に関わるスタイル */
/* ------------------------------------- */
.l-header {
    width: 100%;
    /* position: fixed; /* 必要であれば固定ヘッダー */
    /* top: 0; */
    /* left: 0; */
    /* z-index: 100; */
    background-color: #fff; /* 背景色を設定 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* シャドウを設定 */
}

.l-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto;
}

.l-header__logo-link {
    flex-shrink: 0; /* ロゴが縮まないように */
}

.l-header__logo-link img {
    height: 40px; /* ロゴの高さ調整 */
    width: auto;
}

/* PC版ナビゲーション */
.l-header__nav {
    display: none; /* SP版では非表示 */
}

.l-header__nav-list {
    display: flex;
    gap: 20px; /* メニュー間のスペース */
}

.l-header__nav-item a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 5px 10px;
    transition: opacity 0.3s;
}

.l-header__nav-item a:hover {
    opacity: 0.7;
}

.l-header__nav-item--cta a {
    background-color: #FFED1E; /* ヘッダーCTAボタンの背景色を黄色に */
    color: #333; /* ヘッダーCTAボタンのテキスト色を調整 */
    border-radius: 9999px; /* ボタンの角を完全に丸くする */
    padding: 8px 15px; /* パディングは維持 */
}

/* ハンバーガーメニュー (SP版のみ) */
.l-header__hamburger-btn {
    display: block; /* SP版では表示 */
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    position: relative;
    cursor: pointer;
    z-index: 101; /* ナビゲーションよりも手前に */
}

.l-header__hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.l-header__hamburger-btn span:nth-child(1) { top: 0; }
.l-header__hamburger-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.l-header__hamburger-btn span:nth-child(3) { bottom: 0; }

/* ハンバーガーメニュー開閉時のスタイル */
.l-header__hamburger-btn.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.l-header__hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
.l-header__hamburger-btn.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* SP版ドロワーメニュー */
.l-header__nav.is-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 100;
    padding-top: 80px; /* ヘッダーの高さ分 */
    overflow-y: auto;
}

.l-header__nav.is-open .l-header__nav-list {
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.l-header__nav.is-open .l-header__nav-item a {
    font-size: 20px;
}

/* PC版のナビゲーション表示 */
@media (min-width: 768px) {
    .l-header__nav {
        display: block; /* PC版では表示 */
    }
    .l-header__hamburger-btn {
        display: none; /* PC版では非表示 */
    }
}


/* フッター */
.l-footer {
    width: 100%;
    background-color: #202020; /* フッター背景色 */
    color: #fff; /* テキスト色 */
    padding: 40px 20px; /* 内側の余白 */
    text-align: center;
}

.l-footer__inner {
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 縦並び (SP版) */
    align-items: center; /* 中央寄せ (SP版) */
    gap: 20px; /* 要素間のスペース (SP版) */
}

.l-footer__logo img {
    height: 50px; /* フッターロゴの高さ調整 */
    width: auto;
    margin-bottom: 10px; /* ロゴ下の余白 */
}

.l-footer__links {
    display: flex;
    flex-direction: column; /* 縦並び (SP版) */
    gap: 10px; /* リンク間のスペース */
}

.l-footer__company-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.l-footer__privacy-link {
    font-size: 14px;
    color: #fff;
    text-decoration: underline;
    transition: opacity 0.3s;
}

.l-footer__privacy-link:hover {
    opacity: 0.7;
}

.l-footer__copyright {
    font-size: 12px;
    color: #bbb;
    margin-top: 20px;
}

/* PC版フッターレイアウト */
@media (min-width: 768px) {
    .l-footer__inner {
        flex-direction: row; /* 横並び (PC版) */
        justify-content: space-between; /* 左右に配置 (PC版) */
        align-items: center;
        gap: 0; /* PC版では個別のギャップ */
    }

    .l-footer__logo {
        margin-bottom: 0; /* SP版の余白をリセット */
    }

    .l-footer__links {
        flex-direction: row; /* 横並び (PC版) */
        gap: 30px; /* リンク間のスペース */
        margin-left: auto; /* 右に寄せる */
    }

    .l-footer__company-name {
        margin-bottom: 0; /* SP版の余白をリセット */
    }

    .l-footer__copyright {
        margin-top: 0; /* SP版の余白をリセット */
        margin-left: 30px; /* リンクからの余白 */
    }
}


/* ------------------------------------- */
/* Page: 各セクションのスタイル */
/* ------------------------------------- */

/* p-fvセクション（PC版FV画像にCTAボタンを重ねるための親要素） */
.p-fv {
    position: relative; /* CTAボタンのabsolute配置の基準 */
    width: 100%;
    text-align: center;
}

.p-fv__main-img-pc {
    display: block; /* PC版では表示 */
    width: 100%;
    height: auto;
}
.p-fv__main-img-sp {
    display: block; /* SP版では表示 */
    width: 100%;
    height: auto;
}

/* CTAボタン (PC版FV画像に重ねる) */
.cta-btn {
    position: absolute;
    top: 81%; /* 親要素(p-fv)の上から35%の位置 */
    left: 20%;
    right: 0;
    margin: auto; /* widthと合わせて中央寄せ */
    width: 90%; /* ボタン全体の幅 */
    max-width: 300px; /* PC版でのボタンの最大幅 */
    overflow: hidden;
    cursor: pointer;
    animation: anime1 0.5s ease 0s infinite alternate; /* アニメーション */
    transform-origin: center;
    z-index: 10; /* FV画像より手前に表示 */
}

.cta-btn .cta-btn-img {
    width: 100%; /* ボタン画像は親要素の幅いっぱいに */
    height: auto;
    display: block;
}

/* PC版のcta-btnのみ表示、SP版はu-img-pcクラスで非表示 */
@media (max-width: 767px) {
    .cta-btn {
        display: none !important; /* SPではこのabsoluteボタンを非表示 */
    }
}


/* 新しいSP版専用の画像CTAセクション */
.p-cta-image-sp {
    display: none; /* デフォルトで非表示（PC版） */
    width: 100%;
    text-align: center;
    position: relative; /* 内部のabsolute要素の基準 */
}

.p-cta-image-sp__content-wrapper {
    position: relative;
    width: 100%;
    /* 背景画像の縦横比を維持するためのpadding（cta_bg_sp.pngの縦横比に合わせて調整） */
    padding-bottom: 50%; /* 例: 2:1の比率の場合。実際の画像に合わせて調整してください */
}

.p-cta-image-sp__bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* ボタンより下に配置 */
}

.p-cta-image-sp__btn-wrapper {
    position: absolute;
    top: 64%; /* 背景画像の垂直方向中央に配置 */
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え */
    width: 90%; /* ボタンの幅調整 */
    max-width: 400px; /* ボタンの最大幅 */
    z-index: 2; /* 背景画像より手前に配置 */
}

.p-cta-image-sp__btn-img {
    width: 100%;
    height: auto;
    display: block;
}

/* SP版でのみ p-cta-image-sp を表示 */
@media (max-width: 767px) {
    .p-cta-image-sp {
        display: block; /* SP版で表示 */
    }
}


/* これまでのテキストCTAセクション */
.p-cta {
    padding: 30px 0;
    background-color: #054BAB; /* CTAセクションの背景色を青に */
}

.p-cta__btn-link {
    display: inline-block;
    max-width: 80%; /* ボタン全体の最大幅 */
    background-color: #FFED1E; /* CTAボタンの背景色を黄色に */
    color: #333; /* CTAボタンのテキスト色を調整 */
    font-weight: bold;
    font-size: 20px;
    padding: 15px 30px; /* テキストボタンのパディング調整 */
    border-radius: 9999px; /* ボタンの角を完全に丸くする */
    transition: background-color 0.3s, opacity 0.3s;
}

.p-cta__btn-link:hover {
    background-color: #e6d31a; /* ホバー時の色を少し暗く */
    opacity: 0.8;
}

/* companyセクション (実績) */
/* ロゴの無限ループアニメーションを反映 */

.p-company__logo-wrapper {
    overflow: hidden; /* 流れる部分を隠す（維持） */
    width: 100%; /* 幅いっぱい（維持） */
    padding: 30px 0; /* ロゴの上と下に余白を付ける */
}

/* .p-company__logo-list の定義をアニメーション用に最適化 */
.p-company__logo-list {
    /* **【変更】** display: flex; で画像を横並びにする（スムーズなアニメーションに最適） */
    display: flex; 
    /* **【変更】** コンテンツの幅いっぱいに広げ、アニメーションの移動量を正確に計算できるようにする */
    width: max-content; 
    
    /* アニメーションの適用 */
    animation: scroll-left 60s linear infinite; /* 60sは流れの速さ。linearで途切れなく。 */
}

/* .p-company__logo-list img の定義を調整 */
.p-company__logo-list img {
    height: 80px; /* ロゴの表示高さを設定（維持） */
    width: auto; /* 幅は高さを基準に自動調整（維持） */
    margin: 0 15px; /* 上下の余白をリセットし、左右のスペースのみ確保 */
    flex-shrink: 0; /* ロゴが縮まないように */
    
    object-fit: contain; 
    
    /* アニメーション中のガタつき軽減に役立つことがある */
    transform: translateZ(0); 
}

/* 無限スクロールアニメーション */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* リスト全体が、ロゴセットの半分の幅（複製元のセットの総幅）だけ左に移動 */
        transform: translateX(-50%); 
    }
}


.p-voice {
    position: relative; /* 親要素としての子要素絶対配置の基準 */
    width: 100%;
    text-align: center;
}

/* voiceセクション SP版のコンテンツラッパー (背景画像とカルーセルを内包) */
.p-voice__content-sp-wrapper {
    position: relative; /* 背景画像とカルーセルを重ねるための基準 */
    width: 100%;
    height: auto; /* ★修正: 高さを自動調整し、子要素のimgの高さに合わせる */
    overflow: hidden; /* ★修正: はみ出しを防ぐ */
}

/* voiceセクション SP版の背景画像 */
.p-voice__bg-img {
    position: relative; /* 親の高さに貢献させる（通常フロー内） */
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    z-index: 1; /* カルーセルより下に配置 */
}

/* voiceセクション カルーセル本体 (コンテンツ) の位置調整 */
.p-voice__carousel {
    position: absolute; /* 親コンテナ (.p-voice__content-wrapper-sp) に対する相対位置 */
    top: 50%; /* ★修正: 親コンテナの垂直方向中央に配置 */
    left: 50%;
    transform: translate(-50%, -50%); /* ★修正: 中央寄せの標準的な方法 */
    width: 90%; /* カルーセルの幅調整（必要に応じて） */
    max-width: 400px; /* カルーセルの最大幅（必要に応じて） */
    z-index: 2; /* 背景画像より手前に表示 */
    padding: 0; /* Swiperのpaddingをリセット */
}

/* flow セクション固有のスタイル (単一画像表示に最適化) */
.p-flow {
    width: 100%;
    text-align: center;
    /* このセクション内の画像は u-img-pc/u-img-sp で制御されるため、
       position: relative; は不要になります。 */
}

/* p-flow__main-img-pc は u-img-pc と連携してPC版で表示される */
/* p-flow__main-img-sp は u-img-sp と連携してSP版で表示される */

/* 以前の p-flow__carousel-container, p-flow__bg-img, p-flow__carousel のスタイルは全て削除されます。
    これらの要素はHTMLに存在しないため、関連するCSSも不要です。 */

/* PC版ではSP版のラッパーとSwiperを非表示（共通ルールの一部ですが、flow関連の箇所として記載） */
@media (min-width: 768px) {
    /* p-flow__content-sp-wrapper はHTMLから削除されているため、このルールは実質不要ですが、
       もし今後追加された場合に備えて残すなら、他の共通ルールと一緒に管理してください。 */
    /* .p-flow__content-sp-wrapper {
        display: none !important;
    } */
}

/* compareセクション */
.p-compare__content {
    position: relative;
    width: 100%;
    overflow: hidden; /* 背景がはみ出さないように */
    /* SP版の背景画像の縦横比を維持するためのpadding（必要に応じて調整） */
    /* 例：背景画像が幅375px、高さ200pxの場合 -> (200/375)*100 = 53.33% */
    padding-bottom: 53.33%; /* SP版背景画像の縦横比に合わせて調整してください */
}

.p-compare__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 背景画像を覆う */
    z-index: -1; /* 後ろに配置 */
}

/* PC版では compareセクションの背景画像を完全に非表示にする */
@media (min-width: 768px) {
    .p-compare__bg {
        display: none !important; /* PC版では背景画像を非表示 */
    }
    .p-compare__content {
        padding-bottom: 60px; /* PC版では背景画像がないため、コンテンツの高さ分のパディングを設定 */
        min-height: auto; /* 必要であればmin-heightをリセット */
    }
}

.p-compare__table-wrapper {
    overflow-x: auto; /* SP版で横スクロールを有効にする */
    -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
    width: 100%; /* 親要素の幅いっぱい */
    position: relative; /* 背景画像より手前に来るように */
    z-index: 1; /* 背景画像より手前に表示 */
    padding: 20px; /* テーブルの周りにパディング */
}

/* SP版の表をPC版では非表示 */
@media (min-width: 768px) {
    .p-compare__table-img.u-img-sp {
        display: none !important;
    }
    .p-compare__table-img.u-img-pc {
        display: block !important;
        width: 100%; /* PC版の表は幅に合わせる */
        max-width: 800px; /* 必要に応じて最大幅設定 */
        margin: 0 auto;
    }
    .p-compare__table-wrapper {
        overflow-x: hidden; /* PC版では横スクロールを無効に */
        max-width: 900px; /* PC版テーブルの最大幅 */
        margin: 0 auto; /* PC版テーブルの中央寄せ */
        padding: 40px 20px; /* PC版テーブルのパディング */
    }
}

/* その他のセクションは、画像を配置するだけなので、特別なCSSは不要 */
/* 各セクションのタイトル画像など、必要に応じて個別調整 */
.p-fv img,
.p-worry img,
.p-solution img,
.p-reason img,
.p-howto img {
    width: 100%;
    height: auto;
}


/* ------------------------------------- */
/* Utility: 汎用的なスタイル */
/* ------------------------------------- */
/* 例えば、特定の幅で中央寄せにするクラスなど */
.u-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 画像中央寄せ */
.u-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------- */
/* お問い合わせフォームセクションのスタイル */
/* ------------------------------------- */
.p-form {
    width: 100%; /* フォームセクション全体の幅を100%に */
    padding: 60px 20px; /* 上下のパディング調整 */
    background-color: #F2F2F2; /* フォーム背景色 */
}

.p-form__title {
    margin-bottom: 40px; /* タイトル下の余白 */
    font-size: 32px; /* タイトルのフォントサイズ */
    color: #333; /* タイトルの色 */
    font-weight: bold;
    text-align: center; /* タイトルを中央寄せ */
}

.p-form__inner {
    max-width: 700px; /* フォーム全体の最大幅をここで制御 */
    margin: 0 auto;
    padding: 30px 20px;
    background-color: #fff; /* フォーム内の背景色 */
    border-radius: 10px; /* フォームの角を丸くする */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* フォームに影を付ける */
}

.p-form__group {
    margin-bottom: 25px; /* 各入力グループ間の余白 */
    text-align: left; /* ラベルのテキストを左寄せ */
}

.p-form__label {
    display: block; /* ラベルをブロック要素にして改行 */
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px; /* ラベルと入力欄の間の余白 */
}

.p-form__required {
    font-size: 12px;
    color: #ff4d4d; /* 必須マークの色 */
    margin-left: 5px;
}

.p-form__input,
.p-form__textarea {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 9999px; /* 入力欄の角を完全に丸くする */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); /* わずかな内側の影 */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.p-form__input:focus,
.p-form__textarea:focus {
    border-color: #054BAB; /* フォーカス時の枠線色 */
    box-shadow: 0 0 0 3px rgba(5, 75, 171, 0.2); /* フォーカス時の影 */
    outline: none; /* デフォルトのアウトラインを消す */
}

.p-form__textarea {
    resize: vertical; /* 縦方向のみリサイズ可能にする */
    border-radius: 15px; /* テキストエリアは完全に丸くすると不自然なので、適度に丸める */
}

.p-form__privacy-policy {
    text-align: center;
    margin-bottom: 30px;
}

.p-form__privacy-policy label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
    display: inline-flex; /* チェックボックスとテキストを横並びに */
    align-items: center;
}

.p-form__privacy-policy input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2); /* チェックボックスを少し大きく */
}

.p-form__privacy-policy a {
    color: #054BAB; /* プライバシーポリシーリンクの色 */
    text-decoration: underline;
    margin-left: 5px;
}

.p-form__submit-btn {
    display: block;
    width: 100%;
    max-width: 300px; /* ボタンの最大幅 */
    margin: 0 auto;
    padding: 15px 20px;
    background-color: #054BAB; /* 送信ボタンの色 */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 9999px; /* ボタンの角を完全に丸くする */
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
}

.p-form__submit-btn:hover {
    background-color: #043a85; /* ホバー時の色を少し暗く */
    opacity: 0.9;
}

/* -------------------------------------
    ご利用方法セクション（p-howto）のスタイル
------------------------------------- */
.p-howto {
    position: relative; /* 子要素のabsolute配置の基準 */
    width: 100%;
    text-align: center;
}

/* PC版のコンテンツラッパー */
.p-howto__pc-content {
    position: relative;
    width: 100%;
}

/* SP版のコンテンツラッパー */
.p-howto__sp-content {
    position: relative;
    width: 100%;
}

/* ボタンを画像の上に重ねて配置 */
.p-howto__cta-btn-pc {
    position: absolute;
    top: 30%; /* 垂直方向の中央に配置 */
    left: 65%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    z-index: 10;
    width: 60%;
    max-width: 300px;
}

/* SP版ボタンの配置を調整 */
.p-howto__cta-btn-sp {
    position: absolute;
    top: 34%; /* 垂直方向の中央に配置 */
    left: 76%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    z-index: 10;
    width: 60%;
    max-width: 90px;
}

/* 送信ボタンのスタイルを強制的に適用 */
.wpcf7-submit {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    padding: 15px 20px !important;
    background-color: #FFED1E !important; /* 黄色 */
    color: #333 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: background-color 0.3s, opacity 0.3s !important;
}

/* ホバー時のスタイルも強制的に適用 */
.wpcf7-submit:hover {
    background-color: #e6d31a !important; /* ホバー時の色を少し暗く */
    opacity: 0.9 !important;
}