/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block;
}

/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

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

/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] {
  display: none;
}

/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

html, html a {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea {
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "sans-serif";
}

/* * Addresses margins handled incorrectly in IE 6/7. */
body {
  margin: 0;
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "sans-serif";
  background: #f3f5f8;
}

/* ==========================================================================
Links
========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus {
  outline: thin dotted;
}

/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover {
  outline: 0;
}

/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
  color: #353535;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1.7em;
  font-weight: bold;
}

h5 {
  font-size: 1em;
  margin: 0.83em 0;
  font-weight: bold;
}

h6 {
  font-size: 1.7em;
  margin: 2.33em 0;
}

/*  オリジナル */
.fc-w {
  color: #fff
}

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

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

blockquote {
  margin: 1em 40px;
}

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

/* * Addresses styling not present in IE 6/7/8/9. */
mark {
  background: #ff0;
  color: #000;
}

/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}

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

/* * Addresses CSS quotes not supported in IE 6/7. */
q {
  quotes: none;
}

/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after {
  content: '';
  content: none;
}

small {
  font-size: 75%;
}

/* * Prevents `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 IE 6/7. */
dl, menu, ol, ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul {
  padding: 0 0 0 0px;
}

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

/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

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

/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
figure {
  margin: 0;
}

figure p {
  height: 30px;
}

/* ==========================================================================
Forms
========================================================================== */
/* * Corrects margin displayed oddly in IE 6/7. */
form {
  margin: 0;
}

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

/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */
button, input, select, textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}

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

/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */
button, html input[type="button"],
/* 1 */
input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */
}

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

