@charset "UTF-8";
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet
******************************************************************/
/*********************
IMPORTING PARTIALS
*********************/
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
  background: transparent;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6, p, span, li, a, div {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong,
.strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn,
em,
.em {
  font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/*
 * proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens)
*/
p {
  -webkit-hyphens: auto;
  -epub-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/*
 * Addresses margins set differently in IE6/7.
 */
pre {
  margin: 0;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
q:before,
q:after {
  content: '';
  content: none;
}

small, .small {
  font-size: 75%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
  Lists
========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: .25em 0;
}

dd {
  margin: 0;
}

/*
 * Addresses paddings set differently in IE6/7.
 */
menu {
  padding: 0 0 0 40px;
}

ol,
ul {
  padding: 0;
  list-style-type: none;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* ==========================================================================
  Embedded content
========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.image-replacement,
.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.clearfix, .cf {
  zoom: 1;
}

.clearfix:before, .clearfix:after, .cf:before, .cf:after {
  content: "";
  display: table;
}

.clearfix:after, .cf:after {
  clear: both;
}

/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic;
}

/*********************
FONT FACE (IN YOUR FACE)
*********************/
/*  To embed your own fonts, use this syntax
  and place your fonts inside the
  library/fonts folder. For more information
  on embedding fonts, go to:
  http://www.fontsquirrel.com/
  Be sure to remove the comment brackets.
*/
/*  @font-face {
      font-family: 'Font Name';
      src: url('library/fonts/font-name.eot');
      src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
      font-weight: normal;
      font-style: normal;
  }
*/
/*
The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*/
/*
 i imported this one in the functions file so bones would look sweet.
 don't forget to remove it for your site.
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

Here's a nice little helper function for calculating
target / context
as mentioned in that book.

Example:
width: cp(650px, 1000px);
or
width: calc-percent(650px, 1000px);
both compile to:
width: 65%;
*********************/
/*********************
TRANSITION
*********************/
/*
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
.last-col {
  float: right;
  padding-right: 0 !important;
}

/* Mobile Grid Styles */
@media (max-width: 767px) {
  .m-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0;
  }
  .m-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 50%;
  }
  .m-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%;
  }
  .m-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%;
  }
  .m-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%;
  }
  .m-3of4 {
    float: left;
    padding-right: 0.75em;
    width: 75%;
  }
}

/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1023px) {
  .t-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0;
  }
  .t-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 50%;
  }
  .t-1of2r {
    float: right;
    width: 50%;
    padding: 0;
  }
  .t-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%;
  }
  .t-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%;
  }
  .t-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%;
  }
  .t-3of4 {
    float: left;
    padding-right: 0.75em;
    width: 75%;
  }
  .t-1of5 {
    float: left;
    padding-right: 0.75em;
    width: 20%;
  }
  .t-2of5 {
    float: left;
    padding-right: 0.75em;
    width: 40%;
  }
  .t-3of5 {
    float: left;
    padding-right: 0.75em;
    width: 60%;
  }
  .t-4of5 {
    float: left;
    padding-right: 0.75em;
    width: 80%;
  }
}

/* Landscape to small desktop */
@media (min-width: 1024px) {
  .d-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0;
  }
  .d-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 50%;
  }
  .d-1of2r {
    float: right;
    width: 50%;
    padding: 0;
  }
  .d-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%;
  }
  .d-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%;
  }
  .d-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%;
  }
  .d-3of4 {
    float: left;
    padding-right: 0.75em;
    width: 75%;
  }
  .d-1of5 {
    float: left;
    padding-right: 0.75em;
    width: 20%;
  }
  .d-2of5 {
    float: left;
    padding-right: 0.75em;
    width: 40%;
  }
  .d-3of5 {
    float: left;
    padding-right: 0.75em;
    width: 60%;
  }
  .d-4of5 {
    float: left;
    padding-right: 0.75em;
    width: 80%;
  }
  .d-1of6 {
    float: left;
    padding-right: 0.75em;
    width: 16.6666666667%;
  }
  .d-1of7 {
    float: left;
    padding-right: 0.75em;
    width: 14.2857142857%;
  }
  .d-2of7 {
    float: left;
    padding-right: 0.75em;
    width: 28.5714286%;
  }
  .d-3of7 {
    float: left;
    padding-right: 0.75em;
    width: 42.8571429%;
  }
  .d-4of7 {
    float: left;
    padding-right: 0.75em;
    width: 57.1428572%;
  }
  .d-5of7 {
    float: left;
    padding-right: 0.75em;
    width: 71.4285715%;
  }
  .d-6of7 {
    float: left;
    padding-right: 0.75em;
    width: 85.7142857%;
  }
  .d-1of8 {
    float: left;
    padding-right: 0.75em;
    width: 12.5%;
  }
  .d-1of9 {
    float: left;
    padding-right: 0.75em;
    width: 11.1111111111%;
  }
  .d-1of10 {
    float: left;
    padding-right: 0.75em;
    width: 10%;
  }
  .d-1of11 {
    float: left;
    padding-right: 0.75em;
    width: 9.09090909091%;
  }
  .d-1of12 {
    float: left;
    padding-right: 0.75em;
    width: 8.33%;
  }
}

/*********************
IMPORTING MODULES
*********************/
.alert-help, .alert-info, .alert-error, .alert-success {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid;
}

.alert-help {
  border-color: #e8dc59;
  background: #ebe16f;
}

.alert-info {
  border-color: #5eb5c9;
  background: #71BECF;
}

.alert-error {
  border-color: #b62f36;
  background: #CA343C;
}

.alert-success {
  border-color: #83a63e;
  background: #92B945;
}

/*********************
BUTTON DEFAULTS
*********************/
.blue-btn {
  display: inline-block;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  font-size: 34px;
  line-height: 34px;
  font-weight: normal;
  padding: 0 24px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  -webkit-transition: background-color 0.14s ease-in-out;
  transition: background-color 0.14s ease-in-out;
}

.blue-btn:hover, .blue-btn:focus {
  text-decoration: none;
  outline: none;
}

.blue-btn:active {
  top: 1px;
}

/*
An example button.
You can use this example if you want. Just replace all the variables
and it will create a button dependant on those variables.
*/
/*********************
INPUTS
*********************/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
  display: block;
  height: 40px;
  line-height: 1em;
  padding: 0 12px;
  margin-bottom: 14px;
  font-size: 1em;
  border-radius: 3px;
  vertical-align: middle;
  box-shadow: none;
  border: 0;
  width: 100%;
  max-width: 400px;
  -webkit-transition: background-color 0.24s ease-in-out;
  transition: background-color 0.24s ease-in-out;
}

input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="datetime"]:focus,
input[type="datetime"]:active,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:active,
input[type="date"]:focus,
input[type="date"]:active,
input[type="month"]:focus,
input[type="month"]:active,
input[type="time"]:focus,
input[type="time"]:active,
input[type="week"]:focus,
input[type="week"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="url"]:focus,
input[type="url"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="tel"]:focus,
input[type="tel"]:active,
input[type="color"]:focus,
input[type="color"]:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
.field:focus,
.field:active {
  outline: none;
}

