@charset "utf-8";
/* CSS Document */

/*****************************************************************************
hero
 *****************************************************************************/
.hero {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 2000px;
  height: 100vh;
  z-index: 1;
}
.hero img {
  width: 100%;
  min-width: 1500px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 800px) {
  .hero.left img {
    transform: translateX(-56%);
  }
  .hero.right img {
    transform: translateX(-39%);
  }
}

.hero.off {
  /*スクロール時*/
  visibility: hidden;
}

/*****************************************************************************
hero2
 *****************************************************************************/
.hero2 {
  position: fixed;
  top: 0;
  left: 50%;
  height: 900px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 2000px;
  z-index: 1;
  background: #17104b;
}
.hero2 .img {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 0;
}
.hero2.center .img {
  left: 50%;
  transform: translate(-50%, 0);
}
.hero2.right30 .img {
  right: 30%;
  transform: translate(30%, 0);
}
.hero2.right40 .img {
  right: 40%;
  transform: translate(40%, 0);
}
.hero2.left30 .img {
  left: 30%;
  transform: translate(-30%, 0);
}
.hero2.left40 .img {
  left: 40%;
  transform: translate(-40%, 0);
}

@media screen and (max-width: 800px) {
  .hero2 {
    height: 500px;
  }
  .hero2 .img {
    width: 1100px;
    height: auto;
    min-width: initial;
    min-height: initial;
  }
}

.hero2.off {
  /*スクロール時*/
  visibility: hidden;
}

/*****************************************************************************
fixedVideo
 *****************************************************************************/

#fixedVideo {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
  z-index: 1;
  background: #17104b;
}
#fixedVideo::after {
  content: "";
  width: 100%;
  height: 200vh;
  background: rgba(0, 0, 0, 0.35);
  position: absolute;
  top: 0;
  left: 0;
}
#fixedVideo.woCover::after {
  display: none;
}
#fixedVideo video,
#fixedVideo .img {
  position: absolute;
}

#fixedVideo.fixedVideo1 {
  height: 900px;
}
#fixedVideo.fixedVideo2 {
  height: 550px;
}
#fixedVideo.center video,
#fixedVideo.center .img {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
}
#fixedVideo.right30 video,
#fixedVideo.right30 .img {
  top: 0;
  right: 30%;
  transform: translate(30%, 0);
  min-width: 100%;
  min-height: 100%;
}
#fixedVideo.right video,
#fixedVideo.right .img {
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 800px) {
  #fixedVideo.fixedVideo1 {
    height: 500px;
  }
  #fixedVideo.fixedVideo1 .img {
    width: auto;
    height: 100%;
    min-height: 0;
    min-width: 0;
  }
  #fixedVideo.fixedVideo2 {
    height: 100vh;
  }
  #fixedVideo.fixedVideo2 .img {
    width: 100%;
    min-width: 1500px;
    min-height: initial;
    right: auto;
    left: auto;
  }
  #fixedVideo.fixedVideo2 .img.rd {
    right: 20%;
    transform: translate(20%, 0);
  }
  #fixedVideo.fixedVideo2 .img.basic {
    left: 50%;
    transform: translate(-50%, 0);
  }
  #fixedVideo.fixedVideo2 .img.qa {
    right: 20%;
    transform: translate(20%, 0);
  }
}

#fixedVideo.off {
  /*スクロール時*/
  visibility: hidden;
}

/*****************************************************************************
pageTitle
 *****************************************************************************/

#pageTitle > .inner {
  width: 80%;
  max-width: 1300px;
  margin: 0 auto;
}
#pageTitle .shoulder {
  font-size: 0.875rem;
  color: #1b1c80;
  font-weight: 700;
}
#pageTitle .hd {
  font-size: 3.8rem;
  padding-top: 8px;
  color: #10104b;
  font-weight: 700;
}
#pageTitle .hd .lwrap:nth-child(2)::before {
  content: "・";
}
#pageTitle .catch {
  font-size: 2.125rem;
  margin-top: 0.8em;
  line-height: 1.3;
  color: #ffffff;
  font-weight: 700;
}
#pageTitle .shadow {
  text-shadow: -1px 0 20px rgba(23, 16, 75, 0.4),
    1px 0 20px rgba(23, 16, 75, 0.4);
}
#pageTitle .shadow2 {
  text-shadow: 0 -1px 20px rgba(255, 255, 255, 0.5),
    0 1px 20px rgba(255, 255, 255, 0.5), -1px 0 20px rgba(255, 255, 255, 0.5),
    1px 0 20px rgba(255, 255, 255, 0.5);
}
#pageTitle .parent {
  margin-top: 12px;
  font-size: 1.25rem;
  padding-left: 24px;
  position: relative;
  font-weight: 700;
}
#pageTitle .parent a {
  text-decoration: none;
}
#pageTitle .parent a:hover {
  text-decoration: underline;
}
#pageTitle .parent::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 50%;
  left: 0;
}
#pageTitle .subTitle {
  margin-top: 15px;
  font-size: 1.25rem;
  padding-left: 24px;
  position: relative;
  font-weight: 700;
}
#pageTitle .subTitle::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 50%;
  left: 0;
}
body.white #pageTitle * {
  color: #ffffff !important;
}
body.white #pageTitle .shoulder.blue {
  color: #1b1c80 !important;
}
body.white #pageTitle .hd.blue {
  color: #10104b !important;
}
body.white #pageTitle .shoulder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.white #pageTitle .parent::before,
body.white #pageTitle .subTitle::before {
  border-color: #ffffff;
}
#pageTitle .hd02 {
  margin-top: 30px;
  font-size: 3.6rem;
  color: #ffffff;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}
#pageTitle .hd02.blue {
  color: #10104b;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0);
}
#pageTitle {
  position: relative;
  z-index: 2;
  padding-top: 50px;
  display: flex;
  align-items: center;
}
#pageTitle.pageTitleLL {
  height: 550px;
}
#pageTitle.pageTitleL {
  /*シール事業　技術情報*/
  height: 450px;
}
#pageTitle.pageTitleM {
  height: 300px;
}
@media screen and (max-width: 800px) {
  #pageTitle.pageTitleLL {
    height: 400px;
  }
  #pageTitle.pageTitleL,
  #pageTitle.pageTitleM {
    height: 250px;
  }
  #pageTitle .hd {
    font-size: 3rem;
  }
  #pageTitle .catch {
    font-size: 1.8rem;
  }
  #pageTitle .hd02 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 500px) {
  #pageTitle .hd .lwrap {
    display: block;
  }
  #pageTitle .hd .lwrap:nth-child(2)::before {
    content: "";
  }
}
@media screen and (max-width: 360px) {
  #pageTitle > .inner {
    width: 90%;
  }
}

/*****************************************************************************
contentBox
 *****************************************************************************/
.contentBox {
  width: 86%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 4;
  line-height: 1.8;
}
.contentBox.wide {
  /*Oリング検索結果*/
  width: 94%;
  max-width: 1900px;
}
.contentBox.wide2 {
  /*Oリング検索窓*/
  width: 94%;
  max-width: 1300px;
}
.contentBox.narrow {
  max-width: 1000px;
}
@media screen and (max-width: 600px) {
  .contentBox {
    width: auto;
    margin: 0 15px;
    line-height: 1.6;
  }
}

/*****************************************************************************
contentsWrapper
 *****************************************************************************/

