@charset "UTF-8";
/* ============================================ */
/* work-place
/* ============================================ */
/* ===== roll-img ===== */
.roll-img {
  display: flex;
  overflow: hidden;
  width: 100%;
  margin: 0 0 120px;
}
.roll-img .roll-wrap {
  -webkit-animation: roll-left 60s infinite linear both;
          animation: roll-left 60s infinite linear both;
  display: flex;
}
.roll-img .roll-group {
  display: flex;
}
.roll-img .roll-group .roll-item {
  margin: 0 50px 0 0;
}
.roll-img .roll-group .item01 {
  width: 320px;
  padding-top: 0;
}
.roll-img .roll-group .item02 {
  width: 320px;
  padding-top: 80px;
}
.roll-img .roll-group .item03 {
  width: 390px;
  padding-top: 0;
}
.roll-img .roll-group .item04 {
  width: 320px;
  padding-top: 80px;
}
.roll-img .roll-group .item05 {
  width: 400px;
  padding-top: 40px;
}
.roll-img .roll-group .item06 {
  width: 260px;
  padding-top: 80px;
}
.roll-img .roll-group .item07 {
  width: 450px;
  padding-top: 0;
}
.roll-img .roll-group .item08 {
  width: 320px;
  padding-top: 80px;
}
.roll-img .roll-group .item09 {
  width: 360px;
  padding-top: 40px;
}
.roll-img .roll-group .item10 {
  width: 360px;
  padding-top: 80px;
}

/* スクロールアニメーション */
@-webkit-keyframes roll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes roll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 1024px) {
  .roll-img .roll-group .roll-item {
    margin: 0 30px 0 0;
  }
  .roll-img .roll-group .item01 {
    width: 240px;
    padding-top: 0;
  }
  .roll-img .roll-group .item02 {
    width: 240px;
    padding-top: 60px;
  }
  .roll-img .roll-group .item03 {
    width: 292.5px;
    padding-top: 0;
  }
  .roll-img .roll-group .item04 {
    width: 240px;
    padding-top: 60px;
  }
  .roll-img .roll-group .item05 {
    width: 300px;
    padding-top: 30px;
  }
  .roll-img .roll-group .item06 {
    width: 195px;
    padding-top: 60px;
  }
  .roll-img .roll-group .item07 {
    width: 337.5px;
    padding-top: 0;
  }
  .roll-img .roll-group .item08 {
    width: 240px;
    padding-top: 60px;
  }
  .roll-img .roll-group .item09 {
    width: 270px;
    padding-top: 30px;
  }
  .roll-img .roll-group .item10 {
    width: 270px;
    padding-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .roll-img .roll-group .roll-item {
    margin: 0 25px 0 0;
  }
  .roll-img .roll-group .item01 {
    width: 160px;
    padding-top: 0;
  }
  .roll-img .roll-group .item02 {
    width: 160px;
    padding-top: 40px;
  }
  .roll-img .roll-group .item03 {
    width: 195px;
    padding-top: 0;
  }
  .roll-img .roll-group .item04 {
    width: 160px;
    padding-top: 40px;
  }
  .roll-img .roll-group .item05 {
    width: 200px;
    padding-top: 20px;
  }
  .roll-img .roll-group .item06 {
    width: 130px;
    padding-top: 40px;
  }
  .roll-img .roll-group .item07 {
    width: 225px;
    padding-top: 0;
  }
  .roll-img .roll-group .item08 {
    width: 160px;
    padding-top: 40px;
  }
  .roll-img .roll-group .item09 {
    width: 180px;
    padding-top: 20px;
  }
  .roll-img .roll-group .item10 {
    width: 180px;
    padding-top: 40px;
  }
}
/* ===== map ===== */
#map .map-title {
  position: relative;
  font-size: 24px;
  font-size: 1.5rem;
  color: var(--color-red);
  border-bottom: solid currentColor 1px;
  padding: 0 0 0.5em 80px;
  margin: 0 0 2em;
}
#map .map-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20%;
  display: block;
  width: 70px;
  aspect-ratio: 1/1;
  background: url(../img/environment/work-place/icon-loupe.svg) center center no-repeat;
  background-size: contain;
}
#map .map-text {
  line-height: 2.2;
}
#map .place {
  margin: 40px 0 0;
}
#map .course {
  position: absolute;
  z-index: 1;
}
#map .course .flex-wrap {
  display: flex;
  align-items: first baseline;
  gap: 25px;
}
#map .course .course-title {
  font-size: 20px;
  font-size: 1.25rem;
  color: var(--color-red);
}
#map .course .filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 520px;
  margin: 20px 0 0;
}
#map .course .filter-item {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  border-style: solid;
  border-width: 2px;
  border-radius: 2.5em;
  padding: 0.5em 2em 0.6em;
  white-space: nowrap;
  transition: 0.3s;
  cursor: pointer;
}
#map .course .guide {
  width: 100%;
  max-width: 430px;
  line-height: 1.8;
  padding: 0.7em 1em 0.8em 1em;
  margin: 15px 0 0;
  background: var(--color-white);
  border: solid 1px var(--color-red);
}
#map .course .guide .guide-pin {
  display: inline-block;
  width: 1.2em;
  margin: 0 0.5em 0 0;
}
#map .course .note-wrap {
  position: relative;
  max-width: 430px;
  margin: 15px 0 0;
}
#map .course .note {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.8em 1em;
  line-height: 1.5;
  color: var(--color-white);
  background: var(--color-red);
}
#map .scrollable {
  width: 110%;
}
#map .map {
  position: relative;
  left: -5%;
  top: 0;
  width: 90%;
  min-width: 640px;
}
#map .map .base {
  width: 100%;
}
#map .map .line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#map .map .round,
#map .map .pin,
#map .map .btn,
#map .map .btn-wrap,
#map .map .asterisk {
  position: absolute;
  display: block;
}
#map .map .round {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-red);
  transform: translate(-50%, 50%);
  transition: transform 0.2s;
}
#map .map .pin {
  width: 28px;
  transform: translate(-50%, 0);
  transform-origin: center bottom;
  cursor: pointer;
  transition: transform 0.2s;
}
#map .map .btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 1.5em;
  transform: translate(-50%, 50%);
  white-space: nowrap;
  color: var(--color-red);
  background: var(--color-white);
  border: solid 2px var(--color-red);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
