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

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Klee+One:wght@400;600&family=M+PLUS+1p&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --base-color: #FFFFFF;
  --main-color: #1c2c43;
  --content-color: #5cc0bf;
  --light-color: #eff7f9;
  --accent-color: ;
}

html {
  font-family: "Noto Sans JP","游ゴシック体","Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","Osaka", "MS Pゴシック","MS PGothic";
  font-size:min(0.694vw,62.5%);/*画面幅1440px以上で基本文字サイズ10pxに固定*/
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  font-size: 1.6rem;
  color: var(--main-color);
}

a {
  color: var(--main-color);
  text-decoration: none;
}

p {
  text-align: justify;
  line-height: 1.8;
}

/*===============================

共通部品

================================*/

.margin-lv2 {
  margin: 5rem 0;
}

.margin-lv3 {
  margin: 2rem 0 5rem 0;
}

.margin-lv4 {
  margin: 1.5rem 1rem 3rem;
}

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

.mt10 {
  margin-top: 1rem !important;
}

.mt20 {
  margin-top: 2rem !important;
}

.mt30 {
  margin-top: 3rem !important;
}

.mt40 {
  margin-top: 4rem !important;
}

.mt50 {
  margin-top: 5rem !important;
}

.mt100 {
  margin-top: 10rem !important;
}

.mt200 {
  margin-top: 20rem !important;
}

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

.mb2 {
  margin-bottom: 2rem;
}

.mb10 {
  margin-bottom: 1rem !important;
}

.mb20 {
  margin-bottom: 2rem !important;
}

.mb30 {
  margin-bottom: 3rem !important;
}

.mb40 {
  margin-bottom: 4rem !important;
}

.mb50 {
  margin-bottom: 5rem !important;
}

.mb100 {
  margin-bottom: 10rem !important;
}


/* 間隔をコントロール */

hr.hr-space-1rem {
  border: 1px solid transparent;
  margin:0 0 1rem;
}
hr.hr-space-2rem {
  border: 1px solid transparent;
  margin:0 0 2rem;
}
hr.hr-space-3rem {
  border: 1px solid transparent;
  margin:0 0 3rem;
}
hr.hr-space-4rem {
  border: 1px solid transparent;
  margin:0 0 4rem;
}
hr.hr-space-5rem {
  border: 1px solid transparent;
  margin:0 0 5rem;
}
hr.hr-space-6rem {
  border: 1px solid transparent;
  margin:0 0 6rem;
}
hr.hr-space-12rem {
  border: 1px solid transparent;
  margin:0 0 12rem;
}

hr.hr-space-20rem {
  border: 1px solid transparent;
  margin:0 0 20rem;
}

/* フォントサイズ */

.font-bold {
  font-weight: bold;
}

.f18 {
  font-size: 1.8rem;
}

.f24 {
  font-size: 2.4rem;
}

.f40 {
  font-size: 4rem;
}

/*dl*/

.block__def {
  margin: 2rem 1.6rem;
  dt {
    font-weight: bold;
  }
  dt::before {
    content:"●";
    color: var(--content-color);
  }
  dd {
    margin-left: 1em;
  }
}

/* テキストアレイン */

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

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

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

/* 装飾 */

.shaddow {
  filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.7));
}

.shaddow-white {
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.932));
}


.flex__box {
  display: flex;
  justify-content: space-around;
}

 .flex__box-4 {
  width: 40%;
 }

 .flex__box-3 {
  width: 30%;
 }

 .w960 {
  max-width: 960px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
 }
/* ボタン */

/* ---------- 矢印が右に移動する ---------- */
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
    position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
    background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
    background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}


/* ---------- きらっと光るボタン ---------- */

.btnshine{
    /*キラッと光る基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/	
    display:inline-block;
    background: #333;
    color: #fff;
    padding: 20px 40px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
.btnshine::before {
    content: '';
    /*絶対配置でキラッと光るの位置を決める*/
    position: absolute;
    top: 0;
    left: -75%;
    /*キラッと光る形状*/
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
	animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/* ----- ホバー時に左から下線が伸びるボタン（フッター） ----- */

 .border_btn02 {
  position: relative;
  display: inline-block;
  text-align: center;
  outline: none;
  border-bottom: 2px;
  line-height: .5;
}

.border_btn02:hover{
  color:var(--main-color);
  transition: .5s;
}

.border_btn02::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background:var(--main-color);
  bottom: -10px;
  transform: scale(0, 1);
  transition: transform 0.5s;
  transform-origin: left top;
}

