@charset "utf-8";

/* common */
.main-inner {
  position: relative;
  z-index: 4000;
}
.main-inner img {
  line-height: 0.1;
}
.cnt__inner {
  position: relative;
}
.ani-rotateIn,
.ani-fadeInDown,
.ani-fadeInUp,
.ani-fadeIn {
  opacity: 0;
}

/* =========================
  for SP
========================= */
@media screen and (max-width: 768px) {
  
  /* common */
  .main-inner {
    overflow: hidden;
  }
  .onlyPc {
    display: none;
  }
  .ani-sp-rotateIn,
  .ani-sp-fadeInDown,
  .ani-sp-fadeInUp,
  .ani-sp-fadeInLeft,
  .ani-sp-fadeInRight,
  .ani-sp-fadeIn {
    opacity: 0;
  }

  /* .mv */
  .mv .slide {
  }
  .mv .swiper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    /*overflow: visible;*/
  }
  .mv .swiper .swiper-slide {
    position: relative;
    box-sizing: border-box;
  }
  .mv .swiper-pagination {
    width: 100%;
    top: auto;
    bottom: calc( 40 / 750 * 100vw );
    line-height: 0.1;
    text-align: center;
  }
  .mv .swiper-pagination .swiper-pagination-bullet {
    width: calc( 48 / 750 * 100vw );
    height: calc( 6 / 750 * 100vw );
    background: #fff;
    opacity: 1;
    margin: 0 calc( 11 / 750 * 100vw );
    border-radius: 0;
  }
  .mv .swiper-pagination .swiper-pagination-bullet-active {
    background: #171717;
  }

  /* .menu */
  .menu ul {
    display: flex;
    flex-wrap: wrap;
    background: url("../images/hdg-menu-01_sp.png") left calc( 120 / 750 * 100vw ) / 100% auto no-repeat;
  }
  .menu ul li {
    width: 50%;
  }
  .menu ul li:nth-child(3),
  .menu ul li:nth-child(4),
  .menu ul li:nth-child(5) {
    width: 33.33%;
    margin-top: calc( 57 / 750 * 100vw );
  }

  /* .what */
  .what .cnt__inner {
    background: url("../images/bg-what-01_sp.jpg?20250804") left top / 100% auto no-repeat;
    aspect-ratio: 750 / 1198;
    text-align: center;
    padding-top: calc( 127 / 750 * 100vw );
    box-sizing: border-box;
}
  .what h2 {
    width: calc( 375 / 750 * 100vw );
    margin: 0 auto calc( 71 / 750 * 100vw );
    line-height: 0.1
  }
  .what P {
    width: calc( 583 / 750 * 100vw );
    margin: 0 auto calc( 76 / 750 * 100vw );
  }
  .what h3 {
    width: calc( 381 / 750 * 100vw );
    margin: 0 auto calc( 60 / 750 * 100vw );
    line-height: 0.1
  }
  .what div.logo {
    width: calc( 374 / 750 * 100vw );
    margin: 0 auto;
  }

  /* .movie */
  .movie .cnt__inner {
    background: url("../images/bg-movie-01_sp.jpg?20250804") left top / 100% auto no-repeat;
    aspect-ratio: 750 / 1338;
    text-align: center;
    padding-top: calc( 168 / 750 * 100vw );
    font-size: 0;
    box-sizing: border-box;
}
  .movie h2 {
    width: calc( 586 / 750 * 100vw );
    margin: 0 auto calc( 69 / 750 * 100vw );
  }
  .movie iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .movie .movie__mv01 {
    width: calc( 670 / 750 * 100vw );
    margin: 0 auto calc( 137 / 750 * 100vw );
  }
  .movie .movie__mv02 {
    display: inline-block;
    width: calc( 470 / 750 * 100vw );
  }

  /* .about */
  .about .cnt__inner {
    background: url("../images/bg-about-01_sp.jpg?20250804") left top / 100% auto no-repeat;
    aspect-ratio: 750 / 6070;
    text-align: center;
    padding-top: calc( 268 / 750 * 100vw );
    font-size: 0;
    box-sizing: border-box;
  }
  .about h2 {
    width: calc( 622 / 750 * 100vw );
    margin: 0 auto calc( 155 / 750 * 100vw );
  }
  .about h2 + p {
    width: calc( 640 / 750 * 100vw );
    margin: 0 auto calc( 90 / 750 * 100vw );
  }
  .about iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .about .about__mv01 {
    width: calc( 670 / 750 * 100vw );
    margin: 0 auto calc( 261 / 750 * 100vw );
  }
  .about .about__point {
    margin-bottom: calc( 312 / 750 * 100vw );
  }
  .about .about__point li {
    width: calc( 703 / 750 * 100vw );
    margin: 0  0 calc( 35 / 750 * 100vw ) auto;
  }
  .about .about__point li:nth-child(2) {
    width: calc( 713 / 750 * 100vw );
    margin: 0  auto calc( 35 / 750 * 100vw ) 0;
  }
  .about .about__more {
    width: 100%;
    margin: calc( -231 / 750 * 100vw ) auto 0;
    padding: calc( 571 / 750 * 100vw )  0 0;
    position: relative;
    box-sizing: border-box;
  }
  .about .about__more dt {
    width: calc( 552 / 750 * 100vw );
    margin: 0 auto;
  }
  .about .about__more dd.about__more-img {
    position: absolute;
    left: calc( 149/ 750 * 100vw );
    top: calc( 0 / 750 * 100vw );
    width: calc( 463 / 750 * 100vw );
  }

  /* .product */
  .product h2 {
    background: url("../images/bg-product-01_sp.jpg?20250804") left top / 100% auto no-repeat;
    aspect-ratio: 750 / 414;
    text-align: center;
    padding-top: calc( 268 / 750 * 100vw );
    box-sizing: border-box;
  }
  .product h2 img {
    width: calc( 328 / 750 * 100vw );
  }
  .product .product__list03,
  .product .product__list01,
  .product .product__list02 {
    position: relative;
    margin-bottom: calc( 120 / 750 * 100vw );
  }
  .product .slide {
    position: absolute;
    left: 0;
    width: 100%;
  }
  .product .swiper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible;
  }
  .product .swiper .swiper-scrollbar {
    display: none;
  }
  .product .swiper .swiper-slide {
    position: relative;
    width: calc( 580 / 750 * 100vw );
    padding: 0 calc( 20 / 750 * 100vw );
    box-sizing: border-box;
  }
  .product .swiper-pagination {
    width: 100%;
    top: auto;
    bottom: calc( -55 / 750 * 100vw );
    line-height: 0.1;
  }
  .product .swiper-pagination .swiper-pagination-bullet {
    width: calc( 20 / 750 * 100vw );
    height: calc( 20 / 750 * 100vw );
    background: #fff;
    opacity: 1;
    margin: 0 calc( 13 / 750 * 100vw );
  }
  .product .swiper-pagination .swiper-pagination-bullet-active {
    background: #359044;
  }
  .product .product__list01 .slide {
    top: calc( 346 / 750 * 100vw );
  }
  .product .product__list01 .swiper .swiper-slide {
    padding-top: calc( 50/ 750 * 100vw );
  }
  .product .swiper .swiper-slide .product__list01-icon01 {
    position: absolute;
    left: calc( -5 / 750 * 100vw );
    top: 0;
    width: calc( 154 / 750 * 100vw );
  }
  .product .swiper .swiper-slide .product__list01-icon02 {
    position: absolute;
    left: 0;
    top: calc( 30 / 750 * 100vw );
    width: calc( 174 / 750 * 100vw );
  }
  .product .product__list02 .slide {
    top: calc( 530 / 750 * 100vw );
  }
  .product .product__list02 .swiper .swiper-slide {
    padding-top: calc( 20/ 750 * 100vw );
  }
  .product .swiper .swiper-slide .product__list02-icon01 {
    position: absolute;
    left: 0;
    top: 0;
    width: calc( 171 / 750 * 100vw );
  }
  .product .product__list03 .item {
    position: absolute;
    left: calc( 85 / 750 * 100vw );
    top: calc( 597 / 750 * 100vw );
    width: calc( 580 / 750 * 100vw );
  }
  .product .product__list-btn {
    position: absolute;
    left:calc( 164 / 750 * 100vw );
    bottom: calc( 40 / 750 * 100vw );
    width: calc( 448 / 750 * 100vw );
  }

  /* .line */
  .line {
    margin-bottom: calc( 100 / 750 * 100vw );
  }
  .line a {
    position: absolute;
    left: calc( 40 / 750 * 100vw );
    bottom: calc( 58 / 750 * 100vw );
    width: calc( 696 / 750 * 100vw );
  }

  /* .fixedBtn */
  .fixedBtn {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 10000;
  }

  /* .popup */
  .popup {
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20000;
    display: none;
  }
  .popup .popup__cover {
    background-color: rgba(0, 0, 0, 0.85);
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 21000;
    cursor: pointer;
  }
  .popup .popup__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
  }
  .popup .popup__inner {
    width: calc( 670 / 750 * 100vw );
    box-sizing: border-box;
    margin: auto;
    max-height: 90vh;
    z-index: 22000;
    position: relative;
  }
  .popup iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .popup .popup__close {
    position: absolute;
    right: 0;
    top: calc( -61 / 750 * 100vw );
    cursor: pointer;
    width: calc( 53 / 750 * 100vw );
    height: calc( 53 / 750 * 100vw );
  }

} /* /for SP */

