@charset "UTF-8";

@import url("grid.css");

.pc_only {}

.sp_only {

  display: none;

}

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

  .pc_only {

    display: none;

  }

  .sp_only {

    display: block;

  }

}

img {

  max-width: 100%;

  height: auto; /*高さ自動*/

}

a {

  display: block;

  text-decoration-line: none;

  color: #314e7f;

}

a:hover {

  color: #107c89;

}

a img:hover {

  opacity: 0.8;

}

.underline {

  border-bottom: 3px solid #000;

  padding-bottom: 0.5rem;

}

/*ヘッダー

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

header {

  position: relative;

}

.head {

  display: flex;

  flex-direction: row;

  padding: 0;

}

.head h1 {

  padding: 8px 0 0 0;

  line-height: 1;

  font-size: 1em;

  margin-bottom: 5px;

}

.head h1 img {

  width: 270px;

  height: auto;

}

.telbox {

  margin-left: auto;

  font-size: 3.0rem;

  padding: 0 0 0 0;

}

nav ul {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  list-style: none;

  margin-bottom: 1rem;

  position: absolute;

  top: 12px;

  right: 10px;

}

nav li {

  display: block;

  flex: 1 0 auto;

}

nav li a {

  text-decoration: none;

  text-align: center;

  color: #000000;

}

nav a:hover {

  background-color: #f7f7f7;

}

nav a {

  padding: 1rem 1.5rem;

}

.pagetit {

  background: url("../img/title_bg.png") right center no-repeat #314e7f;

  background-size: 1400px;

  height: 215px;

  padding-top: 5.5rem;

}

.pagetit h2 {

  display: inline-block;

  background: #000000;

  color: #ffffff;

  text-align: right;

  font-size: 1.5em;

  letter-spacing: 0.2em;

  padding: 1.5rem 8.0rem;

  min-width: 20rem;

}

@media screen and (min-width: 768px) {

  /* PC時はMENUボタンを非表示 */

  #open, #close {

    display: none !important;

  }

  #navi {

    display: block !important;

  }

}

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

  .container {

    padding: 0 1.0rem;

  }

  .head {

    flex-direction: column;

    text-align: left;

    height: 70px;

  }

  .head h1 {

    padding-top: 10px;

  }

  .head h1 img {

    max-height: 55px;

    width: auto;

  }

  .telbox {

    margin-left: 0;

    text-align: center;

  }

  .head #open, #close {

    position: absolute;

    top: 28px;

    right: 12px;

  }

  nav ul {

    flex-direction: column;

    position: relative;

    top: auto;

    right: auto;

    margin-left: -1rem;

    margin-right: -1rem;

    margin-bottom: 0;

  }

  nav li {

    padding-top: 0;

    border-bottom: 1px solid #ccc;

    margin-bottom: 0;

  }

  /* スマホ時はMENUボタンを表示 */

  #open, #close {

    display: block;

    width: 50px;

    border: none;

    position: absolute;

    top: 10px;

    right: 12px;

  }

  /* スマホ時はメニューを非表示 */

  #navi {

    display: none;

  }

  .pagetit {

    height: 155px;

    padding-top: 4.5rem;

  }

  .pagetit h2 {

    display: inline-block;

    background: #000000;

    color: #ffffff;

    width: auto;

    text-align: right;

    font-size: 1.2em;

    letter-spacing: 0.1em;

    padding: 1.5rem 3rem;

    min-width: 15rem;

  }

}

