@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  line-height: 1.8;
  color: var(--base);
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif !important;
  min-width: 1300px;
}

/*---------------------------------
ヘッダー
---------------------------------*/

header {
  position: relative;
}

.header-pc {
  background-size: cover;
  position: relative;
}

.header-bar {
  width: 100%;
  padding-left: 5rem;
  transition: 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.header-bar-in {
  min-width: 1050px;
  display: flex;
  justify-content: space-between;
}
.header-bar h1 {
  padding-top: 3rem;
}
.header-bar h1 img {
  width: 25.4rem;
}
.header-bar.fixed {
  background: rgba(28, 25, 26, 0.46);
}

.header-bar nav ul {
  display: flex;
}
.header-bar nav ul li {
  font-weight: 600;
}
.header-bar nav ul li:first-child,
.header-bar nav ul li:nth-child(2) {
  padding: 4rem 7rem 0 0;
}
.header-bar nav ul li a {
  color: #fff;
}
.header-bar nav ul li:nth-child(3) a {
  display: block;
  width: 16.5rem;
  height: 0;
  padding-top: 10rem;
  background: #fff url("../image/sdgs-logo.png") no-repeat center center;
  overflow: hidden;
}
.header-bar nav ul li:last-child a {
  display: block;
  width: 15rem;
  height: 10rem;
  background: var(--red) url("../image/mail.png") no-repeat center 35%;
  background-size: 12%;
  text-align: center;
  padding-top: 5rem;
}

.header-sp,
.gNav-sp {
  display: none;
}

.fv-copy{
  width: 100%;
  position: absolute;
  bottom: 120px;
  left: 0;
  z-index: 9999;
}
.fv-copy span{
  display: block;
  width: 82%;
  margin: 0 auto;
}


/*---------------------------------
トップアニメーション　
---------------------------------*/
.slide-wrap {
  position: relative;
}
.slider {
  width: 100%;
  height: 100vh;
}
.slider img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.number{
  position: absolute;
  width: 10%;
  right: 100px;
  bottom: 100px;
  display: flex;
  align-items: center;
}
.number p{
  width: 10%;
  color: #fff;
  font-size: 2.4rem;
  font-family: 'Josefin Sans', sans-serif;
}

.progress {
  width: 80%;
  height: 1px;
  margin: 0 15px 0 25px;
  background: #eee;
}

.progress .bar {
  display: block;
  width: 0%;
  height: 3px;
  background: #fff;
}


/* ==== scroll ==== */
.scroll {
  z-index: 2;
  position: absolute;
  left: 40px;
  bottom: 0;
  pointer-events: none;
}
.scroll .scroll-unit {
  position: relative;
}
.scroll .scroll-unit::before {
  content: "scroll";
  color: #fff;
  transform: rotate(-90deg);
  position: absolute;
  top: 1.4rem;
  left: -3.5rem;
}
.scroll-unit .scroll-item {
  display: block;
  position: relative;
  top: 7px;
}
.scroll-unit .scroll-item::before {
  content: "";
  display: block;
  width: 1px;
  background: white;
  height: 170px;
  margin-inline: auto;
}
.scroll-unit .scroll-item::after {
  animation-delay: 0ms;
  animation-direction: normal;
  animation-duration: 1500ms;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-name: scroll;
  animation-play-state: running;
  animation-timing-function: linear;
  aspect-ratio: 1 / 1;
  background: white;
  border-radius: 50%;
  opacity: 1;
  content: "";
  left: 50.61%;
  position: absolute;
  transform: translateX(-50%) scale(1);
  width: 7px;
  z-index: 2;
  top: 0px;
}
.scroll-circle {
  width: 7px;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 49.5%;
  transform: translateX(-50%);
  top: 70%;
  z-index: 2;
}
@keyframes scroll {
  0% {
    top: 0px;
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  10% {
    top: 0px;
    opacity: 1;
  }
  34% {
    opacity: 1;
    top: 70%;
  }
  35% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    top: 70%;
  }
  40% {
    opacity: 0.5;
    top: 70%;
  }
  80% {
    transform: translateX(-50%) scale(4);
    opacity: 0;
    top: 70%;
  }
  100% {
    opacity: 0;
    top: 100%;
  }
}

/* ==== pagenation ==== */
.pagenation {
  font-family: "Josefin Sans", sans-serif;
  color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
}
.current-no {
  position: absolute;
  bottom: 1.6rem;
  right: 14rem;
}
.current-no span {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.current-no span:nth-child(1) {
  animation: count-down01 20s 0s infinite;
}
.current-no span:nth-child(2) {
  animation: count-down02 20s 0s infinite;
}
.current-no span:nth-child(3) {
  animation: count-down03 20s 0s infinite;
}
.current-no span:nth-child(4) {
  animation: count-down04 20s 0s infinite;
}
@keyframes count-down01 {
  0%,
  25%,
  100% {
    opacity: 0;
  }
  5%,
  20% {
    opacity: 1;
  }
}
@keyframes count-down02 {
  0%,
  25%,
  50%,
  100% {
    opacity: 0;
  }
  30%,
  45% {
    opacity: 1;
  }
}
@keyframes count-down03 {
  0%,
  50%,
  75%,
  100% {
    opacity: 0;
  }
  55%,
  70% {
    opacity: 1;
  }
}
@keyframes count-down04 {
  0%,
  75%,
  100% {
    opacity: 0;
  }
  80%,
  95% {
    opacity: 1;
  }
}
.all-no {
  position: absolute;
  bottom: 1.6rem;
  right: 2rem;
  opacity: 0.5;
}
/* ==== scrollbar ==== */
.scrollbar {
  position: absolute;
  width: 8rem;
  height: 0.3rem;
  background-color: rgba(255, 255, 255, 0.5);
  bottom: 3rem;
  right: 5rem;
  z-index: 9999;
  border-radius: 0.3rem;
}
.scrollbar::before {
  content: "";
  background-color: rgb(255, 255, 255);
  display: inline-block;
  width: 0;
  height: 100%;
  position: absolute;
}
/*.slider__item.now */
.scrollbar::before {
  animation: scroll_bar 5s ease-in-out infinite;
}

@keyframes scroll_bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/*---------------------------------
フッター
---------------------------------*/
.footer-contact {
  background: url("../image/footer-bg-contact-pc.jpg");
  background-size: cover;
  color: #fff;
  padding: 10rem 11rem;
}
.footer-contact-in {
  width: 108rem;
  margin: 0 auto;
  position: relative;
}
.footer-contact h3 {
  line-height: 1.2;
  margin-bottom: 4rem;
  font-weight: 600;
}
.footer-contact h3 span {
  display: block;
  font-size: 4.6rem;
}
.footer-contact-in::after {
  content: "";
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  background: url("../image/btn-arrow.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.footer-bottom {
  background: #efeeed;
  padding: 9rem 5rem 4rem;
}
.footer-bottom-in {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-info {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.footer-info .footer-nav {
  display: flex;
  justify-content: space-between;
  width: 55%;
}
.footer-info .footer-nav ul {
  margin-right: 10%;
}
.footer-info .footer-nav li {
  margin-bottom: 4rem;
  font-weight: 600;
}
.footer-info .footer-nav p img {
  width: 26rem;
}

.footer-info .footer-company {
  font-size: 1.3rem;
}
.footer-info .footer-company dt {
  margin-top: 3.5rem;
}
.footer-info .footer-company dd {
  position: relative;
}
.footer-info .footer-company dd a {
  display: block;
  width: 6rem;
  position: absolute;
  bottom: 0;
  left: 103%;
}

.footer-bottom .copy {
  border-top: 1px #c8c8c8 solid;
  font-size: 1.2rem;
  color: #c8c8c8;
  line-height: 1;
  padding-top: 3.5rem;
  margin-top: 4rem;
}

/* ---------- TOPへ戻るボタン ---------- */

.goTop {
  position: fixed;
  bottom: 5rem;
  right: 5rem;
  z-index: 99999;
}
.goTop a {
  display: block;
  width: 6rem;
  height: 6rem;
  background: var(--red);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  padding-top: 3rem;
  position: relative;
}
.goTop a::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-top: 0.2rem #fff solid;
  border-left: 0.2rem #fff solid;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/*各ページ共通 PC
-----------------------------*/
.noteh2 {
  line-height: 1.2;
  font-weight: 600;
}
.noteh2 span {
  display: block;
  color: var(--red);
  font-size: 4.6rem;
}

/*ぱんくす PC
-----------------------------*/
.Breadcrumb {
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0 100px;
}
.Breadcrumb ul li {
  display: inline;
  padding: 0 10px 0 0;
  font-size: 1.2rem;
}
.Breadcrumb ul li::after {
  content: " > ";
  padding-left: 10px;
}
.Breadcrumb ul li:last-child::after {
  content: "";
}

/*---------------------------------
下層ページ　ヘッダー
---------------------------------*/

.lower-header {
  background-position: center center;
  background-size: cover;
}

#company .lower-header {
  background-image: url("../image/company/company-bg-pc.jpg");
}
#sdgs .lower-header {
  background-image: url("../image/sdgs/sdgs-bg-pc.jpg");
}

.lower-ttl {
  padding: 25rem 0 6rem;
}
.lower-ttl h2 {
  font-size: 2.6rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.lower-ttl h2 span {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-size: 9rem;
  font-weight: bold;
}