@charset "UTF-8";
/* CSS Document */
/* Webフォントは表示速度のため HTML の <link> で読み込む（index.html の head を参照） */
/* 旧: Josefin Sans / Noto Sans JP（earlyaccess含む） / Zen Maru Gothic / Zen Kaku Gothic New を @import していた */


* {
  margin: 0;
  padding: 0;
  /*font-family: "Zen Maru Gothic", sans-serif;*/
  /*font-family: 'Zen Kaku Gothic New', sans-serif;*/
  /*font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic', Meiryo;*/
  font-family: "Noto Sans JP", "Century Gothic", sans-serif;
  box-sizing: border-box;
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
dialog,
div,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
sup,
time,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background-color: transparent;
  list-style: none;
  font-style: normal;
  font-weight: 400;
}

header,
article,
footer,
aside,
nav,
small,
section {
  display: block;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}

li,
ol li {
  list-style-type: none;
}

a img {
  border-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  opacity: 0.6;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  border-style: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  vertical-align: top;
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

strong {
  font-weight: 700;
}

@media screen and (min-width: 751px) and (max-width: 1080px) {
  html {
    font-size: 0.0925925926vw;
  }
}
@media (max-width: 750px) {
  html {
    font-size: 0.1358695652vw;
  }
}
@media (min-width: 1081px) {
  html {
    font-size: 0.0625rem;
  }
}

@media (min-width: 751px) {
  .pcnone {
    display: none;
  }
}

@media (max-width: 750px) {
  .spnone {
    display: none;
  }
}

body {
  color: #231815;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  body {
    font-size: 17rem;
  }
}
@media (max-width: 750px) {
  body {
    font-size: 17rem;
  }
}
@media (min-width: 1081px) {
  body {
    font-size: 17px;
  }
}

/*********************

    共通パーツ

************************/
#btn-scroll {
  position: fixed;
  line-height: 1;
  text-align: center;
}
@media (min-width: 751px) {
  #btn-scroll {
    right: 30rem;
    bottom: 30rem;
    width: 60rem;
    height: 60rem;
  }
}
@media (max-width: 750px) {
  #btn-scroll {
    right: 15px;
    bottom: 15px;
    width: 90rem;
    height: 90rem;
    font-size: 16px;
  }
}
#btn-scroll {
  background: #f8c6c6;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 3px solid #f6bcb8;
  z-index: 100;
}

.inner {
  padding: 100rem 0 0;
}
.inner .title {
  position: relative;
}
.inner .top_img {
  width: 13%;
  height: auto;
  display: block;
  margin: 0 auto 2rem;
  position: absolute;
  right: 53rem;
  top: 0;
}
@media (max-width: 750px) {
  .inner .top_img {
    width: 18%;
  }
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .inner {
    width: 800rem;
    margin: 0 auto;
  }
}
@media (min-width: 1081px) {
  .inner {
    width: 800px;
    margin: 0 auto;
  }
}
@media (max-width: 750px) {
  .inner {
    margin: 0 35rem;
    padding: 80rem 0 0;
  }
}
.inner p {
  line-height: 1.5;
  font-family: "ＭＳ Ｐゴシック", "Century Gothic", sans-serif;
  font-size: 26rem;
  margin: 32rem auto 80rem;
  width: 90%;
  text-align: left;
}
@media (max-width: 750px) {
  .inner p {
    margin: 32rem auto 0;
  }
}

.text_under {
  background: linear-gradient(transparent 40%, rgba(226, 152, 90, 0.56) 40%);
  display: inline-block;
}

