@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");
body {
  overflow-x: hidden;
  margin: 0;
}

a {
  color: #0044cd;
  text-decoration: none;
  transition: 0.5s;
}

img {
  vertical-align: bottom;
}

.socialArea {
  margin-top: 0 !important;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spOnly {
  display: none;
}

/*======================
　　main
======================*/
.mainContents {
  padding: 0 !important;
}
.mainContents * {
  box-sizing: border-box;
}
.mainContents applet,
.mainContents object,
.mainContents iframe,
.mainContents h1,
.mainContents h2,
.mainContents h3,
.mainContents h4,
.mainContents h5,
.mainContents h6,
.mainContents p,
.mainContents blockquote,
.mainContents pre,
.mainContents a,
.mainContents abbr,
.mainContents acronym,
.mainContents address,
.mainContents big,
.mainContents cite,
.mainContents code,
.mainContents del,
.mainContents dfn,
.mainContents em,
.mainContents font,
.mainContents ins,
.mainContents kbd,
.mainContents q,
.mainContents s,
.mainContents samp,
.mainContents small,
.mainContents strike,
.mainContents sub,
.mainContents sup,
.mainContents tt,
.mainContents var,
.mainContents dl,
.mainContents dt,
.mainContents dd,
.mainContents ol,
.mainContents ul,
.mainContents li,
.mainContents fieldset,
.mainContents form,
.mainContents label,
.mainContents legend,
.mainContents table,
.mainContents caption,
.mainContents tbody,
.mainContents tfoot,
.mainContents thead,
.mainContents tr,
.mainContents th,
.mainContents td {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  color: #1c1c1c;
  line-height: 1.5;
  box-sizing: border-box;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8333vw;
  -webkit-font-smoothing: antialiased;
  /* Safari & Chrome (WebKit系) */
  -moz-osx-font-smoothing: grayscale;
  /* Firefox (macOS) */
  -webkit-text-size-adjust: 100%;
}
.mainContents svg {
  overflow: visible;
}
.mainContents .mvArea {
  position: relative;
  width: 100%;
  height: 37vw;
  z-index: 0;
}
.mainContents .mvArea .mvInner {
  width: 100%;
  height: 100%;
}
.mainContents .mvArea .mvInner .circleItem {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  opacity: 1;
  transition: 1s ease-in-out;
}
.mainContents .mvArea .mvInner .circleItem .item {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  opacity: 1;
  transition: 0.3s ease-in-out;
}
.mainContents .mvArea .mvInner .circleItem .item.\--01 {
  width: 42vw;
  height: 42vw;
  animation: rotation 70s linear infinite;
}
.mainContents .mvArea .mvInner .circleItem .item.\--02 {
  width: 58vw;
  height: 58vw;
  animation: rotation 70s linear reverse infinite;
}
.mainContents .mvArea .mvInner .circleItem .item.\--03 {
  width: 77vw;
  height: 77vw;
  animation: rotation 70s linear infinite;
}
.mainContents .mvArea .mvInner .circleItem .item img {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
}
.mainContents .logoItem {
  width: 20.63vw;
  position: absolute;
  top: 3.75vw;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}
.mainContents .logoItem h2 {
  text-align: center;
}
.mainContents .logoItem h2 img {
  width: 100%;
  height: auto;
}
.mainContents .mvLogoText {
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}
.mainContents .mvLogoText img {
  width: 100%;
}
.mainContents .mvBtn {
  width: 100%;
  margin: 15px auto 0 auto;
  z-index: 1;
}
.mainContents .mvBtn a {
  width: 100%;
  position: relative;
  display: block;
  background: #e70012;
  border-radius: 30px;
  padding: 0.7vw;
  text-align: center;
  transition: 0.5s;
  border: 2px solid #e70012;
  font-size: 0;
}
.mainContents .mvBtn a svg {
  width: 6.5vw;
  height: auto;
  fill: #fff;
  transition: 0.5s;
  vertical-align: baseline;
}
.mainContents .mvBtn a span {
  display: block;
  position: absolute;
  content: "";
  width: 0.8vw;
  height: 0.5vw;
  right: 1vw;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 0;
}
.mainContents .mvBtn a span svg {
  width: 100%;
  height: auto;
  fill: #fff;
  transition: 0.5s;
  vertical-align: super !important;
  font-size: 0;
}
.mainContents .mvBtn a:hover {
  background: #fff;
}
.mainContents .mvBtn a:hover * {
  fill: #e70012;
}
.mainContents .introArea {
  position: relative;
  width: 100%;
  background: #fff1e4;
  z-index: 1;
  padding: 8.333vw 0 4.166vw 0;
  background-image: url("/data/rouxmixmaker/img/introBgTop_pc.webp"), url("/data/rouxmixmaker/img/introBgBottom_pc.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom;
  background-size: 40vw, 100vw;
}
.mainContents .introArea h2 {
  width: 100%;
  margin-bottom: 4.166vw;
  text-align: center;
}
.mainContents .introArea h2 img {
  width: 25.8vw;
  height: auto;
}
.mainContents .introText {
  width: 100%;
  margin-bottom: 4.166vw;
  text-align: center;
  font-size: 0;
}
.mainContents .introText img {
  width: 50vw;
  height: auto;
}
.mainContents .ratio {
  width: 100%;
}
.mainContents .ratioImg {
  margin-bottom: 2.083vw;
  padding-right: 4.166vw;
  text-align: center;
  font-size: 0;
}
.mainContents .ratioImg img {
  width: 35vw;
  height: auto;
}
.mainContents .ratioText {
  margin-bottom: 2.083vw;
  text-align: center;
}
.mainContents .ratioText img {
  width: 30.67vw;
  height: auto;
}
.mainContents .houseBnr {
  width: 100%;
  text-align: center;
}
.mainContents .houseBnr img {
  width: 40vw;
  height: auto;
}
.mainContents .curryImgSlider {
  width: 100%;
  margin: 4.635vw 0 0 0;
  overflow: hidden;
  box-sizing: border-box;
}
.mainContents .curryImgSlider .swiper-slide {
  margin-right: 0;
  padding: 0;
}
.mainContents .curryImgSlider img {
  width: 95%;
  height: auto;
}
.mainContents .curryImgSlider .swiper-wrapper {
  transition-timing-function: linear;
}
.mainContents .sampleImgText {
  width: 100%;
  text-align: right;
  padding-right: 11.51vw;
  padding-top: 0.7812vw;
}
.mainContents .sampleImgText img {
  width: 6vw;
  height: auto;
}
.mainContents .story {
  width: 100%;
  padding: 5.989vw 0 9.375vw 0;
  background: url("/data/rouxmixmaker/img/storyBg_pc.webp") no-repeat center;
  background-size: cover;
}
.mainContents .story h3 {
  width: 100%;
  text-align: center;
  font-size: 0;
}
.mainContents .story h3 img {
  width: 33.33vw;
  height: auto;
}
.mainContents .story p {
  width: 100%;
  padding: 2.604vw 0;
  text-align: center;
  font-size: 0;
}
.mainContents .story p img {
  width: 22.34vw;
  height: auto;
}
.mainContents .videoWrap_box {
  width: 750px;
  margin: 0 auto;
}
.mainContents .videoWrap {
  width: 100%;
  padding-top: 56.233%;
  background: #000;
}
.mainContents .videoWrap frame {
  height: 100%;
}
.mainContents .tvcmVideo {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}
.mainContents .shindan {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  background: #ffe7d1 url("/data/rouxmixmaker/img/shindanBgBottom_pc.webp") no-repeat center bottom;
  background-size: contain;
  padding: 7.708vw 0;
}
.mainContents .shindanMain {
  position: relative;
  width: 51vw;
  margin: 0 auto;
  z-index: 1;
}
.mainContents .shindanMain h3 {
  width: 100%;
  text-align: center;
}
.mainContents .shindanMain h3 img {
  width: 33vw;
  height: auto;
}
.mainContents .shindanLogo {
  width: 100%;
  padding: 2.083vw 0;
  text-align: center;
  font-size: 0;
}
.mainContents .shindanLogo img {
  width: 20.62vw;
  height: auto;
}
.mainContents .shindanFormWrap {
  width: 100%;
  border: 3px solid #fff;
  border-radius: 0.7812vw;
}
.mainContents .shindanFormWrap h4 {
  display: block;
  width: 100%;
  text-align: center;
  background-image: linear-gradient(90deg, rgb(255, 200, 0), rgb(255, 120, 0) 20%, rgb(255, 110, 130));
  position: relative;
  width: 100%;
  font-size: 0;
  padding: 1.562vw;
  border-radius: 0.7812vw 0.7812vw 0 0;
}
.mainContents .shindanFormWrap h4::before {
  position: absolute;
  content: "";
  width: 36px;
  height: 32px;
  background: url("/data/rouxmixmaker/img/svg/shindanFormArrow.svg") no-repeat center top;
  background-size: cover;
  bottom: -29px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}
.mainContents .shindanFormWrap h4::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  background: #fff;
  left: 0;
  right: 0;
  bottom: 0;
}
.mainContents .shindanFormWrap h4 img {
  width: 38.33vw;
  height: auto;
}
.mainContents .shindanForm {
  background: rgba(255, 255, 255, 0.4);
  padding: 2vw 6vw 2.8vw 6vw;
}
.mainContents .shindanForm h4 {
  width: 100%;
  background: #ff7900;
  text-align: center;
  border-radius: 0.5208vw;
  padding: 0.7812vw;
  margin: 1.302vw 0;
  font-size: 0;
}
.mainContents .shindanForm h4 img {
  width: 23.33vw;
  height: auto;
  vertical-align: bottom;
}
.mainContents .shindanFormHeadImg {
  width: 100%;
  text-align: center;
}
.mainContents .shindanFormHeadImg img {
  width: 38.22vw;
  height: auto;
}
.mainContents .shindanList {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.mainContents .shindanList li {
  width: 100%;
  background: #fff;
  padding: 0.57vw 2.18vw;
  border-radius: 0.7812vw;
  margin-top: 1.302vw;
}
.mainContents .shindanText {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.5208vw;
  align-items: center;
}
.mainContents .shindanQ {
  width: 58%;
  padding-right: 2.03vw;
  min-height: 1.197vw;
}
.mainContents .shindanQ img {
  width: 100%;
  height: auto;
  min-height: 1.197vw;
}
.mainContents input,
.mainContents select {
  -webkit-appearance: none;
  appearance: none;
}
.mainContents .shindanRadio {
  width: 42%;
  border-left: 0.1562vw solid #e6e6e6;
  padding-left: 2.18vw;
}
.mainContents .shindanRadio p {
  margin: 0.4166vw 0;
  width: 100%;
}
.mainContents .shindanRadio p label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}
.mainContents .shindanRadio p label img {
  width: 90%;
  min-height: 0.8854vw;
  flex-shrink: 0;
}
.mainContents .shindanRadio p label input[type=radio] {
  display: inline-block !important;
  margin-right: 0.4166vw;
  position: relative;
  width: 0.7542vw;
  height: 0.7542vw;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
}
.mainContents .shindanRadio p label input[type=radio]:checked:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5583vw;
  height: 0.5583vw;
  border-radius: 50%;
  background: #ff7900;
}
.mainContents .sendBtn {
  width: 100%;
  margin: 2.604vw auto 0 auto;
}
.mainContents .sendBtn button {
  width: 20.31vw;
  display: block;
  padding: 0.677vw;
  border-radius: 1.562vw;
  background: #e70012;
  text-align: center;
  color: #fff;
  border: 0;
  transition: 0.5s;
  margin: 0 auto;
  cursor: pointer;
  font-size: 0;
}
.mainContents .sendBtn button svg {
  width: 11.04vw;
  height: auto;
  fill: #fff;
  transition: 0.5s;
}
.mainContents .sendBtn button:hover {
  background: #fff;
}
.mainContents .sendBtn button:hover svg {
  fill: #e70012;
}
.mainContents .circleBgLeft {
  position: absolute;
  content: "";
  width: 57vw;
  height: 57vw;
  top: -5.989vw;
  left: -34vw;
  z-index: 0;
}
.mainContents .circleBgRight {
  position: absolute;
  content: "";
  width: 40vw;
  height: 40vw;
  top: 30%;
  right: -20vw;
  z-index: 0;
}
.mainContents .shindanArea {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.mainContents .shindanArea .shindanInner {
  width: 100%;
  height: 100%;
}
.mainContents .shindanArea .shindanInner .circleItem {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  opacity: 1;
  transition: 1s ease-in-out;
}
.mainContents .shindanArea .shindanInner .circleItem .item {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  opacity: 1;
  transition: 0.3s ease-in-out;
}
.mainContents .shindanArea .shindanInner .circleItem .item.\--01 {
  max-width: 50%;
  height: 50%;
  animation: rotation 70s linear infinite;
}
.mainContents .shindanArea .shindanInner .circleItem .item.\--02 {
  max-width: 70%;
  height: 70%;
  animation: rotation 70s linear reverse infinite;
}
.mainContents .shindanArea .shindanInner .circleItem .item.\--03 {
  max-width: 93%;
  height: 93%;
  animation: rotation 70s linear infinite;
}
.mainContents .shindanArea .shindanInner .circleItem .item img {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
}
.mainContents #centerImg {
  width: 100%;
  height: 25.26vw;
  background: url("/data/rouxmixmaker/img/centerImg_pc.webp") no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 2;
}
.mainContents #popular {
  position: relative;
  width: 100%;
  background: #fff1e4;
  z-index: 1;
  padding: 8.333vw 0 9.895vw 0;
  background-image: url("/data/rouxmixmaker/img/popularBgTop.webp");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 51.19vw;
}
.mainContents #popular h3 {
  width: 100%;
  margin-bottom: 2.083vw;
  text-align: center;
  font-size: 0;
}
.mainContents #popular h3 img {
  width: 15.15vw;
  height: auto;
}
.mainContents .popularText1 {
  width: 100%;
  margin-bottom: 1.041vw;
  text-align: center;
  font-size: 0;
}
.mainContents .popularText1 img {
  width: 20.98vw;
  height: auto;
}
.mainContents .popularText2 {
  width: 100%;
  margin-bottom: 2.083vw;
  text-align: center;
  font-size: 0;
}
.mainContents .popularText2 img {
  width: 17.81vw;
  height: auto;
}
.mainContents .popularImg {
  width: 100%;
  text-align: center;
  opacity: 0;
  font-size: 0;
}
.mainContents .popularImg img {
  width: 55.52vw;
  height: auto;
  transition: 0.5s;
  transform: scale(0.7);
}
.mainContents .popularImgShow {
  opacity: 1;
  transition: opacity 0.5s;
}
.mainContents .popularImgShow img {
  transform: scale(1);
}
.mainContents #partner {
  position: relative;
  width: 100%;
  background-image: url("/data/rouxmixmaker/img/partnerBgBottom_pc.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  margin-top: -17.18vw;
  z-index: 1;
  padding: 15.46vw 0 100px 0;
}
.mainContents #partner h3 {
  width: 100%;
  text-align: center;
  margin-bottom: 1.041vw;
  font-size: 0;
}
.mainContents #partner h3 img {
  width: 31.35vw;
  height: auto;
}
.mainContents #partner p {
  width: 100%;
  text-align: center;
  margin-bottom: 2.083vw;
  font-size: 0;
}
.mainContents #partner p img {
  width: 25.36vw;
  height: auto;
}
.mainContents .partnerLogo {
  width: 100%;
  text-align: center;
  margin-bottom: 1.041vw;
  font-size: 0;
}
.mainContents .partnerLogo img {
  width: 52.29vw;
  height: auto;
}
.mainContents .partnerItem {
  width: 100%;
  text-align: center;
  margin-bottom: 3.125vw;
  font-size: 0;
}
.mainContents .partnerItem img {
  width: 100%;
  height: auto;
}
.mainContents .partnerBtn {
  width: 20.31vw;
  margin: 0.7812vw auto 0 auto;
  z-index: 1;
}
.mainContents .partnerBtn a {
  position: relative;
  display: block;
  background: #e70012;
  border-radius: 1.5625vw;
  padding: 0.677vw;
  text-align: center;
  transition: 0.5s;
  font-size: 0;
}
.mainContents .partnerBtn a svg {
  width: 7.5vw;
  height: auto;
  fill: #fff;
  transition: 0.5s;
  vertical-align: bottom;
  font-size: 0;
}
.mainContents .partnerBtn a span {
  display: block;
  position: absolute;
  content: "";
  width: 0.5144vw;
  height: 0.7957vw;
  right: 1.197vw;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 0;
}
.mainContents .partnerBtn a span svg {
  width: 100%;
  height: auto;
  fill: #fff;
  font-size: 0;
}
.mainContents .partnerBtn a:hover {
  background: #fff;
}
.mainContents .partnerBtn a:hover svg {
  fill: #e70012;
}
.mainContents .bnr {
  position: fixed;
  top: 40%;
  right: -8.229vw;
  z-index: 2;
  transform: translateY(-50%);
  transition: right 0.5s ease;
}
.mainContents .bnr ul {
  width: 8.229vw;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.mainContents .bnr ul li {
  width: 100%;
}
.mainContents .bnr ul li a {
  display: block;
}
.mainContents .bnr ul li a img {
  width: 100%;
  height: auto;
}
.mainContents .bnr ul li a:hover img {
  opacity: 1;
}
.mainContents .bnrPc {
  display: block;
}
.mainContents .bnrSp {
  display: none;
}
.mainContents .bnrShow {
  right: 0;
}
.mainContents dialog {
  background: #fff1e4;
  color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
  width: 46.87vw;
  max-height: 80svh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
}
.mainContents dialog div,
.mainContents dialog span {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  color: #1c1c1c;
  line-height: 1.5;
  box-sizing: border-box;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8333vw;
  -webkit-font-smoothing: antialiased;
  /* Safari & Chrome (WebKit系) */
  -moz-osx-font-smoothing: grayscale;
  /* Firefox (macOS) */
}
.mainContents dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease-in-out;
}
.mainContents dialog.show {
  opacity: 1;
  visibility: visible;
}
.mainContents dialog.show::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.mainContents .dialogCloseBtn {
  position: absolute;
  content: "";
  top: 20px;
  right: 30px;
  z-index: 3;
}
.mainContents .dialogCloseBtn button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.mainContents .dialogCloseBtn button img {
  width: 22px;
  height: 22px;
}
.mainContents .dialogInner {
  width: 100%;
  overflow: auto;
}
.mainContents #result {
  width: 100%;
  margin: 0 auto;
  background: #fff1e4;
}
.mainContents .reultInner {
  width: 100%;
}
.mainContents .resultCurry {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3.85414vw 3.8541vw 7.604vw 3.8541vw;
}
.mainContents .resultCurry h3 {
  width: 100%;
  background: #ff7900;
  text-align: center;
  border-radius: 0.5208vw;
  padding: 0.7812vw;
  font-size: 0;
}
.mainContents .resultCurry h3 img {
  width: 5.989vw;
  height: auto;
}
.mainContents .resultCurry ul {
  width: 90%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
  margin: 2.083vw auto 0 auto;
  list-style-type: none;
}
.mainContents .resultCurry ul li {
  width: 48%;
}
.mainContents .resultCurry ul li img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.mainContents .resultCurry ul li div {
  width: 100%;
  padding-top: 0.5208vw;
  text-align: center;
  font-size: 0.8333vw;
}
.mainContents #rate {
  width: 100%;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.385vw;
  text-align: center;
  letter-spacing: 1.5rem;
  text-indent: 1.5rem;
}
.mainContents .resultMain {
  width: 100%;
  background-image: linear-gradient(180deg, rgba(255, 231, 208, 0) 15%, rgb(255, 231, 208) 15%);
  position: relative;
  z-index: 0;
  padding-bottom: 4.166vw;
}
.mainContents .resultMain h3 {
  width: 100%;
  text-align: center;
  margin-bottom: 2.604vw;
  position: relative;
  z-index: 1;
}
.mainContents .resultMain h3 img {
  width: 33.85vw;
  height: auto;
}
.mainContents .resultMain::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url("/data/rouxmixmaker/img/resultTop_pc.webp") no-repeat top center;
  background-size: contain;
  margin-top: -11.97vw;
  top: 0;
  z-index: -1;
}
.mainContents .resultMain::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url("/data/rouxmixmaker/img/resultBottom_pc.webp") no-repeat bottom center;
  background-size: contain;
  bottom: 0;
  z-index: -1;
}
.mainContents #lead {
  width: 100%;
  font-size: 1.458vw;
  text-align: center;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: keep-all;
  padding: 0 3.854vw;
}
.mainContents #description {
  width: 100%;
  font-size: 0.9375vw;
  text-align: center;
  padding: 2.604vw 3.854vw 0 3.854vw;
  line-height: 2.5;
  white-space: pre-wrap;
  word-break: keep-all;
}
.mainContents .chartImg {
  width: 100%;
  text-align: center;
  font-size: 0;
}
.mainContents .chartImg img {
  width: 23.94vw;
  height: auto;
}
.mainContents .shareBtn {
  width: 100%;
  margin: 0 0 4.166vw 0;
}
.mainContents .shareBtn a {
  display: block;
  text-align: center;
  transition: 0s !important;
}
.mainContents .shareBtn a img {
  width: 23.22vw;
}
.mainContents .resultPartnerText {
  width: 100%;
  text-align: center;
  margin-bottom: 2.083vw;
}
.mainContents .resultPartnerText img {
  width: 22.18vw;
  height: auto;
}
.mainContents .resultPartner {
  width: 90%;
  margin: 0 auto 4.166vw auto;
  background: #fff;
  border-radius: 1.562vw;
  padding: 0;
}
.mainContents .resultPartnerPc img {
  width: 100%;
  height: auto;
}
.mainContents .resultPartnerSp {
  display: none;
}
.mainContents .resultWater {
  width: 90%;
  margin: 0 auto 1.041vw auto;
  background: #fff;
  border-radius: 1.562vw;
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mainContents .resultWater h4 {
  width: 32%;
  padding-right: 5%;
  text-align: center;
  font-size: 0;
}
.mainContents .resultWater h4 img {
  width: 10.78vw;
  height: auto;
}
.mainContents .resultWaterMain {
  width: 68%;
  padding-left: 5%;
  border-left: 0.1562vw solid #e6e6e6;
}
.mainContents .resultWaterMain p {
  font-size: 0.5208vw;
  font-weight: 600;
  padding-bottom: 0.2604vw;
}
.mainContents .resultWaterText span {
  font-size: 0.625vw;
  font-weight: 600;
}
.mainContents .resultWaterText span br {
  display: none;
}
.mainContents .resultWaterSubText {
  width: 87%;
  margin: 0 auto 4.166vw auto;
  list-style-type: none;
  padding: 0;
}
.mainContents .resultWaterSubText li {
  position: relative;
  padding-left: 0.6927vw;
  font-size: 0.6927vw;
  padding-bottom: 0.5208vw;
}
.mainContents .resultWaterSubText li::before {
  position: absolute;
  content: "・";
  left: 0;
}
.mainContents .resultWaterSubText li .resultWaterSubText1 {
  color: #e60012;
  font-weight: 900;
  display: block;
  font-size: 0.6927vw;
}
.mainContents .resultWaterSubText li .resultWaterSubText2 {
  display: block;
  font-size: 0.6927vw;
}
.mainContents .resultProductHead {
  width: 100%;
  text-align: center;
  margin-bottom: 2.083vw;
}
.mainContents .resultProductHead img {
  width: 18.54vw;
  height: auto;
}
.mainContents .resultProduct {
  width: 90%;
  margin: 0 auto;
  background: #fff;
  border-radius: 1.562vw;
  padding: 5%;
}
.mainContents .resultProduct ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.mainContents .resultProduct ul li {
  width: 48%;
  text-align: center;
}
.mainContents .resultProduct ul li p {
  width: 100%;
}
.mainContents .resultProduct ul li p img {
  width: 100%;
  height: auto;
}
.mainContents .resultProduct ul li div {
  text-align: center;
  padding: 0.5208vw 0;
}
.mainContents .resultProduct ul li div br {
  display: none;
}
.mainContents .resultProduct ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  color: #0044cd;
  text-decoration: underline;
  transition: 0s !important;
  font-size: 0.7812vw;
  font-weight: 700;
}
.mainContents .resultProduct ul li a:visited {
  color: #0044cd;
}
.mainContents .resultProduct ul li a span {
  display: block;
  padding-left: 5px;
  font-size: 0;
}
.mainContents .resultProduct ul li a span img {
  width: 0.7291vw;
  height: auto;
}
.mainContents .closeBtnBottom {
  width: 100%;
  text-align: center;
  padding-top: 3.541vw;
}
.mainContents .dialog-close {
  width: 7.916vw;
  background: #fff;
  border-radius: 1.562vw;
  padding: 0.5208vw;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: 0;
}
.mainContents .dialog-close svg {
  width: 2.395vw;
  height: auto;
  fill: #000;
  cursor: pointer;
}

