/* ------------------------------ ページ全体のベース ------------------------------ */
/* ブラウザ独自の余白をゼロにする（必須） */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    scroll-behavior: smooth;
}

.warp_lp {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* ------------------------------ 各セクションの共通設定 ------------------------------ */
.auto_lp {
    width: 100%;
    position: relative;
    padding: 100px 0;  /* 上下の余白（適宜調整してください） */
    font-family: "Noto Sans JP", sans-serif;
}

.auto_lp .inner {
    width: 1280px;
    margin: 0 auto; /* 中央寄せ */
    position: relative;
    z-index: 10;
    font-family: "Noto Sans JP", sans-serif;
}

.auto_lp .column_center{
    text-align: center;
}

.auto_lp .txt_black {
    color: #000;
}

.auto_lp .txt_blue {
    color: #0171BB;
}

.auto_lp .txt_white {
    color: #FFF;
}

.auto_lp .txt_accent{

}

.auto_lp .txt_accent::before {
  content: "";
  display: inline-block;
  width: 8px;           /* アクセントの横幅 */
  height: 24px;          /* アクセントの縦幅 */
  background-color: #0171BB; 
  border-radius: 4px;
  margin-right: 12px;    /* テキストとの間隔 */
  flex-shrink: 0;        /* 潰れないように固定 */
}

.auto_lp .txt_accent_w::before {
    content: "";
    display: inline-block;
    width: 8px;           /* アクセントの横幅 */
    height: 24px;          /* アクセントの縦幅 */
    background-color: #FFF; 
    border-radius: 4px;
    margin-right: 12px;    /* テキストとの間隔 */
    flex-shrink: 0;        /* 潰れないように固定 */
  }

.auto_lp .sectitle{
    font-size:32px;
    margin: 0;
    font-weight: bold;
    border-bottom: none;
    padding-bottom: 0;
    padding-left: 0;
    text-align: unset;
}

.auto_lp .subtitle{
    font-size:16px;
    margin: 0 0 5px 0;
}

.auto_lp .smalltitle{
    font-size:24px;
    margin: 30px 0;
}

.auto_lp p{
    font-size:18px;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    text-align: unset;
    color: #000;
    margin: 1em 0;
}

.auto_lp h3{
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    text-align: unset;
    font-weight: bold;
    border-bottom: 0;
    padding-left: 0;
    padding-bottom: 0;
    color: #000;
}

.auto_lp h4{
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    text-align: unset;
    font-weight: bold;
    border-bottom: 0;
    padding-left: 0;
    padding-bottom: 0;
    color: #000;
}

.auto_bg_blue {
    background-color: #0171BB;
    width: 100%;
    display: block;
}

.auto_lp .auto_bg_gray{
    background-color: #F0F0F0;
}

/* テキスト内の強調マーカー */
.auto_lp .blue_bar {
    background: linear-gradient(transparent 60%, rgba(1, 113, 187, 0.2) 60%);
    font-weight: bold;
    padding: 0 2px;
}

/* --- 白いボタン --- */
.auto_lp .btn-white {
    display: inline-block;
    background-color: #ffffff;
    color: #0070bc;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 22px 100px;
    border-radius: 50px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: none; 
    cursor: pointer;
}

.auto_lp .btn-white:hover {
    background-color: #f8f8f8;
    transform: translateY(-3px);
}

/* --- 青いボタン --- */
.auto_lp .btn-blue {
    display: inline-block;
    background-color: #0171BB;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 22px 100px;
    border-radius: 50px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: none; 
    cursor: pointer;
}

.auto_lp .btn-blue:hover {
    background-color: #005a9c;
    transform: translateY(-3px);
}



/* ------------------------------ セクション別設定 ------------------------------ */

/* ------------------- Heroセクション -------------------*/
.hero_section {
    padding: 0 !important;
    background: #fff;
}

/* 上段：白背景（テキストと画像が並ぶエリア） */
.hero_upper {
    background-color: #fff;
}

.hero_upper_flex {
    display: flex;
    align-items: center;           /* ★テキストと画像を上下中央揃え */
    justify-content: space-between; /* ★両端に配置 */
    gap: 40px;
}

.hero_main_title {
    font-size: 90px;
    font-weight: bold;
    color: #0171BB;
    line-height: 1.1;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
}

.hero_sub_title {
    font-size: 40px;
    font-weight: bold;
    margin-top: 10px;
    font-family: "Noto Sans JP", sans-serif;
}

/* 移動してきた画像エリア */
.hero_visual {
    width: 580px; /* 画像のサイズ */
    flex-shrink: 0;
}

.hero_visual img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -60px; /* 必要に応じて、少し下（青背景側）にはみ出させる場合は margin-bottom をマイナスに */
}

