@charset "utf-8";

/*===============================================
 *	下層タイトル
===============================================*/
#sub_mainvisual-wrap {background: url("../img/flow/bg-visual.jpg") center no-repeat;margin-bottom: 1em;background-size: cover;}
.second-visualcontents{max-width: 1200px;margin: 0 auto;width: 100%;}
#second-visualcontents::before {content: "";background: url("../img/flow/bg-second_title.png");display: block;background-size: 225px;height: 96px;width: 225px;position: absolute;top: 8%;left: 0;z-index: 0;}
@media only screen and (max-width: 1024px) {
#second-visualcontents h1 {padding-left: 3%;}
}
@media only screen and (max-width: 568px) {
#second-visualcontents::before {background-size: 128px;height: 55px;width: 128px;}
}
/*===============================================
 *	Reservation
===============================================*/
.reservation-wrap{margin-bottom: 3%;}
.reservation-navi {padding-top: 2%;}
/*.reservation-navi li{max-width: 380px;width: calc(96% / 3);border: #cbcbcb 1px solid;}*/
.reservation-navi li{max-width: 380px;width: 100%;margin: 0 auto;border: #cbcbcb 1px solid;}
.img-reserv{max-width: 280px;margin: 0 auto;}
.reservation-navi dt {color: #fff;font-size: 18px;position: relative;padding: 11px 0;text-align: center;background: #816943;}
.reservation-navi dt:before {position: absolute;content: '';top: -40px;left: calc(50% - 40px);width: 80px;height: 80px;border-radius: 50%;background: #816943;}
.reservation-navi dt:after {content: "";display: block;position: absolute;top: -25px;}
.reservation-navi dt.icon-pc:after {background: url(../img/flow/icon-pc.png) left no-repeat #816943;background-size: 33px;width: 33px;height: 24px;left: calc(50% - 17px);}
.reservation-navi dt.icon-tel:after {background: url(../img/flow/icon-tel.png) left no-repeat #816943;background-size: 21px;width: 21px;height: 31px;left: calc(50% - 10px);}
.reservation-navi dt.icon-shop:after {background: url(../img/flow/icon-shop.png) left no-repeat #816943;background-size: 37px;width: 37px;height: 29px;left: calc(50% - 19px);}
.reservation-navi dt span {position: relative;z-index: 1;}
.reservation-navi dd {background: #fff;padding: 20px 30px;font-size: 16px;position: relative;}
.img-reserv{max-width: 280px;margin: 1em auto 0;}
.reservation-navi dd .pos-place{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);}
.reservation-navi dd .btn-reserve {margin-bottom: 0;width: 84%;}
.reservation-navi dd .btn-reserve a{font-size: 16px;padding: 1.25em .5em;}
.reservation-navi dd .btn-reserve span {background: url(../img/icon-car.png) 2% no-repeat;background-size: 20px;padding-left: 30px;width: 55%;}
.reservation-navi dd .tel-number{max-width: 296px;margin: 0 auto;width: 100%;}
.reservation-navi dd .tel-number img{margin-bottom: 0;}
.shop-about{width: 86%;}
.shop-link {border-bottom: #856d47 1px solid;font-size: 18px;font-weight: 800;position: relative;margin-bottom: 5px;}
.shop-link a{color: #363636;display: block;font-size: 18px;padding-left: 1.5em;height: 40px;line-height: 40px;}
.shop-link::before{content: "";position: absolute;top: 0;bottom: 0;margin: auto;width: 10px;height: 10px;border-top: 3px solid #9d6c37;border-right: 3px solid #9d6c37;transform: rotate(45deg);}
@media only screen and (max-width: 1024px) {
.reservation-navi dd {height: 300px;font-size: 14px;padding: 20px 15px;}
.reservation-navi dd .btn-reserve span {width: 65%;}
.reservation-navi dd .tel-number {width: 84%;}
.shop-about {width: 89%;}
}
@media only screen and (max-width: 768px) {
.reservation-navi dd {height: 260px;font-size: 13px;}
.reservation-navi {padding-top: 4%;}
.reservation-navi dt {font-size: 16px;}
.reservation-navi dd .btn-reserve a {font-size: 14px;padding: 1.0em .5em;}
.reservation-navi dd .btn-reserve span {padding-left: 20px;width: 80%;}
.shop-about {font-size: 13px;}
.reservation-navi dd .pos-place{bottom: 10px;}
.shop-link a {font-size: 14px;padding-left: 1.25em;height: 35px;line-height: 35px;}
.shop-link::before {width: 8px;height: 8px;border-top: 2px solid #9d6c37;border-right: 2px solid #9d6c37;}
}
@media only screen and (max-width: 568px) {
.anc-navi li {margin-bottom: 10px;width: calc(98% / 2);}
.reservation-navi {padding-top: 10%;}
.reservation-navi li {max-width: initial;margin-bottom: 4rem;width: 100%;}
.reservation-navi li:last-child {margin-bottom: 0;}
.reservation-navi dd {height: auto;}
.reservation-navi dd .btn-reserve a {padding: 1.5em .5em;}
.reservation-navi dd .btn-reserve span{background: url(../img/icon-car.png) 10% no-repeat;background-size: 18px;}
.reservation-navi dd .pos-place {position: static; transform: none;margin: 0 auto;}
.reservation-navi dd > p {margin-bottom: 1em;}
.shop-about {font-size: 15px;}
.shop-link a {font-size: 16px;}
}
@media only screen and (max-width: 375px) {
.shop-about {width: 98%;}
} 
/*===============================================
 *	Flow
===============================================*/
.flow-start,.flow-return{display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 4%;}
.flow-start li{background: #fff0e0;border: #bf9d77 13px solid;width: calc(81% /3);position: relative;}
.flow-return li{background: #fff;border: #bf9d77 13px solid;width: calc(81% /4);position: relative;}
.flow-start li::after,.flow-return li::after{content: "";position: absolute;margin: auto;right: -60px;top: 25%;width: 0;height: 0;border-left: 60px solid #9d6c37;border-top: 60px solid transparent;border-bottom: 60px solid transparent;z-index: 1;}
.flow-start li:nth-child(3):after{display:none;}
.flow-return li:nth-child(4):after{display:none;}
.flow-start dl,.flow-return dl{padding: 15px;}
.flow-start dt,.flow-return dt{color: #81511c;font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 10px;position: relative;}
.flow-start dt img,.flow-return dt img{display: block;margin: 0 auto 1em;}
.icon-shop_brown{max-width: 45px;}
.icon-note{max-width: 38px;}
.icon-price{max-width: 45px;}
.icon-car{max-width: 74px;}
.icon-refueling{max-width: 39px;}
.flow-start dd,.flow-return dd{font-size: 14px;}
@media only screen and (max-width: 1024px) {
.flow-start li,.flow-return li{max-width: 210px;}
.flow-start dt ,.flow-return dt{font-size: 18px;}
.flow-start dt img ,.flow-return dt img{margin: 0 auto .5em;}
.icon-note {max-width: 28px;}
.icon-price{max-width: 35px;}
.icon-car{max-width: 64px;}
.flow-start li::after,.flow-return li::after {right: -50px;top: 30%;border-left: 50px solid #9d6c37;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}
.card-list {max-width: 410px;}
.txt-card {max-width: 460px;}
}
@media only screen and (max-width: 768px){
.flow-start li,.flow-return li {border: #bf9d77 5px solid;max-width: initial;width: calc(88% /4);}
.flow-start li::after,.flow-return li::after {right: -30px;top: 40%;border-left: 30px solid #9d6c37;border-top: 40px solid transparent;border-bottom: 40px solid transparent;}
.flow-start dl,.flow-return dl {padding: 10px;}
.icon-shop_brown{max-width: 42px;}
.icon-note {max-width: 28px;}
.icon-price{max-width: 35px;}
.icon-car{max-width: 64px;}
.flow-start dt,.flow-return dt{font-size: 15px;}
}
@media only screen and (max-width: 568px){
.flow-start li,.flow-return li {margin-bottom: 5%;width: 100%;}
.flow-start li:last-child,.flow-return li:last-child {margin-bottom: 0;}
.flow-start li::after,.flow-return li::after {right: 35%;top: initial;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 30px solid #9d6c37;bottom: auto;}
}

@media only screen and (max-width: 320px){
.flow-start li::after,.flow-return li::after {right: 32%;}
}

/*===============================================
 *	Flow -contents
===============================================*/
.card-wrap{align-items: center;background: #bf9d77;color: #fff;padding: 20px;margin-bottom: 4%;}
.card-list{max-width: 560px;}
.txt-card {max-width: 570px;color: #fff;font-size: 16px;}
.caution-box p:nth-of-type(1) {margin-bottom: 0;}
.card-about{display: flex;justify-content: space-between;align-items:flex-start;margin-bottom: 4%;}
.card-thumbnail {max-width: 470px;}
.ttl-card{background: #816943;color: #fff;font-weight: 800;padding-left: 1em;margin: 5px 0 1em;line-height: 2;}
.card-caption {max-width: 710px;font-size: 16px;width: 100%;}
.card-about:nth-child(odd) {flex-direction: row-reverse;}
@media only screen and (max-width: 1024px) {
.card-wrap {padding: 20px;width: 96%;}
.card-list {max-width: 460px;}
.txt-card {max-width: 420px;}
.card-thumbnail {max-width: 400px;}
.card-caption {max-width: 540px;}
}
@media only screen and (max-width: 768px){
.card-wrap {width: 94%;}
.card-list {max-width: initial;}
.card-wrap p:first-of-type{margin: 0 auto;}
.caution-box p:nth-of-type(1) {margin: 0 auto;}
.txt-card {max-width: initial;margin: 0 auto;}
.card-caption {max-width: 450px;font-size: 14px;}
.card-thumbnail {max-width: 260px;}
}
@media only screen and (max-width: 568px){
.card-about {display: block;}
.ttl-card {font-size: 15px;line-height: 1.4;padding: 5px 10px;}
.card-wrap {padding: 15px;margin-bottom: 30px;width: 92%;}
.card-thumbnail {max-width: initial;margin-bottom: 10px;}
.card-about:nth-child(odd) {margin: 6% 0;}
.txt-card {font-size: 13px;}
}
@media only screen and (max-width: 320px){
.ttl-card {font-size: 14px;}
}
/*===============================================
 *	Flow -MAP
===============================================*/
.map-area{max-width: 1140px;margin: 0 auto;}
.img-map{max-width: 686px;}
.txt-guide{max-width: 390px;margin-top: 2em;}
.ttl-boder{border-left: #816943 16px solid;padding-left: .75em;font-size: 24px;margin-bottom: 1em;}
ol.map-guide {position: relative;}
ol.map-guide li {font-size: 16px;list-style-position: outside;padding-left: 1.25em;margin-bottom: .25em;}
ol.map-guide li span {position: absolute;left: 0;}
@media only screen and (max-width: 1024px) {
.img-map {max-width: 546px;}
.ttl-boder {font-size: 22px;}
.ttl-boder{padding-left: .5em;}
}
@media only screen and (max-width: 768px){
.img-map {max-width: 356px;}
.txt-guide {max-width: 340px;margin-top: 1.5em;}
.ttl-boder {border-left: #816943 13px solid;font-size: 18px;}
ol.map-guide li {font-size: 15px;}
}
@media only screen and (max-width: 568px){
.img-map {max-width: initial;}
.txt-guide {max-width: initial;margin-top: 1em;}
.ttl-boder {border-left: #816943 10px solid;font-size: 16px;}
ol.map-guide li {font-size: 14px;}
}
/*===============================================
 *	Flow -frame
===============================================*/
.quick-wrap{margin-bottom: 4%;}
.frame-wrap{padding: 20px;}
.frame-bg_pink{background: #fff0e0;}
.frame-bg_white{background: #fff;}
.frame-contents{background: url("../img/flow/frame-left_top.png"),url(../img/flow/frame-right_top.png),url("../img/flow/frame-right_bottom.png"),url(../img/flow/frame-left_bottom.png) no-repeat;background-position: left top,right top,right bottom,left bottom;background-repeat: no-repeat;padding: 20px;}
.img-quick{max-width: 445px;position: relative;z-index: 5;}
.img-refueling{max-width: 451px;position: relative;z-index: 5;}
.point-box{max-width: 620px;position: relative;font-size: 17px;}
.point-box::before{content: "";background: url("../img/flow/icon-point.png") left top no-repeat;background-size: 224px;width: 224px;height: 110px;position: absolute;left: -40px;top: -40px;}
.point-box > p{margin-bottom: 1em;}
.point-box .btn-reserve{margin: 0 auto;width: 60%;}
.point-box .btn-reserve a{padding: 1em .5em;}
@media only screen and (max-width: 1024px) {
.img-quick,.img-refueling {max-width: 335px;}
.point-box {max-width: 520px;}
}
@media only screen and (max-width: 768px){
.img-quick,.img-refueling {max-width: 270px;}
.point-box {max-width: 350px;font-size: 15px;}
.point-box::before {background-size: 204px;width: 204px;height: 100px;left: -15px;top: -50px;}
.point-box .btn-reserve {font-size: 16px;width: 70%;}
}
@media only screen and (max-width: 568px){
.frame-wrap{padding: 15px;}
.img-quick,.img-refueling {max-width: initial;margin-bottom: 1em;}
.point-box .btn-reserve {width: 90%;}
.frame-contents {background-size: 80px;padding: 15px;}
}

/*===============================================
 *	Return -transfer
===============================================*/
.transfer-wrap{max-width: 960px;margin: 0 auto 6%;}
.transfer-hdbox{background: #816943;max-width: 260px;padding: 10px 1em 1.5em;position: relative;}
.transfer-hdbox::after{content: "";background: url("../img/flow/img-bus.png") left no-repeat;position: absolute;bottom: -40px;left: 20px;background-size: 172px;width: 172px;height: 55px;}
.transfer-hdbox p{color: #fff;font-size: 16px;text-align: center;font-weight: bold;}
.transfer-txtbox{font-size: 16px;line-height: 1.8;}
.txt-pay{background: #ffc0ba;color: #a93124;font-size: 16px;text-align: center;padding: 10px 0;}
@media only screen and (max-width: 768px){
.transfer-txtbox {font-size: 15px;width: 65%;}
}
@media only screen and (max-width: 568px){
.transfer-hdbox{margin-bottom: 1em;}
.transfer-hdbox::after {bottom: -10px;left: auto;background-size: 152px;width: 152px;height: 52px;right: -135px;}
.transfer-txtbox {width: 100%;}
}
@media only screen and (max-width: 375px){
.transfer-hdbox::after {bottom: -5px;background-size: 132px;width: 132px;height: 40px;right: -110px;}
}

@media only screen and (max-width: 320px){
.transfer-hdbox p {font-size: 14px;}
.transfer-hdbox::after {bottom: -10px;background-size: 92px;width: 92px;height: 36px;right: -65px;}
}
/*===============================================
 *	Accident
===============================================*/
.accident-wrap{background: rgba(255,255,255,.5);padding: 30px;}
.accident-contents{margin-bottom: 40px;font-size: 16px;}
.accident-contents:nth-of-type(3){margin-bottom: 0;}
.accident-contents h3{background: #a9894b;color: #fff;padding: 10px 0;font-size: 20px;text-align: center;letter-spacing: 2px;margin-bottom: 30px;}
.underline{border-bottom: #e5e4e2 2px solid;margin-bottom: 30px;}
.any-list {max-width: 600px;margin: 0 auto 10px;}
.any-list li{display: inline;}
.any-list li:nth-child(2){padding: 0 1em;}
.any-caution{max-width: 840px;margin: 0 auto;}
.foul-list{max-width: 940px;margin: 0 auto 20px;}
.foul-list li{padding-left: 1em;text-indent: -1em;margin-bottom: 10px;}
.foul-list li:last-child{margin-bottom: 0;}
.btn-accident {background: url(../img/icon-tel.png) 25% no-repeat #a93124;border: #cbcbca 1px solid;color: #fff;font-size: 24px;font-weight: 800;padding: .3em 4em .3em 5em;margin-left: 10px;}
.btn-normal{border: #806842 1px solid;color: #363636;font-size: 15px;padding: 1em 5em;margin-left: 10px;position: relative;}
.btn-normal:hover{background: #806842;color: #fff;}
.btn-normal::after{content: "";position: absolute;right: 10%;bottom: 40%;margin: auto;width: 8px;height: 8px;border-top: 2px solid #806842;border-right: 2px solid #806842;transform: rotate(45deg);}
.btn-normal:hover::after{border-top: 2px solid #fff;border-right: 2px solid #fff;}
.foul-dl{border: #ccc 1px solid;display: flex;flex-wrap: wrap;font-size: 13px;max-width: 490px;margin: 0 auto 2em;}
.foul-dl dt {background: #a9894b;color: #fff;padding: 1em;}
.foul-dl dd {background: #fff;padding: 1em 0 1em 2.5em;width: 60%;}
.ttl-mini_foul{margin-bottom: 1em;text-align: center;}
.foul-caution{text-align: center;}
@media only screen and (max-width: 1024px){
.btn-accident {background: url(../img/icon-tel.png) 10% no-repeat #a93124;padding: .3em 1em .3em 2em;}
}
@media only screen and (max-width: 768px){
.btn-accident {display: block;margin-left: auto;margin-top: 5px;width: 26%;}
.btn-normal{display: block;margin-left: auto;margin-top: 5px;width: 20%;}
.underline {margin-bottom: 10px;}
}
@media only screen and (max-width: 568px){
.accident-wrap {padding: 15px;}
.accident-contents {margin-bottom: 20px;font-size: 15px;}
.accident-contents h3 {font-size: 16px;margin-bottom: 10px;}
.btn-accident {margin: 10px auto 0;padding: .3em 0;text-align: center;width: 90%;}
.btn-normal {padding: 1em 0;text-align: center;width: 100%;}
.any-list li{display: block;}
.any-list li:nth-child(2){padding: 0;}
.foul-dl {margin: 0 auto 1em;}
.ttl-mini_foul{text-align: left;}
.foul-caution{text-align: left;}
}
@media only screen and (max-width: 375px){
.accident-contents {font-size: 14px;}
.accident-contents h3 {font-size: 15px;}
.btn-normal {font-size: 13px;}
.foul-dl dd {width: 50%;}
}
@media only screen and (max-width: 320px){
.accident-contents h3 {letter-spacing: 0;}
.btn-accident {background: url(../img/icon-tel.png) 5% no-repeat #a93124;}
}