@charset "utf-8";

/*
.tohoku-rogoWrap,
.gradient,
.global_menu {
  display: none;
}
*/

/*——————————————————————
base
——————————————————————*/
html {
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  font-family: "Noto Sans JP", "IBM Plex Sans JP", sans-serif;
  color: #3e3e3e;
  margin: auto;
}
* {
  margin: 0;
  padding: 0;
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #3e3e3e;
}

* {
  box-sizing: border-box;
}

.body_wrapper {
  overflow: hidden;
}

li {
  list-style: none;
}

/*——————————————————————
————————————————————————
全体設定
————————————————————————
——————————————————————*/

.display_flex,
.display_flex-s {
  display: flex;
}

.space._00 {
  height: 0.4rem;
}

.space._01 {
  height: 1rem;
}

.space._02 {
  height: 2rem;
}

.space._03 {
  height: 3rem;
}

.space._04 {
  height: 4rem;
}

.space._06 {
  height: 6rem;
}

.space._08 {
  height: 8rem;
}

.space._16 {
  height: 16rem;
}

/*——————————————————————
hタグフォント指定講習
hタグは基本そのままで使うこと
hタグの前にclass名をつけない
——————————————————————*/

h1 {
  font-size: 6.4rem;
}

h1 span {
  font-size: 2.8rem;
}

h1 p {
  font-size: 2.4rem;
}

h2 {
  font-size: 5.6rem;
  font-family: "IBM Plex Sans JP", sans-serif;
  letter-spacing: 1rem;
}

h2 span {
  color: rgba(220, 0, 12, 1);
}

h3 {
  font-size: 2.4rem;
}

/*外部リンク */

h4 {
  font-size: 3.2rem;
  text-align: center;
  color: rgba(0, 40, 118, 1);
  font-weight: bold;
  letter-spacing: 0.4rem;
}

h4 p {
  font-size: 1.6rem;
  color: rgba(62, 62, 62, 1);
  font-weight: normal;
  line-height: 2.8rem;
  letter-spacing: 0.2rem;
}

h4 ._link {
  font-size: 1.6rem;
  color: rgba(0, 40, 118, 1);
  font-weight: bold;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(0, 40, 118, 1);
  transition: 0.4s;
}

h4 ._link:hover {
  opacity: 0.6;
}

/*——————————————————————
メインBOX指定
——————————————————————*/

.field {
  margin: 0 auto;
}

.field._01 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*-------------------------------------------
.entry,.innerは.field._01等で指示した幅(高)に対し
色・写真等の配置、paddingの指定をする
-------------------------------------------*/

.entry {
  margin: auto;
}

.entry._01 {
  width: 100%;
}

.entry._02 {
  width: 100%;
  height: 65.8rem;
}

.entry._02 {
  height: 60rem;
}

.entry._06 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.inner {
  margin: 0 auto;
  height: 100%;
}

.inner._01 {
  width: 76rem;
}

.inner._02 {
  width: 46%;
  height: 34rem;
  background: rgba(0, 157, 228, 1);
}

.inner._03 {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.inner._04 {
  width: 72rem;
}

.inner._05 {
  width: 62rem;
}

.inner._06 {
  padding: 0 5rem;
}

.inner._07 {
  max-width: 123rem;
  padding: 0 1.5rem;
}

.linerss-bg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.linerss {
  position: fixed;
  top: 0;
  width: 98rem;
  height: 100vh;
  border-left: solid rgba(0, 40, 118, 1) 1.6px;
  border-right: solid rgba(0, 40, 118, 1) 1.6px;
}

/*————————————————————————————————
border設定 ※基本的にmarginは入れない
————————————————————————————————*/

.border {
  width: 100%;
}

.border._01 {
  height: 0.2rem;
  background: rgba(173, 173, 173, 1);
}

.border._02 {
  margin: 0 auto;
  width: 98rem;
  height: 0.2rem;
  background: rgba(0, 40, 118, 1);
}

.border._03 {
  border: solid rgba(0, 40, 118, 1) 0.5px;
}

.border._02._link {
  width: 100%;
}

/*———————————————————————————————————————
fadeInアクションの一例
translateの()内で縦軸・横軸の
移動量を指示する(.is-showのclass付与)でJQ発動
.inBoxはjQ発動前の位置
————————————————————————————————————————*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 0.4s;
}

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.inBox {
  margin: 2.2rem 0;
}

/*———————————————————————————————————————
オープニングアニメーションエリア
————————————————————————————————————————*/

/*——————————————————————
scroll_down 設定の一例
——————————————————————*/
.scroll_down {
  position: absolute;
  left: 50%;
  bottom: 4rem;
  z-index: 1;
}

.circle {
  width: 5.4rem;
  height: 5.4rem;
  border: solid rgba(62, 62, 62, 1) 1px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.6);
}

.arrow-down,
.arrow-up {
  display: block;
  margin: 0 auto;
  width: 10px;
  height: 80px;
}
.arrow-down:after,
.arrow-up:before {
  content: "";
  display: block;
  margin: 0 -4.6px;
  width: 20px;
  height: 20px;
  border-top: 1px solid rgba(62, 62, 62, 1);
  border-right: 1px solid rgba(62, 62, 62, 1);
  behavior: url(-ms-transform.htc);
}

.arrow-down:after {
  transform: rotate(135deg);
}

.arrow-up:before {
  position: absolute;
  top: 1.6rem;
  transform: rotate(-45deg);
}

.arrow-down::before,
.arrow-up::after {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  /*margin-left: -13px;*/
  width: 1px;
  height: 3rem;
  background: rgba(62, 62, 62, 1);
  content: " ";
}
.arrow-down::before {
  animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}

@-webkit-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}
@-moz-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}
@-o-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}
@keyframes elasticus {
  0% {
    transform-origin: 0% 0%;
    transform: scale(1, 0);
  }
  50% {
    transform-origin: 0% 0%;
    transform: scale(1, 1);
  }
  50.1% {
    transform-origin: 0% 100%;
    transform: scale(1, 1);
  }
  100% {
    transform-origin: 0% 100%;
    transform: scale(1, 0);
  }
}

/*——————————————————————
オープニングアニメーション
——————————————————————*/

/*=============== SVGアニメーション内の指定 =================*/
.cls-1 {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  stroke-miterlimit: 0;
  stroke-dasharray: 1150;
  stroke-dashoffset: 1150;
  animation: strokeAnimation 4s linear 0s;
}
@keyframes strokeAnimation {
  0% {
    stroke-dashoffset: 1150;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

#splash {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/top/kbi_top_back.jpg);
  background-position: center center;
  background-size: cover;
  text-align: center;
  color: #fff;
}

#splash_logo {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
}