#map .map .btn.no-link {
  cursor: auto;
}
#map .map .btn-wrap .btn {
  position: relative;
  left: auto;
  bottom: auto;
  transform: translate(0, 0);
}
#map .map .btn-wrap .btn + .btn {
  margin: 5px 0 0;
}
#map .map .asterisk {
  font-size: 13px;
  font-size: 0.8125rem;
}

/* 位置設定 */
.saroma .pin {
  left: 90%;
  bottom: 86.5%;
}
.saroma .btn {
  left: 97%;
  bottom: 92.8%;
}

.betsukai .round {
  left: 93%;
  bottom: 83.5%;
}
.betsukai .btn {
  left: 97.2%;
  bottom: 79.5%;
}

.hokkaido-rakno .round {
  left: 77.5%;
  bottom: 82%;
}
.hokkaido-rakno .btn {
  left: 73.5%;
  bottom: 86%;
}

.hokkaido-eniwa .round {
  left: 78%;
  bottom: 80%;
}
.hokkaido-eniwa .btn {
  left: 81.5%;
  bottom: 76%;
}
.hokkaido-eniwa .asterisk {
  left: 74.5%;
  bottom: 71.3%;
}

.doto .round {
  left: 86%;
  bottom: 80%;
}
.doto .btn {
  left: 97.5%;
  bottom: 73.5%;
}

.morioka .round {
  left: 75.5%;
  bottom: 59%;
}
.morioka .btn {
  left: 82.5%;
  bottom: 59%;
}

.tohoku .pin {
  left: 72.5%;
  bottom: 50%;
}
.tohoku .btn {
  left: 80.2%;
  bottom: 53%;
}

.tohoku-rakunou .round {
  left: 72.5%;
  bottom: 50.5%;
}
.tohoku-rakunou .btn {
  left: 82.2%;
  bottom: 53%;
}

.hukushima .round {
  left: 71.2%;
  bottom: 46.5%;
}
.hukushima .btn {
  left: 78.2%;
  bottom: 46.5%;
}

.tone .round {
  left: 71%;
  bottom: 39.5%;
}
.tone .btn {
  left: 78%;
  bottom: 39%;
}

.kanto .round {
  left: 63.5%;
  bottom: 38.5%;
}
.kanto .btn {
  left: 59%;
  bottom: 54%;
}

.tokyo .round {
  left: 67.5%;
  bottom: 34%;
}
.tokyo .btn-wrap {
  left: 90%;
  bottom: 33%;
}

.research-center .pin {
  left: 65.5%;
  bottom: 33%;
}
.research-center .btn {
  left: 78%;
  bottom: 31.5%;
}

