@charset "UTF-8";
/* -----------------------------------------------
  Variables
--------------------------------------------------*/
/* ---------- Font --------- */
/* -----------------------------------------------
  Mixins
--------------------------------------------------*/
/* ---------- Media Query --------- */
/* ---------- lang --------- */
/* ---------- CSS Hack --------- */
/* ---------- Common --------- */
/* ---------- Arrow --------- */
/* ---------- Image --------- */
/* ---------- Animation --------- */
/* -----------------------------------------------
  Functions
--------------------------------------------------*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

/**
 * Render the `main` element consistently in IE.
 */
main {
  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
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          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
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

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

/**
 * 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 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
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 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;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

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

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 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 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

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

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          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 in Chrome and Safari on macOS.
 */
[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 Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

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

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

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

/**************************************************
	base
***************************************************/
/* -----------------------------------------------
	1. Body
-------------------------------------------------- */
html {
  font-size: 16px;
  font-size: min(16px, 1.4814814815vw);
  background: #FFF; /* for mix blend mode */
}
@media (max-width: 767px) {
  html {
    font-size: 4.2666666667vw;
  }
}

body, button, input, textarea, select {
  color: #000000;
  font-weight: 500;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 767px) {
  body, button, input, textarea, select {
    line-height: 1.5;
  }
}

[lang=en] body, [lang=en] button, [lang=en] input, [lang=en] textarea, [lang=en] select {
  font-family: "Barlow Semi Condensed", sans-serif;
}

::-moz-selection {
  background: rgba(24, 82, 164, 0.7);
  color: #fff;
}

::selection {
  background: rgba(24, 82, 164, 0.7);
  color: #fff;
}

/* -----------------------------------------------
	2. Elements
-------------------------------------------------- */
/* ---------- base ---------- */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  margin: 0;
}

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

li {
  margin: 0;
  padding: 0;
}

dl, dt, dd {
  margin: 0;
  padding: 0;
}

/* ---------- text ---------- */
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: #1852a4;
  text-decoration: underline;
}

a:hover {
  color: #1b5dba;
  text-decoration: none;
}

a[nohref] {
  color: inherit;
}
a[nohref]:hover {
  text-decoration: none;
}

a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}
@media (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* ---------- image ---------- */
img, svg, video {
  border: 0;
  vertical-align: bottom;
}

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

figure {
  margin: 0;
}

.caption, figcaption {
  display: block;
  margin-top: 1em;
  font-size: 0.88em;
}

/* ---------- plain ---------- */
ul.plain, .markdown ul, .wysiwyg ul, ol.plain, .markdown ol, .wysiwyg ol {
  margin-left: 1em;
  margin-bottom: 1em;
}

.plain ul, .markdown ol ul, .markdown ul ul, .wysiwyg ol ul, .wysiwyg ul ul, .plain ol, .markdown ol ol, .markdown ul ol, .wysiwyg ol ol, .wysiwyg ul ol {
  margin: 0 0 0 1em;
}

ul.plain, .markdown ul, .wysiwyg ul {
  list-style-type: disc;
}
ul.plain ul, .markdown ul ul, .wysiwyg ul ul {
  list-style-type: circle;
}
ul.plain ul ul, .markdown ul ul ul, .wysiwyg ul ul ul {
  list-style-type: square;
}

ol.plain, .markdown ol, .wysiwyg ol, ol.plain ol {
  list-style-type: decimal;
}

dl.plain {
  margin: 0 0 1em;
}
dl.plain dt {
  font-weight: bold;
}
dl.plain dd {
  margin-bottom: 1em;
}

/* -----------------------------------------------
	3. Helper Class
-------------------------------------------------- */
/* ---------- clear ---------- */
._clearfix {
  zoom: 1;
}
._clearfix:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

._float-l {
  float: left;
}

._float-r {
  float: right;
}

._clear {
  clear: both;
}

._hidden {
  display: none;
}

/* ---------- text ---------- */
._bold {
  font-weight: bold;
}

._underline {
  text-decoration: underline;
}

._small {
  font-size: 88% !important;
}

._large {
  font-size: 113% !important;
}

._valignt {
  vertical-align: top !important;
}

._valignm {
  vertical-align: middle !important;
}

._valignb {
  vertical-align: bottom !important;
}

._txtc, ._txtc th, ._txtc td {
  text-align: center !important;
}

._txtr, ._txtr th, ._txtr td {
  text-align: right !important;
}

._txtl, ._txtl th, ._txtl td {
  text-align: left !important;
}

._wordbreak {
  word-break: break-all !important;
}

._nowrap {
  white-space: nowrap !important;
}

._image-text {
  overflow: hidden !important;
}

/* ---------- margin ---------- */
._zero {
  margin-bottom: 0 !important;
}

._half {
  margin-bottom: 10px !important;
}

._default {
  margin-bottom: 20px !important;
}

._double {
  margin-bottom: 40px !important;
}

/* ---------- devices ---------- */
@media (min-width: 769px) {
  .only-sp {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .only-pc {
    display: none !important;
  }
}
/* ---------- lang ---------- */
[lang=ja] .only-en {
  display: none !important;
}

[lang=en] .only-ja {
  display: none !important;
}

/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - https://opensource.org/licenses/MIT
*
* Copyright (c) 2021 Animate.css
*/
:root {
  --animate-duration:1s;
  --animate-delay:1s;
  --animate-repeat:1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}

.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}

.animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}

.animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}

.animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}

.animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}

.animate__animated.animate__faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}

.animate__animated.animate__fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}

.animate__animated.animate__slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}

.animate__animated.animate__slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}

@media (prefers-reduced-motion: reduce), print {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .animate__animated[class*=Out] {
    opacity: 0;
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  0%, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shakeX {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}

@-webkit-keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}

@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}

@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}

@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}

@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}

@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}

@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}

@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}

@-webkit-keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}

@-webkit-keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}

@-webkit-keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}

@-webkit-keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}

@-webkit-keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}

@-webkit-keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

@-webkit-keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/**************************************************
    Header
***************************************************/
.site-header {
  position: relative;
  height: 25rem;
  background: #c9e1f6 url(../images/header_bg_news.jpg) no-repeat 50% 50%;
  background-size: cover;
}
@media (max-width: 767px) {
  .site-header {
    height: 60vw;
  }
}
.site-header .logo {
  position: absolute;
  top: 42px;
  left: 50px;
  z-index: 9999;
}
@media (min-width: 1300px) {
  .site-header .logo {
    position: fixed;
  }
}
@media (max-width: 767px) {
  .site-header .logo {
    top: 1.5625rem;
    left: 1.5625rem;
  }
}
.site-header .logo img {
  height: 4.8125rem;
}
@media (max-width: 767px) {
  .site-header .logo img {
    width: 8.75rem;
    height: auto;
  }
}

[lang=ja] .site-header {
  padding-top: 100px;
}
[lang=ja] .site-header .logo {
  top: 20px;
}
[lang=ja] .site-header .logo img {
  height: 67px;
}
@media (max-width: 767px) {
  [lang=ja] .site-header .logo img {
    width: 8.75rem;
    height: auto;
  }
}

#about .site-header {
  background: #68a4d5 url(../images/header_bg_about.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#order .site-header {
  background: #73b1ec url(../images/header_bg_order.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#package .site-header {
  background: #73b1ec url(../images/header_bg_package.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#islands .site-header {
  background: #89a5c4 url(../images/header_bg_islands.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#naoshima .site-header {
  background: #c8daf1 url(../images/header_bg_naoshima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#teshima .site-header {
  background: #96b2d3 url(../images/header_bg_teshima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#megijima .site-header {
  background: #afcbea url(../images/header_bg_megijima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#ogijima .site-header {
  background: #9fc9ea url(../images/header_bg_ogijima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#shodoshima .site-header {
  background: #e1e1e3 url(../images/header_bg_shodoshima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#inujima .site-header {
  background: #51a2d9 url(../images/header_bg_inujima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#honjima .site-header {
  background: #bbe8ff url(../images/header_bg_honjima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#awashima .site-header {
  background: #e2eefb url(../images/header_bg_awashima.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#shimanami .site-header {
  background: #e2eefb url(../images/header_bg_shimanami.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#access .site-header {
  background: #acb0bb url(../images/header_bg_access.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#for-travel-agencies .site-header {
  background: #a8bfe1 url(../images/header_bg_for-travel-agencies.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#contact .site-header {
  background: #c9c7d2 url(../images/header_bg_contact.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#privacy .site-header {
  background: #c9c7d2 url(../images/header_bg_privacy.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#news .site-header {
  background: #b6b7b4 url(../images/header_bg_news.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.switch-language {
  position: fixed;
  top: 4.375rem;
  right: 7.25rem;
  max-width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  line-height: 1.7;
  font-weight: 500;
  font-family: "Barlow Semi Condensed", sans-serif;
  letter-spacing: 0.1em;
  z-index: 201;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: all 0.5s 0.2s;
  transition: all 0.5s 0.2s;
}

.switch-language li + li::before {
  padding: 0 0.5em 0 0.5em;
  content: "/";
}

.switch-language li a {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

.switch-language li a.-active {
  border-bottom: 2px solid #000;
}

.switch-language li a:hover {
  opacity: 0.7;
}

.switch-language.-invert {
  mix-blend-mode: difference;
}

@media (max-width: 767px) {
  .switch-language {
    top: 1.25rem;
    right: 5.0625rem;
  }
}
.nav-button {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  width: 1.625rem;
  height: 1.5rem;
  top: 4.75rem;
  right: 3.125rem;
  border: 0;
  background: transparent;
  z-index: 201;
}
@media (max-width: 767px) {
  .nav-button {
    top: 1.5625rem;
    right: 1.5625rem;
  }
}
.nav-button .bar {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFF;
  border-radius: 6px;
}
.nav-button .bar:nth-of-type(1) {
  top: 0;
}
.nav-button .bar:nth-of-type(2) {
  top: calc(50% - 1px);
}
.nav-button .bar:nth-of-type(3) {
  bottom: 0;
}
.nav-button[aria-expanded=true] {
  mix-blend-mode: unset;
}
.nav-button[aria-expanded=true] .bar {
  background: #000;
}
.nav-button[aria-expanded=true] .bar:nth-of-type(1) {
  -webkit-transform: translateY(550%) rotate(-45deg);
          transform: translateY(550%) rotate(-45deg);
}
.nav-button[aria-expanded=true] .bar:nth-of-type(2) {
  opacity: 0;
}
.nav-button[aria-expanded=true] .bar:nth-of-type(3) {
  -webkit-transform: translateY(-550%) rotate(45deg);
          transform: translateY(-550%) rotate(45deg);
}
.nav-button.-invert {
  mix-blend-mode: difference;
}
.nav-button.-invert .bar {
  background: #FFF;
}

[lang=ja] .nav-button {
  background: #fff;
  width: 40px;
  height: 40px;
}
@media (min-width: 1300px) {
  [lang=ja] .nav-button {
    display: none;
  }
}
[lang=ja] .nav-button .bar {
  width: 30px;
  background-color: #5d96c3;
  left: 0;
  right: 0;
  margin: auto;
}
[lang=ja] .nav-button .bar:nth-of-type(1) {
  top: 9px;
}
[lang=ja] .nav-button .bar:nth-of-type(2) {
  top: calc(50% - 5px);
}
[lang=ja] .nav-button .bar:nth-of-type(3) {
  bottom: 17px;
}
[lang=ja] .nav-button .nav-button-text {
  font-family: "MuseoModerno", cursive;
  font-size: 10px;
  color: #5d96c3;
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
[lang=ja] .nav-button .nav-button-text::before {
  display: block;
  content: "Menu";
}
[lang=ja] .nav-button[aria-expanded=true] .bar:nth-of-type(1) {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  top: 16px;
}
[lang=ja] .nav-button[aria-expanded=true] .bar:nth-of-type(2) {
  opacity: 0;
}
[lang=ja] .nav-button[aria-expanded=true] .bar:nth-of-type(3) {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  bottom: 22px;
}
[lang=ja] .nav-button[aria-expanded=true] .nav-button-text::before {
  content: "Close";
}
[lang=ja] .nav-button.-invert {
  mix-blend-mode: unset;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 18.75rem);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  max-width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 200;
  background: #FFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
  transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  .nav-drawer {
    width: 100%;
    overflow: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
  }
}
.nav-drawer[aria-hidden=true] {
  max-width: 0;
  -webkit-transform: skew(10deg, 0deg);
          transform: skew(10deg, 0deg);
}

.nav-drawer[aria-hidden=true] .switch-language {
  max-width: 0;
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.nav-drawer .navigation {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  max-width: 780px;
  width: 100%;
}

.nav-drawer .navigation > *:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.nav-drawer .navigation > *:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

.nav-drawer .navigation > *:nth-child(3) {
  grid-row: 3;
  grid-column: 1;
}

.nav-drawer .navigation > *:nth-child(4) {
  grid-row: 4;
  grid-column: 1;
}

.nav-drawer .navigation > *:nth-child(5) {
  grid-row: 5;
  grid-column: 1;
}

.nav-drawer .navigation > *:nth-child(6) {
  grid-row: 1;
  grid-column: 2;
}

.nav-drawer .navigation > *:nth-child(7) {
  grid-row: 2;
  grid-column: 2;
}

.nav-drawer .navigation > *:nth-child(8) {
  grid-row: 3;
  grid-column: 2;
}

.nav-drawer .navigation > *:nth-child(9) {
  grid-row: 4;
  grid-column: 2;
}

.nav-drawer .navigation > *:nth-child(10) {
  grid-row: 5;
  grid-column: 2;
}

.nav-drawer .navigation .nav-lounge {
  height: 90px;
}
.nav-drawer .navigation .nav-lounge a {
  line-height: 1.5;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 90px;
  background-image: url("../images/logo_lounge.png");
  background-repeat: no-repeat;
  background-size: 68px;
  background-position: 14px center;
}
.nav-drawer .navigation .nav-lounge .en {
  color: #000000;
  font-size: 10px;
  letter-spacing: 2px;
}

.nav-drawer .navigation a {
  position: relative;
  display: block;
  width: 20rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5em 1em;
  margin: 0 35px -1px;
  text-decoration: none;
}

.nav-drawer .navigation a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 0;
  height: 100%;
  background: rgba(24, 82, 164, 0.05);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.nav-drawer .navigation a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  top: 50%;
  right: 1em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.nav-drawer .navigation a .en {
  position: relative;
  display: block;
  color: #1852a4;
  font-size: 1.25rem;
  font-family: "MuseoModerno", cursive;
  font-weight: 500;
}

[lang=ja] .nav-drawer .navigation a .en::after {
  display: none;
}

.nav-drawer .navigation a .ja {
  position: relative;
  color: #000000;
  font-size: 0.9375rem;
  font-weight: bold;
}

.nav-drawer .navigation a:hover::before {
  width: 100%;
}

[lang=en] .nav-drawer .navigation .ja {
  display: none;
}

.nav-drawer .other-navigation {
  max-width: 780px;
  width: 100%;
  padding: 20px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
}

.nav-drawer .other-navigation-list {
  display: inline-block;
}

.nav-drawer .other-navigation-list li {
  text-align: left;
  line-height: 1.2;
}

.nav-drawer .other-navigation-list li a {
  color: #000000;
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: bold;
}

[lang=ja] .nav-drawer .other-navigation-list li .en {
  display: none;
}

[lang=en] .nav-drawer .other-navigation-list li .ja {
  display: none;
}

@media (min-width: 769px) {
  .nav-drawer .sns-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 40px 0;
  }
  [lang=en] .nav-drawer .sns-flex {
    display: none;
  }
  .nav-drawer .sns-icon {
    margin-right: 20px;
  }
  .nav-drawer .sns-icon img {
    height: 40px;
  }
  .nav-drawer .other-navigation-list li a:hover {
    text-decoration: underline;
  }
}
@media (max-width: 767px) {
  .nav-drawer .navigation {
    display: block;
    max-height: 100vh;
    padding-top: 3.125rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
  }
  .nav-drawer .navigation a {
    margin: 0 0 -1px;
    padding: 0.5em 1em;
    border-top: 0;
    border-bottom: 0;
    line-height: 1.5;
  }
  .nav-drawer .navigation a .en {
    font-size: 0.625rem;
  }
  .nav-drawer .navigation a::before {
    -webkit-transition: none;
    transition: none;
  }
  .nav-drawer .navigation a::after {
    display: inline-block;
    content: "";
    width: 0.8em;
    height: 0.8em;
    background: url(../images/arrow_a.svg) no-repeat 0 0;
    background-size: 0.8em 0.8em;
    position: absolute;
    top: 50%;
    right: 1em;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  [lang=en] .nav-drawer .navigation .en {
    font-size: 1.125rem;
  }
  [lang=en] .nav-drawer .navigation .ja {
    display: none;
  }
  .nav-drawer .sns-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  [lang=en] .nav-drawer .sns-flex {
    display: none;
  }
  .nav-drawer .sns-icon {
    margin-right: 20px;
  }
  .nav-drawer .sns-icon img {
    height: 40px;
  }
  .nav-drawer .other-navigation {
    padding: 20px 0px;
  }
  .nav-drawer .other-navigation-list li a {
    font-size: 0.75rem;
  }
}
.gnav {
  display: none;
}

@media (min-width: 1300px) {
  [lang=ja] .gnav {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 999;
    padding: 20px 20px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #fff;
    height: 100px;
  }
  [lang=ja] .gnav > * {
    font-family: "Noto Sans JP", sans-serif;
  }
  [lang=ja] .gnav-tel {
    text-align: right;
  }
  [lang=ja] .gnav-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  [lang=ja] .gnav-menu a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  [lang=ja] .gnav-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 16px;
  }
  [lang=ja] .gnav-list a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
    margin-left: 30px;
    position: relative;
    color: #1852a4;
  }
  [lang=ja] .gnav-list a .en {
    opacity: 0;
    -webkit-transition: 0.3;
    transition: 0.3;
    border-bottom: 2px solid #1852a4;
    padding-bottom: 2px;
    font-family: "MuseoModerno", cursive;
    font-size: 10px;
    line-height: 1;
    position: absolute;
    top: -12px;
  }
}
@media (min-width: 1300px) and (hover: hover) and (pointer: fine) {
  [lang=ja] .gnav-list a:hover:hover {
    color: #1852a4;
  }
  [lang=ja] .gnav-list a:hover:hover .en {
    -webkit-animation: fade-in 0.2s forwards;
            animation: fade-in 0.2s forwards;
  }
}
@media (min-width: 1300px) {
  [lang=ja] .gnav-list a .ja {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
    letter-spacing: 2px;
  }
  [lang=ja] .gnav-lounge {
    margin-left: 10px;
  }
  [lang=ja] .gnav-lounge a {
    line-height: 1;
    padding: 6px 7px;
    color: #fff;
    border: 1px solid #1852a4;
    background: #1852a4;
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  [lang=ja] .gnav-lounge a .en {
    font-family: "MuseoModerno", cursive;
    font-size: 10px;
  }
  [lang=ja] .gnav-lounge a .ja {
    font-size: 14px;
    font-weight: bold;
  }
}
@media (min-width: 1300px) and (hover: hover) and (pointer: fine) {
  [lang=ja] .gnav-lounge a:hover {
    opacity: 0.6;
  }
}
@media (min-width: 1300px) {
  [lang=ja] .gnav-switch-language {
    margin-left: 10px;
  }
  [lang=ja] .gnav-switch-language a {
    display: grid;
    place-items: center;
    background: #1852a4;
    padding: 6px 26px;
    position: relative;
    display: grid;
    place-items: center;
  }
  [lang=ja] .gnav-switch-language a img {
    position: relative;
    z-index: 2;
  }
  [lang=ja] .gnav-switch-language a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(4, 15, 31, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
  }
}
@media (min-width: 1300px) and (hover: hover) and (pointer: fine) {
  [lang=ja] .gnav-switch-language a:hover:hover::before {
    width: 100%;
  }
}
@media (min-width: 1300px) {
  [lang=ja] .gnav-icon-facebook img {
    margin-left: 20px;
    height: 28px;
  }
  [lang=ja] .gnav-icon-instagram img {
    margin-left: 15px;
    height: 28px;
  }
}
[lang=ja] #adminBox {
  z-index: 9999;
  position: relative;
}
[lang=ja] #adminBox + .site-header .logo {
  top: 108px;
}
[lang=ja] #adminBox + .site-header .gnav {
  top: 88px;
}