.splash_logo_logo {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#splash_logo p {
  float: left;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
}

#splash_logo .splash_a {
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
}

/*——————————————————————
ナビメニュー
——————————————————————*/

.fs-logo {
  position: relative; /*0116修正*/
  /*width: 100%;*/ /*0116修正*/
  height: auto;
  z-index: 1;
}

.logo {
  position: relative;
  justify-content: center;
  top: 8rem;
}

.logo img {
  width: 10rem;
  height: auto;
}

.header_inner {
  position: relative;
  width: 100%;
  z-index: 999;
  transition: 0.4s;
}

.navArea {
  display: flex;
  justify-content: center;
}

.global_menu {
  position: absolute;
  width: 64rem;
  display: flex;
  justify-content: center;
}

.gnavi_back {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  top: -1.2rem;
  filter: drop-shadow(0px 0px 20px rgba(64, 64, 64, 0.2));
  overflow: hidden;
  z-index: -1;
  transform: translateZ(0); /*0116 safariバグ対策*/
}

.gnavi_back img {
  width: 85.4rem;
  height: auto;
}

.header_nav {
  position: absolute;
  width: 100%;
  justify-content: center;
  /*align-items: center;*/
  top: 2.6rem;
  z-index: 2;
}

.menu {
  padding: 0.7rem 1rem;
  height: 2rem;
}

.mail_form {
  font-size: 1.6rem;
  font-weight: 600;
  border: solid rgba(62, 62, 62, 1) 1px;
  background: rgba(255, 255, 255, 1);
  padding: 0.6rem 2rem;
  border-radius: 1.6rem;
  transition: 0.4s;
}

.mail_form:hover a {
  color: rgba(62, 62, 62, 1);
  transition: 0.4s;
}

.mail_form:hover {
  background: rgba(0, 40, 118, 1);
  border: solid rgba(0, 40, 118, 1) 1px;
}

.mail_form:hover a {
  color: rgba(255, 255, 255, 1);
}

/*
.header_nav li a{
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 1.6em;
  font-weight:600;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3E3E3E;
  transition: .4s;
  cursor: pointer;
}


.header_nav ul li a:hover{
  color: rgba(203, 51, 45, 1);
}
*/

/*—————navタブにopen classがついた時の動作—————*/

.header_inner.open {
  overflow-y: auto;
  height: 100%;
}

.navArea.display_flex {
  align-items: initial;
}

.header_inner.open .global_menu {
  display: flex;
  /*flex-flow: column;*/
  justify-content: center;
  /*top: 20rem;*/
}

.header_inner.open .gnavi_back {
  position: fixed;
}

.header_inner.is-hidden {
  visibility: hidden;
  opacity: 0;
}

/*————————————ここまで————————————*/

/*——————————————————————
Mega Menu
——————————————————————*/
li.menu ul.child_menu {
  position: absolute;
  display: none;
  top: 4rem;
  left: 0;
  right: 0;
  /*width: 100rem;*/
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: solid rgba(64, 64, 64, 1) 1px;
  border-radius: 1rem;
}

ul.child_menu {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

li.menu:hover ul.child_menu {
  visibility: visible;
  opacity: 1;
}

li.menu ul.child_menu > li {
  display: inline-block;
  padding: 1.4rem;
  border: none;
}

/*————————————————————————————
  ハンバーガー トグル形状とアクション
————————————————————————————*/

.toggle_btn.pc-only {
  position: fixed;
  width: 6rem;
  height: 6rem; /*高さ必ず指定してタップ領域確保*/
  display: block;
  top: 0rem;
  right: 0rem;
  transition: 0.3s;
  z-index: 9999;
  background-color: transparent;
  border: solid rgba(255, 255, 255, 1) 2px;
  border-radius: 3rem;
  cursor: pointer;
  outline: none;
  margin: 2.4rem;
  filter: drop-shadow(0px 0px 5px Black);
  /**スクロールでハンバーガー登場の場合以下の1文を入れるとCookieの2回目ローディングも出なくなる*/
  transform: translateY(-100px);
}

.btn01 {
  width: 100%;
  height: 2.2rem;
  padding: 0 1.2rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.toggle_btn span {
  display: block;
  left: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 1);
  transition: 0.4s;
  cursor: pointer;
  z-index: 9999;
}

.toggle_btn.open span {
  background-color: rgba(255, 255, 255, 1);
}

.toggle_btn.open span:nth-child(1) {
  -webkit-transform: translateY(1.2rem) rotate(30deg);
  transform: translateY(1rem) rotate(30deg);
}
.toggle_btn.open span:nth-child(2) {
  opacity: 0;
}
.toggle_btn.open span:nth-child(3) {
  -webkit-transform: translateY(-1.2rem) rotate(-30deg);
  transform: translateY(-1rem) rotate(-30deg);
}
/*————————————ここまで————————————*/

/*———————————————————————————————————
ナビメニュー スクロールダtoggle_btnウンでハンバーガー
———————————————————————————————————*/

/*====== 上に消えるアニメ ======*/
.global_menu.UpMove,
.toggle_btn.pc-only.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

/*====== 下に消えるアニメ ======*/
.global_menu.DownMove,
.toggle_btn.pc-only.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*————————————ここまで————————————*/

.mask {
  position: fixed;
}
.open .mask {
  margin: 0 auto;
  display: block;
  top: 0;
  right: 0;
  width: 37.6rem;
  height: 100vh;
  z-index: -1;
}
.header_inner .global_menu.UpMove {
  display: block;
  margin-top: -10rem;
  transition: 0.4s;
}

.header_inner.open .global_menu.UpMove {
  position: fixed;
  min-width: 0;
  margin-top: 0rem;
  animation: none;
}

.header_inner.open .menu {
  border-left: none;
}

.header_inner.open .menu:last-child {
  border-right: none;
}

/*———————button(ホバーで左から太くなり外す左から細くなる)——————*/
/*—————————————————テキストが上下に回転する—————————————————*/
/*——————————————————矢印が左右に回転する———————————————————*/

.positions {
  width: 100%;
}

.itemss {
  width: 100%;
}

.itemss .line {
  position: relative;
  width: 100%;
  /*height: 1rem;*/
  display: block;
}

.itemss .line:before,
.itemss .line:after {
  position: absolute;
  content: "";
  display: block;
  right: 0;
  width: 100%;
  height: 0.1rem;
  background: rgba(173, 173, 173, 1);
  bottom: -0.2rem;
  transition: all 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  transition-property: width;
}

.itemss .line:after {
  width: 0;
  height: 0.2rem;
  background: rgba(0, 144, 207, 1);
}

.itemss:hover {
  color: rgba(173, 173, 173, 1);
}

.itemss:hover .line:after {
  left: 0;
  right: auto;
  width: 100%;
}

/*———————————————————————————————
テキストが上下に回転するアニメーション
※ナビメニュー含む
———————————————————————————————*/

.moji_hover {
  position: relative;
  padding: 1.6rem;
}

.moji_hover p,
.header_nav li a {
  overflow: hidden; /* 1つ目の影を隠す */
  color: transparent; /* テキスト本体は透明にする */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: text-shadow 0.4s;
}

.moji_hover p {
  font-size: 1.8rem;
  letter-spacing: 1.8px;
  text-shadow: 0 -1.5em 0 rgba(0, 144, 207, 1), 0 0 0 rgba(0, 144, 207, 1);
}

.header_nav li a {
  font-size: 1.6rem;
  font-weight: 600;
  text-shadow: 0 -1.5em 0 rgba(62, 62, 62, 1), 0 0 0 rgba(62, 62, 62, 1);
  /*ホバーで指マーク*/
  cursor: pointer;
}

.itemss:hover .moji_hover p {
  text-shadow: 0 0 0 rgba(0, 144, 207, 1), 0 1.5em 0 rgba(0, 144, 207, 1); /* 2つの影の位置を上方向に1.5emずつずらす */
}

.header_nav li a:hover {
  text-shadow: 0 0 0 rgba(203, 51, 45, 1), 0 1.5em 0 rgba(203, 51, 45, 1); /* 2つの影の位置を上方向に1.5emずつずらす */
}

/*——————————————————矢印が左右に回転する———————————————————*/
.icon_arrow {
  position: absolute;
  right: 0;
  bottom: 1.6rem;
  display: block;
  width: 2rem;
  height: 2rem;
  background-image: url(../img/top/icon_arrow.svg);
  background-repeat: repeat-x;
  background-size: 20px 20px;
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0s;
}

.moji_hover:hover .icon_arrow {
  background-position-x: 2rem;
}

/*私たちの仕事内button*/
.itemss .line._a:after {
  width: 0;
  height: 0.2rem;
  background: rgba(220, 0, 12, 1);
}

.itemss:hover .line._a:after {
  left: 0;
  right: auto;
  width: 100%;
}

.moji_hover._a p,
.moji_hover._b p {
  text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 1), 0 0 0 rgba(255, 255, 255, 1);
}