.tama-yamato .round {
  left: 63.3%;
  bottom: 34%;
}
.tama-yamato .btn {
  left: 83.5%;
  bottom: 26.5%;
}

.distribution-center .round {
  left: 66%;
  bottom: 31.8%;
}
.distribution-center .btn {
  left: 88.5%;
  bottom: 19.5%;
}

.fuji .round {
  left: 60.3%;
  bottom: 30.2%;
}
.fuji .btn {
  left: 62%;
  bottom: 26.5%;
}

.matsumoto .round {
  left: 58.7%;
  bottom: 38.5%;
}
.matsumoto .btn {
  left: 52%;
  bottom: 48.5%;
}

.hokuriku .round {
  left: 52.5%;
  bottom: 40.8%;
}
.hokuriku .btn {
  left: 43%;
  bottom: 44%;
}

.tokai .round {
  left: 53.3%;
  bottom: 30.2%;
}
.tokai .btn {
  left: 54%;
  bottom: 18.5%;
}

.cyukyo .pin {
  left: 51.8%;
  bottom: 31%;
}
.cyukyo .btn {
  left: 44%;
  bottom: 38%;
}

.cyubu-rakunou .round {
  left: 51.8%;
  bottom: 31.5%;
}
.cyubu-rakunou .btn {
  left: 51%;
  bottom: 36%;
}

.kansai .round {
  left: 45.3%;
  bottom: 28.2%;
}
.kansai .btn {
  left: 42%;
  bottom: 18.5%;
}

.kobe .round {
  left: 41.3%;
  bottom: 30.2%;
}
.kobe .btn {
  left: 25%;
  bottom: 38.8%;
}

.kansai-rakunou .round {
  left: 41.3%;
  bottom: 30.2%;
}
.kansai-rakunou .btn {
  left: 22%;
  bottom: 38.8%;
}

.cyugoku-shikoku .pin {
  left: 29.5%;
  bottom: 28.1%;
}
.cyugoku-shikoku .btn {
  left: 20.5%;
  bottom: 31.5%;
}

.kyusyu-rakuno .round {
  left: 20%;
  bottom: 19%;
}
.kyusyu-rakuno .btn {
  left: 15.5%;
  bottom: 22.5%;
}

.minami-kyusyu .round {
  left: 19.5%;
  bottom: 15.5%;
}
.minami-kyusyu .btn {
  left: 25.5%;
  bottom: 11.5%;
}

@media (hover: hover) {
  #map .map .round.is-hover {
    transform: translate(-50%, 50%) scale(1.25);
  }
  #map .map .pin.is-hover {
    transform: translate(-50%, 0) scale(1.25);
  }
  #map .map .btn:not(.no-link):hover {
    color: var(--color-white);
    background: var(--color-red);
  }
  #map .map .pin:hover {
    transform: translate(-50%, 0) scale(1.25);
  }
}
@media screen and (max-width: 1024px) {
  #map .course {
    position: relative;
  }
  #map .course .filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  #map .course .filter-item {
    width: 49%;
  }
  #map .course .filter-item[data-filter=all] {
    width: 100%;
  }
  #map .course .guide {
    max-width: none;
    margin: 30px 0;
  }
  #map .course .note-wrap {
    max-width: 340px;
  }
  #map .scrollable {
    width: 100%;
  }
  #map .map {
    width: 94%;
  }
  #map .map .pin {
    width: 20px;
  }
  #map .map .round {
    width: 10px;
    height: 10px;
  }
  #map .map .btn {
    font-size: 12px;
    font-size: 0.75rem;
  }
  #map .map .asterisk {
    font-size: 11px;
    font-size: 0.6875rem;
  }
}
@media screen and (max-width: 600px) {
  #map .course .flex-wrap {
    flex-direction: column;
    gap: 10px;
  }
  #map .course .filter-item {
    width: 100%;
  }
  #map .course .guide {
    max-width: none;
    margin: 20px 0;
    font-size: 11px;
    font-size: 0.6875rem;
  }
  #map .course .note-wrap {
    max-width: none;
    min-height: 100px;
  }
  #map .course .note-wrap .note {
    font-size: 11px;
    font-size: 0.6875rem;
  }
  #map .map .btn {
    font-size: 11px;
    font-size: 0.6875rem;
  }
}
/* ===== section共通 ===== */
.section .section-title {
  display: flex;
  align-items: first baseline;
  gap: 25px;
  margin: 0 0 50px;
}
.section .section-title .en {
  font-family: var(--fontfamily-en);
  font-size: 34px;
  font-size: 2.125rem;
  font-weight: 300;
}
.section .section-title .ja {
  font-size: 16px;
  font-size: 1rem;
}
.section .section-text {
  line-height: 2.2;
  margin: 0 0 50px;
}
.section .section-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 0;
}
.section .g-box-wrap {
  gap: 45px 0;
}
.section .g-box {
  line-height: 1.8;
}
.section .g-box > div + div {
  margin: 20px 0 0;
}
.section .g-box .products {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.section .g-box .products .products-text {
  width: 50%;
  min-height: 140px;
}
.section .g-box .products .products-img {
  width: 47%;
}
.section .g-box:has(.view-more) {
  cursor: pointer;
}
.section .g-box .view-more {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-white);
  font-family: var(--fontfamily-en);
  font-size: 13px;
  font-size: 0.8125rem;
  background: var(--color-blue);
  border: solid 2px var(--color-blue);
  padding: 0.5em 1.2em 0.4em;
  white-space: nowrap;
  border-radius: 1.5em;
  transform: translate(-50%, 50%);
  transition: 0.2s ease-out;
}
.section .g-box .view-more::before {
  content: "VIEW MORE";
}
.section .display-none {
  display: none;
}
.section .asterisk {
  margin: 2em 0 0;
}

