@charset "UTF-8";

/* =================== */
/*  variable             */
/* =================== */

:root {

  /* inner */
  --innerPadingInline: 20px;
  --innerWidth: 1100px;

  /* font */
  --font-family-base: "Zen Maru Gothic", serif;

  /* カラー */
  --baseColor: #142846;
  --bgColor: #fff2de;
  --colorWhite: #fff;
  --colorWhite2: #fffcf2;
  --colorWhite3: #f8fcfe;

  --colorRed: #f01400;
  --colorYellow: #ffe614;
  --colorYellow2: #fce8a8;
  --colorYellow3: #ffefba;
  --colorOrange: #fa6400;
  --colorOrange2: #ffc814;
  --colorBrown: #be9600;
  --colorBlue: #0050a0;

  --colorPink: #f9bfba;
  --colorOrange3: #ffdcbe;
  --colorBrown2: #f0dca0;
  --colorGreen: #d8e6d3;
  --colorGreen2: #3caa14;
  --colorBlue2: #ccdbe3;
  --colorBlue3: #1482be;
  --colorBlue4: #e2eef4;
  --colorPurple: #645abe;
  --colorPurple2: #a03caa;
  --colorPurple3: #a0146e;
  --colorGray: #969696;


  /* weight */
  --font-weight-regular: 400;
  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* hover */
  --hover-opacity: 0.8;

}


/* =================== */
/*  base             */
/* =================== */

a {
  -webkit-transition: opacity 0.3s;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}


@media (any-hover: hover) {
  a:hover {
    opacity: var(--hover-opacity);

  }
}



@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;

  }
}




* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


body {
  margin: 0 auto;
  color: var(--baseColor);
  font-family: var(--font-family-base);
  word-break: break-all;
  letter-spacing: 0;



  padding-top: 60px !important;

}




/* Safari用のハックは、Chromeに適用されないようにする */
@supports (-webkit-touch-callout: none) {
  body {
    /* Safari用のハック */
    height: -webkit-fill-available;
  }
}