/* 下段：青背景（文章とボタン） */
.hero_lower {
    background-color: #0171BB;
    padding: 60px 0;
    min-height: 200px;
    display: flex;
    align-items: center;
}

.hero_content_flex {
    display: flex;
    justify-content: space-between; /* ★文章とボタンを両端に */
    align-items: center;
    width: 100%;
    padding-right: 400px; 
}

.hero_text_left h3{
    font-size:28px;
    margin: 0 0 25px 0;
    line-height: 1.4em;
}



/* ------------------- 課題セクション ------------------- */
.kadai_section {
    padding: 100px 0 120px; /* 下側に斜め背景用の余白を確保 */
    background-color: #F0F0F0; /* ベースのグレー */
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* ★背景の斜めカット演出 */
.kadai_section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* 斜め部分の高さ */
    background-color: #fff; /* 下のセクションへと続く白 */
    /* 左上から中央下へ、中央下から右上へと切り抜く */
    clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
}

/* 上の箱（青い帯） */
.kadai_title_bar {
    background-color: #0171BB;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    padding: 30px 0;
    margin-top: 50px;
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
    line-height: 1.2;
}

/* 下の3つの箱の並び */
.kadai_flex_row {
    display: flex;
    gap: 7px;
    margin-top: 7px;
    position: relative;
    z-index: 10;
}

/* 個別の白い箱 */
.kadai_box {
    flex: 1;
    background: #fff;
    padding: 40px 20px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 軽い影で浮かせる */
}

