@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
  font-weight: 400; }

p, a, span, strong, small, li {
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }

p {
  line-height: 130%;
  font-size: 18px !important; }

br {
  margin: 10px 0; }

@font-face {
  font-family: 'Font Awesome';
  src: url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0");
  src: url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"), url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg"); }

.tooltip {
  cursor: pointer; }

.tooltip_element .tip {
  cursor: pointer;
  display: inline-block;
  border: 1px solid #1580a5;
  border-radius: 20px;
  height: 14px;
  width: 14px;
  text-align: center;
  color: #1580a5;
  margin-left: 8px;
  padding: 1px;
  font-size: 11px;
  line-height: 100%;
  vertical-align: top;
  text-transform: uppercase;
  font-weight: 500; }
  .tooltip_element .tip:after {
    display: none; }

.tooltip_element .tiptip {
  display: none;
  width: 20px;
  position: absolute;
  margin: -16px 0 0 13px; }

@keyframes arrowAnimation {
  0% {
    color: rgba(0, 0, 0, 0.33);
    animation-timing-function: ease-in; }
  33% {
    color: rgba(0, 0, 0, 0.33);
    animation-timing-function: ease-out; }
  45% {
    color: #000000;
    animation-timing-function: ease-in; }
  60% {
    color: #000000;
    animation-timing-function: ease-out; }
  80% {
    color: rgba(0, 0, 0, 0.33);
    animation-timing-function: ease-in; }
  100% {
    color: rgba(0, 0, 0, 0.33); } }

@-webkit-keyframes arrowAnimation {
  0% {
    color: rgba(0, 0, 0, 0.33);
    animation-timing-function: ease-in; }
  33% {
    color: rgba(0, 0, 0, 0.33);
    animation-timing-function: ease-out; }
  45% {
    color: #000000;
    animation-timing-function: ease-in; }
  60% {
    color: #000000;
    animation-timing-function: ease-out; }
  80% {
    color: rgba(0, 0, 0, 0.33);
    animation-timing-function: ease-in; }
  100% {
    color: rgba(0, 0, 0, 0.33); } }

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes headerText {
  0% {
    opacity: 0;
    margin-left: -10px; }
  100% {
    opacity: 1;
    margin-left: 10px; } }

@-webkit-keyframes headerText {
  0% {
    opacity: 0;
    margin-left: -10px; }
  100% {
    opacity: 1;
    margin-left: 10px; } }

@-webkit-keyframes progressFill {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes progressFill {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.error-container {
  text-align: center;
  padding: 20px;
  min-height: 300px; }
  .error-container h2 {
    margin-bottom: 15px !important; }

.topBar {
  height: 40px;
  background: rgba(208, 61, 36, 0.1);
  color: #222222;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  background-color: #f9f9f9; }
  .topBar ul {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end; }
    .topBar ul li {
      display: inline-block; }
      .topBar ul li a {
        color: #222222;
        font-weight: 300;
        font-size: 16px;
        margin: 0 10px;
        text-decoration: none;
        transition: all .4s; }
        .topBar ul li a:hover {
          color: #9c9c9c;
          transition: all .4s; }
      .topBar ul li::after {
        content: "|"; }
      .topBar ul li:last-child a {
        margin-right: 0; }
      .topBar ul li:last-child::after {
        content: ""; }
  .topBar.prtl ul li:first-child a::before {
    font-family: "Font Awesome";
    margin-right: 10px;
    content: ""; }
  @media only screen and (max-width: 480px) {
    .topBar.prtl ul li:first-child span {
      display: none; } }

nav {
  width: 100%;
  z-index: 2000;
  position: absolute;
  background-color: #f9f9f9; }
  nav .navContainer {
    transition: all .4s;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px;
    align-items: center;
    background: #f9f9f9; }
    nav .navContainer .nav_logo {
      height: 80px;
      display: flex;
      align-items: center; }
      @media only screen and (max-width: 960px) {
        nav .navContainer .nav_logo img {
          width: 200px; } }
      @media only screen and (max-width: 560px) {
        nav .navContainer .nav_logo {
          width: 200px; } }
    nav .navContainer h1 {
      transition: all .8s;
      width: 200px; }
      nav .navContainer h1 a {
        /*
				text-indent: -9999em;
			    display: block;
			    width: 215px;
			    height: 70px;
			    background: url(/img/2019/newsmail.png) no-repeat;
			    background-size: 215px;
			    transition: all .4s;
			    */ }
        nav .navContainer h1 a img {
          display: block;
          max-width: 120px;
          margin-top: 30px;
          transition: all .8s; }
        nav .navContainer h1 a svg {
          display: inline-block;
          width: 120px;
          margin-top: 30px;
          transition: all .8s; }
          nav .navContainer h1 a svg .text {
            opacity: 1;
            transition: all .8s; }
          nav .navContainer h1 a svg.alt-text {
            opacity: 0;
            overflow: hidden;
            transition: all .8s;
            position: absolute;
            top: -80px;
            margin-left: -50px;
            display: none;
            width: 150px; }
          @media only screen and (max-width: 768px) {
            nav .navContainer h1 a svg {
              margin-top: 5px;
              width: 95px;
              transition: all .8s;
              float: left; }
              nav .navContainer h1 a svg .text {
                opacity: 0;
                transition: all .8s; }
              nav .navContainer h1 a svg.alt-text {
                animation: headerText .8s forwards;
                animation-delay: .2s;
                width: 150px;
                display: inline-block;
                top: -70px; } }
          @media only screen and (max-width: 480px) {
            nav .navContainer h1 a svg.alt-text {
              display: none; } }
    nav .navContainer ul {
      display: block;
      width: 100%;
      margin: 40px 0 40px;
      transition: all 1.2s; }
      nav .navContainer ul.flex {
        align-items: center;
        text-align: right; }
      nav .navContainer ul li {
        display: inline-block;
        margin: 0 10px; }
        nav .navContainer ul li a {
          font-weight: 300;
          font-size: 18px;
          text-decoration: none;
          color: #222;
          transition: all .4s; }
          nav .navContainer ul li a.active {
            font-weight: 400; }
          nav .navContainer ul li a.current {
            font-weight: 700; }
          nav .navContainer ul li a.jpnNavItem.active {
            font-weight: 700; }
          nav .navContainer ul li a:hover.jpnNavItem {
            color: #d31f27; }
          nav .navContainer ul li a.orderLink {
            padding: 12px 18px;
            border: 1px solid #d03d24;
            border-radius: 3px;
            margin-right: 0;
            background: #d03d24;
            transition: all .4s;
            color: white; }
            @media only screen and (max-width: 768px) {
              nav .navContainer ul li a.orderLink {
                padding: 7px 18px; } }
        nav .navContainer ul li.orderBtn a {
          color: #fff;
          font-weight: 300;
          font-size: 21px;
          text-shadow: none;
          transition: all .4s; }
        nav .navContainer ul li.orderBtn:hover {
          background: none;
          transition: all .4s;
          cursor: pointer;
          color: transparent;
          opacity: 0.5; }
          nav .navContainer ul li.orderBtn:hover a {
            color: white;
            transition: all .4s; }
        @media only screen and (max-width: 768px) {
          nav .navContainer ul li.orderBtn {
            padding-top: 20px; }
            nav .navContainer ul li.orderBtn a {
              color: #fff; } }
      @media only screen and (max-width: 768px) {
        nav .navContainer ul {
          display: none;
          margin-top: 0; }
          nav .navContainer ul.show {
            display: block; }
          nav .navContainer ul li {
            width: 100%;
            margin: 0;
            padding: 10px;
            text-align: center;
            border-top: 1px dashed #d03d24; }
            nav .navContainer ul li.hasChild:hover .subNav {
              display: none !important; } }
    nav .navContainer #responsive-navbar {
      position: relative;
      display: none;
      top: 50px;
      right: 0px;
      transition: all .4s; }
      nav .navContainer #responsive-navbar:hover {
        cursor: pointer; }
      nav .navContainer #responsive-navbar .bar1, nav .navContainer #responsive-navbar .bar2, nav .navContainer #responsive-navbar .bar3 {
        width: 35px;
        height: 5px;
        background-color: #d03d24;
        margin: 6px 0;
        transition: 0.4s; }
      nav .navContainer #responsive-navbar.change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px); }
      nav .navContainer #responsive-navbar.change .bar2 {
        opacity: 0; }
      nav .navContainer #responsive-navbar.change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px); }
      @media only screen and (max-width: 768px) {
        nav .navContainer #responsive-navbar {
          display: block; } }
    @media only screen and (max-width: 768px) {
      nav .navContainer {
        flex-wrap: wrap;
        background: white;
        transition: all .4s; }
        nav .navContainer ul {
          width: 100%;
          transition: all .4s;
          margin: 0 0 20px; } }
  nav.home {
    background-color: white; }
    nav.home.sticky .navContainer h1 {
      width: 0; }
      nav.home.sticky .navContainer h1.show {
        width: 350px; }
  nav.admn ul li {
    padding: 15px 10px; }
    @media only screen and (min-width: 1131px) {
      nav.admn ul li.snd a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      nav.admn ul li.usr a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      nav.admn ul li.hstry a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      nav.admn ul li.grp a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      nav.admn ul li.cntcts a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      nav.admn ul li.cntcts a::before {
        font-family: "Font Awesome 5 free";
        font-weight: bold; }
      nav.admn ul li a::before {
        font-weight: 400; } }
    @media only screen and (max-width: 960px) {
      nav.admn ul li {
        padding: 15px 8px; } }
    nav.admn ul li a {
      font-weight: 400;
      font-size: 18px;
      transition: all .4s;
      display: inline-block;
      transition: all .3s; }
      @media only screen and (max-width: 960px) {
        nav.admn ul li a {
          font-size: 16px; } }
      nav.admn ul li a.current {
        color: #d03d24; }
      nav.admn ul li a:hover {
        transform: translateY(-1px);
        transition: all .3s;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
      nav.admn ul li a.active {
        color: #d03d24; }
        nav.admn ul li a.active:hover {
          transform: none;
          text-shadow: none; }
  nav.sticky {
    background: #f9f9f9;
    position: fixed;
    top: 0;
    height: 86px;
    transition: all .4s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
    nav.sticky .navContainer {
      align-items: center;
      transition: all .4s;
      margin-top: 5px;
      width: 100%; }
      nav.sticky .navContainer h1 {
        width: 350px;
        margin-top: 7px;
        /*
				a{
					text-indent: -9999em;
				    display: block;
				    width: 180px;
				    height: 50px;
				    background: url(/img/logo-nm-large.gif) no-repeat;
				    background-size: 180px;
				    margin-top: 12px;
				    transition: all .4s;
				}
				*/ }
        nav.sticky .navContainer h1 a img {
          margin-top: 0;
          width: 70px;
          transition: all .4s; }
        nav.sticky .navContainer h1 a svg {
          margin-top: 0;
          width: 95px;
          transition: all .4s; }
          nav.sticky .navContainer h1 a svg .text {
            opacity: 0;
            transition: all .2s; }
          nav.sticky .navContainer h1 a svg.alt-text {
            animation: headerText .5s forwards;
            animation-delay: .2s;
            width: 150px;
            display: inline-block; }
            @media only screen and (max-width: 480px) {
              nav.sticky .navContainer h1 a svg.alt-text {
                animation: none; } }
            @media only screen and (max-width: 960px) {
              nav.sticky .navContainer h1 a svg.alt-text {
                display: none; } }
        @media only screen and (max-width: 960px) {
          nav.sticky .navContainer h1 {
            width: 100px; } }
      nav.sticky .navContainer ul {
        margin: 16px 0;
        transition: all 1.2s; }
        nav.sticky .navContainer ul a {
          color: #000;
          transition: all 1.2s; }
      nav.sticky .navContainer #responsive-navbar {
        top: 0;
        transition: all .4s; }
    @media only screen and (max-width: 768px) {
      nav.sticky {
        height: auto; }
        nav.sticky .navContainer {
          margin-top: 0; } }
  @media only screen and (max-width: 768px) {
    nav .navContainer {
      align-items: center;
      transition: all .4s;
      height: 80px; }
      nav .navContainer.open {
        height: auto; }
      nav .navContainer svg {
        margin: 5px 0;
        width: 140px;
        transition: all .4s; }
        nav .navContainer svg .st1 {
          fill: #000 !important; }
      nav .navContainer ul {
        margin: 17px 0; }
        nav .navContainer ul li a {
          color: #000 !important; }
        nav .navContainer ul li.orderBtn a {
          color: #fff !important; }
        nav .navContainer ul li.orderBtn:hover a {
          color: #d03d24 !important; }
      nav .navContainer #responsive-navbar {
        top: 0;
        transition: all .4s; } }
  nav.admn .navContainer ul {
    margin: 40px 0 40px;
    transition: all .4s; }
  nav.admn.sticky .navContainer ul {
    margin: 14px 0; }

.navBorder {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  margin: 90px auto 20px;
  padding: 0;
  display: block; }
  @media only screen and (max-width: 1240px) {
    .navBorder {
      display: none; } }

@media only screen and (max-width: 1240px) {
  #mainwrapper {
    margin-top: 120px; } }

@media only screen and (max-width: 1240px) {
  header.home {
    margin-top: -120px !important; } }

/*
@include mq('tablet', 'min') {


	#mainNav li a {
		z-index: 0;
		position: relative;
		padding: 8px 0;

		&:hover {
			color: $megaMailRed;
			transition: all .4s;
		}
	}

	.orderBtn {
		a:before, a:after {
			display: none;
		}
	}

	#mainNav li a:before, #mainNav li a:after
	{
	    position: absolute;
	    left: 0px;
	    width: 100%;
	    height: 1px;
	    background: $megaMailRed;
	    content: "";
	    opacity: 0;
	    transition: all 0.3s;
	}

	#mainNav li a:before
	{
	    top: 0px;
	    transform: translateY(-10px);
	}

	#mainNav li a:after
	{
	    bottom: 0px;
	    transform: translateY(10px);
	}

	#mainNav li a:hover:before, #mainNav li a:hover:after
	{
	    opacity: 1;
	    transform: translateY(0px);
	}

}
*/
@media only screen and (min-width: 769px) {
  .prtl #mainNav * {
    box-sizing: border-box; }
  .prtl #mainNav li:not(.orderBtn) {
    display: inline-block;
    list-style: outside none none;
    margin: 0 1.25em;
    padding: 0; } }
  @media only screen and (min-width: 769px) and (max-width: 960px) {
    .prtl #mainNav li:not(.orderBtn) {
      margin: 0 0.8em; } }

@media only screen and (min-width: 769px) {
    .prtl #mainNav li:not(.orderBtn) a {
      padding: 0.5em 0;
      color: #222;
      position: relative;
      letter-spacing: 1px;
      text-decoration: none;
      font-weight: 400;
      /*
			    &:after {
			    	left: 0;
				    top: 0;
				    padding: 0.6em 0;
				    position: absolute;
				    content: attr(data-hover);
				    color: #000;
				    white-space: nowrap;
				    max-width: 0%;
				    overflow: hidden;
			    }
*/ }
      .prtl #mainNav li:not(.orderBtn) a:before, .prtl #mainNav li:not(.orderBtn) a:after {
        position: absolute;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease; }
      .prtl #mainNav li:not(.orderBtn) a:before {
        bottom: 0;
        display: block;
        height: 4px;
        width: 0%;
        content: "";
        background-color: #222222; }
      .prtl #mainNav li:not(.orderBtn) a.active:before, .prtl #mainNav li:not(.orderBtn) a:hover:before {
        opacity: 1;
        width: 100%; }
      .prtl #mainNav li:not(.orderBtn) a.active:after, .prtl #mainNav li:not(.orderBtn) a:hover:after {
        max-width: 100%; } }

#headerwrapper {
  margin-top: 160px; }

.contactForm {
  padding: 72px 0 100px; }
  .contactForm .contentContainer {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px;
    max-width: 548px;
    margin: 0 auto;
    text-align: center; }
    .contactForm .contentContainer h2, .contactForm .contentContainer p {
      margin: 0 0 10px 9px !important; }
    .contactForm .contentContainer .generated-form {
      width: 80%; }
    .contactForm .contentContainer .contact-form-container {
      display: -ms-flexbox;
      display: flex;
      justify-content: center; }
      .contactForm .contentContainer .contact-form-container .thankYouMessage {
        text-align: center;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        color: green;
        font-size: 21px; }
      .contactForm .contentContainer .contact-form-container .error-message {
        position: absolute;
        color: red;
        font-size: 14px;
        font-style: italic;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        margin-left: 0;
        margin-top: 4px;
        background: none !important; }
      .contactForm .contentContainer .contact-form-container .informakers-validationFailed {
        background-color: rgba(255, 255, 255, 0) !important;
        border: 1px solid #000 !important; }
      @media only screen and (max-width: 480px) {
        .contactForm .contentContainer .contact-form-container {
          width: 100%; } }
      .contactForm .contentContainer .contact-form-container .input {
        width: 100%;
        display: block;
        margin: 32px auto; }
        @media only screen and (max-width: 480px) {
          .contactForm .contentContainer .contact-form-container .input {
            margin: 10px 0; } }
        .contactForm .contentContainer .contact-form-container .input label {
          display: block;
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
          font-size: 18px;
          text-align: left;
          margin-bottom: 4px; }
        .contactForm .contentContainer .contact-form-container .input input {
          width: 100%;
          padding: 12px;
          font-size: 16px;
          background: rgba(255, 255, 255, 0);
          border: 1px solid #828282;
          border-radius: 5px;
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
          font-size: 18px;
          color: #000; }
          .contactForm .contentContainer .contact-form-container .input input::placeholder {
            color: #777;
            font-weight: 400 !important; }
        .contactForm .contentContainer .contact-form-container .input textarea {
          width: 100%;
          height: 180px;
          border-radius: 5px;
          border: 1px solid #828282;
          padding: 12px;
          font-size: 18px;
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
        .contactForm .contentContainer .contact-form-container .input .form-label {
          font-size: 18px;
          margin-bottom: 5px;
          display: block; }
        .contactForm .contentContainer .contact-form-container .input.checkbox-radio {
          width: 100%; }
          .contactForm .contentContainer .contact-form-container .input.checkbox-radio input {
            width: auto; }
          .contactForm .contentContainer .contact-form-container .input.checkbox-radio label {
            margin: 5px 15px 5px 0;
            font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
            display: inline-block; }
        @media only screen and (max-width: 768px) {
          .contactForm .contentContainer .contact-form-container .input {
            width: 100%; } }
      .contactForm .contentContainer .contact-form-container .submit {
        text-align: left; }
        .contactForm .contentContainer .contact-form-container .submit input {
          color: #d03d24;
          background: none;
          padding: 12px 18px;
          border: 1px solid #d03d24;
          border-radius: 5px;
          font-size: 20px;
          text-decoration: none;
          transition: all .4s;
          margin: 10px 0 0;
          position: relative;
          display: inline-block;
          font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
          cursor: pointer; }
          .contactForm .contentContainer .contact-form-container .submit input:hover {
            background: #d03d24;
            color: #f9f9f9;
            border: 1px solid #d03d24;
            transition: all .4s; }
      .contactForm .contentContainer .contact-form-container fieldset {
        border: none; }

input[type=text], input[type=password], input[type=number], input[type=button], textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none; }

select, input[type=checkbox] {
  background: none;
  border: none; }

#flashMessage {
  font-size: 18px;
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  font-weight: bold;
  text-align: center;
  margin: 20px 0; }
  #flashMessage.success {
    color: green; }
  #flashMessage.fail {
    color: red; }