:where(button, [type='button'], [type='reset'], [type='submit']) {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

:where( :-moz-any-link,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'],
  label[for],
  select,
  summary,
  [role='tab'],
  [role='button']) {
  cursor: pointer;
}

:where( :-webkit-any-link,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'],
  label[for],
  select,
  summary,
  [role='tab'],
  [role='button']) {
  cursor: pointer;
}

:where( :any-link,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'],
  label[for],
  select,
  summary,
  [role='tab'],
  [role='button']) {
  cursor: pointer;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* =================== */
/*  utilitiy         */
/* =================== */


.br-sp {
  display: block;

}

@media (min-width: 992px) {
  .br-sp {
    display: none;
  }
}

.br-pc {
  display: none;

}

@media (min-width: 992px) {
  .br-pc {
    display: block;
  }
}




.sp-none {
  display: none !important;

}

@media (min-width: 768px) {
  .sp-none {
    display: block !important;

  }
}

.pc-none {
  display: block !important;

}

@media (min-width: 768px) {
  .pc-none {
    display: none !important;

  }
}


.u-visually-hidden {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  contain: strict !important;
  pointer-events: none !important;
  visibility: visible !important;
  border: none !important;
  opacity: 0 !important;
}


/* =================== */
/*  layout         */
/* =================== */


.l-container {
  margin: 0 auto;
  background-color: var(--bgColor);
  position: relative;
  z-index: 0;

  margin-top: -60px;
}

.l-container::after {
  content: "";
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/bg-layer.jpg) no-repeat center / cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


.l-inner {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-inline: var(--innerPadingInline);
}

@media (min-width: 768px) {
  .l-inner {
    --innerPadingInline: 28px;
    max-width: calc(var(--innerWidth) + (var(--innerPadingInline) * 2));

  }
}


.l-inner.l-inner--small {
  --innerPadingInline: 10px;
}

.l-inner.l-inner--noneRight {
  padding-right: 0;
}

/* =================== */
/*  component      */
/* =================== */


/* 共通ボタン */
.c-commonButton {
  display: grid;
  grid-template-columns: 1fr 16px;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 1.732px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1.732px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.c-commonButton.c-commonButton--white {
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);

}


.c-commonButton__arrowBox {
  background-color: var(--colorYellow3);
  height: 100%;
  width: 100%;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 3px;
  padding-left: 3px;
}



.c-commonButton__arrowImg {
  height: 20px;
  display: block;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: auto;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.c-commonButton__arrowImg.c-commonButton__arrowImg--bottom {
  -webkit-transform: initial;
  transform: initial;
  position: relative;
}

.c-commonButton__arrowImg.c-commonButton__arrowImg--bottom::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 8px;
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow.png) no-repeat center / contain;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.c-commonButton__arrow img {
  aspect-ratio: 1;
  -o-object-fit: contain;
  object-fit: contain;
}


.c-commonButton__text {
  font-size: 17px;
  line-height: calc(20/17);
  display: block;
  font-family: var(--font-family-base);
  color: var(--baseColor);
  font-weight: var(--font-weight-black);
  padding: 6px 10px 7px 12px;
  background-color: var(--colorOrange2);
}



.c-commonButton__textSmall {
  font-size: 12px;
  line-height: calc(20/12);
}

.c-commonButton__textRed {
  color: var(--colorRed);
}

.c-commonButton__text.c-commonButton__text--small {
  font-size: 15px;
  line-height: calc(21/15);
}

@media (min-width: 992px) {
  .c-commonButton__text.c-commonButton__text--small {
    font-size: 18px;
    line-height: calc(21/18);
  }
}

.c-commonButton__text.c-commonButton__text--white {
  background-color: var(--colorWhite);
  padding: 9px 5px 10px 10px;
}

@media (min-width: 992px) {
  .c-commonButton__text.c-commonButton__text--white {
    padding: 9px 9px 10px 10px;

  }
}



/* セクションタイトル */
.c-sectionTitle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  font-family: var(--font-family-base);
  position: relative;
}





.c-sectionTitle__en {
  color: var(--colorRed);
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.01em;
  line-height: 1;
  font-weight: var(--font-weight-black);
  text-shadow:
  -1px -1px 1px rgb(255, 255, 255, .7),
  1px 1px 0px rgb(240,20, 0, .6),
  1px 1px 0px rgb(0,0, 0, .6);
}







.c-sectionTitle__en.c-sectionTitle__en--colorWhite {
  color: var(--colorWhite);
  text-shadow:
  -1px -1px 1px rgb(255, 255, 255, .7),
  1px 1px 1px rgb(0,0, 0, .6);
}

.c-sectionTitle__en.c-sectionTitle__en--pickup {
  font-size: 19px;
  line-height: 1;
}

.c-sectionTitle__en.c-sectionTitle__en--how {
  font-size: 19px;
  line-height: 1;
}

.c-sectionTitle__en.c-sectionTitle__en--chara {
  font-size: 19px;
  line-height: 1;
}


.c-sectionTitle__ja {
  font-size: 37px;
  letter-spacing: 0;
  line-height: calc(50/24);
  margin-top: 12px;
  font-weight: var(--font-weight-black);

    text-shadow: -1px -1px 1px rgb(255, 255, 255, .7),
  1px 1px 0px rgb(20,40, 70, .6),
  1px 1px 0px rgb(0,0, 0, .6);

}

.c-sectionTitle__ja.c-sectionTitle__ja--colorWhite {
  color: var(--colorWhite);
}

.c-sectionTitle__ja.c-sectionTitle__ja--reason {
  font-size: 37px;
  line-height: calc(41/37);
  text-shadow:
  -1px -1px 1px rgb(255, 255, 255, .7),
  1px 1px 1px rgb(0,0, 0, .6);
}

.c-sectionTitle__ja.c-sectionTitle__ja--voice {
  font-size: 37px;
  line-height: calc(41/37);

}



.c-sectionTitle__ja.c-sectionTitle__ja--pickup {
  font-size: 29px;
  line-height: calc(41/29);
  margin-top: 0;
}


.c-sectionTitle__ja.c-sectionTitle__ja--how {
  font-size: 29px;
  line-height: calc(41/29);
  margin-top: 0;
}

.c-sectionTitle__ja.c-sectionTitle__ja--chara {
  font-size: 29px;
  line-height: calc(41/29);
  margin-top: 0;
}




.c-sectionTitle__textYellow {
  color: var(--colorYellow);
  text-shadow:
  1px 1px 0px rgb(255,230, 20, .6),
  1px 1px 0px rgb(0,0, 0, .6);
}



.c-sectionTitle__ja.c-sectionTitle__ja--img {
  max-width: 288px;
  line-height: initial;
}

.c-sectionTitle__ja.c-sectionTitle__ja--img img {
  display: block;
}


.c-sectionTitle__ja.c-sectionTitle__ja--point {
  max-width: 309px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 8px;
}




/* 本文 */

.c-commonText {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: calc(23/14);
}


.c-commonText__colorRed {
  color: var(--colorRed);
}

.c-commonText.c-commonText--colorWhite {
  color: var(--colorWhite);
}


/* 共通画像 */
.c-commonImg img {
  display: block;
}


/* ポイント */
.c-pointBox {
  background-color: var(--colorRed);
  padding: 13px 5px 5px;
  border-radius: 9px;
  -webkit-box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.15);
  box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.15);
}

.c-pointBox.c-pointBox--bgOrange {
  background-color: var(--colorOrange);
}

.c-pointBox.c-pointBox--bgBrown {
  background-color: var(--colorBrown);
}


.c-pointBox__head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: var(--colorWhite);
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: var(--font-family-base);
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  padding-right: 60px;
}

.c-pointBox__headPoint {
  padding-right: 6px;
  padding-left: 9px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}


.c-pointBox__headText {
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: calc(27/22);
  text-transform: uppercase;
  font-weight: var(--font-weight-black);
}

.c-pointBox__headTitle {
  font-size: 23px;
  font-weight: var(--font-weight-black);
  line-height: calc(27/23);
  letter-spacing: 0;
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  padding-left: 6px;
  position: relative;

}

.c-pointBox__headTitle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
  opacity: .3;
}

.c-pointBox__headTitle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  width: 1px;
  height: 100%;
  background-color: #fff;
  opacity: .4;
}


.c-pointBox__headYellow {
  color: var(--colorYellow);
}


.c-pointBox__head::after {
  content: "";
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/chara1-1.png) no-repeat center / contain;
  width: 72px;
  height: 96px;
  position: absolute;
  right: 2px;
  top: -22px;
}


.c-pointBox__head.c-pointBox__head--2::after {
  background-image: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/chara2-1.png);
  width: 65px;
  height: 122px;
  top: -28px;
  z-index: 0;
  right: 8px;
}

