@charset "UTF-8";

/* ==== root ========================== */
:root {
  --color-black: #555555;
  --color-white: #fff;
  /* --color-primary: #fff; */
  --color-navy: #485E87;
  --color-bgBlue: #EFF3F5;

  --zen-mincho: "Zen Old Mincho", serif;
  --zen-kaku: "Zen Kaku Gothic New", sans-serif;

  --medium: 500;
  --regular: 400;

  --fs-35: 2.33em;
  --fs-13: 0.866em;
  --fs-12: 0.8em;

  --l-100: 6.66em;
  --l-80: 5.33em;
  --l-75: 5em;
  --l-70: 4.66em;
  --l-60: 4em;
  --l-50: 3.33em;
  --l-40: 2.66em;
  --l-30: 2em;
  --l-25: 1.66em;
  --l-20: 1.33em;
  --l-10: 0.66em;

  --max-wid: 2000px;

  --header: clamp(0.1rem, 5.13vw, 20rem);
  scroll-padding: var(--header);
}

@media screen and (max-width:767px) {
  :root {
    --fs-35: 2.5em;
    --fs-13: 0.928em;
    --fs-12: 0.85em;

    --l-100: 7.12em;
    --l-80: 5.71em;
    --l-75: 5.35em;
    --l-70: 5em;
    --l-60: 4.28em;
    --l-50: 3.57em;
    --l-40: 2.85em;
    --l-30: 2.14em;
    --l-25: 1.78em;
    --l-20: 1.42em;
    --l-10: 0.71em;

    --header: 16.53vw;
    scroll-padding: var(--header);
  }
}

/*================================================
 *  mainVisual
 ================================================*/
#mainVisual {
  height: 100vh;
  display: grid;
  place-content: center;
  padding: 0;
}

#mainVisual video {
  display: block;
  overflow: hidden;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 100vw;
  height: 100vh;
}

#mainVisual h2 {
  font-size: clamp(3.5rem, 3.13em, 100rem);
  color: var(--color-white);
  text-align: center;
  line-height: 1.08;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mainVisual h2 span {
  font-size: 1.17em;
  display: block;
  font-weight: bold;
  line-height: 1.54;
}

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

/*================================================
 * intro
================================================*/
#intro {
  background: var(--color-bgBlue);
  padding-top: 3em;
}

#intro h2 {
  font-size: 3.66em;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 0.18em;
}


#intro h2 img {
  width: 1.9em;
  margin: 0 0.27em;
}

#intro h4,
#intro h3 {
  font-family: var(--zen-mincho);
  font-weight: var(--regular);
  line-height: 1.66;
  position: relative;
  z-index: 1;
}

#intro h4 {
  margin-bottom: 7.33em;
}

#intro h3 {
  font-weight: bold;
  font-size: 2em;
  /* margin-top: 3.53em; */
}

#intro .wrap>img {
  width: 65.8%;
  margin: -1.5em auto 0;
}

#intro .wrap .inner {
  width: 57.3%;
  max-width: 840px;
  margin-left: auto;
  margin-top: -6em;
  position: relative;
  z-index: 1;
}

#intro .wrap .inner p {
  font-family: var(--zen-kaku);
  line-height: 2;
  font-weight: var(--medium);
  padding: var(--l-20) var(--l-10) var(--l-25) 1.2em;
  background: var(--color-white);
}

@media screen and (max-width:767px) {
  #intro {
    padding-top: 3.2em;
  }

  #intro .wrap {
    width: 94.1%;
  }

  #intro h2 {
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 2.64em;
    align-items: start;
    margin-bottom: 0.3em;
    margin-left: 1.6%;
  }

  #intro h2 img {
    width: 3.24em;
    margin: 0.2em 0;
  }

  #intro p {
    font-size: var(--fs-13);
    line-height: 1.92;
    margin-left: 1.6%;
  }

  #intro h4 {
    margin-bottom: 1.7em;
  }

  #intro h3 {
    font-size: 1.42em;
    /* margin-top: 1.7em; */
    margin-left: 1.6%;
  }

  #intro .wrap>img {
    width: 100%;
    margin: var(--l-25) auto;
  }

  #intro .wrap .inner {
    width: 100%;
    font-size: 1em;
    margin-left: auto;
    margin-top: 0;
    padding: 1em var(--l-20) var(--l-20) var(--l-25);
  }

  #intro .wrap .inner p {
    font-size: 1em;
    margin: 0;
  }
}

/*================================================
 * topRecommend
================================================*/
#topRecommend {
  padding: var(--l-75) 0;
}

#topRecommend .g__txt {
  font-size: 1.33em;
  margin-bottom: -0.4em;
}

#topRecommend ul {
  display: grid;
  gap: 6.13em;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--l-40);
}

#topRecommend ul li {
  overflow: hidden;
  border-radius: var(--l-10);
}

#topRecommend ul li a img {
  border-radius: var(--l-10);
  transition: .4s;
}

