@charset "utf-8";
/*@charset "UTF-8";     コメント */
/*css初期設定 start*/
html {
  font-size: 62.5%; /*文字標準*/
}
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none; /*リンクデコレーションリセット*/
}
/*大きさの計算*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  width: 100%;
  margin: 0 auto;
  /*文字詰め*/
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /*スマホ横向き時のフォントサイズリセット*/
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: visible;
  font-size: clamp(14px, 3.73vw, 23px);
  line-height: 1.7;
  font-family: sawarabi-gothic, sans-serif;
  font-weight: 500;
  font-style: normal;
}
p {
  font-size: clamp(14px, 3.73vw, 21px);
  line-height: 1.4;
}
.eng {
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}
/*画像の調整*/
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (max-width: 1023px) {
  .sp {
    display: inline-block !important;
  }
  .pc {
    display: none !important;
  }
}
@media only screen and (min-width: 1024px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: inline-block !important;
  }
}
@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
}
#copyright {
  font-size: 1.2rem;
}
#main-footer a {
  font-size: 1.2rem;
}
/*css初期設定 end*/
/*main start*/
body {
  background-color: #ffffff;
  color: #2d2d2d;
}
.mainWrap {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.topSec {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 122.66%;
  background: linear-gradient(122deg, #406310, #a9b09f, #9e8a52, #b7ac84, #d45022);
  background-size: 1000% 1000%;
  animation: GradientBackground 12s ease infinite;
  overflow: hidden;
}
@keyframes GradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
.topSec .topImg01 {
  width: 100%;
  min-width: 113%;
  bottom: -11%;
  left: -20%;
  position: absolute;
}
.topSec .topImg02 {
  width: 36%;
  top: 4%;
  right: 6%;
  position: absolute;
}
a.buyBtn {
  display: inline-block;
  padding: 1px 20px 4px;
  background-color: #2d2d2d;
  color: #fff;
  font-size: 11px;
  margin: 5% 0;
}
.leadSec {
  width: 90%;
  margin: 10% auto;
}
.leadSec .txtBlock {
  margin-bottom: 8%;
}

.leadSec .txtBlock h3 {
  font-size: clamp(17px, 4.53vw, 31px);
  line-height: 1.3;
  margin-bottom: 3%;
  font-weight: 800;
}
.leadSec .img02 img {
  display: block;
  width: 70%;
  margin: 7% auto;
}
.prodDetSec {
  width: 90%;
  margin: 0 auto 12%;
}
.prodDetBlock {
  width: 100%;
  height: 0;
  padding-top: 350%; /*1193*/
  position: relative;
}
.modelSlide {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
}
.itemDetSlide01 {
  width: 67.46%;
  position: absolute;
  top: 37%;
  left: 0;
  overflow: hidden;
}
.itemDetSlide01 .swiper02 {
  overflow: hidden;
}
.itemDetSlide01 .txtBlock {
  margin: 3% auto;
}
.itemDetSlide01 li,
.itemDetSlide01 p {
  font-size: clamp(12px, 3.2vw, 15px);
}

.itemDetSlide01 ul {
  padding-left: 15px;
}
.itemDetSlide01 ul,
.itemDetSlide01 li {
  list-style: square;
}
.itemDetSlide02 {
  width: 54.66%;
  position: absolute;
  top: 72.34%;
  right: 0;
  overflow: hidden;
}
.itemDetSlide02 p {
  font-size: clamp(12px, 3.2vw, 15px);
}

.lineUpSec {
  background-color: #f1f0ee;
}
.lineUpBlock {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 304.66%; /*1330px*/
  margin: 0 auto 15%;
}
.lineUpSec h4 {
  font-size: clamp(24px, 6.4vw, 58px);
  line-height: 1.1;
  /* font-weight: 600; */
  text-align: center;
  margin: 0 auto 5%;
  padding-top: 8%;
}
.lineUpBlock {
  padding-top: 299.52%;
}

.lineUpBox {
  width: 80%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  position: absolute;
}
.lineUpBox.color01 {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.lineUpBox.color02 {
  flex-direction: row-reverse;
  top: 33%;
  left: 50%;
  transform: translate(-50%, 0);
}
.lineUpBox.color03 {
  top: 66%;
  left: 50%;
  transform: translate(-50%, 0);
}
.lineUpBox img {
  width: 60%;
}
.lineUpBox .txtBlock {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 27%;
}
.lineUpBox .txtBlock p,
.lineUpBox .txtBlock a {
  font-size: clamp(11px, 2.93vw, 14px);
  font-weight: 600;
}
.lineUpSec .cvArea {
  width: 80%;
  padding-bottom: 15%;
}
/* swiper基礎設定 */
/* ページネーション */
.swiper-pagination {
  text-align: right;
  transform: translate3d(0, 0, 0);
}
.swiper-pagination-bullet {
  background-color: #2d2d2d;
}

/* 現在のスライド番号 */
.swiper-pagination-current {
  color: #2d2d2d;
}

/* スライド総数 */
.swiper-pagination-total {
  color: #2d2d2d;
}
/* swiper基礎設定 */
.cvArea {
  width: 90%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  margin-bottom: 3%;
}
.cvArea .priceNote {
  text-align: center;
  line-height: 1.2;
  padding: 3% 0;
  font-size: clamp(17px, 4.53vw, 25px);
}
.cvArea .priceNote h5 {
  font-size: clamp(19px, 5.06vw, 31px);
  font-weight: 800;
}
a.cvBtn {
  display: inline-block;
  width: 100%;
  max-width: 450px;
  background-color: #2d2d2d;
  border: 1px solid #2d2d2d;
  font-size: clamp(14px, 3.73vw, 23px);
  padding: 12px 0;
  color: #fff;
  letter-spacing: 0.2rem;
  margin-top: 5%;
  text-align: center;
  margin: 0 auto;
  line-height: 1.4;
}

@media only screen and (min-width: 740px) {
}
@media only screen and (min-width: 1024px) {
  .topSec {
    padding-top: 41%;
  }
  .topSec .topImg01 {
    width: 37%;
    min-width: auto;
    bottom: -6%;
    left: 18%;
  }
  .topSec .topImg02 {
    width: 15%;
    top: 34%;
    right: 27%;
  }
  .leadSec {
    width: 100%;
    margin: 0 auto 10%;
  }
  .leadBlock {
    display: flex;
    flex-direction: row;
  }
  .leadBlock.lead02 {
    width: 80%;
    margin: 4% auto 0;
  }
  .leadBlock .txtBox {
    width: 50%;
    padding: 0 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .leadBlock .img01,
  .leadBlock .img02 {
    width: 50%;
  }
  .leadBlock .img02 img {
    width: 70%;
    margin: 7% auto 12%;
  }
  .prodDetSec {
    margin: 0 auto 10%;
  }
  .prodDetBlock {
    padding-top: 60.46%;
  }
  .modelSlide {
    top: 0;
    left: 4.86%;
    width: 43.64%;
  }
  .itemDetSlide01 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 43.75%;
    top: 0;
    left: auto;
    right: 0;
  }
  .itemDetSlide01 > div {
    width: 50%;
  }
  .itemDetSlide01 .txtBlock {
    margin: 3% auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;
  }
  .itemDetSlide02 {
    width: 16.92%;
    top: 46.34%;
    right: 6%;
  }
  .lineUpBlock {
    padding-top: 30.52%;
  }
  .lineUpSec h4 {
    margin: 0 auto 2%;
    padding-top: 4%;
  }
  .lineUpBox {
    width: 16%;
    flex-direction: column;
  }
  .lineUpBox .txtBlock {
    width: 100%;
    text-align: center;
  }
  .lineUpBox img {
    width: 100%;
  }
  .lineUpBox.color01 {
    top: 1%;
    left: 50%;
  }
  .lineUpBox.color02 {
    top: 0;
    left: 20%;
    flex-direction: column;
    transform: none;
  }
  .lineUpBox.color03 {
    top: 4%;
    left: auto;
    right: 20%;
    transform: none;
    width: 15%;
  }
  a.buyBtn {
    font-size: 15px;
    padding: 0 30px 4px;
    margin: 4% 0 0;
  }
  .lineUpSec .cvArea {
    width: 80%;
    padding-bottom: 4%;
  }
  .cvArea {
    margin-bottom: 3%;
  }
  .cvArea .priceNote {
    padding: 0 0 1%;
  }
}

/*ヘッダーエリア*/
.header {
  width: 100%;
}
.header {
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.toplogo {
  width: 100%;
  height: 100px;
  /*      border-top: 8px solid #067fc4;*/
  text-align: center;
}
img.blandLogo {
  height: 80px;
  width: auto;
  margin: 10px;
}
