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

/*==================================
	base
==================================*/
* { box-sizing: border-box;}
html { height: 100%; width: 100%; font-size: 62.5%;/* 10px */}
body { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-style: normal; font-size:1.6rem; line-height: 1.5; letter-spacing: 0.02em; color:#000; background: #fff; height: 100%; width: 100%;}
.en { font-family: "Outfit"; font-weight: 700;}
.fwB { font-weight: 700;}
.fwM { font-weight: 500;}
section { position: relative; z-index: 1;}
.bgArea { background: #fff5eb;}
.bgArea2 { background: #f5dfca;}
#wrapper { position: relative; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-style: normal; line-height: 1.5; letter-spacing: 0.02em; color:#000; overflow-wrap: normal;}
#wrapper:before { height: 101px; width: 100%; left: 0; right: 0; top: 0; position: absolute; content: ""; background: #e2c5a8;}

@media screen and (max-width: 1099px) {
#wrapper:before { height: 51px;}
}
@media screen and (max-width: 899px) {
body { font-size: 1.4rem;}
}
@media screen and (min-width: 750px) {
.spOnly { display: none;}
}
@media screen and (max-width: 749px) {
body { min-width: 100%;}
img { width: 100%;}
.pcOnly { display: none;}
}

/*==================================
	parts
==================================*/
/* block */
.wrapper { position: relative; height: 100%; width: 100%;}
#contents { padding-top: 100px;}
.disIB { display: inline-block;}
.disB { display: block;}

.outer { max-width: 1300px; width: 100%; margin: 0 auto;}
.inner { max-width: 1200px; width: 100%; margin: 0 auto;}
@media screen and (max-width: 1359px) {
.outer { width: 90%;}
.inner { width: 90%;}
}
@media screen and (max-width: 1099px) {
#contents { padding-top: 50px;}
}
@media screen and (max-width: 899px) {
.outer { width: 84%;}
.inner { width: 84%;}
}

/* link */
a { color: #000; text-decoration: none;display: block;}
a:hover { text-decoration: none;}
.faxnum { pointer-events: none;}
@media screen and (min-width: 750px) {
.telnum,
a[href^="tel:"] { pointer-events: none;}
}

/* font */
.taC { text-align: center;}
.taL { text-align: left;}
.taR { text-align: right;}
.fwB { font-weight: 600;}
.fwB.en { font-weight: 700;}
.fwN { font-weight: 400;}
.fcBLU1 { color: #37b1ff;}
.fcBLU2 { color: #059dff;}
.fcYEL1 { color: #f6db27;}
.fcYEL2 { color: #ecc200;}
.fcRED1 { color: #f08080;}

/* btn */
.btn_lineBLU { padding: 20px 30px; display: inline-block; color: #059dff; border: solid 1px #059dff; border-radius: 14px; position: relative; background: #fff;}
.btn_lineBLU.arr { padding-right: 55px;}
.btn_lineBLU.arr:after { width: 22px; height: 8px; content: ""; position: absolute; top: 0; bottom: 0; right: 25px; margin: auto;background: url("../img/icon/arrBLU_right.svg") right center no-repeat; background-size: 22px auto;}
@media screen and (max-width: 749px) {
.btn_lineBLU { border-radius: 7px; padding: 15px 25px;}
.btn_lineBLU.arr { padding-right: 45px;}
.btn_lineBLU.arr:after { width: 18px; height: 12px; right: 18px; background-size: 18px auto;}
}

/* breadcrumbs */
.breadcrumbs { font-size: 14px; padding: 30px 0 60px 0;}
.breadcrumbs .inner{ display: flex; flex-wrap: wrap;}
.breadcrumbs li:nth-child(n+2) { padding-left: 20px; margin-left: 20px; position: relative; font-weight: 600;}
.breadcrumbs li a { font-weight: 500;}
.breadcrumbs li:nth-child(n+2):before { font-size: 11px; left: 0; bottom: 2px; position: absolute; content: ">";}
@media screen and (max-width: 899px) {
.breadcrumbs { font-size: 11px; padding: 15px 0 20px 0;}
.breadcrumbs li:nth-child(n+2):before { font-size: 9px;}
}

/* item */
.item { width: 284px;}
.item .phArea { height: 284px; padding: 16px; border: solid 1px #e2c5a8; border-radius: 34px;}
.item .phArea .ph {}
.item .phArea .ph img { width: 250px; height: 250px; border-radius: 20px; object-fit: cover;}
.item .txtArea { margin-top: 30px; text-align: center;}
.item .txtArea .name { font-size: 26px; color: #755233; font-weight: 600;}
.item .txtArea .price { font-size: 16px; margin-top: 10px;}
.item .txtArea .price .en {font-size: 22px;}
.item .txtArea .price .tax {font-size: 13px;}
.item .txtArea .review { margin-top: 10px;}
.item .txtArea .cart .btn { font-size: 18px; padding: 15px 15px 15px 30px; margin-top: 30px; border-radius: 30px; border: solid 2px #222222; color: #222222; text-align: center; font-weight: 600; position: relative; display: block; width: 100%;}
.item .txtArea .cart .btn:before { width: 22px; height: 20px; left: 40px; top: 0; bottom: 0; margin: auto; background: url("../img/icon.webp") no-repeat; background-size: 100% 100%; content: ""; position: absolute;}
.item.mini { width: 254px;}
.item.mini .phArea { height: 254px;}
.item.mini .phArea .ph img { width: 220px; height: 220px;}
.item.mini .txtArea .cart .btn:before { left: 30px;}
@media screen and (max-width: 899px) {
.item { width: 200px;}
.item .phArea { height: 200px; padding: 11px; border-radius: 17px;}
.item .phArea .ph {}
.item .phArea .ph img { width: 176px; height: 176px; border-radius: 10px;}
.item.mini { width: 200px;}
.item.mini .phArea { height: 200px;}
.item .txtArea { margin-top: 20px;}
.item .txtArea .name { font-size: 18px;}
.item .txtArea .price { font-size: 9px; margin-top: 5px;}
.item .txtArea .price .en {font-size: 15px;}
.item .txtArea .price .tax {font-size: 9px;}
.item .txtArea .review { margin-top: 5px;}
.item .txtArea .cart { margin-top: 10px;}
.item .txtArea .cart .btn { font-size: 14px; padding: 10px 10px 12px 30px; margin-top: 15px;}
.item .txtArea .cart .btn:before { width: 15px; height: 14px; left: 20px;}
.item.mini { width: 200px;}
.item.mini .phArea { height: 200px;}
.item.mini .phArea .ph img { width: 176px; height: 176px;}
}

/* review star */
.review .valuation { font-size: 18px; margin-right: 10px; color: #e2c5a8; position: relative;}
.review .valuation .en { font-size: 16px;}
.review .valuation:before { color: #e7624c; position: absolute; left: 0; top: 0; content: "★★★★★"; overflow: hidden;}
.review .valuation.v05:before { width: 10%;}
.review .valuation.v10:before { width: 20%;}
.review .valuation.v15:before { width: 30%;}
.review .valuation.v20:before { width: 40%;}
.review .valuation.v25:before { width: 50%;}
.review .valuation.v30:before { width: 60%;}
.review .valuation.v35:before { width: 70%;}
.review .valuation.v40:before { width: 80%;}
.review .valuation.v45:before { width: 90%;}
.review .valuation.v50:before { width: 100%;}
@media screen and (max-width: 899px) {
.review .valuation { font-size: 11px; margin-right: 8px;}
.review .valuation .en { font-size: 12px;}
}

/*==================================
	header
==================================*/
header { height: 100px; background: #fff5eb; position: fixed; z-index: 50; width: 100%;}
header.shadow {box-shadow: 0 1px 8px 0 rgba(0,26,99,0.05);}
header .hd_logo { max-width: 254px; position: fixed; top: 30px; left: 30px; z-index: 10;}
header .hd_logo img { width: 100%;}
header .hd_menu { display: flex; justify-content: space-between; position: fixed; z-index: 10;}
header .hd_menu li { width: 22px;}
header .hd_menu li a {}
header .hd_menu li a img { width: 100%;}
@media screen and (min-width: 1100px) {
header #navArea { position: fixed; top: 40px; right: 250px; z-index: 10;}
header #navArea nav .hdNav { display: flex;}
header #navArea nav .hdNav li { font-size: 16px;}
header #navArea nav .hdNav li:nth-child(2) { margin: 0 50px;}
header .hd_menu { width: 150px; top: 40px; right: 40px;}
}
@media screen and (max-width: 1099px) {
header { height: 50px;}
header .hd_logo { max-width: 160px; top: 12px; left: 5%;}
header nav { right: -280px; width: 280px; padding:60px 0 0 30px; display: block; position: fixed; top: 0; bottom: 0; background: #fff5eb; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 20; opacity: 0;}
header nav ul li { margin-bottom: 20px;}
header nav ul li a { display: block; color: #222;}
header .toggle_btn { display: block; position: fixed; top: 16px; right: 5%; width: 25px; height: 25px; transition: all .5s; cursor: pointer; z-index: 20;}
header .toggle_btn span { display: block; position: absolute; right: 0; width: 25px; height: 2px; background-color: #000; transition: all .5s;}
header .toggle_btn span:nth-child(1) { top: 4px;}
header .toggle_btn span:nth-child(2) { top: 12px;}
header .toggle_btn span:nth-child(3) { bottom: 4px;}
header #mask { display: none; transition: all .5s;}
header .hd_menu { width: 90px; top: 16px; right: calc( 5% + 45px);}
/* open */
.open { overflow: hidden;}
.open header nav { right: 0; opacity: 1;}
.open header .toggle_btn span { background-color: #222;}
.open header .toggle_btn span:nth-child(1) { -webkit-transform: translateY(7px) rotate(-315deg); transform: translateY(7px) rotate(-315deg);}
.open header .toggle_btn span:nth-child(2) { opacity: 0;}
.open header .toggle_btn span:nth-child(3) { -webkit-transform: translateY(-8px) rotate(315deg); transform: translateY(-8px) rotate(315deg);}
.open header #mask { display: block; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: .3; z-index: 15; cursor: pointer;}
}

/*==================================
	footer
==================================*/
footer { padding: 100px 0 80px 0; background: #222; color: #fff;}
footer a { color: #fff;}
footer .ft_block { display: flex; justify-content: space-between;}
footer .ft_block .ft_logo { width: 25%; max-width: 318px;}
footer .ft_block .ft_logo img { width: 100%;}
footer .ft_block .ft_menu { width: 60%; display: flex; justify-content: flex-end;}
footer .ft_block .ft_menu .box01 { width: 46%;}
footer .ft_block .ft_menu .box02 { width: 54%;}
footer .ft_block .ft_menu .list {}
footer .ft_block .ft_menu .list.list01 { height: 200px;}
footer .ft_block .ft_menu .list.list02 { margin-top: 60px;}
footer .ft_block .ft_menu .list dt { font-size: 12px; font-family: "Outfit"; font-weight: 500;}
footer .ft_block .ft_menu .list dd p { font-size: 16px; margin-top: 30px; margin-left: 20px;}
footer .ft_block .ft_menu .list dd a {}
footer .ft_block .ft_menu .list .column2 { display: flex; flex-wrap: wrap; align-content: flex-start;}
footer .ft_block .ft_menu .list .column2 p { width: calc(50% - 20px);}
footer .ft_block .ft_menu .list .column2 p.ml0 { margin-left: 0;}
footer .ft_block .ft_menu .box02 .list .column2 p { width: calc(100% - 220px);}
footer .ft_block .ft_menu .box02 .list .column2 p.wide { width: 200px;}
footer .ft_line { margin-top: 50px; display: flex; justify-content: space-between; align-items: flex-end;}
footer .ft_line .ft_link { margin-left: 150px; width: 180px; display: flex; align-items: center; justify-content: space-between;}
footer .ft_line .ft_link li{}
footer .ft_line .ft_link li a {}
footer .ft_line copy { font-size: 12px; color: #535353; font-family: "Outfit";}
@media screen and (max-width: 1359px) {
footer .outer { width: 90%;}
footer .ft_block .ft_menu { width: 65%;}
}
@media screen and (max-width: 1099px) {
footer .ft_block { display: block;}
footer .ft_block .ft_logo { margin: 0 auto 80px auto;}
footer .ft_block .ft_menu { width: 70vw; margin: 0 auto;}
footer .ft_block .ft_menu .box01 { width: 48%;}
footer .ft_block .ft_menu .box02 { width: 52%;}
footer .ft_block .ft_menu .list.list01 { height: 150px;}
footer .ft_line .ft_link { margin-left: 0;}
}
@media screen and (max-width: 899px) {
footer { padding: 75px 0 60px 0;}
footer .outer { width: 84%;}
footer .ft_block .ft_logo { width: 30%; margin-bottom: 40px;}
footer .ft_block .ft_menu { width: 100%; display: block; border-bottom: solid 1px #393939;}
footer .ft_block .ft_menu .list { border-top: solid 1px #393939;}
footer .ft_block .ft_menu .list dt { font-size: 15px; padding: 20px 5%; cursor: pointer; background: url("../img/ft_menu_off.webp") no-repeat 94% center; background-size: auto 2.5vw;}
footer .ft_block .ft_menu .list dt:hover { opacity: 0.8;}
footer .ft_block .ft_menu .list dt.open { background: url("../img/ft_menu_on.webp") no-repeat 94% center; background-size: auto 2.5vw;}
footer .ft_block .ft_menu .list dt.open:hover { opacity: 1;}
footer .ft_block .ft_menu .list dd { display: none; padding-bottom: 20px;}
footer .ft_block .ft_menu .list dd p { font-size: 12px; margin: 0; padding: 10px 0 10px 5%;}
footer .ft_block .ft_menu .list dd p a:before { content: "・"; display: inline-block;}
footer .ft_block .ft_menu .box01 { width: 100%;}
footer .ft_block .ft_menu .box02 { width: 100%;}
footer .ft_block .ft_menu .box02 .list .column2 p { width: calc(40% - 5%);}
footer .ft_block .ft_menu .box02 .list .column2 p.wide { width: calc(70% - 5%);}
footer .ft_block .ft_menu .list.list01 { height: auto;}
footer .ft_block .ft_menu .list.list02 { margin-top: 0;}
footer .ft_line { position: relative; display: block;}
footer .ft_line .ft_link { position: absolute; right: 0; bottom: 0; width: auto;}
footer .ft_line .ft_link li { width: 17px; margin: 0 10px;}
footer .ft_line .ft_link li:nth-child(1) { width: 14px;}
footer .ft_line .ft_link li img { width: 100%;}
footer .ft_line copy { font-size: 14px;}
}