.border_btn02:hover::after {
  transform: scale(1, 1)
}

/*===============================

header

================================*/
.header__pc {
  width: 100%;
  height: 10rem;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 1;
  backdrop-filter: blur(5px);
  background-color: #eff1f49a;
}

.header__inner {
  width: 100%;
  margin: 0 0 0 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  img {
    width: 30rem;
    height: auto;
  }
}

nav {
  ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    li {
      margin: 0 2rem;
      font-weight: bold;
    }
    a {
      transition: 0.5s;
    }
    a:hover {
    color: var(--content-color);
    transition: 0.5s;
    }
  }
}

.nav__icon {
  display: flex;
  align-items: center;
  i {
  font-size: 2.3rem;
  margin-right: .5rem;
  }
}

.nav__block-navy {
  background-color:var(--main-color);
  height: 10rem;
  width: 10rem;
  margin-right: 0;
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 4rem;
    transition: 0.5s;
  }
    a:hover {
    color:#ffffff;
    background-color: var(--content-color);
    transition: 0.5s;
    }
}


/*===============================

キービジュアル

================================*/
.KV__wap {
  position: relative;
  top: 10rem;
  width: 100%;
  background-color: var(--light-color);
}
.kV {
  width: 100%;
  margin: 0 auto;
  video {
    width: 100%;
  }
}

/*===============================

News　お知らせ一覧

================================*/

.topInfo {
  position: relative;
  top: 5rem;
  padding: 2rem;
  width: 50%;
  background-color: #ffffff;
}

.topInfo__inner {
  h3 {
    position: absolute;
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-style: normal;
    font-weight:normal;
    font-size: 8rem;
    color: var(--content-color);
    top: -6rem;
  }
  ul {
    margin: 3rem;
  }
}

.topInfo__item {
  display: flex;
  align-items: start;
  padding: 0 0 2rem 0;
}

#newsList {
  list-style: none;
  padding-left: 0;
  .title-box {
        width: 60%;
    }
}

.category__tag {
  background-color: var(--content-color);
  color: #ffffff;
  padding: .5rem 1rem;
  font-size: 1.2rem;
  margin: 0 1rem;
}
/* ---------- slogan ---------- */

.slogan {
  p {
text-align: center;
font-size: 1.8rem;
  }
}

/* ----- 背景の回転グラデーション ----- */

