@charset "utf-8";


/*各cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("keyframes.css");
@import url("slide.css");

/*TOPKVここから*/

.topkv {
  position: relative;
  }

.topp p {
  top: 50%;/*画像の左上に配置*/
  left: 35%;
  position: relative;
  margin: 0; /*余計な隙間を除く*/
  color: #333333;/*文字を白に*/
  font-size: 3em;
  line-height: 2;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
  text-align: left;
  font-weight: bold;
  width: max-content;
  }

  .topp{
    position: absolute;
    width: 100%;
    display: block;
    top: 50%;/*画像の左上に配置*/
    left: 0;
    margin: 0; /*余計な隙間を除く*/
    background:linear-gradient(to right, #fbf3db, #ffffff73);/*背景色*/
    }

.topkv img {
  width: 1000px;
    height: auto;
    margin: auto;
    text-align: center;
    display: block;
  }

/*TOPKVここまで*/


/*サンクスここから*/
.thanks_p{
text-align: center;
}

/*サンクスここまで*/


/*各ページバナーここから*/

.example{
position:relative;
background:#6d6448;
margin-bottom:100px
}

.example h2{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
margin:0;
padding:0;
color:#fff;
font-weight:700;
font-size:2em;
line-height:1.2;
text-align:center;
padding:.5em 2em;
width: 100%;
}


.example img{
width:100%;
height:200px;
object-fit:cover;
opacity:.5
}


/*各ページバナーここまで*/


/*代表挨拶ここから*/
.ceoimg {
    width: 40%;
    margin: auto;
}

.keireki {
    line-height: normal;
    font-size: 0.9em;
    color: #666666;
}

.keireki p {
    margin-bottom: 10px;
}

/*代表挨拶ここまで*/


/*セミナーページここから*/
#seminarpage ul{
  list-style-type: disc;
  padding-left: 2em;
}

.seminarmenu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.seminarmenu img{
width: 30%;
}

.seminartext{
width: 65%;
}

p.bold{
  font-weight: bold;
}

p.osusume{
  font-weight: bold;
  color: #ff0000;
}

.seminarbox {
    padding-bottom: 50px;
}

.seminartext p {
    padding-bottom: 5px;
}

/*セミナーページここまで*/

/*問い合わせページここから*/

div#contact_mfp {
    width: 1200px;
    margin: auto;
}

/*問い合わせページここまで*/

/*フッターここから*/

div#footermenu ul {
    display: flex;
    width: 80%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    margin: auto;
    margin: 0 10%;
}

div#footermenu ul li {
    width: 20%;
}

/*フッターここまで*/


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
html
{
overflow-x: hidden!important;
}

.mediabox img,
.mediabox p{
  position: relative;
    padding: 0.5rem 0.5rem;
   font-weight: bold;
}

#media #contents h2 {
    position: relative;
    padding: 0.5rem 0.5rem;
    border-bottom: 6px solid #0074ea;
    margin: 0px 5% 25px;
    width: 100%!important;
}

.mediabox{
  padding: 20px;
      width: 30%;
box-shadow: 3px 3px 10px 0px #bdbdbd;
margin-bottom: 50px;
border-radius: 5px;
    }

div#media {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
        margin: auto;
}

#contents #media h2 {
    position: relative;
    padding: 0.5rem 0.5rem;
    border-bottom: 0px;
    margin:0;
    font-size: 1em;
    line-height: 1.5;
}

#contents #media h2:before {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0px;
    height: 0px;
}

.ceoname{
  text-align: center;
}


.servicecontents{
  text-align: center;
}


table.se1 th:nth-child(1),
table.se1 th:nth-child(2),
table.se1 td:nth-child(1),
table.se1 td:nth-child(2){
width: 25%;
}

table.se1 th:nth-child(3),
table.se1 td:nth-child(3){
width: 50%;
}

table.se2 th,
table.se2 td{
width:max-content;
}

table.consulting th {
  background: #f7f6f3;
  border: solid 1px #ccc;
  color: #333;
  padding: 10px;
font-weight: normal;
font-size:15px;
width: 20%;
}

table.consulting td{
border: solid 1px #ccc;
padding: 10px;
background: #ffffff;
color: #333;
text-align: left!important;
font-size: 15px;
width: 20%;
}

.consultingtb{
   overflow-x: scroll;
}

table.consulting {
  margin: 0px auto;
width: 700px!important;
line-height: 1;
margin: 40px auto;
 white-space:nowrap
}

table.tbl-r02 {
  margin: 0px auto;
width: 700px;
line-height: 1;
margin: 40px auto;
}

.tbl-r02 th {
  background: #f7f6f3;
  border: solid 1px #ccc;
  color: #333;
  padding: 10px;
font-weight: normal;
font-size:15px;
width: 15%;
}

.tbl-r02 td{
border: solid 1px #ccc;
padding: 10px;
background: #ffffff;
color: #333;
text-align: left!important;
font-size: 15px;
width: 50%;
}


/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #333;
  z-index: 9999999;
  text-align:center;
  color:#fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

video#video-sample
{
  position:fixed;
  top:0;
  width: 100%;
  height: 100%;
  background: #FFF;
  padding-top: 0px;
  inset: 0;
  margin: auto;
  z-index: 9999999999;

}