.kadai_box_img {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.kadai_box_img img {
    max-height: 100%;
    width: auto;
}

/* 下のテキスト（14px固定） */
.kadai_box p {
    font-size: 14px !important;
    font-weight: bold;
    line-height: 1.6;
    color: #333;
    margin: 0;
}



/* ------------------- サポート体制セクション ------------------- */
.point_section {
    padding: 100px 0;
}

.point_section h4{
    margin: 0;
}

.point_label {
    display: inline-block;
    background: #fff;
    color: #0171BB;
    padding: 2px 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.point_header p {
    /*margin: 30px 0 60px;*/
    font-size: 16px;
    line-height: 1.8;
}

/* フレックス調整（上揃え） */
.align-start {
    align-items: flex-start;
}

/* ステップリスト */
.support_step_list {
    flex: 1;
}

.step_item {
    display: flex;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    min-height: 100px;
}

/* 青い番号部分 */
.step_num {
    background: #0171BB; /* 背景は濃い青 */
    width: 80px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; 
    border-radius: 3px 0 0 3px; 
}
/* 「DR」の文字 */
.step_num span.dr_label {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

/* 「0」の大きな数字 */
.step_num span.dr_count {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
}

/* ステップのテキスト内容 */
.step_content {
    padding: 15px 25px;
    text-align: left;
    margin: auto 0;
}
.step_content h4 { 
    color: #0171BB; 
    margin-bottom: 10px; 
    font-size: 20px;
    font-weight: bold;
    border-bottom: none;
    padding-left: 0;
    padding-bottom: 0;
    margin-left: unset;

}
.step_content p { 
    font-size: 14px; 
    color: #333; 
    margin: 0;
 }

/* 矢印 */
.step_arrow {
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
}

/* 右側の画像エリア全体 */
.support_visual_area {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 画像同士の縦の隙間 */
}

/* 画像を包む枠 */
.img_box {
    width: 93%;
    border-radius: 15px; /* 角丸 */
    overflow: hidden;    /* 画像が角丸からはみ出さないように */
    background-color: #D9D9D9; /* 読み込み前の下地 */
    line-height: 0;      /* 画像下の不要な隙間をカット */
}

/* 画像自体の設定 */
.img_box img {
    width: 100%;
    height: auto;
    display: block;
}

/* 横並びにする */
.support_example_flex {
    display: flex;
    gap: 15px;
    align-items: stretch; /* 白い箱と画像の高さが揃う */
}

/* テキスト：白い背景を置くだけ */
.example_card {
    flex: 2;         /* 幅を広めに */
    background: #fff;
    padding: 30px;
    border-radius: 12px;
}

/* 画像：角丸にして横に置くだけ */
.example_visual {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    position: relative; /* 画像を配置する基準にする */
}

.example_visual img {
    position: absolute; /* 枠に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;       /* 枠の横幅いっぱい */
    height: 100%;      /* ★枠の縦幅（白い箱と同じ高さ）いっぱい */
    object-fit: cover; /* ★超重要：枠に合わせて画像を切り抜いてフィットさせる */
    display: block;
}

.support_example_flex h5{
    font-size: 20px; 
    margin: 0 0 10px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.support_example_flex li{
    font-size: 14px;
    color: #333;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    margin-top: 5px;
}

.support_footer h4{
    margin-top: 50px;
}


/* ------------------- お問い合わせセクション ------------------- */
.contact_btn_area {
    display: flex;
    justify-content: center;
}

.link_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 400px;
    height: 30px;
    background-color: #0070bc;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50px;  /* 完全な丸み */
    
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 112, 188, 0.2);
}
.link_button a{
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #0071bc;
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.link_button:hover {
    background-color: #0071bc;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 112, 188, 0.3);
}
.link_button a:hover{
    text-decoration: none;
    opacity: 1;
    color: #fff;
}

/* --- メールアイコン（CSSで作成） --- */
.icon_mail {
    display: inline-block;
    width: 30px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 2px;
    position: relative;
}

/* メールの封筒のV字部分 */
.icon_mail::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 4px;
    width: 18px;
    height: 10px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    width: 14px;
    height: 14px;
    top: -4px;
    left: 6px;
}


/* ------------------- コンポーネントバナーセクション ------------------- */
.component_section {
    /* セクションの前後に余白を作る場合 */
    padding: 60px 0; 
    background-color: #fff; /* セクション自体の背景 */
}

/* ★リンク兼、背景画像＋青レイヤーのコンテナ */
.component_banner_link {
    display: block;
    width: 100%;
    max-width: 1280px;
    height: 300px;
    margin: 0 auto; 
    border-radius: 15px; 
    overflow: hidden; 
    text-decoration: none; 
    background: 
        linear-gradient(rgba(1, 113, 187, 0.6), rgba(1, 113, 187, 0.6)),
        url('/wp-content/themes/oec/img/auto_lp/alp_link02.png') no-repeat center center;
    background-color: #0171BB; 
    transition: opacity 0.3s ease;
}

.dtv_banner_link {
    display: block;
    width: 100%;
    max-width: 1280px;
    height: 300px;
    margin: 0 auto; 
    border-radius: 15px; 
    overflow: hidden; 
    text-decoration: none; 
    background: 
        linear-gradient(rgba(1, 113, 187, 0.6), rgba(1, 113, 187, 0.6)),
        url('/wp-content/themes/oec/img/auto_lp/alp_link01.png') no-repeat center center;
    background-color: #0171BB; 
    transition: opacity 0.3s ease;
}

/* ホバー時に少し薄くする */
.component_banner_link:hover {
    opacity: 0.8;
}

.dtv_banner_link:hover {
    opacity: 0.8;
}

/* ホバー時に少し薄くする */
.component_banner_link:hover {
    opacity: 0.8;
}

.dtv_banner_link:hover {
    opacity: 0.8;
}

/* innerの中中央寄せ */
.component_banner_link .inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* innerのデフォルトパディングをリセット */
}

.dtv_banner_link .inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* innerのデフォルトパディングをリセット */
}


/* ★中央のテキスト */
.component_lead_txt {
    color: #fff; /* 白文字 */
    font-size: 24px; /* 見栄えの良いサイズ */
    font-weight: bold;
    letter-spacing: 0.1em; /* 文字間隔を少し広く */
    position: relative;
    padding-right: 30px; /* 矢印用のスペース */
}

/* ★テキスト右の矢印（▶） */
.component_lead_txt::after {
    content: "▶";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直中央寄せ */
    font-size: 18px; /* 矢印を少し小さく */
}



