@charset "UTF-8";
body { color: #4e3824;}
#hd .menu { background: #fdd87f;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #fdd87f;}
.menu-trig div span { background: #42220f;}
.menu-cart a svg { fill: #42220f;}

.min { font-family: "Sawarabi Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;}

#product { width: 100%; max-width: 1280px; margin: 0 auto;}
#product .logo { width: 100%; padding: 12px 0 0; background: #faae29;}
#product .logo h1 { text-align: center;}
#product .logo h1 a { display: block; width: 30%; max-width: 120px; margin: 0 auto;}
#product .logo h1 img { width: 100%;}
#product .ttl { background: #faae29;}
#product .ttl h2 { padding: 40px 0; background: url('../../img/deep/bg-honey.png') no-repeat 50% 50% / auto 92%;
 color: white; font-size: 36px; font-weight: 600; letter-spacing: 0.1rem; text-align: center;
}
#product .kv { position: relative; background: url('../../img/deep/top/bg/lineup.jpg') no-repeat 50% 50% / cover;}
#product .kv .kv-inner { position: relative; width: 90%; height: 800px; margin: 0 auto;}
#product .kv .inner { position: relative; width: 50%; margin: 0 0 0 auto; padding-top: 100px;}
#product .kv h2 {}
#product .kv h2 img { width: 100%; max-width: 480px;}
#product .kv h2 img.sp { display: none;}
@media (max-width: 801px) {
	#product .kv .kv-inner { height: 600px;}
}
@media (max-width: 641px) {
	#product .kv { height: 0px; padding-top: 100%; background: url('../../img/deep/top/bg/lineup-sp.jpg') no-repeat 50% 25% / 100% auto;}
	#product .kv .kv-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
	#product .kv .inner { width: 100%; height: 100%; margin: 0 auto;}
	#product .kv h2 { text-align: center;}
	#product .kv h2 img.pc { display: none;}
	#product .kv h2 img.sp { display: block; width: 78%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#product .ttl h2 { padding: 24px 0; font-size: 21px;}
	#product .kv .inner { padding-top: 30px;}
}


#product .ctn { width: 100%; margin: 0 auto;}
#product .bloc { padding: 40px 0;}
#product #item01 { background: url('../../img/deep/product/bg-1.png') no-repeat 50% 0% / cover;}
#product #item02 { background: url('../../img/deep/product/bg-2.png') no-repeat 50% 0% / cover;}
#product #item03 { background: url('../../img/deep/product/bg-3.png') no-repeat 50% 0% / cover;}
#product #item04 { padding: 50px 0; background: url('../../img/deep/product/bg-4.png') no-repeat 50% 50% / cover;}
#product #item05 { padding: 50px 0; background: url('../../img/deep/product/bg-4.png') no-repeat 50% 50% / cover;}
#product #item06 { padding: 50px 0 80px; background: url('../../img/deep/product/bg-4.png') no-repeat 50% 50% / cover;}
#product #item07 { padding: 50px 0 80px; background: url('../../img/deep/product/bg-2.png') no-repeat 50% 50% / cover;}
#product #item08 { padding: 50px 0 80px; background: url('../../img/deep/product/bg-5.png') no-repeat 50% 50% / cover;}
#product #item09 { padding: 50px 0 80px; background: url('../../img/deep/product/bg-6.png') no-repeat 50% 50% / cover;}
#product .bloc .item { display: flex; align-items: center; width: 92%; max-width: 860px; margin: 0 auto; }
#product .bloc .img { width: 32%;}
#product .bloc .txt { position: relative; width: 68%;}
#product .bloc .img figure { text-align: center;}
#product .bloc .img figure img { max-width: 92%;}

#product .bloc .txt .tag { width: 100%; max-width: 480px; margin: 0 0 30px; padding-top: 40px;}
#product .bloc .txt .tag.pt { padding-top: 30px;}
#product .bloc .txt .tag img { width: 100%;}
#product .bloc .txt h3 { margin-bottom: 12px; color: #222;
 font-family: "Sawarabi Mincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;
 font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.05rem;
}
#product .bloc .txt h3.mb { margin-bottom: 50px;}
#product .bloc .txt .more { margin-bottom: 30px;}
#product .bloc .txt .more a { display: block; width: 80%; max-width: 270px; margin: 0 0 0 auto;}
#product .bloc .txt .more a:hover { opacity: 0.8;}
#product .bloc .txt .more a img { width: 100%;}
#product .bloc .txt p.descript { margin-bottom: 12px; color: #4e3824; font-size: 18px; font-weight: 600;}
#product .bloc .txt p.descript br { display: none;}
#product .bloc .txt p.descript span { display: block; font-size: 12px;}
#product .bloc .txt dl { display: table; width: 100%;}
#product .bloc .txt dl dt,
#product .bloc .txt dl dd { display: table-cell; vertical-align: middle;}
#product .bloc .txt dl dt { width: 100px; }
#product .bloc .txt dl dd { width: auto; padding-left: 12px; color: #333; line-height: 1.2;}
#product .bloc .txt dl dt img { width: 100%;}
#product .bloc .txt dl dd span { display: block; }
#product .bloc .txt dl dd span.aroma-1,
#product .bloc .txt dl dd span.aroma-2,
#product .bloc .txt dl dd span.aroma-3,
#product .bloc .txt dl dd span.aroma-4 { font-size: 24px; font-weight: 700;}
#product .bloc .txt dl dd span.use-1,
#product .bloc .txt dl dd span.use-2,
#product .bloc .txt dl dd span.use-3,
#product .bloc .txt dl dd span.use-4 { padding-left: 6px;}
#product .bloc .txt dl dd span.aroma-1,
#product .bloc .txt dl dd span.use-1 { color: #ea68a2;}
#product .bloc .txt dl dd span.aroma-2,
#product .bloc .txt dl dd span.use-2 { color: #7baa17;}
#product .bloc .txt dl dd span.aroma-3,
#product .bloc .txt dl dd span.use-3 { color: #8245a5;}
#product .bloc .txt dl dd span.aroma-4,
#product .bloc .txt dl dd span.use-4 { color: #dd3d84;}
#product .bloc .txt .aside { position: relative; width: 100%; padding: 10px 0; padding-right: 280px;}
#product .bloc .txt p.price { color: #333; font-size: 18px; line-height: 1.4;}
#product .bloc .txt .cart { width: 270px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#product .bloc .txt .cart a { display: block; width: 100%; padding: 12px 0px; background: #4e3824; border: solid 1px #fff; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
}
#product .bloc .txt .cart a svg { display: inline-block; width: 30px; margin-right: 8px; fill: #fff; vertical-align: middle;}
#product .bloc .txt .cart a span{ display: inline-block; vertical-align: middle;}
#product .bloc .txt .cart a:hover { opacity: 0.85;}
#product .bloc .txt .cart a img { width: 100%;}
#product .bloc .txt .cart form { position: relative; display: block; width: 100%; background: #4e3824; border-radius: 50px; overflow: hidden;}
#product .bloc .txt .cart form svg { position: absolute; left: 20%; top: 50%; transform: translateY(-50%);
 display: block; width: 25px; fill: #fff;
}
#product .bloc .txt .cart form input[type="submit"]{ display: block; width: 100%; padding: 12px 0px;
 background: rgba(255,255,255,0); border: solid 1px #fff; border-radius: 50px;
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-indent: 20px;
}
#product .bloc .txt .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}