.common-color h3 {
  text-align: center;
  text-align: left;
  width: 20%;
  margin-left: 20rem;
  margin-bottom: 20rem;
}
.common-color .separate {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto 60rem;
}
.common-color .separate.product1 {
  width: 90%;
}
.common-color .separate a {
  display: block;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color .separate a:nth-of-type(n+2) {
    margin: 0 0 0 30rem;
  }
}
@media (min-width: 1081px) {
  .common-color .separate a:nth-of-type(n+2) {
    margin: 0 0 0 15px;
  }
}
@media (max-width: 750px) {
  .common-color .separate a:nth-of-type(n+2) {
    margin: 0 0 0 10rem;
  }
}
.common-color h4 {
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color h4 {
    font-size: 39rem;
    margin: 0 0 14rem;
  }
}
@media (min-width: 1081px) {
  .common-color h4 {
    font-size: 39px;
    margin: 0 0 14px;
  }
}
@media (max-width: 750px) {
  .common-color h4 {
    font-size: 32rem;
    margin: 0 0 10rem;
  }
}
.common-color p {
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color p {
    font-size: 43rem;
    margin: 0 0 29rem;
  }
}
@media (min-width: 1081px) {
  .common-color p {
    font-size: 43px;
    margin: 0 0 29px;
  }
}
@media (max-width: 750px) {
  .common-color p {
    font-size: 30rem;
    margin: 0 0 20rem;
  }
}
.common-color dl {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color dl:not(:last-of-type) {
    margin: 0 0 14rem;
  }
}
@media (min-width: 1081px) {
  .common-color dl:not(:last-of-type) {
    margin: 0 0 14px;
  }
}
@media (max-width: 750px) {
  .common-color dl:not(:last-of-type) {
    margin: 0 0 10rem;
  }
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color dl:last-of-type {
    margin: 0 0 36rem;
  }
}
@media (min-width: 1081px) {
  .common-color dl:last-of-type {
    margin: 0 0 36px;
  }
}
@media (max-width: 750px) {
  .common-color dl:last-of-type {
    margin: 0 0 25rem;
  }
}
.common-color dl dt {
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color dl dt {
    width: 147rem;
    font-size: 27rem;
  }
}
@media (min-width: 1081px) {
  .common-color dl dt {
    width: 147px;
    font-size: 27px;
  }
}
@media (max-width: 750px) {
  .common-color dl dt {
    margin: 0 10rem 0 0;
    font-size: 24rem;
  }
}
.common-color dl dt span {
  font-weight: 700;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color dl dt span {
    margin: 0 13rem;
    font-size: 27rem;
  }
}
@media (min-width: 1081px) {
  .common-color dl dt span {
    margin: 0 13px;
    font-size: 27px;
  }
}
@media (max-width: 750px) {
  .common-color dl dt span {
    margin: 0 12rem;
    font-size: 24rem;
  }
}
.common-color dl dt:after {
  content: "|";
  display: inline-block;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color dl dt:after {
    margin: 0 0 0 22rem;
  }
}
@media (min-width: 1081px) {
  .common-color dl dt:after {
    margin: 0 0 0 22px;
  }
}
@media (max-width: 750px) {
  .common-color dl dt:after {
    margin: 0 0 0 15rem;
  }
}
.common-color dl dd {
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-color dl dd {
    font-size: 27rem;
  }
}
@media (min-width: 1081px) {
  .common-color dl dd {
    font-size: 27px;
  }
}
@media (max-width: 750px) {
  .common-color dl dd {
    font-size: 24rem;
  }
}
.common-point {
  margin-bottom: 20rem;
}
.common-point h3 {
  text-align: left;
  width: 90%;
  margin: 0 auto 20rem;
  font-size: 30rem;
}
.common-point h3 img {
  display: inline;
  width: 24%;
  padding-right: 10rem;
}
.common-point .separate {
  margin-bottom: 40rem;
}
.common-point .separate-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 28rem;
  padding: 40rem 25rem;
  margin-bottom: 20rem;
}
@media (max-width: 750px) {
  .common-point .separate-content {
    width: 100%;
  }
}
.common-point .separate-content .img {
  width: 30%;
  display: flex;
  align-items: center;
}
@media (max-width: 750px) {
  .common-point .separate-content .img {
    width: 100%;
    margin: 0 auto 20rem;
  }
}
.common-point .separate-content .img.min {
  width: 25%;
  margin: 0 auto 0 5%;
}
@media (max-width: 750px) {
  .common-point .separate-content .img.min {
    width: 70%;
    margin: 0 auto 22rem;
  }
}
.common-point .separate-content .item_text {
  width: 70%;
  padding: 0 10rem 0 30rem;
}
@media (max-width: 750px) {
  .common-point .separate-content .item_text {
    width: 100%;
    margin-bottom: 20rem;
  }
}
.common-point .separate-content .item_text h3 {
  font-size: 25rem;
  width: 100%;
  font-weight: bold;
  margin: 0 0 30rem;
  line-height: 1.2;
}
.common-point .separate-content p {
  margin: 0;
  line-height: 1.5;
  width: 100%;
}
@media (min-width: 751px) {
  .common-point .separate-content p {
    font-size: 26rem;
  }
}
@media (max-width: 750px) {
  .common-point .separate-content p {
    font-size: 28rem;
  }
}
.common-point .separate.product1-item .separate-content {
  border: 3rem solid #c19aaa;
}
.common-point .separate.product2-item .separate-content {
  border: 3rem solid #5c6091;
}
.common-point .separate.product3-item .separate-content {
  border: 3rem solid #849680;
}
.common-point .separate.product4-item .separate-content {
  border: 3rem solid #c9b7b7;
}
.common-point h4 {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 751px) {
  .common-point h4 {
    font-size: 38rem;
  }
}
@media (max-width: 750px) {
  .common-point h4 {
    font-size: 36rem;
  }
}
.common-point h4 {
  margin-bottom: 45rem;
  font-weight: 700;
}
.common-point h4 img {
  width: 38rem;
}
.common-video {
  text-align: center;
  width: 100%;
}
@media (min-width: 751px) {
  .common-video video {
    width: 60%;
  }
}
@media (max-width: 750px) {
  .common-video video {
    width: 75%;
  }
}
@media (max-width: 750px) {
  .common-video iframe {
    width: 90vw;
    height: 160vw;
  }
}
.common-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-btn {
    padding: 0 0 80rem;
  }
}
@media (min-width: 1081px) {
  .common-btn {
    padding: 0 0 80px;
  }
}
@media (max-width: 750px) {
  .common-btn {
    padding: 0 0 80rem;
  }
}
.common-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
@media (min-width: 751px) {
  .common-btn a {
    width: 380rem;
    height: 80rem;
    border-radius: 15rem;
    font-size: 27rem;
    box-shadow: 2.8346rem 2.8346rem 2.8346rem rgba(35, 24, 21, 0.75);
  }
}
@media (max-width: 750px) {
  .common-btn a {
    width: 318rem;
    height: 62rem;
    border-radius: 15rem;
    font-size: 22rem;
    box-shadow: 2.8346rem 2.8346rem 2.8346rem rgba(35, 24, 21, 0.75);
    margin-right: 10rem;
  }
}
.common-btn a:after {
  content: "";
  display: inline-block;
  background-image: url(../images/top/arrow-right.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-btn a:after {
    width: 31rem;
    height: 22rem;
    margin: 0 0 0 20rem;
  }
}
@media (min-width: 1081px) {
  .common-btn a:after {
    width: 31px;
    height: 22px;
    margin: 0 0 0 20px;
  }
}
@media (max-width: 750px) {
  .common-btn a:after {
    width: 31rem;
    height: 22rem;
    margin: 5rem 0 0 7rem;
  }
}
.common-btn a:nth-of-type(1) {
  background: linear-gradient(to right, #ed7129, #d23a26);
}
.common-btn a:nth-of-type(2) {
  background: linear-gradient(to right, #666, #231815);
}
.common-btn .schedule {
  background-color: #ED7D31;
  color: #FFF;
  text-align: center;
  font-size: 30rem;
  padding: 15rem 60rem;
  margin: auto;
}
.common-content {
  position: relative;
  padding: 0 0 70rem 0;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-content {
    margin: 0 auto;
    background-position: 0 34%;
  }
}
@media (min-width: 1081px) {
  .common-content {
    max-width: 800px;
    margin: 0 auto;
  }
}
@media (max-width: 750px) {
  .common-content {
    padding: 0 0 70rem 0;
  }
}
.common-content {
  /*
  &:before {
      content: '';
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      left: 0;
      width: 100%;

      @include pc {
          top: -100rem;
          height: 170rem;

      }
      @include sp {
          top: -60rem;
          height: 120rem;

      }
  }
  */
}
.common-content .catch {
  position: absolute;
  z-index: 2;
}
@media (min-width: 751px) {
  .common-content .catch {
    top: 80rem;
    right: 40rem;
  }
}
@media (max-width: 750px) {
  .common-content .catch {
    top: 80rem;
    right: 40rem;
  }
}
@media (min-width: 751px) {
  .common-content .catch img {
    width: 257rem;
  }
}
@media (max-width: 750px) {
  .common-content .catch img {
    width: 220rem;
  }
}
.common-content .catch.on:before {
  z-index: 0;
}
.common-content .bg-img {
  display: block;
  text-align: center;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-content .bg-img {
    margin: 0 auto 50rem;
  }
}
@media (min-width: 1081px) {
  .common-content .bg-img {
    margin: 0 auto 50px;
  }
}
@media (max-width: 750px) {
  .common-content .bg-img {
    margin: 0 auto 50rem;
    width: 75%;
  }
}
.common-content .img {
  position: relative;
  text-align: center;
}
.common-content .img img {
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}
.common-content .item_area {
  text-align: left;
  font-weight: 700;
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: end; /*画像の高さ調整*/
}
.common-content .item_area .img_area {
  width: 40%;
  padding: 10rem 10rem 10rem 40rem;
  margin: 0 auto 20rem;
}
@media (max-width: 750px) {
  .common-content .item_area .img_area {
    width: 70%;
    padding: 10rem;
    display: block;
  }
}
.common-content .item_area .text_area {
  width: 60%;
  padding: 10rem;
  display: flex;
  align-items: center;
  align-self: stretch;
}
@media (max-width: 750px) {
  .common-content .item_area .text_area {
    display: block;
    width: 90%;
    margin: auto;
    font-size: 20rem;
  }
}
.common-content .item_area .text_area p {
  margin: 0 2rem 20rem 20rem;
  line-height: 1.4;
  font-family: "ＭＳ Ｐゴシック", "Century Gothic", sans-serif;
  width: 100%;
  font-size: 27rem;
}
@media (max-width: 750px) {
  .common-content .item_area .text_area p {
    font-size: 33rem;
  }
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-content .item_area {
    font-size: 47rem;
    margin: 0 0 30rem;
  }
}
@media (min-width: 1081px) {
  .common-content .item_area {
    font-size: 47px;
    margin: 0 0 30px;
  }
}
@media (max-width: 750px) {
  .common-content .item_area {
    font-size: 41rem;
    margin: 0 0 35rem;
    display: block;
  }
}
.common-content .item_area.new::before {
  content: "";
  position: absolute;
  width: 96rem;
  height: 93rem;
  top: 0;
  left: 0;
  background-image: url(../images/top/new01.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.common-content .text {
  line-height: 2;
}
@media (max-width: 750px) {
  .common-content .text {
    font-size: 26rem;
    margin: 0 0 65rem;
  }
}
@media (max-width: 750px) {
  .common-content .text {
    font-size: 30rem;
    margin: 0 0 30rem;
  }
}
.common-title {
  display: block;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
@media (min-width: 751px) {
  .common-title {
    padding: 0;
    max-width: 880rem;
    margin: 0 auto 30rem;
  }
}
.common-title .num_img {
  display: inline;
  width: 24%;
  padding: 10rem 0 0;
}
.common-title p {
  line-height: 1.7;
  font-weight: bold;
  padding: 10rem 0 10rem;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
}
@media (min-width: 751px) {
  .common-title p {
    font-size: 38rem;
    margin-left: 30rem;
  }
}
@media (max-width: 750px) {
  .common-title p {
    font-size: 32rem;
    margin-left: 30rem;
  }
}
.common-kv {
  margin: 0 auto;
  max-width: 800px;
}
.common-kv .pickup {
  margin: 100rem auto;
}
.common-kv .pickup .pickup_img {
  width: 49%;
  max-width: 260px;
  margin: 0 auto 20rem;
}
.common-kv .pickup .bug_img {
  width: 80%;
  max-width: 500px;
  margin: 0 auto 30rem;
  text-align: center;
}
@media (max-width: 750px) {
  .common-kv .pickup .bug_img {
    width: 60%;
  }
}
.common-kv .pickup p {
  font-size: 40rem;
  margin: auto;
  text-align: center;
}
.common-sub-title.left {
  width: 100%;
  max-width: 950px;
  margin: 10rem auto 50rem;
}
.common-sub-title.left h3 {
  padding: 19rem;
  font-size: 90rem;
  font-weight: bold;
  width: 96.5%;
  display: block;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
}
.common-sub-title.right {
  width: 100%;
  max-width: 950px;
  margin: 10rem auto 50rem;
  padding-left: 34rem;
}
.common-sub-title.right h3 {
  padding: 19rem;
  font-size: 90rem;
  font-weight: bold;
  width: 100%;
  display: block;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  text-align: right;
}
.common-sub-title.product1 h3 {
  color: rgb(193, 154, 170);
  background: linear-gradient(transparent 70%, rgba(193, 154, 170, 0.36) 70%);
}
.common-sub-title.product2 h3 {
  color: rgb(92, 96, 145);
  background: linear-gradient(transparent 70%, rgba(92, 96, 145, 0.36) 70%);
}
.common-sub-title.product3 h3 {
  color: rgb(132, 150, 128);
  background: linear-gradient(transparent 70%, rgba(132, 150, 128, 0.36) 70%);
}
.common-sub-title.product4 h3 {
  color: rgb(226, 216, 216);
  background: linear-gradient(transparent 70%, rgba(226, 216, 216, 0.36) 70%);
}

.js-slider {
  position: relative;
  z-index: 2;
  max-width: 880px;
}
@media (min-width: 751px) {
  .js-slider {
    max-width: 500px;
    margin: 0 auto;
  }
}
.js-slider--prev {
  position: absolute;
  left: 0;
  top: 45%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .js-slider--prev {
    padding: 0px 13px 9px;
    font-size: 61rem;
  }
}
@media (min-width: 1081px) {
  .js-slider--prev {
    padding: 0px 13px 9px;
    font-size: 61rem;
  }
}
@media (max-width: 750px) {
  .js-slider--prev {
    padding: 0px 13px 18rem;
    font-size: 61rem;
  }
}
.js-slider--next {
  position: absolute;
  right: 0;
  top: 45%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .js-slider--next {
    padding: 0px 13px 9px;
    font-size: 61rem;
  }
}
@media (min-width: 1081px) {
  .js-slider--next {
    padding: 0px 13px 9px;
    font-size: 61px;
  }
}
@media (max-width: 750px) {
  .js-slider--next {
    padding: 0px 13px 18rem;
    font-size: 61rem;
  }
}
.js-slider--dots {
  text-align: center;
  position: absolute;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .js-slider--dots {
    margin: 40rem 0 0 0;
  }
}
@media (min-width: 1081px) {
  .js-slider--dots {
    margin: 40px 0 0 0;
  }
}
@media (max-width: 750px) {
  .js-slider--dots {
    margin: 40rem 0 0 0;
  }
}
.js-slider--dots li {
  display: inline-block;
}
@media (max-width: 750px) {
  .js-slider--dots li {
    margin: 0 20rem;
  }
}
@media (min-width: 751px) {
  .js-slider--dots li {
    margin: 0 20px;
  }
}
.js-slider--dots li button {
  position: relative;
  text-indent: -9999px;
  border: none;
}
.js-slider--dots li button:before {
  content: "";
}
@media (max-width: 750px) {
  .js-slider--dots li button:before {
    width: 16rem;
    height: 16rem;
  }
}
@media (min-width: 751px) {
  .js-slider--dots li button:before {
    width: 16px;
    height: 16px;
  }
}
.js-slider--dots li button:before {
  background: #dcdddd;
  border-radius: 50%;
  text-indent: 0px;
  position: absolute;
  top: 0;
  left: 0;
}
.js-slider--dots li.slick-active button:before {
  content: "";
  background: #9fa0a0;
}
.js-slider.on:before {
  z-index: 0;
}

/*********************

    ヘッダー

************************/
@media (min-width: 1081px) {
  .header {
    margin: 0 auto;
    max-width: 800px;
  }
}
@media (min-width: 751px) {
  .header h1 img {
    margin: 0 auto;
    display: block;
    width: 880rem;
  }
}
.header-btn {
  position: fixed;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 1001;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn {
    top: 40rem;
    right: 22rem;
    width: 89rem;
    height: 89rem;
  }
}
@media (min-width: 1081px) {
  .header-btn {
    top: 40px;
    right: 22px;
    width: 89px;
    height: 89px;
  }
}
@media (max-width: 750px) {
  .header-btn {
    top: 40rem;
    right: 22rem;
    width: 89rem;
    height: 89rem;
  }
}
.header-btn span {
  position: absolute;
  background: #000;
  transition: all 0.3s;
  height: 2px;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn span {
    width: 60rem;
    left: 15rem;
  }
}
@media (min-width: 1081px) {
  .header-btn span {
    width: 60px;
    left: 15px;
  }
}
@media (max-width: 750px) {
  .header-btn span {
    width: 60rem;
    left: 15rem;
  }
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn span:nth-of-type(1) {
    top: 40rem;
  }
}
@media (min-width: 1081px) {
  .header-btn span:nth-of-type(1) {
    top: 40px;
  }
}
@media (max-width: 750px) {
  .header-btn span:nth-of-type(1) {
    top: 40rem;
  }
}
.header-btn span:nth-of-type(1) {
  transition: 0.3s;
}
.header-btn span:nth-of-type(1).close {
  transform: rotate(45deg);
  transition: 0.3s;
  z-index: 2001;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn span:nth-of-type(1).close {
    top: 45rem;
  }
}
@media (min-width: 1081px) {
  .header-btn span:nth-of-type(1).close {
    top: 45px;
  }
}
@media (max-width: 750px) {
  .header-btn span:nth-of-type(1).close {
    top: 45rem;
  }
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn span:nth-of-type(2) {
    top: 55rem;
  }
}
@media (min-width: 1081px) {
  .header-btn span:nth-of-type(2) {
    top: 55px;
  }
}
@media (max-width: 750px) {
  .header-btn span:nth-of-type(2) {
    top: 55rem;
  }
}
.header-btn span:nth-of-type(2).close {
  transform: rotate(-45deg);
  transition: 0.3s;
  z-index: 2001;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn span:nth-of-type(2).close {
    top: 45rem;
  }
}
@media (min-width: 1081px) {
  .header-btn span:nth-of-type(2).close {
    top: 45px;
  }
}
@media (max-width: 750px) {
  .header-btn span:nth-of-type(2).close {
    top: 45rem;
  }
}
.header-btn--content {
  position: fixed;
  left: -100%;
  width: 100%;
  height: 100%;
  top: 0;
  background: #fff;
  box-sizing: border-box;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .header-btn--content {
    padding: 0 0 60rem 0;
    font-size: 17rem;
  }
}
@media (min-width: 1081px) {
  .header-btn--content {
    padding: 0 0 60px 0;
    font-size: 17px;
  }
}
@media (max-width: 750px) {
  .header-btn--content {
    padding: 0 0 60rem 0;
    font-size: 17rem;
  }
}
.header-btn--content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
.header-btn--content.on {
  left: 0;
  transition: 0.3s;
  z-index: 2000;
}

/*********************

    メイン

************************/
.walk .inner {
  padding: 0;
}
.walk h2 {
  line-height: 1.5;
  position: relative;
}
@media (min-width: 751px) {
  .walk h2 {
    font-size: 31rem;
    width: 90%;
    margin: auto;
    padding: 44rem 0 0rem;
  }
}
@media (max-width: 750px) {
  .walk h2 {
    font-size: 30rem;
    margin: 0 0 40rem;
    padding: 60rem 0 0 0;
  }
}
.walk p {
  line-height: 1.5;
  font-family: "ＭＳ Ｐゴシック", "Century Gothic", sans-serif;
}
@media (min-width: 751px) {
  .walk p {
    font-size: 30rem;
    margin: 32rem auto 80rem;
    width: 85%;
  }
}
@media (max-width: 750px) {
  .walk p {
    font-size: 26rem;
    margin: 27rem auto 80rem;
    width: 100%;
  }
}

.menu .inner {
  padding: 0;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .menu {
    margin: 0 0 80rem;
  }
}
@media (min-width: 1081px) {
  .menu {
    margin: 0 0 60px;
  }
}
@media (max-width: 750px) {
  .menu {
    margin: 0 0 75rem;
  }
}
.menu h2 {
  font-family: Century Gothic, sans-serif;
  text-align: center;
  margin: 0 auto 80rem;
  font-size: 48rem;
}
.menu .inner {
  display: block;
  width: 700rem;
}
.menu .inner a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 10rem 10rem 80rem;
  width: 90%;
  border: 1px solid #333;
  border-radius: 18rem;
}
.menu .inner a::after {
  position: relative;
}
.menu .inner a .num_img {
  width: 20%;
  padding: 20rem 20rem 10rem 20rem;
}
.menu .inner a .img {
  position: absolute;
  right: -10%;
  top: -38rem;
  width: 26%;
}
@media (max-width: 750px) {
  .menu .inner a .img {
    right: -8%;
    top: -32rem;
    width: 23%;
  }
}
.menu .inner a .img img {
  width: 100%;
}
.menu .inner a:nth-child(2) .img {
  position: absolute;
  right: -9%;
  top: -20rem;
  width: 25%;
}
@media (max-width: 750px) {
  .menu .inner a:nth-child(2) .img {
    right: -7%;
    top: -20rem;
    width: 23%;
  }
}
.menu .inner a:nth-child(3) .img {
  position: absolute;
  right: -10%;
  top: -30rem;
  width: 24%;
}
@media (max-width: 750px) {
  .menu .inner a:nth-child(3) .img {
    right: -7%;
    top: -19rem;
    width: 20%;
  }
}
.menu .inner a:nth-child(4) .img {
  position: absolute;
  right: -10%;
  top: -39rem;
  width: 24%;
}
@media (max-width: 750px) {
  .menu .inner a:nth-child(4) .img {
    right: -7%;
    top: -25rem;
    width: 20%;
  }
}
.menu .inner a .text_area {
  width: 80%;
  padding-right: 130rem;
}
.menu .inner a .text_area p {
  text-align: center;
  margin: auto;
}
.menu .inner a .text_area p .font_l {
  font-size: 36rem;
}
.menu .inner a {
  /*
  &:nth-of-type(1) {
      @include pcmax {
          margin: 0 0 30rem 0;
      }

      @include over {
          margin: 0 0 30px 0;
      }

      @include sp {
          margin: 0 0 20rem 0;
      }

      div {
          background: rgba(32,99,60,0.8);

      }
  }

  &:nth-of-type(2) {
      @include pcmax {
          margin: 0 0 30rem 0;
      }

      @include over {
          margin: 0 0 30px 0;
      }

      @include sp {
          margin: 0 0 20rem 0;
      }

      div {
          background: rgba(200,101,101,0.8);

      }
  }

  &:nth-of-type(3) {
      div {
          background: rgba(210,112,21,0.8);

      }
  }

  &:nth-of-type(4) {
      div {
          background: rgba(167,115,148,0.8);

      }
  }
  */
}

.product1-content {
  background-size: 100%;
  background-repeat: no-repeat;
}
.product1 .separate1 {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (min-width: 751px) {
  .product1 .separate1 {
    margin-bottom: 70rem;
    padding: 0 100rem;
  }
}
@media (max-width: 750px) {
  .product1 .separate1 {
    margin-bottom: 70rem;
  }
}
@media (min-width: 751px) {
  .product1 .separate1-left {
    width: 261rem;
    height: 203rem;
  }
}
@media (max-width: 750px) {
  .product1 .separate1-left {
    width: 211rem;
    height: 153rem;
  }
}
@media (min-width: 751px) {
  .product1 .separate1-absolute {
    position: absolute;
    left: 90rem;
    bottom: 5rem;
  }
}
@media (max-width: 750px) {
  .product1 .separate1-absolute {
    position: absolute;
    left: -10rem;
    bottom: 80rem;
  }
}
@media (min-width: 751px) {
  .product1 .separate1-absolute img {
    width: 260rem;
  }
}
@media (max-width: 750px) {
  .product1 .separate1-absolute img {
    width: 260rem;
  }
}
.product1 .separate1 figure {
  position: relative;
}
@media (min-width: 751px) {
  .product1 .separate1 figure {
    width: 310rem;
  }
}
@media (max-width: 750px) {
  .product1 .separate1 figure {
    width: 410rem;
  }
}
.product1 .separate1 figure:after {
  position: absolute;
  background-image: url(../images/top/product1-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  left: -60rem;
  top: 130rem;
  width: 78rem;
  height: 45rem;
}
.product1 .separate1 figure p {
  line-height: 1.5;
}
@media (min-width: 751px) {
  .product1 .separate1 figure p {
    margin: 17rem 0 0 0;
    font-size: 22rem;
  }
}
@media (max-width: 750px) {
  .product1 .separate1 figure p {
    margin: 15rem 0 0 0;
    font-size: 23.5rem;
  }
}

.product2-content {
  background-size: 100%;
  background-repeat: no-repeat;
}
.product2 .separate1 {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (min-width: 751px) {
  .product2 .separate1 {
    margin-bottom: 70rem;
    padding: 0 100rem;
  }
}
@media (max-width: 750px) {
  .product2 .separate1 {
    margin-bottom: 70rem;
  }
}
@media (min-width: 751px) {
  .product2 .separate1-left {
    width: 261rem;
    height: 203rem;
  }
}
@media (max-width: 750px) {
  .product2 .separate1-left {
    width: 211rem;
    height: 153rem;
  }
}
@media (min-width: 751px) {
  .product2 .separate1-absolute {
    position: absolute;
    left: 90rem;
    bottom: 5rem;
  }
}
@media (max-width: 750px) {
  .product2 .separate1-absolute {
    position: absolute;
    left: -10rem;
    bottom: 80rem;
  }
}
@media (min-width: 751px) {
  .product2 .separate1-absolute img {
    width: 260rem;
  }
}
@media (max-width: 750px) {
  .product2 .separate1-absolute img {
    width: 260rem;
  }
}
.product2 .separate1 figure {
  position: relative;
}
@media (min-width: 751px) {
  .product2 .separate1 figure {
    width: 310rem;
  }
}
@media (max-width: 750px) {
  .product2 .separate1 figure {
    width: 410rem;
  }
}
.product2 .separate1 figure:after {
  position: absolute;
  background-image: url(../images/top/product1-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  left: -60rem;
  top: 130rem;
  width: 78rem;
  height: 45rem;
}
.product2 .separate1 figure p {
  line-height: 1.5;
}
@media (min-width: 751px) {
  .product2 .separate1 figure p {
    margin: 17rem 0 0 0;
    font-size: 22rem;
  }
}
@media (max-width: 750px) {
  .product2 .separate1 figure p {
    margin: 15rem 0 0 0;
    font-size: 23.5rem;
  }
}

.product3-content {
  background-size: 100%;
  background-repeat: no-repeat;
}
.product3 .separate1 {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (min-width: 751px) {
  .product3 .separate1 {
    margin-bottom: 70rem;
    padding: 0 100rem;
  }
}
@media (max-width: 750px) {
  .product3 .separate1 {
    margin-bottom: 70rem;
  }
}
@media (min-width: 751px) {
  .product3 .separate1-left {
    width: 261rem;
    height: 203rem;
  }
}
@media (max-width: 750px) {
  .product3 .separate1-left {
    width: 211rem;
    height: 153rem;
  }
}
@media (min-width: 751px) {
  .product3 .separate1-absolute {
    position: absolute;
    left: 90rem;
    bottom: 5rem;
  }
}
@media (max-width: 750px) {
  .product3 .separate1-absolute {
    position: absolute;
    left: -10rem;
    bottom: 80rem;
  }
}
@media (min-width: 751px) {
  .product3 .separate1-absolute img {
    width: 260rem;
  }
}
@media (max-width: 750px) {
  .product3 .separate1-absolute img {
    width: 260rem;
  }
}
.product3 .separate1 figure {
  position: relative;
}
@media (min-width: 751px) {
  .product3 .separate1 figure {
    width: 310rem;
  }
}
@media (max-width: 750px) {
  .product3 .separate1 figure {
    width: 410rem;
  }
}
.product3 .separate1 figure:after {
  position: absolute;
  background-image: url(../images/top/product1-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  left: -60rem;
  top: 130rem;
  width: 78rem;
  height: 45rem;
}
.product3 .separate1 figure p {
  line-height: 1.5;
}
@media (min-width: 751px) {
  .product3 .separate1 figure p {
    margin: 17rem 0 0 0;
    font-size: 22rem;
  }
}
@media (max-width: 750px) {
  .product3 .separate1 figure p {
    margin: 15rem 0 0 0;
    font-size: 23.5rem;
  }
}

.otheritem {
  margin-bottom: 100rem;
}

.product4 .common-title {
  background-size: 100% 100%;
}
.product4 .common-title p {
  margin-left: 7%;
}
.product4-content {
  background-size: 100%;
  background-repeat: no-repeat;
}
.product4 .common-content .catch {
  top: 110rem;
}
@media (min-width: 751px) {
  .product4 .common-content .catch {
    left: 150rem;
  }
}
@media (max-width: 750px) {
  .product4 .common-content .catch {
    left: 10rem;
  }
}
.product4 .common-content .catch img {
  width: 730rem;
}
.product4 .common-content h2 {
  color: #A77394;
  text-align: center;
  padding-left: 0;
}
.product4 .common-content h2::before {
  display: none;
}
.product4 {
  /*.common-content .img img:nth-of-type(2){
       left: auto;
       @include pc{
           right: 0;
           width: 201rem;
           top: 125rem;
       }
       @include sp{
           right: -15rem;
           width: 140rem;
  top: 115rem;
       }
   }  */
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .product4 .common-btn {
    padding: 0 0 145rem 0;
  }
}
@media (min-width: 1081px) {
  .product4 .common-btn {
    padding: 0 0 145px 0;
  }
}
@media (max-width: 750px) {
  .product4 .common-btn {
    padding: 0 0 145rem 0;
  }
}
.product4 .common-content .item_area::before {
  display: none;
}

.product5 .common-title {
  background-size: 100% 100%;
}
.product5 .common-title p {
  margin-left: 19%;
}
.product5 .product4-item .separate-content:nth-child(1) .img {
  width: 30%;
}
@media (max-width: 750px) {
  .product5 .product4-item .separate-content:nth-child(1) .img {
    width: 100%;
    margin-bottom: 20rem;
  }
}
.product5 .product4-item .separate-content:nth-child(1) .item_text {
  width: 65%;
}
@media (max-width: 750px) {
  .product5 .product4-item .separate-content:nth-child(1) .item_text {
    width: 100%;
    margin-bottom: 20rem;
  }
}
.product5-content {
  background-size: 100%;
  background-repeat: no-repeat;
}
.product5 .common-content .catch {
  top: 110rem;
}
@media (min-width: 751px) {
  .product5 .common-content .catch {
    left: 150rem;
  }
}
@media (max-width: 750px) {
  .product5 .common-content .catch {
    left: 10rem;
  }
}
.product5 .common-content .catch img {
  width: 730rem;
}
.product5 .common-content h2 {
  color: #A77394;
  text-align: center;
  padding-left: 0;
}
.product5 .common-content h2::before {
  display: none;
}
.product5 {
  /*.common-content .img img:nth-of-type(2){
       left: auto;
       @include pc{
           right: 0;
           width: 201rem;
           top: 125rem;
       }
       @include sp{
           right: -15rem;
           width: 140rem;
  top: 115rem;
       }
   }  */
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .product5 .common-btn {
    padding: 0 0 145rem 0;
  }
}
@media (min-width: 1081px) {
  .product5 .common-btn {
    padding: 0 0 145px 0;
  }
}
@media (max-width: 750px) {
  .product5 .common-btn {
    padding: 0 0 145rem 0;
  }
}
.product5 .common-content .item_area::before {
  display: none;
}

.product6 .common-title {
  background-size: 100% 100%;
}
.product6 .common-title p {
  margin-left: 19%;
}
.product6 .product4-item .separate-content:nth-child(1) .img {
  width: 30%;
}
@media (max-width: 750px) {
  .product6 .product4-item .separate-content:nth-child(1) .img {
    width: 100%;
    margin-bottom: 20rem;
  }
}
.product6 .product4-item .separate-content:nth-child(1) .item_text {
  width: 65%;
}
@media (max-width: 750px) {
  .product6 .product4-item .separate-content:nth-child(1) .item_text {
    width: 100%;
    margin-bottom: 20rem;
  }
}
.product6-content {
  background-size: 100%;
  background-repeat: no-repeat;
}
.product6 .common-content .catch {
  top: 110rem;
}
@media (min-width: 751px) {
  .product6 .common-content .catch {
    left: 150rem;
  }
}
@media (max-width: 750px) {
  .product6 .common-content .catch {
    left: 10rem;
  }
}
.product6 .common-content .catch img {
  width: 730rem;
}
.product6 .common-content h2 {
  color: #A77394;
  text-align: center;
  padding-left: 0;
}
.product6 .common-content h2::before {
  display: none;
}
.product6 {
  /*.common-content .img img:nth-of-type(2){
       left: auto;
       @include pc{
           right: 0;
           width: 201rem;
           top: 125rem;
       }
       @include sp{
           right: -15rem;
           width: 140rem;
  top: 115rem;
       }
   }  */
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .product6 .common-btn {
    padding: 0 0 145rem 0;
  }
}
@media (min-width: 1081px) {
  .product6 .common-btn {
    padding: 0 0 145px 0;
  }
}
@media (max-width: 750px) {
  .product6 .common-btn {
    padding: 0 0 145rem 0;
  }
}
.product6 .common-content .item_area::before {
  display: none;
}

@media (max-width: 600px) {
  .menu .inner {
    margin: 0 auto;
    width: 98%;
  }
  .menu .inner a {
    width: 88%;
    margin: 0 auto 35rem 4%;
  }
}
.brandarea .inner {
  padding: 50rem 0;
  max-width: 1080px;
  margin: 0 auto;
}
.brandarea p {
  font-size: 50rem;
  text-align: center;
  padding: 25rem 10rem;
  font-weight: bold;
}
.brandarea img {
  width: 20%;
  min-width: 180px;
  height: auto;
  margin: 50rem auto;
  display: block;
}

.common-s-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45rem 0 90rem;
}
.common-s-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  background: linear-gradient(to right, #ed7129, #d23a26);
  box-shadow: 2.8346rem 2.8346rem 2.8346rem rgba(35, 24, 21, 0.75);
  width: 395rem;
  height: 80rem;
  border-radius: 50rem;
  font-size: 29rem;
}
@media (max-width: 750px) {
  .common-s-btn a {
    width: 318rem;
    height: 62rem;
    border-radius: 28.3465rem;
    font-size: 23rem;
    box-shadow: 2.8346rem 2.8346rem 2.8346rem rgba(35, 24, 21, 0.75);
  }
}
.common-s-btn a:after {
  content: "";
  display: inline-block;
  background-image: url(../images/top/arrow-right.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 751px) and (max-width: 1080px) {
  .common-s-btn a:after {
    width: 31rem;
    height: 22rem;
    margin: 0 0 0 20rem;
  }
}
@media (min-width: 1081px) {
  .common-s-btn a:after {
    width: 31px;
    height: 22px;
    margin: 0 0 0 20px;
  }
}
@media (max-width: 750px) {
  .common-s-btn a:after {
    width: 31rem;
    height: 22rem;
    margin: 0 0 0 20rem;
  }
}

a.disabled {
  pointer-events: none;
}/*# sourceMappingURL=common.css.map */