.itemss:hover .moji_hover._a p {
  text-shadow: 0 0 0 rgba(255, 255, 255, 1), 0 1.5em 0 rgba(255, 255, 255, 1);
}

.icon_arrow._a {
  background-image: url(../img/top/icon_arrow_sab.svg);
}

.moji_hover:hover .icon_arrow._a {
  background-position-x: 2rem;
}

/*——————————————ここまで—————————————*/

/*——————————————バツマーク————————————*/

.cross_box {
  padding: 0 1rem;
}
.cross {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 0.2rem;
  background: rgba(203, 51, 45, 1);
  transform: rotate(45deg);
  vertical-align: middle;
}

.cross::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(203, 51, 45, 1);
  transform: rotate(90deg);
}
/*——————————————ここまで—————————————*/

/*———————————————————————————
画面いっぱいfirst-view 設定の一例
———————————————————————————*/

#first-wrap {
  width: 100%;
  height: 100vh;
  top: 0;
}

#first-view_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*center: calc(50% - 25vh);*/
  background-image: url(../img/top/kbi_top_back.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
}

/*——————————————画面のドット処理—————————————*/
/*
#first-view_bg::after{
  content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
	background-image: radial-gradient(#111 20%, transparent 21%), radial-gradient(#111 20%, transparent 21%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
}
*/

/*——————————————ここまで—————————————*/

.title_box {
  margin: 0 auto;
  position: relative;
  /*max-width: 140rem;*/
  right: 6rem;
  height: 100%;
  /*bottom: -8rem;*/
  z-index: 2;
}

.title_box_in {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  filter: drop-shadow(0px 0px 8px rgba(0, 40, 118, 1));
}

.h1_etc {
  text-align: right;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 10rem;
}

.h1_etc p {
  font-weight: 400;
  line-height: 4rem;
}

.top_word {
  width: 45rem;
}

.top_word img {
  width: 100%;
  height: auto;
}

.mv03.swiper-main {
  height: 800px;
  @media only screen and (max-width: 1024px) {
    height: max(70vh, 70vw);
  }
}

.swiper_boxs {
  position: absolute;
  width: 78%;
  height: 72.4%;
  bottom: 2.8rem;
}

.swiper {
  position: relative;
  height: 62rem;
  border-radius: 0 3rem 3rem 0;
}