input[type="text"].error, input[type="text"].is-invalid,
input[type="password"].error,
input[type="password"].is-invalid,
input[type="datetime"].error,
input[type="datetime"].is-invalid,
input[type="datetime-local"].error,
input[type="datetime-local"].is-invalid,
input[type="date"].error,
input[type="date"].is-invalid,
input[type="month"].error,
input[type="month"].is-invalid,
input[type="time"].error,
input[type="time"].is-invalid,
input[type="week"].error,
input[type="week"].is-invalid,
input[type="number"].error,
input[type="number"].is-invalid,
input[type="email"].error,
input[type="email"].is-invalid,
input[type="url"].error,
input[type="url"].is-invalid,
input[type="search"].error,
input[type="search"].is-invalid,
input[type="tel"].error,
input[type="tel"].is-invalid,
input[type="color"].error,
input[type="color"].is-invalid,
select.error,
select.is-invalid,
textarea.error,
textarea.is-invalid,
.field.error,
.field.is-invalid {
  color: #CA343C;
  border-color: #CA343C;
  background-position: 99% center;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=);
  outline-color: #CA343C;
}

input[type="text"].success, input[type="text"].is-valid,
input[type="password"].success,
input[type="password"].is-valid,
input[type="datetime"].success,
input[type="datetime"].is-valid,
input[type="datetime-local"].success,
input[type="datetime-local"].is-valid,
input[type="date"].success,
input[type="date"].is-valid,
input[type="month"].success,
input[type="month"].is-valid,
input[type="time"].success,
input[type="time"].is-valid,
input[type="week"].success,
input[type="week"].is-valid,
input[type="number"].success,
input[type="number"].is-valid,
input[type="email"].success,
input[type="email"].is-valid,
input[type="url"].success,
input[type="url"].is-valid,
input[type="search"].success,
input[type="search"].is-valid,
input[type="tel"].success,
input[type="tel"].is-valid,
input[type="color"].success,
input[type="color"].is-valid,
select.success,
select.is-valid,
textarea.success,
textarea.is-valid,
.field.success,
.field.is-valid {
  color: #92B945;
  border-color: #92B945;
  background-position: 99% center;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==);
  outline-color: #92B945;
}

input[type="text"][disabled], input[type="text"].is-disabled,
input[type="password"][disabled],
input[type="password"].is-disabled,
input[type="datetime"][disabled],
input[type="datetime"].is-disabled,
input[type="datetime-local"][disabled],
input[type="datetime-local"].is-disabled,
input[type="date"][disabled],
input[type="date"].is-disabled,
input[type="month"][disabled],
input[type="month"].is-disabled,
input[type="time"][disabled],
input[type="time"].is-disabled,
input[type="week"][disabled],
input[type="week"].is-disabled,
input[type="number"][disabled],
input[type="number"].is-disabled,
input[type="email"][disabled],
input[type="email"].is-disabled,
input[type="url"][disabled],
input[type="url"].is-disabled,
input[type="search"][disabled],
input[type="search"].is-disabled,
input[type="tel"][disabled],
input[type="tel"].is-disabled,
input[type="color"][disabled],
input[type="color"].is-disabled,
select[disabled],
select.is-disabled,
textarea[disabled],
textarea.is-disabled,
.field[disabled],
.field.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

input[type="text"][disabled]:focus, input[type="text"][disabled]:active, input[type="text"].is-disabled:focus, input[type="text"].is-disabled:active,
input[type="password"][disabled]:focus,
input[type="password"][disabled]:active,
input[type="password"].is-disabled:focus,
input[type="password"].is-disabled:active,
input[type="datetime"][disabled]:focus,
input[type="datetime"][disabled]:active,
input[type="datetime"].is-disabled:focus,
input[type="datetime"].is-disabled:active,
input[type="datetime-local"][disabled]:focus,
input[type="datetime-local"][disabled]:active,
input[type="datetime-local"].is-disabled:focus,
input[type="datetime-local"].is-disabled:active,
input[type="date"][disabled]:focus,
input[type="date"][disabled]:active,
input[type="date"].is-disabled:focus,
input[type="date"].is-disabled:active,
input[type="month"][disabled]:focus,
input[type="month"][disabled]:active,
input[type="month"].is-disabled:focus,
input[type="month"].is-disabled:active,
input[type="time"][disabled]:focus,
input[type="time"][disabled]:active,
input[type="time"].is-disabled:focus,
input[type="time"].is-disabled:active,
input[type="week"][disabled]:focus,
input[type="week"][disabled]:active,
input[type="week"].is-disabled:focus,
input[type="week"].is-disabled:active,
input[type="number"][disabled]:focus,
input[type="number"][disabled]:active,
input[type="number"].is-disabled:focus,
input[type="number"].is-disabled:active,
input[type="email"][disabled]:focus,
input[type="email"][disabled]:active,
input[type="email"].is-disabled:focus,
input[type="email"].is-disabled:active,
input[type="url"][disabled]:focus,
input[type="url"][disabled]:active,
input[type="url"].is-disabled:focus,
input[type="url"].is-disabled:active,
input[type="search"][disabled]:focus,
input[type="search"][disabled]:active,
input[type="search"].is-disabled:focus,
input[type="search"].is-disabled:active,
input[type="tel"][disabled]:focus,
input[type="tel"][disabled]:active,
input[type="tel"].is-disabled:focus,
input[type="tel"].is-disabled:active,
input[type="color"][disabled]:focus,
input[type="color"][disabled]:active,
input[type="color"].is-disabled:focus,
input[type="color"].is-disabled:active,
select[disabled]:focus,
select[disabled]:active,
select.is-disabled:focus,
select.is-disabled:active,
textarea[disabled]:focus,
textarea[disabled]:active,
textarea.is-disabled:focus,
textarea.is-disabled:active,
.field[disabled]:focus,
.field[disabled]:active,
.field.is-disabled:focus,
.field.is-disabled:active {
  background-color: #71BECF;
}

input[type="password"] {
  letter-spacing: 0.3em;
}

textarea {
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em;
}

select {
  -webkit-appearance: none;
  /* 1 */
  -moz-appearance: none;
  appearance: none;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 97.5% center;
}

/*********************
BASE (MOBILE) SIZE
*********************/
/*********************
GENERAL STYLES
*********************/
body {
  font-family: Avenir, "Helvetica neue", Helvetica, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*********************
LAYOUT & GRID STYLES
*********************/
.wrap {
  width: 96%;
  margin: 0 auto;
}

/*********************
LINK STYLES
*********************/
a, a:visited {
  color: #2A2A2A;
  text-decoration: none;
  /* on click */
  /* mobile tap color */
}

a:active, a:visited:active {
  color: #101010;
}

a:link, a:visited:link {
  /* it basically works like the :hover selector for mobile devices. */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  text-rendering: optimizelegibility;
  margin: 0;
  font-weight: 500;
}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none;
}

.h1 {
  font-size: 2.5em;
  line-height: 1.333em;
}

.h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 0.375em;
}

.h3 {
  font-size: 1.125em;
}

.h4 {
  font-size: 1.1em;
  font-weight: 700;
}

.h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/*********************
HEADER STYLES
*********************/
.header_box {
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  color: #2A2A2A;
  height: 60px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
}

.cb-header {
  position: fixed;
  left: 0;
}

.header_inner {
  position: relative;
}

h1#logo {
  float: left;
  width: 36%;
  height: 60px;
  margin-left: 2%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url(../img/logo.svg) no-repeat center;
  background-size: contain;
  max-width: 200px;
}

/*********************
NAVIGATION STYLES
*********************/
.nav {
  display: block;
}

.nav {
  float: right;
  width: 60%;
}

.nav ul {
  overflow: hidden;
  margin: 0;
  height: 60px;
  display: flex;
}

.nav li {
  flex:1;
  height: 60px;
}

.nav li a {
  height: 60px;
  display: block;
  font-size: 11px;
  text-align: center;
  padding-top: 40px;
  background: url(../img/parts_menu1.svg) no-repeat center 10px;
  background-size: 28px;
}

.nav li a img {
  height: 20px;
}

.nav li a:focus {
  background-color: #f9f9f9;
}

