@charset "UTF-8";
/* =======================================================
reset.css
======================================================= */
main .sub_head {
  margin-bottom: 0;
}
main h3 {
  padding-left: 0;
  margin-bottom: 0;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  color: revert;
  background: revert;
}
main h4 {
  padding: 0;
  margin: 0;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  color: revert;
  border-bottom: revert;
}
main ol {
  padding-left: 0;
  list-style-type: "";
}
main ol li:not(:last-child) {
  margin-bottom: 0;
}

p {
  margin: 0;
}

figure {
  margin: 0;
}

:root {
  interpolate-size: allow-keywords;
}

summary {
  display: block;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* =======================================================
root
======================================================= */
:root {
  --inner-width: 1100px;
  --color-main: #eb6e8f;
  --color-accent: #551c00;
  --color-base: #785c64;
  --color-contrast: #fff7ea;
  --color-contrast02: #ff5884;
  --color-brightest: #fff;
  --transition-duration: 0.5s;
  --leading-trim: calc((1em - 1lh) / 2);
}

/* =======================================================
base
======================================================= */
section {
  padding-bottom: calc(64/18 * 1em);
  letter-spacing: 0.04em;
}

p {
  line-height: calc(34/18);
}

a {
  transition-timing-function: ease;
  transition-duration: var(--transition-duration);
  transition-property: opacity;
  will-change: opacity;
}
a:focus-visible {
  opacity: 0.6;
}
@media (any-hover: hover) {
  a:hover {
    opacity: 0.6;
  }
}

header > div.menu > .inner > ul > li > span:hover > div.open {
  z-index: 2;
}

details::details-content {
  content-visibility: unset;
  display: block grid;
}
@media (prefers-reduced-motion: no-preference) {
  details::details-content {
    transition-duration: var(--transition-duration);
    transition-property: grid-template-rows;
  }
}
details:not([open])::details-content {
  grid-template-rows: 0fr;
}
details[open]::details-content {
  grid-template-rows: 1fr;
}
details > div {
  overflow: hidden;
}

/* =======================================================
utility
======================================================= */
.u-inner {
  max-width: var(--inner-width);
  margin-inline: auto;
}
@media (width <= 834px) {
  .u-inner {
    padding-inline: 4vw;
  }
}

.u-att {
  padding-left: 1em;
  margin-block: var(--leading-trim);
  font-weight: 500;
  text-indent: -1em;
}
@media (width <= 834px) {
  .u-att {
    font-size: 1.4rem;
    line-height: calc(42/28);
  }
}
.u-att::before {
  content: "※";
}

.u-bullet-item {
  position: relative;
  padding-left: 1em;
  margin-block: var(--leading-trim);
}
.u-bullet-item::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 1lh;
  content: "・";
}

.u-leading-trim {
  display: block;
  margin-block: var(--leading-trim);
}

@media (width >= 835px) {
  .u-sm {
    display: none;
  }
}
@media (width <= 834px) {
  .u-md {
    display: none;
  }
}
/* =======================================================
intro
======================================================= */
.bl-intro {
  padding-top: calc(40/18 * 1em);
}
.bl-intro-ttl {
  display: revert;
  margin-bottom: calc(40/18 * 1em);
  font-size: 1.8rem;
  font-weight: revert;
  line-height: revert;
  color: revert;
}
.bl-intro-ttl::before {
  display: none;
}
.bl-intro-imgwrapper {
  display: grid;
  justify-content: center;
}
@media (width <= 834px) {
  .bl-intro-imgwrapper {
    max-width: 500px;
    margin-inline: auto;
  }
}
.bl-intro-subttl {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(40/32 * 1em);
  font-size: 3.2rem;
  line-height: 1;
  text-align: center;
}
@media (width <= 834px) {
  .bl-intro-subttl {
    font-size: 2rem;
  }
}
.bl-intro-subttl-deco {
  padding: calc(7/40 * 1em) calc(12/40 * 1em);
  font-size: 4rem;
  color: var(--color-brightest);
  background-color: var(--color-contrast02);
}
@media (width <= 834px) {
  .bl-intro-subttl-deco {
    font-size: 2rem;
  }
}
.bl-intro-txt {
  margin-bottom: calc(40/18 * 1em);
}
@media (width >= 835px) {
  .bl-intro-txt {
    text-align: center;
  }
}
.bl-intro-list {
  display: grid;
  gap: calc(20/18 * 1em);
}
@media (width >= 835px) {
  .bl-intro-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.bl-intro-item {
  padding-block: calc(17/18 * 1em) calc(19/18 * 1em);
  background-color: var(--color-brightest);
  border: 3px solid var(--color-main);
  border-radius: 20px;
}
.bl-intro-item-txt {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-base);
  text-align: center;
}
@media (width <= 834px) {
  .bl-intro-item-txt {
    font-size: 2rem;
  }
}