.c-pointBox__head.c-pointBox__head--3::after {
  background-image: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/chara3-1.png);
  width: 70px;
  height: 128px;
  top: -30px;
}

.c-pointBox__body {
  background-color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px;
  padding-right: 8px;
  padding-bottom: 10px;
  margin-top: 13px;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  position: relative;
}


.c-pointBox__bodyImg {
  max-width: 125px;
  width: 100%;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;

}


.c-pointBox__bodyImg img {
  border-radius: 6px 0 6px 0;
  overflow: hidden;
  aspect-ratio: 125/145;
}


.c-pointBox__text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 13px;
  line-height: calc(18/13);
  color: var(--baseColor);
  margin-top: 17px;
}




/* ステップ */
.c-stepBox {
  background-color: var(--colorGreen2);
  padding: 13px 10px 10px 5px;
  border-radius: 9px 0 0 9px;
  -webkit-box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.15);
  box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: var(--colorWhite);
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: 7px;
  -moz-column-gap: 7px;
  column-gap: 7px;
}

.c-stepBox.c-stepBox--bgBlue {
  background-color: var(--colorBlue3);
}

.c-stepBox.c-stepBox--bgPPurple {
  background-color: var(--colorPurple);
}

.c-stepBox__head {
  font-family: var(--font-family-base);
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.c-stepBox__headPoint {
  padding-right: 6px;
  padding-left: 9px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}


.c-stepBox__headText {
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: calc(27/22);
  text-transform: uppercase;
  font-weight: var(--font-weight-black);
}

.c-stepBox__title {
  font-size: 21px;
  font-weight: var(--font-weight-black);
  line-height: calc(27/21);
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}


.c-stepBox__titleYellow {
  color: var(--colorYellow);
}

.c-stepBox__bodyInner {
  background-color: var(--colorWhite);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px;
  padding: 16px 14px;
  margin-top: 12px;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  position: relative;
}


.c-stepBox__bodyImg {
  max-width: 55px;
  width: 100%;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}


.c-stepBox__bodyImg img {
  aspect-ratio: 55/64;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}


.c-stepBox__text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 13px;
  line-height: calc(18/13);
  color: var(--baseColor);
}

.c-stepBox__bottom {
  margin-top: 10px;
  text-align: right;
  margin-bottom: 5px;
}

.c-stepBox__button {
  border-radius: 15px;
  color: var(--colorWhite);
  font-size: 13px;
  line-height: calc(21/13);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-base);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--colorWhite);
  padding: 3px 13px 4px;
  width: 100%;
  max-width: 145px;

}

.c-stepBox__button::after {
  content: "";
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow3.png) no-repeat center / contain;
  width: 8px;
  height: 10px;
  display: inline-block;
  margin-left: 13px;
}


/* タグ */

.c-tag {
  border-radius: 3px;
  border: 1px solid #000;
  padding: 5px 8px;
  display: block;
  text-align: center;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  line-height: calc(18/12);
  color: var(--baseColor);
}



/* キャラクター紹介 */

.c-charaBox {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
}

.c-charaBox::before {
  -webkit-box-shadow: inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.15);
  background-color: var(--colorRed);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 10px);
  content: "";
  z-index: -1;
}


.c-charaBox.c-charaBox--bgOrange::before {
  background-color: var(--colorOrange);
}

.c-charaBox.c-charaBox--bgBrown::before {
  background-color: var(--colorBrown);
}

.c-charaBox.c-charaBox--bgGreen::before {
  background-color: var(--colorGreen2);
}

.c-charaBox.c-charaBox--bgBlue::before {
  background-color: var(--colorBlue3);
}

.c-charaBox.c-charaBox--bgPurple::before {
  background-color: var(--colorPurple);
}

.c-charaBox.c-charaBox--bgPurple2::before {
  background-color: var(--colorPurple2);
}

.c-charaBox.c-charaBox--bgPurple3::before {
  background-color: var(--colorPurple3);
}

.c-charaBox.c-charaBox--bgGray::before {
  background-color: var(--colorGray);
}

.c-charaBox.c-charaBox--bgBlack::before {
  background-color: var(--baseColor);
}


.c-charaBox__img {
  max-width: 133px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;

}

.c-charaBox__img.c-charaBox__img--2 {
  max-width: 90px;
}

.c-charaBox__img.c-charaBox__img--3 {
  max-width: 90px;
}

.c-charaBox__img.c-charaBox__img--4 {
  max-width: 178px;
}

.c-charaBox__img.c-charaBox__img--5 {
  max-width: 90px;
}

.c-charaBox__img.c-charaBox__img--6 {
  max-width: 121px;
}

.c-charaBox__img.c-charaBox__img--7 {
  max-width: 90px;
}

.c-charaBox__img.c-charaBox__img--8 {
  max-width: 138px;
}

.c-charaBox__img.c-charaBox__img--9 {
  max-width: 169px;
}

.c-charaBox__img.c-charaBox__img--10 {
  max-width: 89px;
}


.c-charaBox__name {
  color: var(--colorWhite);
  font-family: var(--font-family-base);
  font-size: 13px;
  line-height: calc(27/13);
  font-weight: var(--font-weight-bold);
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  margin-top: 9px;
  padding-right: 15px;
  padding-left: 15px;
}