.nav li.menu-sample a {
  background-image: url(../img/parts_menu2.svg);
}

.nav li.menu-company a {
  background-image: url(../img/parts_menu3.svg);
}
.nav li.menu-works a{background-image: url(../img/parts_menu4.svg);}

/*********************
CONTENT STYLES
*********************/
.t_cntr {
  text-align: center;
}

.t_left {
  text-align: left;
}

.t_right {
  text-align: right;
}

em, .em {
  font-weight: bold;
}

.t_line {
  text-decoration: underline;
}

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  position: center;
  background-size: 16px;
  width: 16px;
  height: 16px;
  margin: 0 4px;
  position: relative;
  top: 2px;
}

.icon.icon-link {
  background-image: url(../img/icon_link.png);
}

.df {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.col, .col-sp {
  flex-direction: column;
}

.col .arrow img, .col-sp .arrow img {
  transform: rotate(90deg);
}

.row, .row-sp {
  flex-direction: row;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-cntrn {
  justify-content: center;
}

.align-items-cntr {
  align-items: center;
}

.brpc {
  display: none;
}

.mb10, .mb10sp {
  margin-bottom: 10px;
}

.mr10, .mr10sp {
  margin-right: 10px;
}

.mb10, .mb10sp {
  margin-bottom: 10px;
}

.ml10, .ml10sp {
  margin-left: 10px;
}

.hero_box {
  margin-top: 60px;
  background: #127cc1;
}

.hero_box .hero_inner {
  height: 200px;
  background: url(../img/herobgsp2.png) no-repeat center;
  background-size: contain;
}

.heroSp {
  width: 100%;
  max-width: auto;
}

.heroPc {
  display: none;
}

.hero_sp {
  background-color: #d1e1e6;
  margin-top: 60px;
}

.hero_sp .hero_inner {
  width: 100%;
  margin: auto;
}

.parallax {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.parallax_img_sp {
  background-image: url(../img/herobgsp2.png);
}

.hero_pc {
  display: none;
}

.contents {
  width: 100%;
}

.service_page .contents, .sample_page .contents, .privacy_page .contents, .contact_page .contents {
  margin-top: 60px;
}

.sample_page .design_eg {
  background: #fff;
}

.cont_ttl {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 1em;
  line-height: 1.2;
  font-family: 'Libre Baskerville', serif;
}

.cont_ttl span {
  color: #878787;
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: .05em;
  font-weight: normal;
  font-family: Avenir, "Helvetica neue", Helvetica, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.it-certificate {
  text-align: center;
}

.it-certificate a {
  background: #c2d9ed;
  display: block;
}

.it-certificate img {
  max-height: 100%;
}

.page_disc {
  text-align: center;
  font-size: .875em;
  margin-bottom: 2em;
}

.service .cont_ttl img, .design_eg .cont_ttl img, .comp_info .cont_ttl img, .contact .cont_ttl img, .works .cont_ttl img {
  height: 2em;
  margin-bottom: .5em;
}

.service {
  padding-top: 2em;
}

.service div.aboutWeb {
  padding: 0 0 1em;
}

.service .aboutWeb a {
  color: #127cc1;
}

.service .aboutWeb a .icon_external {
  width: 16px;
  margin: 0 2px 0 4px;
}

.service .service_img {
  text-align: center;
  padding: 0;
}

.service .service_box {
  margin: 0 auto 2em;
  max-width: 600px;
}

.service .service_box div {
  padding: 5%;
}

.service .service_box li {
  float: left;
  width: 50%;
}

.service .service_box li:nth-child(5) {
  margin-left: 25%;
}

.service .service_box li a {
  font-size: 1em;
  color: #127cc1;
  text-align: center;
  display: block;
  border-radius: 50%;
  position: relative;
}

.service .service_box li a img {
  width: 100%;
  border-radius: 50%;
}

.service .service_box li a h4 {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  width: 100%;
  font-weight: 700;
  text-shadow: 0 0 5px white;
}

.service .service_box li a h4.line2 {
  margin-top: -1em;
  line-height: 1.2em;
}

#plan .service_cont h4 {
  font-size: 1em;
  border-left: 2px solid #127cc1;
  padding-left: .5em;
}

#plan .service_cont .warn {
  font-size: 87%;
  color: #878787;
}

.pack_type {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin: 1em 0 2em;
}

.pack_type li {
  text-align: center;
  font-size: .75em;
  width: 32%;
  padding: .5em .25em;
  color: white;
}

.pack_type .basic {
  background: #127cc1;
}

.pack_type .gold {
  background: #CA343C;
}

.pack_type .premium {
  background: #eae88f;
  color: #2A2A2A;
}

.pack_type .pack_name {
  display: block;
  font-size: 1.25em;
  line-height: 1.3;
  border-bottom: 1px solid;
  padding-bottom: .5em;
  margin-bottom: .25em;
}

#tabs {
  padding: .25em .5em;
  border: 1px solid #ddd;
}

.tabContent {
  display: none;
}

.tabContent.active {
  display: block;
}

.pack_price_list {
  margin-bottom: 2em;
}

.pack_price_list h5 {
  background: #127cc1;
  color: white;
  padding: .25em 1em;
  font-size: .875em;
  font-weight: bold;
  letter-spacing: 2px;
}

.pack_price_list .tab {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin: .5em 0;
}

.pack_price_list .tab li {
  width: 32%;
  font-size: .8125em;
  padding: .5em 0;
  text-align: center;
  position: relative;
  line-height: 1.3;
  border-width: 1px;
  border-style: solid;
}

.pack_price_list .tab li.active {
  background: #127cc1;
  color: white;
}

.pack_price_list .tab li.active:after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -3px;
  border-top: 6px solid #127cc1;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: '';
}

.pack_price_list .tab li.gold.active {
  background: #CA343C;
}

.pack_price_list .tab li.premium.active {
  background: #eae88f;
  color: #2A2A2A;
}

.pack_price_list .tab li.gold.active:after {
  border-top-color: #CA343C;
}

.pack_price_list .tab li.premium.active:after {
  border-top-color: #eae88f;
}

.pack_price_list .tab_container {
  padding: 0 .5em;
}

.pack_price_list .tabContent > p {
  font-size: 1.25em;
  margin: .5em 0;
  padding: .25em;
  text-align: center;
  background: #f9f9f9;
  border-bottom: 1px solid #127cc1;
}

.pack_price_list .basic {
  border-color: #127cc1;
  color: #127cc1;
}

.pack_price_list .gold {
  border-color: #CA343C;
  color: #CA343C;
}

.pack_price_list .premium {
  border-color: #eae88f;
  color: #948d37;
}

.pack_price_list .site_type > div {
  margin-bottom: 1em;
}

.pack_price_list .site_type h6 {
  font-size: .875em;
  border-bottom: 1px solid #ddd;
  padding: .25em;
}

.pack_price_list .site_type ul {
  padding-left: 1.5em;
  list-style: disc;
  margin: 1em 0;
}

.pack_price_list .site_type li {
  font-size: .75em;
}

.pack_price_list .site_type li span {
  display: block;
  color: #878787;
  padding-left: 1em;
}

.credit {
  text-align: center;
  background: #f9f9f9;
  padding: 2em 0;
}

.credit h4 {
  margin-bottom: 2em;
  font-weight: bold;
  line-height: 1.3;
}

