@charset "utf-8";

/*▼▼*/
.home .icon_cover {
  display: none;
}

.single .wp-block-button {
  min-width: 240px;
  text-align: center;
}

.single .wp-block-button a {
  color: #FFFFFF !important;
  font-size: 1.6rem;
}

#container {
  overflow-x: hidden;
}

/*-----------------------トップページ*/
/*▼▼▼メインビジュアル▼▼▼*/
#content .main_visual {
  position: relative;
  width: 100vw;
  height: calc(100vw * 0.333);
  max-height: 640px;
  z-index: 1;
}

#content .main_visual .slide.s01::before {
  /*▼三角▼*/
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: calc((-100vw - 1240px) / 2);
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 91, 148, 0.8);
  -webkit-transform: skewX(-24deg) translateX(200%);
  transform: skewX(-24deg) translateX(200%);
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

#content .main_visual.active .slide.s01::before {
  -webkit-transform: skewX(-24deg) translateX(0%);
  transform: skewX(-24deg) translateX(0%);
}

#content .main_visual_box {
  width: 100%;
  height: 100%;
}

#content .main_visual .inner_1240 {
  position: relative;
  height: 100%;
}

#content .main_visual .main_visual_text {
  position: absolute;
  top: 140px;
  left: 0;
  z-index: 9;
  color: #FFF;
  font-weight: bold;
  font-family: "Oswald", Oswald;
}

#content .main_visual .slide {
  width: 100%;
  background-color: #FFFFFF;
}

#content .main_visual .slide a {
  width: 100%;
  display: block;

}

#content .main_visual .slide picture {
  background-color: #FFFFFF;
}

#content .main_visual .slide picture img,
#content .main_visual .slide picture source {
  width: 100%;
}


/*スクロールダウン */
.arrow_Wrap {
  position: absolute;
  right: 2vw;
  top: calc(100vw * 0.333);
  z-index: 3;
}

.arrow_inner p {
  color: #FFFFFF;
  font-size: 1.2rem;
  text-align: end;
  -webkit-transform: rotate(90deg) translateX(28px);
  transform: rotate(90deg) translateX(28px);
}

.arrow {
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #c7c7c7;
  position: relative;
  overflow: hidden;
}

.arrow::after {
  content: '';
  width: 1px;
  height: 20px;

  transform-origin: bottom right;
  transform: rotate(45deg);
  background-color: #c7c7c7;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.arrow::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: var(--font_color);
  position: absolute;
  top: -150px;
  left: 0;
  animation: arrow 2.5s ease 0s infinite normal;
}

@-webkit-keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}

/*▼▼▼メインエリア▼▼▼*/
/*▼▼▼ニュース▼▼▼*/
#t_news {
  background-color: #FFFFFF;
}

#t_news .grid_cover {
  display: flex;
  padding-top: 80px;

  position: relative;
  z-index: 1;
  /*高さ保持*/
}

#t_news .grid_box:nth-child(1) {
  width: 24%;
}

#t_news .grid_box:nth-child(2) {
  width: 76%;
}

#t_news .tab ul {
  border-bottom: 1px solid var(--border_color);
  display: flex;
}

#t_news .tab ul li {
  width: calc(100% / 4);
  font-weight: bold;
  color: var(--main_color);
  margin: 0 4px -1px 4px;
  padding: 12px 48px;
  border: 1px solid var(--border_color);
  cursor: pointer;
  background: var(--base_color);
  text-align: center;
  font-size: 1.8rem;
}

#t_news .tab ul li.active {
  background: #ffffff;
  border: .1rem solid var(--border_color);
  border-bottom: .1rem solid #fff;
}

#t_news .tab_area {
  padding: 32px 0;
  margin-bottom: 24px;
}

#t_news .tab_area .tab_box {
  display: none;
}

#t_news .tab_area .tab_box.show {
  display: block;
}

/*▼▼▼製品情報▼▼▼*/
#t_product {
  padding: 112px 0 0px;
  position: relative;
}

#t_product::after {
  content: "";
  position: absolute;
  right: -22vw;
  top: 9vw;
  z-index: -2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 77vw 172vw 0;
  border-color: transparent #004A7C transparent transparent;
}

#t_product .t_product_bk {
  content: "";
  width: calc(100vw - ((100vw - 1200px) / 2));
  height: 66%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: url(../image/main_bk.jpg) center top / cover no-repeat;
}

#t_product .ttl_box::before {
  content: "PRODUCTS";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  font-size: 16rem;
  transform: translate(-50%, -57%);
  color: #FFFFFF;
  opacity: 0.3;
  font-family: Oswald, "Oswald";
}

#t_product .item_cover {
  padding-top: 48px;
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

#t_product .item_cover .inner {
  width: 83%;
  position: relative;
}

/*キャッチコピーアニメーション*/
#t_product .item_cover .ch {
  font-size: 12.5rem;
  position: absolute;
  top: 0;
  right: -1.2em;
  z-index: 1;
  transform-origin: right top;
  transform: rotate(90deg) translateX(100%);
  color: var(--accent_color);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 400;
  font-family: Oswald, "Oswald";
}

#t_product .item_cover .ch.anime span {
  opacity: 0;
  transform: translateY(180px) rotate(-90deg);
  transition: 500ms;
  display: inline-block;
}

#t_product .item_cover .ch.anime.active span {
  transform: translateY(0px) rotate(0deg);
  opacity: 1;
}

#t_product .item_cover ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /*innerで制御*/
}

#t_product .item_cover ul li {
  width: 33.333%;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 4px 4px 12px rgba(20, 20, 20, 0.2);
}

#t_product .item_cover ul li::before {
  content: "";
  width: 127%;
  height: 100%;
  background: #f4f3f8;
  transform-origin: top left;
  transform: skewX(-24deg) translateX(-100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: 0.2s;
}

#t_product .item_cover ul li:nth-child(5),
#t_product .item_cover ul li:nth-child(10) {
  padding-top: 10px;
}

#t_product .item_cover ul li:hover:before {
  -webkit-transform: skewX(-24deg) translateX(0%);
  transform: skewX(-24deg) translateX(0%);
}

#t_product .item_cover ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

#t_product .item_cover ul li img {
  max-width: 100%;
  vertical-align: bottom;
}

#t_product .item_cover ul li img:hover {
  transform: scale(1.05, 1.05);
}

#t_product .item_cover ul li h3 {
  color: var(--main_color);
  font-size: 2.6rem;
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  text-align: right;
  text-shadow: 0 0 4px #FFFFFF;
}

#t_product .item_cover ul li h3 span {
  display: block;
  font-size: 1.4rem;
  margin-top: 4px;
  font-weight: normal;
  color: var(--main_color2);
}

/*右下ボタン*/
#t_product .item_cover .common_btn {
  margin: 4em 0 0 auto;
  display: block;
  width: 25%;
  background: url(../image/t_prod_btn_bk.webp) center right no-repeat;
  background-size: cover;
}

#t_product .item_cover .common_btn:after,
#t_product .item_cover .common_btn:before {
  content: "";
  background-color: #FFFFFF;
}

#t_product .item_cover .common_btn a {
  padding: 1.8rem;
  border: none;
  color: #C7A956;
  font-size: 2.6rem;
  text-align: left;
}

#t_product .item_cover .common_btn a span {
  display: block;
  margin-top: 4px;
  font-size: 1.4rem;
}

#t_product .item_cover .common_btn a:hover {
  color: #FFFFFF;
}

#t_product .item_cover .common_btn a:hover:after {
  background: rgba(0, 103, 178, 0.6);
}

/**▼▼▼新製品情報▼▼▼**/
#t_news_product {
  position: relative;
}

#t_news_product::before {
  content: "";
  width: 100%;
  height: 800px;
  top: -652px;
  left: 0;
  position: absolute;
  background: var(--main_color);
  z-index: -3;
}

#t_news_product .ttl_box:after {
  content: "NEW PRODUCTS";
  position: absolute;
  font-weight: 500;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  color: rgba(255, 255, 255, 0.3);
  font-size: 15rem;
  z-index: -1;
  white-space: nowrap;
  font-family: Oswald, "Oswald";
}

#t_news_product ul li {
  box-shadow: 0px 0px 8px rgba(20, 20, 20, 0.2);
  transition: 300ms;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  width: 320px;
  margin: 0 8px 0 8px;
  border-radius: 8px;
}

#t_news_product ul li:hover {
  box-shadow: 0px 0px 24px rgba(20, 20, 20, 0.2);
}

#t_news_product ul li .img_cover {
  overflow: hidden;
  margin-bottom: 16px;
}

#t_news_product ul li:before {
  content: "NEW";
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) rotate(-45deg);
  color: #FFFFFF;
  background: #CD3333;
  font-size: 1.2rem;
  z-index: 1;
  padding: 62px 0 0 4px;
  text-align: center;
}

#t_news_product ul li a img {
  transition: var(--t);
  width: 100%;
  vertical-align: bottom;
}

#t_news_product ul li a:hover img {
  transform: scale(1.1, 1.1);
}

#t_news_product ul li .prod_card_inner {
  padding: 0 16px 16px 16px;
  min-height: 16rem;
}

#t_news_product ul li h3 {
  position: relative;
  font-size: 1.9rem;
  line-height: 1.3;
  margin-bottom: 8px;
  font-weight: 600;
  z-index: 2;
}

#t_news_product ul li p {
  font-size: 1.6rem;
}

/*ライブラリ介入*/
#t_news_product .slider_cover {
  margin-top: -24px;
}

#t_news_product .slick-track {
  padding: 24px 0 24px 0;
}

#t_news_product ul li h3 span {
  margin-top: 4px;
  font-size: 1.2rem;
}

/*▼▼▼カナレの強み▼▼▼*/
#t_strength {
  position: relative;
  background-image: url(../image/t_strength.webp);
  background-position: left center;
  background-repeat: no-repeat;
  padding: 60px 0 60px 0;
}


#t_strength .ch p {
  font-size: 6.2rem;
  font-family: "Oswald", Oswald;
  letter-spacing: 0.04em;
  font-style: italic;
}

#t_strength .ch p:nth-child(1) {
  font-weight: 400;
  display: block;
  position: relative;
  color: var(--main_color2);
}

