@charset 'UTF-8';
@font-face {
  font-family:'Gen Shin Gothic P Bold';
  src:url('../fonts/GenShinGothic-P-Bold_0.eot');
  /* IE9 */
  src:url('../fonts/GenShinGothic-P-Bold_0.eot?#iefix') format('embedded-opentype'), url('../fonts/GenShinGothic-P-Bold_0.woff') format('woff'), url('../fonts/GenShinGothic-P-Bold_0.ttf') format('truetype'), url('../fonts/GenShinGothic-P-Bold_0.svg#Gen Shin Gothic P Bold') format('svg');
  /* iOS 4.1- */
  font-style:normal;
  font-weight:normal;
}
@font-face {
  font-family:'Gen Shin Gothic P Medium';
  src:url('../fonts/GenShinGothic-P-Medium_0.eot');
  /* IE9 */
  src:url('../fonts/GenShinGothic-P-Medium_0.eot?#iefix') format('embedded-opentype'), url('../fonts/GenShinGothic-P-Medium_0.woff') format('woff'), url('../fonts/GenShinGothic-P-Medium_0.ttf') format('truetype'), url('../fonts/GenShinGothic-P-Medium_0.svg#Gen Shin Gothic P Medium') format('svg');
  /* iOS 4.1- */
  font-style:normal;
  font-weight:normal;
}
@font-face {
  font-family:'myfont';
  src:url('../fonts/myfont.eot');
  src:url('../fonts/myfont.eot?#iefix') format('eot'), url('../fonts/myfont.woff') format('woff'), url('../fonts/myfont.ttf') format('truetype'), url('../fonts/myfont.svg#myfont') format('svg');
  font-weight:normal;
  font-style:normal;
}
[class^='og-'] ,[class*=' og-'] {
  font-family:'myfont';
  speak:none;
  font-style:normal;
  font-weight:normal;
  -webkit-font-feature-settings:normal;
     -moz-font-feature-settings:normal;
          font-feature-settings:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.og-icon01:before {
  content:'';
}

.og-icon02:before {
  content:'';
}

.og-icon03:before {
  content:'';
}

.og-icon04:before {
  content:'';
}

.og-icon05:before {
  content:'';
}

.og-icon06:before {
  content:'';
}

.og-icon07:before {
  content:'';
}

.og-icon08:before {
  content:'';
}

.og-icon09:before {
  content:'';
}

/* Mixin */
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html ,body ,div ,span ,object ,iframe ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p ,blockquote ,pre ,abbr ,address ,cite ,code ,del ,dfn ,em ,img ,ins ,kbd ,q ,samp ,small ,strong ,sub ,sup ,var ,b ,i ,dl ,dt ,dd ,ol ,ul ,li ,fieldset ,form ,label ,legend ,table ,caption ,tbody ,tfoot ,thead ,tr ,th ,td ,article ,aside ,dialog ,figure ,footer ,header ,hgroup ,menu ,nav ,section ,time ,mark ,audio ,video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article ,aside ,dialog ,figure ,footer ,header ,hgroup ,nav ,section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote ,q {
  quotes:none;
}

blockquote:before ,blockquote:after ,q:before ,q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  border:0;
  vertical-align:baseline;
  background:transparent;
}

ins {
  background-color:#ffff99;
  color:#000000;
  text-decoration:none;
}

mark {
  background-color:#ffff99;
  color:#000000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration:line-through;
}

abbr[title] ,dfn[title] {
  border-bottom:1px dotted #000000;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input ,select {
  vertical-align:middle;
}

/* #フォント */
/* #幅・余白 */
/* #色・カラー */
/* #ブレークポイント */
/* #共通部分 */
html {
  font-size:62.5%;
  -webkit-text-size-adjust:100%;
  font-family:'Roboto','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color:#333333;
}

body {
  min-width:320px;
  background:#22304f;
}

main {
  min-height:600px;
  background:#ffffff;
}
@media only screen and (max-width: 959px) {
  main {
    min-height:500px;
  }
}

h1 ,h2 ,h3 ,h4 {
  font-weight:normal;
}

@media only screen and (min-width: 960px) {
  .pcNo {
    display:none;
  }
}

.tbNo {
  display:none;
}
@media only screen and (max-width: 480px) {
  .tbNo {
    display:block;
  }
}

@media only screen and (max-width: 959px) {
  .spNo {
    display:none;
  }
}

footer strong ,header h1 ,header h2 ,#messageArea p ,#serviceArea p ,aside p {
  font-family:'Gen Shin Gothic P Medium';
  -webkit-transform:rotate(.05deg);
          transform:rotate(.05deg);
}

#serviceArea p ,aside p {
  position:relative;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%) rotate(.05deg);
          transform:translate(-50%, -50%) rotate(.05deg);
  display:inline-block;
  *display:inline;
  *zoom:1;
}

/* ##カラーオーバーレイ */
#serviceArea a:before ,aside a:before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  -webkit-transition:.3s;
          transition:.3s;
}

.maskRed:before {
  background:rgba(131, 69, 69, .6);
}

