@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Rajdhani:300,500,700);
.buttonLink, .buttonGhost, .buttonBack {
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
  text-decoration: none !important;
}
.buttonLink:hover, .buttonGhost:hover, .buttonBack:hover {
  opacity: 0.8;
}

/* ===============================================
   Reset
=============================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, b, cite, code, del, dfn,
em, img, ins, kbd, q, samp, strong, sub, sup, tt, var,
ul, ol, li, dl, dt, dd, form, fieldset, legend, label, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, small, section,
*:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

ul {
  list-style: none;
}

ol {
  list-style-type: decimal;
}

img {
  border: 0;
  vertical-align: bottom;
}

sup {
  vertical-align: top;
}

sub {
  vertical-align: bottom;
}

em {
  font-style: normal;
  font-weight: bold;
}

strong {
  font-weight: bold;
}

small {
  font-size: 100%;
}

iframe {
  vertical-align: bottom;
}

/* ===============================================
   Foundation
=============================================== */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 6.25%;
}

body {
  color: #000;
  background: #fff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 16em;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14em;
  }
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
}

a {
  color: #2f3ad2;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

strong {
  font-weight: bold;
  color: red;
}

em {
  font-weight: bold;
}

sup {
  font-size: 80%;
}

sub {
  font-size: 80%;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
  border: 1px solid #cbcbcb;
  padding: 0.6em 1em;
  font-size: 1em;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea {
  appearance: none;
}

input[type="submit"] {
  cursor: pointer;
}

input,
button,
textarea,
select {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

button {
  margin: 0;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table th,
table td {
  font-weight: normal;
}
table tbody td {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

@font-face {
  font-family: 'icomoon';
  src: url("/assets/fonts/icomoon.eot?eo153r");
  src: url("/assets/fonts/icomoon.eot?eo153r#iefix") format("embedded-opentype"), url("/assets/fonts/icomoon.ttf?eo153r") format("truetype"), url("/assets/fonts/icomoon.woff?eo153r") format("woff"), url("/assets/fonts/icomoon.svg?eo153r#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="iconFont--"], [class*=" iconFont--"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconFont--eye:before {
  content: "\e000";
}

.iconFont--paper-clip:before {
  content: "\e001";
}

.iconFont--mail:before {
  content: "\e002";
}

.iconFont--toggle:before {
  content: "\e003";
}

.iconFont--layout:before {
  content: "\e004";
}

.iconFont--link:before {
  content: "\e005";
}

.iconFont--bell:before {
  content: "\e006";
}

.iconFont--lock:before {
  content: "\e007";
}

.iconFont--unlock:before {
  content: "\e008";
}

.iconFont--ribbon:before {
  content: "\e009";
}

.iconFont--image:before {
  content: "\e010";
}

.iconFont--signal:before {
  content: "\e011";
}

.iconFont--target:before {
  content: "\e012";
}

.iconFont--clipboard:before {
  content: "\e013";
}

.iconFont--clock:before {
  content: "\e014";
}

.iconFont--watch:before {
  content: "\e015";
}

.iconFont--air-play:before {
  content: "\e016";
}

.iconFont--camera:before {
  content: "\e017";
}

.iconFont--video:before {
  content: "\e018";
}

.iconFont--disc:before {
  content: "\e019";
}

.iconFont--printer:before {
  content: "\e020";
}

.iconFont--monitor:before {
  content: "\e021";
}

.iconFont--server:before {
  content: "\e022";
}

.iconFont--cog:before {
  content: "\e023";
}

.iconFont--heart:before {
  content: "\e024";
}

.iconFont--paragraph:before {
  content: "\e025";
}

.iconFont--align-justify:before {
  content: "\e026";
}

.iconFont--align-left:before {
  content: "\e027";
}

.iconFont--align-center:before {
  content: "\e028";
}

.iconFont--align-right:before {
  content: "\e029";
}

.iconFont--book:before {
  content: "\e030";
}

.iconFont--layers:before {
  content: "\e031";
}

.iconFont--stack:before {
  content: "\e032";
}

.iconFont--stack-2:before {
  content: "\e033";
}

.iconFont--paper:before {
  content: "\e034";
}

.iconFont--paper-stack:before {
  content: "\e035";
}

.iconFont--search:before {
  content: "\e036";
}

.iconFont--zoom-in:before {
  content: "\e037";
}

.iconFont--zoom-out:before {
  content: "\e038";
}

.iconFont--reply:before {
  content: "\e039";
}

.iconFont--circle-plus:before {
  content: "\e040";
}

.iconFont--circle-minus:before {
  content: "\e041";
}

.iconFont--circle-check:before {
  content: "\e042";
}

.iconFont--circle-cross:before {
  content: "\e043";
}

.iconFont--square-plus:before {
  content: "\e044";
}

.iconFont--square-minus:before {
  content: "\e045";
}

.iconFont--square-check:before {
  content: "\e046";
}

.iconFont--square-cross:before {
  content: "\e047";
}

.iconFont--record:before {
  content: "\e049";
}

.iconFont--skip-back:before {
  content: "\e050";
}

.iconFont--rewind:before {
  content: "\e051";
}

.iconFont--play:before {
  content: "\e052";
}

.iconFont--pause:before {
  content: "\e053";
}

.iconFont--stop:before {
  content: "\e054";
}

.iconFont--fast-forward:before {
  content: "\e055";
}

.iconFont--skip-forward:before {
  content: "\e056";
}

.iconFont--shuffle:before {
  content: "\e057";
}

.iconFont--repeat:before {
  content: "\e058";
}

.iconFont--folder:before {
  content: "\e059";
}

.iconFont--cloud-upload:before {
  content: "\e066";
}

.iconFont--cloud-download:before {
  content: "\e067";
}

.iconFont--upload:before {
  content: "\e068";
}

.iconFont--download:before {
  content: "\e069";
}

.iconFont--head:before {
  content: "\e074";
}

.iconFont--speech-bubble:before {
  content: "\e076";
}

.iconFont--globe:before {
  content: "\e078";
}

.iconFont--box:before {
  content: "\e079";
}

.iconFont--reload:before {
  content: "\e080";
}

.iconFont--share:before {
  content: "\e081";
}

.iconFont--tag:before {
  content: "\e085";
}

.iconFont--power:before {
  content: "\e086";
}

.iconFont--bar-graph:before {
  content: "\e090";
}

.iconFont--bar-graph-2:before {
  content: "\e091";
}

.iconFont--pie-graph:before {
  content: "\e092";
}

.iconFont--star:before {
  content: "\e093";
}

.iconFont--arrow-left:before {
  content: "\e094";
}

.iconFont--arrow-right:before {
  content: "\e095";
}

.iconFont--arrow-up:before {
  content: "\e096";
}

.iconFont--arrow-down:before {
  content: "\e097";
}

.iconFont--volume:before {
  content: "\e098";
}

.iconFont--mute:before {
  content: "\e099";
}

.iconFont--content-right:before {
  content: "\e100";
}

.iconFont--content-left:before {
  content: "\e101";
}

.iconFont--grid:before {
  content: "\e102";
}

.iconFont--grid-2:before {
  content: "\e103";
}

.iconFont--columns:before {
  content: "\e104";
}

.iconFont--loader:before {
  content: "\e105";
}

.iconFont--bag:before {
  content: "\e106";
}

.iconFont--ban:before {
  content: "\e107";
}

.iconFont--flag:before {
  content: "\e108";
}

.iconFont--trash:before {
  content: "\e109";
}

.iconFont--plus:before {
  content: "\e114";
}

.iconFont--minus:before {
  content: "\e115";
}

.iconFont--check:before {
  content: "\e116";
}

.iconFont--cross:before {
  content: "\e117";
}

.iconFont--move:before {
  content: "\e118";
}

.iconFont--delete:before {
  content: "\e119";
}

.iconFont--menu:before {
  content: "\e120";
}

.iconFont--archive:before {
  content: "\e121";
}

.iconFont--inbox:before {
  content: "\e122";
}

.iconFont--outbox:before {
  content: "\e123";
}

.iconFont--file:before {
  content: "\e124";
}

.iconFont--open:before {
  content: "\e128";
}

.iconFont--ellipsis:before {
  content: "\e129";
}

/* ===============================================
   Style
=============================================== */
body {
  overflow-x: hidden;
}

* + p:not([class]) {
  margin-top: 2em;
}

/* Template
----------------------------------------------- */
.pageMain {
  padding: 0 20px;
  max-width: 998px;
  margin: 0 auto 8em;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .pageMain {
    padding: 0 10px;
    margin-bottom: 5em;
  }
}

.pageInquiry {
  background: -webkit-linear-gradient(0deg, #2f3ad2 0%, #00bfbd 100%);
  color: #fff;
  padding: 6em 20px;
  margin-top: 8em;
}
.pageInquiry > *:last-child {
  margin-bottom: 0;
}
.pageInquiry .headLv2:before, .pageInquiry .headLv2:after {
  display: none;
}
.pageInquiry .headLv2 > span {
  background: transparent;
}
@media screen and (max-width: 767px) {
  .pageInquiry {
    margin-top: 6em;
  }
}

/* Structure
----------------------------------------------- */
.templateTop .pageHeader {
  position: static;
  margin-bottom: 6em;
}
@media screen and (max-width: 767px) {
  .templateTop .pageHeader {
    margin-bottom: 4em;
  }
}

.pageHeader {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 1;
  background-image: -webkit-linear-gradient(0deg, rgba(47, 58, 210, 0.8) 0%, rgba(0, 191, 189, 0.8) 100%);
}
.pageHeader__inner {
  max-width: 998px;
  margin: 0 auto;
}
.pageHeader__tagline {
  text-align: center;
  color: #fff;
  font-size: 12rem;
  font-weight: normal;
  padding: 0.8em;
}
.pageHeader__tagline__link {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .pageHeader__tagline__description {
    display: none;
  }
}

.pageFooter {
  line-height: 1;
  background: #222;
}
.pageFooter__inner {
  max-width: 998px;
  margin: 0 auto;
}
.pageFooter__copy {
  text-align: center;
}
.pageFooter__copy > small {
  display: inline-block;
  color: #999;
  font-size: 12rem;
  font-weight: normal;
  padding: 0.8em;
}
.pageFooter__copy > small > a {
  color: #999;
}

/* Hero
----------------------------------------------- */
.heroInstagram {
  background: #111;
  position: relative;
  min-height: 49vw;
}
.heroInstagram__logo {
  text-align: center;
  width: 30vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
.heroInstagram__item {
  display: inline-block;
  width: 50%;
}
.heroInstagram__item__link {
  display: block;
  position: relative;
}
.heroInstagram__item__image {
  width: 100%;
  opacity: 0.6;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
}
.heroInstagram__item__label {
  font-size: 3.33333vw;
  color: #fff;
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  left: 0;
  bottom: 5vw;
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
}
.heroInstagram__source {
  position: absolute;
  left: 50%;
  bottom: 2vw;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}
.heroInstagram__source__link {
  color: #fff;
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  display: inline-block;
  background: url(/assets/images/common/icon_instagram_1.png) no-repeat left center;
  background-size: 16px 16px;
  padding-left: 24px;
}
@media screen and (max-width: 767px) {
  .heroInstagram__logo {
    width: 70vw;
  }
  .heroInstagram__item {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    display: block;
  }
  .heroInstagram__item__label {
    display: none;
  }
  .heroInstagram__item:first-child {
    display: none;
  }
  .heroInstagram__source {
    line-height: 16px;
    bottom: 20px;
  }
}

.heroHead {
  background: #111;
  color: #fff;
  margin-bottom: 4em;
  padding: 0 20px;
  position: relative;
}
.heroHead:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url("/assets/images/common/head_bg_5.jpg") no-repeat center center;
  background-size: cover;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}
.heroHead .heroHead__inner {
  margin: 0 auto;
  max-width: 998px;
  padding: 6em 0 5em;
  position: relative;
  z-index: 1;
}
.heroHead .heroHead__head {
  font-size: 30rem;
  font-weight: normal;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.heroHead .heroHead__text {
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  .heroHead {
    padding: 0 10px;
    height: 100vh;
  }
  .heroHead:before {
    background-image: url("/assets/images/common/head_bg_5_sp.jpg");
  }
  .heroHead .heroHead__inner {
    text-align: center;
    padding: 0 2em;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .heroHead .heroHead__head {
    font-size: 24rem;
  }
  .heroHead .heroHead__text {
    margin-top: 10px;
    line-height: 1.8;
  }
}

.heroHead.bg--coding:before,
.headBg.bg--coding:before {
  background-image: url("/assets/images/common/head_bg_2.jpg");
}
.heroHead.bg--design:before,
.headBg.bg--design:before {
  background-image: url("/assets/images/common/head_bg_3.jpg");
}
.heroHead.bg--operation:before,
.headBg.bg--operation:before {
  background-image: url("/assets/images/common/head_bg_6.jpg");
}
.heroHead.bg--tools:before,
.headBg.bg--tools:before {
  background-image: url("/assets/images/common/head_bg_9.jpg");
}
.heroHead.bg--works:before,
.headBg.bg--works:before {
  background-image: url("/assets/images/common/head_bg_10.jpg");
}
@media screen and (max-width: 767px) {
  .heroHead.bg--works:before,
  .headBg.bg--works:before {
    background-image: url("/assets/images/common/head_bg_10_sp.jpg");
  }
}

/* Heading
----------------------------------------------- */
.headLv2 {
  text-align: center;
  position: relative;
  margin: 0 0 2em;
}
.headLv2:not(:first-child) {
  margin-top: 6em;
}
.headLv2:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #111;
  position: absolute;
  top: 50%;
  left: 0;
}
.headLv2 > span {
  display: inline-block;
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-size: 40rem;
  line-height: 1;
  background: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.headLv2.lang--ja > span {
  font-weight: 200;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 28rem;
}
@media screen and (max-width: 767px) {
  .headLv2 > span {
    font-size: 32rem;
    padding: 0 10px;
  }
  .headLv2.lang--ja > span {
    font-size: 24rem;
  }
}

.headLv3 {
  font-weight: normal;
  margin-top: 3em;
  margin-bottom: 1em;
  padding: 0.6em 1em calc(0.4em + 2px) 1em;
  color: #fff;
  border-radius: 2px;
  background: #444;
  position: relative;
  overflow: hidden;
}
.headLv3:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(0deg, #2f3ad2 0%, #00bfbd 100%);
}
@media screen and (max-width: 767px) {
  .headLv3 {
    padding: 0.7em 1em calc(0.5em + 2px) 1em;
  }
}

.headTypo {
  text-align: center;
  margin-bottom: 1em;
  font-size: 70rem;
  padding: 1em 0 0.3em;
  font-weight: 200;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  line-height: 1;
}
.headTypo rt {
  font-size: 16rem;
}
@media screen and (max-width: 767px) {
  .headTypo {
    font-size: 36rem;
    padding-top: 1.5em;
  }
  .headTypo rt {
    font-size: 10rem;
  }
}

.headBg {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 2em 1em;
  overflow: hidden;
  font-weight: normal;
  font-size: 14rem;
  background: #111;
}
.headBg:not(:first-child) {
  margin-top: 6em;
}
.headBg:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  background: no-repeat center center;
  background-size: cover;
}
.headBg .headBg__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: rgba(17, 17, 17, 0.8);
  color: #fff;
  min-width: 200px;
  padding: 0.7em;
  font-size: 14rem;
  border-radius: 4px;
  line-height: 1.2;
  text-align: center;
}
.headBg .headBg__en {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-size: 32rem;
}
@media screen and (max-width: 767px) {
  .headBg:not(:first-child) {
    margin-top: 4em;
  }
  .headBg .headBg__label {
    font-size: 12rem;
    min-width: 150px;
  }
  .headBg .headBg__en {
    font-size: 24rem;
  }
}

/* Text
----------------------------------------------- */
.textLead {
  line-height: 2.2;
  margin-bottom: 2em;
}
@media screen and (max-width: 767px) {
  .textLead {
    line-height: 2;
  }
}

.textDate {
  font-size: 14rem;
  color: #aaa;
}

.textError {
  color: #e92440;
}

.textPrice {
  text-align: center;
  font-size: 40rem;
  font-weight: 200;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
@media screen and (max-width: 767px) {
  .textPrice {
    font-size: 24rem;
  }
}

/* List
----------------------------------------------- */
.listDefinition {
  margin-top: 2em;
  background-color: rgba(34, 34, 34, 0.05);
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.listDefinition__term, .listDefinition__description {
  margin-top: 0;
  padding: 15px 20px;
  border-top: 1px solid #ddd;
}
.listDefinition__term {
  width: 25%;
}
.listDefinition__description {
  width: 75%;
  background-color: #fff;
}
.listDefinition__description [class*="iconFont--"] {
  margin-left: 6px;
}
@media screen and (max-width: 767px) {
  .listDefinition {
    border-bottom: none;
  }
  .listDefinition > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .listDefinition__term, .listDefinition__description {
    padding: 10px;
    width: 100%;
    border-top: none;
  }
  .listDefinition__term {
    padding: 5px 10px;
  }
  .listDefinition__description {
    padding-bottom: 25px;
  }
}

.listIcon {
  margin-top: 2em;
}
.listIcon__item:not(:first-child) {
  margin-top: 10px;
}
.listIcon__item [class*="iconFont--"] {
  display: inline-block;
  margin-right: 6px;
  font-size: 1.2em;
  position: relative;
  top: 2px;
}

.listIndex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: calc(100% + 20px);
  margin: 0 -10px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.listIndex__item {
  width: 50%;
  padding: 0 10px;
}
.listIndex__item:nth-child(odd) {
  padding-right: 10px;
}
.listIndex__item:nth-child(even) {
  padding-left: 10px;
}
.listIndex__item:nth-child(n+3) {
  margin-top: 20px;
}
.listIndex__item__link {
  display: inline-block;
  position: relative;
  background: #111;
}
.listIndex__item__link:hover .listIndex__item__image {
  opacity: 1;
}
.listIndex__item__label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: inline-block;
  background: rgba(17, 17, 17, 0.8);
  color: #fff;
  width: 200px;
  padding: 20px 5px;
  font-size: 14rem;
  border-radius: 4px;
  line-height: 1.2;
  text-align: center;
}
.listIndex__item__label > span {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-size: 32rem;
}
.listIndex__item__image {
  opacity: 0.5;
  margin-top: 0;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
}
@media screen and (max-width: 767px) {
  .listIndex__item {
    width: 100%;
    display: block;
    text-align: center;
  }
  .listIndex__item:nth-child(n+2) {
    margin-top: 10px;
  }
  .listIndex__item__label {
    width: 150px;
    font-size: 12rem;
    padding: 10px 5px;
  }
  .listIndex__item__label > span {
    font-size: 24rem;
  }
}

.listGallery {
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.listGallery__item {
  width: 25%;
  height: 75vh;
  overflow: hidden;
  vertical-align: bottom;
  text-align: center;
}
.listGallery__item__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.listGallery__item__link:hover .listGallery__item__image {
  -webkit-transform: translateY(calc(-100% + 75vh + 1px));
      -ms-transform: translateY(calc(-100% + 75vh + 1px));
          transform: translateY(calc(-100% + 75vh + 1px));
}
.listGallery__item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 1.5s;
          transition: transform 1.5s;
}
.listGallery__item__image--h2 {
  -webkit-transition: -webkit-transform 3s;
          transition: transform 3s;
}
.listGallery__item__image--h3 {
  -webkit-transition: -webkit-transform 4.5s;
          transition: transform 4.5s;
}
.listGallery__item__image--h4 {
  -webkit-transition: -webkit-transform 6s;
          transition: transform 6s;
}
.listGallery__item__image--h5 {
  -webkit-transition: -webkit-transform 7.5s;
          transition: transform 7.5s;
}
.listGallery__item__image--h6 {
  -webkit-transition: -webkit-transform 9s;
          transition: transform 9s;
}
@media screen and (max-width: 767px) {
  .listGallery {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .listGallery__item {
    width: 50%;
    height: 75vw;
  }
}

.listBullet {
  margin-top: 2em;
}
.listBullet > li {
  position: relative;
  padding-left: 1.5em;
}
.listBullet > li:not(:first-child) {
  margin-top: 0.8em;
}
.listBullet > li:before {
  position: absolute;
  top: .6em;
  left: 2px;
  display: inline-block;
  width: 8px;
  height: 8px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #222;
}
@media screen and (max-width: 767px) {
  .listBullet {
    margin-top: 1.5em;
  }
  .listBullet > li:before {
    top: .6em;
    left: 8px;
    width: 6px;
    height: 6px;
  }
}

.listService {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: calc(100% + 20px);
  margin: 0 -10px;
}
.listService > li {
  margin-top: 2em;
  width: 50%;
  padding: 0 10px;
}
.listService > li:nth-child(n+3) {
  margin-top: 20px;
}
.listService > li > a {
  border: 1px solid #e1e1e1;
  border-radius: 0.25em;
  padding: 2em 1em;
  display: block;
  color: inherit;
  -webkit-transition: 0.5s;
          transition: 0.5s;
}
.listService > li > a:hover {
  text-decoration: none;
  background: #e1e1e1;
}
.listService .listService__head {
  font-size: 18rem;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
  .listService > li {
    width: 100%;
  }
  .listService > li:nth-child(n+2) {
    margin-top: 10px;
  }
  .listService > li > a {
    padding: 1.22em 1em;
  }
  .listService .listService__head {
    font-size: 16rem;
  }
  .listService .listService__text {
    font-size: 12rem;
  }
}

.listNote {
  margin-top: 1em;
  font-size: 14rem;
  color: #999;
}
.listNote > li {
  padding-left: 1.2em;
  position: relative;
}
.listNote .listNote__mark {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Layout
----------------------------------------------- */
.layoutImage, .layoutImage--acrousing {
  text-align: center;
  margin-bottom: 3em;
}

@media screen and (max-width: 767px) {
  .layoutImage--acrousing .layoutImage__image {
    width: 45%;
    vertical-align: middle;
  }
  .layoutImage--acrousing .layoutImage__image:nth-child(2) {
    width: 10%;
  }
}

.layoutImage2 {
  text-align: center;
  margin-top: 3em;
}
.layoutImage2 .layoutImage2__image {
  border: 1px solid #e1e1e1;
}

.layoutBrowser {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 4em;
  border: 2px solid #e1e1e1;
  border-top-width: 24px;
  border-radius: 4px;
  position: relative;
}
.layoutBrowser:before, .layoutBrowser:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: rgba(0, 160, 168, 0.8);
  border-radius: 50%;
  position: absolute;
  top: -17px;
  right: 7px;
  z-index: 1;
}
.layoutBrowser:after {
  right: 25px;
  background: rgba(47, 58, 210, 0.8);
}
.layoutBrowser__item {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: relative;
  height: 490px;
}
.layoutBrowser__item::-webkit-scrollbar {
  /* スクロールバー本体 */
  width: 5px;
}
.layoutBrowser__item::-webkit-scrollbar-thumb {
  /* スクロールバーの動く部分 */
  background: #c4c4c4;
  border-radius: 5px;
}
.layoutBrowser__item::-webkit-scrollbar-track-piece:start {
  /* スクロールバーの動く部分の前 */
  background: #f5f5f5;
}
.layoutBrowser__item::-webkit-scrollbar-track-piece:end {
  /* スクロールバーの動く部分の後ろ */
  background: #f5f5f5;
}

.layoutColumn, .layoutColumn--col2, .layoutColumn--col3 {
  width: calc(100% + 30px);
  margin-left: -15px;
}
.layoutColumn__item {
  display: inline-block;
  vertical-align: top;
  padding: 0 15px;
}
.layoutColumn__item img {
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .layoutColumn, .layoutColumn--col2, .layoutColumn--col3 {
    width: 100%;
    margin-left: 0;
  }
  .layoutColumn > .layoutColumn__item, .layoutColumn--col2 > .layoutColumn__item, .layoutColumn--col3 > .layoutColumn__item {
    width: 100% !important;
    padding: 0;
  }
  .layoutColumn > .layoutColumn__item:nth-child(n+2), .layoutColumn--col2 > .layoutColumn__item:nth-child(n+2), .layoutColumn--col3 > .layoutColumn__item:nth-child(n+2) {
    margin-top: 30px;
  }
}

.layoutColumn--col2 > .layoutColumn__item {
  width: 50%;
}
.layoutColumn--col2 > .layoutColumn__item:nth-child(n+3) {
  margin-top: 30px;
}

.layoutColumn--col3 > .layoutColumn__item {
  width: 33.33333%;
}
.layoutColumn--col3 > .layoutColumn__item:nth-child(n+4) {
  margin-top: 30px;
}

/* Form
----------------------------------------------- */
.iconReq {
  font-size: 12rem;
  display: inline-block;
  vertical-align: bottom;
  float: right;
  padding: 0.3em 0.6em;
  text-align: center;
  color: #fff;
  background-color: #e92440;
  line-height: 1;
  margin-top: 0.3em;
}
@media screen and (max-width: 767px) {
  .iconReq {
    font-size: 11rem;
  }
}

.iconWork {
  font-size: 12rem;
  display: inline-block;
  padding: 0.7em 1em 0.6em;
  border-radius: 2em;
  text-align: center;
  color: #fff;
  background-color: #00bfbd;
  line-height: 1;
  margin: 0.2em 0.5em 0.2em 0;
}
@media screen and (max-width: 767px) {
  .iconWork {
    font-size: 11rem;
  }
}

/* Button
----------------------------------------------- */
.buttonWrap {
  text-align: center;
  margin: 2em 0;
}
.buttonWrap button + button {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
@media screen and (max-width: 767px) {
  .buttonWrap button + button {
    margin-top: 20px;
  }
}

.buttonLink {
  background: -webkit-linear-gradient(0deg, #2f3ad2 0%, #00bfbd 100%);
  color: #fff;
  display: inline-block;
  padding: 0.8em 1.5em 0.7em 1.5em;
  min-width: 12em;
  font-size: 18rem;
  border-radius: 0.25em;
  -webkit-transition: 0.5s;
          transition: 0.5s;
  border: none;
}
@media screen and (max-width: 767px) {
  .buttonLink {
    font-size: 16rem;
    width: 80%;
  }
}

.buttonGhost {
  border: solid 1px #fff;
  color: #fff;
  display: inline-block;
  padding: 0.8em 1.5em 0.7em 1.5em;
  min-width: 12em;
  font-size: 18rem;
  border-radius: 0.25em;
  -webkit-transition: 0.5s;
          transition: 0.5s;
}
@media screen and (max-width: 767px) {
  .buttonGhost {
    font-size: 16rem;
    width: 80%;
  }
}

.buttonBack {
  background: #ddd;
  color: #888;
  display: inline-block;
  padding: 0.8em 1.5em 0.7em 1.5em;
  min-width: 12em;
  font-size: 18rem;
  border-radius: 0.25em;
  -webkit-transition: 0.5s;
          transition: 0.5s;
  border: none;
}
@media screen and (max-width: 767px) {
  .buttonBack {
    font-size: 16rem;
    width: 80%;
  }
}

/* Helper
----------------------------------------------- */
.dbSp {
  display: none;
}
@media screen and (max-width: 767px) {
  .dbSp {
    display: block;
  }
}

.taC {
  text-align: center;
}

.bdrsCircle {
  border-radius: 50%;
}

.w5 {
  width: 5% !important;
}

.w10 {
  width: 10% !important;
}

.w15 {
  width: 15% !important;
}

.w20 {
  width: 20% !important;
}

.w25 {
  width: 25% !important;
}

.w30 {
  width: 30% !important;
}

.w35 {
  width: 35% !important;
}

.w40 {
  width: 40% !important;
}

.w45 {
  width: 45% !important;
}

.w50 {
  width: 50% !important;
}

.w55 {
  width: 55% !important;
}

.w60 {
  width: 60% !important;
}

.w65 {
  width: 65% !important;
}

.w70 {
  width: 70% !important;
}

.w75 {
  width: 75% !important;
}

.w80 {
  width: 80% !important;
}

.w85 {
  width: 85% !important;
}

.w90 {
  width: 90% !important;
}

.w95 {
  width: 95% !important;
}

.w100 {
  width: 100% !important;
}

.w33 {
  width: 33.33333% !important;
}

.w66 {
  width: 66.66666% !important;
}

.maw200 {
  width: 100%;
  max-width: 200px !important;
}

.h20em {
  height: 20em;
}