/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scaleY(0);
    background-color: #fff;/*伸びる背景色の設定*/
    animation-name:PageAnime;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes PageAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
  opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
  animation-name:PageAnimeAppear;
  animation-duration:1s;
  animation-delay: 0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}









a {
    text-decoration: none;
}




/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;padding: 0px;
	font-family:"Noto Sans JP";
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	color: #151515;		/*文字色*/
	background: #ffffff;/*背景色*/
	-webkit-text-size-adjust: none;
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,textarea,input {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {
	max-width: 100%;
	position: fixed;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background: #FFF;
	    padding-top: 0px;
	    inset: 0;
	    margin: auto;
	    z-index: 9999999}
iframe {width: 100%;}

h2 {
  font-size: 130%;
    font-weight: 600;
    color: #000000;
    font-family:"Noto Sans JP";
}


#mainImg{
	position: relative;
  overflow: hidden;
  width: 100vw;
  height: auto;
　text-align : center
}

#mainImg img{
	width: 60%;
	height: auto;
　text-align : center;
}

.ourservice{
  max-width: 1200px;
    margin: auto;
}



.title2{
position: absolute;
text-align: center;
font-family:"Noto Sans JP";
background-color:rgb(255 255 255 / 0%);
font-weight: bold;
animation-name: fadeup;
animation-iteration-count: 1;
top:60px;
}

.title2 .an2-fadeup {
	color: darkgreen;
  font-size: 7vw;
  animation-duration: 3s;
	animation-name: fadeup;
	animation-iteration-count: 1;
}

.title2 .an3-fadeup {
	color: #4c4c4c;
  font-size: 6vw;
	animation-duration: 5s;
	animation-name: fadeup;
	animation-iteration-count: 1;
  margin-top: -85px;
}

.title2 .an4-fadeup {
	color: #4c4c4c;
  font-size: 2.3vw;
	animation-duration: 7s;
	animation-name: fadeup;
	animation-iteration-count: 1;
  margin-top: -50px;
}



@keyframes fadeup {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #0074ea;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #0074ea;
}

/*
p#A{
padding: 0px 0px 0px;
}
*/

/*
::-webkit-scrollbar {
  width: 10px;
	height: 0px;
}
::-webkit-scrollbar-track {
  background: #bde8f0;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
   background-color:#3c5dd1;
   border-radius: 5px;
}
*/

p.texteitm {
    font-size: 16px;
    line-height: 1.7em;
}


/*CEOメッセージ---*/
.row{
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
  box-sizing: inherit;
	scroll-behavior:smooth;
	align-content: space-between;
	justify-content: center;
}

.col-sm-8{
	position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 60%;
	flex: 0 0 45%;
	max-width: 55%;
}

.homevideo{
padding-top: 0px;
}

.col-sm-4{
	position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

.font_bold{

  font-weight:bold;/*または600などで設定*/

}

/*EITM動画設定*/

.EITMV {
 position:fixed;
 top:0;
 width: 100%;
 height: 100%;
 background: #FFF;
 padding-top: 0px;
 inset: 0;
 margin: auto;
 z-index: 9999999999;
}


.img1 {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.img2 {
  display: flex;
      width: 100%;
      justify-content: center;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
}

.img3 {
  display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}



/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
#contents .list-column-container {
	display: flex;
	justify-content: center;	/*中のブロックの横並びの揃え方*/
	flex-wrap: wrap;				/*中のブロックを自動で折り返す*/
flex-direction: row;
}
/*１カラムあたりの設定*/
#contents .list-column,
#contents .list-column2{
	display: flex;
	flex-direction: column;			/*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
	width: calc(33% - 40px);						/*ブロック幅*/
	background: #ffffff;				/*背景色*/
	color: #fff;					/*文字色*/
	border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	margin:20px;
  box-shadow: 3px 3px 10px 0px #bdbdbd;
}


/*リンクテキストの文字色*/
#contents .list-column2 a,
#contents .list-column a {
	color: #333333;
  font-weight: bold;
}

/*ボックス内のh4（見出し）タグ*/
#contents .list-column h4 {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
}
/*ボックス内のp（段落）タグ*/
#contents .list-column p {
	padding: 0;		/*余白のリセット*/
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-column .text {			/*ブロック内の余白*/
	flex: 1 0 auto;
}

#contents .list-column .btn1 a {			/*ブロック内の余白*/
max-width: 100%;
margin: 0px auto 0;
padding: 5px 10px;
}

/*IEバグ対応*/
#contents .list-column figure {
	min-height: 0%;
}

/*list-column2（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
#contents .list-column2-container {
	display: flex;
	justify-content: center;	/*中のブロックの横並びの揃え方*/
	flex-wrap: wrap;				/*中のブロックを自動で折り返す*/
	margin: 0 3%;
flex-direction: row;
}

/*ボックス内のh4（見出し）タグ*/
#contents .list-column2 h4 {	/*下のテキストとの間に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
	text-align: center;
}
/*ボックス内のp（段落）タグ*/
#contents .list-column2 p {
	padding: 0;		/*余白のリセット*/
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-column2 .text {			/*ブロック内の余白*/
	flex: 1 0 auto;
}

