@charset "utf-8";
/* ----共通----*/
html {
  font-size: 100%;
  position: relative;
}
body {
  font-family: "游ゴシック", "Yu Gothic", YuGothic, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 16px;
  letter-spacing: 0.05em;
  margin-bottom: 400px;
}
/* ----調整用----*/
a {
  text-decoration: none;
}
a:focus {
  outline: revert;
}
button:focus {
  outline: revert;
}
input:focus {
  outline: revert;
}
ul, li {
  list-style: none;
}
img {
  max-width: 100%;
}
.main {
  margin: auto;
}
/* ========== 共通 ========== */
/* ヘッダー */
.logo {
  width: 160px;
  margin-top: 10px;
  margin-left: 10px;
  opacity: 0;
}
.logologo {
  width: 160px;
  margin-top: 10px;
  margin-left: 10px;
  position: relative; /* 位置指定 */
  z-index: 10;
  animation: fadeIn 2s;
}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0
  }
  65% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.page-header {
  display: flex; /* ロゴとハンバーガーメニューを横に並べる */
  position: fixed; /* スクロールしてもヘッダーを追従 */
  justify-content: space-between; /* 両端に設置 */
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 999; /* 表示順を上に */
  color: #FFFFFF;
}



/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: rgba(0, 0, 0, 0.53); /*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
  transition: ease .4s; /*ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延*/
}
.active {
  /* 3. メニューを定位置へ戻す */
  transform: translate(0);
}
.nav-items {
  padding: 0;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ナビのリンク */
.nav-items__item a {
  color: #FFFFFF;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 16px;
  margin-top: 20px; /* メニュー間の余白を調整 */
}
.nav-items__item:last-child a {
  margin-bottom: 0; /* 下余白は不要なため打ち消し */
}
/* ハンバーガーメニュー */
.header__hamburger {
  width: 20px;
  height: 100%;
  margin-top: 1px;
  margin-right: 15px;
}
.hamburger {
  background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  z-index: 9999;
}
/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 4px;
  background-color: #000000;
  position: relative;
  transition: ease .4s;
  display: block;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  margin: 5px 0;
}
.hamburger span:nth-child(3) {
  top: 0;
}
/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
  background-color: #FFFFFF;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
  background-color: #FFFFFF;
}
/* ========== トップページ ========== */
#contents {
  background-color: #FFFFFF;
  padding-top: 90px;
}
#content01_bg {
  animation: fadein 1.5s ease-out forwards;
}
@keyframes fadein {
  0% {
    opacity: 0
  }
  40% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
/* スクロールで背景が変わる */
.background {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  position: fixed;
  background-position: center;
  opacity: 0;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-transition: all 4s ease 0s;
  -moz-transition: all 4s ease 0s;
  transition: all 4s ease 0s;
}
.show .background {
  opacity: 1;
}
.contents .wrap {
  position: relative;
  z-index: 2;
}
/* design */
#content01_bg {
  background-image: url("../img/Room_morning2023.webp");
}
#content02_bg {
  background-image: url("../img/room_wire_2023_2.webp");
}
/* ----スナップテスト---- */
/* ----見出し---- */
.main-vivopix {
  width: 240px;
  margin: 0 auto;
  visibility: visible;
  transition: opacity 1s, visibility 1s, transform 2s;
  animation: appearance 8s 1s 1 forwards;
  -webkit-animation: appearance 8s 1s 1 forwards;
  -moz-animation: appearance 8s 1s 1 forwards;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 0;
  visibility: hidden;
}
.home-content {
  text-align: center;
  margin-top: 150px;
  margin-right: 50px;
  margin-bottom: 250px;
  margin-left: 50px;
}
/* ----スクロールと矢印---- */
.scroll {
  text-align: center;
  color: #F0F0F0;
  padding-top: 230px;
  padding-bottom: 5px;
}
.arrow-bottom {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid #F0F0F0;
  border-right: 2px solid #F0F0F0;
  transform: rotate(45deg);
}
.top_works {
  background-color: rgba(255, 255, 255, 0.87);
  padding-bottom: 330px;
}
.containar1 {
  margin-top: 20px;
}
.top_philosophy {
  margin-top: 20px;
  margin-bottom: 240px;
  font-size: 30px;
  line-height: 50px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-shadow: 0px 0px 0px #000000;
  color: #FFFFFF
}
/*==================================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}
.title1 h2 {
  font-family: 'Poppins', sans-serif;
  padding-top: 60px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.05em;
  color: #0D0D0D
}
.title1 p {
  text-align: center;
  font-size: 14px;
  color: #000000;
  padding-bottom: 40px;
}
.list li {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.topcategory h3 {
  padding-top: 40px;
  margin-left: 25px;
  margin-right: 25px;
  font-size: 20px;
  text-align: center;
}
.topcategory p {
  text-align: center;
  margin-left: 25px;
  margin-right: 25px;
  font-size: 14px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.character {
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.character img {
  transition: transform 0.5s;
}
.character img:hover {
  transform: scale(1.07);
}
.character a:focus-visible img {
  outline: 3px solid #000000;
  outline-offset: -3px; /* 内側にずらす */
}
.industry {
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.industry img {
  transition: transform 0.5s;
}
.industry img:hover {
  transform: scale(1.07);
}
.industry a:focus-visible img {
  outline: 3px solid #000000;
  outline-offset: -3px; /* 内側にずらす */
}
.organic {
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.organic img {
  transition: transform 0.5s;
}
.organic img:hover {
  transform: scale(1.07);
}
.organic a:focus-visible img {
  outline: 3px solid #000000;
  outline-offset: -3px; /* 内側にずらす */
}
.moviebtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:
    80px;
}
button h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.05em;
}
.top_morebox {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.top_more {
  width: 150px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.82);
  border: solid 1px;
  border-color: #B9B9B9;
  text-align: center;
  line-height: 50px;
  margin: 20px 0 0 auto;
}
.top_more:hover {
  background: #464646;
  color: #FFFFFF;
}
.top_more a {
  padding-left: 30px;
  padding-right: 30px;
  color: #464646;
}
.top_more a:hover {
  color: #FFFFFF;
}
/* ========== フッター ========== */
footer {
  position: absolute;
  background-color: #181619;
  bottom: 0;
  width: 100%;
  z-index: 2;
  height: 650px;
}
.wrapp {
  height: 580px;
  padding-top: 20px;
}
.sitemap {
  margin: 0 0 0 10px;
  padding-top: 14px;
}
.sitemap h4 a {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}
.sitemap h4 {
  margin-bottom: 6px;
}
.sitemap ul li {
  font-size: 13px;
  margin-top: 6px;
}
.sitemap ul li a {
  font-size: 12px;
  color: #D0CDD1
}
.space {
  margin-top: 10px;
}
.company {
  text-align: center;
  background-color: #000000;
}
.footerrogo {
  margin-top: 30px;
  padding-top: 10px;
}
.copyright p {
  color: #BFBFBF;
  font-size: 12px;
  width: auto;
  padding-bottom: 20px;
}
/* ========== ワークスページ ========== */
.title-works {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-works h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-works p {
  font-size: 12px;
  margin-top: 14px;
  margin-left: 4px;
}
.category {
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px
}
.category_sub {
  font-size: 16px;
  margin-top: 2px;
  color: #7E7E7E;
  font-weight: 800;
}
.category p {
  font-size: 12px;
  margin-left: 0;
  margin-bottom: 20px;
}
.contents-works {
  width: auto;
  height: auto;
  position: relative;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider { /*横幅92%で左右に余白を持たせて中央寄せ*/
  width: 92%;
  margin: 0 auto;
}
.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 6px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 45%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  border-top: 3px solid #666; /*矢印の色*/
  border-right: 3px solid #666; /*矢印の色*/
  height: 20px;
  width: 20px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -2%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -2%;
  transform: rotate(45deg);
}
.slider-controls {
  text-align: center;
  margin-top: 10px;
}
.slider-controls button {
  background-color: #888888; /* グレー背景 */
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 丸型 */
  position: relative;
  padding: 0;
  transition: background-color 0.3s;
}
.slider-controls button:hover {
  background-color: #bbb;
}
/* ▶ 再生（矢印） */
.play-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 18px;
  height: 18px;
  margin: auto;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}