@media screen and (max-width: 1335px) {
  .mainContents .vjs-big-play-button .vjs-icon-placeholder::before {
    font-size: 55px;
  }
}
@media screen and (max-width: 1920px) {
  .mainContents .introArea {
    position: relative;
    width: 100%;
    background: #fff1e4;
    z-index: 1;
    padding: 160px 0 80px 0;
    background-image: url("/data/rouxmixmaker/img/introBgTop_pc2.webp"), url("/data/rouxmixmaker/img/introBgBottom_pc.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: top center, center bottom;
    background-size: 1920px auto, 1920px auto;
  }
  .mainContents .introArea h2 {
    margin-bottom: 74px;
  }
  .mainContents .introArea h2 img {
    width: 496px;
  }
  .mainContents .introText {
    margin-bottom: 80px;
  }
  .mainContents .introText img {
    width: 964px;
  }
  .mainContents .ratioImg {
    margin-bottom: 40px;
    padding-right: 80px;
  }
  .mainContents .ratioImg img {
    width: 659px;
  }
  .mainContents .ratioText {
    margin-bottom: 40px;
  }
  .mainContents .ratioText img {
    width: 589px;
  }
  .mainContents .houseBnr img {
    width: 754px;
  }
  .mainContents .curryImgSlider {
    width: 1920px;
    height: 177px;
    margin: 80px 0 0 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .mainContents .sampleImgText {
    padding-top: 15px;
    padding-right: 5%;
  }
  .mainContents .sampleImgText img {
    width: 117px;
  }
  .mainContents .story {
    width: 100%;
    padding: 115px 0 180px 0;
    background: url("/data/rouxmixmaker/img/storyBg_pc.webp") no-repeat center;
    background-size: 1920px auto;
  }
  .mainContents .story h3 img {
    width: 640px;
  }
  .mainContents .story p {
    padding: 50px 0;
  }
  .mainContents .story p img {
    width: 429px;
  }
  .mainContents .shindan {
    height: 2160px;
    position: relative;
    overflow: hidden;
    background: #ffe7d1 url("/data/rouxmixmaker/img/shindanBgBottom_pc.webp") no-repeat center bottom;
    background-size: contain;
    padding: 148px 0;
  }
  .mainContents .shindanWrap {
    width: 1920px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .mainContents .shindanMain {
    width: 980px;
  }
  .mainContents .shindanMain h3 img {
    width: 632px;
  }
  .mainContents .shindanLogo {
    padding: 40px 0;
  }
  .mainContents .shindanLogo img {
    width: 396px;
  }
  .mainContents .shindanFormWrap {
    border-radius: 15px;
  }
  .mainContents .shindanFormWrap h4 {
    padding: 30px;
    border-radius: 15px 15px 0 0;
  }
  .mainContents .shindanFormWrap h4 img {
    width: 736px;
  }
  .mainContents .shindanForm {
    padding: 40px 115px 55px 115px;
  }
  .mainContents .shindanForm h4 {
    border-radius: 10px;
    padding: 15px;
    margin: 25px 0;
  }
  .mainContents .shindanForm h4 img {
    width: 448px;
    height: auto;
  }
  .mainContents .shindanFormHeadImg img {
    width: 734px;
  }
  .mainContents .shindanList li {
    padding: 11px 42px;
    border-radius: 15px;
    margin-top: 25px;
  }
  .mainContents .shindanText {
    padding: 10px;
  }
  .mainContents .shindanQ {
    padding-right: 39px;
    min-height: 23px;
  }
  .mainContents .shindanQ img {
    width: 100%;
    min-height: 23px;
  }
  .mainContents .shindanRadio {
    border-left: 3px solid #e6e6e6;
    padding-left: 42px;
  }
  .mainContents .shindanRadio p {
    margin: 8px 0;
  }
  .mainContents .shindanRadio p label img {
    min-height: 17px;
    flex-shrink: 0;
  }
  .mainContents .shindanRadio p label input[type=radio] {
    display: inline-block !important;
    margin-right: 8px;
    position: relative;
    width: 14.4824px;
    height: 14.4824px;
    border: 1px solid #000;
    border-radius: 50%;
    vertical-align: -2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
  }
  .mainContents .shindanRadio p label input[type=radio]:checked:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10.7209px;
    height: 10.7209px;
    border-radius: 50%;
    background: #ff7900;
  }
  .mainContents .sendBtn {
    margin: 50px auto 0 auto;
  }
  .mainContents .sendBtn button {
    width: 390px;
    padding: 13px;
    border-radius: 30px;
  }
  .mainContents .sendBtn button svg {
    width: 212px;
  }
  .mainContents .circleBgLeft {
    position: absolute;
    content: "";
    width: 1095.5352px;
    height: 1095.5352px;
    top: -158px;
    left: -673px;
    z-index: 0;
  }
  .mainContents .circleBgRight {
    position: absolute;
    content: "";
    width: 766.4739px;
    height: 766.4739px;
    top: 624px;
    right: -350px;
    z-index: 0;
  }
  .mainContents #centerImg {
    height: 485px;
    background: url("/data/rouxmixmaker/img/centerImg_pc.webp") no-repeat center;
    background-size: 1920px auto;
    position: relative;
  }
  .mainContents #popular {
    position: relative;
    padding: 165px 0 190px 0;
    background-image: url("/data/rouxmixmaker/img/popularBgTop2.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px auto;
  }
  .mainContents #popular h3 {
    margin-bottom: 40px;
  }
  .mainContents #popular h3 img {
    width: 291px;
  }
  .mainContents .popularText1 {
    margin-bottom: 20px;
  }
  .mainContents .popularText1 img {
    width: 403px;
  }
  .mainContents .popularText2 {
    margin-bottom: 40px;
  }
  .mainContents .popularText2 img {
    width: 342px;
  }
  .mainContents .popularImg {
    padding: 0 5%;
  }
  .mainContents .popularImg img {
    width: 100%;
    max-width: 1066px;
  }
  .mainContents .popularImgShow {
    opacity: 1;
    transition: opacity 0.5s;
  }
  .mainContents .popularImgShow img {
    transform: scale(1);
  }
  .mainContents #partner {
    position: relative;
    background-image: url("/data/rouxmixmaker/img/partnerBgBottom_pc.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px auto;
    margin-top: -330px;
    padding: 297px 0 100px 0;
  }
  .mainContents #partner h3 {
    margin-bottom: 20px;
  }
  .mainContents #partner h3 img {
    width: 602px;
  }
  .mainContents #partner p {
    margin-bottom: 40px;
  }
  .mainContents #partner p img {
    width: 487px;
  }
  .mainContents .partnerLogo {
    margin-bottom: 20px;
    padding: 0 5%;
  }
  .mainContents .partnerLogo img {
    width: 100%;
    max-width: 1004px;
  }
  .mainContents .partnerItem {
    margin-bottom: 60px;
  }
  .mainContents .partnerBtn {
    width: 100%;
    max-width: 390px;
    margin: 15px auto 0 auto;
  }
  .mainContents .partnerBtn a {
    position: relative;
    border-radius: 30px;
    padding: 13px;
  }
  .mainContents .partnerBtn a svg {
    width: 144px;
  }
  .mainContents .partnerBtn a span {
    display: block;
    position: absolute;
    content: "";
    width: 9.8767px;
    height: 15.2786px;
    right: 23px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .mainContents .bnr {
    position: fixed;
    top: 40%;
    right: -300px;
    z-index: 2;
    transform: translateY(-50%);
    transition: right 0.5s ease;
  }
  .mainContents .bnr ul {
    width: 158px;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .mainContents .bnr ul li {
    width: 100%;
  }
  .mainContents .bnr ul li a {
    display: block;
  }
  .mainContents .bnr ul li a img {
    width: 100%;
    height: auto;
  }
  .mainContents .bnrPc {
    display: block;
  }
  .mainContents .bnrSp {
    display: none;
  }
  .mainContents .bnrShow {
    right: 0;
  }
  .mainContents dialog {
    opacity: 0;
    width: 100%;
    max-width: 900px;
    max-height: 80svh;
  }
  .mainContents dialog div,
  .mainContents dialog span {
    font-size: 16px;
  }
  .mainContents dialog.show {
    opacity: 1;
    visibility: visible;
  }
  .mainContents dialog.show::backdrop {
    background: rgba(0, 0, 0, 0.4);
  }
  .mainContents .resultCurry {
    position: relative;
    padding: 74px 74px 146px 74px;
  }
  .mainContents .resultCurry h3 {
    border-radius: 10px;
    padding: 15px;
  }
  .mainContents .resultCurry h3 img {
    width: 115px;
  }
  .mainContents .resultCurry ul {
    margin: 40px auto 0 auto;
  }
  .mainContents .resultCurry ul li div {
    padding-top: 10px;
    font-size: 16px;
  }
  .mainContents #rate {
    width: 100%;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 65px;
    text-align: center;
    letter-spacing: 1.5rem;
    text-indent: 1.5rem;
  }
  .mainContents .resultMain {
    padding-bottom: 80px;
  }
  .mainContents .resultMain h3 {
    margin-bottom: 50px;
  }
  .mainContents .resultMain h3 img {
    width: 650px;
  }
  .mainContents .resultMain::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("/data/rouxmixmaker/img/resultTop_pc.webp") no-repeat top center;
    background-size: contain;
    margin-top: -230px;
    top: 0;
    z-index: -1;
  }
  .mainContents #lead {
    font-size: 28px;
    padding: 0 74px;
  }
  .mainContents #description {
    font-size: 18px;
    padding: 50px 74px 0 74px;
  }
  .mainContents .chartImg img {
    width: 459.8323px;
  }
  .mainContents .shareBtn {
    width: 100%;
    margin: 0 0 80px 0;
  }
  .mainContents .shareBtn a {
    display: block;
    text-align: center;
  }
  .mainContents .shareBtn a img {
    width: 446px;
  }
  .mainContents .resultPartnerText {
    margin-bottom: 40px;
  }
  .mainContents .resultPartnerText img {
    width: 426px;
  }
  .mainContents .resultPartner {
    margin: 0 auto 68px auto;
    border-radius: 30px;
  }
  .mainContents .resultWater {
    margin: 0 auto 20px auto;
    border-radius: 30px;
  }
  .mainContents .resultWater h4 img {
    width: 207px;
    height: auto;
  }
  .mainContents .resultWaterMain {
    border-left: 3px solid #e6e6e6;
  }
  .mainContents .resultWaterMain p {
    font-size: 10px;
    padding-bottom: 5px;
  }
  .mainContents .resultWaterText span {
    font-size: 12px;
  }
  .mainContents .resultWaterSubText {
    width: 87%;
    margin: 0 auto 80px auto;
  }
  .mainContents .resultWaterSubText li {
    position: relative;
    padding-left: 13.3px;
    font-size: 13.3px;
    padding-bottom: 10px;
  }
  .mainContents .resultWaterSubText li .resultWaterSubText1 {
    font-size: 13.3px;
  }
  .mainContents .resultWaterSubText li .resultWaterSubText2 {
    font-size: 13.3px;
    display: block;
  }
  .mainContents .resultProductHead {
    margin-bottom: 40px;
  }
  .mainContents .resultProductHead img {
    width: 356px;
  }
  .mainContents .resultProduct {
    border-radius: 30px;
  }
  .mainContents .resultProduct ul li div {
    padding: 10px 0;
  }
  .mainContents .resultProduct ul li a {
    font-size: 15px;
  }
  .mainContents .resultProduct ul li a span img {
    width: 14px;
    height: auto;
  }
  .mainContents .closeBtnBottom {
    padding-top: 68px;
  }
  .mainContents .dialog-close {
    width: 152px;
    background: #fff;
    border-radius: 30px;
    padding: 10px;
  }
  .mainContents .dialog-close svg {
    width: 46px;
  }
}
@media screen and (max-width: 1200px) {
  .mainContents #partner {
    position: relative;
    background: #ffe7d1 url("/data/rouxmixmaker/img/partnerBgBottom_tb2.webp");
    background-image: none;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 1920px auto;
    margin-top: 0;
    padding: 0 0 100px 0;
  }
  .mainContents #partner::before {
    position: absolute;
    width: 100%;
    height: 322px;
    content: "";
    top: -320px;
    left: 0;
    right: 0;
    background-image: url("/data/rouxmixmaker/img/partnerBgBottom_tb.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px auto;
  }
}
/*===============================================
●tablet.css  画面の横幅が1024px〜768pxまで
===============================================*/
@media screen and (max-width: 1024px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
  img {
    max-width: 100%;
    width: 100%;
    height: auto;
    width: auto;
  }
  /*======================
  　　main
  ======================*/
  .mainContents .mvArea {
    width: 100vw;
    height: 60vw;
    overflow: hidden;
  }
  .mainContents .mvArea .circleItem {
    transform: scale(1.1);
  }
  .mainContents .logoItem {
    top: 14.5vw;
  }
  .mainContents .mvBtn a {
    padding: 5px;
  }
  .mainContents .introText {
    padding: 0 15px;
  }
  .mainContents .introText img {
    width: 100%;
    max-width: 964px;
  }
}
@media screen and (max-width: 1000px) {
  .mainContents .shindan {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
  }
  .mainContents .shindanMain {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .mainContents .shindanForm {
    border-radius: 0;
  }
  .mainContents dialog {
    width: 95%;
  }
}
/*===============================================
●tablet.css  tablet横向き
===============================================*/
/*===============================================
●sp.css  画面の横幅が750px〜0pxまで
===============================================*/
@media screen and (max-width: 750px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
  .spOnly {
    display: block;
  }
  /*======================
  　　main
  ======================*/
  .mainContents .mvArea {
    height: 164vw;
  }
  .mainContents .mvInner {
    position: relative;
    top: -10vw !important;
  }
  .mainContents .mvInner .circleItem {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(2.25);
  }
  .mainContents .logoItem {
    top: 51vw;
    width: 85%;
    height: auto;
    margin: 0 auto;
  }
  .mainContents .logoItem h2 img {
    width: 43.7vw;
  }
  .mainContents .mvLogoText {
    width: 64.2vw;
    margin: 0 auto 10px auto;
  }
  .mainContents .mvBtn {
    margin-top: 35vw;
  }
  .mainContents .mvBtn a {
    width: 84vw;
    padding: 4.8vw;
  }
  .mainContents .mvBtn a svg {
    width: 27vw;
  }
  .mainContents .mvBtn a span {
    width: 3.2vw;
    height: 2.1vw;
    right: 5.3vw;
  }
  .mainContents .introArea {
    padding: 26.13vw 0 0 0;
    background-image: url("/data/rouxmixmaker/img/introBgTop_sp.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100vw;
  }
  .mainContents .introArea h2 {
    width: 100%;
    margin-bottom: 14.93vw;
    text-align: center;
  }
  .mainContents .introArea h2 img {
    width: 84.56vw;
  }
  .mainContents .introSpWrap {
    width: 100%;
    padding: 0 0 11.2vw 0;
    background-color: #ffe7d0;
    background-image: url("/data/rouxmixmaker/img/introBgBottom_sp2.webp");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 750px auto;
  }
  .mainContents .introText {
    background: url("/data/rouxmixmaker/img/introBgBottom_sp1.webp") no-repeat bottom center;
    background-size: 100vw;
    margin-bottom: 0;
    padding-bottom: 17.6vw;
  }
  .mainContents .introText img {
    width: 84.46vw;
  }
  .mainContents .ratio {
    background-image: linear-gradient(180deg, rgb(255, 231, 208) 34%, rgba(255, 255, 255, 0) 77%);
    padding-top: 2.7vw;
  }
  .mainContents .ratioImg {
    margin-bottom: 14.13vw;
    padding-right: 0;
  }
  .mainContents .ratioImg img {
    width: 83.84vw;
  }
  .mainContents .ratioText {
    margin-bottom: 14.13vw;
  }
  .mainContents .ratioText img {
    width: 83.96vw;
  }
  .mainContents .houseBnr img {
    width: 92vw;
  }
  .mainContents .curryImgSlider {
    margin: 10.66vw 0 0 0;
    transform: scale(0.7);
    transform-origin: left;
  }
  .mainContents .sampleImgText {
    position: relative;
    top: -15px;
    padding-top: 0;
    font-size: 0;
  }
  .mainContents .sampleImgText img {
    width: 23.31vw;
  }
  .mainContents .story {
    padding: 26.66vw 0;
    background: url("/data/rouxmixmaker/img/storyBg_sp.webp") no-repeat center;
    background-size: cover;
  }
  .mainContents .story h3 img {
    width: 86.94vw;
  }
  .mainContents .story p {
    padding: 40px 0;
  }
  .mainContents .story p img {
    width: 86.11vw;
  }
  .mainContents .videoWrap_box {
    max-width: 92vw;
  }
  .mainContents .videoWrap .video-js {
    width: 92.2459893048vw;
    height: 51.6042780749vw;
    margin: 0 auto;
  }
  .mainContents .circleBgLeft,
  .mainContents .circleBgRight {
    display: none;
  }
  .mainContents .shindan {
    height: auto;
    background-image: url("/data/rouxmixmaker/img/shindanBgTop_sp.webp"), url("/data/rouxmixmaker/img/shindanBgBottom_sp.webp");
    background-color: #ffe7d1;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: 100vw, 750px auto;
    padding: 26.66vw 0 0 0;
    overflow: auto;
  }
  .mainContents .shindanWrap {
    width: 100%;
    position: relative;
    left: 0;
    transform: translateX(0);
  }
  .mainContents .shindanMain {
    position: relative;
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
  .mainContents .shindanMain h3 img {
    width: 83.62vw;
  }
  .mainContents .shindanLogo {
    position: relative;
    z-index: 1;
    padding: 5.333vw 0 0 0;
  }
  .mainContents .shindanLogo img {
    width: 48.83vw;
  }
  .mainContents .shindanFormWrap {
    position: relative;
    border-radius: 0;
    border-top: 3px solid #fff;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin-top: -6vw;
  }
  .mainContents .shindanFormWrap h4 {
    border-radius: 0;
    padding: 8vw;
  }
  .mainContents .shindanFormWrap h4 img {
    width: 86.35vw;
  }
  .mainContents .shindanForm {
    z-index: 0;
    padding: 8vw 4vw 26.66vw 4vw;
  }
  .mainContents .shindanForm h4 {
    margin: 2.666vw 0 6.133vw 0;
    padding: 2.666vw;
    border-radius: 1.333vw;
  }
  .mainContents .shindanForm h4 img {
    width: 52.96vw;
  }
  .mainContents .shindanFormHeadImg img {
    width: 73.62vw;
  }
  .mainContents .shindanList li {
    padding: 3.733vw;
    border-radius: 1.333vw;
    margin-top: 3.733vw;
  }
  .mainContents .shindanText {
    padding: 0;
  }
  .mainContents .shindanQ {
    width: 100%;
    padding: 0 4.8vw 2.666vw 4.8vw;
  }
  .mainContents .shindanQ img {
    width: 100%;
  }
  .mainContents .shindanRadio {
    width: 100%;
    border-left: none;
    border-top: 0.2666vw solid #e6e6e6;
    padding-left: 4.7vw;
  }
  .mainContents .shindanRadio p {
    margin: 4vw 0;
    width: 100%;
  }
  .mainContents .shindanRadio p label img {
    width: 65%;
  }
  .mainContents .shindanRadio p label input[type=radio] {
    margin: 0 4.5vw 0 0;
    width: 3.634vw;
    height: 3.634vw;
  }
  .mainContents .shindanRadio p label input[type=radio]:checked:before {
    width: 2.666vw;
    height: 2.666vw;
  }
  .mainContents .sendBtn button {
    width: 84vw;
  }
  .mainContents .sendBtn button svg {
    width: 46.23vw;
  }
  .mainContents #centerImg {
    height: 82.13vw;
    background: url("/data/rouxmixmaker/img/centerImg_sp.webp") no-repeat center;
    background-size: cover;
  }
  .mainContents #popular {
    position: relative;
    z-index: 0;
    padding: 26.66vw 0 24vw 0;
    background-image: url("/data/rouxmixmaker/img/popularBgTop.webp");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 78vw;
  }
  .mainContents #popular h3 {
    margin-bottom: 9.333vw;
  }
  .mainContents #popular h3 img {
    width: 53.35vw;
  }
  .mainContents .popularText1 {
    margin-bottom: 5.333vw;
  }
  .mainContents .popularText1 img {
    width: 75.2vw;
  }
  .mainContents .popularText2 img {
    width: 68.46vw;
  }
  .mainContents .popularImg {
    padding: 0;
    margin: 0 auto;
  }
  .mainContents .popularImg img {
    width: 96.04vw;
  }
  .mainContents #partner {
    position: relative;
    background: #ffe7d0 url("/data/rouxmixmaker/img/partnerBgBottom_sp.webp") no-repeat bottom center;
    background-size: 750px auto;
    z-index: 1;
    margin: 0;
    padding: 9.9vw 0 26.7vw 0;
  }
  .mainContents #partner::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 18vw;
    background: url("/data/rouxmixmaker/img/partnerBgTop_sp.webp") no-repeat top center;
    background-size: contain;
    top: 0;
    margin-top: -17vw;
    z-index: 1;
  }
  .mainContents #partner h3 img {
    width: 88.58vw;
  }
  .mainContents #partner p {
    margin-bottom: 12vw;
  }
  .mainContents #partner p img {
    width: 73.03vw;
  }
  .mainContents .partnerLogo {
    margin-bottom: 12vw;
  }
  .mainContents .partnerLogo img {
    width: 64vw;
  }
  .mainContents .partnerBtn {
    width: 84vw;
  }
  .mainContents .partnerBtn a {
    padding: 4.27vw;
    border-radius: 8vw;
  }
  .mainContents .partnerBtn a span {
    display: block;
    position: absolute;
    content: "";
    width: 2.8vw;
    height: 4.3vw;
    right: 23px;
    top: 0.15vw;
    bottom: 0;
    margin: auto;
    font-size: 0;
  }
  .mainContents .bnr {
    position: fixed;
    top: auto;
    bottom: -300px;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateX(0);
    z-index: 2;
    transition: bottom 0.5s ease;
  }
  .mainContents .bnr ul {
    width: 100%;
  }
  .mainContents .bnr ul li a {
    display: block;
    text-align: center;
  }
  .mainContents .bnr ul li a img {
    width: 75%;
    margin: 0 auto;
  }
  .mainContents .bnrPc {
    display: none;
  }
  .mainContents .bnrSp {
    display: block;
  }
  .mainContents .bnrShow {
    right: 0;
    bottom: 0;
  }
  .mainContents dialog {
    max-height: 84.6lvh;
  }
  .mainContents .dialogCloseBtn {
    position: absolute;
    content: "";
    top: 20px;
    right: 20px;
    z-index: 3;
  }
  .mainContents .resultCurry {
    margin-top: 15.2vw;
    padding: 0 4vw 4vw 4vw;
  }
  .mainContents .resultCurry h3 {
    padding: 2.666vw;
  }
  .mainContents .resultCurry h3 img {
    width: 21.19vw;
  }
  .mainContents .resultCurry ul {
    margin: 9.066vw auto 0 auto;
    width: 100%;
  }
  .mainContents .resultCurry ul li div {
    padding-top: 2.666vw;
    font-size: 2.933vw;
  }
  .mainContents #rate {
    font-size: 11.2vw;
  }
  .mainContents .resultMain h3 {
    padding-top: 17.86vw;
  }
  .mainContents .resultMain h3 img {
    width: 63.34vw;
  }
  .mainContents .resultMain::before {
    background: url("/data/rouxmixmaker/img/resultTop_sp.webp") no-repeat top center;
    background-size: contain;
    margin-top: -12vw;
  }
  .mainContents .resultMain::after {
    background: url("/data/rouxmixmaker/img/resultBottom_sp.webp") no-repeat bottom center;
    background-size: contain;
  }
  .mainContents #lead {
    font-size: 4.8vw;
    padding: 0 8vw;
  }
  .mainContents #description {
    font-size: 3.466vw;
    padding: 12vw 8vw 0 8vw;
  }
  .mainContents .chartImg img {
    width: 100vw;
    height: auto;
  }
  .mainContents .shareBtn {
    margin: 0 0 19.46vw 0;
  }
  .mainContents .shareBtn a img {
    width: 75.36vw;
  }
  .mainContents .resultPartnerText {
    margin-bottom: 5.333vw;
  }
  .mainContents .resultPartnerText img {
    width: 74.19vw;
  }
  .mainContents .resultPartner {
    margin: 0 auto 18.66vw auto;
    border-radius: 8vw;
  }
  .mainContents .resultPartnerPc {
    display: none;
  }
  .mainContents .resultPartnerSp {
    display: block;
  }
  .mainContents .resultPartnerSp img {
    width: 100%;
    height: auto;
  }
  .mainContents .resultWater {
    margin: 0 auto 5.333vw auto;
    border-radius: 8vw;
  }
  .mainContents .resultWater h4 {
    width: 100%;
    padding-right: 0;
    padding-bottom: 2.666vw;
  }
  .mainContents .resultWater h4 img {
    width: 37.36vw;
  }
  .mainContents .resultWaterMain {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
  .mainContents .resultWaterMain p {
    text-align: center;
    font-size: 2.666vw;
  }
  .mainContents .resultWaterSubText li {
    padding-left: 3vw;
    font-size: 2.933vw;
    padding-bottom: 5px;
  }
  .mainContents .resultWaterSubText li .resultWaterSubText1 {
    font-size: 2.933vw;
  }
  .mainContents .resultWaterSubText li .resultWaterSubText2 {
    font-size: 2.933vw;
    display: block;
  }
  .mainContents .resultProductHead {
    margin-bottom: 6.4vw;
  }
  .mainContents .resultProductHead img {
    width: 56.45vw;
  }
  .mainContents .resultProduct {
    padding: 12.8vw 9.6vw;
  }
  .mainContents .resultProduct ul li {
    width: 100%;
    margin-bottom: 40px;
  }
  .mainContents .resultProduct ul li:last-of-type {
    margin-bottom: 0;
  }
  .mainContents .resultProduct ul li .name1,
  .mainContents .resultProduct ul li .name2 {
    font-size: 3vw !important;
  }
  .mainContents .resultProduct ul li a {
    font-size: 3vw;
  }
  .mainContents .resultProduct ul li a span img {
    width: 3.4vw;
    height: auto;
    margin-top: 0.5333vw;
  }
  .mainContents .dialog-close {
    width: 42.6vw;
    padding: 10px;
  }
  .mainContents .dialog-close svg {
    width: 13vw;
  }
}
/*===============================================
●sp.css  横向き
===============================================*/
@media screen and (max-width: 896px) and (min-width: 750px) and (orientation: landscape) {
  .mainContents .bnr ul {
    width: 100%;
  }
  .mainContents .bnr ul li a {
    display: block;
    text-align: center;
    width: 40%;
    margin: 0 auto;
  }
  .mainContents .bnr ul li a img {
    width: 100%;
  }
}
@media screen and (max-width: 667px) and (orientation: landscape) {
  .mainContents .bnr ul {
    width: 100%;
  }
  .mainContents .bnr ul li a {
    display: block;
    text-align: center;
  }
  .mainContents .bnr ul li a img {
    width: 60%;
    margin: 0 auto;
  }
}