@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
/*base is →　! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

article, aside, footer, header, nav, section, figcaption, figure, main {
  display: block; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

img {
  border-style: none;
  vertical-align: top; }

table {
  border-collapse: collapse; }

button, input, select, textarea {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; }

textarea {
  overflow: auto;
  resize: vertical; }

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0; }

a, area, button, input, label, select, summary, textarea, [tabindex] {
  touch-action: manipulation; }

/* --------------- variables --------------------- */
/* Break Point */
/* Color */
/*サイトカラー*/
/*テキストに使うフォントカラー*/
/*テキスト内で使うリンクカラー*/
/* font */
/**
* Noto Sans CJK JP: https://www.google.com/get/noto/#sans-jpan
* Noto Sans JP: https://fonts.google.com/earlyaccess#Noto+Sans+JP

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 100;
	src: local("Noto Sans CJK JP Thin"),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 300;
	src: local("Noto Sans CJK JP Light"),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype');
}
*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP Regular"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format("opentype"); }

/*
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	src: local("Noto Sans CJK JP Medium"),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype');
}
*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans CJK JP Bold"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format("opentype"); }

/*
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	src: local("Noto Sans CJK JP Black"),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format('opentype');
}
*/
/* 日本語（notoSans）*/
/* 日本語（notoSerif）*/
/*日本語用（メイリオ）*/
/*英語用*/
@media screen and (max-width: 800px) {
  body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal; }
  img {
    max-width: 100%; }
  p {
    color: #000;
    font-size: 14px; }
  .inner {
    width: 94%;
    margin: 0 auto;
    padding: 25px 0; }
  header {
    background-image: url(../images/home/sp/sp_header_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 15px;
    padding-bottom: 10px; }
    header .textBox p {
      color: #fff;
      text-align: center;
      font-weight: bold; }
      header .textBox p .txtColor {
        color: #00ffe7; }
    header .logoBox {
      text-align: center;
      max-width: 175px;
      margin: 0 auto;
      padding-top: 10px; }
    header .cardBox {
      text-align: right;
      max-width: 120px;
      margin: 0 0 0 auto; }
    header ul {
      list-style: none;
      display: flex;
      justify-content: center;
      border: 1px solid #fff;
      background-position: center;
      background-color: #860779;
      padding: 10px 3px;
      margin-top: 10px;
      -webkit-transform: translateY(50px);
              transform: translateY(50px); }
      header ul li {
        color: #fff;
        position: relative;
        font-size: 11px;
        padding-left: 25px; }
        header ul li:nth-of-type(1) {
          padding-right: 10px;
          padding-left: 0px; }
        header ul li.win:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/win_icon.png);
          background-size: 100%;
          width: 18px;
          height: 14px;
          top: 1px;
          left: 5px; }
        header ul li.mac:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/mac_icon.png);
          background-size: 100%;
          width: 11px;
          height: 13px;
          top: 1px;
          left: 10px; }
        header ul li.and:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/and_icon.png);
          background-size: 100%;
          width: 12px;
          height: 14px;
          top: 1px;
          left: 10px; }
  ul.sp_nav {
    list-style: none;
    display: flex;
    justify-content: center;
    border: 1px solid #fff;
    background-position: center;
    background-color: #860779;
    padding: 10px 3px; }
    ul.sp_nav li {
      color: #fff;
      position: relative;
      font-size: 11px;
      padding-left: 25px; }
      ul.sp_nav li:nth-of-type(1) {
        padding-right: 10px;
        padding-left: 0px; }
      ul.sp_nav li.win:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/win_icon.png);
        background-size: 100%;
        width: 18px;
        height: 14px;
        top: 1px;
        left: 5px; }
      ul.sp_nav li.mac:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/mac_icon.png);
        background-size: 100%;
        width: 11px;
        height: 13px;
        top: 1px;
        left: 10px; }
      ul.sp_nav li.and:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/and_icon.png);
        background-size: 100%;
        width: 12px;
        height: 14px;
        top: 1px;
        left: 10px; }
  #footer {
    background-image: url(../images/home/sp/sp_header_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 15px;
    padding-bottom: 10px; }
    #footer .textBox p {
      color: #fff;
      text-align: center;
      font-weight: bold; }
      #footer .textBox p .txtColor {
        color: #00ffe7; }
    #footer .logoBox {
      text-align: center;
      max-width: 175px;
      margin: 0 auto;
      padding-top: 10px; }
    #footer .cardBox {
      text-align: right;
      max-width: 120px;
      margin: 0 0 0 auto; }
    #footer ul {
      list-style: none;
      display: flex;
      justify-content: center;
      border: 1px solid #fff;
      background-position: center;
      background-color: #860779;
      padding: 10px 3px; }
      #footer ul li {
        color: #fff;
        position: relative;
        font-size: 11px;
        padding-left: 25px; }
        #footer ul li:nth-of-type(1) {
          padding-right: 10px;
          padding-left: 0px; }
        #footer ul li.win:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/win_icon.png);
          background-size: 100%;
          width: 18px;
          height: 14px;
          top: 1px;
          left: 5px; }
        #footer ul li.mac:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/mac_icon.png);
          background-size: 100%;
          width: 11px;
          height: 13px;
          top: 1px;
          left: 10px; }
        #footer ul li.and:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/and_icon.png);
          background-size: 100%;
          width: 12px;
          height: 14px;
          top: 1px;
          left: 10px; }
    #footer .copy {
      margin-top: 15px; }
      #footer .copy p {
        text-align: center;
        color: #fff;
        font-size: 12px; } }