@media (hover: hover) {
  .section .g-box:has(.view-more):hover .view-more {
    color: var(--color-blue);
    background: var(--color-white);
  }
  .section .g-box:has(.view-more):hover .view-more::before {
    content: "VIEW MORE";
  }
}
@media screen and (max-width: 1024px) {
  .section .g-box .products {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .section .g-box .products .box-name {
    max-width: none;
  }
  .section .g-box .products .products-text {
    width: 100%;
    min-height: auto;
  }
  .section .g-box .products .products-img {
    width: 50%;
    min-width: 180px;
  }
}
@media screen and (max-width: 768px) {
  .section .section-title {
    gap: 15px;
    margin: 0 0 30px;
  }
  .section .section-title .en {
    font-size: 28px;
    font-size: 1.75rem;
  }
  .section .section-title .ja {
    font-size: 14px;
    font-size: 0.875rem;
  }
  .section .section-text {
    margin: 0 0 40px;
  }
}
@media screen and (max-width: 600px) {
  .section .section-title {
    flex-direction: column;
    gap: 10px;
  }
}
/* ===== factory ===== */
#factory {
  background: var(--color-lightblue);
  padding: 0 0 100px;
}

@media screen and (max-width: 768px) {
  #factory {
    padding: 40px 0 80px;
  }
}
/* ===== 色・サイズ設定 ===== */
.filter-item.all {
  color: var(--color-black);
  border-color: var(--color-black);
}
.filter-item.all.is-active {
  background: var(--color-black);
  color: var(--color-white);
}
.filter-item.sales-management {
  color: var(--color-green);
  border-color: var(--color-green);
}
.filter-item.sales-management.is-active {
  background: var(--color-green);
  color: var(--color-white);
}
.filter-item.research-development {
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.filter-item.research-development.is-active {
  background: var(--color-blue);
  color: var(--color-white);
}
.filter-item.production-technology {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}
.filter-item.production-technology.is-active {
  background: var(--color-yellow);
  color: var(--color-white);
}
.filter-item.engineering {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}
.filter-item.engineering.is-active {
  background: var(--color-yellow);
  color: var(--color-white);
}
.filter-item.dairy-farming {
  color: var(--color-pink);
  border-color: var(--color-pink);
}
.filter-item.dairy-farming.is-active {
  background: var(--color-pink);
  color: var(--color-white);
}

@media (hover: hover) {
  .filter-item:hover.is-active {
    background: var(--color-black);
    color: var(--color-white);
  }
  .filter-item.sales-management:hover {
    background: var(--color-green);
    color: var(--color-white);
  }
  .filter-item.research-development:hover {
    background: var(--color-blue);
    color: var(--color-white);
  }
  .filter-item.production-technology:hover {
    background: var(--color-yellow);
    color: var(--color-white);
  }
  .filter-item.engineering:hover {
    background: var(--color-yellow);
    color: var(--color-white);
  }
  .filter-item.dairy-farming:hover {
    background: var(--color-pink);
    color: var(--color-white);
  }
}

/*# sourceMappingURL=work-place.css.map */