@charset "UTF-8";
:root {
	--color-pink: #F8485E;
	--color-gray: #EAEAEA;
}
.for-pc { display: none !important;}

/* ---------------------------------------
	common
--------------------------------------- */
.site-guide-wrap { padding: 0 20px; margin: 0 0 60px;}
.site-guide-wrap h1,
.site-guide-wrap h2,
.site-guide-wrap h3,
.site-guide-wrap h4 { padding: 0; margin: 0; font-weight: inherit;}
.site-guide-wrap p { text-align: inherit;}
.site-guide-wrap a { color: inherit; transition: all .3s;}
.site-guide-wrap a.arrow { position: relative; display: block; padding-left: 1em;}
.site-guide-wrap a.arrow::before { content: "→"; position: absolute; left: 0;}
.site-guide-wrap img { max-width: 100%; height: auto; vertical-align: bottom;}
.site-guide-wrap sup { font-size: 0.6em; vertical-align: text-top;}
.site-guide-wrap .section { margin: 40px 0;}
.site-guide-wrap .guide_ttl { margin: 40px 0; padding: 0; font-weight: 500; font-size: 26px; letter-spacing: 0.1em; text-align: center;}
.site-guide-wrap .head_notice { font-size: 16px; letter-spacing: 0.1em; line-height: 1.625;}
.site-guide-wrap .head_notice a { text-decoration: underline;}
.site-guide-wrap { padding: 0 20px; margin: 0 0 60px;}
.site-guide-wrap .page_link_ { display: flex; justify-content: center; margin: 40px 0;}
.site-guide-wrap .page_link_ li { width: 50%;}
.site-guide-wrap .page_link_ li .btn { position: relative; display: block; padding: 15px 5px; font-weight: 500; font-size: 18px; letter-spacing: 0.1em; line-height: 1; text-align: center; color: var(--color-pink); border: 1px solid var(--color-pink);}
.site-guide-wrap .page_link_ li.active .btn { color: #fff; background: var(--color-pink);}
.site-guide-wrap .page_link_ li.active .btn:after { content: ''; width: 26px; height: 22px; background: inherit; clip-path: polygon(0 0, 100% 0%, 50% 100%); position: absolute; left: 50%; top: calc(100% - 11px); transform: translateX(-50%);}
.site-guide-wrap .page_link_ li:nth-child(1) .btn { border-radius: 4px 0 0 4px;}
.site-guide-wrap .page_link_ li:nth-child(2) .btn { border-radius: 0 4px 4px 0;}
.site-guide-wrap .sec_pagenav ul {display: flex; flex-wrap: wrap; gap: 10px;}
.site-guide-wrap .sec_pagenav ul li { width: calc((100% - 10px)/2);}
.site-guide-wrap .sec_pagenav ul li a { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 35px 0 16px; font-weight: 500; font-size: 14px; letter-spacing: 0.1em; border: 1px solid var(--color-gray); border-radius: 4px;}
.site-guide-wrap .sec_pagenav ul li a::after { content: ''; position: absolute; top: 20px; right: 15px; width: 8px; height: 8px; border: 1px solid; border-color: transparent transparent #40403F #40403F; transform: rotate(-45deg);}

/* ---------------------------------------
	パンクズ
--------------------------------------- */
.site-guide-wrap #breadcrumb li { position: relative; display: inline-block; font-size: 12px; color: #A9A8A7;}
.site-guide-wrap #breadcrumb li:not(:first-child) { padding: 0 0 0 10px;}
.site-guide-wrap #breadcrumb li:not(:first-child)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 15px 0 0; border-top: 1px solid #A9A8A7; border-right: 1px solid #A9A8A7; transform: rotate(45deg);}
.site-guide-wrap #breadcrumb li a { color: #40403F; text-decoration: none;}

/* ---------------------------------------
	共通ナビ
--------------------------------------- */
#guide_navi { margin: 80px 0 0; font-family: "Poppins", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;}
#guide_navi .sec_faq { padding: 24px; background: #FFF5F7; border-radius: 4px;}
#guide_navi .sec_faq h3 { width: fit-content; margin: 0 auto; padding: 0 0 0 40px; font-weight: 500; font-size: 20px; letter-spacing: 0.1em; background: url(/img/usr/freepage/siteguide/icon_hatena.png) no-repeat center left / 30px;}
#guide_navi .sec_faq .faq-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0;}
#guide_navi .sec_faq .faq-list li a { display: block; padding: 6px; font-size: 14px; letter-spacing: 0.04em; line-height: 1; color: var(--color-pink); background: #fff; border-radius: 4px;}
#guide_navi .sec_faq .faq-more { position: relative; display: flex; justify-content: flex-end;	align-items: center; width: fit-content; height: 34px; margin: 16px 0 0 auto;	padding: 0 50px 0 0; font-weight: 500; font-size: 13px; letter-spacing: 0.2em;}
#guide_navi .sec_faq .faq-more::after {content: '→'; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center;  width: 34px; height: 34px; border-radius: 50%; font-size: 12px; color: #40403F; background: #fff;}
#guide_navi .sec_guidenav { margin: 40px 0 0;}
#guide_navi .sec_guidenav ul { display: flex; flex-wrap: wrap; gap: 10px;}
#guide_navi .sec_guidenav ul li { width: calc((100% - 10px)/2);}
#guide_navi .sec_guidenav ul li a { position: relative; display: flex; align-items: center; height: 70px; gap: 10px; padding: 0 30px 0 10px; font-weight: 500; font-size: 14px; letter-spacing: 0.1em; border: 1px solid var(--color-gray); border-radius: 4px;}
#guide_navi .sec_guidenav ul li a::after { content: ""; position: absolute; top: 30px; right: 14px; width: 8px; height: 8px; border-top: 1px solid #40403F; border-right: 1px solid #40403F; transform: rotate(135deg);}
#guide_navi .sec_guidenav ul li a .icon { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background: #F8F8F8; border-radius: 50%;}
#guide_navi .sec_guidenav ul li a .icon img { width: 26px;}
#guide_navi .sec_contact { position: relative; margin: 80px 0 0; padding: 25px 0 0;}
#guide_navi .sec_contact::after { content: ""; position: absolute; top: 0; right: 0; width: 113px; height: 173px; background: url(/img/usr/freepage/siteguide/illust.png) no-repeat center / contain;}
#guide_navi .sec_contact h3 { margin: 0; font-weight: 500; font-size: 22px; letter-spacing: 0.1em; text-align: left;}
#guide_navi .sec_contact .contact_text { margin: 16px 0 0; font-size: 16px; letter-spacing: 0.1em;}
#guide_navi .sec_contact .contact_container { margin: 24px -20px 0; padding: 24px 20px; background: #F8F8F8;}
#guide_navi .sec_contact .contact_box:not(:first-child) { margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--color-gray);}
#guide_navi .sec_contact .contact_box h4 { font-weight: 500; font-size: 18px; letter-spacing: 0.1em; text-align: center;}
#guide_navi .sec_contact .contact_btn { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 56px; margin: 16px auto 0; font-weight: 700; font-size: 16px; letter-spacing: 0.1em; line-height: 1; color: #fff; background: var(--color-pink); border-radius: 4px;}
#guide_navi .sec_contact .contact_btn.tell { font-weight: 600; font-size: 20px;}
#guide_navi .sec_contact .contact_btn::after { content: '→'; position: absolute; top: 50%; right: 20px; font-size: 12px; color: #fff; transform: translateY(-50%);}
#guide_navi .sec_contact .contact_notice { margin: 16px 0 0; font-weight: 500; font-size: 14px; letter-spacing: 0.1em; text-align: center;}
#guide_navi .sec_contact .contact_notice span { font-size: 12px;}
#guide_top #guide_navi .sec_faq,
#guide_top #guide_navi .sec_guidenav,
#page_faq #guide_navi .sec_faq,
#page_faq #guide_navi .sec_guidenav { display: none;}

/* ---------------------------------------
	ご利用ガイド TOP
--------------------------------------- */
#guide_top .sec_firsttime { margin: 24px 0 0; padding: 24px 20px 20px; border: 1px solid var(--color-pink); border-radius: 4px;}
#guide_top .sec_firsttime h2 { width: fit-content; margin: 0 auto; font-weight: 500; font-size: 20px; letter-spacing: 0.1em; padding: 0 0 0 32px; background: url(/img/usr/freepage/siteguide/icon_firsttime.png) no-repeat center left / 22px;}
#guide_top .sec_firsttime .firsttime_btn { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 64px; margin: 32px auto 0; font-weight: 500; font-size: 16px; letter-spacing: 0.1em; line-height: 1.5; text-align: center; color: #fff; background: var(--color-pink); border-radius: 4px;}
#guide_top .sec_firsttime .firsttime_btn::before { content: ""; position: absolute; top: 50%; right: 16px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transform: translateY(-50%);}
#guide_top .sec_firsttime .firsttime_btn::after { content: "→"; position: absolute; top: 50%; right: 20px; font-size: 12px; color: var(--color-pink); transform: translateY(-50%);}
#guide_top .sec_pagenav ul li a { height: 70px; padding: 13px 30px 13px 10px;}
#guide_top .sec_pagenav ul li a::after { right: 10px; top: 50%; transform: rotate(-45deg) translateY(-50%);}
#guide_top .sec_pagenav ul li a .icon { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background: #F8F8F8; border-radius: 50%;}
#guide_top .sec_pagenav ul li a .icon img { width: 26px;}
#guide_top .sec_faq { padding: 24px; background: #FFF5F7; border-radius: 4px;}
#guide_top .sec_faq h2 { width: fit-content; margin: 0 auto; padding: 0 0 0 40px; font-weight: 500; font-size: 20px; letter-spacing: 0.1em; line-height: 30px; background: url(/img/usr/freepage/siteguide/icon_hatena.png) no-repeat center left / 30px;}
#guide_top .sec_faq .faq-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0;}
#guide_top .sec_faq .faq-list li a { display: block; padding: 6px; font-size: 14px; letter-spacing: 0.04em; line-height: 1; color: var(--color-pink); background: #fff; border-radius: 4px;}
#guide_top .sec_faq .faq-more { position: relative; display: flex; justify-content: flex-end; align-items: center; width: fit-content; height: 34px; margin: 16px 0 0 auto; padding: 0 50px 0 0; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.2em;}
#guide_top .sec_faq .faq-more::after { content: '→'; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; color: #40403F; background: #fff;
}
#guide_top .sec_top_pagenavi .all-page-navi {display: flex;flex-direction: column;gap: 40px;}
#guide_top .sec_top_pagenavi .all-page-navi > li h3 a { display: flex; align-items: center; gap: 16px; padding: 0; margin: 0; font-weight: 500; font-size: 18px; letter-spacing: 0.1em;}
#guide_top .sec_top_pagenavi .all-page-navi > li h3 .icon { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #F8F8F8; border-radius: 50%;}
#guide_top .sec_top_pagenavi .all-page-navi > li h3 .icon img { width: 36px;}
#guide_top .sec_top_pagenavi .nav-child { margin: 24px 0 0; border-top: 1px solid var(--color-gray);}
#guide_top .sec_top_pagenavi .nav-child li a { position: relative; display: block; padding: 18px 35px 18px 0; font-size: 14px; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-gray);}
#guide_top .sec_top_pagenavi .nav-child li a::after { content: '→'; position: absolute; top: 50%; right: 10px; font-size: 12px; transform: translateY(-50%);}

/* ---------------------------------------
	ご利用ガイド テキストページ
--------------------------------------- */
.site-guide-wrap .guide_contents .sec_index { margin: 40px -20px 0; padding: 24px; background: #F8F8F8;}
.site-guide-wrap .guide_contents .sec_index h2 { margin: 0 0 10px; font-weight: 500; font-size: 20px; letter-spacing: 0.1em;}
.site-guide-wrap .guide_contents .sec_index .index_list li { position: relative; padding: 0 0 0 22px;}
.site-guide-wrap .guide_contents .sec_index .index_list li::before { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 1px; background: var(--color-pink); transform: translateY(-50%);}
.site-guide-wrap .guide_contents .sec_index .index_list li a { display: block; padding: 5px 0; font-size: 16px; letter-spacing: 0.1em;}
.site-guide-wrap .guide_contents dl { margin: 64px 0 0;}
.site-guide-wrap .guide_contents dl dt { margin: 0 0 24px; padding: 0 0 16px; font-weight: 500; font-size: 22px; letter-spacing: 0.1em; line-height: 1.45; border-bottom: 1px solid var(--color-gray); word-break: break-all;}
.site-guide-wrap .guide_contents dl dd { font-size: 16px; letter-spacing: 0.1em; line-height: 1.625; word-break: break-all;}
.site-guide-wrap .guide_contents dl dd > * + * { margin: 10px 0 0;}
.site-guide-wrap .guide_contents dl dd p.check { padding-left: 1em; text-indent: -1em; font-size: 12px;}
.site-guide-wrap .guide_contents dl dd p.check + p.check { margin: 0;}
.site-guide-wrap .guide_contents dl dd a { text-decoration: underline;}
.site-guide-wrap .guide_contents dl dd ul.list li { padding-left: 1em; text-indent: -1.2em;}
.site-guide-wrap .guide_contents dl dd ul.list li::before { content: "⚫︎"; color: #A9A8A7; font-size: 0.6em; margin-right: 1em;}
.site-guide-wrap .guide_contents dl dd ul.list li + li { margin: 5px 0 0;}
.site-guide-wrap .guide_contents dl dd .image { margin: 20px 0;}

/* ---------------------------------------
	キャンセル・交換について
--------------------------------------- */
.site-guide-wrap .section-contact-wrap-noslide { margin: 30px 0 !important;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame + .contact-frame { margin-top: 30px;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame-header-noslide { padding: 14px 10px; margin: 0 0 10px;; border-top: #e5e5e5 1px solid; border-bottom: #e5e5e5 1px solid; font-size: 14px; font-weight: 400; text-align: left;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame-inner { margin: 10px 0 0 0; text-align: center;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame-inner p { text-align: center;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame .name { font-size: 15px;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame .number { margin: 8px 0 0; font-size: 16px;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame .reception { margin: 0 0 10px; font-size: 12px; letter-spacing: 0;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame .form-adress a { font-size: 16px; text-decoration: underline;}
.site-guide-wrap .section-contact-wrap-noslide .contact-frame .form-adress a::before { content: "\f0e0"; margin-right: 7px; font-family: 'FontAwesome'; font-weight: normal; font-style: normal}

/* ---------------------------------------
	お支払い方法について
--------------------------------------- */
.site-guide-wrap .payment_list li { margin: 20px 0 0;}
.site-guide-wrap .payment_list li + li { margin: 20px 0 0;}
.site-guide-wrap .payment_list li p { margin: 5px 0 0;}

/* ---------------------------------------
	ご利用ガイド ステップページ
--------------------------------------- */
.site-guide-wrap .page_link_:has(.active.show-pc) + .step-area .show-sp { display: none;}
.site-guide-wrap .page_link_:has(.active.show-sp) + .step-area .show-pc { display: none;}
.site-guide-wrap .step-list li + li { margin: 40px 0 0;}
.site-guide-wrap .step-list h3 { font-weight: 500; font-size: 22px; letter-spacing: 0.1em;}
.site-guide-wrap .step-list h3 .step { display: block; width: fit-content; margin: 0 0 8px 0; font-family: "Poppins", sans-serif; font-size: 20px; color: var(--color-pink); border-bottom: 2px solid var(--color-pink);}
.site-guide-wrap .step-list h4 { margin: 40px 0 0; padding: 10px 30px; font-weight: 700; font-size: 16px; background: #f9f9f9;}
.site-guide-wrap .step-list .image { margin: 16px 0 0; padding: 20px; text-align: center; border: 1px solid var(--color-gray);}
.site-guide-wrap .step-list .desc + .image { margin: 40px 0 0;}
.site-guide-wrap .step-list .desc { margin: 16px 0 0; font-size: 16px; letter-spacing: 0.1em; line-height: 1.625;}
.site-guide-wrap .step-list .desc a { text-decoration: underline;}
.site-guide-wrap .step-list .desc a.arrow { position: relative; display: block; padding-left: 1em;}
.site-guide-wrap .step-list .desc a.arrow::before { content: "→"; position: absolute; left: 0;}

/* ---------------------------------------
	定期お届け便
--------------------------------------- */
#guide_regular .sec_pagenav ul li:nth-child(5) { width: 100%;}
#guide_regular h2 { margin: 0 0 24px; padding: 0 0 16px; font-weight: 500; font-size: 22px; letter-spacing: 0.1em; line-height: 1.45; border-bottom: 1px solid var(--color-gray); word-break: break-all;}
#guide_regular .step-info { font-size: 16px; letter-spacing: 0.1em; line-height: 1.625; word-break: break-all;}
#guide_regular .step-info span { display: block; margin: 5px 0 0; font-weight: 600; color: var(--color-pink);}
#guide_regular .step-info + .step-list { margin: 40px 0 0;}
#guide_regular .step-list h3 { font-weight: 400; font-size: 16px;}
#guide_regular .step-list h3 span { font-weight: 500; font-size: 22px;}
#guide_regular h4 { margin: 20px 0; padding: 10px 30px; font-weight: 700; font-size: 16px; background: #f9f9f9;}
#guide_regular .step-list + h4 { margin-top: 40px;}

/* ---------------------------------------
  よくあるご質問
--------------------------------------- */
#page_faq { padding: 0 20px; margin: 0 0 60px;}
#page_faq .page_link_ li.service .btn { color: var(--color-pink); border-color: var(--color-pink);}
#page_faq .page_link_ li.service.active .btn { color: #fff; background: var(--color-pink);}
#page_faq .page_link_ li.product .btn { color: #EA6100; border-color: #EA6100;}
#page_faq .page_link_ li.product.active .btn { color: #fff; background: #EA6100;}
#page_faq .sec_pagenav ul { margin: 50px 0 64px;}
#page_faq a { color: inherit;}
#page_faq > section { margin: 0 -20px; padding: 64px 20px;}
#page_faq > section+section { padding-top: 0;}
#page_faq:has(.service.active) > section { background: #FFF5F7;}
#page_faq:has(.product.active) > section { background: #fef7f2;}
#page_faq h2 { margin: 0 0 40px; padding: 0; font-weight: 500; font-size: 24px; letter-spacing: 0.1em; text-align: center;}
#page_faq h3 { margin: 0 0 32px; padding: 0; font-weight: 500; font-size: 22px; letter-spacing: 0.1em; text-align: center;}
#page_faq .faq_frame_ { margin: 0 0 64px; background: #fff;}
#page_faq .faq_frame_:last-child { margin-bottom: 0;}
#page_faq .faq_frame_ dl { border-bottom: 1px solid #e5e5e5;}
#page_faq .faq_frame_ dt { position: relative;}
#page_faq .faq_frame_ dt:before,
#page_faq .faq_frame_ dt:after { content: ''; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; width: 15px; height: 1px; background: #8c8c8c; transition: all .3s;}
#page_faq .faq_frame_ dt:after { transform: rotate(90deg);}
#page_faq .faq_frame_ dt.open_:after { opacity: 0;}
#page_faq .faq_frame_ dt p { position: relative; font-size: 16px; letter-spacing: 0.1em; padding: 18px 36px 18px 50px; word-break: break-all;}
#page_faq .faq_frame_ dt p:before { position: absolute; top: 50%; left: 10px; content: "Q.";  font-family: "Poppins", sans-serif; font-weight: 500; font-size: 20px; transform: translateY(-50%);}
#page_faq .faq_frame_ dd { display: none; position: relative; padding: 10px 20px 20px 50px; letter-spacing: 0.1em; line-height: 1.7;}
#page_faq .faq_frame_ dd:before { content: "A."; margin: 0 15px 0 -37px; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 20px; color: var(--color-pink);}
#page_faq .faq_frame_ dd a { text-decoration: underline;}
#page_faq .faq_frame_ dd span { font-weight: bold;}
#page_faq .faq_frame_ dd .check { margin: 5px 0 0; font-size: 10px;}
#page_faq .faq_frame_ dd table td { border: 1px solid #ccc; text-indent: 0; padding: 2px 5px; font-size: 10px;}
#page_faq .faq_frame_ dd table tr:not(:first-child) td:not(:first-child) { text-align: center;}
#page_faq .faq_frame_ dd table td:nth-child(3) { background: #fad9de;}
#page_faq .faq_frame_ dd table td:nth-child(4) { color: #999;}
#page_faq .faq_frame_ dd table + p { margin: 3px 0 0;}
#page_faq .contact-info-frame  { margin: 30px 0 0 0; text-indent: 0;}
#page_faq .contact-info-header { padding: 14px 40px 14px 10px; margin: 0; border-top: #e5e5e5 1px solid; border-bottom: #e5e5e5 1px solid; font-size: 14px; cursor: pointer; position: relative;}
#page_faq .site-tl .contact-info-header { border-top: none;}
#page_faq .contact-info-header::before,
#page_faq .contact-info-header::after   { content: ''; width: 15px; height: 1px; margin: auto; background: #8c8c8c; transition: all .3s; position: absolute; top: 23px; right: 7px;}
#page_faq .contact-info-header::before        { transform: rotate(90deg);}
#page_faq .contact-info-header::after         { opacity: 1;}
#page_faq .contact-info-header.open_::before  { transform: rotate(0deg);}
#page_faq .contact-info-header.open_::after   { opacity: 0;}
#page_faq .contact-info-item                  { line-height: 1.2;}
#page_faq .contact-info-contents              { padding-bottom: 20px; line-height: 1.2; text-align: center; display: none;}
#page_faq .contact-info-frame .site-bnr       { margin: 10px 0 15px 0; text-align: center;}
#page_faq .contact-info-frame .site-name      { margin: 10px 0 5px 0; text-align: center; font-size: 16px;}
#page_faq .contact-info-frame .site-number.sp { margin: 0 0 5px 0; text-align: center; font-size: 28px;}
#page_faq .contact-info-frame .site-number a  { text-decoration: none; font-size: 22;}
#page_faq .contact-info-frame .site-number.pc { display: none !important;}
#page_faq .contact-info-frame .site-time      { margin: 0 0 10px 0; text-align: center; font-size: 14px;}
#page_faq .contact-info-frame .site-link      { text-align: center; font-size: 14px;}
#page_faq .contact-info-frame .site-link a    { text-decoration: underline;}