/*contentsWrapper 灰色斜め背景
----------------------------------------------------*/
.contentsWrapper {
  position: relative;
  z-index: 2;
}
.contentsWrapper > .inner {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.contentsWrapper > .inner::before {
  content: "";
  width: 100%;
  height: 500px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: #e8e8f2;
  transform: translateY(-250px) skewY(-170deg);
}
.contentsWrapper.reverse > .inner::before {
  transform: translateY(-250px) skewY(170deg);
}

.contentsWrapper.reverse2 > .inner::before {
  transform: translateY(-250px) skewY(170deg);
}

.contentsWrapper .topSection,
.contentsWrapper .section {
  padding: 70px 0;
}
.contentsWrapper .section {
  border-top: 1px solid #e8e8f2;
}
.contentsWrapper .section:nth-of-type(1),
.contentsWrapper .section.first-child {
  padding-top: 0;
  border-top: none;
}
.contentsWrapper .section.wBorderT {
  padding: 70px 0;
  border-top: 1px solid #e8e8f2;
}
@media screen and (max-width: 600px) {
  /*.contentsWrapper .lead {
		text-align: left;
	}*/
  .contentsWrapper .topSection,
  .contentsWrapper .section,
  .contentsWrapper .section.wBorderT {
    padding: 50px 0;
  }
}

/*contentsWrapper2 白斜め　
----------------------------------------------------*/
.contentsWrapper2 {
  /*各事業TOP、求人インタビュー*/
  position: relative;
  z-index: 1;
}
.contentsWrapper2::before {
  content: "";
  width: 100%;
  height: 1000px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: #ffffff;
  transform: translateY(150px) skewY(-170deg);
}
.contentsWrapper2 > .inner {
  position: relative;
}
.contentsWrapper2 > .inner::before {
  content: "";
  width: 100%;
  height: calc(100% - 350px);
  position: absolute;
  z-index: 1;
  top: 350px;
  left: 0;
  background: #ffffff;
}
@media screen and (max-width: 800px) {
  .contentsWrapper2 > .inner {
    margin-top: -125px;
  }
}

.contentsWrapper2 .contentBoxWrapper {
  position: relative;
  z-index: 1;
  line-height: 2.2;
  margin: 0 auto;
  padding: 0 0 50px;
  background: #ffffff;
  /*overflow: hidden;*/
}
.contentsWrapper2 .topBox {
  position: relative;
  z-index: 3;
  padding: 200px 0 70px;
}
.contentsWrapper2 .topBox .text {
  line-height: 2;
}

.contentBoxWrapper.grayBg {
  z-index: 2;
  background: #e8e8f2;
}
.contentBoxWrapper.grayBg2::before {
  content: "";
  width: 100%;
  /*height: 200%;*/
  height: 150%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: #e8e8f2;
  transform: translateY(0) skewY(170deg);
}
.contentBoxWrapper.grayBg2 > .inner {
  position: relative;
  z-index: 1;
}

.contentsWrapper2 .contentBox.narrow {
  max-width: 1000px;
}
.contentsWrapper2 .lead {
  text-align: center;
  padding: 70px 0;
}

/*contentsWrapper3 背景画像 検索
----------------------------------------------------*/
.contentsWrapper3 {
  position: relative;
  z-index: 1;
}
.contentsWrapper3 > .inner {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: url(../images/searchBgImg.jpg) 50% 50%;
  background-size: cover;
  /*background-attachment: fixed;*/
}
@media all and (-ms-high-contrast: none) {
  /*IE*/
  .contentsWrapper3 > .inner {
    background-attachment: scroll;
  }
}
.contentsWrapper3::after {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.contentsWrapper3 .searchForm {
  background: rgba(255, 255, 255, 0.75);
}

@media screen and (max-width: 1100px) {
  .contentsWrapper3 > .inner {
    padding: 70px 0;
  }
}
@media screen and (max-width: 600px) {
  .contentsWrapper3 > .inner {
    background-attachment: scroll;
    background-size: auto 100%;
    padding: 50px 0;
  }
}

.contentsWrapper.grayBg {
  background: #fafafa;
}

.zi1 {
  z-index: 1;
}
.zi2 {
  z-index: 2;
}
.zi3 {
  z-index: 2;
}

/*****************************************************************************
subSection
 *****************************************************************************/

.contentsWrapper .section .subSection {
  padding-top: 50px;
}
.contentsWrapper .section .subSection:nth-of-type(1) {
  padding-top: 0;
}

/*****************************************************************************
lead
 *****************************************************************************/
.contentsWrapper .lead {
  text-align: center;
  padding: 70px 10% 100px;
}
.contentsWrapper .lead .catch {
  font-size: 1.875rem;
  line-height: 1.6;
  font-weight: 700;
}
@media screen and (max-width: 600px) {
  .contentsWrapper .lead {
    text-align: left;
  }
}

/*****************************************************************************
hdType
 *****************************************************************************/

/*hdType01
----------------------------------------------------*/
.hdType01 {
  margin-bottom: 80px;
}
.hdType01 .shoulder {
  font-size: 0.875rem;
  color: #1b1c80;
  font-weight: 900;
}
.hdType01 .hd {
  font-size: 3rem;
  padding-top: 10px;
  color: #10104b;
  font-weight: 700;
  line-height: 1;
}
.hdType01 .hd .branch {
  display: inline-block;
  font-size: 1.5rem;
  color: #10104b;
  margin-bottom: 1em;
  position: relative;
  padding-left: 1.2em;
  font-weight: 700;
  line-height: 1.2;
  margin-left: 0.3em;
}

.hdType01 .hd .branch::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 0.6em;
  left: 0;
}

.hdType01 .products {
  margin-top: 20px;
  font-weight: 700;
  font-size: 1.3rem;
}

@media screen and (max-width: 600px) {
  .hdType01 {
    text-align: center;
    margin-bottom: 50px;
  }
  .hdType01 .hd {
    font-size: 2.6rem;
    padding-top: 10px;
  }
}

/*hdType02
----------------------------------------------------*/
.hdType02 .shoulder {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 700;
}
.hdType02 .hd {
  font-size: 2.5rem;
  padding-top: 10px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
}

/*hdType03
----------------------------------------------------*/
.hdType03 {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 70px 10%;
  line-height: 1.2;
}
.hdType03 .shoulder {
  font-size: 0.875rem;
  color: #1b1c80;
  font-weight: 700;
}
.hdType03 .hd {
  font-size: 3rem;
  padding-top: 10px;
  color: #10104b;
  font-weight: 700;
}
.hdType03 .hd .lwrap:nth-of-type(2)::before {
  content: "・";
}
.hdType03 .hd rt {
  font-size: 0.875rem;
  transform: translateY(16px);
  margin-bottom: -1.2em;
}
.hdType03 .catch {
  font-size: 1.25rem;
  margin-top: 3em;
  color: #1b1c80;
  font-weight: 700;
  line-height: 1.6;
}
.hdType03 .hd .s {
  font-size: 1.7rem;
  margin-bottom: 5px;
  color: #1b1c80;
}
.hdType03 .label {
  margin-top: 1em;
}
.hdType03 .label span {
  background: #1b1c80;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 20px;
}
@media screen and (max-width: 600px) {
  .hdType03 {
    padding: 40px 3%;
  }
  .hdType03 .hd {
    padding-top: 0;
    font-size: 2.2rem;
  }
  .hdType03 .hd .lwrap {
    display: block;
  }
  .hdType03 .hd .lwrap:nth-of-type(2)::before {
    content: "";
  }
  .hdType03 .hd .s {
    font-size: 1.14rem;
  }
}

/*hdType03_2
----------------------------------------------------*/
.hdType03_2 {
  position: relative;
  line-height: 1.2;
}
.hdType03_2 .shoulder {
  font-size: 0.875rem;
  color: #1b1c80;
  font-weight: 700;
}
.hdType03_2 .hd {
  font-size: 3rem;
  padding-top: 10px;
  color: #10104b;
  font-weight: 700;
}
.hdType03_2 .catch {
  font-size: 1.25rem;
  margin-top: 20px;
  color: #1b1c80;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 600px) {
  .hdType03 {
    padding: 40px 3%;
  }
  .hdType03 .hd {
    padding-top: 0;
    font-size: 2.2rem;
  }
  .hdType03 .hd .lwrap {
    display: block;
  }
  .hdType03 .hd .lwrap:nth-of-type(2)::before {
    content: "";
  }
}

/*hdType04
----------------------------------------------------*/
.hdType04 {
  font-size: 2rem;
  color: #10104b;
  margin-bottom: 38px;
  position: relative;
  padding-left: 27px;
  font-weight: 700;
  line-height: 1.2;
}
.hdType04::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 0.6em;
  left: 0;
}
.hdType04 .s {
  font-size: 1.25rem;
}
.hdType04 .s2 {
  font-size: 1.5rem;
}
@media screen and (max-width: 600px) {
  .hdType04 {
    font-size: 1.5rem;
    padding-left: 25px;
    margin-bottom: 30px;
  }
  .hdType04::before {
    width: 17px;
  }
  .hdType04 .s {
    font-size: 1.14rem;
  }
  .hdType04 .s2 {
    font-size: 1.14rem;
  }
}

