charset "UTF-8";
/*Original font-face*/
@keyframes fadeIn {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes zoom110to100 {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*
https://github.com/tobiasahlin/SpinKit

The MIT License (MIT)

Copyright (c) 2015 Tobias Ahlin

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.spinner {
  width: 40px;
  height: 40px;
  z-index: 10;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #d41717;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 3.0s infinite ease-in-out;
  animation: sk-bounce 3.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes modal-video {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-video-inner {
  from {
    transform: translate(0, -20px);
  }
  to {
    transform: translate(0, 0);
  }
}
.modal-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000000;
  cursor: pointer;
  opacity: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video;
  transition: opacity 0.3s ease-out;
}

.modal-video-close {
  opacity: 0;
}
.modal-video-close .modal-video-movie-wrap {
  transform: translate(0, -20px);
}

.modal-video-body {
  max-width: 940px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: table;
}
@media (max-width: 1360px) {
  .modal-video-body {
    max-width: 920px;
  }
}

.modal-video-inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.modal-video-movie-wrap {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  background-color: #333;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video-inner;
  transform: translate(0, 0);
  transition: transform 0.3s ease-out;
}
.modal-video-movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-video-close-btn {
  position: absolute;
  z-index: 2;
  top: -35px;
  right: -35px;
  display: inline-block;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  background: transparent;
}
@media (max-width: 980px) {
  .modal-video-close-btn {
    top: -20px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #333;
  }
}
.modal-video-close-btn:before {
  transform: rotate(45deg);
}
.modal-video-close-btn:after {
  transform: rotate(-45deg);
}
.modal-video-close-btn:before, .modal-video-close-btn:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
}
@media (max-width: 980px) {
  .modal-video-close-btn:before, .modal-video-close-btn:after {
    width: 14px;
    left: 50%;
    background: #fff;
    margin-top: -1px;
    margin-left: -7px;
  }
}

/*
 *  Remodal - v1.1.0
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */
/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */
/* Hide scroll bar */
html.remodal-is-locked {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}

/* Anti FOUC */
.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */
.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  display: none;
}

/* Necessary styles of the wrapper */
.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  content: "";
}

/* Fix iPad, iPhone glitches */
.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */
.remodal {
  position: relative;
  outline: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}

/*
 *  Remodal - v1.1.0
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */
/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

/* Default theme styles of the overlay */
.remodal-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the wrapper */
.remodal-wrapper {
  padding: 10px 10px 0;
}

/* Default theme styles of the modal dialog */
.remodal {
  box-sizing: border-box;
  width: 100%;
  min-height: 80vh;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 30px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #000;
  background: #fff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2), 0 0 25px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .remodal {
    text-align: left;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 35px 10px 20px 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.2);
  }
}
.remodal figure {
  max-width: 525px;
  margin: 0 auto 30px auto;
}
.remodal figure figcaption {
  display: block;
  padding: 5px 0 0 0;
}
.remodal .col2 .col__box {
  margin-top: 10px !important;
}
@media (max-width: 767px) {
  .remodal .col2 .col__box {
    width: 48%;
    margin-right: 4%;
    float: left;
    clear: none;
    text-align: center;
  }
}
.remodal .col2 .col__box a {
  color: #000;
}
.remodal .col2 .col__box a figure {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .remodal .col2 .col__box:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .remodal .col2 .col__box:nth-child(2n+1) {
    clear: left;
  }
}
.remodal dl {
  width: 100%;
  text-align: center;
  margin: 0;
  line-height: 1.7;
}
.remodal dl dt {
  font-weight: bold;
  font-size: 14px;
  margin: 0 0 15px 0;
}
.remodal dl dt b {
  font-size: 19px;
}
.remodal dl dd {
  margin: 0;
  padding: 0;
}
.remodal dl dd p {
  margin: 0;
  padding: 0;
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

/* Close button */
.remodal-close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  overflow: visible;
  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;
  color: #7d7d7d;
  background-color: #ddd;
  border: 0;
  outline: 0;
}
@media (min-width: 981px) {
  .remodal-close {
    background: none;
  }
}

.remodal-close:hover,
.remodal-close:focus {
  color: #2b2e38;
}

.remodal-close:before {
  display: block;
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 25px;
  line-height: 35px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 35px;
  content: "\00d7";
  text-align: center;
}

/* Dialog buttons */
.remodal-confirm,
.remodal-cancel {
  font: inherit;
  display: inline-block;
  overflow: visible;
  min-width: 110px;
  margin: 0;
  padding: 12px 0;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: 0;
  outline: 0;
}

.remodal-confirm {
  color: #fff;
  background: #81c784;
}

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #66bb6a;
}

.remodal-cancel {
  color: #fff;
  background: #e57373;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #ef5350;
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */
.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* Keyframes
   ========================================================================== */
@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Media queries
   ========================================================================== */
@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 768px;
  }
}
/* IE8
   ========================================================================== */
.lt-ie9 .remodal-overlay {
  background: #2b2e38;
}

.lt-ie9 .remodal {
  width: 700px;
}

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/* ----------------------------------------------------------------
	base
----------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}
@media all and (-ms-high-contrast: none) {
  body,
  button,
  input,
  select,
  textarea {
    font-family: "Segoe UI", Meiryo, "メイリオ", sans-serif;
  }
}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  color: #333;
  margin: 0;
  padding: 0;
  font-size: 15px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 980px) {
  body {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  body {
    font-size: 3.75vw;
  }
}

ul {
  padding: 0;
  margin: 0;
}
ul li {
  /* list-style-type: none; */
}

p {
  margin: 0;
  line-height: 2.4;
}

a {
  text-decoration: none;
  outline: 0 none;
  color: #333;
}

figure {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

img {
  border: 0;
  line-height: 1;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* ----------------------------------------------------------------
	header
----------------------------------------------------------------- */
.header {
  margin: 0;
  padding: 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.header__wrap {
  background-color: #fff;
  z-index: 1;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.header__wrap:before, .header__wrap:after {
  display: table;
  content: '';
}
.header__wrap:after {
  clear: both;
}
.header h1 {
  margin: 0;
}
.header__logo, .headerdayplalogo {
  /* padding: 4em 0 0.6em 0; */
  position: absolute;
  top: 40px;
  right: 27px;
/*  float: left;
  z-index: 1;
  position: relative;
  width: 233px;
  height: 32px;
  background-color: #fff; */
}
.page-content {
    margin-bottom: 5% !important;
}
#site-title {
    max-width: 1500px !important;
    /* margin-left: 10px !important; */
    /* padding: 4em 0 0.6em 0 !important; */
}
#site-title p.subtitle {
    float: left;
    border-left: 1px solid #999;
    margin: 0 0 0 1em;
    padding: .2em 0 .2em .8em;
    font-weight: normal;
    font-size: 140%;
    line-height: 64px;
    letter-spacing: 0.31em;
    color: /*#C2DC15*/ MidnightBlue /*orangered*/;
    min-width: 870px;
}
#site-title p.petition-title {
    display: block;
    margin:  4vh 16vw 1vh;
    font-size: 1.5em;
    font-weight: 500;
    float: left;
    text-align: center;
}
.block-w-auto {
}
@media (max-width: 1240px) {
  .header__logo {
  }
  .page-content {
  }
  #site-title {
    min-width: 100% !important;
  }
  p.subtitle {
    font-size: 130% !important;
    line-height: 46px !important;
    background: repeating-linear-gradient(90deg, transparent, transparent, transparent, ghostwhite 86px);
  }
  #site-title p.petition-title {
    display: block;
    margin:  4vh 2vw 1vh !important;
    font-size: 1.5em;
    font-weight: 500;
    float: left;
    text-align: start !important;
  }
  .block-w-auto {
  }
}
@media (max-width: 950px) {
  .header__logo {
    width: 225px;
  }
  #site-title {
    min-width: 100% !important;
  }
  #site-title > h1 {
    /* font-size: 200% !important; */
  }
  p.subtitle {
    font-size: 125% !important;
    line-height: 38px !important;
    min-width: 1vw !important;
    max-width: 90vw;
    margin: 2vh 0 -9vh 1vw;
  }
}
@media (max-width: 866px) {
  .header__logo {
    width: 190px;
    right: 10px;
  }
  .page-content {
    min-width: 100% !important;
  }
  #site-title {
    min-width: 100% !important;
  }
  #site-title > h1 {
    font-size: 146% !important;
  }
  p.subtitle {
    font-size: 120% !important;
    line-height: 36px !important;
  }
}