#t_strength .ch p:nth-child(2) {
  margin-left: 30%;
  color: var(--main_color);
}

#t_strength .ch p:nth-child(2) span:nth-child(1) {
  font-weight: 100;
  font-size: 4.2rem;
}

#t_strength .ch p:nth-child(2) span:nth-child(2) {
  position: relative;
  display: inline-block;
  font-weight: 600;
}

#t_strength .ch p:nth-child(2) span:nth-child(2):after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 21px;
  display: inline-block;
  width: calc(100% + 2em);
  height: 2px;
  z-index: -1;
  background: linear-gradient(to right, rgba(0, 91, 148, 1) 60%, rgba(255, 255, 255, 1) 100%);
}

#t_strength .grid_box ul {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 13%;
  padding-right: 10%;
  margin-top: 132px;
}

#t_strength .grid_box ul li {
  width: 22%;
  margin-left: 3%;
  aspect-ratio: 1/1.5;
  position: relative;
}

#t_strength .grid_box ul li:nth-child(1) {
  margin-left: 0%;
}

#t_strength .grid_box ul li:nth-child(2) {
  bottom: 40px;
  left: 20px;
}

#t_strength .grid_box ul li:nth-child(3) {
  bottom: 80px;
  left: 38px;
}

#t_strength .grid_box ul li:nth-child(4) {
  bottom: 40px;
  left: 20px;
}

#t_strength .grid_box ul li .cover {
  position: relative;
  transform-origin: left bottom;
  transform: skewX(-24deg);
  width: 100%;
  height: 100%;
  margin-bottom: 8px;
  overflow: hidden;
}

#t_strength .grid_box ul li .cover img {
  transform: translateX(-17%) skewX(24deg);
}

#t_strength .grid_box ul li h3 {
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--main_color2);
  z-index: 1;
  white-space: nowrap;
  font-family: "EB Garamond", "ヒラギノ明朝 W6", "Hiragino Mincho W6", "游明朝体", "Yu Mincho", 'Noto Serif JP', serif;
}

#t_strength .grid_box ul li h3 span {
  font-size: 3.2rem;
  display: block;
  text-indent: -0.6em;
  color: var(--main_color);
}

#t_strength .bk_cover {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

/*▼▼▼企業社会責任▼▼▼*/
#t_csr {
  position: relative;
}

#t_csr .t_csr_bk {
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc((50vw - 313px)* 2.246);
  width: calc(50vw - 313px);
  background-image: url(../image/csr_bk.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  z-index: -4;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

#t_csr .grid_cover {
  padding: 82px 0;
}

#t_csr .grid_box {
  width: 425px;
}

#t_csr .inner_1240 {
  position: relative;
}

#t_csr .img_box {
  position: absolute;
  bottom: 0;
  right: calc(50vw - 313px);
  transform: translateX(50%);
  z-index: -1;
  background: url(../image/t_csr01.png) no-repeat right bottom;
  background-size: contain;
  width: 640px;
  aspect-ratio: 1 / 5.706;
}

/*▼▼▼企業情報▼▼▼*/
#t_corporate {
  padding-top: 98px;
  position: relative;
  z-index: 2;
}

#t_corporate:before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(50% - 306px);
  transform: skewX(-24deg);
  transform-origin: top left;
  background: #ddf1fc;
  width: 240px;
  height: 380px;
  z-index: -2;
}

#t_corporate .t_corporate_bk {
  position: absolute;
  left: 0;
  top: 80px;
  background-image: url(../image/t_corporate_bk.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  z-index: -3;
  height: calc((50vw - 313px)* 2.246);
  width: calc(50vw - 313px);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

#t_corporate .ttl_box_big {
  color: var(--main_color);
  position: relative;
  top: 22px;
  z-index: 2;
  font-size: 15rem;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0;
  line-height: 1;
}

#t_corporate .ttl_box_big h2 {
  line-height: 1;
}

#t_corporate .grid_box {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

#t_corporate ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#t_corporate ul li {
  width: 100%;
  height: 360px;
  overflow: hidden;
}

#t_corporate ul li:nth-child(1) a:after {
  background-image: url(../image/t_corporate_01.jpg);
}

#t_corporate ul li a {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#t_corporate ul li a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) scale(1);
  transition: .2s;
}

#t_corporate ul li a:hover:after {
  transform: translate(-50%, -50%) scale(1.05);
}

#t_corporate ul li h3 {
  color: #FFF;
  font-size: 2.8rem;
  font-weight: 500;
  position: relative;
  letter-spacing: 0.2em;
  z-index: 2;
}

/*▼▼▼研究開発▼▼▼*/
#t_development {
  padding-bottom: 280px;
  position: relative;
  z-index: 2;
}

#t_development .grid_cover {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 180px;
  padding-top: 60px;
}

#t_development .grid_box:nth-child(1) {
  width: 100%;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}

#t_development .grid_box:nth-child(1) img {
  width: 100%;
  vertical-align: bottom;
}

#t_development .grid_box:nth-child(2) {
  width: 34%;
  margin-right: 16%;
}

#t_development .grid_box:nth-child(2) ul {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 3;
}

#t_development .grid_box:nth-child(2) ul li:nth-child(2) {
  margin-top: 120px;
}

#t_development .grid_box:nth-child(2) ul li {
  margin-right: 6%;
}

#t_development .grid_box:nth-child(3) {
  width: 50%;
}

/*▼▼▼お問い合わせ▼▼▼*/
#t_end.grid_cover {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

#t_end.grid_cover h2 {
  color: #FFFFFF;
}

#t_contact,
#t_recruit {
  width: 50%;
  height: 380px;
  position: relative;
  overflow: hidden;
}

#t_contact a,
#t_recruit a {
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#t_contact a::after,
#t_recruit a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: -2;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background: url("../image/t_contact.jpg") no-repeat center center;
}

#t_recruit a::after {
  background: url("../image/t_recruit.jpg") no-repeat center center;
  background-size: cover;
}

#t_contact a:hover::after,
#t_recruit a:hover::after {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

#t_contact .ttl_box span,
#t_recruit .ttl_box span {
  margin-bottom: 0;
  color: #FFFFFF;
}

/*ローディングアニメーション-----------------------------------------------*/
.loadingBar {
  width: 0;
  height: 2px;
  background: var(--main_color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  -webkit-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
}

.loader_bk {
  width: 100vw;
  height: 100vh;
  background: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.loader_bk img {
  width: 20vw;
}

/*ファーストビューアニメーション-----------------------------------------------*/
.main_visual_text p {
  overflow: hidden;
  position: relative;
  line-height: 1;
  -webkit-transform: skewX(-11deg);
  transform: skewX(-11deg);
  display: inline-block;
  z-index: 1;
  letter-spacing: 0.1em;
}

.main_visual_text p:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #FFF;
  z-index: 2;
}

.main_visual_text .text_01 {
  font-size: 3.4rem;
  margin-bottom: 24px;
}

.main_visual_text .text_02 {
  font-size: 6.8rem;
  margin-bottom: 32px;
  font-weight: 500;
}

.main_visual_text .text_03 {
  font-size: 2.4rem;
  letter-spacing: 0.2em;
}

.main_visual_text.active .text_01:after {
  /*アニメーションの設定*/
  -webkit-animation: OverlayIn 0.4s 0s cubic-bezier(.77, 0, .175, 1), OverlayOut 0.4s 0.4s cubic-bezier(.77, 0, .175, 1);
  animation: OverlayIn 0.4s 0s cubic-bezier(.77, 0, .175, 1), OverlayOut 0.4s 0.4s cubic-bezier(.77, 0, .175, 1);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.main_visual_text.active .text_01 span {
  -webkit-animation: fadeIn 0s 0.5s;
  animation: fadeIn 0s 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.main_visual_text.active .text_02:after {
  -webkit-animation: OverlayIn 0.4s 0.2s, OverlayOut 0.4s 0.6s;
  animation: OverlayIn 0.4s 0.2s cubic-bezier(.77, 0, .175, 1), OverlayOut 0.4s 0.6s cubic-bezier(.77, 0, .175, 1);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.main_visual_text.active .text_02 span {
  -webkit-animation: fadeIn 0s 0.7s;
  animation: fadeIn 0s 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.main_visual_text.active .text_03:after {
  -webkit-animation: OverlayIn 0.4s 0.4s cubic-bezier(.77, 0, .175, 1), OverlayOut 0.4s 0.8s cubic-bezier(.77, 0, .175, 1);
  animation: OverlayIn 0.4s 0.4s cubic-bezier(.77, 0, .175, 1), OverlayOut 0.4s 0.8s cubic-bezier(.77, 0, .175, 1);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.main_visual_text.active .text_03 span {
  -webkit-animation: fadeIn 0s 0.9s;
  animation: fadeIn 0s 0.9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*文字が消えている状態から現れるアニメーション*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*ブロックを伸ばすアニメーション*/
@-webkit-keyframes OverlayIn {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes OverlayIn {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

/*ブロックを横に追いやるアニメーション*/
@-webkit-keyframes OverlayOut {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(102%);
    transform: translateX(102%);
  }
}

@keyframes OverlayOut {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(102%);
    transform: translateX(102%);
  }
}

/*▼▼▼カテゴリーページ共通▼▼▼*/
#c_content .c_main_visual {
  padding: 40px 0 40px 5vw;
  margin-bottom: 80px;
  position: relative;
  height: 255px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#c_content .c_main_visual::before {
  /*▼三角▼*/
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: calc((-100vw - 1240px) / 2);
  z-index: 2;
  width: calc(100% + 300px);
  height: 100%;
  background: rgba(0, 103, 178, 0.8);
  transform: skewX(-24deg) translateX(200%);
  transform-origin: right bottom;
  transition: 0.5s;
}

/*画像分岐 bodyにスラッグによるclassが表現されています*/
.corporate #c_content .c_main_visual,
.message #c_content .c_main_visual,
.history #c_content .c_main_visual,
.identity #c_content .c_main_visual,
.development #c_content .c_main_visual,
.outline #c_content .c_main_visual,
.office #c_content .c_main_visual {
  background-image: url(../image/c_corporate_bk.jpg);
}

.investigation #c_content .c_main_visual,
.sustainability #c_content .c_main_visual,
.rohs #c_content .c_main_visual,
.environment #c_content .c_main_visual {
  background-image: url(../image/c_csr_bk.jpg);
}

.catalog #c_content .c_main_visual {
  background-image: url(../image/c_catalog_bk.jpg);
}

.contact #c_content .c_main_visual {
  background-image: url(../image/c_contact_bk.jpg);
}

.news #c_content .c_main_visual {
  background-image: url(../image/c_news_bk.jpg);
}

.single #c_content .c_main_visual {
  background-image: url(../image/c_info_bk.jpg);
}