/*hdType05
----------------------------------------------------*/
.hdType05 {
  font-size: 1.5rem;
  color: #10104b;
  margin-bottom: 1.8em;
  position: relative;
  padding-left: 33px;
  font-weight: 700;
  line-height: 1.2;
}

.hdType05::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 0.6em;
  left: 0;
}

/*hdType06
----------------------------------------------------*/
.hdType06 {
  /*連番あり*/
  font-size: 1.5rem;
  color: #10104b;
  margin-bottom: 1.8em;
  position: relative;
  padding-left: 33px;
  font-weight: 700;
  line-height: 1.2;
}

.hdType06 span.num {
  color: #1a1b7f;
  position: absolute;
  top: 0;
  left: 0;
}
.hdType06 span.num::after {
  content: ".";
}

/*hdType21
----------------------------------------------------*/
.hdType21 {
  font-size: 1.25rem;
  color: #10104b;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.1;
}
.hdType21 span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}
.hdType21 span::after {
  content: "";
  border-top: 14px solid #e8e8f2;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0.5em;
  left: 0;
}
@media screen and (max-width: 600px) {
  .hdType21 {
    margin-bottom: 10px;
  }
}

/*hdType21_2
----------------------------------------------------*/
.hdType21_2 {
  font-size: 1.4rem;
  color: #10104b;
  margin-bottom: 40px;
  font-weight: 700;
  line-height: 1.3;
}
.hdType21_2 span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}
.hdType21_2 span::after {
  content: "";
  border-top: 14px solid #e8e8f2;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0.5em;
  left: 0;
}

/*hdType22
----------------------------------------------------*/
.hdType22 {
  font-size: 1.25rem;
  color: #10104b;
  padding: 0 0 20px;
  padding-left: 33px;
  position: relative;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 40px;
  border-bottom: 1px dotted #ccc;
}
.hdType22::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 0.6em;
  left: 0;
}

/*hdType23
----------------------------------------------------*/
.hdType23 {
  margin-bottom: 24px;
}
.hdType23 .shoulder {
  font-size: 0.875rem;
  color: #10104b;
  font-weight: 700;
  line-height: 1.2;
}
.hdType23 .hd {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.hdType23 .hd span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}
.hdType23 .hd span::after {
  content: "";
  border-top: 14px solid #e8e8f2;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0.5em;
  left: 0;
}

/*****************************************************************************
nav
 *****************************************************************************/

/*lnvNav
----------------------------------------------------*/

.lnvNav {
  position: relative;
  height: 70px;
  transition: all 0.4s ease;
}
.lnvNav::after {
  content: "";
  display: block;
  background: #e8e8f2;
  height: 40px;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
}
.lnvNav.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.lnvNav::before {
  content: "";
  background: #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.8s ease;
  opacity: 0;
}
.lnvNav.fixed::before {
  opacity: 1;
}

.lnvNav ul {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background: #ffffff;
  position: relative;
  z-index: 2;
}
.lnvNav li {
  flex: 1;
}
.lnvNav.lnvNav2 li:not(:nth-child(1)) {
  border-left: 1px solid #e8e8f2;
}
.lnvNav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  text-decoration: none;
}
.lnvNav li.on {
  border-top: 5px solid #17104b;
}
.lnvNav li.on a {
  background: #e8e8f2;
}
.lnvNav li a span {
  line-height: 70px;
  padding-left: 12px;
  white-space: nowrap;
  position: relative;
}
.lnvNav li a span::before {
  content: "\f105";
  font-family: FontAwesome;
  color: #b7b7d0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.4s ease;
}
.lnvNav li.on a span::before {
  transform: translateY(-50%) rotate(90deg);
}

/*lnvNavWrapper
----------------------------------------------------*/
.lnvNavWrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /*padding-top: 5px;*/
  z-index: 2;
}
.lnvNavWrapper::after {
  content: "";
  display: block;
  background: #e8e8f2;
  height: 50%;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
}
.lnvNavWrapper ul {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  text-align: center;
}
.lnvNavWrapper li {
  display: inline-block;
}
.lnvNavWrapper li a {
  display: block;
  text-decoration: none;
  text-align: center;
  background: #ffffff;
  padding: 0 25px;
  position: relative;
  transition: background 0.3s, color 0.3s;
}
.lnvNavWrapper.technology li {
  width: 33.33%;
}
.lnvNavWrapper.company li {
  width: 20%;
}
.lnvNavWrapper.technology li a {
  padding: 0 20px;
}
.lnvNavWrapper.company li a {
  padding: 0 20px;
}
.lnvNavWrapper.info li {
  width: calc(100% / 8);
}
.lnvNavWrapper li.on a {
  background: #e7e8f1;
  background: #17104b;
  color: #ffffff;
  pointer-events: none;
}
.lnvNavWrapper li.on a::before {
  display: block;
}

.lnvNavWrapper li a span {
  line-height: 60px;
  white-space: nowrap;
  position: relative;
}
.lnvNavWrapper li:hover:not(.on) a {
  background: #8b87a5;
  color: #ffffff;
}

.lnvNavWrapper li.on a span::before {
  transform: translateY(-50%) rotate(90deg);
}
@media screen and (max-width: 730px) {
  .lnvNavWrapper.company li {
    width: auto;
  }
}
@media screen and (max-width: 700px) {
  .lnvNavWrapper.info li,
  .lnvNavWrapper.technology li {
    width: auto;
  }
}
@media screen and (max-width: 600px) {
  .lnvNavWrapper li a {
    width: auto;
    padding: 0 20px;
  }
  .lnvNavWrapper li a span {
    line-height: 45px;
    font-size: 0.875rem;
  }
}

/*lnvNavWrapper2 シール事業
----------------------------------------------------*/
.lnvNavWrapper2 {
  position: relative;
  z-index: 2;
  width: 100%;
}
.lnvNavWrapper2::before {
  content: "";
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: -30px;
  left: 0;
  background: #e8e8f2;
  z-index: 1;
}
.lnvNavWrapper2 ul {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  padding: 0 5px 20px;
  position: relative;
  z-index: 2;
}
.lnvNavWrapper2 li {
  width: calc((100% - 5px) / 2);
  text-align: center;
}
.lnvNavWrapper2 li:not(:nth-child(1)) {
  margin-left: 5px;
}
.lnvNavWrapper2 li a {
  display: block;
  text-decoration: none;
  line-height: 65px;
  color: #1f323f;
  font-size: 1.5rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.7);
  transition: background 0.3s, color 0.3s;
}
.lnvNavWrapper2 li.on a {
  background: #e8e8f2;
  padding: 5px 0 0;
  color: #10104b;
  font-size: 1.8rem;
  pointer-events: none;
}

.lnvNavWrapper2 li:not(.on) a:hover {
  background: #8b87a5;
  color: #ffffff;
}

@media screen and (max-width: 800px) {
  .lnvNavWrapper2::before {
    bottom: -40px;
  }
  .lnvNavWrapper2 ul {
    padding: 0 5px 10px;
  }
  .lnvNavWrapper2 li a {
    line-height: 40px;
    font-size: 1.1rem;
  }
  .lnvNavWrapper2 li.on a {
    font-size: 1.25rem;
  }
}