/**************************************************
    Footer
***************************************************/
/* -----------------------------------------------
  Contact
-------------------------------------------------- */
.contact-section {
  position: relative;
  background: #FFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.125rem;
}
@media (max-width: 767px) {
  .contact-section {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.contact-section .office {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #FFF;
  letter-spacing: 0.2em;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  background: #1852a4;
  width: 50%;
  padding: 4.6875rem 0;
  z-index: 1;
}
@media (max-width: 767px) {
  .contact-section .office {
    width: calc(100% - 1.5625rem);
    padding: 2.1875rem 1.5625rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
.contact-section .office .heading {
  font-size: 1.5rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .contact-section .office .heading {
    font-size: 1.125rem;
    line-height: 1.7;
  }
}
.contact-section .office .lead {
  line-height: 1.875;
  margin: 0.9375rem 0 1.875rem;
}
@media (max-width: 767px) {
  .contact-section .office .lead {
    font-size: 0.8125rem;
  }
}
@media (max-width: 767px) {
  .contact-section .office .tel {
    position: relative;
    margin-right: 4.375rem;
  }
  .contact-section .office .tel::before {
    content: "";
    position: absolute;
    top: 1.3em;
    left: 1em;
    width: calc(100% - 1em);
    height: 1px;
    background: #FFF;
  }
}
.contact-section .office .agencies a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 170px;
  border: 2px solid #fff;
  border-radius: 100px;
  padding: 5px;
  margin-top: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .contact-section .office .agencies a {
    width: 80%;
  }
}
.contact-section .office .agencies a::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 100%;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-left: 10px;
}
@media (hover: hover) and (pointer: fine) {
  .contact-section .office .agencies a:hover:hover::after {
    -webkit-transform: translateX(0.5em);
            transform: translateX(0.5em);
  }
}
.contact-section .contact {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
  padding: 5.625rem 0;
  color: #FFF;
  letter-spacing: 0.2em;
  text-decoration: none;
  background: #d31e20;
  z-index: 1;
}
@media (max-width: 767px) {
  .contact-section .contact {
    width: calc(100% - 1.5625rem);
    padding: 2.1875rem 1.5625rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.contact-section .contact .en {
  position: relative;
}
.contact-section .contact .ja {
  position: relative;
  display: block;
  line-height: 1.875;
  margin: 0.5rem 0 1.875rem;
}
@media (max-width: 767px) {
  .contact-section .contact .ja {
    font-size: 0.8125rem;
    margin: 0.9375rem 0 0;
  }
}
.contact-section .contact h2 {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .contact-section .contact h2 {
    font-size: 1.125rem;
  }
}
.contact-section .contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(77, 11, 12, 0.1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-section .contact::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
}
@media (max-width: 767px) {
  .contact-section .contact::after {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .contact-section .contact:hover:hover::before {
    width: 100%;
  }
}

[lang=en] .contact-section .office .heading {
  font-style: italic;
}

/* -----------------------------------------------
  For Agency
-------------------------------------------------- */
.for-agency {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
}
@media (max-width: 767px) {
  .for-agency {
    display: none;
  }
}
.for-agency a {
  position: relative;
  display: block;
  color: #000000;
  font-size: 0.9375rem;
  font-weight: bold;
  letter-spacing: 0em;
  text-decoration: none;
  background: #f4de26;
  padding: 0.8em 1.3em 0.8em 2.3em;
  border-radius: 1.25rem 0 0 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
}
.for-agency a:first-child {
  color: #fff;
  background: #1852a4;
}
.for-agency a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #dcc60b;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.for-agency a:first-child:before {
  background: #113f81;
}
.for-agency a span {
  position: relative;
}
.for-agency a span::before {
  display: inline-block;
  content: "";
  width: 22px;
  height: 20px;
  background: url(../images/icon/icon_flag.svg) no-repeat 0 0;
  background-size: 22px 20px;
  margin-right: 1em;
  vertical-align: middle;
}
.for-agency a:first-child span::before {
  content: none;
}
.for-agency a span::after {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 16px 16px;
  margin-left: 1em;
  vertical-align: middle;
}
.for-agency a:first-child span::after {
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .for-agency a:hover:hover::before {
    width: 100%;
  }
}

@media (max-width: 767px) {
  [lang=ja] .top .for-agency {
    display: block;
  }
}
[lang=ja] .top .for-agency a {
  font-size: 13px;
}
[lang=ja] .top .for-agency a span::before {
  width: 22px;
  height: 16px;
  background: url(../images/icon/icon_contact01.png) no-repeat 0 0;
  background-size: 22px 16px;
}

/* -----------------------------------------------
  Footer
-------------------------------------------------- */
.banner-footer {
  background: #e7edf6;
  padding: 20px;
}
@media (max-width: 767px) {
  .banner-footer {
    padding: 10px;
  }
}
.banner-footer > .inner {
  max-width: 1100px;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.banner-footer > .inner a {
  height: 90px;
  margin-right: 10px;
}
@media (max-width: 767px) {
  .banner-footer > .inner a {
    height: 20vw;
  }
}
@media (max-width: 767px) {
  .banner-footer > .inner a:last-of-type {
    margin-right: 0px;
  }
}
.banner-footer > .inner img {
  height: 100%;
}

.site-footer {
  border-bottom: 5px solid #1852a4;
  padding: 3.75rem 0;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .site-footer {
    padding: 3.125rem 0 1.5625rem;
  }
}
.site-footer > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  .site-footer > .inner {
    padding: 0 1.5625rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
}
.site-footer > .inner:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}
@media (min-width: 769px) {
  .site-footer .copyright {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    margin-right: 3.75rem;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    font-family: "MuseoModerno", cursive;
  }
}
@media (max-width: 767px) {
  .site-footer .copyright {
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    font-family: "MuseoModerno", cursive;
  }
}
@media (min-width: 769px) {
  .site-footer .logo {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224.125%22%20height%3D%2274.25%22%20viewBox%3D%220%200%204.125%2074.25%22%3E%20%3Cpath%20fill%3D%22%231852a4%22%20id%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_13_%E3%81%AE%E3%82%B3%E3%83%94%E3%83%BC%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%2013%20%E3%81%AE%E3%82%B3%E3%83%94%E3%83%BC%22%20class%3D%22cls-1%22%20d%3D%22M404%2C9092.25a5.935%2C5.935%2C0%2C0%2C1%2C1.838-4.31%2C5.423%2C5.423%2C0%2C0%2C0%2C0-7.89%2C5.961%2C5.961%2C0%2C0%2C1%2C0-8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0-7.89%2C5.961%2C5.961%2C0%2C0%2C1%2C0-8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0-7.89%2C5.961%2C5.961%2C0%2C0%2C1%2C0-8.61%2C5.411%2C5.411%2C0%2C0%2C0%2C0-7.88%2C5.972%2C5.972%2C0%2C0%2C1%2C0-8.62%2C5.4%2C5.4%2C0%2C0%2C0%2C1.7-3.94h0.589a5.975%2C5.975%2C0%2C0%2C1-1.837%2C4.31%2C5.411%2C5.411%2C0%2C0%2C0%2C0%2C7.88%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0%2C7.89%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0%2C7.89%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0%2C7.89%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.427%2C5.427%2C0%2C0%2C0-1.7%2C3.95%22%20transform%3D%22translate(-404%20-9018)%22%2F%3E%3C%2Fsvg%3E") no-repeat 100% 0;
    padding-right: 2.5rem;
    margin-right: 2.5rem;
  }
}
@media (max-width: 767px) {
  .site-footer .logo {
    margin-bottom: 1.5625rem;
  }
}
.site-footer .logo img {
  height: 4.8125rem;
}
@media (min-width: 769px) {
  .site-footer .address {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224.125%22%20height%3D%2274.25%22%20viewBox%3D%220%200%204.125%2074.25%22%3E%20%3Cpath%20fill%3D%22%231852a4%22%20id%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_13_%E3%81%AE%E3%82%B3%E3%83%94%E3%83%BC%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%2013%20%E3%81%AE%E3%82%B3%E3%83%94%E3%83%BC%22%20class%3D%22cls-1%22%20d%3D%22M404%2C9092.25a5.935%2C5.935%2C0%2C0%2C1%2C1.838-4.31%2C5.423%2C5.423%2C0%2C0%2C0%2C0-7.89%2C5.961%2C5.961%2C0%2C0%2C1%2C0-8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0-7.89%2C5.961%2C5.961%2C0%2C0%2C1%2C0-8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0-7.89%2C5.961%2C5.961%2C0%2C0%2C1%2C0-8.61%2C5.411%2C5.411%2C0%2C0%2C0%2C0-7.88%2C5.972%2C5.972%2C0%2C0%2C1%2C0-8.62%2C5.4%2C5.4%2C0%2C0%2C0%2C1.7-3.94h0.589a5.975%2C5.975%2C0%2C0%2C1-1.837%2C4.31%2C5.411%2C5.411%2C0%2C0%2C0%2C0%2C7.88%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0%2C7.89%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0%2C7.89%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.423%2C5.423%2C0%2C0%2C0%2C0%2C7.89%2C5.963%2C5.963%2C0%2C0%2C1%2C0%2C8.61%2C5.427%2C5.427%2C0%2C0%2C0-1.7%2C3.95%22%20transform%3D%22translate(-404%20-9018)%22%2F%3E%3C%2Fsvg%3E") no-repeat 100% 0;
    padding-right: 2.5rem;
    margin-right: 2.5rem;
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .site-footer .address {
    font-size: 0.8125rem;
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 769px) {
  .site-footer .link {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
}
@media (max-width: 767px) {
  .site-footer .link {
    display: none;
  }
}
@media (min-width: 769px) {
  .site-footer .link a {
    text-decoration: none;
    font-size: 15px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .site-footer .link a:hover:hover {
    text-decoration: underline;
  }
}
@media (max-width: 767px) {
  .site-footer .link a {
    text-decoration: underline;
  }
}
@media (min-width: 769px) {
  .site-footer .link li {
    line-height: 1.2;
  }
}

/**************************************************
    Content
***************************************************/
.site-content {
  overflow-x: hidden;
  background: #FFF;
  /* for mix blend mode */
}

@media (max-width: 767px) {
  .site-content {
    overflow: visible;
  }
}
.site-content > .inner,
.site-content > .section > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  padding: 3.75rem 1.25rem;
  line-height: 2;
}

.site-content > .inner:after,
.site-content > .section > .inner:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

@media (max-width: 767px) {
  .site-content > .inner,
  .site-content > .section > .inner {
    padding: 0 1.5625rem;
  }
}
.category-title, .other-section .heading {
  text-align: center;
  margin-bottom: 3.125rem;
}

.category-title .en, .other-section .heading .en {
  display: block;
  font-size: 3rem;
  font-family: "MuseoModerno", cursive;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: capitalize;
}

.category-title .ja, .other-section .heading .ja {
  display: block;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
}

.category-title + .inner, .other-section .heading + .inner, .category-title + .section > .inner, .other-section .heading + .section > .inner {
  padding-top: 0;
}

@media (max-width: 767px) {
  .category-title, .other-section .heading {
    padding: 0 1.5625rem;
    margin-bottom: 1.875rem;
  }
  .category-title .en, .other-section .heading .en {
    font-size: 1.5625rem;
  }
  .category-title .ja, .other-section .heading .ja {
    font-size: 0.8125rem;
  }
}
[lang=en] .category-title .ja, [lang=en] .other-section .heading .ja, .other-section [lang=en] .heading .ja {
  display: none;
}

.category-title.-small .en, .other-section .-small.heading .en {
  font-size: 1.5625rem;
}

.breadcrumb {
  width: 1100px;
  margin: 1.5625rem auto 2.1875rem;
}

.breadcrumb li {
  display: inline;
  font-size: 0.875em;
}

.breadcrumb li + li:before {
  padding: 0 1em 0 0.5em;
  content: "/";
}

.breadcrumb a {
  color: #000000;
  text-decoration: none;
}

.breadcrumb a a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .breadcrumb {
    width: auto;
    padding: 0 1.5625rem;
    font-size: 0.75rem;
  }
}
/**************************************************
    Secondary
***************************************************/
/* -----------------------------------------------
  Widget
-------------------------------------------------- */
.secondary-widget {
  margin-bottom: 2.5rem;
}

.secondary-title {
  margin-bottom: 1em;
}

/* -----------------------------------------------
  Archives
-------------------------------------------------- */
.secondary-archives .archive-list a {
  position: relative;
  display: block;
  color: #000000;
  padding: 0.6em 0 0.6em 0;
  text-decoration: none;
}

.secondary-archives .archive-list a:not(.has-child):after {
  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666666;
  border-bottom: 1px solid #666666;
  right: 10px;
  top: calc(50% - 3px);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  content: "";
}

.secondary-archives .archive-list a.has-child::before {
  top: calc(1.1em + 5px);
  right: 10px;
  position: absolute;
  width: 11px;
  height: 1px;
  background: #000;
  content: "";
}

.secondary-archives .archive-list a.has-child::after {
  top: calc(1.1em + 0px);
  right: 15px;
  position: absolute;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  width: 1px;
  height: 11px;
  background: #000;
  content: "";
}

.secondary-archives .archive-list a.-open::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.secondary-archives .archive-list > ul > li {
  border-bottom: 1px solid #DDD;
}

.secondary-archives .archive-list > ul > li:last-child {
  border-bottom: 0;
}

.secondary-archives .archive-list > ul > li > ul {
  display: none;
  border-top: 1px solid #DDD;
  padding: 0.5em 0;
}

.secondary-archives .archive-list > ul > li > ul > li > a {
  padding: 0.25em 0 0.25em 1em;
}

.secondary-archives .archive-list > ul > li > ul > li > a.active {
  color: #1852a4;
  font-weight: bold;
}

/* -----------------------------------------------
  Categories
-------------------------------------------------- */
.secondary-categories .category-list li {
  border-bottom: 1px solid #DDD;
}

.secondary-categories .category-list li:last-child {
  border-bottom: 0;
}

.secondary-categories .category-list li a {
  position: relative;
  color: #000000;
  display: block;
  padding: 0.6em 0 0.6em 0;
  text-decoration: none;
}

.secondary-categories .category-list li a:hover {
  background: #F5F5F5;
}

.secondary-categories .category-list li a:after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666666;
  border-bottom: 1px solid #666666;
  right: 10px;
  top: calc(50% - 3px);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  content: "";
}

/* -----------------------------------------------
  Tags
-------------------------------------------------- */
.secondary-tags .tag-list {
  margin-top: 10px;
}

/**************************************************
    button
***************************************************/
.button-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .button-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.button-group > * {
  padding: 0 0.9375rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 767px) {
  .button-group > * {
    margin: 0 0 0.5rem;
  }
}
.button-group .button-a, .button-group .form-button {
  min-width: 0;
  width: 100%;
  font-size: 1.25rem;
  padding: 0.5em 1em 0.5em 1em;
  min-width: 300px;
}

@media (max-width: 767px) {
  .button-group .button-a, .button-group .form-button {
    font-size: 1rem;
  }
}
.button-a, .form-button {
  position: relative;
  display: block;
  width: 25rem;
  padding: 1.66em 4em;
  margin: 0 auto;
  border: 0;
  background: #1852a4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.button-a::after, .form-button::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  top: 50%;
  right: 2em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (max-width: 767px) {
  .button-a, .form-button {
    width: auto;
    padding: 1.5em 6em 1.5em 5em;
  }
}
.button-a:hover, .form-button:hover {
  color: #FFF;
  background: #15478e;
}

.button-a.-outline, .-outline.form-button {
  color: #1852a4;
  background: transparent;
  border: 1px solid #1852a4;
}

.button-a.-outline.-arrow::after, .-outline.-arrow.form-button::after {
  position: absolute;
  top: 50%;
  right: 1em;
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("../images/ionicons/chevron-down-outline-blue.svg") no-repeat 0 0;
  background-size: 1em 1em;
  -webkit-transform: translateY(-50%) rotate(-90deg);
          transform: translateY(-50%) rotate(-90deg);
}

.contact-button {
  color: #FFF;
  background: #1852a4;
  width: 1100px;
  padding: 2.5em 0 3em;
  margin: 0 auto 1.25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact-button .lead {
  width: 100%;
  text-align: center;
  margin-bottom: 1.875rem;
}

.contact-button .tel {
  margin-bottom: 0;
}

.contact-button .contact {
  margin: 0 0 0 3.125rem;
}

.contact-button .contact a {
  display: block;
}

.contact-button .contact a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  margin-left: 1em;
  vertical-align: bottom;
}

.contact-button .contact a:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .contact-button {
    width: auto;
    margin: 0 auto 3.125rem;
    padding: 1.875rem 0 0;
  }
  .contact-button .lead {
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    margin: 0 2.4375rem;
  }
  .contact-button .tel {
    margin: 0.625rem 3.125rem 1.875rem;
  }
  .contact-button .contact {
    background: #d31e20;
    width: 100%;
    margin: 0;
    padding: 1.0625rem 2.5rem;
    border-top: 1px solid #FFF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .contact-button .contact a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .contact-button .contact img {
    width: auto;
    height: 1.0625rem;
    vertical-align: baseline;
  }
  .section > .contact-button {
    margin: 0 1.5625rem;
  }
}
/**************************************************
    button
***************************************************/
.button-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .button-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.button-group > * {
  padding: 0 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 767px) {
  .button-group > * {
    margin: 0 0 8px;
  }
}
.button-group .button-a {
  min-width: 0;
  width: 100%;
  font-size: 20px;
  padding: 0.5em 1em 0.5em 1em;
  min-width: 300px;
}
@media (max-width: 767px) {
  .button-group .button-a {
    font-size: 16px;
  }
}

.button-a {
  position: relative;
  display: block;
  width: 400px;
  padding: 1.66em 4em;
  margin: 0 auto;
  border: 0;
  background: #1852a4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.button-a::after {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 20px 20px;
  position: absolute;
  top: 50%;
  right: 2em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (max-width: 767px) {
  .button-a {
    width: auto;
    padding: 0.5em 2em 0.5em 1em;
  }
}
.button-a:hover {
  color: #FFF;
  background: #15478e;
}
.button-a.-outline {
  color: #1852a4;
  background: transparent;
  border: 1px solid #1852a4;
}
.button-a.-outline.-arrow::after {
  position: absolute;
  top: 50%;
  right: 1em;
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("../images/ionicons/chevron-down-outline-blue.svg") no-repeat 0 0;
  background-size: 1em 1em;
  -webkit-transform: translateY(-50%) rotate(-90deg);
          transform: translateY(-50%) rotate(-90deg);
}

.contact-button {
  color: #FFF;
  background: #1852a4;
  width: 1100px;
  padding: 2.5em 0 3em;
  margin: 0 auto 1.25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 767px) {
  .contact-button {
    width: auto;
    margin: 0 auto 3.125rem;
    padding: 1.875rem 0 0;
  }
}
.contact-button .lead {
  width: 100%;
  text-align: center;
  margin-bottom: 1.875rem;
}
@media (max-width: 767px) {
  .contact-button .lead {
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    margin: 0 2.4375rem;
  }
}
.contact-button .tel {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .contact-button .tel {
    margin: 0.625rem 3.125rem 1.875rem;
  }
}
.contact-button .contact {
  margin: 0 0 0 3.125rem;
}
@media (max-width: 767px) {
  .contact-button .contact {
    background: #d31e20;
    width: 100%;
    margin: 0;
    padding: 1.0625rem 2.5rem;
    border-top: 1px solid #FFF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
.contact-button .contact a {
  display: block;
}
@media (max-width: 767px) {
  .contact-button .contact a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.contact-button .contact a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  margin-left: 1em;
  vertical-align: bottom;
}
@media (hover: hover) and (pointer: fine) {
  .contact-button .contact a:hover:hover {
    opacity: 0.7;
  }
}
@media (max-width: 767px) {
  .contact-button .contact img {
    width: auto;
    height: 1.0625rem;
    vertical-align: baseline;
  }
}

@media (max-width: 767px) {
  .section > .contact-button {
    margin: 0 1.5625rem;
  }
}

.order-button {
  margin: 60px auto;
  letter-spacing: 2px;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .order-button {
    margin: 40px auto;
  }
}
.order-button p {
  font-weight: bold;
  text-align: center;
}
@media (max-width: 767px) {
  .order-button p {
    font-weight: normal;
    text-align: left;
  }
}

.order-button-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 28px;
}
@media (max-width: 767px) {
  .order-button-item {
    display: block;
  }
}
.order-button-item a {
  color: #fff;
  border-radius: 100px;
  width: 100%;
  max-width: 500px;
  margin: 0 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  position: relative;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 767px) {
  .order-button-item a {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 20px 0 0;
  }
}
.order-button-item a::before {
  display: block;
  content: "";
  border-right: 2px solid #fff;
  padding-right: 20px;
  margin-right: 20px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: left center;
  width: 25px;
  height: 25px;
}
.order-button-item a.tel {
  background-color: #1852a4;
  padding-right: 20px;
}
@media (max-width: 767px) {
  .order-button-item a.tel {
    padding-right: 0;
  }
}
.order-button-item a.tel::before {
  background-image: url(../images/icon/icon_tel.png);
}
@media (max-width: 767px) {
  .order-button-item a.tel img {
    width: 70%;
  }
}
.order-button-item a.mail {
  background-color: #d31e20;
  font-size: 22px;
  padding-right: 80px;
}
@media (max-width: 767px) {
  .order-button-item a.mail {
    font-size: 16px;
    padding-right: 0;
  }
}
.order-button-item a.mail::before {
  background-image: url(../images/icon/icon_contact02.png);
}
.order-button-item a.mail::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  top: 50%;
  right: 2em;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .order-button-item a.mail::after {
    width: 17px;
    height: 17px;
    right: 1em;
  }
}
@media (hover: hover) and (pointer: fine) {
  .order-button-item a.mail:hover:hover::after {
    -webkit-transform: translate(1em, -50%);
            transform: translate(1em, -50%);
  }
}
@media (min-width: 769px) {
  .order-button-item a span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}
@media (max-width: 767px) {
  .order-button-item a span {
    width: 80%;
  }
}

/**************************************************
  Card
***************************************************/
/* -----------------------------------------------
  Hopping List
-------------------------------------------------- */
.hopping-list {
  clear: both;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.hopping-list > .item {
  width: 33.3333333333%;
  margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
  .hopping-list {
    margin: 0 -1.5625rem;
  }
  .hopping-list > .item {
    width: 50%;
    margin-bottom: 0.625rem;
  }
}
.hopping-card {
  display: block;
  color: #000000;
  text-decoration: none;
}

.hopping-card .thumbnail {
  position: relative;
  overflow: hidden;
}

.hopping-card .thumbnail::before {
  content: "";
  display: block;
  padding-bottom: 54%;
}

.hopping-card .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.hopping-card .thumbnail img {
  width: 100%;
}

.hopping-card .body {
  position: relative;
  padding: 1.25rem 2.1875rem;
}

.hopping-card .title {
  font-weight: bold;
  margin-bottom: 0.3125rem;
}

.hopping-card .title small {
  display: block;
  font-size: 0.875rem;
}

.hopping-card .title::before {
  display: inline-block;
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  background: url(../images/icon/icon_ship.svg) no-repeat 0 0;
  background-size: 1.375rem 1.375rem;
  position: absolute;
  top: 1.25rem;
  left: 0;
}

.hopping-card .capacity, .hopping-card .price {
  letter-spacing: 0.1em;
}

.hopping-card .capacity em, .hopping-card .price em {
  font-style: normal;
  font-weight: bold;
}

[lang=en] .hopping-card .capacity em, [lang=en] .hopping-card .price em {
  display: inline-block;
  width: 4.5em;
}

.hopping-card:hover .thumbnail img {
  -webkit-transform: translate(-50%, -50%) scale(1.1, 1.1);
          transform: translate(-50%, -50%) scale(1.1, 1.1);
}

@media (max-width: 767px) {
  .hopping-card .body {
    padding: 0.9375rem 0.3125rem 0.9375rem 2.1875rem;
  }
  .hopping-card .title {
    font-size: 0.875rem;
  }
  .hopping-card .title small {
    font-size: 0.75rem;
  }
  .hopping-card .title::before {
    left: 0.3125rem;
  }
  .hopping-card .capacity, .hopping-card .price {
    font-size: 0.6875rem;
  }
}
/* -----------------------------------------------
  Island List
-------------------------------------------------- */
.island-list {
  clear: both;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.island-list > .item {
  width: 33.3333333333%;
  margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
  .island-list {
    margin: 0 -1.5625rem;
  }
  .island-list > .item {
    width: 50%;
    margin-bottom: 0.625rem;
  }
}
.island-card {
  display: block;
  text-decoration: none;
}

.island-card .thumbnail {
  display: block;
  position: relative;
  overflow: hidden;
}

.island-card .thumbnail::before {
  content: "";
  display: block;
  padding-bottom: 62%;
}

.island-card .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.island-card .thumbnail img {
  width: 100%;
}

.island-card .body {
  position: relative;
  display: block;
  padding: 1.25rem 2.1875rem;
}

.island-card:not(.nolink) .body::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  top: 1.875rem;
  right: 2.8125rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .island-card:not(.nolink) .body::after {
    right: 1rem;
  }
}

.island-card .body .en {
  display: block;
  font-size: 1.5rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  color: #1852a4;
}

.island-card .body .ja {
  display: block;
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.island-card .body .ja.small {
  font-size: 0.8125rem;
}
@media (max-width: 767px) {
  .island-card .body .ja.small {
    font-size: 0.625rem;
  }
}

.island-card:not(.nolink):hover .thumbnail img {
  -webkit-transform: translate(-50%, -50%) scale(1.1, 1.1);
          transform: translate(-50%, -50%) scale(1.1, 1.1);
}

.island-card:not(.nolink):hover .body::after {
  -webkit-transform: translateX(1em);
          transform: translateX(1em);
}

@media (max-width: 767px) {
  .island-card .body {
    padding: 0.625rem 0.9375rem;
  }
  .island-card .body::after {
    top: 1.25rem;
    right: 0.9375rem;
  }
  .island-card .body .en {
    font-size: 1.125rem;
  }
  .island-card .body .ja {
    font-size: 0.75rem;
  }
  .island-card:not(.nolink):hover .body::after {
    -webkit-transform: none;
            transform: none;
  }
}
[lang=en] .island-card .ja {
  display: none;
}

/* -----------------------------------------------
  News List
-------------------------------------------------- */
.news-filter {
  margin: 3.125rem 0;
  padding: 0 1.875rem;
}

.news-filter dt {
  width: 6.875rem;
  color: #FFF;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  background: #1852a4;
  padding: 0.2em 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 2em;
}

.news-filter dd {
  margin: -2.5em 0 1.875rem 10rem;
}

.news-filter dd ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.news-filter dd ul li:not(:last-child)::after {
  content: "/";
  margin: 0 1em;
}

.news-filter dd a {
  color: #000000;
  font-size: 1.125rem;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.news-filter dd a:hover {
  text-decoration: underline;
}

.news-filter + .module-section {
  border-top: 5px solid #1852a4;
  margin-top: 3.125rem;
  padding-top: 2.5rem;
}

@media (max-width: 767px) {
  .news-filter + .module-section {
    margin-top: 1.875rem;
    padding-top: 1.25rem;
  }
}
.module-section + .news-filter {
  border-top: 5px solid #1852a4;
  margin-top: 3.125rem;
  padding-top: 2.5rem;
}

@media (max-width: 767px) {
  .news-filter {
    margin: 1.5625rem 0;
    padding: 0;
  }
  .news-filter dt {
    width: 5.625rem;
  }
  .news-filter dd {
    margin: -2.5em 0 0.9375rem 6.875rem;
  }
  .news-filter dd a {
    font-size: 0.875rem;
  }
}
.news-list > .item {
  margin: 1em 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.news-list > .item .date {
  width: 6em;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  margin-right: 2em;
  font-size: 0.875rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  margin-top: 0.1em;
}

.news-list > .item .title a {
  text-decoration: none;
}

.news-list > .item .title a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .news-list > .item {
    margin: 0.5em 0;
  }
  .news-list > .item .date {
    font-size: 0.75rem;
  }
  .news-list > .item .title {
    font-size: 0.8125rem;
  }
}
/* -----------------------------------------------
  Explain 
-------------------------------------------------- */
.explain-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  padding: 0 1em;
}

.explain-card .thumbnail {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
  margin: 0 -1em 0.625rem;
  position: relative;
  overflow: hidden;
}

.explain-card .thumbnail::before {
  content: "";
  display: block;
  padding-bottom: 66%;
}

.explain-card .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  width: auto;
  max-width: none;
  height: 100%;
}

.explain-card .title {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  font-size: 1.125rem;
  font-weight: bold;
}

.explain-card .explain {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
  font-size: 0.9375rem;
  text-align: left;
}

.explain-card .credits {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  color: #999;
  font-size: 0.75rem;
}

@media (max-width: 767px) {
  .explain-card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    min-height: 6.25rem;
    margin-bottom: 0.9375rem;
    text-align: left;
    padding: 0;
  }
  .explain-card .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    margin: 0;
  }
  .explain-card .title, .explain-card .explain {
    width: 100%;
    padding-left: 55%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .explain-card .title {
    font-size: 0.875rem;
  }
  .explain-card .explain {
    font-size: 0.6875rem;
  }
}
/* -----------------------------------------------
  Package
-------------------------------------------------- */
.package-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -1.875rem 3.125rem;
}

.package-list > .item {
  width: 33%;
  padding: 0 1.875rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 767px) {
  .package-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 2.5rem -1.5625rem 0;
  }
  .package-list > .item {
    width: 100%;
    padding: 0;
    margin: 0 0 0.9375rem;
  }
}
.package-card {
  display: block;
  color: #000000;
  text-decoration: none;
}

.package-card .thumbnail {
  position: relative;
  overflow: hidden;
}

.package-card .thumbnail::before {
  content: "";
  display: block;
  padding-bottom: 56%;
}

.package-card .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.package-card .thumbnail::before {
  background: #1852a4;
}

.package-card .body {
  float: right;
  width: 100%;
  margin: -2.5rem 0 0;
  padding: 1.25rem 0;
  background: #FFF;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.package-card .body .title {
  position: relative;
  padding-right: 1.875rem;
  margin-bottom: 0.625rem;
}

.package-card .body .title .en {
  font-size: 1.25rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
}

.package-card .body .title .ja {
  font-size: 0.875rem;
  font-weight: bold;
  margin-left: 1em;
}

.package-card .body .title::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  top: 0.5em;
  right: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.package-card .body .description {
  font-size: 0.9375rem;
}

.package-card:hover .thumbnail img {
  opacity: 0.7;
  -webkit-transform: translate(-50%, -50%) scale(1.1, 1.1);
          transform: translate(-50%, -50%) scale(1.1, 1.1);
}

.package-card:hover .body .title::after {
  -webkit-transform: translateX(1em);
          transform: translateX(1em);
}

@media (max-width: 767px) {
  .package-card .body {
    width: auto;
    margin: -2.5rem 0 0 1.5625rem;
  }
  .package-card .body .title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0;
  }
  .package-card .body .title .ja {
    font-size: 0.8125rem;
    vertical-align: 3px;
    margin-left: 0;
  }
  .package-card .body .title::after {
    top: 1.5em;
  }
  .package-card .body .description {
    font-size: 0.8125rem;
  }
}
/* -----------------------------------------------
  Reason 
-------------------------------------------------- */
.reason-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 5.625rem -1.25rem 0;
  counter-reset: reason;
}

.reason-list > .item {
  width: 33.33%;
  padding: 0 1.25rem;
  margin-bottom: 3.75rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.reason-list .reason-card {
  position: relative;
  border: 2px solid #1852a4;
  padding: 2.8125rem 1.875rem 1.875rem;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  counter-increment: reason;
}

.reason-list .reason-card::before {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5em;
  height: 2.5em;
  color: #FFF;
  font-size: 1.25rem;
  font-family: "MuseoModerno", cursive;
  font-weight: bold;
  background: #1852a4;
  content: counter(reason);
}

.reason-list .reason-card .highlight-heading {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.reason-list .reason-card .highlight-heading span {
  font-size: 1.125rem;
  text-align: justify;
  letter-spacing: 0.1em;
}

.reason-list .reason-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .reason-list {
    margin: 1.875rem 0 0;
  }
  .reason-list > .item {
    width: 100%;
    padding: 0;
    margin-bottom: 2.5rem;
  }
  .reason-list > .item .reason-card {
    padding: 2.1875rem 1.25rem 1.25rem;
  }
  .reason-list > .item .reason-card p {
    font-size: 0.8125rem;
  }
}
/**************************************************
    Form
***************************************************/
.form-content {
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .form-content {
    font-size: 0.8125rem;
  }
}
.form-step {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow: hidden;
  font-size: 0.875rem;
  color: #999;
  margin: 0 -2.08% 2.5rem;
}

.form-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5%;
  width: 90%;
  height: 5px;
  background: #e7edf6;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.form-step > li {
  position: relative;
  width: 31.25%;
  margin: 0 2.08%;
  padding: 0.5em 1em;
  text-align: center;
  white-space: nowrap;
  color: rgba(24, 82, 164, 0.5);
  font-size: 1.125rem;
  font-weight: bold;
  background: #e7edf6;
  border-radius: 2em;
}

.form-step > li.-current {
  color: #fff;
  font-weight: bold;
  background: #1852a4;
}

@media (max-width: 767px) {
  .form-step {
    margin: 1.25rem 0;
  }
  .form-step > li {
    font-size: 0.875rem;
  }
}
.form-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin: 1.5em 0;
}

.form-row > .form-col:first-child {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: bold;
}

@media (min-width: 769px) {
  .form-row:first-child {
    margin-top: 2.5rem;
  }
  .form-row > .form-col:first-child {
    width: 30%;
    padding-top: 1em;
    padding-right: 1em;
  }
  .form-row > .form-col:last-child {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .form-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .form-row > .form-col:first-child {
    margin-bottom: 0.5em;
  }
  .form-row > .form-col:last-child {
    width: 100%;
  }
}
.form-inline {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-inline:not(:last-child) {
  margin-bottom: 0.5em;
}

.form-inline > .form-col {
  margin-right: 0.5em;
}

.form-table {
  width: 100%;
  margin: 2.5rem 0 3.75rem;
  border-top: 1px solid #dddddd;
}

.form-table th, .form-table td {
  zoom: 1;
  border-bottom: 1px solid #dddddd;
}

.form-table th:after, .form-table td:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

.form-table th table th, .form-table th table td, .form-table td table th, .form-table td table td {
  border-bottom: none;
}

.form-table th {
  width: 25%;
  text-align: left;
  vertical-align: top;
  padding: 1em;
}

.form-table td {
  padding: 1em;
}

@media (max-width: 767px) {
  .form-table {
    margin: 0 0 1.875rem;
  }
}
.text-field, .text-area, .select-box {
  width: 100%;
  font-size: 1.125rem;
  background: #fafafa;
  padding: 0.7em 1em;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 1px solid #DDD;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media (max-width: 767px) {
  .text-field, .text-area, .select-box {
    font-size: 1rem;
  }
}
.text-field.-error, .text-area.-error, .select-box.-error {
  background: rgba(211, 30, 32, 0.05);
  border-color: rgba(211, 30, 32, 0.5);
}

.text-field.-inline, .text-area.-inline, .select-box.-inline {
  width: 20%;
  margin-right: 1em;
}

.text-field[disabled], .text-field[readonly], .text-area[disabled], .text-area[readonly], .select-box[disabled], .select-box[readonly] {
  color: #999;
  background: #DDD;
  border: 1px solid #CCC;
}

.text-field[name=inquiry], .text-area[name=inquiry], .select-box[name=inquiry] {
  height: 8em;
}

.radio-button, .check-box {
  margin-right: 1em;
}

.radio-button input, .check-box input {
  display: none;
}

.radio-button span, .check-box span {
  position: relative;
  display: inline-block;
  padding-left: 1.5em;
}

.radio-button span::before, .check-box span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #d7d7d7;
  background: #F9F9F9;
  vertical-align: middle;
}

.radio-button input:checked + span::before, .check-box input:checked + span::before {
  border-color: #cacaca;
}

.radio-button input:checked + span::after, .check-box input:checked + span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0.5625em;
  left: 0.3125em;
  width: 0.5625em;
  height: 0.5625em;
  background: #1852a4;
}

.radio-button.radio-button span::before, .check-box.radio-button span::before {
  border-radius: 50%;
}

.radio-button.radio-button input:checked + span::after, .check-box.radio-button input:checked + span::after {
  border-radius: 50%;
}

.required, .any {
  float: right;
  color: #fff;
  padding: 0.4em 0.8em 0.5em;
  font-size: 0.75rem;
  line-height: 1;
  margin: 0 1em;
  border-radius: 2em;
}

.required.required, .any.required {
  background: #d31e20;
}

.required.any, .any.any {
  color: #666666;
  background: #dddddd;
}

@media all and (-ms-high-contrast: none) {
  .required, .any {
    padding: 0.6em 0.8em 0.3em;
  }
}
.check-privacy {
  text-align: center;
  margin: 2.5rem 0 3.75rem;
}

.check-privacy > .description {
  display: block;
}

.check-privacy > .agree {
  display: inline-block;
  margin: 1.5em 0 0;
  padding: 1em 2em;
  background: #e7edf6;
}

@media (max-width: 767px) {
  .check-privacy {
    margin: 1.25rem 0 1.875rem;
  }
  .check-privacy .description br {
    display: none;
  }
}
.form-action {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.form-action > li {
  margin: 0 20px 20px;
}

@media (max-width: 767px) {
  .form-action {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .form-action > li {
    margin: 0 0 0.625rem;
  }
}
.form-button.-back {
  color: #808080;
  background: #eeeeee;
}

.form-button.-back::after {
  left: 2em;
  right: auto;
  -webkit-transform: translateY(-50%) scale(-1, 1);
          transform: translateY(-50%) scale(-1, 1);
  background-image: url(../images/arrow_a.svg);
  opacity: 0.5;
}

.form-button.-back:hover {
  background: #DDD;
}

@media (max-width: 767px) {
  .form-button.-back {
    padding: 1.5em 3em 1.5em 5em;
  }
}
.error {
  display: block;
  color: #d31e20;
  padding-top: 0.5em;
}

.error::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/icon/icon_error.svg) no-repeat 0 0;
  background-size: 1em 1em;
  margin-right: 0.5em;
  vertical-align: -2px;
}

/**************************************************
    Heading
***************************************************/
.section-heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1852a4;
}
.section-heading > .inner {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1100px;
  padding: 2.5rem 0 5rem;
}
@media (max-width: 767px) {
  .section-heading > .inner {
    width: calc(100% - 1.875rem);
    margin: 0 0.9375rem;
    padding: 1.25rem 0 3.75rem;
  }
}
.section-heading > .inner::before {
  content: "";
  position: absolute;
  background: #FFF;
  width: 100%;
  height: 2.5rem;
  left: 0;
  bottom: -1px;
}
.section-heading > .inner .en {
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
}
.section-heading > .inner .ja {
  color: #FFF;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .section-heading .ja {
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
  }
}
@media (min-width: 769px) {
  .section-heading + .inner {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 2.5rem 3.125rem 0 !important;
  }
}
@media (min-width: 769px) {
  .section-heading + .inner > .lead {
    max-width: 35em;
    margin: 0 auto 4.375rem;
  }
}
@media (max-width: 767px) {
  .section-heading + .inner > .lead {
    font-size: 0.8125rem;
    margin: 0 1.5625rem 1.875rem;
  }
}
@media (max-width: 767px) {
  .section-heading + .inner > .lead br {
    display: none;
  }
}
.section-heading.-single > .inner {
  padding: 2.5rem 0;
}
@media (min-width: 769px) {
  .section-heading.-single > .inner {
    padding: 1.25rem 0;
  }
}
@media (min-width: 769px) {
  .section-heading.-single > .inner .en {
    font-size: 0.875rem;
  }
}
.section-heading.-single::before {
  display: none;
}
.section-heading > span {
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 0;
}

.inner > .section > .section-heading {
  margin: 0 -500%;
}

.highlight-heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1.15em;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.highlight-heading > span {
  position: relative;
  display: block;
  padding: 0 0.5em;
  background: #f4de26;
  margin: 0.35em 0;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

@media all and (-ms-high-contrast: none) {
  .highlight-heading > span {
    padding-top: 0.3em;
    line-height: 1.4;
  }
}
[lang=en] .highlight-heading > span {
  font-weight: 500;
  letter-spacing: 0.1em;
}

.highlight-heading.-blue > span {
  color: #FFF;
  background: #1852a4;
}

.highlight-heading.js-inview, .js-inview .highlight-heading {
  max-width: 0;
  overflow: hidden;
  -webkit-transition: all 1s 0.5s;
  transition: all 1s 0.5s;
}

.highlight-heading.js-inview > span, .js-inview .highlight-heading > span {
  background: none;
  white-space: nowrap;
}

.highlight-heading.js-inview > span::before, .js-inview .highlight-heading > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #f4de26;
  -webkit-transition: all 0.5s 1s;
  transition: all 0.5s 1s;
  z-index: -1;
}

.highlight-heading.js-inview.-blue > span::before, .js-inview .highlight-heading.-blue > span::before {
  background: #1852a4;
}

.highlight-heading.js-inview-visible, .js-inview-visible .highlight-heading {
  max-width: 100%;
}

.highlight-heading.js-inview-visible > span::before, .js-inview-visible .highlight-heading > span::before {
  width: 100%;
}

