@charset "utf-8";


/*		font-style
-------------------------------------------------- */
body { color: #802e1f;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "Noto Serif JP","游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}


#container {}

#ft { background: #fff;}
#ft .inner-ft { padding: 50px 0 30px;}
#ft h3 { margin-bottom: 30px; text-align: center;}
#ft h3 img { width: 40%; max-width: 160px;}
#ft ul { font-size: 0; text-align: center;}
#ft ul li { display: inline-block; margin: 0 30px; font-size: 14px;}
#ft ul li a { color: #000; text-decoration: none;}
#ft .copyright { padding: 10px 0; background: #000;}
#ft .copyright p { color: #fff; font-size: 12px; text-align: center;}
@media (max-width: 801px) {
	#ft ul li { margin: 0 20px;}
}
@media (max-width: 641px) {
	#ft .inner-ft { padding: 50px 0;}
	#ft h3 { margin-bottom: 20px;}
	#ft ul { width: 92%; margin: 0 auto;}
	#ft ul li { display: block; width: 100%; margin: 0; padding: 8px 0;}
	#ft ul li a { display: block; width: 94%; margin: 0 auto; padding: 5px 0;}
}
@media (max-width: 481px) {
	#ft .inner-ft { padding: 40px 0 20px;}
	#ft h3 { margin-bottom: 10px;}
	#ft ul li { padding: 5px; font-size: 12px;}
	#ft .copyright p { font-size: 10px; letter-spacing: 0.05rem;}
}


.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('./img/bg.jpg') repeat-y 50% 50%;}
@media (max-width: 481px) {
}


