@charset "UTF-8";

:root {
  --color-black: #6F6F6F;
  --color-white: #fff;
  --color-primary: #F29600;
  --color-bg: #FFF7E7;

  --zen-maru: "Zen Maru Gothic", serif;
}

/*================================================
 *  mainVisual
 ================================================*/
#mainVisual {
  overflow: hidden;
  padding: 0;
}

#mainVisual .inner {
  /* max-width: 151.2rem; */
  max-width: 171.2rem;
  margin: 0 auto;
  height: 100%;
  position: relative;
}

#mainVisual .inner::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/mv_bg.png);
  width: 200rem;
  height: 77.7rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}



.mv_ill {
  position: absolute;
}


.mv_ill01 {
  width: 23.6rem;
  top: 13rem;
  left: -1.2rem;
}

.mv_ill02 {
  width: 6.5rem;
  top: 15.4rem;
  /* left: 43.9rem; */

  left: clamp(1rem, 29vw, 43.9rem);
}

.mv_ill03 {
  width: 13.3rem;
  top: 14.7rem;
  /* right: 33.5rem; */

  right: clamp(1rem, 22.15vw, 33.5rem);
}

.mv_ill04 {
  width: 9.7rem;
  top: 36rem;
  left: 13.3rem;
}

.mv_ill05 {
  width: 7.8rem;
  top: 46.5rem;
  /* left: 35rem; */

  left: clamp(1rem, 23.14vw, 35rem);
}

.mv_ill06 {
  width: 20.5rem;
  top: 57rem;
  /* left: 51.5rem; */

  left: clamp(1rem, 34vw, 51.5rem);
}

.mv_ill07 {
  width: 8.1rem;
  top: 58rem;
  right: 43.5rem;

  right: clamp(1rem, 28.76vw, 43.5rem);
}

.mv_ill08 {
  width: 24.6rem;
  top: 62rem;
  right: -1rem;
}


.mv_ill09 {
  width: 17.8rem;
  top: 63rem;
  /* left: 11.8rem; */

  left: clamp(1rem, 7.8vw, 11.8rem);
}


.mv_ill10,
.mv_ill11,
.mv_ill12,
.mv_ill13 {
  /* width: 5.5rem; */
  width: clamp(1rem, 3.637vw, 5.5rem);
}

.mv_ill10 {
  top: 18.3rem;
  left: clamp(1rem, 19.8vw, 30rem);
}


.mv_ill11 {
  top: 32rem;
  right: clamp(1rem, 4.4vw, 6.7rem);
}

.mv_ill12 {
  top: 67rem;
  left: clamp(1rem, 27.1vw, 41rem);
}

.mv_ill13 {
  top: 65rem;
  right: clamp(1rem, 20vw, 30rem);
}

#mainVisual.on .fadeUp {
  opacity: 1;
  transform: translateY(0px);
}

.mv_txt {
  text-align: center;
  /* padding-top: 26rem; */
  padding-top: 28rem;
  padding-bottom: 29.4rem;
}

.mv_txt h2 {
  width: 38rem;
  margin: 0 auto 4rem;
}

.mv_txt p {
  color: var(--color-primary);
  font-size: 2rem;
  line-height: 2;
  font-weight: 500;
}



/* #mainVisual::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/mv_bg.png);
  width: 200rem;
  height: 77.7rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
} */


.mv_news {
  position: absolute;
  top: 35rem;
  right: 16rem;
  right: clamp(1rem, 10.58vw, 16rem);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.mv_news h3 {
  width: 12.7rem;
  margin-left: auto;
  animation: rotate 1.5s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

.mv_inner {
  margin-top: -3rem;
  width: 20rem;
  height: 20rem;
  background: var(--color-white);
  border-radius: 100%;
  margin-right: 1rem;

  display: flex;
  padding-top: 3rem;
  /* align-items: center; */
  justify-content: center;
  border: 1px solid var(--color-primary);
  box-shadow: 0.5rem 0.5rem 0 #F9CE88;
  position: relative;
}

.mv_inner::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/news_arrow.png);
  width: 0.9rem;
  height: 1.395rem;
  top: 53%;
  right: 1.6rem;
  transform: translateY(-50%);
}

.mv_news iframe {
  display: block;
  width: 100%;
  /* max-height: 190px;
  overflow: hidden; */
}

@keyframes rotate {
  0% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-6deg);
  }
}