@media (max-width: 764px) {
  .header__logo {
    z-index: -1;
  }
  #site-title {
    min-width: 100% !important;
    padding: 1vh 0 0 0 !important;
    margin: 0 auto !important;
  }
  p.subtitle {
    font-size: 115% !important;
    line-height: 33px !important;
  }
  #site-title p.petition-title {
    display: block;
    margin:  0 2vw 1vh !important;
    font-size: 15px !important;
    font-weight: 700;
    float: left;
    max-width: 78% !important;
  }
}
@media (max-width: 673px) {
  p.subtitle {
    font-size: 110% !important;
    line-height: 30px !important;
  }
  #site-title p.petition-title {
    font-size: 13px !important;
    max-width: 69% !important;
  }
}
@media (max-width: 500px) {
  .header__logo {
    width: ;
  }
  #site-title {
    min-width: 100% !important;
    padding: 2vh 0 0 0 !important;
    margin: 0 auto !important;
  }
  #site-title > h1 {
    /* font-size: 121% !important; */
  }
  p.subtitle {
  }
  .block-w-auto {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
  }
}
@media (max-width: 464px) {
  .header__logo {
    top: 0vh;
    right: 2vw;
    height: ;
    width: 40vw;
    padding: 1vh 0 0.6em 0;
  }
  .page-content {
    min-width: 100% !important;
  }
  #site-title {
    min-width: 100% !important;
    padding: 2vh 0 0 0 !important;
  }
  #site-title > h1 {
    width: 180px; 
    font-size: 100% !important;  
    line-height: 4vh !important;
  }
  p.subtitle {
    margin: 0 0 0 0.5em !important;
    padding: .2em 0 .2em .8em !important;
    line-height: 3.7vh !important;
    background: repeating-linear-gradient(90deg, transparent, transparent, transparent, ghostwhite 86px);
    font-size: 2vh !important;
  }
  #site-title p.petition-title {
    display: block;
    margin:  4vh 2vw 1vh !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    float: left;
    max-width: 100% !important;
  }
  #footer-left {
    max-width: 77vw !important;
  }
}
@media (max-width: 359px) {
  .header__logo {
    top: 0vh;
    right: 2vw;
    width: 40vw;
    padding: 1vh 0 0.6em 0;
  }
  .page-content {
    min-width: 100% !important;
    margin-bottom: 8% !important;
  }
  #site-title {
    min-width: 100% !important;
    padding: 2vh 0 0 0 !important;
}
  #site-title > h1 {
    width: 180px; 
    font-size: 100% !important;  
    line-height: 4vh !important;
  }
  p.subtitle {
  }
  #site-title p.petition-title {
  }
}
.header__logo a {
/*  height: 0;
  overflow: hidden;
  width: 100%;
  padding-top: 65px;
  white-space: nowrap;
  vertical-align: baseline;
  display: block;
  position: relative;
  background-image: url(../images/w3gflorist_test1/common/logo.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 100% auto; */
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .header__logo a {
/*    background-image: url(../images/w3gflorist_test1/common/logo@2x.png) ; */ 
  }
}
@media (max-width: 980px) {
  .header__logo a {
    padding-top: /* 60px */ ;
  }
}
@media (max-width: 767px) {
  .header__logo a {
    padding-top: /* 55px  */ ;
  }
}
.header #nav {
  float: right;
}
.header #nav:before, .header #nav:after {
  display: table;
  content: '';
}
.header #nav:after {
  clear: both;
}
.header__nav {
  padding: 0;
}
.header__nav > li {
  float: left;
  text-align: center;
  display: block;
  line-height: 65px;
  width: 15em;
  border-left: 1px solid #ddd;
}
@media (max-width: 767px) {
  .header__nav > li {
    line-height: 55px;
    width: 7em;
  }
}
.header__nav > li:last-child {
  border-right: 1px solid #ddd;
}
@media (max-width: 980px) {
  .header__nav > li:last-child {
    border-right: 0;
  }
}
.header__nav > li a {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  display: block;
  padding: 0;
  text-decoration: none;
  color: #333;
}
@media (max-width: 767px) {
  .header__nav > li a {
    font-size: 3vw;
  }
}
.header__nav > li a span {
  padding-right: 15px;
  position: relative;
  line-height: 1;
}
.header__nav > li a span:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border: 0 none;
  border-bottom: 2px solid #333;
  border-left: 2px solid #333;
  border-color: #333;
  -ms-transform: translateX(-4px) rotate(-135deg);
  transform: translateX(-4px) rotate(-135deg);
  margin: -4px 0 0 0;
  transition: color 0.3s;
}
@media (min-width: 981px) {
  .header__nav > li a {
    transition: color 0.3s;
  }
  .header__nav > li a span:before {
    transition: border-color 0.3s;
  }
  .header__nav > li a:hover {
    color: #d41717;
  }
  .header__nav > li a:hover span:before {
    border-color: #d41717;
  }
}
.header__nav > li a.is-active {
  color: #fff;
  background-color: #f6a09f;
  transition: none;
}
.header__nav > li a.is-active span:before {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}


/* ----------------------------------------------------------------
	sub__nav
----------------------------------------------------------------- */
.sub__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fbf7f5;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 980px) {
  .sub__nav {
    position: static;
    height: 100%;
    box-shadow: none;
    background-color: #fff;
  }
}