@media screen and (min-width: 800px) {
  body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal; }
  p {
    color: #000; }
  header .textBox p {
    color: #fff;
    text-align: center;
    font-weight: bold; }
    header .textBox p .txtColor {
      color: #00ffe7; }
  header .logoBox {
    text-align: center; }
  header .cardBox {
    text-align: right; }
  header ul {
    list-style: none;
    display: flex;
    justify-content: center;
    border: 1px solid #fff;
    background-position: center; }
    header ul li {
      color: #fff;
      position: relative; }
      header ul li.win:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/win_icon.png);
        background-size: 100%; }
      header ul li.mac:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/mac_icon.png);
        background-size: 100%; }
      header ul li.and:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/and_icon.png);
        background-size: 100%; }
  ul.sp_nav {
    list-style: none;
    display: flex;
    justify-content: center;
    border: 1px solid #fff;
    background-position: center;
    background-color: #860779;
    padding: 10px 3px; }
    ul.sp_nav li {
      color: #fff;
      position: relative;
      font-size: 11px;
      padding-left: 25px; }
      ul.sp_nav li:nth-of-type(1) {
        padding-right: 10px;
        padding-left: 0px; }
      ul.sp_nav li.win:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/win_icon.png);
        background-size: 100%;
        width: 18px;
        height: 14px;
        top: 1px;
        left: 5px; }
      ul.sp_nav li.mac:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/mac_icon.png);
        background-size: 100%;
        width: 11px;
        height: 13px;
        top: 1px;
        left: 10px; }
      ul.sp_nav li.and:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/and_icon.png);
        background-size: 100%;
        width: 12px;
        height: 14px;
        top: 1px;
        left: 10px; }
  #footer .textBox p {
    color: #fff;
    text-align: center;
    font-weight: bold; }
    #footer .textBox p .txtColor {
      color: #00ffe7; }
  #footer .logoBox {
    text-align: center; }
  #footer .cardBox {
    text-align: right; }
  #footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    border: 1px solid #fff;
    background-position: center; }
    #footer ul li {
      color: #fff;
      position: relative; }
      #footer ul li.win:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/win_icon.png);
        background-size: 100%; }
      #footer ul li.mac:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/mac_icon.png);
        background-size: 100%; }
      #footer ul li.and:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/and_icon.png);
        background-size: 100%; }
  #footer .copy p {
    text-align: center;
    color: #fff; } }