.kbi_top_sw,
.kbi_recruit_sw {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.kbi_top_sw img,
.swiper-slide._01 img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .kbi_top_sw,
.swiper-slide-duplicate-active .kbi_top_sw,
.swiper-slide-prev .kbi_top_sw {
  animation: zoomUp 10s linear 0s 1 normal both;
}
.kbi_top_sw img {
  display: block;
}

.swiper-pagination-bullet {
  border-radius: inherit;
  margin: 0 5px !important;
  width: 54px;
  height: 5px;
  background: skyblue;
  opacity: 0.19;
}
.swiper-pagination-bullet-active {
  background: skyblue;
  opacity: 1;
}

.overview-w {
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05rem;
}

/*——————————————————————
————————————————————————
KBIとはエリア
————————————————————————
——————————————————————*/

.h2-title {
  width: 100%;
  height: 12.8rem;
  justify-content: center;
  align-items: center;
  color: rgba(0, 40, 118, 1);
  border-top: solid rgba(0, 40, 118, 1) 2px;
  border-bottom: solid rgba(0, 40, 118, 1) 2px;
  padding: 2rem;
  z-index: 2;
}

.icon-s {
  width: 6.4rem;
  height: auto;
  margin-right: 2rem;
}

.icon-s img {
  width: 100%;
  height: auto;
}

.inner._01 {
  justify-content: space-between;
}

.office_kbi,
.inner_words {
  width: 36rem;
}

.office_kbi img {
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
}

.inner_words {
  font-size: 2rem;
  line-height: 4rem;
  letter-spacing: 0.1rem;
}

.kbi_main_w {
  flex-flow: column;
  justify-content: space-between;
}

/*——————————————————————
————————————————————————
私たちの仕事 エリア
————————————————————————
——————————————————————*/

.w-word {
  color: rgba(255, 255, 255, 1);
}

.h2-title._a {
  border-top: solid rgba(255, 255, 255, 1) 2px;
  border-bottom: solid rgba(255, 255, 255, 1) 2px;
}

.works_back {
  position: relative;
  width: 100%;
  height: 36.8rem;
  top: 0;
  left: 0;
  background-image: url(../img/top/work_back_01.jpg);
  background-position: center center;
  background-size: cover;
}

.background-list {
  height: 100%;
  display: flex;
  align-items: center;
}

.side-scroll-list-wrapper {
  position: relative;
  background-image: url(../img/top/work_back_02.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.back-moji {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-moji img {
  width: auto;
  height: 80%;
  /*
  width: 80rem;
  height: auto;
  */
}

/*——————————————————————
横スクロールセクション 
——————————————————————*/

.side-scroll section {
  padding: 0;
}

.side-scroll-list {
  position: absolute;
  top: 0;
  bottom: 0;
  /*left: 34%;*/
  display: flex;
  gap: 0 30rem;
  padding: 0 24%;
}

.side-scroll-item:first-child {
  /*margin-left: 50rem;*/
  margin-top: 6rem;
}

.side-scroll-item:last-child {
  /*margin-right: 50rem;*/
}

.side-scroll-item + .side-scroll-item {
  /*margin-left: 60px;*/
  margin-top: 6rem;
}

.kbi_works {
  width: 50rem;
}

.m_photos img {
  width: 100%;
  height: auto;
}

.titles {
  color: rgba(255, 255, 255, 1);
  flex-flow: column;
  align-items: center;
}

.job_name {
  font-size: 3.6rem;
}

.job_eng {
  font-size: 1.6rem;
}

.number {
  width: 13.6rem;
  height: auto;
}

.number img {
  width: 100%;
}

.m_mojis {
  color: rgba(255, 255, 255, 1);
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 100;
}

.background_illust {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.illust {
  position: absolute;
  width: 100%;
  height: auto;
}

.illust._a img,
.illust._b img {
  width: 49rem;
}

.illust._a {
  left: 0;
  bottom: 0;
}

.illust._b {
  right: 0;
  top: 0;
}

/*——————————————————————
————————————————————————
デザイン実績 エリア
————————————————————————
——————————————————————*/
.works_back._a {
  background-image: url(../img/top/work_back_03.jpg);
  height: 50rem;
}

.background-list._a,
.background-list._b {
  flex-flow: column;
  justify-content: center;
}

.achie {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 3rem;
  letter-spacing: 0.06rem;
}

.positions._a {
  width: 24rem;
  height: 4.6rem;
}

/*——————————————————————
————————————————————————
デザイン実績 エリア
————————————————————————
——————————————————————*/
.works_back._b {
  background-image: url(../img/top/work_back_04.jpg);
  height: 34rem;
  /*z-index: -1;*/
}

/*——————————————————————
————————————————————————
採用情報 エリア
————————————————————————
——————————————————————*/
.h2_sab {
  letter-spacing: 0rem;
}

/*——————————————————————
————————————————————————
お知らせ エリア
————————————————————————
——————————————————————*/

._com {
  font-size: 1.6rem;
}

.td_pro01 {
  color: rgba(127, 127, 127, 1);
  text-align: center;
}

.td_pro02 {
  /*safariバグ対策_以下2行*/
  position: relative;
  z-index: 0;
  text-align: center;
  border: solid rgba(62, 62, 62, 1) 1px;
  padding: 0.2rem 1.6rem;
  margin: 0 1rem;
}

.detail {
  border-bottom: dotted rgba(0, 40, 118, 1) 1px;
  padding: 2rem 1.6rem;
}

.detail:first-child {
  border-top: solid rgba(0, 40, 118, 1) 1px;
}

.detail:last-child {
  border-bottom: solid rgba(0, 40, 118, 1) 1px;
}

.info-item-inner {
  align-items: center;
}

.info_texts {
  width: 48rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.positions._b {
  margin: 0 auto;
  width: 23rem;
  height: 20rem;
}

/*——————————————————————
お知らせ-詳細
——————————————————————*/
._info {
  font-size: 1.6rem;
}

._info .td_pro02 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 3.2rem;
  margin: 0;
}

.info_ph {
  width: 100%;
  height: auto;
}

.info_ph img {
  width: 100%;
  height: auto;
}

/*——————————————————————
————————————————————————
ご相談 エリア
————————————————————————
——————————————————————*/

.works_back._c {
  position: relative;
  width: 100%;
  height: 26rem;
  background: linear-gradient(
    90deg,
    rgba(97, 103, 165, 1) 0%,
    rgba(76, 86, 152, 1) 30%,
    rgba(0, 40, 118, 1) 68%
  );
  transition: 0.4s ease;
}

.works_back._c::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background: linear-gradient(
    -45deg,
    rgba(97, 103, 165, 1) 0%,
    rgba(76, 86, 152, 1) 30%,
    rgba(0, 40, 118, 1) 68%
  );
  transition: 0.4s ease;
}

.works_back._c:hover::before {
  opacity: 0;
}

.works_back._c a:hover .moji_hover._a p {
  text-shadow: 0 0 0 rgba(255, 255, 255, 1), 0 1.5em 0 rgba(255, 255, 255, 1);
}

.works_back._c a {
  transition: 0.4s ease;
  display: block;
  width: 100%;
  height: 100%;
}

.consultation {
  font-size: 3.2rem;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  letter-spacing: 0.2rem;
}

.mail_box {
  width: 48rem;
  border: solid rgba(255, 255, 255, 1) 1px;
}

.mail_icon {
  width: 7rem;
  height: auto;
  padding: 0 1rem;
}

.mail_icon img {
  width: 100%;
  height: auto;
}

.moji_hover._a._01 {
  justify-content: center;
}

.moji_hover._a._01 p {
  font-size: 2.4rem;
}

/*——————————————————————————————————
————————————————————————————————————
footerベーシック
————————————————————————————————————
——————————————————————————————————*/

.f_field {
  position: relative;
  background: rgba(255, 255, 255, 1);
  /*border-top: solid rgba(0, 40, 118, 1) 1.6px;*/
}

.f_top {
  margin: 0 auto;
  width: 76rem;
}

.f_front_top {
  margin: 0 auto;
  width: 76rem;
}

.f_front._b {
  justify-content: space-between;
}

.f_bottom_rogo {
  width: 10rem;
  height: auto;
}

.f_front_top img,
.f_bottom_left_rog img {
  width: 100%;
}

.f_bottom_left,
.f_bottom_right {
  font-size: 1.6rem;
  line-height: 2.2rem;
  letter-spacing: 0.06rem;
}

.f_bottom_left_rogo {
  width: 15.2rem;
}

.f_bot {
  margin: 0 auto;
  width: 24.6rem;
  justify-content: space-between;
  align-items: center;
}

.f_nav_nav a {
  transition: 0.4s;
}

.f_nav_nav a:hover {
  opacity: 0.5;
}

.f_nav_nav {
  line-height: 4rem;
}

.f_nav_nav:first-child {
  margin-top: -1rem;
}

.f_bottom_right {
  justify-content: center;
  gap: 6rem;
}

.f_front_bottom {
  font-size: 1.6rem;
  flex-flow: column;
  align-items: center;
}

.f_nav li a {
  position: relative;
}

.copyright {
  width: 100%;
  text-align: center;
  letter-spacing: 0.06rem;
  padding: 1.6rem;
  border-top: solid rgba(173, 173, 173, 1) 2px;
}

/*——————————————————————————————————
page_topアイコン指示
——————————————————————————————————*/

/*————————なぜかpage_top表示でpcハンバーガーがバグるため非表示————————*/

.page_top {
  /*width: 8rem;*/
  position: fixed;
  bottom: 82rem;
  right: 2rem;
  z-index: 2;
  opacity: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  transform: translateY(100px);
}

.page_top.active {
  animation: UpAni 1s forwards;
}

@keyframes UpAni {
  from {
    bottom: 16rem;
  }
  to {
    bottom: 34rem;
  }
}

.page_top {
  animation: DownAni 0.5s forwards;
}
@keyframes DownAni {
  from {
    bottom: 34rem;
  }
  to {
    bottom: 16rem;
  }
}

/*-----------jQのclass付与指示------------*/
.change {
  color: #fff;
  background: #fff;
}

.page_top.change {
  background: none;
}

.page_top.pc-only.change span::before,
.page_top.pc-only.change span::after {
  background: #fff;
}

/*——————————————————————————————————
————————————————————————————————————
以下 下層ページ
————————————————————————————————————
——————————————————————————————————*/

/*——————————————————————
————————————————————————
下層 ファーストビュー 
————————————————————————
——————————————————————*/
#first-view_bg._under {
  position: relative;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-size: cover;
  height: 43.8rem;
  /*—————————————————————————————————————————
  以下を入れないと左右に不明な隙間が—できる場合がある
  —————————————————————————————————————————*/
  overflow: hidden;
}

#first-view_bg._under._01 {
  background-image: url(../img/top/under_top_img_01.jpg);
}

#first-view_bg._under._02 {
  background-image: url(../img/top/under_top_img_02.jpg);
}

#first-view_bg._under._04 {
  background-image: url(../img/top/under_top_img_04.jpg);
}

