/*基本*/ body { width: 800px; margin: 0 auto; background-color: #f9f8ed; font-family: 'Segoe UI', 'Yu Gothic', sans-serif; } /*基本*/ table { width: 800px; border-collapse: collapse; } /*基本*/ th { border-style: solid; background-color: #e5e1bb; padding: 4px; border-color: #a39929; border-width: 1px; } /*基本*/ td { border-style: solid; background-color: #ffffff; padding: 4px; border-color: #a39929; border-width: 1px; } /*基本*/ strong { color: red; } /*基本*/ h1 { text-align: center; font-size: 210%; } /* 約70% of 通常300% */ /*基本*/ h2 { text-align: center; font-size: 175%; } /* 約70% of 通常250% */ /*基本*/ h3 { text-align: center; font-size: 140%; } /* 約70% of 通常200% */ /*基本*/ h4 { text-align: center; font-size: 112%; } /* 約70% of 通常160% */ /*基本*/ ul { list-style-position: inside; } /*基本*/ img { max-width: 100%; } /*基本*/ @media screen and (max-width: 600px) { body { width: 100%; margin: 0; } table { width: 100%; box-sizing: border-box; }} /*ヘッダー*/ table.top { border-width: 0px; margin: 0 auto; } /*ヘッダー*/ table.topb { border-width: 0px; margin: 0 auto; table-layout: fixed; width: 100%; } /*ヘッダー*/ td.top0 { background-color: #e5e1bb; height: 75px; width: 100px; padding:0; border:0; } /*ヘッダー*/ td.top0b { background-color: #e5e1bb; height: 55px; padding: 0; border: 0; overflow: hidden; } /*ヘッダー*/ td.top-co { background-color: #f9f8ed; line-height: 2.2em; padding: 0px; height: 35px; width: 100px; } /*ヘッダー*/ td.top-coe { background-color: #f9f8ed; line-height: 1.0em; padding: 0px; height: 35px; width: 200px; } /*ヘッダー*/ td.top-cob { background-color: #f9f8ed; line-height: 1.8em; padding: 0px; height: 30px; width: auto; white-space: nowrap; } /*ヘッダー*/ td.top1 { border-top: 3px solid black; border-bottom: 0px solid black; border-right: 2px solid black; border-left: 0px solid black; } /*ヘッダー*/ td.top1b { border-top: 2px solid black; border-bottom: 0px solid black; border-right: 2px solid black; border-left: 0px solid black; } /*ヘッダー*/ td.top2 { border-top: 3px solid black; border-bottom: 0px solid black; border-right: 2px solid black; border-left: 0px solid black; } /*ヘッダー*/ td.top3 { border-top: 3px solid black; border-bottom: 0px solid black; border-right: 0px solid black; border-left: 2px solid black; } /*ヘッダー*/ td.top3b { border-top: 2px solid black; border-bottom: 0px solid black; border-right: 0px solid black; border-left: 2px solid black; } /*ヘッダー*/ td.top4 { border-top: 2px solid black; border-bottom: 2px solid black; border-right: 2px solid black; border-left: 0px solid black; } /*ヘッダー*/ td.top5 { border-top: 2px solid black; border-bottom: 2px solid black; border-right: 0px solid black; border-left: 2px solid black; } /*ヘッダー*/ td.top6 { border-top: 2px solid black; border-bottom: 2px solid black; border-right: 0px solid black; border-left: 2px solid black; } /*ヘッダー*/ td.top7 { border-top: 2px solid black; border-bottom: 0px solid black; border-right: 0px solid black; border-left: 0px solid black; } /*ヘッダー*/ td.top8b { border-top: 2px solid black; border-bottom: 2px solid black; border-right: 2px solid black; border-left: 0px solid black; } /*ヘッダー*/ a.top-co { text-decoration: none; font-weight: 700; color: #000000; font-size: 12px; padding: 0px 0px; text-align: center; display: block; width: 100%; height: 100%; } /*ヘッダー*/ a.top-coe { text-decoration: none; font-weight: 700; color: #000000; font-size: 12px; padding: 0px 0px; text-align: center; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /*ヘッダー*/ a.top-cob { text-decoration: none; font-weight: 700; color: #000000; font-size: 12px; padding: 0px 0px; text-align: center; display: block; width: 100%; height: 100%; } /*ヘッダー*/ a.top1 { background-color: #a39929;} a.top1:hover { background-color: #800000; color: #ffffff; } /*ヘッダー*/ a.top2 { background-color: #f59a70;} a.top2:hover { background-color: #f03610; color: #ffffff; } /*ヘッダー*/ a.top3 { background-color: #7fc7a6;} a.top3:hover { background-color: #007c6e; color: #ffffff; } /*ヘッダー*/ a.top4 { background-color: #e5e1bb;} a.top4:hover { background-color: #a39929; color: #ffffff; } /*ヘッダー*/ a.top5 { background-color: #d3d3d3;} a.top5:hover { background-color: #808080; color: #ffffff; } /*ヘッダー*/ a.top6 { background-color: #87ceeb;} a.top6:hover { background-color: #6495ed; color: #ffffff; } /*ヘッダー*/ img.top-svg { max-width: 100%; height: auto; display: block; margin-left: 12px; margin-top: 9px; } /*ヘッダー*/ img.top-bus { width: 100%; height: 100%; object-fit: cover; display: block; } /*ヘッダー*/ img.center { display: block; margin: 0 auto; } /*ヘッダー*/ .menu-pc { display: block; } /*ヘッダー*/ .menu-mobile { display: none; } /*ヘッダー*/ @media screen and (max-width: 600px) { .menu-pc { display: none; } .menu-mobile { display: block; } td.top0, td.top-co, td.top-co2 { width: 100%; box-sizing: border-box; } img { max-width: 100%; height: auto; }} /*文章中央寄せ　　*/ .center { text-align: center; } /*文章右寄せ　　　*/ .right { text-align: right; } /*tdの見た目をth化*/ td.th { background-color: #e5e1bb; padding: 4px; border-width: 1px; text-align: center; font-weight: bolder; } /*tdとthの間の項目*/ td.th2 { background-color: #dcdcdc; padding: 4px; border-width: 1px; text-align: center; font-weight: bolder; } /*tdの中身を上寄せ*/ td.vat { vertical-align: top; } /*系統No.リンク白a*/ a.number { font-weight: bolder; color: #ffffff; text-align: center; vertical-align: middle; text-decoration: none; display: block; width: 100%; height: 100%; } /*〃No.非リンク白 */ td.number { font-weight: bolder; color: #ffffff; text-align: center; } /*触れると拡大する*/ a.bigger:hover { color: #ff0000; font-size: 110%; } /*RESP路線表br制御*/ .resp { display: none; } /*RESP路線表br制御*/ @media screen and (max-width: 600px) { .resp { display: inline; }} /*土休日運休系注記*/ .text-s { font-size: smaller; color: #ff0000; } /*ゆいレール定期券*/ .text-s2 { font-size: smaller; } /*画像を左寄せする*/ .img-left { margin: 10px 10px 10px 10px; float: left; } /*画像を右寄せする*/ .img-right { margin: 10px 10px 10px 10px; float: right; } /*画像の回込み解除*/ .img-clear { clear: both; } /*n列目td中央寄せ */ tbody.td2-5 td:nth-child(n+2):nth-child(-n+5) { text-align: center; } /*「ゆいレール・バスの運賃」*/ /*n列目td中央寄せ */ tbody.td2-3 td:nth-child(n+2):nth-child(-n+3) { text-align: center; } /*「ゆいレール・バスの運賃」*/ /*n列目td中央寄せ */ tbody.td1 td:nth-child(n+1):nth-child(-n+1) { text-align: center; } /*凡例*/ /*n列目td中央寄せ */ tbody.td3 td:nth-child(n+3):nth-child(-n+3) { text-align: center; } /*凡例*/ /*n列目td中央寄せ */ tbody.td4 td:nth-child(n+4):nth-child(-n+4) { text-align: center; } /*英語版路線表*/ /*n列目tdをth的に */ tbody.tdth td:first-child { text-align: center; background-color: #e5e1bb; padding: 4px; border-width: 1px; font-weight: bolder; white-space: nowrap; } /*更新履歴*//*トップページ*/ /*n列目td中央寄等 */ tbody.td4-5 td:nth-child(n+4):nth-child(-n+5) { white-space: nowrap; text-align: center; } /*バス路線表概要・時刻*/ /*路線番号白表示 */ tbody.td1a td:nth-child(n+1):nth-child(-n+1) { text-align: center; font-weight: bolder; color: #ffffff; } /*本島外バス路線表*/ /*td画像中央寄せ */ table.line img { vertical-align: middle; } /*本島外バス路線表（本表と注記）*/ /*td-widthを規定　*/ .width5 { border-width: 0px; padding: 0px; width: 5%; } /*「ゆいレール・バスの運賃」*/ /*td-widthを規定　*/ .width10 { border-width: 0px; padding: 0px; width: 10%; } /*「ゆいレール・バスの運賃」*//*当団体について*/ /*td-widthを規定　*/ .width15 { border-width: 0px; padding: 0px; width: 15%; } /*凡例*/ /*td-widthを規定　*/ .width20 { border-width: 0px; padding: 0px; width: 20%; } /*「ゆいレール・バスの運賃」*/ /*td-widthを規定　*/ .width25 { border-width: 0px; padding: 0px; width: 20%; } /*「空港～美ら海」*//*本島外バス路線表（注記）*//*responsive-top*/ /*td-widthを規定　*/ .width30 { border-width: 0px; padding: 0px; width: 30%; } /*「ゆいレール・バスの運賃」*//*本島外バス路線表（注記）*/ /*td-widthを規定　*/ .width35 { border-width: 0px; padding: 0px; width: 35%; } /*「ゆいレール・バスの運賃」*//*凡例*/ /*td-widthを規定　*/ .width40 { border-width: 0px; padding: 0px; width: 40%; } /*「ゆいレール・バスの運賃」*/ /*td-widthを規定　*/ .width45 { border-width: 0px; padding: 0px; width: 45%; } /*「ゆいレール・バスの運賃」*/ /*td-widthを規定　*/ .width50 { border-width: 0px; padding: 0px; width: 50%; } /*「ゆいレール・バスの運賃」*//*TM*//*「空港～北谷」*//*当団体について*/ /*td-widthを規定　*/ .width70 { border-width: 0px; padding: 0px; width: 70%; } /*「ゆいレール・バスの運賃」*/ /*td-widthを規定　*/ .width90 { border-width: 0px; padding: 0px; width: 90%; } /*当団体について*/ /*問合せフォーム　*/ form { max-width: 70%; margin: auto; } /*問合せフォーム　*/ label { display: block; margin-top: 10px; } /*問合せフォーム　*/ input { width: 100%; padding: 8px; margin-top: 5px; } /*問合せフォーム　*/ textarea { width: 100%; padding: 8px; margin-top: 5px; } /*問合せフォーム　*/ button { margin-top: 15px; padding: 10px; width: 100%; } /*問合せフォーム　*/ .error { color: red; font-size: 0.9em; } /*iframe 　*/ .iframe { width: 100%; height: 600px; border: none; } /*〃表注記*/ .s { background-color: #ffddff; } /*〃表注記*/ .a { background-color: #fafa93; } /*〃表注記*/ .b { background-color: #ffffff; } /*〃表注記*/ .c { background-color: #dbdbd9; } /*〃表注記*/ p.notice { line-height: 1.9; } /*〃表注記*/ img.notice { vertical-align: middle; } /*運行頻度*/ tr.s td { background-color: #ffddff; } /*運行頻度*/ tr.a td { background-color: #fafa93; } /*運行頻度*/ tr.c td { background-color: #dbdbd9; }