.search #c_content .c_main_visual {
  background-image: url(../image/c_search_bk.jpg);
}

.sitemap #c_content .c_main_visual {
  background-image: url(../image/c_sitemap_bk.jpg);
}

.privacypolicy #c_content .c_main_visual {
  background-image: url(../image/c_privacypolicy_bk.jpg);
}

.sitepolicy #c_content .c_main_visual {
  background-image: url(../image/c_privacypolicy_bk.jpg);
}

.recruit #c_content .c_main_visual {
  background-image: url(../image/c_recruit_bk.jpg);
}

#c_content .c_main_visual h2 {
  font-size: 4.8rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 24px;
  position: relative;
  z-index: 10;
  letter-spacing: 0.01em;
}

#c_content .c_main_visual span {
  font-size: 1.5rem;
  display: block;
  color: #FFFFFF;
  margin-top: 12px;
}

#c_content #c_main .intro {
  margin-bottom: 48px;
}

#c_content #c_main .intro h2 {
  font-size: 3.8rem;
  font-weight: 600;
  margin-bottom: 80px;
  color: var(--main_color);
  text-align: center;
  position: relative;
}

#c_content #c_main a {
  transition: .2s;
}


/*カテゴリープライバシーポリシー&サイトポリシー*/
.privacypolicy #c_content h3,
.sitepolicy #c_content h3 {
  font-weight: bold;
  font-size: 2.8rem;
  margin-bottom: 8px;
  line-height: 1.6;
}

.privacypolicy #c_content p,
.sitepolicy #c_content p {
  margin-bottom: 16px;
}

.privacypolicy #c_content a,
.sitepolicy #c_content a {
  color: var(--main_color2);
}

.privacypolicy #c_content .grid_box,
.sitepolicy #c_content .grid_box {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border_color);
}

.privacypolicy #c_content .grid_box ul,
.sitepolicy #c_content .grid_box ul {
  padding: 1.2em 1.2em 1.2em 1em;
  margin-bottom: 2em;
  list-style-type: disc;
  list-style-position: inside;
}

.privacypolicy #c_content .grid_box li,
.sitepolicy #c_content .grid_box li {
  font-size: 1.8rem;
  line-height: 1.6;
}

/*カテゴリーサイトマップ*/
.sitemap #c_content .simple-sitemap-wrap ul li a {
  font-size: 1.8rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: var(--font_color);
  font-family: Oswald, "Oswald";

  position: relative;
  display: inline-block;
  vertical-align: top;
}

.sitemap #c_content .simple-sitemap-wrap ul li a:after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--font_color);
  transform-origin: right bottom;
  transform: scale(0, 1);
  transition: transform .3s;
}

.sitemap #c_content .simple-sitemap-wrap ul li a:hover:after {
  transform-origin: left bottom;
  transform: scale(1, 1);
}

.sitemap #c_content .simple-sitemap-wrap ul:not(.children) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.sitemap #c_content .simple-sitemap-wrap ul:not(.children)>li {
  width: 25%;
  margin-bottom: 48px;
}

.sitemap #c_content .simple-sitemap-wrap ul.children {
  margin-left: 4%;
}

.sitemap #c_content .simple-sitemap-wrap ul.children li a {
  font-weight: normal;
}

.sitemap #c_content .simple-sitemap-wrap ul.children li {
  position: relative;
  padding-left: 12px;
}

.sitemap #c_content .simple-sitemap-wrap ul.children li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  width: 6px;
  height: 1px;
  background: var(--font_color);
}

.sitemap #c_content .simple-sitemap-wrap ul.children li::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0%;
  width: 1px;
  height: 6px;
  background-color: var(--font_color);
}

/*カテゴリーお問い合わせ*/
.contact #c_content .intro p {
  text-align: center;
}

.contact #c_content .form_cover .box {
  margin-bottom: 48px;
  padding: 48px;
  background-color: var(--base_color);
  border: 1px solid var(--border_color);
  font-family: "Oswald";
}

.contact #c_content .form_cover .box label {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.contact #c_content .form_cover .box label p {
  width: 100%;
}

.contact #c_content .form_cover .box label span:nth-child(1) {
  font-weight: 500;
  display: block;
  font-size: 2.0rem;
  position: relative;
  letter-spacing: .04rem;
  width: 24%;
  margin-right: 1%;
  text-align: right;
}

.contact #c_content .form_cover .box label span:nth-child(2) {
  width: 75%;
}

/*合意ボタン*/
.contact #c_content .form_cover .box .accept {
  text-align: center;
  width: 100%;
}

.contact #c_content .form_cover .box .accept span:nth-child(1) {
  width: inherit;
}

.contact #c_content .form_cover .box .accept label {
  display: block;
}

.contact #c_content .form_cover .box .accept label span,
.contact #c_content .form_cover .box .accept label label a {
  text-align: center !important;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 !important;
}

.contact #c_content .form_cover .box .accept a {
  color: var(--main_color2);
}

/*合意ボタン*/
.contact #c_content .form_cover .box select,
.contact #c_content .form_cover .box select option,
.contact #c_content .form_cover .box input[type="text"],
.contact #c_content .form_cover .box input[type="tel"],
.contact #c_content .form_cover .box input[type="email"],
.contact #c_content .form_cover .box textarea {
  width: 100%;
  font-family: var(--base_font_family);
  background-color: var(--white);
  border: 1px solid var(--border_color);
  padding: 4px 16px;
  font-size: 1.8rem;
  outline: none;
  transition: 300ms;
}

.contact #c_content .form_cover .box input:focus,
.contact #c_content .form_cover .box textarea:focus,
.contact #c_content .form_cover .box select:focus {
  box-shadow: 0 0 16px rgba(0, 91, 148, 0.7);
}

.wpcf7-response-output {
  text-align: center;
}

.contact #c_content .form_cover .ann_box {
  background-color: var(--base_color);
  margin-bottom: 80px;
  padding: 24px;
}

.contact #c_content .form_cover .ann_box h3 {
  font-size: 2.4rem;
  color: #ffffff;
  padding: 4px 0 4px 24px;
  width: 100%;
  background-color: var(--main_color);
  text-align: center;
}

.contact #c_content .form_cover .ann_box ul {
  padding: 24px;
  list-style-position: outside;
  list-style-type: "*";
}

.contact #c_content .form_cover .ann_box ul li {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: lighter;
}

.contact #c_content .form_cover .ann_box img {
  margin: 24px auto 32px;
  max-width: 520px;
}

/*▼お問い合わせフォーム＆Rohs検索&カタログ請求▼*/
.common_form_button input[type="submit"] {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  outline: none;
  appearance: none;
  width: 300px;
  padding: 1.2rem 0;
  display: block;
  margin: 0 auto;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  border-radius: 26px;
  transition: 300ms;
}


.common_form_button input[type="submit"]:hover {
  background: var(--main_color);
  color: #FFFFFF;
  cursor: pointer;
}


/******投稿ページ[Single page]******/
/*リンク[Link]*/
.single #info a {
  color: var(--main_color);
  transition: 0.2s;
}

.single #info a:hover {
  color: var(--main_color2);
}

/***見出し[headline]***/
.single #info h1 {
  font-size: 2.8rem;
  line-height: 1.3;
}

.single #info h2 {
  font-size: 2.6rem;
  position: relative;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 24px;
  margin-bottom: 1%;
}

.single #info h2::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 6px;
  height: 40%;
  background-color: var(--main_color);
}

.single #info h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 6px;
  height: 40%;
  background-color: var(--main_color2);
}

.single #info h3 {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 2.2rem;
  margin-bottom: 1%;
}

.single #info h3::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  width: 0.8em;
  height: 2px;
  background-color: var(--icon_color);
}

.single #info h4 {
  font-size: 2.0rem;
  margin-bottom: 1%;
}

.single #info h5 {
  font-size: 1.8rem;
  margin-bottom: 1%;
}

.single #info h6 {
  font-size: 1.6rem;
  margin-bottom: 1%;
}

.single #info p {
  line-height: 1.8;
  margin-bottom: 1%;
}

.single #info img {
  margin-bottom: 1%;
}

/***タイトルメタ[Title meta]***/
.single #info .head_sub aside {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  white-space: nowrap;
  font-family: Oswald, "Oswald";
}

.single #info .head_sub .datatime {
  text-align: left;
  font-size: 1.5rem;
  margin-right: 8px;
}

.single #info .head_sub .tag a {
  display: inline-flex;
  font-size: 1.5rem;
  padding: 8px 24px;
  border: 1px solid var(--border_color);
  border-radius: 23px;
  margin-right: 4px;
}

.single #info .head_sub .tag a:hover {
  color: #FFFFFF;
  background-color: var(--main_color);
  border: 1px solid transparent;
}

/***SNSアイコンお気に入り等[Share icon]***/
.single #info .head_sub .share {
  margin-left: auto;
}

.single #info .head_sub .share ul {
  display: flex;
}

.single #info .head_sub .share ul li {
  text-align: center;
  position: relative;
  margin-left: 16px;
  width: 24px;
  aspect-ratio: 1/1;
}

.single #info .head_sub .share ul li a {
  display: block;
  width: inherit;
}

.single #info .head_sub .share ul li svg {
  width: inherit;
  transition: 300ms;
  font-size: 2.0rem;
  fill: #c7c7c7;
}

.single #info .head_sub .share ul li:hover svg {
  cursor: pointer;
  fill: #a7a7a7;
}

.single #info .head_sub .share ul li.tw:hover svg {
  fill: var(--font_color);
}

.single #info .head_sub .share ul li.li:hover svg {
  fill: #0e76a8;
}

.single #info .head_sub .share ul li.fb:hover svg {
  fill: #3B5998;
}