@media (max-width: 1001px) {
	#product .bloc .txt h3 { font-size: 3.2vw;}
	#product .bloc .txt .more a { max-width: 220px;}
	#product .bloc .txt .aside { padding-right: 240px;}
	#product .bloc .txt .cart { width: 220px;}
	#product .bloc .txt .cart form svg { left: 25px;}
}
@media (max-width: 801px) {
	#product .bloc .txt p.descript { font-size: 16px;}
	#product .bloc .txt dl dd span.aroma-1,
	#product .bloc .txt dl dd span.aroma-2,
	#product .bloc .txt dl dd span.aroma-3,
	#product .bloc .txt dl dd span.aroma-4 { font-size: 18px;}
	#product .bloc .txt dl dd span.use-1,
	#product .bloc .txt dl dd span.use-2,
	#product .bloc .txt dl dd span.use-3,
	#product .bloc .txt dl dd span.use-4 { font-size: 14px;}
	#product .bloc .txt .aside { padding-right: 0px;}
	#product .bloc .txt p.price { margin-bottom: 10px;}
	#product .bloc .txt .cart { position: relative; right: auto; top: auto; transform: translateY(0%); width: 270px;}
	#product .bloc .txt .cart form svg { left: 35px;}
}
@media (max-width: 641px) {
	#product .bloc { padding: 40px 0;}
	#product #item01 { background: url('../../img/deep/product/bg-1-sp.png') no-repeat 50% 20% / 100% auto;}
	#product #item02 { background: url('../../img/deep/product/bg-2-sp.png') no-repeat 50% 20% / 100% auto;}
	#product #item03 { background: url('../../img/deep/product/bg-3-sp.png') no-repeat 50% 20% / 100% auto;}
	#product #item04 { padding: 40px 0; background: url('../../img/deep/product/bg-4-sp.png') no-repeat 50% 20% / 100% auto;}
	#product #item05 { padding: 40px 0; background: url('../../img/deep/product/bg-4-sp.png') no-repeat 50% 20% / 100% auto;}
	#product #item06 { padding: 40px 0; background: url('../../img/deep/product/bg-4-sp.png') no-repeat 50% 30% / 100% auto;}
	#product #item07 { padding: 40px 0; background: url('../../img/deep/product/bg-2-sp.png') no-repeat 50% 30% / 100% auto;}
	#product #item08 { padding: 40px 0; background: url('../../img/deep/product/bg-5-sp.png') no-repeat 50% 30% / 100% auto;}
	#product #item09 { padding: 30px 0px; background: url('../../img/deep/product/bg-6-sp.png') no-repeat 50% 20% / cover;}

	#product .bloc .item { display: block;}
	#product .bloc .img { width: 100%;}
	#product .bloc .txt { width: 100%;}
	#product .bloc .img figure img { width: 30%; max-width: 100px;}
	#product .bloc .txt .tag { width: 80%; max-width: 480px; margin: 0 auto 20px; padding-top: 10px;}
	#product .bloc .txt .tag.pt { padding-top: 10px;}
	#product .bloc .txt h3 { margin-bottom: 12px; font-size: 4.0vw; text-align: center;}
	#product .bloc .txt h3.mb { margin-bottom: 12px;}
	#product .bloc .txt p.descript { text-align: center;}
	#product .bloc .txt p.descript br { display: block;}
	#product .bloc .txt dl { max-width: 360px; margin: 0 auto;}
	#product .bloc .txt dl dt,
	#product .bloc .txt dl dd { font-size: 14px;}
	#product .bloc .txt dl dt { width: 80px; }
	#product .bloc .txt dl dd { padding-left: 6px;}
	#product .bloc .txt p.price { margin-bottom: 20px; font-size: 16px; text-align: center;}
	#product .bloc .txt .cart { width: 240px; margin: 0 auto;}
}
@media (max-width: 481px) {
	#product .bloc { padding: 40px 0;}

	#product .bloc .img figure img { max-width: 90px;}
	#product .bloc .img figure img.s { width: 72px;}
	#product .bloc .txt h3 { margin-bottom: 12px; font-size: 19px;}
	#product .bloc .txt .more { margin-bottom: 20px;}
	#product .bloc .txt .more a { max-width: 180px;}
	#product .bloc .txt p.descript { font-size: 15px;}
	#product .bloc .txt dl { max-width: 320px;}
	#product .bloc .txt dl dt { width: 60px; }
	#product .bloc .txt dl dd { font-size: 13px;}
	#product .bloc .txt dl dd span.aroma-1,
	#product .bloc .txt dl dd span.aroma-2,
	#product .bloc .txt dl dd span.aroma-3,
	#product .bloc .txt dl dd span.aroma-4 { font-size: 16px;}
	#product .bloc .txt dl dd span.use-1,
	#product .bloc .txt dl dd span.use-2,
	#product .bloc .txt dl dd span.use-3,
	#product .bloc .txt dl dd span.use-4 { padding-left: 2px;}
	#product .bloc .txt p.price { margin-bottom: 12px; font-size: 15px;}
	#product .bloc .txt .cart { width: 200px;}
	#product .bloc .txt .cart a { padding: 8px 0px; font-size: 14px;}
	#product .bloc .txt .cart a svg { width: 24px;}

	#product .bloc .txt .cart form svg { left: 25px; width: 20px;}
	#product .bloc .txt .cart form input[type="submit"]{ padding: 8px 0px; font-size: 14px;}
}


