@charset "utf-8";

/*=======================================================================
  事業紹介
=======================================================================*/
.works_title {
  background-image: url("../img/title/bg_ti_works.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 60%;
}
#movie_head img {
  width: auto;
  vertical-align: text-bottom;
  position: relative;
  z-index: 5;
}
.container {
  position: relative;
  width: 100%;
  overflow: visible;
  background-color: transparent;
  padding: 0 !important;
}
.container > h3,
.container > p {
  position: relative;
  z-index: 5;
}
.overlay-block {
  position: relative;
  width: 100%;
}
.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(166, 124, 194, 0.3);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 1;
}
.overlay.visible {
  opacity: 1;
}
.overlay-block > h3 {
  position: relative;
  z-index: 5;
  padding-top: 120px;
}
.visual-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
  z-index: 5;
}
.visual-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  border-radius: 50%;
  background-color: rgba(166, 124, 194, 0.5);
  opacity: 0;
  transition: opacity 2.5s ease, transform 2s ease;
}
.circle.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
:root {
  --circle-base: clamp(240px, 32vw, 720px);
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  :root {
    --circle-base: clamp(300px, 50vw, 1200px);
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  :root {
    --circle-base: clamp(140px, 55vh, 300px);
  }
}
@media (min-width: 1025px) {
  :root {
    --circle-base: clamp(300px, 35vw, 1000px);
  }
}
.circle.logo {
  width: calc(var(--circle-base) * 0.7);
  height: calc(var(--circle-base) * 0.7);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle.logo img {
  width: 100px;
}
.circle.text1 {
  width: calc(var(--circle-base) * 1);
  height: calc(var(--circle-base) * 1);
  z-index: 9;
}
.circle.text2 {
  width: calc(var(--circle-base) * 1.3);
  height: calc(var(--circle-base) * 1.3);
  z-index: 8;
}
.circle.text3 {
  width: calc(var(--circle-base) * 1.6);
  height: calc(var(--circle-base) * 1.6);
  z-index: 7;
}
.circle.text4 {
  width: calc(var(--circle-base) * 1.9);
  height: calc(var(--circle-base) * 1.9);
  z-index: 6;
}
.circle.text5 {
  width: calc(var(--circle-base) * 2.3);
  height: calc(var(--circle-base) * 2.3);
  background-color: transparent;
  border-radius: 0;
  z-index: 5;
  padding: 0;
}
.circle .label {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(1rem, 2vw, 2rem);
  white-space: nowrap;
  pointer-events: none;
}
.circle.text5 .label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: normal;
  pointer-events: none;
  width: 80%;
  max-width: 1000px;
}
.circle.text5 .label img {
  display: block;
  margin: 16px auto;
  width: 13vw;
  height: auto;
}
.visual-wrapper-text {
  width: 90%;
  margin: auto;
}
.visual-wrapper-text-first {
  font-size: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem) /*40-60|320-1920*/;
  color: #111;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .visual-layer,
  .visual-wrapper {
    overflow: hidden;
  }
}
/* =====  分野 ===== */
#field h4.under_line:after,
#m-line h4.under_line:after {
  background: #9f78b3;
}
#field section,
#m-line div.flex_sb {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}
/* =====  製造ライン ===== */
.m-line_sub_ti {
  font-size: clamp(1.125rem, 1.1rem + 0.13vw, 1.25rem) /*18-20|320-1920*/;
  color: #111;
  font-weight: 700;
}
#m-line table {
  width: 100%;
}
#m-line thead th:first-of-type,
#m-line thead th:last-of-type {
  color: #fff;
  border-radius: 100vh;
  padding: 2%;
}
#m-line thead th:first-of-type {
  background: #666;
}
#m-line thead th:last-of-type {
  background: #9f78b3;
}
#m-line tbody th,
#m-line tbody td {
  padding: 2%;
}
#m-line tbody th {
  border-bottom: 1px solid #666;
  text-align: left;
}
#m-line tbody td {
  border-bottom: 1px solid #9f78b3;
}
@media (min-width: 768px) {
  #m-line thead th:first-of-type {
    width: 35%;
  }
  #m-line thead th:last-of-type {
    background: #9f78b3;
    width: 61%;
  }
}