/*anchorLink
----------------------------------------------------*/
.anchorLink {
  /*フッ素樹脂製品、複合製品・成形品、メタル事業*/
  position: relative;
  padding: 35px 0 45px;
  z-index: 2;
  background-size: cover;
  background-position: 50% 50%;
}
.anchorLink.sealing {
  background-image: url(../../sealing/images/anchorBgImg.jpg);
}
.anchorLink.metal {
  background-image: url(../../metal/images/anchorBgImg.jpg);
}
.anchorLink::after {
  content: "";
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.anchorLink ul {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.anchorLink li {
  margin: 10px 0 0 10px;
  background: #17104b;
  transition: all 0.3s;
}
.anchorLink li:nth-child(1) {
  margin-left: 0;
}
.anchorLink.layoutFixed2 li {
  width: calc((100% - 10px) / 2);
  max-width: 400px;
}
.anchorLink.layoutFixed4 li {
  width: 20%;
  width: calc((100% - 30px) / 4);
}
.anchorLink.layoutFixed5 li {
  width: calc((100% - 40px) / 5);
}
.anchorLink li a {
  display: block;
  line-height: 42px;
  padding: 0 20px 0 24px;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
}
.anchorLink li a::before {
  content: "\f107";
  font-family: FontAwesome;
  color: #b7b7d0;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.anchorLink li:hover {
  background: #1b1c80;
}
@media screen and (max-width: 1000px) {
  .anchorLink ul {
    padding: 0 20px;
  }
  .anchorLink.layoutFixed4 li {
    width: calc((100% - 10px) / 2);
  }
  .anchorLink.layoutFixed4 li:nth-child(2n + 1) {
    margin-left: 0;
  }
  .anchorLink.layoutFixed5 ul {
    justify-content: flex-start;
  }
  .anchorLink.layoutFixed5 li {
    width: calc((100% - 20px) / 3);
  }
  .anchorLink.layoutFixed5 li:nth-child(3n + 1) {
    margin-left: 0;
  }
}
@media screen and (max-width: 700px) {
  .anchorLink {
    padding: 15px 0 20px;
  }
  .anchorLink ul {
    display: block;
  }
  .anchorLink li {
    max-width: initial !important;
    width: auto !important;
    margin: 5px 0 0;
  }
  .anchorLink.size li a {
    padding: 0 20px 0 24px;
    font-size: 0.9375rem;
  }
}

.anchorLink2 {
  position: relative;
  z-index: 3;
  background: #e8e8f2;
}
.anchorLink2 ul {
  padding: 15px;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  background: #17104b;
}
.anchorLink2 li {
  margin-left: 15px;
}
.anchorLink2.size li {
  width: calc((100% - 45px) / 10);
  margin-left: 5px;
}
.anchorLink2.layoutFixed50 li {
  width: calc((100% - 15px) / 2);
  margin-left: 15px;
}
.anchorLink2 li:nth-child(1) {
  margin-left: 0;
}
.anchorLink2 li a {
  display: block;
  line-height: 42px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s;
}
.anchorLink2 li a::before {
  content: "\f107";
  font-family: FontAwesome;
  color: #b7b7d0;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.anchorLink2.size li.on a {
  background: transparent;
}
.anchorLink2.size li a::before {
  display: none;
}
.anchorLink2 li:not(.on):hover a {
  background: #1b1c80;
}

@media screen and (max-width: 1000px) {
  .anchorLink2.size ul {
    padding: 5px 5px 10px;
    flex-wrap: wrap;
  }
  .anchorLink2.size li {
    width: calc((100% - 20px) / 5);
    margin-left: 5px;
    margin-top: 5px;
  }
  .anchorLink2.size li:nth-child(5n + 1) {
    margin-left: 0;
  }
}
@media screen and (max-width: 600px) {
  .anchorLink2 ul {
    padding: 5px 5px 10px;
    flex-wrap: wrap;
  }
  .anchorLink2 li {
    width: calc((100% - 5px) / 2) !important;
    margin-left: 5px !important;
    margin-top: 5px !important;
  }
  .anchorLink2 li:nth-child(2n + 1) {
    margin-left: 0 !important;
  }
  .anchorLink2 li a {
    line-height: 35px;
    font-size: 0.875rem;
  }
}

.anchorLink3 {
  /*シール事業TOP*/
}
.anchorLink3 ul {
  display: flex;
  margin-top: 25px;
}
.anchorLink3 li {
  width: calc((100% - 10px) / 2);
  max-width: 250px;
}
.anchorLink3 li:not(:nth-child(1)) {
  margin-left: 10px;
}
.anchorLink3 a {
  display: block;
  background: #17104b;
  padding: 15px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  position: relative;
  font-weight: 700;
}
.anchorLink3 a span {
  position: relative;
  z-index: 2;
}
.anchorLink3 a::before {
  content: "\f107";
  font-family: FontAwesome;
  color: #b7b7d0;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.anchorLink3 a::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  background: #0d5fb6;
  transition: height 0.35s;
}
.anchorLink3 a:hover {
  /*background: #1B1C80;*/
}
.anchorLink3 a:hover::after {
  height: 100%;
}
.anchorLink3 a span,
.anchorLink3 a::before {
  transition: color 0.55s;
}
.anchorLink3 a:hover span,
.anchorLink3 a:hover::before {
  color: #ffffff;
}

/*****************************************************************************
table
 *****************************************************************************/
.tbl {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
}
.tbl th,
.tbl td {
  padding: 8px;
  line-height: 1.4;
}
.tbl thead th,
.tbl thead td,
.tbl tbody th {
  font-weight: 700;
}
.tbl thead th,
.tbl thead td {
  color: #ffffff;
  text-align: center;
  border-bottom: 2px solid #ffffff;
  font-size: 0.9375rem;
}
.tbl thead th {
  background-color: #313c56;
}
.tbl thead td {
  background-color: #707c94;
  border-left: 2px solid #ffffff;
}
.tbl tbody th {
  width: 25%;
  background-color: #f5f7f8;
  text-align: center;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  color: #1b1c80;
}
.tbl tbody td {
  border-bottom: 2px solid #f5f7f8;
  text-align: left;
}
.tblTbodyTdCnt tbody td {
  text-align: center;
}
.tbl .color01 {
  /*ポロロッカ*/
  background: #ffffff;
  border-bottom: 2px solid #ffffff;
}
.tbl .color02 {
  /*ポロロッカ*/
  background: #ffffff;
  border: 1px solid #707c94;
  color: inherit;
  border-bottom: 2px solid #ffffff;
}

/*モールド*/
.tbl2 thead th,
.tbl2 thead td {
  padding: 2px 10px;
}
.tbl2 tbody th,
.tbl2 tbody td {
  padding: 7px 10px;
}
.tbl2 thead tr:nth-child(1) td:last-child {
  width: 20em;
}
.tbl2 thead td {
  white-space: nowrap;
}
.tbl2 tbody th {
  white-space: nowrap;
  width: auto;
}
.tbl2 tbody td.last {
  text-align: left;
}

/*抗菌*/
.tbl3 tbody th,
.tbl3 tbody td {
  padding: 12px 20px;
  border-bottom: 2px solid #fff;
  line-height: 1.4;
}
.tbl3 tbody th {
  background: #313c56;
  width: 25%;
  color: #ffffff;
}
.tbl3 tbody td {
  background: #f5f7f8;
  width: 75%;
  text-align: left;
}

/*ポロロッカ選択ガイド*/
.tbl4 {
  border-collapse: separate;
  border-spacing: 0;
  width: 99%;
  background: rgba(255, 255, 255, 0.5);
}
.tbl4 th,
.tbl4 td {
  padding: 8px;
  line-height: 1.4;
}
.tbl4 thead th,
.tbl4 thead td,
.tbl4 tbody th {
  font-weight: 700;
}
.tbl4 thead th,
.tbl4 thead td {
  color: #ffffff;
  text-align: center;
  border-bottom: 2px solid #ffffff;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.tbl4 thead th {
  background-color: #313c56;
}
.tbl4 thead td {
  background-color: #707c94;
  border-left: 2px solid #ffffff;
}
.tbl4 tbody th {
  background-color: #f5f7f8;
  text-align: center;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  color: #1b1c80;
}
.tbl4 tbody td {
  border-bottom: 2px solid #f5f7f8;
  text-align: left;
}
.tbl4 tbody .list1 .ast {
  font-size: 0.875rem;
  padding-left: 1.1em;
  position: relative;
}
.tbl4 tbody .list1 .ast::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.tbl4 tbody .list1 li {
  padding-left: 1em;
  position: relative;
}
.tbl4 tbody .list1 li::before {
  content: "";
  display: block;
  border-radius: 100%;
  width: 0.8em;
  height: 0.8em;
  background: #1b1c80;
  position: absolute;
  top: 0.35em;
  left: 0;
}
.tbl4 tbody .list2 li {
  padding-left: 0.8em;
  position: relative;
}
.tbl4 tbody .list2 li::before {
  content: "";
  display: block;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  background: #cccccc;
  position: absolute;
  top: 0.7em;
  left: 0;
}
.tbl4 tbody .th1 {
  background: #707c94;
  text-align: left;
  color: #ffffff;
}
.tbl4 tbody .th2 {
  /*width: 8em;*/
}
.tbl4 tbody .th3 {
  text-align: left;
  /*width: 14em;*/
}
.tbl4 tbody .td1 {
  text-align: center;
}

.tblCaption {
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
  padding: 0 0 0 1.2em;
  margin-bottom: 10px;
  position: relative;
}
.tblCaption::before {
  content: "\f0ce";
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  left: 0;
}
.tbl .nowrap {
  white-space: nowrap;
}
.tbl .width30 {
  width: 30%;
}
.tbl .width25 {
  width: 25%;
}

/*****************************************************************************
table note
 *****************************************************************************/
.tableFtNote,
.tableFtNote2,
.tableHdNote {
  font-size: 0.875rem;
  line-height: 1.6;
}
.tableFtNote {
  margin: 8px 0 0;
  text-align: right;
}
.tableFtNote2 {
  margin: 8px 0 0;
}
.tableHdNote {
  margin: 0 0 8px;
  text-align: right;
}
.tableHdNote .legend li {
  display: inline-block;
  margin-left: 0.5em;
}

/*****************************************************************************
tableFloatThead
 *****************************************************************************/
.tableFloatThead {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 600px) {
  .tableFloatThead .tbl tbody th {
    width: 100px !important;
  }
  .tableFloatThead.w400 table {
    width: 400% !important;
  }
  .tableFloatThead.w300 table {
    width: 300% !important;
  }
  .tableFloatThead.w200 table {
    width: 200% !important;
  }
  .tableFloatThead.w150 table {
    width: 150% !important;
  }
}

/*****************************************************************************
hvFuncTbl
 *****************************************************************************/

.hvFuncTbl tr th,
.hvFuncTbl tr td {
  transition: all 0.3s ease;
}
.hvFuncTbl tr.on {
  cursor: pointer;
}
.hvFuncTbl tr.on th {
  background: #1b1c80;
  color: #ffffff;
}
.hvFuncTbl tr.on th a {
  color: #ffffff;
}
.hvFuncTbl tr.on td {
  background: #f5f7f8;
}
.hvFuncTbl tr.on a {
  text-decoration: underline;
}

.productNotice {
  margin-top: 50px;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  color: #777;
}

/*****************************************************************************
dataLinkBox
 *****************************************************************************/

.dataLinkBox {
  margin-top: 15px;
  line-height: 1.3;
}
.dataLinkBox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*	border-top: 1px solid #E3E3E3;
	border-left: 1px solid #E3E3E3;*/
}
.dataLinkBox li {
  /*	border-right: 1px solid #E3E3E3;
	border-bottom: 1px solid #E3E3E3;*/
  width: calc(100% / 3);
}
.dataLinkBox li.alone {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.dataLinkBox li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  padding: 35px;
  position: relative;
  width: 100%;
  height: 100%;
  background: #fafafa;
  transition: all 0.3s;
  border: 1px solid #e3e3e3;
}
.dataLinkBox li:not(:nth-child(1)) a {
  border-left: none;
}

.dataLinkBox li a .fa {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #e8e8f2;
}
.dataLinkBox li a span {
  display: block;
}
.dataLinkBox li a .type {
  margin-top: 10px;
  font-size: 0.75rem;
}

.dataLinkBox li a:hover {
  background: #1b1c80;
  color: #ffffff;
}
.dataLinkBoxFt {
  text-align: right;
  font-size: 0.875rem;
  margin-top: 0.5em;
}
.dataLinkBoxFt.red {
  color: #db0022;
  text-align: center;
}
.dataLinkBoxFt.red a {
  color: #db0022;
}
@media screen and (max-width: 800px) {
  .dataLinkBox ul {
    display: block;
  }
  .dataLinkBox li {
    width: auto;
  }
  .dataLinkBox li:not(:nth-child(1)) a {
    border: 1px solid #e3e3e3;
    border-top: none;
  }
}

/*****************************************************************************
spacer / bodyBg
 *****************************************************************************/
.spacer {
  height: 50vh;
}
body > .bodyBg {
  position: fixed;
  width: 100%;
  max-width: 2000px;
  height: 100%;
  background: 50% 50% no-repeat;
  /*background-size: 100% auto;*/
  background-size: cover;
  z-index: 1;
  visibility: hidden;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (orientation: portrait) {
  body > .bodyBg {
    background-size: auto 100%;
  }
}

body > .bodyBg.on {
  /*スクロール時*/
  visibility: visible;
}
@media screen and (max-width: 1000px) {
  .spacer {
    height: 35vh;
  }
}

body > .bodyBg.search {
  background-image: url(../images/searchBgImg.jpg);
}

/*****************************************************************************
symbol
 *****************************************************************************/
.symbolG,
.symbolNG,
.symbolNB,
.symbolCell {
  font-family: Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  /*font-family: "ＭＳ ゴシック", "MS Gothic", 'Hiragino Sans','ヒラギノ角ゴシック', "monospace";*/
  font-weight: bold;
  font-weight: 700;
}

.symbolG,
.symbolNG,
.symbolNB {
  font-weight: bold;
}
.symbolG.l,
.symbolNG.l,
.symbolNB.l {
  font-size: 1.4rem;
}
.symbolG {
  color: #cc6666;
}
.symbolNG {
  color: #6699cc;
}
.symbolNB {
  color: #669999;
}

/*****************************************************************************
listType
 *****************************************************************************/

/*dList2
----------------------------------------------------*/
.dList2 dl {
  display: flex;
}
.dList2 dt {
  width: 10em;
}
@media screen and (max-width: 600px) {
  .dList2 dl {
    display: block;
  }
}
.listType01 {
  /*会社概要*/
  /*display: flex;
	flex-wrap: wrap;*/
}
.listType01 > li {
  display: inline-block;
  min-width: 32%;
  padding-right: 3em;
  padding-left: 0.7em;
  position: relative;
}
.listType01 > li::before {
  content: "";
  display: block;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  background: #cccccc;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}

.listType02 > li {
  padding-left: 0.8em;
  position: relative;
  margin-top: 12px;
}
.listType02 > li::before {
  content: "";
  display: block;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  background: #cccccc;
  position: absolute;
  top: 0.7em;
  left: 0;
}

.listType02b > li {
  padding-left: 1em;
  position: relative;
}
.listType02b > li:not(:nth-child(1)) {
  margin-top: 2.4em;
}
.listType02b > li::before {
  content: "";
  display: block;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  background: #cccccc;
  position: absolute;
  top: 0.6em;
  left: 0;
}

.listType03 {
  counter-reset: item 0;
}
.listType03 > li {
  padding-left: 1.5em;
  position: relative;
}
.listType03 > li::before {
  content: counter(item) ".";
  counter-increment: item;
  position: absolute;
  top: 0;
  left: 0;
  color: #1b1c80;
}

.listType04 {
  counter-reset: item 0;
}
.listType04 > li {
  padding-left: 1.5em;
  position: relative;
}
.listType04 > li::before {
  content: counter(item) ")";
  counter-increment: item;
  position: absolute;
  top: 0;
  left: 0;
  color: #1b1c80;
}

.listType05 > li {
  padding-left: 1.5em;
  position: relative;
}
.listType05 > li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
  color: #1b1c80;
}

.listType06 {
  margin-top: -10px;
}
.listType06 > li {
  display: inline-block;
  background: #707c94;
  padding: 10px 15px;
  color: #ffffff;
  line-height: 1.2;
  margin-right: 10px;
  margin-top: 10px;
}

/*****************************************************************************
style
 *****************************************************************************/

sup.note {
}
div.note {
  margin-top: 1em;
  font-size: 0.875rem;
}

/*****************************************************************************
imgL /  imgR
*****************************************************************************/

/*imgL
------------------------------------------------*/
.imgL {
  display: flex;
  flex-direction: row-reverse;
}
.imgL .img {
  width: 40%;
}
.imgL .img img {
  width: 100%;
}
.imgL .text {
  flex: 1;
  margin-left: 60px;
}
@media screen and (max-width: 600px) {
  .imgL {
    display: block;
  }
  .imgL .img {
    width: auto;
    margin-top: 30px;
  }
  .imgL .text {
    margin-left: 0;
  }
}

/*imgR
------------------------------------------------*/
.imgR {
  display: flex;
}
.imgR .img {
  width: 40%;
}
.imgR .img img {
  width: 100%;
}
.imgR .text {
  flex: 1;
  margin-right: 60px;
}
@media screen and (max-width: 600px) {
  .imgR {
    display: block;
  }
  .imgR .img {
    width: auto;
    margin-top: 30px;
  }
  .imgR .text {
    margin-right: 0;
  }
}

.imgL .img .caption,
.imgR .img .caption {
  color: #aaaaaa;
  margin-top: 10px;
  font-size: 0.875rem;
}

/*****************************************************************************
特徴
*****************************************************************************/

/*feature
----------------------------------------------------*/
.feature ul {
  display: flex;
  flex-wrap: wrap;
  counter-reset: item 0;
  margin-top: -50px;
  line-height: 1.6;
}
.feature li {
  width: calc((100% - 40px) / 2);
  margin-left: 40px;
  margin-top: 50px;
  padding-left: 55px;
  position: relative;
}
.feature li:nth-child(2n + 1) {
  margin-left: 0;
}
.feature li::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: -5px;
  left: 0;
  color: #ffffff;
  content: counter(item) "";
  counter-increment: item;
  background: #313c56;
}
.feature .hd {
  font-size: 1.3rem;
  color: #1f323f;
  margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
  .feature ul {
    display: block;
    margin-top: 0;
  }
  .feature li,
  .feature li:nth-child(2n + 1) {
    width: auto;
    margin-top: 25px;
    margin-left: 0;
    padding-left: 50px;
  }
  .feature li::before {
    top: 3px;
  }
}

/*feature2 ポロロッカ
----------------------------------------------------*/
.feature2 {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.2;
}
.feature2 dl {
  width: calc((100% - 20px) / 2);
  margin-top: 20px;
  margin-left: 20px;
}
.feature2 dl:nth-child(2n + 1) {
  margin-left: 0;
}
.feature2 dl {
  display: flex;
  border: 1px solid #e8e8f2;
}
.feature2 dt,
.feature2 dd {
  padding: 20px;
}
.feature2 dt {
  background-color: #e8e8f2;
  color: #1a1b7f;
  width: 50%;
  position: relative;
}
.feature2 dt::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e8e8f2;
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
}
.feature2 dd {
  flex: 1;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .feature2 {
    display: block;
  }
  .feature2 dl,
  .feature2 dl:nth-child(2n + 1) {
    width: auto;
    margin-top: 20px;
    margin-left: 0;
  }
  .feature2 dt,
  .feature2 dd {
    padding: 15px 10px;
  }
}