#contents .list-column2 .btn1 a {			/*ブロック内の余白*/
max-width: 100%;
margin: 0px auto 0;
padding: 5px 10px;
}

/*IEバグ対応*/
#contents .list-column2 figure {
	min-height: 0%;
}


/*ーーーーーーーーーーーお知らせタブの切り替え↓ーーーーーーーーーーーー*/
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 0px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2); /*分母の数＝タブの数、何等分にタブを分けるか*/
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 20px 20px 20px;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#achievement:checked ~ #achievement_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}


/*ーーーーーーーーーーーお知らせタブの切り替え↑ーーーーーーーーーーーー*/

/*サービス概要イメージアイコン*/

img.serviceicon {
    width:8%;
    padding-right: 3px;
}
h4.servicetitle{
font-size: 20px;
}

/*サービス概要イメージアイコン*/
/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;
	transition: 0.4s;
}
a:hover {
	color: #0074ea;
	text-decoration: none;
}


.menu{
position:relative;
width:100%;
height:50px;
max-width:1200px;
margin:0 auto;
display:flex;
justify-content:flex-end;
padding-left:40px
}

.menu > li{
float:left;
height:45px;
line-height:45px;
background-color:none;
box-sizing:border-box;
list-style:none;
margin:0 15px;
}

.menu > li:last-child{
border-right:none
}

.menu > li a{
display:block;
color:#333;
text-align:center;
text-decoration:none;
font-size:18px;
font-weight: bold;
}

ul.menu__second-level{
visibility:hidden;
opacity:0;
z-index:1
}

ul.menu__third-level{
visibility:hidden;
opacity:0
}

ul.menu__fourth-level{
visibility:hidden;
opacity:0
}

.menu > li:hover{
background:#fff;
color:#fff;
border-bottom:solid 3px #cdbc89;
}

.menu__second-level li{
height: auto;
    line-height: 35px;
    list-style: none;
    border-bottom: dotted 1px #666;
}

.menu__second-level li:last-child{
    border-bottom: none;
}

.menu__second-level li span {
    line-height: 0;
}

.menu__third-level li{
border-top:1px solid #111
}

.menu__second-level li a{
text-align:left;
padding:0 1em;
font-weight:400;
font-size:15px;
letter-spacing:.01em;
padding-bottom: 10px;
height: auto;
}

.menu__second-level li a:hover{
background:#438bc1;
color:#fff;
height: auto;
    line-height: 35px;
    padding-bottom: 10px;
    list-style: none;
}

.menu__second-level li span:hover {
    line-height: 0;
}

.menu:before,.menu:after{
content:" ";
display:table
}

.menu:after{
clear:both
}

.menu{
*zoom:1
}


.menu > .menu__single{
position:relative
}

.menu__single .menu__second-level{
position:absolute;
top:40px;
width:max-content;
background-color:#fff;
-webkit-transition:.2s ease;
transition:.2s ease;
visibility:hidden;
opacity:0
}

.menu__single:hover > .menu__second-level{
top:50px;
visibility:visible;
opacity:1;
padding-left:0;
width:-webkit-fill-available
}


.hamburger-menu{
display:none
}

#header{
padding:10px 0

}

header{
display:flex;
justify-content:space-between;
align-items:flex-end;
flex-wrap:nowrap;
flex-direction:row;
margin:auto
}


header #logo{
margin:0;
letter-spacing:.1em;
font-size:2.2rem

}

figure#logo{
width:25%
}

figure#footerlogo{
width:200px;
margin:0 auto;
padding-bottom:30px
}

header #logo a{
text-decoration:none
}


header #logo img{
width:200px;

padding:0 20px
}





/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar {
  float: right;
    padding-right: 20px;
}
/*メニュー１個あたりの指定*/
#menubar li {
	float: left;
	letter-spacing: 0.1em;
}
#menubar li a, .ddmenu-title {
  display: block;
      text-decoration: none;
      color: #000;
      padding: 10px 15px;
      font-size: 1.2em;
}
/*マウスオン時の背景色*/
#menubar li a:hover {
border-bottom: 6px solid #fbf3db!important;
font-weight: bold;
}
/*ドロップダウンメニューの親メニューへの追加指定。基本指定は上の.ddmenu-titleにあります。*/
.ddmenu-title {
	padding-left: 40px;	/*アイコン分の余白を確保*/
	background: url(../images/arrow1.png) no-repeat 10px center / auto 25px;	/*アイコン画像の読み込み。最後の25pxは高さ指定。*/
}