.gradation01 {
  position: absolute;
  top: -20rem;
  width: 80%;
  height: 100vh;
  z-index: -9999;
  margin: 0 auto;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;

  /* 回転アニメーション */
  transform-origin: 0 0;
  animation-name: rotate-item;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.item-01 {
  z-index: 3;
  animation-duration: 15s;
}

.item-02 {
  z-index: 2;
  left: 45%;
  animation-duration: 50s;
  animation-direction: reverse;
}

.item-03 {
  z-index: 4;
  top: 50%;
  left: 40%;
  animation-duration: 15s;
}

.round {
  position: relative;
  border-radius: 50%;
}

.round-01 {
  z-index: 3;
  top: 0;
  width: 18vw;
  height: 18vw;
  background: #fa9f9c81;
  filter: blur(5rem);
  animation: flash 10s linear infinite;
}

.round-02 {
  top: 50%;
  width: 18vw;
  height: 18vw;
  background-color: #f8dd6388;
  filter: blur(8rem);
  animation: flash 10s linear infinite;
}

.round-03{
  top: 0;
  left: 50%;
  width: 18vw;
  height: 18vw;
  background-color: #f8ccf6ef;
  filter: blur(9rem);
  animation: flash 10s linear infinite;
}

/* 回転アニメーション */
@keyframes rotate-item {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 点滅アニメーション */
@keyframes flash {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.5;
	}
}

.slogan {
  text-align: center;
  font-size: 4rem;
  margin: 15rem auto;
  width: 20em;
  padding: 2rem;
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
}

/*===============================

　section　築炉とは

================================*/

.section__top-100 {
  margin-top: 10rem;
  position: relative;
}

.topCikuro__inner {
  position: relative;
}

.section__block-left {
  background-color: var(--light-color);
  width: 60%;
  padding: 10rem;
  h3 {
    margin-bottom: 3rem;
    font-size: 2rem;
  }
  p {
    margin-bottom: 1.6rem;
  }
}

.section__block-left > div {
  width: 70%;
}

.section__block-right {
  background-color: var(--light-color);
  width: 40%;
  padding: 10rem;
  right: 0;
}

.section__img-right {
  max-width: 80rem;
  position: absolute;
  height: auto;
  top: 5rem;
  right: 0;

}

.section__img-left {
  max-width: 80rem;
  height: auto;
  top: -5rem;
  left: 0;
}

.topRight__btn {
  text-align: right;
  margin-top: 3rem;
}

.topSlogan {
  text-align: center;
  font-size: 3rem;
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
}

/*===============================

　section　私たちのこと

================================*/

/* ---------- top__gallery ---------- */

.top__gallery{
  columns: 4;/*段組みの数*/
  padding:0 1.5rem;/*ギャラリー左右に余白をつける*/
  margin:0;
}

.top__gallery li {
  margin-bottom: 1.5rem;/*各画像下に余白をつける*/
  list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.top__gallery img {
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.top__gallery{
	columns:3;
	}	
}

@media only screen and (max-width: 768px) {
	.top__gallery{
	columns: 2;
	}	
}

/*===============================

　section　top　sdgs

================================*/

.topSdgs__inner {
  max-width: 108rem;
  margin: 10rem auto;
}

.top__title {
  margin-bottom: 5rem;
  h3 {
    font-size: 4rem;
    span {
      color: var(--content-color);
      font-family:"Caveat", cursive;
      display: block;
      font-size: 3rem;
      font-weight: normal;
    }
  }
}

.sdgs__logo {
  max-width: 60rem;
  margin: 2rem auto;
}

.topSdgs__text {
  h4 {
    font-size: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--content-color);
  }
  p {
    margin: 0 1.6rem 1.6rem 1.6rem;
  }
}

.text__link {
  text-align: center;
  a{
  text-decoration: underline;
  }
}
/*===============================

　section　リクルート

================================*/

.top__recruit {
  width: 100%;
  background-color: var(--light-color);
  height: 55rem;
  display: flex;
  align-items: center;
  margin-top: 20rem;

  h3 {
    line-height: 1.1;
    span {
      font-family: "Caveat", cursive;
      font-weight: normal;
      font-size: 8rem;
      color: var(--content-color);
      display: block;
    }
  }
}

.topRecruit__inner {
  width: 108rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recruit__banner {
  max-width: 60%;
  p{
    font-weight: bold;
    background-image: linear-gradient(120deg, #fdeed7, #5cc0bf);
    padding: 1rem;
  }
}

/* ----- zoomボックス ----- */

.image_link {
  overflow: hidden;
}
.image_link img {
  display:block;
  width:100%;
  transition:0.3s;
}

.image_link a:hover:after{
  width:100%;
}
.image_link:hover figure{
  border-radius: 10px;
  overflow: hidden;
}

.image_link:hover img{
  transform:scale(1.04);
  transition:0.3s;
}

/*===============================

各ページ

================================*/

/* ---------- トップイメージ --------- */
.topImg__wap {
  position: relative;
  top: 10rem;
  width: 100%;
  background-color: var(--light-color);
}
.topImg {
  width: 100%;
  margin: 0 auto;
  height: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
  video {
    width: 100%;
  }
}

/**/
.bg-image-02 {
  background-image: url("../images/works06.png");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}

.bg-image-03 {
  background-image: url("../images/works02.jpg");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}

.bg-image-04 {
  background-image: url("../images/works03.jpg");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}

.topImg__inner {
  text-align: center;
  color: #ffffff;
}

.content__title {
  margin-bottom: 5rem;
  /*text-align: center*/
  h3 {
    font-size: 4rem;
    span {
      color: var(--content-color);
      font-family:"Caveat", cursive;
      display: block;
      font-size: 3rem;
      font-weight: normal;
    }
  }
}

.youtube {
  max-width: 56rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
/*===============================

　section

================================*/

.content__inner {
  max-width: 108rem;
  margin: 10rem auto;
}

.content__text {
  h4 {
    font-size: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--content-color);
  }

  h5 {
    font-size: 1.8rem;
    margin-bottom: 1.8rem;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #7db4e6;/*左線*/
  }

  h6 {
    font-size: 1.6rem;
    padding-bottom: 1rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--main-color);
  }
  p {
    margin: 0 0 1.6rem 0;
  }
}

.results__list {
  display: flex;
  list-style: none;
  padding-left: 0;
  flex-wrap: wrap;
}

.results__item-20 {
    width: 20%;
    margin-bottom: 2rem;
}

.results__item-30 {
    width: 33%;
    margin-bottom: 2rem;
}

/*////////table/////////*/
table.table-company {
	border-collapse: collapse;
	width: 100%;
}
table.table-company th {
	vertical-align: top;
	padding: 1.8rem;
	text-align: left;
	background-color:none;
	border-bottom-width: 1px;
	border: solid 1px #bbb;
	width: 21rem;
}
table.table-company td {
	vertical-align: top;
	padding: 1.8rem;
	text-align: left;
	background-color:none;
	border: solid 1px #bbb;
}

table.table-matrix {
  border-collapse:collapse;
	width: 100%;
}
table.table-matrix tr:nth-child(2n+1) {
  background-color: #EBEBEB;
}

table.table-detail {
  border-collapse:collapse;
	width: 100%;
}
table.table-detail th {
	vertical-align: top;
	padding: 1.8rem;
	text-align: left;
	background-color:none;
	border: solid 1px #bbb;
}
table.table-detail td {
	vertical-align: top;
	padding: 1.8rem;
	text-align: left;
	background-color:none;
	border: solid 1px #bbb;
}
table.table-smile {
	border-collapse:collapse;
	width: 100%;
}
table.table-smile th {
	vertical-align: top;
	padding: 1.8rem;
	text-align: left;
	background-color:none;
	border: solid 1px #bbb;
}
table.table-smile td {
	vertical-align: top;
	padding: 1.8rem;
	text-align: left;
	background-color:none;
	border: solid 1px #bbb;
}
table.table-sch {
	border-collapse:collapse;
	width: 100%;
  margin-bottom:10px;
}
table.table-sch th {
	vertical-align: top;
	padding: 1rem;
	text-align: center;
	background-color:none;
	border: solid 1px #bbb;
}
table.table-sch td {
	vertical-align: top;
	padding: 1rem;
	text-align: center;
	background-color:none;
  color:#fff;
	border: solid 1px #bbb;
}
table.table-noborder {
	border-collapse: collapse;
}
table.table-noborder td {
	vertical-align: top;
	padding: 0 0 0.3em 0;
	border: none;
	background-color: transparent;
}

/*////////--table/////////*/

/*===============================

footer

================================*/
.new__footer {
  width: 100%;
  /*background-color: var(--content-color);*/
  background-image: linear-gradient(120deg, #fdeed7, #5cc0bf);
}
.footerInner {
  max-width: 129rem;
  margin: 0 auto;
  padding: 10rem 0;
  display: flex;
  justify-content: space-between;
}

.footer_add {
  h3 {
    margin-bottom: 1rem;
  span {
    font-size: 1.2rem;
    display: block;
  }
}
  p {
    line-height: auto;
  }
  ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    margin-top: 2rem;
    li {
      margin-right: 1rem;
    }

  }
}

.footer__menu {
  width: 40%;
list-style: none;
padding-left: 0;
display: flex;
justify-content: space-between;
li {
  margin: 0 2rem;
}
}

.copyright {
  text-align: center;
  background-color: var(--main-color);
  color: #ffffff;
}


/*===============================

PCのスタイル(1281px以上)

================================*/


.only-pc {
	display: block;
}
.only-mobile {
	display:none;
}
.only-pc-inline {
	display: inline;
}
.only-mobile-inline {
	display:none;
}


#menu-btn-check {
    display: none;
}

/*===============================

タブレットのスタイル(1281px以下)

================================*/

@media screen and (max-width: 1280px) {
.kV__slide {
  height: 60vh;
}
}

/*===============================

スマートフォンのスタイル(430px以下)

================================*/

@media screen and (max-width: 430px) {

  html {
    font-size:min(2vw,62.5%);
  }

  body {
    font-size: 1.8rem;
  }

  .only-pc {
    display: none;
  }
  .only-mobile {
    display: block;
  }

  .only-pc-inline {
    display:none;
  }
  .only-mobile-inline {
    display:inline;
  }

  .margin-lv2 {
    margin: 5rem 0;
  }

  .margin-lv3 {
    margin: 1rem 0 5rem 0;
  }

  .margin-lv4 {
    margin: 2rem 0 4rem 0;
  }

  .w1000 {
    width: 100%;
  }

/*===============================

header(モバイル)

================================*/

  header.only-pc {
    display: none;
  }

/*===============================
ハンバーガーメニュー
================================*/
  .menu-btn {
      position: fixed;
      top: 10px;
      right: 10px;
      display: flex;
      height: 60px;
      width: 60px;
      justify-content: center;
      align-items: center;
      z-index: 90;
      background-color: var(--content-color);
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
      content: '';
      display: block;
      height: 3px;
      width: 25px;
      border-radius: 3px;
      background-color: #ffffff;
      position: absolute;
  }
  .menu-btn span:before {
      bottom: 8px;
  }
  .menu-btn span:after {
      top: 8px;
  }

  /* ボタンがタップされたとき三本線を×にする */

  #menu-btn-check:checked ~ .menu-btn span {
      background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
  }
  #menu-btn-check:checked ~ .menu-btn span::before {
      bottom: 0;
      transform: rotate(45deg);
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
      top: 0;
      transform: rotate(-45deg);
  }

  /* メニューの装飾 */

  .menu-content {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 80;
      background-color: var(--content-color);
  }
  .menu-content ul {
      padding: 70px 10px 0;
  }
  .menu-content ul li {
      border-bottom: solid 1px var(--light-color);
      list-style: none;
  }
  .menu-content ul li a {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 15px;
      box-sizing: border-box;
      color:#ffffff;
      text-decoration: none;
      padding: 9px 15px 10px 0;
      position: relative;
      img {
        margin-right:1rem;
      }
  }
  .menu-content ul li a::before {
      content: "";
      width: 7px;
      height: 7px;
      border-top: solid 1px var(--base-color);
      border-right: solid 1px var(--base-color);
      transform: rotate(45deg);
      position: absolute;
      right: 11px;
      top: 16px;
  }

  .menu-content {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 100%;/*leftの値を変更してメニューを画面外へ*/
      z-index: 80;
      background-color: var(--content-color);
      transition: all 0.5s;/*アニメーション設定*/
  }

  #menu-btn-check:checked ~ .menu-content {
      left: 0;/*メニューを画面内へ*/
  }