/* ------------------------------ 汎用フレックスレイアウト ------------------------------ */
.flex-container {
    display: flex;
    align-items: center;       /* 上下中央揃え */
    justify-content: space-between; /* 両端に配置 */
    gap: 60px;                 /* アイテム間の余白 */
}

/* テキストブロック（可変幅） */
.flex-item-text {
    flex: 1;
}

/* 画像ブロック（固定または比率指定） */
.flex-item-img {
    width: 450px;              /* 画像エリアの幅（お好みで調整） */
    max-width: 100%;
    text-align: right;
}

.flex-item-img img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;         /* 右寄せを確実にする */
}


/* ------------------------------ 汎用テーブルレイアウト ------------------------------ */

.auto_lp .table_caption{
    margin-bottom: 5px;
    font-weight: bold;
}

/* 外枠の角丸と幅100%を管理 */
.table-wrapper {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px; /* 角丸の調整 */
  overflow: hidden;   /* 角丸から中身がはみ出さないように */
  margin: 10px 0 100px 0;
}

/* テーブルスタイル */
.base-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background-color: #fff;
  border: none;
  font-family: "Noto Sans JP", sans-serif;
}

/* ヘッダー部分 */
.base-table thead th {
  background-color: #0171BB;
  color: #fff;
  text-align: left;
  padding: 15px;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  border-top: none;
}

table::after{
    border-top: none;
}

table tr th, table tr td{
    border-top: none;
}

/* セル共通設定 */
.base-table th, 
.base-table td {
  padding: 15px;
  border-bottom: 1px solid #eee;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
}

/* 左側の項目列（見出し） */
.base-table tbody th {
  width: 280px;      /* 項目列の幅を固定したい場合に調整 */
  color: #0171BB;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  font-weight: bold;
}

/* 右側の内容列 */
.base-table tbody td {
  color: #333;
}

/* 最後の行のボーダーを消して外枠と干渉させない */
.base-table tr:last-child th,
.base-table tr:last-child td {
  border-bottom: none;
}

.base-table img {
  width: 100%;
  border-radius:4px;
}

/*------------------------------グレーテーブルレイアウト------------------------------*/

/* 外枠の角丸と幅100%を管理 */
.table_g-wrapper {
  width: 60%;
  border: 1px solid #ddd;
  border-radius: 8px; /* 角丸の調整 */
  overflow: hidden;   /* 角丸から中身がはみ出さないように */
  margin: 10px auto 40px;
}

/* テーブルスタイル */
.base-table_g {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background-color: #fff;
  border: none;
  font-family: "Noto Sans JP", sans-serif;
}

/* ヘッダー部分 */
.base-table_g thead th {
  background-color: #0171BB;
  color: #fff;
  text-align: left;
  padding: 15px;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  border-top: none;
}

/* セル共通設定 */
.base-table_g th, 
.base-table_g td {
  padding: 15px;
  border-bottom: 1px solid #eee;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
}

/* 左側の項目列（見出し） */
.base-table_g tbody th {
  width:70px;      /* 項目列の幅を固定したい場合に調整 */
  color: #333;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  font-weight: bold;
}

/* 右側の内容列 */
.base-table_g tbody td {
  color: #333;
}

/* 最後の行のボーダーを消して外枠と干渉させない */
.base-table_g tr:last-child th,
.base-table_g tr:last-child td {
  border-bottom: none;
}






/* 親要素：中央寄せと配置の基準 */
.strength_header.column_center {
    position: relative;             /* 数字を絶対配置するための基準 */
    text-align: center;             /* テキストを中央寄せ */
    padding: 60px 0;                /* 数字の上下の「逃げ」を確保 */
    display: flex;
    flex-direction: column;         /* 縦並びを維持 */
    align-items: center;            /* 横方向の中央揃え */
    justify-content: center;
}