@media (max-width: 767px) {
  .highlight-heading > span {
    font-size: 1.0625rem;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0;
  }
}
.balloon-heading, .spot-wrap .spot-heading, .balloon-heading-reverse, .example-detail:first-child::before, .point-detail .body::before {
  background: url(../images/balloon_bg.svg) no-repeat;
  background-size: 9.4375rem 9.4375rem;
  width: 9.4375rem;
  height: 9.4375rem;
  color: #FFF;
  font-size: 0.9375rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.balloon-heading-reverse, .example-detail:first-child::before, .point-detail .body::before {
  background: url(../images/balloon_bg_reverse.svg) no-repeat;
}

.catchcopy {
  font-size: 1.375rem;
  font-weight: bold;
  margin: 1em 0;
}

.catchcopy:first-child {
  margin-top: 0;
}

@media (max-width: 767px) {
  .catchcopy {
    font-size: 1.125rem;
  }
}
.heading-a, .markdown h2 {
  font-size: 1.125em;
  font-weight: bold;
  padding: 0.5em 1em;
  margin: 2em 0 1em;
  background: rgba(24, 82, 164, 0.1);
}

.heading-a:first-child, .markdown h2:first-child {
  margin-top: 0;
}

.clearHidden + .heading-a, .markdown .clearHidden + h2 {
  margin-top: 1em;
}

.box-a + .clearHidden + .heading-a, .markdown .box-a + .clearHidden + h2, .box-b + .clearHidden + .heading-a, .markdown .box-b + .clearHidden + h2, .box-c + .clearHidden + .heading-a, .markdown .box-c + .clearHidden + h2, .box-d + .clearHidden + .heading-a, .markdown .box-d + .clearHidden + h2 {
  margin-top: 0.5em;
}

.heading-a [class*=color-], .markdown h2 [class*=color-] {
  color: #000;
}

.heading-b, .markdown h3 {
  font-size: 1.125em;
  font-weight: bold;
  margin: 2em 0 1em 0;
  padding-left: 1.5em;
  position: relative;
  overflow: hidden;
}

.heading-b:first-child, .markdown h3:first-child {
  margin-top: 0;
}

.heading-b:before, .markdown h3:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 1em;
  height: 5px;
  background: #1852a4;
}

.heading-c, .markdown h4 {
  color: #1852a4;
  font-size: 1.125em;
  font-weight: bold;
  margin: 2em 0 1em 0;
}

/**************************************************
    icon
***************************************************/
.icon, .icon-external-white-after::after, .icon-external-white::before, .icon-external-after::after, .link-list > li a[target=_blank]::after, .icon-external::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

.icon-external::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/icon/icon_external.svg) no-repeat 0 0;
  background-size: 1em 1em;
}

.icon-external-after::after, .link-list > li a[target=_blank]::after {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/icon/icon_external.svg) no-repeat 0 0;
  background-size: 1em 1em;
  margin-right: 0;
  margin-left: 0.5em;
}

.icon-external-white::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/icon/icon_external-white.svg) no-repeat 0 0;
  background-size: 1em 1em;
}

.icon-external-white-after::after {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/icon/icon_external-white.svg) no-repeat 0 0;
  background-size: 1em 1em;
  margin-right: 0;
  margin-left: 0.5em;
}

.icon-external-after::after, .link-list > li a[target=_blank]::after {
  background-position: 50% 50%;
  background-size: 0.75em 0.75em;
}

.icon-external-white-after::after {
  background-position: 50% 50%;
  background-size: 0.75em 0.75em;
}

/**************************************************
	list
***************************************************/
/* -----------------------------------------------
  Common list
-------------------------------------------------- */
.list-a, .wysiwyg ul, .markdown ul {
  margin: 0 10px 1.25rem;
}

.list-a > li, .wysiwyg ul > li, .markdown ul > li {
  text-indent: -1em;
  padding-left: 1em;
}

.list-a > li::before, .wysiwyg ul > li::before, .markdown ul > li::before {
  content: "";
  display: inline-block;
  width: 0.375em;
  height: 0.375em;
  background: #1852a4;
  margin-right: 0.5em;
}

.link-list {
  margin: 0 10px 1.25rem;
}

.link-list > li a {
  color: #1852a4;
  text-decoration: underline;
}

.link-list > li a:hover {
  color: #1f68d0;
}

.link-list > li a::before {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  border-width: 2px 2px 0 0;
  border-color: #1852a4;
  border-style: solid;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: 0.15em;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* -----------------------------------------------
	Tag List
-------------------------------------------------- */
.tag-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.tag-list .tag {
  margin: 0 0.5em 0.5em 0;
  padding: 0.1em 1em;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: #EEE;
  border-radius: 16px;
  color: #000000;
  font-size: 0.875rem;
  text-decoration: none;
}

.tag-list .tag:hover {
  opacity: 0.7;
}

/**************************************************
    Others
***************************************************/
/* -----------------------------------------------
  Recommend
-------------------------------------------------- */
.other-section {
  padding: 3.75rem 0 0;
}

.other-section:last-child {
  padding-bottom: 0;
}

.other-section .heading {
  margin-bottom: 2.5rem;
}

.other-section .heading .en {
  font-size: 2.25rem;
}

.other-section .heading .ja {
  font-size: 1rem;
}

.other-section .other-slider .swiper-wrapper {
  height: auto;
}

@media (max-width: 767px) {
  .other-section {
    padding: 1.875rem 0 0;
  }
  .other-section .heading {
    margin-bottom: 1.5625rem;
  }
  .other-section .heading .en {
    font-size: 1.5rem;
  }
  .other-section .heading .ja {
    font-size: 0.875rem;
  }
  .other-section .body {
    padding-bottom: 0;
  }
}
/* -----------------------------------------------
  Modal Video
-------------------------------------------------- */
.tingle-enabled {
  overflow-y: scroll;
}

.tingle-modal {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tingle-modal-box {
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.3s ease-in-out 0.3s;
  transition: all 0.3s ease-in-out 0.3s;
}

.tingle-modal-box__content {
  padding: 0;
}

.tingle-modal--visible .tingle-modal-box {
  opacity: 1;
}

/**************************************************
    Table
***************************************************/
.table-a, .wysiwyg table, .column-table- table {
  clear: both;
  min-width: 100%;
  font-size: 100%;
  border-collapse: collapse;
  margin: 0 auto 30px;
  border-top: 1px solid rgba(24, 82, 164, 0.5);
}
.table-a thead th, .wysiwyg table thead th, .column-table- table thead th {
  background: #1852a4;
}
.table-a th, .wysiwyg table th, .column-table- table th, .table-a td, .wysiwyg table td, .column-table- table td {
  border-bottom: 1px solid rgba(24, 82, 164, 0.5);
  padding: 0.7em 1em;
  text-align: left;
}
.table-a th, .wysiwyg table th, .column-table- table th {
  font-weight: bold;
  vertical-align: top;
  background: #e7edf6;
}
@media (max-width: 767px) {
  .table-a, .wysiwyg table, .column-table- table {
    border-bottom: 1px solid rgba(24, 82, 164, 0.5);
  }
  .table-a th, .wysiwyg table th, .column-table- table th, .table-a td, .wysiwyg table td, .column-table- table td {
    display: block;
    border-bottom: 0;
  }
  .table-a colgroup, .wysiwyg table colgroup, .column-table- table colgroup {
    display: none;
  }
}

/**************************************************
	a-blog cms
***************************************************/
/* -----------------------------------------------
	Base
-------------------------------------------------- */
.acms-admin-form-edit {
  font-weight: normal;
}

/* -----------------------------------------------
AdminBox
-------------------------------------------------- */
.entryFormColumn #more,
.entryFormColumn label[for*=unit-map-msg-],
.entryFormColumn textarea[name*=map_msg_],
.formColumnMap .entryFormFileControl .acms-admin-margin-bottom-small tr:nth-child(2) {
  display: none !important;
}

#adminBox {
  margin: 0;
}

.acms-entry + .acms-box-medium {
  margin-top: 20px;
}

/* -----------------------------------------------
	Lite Editor
-------------------------------------------------- */
.color-red {
  font-weight: bold;
  color: #F00;
}

.color-orange {
  font-weight: bold;
  color: #F60;
}

.color-green {
  font-weight: bold;
  color: #096;
}

.color-blue {
  font-weight: bold;
  color: #06C;
}

.color-pink {
  font-weight: bold;
  color: #F06;
}

.color-gray {
  font-weight: bold;
  color: #888;
}

.color-yellow {
  font-weight: bold;
  color: #FC3;
}

.color-yGreen {
  font-weight: bold;
  color: #9C3;
}

.lite-editor-toolbox span[class*=color-],
.acms-admin-form-radio span[class*=color-] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.lite-editor-toolbox .color-red,
.acms-admin-form-radio .color-red {
  background-color: #F00;
}
.lite-editor-toolbox .color-orange,
.acms-admin-form-radio .color-orange {
  background-color: #F60;
}
.lite-editor-toolbox .color-green,
.acms-admin-form-radio .color-green {
  background-color: #096;
}
.lite-editor-toolbox .color-blue,
.acms-admin-form-radio .color-blue {
  background-color: #06C;
}
.lite-editor-toolbox .color-pink,
.acms-admin-form-radio .color-pink {
  background-color: #F06;
}
.lite-editor-toolbox .color-gray,
.acms-admin-form-radio .color-gray {
  background-color: #888;
}
.lite-editor-toolbox .color-yellow,
.acms-admin-form-radio .color-yellow {
  background-color: #FC3;
}
.lite-editor-toolbox .color-yGreen,
.acms-admin-form-radio .color-yGreen {
  background-color: #9C3;
}

/* -----------------------------------------------
	Grid Custom
-------------------------------------------------- */
@media (min-width: 769px) {
  .acms-entry [class*=column-file-] {
    margin-bottom: 10px;
  }
  .acms-grid > .column-image-left,
  .acms-grid > .column-media-left,
  [class*=box-] > .column-image-left,
  [class*=box-] > .column-media-left {
    padding-right: 25px;
  }
  .acms-grid > .column-image-right,
  .acms-grid > .column-media-right,
  [class*=box-] > .column-image-right,
  [class*=box-] > .column-media-right {
    padding-left: 25px;
  }
  .js-edit_inplace p:last-child {
    margin-bottom: 1em;
  }
  .js-edit_inplace p.caption {
    margin-bottom: 0;
  }
  .js-edit_inplace.align_left + .js-edit_inplace {
    overflow: hidden;
  }
  .js-unit_group-align .js-edit_inplace p:last-child {
    margin-bottom: 0;
  }
}
.acms-grid > .plain,
.acms-grid > .blockquote > .plain,
.acms-grid > [class*=box-] > .plain {
  padding-left: 10px;
}

.acms-grid > [class*=box-] {
  margin-left: 10px;
  margin-right: 10px;
}

[class*=column-map-] iframe {
  width: 100%;
}

.caption {
  display: block;
  font-size: 0.75em;
  margin-top: 0.5em;
  margin-bottom: 0;
  text-align: center;
}

/**************************************************
	group setting for a-blog cms post page
***************************************************/
/* -----------------------------------------------
	Column
-------------------------------------------------- */
@media (min-width: 769px) {
  .column-photo {
    float: left;
    width: 33.3333%;
  }
}
@media (min-width: 769px) {
  .column-photo + .column-body {
    float: right;
    width: 66.6666%;
  }
}

@media (min-width: 769px) {
  .column-body {
    float: left;
    width: 66.6666%;
  }
}
@media (min-width: 769px) {
  .column-body + .column-photo {
    float: right;
    width: 33.3333%;
  }
}

/* -----------------------------------------------
	Box
-------------------------------------------------- */
.box-a, .box-b, .box-c, .box-d {
  clear: both;
  zoom: 1;
  padding: 30px;
  margin: 30px 10px;
}
.box-a:after, .box-b:after, .box-c:after, .box-d:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}
@media (max-width: 767px) {
  .box-a, .box-b, .box-c, .box-d {
    padding: 20px 10px;
  }
}
.box-a:first-child, .box-b:first-child, .box-c:first-child, .box-d:first-child {
  margin-top: 0;
}
.box-a > *:last-child, .box-b > *:last-child, .box-c > *:last-child, .box-d > *:last-child {
  margin-bottom: 0;
}

.box-a {
  border: 1px solid #1852a4;
}

.box-b {
  background: rgba(24, 82, 164, 0.1);
}

/* -----------------------------------------------
	Photo Gallery
-------------------------------------------------- */
/**************************************************
	unit setting for a-blog cms post page
***************************************************/
/* -----------------------------------------------
  Text Unit
-------------------------------------------------- */
/* ---------- markdown ---------- */
.markdown {
  margin: 0;
}
.markdown p {
  white-space: pre-line;
}
.markdown .prettyprint {
  margin: 1em 10px;
}

/* ---------- wysiwyg ---------- */
.wysiwyg ol, .wysiwyg ul {
  padding-left: 10px;
}
.wysiwyg blockquote {
  margin-left: 10px;
}
.wysiwyg table {
  max-width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  border: 0;
}

/* ---------- inline ---------- */
.highlight {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ffd400));
  background: -webkit-linear-gradient(transparent 60%, #ffd400 60%);
  background: linear-gradient(transparent 60%, #ffd400 60%);
  font-style: normal;
}

/* -----------------------------------------------
	Table
-------------------------------------------------- */
.column-table- {
  margin: 10px 0 30px;
}
.column-table- table {
  margin-top: 0;
  margin-bottom: 0;
}

/* -----------------------------------------------
	File Unit
-------------------------------------------------- */
.icon-pdf::before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_pdf.svg) no-repeat 0 0;
  background-size: 18px 18px;
  margin-right: 8px;
  vertical-align: middle;
}

.icon-pdf-after::after {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_pdf.svg) no-repeat 0 0;
  background-size: 18px 18px;
  margin-left: 8px;
  vertical-align: middle;
}

.icon-xls::before, .icon-xlsx::before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_xls.svg) no-repeat 0 0;
  background-size: 18px 18px;
  margin-right: 8px;
  vertical-align: middle;
}

.icon-doc::before, .icon-docx::before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_doc.svg) no-repeat 0 0;
  background-size: 18px 18px;
  margin-right: 8px;
  vertical-align: middle;
}

.icon-ppt::before, .icon-pptx::before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_ppt.svg) no-repeat 0 0;
  background-size: 18px 18px;
  margin-right: 8px;
  vertical-align: middle;
}

/* -----------------------------------------------
	Divider
-------------------------------------------------- */
.divider {
  height: 1px;
}
.divider.-x0\.5 {
  margin-bottom: 0.5em;
}
.divider.-x1 {
  margin-bottom: 1em;
}
.divider.-x2 {
  margin-bottom: 2em;
}
.divider.-x3 {
  margin-bottom: 3em;
}
.divider.-x4 {
  margin-bottom: 4em;
}
.divider.-separate {
  border-bottom: 1px solid #E2E2E6;
}
.divider.-separate.-x0\.5 {
  padding-bottom: 0.5em;
}
.divider.-separate.-x1 {
  padding-bottom: 1em;
}
.divider.-separate.-x2 {
  padding-bottom: 2em;
}
.divider.-separate.-x3 {
  padding-bottom: 3em;
}
.divider.-separate.-x4 {
  padding-bottom: 4em;
}
.divider + * {
  margin-top: 0;
}

/* -----------------------------------------------
	Video
-------------------------------------------------- */
.videoplayer {
  display: block;
  margin: 0 10px 20px;
}

.video-js .vjs-big-play-button {
  font-size: 6em !important;
  width: 1.6em !important;
  height: 1.6em !important;
  border-radius: 50% !important;
  margin-left: -0.8em !important;
}
.fancybox-container .video-js .vjs-big-play-button {
  display: none !important;
}

.movie-player iframe {
  display: block;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .movie-player iframe {
    width: 100%;
    height: calc(0.5625 * (100vw - 2rem));
  }
}