/* =========================
  for PC
========================= */
@media screen and (min-width: 769px) {
  
  /* common */
  @media screen and (max-width: 1200px) {
    body {
      width: 1200px;
      margin: 0 auto;
    }
  }
  .ani-pc-rotateIn,
  .ani-pc-fadeInDown,
  .ani-pc-fadeInUp,
  .ani-pc-fadeInLeft,
  .ani-pc-fadeInRight,
  .ani-pc-fadeIn {
    opacity: 0;
  }

  /* a.btnOver */
  a.btnOver {
    display: inline-block;
  }
  a.btnOver img {
    transition: all .3s ease;
  }
  a.btnOver:hover img {
    opacity: .0;
  }

  /*.main-inner*/
  .main-inner {
    max-width: 1920px;
    margin: 0 auto;
  }
  @media screen and (min-width: 1536px) {
    
    /* common */
    main {
      position: relative;
      overflow-x: hidden;
    }
    .main-inner {
      position: relative;
      left: 50%;
      margin-left: -960px;
      width: 1920px;
    }
  }
  .main-inner img {
    /*-webkit-backface-visibility: hidden;*/
    image-rendering: -webkit-optimize-contrast;
  }

  /* .mv */
  .mv .slide {
  }
  .mv .swiper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    /*overflow: visible;*/
  }
  .mv .swiper .swiper-slide {
    position: relative;
    box-sizing: border-box;
  }
  .mv .swiper-pagination {
    width: 100%;
    top: auto;
    bottom: calc( 28 / 780 * 100% );
    line-height: 0.1;
    text-align: center;
  }
  .mv .swiper-pagination .swiper-pagination-bullet {
    width: calc( 36 / 1920 * 100% );
    height: 4px;
    background: #fff;
    opacity: 1;
    margin: 0 calc( 7 / 1920 * 100% );
    border-radius: 0;
  }
  .mv .swiper-pagination .swiper-pagination-bullet-active {
    background: #171717;
  }

  /* .menu */
  .menu ul {
    display: flex;
    justify-content: center;
  }
  .menu ul li {
  }
  .menu ul li:nth-child(1) a {
    background: url("../images/btn-menu-01_on.png?20250804") left top / 100% auto no-repeat;
  }
  .menu ul li:nth-child(2) a {
    background: url("../images/btn-menu-02_on.png?20250804") left top / 100% auto no-repeat;
  }
  .menu ul li:nth-child(3) a {
    background: url("../images/btn-menu-03_on.png?20250804") left top / 100% auto no-repeat;
  }
  .menu ul li:nth-child(4) a {
    background: url("../images/btn-menu-04_on.png?20250804") left top / 100% auto no-repeat;
  }
  .menu ul li:nth-child(5) a {
    background: url("../images/btn-menu-05_on.png?20250804") left top / 100% auto no-repeat;
  }
  @media screen and (max-width: 1400px) {
    .menu ul li:nth-child(1) {
      width: calc( 196 / 1400 * 100% );
    }
    .menu ul li:nth-child(2) {
      width: calc( 244 / 1400 * 100% );
    }
    .menu ul li:nth-child(3) {
      width: calc( 202 / 1400 * 100% );
    }
    .menu ul li:nth-child(4) {
      width: calc( 312 / 1400 * 100% );
    }
    .menu ul li:nth-child(5) {
      width: calc( 294 / 1400 * 100% );
    }
  }

  /* .what */
  .what {
  }
  .what .cnt__inner {
    background: url("../images/bg-what-01.jpg?20250804") center bottom / auto 100% no-repeat;
    aspect-ratio: 1920 / 811;
    text-align: center;
    padding-top: calc( 128 / 1920 * 100% );
  }
  .what h2 {
    width: calc( 241 / 1920 * 100% );
    margin: 0 auto calc( 64 / 1920 * 100% );
    line-height: 0.1
  }
  .what P {
    width: calc( 537 / 1920 * 100% );
    margin: 0 auto calc( 56 / 1920 * 100% );
  }
  .what h3 {
    width: calc( 541 / 1920 * 100% );
    margin: 0 auto calc( 56 / 1920 * 100% );
    line-height: 0.1
  }
  .what div.logo {
    width: calc( 312 / 1920 * 100% );
    margin: 0 auto;
  }

  /* .movie */
  .movie {
  }
  .movie .cnt__inner {
    background: url("../images/bg-movie-01.jpg?20250804") center bottom/ auto 100% no-repeat;
    aspect-ratio: 1920 / 1311;
    text-align: center;
    padding: calc( 120 / 1920 * 100% ) 0 0;
  }
  .movie h2 {
    width: calc( 439 / 1920 * 100% );
    margin: 0 auto;
    line-height: 0.1
  }
  .movie iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .movie .movie__mv01 {
    position: absolute;
    left: calc( 530 / 1920 * 100% );
    top: calc( 260 / 1311 * 100% );
    width: calc( 860 / 1920 * 100% );
  }
  .movie .movie__mv01 a {
    background: url("../images/btn-movie-s30_on.jpg?20250804") center top / 100% auto no-repeat;
  }
  .movie .movie__mv02 {
    position: absolute;
    left: calc( 755 / 1920 * 100% );
    top: calc( 849 / 1311 * 100% );
    width: calc( 410 / 1920 * 100% );
  }
  .movie .movie__mv02 a {
    display: block;
    background: url("../images/btn-movie-s15_on.jpg?20250804") center top / 100% auto no-repeat;
  }

  /* .about */
  .about .cnt__inner {
    background: url("../images/bg-about-01.jpg?20250804") center top / 100% auto no-repeat;
    aspect-ratio: 1920 / 2132;
    text-align: center;
    padding: calc( 114 / 1920 * 100% ) 0 0;
		box-sizing: border-box;
  }
  .about iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .about h2 {
    width: calc( 482 / 1920 * 100% );
    margin: 0 auto calc( 77 / 1920 * 100% );
	}
  .about h2 + p {
    width: calc( 566 / 1920 * 100% );
    margin: 0 auto calc( 66 / 1920 * 100% );
		line-height: 0.1;
	}
  .about .about__mv01 {
    width: calc( 620 / 1920 * 100% );
    margin: 0 auto calc( 143 / 1920 * 100% );
  }
  .about .about__mv01 a {
    display: block;
    background: url("../images/btn-about-s6_on.jpg?20250804") center top / 100% auto no-repeat;
  }
  .about .about__point {
    font-size: 0;
    margin: 0 auto calc( 26 / 1920 * 100% );
  }
  .about .about__point li {
    width: calc( 456 / 1920 * 100% );
    display: inline-block;
  }
  .about .about__point li + li {
    margin-left: calc( -43 / 1920 * 100% );
  }
  .about .about__more {
    width: calc( 1200 / 1920 * 100% );
    height: calc( 460 / 1920 * 100% );
    margin: 0 auto;
    padding: calc( 141 / 1920 * 100% )  0 0;
    position: relative;
    box-sizing: border-box;
  }
  .about .about__more dt {
    width: calc( 578 / 1200 * 100% );
    margin-left: calc( 506 / 1200 * 100% );
  }
  .about .about__more dd.about__more-img {
    position: absolute;
    left: calc( 113 / 1200 * 100% );
    top: calc( 55 / 440 * 100% );
    width: calc( 358 / 1200 * 100% );
  }
  .about .about__more dd.about__more-cpt {
    position: absolute;
    left: calc( 75 / 1200 * 100% );
    top: calc( 307 / 460 * 100% );
    width: calc( 204 / 1200 * 100% );
  }

  /* .product */
  .product h2 {
    background: url("../images/bg-product-01.jpg?20250804") center top / 100% auto no-repeat;
    aspect-ratio: 1920 / 266;
    text-align: center;
    padding: calc( 109 / 1920 * 100% ) 0 0;
		box-sizing: border-box;
  }
  .product h2 img {
    width: calc( 246 / 1920 * 100% );
  }
  .product h3 img {
    width: 100%;
  }
  .product .product__list03,
  .product .product__list01,
  .product .product__list02 {
    position: relative;
  }
  .product .slide .swiper {
    overflow: visible;
  }
  .product .slide .swiper-pagination {
    display: none;
  }
  .product .slide .swiper-wrapper {
    display: flex;
  }
  .product .product__list01 .slide {
    position: absolute;
    right: calc( 198 / 1920 * 100% );
    bottom: calc( 200 / 828 * 100% );
    width: calc( 1172 / 1920 * 100% );
    box-sizing: border-box;
  }
  .product .product__list01 .swiper-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 0;
    z-index: 50;
    height: calc( 8 / 828 * 100% );
    width: 98%;
    border-radius: 10px;
    background: #c8e5c1;
  }
  .product .product__list01 .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: #4ea146;
    border-radius: 10px;
    left: 0;
    top: 0;
  }
  .product .product__list01 .slide .swiper {
    overflow: hidden;
    padding-bottom: calc( 60 / 1172 * 100% );
  }
  .product .product__list01 .swiper-slide {
    width: calc( 280 / 1172 * 100% );
    padding: calc( 38 / 1172 * 100% ) 0 0 calc( 14 / 1172 * 100% );
    margin-right: 0;
    position: relative;
  }
  .product .product__list01 .product__list01-icon01 {
    position: absolute;
    left: calc( 3 / 280 * 100% );
    top: calc( 0 / 280 * 100% );
    width: calc( 103 / 280 * 100% );
  }
  .product .product__list01 .swiper-slide:nth-child(1) {
    width: calc( 284 / 1172 * 100% );
    padding: calc( 38 / 1172 * 100% ) 0 0 calc( 18 / 1172 * 100% );
    margin-right: 0;
    position: relative;
  }
  .product .product__list01 .product__list01-icon02 {
    position: absolute;
    left: calc( 0 / 288 * 100% );
    top: calc( 12 / 288 * 100% );
    width: calc( 108 / 288 * 100% );
  }
  .product .product__list01 .product__list-btn {
    position: absolute;
    left: calc( 230 / 1920 * 100% );
    top: calc( 446 / 778 * 100% );
    width: calc( 288 /  1920 * 100% );
  }
  .product .product__list02 .slide {
    position: absolute;
    right: 0;
    bottom: calc( 248 / 819 * 100% );
    width: calc( 1360 / 1920 * 100% );
    box-sizing: border-box;
  }
  .product .product__list02 .swiper-slide {
    width: calc( 330 / 1360 * 100% );
    margin-right: calc( 20 / 1360 * 100% );
    position: relative;
  }
  .product .product__list02 .product__list02-icon01 {
    position: absolute;
    left: calc( -10 / 330 * 100% );
    top: calc( -14 / 530 * 100% );
    width: calc( 108 / 330 * 100% );
  }
  .product .product__list02 .product__list-btn {
    position: absolute;
    right: calc( 306 / 1920 * 100% );
    top: calc( 490 / 819 * 100% );
    width: calc( 288 /  1920 * 100% );
    z-index: 1;
  }
  .product .product__list03 .item {
    position: absolute;
    left: calc( 890 / 1920 * 100% );
    bottom: calc( 240 / 880 * 100% );
    width: calc( 460 / 1920 * 100% );
    box-sizing: border-box;
  }
  .product .product__list03 .product__list-btn {
    position: absolute;
    left: calc( 528 / 1920 * 100% );
    top: calc( 526 / 880 * 100% );
    width: calc( 288 /  1920 * 100% );
    z-index: 1;
  }
  .product a.product__list-btn  {
    background: url("../images/btn-product-01_on.png?20250804") left top / 100% auto no-repeat;
  }

  /* .line */
  .line {
    margin-bottom: 90px;
  }
  .line h2 img {
    width: 100%;
  }
  .line a {
    position: absolute;
    left: calc( 707 / 1920 * 100% );
    bottom: calc( 52 / 360 * 100% );
    width: calc( 528 / 1920 * 100% );
    background: url("../images/btn-line-01_on.png?20250804") left top / 100% auto no-repeat;
  }

  /* .fixedBtn */
  .fixedBtn {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: calc( 378 / 1920 * 100% );
    max-width: 378px;
    z-index: 10000;
  }
  .fixedBtn a {
    background: url("../images/btn-fixed-01_on.png?20250804") left top / 100% auto no-repeat;
  }
  @media screen and (min-width: 1536px) {
    .fixedBtn {
      width: 378px;
    }
  }

  /* .popup */
  .popup {
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20000;
    display: none;
  }
  .popup .popup__cover {
    background-color: rgba(0, 0, 0, 0.8);
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 21000;
    cursor: pointer;
  }
  .popup .popup__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
  }
  .popup .popup__inner {
    width: calc( 720 / 960 * 100% );
    max-width: 1280px;
    box-sizing: border-box;
    margin: auto;
    max-height: 90vh;
    z-index: 22000;
    position: relative;
  }
  .popup .popup__cntWrap {
  }
  .popup iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .popup .popup__close {
    position: absolute;
    right: 0;
    top: -40px;
    cursor: pointer;
    width: 30px;
    height: 30px;
  }

} /* /for PC */