html {
  font-size: calc((10 * (100vw / 1400)));
}
body {
  overflow-x:hidden;
}
.l-container {
  width: 100%;
  overflow: hidden;
}
.l-footer {
  padding: 0;
}
.pc-footer {
  margin: 0;
}
*:focus {
  outline: none;
}
/* 共通 */
#feature {
  font-family: "peridot-pe-variable", sans-serif;
  font-variation-settings: 'wght' 500, 'wdth' 150, 'ital' 0;
  font-style: normal;
  font-weight: 400;
  color: #000;
  margin: 0 auto;
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;  
}
#feature * {
  box-sizing: border-box;
}
#feature li {
  list-style: none;
}
#feature a {
  position: relative;
  display: block;
  transition: opacity 1s ease;
  text-decoration: none;
  color: #000;
}
#feature a:hover {
  opacity: 0.7 !important;
  cursor: pointer;
}
#feature img {
  width: 100%;
  height: auto;
  display: block;
}
#feature .img{
  /* background: #fff;
  position: relative;
  z-index: 1; */
}
#feature .flex-wrap{
  display: flex;
}

/* hdr */
#feature .hdr{
  position: relative;
  width: 100%;
}
#feature .hdr .hdr__logo{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  z-index: 1;
  width: calc((285 / 1400) * 100%);
  margin: calc((390 / 1400) * 100%) auto 0;
  transition-delay: .4s;
}

/* main */
#feature .main{
  position: relative;
}
#feature .main__ttl{
  position: relative;
  width: 50%;
  padding-top: 49.8%;
  font-weight: 500;
}
#feature .main__ttl span{
  position: absolute;
  top:49.2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
}
#feature .bg01{
  position: absolute;
  margin-top: calc((200 / 1400) * 100%);
}
#feature .bg03{
  position: absolute;
  margin-top: calc((457 / 1400) * 100%);
}
#feature .txt{
  text-transform: uppercase;
}
#feature .txt.color{
  color: #FF8300;
  font-weight: 300;
}
#feature .txt.manifest{
  position: absolute;
  z-index: 1;
  font-size: 1.4rem;
  line-height: 1.428;
  display: flex;
  justify-content: space-between;
  width:calc((295 / 1400) * 100%);
  column-gap:calc((46 / 295) * 100%);
  margin: calc((345 / 1400) * 100%) auto 0 calc((79 / 1400) * 100%);
}
#feature .txt.manifest span{
  white-space: nowrap;
}
#feature .txt.intelligence{
  position: absolute;
  width: calc((690 / 1400) * 100%);
  margin: calc((1529 / 1400) * 100%) auto 0 calc((48 / 1400) * 100%);
  font-size: 1.1rem;
  line-height: 1.636;
}
#feature .txt.newvalue{
  text-align: center;
  margin-top: calc((31 / 1400) * 100%);
  font-size: 1.1rem;
  line-height: 1.636;
}
#feature .txt.affordable{
  text-align: center;
  margin-top: calc((200 / 1400) * 100%);
  font-size: 1.4rem;
  line-height: 1;
}
#feature .img{
  position: relative;
}
#feature .img01{
  position: absolute;
  top:0;
  right: 0;
  width: calc((493 / 1400) * 100%);
  margin: calc((140 / 1400) * 100%) calc((207 / 1400) * 100%) 0 auto;
}
#feature .img02{
  width: calc((982 / 1400) * 100%);
}
#feature .img03{
  width: calc((998 / 1400) * 100%);
  margin: calc((100 / 1400) * 100%) 0 0 auto;
}
#feature .img04{
  width: calc((1000 / 1400) * 100%);
  margin-top: calc((70 / 1400) * 100%);
}
#feature .img10{
  width: calc((726 / 1400) * 100%);
  margin: calc((180 / 1400) * 100%) auto 0 calc((125 / 1400) * 100%);
}
#feature .img11{
  width: calc((656 / 1400) * 100%);
  margin: calc((130 / 1400) * 100%) 0 0 auto;
}
#feature .img12{
  width: calc((656 / 1400) * 100%);
  margin: calc((-170 / 1400) * 100%) auto 0;
}
#feature .img13{
  width: calc((527 / 1400) * 100%);
  margin: calc((284 / 1400) * 100%) auto 0;
}
#feature .img14{
  width: calc(( 1400 / 1400) * 100%);
  margin-top: calc((244 / 1400) * 100%);
}
#feature .img15{
  width: calc(( 522 / 1400) * 100%);
  margin: calc((175 / 1400) * 100%) auto 0;
}
/* slider-area */
#feature .slider-area{
  position: relative;
  margin-top: calc((170 / 1400) * 100%); 
}
#feature .slider-area .content{
  position: absolute;
  top:0;
  z-index: 1;
  width: 100%;
  margin-top: calc((155 / 1400) * 100%);
}
#feature .slider-area .txt{
  margin-top: calc((20 / 1400) * 100%);
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  line-height: 1;
}
#feature .slider-area .txt span:nth-child(1){
  margin-left:calc((64 / 1400) * 100%);
}
#feature .slider-area .txt span:nth-child(2){
  margin-right:calc((51 / 1400) * 100%);
}
/* #feature .slider{
  line-height: 1;
}
#feature .slider .slick-slide{
  margin: 0 calc(10 * (100vw / 1400));
} */
#feature .swiper-wrapper {
  transition-timing-function: linear;
}
#feature .swiper-wrapper .swiper-slide{
  margin: 0 calc(10 * (100vw / 1400));
}
#feature .img-slide {
  width: 100%;
  height: calc(429 * (100vw / 1400));
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}
#feature .img-slide a{
  position: relative;
}
#feature .img-slide img {
  position: absolute;
}
#feature .img-slide img:first-child {
  opacity: 0;
}

/* closer */
#feature .closer{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#feature .btn {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  border-bottom: solid #000 1px;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1;
  margin: calc((88 / 1400) * 100%) auto calc((153 / 1400) * 100%);
  padding-bottom: calc((4 / 1400) * 100%);
}
#feature .staff {
  margin: 0 auto;
  margin-bottom: calc((300 / 1400) * 100%);
}
#feature .staff p{
  font-size: 1.1rem;
  line-height: 2.09;
  text-align: center;
}
/* アニメーション */
#feature .js-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}
#feature .js-fade.is-active {
  opacity: 1;
}