@charset "euc-jp";

main { font-size: 14px; line-height: 1.6em;}
    
/* ヒッチメンバー適合検索システム */
#hitchSearch h2 { 
    margin: 0 0 30px;
    font-size: 23px; line-height: 1.4em; text-align: center;}

#hitchSearch h2 br { display: none;}

@media screen and (max-width:399px){
    #hitchSearch h2 br { display: block;}
}

/* Aタグ */
#hitchSearch a,
#hitchList a { color: #00f; text-decoration: underline; cursor: pointer; transition: all 0.4s; }
#hitchSearch a:hover,
#hitchList a:hover { color: #ff9600; }

/* SOREX・SUNTREX・TightJapan（ロゴ） */
#hitchSearch .logo { max-width: 550px; margin: 0 auto 35px; font-size: 0;}
#hitchSearch .logo img { display: inline-block; width: 30%; height: auto; max-width: 168px; max-height: 100%; }
#hitchSearch .logo img:nth-child(1) { margin: 0 2% 0 0;}
#hitchSearch .logo img:nth-child(2) { margin: 0 2% 0 2%;}
#hitchSearch .logo img:nth-child(3) { margin: 0 0 0 2%;}

#hitchSearch select {
    display: block;
    box-sizing: border-box; width: 100%; height: 40px; margin: 0 0 10px; padding: 2px 10px 0;
    border: solid 1px #333; border-radius: 8px;
    background: #fff;
    font-size:16px;}

#hitchSearch select[disabled] {
    border-color: #b2b2b2;
    background: #e5e5e5;
    color: #b2b2b2;}

/* ※予め車検証にて…… */
#hitchSearch .asterisk {position: relative; padding: 0 0 0 18px;}
#hitchSearch .asterisk::before {content:'※'; position: absolute; top: 0; left: 0;}

/**============================================================================================**/

/**============================================================================================**/
/* 検索結果一覧 */
#srxResult,
#sunResult,
#titResult { padding: 30px 0; border-bottom: solid 1px #9b9b9b;}

/* ロゴ */
#srxResult img[width="220"] { max-width: 220px; }
#sunResult img[width="240"] { max-width: 240px; }
#titResult img[width="210"] { max-width: 210px; margin: 0 0 10px;}

#srxResult .dis-tbl,
#sunResult .dis-tbl {width: 100%; margin: 0 0 10px;}

#srxResult .dis-tbl > div,
#sunResult .dis-tbl > div { display: table-cell; }

/* ロゴ右 材質・形状、ハーネス、等級について */
#srxResult .dis-tbl > div:nth-child(2),
#sunResult .dis-tbl > div:nth-child(2) { text-align: right; vertical-align: bottom; }

@media screen and (max-width:524px){
  #srxResult .dis-tbl > div,
  #sunResult .dis-tbl > div { display: block; padding: 0 0 3px; }

  #srxResult .dis-tbl > div:nth-child(2),
  #sunResult .dis-tbl > div:nth-child(2) { text-align: left; }
}

/* 適合表 */
#hitchList .body { margin: 0 0 10px; border:solid 1px #999;}
#hitchList .body > *,
#hitchList .body > .dis-tbl_tab > * { padding: 5px; }
#hitchList .body > *:not(:nth-last-child(1)) { border-bottom: dashed 1px #999; }

/* 適合型式 */
#hitchList .katashiki{ background:#eee; word-wrap: break-word;}

/* 材質 */
#hitchList .dis-tbl_tab { 
    width: 100%; 
    padding: 0; 
    background: #ffd; 
    font-size: 12px; line-height: 1.3em; text-align: center;}
#hitchList .dis-tbl_tab > * { display: table-cell; vertical-align: middle;}
#hitchList .dis-tbl_tab > *:not(:nth-last-child(1)) { border-right: solid 1px #000;}

/**========================================**/
/* .remodal（共通） */
.remodal table { 
    width: 100%; margin: 0; 
    border-color: #ccc; border-collapse: collapse;
    font-size: 14px; line-height: 1.3em;}

/* 閉じる */
.remodal button {
    display: block;
    width: 110px; margin: 15px auto 0; padding: 12px 0;
    border: none; outline: none;
    background: #81c784;
    color: #fff; text-align: center;}

/**========================================**/
/* モーダル各詳細のタイトル */
#srxmtrl > strong,
#sunmtrl > strong,
#sunharness > strong,
.hitchToukyu > strong { 
    display: block;
    margin:0 0 5px; padding:5px; 
    background:#FFD17D; 
    font-size: 16px; line-height: 1.3em;}

/* 材質・形状 */
#srxmtrl,
#sunmtrl { font-size: 0;}

#srxmtrl .dis-ilblk,
#sunmtrl .dis-ilblk { 
    box-sizing: border-box; width: 50%; margin: 0 auto 20px; 
    vertical-align: top;}