.accordianContent li {
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  background-color: #f6a6a6;
  color: #fff;
  padding: 4px 8px;
  font-style: italic;
  margin: -20px 0 20px 0;
  font-size: 14px;
  list-style: none; }

.fileslist {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  max-width: 540px;
  margin-top: 80px; }
  .fileslist #filedrag {
    display: block;
    width: 100%;
    height: 200px;
    border: 3px dashed #d03d24;
    border-radius: 20px;
    background: center/140px no-repeat url("/img/upload.png");
    /*
		background-image: linear-gradient(to right, $megaMailRed 60%, rgba(255, 255, 255, 0) 0%);
  		background-position: top;
  		background-size: 28px 3px;
  		background-repeat: repeat-x;
  		*/
    margin-bottom: 30px; }
  .fileslist .fileUpload .input.file {
    display: none; }
  .fileslist .fileUpload .fileUploadInfo {
    color: #d03d24;
    text-align: center;
    display: block;
    margin: 10px 0; }
    .fileslist .fileUpload .fileUploadInfo input {
      color: #1580a5;
      text-decoration: underline;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-size: 16px;
      cursor: pointer; }
  .fileslist #file-table-edit {
    font-size: 14px; }
    .fileslist #file-table-edit table {
      width: 100%; }
      .fileslist #file-table-edit table thead tr td #total-progress-area {
        margin-bottom: 10px; }
        .fileslist #file-table-edit table thead tr td #total-progress-area #total-progress {
          height: 15px !important;
          padding: 2px 4px;
          color: #fff;
          background-color: #d03d24 !important;
          margin-bottom: 15px; }
        .fileslist #file-table-edit table thead tr td #total-progress-area .resume-info {
          font-style: italic;
          font-size: 13px;
          position: absolute;
          margin-top: -18px;
          color: #9e9e9e; }
        .fileslist #file-table-edit table thead tr td #total-progress-area .pause-button, .fileslist #file-table-edit table thead tr td #total-progress-area .resume-button {
          border: 1px solid #d03d24;
          padding: 4px 10px;
          font-weight: 700;
          color: #d03d24;
          border-radius: 4px;
          margin-top: 6px;
          font-size: 12px; }
          .fileslist #file-table-edit table thead tr td #total-progress-area .pause-button:hover, .fileslist #file-table-edit table thead tr td #total-progress-area .resume-button:hover {
            cursor: pointer; }
          .fileslist #file-table-edit table thead tr td #total-progress-area .pause-button:nth-child(1)::before, .fileslist #file-table-edit table thead tr td #total-progress-area .resume-button:nth-child(1)::before {
            font-family: "Font Awesome";
            margin-right: 10px;
            content: ""; }
          .fileslist #file-table-edit table thead tr td #total-progress-area .pause-button:nth-child(2)::before, .fileslist #file-table-edit table thead tr td #total-progress-area .resume-button:nth-child(2)::before {
            font-family: "Font Awesome";
            margin-right: 10px;
            content: ""; }
      .fileslist #file-table-edit table tbody tr td {
        padding: 0; }
        .fileslist #file-table-edit table tbody tr td:first-child {
          margin-right: 6px;
          display: inline-block; }
        .fileslist #file-table-edit table tbody tr td:nth-child(2) {
          margin-right: 12px;
          display: inline-block; }
        .fileslist #file-table-edit table tbody tr td:last-child {
          text-align: right; }
      .fileslist #file-table-edit table tbody .status div:last-child {
        width: 20px !important;
        height: 28px !important; }
    .fileslist #file-table-edit #clear-buttons a {
      display: none;
      padding: 8px 26px;
      color: #d03d24;
      text-decoration: none;
      font-weight: bold;
      text-transform: uppercase; }
    .fileslist #file-table-edit #total-files-size {
      display: none;
      float: right;
      border-top: 1px solid #222;
      padding: 8px 0;
      font-weight: 500; }
  .fileslist .recipient {
    margin-top: 60px;
    /*
    label {

      &.tooltip {

        &::after {
          content: '?';
          display: inline-block;
          border: 1px solid $blue;
          border-radius: 20px;
          height: 12px;
          width: 14px;
          text-align: center;
          color: $blue;
          margin: -3px 0 0 8px;
          padding-top: 2px;
          font-size: 12px;
        }
      }
    } */
    /*

		.checkbox {

			input[type=checkbox] {
				height: 14px;
				width: 14px;
				border: 1px solid #222;
				margin-right: 10px;
			}
		}

		*/ }
    .fileslist .recipient label, .fileslist .recipient legend {
      text-transform: uppercase;
      font-size: 14px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 500;
      display: block;
      margin-bottom: 3px; }
    .fileslist .recipient input[type=text], .fileslist .recipient input[type=password], .fileslist .recipient input[type=number], .fileslist .recipient textarea {
      width: 100% !important;
      background: #e8e8e8;
      border-bottom: 1px solid #000;
      color: #000;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-size: 14px;
      padding: 4px 12px;
      margin-bottom: 20px; }
      .fileslist .recipient input[type=text]:disabled, .fileslist .recipient input[type=password]:disabled, .fileslist .recipient input[type=number]:disabled, .fileslist .recipient textarea:disabled {
        background: url("/img/diabled.gif");
        color: #222;
        opacity: .7; }
    .fileslist .recipient .select label, .fileslist .recipient .checkbox label, .fileslist .recipient .radio label {
      display: inline-block;
      vertical-align: top; }
    .fileslist .recipient .select {
      display: inline-block;
      margin-bottom: 20px; }
      .fileslist .recipient .select select {
        border: 1px solid #222;
        padding: 2px;
        margin: -6px 2px 0 8px;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-weight: 500; }
    .fileslist .recipient .checkbox input[type=checkbox] {
      height: 14px;
      width: 14px;
      border: 1px solid #222;
      margin-right: 10px; }
    .fileslist .recipient .radio {
      /*
      fieldset {
        margin:  0 0 20px;

        legend {
          margin-bottom: 10px;
          text-decoration: underline;
        }

        label {
          margin: 0 20px 3px 5px;
        }
      }
*/
      margin: 0 0 20px; }
      .fileslist .recipient .radio label {
        margin: 0 20px 3px 0; }
        .fileslist .recipient .radio label:first-child {
          margin: 0 0 10px 0;
          text-decoration: underline;
          display: block; }
        .fileslist .recipient .radio label input {
          margin-right: 5px; }
    .fileslist .recipient .text:not(.required) label::after, .fileslist .recipient .textarea:not(.required) label::after, .fileslist .recipient .tooltip_element.password:not(.required) label::after {
      content: ' - Optional';
      font-weight: 400;
      font-style: italic;
      text-transform: none; }
    .fileslist .recipient .error-message {
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      background-color: #f6a6a6;
      color: #fff;
      padding: 4px 8px;
      font-style: italic;
      margin: -20px 0 20px 0;
      font-size: 14px;
      list-style: none; }
    .fileslist .recipient .side_input_right {
      margin-bottom: 12px; }
    .fileslist .recipient .side_input_left span {
      text-transform: uppercase;
      font-size: 14px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 500; }
    .fileslist .recipient #contacts span {
      display: inline-block;
      background: #e8e8e8;
      padding: 5px 10px;
      font-size: 14px;
      margin: 0 5px 5px 0;
      border-radius: 4px; }
      .fileslist .recipient #contacts span a {
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        margin-left: 5px;
        background: #1580a5;
        border-radius: 50px;
        padding: 0 4px; }
  .fileslist label[for=textbox-id-download-password] .tip, .fileslist label[for=password] .tip {
    position: absolute;
    margin-left: 70px; }
    .fileslist label[for=textbox-id-download-password] .tip:after, .fileslist label[for=password] .tip:after {
      min-width: 180px;
      content: "Your password must contain at least 6 but no more than 50 characters. There must be one uppercase, one lowercase, and at least one special character (! $ % ( ) * - . / : = < > ? @ [ ] ^ _ ' | { } ~). If you keep the password blank, no password will be set for download."; }

#add-buttons {
  margin: 20px 0 80px; }
  #add-buttons .submit input {
    background: #1580a5;
    padding: 8px 24px;
    color: #f9f9f9;
    font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
    font-size: 24px;
    transition: all .4s;
    border: 1px solid #1580a5;
    cursor: pointer;
    display: block;
    margin: 20px auto; }
    #add-buttons .submit input:hover {
      background: #f9f9f9;
      color: #d03d24;
      border: 1px solid #d03d24;
      transition: all .4s; }

/* Jquery UI overrides */
.ui-menu .ui-menu-item a {
  font-size: 14px; }

.titleEmbelleshment {
  width: 40px;
  height: 1px;
  background: #222;
  display: block;
  margin: 0 auto 40px; }

