@charset "utf-8";

/* CSS Document */
:root {
  --color-primary: #141414;
  --color-secondary: #EFDEC5;
  --color-tertiary: #BE824B;
  --width-variable: 100vw;
  --color-support: #e2e0dc;
  --color-model01: #eddabc;
  --color-model02: #fff;
  --color-model03: #dbd0c8;
  --color-model04: #dbdfd6;
}
/*
*	variable max-width
*/
@media (min-width: 1000px) {
	:root {
		--width-variable: 1000px;
	}
}

.fixed-content {
  display: none;
}


.sp-only {
  display: none !important;
}

html {
  font-size: 62.5%;
}

@font-face {
  font-family: 'VolvoNovum';
  src: url('font/Volvo Novum-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'VolvoNovum';
  src: url('font/Volvo Novum-Medium.otf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'VolvoNovum';
  src: url('font/Volvo Novum-MediumItalic.otf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'VolvoNovum';
  src: url('font/Volvo Novum-BoldItalic.otf');
  font-weight: bold;
  font-style: italic;
}

body {
  font-size: 1.6rem;
  font-family: YakuHanJP_Noto, VolvoNovum, 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  color: #000;
  line-height: 1.8;
  font-weight: 400;
}

p {
  line-height: 1.8;
  font-feature-settings: "palt";
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 400;
  line-height: 1.6;
}

h3 {
  margin: 0 auto;
}

img {
  max-width: 100%;
}

.fade {
  opacity: 0;
  transform: translate(0, 5rem);
  transition: 1s cubic-bezier(.01, .65, .38, .99);
}

.fade.active {
  opacity: 1;
  transform: translate(0, 0);
}

a {
  transition: .3s;
}

a:hover {
  opacity: .7;
}

picture {
  display: block;
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
}

a:hover {
  opacity: 0.8;
}

/*----------------------------------------------------------------------------------------------------------------*/

.hero {
  padding-bottom: calc(var(--width-variable) / (1000 / 100));
}
.hero__title {
  width: calc(var(--width-variable) / (1000 / 840));
  margin: calc(var(--width-variable) / (1000 / 100)) auto;
}
.hero__cta {
  display: block;
  width: calc(var(--width-variable) / (1000 / 313.6));
  margin: auto;
}

.support {
  background-color: var(--color-support);
  padding: calc(var(--width-variable) / (1000 / 100)) 0;
}
.support__title {
  width: calc(var(--width-variable) / (1000 / 753));
  margin: auto;
}
.support__box {
  background-color: #fff;
  margin-top: calc(var(--width-variable) / (1000 / 50));
  padding: calc(var(--width-variable) / (1000 / 60)) 0 calc(var(--width-variable) / (1000 / 85));
}
.support__about {
  width: calc(var(--width-variable) / (1000 / 652));
  margin: auto;
}
.support__campaign {
  width: calc(var(--width-variable) / (1000 / 748));
  margin: calc(var(--width-variable) / (1000 / 35)) auto 0;
}

.ev__title {
  width: calc(var(--width-variable) / (1000 / 514.8));
  margin: calc(var(--width-variable) / (1000 / 75)) auto 0;
}
.ev__detail {
  width: calc(var(--width-variable) / (1000 / 748));
  margin: calc(var(--width-variable) / (1000 / 50)) auto 0;
}

.movie{
  width: calc(var(--width-variable) / (1000 / 748));
  margin: calc(var(--width-variable) / (1000 / 50)) auto 0;
}
.movie__title{
  width: calc(var(--width-variable) / (1000 / 748));
  margin: auto;
}

.catch {
  width: calc(var(--width-variable) / (1000 / 560));
  margin: calc(var(--width-variable) / (1000 / 100)) auto;
}

.model {
  padding: calc(var(--width-variable) / (1000 / 150)) 0 calc(var(--width-variable) / (1000 / 100));
}
.model2 {
  padding: calc(var(--width-variable) / (1000 / 80)) 0 calc(var(--width-variable) / (1000 / 100));
}
.model-01 {
  background-color: var(--color-model01);
}
.model-01 .model__title {
  width: calc(var(--width-variable) / (1000 / 450.5));
}
.model-01 .model__text {
  width: calc(var(--width-variable) / (1000 / 600));
}
.model-01 .model__sub {
  width: calc(var(--width-variable) / (1000 / 264));
}
.model-02 {
  background-color: var(--color-model02);
}
.model-02 .model__title {
  width: calc(var(--width-variable) / (1000 / 119.2));
}
.model-02 .model__text {
  width: calc(var(--width-variable) / (1000 / 686));
}
.model-02 .model__sub {
  width: calc(var(--width-variable) / (1000 / 264));
}
.model-03 {
  background-color: var(--color-model03);
}
.model-03 .model__title {
  width: calc(var(--width-variable) / (1000 / 600));
}
.model-03 .model__text {
  width: calc(var(--width-variable) / (1000 / 757.5));
}
.model-03 .model__sub {
  width: calc(var(--width-variable) / (1000 / 367.7));
}
.model-03 .model__sub2 {
  width: calc(var(--width-variable) / (1000 / 264));
}
.model-04 {
  background-color: var(--color-model04);
}
.model-04 .model__title {
  width: calc(var(--width-variable) / (1000 / 600));
}
.model-04 .model__text {
  width: calc(var(--width-variable) / (1000 / 757.5));
}
.model-04 .model__sub {
  width: calc(var(--width-variable) / (1000 / 367.7));
}
.model-04 .model__sub2 {
  width: calc(var(--width-variable) / (1000 / 264));
}
.model__row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.model__icon {
  width: calc(var(--width-variable) / (1000 / 143.5));
}
.model__image {
  margin-top: calc(var(--width-variable) / (1000 / 65));
}
.model__image2 {
  margin-top: calc(var(--width-variable) / (1000 / 35));
}
.model__wrap {
  width: calc(var(--width-variable) / (1000 / 747.5));
  margin: calc(var(--width-variable) / (1000 / 65)) auto 0;
}
.model__detail {
  margin-top: calc(var(--width-variable) / (1000 / 100));
}
.model__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--width-variable) / (1000 / 50)) calc(var(--width-variable) / (1000 / 35));
  margin-top: calc(var(--width-variable) / (1000 / 25));
}
.model__item {
  width: calc(var(--width-variable) / (1000 / 354.6));
}
.model__other {
  margin-top: calc(var(--width-variable) / (1000 / 100));
}
.note {
  margin-top: calc(var(--width-variable) / (1000 / 120));
}