/*メイン画像

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

.mainimg img {

  width: 100vw;

}

/*メインコンテンツ

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

main {

  margin: 5rem 0 5rem 0;

}

/*新着情報

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

.news {

  padding: 5.5rem 0;

}

.news h2 {

  padding-bottom: 0.5rem;

  color: #15335e;

  font-size: 1.5em;

  font-weight: bold;

}

.news li {

  list-style-type: none;

  border-bottom: 1px solid #ccc;

  padding: 0.5rem 0;

}

/*フッター

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

footer {

  background-color: #000000;

  padding: 4rem 0;

  color: #ffffff;

  text-align: center;

}

footer a {

  color: #ffffff;

  display: inline-block;

}

footer h5 {

  border-bottom: 3px solid #ccc;

}

.footer_nav {

  text-align: center;

  margin-bottom: 3rem;

}

.copy {

  text-align: center;

  font-size: 0.75em;

}

/*ページトップへ戻るボタン

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

#pagetop {

  position: fixed;

  bottom: 15px;

  right: 15px;

}

#pagetop a {

  display: block;

  background: #314e7f;

  color: #fff;

  width: 50px;

  padding: 10px 5px;

  text-align: center;

}

#pagetop a:hover {

  background: #666;

}

/*パンくずリスト

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

.breadcrumb {

  margin: 0 0 1em 0;

  padding: 0;

}

.breadcrumb li {

  list-style-type: none;

}

.breadcrumb li a {

  display: inline-block;

  color: #959fa5;

}

/*TOP

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

body#top {

  background: url("../img/top_bg_right.png") right top no-repeat, url("../img/top_bg_left.png") left top no-repeat;

}

.service ul {

  margin-bottom: 10px;

  font-size: 0;

  vertical-align: bottom;

}

body#top .service li {

  list-style: none;

  display: inline-block;

  width: 33%;

  box-sizing: border-box;

  padding: 5px;

  margin-bottom: 0;

}

body#top .service li img {

  width: 100%;

  height: auto;

}

body#top .message_bg {

  background: url("../img/top_message_bg.png") bottom center no-repeat;

  background-size: 100% auto;

  width: 100%;

}

body#top .message {

  text-align: center;

  padding: 8rem 0;

}

body#top .message h2 {

  text-align: center;

  font-size: 2em;

  color: #030439;

}

body#top .message p {

  font-size: 1.2em;

  color: #030439;

  line-height: 2.5;

}

body#top .business_bg {

  background: #20375d;

  padding: 7rem 0;

  background-size: 100% auto;

  width: 100%;

}

body#top .business_01 {

  background: #ffffff;

  color: #20375d;

  padding: 3rem 0;

}

body#top .business_02 {

  background: #ffffff;

  color: #63498c;

  padding: 3rem 0;

    position: relative;

}

body#top .business_02 .new{

  position: absolute;

    top: -10px;

    right: -10px;

}

body#top .business_01 h2, body#top .business_02 h2 {

  text-align: center;

  font-size: 1.4em;

  font-weight: bold;

  margin: 0 auto;

  padding: 0.5rem 1rem;

}

body#top .business_01 h2 span {

  display: inline-block;

  border-bottom: solid 2px #20375d;

  padding: 0 1rem 0.6rem 1rem;

}

body#top .business_02 h2 span {

  display: inline-block;

  border-bottom: solid 2px #63498c;

  padding: 0 1rem 0.6rem 1rem;

}

body#top .business_01 p, body#top .business_02 p {

  padding: 1rem 3rem;

}

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

  main {

    margin: 2.5rem 0 2.5rem 0;

  }

  body#top .message {

    padding: 4rem 0;

  }

  body#top .message h2 {

    text-align: left;

    font-size: 1.5em;

    line-height: 2;

  }

  body#top .service li {

    display: block;

    width: 100%;

  }

  body#top .message p {

    text-align: left;

    font-size: 1em;

    line-height: 2;

  }

  body#top .business_bg {

    padding: 4rem 1rem;

  }

  body#top .business_01 {

    margin-bottom: 2rem;

  }

  body#top .business_01 p, body#top .business_02 p {

    padding: 1rem;

  }

}

/*開発実績

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

.develop {

  margin-bottom: 5rem;

}

.develop h3 {

  border-bottom: solid 2px #314e7f;

  padding: 8px 0;

  color: #314e7f;

  font-size: 1.4em;

  font-weight: bold;

}

.develop h4 {

  float: left;

  width: 20rem;

  clear: both;

  color: #314e7f;

  font-size: 1em;

  font-weight: bold;

}

.develop p {

  padding-left: 20rem;

  border-bottom: solid 1px #9ba7ce;

  padding-bottom: 8px;

  margin-bottom: 8px;

  color: #000;

}

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

  .develop {

    margin-bottom: 2rem;

  }

  .develop h4 {

    float: none;

    width: auto;

    margin-bottom: 0.5rem;

  }

  .develop p {

    padding-left: 0;

    margin-bottom: 1rem;

  }

}

/*会社情報+採用情報

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

.company h3 {

  border-bottom: solid 2px #314e7f;

  padding: 8px 0;

  color: #314e7f;

  font-size: 1.4em;

  font-weight: bold;

}

.company dl {

  display: table;

  width: 100%;

  margin-bottom: 1.5rem;

}

.company dl dt {

  display: table-cell;

  color: #314e7f;

  font-weight: bold;

  border-bottom: solid 1px #9ba7ce;

  width: 20rem;

  padding: 0.5rem 0;

  vertical-align: top;

}

.company dl dd {

  display: table-cell;

  border-bottom: solid 1px #9ba7ce;

    padding: 0.5rem 0 0.5rem 1rem;

  color: #000;

  padding-bottom: 1rem;

}

.company .photo {

  float: left;

  width: 120px;

  font-size: 1em;

  text-align: center;

  margin-right: 2rem;

  margin-bottom: 2rem;

  color: #666666;

}

.company .txt {

  padding-left: 150px;

}

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

  .company dl {

    display: block;

    margin-bottom: 1rem;

  }

  .company dl dt {

    display: block;

    border-bottom: none;

    width: auto;

  }

  .company dl dd {

    display: block;

    padding: 0.5rem 0 0.5rem 0;

  }

  .company .photo {

    float: none;

    width: 120px;

    margin: 0 auto;

  }

  .company .txt {

    padding-left: 0;

  }

}

/*フォーム

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

.btn_box {

  text-align: center;

}

button, input[type="submit"] {

  background: #314e7f;

  color: #ffffff;

  font-weight: normal;

  margin: 0 auto;

  padding: 0 40px;

  letter-spacing: 0.3em;

  border: solid 1px #314e7f;

}

button, input[type="submit"]:hover {

  background: #ffffff;

  color: #314e7f;

  border: solid 1px #314e7f;

}