.adminContainer {
  padding: 50px 15px; }
  .adminContainer h2 {
    text-align: center;
    margin: 40px 0 20px !important; }
  .adminContainer.broadcast_success h2:after, .adminContainer.broadcast_fail h2:after {
    background: none repeat scroll 0 0 #998675;
    bottom: -20px;
    content: "";
    display: block;
    height: 2px;
    position: relative;
    width: 75px;
    margin: auto; }
  .adminContainer.broadcast_success p, .adminContainer.broadcast_fail p {
    margin: 1em 0;
    padding-top: 1em;
    text-align: center; }
  .adminContainer.broadcast_success .info_container, .adminContainer.broadcast_fail .info_container {
    max-width: 750px;
    margin: 40px auto; }
    .adminContainer.broadcast_success .info_container .info_item, .adminContainer.broadcast_fail .info_container .info_item {
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      display: -ms-flexbox;
      display: flex;
      margin: 1em 0;
      align-items: flex-start;
      justify-content: space-between;
      font-size: 1.2em; }
      .adminContainer.broadcast_success .info_container .info_item .info_header, .adminContainer.broadcast_fail .info_container .info_item .info_header {
        width: 50%;
        margin-right: 1em;
        text-align: right;
        font-weight: bold; }
      .adminContainer.broadcast_success .info_container .info_item .info_data, .adminContainer.broadcast_fail .info_container .info_item .info_data {
        width: 50%;
        text-align: left;
        word-break: break-word; }
        .adminContainer.broadcast_success .info_container .info_item .info_data li, .adminContainer.broadcast_fail .info_container .info_item .info_data li {
          list-style: none;
          word-break: break-word; }
        .adminContainer.broadcast_success .info_container .info_item .info_data .tooltip.notification, .adminContainer.broadcast_fail .info_container .info_item .info_data .tooltip.notification {
          color: #2AD187; }
        .adminContainer.broadcast_success .info_container .info_item .info_data .tooltip.no_notification, .adminContainer.broadcast_fail .info_container .info_item .info_data .tooltip.no_notification {
          color: #d31f27; }
  .adminContainer.broadcast_success .submit, .adminContainer.broadcast_fail .submit {
    text-align: center; }
    .adminContainer.broadcast_success .submit a, .adminContainer.broadcast_fail .submit a {
      background: #1580a5;
      padding: 8px 24px;
      color: #f9f9f9;
      font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
      font-size: 24px;
      transition: all .4s;
      border: 1px solid #1580a5;
      cursor: pointer;
      display: block;
      margin: 20px auto;
      display: inline-block;
      text-decoration: none; }
      .adminContainer.broadcast_success .submit a:hover, .adminContainer.broadcast_fail .submit a:hover {
        background: #f9f9f9;
        color: #d03d24;
        border: 1px solid #d03d24;
        transition: all .4s; }

.myAccount, .myGroup {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  max-width: 540px; }
  .myAccount .usageContainer, .myGroup .usageContainer {
    width: 100%; }
    .myAccount .usageContainer p, .myGroup .usageContainer p {
      font-size: 14px !important;
      font-weight: 400;
      color: #1a1716;
      margin: 0; }
    .myAccount .usageContainer .usageMeter, .myGroup .usageContainer .usageMeter {
      margin-bottom: 25px;
      position: relative;
      overflow-x: hidden; }
      .myAccount .usageContainer .usageMeter:before, .myGroup .usageContainer .usageMeter:before {
        width: 100%;
        height: 5px;
        content: "";
        display: block;
        position: absolute;
        background: #959595;
        bottom: 0; }
      .myAccount .usageContainer .usageMeter .usage-bar, .myGroup .usageContainer .usageMeter .usage-bar {
        width: 100%;
        height: 5px;
        background: #d03d24;
        display: block;
        position: relative;
        right: 0;
        -webkit-animation-name: progressFill;
        animation-name: progressFill;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both; }
        .myAccount .usageContainer .usageMeter .usage-bar.usage1, .myGroup .usageContainer .usageMeter .usage-bar.usage1 {
          width: 76%; }
        .myAccount .usageContainer .usageMeter .usage-bar.usage2, .myGroup .usageContainer .usageMeter .usage-bar.usage2 {
          width: 92%; }
        .myAccount .usageContainer .usageMeter .usage-bar span, .myGroup .usageContainer .usageMeter .usage-bar span {
          position: absolute;
          border-top: 5px solid #f4392f;
          top: -30px;
          padding: 0;
          font-size: 18px;
          padding: 3px 0;
          font-weight: 500; }
    .myAccount .usageContainer .upgradePlan, .myGroup .usageContainer .upgradePlan {
      display: block;
      margin: auto;
      text-align: center; }
      .myAccount .usageContainer .upgradePlan a, .myGroup .usageContainer .upgradePlan a {
        color: #1580a5; }
        .myAccount .usageContainer .upgradePlan a:hover, .myGroup .usageContainer .upgradePlan a:hover {
          text-decoration: none; }
  .myAccount .userDeets, .myAccount .groupDeets, .myGroup .userDeets, .myGroup .groupDeets {
    margin: 40px 0; }
    .myAccount .userDeets .deet, .myAccount .groupDeets .deet, .myGroup .userDeets .deet, .myGroup .groupDeets .deet {
      margin: 15px 0; }
      .myAccount .userDeets .deet .deetsLabel, .myAccount .groupDeets .deet .deetsLabel, .myGroup .userDeets .deet .deetsLabel, .myGroup .groupDeets .deet .deetsLabel {
        text-transform: uppercase;
        font-size: 14px;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-weight: 500;
        display: block;
        margin-bottom: 3px; }
      .myAccount .userDeets .deet .deetsInfo, .myAccount .groupDeets .deet .deetsInfo, .myGroup .userDeets .deet .deetsInfo, .myGroup .groupDeets .deet .deetsInfo {
        font-size: 21px; }
  .myAccount .accordian, .myGroup .accordian {
    /*
    label {

      &.tooltip {

        &::after {
          content: '?';
          display: inline-block;
          border: 1px solid $blue;
          border-radius: 20px;
          height: 12px;
          width: 14px;
          text-align: center;
          color: $blue;
          margin: -3px 0 0 8px;
          padding-top: 2px;
          font-size: 12px;
        }
      }
    } */
    margin-bottom: 40px; }
    .myAccount .accordian label, .myAccount .accordian legend, .myGroup .accordian label, .myGroup .accordian legend {
      text-transform: uppercase;
      font-size: 14px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 500;
      display: block;
      margin-bottom: 3px; }
    .myAccount .accordian input[type=text], .myAccount .accordian input[type=password], .myAccount .accordian input[type=number], .myAccount .accordian textarea, .myGroup .accordian input[type=text], .myGroup .accordian input[type=password], .myGroup .accordian input[type=number], .myGroup .accordian textarea {
      width: 100% !important;
      background: #e8e8e8;
      border-bottom: 1px solid #000;
      color: #000;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-size: 14px;
      padding: 4px 12px;
      margin-bottom: 20px; }
      .myAccount .accordian input[type=text]:disabled, .myAccount .accordian input[type=password]:disabled, .myAccount .accordian input[type=number]:disabled, .myAccount .accordian textarea:disabled, .myGroup .accordian input[type=text]:disabled, .myGroup .accordian input[type=password]:disabled, .myGroup .accordian input[type=number]:disabled, .myGroup .accordian textarea:disabled {
        background: url("/img/diabled.gif");
        color: #222;
        opacity: .7; }
    .myAccount .accordian .select label, .myAccount .accordian .checkbox label, .myAccount .accordian .radio label, .myGroup .accordian .select label, .myGroup .accordian .checkbox label, .myGroup .accordian .radio label {
      display: inline-block;
      vertical-align: top; }
    .myAccount .accordian .select, .myGroup .accordian .select {
      display: inline-block;
      margin-bottom: 20px; }
      .myAccount .accordian .select select, .myGroup .accordian .select select {
        border: 1px solid #222;
        padding: 2px;
        margin: -6px 2px 0 8px;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-weight: 500; }
    .myAccount .accordian .checkbox input[type=checkbox], .myGroup .accordian .checkbox input[type=checkbox] {
      height: 14px;
      width: 14px;
      border: 1px solid #222;
      margin-right: 10px; }
    .myAccount .accordian .radio, .myGroup .accordian .radio {
      /*
      fieldset {
        margin:  0 0 20px;

        legend {
          margin-bottom: 10px;
          text-decoration: underline;
        }

        label {
          margin: 0 20px 3px 5px;
        }
      }
*/
      margin: 0 0 20px; }
      .myAccount .accordian .radio label, .myGroup .accordian .radio label {
        margin: 0 20px 3px 0; }
        .myAccount .accordian .radio label:first-child, .myGroup .accordian .radio label:first-child {
          margin: 0 0 10px 0;
          text-decoration: underline;
          display: block; }
        .myAccount .accordian .radio label input, .myGroup .accordian .radio label input {
          margin-right: 5px; }
    .myAccount .accordian .text:not(.required) label::after, .myAccount .accordian .textarea:not(.required) label::after, .myAccount .accordian .tooltip_element.password:not(.required) label::after, .myGroup .accordian .text:not(.required) label::after, .myGroup .accordian .textarea:not(.required) label::after, .myGroup .accordian .tooltip_element.password:not(.required) label::after {
      content: ' - Optional';
      font-weight: 400;
      font-style: italic;
      text-transform: none; }
    .myAccount .accordian .error-message, .myGroup .accordian .error-message {
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      background-color: #f6a6a6;
      color: #fff;
      padding: 4px 8px;
      font-style: italic;
      margin: -20px 0 20px 0;
      font-size: 14px;
      list-style: none; }
    .myAccount .accordian .accordianSection, .myGroup .accordian .accordianSection {
      border: 1px solid #ababab;
      position: relative;
      margin-top: -1px; }
      .myAccount .accordian .accordianSection span, .myGroup .accordian .accordianSection span {
        text-align: center;
        display: block;
        padding: 15px 0 30px;
        cursor: pointer; }
        .myAccount .accordian .accordianSection span::before, .myGroup .accordian .accordianSection span::before {
          font-family: "Font Awesome";
          margin-right: 10px;
          content: ""; }
        .myAccount .accordian .accordianSection span::before, .myGroup .accordian .accordianSection span::before {
          position: absolute;
          margin: 18px auto 0;
          display: block;
          width: 100%;
          font-weight: bold;
          font-size: 18px;
          transition: all .2s; }
        .myAccount .accordian .accordianSection span:hover::before, .myGroup .accordian .accordianSection span:hover::before {
          transform: translateY(2px);
          transition: all .2s; }
      .myAccount .accordian .accordianSection.expanded span::before, .myGroup .accordian .accordianSection.expanded span::before {
        transform: rotate(180deg);
        transition: all .2s; }
      .myAccount .accordian .accordianSection .accordianContent, .myGroup .accordian .accordianSection .accordianContent {
        padding: 20px;
        display: none; }
        .myAccount .accordian .accordianSection .accordianContent p, .myGroup .accordian .accordianSection .accordianContent p {
          font-size: 14px !important;
          margin-bottom: 20px; }
        .myAccount .accordian .accordianSection .accordianContent .email-template-dp, .myGroup .accordian .accordianSection .accordianContent .email-template-dp {
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
          font-size: 0.9em;
          line-height: 1.1;
          margin: 8px 0; }
          .myAccount .accordian .accordianSection .accordianContent .email-template-dp .learnmore-btn, .myGroup .accordian .accordianSection .accordianContent .email-template-dp .learnmore-btn {
            cursor: pointer; }
        .myAccount .accordian .accordianSection .accordianContent .overlay, .myGroup .accordian .accordianSection .accordianContent .overlay {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.8);
          transition: opacity 500ms;
          visibility: hidden;
          opacity: 0; }
        .myAccount .accordian .accordianSection .accordianContent .overlay:target, .myGroup .accordian .accordianSection .accordianContent .overlay:target {
          visibility: visible;
          opacity: 1; }
        .myAccount .accordian .accordianSection .accordianContent .popup, .myGroup .accordian .accordianSection .accordianContent .popup {
          margin: 15% auto;
          padding: 20px;
          background: #fff;
          border-radius: 5px;
          width: 70%;
          max-width: 500px;
          position: relative;
          text-align: center; }
          @media only screen and (max-width: 768px) {
            .myAccount .accordian .accordianSection .accordianContent .popup, .myGroup .accordian .accordianSection .accordianContent .popup {
              margin: 25% auto; } }
          @media only screen and (max-width: 480px) {
            .myAccount .accordian .accordianSection .accordianContent .popup, .myGroup .accordian .accordianSection .accordianContent .popup {
              margin: 45% auto;
              width: 80%; } }
          .myAccount .accordian .accordianSection .accordianContent .popup .content, .myGroup .accordian .accordianSection .accordianContent .popup .content {
            margin: 30px 0 15px; }
            .myAccount .accordian .accordianSection .accordianContent .popup .content .msg-content, .myGroup .accordian .accordianSection .accordianContent .popup .content .msg-content {
              padding: 10px; }
              .myAccount .accordian .accordianSection .accordianContent .popup .content .msg-content .eng-msg-img, .myGroup .accordian .accordianSection .accordianContent .popup .content .msg-content .eng-msg-img {
                width: 100%;
                height: 22em;
                background-image: url(/img/images/eng-screenshot-01.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain; }
              .myAccount .accordian .accordianSection .accordianContent .popup .content .msg-content .jpn-msg-img, .myGroup .accordian .accordianSection .accordianContent .popup .content .msg-content .jpn-msg-img {
                width: 100%;
                height: 22em;
                background-image: url(/img/images/jpn-screenshot-02.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain; }
        .myAccount .accordian .accordianSection .accordianContent .popup .close, .myGroup .accordian .accordianSection .accordianContent .popup .close {
          position: absolute;
          top: 20px;
          right: 30px;
          transition: all 200ms;
          font-size: 30px;
          font-weight: bold;
          text-decoration: none;
          color: #333; }
        .myAccount .accordian .accordianSection .accordianContent .popup .close:hover, .myGroup .accordian .accordianSection .accordianContent .popup .close:hover {
          color: #d03d24; }
        .myAccount .accordian .accordianSection .accordianContent .popup .content, .myGroup .accordian .accordianSection .accordianContent .popup .content {
          max-height: 30%;
          overflow: auto; }
    .myAccount .accordian .smtpSetup label::after, .myGroup .accordian .smtpSetup label::after {
      display: none; }
  .myAccount label[for=email-template]:after, .myGroup label[for=email-template]:after {
    display: none; }
  .myAccount label[for=email-template] .tip:after, .myGroup label[for=email-template] .tip:after {
    content: "This custom message will appear on all of your file download emails"; }
  .myAccount .submit, .myGroup .submit {
    margin-bottom: 80px; }
    .myAccount .submit input, .myGroup .submit input {
      background: #1580a5;
      padding: 8px 24px;
      color: #f9f9f9;
      font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
      font-size: 24px;
      transition: all .4s;
      border: 1px solid #1580a5;
      cursor: pointer;
      display: block;
      margin: 20px auto; }
      .myAccount .submit input:hover, .myGroup .submit input:hover {
        background: #f9f9f9;
        color: #d03d24;
        border: 1px solid #d03d24;
        transition: all .4s; }

.addUserForm label[for=password] .tip:after {
  content: "Your password must contain at least 6 but no more than 50 characters. There must be one uppercase, one lowercase, and at least one special character (! $ % ( ) * - . / : = < > ? @ [ ] ^ _ ' | { } ~). If you keep the password blank, no password will be set for download."; }

.addUserForm .noinput {
  margin-bottom: 20px; }

.myContacts {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px; }
  .myContacts .addContactButton {
    max-width: 1040px;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    margin: 56px auto -84px; }
    .myContacts .addContactButton a {
      float: right;
      padding: 10px 14px;
      border: 1px solid #20AD19;
      border-radius: 4px;
      color: #20AD19;
      text-decoration: none;
      transition: all .2s; }
      .myContacts .addContactButton a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      @media only screen and (max-width: 480px) {
        .myContacts .addContactButton a {
          margin: 0 auto 3.5rem; } }
      .myContacts .addContactButton a:hover {
        background: #DDF6DC;
        color: #0D8806;
        border: 1px solid #0D8806;
        transition: all .2s; }
  .myContacts table {
    width: 100%;
    max-width: 1040px;
    margin: auto;
    border-collapse: collapse;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
    .myContacts table thead th {
      font-weight: bold;
      padding: 15px 20px;
      color: #222; }
      .myContacts table thead th a {
        color: #222;
        text-decoration: none;
        padding-right: 18px;
        background: url(../img/neutral.png) no-repeat right center; }
        .myContacts table thead th a.asc {
          background: url(../img/down.png) no-repeat right center; }
        .myContacts table thead th a.desc {
          background: url(../img/up.png) no-repeat right center; }
    .myContacts table tbody tr {
      border-bottom: 1px solid #b8b8b8; }
      .myContacts table tbody tr:nth-child(odd) {
        background: #EBEBEB; }
      .myContacts table tbody tr:nth-child(even) {
        background: #F6F6F6; }
      .myContacts table tbody tr:first-child {
        border-top: 1px solid #222; }
      .myContacts table tbody tr:last-child {
        border-bottom: 1px solid #222; }
    .myContacts table tbody td {
      padding: 15px 20px; }
    @media only screen and (max-width: 768px) {
      .myContacts table.responsiveTable {
        width: 100%; }
        .myContacts table.responsiveTable table, .myContacts table.responsiveTable thead, .myContacts table.responsiveTable tbody, .myContacts table.responsiveTable th, .myContacts table.responsiveTable td, .myContacts table.responsiveTable tr {
          display: block; }
        .myContacts table.responsiveTable thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px; }
        .myContacts table.responsiveTable td {
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding: 15px 10px 15px 150px !important;
          text-align: left !important;
          word-break: break-all; }
        .myContacts table.responsiveTable td:before {
          position: absolute;
          top: 15px;
          left: 10px;
          max-width: 150px;
          padding-right: 10px;
          white-space: nowrap;
          content: attr(data-column);
          color: #000;
          font-weight: bold; }
        .myContacts table.responsiveTable td.actions {
          padding: 5px 10px 15px !important;
          width: 100%; }
          .myContacts table.responsiveTable td.actions::before {
            display: none;
            left: 50%;
            color: #fff;
            transform: translateX(-50%);
            text-align: center;
            width: auto;
            padding: 0;
            font-size: 18px;
            top: 16px; }
          .myContacts table.responsiveTable td.actions a {
            display: block;
            margin: auto;
            max-width: 380px;
            height: 40px;
            text-decoration: none; }
            .myContacts table.responsiveTable td.actions a::after {
              text-align: center;
              display: block;
              padding-top: 12px;
              color: #fff;
              font-weight: bold; }
          .myContacts table.responsiveTable td.actions img {
            display: none; }
          .myContacts table.responsiveTable td.actions.historyFormActions a, .myContacts table.responsiveTable td.actions.groupUsageHistoryActions a {
            background: #1580a5; }
            .myContacts table.responsiveTable td.actions.historyFormActions a::after, .myContacts table.responsiveTable td.actions.groupUsageHistoryActions a::after {
              content: attr(data-action); }
          .myContacts table.responsiveTable td.actions.contactFormActions a {
            margin-bottom: 10px; }
            .myContacts table.responsiveTable td.actions.contactFormActions a:first-child {
              background: #D9C700; }
              .myContacts table.responsiveTable td.actions.contactFormActions a:first-child::after {
                content: attr(data-action); }
            .myContacts table.responsiveTable td.actions.contactFormActions a:last-child {
              background: #F11B05; }
              .myContacts table.responsiveTable td.actions.contactFormActions a:last-child::after {
                content: attr(data-action); }
          .myContacts table.responsiveTable td.actions.groupMgmtActions a {
            margin-bottom: 10px; }
            .myContacts table.responsiveTable td.actions.groupMgmtActions a:first-child {
              background: #1580a5; }
              .myContacts table.responsiveTable td.actions.groupMgmtActions a:first-child::after {
                content: 'View User'; }
            .myContacts table.responsiveTable td.actions.groupMgmtActions a:nth-child(2) {
              background: #ea9600; }
              .myContacts table.responsiveTable td.actions.groupMgmtActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .myContacts table.responsiveTable td.actions.groupMgmtActions a:nth-child(4) {
              background: #c42316; }
              .myContacts table.responsiveTable td.actions.groupMgmtActions a:nth-child(4)::after {
                content: 'Delete User'; }
          .myContacts table.responsiveTable td.actions.groupsListActions a {
            margin-bottom: 10px; }
            .myContacts table.responsiveTable td.actions.groupsListActions a:first-child {
              background: #1580a5; }
              .myContacts table.responsiveTable td.actions.groupsListActions a:first-child::after {
                content: 'View Group'; }
            .myContacts table.responsiveTable td.actions.groupsListActions a:nth-child(2) {
              background: #ea9600; }
              .myContacts table.responsiveTable td.actions.groupsListActions a:nth-child(2)::after {
                content: 'Edit Group'; }
            .myContacts table.responsiveTable td.actions.groupsListActions a:nth-child(4) {
              background: #c42316; }
              .myContacts table.responsiveTable td.actions.groupsListActions a:nth-child(4)::after {
                content: 'Delete Group'; }
          .myContacts table.responsiveTable td.actions.userListActions a {
            margin-bottom: 10px; }
            .myContacts table.responsiveTable td.actions.userListActions a:first-child {
              background: #1580a5; }
              .myContacts table.responsiveTable td.actions.userListActions a:first-child::after {
                content: 'View User'; }
            .myContacts table.responsiveTable td.actions.userListActions a:nth-child(2) {
              background: #ea9600; }
              .myContacts table.responsiveTable td.actions.userListActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .myContacts table.responsiveTable td.actions.userListActions a:nth-child(4) {
              background: #c42316; }
              .myContacts table.responsiveTable td.actions.userListActions a:nth-child(4)::after {
                content: 'Delete User'; } }
    .myContacts table thead th:nth-child(3), .myContacts table thead th:nth-child(4) {
      text-align: center; }
    .myContacts table thead th:nth-child(4) {
      background: none; }
    .myContacts table tbody td:nth-child(3), .myContacts table tbody td:nth-child(4) {
      text-align: center; }
    .myContacts table tbody td:nth-child(4) {
      padding: 0; }
      .myContacts table tbody td:nth-child(4) img {
        width: 22px;
        margin-right: 5px; }

.paging {
  text-align: center;
  margin: 40px 0 80px;
  color: #222;
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  font-size: 14px; }
  .paging a {
    text-decoration: none;
    font-weight: 700;
    color: #d03d24; }
  .paging .prev, .paging .next {
    font-weight: 700;
    color: #d03d24;
    list-style: none;
    display: inline-block; }
    .paging .prev.disabled a, .paging .next.disabled a {
      color: #ccc;
      font-weight: 400; }
      .paging .prev.disabled a::before, .paging .next.disabled a::before {
        display: none; }
      .paging .prev.disabled a::after, .paging .next.disabled a::after {
        display: none; }
  .paging .prev {
    margin-right: 20px; }
    .paging .prev a::before {
      content: '<';
      transform: translateX(-14px);
      position: absolute;
      transition: all .4s; }
    .paging .prev a:hover:not(.disabled)::before {
      transform: translateX(-17px);
      transition: all .4s; }
  .paging .next {
    margin-left: 20px; }
    .paging .next a::after {
      content: '>';
      transform: translateX(5px);
      position: absolute;
      transition: all .4s; }
    .paging .next a:hover:not(.disabled)::after {
      transform: translateX(8px);
      transition: all .4s; }

.addContact, .editContact, .editUser, .addUser, .editGroup, .editPass, .addGroup {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  max-width: 540px;
  margin: 80px auto;
  /*
    label {

      &.tooltip {

        &::after {
          content: '?';
          display: inline-block;
          border: 1px solid $blue;
          border-radius: 20px;
          height: 12px;
          width: 14px;
          text-align: center;
          color: $blue;
          margin: -3px 0 0 8px;
          padding-top: 2px;
          font-size: 12px;
        }
      }
    } */ }
  .addContact label, .addContact legend, .editContact label, .editContact legend, .editUser label, .editUser legend, .addUser label, .addUser legend, .editGroup label, .editGroup legend, .editPass label, .editPass legend, .addGroup label, .addGroup legend {
    text-transform: uppercase;
    font-size: 14px;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    font-weight: 500;
    display: block;
    margin-bottom: 3px; }
  .addContact input[type=text], .addContact input[type=password], .addContact input[type=number], .addContact textarea, .editContact input[type=text], .editContact input[type=password], .editContact input[type=number], .editContact textarea, .editUser input[type=text], .editUser input[type=password], .editUser input[type=number], .editUser textarea, .addUser input[type=text], .addUser input[type=password], .addUser input[type=number], .addUser textarea, .editGroup input[type=text], .editGroup input[type=password], .editGroup input[type=number], .editGroup textarea, .editPass input[type=text], .editPass input[type=password], .editPass input[type=number], .editPass textarea, .addGroup input[type=text], .addGroup input[type=password], .addGroup input[type=number], .addGroup textarea {
    width: 100% !important;
    background: #e8e8e8;
    border-bottom: 1px solid #000;
    color: #000;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    font-size: 14px;
    padding: 4px 12px;
    margin-bottom: 20px; }
    .addContact input[type=text]:disabled, .addContact input[type=password]:disabled, .addContact input[type=number]:disabled, .addContact textarea:disabled, .editContact input[type=text]:disabled, .editContact input[type=password]:disabled, .editContact input[type=number]:disabled, .editContact textarea:disabled, .editUser input[type=text]:disabled, .editUser input[type=password]:disabled, .editUser input[type=number]:disabled, .editUser textarea:disabled, .addUser input[type=text]:disabled, .addUser input[type=password]:disabled, .addUser input[type=number]:disabled, .addUser textarea:disabled, .editGroup input[type=text]:disabled, .editGroup input[type=password]:disabled, .editGroup input[type=number]:disabled, .editGroup textarea:disabled, .editPass input[type=text]:disabled, .editPass input[type=password]:disabled, .editPass input[type=number]:disabled, .editPass textarea:disabled, .addGroup input[type=text]:disabled, .addGroup input[type=password]:disabled, .addGroup input[type=number]:disabled, .addGroup textarea:disabled {
      background: url("/img/diabled.gif");
      color: #222;
      opacity: .7; }
  .addContact .select label, .addContact .checkbox label, .addContact .radio label, .editContact .select label, .editContact .checkbox label, .editContact .radio label, .editUser .select label, .editUser .checkbox label, .editUser .radio label, .addUser .select label, .addUser .checkbox label, .addUser .radio label, .editGroup .select label, .editGroup .checkbox label, .editGroup .radio label, .editPass .select label, .editPass .checkbox label, .editPass .radio label, .addGroup .select label, .addGroup .checkbox label, .addGroup .radio label {
    display: inline-block;
    vertical-align: top; }
  .addContact .select, .editContact .select, .editUser .select, .addUser .select, .editGroup .select, .editPass .select, .addGroup .select {
    display: inline-block;
    margin-bottom: 20px; }
    .addContact .select select, .editContact .select select, .editUser .select select, .addUser .select select, .editGroup .select select, .editPass .select select, .addGroup .select select {
      border: 1px solid #222;
      padding: 2px;
      margin: -6px 2px 0 8px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 500; }
  .addContact .checkbox input[type=checkbox], .editContact .checkbox input[type=checkbox], .editUser .checkbox input[type=checkbox], .addUser .checkbox input[type=checkbox], .editGroup .checkbox input[type=checkbox], .editPass .checkbox input[type=checkbox], .addGroup .checkbox input[type=checkbox] {
    height: 14px;
    width: 14px;
    border: 1px solid #222;
    margin-right: 10px; }
  .addContact .radio, .editContact .radio, .editUser .radio, .addUser .radio, .editGroup .radio, .editPass .radio, .addGroup .radio {
    /*
      fieldset {
        margin:  0 0 20px;

        legend {
          margin-bottom: 10px;
          text-decoration: underline;
        }

        label {
          margin: 0 20px 3px 5px;
        }
      }
*/
    margin: 0 0 20px; }
    .addContact .radio label, .editContact .radio label, .editUser .radio label, .addUser .radio label, .editGroup .radio label, .editPass .radio label, .addGroup .radio label {
      margin: 0 20px 3px 0; }
      .addContact .radio label:first-child, .editContact .radio label:first-child, .editUser .radio label:first-child, .addUser .radio label:first-child, .editGroup .radio label:first-child, .editPass .radio label:first-child, .addGroup .radio label:first-child {
        margin: 0 0 10px 0;
        text-decoration: underline;
        display: block; }
      .addContact .radio label input, .editContact .radio label input, .editUser .radio label input, .addUser .radio label input, .editGroup .radio label input, .editPass .radio label input, .addGroup .radio label input {
        margin-right: 5px; }
  .addContact .text:not(.required) label::after, .addContact .textarea:not(.required) label::after, .addContact .tooltip_element.password:not(.required) label::after, .editContact .text:not(.required) label::after, .editContact .textarea:not(.required) label::after, .editContact .tooltip_element.password:not(.required) label::after, .editUser .text:not(.required) label::after, .editUser .textarea:not(.required) label::after, .editUser .tooltip_element.password:not(.required) label::after, .addUser .text:not(.required) label::after, .addUser .textarea:not(.required) label::after, .addUser .tooltip_element.password:not(.required) label::after, .editGroup .text:not(.required) label::after, .editGroup .textarea:not(.required) label::after, .editGroup .tooltip_element.password:not(.required) label::after, .editPass .text:not(.required) label::after, .editPass .textarea:not(.required) label::after, .editPass .tooltip_element.password:not(.required) label::after, .addGroup .text:not(.required) label::after, .addGroup .textarea:not(.required) label::after, .addGroup .tooltip_element.password:not(.required) label::after {
    content: ' - Optional';
    font-weight: 400;
    font-style: italic;
    text-transform: none; }
  .addContact .error-message, .editContact .error-message, .editUser .error-message, .addUser .error-message, .editGroup .error-message, .editPass .error-message, .addGroup .error-message {
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    background-color: #f6a6a6;
    color: #fff;
    padding: 4px 8px;
    font-style: italic;
    margin: -20px 0 20px 0;
    font-size: 14px;
    list-style: none; }
  .addContact .addContactButton .submit input, .addContact .editContactButton .submit input, .addContact .editUserButton .submit input, .addContact .addUserButton .submit input, .addContact .editGroupButton .submit input, .addContact .editPassButton .submit input, .addContact .addGroupButton .submit input, .editContact .addContactButton .submit input, .editContact .editContactButton .submit input, .editContact .editUserButton .submit input, .editContact .addUserButton .submit input, .editContact .editGroupButton .submit input, .editContact .editPassButton .submit input, .editContact .addGroupButton .submit input, .editUser .addContactButton .submit input, .editUser .editContactButton .submit input, .editUser .editUserButton .submit input, .editUser .addUserButton .submit input, .editUser .editGroupButton .submit input, .editUser .editPassButton .submit input, .editUser .addGroupButton .submit input, .addUser .addContactButton .submit input, .addUser .editContactButton .submit input, .addUser .editUserButton .submit input, .addUser .addUserButton .submit input, .addUser .editGroupButton .submit input, .addUser .editPassButton .submit input, .addUser .addGroupButton .submit input, .editGroup .addContactButton .submit input, .editGroup .editContactButton .submit input, .editGroup .editUserButton .submit input, .editGroup .addUserButton .submit input, .editGroup .editGroupButton .submit input, .editGroup .editPassButton .submit input, .editGroup .addGroupButton .submit input, .editPass .addContactButton .submit input, .editPass .editContactButton .submit input, .editPass .editUserButton .submit input, .editPass .addUserButton .submit input, .editPass .editGroupButton .submit input, .editPass .editPassButton .submit input, .editPass .addGroupButton .submit input, .addGroup .addContactButton .submit input, .addGroup .editContactButton .submit input, .addGroup .editUserButton .submit input, .addGroup .addUserButton .submit input, .addGroup .editGroupButton .submit input, .addGroup .editPassButton .submit input, .addGroup .addGroupButton .submit input {
    background: #1580a5;
    padding: 8px 24px;
    color: #f9f9f9;
    font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
    font-size: 24px;
    transition: all .4s;
    border: 1px solid #1580a5;
    cursor: pointer;
    display: block;
    margin: 20px auto; }
    .addContact .addContactButton .submit input:hover, .addContact .editContactButton .submit input:hover, .addContact .editUserButton .submit input:hover, .addContact .addUserButton .submit input:hover, .addContact .editGroupButton .submit input:hover, .addContact .editPassButton .submit input:hover, .addContact .addGroupButton .submit input:hover, .editContact .addContactButton .submit input:hover, .editContact .editContactButton .submit input:hover, .editContact .editUserButton .submit input:hover, .editContact .addUserButton .submit input:hover, .editContact .editGroupButton .submit input:hover, .editContact .editPassButton .submit input:hover, .editContact .addGroupButton .submit input:hover, .editUser .addContactButton .submit input:hover, .editUser .editContactButton .submit input:hover, .editUser .editUserButton .submit input:hover, .editUser .addUserButton .submit input:hover, .editUser .editGroupButton .submit input:hover, .editUser .editPassButton .submit input:hover, .editUser .addGroupButton .submit input:hover, .addUser .addContactButton .submit input:hover, .addUser .editContactButton .submit input:hover, .addUser .editUserButton .submit input:hover, .addUser .addUserButton .submit input:hover, .addUser .editGroupButton .submit input:hover, .addUser .editPassButton .submit input:hover, .addUser .addGroupButton .submit input:hover, .editGroup .addContactButton .submit input:hover, .editGroup .editContactButton .submit input:hover, .editGroup .editUserButton .submit input:hover, .editGroup .addUserButton .submit input:hover, .editGroup .editGroupButton .submit input:hover, .editGroup .editPassButton .submit input:hover, .editGroup .addGroupButton .submit input:hover, .editPass .addContactButton .submit input:hover, .editPass .editContactButton .submit input:hover, .editPass .editUserButton .submit input:hover, .editPass .addUserButton .submit input:hover, .editPass .editGroupButton .submit input:hover, .editPass .editPassButton .submit input:hover, .editPass .addGroupButton .submit input:hover, .addGroup .addContactButton .submit input:hover, .addGroup .editContactButton .submit input:hover, .addGroup .editUserButton .submit input:hover, .addGroup .addUserButton .submit input:hover, .addGroup .editGroupButton .submit input:hover, .addGroup .editPassButton .submit input:hover, .addGroup .addGroupButton .submit input:hover {
      background: #f9f9f9;
      color: #d03d24;
      border: 1px solid #d03d24;
      transition: all .4s; }

.usageHistory table {
  width: 100%;
  max-width: 1040px;
  margin: auto;
  border-collapse: collapse;
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
  .usageHistory table thead th {
    font-weight: bold;
    padding: 15px 20px;
    color: #222; }
    .usageHistory table thead th a {
      color: #222;
      text-decoration: none;
      padding-right: 18px;
      background: url(../img/neutral.png) no-repeat right center; }
      .usageHistory table thead th a.asc {
        background: url(../img/down.png) no-repeat right center; }
      .usageHistory table thead th a.desc {
        background: url(../img/up.png) no-repeat right center; }
  .usageHistory table tbody tr {
    border-bottom: 1px solid #b8b8b8; }
    .usageHistory table tbody tr:nth-child(odd) {
      background: #EBEBEB; }
    .usageHistory table tbody tr:nth-child(even) {
      background: #F6F6F6; }
    .usageHistory table tbody tr:first-child {
      border-top: 1px solid #222; }
    .usageHistory table tbody tr:last-child {
      border-bottom: 1px solid #222; }
  .usageHistory table tbody td {
    padding: 15px 20px; }
  @media only screen and (max-width: 768px) {
    .usageHistory table.responsiveTable {
      width: 100%; }
      .usageHistory table.responsiveTable table, .usageHistory table.responsiveTable thead, .usageHistory table.responsiveTable tbody, .usageHistory table.responsiveTable th, .usageHistory table.responsiveTable td, .usageHistory table.responsiveTable tr {
        display: block; }
      .usageHistory table.responsiveTable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px; }
      .usageHistory table.responsiveTable td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding: 15px 10px 15px 150px !important;
        text-align: left !important;
        word-break: break-all; }
      .usageHistory table.responsiveTable td:before {
        position: absolute;
        top: 15px;
        left: 10px;
        max-width: 150px;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-column);
        color: #000;
        font-weight: bold; }
      .usageHistory table.responsiveTable td.actions {
        padding: 5px 10px 15px !important;
        width: 100%; }
        .usageHistory table.responsiveTable td.actions::before {
          display: none;
          left: 50%;
          color: #fff;
          transform: translateX(-50%);
          text-align: center;
          width: auto;
          padding: 0;
          font-size: 18px;
          top: 16px; }
        .usageHistory table.responsiveTable td.actions a {
          display: block;
          margin: auto;
          max-width: 380px;
          height: 40px;
          text-decoration: none; }
          .usageHistory table.responsiveTable td.actions a::after {
            text-align: center;
            display: block;
            padding-top: 12px;
            color: #fff;
            font-weight: bold; }
        .usageHistory table.responsiveTable td.actions img {
          display: none; }
        .usageHistory table.responsiveTable td.actions.historyFormActions a, .usageHistory table.responsiveTable td.actions.groupUsageHistoryActions a {
          background: #1580a5; }
          .usageHistory table.responsiveTable td.actions.historyFormActions a::after, .usageHistory table.responsiveTable td.actions.groupUsageHistoryActions a::after {
            content: attr(data-action); }
        .usageHistory table.responsiveTable td.actions.contactFormActions a {
          margin-bottom: 10px; }
          .usageHistory table.responsiveTable td.actions.contactFormActions a:first-child {
            background: #D9C700; }
            .usageHistory table.responsiveTable td.actions.contactFormActions a:first-child::after {
              content: attr(data-action); }
          .usageHistory table.responsiveTable td.actions.contactFormActions a:last-child {
            background: #F11B05; }
            .usageHistory table.responsiveTable td.actions.contactFormActions a:last-child::after {
              content: attr(data-action); }
        .usageHistory table.responsiveTable td.actions.groupMgmtActions a {
          margin-bottom: 10px; }
          .usageHistory table.responsiveTable td.actions.groupMgmtActions a:first-child {
            background: #1580a5; }
            .usageHistory table.responsiveTable td.actions.groupMgmtActions a:first-child::after {
              content: 'View User'; }
          .usageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(2) {
            background: #ea9600; }
            .usageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(2)::after {
              content: 'Edit User'; }
          .usageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(4) {
            background: #c42316; }
            .usageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(4)::after {
              content: 'Delete User'; }
        .usageHistory table.responsiveTable td.actions.groupsListActions a {
          margin-bottom: 10px; }
          .usageHistory table.responsiveTable td.actions.groupsListActions a:first-child {
            background: #1580a5; }
            .usageHistory table.responsiveTable td.actions.groupsListActions a:first-child::after {
              content: 'View Group'; }
          .usageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(2) {
            background: #ea9600; }
            .usageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(2)::after {
              content: 'Edit Group'; }
          .usageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(4) {
            background: #c42316; }
            .usageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(4)::after {
              content: 'Delete Group'; }
        .usageHistory table.responsiveTable td.actions.userListActions a {
          margin-bottom: 10px; }
          .usageHistory table.responsiveTable td.actions.userListActions a:first-child {
            background: #1580a5; }
            .usageHistory table.responsiveTable td.actions.userListActions a:first-child::after {
              content: 'View User'; }
          .usageHistory table.responsiveTable td.actions.userListActions a:nth-child(2) {
            background: #ea9600; }
            .usageHistory table.responsiveTable td.actions.userListActions a:nth-child(2)::after {
              content: 'Edit User'; }
          .usageHistory table.responsiveTable td.actions.userListActions a:nth-child(4) {
            background: #c42316; }
            .usageHistory table.responsiveTable td.actions.userListActions a:nth-child(4)::after {
              content: 'Delete User'; } }
  .usageHistory table th:nth-child(3), .usageHistory table th:nth-child(4), .usageHistory table th:nth-child(5), .usageHistory table th:nth-child(6), .usageHistory table td:nth-child(3), .usageHistory table td:nth-child(4), .usageHistory table td:nth-child(5), .usageHistory table td:nth-child(6) {
    text-align: center; }
  .usageHistory table td:nth-child(6) {
    padding: 0; }
    .usageHistory table td:nth-child(6) img {
      width: 22px; }
      .usageHistory table td:nth-child(6) img .tip:after {
        content: "Details"; }

.historyDetails {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  max-width: 540px;
  margin: 80px auto; }
  .historyDetails .historyDetailsInfo ul {
    line-height: 170%; }
    .historyDetails .historyDetailsInfo ul li {
      word-break: break-word; }
      .historyDetails .historyDetailsInfo ul li span {
        font-weight: bold; }
  .historyDetails table {
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    line-height: 180%;
    border-top: 1px solid #222;
    width: 100%;
    margin: 30px 0;
    padding: 10px 20px; }
    .historyDetails table td:last-child {
      text-align: right;
      min-width: 100px; }
  .historyDetails .backBtn {
    text-align: center; }
    .historyDetails .backBtn a {
      background: #1580a5;
      padding: 8px 24px;
      color: #f9f9f9;
      font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
      font-size: 24px;
      transition: all .4s;
      border: 1px solid #1580a5;
      cursor: pointer;
      display: block;
      margin: 20px auto;
      text-decoration: none;
      display: inline-block; }
      .historyDetails .backBtn a:hover {
        background: #f9f9f9;
        color: #d03d24;
        border: 1px solid #d03d24;
        transition: all .4s; }

.editUser .userGroup {
  margin-bottom: 20px; }
  .editUser .userGroup label {
    display: inline-block; }

.groupContainer {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px; }
  .groupContainer .addUserButton {
    max-width: 1040px;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    margin: 56px auto -84px; }
    .groupContainer .addUserButton a {
      float: right;
      padding: 10px 14px;
      border: 1px solid #20AD19;
      border-radius: 4px;
      color: #20AD19;
      text-decoration: none;
      transition: all .2s; }
      .groupContainer .addUserButton a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      @media only screen and (max-width: 480px) {
        .groupContainer .addUserButton a {
          margin: 0 auto 3.5rem; } }
      .groupContainer .addUserButton a:hover {
        background: #DDF6DC;
        color: #0D8806;
        border: 1px solid #0D8806;
        transition: all .2s; }
  .groupContainer .groupHistoryLink {
    display: block;
    margin: auto;
    text-align: center; }
    .groupContainer .groupHistoryLink a {
      color: #1580a5; }
      .groupContainer .groupHistoryLink a:hover {
        text-decoration: none; }
  .groupContainer .groupMgmt h3 {
    text-align: center;
    font-size: 28px;
    margin: 80px 0 40px; }
  .groupContainer .groupMgmt table {
    width: 100%;
    max-width: 1040px;
    margin: auto;
    border-collapse: collapse;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
    .groupContainer .groupMgmt table thead th {
      font-weight: bold;
      padding: 15px 20px;
      color: #222; }
      .groupContainer .groupMgmt table thead th a {
        color: #222;
        text-decoration: none;
        padding-right: 18px;
        background: url(../img/neutral.png) no-repeat right center; }
        .groupContainer .groupMgmt table thead th a.asc {
          background: url(../img/down.png) no-repeat right center; }
        .groupContainer .groupMgmt table thead th a.desc {
          background: url(../img/up.png) no-repeat right center; }
    .groupContainer .groupMgmt table tbody tr {
      border-bottom: 1px solid #b8b8b8; }
      .groupContainer .groupMgmt table tbody tr:nth-child(odd) {
        background: #EBEBEB; }
      .groupContainer .groupMgmt table tbody tr:nth-child(even) {
        background: #F6F6F6; }
      .groupContainer .groupMgmt table tbody tr:first-child {
        border-top: 1px solid #222; }
      .groupContainer .groupMgmt table tbody tr:last-child {
        border-bottom: 1px solid #222; }
    .groupContainer .groupMgmt table tbody td {
      padding: 15px 20px; }
    @media only screen and (max-width: 768px) {
      .groupContainer .groupMgmt table.responsiveTable {
        width: 100%; }
        .groupContainer .groupMgmt table.responsiveTable table, .groupContainer .groupMgmt table.responsiveTable thead, .groupContainer .groupMgmt table.responsiveTable tbody, .groupContainer .groupMgmt table.responsiveTable th, .groupContainer .groupMgmt table.responsiveTable td, .groupContainer .groupMgmt table.responsiveTable tr {
          display: block; }
        .groupContainer .groupMgmt table.responsiveTable thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px; }
        .groupContainer .groupMgmt table.responsiveTable td {
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding: 15px 10px 15px 150px !important;
          text-align: left !important;
          word-break: break-all; }
        .groupContainer .groupMgmt table.responsiveTable td:before {
          position: absolute;
          top: 15px;
          left: 10px;
          max-width: 150px;
          padding-right: 10px;
          white-space: nowrap;
          content: attr(data-column);
          color: #000;
          font-weight: bold; }
        .groupContainer .groupMgmt table.responsiveTable td.actions {
          padding: 5px 10px 15px !important;
          width: 100%; }
          .groupContainer .groupMgmt table.responsiveTable td.actions::before {
            display: none;
            left: 50%;
            color: #fff;
            transform: translateX(-50%);
            text-align: center;
            width: auto;
            padding: 0;
            font-size: 18px;
            top: 16px; }
          .groupContainer .groupMgmt table.responsiveTable td.actions a {
            display: block;
            margin: auto;
            max-width: 380px;
            height: 40px;
            text-decoration: none; }
            .groupContainer .groupMgmt table.responsiveTable td.actions a::after {
              text-align: center;
              display: block;
              padding-top: 12px;
              color: #fff;
              font-weight: bold; }
          .groupContainer .groupMgmt table.responsiveTable td.actions img {
            display: none; }
          .groupContainer .groupMgmt table.responsiveTable td.actions.historyFormActions a, .groupContainer .groupMgmt table.responsiveTable td.actions.groupUsageHistoryActions a {
            background: #1580a5; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.historyFormActions a::after, .groupContainer .groupMgmt table.responsiveTable td.actions.groupUsageHistoryActions a::after {
              content: attr(data-action); }
          .groupContainer .groupMgmt table.responsiveTable td.actions.contactFormActions a {
            margin-bottom: 10px; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.contactFormActions a:first-child {
              background: #D9C700; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.contactFormActions a:first-child::after {
                content: attr(data-action); }
            .groupContainer .groupMgmt table.responsiveTable td.actions.contactFormActions a:last-child {
              background: #F11B05; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.contactFormActions a:last-child::after {
                content: attr(data-action); }
          .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a {
            margin-bottom: 10px; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a:first-child {
              background: #1580a5; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a:first-child::after {
                content: 'View User'; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a:nth-child(2) {
              background: #ea9600; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a:nth-child(4) {
              background: #c42316; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.groupMgmtActions a:nth-child(4)::after {
                content: 'Delete User'; }
          .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a {
            margin-bottom: 10px; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a:first-child {
              background: #1580a5; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a:first-child::after {
                content: 'View Group'; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a:nth-child(2) {
              background: #ea9600; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a:nth-child(2)::after {
                content: 'Edit Group'; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a:nth-child(4) {
              background: #c42316; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.groupsListActions a:nth-child(4)::after {
                content: 'Delete Group'; }
          .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a {
            margin-bottom: 10px; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a:first-child {
              background: #1580a5; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a:first-child::after {
                content: 'View User'; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a:nth-child(2) {
              background: #ea9600; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a:nth-child(4) {
              background: #c42316; }
              .groupContainer .groupMgmt table.responsiveTable td.actions.userListActions a:nth-child(4)::after {
                content: 'Delete User'; } }
    .groupContainer .groupMgmt table tbody td:nth-child(8) {
      min-width: 124px; }
      .groupContainer .groupMgmt table tbody td:nth-child(8) img {
        width: 22px;
        margin-right: 5px; }

.groupUsageHistory {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px; }
  .groupUsageHistory table {
    width: 100%;
    max-width: 1040px;
    margin: auto;
    border-collapse: collapse;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
    .groupUsageHistory table thead th {
      font-weight: bold;
      padding: 15px 20px;
      color: #222; }
      .groupUsageHistory table thead th a {
        color: #222;
        text-decoration: none;
        padding-right: 18px;
        background: url(../img/neutral.png) no-repeat right center; }
        .groupUsageHistory table thead th a.asc {
          background: url(../img/down.png) no-repeat right center; }
        .groupUsageHistory table thead th a.desc {
          background: url(../img/up.png) no-repeat right center; }
    .groupUsageHistory table tbody tr {
      border-bottom: 1px solid #b8b8b8; }
      .groupUsageHistory table tbody tr:nth-child(odd) {
        background: #EBEBEB; }
      .groupUsageHistory table tbody tr:nth-child(even) {
        background: #F6F6F6; }
      .groupUsageHistory table tbody tr:first-child {
        border-top: 1px solid #222; }
      .groupUsageHistory table tbody tr:last-child {
        border-bottom: 1px solid #222; }
    .groupUsageHistory table tbody td {
      padding: 15px 20px; }
    @media only screen and (max-width: 768px) {
      .groupUsageHistory table.responsiveTable {
        width: 100%; }
        .groupUsageHistory table.responsiveTable table, .groupUsageHistory table.responsiveTable thead, .groupUsageHistory table.responsiveTable tbody, .groupUsageHistory table.responsiveTable th, .groupUsageHistory table.responsiveTable td, .groupUsageHistory table.responsiveTable tr {
          display: block; }
        .groupUsageHistory table.responsiveTable thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px; }
        .groupUsageHistory table.responsiveTable td {
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding: 15px 10px 15px 150px !important;
          text-align: left !important;
          word-break: break-all; }
        .groupUsageHistory table.responsiveTable td:before {
          position: absolute;
          top: 15px;
          left: 10px;
          max-width: 150px;
          padding-right: 10px;
          white-space: nowrap;
          content: attr(data-column);
          color: #000;
          font-weight: bold; }
        .groupUsageHistory table.responsiveTable td.actions {
          padding: 5px 10px 15px !important;
          width: 100%; }
          .groupUsageHistory table.responsiveTable td.actions::before {
            display: none;
            left: 50%;
            color: #fff;
            transform: translateX(-50%);
            text-align: center;
            width: auto;
            padding: 0;
            font-size: 18px;
            top: 16px; }
          .groupUsageHistory table.responsiveTable td.actions a {
            display: block;
            margin: auto;
            max-width: 380px;
            height: 40px;
            text-decoration: none; }
            .groupUsageHistory table.responsiveTable td.actions a::after {
              text-align: center;
              display: block;
              padding-top: 12px;
              color: #fff;
              font-weight: bold; }
          .groupUsageHistory table.responsiveTable td.actions img {
            display: none; }
          .groupUsageHistory table.responsiveTable td.actions.historyFormActions a, .groupUsageHistory table.responsiveTable td.actions.groupUsageHistoryActions a {
            background: #1580a5; }
            .groupUsageHistory table.responsiveTable td.actions.historyFormActions a::after, .groupUsageHistory table.responsiveTable td.actions.groupUsageHistoryActions a::after {
              content: attr(data-action); }
          .groupUsageHistory table.responsiveTable td.actions.contactFormActions a {
            margin-bottom: 10px; }
            .groupUsageHistory table.responsiveTable td.actions.contactFormActions a:first-child {
              background: #D9C700; }
              .groupUsageHistory table.responsiveTable td.actions.contactFormActions a:first-child::after {
                content: attr(data-action); }
            .groupUsageHistory table.responsiveTable td.actions.contactFormActions a:last-child {
              background: #F11B05; }
              .groupUsageHistory table.responsiveTable td.actions.contactFormActions a:last-child::after {
                content: attr(data-action); }
          .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a {
            margin-bottom: 10px; }
            .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a:first-child {
              background: #1580a5; }
              .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a:first-child::after {
                content: 'View User'; }
            .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(2) {
              background: #ea9600; }
              .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(4) {
              background: #c42316; }
              .groupUsageHistory table.responsiveTable td.actions.groupMgmtActions a:nth-child(4)::after {
                content: 'Delete User'; }
          .groupUsageHistory table.responsiveTable td.actions.groupsListActions a {
            margin-bottom: 10px; }
            .groupUsageHistory table.responsiveTable td.actions.groupsListActions a:first-child {
              background: #1580a5; }
              .groupUsageHistory table.responsiveTable td.actions.groupsListActions a:first-child::after {
                content: 'View Group'; }
            .groupUsageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(2) {
              background: #ea9600; }
              .groupUsageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(2)::after {
                content: 'Edit Group'; }
            .groupUsageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(4) {
              background: #c42316; }
              .groupUsageHistory table.responsiveTable td.actions.groupsListActions a:nth-child(4)::after {
                content: 'Delete Group'; }
          .groupUsageHistory table.responsiveTable td.actions.userListActions a {
            margin-bottom: 10px; }
            .groupUsageHistory table.responsiveTable td.actions.userListActions a:first-child {
              background: #1580a5; }
              .groupUsageHistory table.responsiveTable td.actions.userListActions a:first-child::after {
                content: 'View User'; }
            .groupUsageHistory table.responsiveTable td.actions.userListActions a:nth-child(2) {
              background: #ea9600; }
              .groupUsageHistory table.responsiveTable td.actions.userListActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .groupUsageHistory table.responsiveTable td.actions.userListActions a:nth-child(4) {
              background: #c42316; }
              .groupUsageHistory table.responsiveTable td.actions.userListActions a:nth-child(4)::after {
                content: 'Delete User'; } }
    .groupUsageHistory table a {
      color: #222;
      text-decoration: none;
      font-weight: 500; }
      .groupUsageHistory table a:hover {
        text-decoration: underline; }
    .groupUsageHistory table th:nth-child(4), .groupUsageHistory table th:nth-child(5), .groupUsageHistory table th:nth-child(6), .groupUsageHistory table th:nth-child(7), .groupUsageHistory table td:nth-child(4), .groupUsageHistory table td:nth-child(5), .groupUsageHistory table td:nth-child(6), .groupUsageHistory table td:nth-child(7) {
      text-align: center; }
    .groupUsageHistory table td:nth-child(7) {
      padding: 0; }
      .groupUsageHistory table td:nth-child(7) img {
        width: 22px; }

.groupsContainer, .usersContainer {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px; }
  .groupsContainer .addGroupButton, .groupsContainer .addUserButton, .usersContainer .addGroupButton, .usersContainer .addUserButton {
    max-width: 1040px;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    margin: 56px auto -84px; }
    .groupsContainer .addGroupButton a, .groupsContainer .addUserButton a, .usersContainer .addGroupButton a, .usersContainer .addUserButton a {
      float: right;
      padding: 10px 14px;
      border: 1px solid #20AD19;
      border-radius: 4px;
      color: #20AD19;
      text-decoration: none;
      transition: all .2s; }
      .groupsContainer .addGroupButton a::before, .groupsContainer .addUserButton a::before, .usersContainer .addGroupButton a::before, .usersContainer .addUserButton a::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      .groupsContainer .addGroupButton a:hover, .groupsContainer .addUserButton a:hover, .usersContainer .addGroupButton a:hover, .usersContainer .addUserButton a:hover {
        background: #DDF6DC;
        color: #0D8806;
        border: 1px solid #0D8806;
        transition: all .2s; }
    @media only screen and (max-width: 480px) {
      .groupsContainer .addGroupButton, .groupsContainer .addUserButton, .usersContainer .addGroupButton, .usersContainer .addUserButton {
        position: fixed;
        bottom: 0;
        margin: 0;
        transform: translateX(50%);
        right: 50%;
        border-radius: 0;
        z-index: 100;
        width: 100%;
        background: #20AD19; }
        .groupsContainer .addGroupButton a, .groupsContainer .addUserButton a, .usersContainer .addGroupButton a, .usersContainer .addUserButton a {
          border-radius: 0;
          width: 100%;
          text-align: center;
          color: #fff; } }
  .groupsContainer .searchContainer, .usersContainer .searchContainer {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px;
    max-width: 1040px;
    margin: auto;
    /*
    label {

      &.tooltip {

        &::after {
          content: '?';
          display: inline-block;
          border: 1px solid $blue;
          border-radius: 20px;
          height: 12px;
          width: 14px;
          text-align: center;
          color: $blue;
          margin: -3px 0 0 8px;
          padding-top: 2px;
          font-size: 12px;
        }
      }
    } */
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    justify-content: center; }
    .groupsContainer .searchContainer label, .groupsContainer .searchContainer legend, .usersContainer .searchContainer label, .usersContainer .searchContainer legend {
      text-transform: uppercase;
      font-size: 14px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 500;
      display: block;
      margin-bottom: 3px; }
    .groupsContainer .searchContainer input[type=text], .groupsContainer .searchContainer input[type=password], .groupsContainer .searchContainer input[type=number], .groupsContainer .searchContainer textarea, .usersContainer .searchContainer input[type=text], .usersContainer .searchContainer input[type=password], .usersContainer .searchContainer input[type=number], .usersContainer .searchContainer textarea {
      width: 100% !important;
      background: #e8e8e8;
      border-bottom: 1px solid #000;
      color: #000;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-size: 14px;
      padding: 4px 12px;
      margin-bottom: 20px; }
      .groupsContainer .searchContainer input[type=text]:disabled, .groupsContainer .searchContainer input[type=password]:disabled, .groupsContainer .searchContainer input[type=number]:disabled, .groupsContainer .searchContainer textarea:disabled, .usersContainer .searchContainer input[type=text]:disabled, .usersContainer .searchContainer input[type=password]:disabled, .usersContainer .searchContainer input[type=number]:disabled, .usersContainer .searchContainer textarea:disabled {
        background: url("/img/diabled.gif");
        color: #222;
        opacity: .7; }
    .groupsContainer .searchContainer .select label, .groupsContainer .searchContainer .checkbox label, .groupsContainer .searchContainer .radio label, .usersContainer .searchContainer .select label, .usersContainer .searchContainer .checkbox label, .usersContainer .searchContainer .radio label {
      display: inline-block;
      vertical-align: top; }
    .groupsContainer .searchContainer .select, .usersContainer .searchContainer .select {
      display: inline-block;
      margin-bottom: 20px; }
      .groupsContainer .searchContainer .select select, .usersContainer .searchContainer .select select {
        border: 1px solid #222;
        padding: 2px;
        margin: -6px 2px 0 8px;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-weight: 500; }
    .groupsContainer .searchContainer .checkbox input[type=checkbox], .usersContainer .searchContainer .checkbox input[type=checkbox] {
      height: 14px;
      width: 14px;
      border: 1px solid #222;
      margin-right: 10px; }
    .groupsContainer .searchContainer .radio, .usersContainer .searchContainer .radio {
      /*
      fieldset {
        margin:  0 0 20px;

        legend {
          margin-bottom: 10px;
          text-decoration: underline;
        }

        label {
          margin: 0 20px 3px 5px;
        }
      }
*/
      margin: 0 0 20px; }
      .groupsContainer .searchContainer .radio label, .usersContainer .searchContainer .radio label {
        margin: 0 20px 3px 0; }
        .groupsContainer .searchContainer .radio label:first-child, .usersContainer .searchContainer .radio label:first-child {
          margin: 0 0 10px 0;
          text-decoration: underline;
          display: block; }
        .groupsContainer .searchContainer .radio label input, .usersContainer .searchContainer .radio label input {
          margin-right: 5px; }
    .groupsContainer .searchContainer .text:not(.required) label::after, .groupsContainer .searchContainer .textarea:not(.required) label::after, .groupsContainer .searchContainer .tooltip_element.password:not(.required) label::after, .usersContainer .searchContainer .text:not(.required) label::after, .usersContainer .searchContainer .textarea:not(.required) label::after, .usersContainer .searchContainer .tooltip_element.password:not(.required) label::after {
      content: ' - Optional';
      font-weight: 400;
      font-style: italic;
      text-transform: none; }
    .groupsContainer .searchContainer .error-message, .usersContainer .searchContainer .error-message {
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      background-color: #f6a6a6;
      color: #fff;
      padding: 4px 8px;
      font-style: italic;
      margin: -20px 0 20px 0;
      font-size: 14px;
      list-style: none; }
    .groupsContainer .searchContainer .flexContainer, .usersContainer .searchContainer .flexContainer {
      display: inline-block;
      width: 100%;
      max-width: 850px; }
    .groupsContainer .searchContainer .selectMenus, .usersContainer .searchContainer .selectMenus {
      display: inline-block; }
      .groupsContainer .searchContainer .selectMenus label, .usersContainer .searchContainer .selectMenus label {
        display: block;
        margin-bottom: 5px; }
      .groupsContainer .searchContainer .selectMenus .input:first-child select, .usersContainer .searchContainer .selectMenus .input:first-child select {
        margin: 0; }
      .groupsContainer .searchContainer .selectMenus .input:last-child label, .usersContainer .searchContainer .selectMenus .input:last-child label {
        display: none; }
    .groupsContainer .searchContainer .text, .usersContainer .searchContainer .text {
      width: 51%;
      padding-left: 10px;
      display: inline-block; }
      .groupsContainer .searchContainer .text label, .usersContainer .searchContainer .text label {
        display: none; }
        .groupsContainer .searchContainer .text label::after, .usersContainer .searchContainer .text label::after {
          display: none; }
    .groupsContainer .searchContainer .submit, .usersContainer .searchContainer .submit {
      display: inline-block; }
      .groupsContainer .searchContainer .submit input, .usersContainer .searchContainer .submit input {
        background: #1580a5;
        padding: 8px 24px;
        color: #f9f9f9;
        font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
        font-size: 24px;
        transition: all .4s;
        border: 1px solid #1580a5;
        cursor: pointer;
        display: block;
        margin: 20px auto;
        font-size: 18px;
        padding: 6px 24px;
        margin: 0 0 0 10px; }
        .groupsContainer .searchContainer .submit input:hover, .usersContainer .searchContainer .submit input:hover {
          background: #f9f9f9;
          color: #d03d24;
          border: 1px solid #d03d24;
          transition: all .4s; }
    @media only screen and (max-width: 960px) {
      .groupsContainer .searchContainer .flexContainer, .usersContainer .searchContainer .flexContainer {
        max-width: 560px; }
      .groupsContainer .searchContainer .text, .usersContainer .searchContainer .text {
        width: calc(100% - 120px);
        padding: 0; } }
  .groupsContainer table, .usersContainer table {
    width: 100%;
    max-width: 1040px;
    margin: auto;
    border-collapse: collapse;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
    .groupsContainer table thead th, .usersContainer table thead th {
      font-weight: bold;
      padding: 15px 20px;
      color: #222; }
      .groupsContainer table thead th a, .usersContainer table thead th a {
        color: #222;
        text-decoration: none;
        padding-right: 18px;
        background: url(../img/neutral.png) no-repeat right center; }
        .groupsContainer table thead th a.asc, .usersContainer table thead th a.asc {
          background: url(../img/down.png) no-repeat right center; }
        .groupsContainer table thead th a.desc, .usersContainer table thead th a.desc {
          background: url(../img/up.png) no-repeat right center; }
    .groupsContainer table tbody tr, .usersContainer table tbody tr {
      border-bottom: 1px solid #b8b8b8; }
      .groupsContainer table tbody tr:nth-child(odd), .usersContainer table tbody tr:nth-child(odd) {
        background: #EBEBEB; }
      .groupsContainer table tbody tr:nth-child(even), .usersContainer table tbody tr:nth-child(even) {
        background: #F6F6F6; }
      .groupsContainer table tbody tr:first-child, .usersContainer table tbody tr:first-child {
        border-top: 1px solid #222; }
      .groupsContainer table tbody tr:last-child, .usersContainer table tbody tr:last-child {
        border-bottom: 1px solid #222; }
    .groupsContainer table tbody td, .usersContainer table tbody td {
      padding: 15px 20px; }
    @media only screen and (max-width: 768px) {
      .groupsContainer table.responsiveTable, .usersContainer table.responsiveTable {
        width: 100%; }
        .groupsContainer table.responsiveTable table, .groupsContainer table.responsiveTable thead, .groupsContainer table.responsiveTable tbody, .groupsContainer table.responsiveTable th, .groupsContainer table.responsiveTable td, .groupsContainer table.responsiveTable tr, .usersContainer table.responsiveTable table, .usersContainer table.responsiveTable thead, .usersContainer table.responsiveTable tbody, .usersContainer table.responsiveTable th, .usersContainer table.responsiveTable td, .usersContainer table.responsiveTable tr {
          display: block; }
        .groupsContainer table.responsiveTable thead tr, .usersContainer table.responsiveTable thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px; }
        .groupsContainer table.responsiveTable td, .usersContainer table.responsiveTable td {
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding: 15px 10px 15px 150px !important;
          text-align: left !important;
          word-break: break-all; }
        .groupsContainer table.responsiveTable td:before, .usersContainer table.responsiveTable td:before {
          position: absolute;
          top: 15px;
          left: 10px;
          max-width: 150px;
          padding-right: 10px;
          white-space: nowrap;
          content: attr(data-column);
          color: #000;
          font-weight: bold; }
        .groupsContainer table.responsiveTable td.actions, .usersContainer table.responsiveTable td.actions {
          padding: 5px 10px 15px !important;
          width: 100%; }
          .groupsContainer table.responsiveTable td.actions::before, .usersContainer table.responsiveTable td.actions::before {
            display: none;
            left: 50%;
            color: #fff;
            transform: translateX(-50%);
            text-align: center;
            width: auto;
            padding: 0;
            font-size: 18px;
            top: 16px; }
          .groupsContainer table.responsiveTable td.actions a, .usersContainer table.responsiveTable td.actions a {
            display: block;
            margin: auto;
            max-width: 380px;
            height: 40px;
            text-decoration: none; }
            .groupsContainer table.responsiveTable td.actions a::after, .usersContainer table.responsiveTable td.actions a::after {
              text-align: center;
              display: block;
              padding-top: 12px;
              color: #fff;
              font-weight: bold; }
          .groupsContainer table.responsiveTable td.actions img, .usersContainer table.responsiveTable td.actions img {
            display: none; }
          .groupsContainer table.responsiveTable td.actions.historyFormActions a, .groupsContainer table.responsiveTable td.actions.groupUsageHistoryActions a, .usersContainer table.responsiveTable td.actions.historyFormActions a, .usersContainer table.responsiveTable td.actions.groupUsageHistoryActions a {
            background: #1580a5; }
            .groupsContainer table.responsiveTable td.actions.historyFormActions a::after, .groupsContainer table.responsiveTable td.actions.groupUsageHistoryActions a::after, .usersContainer table.responsiveTable td.actions.historyFormActions a::after, .usersContainer table.responsiveTable td.actions.groupUsageHistoryActions a::after {
              content: attr(data-action); }
          .groupsContainer table.responsiveTable td.actions.contactFormActions a, .usersContainer table.responsiveTable td.actions.contactFormActions a {
            margin-bottom: 10px; }
            .groupsContainer table.responsiveTable td.actions.contactFormActions a:first-child, .usersContainer table.responsiveTable td.actions.contactFormActions a:first-child {
              background: #D9C700; }
              .groupsContainer table.responsiveTable td.actions.contactFormActions a:first-child::after, .usersContainer table.responsiveTable td.actions.contactFormActions a:first-child::after {
                content: attr(data-action); }
            .groupsContainer table.responsiveTable td.actions.contactFormActions a:last-child, .usersContainer table.responsiveTable td.actions.contactFormActions a:last-child {
              background: #F11B05; }
              .groupsContainer table.responsiveTable td.actions.contactFormActions a:last-child::after, .usersContainer table.responsiveTable td.actions.contactFormActions a:last-child::after {
                content: attr(data-action); }
          .groupsContainer table.responsiveTable td.actions.groupMgmtActions a, .usersContainer table.responsiveTable td.actions.groupMgmtActions a {
            margin-bottom: 10px; }
            .groupsContainer table.responsiveTable td.actions.groupMgmtActions a:first-child, .usersContainer table.responsiveTable td.actions.groupMgmtActions a:first-child {
              background: #1580a5; }
              .groupsContainer table.responsiveTable td.actions.groupMgmtActions a:first-child::after, .usersContainer table.responsiveTable td.actions.groupMgmtActions a:first-child::after {
                content: 'View User'; }
            .groupsContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(2), .usersContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(2) {
              background: #ea9600; }
              .groupsContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(2)::after, .usersContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .groupsContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(4), .usersContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(4) {
              background: #c42316; }
              .groupsContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(4)::after, .usersContainer table.responsiveTable td.actions.groupMgmtActions a:nth-child(4)::after {
                content: 'Delete User'; }
          .groupsContainer table.responsiveTable td.actions.groupsListActions a, .usersContainer table.responsiveTable td.actions.groupsListActions a {
            margin-bottom: 10px; }
            .groupsContainer table.responsiveTable td.actions.groupsListActions a:first-child, .usersContainer table.responsiveTable td.actions.groupsListActions a:first-child {
              background: #1580a5; }
              .groupsContainer table.responsiveTable td.actions.groupsListActions a:first-child::after, .usersContainer table.responsiveTable td.actions.groupsListActions a:first-child::after {
                content: 'View Group'; }
            .groupsContainer table.responsiveTable td.actions.groupsListActions a:nth-child(2), .usersContainer table.responsiveTable td.actions.groupsListActions a:nth-child(2) {
              background: #ea9600; }
              .groupsContainer table.responsiveTable td.actions.groupsListActions a:nth-child(2)::after, .usersContainer table.responsiveTable td.actions.groupsListActions a:nth-child(2)::after {
                content: 'Edit Group'; }
            .groupsContainer table.responsiveTable td.actions.groupsListActions a:nth-child(4), .usersContainer table.responsiveTable td.actions.groupsListActions a:nth-child(4) {
              background: #c42316; }
              .groupsContainer table.responsiveTable td.actions.groupsListActions a:nth-child(4)::after, .usersContainer table.responsiveTable td.actions.groupsListActions a:nth-child(4)::after {
                content: 'Delete Group'; }
          .groupsContainer table.responsiveTable td.actions.userListActions a, .usersContainer table.responsiveTable td.actions.userListActions a {
            margin-bottom: 10px; }
            .groupsContainer table.responsiveTable td.actions.userListActions a:first-child, .usersContainer table.responsiveTable td.actions.userListActions a:first-child {
              background: #1580a5; }
              .groupsContainer table.responsiveTable td.actions.userListActions a:first-child::after, .usersContainer table.responsiveTable td.actions.userListActions a:first-child::after {
                content: 'View User'; }
            .groupsContainer table.responsiveTable td.actions.userListActions a:nth-child(2), .usersContainer table.responsiveTable td.actions.userListActions a:nth-child(2) {
              background: #ea9600; }
              .groupsContainer table.responsiveTable td.actions.userListActions a:nth-child(2)::after, .usersContainer table.responsiveTable td.actions.userListActions a:nth-child(2)::after {
                content: 'Edit User'; }
            .groupsContainer table.responsiveTable td.actions.userListActions a:nth-child(4), .usersContainer table.responsiveTable td.actions.userListActions a:nth-child(4) {
              background: #c42316; }
              .groupsContainer table.responsiveTable td.actions.userListActions a:nth-child(4)::after, .usersContainer table.responsiveTable td.actions.userListActions a:nth-child(4)::after {
                content: 'Delete User'; } }
    @media only screen and (max-width: 768px) {
      .groupsContainer table, .usersContainer table {
        margin-top: 40px; } }
    .groupsContainer table a, .usersContainer table a {
      color: #222;
      text-decoration: none;
      font-weight: 500; }
      .groupsContainer table a:hover, .usersContainer table a:hover {
        text-decoration: underline; }
    .groupsContainer table th:nth-child(2), .groupsContainer table th:nth-child(3), .groupsContainer table th:nth-child(4), .groupsContainer table th:nth-child(5), .groupsContainer table th:nth-child(6), .groupsContainer table th:nth-child(7), .groupsContainer table th:nth-child(8), .groupsContainer table td:nth-child(2), .groupsContainer table td:nth-child(3), .groupsContainer table td:nth-child(4), .groupsContainer table td:nth-child(5), .groupsContainer table td:nth-child(6), .groupsContainer table td:nth-child(7), .groupsContainer table td:nth-child(8), .usersContainer table th:nth-child(2), .usersContainer table th:nth-child(3), .usersContainer table th:nth-child(4), .usersContainer table th:nth-child(5), .usersContainer table th:nth-child(6), .usersContainer table th:nth-child(7), .usersContainer table th:nth-child(8), .usersContainer table td:nth-child(2), .usersContainer table td:nth-child(3), .usersContainer table td:nth-child(4), .usersContainer table td:nth-child(5), .usersContainer table td:nth-child(6), .usersContainer table td:nth-child(7), .usersContainer table td:nth-child(8) {
      text-align: center; }
    .groupsContainer table td:last-child, .usersContainer table td:last-child {
      padding: 0; }
      .groupsContainer table td:last-child img, .usersContainer table td:last-child img {
        width: 22px; }

.fileDownload {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  max-width: 540px;
  margin: 80px auto 0;
  min-height: 40vh;
  text-align: center; }
  .fileDownload p {
    font-size: 16px !important; }
  .fileDownload .instruction {
    margin: 28px 0 -45px;
    z-index: 1;
    font-style: italic;
    color: #d03d24;
    font-size: 14px !important; }
  .fileDownload a {
    width: 100%;
    height: 200px;
    border: 3px dashed #d03d24;
    border-radius: 20px;
    display: block;
    max-width: 400px;
    margin: 20px auto;
    z-index: 2;
    position: relative; }
  .fileDownload img {
    display: block;
    margin: 48px auto;
    max-width: 140px; }
  .fileDownload form {
    /*
    label {

      &.tooltip {

        &::after {
          content: '?';
          display: inline-block;
          border: 1px solid $blue;
          border-radius: 20px;
          height: 12px;
          width: 14px;
          text-align: center;
          color: $blue;
          margin: -3px 0 0 8px;
          padding-top: 2px;
          font-size: 12px;
        }
      }
    } */
    margin: 20px 0;
    text-align: left; }
    .fileDownload form label, .fileDownload form legend {
      text-transform: uppercase;
      font-size: 14px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 500;
      display: block;
      margin-bottom: 3px; }
    .fileDownload form input[type=text], .fileDownload form input[type=password], .fileDownload form input[type=number], .fileDownload form textarea {
      width: 100% !important;
      background: #e8e8e8;
      border-bottom: 1px solid #000;
      color: #000;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-size: 14px;
      padding: 4px 12px;
      margin-bottom: 20px; }
      .fileDownload form input[type=text]:disabled, .fileDownload form input[type=password]:disabled, .fileDownload form input[type=number]:disabled, .fileDownload form textarea:disabled {
        background: url("/img/diabled.gif");
        color: #222;
        opacity: .7; }
    .fileDownload form .select label, .fileDownload form .checkbox label, .fileDownload form .radio label {
      display: inline-block;
      vertical-align: top; }
    .fileDownload form .select {
      display: inline-block;
      margin-bottom: 20px; }
      .fileDownload form .select select {
        border: 1px solid #222;
        padding: 2px;
        margin: -6px 2px 0 8px;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-weight: 500; }
    .fileDownload form .checkbox input[type=checkbox] {
      height: 14px;
      width: 14px;
      border: 1px solid #222;
      margin-right: 10px; }
    .fileDownload form .radio {
      /*
      fieldset {
        margin:  0 0 20px;

        legend {
          margin-bottom: 10px;
          text-decoration: underline;
        }

        label {
          margin: 0 20px 3px 5px;
        }
      }
*/
      margin: 0 0 20px; }
      .fileDownload form .radio label {
        margin: 0 20px 3px 0; }
        .fileDownload form .radio label:first-child {
          margin: 0 0 10px 0;
          text-decoration: underline;
          display: block; }
        .fileDownload form .radio label input {
          margin-right: 5px; }
    .fileDownload form .text:not(.required) label::after, .fileDownload form .textarea:not(.required) label::after, .fileDownload form .tooltip_element.password:not(.required) label::after {
      content: ' - Optional';
      font-weight: 400;
      font-style: italic;
      text-transform: none; }
    .fileDownload form .error-message {
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      background-color: #f6a6a6;
      color: #fff;
      padding: 4px 8px;
      font-style: italic;
      margin: -20px 0 20px 0;
      font-size: 14px;
      list-style: none; }
    .fileDownload form label::after {
      display: none; }
    .fileDownload form .submit input {
      background: #1580a5;
      padding: 8px 24px;
      color: #f9f9f9;
      font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
      font-size: 24px;
      transition: all .4s;
      border: 1px solid #1580a5;
      cursor: pointer;
      display: block;
      margin: 20px auto;
      float: left;
      margin: -5px 0 0 0;
      padding: 4px 16px;
      font-size: 18px; }
      .fileDownload form .submit input:hover {
        background: #f9f9f9;
        color: #d03d24;
        border: 1px solid #d03d24;
        transition: all .4s; }

.noResults {
  text-align: center;
  margin: 40px auto;
  font-style: italic;
  color: #d03d24; }

.requirednotice {
  display: none; }

.unsupportedBrowser {
  display: none;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  max-width: 680px;
  font-size: 18px;
  text-align: center;
  margin: 60px auto;
  line-height: 130%;
  padding: 20px;
  border: 1px solid #000; }
  .unsupportedBrowser strong {
    display: block;
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 700;
    color: red; }

.custom_tooltip_class.eng {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.1;
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  color: #222222; }

.custom_tooltip_class.jpn {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.1;
  font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
  color: #222222; }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
  .unsupportedBrowser {
    display: block; }
  .fileslist {
    display: none; } }

footer {
  color: #fff;
  clear: both;
  background: #d03d24; }
  footer h4 {
    color: #fff; }
  footer #footer-container {
    padding: 40px 0 20px; }
    footer #footer-container #footer-portal {
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      max-width: 1280px;
      margin: auto;
      padding: 0 15px;
      align-items: flex-start; }
      @media only screen and (max-width: 768px) {
        footer #footer-container #footer-portal {
          flex-wrap: wrap; } }
      footer #footer-container #footer-portal h4 {
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-size: 18px;
        margin-bottom: 6px;
        font-weight: 900; }
      footer #footer-container #footer-portal a {
        line-height: 26px;
        text-decoration: none; }
        footer #footer-container #footer-portal a:hover {
          text-decoration: underline; }
      footer #footer-container #footer-portal ul {
        list-style: none; }
        footer #footer-container #footer-portal ul li {
          font-size: 16px; }
          footer #footer-container #footer-portal ul li a {
            color: #fff; }
      footer #footer-container #footer-portal.jpnFooter h4 {
        font-weight: 700; }
      footer #footer-container #footer-portal .blogfeed span {
        display: block;
        font-size: 11px;
        padding-top: 12px;
        border-top: 1px dashed #fff; }
      footer #footer-container #footer-portal .blogfeed p {
        margin-bottom: 6px; }
      footer #footer-container #footer-portal .col {
        width: 25%;
        padding: 20px; }
        footer #footer-container #footer-portal .col a, footer #footer-container #footer-portal .col p {
          color: #fff;
          font-weight: 400;
          font-size: 16px; }
        @media only screen and (max-width: 768px) {
          footer #footer-container #footer-portal .col {
            width: 50%; } }
        @media only screen and (max-width: 480px) {
          footer #footer-container #footer-portal .col {
            padding: 20px 0; }
            footer #footer-container #footer-portal .col:first-child, footer #footer-container #footer-portal .col:last-child {
              width: 100%; } }
        @media only screen and (min-width: 769px) {
          footer #footer-container #footer-portal .col:first-child {
            padding-left: 0; }
          footer #footer-container #footer-portal .col:last-child {
            padding-right: 0; } }
      footer #footer-container #footer-portal #social-footer {
        margin: 20px 0; }
        @media only screen and (max-width: 480px) {
          footer #footer-container #footer-portal #social-footer {
            text-align: center; } }
      footer #footer-container #footer-portal .sn-icons {
        width: 40px;
        height: 40px;
        display: inline-block;
        cursor: pointer;
        margin: 0 3px 3px 0;
        background-size: 100%;
        transition: all .2s; }
        footer #footer-container #footer-portal .sn-icons a {
          display: block;
          width: 40px;
          height: 40px;
          text-indent: -9999em; }
        footer #footer-container #footer-portal .sn-icons:hover {
          transform: translateY(-3px);
          transition: all .2s; }
        @media only screen and (max-width: 480px) {
          footer #footer-container #footer-portal .sn-icons {
            width: 11vw;
            height: 11vw; }
            footer #footer-container #footer-portal .sn-icons a {
              width: 11vw;
              height: 11vw; } }
      footer #footer-container #footer-portal #youtube {
        background-image: url(../../img/portal/sns/youtube.png); }
      footer #footer-container #footer-portal #facebook {
        background-image: url(../../img/portal/sns/facebook.png); }
      footer #footer-container #footer-portal #twitter {
        background-image: url(../../img/portal/sns/twitter.png); }
      footer #footer-container #footer-portal #bloguru {
        background-image: url(../../img/portal/sns/bloguru.png); }
      footer #footer-container #footer-portal #linkedin {
        background-image: url(../../img/portal/sns/linkedin.png); }
      footer #footer-container #footer-portal #insta {
        background-image: url(../../img/portal/sns/instagram.png); }
    footer #footer-container #footer-admin {
      width: 100%;
      max-width: 1280px;
      margin: auto;
      padding: 0 15px;
      text-align: center;
      margin-bottom: 40px; }
      footer #footer-container #footer-admin .footerNav {
        margin-bottom: 20px; }
        footer #footer-container #footer-admin .footerNav ul {
          margin: 10px 0; }
          footer #footer-container #footer-admin .footerNav ul li {
            display: inline-block; }
            footer #footer-container #footer-admin .footerNav ul li a {
              color: #fff;
              text-decoration: none;
              display: inline-block;
              transition: all .3s; }
              footer #footer-container #footer-admin .footerNav ul li a:hover {
                transform: translateY(-1px);
                transition: all .3s;
                text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); }
            footer #footer-container #footer-admin .footerNav ul li::after {
              content: '|';
              margin: 0 15px; }
            footer #footer-container #footer-admin .footerNav ul li:last-child::after {
              display: none; }
      footer #footer-container #footer-admin .language-toggle {
        margin-bottom: 10px; }
        footer #footer-container #footer-admin .language-toggle ul li {
          display: inline-block; }
          footer #footer-container #footer-admin .language-toggle ul li a {
            display: inline-block;
            padding: 4px 10px 4px 30px;
            margin-bottom: 10px;
            color: #fff;
            text-decoration: none; }
            footer #footer-container #footer-admin .language-toggle ul li a:hover {
              text-decoration: underline; }
          footer #footer-container #footer-admin .language-toggle ul li.english a {
            background: url(../../img/portal/icon-us.gif) no-repeat 0 transparent; }
          footer #footer-container #footer-admin .language-toggle ul li.japanese a {
            background: url(../../img/portal/icon-jp.gif) no-repeat 0 transparent; }
      footer #footer-container #footer-admin .footer-info p {
        margin-bottom: 4px;
        font-size: 14px !important; }
        footer #footer-container #footer-admin .footer-info p:first-child {
          margin-bottom: 0; }
        footer #footer-container #footer-admin .footer-info p a {
          text-decoration: none;
          color: #fff; }
          footer #footer-container #footer-admin .footer-info p a:hover {
            text-decoration: underline; }
  footer .bottom_footer {
    padding: 20px 0;
    position: relative;
    z-index: 10; }
    footer .bottom_footer .bottom_footer_container {
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      max-width: 1280px;
      margin: auto;
      padding: 0 15px;
      flex-wrap: wrap;
      margin-bottom: 20px; }
      footer .bottom_footer .bottom_footer_container h4 {
        font-size: 18px;
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        font-weight: 900;
        margin-bottom: 10px; }
      footer .bottom_footer .bottom_footer_container .validation-error {
        font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
        color: #FDE164;
        font-weight: bold;
        position: relative;
        top: -15px;
        display: inline-block; }
      footer .bottom_footer .bottom_footer_container .sub {
        width: 50%; }
        footer .bottom_footer .bottom_footer_container .sub input, footer .bottom_footer .bottom_footer_container .sub button {
          padding: 6px 12px;
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
          font-size: 16px;
          border-radius: 4px; }
        footer .bottom_footer .bottom_footer_container .sub input {
          width: calc(100% - 120px);
          border: none;
          background: #fff;
          color: #000;
          margin-bottom: 20px; }
        footer .bottom_footer .bottom_footer_container .sub button {
          background: none;
          border: 1px solid #fff;
          color: #fff;
          margin-left: 10px;
          transition: all .4s; }
          footer .bottom_footer .bottom_footer_container .sub button:hover {
            cursor: pointer;
            background: #fff;
            color: #d03d24;
            transition: all .4s; }
        footer .bottom_footer .bottom_footer_container .sub .lang_sec {
          width: 100%; }
          footer .bottom_footer .bottom_footer_container .sub .lang_sec .lang-containers a {
            float: none;
            display: inline-block;
            padding: 4px 10px 4px 30px;
            margin-bottom: 10px;
            color: #fff;
            text-decoration: none; }
            footer .bottom_footer .bottom_footer_container .sub .lang_sec .lang-containers a:hover {
              text-decoration: underline; }
            footer .bottom_footer .bottom_footer_container .sub .lang_sec .lang-containers a:first-child {
              background: url(../../img/portal/icon-us.gif) no-repeat 0 transparent; }
            footer .bottom_footer .bottom_footer_container .sub .lang_sec .lang-containers a:last-child {
              background: url(../../img/portal/icon-jp.gif) no-repeat 0 transparent; }
          footer .bottom_footer .bottom_footer_container .sub .lang_sec p {
            margin-bottom: 4px;
            font-size: 14px !important; }
            footer .bottom_footer .bottom_footer_container .sub .lang_sec p a {
              text-decoration: underline;
              color: #fff; }
              footer .bottom_footer .bottom_footer_container .sub .lang_sec p a:hover {
                text-decoration: none; }
      footer .bottom_footer .bottom_footer_container .pspLogo {
        width: 50%;
        text-align: right;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end; }
        footer .bottom_footer .bottom_footer_container .pspLogo img {
          width: 100px; }
        footer .bottom_footer .bottom_footer_container .pspLogo div {
          width: 100px;
          font-size: 12px;
          position: absolute;
          right: 0rem;
          bottom: 0rem;
          text-align: center;
          line-height: 0;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center; }
          footer .bottom_footer .bottom_footer_container .pspLogo div p {
            font-size: 12px !important; }
        footer .bottom_footer .bottom_footer_container .pspLogo .ja-us-emblem p {
          font-size: 9px !important; }
      @media only screen and (max-width: 768px) {
        footer .bottom_footer .bottom_footer_container .sub {
          width: 75%; }
          footer .bottom_footer .bottom_footer_container .sub .lang_sec p {
            font-size: 12px; }
        footer .bottom_footer .bottom_footer_container .pspLogo {
          width: 25%; }
          footer .bottom_footer .bottom_footer_container .pspLogo img {
            width: 100px; } }
      @media only screen and (max-width: 480px) {
        footer .bottom_footer .bottom_footer_container .sub {
          width: 100%;
          text-align: center; }
        footer .bottom_footer .bottom_footer_container .pspLogo {
          display: none; } }

#footer-container #Bloguru-default, .hide #Bloguru-default {
  display: none; }

.wavyBorder {
  width: calc(100% + 30px);
  margin-left: -15px;
  display: block; }
  .wavyBorder.topBorder {
    margin-bottom: -2px; }
  .wavyBorder.bottomBorder {
    margin-top: -2px; }

#mainwrapper {
  width: auto;
  background: none;
  clear: none;
  float: none;
  padding: 0; }
  #mainwrapper #main {
    width: auto;
    margin: 0;
    padding: 0;
    clear: none; }
    #mainwrapper #main h2 {
      box-shadow: none;
      background: none;
      color: #222;
      float: none;
      margin: 0;
      padding: 0;
      z-index: 0 !important;
      font-size: 38px; }

html {
  overflow-x: hidden; }

body {
  background: #f9f9f9 !important;
  color: #222 !important;
  overflow-x: hidden; }

#mainwrapper #main header {
  overflow: hidden;
  padding: 20px 0 60px;
  margin-top: 100px; }
  #mainwrapper #main header .header {
    background: #d03d24;
    padding: 40px 0; }
  @media only screen and (max-width: 768px) {
    #mainwrapper #main header {
      padding: 0; } }
  #mainwrapper #main header .page-title {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px;
    text-align: center; }
    #mainwrapper #main header .page-title h1 {
      font-size: 56px;
      margin-bottom: 20px;
      color: #fff; }
      #mainwrapper #main header .page-title h1.all_new {
        margin-bottom: 0;
        line-height: 65px; }
      #mainwrapper #main header .page-title h1 span.underline {
        position: relative;
        font-family: "Averia Sans Libre","meiryo",sans-serif !important;
        font-weight: 400; }
        #mainwrapper #main header .page-title h1 span.underline:after {
          content: "";
          width: 0;
          height: 35px;
          position: absolute;
          left: 0;
          bottom: -28px;
          animation: underlineDraw .5s forwards;
          animation-delay: 1s;
          background: url("/img/portal/underline.png");
          background-repeat: no-repeat;
          background-size: 200px; }
    #mainwrapper #main header .page-title h3 {
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-size: 21px;
      font-weight: 400;
      color: #fff; }
  #mainwrapper #main header h2 {
    text-align: center;
    margin: 0 20px;
    font-weight: 300;
    font-size: 21px; }
  #mainwrapper #main header .homeContainer {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px; }
    @media only screen and (max-width: 768px) {
      #mainwrapper #main header .homeContainer {
        height: auto;
        min-height: 440px; } }
  #mainwrapper #main header .header-container {
    position: relative; }
  #mainwrapper #main header.home {
    padding: 160px 0 60px;
    padding: 0;
    margin-top: 0;
    background-image: url("/img/portal/hill.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    /*
		@media screen and (max-height: 520px)  {

			.arrowContainer {
				position: relative;
				@include flexbox();
				@include container();
				justify-content: center;
				bottom: 0;
				left: 0;
				transform: none;
				margin-top: 50px;

				.arrows {
					margin-top: 40px;
				}
			}

		}
*/ }
    #mainwrapper #main header.home .headerInfo {
      margin: 5em auto 0;
      width: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center; }
      #mainwrapper #main header.home .headerInfo .header-right {
        width: 60%;
        background-image: url("/img/portal/heroimg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 3%;
        height: 485px; }
        @media only screen and (max-width: 960px) {
          #mainwrapper #main header.home .headerInfo .header-right {
            height: 400px; } }
        @media only screen and (max-width: 560px) {
          #mainwrapper #main header.home .headerInfo .header-right {
            height: 330px; } }
      #mainwrapper #main header.home .headerInfo .header-left {
        width: 37%;
        max-height: 260px; }
        #mainwrapper #main header.home .headerInfo .header-left .rotatingText-content {
          position: relative; }
        #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText {
          display: flex; }
          #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content {
            position: relative; }
            #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content .rotatingText-description, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description {
              left: 0;
              opacity: 0;
              position: absolute;
              right: 0;
              top: 0;
              width: 11em;
              height: 40px;
              max-width: 500px;
              margin-left: 10px;
              overflow: hidden;
              animation: topToBottom 10.5s linear infinite 0s;
              -ms-animation: topToBottom 10.5s linear infinite 0s;
              -webkit-animation: topToBottom 10.5s linear infinite 0s; }
              @media only screen and (max-width: 768px) {
                #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content .rotatingText-description, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description {
                  width: 460px;
                  text-align: left; } }
              #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(2), #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(2) {
                animation-delay: 2.5s;
                -ms-animation-delay: 2.5s;
                -webkit-animation-delay: 2.5s; }
              #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(3), #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(3) {
                animation-delay: 5s;
                -ms-animation-delay: 5s;
                -webkit-animation-delay: 5s; }
              #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(4), #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(4) {
                animation-delay: 8s;
                -ms-animation-delay: 8s;
                -webkit-animation-delay: 8s; }
              #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(5), #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description:nth-of-type(5) {
                animation-delay: 10.5s;
                -ms-animation-delay: 10.5s;
                -webkit-animation-delay: 10.5s; }

@-moz-keyframes topToBottom {
  0% {
    opacity: 0; }
  5% {
    opacity: 0;
    -moz-transform: translateY(50px); }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px); }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px); }
  30% {
    opacity: 0;
    -moz-transform: translateY(-50px); }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes topToBottom {
  0% {
    opacity: 0; }
  5% {
    opacity: 0;
    -webkit-transform: translateY(50px); }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0px); }
  25% {
    opacity: 1;
    -webkit-transform: translateY(0px); }
  30% {
    opacity: 0;
    -webkit-transform: translateY(-50px); }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-ms-keyframes topToBottom {
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 0%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 0% {
    opacity: 0; }
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 5%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 5% {
    opacity: 0;
    -ms-transform: translateY(-50px); }
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 10%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 10% {
    opacity: 1;
    -ms-transform: translateY(0px); }
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 25%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 25% {
    opacity: 1;
    -ms-transform: translateY(0px); }
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 30%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 30% {
    opacity: 0;
    -ms-transform: translateY(50px); }
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 80%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 80% {
    opacity: 0; }
  #mainwrapper #main header.home .headerInfo .header-left .eng-rotatingText .rotatingText-content 100%, #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content 100% {
    opacity: 0; } }

@keyframes fade-text-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 80px, 0); }
  50%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
        #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .send-text {
          display: none; }
        #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content {
          width: 100%;
          height: 2.7vh; }
          #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description {
            width: 20em;
            max-width: 500px;
            font-weight: 600;
            margin-left: 0; }
            @media only screen and (max-width: 480px) {
              #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText .rotatingText-content .rotatingText-description {
                max-width: 260px;
                margin: 0 auto;
                overflow: initial;
                text-align: center; } }
        #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText h1 {
          font-size: 1.45rem; }
          @media only screen and (max-width: 480px) {
            #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText h1 {
              font-size: 1.25rem; } }
        #mainwrapper #main header.home .headerInfo .header-left .jpn-rotatingText h3 {
          font-size: 1rem; }
      #mainwrapper #main header.home .headerInfo .header_links {
        margin-bottom: 1.75em; }
      #mainwrapper #main header.home .headerInfo a {
        color: white;
        background: linear-gradient(93.34deg, #D03D24 27.56%, #F4852A 112.34%);
        padding: 12px 18px;
        border-radius: 5px;
        font-size: 24px;
        text-decoration: none;
        transition: all .4s;
        position: relative;
        display: inline-block;
        font-family: "Averia Sans Libre", "meiryo", sans-serif !important; }
        #mainwrapper #main header.home .headerInfo a:hover {
          opacity: 0.7;
          transition: all .4s; }
        #mainwrapper #main header.home .headerInfo a.new {
          color: #2AD187;
          background: none;
          padding: 12px 18px;
          border: 1px solid #2AD187;
          font-size: 24px;
          text-decoration: none;
          transition: all .4s;
          margin: 10px 0 0;
          position: relative;
          display: inline-block;
          font-family: "Averia Sans Libre", "meiryo", sans-serif !important; }
          #mainwrapper #main header.home .headerInfo a.new:hover {
            background: #d03d24;
            color: #f9f9f9;
            border: 1px solid #d03d24;
            transition: all .4s; }
      @media only screen and (max-width: 768px) {
        #mainwrapper #main header.home .headerInfo {
          position: relative;
          width: 100%;
          text-align: center;
          transform: none;
          display: block; }
          #mainwrapper #main header.home .headerInfo .header-left {
            width: 90%;
            margin: 32px auto 0; }
          #mainwrapper #main header.home .headerInfo .header-right {
            width: 100%;
            margin-left: 0; } }
      @media only screen and (max-width: 480px) {
        #mainwrapper #main header.home .headerInfo {
          padding: 0; }
          #mainwrapper #main header.home .headerInfo a {
            margin-top: 30px; }
          #mainwrapper #main header.home .headerInfo h3 {
            font-size: 18px; } }
    #mainwrapper #main header.home h1 {
      font-size: 36px;
      margin: 0; }
      #mainwrapper #main header.home h1.jpnStyle {
        font-size: 40px; }
    #mainwrapper #main header.home h3 {
      margin: 20px auto 50px 0;
      font-size: 21px;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      font-weight: 400;
      width: 90%;
      line-height: 130%; }
      @media only screen and (max-width: 560px) {
        #mainwrapper #main header.home h3 {
          margin: 20px auto 20px 0; } }
    @media only screen and (max-width: 480px) {
      #mainwrapper #main header.home .jpn-header-dp {
        margin: 50px auto 0; } }
    #mainwrapper #main header.home strong {
      font-weight: bold;
      font-size: 24px;
      display: block;
      margin-bottom: 5px; }
    #mainwrapper #main header.home .arrowContainer {
      bottom: 80px;
      width: 100%;
      padding: 0 15px; }
      #mainwrapper #main header.home .arrowContainer .arrows {
        display: inline-block;
        position: relative;
        transform: translateX(-50%) rotate(90deg);
        margin: 20px auto;
        font-size: 28px; }
        #mainwrapper #main header.home .arrowContainer .arrows span {
          color: rgba(0, 0, 0, 0.33);
          animation: arrowAnimation 2s infinite 0s; }
          #mainwrapper #main header.home .arrowContainer .arrows span:nth-child(2) {
            animation-delay: .5s; }
          #mainwrapper #main header.home .arrowContainer .arrows span:nth-child(3) {
            animation-delay: 1s; }
    @media only screen and (max-width: 1240px) {
      #mainwrapper #main header.home h1 {
        font-size: 36px; }
        #mainwrapper #main header.home h1.jpnStyle {
          font-size: 30px; } }
    @media only screen and (max-width: 1130px) {
      #mainwrapper #main header.home h1 {
        font-size: 30px; } }
    @media only screen and (max-width: 960px) {
      #mainwrapper #main header.home h1 {
        font-size: 26px; } }
    @media only screen and (max-width: 768px) {
      #mainwrapper #main header.home h1 {
        font-size: 40px; } }
    @media only screen and (max-width: 560px) {
      #mainwrapper #main header.home h1 {
        font-size: 5.5vw; } }