/*小さい端末用メニューを非表示にする*/
#menubar-s,#menubar-s2 {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*ドロップダウンメニュー（ddmenu）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar ul.ddmenu {
	position:absolute;visibility: hidden;z-index: 10;
	width: auto;
	margin-left: -40px;	/*.ddmenu-titleのpadding-leftと数字を合わせてマイナス記号をつける。*/
}
/*メニュー１個あたりの指定*/
#menubar ul.ddmenu li {
	float: none;
}
#menubar ul.ddmenu li a {
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
	border: 1px solid rgba(255,255,255,0.4);	/*線の幅、線種、色。255,255,255は白の事で0.4は色が40%出た状態。*/
	border-top: none;	/*上の線だけ消す*/
}
/*１つ目のメニューへの追加指定*/
#menubar ul.ddmenu li:first-child a {
	border-top: 1px solid rgba(255,255,255,0.4);	/*上の線の指定*/
}
/*ドロップダウンのマウスオン事*/
li:hover ul.ddmenu {
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.4S;	/*アニメーションの実行時間。0.4秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}


img.eitmservice3
{
display: none;
  }


  img.eitmservice5
  {
    width: 35%;
padding: 30px 30px 10px;
    }

    img.eitmservice6
    {
      width: 55%;
      padding-bottom: 15px;

      }



  img.eitmservice2
  {
    width: 65%;
      padding-bottom: 15px;
      margin-top: -20px;
    }

    img.eitmservice4
    {
      width: 35%;
      padding-bottom: 15px;
padding-top: 50px;
      }



h4.serviceextitle
{
	font-size: 15px;
	padding-top: 15px;å
}


/*サービス概要の流れ下矢印*/

.box {
  position: relative;
  width: 90%;
  height: 20rem;
  margin: 0 auto 5rem;
  background: #ddd;
}

.box:first-of-type {
  position: relative;
  border-radius: 10px 10px 3px 3px;
}

.box:first-of-type:after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}

.box:nth-of-type(2) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.box:nth-of-type(2):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.box:nth-of-type(2):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}




.box:last-of-type {
  position: relative;
  border-radius: 0 0 10px 10px;
}

.box:last-of-type:before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.txt_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.flex
{
	padding-top: 20px;
	width: 100vw;
}

/*エグゼクティブミーティングの流れ下矢印*/

.boxse {
  position: relative;
  width: 90%;
  height: 20rem;
  margin: 0 auto 5rem;
  background: #ddd;
}

.boxse:first-of-type {
  position: relative;
  border-radius: 10px 10px 3px 3px;
}

.boxse:first-of-type:after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}



.boxex {
  position: relative;
  width: 90%;
  height: 20rem;
  margin: 0 auto 5rem;
  background: #ddd;
}

.boxex:first-of-type {
  position: relative;
  border-radius: 10px 10px 3px 3px;
}

.boxex:first-of-type:after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}

.boxex:nth-of-type(2) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.boxex:nth-of-type(2):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.boxex:nth-of-type(2):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}


.boxex:nth-of-type(3) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.boxex:nth-of-type(3):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.boxex:nth-of-type(3):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}


.boxex:nth-of-type(4) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.boxex:nth-of-type(4):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.boxex:nth-of-type(4):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}


.boxex:nth-of-type(5) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.boxex:nth-of-type(5):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.boxex:nth-of-type(5):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}


.boxex:nth-of-type(6) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.boxex:nth-of-type(6):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}

.boxex:nth-of-type(6):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 45vw solid transparent;
  border-left: 45vw solid transparent;
}




.boxex:last-of-type {
  position: relative;
  border-radius: 0 0 10px 10px;
}

.boxex:last-of-type:before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 45vw solid #ddd;
  border-left: 45vw solid #ddd;
}



.infobox
{
	width: 90%;
    margin: 20px auto;
    position: relative;
    box-sizing: border-box;
}


#systembox
{
display: -webkit-flex;
display: flex;
	    webkit-justify-content: space-between;
	    justify-content: space-evenly;
	    webkit-flex-wrap: wrap;
	    align-content: flex-start;
	    flex-wrap: wrap;
}



#systemboxbg
{
			background: rgb(255 255 255 / 70%);
			    box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
			    padding: 0px;
			    box-sizing: border-box;
			    position: relative;
			    margin: 0 0 50px;
}




.systemfee
{
	width: 100%;
}

tr
{
	display: table-row;
}

.systemfee td:first-child{
width: 40%;
    padding: 5px 10px;
    box-sizing: border-box;
    text-align: left;
    font-size: 13px;
}
.systemfee td{
width: 60%;
    padding: 5px 10px;
    box-sizing: border-box;
    text-align: left;
    font-size: 12px;
}


tbody tr
{
	border-bottom: 1px solid #000000;
}




/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	float: right;	/*アイコンブロックを右に回り込み*/
	margin-right: 20px;	/*右側に空けるスペース*/
}
/*アイコン１個あたりの設定*/
ul.icon li {
	display: inline-block;	/*横並びにさせる指定*/
	padding-top: 10px;		/*上に空ける余白。header内の上下の配置バランスをここでとって下さい。*/
}
/*アイコン画像の設定*/
ul.icon img {
	width: 30px;		/*画像の幅*/
	margin-right: 5px;	/*画像同士の余白*/
}

/*コンテンツ（contents）
---------------------------------------------------------------------------*/
/*コンテンツブロック全体*/
#contents {
	margin-top: 5px;	/*上に空ける余白。headerとの間に空けたいスペースを調整して下さい*/
	padding: 50px 0;		/*コンテンツ内の余白*/
  width: 1000px;
  margin: auto;
}

#content {
	margin-top: 5px;	/*上に空ける余白。headerとの間に空けたいスペースを調整して下さい*/
	padding: 50px 0;		/*コンテンツ内の余白*/
  width: 1200px;
  margin: auto;
}

/*トップページのコンテンツへの追加指定*/

