/*************************************************
 guide/index_test.php
 SEO改善版
*************************************************/


/*==========================
 共通
==========================*/

*{
    box-sizing:border-box;
}

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

.inner{
    width:min(1200px,92%);
    margin:auto;
}


/*==========================
 リード
==========================*/

.guide_lead{

    padding:60px 0 25px;

    text-align:center;

}

.guide_lead h1{

    margin:0 0 25px;

    color:#22325d;

    font-size:38px;

    line-height:1.45;

    font-weight:700;

}

.guide_lead p{

    max-width:980px;

    margin:0 auto 18px;

    color:#444;

    font-size:16px;

    line-height:2;

    text-align:left;

}


/*==========================
 課題カード
==========================*/

.guide_cards{

    padding:50px 0 70px;

}

.guide_cards_title{

    margin:0 0 40px;

    text-align:center;

    color:#22325d;

    font-size:34px;

    font-weight:700;

    line-height:1.5;

}

.guide_cards_title small{

    display:block;

    margin-top:12px;

    color:#666;

    font-size:16px;

    font-weight:400;

}

.guide_card_list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin:0;

    padding:0;

    list-style:none;

}

.guide_card{

    background:#fff;

    border-radius:12px;

    border:1px solid #dfe6ef;

    box-shadow:0 3px 12px rgba(0,0,0,.05);

    transition:.18s;

}

.guide_card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.10);

}
/*------------------
 カード本体
------------------*/

.guide_card a{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    text-decoration:none;

    color:#333;

    padding:22px 18px;

    min-height:220px;

}

/*------------------
 タイトル
------------------*/

.guide_card h3{

    margin:0 0 18px;

    color:#22325d;

    font-size:18px;

    font-weight:700;

    line-height:1.6;

}

.guide_card h3::after{

    content:"";

    display:block;

    width:36px;

    height:3px;

    margin:18px auto 0;

    background:#f7b500;

}

/*------------------
 SEOキーワード
------------------*/

.guide_keyword{

    margin:0 0 10px;

    color:#1f4f9a;

    font-size:14px;

    line-height:1.8;

    font-weight:700;

}

/*------------------
 製品名
------------------*/

.guide_product{

    margin:0;

    color:#666;

    font-size:13px;

    line-height:1.8;

    flex:1;

}

/*------------------
 ボタン
------------------*/

.guide_card_btn{

    display:inline-block;

    margin-top:16px;

    padding:11px 26px;

    border-radius:999px;

    background:#1f4f9a;

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.2s;

}

.guide_card:hover .guide_card_btn{

    background:#f7b500;

    color:#333;

}

/*==========================
 SEO本文
==========================*/

.guide_text{

    max-width:980px;

    margin:70px auto;

    padding:0 20px;

}

.guide_text h2{

    margin:0 0 24px;

    padding-left:18px;

    border-left:6px solid #f7b500;

    color:#22325d;

    font-size:32px;

    line-height:1.5;

}

.guide_text h3{

    margin:40px 0 18px;

    color:#22325d;

    font-size:24px;

}

.guide_text p{

    margin:0 0 18px;

    color:#444;

    font-size:16px;

    line-height:2;

}

.guide_text ul{

    margin:20px 0 30px 24px;

}

.guide_text li{

    margin-bottom:10px;

    line-height:1.9;

}

.guide_text strong{

    color:#1f4f9a;

}

.solution_label{
    display:inline-block;
    padding:6px 16px;
    background:#f7b500;
    color:#22325d;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:16px;
}
/*==========================
 モータ評価（画像→HTML）
==========================*/

.guide_solution{

    max-width:1200px;

    margin:70px auto;

    padding:0 20px;

    scroll-margin-top: 120px;

}

.guide_solution_heading{

    margin:0;

    text-align:center;

    color:#22325d;

    font-size:34px;

    font-weight:700;

    line-height:1.5;

}

.guide_problem_lead{

    margin:10px 0 24px;

    text-align:center;

    color:#555;

    font-size:18px;

    font-weight:700;

}


/*------------------
 お悩みカード
------------------*/

.problem_list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    max-width:820px;

    margin:0 auto 35px;

    padding:0;

    list-style:none;

}

.problem_list li{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:75px;

    padding:14px 18px;

    background:#eef7ff;

    border:1px solid #d8e7f5;

    border-radius:12px;

    box-shadow:0 3px 10px rgba(0,0,0,.05);

    text-align:center;

    font-size:18px;

    line-height:1.5;

    font-weight:700;

    transition:.2s;

}

.problem_list li:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.problem_list strong{

    color:#e53935;

}


/*==========================
 おすすめ製品
==========================*/

.solution_title{

    margin:0 0 18px;

    text-align:center;

    color:#22325d;

    font-size:28px;

    font-weight:700;

}

