@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@700&display=swap');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-family: inherit;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
strong {font-weight:bold;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
figure{margin:0}
option,select {color: #1A0021;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture {display: block;}
img {padding:0; margin:0; vertical-align:bottom; max-width: 100%;}
a { text-decoration:none; color: #1A0021; transition: .4s;}
a:hover { opacity:0.8;transition: .4s;}

/*
font-family: "Noto Sans JP", sans-serif; Medium 500
font-family: "Shippori Mincho", serif; font-weight: 700;
*/

:root {
--min-w: 375px;
--max-w: 430px;
--vw-scale: calc(clamp(var(--min-w), 100vw, var(--max-w)) / 390);
}

html, body {overflow-x: hidden;}

body{color:#1A0021; font-family: "Noto Sans JP", Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic', Meiryo; font-weight: 400;line-height: 1.8; font-size: 16px; background-color: #FFCE00;}

header {max-width: 430px; height: calc(56 * var(--vw-scale)); padding: 0px calc(16 * var(--vw-scale)); display: flex; justify-content: space-between; align-items: center; position: fixed; box-sizing: border-box; top: 0; left: 0;right: 0; margin: auto; background-color: #FFF; z-index: 100;}
header > p.logo {width:calc(93 * var(--vw-scale)); font-size: 0;}
header > p.logo img {width: 100%;}
header > ul {display: flex; align-items: center;}
header > ul li {width:calc(121 * var(--vw-scale)); height: calc(32 * var(--vw-scale));}
header > ul li a {display: block; width: 100%; height: 100%; font-size:calc(14 * var(--vw-scale)); font-weight: 700; color: #101010; display: flex; justify-content: center; align-items: center; background-color: #FFCE00; border-radius:calc(4 * var(--vw-scale)); line-height: 100%;}
header > ul li + li {margin-left:calc(8 * var(--vw-scale))}
header > ul li + li a {background-color: #388B9A; color: #FFF;}

.content_wrap {max-width: 430px; margin: 0px auto; padding-top: calc(56 * var(--vw-scale));background-color: #FFF;}
div.item {position: relative; z-index: 4;}
div.item p {width:calc(244 * var(--vw-scale)); position: absolute; left: calc(8 * var(--vw-scale)); top: calc(-71 * var(--vw-scale));}
div.item dl dt {margin-top: -23px;}
div.item dl dt + dd {width: calc(348 * var(--vw-scale)); left: 0; right: 0; margin: auto; position: absolute; bottom:calc(106 * var(--vw-scale));}
div.item dl dt + dd button {appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer;}
div.item dl dt + dd button:hover {opacity: .7;}
div.item dl dt + dd input[type='image'] {width: 100%; appearance: none;}
div.item dl dd + dd {width: calc(330 * var(--vw-scale)); left: 0; right: 0; margin: auto; position: absolute; bottom:calc(30 * var(--vw-scale));}
div.item dl dd + dd ul li {font-size: 10px; line-height: 140%;}

.sdow {filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));}

.commit {margin-bottom: calc(20 * var(--vw-scale));}
.commit_main {background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/commit_bg.webp) no-repeat; margin-top:calc(-50 * var(--vw-scale)); padding-top:calc(314 * var(--vw-scale)); background-size:100%; }
.commit_main > div {margin: 0px calc(16 * var(--vw-scale)); position: relative; background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/commit_bg2.jpg) no-repeat; background-size: cover; border-radius:calc(10 * var(--vw-scale)); padding: calc(36 * var(--vw-scale)) calc(14 * var(--vw-scale)) calc(78 * var(--vw-scale));}
.commit_main > div h2 {width:calc(358 * var(--vw-scale)) ; position: absolute; left: 0; right: 0; margin: auto; top:calc(-72 * var(--vw-scale));}

.point_main { padding: calc(40 * var(--vw-scale)) calc(20 * var(--vw-scale)) calc(20 * var(--vw-scale)); background-color: #FFFEEA; border-radius: calc(10 * var(--vw-scale));}
.point_main > div dl {display: flex; align-items: center;}
.point_main > div dt {width:calc(65 * var(--vw-scale)); flex-shrink: 0;}
.point_main > div dd {color: #622900; font-size: calc(20 * var(--vw-scale)); font-weight: 700; font-family: "Shippori Mincho", serif; line-height: 120%; margin-left:calc(12 * var(--vw-scale)) ;}
.point_main > div figure {margin-top:calc(23 * var(--vw-scale));}
.point_main > div figure figcaption {color: #1A0021; font-size: calc(16 * var(--vw-scale)); margin-top:calc(16 * var(--vw-scale));}
.point_main > div figure figcaption p {line-height: 140%; font-weight: 500;}
.point_main > div + div {margin-top:calc(50 * var(--vw-scale)) ;}

.bee_main {position: relative; padding:calc(50 * var(--vw-scale)) 0px 0px;}
.bee_main:before {content: ""; width:calc(74 * var(--vw-scale)); height: calc(82 * var(--vw-scale)); position: absolute; left: 0; top: 0; background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/leaf_01.webp) no-repeat; background-size: cover;}
.bee_main > div.bee_001 {position: relative; padding: 0px calc(16 * var(--vw-scale));}
.bee_main > div.bee_001 > p {font-size:calc(18 * var(--vw-scale)); font-weight: 700; font-family: "Shippori Mincho", serif; text-align: center;}
.bee_main > div.bee_001 > h2 {font-size: calc(24 * var(--vw-scale)); font-weight: 700; font-family: "Shippori Mincho", serif; text-align: center; color: #D10800; display: flex; align-items: center; justify-content: center; margin-top: calc(12 * var(--vw-scale));}
.bee_main > div.bee_001 > h2 strong {font-size:calc(48 * var(--vw-scale)); line-height: 100%}
.bee_main > div.bee_001 > figure {margin-top:calc(30 * var(--vw-scale)) ; padding: 0px calc(16 * var(--vw-scale)); }
.bee_main > div.bee_001 > figure figcaption {font-size: calc(16 * var(--vw-scale)); font-weight: 500; line-height: 160%; margin-top: calc(16 * var(--vw-scale));}
.bee_main > div.bee_001:after {content: ""; width:calc(105 * var(--vw-scale)); height: calc(120 * var(--vw-scale)); position: absolute; right:0px; bottom: calc(-80 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/leaf_02.webp) no-repeat; background-size: cover;}

.bee_main > div.bee_002 {padding: 0px calc(32 * var(--vw-scale)); margin-top: calc(50 * var(--vw-scale));}
.bee_main > div.bee_002 > h3 {font-size: calc(20 * var(--vw-scale)); color: #D10800;font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%;}
.bee_main > div.bee_002 > dl { display: flex; margin-top:calc(28 * var(--vw-scale)); align-items: center;}
.bee_main > div.bee_002 > dl dt {width:calc(124 * var(--vw-scale)); flex-shrink: 0;}
.bee_main > div.bee_002 > dl dd {margin-left:calc(20 * var(--vw-scale)); font-size:calc(16 * var(--vw-scale)); line-height: 160%;}
.bee_main > div.bee_002 > figure {background-color: #FFFEEA; border-radius:calc(10 * var(--vw-scale)); padding:calc(20 * var(--vw-scale)); margin-top: calc(24 * var(--vw-scale));}
.bee_main > div.bee_002 > figure figcaption {font-size:calc(16 * var(--vw-scale)); line-height: 160%; margin-top: calc(14 * var(--vw-scale));}

.bee_main > div.bee_003 {position: relative; padding-top:calc(50 * var(--vw-scale));}
.bee_main > div.bee_003:before {content: ""; width:calc(102 * var(--vw-scale)); height: calc(104 * var(--vw-scale)); position: absolute; left: 0px; top: calc(-13 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/leaf_03.webp) no-repeat; background-size: cover;}
.bee_main > div.bee_003 > h3 {text-align: center; font-size: calc(20 * var(--vw-scale)); color: #D10800;font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%;}
.bee_main > div.bee_003 > figure {padding: 0px 0px 0px calc(32 * var(--vw-scale)); margin-top:calc(20 * var(--vw-scale)); display: flex;}
.bee_main > div.bee_003 > figure picture {width: calc(162 * var(--vw-scale)); flex-shrink: 0;}
.bee_main > div.bee_003 > figure figcaption {margin-right: calc(6 * var(--vw-scale));}
.bee_main > div.bee_003 > figure figcaption p { font-size:calc(16 * var(--vw-scale)); line-height: 160%;}

.bee_select {background-color: #FFFEEA; margin-top: calc(30 * var(--vw-scale)); position: relative;}
.bee_select_head {background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/bee_select_bg.webp) no-repeat; background-size: cover; padding:calc(40 * var(--vw-scale)) 0px; text-align: center;}
.bee_select_head > p {color: #FFF; font-size: calc(24 * var(--vw-scale));font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%;}
.bee_select_head > h2 {color: #FFF; font-size: calc(40 * var(--vw-scale));font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%;}
.bee_select_main {padding:calc(36 * var(--vw-scale)) 0px calc(110 * var(--vw-scale)) 0px; position: relative; }
.bee_select_main:after {content: ""; width:calc(154 * var(--vw-scale)); height: calc(134 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/bee_select_after.webp) no-repeat; background-size: cover; right: 0; bottom: 0; position: absolute;}
.bee_select_main > h3 {text-align: center; font-size: calc(20 * var(--vw-scale)); font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%;}
.bee_select_main > figure {margin-top:calc(16 * var(--vw-scale)); padding: 0px calc(16 * var(--vw-scale));}
.bee_select_main > figure figcaption {margin-top: calc(16 * var(--vw-scale));}
.bee_select_main > figure figcaption p {font-size:calc(16 * var(--vw-scale)); line-height: 160%;}
.bee_select_main > div.loop {overflow: hidden;}
.bee_select_main > div.loop ul { display: flex; flex-wrap: nowrap; animation: loop-scroll 20s linear infinite; gap:0 calc(18 * var(--vw-scale)); margin-top: calc(24 * var(--vw-scale)); }
.bee_select_main > div.loop ul li {height: auto; width: auto; display: block; max-height: 100%; flex-shrink: 0;height: calc(103 * var(--vw-scale));}
.bee_select_main > div.loop ul li img {height: 100%;}
@keyframes loop-scroll {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

.product {background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/product_bg.png) repeat; position: relative; padding:calc(20 * var(--vw-scale)) 0px calc(55 * var(--vw-scale));}
.product:before {content: ""; width: calc(327 * var(--vw-scale)); height: calc(90 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/product_title_bg.webp) no-repeat; background-size: cover; position: absolute; top: -1px; left: 0; right: 0; margin: auto; z-index: 1;}
.product > h2 {text-align: center; font-size: calc(24 * var(--vw-scale)); font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%; color: #FFF; position: relative; z-index: 2;}
.product > div.product_main {padding: 0px calc(16 * var(--vw-scale)); position: relative; z-index: 2;}
.product_main > div.content { background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/product_main_bg.webp) no-repeat; background-size: contain; padding: calc(40 * var(--vw-scale)) calc(36 * var(--vw-scale)) calc(40 * var(--vw-scale)); margin-top:calc(-4 * var(--vw-scale)); position: relative; z-index: 3;}
.product_main > div.content > h3 {font-size: calc(20 * var(--vw-scale)); font-weight: 700; color: #622900; text-align: center; position: relative; padding-bottom: calc(11 * var(--vw-scale));}
.product_main > div.content > h3:after {content: ""; width: calc(188 * var(--vw-scale)); height: calc(3 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/under_line.png) no-repeat; background-size: contain; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
div.content_01 {margin-top: calc(30 * var(--vw-scale));}
div.content_01 figure {display: flex; align-items: center;}
div.content_01 figure picture {width: calc(136 * var(--vw-scale)); margin-left: calc(10 * var(--vw-scale)); flex-shrink: 0;}
div.content_01 figure figcaption {font-size: calc(16 * var(--vw-scale)); line-height: 160%;}
div.content_01 > div {margin-top: calc(20 * var(--vw-scale)); background-color: #F2A268; border-radius: calc(10 * var(--vw-scale)); padding: calc(16 * var(--vw-scale));}
div.content_01 > div p {font-size: calc(16 * var(--vw-scale)); color: #FFF; background-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,#F2A268 50%,#F2A268 50%),linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 97%,#FFF 97%,#FFF 100%);background-size:8px 100%,100% 2.2em;line-height:2.2;}

div.content_02 {margin-top: calc(40 * var(--vw-scale));}
div.content_02 figure {display: flex; align-items: center;}
div.content_02 figure picture {width: calc(116 * var(--vw-scale)); margin-right: calc(26 * var(--vw-scale)); flex-shrink: 0;}
div.content_02 figure figcaption {font-size: calc(16 * var(--vw-scale)); line-height: 160%;}
div.content_02 > div {margin-top: calc(20 * var(--vw-scale)); background-color: #F2A268; border-radius: calc(10 * var(--vw-scale)); padding: calc(16 * var(--vw-scale));}
div.content_02 > div p {font-size: calc(16 * var(--vw-scale)); color: #FFF; background-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,#F2A268 50%,#F2A268 50%),linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 97%,#FFF 97%,#FFF 100%);background-size:8px 100%,100% 2.2em;line-height:2.2;}

div.allergy {margin-top: calc(40 * var(--vw-scale)); border: 4px solid #D10800; background-color: #FFF; padding: calc(16 * var(--vw-scale));}
div.allergy > h4 {font-size: calc(16 * var(--vw-scale)) ; color: #D10800; text-align: center; font-weight: 700; line-height: 160%;}
div.allergy > p {font-size: calc(16 * var(--vw-scale)) ; margin-top: calc(16 * var(--vw-scale));}

.voice {background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/voice_bg.webp) no-repeat; background-size: cover; padding:calc(10 * var(--vw-scale)) 0px calc(48 * var(--vw-scale)) 0px ;}
.voice > p {width: calc(361 * var(--vw-scale)); margin: 0px auto;}
.voice > h2 {text-align: center; color: #622900; font-size: calc(40 * var(--vw-scale)); font-family: "Shippori Mincho", serif; font-weight: 700; line-height: 160%;}
.voice > figure {position: relative; margin: 0px calc(16 * var(--vw-scale)); margin-top:calc(23 * var(--vw-scale)) ;}
.voice > figure figcaption {position: absolute; top:calc(204 * var(--vw-scale)) ; padding: 0px calc(16 * var(--vw-scale)); }
.voice > figure figcaption p {font-size: calc(13 * var(--vw-scale)); line-height: 170%; letter-spacing: 0.1em;}

.survey {background-color: #FFFEEA; padding:calc(34 * var(--vw-scale)) 0px calc(106 * var(--vw-scale));}
.survey > p {font-size:calc(24 * var(--vw-scale)); font-weight: 700; color: #622900; text-align: center;}
.survey > h2 {font-size: calc(32 * var(--vw-scale)); font-weight: 700; color: #622900; text-align: center; position: relative; line-height: 100%; margin-top: calc(10 * var(--vw-scale));}
.survey > h2 span {position: relative; z-index: 1;}
.survey > h2:after {content: ""; width:calc(252 * var(--vw-scale)); height: calc(38 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/survey_title_bg.png) no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: 0;}
.survey > figure {margin: calc(30 * var(--vw-scale)) calc(30 * var(--vw-scale)) 0; border: 2px solid #FC9B00; border-radius:calc(10 * var(--vw-scale)); box-sizing: border-box; overflow: hidden;}

.faq {background-color: #EAF0F0; padding: calc(40 * var(--vw-scale)) 0 calc(110 * var(--vw-scale));}
.faq > h2 {font-size: calc(24 * var(--vw-scale)); font-weight: 700; color: #388B9A; text-align: center;}
.faq > h2 span {position: relative;}
.faq > h2 span:after {content: ""; width: calc(72 * var(--vw-scale)); height: calc(4 * var(--vw-scale)); background-color: #388B9A; margin: auto; position: absolute; left: 0; right: 0; bottom:calc(-12 * var(--vw-scale));}
.faq > div.faq_main {padding: 0 calc(16 * var(--vw-scale)); margin-top: calc(50 * var(--vw-scale));}
.faq > div.faq_main dl dt {background-color: #FFF; display: flex; align-items: center; padding: calc(20 * var(--vw-scale)) calc(40 * var(--vw-scale)) calc(20 * var(--vw-scale)) calc(20 * var(--vw-scale)); position: relative; cursor: pointer;}
.faq > div.faq_main dl dt:before {content: "Q"; width: calc(32 * var(--vw-scale)); height: calc(32 * var(--vw-scale)); background-color: #388B9A; font-size: calc(20 * var(--vw-scale)); font-weight: 700;font-family: "Shippori Mincho", serif; color: #FFF; display: flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 50%;}
.faq > div.faq_main dl dt span {color: #388B9A; font-size:calc(14 * var(--vw-scale)); font-weight: 700; margin-left: calc(10 * var(--vw-scale)); line-height: 160%;}
.faq > div.faq_main dl dt:after {content: ""; width: calc(22 * var(--vw-scale)); height: calc(22 * var(--vw-scale)); background: url(https://gigaplus.makeshop.jp/hachibeikan/oc_hachinoko/faq_arrow.svg) no-repeat; background-size:contain; position: absolute; right: calc(10 * var(--vw-scale)); top: calc(50% - calc(10 * var(--vw-scale)));transition: .4s;}
.faq > div.faq_main dl dt.active:after {transform: rotate(180deg); transition: .4s;}
.faq > div.faq_main dl dd {display:none; background-color: #388B9A; padding: calc(20 * var(--vw-scale)) calc(20 * var(--vw-scale)) calc(20 * var(--vw-scale)) calc(62 * var(--vw-scale)); position: relative;}
.faq > div.faq_main dl dd:before {content: "A"; width: calc(32 * var(--vw-scale)); height: calc(32 * var(--vw-scale)); background-color: #FFF; font-size: calc(20 * var(--vw-scale)); font-weight: 700;font-family: "Shippori Mincho", serif; color: #388B9A; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: absolute; left: calc(20 * var(--vw-scale)); top: calc(20 * var(--vw-scale));}
.faq > div.faq_main dl dd span {color: #FFF; font-size:calc(14 * var(--vw-scale)); font-weight: 400; line-height: 160%;}
.faq > div.faq_main dl + dl {margin-top: calc(24 * var(--vw-scale));}
.faq > div.aftersp {background-color: #FFF; margin:calc(48 * var(--vw-scale)) calc(16 * var(--vw-scale)) 0px; border: 4px solid #388B9A; border-radius: calc(10 * var(--vw-scale)); padding: calc(22 * var(--vw-scale)); box-sizing: border-box;}
.faq > div.aftersp > h3 {font-size: calc(16 * var(--vw-scale)); font-weight: 700; text-align: center;}
.faq > div.aftersp > p {text-align: center; font-size: calc(14 * var(--vw-scale)); line-height: 160%; margin-top:calc(10 * var(--vw-scale)) ;}
.faq > div.aftersp > dl {display: flex; align-items: center; margin-top: calc(24 * var(--vw-scale));}
.faq > div.aftersp > dl dt {width: calc(40 * var(--vw-scale)); flex-shrink: 0;}
.faq > div.aftersp > dl dd {margin-left: calc(10 * var(--vw-scale));}
.faq > div.aftersp > dl dd p {font-size: calc(10 * var(--vw-scale)); font-weight: 700;}
.faq > div.aftersp > dl dd p span {font-size: calc(14 * var(--vw-scale));}
.faq > div.aftersp > dl dd p em {}
.faq > div.aftersp > dl dd h4,.faq > div.aftersp > dl dd h4 a {font-size:calc(22 * var(--vw-scale)); color: #D10800; font-weight: 700; line-height: 100%;}
.faq > div.aftersp > dl dd h4 span {font-size: calc(10 * var(--vw-scale));}

.voice span{text-align: right;font-size: 10px;padding-right: 15%;}

.lp_footer {max-width: 430px; margin: 0px auto;}
.lp_footer footer {width: 100%; height: calc(81 * var(--vw-scale)); display: flex; justify-content: center; align-items: center; background-color: #FFFEEA; min-width: auto;}
.lp_footer footer p {width:calc(193 * var(--vw-scale)); font-size: 0;}

.lp_footer .foot_txt{padding:10px 30px 30px 30px;background-color:#FFFEEA;font-size:12px;}
.lp_footer .foot_txt a{text-align:center;}

@media only screen and (max-width:440px){
#container_assist_count {font-size:10px!important;}
.lp_footer .foot_txt {padding-bottom:75px;}
}