@charset "UTF-8";

/* ----------------------------------
 ご利用ガイド
---------------------------------- */
#freepage_guide section strong { font-weight: 700; color: var(--color-sub);}
#freepage_guide section p,
#freepage_guide section li { font-size: var(--font-size-main);}
#freepage_guide section p > a { text-decoration: underline; color: var(--color-blue); transition: var(--transition);}
#freepage_guide section p > a:hover { color: var(--color-sub);}
#freepage_guide section li > a { text-decoration: underline; color: var(--color-blue); transition: var(--transition);}
#freepage_guide section li > a:hover { color: var(--color-sub);}
#freepage_guide section p + p,
#freepage_guide section p + ul,
#freepage_guide section p + figure,
#freepage_guide section figure + p,
#freepage_guide section figure + ul,
#freepage_guide section ul + ul,
#freepage_guide section ul + p,
#freepage_guide section ul + figure { margin-top: 14px;}
#freepage_guide section { margin: 0 0 120px;}
#freepage_guide section h2 {
  margin: 0 0 34px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: var(--color-sub) 2px solid;
  font-size: var(--font-size-H2);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.04em;
  text-align: left;
}
#freepage_guide .lead { margin: 0 0 20px; font-size: var(--font-size-main);}
#freepage_guide .section-inner { padding: 0 24px;}
#freepage_guide .sub-section + .sub-section { margin-top: 60px;}
#freepage_guide .section-sub-title { padding: 16px 20px; margin: 0 0 20px; font-size: var(--font-size-main); font-weight: 700; color: var(--color-base); background: var(--color-bg);}
#freepage_guide .sub-section-wrap { display: flex; flex-wrap: wrap; justify-content: space-between;}
#freepage_guide .sub-section-wrap h3.design-headline { width: 100%;}

#freepage_guide ul.disc-number-list li { padding-left: 1.5em; text-indent: -1.5em;}
#freepage_guide ul.disc-number-list li + li { margin-top: 10px;}

#freepage_guide ul.flex-column2 { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 66px;}
#freepage_guide ul.flex-column2 li.item { width: calc((100% - 66px) / 2);}
#freepage_guide ul.flex-column2 li.item:nth-child(n+3) { margin-top: 40px;}

#freepage_guide ul.flex-column3 { display: flex; flex-wrap: wrap; column-gap: 40px;}
#freepage_guide ul.flex-column3 li.item { width: calc((100% - 40px * 2)/3);}
#freepage_guide ul.flex-column3 li.item:nth-child(n+4) { margin-top: 40px;}

#freepage_guide .contact-phone {
  width: fit-content;
  height: 50px;
  margin: 10px 0 20px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-salmon);
}
#freepage_guide .contact-phone .number { padding: 0 10px 0 20px;	display: flex; align-items: center;}
#freepage_guide .contact-phone .number a {
	padding: 0 20px;
	margin: 0;
  text-decoration: none;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: var(--font-size-xlarge);
  font-weight: 700;
  color: var(--color-base);
	display: flex;
	align-items: center;
}
#freepage_guide .contact-phone .number .icon { width: 32px; margin: 0 10px 0 0; vertical-align: top; position: relative; top: 2px;}

/* アンカーリンク */
#freepage_guide #guide_anchor { padding: 0 100px; margin: 0 0 80px;}
#freepage_guide #guide_anchor ul { display: flex; flex-wrap: wrap; column-gap: 32px;}
#freepage_guide #guide_anchor ul li { width: calc((100% - 32px * 2) / 3); margin: 0 0 12px;}
#freepage_guide #guide_anchor ul li a {
  width: 100%;
  min-height: 56px;
	padding: 0 30px;
	border: var(--border-solid3);
	border-radius: 56px;
  font-size: var(--font-size-large);
  font-weight: 700;
	text-decoration: none;
	line-height: var(--line-height-low);
  display: flex;
  justify-content: center;
  align-items: center;
	background: #FFF;
	transition: var(--transition);
	position: relative;
}
#freepage_guide #guide_anchor ul li a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  position: absolute;
	right: 20px;
	top: calc(50% - 6px);
  display: block;
  transform: rotate(135deg);
}
#freepage_guide #guide_anchor ul li a:hover { border: var(--color-sub) 1px solid; color: var(--color-sub);}
#freepage_guide #guide_anchor ul li a:hover::after { border-color: var(--color-sub);}