/**************************************************
    Top
***************************************************/
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes scroll1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-48.9%);
            transform: translateX(-48.9%);
  }
}
@keyframes scroll1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-48.9%);
            transform: translateX(-48.9%);
  }
}
@-webkit-keyframes scroll2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes scroll2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.fade-in .js-inview {
  opacity: 0;
}
.fade-in.js-inview-visible {
  -webkit-animation: fade-in 0.5s forwards;
          animation: fade-in 0.5s forwards;
}
.fade-in.js-inview-visible:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.fade-in.js-inview-visible:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.fade-in.js-inview-visible:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.fade-in.js-inview-visible:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.fade-in.js-inview-visible:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.fade-in.js-inview-visible:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.fade-in.js-inview-visible:nth-of-type(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.fade-in.js-inview-visible:nth-of-type(8) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.fade-in.js-inview-visible:nth-of-type(9) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.fade-in.js-inview-visible:nth-of-type(10) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.fade-in.js-inview-visible:nth-of-type(11) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.fade-in.js-inview-visible:nth-of-type(12) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.fade-in.js-inview-visible:nth-of-type(13) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.fade-in.js-inview-visible:nth-of-type(14) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.fade-in.js-inview-visible:nth-of-type(15) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.fade-in-up.js-inview {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
.fade-in-up.js-inview-visible {
  -webkit-animation: fade-in-up 0.5s forwards;
          animation: fade-in-up 0.5s forwards;
}
.fade-in-up.js-inview-visible:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.fade-in-up.js-inview-visible:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.fade-in-up.js-inview-visible:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.fade-in-up.js-inview-visible:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.fade-in-up.js-inview-visible:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.fade-in-up.js-inview-visible:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.fade-in-up.js-inview-visible:nth-of-type(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.fade-in-up.js-inview-visible:nth-of-type(8) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.fade-in-up.js-inview-visible:nth-of-type(9) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.fade-in-up.js-inview-visible:nth-of-type(10) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.fade-in-up.js-inview-visible:nth-of-type(11) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.fade-in-up.js-inview-visible:nth-of-type(12) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.fade-in-up.js-inview-visible:nth-of-type(13) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.fade-in-up.js-inview-visible:nth-of-type(14) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.fade-in-up.js-inview-visible:nth-of-type(15) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

/* -----------------------------------------------
  Common
-------------------------------------------------- */
.course-button {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFF;
  background: #1852a4;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 2.5rem 6.25rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .course-button {
    padding: 1.25rem 5rem;
  }
}
.course-button .en {
  position: relative;
  font-size: 1.875rem;
  font-weight: normal;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  margin-right: 0.6666666667em;
}
@media (max-width: 767px) {
  .course-button .en {
    font-size: 1.25rem;
  }
}
.course-button .ja {
  position: relative;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1;
}
.course-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(4, 15, 31, 0.3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.course-button::after {
  display: inline-block;
  content: "";
  width: 1.6875rem;
  height: 1.6875rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 1.6875rem 1.6875rem;
  margin-left: auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .course-button::after {
    display: inline-block;
    content: "";
    width: 0.9375rem;
    height: 0.9375rem;
    background: url(../images/arrow_a_white.svg) no-repeat 0 0;
    background-size: 0.9375rem 0.9375rem;
  }
}
.course-button:hover {
  color: #FFF;
}
.course-button:hover::before {
  width: 100%;
}
.course-button:hover::after {
  -webkit-transform: translateX(1em);
          transform: translateX(1em);
}

[lang=en] .course-button .en {
  font-size: 1.75rem;
}

/* -----------------------------------------------
  Hero
-------------------------------------------------- */
/* ----- header ----- */
#top .site-header {
  height: 0;
}

/* ----- content ----- */
[lang=en] .top-content {
  background: #1852a4 url(../images/top/hero_bg.jpg) no-repeat 50% 0;
  background-size: contain;
  opacity: 0;
  -webkit-animation: fade-in 2s 0s forwards;
          animation: fade-in 2s 0s forwards;
}
@media (max-width: 767px) {
  [lang=en] .top-content .top-content {
    background-size: 170vw auto;
    background-position: 10% 0;
  }
}

/* ----- hero ----- */
[lang=ja] .top-hero {
  position: relative;
  width: 100%;
}
[lang=ja] .top-hero-content {
  position: absolute;
  z-index: 2;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 1200px;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-content {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 90%;
    padding-top: 30vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
[lang=ja] .top-hero-content > * {
  font-family: "Noto Sans JP", sans-serif;
}
[lang=ja] .top-hero-content-inner {
  width: 45.7%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-content-inner {
    width: 100%;
    height: auto;
  }
}
[lang=ja] .top-hero-content-text {
  width: 100%;
  height: 100%;
}
[lang=ja] .top-hero-reservation {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
[lang=ja] .top-hero-reservation-inner {
  background-color: rgba(44, 130, 252, 0.72);
  width: 100%;
  padding: 25px;
  text-align: center;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-reservation-inner {
    width: 90%;
  }
}
[lang=ja] .top-hero-reservation-inner .top-hero-reservation-ttl {
  color: #fff;
  font-size: 16px;
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  font-weight: bold;
  position: relative;
  margin-top: 30px;
}
[lang=ja] .top-hero-reservation-inner .top-hero-reservation-ttl:first-of-type {
  margin-top: 0;
}
[lang=ja] .top-hero-reservation-inner .top-hero-reservation-ttl:first-of-type::before {
  display: block;
  content: "";
  position: absolute;
  top: -10px;
  left: -35px;
  width: 141px;
  height: 33px;
  background: url(../images/top/hero_text.png) no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-reservation-inner .top-hero-reservation-ttl:first-of-type::before {
    left: 0;
    width: 100px;
    height: 23px;
  }
}
[lang=ja] .top-hero-reservation-inner a, [lang=ja] .top-hero-reservation-inner button {
  margin: 10px auto 0;
  border: 1px solid #fff;
  color: #fff;
  display: grid;
  place-items: center;
  width: 60%;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  padding: 20px 0;
}
@media (min-width: 769px) {
  [lang=ja] .top-hero-reservation-inner a::before, [lang=ja] .top-hero-reservation-inner button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(4, 15, 31, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  [lang=ja] .top-hero-reservation-inner a:hover:hover::before, [lang=ja] .top-hero-reservation-inner button:hover:hover::before {
    width: 100%;
  }
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-reservation-inner a, [lang=ja] .top-hero-reservation-inner button {
    font-size: 16px;
    padding: 12px 0;
  }
}
[lang=ja] .top-hero-reservation-inner a::after, [lang=ja] .top-hero-reservation-inner button::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 12px 12px;
  position: absolute;
  top: 50%;
  right: 1em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
[lang=ja] .top-hero-reservation-att {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
[lang=ja] .top-hero-text h2 {
  font-size: 27px;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 10px;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-text h2 {
    font-size: 17px;
  }
}
[lang=ja] .top-hero-text h2 span {
  color: #f4de26;
  font-family: "MuseoModerno", cursive;
  font-weight: normal;
  font-size: 48px;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-text h2 span {
    font-size: 50px;
  }
}
[lang=ja] .top-hero-text p {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 3px;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-text p {
    line-height: 2;
    font-size: 13px;
  }
}
[lang=ja] .top-hero-slide {
  z-index: 1;
}
[lang=ja] .top-hero-slide img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
[lang=ja] .top-hero-slide .swiper-pagination {
  bottom: 0;
  text-align: right;
  max-width: 1100px;
  margin: auto;
  position: relative;
}
[lang=ja] .top-hero-slide .swiper-pagination-bullet {
  width: 50px;
  height: 10px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  [lang=ja] .top-hero-slide .swiper-pagination-bullet {
    width: 30px;
    height: 6px;
    border-radius: 10px;
  }
}
[lang=ja] .top-hero-slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #1852a4;
}

[lang=en] .top-hero {
  position: relative;
  height: 100vh;
}
@media (min-width: 769px) {
  [lang=en] .top-hero {
    max-height: 61.5384615385vw;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-hero {
    height: 61vh;
    overflow: hidden;
  }
}
[lang=en] .top-hero .copy {
  position: absolute;
  bottom: 7.8125rem;
  left: 6.25rem;
}
@media (max-width: 767px) {
  [lang=en] .top-hero .copy {
    bottom: 55%;
    left: 1.25rem;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}
[lang=en] .top-hero .copy img {
  width: 20.9375rem;
  height: 8.4375rem;
  -webkit-filter: drop-shadow(0 0 3px rgba(11, 38, 75, 0.5));
          filter: drop-shadow(0 0 3px rgba(11, 38, 75, 0.5));
}
@media screen and (min-width: 1300px) {
  [lang=en] .top-hero .copy img {
    width: 25.7692307692vw;
    height: 10.3846153846vw;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-hero .copy img {
    width: 9.9453125rem;
    height: 4.0078125rem;
  }
}
[lang=en] .top-hero::before, [lang=en] .top-hero::after {
  display: inline-block;
  content: "";
  width: 55.9375rem;
  height: 39rem;
  background: url(../images/top/hero_map.png) no-repeat 0 0;
  background-size: 55.9375rem 39rem;
  position: absolute;
  right: 0;
  bottom: -12rem;
}
@media screen and (min-width: 1300px) {
  [lang=en] .top-hero::before, [lang=en] .top-hero::after {
    display: inline-block;
    content: "";
    width: 68.8461538462vw;
    height: 48vw;
    background: url(../images/top/hero_map.png) no-repeat 0 0;
    background-size: 68.8461538462vw 48vw;
    bottom: -14.7692307692vw;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-hero::before, [lang=en] .top-hero::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../images/top/hero_map.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    background-size: 140vw auto;
    background-position: 67% 0;
    position: absolute;
    right: 0;
    bottom: -3rem;
  }
}
[lang=en] .top-hero::after {
  background-image: url(../images/top/hero_map_text.svg) !important;
}
@media (min-width: 769px) {
  [lang=en] .top-hero-bnr {
    position: absolute;
    right: 0;
    top: 155px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-hero-bnr {
    padding: 20px;
    background: #fff;
  }
}
[lang=en] .top-hero-bnr a {
  display: block;
}
@media (min-width: 769px) {
  [lang=en] .top-hero-bnr a:first-of-type {
    margin-bottom: 1px;
  }
  [lang=en] .top-hero-bnr a:first-of-type:hover {
    opacity: 0.7;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-hero-bnr a:first-of-type {
    margin-bottom: 20px;
  }
}

/* -----------------------------------------------
  plan
-------------------------------------------------- */
.top-plan {
  margin-top: 72px;
}
.top-plan h2 {
  font-size: 24px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 767px) {
  .top-plan h2 {
    font-size: 20px;
  }
}
.top-plan > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .top-plan > .inner {
    padding: 0;
    margin-top: -0.9375rem;
  }
}
.top-plan .top-plan-list {
  margin-top: 18px;
}
@media (min-width: 769px) {
  .top-plan .top-plan-list .swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
  }
}
.top-plan a.top-plan-item {
  text-decoration: none;
}
.top-plan a.top-plan-item p {
  color: #000000;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 10px;
}
.top-plan.js-inview .inner {
  opacity: 0;
}
.top-plan.js-inview-visible .inner {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}

/* -----------------------------------------------
  about
-------------------------------------------------- */
.top-about {
  margin-top: 60px;
  font-family: "Noto Sans JP", sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (max-width: 767px) {
  .top-about {
    margin-top: 20px;
  }
}
.top-about > .inner {
  position: relative;
  zoom: 1;
  max-width: 1200px;
  background-image: url(../images/top/about_bg.jpg);
  background-repeat: no-repeat;
  background-position: top 60px center;
  overflow: hidden;
  padding-top: 60px;
}
@media (min-width: 769px) {
  .top-about > .inner {
    background-size: contain;
  }
}
@media (max-width: 767px) {
  .top-about > .inner {
    padding: 60px 1.5625rem 0;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
.top-about > .inner .heading-area {
  background-color: #1852a4;
  max-width: 880px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 60px 50px 30px;
  position: relative;
  color: #fff;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  .top-about > .inner .heading-area {
    display: block;
    padding: 30px 20px 20px;
  }
}
.top-about > .inner .heading-area::before {
  display: block;
  content: "";
  width: 244px;
  height: 44px;
  background-image: url(../images/top/about_heading_bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  left: -100px;
}
@media (max-width: 767px) {
  .top-about > .inner .heading-area::before {
    width: 122px;
    height: 22px;
    left: 0;
  }
}
.top-about > .inner .heading-area .heading {
  position: absolute;
  top: -42px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #1852a4;
  font-family: "MuseoModerno", cursive;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 10px;
  font-weight: 500;
  width: 100vw;
  text-align: center;
}
@media (max-width: 767px) {
  .top-about > .inner .heading-area .heading {
    font-size: 36px;
    top: -30px;
    letter-spacing: 4px;
  }
}
.top-about > .inner .heading-area-text {
  width: 80%;
  font-size: 16px;
  letter-spacing: 2px;
}
@media (max-width: 767px) {
  .top-about > .inner .heading-area-text {
    width: 100%;
    font-size: 14px;
    margin-top: 20px;
  }
}
.top-about > .inner .heading-area-text ._right {
  text-align: right;
}
.top-about > .inner .heading-area-text a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  padding-right: 30px;
  position: relative;
}
@media (max-width: 767px) {
  .top-about > .inner .heading-area-text a {
    font-size: 12px;
  }
}
.top-about > .inner .heading-area-text a::after {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-left: 10px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .top-about > .inner .heading-area-text a:hover:hover::after {
    -webkit-transform: translateX(1em);
            transform: translateX(1em);
  }
}
.top-about > .inner .top-about-can {
  margin-top: 100px;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can {
    margin-top: 40px;
  }
}
.top-about > .inner .top-about-can h3 {
  text-align: center;
  font-size: 24px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can h3 {
    font-size: 18px;
  }
}
.top-about > .inner .top-about-can h3 .label {
  background-color: #1852a4;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 10px;
  letter-spacing: 3px;
}
.top-about > .inner .top-about-can h3 .en {
  font-family: "MuseoModerno", cursive;
  font-size: 50px;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can h3 .en {
    font-size: 34px;
  }
}
.top-about > .inner .top-about-can-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can-inner {
    display: block;
  }
}
.top-about > .inner .top-about-can-item {
  width: 346px;
  margin: 40px 15px 0;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can-item {
    margin: 30px auto 0;
  }
  .top-about > .inner .top-about-can-item img {
    width: 80%;
    display: block;
    margin: auto;
  }
}
.top-about > .inner .top-about-can-img {
  width: 100%;
}
.top-about > .inner .top-about-can-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can-text {
    margin-top: 16px;
  }
}
.top-about > .inner .top-about-can-text .img {
  margin-bottom: 0;
  width: 100px;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can-text .img {
    width: 25%;
  }
}
.top-about > .inner .top-about-can-text .img img {
  width: 100%;
}
.top-about > .inner .top-about-can-text .text {
  font-size: 18px;
  color: #1852a4;
  font-weight: bold;
  line-height: 1.5;
  width: calc(100% - 100px);
  padding-left: 10px;
}
@media (max-width: 767px) {
  .top-about > .inner .top-about-can-text .text {
    font-size: 16px;
    width: 56%;
  }
}
.top-about > .inner.js-inview .heading-area,
.top-about > .inner.js-inview .top-about-can {
  opacity: 0;
}
.top-about > .inner.js-inview-visible .heading-area,
.top-about > .inner.js-inview-visible .top-about-can {
  -webkit-animation: fade-in-up 1s 0.5s forwards;
          animation: fade-in-up 1s 0.5s forwards;
}

/* -----------------------------------------------
  News
-------------------------------------------------- */
[lang=ja] .top-news {
  position: relative;
  background: #FFF;
  padding: 0 0 114px;
  margin-top: 12px;
}
@media (max-width: 767px) {
  [lang=ja] .top-news {
    padding-bottom: 0.625rem;
  }
}
[lang=ja] .top-news > .inner {
  position: relative;
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  padding-top: 5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  [lang=ja] .top-news > .inner {
    padding: 0 1.5625rem;
    padding: 1.5625rem;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
[lang=ja] .top-news > .inner.js-inview .heading,
[lang=ja] .top-news > .inner.js-inview .news-list,
[lang=ja] .top-news > .inner.js-inview ._right,
[lang=ja] .top-news > .inner.js-inview .top-news-img {
  opacity: 0;
}
[lang=ja] .top-news > .inner.js-inview-visible .heading,
[lang=ja] .top-news > .inner.js-inview-visible .news-list,
[lang=ja] .top-news > .inner.js-inview-visible ._right,
[lang=ja] .top-news > .inner.js-inview-visible .top-news-img {
  -webkit-animation: fade-in-up 1s 0.5s forwards;
          animation: fade-in-up 1s 0.5s forwards;
}
[lang=ja] .top-news .heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1.875rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 1.875rem;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .heading {
    width: 100%;
    font-size: 1.5rem;
    margin-bottom: 0;
  }
}
[lang=ja] .top-news .more {
  color: #000000;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none;
  font-family: "MuseoModerno", cursive;
  margin-right: 45px;
  font-size: 14px;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .more {
    font-size: 20px;
    margin-right: 0;
  }
}
[lang=ja] .top-news .more::after {
  display: inline-block;
  content: "";
  background-size: 100%;
  width: 14px;
  height: 14px;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  margin-left: 1em;
  vertical-align: middle;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .more::after {
    width: 20px;
    height: 20px;
  }
}
[lang=ja] .top-news .more:hover::after {
  -webkit-transform: translateX(1em);
          transform: translateX(1em);
}
[lang=ja] .top-news ._right {
  text-align: right;
}
[lang=ja] .top-news .top-news-content {
  width: calc(100% - 537px);
  position: relative;
}
@media (min-width: 769px) {
  [lang=ja] .top-news .top-news-content {
    padding-top: 50px;
    padding-left: 38px;
  }
}
[lang=ja] .top-news .top-news-content::before {
  display: block;
  content: "Setouchi Island Concierge Service";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-family: "Comfortaa", sans-serif;
  position: absolute;
  left: -20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 12px;
  color: #ccc;
  font-weight: bold;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .top-news-content::before {
    display: none;
  }
}
@media (max-width: 767px) {
  [lang=ja] .top-news .top-news-content {
    width: 100%;
  }
}
[lang=ja] .top-news .top-news-content .heading {
  margin-bottom: 38px;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .top-news-content .heading {
    margin-top: 50px;
  }
  [lang=ja] .top-news .top-news-content .heading img {
    width: 34%;
  }
}
[lang=ja] .top-news .top-news-img {
  width: 437px;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .top-news-img {
    width: 100%;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1;
  }
}
[lang=ja] .top-news .top-news-img img {
  width: 100%;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .news-list {
    width: 100%;
  }
}
@media (max-width: 767px) {
  [lang=ja] .top-news .news-list > .item {
    display: block;
  }
}
[lang=ja] .top-news .news-list > .item .date {
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  width: 4em;
}
@media (max-width: 767px) {
  [lang=ja] .top-news .news-list > .item .date {
    display: block;
    width: 100%;
    font-size: 16px;
  }
}
[lang=ja] .top-news .news-list > .item .title a {
  color: #000;
}

[lang=en] .top-news {
  position: relative;
  background: #FFF;
  padding: 0 0 8.75rem;
}
@media (max-width: 767px) {
  [lang=en] .top-news {
    padding-bottom: 0.625rem;
  }
}
[lang=en] .top-news::before {
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 18.75rem;
  background: url(../images/header_bg_news.jpg) no-repeat 50% 50%;
  background-size: cover;
}
@media (max-width: 767px) {
  [lang=en] .top-news::before {
    height: 40vw;
  }
}
[lang=en] .top-news > .inner {
  position: relative;
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  padding-top: 5rem;
}
@media (max-width: 767px) {
  [lang=en] .top-news > .inner {
    padding: 0 1.5625rem;
    padding: 1.5625rem;
  }
}
[lang=en] .top-news > .inner::before {
  display: inline-block;
  content: "";
  width: 20.625rem;
  height: 29.375rem;
  background: url(/themes/en@sics/images/top/news_img1.jpg) no-repeat 0 0;
  background-size: 20.625rem 29.375rem;
  position: absolute;
  top: -3.125rem;
  right: 4.375rem;
}
@media (max-width: 767px) {
  [lang=en] .top-news > .inner::before {
    display: none;
  }
}
[lang=en] .top-news > .inner::after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
  display: block;
  position: absolute;
  top: 50%;
  right: 0rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "Feel the setouchi";
  color: #1852a4;
  font-size: 0.875rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
}
@media (max-width: 767px) {
  [lang=en] .top-news > .inner::after {
    display: none;
  }
}
[lang=en] .top-news > .inner.js-inview .heading,
[lang=en] .top-news > .inner.js-inview .news-list, [lang=en] .top-news > .inner.js-inview::before {
  opacity: 0;
}
[lang=en] .top-news > .inner.js-inview-visible .heading,
[lang=en] .top-news > .inner.js-inview-visible .news-list {
  -webkit-animation: fade-in-up 1s 0.5s forwards;
          animation: fade-in-up 1s 0.5s forwards;
}
[lang=en] .top-news > .inner.js-inview-visible::before {
  -webkit-animation: fade-in-up 1s 1s forwards;
          animation: fade-in-up 1s 1s forwards;
}
[lang=en] .top-news .heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1.875rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 1.875rem;
}
@media (min-width: 769px) {
  [lang=en] .top-news .heading {
    width: 37.5rem;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-news .heading {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
}
[lang=en] .top-news .heading .more {
  color: #000000;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none;
}
@media (max-width: 767px) {
  [lang=en] .top-news .heading .more {
    font-size: 0.75rem;
  }
}
[lang=en] .top-news .heading .more::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  margin-left: 1em;
  vertical-align: middle;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
[lang=en] .top-news .heading .more:hover::after {
  -webkit-transform: translateX(1em);
          transform: translateX(1em);
}

/* -----------------------------------------------
  Tour
-------------------------------------------------- */
[lang=ja] .top-tour > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  [lang=ja] .top-tour > .inner {
    padding: 0 2.5625rem;
    margin-top: -0.9375rem;
  }
}
[lang=ja] .top-tour h2 {
  text-align: center;
  font-size: 24px;
  margin-top: 30px;
  font-family: "Noto Sans JP", sans-serif;
}
@media (min-width: 769px) {
  [lang=ja] .top-tour h2 {
    letter-spacing: 5px;
    margin-top: 0;
    margin-bottom: 20px;
  }
}
[lang=ja] .top-tour h2 span {
  display: block;
  text-align: center;
}
@media (min-width: 769px) {
  [lang=ja] .top-tour h2 span {
    letter-spacing: 5px;
  }
}
[lang=ja] .top-tour h2 span.ja {
  margin: 6px auto;
}
[lang=ja] .top-tour .top-tour-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  row-gap: 20px;
}
@media (max-width: 767px) {
  [lang=ja] .top-tour .top-tour-list {
    display: block;
  }
}
[lang=ja] .top-tour .top-tour-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media (max-width: 767px) {
  [lang=ja] .top-tour .top-tour-item {
    margin-top: 30px;
  }
}
[lang=ja] .top-tour .top-tour-item p {
  text-align: center;
  line-height: 1;
  margin-bottom: 10px;
}
[lang=ja] .top-tour .top-tour-item p span {
  background-color: #1852a4;
  color: #fff;
  font-size: 13px;
  display: inline-block;
  margin-top: 6px;
  padding: 3px 4px;
  line-height: 1;
  font-weight: bold;
}
@media (max-width: 767px) {
  [lang=ja] .top-tour .top-tour-item p span {
    padding: 5px 6px;
    letter-spacing: 2px;
    font-size: 12px;
  }
}
[lang=ja] .top-tour .top-tour-item a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-weight: bold;
  width: 100%;
  border: 2px solid #1852a4;
  position: relative;
  padding: 7px 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  [lang=ja] .top-tour .top-tour-item a {
    padding: 16px 0;
    border: 1px solid #1852a4;
    font-size: 16px;
    letter-spacing: 2px;
  }
}
[lang=ja] .top-tour .top-tour-item a::before {
  display: block;
  content: "";
  width: 26px;
  height: 25px;
  background-image: url(../images/icon/icon_flag02.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-right: 12px;
  margin-left: -33px;
}
[lang=ja] .top-tour .top-tour-item a::after {
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translate(0, -50%) rotate(135deg);
          transform: translate(0, -50%) rotate(135deg);
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid #1852a4;
  border-right: 2px solid #1852a4;
}
@media (hover: hover) and (pointer: fine) {
  [lang=ja] .top-tour .top-tour-item a:hover:hover {
    background-color: #1852a4;
    color: #fff;
  }
  [lang=ja] .top-tour .top-tour-item a:hover:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}
[lang=ja] .top-tour.js-inview .inner {
  opacity: 0;
}
[lang=ja] .top-tour.js-inview-visible .inner {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}

[lang=en] .top-tour .heading img {
  width: 20.4375rem;
  height: 11.625rem;
}
[lang=en] .top-tour {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}
[lang=en] .top-tour::after {
  display: inline-block;
  content: "";
  width: 34.375rem;
  height: 37.5rem;
  background: url(../images/top/tour_photo.jpg) no-repeat 0 0;
  background-size: 34.375rem 37.5rem;
  position: absolute;
  top: -4.375rem;
  left: 43.75rem;
  z-index: 2;
}
[lang=en] .top-tour > .inner {
  position: relative;
  background: #FFF;
  width: 56.25rem;
  margin-top: 4.375rem;
  padding: 4.375rem 15.625rem 4.375rem 9.375rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
}
[lang=en] .top-tour > .inner::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 3.125rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "Setouchi Island Concierge Service";
  color: #cccccc;
  font-size: 0.6875rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.2em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: sideways;
}
[lang=en] .top-tour .heading {
  margin-bottom: 1.875rem;
}
[lang=en] .top-tour .lead {
  line-height: 2.5;
  letter-spacing: 0.1em;
}
[lang=en] .top-tour .tour-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[lang=en] .top-tour .tour-list > .item {
  position: relative;
  width: 50%;
}
[lang=en] .top-tour .tour-list > .item:not(:last-child)::after {
  display: block;
  content: "";
  width: 1px;
  height: 3.75rem;
  background: #FFF;
  position: absolute;
  top: calc(50% - 1.875rem);
  right: 0;
}
[lang=en] .top-tour .tour-list > .item .course-button {
  background: transparent;
}
[lang=en] .top-tour .tour-list > .item .top-tour.js-inview::after,
[lang=en] .top-tour.js-inview .inner, [lang=en] .top-tour.js-inview .heading, [lang=en] .top-tour.js-inview .lead {
  opacity: 0;
}
[lang=en] .top-tour.js-inview-visible::after {
  -webkit-animation: fade-in-up 1s 0.9s forwards;
          animation: fade-in-up 1s 0.9s forwards;
}
[lang=en] .top-tour.js-inview-visible .inner {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
[lang=en] .top-tour.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0.3s forwards;
          animation: fade-in-up 0.5s 0.3s forwards;
}
[lang=en] .top-tour.js-inview-visible .highlight-heading > span::after {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
[lang=en] .top-tour.js-inview-visible .lead {
  -webkit-animation: fade-in-up 0.5s 0.9s forwards;
          animation: fade-in-up 0.5s 0.9s forwards;
}
@media (max-width: 767px) {
  [lang=en] .top-tour::after {
    display: none;
  }
  [lang=en] .top-tour > .inner {
    width: auto;
    padding: 1.5625rem;
    margin-top: 0;
  }
  [lang=en] .top-tour > .inner::before {
    display: none;
  }
  [lang=en] .top-tour > .inner .heading {
    margin-bottom: 1.25rem;
  }
  [lang=en] .top-tour > .inner .heading img {
    width: auto;
    height: 5.875rem;
  }
  [lang=en] .top-tour > .inner .lead {
    font-size: 0.875rem;
    line-height: 2;
  }
  [lang=en] .top-tour > .inner .lead br {
    display: none;
  }
  [lang=en] .top-tour > .inner .lead::after {
    display: inline-block;
    content: "";
    width: 20.3125rem;
    height: 22.125rem;
    background: url(../images/top/tour_photo.jpg) no-repeat 0 0;
    background-size: 20.3125rem 22.125rem;
    margin-top: 1.5625rem;
    margin-bottom: -18.75rem;
  }
  [lang=en] .top-tour .tour-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: 17.1875rem;
    background: #1852a4;
  }
  [lang=en] .top-tour .tour-list > .item {
    width: 100%;
    padding: 0 1.5625rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  [lang=en] .top-tour .tour-list > .item:not(:last-child) .course-button {
    border-bottom: 1px solid #FFF;
  }
  [lang=en] .top-tour .tour-list > .item:not(:last-child)::after {
    display: none;
  }
  [lang=en] .top-tour .tour-list > .item .course-button {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0.8em 0 1.6em;
    margin: 0;
  }
  [lang=en] .top-tour .tour-list > .item .course-button .en {
    font-size: 1.5rem;
    font-weight: normal;
  }
  [lang=en] .top-tour .tour-list > .item .course-button .ja {
    font-size: 0.8125rem;
  }
  [lang=en] .top-tour .tour-list > .item .course-button::after {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
[lang=en] .top-tour + .top-hopping {
  border-top: 3.125rem solid #FFF;
}
@media (max-width: 767px) {
  [lang=en] .top-tour + .top-hopping {
    border-top: 1.875rem solid #FFF;
  }
}

/* -----------------------------------------------
  Private
-------------------------------------------------- */
.top-private {
  margin-top: 70px;
  padding-top: 30px;
}
@media (max-width: 767px) {
  .top-private {
    margin-top: 50px;
  }
}
.top-private .heading {
  position: relative;
  width: 100%;
  padding-top: 30.7692%;
  background-image: url(../images/top/private_heading_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
@media (max-width: 767px) {
  .top-private .heading {
    padding-top: 40%;
    background-image: url(../images/top/private_heading_bg_sp.jpg);
  }
}
.top-private .heading::before {
  display: block;
  content: "";
  width: 62px;
  height: 60px;
  background-image: url(../images/icon/icon_flag02.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  top: -27px;
  left: 56px;
}
@media (max-width: 767px) {
  .top-private .heading::before {
    left: 20px;
  }
}
.top-private .heading .heading-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50px;
}
@media (max-width: 767px) {
  .top-private .heading .heading-text {
    left: 20px;
    padding-top: 10px;
  }
}
.top-private .heading .heading-text .en {
  padding-left: 5px;
}
@media (max-width: 767px) {
  .top-private .heading .heading-text .en img {
    width: 52%;
  }
}
.top-private .heading .heading-text .ja {
  font-size: 43px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 5px;
}
@media (max-width: 767px) {
  .top-private .heading .heading-text .ja {
    font-size: 18px;
  }
}
.top-private > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .top-private > .inner {
    padding: 0 1.5625rem;
    margin-top: -0.9375rem;
  }
}
.top-private > .inner h3 {
  text-align: center;
  font-size: 24px;
  margin-top: 46px;
  font-family: "Noto Sans JP", sans-serif;
}
@media (min-width: 769px) {
  .top-private > .inner h3 {
    letter-spacing: 5px;
  }
}
.top-private > .inner h3 span {
  display: block;
  text-align: center;
}
.top-private > .inner h3 span.ja {
  margin: 6px auto;
}
.top-private > .inner p {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 767px) {
  .top-private > .inner p {
    text-align: left;
    margin-top: 20px;
  }
}
.top-private.js-inview .heading,
.top-private.js-inview .inner {
  opacity: 0;
}
.top-private.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
.top-private.js-inview-visible .inner {
  -webkit-animation: fade-in-up 0.5s 1s forwards;
          animation: fade-in-up 0.5s 1s forwards;
}

/* -----------------------------------------------
  Gallery
-------------------------------------------------- */
[lang=ja] .top-gallery {
  overflow: hidden;
  position: relative;
  margin-top: 100px;
  padding-bottom: 120px;
}
@media (max-width: 767px) {
  [lang=ja] .top-gallery {
    padding-top: 1.5625rem;
    padding-bottom: 0;
  }
}
[lang=ja] .top-gallery::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: #1852a4;
  width: 51vw;
  height: 84%;
}
@media (max-width: 767px) {
  [lang=ja] .top-gallery::before {
    left: unset;
    bottom: unset;
    right: 0;
    top: -20px;
    width: 92vw;
  }
}
[lang=ja] .top-gallery .gallery-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 209.2307692308vw;
  -webkit-animation: scroll1 40s linear infinite;
          animation: scroll1 40s linear infinite;
}
@media (max-width: 767px) {
  [lang=ja] .top-gallery .gallery-wrap {
    width: calc((32vw + 10px + 32vw + 10px + 32vw + 10px + 40vw + 10px + 32vw + 10px) * 2);
    height: 15.625rem;
  }
}
[lang=ja] .top-gallery .gallery-wrap .gallery {
  margin-right: 1.25rem;
}
[lang=ja] .top-gallery .gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18.4615384615vw 18.4615384615vw 18.4615384615vw 23.0769230769vw 18.4615384615vw;
  grid-template-rows: 18.4615384615vw 18.4615384615vw;
  grid-gap: 20px;
  margin-bottom: -1.25rem;
}
@media (max-width: 767px) {
  [lang=ja] .top-gallery .gallery {
    grid-gap: 10px;
    grid-template-columns: 32vw 32vw 32vw 40vw 32vw;
    grid-template-rows: 32vw 32vw;
  }
}
[lang=ja] .top-gallery .gallery > .item {
  overflow: hidden;
}
[lang=ja] .top-gallery .gallery > .item img {
  min-width: 100%;
  height: 100%;
}
[lang=ja] .top-gallery .gallery > .item:nth-child(1) {
  grid-column: 1/span 2;
}
[lang=ja] .top-gallery .gallery > .item:nth-child(3) {
  grid-column: 4/span 1;
  grid-row: 1/span 2;
}
[lang=ja] .top-gallery .gallery > .item:nth-child(6) {
  grid-column: 2/span 2;
  grid-row: 2/span 1;
}

[lang=en] .top-gallery {
  overflow: hidden;
  position: relative;
  margin-top: 100px;
}
@media (max-width: 767px) {
  [lang=en] .top-gallery {
    padding-top: 1.5625rem;
    padding-bottom: 0;
  }
}
[lang=en] .top-gallery::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  background: #1852a4;
  width: 86.9230769231vw;
  height: 27.6923076923vw;
}
[lang=en] .top-gallery .gallery-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 209.2307692308vw;
  -webkit-animation: scroll1 40s linear infinite;
          animation: scroll1 40s linear infinite;
}
@media (max-width: 767px) {
  [lang=en] .top-gallery .gallery-wrap {
    width: calc((32vw + 10px + 32vw + 10px + 32vw + 10px + 40vw + 10px + 32vw + 10px) * 2);
    height: 15.625rem;
  }
}
[lang=en] .top-gallery .gallery-wrap .gallery {
  margin-right: 1.25rem;
}
[lang=en] .top-gallery .gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18.4615384615vw 18.4615384615vw 18.4615384615vw 23.0769230769vw 18.4615384615vw;
  grid-template-rows: 18.4615384615vw 18.4615384615vw;
  grid-gap: 20px;
  margin-bottom: -1.25rem;
}
@media (max-width: 767px) {
  [lang=en] .top-gallery .gallery {
    grid-gap: 10px;
    grid-template-columns: 32vw 32vw 32vw 40vw 32vw;
    grid-template-rows: 32vw 32vw;
  }
}
[lang=en] .top-gallery .gallery > .item {
  overflow: hidden;
}
[lang=en] .top-gallery .gallery > .item img {
  min-width: 100%;
  height: 100%;
}
[lang=en] .top-gallery .gallery > .item:nth-child(1) {
  grid-column: 1/span 2;
}
[lang=en] .top-gallery .gallery > .item:nth-child(3) {
  grid-column: 4/span 1;
  grid-row: 1/span 2;
}
[lang=en] .top-gallery .gallery > .item:nth-child(6) {
  grid-column: 2/span 2;
  grid-row: 2/span 1;
}
[lang=en] .top-hopping,
[lang=en] .top-culture,
[lang=en] .top-course {
  position: relative;
  background: #FFF;
  padding-top: 3.8461538462vw;
  padding-bottom: 2.5rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping,
  [lang=en] .top-culture {
    padding-top: 1.5625rem;
    padding-bottom: 0;
  }
}
[lang=en] .top-hopping::before,
[lang=en] .top-culture::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  background: #1852a4;
  width: 86.9230769231vw;
  height: 27.6923076923vw;
}
[lang=en] .top-hopping .gallery-wrap,
[lang=en] .top-culture .gallery-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 209.2307692308vw;
  -webkit-animation: scroll1 40s linear infinite;
          animation: scroll1 40s linear infinite;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping .gallery-wrap,
  [lang=en] .top-culture .gallery-wrap {
    width: calc((32vw + 10px + 32vw + 10px + 32vw + 10px + 40vw + 10px + 32vw + 10px) * 2);
    height: 15.625rem;
  }
}
[lang=en] .top-hopping .gallery-wrap .gallery,
[lang=en] .top-culture .gallery-wrap .gallery {
  margin-right: 1.25rem;
}
[lang=en] .top-hopping .gallery,
[lang=en] .top-culture .gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18.4615384615vw 18.4615384615vw 18.4615384615vw 23.0769230769vw 18.4615384615vw;
  grid-template-rows: 18.4615384615vw 18.4615384615vw;
  grid-gap: 20px;
  margin-bottom: -1.25rem;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping .gallery,
  [lang=en] .top-culture .gallery {
    grid-gap: 10px;
    grid-template-columns: 32vw 32vw 32vw 40vw 32vw;
    grid-template-rows: 32vw 32vw;
  }
}
[lang=en] .top-hopping .gallery > .item,
[lang=en] .top-culture .gallery > .item {
  overflow: hidden;
}
[lang=en] .top-hopping .gallery > .item img,
[lang=en] .top-culture .gallery > .item img {
  min-width: 100%;
  height: 100%;
}
[lang=en] .top-hopping .gallery > .item:nth-child(1),
[lang=en] .top-culture .gallery > .item:nth-child(1) {
  grid-column: 1/span 2;
}
[lang=en] .top-hopping .gallery > .item:nth-child(3),
[lang=en] .top-culture .gallery > .item:nth-child(3) {
  grid-column: 4/span 1;
  grid-row: 1/span 2;
}
[lang=en] .top-hopping .gallery > .item:nth-child(6),
[lang=en] .top-culture .gallery > .item:nth-child(6) {
  grid-column: 2/span 2;
  grid-row: 2/span 1;
}
[lang=en] .top-hopping > .inner,
[lang=en] .top-culture > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping > .inner,
  [lang=en] .top-culture > .inner {
    padding: 0 1.5625rem;
    margin-top: -0.9375rem;
  }
}
[lang=en] .top-hopping > .inner::after,
[lang=en] .top-culture > .inner::after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}
[lang=en] .top-hopping > .inner .heading,
[lang=en] .top-culture > .inner .heading {
  margin-bottom: 2.5rem;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping > .inner .heading,
  [lang=en] .top-culture > .inner .heading {
    margin-bottom: 1.25rem;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-hopping > .inner .heading img,
  [lang=en] .top-culture > .inner .heading img {
    width: auto;
    height: 4.1875rem;
  }
}
[lang=en] .top-hopping > .inner .highlight-heading,
[lang=en] .top-culture > .inner .highlight-heading {
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping > .inner .highlight-heading,
  [lang=en] .top-culture > .inner .highlight-heading {
    margin-bottom: 1.25rem;
  }
}
[lang=en] .top-hopping > .inner .lead,
[lang=en] .top-culture > .inner .lead {
  line-height: 2;
  letter-spacing: 0.2em;
  margin-bottom: 3.125rem;
}
[lang=en] .top-hopping > .inner.js-inview .heading,
[lang=en] .top-hopping > .inner.js-inview .lead,
[lang=en] .top-hopping > .inner.js-inview .point, [lang=en] .top-hopping > .inner.js-inview::after,
[lang=en] .top-culture > .inner.js-inview .heading,
[lang=en] .top-culture > .inner.js-inview .lead,
[lang=en] .top-culture > .inner.js-inview .point,
[lang=en] .top-culture > .inner.js-inview::after {
  opacity: 0;
}
[lang=en] .top-hopping > .inner.js-inview-visible .heading,
[lang=en] .top-culture > .inner.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
[lang=en] .top-hopping > .inner.js-inview-visible .highlight-heading,
[lang=en] .top-culture > .inner.js-inview-visible .highlight-heading {
  max-width: 20rem;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
[lang=en] .top-hopping > .inner.js-inview-visible .highlight-heading > span::after,
[lang=en] .top-culture > .inner.js-inview-visible .highlight-heading > span::after {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
[lang=en] .top-hopping > .inner.js-inview-visible .lead,
[lang=en] .top-culture > .inner.js-inview-visible .lead {
  -webkit-animation: fade-in-up 0.5s 1s forwards;
          animation: fade-in-up 0.5s 1s forwards;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping > .inner.js-inview-visible .lead,
  [lang=en] .top-culture > .inner.js-inview-visible .lead {
    font-size: 0.875rem;
    line-height: 2 !important;
    letter-spacing: 0.1em;
  }
  [lang=en] .top-hopping > .inner.js-inview-visible .lead br,
  [lang=en] .top-culture > .inner.js-inview-visible .lead br {
    display: none;
  }
}
[lang=en] .top-hopping > .inner.js-inview-visible::after,
[lang=en] .top-culture > .inner.js-inview-visible::after {
  -webkit-animation: fade-in-up 1s 1s forwards;
          animation: fade-in-up 1s 1s forwards;
}
[lang=en] .top-hopping > .inner.js-inview-visible .point,
[lang=en] .top-culture > .inner.js-inview-visible .point {
  -webkit-animation: fade-in-up 1s 1.3s forwards;
          animation: fade-in-up 1s 1.3s forwards;
}

[lang=en] .top-hopping > .inner.js-inview-visible .highlight-heading,
[lang=en] .top-culture > .inner.js-inview-visible .highlight-heading {
  max-width: 29rem;
}

/* -----------------------------------------------
  Group
-------------------------------------------------- */
.top-group {
  margin-top: 70px;
  padding-top: 30px;
}
@media (max-width: 767px) {
  .top-group {
    margin-top: 50px;
  }
}
.top-group .heading {
  position: relative;
  width: 100%;
  padding-top: 30.7692%;
  background-image: url(../images/top/group_heading_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
@media (max-width: 767px) {
  .top-group .heading {
    padding-top: 40%;
    background-image: url(../images/top/group_heading_bg_sp.jpg);
  }
}
.top-group .heading::before {
  display: block;
  content: "";
  width: 62px;
  height: 60px;
  background-image: url(../images/icon/icon_flag02.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  top: -27px;
  left: 56px;
}
@media (max-width: 767px) {
  .top-group .heading::before {
    left: 20px;
  }
}
.top-group .heading .heading-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50px;
}
@media (max-width: 767px) {
  .top-group .heading .heading-text {
    left: 20px;
    padding-top: 10px;
  }
}
.top-group .heading .heading-text .en {
  padding-left: 5px;
  line-height: 5;
}
@media (min-width: 769px) {
  .top-group .heading .heading-text .en {
    line-height: 5;
  }
}
@media (max-width: 767px) {
  .top-group .heading .heading-text .en img {
    width: 52%;
  }
}
.top-group .heading .heading-text .ja {
  font-size: 43px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 5px;
}
@media (max-width: 767px) {
  .top-group .heading .heading-text .ja {
    font-size: 18px;
  }
}
.top-group > .inner {
  zoom: 1;
  width: 1100px;
  max-width: 80%;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .top-group > .inner {
    padding: 0 1.5625rem;
    margin-top: -0.9375rem;
    width: 100%;
  }
}
.top-group > .inner h3 {
  text-align: center;
  font-size: 24px;
  margin-top: 37px;
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 767px) {
  .top-group > .inner h3 {
    font-size: 20px;
    margin-top: 45px;
  }
}
.top-group > .inner h3 span {
  display: block;
  text-align: center;
}
@media (max-width: 767px) {
  .top-group > .inner h3 .en img {
    width: 35%;
  }
}
@media (max-width: 767px) {
  .top-group > .inner h3 .ja {
    font-size: 30px;
    margin-top: 10px;
  }
}
.top-group > .inner .lead {
  text-align: center;
  font-weight: bold;
  margin-top: 50px;
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 767px) {
  .top-group > .inner .lead {
    text-align: left;
    font-weight: normal;
    letter-spacing: 2px;
  }
}
.top-group a.top-group-button {
  position: relative;
  display: block;
  width: 310px;
  padding: 10px;
  margin: 37px auto 0;
  border: 0;
  background: #1852a4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 767px) {
  .top-group a.top-group-button {
    width: 100%;
    padding: 20px 8px;
  }
}
.top-group a.top-group-button::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  top: 50%;
  right: 1.5em;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .top-group a.top-group-button:hover:hover::after {
    -webkit-transform: translate(1em, -50%);
            transform: translate(1em, -50%);
  }
}
.top-group.js-inview .heading,
.top-group.js-inview .inner {
  opacity: 0;
}
.top-group.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
.top-group.js-inview-visible .inner {
  -webkit-animation: fade-in-up 0.5s 1s forwards;
          animation: fade-in-up 0.5s 1s forwards;
}
.top-group .top-group-list {
  text-align: right;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 18px;
}
.top-group .top-group-list a {
  position: relative;
  text-decoration: none;
  color: #000000;
  padding-right: 40px;
  display: inline-block;
  line-height: 20px;
}
.top-group .top-group-list a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .top-group .top-group-list a:hover:hover::after {
    -webkit-transform: translateX(1em);
            transform: translateX(1em);
  }
}

.top-group-slide-wrap {
  position: relative;
  margin-top: 23px;
}
@media (max-width: 767px) {
  .top-group-slide-wrap {
    width: 100vw;
    margin: 30px calc(50% - 50vw) 0;
  }
}

.top-group-slide {
  position: unset;
}
.top-group-slide a {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
.top-group-slide a p {
  margin-top: 10px;
}
.top-group-slide .swiper-button-prev,
.top-group-slide .swiper-button-next {
  color: #fff;
  background: #1852a4;
  border-radius: 100px;
  width: 46px;
  height: 46px;
}
.top-group-slide .swiper-button-prev:after,
.top-group-slide .swiper-button-next:after {
  font-size: 20px;
  font-weight: bold;
}
.top-group-slide .swiper-button-prev {
  left: -80px;
}
@media (max-width: 767px) {
  .top-group-slide .swiper-button-prev {
    left: 0;
  }
}
.top-group-slide .swiper-button-next {
  right: -80px;
}
@media (max-width: 767px) {
  .top-group-slide .swiper-button-next {
    right: 0;
  }
}

/* -----------------------------------------------
  Order
-------------------------------------------------- */
.top-order {
  margin-top: 70px;
  padding-top: 30px;
}
@media (max-width: 767px) {
  .top-order {
    margin-top: 50px;
  }
}
.top-order .heading {
  position: relative;
  width: 100%;
  padding-top: 30.7692%;
  background-image: url(../images/top/order_heading_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
@media (max-width: 767px) {
  .top-order .heading {
    padding-top: 40%;
    background-image: url(../images/top/order_heading_bg_sp.jpg);
  }
}
.top-order .heading::before {
  display: block;
  content: "";
  width: 62px;
  height: 60px;
  background-image: url(../images/icon/icon_flag02.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  top: -27px;
  left: 56px;
}
@media (max-width: 767px) {
  .top-order .heading::before {
    left: 20px;
  }
}
.top-order .heading .heading-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50px;
}
@media (max-width: 767px) {
  .top-order .heading .heading-text {
    left: 20px;
    padding-top: 10px;
  }
}
.top-order .heading .heading-text .en {
  padding-left: 5px;
}
@media (max-width: 767px) {
  .top-order .heading .heading-text .en img {
    width: 52%;
  }
}
.top-order .heading .heading-text .ja {
  font-size: 43px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 5px;
}
@media (max-width: 767px) {
  .top-order .heading .heading-text .ja {
    font-size: 18px;
  }
}
.top-order > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .top-order > .inner {
    padding: 0 1.5625rem;
    margin-top: -0.9375rem;
  }
}
.top-order > .inner h3 {
  text-align: center;
  font-size: 24px;
  margin-top: 60px;
  font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 767px) {
  .top-order > .inner h3 {
    font-size: 20px;
  }
}
.top-order > .inner h3 span {
  display: block;
  text-align: center;
}
.top-order > .inner .lead {
  text-align: center;
  font-weight: bold;
  margin-top: 50px;
}
.top-order.js-inview .heading,
.top-order.js-inview .inner {
  opacity: 0;
}
.top-order.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
.top-order.js-inview-visible .inner {
  -webkit-animation: fade-in-up 0.5s 1s forwards;
          animation: fade-in-up 0.5s 1s forwards;
}

.top-order-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  .top-order-wrap {
    display: block;
  }
}

.top-order-img {
  width: 48vw;
  margin: 0 calc(50% - 50vw);
  position: relative;
  margin-top: 30px;
  text-align: right;
  padding-top: 80px;
}
@media (max-width: 767px) {
  .top-order-img {
    width: 100vw;
    text-align: center;
    margin-top: 43px;
    padding-top: 55px;
  }
  .top-order-img img {
    width: 90%;
  }
}
.top-order-img::before {
  content: "";
  position: absolute;
  bottom: 80px;
  left: 0;
  z-index: 0;
  background: #1852a4;
  width: 32vw;
  height: calc(100% - 80px);
  z-index: -1;
}
@media (max-width: 767px) {
  .top-order-img::before {
    width: 63vw;
  }
}

.top-order-text {
  width: 45%;
  margin-top: 106px;
  padding-right: 20px;
}
@media (max-width: 767px) {
  .top-order-text {
    width: 100%;
    margin-top: 30px;
  }
}
.top-order-text p {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 50px;
  line-height: 1.6;
  letter-spacing: 2px;
}
@media (max-width: 767px) {
  .top-order-text p {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 2;
  }
}

.top-order-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 767px) {
  .top-order-link {
    display: block;
    text-align: center;
  }
}
.top-order-link a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid #1852a4;
  position: relative;
  font-size: 18px;
  line-height: 22px;
  padding-bottom: 5px;
}
@media (max-width: 767px) {
  .top-order-link a {
    display: inline-block;
    text-align: left;
    margin-right: 26px;
  }
}
.top-order-link a:first-of-type {
  margin-right: 32px;
}
@media (max-width: 767px) {
  .top-order-link a:first-of-type {
    display: inline-block;
    text-align: left;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.top-order-link a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-left: 10px;
}
@media (hover: hover) and (pointer: fine) {
  .top-order-link a:hover:hover::after {
    -webkit-transform: translateX(0.5em);
            transform: translateX(0.5em);
  }
}

.top-order-plan {
  margin-top: 70px;
  letter-spacing: 2px;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .top-order-plan {
    margin-top: 60px;
  }
}
.top-order-plan p {
  font-weight: bold;
  text-align: center;
}
@media (max-width: 767px) {
  .top-order-plan p {
    font-weight: normal;
    text-align: left;
  }
}

.top-order-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 28px;
}
@media (max-width: 767px) {
  .top-order-button {
    display: block;
  }
}
.top-order-button a {
  color: #fff;
  border-radius: 100px;
  width: 100%;
  max-width: 500px;
  margin: 0 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  position: relative;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 767px) {
  .top-order-button a {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 20px 0 0;
  }
}
.top-order-button a::before {
  display: block;
  content: "";
  border-right: 2px solid #fff;
  padding-right: 20px;
  margin-right: 20px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: left center;
  width: 25px;
  height: 25px;
}
.top-order-button a.tel {
  background-color: #1852a4;
  padding-right: 20px;
}
@media (max-width: 767px) {
  .top-order-button a.tel {
    padding-right: 0;
  }
}
.top-order-button a.tel::before {
  background-image: url(../images/icon/icon_tel.png);
}
@media (max-width: 767px) {
  .top-order-button a.tel img {
    width: 70%;
  }
}
.top-order-button a.mail {
  background-color: #d31e20;
  font-size: 22px;
  padding-right: 80px;
}
@media (max-width: 767px) {
  .top-order-button a.mail {
    font-size: 16px;
    padding-right: 0;
  }
}
.top-order-button a.mail::before {
  background-image: url(../images/icon/icon_contact02.png);
}
.top-order-button a.mail::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  top: 50%;
  right: 2em;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .top-order-button a.mail::after {
    width: 17px;
    height: 17px;
    right: 1em;
  }
}
@media (hover: hover) and (pointer: fine) {
  .top-order-button a.mail:hover:hover::after {
    -webkit-transform: translate(1em, -50%);
            transform: translate(1em, -50%);
  }
}
@media (min-width: 769px) {
  .top-order-button a span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}
@media (max-width: 767px) {
  .top-order-button a span {
    width: 80%;
  }
}

/* -----------------------------------------------
  Islands
-------------------------------------------------- */
.top-islands {
  position: relative;
  background: #FFF;
  padding-top: 3.8461538462vw;
  padding-bottom: 2.5rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .top-islands {
    padding-top: 4.8461538462vw;
    margin-top: 50px;
  }
}
.top-islands > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .top-islands > .inner {
    padding: 0 1.5625rem;
    margin-top: -0.9375rem;
  }
}
.top-islands > .inner .heading {
  text-align: center;
}
.top-islands > .inner .highlight-heading {
  text-align: center;
  margin: 10px auto;
}
.top-islands > .inner .highlight-heading > span {
  margin: auto;
}
.top-islands > .inner .lead {
  line-height: 2;
  letter-spacing: 0.2em;
  margin-bottom: 3.125rem;
}
.top-islands > .inner.js-inview .heading,
.top-islands > .inner.js-inview .lead,
.top-islands > .inner.js-inview .highlight-heading .point, .top-islands > .inner.js-inview::after {
  opacity: 0;
}
.top-islands > .inner.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
.top-islands > .inner.js-inview-visible .highlight-heading {
  max-width: 20rem;
  -webkit-transition-duration: unset;
          transition-duration: unset;
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
.top-islands > .inner.js-inview-visible .highlight-heading > span {
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}
.top-islands > .inner.js-inview-visible .highlight-heading > span::after {
  -webkit-transition-duration: unset;
          transition-duration: unset;
}
.top-islands > .inner.js-inview-visible .lead {
  -webkit-animation: fade-in-up 0.5s 1s forwards;
          animation: fade-in-up 0.5s 1s forwards;
}
@media (max-width: 767px) {
  .top-islands > .inner.js-inview-visible .lead {
    font-size: 0.875rem;
    line-height: 2 !important;
    letter-spacing: 0.1em;
  }
  .top-islands > .inner.js-inview-visible .lead br {
    display: none;
  }
}
.top-islands > .inner.js-inview-visible::after {
  -webkit-animation: fade-in-up 1s 1s forwards;
          animation: fade-in-up 1s 1s forwards;
}
.top-islands > .inner.js-inview-visible .point {
  -webkit-animation: fade-in-up 1s 1.3s forwards;
          animation: fade-in-up 1s 1.3s forwards;
}

/* -----------------------------------------------
  Hopping
-------------------------------------------------- */
[lang=ja] .top-hopping {
  margin-top: 112px;
}
@media (max-width: 767px) {
  [lang=ja] .top-hopping {
    margin-top: 100px;
  }
}
[lang=ja] .top-hopping > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  [lang=ja] .top-hopping > .inner {
    padding: 0 1.5625rem;
    margin-top: -0.9375rem;
  }
}
[lang=ja] .top-hopping > .inner .heading {
  text-align: center;
}
[lang=ja] .top-hopping > .inner .highlight-heading {
  text-align: center;
  margin: 10px auto;
}
[lang=ja] .top-hopping > .inner .highlight-heading > span {
  margin: auto;
}
[lang=ja] .top-hopping > .inner .lead {
  line-height: 2.2;
  letter-spacing: 0.2em;
  margin-bottom: 36px;
  text-align: center;
  margin-top: 37px;
  font-weight: bold;
}
@media (max-width: 767px) {
  [lang=ja] .top-hopping > .inner .lead {
    font-weight: normal;
    font-size: 16px;
    text-align: left;
  }
}
[lang=ja] .top-hopping > .inner.js-inview .heading,
[lang=ja] .top-hopping > .inner.js-inview .lead,
[lang=ja] .top-hopping > .inner.js-inview .highlight-heading,
[lang=ja] .top-hopping > .inner.js-inview .point, [lang=ja] .top-hopping > .inner.js-inview::after {
  opacity: 0;
}
[lang=ja] .top-hopping > .inner.js-inview-visible .heading {
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
[lang=ja] .top-hopping > .inner.js-inview-visible .highlight-heading {
  text-align: center;
  max-width: 20rem;
  -webkit-transition-duration: unset;
          transition-duration: unset;
  -webkit-animation: fade-in-up 0.5s 0s forwards;
          animation: fade-in-up 0.5s 0s forwards;
}
[lang=ja] .top-hopping > .inner.js-inview-visible .highlight-heading > span {
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}
[lang=ja] .top-hopping > .inner.js-inview-visible .highlight-heading > span::after {
  -webkit-transition-delay: unset;
          transition-delay: unset;
  -webkit-transition-duration: unset;
          transition-duration: unset;
}
[lang=ja] .top-hopping > .inner.js-inview-visible .lead {
  -webkit-animation: fade-in-up 0.5s 1s forwards;
          animation: fade-in-up 0.5s 1s forwards;
}
@media (max-width: 767px) {
  [lang=ja] .top-hopping > .inner.js-inview-visible .lead {
    font-size: 0.875rem;
    line-height: 2 !important;
    letter-spacing: 0.1em;
  }
  [lang=ja] .top-hopping > .inner.js-inview-visible .lead br {
    display: none;
  }
}
[lang=ja] .top-hopping > .inner.js-inview-visible::after {
  -webkit-animation: fade-in-up 1s 1s forwards;
          animation: fade-in-up 1s 1s forwards;
}
[lang=ja] .top-hopping > .inner.js-inview-visible .point {
  -webkit-animation: fade-in-up 1s 1.3s forwards;
          animation: fade-in-up 1s 1.3s forwards;
}

[lang=en] .top-hopping .lead-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping .lead-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
[lang=en] .top-hopping .lead-wrap .lead-heading {
  width: 11.625rem;
  margin-right: 3.75rem;
}
[lang=en] .top-hopping .lead-wrap .lead-heading .lead {
  margin-bottom: 2rem;
}
[lang=en] .top-hopping .point {
  position: absolute;
  top: -2.3125rem;
  right: -2.9375rem;
}
@media (max-width: 767px) {
  [lang=en] .top-hopping .point {
    top: -1.25rem;
    right: -0.625rem;
    width: 10.78125rem;
    height: 10.78125rem;
  }
}

.top-map-tablist {
  zoom: 1;
  max-width: 1160px;
  padding: 0 1.25rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: 3px solid #1852a4;
}
@media (max-width: 767px) {
  .top-map-tablist {
    padding: 0 0.78125rem;
    border-bottom: 0;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.top-map-tablist > .tab {
  width: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  bottom: -3px;
  margin-right: 20px;
}
@media (min-width: 769px) {
  .top-map-tablist > .tab {
    min-width: 260px;
  }
}
@media (max-width: 767px) {
  .top-map-tablist > .tab {
    width: 48%;
    margin-right: 0;
    margin-top: 15px;
  }
}
@media (min-width: 769px) {
  .top-map-tablist > .tab:first-of-type {
    min-width: 460px;
  }
}
@media (max-width: 767px) {
  .top-map-tablist > .tab:first-of-type {
    width: 100%;
  }
}
.top-map-tablist > .tab:last-of-type {
  margin-right: 0;
}
.top-map-tablist > .tab button {
  width: 100%;
  height: 100%;
  padding: 0.75em 1em;
  border: 3px solid #1852a4;
  border-bottom: 0;
  font-weight: bold;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1852a4;
  color: #FFF;
}
@media (max-width: 767px) {
  .top-map-tablist > .tab button {
    line-height: 1.5;
    border: 1px solid #1852a4;
    padding: 20px 10px;
    font-size: 15px;
  }
}
.top-map-tablist > .tab button::before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 100px;
  margin-right: 10px;
  background-color: #fff;
}
.top-map-tablist > .tab button:hover, .top-map-tablist > .tab button[aria-selected=true] {
  background: #FFF;
  color: #1852a4;
}
.top-map-tablist > .tab button:hover::before, .top-map-tablist > .tab button[aria-selected=true]::before {
  background-color: #f4de26;
}
.top-map-tablist > .tab button span {
  display: block;
}
@media (max-width: 767px) {
  .top-map-tablist > .inner {
    font-size: 0.8125rem;
    padding: 1.875rem 1.5625rem !important;
  }
}
@media (max-width: 767px) {
  .top-map-tablist > .inner ._double {
    margin-bottom: 1.25rem !important;
  }
}

.top-map-list {
  width: 39%;
  margin-top: 36px;
}
@media (max-width: 767px) {
  .top-map-list {
    width: 100%;
  }
}
.top-map-list h3 {
  font-size: 24px;
  color: #1852a4;
  font-weight: bold;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 4px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .top-map-list h3 {
    font-size: 20px;
  }
}
.top-map-list h3::after {
  display: block;
  content: "";
  width: 174px;
  height: 15px;
  background-image: url(../images/top/hopping_heading_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-left: 10px;
}

.top-map-tabpanel {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}
.top-map-tabpanel[aria-hidden=true] {
  display: none;
}

@media (min-width: 769px) {
  .top-map-tabpanel-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.top-map-tabpanel-inner .top-map-img {
  width: 62vw;
  margin: 0 calc(50% - 50vw);
}
@media (max-width: 767px) {
  .top-map-tabpanel-inner .top-map-img {
    width: 100vw;
  }
}
.top-map-tabpanel-inner .top-map-img img {
  width: 100%;
}
.top-map-tabpanel-inner ol li {
  list-style-type: none;
  counter-increment: cnt;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
}
.top-map-tabpanel-inner ol li:before {
  content: counter(cnt);
  counter-increment: count 1;
  width: 23px;
  height: 23px;
  letter-spacing: -1px;
  line-height: 1;
  display: grid;
  place-items: center;
  background-color: #1852a4;
  color: #fff;
  border-radius: 100px;
  font-family: "MuseoModerno", cursive;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
}
.top-map-tabpanel-inner ol li a {
  color: #000000;
  font-weight: bold;
}
@media (max-width: 767px) {
  .top-map-tabpanel-inner ol li a {
    width: 90%;
  }
}
.top-map-tabpanel-inner ol li a::after {
  width: 8px;
  height: 8px;
  background-size: 8px 8px;
}

/* -----------------------------------------------
  Course
-------------------------------------------------- */
@media (max-width: 767px) {
  .top-course {
    padding-top: 2.5rem;
  }
}
.top-course .lead-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  .top-course .lead-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.top-course .lead-wrap .lead-heading {
  margin-right: 3.75rem;
}
.top-course .lead-wrap .lead {
  margin-bottom: 2rem;
}
.top-course .point {
  position: absolute;
  top: -2.3125rem;
  right: -2.9375rem;
}
@media (max-width: 767px) {
  .top-course .point {
    top: -1.25rem;
    right: -0.625rem;
    width: 10.78125rem;
    height: 10.78125rem;
  }
}
.top-course h4 {
  text-align: center;
  font-size: 1.5rem;
  color: #ff5700;
}
@media (max-width: 767px) {
  .top-course h4 {
    font-size: 1.25rem;
  }
}
.top-course .course-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -10px;
}
@media (max-width: 767px) {
  .top-course .course-list {
    margin-bottom: 30px;
  }
}
.top-course .course-list::after, .top-course .course-list::before {
  display: block;
  content: "";
  width: 353px;
  margin: 10px;
}
.top-course .course-list::before {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.top-course .course-list li {
  width: 353px;
  margin-bottom: 20px;
  margin: 10px;
}
@media (max-width: 767px) {
  .top-course .course-list li {
    width: calc(50% - 20px);
  }
}
.top-course .course-list.wide::after, .top-course .course-list.wide::before {
  display: none;
}
.top-course .course-list.wide li {
  width: calc(50% - 20px);
}
@media (max-width: 767px) {
  .top-course .course-list.wide li {
    width: calc(100% - 20px);
    margin-bottom: 10px;
  }
}
.top-course .course-list.wide li.nighttour-img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media (max-width: 767px) {
  .top-course .course-list.wide li.nighttour-img {
    display: block;
    text-align: center;
  }
}
.top-course .course-list.wide li.nighttour-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  font-size: 1.2rem;
}
@media (max-width: 767px) {
  .top-course .course-list.wide li.nighttour-text {
    font-size: 1rem;
  }
}
.top-course .course-list.wide li.nighttour-text span {
  display: inline-block;
  color: #1852a4;
  line-height: 1.4;
}
@media (min-width: 769px) {
  .top-course .course-list.wide li a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .top-course .course-list.wide li a:hover {
    opacity: 0.7;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}

/* -----------------------------------------------
  Life & Culture
-------------------------------------------------- */
[lang=en] .top-culture > .inner::after {
  display: inline-block;
  content: "";
  width: 56.1875rem;
  height: 38.9375rem;
  background: url(../../en@sics/islands/images/map.png) no-repeat 0 0;
  background-size: 56.1875rem 38.9375rem;
  position: absolute;
  top: -1.3076923077vw;
  right: -6.25rem;
  z-index: 0;
}
@media (max-width: 767px) {
  [lang=en] .top-culture > .inner::after {
    display: none;
    background-image: url(../../en@sics/islands/images/map_sp.png);
  }
}
@media (max-width: 767px) {
  [lang=en] .top-culture > .inner .heading img {
    width: 90%;
  }
}
[lang=en] .top-culture > .inner .lead {
  line-height: 2.5;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  [lang=en] .top-culture > .inner .lead {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  [lang=en] .top-culture > .inner .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 96vw;
    background: url(../islands/images/map_sp.png) no-repeat 0 0;
    background-size: 100vw 96vw;
    height: 69vw;
    background-position: 50% 0;
    margin: 0 -1.5625rem;
    vertical-align: bottom;
  }
}
[lang=en] .top-culture > .inner .point {
  position: absolute;
  top: 15.8125rem;
  right: -2.9375rem;
  z-index: 2;
}
@media (max-width: 767px) {
  [lang=en] .top-culture > .inner .point {
    position: absolute;
    top: 26.5625rem;
    right: -0.9375rem;
    z-index: 2;
    width: 10.78125rem;
    height: 10.78125rem;
  }
}
[lang=en] .island-list {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  [lang=en] .island-list {
    margin-top: 30px;
  }
}

/* -----------------------------------------------
  Order
-------------------------------------------------- */
[lang=en] .order-section, [lang=en] .package-section {
  position: relative;
  background: #FFF;
  padding-bottom: 6.25rem;
  overflow: hidden;
}
[lang=en] .order-section > .inner, [lang=en] .package-section > .inner {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[lang=en] .order-section > .inner:after, [lang=en] .package-section > .inner:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}
@media (max-width: 767px) {
  [lang=en] .order-section > .inner, [lang=en] .package-section > .inner {
    padding: 0 1.5625rem;
  }
}
[lang=en] .order-section > .inner .heading, [lang=en] .package-section > .inner .heading {
  margin-right: 2.5rem;
}
[lang=en] .order-section > .inner .heading .course-button, [lang=en] .package-section > .inner .heading .course-button {
  width: 25rem;
  padding: 2em 3.125rem;
}
[lang=en] .order-section > .inner .heading .course-button, [lang=en] .package-section > .inner .heading .course-button {
  padding: 2em 2.5rem;
}
[lang=en] .order-section > .inner .heading .course-button .en, [lang=en] .package-section > .inner .heading .course-button .en {
  font-size: 1.5rem;
  margin-right: 0;
}
[lang=en] .order-section > .inner .lead, [lang=en] .package-section > .inner .lead {
  line-height: 2.25;
  letter-spacing: 0.1em;
}
[lang=en] .order-section > .inner .lead, [lang=en] .package-section > .inner .lead {
  letter-spacing: 0.05em;
}
[lang=en] .order-section .gallery-wrap, [lang=en] .package-section .gallery-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 276.9230769231vw;
  -webkit-animation: scroll2 40s linear infinite;
          animation: scroll2 40s linear infinite;
}
[lang=en] .order-section .gallery-wrap .gallery, [lang=en] .package-section .gallery-wrap .gallery {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 138.4615384615vw;
}
[lang=en] .order-section .gallery-wrap .gallery > .item img, [lang=en] .package-section .gallery-wrap .gallery > .item img {
  width: 46.1538461538vw;
  height: 30.7692307692vw;
}
@media (max-width: 767px) {
  [lang=en] .order-section, [lang=en] .package-section {
    padding-bottom: 8.125rem !important;
  }
  [lang=en] .order-section > .inner .heading .course-button, [lang=en] .package-section > .inner .heading .course-button {
    width: 12.5rem;
    padding: 1em 1.5em;
  }
  [lang=en] .order-section > .inner .heading .course-button, [lang=en] .package-section > .inner .heading .course-button {
    width: 18.75rem;
    padding: 1em 1.5em;
  }
  [lang=en] .order-section > .inner .heading .course-button .en, [lang=en] .package-section > .inner .heading .course-button .en {
    font-size: 1.25rem;
  }
  [lang=en] .order-section > .inner .lead, [lang=en] .package-section > .inner .lead {
    position: absolute;
    top: 13.125rem;
    left: 1.5625rem;
    width: calc(100% - 3.125rem);
    font-size: 0.8125rem;
    line-height: 1.7;
  }
}
[lang=en] .package-section > .inner {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
[lang=en] .package-section > .inner .heading {
  margin-right: 0;
  margin-left: 2.5rem;
}
@media (min-width: 769px) {
  [lang=en] .package-section {
    padding-bottom: 0;
  }
  [lang=en] .package-section > .inner .lead {
    text-align: right;
  }
}

#top .contact-section {
  margin-top: 5rem;
}

@media (max-width: 767px) {
  #top .contact-section {
    margin-top: 2.5rem;
  }
}
/* -----------------------------------------------
  Movie
-------------------------------------------------- */
.top-movie {
  background: #FFF;
  padding: 4rem 0;
}
@media (max-width: 767px) {
  .top-movie {
    padding: 0;
  }
}
.top-movie > .inner {
  zoom: 1;
  max-width: 62.5rem;
  padding: 0 3.125rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .top-movie > .inner {
    padding: 0 1.5625rem;
    padding: 2.34375rem 1.5625rem;
  }
}
.top-movie > .inner:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}
.top-movie > .inner::before {
  display: inline-block;
  content: "";
  width: 8.375rem;
  height: 8.375rem;
  background: url(../images/icon/icon_check.svg) no-repeat 0 0;
  background-size: 8.375rem 8.375rem;
  position: absolute;
  top: -1.875rem;
  left: 35%;
  z-index: 2;
}
@media (max-width: 767px) {
  .top-movie > .inner::before {
    display: inline-block;
    content: "";
    width: 5.025rem;
    height: 5.025rem;
    background: url(../images/icon/icon_check.svg) no-repeat 0 0;
    background-size: 5.025rem 5.025rem;
    position: absolute;
    top: 0.625rem;
    left: 25%;
    z-index: 2;
  }
}
.top-movie a {
  display: block;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.top-movie a::before {
  content: "";
  display: block;
  padding-bottom: 30%;
  background: #1852a4;
}
@media (max-width: 767px) {
  .top-movie a::before {
    padding-bottom: 56%;
  }
}
.top-movie a::after {
  display: inline-block;
  content: "";
  width: 4rem;
  height: 4rem;
  background: url(../images/icon/icon_play.svg) no-repeat 0 0;
  background-size: 4rem 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
}
@media (max-width: 767px) {
  .top-movie a::after {
    display: inline-block;
    content: "";
    width: 3rem;
    height: 3rem;
    background: url(../images/icon/icon_play.svg) no-repeat 0 0;
    background-size: 3rem 3rem;
  }
}
.top-movie a:hover img {
  opacity: 0.7;
  -webkit-transform: translate(-50%, -50%) scale(1.1, 1.1);
          transform: translate(-50%, -50%) scale(1.1, 1.1);
}
.top-movie a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  width: auto;
  max-width: none;
  height: 100%;
}
@media (max-width: 767px) {
  .top-movie a img {
    max-width: none;
    height: 100%;
  }
}
.top-movie a .caption {
  position: absolute;
  top: calc(50% + 3rem);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 1.5rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  margin-top: 0;
}
@media (max-width: 767px) {
  .top-movie a .caption {
    top: calc(50% + 2.25rem);
    left: 0;
    width: 100%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    font-size: 1.125rem;
  }
}
.top-movie.js-inview .inner {
  opacity: 0;
}
.top-movie.js-inview-visible .inner {
  -webkit-animation: fade-in-up 1s 0.5s forwards;
          animation: fade-in-up 1s 0.5s forwards;
}

/* -----------------------------------------------
  pagetop
-------------------------------------------------- */
.pagetop {
  position: fixed;
  width: 60px;
  bottom: 90px;
  right: 10px;
  color: #1852a4;
  font-family: "MuseoModerno", cursive;
  text-align: center;
  display: block;
  text-decoration: none;
  line-height: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  z-index: -1;
}
.pagetop::before {
  display: block;
  margin: auto;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_top.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
}
@media (min-width: 769px) {
  .pagetop:hover {
    opacity: 0.7;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}

@media (min-width: 769px) {
  br.sp {
    display: none;
  }
}
button.modal-open {
  margin: 10px auto 0;
  border: 1px solid #fff;
  color: #fff;
  display: grid;
  place-items: center;
  width: 60%;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  padding: 20px 0;
  background: transparent;
}

button.modal-open::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(4, 15, 31, 0.3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: -1;
}

button.modal-open::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 12px 12px;
  position: absolute;
  top: 50%;
  right: 1em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* モーダルと背景の指定 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* モーダルの擬似要素の指定 */
.modal:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 10000;
}

/* モーダル内側の指定 */
.modal-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  width: 90%;
}