/* ----------------------------------------------------------------
	sub__nav nav
----------------------------------------------------------------- */
.sub__nav nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1240px) {
  .sub__nav nav {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 980px) {
  .sub__nav nav {

    margin: 40px 0;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .sub__nav nav {
    margin: 30px 0;
  }
}


/* ----------------------------------------------------------------
	sub__nav nav ul
----------------------------------------------------------------- */
.sub__nav nav ul {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.sub__nav nav ul li {
  width: 14.2857%;
  text-align: center;
  font-size: 12px;
}
@media (max-width: 980px) {
  .sub__nav nav ul li {
    width: 25%;
    font-size: 15px;
    font-weight: bold;
  }
}
@media (max-width: 767px) {
  .sub__nav nav ul li {
    width: 33.3333%;
    font-size: 3vw;
  }
}


/* ----------------------------------------------------------------
	sub__nav nav ul li a
----------------------------------------------------------------- */
.sub__nav nav ul li a {
  width: 100%;
  display: inline-block;
  line-height: 60px;
  transition: color .5s, background-color .5s;
}
.sub__nav nav ul li a.is-active {
  transition: color 0s, background-color 0s;
}
@media (min-width: 981px) {
  .sub__nav nav ul li a.is-active {
    background-color: #f47776;
    color: #fff;
  }
  .sub__nav nav ul li a.is-active span:before {
    background-color: #f47776;
  }
}
@media (min-width: 981px) {
  .sub__nav nav ul li a:hover {
    color: #fff;
    background-color: #f47776;
  }
  .sub__nav nav ul li a br {
    display: none;
  }
}
@media (max-width: 980px) {
  .sub__nav nav ul li a {
    line-height: 1.2;
    padding: 90% 0 0 0;
    margin: 0 0 30px 0;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .sub__nav li:nth-child(1) a {
    background-image: url(../images/w3gflorist_test1/common/sub-img-01.jpg);
  }
  .sub__nav li:nth-child(2) a {
    background-image: url(../images/w3gflorist_test1/common/sub-img-02.jpg);
  }
  .sub__nav li:nth-child(3) a {
    padding: 85% 0 0 0;
    background-image: url(../images/w3gflorist_test1/common/sub-img-03.jpg);
  }
  .sub__nav li:nth-child(4) a {
    background-image: url(../images/w3gflorist_test1/common/sub-img-04.jpg);
  }
  .sub__nav li:nth-child(5) a {
    background-image: url(../images/w3gflorist_test1/common/sub-img-05.jpg);
  }
  .sub__nav li:nth-child(6) a {
    background-image: url(../images/w3gflorist_test1/common/sub-img-06.jpg);
  }
  .sub__nav li:nth-child(7) a {
    background-image: url(../images/w3gflorist_test1/common/sub-img-07.jpg);
  }
}
@media (max-width: 767px) {
  .sub__nav nav ul li a {
    margin: 0 0 20px 0;
  }
}


/* ----------------------------------------------------------------
	sub__nav nav ul li a span
----------------------------------------------------------------- */
.sub__nav nav ul li a span {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sub__nav nav ul li a span:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 13px;
  background-color: #ddd;
  margin: -6px 0 0 0;
}
@media (max-width: 980px) {
  .sub__nav nav ul li a span:before {
    display: none;
  }
}


/* ----------------------------------------------------------------
	sub__nav nav ul li:last-child
----------------------------------------------------------------- */
.sub__nav nav ul li:last-child a span:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 13px;
  background-color: #ddd;
  margin: -6px 0 0 0;
}
@media (max-width: 980px) {
  .sub__nav nav ul li:last-child a span:after {
    display: none;
  }
}

/*#buildMenuButton{
	display:none;
	z-index: 101;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	width: 44px;
	height: 48px;
	cursor: pointer;
	background-color: #f47776;
	@include forSP{
		display:block;
	}
	&:before{
		content:"";
		position:absolute;
		top:17px;
		left:10px;
		width:24px;
		height:2px;
		background:#fff;
		transition: all 0.6s ease-in-out;
	}
	span {
		position:absolute;
		top:0;
		right:0;
		width:100%;
		height:100%;
		color:#fff;
		font-size:8px;
		line-height:10px;
		text-transform: uppercase;
		padding:30px 0 0 0;
		text-align: center;
		@include border-box();
		&:before{
			content:"";
			position:absolute;
			top:10px;
			left:10px;
			width:24px;
			height:2px;
			background:#fff;
			transition: left 0.6s ease-in-out, transform 0.6s ease-in-out;
		}
		&:after{
			content:"";
			position:absolute;
			top:24px;
			left:10px;
			width:24px;
			height:2px;
			background:#fff;
			transition: left 0.6s ease-in-out, transform 0.6s ease-in-out;
		}
	}
}

@include forSP{
	.header__nav {
		-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
		transition: transform 0.3s, opacity 0.3s;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		margin:0;
		padding:60px 0;
		opacity: 0;
		background-color: #fff;
		@include border-box();
		@include forSP(){
			padding:48px 0;
		}
		li{
			a{
				-webkit-transform: translateX(-20%);
				transform: translateX(-20%);
				opacity:0;
				-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
				transition: transform 0.3s, opacity 0.3s;
			}
		}
	}
	.build-menu-animating {
		#pagetop{
			opacity:0;
		}
	}
	.build-menu-animating,
	.change{
		.header {
			height:100%;
			@include border-box();
		}
		.header__nav{
			height: 100%;
			width: 100%;
		}
		#pagetop{
			opacity:0;
		}
	}
	.build-menu-animating.build-menu-open {
		.header__nav {
			-webkit-transform: translateY(0);
			transform: translateY(0);
			opacity:1;
			li{
				a{
					-webkit-transform: translateX(0);
					transform: translateX(0);
					opacity:1;
				}
				&:nth-child(1){
					a{
						transition-delay:0.4s;
					}
				}
				&:nth-child(2){
					a{
						transition-delay:0.45s;
					}
				}
				&:nth-child(3){
					a{
						transition-delay:0.5s;
					}
				}
				&:nth-child(4){
					a{
						transition-delay:0.55s;
					}
				}
				&:nth-child(5){
					a{
						transition-delay:0.6s;
					}
				}
				&:nth-child(6){
					a{
						transition-delay:0.65s;
					}
				}
				&:nth-child(7){
					a{
						transition-delay:0.7s;
					}
				}
				&:nth-child(8){
					a{
						transition-delay:0.75s;
					}
				}
			}
		}
		#buildMenuButton{
			&:before{
				opacity:0;
			}
			span {
				&:before{
					left:1px;
					transform: rotate(-45deg) translate(1px,11px);
				}
				&:after{
					left:1px;
					transform: rotate(45deg) translate(1px, -11px);
				}
			}
		}
	}
	.build-menu-animating.build-menu-close {
		.header__nav {
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%);
			opacity:0;
			-webkit-transition-duration:0s, 0.3s;
			transition-duration:0s, 0.3s;
			-webkit-transition-delay:0.3s , 0s;
			transition-delay:0.3s, 0s;
			li{
				a{
					-webkit-transform: translateX(0);
					transform: translateX(0);
					opacity:1;
					-webkit-transition: none;
					transition: none;
				}
			}
		}
	}
	.transform.build-menu-animating.build-menu-close {
		.header__nav {
			-webkit-transition-duration:0s, 0.3s;
			transition-duration:0s, 0.3s;
			-webkit-transition-delay:1.2s , 0.6s;
			transition-delay:1.2s, 0.6s;
		}
	}
} */


/* ----------------------------------------------------------------
	footer
----------------------------------------------------------------- */
.footer {
  background: url(../images/w3gflorist_test1/common/contact-bg.jpg) no-repeat 50% 0;
  background-size: cover;
  text-align: center;
}
.footer section {
  padding-top: 90px;
  padding-bottom: 90px;
}
#footer {
  background: #ddd !important;
}
#footer-left {
  max-width: ;
}
@media (max-width: 464px) {
  #footer-left img {
    margin: 0 0 0 0 !important;
  }
}
#footer-right {
  max-width: ;
}
@media (max-width: 464px) {
  #footer-right {
    background: ghostwhite;
    float: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 3vw 1vw 0 !important;
  }
  #footer-right p.large {
    float: none !important;
    width: 80% !important;
  }
}
#footer p.company {
}
@media (max-width: 464px) {
  #footer p.company {
    position: absolute;
    left: 24vw;
    margin: 0 0 0 0; 
    max-width: 62vw;
  }
  #footer p.company text.japa {
    display: none;
  }
}
#footer p.quiet {
  font-size: 0.8em !important;
  /* margin: 0 0 1.2em 0 !important; */
}
@media (max-width: 464px) {
  #footer p.quiet {
    font-size: 0.8em !important;
    margin: 0 0 0.4em 0 !important;
  }
}


	/* ------------------------------------------------------
		.footer section
	------------------------------------------------------- */
@media (max-width: 1240px) {
  .footer section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 980px) {
  .footer section {
    padding-top: 45px;
    padding-bottom: 45px;
  }
}
@media (max-width: 767px) {
  .footer section {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}


	/* ------------------------------------------------------
		.footer h2
	------------------------------------------------------- */
.footer h2 {
  margin: 0 0 40px 0;
  text-align: center;
}
.footer h2 img {
  height: 27px;
}
@media (max-width: 767px) {
  .footer h2 img {
    height: 21px;
  }
}
.footer h2 span {
  padding: 0 0 15px 0;
}


	/* ------------------------------------------------------
		.footer p
	------------------------------------------------------- */
.footer p {
  line-height: 1.8;
  margin: 0 0 20px 0;
}
@media (max-width: 767px) {
  .footer p {
    margin: 0;
  }
}
@media (max-width: 464px) {
  #footer p {
    margin-bottom: 0.4em !important;
    float: right;
    max-width: 53vw;
  }
}


	/* ------------------------------------------------------
		.footer .btn
	------------------------------------------------------- */
.footer .btn {
  margin: 0 auto;
  width: 30%;
}
@media (max-width: 980px) {
  .footer .btn {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .footer .btn {
    padding-top: 30px;
  }
  .footer .btn a {
    padding: 15px 0;
    font-size: 3.5vw;
  }
}


	/* ------------------------------------------------------
		.footer-pagetop
	------------------------------------------------------- */
.footer-pagetop {
  border-top: 1px dotted #aaa;
  background-color: #fff;
  color: #333;
}
.footer-pagetop a {
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  display: block;
  padding-top: 35px;
  padding-bottom: 20px;
  text-align: center;
  line-height: 1;
}
@media (max-width: 767px) {
  .footer-pagetop a {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 3.5vw;
  }
}

	/* ------------------------------------------------------
		.footer-pagetop a:
	------------------------------------------------------- */
.footer-pagetop a:before {
  content: '';
  position: absolute;
  top: calc( 50% - 1em);
  left: 50%;
  width: 6px;
  height: 6px;
  border: 0 none;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  transform: translateY(3px) rotate(45deg);
  margin: 0 0 0 -4px;
  transition: transform 0.3s;
}
@media (min-width: 981px) {
  .footer-pagetop a:hover:before {
    transform: translateY(0) rotate(45deg);
  }
}


	/* ------------------------------------------------------
		.footer small
	------------------------------------------------------- */
.footer small {
  background-color: #563535;
  color: #fff;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 40px;
}
.footer small a {
  color: #fff;
  text-decoration: none;
}


/* ----------------------------------------------------------------
	link
----------------------------------------------------------------- */
.link {
  color: #ff781d;
  text-decoration: underline;
}
.link:hover {
  text-decoration: none;
}


/* ----------------------------------------------------------------
	btn
----------------------------------------------------------------- */
.btn {
  cursor: pointer;
  display: block;
  line-height: 1;
  padding: 1.5em 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 767px) {
  .btn {
    padding-top: 0;
  }
}
.btn a {
  display: block;
  padding: 25px 0;
  border-radius: 5px;
  background-color: #f47776;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 3px 0 #de514f;
  position: relative;
}
.btn a span {
  line-height: 1.3;
}
.btn a span:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border: 0 none;
  border-bottom: 2px solid;
  border-left: 2px solid;
  -ms-transform: translateX(-5px) rotate(-135deg);
  transform: translateX(-5px) rotate(-135deg);
  margin: -4px 0 0 0;
}
@media (max-width: 767px) {
  .btn a span:before {
    margin: -4px 0 0 0;
  }
}
.btn a span br {
  display: none;
}
@media (max-width: 980px) {
  .btn a span br {
    display: block;
  }
}
@media (max-width: 767px) {
  .btn a span br {
    display: none;
  }
}
@media (min-width: 981px) {
  .btn a:hover {
    box-shadow: none;
    transform: translate3d(0, 3px, 0);
  }
}


