@charset "UTF-8";
/* CSS Reset
---------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
.st-main .sec2 .sv .inner,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

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

a img {
  border: none;
}

/* add */
* {
  -webkit-appearance: none;
  -moz-box-sizing: border-box;
}

img {
  border: 0;
}

em {
  display: inline-block;
}

a {
  text-decoration: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

/* IE6 */
* html .clearfix {
  zoom: 1;
}

/* IE7 */
*:first-child + html .clearfix {
  zoom: 1;
}

/* .s5 template reset */
.s5-container {
  max-width: 100%;
  padding: 0;
}
.s5-container a {
  text-decoration: none;
}

br.b108,
br.b128,
br.b48,
br.b64,
br.b76,
br.b96 {
  display: none;
}

br.nb108,
br.nb128,
br.nb48,
br.nb64,
br.nb76,
br.nb96 {
  display: block;
}

@media screen and (max-width: 1279px) {
  br.b128 {
    display: block;
  }

  br.nb128 {
    display: none;
  }
}
@media screen and (max-width: 1079px) {
  br.b108 {
    display: block;
  }

  br.nb108 {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  br.b96 {
    display: block;
  }

  br.nb96 {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  br.b76 {
    display: block;
  }

  br.nb76 {
    display: none;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}
@media screen and (max-width: 639px) {
  br.b64 {
    display: block;
  }

  br.nb64 {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  br.b48 {
    display: block;
  }

  br.nb48 {
    display: none;
  }
}
/*
typography and default color set
 */
.st-main h1, .st-main .sec2 .sv .inner,
.st-main h2,
.st-main h3,
.st-main h4,
.st-main h5,
.st-main h6,
.st-main strong,
.st-main em {
  font-weight: bold;
}
.st-main h1, .st-main .sec2 .sv .inner,
.st-main h2 {
  color: #fff;
}
.st-main h3,
.st-main em,
.st-main p {
  color: #444444;
}

/*
main contents styles
 */
.st-main {
  font-family: "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
.st-main h1, .st-main .sec2 .sv .inner {
  font-size: 48px;
  line-height: 1;
  text-align: center;
}
.st-main h2 {
  font-size: 36px;
  line-height: 1.48;
  text-align: center;
}
.st-main h3 {
  font-size: 40px;
  line-height: 1;
  text-align: center;
}
.st-main h3.normal {
  font-weight: normal;
}
.st-main p {
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
}
.st-main p.bold {
  font-size: 18px;
  line-height: 2;
  font-weight: bold;
  padding: 0 30px;
}
.st-main p.note {
  font-size: 14px;
  line-height: 4;
}
.st-main a {
  text-align: center;
}
.st-main .imgbox {
  text-align: center;
  padding: 0 30px;
}
.st-main .imgbox.sp {
  display: none;
}
.st-main .imgbox img {
  max-width: 100%;
}
.st-main .imgbox img.sp {
  display: none;
}
.st-main section > .imgbox {
  padding: 0 30px;
}
.st-main #mv {
  background-image: url(../img/mv.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 992px;
  position: relative;
}
.st-main #mv .inner {
  padding-top: 255px;
  text-align: center;
}
.st-main h1, .st-main .sec2 .sv .inner {
  background: rgba(83, 168, 166, 0.85);
  padding: 30px 30px 35px;
  display: inline-block;
}
.st-main h1 span {
	font-size:30px;
	line-height:1.8;
	display:block;	
}
.st-main .intro {
  padding: 56px 0;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
}
.st-main .intro p {
  font-size: 18px;
  line-height: 2;
  color: #000;
  padding: 0 30px;
}
.st-main .intro p + p {
  margin-top: 24px;
}
.st-main .sec1 {
  padding: 130px 0;
}
.st-main .sec1 span.bold {
  font-weight: bold;
}
.st-main .sec1 h3 + p {
  margin-top: 56px;
}
.st-main .sec1.first {
  background: #f6f6f6;
}
.st-main .sec1.first .intro {
  display: none;
}
.st-main .sec1.first h3 {
  color: #53a8a6;
}
.st-main .sec1.first .imgbox {
  margin-top: 40px;
}
.st-main .sec1.second .imgbox {
  margin-top: 0px;
}
.st-main .sec1.third .imgbox {
  margin-top: 112px;
}
.st-main .sec2 {
  padding-bottom: 160px;
}
.st-main .sec2 .sv {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.st-main .sec2 .sv p {
  font-size: 18px;
  color: #fff;
  display: block;
}
.st-main .sec2 .sv + p {
  margin-top: 60px;
}
.st-main .sec2 .imgbox {
  margin-top: 64px;
}
.st-main .sec2.first .sv {
  background-image: url(../img/sv1.jpg);
}
.st-main .sec2.second .sv {
  background-image: url(../img/sv2.jpg);
}
.st-main .outro {
  font-size: 26px;
  line-height: 1.49;
  margin-top: 48px;
}
.st-main nav {
  max-width: 1200px;
  padding: 0 30px 120px;
  margin: 0 auto;
}
.st-main nav ul {
  display: flex;
  flex-wrap: wrap;
}
.st-main nav a {
  height: 120px;
  font-size: 30px;
  line-height: 1.53;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.25s;
  position: relative;
}
.st-main nav a:hover {
  opacity: 0.4;
}
.st-main nav a::before {
  position: absolute;
  left: 23px;
  top: 49px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #fff;
}
.st-main nav li:first-child {
  flex: 0 0 100%;
}
.st-main nav li:first-child a {
  background: #005073;
}
.st-main nav li:nth-child(2), .st-main nav li:last-child {
  flex: 0 0 47.5%;
  margin-top: 45px;
}
.st-main nav li:nth-child(2) a {
  background: #53a8a6;
}
.st-main nav li:last-child {
  margin-left: 5%;
}
.st-main nav li:last-child a {
  background: #e1e6e6;
}
.st-main nav li:last-child a::before {
  border-color: transparent transparent transparent #005073;
}
.st-main nav li:first-child .icon-window, .st-main nav li:last-child .icon-window {
  transform: translate(16px, 4px);
}
.st-main nav .icon-note {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

@media screen and (max-width: 1079px) {
  .st-main h1, .st-main .sec2 .sv .inner {
    font-size: 36px;
  }
  .st-main .intro p {
    font-size: 16px;
    line-height: 2.23;
  }
  .st-main nav a {
    font-size: 20px;
  }
  .st-main nav a .cisco_logo {
    width: 200px;
  }
}
@media screen and (max-width: 767px) {
  .st-main .imgbox {
    padding: 0 20px;
  }
  .st-main .imgbox img.sp {
    display: inline-block;
	width: 80%;
  }
  .st-main .imgbox img.pc {
    display: none;
  }
  .st-main p.bold {
    padding: 0 20px;
    line-height: 1.75;
  }
  .st-main section > .imgbox {
    padding: 0 20px;
  }
  .st-main h1, .st-main .sec2 .sv .inner {
    display: block;
    line-height: 1.45;
  }
  .st-main h1 span {
	font-size:22px;
	font-feature-settings : "palt";
  }
  .st-main #mv {
    background-image: url(../img/sp/mv.jpg);
    height: 592px;
  }
  .st-main #mv .inner {
    padding-top: 0;
  }
  .st-main #mv .intro {
    display: none;
  }
  .st-main .intro {
    position: static;
    background: none;
    height: auto;
    padding: 30px 20px 80px;
  }
  .st-main .intro p {
    text-align:left;
  }
  
  .st-main p.note {
  font-size: 12px;
  margin-top:20px;
  line-height: 1.5;
  }
  .st-main .sec1 {
    padding: 80px 0;
  }
  .st-main .sec1 h3 + p {
    margin-top: 30px;
  }
  .st-main .sec1 .imgbox {
    margin-top: 80px;
  }
  .st-main .sec1.first {
    padding-top: 0;
  }
  .st-main .sec1.first .intro {
    display: block;
  }
  .st-main .sec1.first .intro p {
    padding: 0;
  }
  .st-main .sec1.second .imgbox {
    transform: translateX(-10px);
	    margin-top: 30px;
  }
  .st-main .sec1.third h3 {
    line-height: 1.39;
  }
  .st-main .sec2 {
    padding-bottom: 80px;
  }
  .st-main .sec2 .sv {
    display: block;
  }
  .st-main .sec2 .sv .inner p {
    font-size: 18px;
  }
  .st-main .sec2 .sv .inner h2 {
    line-height: 1.5;
    font-size: 28px;
  }
  .st-main .sec2 .sv + p {
    margin-top: 80px;
  }
  .st-main .sec2.first .sv {
    height: 600px;
    background-image: url(../img/sp/sv1.jpg);
  }
  .st-main .sec2.second .sv {
    height: 895px;
    background-image: url(../img/sp/sv2.jpg);
  }
  .st-main .sec2 .imgbox {
    margin-top: 30px;
  }
  .st-main .sec1.third .imgbox {
    margin-top: 30px;
  }
  .st-main nav {
    padding: 0 20px;
  }
  .st-main nav ul {
    display: block;
  }
  .st-main nav ul li {
    width: 100%;
  }
  .st-main nav ul li:nth-child(n + 2) {
    margin-top: 25px;
  }
  .st-main nav ul li:last-child {
    margin-left: 0;
  }
  .st-main nav .icon-note {
    display: inline-block;
    width: 24px;
    margin-right: 8px;
    transform: translateY(-12px);
  }
  .st-main nav .icon-note img {
    width: 100%;
  }
  .st-main nav li:first-child .icon-window, .st-main nav li:last-child .icon-window {
    transform: translate(16px, 1px);
  }
}
@media screen and (max-width: 599px) {
  .st-main h1, .st-main .sec2 .sv .inner {
    font-size: 26px;
  }
  .st-main #mv {
    height: 500px;
  }
  .st-main .sec2.first .sv {
    height: 500px;
  }
  .st-main .sec2.second .sv {
    height: 720px;
  }
  .st-main nav ul li a {
    font-size: 14px;
    height: 80px;
  }
  .st-main nav ul li a .icon-note {
    width: 14px;
  }
  .st-main nav ul li a .cisco_logo {
    height: 12px;
    width: auto;
  }
  .st-main nav ul li a::before {
    border-width: 8px 0 8px 8px;
    top: 32px;
    left: 16px;
  }
  .st-main nav .icon-note {
    width: 18px;
    transform: translateY(2px);
  }
}
@media screen and (max-width: 479px) {
  .st-main h1, .st-main .sec2 .sv .inner {
    font-size: 28px;
    padding: 20px 0;
  }
  .st-main #mv {
    height: 350px;
  }
  .st-main .sec1 {
    padding: 60px 0;
  }
  .st-main .sec1.second {
    padding: 120px 0 30px;
  }
  .st-main .sec1.third {
    padding: 30px 0 120px;
  }
  .st-main .sec1 h3 {
    font-size: 28px;
  }
  .st-main .sec2 .sv + p {
    margin-top: 60px;
  }
  .st-main .sec2.first .sv,.st-main .sec2.second .sv {
    height: 320px;
  }
  .st-main .outro {
    font-size: 20px;
  }
}