@charset "UTF-8";
/*-----------------------------------
	common
-----------------------------------*/
#contents section {
  width: min(1820px, 100vw);
  margin: 0 auto;
  padding-bottom: min(110px, 10.57vw);
}
#contents h2 {
  font: 300 min(4rem, 3.84vw)/1 var(--fJA);
  letter-spacing: 0.035em;
  padding: min(80px, 7.69vw) 0 0 min(30px, 2.88vw);
  border-left: 9px solid var(--mClr1);
  margin-bottom: min(45px, 4.32vw);
  color: var(--mClr3);
  position: relative;
}
#contents h2::before {
  display: block;
  font: 400 min(1.6rem, 1.54vw)/1 var(--fJA);
  color: var(--mClr1);
  margin-bottom: min(10px, 0.96vw);
}
#contents h2::after {
  content: "";
  width: min(86px, 8.27vw);
  height: min(26px, 2.5vw);
  background: #e4e5e6;
  clip-path: polygon(calc(100% - 9px) 0%, 100% 0%, 9px 100%, 0% 100%);
  position: absolute;
  bottom: 0;
  left: -9px;
  z-index: -1;
}
#contents .copy {
  font: 500 min(5.2rem, 5vw)/1.34 var(--fJA);
  color: var(--mClr3);
  white-space: pre-line;
  margin-bottom: min(30px, 2.88vw);
}
#contents .read {
  line-height: 1.87;
  white-space: pre-line;
}
@media screen and (max-width: 767px) {
  #contents section {
    padding-bottom: 13.03vw;
  }
  #contents h2 {
    font-size: 6.52vw;
    border-left: 1.17vw solid var(--mClr1);
    padding: 6.52vw 0 0 3vw;
    margin-bottom: 4.56vw;
  }
  #contents h2::before {
    font-size: 2.74vw;
    margin-bottom: 1.3vw;
  }
  #contents h2::after {
    width: 11.21vw;
    height: 3.4vw;
    clip-path: polygon(calc(100% - 1.17vw) 0%, 100% 0%, 1.17vw 100%, 0% 100%);
    left: -1.17vw;
  }
  #contents .copy {
    font-size: 6.77vw;
    margin-bottom: 4.56vw;
    filter: drop-shadow(1px 1px 0 #fff);
    -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
    paint-order: stroke;
  }
}
/*-----------------------------------
	mainvisual
-----------------------------------*/
#mainvisual {
  position: relative;
}
#mainvisual .swiper {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  width: 100vw;
  height: min(1040px, 57.03vw);
  margin: 0 auto;
}
#mainvisual .swiper.show {
  opacity: 1;
  visibility: visible;
}
#mainvisual .swiper-slide {
  overflow: hidden;
}
#mainvisual .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-30px) scale(1.1);
}
#mainvisual .swiper-slide-active img {
  animation: slideInFromRight 6s linear forwards;
  animation-delay: 0s;
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(20px) scale(1.1);
  }
  100% {
    transform: translateX(-30px) scale(1.1);
  }
}
#mainvisual .mv_txt {
  position: absolute;
  top: 45%;
  right: max(0px, calc(50% - 910px));
  color: #000;
  z-index: 1;
  font: 700 min(7rem, 5.46vw)/1.6 var(--fJA);
  font-feature-settings: "palt";
  text-align: right;
}
#mainvisual .mv_txt .bg {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.87);
  padding-left: min(20px, 1.56vw);
  margin-bottom: min(15px, 1.17vw);
}
#mainvisual .mv_txt .b {
  font-size: min(8rem, 6.25vw);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #mainvisual .swiper {
    aspect-ratio: unset;
    height: auto;
  }
  #mainvisual .swiper-slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: 59 / 56;
    transform: translateX(-30px) scale(1.2);
  }
  @keyframes slideInFromRight {
    0% {
      transform: translateX(20px) scale(1.2);
    }
    100% {
      transform: translateX(-30px) scale(1.2);
    }
  }
  #mainvisual .mv_txt {
    top: 55%;
    font-size: min(7rem, 9.12vw);
  }
  #mainvisual .mv_txt .b {
    font-size: min(8rem, 10.43vw);
  }
}
/*-----------------------------------
	company_block
-----------------------------------*/
/*--1040px以下768pxまでvw--*/
#company_block {
  background: url(../img/index/company_bg.jpg) no-repeat right
    min(90px, 8.65vw) / min(710px, 68.27vw);
}
#company_block h2::before {
  content: "Company";
}
#company_block .link {
  background: var(--sClr2);
  width: max-content;
  margin: min(-30px, -2.88vw) 0 0 auto;
  padding: min(15px, 1.44vw) 0;
}
#company_block .link li {
  padding: min(15px, 1.44vw) min(20px, 1.92vw);
}
#company_block .link li a {
  display: block;
  width: min(290px, 27.88vw);
  font: 400 min(2rem, 1.92vw)/1 var(--fJA);
  color: var(--mClr3);
  padding-left: min(16px, 1.54vw);
  position: relative;
}
#company_block .link li a::before {
  content: "";
  width: min(8px, 0.77vw);
  height: min(8px, 0.77vw);
  background: var(--mClr3);
  position: absolute;
  left: 0;
  top: calc(50% - min(4px, 0.38vw));
}
#company_block .link li a::after {
  content: "";
  width: min(11px, 1.05vw);
  height: min(20px, 1.92vw);
  background: url(../img/index/icon_arrow_r_b1.svg) no-repeat center/contain;
  position: absolute;
  right: min(5px, 0.48vw);
  top: calc(50% - min(10px, 0.96vw));
  transition: all 0.3s;
}
#company_block .link li a:hover::after {
  right: 0;
}
@media screen and (max-width: 767px) {
  #company_block {
    background: url(../img/index/company_bg.jpg) no-repeat calc(100% + 4.56vw)
      9.12vw/61.01vw;
  }
  #company_block .link {
    margin: 2.6vw 0 0 auto;
    padding: 1.95vw 0;
  }
  #company_block .link li {
    padding: 1.95vw 2.6vw;
  }
  #company_block .link li a {
    width: 46.93vw;
    font-size: max(3.91vw, 1.6rem);
    padding-left: 2.08vw;
  }
  #company_block .link li a::before {
    width: 1.04vw;
    height: 1.04vw;
    top: calc(50% - 0.52vw);
  }
  #company_block .link li a::after {
    width: 1.43vw;
    height: 2.6vw;
    right: 0.65vw;
    top: calc(50% - 1.3vw);
  }
}
/*-----------------------------------
	business_block
-----------------------------------*/
/*--1040px以下768pxまでvw--*/
#business_block {
  background: url(../img/index/business_bg.jpg) no-repeat right
    top/min(655px, 62.98vw);
}
#business_block h2::before {
  content: "Business details";
}
#business_block ul {
  margin-top: min(70px, 6.73vw);
  display: flex;
  justify-content: space-between;
}
#business_block ul li {
  width: 31.82%;
  border: 1px solid var(--mClr2);
  background: var(--sClr2);
}
#business_block ul li a {
  display: block;
  height: 100%;
  padding: min(20px, 1.92vw) min(15px, 1.44vw) min(220px, 21.15vw)
    min(15px, 1.44vw);
  position: relative;
}
#business_block ul li a:hover {
  opacity: 1;
}
#business_block ul li a .ttl {
  font: 500 min(2.3rem, 2.21vw)/1 var(--fJA);
  color: var(--mClr3);
  margin-bottom: min(15px, 1.44vw);
}
#business_block ul li a p {
  font: 400 min(1.5rem, 1.44vw)/1.33 var(--fJA);
  white-space: pre-line;
  position: relative;
}
#business_block ul li a p::after {
  content: "";
  width: min(11px, 1.05vw);
  height: min(20px, 1.92vw);
  background: url(../img/index/icon_arrow_r_b1.svg) no-repeat center/contain;
  position: absolute;
  top: calc(50% - min(10px, 0.96vw));
  right: min(10px, 0.96vw);
  transition: all 0.3s;
}
#business_block ul li a:hover p::after {
  right: 0;
}
#business_block ul li a .image {
  width: calc(100% - 30px);
  position: absolute;
  bottom: min(20px, 1.92vw);
  left: min(15px, 1.44vw);
  overflow: hidden;
}
#business_block ul li a .image img {
  transition: all 0.3s;
}
#business_block ul li a:hover .image img {
  transform: scale(1.1);
}
@media screen and (max-width: 767px) {
  #business_block {
    background: url(../img/index/business_bg.jpg) no-repeat right top/56.32vw;
  }
  #business_block ul {
    margin-top: 5.21vw;
    flex-direction: column;
    gap: 3.26vw;
  }
  #business_block ul li {
    width: 100%;
  }
  #business_block ul li a {
    padding: 2.6vw;
    display: flex;
    justify-content: space-between;
  }
  #business_block ul li a .text {
    width: 42vw;
    position: relative;
  }
  #business_block ul li a .text::after {
    content: "";
    width: 2.47vw;
    height: 4.69vw;
    background: url(../img/index/icon_arrow_r_b1.svg) no-repeat center/contain;
    position: absolute;
    bottom: 0;
    right: 1.95vw;
  }
  #business_block ul li a .ttl {
    font-size: max(3.91vw, 1.55rem);
    margin-bottom: 1.95vw;
  }
  #business_block ul li a p {
    font-size: max(3.26vw, 1.3rem);
  }
  #business_block ul li a p::after {
    content: none;
    display: none;
  }
  #business_block ul li a .image {
    width: 37.29vw;
    position: static;
  }
  #business_block ul li a .image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 286 / 233;
    object-fit: cover;
  }
}
/*-----------------------------------
	safety_block
-----------------------------------*/
/*--1040px以下768pxまでvw--*/
#safety_block {
  background: url(../img/index/safety_bg.jpg) no-repeat right
    max(-40px, -3.84vw) / min(660px, 63.46vw);
}
#safety_block h2::before {
  content: "Safety";
}
#safety_block .read {
  width: min(545px, 52.4vw);
}
#safety_block a.link {
  display: block;
  width: min(363px, 34.9vw);
  background: #ebf1f5;
  color: var(--mClr3);
  font: 500 min(2.3rem, 2.21vw)/1 var(--fJA);
  text-align: center;
  padding: min(25px, 2.4vw) min(25px, 2.4vw) min(25px, 2.4vw) 0;
  margin: min(170px, 16.34vw) auto 0;
  border-radius: calc(1px / 0);
  position: relative;
  text-box: var(--txtB);
  overflow: hidden;
}
#safety_block a.link:hover {
  opacity: 1;
  background: var(--mClr2);
  color: var(--sClr2);
}
#safety_block a.link::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  position: absolute;
  top: 0;
  left: -100%;
  transform: skewX(-15deg);
  animation: 2s 0s shine linear infinite;
}
@keyframes shine {
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
#safety_block a.link::after {
  content: "";
  width: min(11px, 1.05vw);
  height: min(20px, 1.92vw);
  background: url(../img/index/icon_arrow_r_b2.svg) no-repeat center/contain;
  position: absolute;
  top: calc(50% - min(10px, 0.96vw));
  right: min(35px, 3.36vw);
  transition: all 0.3s;
}
#safety_block a.link:hover::after {
  right: min(25px, 2.4vw);
  background: url(../img/index/icon_arrow_r_w.svg) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  #safety_block {
    background: url(../img/index/safety_bg.jpg) no-repeat right
      min(20px, 2.6vw) / 51vw;
  }
  #safety_block .read {
    width: 100%;
  }
  #safety_block a.link {
    width: max(55.67vw, 230px);
    font-size: max(3.91vw, 1.6rem);
    padding: 3.91vw 3.25vw 3.91vw 0;
    margin: 3.91vw auto 0;
  }
  #safety_block a.link::after {
    width: 1.82vw;
    height: 3.4vw;
    top: calc(50% - 1.7vw);
    right: 3.91vw;
  }
}
/*-----------------------------------
	sustainability_block
-----------------------------------*/
/*--1040px以下768pxまでvw--*/
#sustainability_block {
  background: url(../img/index/sustainability_bg.jpg) no-repeat right
    min(80px, 7.69vw) / min(755px, 72.59vw);
}
#sustainability_block h2::before {
  content: "Sustainability";
}
#sustainability_block ul {
  display: flex;
  justify-content: space-between;
  margin-top: min(60px, 5.77vw);
}
#sustainability_block ul li {
  width: 31.82%;
}
#sustainability_block ul li a {
  display: block;
  border: 1px solid var(--mClr1);
  font: 400 min(2.3rem, 2.21vw)/1 var(--fJA);
  color: var(--mClr3);
  background: var(--sClr2);
  text-align: center;
  padding: min(40px, 3.84vw) min(50px, 4.8vw) min(40px, 3.84vw) 0;
  position: relative;
  text-box: var(--txtB);
}
#sustainability_block ul li a:hover {
  opacity: 1;
  color: var(--sClr2);
  background: var(--mClr1);
}
#sustainability_block ul li a::after {
  content: "";
  width: min(11px, 1.05vw);
  height: min(20px, 1.92vw);
  background: url(../img/index/icon_arrow_r_b1.svg) no-repeat center/contain;
  position: absolute;
  top: calc(50% - min(10px, 0.96vw));
  right: min(35px, 3.36vw);
  transition: all 0.3s;
}
#sustainability_block ul li a:hover::after {
  background: url(../img/index/icon_arrow_r_w.svg) no-repeat center/contain;
  right: min(25px, 2.4vw);
}
@media screen and (max-width: 767px) {
  #sustainability_block {
    background: url(../img/index/sustainability_bg.jpg) no-repeat right
      top/70.27vw;
  }
  #sustainability_block ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 4.56vw;
    margin-top: 6.51vw;
  }
  #sustainability_block ul li {
    width: 65.45vw;
  }
  #sustainability_block ul li a {
    font-size: max(3.91vw, 1.6rem);
    text-align: left;
    padding: 5.21vw 3.26vw 5.21vw;
  }
  #sustainability_block ul li a::after {
    width: 1.95vw;
    height: 3.52vw;
    top: calc(50% - 1.76vw);
    right: 3.52vw;
  }
}
/*-----------------------------------
	info_block
-----------------------------------*/
/*--1040px以下768pxまでvw--*/
#info_block {
  padding-bottom: 0 !important;
}
#info_block h2::before {
  content: "Information";
}
#info_block .inner_wrap {
  padding-left: min(240px, 23.07vw);
}
#info_block ul {
  width: min(640px, 61.54vw);
  margin: 0 0 min(30px, 2.88vw) auto;
  display: flex;
  flex-direction: column;
  gap: min(30px, 2.88vw);
}
#info_block ul li a {
  display: flex;
  align-items: center;
  gap: min(40px, 3.84vw);
  position: relative;
  padding-right: min(40px, 3.84vw);
  background: url(../img/index/info_icon_arrow02.svg) no-repeat right
    center/min(31px, 3vw);
  line-height: min(31px, 3vw);
}
#info_block ul li a:hover {
  opacity: 1;
}
#info_block ul li a::after {
  content: "";
  width: min(31px, 3vw);
  height: min(31px, 3vw);
  background: url(../img/index/info_icon_arrow01.svg) no-repeat right
    center/contain;
  position: absolute;
  right: 0;
  top: calc(50% - min(15.5px, 1.5vw));
  transition: all 0.3s;
  opacity: 1;
}
#info_block ul li a:hover::after {
  opacity: 0;
}
#info_block ul li a time {
  display: inline-block;
  width: min(80px, 7.69vw);
  font: 500 min(1.4rem, 1.34vw)/1 var(--fJA);
  color: var(--mClr2);
}
#info_block ul li a .ttl {
  width: calc(100% - min(120px, 11.54vw));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#info_block .link {
  display: block;
  width: min(122px, 11.73vw);
  margin: 0 auto;
  background: var(--mClr3);
  color: var(--sClr2);
  font: 500 min(1.4rem, 1.34vw)/1 var(--fJA);
  padding: min(10px, 0.96vw) 0;
  border-radius: calc(1px / 0);
  border: 2px solid var(--mClr3);
  text-align: center;
  text-box: var(--txtB);
}
#info_block .link:hover {
  background: var(--sClr2);
  color: var(--mClr3);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  #info_block .inner_wrap {
    padding-left: 3.26vw;
  }
  #info_block ul {
    width: 100%;
    margin: 0 0 7.17vw auto;
    gap: 3.91vw;
  }
  #info_block ul li a {
    flex-direction: column;
    align-items: normal;
    gap: 0.65vw;
    padding-right: 5vw;
    background: url(../img/index/info_icon_arrow01.svg) no-repeat right
      bottom/4.43vw;
    line-height: 4.43vw;
  }
  #info_block ul li a::after {
    content: none;
    display: none;
  }
  #info_block ul li a time {
    width: auto;
    font-size: max(2.34vw, 1.1rem);
  }
  #info_block ul li a .ttl {
    width: 100%;
    font-size: max(2.6vw, 1.2rem);
  }
  #info_block .link {
    width: 27.38vw;
    font-size: max(3.91vw, 1.6rem);
    padding: 1.95vw 0;
  }
}