@charset "UTF-8";
@font-face {
  font-family: 'fontopoNEUTRAL';
  font-style: normal;
  src: url("../fonts/fontopoNEUTRAL-Regular.woff") format("woff"), url("../fonts/fontoponeutral_regular.ttf") format("truetype");
  /* Safari, Android, iOS */ }
@font-face {
  font-family: 'NotoSansJapanese';
  font-style: normal;
  src: url("../fonts/NotoSansCJKjp-Regular.woff") format("woff");
  /* Modern Browsers */ }
body {
  background: #fff;
  font-family: 'NotoSansJapanese', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; }

.column {
  -js-display: flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

header {
  overflow: hidden;
  position: relative;
  height: 860px;
  background: url("../img/MainImage_bc.jpg") no-repeat center center;
  background-size: cover; }
  header .Logo {
    position: absolute;
    top: 1.7%;
    left: 1.7%; }
  header .wrapper {
    width: 1000px;
    margin: 4% auto 0 auto; }
  header .inner {
    width: 540px;
    text-align: left; }
  header strong {
    display: block;
    padding: 5px 0;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background: #46b1c6; }
  header strong + p {
    margin: 20px 0;
    color: #115594;
    font-size: 24px;
    text-align: center; }
  header h1 + p {
    margin: 18px 0 25px 0;
    color: #222;
    font-size: 24px;
    letter-spacing: 0; }
  header a:link, header a:visited {
    display: block;
    width: 300px;
    padding: 16px 0;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: #ed7b6c; }
  header a:hover {
    background: #fd9688; }
  header .Concept {
    width: 700px;
    margin: 85px 0 10px 0; }
    header .Concept li {
      display: inline-block;
      width: 190px;
      height: 190px;
      color: #222;
      text-align: center;
      border-radius: 50%;
      background: #fff; }
      header .Concept li img {
        display: block;
        margin: 30px auto 15px auto; }
      header .Concept li p {
        line-height: 1.3em; }
    header .Concept li + li {
      margin-left: 10px; }

.Solution {
  text-align: center;
  padding: 60px 0; }
  .Solution h2 {
    margin: 0 auto 40px auto;
    color: #115594;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.4em; }
  .Solution ul {
    width: 900px;
    margin: 0 auto; }
    .Solution ul li {
      position: relative;
      padding: 60px 60px 50px 60px;
      color: #222;
      background: url("../img/Solution_ul_01.png") no-repeat top left; }
      .Solution ul li .num {
        position: absolute;
        top: 52px;
        left: 55px; }
      .Solution ul li dl {
        overflow: hidden;
        margin: 0 0 0 60px;
        padding: 0;
        text-align: left;
        line-height: 100%; }
        .Solution ul li dl dt {
          float: left;
          width: 70px;
          margin: 0;
          padding: 0 0 10px 0;
          font-size: 18px;
          text-align: center;
          background: url("../img/Solution_ul_line.png") no-repeat bottom left; }
        .Solution ul li dl.Answer dt {
          padding: 0 0 5px 0;
          font-size: 130%;
          line-height: 1.6em; }
        .Solution ul li dl dd {
          float: left;
          margin: 0 0 0 5px;
          padding: 0;
          font-size: 18px; }
          .Solution ul li dl dd:before {
            content: "： "; }
        .Solution ul li dl.Task dd {
          letter-spacing: 0; }
        .Solution ul li dl.Answer dd {
          color: #115594;
          font-size: 130%;
          line-height: 1.6em;
          padding-left: 1.3em;
          text-indent: -1.3em; }
      .Solution ul li dl + dl {
        margin-top: 10px; }
      .Solution ul li .Photo {
        float: right; }

.ARQUE {
  height: 540px;
  background: url("../img/ARQUE_bc.jpg") no-repeat left top;
  background-size: cover; }
  .ARQUE .inner {
    width: 860px;
    margin: 0 auto;
    padding-top: 90px; }
    .ARQUE .inner img {
      margin-top: -25px; }
    .ARQUE .inner h2 {
      color: #222;
      font-size: 38px;
      line-height: 1.9em; }
      .ARQUE .inner h2 span {
        padding-bottom: 5px;
        background: linear-gradient(rgba(255, 255, 255, 0) 90%, #f1e542 90%); }
    .ARQUE .inner p {
      margin: 25px 0 0 0;
      color: #222;
      font-size: 18px;
      line-height: 2em; }

.ARQUE_Lineup {
  padding: 10px 0 0 0; }
  .ARQUE_Lineup li {
    width: 25%;
    padding: 33px 0 45px 0;
    text-align: center;
    background: #f7f7f5; }
  .ARQUE_Lineup li + li {
    margin-left: 10px; }
  .ARQUE_Lineup h2 {
    font-size: 30px;
    font-family: 'fontopoNEUTRAL'; }
  .ARQUE_Lineup .ARQUE-01 {
    border-top: 6px solid #46b1c6; }
    .ARQUE_Lineup .ARQUE-01 h2 {
      color: #46b1c6; }
  .ARQUE_Lineup .ARQUE-02 {
    border-top: 6px solid #73c78c; }
    .ARQUE_Lineup .ARQUE-02 h2 {
      color: #73c78c; }
  .ARQUE_Lineup .ARQUE-03 {
    border-top: 6px solid #b693e4; }
    .ARQUE_Lineup .ARQUE-03 h2 {
      color: #b693e4; }
  .ARQUE_Lineup .ARQUE-04 {
    border-top: 6px solid #e2c346; }
    .ARQUE_Lineup .ARQUE-04 h2 {
      color: #e2c346; }
  .ARQUE_Lineup p {
    margin: 20px 0 0 0;
    color: #222;
    font-size: 16px;
    line-height: 1.88em; }

.Item_List {
  padding: 60px 0;
  text-align: center; }
  .Item_List h2 {
    margin-bottom: 40px;
    color: #222;
    font-size: 24px;
    font-weight: bold; }
  .Item_List h3 {
    margin: 10px auto 20px auto;
    color: #222;
    font-size: 22px; }

.CTA {
  height: 130px;
  background: url("../img/CTA_bc.png") no-repeat top left;
  background-size: cover; }
  .CTA .inner {
    width: 1000px;
    margin: 0 auto;
    padding-top: 35px;
    -webkit-box-align: center;
    align-items: center; }
  .CTA h2 {
    color: #fff;
    font-size: 22px; }
  .CTA a:link, .CTA a:visited {
    display: block;
    width: 340px;
    padding: 15px 0;
    color: #ec7060;
    font-size: 18px;
    text-align: center;
    background: #fff; }
  .CTA a:hover {
    background: #f5e3e1; }

.Message {
  height: 268px;
  background: url("../img/Message_bc.png") no-repeat top left;
  background-size: cover; }
  .Message .inner {
    position: relative;
    width: 666px;
    margin: 0 auto; }
    .Message .inner img {
      position: absolute;
      top: -30px;
      left: 0;
      z-index: 10; }
    .Message .inner h2 {
      position: relative;
      padding: 71px 0 0 55px;
      color: #00aacb;
      font-size: 34px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 1.3em;
      z-index: 100; }
    .Message .inner p {
      position: relative;
      padding: 10px 0 0 55px;
      color: #222;
      letter-spacing: 0;
      z-index: 100; }

.Nozuru {
  padding: 55px 0 80px 0;
  text-align: center;
  background: url("../img/Nozuru_bc.png") no-repeat top left;
  background-size: cover; }
  .Nozuru h2 {
    color: #115594;
    font-size: 36px;
    font-weight: bold; }
  .Nozuru p {
    margin: 25px 0 0 0;
    color: #222;
    font-size: 18px; }
  .Nozuru ul {
    width: 1000px;
    margin: 15px auto 0 auto; }
    .Nozuru ul:after {
      content: "";
      display: block;
      width: 310px; }
    .Nozuru ul li {
      position: relative;
      margin-top: 40px;
      padding: 20px;
      width: 310px;
      border-radius: 5px;
      border: 1px solid #e3e3df;
      background: #fff; }
      .Nozuru ul li:before {
        position: absolute;
        top: -15px;
        left: 140px;
        content: url("../img/Nozuru_ico.png"); }
      .Nozuru ul li h3 {
        display: inline-block;
        padding-bottom: 12px;
        color: #222;
        font-size: 20px;
        font-weight: bold;
        background: linear-gradient(rgba(255, 255, 255, 0) 87%, #f1e542 87%); }
      .Nozuru ul li img {
        display: block;
        margin: 25px auto 0 auto; }

.Customize {
  padding: 53px 0 62px 0;
  text-align: center;
  background: url("../img/Customize_bc.png") no-repeat top left;
  background-size: cover; }
  .Customize h2 {
    color: #fff;
    font-size: 36px;
    font-weight: bold; }
  .Customize p {
    margin: 25px 0 45px 0;
    color: #fff;
    font-size: 18px; }

.CustomizeNozuru {
  padding: 55px 0 80px 0;
  text-align: center;
  background: url("../img/Nozuru_bc.png") no-repeat top left;
  background-size: cover; }
  .CustomizeNozuru h2 {
    color: #115594;
    font-size: 36px;
    font-weight: bold; }
  .CustomizeNozuru p {
    margin: 25px 0 0 0;
    color: #222;
    font-size: 18px;
    line-height: 2em; }
  .CustomizeNozuru ul {
    width: 1000px;
    margin: 15px auto 0 auto; }
    .CustomizeNozuru ul:after {
      content: "";
      display: block;
      width: 310px; }
    .CustomizeNozuru ul li {
      position: relative;
      margin-top: 40px;
      padding: 20px;
      width: 310px;
      border-radius: 5px;
      border: 1px solid #e3e3df;
      background: #fff; }
      .CustomizeNozuru ul li:before {
        position: absolute;
        top: -15px;
        left: 140px;
        content: url("../img/Nozuru_ico.png"); }
      .CustomizeNozuru ul li h3 {
        display: inline-block;
        padding-bottom: 12px;
        color: #222;
        font-size: 20px;
        font-weight: bold;
        background: linear-gradient(rgba(255, 255, 255, 0) 87%, #f1e542 87%); }
      .CustomizeNozuru ul li img {
        display: block;
        margin: 25px auto 0 auto; }
      .CustomizeNozuru ul li p {
        font-size: 14px;
        letter-spacing: 0;
        text-align: left;
        line-height: 1.9em; }
        .CustomizeNozuru ul li p strong {
          color: #ec7060;
          font-weight: normal; }

.Works {
  padding: 70px 0;
  text-align: center; }
  .Works .inner {
    width: 900px;
    margin: 0 auto;
    background: url("../img/Work_bc.png") no-repeat top left; }
    .Works .inner h2 {
      display: inline-block;
      padding-bottom: 20px;
      margin: 43px auto 50px auto;
      color: #222;
      font-size: 24px;
      font-weight: bold;
      background: linear-gradient(rgba(255, 255, 255, 0) 91%, #f1e542 91%); }
    .Works .inner ul {
      width: 640px;
      margin: 0 auto; }
      .Works .inner ul li {
        width: 300px;
        padding: 40px 0 30px 0;
        background: #f7f7f5; }
      .Works .inner ul p {
        margin: 35px auto 0 auto;
        color: #333;
        font-size: 18px;
        line-height: 1.5em; }
    .Works .inner h3 {
      margin: 35px auto 15px auto;
      color: #222;
      font-size: 20px;
      font-weight: bold;
      text-align: center; }
    .Works .inner h3 + p {
      padding: 0 50px 45px 50px;
      color: #333;
      font-size: 16px;
      text-align: left;
      line-height: 2.2em; }

.App {
  padding: 60px 0 25px 0;
  text-align: center;
  background: url("../img/App_bc.png") no-repeat top left;
  background-size: cover; }
  .App .inner {
    width: 975px;
    margin: 0 auto; }
    .App .inner h2 {
      display: inline-block;
      padding-bottom: 20px;
      color: #222;
      font-size: 24px;
      font-weight: bold;
      background: linear-gradient(rgba(255, 255, 255, 0) 91%, #f1e542 91%); }
    .App .inner ul {
      margin: 60px auto 0 auto; }
      .App .inner ul:before {
        content: "";
        display: block;
        width: 200px;
        order: 1; }
      .App .inner ul:after {
        content: "";
        display: block;
        width: 200px; }
      .App .inner ul li {
        width: 200px;
        margin-bottom: 50px; }
      .App .inner ul p {
        margin: 20px 0 0 0;
        color: #222;
        font-size: 18px;
        letter-spacing: 0; }

.Movie {
  padding: 70px 0 65px 0;
  text-align: center;
  background: url("../img/Movie_bc.png") no-repeat top left;
  background-size: cover; }

#Contact {
  padding: 60px 0 65px 0;
  text-align: center;
  background: url("../img/Contact_bc.png") no-repeat top left;
  background-size: cover; }
  #Contact h2 {
    color: #115594;
    font-size: 36px;
    font-weight: bold; }
  #Contact p {
    margin: 20px 0 38px 0;
    color: #222;
    font-size: 18px;
    line-height: 2em; }
  #Contact form {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
    padding: 50px 70px;
    background-color: rgba(255, 255, 255, 0.9); }
    #Contact form .Err {
      color: #222;
      padding: 0 0 30px 0; }
      #Contact form .Err em {
        display: block;
        margin: 0 0 1em 0; }
    #Contact form dl {
      overflow: hidden;
      margin: 0 auto;
      width: 860px;
      color: #222; }
      #Contact form dl dt {
        clear: both;
        float: left;
        margin: 0;
        padding: 35px 0 20px 20px;
        width: 255px;
        font-size: 18px;
        text-align: left;
        font-weight: normal;
        border-top: 1px solid #e3e3df; }
        #Contact form dl dt:first-child {
          border: none; }
        #Contact form dl dt i {
          display: inline-block;
          float: right;
          padding: 2px 10px;
          color: #fff;
          font-size: 14px;
          font-weight: normal;
          font-style: normal;
          background: #ec7060; }
        #Contact form dl dt span {
          display: inline-block;
          float: right;
          padding: 0 5px;
          color: #666;
          font-size: 16px;
          font-weight: normal;
          font-style: normal;
          background: #eee; }
      #Contact form dl dd {
        float: right;
        margin: 0;
        padding: 24px 0 25px 50px;
        width: 605px;
        text-align: left;
        border-top: 1px solid #e3e3df; }
        #Contact form dl dd:first-of-type {
          border: none; }
    #Contact form input, #Contact form textarea {
      margin: 0;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
    #Contact form input[type="text"], #Contact form textarea {
      padding: 12px;
      width: 100%;
      outline: none;
      font-size: 16px;
      font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
      border: 1px solid #e3e3df;
      background: #fff;
      -webkit-transition: all .3s;
      transition: all .3s; }
    #Contact form input[type="text"] {
      width: 300px; }
    #Contact form input[type="submit"] {
      display: inline-block;
      cursor: pointer;
      width: 380px;
      padding: 26px 0;
      margin: 20px auto 0 auto;
      color: #fff;
      font-size: 18px;
      line-height: 100%;
      text-align: center;
      letter-spacing: 1px;
      background: #00aacb;
      border: none; }
      #Contact form input[type="submit"]:hover {
        background: #14b9d9; }
  #Contact form + p {
    color: #666;
    font-size: 16px;
    text-align: left;
    width: 1000px;
    margin: 40px auto; }

.Confirm {
  padding: 60px 0 230px 0;
  text-align: center;
  background: url("../img/Confirm_bc.png") no-repeat top left;
  background-size: cover; }
  .Confirm h2 {
    margin: 60px 0 20px 0;
    color: #115594;
    font-size: 36px;
    font-weight: bold; }
  .Confirm p {
    color: #222;
    font-size: 18px;
    line-height: 2em; }
  .Confirm .inner {
    overflow: hidden;
    width: 1000px;
    margin: 38px auto 50px auto;
    padding: 50px 70px 70px 70px;
    background-color: rgba(255, 255, 255, 0.9); }
    .Confirm .inner dl {
      overflow: hidden;
      margin: 0 auto;
      width: 860px;
      color: #222; }
      .Confirm .inner dl dt {
        clear: both;
        float: left;
        margin: 0;
        padding: 35px 0 35px 20px;
        width: 255px;
        font-size: 18px;
        text-align: left;
        font-weight: normal;
        border-top: 1px solid #e3e3df; }
        .Confirm .inner dl dt:first-child {
          border: none; }
        .Confirm .inner dl dt i {
          display: inline-block;
          float: right;
          padding: 2px 10px;
          color: #fff;
          font-size: 14px;
          font-weight: normal;
          font-style: normal;
          background: #ec7060; }
        .Confirm .inner dl dt span {
          display: inline-block;
          float: right;
          padding: 0 5px;
          color: #666;
          font-size: 16px;
          font-weight: normal;
          font-style: normal;
          background: #eee; }
      .Confirm .inner dl dd {
        float: right;
        margin: 0;
        padding: 35px 0 35px 90px;
        width: 605px;
        text-align: left;
        font-size: 18px;
        border-top: 1px solid #e3e3df; }
        .Confirm .inner dl dd:first-of-type {
          border: none; }
  .Confirm input[type="submit"] {
    display: inline-block;
    cursor: pointer;
    width: 385px;
    padding: 26px 0;
    margin: 130px auto 0 auto;
    color: #fff;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    letter-spacing: 1px;
    background: #00aacb;
    border: none; }
    .Confirm input[type="submit"]:hover {
      background: #14b9d9; }
  .Confirm h3 {
    color: #666;
    font-size: 20px;
    text-align: center; }
  .Confirm h3 + p {
    width: 1000px;
    margin: 35px auto 0 auto;
    color: #666;
    font-size: 15px;
    letter-spacing: 0;
    text-align: left; }

.Finish {
  height: 100%;
  padding: 60px 0 330px 0;
  text-align: center;
  background: url("../img/Finish_bc.png") no-repeat top left;
  background-size: cover; }
  .Finish h2 {
    margin: 60px 0 20px 0;
    color: #115594;
    font-size: 36px;
    font-weight: bold; }
  .Finish p {
    color: #222;
    font-size: 18px;
    line-height: 2em; }
  .Finish h3 {
    margin: 138px 0 20px 0;
    color: #666;
    font-size: 20px; }
  .Finish h3 + p {
    color: #666;
    font-size: 16px; }
  .Finish a:link, .Finish a:visited {
    color: #00aacb; }
  .Finish a:hover {
    color: #10b7d7; }

footer {
  color: #fff;
  padding: 20px; }