.c-charaBox__name.c-charaBox__name--large {
  font-size: 29px;
  line-height: calc(27/29);
  font-weight: var(--font-weight-black);
  margin-top: 0;
}

.c-charaBox__small {
  color: var(--colorWhite);
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: calc(27/16);
  font-weight: var(--font-weight-bold);
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  margin-left: 11px;
}

.c-charaBox__text {
  color: var(--colorWhite);
  font-family: var(--font-family-base);
  font-size: 12px;
  line-height: calc(16/12);
  font-weight: var(--font-weight-medium);
  text-shadow: 1.732px 1px 4px rgba(0, 0, 0, 0.2);
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 20px;
}



/* =================== */
/*  ページネーション回り */
/* =================== */

.c-page {
  background-color: #daccb7;
  -webkit-transition: opacity .4s;
  transition: opacity .4s;

  border-radius: 50%;
  -webkit-box-shadow: 1.732px 1px 3.84px 0.16px rgba(0, 0, 0, 0.3), inset 0px 0px 1.96px 0.04px rgba(0, 0, 0, 0.15);
  box-shadow: 1.732px 1px 3.84px 0.16px rgba(0, 0, 0, 0.3), inset 0px 0px 1.96px 0.04px rgba(0, 0, 0, 0.15);
  width: 10px;
  height: 10px;
}

.c-page.is-active {
  background-color: #8c6e46;
  opacity: 1;

}

.c-commonPagination {
  position: absolute;
  bottom: 6px;
  left: 50%;
  translate: -50%;
  width: 100%;
  max-width: 220px;
}

.c-commonPagination li {
  margin-left: 8px;
  margin-right: 8px;
}


.splide__arrows button {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-shadow: 1.732px 1px 3.84px 0.16px rgba(0, 0, 0, 0.3), inset 0px 0px 1.96px 0.04px rgba(0, 0, 0, 0.15);
  box-shadow: 1.732px 1px 3.84px 0.16px rgba(0, 0, 0, 0.3), inset 0px 0px 1.96px 0.04px rgba(0, 0, 0, 0.15);
}




.splide__arrows {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 200px;
  margin-right: auto;
  margin-left: auto;
}



.splide__arrow img {
  display: block;
}




/* =================== */
/*  ハンバーガーメニュー */
/* =================== */


.c-hamburger {
  position: relative;
  width: inherit;
  height: inherit;
  margin: 0;


  background: var(--colorOrange2);
  -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  border: solid 3px var(--colorOrange2);
  cursor: pointer;
  border-radius: 50%;
}




.c-hamburger:before {
  content: "";
  border-radius: 50%;
  background-color: rgb(255, 200, 20);
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;

}




.c-hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 30px;
  height: 2px;
  translate: -50%;
  background: #333;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  border-radius: 4px;
}


.c-hamburger span:nth-of-type(1) {
  top: -4px;
}

.c-hamburger span:nth-of-type(1):before {
  content: "";
  width: 5px;
  height: inherit;
  background-color: var(--colorRed);
  position: absolute;
  top: 0;
  left: 0;
}

.c-hamburger span:nth-of-type(1):after {
  content: "";
  width: 2px;
  height: 5px;
  background: var(--colorOrange2);
  position: absolute;
  top: 50%;
  left: 5px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


.c-hamburger span:nth-of-type(2) {
  top: 1px;


}


.c-hamburger span:nth-of-type(3) {
  top: 6px;


}


.c-hamburger .c-hamburger__text {
  display: block;
  top: 12px;
  background: transparent;
  color: var(--color-white);
  font-weight: var(--font-weight-black);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  width: initial;
  height: initial;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 1);
}


.c-hamburger[aria-expanded="true"] span:nth-of-type(1) {
  top: 0;
  translate: -50%;
  rotate: 225deg;
}


.c-hamburger[aria-expanded="true"] span:nth-of-type(2) {
  opacity: 0;
}


.c-hamburger[aria-expanded="true"] span:nth-of-type(3) {
  top: -4px;
  translate: -50%;
  rotate: -225deg;
}



/* =================== */
/*  ヘッダー　　　      */
/* =================== */
.p-header {
  display: block;


  position: fixed;
  width: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 999;

}

.p-header.is_fixed {
  left: 50%;
  right: initial;
  background-color: transparent;

}

.p-header.is_fixed .p-header__inner {
  opacity: 0.949;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  background-color: var(--colorWhite);
  margin-top: 0;
}

.p-header.fix .p-header__inner {
  opacity: 0.949;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  background-color: var(--colorWhite);
  margin-top: 0;
}

.p-header.is_fixed .p-header__title {
  max-width: 90px;
}

.p-header.fix .p-header__title {
  max-width: 90px;
}

.p-header.is_fixed .c-commonButton__text.c-commonButton__text--white {
  background-color: var(--bgColor);
}

.p-header.fix .c-commonButton__text.c-commonButton__text--white {
  background-color: var(--bgColor);
}

.p-header.is_fixed .p-header__button .c-commonButton__arrowBox {
  background-color: var(--colorRed);
}

.p-header.fix .p-header__button .c-commonButton__arrowBox {
  background-color: var(--colorRed);
}


.p-header.is_fixed .c-commonButton__arrowImg.c-commonButton__arrowImg--bottom::before {
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow3.png) no-repeat center / contain;
  -webkit-transform: rotate(90deg) translateX(-50%);
  transform: rotate(90deg) translateX(-50%);
}