/*===============================

キービジュアル(モバイル)

================================*/

/*===============================

News　お知らせ一覧

================================*/

  .topInfo {
    width: 100%;
  }

  .topInfo__inner {
    ul {
      margin: 3rem 0;
    }
  }

  .topInfo__item {
    display: block;
    padding: 1rem;
}

  #newsList {
        .title-box {
            width: 100%;
            margin: 1rem 0;
        }
    }
/*===============================

section

================================*/

  .section__block-left {
    width: 100%;
    padding: 2rem;
  }

  .section__img-right {
      position: relative;
      height: auto;
      top: auto;
      right: auto;
  }

  .section__block-left > div {
      width: 100%;
  }

  .top__title {
    h3 {
      font-size: 3.5rem;
    }
  }


  .topRight__btn {
    text-align: center;
  }

  .topSdgs__inner {
    margin: 3rem 2rem;
  }

  .topRecruit__inner {
    display: block;
    width: 100%;
    padding: 2rem;
  }

  .top__recruit {
    margin-top: 10rem;
    h3 {
      text-align: center;
    }
  }

  .recruit__banner {
    max-width: 100%;
    margin: 2rem auto;
  }

  /*===============================

各ページ

================================*/

/* ---------- トップイメージ --------- */
.topImg__wap {
  top: 0;
  padding: 10rem 0 0 0;
}