@media print, screen and (min-width: 801px) {
  body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal; }
  p {
    color: #000;
    font-size: 16px; }
  .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 0; }
  header {
    background-image: url(../images/home/header_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 55px;
    padding-bottom: 15px; }
    header .textBox p {
      color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 32px; }
      header .textBox p span {
        font-size: 42px; }
      header .textBox p .txtColor {
        color: #00ffe7; }
    header .logoBox {
      text-align: center;
      padding-top: 50px; }
    header .cardBox {
      text-align: right; }
    header ul {
      list-style: none;
      display: flex;
      justify-content: center;
      border: 1px solid #fff;
      background-position: center;
      padding: 15px 0;
      max-width: 1000px;
      margin: 0 auto;
      margin-top: 15px;
      background-image: url(../images/home/device_bg.png); }
      header ul li {
        color: #fff;
        position: relative;
        margin: 0 25px;
        padding-left: 40px;
        font-size: 22px; }
        header ul li:nth-of-type(1) {
          padding-left: 0px; }
        header ul li.win:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/win_icon.png);
          background-size: 100%;
          width: 35px;
          height: 28px;
          top: 4px;
          left: 0; }
        header ul li.mac:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/mac_icon.png);
          background-size: 100%;
          width: 22px;
          height: 26px;
          top: 3px;
          left: 9px; }
        header ul li.and:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/and_icon.png);
          background-size: 100%;
          width: 25px;
          height: 29px;
          top: 2px;
          left: 5px; }
  ul.sp_nav {
    list-style: none;
    display: flex;
    justify-content: center;
    border: 1px solid #fff;
    background-position: center;
    background-color: #860779;
    padding: 10px 3px; }
    ul.sp_nav li {
      color: #fff;
      position: relative;
      font-size: 11px;
      padding-left: 25px; }
      ul.sp_nav li:nth-of-type(1) {
        padding-right: 10px;
        padding-left: 0px; }
      ul.sp_nav li.win:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/win_icon.png);
        background-size: 100%;
        width: 18px;
        height: 14px;
        top: 1px;
        left: 5px; }
      ul.sp_nav li.mac:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/mac_icon.png);
        background-size: 100%;
        width: 11px;
        height: 13px;
        top: 1px;
        left: 10px; }
      ul.sp_nav li.and:before {
        content: "";
        position: absolute;
        background-image: url(../images/home/and_icon.png);
        background-size: 100%;
        width: 12px;
        height: 14px;
        top: 1px;
        left: 10px; }
  #footer {
    background-image: url(../images/home/header_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 55px;
    padding-bottom: 15px; }
    #footer .textBox p {
      color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 32px; }
      #footer .textBox p span {
        font-size: 42px; }
      #footer .textBox p .txtColor {
        color: #00ffe7; }
    #footer .logoBox {
      text-align: center;
      padding-top: 50px; }
    #footer .cardBox {
      text-align: right; }
    #footer ul {
      list-style: none;
      display: flex;
      justify-content: center;
      border: 1px solid #fff;
      background-position: center;
      padding: 15px 0;
      max-width: 1000px;
      margin: 0 auto;
      margin-top: 15px;
      background-image: url(../images/home/device_bg.png); }
      #footer ul li {
        color: #fff;
        position: relative;
        margin: 0 25px;
        padding-left: 40px;
        font-size: 22px; }
        #footer ul li:nth-of-type(1) {
          padding-left: 0px; }
        #footer ul li.win:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/win_icon.png);
          background-size: 100%;
          width: 35px;
          height: 28px;
          top: 4px;
          left: 0; }
        #footer ul li.mac:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/mac_icon.png);
          background-size: 100%;
          width: 22px;
          height: 26px;
          top: 3px;
          left: 9px; }
        #footer ul li.and:before {
          content: "";
          position: absolute;
          background-image: url(../images/home/and_icon.png);
          background-size: 100%;
          width: 25px;
          height: 29px;
          top: 2px;
          left: 5px; }
    #footer .copy {
      margin-top: 30px; }
      #footer .copy p {
        text-align: center;
        color: #fff;
        font-size: 14px; } }

/*# sourceMappingURL=map/common.css.map */