.maskYellow:before {
  background:rgba(119, 120, 36, .6);
}

.maskBlue:before {
  background:rgba(38, 42, 115, .6);
}

.maskGray:before {
  background:rgba(75, 74, 74, .6);
}

/* #フッター */
footer {
  position:relative;
  text-align:center;
  padding-bottom:50px;
  background:#22304f;
  /* ##ページトップ */
  /* ##会社情報 */
}
footer ,footer a {
  color:#ffffff;
}
footer a {
  font-family:'myfont';
  position:relative;
  display:block;
  background:#3e4a70;
  width:100%;
  height:70px;
  -webkit-transition:.3s;
          transition:.3s;
}
footer a:hover {
  background:rgba(255, 255, 255, .4);
}
footer a span {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  display:block;
}
footer a:before {
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
          transform:translate(-50%, -50%);
  display:block;
  text-align:center;
  font-size:50px;
  font-size:50px;
  font-size:5rem;
}
footer svg {
  width:40px;
  fill:#ffffff;
}
footer p {
  margin-top:50px;
  font-size:14px;
  font-size:14px;
  font-size:1.4rem;
  line-height:1.8;
}
footer strong {
  font-weight:normal;
  font-size:18px;
  font-size:18px;
  font-size:1.8rem;
  display:block;
  margin-bottom:25px;
}
footer small {
  display:inline-block;
  *display:inline;
  *zoom:1;
  font-size:12px;
  font-size:12px;
  font-size:1.2rem;
  text-transform:uppercase;
  margin-top:40px;
}

/* #ナビゲーション */
nav {
  *zoom:1;
  padding:20px 20px 20px 40px;
  position:fixed;
  width:100%;
  box-sizing:border-box;
  top:0;
  line-height:1;
  background:rgba(255, 255, 255, 0);
  -webkit-transition:padding .3s,background .3s;
          transition:padding .3s,background .3s;
  /* ##サイズを縮小 */
  /* ##塗りつぶして下線 */
  /* ##ロゴ */
  /* ##メニュー */
}
nav:after {
  content:'.';
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}
@media only screen and (max-width: 959px) {
  nav {
    padding-left:20px;
    padding-right:10px;
  }
}
@media only screen and (max-width: 480px) {
  nav {
    padding-left:0;
    padding-right:0;
  }
}
nav.move {
  background:rgba(255, 255, 255, .7);
  padding-top:7px;
  padding-bottom:7px;
}
nav.move p {
  font-size:18px;
  font-size:18px;
  font-size:1.8rem;
}
nav.moveCont {
  background:white;
  border-bottom:1px solid #eeeeee;
}
nav p {
  float:left;
  text-align:center;
}
@media only screen and (max-width: 480px) {
  nav p {
    float:none;
  }
}
nav ul {
  margin-top:5px;
  font-size:0;
  float:right;
  text-align:center;
}
@media only screen and (max-width: 480px) {
  nav ul {
    margin-top:0;
    float:none;
  }
}
nav li {
  display:inline-block;
  *display:inline;
  *zoom:1;
  font-size:14px;
  font-size:14px;
  font-size:1.4rem;
}
nav li:before {
  content:'|';
  display:inline-block;
  *display:inline;
  *zoom:1;
}
nav li a {
  display:inline-block;
  *display:inline;
  *zoom:1;
  padding:10px 15px;
  margin:0 5px;
}
@media only screen and (max-width: 959px) {
  nav li a {
    margin:0;
  }
}
@media only screen and (max-width: 480px) {
  nav li {
    margin-top:10px;
  }
  nav li a {
    margin:0;
    padding:10px;
  }
}
nav li:first-of-type:before {
  content:'';
}
nav a {
  color:#333333;
  text-decoration:none;
}

/* #メインイメージ */
header {
  position:fixed;
  top:0;
  width:100%;
  background:url(../images/top/hero.png) center center no-repeat;
}
header h1 ,header h2 {
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  font-weight:normal;
}
header h1 ,header h2 {
  padding:0 40px;
}
header h2 {
  line-height:1.6;
}
@media only screen and (min-width: 2015px) {
  header {
    background-size:cover;
  }
}
@media only screen and (min-width: 960px) {
  header {
    padding-top:174px;
    height:426px;
  }
  header h1 {
    font-size:48px;
    font-size:4.8rem;
    margin-top:50px;
  }
  header h2 {
    font-size:30px;
    font-size:3rem;
  }
}
@media only screen and (max-width: 959px) {
  header {
    padding-top:100px;
    height:300px;
    background-size:cover;
  }
  header h1 {
    font-size:36px;
    font-size:3.6rem;
    margin-top:10px;
  }
  header h2 {
    font-size:20px;
    font-size:2rem;
  }
}
@media only screen and (max-width: 480px) {
  header {
    padding-top:140px;
    height:260px;
    background:url(../images/top/herosp.png) right bottom no-repeat;
    background-size:cover;
  }
  header h1 ,header h2 {
    padding:0 20px;
  }
  header h1 {
    font-size:32px;
    font-size:3.2rem;
    line-height:1.4;
    margin-top:10px;
  }
  header h2 {
    font-size:18px;
    font-size:1.8rem;
  }
}