/*h2タグ*/
#contents h2 {
  position: relative;
      padding: 0.5rem 0.5rem;
      border-bottom: 6px solid #fbf3db;
      margin: 30px 0;
}
/*h2タグ内のspanタグ*/
#contents h2 span {
	font-size: 80%;	/*文字サイズ*/
	padding-left: 20px	/*左に空ける余白*/
}

.row11 {
    margin: 0px 10% 0px;
}

#contents h2:before {
  position: absolute;
    bottom: -6px;
    left: 0;
    width: 80px;
    height: 6px;
    content: '';
    background: #cdbc89;
}


/*h2タグ内のspanタグの文字の最初と最後に表示させる記号*/
#contents h2 span::before,#contents h2 span::after {
	content: "-";
}
/*h3タグ*/
#contents h3 {
    clear: both;
    margin-bottom: 20px;
    font-size: 120%;
    border-bottom: dashed 1px;
    padding: 0 10px;
    display: inline-block;
    font-weight: bold;
}
/*段落タグ設定
#contents p {
	padding: 0px 20px 20px;
}	/*上、左右、下への余白*/
/*他。微調整。*/
#contents p + p {
	margin-top: -5px;
}
#contents h2 + p,
#contents h3 + p {
	margin-top: -10px;
}
#contents section + section {
	margin-top: 10px;
}

/*list（トップページやServiceページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
	margin-bottom: 1px;	/*ボックス同士に空けるスペース*/
}
/*リンクテキストの文字色*/
#contents .list a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
#contents .list h4 {
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
#contents .list p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
#contents .list figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list .text {
	float: right;	/*右に回り込み*/
	width: 64%;		/*幅*/
	margin: 3%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}



.listbox {
	position: relative;
    overflow: hidden;
    display: flex;
    color: #000;
    margin-bottom: 1px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
		z-index: 100 !important;
}

img.imgcontent
{
	float: left;
	width: 100%;
	margin: 10% 0 10%;
}

.listtext
{
	float: right;
	width: 60%;
	padding-top: 25px;
}

figure.listimg
{
	width: 30%;
}


picture.eitmservice1
{
	width: 31%;
	padding-bottom: 15px;
}


picture.eitmservice
{
	width: 35%;
	padding-bottom: 15px;
}


img.eitmservices
{
	width: 100vw;
	height: 100vh;
}

/*btn1
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;text-decoration: none;
	background: #0074ea url(../images/arrow4.png) no-repeat 95% center / 15px;	/*背景色、アイコン画像の読み込み。95%は左からの配置場所、最後の15pxは画像幅。*/
	color: #fff;	/*文字色*/
	max-width: 300px;	/*最大幅。画面幅が狭くなった場合、小さく縮小されていきます。*/
	text-align: center;	/*テキストをセンタリング*/
	padding: 5px 30px;	/*上下、左右へのボタン内の余白*/
	margin: 20px auto 0;	/*上、左右、下へのボタンの外側への余白*/
}
/*マウスオン事に少し位置をずらす指定*/
.btn1 a:hover {
	position: relative;
	left: 1px;
	top: 1px;
}

.cotop{
  margin: 0 10%;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	font-size: 90%;		/*文字サイズ*/
	color: #fff;			/*文字色*/
}
footer a {color: #000;}
footer a:hover {color: #000;}
footer .pr {display: block;}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
	overflow: hidden;
	padding: 20px 3%;		/*上下、左右へのボックス内の余白*/
	background: #ffffff00;	/*背景色*/
border-top: dashed 1px #666666;
}
/*リンクテキスト*/
#footermenu a {
	text-decoration: none;
	opacity: 0.7;	/*透明度。70%の色がついた状態。*/
}
/*マウスオン時*/
#footermenu a:hover {
	opacity: 1;		/*透明度。100%色がついた状態。*/
}
/*１行分の設定*/
#footermenu ul {
	float: left;		/*左に回り込み*/
	width: 16%;			/*幅。今回は５列作っているので、この数字と下のpadding-rightとpadding-leftを合計した数字が１列分になる。(18%＋1%＋1%)×5列＝100%*/
	padding-right: 1%;	/*右に空ける余白*/
	padding-left: 1%;	/*左に空ける余白*/
	text-align: center;	/*テキストを中央寄*/
}
/*見出し*/
#footermenu li.title, #footermenu li.title a {
	opacity: 1;	/*透明度。100%色がついた状態。*/
	font-size: 1em;	/*文字サイズ*/
}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
	background: #666;	/*背景色*/
}
#copyright a {
  text-decoration: none;
color: #ffffff;
}
#copyright a:hover {color: #ffffff;}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding: 0px 20px;		/*上下、左右へのブロック内の余白*/
	margin-bottom: 0px;	/*ブロックの下(外側)に空ける余白*/
	max-height: 200px;			/*高さ*/
	height: auto;
	overflow: scroll;			/*上の高さを超えるコンテンツ量になった場合にスクロールバーを出す*/
}
/*日付設定*/
#new dt {
	float: left;
	width: 9em;
	letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
	padding-left: 9em;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*ta1設定
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #eee;	/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1テーブル*/
.ta1 {
	width: 100%;
	table-layout: fixed;
	margin: 0 0 20px;
	background: #fff;	/*背景色*/
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*左側ボックス*/
.ta1 th {
	width: 150px;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
}

/*inputボタン
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
	padding: 5px 10px;		/*上下、左右へのボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	font-size: 20px;		/*文字サイズ*/
	border-radius: 3px;		/*角丸のサイズ*/
	background: #eee;		/*背景色*/
}
/*マウスオン時の設定*/
#contents input[type="submit"].btn:hover,
#contents input[type="button"].btn:hover,
#contents input[type="reset"].btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}