#mainwrapper #main .featuresSection {
  background: #F9F9F9;
  padding: 50px 0;
  color: #222222; }
  #mainwrapper #main .featuresSection .contentContainer {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px; }
    #mainwrapper #main .featuresSection .contentContainer h2 {
      font-size: 38px;
      margin: 20px 0 30px;
      text-align: center; }
    #mainwrapper #main .featuresSection .contentContainer .emphasize {
      font-size: 21px !important;
      text-align: center;
      color: #fff; }
    #mainwrapper #main .featuresSection .contentContainer .featuresCTA {
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0 80px; }
      @media only screen and (max-width: 768px) {
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA {
          flex-wrap: wrap; } }
      #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment {
        width: 50%; }
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) {
          width: 52%;
          max-width: 546px;
          height: fit-content;
          padding-right: 24px; }
          @media only screen and (max-width: 768px) {
            #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) {
              width: 90%;
              order: 2;
              margin: 0 auto; } }
          @media only screen and (max-width: 560px) {
            #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) {
              max-height: fit-content; } }
          #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) .features-description:nth-of-type(2) {
            margin-top: 2em; }
          #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) .features-description .feature-title {
            font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
            font-size: 1.7em;
            color: #222222; }
            @media only screen and (max-width: 560px) {
              #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) .features-description .feature-title {
                font-size: 1.2em; } }
          #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) .features-description .feature-content {
            font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
            color: #686868;
            font-size: 1.2rem;
            margin: 8px;
            line-height: 1.2; }
            @media only screen and (max-width: 560px) {
              #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(1) .features-description .feature-content {
                font-size: 1rem; } }
        @media only screen and (max-width: 768px) {
          #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(2) {
            width: 90%;
            order: 1;
            margin: 0 auto; } }
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(2) .features-description:nth-of-type(2) {
          margin-top: 2em; }
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(2) .features-description .feature-title {
          font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
          font-size: 1.7em;
          color: #222222; }
          @media only screen and (max-width: 560px) {
            #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(2) .features-description .feature-title {
              font-size: 1.2rem; } }
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(2) .features-description .feature-content {
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
          color: #686868;
          font-size: 1.2rem;
          margin: 8px;
          line-height: 1.2; }
          @media only screen and (max-width: 560px) {
            #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment:nth-of-type(2) .features-description .feature-content {
              font-size: 1rem; } }
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment img {
          width: 100%; }
          @media only screen and (max-width: 768px) {
            #mainwrapper #main .featuresSection .contentContainer .featuresCTA .segment img {
              width: 100%; } }
      @media only screen and (max-width: 768px) {
        #mainwrapper #main .featuresSection .contentContainer .featuresCTA .mb-top-segment {
          order: 1 !important; } }
      #mainwrapper #main .featuresSection .contentContainer .featuresCTA .feature2-box {
        max-width: 530px; }
        @media only screen and (max-width: 768px) {
          #mainwrapper #main .featuresSection .contentContainer .featuresCTA .feature2-box {
            order: 2 !important;
            margin-top: 70px !important; } }
    #mainwrapper #main .featuresSection .contentContainer .featuresBtn {
      display: -ms-flexbox;
      display: flex;
      justify-content: center; }
      #mainwrapper #main .featuresSection .contentContainer .featuresBtn a {
        color: #fff;
        background: none;
        padding: 12px 18px;
        border: 1px solid #fff;
        font-size: 24px;
        text-decoration: none;
        transition: all .4s;
        position: relative;
        display: inline-block;
        font-family: "Averia Sans Libre", "meiryo", sans-serif !important; }
        #mainwrapper #main .featuresSection .contentContainer .featuresBtn a:hover {
          background: #fff;
          color: #d03d24;
          transition: all .4s; }