.ttl { padding: 24px 0; background: #dd64b7; text-align: center;}
.ttl h2 { color: #fff; font-size: 30px; letter-spacing: 0.1rem;}
.ttl h2:before { content: ''; display: inline-block; width: 50px; height: 52px; margin-right: 12px;
 background: url('https://and-honey.live/img/icn-wh.svg') no-repeat 50% 50% / 100% auto;
 vertical-align: middle;
}
.ttl h2 span { display: inline-block; vertical-align: middle;}
@media (max-width: 641px) {
	.ttl { padding: 12px 0;}
}
@media (max-width: 481px) {
	.ttl { padding: 8px 0;}
	.ttl h2 { font-size: 21px;}
	.ttl h2:before { width: 32px; height: 36px; margin-right: 8px;}
}

.note { width: 100%;}
.note ul { width: 90%;}
.note ul li { color: #a19da8; font-size: 10px;}
@media (max-width: 641px) {
	.note ul li { font-size: 9px;}
}


.badge { position: fixed; right: 0; top: 0; width: 100%; z-index: 10;}
.badge div { width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 40px; text-align: right;}
.badge div img { width: 24%; max-width: 180px;}
@media (max-width: 1001px) {
	.badge div img { max-width: 120px;}
}
@media (max-width: 801px) {
	.badge div { padding: 12px 20px;}
}
@media (max-width: 481px) {
	.badge div { padding: 10px;}
}

#kv { position: relative; z-index: 3;}
#kv .inner-kv { position: relative; width: 100%;}
#kv .inner-kv:before { content: ''; display: block; width: 100px; height: 180px; position: absolute; left: 18%; top: 0px; z-index: 2;
 background: url('./img/ribon.png') no-repeat 50% 100% / 100% auto;
}
#kv .kv-top { padding: 70px 0 50px;}
#kv .kv-top .logo { position: relative; width: 45%; max-width: 290px; margin: 0 auto;}
#kv .kv-top .logo img { width: 100%;}
#kv .kv-top h1 { display: none; text-align: center;}
#kv .kv-top h1 img { width: 72%; max-width: 570px;}
#kv .kv-top .note { display: none;}
#kv .kv-top .note ul { width: 220px; margin: 0 0 0 auto;}
#kv .image { position: relative; width: 100%; z-index: 1;}
#kv .image img { width: 100%;}
#kv .image img.sp { display: none;}
#kv .image .note { position: absolute; bottom: 0; z-index: 2;}
#kv .image .note ul { max-width: 240px; padding: 10px 0; margin: 0 0 0 auto;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#kv .inner-kv:before { width: 80px; height: 120px; left: 6%;}
	#kv .kv-top { padding: 50px 0 12px;}
	#kv .kv-top .logo { margin: 0 auto 20px;}
	#kv .kv-top h1 { display: block; margin-bottom: 12px;}
	#kv .kv-top h1 img { width: 80%;}
	#kv .kv-top .note { display: block;}
	#kv .image img.pc { display: none;}
	#kv .image img.sp { display: block;}
	#kv .image .note { display: none;}
}
@media (max-width: 481px) {
	#kv .inner-kv:before { width: 60px; height: 100px; left: 4%;}
	#kv .kv-top { padding: 30px 0 12px;}
	#kv .kv-top .logo { margin: 0 auto 12px;}
	#kv .kv-top .note ul { width: 190px;}
}


#product { position: relative; z-index: 2;}
#product .tit { padding: 10px 0; background: #dd64b7;}
#product .tit h2 { text-align: center;}
#product .tit h2 img { width: 95%; max-width: 372px;}
#product .tit p { display: none; color: #fff; font-size: 10px; text-align: right;}
#product .inner-sct { padding: 50px 0 30px; background: url('./img/bg-product.png') no-repeat 50% 50%;}
#product .ctn { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding-left: 320px;}
#product .ctn figure { position: absolute; left: 0; top: 0; z-index: 1; width: 65%;}
#product .ctn figure img { width: 100%;}
#product .ctn .txt { position: relative; padding: 40px 0 60px; z-index: 2;}
#product .ctn .txt h3 { font-size: 25px; font-weight: 700; line-height: 1.4; text-align: center;}
#product .ctn .txt h3 span { display: block; font-size: 36px;}
#product .ctn .txt hr { width: 100%; max-width: 360px; height: 2px; background: #802e1f; margin: 10px auto; border: 0; }
#product .ctn .txt p { font-weight: 700; text-align: center;}
#product .ctn .txt p.name { font-size: 18px;}
#product .ctn .txt p.price{ margin-bottom: 16px; font-size: 16px;}
#product .ctn .txt p.price span { font-size: 14px;}
#product .ctn .point { width: 100%; max-width: 380px; margin: 0 auto;}
#product .ctn .point p { text-align: center;}
#product .ctn .point p img { width: 100%;}
@media (max-width: 801px) {
	#product .tit { padding: 10px 0 4px;}
	#product .tit h2 { margin-bottom: -10px;}
	#product .tit p { display: block; padding: 0 12px;}
	#product .inner-sct { padding: 30px 0px; background: url('./img/bg-product@sp.png') no-repeat 50% 30% / 100% auto;}
	#product .ctn { padding-left: 0px;}
	#product .ctn figure { position: relative; left: auto; top: auto; width: 100%; margin-bottom: -4vw; text-align: center;}
	#product .ctn figure img { width: 80%;}
	#product .ctn .txt { padding: 0px;}
	#product .ctn .txt p.price{ margin-bottom: 10px;}
}
@media (max-width: 481px) {
	#product .tit h2 { margin-bottom: -8px;}
	#product .tit p { padding: 0 6px; font-size: 9px;}
	#product .inner-sct { padding: 24px 0px 30px;}
	#product .ctn .txt h3 { font-size: 18px;}
	#product .ctn .txt h3 span { font-size: 26px;}
	#product .ctn .txt hr { width: 90%;}
	#product .ctn .txt p.name { margin-bottom: 6px; font-size: 16px;}
	#product .ctn .txt p.price{ margin-bottom: 12px; font-size: 14px;}
	#product .ctn .txt p.price span { font-size: 12px;}
	#product .ctn .point p img { width: 94%;}
}


#point { position: relative; z-index: 2;}
#point .inner-sct { position: relative; padding: 80px 0 40px;}
#point .tit { position: relative; margin-bottom: -140px; z-index: 2;}
#point .tit h3 { margin-bottom: 12px; font-size: 38px; font-weight: 800; line-height: 1.2; text-align: center;}
#point .tit h3 span { display: inline-block; background: linear-gradient(transparent 50%,#fff 50%);}
#point .tit p { font-size: 21px; font-weight: 700; text-align: center;}
#point .tit p span { display: block;}
#point figure { position: relative; margin-bottom: 50px; text-align: center; z-index: 1;}
#point figure img { width: 100%; max-width: 1080px;}
#point figure img.sp { display: none;}
#point aside { display: none; text-align: center;}
#point .note ul { width: 92%; max-width: 720px; margin: 0 auto;}
@media (max-width: 1001px) {
	#point .inner-sct { padding: 40px 0 30px;}
	#point .tit { margin-bottom: -10vw;}
}
@media (max-width: 801px) {
	#point .tit { margin-bottom: 30px;}
	#point figure img.pc { display: none;}
	#point figure img.sp { display: block; margin: 0 auto;}
	#point aside { display: block; margin-bottom: 30px;}
	#point aside img { width: 80%; max-width: 600px;}
}
@media (max-width: 481px) {
	#point .inner-sct { padding: 20px 0 30px;}
	#point .tit { margin-bottom: 16px;}
	#point .tit h3 { font-size: 30px;}
	#point .tit p { font-size: 16px;}
	#point figure { margin-bottom: 20px;}
	#point aside { margin-bottom: 20px;}
}




#campaign .inner-sct { padding: 60px 0;}
#campaign .ctn { width: 100%; max-width: 900px; margin: 0 auto;}
#campaign .ctn figure { position: relative; margin-bottom: -65px; text-align: center;}
#campaign .ctn figure img { width: 100%; max-width: 800px;}
#campaign .ctn figure img.sp { display: none;}
#campaign .ctn .box { width: 90%; max-width: 650px; margin: 0 auto; padding: 18px; background: #fff; border-radius: 30px;}
#campaign .ctn .box .inner { padding: 70px 0 20px; border: solid 2px #dd64b7; border-radius: 20px;}
#campaign .ctn .box p { text-align: center;}
#campaign .ctn .box p.txt { margin-bottom: 20px; font-size: 18px; font-weight: 900; letter-spacing: 0.075rem;}
#campaign .ctn .box p.txt span { display: block;}
#campaign .ctn .box p.txt span em { font-size: 23px;}
#campaign .ctn .box p.txt span.name { color: #c94a9e;}
#campaign .ctn .box p.date { color: #dd64b7; font-size: 18px;}
#campaign .ctn .box p.date span { display: inline-block; padding-bottom: 4px; border-bottom: solid 1px #dd64b7;}
#campaign .ctn .box .btn { width: 72%; max-width: 260px; margin: 0 auto 18px;}
#campaign .ctn .box .btn a { position: relative; display: block; padding: 10px; background: #dd64b7; border-radius: 50px;
 color: #fff; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none;
}
#campaign .ctn .box .btn a:after { content: ''; display: block; width: 8px; height: 8px;
 border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#campaign .ctn .box .btn a:hover { opacity: 0.8;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#campaign .inner-sct { padding: 40px 0;}
	#campaign .ctn figure { margin-bottom: -90px;}
	#campaign .ctn figure img.pc { display: none;}
	#campaign .ctn figure img.sp { display: block;}
	#campaign .ctn .box { padding: 10px; border-radius: 20px;}
	#campaign .ctn .box .inner { padding: 100px 0 20px; border-radius: 20px;}
}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 12px 0 20px;}
	#campaign .ctn .box { padding: 8px; border-radius: 16px;}
	#campaign .ctn .box .inner { padding: 100px 0 30px; border-radius: 14px;}
	#campaign .ctn .box p.txt { margin-bottom: 16px; font-size: 15px; letter-spacing: 0.05rem;}
	#campaign .ctn .box p.txt span em { font-size: 18px;}
	#campaign .ctn .box .btn { margin: 0 auto 12px;}
	#campaign .ctn .box .btn a { padding: 8px 0; font-size: 16px;}
	#campaign .ctn .box .btn a:after { width: 6px; height: 6px; right: 15px;}
	#campaign .ctn .box p.date { font-size: 14px;}
	#campaign .ctn .box p.date span { padding-bottom: 2px;}
}


#series { position: relative; z-index: 2;}
#series .inner-sct { padding: 40px 0 60px;}
#series .tit { margin-bottom: 50px; text-align: center;}
#series .tit h3 img { width: 68%; max-width: 540px;}
#series .tit h3 img.sp { display: none;}
#series ul.series { width: 94%; max-width: 1200px; margin: 0 auto;}
#series ul.series li { color: #621a14;}
@media (max-width: 481px) {
	#series .inner-sct { padding: 30px 0;}
	#series .tit { margin-bottom: 30px;}
	#series .tit h3 img.pc { display: none;}
	#series .tit h3 img.sp { display: block; margin: 0 auto;}
	#series .sp-show div span { color: #621a14;}
	#series .slider .slick-prev{ left: 10px;}
	#series .slider .slick-next{ right: 10px;}
}