@charset "UTF-8";


/*main.cssの読み込み
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@import url(main.css);

#application {
}
#application header {
  text-align: center;
  clear: both;
}
#application blockquote {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
  border: solid 1px #eae9e9;
  background: #F8F8F8;
  padding: 1.5em 1.5em 3.5em 1.5em;
  border-radius: 10px 10px 10px 10px;
}

#development {
  margin-top: 50px;
}
#development header {
  text-align: center;
  clear: both;
}
#development .table-wrapper {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
/*
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
*/  
}
#development table {
  width: 100%;
}
#development table tbody tr {
}
#development table td {
  padding: 0.75em 1.25em 0.75em 1.25em;
  border: solid 1px #eae9e9;
}
#development table th {
  text-align: left;
  font-weight: 400 bold;
  padding: 0.75em 1.25em 0.75em 1.25em;
  border: solid 1px #eae9e9;
  background: #f5f5f5;
}
#development table thead {
  background: #f5f5f5;
}


#development-middle {
  height: 200px;
}
#development-middle main {
}

/* --- 外枠の定義 ---------------------------------------------*/
#development .box {
  margin         : auto;                 /* サンプル用 中央寄せ */
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #fff;                 /* BOXの背景色         */
  margin: 50px 5% 50px 5%;

  /* ▼ FlexBoxの定義 */
  display        : flex;                 /* FlexBox定義         */
  justify-content: center;               /* 揃えの定義          */
  flex-wrap      : wrap;                 /* 折り返し定義        */
}

/* --- 個別のBOXの定義 --------------------------------------- */
#development .box div {
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  width          : 300px;                 /* サンプルBOXの幅     */
  height         : auto;                 /* サンプルBOXの幅     */
  margin         : 10px 10px 10px 10px;                  /* サンプルBOXの間     */
}
#development .box div div {
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  height         : auto;                 /* サンプルBOXの幅     */
  margin         : 0 0 0 0;                  /* サンプルBOXの間     */
  padding: 15px 15px 15px 15px;
}
#development .box div .box-title {
  display: table-cell;
  background-color: #f5f5f5;
  border: solid 1px #eae9e9;
  border-top-left-radius: 12.5px;
  border-top-right-radius: 12.5px;
  font-weight: bold;
  font-size: 18px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}
#development .box div .box-title.title-long-text {
  font-size: 11px;
}
#development .box div .box-title p {
  font-weight: bold;
}
#development .box div .box-message {
  border-left: solid 1px #eae9e9;
  border-right: solid 1px #eae9e9;
  border-bottom: solid 1px #eae9e9;
  border-bottom-left-radius: 12.5px;
  border-bottom-right-radius: 12.5px;
  font-size: 15px;
  height: 170px;
}
#development .box div .box-message ul li {
  padding: 5px 0 0 0;
  list-style-type: square;
  position: relative;
  left: 15px;
}

/* --- iconの定義 --------------------------------------- */
.icon-angular {width: 30px; height: 30px;}
.icon-redis {width: 80px; height: 30px;}
.icon-springboot {width: 30px; height: 30px;}
.icon-rabbitmq {width: 30px; height: 30px;}
.icon-googleappengine {width: 80px; height: 40px;}
.icon-java {width: 40px; height: 40px;}
.icon-microsoftazure {width: 100px; height: 50px;}
.icon-csharp {width: 30px; height: 30px;}
.icon-sqlserver {width: 100px; height: 50px;}
.icon-apachespark {width: 50px; height: 30px;}
.icon-mysql {width: 100px; height: 70px;}


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

  /* --- 個別のBOXの定義 --------------------------------------- */
  #development .box div {
    width          : 500px;                 /* サンプルBOXの幅     */
  }
  #development .box div .box-title.title-long-text {
    font-size: 15px;
  }
  
}

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

  /* --- 個別のBOXの定義 --------------------------------------- */
  #development .box div {
    width          : 400px;                 /* サンプルBOXの幅     */
  }
  #development .box div .box-title.title-long-text {
    font-size: 13px;
  }
  
}

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

  /* --- 個別のBOXの定義 --------------------------------------- */
  #development .box div {
    width          : 300px;                 /* サンプルBOXの幅     */
  }
  #development .box div .box-title {
    font-size: 15px;
    height: 80px;
  }
  #development .box div .box-title.title-long-text {
    font-size: 11px;
  }
  #development .box div .box-message {
    font-size: 13px;
    height: 170px;
  }

}