@charset "utf-8";
/* ------------------------------------------------------------------------ */
/* 2016年 Myカレンダー機能追加に伴うスマホサイトリニューアル
/*
/* 予約フロー関連ページのスタイルシート
/* ▼ 該当ページ（該当ページの<body>に「.reserve」を設定）
/* (1)スタート時間・人数選択 ⇒ .startTime
/* (2)ログイン ⇒ .login
/* (3)Myカレンダー ⇒ .myCal
/* (4)
/* (5)
/* (6)
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* 予約フロー関連ページの共通スタイル
/* unique_id:.reserve
/* ------------------------------------------------------------------------ */
/* ▼ 予約フロー表示エリア(#reserveFlow)のスタイル ▼----------------------------- */
.reserve #reserveFlow{
position:relative;
width:100%;
min-height:50px;
margin-bottom:1px;
background-color: #0085cd;
-webkit-background-size: 2px 2px;
-moz-background-size: 2px 2px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
background-image: -webkit-linear-gradient(45deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%),
-webkit-linear-gradient(-135deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%);
background-image: -moz-linear-gradient(45deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%),
-moz-linear-gradient(-135deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%);
background-image: -ms-linear-gradient(45deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%),
-ms-linear-gradient(-135deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%);
background-image: -o-linear-gradient(45deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%),
-o-linear-gradient(-135deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%);
background-image: linear-gradient(45deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%),
linear-gradient(-135deg, #00649a 25%, #00649a 25%, transparent 25%, transparent 75%, #00649a 75%, #00649a 75%);
letter-spacing:-0.4em;
overflow:hidden;
}
.reserve #reserveFlow.subTitle{
text-align: center;
color: #FFF;
letter-spacing: 0em;
min-height: 0;
padding:15px 0;
}
.reserve #reserveFlow li{
display:inline-block;
letter-spacing:normal;
z-index:2;
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:#FFFFFF;
width:16%;
height:50px;
padding-top:10px;
padding-right:5px;
-webkit-transform:skew(12deg);
-moz-transform:skew(12deg);
-o-transform:skew(12deg);
background:#CCCCCC;
border-left:1px solid #999999;
text-align:center;
vertical-align:middle;
}
.reserve #reserveFlow li:nth-last-child(2){
position:relative;
border-right:1px solid #999999;
}
.reserve #reserveFlow li:last-child{
width:16%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
top:0;
right:0;
z-index:0 !important;
padding-right:0;
padding-left:8px;
-webkit-transform:skew(0deg);
-moz-transform:skew(0deg);
-o-transform:skew(0deg);
border:none;
text-align:center;
}
.reserve #reserveFlow li strong{
font-size:131% !important;
}
.reserve #reserveFlow li span{
display:block;
-webkit-transform:skew(-12deg);
-moz-transform:skew(-12deg);
-o-transform:skew(-12deg);
font-size:70%;
}
.reserve #reserveFlow li:last-child span{
-webkit-transform:skew(0deg);
-moz-transform:skew(0deg);
-o-transform:skew(0deg);
}
.reserve #reserveFlow li.step1,
.reserve #reserveFlow li.step2,
.reserve #reserveFlow li.step3{
width:70%;
padding:17px 5px 0 35px;
background-color:rgba(255,255,255,0) !important;
text-align:left;
border:none;
font-size:116%;
}
.reserve #reserveFlow li.step1 span,
.reserve #reserveFlow li.step2 span,
.reserve #reserveFlow li.step3 span{
font-size:85% !important;
font-weight:bold;
}
.reserve #reserveFlow li.step1:before,
.reserve #reserveFlow li.step2:before,
.reserve #reserveFlow li.step3:before{
content:attr(x);
position:absolute;
left:5px;
top:13px;
-webkit-transform:skew(-12deg);
-moz-transform:skew(-12deg);
-o-transform:skew(-12deg);
font-size:65%;
}
.reserve #reserveFlow li.step1:after,
.reserve #reserveFlow li.step2:after,
.reserve #reserveFlow li.step3:after{
content:attr(y);
position:absolute;
left:10px;
top:23px;
-webkit-transform:skew(-12deg);
-moz-transform:skew(-12deg);
-o-transform:skew(-12deg);
font-size:100%;
font-weight:bold;
}
.reserve #reserveFlow li.step2{
width:70%;
padding-left:35px;
}
.reserve #reserveFlow li.step3{
width:81%;
}
/* ▼ プラン詳細表示エリア(#planInfo)のスタイル ▼ ------------------------------- */
.reserve #planInfo table{
width:100%;
border:0;
border-collapse:collapse;
}
.reserve #planInfo caption{
padding:10px 10px 10px 35px;
background:#5CB8E6 url(http://pgm-images-dev.s3.amazonaws.com/images/sp/2015/common/icon_planData.png) no-repeat 10px 50%;
background-size:18px;
text-align:left;
color:#FFFFFF;
font-size:116%;
font-weight:bold;
}
.reserve #planInfo tr:nth-child(even){
background-color:#F2FBFF;
}
.reserve #planInfo th{
width:30%;
padding:5px;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
color:#004b74;
text-align:left;
}
.reserve #planInfo td{
/* padding:5px; */
border-bottom:1px solid #CCCCCC;
word-break: break-all;
}
.reserve #planInfo .taxOut{
padding-left:5px;
text-align:left;
color:#DD0000;
font-size:116%;
font-weight:bold;
}
.reserve #planInfo td.taxIn{
padding-left:5px;
text-align:left;
}
.reserve #planInfo dt{
position:relative;
text-align:center;
margin-bottom:2px;
padding:12px 0;
border:1px solid #CCCCCC;
border-top:none;
background-image: -moz-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.6);
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
font-size:108%;
font-weight:bold;
}
.reserve #planInfo dt:before{
content:"プラン詳細";
}
/* ------------------------------------------------------------------------ */
/* ▼ 予約可能プラン数の表示エリアのスタイル（dl.number） ▼------------------------ */
/* ▼ 検索条件の表示・変更エリア(#condition)のスタイル ▼-------------------------- */
/* ▼ プランカード（プラン情報）のスタイル(.planCard) ▼--------------------------- */
/* ------------------------------------------------------------------------ */
/* (1)スタート時間・人数選択ページのスタイル
/* unique_id:.startTime
/* ------------------------------------------------------------------------ */
/* ▼ プレー日変更エリア(#date)のスタイル ▼ ------------------------------------- */
.startTime #date dt{
position:relative;
margin-bottom:1px;
padding:15px 5px;
background-color:#004D76;
color:#FFF100;
font-size:116%;
}
.startTime #date dt:after{
content:";";
font-family:'WebSymbolsgfeditRegular';
position:absolute;
right:5px;
top:50%;
margin-top:-8px;
color:#FFFFFF;
}
.startTime #date dt.open:after{
content:":";
}
.startTime #date dt span{
margin-right:15px;
color:#FFFFFF;
font-size:93%;
}
.startTime #date dt span:before{
content:"Y";
font-family:'WebSymbolsgfeditRegular';
font-size:100%;
margin-right:2px;
}
/* ▼ サブミットボタン周辺(#btnBox)のスタイル ▼ -------------------------------- */
.startTime p.lead{
padding:10px;
}
.startTime #btnBox{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content:space-between;
justify-content:space-between;
-webkit-align-items:baseline;
align-items:baseline;
margin:10px 5px 30px;
}
.startTime #btnBox p.back a{
position:relative;
border-style: solid;
border-width: 1px;
border-color: rgb(204, 204, 204);
border-radius: 3px;
background-image: -moz-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.6);
padding:7px 10px 7px 25px;
font-weight:bold;
text-decoration:none;
}
.startTime #btnBox p.back a:before{
position:absolute;
left:5px;
top:50%;
margin-top:-7px;
content:"(";
font-family:'WebSymbolsgfeditRegular';
font-size:93%;
}
.startTime #btnBox p.next a{
position:relative;
border-style: solid;
border-width: 2px;
border-color: rgb(255, 153, 0);
border-radius: 3px;
background-image: -moz-linear-gradient( 90deg, rgb(255,170,0) 0%, rgb(255,136,0) 50%, rgb(255,171,46) 50%, rgb(255,242,227) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(255,170,0) 0%, rgb(255,136,0) 50%, rgb(255,171,46) 50%, rgb(255,242,227) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(255,170,0) 0%, rgb(255,136,0) 50%, rgb(255,171,46) 50%, rgb(255,242,227) 100%);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.6);
padding:10px 30px;
color:#FFFFFF;
font-size:131%;
font-weight:bold;
text-decoration:none;
}
.startTime #btnBox p.next a:after{
position:absolute;
right:5px;
top:50%;
margin-top:-9px;
content:")";
font-family:'WebSymbolsgfeditRegular';
font-size:85%;
font-weight:normal;
}
/* フッターリンクの非表示化(#footerLink)のスタイル------------------------------ */
.startTime #footerLink{display:none;}
.startTime ul.socialBtn li{display:none;}
/* ------------------------------------------------------------------------ */
/* (2)エリア(ゴルフ場)選択ページのスタイル
/* unique_id:.courseSelect
/* ------------------------------------------------------------------------ */
/* タイトル表示エリアのスタイル（独自スタイル）----------------------------------- */
/* ▼ 地域リスト表示エリアのスタイル(.region) ▼ --------------------------------- */
/* ▼ 都道府県リスト表示エリアのスタイル（.area）▼ ------------------------------- */
/* ▼ ゴルフ場リスト表示エリアのスタイル ▼ --------------------------------------- */
/* ------------------------------------------------------------------------ */
/* (3)Myカレンダーのスタイル
/* unique_id:.myCal
/* ------------------------------------------------------------------------ */
/* ▼各ゴルフ場毎の検索結果表示エリアのスタイル------------------------------------ */
/* プランカード（プラン情報）のスタイルでMyカレンダー特有スタイル-------------------- */
/* 空き枠数表示エリアのスタイル（.planCard table） ----------------------------- */
/* Myカレンダー以外のゴルフ場の予約検索への導線のスタイル（#otherCourse） ---------- */
/* ---------------------------------------------------------------- */
/* Myカレンダーにプランを表示するゴルフ場一覧のスタイル
/* id:.myCalList
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* Myカレンダーにプランを表示するゴルフ場を選択するページのスタイル
/* id:.myCalSelect
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* Myカレンダーにプランを表示しているゴルフ場の優先順位を変更するページのスタイル
/* id:.myCalReplace
/* ---------------------------------------------------------------- */