@charset "utf-8";

/*
Name: 2021 Page Renewal CSS Document
Version: 1.3
Created date: 2021-10-29
Last updated: 2025-03-13
*/

/* -------------------------------------------------------------------------- */

/* Document Setup
/* -------------------------------------------------------------------------- */

html {
  font-size: 62.5%;
}

body {
  color: #000;
  font: 400 1.4rem 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  word-wrap: break-word;
}

/* Element ----------------------------------- */

b,
strong {
  font-weight: 700;
}

a {
  color: #000;
}

img,
svg {
  height: auto;
  max-width: 100%;
}

hr {
  background: #efefef;
  border: none;
  display: block;
  height: .1rem;
  width: 100%;
  margin: 2.5rem 0;
}

/* Helper Classes ---------------------------- */

.no-margin {
	margin: 0 !important;
}

.no-padding {
	padding: 0 !important;
}

/* Colors ------------------------------------ */

.color-dark-cyan {
  color: #3c7376;
}

/* Aligns ------------------------------------ */

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.align-justify{
  text-align: justify;
}

/*--------------------------------------------*/

.f-size-s{
  font-size: 1.2rem !important;
}

/* -------------------------------------------------------------------------- */

/* Header
/* -------------------------------------------------------------------------- */

.header {
  background: #fff;
  position: fixed;
  z-index: 11;
  left: 0;
  top: 0;
  transition: .3s;
  width: 100%;
}

.header.animation {
  transform: translateY(-100%);
}

.header-inner {
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 2rem);
}

.header-logo a {
  display: block;
  height: 0;
  overflow: hidden;
}

.header-nav ul li a {
  background: no-repeat center/contain;
  display: inline-block;
  height: 0;
  overflow: hidden;
  vertical-align: middle;
}