.topImg {
  height: 60vw;
}

.content__inner {
    margin: 3rem 2rem;
  }

.results__item-20 {
    width: 50%;
}

.results__item-30 {
    width: 100%;
}

.flex__box {
  display: block;
  figure {
    margin-bottom: 2rem;
  }
}

.flex__box-2,
.flex__box-3,
.flex__box-4 {
  width: 100%;
}

.w960 {
  padding: 0 2rem;
}

.slogan {
  margin: 5rem auto;
  width: 100%;
}

.gradation01 {
    top: -50rem;
    width: 100%;
}

/* ---------- テーブル ---------- */
table.table-company th {
    background-color: #efefef;
    border-bottom-width: 1px;
    border: none;
    display: block;
    width: 100%;
}

table.table-company td {
    border: none;
    display: block;
    width: 100%;
}
/*===============================

footer

================================*/

  .footerInner {
    padding: 5rem 0;
    display: block;
    text-align: center;
  }

  .footer__menu {
    display: none;
    /*width: 100%;
    margin: 2rem auto;
    justify-content: space-around;*/
  }
  .footer_add {
    p {
    text-align: center;
    }
    ul {
      justify-content: space-between;
      width: 8rem;
      margin: 2rem auto;
      li {
        margin-right: 0;
      }
    }
      .nav__icon {
    i {
        margin-right: 0;
    }
}

  }
}