/*----------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1199px) {
  img {
    max-width: 100%;
  }

  .inner {
    width: 100%;
    padding: 0 calc(var(--width-variable) / 35);
  }
}

/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------スマートフォン／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) {
  .sp-only {
    display: block !important;
  }

  .pc-only {
    display: none !important;
  }

  .inner {
    width: 100%;
    padding: 0 2rem;
  }

  img {
    max-width: 100%;
  }

  header {
    padding: 3rem 0;
  }

  header .inner {
    padding: 0 1.5rem;
  }

  header h1 {
    width: 33.33vw;
    margin: 0 auto;
  }

  .fixed-content {
    display: block;
    position: fixed;
    width: 80%;
    top: auto;
    bottom: 1rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: 40rem;
  }

  .cta__link {
    margin: calc(var(--width-variable) / 7.5) auto 0;
  }

  .cta__link img {
    width: calc(var(--width-variable) / 1.388); 
  }

  .fade {
    opacity: 0;
    transform: translate(0, 5rem);
    transition: 1s cubic-bezier(.01, .65, .38, .99);
  }

  .fade.active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .hidden {
    animation: fade .2s ease-in-out forwards;
    pointer-events:none;/* 重要 */
  }

  @keyframes fade {
      from {
          opacity: 1;
      }

      to {
          opacity: 0;
      }
  }

  .visible {
      animation: fadeOut .2s ease-in-out forwards;
      pointer-events:all;/* 重要 */
  }

  @keyframes fadeOut {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .hero {
    padding-bottom: calc(var(--width-variable) / (750 / 142));
  }

  .hero__title {
    width: calc(var(--width-variable) / (750 / 653));
    margin: calc(var(--width-variable) / (750 / 120)) auto calc(var(--width-variable) / (750 / 80));
  }

  .hero__cta {
    display: block;
    width: calc(var(--width-variable) / (750 / 410));
    margin: auto;
  }

  .support {
    padding: calc(var(--width-variable) / (750 / 120)) 0 calc(var(--width-variable) / (750 / 100));
  }
  .support__title {
    width: calc(var(--width-variable) / (750 / 475));
  }
  .support__box {
    margin-top: calc(var(--width-variable) / (750 / 80));
    padding: calc(var(--width-variable) / (750 / 80)) 0 calc(var(--width-variable) / (750 / 50));
  }
  .support__about {
    width: calc(var(--width-variable) / (750 / 588));
  }
  .support__campaign {
    width: calc(var(--width-variable) / (750 / 590));
    margin: calc(var(--width-variable) / (750 / 60)) auto 0;
  }
  
  .ev__title {
    width: calc(var(--width-variable) / (750 / 590));
    margin: calc(var(--width-variable) / (750 / 80)) auto 0;
  }
  .ev__detail {
    width: calc(var(--width-variable) / (750 / 590));
    margin: calc(var(--width-variable) / (750 / 80)) auto 0;
  }

  .movie{
    width: calc(var(--width-variable) / (750 / 590));
    margin: calc(var(--width-variable) / (750 / 40)) auto 0;
  }
  .movie__title{
    width: calc(var(--width-variable) / (750 / 590));
  }

  .catch {
    width: calc(var(--width-variable) / (750 / 673));
    margin: calc(var(--width-variable) / (750 / 140)) auto;
  }

  .model {
    padding: calc(var(--width-variable) / (750 / 120)) 0 calc(var(--width-variable) / (750 / 140));
  }
  .model2 {
    padding: calc(var(--width-variable) / (750 / 45)) 0 calc(var(--width-variable) / (750 / 140));
  }
  .model-01 .model__title {
    width: calc(var(--width-variable) / (750 / 524));
  }
  .model-01 .model__text {
    width: calc(var(--width-variable) / (750 / 606));
  }
  .model-01 .model__sub {
    width: calc(var(--width-variable) / (750 / 403));
  }

  .model-02 .model__title {
    width: calc(var(--width-variable) / (750 / 138.7));
  }
  .model-02 .model__text {
    width: calc(var(--width-variable) / (750 / 664));
  }
  .model-02 .model__sub {
    width: calc(var(--width-variable) / (750 / 403));
  }

  .model-03 .model__title {
    width: calc(var(--width-variable) / (750 / 533));
  }
  .model-03 .model__text {
    width: calc(var(--width-variable) / (750 / 664.4));
  }
  .model-03 .model__sub {
    width: calc(var(--width-variable) / (750 / 544.7));
  }
  .model-03 .model__sub2 {
    width: calc(var(--width-variable) / (750 / 403));
  }

  .model-04 .model__title {
    width: calc(var(--width-variable) / (750 / 566.7));
  }
  .model-04 .model__text {
    width: calc(var(--width-variable) / (750 / 665.7));
  }
  .model-04 .model__sub {
    width: calc(var(--width-variable) / (750 / 544.7));
  }
  .model-04 .model__sub2 {
    width: calc(var(--width-variable) / (750 / 403));
  }

  .model__icon {
    width: calc(var(--width-variable) / (750 / 151));
  }
  .model__image {
    margin-top: calc(var(--width-variable) / (750 / 40));
  }
  .model__image2 {
    margin-top: calc(var(--width-variable) / (750 / 20));
  }
  .model__wrap {
    width: calc(var(--width-variable) / (750 / 670));
    margin: calc(var(--width-variable) / (750 / 90)) auto 0;
  }
  .model__detail {
    margin-top: calc(var(--width-variable) / (750 / 125));
  }
  .model__list {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--width-variable) / (750 / 40)) calc(var(--width-variable) / (1000 / 32));
    margin-top: calc(var(--width-variable) / (750 / 25));
  }
  .model__item {
    width: calc(var(--width-variable) / (750 / 318));
  }
  .model__other {
    margin-top: calc(var(--width-variable) / (750 / 90));
  }

  .note {
    margin-top: calc(var(--width-variable) / (750 / 60));
  }

}