/* ご注文方法 */
#freepage_guide #guide_order .step { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; color: var(--color-sub);}
#freepage_guide #guide_order .step .num { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; color: var(--color-sub);}
#freepage_guide #guide_order .step-flow-list { margin: 0 -24px; display: flex; justify-content: space-between; column-gap: 46px;}
#freepage_guide #guide_order .step-flow-item { width: calc((100% - 46px * 3)/4); padding: 16px; border-radius: var(--border-radius); background: var(--color-salmon); position: relative;}
#freepage_guide #guide_order .step-flow-item + .step-flow-item::before {
  content: '';
  border-top: 18px solid transparent;
  border-left: var(--color-yellow) 14px solid;
  border-bottom: 18px solid transparent;
  display: block;
  position: absolute;
  top: calc(50% - 18px);
  left: -28px;
	z-index: 2;	
}
#freepage_guide #guide_order .step-flow-item .step { font-size: 18px;}
#freepage_guide #guide_order .step-flow-item .step .num { margin: 0 0 0 5px; font-size: 23px;}
#freepage_guide #guide_order .step-flow-item .icon { width: 80px; margin: 0 auto 5px;}
#freepage_guide #guide_order .step-flow-item .text { margin: 0 -10px; font-size: var(--font-size-small); font-weight: 700; text-align: center;}

#freepage_guide #guide_order .step-list-item { padding: 40px 0 0; margin: 48px 0 0; border-top: var(--border-dot); display: flex; flex-wrap: wrap; justify-content: space-between;}
#freepage_guide #guide_order .step-list-item .head  { width: 100%; margin: 0 0 40px; display: flex; align-items: center; column-gap: 27px;}
#freepage_guide #guide_order .step-list-item .head .step { font-size: 22px; line-height: 1.0;}
#freepage_guide #guide_order .step-list-item .head .step .num { margin: 0 0 0 5px; font-size: 35px;}
#freepage_guide #guide_order .step-list-item .head .ttl { padding: 12px 0 0; margin: 0; font-size: 24px; font-weight: 700; color: var(--color-main);}
#freepage_guide #guide_order .step-list-item .desc  { width: 55.3%;}
#freepage_guide #guide_order .step-list-item .image { width: 39.5%;}
#freepage_guide #guide_order .step-in-box-list { margin: 20px 0 0; display: flex; justify-content: space-between; column-gap: 20px;}
#freepage_guide #guide_order .step-in-box-list .step-in-box { width: calc(50% - 10px); padding: 20px; border: var(--border-solid1);}
#freepage_guide #guide_order .step-in-box-list .step-in-box h4.step-in-title { margin: 0 0 16px; font-size: var(--font-size-main); text-align: center;}

/* 会員について */
#freepage_guide #guide_member {}

/* 公式お買い物特典について */
#freepage_guide #guide_benefits {}

/* 配送について */
#freepage_guide #guide_delivery {}
#freepage_guide #guide_delivery .time-select { width: fit-content; margin: 20px 0 0 0; border: var(--border-solid1); display: flex; align-items: center;}
#freepage_guide #guide_delivery .time-select dt { padding: 10px 20px; background: var(--color-bg);}
#freepage_guide #guide_delivery .time-select dd { min-width: 150px; padding: 10px 20px; border-left: var(--border-solid1); font-weight: 700; text-align: center; letter-spacing: 0.04em;}

/* 送料について */
#freepage_guide #guide_postage {}

/* お支払いについて */
#freepage_guide #guide_payment {}

/* 領収書・納品書について */
#freepage_guide #guide_receipt {}

/* ギフトサービスについて */
#freepage_guide #guide_gift {}

/* 商品について */
#freepage_guide #guide_goods {}

/* 定期お届け便について */
#freepage_guide #guide_regular {}