/* #コンテンツエリア */
main {
  position:relative;
  padding:55px 0 100px;
  background:white;
  margin-top:600px;
}
@media only screen and (max-width: 959px) {
  main {
    margin-top:400px;
  }
}

/* ##ニュースエリア */
#newsArea {
  max-width:960px;
  margin:0 auto;
  *zoom:1;
}
#newsArea:after {
  content:'.';
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}
#newsArea h2 {
  margin-top:15px;
  font-weight:normal;
  font-size:30px;
  font-size:30px;
  font-size:3rem;
  text-transform:uppercase;
}
#newsArea dl {
  font-size:14px;
  font-size:14px;
  font-size:1.4rem;
  *zoom:1;
  line-height:1.8;
}
#newsArea dl:after {
  content:'.';
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}
#newsArea dt ,#newsArea dd {
  vertical-align:top;
  padding-top:10px;
  padding-bottom:10px;
}
#newsArea dt {
  width:9em;
  float:left;
  clear:left;
}
#newsArea dd {
  padding-left:9em;
  border-bottom:1px solid #aaaaaa;
}
@media only screen and (min-width: 960px) {
  #newsArea {
    padding:0 20px;
  }
  #newsArea h2 {
    float:left;
    width:260px;
  }
  #newsArea dl {
    width:calc(100% - 260px);
    float:right;
  }
}
@media only screen and (max-width: 959px) {
  #newsArea h2 {
    text-align:center;
  }
  #newsArea dl {
    margin-top:40px;
  }
  #newsArea dt {
    padding-left:1em;
  }
  #newsArea dd {
    padding-right:1em;
    padding-left:10em;
  }
}
@media only screen and (max-width: 480px) {
  #newsArea dt {
    float:none;
    padding-bottom:0;
  }
  #newsArea dd {
    padding-top:0;
    padding-left:1em;
  }
}

#messageArea h2 ,#serviceArea h2 {
  text-transform:uppercase;
  font-weight:normal;
  font-size:36px;
  font-size:36px;
  font-size:3.6rem;
  text-align:center;
}

/* ##メッセージエリア */
#messageArea {
  margin-top:100px;
}
#messageArea h2 ,#messageArea p {
  margin-left:10px;
  margin-right:10px;
}
#messageArea p {
  text-align:center;
  font-size:16px;
  font-size:16px;
  font-size:1.6rem;
  line-height:1.6;
  margin-top:50px;
}
#messageArea p.messageLede {
  font-size:20px;
  font-size:20px;
  font-size:2rem;
  margin-top:60px;
}
#messageArea p span {
  white-space:nowrap;
}

/* ##各ページへのリンク */
#serviceArea a ,aside a {
  vertical-align:top;
  position:relative;
  display:inline-block;
  *display:inline;
  *zoom:1;
  color:#ffffff;
  text-decoration:none;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  width:50%;
}
#serviceArea a:hover:before ,aside a:hover:before {
  opacity:.5;
}
#serviceArea p ,aside p {
  padding:10px;
  font-size:22px;
  font-size:22px;
  font-size:2.2rem;
  line-height:1.4;
  text-align:center;
}
@media only screen and (max-width: 959px) {
  #serviceArea p ,aside p {
    font-size:20px;
    font-size:2rem;
  }
}
#serviceArea strong ,#serviceArea span ,aside strong ,aside span {
  white-space:nowrap;
  font-weight:mormal;
}

/* ###サービスへのリンク */
#serviceArea {
  margin-top:80px;
  font-size:0;
  *zoom:1;
}
#serviceArea:after {
  content:'.';
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}
#serviceArea a {
  height:350px;
}
@media only screen and (min-width: 1281px) {
  #serviceArea a {
    height:450px;
  }
}
@media only screen and (min-width: 960px) {
  #serviceArea h2 {
    display:none;
  }
}
@media only screen and (max-width: 959px) {
  #serviceArea h2 {
    margin-bottom:60px;
  }
  #serviceArea a {
    width:100%;
    height:250px;
  }
}

/* ###サブコンテンツへのリンク */
aside {
  background:#ffffff;
  position:relative;
}
aside a {
  height:200px;
}
@media only screen and (min-width: 1280px) {
  aside a {
    height:250px;
  }
}

/* ###コンテンツへのリンク個別背景設定 */
#serviceOffice {
  background-image:url(../images/top/serviceOffice.png);
}

#serviceSchool {
  background-image:url(../images/common/bgSchool.png);
}

#serviceArea a#serviceDigital {
  background-image:url(../images/top/serviceDigital.png);
  background-size:auto;
  background-color:#c9c7c7;
}

#serviceArea a#serviceNetwork {
  background-image:url(../images/top/serviceNetwork.png);
  background-position:right bottom;
}

#companyArea {
  background-image:url(../images/top/companyBg.png);
}

#contactArea {
  background-image:url(../images/top/contactBg.png);
}