@use "../global" as *;

@font-face {
  font-display: swap;
  /* display=swapの設定 */
}

@include font-face('Futura', '../fonts/Futura', 400, italic, ttf);


html {
  color: $key_black;
  font-family: "M PLUS 2", system-ui;
  line-height: 1.667;
  //letter-spacing: 0.05em;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: none;
  font-weight: 400;
  font-weight: 500;
  font-size: $baseFontsize + px;
}


@include mq-up(xl) {
  @include mq-down(xxl) {
    html {

      font-size: vw(16, 1920);
    }
  }
}

@include mq-up(lg) {
  @include mq-down(xl) {
    html {
      font-size: vw(15, 1399);
    }
  }
}

@include mq-up(sm) {
  @include mq-down(lg) {
    html {
      font-size: vw(12, 1025);
    }
  }
}

@include mq-down(sm) {
  html {
    font-size: vw(14, 375);
  }
}

body {
  @include mq-down(lg) {
    &.is-non-scroll {
      overflow: hidden;
    }
  }
}



*,
*::after,
*::before {
  box-sizing: border-box;
  outline: none;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  transition: linear .32s;
}

a img:hover,
a:hover {
  opacity: .8;
}

a img:hover {
  opacity: .8;
}

li img {
  display: block;
}

a img {
  border-style: none;
}

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



h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

dt {
  font-weight: 700;
}

input[type='text'],
input[type='email'],
input[type='tel'],
textarea {
  border: 2px solid #efefef;
  background-color: #f6f6f6;
  padding: fz(14) fz(25);
  width: 100%;
  border-radius: fz(8);
  font-weight: 300;


  @include mq-down(sm) {}

  &::placeholder {
    color: #818c8a;
  }

  &:focus {
    border-color: $orange;
  }

  &.--required {
    border-color: $key_pink;
  }

  &.is-error {
    border-color: $key_pink;
  }


}

input[type='submit'] {
  appearance: none;
  background-color: $orange;
  color: #fff;
  display: block;
  padding: fz(8) fz(12);


  @include mq-down(sm) {
    padding: fz(15) fz(10);

  }
}

select {
  border: 1px solid #fff;
  color: #808080;
  padding: fz(14) fz(21);
  padding-right: fz(55);
  background: #fff url(../images/common/select-arw.svg) no-repeat 95% 50%;
  background-size: fz(20) auto;
  width: fz(345);
  border-radius: fz(5);

  &.--required {
    border-color: $key_pink;
    background-image: url(../images/common/select-arw--rq.svg);
  }

  @include mq-down(md) {
    max-width: 88%;
  }
}

textarea {
  height: fz(208);
  overflow-y: scroll;

  @include mq-down(md) {
    height: fz(220);
  }
}

input[type='checkbox'],
input[type='radio'] {
  position: absolute;
  visibility: hidden;
}




video {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

p {
  @include mq-down(md) {
    font-size: 1.1rem;
  }
}


.slick-dots {
  text-align: center;

  li {
    font-size: 0;
    display: inline-block;
    border-radius: 50%;
    background-color: #E9E9E9;
    width: fz(11);
    height: fz(11);
    margin: 0 fz(5);

    &.slick-active {
      background-color: $key_pink;
    }
  }
}