.header-nav ul li .icon-window {
  background: no-repeat center/contain url("../images/top_2021/icon_window_white.svg");
  display: inline-block;
  height: 1.1rem;
  width: 1.4rem;
  margin-left: .8rem;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------- */

/* Footer
/* -------------------------------------------------------------------------- */

.footer {
  background: #000;
  color: #a0a0a0;
  position: relative;
}

.footer-inner {
  margin-right: auto;
  margin-left: auto;
  max-width: 100rem;
}

.footer-content {
  display: flex;
}

.footer-nav:nth-of-type(1) {
  display: flex;
  flex-wrap: wrap;
}

.footer-nav-head {
  width: 100%;
}

.footer-nav-head::after {
  background: #3f3f3f;
  content: "";
  display: inline-block;
  margin-left: .7rem;
  height: .1rem;
}

.footer-nav-head a {
  background: no-repeat center/contain;
  display: inline-block;
  height: 0;
  overflow: hidden;
}

.footer-nav-head.people a {
  background-image: url("../images/top_2021/footer_nav_people.svg");
}

.footer-nav-head.story a {
  background-image: url("../images/top_2021/footer_nav_story.svg");
}

.footer-nav-head.info a {
  background-image: url("../images/top_2021/footer_nav_info.svg");
}

.footer-nav-head.qa a {
  background-image: url("../images/top_2021/footer_nav_qa.svg");
}

.footer-nav-head.about a {
  background-image: url("../images/top_2021/footer_nav_about.svg");
}

.footer-nav ul li {
  font-weight: 500;
  line-height: 2.4925;
  letter-spacing: .08em;
}

.footer-nav ul li a {
  color: #a0a0a0;
  text-decoration: none;
}

.footer-nav ul li a .icon-window {
  background: no-repeat center/contain url("../images/top_2021/icon_window_gray.svg");
  display: inline-block;
  height: 1.1rem;
  width: 1.4rem;
  margin-left: .8rem;
  vertical-align: middle;
}

.footer-info-logo svg {
  fill: #a0a0a0;
}

.footer-info-link {
  font-weight: 500;
  font-size: 1.3rem;
}

.footer-info-link a {
  color: #a0a0a0;
  text-decoration: none;
}

.footer-info-sns-text {
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

.footer-info-sns-icon {
  display: inline-block;
  margin-left: 1rem;
}

.footer-info-sns-icon svg {
  fill: #a0a0a0;
  vertical-align: middle;
}

.footer-bottom {
  margin-bottom: 5.8rem;
}

.footer-bottom ul li {
  box-sizing: border-box;
  position: relative;
}

.footer-bottom ul li a {
  background: #dedede;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.footer-bottom ul li a::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  transform: rotate(135deg);
}

.footer-copy {
  display: inline-block;
  height: 0;
  overflow: hidden;
  width: 100%;
}

/* Page Top ------------------------------ */

.page-top {
  background: #c1c1c1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.3rem;
  width: 5.3rem;
  position: absolute;
}

/* -------------------------------------------------------------------------- */

/* Top Page
/* -------------------------------------------------------------------------- */

.section-text {
  font-weight: 500;
  line-height: 2;
  letter-spacing: .06em;
  margin-bottom: 2rem;
}

.link-read-more {
  position: relative;
  text-decoration: none;
}

.link-read-more .text {
  background: center / contain no-repeat url("../images/top_2021/txt_read-more.svg");
  display: inline-block;
  height: 0;
  overflow: hidden;
  padding-top: 1.2rem;
  width: 8.8rem;
}

.link-read-more .arrow {
  background: right top / contain no-repeat url("../images/top_2021/icon_arrow_black.svg");
  display: inline-block;
  margin-left: 1.1rem;
  height: 2.4rem;
  width: 3rem;
  vertical-align: middle;
}

.t-kv {
  position: relative;
  text-align: center;
  z-index: -1;
}

.t-kv-pc,
.t-kv-sp {
  margin-right: auto;
  margin-left: auto;
  max-width: 148.4rem;
  overflow: hidden;
  position: relative;
}

.t-kv-hour,
.t-kv-min {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.t-new {
  border-bottom: .1rem solid #e9e9e9;
}

.t-new-inner {
  margin-right: auto;
  margin-left: auto;
  max-width: 71.3rem;
  width: calc(100% - 4.1rem);
}

.t-new-list {
  flex: 1;
}

.t-new-list dl dt {
  font-weight: 400;
  line-height: 1;
  width: 7.8rem;
}

.t-new-list dl dd {
  font-weight: 400;
  letter-spacing: .07em;
}

/* Swiper */

.swiper-container {
  opacity: 0;
}

.swiper-container.swiper-container-initialized {
  opacity: 1;
}

.t-message {
  margin-right: auto;
  margin-left: auto;
  max-width: 70.2rem;
  width: calc(100% - 6rem);
}

.t-message-catch {
  background-repeat: no-repeat;
  height: 0;
  overflow: hidden;
}

.t-message-heading::after {
  border-bottom: .1rem solid #000;
  content: "";
  display: block;
  height: .1rem;
  width: 5.3rem;
}

.t-people {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.t-people-content {
  background: #fff;
  box-sizing: border-box;
}

.t-people-content p {
  font-weight: 500;
  line-height: 2;
  letter-spacing: .03em;
  margin-bottom: 2rem;
}

.t-story {
  margin-right: auto;
  margin-left: auto;
  max-width: 100rem;
  position: relative;
}

.t-story-heading {
  max-width: 81rem;
}

.t-story-heading p {
  font-weight: 500;
  line-height: 1.99;
}

.t-story-column {
  position: relative;
}

.t-story-column::after {
  background: #efefef;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -1;
}

.t-story-column-title {
  background: left top / contain no-repeat;
  height: 0;
  overflow: hidden;
}

.t-story-column-title.one {
  background-image: url("../images/story/index/ttl_story_01.svg");
}

.t-story-column-title.two {
  background-image: url("../images/story/index/ttl_story_02.svg");
}

.t-story-column-text h3 {
  letter-spacing: .01em;
  margin-bottom: 1rem;
}

.t-story-column-text h3 .en {
  letter-spacing: .09em;
}

.t-story-column:last-child .t-story-column-text h3 {
  margin-bottom: .5rem;
}

.t-story-column-text p {
  font-size: .922rem;
  letter-spacing: .06em;
}

.t-profile {
  margin-right: auto;
  margin-left: auto;
  max-width: 70rem;
  position: relative;
}

.t-info {
  margin-right: auto;
  margin-left: auto;
  max-width: 87rem;
}

.t-qa {
  margin-right: auto;
  margin-left: auto;
  max-width: 90rem;
}

.t-qa-content {
  text-align: center;
}

.t-qa-list dl dt {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: .05em;
  position: relative;
}

.t-qa-list dl dt::before,
.t-qa-list dl dt::after {
  content: "";
  position: absolute;
}

.t-qa-list dl dt::before {
  background: center / contain no-repeat url("../images/top_2021/txt_question.svg");
  top: 0;
  bottom: 0;
  left: 1.9rem;
  margin: auto 0;
}

.t-qa-list dl dt::after {
  background: center / contain no-repeat url("../images/top_2021/icon_plus.svg");
  height: 1.3rem;
  width: 1.3rem;
  top: 0;
  bottom: 0;
  right: 1.9rem;
  margin: auto 0;
}

.t-qa-list dl dt.is-active::after {
  background-image: url("../images/top_2021/icon_minus.svg");
}

.t-qa-list dl dd {
  height: 0;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .05em;
  opacity: 0;
  transition: .5s;
}

.t-qa-list dl dd.is-open {
  height: auto;
  margin-bottom: 3rem;
  opacity: 1;
}

.t-topics {
  max-width: 86.3rem;
  position: relative;
}

.t-topics h2 {
  text-align: center;
}

.t-topics-banner.special {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 86.3rem;
  width: 100%;
  text-decoration: none;
}

.t-topics-banner.special .en,
.t-topics-banner.special .ja {
  display: block;
}

.t-topics-banner.special .en {
  background: no-repeat center/contain url("../images/top_2021/txt_special-contents.svg");
  height: 0;
  overflow: hidden;
  padding-top: 1.8rem;
}

.t-topics-banner.special .ja {
  font-weight: 700;
  letter-spacing: 0.1em;
}

.t-topics-banner.special .ja .arrow {
  background: right top / contain no-repeat url(../images/top_2021/icon_arrow_white.svg);
  display: inline-block;
  vertical-align: middle;
}

.t-topics-column {
  display: flex;
}

.t-topics-column a {
  background: #000;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  position: relative;
  width: calc(100% /2 );
}

.t-topics-column a .arrow {
  background: right top / contain no-repeat url(../images/top_2021/icon_arrow_white.svg);
  display: inline-block;
  position: absolute;
}

/* -------------------------------------------------------------------------- */

/* Sub Page Main
/* -------------------------------------------------------------------------- */

.main-header {
  background: center / cover no-repeat;
  box-sizing: border-box;
  color: #fff;
  width: 100%;
}

.main-header > * {
  margin-right: auto;
  margin-left: auto;
  max-width: 63.2rem;
  width: 100%;
}

.main-header .main-header-en {
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
}

.main-header h1 {
  font-weight: 700;
  letter-spacing: .1em;
}

.breadcrumb {
  background: #efefef;
}

.breadcrumb ul {
  font-size: 0;
  padding: 1.1rem 4.2rem .72rem;
}

.breadcrumb ul li {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .14em;
  padding-bottom: .5rem;
}

.breadcrumb ul li a {
  padding-right: .4em;
  text-decoration: none;
}

.breadcrumb ul li a::after {
  content: "-";
  display: inline-block;
  padding-left: .5em;
}

.main-content {
  color: #212121;
  position: relative;
}

.main-content::before {
  background: left center / contain no-repeat;
  content: "";
  position: absolute;
}

.main-content-inner {
  background: #fff;
}

/* -------------------------------------------------------------------------- */

/* Environment Page
/* -------------------------------------------------------------------------- */

.env-main-header .main-header-en {
  background: left top / contain no-repeat url("../images/info/environment/ttl_environment.svg");
  height: 0;
  overflow: hidden;
}

.env-main-content::before {
  background-image: url("../images/info/environment/ttl_info.svg");
}

.env-menu ul {
  font-size: 0;
  text-align: center;
}

.env-menu ul li {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .03em;
}

.env-menu ul li a {
  border-right: .1rem solid #212121;
  border-left: .1rem solid #212121;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
}

.env-menu ul li a::before,
.env-menu ul li a::after {
  border-top: .1rem solid #212121;
  border-bottom: .1rem solid #212121;
  box-sizing: border-box;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
}

.env-menu ul li a::before {
  left: 0;
}

.env-menu ul li a::after {
  right: 0;
}

.env-section h2 {
  background: rgba(33,33,33,.05);
  background: linear-gradient(0deg, rgba(33,33,33,0) 0%, rgba(33,33,33,.05) 100%);
  color: #005e15;
  font-weight: 800;
  letter-spacing: .04em;
  position: relative;
  text-align: center;
}

.env-section-inner {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  max-width: 100rem;
}

.env-section-inner h3 {
  color: #005e15;
  font-weight: 700;
  letter-spacing: .1em;
  position: relative;
}

.env-section-inner h3::before {
  background: #005e15;
  content: "";
  width: .8rem;
  position: absolute;
}

.env-section-inner h4 {
  color: #005e15;
  font-weight: 700;
  letter-spacing: .07em;
  margin-top: 2em;
  margin-bottom: 1.3rem;
}

.env-section-inner p {
  line-height: 1.7;
}

.env-section-inner dl dt {
  color: #005e15;
  font-weight: 700;
  letter-spacing: .1em;
}

.env-section-inner dl dd {
  line-height: 1.565;
  letter-spacing: .08em;
  padding-top: .5rem;
}

.env-section-inner .font-size-small {
  letter-spacing: .05em;
}

.env-media-column-content hr {
  max-width: 48rem;
}

.env-media-column-content p {
  max-width: 50rem;
}

.env-media-column-image figcaption {
  letter-spacing: .1em;
}

.env-career-step-textbox p {
  max-width: 70rem;
}

.env-career-step-panel dl {
  background: #efefef;
}

.env-career-step-panel dl dt {
  letter-spacing: normal;
}

.env-career-step-panel dl dd {
  line-height: 1.7;
}

.env-working .env-section-inner p {
  margin-bottom: 2.1em;
}

.env-gallery-header {
  max-width: 100rem;
}

.env-gallery-content {
  margin: 0 auto;
  max-width: 128rem;
}

.env-gallery-content .swiper-slide img {
  width: 100%;
}

.env-gallery-content .swiper-slide.swiper-slide-prev {
  transform-origin: center right;
}

.env-gallery-content .swiper-slide.swiper-slide-next {
  transform-origin: center left;
}

.env-gallery-content .swiper-slide .caption {
  opacity: 0;
}

.env-gallery-content .swiper-slide.swiper-slide-active .caption {
  opacity: 1;
}

.env-gallery-content .swiper-slide .caption dd {
  line-height: 1.6;
}

.env-gallery-content .swiper-pagination {
  right: 0;
  opacity: 0;
  text-align: right;
}

.env-gallery-content .swiper-slide.swiper-slide-active .swiper-pagination {
  opacity: 1;
}

.env-gallery-content .swiper-pagination-bullet {
  background: #b5b5b5;
  opacity: 1;
}

.env-gallery-content .swiper-pagination-bullet-active,
.env-gallery-content .swiper-pagination-bullet:hover {
  background: #005e15;
}
/* -------------------------------------------------------------------------- */

/* Story Page
/* -------------------------------------------------------------------------- */

.story-main-header {
  background-image: url("../images/story/bg_main_header_pc@2x.jpg");
}

.story-main-header .main-header-en {
  background: left top / contain no-repeat url("../images/story/ttl_story_01.svg");
  height: 0;
  overflow: hidden;
}

.story-main-content::before {
  background-image: url("../images/story/ttl_story_02.svg");
}

.story-text-lead {
  margin: 0 auto;
  max-width: 100rem;
  width: calc(100% - 4rem);
}

.story-text-lead p {
  font-weight: 500;
  letter-spacing: .05em;
}

.story-project {
  margin: 0 auto;
  max-width: 100rem;
}

.story-project-item {
  position: relative;
  z-index: 1;
}

.story-project-item::before {
  background: #efefef;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.story-project-item a {
  color: inherit;
  display: block;
  text-decoration: none;
}

.story-project-heading {
  background: left top / contain no-repeat;
  height: 0;
  overflow: hidden;
}

.story-project-text {
  max-width: 56rem;
  position: relative;
}

.story-project-text::after {
  background: left top / contain no-repeat url("../images/story/index/icon_arrow.svg");
  content: "";
  position: absolute;
  bottom: .2rem;
}

.story-project-text h3 {
  color: #3c7376;
}

.story-project-text h3 .en {
  letter-spacing: .1em;
}

.story-project-text p {
  font-weight: 500;
  letter-spacing: .08em;
}

.story-project-text p .en {
  letter-spacing: .06em;
}

.story-project-text p:not(:last-of-type) {
  margin-bottom: 1em;
}

.story-project-heading.one {
  background-image: url("../images/story/index/ttl_story_01.svg");
}

.story-project-heading.two {
  background-image: url("../images/story/index/ttl_story_02.svg");
}

/* Story Detail Page --------------------- */

.story-detail-lead {
  margin: 0 auto;
  max-width: 100rem;
}

.story-detail-lead h2 {
  color: #3c7376;
}

.story-detail-lead h2 .en {
  letter-spacing: .04em;
}

.story-detail-lead p {
  font-weight: 500;
  letter-spacing: .06em;
  max-width: 66.6rem;
}

.story-profile {
  background: #efefef;
  max-width: 120rem;
}

.story-profile-inner h2 {
  background: left center / contain no-repeat url("../images/story/02/ttl_profile.svg");
  height: 0;
  overflow: hidden;
}

.story-profile-inner ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -.65rem;
  justify-content: space-between;
}

.story-profile-inner ul li h3,
.story-profile-inner ul li p {
  max-width: 20rem;
}

.story-profile-inner ul li h3 {
  color: #3c7376;
  font-weight: 700;
}

.story-profile-inner ul li p {
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
}

.story-detail-section .title {
  background: #3c7376;
}

.story-detail-section .title h2 {
  box-sizing: border-box;
  color: #fff;
  font-weight: 700;
  line-height: 1.96;
  letter-spacing: .03em;
}

.story-detail-section .title h2 .en {
  letter-spacing: .06em;
}

.story-detail-section .content p {
  font-weight: 500;
  letter-spacing: .04em;
  max-width: 65rem;
}

.story-detail-section .content .mb-xs {
  margin-bottom: 1.2em;
}

.story-detail-section .content .name {
  color: #3c7376;
}

/* -------------------------------------------------------------------------- */

/* People Page
/* -------------------------------------------------------------------------- */

.people-main-header .main-header-en {
  background: left top / contain no-repeat url("../images/people/ttl_people.svg");
  height: 0;
  overflow: hidden;
}

.people-work {
  background: #212121;
}

.people-work-inner {
  overflow: hidden;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  max-width: 120rem;
}

.people-work > h2 {
  color: #fff;
  letter-spacing: .1em;
  text-align: center;
}

.people-work-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 0;
  margin-right: auto;
  margin-left: auto;
}

.people-work-nav ul li {
  color: #fff;
  display: inline-block;
  font-weight: 700;
  position: relative;
  text-align: center;
  width: auto;
}

.people-work-nav ul li:hover {
  cursor: pointer;
}

.people-work-content {
  padding-bottom: 6.8rem;
}

.people-work-content .swiper-slide {
  height: auto;
}

.people-work-content .swiper-button-next,
.people-work-content .swiper-button-prev {
  background: #606060;
  border-radius: 2.9rem;
  box-sizing: border-box;
  color: #fff;
  height: 2.9rem;
  width: 2.9rem;
  padding-top: 0.2rem;
}

.people-work-content .swiper-button-next:after,
.people-work-content .swiper-button-prev:after {
  font-size: 1rem;
  font-weight: bold;
}

.people-work-item {
  background: #fff;
  position: relative;
}

.people-work-item[data-occupation="マーケティング企画"] .item-img {
  background: rgba(78,0,144,.05);
}

.people-work-item[data-occupation="デザイン"] .item-img {
  background: rgba(184,0,117,.05);
}

.people-work-item[data-occupation="開発・設計"] .item-img {
  background: rgba(214,115,0,.05);
}

.people-work-item[data-occupation="生産技術"] .item-img {
  background: rgba(175,147,0,.05);
}

.people-work-item[data-occupation="営業"] .item-img {
  background: rgba(0,100,196,.05);
}

.people-work-item[data-occupation="カスタマーサービス"] .item-img {
  background: rgba(35,52,154,.05);
}

.people-work-item[data-occupation="管理部門"] .item-img {
  background: rgba(181,73,0,.05);
}

.people-work-item[data-occupation="研究開発"] .item-img {
  background: rgba(32,115,87,.05);
}

.people-work-item[data-occupation="海外駐在"] .item-img {
  background: rgba(199,6,5,.05);
}

.people-work-item[data-occupation="開発・設計"] .item-img .item-img-icon {
  margin-left: 1.5rem;
  margin-bottom: 4rem;
}

.people-work-item[data-occupation="営業"] .item-img .item-img-icon {
  margin-bottom: 2.5rem;
}

.people-work-item[data-occupation="カスタマーサービス"] .item-img .item-img-icon {
  margin-bottom: 1.5rem;
}

.people-work-item[data-occupation="管理部門"] .item-img .item-img-icon {
  margin-left: 1.2rem;
  margin-bottom: 3.5rem;
}

.people-work-item[data-occupation="研究開発"] .item-img .item-img-icon {
  margin-bottom: 2.5rem;
}

.people-work-item .item-text > h3 {
  letter-spacing: 0.05em;
}

.people-work-item[data-occupation="マーケティング企画"] .item-text > h3 {
  color: #4e0090;
}

.people-work-item[data-occupation="デザイン"] .item-text > h3 {
  color: #b80075;
}

.people-work-item[data-occupation="開発・設計"] .item-text > h3 {
  color: #d67300;
}

.people-work-item[data-occupation="生産技術"] .item-text > h3 {
  color: #af9300;
}

.people-work-item[data-occupation="営業"] .item-text > h3 {
  color: #0064c4;
}

.people-work-item[data-occupation="カスタマーサービス"] .item-text > h3 {
  color: #23349a;
}

.people-work-item[data-occupation="管理部門"] .item-text > h3 {
  color: #b54900;
}

.people-work-item[data-occupation="研究開発"] .item-text > h3 {
  color: #207357;
}

.people-work-item[data-occupation="海外駐在"] .item-text > h3 {
  color: #c70605;
}

.people-work-item .item-text .item-text-description {
  font-feature-settings: "palt";
}

.people-work-item .item-text .item-text-notes {
  color: #7d7d7d;
  font-feature-settings: "palt";
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.people-interview {
  color: #212121;
}

.people-interview h2 {
  letter-spacing: 0.1em;
  text-align: center;
}

.people-interview-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.people-interview-nav ul li {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.people-interview-nav ul li span {
  display: inline-block;
  position: relative;
}

.people-interview-nav ul li.active span::after {
  background: #212121;
  content: "";
  height: .3rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  transition: .3s;
}

.people-interview-content {
  margin-right: auto;
  margin-left: auto;
  max-width: 100rem;
  overflow: hidden;
}

.people-interview-content-item a {
  display: block;
  text-decoration: none;
}

.people-interview-content-item .item-head {
  position: relative;
}

.people-interview-content-item .item-head-occupation {
  color: #fff;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 1rem 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  max-width: 18.3rem;
  width: 100%;
}

.people-interview-content-item[data-occupation="マーケティング企画"] .item-head-occupation {
  background: #4e0090;
}

.people-interview-content-item[data-occupation="デザイン"] .item-head-occupation {
  background: #b80075;
}

.people-interview-content-item[data-occupation="開発・設計"] .item-head-occupation {
  background: #d67300;
}

.people-interview-content-item[data-occupation="生産技術"] .item-head-occupation {
  background: #af9300;
}

.people-interview-content-item[data-occupation="営業"] .item-head-occupation {
  background: #0064c4;
}

.people-interview-content-item[data-occupation="カスタマーサービス"] .item-head-occupation {
  background: #23349a;
}

.people-interview-content-item[data-occupation="管理部門"] .item-head-occupation {
  background: #b54900;
}

.people-interview-content-item[data-occupation="研究開発"] .item-head-occupation {
  background: #207357;
}

.people-interview-content-item[data-occupation="海外駐在"] .item-head-occupation {
  background: #c70605;
}

.people-interview-content-item .item-body {
  padding: 1.2rem 0;
}

.people-interview-content-item .item-body-message {
  font-size: 1.5rem;
  line-height: 1.56;
  letter-spacing: .1em;
  position: relative;
}

.people-interview-content-item .item-body-message::after {
  border-bottom: .1rem solid #212121;
  content: "";
  display: block;
  width: 7rem;
}

.people-interview-content-item .item-body-name {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}

.people-interview-content-item .item-body-career {
  font-size: 1.2rem;
  letter-spacing: .1em;
}

.people-interview-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6.3rem;
}

.people-interview-pagination > p,
.people-interview-pagination ul li {
  font-size: 1.8rem;
  height: 2.9rem;
  margin: 0 1rem;
}

.people-interview-pagination .prev-page,
.people-interview-pagination .next-page {
  position: relative;
  width: 2.9rem;
}

.people-interview-pagination .prev-page::before,
.people-interview-pagination .next-page::before {
  border-top: .2rem solid #fff;
  border-right:  .2rem solid #fff;
  content: "";
  height: .4rem;
  width: .4rem;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.people-interview-pagination .prev-page::before {
  transform: rotate(-135deg);
}

.people-interview-pagination .next-page::before {
  transform: rotate(45deg);
}

.people-interview-pagination .prev-page button,
.people-interview-pagination .next-page button {
  background: #212121;
  border: none;
  color: #212121;
  height: 2.9rem;
  width: 2.9rem;
}

.people-interview-pagination ul {
  display: flex;
}

.people-interview-pagination ul li a {
  text-decoration: none;
}

.people-interview-pagination ul li.current a,
.people-interview-pagination ul li a:hover {
  text-decoration: underline;
}

.project-story {
  position: relative;
  z-index: 1;
}

.project-story-heading {
  text-align: center;
}

.recruit-links {
  max-width: 83.4rem;
}

.recruit-links .recruit-links-item {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.recruit-links .recruit-links-item .item-inner {
  background: #fff;
}

.recruit-links .recruit-links-item .item-title h2::after {
  background: #212121;
  content: "";
  display: block;
  height: .1rem;
}

.recruit-links .recruit-links-item .item-title .item-title-en {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.recruit-links .recruit-links-item .item-link p {
  text-align: center;
}

.recruit-links .recruit-links-item .item-link a {
  background: #212121;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  width: 100%;
  position: relative;
  text-decoration: none;
}

.recruit-links .recruit-links-item .item-link a .arrow {
  background: center / contain no-repeat url("../images/common/icon_arrow.svg");
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

/* -------------------------------------------------------------------------- */

/* Media Queries
/* -------------------------------------------------------------------------- */

@media ( min-width: 1261px ) {

  /* Header -------------------------------- */

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-logo a {
    background: center / contain no-repeat url("../images/top_2021/header_logo_pc.png");
    padding-top: 9.9rem;
    width: 27rem;
    margin-left: 8px;
  }

  .header-menu,
  .header-menu-close {
    display: none;
  }

  .header-nav {
    flex: 1;
  }

  .header-nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .header-nav ul li {
    margin-left: 2rem;
  }

  .header-nav ul li.mypage {
    margin-left: 3.7rem;
  }

  .header-nav ul li.new-graduates {
    margin-left: 5.7rem;
  }

  .header-nav ul li.event {
    margin-left: 2.7rem;
  }

  .header-nav ul li.career,
  .header-nav ul li.graduated {
    margin-left: 0.3rem;
  }

  .header-nav ul li a {
    padding-top: 1.4rem;
    transition: opacity .2s;
  }

  .header-nav ul li:nth-child(1) a {
    background-image: url("../images/top_2021/txt_people.svg");
    width: 5.8rem;
  }

  .header-nav ul li:nth-child(2) a {
    background-image: url("../images/top_2021/txt_story.svg");
    width: 5.3rem;
  }

  .header-nav ul li:nth-child(3) a {
    background-image: url("../images/top_2021/txt_info.svg");
    width: 3.5rem;
  }

  .header-nav ul li:nth-child(4) a {
    background-image: url("../images/top_2021/txt_about.svg");
    width: 5.3rem;
  }

  .header-nav ul li:nth-child(5) a {
    background-image: url("../images/top_2021/txt_qa.svg");
    width: 3.4rem;
  }

  .header-nav ul li.mypage a {
    background-image: url("../images/top_2021/header_nav_mypage_black.svg");
    background-size: 7.1rem auto;
    border-radius: 1.5rem;
    padding-top: 4.2rem;
    width: 11.2rem;
    border: 1px solid;
  }

  .header-nav ul li.new-graduates a,
  .header-nav ul li.career a,
  .header-nav ul li.graduated a,
  .header-nav ul li.event a {
    background-color: #212121;
    background-size: 12.4rem;
    padding-top: 8.3rem;
    position: relative;
    margin-bottom: 1.2rem;
    width: 13.2rem;
  }

  .header-nav ul li.new-graduates a {
    background-image: url("../images/top_2021/header_nav_new-graduates_new.svg");
  }

  .header-nav ul li.career a {
    background-image: url("../images/top_2021/header_nav_career_new.svg");
  }

  .header-nav ul li.event a {
    background-image: url("../images/top_2021/header_nav_event.svg");
    background-size: contain;
    width: 16.1rem;
  }

  .header-nav ul li.graduated-from-26 a {
    background-image: url("../images/top_2021/header_nav_graduated_from_26.svg?ver=2");
  }

  .header-nav ul li.graduated-from-27 a {
    background-image: url("../images/top_2021/header_nav_graduated_from_27.svg");
  }

  .header-nav ul li.new-graduates a:after,
  .header-nav ul li.career a:after,
  .header-nav ul li.graduated a:after,
  .header-nav ul li.event a:after {
    content: "";
    border-bottom: .8rem solid #fff;
    border-left: .8rem solid transparent; 
    position: absolute;
    bottom: .8rem;
    right: .4rem;
  }

  .header-nav ul li a:hover {
    opacity: .7;
  }

  /* Top Page ------------------------------ */

  .t-main {
    padding-top: 9.4rem;
  }

  /* Sub Page Main ------------------------- */

  .main {
    padding-top: 8.2rem;
  }

}

@media ( max-width: 1260px ) {

  /* Header -------------------------------- */

  .header-inner {
    padding-top: 1.9rem;
    padding-bottom: 1.3rem;
  }

  .header-logo a {
    background: url("../images/top_2021/header_logo_sp.png") no-repeat;
    margin-left: .8rem;
    padding-top: 3.6rem;
    width: 20.2rem;
  }

  .header-menu {
    position: absolute;
    top: 2.5rem;
    right: 1.9rem;
    height: 2.3rem;
    width: 2.6rem;
  }

  .header-menu span {
    border: .1rem solid #808080;
    background: #000;
    position: absolute;
    right: 0;
    width: 2.4rem;
  }

  .header-menu span:nth-of-type(1) {
    height: 0.2rem;
    top: 0;
  }

  .header-menu span:nth-of-type(2) {
    height: 0.3rem;
    top: 0.8rem;
  }

  .header-menu span:nth-of-type(3) {
    bottom: 0;
    height: 0.4rem;
  }

  .header-nav {
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    right: -21rem;
    height: 100%;
    width: 19rem;
    z-index: 12;
    transition: .4s;
    visibility: hidden;
  }

  .header-nav.is-open {
    visibility: visible;
    right: 0;
  }

  .header.animation .header-nav.is-open  {
    display: none;
  }

  .header-menu-close {
    opacity: 0;
    position: absolute;
    top: 2.2rem;
    right: 1.7rem;
    height: 2.7rem;
    width: 2.7rem;
  }

  .header-nav.is-open .header-menu-close {
    opacity: 1;
  }

  .header-menu-close span {
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 0.4rem;
    width: 2.3rem;
  }

  .header-menu-close span:nth-of-type(1) {
    transform: rotate(45deg);
  }

  .header-menu-close span:nth-of-type(2) {
    transform: rotate(-45deg);
  }

  .header-nav ul {
    padding: 2.3rem 0rem 2rem;
  }

  .header-nav ul li {
    display: block;
    padding: 0 2.5rem;
    margin-bottom: 0.9rem;
    line-height: 1;
  }

  .header-nav ul li:nth-child(6) {
    border-top: .1rem solid #fff;
    margin: 0.8rem 3.5rem 0.6rem 2.5rem;
    padding: 1.6rem 0 0;
  }

  .header-nav ul li:nth-child(7) {
    margin-bottom: 1.8rem;
  }

  .header-nav ul li.mypage {
    margin-top: 1rem;
  }

  .header-nav ul li.new-graduates,
  .header-nav ul li.event {
    margin: 2.4rem 0 .3rem;
    padding: 0 .5rem;
  }

  .header-nav ul li.graduated {
    margin-bottom: 0.3rem;
    padding: 0 .5rem;
  }

  .header-nav ul li.career {
    padding: 0 .5rem;
  }

  .header-nav ul li a {
    padding-top: 2rem;
  }

  .header-nav ul li:nth-child(1) a {
    background-image: url("../images/top_2021/header_nav_people_white.svg");
    width: 5.1rem;
  }

  .header-nav ul li:nth-child(2) a {
    background-image: url("../images/top_2021/header_nav_story_white.svg");
    width: 4.6rem;
  }

  .header-nav ul li:nth-child(3) a {
    background-image: url("../images/top_2021/header_nav_info_white.svg");
    width: 3.1rem;
  }

  .header-nav ul li:nth-child(4) a {
    background-image: url("../images/top_2021/header_nav_about_white.svg");
    width: 4.7rem;
  }

  .header-nav ul li:nth-child(5) a {
    background-image: url("../images/top_2021/header_nav_qa_white.svg");
    width: 3rem;
  }

  .header-nav ul li:nth-child(6) a {
    background-image: url("../images/top_2021/header_nav_internship_white.svg");
    width: 8.6rem;
  }

  .header-nav ul li:nth-child(7) a {
    background-image: url("../images/top_2021/header_nav_specialcontent_white.svg");
    width: 13rem;
  }

  .header-nav ul li.mypage a {
    background-image: url("../images/top_2021/header_nav_mypage_white.svg");
    border: 1px solid #fff;
    background-size: 7rem auto;
    border-radius: 1rem;
    padding-top: 3.5rem;
    width: 15rem;
  }

  .header-nav ul li.new-graduates a,
  .header-nav ul li.career a,
  .header-nav ul li.graduated a,
  .header-nav ul li.event a {
    background-size: contain;
    background-color: #fff;
    display: block;
    padding-top: 4.9rem;
    position: relative;
    max-width: 17.6rem;
  }

  .header-nav ul li.new-graduates a {
    background-image: url("../images/top_2021/header_nav_new-graduates_sp.svg");
  }

  .header-nav ul li.career a {
    background-image: url("../images/top_2021/header_nav_career_sp.svg");
  }

  .header-nav ul li.event a {
    background-image: url("../images/top_2021/header_nav_event_sp.svg");
  }

  .header-nav ul li.graduated-from-26 a {
    background-image: url("../images/top_2021/header_nav_graduated_from_26_sp.svg?ver=2");
  }

  .header-nav ul li.graduated-from-27 a {
    background-image: url("../images/top_2021/header_nav_graduated_from_27_sp.svg");
  }

  .header-nav ul li.new-graduates a:after,
  .header-nav ul li.career a:after,
  .header-nav ul li.graduated a:after,
  .header-nav ul li.event a:after {
    content: "";
    border-bottom: .7rem solid #212121;
    border-left: .7rem solid transparent; 
    position: absolute;
    bottom: .6rem;
    right: .4rem;
  }

  /* Top Page ------------------------------ */

  .t-main {
    padding-top: 7rem;
  }

  /* Sub Page Main ------------------------- */

  .main {
    padding-top: 7rem;
  }


}

@media ( min-width: 769px ) {

  /* Document Setup ------------------------ */

  /* Helper Classes */

  .view-pc {
    display: inline-block;
  }

  .view-sp {
    display: none;
  }

  .br-sp {
    display: none;
  }

  /* Footer -------------------------------- */

  .footer-inner {
    padding-top: 12rem;
    padding-bottom: 9.4rem;
    width: calc(100% - 4rem);
  }

  .footer-content {
    padding-bottom: 7.2rem;
  }

  .footer-nav a {
    transition: opacity .2s;
  }

  .footer-nav a:hover {
    opacity: .8;
  }

  .footer-nav:nth-of-type(1) {
    width: 37.6%;
  }

  .footer-nav:nth-of-type(2) {
    width: 18.2%;
  }

  .footer-nav:nth-of-type(3) {
    width: 22.6%;
  }

  .footer-nav-head {
    margin-bottom: 1.5rem;
  }

  .footer-nav:nth-of-type(2) .footer-nav-head:not(:first-of-type) {
    margin-top: 4.5rem;
  }

  .footer-nav-head::after {
    width: 3.5rem;
  }

  .footer-nav-head a {
    padding-top: 1.2rem;
  }

  .footer-nav-head.people a {
    width: 5.1rem;
  }

  .footer-nav-head.story a {
    width: 4.6rem;
  }

  .footer-nav-head.info a {
    width: 3.1rem;
  }

  .footer-nav-head.qa a {
    width: 2.9rem;
  }

  .footer-nav-head.about a {
    width: 4.7rem;
  }

  .footer-nav ul li {
    font-size: 1.2rem;
  }

  .footer-nav:nth-of-type(1) ul {
    width: 50%;
  }

  .footer-info {
    border-left: .1rem solid #3f3f3f;
    box-sizing: border-box;
    padding-top: 1rem;
    width: 21.6%;
    text-align: right;
  }

  .footer-info a {
    transition: opacity .2s;
  }

  .footer-info a:hover {
    opacity: .8;
  }

  .footer-info-logo {
    margin-bottom: 3.5rem;
  }

  .footer-info-link {
    margin-right: 1.5em;
  }

  .footer-info-sns {
    margin: 1.6rem 2.1rem 0 0;
  }

  .footer-info-mynavi{
    margin: 1.6rem 0 0 0;
  }

  .footer-bottom ul {
    display: flex;
    justify-content: space-between;
    margin: 0 -.85rem;
  }

  .footer-bottom ul li {
    margin: 0 .85rem;
    width: calc(100% / 3);
  }

  .footer-bottom ul li a {
    font-size: 1.7rem;
    height: 6.7rem;
    transition: opacity .4s;
  }

  .footer-bottom ul li a::after {
    border-left: 0.7rem solid transparent;
    border-right: 0.7rem solid transparent;
    border-bottom: 0.7rem solid #000;
    right: .5rem;
    bottom: .6rem;
  }

  .footer-bottom ul li a:hover {
    opacity: .8;
  }

  .footer-copy {
    background: no-repeat center/contain url("../images/top_2021/footer_copy_pc.svg");
    padding-top: 1.2rem;
  }

  /* Page Top */

  .page-top {
    top: -2.8rem;
    right: 3rem;
    transition: opacity .3s;
  }

  .page-top:hover {
    cursor: pointer;
    opacity: .9;
  }

  /* Top Page ------------------------------ */

  .t-main {
    overflow: hidden;
  }

  .link-read-more {
    transition: opacity .2s;
  }

  .link-read-more:hover {
    opacity: .7;
  }

  .t-kv-pc-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(90deg) scale(0.9);
  }

  .t-kv-hour,
  .t-kv-min {
    top: 5.4rem;
  }

  .t-new {
    padding: 4.8rem 0 3.3rem;
  }

  .t-new-inner {
    display: flex;
  }

  .t-new-list {
    margin-top: -.1rem;
    padding-left: 9.5rem;
    width: 44.5rem;
  }

  .t-new-list dl {
    display: flex;
    width: auto;
  }

  .t-new-list dl dd {
    flex: 1;
    min-height: 3.5rem;
    padding: .6rem 0 0 4.5rem;
    position: relative;
  }

  .t-new-list dl dd::before {
    background: #000;
    content: "";
    display: inline-block;
    height: 3.6rem;
    width: .15rem;
    position: absolute;
    top: .1rem;;
    left: 1.1rem;
    transform: skew(-44.2deg);
  }

  .t-message {
    padding-top: 11.5rem;
    padding-bottom: 14rem;
    position: relative;
  }

  .t-message-catch {
    background-image: url("../images/top_2021/ttl_message_ja_pc.svg");
    margin-top: .1rem;
    padding-top: 51.4rem;
    position: absolute;
    left: 1.4rem;
    width: 9.5rem;
  }

  .t-message-heading {
    padding: 1rem 0 0 20rem;
  }

  .t-message-heading::after {
    margin-bottom: 2.4rem;
    padding-bottom: 2.6rem;
  }

  .t-message-text {
    font: 600 1.7rem/2.35 'Noto Serif JP', serif;
    letter-spacing: .02em;
    padding-left: 20rem;
  }

  .t-people {
    background: center top / cover no-repeat url("../images/top_2021/bg_people_pc@2x.jpg");
    height: 67.7rem;
    width: 97.265625%;
  }

  .t-people-content {
    height: 33rem;
    width: 49.3rem;
    padding: 6rem;
    position: absolute;
    right: 12.3rem;
    bottom: 7rem;
  }

  .t-people-content h2 {
    margin-bottom: 2.7rem;
  }

  .t-story {
    padding: 19.8rem 0 0 4.8rem;
  }

  .t-story::after {
    height: 34rem;
    width: 21.1rem;
    top: 23.1rem;
    right: -2.8rem;
  }

  .t-story-heading {
    display: flex;
    margin: 0 auto 6.5rem;
    padding: 0 .6rem;
  }

  .t-story-heading p {
    font-size: 1.4rem;
    letter-spacing: .1rem;
    padding-left: 3.3rem;
  }

  .t-story-columns {
    display: flex;
  }

  .t-story-column {
    width: 46%;
  }

  .t-story-column:last-child {
    margin-left: 4.8rem;
  }

  .t-story-column::after {
    width: 8.1rem;
  }

  .t-story-column-title {
    margin: .5rem 0 0 9.5rem;
    padding-top: 3.3rem;
  }

  .t-story-column-img {
    margin: -.2rem 0 0 4rem;
  }

  .t-story-column-text {
    padding: 2rem 0 0 11rem;
  }

  .t-story-column-text h3 {
    font: 700 1.76rem/1.68 'Noto Serif JP', serif;
  }

  .t-story-column-text p {
    margin-bottom: 2rem;
  }

  .t-profile {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-top: 16.2rem;
    padding-left: 5.5rem;
  }

  .t-profile::after {
    background: rgba(193,193,193,.3);
    content: "";
    height: 15rem;
    width: 50.7rem;
    position: absolute;
    bottom: -4.8rem;
    left: 6rem;
    z-index: -1;
  }

  .t-profile-content {
    padding-top: 6.7rem;
    padding-left: .5rem;
  }

  .t-profile-content h2 {
    margin-bottom: 2.6rem;
    margin-left: 0.3rem;
  }

  .t-profile-content .section-text {
    margin-bottom: 2.6rem;
  }

  .t-info {
    display: flex;
    justify-content: space-between;
    padding-top: 21.4rem;
    position: relative;
  }

  .t-info::after {
    background: rgba(193,193,193,.3);
    content: "";
    height: 28.6rem;
    width: 19.3rem;
    position: absolute;
    bottom: -5.3rem;
    left: -9.5rem;
    z-index: -1;
  }

  .t-info-img {
    margin-left: 2.5rem;
  }

  .t-info-content {
    padding-top: 4.5rem;
    width: 18rem;
  }

  .t-info-content h2 {
    margin-bottom: 2.6rem;
    margin-left: 1rem;
  }

  .t-info-content .section-text {
    list-style: .02em;
    margin-bottom: 2.8rem;
  }

  .t-qa {
    display: flex;
    justify-content: space-between;
    padding-top: 23.3rem;
    position: relative;
  }

  .t-qa::after {
    background: rgba(193,193,193,.3);
    content: "";
    height: 56.6rem;
    width: 38rem;
    position: absolute;
    top: 15.6rem;
    right: -11.9rem;
    z-index: -1;
  }

  .t-qa-content {
    padding: 7.8rem 0 0 1.7rem;
  }

  .t-qa-content h2 {
    margin-bottom: 2.1rem;
  }

  .t-qa-content .section-text {
    margin-left: 1em;
    margin-bottom: 2.4rem;
  }

  .t-qa-list {
    width: 56rem;
  }

  .t-qa-list dl dt {
    font-size: 1.6rem;
    padding: 2.25rem 6rem 2.25rem 7.2rem;
    margin-bottom: .7rem;
    transition: opacity .3s;
  }

  .t-qa-list dl dt::before {
    height: 3.1rem;
    width: 3.2rem;
  }

  .t-qa-list dl dt:hover {
    cursor: pointer;
    opacity: .8;
  }

  .t-topics {
    margin: 0 auto 18rem;
    padding-top: 14.4rem;
  }

  .t-topics::after {
    background: rgba(193,193,193,.3);
    content: "";
    height: 13.6rem;
    width: 98rem;
    position: absolute;
    bottom: -5rem;
    left: -5.8rem;
    z-index: -1;
  }

  .t-topics h2 {
    margin-bottom: 3.6rem;
    margin-left: .8rem;
  }

  .t-topics-banner.special {
    background: center / cover no-repeat url("../images/top_2021/bnr_special-contents_pc@2x.jpg");
    height: 18.5rem;
    margin-bottom: .8rem;
    transition: opacity .2s;
  }

  .t-topics-banner.special:hover {
    opacity: .7;
  }

  .t-topics-banner.special .en {
    margin: .8rem 1.5rem 1.5rem 0;
    width: 22.5rem;
  }

  .t-topics-banner.special .ja {
    font-size: 2.9rem;
    margin-left: 2rem;
  }

  .t-topics-banner.special .ja .arrow {
    height: 2.6rem;
    width: 3.4rem;
  }

  .t-topics-column {
    margin: -0.4rem;
  }

  .t-topics-column a {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0.4rem;
    height: 18.5rem;
    transition: opacity .4s;
  }

  .t-topics-column a:hover {
    opacity: .8;
  }

  .t-topics-column a .arrow {
    height: 2.6rem;
    width: 3.4rem;
    right: 2.6rem;
    bottom: 2rem;
  }

  /* Sub Page Main ------------------------- */

  .main-header {
    height: 31.1rem;
    padding-top: 11.2rem;
  }

  .main-header .main-header-en {
    padding-top: 5.4rem;
  }

  .main-header h1 {
    font-size: 2.4rem;
    margin-top: 1.5rem;
  }

  .main-content {
    background: left top / 100% auto no-repeat url("../images/common/bg_main_content_pc@2x.jpg");
    padding-top: 19.5rem;
  }

  .main-content::before {
    top: 8.2rem;
    left: 20rem;
    height: 13.2rem;
    width: calc(100% - 20rem);
  }

  .main-content-inner {
    margin-right: 4rem;
    margin-left: 4rem;
  }

  /* Environment Page ---------------------- */

  .env-main-header {
    background-image: url("../images/info/environment/bg_main_header_pc@2x.jpg");
  }

  .env-menu {
    padding: 5.3rem
  }

  .env-menu ul li {
    font-size: 1.6rem;
    padding: 0 1.3rem;
  }

  .env-menu ul li a {
    height: 5.8rem;
    width: 25.5rem;
  }

  .env-menu ul li a::before,
  .env-menu ul li a::after {
    width: 1.4rem;
  }

  .env-section {
    margin-bottom: 16.3rem;
  }

  .env-section h2 {
    font-size: 3.4rem;
    padding: 8rem 0;
  }

  .env-section h2::before {
    background: #005e15;
    content: "";
    height: 1.5rem;
    width: 16.6rem;
    margin: 0 auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }

  .env-section-inner {
    padding-left: 3rem;
  }

  .env-section-inner h3 {
    font-size: 2.4rem;
    margin-bottom: 1.7rem;
  }

  .env-section-inner h3::before {
    height: 2.3rem;
    top: .8rem;
    left: -3rem;
  }

  .env-section-inner h4 {
    font-size: 1.8rem;
  }

  .env-section-inner p {
    font-size: 1.6rem;
    margin-bottom: 1.2em;
  }

  .env-section-inner dl dt {
    font-size: 1.6rem;
  }

  .env-section-inner dl dd {
    font-size: 1.4rem;
  }

  .env-section-inner .font-size-small {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .env-section-inner .font-size-medium {
    font-size: 1.4rem;
  }

  .env-media-column {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10.2rem;
  }

  .env-media-column-content {
    width: 53.6082474%;
  }

  .env-media-column-content dl {
    display: flex;
    margin: 2.7rem 0;
  }

  .env-media-column-content dl dt {
    padding-right: 2.6rem;
    width: 13.7rem;
  }

  .env-media-column-content dl dd {
    flex: 1;
  }

  .env-media-column-image {
    width: 41.2371134%;
  }

  .env-media-column-image img {
    margin-top: 1rem;
  }

  .env-media-column-image figcaption {
    font-size: 1.2rem;
    margin-top: 1rem;
  }

  .env-career-step-table {
    margin: 6.5rem 0 19rem;
  }

  .env-career-step-table p {
    display: none;
  }

  .env-career-step-panel {
    display: flex;
    margin: 6.5rem 0 3rem;
  }

  .env-career-step-panel dl {
    box-sizing: border-box;
    padding: 3.3rem 5rem 4.5rem 4rem;
    width: 50%;
  }

  .env-career-step-panel dl:first-child {
    margin-right: .65rem;
  }

  .env-career-step-panel dl:last-child {
    margin-left: .65rem;
  }

  .env-career-step-panel dl dt {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .env-working-column {
    display: flex;
    justify-content: space-between;
  }

  .env-working-column dl:first-child {
    width: 51.546391752%;
  }

  .env-working-column dl:last-child {
    width: 40.721649484%;
  }

  .env-working-column dl dt {
    margin-bottom: .7rem;
  }

  .env-working-column dl dd {
    margin-bottom: 3.8rem;
  }

  .env-working-column dl dd ul {
    margin-top: 3.2rem;
  }

  .env-working-column dl dd ul li {
    line-height: 1.85;
  }

  .env-working .env-working-image {
    margin: .3rem 0 9.6rem;
  }

  .env-working .env-media-column {
    margin-bottom: 6.5rem;
  }

  .env-working-welfare h4 {
    margin-top: 1.9em;
  }

  .env-gallery {
    margin: 0 -4rem 20.4rem;
    padding: 5rem 0 4.2rem;
    position: relative;
    z-index: 1;
  }

  .env-gallery::before {
    background: #efefef;
    box-sizing: border-box;;
    content: "";
    height: 100%;
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }

  .env-gallery-header {
    display: flex;
    margin: 0 auto 7rem;
  }

  .env-gallery-header h2 {
    margin-right: 5.6rem;
    margin-left: 2.6rem;
  }

  .env-gallery-header p {
    flex: 1;
    font-size: 1.6rem;
    line-height: 1.74;
    letter-spacing: .1em;
  }

  .env-gallery-content .swiper-slide {
    transform: scale(0.7) !important;
    transition: 1s ease;
  }

  .env-gallery-content .swiper-slide.swiper-slide-active {
    transform: scale(1) !important;
  }

  .env-gallery-content .swiper-slide .caption {
    display: flex;
    align-items: center;
    margin-top: 2.6rem;
  }

  .env-gallery-content .swiper-slide .caption dt {
    font-size: 2rem;
    margin-top: -.3em;
    padding-right: 2.5rem;
    white-space: nowrap;
  }

  .env-gallery-content .swiper-slide .caption dd {
    border-left: .1rem solid #949494;
    flex: 1;
    font-size: 1.3rem;
    padding-left: 3.4rem;
    max-width: 36rem;
  }

  .env-gallery-content .swiper-pagination {
    margin-top: 1.5rem;
  }

  .env-gallery-content .swiper-pagination-bullet {
     margin: 0 .5rem;
  }

  /* Story Page ---------------------------- */

  .story-main-header {
    background-image: url("../images/story/bg_main_header_pc@2x.jpg");
  }

  .story-main-header h1 {
    letter-spacing: normal;
  }

  .story-text-lead {
    padding: 7.4rem 0 10.3rem;
  }

  .story-text-lead p {
    font-size: 1.5rem;
    line-height: 1.98;
  }

  .story-project {
    padding-bottom: 10rem;
  }

  .story-project-item {
    margin-bottom: 10.5rem;
  }

  .story-project-item::before {
    width: 14rem;
  }

  .story-project-item.odd {
    margin-left: 11%;
  }

  .story-project-item a {
    transition: opacity .3s;
    padding-left: 7rem;
  }

  .story-project-item a:hover {
    opacity: .7;
  }

  .story-project-heading {
    margin: -.5rem 0 0 9.5rem;
    padding-top: 6.5rem;
  }

  .story-project-img {
    margin-top: -.6rem;
  }

  .story-project-text {
    padding: 2.6rem 6rem 2rem 0;
    margin-left: 12rem;
  }

  .story-project-text::after {
    height: 3rem;
    width: 4rem;
    right: -1rem;
  }

  .story-project-text h3 {
    font: 700 3rem/1.47 'Noto Serif JP', serif;
    letter-spacing: .01em;
    margin-bottom: 2rem;
  }

  .story-project-text p {
    font-size: 1.5rem;
    line-height: 1.98;
  }

/* Story Detail Page */

  .story-detail-lead {
    padding: 4.5rem 0 7rem;
  }

  .story-detail-lead h2 {
    font: italic 700 3.3rem/1.65 'Noto Serif JP', serif;
    margin-bottom: 1.5rem;
  }

  .story-detail-lead p {
    line-height: 1.98;
    font-size: 1.5rem;
  }

  .story-profile {
    margin: 0 auto 13.6rem;
  }

  .story-profile-inner {
    padding: 7rem 10rem 8.4rem;
  }

  .story-profile-inner h2 {
    margin-bottom: 2.5rem;
    padding-top: 3rem;
  }

  .story-profile-inner ul li {
    width: 25%;
  }
  .story-profile-inner ul .story-colum3{
    width: 32%;
  }

  .story-profile-inner ul li h3,
  .story-profile-inner ul li p {
    max-width: 19rem;
  }

  .story-profile-inner ul .story-colum3 h3,
  .story-profile-inner ul .story-colum3 p{
    max-width: 32rem;
  }

  .story-profile-inner ul li h3 {
    font-size: 1.7rem;
    letter-spacing: .1em;
    margin-top: 1.8rem;
  }

  .story-profile-inner ul li p {
    margin-top: .7rem;
  }

  .story-detail-section {
    display: flex;
    justify-content: space-between;
    margin: 0 -4rem 12.8rem;
  }

  .story-detail-section .title {
    height: 43.3rem;
    width: 32.8125%;
  }

  .story-detail-section .title h2 {
    font-size: 2.4rem;
    margin-left: auto;
    max-width: 42rem;
    padding: 7.8rem 0 0 19%;
  }

  .story-detail-section .content {
    width: 61.71875%;
  }

  .story-detail-section .content p {
    font-size: 1.5rem;
    line-height: 2.5;
    margin-bottom: 2.5em;
  }

  .story-detail-section .content p:last-child {
    margin-bottom: 0;
  }

  .story-detail-section .content .name {
    font-size: 1.4rem;
    margin-bottom: .5em;
  }

  /* People Page --------------------------- */

  .people-main-header {
    background-image: url("../images/people/bg_main_header_pc@2x.jpg");
  }

  .people-main-content {
    background-image: url("../images/people/bg_main_content_pc.png");
    padding-top: 18rem;
  }

  .people-work {
    padding-top: 7.3rem;
  }

  .people-work > h2 {
    font-size: 3.4rem;
    margin-bottom: 4.4rem;
  }

  .people-work-nav ul {
    margin-bottom: 4.2rem;
    max-width: 73rem;
  }

  .people-work-nav ul li {
    font-size: 1.4rem;
    letter-spacing: .1em;
    padding: 0.2rem 2.8rem;
    margin-bottom: 1.4rem;
  }

  .people-work-nav ul li::before,
  .people-work-nav ul li::after {
    content: "";
    display: inline-block;
    height: 1.7rem;
    vertical-align: middle;
    position: absolute;
    top: .5rem;
  }

  .people-work-nav ul li::before {
    border-left: .1rem solid #fff;
    left: 0;
  }

  .people-work-nav ul li::after {
    border-right: .1rem solid #fff;
    right: -.1rem;
  }

  .people-work-content .swiper-button-next,
  .people-work-content .swiper-button-prev {
    top: 4.2rem;
  }

  .people-work-content .swiper-button-next {
    right: 6.5%;
  }

  .people-work-content .swiper-button-prev {
    left: 6.5%;
  }

  .people-work-item {
    display: flex;
    min-height: 29rem;
    width: 80rem;
  }

  .people-work-item .item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29rem;
  }

  .people-work-item .item-img .item-img-number {
    position: absolute;
    bottom: 2.2rem;
    left: 2.7rem;
  }

  .people-work-item .item-text {
    box-sizing: border-box;
    padding: 3.2rem 6rem 2rem;
    width: 51rem;
  }

  .people-work-item .item-text > h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .people-work-item .item-text .item-text-description {
    font-size: 1.5rem;
    line-height: 1.69;
    margin-bottom: 1.5rem;
  }

  .people-work-item .item-text .item-text-notes {
    line-height: 1.6;
  }

  .people-interview {
    padding-top: 9.8rem;
  }

  .people-interview h2 {
    font-size: 3.4rem;
    margin-bottom: 4.4rem;
  }

  .people-interview-nav ul {
    max-width: 74rem;
  }

  .people-interview-nav ul li {
    margin-bottom: 2.1rem;
    position: relative;
  }

  .people-interview-nav ul li::before,
  .people-interview-nav ul li::after {
    content: "";
    display: inline-block;
    height: 1.7rem;
    vertical-align: middle;
    position: absolute;
    top: .5rem;
  }

  .people-interview-nav ul li::before {
    border-left: .1rem solid #212121;
    left: 0;
  }

  .people-interview-nav ul li::after {
    border-right: .1rem solid #212121;
    right: -.1rem;
  }

  .people-interview-nav ul li:not(.active):hover {
    cursor: pointer;
  }

  .people-interview-nav ul li span {
    padding: .2rem 2.5rem .8rem;
  }

  .people-interview-content {
    margin-top: 4.5rem;
  }

  .people-interview-content-items {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1.75rem;
    margin-left: -1.75rem;
  }

  .people-interview-content-item {
    box-sizing: border-box;
    margin-bottom: 4rem;
    padding: 0 1.75rem;
    width: calc(100% / 3);
  }

  .people-interview-content-item a {
    transition: opacity .3s;
  }

  .people-interview-content-item a:hover {
    opacity: .8;
  }

  .people-interview-content-item .item-body-message::after {
    margin: 1.8rem 0 1.3rem;
  }

  .project-story {
    margin: 15.3rem auto 4.8rem;
    max-width: 100rem;
    padding-left: 8.9rem;
  }

  .project-story-heading {
    margin: 0 auto 4rem;
    padding-right: 5rem;
  }

  .recruit-links {
    margin: 9rem auto 17rem;
  }

  .recruit-links .recruit-links-item {
    margin: 0 auto;
    margin-bottom: 2.7rem;
    padding: 2.1rem;
  }

  .recruit-links .recruit-links-item.new-graduate {
    background-image: url("../images/common/bg_recruit_bnr_01_pc.jpg");
  }

  .recruit-links .recruit-links-item.mid-career {
    background-image: url("../images/common/bg_recruit_bnr_02_pc.jpg");
  }

  .recruit-links .recruit-links-item .item-inner {
    display: flex;
  }

  .recruit-links .recruit-links-item .item-title {
    box-sizing: border-box;
    padding: 2.6rem 4.8rem;
    width: 31rem;
  }

  .recruit-links .recruit-links-item.new-graduate .item-title {
    margin-top: 4rem;
  }

  .recruit-links .recruit-links-item .item-title h2 {
    font-size: 2.5rem;
    letter-spacing: .1em;
  }

  .recruit-links .recruit-links-item .item-title h2::after {
    width: 6.7rem;
    margin: 2rem 0 2.6rem
  }

  .recruit-links .recruit-links-item.new-graduate .item-title .item-title-en {
    background-image: url("../images/common/ttl_new-graduate-recruit_pc.svg");
    padding-top: 5.7rem;
  }

  .recruit-links .recruit-links-item.mid-career .item-title .item-title-en {
    background-image: url("../images/common/ttl_mid-career-recruit_pc.svg");
    padding-top: 5.1rem;
  }

  .recruit-links .recruit-links-item .item-link {
    box-sizing: border-box;
    padding: 2.6rem 1.6rem 2.6rem 2.8rem;
    width: 51rem;
  }

  .recruit-links .recruit-links-item .item-link p:not(:last-of-type) {
    margin-bottom: .7rem;
  }

  .recruit-links .recruit-links-item .item-link a {
    height: 7.2rem;
    padding-right: 1rem;
    transition: opacity .4s;
  }

  .recruit-links .recruit-links-item .item-link a:hover {
    opacity: .8;
  }

  .recruit-links .recruit-links-item .item-link a .arrow {
    right: 2.4rem;
    height: 3.6rem;
    width: 3.1rem;
  }

}

@media ( max-width: 768px ) {

  /* Document Setup ------------------------ */

  /* Helper Classes */

  .view-pc {
    display: none;
  }

  .view-sp {
    display: inline-block;
  }

  .br-pc {
    display: none;
  }

  .sp-mx0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Footer -------------------------------- */

  .footer-inner {
    padding-top: 5rem;
    padding-bottom: 4.2rem;
    width: calc(100% - 4rem);
  }

  .footer-content {
    flex-wrap: wrap;
  }

  .footer-nav:nth-of-type(1) {
    margin-bottom: 3rem;
    width: 100%;
  }

  .footer-nav-head {
    margin-bottom: 1.5rem;
  }

  .footer-nav-head::after {
    width: 2.9rem;
  }

  .footer-nav:nth-of-type(2) .footer-nav-head:not(:first-of-type) {
    margin-top: 3rem;
  }

  .footer-nav-head a {
    padding-top: 1rem;
  }

  .footer-nav-head.people a {
    width: 4.4rem;
  }

  .footer-nav-head.story a {
    width: 4rem;
  }

  .footer-nav-head.info a {
    width: 2.7rem;
  }

  .footer-nav-head.qa a {
    width: 2.5rem;
  }

  .footer-nav-head.about a {
    width: 4rem;
  }

  .footer-nav:nth-of-type(2) {
    width: 54%;
  }

  .footer-nav:nth-of-type(3) {
    width: 46%;
  }

  .footer-nav ul li {
    font-size: 1rem;
  }

  .footer-nav:nth-of-type(1) ul:nth-of-type(1) {
    width: 58%;
  }

  .footer-nav:nth-of-type(1) ul:nth-of-type(2) {
    width: 42%;
  }

  .footer-info {
    border-top: .1rem solid #3f3f3f;
    margin: 2.9rem 0 3.8rem;
    padding-top: 4.5rem;
    width: 100%;
    text-align: center;
  }

  .footer-info-logo {
    margin-bottom: 2rem;
  }

  .footer-info-sns {
    margin: 1.6rem 0 0 0;
  }

  .footer-info-mynavi{
    margin: 1.6rem 0 0 0;
  }

  .footer-bottom ul li {
    margin: .7rem auto;
    width: calc(100% - 4rem);
  }

  .footer-bottom ul li a {
    font-size: 1.3rem;
    height: 5rem;
  }

  .footer-bottom ul li a::after {
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
    border-bottom: 0.6rem solid #000;
    right: .2rem;
    bottom: .4rem;
  }

  .footer-copy {
    background: no-repeat center/contain url("../images/top_2021/footer_copy_sp.svg");
    padding-top: 3.5rem;
  }

  /*font size*/
  .f-size-s{
  font-size: 1rem !important;
}
  

  /* Page Top */

  .page-top {
    top: -3rem;
    right: 0;
  }

  /* Top Page ------------------------------ */

  .section-text {
    font-size: 1rem;
  }

  .t-kv-hour,
  .t-kv-min {
    top: 6.1rem;
  }

  .t-new {
    padding: 3rem 0 2rem;
  }

  .t-new-heading {
    margin-bottom: 1.9rem;
  }

  .t-new-list dl dt {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .t-new-list dl dd {
    font-size: 1.2rem;
  }

  .t-message {
    padding-top: 5.4rem;
    padding-bottom: 7.4rem;
  }

  .t-message-catch {
    background-image: url("../images/top_2021/ttl_message_ja_sp.svg");
    margin-bottom: 8rem;
    padding-top: 12.7rem;
    width: 13.8rem;
  }

  .t-message-heading::after {
    margin-bottom: 1.8rem;
    padding-bottom: 1.6rem;
  }

  .t-message-heading img {
    width: 11.5rem;
  }

  .t-message-text {
    font: 600 1.3rem/2.27 'Noto Serif JP', serif;
    letter-spacing: .05em;
  }

  .t-people {
    background: rgba(193,193,193,.3);
    padding-bottom: 3rem;
  }

  .t-people::before {
    background: center top / 100% auto no-repeat url("../images/top_2021/bg_people_sp@2x.jpg");
    content: "";
    display: block;
    height: 30.3rem;
    width: 100%;
  }

  .t-people-content {
    margin-top: -3rem;
    max-width: 31rem;
    width: 96.875%;
    padding: 3.6rem 2.5rem 2.5rem;
  }

  .t-people-content h2 {
    margin-bottom: 1.4rem;
    margin-left: .5rem;
  }

  .t-people-content h2 img {
    width: 13.5rem;
  }

  .t-people-content p {
    font-size: 1rem;
    margin-bottom: 2.3rem;
  }

  .t-story {
    padding: 7.5rem 0 0;
  }

  .t-story::after {
    height: 16.5rem;
    width: 8rem;
    top: 15.8rem;
    right: 0;
  }

  .t-story-heading {
    margin-bottom: 3rem;
    padding: 0 3rem;
  }

  .t-story-heading h2 {
    margin-bottom: 2rem;
  }

  .t-story-heading h2 img {
    width: 12.1rem;
  }

  .t-story-heading p {
    font-size: 1rem;
    letter-spacing: .06rem;
  }

  .t-story-column {
    margin-bottom: 2.8rem;
    padding: 0 2.5rem;
  }

  .t-story-column::after {
    width: 4.9rem;
  }

  .t-story-column-title {
    margin-left: 3.5rem;
    padding-top: 2rem;
  }

  .t-story-column-text {
    padding: 1.4rem 0 0 4.5rem;
  }

  .t-story-column-text h3 {
    font: 700 1.2rem/1.68 'Noto Serif JP', serif;
  }

  .t-story-column-text p {
    margin-bottom: 1rem;
  }

  .t-profile {
    padding-top: 7.5rem;
  }

  .t-profile-img {
    position: relative;
    text-align: right;
  }

  .t-profile-img::after {
    background: rgba(193,193,193,.3);
    content: "";
    height: 7.7rem;
    width: 24.3rem;
    position: absolute;
    bottom: -2.7rem;
    left: 2.9rem;
    z-index: -1;
  }

  .t-profile-img img {
    margin-right: 1.7rem;
    width: 69.375%;
  }

  .t-profile-content {
    display: table;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    padding-top: 6.1rem;
    padding-left: .4rem;
  }

  .t-profile-content h2 {
    margin-bottom: 1.8rem;
  }

  .t-profile-content h2 img {
    width: 14.8rem;
  }

  .t-info {
    padding-top: 9.8rem;
    padding-bottom: 9.3rem;
  }

  .t-info-img {
    position: relative;
    text-align: right;
  }

  .t-info-img::after {
    background: rgba(193,193,193,.3);
    content: "";
    height: 19.7rem;
    width: 8.5rem;
    position: absolute;
    bottom: -12rem;
    left: 0;
    z-index: -1;
  }

  .t-info-img img {
    width: 93.75%;
  }

  .t-info-content {
    padding-top: 4.3rem;
    margin-left: auto;
    width: 18.5rem;
  }

  .t-info-content h2 {
    margin-bottom: 1.8rem;
    margin-left: .5rem;
  }

  .t-info-content h2 img {
    width: 8.1rem;
  }

  .t-qa {
    padding: 0 2rem 3.8rem;
    position: relative;
  }

  .t-qa::before {
    background: rgba(193,193,193,.3);
    content: "";
    height: 36rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .t-qa-content {
    padding-top: 4rem;
  }

  .t-qa-content .link-read-more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .t-qa-content h2 {
    margin-bottom: 1rem;
  }

  .t-qa-content h2 img {
    width: 7.8rem;
  }

  .t-qa-content .section-text {
    margin-bottom: 1.5rem;
  }

  .t-qa-list dl dt {
    box-sizing: border-box;
    font-size: 1.3rem;
    line-height: 1.5;
    padding: 1.35rem 4rem 1.35rem 6rem;
    margin-bottom: .5rem;
    min-height: 6.5rem;
  }

  .t-qa-list dl dt::before {
    height: 2.5rem;
    width: 2.5rem;
  }

  .t-qa-list dl dd {
    font-size: 1.3rem;
  }

  .t-topics {
    margin: 0 auto 10.4rem;
    padding-top: 9.7rem;
  }

  .t-topics h2 {
    margin-bottom: 2.5rem;
    margin-left: -0.9rem;
  }

  .t-topics h2 img {
    width: 13.4rem;
  }

  .t-topics-banner.special {
    background: center / cover no-repeat url("../images/top_2021/bnr_special-contents_sp@2x.jpg");
    height: 14.1rem;
    position: relative;
  }

  .t-topics-banner.special .en {
    margin-top: .2rem;
    width: 13rem;
  }

  .t-topics-banner.special .ja {
    font-size: 1.7rem;
    line-height: 1.45;
    margin-top: .6rem;
    text-align: center;
  }

  .t-topics-banner.special .ja .arrow {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    height: 2.1rem;
    width: 2.7rem;
  }

  .t-topics-column {
    background: rgba(193,193,193,.3);
    padding: 1rem .8rem;
  }

  .t-topics-column a {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.2rem;
    height: 6.4rem;
  }

  .t-topics-column a .arrow {
    height: .9rem;
    width: 1.2rem;
    right: .5rem;
    bottom: .8rem;
  }

  /* Sub Page Main ------------------------- */

  .main-header {
    height: 29.7rem;
    padding-top: 6rem;
    text-align: center;
  }

  .main-header h1 {
    font-size: 1.3rem;
    margin-top: .8rem;
  }

  .main-header .main-header-en {
    background-position: center;
    padding-top: 2.7rem;
  }

  .main-content {
    background: right top / 100% auto no-repeat url("../images/common/bg_main_content_sp@2x.jpg");
    padding-top: 13.1rem;
  }

  .main-content::before {
    top: 3.8rem;
    left: 2.4rem;
    height: 6.4rem;
    width: 100%;
    width: calc(100% - 2.4rem);
  }

  .main-content-inner {
    margin-right: 1rem;
    margin-left: 1rem;
  }

  /* Environment Page ---------------------- */

  .env-main-header {
    background-image: url("../images/info/environment/bg_main_header_sp@2x.jpg");
    background-position: center top;
  }

  .env-menu {
    padding: 1rem;
  }

  .env-menu ul {
    display: flex;
  }

  .env-menu ul li {
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 1rem;
    width: 50%;
  }

  .env-menu ul li a {
    padding: .1rem;
    width: 100%;
  }

  .env-menu ul li a::before,
  .env-menu ul li a::after {
    width: .95rem;
  }

  .env-section {
    margin-bottom: 5.2rem;
  }

  .env-section h2 {
    border-top: .8rem solid #005e15;
    font-size: 2rem;
    padding: 3rem 0;
  }

  .env-section-inner h3 {
    font-size: 1.8rem;
    margin-bottom: 1.3rem;
  }

  .env-section-inner h3::before {
    height: 1.9rem;
    top: .5rem;
    left: -2rem;
  }

  .env-section-inner h4 {
    font-size: 1.4rem;
  }

  .env-section-inner p {
    font-size: 1.3rem;
    margin-bottom: 1em;
  }

  .env-section-inner dl dt {
    font-size: 1.4rem;
  }

  .env-section-inner dl dd {
    font-size: 1.2rem;
  }

  .env-section-inner .font-size-small {
    font-size: 1rem;
    line-height: 1.591;
  }

  .env-section-inner .font-size-medium {
    font-size: 1.2rem;
  }

  .env-media-column {
    margin-bottom: 3rem;
  }

  .env-media-column-content {
    margin-bottom: 1.7rem;
    padding: 0 2rem;
  }

  .env-media-column-content dl:not(:last-child) {
    margin-bottom: 2.4rem;
  }

  .env-media-column-content hr {
    margin: 1.9rem 0;
  }

  .env-media-column-image > img:not(:last-child) {
    margin-bottom: .75rem;
  }

  .env-media-column-image figcaption {
    font-size: 1rem;
    margin-top: .5rem;
  }

  .env-career-step-table {
    background: rgba(193,193,193,.3);
    margin: 2.1rem 0 4.2rem;
    padding: 1.2rem .5rem 2rem;
    text-align: center;
  }

  .env-career-step-table p{
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .1em;
  }

  .env-career-step-textbox {
    padding: 0 2rem;
  }

  .env-career-step-panel {
    margin: 1.7rem 0 2.2rem;
  }

  .env-career-step-panel dl {
    margin-top: .9rem;
    padding: 1.5rem 3rem 1.3rem;
  }

  .env-working-textbox {
    padding: 0 2rem;
  }

  .env-working-column {
    margin-top: 2rem;
  }

  .env-working-column dl dd {
    margin-bottom: 2.2rem;
  }

  .env-working-column dl dd ul {
    margin-top: 2rem;
  }

  .env-working-column dl dd ul li {
    line-height: 1.7;
  }

  .env-working-image {
    margin: .3rem 0 5rem;
  }

  .env-working .env-media-column {
    margin-bottom: 3.5rem;
  }

  .env-working-welfare h4 {
    margin-top: 1.2em;
    margin-bottom: .4rem;
  }

  .env-working .env-section-inner .env-working-welfare p {
    margin-bottom: 0;
  }

  .env-gallery {
    background: #efefef;
    margin: 8.4rem -1rem 10rem;
    padding: 5.4rem 0;
  }

  .env-gallery-header {
    margin: 0 auto 3.9rem;
  }

  .env-gallery-header h2 {
    margin: 0 auto 3rem;
    width: 20rem;
  }

  .env-gallery-header p {
    font-size: 1.3rem;
    line-height: 1.68;
    letter-spacing: .05em;
    margin: 0 auto;
    max-width: 26rem;
  }

  .env-gallery-content .swiper-slide .caption {
    margin-top: 4.1rem;
    margin-right: calc(-50vw + 50%);
    margin-left: calc(-50vw + 50%);
    padding: 0 3.5rem;
  }

  .env-gallery-content .swiper-slide .caption dt {
    font-size: 1.4rem;
    margin-bottom: .8rem;
  }

  .env-gallery-content .swiper-slide .caption dd {
    font-size: 1rem;
  }

  .env-gallery-content .swiper-pagination-bullet {
    height: .55rem;
    width: .55rem;
  }

  .env-gallery-content .swiper-pagination-bullet {
     margin: 0 .4rem;
  }

  /* Story Page ---------------------------- */

  .story-main-header {
      background-image: url(../images/story/bg_main_header_sp@2x.jpg);
  }

  .story-text-lead {
    padding: 2.2rem 0 6.2rem;
  }

  .story-text-lead p {
    font-size: 1.3rem;
    line-height: 1.8;
  }

  .story-project {
    padding-bottom: 5rem;
  }

  .story-project-item {
    margin: 0 2rem 5.7rem 0;
  }

  .story-project-item::before {
    width: 2rem;
  }

  .story-project-heading {
    margin: 0 0 1.4rem 4rem;
    padding-top: 2.1rem;
  }

  .story-project-img {
    margin-left: .8rem;
  }

  .story-project-text {
    padding: 1.5rem 1rem 3.8rem 0;
    margin-left: 4rem;
  }

  .story-project-text::after {
    height: 2.2rem;
    width: 2.8rem;
    right: 0;
  }

  .story-project-text h3 {
    font: 700 1.4rem/1.6 'Noto Serif JP', serif;
    margin-bottom: 1rem;
  }

  .story-project-text p {
    font-size: 1rem;
    line-height: 1.931;
  }

  /* Story Detail Page */

  .story-detail-lead {
    padding: 2.2rem 2rem 3.8rem;
  }

  .story-detail-lead h2 {
    font: italic 700 1.8rem/1.6 'Noto Serif JP', serif;
    margin-bottom: 1.6rem;
  }

  .story-detail-lead p {
    font-size: 1.3rem;
    line-height: 1.85;
  }

  .story-profile {
    margin: 0 auto 6.5rem;
  }

  .story-profile-inner {
    padding: 2.8rem 2rem .2rem;
  }

  .story-profile-inner h2 {
    margin-bottom: 1.3rem;
    padding-top: 2.2rem;
  }

  .story-profile-inner ul li {
    margin-bottom: 2rem;
    width: 50%;
  }

  .story-profile-inner ul .story-colum3{
    margin-bottom: 2rem;
    width: 48%;
  }

  .story-profile-inner ul li h3,
  .story-profile-inner ul li p {
    max-width: 92%;
  }

  .story-profile-inner ul li h3 {
    font-size: 1.2rem;
    margin-top: .7rem;
  }

  .story-profile-inner ul li p {
    font-size: 1rem;
    margin-top: .2rem;
  }

  .story-detail-section:not(:last-of-type) {
    margin-bottom: 4.5rem;
  }

  .story-detail-section:last-child {
    margin-bottom: 10rem;
  }

  .story-detail-section .title {
    margin-bottom: 2.2rem;
  }

  .story-detail-section .title h2 {
    font-size: 1.6rem;
    padding: 1.7rem 2rem 1.6rem;
  }

  .story-detail-section .content {
    padding: 0 2rem 0;
  }

  .story-detail-section .content p {
    font-size: 1.2rem;
    line-height: 2;
    margin-bottom: 2em;
  }

  .story-detail-section .content p:last-child {
    margin-bottom: 0;
  }

  .story-detail-section .content .name {
    margin-bottom: 0;
  }

  /* People Page --------------------------- */

  .people-main-header {
    background-image: url("../images/people/bg_main_header_sp@2x.jpg");
  }

  .people-main-header .main-header-en {
    background-position: center;
  }

  .people-main-content {
    background-image: url("../images/people/bg_main_content_sp@2x.png");
    padding-top: 14.5rem;
  }

  .people-work {
    margin-right: -.5rem;
    margin-left: -.5rem;
    padding-top: 3rem;
    padding-bottom: 5.3rem;
  }

  .people-work > h2 {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }

  .people-work-nav ul {
    margin-bottom: 1rem;
    max-width: 40rem;
  }

  .people-work-nav ul li {
    font-size: 1.3rem;
    line-height: 1.1;
    letter-spacing: .05em;
    margin-bottom: 2.3rem;
    padding: .1rem 2rem .2rem;
  }

  .people-work-nav ul li:nth-of-type(1),
  .people-work-nav ul li:nth-of-type(3),
  .people-work-nav ul li:nth-of-type(4),
  .people-work-nav ul li:nth-of-type(6),
  .people-work-nav ul li:nth-of-type(8) {
    border-right: .1rem solid #fff;
  }

  .people-work-nav ul::before,
  .people-work-nav ul::after {
    content: "";
    width: 100%;
  }

  .people-work-nav ul::before {
    order: 1;
  }

  .people-work-nav ul::after {
    order: 2;
  }

  .people-work-nav ul li:nth-child(n+3):nth-child(-n+5) {
    order: 1;
  }

  .people-work-nav ul li:nth-child(n+6):nth-child(-n+7) {
    order: 2;
  }

  .people-work-nav ul li:nth-child(n+8) {
    order: 3;
  }

  .people-work-content .swiper-button-next,
  .people-work-content .swiper-button-prev {
    top: inherit;
    bottom: 1.6rem;
  }

  .people-work-content .swiper-button-next {
    right: 34%;
  }

  .people-work-content .swiper-button-prev {
    left: 34%;
  }

  .people-work-item .item-img {
    padding: 1.5rem 2.2rem;
    position: relative;
  }

  .people-work-item .item-img .item-img-icon {
    position: absolute;
    top: 2rem;
    right: 16px;
  }

  .people-work-item[data-occupation="マーケティング企画"] .item-img .item-img-icon {
    width: 7.8rem;
  }

  .people-work-item[data-occupation="デザイン"] .item-img .item-img-icon {
    width: 7.1rem;
  }

  .people-work-item[data-occupation="開発・設計"] .item-img .item-img-icon {
    width: 6.3rem;
  }

  .people-work-item[data-occupation="生産技術"] .item-img .item-img-icon {
    width: 7rem;
  }

  .people-work-item[data-occupation="営業"] .item-img .item-img-icon {
    width: 7.3rem;
  }

  .people-work-item[data-occupation="カスタマーサービス"] .item-img .item-img-icon {
    width: 5.1rem;
  }

  .people-work-item[data-occupation="管理部門"] .item-img .item-img-icon {
    width: 8.3rem;
  }

  .people-work-item[data-occupation="研究開発"] .item-img .item-img-icon {
    width: 6.2rem;
  }

  .people-work-item[data-occupation="海外駐在"] .item-img .item-img-icon {
    width: 6.6rem;
  }

  .people-work-item .item-img .item-img-number img {
    width: 2.8rem;
  }

  .people-work-item .item-text {
    padding: 4.4rem 2rem;
  }

  .people-work-item .item-text > h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .people-work-item .item-text .item-text-description {
    font-size: 1.4rem;
    line-height: 2.1;
    margin-bottom: 1.4rem;
  }

  .people-work-item .item-text .item-text-notes {
    line-height: 1.8;
  }

  .people-interview {
    margin-top: 5rem;
    margin-bottom: 11.5rem
  }

  .people-interview h2 {
    font-size: 2.4rem;
    margin-bottom: 3.2rem;
  }

  .people-interview-nav ul {
    max-width: 40rem;
  }

  .people-interview-nav ul li {
    font-size: 1.3rem;
    line-height: 1.1;
  }

  .people-interview-nav ul li:not(:first-child) {
    margin-bottom: 1rem;
  }

  .people-interview-nav ul li:first-child {
    margin-bottom: 2.6rem;
    text-align: center;
    width: 100%;
  }

  .people-interview-nav ul li:nth-of-type(2) span,
  .people-interview-nav ul li:nth-of-type(4) span,
  .people-interview-nav ul li:nth-of-type(5) span,
  .people-interview-nav ul li:nth-of-type(7) span,
  .people-interview-nav ul li:nth-of-type(9) span {
    border-right: .1rem solid #212121;
  }

  .people-interview-nav ul li span {
    margin-top: .5rem;
    margin-bottom: .7rem;
    padding-top: .1rem;
    padding-bottom: .2rem;
  }

  .people-interview-nav ul li:not(:first-child) span {
    padding-right: 2.2rem;
    padding-left: 2.2rem;
  }

  .people-interview-nav ul li:first-child span {
    width: 6.8rem;
  }

  .people-interview-nav ul li.active span::after {
    bottom: -.7rem;
  }

  .people-interview-nav ul::before,
  .people-interview-nav ul::after {
    content: "";
    width: 100%;
  }

  .people-interview-nav ul::before {
    order: 1;
  }

  .people-interview-nav ul::after {
    order: 2;
  }

  .people-interview-nav ul li:nth-child(n+4):nth-child(-n+6) {
    order: 1;
  }

  .people-interview-nav ul li:nth-child(n+7):nth-child(-n+8) {
    order: 2;
  }

  .people-interview-nav ul li:nth-child(n+9) {
    order: 3;
  }

  .people-interview-content {
    margin-top: 3.5rem;
    width: calc(100% - 2rem);
  }

  .people-interview-content-item {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3.2rem;
    max-width: 31rem;
  }

  .people-interview-content-item .item-body-message::after {
    margin: 1rem 0;
  }

  .project-story {
    margin-right: -1rem;
    margin-left: -1rem;
  }

  .project-story-heading {
    margin: 0 auto 4rem;
    width: 21.1rem;
  }

  .project-story .t-story-column {
    margin: 0 auto 5rem;
    max-width: 41.5rem;
  }

  .recruit-links {
    background: center / cover no-repeat url("../images/common/bg_recruit_bnr_01_sp.jpg");
    margin: 5rem -1rem 11.3rem;
    padding: 7.4rem 1rem;
  }

  .recruit-links .recruit-links-item {
    margin-bottom: 1rem;
  }

  .recruit-links .recruit-links-item .item-title {
    padding: 2.3rem 3rem;
  }

  .recruit-links .recruit-links-item .item-title h2 {
    font-size: 2.5rem;
    letter-spacing: .07em;
  }

  .recruit-links .recruit-links-item .item-title h2::after {
    width: 5rem;
    margin: 1rem 0 1.8rem;
  }

  .recruit-links .recruit-links-item.new-graduate .item-title .item-title-en {
    background-image: url("../images/common/ttl_new-graduate-recruit_sp.svg");
    padding-top: 1.4rem;
  }

  .recruit-links .recruit-links-item.mid-career .item-title .item-title-en {
    background-image: url("../images/common/ttl_mid-career-recruit_sp.svg");
    padding-top: 1.4rem;
  }

  .recruit-links .recruit-links-item .item-link {
    padding: 0 1.9rem 2.2rem
  }

  .recruit-links .recruit-links-item .item-link p:not(:last-of-type) {
    margin-bottom: .5rem;
  }

  .recruit-links .recruit-links-item .item-link a {
    box-sizing: border-box;
    height: 5.6rem;
    padding-right: 5rem;
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .recruit-links .recruit-links-item .item-link a .arrow {
    right: 3rem;
    height: 2.8rem;
    width: 2.8rem;
  }

}