/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  background: #fff;
  font-family: 'Noto Serif JP', serif;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}


* {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}


/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

.question {
  display: none;
}
.question_01 {
  display: block;
}

html {
  overflow: hidden;
}
p {
  margin: 8px 0;
  color: #59401B;
}

.notSupport {
  display: none;
}
.diagnosisScrollY::-webkit-scrollbar {
  width: 5px;
  height: 12px;
}
.diagnosisScrollY::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #bcbcbc;
}
.diagnosisScrollY::-webkit-scrollbar-track {
  border-radius: 10px;
  border: 10px solid rgba(188, 188, 188, .3);
}
.diagnosisScrollY::-webkit-scrollbar-track-piece {
  width: 2px;
}

.questionContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}

.questionInner {
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.questionWindow {
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
.questionWindow_scroll_pc {
  overflow-y: hidden;
}
.questionWindow__scroll {
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}
.questionWindow__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 750px) {
  .questionWindow_scroll_pc {
    overflow-y: scroll;
  }
}

.questionBar {
  width: 100%;
  height: 14px;
  background-color: #59401B;
}
.questionBar__gauge {
  float: left;
  width: calc((100% / 7) - 0.05px);
  height: 100%;
  background-color: #C4A152;
}
.questionBar__gauge_line {
  float: left;
  width: calc(100% * 7 / 1 - 2px);
  height: 100%;
  background-color: #C4A152;
  border: 1px solid #707070;
}

.scrollBtnWrap {
  display: flex;
  justify-content: center;
  height: 10%;
}
.scrollBtn__wrap {
  position: relative;
  width: 50%;
}
.scrollBtn {
  position: absolute;
  width: 94%;
  top: 50%;
  left: 50%;
  max-height: 45px;
  border-radius: 100px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.nextBtn {
  background: #c4a152;
  opacity: .6;
  transition: opacity 1s;
}
.nextBtn.selected {
  opacity: 1;
  cursor: pointer;
}
.backBtn {
  background: #bcbcbc;
  transition: opacity 1s;
  cursor: pointer;
}
.questionWindow_flower .scrollBtnWrap {
  /* position: absolute;
  width: 100%;
  bottom: 0;
  left: 50%;
  background: #fff;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); */
}
@media screen and (min-width: 750px) {
  .scrollBtnWrap {
    max-width: 600px;
    margin: 0 auto;
  }
}

/**
 * TOP(1)
 */
.topText {
  font-size: 13px;
  text-align: center;
  margin: 44px 0 16px;
  letter-spacing: 3px;
}
.startBtn {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
.logo {
  display: block;
  width: 172px;
  margin: 0 auto;
}
/**
 * 2
 */
.questionWindow__scroll_2 {
  min-height: 350px;
}
.secondTextBox__line {
  position: relative;
  width: 300px;
  padding: 2px;
  margin-top: 37px;
  border-top: 2px solid #b58a4f;
  border-bottom: 2px solid #b58a4f;
}
.secondTextBox__line::before {
  content: "";
  position: absolute;
  width: 2px;
  height: calc(100% + 4px);
  background: -webkit-linear-gradient(top, #b58a4f 0%,#e6c76f 20%,#d2af62 40%,#c29a57 60%,#b88e51 80%,#b58a4f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b58a4f 0%,#e6c76f 20%,#d2af62 40%,#c29a57 60%,#b88e51 80%,#b58a4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  top: 50%;
  left: 0%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.secondTextBox__line::after {
  content: "";
  position: absolute;
  width: 2px;
  height: calc(100% + 4px);
  background: -webkit-linear-gradient(top, #b58a4f 0%,#e6c76f 20%,#d2af62 40%,#c29a57 60%,#b88e51 80%,#b58a4f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b58a4f 0%,#e6c76f 20%,#d2af62 40%,#c29a57 60%,#b88e51 80%,#b58a4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  top: 50%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.secondTextBox {
  margin: 25px;
}
.secondTextBox__inner_large {
  margin: 25px 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.secondTextBox__border {
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%));
  background: linear-gradient(to right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%);
}
.secondTextBox__inner_small {
  margin: 25px 0;
  text-align: center;
  font-size: 10px;
}
.secondTextBox__inner_small p {
  margin: 4px 0;
}
.downBtn {
  margin: 0 auto;
  margin-top: 20px;
  display: block;
}
.textLarge {
  font-size: 27px;
}
.nextBtnCenter__wrap {
  padding: 10px 0;
}
.nextBtn_center {
  position: static;
  width: 180px;
  margin: 0 auto;
  display: block;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}
@media screen and (min-width: 750px) {
  .questionWindow__scroll_2 {
    min-height: 550px;
  }
}
/**
 * 三択
 */
.countImage {
  position: absolute;
  width: 25px;
  top: 10px;
  left: 24px;
}

.questionWindow__select {
  width: 100%;
  height: calc(100% - 14px);
}
.questionWrap {
  position: relative;
  width: 100%;
  height: 50%;
}
.questionText {
  position: absolute;
  font-size: 23px;
  text-align: center;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #302D2C;
}
.questionArrow {
  position: absolute;
  font-size: 23px;
  text-align: center;
  top: 70%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.answersWrap {
  display: flex;
  justify-content: space-between;
  height: 40%;
  background: -webkit-linear-gradient(top, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%);
  background: linear-gradient(to bottom, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%);
}
.answer {
  position: relative;
  width: calc((100% - 4px) / 3);
  height: calc(100% - 4px);
  margin-top: 2px;
  background: #ffffff;
  font-size: 16px;
  cursor: pointer;
}
.answerBtn {
  position: relative;
  height: calc(100% - 10px);
  margin: 5px;
  transition: color 1s;
}
.answerText {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #302D2C;
  transition: color 1s;
  letter-spacing: 2px;
}
.answerWrap {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #302D2C;
  transition: color 1s;
}
.answerText_low {
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  transition: color 1s;
  color: #302D2C
}

@media screen and (min-width: 750px) {
  .questionWrap {
    height: 45%;
  }
  .answersWrap {
    position: relative;
    display: block;
    max-width: 600px;
    margin: 0 auto;
  }
  .answer {
    position: absolute;
    width: calc((100% - 12px) / 3);
    height: calc(100% - 6px);
    margin-top: 3px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
  }
  .answer:first-child {
    left: calc(16.666% + 1.5px);
  }
  .answer:last-child {
    left: calc(83.333% - 0.5px);
  }
  .answersWrap {
    height: 45%;
  }
}

.questionHeader {
  height: 100px;
  padding: 20px 0;
  text-align: center;
}
.questionHeader__title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 16px;
  color: #302D2C;
  font-weight: bold;
  letter-spacing: 2px;
}
/* .questionHeader__tipsWrap {
  display: inline;
  padding: 12px 2px;
  border-radius: 20px;
  border-radius: 20px;
  background: -webkit-linear-gradient(right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%));
  background: linear-gradient(to right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%);
} */
.questionHeader__tipsInner {
  display: inline;
  /* padding: 10px 20px; */
  border-radius: 20px;
  background: #ffffff;
}
.questionHeader__tipsWrap {
  position: relative;
  height: 80px;
}
.questionHeader__tipsInner {
  position: absolute;
  width: 280px;
  height: 34px;
  top: 50%;
  left: 50%;
  border-radius: 20px;
  background: -webkit-linear-gradient(right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%));
  background: linear-gradient(to right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.questionHeader__tips {
  position: absolute;
  display: block;
  width: calc(100% - 4px);
  height: 30px;
  line-height: 30px;
  margin: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 13px;
  text-align: center;
  color: #302D2C;
  background: #fff;
  border-radius: 20px;
}
/* canvas上でもスクロールできるように要素をかぶせる */
/* #canvas-container {
  position: relative;
}
.canvasScrollWrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0);
  z-index: 1;
} */
@media screen and (min-width: 750px) {
  .questionHeader__title {
    font-size: 36px;
  }
  .questionHeader__title br {
    display: none;
  }
  .questionHeader__tipsInner {
    width: 460px;
    height: 40px;
  }
  .questionHeader__tips {
    height: 36px;
    line-height: 38px;
  }
  #canvas-container {
    background-size: contain;
    display: block;
    margin: 0 auto;
  }
}

.canvasScrollWrap {
  position: relative;
}
.ballResetBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  border-radius: 40px;
  font-size: 12px;
  line-height: 60px;
  letter-spacing: 1px;
  text-align: center;
  background: #fff;
  color: #c4a152;
  border: 3px solid #dcc798;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  z-index: 1;
}

@media screen and (min-width: 640px) {
  .ballResetBtn:hover {
    background: #dcc798;
    color: #fff;
  }
  .ballResetBtn {
    right: calc(50% - 310px);
  }
}

.twoSelectBtnWrap {
  width: 100%;
  height: calc(90% - 154px);
}
.twoSelectBtn {
  position: relative;
  width: 82%;
  height: calc((100% / 6) - 10px );
  margin: 0 auto;
  margin-bottom: 10px;
  border-radius: 3px;
  background: -webkit-linear-gradient(right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%));
  background: linear-gradient(to right, #b58a4f 0%,#e6c76f 50%,#b58a4f 100%);
  cursor: pointer;
}
.twoSelectBtn__inner {
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #fff;
  top: 2px;
  left: 2px;
  border-radius: 3px;
}
.twoSelectBtn__text {
  position: absolute;
  margin: 0;
  font-size: 16px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #302D2C;
  transition: color 1s;
}
@media screen and (min-width: 750px) {
  .questionHeader {
    height: 150px;
  }
  .twoSelectBtnWrap {
    height: calc(90% - 204px);
    margin: 0;
}
  .twoSelectBtn {
    max-width: 600px;
  }
}
.allSelectBtnWrapScroll {
  height: calc(90% - 154px);
}
.allSelectBtnWrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.allSelectBtn__inner {
  text-align: center;
}
.allSelectBtn {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.allSelectBtn_0 {
  width: 64px;
  height: 144px;
  top: calc(0% + 72px);
  left: calc(33% - 50px);
}
.allSelectBtn_1 {
  width: 80px;
  height: 167px;
  top: calc(3% + 84px);
  left: calc(67% + 50px);
}
.allSelectBtn_2 {
  width: 80px;
  height: 118px;
  top: 50%;
  left: calc(50%);
}
.allSelectBtn_3 {
  width: 112px;
  height: 120px;
  bottom: calc(0% - 60px);
  left: calc(33% - 45px);
}
.allSelectBtn_4 {
  width: 112px;
  height: 133px;
  bottom: calc(3% - 67px);
  left: calc(67% + 45px);
}

.allSelectBtn__text {
  text-align: center;
  color: #302D2C;
  font-size: 16px;
  white-space: nowrap;
}
.allSelectBtn__next {
  position: absolute;
  width: 132px;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 750px) {
  .allSelectBtnWrapScroll {
    height: calc(90% - 204px);
  }
  .allSelectBtnWrap {
    max-width: 700px;
    margin: 0 auto;
  }
  .allSelectBtn {
  }
  .allSelectBtn_0 {
    width: 80px;
    height: 187px;
    top: calc(0% + 98px);
    left: calc(12%);
  }
  .allSelectBtn_1 {
    width: 100px;
    height: 217px;
    top: calc(2% + 109px);
    left: calc(72%);
  }
  .allSelectBtn_2 {
    width: 106px;
    height: 150px;
    top: calc(50%);
    left: calc(50% - 20px);
  }
  .allSelectBtn_3 {
    width: 140px;
    height: 155px;
    bottom: calc(0% - 73px);
    left: calc(28%);
  }
  .allSelectBtn_4 {
    width: 140px;
    height: 174px;
    bottom: calc(2% - 70px);
    left: calc(88%);
  }
  .allSelectBtn__next {
    bottom: 10px;
  }
}

.questionHeader_flower {
  height: 50px;
}
.flowerSelectBtnWrapScroll {
  height: calc(90% - 104px);
}
.flowerSelectBtnWrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.flowerSelectBtn {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.flowerSelectBtn_0 {
  height: 55%;
  top: 0;
  left: 15%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.flowerSelectBtn_1 {
  height: 55%;
  top: 50%;
  left: 85%;
}
.flowerSelectBtn_2 {
  height: 55%;
  bottom: -15%;
  left: 30%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.flowerSelectBtn__img_bg {
  height: 100%;
}
.flowerSelectBtn__img_f {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.js-flowerSelectBtn__img_f_off {
  display: none;
}
.flowerSelectBtn__img_f_0 {
  height: 60%;
  top: 50%;
  left: 50%;
}
.flowerSelectBtn__img_f_1 {
  height: 60%;
  top: 45%;
  left: 44%;
}
.flowerSelectBtn__img_f_2 {
  height: 60%;
  top: 45%;
  left: 50%;
}
.flowerSelectBtn__img_text {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.js-flowerSelectBtn__img_text_off {
  display: none;
}
.flowerSelectBtn__img_text_0 {
  width: 45%;
  top: 50px;
  right: -40%;
}
.flowerSelectBtn__img_text_1 {
  width: 30%;
  top: 67%;
  left: 20%;
}
.flowerSelectBtn__img_text_2 {
  width: 30%;
  top: 40%;
  right: -25%;
}

@media screen and (orientation: landscape) {
  .flowerSelectBtn_0 {
    left: 30%;
  }
  .flowerSelectBtn_1 {
    left: 75%;
  }
  .flowerSelectBtn_2 {
    left: 40%;
  }
}

@media screen and (min-width: 750px) {
  .questionHeader_flower {
    height: 100px;
  }
  .flowerSelectBtnWrapScroll {
    height: calc(90% - 154px);
  }
  .flowerSelectBtnWrap {
    height: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
  .flowerSelectBtn_0 {
    height: 55%;
    top: 0;
    left: 5%;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  .flowerSelectBtn__img_f_0 {
    height: 60%;
    top: 50%;
    left: 45%;
  }
  .flowerSelectBtn_1 {
    height: 55%;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
  }
  .flowerSelectBtn__img_f_1 {
    left: 50%;
  }
  .flowerSelectBtn_2 {
    height: 55%;
    bottom: -15%;
    left: 45%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
}

.questionName {
  position: relative;
  width: 100%;
  height: calc(100% - 14px);
  text-align: center;
}
.questionName__imageWrap {
  position: relative;
  height: calc((100% - 60px) / 2);
}
.nameForm {
  position: relative;
  width: 300px;
  margin: 10px 0;
}
.nameForm__nameWrap {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}
.questionName__image {
  position: absolute;
  height: 60%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.nameForm__name {
  border: none;
  width: 280px;
  line-height: 23px;
  font-size: 16px;
  padding: 12px;
  font-family: 'Prata', 'Noto Serif JP', serif;
}
.questionWindow_form .scrollBtnWrap {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.resultBtn {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 73%;
  left: 50%;
  border-radius: 100px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.7);
  opacity: 0;
  transition: opacity 1s;
}
.resultBtn.nameSet {
  opacity: 1;
}
.resultBtn__text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #4a4a4a;
  cursor: pointer;
}

/* テキスト関連 */
@media screen and (min-width: 750px) {
  .logo {
    width: 250px;
  }
  .topText {
    font-size: 14px;
  }
  .startBtn {
    width: 180px;
  }

  .secondTextBox__line {
    width: 500px;
    padding: 3px;
    border-top: 3px solid #b58a4f;
    border-bottom: 3px solid #b58a4f;
  }
  .secondTextBox__line::before,
  .secondTextBox__line::after {
    width: 3px;
  }
  .secondTextBox__border {
    height: 3px;
  }
  .textLarge {
    font-size: 36px;
  }
  .secondTextBox__inner_large p {
    font-size: 20px;
  }
  .secondTextBox__inner_small p {
    font-size: 16px;
  }
  .downBtn {
    width: 48px;
  }

  .countImage {
    width: 41px;
  }
  .questionText {
    font-size: 32px;
  }
  .questionArrow {
    width: 48px;
  }
  .answerText {
    font-size: 20px;
  }
  .answerText_low {
    font-size: 20px;
  }

  .questionHeader__tips {
    font-size: 21px;
  }
  .twoSelectBtn__text {
    font-size: 24px;
  }

  .allSelectBtn__text {
    font-size: 20px;
  }
  .allSelectBtn__img {
    width: 32px;
  }
  .allSelectBtn_0 .allSelectBtn__imgIcon {
    width: 68px;
  }
  .allSelectBtn_1 .allSelectBtn__imgIcon {
    width: 80px;
  }
  .allSelectBtn_2 .allSelectBtn__imgIcon {
    width: 106px;
  }
  .allSelectBtn_3 .allSelectBtn__imgIcon {
    width: 56px;
  }
  .allSelectBtn_4 .allSelectBtn__imgIcon {
    width: 62px;
  }
  .allSelectBtn__next {
    width: 180px;
  }
}

/* result */
.resultWindow {
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  overflow-y: scroll;
}
.resultWindow__wrap {
  position: relative;
}
.resultWindow_top {
  width: 100%;
  height: 14px;
}
.resultWindow__bg {
  position: absolute;
  width: 33.5%;
  height: 100%;
}
.resultWindow__bg_left {
  left: 0;
  transform: translateX(0%);
  background-color: #F6F6F6;
}
.resultWindow__bg_center {
  left: 50%;
  transform: translateX(-50%);
  background-color: #DDBF77;
}
.resultWindow__bg_right {
  left: 100%;
  transform: translateX(-100%);
  background-color: #C882B3;
}
.resultImage__wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.resultImage {
  display: block;
  width: 70%;
  margin: 0 auto;
}
.resultTextImage {
  display: block;
  width: 28%;
  min-width: 200px;
  margin: 0 auto;
  padding: 47px 0;
}
.resultImage__wrap_clear {
  background-color: inherit;
}
.resultIdImage {
  position: relative;
  display: block;
  width: 84%;
  margin: 0 auto;
}
.resultName {
  position: relative;
  width: 266px;
  height: 42px;
  background: #ffffff;
  margin: 0 auto;
}
.resultName__value {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #5F5E5E;
  font-size: 22px;
  margin: 0;
  font-family: 'Prata', 'Noto Serif JP', serif;
}
.resultText {
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 80%;
  max-width: 600px;
  line-height: 1.5;
  letter-spacing: .5px;
}

.resultInfluencer {
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
}
.resultInfluencer__link {
  display: block;
  overflow: hidden;
}
.resultInfluencer__link:hover {
  opacity: .8;
}
.resultInfluencer__banner {
  width: 100%;
}

.resultSnsWrap {
  padding: 50px 0;
}
.resultSnsTitle {
  text-align: center;
  color: #59401B;
  margin-bottom: 20px;
  font-size: 18px;
}
.resultSns {
  display: flex;
  justify-content: space-around;
  width: 280px;
  margin: 0 auto;
}
.resultSnsButtom {
  width: 40px;
  height: 40px;
  background: #c4a152;
  border-radius: 20px;
}
.resultSnsLink {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.resultSnsIcon {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.buyItem {
  padding: 20px 0;
}
.buyItem__image {
  display: block;
  width: 30%;
  max-width: 200px;
  margin: 0 auto;
}
.buyItem__link {
  display: block;
  overflow: hidden;
}
.buyItem__btn {
  display: block;
  margin: 0 auto;
  width: 120px;
  min-width: 200px;
  margin-top: 10px;
}

@media screen and (min-width: 750px) {
  .resultImage {
    width: 28%;
  }
  .resultImage {
    width: 40%;
  }
  .buyItem__btn {
    width: 213px;
  }
}

.progressBar {
  position: absolute;
  display: none;
  top: 70%;
  left: 50%;
  width: 180px;
  height: 180px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
}
.progressbar-text {
  color: #fff;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-family: 'Prata', 'Noto Serif JP', serif;
}

/* ストアボタン */
.storeList {
  display: none;
  opacity: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  transition: opacity .5s;
}
.storeList.active {
  display: block;
  opacity: 1;
}
.storeList__inner {
  position: relative;
  height: 100%;
  background: #BD9B60;
  z-index: 2;
}
.storeList__header {
  position: relative;
  width: 100%;
  height: 45px;
  z-index: 1;
  background: #FFF;
}
.storeList__Title {
  color: #BD9B60;
  font-size: 16px;
  line-height: 45px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
}
.storeList__closeBtn {
  cursor: pointer;
}
.storeList__closeBtn_top {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 100%;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}
.storeList__closeBtnImg {
  width: 20px;
  height: 20px;
  padding: 10px;
}
.storeList__main {
  height: calc(100% - 115px);
}
.storeList__mainInner {
  overflow-y: scroll;
  height: 100%;
}
.storeList__buyHere {
  height: 90px;
}
.storeList__buyHereText {
  position: relative;
  width: 75%;
  margin: 0 auto;
  line-height: 90px;
  color: #fff;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
}
.storeList__buyHereIcon {
  position: absolute;
  width: 30px;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  left: -6px;
  top: calc(50% - 5px);
}
.storeList__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.storeList__item {
  width: 100%;
}
.storeList__itemLink {
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.storeList__itemLink:visited {
  color: #fff;
}
.storeList__itemLink:hover {
  opacity: .8;
}
.storeList__itemImage {
  width: 100%;
}
.storeList__itemImage_chubuyakuhin,
.storeList__itemImage_cosme,
.storeList__itemImage_meeco {
  width: 200px;
  margin: 0 auto;
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
}
.storeList__itemLink_meeco {
  width: 230px;
}
.storeList__footer {
  position: absolute;
  width: 100%;
  height: 68px;
  bottom: 0;
  border-top: 2px solid rgba(255,255,255,.5);
  background: #BD9B60;
}
.storeList__closeBtn_bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: bold;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
.storeList__closeBtn_bottom:before {
  content: "ー";
}
.storeList__bg {
  display: none;
}
.storeList__scroll_100vh {
  height: 100vh !important;
}
.storeList__scroll::-webkit-scrollbar {
  width: 5px;
  height: 12px;
}
.storeList__scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #bcbcbc;
}
.storeList__scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  border: 10px solid rgba(188, 188, 188, .3);
}
.storeList__scroll::-webkit-scrollbar-track-piece {
  width: 2px;
}

.customerContent {
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 90%;
  max-width: 600px;
  line-height: 1.5;
  letter-spacing: .5px;
  color: #59401B;
}
.thuruha {
  margin: 20px 0;
  font-size: 20px;
  text-align: center;
}
.thuruha__title {
  margin-bottom: 10px;
  font-size: 20px;
}
.thuruha__text {
  font-size: 16px;
}
.thuruha__text_tips {
  text-align: left;
  margin: 20px 0 0;
}
.thuruha__text_nortice {
  text-align: right;
  font-size: 14px;
  margin-bottom: 20px;
}
.thuruha__image {
  width: 180px;
  height: auto;
  margin: 10px 0;
}
.thuruha__image_fujiyakuhin {
  width: 280px;
}

.thuruha__arrow {
  position: relative;
  height: 50px;
}
.thuruha__arrow_down::before,
.thuruha__arrow_down::after {
  content: "";
  position: absolute;
  margin: auto;
  vertical-align: middle;
}
.thuruha__arrow_down::before {
  top: 0;
  bottom: 0;
  left: 0;
  left: 50%;
  width: 1px;
  height: 30px;
  background: #59401B;
}
.thuruha__arrow_down::after {
  top: 14px;
  bottom: 0;
  vertical-align: middle;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-top: 1px solid #59401B;
  border-right: 1px solid #59401B;
  -webkit-transform: rotate(45deg);
  transform: rotate(135deg);
}

.downloadPopup {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.6);
}
.downloadPopup__contentWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 400px;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.downloadPopup__image {
  width: 100%;
}
.downloadPopup__text {
  margin: 10px 0 0;
  color: #fff;
  text-align: center;
  font-size: 16px;
}
.downloadPopup__close {
  position: absolute;
  display: inline-block;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.downloadPopup__close span::before,
.downloadPopup__close span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 4%;
  margin: -8% 0 0 -42%;
  background: #FFF;
}
.downloadPopup__close span::before {
  transform: rotate(-45deg);
}
.downloadPopup__close span::after {
  transform: rotate(45deg);
}

.customerPopup {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.6);
}
.customerPopup__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 400px;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.customerPopup__close {
  position: absolute;
	display: inline-block;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.customerPopup__close span::before,
.customerPopup__close span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 4%;
  margin: -8% 0 0 -42%;
  background: #FFF;
}
.customerPopup__close span::before {
  transform: rotate(-45deg);
}
.customerPopup__close span::after {
  transform: rotate(45deg);
}

/* welcia */
.welcia__topImage {
  width: 100%;
}
.welcia__text {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
}
.welcia__tPointWrap {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}
.welcia__tPointImageWrap {
  width: 60px;
}
.welcia__tPointImage {
  width: 100%;
}
.welcia__tPointTextWrap {
  width: 210px;
  text-align: center;
}
.welcia__tPointText {
  margin: 0;
}
.welcia__tPointText_link {
  color: #b58a4f;
}
.welcia__tPointText {
  font-size: 20px;
  line-height: 36px;
}
.welcia__tPointText_center {
  text-align: center;
  margin: 10px 0;
}
.welcia__tPointText_atention {
  font-size: 16px;
  line-height: 26px;
}
.welcia__tPointText_large {
  font-size: 30px;
  line-height: 40px;
  font-weight: bold;
}
.welcia__logoWrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.welcia__logo {
  width: 25%;
  position: relative;
  height: 50px;
  margin-bottom: 20px;
}
.welcia__uniliverWrap {
  position: relative;
  width: 34%;
  height: 50px;
}
.welcia__uniliverInner {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.welcia__logo_welcia {
  width: 20%;
}
.welcia__logo_hac {
  width: 20%;
}
.welcia__logo_ducks {
  width: 28%;
}
.welcia__logo_happy {
  width: 32%;
}
.welcia__logo_marue {
  width: 8%;
}
.welcia__logo_kanemitsu {
  width: 26%;
}
.welcia__logo_yodoya {
  width: 32%;
}
.welcia__logo_and {

}
.welcia__logo_unilever {
  width: 32%;
}
.welcia__logo_text {
  font-size: 28px;
  font-family: sans-serif;
  font-weight: bold;
  color: #3c3c3c;
}

@media screen and (max-width: 620px) {
  .welcia__logo_text {
    font-size: 12px;
  }
  .welcia__logo {
    margin-bottom: 0px;
  }
}


.welcia__logo img,
.welcia__logo span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-height: 50px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.welcia__logoImage_marue {
  width: 50px;
}
.welcia__logoImage_unilever {
  width: 18%;
  margin: 0 5%;
}
.welcia__tipsInner {
  background: #fff;
  border: solid 5px #014099;
  border-radius: 20px;
}
.welcia__tipsWrap {
  width: 340px;
  background: #fff;
  padding: 5px;
  border-radius: 20px;
  margin: 0 auto;
  box-shadow: 3px 3px 0px 0px #014099;
}
.welcia__tipsInner {
  background: #fff;
  border: solid 5px #014099;
  border-radius: 20px;
}
.welcia__tipsTop {
  width: 100%;
  margin: 15px auto;
  display: flex;
  justify-content: center;
}
.welcia__tipsImage {
  width: 50px;
  height: 50px;
}
.welcia__tipsText {
  margin: 0 10px;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #014099;
  font-family: sans-serif;
  font-weight: bold;
}
.welcia__tipsBottom {
  width: calc(100% + 2px);
  margin: 0 -1px;
  background: #014099;
  border-radius: 0 0 10px 10px;
}
.welcia__tipsText_bottom {
  color: #FFF;
}
.welcia__tipsText_bottom {
  color: #FFF;
  font-size: 18px;
  line-height: 24px;
  padding: 10px 0 5px;
}
.welcia__lp {
  width: 100%;
}
@media screen and (max-width: 450px) {
  .welcia__tipsWrap {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .welcia__tipsInner {
    border: solid 3px #014099;
  }
  .welcia__tipsImage {
    width: 40px;
    height: 40px;
  }
  .welcia__tipsText {
    font-size: 16px;
    line-height: 23px;
  }
  .welcia__tipsText_bottom {
    font-size: 15px;
  }
  .welcia__text {
    font-size: 18px;
  }
  .welcia__tPointText_center {
    font-size: 17px;
  }
}

.storeList__list_thuruha {
  display: none;
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.storeList__itemText {
  height: 74px;
  line-height: 74px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  color: #fff;
}
.storeList__itemText_fuji {
  font-size: 16px;
}

@media screen and (orientation: landscape) {
  .storeList__inner {
    position: relative;
    overflow-y: scroll;
  }
  .storeList__main {
    height: auto;
  }
  .storeList__scroll_100vh .storeList__main {
    height: calc(100% - 115px) !important;
  }
  .storeList__mainInner {
    margin-bottom: 0;
  }
  .storeList__buyHere {
    height: 60px;
  }
  .storeList__buyHereText {
    line-height: 60px;
  }
  .storeList__itemImage {
    max-height: 85px;
  }
  .storeList__itemImage_chubuyakuhin {

  }
  .storeList__footer {
    position: relative;
  }
}

@media screen and (min-width: 750px) {
  .storeList__inner {
    position: absolute;
    overflow-y: inherit;
    width: 516px;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .storeList__buyHere {
    height: 60px;
  }
  .storeList__buyHereText {
    line-height: 60px;
  }
  .storeList__bg {
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: rgba(0,0,0,.7);
    transform: translate(-50%, -50%);
  }
}


@media screen and (orientation: landscape) {
  .questionWindow {
    overflow-y: scroll;
  }
  .questionWindow__scroll {
    min-height: 600px;
  }
  .questionName {
    min-height: 600px;
  }
  .questionWindow__scroll_1 {
    min-height: inherit;
  }
  .questionWindow__scroll_2 {
    min-height: 550px;
  }
  .questionWindow__scroll_6 {
    min-height: inherit;
  }
}
@media screen and (min-width: 750px) {
  .questionWindow__scroll_2 {
    min-height: 750px;
  }
}

/* ie対応 */
@media all and (-ms-high-contrast: none){
  .notSupport {
    display: block;
  }
  .questionWindow {
    display: none;
  }
  .resultWindow {
    display: none;
  }
  .questionContainer {
    height: 100vh;
  }
  .questionWindow__scroll {
    height: 100vh;
  }
}