/*****************************************************************************
シール事業等　横断用
*****************************************************************************/
.catLinkWrapper {
  border-top: 10px solid #ffffff;
  padding: 80px 20px;
  text-align: center;
  background: 50% 50% no-repeat;
  background-size: cover;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.catLinkWrapper.tech {
  background-image: url(/sealing/images/index/fixedBgTechnology.jpg);
}
.catLinkWrapper.prod {
  background-image: url(/sealing/images/catLinkWrapperBgProducts.jpg);
}
.catLinkWrapper.info {
  background-image: url(/sealing/images/catLinkWrapperBgProducts.jpg);
}
.catLinkWrapper::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.catLinkWrapper a {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: #10104b;
  padding: 15px;
  max-width: 500px;
  width: 90%;
  transition: all 0.3s;
  text-decoration: none;
}
.catLinkWrapper a span {
  display: block;
  color: #ffffff;
  font-weight: 700;
}
.catLinkWrapper a .shoulder {
  font-size: 0.875rem;
  opacity: 0.7;
}
.catLinkWrapper a .hd {
  margin-top: 10px;
  font-size: 1.6rem;
}
.catLinkWrapper a .hd2 {
  font-size: 1.3rem;
}
.catLinkWrapper a::before {
  content: "\f03a";
  font-family: FontAwesome;
  position: absolute;
  top: 20px;
  right: 15px;
  z-index: 2;
  transform: translateY(-50%);
  font-weight: 400;
  color: #ffffff;
}
.catLinkWrapper a:hover {
  background: #1b1c80;
  color: #ffffff;
}

@media screen and (max-width: 800px) {
  .catLinkWrapper {
    padding: 10%;
  }
}

/*****************************************************************************
横スクロール画像
*****************************************************************************/

.hScrollFig {
  background: #fafafa;
  padding: 60px 20px;
  text-align: center;
}
.hScrollFig.hScrollWGraph {
  padding: 30px 20px;
}
.hScrollFig img {
  width: 90%;
}
.hScrollFig .graph {
  display: inline-block;
}
.hScrollFig.ferruleImg img {
  max-width: 600px;
}
.hScrollFig.perfluorImg img {
  max-width: 720px;
}
.hScrollFig.fluororesinImg {
  padding: 30px 20px;
}
.hScrollFig.fluororesinImg img {
  max-width: 900px;
}
.hScrollFig.backupImg img {
  max-width: 900px;
}
.hScrollFig.hybridImg img {
  max-width: 850px;
}
.hScrollFig.SealBasicImg01 img {
  max-width: 800px;
}
.hScrollFig.SealBasicImg02 img {
  max-width: 600px;
}
.hScrollFig.hScrollWGraph span {
  display: block;
  text-align: center;
}
.hScrollFig.hScrollWGraph .capt {
  color: #191a7f;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 0 40px;
}

@media screen and (max-width: 600px) {
  .hScroll {
    width: calc(100% + 30px);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px 0;
  }
  .hScroll > .inner {
    display: inline-block;
    padding: 0 15px;
  }
  .hScrollFig {
    padding: 30px;
  }
  .hScrollFig.ferruleImg img {
    width: 500px;
  }
  .hScrollFig.perfluorImg img {
    width: 540px;
  }
  .hScrollFig.fluororesinImg {
    padding: 10px 30px;
  }
  .hScrollFig.fluororesinImg img {
    width: 820px;
  }
  .hScrollFig.backupImg img {
    width: 600px;
  }
  .hScrollFig.hybridImg img {
    width: 720px;
  }
  .hScrollFig.SealBasicImg01 img {
    width: 600px;
  }
  .hScrollFig.SealBasicImg02 img {
    width: 450px;
  }

  .hScrollFig .capt {
    padding: 0 0 20px;
  }
}

/*****************************************************************************
information
*****************************************************************************/
.news {
  padding: 0 0 60px;
}
.news .list {
  border-bottom: 1px dotted #dddddd;
}
.news .list .hd {
  font-weight: 700;
  color: #10104b;
  padding-bottom: 20px;
}
.news .list li {
  position: relative;
  border-top: 1px solid #ffffff;
}
.news .list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  border-top: 1px dotted #dddddd;
}
.news .list li a.aBox {
  display: inline-block;
  text-decoration: none;
  line-height: 1.5;
  padding: 15px;
}
.info-flex {
  display: flex;
}
.news .list li a.aBox .img {
  width: 100px;
  height: 100px;
  background: url(../images/logoMkW.png) 50% 50% no-repeat;
  background-size: 60px auto;
  background-color: #1b1c80;
  overflow: hidden;
}
.news .list li a.aBox .img img {
  width: 100%;
  height: auto;
}
.news .list li a.aBox .text {
  margin-left: 20px;
  width: 50%;
}
.news .list li a.aBox .date {
  color: #707c94;
  margin-right: 15px;
  line-height: 26px;
}
.news .list li a.aBox .title {
  color: #191a7f;
  font-size: 1.14rem;
  font-weight: 700;
  margin-top: 0.3em;
}
.news .list li a.aBox:hover .title {
  text-decoration: underline;
}
.news .list li a.aBox .excerpt {
  padding-top: 0.6em;
}
.news .list li .catLink {
  position: absolute;
  top: 15px;
  left: 225px;
  line-height: 26px;
  white-space: nowrap;
}
.news .list li .catLink a {
  text-decoration: none;
  border: 1px solid #e8e8f2;
  background: #fafafa;
  font-size: 0.875rem;
  padding: 0 7px;
  margin-right: 4px;
}
.news .list li .catLink a:hover {
  background: #191a7f;
  color: #ffffff;
}
.news .btn {
  margin-left: 50px;
  text-align: center;
}
.news .btn a {
  display: inline-block;
  width: 200px;
  text-align: center;
  border: 1px solid #11114c;
  border-bottom: 4px solid #11114c;
  color: #11114c;
  font-weight: 700;
  position: relative;
  text-decoration: none;
  padding-top: 3px;
  line-height: 34px;
  font-size: 0.875rem;
  transition: all 0.55s;
}
.news .btn a > span {
  position: relative;
  z-index: 2;
}
.news .btn a::after {
  content: "";
  height: calc(100% + 5px);
  width: calc(100% + 2px);
  position: absolute;
  z-index: 1;
  bottom: -4px;
  left: -1px;
  background: #11114c;
  opacity: 0;
  transition: all 0.55s;
}
.news .btn a:hover::after {
  opacity: 1;
}
.news .btn a::before {
  content: "\f03a";
  font-family: FontAwesome;
  font-weight: normal;
  color: #11114c;
  position: absolute;
  z-index: 2;
  right: 15px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  font-size: 1rem;
  transition: all 0.55s;
}
.news .btn a:hover,
.news .btn a:hover::before {
  color: #ffffff;
}