#first-view_bg._under._05 {
  background-image: url(../img/top/under_top_img_05.jpg);
}

#first-view_bg._under._06 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*center: calc(50% - 25vh);*/
  background-image: url(../img/recruit/kbi_recruit_back.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
}

#first-view_bg._under._07 {
  background-image: url(../img/top/under_top_img_07.jpg);
}

#first-view_bg._under._08 {
  background-image: url(../img/top/under_top_img_08.jpg);
}

.h1_title {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.h1_title h1 {
  width: 100%;
}

.h1_title._01 h1 span {
  position: absolute;
  width: 100%;
  padding: 1rem;
  letter-spacing: 0.6rem;
  color: rgba(0, 40, 118, 1);
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border-top: solid rgba(0, 40, 118, 1) 2px;
  border-bottom: solid rgba(0, 40, 118, 1) 2px;
}

/*——————————————————————
————————————————————————
————————————————————————
下層 KBIとは ページ
————————————————————————
————————————————————————
——————————————————————*/

/*————————————————————————
KBIとは ページトップ
————————————————————————*/

.main_wo {
  text-align: center;
  font-size: 2rem;
  line-height: 6rem;
}

.philosophy {
  justify-content: center;
  gap: 6rem;
}

.philo {
  width: 34rem;
  border-radius: 19.5rem;
  box-shadow: 0 20px 40px 0 rgba(32, 45, 64, 0.3);
}

.philo img {
  width: 100%;
}

/*————————————————————————
KBIとは タブトップ
————————————————————————*/

/*エリアの表示非表示と形状*/
.area {
  display: none;
}

.area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*タイトルタブ(タブ項目)設定*/

.panels > .panel.active {
  display: block;
}

.tab_top {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  overflow-x: auto;
  display: flex;
  justify-content: center;
  scrollbar-width: none;
  /*
  width:60rem;
  margin: 0 auto;
  */
}

.tab_top::-webkit-scrollbar {
  display: none;
}
.tab_area {
  scroll-snap-align: start;
  justify-content: space-between;
  width: 60rem;
  /*タブボタンと広告エリアを離したい場合は タブボタン指示htmlの下にスペースdiv*/
}

.tab_area li {
  width: calc((100% - 8rem) / 4);
  /*background:#E2E2E2;*/
  border: solid rgba(0, 40, 118, 1) 1.4px;
  border-radius: 1rem;
  text-align: center;
  transition: 0.4s;
}

.tab_area li a {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 2.2rem;
  color: rgba(0, 40, 118, 1);
}

.tab_area li.active a {
  color: #fff;
}

/*各タブ項目の色等を変えたい場合はクラス名(_00)を使って指定*/
.tab_area ._01.active,
.tab_area ._03.active {
  background: rgba(0, 40, 118, 1);
}

.tab_area ._02.active,
.tab_area ._04.active {
  background: rgba(117, 120, 176, 1);
  border: solid rgba(117, 120, 176, 1) 1.4px;
}

/*ここまで*/

/*————————————————————————
tab_アクセス エリア
————————————————————————*/
.ceiter-h3 {
  text-align: center;
  font-weight: 600;
  line-height: 3rem;
  letter-spacing: 0.4rem;
  color: rgba(0, 40, 118, 1);
}

.ceiter-h3 p {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  color: rgba(47, 47, 47, 1);
}

.f_nav_center iframe {
  width: 100%;
  height: 46rem;
}

/*————————————————————————
tab_会社概要 沿革 エリア
————————————————————————*/
.tables_item {
  width: 100%;
  font-size: 1.6rem;
}

.tables_item tr {
  border-bottom: dotted rgba(62, 62, 62, 1) 1px;
}

.tables_item tr:first-child {
  border-top: solid rgba(62, 62, 62, 1) 1.5px;
}

.tables_item tr:last-child {
  border-bottom: solid rgba(62, 62, 62, 1) 1.5px;
}

.item_left,
.lefts {
  height: 5rem;
}

.item_left {
  width: 15.2rem;
  padding: 1.5rem;
  line-height: 4rem;
  text-align: center;
}

.item_left._a {
  width: 24.2rem;
}

.item_right {
  padding: 1.5rem;
  line-height: 4rem;
}

/*————————————————————————
tab_会社概要 沿革 エリア
————————————————————————*/
.kon_obi {
  width: 100%;
  font-size: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 40, 118, 1);
  padding: 1rem;
}

