@charset "utf-8";
/* CSS Document */

/*==================================
	base
==================================*/
* { box-sizing: border-box;}
html { height: 100%; width: 100%; font-size: 62.5%;/* 10px */}
body { font-family: 'Roboto', 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-weight: 500; font-size:1.6rem; color:#2d2d2d; line-height: 1.5; letter-spacing: 0.05em; height: 100%; width: 100%;}
h1, h2, h3, h4, h5, ul, li, dl, dt, dd, p { font-weight: 500;}
.wrapper { position: relative; height: 100%; width: 100%;}
section { position: relative; z-index: 1;}

a { color: #000; text-decoration: none;display: block;}
a:hover {text-decoration: none;}
a:focus { outline: none;}
.inner { max-width: 1200px; width: 100%; margin: 0 auto;}
.outer { max-width: 1440px; width: 100%; margin: 0 auto;}
.en { font-family: 'Roboto', sans-serif;}
.contents { overflow: hidden;}

@media screen and (min-width: 750px) {
body { min-width: 1600px;}
.spOnly { display: none;}
}
@media screen and (max-width: 749px) {
body { font-size: 1.3rem; min-width: 100%;}
img { width: 100%;}
.inner { width: 90%;}
.pcOnly { display: none;}
:root { --swiper-navigation-size: 30px;}
}


/*==================================
	pafts
==================================*/
/* secTit */
.secTit { text-align: center; font-weight: 700; position: relative; z-index: 10;}
.secTit:before,
.secTit:after { height: 4px; content: ""; display: block; position: absolute; bottom: 0;}
.secTit:before { background: #4bb4f0; right: 50%;}
.secTit:after { background: #f88a48; left: 50%;}
@media screen and (min-width: 750px) {
.secTit { font-size: 36px; padding-bottom: 35px; margin-bottom: 70px;}
.secTit:before,
.secTit:after { width: 70px;}
}
@media screen and (max-width: 749px) {
.secTit { font-size: 2.4rem; padding-bottom: 25px; margin-bottom: 45px;}
.secTit:before,
.secTit:after { width: 50px;}
}

/* itemList */
.itemList a.pickup { position: relative;}
.itemList a.pickup:before { position: absolute; content: "Pick Up"; font-weight: 700; color: #fff; z-index: 1; line-height: 1; letter-spacing: 0.02em;}
.itemList a.pickup:after { position: absolute; content: ""; height: 0; left: 0; top: 0;}
.itemList .itemImg img { width: 100%; border-radius: 10px; object-fit: cover;}
.itemList .itemInfo .itemTit { font-weight: 700; line-height: 1.7;}
.itemList .itemInfo .itemTag { color: #4bb4f0; font-weight: 700;}
.itemList .itemInfo .itemTag span { background: #fff; border: solid 1px #4bb4f0; text-align: center; display: inline-block;}
.itemList .itemInfo .itemDetail { display: flex; justify-content: space-between; align-items: flex-end;}
.itemList .itemInfo .itemDetail .itemLocation { font-weight: 400;}
.itemList .itemInfo .itemDetail .itemPrice { text-align: right; font-weight: 700;line-height: 1;}
@media screen and (min-width: 750px) {
.itemList.pcflex { display: flex; flex-wrap: wrap;}
.itemList a.pickup:before { font-size: 18px; left: 15px; top: 12px;}
.itemList a.pickup:after { width: 110px; border: 20px solid #47c683; border-right-color: transparent;}
.itemList .itemImg img { width: 270px; height: 202px;}
.itemList .itemInfo .itemTit { margin: 15px 0; font-size: 20px;}
.itemList .itemInfo .itemTag span { font-size: 14px; padding: 0 15px; margin: 0 10px 10px 0;}
.itemList .itemInfo .itemDetail .itemLocation { font-size: 18px;}
.itemList .itemInfo .itemDetail .itemPrice { font-size: 26px;}
.itemList .itemInfo .itemDetail .itemPrice .yen { font-size: 16px;}
}
@media screen and (max-width: 749px) {
.itemList a.pickup:before { font-size: 13px; left: 10px; top: 10px;}
.itemList a.pickup:after { width: 90px; border: 17px solid #47c683; border-right-color: transparent;}
.itemList .itemImg img { height: 55vw;}
.itemList .itemInfo .itemTit { margin: 10px 0; font-size: 1.4rem;}
.itemList .itemInfo .itemTag span { font-size: 1rem; padding: 0 12px; margin: 0 5px 10px 0;}
.itemList .itemInfo .itemDetail .itemLocation { font-size: 1.4rem;}
.itemList .itemInfo .itemDetail .itemPrice { font-size: 2.3rem;}
.itemList .itemInfo .itemDetail .itemPrice .yen { font-size: 1.6rem;}
}

/* btn */
.btnArea { position: relative;}
.btn { color: #fff; text-align: center; padding: 15px 0;}
.btn.btnOR { background: #f88a48;}
.btn.btnBL { background: #4bb4f0;}
.morebtn.btnWH { color: #4bb4f0; background: #fff; border: solid 1px #4bb4f0; display: inline-block; text-align: center; padding: 10px 0;}
@media screen and (min-width: 750px) {
.btn { font-size: 20px; font-weight: 700; border-radius: 60px;}
.morebtn { font-size: 16px; border-radius: 60px; width: 200px;}
}
@media screen and (max-width: 749px) {
.btn { font-size: 1.8rem; border-radius: 50px;}
.morebtn { font-size: 1.4rem; border-radius: 50px; width: 100%; max-width: 225px;}
}

/* arrow */
.arrow{ position: relative; display: inline-block; padding: 0 0 0 16px; vertical-align: middle; text-decoration: none;}
.arrow:before,
.arrow:after{ position: absolute; top: 0; bottom: 0; margin: auto; content: ""; vertical-align: middle;}

/* placeBox */
.placeBox dl dt { padding: 5px 12px; background: #f2f2f2; font-weight: 500;}
.placeBox dl dd { padding: 10px 12px; font-size: 14px;}
.placeBox dl dd span { cursor: pointer; display: inline-block; margin-right: 10px;}
@media screen and (max-width: 749px) {
.placeBox dl dd { padding: 0;}
.placeBox dl dd span { display: block; padding: 10px; border-bottom: solid 1px #f2f2f2;}
}

/* calendar */
.calendar-container { width: 100%; background: #f2f2f2; padding: 5px 2px;}
.calendar-container .calendar-tit { font-size: 14px; text-align: center; display: flex; justify-content: space-between; align-items: center;}
.calendar-container .calendar-tit .tit { font-weight: 700;}
.calendar-container .calendar-tit .year { font-weight: 700;}
.calendar-container .calendar-tit .big { font-size: 16px; font-weight: 700;}
.calendar-container .calendar-tit .month { font-size: 20px; font-weight: 700;}
.calendar-container .calendar-tit .nav { font-size: 8px; border-radius: 21px; width: 21px; height: 21px; line-height: 21px; background: #4bb4f0; color: #fff; cursor: pointer; margin: 0 10px; font-weight: 400; text-align: center;}
.calendar-container table { width: 100%; border-left: solid 1px #dddddd; border-top: solid 1px #dddddd;}
.calendar-container th, 
.calendar-container td { padding: 5px 0; text-align: center; font-size: 12px; background: #fff; border-right: solid 1px #dddddd; border-bottom: solid 1px #dddddd;}
.calendar-container td { font-size: 14px; font-weight: 700; cursor: pointer;}
.calendar-container .on { background: #4bb4f0; color: #fff !important;}/* 選択時 */
.calendar-container th.sun,
.calendar-container .holiday, /* 祝日用 */
.calendar-container .day *:first-child { color: #f04b4b;}
.calendar-container th.sat,
.calendar-container .day *:last-child { color: #4bb4f0;}
.calendar-container .selectdate { margin-top: 2px; background: #fff; color: #4bb4f0; text-align: center; font-weight: 700; padding: 15px 0;}
.calendar-container .btnArea { text-align: center; padding: 8px 0;}
.calendar-container .btnArea .btn.btnBL { font-size: 14px; width: 200px; padding: 10px 0; margin: 0 auto; border: 0;}
@media screen and (max-width: 749px) {
.calendar-container .calendar-tit { font-size: 1.8rem;}
.calendar-container .calendar-tit .big { font-size: 2.1rem;}
.calendar-container .calendar-tit .month { font-size: 2.6rem;}
.calendar-container .calendar-tit .nav { font-size: 1rem; border-radius: 27px; width: 27px; height: 27px; line-height: 27px;}
.calendar-container th { font-size: 1.6rem;}
.calendar-container td { font-size: 1.8rem;}
.calendar-container .selectdate { font-size: 2.1rem;}
.calendar-container .btnArea .btn.btnBL { font-size: 1.8rem;  width: 250px; border-radius: 8px; font-weight: 700;}
}


/*==================================
	common form
==================================*/
input,
textarea,
.txtform { padding: 15px; border-radius: 4px; background-color: #ffffff; border: solid 1px #dddddd; width: 100%;}
.txtform { color: #b4b4b4; line-height: 1; cursor: pointer;}
input.ico_place,
.txtform.ico_place { background: url("../img/icon_search_area.svg") left 14px center no-repeat #ffffff; background-size: 18px auto; padding-left: 50px;}
input.ico_date,
.txtform.ico_date { background: url("../img/icon_search_date.svg") left 12px center no-repeat #ffffff; background-size: 22px auto; padding-left: 50px;}
input.ico_mail,
.txtform.ico_mail { background: url("../img/icon_login_mail.svg") left 12px center no-repeat #ffffff; background-size: 22px auto; padding-left: 50px;}
input.ico_pass,
.txtform.ico_pass { background: url("../img/icon_login_key.svg") left 12px center no-repeat #ffffff; background-size: 22px auto; padding-left: 50px;}

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus { outline:solid 2px #bae6ff;}

.inputPassArea { position: relative;}
.inputPassArea input.passBtn { width: 30px !important; background: url("../img/icon_login_eye_close.svg") no-repeat; background-size: 30px auto; height: 30px; border: 0; padding: 0;}
.inputPassArea input.passBtn.view { background: url("../img/icon_login_eye_open.svg") no-repeat; background-size: 30px auto;}

.normal-select {border: solid 1px #dddddd;padding: 10px 15px;border-radius :4px;height:46.23px;}
/* Custom Select */
.custom-select-wrapper { position: relative; z-index: 50; display: inline-block; user-select: none;}
.custom-select-wrapper select { display: none;}
.custom-select { position: relative; display: inline-block;}
.custom-select-trigger { position: relative; display: block; padding: 10px; border-radius: 4px; background-color: #fff; border: solid 1px #dddddd; cursor: pointer;}
.custom-select-trigger:after { position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 50%; right: 15px; margin-top: -3px; border-bottom: 1px solid #4bb3f0; border-right: 1px solid #4bb3f0; transform: rotate(45deg) translateY(-50%); transition: all .4s ease-in-out; transform-origin: 50% 0;}
.custom-select.opened .custom-select-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%);}
.custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; min-width: 100%; border: 1px solid #dddddd; border-radius: 4px; box-sizing: border-box; background: #fff; transition: all .4s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px);}
.custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);}
.option-hover:before { background: #f3fbfe;}
.custom-option { position: relative; display: block; padding: 10px; border-bottom: 1px solid #b5b5b5; cursor: pointer; transition: all .4s ease-in-out;}
.custom-option:first-of-type { border-radius: 4px 4px 0 0;}
.custom-option:last-of-type { border-bottom: 0; border-radius: 0 0 4px 4px;}
.custom-option:hover,
.custom-option.selection { background: #f3fbfe;}
@media screen and (max-width: 749px) {
input,
.txtform { padding: 10px 15px;}
.custom-select-trigger:after { width: 6px; height: 6px; margin-top: 0;}
.custom-select-trigger { padding: 5px 10px;}
.custom-option { padding: 5px 10px;}
}

/*==================================
	header
==================================*/
header { display: flex; justify-content: space-between; align-items: center;/* background: #fff;*/ position: relative; z-index: 50; width: 100%;}
header .hdLogo { /*position: fixed; top: 30px; left: 50px; z-index: 10;*/}
header .hdLogo img { max-width: 400px;}
header .hdBox { display: flex; align-items: center; position: relative; z-index: 1;}
header .hdBox .languageBox { font-weight: 400;}
header .hdBox .hdLogin a { background: url("../img/icon_login.svg") no-repeat; background-size: auto 100%;}
@media screen and (min-width: 750px) {
header { height: 120px; max-width: 1600px; margin: 0 auto;}
header .hdLogo { padding-left: 30px; display: flex; align-items: center;}
header .hdLogo .txt { margin-left: 30px; font-size: 14px;}
header .hdBox { padding-right: 30px;}
header .hdBox .languageBox { font-size: 14px; margin-right: 30px;}
header .hdBox .languageBox .custom-select-trigger { width: 120px;}
header .hdBox .hdLogin a { line-height: 40px; padding-left: 50px;}
}
@media screen and (max-width: 749px) {
header { height: 60px;}
header .hdLogo { margin: 0 0 0 4.26%;}
header .hdLogo img { width: 200px;}
header .hdBox { margin-right: 4.26%;}
header .hdBox .languageBox { font-size: 1rem; margin-right: 20px;}
header .hdBox .languageBox .custom-select-trigger { width: 90px;}
header .hdBox .hdLogin { font-size: 1.2rem;}
header .hdBox .hdLogin a { line-height: 30px; padding-left: 40px;}
}


/*==================================
	footer
==================================*/
footer { position: relative; border-top: solid 1px #dddddd;}
footer:before { content: ""; width: 100%; position: absolute; bottom: 0;}
footer:after { content: ""; width: 100%; background: #4bb4f0; position: absolute; bottom: 0;}
footer .pagetop { position: absolute; z-index: 12;}
footer .inner { position: relative; z-index: 10;}
footer .inner .ftLogo { border: solid 1px #c8e7f9; text-align: center; border-radius: 3px;}
footer .inner .ftNav { display: flex; justify-content: space-between; flex-wrap: wrap;}
footer .inner .ftNav li { text-align: left;}
footer copy { position: absolute; bottom: 0; width: 100%; z-index: 10; color: #fff; text-align: center;}
@media screen and (min-width: 750px) {
footer { margin-top: 120px; padding: 100px 0 240px 0;}
/*
footer:before { background: url("../img/ft_bg.png") bottom center no-repeat; height: 180px;}
*/
footer:after { height: 60px;}
footer .pagetop { right: calc( 50% - 640px ); bottom: 40px;}
footer .inner { width: 776px; display: flex; justify-content: space-between;}
footer .inner .ftLogo { width: 200px; padding: 15px 0;}
footer .inner .ftLogo img { width: 144px;}
footer .inner .ftNav { width: 490px;}
footer .inner .ftNav li { width: 30%; margin: 10px 0;}
/*footer copy { line-height: 60px; font-size: 12px;}*/
footer copy {font-size: 12px;}
}
@media screen and (max-width: 749px) {
footer { margin-top: 50px; padding: 60px 0 155px 0;}
/*
footer:before { background: url("../img/ft_bg_sp.png") bottom center no-repeat;
 height: 120px; background-size: auto 100%;}
*/
footer:after { height: 50px;}
footer .pagetop img { width: 100px;}
footer .pagetop { right:4%; bottom: 40px;}
footer .inner { text-align: center;}
footer .inner .ftLogo { width: 120px; padding: 10px 0; margin: 0 auto;}
footer .inner .ftLogo img { width: 94px;}
footer .inner .ftNav { width: 76.92%; margin: 10px auto 0 auto;}
footer .inner .ftNav li { width: 50%; margin-top: 20px;}
footer .inner .ftNav li:nth-child(1) { order: 1;}
footer .inner .ftNav li:nth-child(2) { order: 5;}
footer .inner .ftNav li:nth-child(3) { order: 4;}
footer .inner .ftNav li:nth-child(4) { order: 3;}
footer .inner .ftNav li:nth-child(5) { order: 2;}
footer .inner .ftNav li:nth-child(6) { order: 6;}
/*
footer copy { line-height: 50px; font-size: 1.1rem;}
*/
footer copy { font-size: 1.1rem;}
}