.solution_card{

    display:flex;

    align-items:center;

    gap:28px;

    max-width:1200px;

    margin:0 auto;

    padding:28px 30px;

    background:#f7fbff;

    border:1px solid #d8e5f5;

    border-radius:14px;

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.solution_img{

    flex:0 0 180px;

    text-align:center;

}

.solution_img img{

    max-width:160px;

}

.solution_body{

    flex:1;

}

.solution_label{

    margin-bottom:10px;

    padding:5px 14px;

    font-size:12px;

}

.solution_body h4{

    margin:0 0 20px;

    color:#22325d;

    font-size:32px;

    line-height:1.5;

    font-weight:700;

}

.solution_body p{

    margin:0 0 18px;

    color:#444;

    font-size:16px;

    line-height:2;

}

.solution_body strong{

    color:#1f4f9a;

}

.solution_body .guide_card_btn{

    margin-top:15px;

}

/*--------------------------------
 製品カード
--------------------------------*/

.solution_products{

    display:grid;

    grid-template-columns:repeat(2,460px);

    justify-content:center;

    gap:28px;

}

.solution_product{

    width:460px;

    padding:22px;

    display:flex;

    flex-direction:column;

    align-items:center;

    background:#fff;

    border:1px solid #d8e5f5;

    border-radius:12px;

    box-shadow:0 3px 10px rgba(0,0,0,.05);

    transition:.25s;

}

.solution_product:hover{

    background:#eef7ff;

    border-color:#1f4f9a;

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(31,79,154,.15);

}

.solution_product h5{

    margin:0 0 16px;

    text-align:center;

    color:#22325d;

    font-size:24px;

    line-height:1.5;

}

.solution_product h5 span{

    display:block;

    margin-top:4px;

    font-size:17px;

    font-weight:600;

}

.solution_product_text{

    margin:0 0 20px;

    font-size:15px;

    line-height:1.9;

    text-align:left;

    flex:1;

}

.solution_product img{

    width:170px;

    height:auto;

    object-fit:contain;

    display:block;

    margin:0 0 20px;

}

.solution_product_category{

    margin:0 0 8px;

    color:#1f4f9a;

    font-size:13px;

    font-weight:700;

}

.guide_card_btn{

    align-self:center;

    margin-top:auto;

}

.solution_product_footer{

    display:flex;

    flex-direction:column;   /* ←横並びを縦並びにする */

    align-items:center;

    gap:12px;

    margin-top:10px;

}

.solution_product_footer img{

    width:150px;

    height:auto;

    object-fit:contain;

}

.solution_product_footer .guide_card_btn{

    margin:0;

    align-self:center;

}
/* カードが1枚だけの場合は中央配置 */
.solution_products:has(.solution_product:only-child){
    grid-template-columns:460px;
}

/*==========================
  SP
==========================*/

@media screen and (max-width:760px){

.guide_lead{

    padding:40px 20px 10px;

}

.guide_lead h1{

    font-size:28px;

}

.guide_lead p{

    font-size:15px;

    line-height:1.9;

}

.guide_cards{

    padding:35px 20px 45px;

}

.guide_cards_title{

    font-size:26px;

}

.guide_card_list{

    grid-template-columns:1fr;

    gap:18px;

}

.guide_card a{

    min-height:auto;

    padding:24px 18px;

}

.guide_card h3{

    font-size:18px;

}

.guide_keyword{

    font-size:13px;

}

.guide_product{

    font-size:12px;

}

.guide_text{

    margin:40px 20px;

    padding:0;

}

.guide_text h2{

    font-size:24px;

}

.guide_text h3{

    font-size:20px;

}

.guide_text p{

    font-size:15px;

}

/*==========================
 モータ評価（SP）
==========================*/

.guide_solution{

    margin:45px 20px;

    padding:0;



}

.guide_solution_heading{

    font-size:26px;

}

.guide_problem_lead{

    margin:12px 0 25px;

    font-size:17px;

}

.problem_list{

    grid-template-columns:1fr;

    gap:15px;

    margin-bottom:40px;

}

.problem_list li{

    min-height:auto;

    padding:18px;

    font-size:17px;

}

.solution_title{

    font-size:24px;

    margin-bottom:20px;

}

.solution_card{

    display:block;

    padding:28px 22px;

}

.solution_img{

    margin-bottom:24px;

}

.solution_img img{

    max-width:180px;

}

.solution_body h4{

    margin:0 0 14px;

    color:#22325d;

    font-size:28px;

    line-height:1.4;

    font-weight:700;

}

.solution_body p{

    margin:0 0 14px;

    color:#444;

    font-size:15px;

    line-height:1.8;

}

}