/* 背景の巨大な数字 */
.strength_num_bg {
    position: absolute;             /* 親要素の中央に固定 */
    top: 50%;                       /* 上下中央 */
    left: 50%;                      /* 左右中央 */
    transform: translate(-50%, -50%); /* 自身のサイズ分戻して完璧な中央へ */
    
    font-size: 200px;               /* 画像の比率に合わせたサイズ */
    font-weight: 900;               /* インパクトのある太さ */
    color: rgba(0, 0, 0, 0.04);     /* 非常に薄いグレー（重なりを邪魔しない） */
    line-height: 1;                 /* 余計な行間をカット */
    font-family: Arial, sans-serif; /* 幾何学的な数字用フォント */
    z-index: 1;                     /* 最背面 */
    pointer-events: none;           /* 文字選択などの邪魔をさせない */
}

/* テキストコンテンツ：数字より前に出す */
.strength_header .subtitle,
.strength_header .sectitle {
    position: relative;             /* z-indexを有効にするため */
    z-index: 2;                     /* 数字（z-index:1）より手前に配置 */
    margin: 0;                      /* ブラウザ規定の余白をリセット */
}

/* 青いサブタイトル */
.strength_header .subtitle.txt_blue {
    color: #0171BB;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 黒のメインタイトル */
.strength_header .sectitle {
    color: #000;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.05em;         /* 少し文字間を広げて高級感を出す */
}

.strength_wrap{
    padding: 50px 0;
}





/* ------------------------------ 
   記事・製品ページ 共通レイアウト
------------------------------ */

/* --- メインタイトル（新設） --- */
.article_title_container {
    padding: 60px 0 20px;
}

.section_article_title {
    font-size: 40px;            /* 指定のサイズ */
    font-weight: bold;
    color: #333;
    text-align: left;           /* 左揃え */
    margin: 0;
    line-height: 1.2;
}

/* --- 中タイトル（アクセント付き） --- */
.mid_title_section {
    padding: 15px 0;
}

.mid_title_area {
    margin-bottom: 30px;
}

/* 既存の青いアクセント棒を流用 */
.txt_accent.txt_blue::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 28px;
    background-color: #0171BB;
    border-radius: 4px;
    margin-right: 15px;
    vertical-align: -4px;
}

/* --- 小タイトル・本文・画像セット --- */
.small_section_item {
    margin-bottom: 80px;        /* セット同士の大きな余白 */
}

.small_section_item:last-child {
    margin-bottom: 0;
}

.tiny_title {
    font-size: 20px;            /* 小タイトルサイズ */
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
}

.article_text {
    margin-bottom: 25px;
}

.article_text p {
    font-size: 16px;            /* 本文の可読性重視サイズ */
    line-height: 1.8;
    color: #333;
}

/* --- フレキシブル画像グリッド --- */
.article_image_wrapper {
    display: flex;
    gap: 20px;                  /* 画像間の隙間 */
    width: 100%;
}

.image_item {
    flex: 1;                    /* 1枚なら自動で100%、2枚なら自動で50%に */
    min-width: 0;               /* フレックスの崩れ防止 */
}

.image_item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    background-color: #eee;     /* 画像がない時の仮色 */
}



/* ------------------------------ 
   製品ページ 特有レイアウト
------------------------------ */

/* --- 1. 製品紹介セクション（左右分割） --- */
.product_intro_container {
    padding: 60px 0 40px;
}

.product_intro_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px; /* 左右の隙間 */
}

.product_intro_text_area {
    flex: 1; /* テキストエリアが残りの幅を埋める */
}

.product_intro_image_area {
    width: 400px; /* 画像エリアの基本幅（画像サイズに合わせて調整可） */
    flex-shrink: 0;
    background-color: #f5f5f5; /* 画像がない時のプレースホルダー色 */
    border-radius: 8px;
    overflow: hidden;
}

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

/* --- 2. ★仕様リスト（汎用テーブル風リスト） --- */
.spec_list_wrapper {
    width: 100%;
    margin-bottom: 20px;
}

.spec_list {
    margin: 0;
    padding: 0;
    border-top: 1px solid #E0E0E0;
}

.spec_row {
    display: flex;
    border-bottom: 1px solid #E0E0E0;
    padding: 20px 0;
    align-items: flex-start;
}

/* 左側の項目名 */
.spec_term {
    width: 250px;
    flex-shrink: 0;
    color: #0171BB;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding-right: 20px;
}