@media screen and (max-width: 1300px) {
  .news > .inner {
    display: block;
    padding: 50px 10%;
  }
  .news .btn {
    margin: 50px auto 0;
  }
}
@media screen and (max-width: 800px) {
  .news .list .hd {
    text-align: center;
  }
  .news .list li a.aBox .date {
    margin-bottom: 30px;
  }
  .news .list li .catLink {
    top: 42px;
    left: 135px;
    width: calc(93vw - 135px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 600px) {
  .news .list li a.aBox {
    padding: 15px 0;
  }
  .news .list li a.aBox .textHd {
    min-height: 100px;
  }
  .news .list li a.aBox .excerpt {
    margin-left: -120px;
    width: calc(100% + 120px);
  }
  .news .list li .catLink {
    left: 120px;
    width: calc(93vw - 120px + 15px);
  }
}

/*hdTypeInfo
----------------------------------------------------*/
.hdTypeInfo {
  position: relative;
  z-index: 2;
  padding: 90px 10% 60px;
  display: flex;
  text-align: center;
  justify-content: center;
}
.hdTypeInfo > .inner {
}
.hdTypeInfo .shoulder {
  font-size: 0.875rem;
  color: #1b1c80;
  font-weight: 700;
}
.hdTypeInfo .hd {
  font-size: 3rem;
  padding-top: 10px;
  color: #10104b;
  font-weight: 700;
  line-height: 1.2;
}
.hdTypeInfo .date {
  margin-top: 10px;
  color: #777;
}
.hdTypeInfo .catLink {
  margin-top: 30px;
}
.hdTypeInfo .catLink a {
  display: inline-block;
  text-decoration: none;
  background: #fafafa;
  font-size: 0.875rem;
  padding: 0 7px;
  margin: 4px 4px 0 0;
  position: relative;
  border: 1px solid #e8e8f2;
}
.hdTypeInfo .catLink a:hover {
  background: #191a7f;
  color: #ffffff;
}

@media screen and (max-width: 1100px) {
  .hdTypeInfo {
    padding: 90px 3% 70px;
  }
}
@media screen and (max-width: 600px) {
  .hdTypeInfo {
    padding: 80px 3% 40px;
  }
  .hdTypeInfo .hd {
    padding-top: 0;
    font-size: 2.2rem;
  }
}

/*****************************************************************************
entryBodyWrapper
 *****************************************************************************/

.entryBodyWrapper {
  font-size: 1.125rem;
  padding: 0 0 80px;
  line-height: 2;
}

.entryBodyWrapper img {
  max-width: 100%;
  height: auto;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.entryBodyWrapper .mt-image-left,
.entryBodyWrapper .mt-image-right {
  max-width: 50%;
  height: auto;
}

.entryBodyWrapper blockquote {
  background: #fafafa;
  padding: 20px;
  margin: 20px 0;
  line-height: 1.4;
}
.entryBodyWrapper strong {
  color: #1b1c80;
  font-weight: 700;
}
.entryBodyWrapper ul,
.entryBodyWrapper ol {
  margin: 20px 0;
}
.entryBodyWrapper ul li {
  position: relative;
  padding-left: 1.2em;
}
.entryBodyWrapper ul li::before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
}
.entryBodyWrapper ol li {
  margin-left: 1.2em;
  list-style: decimal;
}
.entryBodyWrapper em,
.entryBodyWrapper i {
  font-style: italic !important;
}

.entryBodyWrapper a {
  color: #1b1c80;
  transition: all 0.3s;
}
.entryBodyWrapper a:hover {
  background: #1b1c80;
  color: #ffffff;
  text-decoration: none;
}
.entryBodyWrapper h2 {
  font-size: 2rem;
  color: #10104b;
  position: relative;
  padding-left: 27px;
  font-weight: 700;
  line-height: 1.2;
}
.entryBodyWrapper h2::before {
  content: "";
  border-top: 1px solid #1a1b7f;
  position: absolute;
  width: 17px;
  top: 0.6em;
  left: 0;
}
.entryBodyWrapper h3 {
  font-size: 1.3rem;
  color: #1b1c80;
  font-weight: 700;
}
@media screen and (max-width: 600px) {
  .entryBodyWrapper .mt-image-left,
  .entryBodyWrapper .mt-image-right {
    width: 100%;
    max-width: initial;
    float: none !important;
  }
}

/*****************************************************************************
pagination
 *****************************************************************************/

.pagination {
  margin: 40px 0 0;
}

.pagination .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.pagination ul {
  display: flex;
  align-items: center;
}
.pagination ul a,
.pagination ul span {
  padding: 0 10px;
}

/*****************************************************************************
extSitelLink
 *****************************************************************************/
.extSitelLink {
  margin-top: 50px;
}
.extSitelLink a {
  display: inline-block;
  padding: 15px 50px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  background: #17104b;
  color: #ffffff;
  position: relative;
  transition: background 0.3s;
  width: 100%;
  max-width: 400px;
}
.extSitelLink a:hover {
  background: #1b1c80;
}
.extSitelLink a span {
  display: block;
}
.extSitelLink a .l1 {
  font-size: 0.85rem;
}
.extSitelLink a .l2 {
  margin-top: 5px;
  font-size: 1.3rem;
}
.extSitelLink a .l3 {
  margin-top: 10px;
  font-size: 0.75rem;
}
.extSitelLink a .fa {
  position: absolute;
  top: 15px;
  right: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.extSitelLink a rt {
  line-height: 1;
  margin-bottom: -5px;
  opacity: 0.8;
}

@media screen and (max-width: 1300px) {
  .extSitelLink {
    text-align: center;
  }
}

/*****************************************************************************
featureMetal
*****************************************************************************/
.featureMetal01 ul {
  /*1番目長い*/
  display: flex;
  flex-wrap: wrap;
  counter-reset: item 0;
  margin-top: -50px;
  line-height: 1.6;
}
.featureMetal01 li {
  width: calc((100% - 40px) / 2);
  margin-left: 40px;
  margin-top: 50px;
  padding-left: 60px;
  position: relative;
}
.featureMetal01 li:nth-child(1) {
  margin-left: 0;
  width: calc(100% - 40px);
  margin-right: 600px;
}
.featureMetal01 li:nth-child(2n) {
  margin-left: 0;
}
.featureMetal01 li::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: -2px;
  left: 0;
  color: #ffffff;
  content: counter(item) "";
  counter-increment: item;
  background: #313c56;
}
.featureMetal01 .hd {
  font-size: 1.3rem;
  color: #1f323f;
}
.featureMetal01 .hd2 {
  font-size: 1.14rem;
  color: #10104b;
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.1;
}
.featureMetal01 .hd2 span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}
.featureMetal01 .hd2 span::after {
  content: "";
  border-top: 14px solid #e8e8f2;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0.5em;
  left: 0;
}
.featureMetal01 .m_txt {
  margin-top: 20px;
}

@media screen and (max-width: 1300px) {
  .featureMetal01 li,
  .featureMetal01 li:nth-child(1),
  .featureMetal01 li:nth-child(2n) {
    margin-left: 40px;
    width: calc((100% - 40px) / 2);
    margin-right: 0;
    padding-left: 50px;
  }
  .featureMetal01 li:nth-child(2n + 1) {
    margin-left: 0;
  }
}
@media screen and (max-width: 800px) {
  .featureMetal01 ul {
    display: block;
    margin-top: 0;
  }
  .featureMetal01 li {
    width: auto !important;
    margin: 25px 0 0 !important;
  }
  .featureMetal01 .m_txt {
    margin-top: 15px;
  }
}

.featureMetal02 ul {
  /*縦並び*/
  counter-reset: item 0;
  line-height: 1.6;
  margin-right: 600px;
}
.featureMetal02 li {
  margin-top: 50px;
  padding-left: 60px;
  position: relative;
}
.featureMetal02 li::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: -2px;
  left: 0;
  color: #ffffff;
  content: counter(item) "";
  counter-increment: item;
  background: #313c56;
}
.featureMetal02 .hd {
  font-size: 1.3rem;
  color: #1f323f;
}
.featureMetal02 .hd2 {
  font-size: 1.14rem;
  color: #10104b;
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.1;
}
.featureMetal02 .hd2 span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}
.featureMetal02 .hd2 span::after {
  content: "";
  border-top: 14px solid #e8e8f2;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0.5em;
  left: 0;
}
.featureMetal02 .m_txt {
  margin-top: 20px;
}
@media screen and (max-width: 1300px) {
  .featureMetal02 ul {
    margin-right: 0;
  }
  .featureMetal02 li {
    padding-left: 50px;
  }
  .featureMetal02 li {
    margin: 25px 0 0;
  }
  .featureMetal02 .m_txt {
    margin-top: 15px;
  }
}