#product .aside-item { width: 92%; max-width: 980px; margin: 0 auto;}
#product .aside-item .ctn-flex { display: flex; justify-content: space-between; flex-wrap: wrap;}
#product .aside-item .box { width: 48%; padding: 30px 0;}
#product .aside-item .box figure { margin-bottom: 20px; text-align: center;}
#product .aside-item .box figure img { width: 60%; max-width: 150px;}
#product .aside-item .box h4 { position: relative; margin-bottom: 20px; padding-bottom: 8px; font-size: 20px; font-weight: 400; text-align: center;}
#product .aside-item .box h4:after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
 display: block; width: 90%; height: 2px; margin: 0 auto; background: #cec0a8;}
#product .aside-item .box p.price { margin-bottom: 30px; color: #333; font-size: 20px; line-height: 1.4; text-align: center;}
#product .aside-item .box .cart { width: 100%; max-width: 270px; margin: 0 auto;}

#product .aside-item .box .cart a { display: block; width: 100%; padding: 12px 0px; background: #4e3824; border: solid 1px #fff; border-radius: 50px;
 color: #fff; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none;
}
#product .aside-item .box .cart a svg { display: inline-block; width: 28px; margin-right: 8px; fill: #fff; vertical-align: middle;}
#product .aside-item .box .cart a span{ display: inline-block; vertical-align: middle;}
#product .aside-item .box .cart a:hover { opacity: 0.85;}
#product .aside-item .box .cart a img { width: 100%;}