#mainwrapper #main .plans {
  padding: 80px 0;
  background-color: white; }
  #mainwrapper #main .plans h2 {
    font-size: 38px;
    text-align: center; }
  #mainwrapper #main .plans .contentContainer {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 15px;
    display: -ms-flexbox;
    display: flex;
    max-width: 890px; }
    @media only screen and (max-width: 768px) {
      #mainwrapper #main .plans .contentContainer {
        flex-wrap: wrap; } }
    #mainwrapper #main .plans .contentContainer .plan-container {
      border: 1px solid #E0E0E0;
      border-radius: 5px;
      width: 50%;
      margin: 72px 8px;
      padding: 64px;
      opacity: 0;
      transform: translateY(10px); }
      @media only screen and (max-width: 768px) {
        #mainwrapper #main .plans .contentContainer .plan-container {
          display: none; } }
      #mainwrapper #main .plans .contentContainer .plan-container.in-view {
        animation: fadeIn 1.2s forwards; }
      #mainwrapper #main .plans .contentContainer .plan-container img {
        width: 150px;
        display: block;
        margin: 0 auto 36px; }
      #mainwrapper #main .plans .contentContainer .plan-container h3 {
        font-size: 32px;
        text-align: center;
        margin-bottom: 24px;
        width: 100%;
        font-family: "Averia Sans Libre", "meiryo", sans-serif !important; }
      #mainwrapper #main .plans .contentContainer .plan-container ul {
        list-style: disc;
        max-width: 300px;
        margin: auto;
        line-height: 1.6;
        font-size: 17px;
        margin-top: 48px; }
      #mainwrapper #main .plans .contentContainer .plan-container small, #mainwrapper #main .plans .contentContainer .plan-container span {
        text-align: center;
        display: block; }
      #mainwrapper #main .plans .contentContainer .plan-container small {
        margin: 20px 0; }
      #mainwrapper #main .plans .contentContainer .plan-container span {
        font-size: 32px;
        font-weight: 900;
        margin: 25px 0; }
        #mainwrapper #main .plans .contentContainer .plan-container span strong {
          font-size: 52px; }
      #mainwrapper #main .plans .contentContainer .plan-container .plan-buttons {
        display: -ms-flexbox;
        display: flex;
        justify-content: center; }
        #mainwrapper #main .plans .contentContainer .plan-container .plan-buttons a {
          color: white;
          background: linear-gradient(93.34deg, #D03D24 27.56%, #F4852A 112.34%);
          padding: 12px 84px;
          border-radius: 5px;
          font-size: 24px;
          text-decoration: none;
          transition: all .4s;
          margin: 10px 0 25px;
          position: relative;
          display: inline-block;
          font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
          #mainwrapper #main .plans .contentContainer .plan-container .plan-buttons a:hover {
            opacity: 0.7;
            transition: all .4s; }
      @media only screen and (max-width: 960px) {
        #mainwrapper #main .plans .contentContainer .plan-container {
          margin: 70px 10px 40px; } }
      @media only screen and (max-width: 768px) {
        #mainwrapper #main .plans .contentContainer .plan-container {
          width: 100%;
          max-width: 500px;
          margin: 40px auto; } }
      @media only screen and (max-width: 480px) {
        #mainwrapper #main .plans .contentContainer .plan-container {
          margin: 70px 0 10px; }
          #mainwrapper #main .plans .contentContainer .plan-container ul {
            margin-left: 20px; } }
  #mainwrapper #main .plans .plans-tabset {
    display: none; }
    @media only screen and (max-width: 768px) {
      #mainwrapper #main .plans .plans-tabset {
        display: block;
        width: 90%;
        margin: 40px auto 20px; } }
    #mainwrapper #main .plans .plans-tabset .content > div {
      display: none; }
    #mainwrapper #main .plans .plans-tabset .content {
      border: 1px solid #E0E0E0; }
      #mainwrapper #main .plans .plans-tabset .content .plan-container {
        width: 49.7%;
        padding: 64px;
        opacity: 0;
        transform: translateY(10px); }
        #mainwrapper #main .plans .plans-tabset .content .plan-container.in-view {
          animation: fadeIn 1.2s forwards; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container img {
          width: 150px;
          display: block;
          margin: 0 auto 36px; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container h3 {
          font-size: 32px;
          text-align: center;
          margin-bottom: 24px;
          width: 100%;
          font-family: "Averia Sans Libre", "meiryo", sans-serif !important; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container ul {
          list-style: disc;
          max-width: 300px;
          margin: auto;
          line-height: 1.6;
          font-size: 17px;
          margin-top: 48px; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container small, #mainwrapper #main .plans .plans-tabset .content .plan-container span {
          text-align: center;
          display: block; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container small {
          margin: 20px 0; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container span {
          font-size: 32px;
          font-weight: 900;
          margin: 25px 0; }
          #mainwrapper #main .plans .plans-tabset .content .plan-container span strong {
            font-size: 52px; }
        #mainwrapper #main .plans .plans-tabset .content .plan-container .plan-buttons {
          display: -ms-flexbox;
          display: flex;
          justify-content: center; }
          #mainwrapper #main .plans .plans-tabset .content .plan-container .plan-buttons a {
            color: white;
            background: linear-gradient(93.34deg, #D03D24 27.56%, #F4852A 112.34%);
            padding: 12px 84px;
            border-radius: 5px;
            font-size: 24px;
            text-decoration: none;
            transition: all .4s;
            margin: 10px 0 25px;
            position: relative;
            display: inline-block;
            font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
            #mainwrapper #main .plans .plans-tabset .content .plan-container .plan-buttons a:hover {
              opacity: 0.7;
              transition: all .4s; }
        @media only screen and (max-width: 768px) {
          #mainwrapper #main .plans .plans-tabset .content .plan-container {
            width: 100%;
            max-width: 500px;
            margin: 10px auto; } }
        @media only screen and (max-width: 560px) {
          #mainwrapper #main .plans .plans-tabset .content .plan-container {
            margin: 0;
            padding: 40px 20px; }
            #mainwrapper #main .plans .plans-tabset .content .plan-container ul {
              margin-left: 20px; } }
    #mainwrapper #main .plans .plans-tabset input {
      display: none; }
    #mainwrapper #main .plans .plans-tabset label {
      display: inline-block;
      padding: 25px;
      font-weight: 600;
      text-align: center;
      width: 49.6%;
      font-size: 1.8em;
      font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
      border-radius: 5px 5px 0 0;
      color: #828282;
      background-color: #f2f2f2; }
      @media only screen and (max-width: 560px) {
        #mainwrapper #main .plans .plans-tabset label {
          width: 49.3%;
          font-size: 1.4em; } }
    #mainwrapper #main .plans .plans-tabset label:hover {
      color: #fff;
      cursor: pointer; }
    #mainwrapper #main .plans .plans-tabset input:checked + label {
      background: #686868;
      color: white; }
    #mainwrapper #main .plans .plans-tabset #tab-1:checked ~ .content #content-1,
    #mainwrapper #main .plans .plans-tabset #tab-2:checked ~ .content #content-2 {
      display: block; }