.credit ul {
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.credit li {
  margin-bottom: 1em;
}

.credit img {
  max-width: 100%;
  margin: 0 20px 10px;
  height: 50px;
}

.credit span {
  display: block;
  color: #666;
  letter-spacing: 1px;
  font-size: .8125em;
}

.mitumori_btn a {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  text-align: center;
  color: #fff;
  padding: 1em 0;
  font-size: 1.15em;
  background: #127cc1;
}

.sample_page .design_eg {
  margin-bottom: 0em;
}

.design_eg, .works {
  padding: 2em 0 3em;
  margin-bottom: 2em;
  background: #f9f9f9;
}

.design_eg .btn, .works .btn {
  background: #127cc1;
  color: #fff;
  margin: 0 auto;
  max-width: 240px;
}

.eg_box, .works_box {
  margin-bottom: 0em;
}

/*.eg_box li, */.works_box li {
  margin-bottom: 1.5em;
}
.eg_box li .img{
  height:300px;
  overflow:hidden;
}
/*.eg_box li div,*/ .works_box li div {
  height: 300px;
  overflow: hidden;
  margin: 0 1em 1em;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.eg_box li div.price-smpl/*, .works_box li div.price-smpl*/ {
  box-shadow: none;
  height: inherit;
  margin: 0;
}

.eg_box li a, .works_box li a {
  display: block;
}

.eg_box .eg_img.works_img, .works_box .eg_img.works_img {
  width: 100%;
}

.eg_box span/*, .works_box span*/ {
  display: block;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  padding:  1em;
}

.eg_box .price-smpl/*, .works_box .price-smpl*/ {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eg_box .price-smpl .sankou, .eg_box .price-smpl .price, .works_box .price-smpl .sankou, .works_box .price-smpl .price {
  font-weight: normal;
  line-height: 32px;
}

.eg_box .price-smpl .sankou, .works_box .price-smpl .sankou {
  background: #d7edfb;
  color: #0e5e92;
  padding: 0 1em;
  letter-spacing: 1px;
}

.eg_box .price-smpl .price, .works_box .price-smpl .price {
  font-size: 1.3em;
  padding: 0 1em;
  background: #f9f9f9;
  letter-spacing: inherit;
}

/*.eg_box .price-smpl .price:before, .works_box .price-smpl .price:before {
  content: '￥';
  display: inline-block;
  font-size: 80%;
}
*/
.smpl-price-footer {
  border: 1px solid #ddd;
  padding: .5em 3.125%;
}

.smpl-price-footer li {
  font-size: .75em;
  padding: .25em 0;
}

.works img {
  width: 100%;
}

.works .smpl {
  position: relative;
}

.works .smpl:after {
  width: 100%;
  background: rgba(18, 124, 193, 0.5);
  padding: 4px 0;
  letter-spacing: 4px;
  font-size: .875em;
  font-weight: bold;
  color: white;
  content: 'SAMPLE';
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
}

.works .works_link {
  height: auto;
  box-shadow: none;
}

.works .works_link a {
  color: white;
}

.works_hero {
  margin: 1em 0;
}

.pc-img {
  display: none;
}

.works_single {
  margin-top: 80px;
  padding: 0 1em;
}

.works_single section {
  margin-bottom: 2em;
}

.works_single p {
  font-size: .8125em;
  line-height: 2;
  margin-bottom: 1.5em;
}

.works_single p span {
  color: #127cc1;
}

.works_single p span.t-line {
  color: inherit;
  text-decoration: underline;
}

.works_single h3, .works_single h4 {
  font-weight: bold;
  margin: .5em 0;
}

.works_single h3 {
  background: #127cc1;
  color: #fff;
  font-size: 1.25em;
  padding: .25em .5em;
  font-weight: normal;
}

.works_single h4 {
  color: #127cc1;
  font-size: 1.125em;
  border-bottom: 1px solid #127cc1;
  padding-bottom: .25em;
}

.works_single h4 span {
  display: block;
  color: #2A2A2A;
  font-size: 80%;
}

.works_single h5 {
  margin-bottom: 1em;
}

.works_single table {
  margin-bottom: .5em;
  width: 100%;
}

.works_single table .th-primary {
  background: #127cc1;
  color: white;
}

.works_single table .em {
  background: #d7edfb;
}

.works_single table .em td {
  font-weight: bold;
  font-size: 90%;
}

.works_single table th, .works_single table td {
  border: 1px solid #ddd;
  font-size: .75em;
  font-weight: normal;
  text-align: center;
}

.works_single .works_ttl {
  font-size: 1.25em;
  font-weight: bold;
  color: #127cc1;
  border-left: 4px solid #127cc1;
  padding-left: .5em;
  margin: .5em 0;
}

.works_single .tbl {
  margin-bottom: 1.5em;
}

.works_single .lead {
  margin-bottom: 2em;
}

.works_single .img {
  text-align: center;
  margin-bottom: 1.5em;
  border: 1px solid #ddd;
  padding: .5em;
}

.works_single .img.noborder {
  border: 0;
}

.works_single .cap span {
  font-size: .75em;
  display: inline-block;
  background: #f9f9f9;
  padding: .25em .5em;
  margin: .5em 0;
}

.works_single .review {
  font-size: .75em;
  line-height: 2;
  margin: 1em 0 0;
  padding: .5em 1em;
  border: 4px solid #ddd;
  text-align: left;
  background: url(../img/icon_quote.png) no-repeat 95% bottom;
}

.works_single .review span {
  display: inline;
  border-bottom: 1px solid #CA343C;
}

.works_single .cat-stats th, .works_single .cat-stats td {
  width: 50%;
}

.works_single .link {
  display: inline-block;
  color: #127cc1;
  text-decoration: underline;
}

.works_single .ul-def, .works_single .ol-def {
  background: #f9f9f9;
  border-left: 4px solid #127cc1;
  margin-bottom: 1.5em;
}

.works_single .ul-def li, .works_single .ol-def li {
  font-size: .875em;
  padding: .25em 0;
}

.works_single .ul-def {
  padding: .75em;
}

.works_single .ol-def {
  padding: .75em .75em .75em 2em;
  list-style: decimal;
}

.works_single .list01, .works_single .list02 {
  margin: 1em 0;
  border: 1px solid #ddd;
  border-left: 0;
  border-right: 0;
  padding: .5em 0em .5em 1.5em;
  font-size: .9125em;
}

.works_single .list01 li, .works_single .list02 li {
  padding: .25em 0;
}

.works_single .list01 span, .works_single .list02 span {
  border-bottom: 2px solid #127cc1;
  margin-left: .25em;
}

.works_single .list01 {
  list-style: disc;
  font-weight: bold;
}

.works_single .list02 {
  list-style: decimal;
}

.works_single .dl01 {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: .5em;
  margin: 1em 0;
  text-align: center;
}

.works_single .dl01 dt, .works_single .dl01 dd {
  font-size: .8125em;
  padding: .25em 0;
  display: inline-block;
}

.works_single .dl01 dt {
  font-weight: bold;
}

.works_single .dl01 dd span {
  display: inline;
  color: #127cc1;
  font-size: 120%;
  padding: 0;
}

.works_single .before-after02 .before {
  position: relative;
}

.works_single .before-after02 .before span {
  background: #2A2A2A;
}

.works_single .before-after02 .before p span {
  background: #f9f9f9;
}

.works_single .before-after02 .after span {
  background: #127cc1;
}

.works_single .before-after02 span.tag {
  position: absolute;
  display: block;
  background: white;
  border: 2px dotted #127cc1;
  left: -10px;
  top: -10px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 32px;
  text-align: center;
  font-weight: bold;
  color: #127cc1;
  letter-spacing: 0px;
}

.works_single .before-after02 span {
  display: block;
  width: 100%;
  color: white;
  letter-spacing: 2px;
  font-size: 16px;
  margin-bottom: .5em;
  text-align: center;
}

.works_single .before-after02 p {
  line-height: 1.5;
  border: 1px solid #ddd;
  padding: .5em;
  margin: .5em 0 0;
}

.works_single .before-after02 p span {
  display: inline-block;
  color: #127cc1;
  font-weight: bold;
  font-size: 1em;
}

.works_single .conclude {
  background: #f9f9f9;
  padding-bottom: .25em;
}

.works_single .conclude .img {
  border: 0;
  background: white;
}

.works_single .conclude h3 {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 1em;
}

.works_single .conclude p, .works_single .conclude .ul-num {
  padding: 0 1em;
}

.works_single .conclude ol {
  background: white;
  margin: 0 1em 1.5em;
  padding: .5em .5em .5em 2em;
  font-size: .8125em;
}

.works_single .conclude ol li {
  font-weight: bold;
}

.table-of-contents {
  max-width: 500px;
  margin: 0 auto 2em;
  padding: .5em 1em;
  border: 1px solid #ddd;
}

.table-of-contents p.ttl {
  font-weight: bold;
  margin-bottom: .5em;
  text-align: center;
  border-bottom: 1px solid;
}

.table-of-contents ul {
  list-style: disc;
  padding-left: 1em;
}

.table-of-contents a {
  font-size: .875em;
  text-decoration: underline;
  color: #127cc1;
}

.table-of-contents ul ul a {
  font-size: .75em;
}

.works_meta {
  border-top: 1px dashed #2A2A2A;
  border-bottom: 1px dashed #2A2A2A;
  padding: 1em;
  margin: 1em auto;
  max-width: 500px;
}

.works_meta .name {
  font-weight: bold;
}

.works_meta dl {
  display: table;
}

.works_meta dt, .works_meta dd {
  display: table-cell;
  font-size: .75em;
  vertical-align: top;
  padding: 10px 0;
  word-break: break-all;
}

.works_meta dt {
  width: 8em;
}

#map_canvas {
  height: 300px;
  width: 100%;
  margin-bottom: .5em;
}

.gm-style-iw * {
  display: block;
  width: 100%;
}

.gm-style-iw h4, .gm-style-iw p {
  margin: 0;
  padding: 0;
}

.gm-style-iw a {
  color: #4272db;
}

#map_canvas:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.comp_info {
  margin-bottom: 2em;
  margin-top: -2em;
  padding-top: 2em;
}

.comp_info_box {
  font-size: .75em;
}

.comp_info_box li span {
  line-height: 2;
  padding-left: 20px;
  padding-top: 2px;
  background-size: 16px;
}

.icon_add {
  background: url(../img/parts_add.svg) no-repeat left;
}

.icon_tel {
  background: url(../img/parts_tel.svg) no-repeat left;
}

.icon_fax {
  background: url(../img/parts_fax.svg) no-repeat left;
}

.icon_url {
  background: url(../img/parts_url.svg) no-repeat left;
}

.btn {
  padding: .5em;
  text-align: center;
  display: block;
}

.comp_info_btn .btn {
  font-size: .875em;
  background: #127cc1;
  color: #fff;
  padding: .25em 0;
  width: 8em;
  margin: 0 auto;
}

.comp_cont_box {
  font-size: .875em;
}

.footer_btn {
  padding: 2em 0 0;
}

.footer_btn ul {
  margin: 0 auto;
  max-width: 280px;
}

.footer_btn li {
  text-align: center;
  margin-bottom: 1em;
}

.footer_btn li a {
  display: block;
  padding: 1em;
}

.footer_btn li:first-child a {
  border: 3px solid #127cc1;
  text-align: center;
}

.footer_btn li img {
  width: 60%;
  height: auto;
}

.service:nth-child(even) {
  background: #F0F5F8;
}

.service_cont {
  padding: 0em 1em 2em;
  position: relative;
}

.service_cont h3 {
  font-weight: bold;
  font-size: 1.25em;
  margin-bottom: 1em;
  color: #127cc1;
}

.service_cont h4 {
  margin-bottom: .5em;
  font-size: .875em;
  font-weight: bold;
}

.service_cont p {
  font-size: .875em;
  margin-bottom: 1em;
}

.service div.plan_table, .service div.plan_eg_table {
  padding: 0;
}

.plan_table {
  margin: 3em 0;
  border: 1px solid #ddd;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

.plan_table h5 {
  background: #127cc1;
  color: #fff;
  width: 6em;
  text-align: center;
  padding: 4px 0;
  position: relative;
  margin: -1.5em 0 1em -1px;
}

.plan_table h5:after {
  position: absolute;
  content: '';
  display: block;
  background: url(../img/parts_plan_01.png) no-repeat;
  width: 35px;
  height: 40px;
  background-size: contain;
  right: -19px;
  bottom: -20px;
}

.plan_table dl {
  padding: 1em;
  overflow: hidden;
}

.plan_table dt, .plan_table dd {
  font-size: .8125em;
  padding-bottom: .5em;
}

.plan_table dt {
  clear: both;
  float: left;
  width: 60%;
  color: #878787;
}

.plan_table dd {
  float: left;
  width: 40%;
}

.plan_eg_table {
  border: 1px solid #ddd;
  padding-top: 2em;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

.plan_eg_table h5 {
  background: #127cc1;
  color: #fff;
  width: 6em;
  text-align: center;
  padding: 4px 0;
  position: relative;
  margin: -1.5em 0 2em -1px;
}

.plan_eg_table h5:after {
  position: absolute;
  content: '';
  display: block;
  background: url(../img/parts_plan_01.png) no-repeat;
  width: 35px;
  height: 40px;
  background-size: contain;
  right: -19px;
  bottom: -20px;
}

.plan_eg_table p {
  padding: 0 1em;
  margin-bottom: 0;
  display: inline-block;
  background: #2A2A2A;
  color: #fff;
  margin-left: 1em;
}

.plan_eg {
  margin-bottom: 1em;
  padding: 0 1em 1em;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}

.plan_eg:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.plan_eg dt, .plan_eg dd {
  font-size: .8125em;
  padding-bottom: .5em;
}

.plan_eg dt {
  clear: both;
  float: left;
  width: 30%;
  color: #878787;
}

.plan_eg dd {
  float: left;
  width: 70%;
}

.privacy {
  padding-top: 2em;
}

.privacy .cont_ttl img {
  height: 2em;
  margin-bottom: .5em;
}

.privacy_area {
  font-size: .875em;
}

.privacy_area dl {
  margin-bottom: 1em;
}

.privacy_area .title {
  font-weight: 700;
}

.privacy_area .caution {
  color: #127cc1;
  font-size: .8125em;
}

.privacy_area dt {
  padding: .5em 0;
}

.privacy_area dt span {
  color: #fff;
  background: #2A2A2A;
  padding: 4px;
  border-radius: 50%;
  margin-right: 4px;
}

.contact {
  padding-top: 2em;
  padding-bottom: 2em;
}

.contact_form_box {
  max-width: 420px;
  margin: 0 auto;
}

.contact_form_box dl {
  clear: both;
  padding: 1em .5em;
  border-bottom: 1px solid #ddd;
}

.contact_form_box dt, .contact_form_box dd {
  font-size: .875em;
}

.contact_form_box dt {
  margin-bottom: 8px;
}

.contact_form_box i {
  padding: 4px;
  margin-left: 4px;
  background: #EC5B2B;
  position: relative;
  top: -1px;
  font-size: .8125em;
  color: white;
}

.contact_form_box dd dl {
  border-bottom: 0;
}

.contact_form_box input[type="text"], .contact_form_box input[type="submit"], .contact_form_box textarea, .contact_form_box select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0;
}

.contact_form_box input[type="radio"] {
  margin: 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0;
}

.contact_form_box input[type="submit"] {
  background: #127cc1;
  color: white;
  font-size: .875em;
  padding: 1em;
}

.contact_form_box .form_submit {
  padding: 1em;
  text-align: center;
}

.contact_form_box .help_text {
  font-size: .8125em;
  color: #878787;
  padding-top: 8px;
}

.contact_form_box .help_text span {
  background: #ebe16f;
  padding: 2px 4px;
  margin-right: 4px;
}

.contact_form_box .err {
  color: #CA343C;
  font-size: .8125em;
}

.contact_form_box .comp_box {
  text-align: center;
  font-size: .875em;
}

.contact_form_box .comp_box p {
  margin-bottom: 1em;
}

.contact_form_box .comp_box a {
  display: block;
  width: 120px;
  background: #127cc1;
  margin: 0 auto;
  padding: 1em 0;
  color: white;
}

/*********************
FOOTER STYLES
*********************/
.footerbox {
  clear: both;
  background: #2A2A2A;
  padding-top: .5em;
}

.fmenu_inner {
  text-align: center;
  color: #ddd;
  font-size: .875em;
  margin-bottom: 1em;
}

.fmenu_inner li {
  font-weight: bold;
  line-height: 2.5;
}

.fmenu_inner .child_menu li {
  font-weight: normal;
}

.fmenu_inner .child_menu li a {
  /*color: #878787;*/
}

.fmenu_inner a {
  color: #ddd;
}

.copyright {
  background: #3263A5;
  color: #fff;
  display: block;
  text-align: center;
  padding: 1em 0;
  letter-spacing: .1em;
}

/*********************
LOADING MARK ... display tablet size up.
*********************/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  text-align: center;
  color: #2A2A2A;
  z-index: 2;
}

.brsp {
  display: block;
}

.brpc {
  display: none;
}

/* .nowLoading
--------------------------- */
.nowLoading {
  padding: 5px 0;
  width: 100%;
  text-align: center;
}

/* .loadMoreBtn
--------------------------- */
.loadMoreBtn {
  padding: 10px 0;
  width: 200px;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background: #127cc1;
}

/*********************
TABLET & SMALLER LAPTOPS
*********************/
@media only screen and (min-width: 768px) {
  /*********************
GENERAL STYLES
*********************/
  /*********************
LAYOUT & GRID STYLES
*********************/
  .wrap {
    max-width: 760px;
    margin: 0 auto;
  }
  /*********************
HEADER STYLES
*********************/
  /*********************
NAVIGATION STYLES
********************/
  .nav {
    float: right;
    width: 60%;
  }
  .nav ul {
    overflow: hidden;
    margin: 0;
    height: 60px;
  }
  .nav li a {
    padding-top: 40px;
  }
  .nav li a img {
    height: 28px;
  }
  /*********************
Contents
*********************/
  .brsp {
    display: none;
  }
  .row-tab {
    flex-direction: row;
  }
  .row-tab .arrow {
    padding: 0 .5em;
  }
  .row-tab .arrow img {
    transform: rotate(0deg);
  }
  .col .arrow img {
    transform: rotate(90deg);
  }
  .mb10sp, .mr10sp, .mb10sp, .ml10sp {
    margin: 0;
  }
  .mb10tab {
    margin-bottom: 10px;
  }
  .mr10tab {
    margin-right: 10px;
  }
  .mb10tab {
    margin-bottom: 10px;
  }
  .ml10tab {
    margin-left: 10px;
  }
  .hero_box {
    background: #127cc1;
  }
  .hero_box .hero_inner {
    height: 300px;
    max-width: 1040px;
    margin: 0 auto;
    background-image: url(../img/heropcbg2.png);
  }
  .heroSp {
    display: none;
  }
  .heroPc {
    display: block;
    margin: 0 auto;
  }
  .hero_sp {
    display: none;
  }
  .hero_pc {
    display: block;
    margin-top: 60px;
    background-color: #d1e1e6;
  }
  .hero_pc .hero_inner {
    max-width: 1000px;
    margin: 0 auto;
  }
  .parallax_img_pc {
    background-image: url(../img/heropcbg2.png);
  }
  .owl-item {
    opacity: .7;
    transition-duration: 1s;
  }
  .owl-item {
    max-height: 500px;
  }
  .owl-item.active {
    opacity: 1;
  }
  .owl-dots {
    text-align: center;
    padding-top: 8px;
  }
  .service .service_box {
    max-width: 100%;
  }
  .service .service_box div {
    padding: 2%;
  }
  .service .service_box li {
    float: left;
    width: 30%;
    margin: 0 1.5% 1em;
  }
  .service .service_box li:nth-child(4) {
    margin-left: 20%;
  }
  .service .service_box li:nth-child(5) {
    margin-left: 1.5%;
  }
  .service .service_box li a {
    font-size: 1.5em;
  }
  .service_cont {
    padding: 1em 1em 0;
    margin-bottom: 0em;
  }
  .service_cont h3 {
    font-size: 2em;
    margin-bottom: .3em;
  }
  .service:nth-child(even) .service_cont {
    padding-bottom: 2em;
    margin-bottom: 0;
  }
  .service_img {
    display: table;
  }
  .service_img img {
    display: table-cell;
    vertical-align: bottom;
  }
  .service:nth-child(even) .service_img img {
    right: auto;
    left: 0;
  }
  #plan .service_cont h4 {
    font-size: 1.25em;
  }
  .pack_type {
    margin: 2em 0;
  }
  .pack_type li {
    padding: 1em .5em;
  }
  #tabs {
    padding: .5em 1em;
  }
  .pack_price_list .tab li {
    padding: .75em 0;
    letter-spacing: 2px;
    font-weight: bold;
  }
  .pack_price_list .tab_container {
    padding: 0;
  }
  .pack_price_list .tabContent > p {
    width: 32%;
    margin: 1em 0;
  }
  .pack_price_list .site_type h6 {
    letter-spacing: 1px;
  }
  .plan_table dl {
    padding: 0 1em 1em;
  }
  .plan_table dt, .plan_table dd {
    padding: 1em 0;
    border-bottom: 1px solid #eee;
  }
  .plan_table dt {
    width: 40%;
  }
  .plan_table dd {
    width: 60%;
  }
  .plan_eg dt {
    width: 24%;
  }
  .plan_eg dd {
    width: 76%;
  }
  .credit {
    margin-top: 3em;
  }
  .credit h4 {
    font-size: 1.25em;
  }
  .credit li {
    margin-bottom: 0;
  }
  .mitumori_btn {
    padding: 1em 0;
  }
  .design_eg, .works {
    margin-bottom: 3em;
  }
  .design_eg li, .works li {
    animation-delay: .8s;
  }
  .design_eg li:nth-child(2), .works li:nth-child(2) {
    animation-delay: 1s;
  }
  .design_eg li:nth-child(3), .works li:nth-child(3) {
    animation-delay: 1.2s;
  }
  .design_eg li:nth-child(4), .works li:nth-child(4) {
    animation-delay: 1.4s;
  }
  .eg_box ul, .works_box ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
  }
  /*.eg_box li, */.works_box li {
    width: 46%;
    margin: 0 2% 2em;
  }
  /*.eg_box li div,*/ .works_box li div {
    margin: 0 0 1em;
  }
  .eg_box li a, .works_box li a {
    display: block;
  }
  .eg_box li p, .works_box li p {
    margin: 0;
  }
  .works .works_link a {
    font-size: .875em;
    letter-spacing: 1px;
  }
  .works_single {
    margin-top: 80px;
  }
  .works_single section {
    margin-bottom: 3em;
  }
  .works_single h4 span {
    display: inline-block;
    margin-left: 1em;
  }
  .works_single .row-tab {
    justify-content: center;
  }
  .works_single .row-tab.justify-space-between {
    justify-content: space-between;
  }
  .works_single .row-tab .img {
    margin-left: 3%;
    min-width: 40%;
  }
  .works_single .before-after ul {
    align-items: center;
  }
  .works_single .before-after02 {
    align-items: flex-start !important;
  }
  .works_single .before-after02 li.arrow {
    align-self: center;
    width: 50px;
  }
  .works_single .before-after02 li {
    width: 40%;
  }
  .works_single .cat-stats {
    flex-wrap: wrap;
  }
  .works_single .cat-stats table {
    width: 49%;
  }
  .works_single .review {
    display: none;
  }
  .works_single .dl01 {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
  }
  .works_single .dl01 dt {
    width: 36%;
    text-align: right;
  }
  .works_single .dl01 dd {
    width: 62%;
    text-align: left;
  }
  .table-of-contents p.ttl {
    font-size: 1em;
  }
  #map_canvas:before {
    display: none;
  }
  .comp_info {
    margin-bottom: 2em;
  }
  .comp_info_box li {
    text-align: center;
  }
  .contact_form_box {
    max-width: 100%;
  }
  .contact_form_box dl {
    clear: both;
  }
  .contact_form_box dt {
    float: left;
    width: 30%;
    margin-top: 8px;
  }
  .contact_form_box dt span {
    display: block;
  }
  .contact_form_box input, .contact_form_box select {
    max-width: 50%;
  }
  .contact_form_box textarea {
    max-width: 70%;
  }
  .contact_form_box label {
    font-size: 14px;
    position: relative;
    top: 2px;
  }
  .contact_form_box label input[type="radio"] {
    margin-right: 8px;
  }
  .contact_form_box .help_text {
    margin-left: 30%;
  }
  .contact_form_box .confirm dl {
    min-height: 54px;
  }
  .contact_form_box .confirm dt {
    margin: 0;
  }
  .contact_form_box .confirm dd {
    margin-left: 30%;
  }
  /*********************
FOOTER STYLES
*********************/
  .footerbox {
    overflow: hidden;
  }
  .fmenu_inner {
    float: left;
    width: 50%;
    text-align: left;
  }
  .copyright {
    clear: both;
  }
  .brsp {
    display: none;
  }
  .brpc {
    display: block;
  }
}