@media screen and (max-width:767px) {
  #mainVisual .inner {
    max-width: 151.2rem;
    margin: 0 auto;
    height: 100%;
    position: relative;
  }

  #mainVisual .inner::before {
    background-image: url(../images/mv_bg_sp.png);
    width: 39rem;
    height: 84.4rem;
  }


  .mv_ill01 {
    width: 13.2rem;
    top: 11rem;
    left: -0.9rem;
  }

  .mv_ill02 {
    width: 4rem;
    top: 21rem;
    left: 4.5rem;
  }

  .mv_ill03 {
    width: 7.2rem;
    top: 12.3rem;
    right: 6.7rem;
  }

  .mv_ill04 {
    width: 5.5rem;
    top: 69.2rem;
    left: 6.2rem;
  }

  .mv_ill05 {
    width: 4.7rem;
    top: 40.7rem;
    left: 2rem;
  }

  .mv_ill06 {
    width: 11rem;
    top: 53rem;
    /* left: 51.5rem; */
    left: 11.8rem;
  }

  .mv_ill07 {
    width: 4.3rem;
    top: 39rem;
    right: 2.3rem;
  }

  .mv_ill08,
  .mv_ill13 {
    display: none;
  }

  .mv_ill09 {
    width: 8.4rem;
    top: 56.2rem;
    /* left: 11.8rem; */
    left: -0.6rem;
  }

  .mv_ill10,
  .mv_ill11,
  .mv_ill12,
  .mv_ill13 {
    width: 3.5rem;
  }

  .mv_ill10 {
    top: 14.2rem;
    left: 16.2rem;
  }

  .mv_ill11 {
    top: 24.4rem;
    right: 2.5rem;
  }

  .mv_ill12 {
    top: 63.7rem;
    left: 5.2rem;
  }













  .mv_txt {
    padding-top: 28rem;
    padding-bottom: 33.3rem;
  }

  .mv_txt h2 {
    width: 25rem;
    margin: 0 auto 2rem;
  }

  .mv_txt p {
    font-size: 1.6rem;
  }

  .mv_news {
    top: 55rem;
    right: 0;
  }
}

/*================================================
 * about
================================================*/
.about_clm {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
}


.about_left h3 {
  width: 30rem;
  margin-bottom: 3rem;
}

.about_left dl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
}

.about_left dt span {
  font-size: 1.6rem;
  display: inline-block;
  padding: 0.5rem 3rem;
  border-radius: 1rem;
  border: 0.2rem solid var(--color-primary);
  color: var(--color-primary);
  line-height: 1.2;
  font-weight: 500;
}

.about_left dd {
  font-size: 1.8rem;
  padding: 0.6rem 0 2rem 1rem;
}

.about_right h3 {
  margin-bottom: 4rem;
  margin-left: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.about_right iframe {
  display: block;
  width: 40rem;
  height: 31rem;
  border-radius: 2rem;
  margin-bottom: 0.6rem;
}

.about_right a {
  color: var(--color-primary);
}


.about_under {
  width: 100%;
  padding: 2.3rem 1rem 0;
  margin-top: 3rem;
  border-top: 1px dotted var(--color-primary);
}

.about_under h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.about_under li {
  font-size: 1.8rem;
  padding-left: 1em;
  position: relative;
}

.about_under li::before {
  position: absolute;
  content: "・";
  left: 0;
  top: 0;
}

.about_ill01 {
  width: 6.5rem;
  /* right: -5rem; */
  right: -2vw;
  bottom: -3rem;
}

.about_ill02 {
  width: 12.8rem;
  /* left: -20rem; */
  left: -13.22vw;
  bottom: -11rem;
}

.about_ill03 {
  width: 6.2rem;
  right: -17rem;
  top: 25rem;
}

.about_ill04 {
  width: 6.2rem;
  /* left: -20rem; */
  left: -9.2rem;
  top: 43rem;
}

@media screen and (max-width:767px) {
  #about {
    padding-bottom: 16rem;
  }

  .about_left,
  .about_right {
    width: 100%;
  }

  .about_left h3 {
    width: 25rem;
    margin: 0 auto 2rem;
  }

  .about_left dt span {
    padding: 0.5rem 2rem;
  }

  .about_left dd {
    font-size: 1.6rem;
    padding: 0.6rem 0 2rem 1rem;
  }

  .about_right iframe {
    display: block;
    width: 100%;
    height: 31rem;
    border-radius: 2rem;
    margin-bottom: 0.6rem;
  }

  .about_right h3 {
    width: 9rem;
    margin-bottom: 2rem;
    margin-left: auto;
  }

  .about_under li {
    font-size: 1.6rem;
  }

  .about_ill01 {
    width: 5.5rem;
    right: 0rem;
    bottom: -7rem;
  }

  .about_ill02 {
    width: 10.4rem;
    left: 1rem;
    bottom: -11rem;

    display: none;
  }

  .about_ill04 {
    width: 4.7rem;
    left: 8rem;
    top: auto;
    bottom: -12rem;
  }
}