/* ----------------------------------------------------------------
	common
----------------------------------------------------------------- */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1240px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 980px) {
  .wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 767px) {
  .wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.wrap--narrow {
  max-width: 960px;
  margin: 0 auto;
}

/*multi colum*/
.col {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col__box {
  position: relative;
}

.col5 .col__box {
  width: 18.5%;
  margin-right: 1.875%;
}
@media (max-width: 767px) {
  .col5 .col__box {
    width: 47%;
    margin-right: 6%;
  }
}
.col5 .col__box:nth-child(5n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .col5 .col__box:nth-child(5n) {
    margin-right: 6%;
  }
}
@media (max-width: 767px) {
  .col5 .col__box:nth-child(2n) {
    margin-right: 0;
  }
}

.col3 .col__box {
  width: 31.3333%;
  margin-right: 3%;
}
@media (max-width: 767px) {
  .col3 .col__box {
    width: 100%;
    margin-right: 0;
  }
}
.col3 .col__box:nth-child(3n) {
  margin-right: 0 !important;
}
@media (max-width: 767px) {
  .col3 .col__box:nth-child(3n) {
    margin-right: 6%;
  }
}
@media (max-width: 767px) {
  .col3 .col__box:nth-child(2n) {
    margin-right: 0;
  }
}

.col2 .col__box {
  width: 48.5%;
  margin-right: 3%;
}
@media (max-width: 767px) {
  .col2 .col__box {
    width: 100%;
    margin-right: 0;
  }
}
.col2 .col__box:nth-child(2n) {
  margin-right: 0;
}

/*
.col6 .col__box:nth-child(n+7),
.col5 .col__box:nth-child(n+6),
.col4 .col__box:nth-child(n+5),
.col3 .col__box:nth-child(n+4),
.col2 .col__box:nth-child(n+3) {
	margin-top: 0px;
}
*/
@media (max-width: 767px) {
  .sp--none {
    display: none;
  }
}

.sp--only {
  display: none;
}
@media (max-width: 767px) {
  .sp--only {
    display: block;
  }
}

.swiper-lazy,
.b-lazy {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.swiper-lazy.swiper-lazy-loaded,
.b-lazy.b-loaded {
  opacity: 1;
}


	/* ----------------------------------------------------------------
		common / #main__w3gflorist begins here
	----------------------------------------------------------------- */
#main__w3gflorist {
  /* margin-top: 65px; */
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* overflow: hidden; */
  background: radial-gradient(ghostwhite, transparent);
}
#main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
}
@media (max-width: 980px) {
  #main__w3gflorist {
  /* margin-top: 60px; */
  }
  #main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
  }
}
@media (max-width: 866px) {
  #main__w3gflorist {
    margin-top: 55px;
  }
  #main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
  }
}
@media (max-width: 767px) {
  #main__w3gflorist {
    margin-top: 55px;
  }
  #main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
  }
}
@media (max-width: 500px) {
  #main__w3gflorist {
    margin-top: 55px;
  }
  #main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
  }
}
@media (max-width: 464px) {
  #main__w3gflorist {
    margin-top: 55px;
  }
  #main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
  position: relative;
  top: -29px;
  opacity: 1;
  }
}
@media (max-width: 359px) {
  #main__w3gflorist {
    margin-top: 55px;
  }
  #main__w3gflorist .centerlogo{
  float: left;
  margin: 9% 25%;
  position: fixed;
  top: 11%;
  opacity: 0.2;
  }
}

.change #main__w3gflorist,
.change #footer {
  -webkit-animation: showOut 0.6s;
  animation: showOut 0.6s;
}

.transform #main__w3gflorist,
.transform #footer {
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0;
}

.complete #main__w3gflorist {
  -webkit-animation: showIn 0.6s;
  animation: showIn 0.6s;
}
#main__w3gflorist .page-content {
  max-width: 96% !important;
  min-width: 0px !important;
  margin: 0 auto 6vh !important;
}
	/* ----------------------------------------------------------------
		common / #main__w3gflorist ends here
	----------------------------------------------------------------- */




@-webkit-keyframes showOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes showOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes showIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes showIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes showIn2 {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes showIn2 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.alt-title {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}

.js .inview-1,
.js .inview-2,
.js .inview-3,
.js .inview-4 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
}