@media only screen and (max-width: 480px) {
  #mainwrapper #main .jpn-plansSection h2 {
    font-size: 35px; }
  #mainwrapper #main .jpn-plansSection .plans-tabset label {
    font-size: 1.1em; }
  #mainwrapper #main .jpn-plansSection .plans-tabset .content .plan-container .plan-buttons a {
    padding: 12px 75px; } }

#mainwrapper #main .features {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  margin-bottom: 100px; }
  #mainwrapper #main .features .featuresContainer {
    display: block;
    margin: auto;
    max-width: 750px; }
    #mainwrapper #main .features .featuresContainer .feature {
      margin: 0 40px 60px 0; }
      #mainwrapper #main .features .featuresContainer .feature img {
        max-width: 190px;
        z-index: 3;
        position: relative; }
      #mainwrapper #main .features .featuresContainer .feature .featureInfo {
        width: calc(100% - 210px);
        float: right;
        padding: 50px 35px 0 0;
        z-index: 3;
        position: relative; }
        #mainwrapper #main .features .featuresContainer .feature .featureInfo h2 {
          font-size: 34px;
          margin-bottom: 15px;
          color: #222; }
        #mainwrapper #main .features .featuresContainer .feature .featureInfo p {
          color: #222; }
      #mainwrapper #main .features .featuresContainer .feature .colorBg {
        background: #d7d6bd;
        height: 170px;
        width: calc(100% - 55px);
        margin: -150px 15px 0 40px;
        z-index: 2;
        position: relative; }
      #mainwrapper #main .features .featuresContainer .feature .dashedBorder {
        border: 2px dashed #d03d24;
        height: 170px;
        width: calc(100% - 55px);
        margin: -155px 0 0 55px;
        z-index: 1;
        position: relative; }
      #mainwrapper #main .features .featuresContainer .feature.right {
        margin: 0 0 60px 40px; }
        #mainwrapper #main .features .featuresContainer .feature.right img {
          float: right; }
        #mainwrapper #main .features .featuresContainer .feature.right .featureInfo {
          padding: 50px 0 0 35px;
          float: none; }
        #mainwrapper #main .features .featuresContainer .feature.right .colorBg {
          margin: -135px 40px 0 15px; }
        #mainwrapper #main .features .featuresContainer .feature.right .dashedBorder {
          margin: -155px 55px 0 0; }
      @media only screen and (max-width: 767px) {
        #mainwrapper #main .features .featuresContainer .feature {
          margin: 40px 0; }
          #mainwrapper #main .features .featuresContainer .feature img {
            display: block;
            margin: auto; }
          #mainwrapper #main .features .featuresContainer .feature .featureInfo {
            width: 100%;
            padding: 0;
            padding-top: 10px;
            padding-bottom: 20px;
            text-align: center;
            float: none; }
          #mainwrapper #main .features .featuresContainer .feature .colorBg, #mainwrapper #main .features .featuresContainer .feature .dashedBorder {
            display: none; }
          #mainwrapper #main .features .featuresContainer .feature.right {
            margin: 0; }
            #mainwrapper #main .features .featuresContainer .feature.right img {
              float: none; }
            #mainwrapper #main .features .featuresContainer .feature.right .featureInfo {
              padding: 0; } }
    #mainwrapper #main .features .featuresContainer.all_new p.intro {
      margin: 1em auto 2em; }
      #mainwrapper #main .features .featuresContainer.all_new p.intro .red {
        color: #d03d24; }
    #mainwrapper #main .features .featuresContainer.all_new .feature {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #mainwrapper #main .features .featuresContainer.all_new .feature img, #mainwrapper #main .features .featuresContainer.all_new .feature .featureInfo {
        float: none !important; }
      #mainwrapper #main .features .featuresContainer.all_new .feature .featureInfo {
        padding-top: 60px; }
      #mainwrapper #main .features .featuresContainer.all_new .feature .colorBg, #mainwrapper #main .features .featuresContainer.all_new .feature .dashedBorder {
        position: absolute;
        height: 100%;
        margin: 0;
        z-index: -1; }
      #mainwrapper #main .features .featuresContainer.all_new .feature .colorBg {
        z-index: -1;
        top: 35px;
        left: 35px; }
      #mainwrapper #main .features .featuresContainer.all_new .feature .dashedBorder {
        z-index: -2;
        top: 50px;
        left: 50px; }
      #mainwrapper #main .features .featuresContainer.all_new .feature.right img {
        order: 2; }
      #mainwrapper #main .features .featuresContainer.all_new .feature.right .colorBg {
        left: 10px; }
      #mainwrapper #main .features .featuresContainer.all_new .feature.right .dashedBorder {
        left: -5px; }
      @media only screen and (max-width: 768px) {
        #mainwrapper #main .features .featuresContainer.all_new .feature {
          flex-direction: column; }
          #mainwrapper #main .features .featuresContainer.all_new .feature .featureInfo {
            padding-top: 10px;
            padding-bottom: 20px; }
            #mainwrapper #main .features .featuresContainer.all_new .feature .featureInfo p {
              text-align: left; }
          #mainwrapper #main .features .featuresContainer.all_new .feature.right img {
            order: 1; }
          #mainwrapper #main .features .featuresContainer.all_new .feature.right .featureInfo {
            order: 2; } }

