* {
   margin: 0px;
   padding: 0px;
   font-size:1rem;
   
}
html,body{
  margin-top: 0px;
  padding-top: 0px;
}
body {
/*    font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
    font-weight: 300;*/
/*    font-size:1em;*/
    height: 100%;
    background-color: #fff;
   /* animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
   */
    padding-top:50px;
    background-color:#eeeeee;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*カード　ヘッダー*/
.header_card{
  height:2em;
  margin:0px 2px 5px 2px;
  padding-top:10px;
  background-color:rgb(112, 50, 50);
  font-size:2em;color:white;
  text-align:center;
}


.a11{
  color:red;
}
.area1{
  position: relative;
  width: 650px; /* 領域の幅を指定 */
  height: 400px; /* 領域の高さを指定 */
  margin: 1em 0;
  border: 1px solid #333;
  background-color: #9e9;
}

/* 画像に対して指定する class */
.area1 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/*-- B --*/
.box_pad{
  height:50px;
  width:auto;
  background-color:white;
  border: 0.1px solid #888888;
  border-left: solid 10px #5d627b;
  /*border-bottom: solid 1px #5d627b;*/
 /* border-top: solid 1px #5d627b;*/
  margin:1em;
  margin-left:1em;
  padding-bottom:5px;
  
}

.box_pad h1{
  padding-left:0.5em;
  padding-top:0.2em;
 /* margin-top:1em;padding-bottom:5px; */
}
.box_pad h2{
  padding-left:0.5em;
  padding-top:0.5em;
}
.box2 {
  margin:auto;
/*  border: solid 1px green; */
  box-sizing: border-box;
  width:300px;
  height:auto;
  text-align: center;
 
 
}
.box2 p { 
  color:red;
  padding-top:0.5em;
  padding-left:1em;
  font-size:1em;
  text-align:left;
  line-height:0.2em;
} 

.box3 {
  margin:auto;
/*  border: 1px solid #000; */
  box-sizing: border-box;
  padding-left:5px;
  width:320px;
  height:auto;
  text-align: center; 
  position: relative;
  display: flex;
 /* border: 1px solid darkgray;*/
  display: flex;
}

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

/* 外枠に設定する class */


.box6 {
  margin:auto;
  border: solid 1px yellow;
  box-sizing: border-box;
  width:400px;
  height:300px;
  text-align: left;
  float:left;
  position: relative;
  display: flex;
  border: 1px solid darkgray;
  
}

.box6 img {
  width:100%;
  height:100%;
  
}
.right {
  width: 58%;
  display: inline-block;
  vertical-align: top;
} 
.box4 {
  margin:auto;
  border: solid 1px green;
  box-sizing: border-box;
  width:300px;
  height:140px;
  text-align: center;
 
 
}
.box4 p { 
  color:red;
  padding-top:0.5em;
  padding-left:1em;
  font-size:1em;
  text-align:left;
  line-height:0.2em;
} 
.blktext{
  background-color:#333;color:white;
  width:400px;font-size:0.8em;
  padding:1em;
  margin:1em;
}

/*-- C --*/
.card-text2{
  margin-top:1rem;
  margin-left:1em;
  font-size:1rem;
}
.card_fmt{
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  height:560px;
  border-top:5px solid #411c1c;
  /*font-size:1.2em;*/
}

.card_img{
  width:80%;
  height:80%;
  margin:5px
}
.caption-1{
  margin-top:1em;
  padding-left:10px;
  border:1px solid silver;
  border-left:10px solid green;

}
.caption-r{
  margin-top:1em;
  margin-left:1em;
  padding-left:1em;
  background-color:white;
  border:1px solid green;
  border-left:10px solid red;

}
.cmdlist{
  color:orange;
  font-size:1.5em;
}
.caption-2{
  width: 350px;
  margin-top:1em;
  margin-left:1em;
  padding-top:5px; 
  padding-left:1em;
  padding-bottom:1em;
  border:1px solid white;
  border-left:10px solid rgb(50, 29, 128);
  border-bottom:1px solid rgb(50, 29, 128);
  height:35px;
  color:black;

}

.caption_h{
  margin:1em;
  padding-left:1em;
  border:1px solid silver;
  border-left:10px solid #f00;
  padding-top:5px;
  background-color:white;
}

.contents_box{
  height:250px;
  width:100vw;
/*  background-image:url("rpi028.png");*/

}

.concept_text{
  text-align:center;
  font-size:10e;
  margin:10px;
  padding-left:100px;
  padding-right:100px;
  padding-top:10px;
  color:#fff;
}
/*-- D -----------------------------*/
.dot{
  content: url(g850.png);
  color:red;
  position: relative;
  padding-right:10px;
  margin-top:3px;
  float: left;

}

/*-- E -----------------------------*/
.exsample_box {
  padding: 0.5em 0.5em;
  margin: 1em 0;
  background-color: whitesmoke;
  color: #5d627b;
 /* width: 300px;
  height: 150px;*/
  /*/border: 0.5px solid black; */
  border-top: solid 5px #5d627b;
  /*margin-left:200px; */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* ここから追加分 */
.exsample_box{
  position: relative;
}


.exsample_box1 {
  padding: 0.5em 0.5em;
  margin: 1em 0;
  background-color: whitesmoke;
  color: #5d627b;
 /* width: 300px;
  height: 150px;*/
  /*border: 0.5px solid black; */
  border-top: solid 5px #5d627b;
  /*margin-left:200px; */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  background-image:url("rpi028.png");
}
/* ここから追加分 */
.exsample_box1{
  position: relative;
}
.example{
   color: red;/*色を変える*/ 
   font-size:16px;

}
.example:before{
  color: red;/*色を変える*/ 
  content: url(g850.png);

    margin: 10px;
    position: relative;
    top: 3px;
    font-size:5em;
}


/*-- F -----------------------------*/ 
.footer_text{
  font-size:1em;
  background: rgb(80,80,80);
  margin-top:10px;
  padding-top:0.5em;
  height:100%
}
.footer_text:after{
  color:white;
  content: "©2020 ARX.Co.Ltd.,";
}
.f_font{
  font-size:0.4em;
/*  margin-top:1em;*/
  padding-top:0.5em;
  text-align:center;
}
.f_set{
  background: rgb(80,80,80);
  height:70px;line-height:0.3em;
  padding-top:10px;
}

.f_link1:after{
  font-size:0.7em;
  color:#fff;
  content:'株式会社アークス';
}
.f_link2:after{
  font-size:0.7em;
  color:#fff;
  content:'サイトポリシー';
}
.f_link3:after{
  font-size:0.7em;
  color:#fff;
  content:'お問い合わせ';
}
.footer_text{
  text-align:center;
  font-size:0.7em;
  margin-top:5;
}
.font_test{
  font-family: fantasy; /*"Swis721 BlkEx BT"; */ 

}

.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
 
}
.flex > *{
  width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

/*-- G -----------------------------*/
.graytext{
  background-color:#ccc;
  color:black;
  width:440px;font-size:0.8em;
  padding:1em;
  margin:1em;
}
/*グラデーション*/
.gradation{
  background: linear-gradient(to right, red, white);
  width: 600px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*-- H -----------------------------*/

.header_top{  /*ヘッダー*/
  padding-top:0px;
  height:250px;
  margin-top:0px;
  background-image:url("../img/top5B.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.header_a1{
  display: flex;
  justify-content: center;
  align-items: cover;
  height:100px;
  margin-top:0px;
  background-image:url("../img/top5B.jpg");
}
p.contents_a1 img{
  width: 100%;
}

.header_a2{
  padding-top:0px;
  padding-bottom: 0px;
  margin-top:0px;
  margin-bottom: 0px;
  height:180px;
  margin-top:0px;
  width:100vw;
  background-image:url("../img/resize0918.jpg");
/*  background-image:url("image823-8.png"); */
  background-size:cover;
  background-repeat:no-repeat;
  position:fixed;
  z-index: 2;
  
}

.header_a2 p{
  font-size:2.5em;
  padding-top:18px;
  text-align:center;
  color:#fff;
}
.header_a3{
   
  height:180px;
  
  margin-top:0px;
  background-image:url("../img/resize0918.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}
.header_a3 p{
  font-size:2.5em;
  padding-top:18px;
  text-align:center;
  color:#fff;
}


/*全体*/
.hidden_box {
  margin: 2em 0;/*前後の余白*/
  padding: 0;
}
/*ボタン装飾*/
.hidden_box label {
  font-size:0.8em;
  padding: 2px;
  font-weight: bold;
  border: solid 1px black;
  cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
  background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
  display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}
/*  I */
.inline-box1 {
  display: inline-block;      /* インラインブロック要素にする */
  background-color:  #ccc;    /* 背景色指定 */
  padding:  20px;             /* 余白指定 */
  height: 280px;
  width:30%              /* 高さ指定 */
}
.inline-box2 {
  display: inline-block;      /* インラインブロック要素にする */
  background-color:  #ccc;    /* 背景色指定 */
  padding:  20px;             /* 余白指定 */
  height: 280px;              /* 高さ指定 */
  width: 65%;
}
.info_box2 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background-color: whitesmoke;
  color: #5d627b;
 /* width: 300px;
  height: 150px;*/
  border: 0.5px solid white;
  border-top: solid 5px #584d57; 
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 
}


.info_box {
  padding: 0.5em 1em;
  margin: 1em 0;
  background-color: whitesmoke;
  color: #5d627b;
 /* width: 300px;*/
/*  height: 150px;*/
  border: 0.5px solid white;
  border-top: solid 5px #584d57; 
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 
}
/* ここから追加分 */
.info_box_nh{
  position: relative;
}

.info_box{
  position: relative;
}

.info_box a{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 150px;
  
}
.info_box:hover {
  background-color: #fff;
  border-color: #ec0f0f;
  color: #a14863;
}

.info_box:hover_b {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}


.info_box::before,
.info_box::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.info_box_nh{
  position: relative;
}

.info_boxN{
  position: relative;
}

.info_boxN a{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 150px;
  
}
.info_boxN:hover {
/*  background-color: #fff;
  border-color: #ec0f0f;*/
  color: #a14863;

}

.info_boxN:hover_b {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}

/*-- L --*/

/*-------------------*/
/*テキスト関係　*/


.leftdot {
  
  color: red; /*#505050;   文字色*/
  padding: 0.2em;          /*文字周りの余白*/
 /* display: inline-block; :?  
  line-height: 1.6;        /*改行高*/
  background: #fff;        /*確認用*/
  vertical-align: middle;
  font-size: 1.3em;
  
}
.leftsqr {
  
  color: black; /*#505050;   文字色*/
  padding: 0.1em;          /*文字周りの余白*/
/*  display: inline-block;   */
  line-height: 1em;        /*改行高*/
  vertical-align: middle;
  /*font-size: 1em;*/
  
}

.leftsqr:before {
  content: '■';
  color: rgb(238, 98, 122);
  margin-right: 8px;
}
.leftdot:before {
  content: url(sdot.png);
  height:10px;
  width:10px; 
  color: silver;
  margin-right: 8px;
}
*/



.logo_font_sw717{
  color:red;
   font-family: 'Archivo Black', sans-serif;
   font-size: 120%;
   font-style: italic;
   
}
.logo_font{
  margin-left:30px; 
  color:red;
  font-family: 'Century', sans-serif;
  font-size: 120%;
  font-weight: bold;
   
}

.labo_text{     /*infomation*/
   height:30px;
   font-family: cursive, sans-serif;
   font-size: 150%;
   text-align:center;
   margin:10px;
   padding-top:10px; 
}

.main_contents{
  background-color:white;
  border:1px solid silver;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

/*-- P --*/


/*イメージ*/
.photo{ 
  max-width:40%;
  height:auto;
  margin:auto;
  padding:0.5em 50px 2em 1em;

}
.photo2{ 
  max-width:40%;
  height:auto;
  margin:auto;
  padding:0.5em 50px 2em 1em;

}
.photo3{ 
  max-width:30%;
  height:auto;
  margin:auto;
  padding:0.5em 50px 2em 1em;

}
.photoL{ 
  max-width:100%;
  height:auto;
  margin:auto;
  padding:0.5em 50px 2em 1em;

}
/*-- R -- */
.right_mess{
  padding-top:0em;
  padding-top:5px;
  margin-bottom:100px;
 /* height:100px;*/
  text-align:right;
  }
  .right_mess:after{
    content: "2020/06";
   }

/*-- S -- */
.shadow_text{
  text-shadow:3px 3px 3px rgba(27, 5, 5, 0.74); /*668888;*/
  text-align:center;
  color:#fff;
}
.shadow_text2{
text-shadow:3px 3px 3px #aaa; /*668888;*/
text-align:center;
color:#fff;
}
.sentence{
  clear:both;  		    /*回り込み解除*/
  margin-left:0.2em;
  margin-right:0.2em;
  padding:0;
  /*border:1px solid #f0f; */   /*確認用*/
  padding-bottom:0px;
  padding-top:0em;
}
.sentence p{
  position: relative;
  font-size:1em;
  line-height:2em;
  padding:0;
  margin:0em 2em 0px 1em;
 /* border:1px solid #f00;*/    /*確認用*/

}

.sentence_m{
  font-size:1.1em;
  margin-left:0.2em;
 /* padding:1em;*/
  border:1px solid #000
}
.sentence_m p{
  font-size:1em;
}

.sentence_m:before{
  color: red;/*色を変える*/ 
/*  content: url(g850.png);*/

    margin: 10px;
    position: relative;
    top: 3px;
    font-size:2em;

}
.side_left{
  background-color:white;
  border:1px solid silver;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.side_left p{
  font-size:1em;
}

.side_set{
  background-color:white;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.side_form{
  margin-top:10px;padding:10px 0 0 10px;
  border:1px solid silver;
  
}
.side_form a{
  font-size:0.8rem;
  line-height: 3em;

}
.spc1{
  margin-right:0.5em;
}
.spc2{
  margin-right:1em;
}
.spc4{
  margin-right:4em;
}
.spc5{
  margin-right:5em;
}
.spc6{
  margin-right:6em;
}
.spc7{
  margin-right:7em;
}
.spc8{
  margin-right:8em;
}
.spc9{
  margin-right:9em;
}
.spc10{
  margin-right:10em;
}
.show-area{
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 0;
  color: blue;
}

/*-- T --*/
.title_h{
  
  margin:1em;
  padding-left:1em;
  border: 0.1px solid #888888;
  border-left: solid 10px #627b;
  background-color:white;
}
.title2{
  width:410px;
  height:34px;
  background-color:#8e8e8e;
  color:white;
  padding:2px;
  padding-left:1em;
  margin-top:0.5em;
  }
  .title_text{
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  }
  .titlepi_text{
    margin-top:0px;
    padding-top:90px;
    color:white;
    /*display: flex;*/
    /*justify-content: center;
    align-items: center;*/
    text-align:center;
    /*text-shadow: 0 2px 5px rgba(a, a, a, .5);*/
    text-shadow:2px 2px 3px #333333;
  }
  .top_cap{
    margin-left:30px; 
    color:red;
    font-family: 'Century', sans-serif;
    font-size: 150%;
    font-weight: bold;
     
  }
  .top_line{
    border-bottom:3px solid #f00;
  }
  .table-of-contents{
    display: none;
  }
 


  /*-- U --*/
  .under4 {
    color: #000;/*文字色*/
    padding: 0.5em;/*文字周りの余白*/
    display: inline-block;/*おまじない*/
    line-height: 1.5;/*行高*/
    /*background: #dbebf8;  */              /*背景色*/
    vertical-align: middle;
    /*border-radius: 25px 0px 0px 25px;*/   /*左側の角を丸く*/
  }
  
  .under4:before {
    content: '●';
    color: red;
    margin-right: 8px;
  }
  .under {
    margin-top:1.5em;
    margin-bottom:0;
    padding-left:1em;
    border:1px solid #fff;  /*確認用*/
    color:222;
    position: relative;
    padding-top: 1em ;
    width:400px;
  }
  .under:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(200, 200, 200), transparent);
    background: linear-gradient(to right, rgb(200, 200, 200), transparent);
  }

  .w_date{      /*Writing Date*/ 
    height:3em;
    padding-right:40px;
    margin-bottom:20px;
    text-align:right;
    
  }
  .w_date:after{
   content: "アークス研究所 Since 2020/06";
  }
  .w_date2{      /*Writing Date*/ 
    height:3em;
    padding-right:40px;
    margin-bottom:20px;
    text-align:right;
    
  }
  .w_date2:after{
    content: "アークス研究所 Since 2020/12";
   }



/* ボックススタイル */







.mem_box {
  padding: 0.5em 0.5em;
  margin: 1em 0;
  background-color: whitesmoke;
  color: #5d627b;
 /* width: 300px;
  height: 150px;*/
  /*border: 0.5px solid black;*/
 /* border-top: solid 5px #5d627b;*/
  /*margin-left:200px;*/
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* ここから追加分 */
.mem_box{
  position: relative;
}

.mem_box p{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 150px;
  padding-left:200px;
  
}
/*説明画像*/
.picture_box {
  height:260px;
  color: #5d627b;
/*  border: 0.5px solid white;*/ /*確認用*/

}
/* ここから追加分 */
.picture_box{
  position: relative;
}


.picture_box::before,
.info_box::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}


/*メンバー紹介*/
.member_box {
  padding: 0.5em 0.5em;
  margin: 1em 0;
  background-color: whitesmoke;
  color: #5d627b;
  height:120px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  clear:left;
}
/* ここから追加分 */
.member_box{
  position: relative;
}

.member_box p{
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 0;
  left: 150px;
  
}

.member_box img {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  margin-top:5px;
  border: 3px solid #000080;margin-left:20px;
}

.pbox1 {
  margin:auto;
/*  border: 1px solid #000; */
  box-sizing: border-box;
  
  text-align: center; 
  position: relative;
  display: flex;
 /* border: 1px solid darkgray;*/
  display: flex;
 
}
.pbox {
  margin:auto;
/*  border: solid 1px green; */
  box-sizing: border-box;
   text-align: center;
   width:150px;
   height:auto;
 
}


/*----画像　---*/
.img-flex{
    border: 1px solid red;
    margin: 10px;
    display: -webkit-flex;
    display: flex;
    display:-webkit;
    display: justify-content -space-between;
    justify-content: space-between;
        
}

.img-flex img { width: 19%; height: 19%; }
.img-flex-3 img { width: 32%; height: 32%; }
.img-flex-4 img { width: 24%; height: 24%; }


.img-area{
    border: 1px solid red;
/*    display: -webkit-flex; */
    display: flex;
/*    display:-webkit-justify-content: space-between; */
/*    justify-content:space-between; */
   padding:20px;

}
.img-area img { width: 40%; height: 40%; }

.img-area p{
    color:red;
}



/*

//-----------------------

// 大デバイス（デスクトップ, 1200px 未満）
@media (min-width: 992px) {
  .title {
    font-size: 7.0rem;
  }
}
// 中デバイス（タブレット, 992px 未満）
@media (max-width: 991.98px) {
  .title {
    font-size: 4.0rem;
  }
}
// 小デバイス（横向きモバイル, 768px 未満）
@media (max-width: 767.98px) {
  .title {
    font-size: 2.0rem;
  }
}
// @include media-breakpoint-up(sm) {
// 極小デバイス（縦向きモバイル, 576px 未満）
@media (max-width: 575.98px) {
  .title {
    font-size: 1.0rem;
  }
}
*/