/*NEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {display: none;}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 1;
	position: fixed;
	bottom: 20px;	/*下から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #666;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}

/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}
p.check a {color: #fff;}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 45px;
}
ol {
	padding: 0 20px 20px 45px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #222;padding: 5px 10px;border-radius: 4px;border: 1px solid #333;color: #fff;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #0074ea !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.big1 {font-size: 40px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.dn {display: none;}
.sh {display: none;}


/*会社概要---*/

.kaisha {
width: 100%;
}

.kaisha th,
.kaisha td {
border: 1px solid #9d9d9d;
padding: 20px;
}

.kaisha th {
font-weight: bold;
background-color: #9bc8ff;
}

@media screen and (max-width: 767px) {
.kaisha,
.kaisha tr,
.kaisha td,
.kaisha th {display:block;width : 94vw ;
padding : 0px;
text-align : center ;}
.kaisha th {width:auto;}


}

/*CEOプロフィール---*/

.profile {
width: 100%;
}

.profile th,
.profile td {
border: 1px solid #9d9d9d;
padding: 20px;
}

.profile th {
font-weight: bold;
background-color: #9bc8ff;
}

@media screen and (max-width: 600px) {
.profile,
.profile tr,
.profile td,
.profile th {display:block;width : 94vw ;
padding : 0px;
text-align : center ;}
.profile th {width:auto;}


}





.contact {
width: 95%;
margin: 0 auto;/*中央寄せ*/
}

.contact-ttl {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

.contact-table {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

.contact-item,
.contact-body {
    padding: 20px;
    border: 1px solid #ccc;
}

.contact-item {
    text-align: left;
    width: 30%;
    background-color: #eee;
}

.contact-body {
    width: 70%;
}

.form-text {
    width: 90%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    max-width: 400px;
}

.contact-sex + .contact-sex {
    margin-left: 10px;
}

.contact-sex-txt {
    display: inline-block;
    margin-left: 5px;
}

.form-select {
    width: 180px;
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-skill {
    display: block;
}

.contact-skill + .contact-skill {
    margin-top: 10px;
}

.contact-skill-txt {
    display: inline-block;
    margin-left: 5px;
}

.form-textarea {
    width: 90%;
    padding: 10px;
    height: 200px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-submit {
    width: 250px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    display: block;
    margin: 0 auto;
    font-size: 16px;
    padding: 15px;
    border-radius: 100vh;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.badge {
  width: 50px;
  height: 30px;
  text-align: center;
  background-color:#ff5a79;
  color: white;
  border-radius: 10%;
}

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

  .topp p {
    left: 30%;
    }
    }


/*画面幅1300px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1300px){

  .topp p {
    left: 20%;
    }


  ul.menu.outfit {
      display: none;
  }

  .hamburger-menu{
  display:inline
  }

  .menu-btn{
  position:fixed;
  top:10px;
  right:20px;
  display:flex;
  height:50px;
  width:50px;
  justify-content:center;
  align-items:center;
  z-index:90;
  background-color:#cdbc89;
  border-radius:15%
  }

  .menu-btn span,.menu-btn span:before,.menu-btn span:after{
  content:'';
  display:block;
  height:3px;
  width:25px;
  border-radius:3px;
  background-color:#fff;
  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-btn-check{
  display:none
  }

  .menu-content{
  width:100%;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:80;
  background-color:#3584bb
  }

  .menu-content ul{
  padding:70px 10px
  }

  .menu-content ul li{
  border-bottom:solid 1px #fff;
  list-style:none
  }

  .menu-content ul li a{
  display:block;
  width:100%;
  font-size:17px;
  box-sizing:border-box;
  color:#fff;
  text-decoration:none;
  padding:9px 15px 10px 0;
  position:relative;
  padding-left:2em
  }

  .menu-content ul li a::before{
  content:"";
  width:8px;
  height:8px;
  border-top:solid 2px #fff;
  border-right:solid 2px #fff;
  transform:rotate(45deg);
  position:absolute;
  left:11px;
  top:18px
  }

  .menu-content ul li span{
  padding:0 0 0 1.5em;
  display:block
  }

  .menu-content{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:100%;
  z-index:80;
  background-color:#000000c7;
  transition:all .5s;

  overflow:scroll
  }

  #menu-btn-check:checked ~ .menu-content{
  left:0

  }



}


/*画面幅1200px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){

  .topkv p {
      font-size: 2em;
      line-height: 2;
      padding: 5px 10px;
  }

  .topp p {
    left: 10%;
    }



  #contents {
      margin-top: 5px;
      padding: 50px 0;
      width: 94%;
      margin: auto;
  }


  div#media {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      width: 100%;
          margin: auto;


  .ourservice{
    max-width: 95%;
      margin: auto;
  }


  table.tbl-r02 {
    margin: 0px auto;
  width: 90%;
  line-height: 1;
  margin-top: 40px;
  }


  .tbl-r02 th {
    background: #dfd4b7;
    border: solid 1px #ccc;
    color: #333;
    padding: 10px;
  font-weight:bold;
  font-size:12px;
  width: 20%;
  }

  .tbl-r02 td{
  border: solid 1px #ccc;
  padding: 10px;
  background: #ffffff;
  color: #333;
  text-align: left!important;
  font-size: 12px;
  width: 50%;
  }



	/*title*/


	.title2{
	position: absolute;
	text-align: center;
  font-family:"Noto Sans JP";
	background-color:rgb(255 255 255 / 0%);
	font-weight: bold;
	animation-name: fadeup;
	animation-iteration-count: 1;
	top:50px;
	}

	.title2 .an2-fadeup {
		color: darkgreen;
	  font-size: 7vw;
	  animation-duration: 3s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	}

	.title2 .an3-fadeup {
		color: #4c4c4c;
	  font-size: 6vw;
		animation-duration: 5s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	  margin-top: -55px;
	}

	.title2 .an4-fadeup {
		color: #4c4c4c;
	  font-size: 2.3vw;
		animation-duration: 7s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	  margin-top: -30px;
	}

.box
{
	height: 17rem;
}


}









/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){



  figure#logo {
      width:150px;
      position: fixed;
      z-index: 100;
  }


  .mediabox{
    padding-bottom: 30px;
  width: 100%;
  }

  div#media {
      display: block;
  }


  #contents .list-column, #contents .list-column2 {
      width: calc(50% - 40px);
  }


  #footermenu li.title, #footermenu li.title a {
      opacity: 1;
      font-size: 100%;
  }