/* ----------------------------------
 ご利用ガイド SP
---------------------------------- */
[data-browse-mode="S"] #freepage_guide h1 { margin: 0 0 40px;}
[data-browse-mode="S"] #freepage_guide .lead { margin: 0 0 14px;}
[data-browse-mode="S"] #freepage_guide section { margin: 0 0 60px;}
[data-browse-mode="S"] #freepage_guide section h2 { padding: 0 0 12px; margin: 0 0 16px; font-size: var(--font-size-H3); letter-spacing: 0;}
[data-browse-mode="S"] #freepage_guide .sub-section-wrap { display: block;}
[data-browse-mode="S"] #freepage_guide .section-inner { padding: 0;}
[data-browse-mode="S"] #freepage_guide .section-sub-title { padding: 16px; margin: 0 0 16px;}
[data-browse-mode="S"] #freepage_guide .sub-section + .sub-section { margin-top: 40px;}
[data-browse-mode="S"] #freepage_guide .contact-phone {height: 45px;padding: 0 25px;border-radius: 85px;text-align: center;display: block;}
[data-browse-mode="S"] #freepage_guide .contact-phone .number,
[data-browse-mode="S"] #freepage_guide .contact-phone .number a {padding: 0;margin: 0;display: flex;margin-top: 3px;align-items: center;justify-content: center;}
[data-browse-mode="S"] #freepage_guide ul.flex-column2 { display: block;}
[data-browse-mode="S"] #freepage_guide ul.flex-column2 li.item { width: 100%;}
[data-browse-mode="S"] #freepage_guide ul.flex-column2 li.item:nth-child(n+3) { margin-top: auto;}
[data-browse-mode="S"] #freepage_guide ul.flex-column2 li.item + li.item { margin-top: 40px;}
[data-browse-mode="S"] #freepage_guide ul.flex-column3{ display: block;}
[data-browse-mode="S"] #freepage_guide ul.flex-column3 li.item { width: 100%;}
[data-browse-mode="S"] #freepage_guide ul.flex-column3 li.item:nth-child(n+4) { margin-top: auto;}
[data-browse-mode="S"] #freepage_guide ul.flex-column3 li.item + li.item { margin-top: 40px;}

/* アンカーリンク */
[data-browse-mode="S"] #freepage_guide #guide_anchor { padding: 0; margin: 0 0 48px;}
[data-browse-mode="S"] #freepage_guide #guide_anchor ul { display: flex; justify-content: space-between; gap: 10px;}
[data-browse-mode="S"] #freepage_guide #guide_anchor ul li { width: calc(50% - 5px); margin: 0;}
[data-browse-mode="S"] #freepage_guide #guide_anchor ul li a { min-height: 48px; padding: 0 30px 0 16px; font-size: var(--font-size-main); text-align: center;}

/* ご注文方法 */
[data-browse-mode="S"] #freepage_guide #guide_order .step-flow-list { margin: 0; flex-wrap: wrap; column-gap: 0;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-flow-item { width: calc(50% - 7px); padding: 16px; margin: 14px 0 0;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-flow-item::before { display: none !important;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-flow-item .step { text-align: center;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item { padding: 32px 0 0; margin: 32px 0 0; display: block;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item .head  { margin: 0 0 20px; display: block;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item .head .step { font-size: 22px; line-height: 1.0;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item .head .step .num { margin: 0 0 0 5px; font-size: 28px;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item .head .ttl { padding: 12px 0 0; font-size: 20px;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item .desc  { width: 100%; margin: 0 0 20px;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-list-item .image { width: 70%; margin: 0 auto;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-in-box-list { margin: 20px 0 0; display: block;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-in-box-list .step-in-box { width: 100%;}
[data-browse-mode="S"] #freepage_guide #guide_order .step-in-box-list .step-in-box + .step-in-box { margin-top: 16px;}

/* 領収書・納品書について */
[data-browse-mode="S"] #freepage_guide #guide_receipt .receipt-pattern { display: block;}
[data-browse-mode="S"] #freepage_guide #guide_receipt .receipt-pattern .receipt-item { width: 100%; margin: 0 0 30px;}

/* 配送について */
[data-browse-mode="S"] #freepage_guide #guide_delivery .time-select { width: 100%; display: block;}
[data-browse-mode="S"] #freepage_guide #guide_delivery .time-select dt { text-align: center;}
[data-browse-mode="S"] #freepage_guide #guide_delivery .time-select dd { border-left: none; border-top: var(--border-solid1);}