.sdg_img {
  text-align: center;
  width: 100%;
  height: auto;
}

.sdg_img img {
  width: 35rem;
  height: 43rem;
}

.sdgs_under {
  justify-content: space-between;
}

/*——————————————————————
————————————————————————
————————————————————————
下層 印刷設備 ページ
————————————————————————
————————————————————————
——————————————————————*/

/*————————————————————————
商業印刷について
————————————————————————*/

.pers_p,
.pers_wo {
  width: 36rem;
}

.pers_p img {
  width: 100%;
  height: auto;
}

.pers_wo {
  font-size: 1.6rem;
  line-height: 4rem;
  letter-spacing: 0.2rem;
}

.ceiter-h3.-a {
  font-weight: 500;
  padding: 1.4rem;
  border-top: solid rgba(0, 40, 118, 1) 2px;
  border-bottom: solid rgba(0, 40, 118, 1) 2px;
}

.item_left._b {
  width: 50rem;
  text-align: left;
  padding: 1.5rem 1.5rem 1.5rem 10rem;
  line-height: 5rem;
}

.item_right._a {
  text-align: center;
  line-height: 5rem;
}

/*——————————————————————
————————————————————————
————————————————————————
個人情報保護方針 ページ
————————————————————————
————————————————————————
——————————————————————*/
.privacypolicy_bi {
  font-weight: 600;
  color: rgba(0, 40, 118, 1);
  text-align: center;
}

.privacypolicy_sm {
  font-size: 1.4rem;
  line-height: 2.8rem;
}

.privacypolicy_sm._line{
  text-decoration:underline;
  text-underline-offset: 5px;
}


.privacypolicy_sm a {
  color: rgba(0, 40, 118, 1);
  font-weight: 600;
  border-bottom: dotted rgba(0, 40, 118, 1) 1px;
}

.privacypolicy_sm._su {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: rgba(0, 40, 118, 1);
}

.pupo {
  margin: 0 auto;
  width: 20rem;
}

.pupo img {
  width: 100%;
  height: auto;
}

/*——————————————————————
————————————————————————
————————————————————————
下層 リクルート ページ
————————————————————————
————————————————————————
——————————————————————*/

/*------swiper_fadein------*/

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.swiper-slide-active .kbi_recruit_sw,
.swiper-slide-duplicate-active .kbi_recruit_sw,
.swiper-slide-prev .kbi_recruit_sw {
  animation: zoomUp 8s linear 0s normal both;
}

/*------recruit_icon------*/
.recruit_icon {
  position: absolute;
  top: 10rem;
  left: 8%;
  z-index: 2;
  width: 20rem;
  height: 20rem;
  text-align: center;
  background: linear-gradient(
    110deg,
    rgba(166, 226, 200, 1) 0%,
    rgba(0, 170, 231, 1) 100%
  );
  filter: drop-shadow(0px 0px 20px rgba(64, 64, 64, 0.2));
  animation: fluidrotate 30s ease 0s infinite; /*アニメーションの設定*/
}