/* モーダルを閉じるボタンの指定 */
.modal-close {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
}

/* モーダルのコンテンツ部分の指定 */
.modal-content {
  background: #fff;
  text-align: left;
  line-height: 1.8;
  padding: 20px;
}

/* モーダルのコンテンツ部分のテキストの指定 */
.modal-content p {
  margin: 1em 0;
}

.modal-content a {
  margin: 10px auto 0;
  border: 1px solid #fff;
  color: #fff;
  display: grid;
  place-items: center;
  width: 60%;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  padding: 20px 0;
  background: rgba(44, 130, 252, 0.72);
}
@media (min-width: 769px) {
  .modal-content a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(4, 15, 31, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .modal-content a:hover:hover::before {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .modal-content a {
    font-size: 16px;
    padding: 12px 0;
  }
}
.modal-content a::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/arrow_a_white.svg) no-repeat 0 0;
  background-size: 12px 12px;
  position: absolute;
  top: 50%;
  right: 1em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/**************************************************
  Entry
***************************************************/
.entry-body {
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .entry-body {
    font-size: 0.875rem;
  }
}
.entry-header {
  border-top: 5px solid #1852a4;
  padding: 2.5rem 0 0;
}

@media (max-width: 767px) {
  .entry-header {
    padding: 1.5625rem 0 0;
  }
}
.entry-header > .meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.875rem;
  margin-bottom: 0.5em;
}

.entry-header > .meta .date {
  color: #1852a4;
  font-size: 1rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-right: 1em;
}

.entry-header > .meta .category {
  display: inline-block;
  width: 6rem;
  color: #FFF;
  font-size: 0.75rem;
  text-align: center;
  background: #1852a4;
}

.entry-title {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  margin-bottom: 1.5em;
}

@media (max-width: 767px) {
  .entry-title {
    margin-bottom: 1em;
  }
}
.entry-pager {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 2.5rem auto 0;
}

.entry-pager li {
  margin: 0 0.5em;
  overflow: hidden;
}

.entry-pager li a:hover span {
  background: #e6e9ec;
}

.entry-pager li span {
  text-decoration: none;
  display: inline-block;
  padding: 0.3em 1.1em;
  color: #000000;
  font-size: 1em;
  font-family: "MuseoModerno", cursive;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 50%;
}

.entry-pager li.cur span {
  border: 1px solid #e6e9ec;
}

.entry-pager li.prev, .entry-pager li.next {
  border: 0;
  margin: 0 1em;
}

.entry-pager li.prev a, .entry-pager li.next a {
  text-indent: -9999px;
  background: none;
  padding: 0;
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
}