#mainwrapper #main .plan-details {
  overflow-x: auto;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  margin: 20px auto 100px; }
  @media only screen and (max-width: 768px) {
    #mainwrapper #main .plan-details {
      margin-top: 80px; } }
  #mainwrapper #main .plan-details table {
    width: 100%;
    border-collapse: collapse;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
    #mainwrapper #main .plan-details table thead tr th {
      font-weight: 700;
      border: 1px solid #1580a5;
      color: #1580a5;
      padding: 15px 20px;
      width: 200px;
      text-align: center; }
      #mainwrapper #main .plan-details table thead tr th:first-child {
        border: none;
        width: auto; }
      @media only screen and (max-width: 767px) {
        #mainwrapper #main .plan-details table thead tr th {
          width: 160px; }
          #mainwrapper #main .plan-details table thead tr th:first-child {
            width: auto; } }
    #mainwrapper #main .plan-details table tbody tr:nth-child(odd) {
      background: #EBEBEB; }
    #mainwrapper #main .plan-details table tbody tr:nth-child(even) {
      background: #F6F6F6; }
    #mainwrapper #main .plan-details table tbody tr:first-child {
      border-top: 1px solid #1580a5; }
      @media only screen and (max-width: 560px) {
        #mainwrapper #main .plan-details table tbody tr:first-child {
          border-top: none; } }
    #mainwrapper #main .plan-details table tbody tr:nth-child(7) {
      border-bottom: 1px solid #1580a5; }
      #mainwrapper #main .plan-details table tbody tr:nth-child(7) a {
        color: #000; }
    #mainwrapper #main .plan-details table tbody tr td {
      padding: 15px 20px; }
      #mainwrapper #main .plan-details table tbody tr td:nth-child(2), #mainwrapper #main .plan-details table tbody tr td:nth-child(3) {
        text-align: center;
        font-weight: 700; }
      #mainwrapper #main .plan-details table tbody tr td i {
        margin-right: none;
        font-style: normal;
        color: #1580a5; }
        #mainwrapper #main .plan-details table tbody tr td i::before {
          font-family: "Font Awesome";
          margin-right: 10px;
          content: ""; }
    #mainwrapper #main .plan-details table tbody tr:nth-child(8) {
      background: none;
      padding-right: 0; }
      #mainwrapper #main .plan-details table tbody tr:nth-child(8) td {
        width: 195px; }
      #mainwrapper #main .plan-details table tbody tr:nth-child(8) b {
        font-size: 16px;
        font-weight: 700; }
      #mainwrapper #main .plan-details table tbody tr:nth-child(8) td {
        font-weight: 400; }
        #mainwrapper #main .plan-details table tbody tr:nth-child(8) td:nth-child(1) {
          font-weight: 700;
          font-size: 16px; }
      #mainwrapper #main .plan-details table tbody tr:nth-child(8) a {
        color: #fff;
        background: #1580a5;
        padding: 12px 18px;
        border: 1px solid #1580a5;
        font-size: 24px;
        font-weight: bold;
        text-decoration: none;
        transition: all .4s;
        margin: 10px 0 0;
        position: relative;
        display: inline-block;
        line-height: 100%;
        font-family: "Averia Sans Libre", "meiryo", sans-serif !important; }
        #mainwrapper #main .plan-details table tbody tr:nth-child(8) a:hover {
          background: #fff;
          color: #1580a5;
          transition: all .4s; }
        #mainwrapper #main .plan-details table tbody tr:nth-child(8) a.jpnStyle {
          font-weight: normal;
          font-size: 21px; }
    #mainwrapper #main .plan-details table tbody tr:nth-child(9) td {
      padding-bottom: 0; }
    #mainwrapper #main .plan-details table tbody tr:nth-child(10) td {
      padding: 0; }
  #mainwrapper #main .plan-details .desktopPlans {
    min-width: 460px; }
    @media only screen and (max-width: 560px) {
      #mainwrapper #main .plan-details .desktopPlans {
        display: none; } }
  #mainwrapper #main .plan-details .mobilePlanToggle {
    width: 100%;
    background: #1580a5;
    display: none; }
    #mainwrapper #main .plan-details .mobilePlanToggle li {
      width: 100%;
      display: inline-block;
      text-align: center;
      padding: 15px 20px;
      color: #fff;
      font-weight: bold;
      display: none;
      cursor: pointer;
      border: 1px solid #1580a5; }
      #mainwrapper #main .plan-details .mobilePlanToggle li::before {
        font-family: "Font Awesome";
        margin-right: 10px;
        content: ""; }
      #mainwrapper #main .plan-details .mobilePlanToggle li.active {
        display: block; }
      #mainwrapper #main .plan-details .mobilePlanToggle li::before {
        font-family: "Font Awesome 5 free"; }
      #mainwrapper #main .plan-details .mobilePlanToggle li.basic {
        background: #f9f9f9;
        color: #1580a5; }
    @media only screen and (max-width: 560px) {
      #mainwrapper #main .plan-details .mobilePlanToggle {
        display: block; } }
  #mainwrapper #main .plan-details .premiumPlan, #mainwrapper #main .plan-details .basicPlan {
    display: none; }
    @media only screen and (max-width: 560px) {
      #mainwrapper #main .plan-details .premiumPlan.active, #mainwrapper #main .plan-details .basicPlan.active {
        display: table; } }
  @media only screen and (max-width: 480px) {
    #mainwrapper #main .plan-details table {
      font-size: 14px; }
      #mainwrapper #main .plan-details table thead tr th {
        width: auto; } }