/***ポップアップ[Icon pouup]***/
.single #info .head_sub .share li:after {
  position: absolute;
  transform: translate(-50%);
  top: 0rem;
  left: 50%;
  z-index: 0;
  white-space: nowrap;
  opacity: 0;
  transition: var(--t);
  font-size: 1.2rem;
  color: #c7c7c7;
  font-weight: 300;
}

.single #info .head_sub .share li.print_btn:after {
  content: "Print";
}

.single #info .head_sub .share li.link_copy:after {
  content: "URL Copy";
}


.single #info .head_sub li.share:after {
  content: "Share";
}

.single #info .head_sub .share li:hover:after {
  display: block;
  top: -1.8rem;
  opacity: 1;
}

/***タイトル[Title]***/
.single #info .ttl_box {
  position: relative;
  margin-bottom: 48px;
  text-align: center;
  padding: 24px 0;
}

.single #info .ttl_box:after,
.single #info .ttl_box:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--font_color);
}

.single #info .ttl_box:after {
  top: 0
}

.single #info .ttl_box:before {
  bottom: 0;
}

/***リスト[list]***/
.single #info ul.wp-block-list {
  list-style-position: inside;
}

.single #info ul.wp-block-list li {
  list-style-type: disc;
  line-height: 1.8;
}

.single #info ul.wp-block-list li::marker {
  color: var(--main_color);
}

/***以下テーブルボックス[table]***/
.single #info table {
  border-collapse: collapse;
  margin-bottom: 4px;
  width: 100%;
  height: 100%;
  margin-bottom: 1%;
}

.single #info table thead {
  border-bottom: 2px solid var(--font_color);
}

.single #info table tbody {
  font-weight: 600;
  line-height: 1.5;
}

.single #info table th,
.single #info table td {
  background-color: transparent;
}

.single #info table th,
.single #info table td {
  padding: 8px 12px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid var(--border_color);
  font-size: 1.6rem;
}

.single #info table tbody tr:nth-child(even) {
  background-color: var(--base_color);
}

/***注意書き***/
.single #info .wp-block-details {
  margin-bottom: 1%;
  padding: 24px 36px 24px 24px;
  border-radius: 24px;
  background-color: var(--base_color3);
  display: inline-block;
}

.single #info .wp-block-details summary {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
}

.single #info .wp-block-details p {
  padding-left: 1.5rem;
  line-height: 1.8;
  font-size: 1.4rem;
  position: relative;
  font-weight: 300;
}

/***企業情報****/
.corporate #c_content .section_01 dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.corporate #c_content .section_01 dl dt {
  width: 24%;
  font-weight: 600;
  flex-shrink: 0;
  border-bottom: 1px solid var(--font_color);
  padding: 16px 16px;
  font-size: 1.8rem;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.corporate #c_content .section_01 dl dd {
  width: 75%;
  font-weight: 300;
  flex-shrink: 1;
  border-bottom: 1px solid var(--border_color);
  padding: 16px 16px;
  font-size: 1.8rem;
  line-height: 1.6;
}

.corporate #c_content .section_02 .cover {
  background-color: #FFFFFF;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 4px 4px 12px rgba(20, 20, 20, 0.2);
}

.corporate #c_content .section_02 .cover iframe {
  width: 100%;
  height: 480px;
}

.corporate #c_content .section_03 .grid_cover {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.corporate #c_content .section_03 .grid_cover .grid_box:nth-child(1) {
  width: 60%;
  margin-right: 10%;
}

.corporate #c_content .section_03 .grid_cover .grid_box:nth-child(2) {
  width: 30%;
}

/*▼カテゴリー研究開発▼*/
.development #c_content .inner_1240 {
  background: url(../image/c_development_item01.png);
  background-position: center right;
  background-repeat: no-repeat;
}

.development #c_content .grid_cover .grid_box {
  padding-left: 50px;
  margin-bottom: 48px;
  position: relative;
}

.development #c_content .grid_cover .grid_box:nth-child(odd) {
  margin-left: 40px;
}

.development #c_content .grid_cover .grid_box:nth-child(even) {
  margin-left: 80px;
}

.development #c_content .grid_cover .grid_box:after {
  content: "1";
  position: absolute;
  z-index: -1;
  font-size: 5.8rem;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  font-family: "EB Garamond", serif;
  color: var(--main_color2);
  font-style: italic;
  font-weight: 500;
}

.development #c_content .grid_cover .grid_box:nth-of-type(2):after {
  content: "2";
}

.development #c_content .grid_cover .grid_box:nth-of-type(3):after {
  content: "3";
}

.development #c_content .grid_cover .grid_box:nth-of-type(4):after {
  content: "4";
}

.development #c_content .grid_cover .grid_box:nth-of-type(5):after {
  content: "5";
}

.development #c_content .grid_cover .grid_box h3 {
  font-size: 2.0rem;
  margin-bottom: 8px;
  letter-spacing: 0.06rem;
}

.development #c_content .grid_cover .grid_box p {
  font-size: 1.8rem;
}

/**/
#c_content.c_deve .intro {
  width: 100%;
  margin-bottom: -24px;
  position: relative;
}

#c_content.c_deve .intro p {
  width: 55.5%;
  padding-bottom: 64px;
}

#c_content.c_deve .intro:after {
  content: "";
  left: 47%;
  bottom: -24px;
  position: absolute;
  width: 100vw;
  height: 60vw;
  background-color: var(--main_color);
  z-index: -2;
  clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
}

#c_content.c_deve .intro .img_box {
  width: 768px;
  height: 238px;
  position: absolute;
  left: 58%;
  bottom: -40px;
  background: url(../image/c_deve_lab.png) center right no-repeat;
  background-size: contain;
  z-index: -1;
}

#c_content.c_deve .grid_cover {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16em;
}

#c_content.c_deve .grid_box {
  padding: 3.6em;
  width: 32%;
  background: #FFF;
  display: flex;
  flex-direction: column;
}

#c_content.c_deve .grid_box p {
  margin-bottom: 24px;
  font-size: 1.4rem;
  text-align: justify;
}

#c_content.c_deve .grid_box .img_box {
  margin-top: auto;
  width: 100%;
  min-height: 0%;
}

#c_content.c_deve .grid_box img {
  width: 100%;
}

#c_content.c_deve .c_deve_phot .to_lab {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

#c_content.c_deve .c_deve_phot .to_lab p {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}

#c_content.c_deve .c_deve_phot .to_lab p span {
  font-size: 1.4rem;
  display: block;
  font-weight: normal;
}

#c_content.c_deve .c_deve_phot .to_lab img {
  width: 100%;
}

/*▼トップメッセージ▼*/
.message #c_content .section_01 .grid_cover {
  width: 100%;
  padding-right: 44%;
  padding-left: 4%;
  background: url(../image/c_message_nakajima.jpg) no-repeat 100% 100%;
}

.message #c_content .section_01 .grid_cover .grid_box {
  width: 100%;
  text-align: justify;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 400;
}

/*▼企業理念▼*/
.identity #c_content .section_01 .intro {
  background: url(../image/c_identity_00.jpg) right bottom no-repeat;
}

.identity #c_content .section_01 .intro p {
  line-height: 2.0;
  font-size: 2.0rem;
}

.identity #c_content .section_01 .grid_cover {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.identity #c_content .section_01 .grid_cover .grid_box {
  width: 31%;
  text-align: justify;
}

.identity #c_content .section_01 .grid_cover .grid_box img {
  text-align: center;
  margin-bottom: 24px;
}

.identity #c_content .section_01 .grid_cover .grid_box h3 {
  background: url(../image/c_identity_shadow.png) no-repeat center bottom;
}

/*▼品質方針▼*/
.identity #c_content .section_02 .intro {
  width: 100%;
  padding-right: 42%;
  background: url(../image/c_identity_04.png) no-repeat right bottom;
  padding-bottom: 10em;
  text-align: justify;
}

.identity #c_content .section_02 .grid_cover {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.identity #c_content .section_02 .grid_cover .grid_box {
  border-radius: 4px;
  width: 31%;
  background: #FFFFFF;
  overflow: hidden;
}

.identity #c_content .section_02 .grid_cover .grid_box img {
  width: 100%;
}

.identity #c_content .section_02 .grid_cover .grid_box h3 {
  font-size: 2.0rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  padding: 16px 0 8px 0;
  color: var(--main_color);
}

.identity #c_content .section_02 .grid_cover .grid_box p {
  padding: 0px 16px 42px 16px;
}

/*▼企業概要▼*/
.outline #c_content .section_01 dl {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-end;
}

.outline #c_content .section_01 dl dt {
  width: 14%;
  font-family: "oswald";
  border-bottom: 1px solid var(--font_color);
  padding: 1.4rem;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
}

.outline #c_content .section_01 dl dd {
  width: 86%;
  font-size: 1.6rem;
  border-bottom: 1px solid var(--border_color);
  padding: 1.4rem;
  text-align: left;
  font-weight: 300;
  line-height: 1.5;
}

.outline #c_content .section_01 .grid_box {
  margin-top: 24px;
  text-align: center;
}

.outline #c_content .section_02 p {
  overflow: hidden;
}

.outline #c_content .section_02 p img {
  float: left;
  margin-right: 24px;
}