/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `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;
}

/* * Removes 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;
}

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

/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves 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;
}

/* ==========================================================================
Global Styles
========================================================================== */
a {
  color: #353535;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

a:focus, *:focus {
  outline: none;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

p {
  color: #333;
  line-height: 1.5em;
  font-size: 1em;
}

h2 {
  font-size: 1em;
  color: #353535;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 20px;
}

/* * タイトル後のライン */
h2::after {
  content: " ";
  border: solid 2px #d1bada;
  display: block;
  width: 100%;
  margin: 5px auto;
}

.fs3 {
  width: 300px;
  font-size: 2em;
  margin: 0 auto;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  border: solid 1px #fff;
  padding: 10px 0px 10px 0px;
  margin-top: -75px;
}

.lh01 {
  margin-top: 2px;
  margin-bottom: 3px;
}

.lh02 {
  line-height: 1.5em;
  text-align: center;
}

.lh03 {
  line-height: 1.5em;
}

.lh04 {
  line-height: 2em;
}

.lh05 {
  line-height: 1.2em;
}

.shop {
  margin-bottom: 30px;
}

.shop_im {
  width: 50%;
  float: left;
  padding: 10px;
  margin-bottom: 10px;
}

.kana {
  margin-top: 0px;
}

.shop_bg {
  height: auto;
  margin-top: 30px;
  padding: 20px;
  border: solid 0px #ccc;
  background-color: #fff;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  overflow: hidden;
  margin-bottom: 0px;
}

.shop_bg p {
  margin-left: -10px;
}

.info_bg {
  height: 200px;
  margin-top: 30px;
  padding: 20px;
  border: solid 0px #ccc;
  background-color: #fff;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  overflow: hidden;
  margin-bottom: 0px;
}

.info_bg2 {
  height: auto;
  margin-top: 30px;
  padding: 20px;
  border: solid 0px #ccc;
  background-color: #fff;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  overflow: hidden;
  margin-bottom: 0px;
}

.info_bg p, .info_bg2 p {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
}

@media (max-width: 1100px) {
  .shop_bg {
    height: 250px;
  }
}

@media (max-width: 640px) {
  .info_bg, .info_bg2 {
    padding: 10px;
    margin-top: 15px;
  }

  .info_bg {
    height: 170px;
    padding: 10px;
  }

  .info_bg h2, .info_bg2 h2 {
    font-size: 0.95em;
    color: #333;
  }

  .info_bg p, .info_bg2 p {
    font-size: 0.9em;
    color: #333;
  }

  .info_bg2 {
    height: 370px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .info_bg {
    height: auto;
    padding: 10px;
  }

  .info_bg2 {
    height: auto;
    padding: 10px;
  }
}

.fc01 {
  /* フォント赤 */
  color: #FF0000;
}

.hr01 {
  /* ドット水平線 */
  border: 2px dotted #ccc;
  margin-top: 30px;
  margin-bottom: 30px;
}

.btn1 {
  font-size: 16px;
  border-radius: 40px;
  color: #333;
  background-color: #ccc;
  display: inline-block;
  text-align: center;
  font-weight: 400;
  margin-top: 50px;
}

.btn2 {
  font-size: 16px;
  border-radius: 40px;
  color: #fff;
  background-color: rgba(114, 71, 152, 1);
  display: inline-block;
  text-align: center;
  font-weight: 400;
}

.btn2:hover, .btn2:focus {
  color: #fff;
  border-color: rgba(114, 71, 152, 0.5);
  background-color: rgba(114, 71, 152, 0.5)
}

.btn3 {
  width: 100%;
  font-size: 13px;
  border-radius: 5px;
  color: #d7d8d5;
  background-color: rgba(220, 224, 230, 0.1);
  display: inline-block;
  text-align: center;
  margin-top: 10px;
  padding: 8px 0px;
}

.btn3:hover, .btn3:focus {
  color: #333;
  background-color: rgba(220, 224, 230, 1)
}

.btn2-small {
  padding: 8px 20px;
  margin-bottom: 10px
}

.btn-middle {
  margin-bottom: 10px;
  padding: 10px 40px;
}

.btn-large {
  width: 240px;
  margin-bottom: 10px;
  padding: 10px 40px;
  color: #fff;
}

.section-padding {
  padding: 40px 0px 40px 0px
}

.section-padding2 {
  padding: 80px 0px 40px 0px
}

.section-padding3 {
  padding: 40px 0px 100px 0px
}

.section-padding4 {
  padding: 100px 0px 100px 0px
}

.section-padding5 {
  padding: 200px 0px 0px 0px
}

.section-padding6 {
  padding: 100px 0px 0px 0px
}

.section-padding7 {
  padding: 0px 0px 200px 0px
}

@media (max-width:768px) {
  .section-padding4 {
    padding: 30px 0px 30px 0px
  }

  .section-padding5 {
    padding: 80px 0px 0px 0px
  }
}

@media (max-width:540px) {
  .section-padding4 {
    padding: 30px 0px 30px 0px
  }

  .section-padding5 {
    padding: 50px 0px 0px 0px
  }
}

.dark-bg {
  background: #f3f5f8;
}

.waku {
  height: 200px;
  padding: 20px;
  border: solid 0px #ccc;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  overflow: hidden;
  margin: 2%;
}

.waku2 {
  width: auto;
  padding: 35px;
  border: solid 0px #ccc;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  overflow: hidden;
  margin-top: 70px;
}

@media (max-width:1000px) {
  .waku {
    height: 210px;
    padding: 20px;
    margin: 1%;
  }

  .waku p {
    font-size: 0.9em
  }
}

@media (max-width:846px) {
  .waku {
    height: 230px;
    padding: 15px;
    margin: 1%;
  }
}

@media (max-width:767px) {
  .waku {
    height: auto;
    padding: 20px;
    margin-bottom: 20px;
  }

  .waku h5 {
    margin: 5px 0;
  }

  .waku p {
    font-size: 0.9em
  }
}

/* トップページ情報コメントタイトル*/
.info_come {
  height: 50px;
  border-bottom: solid 4px rgba(106, 25, 23, 0.2);
}

.light-bg {
  background-color: #fff;
}

.dark-box {
  background: #f3f5f8;
  -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
  -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
  box-shadow: 0px 3px 0px 0px #f0f2f4;
}

/* ==========================================================================
Contact
========================================================================== */
.up-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  background: rgba(61, 201, 179, 0.8);
  display: block;
  margin: 0 auto;
  color: #fff;
  font-size: 18px;
  line-height: 46px;
  text-align: center;
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.up-btn:hover, up-btn:focus {
  color: #fff;
  background: rgba(61, 201, 179, 1);
}

.contact-details {
  margin: 20px 0;
}

.contact-details h2 {
  font-size: 20px;
}

.contact-details h2 span {
  display: block;
  color: #3dc9b3;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  margin-top: 15px;
}

.contact-wrap {
  position: relative;
}

.light-box {
  background-color: #fff;
  -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
  -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
  box-shadow: 0px 3px 0px 0px #f0f2f4;
  padding: 3% 10%;
  height: 280px;
  overflow: hidden;
  margin-bottom: 10px;
}

.light-box:hover, .light-box:focus {
  -webkit-box-shadow: 0px 3px 0px 0px #e19f58;
  -moz-box-shadow: 0px 3px 0px 0px #e19f58;
  box-shadow: 0px 3px 0px 0px #e19f58;
}

.light-box2 {
  background-color: #fff;
  -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
  -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
  box-shadow: 0px 3px 0px 0px #f0f2f4;
  padding: 0px 5px;
  height: 80px;
  overflow: hidden;
  margin-bottom: 20px;
}

.light-box2 p {
  line-height: 1.3em;
  display: table-cell;
  vertical-align: middle;
  height: 80px;
}

.light-box2 img {
  margin-top: 15px;
  width: 50px;
}

.camera {
  background-color: #fff;
  -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
  -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
  box-shadow: 0px 3px 0px 0px #f0f2f4;
  padding: 0% 10%;
  height: 280px;
  overflow: hidden;
  margin-bottom: 10px;
}

.camera h5 {
  margin-top: -40px;
  color: #333;
}

.camera:hover, .camera:focus {
  -webkit-box-shadow: 0px 3px 0px 0px #e19f58;
  -moz-box-shadow: 0px 3px 0px 0px #e19f58;
  box-shadow: 0px 3px 0px 0px #e19f58;
}

@media (max-width:991px) {
  .light-box, .light-box2 {
    padding: 3% 5%;
  }

  .light-box h5 {
    padding: 0% 5%;
  }
}

@media (max-width:767px) {
  .light-box {
    height: auto;
  }

  .light-box h5 {
    padding: 0% 5%;
  }

  .light-box2 {
    height: 80px;
    padding: 0px 5px;
    margin-top: 10px;
  }

  .light-box2 p {
    color: #333;
    line-height: 1em;
    height: 80px;
  }

  .light-box2 img {
    width: 60px;
    ;
    margin-top: 12px;
  }

  .camera {
    height: 580px;
    padding: 3% 5%;
    margin-bottom: 30px;
  }
}

@media (max-width:640px) {
  .camera {
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
    -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
    padding: 0% 0%;
    height: 500px;
    overflow: hidden;
    margin-bottom: 30px;
  }

  .camera h5 {
    margin-top: -30px;
    color: #333;
  }

  .light-box2 {
    height: 60px;
    padding: 0px 5px;
    margin-top: 10px;
  }

  .light-box2 p {
    color: #333;
    line-height: 1em;
    height: 60px;
  }

  .light-box2 img {
    width: 80%;
    margin-top: 5px;
  }
}

@media (max-width:590px) {
  .camera {
    height: 450px;
  }

  .light-box2 {
    padding: 5px 5px;
    height: 70px;
  }

  .light-box2 img {
    width: 40px;
    margin-top: 12px;
  }
}

@media (max-width:550px) {
  .camera {
    height: 420px;
  }
}

@media (max-width:480px) {
  .camera {
    height: 380px;
  }
}

@media (max-width:420px) {
  .camera {
    height: 350px;
  }
}

@media (max-width:360px) {
  .camera {
    height: 300px;
  }

  .light-box2 {
    padding: 5px 5px;
    height: 70px;
  }

  .light-box2 img {
    width: 40px;
    margin-top: 12px;
  }
}

.light-box2:hover, .light-box2:focus {
  -webkit-box-shadow: 0px 3px 0px 0px #e19f58;
  -moz-box-shadow: 0px 3px 0px 0px #e19f58;
  box-shadow: 0px 3px 0px 0px #e19f58;
}

.box-hover {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.box-hover:hover, .box-hover:focus {
  transform: translate(0, -15px);
  -webkit-transform: translate(0, -15px);
  -ms-transform: translate(0, -15px);
}

.wrapper {
  height: 650px;
}

.nopadding {
  padding: 0;
}

.inner {
  padding-top: 170px;
}

/* ==========================================================================
Navigation
========================================================================== */
nav {
  background-color: #000;
  height: 100%;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  color: rgba(255, 255, 255, 1);
  display: block;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  padding-left: 0;
  position: relative;
}

nav ul li:last-child {
  border: none;
}

nav ul li a {
  color: rgba(255, 255, 255, 1);
  display: block;
  padding: 20px;
  font-size: 18px;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  padding-left: 0;
  position: relative;
}

nav ul li a:hover, nav ul li a:focus {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}

#nav-toggle {
  position: absolute;
  right: 15px;
  top: 0;
  z-index: 10000;
}

#nav-toggle {
  cursor: pointer;
  padding: 0px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  -o-border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
}

#nav-toggle span:before {
  top: -10px;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: translateY(-10px) rotate(-45deg);
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  top: 10px;
}

.navicon {
  position: relative;
  height: 26px;
  margin-bottom: 10px;
  z-index: 10000;
}

.indicator {
  position: absolute;
  right: 0 !important;
}

.pull {
  display: none;
}

/* ==========================================================================
ヘッダー
========================================================================== */
.top_h {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: #c49a6a;
  overflow: auto;
}

.top_h h1 {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 40px 0px 0px 20px;
  color: #f8f3f3;
  display: inline-block;
}

.top_h h3 {
  font-size: 20px;
  color: #f8f3f3;
  display: inline-block;
  margin-top: 5px;
}

.top_h p {
  font-size: 20px;
  letter-spacing: 1px;
  color: #f8f3f3;
  margin: 0px 0px 0px 20px;
}

.col-h01 {
  width: 100%;
}

.col-h02 {
  width: 70%;
  float: left;
}

.col-h03 {
  width: 30%;
  float: right;
}

.col-h04 {
  width: 90px;
  float: none;
  margin: 0 auto;
}

.col-h05 {
  width: 100%;
  float: none;
  text-align: center;
}

/*  */
.col-f01 {
  width: 350px;
  float: left;
  margin: 5px 0px 0px 20px;
}

.col-f02 {
  width: 100px;
  float: left;
}

.col-f02 img {
  height: 70px;
}

.col-f03 {
  width: 250px;
  float: left;
  margin: 25px 0px 0px 0px;
}

.col-f03 img {
  height: 25px;
}

.col-f04 {
  width: 450px;
  float: right;
  margin: 15px 0px 0px 0px;
}

.col-f05 {
  width: 55px;
  float: left;
}

.col-f05 img {
  height: 50px;
}

.col-f06 {
  width: 370px;
  float: left;
  margin: -40px 0px 0px 0px;
}

@media screen and (max-width: 980px) {

  /*  */
  .col-f01 {
    width: 280px;
    float: left;
    margin: 5px 0px 0px 15px;
  }

  .col-f02 {
    width: 70px;
    float: left;
  }

  .col-f02 img {
    height: 60px;
  }

  .col-f03 {
    width: 190px;
    float: left;
    margin: 20px 0px 0px 10px;
  }

  .col-f03 img {
    height: 20px;
  }

  .col-f04 {
    width: 340px;
    float: right;
    margin: 15px 0px 0px 0px;
  }

  .col-f05 {
    width: 60px;
    float: left;
  }

  .col-f05 img {
    height: 40px;
  }

  .col-f06 {
    width: 280px;
    float: left;
    margin: -40px 0px 0px 0px;
  }
}

@media screen and (max-width: 640px) {
  .top_h h1 {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 10px 0px 0px 0px;
  }

  .top_h p {
    font-size: 16px;
    margin: 5px 0px 0px 0px;
    line-height: 1.2em;
  }

  .top_h h3 {
    font-size: 16px;
    color: #f8f3f3;
    display: inline-block;
    margin-top: 25px;
  }

  .col-h02 {
    width: 100%;
    float: left;
    padding-left: 0px;
    text-align: center;
  }

  .col-h03 {
    width: 100%;
    float: left;
    margin: 0 auto;
  }

  .col-h04 {
    width: 70px;
    float: left;
    padding-left: 20px;
    padding-bottom: 5px;
  }

  .col-h05 {
    width: 40%;
    float: left;
    text-align: left;
    padding-left: 10px;
  }

  .col-h06 {
    width: 30%;
    float: right;
    margin-top: 20px;
    margin-right: 15px;
  }

  /*  */
  .col-f01 {
    width: 280px;
    float: left;
    margin: 5px 0px 0px 15px;
  }

  .col-f02 {
    width: 70px;
    float: left;
  }

  .col-f02 img {
    height: 60px;
  }

  .col-f03 {
    width: 190px;
    float: left;
    margin: 20px 0px 0px 10px;
  }

  .col-f03 img {
    height: 20px;
  }

  .col-f04 {
    width: 300px;
    float: none;
    margin: 0 auto;
    padding-top: 15px;
  }

  .col-f05 {
    width: 50px;
    float: left;
  }

  .col-f05 img {
    height: 30px;
  }

  .col-f06 {
    width: 220px;
    float: left;
  }

  .col-f07 {
    width: 70px;
    float: right;
    margin-top: 0px;
    margin-right: 0px;
  }
}

@media screen and (max-width: 480px) {

  /*  */
  .col-f01 {
    width: 220px;
    float: left;
    margin: 5px 0px 0px 15px;
  }

  .col-f02 {
    width: 50px;
    float: left;
  }

  .col-f02 img {
    height: 45px;
  }

  .col-f03 {
    width: 150px;
    float: left;
    margin: 13px 0px 0px 10px;
  }

  .col-f03 img {
    height: 15px;
  }

  .col-f07 {
    width: 70px;
    float: right;
    margin-top: -10px;
    margin-right: -10px;
  }
}

.menu_a {
  width: 100%;
  height: 3px;
  background-color: #6a1917;
}

.menu_b {
  width: 100%;
  height: 50px;
  background-color: #e6eae6;
}

.menu_c {
  width: 100%;
  height: 55px;
  background-color: #fff;
}

.menu_d {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

@media screen and (max-width: 640px) {
  .menu_c {
    display: none;
  }
}

/* ==========================================================================
ページトップ　画像
========================================================================== */
.top {
  background: url('../img/top_2018_3.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 500px 0 300px 0;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
}

.top_wrapper {
  z-index: -10;
  background: #efefef;
  width: 100%;
  margin: 0 auto;
}

.top_img {
  max-width: 1200px;
  margin: 0 auto;
}

.bace {
  background: url('../img/header.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 65px 0 300px 0;
  height: 300px;
}

.uma_back {
  background: url('../img/uma_back.png') no-repeat center center;
  height: 80px;
}

@media screen and (max-width: 640px) {
  .uma_back {
    background: none;
  }
}

@media screen and (max-width: 480px) {
  .uma_back img {
    height: 30px;
  }
}

@media screen and (max-width: 480px) {
  .uma_back img {
    height: 30px;
  }
}

.learn-more-btn {
  background: rgba(61, 201, 179, 1);
  padding: 20px 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  -webkit-box-shadow: 0px 3px 0px 0px #309383;
  -moz-box-shadow: 0px 3px 0px 0px #309383;
  box-shadow: 0px 3px 0px 0px #309383;
  margin: 60px 0 0;
  font-weight: bold;
}

.learn-more-btn:hover, .learn-more-btn:focus {
  background: rgba(61, 201, 179, 0.6);
  color: #fff;
}

/* ==========================================================================
Intro
========================================================================== */
.intro p {
  margin: 50px 0 0;
}

.arrow {
  background: url('../img/teitetsu3.png') no-repeat center bottom;
  padding-bottom: 40px;
}

@media screen and (max-width: 640px) {
  .arrow img {
    height: 30px;
  }
}

.shadow {
  text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px;
}

.icon {
  height: 175px;
  width: 175px;
  line-height: 175px;
  max-width: 100%;
  background: #3dc9b3;
  border-radius: 50%;
  -o-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: block;
  color: #fff;
  font-size: 55px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  margin: 0 auto 50px;
}

/* ==========================================================================
iPhone Section
========================================================================== */
.iphone {
  width: 50%;
  background: #f3f5f8;
  float: left;
  height: 100%;
  box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.fluid-white {
  width: 50%;
  background: #fff;
  float: right;
  height: 100%;
  z-index: 2;
}

.responsive-services {
  position: relative;
}

/* ==========================================================================
Swag
========================================================================== */
.swag {
  background: url('../img/plants-bg.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  padding: 50px 0;
}

.swag h1 {
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

.swag h1 span {
  display: block;
  font-size: 25px;
  margin-top: 20px;
}

.down-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  background: rgba(61, 201, 179, 0.8);
  display: inline-block;
  margin: 10px auto 20px;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
}

.down-arrow-btn:hover, .down-arrow-btn:focus {
  color: #fff;
  background: rgba(61, 201, 179, 1);
}

/* ==========================================================================
Portfolio
========================================================================== */
.effects {
  padding-left: 15px;
}

.img {
  position: relative;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.effects .img:nth-child(n) {
  margin-right: 5px;
}

.effects .img:first-child {
  margin-left: -15px;
}

.effects .img:last-child {
  margin-right: 0;
}

.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
}

.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  background: rgba(100, 194, 158, 0.8);
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
}

a.close-overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: #000;
  cursor: pointer;
}

a.close-overlay.hidden {
  display: none;
}

a.expand {
  display: block;
  position: absolute;
  z-index: 100;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 30px;
}

.overlay-effect .img i {
  font-size: 30px;
}

.overlay-effect .overlay {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.overlay-effect .overlay a.expand {
  left: 0;
  right: 0;
  bottom: 47%;
  margin: 0 auto -30px auto;
}

.overlay-effect .img.hover .overlay {
  height: 100%;
  opacity: 1;
}

.img img {
  width: -webkit-calc(100%) !important;
  width: calc(100%) !important;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -moz-transition: opacity 0.35s, -moz-transform 0.35s;
  -o-transition: opacity 0.35s, -o-transform 0.35s;
  -webkit-transform: translate3d(0px, 0px, 0);
  transform: translate3d(0px, 0px, 0);
  -ms-transform: translate3d(0px, 0px, 0);
}

.img:hover img {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0px, 0, 0);
}

.designs {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

/* ==========================================================================
Subscribe
========================================================================== */
.subscribe {
  background: url('../img/2.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  padding: 120px 0 140px;
}

.subscribe h1 {
  color: #fff;
  margin-bottom: 40px;
}

.subscribe h1 span {
  display: block;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 20px;
  letter-spacing: 1px;
}

.subscribe input[type=text] {
  background-color: rgba(255, 255, 255, 0.1);
  border: solid 1px #fff;
  padding: 20px;
  width: 30%;
  color: #fff;
}

.subscribe input[type=submit] {
  background: rgba(61, 201, 179, 0.5);
  border: solid 1px rgba(61, 201, 179, 0.5);
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.subscribe input[type=submit]:hover {
  background: rgba(61, 201, 179, 1);
  border: solid 1px rgba(61, 201, 179, 1);
  color: #fff;
}

/* ==========================================================================
CTA
========================================================================== */
.ignite-cta {
  background-color: #242830;
  padding: 70px 0;
}

.ignite-btn {
  display: inline-block;
  padding: 25px 40px;
  color: #fff;
  border: solid 1px #fff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

.ignite-btn:hover, .ignite-btn:focus {
  color: #3dc9b3;
  border: solid 1px #3dc9b3;
}

/* ==========================================================================
Team
========================================================================== */
.team img {
  margin-bottom: 40px;
}

ul.social-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.social-buttons li {
  display: inline-block;
  margin-right: 10px;
}

ul.social-buttons li:last-child {
  margin-right: 0;
}

.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  background: #242830;
  display: inline-block;
  color: #fff;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
}

.social-btn:hover, .social-btn:focus {
  background: #3dc9b3;
  color: #fff;
}

.social {
  margin-top: 25px
}

/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider {
  margin-top: 70px;
}

ul.slides li {
  margin-bottom: 20px;
  margin-left: 0px;
}

/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 {
  visibility: hidden;
}

.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight {
  visibility: visible;
}

/* ==========================================================================
コメント記事オープン
========================================================================== */
.kiji {
  width: 33.33333333%;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 40px;
}

.kiji_1200 {
  width: 100%;
  height: 40px;
  float: left;
  display: block;
}

.kiji_768 {
  display: none;
}

@media screen and (max-width: 768px) {
  .kiji {
    width: 50%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
  }

  .kiji_1200 {
    display: none;
  }

  .kiji_768 {
    width: 100%;
    height: 40px;
    float: left;
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .kiji {
    width: 100%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 80px;
  }

  .kiji_1200 {
    display: none;
  }

  .kiji_768 {
    display: none;
  }
}

.grad-wrap {
  position: relative;
}

.grad-wrap+.grad-wrap {
  margin-top: 40px;
}

.grad-trigger {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0px;
  left: 0;
  width: 120px;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #009e8f;
  color: #fff;
  font-size: 0.9em;
  text-align: center;
  cursor: pointer;
  transition: .8s ease;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.grad-trigger::after {
  content: "続きを読む"
    /*クリック前のボタンのラベル*/
}

.grad-trigger .fa {
  margin-right: .5em;
}

.grad-item {
  position: relative;
  overflow: hidden;
}

.grad-item.is-hide {
  height: 80px;
  /*隠した後の高さ*/
}

.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px;
  /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(243, 245, 248, 0) 0%, rgba(243, 245, 248, 0.9) 0%, rgba(243, 245, 248, 0.5) 50%, #f3f5f8 100%);
  background: linear-gradient(top, rgba(243, 245, 248, 0) 0%, rgba(243, 245, 248, 0.9) 50%, rgba(243, 245, 248, 0.5) 50%, #f3f5f8 100%);
}

.grad-trigger.is-show {
  bottom: -2em;
}

.grad-trigger.is-show::after {
  content: "閉じる"
    /*クリック後にボタンのラベルを変える*/
}

.grad-trigger.is-show+.grad-item::before {
  display: none;
}

/* ==========================================================================
追加
========================================================================== */
.pc {
  display: block;
}

.pc891 {
  display: block;
}

.pc890 {
  display: none;
}

.pc768 {
  display: block;
}

.pc767 {
  display: none;
}

.sp {
  display: none;
}

@media screen and (max-width: 890px) {
  .pc891 {
    display: none;
  }

  .pc890 {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .pc768 {
    display: none;
  }

  .pc767 {
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

.area1 {
  width: 100%;
  height: 850px;
}

.top_f {
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  overflow: hidden;
  padding: 10px;
  letter-spacing: 1px;
}

@media screen and (max-width:767px) {
  .top_f {
    padding: 5px;
  }
}

header .logo {
  display: inline-block;
  margin: 0px 200px 0px 0px;
}

header .logo50 {
  display: none;
}

header .cap {
  color: #fff;
  font-size: 13px;
  line-height: 1.5em;
  position: absolute;
  margin: 0px 0px 0px 95px;
  top: 20%;
}

@media screen and (max-width:840px) {
  header .logo {
    margin: 0px 160px 10px -20px;
  }

  header .cap {
    margin: -5px 0px 0px 70px;
    font-size: 12px;
    top: 30%;
    line-height: 1.3em;
  }
}

@media screen and (max-width:768px) {
  header .logo {
    margin: 0px 160px 10px -10px;
  }

  header .cap {
    margin: -5px 0px 0px 75px;
    font-size: 12px;
    top: 30%;
    line-height: 1.3em;
  }
}

@media screen and (max-width:767px) {
  header .cap {
    margin: 0px 0px 0px 50px;
    font-size: 12px;
    top: 30%;
    line-height: 1.3em;
  }

  header .logo {
    display: none;
  }

  header .logo50 {
    display: inline-block;
    margin: 10px 180px 0px -20px;
  }
}

@media screen and (max-width:480px) {
  header .cap {
    margin: 0px 0px 0px 70px;
    font-size: 12px;
    top: 30%;
    line-height: 1.3em;
  }

  header .logo {
    display: none;
  }

  header .logo50 {
    display: inline-block;
    margin: 10px 180px 0px 0px;
  }
}

/* ==========================================================================
Features
========================================================================== */
.features {
  background-color: #eeeeee;
}

.features-wrapper, .team-wrapper {
  margin: 70px 0 0;
}

.features ul.features-stack {
  margin-left: 20px;
}

.features ul.features-stack li {
  margin-top: 10px;
  padding-bottom: 0px;
  border-bottom: solid 1px #aaa;
  list-style: none;
}

.features ul.features-stack li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.features .feature-content {
  /* */
  display: inline-block;
  width: 100%;
}

.feature-content p {
  margin-top: -10px;
}

.feature-content a {
  font-weight: bold;
}

/* ==========================================================================
Features2
========================================================================== */
.features2-wrapper, .team-wrapper {
  margin: 70px 0 0;
}

.features2 ul.features-stack {
  margin-left: 20px;
}

.features2 ul.features-stack li {
  margin-top: 10px;
  padding-bottom: 0px;
  border-bottom: solid 1px #aaa;
  list-style: none;
}

.features2 ul.features-stack li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.features2 .feature-content {
  /* */
  display: inline-block;
  width: 100%;
}

.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

.delay-1s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.article_01 {
  width: 500px;
  margin: 0 auto;
  padding: 6px 20px 2px 20px;
  border: solid 0px #d7d7d7;
  background: #395597;
  color: #FFF;
  margin-bottom: 20px;
  font-weight: normal;
  border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
}

/* 会員ログイン */
.sign-up .signup-form .sign-up-btn {
  padding: 15px 0;
  border-radius: 3px;
  width: 35%;
  font-size: 15px;
}

.sign-up .signup-form .form-input-group {
  width: 80%;
  height: 55px;
  margin: 0 auto 10px;
  border-radius: 5px;
  border: solid 1px #E6E9EA;
  text-align: left;
  position: relative;
}

.sign-up .signup-form .form-input-group i {
  color: #FF5274;
  font-size: 14px;
}

.sign-up .signup-form .form-input-group i:after {
  content: "";
  height: 30px;
  width: 1px;
  border-right: solid 1px #E6E9EA;
  position: absolute;
  top: 50%;
  left: 30px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.sign-up .signup-form .form-input-group i.fa-lock {
  font-size: 18px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 20px;
}

.sign-up .signup-form .form-input-group i.fa-envelope {
  font-size: 14px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 20px;
}

.sign-up .signup-form .form-input-group input {
  padding-left: 68px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  border: none;
}

.sign-up .signup-form .form-input-group input::-webkit-input-placeholder {
  color: #BCC1C3;
}

.sign-up .signup-form .form-input-group input:-moz-placeholder {
  color: #BCC1C3;
}

.sign-up .signup-form .form-input-group input::-moz-placeholder {
  color: #BCC1C3;
}

.sign-up .signup-form .form-input-group input:-ms-input-placeholder {
  color: #BCC1C3;
}

.btn-fill {
  color: #fff;
  border: solid 2px #FF5274;
  border-radius: 40px;
  display: inline-block;
  text-transform: uppercase;
  background-color: #FF5274;
}

.btn-fill:hover, .btn-fill:focus {
  color: #fff;
  background-color: #D7405D;
  border-color: #D7405D;
}

/* To top */
.to-top {
  height: 60px;
  background-color: #495061;
}

.to-top .to-top-wrap {
  height: 60px;
  width: 70px;
  position: absolute;
  right: 0;
  text-align: center;
}

.to-top .to-top-wrap a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.15);
}

.to-top .to-top-wrap a:hover, .to-top .to-top-wrap a:focus {
  background-color: rgba(0, 0, 0, 0.4);
}

.to-top .to-top-wrap i {
  font-size: 30px;
  line-height: 55px;
}

.to-top .row {
  position: relative;
}

/* ==========================================================================
Footer
========================================================================== */
footer {
  background-color: #3D4351;
  position: relative;
}

footer p {
  color: #ACB1B4;
  font-size: 14px;
}

footer a {
  color: #fff;
}

footer a:hover {
  color: #FF5274;
}

footer span.fa-heart {
  color: #ff415c;
  font-size: 15px;
  margin: 0 2px;
}

footer .social-share {
  right: 0;
  width: 100%;
  padding: 80px 0px 30px 50px;
}

footer .social-share p {
  color: #fff;
  text-transform: uppercase;
  padding-bottom: 10px;
}

footer .social-share a.facebook-share:hover, footer .social-share a.facebook-share:focus {
  background-color: #324C85;
}

footer .social-share a.facebook-share {
  height: 60px;
  width: 60px;
  background-color: #3B5898;
  border-radius: 3px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
}

footer .social-share a {
  color: #fff;
}

footer .social-share a:hover {
  color: #fff;
}

footer .social-share a i {
  margin-top: 20px;
}

footer .footer-links {
  margin: 80px 0 50px 0;
}

@media (max-width:640px) {
  footer .social-share {
    right: 0;
    width: 100%;
    padding: 50px 10px 30px 10px;
  }
}

.btn-small {
  padding: 0px 10px;
  border-right: solid 1px #ccc;
}

.btn-small2 {
  border-left: solid 1px #ccc;
}

.midashi h6 {
  padding: 6px 20px 4px 20px;
  border: solid 0px #d7d7d7;
  background: #f0edf1;
  margin-bottom: 30px;
  border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
}

@media screen and (max-width:767px) {
  .btn-small {
    padding: 5px 10px;
    margin-bottom: 30px;
    border-right: solid 0px #ccc;
  }
}

/* エリア */
.kiyosato {
  min-height: 500px;
  background: url("../img/top05.jpg") center center;
  background-size: cover;
  position: relative;
}

.oizumi {
  min-height: 500px;
  background: url("../img/top06.jpg") center center;
  background-size: cover;
  position: relative;
}

.koizumi {
  min-height: 500px;
  background: url("../img/top09.jpg") center center;
  background-size: cover;
  position: relative;
}

.kobuchizawa {
  min-height: 500px;
  background: url("../img/top08.jpg") center center;
  background-size: cover;
  position: relative;
}

.kayagatake {
  min-height: 500px;
  background: url("../img/top10.jpg") center center;
  background-size: cover;
  position: relative;
}

.kawaguchiko {
  min-height: 500px;
  background: url("../img/top03.jpg") center center;
  background-size: cover;
  position: relative;
}

.motosuko {
  min-height: 500px;
  background: url("../img/top02.jpg") center center;
  background-size: cover;
  position: relative;
}

.yamanakako {
  min-height: 500px;
  background: url("../img/top04.jpg") center center;
  background-size: cover;
  position: relative;
}

.ashiyasu {
  min-height: 500px;
  background: url("../img/top11.jpg") center center;
  background-size: cover;
  position: relative;
}

/* トップ画像文字 */
.tfm_01 {
  position: absolute;
  top: 330px;
  padding: 0 50px;
  color: #fff;
  text-shadow: 2px 0px 5px #333, -2px 0px 5px #333, 0px 2px 5px #333, -2px 0px 5px #333;
}

.tfm_02 {
  position: absolute;
  padding: 0 50px;
  top: 300px;
  color: #fff;
  text-shadow: 2px 0px 5px #333, -2px 0px 5px #333, 0px 2px 5px #333, -2px 0px 5px #333;
}

@media (max-width:768px) {
  .tfm_01 {
    top: 300px;
    font-size: 100%;
    padding: 0 20px;
  }

  .tfm_02 {
    top: 270px;
    font-size: 100%;
    padding: 0 20px;
  }
}

@media (max-width:480px) {
  .tfm_01 {
    top: 300px;
    font-size: 80%;
    padding: 0px;
  }

  .tfm_02 {
    top: 270px;
    font-size: 90%;
    padding: 0px;
  }
}

/* ==========================================================================
.blog
========================================================================== */
.blog {
  padding-bottom: 120px;
}

.blog p {
  margin-bottom: 35px;
}

/* ==========================================================================
施設詳細
========================================================================== */
.ｓ_style_01 {
  color: #724798;
  font-size: 0.8em;
  font-weight: 600;
}

.shop-3-1 {
  padding: 0px 0px 0px 0px;
  width: 22%;
  float: left;
}

.shop-3-2 {
  padding: 0px 0px 0px 20px;
  width: 40%;
  float: left;
}

.shop-3-m {
  width: 100%;
}

.shop-3-3 {
  padding: 0px 0px 0px 10px;
  width: 35%;
  float: right;
}

@media (max-width:980px) {
  .shop-3-1 {
    padding: 0px 0px 0px 0px;
    width: 30%;
    float: left;
  }

  .shop-3-2 {
    padding: 0px 0px 0px 20px;
    width: 40%;
    float: left;
  }

  .shop-3-m {
    width: 100%;
  }

  .shop-3-3 {
    padding: 0px 0px 0px 10px;
    width: 30%;
    float: right;
  }
}

@media (max-width:768px) {

  /*-----------------3カラム --------------------*/
  .shop-3-1 {
    padding: 0px 0px 0px 0px;
    width: 40%;
    float: left;
  }

  .shop-3-2 {
    padding: 0px 0px 0px 20px;
    width: 30%;
    float: left;
  }

  .shop-3-m {
    width: 30%;
    float: right;
  }

  .shop-3-3 {
    padding: 0px 0px 0px 10px;
    width: 100%;
    float: right;
  }
}

@media (max-width:767px) {

  /*-----------------3カラム --------------------*/
  .shop-3-1 {
    padding: 0px 0px 0px 0px;
    width: 35%;
    float: left;
  }

  .shop-3-2 {
    padding: 0px 0px 0px 20px;
    width: 35%;
    float: left;
  }

  .shop-3-m {
    width: 30%;
    float: right;
  }

  .shop-3-3 {
    padding: 0px 0px 0px 10px;
    width: 100%;
    float: right;
  }
}

@media (max-width:640px) {
  .area2 .area2-content h1 {
    font-size: 23px;
  }

  /*-----------------3カラム --------------------*/
  .shop-3-1 {
    padding: 0px 0px 0px 0px;
    width: 40%;
    float: left;
  }

  .shop-3-2 {
    padding: 0px 0px 0px 20px;
    width: 60%;
    float: right;
  }

  .shop-3-m {
    width: 100%;
    float: left;
  }

  .shop-3-3 {
    padding: 0px 0px 0px 20px;
    width: 100%;
    float: none;
  }
}

@media (max-width:480px) {

  /*-----------------3カラム --------------------*/
  .shop-3-1 {
    padding: 0px 0px 0px 0px;
    width: 100%;
    float: none;
  }

  .shop-3-2 {
    padding: 0px 0px 0px 0px;
    width: 100%;
    float: none;
  }

  .shop-3-m {
    width: 100%;
    float: left;
  }

  .shop-3-3 {
    padding: 0px 0px 0px 0px;
    width: 100%;
    float: none;
  }
}

/* ==========================================================================
会員ページ
========================================================================== */
.kaiin{
  padding-bottom: 40px;
}

.kaiin img{
  width: 50px;
  margin-top: -20%;
}

@media (max-width:480px) {
  .kaiin img{
    width: 35px;
    margin-top: -30%;
  }
  .kaiin p{
    margin-top: -3%;
  }
}