/* 右側の内容 */
.spec_desc {
    flex-grow: 1;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* 項目名(dt)が存在しない場合、内容(dd)を100%幅にして左に詰める */
.spec_desc:only-child {
    width: 100%;
}

/* 備考テキスト */
.spec_note {
    font-size: 14px;
    color: #666;
    margin-top: 15px;
    line-height: 1.5;
}





/* ==========================================================================
   TOPページ専用・追加スタイル
   ========================================================================== */

/* ------------------------------ 背景色追加 ------------------------------ */
.auto_lp .auto_bg_white {
    background-color: #FFFFFF;
}

/* ------------------------------ ここから課題（TOP用） ------------------------------ */
.top_kadai_section {
    background-color: #f4f4f4;
    padding: 100px 0 150px;    /* V字のスペース */
    /* 左上(0,0) → 右上(100%,0) → 右下(100%,90%) → 中央先端(50%,100%) → 左下(0,90%) */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    position: relative;
    z-index: 1;
}

.top_kadai_section .inner {
    width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.label_flex {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.label_flex .kadai {
    background: #0070bc;
    color: #fff;
    padding: 10px 30px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 40px;
    margin: 0 0 30px 0;
}

/* --- スライダー外枠 --- */
.slider {
    width: 100vw;               /* 画面幅いっぱい */
    position: relative;
    left: 50%;                  /* 一旦画面中央へ */
    transform: translateX(-50%); /* コンテンツ幅を無視して全画面中央へ戻す */
    margin-bottom: 50px;
}

/* --- 動くトラック部分 --- */
.track {
    display: flex;
    width: max-content;         /* 中身に合わせて幅を広げる */
}

/* --- リスト本体 --- */
.list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: infinity-scroll 40s linear infinite; /* 40秒で一周 */
}

.list li {
    width: 320px;
    height: 120px;
    margin: 0 15px;
    background: #fff;
    color: #0070bc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;             /* 幅が縮まないように固定 */
    font-size: 16px;
    font-family:  "Noto Sans JP", sans-serif;
}

/* --- 無限スクロールアニメーション --- */
@keyframes infinity-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%); /* 1リスト分左に流れたらループ */
    }
}

/* ------------------------------ ここから解決セクション ------------------------------ */
.answer_section {
    background-color: #ffffff;
    padding-top: 50px;
}
.answer_section .sectitle {
    line-height: 1.6;
    font-family:  "Noto Sans JP", sans-serif;
}

/* ------------------------------ ここからソリューション ------------------------------ */
/* --- セクション外枠（V字シェイプ修正） --- */
.sol_section {
    background-color: #0070bc;
    color: #ffffff;
    padding: 120px 0 100px;
    
    /* 左上(0,0) → 中央凹み(50%, 10%) → 右上(100%,0) の順 */
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 100%, 0 100%);
    
    /* 前のセクションとの重なりを調整 */
    margin-top: -80px; 
}

/*  コンテンツ中央揃え (1280px)  */
.sol_section .inner {
    width: 1280px;
    margin: 0 auto;
}

.sol_section .sec_title_white,
.sol_section .sec_sub_white {
    text-align: center;
    width: 100%;
}

.sec_title_white {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.sec_sub_white {
    font-size: 20px;
    margin-bottom: 80px;
}

.auto_container {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.solution-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* 画像側（幅固定） */
.solution-image {
    flex: 0 0 580px;
}

.solution-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* テキスト側 */
.solution-content {
    flex: 1;
}

.item-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #FFF;
}

.item-subtitle {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #FFF;
}

.item-description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
    opacity: 0.9;
    color: #FFF;
}

/* ------------------------------ ここから選ばれる理由 ------------------------------ */

/* --- セクション全体 --- */
.reason_section {
  background-color: #fff;
  padding: 50px 0 0 0;
}

.reason_main_title {
  color: #333;
  font-size: 40px;
  text-align: center;
  margin-bottom: 60px;
  font-weight: bold;
  font-family:  "Noto Sans JP", sans-serif;
}

.reason_card {
  width: 100%;
}

/*  カードの中身（1280pxで中央寄せ＋高さ固定） */
.card_container {
  max-width: 1280px;
  margin: 0 auto;
  height: 350px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}

/* 数字（01, 02, 03） */
.reason_num {
  font-size: 140px;
  font-weight: bold;
  color: #0070bc;
  flex: 0 0 160px;
  line-height: 1;
  font-family: Arial, sans-serif;
}