.p-header.fix .c-commonButton__arrowImg.c-commonButton__arrowImg--bottom::before {
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow3.png) no-repeat center / contain;
  -webkit-transform: rotate(90deg) translateX(-50%);
  transform: rotate(90deg) translateX(-50%);
}

.p-header.fix .p-header__inner {
  background-color: var(--colorWhite);
}

.p-header__nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 10;
  position: absolute;
  top: 0;
  right: -100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: var(--colorWhite);
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;

  overflow-y: scroll;

}



@media (min-width: 992px) {
  .p-header__nav {
    position: static;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    height: 100%;
    opacity: initial;
    display: none;
  }
}



.p-header__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: inherit;
  padding: 5px 5px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-right: 15px;
  width: 100%;
  max-width: 375px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
}


@media (min-width: 992px) {
  .p-header__inner {
    margin-top: 40px;
  }
}


.p-header__title {
  width: 100%;
  max-width: 170px;
  display: block;

  -webkit-transition: max-width 0.2s, margin-right 0.2s;

  transition: max-width 0.2s, margin-right 0.2s;
}


.p-header__title a {
  display: block;
  width: 100%;
  height: auto;
}


.p-header__title a img {
  height: auto;
  display: block;
}



.p-header__hamburger {
  z-index: 100;
  width: 70px;
  height: 70px;

}

@media (min-width: 992px) {
  .p-header__hamburger {
    display: none;
  }
}



.p-header__nav[aria-expanded="true"] {
  position: fixed;
  right: 0;
  opacity: 1;
}


.p-header__button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 95px;
  min-width: 95px;
  margin-left: auto;
  margin-right: 10px;
}

@media (min-width: 992px) {
  .p-header__button {
    max-width: 160px;
    text-align: center;
    margin-left: 0;
  }
}

.p-header__button a {
  width: 100%;
}


/* =================== */
/*  ナビメニュー      */
/* =================== */


.p-nav {
  background-color: var(--colorWhite);
  position: relative;
  padding-top: 200px;
  padding-bottom: 90px;
  height: auto;
  width: 100%;
  max-width: 300px;

}

@media (min-width: 992px) {
  .p-nav {
    -webkit-filter: drop-shadow(1.732px 1px 4px rgb(0 0 0/.3));
    filter: drop-shadow(1.732px 1px 4px rgb(0 0 0/.3));
    border-radius: 12px;
    padding-top: 0;
    padding-bottom: 0;
    height: initial;
  }
}

.p-nav::before {
  content: "";
  -webkit-clip-path: polygon(0 51%, 100% 100%, 100% 0);
  clip-path: polygon(0 51%, 100% 100%, 100% 0);
  position: absolute;
  background-color: var(--colorWhite);
  left: -30px;
  top: 106px;
  width: 31px;
  height: 35px;

  display: none;
}

@media (min-width: 992px) {
  .p-nav::before {
    display: block;
  }
}




.p-nav__list {
  width: 100%;
}

.p-nav__item a {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.p-nav__item a:after {
  content: "";
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow-orange.png) no-repeat center / contain;
  display: block;
  width: 26px;
  height: 26px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: auto;
}

.p-innerNav__item a::after {
  display: none;
}

.p-nav__bottom {
  padding: 10px;
  display: grid;
  row-gap: 5px;
  width: 100%;
}


.p-navList__item a {
  padding: 13px 17px;
  border-bottom: 1px solid #e1dcd7;
  font-size: 16px;
  line-height: calc(23/16);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  color: var(--baseColor);
}

.p-innerNav {
  background-color: #fff2de;
}

.p-innerNav__item a {
  border-bottom: transparent;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
  line-height: calc(21/12);
  font-weight: var(--font-weight-bold);
}


/* =================== */
/*  main  　            */
/* =================== */

.js-sideArea {
  visibility: hidden;
  -webkit-transition: width 0.1s ease, visibility 0s 0.1s;
  transition: width 0.1s ease, visibility 0s 0.1s;
}


.p-mainContents__title {
  display: none;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 999;
  max-width: 233px;
}

@media (min-width: 992px) {
  .p-mainContents__title {
    display: block;

  }
}




.p-mainContents {
  position: relative;
  max-width: 425px;
  margin-right: auto;
  margin-left: auto;
}


@media (min-width: 992px) {
  .p-mainContents {
    margin-top: 15px;
  }
}


.p-mainContents__center {
  position: relative;


  margin-right: auto;
  margin-left: auto;
  z-index: 0;
  max-width: 425px;
}

@media (min-width: 992px) {
  .p-mainContents__center {
    padding: 25px;
  }
}

.p-mainContents__inner {
  background-color: var(--bgColor);

  max-width: 375px;

  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-mainContents__inner {
    border-radius: 24px;
  }
}


.p-mainContents__center::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--colorWhite);
  opacity: .2;
  -webkit-box-shadow: 0px 0px 24px 6px rgba(20, 40, 60, 0.4);
  box-shadow: 0px 0px 24px 6px rgba(20, 40, 60, 0.4);
  display: block;
  z-index: -1;

}

@media (min-width: 992px) {
  .p-mainContents__center::before {
    border-radius: 24px;

  }
}