@keyframes fluidrotate {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

.recruit_icon p {
  position: absolute;
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
  line-height: 3.6rem;
  color: rgba(255, 255, 255, 1);
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*------ここまで------*/

/*------リクルート ファーストビュー ------*/

.title_box_re {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

/*------メインタイトルアクション ------*/

.h2_etc {
  position: absolute;
  font-weight: 600;
  text-align: right;
}

.h2_etc_p {
  position: relative;
  z-index: 1;
  opacity: 0;
  color: rgba(255, 255, 255, 1);
  font-size: 6.4rem;
  background: rgba(0, 170, 231, 1);
  padding: 0rem 0.8rem 0.3rem 0.8rem;
}

.h2_etc::before {
  position: absolute;
  content: "";
  background: rgba(255, 255, 255, 1);
  top: 0;
  right: 0;
  bottom: 0;
  height: 7.3rem;
}

.h2_etc._a.__anima::before {
  animation: anima_bg_5 0.9s ease-out 1 forwards;
  top: -17.2rem;
}

.h2_etc.__anima::before {
  animation: anima_bg_5 0.9s ease-out 1 forwards;
  top: -8.6rem;
}

.h2_etc._b.__anima::before {
  animation: anima_bg_5 0.9s ease-out 1 forwards;
  top: 0rem;
}

.h2_etc._a.__anima .h2_etc_p {
  animation: anima_fadein_5 0.5s ease-out 0.7s 1 forwards;
  top: -17.2rem;
}

.h2_etc.__anima .h2_etc_p {
  animation: anima_fadein_5 0.5s ease-out 0.7s 1 forwards;
  top: -8.6rem;
}

.h2_etc._b.__anima .h2_etc_p {
  animation: anima_fadein_5 0.5s ease-out 0.7s 1 forwards;
  top: 0rem;
}

.h2_etc_p._2 {
  color: rgba(0, 170, 231, 1);
  font-size: 2.4rem;
  background: rgba(255, 255, 255, 1);
}

.h2_etc._2::before {
  position: absolute;
  content: "";
  background: rgba(0, 170, 231, 1);
  height: 3.6rem;
}

.h2_etc._c.__anima::before {
  top: 8rem;
}

.h2_etc._c.__anima .h2_etc_p {
  top: 8rem;
}

.h2_etc._d.__anima::before {
  top: 12rem;
}

.h2_etc._d.__anima .h2_etc_p {
  top: 12rem;
}

.h2_etc._e.__anima::before {
  top: 16rem;
}

.h2_etc._e.__anima .h2_etc_p {
  top: 16rem;
}

/*------ここまで------*/

@keyframes anima_fadein_5 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anima_bg_5 {
  0% {
    left: 0;
    right: 100%;
  }
  40% {
    left: 0;
    right: 0;
  }
  60% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

.h2_etc span {
  font-size: 2.4rem;
  color: rgba(0, 170, 231, 1);
  background: rgba(255, 255, 255, 1);
  padding: 0.6rem 1rem;
}

/*——————————————————————
メッセージ エリア 
——————————————————————*/

.inner_words._s {
  width: 100%;
  text-align: center;
}

.messege_back {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-right: 30rem;
}

.messege_back img {
  width: 200rem;
  height: auto;
}

/*——————————————————————
KBIってどんな会社？ エリア
——————————————————————*/

.swiper-slide._b {
  width: 364px;
  height: 364px;
  transform-origin: bottom;
  transform: scale(1);
}

.swiper-wrapper._b {
  min-width: 1040px;
  margin-top: 90px;
}
.swiper-wrapper._b a {
  display: block;
}
.swiper-slide._b img {
  width: 100%;
  opacity: 0.5;
  object-fit: cover;
}

.swiper-slide._b.swiper-slide-active {
  transform: scale(1.3);
}

/* ------swiper 中央のスライド------ */
.swiper-slide._b.swiper-slide-active img {
  opacity: 1;
  transform: scale(1);
  padding: 0 20px;
  object-fit: cover;
  width: 100%;
}

.rec_swiper_2 .swiper-wrapper {
  margin-top: 60px;
}
.rec_swiper_2 .swiper-wrapper._b .swiper-slide._b {
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.rec_swiper_2 .swiper-wrapper._b .swiper-slide._b img {
  display: inline;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
}
.swiper-slide._b.swiper-slide-active img {
  margin-top: 60px;
}

/* ------中央以外のスライド------ */

.slick-img img {
  height: auto;
  opacity: 1;
  transform: scale(0.8);
  transition: opacity 0.5s, transform 0.5s;
  /*width: 100%;*/
}
/* 中央のスライド */
.manual_slider .slick-center img {
  opacity: 1;
  transform: scale(1);
}
/*------ここまで------*/

/*------ページネーション 矢印------*/

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "";
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "";
}
.swiper-button-wrap {
  width: 338px;
  height: 3.2rem;
  position: absolute;
  bottom: -0.2rem;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
}
.swiper-button-next img,
.swiper-button-prev img {
  width: 16px;
  height: 24px;
  display: inline-block;
}
/*------ここまで------*/

/*------ページネーション アイコン------*/

.swiper-pagination-fraction {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0px;
  bottom: 0px;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  width: 240px;
  position: absolute;
  z-index: 12;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: -2px;
}
.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 3rem)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 3rem)
  );
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(
    --swiper-pagination-color,
    var(--swiper-theme-color, #1c96e7)
  );
}

.swiper-pagination-current,
.swiper-pagination-total {
  display: block;
  margin: 0;
}

.swiper-pagination-bullet {
  background-color: rgba(0, 170, 231, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 2rem;
  padding: 0.2rem;
}
/*------ここまで------*/

/*——————————————————————
  KBIで働く社員 エリア
——————————————————————*/
.interview {
  justify-content: space-between;
}

.side_a {
  width: 36rem;
}

.side_main {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.4rem;
  letter-spacing: 0.2rem;
  color: rgba(0, 40, 118, 1);
}

.side_main._a {
  font-size: 1.8rem;
}

.side_main._a p {
  font-size: 1.6rem;
  font-weight: 300;
  color: rgba(62, 62, 62, 1);
}

.side_b p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-align: center;
}

.side_b_pho {
  margin: 0 auto;
  width: 20rem;
  height: auto;
}

.side_b_pho img {
  width: 100%;
  height: auto;
}

/*——————————————————————
  新卒採用情報 エリア
——————————————————————*/
.tab_area._a {
  width: 66rem;
}

ul.panels {
  clear: both;
  padding: 3% 2%;
  /*border: 1px solid #000;*/
  position: relative;
  top: -1px;
  z-index: -1;
}
ul.panels > li.area {
  display: none;
}
ul.panels > li.area.active {
  display: block;
}

.ceiter-h3._a {
  line-height: 4rem;
}

.apology {
  width: 10rem;
  margin: 0 auto;
}

.apology img {
  width: 100%;
  height: auto;
}

/*——————————————————————
————————————————————————
————————————————————————
下層 私たちの仕事 ページ
————————————————————————
————————————————————————
——————————————————————*/

/*————————————————————————
印刷
————————————————————————*/

.work_top {
  width: 100%;
  background: url(../img/introduction/work_back.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.h2-title_02 {
  text-align: center;
  margin: 0 auto;
}

.title_circle {
  width: 13.6rem;
  height: 13.6rem;
  justify-content: center;
  align-items: center;
  background: rgba(0, 40, 118, 1);
  border-radius: 999rem;
  color: rgba(255, 255, 255, 1);
  font-size: 4.8rem;
}

.number.kon {
  margin: 0 auto;
}

.job_name {
  font-weight: bold;
  text-align: center;
  display: block;
  letter-spacing: 0;
}

.job_eng {
  font-weight: bold;
  text-align: center;
  display: block;
}

.main_wo._i {
  line-height: 4rem;
}

.slid_con {
  width: 100%;
  height: 58rem;
  padding: 4rem;
  border-radius: 2rem;
  position: sticky;
  top: 10vh;
  background: rgba(255, 255, 255, 1);
  background: url(../img/introduction/work_back.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

/*スクロールで拡大用*/ /*
.bottom_area {
  height: 40vh;
}

.top_area {
  height: 40vh;
}
*/

.work_inner {
  width: 100%;
  justify-content: center;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 2rem;
}

.work_inner.center {
  align-items: center;
}

.work_text {
  width: 41.2rem;
  font-size: 1.6rem;
  line-height: 2.8rem;
  text-align: left;
}

.blank._01 {
  width: 46rem;
  height: auto;
}

.work_img {
  width: 100%;
  height: 25.4rem;
  border-radius: 2rem;
  overflow: hidden;
  margin-top: 2rem;
}

.work_illust {
  width: 31.8rem;
  height: auto;
  margin-top: 0;
}

.work_illust img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.work_illust._a {
  width: 34rem;
  margin-top: -6.5rem;
}
/*
.work_illust._b{
  bottom: 0;
  left: 8%;
}
*/
.work_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slid_con._a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.nomal_flex {
  justify-content: center;
  align-items: center;
}

.nomal_flex._01 {
  width: 46.8rem;
}

.nomal_flex._02 {
  width: 31.8rem;
}

.nomal_flex img {
  width: 100%;
  height: auto;
}

.list {
  margin: 0 auto;
  width: 80%;
  display: grid;
  place-content: center;
  row-gap: 100px;
}

.item {
  width: 100%;
  /*height: 75vh;*/
  text-align: center;
  /* アニメーションの命令 chromeのみの作動 */
  /*
    animation: fadeIn linear both;
    animation-timeline: view();
    animation-range: entry 50% cover 100%;
    */
}

/*
.item._01{
  margin-top: -52rem;
}

.item._02{
  margin-top: -6rem;
}

.item._03{
  margin-top: -2rem;
}

.item._04{
  margin-top: 4rem;
}

/* アニメーションの命令 chromeのみの作動 */
/*
@keyframes fadeIn {
  0% {
    opacity: 1;
  }

　50% {
    opacity: 1;
}
  100% {
      opacity: 0;
  }
}

.item li:first-child {
  animation: fadeIn .4s ease-in-out .2s 1 normal forwards;
}
.item li:nth-child( 2 ) {
  animation: fadeIn .4s ease-in-out .3s 1 normal forwards;
}
.item li:nth-child( 3 ) {
  animation: fadeIn .4s ease-in-out .4s 1 normal forwards;
}
.item li:nth-child( 4 ) {
  animation: fadeIn .4s ease-in-out .5s 1 normal forwards;
}
.item li:nth-child( 6 ) {
  animation: fadeIn .4s ease-in-out .6s 1 normal forwards;
}
.item li:nth-child( 7 ) {
  animation: fadeIn .4s ease-in-out .7s 1 normal forwards;
}
.item li:nth-child( 8 ) {
  animation: fadeIn .4s ease-in-out .8s 1 normal forwards;
}
.item li:nth-child( 9 ) {
  animation: fadeIn .4s ease-in-out .9s 1 normal forwards;
}
.item li:nth-child( 10 ) {
  animation: fadeIn .4s ease-in-out 1.0s 1 normal forwards;
}
.item li:nth-child( 11 ) {
  animation: fadeIn .4s ease-in-out 1.1s 1 normal forwards;
}
*/
/* ここまで */

/*——————————————————————
————————————————————————
————————————————————————
下層 制作実績 ページ
————————————————————————
————————————————————————
——————————————————————*/

.works .inBox {
  margin: 0;
}

.tab_area._a.works {
  width: 62rem;
  margin: 0 auto;
}

.tab_area.works li {
  width: calc((100% - 8rem) / 3);
}

.tab_area li {
  width: calc((100% - 8rem) / 4);
  /* background: #E2E2E2; */
  border: solid rgba(0, 40, 118, 1) 1.4px;
  border-radius: 1rem;
  text-align: center;
  transition: 0.4s;
}

ul.panels.works {
  padding: 0;
  position: static;
}

.group-item.works {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6rem;
  margin: 0 auto;
}

.group-item.works li {
  border: 1px solid rgba(26, 19, 17, 1);
  position: relative;
}

/*4列の時最後左よせ https://blog.webcreativepark.net/2016/08/15-125202.html*/
.display_flex.group-item.works::before {
  display: block;
  content: "";
  /*width: calc((100% - 6rem) / 3);*/
  width: 25.5rem;
  order: 1;
}

/*3列の時最後左よせ*/
.display_flex.group-item.works::after {
  display: block;
  content: "";
  /*width: calc((100% - 6rem) / 3);*/
  width: 25.5rem;
}

@media only screen and (max-width: 1230px) {
  .inner._07 {
    max-width: 92rem;
  }
}

@media only screen and (max-width: 915px) {
  /*2列の時*/
  .inner._07 {
    max-width: 60rem;
  }
}

.w_pict {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  width: 5.2rem;
  padding: 0.5rem 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border: 1px solid rgba(26, 19, 17, 1);
  background: rgba(255, 255, 255, 1);
  z-index: 1;
}

.calc._02 {
  width: 25.5rem;
}

.calc._02:hover .work_ph {
  opacity: 0.6;
}

.work_ph {
  width: 25.3rem;
  height: auto;
  overflow: hidden;
  transition: 0.4s;
}

.work_ph img {
  width: 100%;
  height: auto;
  transition: 0.4s;
}

.calc._02:hover .work_ph img {
  transform: scale(1.3);
}

.w_info {
  padding: 0 1rem;
  display: flex;
  flex-flow: column;
  height: 15rem;
}

.w_category {
  display: flex;
  flex-wrap: wrap;
}

.w_pict_2 {
  width: fit-content;
  height: fit-content;
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 1.2rem;
  border: 1px solid rgba(26, 19, 17, 1);
  margin-bottom: 0.7rem;
  margin-right: 0.7rem;
}

.photo_ti,
.w_conpany {
  display: -webkit-box; /* 必須 */
  -webkit-box-orient: vertical; /* 必須 */
  overflow: hidden; /* はみ出た部分を非表示 */
  text-overflow: ellipsis; /* 語尾を3点リーダーに */
}

.photo_ti {
  -webkit-line-clamp: 2; /* 行数を制限 */
  font-size: 1.6rem;
  font-weight: bold;
  color: rgba(0, 40, 118, 1);
  line-height: 2.4rem;
  transition: 0.4s;
  margin-top: auto; /*0127*/
}

.calc._02:hover .photo_ti {
  opacity: 0.6;
}

.w_conpany,
.w_date {
  -webkit-line-clamp: 1; /* 行数を制限 */
  font-size: 1.2rem;
  color: rgba(173, 173, 173, 1);
}

/*——————————————————————
————————————————————————
————————————————————————
下層 制作実績 詳細 ページ
————————————————————————
————————————————————————
——————————————————————*/
.w_conpany._under {
  font-size: 1.4rem;
}

.w_pict._under {
  position: static;
}

.title_name {
  font-size: 2.4rem;
  line-height: 3.5rem;
  letter-spacing: 0.3rem;
  color: rgba(0, 40, 118, 1);
  font-weight: bold;
}

.url_link {
  font-size: 1.6rem;
  color: rgba(36, 149, 200, 1);
}

.url_link a {
  font-size: 1.6rem;
  color: rgba(36, 149, 200, 1);
  border-bottom: 1px solid rgba(36, 149, 200, 1);
  transition: 0.4s;
}

.url_link a:hover {
  opacity: 0.6;
}

.w_img_box,
.w_img_box img {
  width: 100%;
  height: auto;
}

.w_img_box img {
  border: 1px solid #ececec;
}

.works_info {
  gap: 2rem;
}

.w_text {
  width: calc((100% - 5.2rem));
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: -0.1em 0; /*line-heightの上下の余白を消す*/
}

.w_pict_2._under {
  width: 5.2rem;
  margin: 0;
}

.w_summary {
  font-size: 1.6rem;
  line-height: 3.2rem;
}

/*——————————————————————
display: none
——————————————————————*/

/*.toggle_btn,*/
.no-section,
.abc_icon._02,
.form3,
.leads._02,
.sp-only,
.sp-only_01,
.sp-only_02,
.icon-e {
  display: none;
}