/*********************
DESKTOP
*********************/
@media only screen and (min-width: 1024px) {
  .wrap {
    max-width: 1040px;
    margin: 0 auto;
  }
  /*********************
HEADER STYLES
*********************/
  /*********************
NAVIGATION STYLES
********************/
  .nav {
    width: 40%;
  }
  .nav li a {
    padding-top: 40px;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .nav li a:hover {
    background-image: url(../img/parts_menu1h.svg);
    color: #127cc1;
  }
  .nav li.menu-sample a:hover {
    background-image: url(../img/parts_menu2h.svg);
  }
  .nav li.menu-company a:hover {
    background-image: url(../img/parts_menu3h.svg);
  }
  .nav li.menu-works a:hover {
    background-image: url(../img/parts_menu4h.svg);
  }
  .brsp {
    display: none;
  }
  .brtab {
    display: none;
  }
  .brpc {
    display: block;
  }
  .sp-img {
    display: none;
  }
  .pc-img {
    display: block;
  }
  .hero_box .hero_inner {
    background-size: auto;
    background-attachment: fixed;
    background-position: center 60px;
  }
  .hero_pc .parallax {
    background-attachment: fixed;
  }
  .it-certificate a {
    transition: .5s;
  }
  .it-certificate a:hover {
    opacity: .7;
  }
  .service .service_box {
    width: 80%;
    margin: 0 auto 3em;
    padding-top: 3em;
  }
  .service .service_box li {
    margin: 0 3% 1em;
    width: 27.3%;
  }
  .service .service_box li a {
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .service .service_box li a img {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .service .service_box li a:hover {
    color: #fff;
  }
  .service .service_box li a:hover img {
    opacity: 0;
  }
  .service .service_box li a:hover h4 {
    text-shadow: 0 0 5px black;
  }
  .service .service_box li a h4.line2 {
    margin-top: -.5em;
  }
  .service .ser_seisaku a {
    background-image: url(../img/parts_web_btnh.png);
  }
  .service .ser_cms a {
    background-image: url(../img/parts_cms_btnh.png);
  }
  .service .ser_seo a {
    background-image: url(../img/parts_seo_btnh.png);
  }
  .service .ser_policy a {
    background-image: url(../img/parts_pol_btnh.png);
  }
  .service .ser_plan a {
    background-image: url(../img/parts_plan_btnh.png);
  }
  .service_box li {
    animation-delay: .8s;
  }
  .service_box li:nth-child(2) {
    animation-delay: 1s;
  }
  .service_box li:nth-child(3) {
    animation-delay: 1.2s;
  }
  .service_box li:nth-child(4) {
    animation-delay: 1.4s;
  }
  .service_box li:nth-child(5) {
    animation-delay: 1.6s;
    margin-left: 3%;
  }
  .service_cont {
    padding: 1em 1em 2em;
    margin-bottom: 1em;
    overflow: hidden;
  }
  .service_cont h4 {
    font-size: 1em;
  }
  #plan .service_cont h4 {
    font-size: 1.5em;
    border-left-width: 4px;
  }
  .pack_type {
    margin: 1.5em 0 2em;
  }
  .pack_type li {
    font-size: .875em;
    padding: 1.5em .5em 1em;
  }
  .pack_type .pack_name {
    padding-bottom: 1em;
    margin-bottom: .5em;
    font-weight: bold;
  }
  #tabs {
    padding: 1em 2em;
    margin-bottom: 4em;
  }
  .pack_price_list h5 {
    font-size: 1.125em;
    padding-top: .5em;
  }
  .pack_price_list .tab li {
    font-size: 1em;
    border-width: 2px;
  }
  .pack_price_list .tab li.active:after {
    border-top-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
    bottom: -10px;
    margin-left: -5px;
  }
  .pack_price_list .tabContent > p {
    padding: .5em;
  }
  .pack_price_list .site_type h6 {
    font-size: .9125em;
  }
  .pack_price_list .site_type li {
    font-size: .8125em;
    padding: .25em 0;
  }
  .plan_table {
    float: left;
    width: 48%;
    margin-right: 4%;
  }
  .plan_table h4 {
    width: 100px;
    padding: 8px 0;
    margin: -2em 0 2em -1px;
  }
  .plan_table dt, .plan_table dd {
    font-size: .8125em;
    padding-bottom: 1em;
  }
  .plan_table dt {
    width: 60%;
  }
  .plan_table dd {
    width: 40%;
    font-size: .875em;
    padding: .85em 0;
  }
  .plan_eg_table {
    margin-top: 3em;
    float: left;
    width: 48%;
  }
  .plan_eg_table h4 {
    width: 100px;
    padding: 8px 0;
    margin: -2em 0 2em -1px;
  }
  .plan_eg dt {
    width: 20%;
  }
  .plan_eg dd {
    width: 80%;
  }
  .mitumori_btn a {
    transition-duration: .7s;
    font-size: 1.25em;
  }
  .mitumori_btn a:hover {
    background: #0e5e92;
  }
  .credit {
    padding: 3em 0;
  }
  .design_eg, .works {
    margin-bottom: 4em;
  }
  .design_eg .btn, .works .btn {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .design_eg .btn:hover, .works .btn:hover {
    background: #0e5e92;
  }
  /*.eg_box li,*/ .works_box li {
    float: left;
    width: 31%;
    margin: 0 1% 3em;
  }
  .eg_box li .img, .works_box li div {
    height: 250px;
  }
  .eg_box img, .works_box img {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .works_box img:hover {
    opacity: .7;
  }
  .eg_box .price-smpl .sankou, .works_box .price-smpl .sankou {
    font-size: .75em;
  }
  .eg_box .price-smpl .price, .works_box .price-smpl .price {
    font-size: 1.25em;
  }
  .works_single {
    margin-top: 90px;
  }
  .works_single .lead, .works_single .contents {
    padding: 0 3.50876%;
  }
  .works_single .works_ttl {
    font-size: 1.75em;
  }
  .works_single ul {
    margin: 1.5em 0;
  }
  .works_single ul ul {
    margin: 0;
  }
  .works_single p, .works_single .list01, .works_single .list02 {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
  }
  .works_single p {
    font-size: .875em;
  }
  .works_single h3 {
    font-size: 1.5em;
    margin: 3em auto 1em;
    padding: .5em 1em;
  }
  .works_single h4 {
    font-size: 1.25em;
    margin: 2em 0 1em;
  }
  .works_single table th, .works_single table td {
    font-size: .875em;
  }
  .works_single .dl01 dt, .works_single .dl01 dd {
    font-size: .875em;
  }
  .works_single .list01 {
    padding: .5em 0em .5em 2em;
  }
  .works_single .shisaku02 span.tag {
    width: 80px;
    height: 80px;
    top: -24px;
    left: -20px;
    border-radius: 40px;
    font-size: 1.125em;
    line-height: 80px;
  }
  .works_single .conclude .list02 {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
    padding: .5em 0 .5em 2em;
    font-size: .9125em;
  }
  .works_single .works_meta ul {
    margin: 0;
  }
  .table-of-contents {
    max-width: 700px;
    margin: 4em auto -2em;
    padding: 1em 2em;
  }
  .table-of-contents p.ttl {
    font-size: 1em;
  }
  .table-of-contents ul {
    margin: 0;
    padding: 0 3em;
  }
  .table-of-contents li {
    padding: .25em 0;
  }
  .table-of-contents a {
    font-size: .9125em;
  }
  .table-of-contents ul ul a {
    font-size: .875em;
  }
  .works_hero {
    margin-bottom: 3em;
  }
  .comp_info {
    margin-bottom: 4em;
  }
  .comp_info_btn .btn {
    font-size: .875em;
    padding: .25em 0;
    width: 10em;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .comp_info_btn .btn:hover {
    background: #0e5e92;
  }
  .footer_btn ul {
    margin: 0 auto;
    max-width: 360px;
  }
  .footer_btn li {
    text-align: center;
    margin-bottom: 1em;
  }
  .footer_btn li a {
    display: block;
    font-size: 20px;
    padding: 1em;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .footer_btn li a:hover {
    opacity: .7;
  }
  .footer_btn li:first-child a {
    border: 3px solid #127cc1;
    text-align: center;
  }
  .footer_btn li:first-child a:hover {
    background: #127cc1;
    color: white;
    opacity: 1;
  }
  .footer_btn li img {
    width: 60%;
  }
  .contact_form_box {
    max-width: 760px;
    margin: 0 auto;
  }
  /*********************
FOOTER STYLES
*********************/
  .fmenu_inner {
    width: 25%;
  }
  .fmenu_inner .child_menu li {
    font-weight: normal;
  }
  .fmenu_inner .child_menu li a {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .fmenu_inner .child_menu li a:hover {
    color: #127cc1;
  }
  .fmenu_inner a {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
  }
  .fmenu_inner a:hover {
    color: #127cc1;
  }
  .copyright {
    clear: both;
  }
}

/*********************
PRINT STYLESHEET
*********************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline;
  }
  a:after, a:visited:after {
    content: " (" attr(href) ")";
  }
  a abbr[title]:after, a:visited abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr, img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none;
  }
}

/*2021 add*/
.eg_box .img{
  border:1px solid #ccc;
}
.eg_box .img-link{
  display:flex;
  margin:0;
}
.eg_box > ul > li{
  margin-bottom:  5em;
  padding:0 1em;
}
.eg_box .img-link li{
  width:50%;
}
.eg_box .img-link li a{
  display: block;
  padding:.75em 1em;
  background:#3263A5;
  color:white !important;
  text-align: center;
  font-size:.875rem;
}
.smpl-price table{
  width:100%;
}
.smpl-price th{
  background: #d7edfb;
  color: #0e5e92;
  text-align: center;
  padding: .5em 1em;
  letter-spacing: 1px;
  font-weight: normal;
  font-size:.75rem;
}
.smpl-price td .device{
  display: inline-block;
  background: #3263A5;
  color: white !important;
  padding:.25em;
  text-align: center;
  width:4em;
  font-size:.75rem;
  margin-bottom: .5em;
}
.smpl-price td .device.sp{
  background: #2A2A2A;
  margin-bottom: 0;
}
.smpl-price td{
  background:#f9f9f9;
  padding:.5em;
  text-align: center;
}
.smpl-price td span.price{
  display: inline-block;
  background:transparent;
  padding:.25em !important  ;
  line-height:  1;
  position:relative;
  top:.2em;
  font-size:1.3rem;
  font-weight: normal;
}
.smpl-price td span.price:before{
  content: '￥';
  display: inline-block;
  font-size: 80%;
  vertical-align: baseline;  
}
.eg_box .img-link li:nth-child(2) a{
  background:#2A2A2A;
}
@media only screen and (min-width:768px) {
  .eg_box > ul > li{
    width:50%;
    padding:0 2.5%;
  }
  .smpl-price th{
    font-size:.875rem;
  }
}
@media only screen and (min-width: 1024px) {
  .eg_box > ul > li{
    width:33.333%;
  }
  .eg_box .img-link li a{
    font-size:.8125rem;
  }
  .eg_box .img-link li a:hover{
    opacity:.7;
  }
  .eg_box .img .spimg img{
    width:50% !important;
    height: auto !important;
  }
}
.smpl-price{
  letter-spacing:.05em;
}
.smpl-price dl{
  margin:0;
}
.set-price-plan{
  width: 100%;
  text-align: center;
  /*border-bottom:1px solid #CA343C;*/
  border-bottom:1px solid #34b5ca;
  border-bottom:1px solid #ff9800;
  /*border-bottom:1px solid #ff9c07;*/
  font-weight: bold;
}
.set-price-plan .set-ttl{
  /*background:#CA343C;*/
  /*background:#34b5ca;*/
  background:#ff9800;
  /*background:#ff9c07;*/
  width: 100%;
  color:white;
  padding:.3em 0 .2em;
}
.set-price-plan .set-price{
  width: 100%;
  padding:.3em 0 .2em;
  background:#fff1ae;
  font-size:1.25em;
}
.smpl-price dd::before{
  content:'￥';
}
.smpl-price .price{
  display: table;
  width:100%;
  vertical-align: middle;
}
.smpl-price .price dt,.smpl-price .price dd{
  display: table-cell;
  padding:.75em 1em .4em;
  font-size:.9125em;
  line-height: 1;
}
.smpl-price .price{
  background:#f9f9f9;
  border-bottom:1px solid #ccc;
}
.smpl-price .price dt{
  text-align: right;
  width:45%;
}
.smpl-price .price dd{
  width:55%;
}

@media only screen and (min-width: 1024px) {
  .set-price-plan .set-price{
    font-size:1.25em;
  }
  .pc-price dt,.pc-price dd,.sp-price dt,.sp-price dd{
    font-size:.9125em;
  }
}
.works_box .more-btns{
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  gap:1em;
}
.works_box .more-btns .btn{min-width:220px;margin:0}