@charset "UTF-8";
/* ==========================================================
   タカラスタンダード パートナーショップの導線（2026-10-04 新規）
   トップ（parts/top-content.php）だけで読み込み
   .tk-mvbtn … MVの小さいボタン ／ .tk-banner … 横長バナー（サービス内容の下）
   リンク先はどちらも施工事例一覧 /works/
   ========================================================== */

/* ===== PC（431px以上） ===== */

/* MVの小さいボタン：お問い合わせ／LINEの上に置くため、右側の上余白を減らす（元 230px） */
@media screen and (min-width:431px){
    #hmp .area-01 .right{ padding-top:150px;}
}
#hmp .tk-mvbtn{ display:flex; align-items:center; width:100%; height:72px; margin-bottom:14px; background:#fff; border:2px solid #CDE2F8; border-radius:50px; padding:0 26px 0 30px; box-sizing:border-box; text-decoration:none; box-shadow:0 4px 14px rgba(0,91,133,.10); transition:.3s;}
#hmp .tk-mvbtn:hover{ border-color:#00A3DF; opacity:1;}
#hmp .tk-mvbtn__logo{ width:150px; flex-shrink:0; padding-right:20px; border-right:1px solid #CDE2F8;}
#hmp .tk-mvbtn__logo img{ width:100%; display:block;}
#hmp .tk-mvbtn__text{ flex:1; padding-left:20px; color:#0D2940; font-size:16px; font-weight:bold; line-height:1.3; text-align:left;}
#hmp .tk-mvbtn__text small{ display:block; color:#00A3DF; font-size:11px; letter-spacing:1px;}
#hmp .tk-mvbtn__arrow{ width:30px; height:30px; border-radius:50%; background:#00A3DF; color:#fff; font-size:18px; line-height:28px; text-align:center; flex-shrink:0;}

/* 横長バナー（幅はTOTOバナー .rp-banner と同じ1200px） */
.tk-banner{ width:1200px; max-width:calc(100% - 40px); margin:70px auto; box-sizing:border-box;}
.tk-banner *{ box-sizing:border-box;}
.tk-banner__inner{ display:flex; align-items:center; gap:30px; background:#fff; border:1px solid #CDE2F8; border-radius:30px; padding:20px 40px 20px 20px; text-decoration:none; box-shadow:0 8px 24px rgba(0,91,133,.08); transition:.3s;}
.tk-banner__inner:hover{ border-color:#00A3DF; opacity:1;}
.tk-banner__photo{ width:340px; height:210px; border-radius:20px; overflow:hidden; flex-shrink:0;}
.tk-banner__photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:.5s;}
.tk-banner__inner:hover .tk-banner__photo img{ transform:scale(1.05);}
.tk-banner__body{ flex:1; min-width:0; text-align:left;}
.tk-banner__brand{ display:flex; align-items:center; gap:12px; margin:0 0 14px;}
.tk-banner__brand img{ height:20px; width:auto; display:block;}
.tk-banner__brand span{ color:#00A3DF; font-size:11px; font-weight:bold; letter-spacing:2px; line-height:1.5; border:1px solid #00A3DF; border-radius:50px; padding:3px 10px;}
.tk-banner__title{ color:#0D2940; font-size:23px; font-weight:bold; line-height:1.5; letter-spacing:.04em; margin:0 0 10px; font-family:"Zen Maru Gothic",sans-serif; word-break:auto-phrase;}
.tk-banner__lead{ color:#526675; font-size:13.5px; line-height:1.8; letter-spacing:.02em; margin:0; word-break:auto-phrase;}
.tk-banner__action{ width:220px; flex-shrink:0;}
.tk-banner__btn{ display:block; text-align:center; background:#00A3DF; border:2px solid #00A3DF; color:#fff; border-radius:50px; font-size:16px; font-weight:bold; padding:16px 20px; box-shadow:0 4px 12px rgba(0,163,223,.2); transition:.3s;}
.tk-banner__btn::after{ content:"›"; margin-left:12px; font-size:19px;}
.tk-banner__inner:hover .tk-banner__btn{ background:#fff; color:#00A3DF;}

/* ===== スマホ（430px以下） ===== */
@media screen and (max-width:430px){
    /* MV：ボタン1つ分（約70px）高くする（元 650px） */
    #hmp{ height:720px;}
    #hmp .tk-mvbtn{ height:60px; margin-bottom:10px; padding:0 14px 0 20px;}
    #hmp .tk-mvbtn__logo{ width:110px; padding-right:14px;}
    #hmp .tk-mvbtn__text{ padding-left:14px; font-size:14px;}
    #hmp .tk-mvbtn__text small{ font-size:10px;}
    #hmp .tk-mvbtn__arrow{ width:26px; height:26px; font-size:16px; line-height:24px;}

    .tk-banner{ margin:50px auto;}
    .tk-banner__inner{ display:block; padding:12px 12px 22px; border-radius:20px; text-align:center;}
    .tk-banner__photo{ width:100%; height:170px; border-radius:14px; margin-bottom:16px;}
    .tk-banner__body{ text-align:center;}
    .tk-banner__brand{ justify-content:center; margin-bottom:10px;}
    .tk-banner__brand img{ height:16px;}
    .tk-banner__title{ font-size:18px; letter-spacing:.02em;}
    .tk-banner__title br{ display:none;}
    .tk-banner__lead{ font-size:12.5px; margin-bottom:16px; padding:0 6px;}
    .tk-banner__action{ width:100%; padding:0 6px;}
    .tk-banner__btn{ font-size:15px; padding:14px;}
}