.entry-pager li.prev a {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.entry-nav {
  position: relative;
  border-top: 5px solid #1852a4;
  border-bottom: 5px solid #1852a4;
  margin: 3.125rem 0;
  padding: 2.1875em 3.125rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.88em;
  overflow: hidden;
  min-height: 1.7em;
}

.entry-nav a {
  display: inline-block;
  color: #000000;
  font-size: 1.125rem;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.entry-nav a:hover {
  opacity: 0.7;
}

.entry-nav .next {
  width: 33%;
  margin-right: auto;
}

.entry-nav .next a::before {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  margin-right: 1.4em;
  vertical-align: middle;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.entry-nav .next a:hover::before {
  -webkit-transform: scale(-1, 1) translateX(0.5em);
          transform: scale(-1, 1) translateX(0.5em);
}

.entry-nav .index {
  width: 33%;
  margin: 0 auto;
}

.entry-nav .index a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.875rem;
  line-height: 1;
}

.entry-nav .index a::before {
  display: inline-block;
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  background: url(../images/icon/icon_index.svg) no-repeat 0 0;
  background-size: 1.875rem 1.875rem;
  margin-bottom: 0.5em;
}

@media all and (-ms-high-contrast: none) {
  .entry-nav .index a::before {
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
  }
}
.entry-nav .previous {
  width: 33%;
  text-align: right;
  margin-left: auto;
}

.entry-nav .previous a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  margin-left: 1.4em;
  vertical-align: middle;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.entry-nav .previous a:hover::after {
  -webkit-transform: translateX(0.5em);
          transform: translateX(0.5em);
}

@media (max-width: 767px) {
  .entry-nav {
    padding: 1.5625em 0;
  }
}
.entry-social {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 2em 0 0;
}

.entry-social > li {
  margin: 0 0.63em;
}

.entry-social > li a {
  display: inline-block;
  background: #DDD;
  width: 3em;
  height: 3em;
  border-radius: 50% 50%;
  text-indent: -9999px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.entry-social > li a.twitter {
  background: transparent url(../images/icon/icon_twitter.svg) no-repeat 50% 50%;
  background-size: 1.5em 1.5em;
  border: 1px solid #55acee;
}

.entry-social > li a.twitter:hover {
  background-color: #55acee;
  background-image: url(../images/icon/icon_twitter_white.svg);
}

.entry-social > li a.facebook {
  background: transparent url(../images/icon/icon_facebook.svg) no-repeat 50% 50%;
  background-size: 1.5em 1.5em;
  border: 1px solid #3b5998;
}

.entry-social > li a.facebook:hover {
  background-color: #3b5998;
  background-image: url(../images/icon/icon_facebook_white.svg);
}

.entry-social > li a.line {
  background: transparent url(../images/icon/icon_line.svg) no-repeat 50% 50%;
  background-size: 1.5em 1.5em;
  border: 1px solid #00B900;
}

.entry-social > li a.line:hover {
  background-color: #00B900;
  background-image: url(../images/icon/icon_line_white.svg);
}

/**************************************************
  About
***************************************************/
/* -----------------------------------------------
  Introduction
-------------------------------------------------- */
.about-introduction {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 850px;
  margin: 3.125rem auto 5rem;
}

.about-introduction > .heading {
  width: 26%;
}

.about-introduction > .heading .ja {
  display: block;
  margin-top: 1.875rem;
}

.about-introduction > .logo {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 35%;
  margin: 0;
}

.about-introduction > .description {
  width: 27%;
  line-height: 2.25;
  letter-spacing: 0.02em;
  text-align: justify;
}

@media (max-width: 767px) {
  .about-introduction {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0 1.5625rem;
    margin: 0 0 5rem;
  }
  .about-introduction > .heading {
    width: 50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .about-introduction > .heading img {
    width: auto;
    height: 6.8125rem;
  }
  .about-introduction > .heading .ja {
    font-size: 0.75rem;
    margin-top: 0.9375rem;
  }
  .about-introduction > .logo {
    width: 50%;
  }
  .about-introduction > .description {
    margin-top: 1.25rem;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.7;
  }
}
/* -----------------------------------------------
  Tour
-------------------------------------------------- */
.about-tour {
  position: relative;
}

.about-tour::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #1852a4;
  width: 100%;
  height: 14.6875rem;
}

[lang=en] .about-tour::before {
  height: 18.4375rem;
}

.about-tour > .inner {
  margin-top: 1.25rem !important;
}

@media (max-width: 767px) {
  .about-tour::before {
    height: 90vw;
  }
}
.tour-heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 1100px;
  margin: 0 auto;
  padding: 3.125rem 0 1.25rem;
}

.tour-heading .photo {
  position: relative;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 37.5rem;
  margin-right: 3.75rem;
}

.tour-heading .body {
  position: relative;
  z-index: 1;
}

.tour-heading .body .heading {
  margin-bottom: 1.875rem;
}

[lang=ja] .tour-heading .body .heading img {
  width: auto;
  height: 7.875rem;
}

[lang=en] .tour-heading .body .heading img {
  width: auto;
  height: 11.625rem;
}

.tour-heading .body .lead {
  line-height: 2.25;
}

@media (max-width: 767px) {
  .tour-heading {
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 1.5625rem;
  }
  .tour-heading .photo {
    width: calc(100vw - 1.5625rem);
    margin: -3.125rem -1.5625rem 0 0;
  }
  .tour-heading .body .heading {
    margin: 1.5rem 0 1.125rem;
  }
  .tour-heading .body .heading img {
    height: 5.875rem;
  }
  .tour-heading .body .lead {
    font-size: 0.875rem;
    line-height: 1.7;
  }
}
.tour-point {
  position: relative;
  max-width: 1100px;
  margin: 5rem auto 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.tour-point::before {
  display: inline-block;
  content: "";
  width: 6.25rem;
  height: 5.75rem;
  background: url(../about/images/tour_point1.svg) no-repeat 0 0;
  background-size: 6.25rem 5.75rem;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  margin: 0 -2.5rem auto 2.5rem;
  z-index: 1;
}

.tour-point .photo {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 34.375rem;
  margin: 0 4.375rem 0 -6.25rem;
}

.tour-point .body .lead {
  line-height: 2.25;
}

@media (min-width: 769px) {
  .tour-point:nth-of-type(odd) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .tour-point:nth-of-type(odd) .photo {
    margin: 0 -6.25rem 0 4.375rem;
  }
  .tour-point:nth-of-type(odd)::before {
    margin: 0 2.5rem auto -2.5rem;
  }
}
.tour-point:nth-of-type(1)::before {
  background-image: url(../about/images/tour_point1.svg);
}

.tour-point:nth-of-type(1)::after {
  display: inline-block;
  content: "";
  width: 42.8125rem;
  height: 25.6875rem;
  background: url(../about/images/tour_map.png) no-repeat 0 0;
  background-size: 42.8125rem 25.6875rem;
  position: absolute;
  top: -6.25rem;
  right: -6.25rem;
  z-index: 0;
}

.tour-point:nth-of-type(1) .body {
  width: 31.875rem;
  margin-right: auto;
}

.tour-point:nth-of-type(2)::before {
  background-image: url(../about/images/tour_point2.svg);
}

.tour-point:nth-of-type(3)::before {
  background-image: url(../about/images/tour_point3.svg);
}

@media (max-width: 767px) {
  .tour-point {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 1.5625rem;
    margin: 1.875rem auto 0;
  }
  .tour-point .photo {
    width: auto;
    margin: 0;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
  }
  .tour-point .body {
    width: 100%;
    font-size: 0.875rem;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  .tour-point .body .highlight-heading {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .tour-point .body .lead {
    line-height: 1.7;
  }
  .tour-point::before {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    width: 2.90625rem;
    height: 3.1875rem;
    background-size: 2.90625rem 3.1875rem;
    margin: -1.375rem 0 0.4375rem;
  }
  .tour-point:nth-of-type(1) .body {
    width: auto;
  }
  .tour-point:nth-of-type(1) .body .highlight-heading span:nth-child(2) {
    letter-spacing: 0;
    padding: 0 0.5em;
    margin: 0.4375rem -0.3125rem 0;
  }
  .tour-point:nth-of-type(1) .body .list-a, .tour-point:nth-of-type(1) .body .markdown ul, .markdown .tour-point:nth-of-type(1) .body ul, .tour-point:nth-of-type(1) .body .wysiwyg ul, .wysiwyg .tour-point:nth-of-type(1) .body ul {
    margin-bottom: 0;
  }
  .tour-point:nth-of-type(1)::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 60vw;
    background: url(../about/images/tour_map.png) no-repeat 0 0;
    background-size: 100vw 60vw;
    background-position: 90% 0;
    background-size: 120vw auto;
    position: static;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
  }
  .tour-point:nth-of-type(1)::before {
    background-image: url(../about/images/tour_point1_bottom.svg);
  }
  .tour-point:nth-of-type(2)::before {
    background-image: url(../about/images/tour_point2_bottom.svg);
  }
  .tour-point:nth-of-type(3)::before {
    background-image: url(../about/images/tour_point3_bottom.svg);
  }
}
/* -----------------------------------------------
  Ships
-------------------------------------------------- */
.about-ships {
  background: #fafafa;
  padding-bottom: 5rem;
}

.about-ships .section-heading > .inner::before {
  background: #fafafa;
}

@media (max-width: 767px) {
  .about-ships {
    background: #EEE;
  }
  .about-ships .section-heading > .inner::before {
    background: #EEE;
  }
}
.ship-detail {
  width: 960px;
  padding: 3.75rem 3.125rem;
  margin: 6.875rem auto 0;
  background: #FFF;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.ship-detail .gallery {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 34.375rem;
  margin: -7.5rem 3.125rem 0 -7.5rem;
}

.ship-detail .gallery .swiper-slide .image {
  width: 34.375rem;
  position: relative;
  overflow: hidden;
}

.ship-detail .gallery .swiper-slide .image::before {
  content: "";
  display: block;
  padding-bottom: 66%;
}

.ship-detail .gallery .swiper-slide .image img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.ship-detail .gallery .swiper-slide .image img {
  width: 100%;
}

.ship-detail .gallery .caption {
  font-size: 0.875rem;
  margin-top: 1em;
}

.ship-detail .gallery .next, .ship-detail .gallery .prev {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  cursor: pointer;
}

.ship-detail .gallery .next:hover, .ship-detail .gallery .prev:hover {
  opacity: 0.7;
}

.ship-detail .gallery .prev {
  right: 3.125rem;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.ship-detail .gallery:not(.swiper-container-initialized) .next, .ship-detail .gallery:not(.swiper-container-initialized) .prev {
  display: none;
}

.ship-detail .body .title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.3125rem;
  white-space: nowrap;
}

.ship-detail .body .title small {
  display: block;
  font-size: 1rem;
}

.ship-detail .body .title span {
  font-size: 1rem;
}

.ship-detail .body .capacity, .ship-detail .body .price {
  letter-spacing: 0.1em;
}

.ship-detail .body .capacity em, .ship-detail .body .price em {
  font-style: normal;
  font-weight: bold;
}

.ship-detail .body .description {
  margin-top: 0.625rem;
}

.ship-detail .body .detail a {
  font-weight: bold;
  margin-top: 20px;
  text-decoration: none;
  color: #000000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.ship-detail .body .detail a::after {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
}
.ship-detail .body .detail a:hover {
  gap: 40px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.ship-detail:first-of-type {
  margin-top: 4.375rem;
}

.ship-detail:nth-of-type(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.ship-detail:nth-of-type(even) .gallery {
  margin: -7.5rem -7.5rem 0 3.125rem;
}

.ship-detail:nth-of-type(even) .gallery .next {
  right: auto;
  left: 3.125rem;
}

.ship-detail:nth-of-type(even) .gallery .prev {
  right: auto;
  left: 0;
}

@media (max-width: 767px) {
  .ship-detail {
    width: auto;
    margin: 2.5rem -1.5625rem 11.25rem 0rem;
    padding: 1.5625rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .ship-detail .gallery {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    width: calc(100vw - 3.125rem);
    margin: 1.5625rem 3.125rem -11.25rem -3.125rem;
    padding-right: 3.125rem;
  }
  .ship-detail .gallery .swiper-slide .image {
    width: calc(100vw - 3.125rem);
  }
  .ship-detail .gallery .swiper-slide .caption {
    font-size: 0.75rem;
    margin-top: 1em;
    padding-right: 3.125rem;
  }
  .ship-detail .gallery .swiper-slide-prev,
  .ship-detail .gallery .swiper-slide-next {
    opacity: 0;
  }
  .ship-detail .gallery .next, .ship-detail .gallery .prev {
    right: 0.9375rem;
    top: 0;
    bottom: auto;
    z-index: 1;
  }
  .ship-detail .gallery .next {
    right: 0.9375rem;
    top: 2.1875rem;
  }
  .ship-detail .body .title {
    font-size: 1.25rem;
    white-space: normal;
  }
  .ship-detail .body .title small {
    display: block;
    font-size: 1rem;
  }
  .ship-detail .body .title span {
    font-size: 0.8125rem;
  }
  .ship-detail .body .capacity, .ship-detail .body .price {
    font-size: 0.75rem;
  }
  .ship-detail .body .description {
    font-size: 0.8125rem;
  }
  .ship-detail:nth-of-type(even) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 2.5rem 0rem 11.25rem -1.5625rem;
  }
  .ship-detail:nth-of-type(even) .gallery {
    margin: 1.5625rem -3.125rem -11.25rem -1.5625rem;
    padding-left: 3.125rem;
    padding-right: 0;
  }
  .ship-detail:nth-of-type(even) .gallery .caption {
    padding-left: 0;
    padding-right: 3.125rem;
  }
  .ship-detail:nth-of-type(even) .gallery .next {
    right: auto;
    left: 0.9375rem;
  }
  .ship-detail:nth-of-type(even) .gallery .prev {
    right: auto;
    left: 0.9375rem;
  }
  .ship-detail:first-of-type {
    margin-top: 1.875rem;
  }
  .ship-detail:last-of-type {
    margin-bottom: 6.875rem;
  }
}
/**************************************************
  Plan
***************************************************/
.plan-package + .plan-flow > .inner {
  padding-bottom: 0;
}

/* -----------------------------------------------
  Introduction
-------------------------------------------------- */
.plan-introduction {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.plan-introduction > .highlight-heading {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
}

.plan-introduction > .lead {
  margin: 1.875rem 0 0;
}

@media (max-width: 767px) {
  .plan-introduction {
    padding: 0 1.5625rem;
    margin-bottom: 1.875rem;
  }
  .plan-introduction > .lead {
    font-size: 0.875rem;
    text-align: left;
  }
}
/* -----------------------------------------------
  Points
-------------------------------------------------- */
.point-detail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  width: 1100px;
  margin: 0 auto 1.25rem;
}

.point-detail .photo {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 35rem;
  margin: 0 5rem 0 -3.125rem;
}

.point-detail .body {
  position: relative;
  padding: 2.5rem 0 0;
  width: 28.75rem;
}

.point-detail .body::before {
  background-size: 7.1875rem 7.1875rem;
  width: 7.1875rem;
  height: 7.1875rem;
  position: absolute;
  top: 1.875rem;
  left: -8.75rem;
  content: "Point";
  font-family: "MuseoModerno", cursive;
  font-weight: 500;
  letter-spacing: 0.1em;
}

@media (min-width: 769px) {
  .point-detail:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .point-detail:nth-of-type(even) .photo {
    margin: -5rem -3.125rem 0 5rem;
  }
  .point-detail:nth-of-type(even) .body .highlight-heading {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .point-detail:nth-of-type(even) .body::before {
    background-image: url(../images/balloon_bg.svg);
    left: auto;
    right: -8.75rem;
  }
}
@media (max-width: 767px) {
  .point-detail {
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .point-detail .photo {
    width: 100vw;
    margin: 0 -1.5625rem 2.5rem;
  }
  .point-detail .body {
    width: auto;
    margin: 0 -1.5625rem;
    padding: 0 1.5625rem;
  }
  .point-detail .body::before {
    font-size: 0.5625rem;
    background-size: 3.59375rem 3.59375rem;
    width: 3.59375rem;
    height: 3.59375rem;
    top: -4.375rem;
    left: 1.5625rem;
  }
  .point-detail .body .lead {
    font-size: 0.875rem;
  }
}
/* -----------------------------------------------
  Flow
-------------------------------------------------- */
.flow-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 1.5625rem 3.75rem;
}

.flow-list .flow {
  width: 33.33%;
  padding: 0 1.5625rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  counter-increment: flow;
}

.flow-list .flow .title::before {
  display: block;
  color: #1852a4;
  font-family: "MuseoModerno", cursive;
  font-weight: bold;
  content: counter(flow);
  line-height: 1;
  margin-top: 0.625rem;
}

@media (max-width: 767px) {
  .flow-list {
    display: block;
    margin: 0 0.625rem 2.1875rem;
  }
  .flow-list .flow {
    width: auto;
    padding: 0;
  }
  .flow-list .flow .title::before {
    margin-top: 0;
  }
}
/* -----------------------------------------------
  Example
-------------------------------------------------- */
.example-detail {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  width: 960px;
  margin: 0 auto;
}

.example-detail .photo {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 30rem;
  position: relative;
  overflow: hidden;
}

.example-detail .photo::before {
  content: "";
  display: block;
  padding-bottom: 66%;
}

.example-detail .photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.example-detail .body {
  padding: 0 3.125rem;
}

.example-detail:first-child {
  margin-top: 3.75rem;
}

.example-detail:first-child::before {
  content: "For\a example";
  font-size: 1.125rem;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
  white-space: pre;
  line-height: 1.3;
  position: absolute;
  top: -4.375rem;
  left: -4.375rem;
  z-index: 1;
}

@media (min-width: 769px) {
  .example-detail:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .example-detail:last-child {
    margin-bottom: -3.75rem;
  }
}
@media (max-width: 767px) {
  .example-detail {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2.5rem;
  }
  .example-detail .photo {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
    width: 93vw;
  }
  .example-detail .body {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    width: auto;
    padding: 0 calc(26px - 1.5625rem);
    font-size: 0.875rem;
  }
  .example-detail:nth-of-type(odd) .photo {
    margin: 0 -1.5625rem 0.9375rem 0;
  }
  .example-detail:nth-of-type(even) .photo {
    margin: 0 0 0.9375rem -1.5625rem;
  }
  .example-detail:first-child {
    margin-top: 5rem;
  }
  .example-detail:first-child::before {
    background-size: 6.8125rem 6.8125rem;
    width: 6.8125rem;
    height: 6.8125rem;
    top: -3.125rem;
    left: -0.3125rem;
    font-size: 0.84375rem;
  }
}
/* -----------------------------------------------
  Package
-------------------------------------------------- */
.package-detail {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 3.75rem;
  min-height: 22.8125rem;
}

.package-detail .photo {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 30rem;
  position: relative;
  overflow: hidden;
  margin: 1.5625rem 3.125rem 0 0;
  -webkit-box-shadow: -1.875rem 1.875rem 0 #1852a4;
          box-shadow: -1.875rem 1.875rem 0 #1852a4;
}

.package-detail .photo::before {
  content: "";
  display: block;
  padding-bottom: 67%;
}

.package-detail .photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  width: auto;
  max-width: none;
  height: 100%;
}

.package-detail .information {
  margin: 0 0 1em;
}

.package-detail .information dt {
  font-weight: bold;
}

.package-detail .information dd {
  margin: -2em 0 0 5em;
}

[lang=en] .package-detail .information dd {
  margin-left: 7em;
}

.package-detail .notice {
  font-size: 0.75rem;
}

@media (max-width: 767px) {
  .package-detail {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 1.875rem;
    min-height: 0;
  }
  .package-detail .photo {
    width: calc(100vw - 1.5625rem - 1.5625rem - 30px);
    margin: 1.5625rem 0.625rem;
    -webkit-box-shadow: 0.9375rem -0.9375rem 0 #1852a4;
            box-shadow: 0.9375rem -0.9375rem 0 #1852a4;
    margin-bottom: -1.25rem;
  }
  .package-detail .body {
    font-size: 0.8125rem;
    padding: 0 0.625rem;
  }
  .package-detail .body .highlight-heading {
    margin: 0 -0.625rem 1.25rem;
  }
}
/**************************************************
  Islands
***************************************************/
/* -----------------------------------------------
  Introduction
-------------------------------------------------- */
.island-introduction > .inner {
  position: relative;
}

.island-introduction > .inner::after {
  display: inline-block;
  content: "";
  width: 56.1875rem;
  height: 38.9375rem;
  background: url(../islands/images/map.png) no-repeat 0 0;
  background-size: 56.1875rem 38.9375rem;
  position: absolute;
  top: -6.25rem;
  right: -6.25rem;
  z-index: 0;
}

[lang=en] .island-introduction > .inner::after {
  background-image: url(../../en@sics/islands/images/map.png);
}

#naoshima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_naoshima.png);
}

#teshima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_teshima.png);
}

#megijima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_megijima.png);
}

#ogijima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_ogijima.png);
}

#shodoshima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_shodoshima.png);
}

#inujima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_inujima.png);
}

#honjima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_honjima.png);
}

#awashima .island-introduction > .inner::after {
  background-image: url(../islands/images/map_awashima.png);
}

#shimanami .island-introduction > .inner::after {
  background-image: url(../islands/images/map_shimanami.png);
  top: -3.25rem;
}

.island-introduction .lead {
  width: 33.125rem;
  line-height: 2.25;
  margin-bottom: 3.75rem;
  position: relative;
  z-index: 2;
}

.island-introduction .island-list {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .island-introduction .inner::after {
    display: none !important;
  }
  .island-introduction .lead {
    width: auto;
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 0;
  }
  .island-introduction .lead br {
    display: none;
  }
  .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 96vw;
    background: url(../islands/images/map_sp.png) no-repeat 0 0;
    background-size: 100vw 96vw;
    height: 69vw;
    background-position: 50% 0;
    margin: 0 -1.5625rem;
    vertical-align: bottom;
  }
  [lang=en] .island-introduction .lead::after {
    background-image: url(../../en@sics/islands/images/map_sp.png);
  }
  #naoshima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #naoshima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_naoshima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #teshima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #teshima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_teshima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #megijima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #megijima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_megijima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #ogijima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #ogijima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_ogijima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #shodoshima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #shodoshima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_shodoshima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #inujima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #inujima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_inujima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #honjima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #honjima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_honjima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #awashima .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #awashima .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    background: url(../islands/images/map_awashima.png) no-repeat 0 0;
    background-size: 100vw 69vw;
    height: 103.5vw;
    background-size: 150vw auto;
    background-position: 67% 0;
  }
  #shimanami .island-introduction .lead {
    margin-bottom: -54.5vw;
  }
  #shimanami .island-introduction .lead::after {
    display: inline-block;
    content: "";
    width: 100vw;
    height: 69vw;
    /*  background: url(../islands/images/map_shimanami.png) no-repeat 0 0;*/
    background: url(../islands/images/map_shimanami_sp.png) no-repeat 0 0;
    height: 103.5vw;
    background-size: 100vw auto;
    /*  background-position: 67% 0;*/
  }
}
.spot-wrap {
  position: relative;
}

.spot-wrap .spot-heading {
  position: absolute;
  right: -1.25rem;
  top: -7.5rem;
  z-index: 3;
}

@media (max-width: 767px) {
  .spot-wrap .spot-heading {
    background-size: 6.0625rem 6.0625rem;
    width: 6.0625rem;
    height: 6.0625rem;
    font-size: 0.6875rem;
    line-height: 1.7;
    right: 0;
    top: -6.0625rem;
  }
}
.spot-wrap .spot-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 0.9375rem;
  position: relative;
  z-index: 2;
}

.spot-wrap .spot-list > .spot {
  width: 31%;
  margin: 2rem;
}

@media (max-width: 767px) {
  .spot-wrap .spot-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .spot-wrap .spot-list > .spot {
    width: 100%;
    margin: 0;
  }
  .spot-wrap .spot-list > .spot .thumbnail {
    width: 30%;
  }
  .spot-wrap .spot-list > .spot .title, .spot-wrap .spot-list > .spot .explain {
    padding-left: 35%;
  }
}
/* -----------------------------------------------
  Planning
-------------------------------------------------- */
@media (min-width: 769px) {
  .planning-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .planning-wrap .planning-timeline,
  .planning-wrap .planning-feature {
    width: 48%;
  }
  .planning-wrap + .notice {
    text-align: right;
    font-size: 0.875rem;
    margin: 3.75rem 0 2.5rem;
  }
}
@media (max-width: 767px) {
  .planning-wrap + .notice {
    border-top: 1px solid #cccccc;
    padding-top: 1.5625rem;
    margin: 1.5625rem 0 1.875rem;
    font-size: 0.8125rem;
  }
}
.planning-timeline {
  position: relative;
}

.planning-timeline::before {
  content: "";
  position: absolute;
  top: 0.625rem;
  left: calc(5em + 1.9375rem);
  width: 5px;
  height: calc(100% - 1.875rem);
  background: #1852a4;
}

.planning-timeline .item {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-bottom: 2em;
}

.planning-timeline .item:last-child {
  padding-bottom: 0;
}

.planning-timeline .item::before {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
  content: "";
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 5em;
  font-family: "MuseoModerno", cursive;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: right;
}

.planning-timeline .item::after {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  content: "";
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 0.9375rem;
  height: 0.9375rem;
  background: #1852a4;
  border-radius: 50%;
  margin: 0.625rem 1.625rem 0;
  z-index: 1;
}

.planning-timeline .item span {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.planning-timeline .item span small {
  display: block;
}

.planning-timeline .item span.via-ship::before {
  display: inline-block;
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  background: #FFF url(../images/icon/icon_access.svg) no-repeat 0 0;
  background-size: 1.375rem 1.375rem;
  position: absolute;
  top: 2.3125rem;
  left: 6.4375rem;
  z-index: 2;
}

.planning-timeline .item.-viewing::before {
  content: "Viewing";
}

.planning-timeline .item.-viewing::after {
  -webkit-box-shadow: 0 0 0 5px #fff, 0 0 0 8px #1852a4;
          box-shadow: 0 0 0 5px #fff, 0 0 0 8px #1852a4;
}

.planning-timeline .item.-lunch::before {
  content: "Lunch";
}

@media (max-width: 767px) {
  .planning-timeline {
    padding: 0 1.25rem;
    margin-bottom: 1.875rem;
  }
  .planning-timeline::before {
    left: calc(5em + 2rem);
    width: 4px;
  }
  .planning-timeline .item {
    font-size: 0.75rem;
  }
  .planning-timeline .item::after {
    margin: 0.25rem 1.8125rem 0;
    width: 0.6875rem;
    height: 0.6875rem;
  }
  .planning-timeline .item span.via-ship::before {
    top: 1.4375rem;
    left: 5.1875rem;
  }
}
.planning-feature .heading {
  line-height: 1.5;
  margin-bottom: 0.9375rem;
}

.planning-feature .heading.-lunch {
  padding-left: 3.125rem;
  background: url(../images/icon/icon_lunch.svg) no-repeat 0 50%;
  background-size: 2.125rem 2.5rem;
}

.planning-feature .heading.-access {
  padding-left: 3.125rem;
  background: url(../images/icon/icon_access.svg) no-repeat 0 50%;
  background-size: 2.25rem 2.25rem;
}

.planning-feature .heading:not(:first-child) {
  margin-top: 1.875rem;
}

.planning-feature .heading .en {
  display: block;
  color: #1852a4;
  font-family: "MuseoModerno", cursive;
  letter-spacing: 0.1em;
}

.planning-feature .heading .ja {
  display: block;
  font-size: 1.125rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .planning-feature {
    margin: 0;
  }
  .planning-feature .heading {
    border-top: 1px solid #cccccc;
    padding-top: 1.5625rem;
    background-position: 0 100% !important;
    background-size: 1.875rem 1.875rem;
  }
  .planning-feature .heading:not(:first-child) {
    margin-top: 1.5625rem;
  }
  .planning-feature .heading .en {
    font-size: 0.75rem;
  }
  .planning-feature .heading .ja {
    font-size: 0.84375rem;
  }
  .planning-feature p {
    font-size: 0.8125rem;
  }
}
.headline {
  padding-top: 5rem;
}

.headline h4 {
  font-size: 1.25rem;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  z-index: 2;
}

.headline p {
  text-align: center;
  padding-top: 1.5rem;
}

@media (max-width: 767px) {
  .headline {
    padding-top: 0;
  }
  .headline h4 {
    font-size: 1.0625rem;
  }
  .headline p {
    padding: 0.275rem 0;
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: left;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
  }
}
/**************************************************
  Ship
***************************************************/
/* -----------------------------------------------
  Introduction
-------------------------------------------------- */
.ship-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  .ship-inner {
    display: block;
  }
}

.ship-swiper {
  overflow: hidden;
  width: 600px;
}
@media (max-width: 767px) {
  .ship-swiper {
    width: 100%;
  }
}
.ship-swiper .swiper-slide {
  -o-object-fit: cover;
     object-fit: cover;
  width: 600px;
  height: auto;
}

.ship-swiper-thumb.slider-thumbnail .swiper-slide {
  opacity: 0.5;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  width: 16.6666666667%;
}

.ship-swiper-thumb.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

/* レイアウトのためのスタイル */
.ship-swiper .swiper {
  max-width: 600px;
  width: 100%;
}

.ship-swiper img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 600px;
  height: auto;
}

.ship-swiper-thumb img {
  width: 82px;
  height: 82px;
  margin-top: 15px;
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 767px) {
  .ship-swiper-thumb img {
    width: 93%;
    height: 50px;
    margin-top: 10%;
  }
}

.ship-lead {
  width: 40%;
}
@media (max-width: 767px) {
  .ship-lead {
    width: 100%;
    font-size: 0.8125rem;
    margin-top: 0.625rem;
  }
}

/* -----------------------------------------------
  Table
-------------------------------------------------- */
@media (max-width: 767px) {
  .site-content > .section > .inner.ship-table-wrap {
    padding: 0;
    margin: 40px 1.5625rem 0;
  }
}

@media (max-width: 767px) {
  .ship-table-wrap {
    margin-top: 40px;
    overflow-x: auto;
    font-size: 0.8125rem;
  }
}

.ship-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
@media (max-width: 767px) {
  .ship-table {
    width: 800px;
  }
}

.ship-table th,
.ship-table td {
  padding: 16px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
@media (max-width: 767px) {
  .ship-table th,
  .ship-table td {
    white-space: nowrap;
  }
}

.ship-table th {
  background-color: #1852a4;
  color: #fff;
  width: 12%;
}

.ship-table td {
  background-color: #fff;
  width: 38%;
}

.ship-table-wrap .ship-table ul {
  list-style: unset;
  padding: inherit;
}

/* -----------------------------------------------
  Layout
-------------------------------------------------- */
@media (max-width: 767px) {
  .ship-layout {
    margin-top: 50px;
  }
}

.ship-layout-img {
  text-align: center;
}

/**************************************************
  For Travel Agencies
***************************************************/
/* -----------------------------------------------
  Introduction
-------------------------------------------------- */
.agency-introduction {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.agency-introduction .highlight-heading {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 767px) {
  .agency-introduction .description {
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.7;
  }
  .agency-introduction .description br {
    display: none;
  }
}
/* -----------------------------------------------
  Reason
-------------------------------------------------- */
.agency-reason .heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.5rem;
  margin: -3.75rem 0 -1.875rem;
}

.agency-reason .heading::before, .agency-reason .heading::after {
  content: "";
  width: 1px;
  height: 1em;
  background: #000000;
}

.agency-reason .heading::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-right: 1em;
}

.agency-reason .heading::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-left: 1em;
}

.agency-reason > .inner {
  padding-bottom: 1.25rem !important;
}

@media (max-width: 767px) {
  .agency-reason .heading {
    font-size: 1.125rem;
    line-height: 1.7;
    text-align: center;
    margin: 1.875rem 0.625rem 0;
  }
}
/* -----------------------------------------------
  Business
-------------------------------------------------- */
.agency-business .reason-list + .notice {
  text-align: center;
  font-size: 0.875rem;
  margin-bottom: 3.75rem;
}

.agency-business .figure {
  text-align: center;
}