#topRecommend ul li a:hover img {
  transform: scale(1.05);
  transition: .4s;
}

@media screen and (max-width:767px) {
  #topRecommend {
    padding: var(--l-70) 0;
  }

  #topRecommend .g__txt {
    font-size: 1.14em;
  }

  #topRecommend ul {
    gap: var(--l-30);
    grid-template-columns: 1fr;
    margin-top: var(--l-40);
  }
}

/*================================================
 * common__reformMenu
================================================*/

#common__reformMenu .flex p {
  width: 54.7%;
  padding-top: 1em;
}

@media screen and (max-width:767px) {
  #common__reformMenu .flex p {
    width: 100%;
    padding-top: var(--l-40);
  }
}

/*================================================
 * topNews
================================================*/
#topNews {
  padding: 6em 0;
}

#topNews ul.up_list li {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}

#topNews ul.up_list.started li {
  opacity: 1;
  transform: translateY(0px);
}

#topNews ul.up_list.started li:nth-child(2) {
  transition-delay: 0.2s;
}

#topNews ul.up_list.started li:nth-child(3) {
  transition-delay: 0.4s;
}


#topNews ul.up_list.started li:nth-child(4) {
  transition-delay: 0.6s;
}

#topNews ul.up_list.started li:nth-child(5) {
  transition-delay: 0.8s;
}

#topNews ul.up_list.started li:nth-child(6) {
  transition-delay: 1s;
}

@media screen and (max-width:767px) {
  #topNews {
    padding: var(--l-70) 0;
  }

}

/*================================================
 * topWorks
================================================*/
#topWorks {
  padding-bottom: 4.66em;
  background: var(--color-bgBlue);
}

#topWorks .topWorks__slideArea {
  position: relative;
}

#topWorks .topWorks__slideArea::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .15;
  top: 0;
  left: 0;
  z-index: 2;
}

.topWorks__catch {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.topWorks__catch h3 {
  font-size: 2em;
  font-weight: bold;
  color: var(--color-white);
  letter-spacing: 0.25em;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.topWorks__catch h3.pc {
  display: flex;
}

.topWorks__catch h3.sp {
  display: none;
}

.topWorks__catch h4 {
  font-size: 1.2em;
  margin: 0 auto 0.5em;
  white-space: nowrap;
}

#topWorks .topWorks_swiper .swiper-wrapper {
  transition-timing-function: linear;
}

#topWorks .topWorks_swiper .swiper-slide {
  width: 22.7em;
  height: 31.3em;
}

#topWorks .topWorks_swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

#topWorks .wrap {
  width: 56.7%;
}

#topWorks .wrap h2 {
  font-size: var(--fs-35);
  font-family: var(--zen-mincho);
  font-weight: bold;
  line-height: 1.45;
  padding-bottom: 0.6em;
  margin-top: 1em;
  margin-bottom: 0.77em;
  position: relative;
}

#topWorks .wrap h2::before {
  position: absolute;
  content: "";
  width: 30%;
  height: 2px;
  background: rgb(100, 232, 176);
  background: linear-gradient(90deg, rgba(100, 232, 176, 1) 0%, rgba(0, 147, 255, 1) 100%);
  bottom: 0;
  left: 0;
}

#topWorks .btnArea {
  margin-top: 2em;
}


@media screen and (max-width:767px) {
  #topWorks .wrap {
    width: 90.84%;
  }

  #topWorks .wrap h2 {
    font-size: 2.14em;
    margin-top: 2em;
  }

  .topWorks__catch h3.pc {
    display: none;
  }

  .topWorks__catch h3.sp {
    display: flex;
  }
}


/*================================================
 * topColumn
================================================*/
#topColumn {
  padding: 4.33em 0;
}

.column__list--wrap {
  width: 89.5%;
  margin: var(--l-30) auto var(--l-50);
}

.column__list--wrap>div {
  width: 50%;
}

.column__list--wrap>div a {
  padding: var(--l-20) 0;
}

.column__list--wrap>div a img {
  width: calc(100% - 2.66em);
  height: auto;
}

.column__list--wrap>div a h3 {
  padding: 0.5em var(--l-20);
}

#topColumn .column__list {
  width: 46.8%;
  justify-content: space-between;
  gap: 0;
}

.column__list li {
  width: 45%;
  margin-top: var(--l-10);
}

@media screen and (max-width:767px) {
  #topColumn {
    padding: var(--l-70) 0;
  }

  .column__list--wrap {
    width: 100%;
    margin: var(--l-20) auto var(--l-20);
  }

  .column__list--wrap>div {
    width: 100%;
  }

  .column__list--wrap>div a img {
    width: calc(100% - 1.33em);
  }

  .column__list--wrap>div a h3 {
    padding: 0.5em var(--l-10);
  }

  #topColumn .column__list {
    width: 100%;
  }

  .column__list li {
    width: 49%;
    margin: 0 0 var(--l-10);
  }
}