/*title*/

img.eitmservice5 {
    width: 35%;
   padding: 0px 0px 15px;
}

img.eitmservice2
{
  display: none;

  }



  img.eitmservice3
  {
display: flex;
width: 35%;
padding: 0px 0px 15px;
    }

    img.eitmservice4 {
        width: 35%;
        padding-bottom: 15px;
        padding-top: 10px;
    }


.img2 {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.img1{
display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

img.eitmservice1
{
	width: 35%;
	padding-bottom: 15px;
}




.title2{
position: absolute;
text-align: center;
font-family:"Noto Sans JP";
background-color:rgb(255 255 255 / 0%);
font-weight: bold;
animation-name: fadeup;
animation-iteration-count: 1;
top:60px;
}

.title2 .an2-fadeup {
	color: darkgreen;
  font-size: 7vw;
  animation-duration: 3s;
	animation-name: fadeup;
	animation-iteration-count: 1;
}

.title2 .an3-fadeup {
	color: #4c4c4c;
  font-size: 6vw;
	animation-duration: 5s;
	animation-name: fadeup;
	animation-iteration-count: 1;
  margin-top: -50px;
}

.title2 .an4-fadeup {
	color: #4c4c4c;
  font-size: 2.3vw;
	animation-duration: 7s;
	animation-name: fadeup;
	animation-iteration-count: 1;
  margin-top: -30px;
}

figure.listimg
{
	width: 40%;
}

.listtext
{
	width: 50%;
}

.btn1 a
{
	margin: 2px auto 0;
}



/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	float: left;	/*アイコンブロックを左に回り込み*/
	margin-left: 20px;	/*左側に空けるスペース*/
}

}

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

  .topp p {
    left: 0%;
    }


.topkv p {
    font-size: 1.5em;
    line-height: 1.5;
    padding: 5px 10px;
}

div#footermenu ul {
    width: 100%;
    margin: 0;
    font-size: 0.8em;
}

div#footermenu ul li {
    width: 25%;
}

table.tbl-r02,
.ceoimg {
    width: 100%;
}

.example {
    margin-bottom: 10px;
}

.seminarmenu {
    flex-direction: column;
}

.seminarmenu2{
  flex-direction: column-reverse!important;
}

.seminarmenu img,
.seminartext {
    width: 100%;
}

#contents p {
    padding: 5px 15px;
}


div#contact_mfp {
width: 94%;
}

.tbl-r02 th {
    width: 25%;
}

.keireki,
.ceoname p,
.schedule,
.seminartext,
#contents #media h2 {
    font-size: 1.2em;
}


}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

  contents .list-column-container {
  	justify-content: space-evenly;	/*中のブロックの横並びの揃え方*/
}



#contents .list-column, #contents .list-column2 {
    width:94%;
}

#contents {
    padding: 20px 0;
}


  #mainImg img{
  	width: 90%;
  	height: auto;
  　text-align : center;
  }




	/*title*/

  img.eitmservice6 {
      width: 90%;
      padding-bottom: 15px;
  }


  img.eitmservice {
      width: 90%;
     padding: 0px 0px 15px;
  }


  img.eitmservice1 {
      width: 90%;
     padding: 0px 0px 15px;
  }



picture.eitmservice {
    width: 90%;
   padding: 0px 0px 15px;
}