#product .aside-item .box .cart form { position: relative; display: block; width: 100%; background: #4e3824; border-radius: 50px; overflow: hidden;}
#product .aside-item .box .cart form svg { position: absolute; left: 20%; top: 50%; transform: translateY(-50%);
 display: block; width: 25px; fill: #fff;
}
#product .aside-item .box .cart form input[type="submit"]{ display: block; width: 100%; padding: 12px 0px;
 background: rgba(255,255,255,0); border: solid 1px #fff; border-radius: 50px;
 color: #fff; font-size: 16px; font-weight: 700; text-align: center; text-indent: 20px;
}
#product .aside-item .box .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}

@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#product .aside-item .ctn-flex { display: block;}
	#product .aside-item .box { width: 100%;}
	#product .aside-item .box figure img { width: 30%; max-width: 90px;}
	#product .aside-item .box h4 { margin-bottom: 12px; font-size: 3.6vw; line-height: 1.4;}
	#product .aside-item .box h4 span { display: block;}
	#product .aside-item .box p.price { margin-bottom: 20px; font-size: 16px;}
	#product .aside-item .box .cart { max-width: 240px;}
}
@media (max-width: 481px) {
	#product .aside-item .box { padding: 20px 0;}
	#product .aside-item .box h4 { font-size: 16px;}
	#product .aside-item .box h4:after { width: 85%;}
	#product .aside-item .box p.price { margin-bottom: 12px; font-size: 13px;}
	#product .aside-item .box .cart { max-width: 200px;}
	#product .aside-item .box .cart a { padding: 8px 0px; font-size: 14px;}
	#product .aside-item .box .cart a svg { width: 24px;}
}