.p-mainContents__center::after {
  content: "";
  width: 100%;
  height: calc(100% - 5px);
  max-width: 415px;
  position: absolute;
  top: 5px;
  left: 50%;
  translate: -50%;

  background-color: var(--colorWhite);
  opacity: .2;
  -webkit-box-shadow: 0px 0px 24px 6px rgba(20, 40, 60, 0.4);
  box-shadow: 0px 0px 24px 6px rgba(20, 40, 60, 0.4);
  display: block;
  z-index: -1;

}

@media (min-width: 992px) {
  .p-mainContents__center::after {
    border-radius: 24px;
  }
}






.p-mainContents__rowSlide {
  margin-top: -44px;
  position: relative;
  z-index: 0;
}

.p-mainContents__right {
  display: none;
}

@media (min-width: 992px) {
  .p-mainContents__right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 40px;
    right: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
  }
}


@media (min-width: 992px) {
  .p-mainContents__rightInner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }
}


.p-mainContents__rightNav {
  max-width: 300px;
}



/* =================== */
/*  fv回り   　            */
/* =================== */


.p-fv {
  position: relative;
  background-color: var(--colorRed);
  padding-bottom: 80px;
  padding-top: 60px;
  z-index: 0;
}



.p-fv__img {
  width: 100%;
}

.p-fv__imgWrap {
  position: relative;
}

.p-fv__img.p-fv__img--large {
  max-width: 96%;
  border-radius: 0 34px 34px 0;
  overflow: hidden;


}

.p-fv__img.p-fv__img--chara {
  margin-top: -60px;
}

.p-fv__img.p-fv__img--circle {
  max-width: 120px;
  position: absolute;
  top: 4px;
  right: 25px;
  width: 100%;
}



.p-fv__img img {
  display: block;
}


.p-fv__contents {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 110px;

}

.p-fv__textBox {
  padding-left: 20px;
  max-width: 87%;
}

.p-fv__title {
  margin-left: -10px;
}

.p-fv__title img {
  display: block;
}

.p-fv__text {
  font-family: var(--font-family-base);
  color: var(--baseColor);
  font-weight: var(--font-weight-black);
  font-size: 17px;
  line-height: calc(21/17);
  display: block;
  letter-spacing: 0.035em;
  text-shadow:
    /* 全体 */
    0 0 10px rgb(255, 255, 255),
    /* 下方向 */
    0 5px 10px rgb(255, 255, 255),
    /* 右方向 */
    5px 0 10px rgb(255, 255, 255),
    /* 上方向 */
    0 -5px 10px rgb(255, 255, 255),
    /* 左方向 */
    -5px 0 10px rgb(255, 255, 255);

}


.p-fv__labelWrap {
  padding-left: 15px;
  padding-right: 10px;
  margin-top: -28px;
  position: relative;
}

.p-fv__label {
  width: 100%;
}

.p-fv__label img {
  display: block;
}












.p-rowList__item {
  background-color: var(--colorWhite);
  padding: 4px;
  border-radius: 9px;
  overflow: hidden;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);

}



.p-rowList__img {
  border-radius: 6px;
  overflow: hidden;
}



/* =================== */
/*  aboutセクション   　 */
/* =================== */

.p-about {
  position: relative;
  padding-top: 40px;
  padding-bottom: 60px;
  overflow: hidden;
  z-index: 0;

}

.p-about::before {
  content: "";
  position: absolute;
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/bg2.png) no-repeat center / cover;
  width: 307px;
  height: 308px;
  bottom: -45px;
  right: -44px;
}

.p-about:after {
  content: "";
  position: absolute;
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/chara1.png) no-repeat center / cover;
  width: 115px;
  height: 118px;
  top: 114px;
  right: -20px;
}

.p-about__textBox {
  margin-top: 22px;
}



/* =================== */
/*  pointセクション   　　   */
/* =================== */


.p-point {
  margin-top: -15px;
  position: relative;
  background-color: var(--colorWhite2);
  border-radius: 19px 19px 0 0;
  padding-bottom: 60px;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  z-index: 0;
}


.p-point__img {
  position: relative;
  top: -27px;
  -webkit-filter: drop-shadow(1.732px 1px 7.04px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(1.732px 1px 7.04px rgba(0, 0, 0, 0.3));

}




.p-point__title {
  text-align: center;
  margin-top: 30px;
}

.p-point__flow {
  margin-top: 20px;
}


.p-pointFlow {
  counter-reset: number 0;
  display: grid;
  row-gap: 15px;
}

.p-pointFlow__item {
  position: relative;
}

.p-pointFlow__item .c-pointBox__headPoint::after {
  counter-increment: number 1;
  content: "0"counter(number) " ";
  font-size: 41px;
  letter-spacing: 0.02em;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  line-height: calc(27/41);
  white-space: nowrap;
}







/* =================== */
/*  reasonセクション    */
/* =================== */


.p-reason {
  padding-top: 30px;
  position: relative;
  z-index: 1;
}


.p-reason__contents {
  max-width: 355px;
  position: relative;
  z-index: 0;
}

.p-reason__contents::before {
  border-radius: 0 19px 19px 0;
  -webkit-box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.1);
  box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 10.8px 1.2px rgba(0, 0, 0, 0.1);
  background-color: var(--colorBlue);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  z-index: -1;
}


.p-reason__title {
  margin-top: -30px;
}

.p-reason__textBox {
  margin-top: 22px;
}

.p-reason__img {
  margin-top: 40px;
  border-radius: 0 0 9px 0;
  overflow: hidden;
}