/* =======================================================
info
======================================================= */
.bl-info-conts-wrapper {
  display: grid;
  margin-bottom: calc(24/18 * 1em);
  --border-color: #ccc;
}
@media (width >= 835px) {
  .bl-info-conts-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width <= 834px) {
  .bl-info-conts-wrapper {
    gap: 20px;
    margin-bottom: 20px;
  }
}
.bl-info-conts {
  border: 1px solid var(--border-color);
}
.bl-info-conts:nth-of-type(odd) .bl-conts-ttl {
  background-color: #f9bfcf;
}
@media (width >= 835px) {
  .bl-info-conts:nth-of-type(even) {
    border-left: none;
  }
}
.bl-info-conts:nth-of-type(even) .bl-conts-ttl {
  background-color: #ffd8e3;
}
.bl-info-conts .bl-conts-ttl {
  padding-block: 1em;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media (width <= 834px) {
  .bl-info-conts .bl-conts-ttl {
    padding-block: calc(24/32 * 1em);
    font-size: 1.6rem;
  }
}
.bl-info-conts .bl-conts-dwrap {
  display: flex;
  flex-wrap: wrap;
  gap: calc(24/18 * 1em);
  padding: calc(40/18 * 1em);
  border-top: 1px solid var(--border-color);
}
.bl-info-conts .bl-conts-dwrap:first-of-type .bl-conts-dttl {
  background-color: #c34d6f;
}
.bl-info-conts .bl-conts-dwrap:not(:first-of-type) .bl-conts-dttl {
  background-color: var(--color-base);
}
@media (width <= 834px) {
  .bl-info-conts .bl-conts-dwrap {
    display: grid;
    gap: calc(12/15 * 1em);
    justify-content: center;
    padding: calc(12/15 * 1em) calc(20/15 * 1em) calc(20/15 * 1em);
  }
}
.bl-info-conts .bl-conts-dttl {
  align-self: center;
  padding: calc(8/10 * 1rem) calc(10/10 * 1rem);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-brightest);
}
@media (width <= 834px) {
  .bl-info-conts .bl-conts-dttl {
    justify-self: center;
    padding: calc(4/10 * 1rem) calc(5/10 * 1rem);
    font-size: calc(14/15 * 1em);
  }
}
.bl-info-conts .bl-conts-ditem {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
@media (width <= 834px) {
  .bl-info-conts .bl-conts-ditem {
    font-size: 1.4rem;
  }
}
.bl-info-conts .bl-conts-ditem-inner {
  display: flex;
  align-items: end;
}
.bl-info-conts .bl-conts-ditem-deco {
  font-size: 4rem;
  translate: 0 0.05em;
}
@media (width <= 834px) {
  .bl-info-conts .bl-conts-ditem-deco {
    font-size: 3rem;
  }
}

/* =======================================================
recommend
======================================================= */
.bl-recommend-conts-wrapper {
  display: grid;
  gap: calc(32.5/18 * 1em);
}
@media (width >= 835px) {
  .bl-recommend-conts-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
.bl-recommend-conts {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1607843137);
}
.bl-recommend-conts .bl-conts-ttl {
  padding-block: calc(22/24 * 1em);
  font-size: 2.4rem;
  line-height: 1;
  text-align: center;
  background-color: #fff2ea;
}
.bl-recommend-conts .bl-conts-body {
  padding: 1.6rem;
}
.bl-recommend-conts .bl-conts-imgwrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 1.6rem;
}
@media (width >= 835px) {
  .bl-recommend-conts .bl-conts-imgwrapper {
    max-width: 31.2rem;
  }
}
.bl-recommend-conts .bl-conts-imgwrapper.--is-border {
  position: relative;
}
.bl-recommend-conts .bl-conts-imgwrapper.--is-border::after {
  position: absolute;
  place-self: center;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid #d1d1d1;
}
.bl-recommend-conts .bl-conts-img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* =======================================================
cta
======================================================= */
@media (width <= 834px) {
  .bl-cta {
    padding-inline: 4vw;
  }
}
.bl-cta .u-inner {
  padding-block: 4rem;
  background-color: #f0f0f0;
  border-radius: 30px;
}
@media (width <= 834px) {
  .bl-cta .u-inner {
    padding: 28px 15px;
    border-radius: 15px;
  }
}
.bl-cta-ttl {
  display: revert;
  margin-bottom: 1em;
  font-size: 3.2rem;
  font-weight: revert;
  line-height: 1;
  color: revert;
  text-align: center;
  letter-spacing: 0.06em;
}
@media (width <= 834px) {
  .bl-cta-ttl {
    margin-bottom: 20px;
    font-size: 2.25rem;
  }
}
.bl-cta-ttl::before {
  display: none;
}
.bl-cta-lead {
  display: grid;
  place-content: center;
  max-width: 58rem;
  height: 12.6rem;
  padding-inline: 4rem;
  margin-inline: auto;
  margin-bottom: 2.4rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: calc(35/22);
  background-image: url("../mailorder/img/cta-lead-bg.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}
@media (width >= 835px) {
  .bl-cta-lead {
    text-align: center;
  }
}
@media (width <= 834px) {
  .bl-cta-lead {
    width: 283px;
    height: 102.5px;
    padding: 0 0 14.5px 4px;
    margin-bottom: 19px;
    font-size: 1.4rem;
    background-image: url("../mailorder/img/cta-lead-bg-sm.svg");
  }
}
.bl-cta-btn {
  position: relative;
  display: grid;
  place-content: center;
  width: fit-content;
  padding-block: calc(23/26 * 1em);
  margin-inline: auto;
  margin-bottom: 4rem;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-brightest);
  text-decoration: none;
  background-color: var(--color-main);
  border-radius: 10px;
}
@media (width >= 835px) {
  .bl-cta-btn {
    min-width: 58rem;
  }
}
@media (width <= 834px) {
  .bl-cta-btn {
    padding: 17px 34px 17px 38.5px;
    margin-bottom: 32px;
    font-size: 1.8rem;
  }
}
.bl-cta-btn::after {
  position: absolute;
  right: -114px;
  bottom: 0;
  width: 106px;
  height: 144px;
  content: "";
  background-image: url("../mailorder/img/cta-btn-deco.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 834px) {
  .bl-cta-btn::after {
    top: -73px;
    right: 0;
    width: 76px;
    height: 73px;
    background-image: url("../mailorder/img/cta-btn-deco-sm.png");
  }
}
.bl-cta-add .bl-add-txt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.4rem;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 2.4rem;
  font-weight: 700;
}
@media (width <= 834px) {
  .bl-cta-add .bl-add-txt {
    gap: 1.2rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
  }
}
.bl-cta-add .bl-add-txt::before {
  width: 76px;
  height: 100px;
  content: "";
  background-image: url("../mailorder/img/cta-add-txt-deco.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 834px) {
  .bl-cta-add .bl-add-txt::before {
    width: 60px;
    height: 79px;
    background-image: url("../mailorder/img/cta-add-txt-deco-sm.png");
  }
}
.bl-cta-add .bl-add-btn {
  display: grid;
  place-content: center;
  width: fit-content;
  padding: calc(14/20 * 1em) 1em;
  margin-inline: auto;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brightest);
  text-decoration: none;
  background-color: #005dab;
  border-radius: 10px;
}
@media (width >= 835px) {
  .bl-cta-add .bl-add-btn {
    line-height: 1;
  }
}
@media (width <= 834px) {
  .bl-cta-add .bl-add-btn {
    padding: 0.75em 1em;
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
  }
}

/* =======================================================
flow
======================================================= */
.bl-flow {
  padding-bottom: calc(152/18 * 1em);
}
.bl-flow-lead {
  margin-bottom: calc(64/18 * 1em);
  font-weight: 500;
}
@media (width <= 834px) {
  .bl-flow-lead {
    margin-bottom: 32px;
  }
}
.bl-flow-list {
  display: grid;
  gap: calc(24/18 * 1em);
}
@media (width <= 834px) {
  .bl-flow-list {
    gap: 20px;
  }
}
.bl-flow-item {
  display: grid;
  gap: calc(24/18 * 1em);
}
@media (width <= 834px) {
  .bl-flow-item {
    gap: 20px;
  }
}
.bl-flow-item:not(:last-of-type)::after {
  justify-self: center;
  width: 162px;
  height: 34px;
  content: "";
  background-image: url("../mailorder/img/flow-item-arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 834px) {
  .bl-flow-item:not(:last-of-type)::after {
    width: 143px;
    height: 30px;
    background-image: url("../mailorder/img/flow-item-arrow-sm.svg");
  }
}
.bl-flow-item:nth-of-type(2), .bl-flow-item:nth-of-type(3) {
  position: relative;
}
.bl-flow-item:nth-of-type(2)::before, .bl-flow-item:nth-of-type(3)::before {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.bl-flow-item:nth-of-type(2)::before {
  top: -74px;
  left: 0;
  width: 106px;
  height: 140px;
  background-image: url("../mailorder/img/flow-illust01.png");
}
@media (width <= 834px) {
  .bl-flow-item:nth-of-type(2)::before {
    top: -48px;
    width: 63px;
    height: 84px;
    background-image: url("../mailorder/img/flow-illust01-sm.png");
  }
}
.bl-flow-item:nth-of-type(3) .bl-flow-item-inner {
  padding-bottom: 40px;
}
.bl-flow-item:nth-of-type(3)::before {
  right: 0;
  bottom: -88px;
  width: 150px;
  height: 170px;
  background-image: url("../mailorder/img/flow-illust02.png");
}
@media (width <= 834px) {
  .bl-flow-item:nth-of-type(3)::before {
    bottom: -59px;
    width: 85px;
    height: 107px;
    background-image: url("../mailorder/img/flow-illust02-sm.png");
  }
}
.bl-flow-item-inner {
  display: grid;
  grid-template: "imgwrapper ttl" "imgwrapper body";
  gap: 24px 32px;
  padding: 3.2rem;
  background-color: #fff7ea;
}
@media (width >= 835px) {
  .bl-flow-item-inner {
    grid-template-columns: 380px 1fr;
  }
}
@media (width <= 834px) {
  .bl-flow-item-inner {
    grid-template: "ttl" "imgwrapper" "body";
    grid-template-columns: auto;
    gap: 0;
    padding: 24px 15px;
  }
}
.bl-flow-item-inner .bl-item-imgwrapper {
  grid-area: imgwrapper;
}
@media (width <= 834px) {
  .bl-flow-item-inner .bl-item-imgwrapper {
    margin-bottom: 16px;
    text-align: center;
  }
}
.bl-flow-item-inner .bl-item-ttl {
  display: flex;
  grid-area: ttl;
  gap: calc(16/26 * 1em);
  margin-block: var(--leading-trim);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: calc(41/26);
  color: #551c00;
  letter-spacing: 0.06em;
}
@media (width <= 834px) {
  .bl-flow-item-inner .bl-item-ttl {
    display: grid;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
  }
}
.bl-flow-item-inner .bl-item-ttl-deco {
  color: var(--color-main);
}
@media (width <= 834px) {
  .bl-flow-item-inner .bl-item-ttl-deco {
    font-size: 1.6rem;
    line-height: 1;
  }
}
.bl-flow-item-inner .bl-item-body {
  grid-area: body;
}
.bl-flow-item-inner .bl-item-txt {
  margin-block: var(--leading-trim);
}
@media (width <= 834px) {
  .bl-flow-item-inner .bl-item-txt {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}
.bl-flow-item-inner .u-att-wrapper {
  display: grid;
  gap: 1.6rem;
  margin-top: calc(24/18 * 1em);
}
@media (width <= 834px) {
  .bl-flow-item-inner .u-att-wrapper {
    gap: 1.2rem;
    margin-top: 16px;
  }
}

/* =======================================================
application
======================================================= */
.bl-application {
  padding-top: calc(64/18 * 1em);
  background-color: #fcecea;
}
.bl-application-lead {
  margin-bottom: calc(16/18 * 1em);
}
.bl-application-box {
  padding: calc(32/18 * 1em) calc(24/18 * 1em);
  background-color: var(--color-brightest);
}
.bl-application .u-bullet-list {
  display: grid;
  gap: calc(24/18 * 1em);
}

/* =======================================================
overview
======================================================= */
.bl-overview {
  padding-top: calc(64/18 * 1em);
}
.bl-overview-def {
  display: grid;
}
@media (width >= 835px) {
  .bl-overview-def {
    grid-template-columns: 355px 1fr;
  }
}
.bl-overview-dttl {
  display: grid;
  place-content: center;
  font-weight: 700;
  background-color: #f0f0f0;
}
@media (width >= 835px) {
  .bl-overview-dttl {
    border: 1px solid #ccc;
  }
}
@media (width <= 834px) {
  .bl-overview-dttl {
    padding: 12px 0;
    font-size: 1.6rem;
    line-height: 1;
    border-top: 1px solid #ccc;
  }
}
@media (width >= 835px) {
  .bl-overview-dttl:not(:first-of-type) {
    border-top: revert;
  }
}
.bl-overview-ditem {
  padding: calc(19/18 * 1em) calc(31/18 * 1em);
}
@media (width >= 835px) {
  .bl-overview-ditem {
    border: 1px solid #ccc;
    border-left: revert;
  }
}
@media (width <= 834px) {
  .bl-overview-ditem {
    padding: 16px 15px;
    font-size: 1.4rem;
    line-height: 1.5;
    border-bottom: 1px solid #ccc;
  }
}
@media (width >= 835px) {
  .bl-overview-ditem:not(:first-of-type) {
    border-top: revert;
  }
}
@media (width <= 834px) {
  .bl-overview-ditem:not(:last-of-type) {
    margin-bottom: 20px;
  }
}
.bl-overview-ditem-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.bl-overview-ditem .u-bullet-item {
  margin-block: 0;
  line-height: calc(48/28);
}
.bl-overview-ditem .u-att {
  margin-block: 0;
}

/* =======================================================
mail
======================================================= */
.bl-mail {
  padding-top: calc(64/18 * 1em);
  background-color: #fcecea;
}
@media (width <= 834px) {
  .bl-mail {
    padding-bottom: 64px;
  }
}
.bl-mail .u-inner {
  position: relative;
}
.bl-mail .u-inner::after {
  position: absolute;
  right: 24px;
  bottom: calc(64/18 * -1em);
  width: 134px;
  height: 148px;
  content: "";
  background-image: url("../mailorder/img/mail-illust.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 834px) {
  .bl-mail .u-inner::after {
    bottom: calc(96/18 * -1em);
    zoom: 0.8;
  }
}
.bl-mail-txt {
  padding: calc(32/18 * 1em);
  background-color: var(--color-brightest);
}

/* =======================================================
faq
======================================================= */
.bl-faq {
  padding-top: calc(64/18 * 1em);
}
.bl-faq-details-wrapper {
  display: grid;
  gap: calc(24/18 * 1em);
}
.bl-faq-details[open] .bl-faq-details-summary::before {
  rotate: revert;
}
.bl-faq-details-summary {
  position: relative;
  background-color: #f0f0f0;
}
.bl-faq-details-summary::before, .bl-faq-details-summary::after {
  position: absolute;
  top: 50%;
  right: calc(24/22 * 1em);
  width: calc(24/22 * 1em);
  height: calc(4/22 * 1em);
  content: "";
  background-color: var(--color-main);
  border-radius: 2px;
  translate: 0 -50%;
}
.bl-faq-details-summary::before {
  rotate: 90deg;
  transition-timing-function: ease;
  transition-duration: var(--transition-duration);
  transition-property: rotate;
  will-change: rotate;
}
.bl-faq-details-summary-inner {
  position: relative;
  display: block;
  padding: calc(25/22 * 1em) calc(78/22 * 1em) calc(25/22 * 1em) calc(72/22 * 1em);
  font-size: 2.2rem;
  font-weight: 700;
}
@media (width <= 834px) {
  .bl-faq-details-summary-inner {
    padding: 1.5rem 5.6rem 1.5rem 5.2rem;
    font-size: 1.6rem;
  }
}
.bl-faq-details-summary-inner::before {
  position: absolute;
  top: 50%;
  left: calc(24/22 * 1em);
  width: 3.2rem;
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-main);
  background-image: url("../mailorder/img/faq-q.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc(16/22 * 1em) calc(20/22 * 1em);
  border-radius: 8px;
  translate: 0 -50%;
}
@media (width <= 834px) {
  .bl-faq-details-summary-inner::before {
    top: 1.8rem;
    translate: 0;
    left: 1.6rem;
    width: 2.4rem;
    line-height: 1.5;
    background-size: calc(14/22 * 1em) calc(19/22 * 1em);
  }
}
.bl-faq-details-content-inner {
  position: relative;
  padding: calc(24/18 * 1em) calc(24/18 * 1em) calc(24/18 * 1em) calc(72/18 * 1em);
  border: 1px solid #d1d1d1;
  border-top: none;
}
@media (width <= 834px) {
  .bl-faq-details-content-inner {
    padding: 1.4rem 1.4rem 1.4rem 5.1rem;
    font-size: 1.4rem;
  }
}
.bl-faq-details-content-inner::before {
  position: absolute;
  top: calc(24/18 * 1em);
  left: calc(23/18 * 1em);
  width: calc(32/18 * 1em);
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-brightest);
  background-image: url("../mailorder/img/faq-a.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc(16/18 * 1em) calc(18/18 * 1em);
  border: 2px solid var(--color-main);
  border-radius: 8px;
}
@media (width <= 834px) {
  .bl-faq-details-content-inner::before {
    left: 1.6rem;
    width: 2.4rem;
    background-size: calc(16/22 * 1em) calc(18/22 * 1em);
  }
}
.bl-faq-details-content-inner .u-bullet-item,
.bl-faq-details-content-inner .u-att {
  margin-block: 0;
}
.bl-faq-details-content-box {
  display: grid;
  gap: 1.5lh;
}
.bl-faq-details-content-box .u-bullet-list {
  display: grid;
  gap: 1.5lh;
}

/* =======================================================
contact
======================================================= */
@media (width >= 835px) {
  .bl-contact {
    margin-bottom: -24px;
  }
}
.bl-contact-box {
  position: relative;
  padding: 56px;
  background-color: #f0f0f0;
  border-radius: 30px;
}
@media (width <= 834px) {
  .bl-contact-box {
    padding: 28px 0 118px;
    border-radius: 15px;
  }
}
.bl-contact-box::after {
  position: absolute;
  right: 0;
  bottom: -64px;
  width: 200px;
  height: 190px;
  content: "";
  background-image: url("../mailorder/img/contact-illust.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 834px) {
  .bl-contact-box::after {
    right: 12px;
    bottom: 0;
    width: 120px;
    height: 114px;
    background-image: url("../mailorder/img/contact-illust-sm.png");
  }
}
.bl-contact-ttl {
  display: revert;
  margin-bottom: 40px;
  font-size: 3.2rem;
  font-weight: revert;
  line-height: revert;
  line-height: 1;
  color: revert;
  text-align: center;
}
@media (width <= 834px) {
  .bl-contact-ttl {
    margin-block: var(--leading-trim);
    margin-bottom: 36px;
    font-size: 2.25rem;
    line-height: calc(67/45);
  }
}
.bl-contact-ttl::before {
  display: none;
}
.bl-contact-conts-wrapper {
  display: flex;
  gap: 96px;
  justify-content: center;
}
@media (width <= 834px) {
  .bl-contact-conts-wrapper {
    display: grid;
    gap: 44px;
  }
}
.bl-contact-conts {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  justify-content: center;
}
@media (width <= 834px) {
  .bl-contact-conts {
    gap: 0;
  }
}
.bl-contact-conts .bl-tel-def {
  display: grid;
  gap: 24px;
  justify-content: center;
}
@media (width <= 834px) {
  .bl-contact-conts .bl-tel-def {
    gap: 20px;
    margin-bottom: 16px;
  }
}
.bl-contact-conts .bl-tel-dttl {
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media (width <= 834px) {
  .bl-contact-conts .bl-tel-dttl {
    font-size: 1.4rem;
  }
}
.bl-contact-conts .bl-tel-ditem {
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.06em;
}
@media (width <= 834px) {
  .bl-contact-conts .bl-tel-ditem {
    font-size: 3.1rem;
  }
}
.bl-contact-conts .bl-tel-ditem-link {
  font-weight: 700;
  color: #222;
  text-decoration: none;
}
.bl-contact-conts .bl-time-def {
  display: flex;
  gap: 16px;
  align-items: center;
  align-self: start;
  justify-content: center;
}
@media (width <= 834px) {
  .bl-contact-conts .bl-time-def {
    gap: 13px;
    font-size: 1.4rem;
  }
}
.bl-contact-conts .bl-time-dttl {
  padding: 5px 6px 5px 8px;
  font-weight: 700;
  line-height: 1;
  background-color: #ebf5fc;
  border: 1px solid #aec5d5;
}
@media (width <= 834px) {
  .bl-contact-conts .bl-time-dttl {
    padding: 4px 6.5px;
  }
}
.bl-contact-conts .bl-time-ditem {
  font-weight: 500;
}
.bl-contact-conts .bl-mail-def {
  display: grid;
  gap: 16px;
  justify-content: center;
}
.bl-contact-conts .bl-mail-dttl {
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.bl-contact-conts .bl-mail-btn {
  display: grid;
  place-content: center;
  width: fit-content;
  padding-block: 17px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-brightest);
  text-decoration: none;
  background-color: #005dab;
  border-radius: 10px;
}
@media (width >= 835px) {
  .bl-contact-conts .bl-mail-btn {
    min-width: 376px;
  }
}
@media (width <= 834px) {
  .bl-contact-conts .bl-mail-btn {
    padding: 14px 56px;
    margin-bottom: 20px;
    font-size: 1.6rem;
    border-radius: 5px;
  }
}