/* ----------------------------------------------------------------
	hero
----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-image: url(../images/w3gflorist_test1/business/main_bg.jpg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 0 0;
}
.hero:before, .hero:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.hero:before {
  z-index: 1;
  background-image: url(../images/w3gflorist_test1/business/text.png);
  background-repeat: no-repeat;
  background-size: 45% auto;
  background-position: 10% 40%;
  opacity: 0;
}
@media (min-width: 1360px) {
  .hero:before {
    background-size: 40% auto;
  }
}
@media (max-width: 980px) {
  .hero:before {
    background-size: 50% auto;
  }
}
@media (max-width: 767px) {
  .hero:before {
    background-image: url(../images/w3gflorist_test1/business/text-sp.png);
    background-size: auto 60%;
    background-position: 10% 50%;
  }
}
.hero:after {
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  opacity: 0;
}
.hero.loaded:before {
  opacity: 1;
  animation: fadeIn 2s;
}
.hero.loaded:after {
  opacity: 1;
  animation: zoom110to100 2s;
}
.hero__text {
  position: relative;
  z-index: 1;
  height: 0;
  margin: 0 auto;
  padding-top: 40%;
  width: 100%;
}
@media (max-width: 980px) {
  .hero__text {
    padding-top: 50%;
  }
}
@media (max-width: 767px) {
  .hero__text {
    padding-top: 56.25%;
  }
}

/* ----------------------------------------------------------------
	contents__nav
----------------------------------------------------------------- */
.contents__nav {
  width: 100%;
  position: relative;
  z-index: 2;
}
.contents__nav ul {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media (max-width: 1240px) {
  .contents__nav ul {
    margin: 0 0px;
  }
}
@media (max-width: 980px) {
  .contents__nav ul {
    padding: 20px 0;
  }
}
@media (max-width: 767px) {
  .contents__nav ul {
    margin: 0;
    padding: 10px 0;
  }
}
.contents__nav ul li {
  width: 25%;
  text-align: center;
  background: url(../images/w3gflorist_test1/common/line-vertical.png) repeat-y 100% 0;
  background-size: 2px auto;
  padding-bottom: 20px;
}
.contents__nav ul li:first-child {
  background: url(../images/w3gflorist_test1/common/line-vertical.png) repeat-y 0 0, url(../images/common/line-vertical.png) repeat-y 100% 0;
  background-size: 2px auto;
}
@media (max-width: 1240px) {
  .contents__nav ul li:first-child {
    background: url(../images/w3gflorist_test1/common/line-vertical.png) repeat-y 100% 0;
    background-size: 2px auto;
  }
  .contents__nav ul li:last-child {
    background: none;
  }
}
@media (max-width: 980px) {
  .contents__nav ul li {
    padding-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .contents__nav ul li {
    background-size: 1px auto;
  }
  .contents__nav ul li:first-child {
    background-size: 1px auto;
  }
  .contents__nav ul li:last-child {
    background: none;
  }
}
.contents__nav ul li a {
  padding-top: 70px;
  display: block;
  position: relative;
}
@media (max-width: 980px) {
  .contents__nav ul li a {
    padding-top: 40px;
  }
}
@media (max-width: 767px) {
  .contents__nav ul li a {
    padding-top: 25px;
  }
}
.contents__nav ul li a:before {
  content: '';
  display: block;
  width: 117px;
  height: 117px;
  position: absolute;
  top: -70px;
  left: 50%;
  margin: 0 0 0 -58px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 117px 117px;
}
@media (max-width: 980px) {
  .contents__nav ul li a:before {
    width: 90px;
    height: 90px;
    background-size: 90px 90px;
    margin: 0 0 0 -45px;
  }
}
@media (max-width: 767px) {
  .contents__nav ul li a:before {
    position: absolute;
    top: -30px;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    margin: 0 0 0 -25px;
  }
}
li:nth-child(1) a:before {
  background-image: url(../images/w3gflorist_test1/business/btn-001.png);
}
li:nth-child(2) a:before {
  background-image: url(../images/w3gflorist_test1/business/btn-002.png);
}
li:nth-child(3) a:before {
  background-image: url(../images/w3gflorist_test1/business/btn-003.png);
}
li:nth-child(4) a:before {
  background-image: url(../images/w3gflorist_test1/business/btn-004.png);
}
.contents__nav ul li a span {
  display: block;
  position: relative;
  padding: 0 0 25px 0;
}
@media (max-width: 767px) {
  .contents__nav ul li a span {
    padding: 0 0 15px 0;
  }
}
.contents__nav ul li a span:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #f77383;
  border-left: 2px solid #f77383;
  -ms-transform: translateX(-4px) rotate(-45deg);
  transform: translateX(-4px) rotate(-45deg);
  margin: 0 -10px 0 0;
  transition: all 0.3s;
}
.contents__nav ul li a span img {
  height: 24px;
}
@media (max-width: 980px) {
  .contents__nav ul li a span img {
    height: 20px;
  }
}
@media (max-width: 767px) {
  .contents__nav ul li a span img {
    height: 11px;
  }
}
@media (max-width: 359px) {
  .contents__nav ul li a span img {
    height: 10px;
  }
}
@media (min-width: 981px) {
  .contents__nav ul li a {
    transition: opacity 0.3s;
  }
  .contents__nav ul li a:hover {
    opacity: 0.8;
  }
  .contents__nav ul li a:hover span:after {
    bottom: -3px;
  }
}

/* ----------------------------------------------------------------
	celebration
----------------------------------------------------------------- */
.celebration header {
  background: url(../images/w3gflorist_test1/business/celebration-01-bg.jpg) no-repeat 0 0;
  background-size: cover;
  text-align: center;
}
.celebration header .header-img {
  padding: 50px 0;
  position: relative;
}
.celebration header .header-img:before, .celebration header .header-img:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 375px;
  height: 364px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 375px 364px;
  z-index: 2;
}
@media (max-width: 1240px) {
  .celebration header .header-img:before, .celebration header .header-img:after {
    width: 300px;
    height: 291px;
    background-size: 300px 291px;
  }
}
@media (max-width: 980px) {
  .celebration header .header-img:before, .celebration header .header-img:after {
    display: none;
  }
}
.celebration header .header-img:before {
  left: -30px;
  background-image: url(../images/w3gflorist_test1/business/celebration-01-01.png);
}
@media (max-width: 1240px) {
  .celebration header .header-img:before {
    left: 0;
  }
}
.celebration header .header-img:after {
  top: 7%;
  right: -30px;
  background-image: url(../images/w3gflorist_test1/business/celebration-01-02.png);
}
@media (max-width: 1240px) {
  .celebration header .header-img:after {
    right: 0;
  }
}
@media (max-width: 1240px) {
  .celebration header .header-img {
    padding: 20px;
  }
}
.celebration header h2 {
  position: relative;
  padding-bottom: 30px;
  margin: 0 0 25px 0;
}
@media (max-width: 767px) {
  .celebration header h2 {
    padding-bottom: 20px;
    margin: 0 0 15px 0;
  }
}
.celebration header h2:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150px;
  height: 4px;
  background: url(../images/w3gflorist_test1/common/line-side.png) repeat-x 0 0;
  background-size: auto 4px;
  margin: 0 0 0 -75px;
}
.celebration header h2 img {
  height: 56px;
}
@media (max-width: 980px) {
  .celebration header h2 img {
    height: 45px;
  }
}
@media (max-width: 767px) {
  .celebration header h2 img {
    height: 30px;
  }
}
.celebration header p {
  font-weight: bold;
  line-height: 1.8;
  font-size: 18px;
}
@media (max-width: 767px) {
  .celebration header p {
    text-align: left;
    font-size: 4vw;
  }
  .celebration header p br {
    display: none;
  }
}
.celebration-line {
  padding: 70px 0;
  position: relative;
  border-left: 2px solid #fbd4d4;
  border-right: 2px solid #fbdd95;
}
@media (max-width: 980px) {
  .celebration-line {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .celebration-line {
    padding: 30px 10px;
  }
}
.celebration-line:before, .celebration-line:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: -webkit-linear-gradient(left, #fbd4d4, #fbdd95);
  background: linear-gradient(to right, #fbd4d4, #fbdd95);
}
.celebration-line:after {
  position: absolute;
  top: 100%;
  margin: -2px 0 0 0;
}
.celebration-recommend {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0;
}
@media (max-width: 1240px) {
  .celebration-recommend {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 980px) {
  .celebration-recommend {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 767px) {
  .celebration-recommend {
    padding-left: 10px;
    padding-right: 10px;
    margin: 30px auto;
  }
}
.celebration-recommend h3 {
  text-align: center;
  margin: 0 0 50px 0;
}
@media (max-width: 767px) {
  .celebration-recommend h3 {
    margin: 0 0 30px 0;
  }
}
.celebration-recommend h3 img {
  height: 45px;
}
@media (max-width: 767px) {
  .celebration-recommend h3 img {
    height: 30px;
  }
}
.celebration-recommend h4 {
  margin: 0 0 30px 0;
}
@media (max-width: 767px) {
  .celebration-recommend h4 {
    margin: 0 0 20px 0;
  }
}
.celebration-recommend h4 img {
  height: 46px;
}
@media (max-width: 980px) {
  .celebration-recommend h4 img {
    height: 36px;
  }
}
@media (max-width: 767px) {
  .celebration-recommend h4 img {
    height: 26px;
  }
}
.celebration-recommend .btn a {
  font-size: 18px;
}
@media (max-width: 980px) {
  .celebration-recommend .btn a {
    padding: 15px 0;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .celebration-recommend .btn a {
    margin: 10px 0 0 0;
    font-size: 4vw;
  }
}
.celebration-recommend-first {
  margin-bottom: 80px;
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  .celebration-recommend-first {
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .celebration-recommend-first {
    margin-bottom: 30px;
  }
}
.celebration-recommend-first-contents {
  width: 47.5%;
}
@media (max-width: 980px) {
  .celebration-recommend-first-contents {
    width: 100%;
  }
}
.celebration-recommend-first-contents .lead {
  background-color: #fcf4ed;
  padding: 20px;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 18px;
}
.celebration-recommend-first-contents .lead b {
  color: #dc243b;
}
.celebration-recommend dl {
  font-weight: bold;
}
.celebration-recommend dl:before, .celebration-recommend dl:after {
  display: table;
  content: '';
}
.celebration-recommend dl:after {
  clear: both;
}
.celebration-recommend dl dt {
  float: left;
  width: 13em;
  height: 100%;
  text-align: center;
  color: #dc243b;
  padding: 10px 0;
  font-size: 13px;
  margin: 0 10px 0 0;
  border-left: 2px solid #f6a09f;
  border-right: 2px solid #fac75a;
  position: relative;
}
@media (max-width: 767px) {
  .celebration-recommend dl dt {
    float: none;
  }
}
.celebration-recommend dl dt:before, .celebration-recommend dl dt:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: -webkit-linear-gradient(left, #f6a09f, #fac75a);
  background: linear-gradient(to right, #f6a09f, #fac75a);
}
.celebration-recommend dl dt:after {
  position: absolute;
  top: 100%;
  margin: -2px 0 0 0;
}
.celebration-recommend dl dt span {
  /* background: url(../images/w3gflorist_test1/business/icon-01.png) no-repeat 0 50%; */
  background-size: 15px 14px;
  padding: 0 0 0 20px;
}
.celebration-recommend dl dd {
  line-height: 32px;
}
@media (max-width: 980px) {
  .celebration-recommend dl dd {
    line-height: 1.8;
  }
}
@media (max-width: 767px) {
  .celebration-recommend dl dd {
    margin: 10px 0 0 0;
  }
}
.celebration-recommend-img {
  width: 47.5%;
  margin-right: 5%;
}
@media (max-width: 980px) {
  .celebration-recommend-img {
    width: 60%;
    margin: 0 auto 40px auto;
  }
}
@media (max-width: 767px) {
  .celebration-recommend-img {
    width: 100%;
    margin: 0 auto 20px auto;
  }
}
.celebration-recommend-boxes {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.celebration-recommend-box {
  width: 31.33%;
  margin-right: 3%;
  position: relative;
  padding-bottom: 120px;
}
@media (max-width: 980px) {
  .celebration-recommend-box {
    padding-bottom: 110px;
  }
}
@media (max-width: 767px) {
  .celebration-recommend-box {
    width: 100%;
    margin-right: 0;
    padding-bottom: 0;
    margin-bottom: 20px;
  }
  .celebration-recommend-box:last-child {
    margin-bottom: 0;
  }
}
.celebration-recommend-box:last-child {
  margin-right: 0;
}
.celebration-recommend-box p {
  line-height: 2;
}
.celebration-recommend-box h4 {
  margin: 25px 0 15px 0;
}
@media (max-width: 767px) {
  .celebration-recommend-box h4 {
    margin: 15px 0 10px 0;
  }
}
.celebration-recommend-box h4 img {
  height: 24px;
}
@media (max-width: 767px) {
  .celebration-recommend-box h4 img {
    height: 20px;
  }
}
.celebration-recommend-box-category {
  position: absolute;
  bottom: 0;
  width: 100%;
}
@media (max-width: 767px) {
  .celebration-recommend-box-category {
    position: static;
  }
}
.celebration-recommend-box-category dl {
  margin-bottom: 0;
}
.celebration-recommend-box-category dl dt {
  float: none;
  margin: 0 0 10px 0;
}
.celebration-recommend-box-category dl dd {
  margin: 0;
}
.celebration-recommend-box .btn {
  position: absolute;
  bottom: 0;
  width: 100%;
}
@media (max-width: 767px) {
  .celebration-recommend-box .btn {
    position: static;
  }
}
.celebration-01 .celebration-recommend-box {
  padding-bottom: 220px;
}
@media (max-width: 980px) {
  .celebration-01 .celebration-recommend-box {
    padding-bottom: 200px;
  }
}
@media (max-width: 767px) {
  .celebration-01 .celebration-recommend-box {
    padding-bottom: 0;
  }
}
.celebration-01 .celebration-recommend-box .btn {
  position: static;
  position: relative;
}
.celebration-01 .celebration-recommend-box .btn a {
  font-size: 18px;
}
@media (max-width: 980px) {
  .celebration-01 .celebration-recommend-box .btn a {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .celebration-01 .celebration-recommend-box .btn a {
    margin: 10px 0 0 0;
    font-size: 4vw;
  }
}
.celebration-02 header {
  background: url(../images/w3gflorist_test1/business/celebration-02-bg.jpg) no-repeat 0 0;
}
.celebration-02 header .header-img:before {
  background-image: url(../images/w3gflorist_test1/business/celebration-02-01.png);
}
.celebration-02 header .header-img:after {
  background-image: url(../images/w3gflorist_test1/business/celebration-02-02.png);
}
.celebration-03 header {
  background: url(../images/w3gflorist_test1/business/celebration-03-bg.jpg) no-repeat 0 0;
}
.celebration-03 header .header-img:before {
  left: 50px;
  background-image: url(../images/w3gflorist_test1/business/celebration-03-01.png);
  width: 230px;
  height: 380px;
  background-size: 230px 380px;
}
.celebration-03 header .header-img:after {
  background-image: url(../images/w3gflorist_test1/business/celebration-03-02.png);
}
.celebration-04 header {
  background: url(../images/w3gflorist_test1/business/celebration-04-bg.jpg) no-repeat 0 0;
}
.celebration-04 header .header-img:before {
  background-image: url(../images/w3gflorist_test1/business/celebration-04-01.png);
}
.celebration-04 header .header-img:after {
  background-image: url(../images/w3gflorist_test1/business/celebration-04-02.png);
}
.celebration-04 .celebration-recommend-box {
  width: 47.5%;
  margin-right: 5%;
}
.celebration-04 .celebration-recommend-box:last-child {
  margin-right: 0;
}
@media (max-width: 767px) {
  .celebration-04 .celebration-recommend-box {
    width: 100%;
    margin-right: 0;
  }
}

/* ----------------------------------------------------------------
	beginner
----------------------------------------------------------------- */
.beginner header {
  background: url(../images/w3gflorist_test1/business/beginner-bg.jpg) no-repeat 0 0;
  background-size: cover;
  padding: 100px 0 250px 0;
}
@media (max-width: 980px) {
  .beginner header {
    padding: 60px 0 220px 0;
  }
}
@media (max-width: 767px) {
  .beginner header {
    padding: 40px 0 200px 0;
  }
}
.beginner header h2 img {
  height: 92px;
}
@media (max-width: 980px) {
  .beginner header h2 img {
    height: 80px;
  }
}
@media (max-width: 767px) {
  .beginner header h2 img {
    height: 50px;
  }
}
@media (max-width: 767px) {
  .beginner header p {
    font-size: 4vw;
  }
  .beginner header p br {
    display: none;
  }
}
.beginner-boxes {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -160px auto 0 auto;
}
.beginner-box {
  width: 31.33%;
  margin-right: 3%;
  background-color: #fff;
  padding: 50px 25px 25px 25px;
  box-shadow: 0 0 20px #ccc;
  position: relative;
  counter-increment: chapter;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .beginner-box {
    padding: 50px 15px 15px 15px;
  }
}
@media (max-width: 767px) {
  .beginner-box {
    width: 100%;
    margin: 0 0 30px 0;
  }
}
.beginner-box:last-child {
  margin-right: 0;
}
.beginner-box:before {
  content: counter(chapter);
  color: #fff;
  border-radius: 50%;
  background: #f47776;
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  top: -15px;
  left: 50%;
  font-size: 24px;
  line-height: 50px;
  vertical-align: middle;
  text-align: center;
  margin: 0 0 0 -25px;
  font-style: italic;
}
.beginner-box dl dt {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  margin: 0 0 50px 0;
  background-repeat: no-repeat;
  background-position: 50% 0;
  padding: 80px 0 0 0;
}
li:nth-child(1) dt {
  /* background-image: url(../images/w3gflorist_test1/business/05-icon01.gif); */
  background-size: 80px auto;
}
li:nth-child(2) dt {
  /* background-image: url(../images/w3gflorist_test1/business/05-icon02.gif); */
  background-size: 73px auto;
}
li:nth-child(3) dt {
  /* background-image: url(../images/w3gflorist_test1/business/05-icon03.gif); */
  background-size: 63px auto;
}
@media (max-width: 980px) {
  .beginner-box dl dt {
    font-size: 20px;
    margin: 0 0 30px 0;
  }
}
.beginner-box dl dt span {
  /* background: url(../images/w3gflorist_test1/common/line-side-pink.png) repeat-x 0 100%; */
  background-size: auto 2px;
  padding: 0 0 25px 0;
}
@media (max-width: 980px) {
  .beginner-box dl dt span {
    padding: 0 0 15px 0;
  }
}
.beginner-box dl dd {
  margin: 0;
  line-height: 1.8;
  font-weight: bold;
  font-size: 16px;
}
.beginner-box dl dd span {
  font-weight: normal;
  font-size: 13px;
  display: block;
  margin: 1em 0 0 0;
}
.beginner-faq {
  max-width: 1200px;
  margin: 80px auto 100px auto;
  padding: 0;
}
@media (max-width: 1240px) {
  .beginner-faq {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 980px) {
  .beginner-faq {
    padding-left: 15px;
    padding-right: 15px;
    margin: 40px auto 60px auto;
  }
}
@media (max-width: 767px) {
  .beginner-faq {
    padding-left: 10px;
    padding-right: 10px;
    margin: 20px auto 60px auto;
  }
}
.beginner-faq h3 {
  text-align: center;
  font-size: 26px;
  margin: 0 0 50px 0;
}
@media (max-width: 767px) {
  .beginner-faq h3 {
    font-size: 6vw;
  }
}
.beginner-faq h3 span {
  background: url(../images/w3gflorist_test1/common/line-side.png) repeat-x 0 100%;
  background-size: auto 3px;
  padding: 0 0 15px 0;
}
.beginner-faq dl dt {
  margin: 0;
  font-weight: bold;
  font-size: 20px;
  background: url(../images/w3gflorist_test1/common/05-icon04.gif) no-repeat 0 0.2em;
  background-size: 26px auto;
  padding: 0 0 15px 35px;
}
@media (max-width: 980px) {
  .beginner-faq dl dt {
    margin: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 767px) {
  .beginner-faq dl dt {
    line-height: 1.5;
    padding-bottom: 10px;
    font-size: 4.5vw;
  }
}
.beginner-faq dl dd {
  margin: 0;
  margin: 0 0 60px 0;
  line-height: 1.8;
}
@media (max-width: 980px) {
  .beginner-faq dl dd {
    margin: 0 0 30px 0;
  }
}

/* ----------------------------------------------------------------
	page
----------------------------------------------------------------- */
.page header {
  background-size: 0 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  padding-top: 325px;
  margin: 0 0 40px 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image: url(../images/w3gflorist_test1/common/header.jpg);
}
@media (max-width: 980px) {
  .page header {
    margin: 0 0 40px 0;
    padding-top: 25%;
  }
}
@media (max-width: 767px) {
  .page header {
    margin: 0 0 30px 0;
    padding-top: 37.5%;
  }
}
.page header:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #fdf6f2;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: cover;
}
@media (max-width: 980px) {
  .page header:before {
    background-position: 100% 50%;
    background-size: auto 100%;
  }
}
@media (max-width: 767px) {
  .page header:before {
    background-position: 100% 50%;
  }
}
.page header.loaded:before {
  opacity: 1;
  animation: zoom110to100 2s;
}
.page header.loaded h2 {
  opacity: 1;
  animation: fadeIn2 2s;
}
.page header.loaded h2 img {
  animation: fadeIn 2s;
}
.page header h2 {
  line-height: 1;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Yu Mincho", "YuMincho", serif;
  font-weight: bold;
  font-size: 46px;
  opacity: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
@media (max-width: 980px) {
  .page header h2 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .page header h2 {
    font-size: 8vw;
  }
}
.page header h2 img {
  display: block;
}
.page header h2 img:nth-child(1) {
  height: 46px;
  margin: 0 0 10px 0;
}
@media (max-width: 980px) {
  .page header h2 img:nth-child(1) {
    height: 36px;
  }
}
@media (max-width: 767px) {
  .page header h2 img:nth-child(1) {
    height: 24px;
  }
}
.page header h2 img:nth-child(2) {
  height: 18px;
}
@media (max-width: 980px) {
  .page header h2 img:nth-child(2) {
    height: 15px;
  }
}
@media (max-width: 767px) {
  .page header h2 img:nth-child(2) {
    height: 13px;
  }
}

/* ----------------------------------------------------------------
	product
----------------------------------------------------------------- */
.product {
  margin-bottom: 60px;
}
@media (max-width: 980px) {
  .product {
    margin-bottom: 0;
  }
}
.product header {
  margin-top: 60px;
}
.product header h2 {
  width: auto;
  left: auto;
  text-align: left;
}
@media (max-width: 980px) {
  .product header {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .product header h2 {
    left: 10px;
    width: auto;
    text-align: left;
  }
}
.product--arrangement header {
  background-image: url(../images/arrangement/header.jpg);
}
.product--stand header {
  background-image: url(../images/stand/header.jpg);
}
.product--kochoran header {
  background-image: url(../images/kochoran/header.jpg);
}
.product--ornamental header {
  background-image: url(../images/ornamental/header.jpg);
}
.product--preserved header {
  background-image: url(../images/preserved/header.jpg);
}
.product--season header {
  background-image: url(../images/season/header.jpg);
}
.product--bouquet header {
  background-image: url(../images/bouquet/header.jpg);
}
.product--summer-gift header {
  background-image: url(../images/summer-gift/header.jpg);
}
.product--winter-gift header {
  background-image: url(../images/winter-gift/header.jpg);
}
.product--christmas header {
  background-image: url(../images/christmas/header.jpg);
}
.product--wedding-anniversary header {
  background-image: url(../images/wedding-anniversary/header.jpg);
}
.product--birthday header {
  background-image: url(../images/birthday/header.jpg);
}
.product--retirement header {
  background-image: url(../images/retirement/header.jpg);
}
.product--get-well header {
  background-image: url(../images/get-well/header.jpg);
}
.product--long-life header {
  background-image: url(../images/long-life/header.jpg);
}
.product .lead {
  padding: 0 0 30px 0;
}
@media (max-width: 767px) {
  .product .lead {
    line-height: 1.8;
  }
}
.product-info {
  position: relative;
  padding: 0 0 15px 0;
}
.product-info p {
  line-height: 34px;
  font-size: 13px;
}
@media (max-width: 767px) {
  .product-info p {
    line-height: calc( 2em + 2px );
    font-size: 3vw;
  }
}
.product-info-btn {
  position: absolute;
  right: 0;
  bottom: 15px;
  font-size: 13px;
  width: auto;
}
.product-info-btn:before, .product-info-btn:after {
  display: table;
  content: '';
}
.product-info-btn:after {
  clear: both;
}
@media (max-width: 767px) {
  .product-info-btn {
    font-size: 3vw;
  }
}
.product-info-btn p {
  float: left;
  display: inline-block;
  margin: 0 0.5em 0 0;
  line-height: 34px;
}
@media (max-width: 767px) {
  .product-info-btn p {
    line-height: calc( 2em + 2px );
  }
}
.product-info-btn ul {
  line-height: 30px;
  float: left;
  display: table;
  border: 2px solid #f47776;
  border-radius: 5px;
}
@media (max-width: 767px) {
  .product-info-btn ul {
    line-height: 2em;
  }
}
.product-info-btn ul li {
  line-height: 24px;
  padding: 5px;
  cursor: pointer;
  display: table-cell;
}
@media (max-width: 767px) {
  .product-info-btn ul li {
    line-height: 1em;
    padding: 0.5em;
  }
}
@media (min-width: 981px) {
  .product-info-btn ul li:hover {
    color: #fff;
    background-color: #f47776;
  }
}
.product-info-btn ul li.is-cheked {
  background-color: #f47776;
  color: #fff;
}
.product-list {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.product-box {
  width: calc( 25% - 15px );
  margin-right: 20px;
  padding-bottom: 6em;
  position: relative;
}
@media (max-width: 767px) {
  .product-box {
    font-size: 3.25vw;
    width: calc( 50% - 5px );
    margin-right: 10px;
  }
}
.product-box:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 767px) {
  .product-box:nth-child(4n) {
    margin-right: 6%;
  }
}
@media (max-width: 767px) {
  .product-box:nth-child(2n) {
    margin-right: 0;
  }
}
.product-id, .product-price, .product-size, .product-desc {
  border-bottom: dotted 1px #ddd;
  padding: 10px 0;
  font-size: 13px;
}
.product-id:before, .product-id:after, .product-price:before, .product-price:after, .product-size:before, .product-size:after, .product-desc:before, .product-desc:after {
  display: table;
  content: '';
}
.product-id:after, .product-price:after, .product-size:after, .product-desc:after {
  clear: both;
}
@media (max-width: 767px) {
  .product-id, .product-price, .product-size, .product-desc {
    padding: 0.5em 0;
    font-size: 3.25vw;
  }
}
.product-id span, .product-price span, .product-size span, .product-desc span {
  display: block;
}
.product-id span:first-child, .product-price span:first-child, .product-size span:first-child, .product-desc span:first-child {
  float: left;
  width: 5em;
}
@media (max-width: 767px) {
  .product-id span:first-child, .product-price span:first-child, .product-size span:first-child, .product-desc span:first-child {
    width: 4.5em;
  }
}
.product-id span + span, .product-price span + span, .product-size span + span, .product-desc span + span {
  padding-left: 5em;
}
@media (max-width: 767px) {
  .product-id span + span, .product-price span + span, .product-size span + span, .product-desc span + span {
    padding-left: 4.5em;
  }
}
.product-id, .product-price {
  line-height: 1;
}
.product-price span:first-child {
  padding-top: 1px;
}
@media (max-width: 767px) {
  .product-price span:first-child {
    padding-top: 0.325vw;
  }
}
.product-price b {
  font-size: 15px;
  color: #dc243b;
  margin-right: 0.25em;
}
@media (max-width: 767px) {
  .product-price b {
    font-size: 4vw;
  }
}
@media (max-width: 980px) {
  .product-size span:first-child {
    display: none;
  }
  .product-size span + span {
    padding-left: 0;
  }
}
.product-desc {
  border-bottom: 0 none;
  line-height: 1.4;
}
.product-order {
  position: absolute;
  bottom: 2em;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.product-order span {
  font-size: 12px;
  color: #dc243b;
  text-align: center;
  font-weight: bold;
  display: block;
  margin: 0 0 10px 0;
}
@media (max-width: 767px) {
  .product-order span {
    font-size: 3vw;
  }
}
.product-order-btn {
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.product-order-btn li {
  font-size: 12px;
  width: 48.5%;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .product-order-btn li {
    font-size: 3vw;
  }
}
.product-order-btn li:first-child {
  margin: 0 3% 0 0;
}
.product-order-btn li a {
  text-align: center;
  display: block;
  background-color: #f47776;
  border-radius: 2em;
  color: #fff;
  line-height: 1;
  padding: 0.5em 0;
  transition: background-color .5s;
}
@media (min-width: 981px) {
  .product-order-btn li a:hover {
    background-color: #f4a0a0;
  }
}

/* ----------------------------------------------------------------
	req-item
----------------------------------------------------------------- */
.req-item {
  font-size: 14px;
}
@media (max-width: 767px) {
  .req-item {
    font-size: 3.75vw;
  }
}
.req-item__img {
  width: 220px;
}
.req-item__name {
  font-weight: bold;
}
.req-item__price b {
  font-size: 110%;
  color: #dc243b;
}

/* ----------------------------------------------------------------
	form
----------------------------------------------------------------- */
#contactform > p {
  text-align: center;
  margin: 0 0 1.5em 0;
  line-height: 1.6;
}

.contact-form-field {
  display: table;
  table-layout: fixed;
  width: 100%;
}
@media (max-width: 767px) {
  .contact-form-field {
    display: block;
  }
}
.contact-form-field--01, .contact-form-field--02, .contact-form-field--03, .contact-form-field--04, .contact-form-field--05 {
  margin-bottom: 2em;
}
.contact-form-field + .contact-form-field {
  margin-top: 1em;
}
@media (max-width: 767px) {
  .contact-form-field + .contact-form-field {
    margin-top: 0.5em;
  }
}
.contact-form h3 {
  text-align: center;
  background-color: #fdf6f2;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  padding: 20px 0;
  margin: 0;
  color: #f47776;
  border-top: 3px solid #f47776;
}
.contact-form h3 + div {
  border: 1px solid #eee;
  border-top: 0 none;
  padding: 40px;
}
@media (max-width: 980px) {
  .contact-form h3 + div {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .contact-form h3 + div {
    padding: 10px;
  }
}
.contact-form .form-label {
  width: 15em;
  display: table-cell;
  vertical-align: top;
}
@media (max-width: 767px) {
  .contact-form .form-label {
    display: block;
    width: auto;
  }
}
.contact-form .form-label label {
  position: relative;
  line-height: 20px;
  padding-top: 6px;
  display: block;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .contact-form .form-label label {
    font-weight: bold;
  }
}
.contact-form .form-label label .must {
  display: inline-block;
  padding: 0.25em 1em;
  border-radius: 3em;
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background-color: #f47776;
  border: 1px solid #f47776;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .contact-form .form-label label .must {
    font-weight: normal;
    top: 0;
    transform: translateY(0%);
  }
}
.contact-form .form-element {
  display: table-cell;
  vertical-align: top;
  padding-left: 20px;
}
@media (max-width: 767px) {
  .contact-form .form-element {
    display: block;
    width: auto;
    padding-left: 0;
  }
}
.contact-form .form-element input[type="text"] {
  width: 75%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .contact-form .form-element input[type="text"] {
    width: 100%;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.5em 0.25em;
    line-height: 1;
  }
}
.contact-form .form-element #preferred_date {
  width: 206px;
}
@media (max-width: 767px) {
  .contact-form .form-element #preferred_date {
    width: calc( 100% - 20px );
  }
}
@media (max-width: 767px) {
  .contact-form .form-element select {
    width: 100%;
  }
}
.contact-form .form-element textarea {
  width: 75%;
  height: 6em;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .contact-form .form-element textarea {
    padding: 0.5em 0.25em;
    line-height: 1.4;
    width: 100%;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
.contact-form .field_error {
  color: #dc243b;
  font-size: 85%;
  line-height: 1;
}
.contact-form-submit {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
@media (max-width: 980px) {
  .contact-form-submit {
    width: 70%;
  }
}
.contact-form-submit input {
  width: 100%;
  display: block;
  padding: 25px 0;
  border-radius: 5px;
  background-color: #f47776;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 3px 0 #de514f;
  position: relative;
  -webkit-appearance: none;
  border: none;
}
@media (max-width: 767px) {
  .contact-form-submit input {
    padding: 15px 0;
    font-size: 3.5vw;
  }
}
.contact-form-submit input:active {
  box-shadow: none;
  transform: translate3d(0, 3px, 0);
}

.datepicker table tr td.active {
  background: #f47776 !important;
  border-color: #f47776 !important;
}

.top .hero {
  background-image: url(../images/w3gflorist_test1/top/main_bg.jpg);
}
.top .hero:before {
  background-image: url(../images/w3gflorist_test1/top/text.png);
  background-size: 35% auto;
  background-position: 50% 50%;
}
@media (min-width: 1360px) {
  .top .hero:before {
    background-size: 30% auto;
  }
}
@media (max-width: 980px) {
  .top .hero:before {
    background-size: 50% auto;
  }
}
@media (max-width: 767px) {
  .top .hero:before {
    background-image: url(../images/w3gflorist_test1/top/text-sp.png);
  }
}
.top .ranking {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0;
}
@media (max-width: 1240px) {
  .top .ranking {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 980px) {
  .top .ranking {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 767px) {
  .top .ranking {
    margin: 30px auto;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.top .ranking h2 {
  text-align: center;
  margin: 0 0 40px 0;
}
@media (max-width: 767px) {
  .top .ranking h2 {
    margin: 0 0 30px 0;
  }
}
.top .ranking h2 img {
  height: 36px;
}
@media (max-width: 767px) {
  .top .ranking h2 img {
    height: 23px;
  }
}
.top .ranking-boxes {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top .ranking-box {
  width: 18.4%;
  margin-right: 2%;
  padding: 35px 0 6em 0;
  position: relative;
}
@media (max-width: 767px) {
  .top .ranking-box {
    width: calc( 50% - 5px );
    margin-right: 10px;
  }
  .top .ranking-box:nth-child(3), .top .ranking-box:nth-child(5) {
    margin-right: 0;
  }
  .top .ranking-box:first-child {
    width: 100%;
    margin-right: 0;
  }
  .top .ranking-box:first-child .ranking-img {
    text-align: center;
  }
}
.top .ranking-box:last-child {
  margin-right: 0;
}
.top .ranking-box:before {
  content: '';
  display: block;
  width: 67px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -34px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 24px;
}
.top .ranking-box:nth-child(1):before {
  background-image: url(../images/w3gflorist_test1/top/ranking-text001.gif);
}
.top .ranking-box:nth-child(2):before {
  background-image: url(../images/w3gflorist_test1/top/ranking-text002.gif);
}
.top .ranking-box:nth-child(3):before {
  background-image: url(../images/w3gflorist_test1/top/ranking-text003.gif);
}
.top .ranking-box:nth-child(4):before {
  background-image: url(../images/w3gflorist_test1/top/ranking-text004.gif);
}
.top .ranking-box:nth-child(5):before {
  background-image: url(../images/w3gflorist_test1/top/ranking-text005.gif);
}
.top .ranking-box dl dt {
  color: #dc243b;
  font-weight: bold;
  margin: 0 0 10px 0;
}
.top .ranking-box dl dt span {
  font-weight: normal;
  font-size: 85%;
  color: #333;
  margin-left: 0.5em;
}
.top .ranking-box dl dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .top .ranking-box dl dd {
    font-size: 3.25vw;
  }
}
.top .celebration-recommend {
  margin-bottom: 100px;
}
@media (max-width: 980px) {
  .top .celebration-recommend {
    margin-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .top .celebration-recommend {
    margin-bottom: 30px;
  }
}
.top .celebration-recommend:nth-child(odd) {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.top .celebration-recommend:nth-child(even) {
  display: -ms-flexbox;
  /*IE10*/
  display: -webkit-box;
  /*Android 4.3>=*/
  display: -webkit-flex;
  /*Safari, Chrome, Opera*/
  display: flex;
  /*IE11, Firefox*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top .celebration-recommend-img-right {
  width: 50%;
  margin-left: 4%;
}
@media (max-width: 767px) {
  .top .celebration-recommend-img-right {
    width: 80%;
    margin: 0 auto;
  }
}
.top .celebration-recommend-img-left {
  width: 50%;
  margin-right: 4%;
}
@media (max-width: 767px) {
  .top .celebration-recommend-img-left {
    width: 80%;
    margin: 0 auto;
  }
}
.top .celebration-recommend-contents {
  width: 46%;
}
@media (max-width: 767px) {
  .top .celebration-recommend-contents {
    width: 100%;
  }
}
.top .celebration-recommend-contents h2 {
  text-align: center;
  margin: 20px 0 40px 0;
}
@media (max-width: 980px) {
  .top .celebration-recommend-contents h2 {
    margin: 0 0 30px 0;
  }
}
@media (max-width: 767px) {
  .top .celebration-recommend-contents h2 {
    margin: 20px 0 30px 0;
  }
}
.top .celebration-recommend-contents h2 span {
  background: url(../images/w3gflorist_test1/common/line-side-pink.png) repeat-x 0 100%;
  background-size: auto 2px;
  padding: 0 0 15px 0;
  position: relative;
  display: inline-block;
}
.top .celebration-recommend-contents h2 span img {
  height: 50px;
}
@media (max-width: 980px) {
  .top .celebration-recommend-contents h2 span img {
    height: 33px;
  }
}
@media (max-width: 767px) {
  .top .celebration-recommend-contents h2 span img {
    height: 25px;
  }
}
.top .celebration-recommend-contents h2 span:before {
  content: '';
  display: block;
  width: 41px;
  height: 41px;
  position: absolute;
  top: 0;
  left: -60px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 41px 41px;
  background-image: url(../images/w3gflorist_test1/top/celebration-text-icon01.gif);
}
@media (max-width: 767px) {
  .top .celebration-recommend-contents h2 span:before {
    width: 30px;
    height: 30px;
    left: -40px;
    background-size: 30px 30px;
  }
}
.top .celebration-recommend-contents h2 span:after {
  content: '';
  display: block;
  width: 31px;
  height: 48px;
  position: absolute;
  top: 0;
  right: -60px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 31px 48px;
  background-image: url(../images/w3gflorist_test1/top/celebration-text-icon02.gif);
}
@media (max-width: 767px) {
  .top .celebration-recommend-contents h2 span:after {
    width: 20px;
    height: 31px;
    right: -35px;
    background-size: 20px 31px;
  }
}
.top .celebration-recommend-contents .btn {
  margin: 0 80px;
}
@media (max-width: 1240px) {
  .top .celebration-recommend-contents .btn {
    margin: 0 40px;
  }
}
@media (max-width: 980px) {
  .top .celebration-recommend-contents .btn {
    margin: 0;
  }
}
@media (max-width: 767px) {
  .top .celebration-recommend-contents .btn {
    margin: 0 5%;
  }
}
.top .celebration-recommend-contents .btn a {
  padding: 15px 0;
  border-radius: 40px;
}
.top .celebration-recommend p {
  font-size: 14px;
  line-height: 2.8;
  padding: 0 80px;
  margin: 0 0 30px 0;
}
@media (max-width: 1240px) {
  .top .celebration-recommend p {
    padding: 0 40px;
  }
}
@media (max-width: 980px) {
  .top .celebration-recommend p {
    margin: 0 0 10px 0;
    line-height: 2.2;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .top .celebration-recommend p {
    font-size: 3.75vw;
    line-height: 1.8;
    padding: 0;
  }
}
.top .celebration .beginner header h2:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150px;
  height: 4px;
  background: url(../images/w3gflorist_test1/common/line-side-pink.png) repeat-x 0 0;
  background-size: auto 4px;
  margin: 0 0 0 -75px;
}
li:nth-child(1) dt {
/* background-image: url(../images/w3gflorist_test1/top/icon01.gif);*/
  background-size: 80px auto;
}
li:nth-child(2) dt {
/* background-image: url(../images/w3gflorist_test1/top/icon02.gif);*/
  background-size: 40px auto;
}
li:nth-child(3) dt {
/* background-image: url(../images/w3gflorist_test1/top/icon03.gif);*/
  background-size: 41px auto;
}

@media print {
  #build-menu-button {
    display: none !important;
  }

  #main__w3gflorist {
    margin: 0 !important;
  }

  article {
    margin: 0 !important;
  }

  * {
    color: #000 !important;
    background: transparent none !important;
  }

  .js .inview-1,
  .js .inview-2,
  .js .inview-3 {
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}