@charset "utf-8";


/* --------------- base --------------- */
body{
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic,"Hiragino Kaku Gothic ProN",  "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #282B35;
  background-color: #fafafa;
}
a{
  text-decoration: none;
  color: #282B35;
  transition: 0.4s cubic-bezier(0,.51,.05,1);
}
img,svg {
  width: 100%;
  height: auto;
  vertical-align: middle;
  box-sizing: border-box;
}
button{
  display: block;
  letter-spacing: 0.1em;
}
.site-wrapper{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
main{
  position: relative;
  z-index: 1;
  flex: 1;
}
*,
*::before,
*::after {
  box-sizing: boder-box;
}
.en-upper{
  text-transform: uppercase;
}
.en-normal{
  text-transform: none;
}
.ib {
  display: inline-block;
}
.pc-only{
  display: none;
}
.sp-none{
  display: none;
}
.image-wrap{
  overflow: hidden;
}

@media (min-width: 768px){
  .sp-only{
    display: none;
  }
  .sp-none{
    display: block;
  }
}
@media (min-width: 1024px){
  body{
    line-height: 1.85;
  }
  .pc-none{
    display: none;
  }
  .pc-only{
    display: block;
  }
}



/* --------------- type --------------- */
/* ---- JP ---- */
/* 13-18 */
body{
  font-size: clamp(0.8125rem, 0.7367rem + 0.3236vw, 1.125rem);
}
.txt-bold{
  font-weight: 600;
}
.ls-message{
  letter-spacing: 0.2em;
}
.lh-message{
  line-height: 2.5;
}
.lh-info{
  line-height: 1.6;
}
.txt-adjust{
  font-feature-settings: "palt";
}
.txt-just{
  text-align: justify;
}
/* txt */
/* 10-14 */
.txt-2s{
  font-size: 0.625rem;
  font-size: clamp(0.625rem, 0.5643rem + 0.2589vw, 0.875rem);
}
/* 12-16 */
.txt-s{
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 0.6893rem + 0.2589vw, 1rem);
}
/* 14-20 */
.txt-l{
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.784rem + 0.3883vw, 1.25rem);
}
/* ttl */
/* 15-24 */
.ttl-jp-2s{
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 0.801rem + 0.5825vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  font-feature-settings: "palt";
}
/* 16-28 */
.ttl-jp-s{
  font-size: 1rem;
  font-size: clamp(1rem, 0.818rem + 0.7767vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  font-feature-settings: "palt";
}
/* 20-40 */
.ttl-jp-m{
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 0.9466rem + 1.2945vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  font-feature-settings: "palt";
}
/* 22-50 */
.ttl-jp-l{
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 0.9502rem + 1.8123vw, 3.125rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  font-feature-settings: "palt";
}
/* 24-56 */
.ttl-jp-2l{
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.0146rem + 2.0712vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  font-feature-settings: "palt";
}
/* 28-72 */
.ttl-jp-3l{
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 1.0825rem + 2.8479vw, 4.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  font-feature-settings: "palt";
}

/* ---- EN ---- */
.en-regular{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.en-medium{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
.en-italic{
  font-style: italic;
}
/* 28-72 */
.ttl-en-3l{
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 1.0825rem + 2.8479vw, 4.5rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
}
/* 24-60 */
.ttl-en-2l{
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 0.9539rem + 2.3301vw, 3.75rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
}
/* 22-50 */
.ttl-en-l{
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 0.9502rem + 1.8123vw, 3.125rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
}
/* 20-40 */
.ttl-en-m{
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 0.9466rem + 1.2945vw, 2.5rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
}
/* 17-30 */
.ttl-en-s{
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, 0.8653rem + 0.8414vw, 1.875rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
}
/* 15-24 */
.ttl-en-2s{
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 0.801rem + 0.5825vw, 1.5rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
}


/* --------------- wrap --------------- */
.wrap-l{
  width: 90%;
  margin: 0 auto;
}
.wrap-l-left{
  width: 95%;
}
.wrap-l-right{
  width: 95%;
  margin-left: auto;
}
.wrap-l-liquid{
  width: 90%;
  margin: 0 auto;
}
.wrap-m{
  width: 90%;
  max-width: 32em;
  margin: 0 auto;
}
.wrap-m-left{
  width: 95%;
  max-width: calc((100vw - 32em) / 2 + 32em);
}
.wrap-m-right{
  width: 95%;
  max-width: calc((100vw - 32em) / 2 + 32em);
  margin-left: auto;
}
@media (min-width: 768px){
  .wrap-m{
    width: 78%;
    max-width: 46em;
  }
  .wrap-m-left{
    width: 89%;
    max-width: calc((100vw - 46em) / 2 + 46em);
  }
  .wrap-m-right{
    width: 89%;
    max-width: calc((100vw - 46em) / 2 + 46em);
  }
}

@media (min-width: 1024px){
  .wrap-l{
    width: 84%;
    max-width: 89em;
  }
  .wrap-l-left{
    width: 92%;
    max-width: calc((100vw - 89em) / 2 + 89em);
  }
  .wrap-l-right{
    width: 92%;
    max-width: calc((100vw - 89em) / 2 + 89em);
  }
  .wrap-l-liquid{
    width: 84%;
  }
  .wrap-m{
    max-width: 64em;
  }
  .wrap-m-left{
    max-width: calc((100vw - 64em) / 2 + 64em);
  }
  .wrap-m-right{
    max-width: calc((100vw - 64em) / 2 + 64em);
  }
}


/* --------------- space --------------- */
/* 112-280 */
.space-xl{
  padding-top: 7rem;
  padding-top: max(7rem, min(4.4514rem + 10.8737vw, 17.5rem));
}
.space-xl-bottom{
  padding-bottom: 7rem;
  padding-bottom: max(7rem, min(4.4514rem + 10.8737vw, 17.5rem));
}
/* 96-240 */
.space-l{
  padding-top: 6rem;
  padding-top: max(6rem, min(3.8155rem + 9.3203vw, 15rem));
}
.space-l-bottom{
  padding-bottom: 6rem;
  padding-bottom: max(6rem, min(3.8155rem + 9.3203vw, 15rem));
}
/* 80-200 */
.space-m{
  padding-top: 5rem;
  padding-top: max(5rem, min(3.1796rem + 7.7669vw, 12.5rem));
}
.space-m-bottom{
  padding-bottom: 5rem;
  padding-bottom: max(5rem, min(3.1796rem + 7.7669vw, 12.5rem));
}
/* 64-160 */
.space-s{
  padding-top: 4rem;
  padding-top: max(4rem, min(2.5436rem + 6.2135vw, 10rem));
}
.space-s-bottom{
  padding-bottom: 4rem;
  padding-bottom: max(4rem, min(2.5436rem + 6.2135vw, 10rem));
}
/* 48-120 */
.space-xs{
  padding-top: 3rem;
  padding-top: max(3rem, min(1.9077rem + 4.6601vw, 7.5rem));
}
.space-xs-bottom{
  padding-bottom: 3rem;
  padding-bottom: max(3rem, min(1.9077rem + 4.6601vw, 7.5rem));
}
/* 40-100 */
.space-xxs{
  padding-top: 2.5rem;
  padding-top: max(2.5rem, min(1.5898rem + 3.8834vw, 6.25rem));
}
.space-xxs-bottom{
  padding-bottom: 2.5rem;
  padding-bottom: max(2.5rem, min(1.5898rem + 3.8834vw, 6.25rem));
}


/* --------------- color --------------- */

.txt-black, .txt-black a{
  color: #282B35;
}
.txt-red, .txt-red a{
  color: #b63535;
}
.txt-white01, .txt-white01 a{
  color: #e4e6ea;
}
.txt-white02, .txt-white02 a{
  color: #edebeb;
}
.txt-white03, .txt-white03 a{
  color: #f8f6f6;
}
.bg-black{
  background-color: #262b33;
}
.bg-white01{
  background-color: #f9f9f9;
}
.bg-white02{
  background-color: #e8eaed;
}
.bg-white03{
  background-color: #edebeb;
}
.bg-red01{
  background-color: #b63535;
}
.bg-red02{
  background-color: #ba4242;
}
.bg-blue01{
  background-color: #273444;
}


/* --------------- motion --------------- */
.motion01{
  transition: 0.4s cubic-bezier(0,.51,.05,1);
}
.motion02{
  transition: 0.4s cubic-bezier(0,.43,.26,1);
}