/***** レイアウトスタイル *****/
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address
{
margin : 0;
padding : 0;
}
input,select
{
outline-color : red;
}
body
{
width : 100%; /* IEで横スクロールバーが出たときの保険 */
}
.header
{
position: fixed;
z-index : 9999;
top : 0px;
left : 0px;
width : 100%;
height : 34px; /* サイトロゴの高さに合わせて調節 */
border-bottom : 6px double navy;
background-color : white;
}
.headerright
{
position : relative;
top : -24px;
left : 300px;
}
span.chgoffice
{
font-weight : normal;
cursor : pointer;
border : outset lightgray 2px;
color : black;
background-color : lightgray;
}
.container
{
margin-top : 40px;
background : #dfdfdf;
}
.login
{
width : 100%;
background : #ffffff;
}
.loginsub
{
padding : 10px 16px 24px 16px;
}
.error
{
width : 100%;
}
.errorsub
{
padding : 10px 16px 24px 16px;
}
.main
{
width : 100%; /* メニューと本文をひとくくりにするためのクラス */
background : #dfdfdf;
}
.sidemenu
{
width : 200px;
float : left;
}
.sidenotice
{
width : 190px;
float : left;
padding-top : 16px;
padding-left : 10px;
padding-bottom : 16px;
background : #dfdfdf;
border-right : 2px solid #666;
}
.logout
{
padding-top : 16px;
padding-bottom : 16px;
text-align : center;
}
.contents
{
/* margin-left : 200px;*/
/* float : left; /* 指定しないと、FirefoxやOperaで.sidemenuの下に回り込みます */
}
.footer
{
width : 100%;
clear : both;
border-top : 6px double navy;
padding-top : 4px;
padding-bottom : 8px;
}
.sidemenu ul
{
list-style-type : none;
}
#infoarea
{
float : left;
width : 100%;
/* background : #dfdfdf;*/
padding-top : 8px;
line-height : normal;
border-bottom : 2px solid #666;
}
#selectdata
{
padding-left : 2px;
/*
float : left;
width : 100%;
background : #dfdfdf;
padding-top : 8px;
*/
}
#subsel
{
padding-left : 16px;
}
/*
*/
/***** 左ペイン用メニュースタイル *****/
#lmenu
{
width : 200px;
margin : 0px;
border-style : solid solid none solid;
border-color : #000;
border-size : 1px;
border-width : 1px;
}
#lmenu li a
{
height : 32px;
voice-family : "\"}\"";
voice-family : inherit;
height : 24px;
text-decoration : none;
}
#lmenu li a:link, #lmenu li a:visited
{
color : #CCC;
display : block;
background : url("image/lmenu.gif");
padding : 8px 0 0 10px;
}
#lmenu li a:hover, #lmenu li #current
{
color : #FFF;
background : url("image/lmenu.gif") 0 -32px;
padding : 8px 0 0 10px;
}
/*
*/
/***** タブメニュースタイル *****/
#tabs
{
padding-left : 2px;
/*
float : left;
width : 100%;
background : #dfdfdf;
*/
font-size : 93%;
/*
line-height : normal;
border-bottom : 2px solid #666;
*/
}
#tabs ul
{
margin : 0;
padding : 10px 10px 0 16px;
list-style : none;
}
#tabs li
{
display : inline;
margin : 0;
padding : 0;
}
#tabs a
{
float : left;
background : url("image/tableft.gif") no-repeat left top;
margin : 0;
padding : 0 0 0 4px;
text-decoration : none;
}
#tabs a span
{
float : left;
display : block;
background : url("image/tabright.gif") no-repeat right top;
background-color: #000;
padding : 5px 15px 4px 6px;
color : #CCC;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span
{
float : none;
}
/* End IE5-Mac hack */
#tabs a:hover span
{
color : #FFF;
}
#tabs a:hover
{
background-position : 0% -42px;
}
#tabs a:hover span
{
background-position : 100% -42px;
}
#tabs #current a
{
background-position : 0% -42px;
color : #FFF;
}
#tabs #current a span
{
background-position : 100% -42px;
color : #FFF;
}
/*
*/
/***** コンテンツスタイル *****/
#contents
{
padding-top : 16px;
padding-left : 16px;
padding-right : 16px;
padding-bottom : 16px;
/* border-left : 2px solid #666;*/
background : #ffffff;
}
#contents2
{
margin-top : 24px;
padding-top : 24px;
padding-left : 16px;
padding-right : 16px;
padding-bottom : 16px;
border-top : 2px solid #666;
/* border-left : 2px solid #666;*/
background : #ffffff;
}
/***** リストのページインデックス *****/
.pageindex
{
padding-top : 24px;
padding-bottom : 8px;
padding-left : 0px;
padding-right : 0px;
text-align : center;
}
.pageindex a
{
color : blue;
font-weight : bold;
text-decoration : none;
}
.pageindex a:hover
{
color : blue;
font-size : xx-large;
text-decoration : none;
}
/***** フッタロゴスタイル *****/
#footerlogo
{
padding-left : 16px;
}
/***** フッタコピーライトスタイル *****/
#copyright
{
position : relative;
top : -19px;
text-align : right;
font-color : #666;
font-size : 80%;
padding-right : 16px;
}
/***** タイトルスタイル *****/
.tstitle
{
font-family : Impact, sans-serif;
/* font-family : Arial;*/
/* font-family : Times New Roman;*/
font-size : 32px;
font-weight : bold;
color : teal;
position : absolute;
letter-spacing : 0.1em;
border-top : 5px solid teal;
border-bottom : 5px solid teal;
margin-left : 24px;
}
/***** ログインページテーブルスタイル *****/
.logintbl
{
border-collapse : collapse;
}
/***** モーダルカバーDIVスタイル *****/
div#modalcover
{
position : fixed;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
background : url("./image/alphapng.png");
z-index : 10000;
display : none;
}
/***** モーダルダイアログ *****/
div#subwindow
{
position : absolute;
top : 25%;
left : 25%;
width : 50%;
height : 50%;
background-color: #fff;
border : solid 3px blue;
}
/***** タイトルバー *****/
div#titlebar
{
position : absolute;
top : -34px;
left : -3px;
width : 100%;
height : 26px;
padding-top : 2px;
background : url("./image/titlebar.png");
font-weight : bold;
color : white;
cursor : default;
border : solid 3px blue;
font-size : large;
white-space : nowrap;
overflow : hidden;
}
/***** 閉じるボタン *****/
div#closebtn
{
position : absolute;
top : 0px;
right : 0px;
height : 24px;
width : 24px;
}
/***** ダイアログコンテンツ *****/
div#dialogcontent
{
position : absolute;
top : 0px;
width : 100%;
height : 100%;
background-color: white;
overflow : auto;
white-space : nowrap;
}
/***** 営業所選択 *****/
#navigation a:link, #navigation a:visited
{
color : black;
text-decoration : none;
}
#navigation a:hover, #navigation a#curoff
{
color : black;
text-decoration : none;
background-color: lightgreen;
}
/***** お知らせ *****/
div.info
{
position : relative;
top : 0;
left : 0;
margin-top : 48px;
padding-left : 32px;
padding-top : 8px;
padding-bottom : 8px;
border-top : solid 1px gray;
border-bottom : solid 3px gray;
}
div.info div.stamp_normal
{
position : absolute;
top : -32px;
left : 0px;
height : 24px;
width : 24px;
background-image: url(image/info_normal.png);
}
div.info div.stamp_high
{
position : absolute;
top : -32px;
left : 0px;
height : 24px;
width : 24px;
background-image: url(image/info_high.png);
}
div.info div.subject
{
position : absolute;
top : -32px;
left : 28px;
font-size : large;
color : navy;
font-weight : bold;
}
div.info div.date
{
position : absolute;
top : -16px;
right : 24px;
font-size : small;
}
/***** ステーションリストテーブルスタイル *****/
table.stlist
{
border-collapse : collapse;
border : 4px ridge #aaa;
}
table.stlist th
{
background : #dfdfdf;
border-top : 4px ridge #aaa;
border-bottom : 3px double black;
border-left : 1px dashed black;
border-right : 1px dashed black;
height : 1.6em;
padding-left : 1em;
padding-right : 1em;
white-space : nowrap;
vertical-align : middle;
}
table.stlist td
{
border-top : 1px solid black;
border-bottom : 1px solid black;
border-left : 1px dashed black;
border-right : 1px dashed black;
height : 1.3em;
padding-left : 1em;
padding-right : 1em;
white-space : nowrap;
vertical-align : middle;
text-align : center;
}
table.stlist tr:hover td
{
background : #F2D4CC;
cursor : pointer;
}
.smallbtn
{
font-style : normal;
font-size : xx-small;
}
.deletebtn
{
font-style : normal;
font-size : xx-small;
color : red;
}
/***** 普通のテーブルスタイル（プロパティ表示等） *****/
table.general
{
border-collapse : collapse;
border : 4px ridge #aaa;
}
table.general th
{
background : #dfdfdf;
border-top : 1px solid black;
border-bottom : 1px solid black;
border-left : 1px solid black;
border-right : 3px double black;
height : 1.3em;
padding-left : 1em;
padding-right : 1em;
white-space : nowrap;
vertical-align : middle;
text-align : left;
}
table.general td
{
border-top : 1px solid black;
border-bottom : 1px solid black;
border-left : 1px solid black;
border-right : 1px solid black;
height : 1.3em;
padding-left : 1em;
padding-right : 1em;
white-space : nowrap;
vertical-align : middle;
text-align : left;
}
/***** 普通のテーブルスタイル２（ヘッダ：２重線、センター） *****/
table.general2
{
border-collapse : collapse;
border : 4px ridge #aaa;
}
table.general2 th
{
background : #dfdfdf;
border-top : 1px solid black;
border-bottom : 3px double black;
border-left : 1px dashed black;
border-right : 1px dashed black;
height : 1.3em;
padding-left : 1em;
padding-right : 1em;
white-space : nowrap;
vertical-align : middle;
text-align : center;
}
table.general2 td
{
border-top : 1px solid black;
border-bottom : 1px solid black;
border-left : 1px dashed black;
border-right : 1px dashed black;
height : 1.3em;
padding-left : 1em;
padding-right : 1em;
white-space : nowrap;
vertical-align : middle;
text-align : left;
}
/***** エラーメッセージスタイル *****/
.errormsg
{
color : red;
font-weight : bold;
}
/***** サブタイトルスタイル *****/
div.subtitle
{
margin-bottom : 0.5em;
font-size : large;
font-weight : bold;
color : navy;
}
/***** 地図(OSM)スタイル *****/
#canvas .olControlAttribution
{
font-size:13px;
bottom:3px;
}
/***** モーダルカバーDIVスタイル *****/
div#modalcover2
{
position : fixed;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
background : url("./image/alphapng.png");
z-index : 10000;
display : none;
}
/***** モーダルダイアログ *****/
div#subwindow2
{
position : absolute;
top : 10%;
left : 10%;
width : 80%;
height : 80%;
background-color: #fff;
border : solid 3px blue;
}
/***** タイトルバー *****/
div#titlebar2
{
position : absolute;
top : -34px;
left : -3px;
width : 100%;
height : 26px;
padding-top : 2px;
background : url("./image/titlebar.png");
font-weight : bold;
color : white;
cursor : default;
border : solid 3px blue;
font-size : large;
white-space : nowrap;
overflow : hidden;
}
div#dlgtitle
{
position : absolute;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
}
/***** 閉じるボタン *****/
div#closebtn2
{
position : absolute;
top : 0px;
right : 0px;
height : 24px;
width : 24px;
}
/***** ダイアログコンテンツ *****/
div#dialogcontent2
{
position : absolute;
top : 0px;
width : 100%;
height : 100%;
background-color: white;
overflow : auto;
white-space : nowrap;
}
/***** ダイアログ内iframe *****/
iframe#dialogframe
{
position : absolute;
top : 0px;
width : 100%;
height : 100%;
border : none;
}
/***** ダイアログ内content *****/
div.dlgcontent
{
padding : 1em;
border : none;
}
/***** Xスモールフォント *****/
.xsmallfont
{
font-style : normal;
font-size : x-small;
}
/***** タイムテーブル項目 *****/
table#TTHead
{
border-collapse : collapse;
border : solid 1px gray;
}
table#TTHead th
{
text-align : left;
font-weight : normal;
border : solid 1px gray;
background-color: lightgray;
padding-left : 1em;
padding-right : 1em;
padding-top : 0.2em;
padding-bottom : 0.2em;
}
table#TTHead th.radio
{
text-align : left;
font-weight : normal;
border : solid 1px gray;
background-color: lightgray;
padding-left : 0em;
padding-right : 0em;
padding-top : 0.2em;
padding-bottom : 0.2em;
}
/***** タイムテーブル（小） *****/
table.TTSmall
{
border-collapse : collapse;
border : solid 1px gray;
}
table.TTSmall th
{
text-align : center;
font-weight : normal;
border : solid 1px gray;
background-color: lightgray;
}
table.TTSmall td
{
text-align : left;
font-weight : normal;
border : solid 1px gray;
padding-left : 0.4em;
padding-right : 0.4em;
}
/***** 予約時間指定 *****/
table.ResvTbl
{
border-collapse : collapse;
border : solid 1px gray;
}
table.ResvTbl th
{
border : solid 1px gray;
background-color: lightgray;
padding-left : 1em;
padding-right : 1em;
padding-top : 0.2em;
padding-bottom : 0.2em;
}
table.ResvTbl td
{
border : solid 1px gray;
padding-left : 1em;
padding-right : 1em;
padding-top : 0.2em;
padding-bottom : 0.2em;
}
table.ResvTbl td.hide
{
border-top : solid 1px white;
border-bottom : solid 1px white;
padding-left : 1em;
padding-right : 1em;
padding-top : 0.2em;
padding-bottom : 0.2em;
}
/* Credit Card registration */
.card{margin: 20px 5px ;background-color:none;border:none;}
.navbar-collapse .card:hover{
transform : scale(1.05);
transition : .3s ease-in-out;
background-color:rgb(174, 174, 243);
}
.menuDesign{
background-color:lightgoldenrodyellow;
height:40px;
max-width: 250px;
border: 1px solid navy;
}
.menuDesign-active{
background-color:navy;
height:40px;
max-width: 250px;
}
.menuDesign h1, .menuDesign-active h1{
font-size: 20px;
font-weight:bolder;
position:absolute;
text-align:center;
width:30px;
height:30px;
border-radius: 50%;
top:-10px;
left:10px;
vertical-align: middle;
}
.menuDesign-active h1{
background-color: lightgoldenrodyellow;
color:navy;
}
.menuDesign h1{
background-color: #478af5;
color:white;
}
.menuDesign .card-body, .menuDesign-active .card-body{
vertical-align: middle;
text-align:center;
font-size:1.2vw;
font-weight:bold;
padding-top:10px;
padding-bottom: 10px;
}
.menuDesign-active .card-body{
color:white;
vertical-align: middle;
}
.menuDesign .card-body{
color:navy;
}
.card-header-blue, .card-header-red{
padding: .75rem 1.25rem;
margin-bottom: 0;
border-radius:20px 20px 0px 0px;
border-bottom: 1px solid rgba(0,0,0,1);
color:white;
font-size:40px;
font-weight:bolder;
}
.card-header-blue{
background-color: #478af5;
}
.card-header-red{
background-color: rgb(236, 116, 116);
}
.card-header-blue h1{
margin: auto;
vertical-align: middle;
font-weight: bolder;
}
.card-payment .card-body{
background-color:rgb(253, 252, 241);
width:100%;
}
h1.tokutei {
text-align: center;
}
table.tokutei {
background-color: #999999;
font-size: 13px;
text-align: left;
margin: auto;
}
table.tokutei th {
background-color: #CBF1F5;
}
table.tokutei td {
background-color: #FFFFFF;
}
#documentdiv{
width:100%;
height:300px;
}
#menseki, #noc, #jiko_intro{
background-color: lightgray;
padding:10px;
text-align: center;
border-radius:10px;
width:250px;
margin:10px;
float : left;
}
#menseki button, #noc button, #jiko_intro button{
background-color: dimgray;
border-radius:20px;
height:30px;
color:white;
margin-top: 10px;
margin-bottom: 10px;
}
.input-add{
background-color: #CCC;
width:350px;
margin: 5px;
}
.inputfield{
width:220px;
}
#extra-passenger .input-group-text{
border-radius: 5px 0px 0px 5px;
padding:0px 5px;
color:#656363;
font-size:12px;
height:30px;
}
.del-passenger{
background-color: red;
padding: 0px 5px;
color:#f7f4d7;
}
#add-passenger{
background-color: #6363ec;
width:10em;
padding: 0px 10px;
color: #fdfbef;
margin:5px;
border-radius:5px;
font-size: 14px;
}
#disclaimer{
background-color:white;
width: 100%;
}
.iframe {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
.iframe-vid {
position: absolute;
top: 0;
bottom: 0;
right: 10%;
width: 80%;
height:100%;
}
.headerdiv{
border:1px solid black;
width: 80%;
margin: auto;
}
table.headerTable{
border:none;
}
table.headerTable,
table.priceTable,
table.price-bottom-table {
text-align: center;
width: 80%;
margin: auto;
margin-top: 20px;
}
tr.no-width td.top-td {
height: 40px;
font-size: larger;
font-weight: bolder;
}
table.priceTable td,
table.price-bottom-table td{
border: 1px solid black;
}
tr.first td:first-child,
tr.second2 td:first-child{
width:100px;
}
tr.pink6 td:nth-child(3n+4),
tr.pink5 td:nth-child(3n+3) {
background-color: #c0fce0;
width: 35px;
}
tr.pink6 td:nth-child(2n+3),
tr.pink5 td:nth-child(2n+2) {
width: 40px;
}
tr.pink4 td:nth-child(2n+4),
tr.pink3 td:nth-child(2n+3) {
background-color: #fcc0c8;
width: 35px;
}
tr.pink4 td:nth-child(2n+3),
tr.pink3 td:nth-child(2n+2) {
width: 40px;
}
.eq-width {
width: 33%;
}
.bottom-table td {
padding: 10px 10px;
}
.price-imgdiv {
width: 80%;
margin: auto;
padding-top: 20px;
}
.price-imgdiv h1 {
font-size: large;
font-weight: bolder;
}
@media (max-width: 576px)
{
/* Force table to not be like tables anymore */
table.general,
.general th,
.general tr {
display: block;
/* width: 100vw; */
}
/* Hide table headers (but not display: none;, for accessibility) */
.general tr {
border: 1px solid #ccc;
}
.general td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
/* width: 50%; */
/* padding-left: 50%; */
}
.genreal td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.general td{
width:100vw;
}
}