#srxmtrl .dis-ilblk:nth-child(odd),
#sunmtrl .dis-ilblk:nth-child(odd) { padding: 0 10px 0 0;} 
#srxmtrl .dis-ilblk:nth-child(even),
#sunmtrl .dis-ilblk:nth-child(even) { padding: 0 0 0 10px;} 

@media screen and (max-width:699px){
    #srxmtrl .dis-ilblk,
    #sunmtrl .dis-ilblk { display: block; width: 100%; max-width: 400px;}

    #srxmtrl .dis-ilblk:nth-child(odd), 
    #sunmtrl .dis-ilblk:nth-child(odd), 
    #srxmtrl .dis-ilblk:nth-child(even),
    #sunmtrl .dis-ilblk:nth-child(even) { padding: 0;} 
}

#srxmtrl th,
#sunmtrl th { background: #dfdfdf; font-weight: lighter;}

#srxmtrl th[colspan="2"],
#sunmtrl th[colspan="2"] { background: #ccc; text-align: center;}

#srxmtrl td[colspan="2"],
#sunmtrl td[colspan="2"] { text-align: center;}

/**========================================**/
/* ハーネス形状 */
#sunharness { margin: 50px 0 0; }

#sunharness ul {
    display: table; table-layout: fixed;
    width: 100%; margin: 0 0 20px; 
    border-collapse: collapse;}

#sunharness li { display: table-row;}

#sunharness li p {
    display: table-cell;
    padding: 4px; border: solid #333 1px;}

#sunharness li p:nth-of-type(1) {width: 210px;}

#sunharness .posi-rlt {padding: 0 0 0 210px;}
#sunharness .posi-rlt img { position: absolute; top: 0; left: 0;}
#sunharness .posi-rlt .p_5 { background:#EAEAEA;}
#sunharness .posi-rlt strong { 
    display: block; 
    margin: 0 0 10px; padding: 5px; 
    background:#B00004; 
    color:#FFF;}

#sunharness .posi-rlt .p_5 p:not(.asterisk) { margin: 0 0 10px;}

#sunharness .posi-rlt .asterisk {position: relative; padding: 0 0 0 18px;}
#sunharness .posi-rlt .asterisk::before {content:'※'; position: absolute; top: 0; left: 0;}
    
@media screen and (max-width:599px){
    #sunharness ul,
    #sunharness li,
    #sunharness li p { display: block;  border: none;}

    #sunharness li { margin: 10px 0 0; padding: 0 0 5px; border-bottom: solid #333 1px;}

    #sunharness .posi-rlt {padding:5px; background:#EAEAEA;}
    #sunharness .posi-rlt .p_5 { padding:0; background:none;}
    #sunharness .posi-rlt  img {position: static; margin: 10px 0 0;}
}
/**========================================**/
/* 等級 */
.hitchToukyu { display: none; margin: 50px 0 30px; }
.hitchToukyu table { margin: 10px 0; text-align: center;}
.hitchToukyu th { background: #ebebeb;}

/**========================================**/
/* 
   「該当するヒッチメンバーがありません。」とは？
   適合型式、補足事項の一部表記が異なる場合は？
*/

#hitchComment {
    margin: 30px auto; padding: 10px; 
    border:#2A3F8C 2px solid;}
    
#hitchComment strong { font-size:18px; line-height: 1.6em;}

#hitchComment hr { margin: 12px 0}

/**============================================================================================**/

/**============================================================================================**/
/* 参考情報・関連商品 */
#hitchLinks { margin: 30px 0 0; padding: 30px 0 0; border-top: solid 1px #9b9b9b;}
    
#hitchLinks strong { display: block; margin: 0 0 20px; font-size: 16px;}

#hitchLinks ul { margin: 0 0 50px;}
#hitchLinks li {position: relative; margin: 0 0 15px; padding: 0 0 0 20px;}
#hitchLinks li::before {
    content: '';
    position: absolute; top: 5px; left: 5px;
    width: 0;  height: 0;
    border-style: solid;  border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #000;}

@media screen and (max-width:699px){
    #hitchLinks p { text-align: center;}    
}

/**============================================================================================**/

/**============================================================================================**/
/* remodal.min.js用css */
.remodal-overlay {
    display: none;
    position: fixed; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; z-index: 9999;
    background: rgba(43, 46, 56, 0.9);}

.remodal-wrapper {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000;
    overflow: auto;
    padding: 10px;
    text-align: center;}

.remodal,
.remodal-wrapper::after { display: inline-block; vertical-align: middle;}

.remodal-wrapper::after {
  content: "";
  height: 100%; margin-left: -0.05em;}
  
.remodal {
    position: relative; 
    box-sizing: border-box; width: 100%; max-width: 700px; padding: 10px;
    background: #fff; outline: none;
    font-size: 14px; line-height: 1.3em; text-align: left;}

.remodal img { width: auto; height: auto; max-width: 100%; max-height: 100%; vertical-align: top;}

/* LastUp2024.09.09_shinkai */