.featureMetal01_2 ul {
  /*ノーマル、抗菌*/
  display: flex;
  flex-wrap: wrap;
  counter-reset: item 0;
  margin-top: -50px;
  line-height: 1.6;
}
.featureMetal01_2 li {
  width: calc((100% - 40px) / 2);
  margin-left: 40px;
  margin-top: 50px;
  padding-left: 60px;
  position: relative;
}
.featureMetal01_2 li:nth-child(2n + 1) {
  margin-left: 0;
}
.featureMetal01_2 li::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: -2px;
  left: 0;
  color: #ffffff;
  content: counter(item) "";
  counter-increment: item;
  background: #313c56;
}
.featureMetal01_2 .hd {
  font-size: 1.3rem;
  color: #1f323f;
}
.featureMetal01_2 .hd2 {
  font-size: 1.14rem;
  color: #10104b;
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.1;
}
.featureMetal01_2 .hd2 span {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}
.featureMetal01_2 .hd2 span::after {
  content: "";
  border-top: 14px solid #e8e8f2;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0.5em;
  left: 0;
}
.featureMetal01_2 .m_txt {
  margin-top: 20px;
}

@media screen and (max-width: 1300px) {
  .featureMetal01_2 li,
  .featureMetal01_2 li:nth-child(2n + 1) {
    margin-left: 40px;
    width: calc((100% - 40px) / 2);
    margin-right: 0;
    padding-left: 50px;
  }
}
@media screen and (max-width: 800px) {
  .featureMetal01_2 ul {
    display: block;
    margin-top: 0;
  }
  .featureMetal01_2 li {
    width: auto !important;
    margin: 25px 0 0 !important;
  }
  .featureMetal01_2 .m_txt {
    margin-top: 15px;
  }
}

