@charset "utf-8";

/* ===========================================================================
    予約・空席状況 [reserve]
=========================================================================== */


/* ===========================================================================
    ラフティング予約の手順 [flow]
=========================================================================== */
/* [sec-flow-01] ------------------------------------*/

/* [box-flow-01] ------------------------------------*/
.box-flow-01 { margin:-35px 0 40px; }
.box-flow-01 dl { font-weight:bold; text-align:center; line-height:37px; width:575px; margin:22px auto 35px; }
.box-flow-01 dl dt { background:url(../common/img/bg-03.png) 0 0 / 40px 40px repeat; border-radius:18px 0 0 18px; color:#004c64; float:left; width:113px; margin:13px 0 0; }
.box-flow-01 dl dd { background:#ffd889; border-radius:0 18px 18px 0; font-size:114%; float:left; width:462px; margin:13px 0 0; }
.box-flow-02 { display:flex; margin:51px 0 57px; }
.box-flow-02 div { width:50%; }
.box-flow-02 h3 { background:url(../common/img/bg-03.png) 0 0 / 40px 40px repeat; border-radius:20px; color:#074a60; font-size:129%; text-align:center; line-height:41px; width:315px; margin:0 auto; padding:0; }
.box-flow-02 ol { font-weight:bold; text-align:center; line-height:1.43; width:185px; margin:-4px auto 0; }
.box-flow-02 ol li { background:#fff6e4; border:3px solid #77deff; border-radius:10px; list-style:none; position:relative; margin:36px 0 0; padding:7px 0 6px; }
.box-flow-02 ol li::before { background:url(../img/reserve/flow/ico-flow-01.png) 0 0 / 26px 18px no-repeat; content:""; width:26px; height:18px; position:absolute; left:83px; bottom: -31px; }
.box-flow-02 ol li a { color:#000; }
.box-flow-02 ol li.one { padding:17px 0 16px; }
.box-flow-02 ol li:last-child { background:url(../common/img/bg-11.png) 0 0 / 40px 40px repeat; border:none; color:#fff; font-size:129%; line-height:48px; margin-top:38px; padding:0; }
.box-flow-02 ol li:last-child::before { display:none; }
.box-flow-03 { margin:40px 10px 0; }
.box-flow-03 h3 { background:url(../common/img/bg-03.png) 0 0 / 40px 40px repeat; border-radius:20px; color:#074a60; font-size:129%; text-align:center; line-height:41px; margin:0 0 33px; padding:0; }
.box-flow-03 p { margin-left:10px; }
.box-flow-03 dl { border:3px solid #ff9b1a; border-radius:21px; font-size:129%; font-weight:bold; text-align:center; line-height:37px; width:400px; margin:25px auto 0; }
.box-flow-03 dl dt { background:#ff9b1a; border-radius:17px 0 0 17px; color:#fff; float:left; width:163px; }
.box-flow-03 dl dd { background:#fff; border-radius:0 17px 17px 0; color:#ff6c00; float:left; width:237px; }
.box-flow-03 dl dd a { color:#ff6c00; }


/* ===========================================================================
    予約フォーム [form]
=========================================================================== */
/* [sec-form-01] ------------------------------------*/
.sec-form-01 { padding:26px 48px 43px 50px; }
.sec-form-01 hr { margin:42px 0; }

/* [box-form-01] ------------------------------------*/
.box-form-01 .text { float:left; width:410px; }
.box-form-01 h3 { background:none; display:table; font-size:129%; position:relative; margin:0 0 -5px; padding:0 5px; z-index:2; }
.box-form-01 h3::before { background:#77deff; border-radius:10px; content:""; height:10px; position:absolute; left:0; right:0; bottom:0; z-index:-1; }
.box-form-01 ul { display:flex; font-weight:bold; line-height:33px; margin:15px 0 0 -12px; }
.box-form-01 ul li { margin:0 0 0 12px; }
.box-form-01 ul li a { border-radius:16px; color:#fff; display:block; text-align:center; text-decoration:none; position:relative; padding:0 34px; }
.box-form-01 ul li:first-child a { background:url(../common/img/bg-20.png) 0 0 / 40px 40px repeat-x; }
.box-form-01 ul li:nth-child(2) a { background:url(../common/img/bg-07.png) 0 0 / 40px 40px repeat-x; }
.box-form-01 ul li a::before { border-top:1px solid #fff; border-right:1px solid #fff; content:""; display:block; width:5px; height:5px; position:absolute; top:13px; left:15px; transform:rotate(45deg); }
.box-form-01 .photo { float:right; margin:0 16px 0 0; }
.box-form-01.fa-combo .photo { margin-right:-5px; }


@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}

@media screen and (min-width: 640px), print {
}