/*================================================
 * intro
================================================*/
#product .wrap {
  max-width: 106rem;
  width: 70%;
  min-width: 640px;
}

.product_clm {
  display: grid;
  gap: 6rem 5.6rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 5rem;
}

.product_box {
  background: var(--color-white);
  border-radius: 2rem;
  border: 1px solid var(--color-primary);
  padding: 2.4rem 2.4rem 5rem;
  box-shadow: 1rem 1rem 0 #F9CE88;
}

.product_box .product_img {
  display: block;
  border-radius: 2rem;
  overflow: hidden;
  aspect-ratio: 450/290;
}

.product_img img {
  transition: .4s;
}


.product_box:has(.btnArea a:hover) .product_img img {
  transform: scale(1.1);
  transition: .4s;
}

.product_box h3 {
  font-size: 2.8rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  text-align: center;
}

.product_box p {
  margin-bottom: 4rem;
  font-weight: 500;
}

.product_box .btnArea a {
  width: 100%;
}

.prod_ill01 {
  width: 13rem;
  left: -11rem;
  top: 27rem;
}

.prod_ill02 {
  width: 9.7rem;
  /* left: -20rem; */
  right: -8rem;
  top: 47rem;
}

.prod_ill03 {
  width: 5.7rem;
  /* left: -20rem; */
  left: -9rem;
  top: 60rem;
}

.prod_ill04 {
  width: 5.5rem;
  /* left: -20rem; */
  right: -11rem;
  top: 77rem;
}

@media screen and (max-width:767px) {
  #product .wrap {
    width: 36rem;
    min-width: unset;
  }

  .product_clm {
    gap: 3rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 6rem;
  }

  .product_box {
    padding: 1.8rem 1.8rem 3rem;
  }

  .product_box h3 {
    font-size: 2.4rem;
  }

  .product_box p {
    margin-bottom: 1rem;
  }

  .prod_ill01 {
    width: 9rem;
    left: -1rem;
    top: -2rem;
  }

  .prod_ill02 {
    width: 4.7rem;
    top: auto;
    bottom: -10rem;
    right: auto;
    left: 9rem;
  }

  .prod_ill03 {
    width: 4.7rem;
    left: -2rem;
    top: 59rem;
  }

  .prod_ill04 {
    width: 4.5rem;
    right: -2rem;
    top: 112rem;
  }
}


/*================================================
 * intro
================================================*/
.topNews .news_ill01 {
  width: 7.6rem;
  top: 0;
  left: 30rem;
  z-index: 3;
}

.topNews .news_ill02 {
  width: 10rem;
  top: 0;
  right: 28rem;
  z-index: 3;
}

.topNews .news_ill03 {
  width: 23.6rem;
  top: 36rem;
  right: -22rem;
}

.topNews .news_ill04 {
  width: 18rem;
  top: 57rem;
  left: -19rem;
}

.topNews .news_ill05 {
  display: none;
}

.topNews .newsSec_inner iframe {
  display: block;
  width: 100%;
}

@media screen and (max-width:767px) {
  .topNews {
    padding-bottom: 20rem;
  }

  .topNews .news_ill01 {
    width: 5.5rem;
    left: 3rem;
    top: -1rem;
  }

  .topNews .news_ill02 {
    width: 9rem;
    right: 1rem;
    top: -4rem;
  }

  .topNews .news_ill03 {
    width: 14rem;
    top: auto;
    bottom: -11rem;
    right: auto;
    left: -3rem;
  }

  .topNews .news_ill04 {
    width: 4.7rem;
    top: auto;
    bottom: -15rem;
    left: auto;
    right: 6rem;
    z-index: 3;
  }

  .topNews .news_ill05 {
    display: block;
    width: 7.7rem;
    bottom: -17rem;
    left: 4rem;
    z-index: 3;
  }
}


/*================================================
 * intro
================================================*/


@media screen and (max-width:767px) {}


/*================================================
 * intro
================================================*/


@media screen and (max-width:767px) {}


/*================================================
 * intro
================================================*/


@media screen and (max-width:767px) {}

/*================================================
 * intro
================================================*/


@media screen and (max-width:767px) {}