/* お知らせ検索 */

.year-wrap,
.cat-wrap {
  display: flex;
  justify-content: center;
  color: #333;
  flex-wrap: wrap;
}
.year-wrap__list {
  text-align: center;
  margin-bottom: 10px;
}
.cat-wrap__list {
  text-align: center;
}
.year-wrap__list input[type="checkbox"] {
  display: none;
}
.cat-wrap__list input[type="checkbox"] {
  display: none;
}
.label-list {
  display: block;
  background-color: #f9f9f9;
  width: 100px;
  height: 45px;
  line-height: 45px;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}
/* input[type="checkbox"] + span{

} */
input[type="checkbox"]:checked + span {
  background-color: #17104b;
  color: #fff;
  width: 100px;
  height: 45px;
  display: block;
  line-height: 45px;
}
.label-list:hover {
  background: #8b87a5;
  color: #fff;
  transition: background 0.3s, color 0.3s;
}
.serch-form {
  text-align: center;
}
.submit-btn {
  background-color: #17104b;
  border-radius: 17px !important;
  color: #fff;
  max-width: 100px;
  padding: 10px;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  cursor: pointer;
}
.hdType03 .search-title {
  font-size: 1.5rem;
}
.hdType-search {
  padding: 0;
  margin-bottom: 30px;
}
.year-wrap {
  flex-direction: row-reverse;
}

.recruit img {
  top: -150px;
}

/* 沿革情報更新 */
.ikiiki--new .box {
  justify-content: center;
  max-width: 550px;
  margin: auto;
}

.ikiiki--new .box .img {
  width: 250px;
}

.ikiiki--new .box .img:first-child {
  margin-right: 50px;
}

.ikiiki--new .extSitelLink {
  text-align: center;
}

.ikiiki--new .text {
  margin-bottom: 30px;
}

/* 採用情報 */
.recruit-table__wrap {
  margin-top: 30px;
}

.recruit-table__wrap {
  max-width: 800px;
  width: 100%;
  margin: auto;
}

.recruit-table__wrap .overviewTbl td {
  text-align: center;
}

.recruit-table-text {
  text-align: center;
  margin-bottom: 15px;
}

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

/*****************************************************************************
#動物医療事業ページ改修
 *****************************************************************************/
 .modal-content{
  display: flex;
  gap: 15px;
  padding: 15px;
  max-width: 600px;
 }
 .modal-content-item{
  position: relative;
  width: calc((100% - 15px) / 2);
  border: 1px solid #cfcfcf;
 }
 .modal-content-item span{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #10104b;
  color: #fff;
  width: 120px;
  height: 30px;
  font-size: 14px;
 }
 .modal-content-item img{
  width: 100%;
  transition: 0.3s;
 }
 .modal-content-item img:hover{
  opacity: 0.6;
 }