/*▼オフィス▼*/
.office #c_content section:not(.section_04) .grid_cover .grid_box {
  width: 100%;
  padding: 24px;
  margin-bottom: 4.5em;
  line-height: 1.5;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(1) {
  width: 20%;
  padding-right: 24px;
  border-right: 1px solid var(--base_color);
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(1) h3 {
  font-size: 2.0rem;
  font-weight: bold;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(2) {
  width: 60%;
  padding: 0 24px 0 24px;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(2) .address {
  font-size: 1.6rem;
  font-weight: 400;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(2) .tel {
  font-size: 1.6rem;
  color: #999999;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(3) {
  margin-left: auto
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(3) .btn {
  border: 1px solid var(--main_color2);
  width: 8em;
  padding: 0.4em 0.6em;
  margin-bottom: 0.2em;
  text-align: center;
  color: var(--main_color2);
  transition: 0.2s;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .box:nth-child(3) .btn:hover {
  cursor: pointer;
  background: var(--main_color2);
  color: #FFFFFF;
  border: 1px solid transparent;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .if_box {
  width: 100%;
}

.office #c_content section:not(.section_04) .grid_cover .grid_box .if_box iframe {
  width: 100%;
  margin-top: 12px;
  height: 280px;
}

/*▼子会社▼*/
.office #c_content .section_04 .map {
  position: relative;
}

.office #c_content .section_04 .map img {
  width: 100%;
  max-width: 1240px;
}

.office #c_content .section_04 .dot {
  /*アニメーション用*/
  position: absolute;
  width: 2vw;
  height: 2vw;
  max-width: 40px;
  max-height: 40px;
  margin: auto;
  background: rgba(0, 103, 178, 0.5);
  border-radius: 50%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.office #c_content .section_04 .dot:nth-of-type(1) {
  top: 39%;
  left: 27%;
}

.office #c_content .section_04 .dot:nth-of-type(2) {
  top: 43%;
  left: 82.2%;
}

.office #c_content .section_04 .dot:nth-of-type(3) {
  top: 51%;
  left: 80.3%;
}

.office #c_content .section_04 .dot:nth-of-type(4) {
  top: 42%;
  left: 78.5%;
}

.office #c_content .section_04 .dot:nth-of-type(5) {
  top: 63.5%;
  left: 75.5%;
}

.office #c_content .section_04 .dot:nth-of-type(6) {
  top: 51%;
  left: 68.5%;
}

.office #c_content .section_04 .dot:nth-of-type(7) {
  top: 34%;
  left: 48.5%;
}

.office #c_content .section_04 .dot:nth-of-type(8) {
  top: 51%;
  left: 62.5%;
}

.office #c_content .section_04 .dot:nth-of-type(9) {
  top: 47%;
  left: 79.5%;
}

.office #c_content .section_04.anime .dot {
  width: 0vw;
  height: 0vw;
}

.office #c_content .section_04.anime.active .dot {
  width: 2vw;
  height: 2vw;
  max-width: 40px;
  max-height: 40px;
}

.office #c_content .section_04 .dot:hover,
.office #c_content .section_04 .dot.show {
  background: rgba(204, 172, 0, 0.5);
  transition-delay: 0s;
}

.office #c_content .section_04 .grid_cover {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  position: relative;
  top: -157px;
  left: 0;
}

.office #c_content .section_04 .grid_cover .grid_box {
  width: 32%;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
}

.office #c_content .section_04 .grid_cover .grid_box h3 {
  font-size: 2.0rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--main_color);
}

.office #c_content .section_04 .grid_cover .grid_box .address {
  font-size: 1.5rem;
  margin-bottom: 8px;
  padding-bottom: 8px;
  line-height: 1.5;
  border-bottom: 1px solid var(--base_color);
}

.office #c_content .section_04 .grid_cover .grid_box .tel {
  font-size: 1.5rem;
  margin-bottom: 8px;
  line-height: 1.5;
  font-weight: 300;
}

.office #c_content .section_04 .grid_cover .grid_box .web {
  color: var(--main_color2);
}

.office #c_content .section_04 .grid_cover .grid_box:hover,
.office #c_content .section_04 .grid_cover .grid_box.show {
  box-shadow: 0px 0px 32px #c7c7c7;
  cursor: pointer;
}

/*▼沿革▼*/
.history #c_content .inner_1240 {
  position: relative;
}

.history #c_content dl {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.history #c_content dl:after {
  position: absolute;
  content: "";
  top: 0;
  left: 20%;
  width: 1px;
  height: 100%;
  background: var(--border_color);
  z-index: -1;
}

.history #c_content dt {
  width: 20%;
  text-align: right;
  padding-right: 5%;
  font-size: 2.0rem;
  font-weight: 500;
  position: relative;

}

.history #c_content dt::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1em;
  transform: translate(50%, 100%);
  transform-origin: center center;
  width: 1em;
  height: 1em;
  transition: 0.6s;
  border-radius: 50%;
  background: var(--main_color);
}

.history #c_content dd {
  width: 80%;
  padding-left: 5%;
  flex-grow: 1;
  margin-bottom: 5em;
  position: relative;
}

.history #c_content dd::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 1.0rem;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left;
  transition: 300ms;
  height: 1px;
  background: var(--border_color);
  width: 6em;
}

.history #c_content dd.active::before {
  transform: translateX(-50%) scaleX(1);
}

.history #c_content dd h3 {
  font-size: 2.0rem;
  margin-bottom: 1em;
}

.history #c_content dd p {
  font-size: 1.8rem;
}

/*▼サステナビリティ&&コーポレート▼*/
.parts_wrapper {
  padding: 48px 0 120px;
}

.parts_wrapper .grid_cover {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.parts_common_ttl {
  text-align: center;
}

.parts_common_ttl h2 {
  font-size: 2.8rem;
  color: var(--main_color);
  position: relative;
  display: inline-block;
  letter-spacing: 0.1rem;
  font-weight: 600;
}

.parts_common_ttl h2::before,
.parts_common_ttl h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38px;
  height: 1px;
  background-color: var(--main_color);
}

.parts_common_ttl h2::before {
  left: -44px;
}

.parts_common_ttl h2::after {
  right: -44px;
}

.sustainability .parts_wrapper.sustainability .grid_cover {
  /*三つの為センタリング*/
  justify-content: center
}

.parts_wrapper .grid_cover .grid_box {
  width: calc(25% - 2px);
  margin-left: 2px;
  margin-bottom: 2px;
  height: 214px;
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parts_wrapper .grid_cover .grid_box:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background: #FFFFFF;
  opacity: 1;
  transition: 0.2s;
}

.parts_wrapper .grid_cover .grid_box:hover:after {
  opacity: 0;
}


/*サステナビリティ*/
.sustainability.parts_wrapper.sustainability .grid_cover .grid_box:nth-child(1) {
  background-image: url(../image/c_sustainability01_01.jpg);
}

.sustainability.parts_wrapper.sustainability .grid_cover .grid_box:nth-child(2) {
  background-image: url(../image/c_sustainability01_02.jpg);
}


.parts_wrapper .grid_cover .grid_box a {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parts_wrapper .grid_cover .grid_box a i {
  width: 80px;
  height: 80px;
  position: relative;
  overflow: hidden;
}

/*cssスプライト用*/
.parts_wrapper .grid_cover .grid_box a i img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 160px;
}

.parts_wrapper .grid_cover .grid_box a:hover i img {
  transform: translateX(-50%);
}

.parts_wrapper .grid_cover .grid_box a h3 {
  color: var(--main_color2);
  font-size: 1.6rem;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 100%;
  padding: 12px 0;
  font-weight: normal;
  letter-spacing: 0.02em;
}

.parts_wrapper .grid_cover .grid_box a:hover h3 {
  color: #ffffff;
}

/*▼環境への取り組み*/
.environment #c_content .section_01 .inner_1240 {
  position: relative;
}

.environment #c_content .section_01 .inner_1240 .img_box {
  width: 37%;
  position: absolute;
  top: -80px;
  right: 0;
}

.environment #c_content .section_01 .inner_1240 .img_box img {
  width: 100%;
}

.environment #c_content .section_02 {
  position: relative;
  min-height: 400px;
  width: 100%;
}

.environment #c_content .section_02::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 80px;
  width: 100%;
  height: 400px;
  background: url(../image/c_envi02_bk.png) center center no-repeat
}

.environment #c_content .section_02 .grid_cover {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.environment #c_content .section_02 .grid_cover .grid_box {
  width: calc((100% / 3) - 16px);
  text-align: center;
  background: #FFF;
  position: relative;
}

.environment #c_content .section_02 .grid_cover .grid_box img {
  width: 100%;
}

.environment #c_content .section_02 .grid_cover .grid_box h4 {
  color: var(--main_color);
  font-size: 2.0rem;
  margin: 16px 0 16px;
}

.environment #c_content .section_02 .grid_cover .grid_box p {
  text-align: left;
  padding: 0 1.8em 2.8em 1.8em;
  font-weight: 300;
  position: relative;
  font-size: 1.6rem;
  z-index: 1;
}

.environment #c_content .section_02 .grid_cover .grid_box:after {
  content: "1";
  position: absolute;
  z-index: 0;
  font-size: 5.8rem;
  right: 16px;
  bottom: 4px;
  font-family: "EB Garamond", serif;
  color: var(--main_color2);
  font-style: italic;
  font-weight: 500;
}

.environment #c_content .section_02 .grid_cover .grid_box:nth-of-type(2):after {
  content: "2";
}

.environment #c_content .section_02 .grid_cover .grid_box:nth-of-type(3):after {
  content: "3";
}

.environment #c_content .section_02 .grid_cover .grid_box:nth-of-type(4):after {
  content: "4";
}

.environment #c_content .section_02 .grid_cover .grid_box:nth-of-type(5):after {
  content: "5";
}

.environment #c_content .section_03 {
  padding-bottom: 80px;
  background: url(../image/c_envi03.png) no-repeat 70% 50%;
  background-size: contain;
}

.environment #c_content .section_03 .grid_box {
  width: 50%;
}

.environment #c_content .section_04 h3 {
  font-size: 2.4rem;
  margin-bottom: 16px;
  font-weight: 500;
}

.environment #c_content .section_04 .grid_cover {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.environment #c_content .section_04 .grid_cover .grid_box:nth-child(1) {
  width: 40%;
}

.environment #c_content .section_04 .grid_cover .grid_box:nth-child(2) {
  width: 56%;
}

.environment #c_content .section_04 table td {
  text-align: left;
  font-size: 1.4rem;
}

.environment #c_content .section_04 .grid_cover .grid_box img {
  max-width: 240px;
}

.environment #c_content .c_envi04 dl {
  width: 100%;
}

.environment #c_content .c_envi04 dl dt {
  color: #FFFFFF;
  text-align: left;
  padding: 8px 20px;
  font-size: 1.4rem;
  font-weight: 500;
  background: var(--main_color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  vertical-align: middle;
}

.environment #c_content .c_envi04 dl dd {
  color: var(--main_color);
  background: #ddf1fc;
  padding: 8px 20px;
  font-size: 1.4rem;
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 400;
}

.environment #c_content .img_box img {
  vertical-align: bottom;
}

.environment #c_content .iso_logo_box img {
  max-width: 200px;
}