/* =================== */
/*  pickuoセクション   　*/
/* =================== */

.p-pickUp {
  background-color: var(--colorYellow2);
  padding-top: 135px;
  padding-bottom: 55px;
  border-radius: 0 0 19px 19px;
  margin-top: -75px;
  position: relative;
  z-index: 0;
}


.p-pickUp__title {
  text-align: center;
}

.p-pickUp__list {
  margin-top: 20px;
  display: grid;
  row-gap: 15px;
}

.p-tagList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}



.p-pickupBox {
  border-radius: 6px;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;

}

.p-pickupBox__head {
  background-color: var(--baseColor);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
  padding: 10px;

}

.p-pickupBox__headImgBox {
  background-color: var(--colorWhite);
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 9px;
  max-width: 130px;
  padding: 4px;
}

.p-pickupBox__headImg {
  width: 100%;
}


.p-pickupBox__headImg img {
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-pickupBox__headTitleBox {
  font-family: var(--font-family-base);

}

.p-pickupBox__subTitle {
  font-size: 13px;
  line-height: calc(16/13);
  color: var(--colorYellow);
  font-weight: var(--font-weight-bold);
  display: block;
}


.p-pickupBox__headTitle {
  font-size: 18px;
  line-height: calc(20/18);
  color: var(--colorWhite);
  font-weight: var(--font-weight-bold);
  margin-top: 7px;
}


.p-pickupBox__body {
  background-color: var(--colorWhite2);
}


.p-pickupBox__textBox {
  padding: 16px 15px 15px;
}


.p-pickupBox__text {
  font-size: 13px;
  line-height: calc(18/13);
  color: var(--baseColor);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-base);
}

.p-pickupBox__price {
  display: block;
  margin-top: 6px;
  color: var(--colorRed);
  font-family: var(--font-family-base);
  font-size: 31px;
  font-weight: var(--font-weight-bold);
  line-height: calc(18/31);
}

.p-pickupBox__price span {
  font-weight: var(--font-weight-medium);
  font-size: 10px;
  line-height: calc(18/10);
  color: var(--baseColor);
}


.p-pickupBox__tags {
  margin-top: 9px;
}


.p-pickupBox__bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  padding: 10px;
}



/* =================== */
/*  voiceセクション   　*/
/* =================== */



.p-voice {
  padding-top: 60px;
  padding-bottom: 60px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}


.p-voice__text {
  margin-top: 18px;
}

.p-voice__slide {
  margin-top: 18px;

}

.p-voiceSlide__track {
  overflow: visible;
}



.p-voiceBox__iconWrap {
  background-color: var(--colorPink);
  border-radius: 50%;
  border: 1px solid;
  border-color: rgb(231, 169, 164);
  width: 90px;
  height: 90px;
  padding: 14px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;

}



.p-voiceBox__iconWrap.p-voiceBox__iconWrap--bgOrange {
  border-color: rgb(239, 191, 150);
  background-color: var(--colorOrange3)
}

.p-voiceBox__iconWrap.p-voiceBox__iconWrap--bgBrown {
  border-color: rgb(222, 199, 131);
  background-color: var(--colorBrown2)
}

.p-voiceBox__iconWrap.p-voiceBox__iconWrap--bgGreen {
  border-color: rgb(193, 212, 186);
  background-color: var(--colorGreen)
}

.p-voiceBox__iconWrap.p-voiceBox__iconWrap--bgBlue {
  border-color: rgb(181, 198, 207);
  background-color: var(--colorBlue2)
}




.p-voiceBox__iconBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}


.p-voiceBox__icon {
  max-width: 44px;
  width: 100px;
}

.p-voiceBox__label {
  text-align: center;
  background-color: var(--colorRed);
  -webkit-box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 1.96px 0.04px rgba(0, 0, 0, 0.15);
  box-shadow: 1.732px 1px 10.56px 1.44px rgba(0, 0, 0, 0.3), inset 0px 0px 1.96px 0.04px rgba(0, 0, 0, 0.15);

  max-width: 80px;
  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: block;
  padding: 2px;
  margin-top: -15px;
  margin-bottom: 11px;
}


.p-voiceBox__label.p-voiceBox__label--bgOrange {
  background-color: var(--colorOrange);
}

.p-voiceBox__label.p-voiceBox__label--bgBrown {
  background-color: var(--colorBrown);
}

.p-voiceBox__label.p-voiceBox__label--bgGreen {
  background-color: var(--colorGreen2);
}

.p-voiceBox__label.p-voiceBox__label--bgBlue {
  background-color: var(--colorBlue3);
}


.p-voiceBox__name {
  color: var(--colorWhite);
  text-shadow: 1.732px 1px 4px rgb(0 0 0 / 0.2);
  font-size: 16px;
  font-weight: var(--font-weight-black);
  font-family: var(--font-family-base);
  line-height: calc(27/16);

}


.p-voiceBox__icon img {
  -o-object-fit: contain;
  object-fit: contain;
}


.p-echo__track {
  margin-top: -7px;
}

.p-echo__block {
  position: relative;
  background-color: var(--colorWhite);
  padding: 10px;
  border-radius: 6px;
  padding: 20px;
  margin-top: 11px;
  -webkit-filter: drop-shadow(1.272px 1px 4px rgb(0 0 0/ 0.3));
  filter: drop-shadow(1.272px 1px 4px rgb(0 0 0/ 0.3));
  margin-bottom: 13px;
  margin-right: 10px;
  margin-left: 10px;

}


