@charset "utf-8";

:root {
  --ratio: 1400 / 640;
  --max-height: 640px;
  --min-height: 550px;
}

.firstview {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  max-height: var(--max-height);
  min-height: var(--min-height);
  overflow: hidden;
}
.panel-list {
	position: relative;
}
.panel-list .panel {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: var(--ratio);
  max-height: var(--max-height);
  min-height: var(--min-height);
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
.panel-list .panel::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  animation-name: scale;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    z-index: 0;
  }
}
@keyframes scale {
  0%{
  }
  20%{
  }
  80%{
    transform: scale(1.2);
  }
  100%{
  }
}
.panel-list .panel-1 {
  animation-delay: 0s;
}
.panel-list .panel-2 {
  animation-delay: 5s;
}
.panel-list .panel-3 {
  animation-delay: 10s;
}
.panel-list .panel-4 {
  animation-delay: 15s;
}
.panel-list .panel-1::after {
	background-image: url(../image/top/firstview-img1.jpg);
}
.panel-list .panel-2::after {
	background-image: url(../image/top/firstview-img2.jpg);
  animation-delay: 5s;
}
.panel-list .panel-3::after {
	background-image: url(../image/top/firstview-img3.jpg);
  animation-delay: 10s;
}
.panel-list .panel-4::after {
	background-image: url(../image/top/firstview-img4.jpg);
  animation-delay: 15s;
}

.over-contents {
  position: relative;
  z-index: 100;
  width: 100%;
  aspect-ratio: var(--ratio);
  max-height: var(--max-height);
  min-height: var(--min-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
  margin: 0 auto;
  box-sizing: border-box;
}
.over-contents .text {
  font-size: 2.2em;
  text-align: center;
  font-weight: 200;
  text-shadow: 0 0 20px black, 0 0 20px black, 0 0 20px black, 0 0 20px black, 0 0 20px black;
  color: #fff;
  letter-spacing: .5em;
  margin-right: -.5em;
}
.over-contents .text span {
  display: inline-block;
}
.firstview .banner {
  position: absolute;
  bottom: 3.125rem;
  right: 3.4rem;
  bottom: clamp(1.2rem, -0.375rem + 7vw, 3.125rem); /* 1.2-3.125 360-800 */
  right: clamp(1.2rem, -0.6rem + 8vw, 3.4rem); /* 1.2-3.4 360-800 */
  z-index: 100;
  max-width: 70%;
}

@media screen and (max-width: 1203px) {
  .firstview,
  .panel-list .panel,
  .over-contents {
    aspect-ratio: auto;
    height: var(--min-height);
  }
  .panel-list .panel-1::after {
    background-position: 10% center;
  }
  .panel-list .panel-2::after {
    background-position: 62% center;
  }
  .panel-list .panel-3::after {
    background-position: 40% center;
  }
  .panel-list .panel-4::after {
/*    background-position: 67% center;*/
    background-position: 51% center;
  }
}




/* 60th */
.section-60th {
  padding-bottom: clamp(3.5rem, 2.273rem + 5.45vw, 5rem);
  z-index: 2;
}
.section-60th .image {
  display: block;
  margin: 0 auto;
}
.section-60th .text-block {
  background-color: rgba(255,255,255,.7);
  padding: 2em 1.8em;
  box-sizing: border-box;
  width: 82%;
  min-width: 300px;
  margin: -3em auto 0;
  position: relative;
}
.section-60th::after {
  content: url(../image/common/bg-logo.png);
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: 425px;
  margin-bottom: -220px;;
  z-index: 1;
}


/* reason */
.section-reason {
  background-color: #ebeaf0;
}
.section-reason h3 {
  font-weight: 500;
  margin-bottom: .8rem;
}
.section-reason h3 span {
  display: inline-block;
}
.section-reason .content-inner + .image img {
  margin-top: 3rem;
}
.section-reason::after {
  content: url(../image/common/bg-logo.png);
  position: absolute;
  right: 50%;
  bottom: 0;
  margin-right: 460px;
  margin-bottom: -116px;
  z-index: 1;
}


/* commitment */
.section-commitment .service-list {
  display: flex;
  margin: 4rem 0 5rem;
}
.section-commitment .service-list li {
  width: 25%;
  position: relative;
  overflow: hidden;
}
.section-commitment .service-list li img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.section-commitment .service-list li span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 19.43%;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  color: #fff;
  font-size: clamp(0.875rem, 0.773rem + 0.45vw, 1rem); /* 14-16 360-800 */
  font-weight: 400;
}
@media (any-hover: hover) {
  .section-commitment .service-list li a img {
    transition: .5s;
  }
	.section-commitment .service-list li a:hover img {
    transform: scale(1.1);
	}
}
@media screen and (max-width: 850px) {
  .section-commitment .service-list {
    flex-wrap: wrap;
    margin: 3rem 0;
  }
  .section-commitment .service-list li {
    width: 50%;
  }
}


/* news */
.section-news {
  background-image: url(../image/top/bg-news.jpg);
  background-size: cover;
}
.section-news::after {
  content: url(../image/common/bg-logo.png);
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: 425px;
  margin-bottom: -166px;
  z-index: 1;
}
@media screen and (max-width: 800px) {
  .section-news .content-inner {
    display: flex;
    justify-content: center;
  }
}


.section-careers {
  padding-bottom: clamp(7rem, 2.909rem + 18.18vw, 12rem);
  z-index: 2;
}
.section-careers .row-block {
  display: flex;
  gap: 3em;
  align-items: flex-start;
}
.section-careers .row-block img {
  max-width: 60%;
}
.section-careers .row-block p {
  margin-bottom: 1em;
}
.section-careers .row-block .button-block {
  justify-content: flex-start;
  padding: 0;
}
@media screen and (max-width: 800px) {
  .section-careers .row-block {
    flex-direction: column;
    align-items: center;
  }
  .section-careers .row-block img {
    max-width: 100%;
  }
  .text-block {
    max-width: 585px;
  }
  .section-careers .row-block .button-block {
    justify-content: center;
    padding: 0 2rem;
  }
}
.section-careers::after {
  content: url(../image/common/bg-logo.png);
  position: absolute;
  right: 50%;
  bottom: 0;
  margin-right: 460px;
  margin-bottom: -196px;
  z-index: 1;
}