.environment #c_content .iso_logo_box p {
  font-size: 1.2rem;
  font-weight: 300;
}

/*▼Rohs▼*/
/*テーブルレイアウト*/
.common_table {
  width: 100%;
}

.common_table table thead {
  border-bottom: none;
}

.common_table tr:nth-child(even) {
  background: var(--base_color);
}

.common_table tr:nth-child(odd) {
  background: #ffffff;
}

.common_table th {
  color: #FFFFFF;
  text-align: center;
  padding: 12px 8px;
  font-size: 1.6rem;
  background: var(--main_color);
  transition: 0.2s;
  vertical-align: middle;
  font-weight: normal;
  border-top: none;
  border-bottom: none;
}

.sortable.common_table th:hover {
  cursor: pointer;
  background: var(--main_color2);
  color: #ffffff;
}

.common_table td {
  color: var(--main_color);
  padding: 12px 8px;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}

.sortable.common_table span.arrow_d {
  margin-left: 4px;
  display: inline-block;
  font-size: 1.2rem;
}

.sortable.common_table span.arrow_d.up {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sortable.common_table th:nth-child(1) {
  width: 25%;
}

.sortable.common_table th:nth-child(2) {
  width: 30%;
}

.sortable.common_table th:nth-child(3) {
  width: 30%;
}

.sortable.common_table th:nth-child(4) {
  width: 15%;
  pointer-events: none;
}


/*ソートテーブル用*/
.common_table.sortable caption {
  text-align: right;
  font-size: 1.4rem;
  margin-bottom: 12px;
  line-height: 1.5;
}

.common_table.sortable caption span {
  display: block;
}

/*リザルト*/
.rohs #c_content .section_02 .result {
  margin-top: 12px;
  font-size: 1.4rem;
  line-height: 1.6;
}

.rohs #c_content .section_02,
.rohs #c_content .section_03 {
  padding-top: 120px;

}

.rohs .common_form_cover {
  max-width: 960px;
}

/*▼カタログ▼*/
.catalog #c_content h3 {
  font-size: 2.8rem;
  margin-bottom: 32px;
  padding-bottom: 24px;
  letter-spacing: 0.04rem;
  line-height: 1.5;
  position: relative;
}

.catalog #c_content h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 1px;
  background-color: var(--main_color);
}


.catalog #c_content .grid_cover {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.catalog #c_content .grid_cover .grid_box:nth-child(1) {
  width: 40%;
  max-width: 320px;
  margin-right: 8%;
}

.catalog #c_content .grid_cover .grid_box:nth-child(1) {
  width: 52%;
}


.catalog #c_content .grid_cover .grid_box .img_box {
  position: relative;
}

.catalog #c_content .grid_cover .grid_box .img_box:after {
  content: "";
  position: absolute;
  bottom: -56px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 50px;
  background: url(../image/drop_shadow.png) center bottom no-repeat;
  background-size: contain;
}

.catalog #c_content .grid_cover .grid_box:nth-child(2) ul li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  white-space: nowrap;
  padding: 8px 0 8px 32px;
  border-bottom: 1px solid var(--border_color);
  background: no-repeat left center url(../image/icon_pdf.png);
}

.catalog #c_content .common_btn a {
  width: 240px;
  margin-bottom: 5px;
}

/*リーフレット*/
.catalog #c_content .leaflet .grid_cover {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.catalog #c_content .leaflet .grid_cover li {
  max-width: calc((100% / 5) - 8px);
  position: relative;
  margin-bottom: 80px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}

.catalog #c_content .leaflet .grid_cover li:after {
  content: "";
  position: absolute;
  bottom: -56px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 50px;
  background: url(../image/drop_shadow.png) center bottom no-repeat;
  background-size: contain;
}

.catalog #c_content .leaflet .grid_cover li img {
  margin-top: 8px;
}

/*▼カテゴリーリクルート▼*/
.recruit #c_content .section_01 {
  padding: 80px 0 !important;
}

.recruit #c_content .section_01 h2 {
  color: var(--font_color);
}

.recruit #c_content .section_01 .cover .grid_cover {
  display: flex;
  flex-wrap: wrap;
}

.recruit #c_content .section_01 .cover .grid_cover .grid_box:nth-child(1) {
  width: 24%;
  font-weight: 600;
  flex-shrink: 0;
  border-bottom: 1px solid var(--font_color);
  padding: 16px 16px;
  font-size: 1.8rem;
  line-height: 1.6;
}

.recruit #c_content .section_01 .cover .grid_cover .grid_box:nth-child(2) {
  width: 75%;
  font-weight: 300;
  flex-shrink: 1;
  border-bottom: 1px solid var(--border_color);
  padding: 16px 16px;
  font-size: 1.8rem;
  line-height: 1.6;
}

.recruit #c_content .section_02 .common_btn {
  width: clamp(200px, 33%, 320px);
}

/*▼以下全体アニメーション▼*/
.anime>* {
  opacity: 0;
  transform: translateY(80px);
  transition-property: transform, opacity;
  transition-duration: 500ms;
}

.anime.active * {
  opacity: 1;
  transform: translateY(0);
}

#c_content .c_main_visual.start_anime {
  min-width: 100%;
}

#c_content .c_main_visual.start_anime.active::before,
#c_content .c_main_visual.start_anime.active::before {
  -webkit-transform: skewX(-24deg) translateX(0%);
  transform: skewX(-24deg) translateX(0%);
}

/*ブロックを伸ばすアニメーション*/
@keyframes InOut {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }

  50% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: scale(1.1, 1);
    transform: scale(1.1, 1);
  }

  100% {
    -webkit-transform: translateX(102%);
    transform: scale(1.1, 1) translateX(102%);
  }
}

@keyframes Fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/**▼▼▼タブレットサイズ▼▼▼**/
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  h3.common_ttl {
    font-size: 1.8rem;
  }

  p,
  li,
  a,
  dt,
  dl,
  th,
  td {
    font-size: 1.4rem;
  }

  .common_btn a {
    font-size: 1.4rem;
    padding: 10px 30px;
  }

  #content .main_visual .main_visual_text {
    left: 2vw;
  }

  .main_visual_text .text_01 {
    font-size: 3.2rem;
    margin-bottom: 2px;
  }

  .main_visual_text .text_02 {
    font-size: 4.8rem;
    margin-bottom: 0.8em;
  }

  .main_visual_text .text_03 {
    font-size: 1.4rem;
  }
}