/* ‖ 一時停止（縦棒2本） */
.pause-btn::before, .pause-btn::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 4px;
  height: 20px;
  background-color: #FFFFFF;
  border-radius: 1px;
}
.pause-btn::before {
  left: 12px;
}
.pause-btn::after {
  right: 12px;
}
.category h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  color: #575757;
  padding-bottom: 0px;
}
.past_results {
  margin-top: 20px;
  margin-left: 15px;
}
.resurts_container {
  margin-left: 6px;
  margin-right: 18px;
  padding-top: 26px;
  padding-bottom: 20px;
}
.resurts_abouts_a b {
  font-size: 12px;
}
.resurts_abouts_b b {
  font-size: 12px;
}
.resurts_abouts_a p {
  font-size: 12px;
}
.resurts_abouts_b p {
  font-size: 12px;
}
.resurts_container hr {
  margin-bottom: 18px;
}
.past_results h3 {
  padding-top: 20px;
  font-size: 14px;
  color: #7A7A7A;
}
.resurts_abouts_a h4 {
  font-size: 18px;
}
.resurts_abouts_b h4 {
  font-size: 18px;
}
.results_img_a {
  margin-top: 10px;
}
.results_img_b {
  margin-top: 10px;
}
.client {
  color: #000000;
  font-size: 14px;
  width: auto;
  padding-bottom: 10px;
}
#character, #industry {
  padding-bottom: 70px;
}
#industry {
  background-color: #EDEDED
}
#organic {
  padding-bottom: 320px;
}
/* ========== アバウトページ ========== */
/* 以下は検証用のレイアウトのための CSS*/
nav ul {
  list-style: none;
}
nav ul li {
  margin: 7px
}
nav ul a li {
  text-decoration: none;
  color: #4B4B4B;
  padding: 9px 9px 9px 0;
}
section {
  padding: 0;
}
.title-about {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-about h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-about p {
  font-size: 12px;
  margin-top: 14px;
  margin-left: 4px;
}
#sub-area {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 10px;
}
#g-navi li {
  font-size: 12px;
  text-align: center;
}
.about_contents {
  margin-right: 20px;
  padding-top: 5px;
  margin-left: 0px;
  border-bottom: 1px dotted #8C8C8C;
  transition: all 0.3s ease;
}
.about_contents:hover {
  color: #949494;
}
.vision h3 {
  border-left: 5px solid #DDDDDD;
  padding: 0px 6px;
  margin-top: 12px;
  margin-left: 10px;
  color: #000000;
  font-size: 18px;
  line-height: 1em;
}
.grayline {
  border: none;
  height: 4px;
  width: 60px;
  background: #E4E4E4;
  margin-bottom: 8px;
  margin-top: 8px;
}
.vision h4 {
  color: #000000;
  font-size: 28px;
  padding-top: 30px;
  padding-bottom: 50px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
.aboutA h3 {
  border-left: 5px solid #DDDDDD;
  padding: 0px 6px;
  margin-top: 60px;
  color: #000000;
  font-size: 18px;
  line-height: 1em;
}
.aboutA p {
  margin-top: 10px;
  color: #000000;
}
.aboutA {
  margin-left: 10px;
}
.message p {
  font-size: 12px;
  padding-left: 13px;
  padding-right: 15px;
}
.aboutB h3 {
  border-left: 5px solid #DDDDDD;
  padding: 0px 6px;
  margin-top: 60px;
  color: #000000;
  font-size: 18px;
  line-height: 1em;
}
.aboutB {
  margin-left: 10px;
}
.overview {
  padding-left: 13px;
  margin-top: 20px;
}
.aboutC h3 {
  border-left: 5px solid #DDDDDD;
  padding: 0px 6px;
  margin-top: 60px;
  color: #000000;
  font-size: 18px;
  line-height: 1em;
}
.aboutC {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 320px;
}
.aboutC p {
  font-size: 12px;
}
.aboutD h3 {
  border-left: 5px solid #DDDDDD;
  padding: 0px 6px;
  margin-top: 60px;
  color: #000000;
  font-size: 18px;
  line-height: 1em;
}
.aboutD {
  margin-left: 10px;
}
.aboutD p {
  font-size: 12px;
}
.achv {
  margin-top: 18px;
  padding-left: 13px;
}
.aboutdt {
  font-size: 12px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-weight: 600;
}
.aboutdd {
  font-size: 12px;
  padding-top: 0px;
  padding-bottom: 30px;
}
.aboutdtlast {
  padding-top: 0px;
  padding-bottom: 0px;
  font-weight: 600;
}
.containar2 {
  margin-top: 18px;
  padding-left: 13px;
}
.president_photo {
  width: 300px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}
.office1 {
  margin-left: auto;
  margin-right: auto;
  padding-right: 22px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.map {
  margin-top: 18px;
  padding-left: 13px;
  padding-right: 13px;
}
#area-1, #area-2, #area-3, #area-4, #area-5, #area-6, #area-7 {
  padding-top: 6px;
}
/* ========== リクルートページ ========== */
.title-recruit {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-recruit h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-recruit p {
  font-size: 12px;
  margin-top: 14px;
  margin-left: 4px;
}
.title-sub {
  margin-left: 20px;
}
.recruitA p {
  font-size: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  color: #6A6A6A
}
.recruitB {
  margin-bottom: 50px;
}
.recruitB h3 {
  margin-left: 10px;
  margin-top: 70px;
  margin-bottom: 14px;
  font-size: 22px;
  color: #000000
}
.recruitB p {
  font-size: 12px;
}
.recruitform {
  padding-bottom: 300px;
}
.recruitdt {
  position: relative;
  float: left;
  width: 30%;
  height: 90px;
  padding-left: 10px;
  background-color: rgba(213, 213, 213, 1.00);
  color: rgba(0, 0, 0, 1.00);
  border-bottom: 2px solid #FFFFFF;
}
.recruitdt3 {
  position: relative;
  float: left;
  width: 30%;
  height: 120px;
  padding-left: 10px;
  background-color: rgba(213, 213, 213, 1.00);
  color: rgba(0, 0, 0, 1.00);
  border-bottom: 2px solid #FFFFFF;
}
.recruitdt2 {
  position: relative;
  float: left;
  width: 30%;
  height: 200px;
  padding-left: 10px;
  background-color: rgba(213, 213, 213, 1.00);
  color: rgba(0, 0, 0, 1.00);
  border-bottom: 2px solid #FFFFFF;
}
.recruitdt p {
  font-size: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}
.recruitdt2 p {
  font-size: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}
.recruitdt3 p {
  font-size: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}
.recruitdd {
  height: 90px;
  padding-left: 30%;
  background-color: #F8F8F8;
  border-bottom: 2px solid #FFFFFF;
  margin-left: 2%;
}
.recruitdd2 {
  height: 200px;
  padding-left: 30%;
  background-color: #F8F8F8;
  border-bottom: 2px solid #FFFFFF;
  margin-left: 2%;
}
.recruitdd3 {
  height: 120px;
  padding-left: 30%;
  background-color: #F8F8F8;
  border-bottom: 2px solid #FFFFFF;
  margin-left: 2%;
}
.recruitddp1 {
  padding-top: 10px;
  padding-right: 5px;
  line-height: 24px;
}
.recruitddp2 {
  padding-top: 28px;
  padding-right: 5px;
  line-height: 24px;
}
.recruitddp3 {
  padding-top: 8px;
  padding-right: 5px;
  line-height: 24px;
}
.recruitddp4 {
  padding-top: 28px;
  padding-right: 5px;
}
.recruitddp5 {
  padding-top: 8px;
  padding-right: 5px;
  line-height: 18px;
}
.recruitC p {
  font-size: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  color: #6A6A6A
}
.recruitform_button {
  width: 300px;
  height: 70px;
  background-color: #FF4343;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 23px 0;
}
.recruitform_button:hover {
  background-color: #FF797A;
}
.recruitform_button a {
  font-size: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 116px;
  padding-right: 116px;
  color: #FFFFFF;
}
.recruitslider {
  max-width: 300px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  display: flex;
  gap: 15px;
  overflow-x: auto;
  border: 1px solid #c0c0c0;
}
.agreement {
  font-size: 10px;
  margin-top: 10px;
  margin-left: 6px;
  margin-bottom: 10px;
  margin-right: 6px;
}
/* ========== コンタクトページ ========== */
.title-contact {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-contact h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-contact p {
  font-size: 12px;
  margin-top: 14px;
  margin-left: 4px;
}
.contactA {
  padding-top: 20px;
  padding-bottom: 22px
}
.contactA p {
  font-size: 12px;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 2
}
.contact_form h3 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  width: 300px;
}
.contact {
  padding-top: 2px;
  padding-bottom: 18px
}
.contact p {
  font-size: 12px;
  margin-top: 2px;
  margin-left: 1px;
}
.title-sub {
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
}
.required {
  color: #FF0004;
  font-size: 12px
}
form p {
  font-size: 12px;
  margin-top: 3px
}
label {
  margin-right: 10px;
}
input, textarea {
  box-sizing: border-box;
  width: 100%;
}
input[type="text"] {
  margin-top: 7px;
  margin-bottom: 10px;
  padding: 0.4em;
  border: 1px solid #6C6C6C;
  background-color: #FFFFFF
}
input[type="email"] {
  margin-top: 7px;
  margin-bottom: 10px;
  padding: 0.4em;
  border: 1px solid #6C6C6C;
  background-color: #FFFFFF
}
input[type="tel"] {
  margin-top: 7px;
  margin-bottom: 10px;
  padding: 0.4em;
  border: 1px solid #6C6C6C;
  background-color: #FFFFFF
}
textarea {
  margin-top: 7px;
  padding: 0.7em;
  width: 100%;
  height: 150px;
  border: 1px solid #6C6C6C;
  background-color: #FFFFFF
}
input[type="submit"] {
  border: none;
  background-color: #7E7E7E;
  width: 300px;
  height: 70px;
  font-size: 12px;
  color: rgba(255, 255, 255, 1.00)
}
input[type="submit"]:hover {
  background-color: #9C9C9C;
}
form {
  margin-left: auto;
  margin-right: auto;
}
.submit p {
  margin-top: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.contact_form {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 280px;
}
/* ========== サンキューページ ========== */
.contactB {
  padding-top: 30px;
  padding-bottom: 300px
}
.thanks {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  font-size: 12px;
}
.back {
  border: none;
  background-color: #7E7E7E;
  width: 300px;
  height: 70px;
  font-size: 12px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 1.00);
  padding: 22px 0;
}
.back:hover {
  background-color: #9C9C9C;
}
/* ========== エントリーページ ========== */
.title-entry {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-entry h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-entry p {
  font-size: 12px;
  margin-top: 14px;
  margin-left: 4px;
}
.entry {
  padding-top: 15px;
  padding-bottom: 18px
}
.entry p {
  font-size: 12px;
  margin-top: 10px;
  margin-left: 10px;
}
.entryA {
  padding-top: 20px;
  padding-bottom: 18px
}
.entry_form {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 280px;
}
/* ========== プライバシーポリシー ========== */
.title-policy {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-policy h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-policy p {
  font-size: 11px;
  margin-top: 14px;
  margin-left: 4px;
}
.policy {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 300px;
}
.policy h3 {
  font-size: 14px;
}
.policy p {
  font-size: 12px;
}
/* ========== サイトポリシー ========== */
.title-sitepolicy {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  margin-left: 10px;
}
.title-sitepolicy h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  color: #000000;
  letter-spacing: 0.05em;
}
.title-sitepolicy p {
  font-size: 12px;
  margin-top: 14px;
  margin-left: 4px;
}
.sitepolicy {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 300px;
}
/* ---ipadサイズ---- */
@media screen and (min-width: 768px) {
  /* ========== 共通 ========== */
  /* ヘッダーのロゴ部分 */

	
  .logo {
    width: 180px;
    margin-left: 20px;
    margin-top: 30px;
  }
  .logologo {
    width: 180px;
    margin-top: 30px;
    margin-left: 20px;
    position: relative; /* 位置指定 */
    z-index: 10;
    animation: fadeIn 2s;
  }
  /** ヘッダーのナビ部分 */
  .header__nav {
    left: auto;
    width: 130px;
    height: 340px;
  }
  /* ハンバーガーメニュー */
  .header__hamburger {
    width: 24px;
    height: 100%;
    margin-top: 2px;
    margin-right: 30px;
  }
  .page-header {
    height: 80px;
  }
  /* ========== トップページ ========== */
  #contents {
    padding-top: 330px;
  }
  /* ----見出し----c */
  .main-vivopix {
    width: 600px;
    padding: 0 auto;
  }
  @keyframes appearance {
    0% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes appearance {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  @-moz-keyframes appearance {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  .home-content {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 200px;
  }
  .top_philosophy {
    margin-top: 380px;
    margin-bottom: 410px;
    font-size: 48px;
    line-height: 90px;
    text-shadow: 0px 0px 0px #000000;
  }
  /** コンテンツの縦間隔 */
  .scroll {
    padding-top: 350px;
  }
  /** boxを横並びに */
  .box1 {}
  .fadeUpTrigger {}
  .top_works {
    padding-bottom: 50px;
  }
  .containar1 {
    display: flex;
    justify-content: center;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
  .title1 h2 {
    padding-top: 140px;
    font-size: 50px;
    margin-bottom: 50px;
  }
  .title1 p {
    font-size: 16px;
    padding-bottom: 24px;
  }
  .box2 {
    height: 1000px;
  }
  .topcategory h3 {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 25px;
    width: 768px;
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;
  }
  .topcategory p {
    width: 768px;
    padding-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
  .list li {
    margin: 5px;
    width: 32%;
    height: 32%;
    list-style-type: none;
    float: left;
  }
  .top_morebox {
    margin-top: 30px;
    max-width: 763px;
    margin-left: auto;
    margin-right: auto;
  }
  .top_more {
    width: 200px;
    height: 50px;
    margin: 20px 0 0 auto;
  }
  .top_more a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 77px;
    padding-right: 77px;
  }
  /* ========== フッター ========== */
  footer {
    height: 400px;
  }
  .wrapp {
    height: 300px;
    padding-left: 60px;
    display: flex;
    max-width: 768px;
    margin-right: auto;
    margin-left: auto;
  }
  .sitemap {
    padding-top: 30px;
    width: 25%;
  }
  .sitemap h4 {
    margin-bottom: 24px;
  }
  .sitemap ul li a {
    font-size: 14px;
    color: #D0CDD1
  }
  /* ========== ワークスページ ========== */
  .title-works {
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-works h2 {
    font-size: 44px;
  }
  .title-works p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .category {
    padding-top: 30px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 4px;
  }
  .slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    padding-bottom: 30px;
    width: 768px;
  }
  .category_title {
    display: flex;
  }
  .category h3 {
    font-size: 32px;
    margin-top: 60px;
    padding-bottom: 0px;
  }
  .category_sub {
    font-size: 16px;
    font-weight: 500;
    margin-top: 77px;
    margin-bottom: 0;
    padding-left: 14px;
  }
  .category p {
    font-size: 16px;
    margin-left: 0;
    margin-bottom: 40px;
  }
  .contents-works {
    width: 32%;
    height: auto;
    margin: 5px;
  }
  .contents-works img {
    width: 100%;
    height: auto;
  }
  .past_results {
    margin-left: 15px;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
  .resurts_container {
    display: flex;
    margin-left: 10px;
    margin-right: 6px;
    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: space-between;
  }
  .resurts_abouts_a {
    width: 52%;
    position: relative;
    margin-bottom: 3px;
  }
  .resurts_abouts_b {
    width: 33%;
    position: relative;
    margin-bottom: 0;
  }
  .client {
    padding-bottom: 20px;
  }
  .past_results h3 {
    padding-top: 10px;
    font-size: 18px;
  }
  .resurts_abouts_a h4 {
    font-size: 20px;
  }
  .resurts_abouts_b h4 {
    font-size: 20px;
  }
  .resurts_abouts_a b {
    font-size: 16px;
  }
  .resurts_abouts_b b {
    font-size: 16px;
  }
  .resurts_abouts_a p {
    font-size: 16px;
  }
  .resurts_abouts_b p {
    font-size: 16px;
  }
  .results_img_a {
    margin-top: 0px;
    height: auto;
    width: 45%;
  }
  .results_img_b {
    margin-top: 0px;
    height: auto;
    width: 65%;
  }
  .text_bottom {
    position: absolute;
    bottom: 0;
  }
  #character, #industry, #organic {
    padding-bottom: 70px;
  }
  /* ========== アバウトページ ========== */
  .title-about {
    display: flex;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-about h2 {
    font-size: 44px;
  }
  .title-about p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .title-sub {
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 768px
  }
  /*ナビゲーションの固定*/
  .about-nav {
    /*stickyで固定*/
    position: -webkit-sticky; /*Safari*/
    position: sticky;
    /*固定したい位置*/
    top: 120px;
    /*ナビゲーションの形状*/
  }
  /*レイアウトのためのCSS*/
  #container {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
  }
  #sub-area {
    margin-top: 10px;
    margin-bottom: 60px;
    width: 20%;
  }
  #g-navi li {
    font-size: 14px;
    text-align: left;
  }
  #main-area {
    margin-right: 0;
    margin-left: 10px;
    margin-bottom: 20px;
    width: 80%;
  }
  /*test*/
  .vision {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }
  .vision h3 {
    margin-left: 0px;
    margin-top: 36px;
    font-size: 20px;
  }
  .vision h4 {
    font-size: 38px;
    padding-top: 80px;
    padding-bottom: 100px;
    text-align: center;
  }
  .message-containar {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .message {
    position: relative;
  }
  .message p {
    padding-left: 13px;
    padding-right: 0px;
    margin: 10px;
    line-height: 30px;
  }
  .president {
    margin-top: 15px;
  }
  .president_photo {
    width: 500px;
    margin-right: 10px;
  }
  .president_explanation {
    margin-left: 240px;
    margin-top: 120px;
    width: 200px;
  }
  #area-1, #area-2, #area-3, #area-4, #area-5, #area-6, #area-7 {
    padding-top: 16px;
  }
  .aboutA {
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    max-width: 768px;
  }
  .aboutA h3, .aboutB h3, .aboutC h3, .aboutD h3 {
    margin-top: 50px;
    margin-left: 0px;
    width: 768px;
    font-size: 20px;
  }
  .aboutA p {
    font-size: 16px;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    max-width: 768px
  }
  .aboutB {
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    max-width: 768px;
  }
  .aboutdt {
    float: left;
    clear: left;
    width: 150px;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .aboutdd {
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .aboutD {
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 768px;
  }
  .aboutC p {
    font-size: 16px;
  }
  .aboutD p {
    font-size: 16px;
  }
  .achv {
    margin-top: 30px;
  }
  .aboutC {
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
    max-width: 768px
  }
  .containar2 {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    max-width: 768px;
  }
  .office1 {
    position: relative;
  }
  .office1 img {
    padding: 2px;
    min-width: 105%;
  }
  .map {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
  }
  /* ========== リクルートページ ========== */
  .title-recruit {
    display: flex;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-recruit h2 {
    font-size: 44px;
  }
  .title-recruit p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .recruitA {
    padding-top: 50px;
    padding-bottom: 10px;
  }
  .recruitA p {
    font-size: 16px;
    margin-bottom-top: 50px;
    margin-bottom: 20px;
    margin-left: auto;
    padding-left: 5px;
    margin-right: auto;
    max-width: 768px;
    letter-spacing: 0.02em;
  }
  .recruitB {
    margin-left: auto;
    margin-right: auto;
    line-height: 2;
    max-width: 768px;
  }
  .recruitB h3 {
    margin-left: 0px;
    margin-bottom: 20px;
  }
  .recruitB p {
    font-size: 16px;
  }
  .recruitform {
    padding-bottom: 100px;
  }
  .recruitform_button {
    margin-top: 80px;
  }
  .recruitdt {
    position: relative;
    float: left;
    width: 25%;
    height: 90px;
    padding-left: 20px;
    background-color: rgba(213, 213, 213, 1.00);
    color: rgba(0, 0, 0, 1.00);
    border-bottom: 2px solid #FFFFFF;
  }
  .recruitdt2 {
    position: relative;
    float: left;
    width: 25%;
    height: 180px;
    padding-left: 20px;
    background-color: rgba(213, 213, 213, 1.00);
    color: rgba(0, 0, 0, 1.00);
    border-bottom: 2px solid #FFFFFF;
  }
  .recruitdt3 {
    position: relative;
    float: left;
    width: 25%;
    height: 100px;
    padding-left: 20px;
    background-color: rgba(213, 213, 213, 1.00);
    color: rgba(0, 0, 0, 1.00);
    border-bottom: 2px solid #FFFFFF;
  }
  .recruitdt p {
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
  }
  .recruitdt2 p {
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
  }
  .recruitdt3 p {
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
  }
  .recruitdd {
    height: 90px;
    padding-left: 25%;
    background-color: #F8F8F8;
    border-bottom: 2px solid #FFFFFF;
    margin-left: 2%;
  }
  .recruitdd3 {
    height: 100px;
    padding-left: 25%;
    background-color: #F8F8F8;
    border-bottom: 2px solid #FFFFFF;
    margin-left: 2%;
  }
  .recruitdd2 {
    height: 180px;
    padding-left: 25%;
    background-color: #F8F8F8;
    border-bottom: 2px solid #FFFFFF;
    margin-left: 2%;
  }
  .recruitddp1 {
    padding-top: 20px
  }
  .recruitddp2 {
    padding-top: 30px
  }
  .recruitddp3 {
    padding-top: 20px
  }
  .recruitddp4 {
    padding-top: 30px;
  }
  .recruitddp5 {
    padding-top: 8px;
    line-height: 24px;
  }
  .recruitC p {
    font-size: 16px;
    margin-bottom-top: 50px;
    margin-bottom: 20px;
    margin-left: auto;
    padding-left: 5px;
    margin-right: auto;
    max-width: 768px;
    letter-spacing: 0.02em;
  }
  .recruitform_button a {
    font-size: 16px;
  }
  .recruitslider {
    max-width: 780px;
    height: 380px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 15px;
    overflow-x: auto;
    border: 1px solid #c0c0c0;
  }
  .agreement {
    font-size: 14px;
    margin-top: 14px;
    margin-left: 10px;
    margin-bottom: 14px;
    margin-right: 10px;
  }
  /* ========== コンタクトページ ========== */
  .title-contact {
    display: flex;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-contact h2 {
    font-size: 44px;
  }
  .title-contact p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .contact_form h2 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 768px;
  }
  .contact_form h3 {
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: 22px;
    width: 768px;
  }
  .contactA {
    padding-top: 60px;
    padding-bottom: 80px
  }
  .contactA p {
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2px;
    max-width: 768px;
    line-height: 2;
    letter-spacing: 0.02em;
  }
  .contact {
    padding-top: 2px;
    padding-bottom: 24px;
    padding-left: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 768px
  }
  .contact p {
    margin-left: 10px;
    font-size: 16px;
  }
  .contact_form {
    padding-bottom: 10px;
  }
  .required {
    color: #FF0004;
    font-size: 12px
  }
  form p {
    font-size: 16px;
    margin-top: 8px
  }
  label {
    margin-right: 10px;
  }
  input, textarea {
    box-sizing: border-box;
    width: 100%;
  }
  input[type="text"] {
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 0.7em;
    border: 1px solid #6C6C6C;
    background-color: #FFFFFF
  }
  input[type="email"] {
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 0.7em;
    border: 1px solid #6C6C6C;
    background-color: #FFFFFF
  }
  input[type="tel"] {
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 0.7em;
    border: 1px solid #6C6C6C;
    background-color: #FFFFFF
  }
  textarea {
    margin-top: 7px;
    padding: 0.7em;
    width: 100%;
    height: 150px;
    border: 1px solid #6C6C6C;
    background-color: #FFFFFF
  }
  input[type="submit"] {
    margin-top: 50px;
    margin-bottom: 100px;
    border: none;
    background-color: #7E7E7E;
    font-size: 16px;
    color: rgba(255, 255, 255, 1.00)
  }
  form {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px
  }
  .submit p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  /* ========== サンキューページ ========== */
  .contactB {
    padding-top: 100px;
    padding-bottom: 80px
  }
  .thanks {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    margin-bottom: 60px;
  }
  .back {
    font-size: 16px;
  }
  /* ========== エントリーページ ========== */
  .title-entry {
    display: flex;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-entry h2 {
    font-size: 44px;
  }
  .title-entry p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .entry_form h2 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 768px
  }
  .entry {
    padding-top: 30px;
    padding-bottom: 24px;
    padding-left: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 768px
  }
  .entry p {
    font-size: 16px;
  }
  .entryA {
    padding-top: 60px;
    padding-bottom: 100px
  }
  .entry_form {
    padding-bottom: 10px;
  }
  /* ========== プライバシーポリシー ========== */
  .title-policy {
    display: flex;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-policy h2 {
    font-size: 44px;
  }
  .title-policy p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .policy {
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;
    width: 768px
  }
  .policy h3 {
    font-size: 16px;
  }
  .policy p {
    font-size: 14px;
  }
  /* ========== サイトポリシー ========== */
  .title-sitepolicy {
    display: flex;
    width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
  }
  .title-sitepolicy h2 {
    font-size: 44px;
  }
  .title-sitepolicy p {
    font-size: 16px;
    margin-top: 32px;
    margin-left: 4px;
  }
  .policy {
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;
    width: 768px
  }
  .policy p {
    font-size: 16px;
  }
  /* ---PCサイズ---- */
  @media screen and (min-width: 1280px) {
    /* ========== 共通 ========== */
    /* ヘッダーのロゴ部分 */
	  
	  
	  
	  
    .logo {
      width: 180px;
      margin-left: 40px;
      margin-top: 30px;
    }
    .logologo {
      width: 180px;
      margin-top: 30px;
      margin-left: 40px;
      position: relative; /* 位置指定 */
      z-index: 10;
      animation: fadeIn 2s;
    }
    /** ヘッダーのナビ部分 */
    .header__nav {
      left: auto;
      width: 130px;
      height: 340px;
    }
    /* ハンバーガーメニュー */
    .header__hamburger {
      width: 24px;
      height: 100%;
      margin-top: 2px;
      margin-right: 30px;
    }
    .page-header {
      height: 80px;
    }
    /* ========== トップページ ========== */
    #contents {
      padding-top: 350px;
    }
    /* ----見出し----c */
    .main-vivopix {
      width: 600px;
      padding: 0 auto;
    }
    @keyframes appearance {
      0% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    @-webkit-keyframes appearance {
      0% {
        opacity: 0;
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    @-moz-keyframes appearance {
      0% {
        opacity: 0;
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    .home-content {
      text-align: center;
      margin-top: 0px;
      margin-bottom: 200px;
    }
    .top_philosophy {
      margin-top: 380px;
      margin-bottom: 410px;
      font-size: 48px;
      line-height: 90px;
      text-shadow: 0px 0px 0px #000000;
    }
    /** コンテンツの縦間隔 */
    .scroll {
      padding-top: 350px;
    }
    /** boxを横並びに */
    .box1 {}
    .fadeUpTrigger {}
    .top_works {
      padding-bottom: 100px;
    }
    .containar1 {
      display: flex;
      justify-content: center;
      width: 1160px;
      margin-left: auto;
      margin-right: auto;
    }
    .title1 h2 {
      padding-top: 140px;
      font-size: 50px;
      margin-bottom: 50px;
    }
    .title1 p {
      font-size: 16px;
      padding-bottom: 24px;
    }
    .box2 {
      height: 1000px;
    }
    .topcategory h3 {
      text-align: center;
      padding-top: 40px;
      padding-bottom: 25px;
      width: 1150px;
      font-size: 24px;
      margin-left: auto;
      margin-right: auto;
    }
    .topcategory p {
      width: 850px;
      padding-bottom: 70px;
      margin-left: auto;
      margin-right: auto;
      font-size: 16px;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      padding-top: 10px;
      max-width: 1160px;
      margin-left: auto;
      margin-right: auto;
    }
    .list li {
      margin: 5px;
      width: 24%;
      height: 24%;
      list-style-type: none;
      float: left;
    }
    .top_morebox {
      margin-top: 30px;
      max-width: 1140px;
      margin-left: auto;
      margin-right: auto;
    }
    /* ========== フッター ========== */
    footer {
      height: 400px;
    }
    .wrapp {
      height: 300px;
      padding-left: 60px;
      display: flex;
      max-width: 1000px;
      margin-right: auto;
      margin-left: auto;
    }
    .sitemap {
      padding-top: 30px;
      width: 25%;
    }
    .sitemap h4 {
      margin-bottom: 24px;
    }
    .sitemap ul li a {
      font-size: 14px;
      color: #D0CDD1
    }
    /* ========== ワークスページ ========== */
    .title-works {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-works h2 {
      font-size: 56px;
    }
    .title-works p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .category {
      padding-top: 30px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 4px;
    }
    .slider {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin: 0 auto;
      padding-bottom: 30px;
      width: 1000px;
    }
    .category_title {
      display: flex;
    }
    .category h3 {
      font-size: 32px;
      margin-top: 60px;
      padding-bottom: 0px;
    }
    .category_sub {
      font-size: 16px;
      font-weight: 500;
      margin-top: 77px;
      margin-bottom: 0;
      padding-left: 14px;
    }
    .category p {
      font-size: 16px;
      margin-left: 0;
      margin-bottom: 40px;
    }
    .contents-works {
      width: 32%;
      height: auto;
      margin: 5px;
    }
    .contents-works img {
      width: 100%;
      height: auto;
    }
    .past_results {
      margin-top: 60px;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
    .resurts_container {
      display: flex;
      margin-left: 10px;
      margin-right: 6px;
      padding-top: 30px;
      padding-bottom: 50px;
      justify-content: space-between;
    }
    .past_results h3 {
      font-size: 20px;
    }
    .resurts_abouts_a h4 {
      font-size: 22px;
    }
    .resurts_abouts_b h4 {
      font-size: 22px;
    }
    .resurts_abouts_a {
      width: 54%;
      position: relative;
      margin-bottom: 3px;
    }
    .resurts_abouts_b {
      width: 33%;
      position: relative;
      margin-bottom: 0;
    }
    .results_img_a {
      margin-top: 0px;
      height: auto;
      width: 45%;
    }
    .results_img_b {
      margin-top: 0px;
      height: auto;
      width: 65%;
    }
    #character, #industry, #organic {
      padding-bottom: 70px;
    }
    /* ========== アバウトページ ========== */
    .title-about {
      display: flex;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-about h2 {
      font-size: 56px;
    }
    .title-about p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .title-sub {
      font-size: 16px;
      margin-left: auto;
      margin-right: auto;
      width: 1000px
    }
    /*レイアウトのためのCSS*/
    #container {
      display: flex;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 1000px;
    }
    #sub-area {
      margin-top: 10px;
      margin-bottom: 60px;
      width: 20%;
    }
    #g-navi li {
      font-size: 14px;
    }
    #main-area {
      margin-right: 0;
      margin-left: 10px;
      margin-bottom: 20px;
      width: 80%;
    }
    /*test*/
    .vision {
      margin-top: 5px;
      margin-left: auto;
      margin-right: auto;
      max-width: 800px;
    }
    .vision h3 {
      margin-left: 0px;
      margin-top: 36px;
      font-size: 20px;
    }
    .vision h4 {
      font-size: 38px;
      padding-top: 80px;
      padding-bottom: 100px;
      text-align: center;
    }
    .message-containar {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
    }
    .message {
      position: relative;
    }
    .message p {
      padding-left: 13px;
      margin: 10px;
      line-height: 30px;
    }
    .president {
      margin-top: 20px;
    }
    .president_photo {
      width: 500px;
      margin-right: 10px;
    }
    #area-1, #area-2, #area-3, #area-4, #area-5, #area-6, #area-7 {
      padding-top: 16px;
    }
    .aboutA {
      padding-top: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;
      max-width: 800px;
    }
    .aboutA h3, .aboutB h3, .aboutC h3, .aboutD h3 {
      margin-top: 50px;
      margin-left: 0px;
      width: 800px;
      font-size: 20px;
    }
    .aboutA p {
      font-size: 16px;
      margin-bottom: 16px;
      margin-left: auto;
      margin-right: auto;
      max-width: 800px
    }
    .aboutB {
      padding-top: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;
      max-width: 800px;
    }
    .aboutdt {
      float: left;
      clear: left;
      width: 150px;
      font-size: 16px;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .aboutdd {
      font-size: 16px;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .aboutD {
      padding-top: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
      max-width: 800px;
    }
    .aboutC p {
      font-size: 16px;
    }
    .aboutD p {
      font-size: 16px;
    }
    .achv {
      margin-top: 30px;
    }
    .aboutC {
      padding-top: 20px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 40px;
      max-width: 800px
    }
    .containar2 {
      margin-top: 30px;
      max-width: 800px;
    }
    .office1 {
      position: relative;
    }
    .office1 img {
      padding: 2px;
      min-width: 105%;
    }
    .map {
      margin-top: 30px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      display: block;
    }
    /* ========== リクルートページ ========== */
    .title-recruit {
      display: flex;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-recruit h2 {
      font-size: 56px;
    }
    .title-recruit p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .recruitA {
      padding-top: 50px;
      padding-bottom: 10px;
    }
    .recruitA p {
      font-size: 16px;
      margin-bottom-top: 50px;
      margin-bottom: 20px;
      margin-left: auto;
      padding-left: 5px;
      margin-right: auto;
      max-width: 1000px;
      letter-spacing: 0.02em;
    }
    .recruitB {
      margin-left: auto;
      margin-right: auto;
      line-height: 2;
      max-width: 1000px;
    }
    .recruitB h3 {
      margin-left: 0px;
      margin-bottom: 20px;
    }
    .recruitB p {
      font-size: 16px;
    }
    .recruitform {
      padding-bottom: 100px;
    }
    .recruitform_button {
      margin-top: 80px;
    }
    .recruitdt {
      position: relative;
      float: left;
      width: 30%;
      height: 90px;
      padding-left: 20px;
      background-color: rgba(213, 213, 213, 1.00);
      color: rgba(0, 0, 0, 1.00);
      border-bottom: 2px solid #FFFFFF;
    }
    .recruitdt2 {
      position: relative;
      float: left;
      width: 30%;
      height: 160px;
      padding-left: 20px;
      background-color: rgba(213, 213, 213, 1.00);
      color: rgba(0, 0, 0, 1.00);
      border-bottom: 2px solid #FFFFFF;
    }
    .recruitdt3 {
      position: relative;
      float: left;
      width: 30%;
      height: 90px;
      padding-left: 20px;
      background-color: rgba(213, 213, 213, 1.00);
      color: rgba(0, 0, 0, 1.00);
      border-bottom: 2px solid #FFFFFF;
    }
    .recruitdt p {
      font-size: 16px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%)
    }
    .recruitdt2 p {
      font-size: 16px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%)
    }
    .recruitdt3 p {
      font-size: 16px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%)
    }
    .recruitdd {
      height: 90px;
      padding-left: 30%;
      background-color: #F8F8F8;
      border-bottom: 2px solid #FFFFFF;
      margin-left: 2%;
    }
    .recruitdd3 {
      height: 90px;
      padding-left: 30%;
      background-color: #F8F8F8;
      border-bottom: 2px solid #FFFFFF;
      margin-left: 2%;
    }
    .recruitdd2 {
      height: 160px;
      padding-left: 30%;
      background-color: #F8F8F8;
      border-bottom: 2px solid #FFFFFF;
      margin-left: 2%;
    }
    .recruitddp1 {
      padding-top: 20px
    }
    .recruitddp2 {
      padding-top: 30px
    }
    .recruitddp3 {
      padding-top: 30px
    }
    .recruitddp4 {
      padding-top: 30px;
    }
    .recruitC p {
      font-size: 16px;
      margin-top: 50px;
      margin-bottom: 50px;
      margin-left: auto;
      padding-left: 20px;
      margin-right: auto;
      max-width: 800px;
      letter-spacing: 0.02em;
    }
    .recruitslider {
      max-width: 780px;
      height: 380px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      gap: 15px;
      overflow-x: auto;
      border: 1px solid #c0c0c0;
    }
    .agreement {
      font-size: 14px;
      margin-top: 20px;
      margin-left: 14px;
      margin-bottom: 20px;
      margin-right: 14px;
    }
    .recruitform_button a {
      font-size: 16px;
    }
    /* ========== コンタクトページ ========== */
    .title-contact {
      display: flex;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-contact h2 {
      font-size: 56px;
    }
    .title-contact p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .contact_form h2 {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
      width: 1000px;
    }
    .contact_form h3 {
      text-align: center;
      margin-bottom: 40px;
      margin-left: auto;
      margin-right: auto;
      font-size: 22px;
      width: 1000px;
    }
    .contactA {
      padding-top: 60px;
      padding-bottom: 80px
    }
    .contactA p {
      font-size: 16px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 2px;
      max-width: 1000px;
      line-height: 2;
      letter-spacing: 0.02em;
    }
    .contact_form {
      padding-bottom: 10px;
    }
    .required {
      color: #FF0004;
      font-size: 12px
    }
    form p {
      font-size: 16px;
      margin-top: 8px
    }
    label {
      margin-right: 10px;
    }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
    }
    input[type="text"] {
      margin-top: 7px;
      margin-bottom: 10px;
      padding: 0.7em;
      border: 1px solid #6C6C6C;
      background-color: #FFFFFF
    }
    input[type="email"] {
      margin-top: 7px;
      margin-bottom: 10px;
      padding: 0.7em;
      border: 1px solid #6C6C6C;
      background-color: #FFFFFF
    }
    input[type="tel"] {
      margin-top: 7px;
      margin-bottom: 10px;
      padding: 0.7em;
      border: 1px solid #6C6C6C;
      background-color: #FFFFFF
    }
    textarea {
      margin-top: 7px;
      padding: 0.7em;
      width: 100%;
      height: 150px;
      border: 1px solid #6C6C6C;
      background-color: #FFFFFF
    }
    input[type="submit"] {
      margin-top: 50px;
      margin-bottom: 100px;
      border: none;
      background-color: #7E7E7E;
      font-size: 16px;
      color: rgba(255, 255, 255, 1.00)
    }
    form {
      margin-left: auto;
      margin-right: auto;
      max-width: 700px
    }
    .submit p {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    /* ========== エントリーページ ========== */
    .title-entry {
      display: flex;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-entry h2 {
      font-size: 56px;
    }
    .title-entry p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .entry_form h2 {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
      width: 1000px
    }
    .entryA {
      padding-top: 60px;
      padding-bottom: 100px
    }
    .entry_form {
      padding-bottom: 10px;
    }
    /* ========== プライバシーポリシー ========== */
    .title-sitepolicy {
      display: flex;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-sitepolicy h2 {
      font-size: 56px;
    }
    .title-sitepolicy p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .policy {
      padding-top: 50px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 100px;
      width: 1000px
    }
    .policy h3 {
      font-size: 18px;
    }
    /* ========== サイトポリシー ========== */
    .title-policy {
      display: flex;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 90px;
    }
    .title-policy h2 {
      font-size: 56px;
    }
    .title-policy p {
      font-size: 16px;
      margin-top: 44px;
      margin-left: 4px;
    }
    .policy {
      padding-top: 50px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 100px;
      width: 1000px
    }