@media (max-width: 767px) {
  .agency-business .figure {
    margin: -0.625rem 1.5625rem 3.75rem;
  }
  .agency-business .reason-list + .notice {
    font-size: 0.75rem;
    margin: -0.625rem 0 1.875rem;
  }
}
/**************************************************
  Access
***************************************************/
/* -----------------------------------------------
  Tab
-------------------------------------------------- */
/* access tablist */
.access-tablist {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.access-tablist:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

@media (max-width: 767px) {
  .access-tablist {
    padding: 0 1.5625rem;
  }
}
.access-tablist > .tab {
  width: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.access-tablist > .tab:not(:last-child) {
  margin-right: 1.25rem;
}

.access-tablist > .tab:not(:first-child) {
  margin-left: 1.25rem;
}

.access-tablist > .tab button {
  width: 100%;
  height: 100%;
  padding: 0.75em 1em;
  border: 3px solid #1852a4;
  border-bottom: 0;
  background: #FFF;
  color: #1852a4;
  font-weight: bold;
  text-align: center;
}

.access-tablist > .tab button:hover, .access-tablist > .tab button[aria-selected=true] {
  color: #FFF;
  background: #1852a4;
}

@media (max-width: 767px) {
  .access-tablist {
    padding: 0 0.78125rem;
  }
  .access-tablist > .tab:not(:last-child) {
    margin-right: 0.3125rem;
  }
  .access-tablist > .tab:not(:first-child) {
    margin-left: 0.3125rem;
  }
  .access-tablist > .tab button {
    padding: 0.5em;
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  .access-tablist > .tab button span {
    display: block;
  }
  [lang=en] .access-tablist > .tab button {
    font-size: 0.75rem;
  }
}
.access-tabpanel[aria-hidden=true] {
  display: none;
}

@media (max-width: 767px) {
  .access-tabpanel > .inner {
    font-size: 0.8125rem;
    padding: 1.875rem 1.5625rem !important;
  }
  .access-tabpanel > .inner ._double {
    margin-bottom: 1.25rem !important;
  }
}
.access-map {
  border-top: 3px solid #1852a4;
  background: #E7EDF6;
}

[lang=en] .access-map {
  border-top: 0;
}

.access-map img {
  display: block;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

#overseas .access-map {
  position: relative;
}

#overseas .access-map::before {
  content: "";
  position: absolute;
  left: calc(50% - 650px);
  top: 0;
  width: 10em;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#E7EDF6), to(#FFFFFF));
  background: -webkit-linear-gradient(left, #E7EDF6, #FFFFFF);
  background: linear-gradient(to right, #E7EDF6, #FFFFFF);
}

/* route tablist */
.route-tablist {
  position: relative;
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: -2.625rem;
}

.route-tablist:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

@media (max-width: 767px) {
  .route-tablist {
    padding: 0 1.5625rem;
  }
}
.route-tablist::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.0625rem;
  width: 3px;
  height: 50%;
  background: #f4de26;
}

.route-tablist > .tab {
  width: 20%;
  border-top: 3px solid #f4de26;
}

[lang=en] .route-tablist > .tab {
  width: 33%;
}

.route-tablist > .tab button {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 0;
  padding: 0.5em 0.5em 1em;
  background: #FFF;
}

.route-tablist > .tab button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 50%;
  background: #f4de26;
}

.route-tablist > .tab button:hover, .route-tablist > .tab button[aria-selected=true] {
  background: #f4de26;
  margin-left: -3px;
  text-indent: 3px;
  width: calc(100% + 3px);
}

.route-tablist > .tab .en {
  font-size: 1.25rem;
  font-family: "MuseoModerno", cursive;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.route-tablist > .tab .ja {
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
}

@media (max-width: 767px) {
  .route-tablist {
    margin-top: 0;
    padding: 0;
  }
  .route-tablist::after {
    left: 0;
    height: 100%;
  }
  .route-tablist > .tab button {
    padding: 0.5em 0.5em calc(0.5em + 3px);
  }
  .route-tablist > .tab button .en {
    display: none;
  }
  .route-tablist > .tab button::before {
    height: 100%;
  }
  [lang=en] .route-tablist > .tab button .en {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0em;
  }
}
.route-tabpanel[aria-hidden=true] {
  display: none;
}

/* -----------------------------------------------
  Route
-------------------------------------------------- */
.route-section {
  zoom: 1;
  max-width: 1100px;
  padding: 0 1.25rem;
  margin: 0 auto;
  margin-top: 3.125rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.route-section:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

@media (max-width: 767px) {
  .route-section {
    padding: 0 1.5625rem;
  }
}
.route-section > .heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 13.625rem;
  padding: 3.125rem 0;
  margin-right: 1.875rem;
  color: #FFF;
  background: #1852a4;
}

.route-section > .heading .en {
  margin-top: 0.5em;
  font-size: 1.5rem;
  font-family: "MuseoModerno", cursive;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.route-section > .heading .ja {
  font-size: 0.875rem;
  font-weight: bold;
}

.route-section > .heading.-airplane::before {
  display: inline-block;
  content: "";
  width: 3.8125rem;
  height: 1.875rem;
  background: url(../images/icon/icon_airplane.svg) no-repeat 0 0;
  background-size: 3.8125rem 1.875rem;
}

.route-section > .heading.-train::before {
  display: inline-block;
  content: "";
  width: 1.5rem;
  height: 2.0625rem;
  background: url(../images/icon/icon_train.svg) no-repeat 0 0;
  background-size: 1.5rem 2.0625rem;
}

.route-section > .body {
  width: 53.25rem;
}

@media (min-width: 769px) {
  .route-section:last-child {
    margin-bottom: 6.25rem;
  }
}
@media (max-width: 767px) {
  .route-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1.875rem 0 0;
  }
  .route-section > .heading {
    width: 100%;
    margin-right: 0;
    padding: 0.625rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .route-section > .heading .en {
    font-size: 1.25rem;
    margin-top: 0;
    margin-left: 1em;
  }
  .route-section > .heading .ja {
    font-size: 0.75rem;
    margin-left: 1em;
  }
  .route-section > .heading::before {
    height: 1.875rem !important;
    background-size: contain !important;
  }
  .route-section > .body {
    width: 100%;
  }
}
.route-table {
  height: 100%;
  width: calc(100% + 3.125rem);
  height: calc(100% + 3.125rem);
  border-spacing: 1.5625rem;
  border-collapse: separate;
  margin: -1.5625rem;
}

.route-table .spot {
  width: 8.625rem;
  font-size: 1.125rem;
  font-weight: bold;
  text-align: center;
  border: 3px solid #eeeeee;
  padding: 1em;
}

.route-table .airplane, .route-table .train {
  position: relative;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
}

.route-table .airplane span, .route-table .train span {
  position: relative;
}

.route-table .airplane::before, .route-table .train::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.5625rem;
  width: calc(100% + 3.125rem);
  height: 5px;
  background: #EEE;
}

@media (max-width: 767px) {
  .route-table {
    width: calc(100% + 1.5625rem);
    height: 0;
    margin: 0.46875rem -0.78125rem -0.78125rem;
    border-spacing: 0.78125rem;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
            writing-mode: vertical-lr;
  }
  .route-table th, .route-table td {
    width: 50%;
  }
  .route-table th span, .route-table td span {
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
            writing-mode: horizontal-tb;
    min-width: 8em;
    min-height: 3em;
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 1.5;
  }
  .route-table th span.full, .route-table td span.full {
    min-height: 5em;
  }
  .route-table .spot {
    width: auto;
    padding: 0.5em;
    font-size: 1rem;
  }
  .route-table .airplane, .route-table .train {
    font-size: 0.75rem;
  }
  .route-table .airplane::before, .route-table .train::before {
    top: -0.78125rem;
    left: 50%;
    width: 5px;
    height: calc(100% + 1.5625rem);
  }
}
/**************************************************
    faq
***************************************************/
.faq-heading2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 40px;
}
@media (max-width: 767px) {
  .faq-heading2 {
    font-size: 1.25rem;
  }
}

.accordion {
  margin: 40px 0 0;
}
@media (max-width: 767px) {
  .accordion {
    font-size: 1rem;
  }
}

.accordion__block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.accordion__item {
  display: inline-block;
  border: 1px solid #1852a4;
  margin-top: 20px;
}

.accordion__head {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  text-align: left;
  padding: 20px 30px 20px 20px;
  border-radius: 8px 8px 0 0;
  color: black;
  cursor: pointer;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.accordion__head button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
}
.accordion__head::before {
  display: inline-block;
  font-family: "MuseoModerno", cursive;
  content: "Q";
  font-size: 30px;
  color: #1852a4;
  margin-right: 20px;
}
.accordion__head.--open .accordion__arrow::before {
  opacity: 0;
  background-color: #1852a4;
}
.accordion__head.--open .accordion__arrow::after {
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
  background-color: #1852a4;
}

.accordion__arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .accordion__arrow {
    right: 10px;
  }
}
.accordion__arrow::before, .accordion__arrow::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background-color: #1852a4;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.accordion__arrow::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.accordion__body {
  position: relative;
  border-radius: 0 0 8px 8px;
  background: #fff;
  color: #000000;
  border: transparent;
  padding: 0 20px;
  line-height: 0;
  opacity: 0;
  -webkit-transition: line-height 0.4s, padding 0.4s, opacity 0.4s;
  transition: line-height 0.4s, padding 0.4s, opacity 0.4s;
}
.accordion__body p {
  margin-top: 0;
}
.accordion__body.--open {
  padding: 0 20px 20px 60px;
  opacity: 1;
  line-height: 2;
}
@media (max-width: 767px) {
  .accordion__body.--open {
    padding: 0 20px 20px 20px;
  }
}
.accordion__body.--open::after {
  -webkit-transform: rotate(45deg) translateY(-10px);
          transform: rotate(45deg) translateY(-10px);
}

/* -----------------------------------------------
  color
-------------------------------------------------- */
/* -----------------------------------------------
  Header
-------------------------------------------------- */
.site-header.course-header {
  background: none;
  height: 38rem;
}
@media (max-width: 767px) {
  .site-header.course-header {
    height: auto;
  }
}
.site-header.course-header .mv {
  margin: 0 auto;
  text-align: center;
  padding-top: 165px;
}
@media (max-width: 767px) {
  .site-header.course-header .mv {
    padding-top: 30vw;
  }
}
@media (max-width: 767px) {
  .site-header.course-header .mv .only-pc {
    display: none;
  }
}
.site-header.course-header .nav-button.-invert {
  mix-blend-mode: unset;
}
.site-header.course-header .nav-button span {
  background: #000;
}

/* -----------------------------------------------
  course-bnrarea
-------------------------------------------------- */
.course-bnrarea {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  max-width: 1200px;
  margin: 3.5rem auto 1.75rem;
  row-gap: 20px;
}
@media (min-width: 769px) {
  .course-bnrarea::after {
    display: block;
    content: "";
    width: 33%;
  }
}
@media (max-width: 767px) {
  .course-bnrarea {
    display: block;
    padding: 0 1.2rem;
  }
}
.course-bnrarea-item {
  width: 33%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 767px) {
  .course-bnrarea-item {
    width: 100%;
  }
}
.course-bnrarea-item a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (min-width: 769px) {
  .course-bnrarea-item a:hover {
    opacity: 0.7;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
.course-bnrarea-item p {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  min-height: 94px;
  padding: 1rem 4rem 0 1.25rem;
}
.course-bnrarea-item p::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  right: 1.725rem;
  top: 31%;
}

/* -----------------------------------------------
  Sdgs
-------------------------------------------------- */
#sdgs .breadcrumb {
  width: 1200px;
  margin: 1.4rem auto 2rem;
  line-height: 1.7;
}

#sdgs .plan-introduction > .lead {
  font-size: 18px;
  margin-top: 0;
}

#sdgs .plan-sdgs .inner {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  padding: 3.75rem 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.plan-sdgs {
  margin-top: -20px;
  padding-top: 20px;
}

.about-sdgs {
  max-width: 1200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  background-color: #fdfdfd;
  border: 1px solid #f3f6ee;
  padding: 25px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 32px;
}

.about-sdgs .photo {
  width: 16%;
}

.about-sdgs .body {
  width: 82%;
}

.about-sdgs .body p {
  font-size: 14px;
  text-align: left;
  line-height: 2;
}

.localnav-sdgs {
  max-width: 1200px;
  margin: 40px auto;
  border: 1px solid #96d400;
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.localnav-sdgs li {
  counter-increment: number;
  border-bottom: 1px solid #eee;
}
.localnav-sdgs li:last-child {
  border-bottom: 0;
}
.localnav-sdgs a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #000000;
  padding: 10px 0 10px 50px;
}
@media (max-width: 767px) {
  .localnav-sdgs a {
    padding-left: 40px;
  }
}
.localnav-sdgs a::before {
  content: counter(number);
  font-weight: bold;
  background: #f3f6ee;
  color: #96d400;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  text-align: center;
  position: absolute;
  left: 0;
}
.localnav-sdgs a:hover {
  font-weight: bold;
  color: #96d400;
}
.localnav-sdgs a:hover::before {
  background: #96d400;
  color: #fff;
}

.line-sdgs {
  background-image: url(../course/images/sdgs/bg_line.png);
  background-repeat: repeat-x;
  height: 20px;
}

.sdgs-title {
  position: relative;
  max-width: 1200px;
  margin: 94px auto 0;
}

.sdgs-title .photo span {
  font-size: 18px;
  font-family: "MuseoModerno", cursive;
  color: #96d400;
  display: block;
  margin-top: 30px;
  text-align: center;
}

.sdgs-title .body {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #f9faf1;
}

.sdgs-title .body h2 {
  color: #96d400;
  font-size: 36px;
  text-align: center;
  line-height: 1.5;
}

.sdgs-title .body h2::after {
  display: block;
  content: "";
  width: 170px;
  height: 3px;
  background-image: url(../course/images/sdgs/img_h2.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 25px auto 20px;
}

.sdgs-title .body h2 span {
  font-size: 18px;
  display: block;
}

.sdgs-title .body p {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  line-height: 1.9;
}

.table-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 20px;
}

.table-detail .photo {
  margin-top: 5px;
}

.table-detail li {
  font-size: 14px;
  text-indent: -14px;
  margin-left: 14px;
  line-height: 1.9;
}

.sdgs-detail table {
  border: 3px solid #96d400;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 5px auto 0;
  width: 100%;
}

.sdgs-detail table th,
.sdgs-detail table td {
  background-color: #f9faf1;
  border-bottom: 2px solid #fff;
  padding: 15px 25px;
  vertical-align: top;
  list-style: 1.9;
}

.sdgs-detail table th {
  text-align: left;
}

.sdgs-detail table td {
  border-right: 2px solid #fff;
}

.sdgs-detail table td:last-child {
  border-right: 0;
}

.sdgs-detail table tr th:last-of-type {
  border-left: 2px solid #fff;
}

.sdgs-detail table tr:last-of-type th,
.sdgs-detail table tr:last-of-type td {
  border-bottom: 0;
}

.highlight-heading.-green > span {
  color: #fff;
  background-color: #96d400;
  margin-bottom: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.sdgs-detail .flow-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 50px;
}

.sdgs-detail .flow-content .photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.sdgs-detail .flow-content .photo img {
  margin-top: 30px;
}

.sdgs-detail .flow-content .photo img:first-of-type {
  margin-top: 15px;
}

.sdgs-detail .flow-content .photo.mt img:first-of-type {
  margin-top: 40px;
}

.sdgs-detail .flow-content .body-wrap {
  max-width: 700px;
  width: 100%;
}

.sdgs-detail .flow-content .body {
  position: relative;
  margin-top: 0.35em;
}

.sdgs-detail .flow-content .body .time {
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.sdgs-detail .flow-content .body li {
  position: relative;
  background-color: #f9faf1;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #fff;
  padding-left: 65px;
}

.sdgs-detail .flow-content .body li::after {
  display: block;
  content: "";
  background-image: url(../course/images/sdgs/ico_arrow_gray.png);
  width: 12px;
  height: 6px;
  position: absolute;
  left: 25px;
  bottom: -5px;
  z-index: 99;
}

.sdgs-detail .flow-content .body li:first-of-type::after,
.sdgs-detail .flow-content .body li:last-of-type::after {
  display: none;
}

.sdgs-detail .flow-content .body li .num {
  position: absolute;
  top: 50%;
  left: 27px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.sdgs-detail .flow-content .body p {
  font-size: 14px;
  margin-top: 25px;
}

.sdgs-detail .flow-detail {
  border: 1px solid #cccccc;
  padding: 25px;
  margin: 50px auto 30px;
}

.sdgs-detail .flow-detail li {
  position: relative;
  font-size: 14px;
  padding-left: 20px;
}

.sdgs-detail .flow-detail li::before {
  position: absolute;
  top: 11px;
  left: 7px;
  display: inline-block;
  content: "";
  background-image: url(../course/images/sdgs/ico_list.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 7px;
  height: 7px;
}

/* PC */
@media (min-width: 821px) {
  .sdgs-title .photo {
    position: absolute;
    top: -50px;
  }
  .sdgs-title .body {
    width: 550px;
    margin-left: auto;
    padding: 40px 100px 30px;
  }
}
/* SP */
@media (max-width: 820px) {
  #sdgs .breadcrumb {
    width: auto;
  }
  #sdgs .plan-sdgs .inner {
    width: 90%;
    padding-top: 30px;
  }
  .sdgs-title .photo {
    text-align: center;
    width: 90%;
    margin: auto;
  }
  .sdgs-title .photo span {
    margin: 10px auto 20px;
  }
  .sdgs-title .body {
    margin: auto;
    padding: 30px;
    width: 90%;
  }
  .sdgs-detail .flow-content .title {
    width: 20%;
  }
  .sdgs-detail .flow-content .body-wrap {
    width: 75%;
  }
}
@media (max-width: 769px) {
  #sdgs .plan-introduction > .lead {
    margin-top: 0;
  }
  .about-sdgs {
    display: block;
  }
  .about-sdgs .photo,
  .about-sdgs .body {
    width: 100%;
  }
  .about-sdgs .body {
    margin-top: 20px;
  }
  .sdgs-title {
    margin-top: 40px;
  }
  .sdgs-title .body h2 {
    font-size: 26px;
  }
  .sdgs-detail table {
    width: 100%;
    margin-top: 20px;
  }
  .sdgs-detail table th,
  .sdgs-detail table td {
    display: block;
    border-right: 0 !important;
    border-left: 0 !important;
  }
  .sdgs-detail table th {
    background-color: #f5f9dc;
  }
  .sdgs-detail table tr:last-of-type th {
    border-bottom: 2px solid #fff;
  }
  .site-content > .section.plan-sdgs .inner {
    padding-right: 0;
    padding-left: 0;
  }
  .sdgs-detail .only-pc {
    display: none;
  }
  .table-detail {
    display: block;
  }
  .table-detail .photo {
    text-align: center;
    margin-top: 20px;
  }
  .sdgs-detail .flow-content {
    display: block;
  }
  .sdgs-detail .flow-content .title,
  .sdgs-detail .flow-content .body-wrap,
  .sdgs-detail .flow-content .body {
    width: 100%;
  }
  .sdgs-detail .flow-content .body {
    margin-top: 20px;
  }
  .sdgs-detail .flow-content .scroll {
    overflow: scroll;
  }
  .sdgs-detail .flow-content .scroll .body {
    width: 660px;
    margin: 20px auto 0;
  }
  .sdgs-detail .flow-content .photo {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  .sdgs-detail .flow-content .photo img,
  .sdgs-detail .flow-content .photo img:first-of-type,
  .sdgs-detail .flow-content .photo.mt img:first-of-type {
    width: 49%;
    margin-top: 15px;
  }
}
.plan-sdgs-type {
  font-family: "MuseoModerno", cursive;
  color: #dff0c3;
  width: 100%;
  text-align: center;
  font-size: 4.875rem;
  line-height: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .plan-sdgs-type {
    z-index: 2;
    height: 80px;
  }
}
.plan-sdgs-type span {
  font-size: 1.125rem;
  color: #dff0c3;
  margin-right: 1.5rem;
}

/* -----------------------------------------------
  market
--------------------------------------------------*/
/* ---------- color --------- */
/* ---------- over --------- */
#market * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#market .site-content {
  -webkit-font-feature-settings: "pkna";
          font-feature-settings: "pkna";
}
#market .site-content > .inner, #market .site-content > .section > .inner {
  max-width: 1200px;
  padding: 3.75rem 0;
}
@media (max-width: 767px) {
  #market .site-content > .inner, #market .site-content > .section > .inner {
    padding: 1.5625rem 0;
  }
}

/* ---------- nav --------- */
.breadcrumb {
  width: 1200px;
}
@media (max-width: 767px) {
  .breadcrumb {
    padding: 0;
  }
}

.localnav-market {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #1852a4;
  padding: 12px 20px;
}
.localnav-market li {
  counter-increment: number;
  border-bottom: 1px solid #eee;
}
.localnav-market li:last-child {
  border-bottom: 0;
}
.localnav-market a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #000000;
  padding: 10px 0 10px 50px;
}
@media (max-width: 767px) {
  .localnav-market a {
    padding-left: 40px;
  }
}
.localnav-market a::before {
  content: counter(number);
  font-weight: bold;
  background: rgba(24, 82, 164, 0.1);
  color: #1852a4;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  text-align: center;
  position: absolute;
  left: 0;
}
.localnav-market a:hover {
  font-weight: bold;
  color: #1852a4;
}
.localnav-market a:hover::before {
  background: #1852a4;
  color: #fff;
}

/* ---------- section --------- */
.plan-market {
  position: relative;
  counter-increment: number;
  margin: 8rem 0 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .plan-market {
    margin-top: 4rem;
  }
}
.plan-market::before {
  content: "";
  display: block;
  line-height: 1;
  position: absolute;
}
.plan-market::before {
  background: #1852a4;
  height: 150px;
  width: 100%;
  overflow: hidden;
  color: #f4de26;
}
.plan-market .market-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding-top: 3rem;
}
@media (max-width: 767px) {
  .plan-market .market-title {
    padding-top: 5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.plan-market .market-title h2 {
  color: #1852a4;
  font-size: 2.3rem;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .plan-market .market-title h2 {
    font-size: 1.6rem;
  }
}
.plan-market .market-title h2 span {
  display: block;
  font-size: 1.2rem;
  padding: 1rem 0 0;
}
.plan-market .market-title .body {
  padding-top: 9.5rem;
  -webkit-flex-basis: 40%;
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
}
@media (max-width: 767px) {
  .plan-market .market-title .body {
    width: 90%;
    padding-top: 2rem;
    margin: 0 auto;
  }
}
.plan-market .market-title .body p {
  text-align: justify;
  margin-top: 2rem;
}
.plan-market .market-title .photo {
  -webkit-flex-basis: 60%;
      -ms-flex-preferred-size: 60%;
          flex-basis: 60%;
  padding-left: 3rem;
}

.card-market {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.card-market dl {
  width: calc((100% - 7rem) / 3);
}
@media (max-width: 767px) {
  .card-market dl {
    width: 100%;
  }
}
.card-market dl:not(:last-child) {
  margin-right: 3.5rem;
}
@media (max-width: 767px) {
  .card-market dl:not(:last-child) {
    margin: 0 0 2rem;
  }
}
.card-market dt {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}
.card-market dt img {
  margin-bottom: 1rem;
  width: 100%;
}
.card-market dd {
  text-align: justify;
}

.info-market {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0 !important;
}

.table-market {
  -webkit-flex-basis: 58%;
      -ms-flex-preferred-size: 58%;
          flex-basis: 58%;
}
.table-market table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #1852a4;
}
.table-market table th, .table-market table td {
  border-bottom: 1px solid #1852a4;
  padding: 0.7rem 1rem;
}
@media (max-width: 767px) {
  .table-market table th, .table-market table td {
    display: block;
    width: 100%;
  }
}
.table-market table th {
  background: rgba(24, 82, 164, 0.1);
  text-align: left;
  width: 130px;
}
@media (max-width: 767px) {
  .table-market table th {
    border-bottom: 0;
    width: 100%;
  }
}
.table-market table .table-detail {
  margin-top: 0;
}

.time-market {
  -webkit-flex-basis: 42%;
      -ms-flex-preferred-size: 42%;
          flex-basis: 42%;
  margin-left: 5rem;
}
@media (max-width: 767px) {
  .time-market {
    margin: 1.5625rem 0 0;
  }
}
.time-market h3 {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
  font-size: 1.6rem;
  text-align: center;
}
.time-market ol {
  position: relative;
  margin-top: 1rem;
}
.time-market ol li {
  background: rgba(24, 82, 164, 0.05);
  padding: 1.25rem;
  margin-bottom: 0.625rem;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.time-market ol li::before {
  content: "●";
  color: #1852a4;
  font-size: 0.75rem;
  font-size: 12px;
  margin-right: 1.5rem;
  z-index: 2;
}
.time-market ol li:first-child::after, .time-market ol li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  width: 2rem;
  height: 50%;
  background: #F3F6FA;
  z-index: 1;
}
.time-market ol li:first-child::after {
  top: 0;
}
.time-market ol li:last-child::after {
  bottom: 0;
}
.time-market ol::before {
  content: "";
  width: 2px;
  height: 100%;
  background: #1852a4;
  position: absolute;
  left: 1.57rem;
  top: 0;
  z-index: 1;
}

.btn-market {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 0 !important;
}
.btn-market li {
  text-align: center;
}
.btn-market li a {
  display: block;
  background: #f4de26;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  width: 400px;
  padding: 1.5rem 0;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .btn-market li a {
    margin: 0 0 1rem !important;
    width: 100%;
  }
}
.btn-market li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #dcc60b;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-market li a:hover::before {
  width: 100%;
}
.btn-market li a span {
  position: relative;
  display: block;
}
.btn-market li a span::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  right: 2rem;
  top: 5px;
}
.btn-market li:nth-child(odd) a {
  margin-right: 1rem;
}
.btn-market li:nth-child(even) a {
  background: #f8cd49;
  margin-left: 1rem;
}
.btn-market li:nth-child(even) a::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../course/images/market/icon_window.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  right: 8px;
  top: 5px;
}

@media (max-width: 767px) {
  .breadcrumb,
  .localnav-market,
  .card-market,
  .info-market,
  .btn-market {
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
}
.plan-market-type {
  font-family: "MuseoModerno", cursive;
  color: #fff;
  position: absolute;
  height: 150px;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 1200px;
  width: 100%;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 4.875rem;
}
@media (max-width: 767px) {
  .plan-market-type {
    z-index: 2;
    height: 80px;
    padding: 0 1rem;
  }
}
.plan-market-type span {
  font-size: 1.125rem;
  color: #f4de26;
  margin-right: 1.5rem;
}

/* -----------------------------------------------
  megijima
--------------------------------------------------*/
/* ---------- color --------- */
/* ---------- over --------- */
#megijima-course * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#megijima-course .site-content {
  -webkit-font-feature-settings: "pkna";
          font-feature-settings: "pkna";
}
#megijima-course .site-content > .inner, #megijima-course .site-content > .section > .inner {
  max-width: 1200px;
  padding: 3.75rem 0 1rem;
}
@media (max-width: 767px) {
  #megijima-course .site-content > .inner, #megijima-course .site-content > .section > .inner {
    padding: 1.5625rem 0;
  }
}
#megijima-course .category-title {
  padding-top: 6rem;
  margin-bottom: 3.4rem;
}
@media (max-width: 767px) {
  #megijima-course .category-title {
    padding-top: 3rem;
    margin-bottom: 1.5rem;
  }
}
#megijima-course .category-title .en {
  letter-spacing: 0.4rem;
  font-size: 2rem;
}
#megijima-course .category-title .ja {
  font-size: 1rem;
}
#megijima-course .pc {
  display: block;
}
@media (max-width: 767px) {
  #megijima-course .pc {
    display: none;
  }
}
#megijima-course .sp {
  display: none;
}
@media (max-width: 767px) {
  #megijima-course .sp {
    display: block;
  }
}

/* ---------- nav --------- */
.breadcrumb {
  width: 1200px;
}
@media (max-width: 767px) {
  .breadcrumb {
    padding: 0;
  }
}

.localnav-megijima {
  max-width: 1200px;
  margin: 40px auto;
  border: 1px solid #1852a4;
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.localnav-megijima li {
  counter-increment: number;
  border-bottom: 1px solid #eee;
}
.localnav-megijima li:last-child {
  border-bottom: 0;
}
.localnav-megijima a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #000000;
  padding: 10px 0 10px 50px;
}
@media (max-width: 767px) {
  .localnav-megijima a {
    padding-left: 40px;
  }
}
.localnav-megijima a::before {
  content: counter(number);
  font-weight: bold;
  background: #f3f6ee;
  color: #1852a4;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  text-align: center;
  position: absolute;
  left: 0;
}
.localnav-megijima a:hover {
  font-weight: bold;
  color: #1852a4;
}
.localnav-megijima a:hover::before {
  background: #1852a4;
  color: #fff;
}

/* ---------- section --------- */
.intro-megijima {
  max-width: 1000px;
  margin: auto;
}
@media (max-width: 767px) {
  .intro-megijima {
    width: 90%;
  }
}
.intro-megijima-copy {
  text-align: center;
  color: #1852a4;
  font-weight: bold;
}
.intro-megijima-point {
  margin-top: 3rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  .intro-megijima-point {
    display: block;
  }
}
.intro-megijima-img {
  text-align: center;
}
@media (max-width: 767px) {
  .intro-megijima-img {
    padding: 1rem 0;
  }
}
.intro-megijima-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 78%;
}
@media (max-width: 767px) {
  .intro-megijima-text {
    width: 100%;
    display: block;
  }
}
.intro-megijima-text li {
  background-color: #e7edf6;
  padding: 1.15rem 0 1.15rem 3.5rem;
  border-radius: 10px;
  color: #1852a4;
  font-weight: bold;
  position: relative;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .intro-megijima-text li {
    margin-bottom: 1rem;
    padding: 1rem 1rem 1rem 1.8rem;
  }
}
.intro-megijima-text li::before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background-image: url(../course/images/megijima/circle.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 32px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (max-width: 767px) {
  .intro-megijima-text li::before {
    left: 10px;
  }
}

.plan-megijima {
  position: relative;
  counter-increment: number;
  margin: 2.5rem 0 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .plan-megijima {
    margin-top: 4rem;
  }
}
.plan-megijima::before {
  content: "";
  display: block;
  line-height: 1;
  position: absolute;
}
.plan-megijima::before {
  background: #1852a4;
  height: 150px;
  width: 100%;
  overflow: hidden;
  color: #f4de26;
}
.plan-megijima-type {
  font-family: "MuseoModerno", cursive;
  color: #fff;
  position: absolute;
  height: 150px;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 1200px;
  width: 100%;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 4.875rem;
}
@media (max-width: 767px) {
  .plan-megijima-type {
    z-index: 2;
    height: 80px;
    padding: 0 1rem;
  }
}
.plan-megijima-type span {
  font-size: 1.125rem;
  color: #f4de26;
  margin-right: 1.5rem;
}
.plan-megijima .megijima-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 3rem 0 0;
  height: 46.875rem;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    height: 34rem;
  }
}
.plan-megijima .megijima-title.col2 {
  padding: 3rem 0 0;
}
.plan-megijima .megijima-title.col2 .body {
  padding-top: 15rem;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title.col2 .body {
    padding-top: 2rem;
  }
}
.plan-megijima .megijima-title.col2 .body .label {
  margin: 1rem 0 1.5rem;
}
.plan-megijima .megijima-title .body {
  padding-top: 19.5rem;
  -webkit-flex-basis: 40%;
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
  z-index: 2;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title .body {
    width: 90%;
    padding-top: 2rem;
    margin: 0 auto;
  }
}
.plan-megijima .megijima-title .body h2 {
  color: #1852a4;
  line-height: 1;
}
.plan-megijima .megijima-title .body h2 span {
  display: inline-block;
  font-size: 2.5rem;
  padding: 0.5rem 1rem 0.5rem 0;
  background-color: #fff;
  font-weight: bold;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  display: inline;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title .body h2 span {
    font-size: 2rem;
  }
}
.plan-megijima .megijima-title .body .label {
  margin: 0.3rem 0 1.5rem;
}
.plan-megijima .megijima-title .body .label span {
  font-weight: bold;
  color: #fff;
  background-color: #1852a4;
  padding: 0.6rem;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  display: inline;
  line-height: 2.5;
}
.plan-megijima .megijima-title .body .content {
  width: 58%;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title .body .content {
    width: 100%;
  }
}
.plan-megijima .megijima-title .body .content h3 {
  font-family: "MuseoModerno", cursive;
  color: #1852a4;
  letter-spacing: 4px;
  margin-top: 1rem;
}
.plan-megijima .megijima-title .body .point {
  counter-reset: my-counter;
  font-weight: bold;
}
.plan-megijima .megijima-title .body .point li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 3px;
}
.plan-megijima .megijima-title .body .point li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  font-family: "MuseoModerno", cursive;
  background-color: #1852a4;
  color: #fff;
  font-weight: normal;
  border: 1px solid;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 22px;
  width: 22px;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 4px;
  left: 0;
}
.plan-megijima .megijima-title .photo {
  padding-left: 3rem;
  position: absolute;
  top: 5rem;
  right: 0;
  width: 79%;
  z-index: 1;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title .photo {
    width: 100%;
  }
}
.plan-megijima .megijima-title .photo img {
  width: 100%;
}
.plan-megijima .megijima-title .photo.slide-megijima {
  padding-bottom: 0;
}
.plan-megijima .megijima-title .photo .megijima-slide {
  overflow: hidden;
}
.plan-megijima .megijima-title .photo .megijima-slide .swiper-button-prev,
.plan-megijima .megijima-title .photo .megijima-slide .swiper-button-next {
  bottom: 10px;
}
@media (max-width: 767px) {
  .plan-megijima .megijima-title .photo .megijima-slide .swiper-button-prev,
  .plan-megijima .megijima-title .photo .megijima-slide .swiper-button-next {
    display: none;
  }
}
.plan-megijima .megijima-title .photo .megijima-slide .swiper-button-next {
  right: 10px;
}
.plan-megijima .btn-megijima {
  margin-top: 3rem;
}