/*▼▼▼スマートフォンサイズ▼▼▼*/
@media only screen and (max-width: 767px) {
  .loader_bk img {
    width: 38vw;
  }

  /*本来はcommon old_styleとのかみ合い*/
  img {
    max-width: 100%;
  }

  #content .main_visual {
    width: 100vw;
    height: 100vw;
    min-height: 100vw;
  }

  #content .main_visual .slide.s01 {
    background: url("../image/main_visual_767x767.jpg") center top / cover no-repeat;
  }

  #content .main_visual .slide.s02 {
    background: url("../image/main_visual_gs_767x767.jpg") center top / cover no-repeat;
  }

  .arrow_Wrap {
    transform: translateY(-50%);
    top: 100vw;
  }

  #content .main_visual .main_visual_text {
    top: 30vw;
    left: 3vw;
  }

  .main_visual_text .text_01 {
    font-size: 1.8rem;
  }

  .main_visual_text .text_02 {
    font-size: 3.2rem;
  }

  .main_visual_text .text_03 {
    font-size: 1.0rem;
  }

  #content .main_visual .slide.s01::before {
    left: -100%;
    width: 100%;
  }

  #c_content .c_main_visual h2 {
    font-size: 3.8rem;
  }

  /*▼▼▼スマートフォントップニュース▼▼▼*/
  #t_news .grid_cover {
    display: block;
    padding-top: 80px;
  }

  #t_news .ttl_box {
    text-align: center;
    margin-bottom: 6%;
  }

  #t_news .common_btn {
    display: none;
  }

  #t_news .grid_box:nth-child(1) {
    width: 100%;
  }

  #t_news .grid_box:nth-child(2) {
    width: 100%;
    padding: 0;
  }

  #t_news .tab ul {
    border-bottom: 1px solid var(--border_color);
    display: flex;
  }

  #t_news .tab ul li {
    width: calc(100% / 3);
    margin: 0 1% -1px 1%;
    padding: 3%;
    font-size: 1.5rem;
  }

  #t_news .tab_area {
    padding: 4%;
    margin-bottom: 4%;
  }

  #t_news .tab_area .tab_box {
    padding: 0 1%
  }

  #t_product {
    padding: 12% 0 0px;
    position: relative;
  }

  #t_product::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50vw;
    z-index: -2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100vw 177vw 0;
    border-color: transparent #004a7c transparent transparent;
  }

  #t_product .ttl_box::before {
    font-size: 6rem;
  }

  #t_product .item_cover .inner {
    width: 100%;
  }

  #t_product .item_cover .ch {
    font-size: 6rem;
    position: absolute;
    right: -0.1em;
    z-index: -1;
    font-family: Oswald, "Oswald";
  }

  #t_product .item_cover ul {
    width: calc(100% - 5.0rem);
  }

  #t_product .item_cover ul li {
    width: 50%;
  }

  #t_product .item_cover ul li h3 {
    color: var(--main_color);
    font-size: 1.5rem;
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 8%;
    text-align: right;
    text-shadow: 0 0 5px #FFFFFF;
  }

  #t_product .item_cover ul li h3 span {
    font-size: 1.2rem;
  }

  /*▼文字視認性調整用▼*/
  #t_product .item_cover ul li a {
    padding-bottom: 8px
  }

  #t_product .item_cover ul li:nth-of-type(5) a img {
    position: relative;
    bottom: -8px;
  }

  #t_product .item_cover ul li:nth-of-type(10) a img {
    position: relative;
    bottom: -8px;
  }

  #t_product .item_cover .common_btn {
    position: relative;
    left: auto;
    top: auto;
    width: 66%;
    margin: 6% auto 0%;
    display: block;
  }

  #t_product .item_cover .common_btn a {
    font-size: 1.6rem;
  }

  #t_product .item_cover .common_btn a span {
    font-size: 1.3rem;
  }

  #t_news_product .ttl_box:after {
    font-size: 6rem;
    transform: translate(-50%, -50%);
  }

  /**▼▼▼新製品情報▼▼▼**/
  #t_news_product::before {
    content: "";
    width: 100%;
    height: 800px;
    top: -652px;
    left: 0;
    position: absolute;
    background: var(--main_color);
    z-index: -3;
  }

  #t_news_product .ttl_box:after {
    font-size: 6rem;
    white-space: nowrap;
  }

  #t_news_product ul li {
    width: 176px;
    margin: 0 4px 0 4px;
  }

  #t_news_product ul li:before {
    width: 60px;
    height: 60px;
    padding: 43px 0 0 4px;
  }

  #t_news_product ul li h3 {
    padding: 8px 0;
    font-size: 1.6rem;
  }

  #t_news_product ul li h3:after {
    border-width: 0 0 20px 20px;
  }

  #t_news_product ul li p {
    font-size: 1.4rem;
  }

  #t_news_product ul li h3 span {
    font-size: 1.2rem;
    display: block;
  }

  /*▼▼▼強み▼▼▼*/
  #t_strength .ch p {
    font-size: 2.8rem;
    text-align: center;
  }

  #t_strength .ch p:nth-child(2) {
    margin: 0;
  }

  #t_strength .ch p:nth-child(2) span:nth-child(1) {
    font-size: inherit;
  }

  #t_strength .ch p:nth-child(2) span:nth-child(2):after {
    bottom: 6px;

  }

  #t_strength .grid_box ul li h3 {
    font-size: 1.8rem;
  }

  #t_strength .grid_box ul li h3 span {
    font-size: 1.8rem;
  }

  #t_strength .grid_box ul {
    padding: 0;
    margin-top: 0;
    flex-wrap: wrap;
  }

  #t_strength .grid_box ul li {
    width: 30%;
    margin-left: 8% !important;
    margin-bottom: 2% !important;
    ;
    position: static;
  }

  #t_strength .grid_box ul li .cover img {
    position: static;
    max-width: 48vw;
    width: 48vw;
  }

  #t_strength .grid_box ul li:nth-child(1) {
    margin-left: 2% !important;
  }

  /*▼▼▼企業社会責任▼▼▼*/
  #t_csr .t_csr_bk {
    height: calc(33vw*2.246);
    width: 33vw;
    background-size: 300%;
  }

  #t_csr .img_box {
    width: 70vw;
    position: absolute;
    right: 0;
    bottom: 72%;
    transform: translate(42%);
  }

  #t_csr .grid_cover {
    padding: 0 0 6%;
    display: flex;
    flex-direction: column-reverse;
  }

  #t_csr .grid_box {
    width: 65%;
    margin: 0 auto;
    text-align: center;
  }

  #t_corporate:before {
    width: 25vw;
    right: -25vw;
  }

  #t_corporate .t_corporate_bk {
    top: 40px;
    height: calc(33vw*2.246);
    width: 33vw;
    background-size: 300%;
  }

  #t_corporate h2 {
    font-size: 8rem;
  }

  #t_corporate ul li {
    width: 50%;
    height: 220px;
  }

  #t_corporate .grid_box {
    width: 95%;
    margin: 0 auto;
  }

  #t_corporate ul li:nth-child(1),
  #t_corporate ul li:nth-child(2) {
    width: 100%;
  }

  #t_corporate ul li h3 {
    font-size: 1.6rem;
  }

  #t_contact,
  #t_recruit {
    width: 50%;
    height: 280px;
  }

  #t_development {
    padding-bottom: 20%;
  }

  #t_development .grid_cover {
    margin-top: 14%;
    padding-top: 13%;
    flex-direction: column;
  }

  #t_development .grid_box:nth-child(1) {
    margin-bottom: 36%;
  }

  #t_development .gird_box:nth-child(1) img {
    width: 100%;
    vertical-align: bottom;
  }

  #t_development .grid_box:nth-child(2) ul {
    left: 1%;
    bottom: auto;
    top: 0;
  }

  #t_development .grid_box:nth-child(2) ul li {
    margin-right: 3%;
    width: 25%;
  }

  #t_development .grid_box:nth-child(2) ul li:nth-child(2) {
    margin-top: 12%;
  }

  #t_development .grid_box:nth-child(3) {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  /*▼スマートフォンカテゴリーバックグラウンド*/
  #c_content .c_main_visual {
    padding: 40px 0 40px 5vw;
    margin-bottom: 48px;
    height: 260px;
  }

  #c_content .c_main_visual::before {
    /*▼三角▼*/
    width: calc(100% + 0px);
    height: 100%;
    left: -82%;
  }

  /*画像分岐 bodyにスラッグによるclassが表現されています*/
  .corporate #c_content .c_main_visual,
  .message #c_content .c_main_visual,
  .history #c_content .c_main_visual,
  .identity #c_content .c_main_visual,
  .development #c_content .c_main_visual,
  .outline #c_content .c_main_visual,
  .office #c_content .c_main_visual {
    background-image: url(../image/c_corporate_bk_767x260.jpg);
  }

  .investigation #c_content .c_main_visual,
  .sustainability #c_content .c_main_visual,
  .rohs #c_content .c_main_visual,
  .environment #c_content .c_main_visual {
    background-image: url(../image/c_csr_bk_767x260.jpg);
  }

  .catalog #c_content .c_main_visual {
    background-image: url(../image/c_catalog_bk_767x260.jpg);
  }

  .contact #c_content .c_main_visual {
    background-image: url(../image/c_contact_bk_767x260.jpg);
  }

  .news #c_content .c_main_visual {
    background-image: url(../image/c_news_bk_767x260.jpg);
  }

  .single #c_content .c_main_visual {
    background-image: url(../image/c_info_bk_767x260.jpg);
  }

  .search #c_content .c_main_visual {
    background-image: url(../image/c_search_bk_767x260.jpg);
  }

  .sitemap #c_content .c_main_visual {
    background-image: url(../image/c_sitemap_bk_767x260.jpg);
  }

  .privacypolicy #c_content .c_main_visual {
    background-image: url(../image/c_privacypolicy_bk_767x260.jpg);
  }

  .sitepolicy #c_content .c_main_visual {
    background-image: url(../image/c_privacypolicy_bk_767x260.jpg);
  }

  /*▼サステナビリティ&&コーポレートパーツ▼*/
  .parts_wrapper {
    padding: 8rem 0 12rem;
  }

  .parts_common_ttl h2 {
    font-size: 2.0rem;
  }

  .parts_common_ttl h2::before,
  .parts_common_ttl h2::after {
    width: 6px;
  }

  .parts_common_ttl h2::before {
    left: -12px;
  }

  .parts_common_ttl h2::after {
    right: -12px;
  }

  .parts_wrapper .grid_cover .grid_box {
    width: calc(50% - 2px);
    margin-left: 2px;
    margin-bottom: 2px;
    height: 214px;
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .parts_wrapper .grid_cover .grid_box a h3 {
    font-size: 1.4rem;
    white-space: normal;
  }

  .parts_wrapper .grid_cover .grid_box a h3 span {
    font-size: 1.3rem;
  }

  /*以下リクルートのCSS絡み*/
  .parts_wrapper .grid_cover .grid_box a i img {
    max-width: 160px !important;
  }

  #c_content.c_recruit_common .parts_wrapper .grid_cover {
    flex-direction: row;
  }

  /*カテゴリ―トップ*/
  #c_content #c_main .intro h2 {
    font-size: 2.4rem
  }

  /*スマートフォン_カテゴリープライバシーポリシー&サイトポリシー*/
  .privacypolicy #c_content h3,
  .sitepolicy #c_content h3 {
    font-size: 2.0rem;
    margin-bottom: 1%;
  }

  #c_content.c_gove .grid_box,
  .privacypolicy #c_content.c_privacy .grid_box,
  #c_content.c_site_p .grid_box {
    margin-bottom: 4%;
    padding-bottom: 4%;
  }

  #c_content.c_gove .grid_box ul,
  #c_content.c_privacy .grid_box ul {
    padding: 1.2em;
    text-indent: -1em;
  }

  #c_content.c_gove .grid_box li,
  #c_content.c_privacy .grid_box li {
    font-size: 1.3rem;
  }

  #c_content.c_privacy .c_meta,
  #c_content.c_site_p .c_meta {
    font-size: 1.3rem;
    margin-bottom: 4%;
  }

  #c_content.c_privacy .c_access p:nth-of-type(2),
  #c_content.c_site_p .c_access p:nth-of-type(2) {
    font-size: 1.3rem;
  }

  /*カテゴリーサイトマップ*/
  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover {
    line-height: 1.6;
  }

  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover ul li a {
    line-height: 1;
  }

  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover>ul {
    width: 50%;
    margin-bottom: 8em;
  }

  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover>ul>li>a {
    font-size: 1.4rem;
    font-weight: bold;
  }

  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover .child_list {
    margin-left: 2%;
  }

  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover .child_list li a {
    font-size: 1.4rem;
    font-weight: normal;
  }

  #c_content.c_sitemap .simple-sitemap-wrap .grid_cover .child_list li {
    position: relative;
    padding-left: 1em;
  }

  /*スマートフォンカテゴリーお問い合わせ*/
  .contact #c_content .form_cover .box {
    padding: 4%;
  }

  .contact #c_content .form_cover .box label span:nth-child(1) {
    font-size: 1.6rem;
    margin-bottom: 0px;
  }

  .contact #c_content .form_cover .box select,
  .contact #c_content .form_cover .box select option,
  .contact #c_content .form_cover .box input[type="text"],
  .contact #c_content .form_cover .box input[type="tel"],
  .contact #c_content .form_cover .box input[type="email"],
  .contact #c_content .form_cover .box textarea {
    font-size: 1.6rem;
  }

  .common_form_button input[type="submit"] {
    font-size: 1.6rem;
  }

  .contact #c_content .form_cover .ann_box {
    background: var(--base_color);
    margin-bottom: 8%;
    padding: 4%;
  }

  .contact #c_content .form_cover .ann_box .ttl_box {
    padding: 2% 0;
  }

  .contact #c_content .form_cover .ann_box h3 {
    font-size: 1.6rem;
    padding-left: 1.3em;
  }

  .contact #c_content .form_cover .ann_box ul {
    padding: 3%;
  }

  .contact #c_content .form_cover .ann_box ul li {
    font-size: 1.4rem;
    margin-bottom: 2%;
  }

  .contact #c_content .form_cover .ann_box img {
    margin-top: 3%;
    padding: 0;
    max-width: 100%;
  }


  /*スマートフォンサイトマップ*/
  .sitemap #c_content .simple-sitemap-wrap ul li a {
    font-size: 1.6rem;

  }

  .sitemap #c_content .simple-sitemap-wrap ul:not(.children)>li {
    width: 50%;
    margin-bottom: 4%;
  }

  .sitemap #c_content .simple-sitemap-wrap ul.children {
    margin-left: 4%;
  }

  .sitemap #c_content .simple-sitemap-wrap ul.children li a {
    font-weight: normal;
  }

  .sitemap #c_content .simple-sitemap-wrap ul.children li {
    position: relative;
    padding-left: 12px;
  }

  .sitemap #c_content .simple-sitemap-wrap ul.children li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    width: 6px;
    height: 1px;
    background: var(--font_color);
  }

  .sitemap #c_content .simple-sitemap-wrap ul.children li::before {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: 0%;
    width: 1px;
    height: 6px;
    background-color: var(--font_color);
  }

  /*ROSHテーブルレイアウト*/
  .common_table th:nth-child(1) {
    width: 25%;
  }

  .common_table th:nth-child(2) {
    width: 30%;
  }

  .common_table th:nth-child(3) {
    width: 30%;
  }

  .common_table th:nth-child(4) {
    width: 15%;
    pointer-events: none;
  }

  .common_table th {
    padding: 0.8em 0.6em;
    font-size: 1.3rem;
  }

  .common_table td {
    padding: 0.8em 0.6em;
    font-size: 1.3rem;
  }

  .common_form_button input[type="submit"] {
    width: 46%;
  }

  /***お知らせ***/
  .single #info .head_sub aside {
    flex-wrap: wrap;
  }

  .single #info .head_sub .datatime {
    width: 100%;
    margin-bottom: 1%;
  }

  .single #info .head_sub .tag {
    margin-bottom: 1%;
  }

  .single #info .head_sub .share {
    margin-left: 0;
    width: 100%;
    margin-bottom: 1%;
  }

  /*▼スマートフォン企業情報▼*/
  .corporate #c_content .section_01 dl dt {
    width: 100%;
    padding: 8px 16px;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .corporate #c_content .section_01 dl dd {
    width: 94%;
    margin: 0 3%;
    padding: 8px 16px;
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

  .corporate #c_content .section_02 .cover {
    padding: 3%;
    border-radius: 8px;
  }

  .corporate #c_content .section_02 .cover iframe {
    height: 320px;
  }

  .corporate #c_content .section_03 .grid_cover .grid_box:nth-child(1) {
    width: 100%;
    margin: 0;
  }

  .corporate #c_content .section_03 .grid_cover .grid_box:nth-child(2) {
    width: 100%;
    margin-top: 4%;
  }

  /*▼スマートフォンカタログ▼*/
  .catalog #c_content h3 {
    font-size: 2.4rem;
  }

  .catalog #c_content .grid_cover {
    align-items: center;
  }

  .catalog #c_content .grid_cover .grid_box:nth-child(1) {
    width: 96%;
    max-width: 100%;
    text-align: center;
  }

  .catalog #c_content .grid_cover .grid_box:nth-child(2) {
    width: 100%;
  }

  .catalog #c_content .leaflet .grid_cover li {
    width: 48%;
    max-width: 48%;
  }

  /*カテゴリページ共通*/
  .common_aside_parts {
    max-width: 95vw;
    padding-bottom: 80px;
  }

  .common_aside_parts ul {
    width: 100%;
    flex-direction: column;
  }

  .common_aside_parts ul li {
    width: 100%;
    margin: 0 0 8px 0;
  }

  .common_aside_parts ul li,
  .common_aside_parts ul li a {
    font-size: 1.3rem;
  }

  /*▼▼▼スマートフォン会社概要▼▼▼*/
  /*▼カテゴリー研究開発▼*/
  /*▼トップメッセージ▼*/
  /*▼企業理念▼*/
  /*▼品質方針*/
  /*▼企業概要▼*/
  .outline #c_content .c_outline_com dl dt {
    width: 25%;
    border-bottom: 1px solid var(--font_color);
    font-size: 1.4rem;
    line-height: 100%;
  }

  .outline #c_content.c_outline_com dl dd {
    width: 75%;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--border_color);
  }

  .outline #c_content .c_outline_com .grid_box {
    margin-top: 24px;
    text-align: center;
  }

  .outline #c_content .c_outline_map .grid_cover {
    display: flex;
    flex-wrap: wrap;
  }

  .outline #c_content .c_outline_map .grid_box {
    width: 100%;
    padding: 24px;
    margin-bottom: 4.5em;
    line-height: 1.3;
    border-radius: 4px;
  }

  .outline #c_content .maps_ttl {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 4px;
  }

  .outline #c_content .maps_address {
    font-size: 1.4rem;
    margin-bottom: 4px;
  }

  .outline #c_content .maps_tel {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  .outline #c_content .if_btn {
    border: 1px solid var(--main_color2);
    width: auto;
    font-size: 1.3rem;
    padding: 0.4em 0.6em;
    margin-bottom: 12px;
  }

  .outline #c_content .maps_cover {
    display: block;
  }

  .outline #c_content .maps_cover div:nth-of-type(1) {
    width: 100%;
    margin-right: 0px;
    padding-right: 0px;
    border-right: 1px solid #f4f3f8;
    display: block;
  }

  .outline #c_content .maps_cover div:nth-of-type(2) {
    padding-right: 1em;
    width: 100%;
  }

  .outline #c_content .if_box iframe {
    margin-top: 12px;
    height: 280px;
  }

  .outline #c_content .access_cover img {
    margin-top: 8px;
    width: 100%;
    vertical-align: bottom;
  }

  .outline #c_content .access_inner {
    border-top: 1px solid var(--border_color);
    padding-top: 24px;
    margin-top: 0;
    overflow: hidden;
  }

  .outline #c_content .access_left {
    width: 100%;
    float: none;
  }

  .outline #c_content .access_left p {
    margin-bottom: 24px;
    font-size: 1.3rem;
  }

  .outline #c_content .access_right {
    width: 100%;
    float: none;
  }

  .outline #c_content .access_inner h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

  .outline #c_content .access_inner h3 span {
    margin-top: 4px;
    font-size: 1.3rem;
  }

  .outline #c_content .c_outline_trans h3 {
    font-size: 1.5rem;
  }

  .outline #c_content .c_outline_trans .list ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1em;
  }

  .outline #c_content .c_outline_trans .list li {
    margin: 0 8px 8px 8px;
  }

  /*▼子会社*/
  /*▼沿革*/
  /*▼スマートフォン環境への取り組み*/
  .environment #c_content .section_01 .inner_1240 {
    position: relative;
  }

  .environment #c_content .section_01 .inner_1240 .img_box {
    width: 37%;
    position: absolute;
    top: -48px;
    right: 0;
  }

  .environment #c_content .section_01 .inner_1240 .img_box img {
    width: 100%;
  }

  .environment #c_content .section_02 {
    position: relative;
    min-height: 400px;
    width: 100%;
  }

  .environment #c_content .section_02::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 80px;
    width: 100%;
    height: 400px;
    background: url(../image/c_envi02_bk.png) center center no-repeat
  }

  .environment #c_content .section_02 .grid_cover {
    gap: 1vw;
  }

  .environment #c_content .section_02 .grid_cover .grid_box {
    width: calc((100% - 2%) / 2);
  }

  .environment #c_content .section_02 .grid_cover .grid_box h4 {
    font-size: 1.4rem;
    margin: 2em 0.2em 0.2em;
  }

  .environment #c_content .section_02 .grid_cover .grid_box p {
    font-size: 1.3rem;
    padding: 1em 1em 3em 1em;
  }

  .environment #c_content .section_02 .grid_cover .grid_box:after {
    font-size: 4.0rem;
  }

  .environment #c_content .section_03 {
    background: url(../image/c_envi03.png) no-repeat 100% 100%;
    background-size: contain;
    padding: 0 0 50% 0;
  }

  .environment #c_content .section_03 .grid_box {
    width: 100%;
  }

  .environment #c_content .section_04 h3 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    font-weight: 500;
  }

  .environment #c_content .section_04 .grid_cover {
    flex-wrap: wrap;
  }

  .environment #c_content .section_04 .grid_cover .grid_box:nth-child(1) {
    width: 100%;
    margin-bottom: 80px;
  }

  .environment #c_content .section_04 .grid_cover .grid_box:nth-child(2) {
    width: 100%;
    margin-bottom: 80px;
  }

  .environment #c_content .section_04 table td {
    text-align: left;
    font-size: 1.4rem;
  }

  .environment #c_content .section_04 .grid_cover .grid_box img {
    max-width: 240px;
    margin: 1% 0;
  }

  .environment #c_content .c_envi04 dl {
    width: 100%;
  }

  .environment #c_content .c_envi04 dl dt {
    color: #FFFFFF;
    text-align: left;
    padding: 8px 20px;
    font-size: 1.4rem;
    font-weight: 500;
    background: var(--main_color);
    -webkit-transition: 0.2s;
    transition: 0.2s;
    vertical-align: middle;
  }

  .environment #c_content .c_envi04 dl dd {
    color: var(--main_color);
    background: #ddf1fc;
    padding: 8px 20px;
    font-size: 1.4rem;
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 400;
  }

  .environment #c_content .img_box img {
    vertical-align: bottom;
  }

  .environment #c_content .iso_logo_box img {
    max-width: 200px;
  }

  .environment #c_content .iso_logo_box p {
    font-size: 1.2rem;
    font-weight: 300;
  }

  /*リクルート*/
  .recruit #c_content .section_01 .cover .grid_cover .grid_box:nth-child(1) {
    width: 100%;
    padding: 8px 16px;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .recruit #c_content .section_01 .cover .grid_cover .grid_box:nth-child(2) {
    width: 94%;
    margin-left: 6%;
    padding: 8px 16px;
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

}