#mainwrapper #main .loginForm {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 15px;
  width: 100%;
  max-width: 480px;
  margin: 40px auto 100px; }
  #mainwrapper #main .loginForm p {
    margin-bottom: 10px; }
  #mainwrapper #main .loginForm label {
    font-size: 18px;
    color: #222;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    margin-bottom: 4px;
    display: block; }
  #mainwrapper #main .loginForm input {
    background: #fff;
    width: 100%;
    padding: 6px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    font-size: 18px;
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important; }
  #mainwrapper #main .loginForm .submit input {
    font-size: 21px;
    background: #1580a5;
    border: 1px solid #1580a5;
    padding: 8px 14px;
    color: #fff;
    margin-bottom: 10px;
    transition: all .4s;
    font-family: "Averia Sans Libre", "meiryo", sans-serif !important;
    cursor: pointer;
    width: auto;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0; }
    #mainwrapper #main .loginForm .submit input:hover {
      background: none;
      color: #1580a5;
      transition: all .4s; }
  #mainwrapper #main .loginForm a {
    font-style: italic;
    font-size: 14px; }
  #mainwrapper #main .loginForm #UserForgotPasswordForm {
    margin-top: 20px; }
  #mainwrapper #main .loginForm #flashMessage {
    background: transparent;
    box-shadow: none;
    font-style: italic;
    text-align: center;
    margin: 5px 0;
    font-weight: normal;
    font-size: 16px; }
    #mainwrapper #main .loginForm #flashMessage.fail {
      color: red; }
  #mainwrapper #main .loginForm .error-message {
    font-family: roboto, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    background: #f6a6a6;
    position: relative;
    top: -20px;
    color: #fff;
    font-style: italic;
    padding: 5px; }
    #mainwrapper #main .loginForm .error-message li {
      margin: 5px 0; }

#mainwrapper #main #loginModal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%;
  background: rgba(2, 2, 2, 0.85);
  z-index: 100;
  transition: .2s;
  overflow: hidden; }
  #mainwrapper #main #loginModal .loginForm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    background: #f9f9f9; }
    #mainwrapper #main #loginModal .loginForm p {
      margin: 1em; }
    #mainwrapper #main #loginModal .loginForm form {
      margin-top: 1em; }
  #mainwrapper #main #loginModal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer; }
  #mainwrapper #main #loginModal.show {
    left: 0;
    transition: .2s; }
  @media only screen and (max-width: 480px) {
    #mainwrapper #main #loginModal .loginForm {
      height: 100%;
      margin: 0;
      padding: 100px 20px; } }

@keyframes underlineDraw {
  0% {
    width: 0; }
  100% {
    width: 100%; } }

/*
.box.med.recipient {
	margin: 140px 0 80px 50%;
	transform: translateX(-50%);
}
*/