.info-megijima {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 0 !important;
}
.info-megijima::after {
  display: none !important;
}

.table-megijima {
  width: 45%;
}
@media (max-width: 767px) {
  .table-megijima {
    width: 100%;
    margin-top: 1rem;
  }
}
.table-megijima table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #fff;
}
.table-megijima table th, .table-megijima table td {
  border-bottom: 1px solid #fff;
  background: #f7f7f7;
  padding: 0.9rem 1.2rem;
}
@media (max-width: 767px) {
  .table-megijima table th, .table-megijima table td {
    display: block;
    width: 100%;
  }
}
.table-megijima table th {
  text-align: left;
  width: 145px;
  vertical-align: top;
  border-right: 1px solid #fff;
}
@media (max-width: 767px) {
  .table-megijima table th {
    border-bottom: 0;
    width: 100%;
  }
}
.table-megijima table .table-detail {
  margin-top: 0;
}
.table-megijima li {
  position: relative;
  padding-left: 0.6rem;
  line-height: 2.3;
}
.table-megijima li::before {
  display: block;
  content: "・";
  position: absolute;
  top: 0;
  left: -16px;
  padding-left: 0.6rem;
}

.slide-megijima {
  position: relative;
  width: 50%;
  overflow-x: hidden;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .slide-megijima {
    width: 100%;
    margin-top: 2rem;
  }
}
.slide-megijima .swiper-button-next, .slide-megijima .swiper-button-prev {
  top: unset;
  bottom: 0;
  background-color: #1852a4;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 1;
}
.slide-megijima .swiper-button-next::after, .slide-megijima .swiper-button-prev::after {
  position: absolute;
  display: block;
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (min-width: 769px) {
  .slide-megijima .swiper-button-next:hover, .slide-megijima .swiper-button-prev:hover {
    opacity: 0.7;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
.slide-megijima .swiper-button-next {
  right: 0;
}
.slide-megijima .swiper-button-next::after {
  background-image: url(../images/arrow_a_white.svg);
  top: 33%;
}
.slide-megijima .swiper-button-prev {
  right: 77px;
  left: unset;
}
.slide-megijima .swiper-button-prev::after {
  background-image: url(../images/arrow_a_white.svg);
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  top: 30%;
}

.time-megijima {
  -webkit-flex-basis: 42%;
      -ms-flex-preferred-size: 42%;
          flex-basis: 42%;
  margin-left: 5rem;
}
@media (max-width: 767px) {
  .time-megijima {
    margin: 1.5625rem 0 0;
  }
}
.time-megijima h3 {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
  font-size: 1.6rem;
  text-align: center;
}
.time-megijima ol {
  position: relative;
  margin-top: 1rem;
}
.time-megijima ol li {
  background: rgba(24, 82, 164, 0.05);
  padding: 1.25rem;
  margin-bottom: 0.625rem;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.time-megijima ol li::before {
  content: "●";
  color: #1852a4;
  font-size: 0.75rem;
  font-size: 12px;
  margin-right: 1.5rem;
  z-index: 2;
}
.time-megijima ol li:first-child::after, .time-megijima ol li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  width: 2rem;
  height: 50%;
  background: #F3F6FA;
  z-index: 1;
}
.time-megijima ol li:first-child::after {
  top: 0;
}
.time-megijima ol li:last-child::after {
  bottom: 0;
}
.time-megijima ol::before {
  content: "";
  width: 2px;
  height: 100%;
  background: #1852a4;
  position: absolute;
  left: 1.57rem;
  top: 0;
  z-index: 1;
}

.btn-megijima {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 0 !important;
}
.btn-megijima li {
  text-align: center;
}
.btn-megijima li a {
  display: block;
  background: #f4de26;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  width: 400px;
  padding: 1.5rem 0;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .btn-megijima li a {
    margin: 0 0 1rem !important;
    width: 100%;
  }
}
.btn-megijima li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #dcc60b;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-megijima li a:hover::before {
  width: 100%;
}
.btn-megijima li a span {
  position: relative;
  display: block;
}
.btn-megijima li a span::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_a.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  right: 2rem;
  top: 5px;
}
.btn-megijima li:nth-child(odd) a {
  margin-right: 1rem;
}
.btn-megijima li:nth-child(even) a {
  background: #f8cd49;
  margin-left: 1rem;
}
.btn-megijima li:nth-child(even) a::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../course/images/megijima/icon_window.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  position: absolute;
  right: 8px;
  top: 5px;
}

.schedule-megijima {
  margin-top: 2.5rem;
}
.schedule-megijima h3 {
  background: #1852a4;
  height: 150px;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
}
.schedule-megijima h3 .en {
  font-family: "MuseoModerno", cursive;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1;
  margin-top: 1rem;
}
.schedule-megijima p {
  text-align: center;
  margin: 3rem auto 6rem;
}
@media (max-width: 767px) {
  .schedule-megijima p {
    margin: 2rem auto 3rem;
  }
}
.schedule-megijima .note {
  background: rgba(244, 222, 38, 0.05);
  max-width: 800px;
  padding: 1.5rem;
}

@media (max-width: 767px) {
  .breadcrumb,
  .localnav-megijima,
  .card-megijima,
  .info-megijima,
  .btn-megijima {
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
}
/* -----------------------------------------------
  nighttour
--------------------------------------------------*/
/* ---------- color --------- */
/* ---------- over --------- */
#nighttour * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#nighttour .course-header .mv {
  padding-top: 11rem;
}
@media (max-width: 767px) {
  #nighttour .course-header .mv {
    padding-top: 7rem;
  }
}
#nighttour .site-content {
  -webkit-font-feature-settings: "pkna";
          font-feature-settings: "pkna";
}
#nighttour .site-content > .inner, #nighttour .site-content > .section > .inner {
  max-width: 1200px;
  padding: 0 0 3.75rem;
}
@media (max-width: 767px) {
  #nighttour .site-content > .inner, #nighttour .site-content > .section > .inner {
    padding: 0 0 1.5625rem;
  }
}

/* ---------- section --------- */
@media (max-width: 767px) {
  .plan-nighttour {
    width: 90%;
    margin: auto;
  }
}
.plan-nighttour .course-button {
  padding: 2rem;
  width: 50%;
  margin: 4rem auto;
}
@media (max-width: 767px) {
  .plan-nighttour .course-button {
    padding: 1rem;
    width: 100%;
    margin: 2rem auto;
  }
}
.plan-nighttour .course-button span {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .plan-nighttour .course-button span {
    font-size: 1rem;
  }
}
.plan-nighttour-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  .plan-nighttour-main {
    display: block;
  }
}
.plan-nighttour-text {
  width: 38%;
  padding-top: 4.45rem;
}
@media (max-width: 767px) {
  .plan-nighttour-text {
    width: 100%;
    padding-top: 1rem;
    margin-bottom: 1rem;
  }
}
.plan-nighttour-text p {
  margin-top: 0.875rem;
  line-height: 1.8;
}
.plan-nighttour-h2 {
  color: #c8b049;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 1.875rem;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .plan-nighttour-h2 {
    font-size: 1.5rem;
  }
}
.plan-nighttour-h2::before {
  display: block;
  content: "";
  width: 70px;
  height: 20px;
  background-image: url(../course/images/nighttour/icon_title.png);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0 auto 1.5rem;
}
@media (max-width: 767px) {
  .plan-nighttour-h2::before {
    margin: 0 auto 1rem;
  }
}
.plan-nighttour-img {
  width: 58%;
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .plan-nighttour-img {
    width: 100%;
  }
}
.plan-nighttour-img .swiper-button-next, .plan-nighttour-img .swiper-button-prev {
  background-color: #fff;
  width: 70px;
  height: 70px;
  border-radius: 100px;
  top: 47%;
}
.plan-nighttour-img .swiper-button-next::after, .plan-nighttour-img .swiper-button-prev::after {
  position: absolute;
  display: block;
  content: "";
  width: 25px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (min-width: 769px) {
  .plan-nighttour-img .swiper-button-next:hover, .plan-nighttour-img .swiper-button-prev:hover {
    opacity: 0.7;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
.plan-nighttour-img .swiper-button-next {
  right: -36px;
}
.plan-nighttour-img .swiper-button-next::after {
  background-image: url(../course/images/nighttour/arrow_next.png);
  left: 9px;
}
.plan-nighttour-img .swiper-button-prev {
  left: -36px;
}
.plan-nighttour-img .swiper-button-prev::after {
  background-image: url(../course/images/nighttour/arrow_prev.png);
  right: 9px;
}
.plan-nighttour-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 5rem;
}
@media (max-width: 767px) {
  .plan-nighttour-info {
    display: block;
    margin-top: 2rem;
  }
}
.plan-nighttour-table {
  width: 50%;
}
@media (max-width: 767px) {
  .plan-nighttour-table {
    width: 100%;
  }
}
.plan-nighttour-table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #1852a4;
}
@media (max-width: 767px) {
  .plan-nighttour-table table colgroup {
    display: none;
  }
}
.plan-nighttour-table table th, .plan-nighttour-table table td {
  border-bottom: 1px solid #1852a4;
  padding: 0.725rem 1rem;
}
@media (max-width: 767px) {
  .plan-nighttour-table table th, .plan-nighttour-table table td {
    display: block;
    width: 100%;
  }
}
.plan-nighttour-table table th {
  background: rgba(24, 82, 164, 0.1);
  text-align: left;
  width: 138px;
  padding: 0.7rem 1.2rem;
  vertical-align: top;
}
@media (max-width: 767px) {
  .plan-nighttour-table table th {
    border-bottom: 0;
    width: 100%;
  }
}
.plan-nighttour-table table .table-detail {
  margin-top: 0;
}
.plan-nighttour-table h2 {
  margin-top: 30px;
  text-align: center;
  color: #c8b049;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 1.5rem;
  text-align: center;
}
.plan-nighttour-schedule {
  width: 44%;
}
@media (max-width: 767px) {
  .plan-nighttour-schedule {
    width: 100%;
    margin: 3rem 0 0;
  }
}
.plan-nighttour-schedule .plan-nighttour-h3 {
  color: #082651;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  letter-spacing: 1px;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
}
.plan-nighttour-schedule ol {
  position: relative;
  margin-top: 1.7rem;
  margin-top: 0;
  /*&::before {
    content: '';
    width: 2px;
    height: 100%;
    background: $nighttour_gold;
    position: absolute;
    left: 9.125rem;
    top: 0;
    z-index: 1;
  }*/
}
@media (max-width: 767px) {
  .plan-nighttour-schedule ol {
    margin-top: 20px;
  }
}
.plan-nighttour-schedule ol li {
  background: rgba(24, 82, 164, 0.05);
  padding: 0.875rem 1.25rem;
  margin-bottom: 0.625rem;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /*&:first-child,
  &:last-child {
    &::after {
      content: '';
      position: absolute;
      left: 9.125rem;
      width: 1rem;
      height: 50%;
      background: #F3F6FA;
      z-index: 1;
    }
  }
  &:first-child::after {
    top: 0;
  }
  &:last-child::after {
    bottom: 0;
  }*/
}
@media (max-width: 767px) {
  .plan-nighttour-schedule ol li {
    display: block;
  }
}
.plan-nighttour-schedule ol li .plan-nighttour-time {
  position: relative;
  display: inline-block;
  width: 160px;
  padding-right: 1rem;
  font-weight: bold;
}
@media (max-width: 767px) {
  .plan-nighttour-schedule ol li .plan-nighttour-time {
    width: 100%;
  }
}
.plan-nighttour-schedule ol li .plan-nighttour-time::after {
  display: block;
  content: "";
  width: 13px;
  height: 16px;
  /* background-image: url(../course/images/nighttour/star.png);
  background-repeat: no-repeat;
  background-size: 100%;*/
  z-index: 2;
  position: absolute;
  top: 10px;
  right: 26px;
}
@media (max-width: 767px) {
  .plan-nighttour-schedule ol li .plan-nighttour-time::after {
    right: 10%;
  }
}
.plan-nighttour-schedule ol li .plan-nighttour-content {
  width: 68%;
}
.plan-nighttour-bus {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  .plan-nighttour-bus {
    display: block;
  }
}
.plan-nighttour-busitem {
  width: 49%;
}
@media (max-width: 767px) {
  .plan-nighttour-busitem {
    width: 100%;
  }
}
.plan-nighttour-busitem h3 {
  margin-top: 20px;
  font-size: 1.25rem;
}
@media (max-width: 767px) {
  .plan-nighttour-busitem:first-of-type h3 {
    margin-top: 0;
  }
}
.plan-nighttour-caution {
  border: 1px solid #082651;
  color: #082651;
  margin-top: 4.75rem;
  padding: 2.6rem 3rem;
}
@media (max-width: 767px) {
  .plan-nighttour-caution {
    padding: 1.5rem;
    margin: 2.75rem 0 0;
    width: 100%;
  }
}
.plan-nighttour-caution-h3 {
  font-size: 1.125rem;
}
.plan-nighttour-caution ul {
  font-size: 0.875rem;
  line-height: 2.1;
}
.plan-nighttour-qr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .plan-nighttour-qr {
    display: block;
  }
}
.plan-nighttour-qr .center {
  text-align: center;
}
.plan-nighttour-qr img {
  width: 150px;
  margin-left: 30px;
}
@media (max-width: 767px) {
  .plan-nighttour-qr img {
    margin-left: 0;
  }
}

/* -----------------------------------------------
  fish
-------------------------------------------------- */
#fish .breadcrumb {
  width: 1200px;
  margin: 1.4rem auto 2rem;
  line-height: 1.7;
}
#fish .plan-introduction > .lead {
  font-size: 18px;
  margin-top: 0;
}
#fish .plan-fish .inner {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  padding: 3.75rem 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#fish .list li {
  position: relative;
  padding-left: 20px;
}
#fish .list li::before {
  position: absolute;
  top: 11px;
  left: 7px;
  display: inline-block;
  content: "";
  background-image: url(../course/images/fish/ico_list.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 7px;
  height: 7px;
}
#fish .table-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 20px;
}
#fish .table-detail .photo {
  margin-top: 5px;
}
#fish .table-detail li {
  font-size: 14px;
  text-indent: -14px;
  margin-left: 14px;
  line-height: 1.9;
}
#fish .highlight-heading.-blue > span {
  color: #fff;
  background-color: #3677d0;
  margin-bottom: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.plan-fish {
  margin-top: -20px;
  padding-top: 20px;
}

.about-fish {
  max-width: 1200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  background-color: #fdfdfd;
  border: 1px solid #edf5ff;
  padding: 25px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 32px;
}

.about-fish .photo {
  width: 16%;
}

.about-fish .body {
  width: 82%;
}

.about-fish .body p {
  font-size: 14px;
  text-align: left;
  line-height: 2;
}

.localnav-fish {
  max-width: 1000px;
  margin: 50px auto 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.localnav-fish a {
  width: 50%;
  height: 60px;
  background-color: #edf5ff;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}

.localnav-fish a::before {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_b.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.localnav-fish a:first-of-type {
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
  border-right: 1px solid #fff;
}

.localnav-fish a:last-of-type {
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
}

.line-fish {
  background-image: url(../course/images/fish/bg_line.png);
  background-repeat: repeat-x;
  height: 20px;
}

.fish-title {
  position: relative;
  max-width: 1200px;
  margin: 94px auto 0;
}
@media (min-width: 769px) {
  .fish-title {
    min-height: 380px;
  }
}

.fish-title .photo span {
  font-size: 18px;
  font-family: "MuseoModerno", cursive;
  color: #3677d0;
  display: block;
  margin-top: 30px;
  text-align: center;
}

.fish-title .body {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #edf5ff;
}

.fish-title .body h2 {
  color: #3677d0;
  font-size: 36px;
  text-align: center;
  line-height: 1.5;
}

.fish-title .body h2::after {
  display: block;
  content: "";
  width: 170px;
  height: 3px;
  background-image: url(../course/images/fish/img_h2.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 25px auto 20px;
}

.fish-title .body h2 .small {
  font-size: 18px;
  display: block;
}

.fish-title .body p {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  line-height: 1.9;
}

.fish-detail table {
  border: 3px solid #3677d0;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 5px auto 0;
  width: 100%;
}

.fish-detail table th,
.fish-detail table td {
  background-color: #edf5ff;
  border-bottom: 2px solid #fff;
  padding: 15px 25px;
  vertical-align: top;
  list-style: 1.9;
}

.fish-detail table th {
  text-align: left;
}

.fish-detail table td {
  border-right: 2px solid #fff;
}

.fish-detail table td:last-child {
  border-right: 0;
}

.fish-detail table tr th:last-of-type {
  border-left: 2px solid #fff;
}

.fish-detail table tr:last-of-type th,
.fish-detail table tr:last-of-type td {
  border-bottom: 0;
}

.fish-point {
  text-align: center;
  margin: 0 auto 40px;
}
.fish-point.left {
  text-align: left;
}
.fish-point h3 {
  font-size: 22px;
  color: #3677d0;
}
.fish-point ul {
  display: inline-block;
}
.fish-point ul li {
  text-align: left;
}

.fish-detail .flow-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 50px;
}

.fish-detail .flow-content .photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.fish-detail .flow-content .photo img {
  margin-top: 30px;
}

.fish-detail .flow-content .photo img:first-of-type {
  margin-top: 15px;
}

.fish-detail .flow-content .photo.mt img:first-of-type {
  margin-top: 40px;
}

.fish-detail .flow-content .body-wrap {
  max-width: 700px;
  width: 100%;
}

.fish-detail .flow-content .body {
  position: relative;
  margin-top: 0.35em;
}

.fish-detail .flow-content .body .time {
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.fish-detail .flow-content .body li {
  position: relative;
  background-color: #edf5ff;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #fff;
  padding-left: 20px;
}
.fish-detail .flow-content .body li span {
  padding-right: 20px;
  font-weight: bold;
}
.fish-detail .flow-content .body li::after {
  display: block;
  content: "";
  background-image: url(../course/images/fishermans/ico_arrow_gray.png);
  width: 12px;
  height: 6px;
  position: absolute;
  left: 34px;
  bottom: -5px;
  z-index: 99;
}
.fish-detail .flow-content .body li:last-of-type::after {
  display: none;
}

.fish-detail .flow-content .body p {
  font-size: 14px;
  margin-top: 25px;
}

.fish-detail .flow-detail {
  border: 1px solid #cccccc;
  padding: 25px;
  margin: 50px auto 30px;
}
.fish-detail .flow-detail li {
  font-size: 14px;
}

/* PC */
@media (min-width: 821px) {
  .fish-title .photo {
    position: absolute;
    top: -50px;
  }
  .fish-title .body {
    width: 550px;
    margin-left: auto;
    padding: 40px 100px 30px;
  }
}
@media (min-width: 769px) {
  .localnav-fish a:hover::before {
    display: inline-block;
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/arrow_b_white.svg) no-repeat 0 0;
    background-size: 1.25rem 1.25rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .localnav-fish a:hover {
    background-color: #3677d0;
    color: #fff;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
/* SP */
@media (max-width: 820px) {
  #fish .breadcrumb {
    width: auto;
  }
  #fish .plan-fish .inner {
    width: 90%;
    padding: 30px 0 0;
  }
  .localnav-fish a {
    height: auto;
    line-height: 1.6;
    padding: 10px 0;
  }
  .fish-title .photo {
    text-align: center;
    width: 90%;
    margin: auto;
  }
  .fish-title .photo span {
    margin: 10px auto 20px;
  }
  .fish-title .body {
    margin: auto;
    padding: 30px;
    width: 90%;
  }
  .fish-detail .flow-content .title {
    width: 20%;
  }
  .fish-detail .flow-content .body-wrap {
    width: 75%;
  }
}
@media (max-width: 769px) {
  colgroup {
    display: none;
  }
  #fish .plan-introduction > .lead {
    margin-top: 0;
  }
  #fish .table-detail {
    display: block;
    margin-bottom: 20px;
  }
  #fish .table-detail .photo {
    text-align: center;
    margin-top: 20px;
  }
  .about-fish {
    display: block;
  }
  .about-fish .photo,
  .about-fish .body {
    width: 100%;
  }
  .about-fish .body {
    margin-top: 20px;
  }
  .localnav-fish {
    display: block;
  }
  .localnav-fish a:first-of-type,
  .localnav-fish a:last-of-type {
    border-radius: 200px;
    margin-bottom: 10px;
    text-align: center;
    border: 0;
    width: 90%;
    margin: 0 auto 20px;
  }
  .fish-title {
    margin-top: 40px;
  }
  .fish-title .body h2 {
    font-size: 26px;
  }
  .fish-detail table {
    width: 100%;
    margin-top: 20px;
  }
  .fish-detail table th,
  .fish-detail table td {
    display: block;
    border-right: 0 !important;
    border-left: 0 !important;
  }
  .fish-detail table th {
    background-color: #ddeafb;
  }
  .fish-detail table tr:last-of-type th {
    border-bottom: 2px solid #fff;
  }
  .site-content > .section.plan-fish .inner {
    padding-right: 0;
    padding-left: 0;
  }
  .fish-detail .only-pc {
    display: none;
  }
  .fish-detail .flow-content {
    display: block;
  }
  .fish-detail .flow-content .title,
  .fish-detail .flow-content .body-wrap,
  .fish-detail .flow-content .body {
    width: 100%;
  }
  .fish-detail .flow-content .body {
    margin-top: 20px;
  }
  .fish-detail .flow-content .scroll {
    overflow: scroll;
  }
  .fish-detail .flow-content .scroll .body {
    width: 660px;
    margin: 20px auto 0;
  }
  .fish-detail .flow-content .photo {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  .fish-detail .flow-content .photo img,
  .fish-detail .flow-content .photo img:first-of-type,
  .fish-detail .flow-content .photo.mt img:first-of-type {
    width: 49%;
    margin-top: 15px;
  }
}
/* -----------------------------------------------
  fishermans
-------------------------------------------------- */
#fishermans .breadcrumb {
  width: 1200px;
  margin: 1.4rem auto 2rem;
  line-height: 1.7;
}
#fishermans .plan-introduction > .lead {
  font-size: 18px;
  margin-top: 0;
}
#fishermans .plan-fishermans .inner {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  padding: 3.75rem 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#fishermans .list li {
  position: relative;
  padding-left: 20px;
}
#fishermans .list li::before {
  position: absolute;
  top: 11px;
  left: 7px;
  display: inline-block;
  content: "";
  background-image: url(../course/images/fishermans/ico_list.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 7px;
  height: 7px;
}
#fishermans .table-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 20px;
}
#fishermans .table-detail .photo {
  margin-top: 5px;
}
#fishermans .table-detail li {
  font-size: 14px;
  text-indent: -14px;
  margin-left: 14px;
  line-height: 1.9;
}
#fishermans .highlight-heading.-blue > span {
  color: #fff;
  background-color: #3677d0;
  margin-bottom: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.plan-fishermans {
  margin-top: -20px;
  padding-top: 20px;
}

.about-fishermans {
  max-width: 1200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  background-color: #fdfdfd;
  border: 1px solid #edf5ff;
  padding: 25px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 32px;
}

.about-fishermans .photo {
  width: 16%;
}

.about-fishermans .body {
  width: 82%;
}

.about-fishermans .body p {
  font-size: 14px;
  text-align: left;
  line-height: 2;
}

.localnav-fishermans {
  max-width: 1000px;
  margin: 50px auto 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.localnav-fishermans a {
  width: 50%;
  height: 60px;
  background-color: #edf5ff;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}

.localnav-fishermans a::before {
  display: inline-block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/arrow_b.svg) no-repeat 0 0;
  background-size: 1.25rem 1.25rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.localnav-fishermans a:first-of-type {
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
  border-right: 1px solid #fff;
}

.localnav-fishermans a:last-of-type {
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
}

.line-fishermans {
  background-image: url(../course/images/fishermans/bg_line.png);
  background-repeat: repeat-x;
  height: 20px;
}

.fishermans-title {
  position: relative;
  max-width: 1200px;
  margin: 94px auto 0;
}
@media (min-width: 769px) {
  .fishermans-title {
    min-height: 380px;
  }
}

.fishermans-title .photo span {
  font-size: 18px;
  font-family: "MuseoModerno", cursive;
  color: #3677d0;
  display: block;
  margin-top: 30px;
  text-align: center;
}

.fishermans-title .body {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #edf5ff;
}

.fishermans-title .body h2 {
  color: #3677d0;
  font-size: 36px;
  text-align: center;
  line-height: 1.5;
}

.fishermans-title .body h2::after {
  display: block;
  content: "";
  width: 170px;
  height: 3px;
  background-image: url(../course/images/fishermans/img_h2.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 25px auto 20px;
}

.fishermans-title .body h2 .small {
  font-size: 18px;
  display: block;
}

.fishermans-title .body p {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  line-height: 1.9;
}

.fishermans-detail table {
  border: 3px solid #3677d0;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 5px auto 0;
  width: 100%;
}

.fishermans-detail table th,
.fishermans-detail table td {
  background-color: #edf5ff;
  border-bottom: 2px solid #fff;
  padding: 15px 25px;
  vertical-align: top;
  list-style: 1.9;
}

.fishermans-detail table th {
  text-align: left;
}

.fishermans-detail table td {
  border-right: 2px solid #fff;
}

.fishermans-detail table td:last-child {
  border-right: 0;
}

.fishermans-detail table tr th:last-of-type {
  border-left: 2px solid #fff;
}

.fishermans-detail table tr:last-of-type th,
.fishermans-detail table tr:last-of-type td {
  border-bottom: 0;
}

.fishermans-point {
  text-align: center;
  margin: 0 auto 40px;
}
.fishermans-point.left {
  text-align: left;
}
.fishermans-point h3 {
  font-size: 22px;
  color: #3677d0;
}
.fishermans-point ul {
  display: inline-block;
}
.fishermans-point ul li {
  text-align: left;
}

.fishermans-detail .flow-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 50px;
}

.fishermans-detail .flow-content .photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.fishermans-detail .flow-content .photo img {
  margin-top: 30px;
}

.fishermans-detail .flow-content .photo img:first-of-type {
  margin-top: 15px;
}

.fishermans-detail .flow-content .photo.mt img:first-of-type {
  margin-top: 40px;
}

.fishermans-detail .flow-content .body-wrap {
  max-width: 700px;
  width: 100%;
}

.fishermans-detail .flow-content .body {
  position: relative;
  margin-top: 0.35em;
}

.fishermans-detail .flow-content .body .time {
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.fishermans-detail .flow-content .body li {
  position: relative;
  background-color: #edf5ff;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #fff;
  padding-left: 20px;
}
.fishermans-detail .flow-content .body li span {
  padding-right: 20px;
  font-weight: bold;
}
.fishermans-detail .flow-content .body li::after {
  display: block;
  content: "";
  background-image: url(../course/images/fishermans/ico_arrow_gray.png);
  width: 12px;
  height: 6px;
  position: absolute;
  left: 34px;
  bottom: -5px;
  z-index: 99;
}
.fishermans-detail .flow-content .body li:last-of-type::after {
  display: none;
}

.fishermans-detail .flow-content .body p {
  font-size: 14px;
  margin-top: 25px;
}

.fishermans-detail .flow-detail {
  border: 1px solid #cccccc;
  padding: 25px;
  margin: 50px auto 30px;
}
.fishermans-detail .flow-detail li {
  font-size: 14px;
}

/* PC */
@media (min-width: 821px) {
  .fishermans-title .photo {
    position: absolute;
    top: -50px;
  }
  .fishermans-title .body {
    width: 550px;
    margin-left: auto;
    padding: 40px 100px 30px;
  }
}
@media (min-width: 769px) {
  .localnav-fishermans a:hover::before {
    display: inline-block;
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/arrow_b_white.svg) no-repeat 0 0;
    background-size: 1.25rem 1.25rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .localnav-fishermans a:hover {
    background-color: #3677d0;
    color: #fff;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
/* SP */
@media (max-width: 820px) {
  #fishermans .breadcrumb {
    width: auto;
  }
  #fishermans .plan-fishermans .inner {
    width: 90%;
    padding: 30px 0 0;
  }
  .localnav-fishermans a {
    height: auto;
    line-height: 1.6;
    padding: 10px 0;
  }
  .fishermans-title .photo {
    text-align: center;
    width: 90%;
    margin: auto;
  }
  .fishermans-title .photo span {
    margin: 10px auto 20px;
  }
  .fishermans-title .body {
    margin: auto;
    padding: 30px;
    width: 90%;
  }
  .fishermans-detail .flow-content .title {
    width: 20%;
  }
  .fishermans-detail .flow-content .body-wrap {
    width: 75%;
  }
}
@media (max-width: 769px) {
  colgroup {
    display: none;
  }
  #fishermans .plan-introduction > .lead {
    margin-top: 0;
  }
  #fishermans .table-detail {
    display: block;
    margin-bottom: 20px;
  }
  #fishermans .table-detail .photo {
    text-align: center;
    margin-top: 20px;
  }
  .about-fishermans {
    display: block;
  }
  .about-fishermans .photo,
  .about-fishermans .body {
    width: 100%;
  }
  .about-fishermans .body {
    margin-top: 20px;
  }
  .localnav-fishermans {
    display: block;
  }
  .localnav-fishermans a:first-of-type,
  .localnav-fishermans a:last-of-type {
    border-radius: 200px;
    margin-bottom: 10px;
    text-align: center;
    border: 0;
    width: 90%;
    margin: 0 auto 20px;
  }
  .fishermans-title {
    margin-top: 40px;
  }
  .fishermans-title .body h2 {
    font-size: 26px;
  }
  .fishermans-detail table {
    width: 100%;
    margin-top: 20px;
  }
  .fishermans-detail table th,
  .fishermans-detail table td {
    display: block;
    border-right: 0 !important;
    border-left: 0 !important;
  }
  .fishermans-detail table th {
    background-color: #ddeafb;
  }
  .fishermans-detail table tr:last-of-type th {
    border-bottom: 2px solid #fff;
  }
  .site-content > .section.plan-fishermans .inner {
    padding-right: 0;
    padding-left: 0;
  }
  .fishermans-detail .only-pc {
    display: none;
  }
  .fishermans-detail .flow-content {
    display: block;
  }
  .fishermans-detail .flow-content .title,
  .fishermans-detail .flow-content .body-wrap,
  .fishermans-detail .flow-content .body {
    width: 100%;
  }
  .fishermans-detail .flow-content .body {
    margin-top: 20px;
  }
  .fishermans-detail .flow-content .scroll {
    overflow: scroll;
  }
  .fishermans-detail .flow-content .scroll .body {
    width: 660px;
    margin: 20px auto 0;
  }
  .fishermans-detail .flow-content .photo {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  .fishermans-detail .flow-content .photo img,
  .fishermans-detail .flow-content .photo img:first-of-type,
  .fishermans-detail .flow-content .photo.mt img:first-of-type {
    width: 49%;
    margin-top: 15px;
  }
}/*# sourceMappingURL=style.css.map */