.reason_text {
  flex: 1;
  padding: 0 40px;
}

.reason_text h3 {
  font-size: 28px;
  color: #0070bc;
  margin-bottom: 15px;
  font-weight: bold;
}

.reason_text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.reason_img {
  flex: 0 0 400px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.reason_img img {
  max-height: 260px; 
  width: auto;
  object-fit: contain;
}

/* ------------------------------ ここからよくある質問 ------------------------------ */

/* --- セクション全体 --- */
.qa_section {
    background-color: #f9f9f9; /* ほんの少しグレーにしてカードを立たせる */
    padding: 100px 0;
}

/* ヘッダー部分（中央寄せ） */
.qa_head {
    text-align: center;
    margin-bottom: 60px;
}

.qa_sub_title {
    color: #0070bc;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}

.qa_main_title {
    font-size: 56px;
    font-weight: bold;
    color: #0070bc;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
}

/* --- カードコンテナ（白背景の箱） --- */
.qa_card {
    background-color: #fff;
    width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

/* 各質問項目 */
.qa_item {
    padding: 40px 20px;
    border-bottom: 1px solid #eee; /* 項目間の区切り線 */
}

.qa_item:last-child {
    border-bottom: none; /* 最後の線は消す */
}

/* QとAの共通行スタイル */
.qa_row {
    display: flex;
    align-items: flex-start; /* 記号とテキストを上揃え */
    gap: 15px;
}

.row_q {
    margin-bottom: 15px;
}

/* 記号 (Q. / A.) */
.qa_symbol {
    font-size: 24px;
    font-weight: bold;
    color: #0070bc;
    flex: 0 0 30px; /* 幅を固定 */
    line-height: 1.2;
}

/* テキスト部分 */
.qa_text {
    font-size: 18px;
    line-height: 1.6;
    color: #000;
    margin: 0;
}

/* 質問文を太字に */
.row_q .qa_text {
    font-weight: bold;
    font-size: 20px;
    margin: 0;
}

/* 回答文の微調整 */
.row_a .qa_text {
    color: #000;
    margin: 0;
}





/* --- Heroセクション本体 --- */
.top_hero_section {
    position: relative;
    width: 100%;
    height: 800px; /* 画像の高さに合わせて調整してください */
    display: flex;
    align-items: center;
    /* 合成済みの一枚画像を背景に指定 */
    background-image: url('/wp-content/themes/oec/img/auto_lp/alp_top_main.png'); 
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 0 !important;
}

/* --- コンテンツエリア（左寄せ） --- */
.hero_content {
    color: #fff;
    padding-left: 20px; 
}

.top_hero_section h1 {
    font-size: 70px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #FFF;
}

.top_hero_section h2 {
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 30px;
    font-weight: bold;
    color: #FFF;
}

/* キャッチコピー部分：テキストに白い下敷きを敷く */
.hero_catch_copy h3 {
    font-size: 32px;
    line-height: 2; /* 行間を少し広げて、下敷きの重なりを防ぐ */
    font-weight: bold;
    display: inline;             /* テキストの長さに合わせるためにinlineにする */
    background-color: #fff;      /* 白い下敷き */
    color: #0070bc;              /* 文字色は青（画像に合わせて調整してください） */
    padding: 5px 15px;           /* 上下左右の余白 */
    box-shadow: 0px 0 0 #fff, 0px 0 0 #fff; /* 左右の余白を背景色で補完 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* キャッチコピーを囲む外枠の調整 */
.hero_catch_copy {
    border-left: none;  /* 以前の縦線を削除 */
    padding-left: 0;    /* パディングをリセット */
    margin-bottom: 40px;
    line-height: 2.0;   /* 行同士の隙間の調整 */
}

.top_hero_section p {
    font-size: 18px;
    margin-bottom: 190px;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    color: #FFF;
}




/* ==========================================================================
   アニメーション
   ========================================================================== */


/* --- ふわっと表示アニメーション（調整版） --- */
.js-fade {
    opacity: 0;
    transform: translateY(-30px); /* 移動距離を30pxから60pxに増やして動きを強調 */
    /* 0.8s を 1.5s くらいに伸ばすと、かなりゆったり動きます */
    transition: opacity 1.5s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
}

/* 実行時 */
.js-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}