picture.eitmservice1 {
    width: 90%;
   padding: 0px 0px 15px;
}


  img.eitmservice2
  {
    display: none;

    }



    img.eitmservice3
    {
  display: flex;
  width: 90%;
  padding: 0px 0px 15px;
      }

      img.eitmservice5
      {
      display: flex;
      width: 90%;
      padding: 0px 0px 15px;
        }

      img.eitmservice4 {
          width: 90%;
          padding-bottom: 15px;
          padding-top: 10px;
      }




	.title2{
	position: absolute;
	text-align: center;
  font-family:"Noto Sans JP";
	background-color:rgb(255 255 255 / 0%);
	font-weight: bold;
	animation-name: fadeup;
	animation-iteration-count: 1;
	top:50px;
	}

	.title2 .an2-fadeup {
		color: darkgreen;
	  font-size: 7vw;
	  animation-duration: 3s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	}

	.title2 .an3-fadeup {
		color: #4c4c4c;
	  font-size: 6vw;
		animation-duration: 5s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	  margin-top: -30px;
	}

	.title2 .an4-fadeup {
		color: #4c4c4c;
	  font-size: 2.3vw;
		animation-duration: 7s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	  margin-top: -15px;
	}


.listbox
{
	position: relative;
    overflow: hidden;
    display: flex;
    color: #000;
    margin-bottom: 1px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    z-index: 100 !important;
}

figure.listimg
{
	width: 70%;
}
img.imgcontent
{
	float: left;
width: 100%;
margin: 5% 0 3%;
}

.listtext
{
	width: 85%;
	padding-top: 0px;
}


.cotop{
  margin: 0 0px;
}



p.listtx
{
	line-height: 1.3em;
}

.box
{
	height: 27rem;
}

.btn1 a
{
	margin: 8px auto 0;
}


	/*CEOメッセージ---*/
	.row{
		display: flex;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: -15px;
	  box-sizing: inherit;
		scroll-behavior:smooth;
		align-content: space-around;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	}

	.col-sm-8{
		position: relative;
	  width: 100%;
	  min-height: 1px;
	  padding-right: 15px;
	  padding-left: 15px;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 90%;
		flex: 0 0 90%;
		max-width: 90%;
	}

	.col-sm-4{
		position: relative;
	  width: 100%;
	  min-height: 1px;
	  padding-right: 15px;
	  padding-left: 15px;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;
    margin-top: 10px;
	}




/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;
	font-size: 2.93vw;
}

/*ヘッダーブロック（ロゴやメニューが入った最上段ブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	height: 50px;		/*ヘッダーの高さ*/
}
/*ロゴ画像*/
header #logo img {
	float: none;	/*左に回り込み*/
		height: 50px;	/*高さ。上のheaderのheightと合わせる。*/
}

/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	float: none;
	margin: 0px;
}
/*アイコン１個あたりの設定*/
ul.icon li {
	padding-top: 0px;
}

/*コンテンツ（contents）
---------------------------------------------------------------------------*/
/*コンテンツブロック全体*/

/*h2タグ*/

/*h3タグ*/
#contents h3 {
	padding-left: 15px;		/*左に空ける余白*/
}
#contents p {
    padding: 5px 15px;
}



p#A{
padding: 0px 0px 0px;
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu {display: none;}
.big1 {font-size: 20px !important;}
.sh {display:block;}
.pc {display:none;}
.ws,.wl {width: 94%;}
.fl {float: none;}
.fr {float: none;}

}


/*画面幅550px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:550px){

	.box
	{
		height: 25rem;
	}
}

/*画面幅500px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:500px){

	.box
	{
		height: 23rem;
	}

  img.eitmservice1
  {
  	width: 78%;
  	padding-bottom: 15px;
  }

  img.eitmservice
  {
  	width: 85%;
  	padding-bottom: 15px;
  }

  .mediabox img,
  .mediabox p{
    position: relative;
      padding: 0.5rem 0.5rem;
      margin: 0px 5%;
     font-weight: bold;
width: 90%;
  }

  .mediabox {
      padding-bottom: 10px;
  }

picture.eitmservice1
{
  width: 78%;
  padding-bottom: 15px;
}

picture.eitmservice
{
  width: 85%;
  padding-bottom: 15px;
}



  img.eitmservices
  {
  	width: 100vw;
  	height: 100vh;
  }





}
/*画面幅450px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:450px){



	.box
	{
		height: 21rem;
	}


	/*title*/


	.title2{
	position: absolute;
	text-align: center;
  font-family:"Noto Sans JP";
	background-color:rgb(255 255 255 / 0%);
	font-weight: bold;
	animation-name: fadeup;
	animation-iteration-count: 1;
	top:50px;
	}

	.title2 .an2-fadeup {
		color: darkgreen;
	  font-size: 7vw;
	  animation-duration: 3s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	}

	.title2 .an3-fadeup {
		color: #4c4c4c;
	  font-size: 6vw;
		animation-duration: 5s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	  margin-top: -20px;
	}

	.title2 .an4-fadeup {
		color: #4c4c4c;
	  font-size: 2.3vw;
		animation-duration: 7s;
		animation-name: fadeup;
		animation-iteration-count: 1;
	  margin-top: -10px;
	}
}



/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){



	.box
	{
		height: 19rem;
	}

}