.p-echo__block::before {
  background-color: var(--colorWhite);
  content: "";
  height: 11px;
  position: absolute;
  width: 20px;
  translate: -50%;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  left: 50%;
  top: -10px;
}



.p-echo__box {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  background-color: var(--colorBlue4);
  border-radius: 25px;
  padding: 3px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 9px;
  -moz-column-gap: 9px;
  column-gap: 9px;
  margin-top: 12px;
}

.p-echo__img {
  max-width: 45px;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.p-echo__boxText {
  font-size: 12px;
  line-height: calc(16/12);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-base);
  color: var(--baseColor);
}


.p-echo__text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  line-height: calc(16/12);
  color: var(--baseColor);
}







/* =================== */
/*  howセクション   　*/
/* =================== */

.p-how {
  background-color: var(--colorWhite2);
  padding-top: 60px;
  padding-bottom: 60px;
  border-radius: 19px;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 0;
}


.p-how__title {
  text-align: center;
}

.p-how__step {
  margin-top: 20px;
}







.p-howFlow {
  counter-reset: number 0;
  display: grid;
  row-gap: 10px;
}

.p-howFlow__item {
  position: relative;
}


.p-howFlow__item .c-stepBox__headPoint::after {
  counter-increment: number 1;
  content: "0"counter(number) " ";
  font-size: 41px;
  letter-spacing: 0.02em;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  line-height: calc(27/41);
}


.p-howFlow__item::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow4.png) no-repeat center / contain;
  left: 20px;
  z-index: 1;
}


.p-howFlow__item:nth-child(2)::after {
  background: url(https://gigaplus.makeshop.jp/dreamblossom/img/numberblocks/arrow5.png) no-repeat center / contain;

}

.p-howFlow__item:last-child::after {
  display: none;
}



/* =================== */
/*  キャラクターセクション */
/* =================== */


.p-character {
  padding-top: 60px;
  padding-bottom: 60px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}



.p-character__slide {
  margin-top: 10px;

}


.p-charaList__item {
  display: grid;

}

.p-charaList__track {
  margin-bottom: 15px;
}

.p-chara__arrows {
  max-width: 90%;
}

.p-charaPagination {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}


.p-itemBox {
  background-color: var(--colorWhite);
  border-radius: 6px;
  -webkit-box-shadow: 1.732px 1px 4px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 1.732px 1px 4px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.p-itemBox__imgWrap {
  background-color: var(--colorWhite3);
}

.p-itemBox__img img {
  aspect-ratio: 175 / 130;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;

}


.p-itemBox__body {
  padding: 8px 16px 10px 14px;
}

.p-itemBox__title {
  font-family: var(--font-family-base);
  color: var(--baseColor);
  font-size: 14px;
  line-height: calc(18/14);
  font-weight: var(--font-weight-black);
}

.p-itemBox__price {
  display: block;
  margin-top: 3px;
  color: var(--colorRed);
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: calc(18/24);
}


.p-itemBox__price span {
  font-weight: var(--font-weight-medium);
  font-size: 10px;
  line-height: calc(18/10);
  color: var(--baseColor);
}

.p-itemBox__tags {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 10px;
}




.p-tabArea {
  position: relative;
  padding-top: 60px;

  z-index: 0;
}


.p-tabBlocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.p-tab__menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  margin-bottom: 2px;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding-left: 10px;
  padding-right: 10px;
}

.p-tab__menuItem {
  cursor: pointer;



}

.p-tab__itemInner {
  display: block;
  text-align: center;
  color: var(--colorWhite);

  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: calc(20/16);
  font-weight: var(--font-weight-black);
  padding: 9px 6px 9px;
  border-radius: 12px 12px 0 0;
  background-color: var(--baseColor);
  -webkit-box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 3.464px 2px 8px 0px rgba(0, 0, 0, 0.3);

}





.p-tab__menuItem.is-show .p-tab__itemInner {
  background-color: var(--colorRed);
  padding-top: 11px;
  padding-bottom: 14px;
  margin-bottom: -2px;
}


.p-tab__contents {
  background-color: var(--colorYellow2);
  position: relative;
  padding-top: 23px;

  padding: 23px 10px 20px;
}

.p-tab__contents::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--colorRed);
  top: 0;
  left: 0;
  position: absolute;
}

.p-tab__text {
  color: var(--baseColor);
  font-size: 13px;
  line-height: calc(18/13);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);

}

.p-tab__block {
  margin-top: 15px;
}


.p-panelBox {
  display: none;
}

.p-panelBox.is-show {
  display: block;
}




/* =================== */
/* フッター　　　　　　　 */
/* =================== */

.p-footer {
  background-color: var(--colorWhite);
  padding-top: 25px;

  padding-bottom: 30px;
}

.p-footer__inner {
  padding-right: 20px;
  padding-left: 20px;
}

.p-footer__logo {
  max-width: 115px;
  margin-right: auto;
  margin-left: auto;
}

.p-footer__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 25px;
  margin-top: 14px;
}

.p-footer__link {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  line-height: calc(18/13);
  color: var(--baseColor);
  font-family: var(--font-family-base);
  display: inline-block;
}

.p-footer__text {
  text-align: center;
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-base);
  color: var(--baseColor);
  display: block;
  margin-top: 15px;
}