@charset "UTF-8";

ul.global-nav {
  -webkit-box-shadow: 0 4px 3px 0px rgba(0,0,0,0.2);
     -moz-box-shadow: 0 4px 3px 0px rgba(0,0,0,0.2);
          box-shadow: 0 4px 3px 0px rgba(0,0,0,0.2);
}

/* リンク文字色 */
ul.global-nav li a:link,
ul.global-nav li a:visited { color: #fff; text-decoration: none; }
ul.global-nav li a:hover,
ul.global-nav li a:active  { color: yellow; text-decoration: none; }

/* 背景色各色 */
ul.global-nav li:nth-child(1) a { background-color: #4cacfd; }
ul.global-nav li:nth-child(2) a { background-color: #4d8cfc; }
ul.global-nav li:nth-child(3) a { background-color: #4d70fc; }
ul.global-nav li:nth-child(4) a { background-color: #4364fb; }
ul.global-nav li:nth-child(5) a { background-color: #3d2fc9; }
ul.global-nav li:nth-child(6) a { background-color: #fe0096; }

/* 768px 以下 ( スマートフォン ) では非表示 */
.navigation, nav.global, nav.container {
  display: none;
}

/* 768px 以上 */
@media (min-width: 768px) {
  section.navigation, nav.global, nav.container { display: block; }
  nav.global {
  	width: 100%;
    background-color: #fff;
  }
  ul.global-nav {
    margin: 0;
  	padding: 0;
  	display: flex;
  	justify-content: space-around;
  	align-items: center;
  	list-style-type: none;
  }
  ul.global-nav li a {
  	display: block;
    width: 200px;
  	height: 100px;
  	min-height: 100px;
  	padding: 0;
  	text-decoration: none;
    color: #fff;
    font-size: 24px;
    text-align: center;
  	line-height: 1.3;
  	display: table-cell;
  	vertical-align: middle;
  }
}

/* 1200px以上 */
@media (min-width: 1200px) {

  section.navigation, nav.global, nav.container {
    display: block;
  }

	nav.container {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
  ul.global-nav {
    height: 100px;
    list-style: none;
    overflow: hidden;
    background-color: #fe0096;
  }
  ul.global-nav li {
    width: 200px;
    min-width: 200px;
    text-align: center;
  }
  ul.global-nav li a {
    color: #fff;
    background-color: #4cacfd;
    font-size: 30px;
    font-family: 'Teko', Sans-serif;
    text-decoration: none;
    position: relative;
    display: block;
  }
  ul.global-nav li a:hover { color: yellow; }
  ul.global-nav li a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;

    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #4cacfd;

    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -50px;
    z-index: 2;
  }

  /* What's SWY? */
  ul.global-nav li:first-child a {
    box-sizing: border-box;
    background-color: #4cacfd;
    padding-left: 15px;
    padding-top: 30px;
  }

  /* Messages from the Participants */
  ul.global-nav li:nth-child(2) a {
    box-sizing: border-box;
    background-color: #4d8cfc;
    padding-left: 35px;
    padding-top: 13px;
    line-height: 1.2;
  }
  ul.global-nav li:nth-child(2) a:after {
    border-left-color: #4d8cfc;
  }

  /* Media Coverage */
  ul.global-nav li:nth-child(3) a {
    box-sizing: border-box;
    background-color: #4d70fc;
    padding-left: 35px;
    padding-top: 30px;
  }
  ul.global-nav li:nth-child(3) a:after {
    border-left-color: #4d70fc;
  }

  /* How Can I Join? */
  ul.global-nav li:nth-child(4) a {
    box-sizing: border-box;
    background-color: #4364fb;
    padding-left: 35px;
    padding-top: 30px;
  }
  ul.global-nav li:nth-child(4) a:after {
    border-left-color: #4364fb;
  }

  /* Post-Program Activities */
  ul.global-nav li:nth-child(5) a {
    box-sizing: border-box;
    background-color: #3d2fc9;
    padding-left: 20px;
    padding-top: 15px;
    line-height: 1.2;
  }
  ul.global-nav li:nth-child(5) a:after {
    content: none;
    display: none;
  }

  /* SWYAA */
  ul.global-nav li:last-child {
    width: auto;
  }
  ul.global-nav li:last-child a {
    color: #fff;
    background-color: #fe0096 !important;
    padding-top: 62px;
  }
  ul.global-nav li:last-child a:after {
    border: 0;
  }
}